diff --git a/.github/DISCUSSION_TEMPLATE/blocks-request.yml b/.github/DISCUSSION_TEMPLATE/blocks-request.yml
new file mode 100644
index 00000000..d23ca304
--- /dev/null
+++ b/.github/DISCUSSION_TEMPLATE/blocks-request.yml
@@ -0,0 +1,25 @@
+title: "[blocks]: "
+labels: ["Blocks Request"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ### Thanks for taking the time to create a block request! Please search open/closed requests before submitting, as the block or a similar one may have already been requested.
+
+  - type: textarea
+    id: block-description
+    attributes:
+      label: Description
+      description: Tell us about your block request
+      placeholder: "A dashboard for an e-commerce website showing sales, orders, and customers..."
+    validations:
+      required: true
+
+  - type: input
+    id: block-example-url
+    attributes:
+      label: Example
+      description: Link to an example of the block
+      placeholder: ex. https://example.com
+    validations:
+      required: false
diff --git a/.github/workflows/code-check.yml b/.github/workflows/code-check.yml
index c1435ba8..5d6ed986 100644
--- a/.github/workflows/code-check.yml
+++ b/.github/workflows/code-check.yml
@@ -5,9 +5,9 @@ on:
     branches: ["*"]
 
 jobs:
-  lint:
+  biome:
     runs-on: ubuntu-latest
-    name: pnpm lint
+    name: pnpm biome check
     steps:
       - uses: actions/checkout@v3
         with:
@@ -16,13 +16,13 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 9.4.0
+          version: 9.0.6
           run_install: false
 
       - name: Get pnpm store directory
@@ -39,13 +39,49 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - run: pnpm lint
+      - run: pnpm biome check
+
+  format:
+    runs-on: ubuntu-latest
+    name: pnpm format:check
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 9.0.6
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - run: pnpm format:check
 
   tsc:
     runs-on: ubuntu-latest
     name: pnpm typecheck
-    env:
-      NEXT_PUBLIC_APP_URL: http://localhost:3001
     steps:
       - uses: actions/checkout@v3
         with:
@@ -54,13 +90,13 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 9.4.0
+          version: 9.0.6
           run_install: false
 
       - name: Get pnpm store directory
@@ -77,4 +113,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build packages
+        run: pnpm --filter=shadcn build
+
       - run: pnpm typecheck
diff --git a/.npmrc b/.npmrc
index 3e775efb..6613b112 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
 auto-install-peers=true
+link-workspace-packages=true
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9f6832ff..47781c38 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,54 +1,43 @@
 {
+   // Biome as default formatter for different file types
+   "[javascript]": {
+      "editor.defaultFormatter": "biomejs.biome"
+   },
+   "[typescript]": {
+      "editor.defaultFormatter": "biomejs.biome"
+   },
+   "[javascriptreact]": {
+      "editor.defaultFormatter": "biomejs.biome"
+   },
+   "[typescriptreact]": {
+      "editor.defaultFormatter": "biomejs.biome"
+   },
+   "[json]": {
+      "editor.defaultFormatter": "biomejs.biome"
+   },
+   "[jsonc]": {
+      "editor.defaultFormatter": "biomejs.biome"
+   },
 
-  // Disable the default formatter, use eslint instead
-  "prettier.enable": false,
-  "editor.formatOnSave": false,
+   // Automatic formatting on save
+   "editor.formatOnSave": true,
 
-  // Auto fix
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
-    "source.organizeImports": "never"
-  },
+   // Automatic fixes on save
+   "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports.biome": "explicit"
+   },
 
-  // Silent the stylistic rules in you IDE, but still auto fix them
-  "eslint.rules.customizations": [
-    { "rule": "style/*", "severity": "warn" },
-    { "rule": "format/*", "severity": "warn" },
-    { "rule": "*-indent", "severity": "warn" },
-    { "rule": "*-spacing", "severity": "warn" },
-    { "rule": "*-spaces", "severity": "warn" },
-    { "rule": "*-order", "severity": "warn" },
-    { "rule": "*-dangle", "severity": "warn" },
-    { "rule": "*-newline", "severity": "warn" },
-    { "rule": "*quotes", "severity": "warn" },
-    { "rule": "*semi", "severity": "warn" }
-  ],
+   // Optional: Experimental feature for renaming
+   "biome.rename": true,
 
-  // Enable eslint for all supported languages
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "vue",
-    "html",
-    "markdown",
-    "json",
-    "jsonc",
-    "yaml",
-    "toml",
-    "xml",
-    "gql",
-    "graphql",
-    "astro"
-  ],
-  "search.useIgnoreFiles": true,
-  "cSpell.words": [
-   "customizer",
-   "dracula",
-   "occured",
-   "pullup",
-   "saas",
-   "shadcn"
-]
+   "search.useIgnoreFiles": true,
+   "cSpell.words": [
+      "customizer",
+      "dracula",
+      "occured",
+      "pullup",
+      "saas",
+      "shadcn"
+   ]
 }
diff --git a/apps/web/__registry__/README.md b/apps/web/__registry__/README.md
index 5621ceac..29d54812 100644
--- a/apps/web/__registry__/README.md
+++ b/apps/web/__registry__/README.md
@@ -1 +1 @@
-> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.** - shadcn
+> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.** - nyxb
diff --git a/apps/web/__registry__/default/block/_sink/page.tsx b/apps/web/__registry__/default/block/_sink/page.tsx
index c572762c..8171ec76 100644
--- a/apps/web/__registry__/default/block/_sink/page.tsx
+++ b/apps/web/__registry__/default/block/_sink/page.tsx
@@ -1,64 +1,64 @@
-import { AccordionDemo } from '~/registry/default/block/_sink/components/accordion-demo'
-import { AlertDemo } from '~/registry/default/block/_sink/components/alert-demo'
-import { AlertDialogDemo } from '~/registry/default/block/_sink/components/alert-dialog-demo'
-import { AppSidebar } from '~/registry/default/block/_sink/components/app-sidebar'
-import { AspectRatioDemo } from '~/registry/default/block/_sink/components/aspect-ratio-demo'
-import { AvatarDemo } from '~/registry/default/block/_sink/components/avatar-demo'
-import { BadgeDemo } from '~/registry/default/block/_sink/components/badge-demo'
-import { BadgeDestructive } from '~/registry/default/block/_sink/components/badge-destructive'
-import { BadgeOutline } from '~/registry/default/block/_sink/components/badge-outline'
-import { BadgeSecondary } from '~/registry/default/block/_sink/components/badge-secondary'
-import { BreadcrumbDemo } from '~/registry/default/block/_sink/components/breadcrumb-demo'
-import { ButtonDemo } from '~/registry/default/block/_sink/components/button-demo'
-import { ButtonDestructive } from '~/registry/default/block/_sink/components/button-destructive'
-import { ButtonGhost } from '~/registry/default/block/_sink/components/button-ghost'
-import { ButtonLink } from '~/registry/default/block/_sink/components/button-link'
-import { ButtonLoading } from '~/registry/default/block/_sink/components/button-loading'
-import { ButtonOutline } from '~/registry/default/block/_sink/components/button-outline'
-import { ButtonSecondary } from '~/registry/default/block/_sink/components/button-secondary'
-import { ButtonWithIcon } from '~/registry/default/block/_sink/components/button-with-icon'
-import { CalendarDemo } from '~/registry/default/block/_sink/components/calendar-demo'
-import { CardDemo } from '~/registry/default/block/_sink/components/card-demo'
-import { CarouselDemo } from '~/registry/default/block/_sink/components/carousel-demo'
-import { CheckboxDemo } from '~/registry/default/block/_sink/components/checkbox-demo'
-import { CollapsibleDemo } from '~/registry/default/block/_sink/components/collapsible-demo'
-import { ComboboxDemo } from '~/registry/default/block/_sink/components/combobox-demo'
-import { CommandDemo } from '~/registry/default/block/_sink/components/command-demo'
-import { ComponentWrapper } from '~/registry/default/block/_sink/components/component-wrapper'
-import { ContextMenuDemo } from '~/registry/default/block/_sink/components/context-menu-demo'
-import { DatePickerDemo } from '~/registry/default/block/_sink/components/date-picker-demo'
-import { DialogDemo } from '~/registry/default/block/_sink/components/dialog-demo'
-import { DrawerDemo } from '~/registry/default/block/_sink/components/drawer-demo'
-import { DropdownMenuDemo } from '~/registry/default/block/_sink/components/dropdown-menu-demo'
-import { HoverCardDemo } from '~/registry/default/block/_sink/components/hover-card-demo'
-import { InputDemo } from '~/registry/default/block/_sink/components/input-demo'
-import { InputOTPDemo } from '~/registry/default/block/_sink/components/input-otp-demo'
-import { LabelDemo } from '~/registry/default/block/_sink/components/label-demo'
-import { MenubarDemo } from '~/registry/default/block/_sink/components/menubar-demo'
-import { NavigationMenuDemo } from '~/registry/default/block/_sink/components/navigation-menu-demo'
-import { PaginationDemo } from '~/registry/default/block/_sink/components/pagination-demo'
-import { PopoverDemo } from '~/registry/default/block/_sink/components/popover-demo'
-import { ProgressDemo } from '~/registry/default/block/_sink/components/progress-demo'
-import { RadioGroupDemo } from '~/registry/default/block/_sink/components/radio-group-demo'
-import { ResizableHandleDemo } from '~/registry/default/block/_sink/components/resizable-handle'
-import { ScrollAreaDemo } from '~/registry/default/block/_sink/components/scroll-area-demo'
-import { SelectDemo } from '~/registry/default/block/_sink/components/select-demo'
-import { SeparatorDemo } from '~/registry/default/block/_sink/components/separator-demo'
-import { SheetDemo } from '~/registry/default/block/_sink/components/sheet-demo'
-import { SkeletonDemo } from '~/registry/default/block/_sink/components/skeleton-demo'
-import { SliderDemo } from '~/registry/default/block/_sink/components/slider-demo'
-import { SonnerDemo } from '~/registry/default/block/_sink/components/sonner-demo'
-import { SwitchDemo } from '~/registry/default/block/_sink/components/switch-demo'
-import { TableDemo } from '~/registry/default/block/_sink/components/table-demo'
-import { TabsDemo } from '~/registry/default/block/_sink/components/tabs-demo'
-import { TextareaDemo } from '~/registry/default/block/_sink/components/textarea-demo'
-import { ToastDemo } from '~/registry/default/block/_sink/components/toast-demo'
-import { ToggleDemo } from '~/registry/default/block/_sink/components/toggle-demo'
-import { ToggleDisabled } from '~/registry/default/block/_sink/components/toggle-disabled'
-import { ToggleGroupDemo } from '~/registry/default/block/_sink/components/toggle-group-demo'
-import { ToggleOutline } from '~/registry/default/block/_sink/components/toggle-outline'
-import { ToggleWithText } from '~/registry/default/block/_sink/components/toggle-with-text'
-import { TooltipDemo } from '~/registry/default/block/_sink/components/tooltip-demo'
+import { AccordionDemo } from "~/registry/default/block/_sink/components/accordion-demo"
+import { AlertDemo } from "~/registry/default/block/_sink/components/alert-demo"
+import { AlertDialogDemo } from "~/registry/default/block/_sink/components/alert-dialog-demo"
+import { AppSidebar } from "~/registry/default/block/_sink/components/app-sidebar"
+import { AspectRatioDemo } from "~/registry/default/block/_sink/components/aspect-ratio-demo"
+import { AvatarDemo } from "~/registry/default/block/_sink/components/avatar-demo"
+import { BadgeDemo } from "~/registry/default/block/_sink/components/badge-demo"
+import { BadgeDestructive } from "~/registry/default/block/_sink/components/badge-destructive"
+import { BadgeOutline } from "~/registry/default/block/_sink/components/badge-outline"
+import { BadgeSecondary } from "~/registry/default/block/_sink/components/badge-secondary"
+import { BreadcrumbDemo } from "~/registry/default/block/_sink/components/breadcrumb-demo"
+import { ButtonDemo } from "~/registry/default/block/_sink/components/button-demo"
+import { ButtonDestructive } from "~/registry/default/block/_sink/components/button-destructive"
+import { ButtonGhost } from "~/registry/default/block/_sink/components/button-ghost"
+import { ButtonLink } from "~/registry/default/block/_sink/components/button-link"
+import { ButtonLoading } from "~/registry/default/block/_sink/components/button-loading"
+import { ButtonOutline } from "~/registry/default/block/_sink/components/button-outline"
+import { ButtonSecondary } from "~/registry/default/block/_sink/components/button-secondary"
+import { ButtonWithIcon } from "~/registry/default/block/_sink/components/button-with-icon"
+import { CalendarDemo } from "~/registry/default/block/_sink/components/calendar-demo"
+import { CardDemo } from "~/registry/default/block/_sink/components/card-demo"
+import { CarouselDemo } from "~/registry/default/block/_sink/components/carousel-demo"
+import { CheckboxDemo } from "~/registry/default/block/_sink/components/checkbox-demo"
+import { CollapsibleDemo } from "~/registry/default/block/_sink/components/collapsible-demo"
+import { ComboboxDemo } from "~/registry/default/block/_sink/components/combobox-demo"
+import { CommandDemo } from "~/registry/default/block/_sink/components/command-demo"
+import { ComponentWrapper } from "~/registry/default/block/_sink/components/component-wrapper"
+import { ContextMenuDemo } from "~/registry/default/block/_sink/components/context-menu-demo"
+import { DatePickerDemo } from "~/registry/default/block/_sink/components/date-picker-demo"
+import { DialogDemo } from "~/registry/default/block/_sink/components/dialog-demo"
+import { DrawerDemo } from "~/registry/default/block/_sink/components/drawer-demo"
+import { DropdownMenuDemo } from "~/registry/default/block/_sink/components/dropdown-menu-demo"
+import { HoverCardDemo } from "~/registry/default/block/_sink/components/hover-card-demo"
+import { InputDemo } from "~/registry/default/block/_sink/components/input-demo"
+import { InputOTPDemo } from "~/registry/default/block/_sink/components/input-otp-demo"
+import { LabelDemo } from "~/registry/default/block/_sink/components/label-demo"
+import { MenubarDemo } from "~/registry/default/block/_sink/components/menubar-demo"
+import { NavigationMenuDemo } from "~/registry/default/block/_sink/components/navigation-menu-demo"
+import { PaginationDemo } from "~/registry/default/block/_sink/components/pagination-demo"
+import { PopoverDemo } from "~/registry/default/block/_sink/components/popover-demo"
+import { ProgressDemo } from "~/registry/default/block/_sink/components/progress-demo"
+import { RadioGroupDemo } from "~/registry/default/block/_sink/components/radio-group-demo"
+import { ResizableHandleDemo } from "~/registry/default/block/_sink/components/resizable-handle"
+import { ScrollAreaDemo } from "~/registry/default/block/_sink/components/scroll-area-demo"
+import { SelectDemo } from "~/registry/default/block/_sink/components/select-demo"
+import { SeparatorDemo } from "~/registry/default/block/_sink/components/separator-demo"
+import { SheetDemo } from "~/registry/default/block/_sink/components/sheet-demo"
+import { SkeletonDemo } from "~/registry/default/block/_sink/components/skeleton-demo"
+import { SliderDemo } from "~/registry/default/block/_sink/components/slider-demo"
+import { SonnerDemo } from "~/registry/default/block/_sink/components/sonner-demo"
+import { SwitchDemo } from "~/registry/default/block/_sink/components/switch-demo"
+import { TableDemo } from "~/registry/default/block/_sink/components/table-demo"
+import { TabsDemo } from "~/registry/default/block/_sink/components/tabs-demo"
+import { TextareaDemo } from "~/registry/default/block/_sink/components/textarea-demo"
+import { ToastDemo } from "~/registry/default/block/_sink/components/toast-demo"
+import { ToggleDemo } from "~/registry/default/block/_sink/components/toggle-demo"
+import { ToggleDisabled } from "~/registry/default/block/_sink/components/toggle-disabled"
+import { ToggleGroupDemo } from "~/registry/default/block/_sink/components/toggle-group-demo"
+import { ToggleOutline } from "~/registry/default/block/_sink/components/toggle-outline"
+import { ToggleWithText } from "~/registry/default/block/_sink/components/toggle-with-text"
+import { TooltipDemo } from "~/registry/default/block/_sink/components/tooltip-demo"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -66,13 +66,13 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 export default function SinkPage() {
    return (
@@ -197,7 +197,10 @@ export default function SinkPage() {
                   <ComponentWrapper name="Menubar">
                      <MenubarDemo />
                   </ComponentWrapper>
-                  <ComponentWrapper name="NavigationMenu" className="col-span-2">
+                  <ComponentWrapper
+                     name="NavigationMenu"
+                     className="col-span-2"
+                  >
                      <NavigationMenuDemo />
                   </ComponentWrapper>
                   <ComponentWrapper name="Pagination">
diff --git a/apps/web/__registry__/default/block/authentication-01.tsx b/apps/web/__registry__/default/block/authentication-01.tsx
index faf4c266..a9c656d4 100644
--- a/apps/web/__registry__/default/block/authentication-01.tsx
+++ b/apps/web/__registry__/default/block/authentication-01.tsx
@@ -1,4 +1,4 @@
-import { Button } from '~/registry/default/ui/button'
+import { Button } from "~/registry/default/ui/button"
 import {
    Card,
    CardContent,
@@ -6,17 +6,17 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
+} from "~/registry/default/ui/card"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
 
-export const description
-  = 'A simple login form with email and password. The submit button says \'Sign in\'.'
+export const description =
+   "A simple login form with email and password. The submit button says 'Sign in'."
 
-export const iframeHeight = '600px'
+export const iframeHeight = "600px"
 
-export const containerClassName
-  = 'w-full h-screen flex items-center justify-center px-4'
+export const containerClassName =
+   "w-full h-screen flex items-center justify-center px-4"
 
 export default function LoginForm() {
    return (
@@ -30,7 +30,12 @@ export default function LoginForm() {
          <CardContent className="grid gap-4">
             <div className="grid gap-2">
                <Label htmlFor="email">Email</Label>
-               <Input id="email" type="email" placeholder="m@example.com" required />
+               <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+               />
             </div>
             <div className="grid gap-2">
                <Label htmlFor="password">Password</Label>
diff --git a/apps/web/__registry__/default/block/authentication-02.tsx b/apps/web/__registry__/default/block/authentication-02.tsx
index 07ac9580..7511dc80 100644
--- a/apps/web/__registry__/default/block/authentication-02.tsx
+++ b/apps/web/__registry__/default/block/authentication-02.tsx
@@ -1,23 +1,23 @@
-import Link from 'next/link'
+import Link from "next/link"
 
-import { Button } from '~/registry/default/ui/button'
+import { Button } from "~/registry/default/ui/button"
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
+} from "~/registry/default/ui/card"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
 
-export const description
-  = 'A login form with email and password. There\'s an option to login with Google and a link to sign up if you don\'t have an account.'
+export const description =
+   "A login form with email and password. There's an option to login with Google and a link to sign up if you don't have an account."
 
-export const iframeHeight = '600px'
+export const iframeHeight = "600px"
 
-export const containerClassName
-  = 'w-full h-screen flex items-center justify-center px-4'
+export const containerClassName =
+   "w-full h-screen flex items-center justify-center px-4"
 
 export default function LoginForm() {
    return (
@@ -42,7 +42,10 @@ export default function LoginForm() {
                <div className="grid gap-2">
                   <div className="flex items-center">
                      <Label htmlFor="password">Password</Label>
-                     <Link href="#" className="ml-auto inline-block text-sm underline">
+                     <Link
+                        href="#"
+                        className="ml-auto inline-block text-sm underline"
+                     >
                         Forgot your password?
                      </Link>
                   </div>
@@ -56,8 +59,7 @@ export default function LoginForm() {
                </Button>
             </div>
             <div className="mt-4 text-center text-sm">
-               Don&apos;t have an account?
-               {' '}
+               Don&apos;t have an account?{" "}
                <Link href="#" className="underline">
                   Sign up
                </Link>
diff --git a/apps/web/__registry__/default/block/authentication-03.tsx b/apps/web/__registry__/default/block/authentication-03.tsx
index f2f880f1..0f373665 100644
--- a/apps/web/__registry__/default/block/authentication-03.tsx
+++ b/apps/web/__registry__/default/block/authentication-03.tsx
@@ -1,23 +1,23 @@
-import Link from 'next/link'
+import Link from "next/link"
 
-import { Button } from '~/registry/default/ui/button'
+import { Button } from "~/registry/default/ui/button"
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
+} from "~/registry/default/ui/card"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
 
-export const description
-  = 'A sign up form with first name, last name, email and password inside a card. There\'s an option to sign up with GitHub and a link to login if you already have an account'
+export const description =
+   "A sign up form with first name, last name, email and password inside a card. There's an option to sign up with GitHub and a link to login if you already have an account"
 
-export const iframeHeight = '600px'
+export const iframeHeight = "600px"
 
-export const containerClassName
-  = 'w-full h-screen flex items-center justify-center px-4'
+export const containerClassName =
+   "w-full h-screen flex items-center justify-center px-4"
 
 export default function LoginForm() {
    return (
@@ -61,8 +61,7 @@ export default function LoginForm() {
                </Button>
             </div>
             <div className="mt-4 text-center text-sm">
-               Already have an account?
-               {' '}
+               Already have an account?{" "}
                <Link href="#" className="underline">
                   Sign in
                </Link>
diff --git a/apps/web/__registry__/default/block/authentication-04.tsx b/apps/web/__registry__/default/block/authentication-04.tsx
index 0817239f..73bf4709 100644
--- a/apps/web/__registry__/default/block/authentication-04.tsx
+++ b/apps/web/__registry__/default/block/authentication-04.tsx
@@ -1,16 +1,16 @@
-import Image from 'next/image'
-import Link from 'next/link'
+import Image from "next/image"
+import Link from "next/link"
 
-import { Button } from '~/registry/default/ui/button'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
+import { Button } from "~/registry/default/ui/button"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
 
-export const description
-  = 'A login page with two columns. The first column has the login form with email and password. There\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'
+export const description =
+   "A login page with two columns. The first column has the login form with email and password. There's a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image."
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const containerClassName = 'w-full h-full p-4 lg:p-0'
+export const containerClassName = "w-full h-full p-4 lg:p-0"
 
 export default function Dashboard() {
    return (
@@ -53,8 +53,7 @@ export default function Dashboard() {
                   </Button>
                </div>
                <div className="mt-4 text-center text-sm">
-                  Don&apos;t have an account?
-                  {' '}
+                  Don&apos;t have an account?{" "}
                   <Link href="#" className="underline">
                      Sign up
                   </Link>
diff --git a/apps/web/__registry__/default/block/chart-area-axes.tsx b/apps/web/__registry__/default/block/chart-area-axes.tsx
index 47364aac..a4e9ba50 100644
--- a/apps/web/__registry__/default/block/chart-area-axes.tsx
+++ b/apps/web/__registry__/default/block/chart-area-axes.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'An area chart with axes'
+export const description = "An area chart with axes"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -67,7 +65,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <YAxis
                      tickLine={false}
@@ -75,7 +73,10 @@ export default function Component() {
                      tickMargin={8}
                      tickCount={3}
                   />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
                   <Area
                      dataKey="mobile"
                      type="natural"
@@ -99,8 +100,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/default/block/chart-area-default.tsx b/apps/web/__registry__/default/block/chart-area-default.tsx
index 948ae8b1..6b744a14 100644
--- a/apps/web/__registry__/default/block/chart-area-default.tsx
+++ b/apps/web/__registry__/default/block/chart-area-default.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A simple area chart'
+export const description = "A simple area chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -63,7 +61,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -83,8 +81,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/default/block/chart-area-gradient.tsx b/apps/web/__registry__/default/block/chart-area-gradient.tsx
index 8b50e75f..dfe24a03 100644
--- a/apps/web/__registry__/default/block/chart-area-gradient.tsx
+++ b/apps/web/__registry__/default/block/chart-area-gradient.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'An area chart with gradient fill'
+export const description = "An area chart with gradient fill"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -67,11 +65,20 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
                   />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
                   <defs>
-                     <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                     <linearGradient
+                        id="fillDesktop"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
                         <stop
                            offset="5%"
                            stopColor="var(--color-desktop)"
@@ -83,7 +90,13 @@ export default function Component() {
                            stopOpacity={0.1}
                         />
                      </linearGradient>
-                     <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                     <linearGradient
+                        id="fillMobile"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
                         <stop
                            offset="5%"
                            stopColor="var(--color-mobile)"
@@ -119,8 +132,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/default/block/chart-area-icons.tsx b/apps/web/__registry__/default/block/chart-area-icons.tsx
index 8dc41fa8..690c9342 100644
--- a/apps/web/__registry__/default/block/chart-area-icons.tsx
+++ b/apps/web/__registry__/default/block/chart-area-icons.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingDown, TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingDown, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,38 +10,36 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'An area chart with icons'
+export const description = "An area chart with icons"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
       icon: TrendingDown,
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
       icon: TrendingUp,
    },
 } satisfies ChartConfig
@@ -71,7 +69,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -101,8 +99,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/default/block/chart-area-interactive.tsx b/apps/web/__registry__/default/block/chart-area-interactive.tsx
index 779569b6..2b90917f 100644
--- a/apps/web/__registry__/default/block/chart-area-interactive.tsx
+++ b/apps/web/__registry__/default/block/chart-area-interactive.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -9,146 +9,143 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/default/ui/select'
+} from "~/registry/default/ui/select"
 
-export const description = 'An interactive area chart'
+export const description = "An interactive area chart"
 
 const chartData = [
-   { date: '2024-04-01', desktop: 222, mobile: 150 },
-   { date: '2024-04-02', desktop: 97, mobile: 180 },
-   { date: '2024-04-03', desktop: 167, mobile: 120 },
-   { date: '2024-04-04', desktop: 242, mobile: 260 },
-   { date: '2024-04-05', desktop: 373, mobile: 290 },
-   { date: '2024-04-06', desktop: 301, mobile: 340 },
-   { date: '2024-04-07', desktop: 245, mobile: 180 },
-   { date: '2024-04-08', desktop: 409, mobile: 320 },
-   { date: '2024-04-09', desktop: 59, mobile: 110 },
-   { date: '2024-04-10', desktop: 261, mobile: 190 },
-   { date: '2024-04-11', desktop: 327, mobile: 350 },
-   { date: '2024-04-12', desktop: 292, mobile: 210 },
-   { date: '2024-04-13', desktop: 342, mobile: 380 },
-   { date: '2024-04-14', desktop: 137, mobile: 220 },
-   { date: '2024-04-15', desktop: 120, mobile: 170 },
-   { date: '2024-04-16', desktop: 138, mobile: 190 },
-   { date: '2024-04-17', desktop: 446, mobile: 360 },
-   { date: '2024-04-18', desktop: 364, mobile: 410 },
-   { date: '2024-04-19', desktop: 243, mobile: 180 },
-   { date: '2024-04-20', desktop: 89, mobile: 150 },
-   { date: '2024-04-21', desktop: 137, mobile: 200 },
-   { date: '2024-04-22', desktop: 224, mobile: 170 },
-   { date: '2024-04-23', desktop: 138, mobile: 230 },
-   { date: '2024-04-24', desktop: 387, mobile: 290 },
-   { date: '2024-04-25', desktop: 215, mobile: 250 },
-   { date: '2024-04-26', desktop: 75, mobile: 130 },
-   { date: '2024-04-27', desktop: 383, mobile: 420 },
-   { date: '2024-04-28', desktop: 122, mobile: 180 },
-   { date: '2024-04-29', desktop: 315, mobile: 240 },
-   { date: '2024-04-30', desktop: 454, mobile: 380 },
-   { date: '2024-05-01', desktop: 165, mobile: 220 },
-   { date: '2024-05-02', desktop: 293, mobile: 310 },
-   { date: '2024-05-03', desktop: 247, mobile: 190 },
-   { date: '2024-05-04', desktop: 385, mobile: 420 },
-   { date: '2024-05-05', desktop: 481, mobile: 390 },
-   { date: '2024-05-06', desktop: 498, mobile: 520 },
-   { date: '2024-05-07', desktop: 388, mobile: 300 },
-   { date: '2024-05-08', desktop: 149, mobile: 210 },
-   { date: '2024-05-09', desktop: 227, mobile: 180 },
-   { date: '2024-05-10', desktop: 293, mobile: 330 },
-   { date: '2024-05-11', desktop: 335, mobile: 270 },
-   { date: '2024-05-12', desktop: 197, mobile: 240 },
-   { date: '2024-05-13', desktop: 197, mobile: 160 },
-   { date: '2024-05-14', desktop: 448, mobile: 490 },
-   { date: '2024-05-15', desktop: 473, mobile: 380 },
-   { date: '2024-05-16', desktop: 338, mobile: 400 },
-   { date: '2024-05-17', desktop: 499, mobile: 420 },
-   { date: '2024-05-18', desktop: 315, mobile: 350 },
-   { date: '2024-05-19', desktop: 235, mobile: 180 },
-   { date: '2024-05-20', desktop: 177, mobile: 230 },
-   { date: '2024-05-21', desktop: 82, mobile: 140 },
-   { date: '2024-05-22', desktop: 81, mobile: 120 },
-   { date: '2024-05-23', desktop: 252, mobile: 290 },
-   { date: '2024-05-24', desktop: 294, mobile: 220 },
-   { date: '2024-05-25', desktop: 201, mobile: 250 },
-   { date: '2024-05-26', desktop: 213, mobile: 170 },
-   { date: '2024-05-27', desktop: 420, mobile: 460 },
-   { date: '2024-05-28', desktop: 233, mobile: 190 },
-   { date: '2024-05-29', desktop: 78, mobile: 130 },
-   { date: '2024-05-30', desktop: 340, mobile: 280 },
-   { date: '2024-05-31', desktop: 178, mobile: 230 },
-   { date: '2024-06-01', desktop: 178, mobile: 200 },
-   { date: '2024-06-02', desktop: 470, mobile: 410 },
-   { date: '2024-06-03', desktop: 103, mobile: 160 },
-   { date: '2024-06-04', desktop: 439, mobile: 380 },
-   { date: '2024-06-05', desktop: 88, mobile: 140 },
-   { date: '2024-06-06', desktop: 294, mobile: 250 },
-   { date: '2024-06-07', desktop: 323, mobile: 370 },
-   { date: '2024-06-08', desktop: 385, mobile: 320 },
-   { date: '2024-06-09', desktop: 438, mobile: 480 },
-   { date: '2024-06-10', desktop: 155, mobile: 200 },
-   { date: '2024-06-11', desktop: 92, mobile: 150 },
-   { date: '2024-06-12', desktop: 492, mobile: 420 },
-   { date: '2024-06-13', desktop: 81, mobile: 130 },
-   { date: '2024-06-14', desktop: 426, mobile: 380 },
-   { date: '2024-06-15', desktop: 307, mobile: 350 },
-   { date: '2024-06-16', desktop: 371, mobile: 310 },
-   { date: '2024-06-17', desktop: 475, mobile: 520 },
-   { date: '2024-06-18', desktop: 107, mobile: 170 },
-   { date: '2024-06-19', desktop: 341, mobile: 290 },
-   { date: '2024-06-20', desktop: 408, mobile: 450 },
-   { date: '2024-06-21', desktop: 169, mobile: 210 },
-   { date: '2024-06-22', desktop: 317, mobile: 270 },
-   { date: '2024-06-23', desktop: 480, mobile: 530 },
-   { date: '2024-06-24', desktop: 132, mobile: 180 },
-   { date: '2024-06-25', desktop: 141, mobile: 190 },
-   { date: '2024-06-26', desktop: 434, mobile: 380 },
-   { date: '2024-06-27', desktop: 448, mobile: 490 },
-   { date: '2024-06-28', desktop: 149, mobile: 200 },
-   { date: '2024-06-29', desktop: 103, mobile: 160 },
-   { date: '2024-06-30', desktop: 446, mobile: 400 },
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
 export default function Component() {
-   const [timeRange, setTimeRange] = React.useState('90d')
+   const [timeRange, setTimeRange] = React.useState("90d")
 
    const filteredData = chartData.filter((item) => {
       const date = new Date(item.date)
       const now = new Date()
       let daysToSubtract = 90
-      if (timeRange === '30d') {
+      if (timeRange === "30d") {
          daysToSubtract = 30
-      }
-      else if (timeRange === '7d') {
+      } else if (timeRange === "7d") {
          daysToSubtract = 7
       }
       now.setDate(now.getDate() - daysToSubtract)
@@ -191,7 +188,13 @@ export default function Component() {
             >
                <AreaChart data={filteredData}>
                   <defs>
-                     <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                     <linearGradient
+                        id="fillDesktop"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
                         <stop
                            offset="5%"
                            stopColor="var(--color-desktop)"
@@ -203,7 +206,13 @@ export default function Component() {
                            stopOpacity={0.1}
                         />
                      </linearGradient>
-                     <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                     <linearGradient
+                        id="fillMobile"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
                         <stop
                            offset="5%"
                            stopColor="var(--color-mobile)"
@@ -225,25 +234,28 @@ export default function Component() {
                      minTickGap={32}
                      tickFormatter={(value) => {
                         const date = new Date(value)
-                        return date.toLocaleDateString('en-US', {
-                           month: 'short',
-                           day: 'numeric',
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
                         })
                      }}
                   />
                   <ChartTooltip
                      cursor={false}
-                     content={(
+                     content={
                         <ChartTooltipContent
                            labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 month: 'short',
-                                 day: 'numeric',
-                              })
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                 },
+                              )
                            }}
                            indicator="dot"
                         />
-                     )}
+                     }
                   />
                   <Area
                      dataKey="mobile"
diff --git a/apps/web/__registry__/default/block/chart-area-legend.tsx b/apps/web/__registry__/default/block/chart-area-legend.tsx
index ce882e53..adaed5a4 100644
--- a/apps/web/__registry__/default/block/chart-area-legend.tsx
+++ b/apps/web/__registry__/default/block/chart-area-legend.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,37 +10,35 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'An area chart with a legend'
+export const description = "An area chart with a legend"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -69,7 +67,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -99,8 +97,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/default/block/chart-area-linear.tsx b/apps/web/__registry__/default/block/chart-area-linear.tsx
index ac0533c9..420fb965 100644
--- a/apps/web/__registry__/default/block/chart-area-linear.tsx
+++ b/apps/web/__registry__/default/block/chart-area-linear.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A linear area chart'
+export const description = "A linear area chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -63,7 +61,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -83,8 +81,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/default/block/chart-area-stacked-expand.tsx b/apps/web/__registry__/default/block/chart-area-stacked-expand.tsx
index 51a62bac..8254f759 100644
--- a/apps/web/__registry__/default/block/chart-area-stacked-expand.tsx
+++ b/apps/web/__registry__/default/block/chart-area-stacked-expand.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,39 +10,37 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A stacked area chart with expand stacking'
+export const description = "A stacked area chart with expand stacking"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80, other: 45 },
-   { month: 'February', desktop: 305, mobile: 200, other: 100 },
-   { month: 'March', desktop: 237, mobile: 120, other: 150 },
-   { month: 'April', desktop: 73, mobile: 190, other: 50 },
-   { month: 'May', desktop: 209, mobile: 130, other: 100 },
-   { month: 'June', desktop: 214, mobile: 140, other: 160 },
+   { month: "January", desktop: 186, mobile: 80, other: 45 },
+   { month: "February", desktop: 305, mobile: 200, other: 100 },
+   { month: "March", desktop: 237, mobile: 120, other: 150 },
+   { month: "April", desktop: 73, mobile: 190, other: 50 },
+   { month: "May", desktop: 209, mobile: 130, other: 100 },
+   { month: "June", desktop: 214, mobile: 140, other: 160 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-3))',
+      label: "Other",
+      color: "hsl(var(--chart-3))",
    },
 } satisfies ChartConfig
 
@@ -73,7 +71,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -110,8 +108,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/default/block/chart-area-stacked.tsx b/apps/web/__registry__/default/block/chart-area-stacked.tsx
index 3e34b73d..e6c3f80e 100644
--- a/apps/web/__registry__/default/block/chart-area-stacked.tsx
+++ b/apps/web/__registry__/default/block/chart-area-stacked.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A stacked area chart'
+export const description = "A stacked area chart"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -67,7 +65,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -96,8 +94,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/default/block/chart-area-step.tsx b/apps/web/__registry__/default/block/chart-area-step.tsx
index 2a51cd45..846e53b0 100644
--- a/apps/web/__registry__/default/block/chart-area-step.tsx
+++ b/apps/web/__registry__/default/block/chart-area-step.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { Activity, TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { Activity, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A step area chart'
+export const description = "A step area chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
       icon: Activity,
    },
 } satisfies ChartConfig
@@ -64,7 +62,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -84,8 +82,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/default/block/chart-bar-active.tsx b/apps/web/__registry__/default/block/chart-bar-active.tsx
index 037029db..e1425973 100644
--- a/apps/web/__registry__/default/block/chart-bar-active.tsx
+++ b/apps/web/__registry__/default/block/chart-bar-active.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A bar chart with an active bar'
+export const description = "A bar chart with an active bar"
 
 const chartData = [
-   { browser: 'chrome', visitors: 187, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 275, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -72,8 +70,9 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value =>
-                        chartConfig[value as keyof typeof chartConfig]?.label}
+                     tickFormatter={(value) =>
+                        chartConfig[value as keyof typeof chartConfig]?.label
+                     }
                   />
                   <ChartTooltip
                      cursor={false}
@@ -101,9 +100,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-bar-default.tsx b/apps/web/__registry__/default/block/chart-bar-default.tsx
index 49330679..53ff48e4 100644
--- a/apps/web/__registry__/default/block/chart-bar-default.tsx
+++ b/apps/web/__registry__/default/block/chart-bar-default.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A bar chart'
+export const description = "A bar chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -54,21 +52,23 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
                      content={<ChartTooltipContent hideLabel />}
                   />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={8}
+                  />
                </BarChart>
             </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-bar-horizontal.tsx b/apps/web/__registry__/default/block/chart-bar-horizontal.tsx
index 144ef997..efb45344 100644
--- a/apps/web/__registry__/default/block/chart-bar-horizontal.tsx
+++ b/apps/web/__registry__/default/block/chart-bar-horizontal.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A horizontal bar chart'
+export const description = "A horizontal bar chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -62,21 +60,23 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
                      content={<ChartTooltipContent hideLabel />}
                   />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={5} />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={5}
+                  />
                </BarChart>
             </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-bar-interactive.tsx b/apps/web/__registry__/default/block/chart-bar-interactive.tsx
index d86ee682..50b043a0 100644
--- a/apps/web/__registry__/default/block/chart-bar-interactive.tsx
+++ b/apps/web/__registry__/default/block/chart-bar-interactive.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -9,129 +9,127 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'An interactive bar chart'
+export const description = "An interactive bar chart"
 
 const chartData = [
-   { date: '2024-04-01', desktop: 222, mobile: 150 },
-   { date: '2024-04-02', desktop: 97, mobile: 180 },
-   { date: '2024-04-03', desktop: 167, mobile: 120 },
-   { date: '2024-04-04', desktop: 242, mobile: 260 },
-   { date: '2024-04-05', desktop: 373, mobile: 290 },
-   { date: '2024-04-06', desktop: 301, mobile: 340 },
-   { date: '2024-04-07', desktop: 245, mobile: 180 },
-   { date: '2024-04-08', desktop: 409, mobile: 320 },
-   { date: '2024-04-09', desktop: 59, mobile: 110 },
-   { date: '2024-04-10', desktop: 261, mobile: 190 },
-   { date: '2024-04-11', desktop: 327, mobile: 350 },
-   { date: '2024-04-12', desktop: 292, mobile: 210 },
-   { date: '2024-04-13', desktop: 342, mobile: 380 },
-   { date: '2024-04-14', desktop: 137, mobile: 220 },
-   { date: '2024-04-15', desktop: 120, mobile: 170 },
-   { date: '2024-04-16', desktop: 138, mobile: 190 },
-   { date: '2024-04-17', desktop: 446, mobile: 360 },
-   { date: '2024-04-18', desktop: 364, mobile: 410 },
-   { date: '2024-04-19', desktop: 243, mobile: 180 },
-   { date: '2024-04-20', desktop: 89, mobile: 150 },
-   { date: '2024-04-21', desktop: 137, mobile: 200 },
-   { date: '2024-04-22', desktop: 224, mobile: 170 },
-   { date: '2024-04-23', desktop: 138, mobile: 230 },
-   { date: '2024-04-24', desktop: 387, mobile: 290 },
-   { date: '2024-04-25', desktop: 215, mobile: 250 },
-   { date: '2024-04-26', desktop: 75, mobile: 130 },
-   { date: '2024-04-27', desktop: 383, mobile: 420 },
-   { date: '2024-04-28', desktop: 122, mobile: 180 },
-   { date: '2024-04-29', desktop: 315, mobile: 240 },
-   { date: '2024-04-30', desktop: 454, mobile: 380 },
-   { date: '2024-05-01', desktop: 165, mobile: 220 },
-   { date: '2024-05-02', desktop: 293, mobile: 310 },
-   { date: '2024-05-03', desktop: 247, mobile: 190 },
-   { date: '2024-05-04', desktop: 385, mobile: 420 },
-   { date: '2024-05-05', desktop: 481, mobile: 390 },
-   { date: '2024-05-06', desktop: 498, mobile: 520 },
-   { date: '2024-05-07', desktop: 388, mobile: 300 },
-   { date: '2024-05-08', desktop: 149, mobile: 210 },
-   { date: '2024-05-09', desktop: 227, mobile: 180 },
-   { date: '2024-05-10', desktop: 293, mobile: 330 },
-   { date: '2024-05-11', desktop: 335, mobile: 270 },
-   { date: '2024-05-12', desktop: 197, mobile: 240 },
-   { date: '2024-05-13', desktop: 197, mobile: 160 },
-   { date: '2024-05-14', desktop: 448, mobile: 490 },
-   { date: '2024-05-15', desktop: 473, mobile: 380 },
-   { date: '2024-05-16', desktop: 338, mobile: 400 },
-   { date: '2024-05-17', desktop: 499, mobile: 420 },
-   { date: '2024-05-18', desktop: 315, mobile: 350 },
-   { date: '2024-05-19', desktop: 235, mobile: 180 },
-   { date: '2024-05-20', desktop: 177, mobile: 230 },
-   { date: '2024-05-21', desktop: 82, mobile: 140 },
-   { date: '2024-05-22', desktop: 81, mobile: 120 },
-   { date: '2024-05-23', desktop: 252, mobile: 290 },
-   { date: '2024-05-24', desktop: 294, mobile: 220 },
-   { date: '2024-05-25', desktop: 201, mobile: 250 },
-   { date: '2024-05-26', desktop: 213, mobile: 170 },
-   { date: '2024-05-27', desktop: 420, mobile: 460 },
-   { date: '2024-05-28', desktop: 233, mobile: 190 },
-   { date: '2024-05-29', desktop: 78, mobile: 130 },
-   { date: '2024-05-30', desktop: 340, mobile: 280 },
-   { date: '2024-05-31', desktop: 178, mobile: 230 },
-   { date: '2024-06-01', desktop: 178, mobile: 200 },
-   { date: '2024-06-02', desktop: 470, mobile: 410 },
-   { date: '2024-06-03', desktop: 103, mobile: 160 },
-   { date: '2024-06-04', desktop: 439, mobile: 380 },
-   { date: '2024-06-05', desktop: 88, mobile: 140 },
-   { date: '2024-06-06', desktop: 294, mobile: 250 },
-   { date: '2024-06-07', desktop: 323, mobile: 370 },
-   { date: '2024-06-08', desktop: 385, mobile: 320 },
-   { date: '2024-06-09', desktop: 438, mobile: 480 },
-   { date: '2024-06-10', desktop: 155, mobile: 200 },
-   { date: '2024-06-11', desktop: 92, mobile: 150 },
-   { date: '2024-06-12', desktop: 492, mobile: 420 },
-   { date: '2024-06-13', desktop: 81, mobile: 130 },
-   { date: '2024-06-14', desktop: 426, mobile: 380 },
-   { date: '2024-06-15', desktop: 307, mobile: 350 },
-   { date: '2024-06-16', desktop: 371, mobile: 310 },
-   { date: '2024-06-17', desktop: 475, mobile: 520 },
-   { date: '2024-06-18', desktop: 107, mobile: 170 },
-   { date: '2024-06-19', desktop: 341, mobile: 290 },
-   { date: '2024-06-20', desktop: 408, mobile: 450 },
-   { date: '2024-06-21', desktop: 169, mobile: 210 },
-   { date: '2024-06-22', desktop: 317, mobile: 270 },
-   { date: '2024-06-23', desktop: 480, mobile: 530 },
-   { date: '2024-06-24', desktop: 132, mobile: 180 },
-   { date: '2024-06-25', desktop: 141, mobile: 190 },
-   { date: '2024-06-26', desktop: 434, mobile: 380 },
-   { date: '2024-06-27', desktop: 448, mobile: 490 },
-   { date: '2024-06-28', desktop: 149, mobile: 200 },
-   { date: '2024-06-29', desktop: 103, mobile: 160 },
-   { date: '2024-06-30', desktop: 446, mobile: 400 },
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
 ]
 
 const chartConfig = {
    views: {
-      label: 'Page Views',
+      label: "Page Views",
    },
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
 export default function Component() {
-   const [activeChart, setActiveChart]
-    = React.useState<keyof typeof chartConfig>('desktop')
+   const [activeChart, setActiveChart] =
+      React.useState<keyof typeof chartConfig>("desktop")
 
    const total = React.useMemo(
       () => ({
@@ -151,7 +149,7 @@ export default function Component() {
                </CardDescription>
             </div>
             <div className="flex">
-               {['desktop', 'mobile'].map((key) => {
+               {["desktop", "mobile"].map((key) => {
                   const chart = key as keyof typeof chartConfig
                   return (
                      <button
@@ -193,28 +191,34 @@ export default function Component() {
                      minTickGap={32}
                      tickFormatter={(value) => {
                         const date = new Date(value)
-                        return date.toLocaleDateString('en-US', {
-                           month: 'short',
-                           day: 'numeric',
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
                         })
                      }}
                   />
                   <ChartTooltip
-                     content={(
+                     content={
                         <ChartTooltipContent
                            className="w-[150px]"
                            nameKey="views"
                            labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 month: 'short',
-                                 day: 'numeric',
-                                 year: 'numeric',
-                              })
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                 },
+                              )
                            }}
                         />
-                     )}
+                     }
+                  />
+                  <Bar
+                     dataKey={activeChart}
+                     fill={`var(--color-${activeChart})`}
                   />
-                  <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
                </BarChart>
             </ChartContainer>
          </CardContent>
diff --git a/apps/web/__registry__/default/block/chart-bar-label-custom.tsx b/apps/web/__registry__/default/block/chart-bar-label-custom.tsx
index 9c7858c7..ac2f3575 100644
--- a/apps/web/__registry__/default/block/chart-bar-label-custom.tsx
+++ b/apps/web/__registry__/default/block/chart-bar-label-custom.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
 
 import {
    Card,
@@ -10,38 +10,36 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A bar chart with a custom label'
+export const description = "A bar chart with a custom label"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
    label: {
-      color: 'hsl(var(--background))',
+      color: "hsl(var(--background))",
    },
 } satisfies ChartConfig
 
@@ -69,7 +67,7 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                      hide
                   />
                   <XAxis dataKey="desktop" type="number" hide />
@@ -103,9 +101,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-bar-label.tsx b/apps/web/__registry__/default/block/chart-bar-label.tsx
index 293d5aeb..3f12107a 100644
--- a/apps/web/__registry__/default/block/chart-bar-label.tsx
+++ b/apps/web/__registry__/default/block/chart-bar-label.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A bar chart with a label'
+export const description = "A bar chart with a label"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -60,7 +58,7 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -79,9 +77,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-bar-mixed.tsx b/apps/web/__registry__/default/block/chart-bar-mixed.tsx
index 0b3d790c..57cdb6bf 100644
--- a/apps/web/__registry__/default/block/chart-bar-mixed.tsx
+++ b/apps/web/__registry__/default/block/chart-bar-mixed.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A mixed bar chart'
+export const description = "A mixed bar chart"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -79,8 +77,9 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value =>
-                        chartConfig[value as keyof typeof chartConfig]?.label}
+                     tickFormatter={(value) =>
+                        chartConfig[value as keyof typeof chartConfig]?.label
+                     }
                   />
                   <XAxis dataKey="visitors" type="number" hide />
                   <ChartTooltip
@@ -93,9 +92,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-bar-multiple.tsx b/apps/web/__registry__/default/block/chart-bar-multiple.tsx
index 44a13a61..8e5a84f3 100644
--- a/apps/web/__registry__/default/block/chart-bar-multiple.tsx
+++ b/apps/web/__registry__/default/block/chart-bar-multiple.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A multiple bar chart'
+export const description = "A multiple bar chart"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -58,22 +56,24 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
                      content={<ChartTooltipContent indicator="dashed" />}
                   />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={4}
+                  />
                   <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
                </BarChart>
             </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-bar-negative.tsx b/apps/web/__registry__/default/block/chart-bar-negative.tsx
index 8a437e50..a3eb42d5 100644
--- a/apps/web/__registry__/default/block/chart-bar-negative.tsx
+++ b/apps/web/__registry__/default/block/chart-bar-negative.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, Cell, LabelList } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"
 
 import {
    Card,
@@ -10,30 +10,28 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A bar chart with negative values'
+export const description = "A bar chart with negative values"
 
 const chartData = [
-   { month: 'January', visitors: 186 },
-   { month: 'February', visitors: 205 },
-   { month: 'March', visitors: -207 },
-   { month: 'April', visitors: 173 },
-   { month: 'May', visitors: -209 },
-   { month: 'June', visitors: 214 },
+   { month: "January", visitors: 186 },
+   { month: "February", visitors: 205 },
+   { month: "March", visitors: -207 },
+   { month: "April", visitors: 173 },
+   { month: "May", visitors: -209 },
+   { month: "June", visitors: 214 },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
 } satisfies ChartConfig
 
@@ -53,14 +51,18 @@ export default function Component() {
                      content={<ChartTooltipContent hideLabel hideIndicator />}
                   />
                   <Bar dataKey="visitors">
-                     <LabelList position="top" dataKey="month" fillOpacity={1} />
-                     {chartData.map(item => (
+                     <LabelList
+                        position="top"
+                        dataKey="month"
+                        fillOpacity={1}
+                     />
+                     {chartData.map((item) => (
                         <Cell
                            key={item.month}
                            fill={
                               item.visitors > 0
-                                 ? 'hsl(var(--chart-1))'
-                                 : 'hsl(var(--chart-2))'
+                                 ? "hsl(var(--chart-1))"
+                                 : "hsl(var(--chart-2))"
                            }
                         />
                      ))}
@@ -70,9 +72,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-bar-stacked.tsx b/apps/web/__registry__/default/block/chart-bar-stacked.tsx
index 1f303ffa..bf326e4e 100644
--- a/apps/web/__registry__/default/block/chart-bar-stacked.tsx
+++ b/apps/web/__registry__/default/block/chart-bar-stacked.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,37 +10,35 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -60,7 +58,7 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip content={<ChartTooltipContent hideLabel />} />
                   <ChartLegend content={<ChartLegendContent />} />
@@ -81,9 +79,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-line-default.tsx b/apps/web/__registry__/default/block/chart-line-default.tsx
index 19755abf..9ee684c8 100644
--- a/apps/web/__registry__/default/block/chart-line-default.tsx
+++ b/apps/web/__registry__/default/block/chart-line-default.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A line chart'
+export const description = "A line chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -61,7 +59,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -79,9 +77,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-line-dots-colors.tsx b/apps/web/__registry__/default/block/chart-line-dots-colors.tsx
index 20c822ca..97950153 100644
--- a/apps/web/__registry__/default/block/chart-line-dots-colors.tsx
+++ b/apps/web/__registry__/default/block/chart-line-dots-colors.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Dot, Line, LineChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Dot, Line, LineChart } from "recharts"
 
 import {
    Card,
@@ -10,50 +10,48 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A line chart with dots and colors'
+export const description = "A line chart with dots and colors"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
-      color: 'hsl(var(--chart-2))',
+      label: "Visitors",
+      color: "hsl(var(--chart-2))",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -78,13 +76,13 @@ export default function Component() {
                   <CartesianGrid vertical={false} />
                   <ChartTooltip
                      cursor={false}
-                     content={(
+                     content={
                         <ChartTooltipContent
                            indicator="line"
                            nameKey="visitors"
                            hideLabel
                         />
-                     )}
+                     }
                   />
                   <Line
                      dataKey="visitors"
@@ -109,9 +107,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-line-dots-custom.tsx b/apps/web/__registry__/default/block/chart-line-dots-custom.tsx
index 5d0db250..75052d21 100644
--- a/apps/web/__registry__/default/block/chart-line-dots-custom.tsx
+++ b/apps/web/__registry__/default/block/chart-line-dots-custom.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { GitCommitVertical, TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import { GitCommitVertical, TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A line chart with custom dots'
+export const description = "A line chart with custom dots"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -65,7 +63,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -96,9 +94,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-line-dots.tsx b/apps/web/__registry__/default/block/chart-line-dots.tsx
index 3372810a..64c52511 100644
--- a/apps/web/__registry__/default/block/chart-line-dots.tsx
+++ b/apps/web/__registry__/default/block/chart-line-dots.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A line chart with dots'
+export const description = "A line chart with dots"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -65,7 +63,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -77,7 +75,7 @@ export default function Component() {
                      stroke="var(--color-desktop)"
                      strokeWidth={2}
                      dot={{
-                        fill: 'var(--color-desktop)',
+                        fill: "var(--color-desktop)",
                      }}
                      activeDot={{
                         r: 6,
@@ -88,9 +86,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-line-interactive.tsx b/apps/web/__registry__/default/block/chart-line-interactive.tsx
index 4ea9d26f..899f5e65 100644
--- a/apps/web/__registry__/default/block/chart-line-interactive.tsx
+++ b/apps/web/__registry__/default/block/chart-line-interactive.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import * as React from "react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -9,129 +9,127 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'An interactive line chart'
+export const description = "An interactive line chart"
 
 const chartData = [
-   { date: '2024-04-01', desktop: 222, mobile: 150 },
-   { date: '2024-04-02', desktop: 97, mobile: 180 },
-   { date: '2024-04-03', desktop: 167, mobile: 120 },
-   { date: '2024-04-04', desktop: 242, mobile: 260 },
-   { date: '2024-04-05', desktop: 373, mobile: 290 },
-   { date: '2024-04-06', desktop: 301, mobile: 340 },
-   { date: '2024-04-07', desktop: 245, mobile: 180 },
-   { date: '2024-04-08', desktop: 409, mobile: 320 },
-   { date: '2024-04-09', desktop: 59, mobile: 110 },
-   { date: '2024-04-10', desktop: 261, mobile: 190 },
-   { date: '2024-04-11', desktop: 327, mobile: 350 },
-   { date: '2024-04-12', desktop: 292, mobile: 210 },
-   { date: '2024-04-13', desktop: 342, mobile: 380 },
-   { date: '2024-04-14', desktop: 137, mobile: 220 },
-   { date: '2024-04-15', desktop: 120, mobile: 170 },
-   { date: '2024-04-16', desktop: 138, mobile: 190 },
-   { date: '2024-04-17', desktop: 446, mobile: 360 },
-   { date: '2024-04-18', desktop: 364, mobile: 410 },
-   { date: '2024-04-19', desktop: 243, mobile: 180 },
-   { date: '2024-04-20', desktop: 89, mobile: 150 },
-   { date: '2024-04-21', desktop: 137, mobile: 200 },
-   { date: '2024-04-22', desktop: 224, mobile: 170 },
-   { date: '2024-04-23', desktop: 138, mobile: 230 },
-   { date: '2024-04-24', desktop: 387, mobile: 290 },
-   { date: '2024-04-25', desktop: 215, mobile: 250 },
-   { date: '2024-04-26', desktop: 75, mobile: 130 },
-   { date: '2024-04-27', desktop: 383, mobile: 420 },
-   { date: '2024-04-28', desktop: 122, mobile: 180 },
-   { date: '2024-04-29', desktop: 315, mobile: 240 },
-   { date: '2024-04-30', desktop: 454, mobile: 380 },
-   { date: '2024-05-01', desktop: 165, mobile: 220 },
-   { date: '2024-05-02', desktop: 293, mobile: 310 },
-   { date: '2024-05-03', desktop: 247, mobile: 190 },
-   { date: '2024-05-04', desktop: 385, mobile: 420 },
-   { date: '2024-05-05', desktop: 481, mobile: 390 },
-   { date: '2024-05-06', desktop: 498, mobile: 520 },
-   { date: '2024-05-07', desktop: 388, mobile: 300 },
-   { date: '2024-05-08', desktop: 149, mobile: 210 },
-   { date: '2024-05-09', desktop: 227, mobile: 180 },
-   { date: '2024-05-10', desktop: 293, mobile: 330 },
-   { date: '2024-05-11', desktop: 335, mobile: 270 },
-   { date: '2024-05-12', desktop: 197, mobile: 240 },
-   { date: '2024-05-13', desktop: 197, mobile: 160 },
-   { date: '2024-05-14', desktop: 448, mobile: 490 },
-   { date: '2024-05-15', desktop: 473, mobile: 380 },
-   { date: '2024-05-16', desktop: 338, mobile: 400 },
-   { date: '2024-05-17', desktop: 499, mobile: 420 },
-   { date: '2024-05-18', desktop: 315, mobile: 350 },
-   { date: '2024-05-19', desktop: 235, mobile: 180 },
-   { date: '2024-05-20', desktop: 177, mobile: 230 },
-   { date: '2024-05-21', desktop: 82, mobile: 140 },
-   { date: '2024-05-22', desktop: 81, mobile: 120 },
-   { date: '2024-05-23', desktop: 252, mobile: 290 },
-   { date: '2024-05-24', desktop: 294, mobile: 220 },
-   { date: '2024-05-25', desktop: 201, mobile: 250 },
-   { date: '2024-05-26', desktop: 213, mobile: 170 },
-   { date: '2024-05-27', desktop: 420, mobile: 460 },
-   { date: '2024-05-28', desktop: 233, mobile: 190 },
-   { date: '2024-05-29', desktop: 78, mobile: 130 },
-   { date: '2024-05-30', desktop: 340, mobile: 280 },
-   { date: '2024-05-31', desktop: 178, mobile: 230 },
-   { date: '2024-06-01', desktop: 178, mobile: 200 },
-   { date: '2024-06-02', desktop: 470, mobile: 410 },
-   { date: '2024-06-03', desktop: 103, mobile: 160 },
-   { date: '2024-06-04', desktop: 439, mobile: 380 },
-   { date: '2024-06-05', desktop: 88, mobile: 140 },
-   { date: '2024-06-06', desktop: 294, mobile: 250 },
-   { date: '2024-06-07', desktop: 323, mobile: 370 },
-   { date: '2024-06-08', desktop: 385, mobile: 320 },
-   { date: '2024-06-09', desktop: 438, mobile: 480 },
-   { date: '2024-06-10', desktop: 155, mobile: 200 },
-   { date: '2024-06-11', desktop: 92, mobile: 150 },
-   { date: '2024-06-12', desktop: 492, mobile: 420 },
-   { date: '2024-06-13', desktop: 81, mobile: 130 },
-   { date: '2024-06-14', desktop: 426, mobile: 380 },
-   { date: '2024-06-15', desktop: 307, mobile: 350 },
-   { date: '2024-06-16', desktop: 371, mobile: 310 },
-   { date: '2024-06-17', desktop: 475, mobile: 520 },
-   { date: '2024-06-18', desktop: 107, mobile: 170 },
-   { date: '2024-06-19', desktop: 341, mobile: 290 },
-   { date: '2024-06-20', desktop: 408, mobile: 450 },
-   { date: '2024-06-21', desktop: 169, mobile: 210 },
-   { date: '2024-06-22', desktop: 317, mobile: 270 },
-   { date: '2024-06-23', desktop: 480, mobile: 530 },
-   { date: '2024-06-24', desktop: 132, mobile: 180 },
-   { date: '2024-06-25', desktop: 141, mobile: 190 },
-   { date: '2024-06-26', desktop: 434, mobile: 380 },
-   { date: '2024-06-27', desktop: 448, mobile: 490 },
-   { date: '2024-06-28', desktop: 149, mobile: 200 },
-   { date: '2024-06-29', desktop: 103, mobile: 160 },
-   { date: '2024-06-30', desktop: 446, mobile: 400 },
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
 ]
 
 const chartConfig = {
    views: {
-      label: 'Page Views',
+      label: "Page Views",
    },
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
 export default function Component() {
-   const [activeChart, setActiveChart]
-    = React.useState<keyof typeof chartConfig>('desktop')
+   const [activeChart, setActiveChart] =
+      React.useState<keyof typeof chartConfig>("desktop")
 
    const total = React.useMemo(
       () => ({
@@ -151,7 +149,7 @@ export default function Component() {
                </CardDescription>
             </div>
             <div className="flex">
-               {['desktop', 'mobile'].map((key) => {
+               {["desktop", "mobile"].map((key) => {
                   const chart = key as keyof typeof chartConfig
                   return (
                      <button
@@ -193,26 +191,29 @@ export default function Component() {
                      minTickGap={32}
                      tickFormatter={(value) => {
                         const date = new Date(value)
-                        return date.toLocaleDateString('en-US', {
-                           month: 'short',
-                           day: 'numeric',
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
                         })
                      }}
                   />
                   <ChartTooltip
-                     content={(
+                     content={
                         <ChartTooltipContent
                            className="w-[150px]"
                            nameKey="views"
                            labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 month: 'short',
-                                 day: 'numeric',
-                                 year: 'numeric',
-                              })
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                 },
+                              )
                            }}
                         />
-                     )}
+                     }
                   />
                   <Line
                      dataKey={activeChart}
diff --git a/apps/web/__registry__/default/block/chart-line-label-custom.tsx b/apps/web/__registry__/default/block/chart-line-label-custom.tsx
index fda25b48..f9578e86 100644
--- a/apps/web/__registry__/default/block/chart-line-label-custom.tsx
+++ b/apps/web/__registry__/default/block/chart-line-label-custom.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, LabelList, Line, LineChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart } from "recharts"
 
 import {
    Card,
@@ -10,50 +10,48 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A line chart with a custom label'
+export const description = "A line chart with a custom label"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
-      color: 'hsl(var(--chart-2))',
+      label: "Visitors",
+      color: "hsl(var(--chart-2))",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -78,13 +76,13 @@ export default function Component() {
                   <CartesianGrid vertical={false} />
                   <ChartTooltip
                      cursor={false}
-                     content={(
+                     content={
                         <ChartTooltipContent
                            indicator="line"
                            nameKey="visitors"
                            hideLabel
                         />
-                     )}
+                     }
                   />
                   <Line
                      dataKey="visitors"
@@ -92,7 +90,7 @@ export default function Component() {
                      stroke="var(--color-visitors)"
                      strokeWidth={2}
                      dot={{
-                        fill: 'var(--color-visitors)',
+                        fill: "var(--color-visitors)",
                      }}
                      activeDot={{
                         r: 6,
@@ -105,7 +103,8 @@ export default function Component() {
                         fontSize={12}
                         dataKey="browser"
                         formatter={(value: keyof typeof chartConfig) =>
-                           chartConfig[value]?.label}
+                           chartConfig[value]?.label
+                        }
                      />
                   </Line>
                </LineChart>
@@ -113,9 +112,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-line-label.tsx b/apps/web/__registry__/default/block/chart-line-label.tsx
index 8c7b4292..52ff84ef 100644
--- a/apps/web/__registry__/default/block/chart-line-label.tsx
+++ b/apps/web/__registry__/default/block/chart-line-label.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, LabelList, Line, LineChart, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A line chart with a label'
+export const description = "A line chart with a label"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -66,7 +64,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -78,7 +76,7 @@ export default function Component() {
                      stroke="var(--color-desktop)"
                      strokeWidth={2}
                      dot={{
-                        fill: 'var(--color-desktop)',
+                        fill: "var(--color-desktop)",
                      }}
                      activeDot={{
                         r: 6,
@@ -96,9 +94,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-line-linear.tsx b/apps/web/__registry__/default/block/chart-line-linear.tsx
index 2daee0af..f8e67cb2 100644
--- a/apps/web/__registry__/default/block/chart-line-linear.tsx
+++ b/apps/web/__registry__/default/block/chart-line-linear.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A linear line chart'
+export const description = "A linear line chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -61,7 +59,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -79,9 +77,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-line-multiple.tsx b/apps/web/__registry__/default/block/chart-line-multiple.tsx
index 63ae0ef1..4fa93412 100644
--- a/apps/web/__registry__/default/block/chart-line-multiple.tsx
+++ b/apps/web/__registry__/default/block/chart-line-multiple.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A multiple line chart'
+export const description = "A multiple line chart"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -65,9 +63,12 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
                   />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
                   <Line
                      dataKey="desktop"
                      type="monotone"
@@ -89,8 +90,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/default/block/chart-line-step.tsx b/apps/web/__registry__/default/block/chart-line-step.tsx
index e6b327d3..c2089d1d 100644
--- a/apps/web/__registry__/default/block/chart-line-step.tsx
+++ b/apps/web/__registry__/default/block/chart-line-step.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A line chart with step'
+export const description = "A line chart with step"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -61,7 +59,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -79,9 +77,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-pie-donut-active.tsx b/apps/web/__registry__/default/block/chart-pie-donut-active.tsx
index de29e1c3..ad3fddfa 100644
--- a/apps/web/__registry__/default/block/chart-pie-donut-active.tsx
+++ b/apps/web/__registry__/default/block/chart-pie-donut-active.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Label, Pie, PieChart, Sector } from 'recharts'
-import type { PieSectorDataItem } from 'recharts/types/polar/Pie'
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import type { PieSectorDataItem } from "recharts/types/polar/Pie"
 
 import {
    Card,
@@ -11,49 +11,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A donut chart with an active sector'
+export const description = "A donut chart with an active sector"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -93,9 +91,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-pie-donut-text.tsx b/apps/web/__registry__/default/block/chart-pie-donut-text.tsx
index b8d5a5fc..b02eeb3b 100644
--- a/apps/web/__registry__/default/block/chart-pie-donut-text.tsx
+++ b/apps/web/__registry__/default/block/chart-pie-donut-text.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { TrendingUp } from 'lucide-react'
-import { Label, Pie, PieChart } from 'recharts'
+import * as React from "react"
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -11,49 +11,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A donut chart with text'
+export const description = "A donut chart with text"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 287, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 190, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 190, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -87,7 +85,7 @@ export default function Component() {
                   >
                      <Label
                         content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                               return (
                                  <text
                                     x={viewBox.cx}
@@ -120,9 +118,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-pie-donut.tsx b/apps/web/__registry__/default/block/chart-pie-donut.tsx
index cfd3cb64..d43c1498 100644
--- a/apps/web/__registry__/default/block/chart-pie-donut.tsx
+++ b/apps/web/__registry__/default/block/chart-pie-donut.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A donut chart'
+export const description = "A donut chart"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -84,9 +82,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-pie-interactive.tsx b/apps/web/__registry__/default/block/chart-pie-interactive.tsx
index efec263a..b9b573cf 100644
--- a/apps/web/__registry__/default/block/chart-pie-interactive.tsx
+++ b/apps/web/__registry__/default/block/chart-pie-interactive.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Label, Pie, PieChart, Sector } from 'recharts'
-import type { PieSectorDataItem } from 'recharts/types/polar/Pie'
+import * as React from "react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import type { PieSectorDataItem } from "recharts/types/polar/Pie"
 
 import {
    Card,
@@ -10,75 +10,73 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartStyle,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/default/ui/select'
+} from "~/registry/default/ui/select"
 
-export const description = 'An interactive pie chart'
+export const description = "An interactive pie chart"
 
 const desktopData = [
-   { month: 'january', desktop: 186, fill: 'var(--color-january)' },
-   { month: 'february', desktop: 305, fill: 'var(--color-february)' },
-   { month: 'march', desktop: 237, fill: 'var(--color-march)' },
-   { month: 'april', desktop: 173, fill: 'var(--color-april)' },
-   { month: 'may', desktop: 209, fill: 'var(--color-may)' },
+   { month: "january", desktop: 186, fill: "var(--color-january)" },
+   { month: "february", desktop: 305, fill: "var(--color-february)" },
+   { month: "march", desktop: 237, fill: "var(--color-march)" },
+   { month: "april", desktop: 173, fill: "var(--color-april)" },
+   { month: "may", desktop: 209, fill: "var(--color-may)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    desktop: {
-      label: 'Desktop',
+      label: "Desktop",
    },
    mobile: {
-      label: 'Mobile',
+      label: "Mobile",
    },
    january: {
-      label: 'January',
-      color: 'hsl(var(--chart-1))',
+      label: "January",
+      color: "hsl(var(--chart-1))",
    },
    february: {
-      label: 'February',
-      color: 'hsl(var(--chart-2))',
+      label: "February",
+      color: "hsl(var(--chart-2))",
    },
    march: {
-      label: 'March',
-      color: 'hsl(var(--chart-3))',
+      label: "March",
+      color: "hsl(var(--chart-3))",
    },
    april: {
-      label: 'April',
-      color: 'hsl(var(--chart-4))',
+      label: "April",
+      color: "hsl(var(--chart-4))",
    },
    may: {
-      label: 'May',
-      color: 'hsl(var(--chart-5))',
+      label: "May",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
 export default function Component() {
-   const id = 'pie-interactive'
+   const id = "pie-interactive"
    const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
 
    const activeIndex = React.useMemo(
-      () => desktopData.findIndex(item => item.month === activeMonth),
+      () => desktopData.findIndex((item) => item.month === activeMonth),
       [activeMonth],
    )
-   const months = React.useMemo(() => desktopData.map(item => item.month), [])
+   const months = React.useMemo(() => desktopData.map((item) => item.month), [])
 
    return (
       <Card data-chart={id} className="flex flex-col">
@@ -158,7 +156,7 @@ export default function Component() {
                   >
                      <Label
                         content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                               return (
                                  <text
                                     x={viewBox.cx}
@@ -171,7 +169,9 @@ export default function Component() {
                                        y={viewBox.cy}
                                        className="fill-foreground text-3xl font-bold"
                                     >
-                                       {desktopData[activeIndex].desktop.toLocaleString()}
+                                       {desktopData[
+                                          activeIndex
+                                       ].desktop.toLocaleString()}
                                     </tspan>
                                     <tspan
                                        x={viewBox.cx}
diff --git a/apps/web/__registry__/default/block/chart-pie-label-custom.tsx b/apps/web/__registry__/default/block/chart-pie-label-custom.tsx
index b101130b..10ea4753 100644
--- a/apps/web/__registry__/default/block/chart-pie-label-custom.tsx
+++ b/apps/web/__registry__/default/block/chart-pie-label-custom.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A pie chart with a custom label'
+export const description = "A pie chart with a custom label"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -70,7 +68,9 @@ export default function Component() {
             >
                <PieChart>
                   <ChartTooltip
-                     content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+                     content={
+                        <ChartTooltipContent nameKey="visitors" hideLabel />
+                     }
                   />
                   <Pie
                      data={chartData}
@@ -88,9 +88,10 @@ export default function Component() {
                               fill="hsla(var(--foreground))"
                            >
                               {`${
-                      chartConfig[payload.browser as keyof typeof chartConfig]
-                        ?.label
-                    } (${payload.visitors})`}
+                                 chartConfig[
+                                    payload.browser as keyof typeof chartConfig
+                                 ]?.label
+                              } (${payload.visitors})`}
                            </text>
                         )
                      }}
@@ -101,9 +102,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-pie-label-list.tsx b/apps/web/__registry__/default/block/chart-pie-label-list.tsx
index 8cf2e738..0b1a2b6a 100644
--- a/apps/web/__registry__/default/block/chart-pie-label-list.tsx
+++ b/apps/web/__registry__/default/block/chart-pie-label-list.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { LabelList, Pie, PieChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { LabelList, Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A pie chart with a label list'
+export const description = "A pie chart with a label list"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -70,7 +68,9 @@ export default function Component() {
             >
                <PieChart>
                   <ChartTooltip
-                     content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+                     content={
+                        <ChartTooltipContent nameKey="visitors" hideLabel />
+                     }
                   />
                   <Pie data={chartData} dataKey="visitors">
                      <LabelList
@@ -79,7 +79,8 @@ export default function Component() {
                         stroke="none"
                         fontSize={12}
                         formatter={(value: keyof typeof chartConfig) =>
-                           chartConfig[value]?.label}
+                           chartConfig[value]?.label
+                        }
                      />
                   </Pie>
                </PieChart>
@@ -87,9 +88,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-pie-label.tsx b/apps/web/__registry__/default/block/chart-pie-label.tsx
index 39d835b4..fffb0e61 100644
--- a/apps/web/__registry__/default/block/chart-pie-label.tsx
+++ b/apps/web/__registry__/default/block/chart-pie-label.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A pie chart with a label'
+export const description = "A pie chart with a label"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -70,15 +68,18 @@ export default function Component() {
             >
                <PieChart>
                   <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-                  <Pie data={chartData} dataKey="visitors" label nameKey="browser" />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     label
+                     nameKey="browser"
+                  />
                </PieChart>
             </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-pie-legend.tsx b/apps/web/__registry__/default/block/chart-pie-legend.tsx
index fccfd705..a50f8a0a 100644
--- a/apps/web/__registry__/default/block/chart-pie-legend.tsx
+++ b/apps/web/__registry__/default/block/chart-pie-legend.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Pie, PieChart } from 'recharts'
+import { Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -8,49 +8,47 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A pie chart with a legend'
+export const description = "A pie chart with a legend"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
diff --git a/apps/web/__registry__/default/block/chart-pie-separator-none.tsx b/apps/web/__registry__/default/block/chart-pie-separator-none.tsx
index 24c7dc4b..38698099 100644
--- a/apps/web/__registry__/default/block/chart-pie-separator-none.tsx
+++ b/apps/web/__registry__/default/block/chart-pie-separator-none.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A pie chart with no separator'
+export const description = "A pie chart with no separator"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -84,9 +82,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-pie-simple.tsx b/apps/web/__registry__/default/block/chart-pie-simple.tsx
index cc9b3ed9..2d8272f3 100644
--- a/apps/web/__registry__/default/block/chart-pie-simple.tsx
+++ b/apps/web/__registry__/default/block/chart-pie-simple.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A simple pie chart'
+export const description = "A simple pie chart"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -79,9 +77,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-pie-stacked.tsx b/apps/web/__registry__/default/block/chart-pie-stacked.tsx
index 7b82fcd1..da310dcf 100644
--- a/apps/web/__registry__/default/block/chart-pie-stacked.tsx
+++ b/apps/web/__registry__/default/block/chart-pie-stacked.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { TrendingUp } from 'lucide-react'
-import { Label, Pie, PieChart } from 'recharts'
+import * as React from "react"
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -11,63 +11,61 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A pie chart with stacked sections'
+export const description = "A pie chart with stacked sections"
 
 const desktopData = [
-   { month: 'january', desktop: 186, fill: 'var(--color-january)' },
-   { month: 'february', desktop: 305, fill: 'var(--color-february)' },
-   { month: 'march', desktop: 237, fill: 'var(--color-march)' },
-   { month: 'april', desktop: 173, fill: 'var(--color-april)' },
-   { month: 'may', desktop: 209, fill: 'var(--color-may)' },
+   { month: "january", desktop: 186, fill: "var(--color-january)" },
+   { month: "february", desktop: 305, fill: "var(--color-february)" },
+   { month: "march", desktop: 237, fill: "var(--color-march)" },
+   { month: "april", desktop: 173, fill: "var(--color-april)" },
+   { month: "may", desktop: 209, fill: "var(--color-may)" },
 ]
 
 const mobileData = [
-   { month: 'january', mobile: 80, fill: 'var(--color-january)' },
-   { month: 'february', mobile: 200, fill: 'var(--color-february)' },
-   { month: 'march', mobile: 120, fill: 'var(--color-march)' },
-   { month: 'april', mobile: 190, fill: 'var(--color-april)' },
-   { month: 'may', mobile: 130, fill: 'var(--color-may)' },
+   { month: "january", mobile: 80, fill: "var(--color-january)" },
+   { month: "february", mobile: 200, fill: "var(--color-february)" },
+   { month: "march", mobile: 120, fill: "var(--color-march)" },
+   { month: "april", mobile: 190, fill: "var(--color-april)" },
+   { month: "may", mobile: 130, fill: "var(--color-may)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    desktop: {
-      label: 'Desktop',
+      label: "Desktop",
    },
    mobile: {
-      label: 'Mobile',
+      label: "Mobile",
    },
    january: {
-      label: 'January',
-      color: 'hsl(var(--chart-1))',
+      label: "January",
+      color: "hsl(var(--chart-1))",
    },
    february: {
-      label: 'February',
-      color: 'hsl(var(--chart-2))',
+      label: "February",
+      color: "hsl(var(--chart-2))",
    },
    march: {
-      label: 'March',
-      color: 'hsl(var(--chart-3))',
+      label: "March",
+      color: "hsl(var(--chart-3))",
    },
    april: {
-      label: 'April',
-      color: 'hsl(var(--chart-4))',
+      label: "April",
+      color: "hsl(var(--chart-4))",
    },
    may: {
-      label: 'May',
-      color: 'hsl(var(--chart-5))',
+      label: "May",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -85,18 +83,19 @@ export default function Component() {
             >
                <PieChart>
                   <ChartTooltip
-                     content={(
+                     content={
                         <ChartTooltipContent
                            labelKey="visitors"
                            nameKey="month"
                            indicator="line"
                            labelFormatter={(_, payload) => {
                               return chartConfig[
-                                 payload?.[0].dataKey as keyof typeof chartConfig
+                                 payload?.[0]
+                                    .dataKey as keyof typeof chartConfig
                               ].label
                            }}
                         />
-                     )}
+                     }
                   />
                   <Pie data={desktopData} dataKey="desktop" outerRadius={60} />
                   <Pie
@@ -110,9 +109,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-radar-default.tsx b/apps/web/__registry__/default/block/chart-radar-default.tsx
index d4105cb4..8095a212 100644
--- a/apps/web/__registry__/default/block/chart-radar-default.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-default.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart'
+export const description = "A radar chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -53,7 +51,10 @@ export default function Component() {
                className="mx-auto aspect-square max-h-[250px]"
             >
                <RadarChart data={chartData}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
                   <PolarAngleAxis dataKey="month" />
                   <PolarGrid />
                   <Radar
@@ -66,9 +67,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-dots.tsx b/apps/web/__registry__/default/block/chart-radar-dots.tsx
index 6e412568..960c623c 100644
--- a/apps/web/__registry__/default/block/chart-radar-dots.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-dots.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with dots'
+export const description = "A radar chart with dots"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -53,7 +51,10 @@ export default function Component() {
                className="mx-auto aspect-square max-h-[250px]"
             >
                <RadarChart data={chartData}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
                   <PolarAngleAxis dataKey="month" />
                   <PolarGrid />
                   <Radar
@@ -70,9 +71,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-grid-circle-fill.tsx b/apps/web/__registry__/default/block/chart-radar-grid-circle-fill.tsx
index 5b29a8f8..a3784461 100644
--- a/apps/web/__registry__/default/block/chart-radar-grid-circle-fill.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-grid-circle-fill.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with a grid and circle fill'
+export const description = "A radar chart with a grid and circle fill"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 285 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 203 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 264 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 285 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 264 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -53,7 +51,10 @@ export default function Component() {
                className="mx-auto aspect-square max-h-[250px]"
             >
                <RadarChart data={chartData}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
                   <PolarGrid
                      className="fill-[--color-desktop] opacity-20"
                      gridType="circle"
@@ -69,9 +70,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-grid-circle-no-lines.tsx b/apps/web/__registry__/default/block/chart-radar-grid-circle-no-lines.tsx
index 0df38d20..b6bc9d67 100644
--- a/apps/web/__registry__/default/block/chart-radar-grid-circle-no-lines.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-grid-circle-no-lines.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with a grid and circle fill'
+export const description = "A radar chart with a grid and circle fill"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 203 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -73,9 +71,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-grid-circle.tsx b/apps/web/__registry__/default/block/chart-radar-grid-circle.tsx
index 4ce7e306..a31334b6 100644
--- a/apps/web/__registry__/default/block/chart-radar-grid-circle.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-grid-circle.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with a grid and circle'
+export const description = "A radar chart with a grid and circle"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -73,9 +71,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-grid-custom.tsx b/apps/web/__registry__/default/block/chart-radar-grid-custom.tsx
index 67965a88..fb953b55 100644
--- a/apps/web/__registry__/default/block/chart-radar-grid-custom.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-grid-custom.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with a custom grid'
+export const description = "A radar chart with a custom grid"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -57,7 +55,11 @@ export default function Component() {
                      cursor={false}
                      content={<ChartTooltipContent hideLabel />}
                   />
-                  <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />
+                  <PolarGrid
+                     radialLines={false}
+                     polarRadius={[90]}
+                     strokeWidth={1}
+                  />
                   <PolarAngleAxis dataKey="month" />
                   <Radar
                      dataKey="desktop"
@@ -69,9 +71,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-grid-fill.tsx b/apps/web/__registry__/default/block/chart-radar-grid-fill.tsx
index cc359b4f..d43623bd 100644
--- a/apps/web/__registry__/default/block/chart-radar-grid-fill.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-grid-fill.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with a grid filled'
+export const description = "A radar chart with a grid filled"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 285 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 203 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 264 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 285 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 264 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -69,9 +67,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-grid-none.tsx b/apps/web/__registry__/default/block/chart-radar-grid-none.tsx
index ca243a36..7ef65393 100644
--- a/apps/web/__registry__/default/block/chart-radar-grid-none.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-grid-none.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with no grid'
+export const description = "A radar chart with no grid"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -72,9 +70,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-icons.tsx b/apps/web/__registry__/default/block/chart-radar-icons.tsx
index f287f913..d54c85ab 100644
--- a/apps/web/__registry__/default/block/chart-radar-icons.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-icons.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,38 +10,36 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with icons'
+export const description = "A radar chart with icons"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
       icon: ArrowDownFromLine,
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
       icon: ArrowUpFromLine,
    },
 } satisfies ChartConfig
@@ -79,15 +77,16 @@ export default function Component() {
                      fillOpacity={0.6}
                   />
                   <Radar dataKey="mobile" fill="var(--color-mobile)" />
-                  <ChartLegend className="mt-8" content={<ChartLegendContent />} />
+                  <ChartLegend
+                     className="mt-8"
+                     content={<ChartLegendContent />}
+                  />
                </RadarChart>
             </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col gap-2 pt-4 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-label-custom.tsx b/apps/web/__registry__/default/block/chart-radar-label-custom.tsx
index 59ac3355..ebfc8be3 100644
--- a/apps/web/__registry__/default/block/chart-radar-label-custom.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-label-custom.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with a custom label'
+export const description = "A radar chart with a custom label"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -111,9 +109,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-legend.tsx b/apps/web/__registry__/default/block/chart-radar-legend.tsx
index 7a7cc4c8..465ebff1 100644
--- a/apps/web/__registry__/default/block/chart-radar-legend.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-legend.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,37 +10,35 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with a legend'
+export const description = "A radar chart with a legend"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -77,15 +75,16 @@ export default function Component() {
                      fillOpacity={0.6}
                   />
                   <Radar dataKey="mobile" fill="var(--color-mobile)" />
-                  <ChartLegend className="mt-8" content={<ChartLegendContent />} />
+                  <ChartLegend
+                     className="mt-8"
+                     content={<ChartLegendContent />}
+                  />
                </RadarChart>
             </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col gap-2 pt-4 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-lines-only.tsx b/apps/web/__registry__/default/block/chart-radar-lines-only.tsx
index 77d26262..545adcad 100644
--- a/apps/web/__registry__/default/block/chart-radar-lines-only.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-lines-only.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with lines only'
+export const description = "A radar chart with lines only"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 160 },
-   { month: 'February', desktop: 185, mobile: 170 },
-   { month: 'March', desktop: 207, mobile: 180 },
-   { month: 'April', desktop: 173, mobile: 160 },
-   { month: 'May', desktop: 160, mobile: 190 },
-   { month: 'June', desktop: 174, mobile: 204 },
+   { month: "January", desktop: 186, mobile: 160 },
+   { month: "February", desktop: 185, mobile: 170 },
+   { month: "March", desktop: 207, mobile: 180 },
+   { month: "April", desktop: 173, mobile: 160 },
+   { month: "May", desktop: 160, mobile: 190 },
+   { month: "June", desktop: 174, mobile: 204 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -82,9 +80,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-multiple.tsx b/apps/web/__registry__/default/block/chart-radar-multiple.tsx
index 37d2a7f6..8f0e5449 100644
--- a/apps/web/__registry__/default/block/chart-radar-multiple.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-multiple.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with multiple data'
+export const description = "A radar chart with multiple data"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -74,9 +72,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radar-radius.tsx b/apps/web/__registry__/default/block/chart-radar-radius.tsx
index b0103b6f..cf5b49eb 100644
--- a/apps/web/__registry__/default/block/chart-radar-radius.tsx
+++ b/apps/web/__registry__/default/block/chart-radar-radius.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
+import { TrendingUp } from "lucide-react"
 import {
    PolarAngleAxis,
    PolarGrid,
    PolarRadiusAxis,
    Radar,
    RadarChart,
-} from 'recharts'
+} from "recharts"
 
 import {
    Card,
@@ -16,35 +16,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radar chart with a radius axis'
+export const description = "A radar chart with a radius axis"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -66,7 +64,10 @@ export default function Component() {
                   <ChartTooltip
                      cursor={false}
                      content={
-                        <ChartTooltipContent indicator="line" labelKey="month" />
+                        <ChartTooltipContent
+                           indicator="line"
+                           labelKey="month"
+                        />
                      }
                   />
                   <PolarGrid />
@@ -87,9 +88,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/default/block/chart-radial-grid.tsx b/apps/web/__registry__/default/block/chart-radial-grid.tsx
index 38b6524f..a6ab9fd7 100644
--- a/apps/web/__registry__/default/block/chart-radial-grid.tsx
+++ b/apps/web/__registry__/default/block/chart-radial-grid.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarGrid, RadialBar, RadialBarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarGrid, RadialBar, RadialBarChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radial chart with a grid'
+export const description = "A radial chart with a grid"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -68,10 +66,16 @@ export default function Component() {
                config={chartConfig}
                className="mx-auto aspect-square max-h-[250px]"
             >
-               <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>
+               <RadialBarChart
+                  data={chartData}
+                  innerRadius={30}
+                  outerRadius={100}
+               >
                   <ChartTooltip
                      cursor={false}
-                     content={<ChartTooltipContent hideLabel nameKey="browser" />}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
                   />
                   <PolarGrid gridType="circle" />
                   <RadialBar dataKey="visitors" />
@@ -80,9 +84,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-radial-label.tsx b/apps/web/__registry__/default/block/chart-radial-label.tsx
index a8e3c9f1..bb72d1ad 100644
--- a/apps/web/__registry__/default/block/chart-radial-label.tsx
+++ b/apps/web/__registry__/default/block/chart-radial-label.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { LabelList, RadialBar, RadialBarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { LabelList, RadialBar, RadialBarChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radial chart with a label'
+export const description = "A radial chart with a label"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -77,7 +75,9 @@ export default function Component() {
                >
                   <ChartTooltip
                      cursor={false}
-                     content={<ChartTooltipContent hideLabel nameKey="browser" />}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
                   />
                   <RadialBar dataKey="visitors" background>
                      <LabelList
@@ -92,9 +92,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-radial-shape.tsx b/apps/web/__registry__/default/block/chart-radial-shape.tsx
index 3774a11c..4e7d07dd 100644
--- a/apps/web/__registry__/default/block/chart-radial-shape.tsx
+++ b/apps/web/__registry__/default/block/chart-radial-shape.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
+import { TrendingUp } from "lucide-react"
 import {
    Label,
    PolarGrid,
    PolarRadiusAxis,
    RadialBar,
    RadialBarChart,
-} from 'recharts'
+} from "recharts"
 
 import {
    Card,
@@ -16,23 +16,23 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type { ChartConfig } from '~/registry/default/ui/chart'
-import { ChartContainer } from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
+import { ChartContainer } from "~/registry/default/ui/chart"
 
-export const description = 'A radial chart with a custom shape'
+export const description = "A radial chart with a custom shape"
 
 const chartData = [
-   { browser: 'safari', visitors: 1260, fill: 'var(--color-safari)' },
+   { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -62,10 +62,14 @@ export default function Component() {
                      polarRadius={[86, 74]}
                   />
                   <RadialBar dataKey="visitors" background />
-                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
                      <Label
                         content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                               return (
                                  <text
                                     x={viewBox.cx}
@@ -98,9 +102,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-radial-simple.tsx b/apps/web/__registry__/default/block/chart-radial-simple.tsx
index d8ba77ed..0315d0dc 100644
--- a/apps/web/__registry__/default/block/chart-radial-simple.tsx
+++ b/apps/web/__registry__/default/block/chart-radial-simple.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { RadialBar, RadialBarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { RadialBar, RadialBarChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radial chart'
+export const description = "A radial chart"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -68,10 +66,16 @@ export default function Component() {
                config={chartConfig}
                className="mx-auto aspect-square max-h-[250px]"
             >
-               <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>
+               <RadialBarChart
+                  data={chartData}
+                  innerRadius={30}
+                  outerRadius={110}
+               >
                   <ChartTooltip
                      cursor={false}
-                     content={<ChartTooltipContent hideLabel nameKey="browser" />}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
                   />
                   <RadialBar dataKey="visitors" background />
                </RadialBarChart>
@@ -79,9 +83,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-radial-stacked.tsx b/apps/web/__registry__/default/block/chart-radial-stacked.tsx
index e4fd832a..e1b66af4 100644
--- a/apps/web/__registry__/default/block/chart-radial-stacked.tsx
+++ b/apps/web/__registry__/default/block/chart-radial-stacked.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
 
 import {
    Card,
@@ -10,28 +10,26 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A radial chart with stacked sections'
+export const description = "A radial chart with stacked sections"
 
-const chartData = [{ month: 'january', desktop: 1260, mobile: 570 }]
+const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -59,12 +57,20 @@ export default function Component() {
                      cursor={false}
                      content={<ChartTooltipContent hideLabel />}
                   />
-                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
                      <Label
                         content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                               return (
-                                 <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                 >
                                     <tspan
                                        x={viewBox.cx}
                                        y={(viewBox.cy || 0) - 16}
@@ -104,9 +110,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-radial-text.tsx b/apps/web/__registry__/default/block/chart-radial-text.tsx
index b0f373f1..db92f580 100644
--- a/apps/web/__registry__/default/block/chart-radial-text.tsx
+++ b/apps/web/__registry__/default/block/chart-radial-text.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
+import { TrendingUp } from "lucide-react"
 import {
    Label,
    PolarGrid,
    PolarRadiusAxis,
    RadialBar,
    RadialBarChart,
-} from 'recharts'
+} from "recharts"
 
 import {
    Card,
@@ -16,23 +16,23 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type { ChartConfig } from '~/registry/default/ui/chart'
-import { ChartContainer } from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
+import { ChartContainer } from "~/registry/default/ui/chart"
 
-export const description = 'A radial chart with text'
+export const description = "A radial chart with text"
 
 const chartData = [
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -63,10 +63,14 @@ export default function Component() {
                      polarRadius={[86, 74]}
                   />
                   <RadialBar dataKey="visitors" background cornerRadius={10} />
-                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
                      <Label
                         content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                               return (
                                  <text
                                     x={viewBox.cx}
@@ -99,9 +103,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/default/block/chart-tooltip-advanced.tsx b/apps/web/__registry__/default/block/chart-tooltip-advanced.tsx
index 6d6a5d91..a7eae2e9 100644
--- a/apps/web/__registry__/default/block/chart-tooltip-advanced.tsx
+++ b/apps/web/__registry__/default/block/chart-tooltip-advanced.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -58,8 +56,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
@@ -76,7 +74,7 @@ export default function Component() {
                      radius={[4, 4, 0, 0]}
                   />
                   <ChartTooltip
-                     content={(
+                     content={
                         <ChartTooltipContent
                            hideLabel
                            className="w-[180px]"
@@ -86,12 +84,12 @@ export default function Component() {
                                     className="size-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
                                     style={
                                        {
-                                          '--color-bg': `var(--color-${name})`,
+                                          "--color-bg": `var(--color-${name})`,
                                        } as React.CSSProperties
                                     }
                                  />
-                                 {chartConfig[name as keyof typeof chartConfig]?.label
-                                 || name}
+                                 {chartConfig[name as keyof typeof chartConfig]
+                                    ?.label || name}
                                  <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
                                     {value}
                                     <span className="text-muted-foreground font-normal">
@@ -103,7 +101,8 @@ export default function Component() {
                                     <div className="text-foreground mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium">
                                        Total
                                        <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
-                                          {item.payload.running + item.payload.swimming}
+                                          {item.payload.running +
+                                             item.payload.swimming}
                                           <span className="text-muted-foreground font-normal">
                                              kcal
                                           </span>
@@ -113,7 +112,7 @@ export default function Component() {
                               </>
                            )}
                         />
-                     )}
+                     }
                      cursor={false}
                      defaultIndex={1}
                   />
diff --git a/apps/web/__registry__/default/block/chart-tooltip-default.tsx b/apps/web/__registry__/default/block/chart-tooltip-default.tsx
index e1459cf7..1e8e209f 100644
--- a/apps/web/__registry__/default/block/chart-tooltip-default.tsx
+++ b/apps/web/__registry__/default/block/chart-tooltip-default.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -58,8 +56,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
diff --git a/apps/web/__registry__/default/block/chart-tooltip-formatter.tsx b/apps/web/__registry__/default/block/chart-tooltip-formatter.tsx
index 52cabbed..cdfb6e80 100644
--- a/apps/web/__registry__/default/block/chart-tooltip-formatter.tsx
+++ b/apps/web/__registry__/default/block/chart-tooltip-formatter.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -56,8 +54,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
@@ -74,13 +72,13 @@ export default function Component() {
                      radius={[4, 4, 0, 0]}
                   />
                   <ChartTooltip
-                     content={(
+                     content={
                         <ChartTooltipContent
                            hideLabel
                            formatter={(value, name) => (
                               <div className="text-muted-foreground flex min-w-[130px] items-center text-xs">
-                                 {chartConfig[name as keyof typeof chartConfig]?.label
-                                 || name}
+                                 {chartConfig[name as keyof typeof chartConfig]
+                                    ?.label || name}
                                  <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
                                     {value}
                                     <span className="text-muted-foreground font-normal">
@@ -90,7 +88,7 @@ export default function Component() {
                               </div>
                            )}
                         />
-                     )}
+                     }
                      cursor={false}
                      defaultIndex={1}
                   />
diff --git a/apps/web/__registry__/default/block/chart-tooltip-icons.tsx b/apps/web/__registry__/default/block/chart-tooltip-icons.tsx
index 2d04239d..d91a9a18 100644
--- a/apps/web/__registry__/default/block/chart-tooltip-icons.tsx
+++ b/apps/web/__registry__/default/block/chart-tooltip-icons.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { Footprints, Waves } from 'lucide-react'
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Footprints, Waves } from "lucide-react"
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -9,36 +9,34 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
       icon: Footprints,
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
       icon: Waves,
    },
 } satisfies ChartConfig
@@ -59,8 +57,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
diff --git a/apps/web/__registry__/default/block/chart-tooltip-indicator-line.tsx b/apps/web/__registry__/default/block/chart-tooltip-indicator-line.tsx
index 44befde0..5fdf6fc4 100644
--- a/apps/web/__registry__/default/block/chart-tooltip-indicator-line.tsx
+++ b/apps/web/__registry__/default/block/chart-tooltip-indicator-line.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -56,8 +54,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
diff --git a/apps/web/__registry__/default/block/chart-tooltip-indicator-none.tsx b/apps/web/__registry__/default/block/chart-tooltip-indicator-none.tsx
index d8eeb292..ba6b9636 100644
--- a/apps/web/__registry__/default/block/chart-tooltip-indicator-none.tsx
+++ b/apps/web/__registry__/default/block/chart-tooltip-indicator-none.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -56,8 +54,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
diff --git a/apps/web/__registry__/default/block/chart-tooltip-label-custom.tsx b/apps/web/__registry__/default/block/chart-tooltip-label-custom.tsx
index 92ded685..eef8d163 100644
--- a/apps/web/__registry__/default/block/chart-tooltip-label-custom.tsx
+++ b/apps/web/__registry__/default/block/chart-tooltip-label-custom.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,38 +8,36 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    activities: {
-      label: 'Activities',
+      label: "Activities",
    },
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -61,8 +59,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
@@ -80,7 +78,10 @@ export default function Component() {
                   />
                   <ChartTooltip
                      content={
-                        <ChartTooltipContent labelKey="activities" indicator="line" />
+                        <ChartTooltipContent
+                           labelKey="activities"
+                           indicator="line"
+                        />
                      }
                      cursor={false}
                      defaultIndex={1}
diff --git a/apps/web/__registry__/default/block/chart-tooltip-label-formatter.tsx b/apps/web/__registry__/default/block/chart-tooltip-label-formatter.tsx
index 14d73680..acbc8249 100644
--- a/apps/web/__registry__/default/block/chart-tooltip-label-formatter.tsx
+++ b/apps/web/__registry__/default/block/chart-tooltip-label-formatter.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -56,8 +54,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
@@ -74,17 +72,20 @@ export default function Component() {
                      radius={[4, 4, 0, 0]}
                   />
                   <ChartTooltip
-                     content={(
+                     content={
                         <ChartTooltipContent
                            labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 day: 'numeric',
-                                 month: 'long',
-                                 year: 'numeric',
-                              })
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    day: "numeric",
+                                    month: "long",
+                                    year: "numeric",
+                                 },
+                              )
                            }}
                         />
-                     )}
+                     }
                      cursor={false}
                      defaultIndex={1}
                   />
diff --git a/apps/web/__registry__/default/block/chart-tooltip-label-none.tsx b/apps/web/__registry__/default/block/chart-tooltip-label-none.tsx
index 2727a1b6..01b523c1 100644
--- a/apps/web/__registry__/default/block/chart-tooltip-label-none.tsx
+++ b/apps/web/__registry__/default/block/chart-tooltip-label-none.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/card"
+import type { ChartConfig } from "~/registry/default/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
+} from "~/registry/default/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -56,8 +54,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
diff --git a/apps/web/__registry__/default/block/charts-01.tsx b/apps/web/__registry__/default/block/charts-01.tsx
index 7a5d5b6d..1fa57a37 100644
--- a/apps/web/__registry__/default/block/charts-01.tsx
+++ b/apps/web/__registry__/default/block/charts-01.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client"
 
 import {
    Area,
@@ -17,7 +17,7 @@ import {
    ReferenceLine,
    XAxis,
    YAxis,
-} from 'recharts'
+} from "recharts"
 
 import {
    Card,
@@ -26,32 +26,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
+} from "~/registry/default/ui/card"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/chart"
+import { Separator } from "~/registry/default/ui/separator"
 
-export const description = 'A collection of health charts.'
+export const description = "A collection of health charts."
 
-export const iframeHeight = '900px'
+export const iframeHeight = "900px"
 
-export const containerClassName = 'min-h-screen py-12'
+export const containerClassName = "min-h-screen py-12"
 
 export default function Charts() {
    return (
       <div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
          <div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
-            <Card
-               className="lg:max-w-md" x-chunk="charts-01-chunk-0"
-            >
+            <Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
                <CardHeader className="space-y-0 pb-2">
                   <CardDescription>Today</CardDescription>
                   <CardTitle className="text-4xl tabular-nums">
-                     12,584
-                     {' '}
+                     12,584{" "}
                      <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
                         steps
                      </span>
@@ -61,8 +58,8 @@ export default function Charts() {
                   <ChartContainer
                      config={{
                         steps: {
-                           label: 'Steps',
-                           color: 'hsl(var(--chart-1))',
+                           label: "Steps",
+                           color: "hsl(var(--chart-1))",
                         },
                      }}
                   >
@@ -74,31 +71,31 @@ export default function Charts() {
                         }}
                         data={[
                            {
-                              date: '2024-01-01',
+                              date: "2024-01-01",
                               steps: 2000,
                            },
                            {
-                              date: '2024-01-02',
+                              date: "2024-01-02",
                               steps: 2100,
                            },
                            {
-                              date: '2024-01-03',
+                              date: "2024-01-03",
                               steps: 2200,
                            },
                            {
-                              date: '2024-01-04',
+                              date: "2024-01-04",
                               steps: 1300,
                            },
                            {
-                              date: '2024-01-05',
+                              date: "2024-01-05",
                               steps: 1400,
                            },
                            {
-                              date: '2024-01-06',
+                              date: "2024-01-06",
                               steps: 2500,
                            },
                            {
-                              date: '2024-01-07',
+                              date: "2024-01-07",
                               steps: 1600,
                            },
                         ]}
@@ -116,25 +113,31 @@ export default function Charts() {
                            axisLine={false}
                            tickMargin={4}
                            tickFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 weekday: 'short',
-                              })
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    weekday: "short",
+                                 },
+                              )
                            }}
                         />
                         <ChartTooltip
                            defaultIndex={2}
-                           content={(
+                           content={
                               <ChartTooltipContent
                                  hideIndicator
                                  labelFormatter={(value) => {
-                                    return new Date(value).toLocaleDateString('en-US', {
-                                       day: 'numeric',
-                                       month: 'long',
-                                       year: 'numeric',
-                                    })
+                                    return new Date(value).toLocaleDateString(
+                                       "en-US",
+                                       {
+                                          day: "numeric",
+                                          month: "long",
+                                          year: "numeric",
+                                       },
+                                    )
                                  }}
                               />
-                           )}
+                           }
                            cursor={false}
                         />
                         <ReferenceLine
@@ -163,24 +166,20 @@ export default function Charts() {
                </CardContent>
                <CardFooter className="flex-col items-start gap-1">
                   <CardDescription>
-                     Over the past 7 days, you have walked
-                     {' '}
-                     <span className="text-foreground font-medium">53,305</span>
-                     {' '}
+                     Over the past 7 days, you have walked{" "}
+                     <span className="text-foreground font-medium">53,305</span>{" "}
                      steps.
                   </CardDescription>
                   <CardDescription>
-                     You need
-                     {' '}
-                     <span className="text-foreground font-medium">12,584</span>
-                     {' '}
-                     more
-                     steps to reach your goal.
+                     You need{" "}
+                     <span className="text-foreground font-medium">12,584</span>{" "}
+                     more steps to reach your goal.
                   </CardDescription>
                </CardFooter>
             </Card>
             <Card
-               className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1"
+               className="flex flex-col lg:max-w-md"
+               x-chunk="charts-01-chunk-1"
             >
                <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
                   <div>
@@ -206,8 +205,8 @@ export default function Charts() {
                   <ChartContainer
                      config={{
                         resting: {
-                           label: 'Resting',
-                           color: 'hsl(var(--chart-1))',
+                           label: "Resting",
+                           color: "hsl(var(--chart-1))",
                         },
                      }}
                      className="w-full"
@@ -221,31 +220,31 @@ export default function Charts() {
                         }}
                         data={[
                            {
-                              date: '2024-01-01',
+                              date: "2024-01-01",
                               resting: 62,
                            },
                            {
-                              date: '2024-01-02',
+                              date: "2024-01-02",
                               resting: 72,
                            },
                            {
-                              date: '2024-01-03',
+                              date: "2024-01-03",
                               resting: 35,
                            },
                            {
-                              date: '2024-01-04',
+                              date: "2024-01-04",
                               resting: 62,
                            },
                            {
-                              date: '2024-01-05',
+                              date: "2024-01-05",
                               resting: 52,
                            },
                            {
-                              date: '2024-01-06',
+                              date: "2024-01-06",
                               resting: 62,
                            },
                            {
-                              date: '2024-01-07',
+                              date: "2024-01-07",
                               resting: 70,
                            },
                         ]}
@@ -256,16 +255,19 @@ export default function Charts() {
                            stroke="hsl(var(--muted-foreground))"
                            strokeOpacity={0.5}
                         />
-                        <YAxis hide domain={['dataMin - 10', 'dataMax + 10']} />
+                        <YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
                         <XAxis
                            dataKey="date"
                            tickLine={false}
                            axisLine={false}
                            tickMargin={8}
                            tickFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 weekday: 'short',
-                              })
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    weekday: "short",
+                                 },
+                              )
                            }}
                         />
                         <Line
@@ -276,24 +278,27 @@ export default function Charts() {
                            strokeWidth={2}
                            dot={false}
                            activeDot={{
-                              fill: 'var(--color-resting)',
-                              stroke: 'var(--color-resting)',
+                              fill: "var(--color-resting)",
+                              stroke: "var(--color-resting)",
                               r: 4,
                            }}
                         />
                         <ChartTooltip
-                           content={(
+                           content={
                               <ChartTooltipContent
                                  indicator="line"
                                  labelFormatter={(value) => {
-                                    return new Date(value).toLocaleDateString('en-US', {
-                                       day: 'numeric',
-                                       month: 'long',
-                                       year: 'numeric',
-                                    })
+                                    return new Date(value).toLocaleDateString(
+                                       "en-US",
+                                       {
+                                          day: "numeric",
+                                          month: "long",
+                                          year: "numeric",
+                                       },
+                                    )
                                  }}
                               />
-                           )}
+                           }
                            cursor={false}
                         />
                      </LineChart>
@@ -302,9 +307,7 @@ export default function Charts() {
             </Card>
          </div>
          <div className="grid w-full flex-1 gap-6 lg:max-w-80">
-            <Card
-               className="max-w-xs" x-chunk="charts-01-chunk-2"
-            >
+            <Card className="max-w-xs" x-chunk="charts-01-chunk-2">
                <CardHeader>
                   <CardTitle>Progress</CardTitle>
                   <CardDescription>
@@ -322,8 +325,8 @@ export default function Charts() {
                      <ChartContainer
                         config={{
                            steps: {
-                              label: 'Steps',
-                              color: 'hsl(var(--chart-1))',
+                              label: "Steps",
+                              color: "hsl(var(--chart-1))",
                            },
                         }}
                         className="aspect-auto h-[32px] w-full"
@@ -339,7 +342,7 @@ export default function Charts() {
                            }}
                            data={[
                               {
-                                 date: '2024',
+                                 date: "2024",
                                  steps: 12435,
                               },
                            ]}
@@ -358,7 +361,12 @@ export default function Charts() {
                                  fill="white"
                               />
                            </Bar>
-                           <YAxis dataKey="date" type="category" tickCount={1} hide />
+                           <YAxis
+                              dataKey="date"
+                              type="category"
+                              tickCount={1}
+                              hide
+                           />
                            <XAxis dataKey="steps" type="number" hide />
                         </BarChart>
                      </ChartContainer>
@@ -373,8 +381,8 @@ export default function Charts() {
                      <ChartContainer
                         config={{
                            steps: {
-                              label: 'Steps',
-                              color: 'hsl(var(--muted))',
+                              label: "Steps",
+                              color: "hsl(var(--muted))",
                            },
                         }}
                         className="aspect-auto h-[32px] w-full"
@@ -390,7 +398,7 @@ export default function Charts() {
                            }}
                            data={[
                               {
-                                 date: '2023',
+                                 date: "2023",
                                  steps: 10103,
                               },
                            ]}
@@ -409,21 +417,24 @@ export default function Charts() {
                                  fill="hsl(var(--muted-foreground))"
                               />
                            </Bar>
-                           <YAxis dataKey="date" type="category" tickCount={1} hide />
+                           <YAxis
+                              dataKey="date"
+                              type="category"
+                              tickCount={1}
+                              hide
+                           />
                            <XAxis dataKey="steps" type="number" hide />
                         </BarChart>
                      </ChartContainer>
                   </div>
                </CardContent>
             </Card>
-            <Card
-               className="max-w-xs" x-chunk="charts-01-chunk-3"
-            >
+            <Card className="max-w-xs" x-chunk="charts-01-chunk-3">
                <CardHeader className="p-4 pb-0">
                   <CardTitle>Walking Distance</CardTitle>
                   <CardDescription>
-                     Over the last 7 days, your distance walked and run was 12.5 miles
-                     per day.
+                     Over the last 7 days, your distance walked and run was 12.5
+                     miles per day.
                   </CardDescription>
                </CardHeader>
                <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
@@ -436,8 +447,8 @@ export default function Charts() {
                   <ChartContainer
                      config={{
                         steps: {
-                           label: 'Steps',
-                           color: 'hsl(var(--chart-1))',
+                           label: "Steps",
+                           color: "hsl(var(--chart-1))",
                         },
                      }}
                      className="ml-auto w-[72px]"
@@ -452,31 +463,31 @@ export default function Charts() {
                         }}
                         data={[
                            {
-                              date: '2024-01-01',
+                              date: "2024-01-01",
                               steps: 2000,
                            },
                            {
-                              date: '2024-01-02',
+                              date: "2024-01-02",
                               steps: 2100,
                            },
                            {
-                              date: '2024-01-03',
+                              date: "2024-01-03",
                               steps: 2200,
                            },
                            {
-                              date: '2024-01-04',
+                              date: "2024-01-04",
                               steps: 1300,
                            },
                            {
-                              date: '2024-01-05',
+                              date: "2024-01-05",
                               steps: 1400,
                            },
                            {
-                              date: '2024-01-06',
+                              date: "2024-01-06",
                               steps: 2500,
                            },
                            {
-                              date: '2024-01-07',
+                              date: "2024-01-07",
                               steps: 1600,
                            },
                         ]}
@@ -500,23 +511,21 @@ export default function Charts() {
                   </ChartContainer>
                </CardContent>
             </Card>
-            <Card
-               className="max-w-xs" x-chunk="charts-01-chunk-4"
-            >
+            <Card className="max-w-xs" x-chunk="charts-01-chunk-4">
                <CardContent className="flex gap-4 p-4 pb-2">
                   <ChartContainer
                      config={{
                         move: {
-                           label: 'Move',
-                           color: 'hsl(var(--chart-1))',
+                           label: "Move",
+                           color: "hsl(var(--chart-1))",
                         },
                         stand: {
-                           label: 'Stand',
-                           color: 'hsl(var(--chart-2))',
+                           label: "Stand",
+                           color: "hsl(var(--chart-2))",
                         },
                         exercise: {
-                           label: 'Exercise',
-                           color: 'hsl(var(--chart-3))',
+                           label: "Exercise",
+                           color: "hsl(var(--chart-3))",
                         },
                      }}
                      className="h-[140px] w-full"
@@ -530,22 +539,22 @@ export default function Charts() {
                         }}
                         data={[
                            {
-                              activity: 'stand',
+                              activity: "stand",
                               value: (8 / 12) * 100,
-                              label: '8/12 hr',
-                              fill: 'var(--color-stand)',
+                              label: "8/12 hr",
+                              fill: "var(--color-stand)",
                            },
                            {
-                              activity: 'exercise',
+                              activity: "exercise",
                               value: (46 / 60) * 100,
-                              label: '46/60 min',
-                              fill: 'var(--color-exercise)',
+                              label: "46/60 min",
+                              fill: "var(--color-exercise)",
                            },
                            {
-                              activity: 'move',
+                              activity: "move",
                               value: (245 / 360) * 100,
-                              label: '245/360 kcal',
-                              fill: 'var(--color-move)',
+                              label: "245/360 kcal",
+                              fill: "var(--color-move)",
                            },
                         ]}
                         layout="vertical"
@@ -576,7 +585,9 @@ export default function Charts() {
                <CardFooter className="flex flex-row border-t p-4">
                   <div className="flex w-full items-center gap-2">
                      <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-xs">Move</div>
+                        <div className="text-muted-foreground text-xs">
+                           Move
+                        </div>
                         <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
                            562
                            <span className="text-muted-foreground text-sm font-normal">
@@ -584,9 +595,14 @@ export default function Charts() {
                            </span>
                         </div>
                      </div>
-                     <Separator orientation="vertical" className="mx-2 h-10 w-px" />
+                     <Separator
+                        orientation="vertical"
+                        className="mx-2 h-10 w-px"
+                     />
                      <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-xs">Exercise</div>
+                        <div className="text-muted-foreground text-xs">
+                           Exercise
+                        </div>
                         <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
                            73
                            <span className="text-muted-foreground text-sm font-normal">
@@ -594,9 +610,14 @@ export default function Charts() {
                            </span>
                         </div>
                      </div>
-                     <Separator orientation="vertical" className="mx-2 h-10 w-px" />
+                     <Separator
+                        orientation="vertical"
+                        className="mx-2 h-10 w-px"
+                     />
                      <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-xs">Stand</div>
+                        <div className="text-muted-foreground text-xs">
+                           Stand
+                        </div>
                         <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
                            14
                            <span className="text-muted-foreground text-sm font-normal">
@@ -609,13 +630,13 @@ export default function Charts() {
             </Card>
          </div>
          <div className="grid w-full flex-1 gap-6">
-            <Card
-               className="max-w-xs" x-chunk="charts-01-chunk-5"
-            >
+            <Card className="max-w-xs" x-chunk="charts-01-chunk-5">
                <CardContent className="flex gap-4 p-4">
                   <div className="grid items-center gap-2">
                      <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-sm">Move</div>
+                        <div className="text-muted-foreground text-sm">
+                           Move
+                        </div>
                         <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
                            562/600
                            <span className="text-muted-foreground text-sm font-normal">
@@ -624,7 +645,9 @@ export default function Charts() {
                         </div>
                      </div>
                      <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-sm">Exercise</div>
+                        <div className="text-muted-foreground text-sm">
+                           Exercise
+                        </div>
                         <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
                            73/120
                            <span className="text-muted-foreground text-sm font-normal">
@@ -633,7 +656,9 @@ export default function Charts() {
                         </div>
                      </div>
                      <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-sm">Stand</div>
+                        <div className="text-muted-foreground text-sm">
+                           Stand
+                        </div>
                         <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
                            8/12
                            <span className="text-muted-foreground text-sm font-normal">
@@ -645,16 +670,16 @@ export default function Charts() {
                   <ChartContainer
                      config={{
                         move: {
-                           label: 'Move',
-                           color: 'hsl(var(--chart-1))',
+                           label: "Move",
+                           color: "hsl(var(--chart-1))",
                         },
                         exercise: {
-                           label: 'Exercise',
-                           color: 'hsl(var(--chart-2))',
+                           label: "Exercise",
+                           color: "hsl(var(--chart-2))",
                         },
                         stand: {
-                           label: 'Stand',
-                           color: 'hsl(var(--chart-3))',
+                           label: "Stand",
+                           color: "hsl(var(--chart-3))",
                         },
                      }}
                      className="mx-auto aspect-square w-full max-w-[80%]"
@@ -668,19 +693,19 @@ export default function Charts() {
                         }}
                         data={[
                            {
-                              activity: 'stand',
+                              activity: "stand",
                               value: (8 / 12) * 100,
-                              fill: 'var(--color-stand)',
+                              fill: "var(--color-stand)",
                            },
                            {
-                              activity: 'exercise',
+                              activity: "exercise",
                               value: (46 / 60) * 100,
-                              fill: 'var(--color-exercise)',
+                              fill: "var(--color-exercise)",
                            },
                            {
-                              activity: 'move',
+                              activity: "move",
                               value: (245 / 360) * 100,
-                              fill: 'var(--color-move)',
+                              fill: "var(--color-move)",
                            },
                         ]}
                         innerRadius="20%"
@@ -694,18 +719,21 @@ export default function Charts() {
                            dataKey="value"
                            tick={false}
                         />
-                        <RadialBar dataKey="value" background cornerRadius={5} />
+                        <RadialBar
+                           dataKey="value"
+                           background
+                           cornerRadius={5}
+                        />
                      </RadialBarChart>
                   </ChartContainer>
                </CardContent>
             </Card>
-            <Card
-               className="max-w-xs" x-chunk="charts-01-chunk-6"
-            >
+            <Card className="max-w-xs" x-chunk="charts-01-chunk-6">
                <CardHeader className="p-4 pb-0">
                   <CardTitle>Active Energy</CardTitle>
                   <CardDescription>
-                     You're burning an average of 754 calories per day. Good job!
+                     You're burning an average of 754 calories per day. Good
+                     job!
                   </CardDescription>
                </CardHeader>
                <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
@@ -718,8 +746,8 @@ export default function Charts() {
                   <ChartContainer
                      config={{
                         calories: {
-                           label: 'Calories',
-                           color: 'hsl(var(--chart-1))',
+                           label: "Calories",
+                           color: "hsl(var(--chart-1))",
                         },
                      }}
                      className="ml-auto w-[64px]"
@@ -734,31 +762,31 @@ export default function Charts() {
                         }}
                         data={[
                            {
-                              date: '2024-01-01',
+                              date: "2024-01-01",
                               calories: 354,
                            },
                            {
-                              date: '2024-01-02',
+                              date: "2024-01-02",
                               calories: 514,
                            },
                            {
-                              date: '2024-01-03',
+                              date: "2024-01-03",
                               calories: 345,
                            },
                            {
-                              date: '2024-01-04',
+                              date: "2024-01-04",
                               calories: 734,
                            },
                            {
-                              date: '2024-01-05',
+                              date: "2024-01-05",
                               calories: 645,
                            },
                            {
-                              date: '2024-01-06',
+                              date: "2024-01-06",
                               calories: 456,
                            },
                            {
-                              date: '2024-01-07',
+                              date: "2024-01-07",
                               calories: 345,
                            },
                         ]}
@@ -782,9 +810,7 @@ export default function Charts() {
                   </ChartContainer>
                </CardContent>
             </Card>
-            <Card
-               className="max-w-xs" x-chunk="charts-01-chunk-7"
-            >
+            <Card className="max-w-xs" x-chunk="charts-01-chunk-7">
                <CardHeader className="space-y-0 pb-0">
                   <CardDescription>Time in Bed</CardDescription>
                   <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
@@ -802,8 +828,8 @@ export default function Charts() {
                   <ChartContainer
                      config={{
                         time: {
-                           label: 'Time',
-                           color: 'hsl(var(--chart-2))',
+                           label: "Time",
+                           color: "hsl(var(--chart-2))",
                         },
                      }}
                   >
@@ -811,31 +837,31 @@ export default function Charts() {
                         accessibilityLayer
                         data={[
                            {
-                              date: '2024-01-01',
+                              date: "2024-01-01",
                               time: 8.5,
                            },
                            {
-                              date: '2024-01-02',
+                              date: "2024-01-02",
                               time: 7.2,
                            },
                            {
-                              date: '2024-01-03',
+                              date: "2024-01-03",
                               time: 8.1,
                            },
                            {
-                              date: '2024-01-04',
+                              date: "2024-01-04",
                               time: 6.2,
                            },
                            {
-                              date: '2024-01-05',
+                              date: "2024-01-05",
                               time: 5.2,
                            },
                            {
-                              date: '2024-01-06',
+                              date: "2024-01-06",
                               time: 8.1,
                            },
                            {
-                              date: '2024-01-07',
+                              date: "2024-01-07",
                               time: 7.0,
                            },
                         ]}
@@ -847,9 +873,15 @@ export default function Charts() {
                         }}
                      >
                         <XAxis dataKey="date" hide />
-                        <YAxis domain={['dataMin - 5', 'dataMax + 2']} hide />
+                        <YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
                         <defs>
-                           <linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
+                           <linearGradient
+                              id="fillTime"
+                              x1="0"
+                              y1="0"
+                              x2="0"
+                              y2="1"
+                           >
                               <stop
                                  offset="5%"
                                  stopColor="var(--color-time)"
@@ -872,7 +904,7 @@ export default function Charts() {
                         <ChartTooltip
                            cursor={false}
                            content={<ChartTooltipContent hideLabel />}
-                           formatter={value => (
+                           formatter={(value) => (
                               <div className="text-muted-foreground flex min-w-[120px] items-center text-xs">
                                  Time in bed
                                  <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
diff --git a/apps/web/__registry__/default/block/dashboard-01.tsx b/apps/web/__registry__/default/block/dashboard-01.tsx
index 32faac1e..fcd0e805 100644
--- a/apps/web/__registry__/default/block/dashboard-01.tsx
+++ b/apps/web/__registry__/default/block/dashboard-01.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link"
 import {
    Activity,
    ArrowUpRight,
@@ -9,22 +9,22 @@ import {
    Package2,
    Search,
    Users,
-} from 'lucide-react'
+} from "lucide-react"
 
 import {
    Avatar,
    AvatarFallback,
    AvatarImage,
-} from '~/registry/default/ui/avatar'
-import { Badge } from '~/registry/default/ui/badge'
-import { Button } from '~/registry/default/ui/button'
+} from "~/registry/default/ui/avatar"
+import { Badge } from "~/registry/default/ui/badge"
+import { Button } from "~/registry/default/ui/button"
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
+} from "~/registry/default/ui/card"
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -32,9 +32,9 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/default/ui/sheet'
+} from "~/registry/default/ui/dropdown-menu"
+import { Input } from "~/registry/default/ui/input"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/default/ui/sheet"
 import {
    Table,
    TableBody,
@@ -42,14 +42,14 @@ import {
    TableHead,
    TableHeader,
    TableRow,
-} from '~/registry/default/ui/table'
+} from "~/registry/default/ui/table"
 
-export const description
-  = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image.'
+export const description =
+   "An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image."
 
-export const iframeHeight = '825px'
+export const iframeHeight = "825px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -157,7 +157,11 @@ export default function Dashboard() {
                </form>
                <DropdownMenu>
                   <DropdownMenuTrigger asChild>
-                     <Button variant="secondary" size="icon" className="rounded-full">
+                     <Button
+                        variant="secondary"
+                        size="icon"
+                        className="rounded-full"
+                     >
                         <CircleUser className="size-5" />
                         <span className="sr-only">Toggle user menu</span>
                      </Button>
@@ -205,7 +209,9 @@ export default function Dashboard() {
                </Card>
                <Card x-chunk="dashboard-01-chunk-2">
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                     <CardTitle className="text-sm font-medium">Sales</CardTitle>
+                     <CardTitle className="text-sm font-medium">
+                        Sales
+                     </CardTitle>
                      <CreditCard className="text-muted-foreground size-4" />
                   </CardHeader>
                   <CardContent>
@@ -217,7 +223,9 @@ export default function Dashboard() {
                </Card>
                <Card x-chunk="dashboard-01-chunk-3">
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                     <CardTitle className="text-sm font-medium">Active Now</CardTitle>
+                     <CardTitle className="text-sm font-medium">
+                        Active Now
+                     </CardTitle>
                      <Activity className="text-muted-foreground size-4" />
                   </CardHeader>
                   <CardContent>
@@ -229,9 +237,7 @@ export default function Dashboard() {
                </Card>
             </div>
             <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-               <Card
-                  className="xl:col-span-2" x-chunk="dashboard-01-chunk-4"
-               >
+               <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
                   <CardHeader className="flex flex-row items-center">
                      <div className="grid gap-2">
                         <CardTitle>Transactions</CardTitle>
@@ -260,7 +266,9 @@ export default function Dashboard() {
                               <TableHead className="hidden xl:table-column">
                                  Date
                               </TableHead>
-                              <TableHead className="text-right">Amount</TableHead>
+                              <TableHead className="text-right">
+                                 Amount
+                              </TableHead>
                            </TableRow>
                         </TableHeader>
                         <TableBody>
@@ -282,7 +290,9 @@ export default function Dashboard() {
                               <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
                                  2023-06-23
                               </TableCell>
-                              <TableCell className="text-right">$250.00</TableCell>
+                              <TableCell className="text-right">
+                                 $250.00
+                              </TableCell>
                            </TableRow>
                            <TableRow>
                               <TableCell>
@@ -302,11 +312,15 @@ export default function Dashboard() {
                               <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
                                  2023-06-24
                               </TableCell>
-                              <TableCell className="text-right">$150.00</TableCell>
+                              <TableCell className="text-right">
+                                 $150.00
+                              </TableCell>
                            </TableRow>
                            <TableRow>
                               <TableCell>
-                                 <div className="font-medium">Noah Williams</div>
+                                 <div className="font-medium">
+                                    Noah Williams
+                                 </div>
                                  <div className="text-muted-foreground hidden text-sm md:inline">
                                     noah@example.com
                                  </div>
@@ -322,7 +336,9 @@ export default function Dashboard() {
                               <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
                                  2023-06-25
                               </TableCell>
-                              <TableCell className="text-right">$350.00</TableCell>
+                              <TableCell className="text-right">
+                                 $350.00
+                              </TableCell>
                            </TableRow>
                            <TableRow>
                               <TableCell>
@@ -342,7 +358,9 @@ export default function Dashboard() {
                               <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
                                  2023-06-26
                               </TableCell>
-                              <TableCell className="text-right">$450.00</TableCell>
+                              <TableCell className="text-right">
+                                 $450.00
+                              </TableCell>
                            </TableRow>
                            <TableRow>
                               <TableCell>
@@ -362,7 +380,9 @@ export default function Dashboard() {
                               <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
                                  2023-06-27
                               </TableCell>
-                              <TableCell className="text-right">$550.00</TableCell>
+                              <TableCell className="text-right">
+                                 $550.00
+                              </TableCell>
                            </TableRow>
                         </TableBody>
                      </Table>
diff --git a/apps/web/__registry__/default/block/dashboard-02.tsx b/apps/web/__registry__/default/block/dashboard-02.tsx
index 3f23a6ff..5400ce1d 100644
--- a/apps/web/__registry__/default/block/dashboard-02.tsx
+++ b/apps/web/__registry__/default/block/dashboard-02.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link"
 import {
    Bell,
    CircleUser,
@@ -10,17 +10,17 @@ import {
    Search,
    ShoppingCart,
    Users,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Badge } from '~/registry/default/ui/badge'
-import { Button } from '~/registry/default/ui/button'
+import { Badge } from "~/registry/default/ui/badge"
+import { Button } from "~/registry/default/ui/button"
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
+} from "~/registry/default/ui/card"
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -28,16 +28,16 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/default/ui/sheet'
+} from "~/registry/default/ui/dropdown-menu"
+import { Input } from "~/registry/default/ui/input"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/default/ui/sheet"
 
-export const description
-  = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'
+export const description =
+   "A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action."
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -45,11 +45,18 @@ export default function Dashboard() {
          <div className="bg-muted/40 hidden border-r md:block">
             <div className="flex h-full max-h-screen flex-col gap-2">
                <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
-                  <Link href="/" className="flex items-center gap-2 font-semibold">
+                  <Link
+                     href="/"
+                     className="flex items-center gap-2 font-semibold"
+                  >
                      <Package2 className="size-6" />
                      <span className="">Acme Inc</span>
                   </Link>
-                  <Button variant="outline" size="icon" className="ml-auto size-8">
+                  <Button
+                     variant="outline"
+                     size="icon"
+                     className="ml-auto size-8"
+                  >
                      <Bell className="size-4" />
                      <span className="sr-only">Toggle notifications</span>
                   </Button>
@@ -78,8 +85,7 @@ export default function Dashboard() {
                         className="bg-muted text-primary hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
                      >
                         <Package className="size-4" />
-                        Products
-                        {' '}
+                        Products{" "}
                      </Link>
                      <Link
                         href="#"
@@ -102,8 +108,8 @@ export default function Dashboard() {
                      <CardHeader className="p-2 pt-0 md:p-4">
                         <CardTitle>Upgrade to Pro</CardTitle>
                         <CardDescription>
-                           Unlock all features and get unlimited access to our support
-                           team.
+                           Unlock all features and get unlimited access to our
+                           support team.
                         </CardDescription>
                      </CardHeader>
                      <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
@@ -181,8 +187,8 @@ export default function Dashboard() {
                            <CardHeader>
                               <CardTitle>Upgrade to Pro</CardTitle>
                               <CardDescription>
-                                 Unlock all features and get unlimited access to our
-                                 support team.
+                                 Unlock all features and get unlimited access to
+                                 our support team.
                               </CardDescription>
                            </CardHeader>
                            <CardContent>
@@ -208,7 +214,11 @@ export default function Dashboard() {
                </div>
                <DropdownMenu>
                   <DropdownMenuTrigger asChild>
-                     <Button variant="secondary" size="icon" className="rounded-full">
+                     <Button
+                        variant="secondary"
+                        size="icon"
+                        className="rounded-full"
+                     >
                         <CircleUser className="size-5" />
                         <span className="sr-only">Toggle user menu</span>
                      </Button>
@@ -225,10 +235,13 @@ export default function Dashboard() {
             </header>
             <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
                <div className="flex items-center">
-                  <h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
+                  <h1 className="text-lg font-semibold md:text-2xl">
+                     Inventory
+                  </h1>
                </div>
                <div
-                  className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm" x-chunk="dashboard-02-chunk-1"
+                  className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
+                  x-chunk="dashboard-02-chunk-1"
                >
                   <div className="flex flex-col items-center gap-1 text-center">
                      <h3 className="text-2xl font-bold tracking-tight">
diff --git a/apps/web/__registry__/default/block/dashboard-03.tsx b/apps/web/__registry__/default/block/dashboard-03.tsx
index b3da52a7..56f4f7a1 100644
--- a/apps/web/__registry__/default/block/dashboard-03.tsx
+++ b/apps/web/__registry__/default/block/dashboard-03.tsx
@@ -15,10 +15,10 @@ import {
    SquareUser,
    Triangle,
    Turtle,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Badge } from '~/registry/default/ui/badge'
-import { Button } from '~/registry/default/ui/button'
+import { Badge } from "~/registry/default/ui/badge"
+import { Button } from "~/registry/default/ui/button"
 import {
    Drawer,
    DrawerContent,
@@ -26,29 +26,29 @@ import {
    DrawerHeader,
    DrawerTitle,
    DrawerTrigger,
-} from '~/registry/default/ui/drawer'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
+} from "~/registry/default/ui/drawer"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/default/ui/select'
-import { Textarea } from '~/registry/default/ui/textarea'
+} from "~/registry/default/ui/select"
+import { Textarea } from "~/registry/default/ui/textarea"
 import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
+} from "~/registry/default/ui/tooltip"
 
-export const description
-  = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'
+export const description =
+   "An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages."
 
-export const iframeHeight = '740px'
+export const iframeHeight = "740px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -206,14 +206,17 @@ export default function Dashboard() {
                                           <Rabbit className="size-5" />
                                           <div className="grid gap-0.5">
                                              <p>
-                                                Neural
-                                                {' '}
+                                                Neural{" "}
                                                 <span className="text-foreground font-medium">
                                                    Genesis
                                                 </span>
                                              </p>
-                                             <p className="text-xs" data-description>
-                                                Our fastest model for general use cases.
+                                             <p
+                                                className="text-xs"
+                                                data-description
+                                             >
+                                                Our fastest model for general
+                                                use cases.
                                              </p>
                                           </div>
                                        </div>
@@ -223,14 +226,17 @@ export default function Dashboard() {
                                           <Bird className="size-5" />
                                           <div className="grid gap-0.5">
                                              <p>
-                                                Neural
-                                                {' '}
+                                                Neural{" "}
                                                 <span className="text-foreground font-medium">
                                                    Explorer
                                                 </span>
                                              </p>
-                                             <p className="text-xs" data-description>
-                                                Performance and speed for efficiency.
+                                             <p
+                                                className="text-xs"
+                                                data-description
+                                             >
+                                                Performance and speed for
+                                                efficiency.
                                              </p>
                                           </div>
                                        </div>
@@ -240,15 +246,17 @@ export default function Dashboard() {
                                           <Turtle className="size-5" />
                                           <div className="grid gap-0.5">
                                              <p>
-                                                Neural
-                                                {' '}
+                                                Neural{" "}
                                                 <span className="text-foreground font-medium">
                                                    Quantum
                                                 </span>
                                              </p>
-                                             <p className="text-xs" data-description>
-                                                The most powerful model for complex
-                                                computations.
+                                             <p
+                                                className="text-xs"
+                                                data-description
+                                             >
+                                                The most powerful model for
+                                                complex computations.
                                              </p>
                                           </div>
                                        </div>
@@ -258,15 +266,27 @@ export default function Dashboard() {
                            </div>
                            <div className="grid gap-3">
                               <Label htmlFor="temperature">Temperature</Label>
-                              <Input id="temperature" type="number" placeholder="0.4" />
+                              <Input
+                                 id="temperature"
+                                 type="number"
+                                 placeholder="0.4"
+                              />
                            </div>
                            <div className="grid gap-3">
                               <Label htmlFor="top-p">Top P</Label>
-                              <Input id="top-p" type="number" placeholder="0.7" />
+                              <Input
+                                 id="top-p"
+                                 type="number"
+                                 placeholder="0.7"
+                              />
                            </div>
                            <div className="grid gap-3">
                               <Label htmlFor="top-k">Top K</Label>
-                              <Input id="top-k" type="number" placeholder="0.0" />
+                              <Input
+                                 id="top-k"
+                                 type="number"
+                                 placeholder="0.0"
+                              />
                            </div>
                         </fieldset>
                         <fieldset className="grid gap-6 rounded-lg border p-4">
@@ -280,15 +300,22 @@ export default function Dashboard() {
                                     <SelectValue placeholder="Select a role" />
                                  </SelectTrigger>
                                  <SelectContent>
-                                    <SelectItem value="system">System</SelectItem>
+                                    <SelectItem value="system">
+                                       System
+                                    </SelectItem>
                                     <SelectItem value="user">User</SelectItem>
-                                    <SelectItem value="assistant">Assistant</SelectItem>
+                                    <SelectItem value="assistant">
+                                       Assistant
+                                    </SelectItem>
                                  </SelectContent>
                               </Select>
                            </div>
                            <div className="grid gap-3">
                               <Label htmlFor="content">Content</Label>
-                              <Textarea id="content" placeholder="You are a..." />
+                              <Textarea
+                                 id="content"
+                                 placeholder="You are a..."
+                              />
                            </div>
                         </fieldset>
                      </form>
@@ -305,7 +332,8 @@ export default function Dashboard() {
             </header>
             <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
                <div
-                  className="relative hidden flex-col items-start gap-8 md:flex" x-chunk="dashboard-03-chunk-0"
+                  className="relative hidden flex-col items-start gap-8 md:flex"
+                  x-chunk="dashboard-03-chunk-0"
                >
                   <form className="grid w-full items-start gap-6">
                      <fieldset className="grid gap-6 rounded-lg border p-4">
@@ -327,14 +355,17 @@ export default function Dashboard() {
                                        <Rabbit className="size-5" />
                                        <div className="grid gap-0.5">
                                           <p>
-                                             Neural
-                                             {' '}
+                                             Neural{" "}
                                              <span className="text-foreground font-medium">
                                                 Genesis
                                              </span>
                                           </p>
-                                          <p className="text-xs" data-description>
-                                             Our fastest model for general use cases.
+                                          <p
+                                             className="text-xs"
+                                             data-description
+                                          >
+                                             Our fastest model for general use
+                                             cases.
                                           </p>
                                        </div>
                                     </div>
@@ -344,14 +375,17 @@ export default function Dashboard() {
                                        <Bird className="size-5" />
                                        <div className="grid gap-0.5">
                                           <p>
-                                             Neural
-                                             {' '}
+                                             Neural{" "}
                                              <span className="text-foreground font-medium">
                                                 Explorer
                                              </span>
                                           </p>
-                                          <p className="text-xs" data-description>
-                                             Performance and speed for efficiency.
+                                          <p
+                                             className="text-xs"
+                                             data-description
+                                          >
+                                             Performance and speed for
+                                             efficiency.
                                           </p>
                                        </div>
                                     </div>
@@ -361,14 +395,17 @@ export default function Dashboard() {
                                        <Turtle className="size-5" />
                                        <div className="grid gap-0.5">
                                           <p>
-                                             Neural
-                                             {' '}
+                                             Neural{" "}
                                              <span className="text-foreground font-medium">
                                                 Quantum
                                              </span>
                                           </p>
-                                          <p className="text-xs" data-description>
-                                             The most powerful model for complex computations.
+                                          <p
+                                             className="text-xs"
+                                             data-description
+                                          >
+                                             The most powerful model for complex
+                                             computations.
                                           </p>
                                        </div>
                                     </div>
@@ -378,16 +415,28 @@ export default function Dashboard() {
                         </div>
                         <div className="grid gap-3">
                            <Label htmlFor="temperature">Temperature</Label>
-                           <Input id="temperature" type="number" placeholder="0.4" />
+                           <Input
+                              id="temperature"
+                              type="number"
+                              placeholder="0.4"
+                           />
                         </div>
                         <div className="grid grid-cols-2 gap-4">
                            <div className="grid gap-3">
                               <Label htmlFor="top-p">Top P</Label>
-                              <Input id="top-p" type="number" placeholder="0.7" />
+                              <Input
+                                 id="top-p"
+                                 type="number"
+                                 placeholder="0.7"
+                              />
                            </div>
                            <div className="grid gap-3">
                               <Label htmlFor="top-k">Top K</Label>
-                              <Input id="top-k" type="number" placeholder="0.0" />
+                              <Input
+                                 id="top-k"
+                                 type="number"
+                                 placeholder="0.0"
+                              />
                            </div>
                         </div>
                      </fieldset>
@@ -404,7 +453,9 @@ export default function Dashboard() {
                               <SelectContent>
                                  <SelectItem value="system">System</SelectItem>
                                  <SelectItem value="user">User</SelectItem>
-                                 <SelectItem value="assistant">Assistant</SelectItem>
+                                 <SelectItem value="assistant">
+                                    Assistant
+                                 </SelectItem>
                               </SelectContent>
                            </Select>
                         </div>
@@ -425,7 +476,8 @@ export default function Dashboard() {
                   </Badge>
                   <div className="flex-1" />
                   <form
-                     className="bg-background focus-within:ring-ring relative overflow-hidden rounded-lg border focus-within:ring-1" x-chunk="dashboard-03-chunk-1"
+                     className="bg-background focus-within:ring-ring relative overflow-hidden rounded-lg border focus-within:ring-1"
+                     x-chunk="dashboard-03-chunk-1"
                   >
                      <Label htmlFor="message" className="sr-only">
                         Message
@@ -443,7 +495,9 @@ export default function Dashboard() {
                                  <span className="sr-only">Attach file</span>
                               </Button>
                            </TooltipTrigger>
-                           <TooltipContent side="top">Attach File</TooltipContent>
+                           <TooltipContent side="top">
+                              Attach File
+                           </TooltipContent>
                         </Tooltip>
                         <Tooltip>
                            <TooltipTrigger asChild>
@@ -452,9 +506,15 @@ export default function Dashboard() {
                                  <span className="sr-only">Use Microphone</span>
                               </Button>
                            </TooltipTrigger>
-                           <TooltipContent side="top">Use Microphone</TooltipContent>
+                           <TooltipContent side="top">
+                              Use Microphone
+                           </TooltipContent>
                         </Tooltip>
-                        <Button type="submit" size="sm" className="ml-auto gap-1.5">
+                        <Button
+                           type="submit"
+                           size="sm"
+                           className="ml-auto gap-1.5"
+                        >
                            Send Message
                            <CornerDownLeft className="size-3.5" />
                         </Button>
diff --git a/apps/web/__registry__/default/block/dashboard-04.tsx b/apps/web/__registry__/default/block/dashboard-04.tsx
index e9e5d683..b874b008 100644
--- a/apps/web/__registry__/default/block/dashboard-04.tsx
+++ b/apps/web/__registry__/default/block/dashboard-04.tsx
@@ -1,7 +1,7 @@
-import Link from 'next/link'
-import { CircleUser, Menu, Package2, Search } from 'lucide-react'
+import Link from "next/link"
+import { CircleUser, Menu, Package2, Search } from "lucide-react"
 
-import { Button } from '~/registry/default/ui/button'
+import { Button } from "~/registry/default/ui/button"
 import {
    Card,
    CardContent,
@@ -9,8 +9,8 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
-import { Checkbox } from '~/registry/default/ui/checkbox'
+} from "~/registry/default/ui/card"
+import { Checkbox } from "~/registry/default/ui/checkbox"
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -18,16 +18,16 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/default/ui/sheet'
+} from "~/registry/default/ui/dropdown-menu"
+import { Input } from "~/registry/default/ui/input"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/default/ui/sheet"
 
-export const description
-  = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'
+export const description =
+   "A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings."
 
-export const iframeHeight = '780px'
+export const iframeHeight = "780px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -135,7 +135,11 @@ export default function Dashboard() {
                </form>
                <DropdownMenu>
                   <DropdownMenuTrigger asChild>
-                     <Button variant="secondary" size="icon" className="rounded-full">
+                     <Button
+                        variant="secondary"
+                        size="icon"
+                        className="rounded-full"
+                     >
                         <CircleUser className="size-5" />
                         <span className="sr-only">Toggle user menu</span>
                      </Button>
@@ -157,7 +161,8 @@ export default function Dashboard() {
             </div>
             <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
                <nav
-                  className="text-muted-foreground grid gap-4 text-sm" x-chunk="dashboard-04-chunk-0"
+                  className="text-muted-foreground grid gap-4 text-sm"
+                  x-chunk="dashboard-04-chunk-0"
                >
                   <Link href="#" className="text-primary font-semibold">
                      General
@@ -189,8 +194,8 @@ export default function Dashboard() {
                      <CardHeader>
                         <CardTitle>Plugins Directory</CardTitle>
                         <CardDescription>
-                           The directory within your project, in which your plugins are
-                           located.
+                           The directory within your project, in which your
+                           plugins are located.
                         </CardDescription>
                      </CardHeader>
                      <CardContent>
diff --git a/apps/web/__registry__/default/block/dashboard-05.tsx b/apps/web/__registry__/default/block/dashboard-05.tsx
index 43129993..73d570e5 100644
--- a/apps/web/__registry__/default/block/dashboard-05.tsx
+++ b/apps/web/__registry__/default/block/dashboard-05.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import Link from 'next/link'
+import Image from "next/image"
+import Link from "next/link"
 import {
    ChevronLeft,
    ChevronRight,
@@ -18,9 +18,9 @@ import {
    ShoppingCart,
    Truck,
    Users2,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Badge } from '~/registry/default/ui/badge'
+import { Badge } from "~/registry/default/ui/badge"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -28,8 +28,8 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Button } from '~/registry/default/ui/button'
+} from "~/registry/default/ui/breadcrumb"
+import { Button } from "~/registry/default/ui/button"
 import {
    Card,
    CardContent,
@@ -37,7 +37,7 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
+} from "~/registry/default/ui/card"
 import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
@@ -46,16 +46,16 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
+} from "~/registry/default/ui/dropdown-menu"
+import { Input } from "~/registry/default/ui/input"
 import {
    Pagination,
    PaginationContent,
    PaginationItem,
-} from '~/registry/default/ui/pagination'
-import { Progress } from '~/registry/default/ui/progress'
-import { Separator } from '~/registry/default/ui/separator'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/default/ui/sheet'
+} from "~/registry/default/ui/pagination"
+import { Progress } from "~/registry/default/ui/progress"
+import { Separator } from "~/registry/default/ui/separator"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/default/ui/sheet"
 import {
    Table,
    TableBody,
@@ -63,25 +63,25 @@ import {
    TableHead,
    TableHeader,
    TableRow,
-} from '~/registry/default/ui/table'
+} from "~/registry/default/ui/table"
 import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
-} from '~/registry/default/ui/tabs'
+} from "~/registry/default/ui/tabs"
 import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
+} from "~/registry/default/ui/tooltip"
 
-export const description
-  = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'
+export const description =
+   "An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information."
 
-export const iframeHeight = '1112px'
+export const iframeHeight = "1112px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -175,7 +175,11 @@ export default function Dashboard() {
             <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
                <Sheet>
                   <SheetTrigger asChild>
-                     <Button size="icon" variant="outline" className="sm:hidden">
+                     <Button
+                        size="icon"
+                        variant="outline"
+                        className="sm:hidden"
+                     >
                         <PanelLeft className="size-5" />
                         <span className="sr-only">Toggle Menu</span>
                      </Button>
@@ -284,13 +288,14 @@ export default function Dashboard() {
                <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
                   <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
                      <Card
-                        className="sm:col-span-2" x-chunk="dashboard-05-chunk-0"
+                        className="sm:col-span-2"
+                        x-chunk="dashboard-05-chunk-0"
                      >
                         <CardHeader className="pb-3">
                            <CardTitle>Your Orders</CardTitle>
                            <CardDescription className="max-w-lg text-balance leading-relaxed">
-                              Introducing Our Dynamic Orders Dashboard for Seamless
-                              Management and Insightful Analysis.
+                              Introducing Our Dynamic Orders Dashboard for
+                              Seamless Management and Insightful Analysis.
                            </CardDescription>
                         </CardHeader>
                         <CardFooter>
@@ -342,11 +347,15 @@ export default function Dashboard() {
                                     className="h-7 gap-1 text-sm"
                                  >
                                     <ListFilter className="size-3.5" />
-                                    <span className="sr-only sm:not-sr-only">Filter</span>
+                                    <span className="sr-only sm:not-sr-only">
+                                       Filter
+                                    </span>
                                  </Button>
                               </DropdownMenuTrigger>
                               <DropdownMenuContent align="end">
-                                 <DropdownMenuLabel>Filter by</DropdownMenuLabel>
+                                 <DropdownMenuLabel>
+                                    Filter by
+                                 </DropdownMenuLabel>
                                  <DropdownMenuSeparator />
                                  <DropdownMenuCheckboxItem checked>
                                     Fulfilled
@@ -365,7 +374,9 @@ export default function Dashboard() {
                               className="h-7 gap-1 text-sm"
                            >
                               <File className="size-3.5" />
-                              <span className="sr-only sm:not-sr-only">Export</span>
+                              <span className="sr-only sm:not-sr-only">
+                                 Export
+                              </span>
                            </Button>
                         </div>
                      </div>
@@ -391,13 +402,17 @@ export default function Dashboard() {
                                        <TableHead className="hidden md:table-cell">
                                           Date
                                        </TableHead>
-                                       <TableHead className="text-right">Amount</TableHead>
+                                       <TableHead className="text-right">
+                                          Amount
+                                       </TableHead>
                                     </TableRow>
                                  </TableHeader>
                                  <TableBody>
                                     <TableRow className="bg-accent">
                                        <TableCell>
-                                          <div className="font-medium">Liam Johnson</div>
+                                          <div className="font-medium">
+                                             Liam Johnson
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              liam@example.com
                                           </div>
@@ -406,18 +421,25 @@ export default function Dashboard() {
                                           Sale
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
                                              Fulfilled
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-23
                                        </TableCell>
-                                       <TableCell className="text-right">$250.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $250.00
+                                       </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Olivia Smith</div>
+                                          <div className="font-medium">
+                                             Olivia Smith
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              olivia@example.com
                                           </div>
@@ -426,18 +448,25 @@ export default function Dashboard() {
                                           Refund
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="outline">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="outline"
+                                          >
                                              Declined
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-24
                                        </TableCell>
-                                       <TableCell className="text-right">$150.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $150.00
+                                       </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Noah Williams</div>
+                                          <div className="font-medium">
+                                             Noah Williams
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              noah@example.com
                                           </div>
@@ -446,18 +475,25 @@ export default function Dashboard() {
                                           Subscription
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
                                              Fulfilled
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-25
                                        </TableCell>
-                                       <TableCell className="text-right">$350.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $350.00
+                                       </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Emma Brown</div>
+                                          <div className="font-medium">
+                                             Emma Brown
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              emma@example.com
                                           </div>
@@ -466,18 +502,25 @@ export default function Dashboard() {
                                           Sale
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
                                              Fulfilled
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-26
                                        </TableCell>
-                                       <TableCell className="text-right">$450.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $450.00
+                                       </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Liam Johnson</div>
+                                          <div className="font-medium">
+                                             Liam Johnson
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              liam@example.com
                                           </div>
@@ -486,18 +529,25 @@ export default function Dashboard() {
                                           Sale
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
                                              Fulfilled
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-23
                                        </TableCell>
-                                       <TableCell className="text-right">$250.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $250.00
+                                       </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Liam Johnson</div>
+                                          <div className="font-medium">
+                                             Liam Johnson
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              liam@example.com
                                           </div>
@@ -506,18 +556,25 @@ export default function Dashboard() {
                                           Sale
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
                                              Fulfilled
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-23
                                        </TableCell>
-                                       <TableCell className="text-right">$250.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $250.00
+                                       </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Olivia Smith</div>
+                                          <div className="font-medium">
+                                             Olivia Smith
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              olivia@example.com
                                           </div>
@@ -526,18 +583,25 @@ export default function Dashboard() {
                                           Refund
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="outline">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="outline"
+                                          >
                                              Declined
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-24
                                        </TableCell>
-                                       <TableCell className="text-right">$150.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $150.00
+                                       </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Emma Brown</div>
+                                          <div className="font-medium">
+                                             Emma Brown
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              emma@example.com
                                           </div>
@@ -546,14 +610,19 @@ export default function Dashboard() {
                                           Sale
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
                                              Fulfilled
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-26
                                        </TableCell>
-                                       <TableCell className="text-right">$450.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $450.00
+                                       </TableCell>
                                     </TableRow>
                                  </TableBody>
                               </Table>
@@ -564,7 +633,8 @@ export default function Dashboard() {
                </div>
                <div>
                   <Card
-                     className="overflow-hidden" x-chunk="dashboard-05-chunk-4"
+                     className="overflow-hidden"
+                     x-chunk="dashboard-05-chunk-4"
                   >
                      <CardHeader className="bg-muted/50 flex flex-row items-start">
                         <div className="grid gap-0.5">
@@ -579,10 +649,16 @@ export default function Dashboard() {
                                  <span className="sr-only">Copy Order ID</span>
                               </Button>
                            </CardTitle>
-                           <CardDescription>Date: November 23, 2023</CardDescription>
+                           <CardDescription>
+                              Date: November 23, 2023
+                           </CardDescription>
                         </div>
                         <div className="ml-auto flex items-center gap-1">
-                           <Button size="sm" variant="outline" className="h-8 gap-1">
+                           <Button
+                              size="sm"
+                              variant="outline"
+                              className="h-8 gap-1"
+                           >
                               <Truck className="size-3.5" />
                               <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
                                  Track Order
@@ -590,7 +666,11 @@ export default function Dashboard() {
                            </Button>
                            <DropdownMenu>
                               <DropdownMenuTrigger asChild>
-                                 <Button size="icon" variant="outline" className="size-8">
+                                 <Button
+                                    size="icon"
+                                    variant="outline"
+                                    className="size-8"
+                                 >
                                     <MoreVertical className="size-3.5" />
                                     <span className="sr-only">More</span>
                                  </Button>
@@ -610,17 +690,13 @@ export default function Dashboard() {
                            <ul className="grid gap-3">
                               <li className="flex items-center justify-between">
                                  <span className="text-muted-foreground">
-                                    Glimmer Lamps x
-                                    {' '}
-                                    <span>2</span>
+                                    Glimmer Lamps x <span>2</span>
                                  </span>
                                  <span>$250.00</span>
                               </li>
                               <li className="flex items-center justify-between">
                                  <span className="text-muted-foreground">
-                                    Aqua Filters x
-                                    {' '}
-                                    <span>1</span>
+                                    Aqua Filters x <span>1</span>
                                  </span>
                                  <span>$49.00</span>
                               </li>
@@ -628,19 +704,27 @@ export default function Dashboard() {
                            <Separator className="my-2" />
                            <ul className="grid gap-3">
                               <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">Subtotal</span>
+                                 <span className="text-muted-foreground">
+                                    Subtotal
+                                 </span>
                                  <span>$299.00</span>
                               </li>
                               <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">Shipping</span>
+                                 <span className="text-muted-foreground">
+                                    Shipping
+                                 </span>
                                  <span>$5.00</span>
                               </li>
                               <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">Tax</span>
+                                 <span className="text-muted-foreground">
+                                    Tax
+                                 </span>
                                  <span>$25.00</span>
                               </li>
                               <li className="flex items-center justify-between font-semibold">
-                                 <span className="text-muted-foreground">Total</span>
+                                 <span className="text-muted-foreground">
+                                    Total
+                                 </span>
                                  <span>$329.00</span>
                               </li>
                            </ul>
@@ -648,7 +732,9 @@ export default function Dashboard() {
                         <Separator className="my-4" />
                         <div className="grid grid-cols-2 gap-4">
                            <div className="grid gap-3">
-                              <div className="font-semibold">Shipping Information</div>
+                              <div className="font-semibold">
+                                 Shipping Information
+                              </div>
                               <address className="text-muted-foreground grid gap-0.5 not-italic">
                                  <span>Liam Johnson</span>
                                  <span>1234 Main St.</span>
@@ -656,7 +742,9 @@ export default function Dashboard() {
                               </address>
                            </div>
                            <div className="grid auto-rows-max gap-3">
-                              <div className="font-semibold">Billing Information</div>
+                              <div className="font-semibold">
+                                 Billing Information
+                              </div>
                               <div className="text-muted-foreground">
                                  Same as shipping address
                               </div>
@@ -664,20 +752,28 @@ export default function Dashboard() {
                         </div>
                         <Separator className="my-4" />
                         <div className="grid gap-3">
-                           <div className="font-semibold">Customer Information</div>
+                           <div className="font-semibold">
+                              Customer Information
+                           </div>
                            <dl className="grid gap-3">
                               <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground">Customer</dt>
+                                 <dt className="text-muted-foreground">
+                                    Customer
+                                 </dt>
                                  <dd>Liam Johnson</dd>
                               </div>
                               <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground">Email</dt>
+                                 <dt className="text-muted-foreground">
+                                    Email
+                                 </dt>
                                  <dd>
                                     <a href="mailto:">liam@acme.com</a>
                                  </dd>
                               </div>
                               <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground">Phone</dt>
+                                 <dt className="text-muted-foreground">
+                                    Phone
+                                 </dt>
                                  <dd>
                                     <a href="tel:">+1 234 567 890</a>
                                  </dd>
@@ -686,7 +782,9 @@ export default function Dashboard() {
                         </div>
                         <Separator className="my-4" />
                         <div className="grid gap-3">
-                           <div className="font-semibold">Payment Information</div>
+                           <div className="font-semibold">
+                              Payment Information
+                           </div>
                            <dl className="grid gap-3">
                               <div className="flex items-center justify-between">
                                  <dt className="text-muted-foreground flex items-center gap-1">
@@ -700,20 +798,29 @@ export default function Dashboard() {
                      </CardContent>
                      <CardFooter className="bg-muted/50 flex flex-row items-center border-t px-6 py-3">
                         <div className="text-muted-foreground text-xs">
-                           Updated
-                           {' '}
+                           Updated{" "}
                            <time dateTime="2023-11-23">November 23, 2023</time>
                         </div>
                         <Pagination className="ml-auto mr-0 w-auto">
                            <PaginationContent>
                               <PaginationItem>
-                                 <Button size="icon" variant="outline" className="size-6">
+                                 <Button
+                                    size="icon"
+                                    variant="outline"
+                                    className="size-6"
+                                 >
                                     <ChevronLeft className="size-3.5" />
-                                    <span className="sr-only">Previous Order</span>
+                                    <span className="sr-only">
+                                       Previous Order
+                                    </span>
                                  </Button>
                               </PaginationItem>
                               <PaginationItem>
-                                 <Button size="icon" variant="outline" className="size-6">
+                                 <Button
+                                    size="icon"
+                                    variant="outline"
+                                    className="size-6"
+                                 >
                                     <ChevronRight className="size-3.5" />
                                     <span className="sr-only">Next Order</span>
                                  </Button>
diff --git a/apps/web/__registry__/default/block/dashboard-06.tsx b/apps/web/__registry__/default/block/dashboard-06.tsx
index 2c8a0ae6..2d083014 100644
--- a/apps/web/__registry__/default/block/dashboard-06.tsx
+++ b/apps/web/__registry__/default/block/dashboard-06.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import Link from 'next/link'
+import Image from "next/image"
+import Link from "next/link"
 import {
    File,
    Home,
@@ -14,9 +14,9 @@ import {
    Settings,
    ShoppingCart,
    Users2,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Badge } from '~/registry/default/ui/badge'
+import { Badge } from "~/registry/default/ui/badge"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -24,8 +24,8 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Button } from '~/registry/default/ui/button'
+} from "~/registry/default/ui/breadcrumb"
+import { Button } from "~/registry/default/ui/button"
 import {
    Card,
    CardContent,
@@ -33,7 +33,7 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
+} from "~/registry/default/ui/card"
 import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
@@ -42,9 +42,9 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/default/ui/sheet'
+} from "~/registry/default/ui/dropdown-menu"
+import { Input } from "~/registry/default/ui/input"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/default/ui/sheet"
 import {
    Table,
    TableBody,
@@ -52,25 +52,25 @@ import {
    TableHead,
    TableHeader,
    TableRow,
-} from '~/registry/default/ui/table'
+} from "~/registry/default/ui/table"
 import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
-} from '~/registry/default/ui/tabs'
+} from "~/registry/default/ui/tabs"
 import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
+} from "~/registry/default/ui/tooltip"
 
-export const description
-  = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'
+export const description =
+   "An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions."
 
-export const iframeHeight = '938px'
+export const iframeHeight = "938px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -164,7 +164,11 @@ export default function Dashboard() {
             <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
                <Sheet>
                   <SheetTrigger asChild>
-                     <Button size="icon" variant="outline" className="sm:hidden">
+                     <Button
+                        size="icon"
+                        variant="outline"
+                        className="sm:hidden"
+                     >
                         <PanelLeft className="size-5" />
                         <span className="sr-only">Toggle Menu</span>
                      </Button>
@@ -276,14 +280,21 @@ export default function Dashboard() {
                         <TabsTrigger value="all">All</TabsTrigger>
                         <TabsTrigger value="active">Active</TabsTrigger>
                         <TabsTrigger value="draft">Draft</TabsTrigger>
-                        <TabsTrigger value="archived" className="hidden sm:flex">
+                        <TabsTrigger
+                           value="archived"
+                           className="hidden sm:flex"
+                        >
                            Archived
                         </TabsTrigger>
                      </TabsList>
                      <div className="ml-auto flex items-center gap-2">
                         <DropdownMenu>
                            <DropdownMenuTrigger asChild>
-                              <Button variant="outline" size="sm" className="h-8 gap-1">
+                              <Button
+                                 variant="outline"
+                                 size="sm"
+                                 className="h-8 gap-1"
+                              >
                                  <ListFilter className="size-3.5" />
                                  <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
                                     Filter
@@ -296,13 +307,19 @@ export default function Dashboard() {
                               <DropdownMenuCheckboxItem checked>
                                  Active
                               </DropdownMenuCheckboxItem>
-                              <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>
+                              <DropdownMenuCheckboxItem>
+                                 Draft
+                              </DropdownMenuCheckboxItem>
                               <DropdownMenuCheckboxItem>
                                  Archived
                               </DropdownMenuCheckboxItem>
                            </DropdownMenuContent>
                         </DropdownMenu>
-                        <Button size="sm" variant="outline" className="h-8 gap-1">
+                        <Button
+                           size="sm"
+                           variant="outline"
+                           className="h-8 gap-1"
+                        >
                            <File className="size-3.5" />
                            <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
                               Export
@@ -321,7 +338,8 @@ export default function Dashboard() {
                         <CardHeader>
                            <CardTitle>Products</CardTitle>
                            <CardDescription>
-                              Manage your products and view their sales performance.
+                              Manage your products and view their sales
+                              performance.
                            </CardDescription>
                         </CardHeader>
                         <CardContent>
@@ -382,13 +400,21 @@ export default function Dashboard() {
                                                 variant="ghost"
                                              >
                                                 <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
                                              </Button>
                                           </DropdownMenuTrigger>
                                           <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
                                           </DropdownMenuContent>
                                        </DropdownMenu>
                                     </TableCell>
@@ -427,13 +453,21 @@ export default function Dashboard() {
                                                 variant="ghost"
                                              >
                                                 <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
                                              </Button>
                                           </DropdownMenuTrigger>
                                           <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
                                           </DropdownMenuContent>
                                        </DropdownMenu>
                                     </TableCell>
@@ -472,13 +506,21 @@ export default function Dashboard() {
                                                 variant="ghost"
                                              >
                                                 <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
                                              </Button>
                                           </DropdownMenuTrigger>
                                           <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
                                           </DropdownMenuContent>
                                        </DropdownMenu>
                                     </TableCell>
@@ -517,13 +559,21 @@ export default function Dashboard() {
                                                 variant="ghost"
                                              >
                                                 <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
                                              </Button>
                                           </DropdownMenuTrigger>
                                           <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
                                           </DropdownMenuContent>
                                        </DropdownMenu>
                                     </TableCell>
@@ -562,13 +612,21 @@ export default function Dashboard() {
                                                 variant="ghost"
                                              >
                                                 <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
                                              </Button>
                                           </DropdownMenuTrigger>
                                           <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
                                           </DropdownMenuContent>
                                        </DropdownMenu>
                                     </TableCell>
@@ -607,13 +665,21 @@ export default function Dashboard() {
                                                 variant="ghost"
                                              >
                                                 <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
                                              </Button>
                                           </DropdownMenuTrigger>
                                           <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
                                           </DropdownMenuContent>
                                        </DropdownMenu>
                                     </TableCell>
@@ -623,14 +689,8 @@ export default function Dashboard() {
                         </CardContent>
                         <CardFooter>
                            <div className="text-muted-foreground text-xs">
-                              Showing
-                              {' '}
-                              <strong>1-10</strong>
-                              {' '}
-                              of
-                              <strong>32</strong>
-                              {' '}
-                              products
+                              Showing <strong>1-10</strong> of
+                              <strong>32</strong> products
                            </div>
                         </CardFooter>
                      </Card>
diff --git a/apps/web/__registry__/default/block/dashboard-07.tsx b/apps/web/__registry__/default/block/dashboard-07.tsx
index ad4b6e3b..a1ad2a3a 100644
--- a/apps/web/__registry__/default/block/dashboard-07.tsx
+++ b/apps/web/__registry__/default/block/dashboard-07.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import Link from 'next/link'
+import Image from "next/image"
+import Link from "next/link"
 import {
    ChevronLeft,
    Home,
@@ -13,9 +13,9 @@ import {
    ShoppingCart,
    Upload,
    Users2,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Badge } from '~/registry/default/ui/badge'
+import { Badge } from "~/registry/default/ui/badge"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -23,8 +23,8 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Button } from '~/registry/default/ui/button'
+} from "~/registry/default/ui/breadcrumb"
+import { Button } from "~/registry/default/ui/button"
 import {
    Card,
    CardContent,
@@ -32,7 +32,7 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/default/ui/card'
+} from "~/registry/default/ui/card"
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -40,17 +40,17 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
+} from "~/registry/default/ui/dropdown-menu"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/default/ui/select'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/default/ui/sheet'
+} from "~/registry/default/ui/select"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/default/ui/sheet"
 import {
    Table,
    TableBody,
@@ -58,24 +58,24 @@ import {
    TableHead,
    TableHeader,
    TableRow,
-} from '~/registry/default/ui/table'
-import { Textarea } from '~/registry/default/ui/textarea'
+} from "~/registry/default/ui/table"
+import { Textarea } from "~/registry/default/ui/textarea"
 import {
    ToggleGroup,
    ToggleGroupItem,
-} from '~/registry/default/ui/toggle-group'
+} from "~/registry/default/ui/toggle-group"
 import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
+} from "~/registry/default/ui/tooltip"
 
-export const description
-  = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'
+export const description =
+   "A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images."
 
-export const iframeHeight = '1200px'
+export const iframeHeight = "1200px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -169,7 +169,11 @@ export default function Dashboard() {
             <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
                <Sheet>
                   <SheetTrigger asChild>
-                     <Button size="icon" variant="outline" className="sm:hidden">
+                     <Button
+                        size="icon"
+                        variant="outline"
+                        className="sm:hidden"
+                     >
                         <PanelLeft className="size-5" />
                         <span className="sr-only">Toggle Menu</span>
                      </Button>
@@ -300,7 +304,8 @@ export default function Dashboard() {
                            <CardHeader>
                               <CardTitle>Product Details</CardTitle>
                               <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit
+                                 Lipsum dolor sit amet, consectetur adipiscing
+                                 elit
                               </CardDescription>
                            </CardHeader>
                            <CardContent>
@@ -315,7 +320,9 @@ export default function Dashboard() {
                                     />
                                  </div>
                                  <div className="grid gap-3">
-                                    <Label htmlFor="description">Description</Label>
+                                    <Label htmlFor="description">
+                                       Description
+                                    </Label>
                                     <Textarea
                                        id="description"
                                        defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
@@ -329,17 +336,22 @@ export default function Dashboard() {
                            <CardHeader>
                               <CardTitle>Stock</CardTitle>
                               <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit
+                                 Lipsum dolor sit amet, consectetur adipiscing
+                                 elit
                               </CardDescription>
                            </CardHeader>
                            <CardContent>
                               <Table>
                                  <TableHeader>
                                     <TableRow>
-                                       <TableHead className="w-[100px]">SKU</TableHead>
+                                       <TableHead className="w-[100px]">
+                                          SKU
+                                       </TableHead>
                                        <TableHead>Stock</TableHead>
                                        <TableHead>Price</TableHead>
-                                       <TableHead className="w-[100px]">Size</TableHead>
+                                       <TableHead className="w-[100px]">
+                                          Size
+                                       </TableHead>
                                     </TableRow>
                                  </TableHeader>
                                  <TableBody>
@@ -348,7 +360,10 @@ export default function Dashboard() {
                                           GGPC-001
                                        </TableCell>
                                        <TableCell>
-                                          <Label htmlFor="stock-1" className="sr-only">
+                                          <Label
+                                             htmlFor="stock-1"
+                                             className="sr-only"
+                                          >
                                              Stock
                                           </Label>
                                           <Input
@@ -358,7 +373,10 @@ export default function Dashboard() {
                                           />
                                        </TableCell>
                                        <TableCell>
-                                          <Label htmlFor="price-1" className="sr-only">
+                                          <Label
+                                             htmlFor="price-1"
+                                             className="sr-only"
+                                          >
                                              Price
                                           </Label>
                                           <Input
@@ -373,9 +391,15 @@ export default function Dashboard() {
                                              defaultValue="s"
                                              variant="outline"
                                           >
-                                             <ToggleGroupItem value="s">S</ToggleGroupItem>
-                                             <ToggleGroupItem value="m">M</ToggleGroupItem>
-                                             <ToggleGroupItem value="l">L</ToggleGroupItem>
+                                             <ToggleGroupItem value="s">
+                                                S
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="m">
+                                                M
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="l">
+                                                L
+                                             </ToggleGroupItem>
                                           </ToggleGroup>
                                        </TableCell>
                                     </TableRow>
@@ -384,7 +408,10 @@ export default function Dashboard() {
                                           GGPC-002
                                        </TableCell>
                                        <TableCell>
-                                          <Label htmlFor="stock-2" className="sr-only">
+                                          <Label
+                                             htmlFor="stock-2"
+                                             className="sr-only"
+                                          >
                                              Stock
                                           </Label>
                                           <Input
@@ -394,7 +421,10 @@ export default function Dashboard() {
                                           />
                                        </TableCell>
                                        <TableCell>
-                                          <Label htmlFor="price-2" className="sr-only">
+                                          <Label
+                                             htmlFor="price-2"
+                                             className="sr-only"
+                                          >
                                              Price
                                           </Label>
                                           <Input
@@ -409,9 +439,15 @@ export default function Dashboard() {
                                              defaultValue="m"
                                              variant="outline"
                                           >
-                                             <ToggleGroupItem value="s">S</ToggleGroupItem>
-                                             <ToggleGroupItem value="m">M</ToggleGroupItem>
-                                             <ToggleGroupItem value="l">L</ToggleGroupItem>
+                                             <ToggleGroupItem value="s">
+                                                S
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="m">
+                                                M
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="l">
+                                                L
+                                             </ToggleGroupItem>
                                           </ToggleGroup>
                                        </TableCell>
                                     </TableRow>
@@ -420,7 +456,10 @@ export default function Dashboard() {
                                           GGPC-003
                                        </TableCell>
                                        <TableCell>
-                                          <Label htmlFor="stock-3" className="sr-only">
+                                          <Label
+                                             htmlFor="stock-3"
+                                             className="sr-only"
+                                          >
                                              Stock
                                           </Label>
                                           <Input
@@ -430,7 +469,10 @@ export default function Dashboard() {
                                           />
                                        </TableCell>
                                        <TableCell>
-                                          <Label htmlFor="price-3" className="sr-only">
+                                          <Label
+                                             htmlFor="price-3"
+                                             className="sr-only"
+                                          >
                                              Stock
                                           </Label>
                                           <Input
@@ -445,9 +487,15 @@ export default function Dashboard() {
                                              defaultValue="s"
                                              variant="outline"
                                           >
-                                             <ToggleGroupItem value="s">S</ToggleGroupItem>
-                                             <ToggleGroupItem value="m">M</ToggleGroupItem>
-                                             <ToggleGroupItem value="l">L</ToggleGroupItem>
+                                             <ToggleGroupItem value="s">
+                                                S
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="m">
+                                                M
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="l">
+                                                L
+                                             </ToggleGroupItem>
                                           </ToggleGroup>
                                        </TableCell>
                                     </TableRow>
@@ -455,7 +503,11 @@ export default function Dashboard() {
                               </Table>
                            </CardContent>
                            <CardFooter className="justify-center border-t p-4">
-                              <Button size="sm" variant="ghost" className="gap-1">
+                              <Button
+                                 size="sm"
+                                 variant="ghost"
+                                 className="gap-1"
+                              >
                                  <PlusCircle className="size-3.5" />
                                  Add Variant
                               </Button>
@@ -477,7 +529,9 @@ export default function Dashboard() {
                                           <SelectValue placeholder="Select category" />
                                        </SelectTrigger>
                                        <SelectContent>
-                                          <SelectItem value="clothing">Clothing</SelectItem>
+                                          <SelectItem value="clothing">
+                                             Clothing
+                                          </SelectItem>
                                           <SelectItem value="electronics">
                                              Electronics
                                           </SelectItem>
@@ -499,8 +553,12 @@ export default function Dashboard() {
                                           <SelectValue placeholder="Select subcategory" />
                                        </SelectTrigger>
                                        <SelectContent>
-                                          <SelectItem value="t-shirts">T-Shirts</SelectItem>
-                                          <SelectItem value="hoodies">Hoodies</SelectItem>
+                                          <SelectItem value="t-shirts">
+                                             T-Shirts
+                                          </SelectItem>
+                                          <SelectItem value="hoodies">
+                                             Hoodies
+                                          </SelectItem>
                                           <SelectItem value="sweatshirts">
                                              Sweatshirts
                                           </SelectItem>
@@ -521,13 +579,22 @@ export default function Dashboard() {
                                  <div className="grid gap-3">
                                     <Label htmlFor="status">Status</Label>
                                     <Select>
-                                       <SelectTrigger id="status" aria-label="Select status">
+                                       <SelectTrigger
+                                          id="status"
+                                          aria-label="Select status"
+                                       >
                                           <SelectValue placeholder="Select status" />
                                        </SelectTrigger>
                                        <SelectContent>
-                                          <SelectItem value="draft">Draft</SelectItem>
-                                          <SelectItem value="published">Active</SelectItem>
-                                          <SelectItem value="archived">Archived</SelectItem>
+                                          <SelectItem value="draft">
+                                             Draft
+                                          </SelectItem>
+                                          <SelectItem value="published">
+                                             Active
+                                          </SelectItem>
+                                          <SelectItem value="archived">
+                                             Archived
+                                          </SelectItem>
                                        </SelectContent>
                                     </Select>
                                  </div>
@@ -535,12 +602,14 @@ export default function Dashboard() {
                            </CardContent>
                         </Card>
                         <Card
-                           className="overflow-hidden" x-chunk="dashboard-07-chunk-4"
+                           className="overflow-hidden"
+                           x-chunk="dashboard-07-chunk-4"
                         >
                            <CardHeader>
                               <CardTitle>Product Images</CardTitle>
                               <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit
+                                 Lipsum dolor sit amet, consectetur adipiscing
+                                 elit
                               </CardDescription>
                            </CardHeader>
                            <CardContent>
@@ -583,7 +652,8 @@ export default function Dashboard() {
                            <CardHeader>
                               <CardTitle>Archive Product</CardTitle>
                               <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit.
+                                 Lipsum dolor sit amet, consectetur adipiscing
+                                 elit.
                               </CardDescription>
                            </CardHeader>
                            <CardContent>
diff --git a/apps/web/__registry__/default/block/demo-sidebar-controlled.tsx b/apps/web/__registry__/default/block/demo-sidebar-controlled.tsx
index 4d788e29..55d88c92 100644
--- a/apps/web/__registry__/default/block/demo-sidebar-controlled.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar-controlled.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 import {
    Frame,
    LifeBuoy,
@@ -9,9 +9,9 @@ import {
    PanelLeftOpen,
    PieChart,
    Send,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Button } from '~/registry/default/ui/button'
+import { Button } from "~/registry/default/ui/button"
 import {
    Sidebar,
    SidebarContent,
@@ -23,32 +23,32 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 const projects = [
    {
-      name: 'Design Engineering',
-      url: '#',
+      name: "Design Engineering",
+      url: "#",
       icon: Frame,
    },
    {
-      name: 'Sales & Marketing',
-      url: '#',
+      name: "Sales & Marketing",
+      url: "#",
       icon: PieChart,
    },
    {
-      name: 'Travel',
-      url: '#',
+      name: "Travel",
+      url: "#",
       icon: Map,
    },
    {
-      name: 'Support',
-      url: '#',
+      name: "Support",
+      url: "#",
       icon: LifeBuoy,
    },
    {
-      name: 'Feedback',
-      url: '#',
+      name: "Feedback",
+      url: "#",
       icon: Send,
    },
 ]
@@ -64,7 +64,7 @@ export default function AppSidebar() {
                   <SidebarGroupLabel>Projects</SidebarGroupLabel>
                   <SidebarGroupContent>
                      <SidebarMenu>
-                        {projects.map(project => (
+                        {projects.map((project) => (
                            <SidebarMenuItem key={project.name}>
                               <SidebarMenuButton asChild>
                                  <a href={project.url}>
@@ -82,16 +82,12 @@ export default function AppSidebar() {
          <SidebarInset>
             <header className="flex h-12 items-center justify-between px-4">
                <Button
-                  onClick={() => setOpen(open => !open)}
+                  onClick={() => setOpen((open) => !open)}
                   size="sm"
                   variant="ghost"
                >
                   {open ? <PanelLeftClose /> : <PanelLeftOpen />}
-                  <span>
-                     {open ? 'Open' : 'Close'}
-                     {' '}
-                     Sidebar
-                  </span>
+                  <span>{open ? "Open" : "Close"} Sidebar</span>
                </Button>
             </header>
          </SidebarInset>
diff --git a/apps/web/__registry__/default/block/demo-sidebar-footer.tsx b/apps/web/__registry__/default/block/demo-sidebar-footer.tsx
index 495de092..ce819a0e 100644
--- a/apps/web/__registry__/default/block/demo-sidebar-footer.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar-footer.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { ChevronDown, ChevronUp, User2 } from 'lucide-react'
+import { ChevronDown, ChevronUp, User2 } from "lucide-react"
 
 import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
+} from "~/registry/default/ui/dropdown-menu"
 import {
    Sidebar,
    SidebarContent,
@@ -19,7 +19,7 @@ import {
    SidebarMenuItem,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 export default function AppSidebar() {
    return (
diff --git a/apps/web/__registry__/default/block/demo-sidebar-group-action.tsx b/apps/web/__registry__/default/block/demo-sidebar-group-action.tsx
index 49a5dd45..182f43ba 100644
--- a/apps/web/__registry__/default/block/demo-sidebar-group-action.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar-group-action.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client"
 
 import {
    ChevronDown,
@@ -8,8 +8,8 @@ import {
    PieChart,
    Plus,
    Send,
-} from 'lucide-react'
-import { Toaster, toast } from 'sonner'
+} from "lucide-react"
+import { Toaster, toast } from "sonner"
 
 import {
    Sidebar,
@@ -22,7 +22,7 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 export default function AppSidebar() {
    return (
@@ -30,7 +30,7 @@ export default function AppSidebar() {
          <Toaster
             position="bottom-left"
             toastOptions={{
-               className: 'ml-[160px]',
+               className: "ml-[160px]",
             }}
          />
          <Sidebar>
@@ -39,11 +39,9 @@ export default function AppSidebar() {
                   <SidebarGroupLabel>Projects</SidebarGroupLabel>
                   <SidebarGroupAction
                      title="Add Project"
-                     onClick={() => toast('You clicked the group action!')}
+                     onClick={() => toast("You clicked the group action!")}
                   >
-                     <Plus />
-                     {' '}
-                     <span className="sr-only">Add Project</span>
+                     <Plus /> <span className="sr-only">Add Project</span>
                   </SidebarGroupAction>
                   <SidebarGroupContent>
                      <SidebarMenu>
diff --git a/apps/web/__registry__/default/block/demo-sidebar-group-collapsible.tsx b/apps/web/__registry__/default/block/demo-sidebar-group-collapsible.tsx
index a092bdb9..efe3d198 100644
--- a/apps/web/__registry__/default/block/demo-sidebar-group-collapsible.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar-group-collapsible.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import { ChevronDown, LifeBuoy, Send } from 'lucide-react'
+import { ChevronDown, LifeBuoy, Send } from "lucide-react"
 
 import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
+} from "~/registry/default/ui/collapsible"
 import {
    Sidebar,
    SidebarContent,
@@ -17,7 +17,7 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 export default function AppSidebar() {
    return (
diff --git a/apps/web/__registry__/default/block/demo-sidebar-group.tsx b/apps/web/__registry__/default/block/demo-sidebar-group.tsx
index a62b7402..e00cfaed 100644
--- a/apps/web/__registry__/default/block/demo-sidebar-group.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar-group.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { LifeBuoy, Send } from 'lucide-react'
+import { LifeBuoy, Send } from "lucide-react"
 
 import {
    Sidebar,
@@ -12,7 +12,7 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 export default function AppSidebar() {
    return (
diff --git a/apps/web/__registry__/default/block/demo-sidebar-header.tsx b/apps/web/__registry__/default/block/demo-sidebar-header.tsx
index 8204209b..038363ad 100644
--- a/apps/web/__registry__/default/block/demo-sidebar-header.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar-header.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { ChevronDown } from 'lucide-react'
+import { ChevronDown } from "lucide-react"
 
 import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
+} from "~/registry/default/ui/dropdown-menu"
 import {
    Sidebar,
    SidebarHeader,
@@ -17,7 +17,7 @@ import {
    SidebarMenuItem,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 export default function AppSidebar() {
    return (
diff --git a/apps/web/__registry__/default/block/demo-sidebar-menu-action.tsx b/apps/web/__registry__/default/block/demo-sidebar-menu-action.tsx
index 0c41cca6..069fd2ae 100644
--- a/apps/web/__registry__/default/block/demo-sidebar-menu-action.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar-menu-action.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client"
 
 import {
    Frame,
@@ -7,14 +7,14 @@ import {
    MoreHorizontal,
    PieChart,
    Send,
-} from 'lucide-react'
+} from "lucide-react"
 
 import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
+} from "~/registry/default/ui/dropdown-menu"
 import {
    Sidebar,
    SidebarContent,
@@ -26,32 +26,32 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 const projects = [
    {
-      name: 'Design Engineering',
-      url: '#',
+      name: "Design Engineering",
+      url: "#",
       icon: Frame,
    },
    {
-      name: 'Sales & Marketing',
-      url: '#',
+      name: "Sales & Marketing",
+      url: "#",
       icon: PieChart,
    },
    {
-      name: 'Travel',
-      url: '#',
+      name: "Travel",
+      url: "#",
       icon: Map,
    },
    {
-      name: 'Support',
-      url: '#',
+      name: "Support",
+      url: "#",
       icon: LifeBuoy,
    },
    {
-      name: 'Feedback',
-      url: '#',
+      name: "Feedback",
+      url: "#",
       icon: Send,
    },
 ]
@@ -83,7 +83,10 @@ export default function AppSidebar() {
                                        <span className="sr-only">More</span>
                                     </SidebarMenuAction>
                                  </DropdownMenuTrigger>
-                                 <DropdownMenuContent side="right" align="start">
+                                 <DropdownMenuContent
+                                    side="right"
+                                    align="start"
+                                 >
                                     <DropdownMenuItem>
                                        <span>Edit Project</span>
                                     </DropdownMenuItem>
diff --git a/apps/web/__registry__/default/block/demo-sidebar-menu-badge.tsx b/apps/web/__registry__/default/block/demo-sidebar-menu-badge.tsx
index 6d3e36bf..885ecc15 100644
--- a/apps/web/__registry__/default/block/demo-sidebar-menu-badge.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar-menu-badge.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-react'
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
 
 import {
    Sidebar,
@@ -13,38 +13,38 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 const projects = [
    {
-      name: 'Design Engineering',
-      url: '#',
+      name: "Design Engineering",
+      url: "#",
       icon: Frame,
-      badge: '24',
+      badge: "24",
    },
    {
-      name: 'Sales & Marketing',
-      url: '#',
+      name: "Sales & Marketing",
+      url: "#",
       icon: PieChart,
-      badge: '12',
+      badge: "12",
    },
    {
-      name: 'Travel',
-      url: '#',
+      name: "Travel",
+      url: "#",
       icon: Map,
-      badge: '3',
+      badge: "3",
    },
    {
-      name: 'Support',
-      url: '#',
+      name: "Support",
+      url: "#",
       icon: LifeBuoy,
-      badge: '21',
+      badge: "21",
    },
    {
-      name: 'Feedback',
-      url: '#',
+      name: "Feedback",
+      url: "#",
       icon: Send,
-      badge: '8',
+      badge: "8",
    },
 ]
 
@@ -57,7 +57,7 @@ export default function AppSidebar() {
                   <SidebarGroupLabel>Projects</SidebarGroupLabel>
                   <SidebarGroupContent>
                      <SidebarMenu>
-                        {projects.map(project => (
+                        {projects.map((project) => (
                            <SidebarMenuItem key={project.name}>
                               <SidebarMenuButton
                                  asChild
@@ -68,7 +68,9 @@ export default function AppSidebar() {
                                     <span>{project.name}</span>
                                  </a>
                               </SidebarMenuButton>
-                              <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>
+                              <SidebarMenuBadge>
+                                 {project.badge}
+                              </SidebarMenuBadge>
                            </SidebarMenuItem>
                         ))}
                      </SidebarMenu>
diff --git a/apps/web/__registry__/default/block/demo-sidebar-menu-collapsible.tsx b/apps/web/__registry__/default/block/demo-sidebar-menu-collapsible.tsx
index 6dc1c6c7..a319104d 100644
--- a/apps/web/__registry__/default/block/demo-sidebar-menu-collapsible.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar-menu-collapsible.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import { ChevronRight } from 'lucide-react'
+import { ChevronRight } from "lucide-react"
 
 import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
+} from "~/registry/default/ui/collapsible"
 import {
    Sidebar,
    SidebarContent,
@@ -20,131 +20,131 @@ import {
    SidebarMenuSubButton,
    SidebarMenuSubItem,
    SidebarProvider,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 const items = [
    {
-      title: 'Getting Started',
-      url: '#',
+      title: "Getting Started",
+      url: "#",
       items: [
          {
-            title: 'Installation',
-            url: '#',
+            title: "Installation",
+            url: "#",
          },
          {
-            title: 'Project Structure',
-            url: '#',
+            title: "Project Structure",
+            url: "#",
          },
       ],
    },
    {
-      title: 'Building Your Application',
-      url: '#',
+      title: "Building Your Application",
+      url: "#",
       items: [
          {
-            title: 'Routing',
-            url: '#',
+            title: "Routing",
+            url: "#",
          },
          {
-            title: 'Data Fetching',
-            url: '#',
+            title: "Data Fetching",
+            url: "#",
             isActive: true,
          },
          {
-            title: 'Rendering',
-            url: '#',
+            title: "Rendering",
+            url: "#",
          },
          {
-            title: 'Caching',
-            url: '#',
+            title: "Caching",
+            url: "#",
          },
          {
-            title: 'Styling',
-            url: '#',
+            title: "Styling",
+            url: "#",
          },
          {
-            title: 'Optimizing',
-            url: '#',
+            title: "Optimizing",
+            url: "#",
          },
          {
-            title: 'Configuring',
-            url: '#',
+            title: "Configuring",
+            url: "#",
          },
          {
-            title: 'Testing',
-            url: '#',
+            title: "Testing",
+            url: "#",
          },
          {
-            title: 'Authentication',
-            url: '#',
+            title: "Authentication",
+            url: "#",
          },
          {
-            title: 'Deploying',
-            url: '#',
+            title: "Deploying",
+            url: "#",
          },
          {
-            title: 'Upgrading',
-            url: '#',
+            title: "Upgrading",
+            url: "#",
          },
          {
-            title: 'Examples',
-            url: '#',
+            title: "Examples",
+            url: "#",
          },
       ],
    },
    {
-      title: 'API Reference',
-      url: '#',
+      title: "API Reference",
+      url: "#",
       items: [
          {
-            title: 'Components',
-            url: '#',
+            title: "Components",
+            url: "#",
          },
          {
-            title: 'File Conventions',
-            url: '#',
+            title: "File Conventions",
+            url: "#",
          },
          {
-            title: 'Functions',
-            url: '#',
+            title: "Functions",
+            url: "#",
          },
          {
-            title: 'next.config.js Options',
-            url: '#',
+            title: "next.config.js Options",
+            url: "#",
          },
          {
-            title: 'CLI',
-            url: '#',
+            title: "CLI",
+            url: "#",
          },
          {
-            title: 'Edge Runtime',
-            url: '#',
+            title: "Edge Runtime",
+            url: "#",
          },
       ],
    },
    {
-      title: 'Architecture',
-      url: '#',
+      title: "Architecture",
+      url: "#",
       items: [
          {
-            title: 'Accessibility',
-            url: '#',
+            title: "Accessibility",
+            url: "#",
          },
          {
-            title: 'Fast Refresh',
-            url: '#',
+            title: "Fast Refresh",
+            url: "#",
          },
          {
-            title: 'Next.js Compiler',
-            url: '#',
+            title: "Next.js Compiler",
+            url: "#",
          },
          {
-            title: 'Supported Browsers',
-            url: '#',
+            title: "Supported Browsers",
+            url: "#",
          },
          {
-            title: 'Turbopack',
-            url: '#',
+            title: "Turbopack",
+            url: "#",
          },
       ],
    },
diff --git a/apps/web/__registry__/default/block/demo-sidebar-menu-sub.tsx b/apps/web/__registry__/default/block/demo-sidebar-menu-sub.tsx
index ff764dbf..c99b4865 100644
--- a/apps/web/__registry__/default/block/demo-sidebar-menu-sub.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar-menu-sub.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client"
 
 import {
    Sidebar,
@@ -12,131 +12,131 @@ import {
    SidebarMenuSubButton,
    SidebarMenuSubItem,
    SidebarProvider,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 const items = [
    {
-      title: 'Getting Started',
-      url: '#',
+      title: "Getting Started",
+      url: "#",
       items: [
          {
-            title: 'Installation',
-            url: '#',
+            title: "Installation",
+            url: "#",
          },
          {
-            title: 'Project Structure',
-            url: '#',
+            title: "Project Structure",
+            url: "#",
          },
       ],
    },
    {
-      title: 'Building Your Application',
-      url: '#',
+      title: "Building Your Application",
+      url: "#",
       items: [
          {
-            title: 'Routing',
-            url: '#',
+            title: "Routing",
+            url: "#",
          },
          {
-            title: 'Data Fetching',
-            url: '#',
+            title: "Data Fetching",
+            url: "#",
             isActive: true,
          },
          {
-            title: 'Rendering',
-            url: '#',
+            title: "Rendering",
+            url: "#",
          },
          {
-            title: 'Caching',
-            url: '#',
+            title: "Caching",
+            url: "#",
          },
          {
-            title: 'Styling',
-            url: '#',
+            title: "Styling",
+            url: "#",
          },
          {
-            title: 'Optimizing',
-            url: '#',
+            title: "Optimizing",
+            url: "#",
          },
          {
-            title: 'Configuring',
-            url: '#',
+            title: "Configuring",
+            url: "#",
          },
          {
-            title: 'Testing',
-            url: '#',
+            title: "Testing",
+            url: "#",
          },
          {
-            title: 'Authentication',
-            url: '#',
+            title: "Authentication",
+            url: "#",
          },
          {
-            title: 'Deploying',
-            url: '#',
+            title: "Deploying",
+            url: "#",
          },
          {
-            title: 'Upgrading',
-            url: '#',
+            title: "Upgrading",
+            url: "#",
          },
          {
-            title: 'Examples',
-            url: '#',
+            title: "Examples",
+            url: "#",
          },
       ],
    },
    {
-      title: 'API Reference',
-      url: '#',
+      title: "API Reference",
+      url: "#",
       items: [
          {
-            title: 'Components',
-            url: '#',
+            title: "Components",
+            url: "#",
          },
          {
-            title: 'File Conventions',
-            url: '#',
+            title: "File Conventions",
+            url: "#",
          },
          {
-            title: 'Functions',
-            url: '#',
+            title: "Functions",
+            url: "#",
          },
          {
-            title: 'next.config.js Options',
-            url: '#',
+            title: "next.config.js Options",
+            url: "#",
          },
          {
-            title: 'CLI',
-            url: '#',
+            title: "CLI",
+            url: "#",
          },
          {
-            title: 'Edge Runtime',
-            url: '#',
+            title: "Edge Runtime",
+            url: "#",
          },
       ],
    },
    {
-      title: 'Architecture',
-      url: '#',
+      title: "Architecture",
+      url: "#",
       items: [
          {
-            title: 'Accessibility',
-            url: '#',
+            title: "Accessibility",
+            url: "#",
          },
          {
-            title: 'Fast Refresh',
-            url: '#',
+            title: "Fast Refresh",
+            url: "#",
          },
          {
-            title: 'Next.js Compiler',
-            url: '#',
+            title: "Next.js Compiler",
+            url: "#",
          },
          {
-            title: 'Supported Browsers',
-            url: '#',
+            title: "Supported Browsers",
+            url: "#",
          },
          {
-            title: 'Turbopack',
-            url: '#',
+            title: "Turbopack",
+            url: "#",
          },
       ],
    },
diff --git a/apps/web/__registry__/default/block/demo-sidebar-menu.tsx b/apps/web/__registry__/default/block/demo-sidebar-menu.tsx
index e78938ff..abaafa42 100644
--- a/apps/web/__registry__/default/block/demo-sidebar-menu.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar-menu.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-react'
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
 
 import {
    Sidebar,
@@ -12,32 +12,32 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 const projects = [
    {
-      name: 'Design Engineering',
-      url: '#',
+      name: "Design Engineering",
+      url: "#",
       icon: Frame,
    },
    {
-      name: 'Sales & Marketing',
-      url: '#',
+      name: "Sales & Marketing",
+      url: "#",
       icon: PieChart,
    },
    {
-      name: 'Travel',
-      url: '#',
+      name: "Travel",
+      url: "#",
       icon: Map,
    },
    {
-      name: 'Support',
-      url: '#',
+      name: "Support",
+      url: "#",
       icon: LifeBuoy,
    },
    {
-      name: 'Feedback',
-      url: '#',
+      name: "Feedback",
+      url: "#",
       icon: Send,
    },
 ]
@@ -51,7 +51,7 @@ export default function AppSidebar() {
                   <SidebarGroupLabel>Projects</SidebarGroupLabel>
                   <SidebarGroupContent>
                      <SidebarMenu>
-                        {projects.map(project => (
+                        {projects.map((project) => (
                            <SidebarMenuItem key={project.name}>
                               <SidebarMenuButton asChild>
                                  <a href={project.url}>
diff --git a/apps/web/__registry__/default/block/demo-sidebar-rsc.tsx b/apps/web/__registry__/default/block/demo-sidebar-rsc.tsx
index d5dbbb5e..342e1d35 100644
--- a/apps/web/__registry__/default/block/demo-sidebar-rsc.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar-rsc.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
-import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-react'
+import * as React from "react"
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
 
 import {
    Sidebar,
@@ -12,44 +12,44 @@ import {
    SidebarMenuItem,
    SidebarMenuSkeleton,
    SidebarProvider,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 const projects = [
    {
-      name: 'Design Engineering',
-      url: '#',
+      name: "Design Engineering",
+      url: "#",
       icon: Frame,
-      badge: '24',
+      badge: "24",
    },
    {
-      name: 'Sales & Marketing',
-      url: '#',
+      name: "Sales & Marketing",
+      url: "#",
       icon: PieChart,
-      badge: '12',
+      badge: "12",
    },
    {
-      name: 'Travel',
-      url: '#',
+      name: "Travel",
+      url: "#",
       icon: Map,
-      badge: '3',
+      badge: "3",
    },
    {
-      name: 'Support',
-      url: '#',
+      name: "Support",
+      url: "#",
       icon: LifeBuoy,
-      badge: '21',
+      badge: "21",
    },
    {
-      name: 'Feedback',
-      url: '#',
+      name: "Feedback",
+      url: "#",
       icon: Send,
-      badge: '8',
+      badge: "8",
    },
 ]
 
 // Dummy fetch function
 async function fetchProjects() {
-   await new Promise(resolve => setTimeout(resolve, 3000))
+   await new Promise((resolve) => setTimeout(resolve, 3000))
    return projects
 }
 
@@ -89,7 +89,7 @@ async function NavProjects() {
 
    return (
       <SidebarMenu>
-         {projects.map(project => (
+         {projects.map((project) => (
             <SidebarMenuItem key={project.name}>
                <SidebarMenuButton asChild>
                   <a href={project.url}>
diff --git a/apps/web/__registry__/default/block/demo-sidebar.tsx b/apps/web/__registry__/default/block/demo-sidebar.tsx
index af767dd4..f446d991 100644
--- a/apps/web/__registry__/default/block/demo-sidebar.tsx
+++ b/apps/web/__registry__/default/block/demo-sidebar.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Calendar, Home, Inbox, Search, Settings } from 'lucide-react'
+import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
 
 import {
    Sidebar,
@@ -14,33 +14,33 @@ import {
    SidebarMenuItem,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
 // Menu items.
 const items = [
    {
-      title: 'Home',
-      url: '#',
+      title: "Home",
+      url: "#",
       icon: Home,
    },
    {
-      title: 'Inbox',
-      url: '#',
+      title: "Inbox",
+      url: "#",
       icon: Inbox,
    },
    {
-      title: 'Calendar',
-      url: '#',
+      title: "Calendar",
+      url: "#",
       icon: Calendar,
    },
    {
-      title: 'Search',
-      url: '#',
+      title: "Search",
+      url: "#",
       icon: Search,
    },
    {
-      title: 'Settings',
-      url: '#',
+      title: "Settings",
+      url: "#",
       icon: Settings,
    },
 ]
@@ -54,7 +54,7 @@ export default function AppSidebar() {
                   <SidebarGroupLabel>Application</SidebarGroupLabel>
                   <SidebarGroupContent>
                      <SidebarMenu>
-                        {items.map(item => (
+                        {items.map((item) => (
                            <SidebarMenuItem key={item.title}>
                               <SidebarMenuButton asChild>
                                  <a href={item.url}>
diff --git a/apps/web/__registry__/default/block/login-01/page.tsx b/apps/web/__registry__/default/block/login-01/page.tsx
index 666076bb..90fc8fee 100644
--- a/apps/web/__registry__/default/block/login-01/page.tsx
+++ b/apps/web/__registry__/default/block/login-01/page.tsx
@@ -1,10 +1,10 @@
-import { LoginForm } from '~/registry/default/block/login-01/components/login-form'
+import { LoginForm } from "~/registry/default/block/login-01/components/login-form"
 
-export const description = 'A simple login form.'
+export const description = "A simple login form."
 
-export const iframeHeight = '870px'
+export const iframeHeight = "870px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/block/sidebar-01/page.tsx b/apps/web/__registry__/default/block/sidebar-01/page.tsx
index f16e5d2c..1d1e6b02 100644
--- a/apps/web/__registry__/default/block/sidebar-01/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-01/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-01/components/app-sidebar'
+import { AppSidebar } from "~/registry/default/block/sidebar-01/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,18 +6,18 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description
-  = 'A simple sidebar with navigation grouped by section.'
+export const description =
+   "A simple sidebar with navigation grouped by section."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/block/sidebar-02/page.tsx b/apps/web/__registry__/default/block/sidebar-02/page.tsx
index 120adffc..fb3a556e 100644
--- a/apps/web/__registry__/default/block/sidebar-02/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-02/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-02/components/app-sidebar'
+import { AppSidebar } from "~/registry/default/block/sidebar-02/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar with collapsible sections.'
+export const description = "A sidebar with collapsible sections."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/block/sidebar-03/page.tsx b/apps/web/__registry__/default/block/sidebar-03/page.tsx
index 9020a67f..ce68c369 100644
--- a/apps/web/__registry__/default/block/sidebar-03/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-03/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-03/components/app-sidebar'
+import { AppSidebar } from "~/registry/default/block/sidebar-03/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar with submenus.'
+export const description = "A sidebar with submenus."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/block/sidebar-04/page.tsx b/apps/web/__registry__/default/block/sidebar-04/page.tsx
index 382c4e59..142f108d 100644
--- a/apps/web/__registry__/default/block/sidebar-04/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-04/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-04/components/app-sidebar'
+import { AppSidebar } from "~/registry/default/block/sidebar-04/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,24 +6,24 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A floating sidebar with submenus.'
+export const description = "A floating sidebar with submenus."
 
 export default function Page() {
    return (
       <SidebarProvider
          style={
             {
-               '--sidebar-width': '19rem',
+               "--sidebar-width": "19rem",
             } as React.CSSProperties
          }
       >
diff --git a/apps/web/__registry__/default/block/sidebar-05/page.tsx b/apps/web/__registry__/default/block/sidebar-05/page.tsx
index 607cd8a3..7598a22c 100644
--- a/apps/web/__registry__/default/block/sidebar-05/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-05/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-05/components/app-sidebar'
+import { AppSidebar } from "~/registry/default/block/sidebar-05/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar with collapsible submenus.'
+export const description = "A sidebar with collapsible submenus."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/block/sidebar-06/page.tsx b/apps/web/__registry__/default/block/sidebar-06/page.tsx
index d5f4980e..c3fbe95d 100644
--- a/apps/web/__registry__/default/block/sidebar-06/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-06/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-06/components/app-sidebar'
+import { AppSidebar } from "~/registry/default/block/sidebar-06/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar with submenus as dropdowns.'
+export const description = "A sidebar with submenus as dropdowns."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/block/sidebar-07/page.tsx b/apps/web/__registry__/default/block/sidebar-07/page.tsx
index c43c4fca..f67a0850 100644
--- a/apps/web/__registry__/default/block/sidebar-07/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-07/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-07/components/app-sidebar'
+import { AppSidebar } from "~/registry/default/block/sidebar-07/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar that collapses to icons.'
+export const description = "A sidebar that collapses to icons."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/block/sidebar-08/page.tsx b/apps/web/__registry__/default/block/sidebar-08/page.tsx
index fe53ea0f..1bb04ee7 100644
--- a/apps/web/__registry__/default/block/sidebar-08/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-08/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-08/components/app-sidebar'
+import { AppSidebar } from "~/registry/default/block/sidebar-08/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'An inset sidebar with secondary navigation.'
+export const description = "An inset sidebar with secondary navigation."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/block/sidebar-09/page.tsx b/apps/web/__registry__/default/block/sidebar-09/page.tsx
index 0c1bd58b..bd3c72cb 100644
--- a/apps/web/__registry__/default/block/sidebar-09/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-09/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-09/components/app-sidebar'
+import { AppSidebar } from "~/registry/default/block/sidebar-09/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,24 +6,24 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'Collapsible nested sidebars.'
+export const description = "Collapsible nested sidebars."
 
 export default function Page() {
    return (
       <SidebarProvider
          style={
             {
-               '--sidebar-width': '350px',
+               "--sidebar-width": "350px",
             } as React.CSSProperties
          }
       >
diff --git a/apps/web/__registry__/default/block/sidebar-10/page.tsx b/apps/web/__registry__/default/block/sidebar-10/page.tsx
index e45be572..1cd99752 100644
--- a/apps/web/__registry__/default/block/sidebar-10/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-10/page.tsx
@@ -1,21 +1,21 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-10/components/app-sidebar'
-import { NavActions } from '~/registry/default/block/sidebar-10/components/nav-actions'
+import { AppSidebar } from "~/registry/default/block/sidebar-10/components/app-sidebar"
+import { NavActions } from "~/registry/default/block/sidebar-10/components/nav-actions"
 import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbList,
    BreadcrumbPage,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar in a popover.'
+export const description = "A sidebar in a popover."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/block/sidebar-11/page.tsx b/apps/web/__registry__/default/block/sidebar-11/page.tsx
index 0332aaa8..a043fe55 100644
--- a/apps/web/__registry__/default/block/sidebar-11/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-11/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-11/components/app-sidebar'
+import { AppSidebar } from "~/registry/default/block/sidebar-11/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar with a collapsible file tree.'
+export const description = "A sidebar with a collapsible file tree."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/block/sidebar-12/page.tsx b/apps/web/__registry__/default/block/sidebar-12/page.tsx
index ca617dbd..759f22a0 100644
--- a/apps/web/__registry__/default/block/sidebar-12/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-12/page.tsx
@@ -1,20 +1,20 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-12/components/app-sidebar'
+import { AppSidebar } from "~/registry/default/block/sidebar-12/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbList,
    BreadcrumbPage,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar with a calendar.'
+export const description = "A sidebar with a calendar."
 
 export default function Page() {
    return (
@@ -35,7 +35,10 @@ export default function Page() {
             <div className="flex flex-1 flex-col gap-4 p-4">
                <div className="grid auto-rows-min gap-4 md:grid-cols-5">
                   {Array.from({ length: 20 }).map((_, i) => (
-                     <div key={i} className="bg-muted/50 aspect-square rounded-xl" />
+                     <div
+                        key={i}
+                        className="bg-muted/50 aspect-square rounded-xl"
+                     />
                   ))}
                </div>
             </div>
diff --git a/apps/web/__registry__/default/block/sidebar-13/page.tsx b/apps/web/__registry__/default/block/sidebar-13/page.tsx
index 793e851e..0a87d818 100644
--- a/apps/web/__registry__/default/block/sidebar-13/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-13/page.tsx
@@ -1,8 +1,8 @@
-import { SettingsDialog } from '~/registry/default/block/sidebar-13/components/settings-dialog'
+import { SettingsDialog } from "~/registry/default/block/sidebar-13/components/settings-dialog"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar in a dialog.'
+export const description = "A sidebar in a dialog."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/block/sidebar-14/page.tsx b/apps/web/__registry__/default/block/sidebar-14/page.tsx
index 819151a7..6b0d51b7 100644
--- a/apps/web/__registry__/default/block/sidebar-14/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-14/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-14/components/app-sidebar'
+import { AppSidebar } from "~/registry/default/block/sidebar-14/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,16 +6,16 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
+} from "~/registry/default/ui/breadcrumb"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar on the right.'
+export const description = "A sidebar on the right."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/block/sidebar-15/page.tsx b/apps/web/__registry__/default/block/sidebar-15/page.tsx
index 25525e11..a752d47f 100644
--- a/apps/web/__registry__/default/block/sidebar-15/page.tsx
+++ b/apps/web/__registry__/default/block/sidebar-15/page.tsx
@@ -1,21 +1,21 @@
-import { SidebarLeft } from '~/registry/default/block/sidebar-15/components/sidebar-left'
-import { SidebarRight } from '~/registry/default/block/sidebar-15/components/sidebar-right'
+import { SidebarLeft } from "~/registry/default/block/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "~/registry/default/block/sidebar-15/components/sidebar-right"
 import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbList,
    BreadcrumbPage,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
+} from "~/registry/default/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A left and right sidebar.'
+export const description = "A left and right sidebar."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/default/blocks/login-01/page.tsx b/apps/web/__registry__/default/blocks/login-01/page.tsx
new file mode 100644
index 00000000..a14b2d29
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/login-01/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "~/registry/default/blocks/login-01/components/login-form"
+
+export default function Page() {
+   return (
+      <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+         <div className="w-full max-w-sm">
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/login-02/page.tsx b/apps/web/__registry__/default/blocks/login-02/page.tsx
new file mode 100644
index 00000000..6b7a5392
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/login-02/page.tsx
@@ -0,0 +1,32 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "~/registry/default/blocks/login-02/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="grid min-h-svh lg:grid-cols-2">
+         <div className="flex flex-col gap-4 p-6 md:p-10">
+            <div className="flex justify-center gap-2 md:justify-start">
+               <a href="#" className="flex items-center gap-2 font-medium">
+                  <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+                     <GalleryVerticalEnd className="size-4" />
+                  </div>
+                  Acme Inc.
+               </a>
+            </div>
+            <div className="flex flex-1 items-center justify-center">
+               <div className="w-full max-w-xs">
+                  <LoginForm />
+               </div>
+            </div>
+         </div>
+         <div className="relative hidden bg-muted lg:block">
+            <img
+               src="/placeholder.svg"
+               alt="Image"
+               className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+            />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/login-03/page.tsx b/apps/web/__registry__/default/blocks/login-03/page.tsx
new file mode 100644
index 00000000..f7ffcb37
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/login-03/page.tsx
@@ -0,0 +1,22 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "~/registry/default/blocks/login-03/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+         <div className="flex w-full max-w-sm flex-col gap-6">
+            <a
+               href="#"
+               className="flex items-center gap-2 self-center font-medium"
+            >
+               <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+               </div>
+               Acme Inc.
+            </a>
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/login-04/page.tsx b/apps/web/__registry__/default/blocks/login-04/page.tsx
new file mode 100644
index 00000000..033a00f5
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/login-04/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "~/registry/default/blocks/login-04/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+         <div className="w-full max-w-sm md:max-w-3xl">
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/login-05/page.tsx b/apps/web/__registry__/default/blocks/login-05/page.tsx
new file mode 100644
index 00000000..9bd1706f
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/login-05/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "~/registry/default/blocks/login-05/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+         <div className="w-full max-w-sm">
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-01/page.tsx b/apps/web/__registry__/default/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000..b7d1cf02
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-01/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-01/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-02/page.tsx b/apps/web/__registry__/default/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000..311bb7bd
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-02/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-02/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               {Array.from({ length: 24 }).map((_, index) => (
+                  <div
+                     key={index}
+                     className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                  />
+               ))}
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-03/page.tsx b/apps/web/__registry__/default/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000..0198154b
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-03/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-03/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+               <div className="flex items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-04/page.tsx b/apps/web/__registry__/default/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000..b7cd247c
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-04/page.tsx
@@ -0,0 +1,56 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-04/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider
+         style={
+            {
+               "--sidebar-width": "19rem",
+            } as React.CSSProperties
+         }
+      >
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-05/page.tsx b/apps/web/__registry__/default/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000..34f360c3
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-05/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-05/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-06/page.tsx b/apps/web/__registry__/default/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000..aacfae53
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-06/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-06/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-07/page.tsx b/apps/web/__registry__/default/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000..e50130d9
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-07/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-07/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-08/page.tsx b/apps/web/__registry__/default/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000..447f8372
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-08/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-08/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-09/page.tsx b/apps/web/__registry__/default/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000..f1d040c8
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-09/page.tsx
@@ -0,0 +1,54 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-09/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider
+         style={
+            {
+               "--sidebar-width": "350px",
+            } as React.CSSProperties
+         }
+      >
+         <AppSidebar />
+         <SidebarInset>
+            <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Inbox</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               {Array.from({ length: 24 }).map((_, index) => (
+                  <div
+                     key={index}
+                     className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                  />
+               ))}
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-10/page.tsx b/apps/web/__registry__/default/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000..5a1eee47
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-10/page.tsx
@@ -0,0 +1,46 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-10/components/app-sidebar"
+import { NavActions } from "~/registry/default/blocks/sidebar-10/components/nav-actions"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-14 shrink-0 items-center gap-2">
+               <div className="flex flex-1 items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem>
+                           <BreadcrumbPage className="line-clamp-1">
+                              Project Management & Task Tracking
+                           </BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+               <div className="ml-auto px-3">
+                  <NavActions />
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+               <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+               <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-11/page.tsx b/apps/web/__registry__/default/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000..6d696ff8
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-11/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-11/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">components</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">ui</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>button.tsx</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-12/page.tsx b/apps/web/__registry__/default/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000..1a5376f8
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-12/page.tsx
@@ -0,0 +1,44 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-12/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>October 2024</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+                  {Array.from({ length: 20 }).map((_, i) => (
+                     <div
+                        key={i}
+                        className="aspect-square rounded-xl bg-muted/50"
+                     />
+                  ))}
+               </div>
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-13/page.tsx b/apps/web/__registry__/default/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000..28a8aa4c
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-13/page.tsx
@@ -0,0 +1,9 @@
+import { SettingsDialog } from "~/registry/default/blocks/sidebar-13/components/settings-dialog"
+
+export default function Page() {
+   return (
+      <div className="flex h-svh items-center justify-center">
+         <SettingsDialog />
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-14/page.tsx b/apps/web/__registry__/default/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000..c8d20c7b
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-14/page.tsx
@@ -0,0 +1,48 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-14/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+               <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+         <AppSidebar side="right" />
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-15/page.tsx b/apps/web/__registry__/default/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000..0200d706
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-15/page.tsx
@@ -0,0 +1,44 @@
+import { SidebarLeft } from "~/registry/default/blocks/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "~/registry/default/blocks/sidebar-15/components/sidebar-right"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/default/ui/breadcrumb"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/default/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <SidebarLeft />
+         <SidebarInset>
+            <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+               <div className="flex flex-1 items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem>
+                           <BreadcrumbPage className="line-clamp-1">
+                              Project Management & Task Tracking
+                           </BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+               <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+            </div>
+         </SidebarInset>
+         <SidebarRight />
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/default/blocks/sidebar-16/page.tsx b/apps/web/__registry__/default/blocks/sidebar-16/page.tsx
new file mode 100644
index 00000000..76667fa1
--- /dev/null
+++ b/apps/web/__registry__/default/blocks/sidebar-16/page.tsx
@@ -0,0 +1,30 @@
+import { AppSidebar } from "~/registry/default/blocks/sidebar-16/components/app-sidebar"
+import { SiteHeader } from "~/registry/default/blocks/sidebar-16/components/site-header"
+import { SidebarInset, SidebarProvider } from "~/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a header and a search form."
+
+export default function Page() {
+   return (
+      <div className="[--header-height:calc(theme(spacing.14))]">
+         <SidebarProvider className="flex flex-col">
+            <SiteHeader />
+            <div className="flex flex-1">
+               <AppSidebar />
+               <SidebarInset>
+                  <div className="flex flex-1 flex-col gap-4 p-4">
+                     <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                        <div className="aspect-video rounded-xl bg-muted/50" />
+                        <div className="aspect-video rounded-xl bg-muted/50" />
+                        <div className="aspect-video rounded-xl bg-muted/50" />
+                     </div>
+                     <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+                  </div>
+               </SidebarInset>
+            </div>
+         </SidebarProvider>
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-area-axes.tsx b/apps/web/__registry__/default/charts/chart-area-axes.tsx
new file mode 100644
index 00000000..293c8eb4
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-area-axes.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "An area chart with axes"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Axes</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: -20,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <YAxis
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickCount={3}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-area-default.tsx b/apps/web/__registry__/default/charts/chart-area-default.tsx
new file mode 100644
index 00000000..78954745
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-area-default.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A simple area chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-area-gradient.tsx b/apps/web/__registry__/default/charts/chart-area-gradient.tsx
new file mode 100644
index 00000000..f9039c35
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-area-gradient.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "An area chart with gradient fill"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Gradient</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <defs>
+                     <linearGradient
+                        id="fillDesktop"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                     <linearGradient
+                        id="fillMobile"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                  </defs>
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="url(#fillMobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="url(#fillDesktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-area-icons.tsx b/apps/web/__registry__/default/charts/chart-area-icons.tsx
new file mode 100644
index 00000000..331762b6
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-area-icons.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { TrendingDown, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "An area chart with icons"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+      icon: TrendingDown,
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+      icon: TrendingUp,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Icons</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-area-interactive.tsx b/apps/web/__registry__/default/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000..271ba23d
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-area-interactive.tsx
@@ -0,0 +1,281 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/default/ui/select"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const [timeRange, setTimeRange] = React.useState("90d")
+
+   const filteredData = chartData.filter((item) => {
+      const date = new Date(item.date)
+      const referenceDate = new Date("2024-06-30")
+      let daysToSubtract = 90
+      if (timeRange === "30d") {
+         daysToSubtract = 30
+      } else if (timeRange === "7d") {
+         daysToSubtract = 7
+      }
+      const startDate = new Date(referenceDate)
+      startDate.setDate(startDate.getDate() - daysToSubtract)
+      return date >= startDate
+   })
+
+   return (
+      <Card>
+         <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
+            <div className="grid flex-1 gap-1 text-center sm:text-left">
+               <CardTitle>Area Chart - Interactive</CardTitle>
+               <CardDescription>
+                  Showing total visitors for the last 3 months
+               </CardDescription>
+            </div>
+            <Select value={timeRange} onValueChange={setTimeRange}>
+               <SelectTrigger
+                  className="w-[160px] rounded-lg sm:ml-auto"
+                  aria-label="Select a value"
+               >
+                  <SelectValue placeholder="Last 3 months" />
+               </SelectTrigger>
+               <SelectContent className="rounded-xl">
+                  <SelectItem value="90d" className="rounded-lg">
+                     Last 3 months
+                  </SelectItem>
+                  <SelectItem value="30d" className="rounded-lg">
+                     Last 30 days
+                  </SelectItem>
+                  <SelectItem value="7d" className="rounded-lg">
+                     Last 7 days
+                  </SelectItem>
+               </SelectContent>
+            </Select>
+         </CardHeader>
+         <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+            <ChartContainer
+               config={chartConfig}
+               className="aspect-auto h-[250px] w-full"
+            >
+               <AreaChart data={filteredData}>
+                  <defs>
+                     <linearGradient
+                        id="fillDesktop"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                     <linearGradient
+                        id="fillMobile"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                  </defs>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     minTickGap={32}
+                     tickFormatter={(value) => {
+                        const date = new Date(value)
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
+                        })
+                     }}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                 },
+                              )
+                           }}
+                           indicator="dot"
+                        />
+                     }
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="url(#fillMobile)"
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="url(#fillDesktop)"
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-area-legend.tsx b/apps/web/__registry__/default/charts/chart-area-legend.tsx
new file mode 100644
index 00000000..5cdb6115
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-area-legend.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "An area chart with a legend"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Legend</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-area-linear.tsx b/apps/web/__registry__/default/charts/chart-area-linear.tsx
new file mode 100644
index 00000000..75d15957
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-area-linear.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A linear area chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Linear</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="dot" hideLabel />}
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="linear"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-area-stacked-expand.tsx b/apps/web/__registry__/default/charts/chart-area-stacked-expand.tsx
new file mode 100644
index 00000000..478d849a
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-area-stacked-expand.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A stacked area chart with expand stacking"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80, other: 45 },
+   { month: "February", desktop: 305, mobile: 200, other: 100 },
+   { month: "March", desktop: 237, mobile: 120, other: 150 },
+   { month: "April", desktop: 73, mobile: 190, other: 50 },
+   { month: "May", desktop: 209, mobile: 130, other: 100 },
+   { month: "June", desktop: 214, mobile: 140, other: 160 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-3))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Stacked Expanded</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                     top: 12,
+                  }}
+                  stackOffset="expand"
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="other"
+                     type="natural"
+                     fill="var(--color-other)"
+                     fillOpacity={0.1}
+                     stroke="var(--color-other)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-area-stacked.tsx b/apps/web/__registry__/default/charts/chart-area-stacked.tsx
new file mode 100644
index 00000000..b6f786c2
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-area-stacked.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A stacked area chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Stacked</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="dot" />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-area-step.tsx b/apps/web/__registry__/default/charts/chart-area-step.tsx
new file mode 100644
index 00000000..db5cdd73
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-area-step.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { Activity, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A step area chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+      icon: Activity,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Step</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="step"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-bar-active.tsx b/apps/web/__registry__/default/charts/chart-bar-active.tsx
new file mode 100644
index 00000000..fdeb741c
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-bar-active.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A bar chart with an active bar"
+
+const chartData = [
+   { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Active</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="browser"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) =>
+                        chartConfig[value as keyof typeof chartConfig]?.label
+                     }
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                     dataKey="visitors"
+                     strokeWidth={2}
+                     radius={8}
+                     activeIndex={2}
+                     activeBar={({ ...props }) => {
+                        return (
+                           <Rectangle
+                              {...props}
+                              fillOpacity={0.8}
+                              stroke={props.payload.fill}
+                              strokeDasharray={4}
+                              strokeDashoffset={4}
+                           />
+                        )
+                     }}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-bar-default.tsx b/apps/web/__registry__/default/charts/chart-bar-default.tsx
new file mode 100644
index 00000000..599a6815
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-bar-default.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A bar chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={8}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-bar-horizontal.tsx b/apps/web/__registry__/default/charts/chart-bar-horizontal.tsx
new file mode 100644
index 00000000..51c7abbd
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-bar-horizontal.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A horizontal bar chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Horizontal</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  layout="vertical"
+                  margin={{
+                     left: -20,
+                  }}
+               >
+                  <XAxis type="number" dataKey="desktop" hide />
+                  <YAxis
+                     dataKey="month"
+                     type="category"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={5}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-bar-interactive.tsx b/apps/web/__registry__/default/charts/chart-bar-interactive.tsx
new file mode 100644
index 00000000..618deeec
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-bar-interactive.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "An interactive bar chart"
+
+const chartData = [
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+   views: {
+      label: "Page Views",
+   },
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const [activeChart, setActiveChart] =
+      React.useState<keyof typeof chartConfig>("desktop")
+
+   const total = React.useMemo(
+      () => ({
+         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+      }),
+      [],
+   )
+
+   return (
+      <Card>
+         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+            <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+               <CardTitle>Bar Chart - Interactive</CardTitle>
+               <CardDescription>
+                  Showing total visitors for the last 3 months
+               </CardDescription>
+            </div>
+            <div className="flex">
+               {["desktop", "mobile"].map((key) => {
+                  const chart = key as keyof typeof chartConfig
+                  return (
+                     <button
+                        key={chart}
+                        data-active={activeChart === chart}
+                        className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                        onClick={() => setActiveChart(chart)}
+                     >
+                        <span className="text-xs text-muted-foreground">
+                           {chartConfig[chart].label}
+                        </span>
+                        <span className="text-lg font-bold leading-none sm:text-3xl">
+                           {total[key as keyof typeof total].toLocaleString()}
+                        </span>
+                     </button>
+                  )
+               })}
+            </div>
+         </CardHeader>
+         <CardContent className="px-2 sm:p-6">
+            <ChartContainer
+               config={chartConfig}
+               className="aspect-auto h-[250px] w-full"
+            >
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     minTickGap={32}
+                     tickFormatter={(value) => {
+                        const date = new Date(value)
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
+                        })
+                     }}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           className="w-[150px]"
+                           nameKey="views"
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                 },
+                              )
+                           }}
+                        />
+                     }
+                  />
+                  <Bar
+                     dataKey={activeChart}
+                     fill={`var(--color-${activeChart})`}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-bar-label-custom.tsx b/apps/web/__registry__/default/charts/chart-bar-label-custom.tsx
new file mode 100644
index 00000000..3e865fc8
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-bar-label-custom.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A bar chart with a custom label"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+   label: {
+      color: "hsl(var(--background))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Custom Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  layout="vertical"
+                  margin={{
+                     right: 16,
+                  }}
+               >
+                  <CartesianGrid horizontal={false} />
+                  <YAxis
+                     dataKey="month"
+                     type="category"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                     hide
+                  />
+                  <XAxis dataKey="desktop" type="number" hide />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     layout="vertical"
+                     fill="var(--color-desktop)"
+                     radius={4}
+                  >
+                     <LabelList
+                        dataKey="month"
+                        position="insideLeft"
+                        offset={8}
+                        className="fill-[--color-label]"
+                        fontSize={12}
+                     />
+                     <LabelList
+                        dataKey="desktop"
+                        position="right"
+                        offset={8}
+                        className="fill-foreground"
+                        fontSize={12}
+                     />
+                  </Bar>
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-bar-label.tsx b/apps/web/__registry__/default/charts/chart-bar-label.tsx
new file mode 100644
index 00000000..3a16bedd
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-bar-label.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A bar chart with a label"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 20,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
+                     <LabelList
+                        position="top"
+                        offset={12}
+                        className="fill-foreground"
+                        fontSize={12}
+                     />
+                  </Bar>
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-bar-mixed.tsx b/apps/web/__registry__/default/charts/chart-bar-mixed.tsx
new file mode 100644
index 00000000..73680566
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-bar-mixed.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A mixed bar chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Mixed</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  layout="vertical"
+                  margin={{
+                     left: 0,
+                  }}
+               >
+                  <YAxis
+                     dataKey="browser"
+                     type="category"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) =>
+                        chartConfig[value as keyof typeof chartConfig]?.label
+                     }
+                  />
+                  <XAxis dataKey="visitors" type="number" hide />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar dataKey="visitors" layout="vertical" radius={5} />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-bar-multiple.tsx b/apps/web/__registry__/default/charts/chart-bar-multiple.tsx
new file mode 100644
index 00000000..37a1a78b
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-bar-multiple.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A multiple bar chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Multiple</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="dashed" />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={4}
+                  />
+                  <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-bar-negative.tsx b/apps/web/__registry__/default/charts/chart-bar-negative.tsx
new file mode 100644
index 00000000..c862e977
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-bar-negative.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A bar chart with negative values"
+
+const chartData = [
+   { month: "January", visitors: 186 },
+   { month: "February", visitors: 205 },
+   { month: "March", visitors: -207 },
+   { month: "April", visitors: 173 },
+   { month: "May", visitors: -209 },
+   { month: "June", visitors: 214 },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Negative</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel hideIndicator />}
+                  />
+                  <Bar dataKey="visitors">
+                     <LabelList
+                        position="top"
+                        dataKey="month"
+                        fillOpacity={1}
+                     />
+                     {chartData.map((item) => (
+                        <Cell
+                           key={item.month}
+                           fill={
+                              item.visitors > 0
+                                 ? "hsl(var(--chart-1))"
+                                 : "hsl(var(--chart-2))"
+                           }
+                        />
+                     ))}
+                  </Bar>
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-bar-stacked.tsx b/apps/web/__registry__/default/charts/chart-bar-stacked.tsx
new file mode 100644
index 00000000..12bd2190
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-bar-stacked.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Stacked + Legend</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+                  <ChartLegend content={<ChartLegendContent />} />
+                  <Bar
+                     dataKey="desktop"
+                     stackId="a"
+                     fill="var(--color-desktop)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="mobile"
+                     stackId="a"
+                     fill="var(--color-mobile)"
+                     radius={[4, 4, 0, 0]}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-line-default.tsx b/apps/web/__registry__/default/charts/chart-line-default.tsx
new file mode 100644
index 00000000..3c115065
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-line-default.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A line chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-line-dots-colors.tsx b/apps/web/__registry__/default/charts/chart-line-dots-colors.tsx
new file mode 100644
index 00000000..a4894ce3
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-line-dots-colors.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Dot, Line, LineChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A line chart with dots and colors"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+      color: "hsl(var(--chart-2))",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Dots Colors</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 24,
+                     left: 24,
+                     right: 24,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           indicator="line"
+                           nameKey="visitors"
+                           hideLabel
+                        />
+                     }
+                  />
+                  <Line
+                     dataKey="visitors"
+                     type="natural"
+                     stroke="var(--color-visitors)"
+                     strokeWidth={2}
+                     dot={({ payload, ...props }) => {
+                        return (
+                           <Dot
+                              key={payload.browser}
+                              r={5}
+                              cx={props.cx}
+                              cy={props.cy}
+                              fill={payload.fill}
+                              stroke={payload.fill}
+                           />
+                        )
+                     }}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-line-dots-custom.tsx b/apps/web/__registry__/default/charts/chart-line-dots-custom.tsx
new file mode 100644
index 00000000..736e380e
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-line-dots-custom.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { GitCommitVertical, TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A line chart with custom dots"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Custom Dots</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={({ cx, cy, payload }) => {
+                        const r = 24
+                        return (
+                           <GitCommitVertical
+                              key={payload.month}
+                              x={cx - r / 2}
+                              y={cy - r / 2}
+                              width={r}
+                              height={r}
+                              fill="hsl(var(--background))"
+                              stroke="var(--color-desktop)"
+                           />
+                        )
+                     }}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-line-dots.tsx b/apps/web/__registry__/default/charts/chart-line-dots.tsx
new file mode 100644
index 00000000..92fb6d02
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-line-dots.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A line chart with dots"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Dots</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={{
+                        fill: "var(--color-desktop)",
+                     }}
+                     activeDot={{
+                        r: 6,
+                     }}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-line-interactive.tsx b/apps/web/__registry__/default/charts/chart-line-interactive.tsx
new file mode 100644
index 00000000..b67ae892
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-line-interactive.tsx
@@ -0,0 +1,230 @@
+"use client"
+
+import * as React from "react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "An interactive line chart"
+
+const chartData = [
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+   views: {
+      label: "Page Views",
+   },
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const [activeChart, setActiveChart] =
+      React.useState<keyof typeof chartConfig>("desktop")
+
+   const total = React.useMemo(
+      () => ({
+         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+      }),
+      [],
+   )
+
+   return (
+      <Card>
+         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+            <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+               <CardTitle>Line Chart - Interactive</CardTitle>
+               <CardDescription>
+                  Showing total visitors for the last 3 months
+               </CardDescription>
+            </div>
+            <div className="flex">
+               {["desktop", "mobile"].map((key) => {
+                  const chart = key as keyof typeof chartConfig
+                  return (
+                     <button
+                        key={chart}
+                        data-active={activeChart === chart}
+                        className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                        onClick={() => setActiveChart(chart)}
+                     >
+                        <span className="text-xs text-muted-foreground">
+                           {chartConfig[chart].label}
+                        </span>
+                        <span className="text-lg font-bold leading-none sm:text-3xl">
+                           {total[key as keyof typeof total].toLocaleString()}
+                        </span>
+                     </button>
+                  )
+               })}
+            </div>
+         </CardHeader>
+         <CardContent className="px-2 sm:p-6">
+            <ChartContainer
+               config={chartConfig}
+               className="aspect-auto h-[250px] w-full"
+            >
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     minTickGap={32}
+                     tickFormatter={(value) => {
+                        const date = new Date(value)
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
+                        })
+                     }}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           className="w-[150px]"
+                           nameKey="views"
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                 },
+                              )
+                           }}
+                        />
+                     }
+                  />
+                  <Line
+                     dataKey={activeChart}
+                     type="monotone"
+                     stroke={`var(--color-${activeChart})`}
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-line-label-custom.tsx b/apps/web/__registry__/default/charts/chart-line-label-custom.tsx
new file mode 100644
index 00000000..71199c00
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-line-label-custom.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A line chart with a custom label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+      color: "hsl(var(--chart-2))",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Custom Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 24,
+                     left: 24,
+                     right: 24,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           indicator="line"
+                           nameKey="visitors"
+                           hideLabel
+                        />
+                     }
+                  />
+                  <Line
+                     dataKey="visitors"
+                     type="natural"
+                     stroke="var(--color-visitors)"
+                     strokeWidth={2}
+                     dot={{
+                        fill: "var(--color-visitors)",
+                     }}
+                     activeDot={{
+                        r: 6,
+                     }}
+                  >
+                     <LabelList
+                        position="top"
+                        offset={12}
+                        className="fill-foreground"
+                        fontSize={12}
+                        dataKey="browser"
+                        formatter={(value: keyof typeof chartConfig) =>
+                           chartConfig[value]?.label
+                        }
+                     />
+                  </Line>
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-line-label.tsx b/apps/web/__registry__/default/charts/chart-line-label.tsx
new file mode 100644
index 00000000..8e27b947
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-line-label.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A line chart with a label"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 20,
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={{
+                        fill: "var(--color-desktop)",
+                     }}
+                     activeDot={{
+                        r: 6,
+                     }}
+                  >
+                     <LabelList
+                        position="top"
+                        offset={12}
+                        className="fill-foreground"
+                        fontSize={12}
+                     />
+                  </Line>
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-line-linear.tsx b/apps/web/__registry__/default/charts/chart-line-linear.tsx
new file mode 100644
index 00000000..09b1d55a
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-line-linear.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A linear line chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Linear</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="linear"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-line-multiple.tsx b/apps/web/__registry__/default/charts/chart-line-multiple.tsx
new file mode 100644
index 00000000..e99cead4
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-line-multiple.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A multiple line chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Multiple</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="monotone"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+                  <Line
+                     dataKey="mobile"
+                     type="monotone"
+                     stroke="var(--color-mobile)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     Showing total visitors for the last 6 months
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-line-step.tsx b/apps/web/__registry__/default/charts/chart-line-step.tsx
new file mode 100644
index 00000000..3fc44bb6
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-line-step.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A line chart with step"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Step</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="step"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-pie-donut-active.tsx b/apps/web/__registry__/default/charts/chart-pie-donut-active.tsx
new file mode 100644
index 00000000..46069707
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-pie-donut-active.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import type { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A donut chart with an active sector"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Donut Active</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     innerRadius={60}
+                     strokeWidth={5}
+                     activeIndex={0}
+                     activeShape={({
+                        outerRadius = 0,
+                        ...props
+                     }: PieSectorDataItem) => (
+                        <Sector {...props} outerRadius={outerRadius + 10} />
+                     )}
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-pie-donut-text.tsx b/apps/web/__registry__/default/charts/chart-pie-donut-text.tsx
new file mode 100644
index 00000000..32f5bb7d
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-pie-donut-text.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import * as React from "react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A donut chart with text"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 190, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const totalVisitors = React.useMemo(() => {
+      return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+   }, [])
+
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Donut with Text</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     innerRadius={60}
+                     strokeWidth={5}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-3xl font-bold"
+                                    >
+                                       {totalVisitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </Pie>
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-pie-donut.tsx b/apps/web/__registry__/default/charts/chart-pie-donut.tsx
new file mode 100644
index 00000000..88b62f99
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-pie-donut.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A donut chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Donut</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     innerRadius={60}
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-pie-interactive.tsx b/apps/web/__registry__/default/charts/chart-pie-interactive.tsx
new file mode 100644
index 00000000..a4563734
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-pie-interactive.tsx
@@ -0,0 +1,194 @@
+"use client"
+
+import * as React from "react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import type { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartStyle,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/default/ui/select"
+
+export const description = "An interactive pie chart"
+
+const desktopData = [
+   { month: "january", desktop: 186, fill: "var(--color-january)" },
+   { month: "february", desktop: 305, fill: "var(--color-february)" },
+   { month: "march", desktop: 237, fill: "var(--color-march)" },
+   { month: "april", desktop: 173, fill: "var(--color-april)" },
+   { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   desktop: {
+      label: "Desktop",
+   },
+   mobile: {
+      label: "Mobile",
+   },
+   january: {
+      label: "January",
+      color: "hsl(var(--chart-1))",
+   },
+   february: {
+      label: "February",
+      color: "hsl(var(--chart-2))",
+   },
+   march: {
+      label: "March",
+      color: "hsl(var(--chart-3))",
+   },
+   april: {
+      label: "April",
+      color: "hsl(var(--chart-4))",
+   },
+   may: {
+      label: "May",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const id = "pie-interactive"
+   const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
+
+   const activeIndex = React.useMemo(
+      () => desktopData.findIndex((item) => item.month === activeMonth),
+      [activeMonth],
+   )
+   const months = React.useMemo(() => desktopData.map((item) => item.month), [])
+
+   return (
+      <Card data-chart={id} className="flex flex-col">
+         <ChartStyle id={id} config={chartConfig} />
+         <CardHeader className="flex-row items-start space-y-0 pb-0">
+            <div className="grid gap-1">
+               <CardTitle>Pie Chart - Interactive</CardTitle>
+               <CardDescription>January - June 2024</CardDescription>
+            </div>
+            <Select value={activeMonth} onValueChange={setActiveMonth}>
+               <SelectTrigger
+                  className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
+                  aria-label="Select a value"
+               >
+                  <SelectValue placeholder="Select month" />
+               </SelectTrigger>
+               <SelectContent align="end" className="rounded-xl">
+                  {months.map((key) => {
+                     const config = chartConfig[key as keyof typeof chartConfig]
+
+                     if (!config) {
+                        return null
+                     }
+
+                     return (
+                        <SelectItem
+                           key={key}
+                           value={key}
+                           className="rounded-lg [&_span]:flex"
+                        >
+                           <div className="flex items-center gap-2 text-xs">
+                              <span
+                                 className="flex h-3 w-3 shrink-0 rounded-sm"
+                                 style={{
+                                    backgroundColor: `var(--color-${key})`,
+                                 }}
+                              />
+                              {config?.label}
+                           </div>
+                        </SelectItem>
+                     )
+                  })}
+               </SelectContent>
+            </Select>
+         </CardHeader>
+         <CardContent className="flex flex-1 justify-center pb-0">
+            <ChartContainer
+               id={id}
+               config={chartConfig}
+               className="mx-auto aspect-square w-full max-w-[300px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={desktopData}
+                     dataKey="desktop"
+                     nameKey="month"
+                     innerRadius={60}
+                     strokeWidth={5}
+                     activeIndex={activeIndex}
+                     activeShape={({
+                        outerRadius = 0,
+                        ...props
+                     }: PieSectorDataItem) => (
+                        <g>
+                           <Sector {...props} outerRadius={outerRadius + 10} />
+                           <Sector
+                              {...props}
+                              outerRadius={outerRadius + 25}
+                              innerRadius={outerRadius + 12}
+                           />
+                        </g>
+                     )}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-3xl font-bold"
+                                    >
+                                       {desktopData[
+                                          activeIndex
+                                       ].desktop.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </Pie>
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-pie-label-custom.tsx b/apps/web/__registry__/default/charts/chart-pie-label-custom.tsx
new file mode 100644
index 00000000..4c210ba3
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-pie-label-custom.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A pie chart with a custom label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Custom Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px] px-0"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent nameKey="visitors" hideLabel />
+                     }
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     labelLine={false}
+                     label={({ payload, ...props }) => {
+                        return (
+                           <text
+                              cx={props.cx}
+                              cy={props.cy}
+                              x={props.x}
+                              y={props.y}
+                              textAnchor={props.textAnchor}
+                              dominantBaseline={props.dominantBaseline}
+                              fill="hsla(var(--foreground))"
+                           >
+                              {payload.visitors}
+                           </text>
+                        )
+                     }}
+                     nameKey="browser"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-pie-label-list.tsx b/apps/web/__registry__/default/charts/chart-pie-label-list.tsx
new file mode 100644
index 00000000..194d5d2e
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-pie-label-list.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A pie chart with a label list"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Label List</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent nameKey="visitors" hideLabel />
+                     }
+                  />
+                  <Pie data={chartData} dataKey="visitors">
+                     <LabelList
+                        dataKey="browser"
+                        className="fill-background"
+                        stroke="none"
+                        fontSize={12}
+                        formatter={(value: keyof typeof chartConfig) =>
+                           chartConfig[value]?.label
+                        }
+                     />
+                  </Pie>
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-pie-label.tsx b/apps/web/__registry__/default/charts/chart-pie-label.tsx
new file mode 100644
index 00000000..c35e33e2
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-pie-label.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A pie chart with a label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
+            >
+               <PieChart>
+                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     label
+                     nameKey="browser"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-pie-legend.tsx b/apps/web/__registry__/default/charts/chart-pie-legend.tsx
new file mode 100644
index 00000000..0757860b
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-pie-legend.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A pie chart with a legend"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Legend</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[300px]"
+            >
+               <PieChart>
+                  <Pie data={chartData} dataKey="visitors" />
+                  <ChartLegend
+                     content={<ChartLegendContent nameKey="browser" />}
+                     className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-pie-separator-none.tsx b/apps/web/__registry__/default/charts/chart-pie-separator-none.tsx
new file mode 100644
index 00000000..60b64c78
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-pie-separator-none.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A pie chart with no separator"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Separator None</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     stroke="0"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-pie-simple.tsx b/apps/web/__registry__/default/charts/chart-pie-simple.tsx
new file mode 100644
index 00000000..c8603bb9
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-pie-simple.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A simple pie chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie data={chartData} dataKey="visitors" nameKey="browser" />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-pie-stacked.tsx b/apps/web/__registry__/default/charts/chart-pie-stacked.tsx
new file mode 100644
index 00000000..b57521f3
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-pie-stacked.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import * as React from "react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A pie chart with stacked sections"
+
+const desktopData = [
+   { month: "january", desktop: 186, fill: "var(--color-january)" },
+   { month: "february", desktop: 305, fill: "var(--color-february)" },
+   { month: "march", desktop: 237, fill: "var(--color-march)" },
+   { month: "april", desktop: 173, fill: "var(--color-april)" },
+   { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const mobileData = [
+   { month: "january", mobile: 80, fill: "var(--color-january)" },
+   { month: "february", mobile: 200, fill: "var(--color-february)" },
+   { month: "march", mobile: 120, fill: "var(--color-march)" },
+   { month: "april", mobile: 190, fill: "var(--color-april)" },
+   { month: "may", mobile: 130, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   desktop: {
+      label: "Desktop",
+   },
+   mobile: {
+      label: "Mobile",
+   },
+   january: {
+      label: "January",
+      color: "hsl(var(--chart-1))",
+   },
+   february: {
+      label: "February",
+      color: "hsl(var(--chart-2))",
+   },
+   march: {
+      label: "March",
+      color: "hsl(var(--chart-3))",
+   },
+   april: {
+      label: "April",
+      color: "hsl(var(--chart-4))",
+   },
+   may: {
+      label: "May",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Stacked</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           labelKey="visitors"
+                           nameKey="month"
+                           indicator="line"
+                           labelFormatter={(_, payload) => {
+                              return chartConfig[
+                                 payload?.[0]
+                                    .dataKey as keyof typeof chartConfig
+                              ].label
+                           }}
+                        />
+                     }
+                  />
+                  <Pie data={desktopData} dataKey="desktop" outerRadius={60} />
+                  <Pie
+                     data={mobileData}
+                     dataKey="mobile"
+                     innerRadius={70}
+                     outerRadius={90}
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-default.tsx b/apps/web/__registry__/default/charts/chart-radar-default.tsx
new file mode 100644
index 00000000..0c59001b
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-default.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-dots.tsx b/apps/web/__registry__/default/charts/chart-radar-dots.tsx
new file mode 100644
index 00000000..57647d1e
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-dots.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with dots"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center">
+            <CardTitle>Radar Chart - Dots</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-grid-circle-fill.tsx b/apps/web/__registry__/default/charts/chart-radar-grid-circle-fill.tsx
new file mode 100644
index 00000000..338e0d98
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-grid-circle-fill.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 285 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <PolarGrid
+                     className="fill-[--color-desktop] opacity-20"
+                     gridType="circle"
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.5}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-grid-circle-no-lines.tsx b/apps/web/__registry__/default/charts/chart-radar-grid-circle-no-lines.tsx
new file mode 100644
index 00000000..774dcdcd
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-grid-circle-no-lines.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid gridType="circle" radialLines={false} />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-grid-circle.tsx b/apps/web/__registry__/default/charts/chart-radar-grid-circle.tsx
new file mode 100644
index 00000000..dfcfb8b5
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-grid-circle.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with a grid and circle"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Circle</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid gridType="circle" />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-grid-custom.tsx b/apps/web/__registry__/default/charts/chart-radar-grid-custom.tsx
new file mode 100644
index 00000000..50dd9dc3
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-grid-custom.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with a custom grid"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Custom</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid
+                     radialLines={false}
+                     polarRadius={[90]}
+                     strokeWidth={1}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-grid-fill.tsx b/apps/web/__registry__/default/charts/chart-radar-grid-fill.tsx
new file mode 100644
index 00000000..92d947bf
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-grid-fill.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with a grid filled"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 285 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Filled</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid className="fill-[--color-desktop] opacity-20" />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.5}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-grid-none.tsx b/apps/web/__registry__/default/charts/chart-radar-grid-none.tsx
new file mode 100644
index 00000000..b122620a
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-grid-none.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with no grid"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid None</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-icons.tsx b/apps/web/__registry__/default/charts/chart-radar-icons.tsx
new file mode 100644
index 00000000..a47d5cf5
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-icons.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with icons"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+      icon: ArrowDownFromLine,
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+      icon: ArrowUpFromLine,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Icons</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart
+                  data={chartData}
+                  margin={{
+                     top: -40,
+                     bottom: -10,
+                  }}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+                  <ChartLegend
+                     className="mt-8"
+                     content={<ChartLegendContent />}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 pt-4 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-label-custom.tsx b/apps/web/__registry__/default/charts/chart-radar-label-custom.tsx
new file mode 100644
index 00000000..ef812d03
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-label-custom.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with a custom label"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Custom Label</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart
+                  data={chartData}
+                  margin={{
+                     top: 10,
+                     right: 10,
+                     bottom: 10,
+                     left: 10,
+                  }}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis
+                     dataKey="month"
+                     tick={({ x, y, textAnchor, value, index, ...props }) => {
+                        const data = chartData[index]
+
+                        return (
+                           <text
+                              x={x}
+                              y={index === 0 ? y - 10 : y}
+                              textAnchor={textAnchor}
+                              fontSize={13}
+                              fontWeight={500}
+                              {...props}
+                           >
+                              <tspan>{data.desktop}</tspan>
+                              <tspan className="fill-muted-foreground">/</tspan>
+                              <tspan>{data.mobile}</tspan>
+                              <tspan
+                                 x={x}
+                                 dy={"1rem"}
+                                 fontSize={12}
+                                 className="fill-muted-foreground"
+                              >
+                                 {data.month}
+                              </tspan>
+                           </text>
+                        )
+                     }}
+                  />
+
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-legend.tsx b/apps/web/__registry__/default/charts/chart-radar-legend.tsx
new file mode 100644
index 00000000..09d95dec
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-legend.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with a legend"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Legend</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart
+                  data={chartData}
+                  margin={{
+                     top: -40,
+                     bottom: -10,
+                  }}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+                  <ChartLegend
+                     className="mt-8"
+                     content={<ChartLegendContent />}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 pt-4 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-lines-only.tsx b/apps/web/__registry__/default/charts/chart-radar-lines-only.tsx
new file mode 100644
index 00000000..da24452a
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-lines-only.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with lines only"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 160 },
+   { month: "February", desktop: 185, mobile: 170 },
+   { month: "March", desktop: 207, mobile: 180 },
+   { month: "April", desktop: 173, mobile: 160 },
+   { month: "May", desktop: 160, mobile: 190 },
+   { month: "June", desktop: 174, mobile: 204 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Lines Only</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid radialLines={false} />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0}
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                  />
+                  <Radar
+                     dataKey="mobile"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0}
+                     stroke="var(--color-mobile)"
+                     strokeWidth={2}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-multiple.tsx b/apps/web/__registry__/default/charts/chart-radar-multiple.tsx
new file mode 100644
index 00000000..3673c320
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-multiple.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with multiple data"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Multiple</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radar-radius.tsx b/apps/web/__registry__/default/charts/chart-radar-radius.tsx
new file mode 100644
index 00000000..798f4e32
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radar-radius.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+   PolarAngleAxis,
+   PolarGrid,
+   PolarRadiusAxis,
+   Radar,
+   RadarChart,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radar chart with a radius axis"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Radius Axis</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           indicator="line"
+                           labelKey="month"
+                        />
+                     }
+                  />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+                  <PolarRadiusAxis
+                     angle={60}
+                     stroke="hsla(var(--foreground))"
+                     orientation="middle"
+                     axisLine={false}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radial-grid.tsx b/apps/web/__registry__/default/charts/chart-radial-grid.tsx
new file mode 100644
index 00000000..86762137
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radial-grid.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarGrid, RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radial chart with a grid"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Grid</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  innerRadius={30}
+                  outerRadius={100}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
+                  />
+                  <PolarGrid gridType="circle" />
+                  <RadialBar dataKey="visitors" />
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radial-label.tsx b/apps/web/__registry__/default/charts/chart-radial-label.tsx
new file mode 100644
index 00000000..bfd90240
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radial-label.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radial chart with a label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  startAngle={-90}
+                  endAngle={380}
+                  innerRadius={30}
+                  outerRadius={110}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
+                  />
+                  <RadialBar dataKey="visitors" background>
+                     <LabelList
+                        position="insideStart"
+                        dataKey="browser"
+                        className="fill-white capitalize mix-blend-luminosity"
+                        fontSize={11}
+                     />
+                  </RadialBar>
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radial-shape.tsx b/apps/web/__registry__/default/charts/chart-radial-shape.tsx
new file mode 100644
index 00000000..6e77e173
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radial-shape.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+   Label,
+   PolarGrid,
+   PolarRadiusAxis,
+   RadialBar,
+   RadialBarChart,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { type ChartConfig, ChartContainer } from "~/registry/default/ui/chart"
+
+export const description = "A radial chart with a custom shape"
+
+const chartData = [
+   { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Shape</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  endAngle={100}
+                  innerRadius={80}
+                  outerRadius={140}
+               >
+                  <PolarGrid
+                     gridType="circle"
+                     radialLines={false}
+                     stroke="none"
+                     className="first:fill-muted last:fill-background"
+                     polarRadius={[86, 74]}
+                  />
+                  <RadialBar dataKey="visitors" background />
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-4xl font-bold"
+                                    >
+                                       {chartData[0].visitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </PolarRadiusAxis>
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radial-simple.tsx b/apps/web/__registry__/default/charts/chart-radial-simple.tsx
new file mode 100644
index 00000000..3ef85fb0
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radial-simple.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radial chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  innerRadius={30}
+                  outerRadius={110}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
+                  />
+                  <RadialBar dataKey="visitors" background />
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radial-stacked.tsx b/apps/web/__registry__/default/charts/chart-radial-stacked.tsx
new file mode 100644
index 00000000..ccb5b99c
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radial-stacked.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A radial chart with stacked sections"
+
+const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const totalVisitors = chartData[0].desktop + chartData[0].mobile
+
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Stacked</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex flex-1 items-center pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square w-full max-w-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  endAngle={180}
+                  innerRadius={80}
+                  outerRadius={130}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) - 16}
+                                       className="fill-foreground text-2xl font-bold"
+                                    >
+                                       {totalVisitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 4}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </PolarRadiusAxis>
+                  <RadialBar
+                     dataKey="desktop"
+                     stackId="a"
+                     cornerRadius={5}
+                     fill="var(--color-desktop)"
+                     className="stroke-transparent stroke-2"
+                  />
+                  <RadialBar
+                     dataKey="mobile"
+                     fill="var(--color-mobile)"
+                     stackId="a"
+                     cornerRadius={5}
+                     className="stroke-transparent stroke-2"
+                  />
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-radial-text.tsx b/apps/web/__registry__/default/charts/chart-radial-text.tsx
new file mode 100644
index 00000000..4d306846
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-radial-text.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+   Label,
+   PolarGrid,
+   PolarRadiusAxis,
+   RadialBar,
+   RadialBarChart,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { type ChartConfig, ChartContainer } from "~/registry/default/ui/chart"
+
+export const description = "A radial chart with text"
+
+const chartData = [
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Text</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  startAngle={0}
+                  endAngle={250}
+                  innerRadius={80}
+                  outerRadius={110}
+               >
+                  <PolarGrid
+                     gridType="circle"
+                     radialLines={false}
+                     stroke="none"
+                     className="first:fill-muted last:fill-background"
+                     polarRadius={[86, 74]}
+                  />
+                  <RadialBar dataKey="visitors" background cornerRadius={10} />
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-4xl font-bold"
+                                    >
+                                       {chartData[0].visitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </PolarRadiusAxis>
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-tooltip-advanced.tsx b/apps/web/__registry__/default/charts/chart-tooltip-advanced.tsx
new file mode 100644
index 00000000..2f2fc93a
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-tooltip-advanced.tsx
@@ -0,0 +1,124 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Advanced</CardTitle>
+            <CardDescription>
+               Tooltip with custom formatter and total.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           hideLabel
+                           className="w-[180px]"
+                           formatter={(value, name, item, index) => (
+                              <>
+                                 <div
+                                    className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
+                                    style={
+                                       {
+                                          "--color-bg": `var(--color-${name})`,
+                                       } as React.CSSProperties
+                                    }
+                                 />
+                                 {chartConfig[name as keyof typeof chartConfig]
+                                    ?.label || name}
+                                 <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                    {value}
+                                    <span className="font-normal text-muted-foreground">
+                                       kcal
+                                    </span>
+                                 </div>
+                                 {/* Add this after the last item */}
+                                 {index === 1 && (
+                                    <div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
+                                       Total
+                                       <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                          {item.payload.running +
+                                             item.payload.swimming}
+                                          <span className="font-normal text-muted-foreground">
+                                             kcal
+                                          </span>
+                                       </div>
+                                    </div>
+                                 )}
+                              </>
+                           )}
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-tooltip-default.tsx b/apps/web/__registry__/default/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000..b2c582cb
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-tooltip-default.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+   "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Default</CardTitle>
+            <CardDescription>
+               Default tooltip with ChartTooltipContent.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-tooltip-formatter.tsx b/apps/web/__registry__/default/charts/chart-tooltip-formatter.tsx
new file mode 100644
index 00000000..c0f24c71
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-tooltip-formatter.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Formatter</CardTitle>
+            <CardDescription>Tooltip with custom formatter .</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           hideLabel
+                           formatter={(value, name) => (
+                              <div className="flex min-w-[130px] items-center text-xs text-muted-foreground">
+                                 {chartConfig[name as keyof typeof chartConfig]
+                                    ?.label || name}
+                                 <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                    {value}
+                                    <span className="font-normal text-muted-foreground">
+                                       kcal
+                                    </span>
+                                 </div>
+                              </div>
+                           )}
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-tooltip-icons.tsx b/apps/web/__registry__/default/charts/chart-tooltip-icons.tsx
new file mode 100644
index 00000000..b97490e2
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-tooltip-icons.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Footprints, Waves } from "lucide-react"
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+      icon: Footprints,
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+      icon: Waves,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Icons</CardTitle>
+            <CardDescription>Tooltip with icons.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent hideLabel />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-tooltip-indicator-line.tsx b/apps/web/__registry__/default/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000..502c056b
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-tooltip-indicator-line.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+   "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Line Indicator</CardTitle>
+            <CardDescription>Tooltip with line indicator.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent indicator="line" />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-tooltip-indicator-none.tsx b/apps/web/__registry__/default/charts/chart-tooltip-indicator-none.tsx
new file mode 100644
index 00000000..24a88270
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-tooltip-indicator-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - No Indicator</CardTitle>
+            <CardDescription>Tooltip with no indicator.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent hideIndicator />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-tooltip-label-custom.tsx b/apps/web/__registry__/default/charts/chart-tooltip-label-custom.tsx
new file mode 100644
index 00000000..ac311e7e
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-tooltip-label-custom.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   activities: {
+      label: "Activities",
+   },
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Custom label</CardTitle>
+            <CardDescription>
+               Tooltip with custom label from chartConfig.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           labelKey="activities"
+                           indicator="line"
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-tooltip-label-formatter.tsx b/apps/web/__registry__/default/charts/chart-tooltip-label-formatter.tsx
new file mode 100644
index 00000000..191d5a6d
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-tooltip-label-formatter.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Label Formatter</CardTitle>
+            <CardDescription>Tooltip with label formatter.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    day: "numeric",
+                                    month: "long",
+                                    year: "numeric",
+                                 },
+                              )
+                           }}
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/default/charts/chart-tooltip-label-none.tsx b/apps/web/__registry__/default/charts/chart-tooltip-label-none.tsx
new file mode 100644
index 00000000..28618d07
--- /dev/null
+++ b/apps/web/__registry__/default/charts/chart-tooltip-label-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - No Label</CardTitle>
+            <CardDescription>Tooltip with no label.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent hideIndicator hideLabel />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/icons.tsx b/apps/web/__registry__/icons.tsx
index 82d24685..e49e2b01 100644
--- a/apps/web/__registry__/icons.tsx
+++ b/apps/web/__registry__/icons.tsx
@@ -4,264 +4,448 @@
 import * as React from "react"
 
 export const Icons = {
-  "AlertCircle": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.AlertCircle
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.ExclamationTriangleIcon
-  }))),
-},  "ArrowLeft": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.ArrowLeft
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.ArrowLeftIcon
-  }))),
-},  "ArrowRight": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.ArrowRight
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.ArrowRightIcon
-  }))),
-},  "ArrowUpDown": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.ArrowUpDown
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.CaretSortIcon
-  }))),
-},  "BellRing": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.BellRing
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.BellIcon
-  }))),
-},  "Bold": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Bold
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.FontBoldIcon
-  }))),
-},  "Calculator": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Calculator
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.ComponentPlaceholderIcon
-  }))),
-},  "Calendar": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Calendar
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.CalendarIcon
-  }))),
-},  "Check": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Check
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.CheckIcon
-  }))),
-},  "ChevronDown": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.ChevronDown
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.ChevronDownIcon
-  }))),
-},  "ChevronLeft": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.ChevronLeft
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.ChevronLeftIcon
-  }))),
-},  "ChevronRight": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.ChevronRight
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.ChevronRightIcon
-  }))),
-},  "ChevronUp": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.ChevronUp
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.ChevronUpIcon
-  }))),
-},  "ChevronsUpDown": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.ChevronsUpDown
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.CaretSortIcon
-  }))),
-},  "Circle": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Circle
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.DotFilledIcon
-  }))),
-},  "Copy": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Copy
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.CopyIcon
-  }))),
-},  "CreditCard": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.CreditCard
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.ComponentPlaceholderIcon
-  }))),
-},  "GripVertical": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.GripVertical
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.DragHandleDots2Icon
-  }))),
-},  "Italic": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Italic
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.FontItalicIcon
-  }))),
-},  "Loader2": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Loader2
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.ReloadIcon
-  }))),
-},  "Mail": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Mail
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.EnvelopeClosedIcon
-  }))),
-},  "MailOpen": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.MailOpen
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.EnvelopeOpenIcon
-  }))),
-},  "Minus": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Minus
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.MinusIcon
-  }))),
-},  "Moon": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Moon
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.MoonIcon
-  }))),
-},  "MoreHorizontal": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.MoreHorizontal
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.DotsHorizontalIcon
-  }))),
-},  "PanelLeft": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.PanelLeft
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.ViewVerticalIcon
-  }))),
-},  "Plus": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Plus
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.PlusIcon
-  }))),
-},  "Search": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Search
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.MagnifyingGlassIcon
-  }))),
-},  "Send": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Send
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.PaperPlaneIcon
-  }))),
-},  "Settings": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Settings
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.GearIcon
-  }))),
-},  "Slash": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Slash
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.SlashIcon
-  }))),
-},  "Smile": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Smile
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.FaceIcon
-  }))),
-},  "Sun": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Sun
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.SunIcon
-  }))),
-},  "Terminal": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Terminal
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.RocketIcon
-  }))),
-},  "Underline": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.Underline
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.UnderlineIcon
-  }))),
-},  "User": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.User
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.PersonIcon
-  }))),
-},  "X": {
-  lucide: React.lazy(() => import("lucide-react").then(mod => ({
-    default: mod.X
-  }))),
-  radix: React.lazy(() => import("@radix-ui/react-icons").then(mod => ({
-    default: mod.Cross2Icon
-  }))),
-},
+   AlertCircle: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.AlertCircle,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.ExclamationTriangleIcon,
+         })),
+      ),
+   },
+   ArrowLeft: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.ArrowLeft,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.ArrowLeftIcon,
+         })),
+      ),
+   },
+   ArrowRight: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.ArrowRight,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.ArrowRightIcon,
+         })),
+      ),
+   },
+   ArrowUpDown: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.ArrowUpDown,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.CaretSortIcon,
+         })),
+      ),
+   },
+   BellRing: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.BellRing,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.BellIcon,
+         })),
+      ),
+   },
+   Bold: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Bold,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.FontBoldIcon,
+         })),
+      ),
+   },
+   Calculator: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Calculator,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.ComponentPlaceholderIcon,
+         })),
+      ),
+   },
+   Calendar: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Calendar,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.CalendarIcon,
+         })),
+      ),
+   },
+   Check: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Check,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.CheckIcon,
+         })),
+      ),
+   },
+   ChevronDown: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.ChevronDown,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.ChevronDownIcon,
+         })),
+      ),
+   },
+   ChevronLeft: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.ChevronLeft,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.ChevronLeftIcon,
+         })),
+      ),
+   },
+   ChevronRight: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.ChevronRight,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.ChevronRightIcon,
+         })),
+      ),
+   },
+   ChevronUp: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.ChevronUp,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.ChevronUpIcon,
+         })),
+      ),
+   },
+   ChevronsUpDown: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.ChevronsUpDown,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.CaretSortIcon,
+         })),
+      ),
+   },
+   Circle: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Circle,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.DotFilledIcon,
+         })),
+      ),
+   },
+   Copy: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Copy,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.CopyIcon,
+         })),
+      ),
+   },
+   CreditCard: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.CreditCard,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.ComponentPlaceholderIcon,
+         })),
+      ),
+   },
+   GripVertical: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.GripVertical,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.DragHandleDots2Icon,
+         })),
+      ),
+   },
+   Italic: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Italic,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.FontItalicIcon,
+         })),
+      ),
+   },
+   Loader2: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Loader2,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.ReloadIcon,
+         })),
+      ),
+   },
+   Mail: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Mail,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.EnvelopeClosedIcon,
+         })),
+      ),
+   },
+   MailOpen: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.MailOpen,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.EnvelopeOpenIcon,
+         })),
+      ),
+   },
+   Minus: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Minus,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.MinusIcon,
+         })),
+      ),
+   },
+   Moon: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Moon,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.MoonIcon,
+         })),
+      ),
+   },
+   MoreHorizontal: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.MoreHorizontal,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.DotsHorizontalIcon,
+         })),
+      ),
+   },
+   PanelLeft: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.PanelLeft,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.ViewVerticalIcon,
+         })),
+      ),
+   },
+   Plus: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Plus,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.PlusIcon,
+         })),
+      ),
+   },
+   Search: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Search,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.MagnifyingGlassIcon,
+         })),
+      ),
+   },
+   Send: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Send,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.PaperPlaneIcon,
+         })),
+      ),
+   },
+   Settings: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Settings,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.GearIcon,
+         })),
+      ),
+   },
+   Slash: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Slash,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.SlashIcon,
+         })),
+      ),
+   },
+   Smile: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Smile,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.FaceIcon,
+         })),
+      ),
+   },
+   Sun: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Sun,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.SunIcon,
+         })),
+      ),
+   },
+   Terminal: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Terminal,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.RocketIcon,
+         })),
+      ),
+   },
+   Underline: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.Underline,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.UnderlineIcon,
+         })),
+      ),
+   },
+   User: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.User,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.PersonIcon,
+         })),
+      ),
+   },
+   X: {
+      lucide: React.lazy(() =>
+         import("lucide-react").then((mod) => ({
+            default: mod.X,
+         })),
+      ),
+      radix: React.lazy(() =>
+         import("@radix-ui/react-icons").then((mod) => ({
+            default: mod.Cross2Icon,
+         })),
+      ),
+   },
 }
diff --git a/apps/web/__registry__/index.tsx b/apps/web/__registry__/index.tsx
index 3056fc1e..dadab728 100644
--- a/apps/web/__registry__/index.tsx
+++ b/apps/web/__registry__/index.tsx
@@ -4,16895 +4,23570 @@
 import * as React from "react"
 
 export const Index: Record<string, any> = {
-  "miami": {
-    "accordion": {
-      name: "accordion",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/accordion.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/accordion.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "alert": {
-      name: "alert",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/alert.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/alert.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "alert-dialog": {
-      name: "alert-dialog",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/ui/alert-dialog.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/alert-dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-beam": {
-      name: "animated-beam",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/animated-beam.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/animated-beam.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-grid-pattern": {
-      name: "animated-grid-pattern",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/animated-grid-pattern.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/animated-grid-pattern.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-list": {
-      name: "animated-list",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/animated-list.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/animated-list.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-shiny-text": {
-      name: "animated-shiny-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/animated-shiny-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/animated-shiny-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-subscribe-button": {
-      name: "animated-subscribe-button",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/animated-subscribe-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/animated-subscribe-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-gradient-text": {
-      name: "animated-gradient-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/animated-gradient-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/animated-gradient-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "aspect-ratio": {
-      name: "aspect-ratio",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/aspect-ratio.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/aspect-ratio.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "avatar": {
-      name: "avatar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/avatar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/avatar.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "avatar-circles": {
-      name: "avatar-circles",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/avatar-circles.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/avatar-circles.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "badge": {
-      name: "badge",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/badge.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/badge.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "bento-grid": {
-      name: "bento-grid",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/bento-grid.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/bento-grid.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "blur-in": {
-      name: "blur-in",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/blur-in.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/blur-in.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "border-beam": {
-      name: "border-beam",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/border-beam.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/border-beam.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "box-reveal": {
-      name: "box-reveal",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/box-reveal.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/box-reveal.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb": {
-      name: "breadcrumb",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/breadcrumb.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/breadcrumb.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "blur-fade": {
-      name: "blur-fade",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/blur-fade.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/blur-fade.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button": {
-      name: "button",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "calendar": {
-      name: "calendar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/ui/calendar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/calendar.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "card": {
-      name: "card",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/card.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel": {
-      name: "carousel",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/ui/carousel.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/carousel.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "chart": {
-      name: "chart",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["card"],
-      files: [{
-        path: "registry/miami/ui/chart.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/chart.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "checkbox": {
-      name: "checkbox",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/checkbox.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/checkbox.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "client-tweet-card": {
-      name: "client-tweet-card",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/client-tweet-card.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/client-tweet-card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "collapsible": {
-      name: "collapsible",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/collapsible.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/collapsible.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "command": {
-      name: "command",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["dialog"],
-      files: [{
-        path: "registry/miami/ui/command.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/command.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti": {
-      name: "confetti",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/confetti.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/confetti.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "context-menu": {
-      name: "context-menu",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/context-menu.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/context-menu.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "cool-mode": {
-      name: "cool-mode",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/cool-mode.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/cool-mode.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dialog": {
-      name: "dialog",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/dialog.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dock": {
-      name: "dock",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/dock.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/dock.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dot-pattern": {
-      name: "dot-pattern",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/dot-pattern.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/dot-pattern.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "drawer": {
-      name: "drawer",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/drawer.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/drawer.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dropdown-menu": {
-      name: "dropdown-menu",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/dropdown-menu.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/dropdown-menu.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "fade-text": {
-      name: "fade-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/fade-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/fade-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "file-tree": {
-      name: "file-tree",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/file-tree.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/file-tree.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "flip-text": {
-      name: "flip-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/flip-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/flip-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "form": {
-      name: "form",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button","label"],
-      files: [{
-        path: "registry/miami/ui/form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "globe": {
-      name: "globe",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/globe.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/globe.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "gradual-spacing": {
-      name: "gradual-spacing",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/gradual-spacing.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/gradual-spacing.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-pattern": {
-      name: "grid-pattern",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/grid-pattern.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/grid-pattern.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "gauge-circle": {
-      name: "gauge-circle",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/gauge-circle.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/gauge-circle.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hero-video-dialog": {
-      name: "hero-video-dialog",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/hero-video-dialog.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/hero-video-dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hover-card": {
-      name: "hover-card",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/hover-card.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/hover-card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "icon-cloud": {
-      name: "icon-cloud",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/icon-cloud.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/icon-cloud.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input": {
-      name: "input",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/input.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/input.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp": {
-      name: "input-otp",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/input-otp.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/input-otp.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone": {
-      name: "input-phone",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button","input","popover","command"],
-      files: [{
-        path: "registry/miami/ui/input-phone.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/input-phone.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "label": {
-      name: "label",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/label.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/label.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "letter-pullup": {
-      name: "letter-pullup",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/letter-pullup.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/letter-pullup.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "magic-card": {
-      name: "magic-card",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/magic-card.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/magic-card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "marquee": {
-      name: "marquee",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/marquee.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/marquee.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "menubar": {
-      name: "menubar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/menubar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/menubar.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "meteors": {
-      name: "meteors",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/meteors.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/meteors.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select": {
-      name: "multi-select",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/multi-select.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/multi-select.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "navigation-menu": {
-      name: "navigation-menu",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/navigation-menu.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/navigation-menu.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "neon-gradient-card": {
-      name: "neon-gradient-card",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/neon-gradient-card.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/neon-gradient-card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "number-ticker": {
-      name: "number-ticker",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/number-ticker.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/number-ticker.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "orbiting-circles": {
-      name: "orbiting-circles",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/orbiting-circles.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/orbiting-circles.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "pagination": {
-      name: "pagination",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/ui/pagination.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/pagination.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "particles": {
-      name: "particles",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/particles.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/particles.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "popover": {
-      name: "popover",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/popover.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/popover.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "progress": {
-      name: "progress",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/progress.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/progress.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "pulsating-button": {
-      name: "pulsating-button",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/pulsating-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/pulsating-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "radio-group": {
-      name: "radio-group",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/radio-group.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/radio-group.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "resizable": {
-      name: "resizable",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/resizable.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/resizable.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "retro-grid": {
-      name: "retro-grid",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/retro-grid.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/retro-grid.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "ripple": {
-      name: "ripple",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/ripple.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/ripple.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-area": {
-      name: "scroll-area",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/scroll-area.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/scroll-area.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-based-velocity": {
-      name: "scroll-based-velocity",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/scroll-based-velocity.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/scroll-based-velocity.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-progress": {
-      name: "scroll-progress",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/scroll-progress.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/scroll-progress.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "select": {
-      name: "select",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/select.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/select.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "separate-away": {
-      name: "separate-away",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/separate-away.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/separate-away.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "separator": {
-      name: "separator",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/separator.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/separator.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sheet": {
-      name: "sheet",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/sheet.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/sheet.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shimmer-button": {
-      name: "shimmer-button",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/shimmer-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/shimmer-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shine-border": {
-      name: "shine-border",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/shine-border.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/shine-border.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shiny-button": {
-      name: "shiny-button",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/shiny-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/shiny-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sidebar": {
-      name: "sidebar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button","separator","sheet","tooltip","input","use-mobile","skeleton"],
-      files: [{
-        path: "registry/miami/ui/sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/sidebar.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "skeleton": {
-      name: "skeleton",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/skeleton.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/skeleton.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider": {
-      name: "slider",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/slider.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/slider.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sonner": {
-      name: "sonner",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/sonner.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/sonner.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sparkles-text": {
-      name: "sparkles-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/sparkles-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/sparkles-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "star-rating": {
-      name: "star-rating",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/star-rating.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/star-rating.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "switch": {
-      name: "switch",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/switch.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/switch.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper": {
-      name: "stepper",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["collapsible"],
-      files: [{
-        path: "registry/miami/ui/stepper.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/stepper.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scratch-to-reveal": {
-      name: "scratch-to-reveal",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/scratch-to-reveal.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/scratch-to-reveal.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "table": {
-      name: "table",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/table.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/table.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tabs": {
-      name: "tabs",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/tabs.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/tabs.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea": {
-      name: "textarea",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/textarea.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/textarea.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "text-reveal": {
-      name: "text-reveal",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/text-reveal.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/text-reveal.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "timeline": {
-      name: "timeline",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/timeline.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/timeline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toc": {
-      name: "toc",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/toc.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/toc.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toast": {
-      name: "toast",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/toast.tsx",
-        type: "registry:ui",
-        target: ""
-      },{
-        path: "registry/miami/hooks/use-toast.ts",
-        type: "registry:hook",
-        target: ""
-      },{
-        path: "registry/miami/ui/toaster.tsx",
-        type: "registry:ui",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/toast.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle": {
-      name: "toggle",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/toggle.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/toggle.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group": {
-      name: "toggle-group",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["toggle"],
-      files: [{
-        path: "registry/miami/ui/toggle-group.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/toggle-group.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tooltip": {
-      name: "tooltip",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/tooltip.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/tooltip.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tour": {
-      name: "tour",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/tour.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/tour.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "typing-animation": {
-      name: "typing-animation",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/typing-animation.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/typing-animation.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tweet-card": {
-      name: "tweet-card",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/tweet-card.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/tweet-card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "video-modal": {
-      name: "video-modal",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/video-modal.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/video-modal.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "wavy-dot-pattern": {
-      name: "wavy-dot-pattern",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/wavy-dot-pattern.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/wavy-dot-pattern.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "wavy-text": {
-      name: "wavy-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/wavy-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/wavy-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "word-fade-in": {
-      name: "word-fade-in",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/word-fade-in.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/word-fade-in.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "word-pull-up": {
-      name: "word-pull-up",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/word-pull-up.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/word-pull-up.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "word-rotate": {
-      name: "word-rotate",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/word-rotate.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/word-rotate.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "rainbow-button": {
-      name: "rainbow-button",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/rainbow-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/rainbow-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "flickering-grid": {
-      name: "flickering-grid",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/flickering-grid.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/flickering-grid.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hyper-text": {
-      name: "hyper-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/hyper-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/hyper-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "safari": {
-      name: "safari",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/safari.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/safari.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "iphone-15-pro": {
-      name: "iphone-15-pro",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/iphone-15-pro.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/iphone-15-pro.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-circular-progress-bar": {
-      name: "animated-circular-progress-bar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/animated-circular-progress-bar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/animated-circular-progress-bar.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-layout": {
-      name: "grid-layout",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/grid-layout.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/grid-layout.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "globe-grid": {
-      name: "globe-grid",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/ui/globe-grid.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/globe-grid.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "nyx-toc": {
-      name: "nyx-toc",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["popover"],
-      files: [{
-        path: "registry/miami/ui/nyx-toc.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/hooks/use-anchor-observer.ts",
-        type: "registry:hook",
-        target: ""
-      },{
-        path: "registry/miami/hooks/use-on-change.ts",
-        type: "registry:hook",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/ui/nyx-toc.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "accordion-demo": {
-      name: "accordion-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["accordion"],
-      files: [{
-        path: "registry/miami/example/accordion-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/accordion-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "alert-demo": {
-      name: "alert-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["alert"],
-      files: [{
-        path: "registry/miami/example/alert-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/alert-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "alert-destructive": {
-      name: "alert-destructive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["alert"],
-      files: [{
-        path: "registry/miami/example/alert-destructive.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/alert-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "alert-dialog-demo": {
-      name: "alert-dialog-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["alert-dialog","button"],
-      files: [{
-        path: "registry/miami/example/alert-dialog-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/alert-dialog-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "aspect-ratio-demo": {
-      name: "aspect-ratio-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["aspect-ratio"],
-      files: [{
-        path: "registry/miami/example/aspect-ratio-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/aspect-ratio-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "avatar-demo": {
-      name: "avatar-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["avatar"],
-      files: [{
-        path: "registry/miami/example/avatar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/avatar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "badge-demo": {
-      name: "badge-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: [{
-        path: "registry/miami/example/badge-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/badge-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "badge-destructive": {
-      name: "badge-destructive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: [{
-        path: "registry/miami/example/badge-destructive.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/badge-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "badge-outline": {
-      name: "badge-outline",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: [{
-        path: "registry/miami/example/badge-outline.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/badge-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "badge-secondary": {
-      name: "badge-secondary",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: [{
-        path: "registry/miami/example/badge-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/badge-secondary.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb-demo": {
-      name: "breadcrumb-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: [{
-        path: "registry/miami/example/breadcrumb-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/breadcrumb-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb-separator": {
-      name: "breadcrumb-separator",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: [{
-        path: "registry/miami/example/breadcrumb-separator.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/breadcrumb-separator.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb-dropdown": {
-      name: "breadcrumb-dropdown",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: [{
-        path: "registry/miami/example/breadcrumb-dropdown.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/breadcrumb-dropdown.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb-ellipsis": {
-      name: "breadcrumb-ellipsis",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: [{
-        path: "registry/miami/example/breadcrumb-ellipsis.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/breadcrumb-ellipsis.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb-link": {
-      name: "breadcrumb-link",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: [{
-        path: "registry/miami/example/breadcrumb-link.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/breadcrumb-link.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb-responsive": {
-      name: "breadcrumb-responsive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: [{
-        path: "registry/miami/example/breadcrumb-responsive.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/breadcrumb-responsive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-demo": {
-      name: "button-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/example/button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-secondary": {
-      name: "button-secondary",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/example/button-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/button-secondary.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-destructive": {
-      name: "button-destructive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/example/button-destructive.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/button-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-outline": {
-      name: "button-outline",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/example/button-outline.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/button-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-ghost": {
-      name: "button-ghost",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/example/button-ghost.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/button-ghost.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-link": {
-      name: "button-link",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/example/button-link.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/button-link.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-with-icon": {
-      name: "button-with-icon",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/example/button-with-icon.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/button-with-icon.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-loading": {
-      name: "button-loading",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/example/button-loading.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/button-loading.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-icon": {
-      name: "button-icon",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/example/button-icon.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/button-icon.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-as-child": {
-      name: "button-as-child",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/miami/example/button-as-child.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/button-as-child.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "pulsating-button-demo": {
-      name: "pulsating-button-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/pulsating-button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/pulsating-button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "calendar-demo": {
-      name: "calendar-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["calendar"],
-      files: [{
-        path: "registry/miami/example/calendar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/calendar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "calendar-form": {
-      name: "calendar-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["calendar","form","popover"],
-      files: [{
-        path: "registry/miami/example/calendar-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/calendar-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "card-demo": {
-      name: "card-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["card","button","switch"],
-      files: [{
-        path: "registry/miami/example/card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "card-with-form": {
-      name: "card-with-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","card","input","label","select"],
-      files: [{
-        path: "registry/miami/example/card-with-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/card-with-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-demo": {
-      name: "carousel-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/miami/example/carousel-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/carousel-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-size": {
-      name: "carousel-size",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/miami/example/carousel-size.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/carousel-size.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-spacing": {
-      name: "carousel-spacing",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/miami/example/carousel-spacing.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/carousel-spacing.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-orientation": {
-      name: "carousel-orientation",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/miami/example/carousel-orientation.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/carousel-orientation.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-dots": {
-      name: "carousel-dots",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/miami/example/carousel-dots.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/carousel-dots.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-api": {
-      name: "carousel-api",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/miami/example/carousel-api.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/carousel-api.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-plugin": {
-      name: "carousel-plugin",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/miami/example/carousel-plugin.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/carousel-plugin.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "checkbox-demo": {
-      name: "checkbox-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: [{
-        path: "registry/miami/example/checkbox-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/checkbox-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "checkbox-disabled": {
-      name: "checkbox-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: [{
-        path: "registry/miami/example/checkbox-disabled.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/checkbox-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "checkbox-form-multiple": {
-      name: "checkbox-form-multiple",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox","form"],
-      files: [{
-        path: "registry/miami/example/checkbox-form-multiple.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/checkbox-form-multiple.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "checkbox-form-single": {
-      name: "checkbox-form-single",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox","form"],
-      files: [{
-        path: "registry/miami/example/checkbox-form-single.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/checkbox-form-single.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "checkbox-with-text": {
-      name: "checkbox-with-text",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: [{
-        path: "registry/miami/example/checkbox-with-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/checkbox-with-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "collapsible-demo": {
-      name: "collapsible-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["collapsible"],
-      files: [{
-        path: "registry/miami/example/collapsible-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/collapsible-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "combobox-demo": {
-      name: "combobox-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["command"],
-      files: [{
-        path: "registry/miami/example/combobox-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/combobox-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "combobox-dropdown-menu": {
-      name: "combobox-dropdown-menu",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["command","dropdown-menu","button"],
-      files: [{
-        path: "registry/miami/example/combobox-dropdown-menu.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/combobox-dropdown-menu.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "combobox-form": {
-      name: "combobox-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["command","form"],
-      files: [{
-        path: "registry/miami/example/combobox-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/combobox-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "combobox-popover": {
-      name: "combobox-popover",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["combobox","popover"],
-      files: [{
-        path: "registry/miami/example/combobox-popover.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/combobox-popover.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "combobox-responsive": {
-      name: "combobox-responsive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["combobox","popover","drawer"],
-      files: [{
-        path: "registry/miami/example/combobox-responsive.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/combobox-responsive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "command-demo": {
-      name: "command-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["command"],
-      files: [{
-        path: "registry/miami/example/command-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/command-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "command-dialog": {
-      name: "command-dialog",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["command","dialog"],
-      files: [{
-        path: "registry/miami/example/command-dialog.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/command-dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "context-menu-demo": {
-      name: "context-menu-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["context-menu"],
-      files: [{
-        path: "registry/miami/example/context-menu-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/context-menu-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "data-table-demo": {
-      name: "data-table-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["data-table"],
-      files: [{
-        path: "registry/miami/example/data-table-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/data-table-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "date-picker-demo": {
-      name: "date-picker-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover"],
-      files: [{
-        path: "registry/miami/example/date-picker-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/date-picker-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "date-picker-form": {
-      name: "date-picker-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover"],
-      files: [{
-        path: "registry/miami/example/date-picker-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/date-picker-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "date-picker-with-presets": {
-      name: "date-picker-with-presets",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover","select"],
-      files: [{
-        path: "registry/miami/example/date-picker-with-presets.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/date-picker-with-presets.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "date-picker-with-range": {
-      name: "date-picker-with-range",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover"],
-      files: [{
-        path: "registry/miami/example/date-picker-with-range.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/date-picker-with-range.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dialog-demo": {
-      name: "dialog-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["dialog"],
-      files: [{
-        path: "registry/miami/example/dialog-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/dialog-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dialog-close-button": {
-      name: "dialog-close-button",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["dialog","button"],
-      files: [{
-        path: "registry/miami/example/dialog-close-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/dialog-close-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "drawer-demo": {
-      name: "drawer-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["drawer"],
-      files: [{
-        path: "registry/miami/example/drawer-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/drawer-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "drawer-dialog": {
-      name: "drawer-dialog",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["drawer","dialog"],
-      files: [{
-        path: "registry/miami/example/drawer-dialog.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/drawer-dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dropdown-menu-demo": {
-      name: "dropdown-menu-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu"],
-      files: [{
-        path: "registry/miami/example/dropdown-menu-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/dropdown-menu-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dropdown-menu-checkboxes": {
-      name: "dropdown-menu-checkboxes",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu","checkbox"],
-      files: [{
-        path: "registry/miami/example/dropdown-menu-checkboxes.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/dropdown-menu-checkboxes.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dropdown-menu-radio-group": {
-      name: "dropdown-menu-radio-group",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu","radio-group"],
-      files: [{
-        path: "registry/miami/example/dropdown-menu-radio-group.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/dropdown-menu-radio-group.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hover-card-demo": {
-      name: "hover-card-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["hover-card"],
-      files: [{
-        path: "registry/miami/example/hover-card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/hover-card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-demo": {
-      name: "input-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: [{
-        path: "registry/miami/example/input-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-disabled": {
-      name: "input-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: [{
-        path: "registry/miami/example/input-disabled.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-file": {
-      name: "input-file",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: [{
-        path: "registry/miami/example/input-file.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-file.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-form": {
-      name: "input-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button","form"],
-      files: [{
-        path: "registry/miami/example/input-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-with-button": {
-      name: "input-with-button",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button"],
-      files: [{
-        path: "registry/miami/example/input-with-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-with-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-with-label": {
-      name: "input-with-label",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button","label"],
-      files: [{
-        path: "registry/miami/example/input-with-label.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-with-label.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-with-text": {
-      name: "input-with-text",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button","label"],
-      files: [{
-        path: "registry/miami/example/input-with-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-with-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp-demo": {
-      name: "input-otp-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: [{
-        path: "registry/miami/example/input-otp-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-otp-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp-pattern": {
-      name: "input-otp-pattern",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: [{
-        path: "registry/miami/example/input-otp-pattern.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-otp-pattern.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp-separator": {
-      name: "input-otp-separator",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: [{
-        path: "registry/miami/example/input-otp-separator.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-otp-separator.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp-controlled": {
-      name: "input-otp-controlled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: [{
-        path: "registry/miami/example/input-otp-controlled.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-otp-controlled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp-form": {
-      name: "input-otp-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp","form"],
-      files: [{
-        path: "registry/miami/example/input-otp-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-otp-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp-disabled": {
-      name: "input-otp-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp","form"],
-      files: [{
-        path: "registry/miami/example/input-otp-disabled.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-otp-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone-default": {
-      name: "input-phone-default",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","input","popover"],
-      files: [{
-        path: "registry/miami/example/input-phone-default.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-phone-default.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone-demo": {
-      name: "input-phone-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","input","popover"],
-      files: [{
-        path: "registry/miami/example/input-phone-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-phone-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone-form": {
-      name: "input-phone-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","input","popover"],
-      files: [{
-        path: "registry/miami/example/input-phone-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-phone-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone-initial": {
-      name: "input-phone-initial",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","input","popover"],
-      files: [{
-        path: "registry/miami/example/input-phone-initial.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-phone-initial.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone-international": {
-      name: "input-phone-international",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","input","popover"],
-      files: [{
-        path: "registry/miami/example/input-phone-international.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-phone-international.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone-national": {
-      name: "input-phone-national",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","input","popover"],
-      files: [{
-        path: "registry/miami/example/input-phone-national.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/input-phone-national.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "label-demo": {
-      name: "label-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["label"],
-      files: [{
-        path: "registry/miami/example/label-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/label-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "menubar-demo": {
-      name: "menubar-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["menubar"],
-      files: [{
-        path: "registry/miami/example/menubar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/menubar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "navigation-menu-demo": {
-      name: "navigation-menu-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["navigation-menu"],
-      files: [{
-        path: "registry/miami/example/navigation-menu-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/navigation-menu-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "pagination-demo": {
-      name: "pagination-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["pagination"],
-      files: [{
-        path: "registry/miami/example/pagination-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/pagination-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "popover-demo": {
-      name: "popover-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["popover"],
-      files: [{
-        path: "registry/miami/example/popover-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/popover-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "progress-demo": {
-      name: "progress-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["progress"],
-      files: [{
-        path: "registry/miami/example/progress-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/progress-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "radio-group-demo": {
-      name: "radio-group-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["radio-group"],
-      files: [{
-        path: "registry/miami/example/radio-group-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/radio-group-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "radio-group-form": {
-      name: "radio-group-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["radio-group","form"],
-      files: [{
-        path: "registry/miami/example/radio-group-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/radio-group-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "resizable-demo": {
-      name: "resizable-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: [{
-        path: "registry/miami/example/resizable-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/resizable-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "resizable-demo-with-handle": {
-      name: "resizable-demo-with-handle",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: [{
-        path: "registry/miami/example/resizable-demo-with-handle.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/resizable-demo-with-handle.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "resizable-vertical": {
-      name: "resizable-vertical",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: [{
-        path: "registry/miami/example/resizable-vertical.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/resizable-vertical.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "resizable-handle": {
-      name: "resizable-handle",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: [{
-        path: "registry/miami/example/resizable-handle.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/resizable-handle.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-area-demo": {
-      name: "scroll-area-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["scroll-area"],
-      files: [{
-        path: "registry/miami/example/scroll-area-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/scroll-area-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-area-horizontal-demo": {
-      name: "scroll-area-horizontal-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["scroll-area"],
-      files: [{
-        path: "registry/miami/example/scroll-area-horizontal-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/scroll-area-horizontal-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "magic-card-demo": {
-      name: "magic-card-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/magic-card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/magic-card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "neon-gradient-card-demo": {
-      name: "neon-gradient-card-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/neon-gradient-card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/neon-gradient-card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "magic-card-gradient": {
-      name: "magic-card-gradient",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/magic-card-gradient.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/magic-card-gradient.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "meteors-demo": {
-      name: "meteors-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/meteors-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/meteors-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-pattern-demo": {
-      name: "grid-pattern-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/grid-pattern-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/grid-pattern-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-pattern-linear-gradient": {
-      name: "grid-pattern-linear-gradient",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/grid-pattern-linear-gradient.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/grid-pattern-linear-gradient.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-pattern-dashed": {
-      name: "grid-pattern-dashed",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/grid-pattern-dashed.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/grid-pattern-dashed.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dot-pattern-demo": {
-      name: "dot-pattern-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/dot-pattern-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/dot-pattern-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dot-pattern-linear-gradient": {
-      name: "dot-pattern-linear-gradient",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/dot-pattern-linear-gradient.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/dot-pattern-linear-gradient.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "marquee-demo": {
-      name: "marquee-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/marquee-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/marquee-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "marquee-demo-vertical": {
-      name: "marquee-demo-vertical",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/marquee-demo-vertical.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/marquee-demo-vertical.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "marquee-logos": {
-      name: "marquee-logos",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/marquee-logos.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/marquee-logos.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "marquee-3d": {
-      name: "marquee-3d",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/marquee-3d.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/marquee-3d.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "globe-demo": {
-      name: "globe-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/globe-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/globe-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tweet-card-demo": {
-      name: "tweet-card-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/tweet-card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/tweet-card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tweet-card-images": {
-      name: "tweet-card-images",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/tweet-card-images.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/tweet-card-images.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tweet-card-meta-preview": {
-      name: "tweet-card-meta-preview",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/tweet-card-meta-preview.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/tweet-card-meta-preview.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shimmer-button-demo": {
-      name: "shimmer-button-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/shimmer-button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/shimmer-button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hero-video-demo": {
-      name: "hero-video-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/hero-video-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/hero-video-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hero-video-youtube": {
-      name: "hero-video-youtube",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/hero-video-youtube.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/hero-video-youtube.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "bento-demo": {
-      name: "bento-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/bento-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/bento-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "bento-demo-vertical": {
-      name: "bento-demo-vertical",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/bento-demo-vertical.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/bento-demo-vertical.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "number-ticker-demo": {
-      name: "number-ticker-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/number-ticker-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/number-ticker-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "ripple-demo": {
-      name: "ripple-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/ripple-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/ripple-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "retro-grid-demo": {
-      name: "retro-grid-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/retro-grid-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/retro-grid-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-list-demo": {
-      name: "animated-list-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-list-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-list-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-shiny-text-demo": {
-      name: "animated-shiny-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-shiny-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-shiny-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "particles-demo": {
-      name: "particles-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/particles-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/particles-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-grid-pattern-demo": {
-      name: "animated-grid-pattern-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-grid-pattern-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-grid-pattern-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "border-beam-demo": {
-      name: "border-beam-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/border-beam-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/border-beam-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-beam-demo": {
-      name: "animated-beam-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-beam-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-beam-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-beam-unidirectional": {
-      name: "animated-beam-unidirectional",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-beam-unidirectional.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-beam-unidirectional.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-beam-bidirectional": {
-      name: "animated-beam-bidirectional",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-beam-bidirectional.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-beam-bidirectional.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-beam-multiple-inputs": {
-      name: "animated-beam-multiple-inputs",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-beam-multiple-inputs.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-beam-multiple-inputs.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-beam-multiple-outputs": {
-      name: "animated-beam-multiple-outputs",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-beam-multiple-outputs.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-beam-multiple-outputs.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-1": {
-      name: "animated-feature-card-1",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-feature-card-1.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-feature-card-1.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-2": {
-      name: "animated-feature-card-2",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-feature-card-2.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-feature-card-2.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-3": {
-      name: "animated-feature-card-3",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-feature-card-3.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-feature-card-3.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-4": {
-      name: "animated-feature-card-4",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-feature-card-4.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-feature-card-4.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-5": {
-      name: "animated-feature-card-5",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-feature-card-5.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-feature-card-5.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-6": {
-      name: "animated-feature-card-6",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-feature-card-6.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-feature-card-6.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-7": {
-      name: "animated-feature-card-7",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-feature-card-7.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-feature-card-7.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-8": {
-      name: "animated-feature-card-8",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-feature-card-8.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-feature-card-8.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-9": {
-      name: "animated-feature-card-9",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-feature-card-9.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-feature-card-9.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-10": {
-      name: "animated-feature-card-10",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-feature-card-10.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-feature-card-10.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "text-reveal-demo": {
-      name: "text-reveal-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/text-reveal-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/text-reveal-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-gradient-text-demo": {
-      name: "animated-gradient-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-gradient-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-gradient-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "orbiting-circles-demo": {
-      name: "orbiting-circles-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/orbiting-circles-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/orbiting-circles-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dock-demo": {
-      name: "dock-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/dock-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/dock-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dock-demo-2": {
-      name: "dock-demo-2",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/dock-demo-2.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/dock-demo-2.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dock-demo-3": {
-      name: "dock-demo-3",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/dock-demo-3.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/dock-demo-3.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "word-rotate-demo": {
-      name: "word-rotate-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/word-rotate-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/word-rotate-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "avatar-circles-demo": {
-      name: "avatar-circles-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/avatar-circles-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/avatar-circles-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "word-pull-up-demo": {
-      name: "word-pull-up-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/word-pull-up-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/word-pull-up-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "typing-animation-demo": {
-      name: "typing-animation-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/typing-animation-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/typing-animation-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "wavy-text-demo": {
-      name: "wavy-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/wavy-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/wavy-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "blur-in-demo": {
-      name: "blur-in-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/blur-in-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/blur-in-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "separate-away-demo": {
-      name: "separate-away-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/separate-away-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/separate-away-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-based-velocity-demo": {
-      name: "scroll-based-velocity-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/scroll-based-velocity-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/scroll-based-velocity-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "letter-pullup-demo": {
-      name: "letter-pullup-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/letter-pullup-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/letter-pullup-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "flip-text-demo": {
-      name: "flip-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/flip-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/flip-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sparkles-text-demo": {
-      name: "sparkles-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/sparkles-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/sparkles-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "icon-cloud-demo": {
-      name: "icon-cloud-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/icon-cloud-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/icon-cloud-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "wavy-dot-pattern-demo": {
-      name: "wavy-dot-pattern-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/wavy-dot-pattern-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/wavy-dot-pattern-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "gradual-spacing-demo": {
-      name: "gradual-spacing-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/gradual-spacing-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/gradual-spacing-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "word-fade-in-demo": {
-      name: "word-fade-in-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/word-fade-in-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/word-fade-in-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "fade-text-demo": {
-      name: "fade-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/fade-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/fade-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shiny-button-demo": {
-      name: "shiny-button-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/shiny-button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/shiny-button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "box-reveal-demo": {
-      name: "box-reveal-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/box-reveal-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/box-reveal-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "gauge-circle-demo": {
-      name: "gauge-circle-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/gauge-circle-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/gauge-circle-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shine-border-demo": {
-      name: "shine-border-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/shine-border-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/shine-border-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shine-border-demo-2": {
-      name: "shine-border-demo-2",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/shine-border-demo-2.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/shine-border-demo-2.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-hover": {
-      name: "confetti-hover",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/confetti-hover.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/confetti-hover.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-basic-cannon": {
-      name: "confetti-basic-cannon",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/confetti-basic-cannon.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/confetti-basic-cannon.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-random-direction": {
-      name: "confetti-random-direction",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/confetti-random-direction.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/confetti-random-direction.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-fireworks": {
-      name: "confetti-fireworks",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/confetti-fireworks.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/confetti-fireworks.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-stars": {
-      name: "confetti-stars",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/confetti-stars.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/confetti-stars.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-side-cannons": {
-      name: "confetti-side-cannons",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/confetti-side-cannons.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/confetti-side-cannons.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-custom-shapes": {
-      name: "confetti-custom-shapes",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/confetti-custom-shapes.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/confetti-custom-shapes.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-emoji": {
-      name: "confetti-emoji",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/confetti-emoji.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/confetti-emoji.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-subscribe-button-demo": {
-      name: "animated-subscribe-button-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-subscribe-button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-subscribe-button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "mode-toggle": {
-      name: "mode-toggle",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/mode-toggle.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/mode-toggle.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "mode-toggle-group": {
-      name: "mode-toggle-group",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/mode-toggle.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/mode-toggle.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "cool-mode-demo": {
-      name: "cool-mode-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/cool-mode-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/cool-mode-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "cool-mode-custom": {
-      name: "cool-mode-custom",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/cool-mode-custom.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/cool-mode-custom.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "timeline-demo": {
-      name: "timeline-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["timeline"],
-      files: [{
-        path: "registry/miami/example/timeline-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/timeline-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "timeline-right": {
-      name: "timeline-right",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["timeline"],
-      files: [{
-        path: "registry/miami/example/timeline-right.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/timeline-right.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "timeline-alternate": {
-      name: "timeline-alternate",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["timeline"],
-      files: [{
-        path: "registry/miami/example/timeline-alternate.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/timeline-alternate.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "timeline-labels": {
-      name: "timeline-labels",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["timeline"],
-      files: [{
-        path: "registry/miami/example/timeline-labels.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/timeline-labels.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "star-rating-demo": {
-      name: "star-rating-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/star-rating-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/star-rating-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "star-rating-colored": {
-      name: "star-rating-colored",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/star-rating-colored.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/star-rating-colored.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "star-rating-icon": {
-      name: "star-rating-icon",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/star-rating-icon.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/star-rating-icon.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-demo": {
-      name: "stepper-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-custom-styles": {
-      name: "stepper-custom-styles",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-custom-styles.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-custom-styles.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-orientation": {
-      name: "stepper-orientation",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-orientation.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-orientation.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-description": {
-      name: "stepper-description",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-description.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-description.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-sizes": {
-      name: "stepper-sizes",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-sizes.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-sizes.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-form": {
-      name: "stepper-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-variants": {
-      name: "stepper-variants",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-variants.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-variants.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-custom-icons": {
-      name: "stepper-custom-icons",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-custom-icons.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-custom-icons.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-footer-inside": {
-      name: "stepper-footer-inside",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-footer-inside.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-footer-inside.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-scroll-tracking": {
-      name: "stepper-scroll-tracking",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-scroll-tracking.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-scroll-tracking.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-clickable-steps": {
-      name: "stepper-clickable-steps",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-clickable-steps.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-clickable-steps.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-optional-steps": {
-      name: "stepper-optional-steps",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-optional-steps.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-optional-steps.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-state": {
-      name: "stepper-state",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/miami/example/stepper-state.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/stepper-state.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tour-demo": {
-      name: "tour-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/tour-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/tour-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toc-demo": {
-      name: "toc-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toc-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toc-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toc-nested": {
-      name: "toc-nested",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toc-nested.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toc-nested.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toc-active": {
-      name: "toc-active",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toc-active.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toc-active.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-basic": {
-      name: "multi-select-basic",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/miami/example/multi-select-basic.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/multi-select-basic.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-filter": {
-      name: "multi-select-filter",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/miami/example/multi-select-filter.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/multi-select-filter.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-controllable-search": {
-      name: "multi-select-controllable-search",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/miami/example/multi-select-controllable-search.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/multi-select-controllable-search.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-input-custom": {
-      name: "multi-select-input-custom",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/miami/example/multi-select-input-custom.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/multi-select-input-custom.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-limit-count": {
-      name: "multi-select-limit-count",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/miami/example/multi-select-limit-count.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/multi-select-limit-count.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-limit-display-length": {
-      name: "multi-select-limit-display-length",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/miami/example/multi-select-limit-display-length.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/multi-select-limit-display-length.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-form": {
-      name: "multi-select-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/miami/example/multi-select-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/multi-select-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-progress-demo": {
-      name: "scroll-progress-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/scroll-progress-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/scroll-progress-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "video-modal-demo": {
-      name: "video-modal-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/video-modal-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/video-modal-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scratch-to-reveal-demo": {
-      name: "scratch-to-reveal-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/scratch-to-reveal-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/scratch-to-reveal-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-demo": {
-      name: "confetti-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/confetti-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/confetti-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "blur-fade-demo": {
-      name: "blur-fade-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/blur-fade-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/blur-fade-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "blur-fade-text-demo": {
-      name: "blur-fade-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/blur-fade-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/blur-fade-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "file-tree-demo": {
-      name: "file-tree-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/file-tree-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/file-tree-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "rainbow-button-demo": {
-      name: "rainbow-button-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/rainbow-button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/rainbow-button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hero-video-dialog-demo": {
-      name: "hero-video-dialog-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/hero-video-dialog-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/hero-video-dialog-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hero-video-dialog-demo-top-in-bottom-out": {
-      name: "hero-video-dialog-demo-top-in-bottom-out",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/hero-video-dialog-demo-top-in-bottom-out.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/hero-video-dialog-demo-top-in-bottom-out.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "flickering-grid-demo": {
-      name: "flickering-grid-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/flickering-grid-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/flickering-grid-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "flickering-grid-rounded-demo": {
-      name: "flickering-grid-rounded-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/flickering-grid-rounded-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/flickering-grid-rounded-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hyper-text-demo": {
-      name: "hyper-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/hyper-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/hyper-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "safari-demo": {
-      name: "safari-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/safari-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/safari-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "safari-demo-2": {
-      name: "safari-demo-2",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/safari-demo-2.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/safari-demo-2.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "iphone-15-pro-demo": {
-      name: "iphone-15-pro-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/iphone-15-pro-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/iphone-15-pro-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "iphone-15-pro-demo-2": {
-      name: "iphone-15-pro-demo-2",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/iphone-15-pro-demo-2.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/iphone-15-pro-demo-2.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-circular-progress-bar-demo": {
-      name: "animated-circular-progress-bar-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/animated-circular-progress-bar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/animated-circular-progress-bar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toast-demo": {
-      name: "toast-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["toast"],
-      files: [{
-        path: "registry/miami/example/toast-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toast-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toast-destructive": {
-      name: "toast-destructive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["toast"],
-      files: [{
-        path: "registry/miami/example/toast-destructive.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toast-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toast-simple": {
-      name: "toast-simple",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["toast"],
-      files: [{
-        path: "registry/miami/example/toast-simple.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toast-simple.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toast-with-action": {
-      name: "toast-with-action",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["toast"],
-      files: [{
-        path: "registry/miami/example/toast-with-action.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toast-with-action.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toast-with-title": {
-      name: "toast-with-title",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["toast"],
-      files: [{
-        path: "registry/miami/example/toast-with-title.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toast-with-title.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sonner-demo": {
-      name: "sonner-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["sonner"],
-      files: [{
-        path: "registry/miami/example/sonner-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/sonner-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "select-demo": {
-      name: "select-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["select"],
-      files: [{
-        path: "registry/miami/example/select-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/select-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "select-scrollable": {
-      name: "select-scrollable",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["select"],
-      files: [{
-        path: "registry/miami/example/select-scrollable.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/select-scrollable.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "select-form": {
-      name: "select-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["select"],
-      files: [{
-        path: "registry/miami/example/select-form.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/select-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "separator-demo": {
-      name: "separator-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/separator-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/separator-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sheet-demo": {
-      name: "sheet-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/sheet-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/sheet-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sheet-side": {
-      name: "sheet-side",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/sheet-side.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/sheet-side.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "skeleton-demo": {
-      name: "skeleton-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/skeleton-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/skeleton-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "skeleton-card": {
-      name: "skeleton-card",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/skeleton-card.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/skeleton-card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-demo": {
-      name: "slider-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/slider-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/slider-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-disabled": {
-      name: "slider-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/slider-disabled.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/slider-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-inverted": {
-      name: "slider-inverted",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/slider-inverted.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/slider-inverted.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-vertical": {
-      name: "slider-vertical",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/slider-vertical.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/slider-vertical.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-range": {
-      name: "slider-range",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/slider-range.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/slider-range.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-tick-marks-half": {
-      name: "slider-tick-marks-half",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/slider-tick-marks-half.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/slider-tick-marks-half.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-tick-marks-full": {
-      name: "slider-tick-marks-full",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/slider-tick-marks-full.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/slider-tick-marks-full.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-format-label": {
-      name: "slider-format-label",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/slider-format-label.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/slider-format-label.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-format-label-side": {
-      name: "slider-format-label-side",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/slider-format-label-side.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/slider-format-label-side.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "switch-demo": {
-      name: "switch-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/switch-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/switch-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "switch-form": {
-      name: "switch-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/switch-form.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/switch-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "table-demo": {
-      name: "table-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/table-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/table-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tabs-demo": {
-      name: "tabs-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/tabs-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/tabs-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea-demo": {
-      name: "textarea-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/textarea-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/textarea-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea-disabled": {
-      name: "textarea-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/textarea-disabled.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/textarea-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea-with-label": {
-      name: "textarea-with-label",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/textarea-with-label.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/textarea-with-label.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea-with-text": {
-      name: "textarea-with-text",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/textarea-with-text.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/textarea-with-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea-with-button": {
-      name: "textarea-with-button",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/textarea-with-button.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/textarea-with-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea-form": {
-      name: "textarea-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/textarea-form.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/textarea-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-demo": {
-      name: "toggle-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toggle-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toggle-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-outline": {
-      name: "toggle-outline",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toggle-outline.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toggle-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-with-text": {
-      name: "toggle-with-text",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toggle-with-text.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toggle-with-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-sm": {
-      name: "toggle-sm",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toggle-sm.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toggle-sm.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-lg": {
-      name: "toggle-lg",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toggle-lg.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toggle-lg.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-disabled": {
-      name: "toggle-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toggle-disabled.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toggle-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group-demo": {
-      name: "toggle-group-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toggle-group-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toggle-group-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group-outline": {
-      name: "toggle-group-outline",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toggle-group-outline.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toggle-group-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group-single": {
-      name: "toggle-group-single",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toggle-group-single.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toggle-group-single.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group-sm": {
-      name: "toggle-group-sm",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toggle-group-sm.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toggle-group-sm.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group-lg": {
-      name: "toggle-group-lg",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toggle-group-lg.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toggle-group-lg.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group-disabled": {
-      name: "toggle-group-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/toggle-group-disabled.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/toggle-group-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tooltip-demo": {
-      name: "tooltip-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/tooltip-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/tooltip-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tooltip-secondary": {
-      name: "tooltip-secondary",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/tooltip-secondary.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/tooltip-secondary.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tooltip-outline": {
-      name: "tooltip-outline",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/tooltip-outline.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/tooltip-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tooltip-with-toggle-demo": {
-      name: "tooltip-with-toggle-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/tooltip-with-toggle-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/tooltip-with-toggle-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-layout-demo": {
-      name: "grid-layout-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/grid-layout-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/grid-layout-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-layout-crosshairs-demo": {
-      name: "grid-layout-crosshairs-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/grid-layout-crosshairs-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/grid-layout-crosshairs-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-layout-columns-demo": {
-      name: "grid-layout-columns-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/grid-layout-columns-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/grid-layout-columns-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-layout-variants-demo": {
-      name: "grid-layout-variants-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["grid-layout"],
-      files: [{
-        path: "registry/miami/example/grid-layout-variants-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/grid-layout-variants-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "globe-grid-demo": {
-      name: "globe-grid-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/globe-grid-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/globe-grid-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "globe-grid-full-demo": {
-      name: "globe-grid-full-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/globe-grid-full-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/globe-grid-full-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "nyx-toc-demo": {
-      name: "nyx-toc-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/nyx-toc-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/nyx-toc-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "nyx-toc-popover-demo": {
-      name: "nyx-toc-popover-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/example/nyx-toc-popover-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/example/nyx-toc-popover-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "_sink": {
-      name: "_sink",
-      description: "",
-      type: "registry:block",
-      registryDependencies: ["accordion","alert","alert-dialog","aspect-ratio","avatar","badge","breadcrumb","button","calendar","card","carousel","chart","checkbox","collapsible","command","context-menu","dialog","drawer","dropdown-menu","hover-card","input","input-otp","label","menubar","navigation-menu","pagination","popover","progress","radio-group","resizable","scroll-area","select","separator","sheet","sidebar","skeleton","slider","sonner","switch","table","tabs","textarea","toast","toggle","toggle-group","tooltip"],
-      files: [{
-        path: "registry/miami/block/_sink/page.tsx",
-        type: "registry:page",
-        target: "app/sink/page.tsx"
-      },{
-        path: "registry/miami/block/_sink/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/component-wrapper.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/nav-main.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/nav-projects.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/nav-user.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/team-switcher.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/accordion-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/alert-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/alert-dialog-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/aspect-ratio-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/avatar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/badge-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/breadcrumb-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/calendar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/carousel-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/checkbox-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/collapsible-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/combobox-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/command-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/context-menu-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/date-picker-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/dialog-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/drawer-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/dropdown-menu-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/hover-card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/input-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/input-otp-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/label-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/menubar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/navigation-menu-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/pagination-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/popover-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/progress-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/radio-group-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/resizable-handle.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/scroll-area-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/select-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/separator-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/sheet-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/skeleton-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/slider-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/sonner-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/switch-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/table-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/tabs-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/textarea-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/toast-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/toggle-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/toggle-group-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/tooltip-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/badge-destructive.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/badge-outline.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/badge-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/button-destructive.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/button-ghost.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/button-link.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/button-loading.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/button-outline.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/button-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/button-with-icon.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/toggle-disabled.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/toggle-outline.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/_sink/components/toggle-with-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/_sink/page.tsx")),
-      source: "__registry__/miami/block/_sink/page.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sidebar-01": {
-      name: "sidebar-01",
-      description: "A simple sidebar with navigation grouped by section.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
-      files: [{
-        path: "registry/miami/block/sidebar-01/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-01/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-01/components/search-form.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-01/components/version-switcher.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-01/page.tsx")),
-      source: "__registry__/miami/block/sidebar-01/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-02": {
-      name: "sidebar-02",
-      description: "A sidebar with collapsible sections.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
-      files: [{
-        path: "registry/miami/block/sidebar-02/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-02/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-02/components/search-form.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-02/components/version-switcher.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-02/page.tsx")),
-      source: "__registry__/miami/block/sidebar-02/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-03": {
-      name: "sidebar-03",
-      description: "A sidebar with submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb"],
-      files: [{
-        path: "registry/miami/block/sidebar-03/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-03/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-03/page.tsx")),
-      source: "__registry__/miami/block/sidebar-03/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-04": {
-      name: "sidebar-04",
-      description: "A floating sidebar with submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator"],
-      files: [{
-        path: "registry/miami/block/sidebar-04/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-04/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-04/page.tsx")),
-      source: "__registry__/miami/block/sidebar-04/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-05": {
-      name: "sidebar-05",
-      description: "A sidebar with collapsible submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","collapsible"],
-      files: [{
-        path: "registry/miami/block/sidebar-05/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-05/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-05/components/search-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-05/page.tsx")),
-      source: "__registry__/miami/block/sidebar-05/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-06": {
-      name: "sidebar-06",
-      description: "A sidebar with submenus as dropdowns.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","card","dropdown-menu"],
-      files: [{
-        path: "registry/miami/block/sidebar-06/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-06/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-06/components/nav-main.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-06/components/sidebar-opt-in-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-06/page.tsx")),
-      source: "__registry__/miami/block/sidebar-06/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-07": {
-      name: "sidebar-07",
-      description: "A sidebar that collapses to icons.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
-      files: [{
-        path: "registry/miami/block/sidebar-07/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-07/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-07/components/nav-main.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-07/components/nav-projects.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-07/components/nav-user.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-07/components/team-switcher.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-07/page.tsx")),
-      source: "__registry__/miami/block/sidebar-07/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-08": {
-      name: "sidebar-08",
-      description: "An inset sidebar with secondary navigation.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
-      files: [{
-        path: "registry/miami/block/sidebar-08/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-08/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-08/components/nav-main.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-08/components/nav-projects.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-08/components/nav-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-08/components/nav-user.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-08/page.tsx")),
-      source: "__registry__/miami/block/sidebar-08/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-09": {
-      name: "sidebar-09",
-      description: "Collapsible nested sidebars.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","switch"],
-      files: [{
-        path: "registry/miami/block/sidebar-09/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-09/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-09/components/nav-user.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-09/page.tsx")),
-      source: "__registry__/miami/block/sidebar-09/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-10": {
-      name: "sidebar-10",
-      description: "A sidebar in a popover.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu"],
-      files: [{
-        path: "registry/miami/block/sidebar-10/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-10/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-10/components/nav-actions.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-10/components/nav-favorites.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-10/components/nav-main.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-10/components/nav-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-10/components/nav-workspaces.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-10/components/team-switcher.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-10/page.tsx")),
-      source: "__registry__/miami/block/sidebar-10/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-11": {
-      name: "sidebar-11",
-      description: "A sidebar with a collapsible file tree.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible"],
-      files: [{
-        path: "registry/miami/block/sidebar-11/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-11/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-11/page.tsx")),
-      source: "__registry__/miami/block/sidebar-11/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-12": {
-      name: "sidebar-12",
-      description: "A sidebar with a calendar.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","calendar","dropdown-menu","avatar"],
-      files: [{
-        path: "registry/miami/block/sidebar-12/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-12/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-12/components/calendars.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-12/components/date-picker.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-12/components/nav-user.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-12/page.tsx")),
-      source: "__registry__/miami/block/sidebar-12/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-13": {
-      name: "sidebar-13",
-      description: "A sidebar in a dialog.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","button","dialog"],
-      files: [{
-        path: "registry/miami/block/sidebar-13/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-13/components/settings-dialog.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-13/page.tsx")),
-      source: "__registry__/miami/block/sidebar-13/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-14": {
-      name: "sidebar-14",
-      description: "A sidebar on the right.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb"],
-      files: [{
-        path: "registry/miami/block/sidebar-14/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-14/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-14/page.tsx")),
-      source: "__registry__/miami/block/sidebar-14/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-15": {
-      name: "sidebar-15",
-      description: "A left and right sidebar.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu","calendar","avatar"],
-      files: [{
-        path: "registry/miami/block/sidebar-15/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/miami/block/sidebar-15/components/calendars.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-15/components/date-picker.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-15/components/nav-favorites.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-15/components/nav-main.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-15/components/nav-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-15/components/nav-user.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-15/components/nav-workspaces.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-15/components/sidebar-left.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-15/components/sidebar-right.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/miami/block/sidebar-15/components/team-switcher.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/sidebar-15/page.tsx")),
-      source: "__registry__/miami/block/sidebar-15/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "login-01": {
-      name: "login-01",
-      description: "A simple login form.",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: [{
-        path: "registry/miami/block/login-01/page.tsx",
-        type: "registry:page",
-        target: "app/login/page.tsx"
-      },{
-        path: "registry/miami/block/login-01/components/login-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/login-01/page.tsx")),
-      source: "__registry__/miami/block/login-01/page.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
-    },
-    "chart-area-axes": {
-      name: "chart-area-axes",
-      description: "An area chart with axes",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-area-axes.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-area-axes.tsx")),
-      source: "__registry__/miami/block/chart-area-axes.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-default": {
-      name: "chart-area-default",
-      description: "A simple area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-area-default.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-area-default.tsx")),
-      source: "__registry__/miami/block/chart-area-default.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-gradient": {
-      name: "chart-area-gradient",
-      description: "An area chart with gradient fill",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-area-gradient.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-area-gradient.tsx")),
-      source: "__registry__/miami/block/chart-area-gradient.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-icons": {
-      name: "chart-area-icons",
-      description: "An area chart with icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-area-icons.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-area-icons.tsx")),
-      source: "__registry__/miami/block/chart-area-icons.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-interactive": {
-      name: "chart-area-interactive",
-      description: "An interactive area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart","select"],
-      files: [{
-        path: "registry/miami/block/chart-area-interactive.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-area-interactive.tsx")),
-      source: "__registry__/miami/block/chart-area-interactive.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-legend": {
-      name: "chart-area-legend",
-      description: "An area chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-area-legend.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-area-legend.tsx")),
-      source: "__registry__/miami/block/chart-area-legend.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-linear": {
-      name: "chart-area-linear",
-      description: "A linear area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-area-linear.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-area-linear.tsx")),
-      source: "__registry__/miami/block/chart-area-linear.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-stacked-expand": {
-      name: "chart-area-stacked-expand",
-      description: "A stacked area chart with expand stacking",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-area-stacked-expand.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-area-stacked-expand.tsx")),
-      source: "__registry__/miami/block/chart-area-stacked-expand.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-stacked": {
-      name: "chart-area-stacked",
-      description: "A stacked area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-area-stacked.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-area-stacked.tsx")),
-      source: "__registry__/miami/block/chart-area-stacked.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-step": {
-      name: "chart-area-step",
-      description: "A step area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-area-step.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-area-step.tsx")),
-      source: "__registry__/miami/block/chart-area-step.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-bar-active": {
-      name: "chart-bar-active",
-      description: "A bar chart with an active bar",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-bar-active.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-bar-active.tsx")),
-      source: "__registry__/miami/block/chart-bar-active.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-default": {
-      name: "chart-bar-default",
-      description: "A bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-bar-default.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-bar-default.tsx")),
-      source: "__registry__/miami/block/chart-bar-default.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-horizontal": {
-      name: "chart-bar-horizontal",
-      description: "A horizontal bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-bar-horizontal.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-bar-horizontal.tsx")),
-      source: "__registry__/miami/block/chart-bar-horizontal.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-interactive": {
-      name: "chart-bar-interactive",
-      description: "An interactive bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-bar-interactive.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-bar-interactive.tsx")),
-      source: "__registry__/miami/block/chart-bar-interactive.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-label-custom": {
-      name: "chart-bar-label-custom",
-      description: "A bar chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-bar-label-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-bar-label-custom.tsx")),
-      source: "__registry__/miami/block/chart-bar-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-label": {
-      name: "chart-bar-label",
-      description: "A bar chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-bar-label.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-bar-label.tsx")),
-      source: "__registry__/miami/block/chart-bar-label.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-mixed": {
-      name: "chart-bar-mixed",
-      description: "A mixed bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-bar-mixed.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-bar-mixed.tsx")),
-      source: "__registry__/miami/block/chart-bar-mixed.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-multiple": {
-      name: "chart-bar-multiple",
-      description: "A multiple bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-bar-multiple.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-bar-multiple.tsx")),
-      source: "__registry__/miami/block/chart-bar-multiple.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-negative": {
-      name: "chart-bar-negative",
-      description: "A bar chart with negative values",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-bar-negative.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-bar-negative.tsx")),
-      source: "__registry__/miami/block/chart-bar-negative.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-stacked": {
-      name: "chart-bar-stacked",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-bar-stacked.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-bar-stacked.tsx")),
-      source: "__registry__/miami/block/chart-bar-stacked.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-line-default": {
-      name: "chart-line-default",
-      description: "A line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-line-default.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-line-default.tsx")),
-      source: "__registry__/miami/block/chart-line-default.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-dots-colors": {
-      name: "chart-line-dots-colors",
-      description: "A line chart with dots and colors",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-line-dots-colors.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-line-dots-colors.tsx")),
-      source: "__registry__/miami/block/chart-line-dots-colors.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-dots-custom": {
-      name: "chart-line-dots-custom",
-      description: "A line chart with custom dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-line-dots-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-line-dots-custom.tsx")),
-      source: "__registry__/miami/block/chart-line-dots-custom.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-dots": {
-      name: "chart-line-dots",
-      description: "A line chart with dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-line-dots.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-line-dots.tsx")),
-      source: "__registry__/miami/block/chart-line-dots.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-interactive": {
-      name: "chart-line-interactive",
-      description: "An interactive line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-line-interactive.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-line-interactive.tsx")),
-      source: "__registry__/miami/block/chart-line-interactive.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-label-custom": {
-      name: "chart-line-label-custom",
-      description: "A line chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-line-label-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-line-label-custom.tsx")),
-      source: "__registry__/miami/block/chart-line-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-label": {
-      name: "chart-line-label",
-      description: "A line chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-line-label.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-line-label.tsx")),
-      source: "__registry__/miami/block/chart-line-label.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-linear": {
-      name: "chart-line-linear",
-      description: "A linear line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-line-linear.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-line-linear.tsx")),
-      source: "__registry__/miami/block/chart-line-linear.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-multiple": {
-      name: "chart-line-multiple",
-      description: "A multiple line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-line-multiple.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-line-multiple.tsx")),
-      source: "__registry__/miami/block/chart-line-multiple.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-step": {
-      name: "chart-line-step",
-      description: "A line chart with step",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-line-step.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-line-step.tsx")),
-      source: "__registry__/miami/block/chart-line-step.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-pie-donut-active": {
-      name: "chart-pie-donut-active",
-      description: "A donut chart with an active sector",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-pie-donut-active.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-pie-donut-active.tsx")),
-      source: "__registry__/miami/block/chart-pie-donut-active.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-donut-text": {
-      name: "chart-pie-donut-text",
-      description: "A donut chart with text",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-pie-donut-text.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-pie-donut-text.tsx")),
-      source: "__registry__/miami/block/chart-pie-donut-text.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-donut": {
-      name: "chart-pie-donut",
-      description: "A donut chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-pie-donut.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-pie-donut.tsx")),
-      source: "__registry__/miami/block/chart-pie-donut.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-interactive": {
-      name: "chart-pie-interactive",
-      description: "An interactive pie chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-pie-interactive.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-pie-interactive.tsx")),
-      source: "__registry__/miami/block/chart-pie-interactive.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-label-custom": {
-      name: "chart-pie-label-custom",
-      description: "A pie chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-pie-label-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-pie-label-custom.tsx")),
-      source: "__registry__/miami/block/chart-pie-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-label-list": {
-      name: "chart-pie-label-list",
-      description: "A pie chart with a label list",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-pie-label-list.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-pie-label-list.tsx")),
-      source: "__registry__/miami/block/chart-pie-label-list.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-label": {
-      name: "chart-pie-label",
-      description: "A pie chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-pie-label.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-pie-label.tsx")),
-      source: "__registry__/miami/block/chart-pie-label.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-legend": {
-      name: "chart-pie-legend",
-      description: "A pie chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-pie-legend.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-pie-legend.tsx")),
-      source: "__registry__/miami/block/chart-pie-legend.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-separator-none": {
-      name: "chart-pie-separator-none",
-      description: "A pie chart with no separator",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-pie-separator-none.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-pie-separator-none.tsx")),
-      source: "__registry__/miami/block/chart-pie-separator-none.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-simple": {
-      name: "chart-pie-simple",
-      description: "A simple pie chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-pie-simple.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-pie-simple.tsx")),
-      source: "__registry__/miami/block/chart-pie-simple.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-stacked": {
-      name: "chart-pie-stacked",
-      description: "A pie chart with stacked sections",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-pie-stacked.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-pie-stacked.tsx")),
-      source: "__registry__/miami/block/chart-pie-stacked.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-radar-default": {
-      name: "chart-radar-default",
-      description: "A radar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-default.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-default.tsx")),
-      source: "__registry__/miami/block/chart-radar-default.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-dots": {
-      name: "chart-radar-dots",
-      description: "A radar chart with dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-dots.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-dots.tsx")),
-      source: "__registry__/miami/block/chart-radar-dots.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-grid-circle-fill": {
-      name: "chart-radar-grid-circle-fill",
-      description: "A radar chart with a grid and circle fill",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-grid-circle-fill.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-grid-circle-fill.tsx")),
-      source: "__registry__/miami/block/chart-radar-grid-circle-fill.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-grid-circle-no-lines": {
-      name: "chart-radar-grid-circle-no-lines",
-      description: "A radar chart with a grid and circle fill",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-grid-circle-no-lines.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-grid-circle-no-lines.tsx")),
-      source: "__registry__/miami/block/chart-radar-grid-circle-no-lines.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-grid-circle": {
-      name: "chart-radar-grid-circle",
-      description: "A radar chart with a grid and circle",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-grid-circle.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-grid-circle.tsx")),
-      source: "__registry__/miami/block/chart-radar-grid-circle.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-grid-custom": {
-      name: "chart-radar-grid-custom",
-      description: "A radar chart with a custom grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-grid-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-grid-custom.tsx")),
-      source: "__registry__/miami/block/chart-radar-grid-custom.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-grid-fill": {
-      name: "chart-radar-grid-fill",
-      description: "A radar chart with a grid filled",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-grid-fill.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-grid-fill.tsx")),
-      source: "__registry__/miami/block/chart-radar-grid-fill.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-grid-none": {
-      name: "chart-radar-grid-none",
-      description: "A radar chart with no grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-grid-none.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-grid-none.tsx")),
-      source: "__registry__/miami/block/chart-radar-grid-none.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-icons": {
-      name: "chart-radar-icons",
-      description: "A radar chart with icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-icons.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-icons.tsx")),
-      source: "__registry__/miami/block/chart-radar-icons.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-label-custom": {
-      name: "chart-radar-label-custom",
-      description: "A radar chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-label-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-label-custom.tsx")),
-      source: "__registry__/miami/block/chart-radar-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-legend": {
-      name: "chart-radar-legend",
-      description: "A radar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-legend.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-legend.tsx")),
-      source: "__registry__/miami/block/chart-radar-legend.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-lines-only": {
-      name: "chart-radar-lines-only",
-      description: "A radar chart with lines only",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-lines-only.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-lines-only.tsx")),
-      source: "__registry__/miami/block/chart-radar-lines-only.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-multiple": {
-      name: "chart-radar-multiple",
-      description: "A radar chart with multiple data",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-multiple.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-multiple.tsx")),
-      source: "__registry__/miami/block/chart-radar-multiple.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-radius": {
-      name: "chart-radar-radius",
-      description: "A radar chart with a radius axis",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radar-radius.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radar-radius.tsx")),
-      source: "__registry__/miami/block/chart-radar-radius.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radial-grid": {
-      name: "chart-radial-grid",
-      description: "A radial chart with a grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radial-grid.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radial-grid.tsx")),
-      source: "__registry__/miami/block/chart-radial-grid.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
-    },
-    "chart-radial-label": {
-      name: "chart-radial-label",
-      description: "A radial chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radial-label.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radial-label.tsx")),
-      source: "__registry__/miami/block/chart-radial-label.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
-    },
-    "chart-radial-shape": {
-      name: "chart-radial-shape",
-      description: "A radial chart with a custom shape",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radial-shape.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radial-shape.tsx")),
-      source: "__registry__/miami/block/chart-radial-shape.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
-    },
-    "chart-radial-simple": {
-      name: "chart-radial-simple",
-      description: "A radial chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radial-simple.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radial-simple.tsx")),
-      source: "__registry__/miami/block/chart-radial-simple.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
-    },
-    "chart-radial-stacked": {
-      name: "chart-radial-stacked",
-      description: "A radial chart with stacked sections",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radial-stacked.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radial-stacked.tsx")),
-      source: "__registry__/miami/block/chart-radial-stacked.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
-    },
-    "chart-radial-text": {
-      name: "chart-radial-text",
-      description: "A radial chart with text",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-radial-text.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-radial-text.tsx")),
-      source: "__registry__/miami/block/chart-radial-text.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
-    },
-    "chart-tooltip-default": {
-      name: "chart-tooltip-default",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-tooltip-default.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-tooltip-default.tsx")),
-      source: "__registry__/miami/block/chart-tooltip-default.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-indicator-line": {
-      name: "chart-tooltip-indicator-line",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-tooltip-indicator-line.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-tooltip-indicator-line.tsx")),
-      source: "__registry__/miami/block/chart-tooltip-indicator-line.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-indicator-none": {
-      name: "chart-tooltip-indicator-none",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-tooltip-indicator-none.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-tooltip-indicator-none.tsx")),
-      source: "__registry__/miami/block/chart-tooltip-indicator-none.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-label-none": {
-      name: "chart-tooltip-label-none",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-tooltip-label-none.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-tooltip-label-none.tsx")),
-      source: "__registry__/miami/block/chart-tooltip-label-none.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-label-custom": {
-      name: "chart-tooltip-label-custom",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-tooltip-label-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-tooltip-label-custom.tsx")),
-      source: "__registry__/miami/block/chart-tooltip-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-label-formatter": {
-      name: "chart-tooltip-label-formatter",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-tooltip-label-formatter.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-tooltip-label-formatter.tsx")),
-      source: "__registry__/miami/block/chart-tooltip-label-formatter.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-formatter": {
-      name: "chart-tooltip-formatter",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-tooltip-formatter.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-tooltip-formatter.tsx")),
-      source: "__registry__/miami/block/chart-tooltip-formatter.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-icons": {
-      name: "chart-tooltip-icons",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-tooltip-icons.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-tooltip-icons.tsx")),
-      source: "__registry__/miami/block/chart-tooltip-icons.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-advanced": {
-      name: "chart-tooltip-advanced",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/miami/block/chart-tooltip-advanced.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/block/chart-tooltip-advanced.tsx")),
-      source: "__registry__/miami/block/chart-tooltip-advanced.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "utils": {
-      name: "utils",
-      description: "",
-      type: "registry:lib",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/lib/utils.ts",
-        type: "registry:lib",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/lib/utils.ts")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "use-mobile": {
-      name: "use-mobile",
-      description: "",
-      type: "registry:hook",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/hooks/use-mobile.tsx",
-        type: "registry:hook",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/hooks/use-mobile.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "use-toast": {
-      name: "use-toast",
-      description: "",
-      type: "registry:hook",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/hooks/use-toast.ts",
-        type: "registry:hook",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/hooks/use-toast.ts")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "use-anchor-observer": {
-      name: "use-anchor-observer",
-      description: "",
-      type: "registry:hook",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/hooks/use-anchor-observer.ts",
-        type: "registry:hook",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/hooks/use-anchor-observer.ts")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "use-on-change": {
-      name: "use-on-change",
-      description: "",
-      type: "registry:hook",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/miami/hooks/use-on-change.ts",
-        type: "registry:hook",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/miami/hooks/use-on-change.ts")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-  },  "default": {
-    "accordion": {
-      name: "accordion",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/accordion.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/accordion.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "alert": {
-      name: "alert",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/alert.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/alert.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "alert-dialog": {
-      name: "alert-dialog",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/ui/alert-dialog.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/alert-dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-beam": {
-      name: "animated-beam",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/animated-beam.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/animated-beam.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-grid-pattern": {
-      name: "animated-grid-pattern",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/animated-grid-pattern.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/animated-grid-pattern.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-list": {
-      name: "animated-list",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/animated-list.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/animated-list.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-shiny-text": {
-      name: "animated-shiny-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/animated-shiny-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/animated-shiny-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-subscribe-button": {
-      name: "animated-subscribe-button",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/animated-subscribe-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/animated-subscribe-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-gradient-text": {
-      name: "animated-gradient-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/animated-gradient-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/animated-gradient-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "aspect-ratio": {
-      name: "aspect-ratio",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/aspect-ratio.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/aspect-ratio.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "avatar": {
-      name: "avatar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/avatar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/avatar.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "avatar-circles": {
-      name: "avatar-circles",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/avatar-circles.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/avatar-circles.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "badge": {
-      name: "badge",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/badge.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/badge.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "bento-grid": {
-      name: "bento-grid",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/bento-grid.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/bento-grid.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "blur-in": {
-      name: "blur-in",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/blur-in.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/blur-in.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "border-beam": {
-      name: "border-beam",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/border-beam.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/border-beam.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "box-reveal": {
-      name: "box-reveal",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/box-reveal.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/box-reveal.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb": {
-      name: "breadcrumb",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/breadcrumb.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/breadcrumb.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "blur-fade": {
-      name: "blur-fade",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/blur-fade.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/blur-fade.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button": {
-      name: "button",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "calendar": {
-      name: "calendar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/ui/calendar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/calendar.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "card": {
-      name: "card",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/card.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel": {
-      name: "carousel",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/ui/carousel.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/carousel.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "chart": {
-      name: "chart",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["card"],
-      files: [{
-        path: "registry/default/ui/chart.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/chart.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "checkbox": {
-      name: "checkbox",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/checkbox.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/checkbox.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "client-tweet-card": {
-      name: "client-tweet-card",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/client-tweet-card.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/client-tweet-card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "collapsible": {
-      name: "collapsible",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/collapsible.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/collapsible.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "command": {
-      name: "command",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["dialog"],
-      files: [{
-        path: "registry/default/ui/command.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/command.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti": {
-      name: "confetti",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/confetti.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/confetti.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "context-menu": {
-      name: "context-menu",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/context-menu.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/context-menu.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "cool-mode": {
-      name: "cool-mode",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/cool-mode.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/cool-mode.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dialog": {
-      name: "dialog",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/dialog.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dock": {
-      name: "dock",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/dock.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/dock.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dot-pattern": {
-      name: "dot-pattern",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/dot-pattern.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/dot-pattern.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "drawer": {
-      name: "drawer",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/drawer.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/drawer.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dropdown-menu": {
-      name: "dropdown-menu",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/dropdown-menu.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/dropdown-menu.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "fade-text": {
-      name: "fade-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/fade-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/fade-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "file-tree": {
-      name: "file-tree",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/file-tree.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/file-tree.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "flip-text": {
-      name: "flip-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/flip-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/flip-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "form": {
-      name: "form",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button","label"],
-      files: [{
-        path: "registry/default/ui/form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "globe": {
-      name: "globe",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/globe.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/globe.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "gradual-spacing": {
-      name: "gradual-spacing",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/gradual-spacing.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/gradual-spacing.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-pattern": {
-      name: "grid-pattern",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/grid-pattern.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/grid-pattern.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "gauge-circle": {
-      name: "gauge-circle",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/gauge-circle.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/gauge-circle.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hero-video-dialog": {
-      name: "hero-video-dialog",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/hero-video-dialog.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/hero-video-dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hover-card": {
-      name: "hover-card",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/hover-card.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/hover-card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "icon-cloud": {
-      name: "icon-cloud",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/icon-cloud.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/icon-cloud.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input": {
-      name: "input",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/input.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/input.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp": {
-      name: "input-otp",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/input-otp.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/input-otp.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone": {
-      name: "input-phone",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button","input","popover","command"],
-      files: [{
-        path: "registry/default/ui/input-phone.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/input-phone.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "label": {
-      name: "label",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/label.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/label.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "letter-pullup": {
-      name: "letter-pullup",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/letter-pullup.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/letter-pullup.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "magic-card": {
-      name: "magic-card",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/magic-card.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/magic-card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "marquee": {
-      name: "marquee",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/marquee.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/marquee.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "menubar": {
-      name: "menubar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/menubar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/menubar.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "meteors": {
-      name: "meteors",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/meteors.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/meteors.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select": {
-      name: "multi-select",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/multi-select.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/multi-select.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "navigation-menu": {
-      name: "navigation-menu",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/navigation-menu.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/navigation-menu.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "neon-gradient-card": {
-      name: "neon-gradient-card",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/neon-gradient-card.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/neon-gradient-card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "number-ticker": {
-      name: "number-ticker",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/number-ticker.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/number-ticker.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "orbiting-circles": {
-      name: "orbiting-circles",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/orbiting-circles.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/orbiting-circles.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "pagination": {
-      name: "pagination",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/ui/pagination.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/pagination.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "particles": {
-      name: "particles",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/particles.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/particles.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "popover": {
-      name: "popover",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/popover.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/popover.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "progress": {
-      name: "progress",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/progress.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/progress.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "pulsating-button": {
-      name: "pulsating-button",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/pulsating-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/pulsating-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "radio-group": {
-      name: "radio-group",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/radio-group.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/radio-group.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "resizable": {
-      name: "resizable",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/resizable.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/resizable.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "retro-grid": {
-      name: "retro-grid",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/retro-grid.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/retro-grid.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "ripple": {
-      name: "ripple",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/ripple.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/ripple.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-area": {
-      name: "scroll-area",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/scroll-area.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/scroll-area.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-based-velocity": {
-      name: "scroll-based-velocity",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/scroll-based-velocity.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/scroll-based-velocity.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-progress": {
-      name: "scroll-progress",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/scroll-progress.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/scroll-progress.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "select": {
-      name: "select",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/select.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/select.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "separate-away": {
-      name: "separate-away",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/separate-away.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/separate-away.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "separator": {
-      name: "separator",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/separator.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/separator.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sheet": {
-      name: "sheet",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/sheet.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/sheet.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shimmer-button": {
-      name: "shimmer-button",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/shimmer-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/shimmer-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shine-border": {
-      name: "shine-border",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/shine-border.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/shine-border.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shiny-button": {
-      name: "shiny-button",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/shiny-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/shiny-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sidebar": {
-      name: "sidebar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["button","separator","sheet","tooltip","input","use-mobile","skeleton"],
-      files: [{
-        path: "registry/default/ui/sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/sidebar.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "skeleton": {
-      name: "skeleton",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/skeleton.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/skeleton.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider": {
-      name: "slider",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/slider.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/slider.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sonner": {
-      name: "sonner",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/sonner.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/sonner.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sparkles-text": {
-      name: "sparkles-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/sparkles-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/sparkles-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "star-rating": {
-      name: "star-rating",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/star-rating.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/star-rating.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "switch": {
-      name: "switch",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/switch.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/switch.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper": {
-      name: "stepper",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["collapsible"],
-      files: [{
-        path: "registry/default/ui/stepper.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/stepper.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scratch-to-reveal": {
-      name: "scratch-to-reveal",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/scratch-to-reveal.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/scratch-to-reveal.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "table": {
-      name: "table",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/table.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/table.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tabs": {
-      name: "tabs",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/tabs.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/tabs.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea": {
-      name: "textarea",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/textarea.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/textarea.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "text-reveal": {
-      name: "text-reveal",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/text-reveal.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/text-reveal.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "timeline": {
-      name: "timeline",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/timeline.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/timeline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toc": {
-      name: "toc",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/toc.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/toc.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toast": {
-      name: "toast",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/toast.tsx",
-        type: "registry:ui",
-        target: ""
-      },{
-        path: "registry/default/hooks/use-toast.ts",
-        type: "registry:hook",
-        target: ""
-      },{
-        path: "registry/default/ui/toaster.tsx",
-        type: "registry:ui",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/toast.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle": {
-      name: "toggle",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/toggle.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/toggle.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group": {
-      name: "toggle-group",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["toggle"],
-      files: [{
-        path: "registry/default/ui/toggle-group.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/toggle-group.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tooltip": {
-      name: "tooltip",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/tooltip.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/tooltip.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tour": {
-      name: "tour",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/tour.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/tour.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "typing-animation": {
-      name: "typing-animation",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/typing-animation.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/typing-animation.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tweet-card": {
-      name: "tweet-card",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/tweet-card.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/tweet-card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "video-modal": {
-      name: "video-modal",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/video-modal.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/video-modal.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "wavy-dot-pattern": {
-      name: "wavy-dot-pattern",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/wavy-dot-pattern.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/wavy-dot-pattern.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "wavy-text": {
-      name: "wavy-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/wavy-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/wavy-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "word-fade-in": {
-      name: "word-fade-in",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/word-fade-in.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/word-fade-in.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "word-pull-up": {
-      name: "word-pull-up",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/word-pull-up.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/word-pull-up.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "word-rotate": {
-      name: "word-rotate",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/word-rotate.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/word-rotate.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "rainbow-button": {
-      name: "rainbow-button",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/rainbow-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/rainbow-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "flickering-grid": {
-      name: "flickering-grid",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/flickering-grid.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/flickering-grid.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hyper-text": {
-      name: "hyper-text",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/hyper-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/hyper-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "safari": {
-      name: "safari",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/safari.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/safari.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "iphone-15-pro": {
-      name: "iphone-15-pro",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/iphone-15-pro.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/iphone-15-pro.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-circular-progress-bar": {
-      name: "animated-circular-progress-bar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/animated-circular-progress-bar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/animated-circular-progress-bar.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-layout": {
-      name: "grid-layout",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/grid-layout.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/grid-layout.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "globe-grid": {
-      name: "globe-grid",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/ui/globe-grid.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/globe-grid.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "nyx-toc": {
-      name: "nyx-toc",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["popover"],
-      files: [{
-        path: "registry/default/ui/nyx-toc.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/hooks/use-anchor-observer.ts",
-        type: "registry:hook",
-        target: ""
-      },{
-        path: "registry/default/hooks/use-on-change.ts",
-        type: "registry:hook",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/ui/nyx-toc.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "accordion-demo": {
-      name: "accordion-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["accordion"],
-      files: [{
-        path: "registry/default/example/accordion-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/accordion-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "alert-demo": {
-      name: "alert-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["alert"],
-      files: [{
-        path: "registry/default/example/alert-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/alert-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "alert-destructive": {
-      name: "alert-destructive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["alert"],
-      files: [{
-        path: "registry/default/example/alert-destructive.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/alert-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "alert-dialog-demo": {
-      name: "alert-dialog-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["alert-dialog","button"],
-      files: [{
-        path: "registry/default/example/alert-dialog-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/alert-dialog-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "aspect-ratio-demo": {
-      name: "aspect-ratio-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["aspect-ratio"],
-      files: [{
-        path: "registry/default/example/aspect-ratio-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/aspect-ratio-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "avatar-demo": {
-      name: "avatar-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["avatar"],
-      files: [{
-        path: "registry/default/example/avatar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/avatar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "badge-demo": {
-      name: "badge-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: [{
-        path: "registry/default/example/badge-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/badge-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "badge-destructive": {
-      name: "badge-destructive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: [{
-        path: "registry/default/example/badge-destructive.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/badge-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "badge-outline": {
-      name: "badge-outline",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: [{
-        path: "registry/default/example/badge-outline.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/badge-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "badge-secondary": {
-      name: "badge-secondary",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: [{
-        path: "registry/default/example/badge-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/badge-secondary.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb-demo": {
-      name: "breadcrumb-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: [{
-        path: "registry/default/example/breadcrumb-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/breadcrumb-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb-separator": {
-      name: "breadcrumb-separator",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: [{
-        path: "registry/default/example/breadcrumb-separator.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/breadcrumb-separator.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb-dropdown": {
-      name: "breadcrumb-dropdown",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: [{
-        path: "registry/default/example/breadcrumb-dropdown.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/breadcrumb-dropdown.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb-ellipsis": {
-      name: "breadcrumb-ellipsis",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: [{
-        path: "registry/default/example/breadcrumb-ellipsis.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/breadcrumb-ellipsis.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb-link": {
-      name: "breadcrumb-link",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: [{
-        path: "registry/default/example/breadcrumb-link.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/breadcrumb-link.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "breadcrumb-responsive": {
-      name: "breadcrumb-responsive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: [{
-        path: "registry/default/example/breadcrumb-responsive.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/breadcrumb-responsive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-demo": {
-      name: "button-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/example/button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-secondary": {
-      name: "button-secondary",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/example/button-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/button-secondary.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-destructive": {
-      name: "button-destructive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/example/button-destructive.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/button-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-outline": {
-      name: "button-outline",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/example/button-outline.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/button-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-ghost": {
-      name: "button-ghost",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/example/button-ghost.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/button-ghost.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-link": {
-      name: "button-link",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/example/button-link.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/button-link.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-with-icon": {
-      name: "button-with-icon",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/example/button-with-icon.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/button-with-icon.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-loading": {
-      name: "button-loading",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/example/button-loading.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/button-loading.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-icon": {
-      name: "button-icon",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/example/button-icon.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/button-icon.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "button-as-child": {
-      name: "button-as-child",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: [{
-        path: "registry/default/example/button-as-child.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/button-as-child.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "pulsating-button-demo": {
-      name: "pulsating-button-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/pulsating-button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/pulsating-button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "calendar-demo": {
-      name: "calendar-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["calendar"],
-      files: [{
-        path: "registry/default/example/calendar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/calendar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "calendar-form": {
-      name: "calendar-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["calendar","form","popover"],
-      files: [{
-        path: "registry/default/example/calendar-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/calendar-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "card-demo": {
-      name: "card-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["card","button","switch"],
-      files: [{
-        path: "registry/default/example/card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "card-with-form": {
-      name: "card-with-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","card","input","label","select"],
-      files: [{
-        path: "registry/default/example/card-with-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/card-with-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-demo": {
-      name: "carousel-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/default/example/carousel-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/carousel-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-size": {
-      name: "carousel-size",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/default/example/carousel-size.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/carousel-size.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-spacing": {
-      name: "carousel-spacing",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/default/example/carousel-spacing.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/carousel-spacing.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-orientation": {
-      name: "carousel-orientation",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/default/example/carousel-orientation.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/carousel-orientation.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-dots": {
-      name: "carousel-dots",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/default/example/carousel-dots.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/carousel-dots.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-api": {
-      name: "carousel-api",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/default/example/carousel-api.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/carousel-api.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "carousel-plugin": {
-      name: "carousel-plugin",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: [{
-        path: "registry/default/example/carousel-plugin.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/carousel-plugin.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "checkbox-demo": {
-      name: "checkbox-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: [{
-        path: "registry/default/example/checkbox-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/checkbox-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "checkbox-disabled": {
-      name: "checkbox-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: [{
-        path: "registry/default/example/checkbox-disabled.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/checkbox-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "checkbox-form-multiple": {
-      name: "checkbox-form-multiple",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox","form"],
-      files: [{
-        path: "registry/default/example/checkbox-form-multiple.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/checkbox-form-multiple.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "checkbox-form-single": {
-      name: "checkbox-form-single",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox","form"],
-      files: [{
-        path: "registry/default/example/checkbox-form-single.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/checkbox-form-single.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "checkbox-with-text": {
-      name: "checkbox-with-text",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: [{
-        path: "registry/default/example/checkbox-with-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/checkbox-with-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "collapsible-demo": {
-      name: "collapsible-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["collapsible"],
-      files: [{
-        path: "registry/default/example/collapsible-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/collapsible-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "combobox-demo": {
-      name: "combobox-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["command"],
-      files: [{
-        path: "registry/default/example/combobox-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/combobox-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "combobox-dropdown-menu": {
-      name: "combobox-dropdown-menu",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["command","dropdown-menu","button"],
-      files: [{
-        path: "registry/default/example/combobox-dropdown-menu.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/combobox-dropdown-menu.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "combobox-form": {
-      name: "combobox-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["command","form"],
-      files: [{
-        path: "registry/default/example/combobox-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/combobox-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "combobox-popover": {
-      name: "combobox-popover",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["combobox","popover"],
-      files: [{
-        path: "registry/default/example/combobox-popover.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/combobox-popover.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "combobox-responsive": {
-      name: "combobox-responsive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["combobox","popover","drawer"],
-      files: [{
-        path: "registry/default/example/combobox-responsive.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/combobox-responsive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "command-demo": {
-      name: "command-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["command"],
-      files: [{
-        path: "registry/default/example/command-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/command-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "command-dialog": {
-      name: "command-dialog",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["command","dialog"],
-      files: [{
-        path: "registry/default/example/command-dialog.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/command-dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "context-menu-demo": {
-      name: "context-menu-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["context-menu"],
-      files: [{
-        path: "registry/default/example/context-menu-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/context-menu-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "data-table-demo": {
-      name: "data-table-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["data-table"],
-      files: [{
-        path: "registry/default/example/data-table-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/data-table-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "date-picker-demo": {
-      name: "date-picker-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover"],
-      files: [{
-        path: "registry/default/example/date-picker-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/date-picker-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "date-picker-form": {
-      name: "date-picker-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover"],
-      files: [{
-        path: "registry/default/example/date-picker-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/date-picker-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "date-picker-with-presets": {
-      name: "date-picker-with-presets",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover","select"],
-      files: [{
-        path: "registry/default/example/date-picker-with-presets.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/date-picker-with-presets.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "date-picker-with-range": {
-      name: "date-picker-with-range",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover"],
-      files: [{
-        path: "registry/default/example/date-picker-with-range.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/date-picker-with-range.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dialog-demo": {
-      name: "dialog-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["dialog"],
-      files: [{
-        path: "registry/default/example/dialog-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/dialog-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dialog-close-button": {
-      name: "dialog-close-button",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["dialog","button"],
-      files: [{
-        path: "registry/default/example/dialog-close-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/dialog-close-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "drawer-demo": {
-      name: "drawer-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["drawer"],
-      files: [{
-        path: "registry/default/example/drawer-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/drawer-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "drawer-dialog": {
-      name: "drawer-dialog",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["drawer","dialog"],
-      files: [{
-        path: "registry/default/example/drawer-dialog.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/drawer-dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dropdown-menu-demo": {
-      name: "dropdown-menu-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu"],
-      files: [{
-        path: "registry/default/example/dropdown-menu-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/dropdown-menu-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dropdown-menu-checkboxes": {
-      name: "dropdown-menu-checkboxes",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu","checkbox"],
-      files: [{
-        path: "registry/default/example/dropdown-menu-checkboxes.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/dropdown-menu-checkboxes.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dropdown-menu-radio-group": {
-      name: "dropdown-menu-radio-group",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu","radio-group"],
-      files: [{
-        path: "registry/default/example/dropdown-menu-radio-group.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/dropdown-menu-radio-group.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hover-card-demo": {
-      name: "hover-card-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["hover-card"],
-      files: [{
-        path: "registry/default/example/hover-card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/hover-card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-demo": {
-      name: "input-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: [{
-        path: "registry/default/example/input-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-disabled": {
-      name: "input-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: [{
-        path: "registry/default/example/input-disabled.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-file": {
-      name: "input-file",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: [{
-        path: "registry/default/example/input-file.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-file.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-form": {
-      name: "input-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button","form"],
-      files: [{
-        path: "registry/default/example/input-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-with-button": {
-      name: "input-with-button",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button"],
-      files: [{
-        path: "registry/default/example/input-with-button.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-with-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-with-label": {
-      name: "input-with-label",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button","label"],
-      files: [{
-        path: "registry/default/example/input-with-label.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-with-label.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-with-text": {
-      name: "input-with-text",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button","label"],
-      files: [{
-        path: "registry/default/example/input-with-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-with-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp-demo": {
-      name: "input-otp-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: [{
-        path: "registry/default/example/input-otp-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-otp-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp-pattern": {
-      name: "input-otp-pattern",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: [{
-        path: "registry/default/example/input-otp-pattern.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-otp-pattern.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp-separator": {
-      name: "input-otp-separator",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: [{
-        path: "registry/default/example/input-otp-separator.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-otp-separator.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp-controlled": {
-      name: "input-otp-controlled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: [{
-        path: "registry/default/example/input-otp-controlled.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-otp-controlled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp-form": {
-      name: "input-otp-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp","form"],
-      files: [{
-        path: "registry/default/example/input-otp-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-otp-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-otp-disabled": {
-      name: "input-otp-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp","form"],
-      files: [{
-        path: "registry/default/example/input-otp-disabled.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-otp-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone-default": {
-      name: "input-phone-default",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","input","popover"],
-      files: [{
-        path: "registry/default/example/input-phone-default.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-phone-default.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone-demo": {
-      name: "input-phone-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","input","popover"],
-      files: [{
-        path: "registry/default/example/input-phone-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-phone-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone-form": {
-      name: "input-phone-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","input","popover"],
-      files: [{
-        path: "registry/default/example/input-phone-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-phone-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone-initial": {
-      name: "input-phone-initial",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","input","popover"],
-      files: [{
-        path: "registry/default/example/input-phone-initial.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-phone-initial.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone-international": {
-      name: "input-phone-international",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","input","popover"],
-      files: [{
-        path: "registry/default/example/input-phone-international.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-phone-international.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "input-phone-national": {
-      name: "input-phone-national",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["button","input","popover"],
-      files: [{
-        path: "registry/default/example/input-phone-national.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/input-phone-national.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "label-demo": {
-      name: "label-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["label"],
-      files: [{
-        path: "registry/default/example/label-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/label-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "menubar-demo": {
-      name: "menubar-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["menubar"],
-      files: [{
-        path: "registry/default/example/menubar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/menubar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "navigation-menu-demo": {
-      name: "navigation-menu-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["navigation-menu"],
-      files: [{
-        path: "registry/default/example/navigation-menu-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/navigation-menu-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "pagination-demo": {
-      name: "pagination-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["pagination"],
-      files: [{
-        path: "registry/default/example/pagination-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/pagination-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "popover-demo": {
-      name: "popover-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["popover"],
-      files: [{
-        path: "registry/default/example/popover-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/popover-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "progress-demo": {
-      name: "progress-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["progress"],
-      files: [{
-        path: "registry/default/example/progress-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/progress-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "radio-group-demo": {
-      name: "radio-group-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["radio-group"],
-      files: [{
-        path: "registry/default/example/radio-group-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/radio-group-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "radio-group-form": {
-      name: "radio-group-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["radio-group","form"],
-      files: [{
-        path: "registry/default/example/radio-group-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/radio-group-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "resizable-demo": {
-      name: "resizable-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: [{
-        path: "registry/default/example/resizable-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/resizable-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "resizable-demo-with-handle": {
-      name: "resizable-demo-with-handle",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: [{
-        path: "registry/default/example/resizable-demo-with-handle.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/resizable-demo-with-handle.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "resizable-vertical": {
-      name: "resizable-vertical",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: [{
-        path: "registry/default/example/resizable-vertical.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/resizable-vertical.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "resizable-handle": {
-      name: "resizable-handle",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: [{
-        path: "registry/default/example/resizable-handle.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/resizable-handle.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-area-demo": {
-      name: "scroll-area-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["scroll-area"],
-      files: [{
-        path: "registry/default/example/scroll-area-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/scroll-area-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-area-horizontal-demo": {
-      name: "scroll-area-horizontal-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["scroll-area"],
-      files: [{
-        path: "registry/default/example/scroll-area-horizontal-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/scroll-area-horizontal-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "magic-card-demo": {
-      name: "magic-card-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/magic-card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/magic-card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "neon-gradient-card-demo": {
-      name: "neon-gradient-card-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/neon-gradient-card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/neon-gradient-card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "magic-card-gradient": {
-      name: "magic-card-gradient",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/magic-card-gradient.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/magic-card-gradient.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "meteors-demo": {
-      name: "meteors-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/meteors-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/meteors-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-pattern-demo": {
-      name: "grid-pattern-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/grid-pattern-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/grid-pattern-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-pattern-linear-gradient": {
-      name: "grid-pattern-linear-gradient",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/grid-pattern-linear-gradient.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/grid-pattern-linear-gradient.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-pattern-dashed": {
-      name: "grid-pattern-dashed",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/grid-pattern-dashed.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/grid-pattern-dashed.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dot-pattern-demo": {
-      name: "dot-pattern-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/dot-pattern-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/dot-pattern-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dot-pattern-linear-gradient": {
-      name: "dot-pattern-linear-gradient",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/dot-pattern-linear-gradient.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/dot-pattern-linear-gradient.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "marquee-demo": {
-      name: "marquee-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/marquee-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/marquee-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "marquee-demo-vertical": {
-      name: "marquee-demo-vertical",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/marquee-demo-vertical.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/marquee-demo-vertical.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "marquee-logos": {
-      name: "marquee-logos",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/marquee-logos.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/marquee-logos.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "marquee-3d": {
-      name: "marquee-3d",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/marquee-3d.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/marquee-3d.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "globe-demo": {
-      name: "globe-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/globe-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/globe-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tweet-card-demo": {
-      name: "tweet-card-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/tweet-card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/tweet-card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tweet-card-images": {
-      name: "tweet-card-images",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/tweet-card-images.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/tweet-card-images.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tweet-card-meta-preview": {
-      name: "tweet-card-meta-preview",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/tweet-card-meta-preview.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/tweet-card-meta-preview.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shimmer-button-demo": {
-      name: "shimmer-button-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/shimmer-button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/shimmer-button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hero-video-demo": {
-      name: "hero-video-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/hero-video-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/hero-video-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hero-video-youtube": {
-      name: "hero-video-youtube",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/hero-video-youtube.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/hero-video-youtube.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "bento-demo": {
-      name: "bento-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/bento-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/bento-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "bento-demo-vertical": {
-      name: "bento-demo-vertical",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/bento-demo-vertical.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/bento-demo-vertical.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "number-ticker-demo": {
-      name: "number-ticker-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/number-ticker-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/number-ticker-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "ripple-demo": {
-      name: "ripple-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/ripple-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/ripple-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "retro-grid-demo": {
-      name: "retro-grid-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/retro-grid-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/retro-grid-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-list-demo": {
-      name: "animated-list-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-list-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-list-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-shiny-text-demo": {
-      name: "animated-shiny-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-shiny-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-shiny-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "particles-demo": {
-      name: "particles-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/particles-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/particles-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-grid-pattern-demo": {
-      name: "animated-grid-pattern-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-grid-pattern-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-grid-pattern-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "border-beam-demo": {
-      name: "border-beam-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/border-beam-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/border-beam-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-beam-demo": {
-      name: "animated-beam-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-beam-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-beam-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-beam-unidirectional": {
-      name: "animated-beam-unidirectional",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-beam-unidirectional.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-beam-unidirectional.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-beam-bidirectional": {
-      name: "animated-beam-bidirectional",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-beam-bidirectional.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-beam-bidirectional.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-beam-multiple-inputs": {
-      name: "animated-beam-multiple-inputs",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-beam-multiple-inputs.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-beam-multiple-inputs.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-beam-multiple-outputs": {
-      name: "animated-beam-multiple-outputs",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-beam-multiple-outputs.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-beam-multiple-outputs.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-1": {
-      name: "animated-feature-card-1",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-feature-card-1.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-feature-card-1.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-2": {
-      name: "animated-feature-card-2",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-feature-card-2.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-feature-card-2.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-3": {
-      name: "animated-feature-card-3",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-feature-card-3.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-feature-card-3.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-4": {
-      name: "animated-feature-card-4",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-feature-card-4.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-feature-card-4.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-5": {
-      name: "animated-feature-card-5",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-feature-card-5.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-feature-card-5.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-6": {
-      name: "animated-feature-card-6",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-feature-card-6.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-feature-card-6.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-7": {
-      name: "animated-feature-card-7",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-feature-card-7.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-feature-card-7.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-8": {
-      name: "animated-feature-card-8",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-feature-card-8.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-feature-card-8.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-9": {
-      name: "animated-feature-card-9",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-feature-card-9.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-feature-card-9.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-feature-card-10": {
-      name: "animated-feature-card-10",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-feature-card-10.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-feature-card-10.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "text-reveal-demo": {
-      name: "text-reveal-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/text-reveal-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/text-reveal-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-gradient-text-demo": {
-      name: "animated-gradient-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-gradient-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-gradient-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "orbiting-circles-demo": {
-      name: "orbiting-circles-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/orbiting-circles-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/orbiting-circles-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dock-demo": {
-      name: "dock-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/dock-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/dock-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dock-demo-2": {
-      name: "dock-demo-2",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/dock-demo-2.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/dock-demo-2.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "dock-demo-3": {
-      name: "dock-demo-3",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/dock-demo-3.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/dock-demo-3.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "word-rotate-demo": {
-      name: "word-rotate-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/word-rotate-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/word-rotate-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "avatar-circles-demo": {
-      name: "avatar-circles-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/avatar-circles-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/avatar-circles-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "word-pull-up-demo": {
-      name: "word-pull-up-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/word-pull-up-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/word-pull-up-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "typing-animation-demo": {
-      name: "typing-animation-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/typing-animation-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/typing-animation-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "wavy-text-demo": {
-      name: "wavy-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/wavy-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/wavy-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "blur-in-demo": {
-      name: "blur-in-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/blur-in-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/blur-in-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "separate-away-demo": {
-      name: "separate-away-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/separate-away-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/separate-away-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-based-velocity-demo": {
-      name: "scroll-based-velocity-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/scroll-based-velocity-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/scroll-based-velocity-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "letter-pullup-demo": {
-      name: "letter-pullup-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/letter-pullup-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/letter-pullup-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "flip-text-demo": {
-      name: "flip-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/flip-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/flip-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sparkles-text-demo": {
-      name: "sparkles-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/sparkles-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/sparkles-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "icon-cloud-demo": {
-      name: "icon-cloud-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/icon-cloud-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/icon-cloud-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "wavy-dot-pattern-demo": {
-      name: "wavy-dot-pattern-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/wavy-dot-pattern-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/wavy-dot-pattern-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "gradual-spacing-demo": {
-      name: "gradual-spacing-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/gradual-spacing-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/gradual-spacing-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "word-fade-in-demo": {
-      name: "word-fade-in-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/word-fade-in-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/word-fade-in-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "fade-text-demo": {
-      name: "fade-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/fade-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/fade-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shiny-button-demo": {
-      name: "shiny-button-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/shiny-button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/shiny-button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "box-reveal-demo": {
-      name: "box-reveal-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/box-reveal-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/box-reveal-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "gauge-circle-demo": {
-      name: "gauge-circle-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/gauge-circle-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/gauge-circle-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shine-border-demo": {
-      name: "shine-border-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/shine-border-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/shine-border-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "shine-border-demo-2": {
-      name: "shine-border-demo-2",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/shine-border-demo-2.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/shine-border-demo-2.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-hover": {
-      name: "confetti-hover",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/confetti-hover.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/confetti-hover.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-basic-cannon": {
-      name: "confetti-basic-cannon",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/confetti-basic-cannon.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/confetti-basic-cannon.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-random-direction": {
-      name: "confetti-random-direction",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/confetti-random-direction.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/confetti-random-direction.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-fireworks": {
-      name: "confetti-fireworks",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/confetti-fireworks.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/confetti-fireworks.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-stars": {
-      name: "confetti-stars",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/confetti-stars.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/confetti-stars.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-side-cannons": {
-      name: "confetti-side-cannons",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/confetti-side-cannons.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/confetti-side-cannons.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-custom-shapes": {
-      name: "confetti-custom-shapes",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/confetti-custom-shapes.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/confetti-custom-shapes.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-emoji": {
-      name: "confetti-emoji",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/confetti-emoji.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/confetti-emoji.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-subscribe-button-demo": {
-      name: "animated-subscribe-button-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-subscribe-button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-subscribe-button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "mode-toggle": {
-      name: "mode-toggle",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/mode-toggle.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/mode-toggle.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "mode-toggle-group": {
-      name: "mode-toggle-group",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/mode-toggle.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/mode-toggle.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "cool-mode-demo": {
-      name: "cool-mode-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/cool-mode-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/cool-mode-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "cool-mode-custom": {
-      name: "cool-mode-custom",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/cool-mode-custom.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/cool-mode-custom.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "timeline-demo": {
-      name: "timeline-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["timeline"],
-      files: [{
-        path: "registry/default/example/timeline-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/timeline-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "timeline-right": {
-      name: "timeline-right",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["timeline"],
-      files: [{
-        path: "registry/default/example/timeline-right.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/timeline-right.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "timeline-alternate": {
-      name: "timeline-alternate",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["timeline"],
-      files: [{
-        path: "registry/default/example/timeline-alternate.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/timeline-alternate.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "timeline-labels": {
-      name: "timeline-labels",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["timeline"],
-      files: [{
-        path: "registry/default/example/timeline-labels.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/timeline-labels.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "star-rating-demo": {
-      name: "star-rating-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/star-rating-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/star-rating-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "star-rating-colored": {
-      name: "star-rating-colored",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/star-rating-colored.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/star-rating-colored.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "star-rating-icon": {
-      name: "star-rating-icon",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/star-rating-icon.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/star-rating-icon.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-demo": {
-      name: "stepper-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-custom-styles": {
-      name: "stepper-custom-styles",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-custom-styles.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-custom-styles.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-orientation": {
-      name: "stepper-orientation",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-orientation.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-orientation.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-description": {
-      name: "stepper-description",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-description.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-description.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-sizes": {
-      name: "stepper-sizes",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-sizes.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-sizes.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-form": {
-      name: "stepper-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-variants": {
-      name: "stepper-variants",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-variants.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-variants.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-custom-icons": {
-      name: "stepper-custom-icons",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-custom-icons.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-custom-icons.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-footer-inside": {
-      name: "stepper-footer-inside",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-footer-inside.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-footer-inside.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-scroll-tracking": {
-      name: "stepper-scroll-tracking",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-scroll-tracking.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-scroll-tracking.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-clickable-steps": {
-      name: "stepper-clickable-steps",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-clickable-steps.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-clickable-steps.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-optional-steps": {
-      name: "stepper-optional-steps",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-optional-steps.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-optional-steps.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "stepper-state": {
-      name: "stepper-state",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["stepper"],
-      files: [{
-        path: "registry/default/example/stepper-state.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/stepper-state.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tour-demo": {
-      name: "tour-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/tour-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/tour-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toc-demo": {
-      name: "toc-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toc-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toc-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toc-nested": {
-      name: "toc-nested",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toc-nested.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toc-nested.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toc-active": {
-      name: "toc-active",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toc-active.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toc-active.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-basic": {
-      name: "multi-select-basic",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/default/example/multi-select-basic.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/multi-select-basic.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-filter": {
-      name: "multi-select-filter",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/default/example/multi-select-filter.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/multi-select-filter.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-controllable-search": {
-      name: "multi-select-controllable-search",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/default/example/multi-select-controllable-search.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/multi-select-controllable-search.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-input-custom": {
-      name: "multi-select-input-custom",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/default/example/multi-select-input-custom.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/multi-select-input-custom.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-limit-count": {
-      name: "multi-select-limit-count",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/default/example/multi-select-limit-count.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/multi-select-limit-count.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-limit-display-length": {
-      name: "multi-select-limit-display-length",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/default/example/multi-select-limit-display-length.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/multi-select-limit-display-length.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "multi-select-form": {
-      name: "multi-select-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["multi-select"],
-      files: [{
-        path: "registry/default/example/multi-select-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/multi-select-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scroll-progress-demo": {
-      name: "scroll-progress-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/scroll-progress-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/scroll-progress-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "video-modal-demo": {
-      name: "video-modal-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/video-modal-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/video-modal-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "scratch-to-reveal-demo": {
-      name: "scratch-to-reveal-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/scratch-to-reveal-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/scratch-to-reveal-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "confetti-demo": {
-      name: "confetti-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/confetti-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/confetti-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "blur-fade-demo": {
-      name: "blur-fade-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/blur-fade-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/blur-fade-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "blur-fade-text-demo": {
-      name: "blur-fade-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/blur-fade-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/blur-fade-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "file-tree-demo": {
-      name: "file-tree-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/file-tree-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/file-tree-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "rainbow-button-demo": {
-      name: "rainbow-button-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/rainbow-button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/rainbow-button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hero-video-dialog-demo": {
-      name: "hero-video-dialog-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/hero-video-dialog-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/hero-video-dialog-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hero-video-dialog-demo-top-in-bottom-out": {
-      name: "hero-video-dialog-demo-top-in-bottom-out",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "flickering-grid-demo": {
-      name: "flickering-grid-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/flickering-grid-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/flickering-grid-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "flickering-grid-rounded-demo": {
-      name: "flickering-grid-rounded-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/flickering-grid-rounded-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/flickering-grid-rounded-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "hyper-text-demo": {
-      name: "hyper-text-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/hyper-text-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/hyper-text-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "safari-demo": {
-      name: "safari-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/safari-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/safari-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "safari-demo-2": {
-      name: "safari-demo-2",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/safari-demo-2.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/safari-demo-2.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "iphone-15-pro-demo": {
-      name: "iphone-15-pro-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/iphone-15-pro-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/iphone-15-pro-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "iphone-15-pro-demo-2": {
-      name: "iphone-15-pro-demo-2",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/iphone-15-pro-demo-2.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/iphone-15-pro-demo-2.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "animated-circular-progress-bar-demo": {
-      name: "animated-circular-progress-bar-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/animated-circular-progress-bar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/animated-circular-progress-bar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toast-demo": {
-      name: "toast-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["toast"],
-      files: [{
-        path: "registry/default/example/toast-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toast-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toast-destructive": {
-      name: "toast-destructive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["toast"],
-      files: [{
-        path: "registry/default/example/toast-destructive.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toast-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toast-simple": {
-      name: "toast-simple",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["toast"],
-      files: [{
-        path: "registry/default/example/toast-simple.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toast-simple.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toast-with-action": {
-      name: "toast-with-action",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["toast"],
-      files: [{
-        path: "registry/default/example/toast-with-action.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toast-with-action.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toast-with-title": {
-      name: "toast-with-title",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["toast"],
-      files: [{
-        path: "registry/default/example/toast-with-title.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toast-with-title.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sonner-demo": {
-      name: "sonner-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["sonner"],
-      files: [{
-        path: "registry/default/example/sonner-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/sonner-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "select-demo": {
-      name: "select-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["select"],
-      files: [{
-        path: "registry/default/example/select-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/select-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "select-scrollable": {
-      name: "select-scrollable",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["select"],
-      files: [{
-        path: "registry/default/example/select-scrollable.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/select-scrollable.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "select-form": {
-      name: "select-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["select"],
-      files: [{
-        path: "registry/default/example/select-form.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/select-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "separator-demo": {
-      name: "separator-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/separator-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/separator-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sheet-demo": {
-      name: "sheet-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/sheet-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/sheet-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sheet-side": {
-      name: "sheet-side",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/sheet-side.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/sheet-side.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "skeleton-demo": {
-      name: "skeleton-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/skeleton-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/skeleton-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "skeleton-card": {
-      name: "skeleton-card",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/skeleton-card.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/skeleton-card.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-demo": {
-      name: "slider-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/slider-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/slider-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-disabled": {
-      name: "slider-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/slider-disabled.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/slider-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-inverted": {
-      name: "slider-inverted",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/slider-inverted.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/slider-inverted.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-vertical": {
-      name: "slider-vertical",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/slider-vertical.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/slider-vertical.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-range": {
-      name: "slider-range",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/slider-range.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/slider-range.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-tick-marks-half": {
-      name: "slider-tick-marks-half",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/slider-tick-marks-half.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/slider-tick-marks-half.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-tick-marks-full": {
-      name: "slider-tick-marks-full",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/slider-tick-marks-full.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/slider-tick-marks-full.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-format-label": {
-      name: "slider-format-label",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/slider-format-label.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/slider-format-label.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "slider-format-label-side": {
-      name: "slider-format-label-side",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/slider-format-label-side.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/slider-format-label-side.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "switch-demo": {
-      name: "switch-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/switch-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/switch-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "switch-form": {
-      name: "switch-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/switch-form.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/switch-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "table-demo": {
-      name: "table-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/table-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/table-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tabs-demo": {
-      name: "tabs-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/tabs-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/tabs-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea-demo": {
-      name: "textarea-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/textarea-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/textarea-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea-disabled": {
-      name: "textarea-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/textarea-disabled.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/textarea-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea-with-label": {
-      name: "textarea-with-label",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/textarea-with-label.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/textarea-with-label.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea-with-text": {
-      name: "textarea-with-text",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/textarea-with-text.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/textarea-with-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea-with-button": {
-      name: "textarea-with-button",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/textarea-with-button.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/textarea-with-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "textarea-form": {
-      name: "textarea-form",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/textarea-form.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/textarea-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-demo": {
-      name: "toggle-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toggle-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toggle-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-outline": {
-      name: "toggle-outline",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toggle-outline.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toggle-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-with-text": {
-      name: "toggle-with-text",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toggle-with-text.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toggle-with-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-sm": {
-      name: "toggle-sm",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toggle-sm.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toggle-sm.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-lg": {
-      name: "toggle-lg",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toggle-lg.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toggle-lg.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-disabled": {
-      name: "toggle-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toggle-disabled.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toggle-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group-demo": {
-      name: "toggle-group-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toggle-group-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toggle-group-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group-outline": {
-      name: "toggle-group-outline",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toggle-group-outline.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toggle-group-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group-single": {
-      name: "toggle-group-single",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toggle-group-single.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toggle-group-single.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group-sm": {
-      name: "toggle-group-sm",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toggle-group-sm.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toggle-group-sm.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group-lg": {
-      name: "toggle-group-lg",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toggle-group-lg.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toggle-group-lg.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "toggle-group-disabled": {
-      name: "toggle-group-disabled",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/toggle-group-disabled.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/toggle-group-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tooltip-demo": {
-      name: "tooltip-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/tooltip-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/tooltip-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tooltip-secondary": {
-      name: "tooltip-secondary",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/tooltip-secondary.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/tooltip-secondary.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tooltip-outline": {
-      name: "tooltip-outline",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/tooltip-outline.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/tooltip-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "tooltip-with-toggle-demo": {
-      name: "tooltip-with-toggle-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/tooltip-with-toggle-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/tooltip-with-toggle-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-layout-demo": {
-      name: "grid-layout-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/grid-layout-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/grid-layout-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-layout-crosshairs-demo": {
-      name: "grid-layout-crosshairs-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/grid-layout-crosshairs-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/grid-layout-crosshairs-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-layout-columns-demo": {
-      name: "grid-layout-columns-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/grid-layout-columns-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/grid-layout-columns-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "grid-layout-variants-demo": {
-      name: "grid-layout-variants-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["grid-layout"],
-      files: [{
-        path: "registry/default/example/grid-layout-variants-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/grid-layout-variants-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "globe-grid-demo": {
-      name: "globe-grid-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/globe-grid-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/globe-grid-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "globe-grid-full-demo": {
-      name: "globe-grid-full-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/globe-grid-full-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/globe-grid-full-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "nyx-toc-demo": {
-      name: "nyx-toc-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/nyx-toc-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/nyx-toc-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "nyx-toc-popover-demo": {
-      name: "nyx-toc-popover-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/example/nyx-toc-popover-demo.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/example/nyx-toc-popover-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "_sink": {
-      name: "_sink",
-      description: "",
-      type: "registry:block",
-      registryDependencies: ["accordion","alert","alert-dialog","aspect-ratio","avatar","badge","breadcrumb","button","calendar","card","carousel","chart","checkbox","collapsible","command","context-menu","dialog","drawer","dropdown-menu","hover-card","input","input-otp","label","menubar","navigation-menu","pagination","popover","progress","radio-group","resizable","scroll-area","select","separator","sheet","sidebar","skeleton","slider","sonner","switch","table","tabs","textarea","toast","toggle","toggle-group","tooltip"],
-      files: [{
-        path: "registry/default/block/_sink/page.tsx",
-        type: "registry:page",
-        target: "app/sink/page.tsx"
-      },{
-        path: "registry/default/block/_sink/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/component-wrapper.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/nav-main.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/nav-projects.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/nav-user.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/team-switcher.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/accordion-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/alert-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/alert-dialog-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/aspect-ratio-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/avatar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/badge-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/breadcrumb-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/button-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/calendar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/carousel-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/checkbox-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/collapsible-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/combobox-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/command-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/context-menu-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/date-picker-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/dialog-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/drawer-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/dropdown-menu-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/hover-card-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/input-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/input-otp-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/label-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/menubar-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/navigation-menu-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/pagination-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/popover-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/progress-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/radio-group-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/resizable-handle.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/scroll-area-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/select-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/separator-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/sheet-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/skeleton-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/slider-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/sonner-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/switch-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/table-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/tabs-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/textarea-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/toast-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/toggle-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/toggle-group-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/tooltip-demo.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/badge-destructive.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/badge-outline.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/badge-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/button-destructive.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/button-ghost.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/button-link.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/button-loading.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/button-outline.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/button-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/button-with-icon.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/toggle-disabled.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/toggle-outline.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/_sink/components/toggle-with-text.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/_sink/page.tsx")),
-      source: "__registry__/default/block/_sink/page.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "sidebar-01": {
-      name: "sidebar-01",
-      description: "A simple sidebar with navigation grouped by section.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
-      files: [{
-        path: "registry/default/block/sidebar-01/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-01/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-01/components/search-form.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-01/components/version-switcher.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-01/page.tsx")),
-      source: "__registry__/default/block/sidebar-01/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-02": {
-      name: "sidebar-02",
-      description: "A sidebar with collapsible sections.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
-      files: [{
-        path: "registry/default/block/sidebar-02/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-02/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-02/components/search-form.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-02/components/version-switcher.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-02/page.tsx")),
-      source: "__registry__/default/block/sidebar-02/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-03": {
-      name: "sidebar-03",
-      description: "A sidebar with submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb"],
-      files: [{
-        path: "registry/default/block/sidebar-03/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-03/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-03/page.tsx")),
-      source: "__registry__/default/block/sidebar-03/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-04": {
-      name: "sidebar-04",
-      description: "A floating sidebar with submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator"],
-      files: [{
-        path: "registry/default/block/sidebar-04/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-04/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-04/page.tsx")),
-      source: "__registry__/default/block/sidebar-04/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-05": {
-      name: "sidebar-05",
-      description: "A sidebar with collapsible submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","collapsible"],
-      files: [{
-        path: "registry/default/block/sidebar-05/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-05/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-05/components/search-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-05/page.tsx")),
-      source: "__registry__/default/block/sidebar-05/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-06": {
-      name: "sidebar-06",
-      description: "A sidebar with submenus as dropdowns.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","card","dropdown-menu"],
-      files: [{
-        path: "registry/default/block/sidebar-06/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-06/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-06/components/nav-main.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-06/components/sidebar-opt-in-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-06/page.tsx")),
-      source: "__registry__/default/block/sidebar-06/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-07": {
-      name: "sidebar-07",
-      description: "A sidebar that collapses to icons.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
-      files: [{
-        path: "registry/default/block/sidebar-07/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-07/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-07/components/nav-main.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-07/components/nav-projects.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-07/components/nav-user.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-07/components/team-switcher.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-07/page.tsx")),
-      source: "__registry__/default/block/sidebar-07/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-08": {
-      name: "sidebar-08",
-      description: "An inset sidebar with secondary navigation.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
-      files: [{
-        path: "registry/default/block/sidebar-08/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-08/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-08/components/nav-main.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-08/components/nav-projects.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-08/components/nav-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-08/components/nav-user.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-08/page.tsx")),
-      source: "__registry__/default/block/sidebar-08/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-09": {
-      name: "sidebar-09",
-      description: "Collapsible nested sidebars.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","switch"],
-      files: [{
-        path: "registry/default/block/sidebar-09/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-09/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-09/components/nav-user.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-09/page.tsx")),
-      source: "__registry__/default/block/sidebar-09/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-10": {
-      name: "sidebar-10",
-      description: "A sidebar in a popover.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu"],
-      files: [{
-        path: "registry/default/block/sidebar-10/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-10/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-10/components/nav-actions.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-10/components/nav-favorites.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-10/components/nav-main.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-10/components/nav-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-10/components/nav-workspaces.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-10/components/team-switcher.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-10/page.tsx")),
-      source: "__registry__/default/block/sidebar-10/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-11": {
-      name: "sidebar-11",
-      description: "A sidebar with a collapsible file tree.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible"],
-      files: [{
-        path: "registry/default/block/sidebar-11/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-11/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-11/page.tsx")),
-      source: "__registry__/default/block/sidebar-11/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-12": {
-      name: "sidebar-12",
-      description: "A sidebar with a calendar.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","calendar","dropdown-menu","avatar"],
-      files: [{
-        path: "registry/default/block/sidebar-12/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-12/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-12/components/calendars.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-12/components/date-picker.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-12/components/nav-user.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-12/page.tsx")),
-      source: "__registry__/default/block/sidebar-12/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-13": {
-      name: "sidebar-13",
-      description: "A sidebar in a dialog.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","button","dialog"],
-      files: [{
-        path: "registry/default/block/sidebar-13/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-13/components/settings-dialog.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-13/page.tsx")),
-      source: "__registry__/default/block/sidebar-13/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-14": {
-      name: "sidebar-14",
-      description: "A sidebar on the right.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb"],
-      files: [{
-        path: "registry/default/block/sidebar-14/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-14/components/app-sidebar.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-14/page.tsx")),
-      source: "__registry__/default/block/sidebar-14/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "sidebar-15": {
-      name: "sidebar-15",
-      description: "A left and right sidebar.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu","calendar","avatar"],
-      files: [{
-        path: "registry/default/block/sidebar-15/page.tsx",
-        type: "registry:page",
-        target: "app/dashboard/page.tsx"
-      },{
-        path: "registry/default/block/sidebar-15/components/calendars.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-15/components/date-picker.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-15/components/nav-favorites.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-15/components/nav-main.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-15/components/nav-secondary.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-15/components/nav-user.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-15/components/nav-workspaces.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-15/components/sidebar-left.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-15/components/sidebar-right.tsx",
-        type: "registry:component",
-        target: ""
-      },{
-        path: "registry/default/block/sidebar-15/components/team-switcher.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/sidebar-15/page.tsx")),
-      source: "__registry__/default/block/sidebar-15/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
-    },
-    "login-01": {
-      name: "login-01",
-      description: "A simple login form.",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: [{
-        path: "registry/default/block/login-01/page.tsx",
-        type: "registry:page",
-        target: "app/login/page.tsx"
-      },{
-        path: "registry/default/block/login-01/components/login-form.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/login-01/page.tsx")),
-      source: "__registry__/default/block/login-01/page.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
-    },
-    "chart-area-axes": {
-      name: "chart-area-axes",
-      description: "An area chart with axes",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-area-axes.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-area-axes.tsx")),
-      source: "__registry__/default/block/chart-area-axes.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-default": {
-      name: "chart-area-default",
-      description: "A simple area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-area-default.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-area-default.tsx")),
-      source: "__registry__/default/block/chart-area-default.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-gradient": {
-      name: "chart-area-gradient",
-      description: "An area chart with gradient fill",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-area-gradient.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-area-gradient.tsx")),
-      source: "__registry__/default/block/chart-area-gradient.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-icons": {
-      name: "chart-area-icons",
-      description: "An area chart with icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-area-icons.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-area-icons.tsx")),
-      source: "__registry__/default/block/chart-area-icons.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-interactive": {
-      name: "chart-area-interactive",
-      description: "An interactive area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart","select"],
-      files: [{
-        path: "registry/default/block/chart-area-interactive.tsx",
-        type: "registry:component",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-area-interactive.tsx")),
-      source: "__registry__/default/block/chart-area-interactive.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-legend": {
-      name: "chart-area-legend",
-      description: "An area chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-area-legend.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-area-legend.tsx")),
-      source: "__registry__/default/block/chart-area-legend.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-linear": {
-      name: "chart-area-linear",
-      description: "A linear area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-area-linear.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-area-linear.tsx")),
-      source: "__registry__/default/block/chart-area-linear.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-stacked-expand": {
-      name: "chart-area-stacked-expand",
-      description: "A stacked area chart with expand stacking",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-area-stacked-expand.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-area-stacked-expand.tsx")),
-      source: "__registry__/default/block/chart-area-stacked-expand.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-stacked": {
-      name: "chart-area-stacked",
-      description: "A stacked area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-area-stacked.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-area-stacked.tsx")),
-      source: "__registry__/default/block/chart-area-stacked.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-step": {
-      name: "chart-area-step",
-      description: "A step area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-area-step.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-area-step.tsx")),
-      source: "__registry__/default/block/chart-area-step.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-bar-active": {
-      name: "chart-bar-active",
-      description: "A bar chart with an active bar",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-bar-active.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-bar-active.tsx")),
-      source: "__registry__/default/block/chart-bar-active.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-default": {
-      name: "chart-bar-default",
-      description: "A bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-bar-default.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-bar-default.tsx")),
-      source: "__registry__/default/block/chart-bar-default.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-horizontal": {
-      name: "chart-bar-horizontal",
-      description: "A horizontal bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-bar-horizontal.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-bar-horizontal.tsx")),
-      source: "__registry__/default/block/chart-bar-horizontal.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-interactive": {
-      name: "chart-bar-interactive",
-      description: "An interactive bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-bar-interactive.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-bar-interactive.tsx")),
-      source: "__registry__/default/block/chart-bar-interactive.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-label-custom": {
-      name: "chart-bar-label-custom",
-      description: "A bar chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-bar-label-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-bar-label-custom.tsx")),
-      source: "__registry__/default/block/chart-bar-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-label": {
-      name: "chart-bar-label",
-      description: "A bar chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-bar-label.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-bar-label.tsx")),
-      source: "__registry__/default/block/chart-bar-label.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-mixed": {
-      name: "chart-bar-mixed",
-      description: "A mixed bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-bar-mixed.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-bar-mixed.tsx")),
-      source: "__registry__/default/block/chart-bar-mixed.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-multiple": {
-      name: "chart-bar-multiple",
-      description: "A multiple bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-bar-multiple.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-bar-multiple.tsx")),
-      source: "__registry__/default/block/chart-bar-multiple.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-negative": {
-      name: "chart-bar-negative",
-      description: "A bar chart with negative values",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-bar-negative.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-bar-negative.tsx")),
-      source: "__registry__/default/block/chart-bar-negative.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-stacked": {
-      name: "chart-bar-stacked",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-bar-stacked.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-bar-stacked.tsx")),
-      source: "__registry__/default/block/chart-bar-stacked.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-line-default": {
-      name: "chart-line-default",
-      description: "A line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-line-default.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-line-default.tsx")),
-      source: "__registry__/default/block/chart-line-default.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-dots-colors": {
-      name: "chart-line-dots-colors",
-      description: "A line chart with dots and colors",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-line-dots-colors.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-line-dots-colors.tsx")),
-      source: "__registry__/default/block/chart-line-dots-colors.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-dots-custom": {
-      name: "chart-line-dots-custom",
-      description: "A line chart with custom dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-line-dots-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-line-dots-custom.tsx")),
-      source: "__registry__/default/block/chart-line-dots-custom.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-dots": {
-      name: "chart-line-dots",
-      description: "A line chart with dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-line-dots.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-line-dots.tsx")),
-      source: "__registry__/default/block/chart-line-dots.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-interactive": {
-      name: "chart-line-interactive",
-      description: "An interactive line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-line-interactive.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-line-interactive.tsx")),
-      source: "__registry__/default/block/chart-line-interactive.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-label-custom": {
-      name: "chart-line-label-custom",
-      description: "A line chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-line-label-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-line-label-custom.tsx")),
-      source: "__registry__/default/block/chart-line-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-label": {
-      name: "chart-line-label",
-      description: "A line chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-line-label.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-line-label.tsx")),
-      source: "__registry__/default/block/chart-line-label.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-linear": {
-      name: "chart-line-linear",
-      description: "A linear line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-line-linear.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-line-linear.tsx")),
-      source: "__registry__/default/block/chart-line-linear.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-multiple": {
-      name: "chart-line-multiple",
-      description: "A multiple line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-line-multiple.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-line-multiple.tsx")),
-      source: "__registry__/default/block/chart-line-multiple.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-line-step": {
-      name: "chart-line-step",
-      description: "A line chart with step",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-line-step.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-line-step.tsx")),
-      source: "__registry__/default/block/chart-line-step.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
-    },
-    "chart-pie-donut-active": {
-      name: "chart-pie-donut-active",
-      description: "A donut chart with an active sector",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-pie-donut-active.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-pie-donut-active.tsx")),
-      source: "__registry__/default/block/chart-pie-donut-active.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-donut-text": {
-      name: "chart-pie-donut-text",
-      description: "A donut chart with text",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-pie-donut-text.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-pie-donut-text.tsx")),
-      source: "__registry__/default/block/chart-pie-donut-text.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-donut": {
-      name: "chart-pie-donut",
-      description: "A donut chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-pie-donut.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-pie-donut.tsx")),
-      source: "__registry__/default/block/chart-pie-donut.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-interactive": {
-      name: "chart-pie-interactive",
-      description: "An interactive pie chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-pie-interactive.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-pie-interactive.tsx")),
-      source: "__registry__/default/block/chart-pie-interactive.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-label-custom": {
-      name: "chart-pie-label-custom",
-      description: "A pie chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-pie-label-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-pie-label-custom.tsx")),
-      source: "__registry__/default/block/chart-pie-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-label-list": {
-      name: "chart-pie-label-list",
-      description: "A pie chart with a label list",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-pie-label-list.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-pie-label-list.tsx")),
-      source: "__registry__/default/block/chart-pie-label-list.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-label": {
-      name: "chart-pie-label",
-      description: "A pie chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-pie-label.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-pie-label.tsx")),
-      source: "__registry__/default/block/chart-pie-label.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-legend": {
-      name: "chart-pie-legend",
-      description: "A pie chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-pie-legend.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-pie-legend.tsx")),
-      source: "__registry__/default/block/chart-pie-legend.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-separator-none": {
-      name: "chart-pie-separator-none",
-      description: "A pie chart with no separator",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-pie-separator-none.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-pie-separator-none.tsx")),
-      source: "__registry__/default/block/chart-pie-separator-none.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-simple": {
-      name: "chart-pie-simple",
-      description: "A simple pie chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-pie-simple.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-pie-simple.tsx")),
-      source: "__registry__/default/block/chart-pie-simple.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-pie-stacked": {
-      name: "chart-pie-stacked",
-      description: "A pie chart with stacked sections",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-pie-stacked.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-pie-stacked.tsx")),
-      source: "__registry__/default/block/chart-pie-stacked.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
-    },
-    "chart-radar-default": {
-      name: "chart-radar-default",
-      description: "A radar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-default.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-default.tsx")),
-      source: "__registry__/default/block/chart-radar-default.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-dots": {
-      name: "chart-radar-dots",
-      description: "A radar chart with dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-dots.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-dots.tsx")),
-      source: "__registry__/default/block/chart-radar-dots.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-grid-circle-fill": {
-      name: "chart-radar-grid-circle-fill",
-      description: "A radar chart with a grid and circle fill",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-grid-circle-fill.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-grid-circle-fill.tsx")),
-      source: "__registry__/default/block/chart-radar-grid-circle-fill.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-grid-circle-no-lines": {
-      name: "chart-radar-grid-circle-no-lines",
-      description: "A radar chart with a grid and circle fill",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-grid-circle-no-lines.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-grid-circle-no-lines.tsx")),
-      source: "__registry__/default/block/chart-radar-grid-circle-no-lines.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-grid-circle": {
-      name: "chart-radar-grid-circle",
-      description: "A radar chart with a grid and circle",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-grid-circle.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-grid-circle.tsx")),
-      source: "__registry__/default/block/chart-radar-grid-circle.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-grid-custom": {
-      name: "chart-radar-grid-custom",
-      description: "A radar chart with a custom grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-grid-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-grid-custom.tsx")),
-      source: "__registry__/default/block/chart-radar-grid-custom.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-grid-fill": {
-      name: "chart-radar-grid-fill",
-      description: "A radar chart with a grid filled",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-grid-fill.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-grid-fill.tsx")),
-      source: "__registry__/default/block/chart-radar-grid-fill.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-grid-none": {
-      name: "chart-radar-grid-none",
-      description: "A radar chart with no grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-grid-none.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-grid-none.tsx")),
-      source: "__registry__/default/block/chart-radar-grid-none.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-icons": {
-      name: "chart-radar-icons",
-      description: "A radar chart with icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-icons.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-icons.tsx")),
-      source: "__registry__/default/block/chart-radar-icons.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-label-custom": {
-      name: "chart-radar-label-custom",
-      description: "A radar chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-label-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-label-custom.tsx")),
-      source: "__registry__/default/block/chart-radar-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-legend": {
-      name: "chart-radar-legend",
-      description: "A radar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-legend.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-legend.tsx")),
-      source: "__registry__/default/block/chart-radar-legend.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-lines-only": {
-      name: "chart-radar-lines-only",
-      description: "A radar chart with lines only",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-lines-only.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-lines-only.tsx")),
-      source: "__registry__/default/block/chart-radar-lines-only.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-multiple": {
-      name: "chart-radar-multiple",
-      description: "A radar chart with multiple data",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-multiple.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-multiple.tsx")),
-      source: "__registry__/default/block/chart-radar-multiple.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radar-radius": {
-      name: "chart-radar-radius",
-      description: "A radar chart with a radius axis",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radar-radius.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radar-radius.tsx")),
-      source: "__registry__/default/block/chart-radar-radius.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
-    },
-    "chart-radial-grid": {
-      name: "chart-radial-grid",
-      description: "A radial chart with a grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radial-grid.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radial-grid.tsx")),
-      source: "__registry__/default/block/chart-radial-grid.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
-    },
-    "chart-radial-label": {
-      name: "chart-radial-label",
-      description: "A radial chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radial-label.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radial-label.tsx")),
-      source: "__registry__/default/block/chart-radial-label.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
-    },
-    "chart-radial-shape": {
-      name: "chart-radial-shape",
-      description: "A radial chart with a custom shape",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radial-shape.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radial-shape.tsx")),
-      source: "__registry__/default/block/chart-radial-shape.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
-    },
-    "chart-radial-simple": {
-      name: "chart-radial-simple",
-      description: "A radial chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radial-simple.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radial-simple.tsx")),
-      source: "__registry__/default/block/chart-radial-simple.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
-    },
-    "chart-radial-stacked": {
-      name: "chart-radial-stacked",
-      description: "A radial chart with stacked sections",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radial-stacked.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radial-stacked.tsx")),
-      source: "__registry__/default/block/chart-radial-stacked.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
-    },
-    "chart-radial-text": {
-      name: "chart-radial-text",
-      description: "A radial chart with text",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-radial-text.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-radial-text.tsx")),
-      source: "__registry__/default/block/chart-radial-text.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
-    },
-    "chart-tooltip-default": {
-      name: "chart-tooltip-default",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-tooltip-default.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-tooltip-default.tsx")),
-      source: "__registry__/default/block/chart-tooltip-default.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-indicator-line": {
-      name: "chart-tooltip-indicator-line",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-tooltip-indicator-line.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-tooltip-indicator-line.tsx")),
-      source: "__registry__/default/block/chart-tooltip-indicator-line.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-indicator-none": {
-      name: "chart-tooltip-indicator-none",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-tooltip-indicator-none.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-tooltip-indicator-none.tsx")),
-      source: "__registry__/default/block/chart-tooltip-indicator-none.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-label-none": {
-      name: "chart-tooltip-label-none",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-tooltip-label-none.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-tooltip-label-none.tsx")),
-      source: "__registry__/default/block/chart-tooltip-label-none.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-label-custom": {
-      name: "chart-tooltip-label-custom",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-tooltip-label-custom.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-tooltip-label-custom.tsx")),
-      source: "__registry__/default/block/chart-tooltip-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-label-formatter": {
-      name: "chart-tooltip-label-formatter",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-tooltip-label-formatter.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-tooltip-label-formatter.tsx")),
-      source: "__registry__/default/block/chart-tooltip-label-formatter.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-formatter": {
-      name: "chart-tooltip-formatter",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-tooltip-formatter.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-tooltip-formatter.tsx")),
-      source: "__registry__/default/block/chart-tooltip-formatter.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-icons": {
-      name: "chart-tooltip-icons",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-tooltip-icons.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-tooltip-icons.tsx")),
-      source: "__registry__/default/block/chart-tooltip-icons.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "chart-tooltip-advanced": {
-      name: "chart-tooltip-advanced",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: [{
-        path: "registry/default/block/chart-tooltip-advanced.tsx",
-        type: "registry:block",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/block/chart-tooltip-advanced.tsx")),
-      source: "__registry__/default/block/chart-tooltip-advanced.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
-    },
-    "utils": {
-      name: "utils",
-      description: "",
-      type: "registry:lib",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/lib/utils.ts",
-        type: "registry:lib",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/lib/utils.ts")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "use-mobile": {
-      name: "use-mobile",
-      description: "",
-      type: "registry:hook",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/hooks/use-mobile.tsx",
-        type: "registry:hook",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/hooks/use-mobile.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "use-toast": {
-      name: "use-toast",
-      description: "",
-      type: "registry:hook",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/hooks/use-toast.ts",
-        type: "registry:hook",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/hooks/use-toast.ts")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "use-anchor-observer": {
-      name: "use-anchor-observer",
-      description: "",
-      type: "registry:hook",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/hooks/use-anchor-observer.ts",
-        type: "registry:hook",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/hooks/use-anchor-observer.ts")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "use-on-change": {
-      name: "use-on-change",
-      description: "",
-      type: "registry:hook",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/hooks/use-on-change.ts",
-        type: "registry:hook",
-        target: ""
-      }],
-      component: React.lazy(() => import("~/registry/default/hooks/use-on-change.ts")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-  },
+   miami: {
+      accordion: {
+         name: "accordion",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/accordion.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/accordion.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      alert: {
+         name: "alert",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/alert.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/alert.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "alert-dialog": {
+         name: "alert-dialog",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/ui/alert-dialog.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/alert-dialog.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-beam": {
+         name: "animated-beam",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/animated-beam.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/animated-beam.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-grid-pattern": {
+         name: "animated-grid-pattern",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/animated-grid-pattern.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/animated-grid-pattern.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-list": {
+         name: "animated-list",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/animated-list.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/animated-list.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-shiny-text": {
+         name: "animated-shiny-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/animated-shiny-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/animated-shiny-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-subscribe-button": {
+         name: "animated-subscribe-button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/animated-subscribe-button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/animated-subscribe-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-gradient-text": {
+         name: "animated-gradient-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/animated-gradient-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/animated-gradient-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "aspect-ratio": {
+         name: "aspect-ratio",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/aspect-ratio.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/aspect-ratio.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      avatar: {
+         name: "avatar",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/avatar.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/avatar.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "avatar-circles": {
+         name: "avatar-circles",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/avatar-circles.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/avatar-circles.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      badge: {
+         name: "badge",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/badge.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/badge.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "bento-grid": {
+         name: "bento-grid",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/bento-grid.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/bento-grid.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "blur-in": {
+         name: "blur-in",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/blur-in.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/blur-in.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "border-beam": {
+         name: "border-beam",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/border-beam.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/border-beam.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "box-reveal": {
+         name: "box-reveal",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/box-reveal.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/box-reveal.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      breadcrumb: {
+         name: "breadcrumb",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/breadcrumb.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/breadcrumb.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "blur-fade": {
+         name: "blur-fade",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/blur-fade.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/blur-fade.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      button: {
+         name: "button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/button.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      calendar: {
+         name: "calendar",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/ui/calendar.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/calendar.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      card: {
+         name: "card",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/card.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/card.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      carousel: {
+         name: "carousel",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/ui/carousel.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/carousel.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      chart: {
+         name: "chart",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["card"],
+         files: [
+            {
+               path: "registry/miami/ui/chart.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/chart.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      checkbox: {
+         name: "checkbox",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/checkbox.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/checkbox.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "client-tweet-card": {
+         name: "client-tweet-card",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/client-tweet-card.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/client-tweet-card.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      collapsible: {
+         name: "collapsible",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/collapsible.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/collapsible.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      command: {
+         name: "command",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["dialog"],
+         files: [
+            {
+               path: "registry/miami/ui/command.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/command.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      confetti: {
+         name: "confetti",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/confetti.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/confetti.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "context-menu": {
+         name: "context-menu",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/context-menu.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/context-menu.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "cool-mode": {
+         name: "cool-mode",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/cool-mode.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/cool-mode.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      dialog: {
+         name: "dialog",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/dialog.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/dialog.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      dock: {
+         name: "dock",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/dock.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/dock.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "dot-pattern": {
+         name: "dot-pattern",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/dot-pattern.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/dot-pattern.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      drawer: {
+         name: "drawer",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/drawer.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/drawer.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "dropdown-menu": {
+         name: "dropdown-menu",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/dropdown-menu.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/dropdown-menu.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "fade-text": {
+         name: "fade-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/fade-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/fade-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "file-tree": {
+         name: "file-tree",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/file-tree.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/file-tree.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "flip-text": {
+         name: "flip-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/flip-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/flip-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      form: {
+         name: "form",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["button", "label"],
+         files: [
+            {
+               path: "registry/miami/ui/form.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/form.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      globe: {
+         name: "globe",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/globe.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/globe.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "gradual-spacing": {
+         name: "gradual-spacing",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/gradual-spacing.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/gradual-spacing.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-pattern": {
+         name: "grid-pattern",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/grid-pattern.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/grid-pattern.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "gauge-circle": {
+         name: "gauge-circle",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/gauge-circle.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/gauge-circle.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hero-video-dialog": {
+         name: "hero-video-dialog",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/hero-video-dialog.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/hero-video-dialog.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hover-card": {
+         name: "hover-card",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/hover-card.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/hover-card.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "icon-cloud": {
+         name: "icon-cloud",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/icon-cloud.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/icon-cloud.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      input: {
+         name: "input",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/input.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/input.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp": {
+         name: "input-otp",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/input-otp.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/input-otp.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone": {
+         name: "input-phone",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["button", "input", "popover", "command"],
+         files: [
+            {
+               path: "registry/miami/ui/input-phone.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/input-phone.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      label: {
+         name: "label",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/label.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/label.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "letter-pullup": {
+         name: "letter-pullup",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/letter-pullup.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/letter-pullup.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "magic-card": {
+         name: "magic-card",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/magic-card.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/magic-card.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      marquee: {
+         name: "marquee",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/marquee.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/marquee.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      menubar: {
+         name: "menubar",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/menubar.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/menubar.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      meteors: {
+         name: "meteors",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/meteors.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/meteors.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select": {
+         name: "multi-select",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/multi-select.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/multi-select.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "navigation-menu": {
+         name: "navigation-menu",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/navigation-menu.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/navigation-menu.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "neon-gradient-card": {
+         name: "neon-gradient-card",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/neon-gradient-card.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/neon-gradient-card.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "number-ticker": {
+         name: "number-ticker",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/number-ticker.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/number-ticker.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "orbiting-circles": {
+         name: "orbiting-circles",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/orbiting-circles.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/orbiting-circles.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      pagination: {
+         name: "pagination",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/ui/pagination.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/pagination.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      particles: {
+         name: "particles",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/particles.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/particles.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      popover: {
+         name: "popover",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/popover.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/popover.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      progress: {
+         name: "progress",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/progress.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/progress.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "pulsating-button": {
+         name: "pulsating-button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/pulsating-button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/pulsating-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "radio-group": {
+         name: "radio-group",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/radio-group.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/radio-group.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      resizable: {
+         name: "resizable",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/resizable.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/resizable.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "retro-grid": {
+         name: "retro-grid",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/retro-grid.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/retro-grid.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      ripple: {
+         name: "ripple",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/ripple.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/ripple.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-area": {
+         name: "scroll-area",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/scroll-area.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/scroll-area.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-based-velocity": {
+         name: "scroll-based-velocity",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/scroll-based-velocity.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/scroll-based-velocity.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-progress": {
+         name: "scroll-progress",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/scroll-progress.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/scroll-progress.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      select: {
+         name: "select",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/select.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/select.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "separate-away": {
+         name: "separate-away",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/separate-away.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/separate-away.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      separator: {
+         name: "separator",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/separator.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/separator.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      sheet: {
+         name: "sheet",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/sheet.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/sheet.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "shimmer-button": {
+         name: "shimmer-button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/shimmer-button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/shimmer-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "shine-border": {
+         name: "shine-border",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/shine-border.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/shine-border.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "shiny-button": {
+         name: "shiny-button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/shiny-button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/shiny-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      sidebar: {
+         name: "sidebar",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: [
+            "button",
+            "separator",
+            "sheet",
+            "tooltip",
+            "input",
+            "use-mobile",
+            "skeleton",
+         ],
+         files: [
+            {
+               path: "registry/miami/ui/sidebar.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/sidebar.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      skeleton: {
+         name: "skeleton",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/skeleton.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/skeleton.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      slider: {
+         name: "slider",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/slider.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/slider.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      sonner: {
+         name: "sonner",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/sonner.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/sonner.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "sparkles-text": {
+         name: "sparkles-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/sparkles-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/sparkles-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "star-rating": {
+         name: "star-rating",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/star-rating.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/star-rating.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      switch: {
+         name: "switch",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/switch.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/switch.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      stepper: {
+         name: "stepper",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["collapsible"],
+         files: [
+            {
+               path: "registry/miami/ui/stepper.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/stepper.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "scratch-to-reveal": {
+         name: "scratch-to-reveal",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/scratch-to-reveal.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/scratch-to-reveal.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      table: {
+         name: "table",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/table.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/table.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      tabs: {
+         name: "tabs",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/tabs.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/tabs.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      textarea: {
+         name: "textarea",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/textarea.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/textarea.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-reveal": {
+         name: "text-reveal",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/text-reveal.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/text-reveal.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      timeline: {
+         name: "timeline",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/timeline.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/timeline.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      toc: {
+         name: "toc",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/toc.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/toc.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      toast: {
+         name: "toast",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/toast.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+            {
+               path: "registry/miami/hooks/use-toast.ts",
+               type: "registry:hook",
+               target: "",
+            },
+            {
+               path: "registry/miami/ui/toaster.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/toast.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      toggle: {
+         name: "toggle",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/toggle.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/toggle.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group": {
+         name: "toggle-group",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["toggle"],
+         files: [
+            {
+               path: "registry/miami/ui/toggle-group.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/toggle-group.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      tooltip: {
+         name: "tooltip",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/tooltip.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/tooltip.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      tour: {
+         name: "tour",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/tour.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/tour.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "typing-animation": {
+         name: "typing-animation",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/typing-animation.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/typing-animation.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tweet-card": {
+         name: "tweet-card",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/tweet-card.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/tweet-card.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "video-modal": {
+         name: "video-modal",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/video-modal.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/video-modal.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "wavy-text": {
+         name: "wavy-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/wavy-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/wavy-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "word-fade-in": {
+         name: "word-fade-in",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/word-fade-in.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/word-fade-in.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "word-pull-up": {
+         name: "word-pull-up",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/word-pull-up.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/word-pull-up.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "word-rotate": {
+         name: "word-rotate",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/word-rotate.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/word-rotate.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "rainbow-button": {
+         name: "rainbow-button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/rainbow-button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/rainbow-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "flickering-grid": {
+         name: "flickering-grid",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/flickering-grid.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/flickering-grid.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hyper-text": {
+         name: "hyper-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/hyper-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/hyper-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      safari: {
+         name: "safari",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/safari.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/safari.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "iphone-15-pro": {
+         name: "iphone-15-pro",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/iphone-15-pro.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/iphone-15-pro.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-circular-progress-bar": {
+         name: "animated-circular-progress-bar",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/animated-circular-progress-bar.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/ui/animated-circular-progress-bar.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-layout": {
+         name: "grid-layout",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/grid-layout.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/grid-layout.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "globe-grid": {
+         name: "globe-grid",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/globe-grid.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/globe-grid.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "nyx-toc": {
+         name: "nyx-toc",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["popover"],
+         files: [
+            {
+               path: "registry/miami/ui/nyx-toc.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+            {
+               path: "registry/miami/hooks/use-anchor-observer.ts",
+               type: "registry:hook",
+               target: "",
+            },
+            {
+               path: "registry/miami/hooks/use-on-change.ts",
+               type: "registry:hook",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/ui/nyx-toc.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      terminal: {
+         name: "terminal",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/terminal.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/terminal.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "script-copy-btn": {
+         name: "script-copy-btn",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/script-copy-btn.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/script-copy-btn.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate": {
+         name: "text-animate",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/text-animate.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/text-animate.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "line-shadow-text": {
+         name: "line-shadow-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/line-shadow-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/line-shadow-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "aurora-text": {
+         name: "aurora-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/aurora-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/aurora-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "morphing-text": {
+         name: "morphing-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/morphing-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/morphing-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "ripple-button": {
+         name: "ripple-button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/ripple-button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/ripple-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "warp-background": {
+         name: "warp-background",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/warp-background.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/warp-background.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "interactive-grid-pattern": {
+         name: "interactive-grid-pattern",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/ui/interactive-grid-pattern.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/ui/interactive-grid-pattern.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-01": {
+         name: "sidebar-01",
+         description: "A simple sidebar with navigation grouped by section.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "label",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-01/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-01/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-01/components/search-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-01/components/version-switcher.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-01/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-01/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-02": {
+         name: "sidebar-02",
+         description: "A sidebar with collapsible sections.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "label",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-02/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-02/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-02/components/search-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-02/components/version-switcher.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-02/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-02/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-03": {
+         name: "sidebar-03",
+         description: "A sidebar with submenus.",
+         type: "registry:block",
+         registryDependencies: ["sidebar", "breadcrumb"],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-03/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-03/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-03/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-03/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-04": {
+         name: "sidebar-04",
+         description: "A floating sidebar with submenus.",
+         type: "registry:block",
+         registryDependencies: ["sidebar", "breadcrumb", "separator"],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-04/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-04/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-04/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-04/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-05": {
+         name: "sidebar-05",
+         description: "A sidebar with collapsible submenus.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "label",
+            "collapsible",
+         ],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-05/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-05/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-05/components/search-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-05/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-05/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-06": {
+         name: "sidebar-06",
+         description: "A sidebar with submenus as dropdowns.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "card",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-06/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-06/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-06/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-06/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-06/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-07": {
+         name: "sidebar-07",
+         description: "A sidebar that collapses to icons.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-07/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-07/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-07/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-07/components/nav-projects.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-07/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-07/components/team-switcher.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-07/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-07/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-08": {
+         name: "sidebar-08",
+         description: "An inset sidebar with secondary navigation.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-08/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-08/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-08/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-08/components/nav-projects.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-08/components/nav-secondary.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-08/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-08/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-08/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-09": {
+         name: "sidebar-09",
+         description: "Collapsible nested sidebars.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+            "switch",
+         ],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-09/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-09/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-09/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-09/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-09/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-10": {
+         name: "sidebar-10",
+         description: "A sidebar in a popover.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "popover",
+            "collapsible",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-10/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-10/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-10/components/nav-actions.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-10/components/nav-favorites.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-10/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-10/components/nav-secondary.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-10/components/nav-workspaces.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-10/components/team-switcher.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-10/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-10/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-11": {
+         name: "sidebar-11",
+         description: "A sidebar with a collapsible file tree.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+         ],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-11/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-11/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-11/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-11/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-12": {
+         name: "sidebar-12",
+         description: "A sidebar with a calendar.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "calendar",
+            "dropdown-menu",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-12/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-12/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-12/components/calendars.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-12/components/date-picker.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-12/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-12/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-12/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-13": {
+         name: "sidebar-13",
+         description: "A sidebar in a dialog.",
+         type: "registry:block",
+         registryDependencies: ["sidebar", "breadcrumb", "button", "dialog"],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-13/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-13/components/settings-dialog.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-13/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-13/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-14": {
+         name: "sidebar-14",
+         description: "A sidebar on the right.",
+         type: "registry:block",
+         registryDependencies: ["sidebar", "breadcrumb"],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-14/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-14/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-14/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-14/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-15": {
+         name: "sidebar-15",
+         description: "A left and right sidebar.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "popover",
+            "collapsible",
+            "dropdown-menu",
+            "calendar",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-15/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-15/components/calendars.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-15/components/date-picker.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-15/components/nav-favorites.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-15/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-15/components/nav-secondary.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-15/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-15/components/nav-workspaces.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-15/components/sidebar-left.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-15/components/sidebar-right.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-15/components/team-switcher.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-15/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-15/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-16": {
+         name: "sidebar-16",
+         description: "A sidebar with a sticky site header.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+            "button",
+         ],
+         files: [
+            {
+               path: "registry/miami/blocks/sidebar-16/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-16/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-16/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-16/components/nav-projects.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-16/components/nav-secondary.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-16/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-16/components/search-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/blocks/sidebar-16/components/site-header.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/sidebar-16/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/sidebar-16/page.tsx",
+         meta: undefined,
+      },
+      "login-01": {
+         name: "login-01",
+         description: "A simple login form.",
+         type: "registry:block",
+         registryDependencies: ["button", "card", "input", "label"],
+         files: [
+            {
+               path: "registry/miami/blocks/login-01/page.tsx",
+               type: "registry:page",
+               target: "app/login/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/login-01/components/login-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["authentication", "login"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/login-01/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/login-01/page.tsx",
+         meta: undefined,
+      },
+      "login-02": {
+         name: "login-02",
+         description: "A two column login page with a cover image.",
+         type: "registry:block",
+         registryDependencies: ["button", "card", "input", "label"],
+         files: [
+            {
+               path: "registry/miami/blocks/login-02/page.tsx",
+               type: "registry:page",
+               target: "app/login/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/login-02/components/login-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["authentication", "login"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/login-02/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/login-02/page.tsx",
+         meta: undefined,
+      },
+      "login-03": {
+         name: "login-03",
+         description: "A login page with a muted background color.",
+         type: "registry:block",
+         registryDependencies: ["button", "card", "input", "label"],
+         files: [
+            {
+               path: "registry/miami/blocks/login-03/page.tsx",
+               type: "registry:page",
+               target: "app/login/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/login-03/components/login-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["authentication", "login"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/login-03/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/login-03/page.tsx",
+         meta: undefined,
+      },
+      "login-04": {
+         name: "login-04",
+         description: "A login page with form and image.",
+         type: "registry:block",
+         registryDependencies: ["button", "card", "input", "label"],
+         files: [
+            {
+               path: "registry/miami/blocks/login-04/page.tsx",
+               type: "registry:page",
+               target: "app/login/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/login-04/components/login-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["authentication", "login"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/login-04/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/login-04/page.tsx",
+         meta: undefined,
+      },
+      "login-05": {
+         name: "login-05",
+         description: "A simple email-only login page.",
+         type: "registry:block",
+         registryDependencies: ["button", "card", "input", "label"],
+         files: [
+            {
+               path: "registry/miami/blocks/login-05/page.tsx",
+               type: "registry:page",
+               target: "app/login/page.tsx",
+            },
+            {
+               path: "registry/miami/blocks/login-05/components/login-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["authentication", "login"],
+         component: React.lazy(
+            () => import("~/registry/miami/blocks/login-05/page.tsx"),
+         ),
+         source: "__registry__/miami/blocks/login-05/page.tsx",
+         meta: undefined,
+      },
+      "chart-area-axes": {
+         name: "chart-area-axes",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-area-axes.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-area-axes.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-area-axes.tsx",
+         meta: undefined,
+      },
+      "chart-area-default": {
+         name: "chart-area-default",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-area-default.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-area-default.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-area-default.tsx",
+         meta: undefined,
+      },
+      "chart-area-gradient": {
+         name: "chart-area-gradient",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-area-gradient.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-area-gradient.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-area-gradient.tsx",
+         meta: undefined,
+      },
+      "chart-area-icons": {
+         name: "chart-area-icons",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-area-icons.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-area-icons.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-area-icons.tsx",
+         meta: undefined,
+      },
+      "chart-area-interactive": {
+         name: "chart-area-interactive",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart", "select"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-area-interactive.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-area-interactive.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-area-interactive.tsx",
+         meta: undefined,
+      },
+      "chart-area-legend": {
+         name: "chart-area-legend",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-area-legend.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-area-legend.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-area-legend.tsx",
+         meta: undefined,
+      },
+      "chart-area-linear": {
+         name: "chart-area-linear",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-area-linear.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-area-linear.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-area-linear.tsx",
+         meta: undefined,
+      },
+      "chart-area-stacked-expand": {
+         name: "chart-area-stacked-expand",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-area-stacked-expand.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/charts/chart-area-stacked-expand.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-area-stacked-expand.tsx",
+         meta: undefined,
+      },
+      "chart-area-stacked": {
+         name: "chart-area-stacked",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-area-stacked.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-area-stacked.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-area-stacked.tsx",
+         meta: undefined,
+      },
+      "chart-area-step": {
+         name: "chart-area-step",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-area-step.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-area-step.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-area-step.tsx",
+         meta: undefined,
+      },
+      "chart-bar-active": {
+         name: "chart-bar-active",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-bar-active.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-bar-active.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-bar-active.tsx",
+         meta: undefined,
+      },
+      "chart-bar-default": {
+         name: "chart-bar-default",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-bar-default.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-bar-default.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-bar-default.tsx",
+         meta: undefined,
+      },
+      "chart-bar-horizontal": {
+         name: "chart-bar-horizontal",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-bar-horizontal.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-bar-horizontal.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-bar-horizontal.tsx",
+         meta: undefined,
+      },
+      "chart-bar-interactive": {
+         name: "chart-bar-interactive",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-bar-interactive.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-bar-interactive.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-bar-interactive.tsx",
+         meta: undefined,
+      },
+      "chart-bar-label-custom": {
+         name: "chart-bar-label-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-bar-label-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-bar-label-custom.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-bar-label-custom.tsx",
+         meta: undefined,
+      },
+      "chart-bar-label": {
+         name: "chart-bar-label",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-bar-label.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-bar-label.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-bar-label.tsx",
+         meta: undefined,
+      },
+      "chart-bar-mixed": {
+         name: "chart-bar-mixed",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-bar-mixed.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-bar-mixed.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-bar-mixed.tsx",
+         meta: undefined,
+      },
+      "chart-bar-multiple": {
+         name: "chart-bar-multiple",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-bar-multiple.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-bar-multiple.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-bar-multiple.tsx",
+         meta: undefined,
+      },
+      "chart-bar-negative": {
+         name: "chart-bar-negative",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-bar-negative.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-bar-negative.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-bar-negative.tsx",
+         meta: undefined,
+      },
+      "chart-bar-stacked": {
+         name: "chart-bar-stacked",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-bar-stacked.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-bar-stacked.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-bar-stacked.tsx",
+         meta: undefined,
+      },
+      "chart-line-default": {
+         name: "chart-line-default",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-line-default.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-line-default.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-line-default.tsx",
+         meta: undefined,
+      },
+      "chart-line-dots-colors": {
+         name: "chart-line-dots-colors",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-line-dots-colors.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-line-dots-colors.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-line-dots-colors.tsx",
+         meta: undefined,
+      },
+      "chart-line-dots-custom": {
+         name: "chart-line-dots-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-line-dots-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-line-dots-custom.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-line-dots-custom.tsx",
+         meta: undefined,
+      },
+      "chart-line-dots": {
+         name: "chart-line-dots",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-line-dots.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-line-dots.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-line-dots.tsx",
+         meta: undefined,
+      },
+      "chart-line-interactive": {
+         name: "chart-line-interactive",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-line-interactive.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-line-interactive.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-line-interactive.tsx",
+         meta: undefined,
+      },
+      "chart-line-label-custom": {
+         name: "chart-line-label-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-line-label-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-line-label-custom.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-line-label-custom.tsx",
+         meta: undefined,
+      },
+      "chart-line-label": {
+         name: "chart-line-label",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-line-label.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-line-label.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-line-label.tsx",
+         meta: undefined,
+      },
+      "chart-line-linear": {
+         name: "chart-line-linear",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-line-linear.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-line-linear.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-line-linear.tsx",
+         meta: undefined,
+      },
+      "chart-line-multiple": {
+         name: "chart-line-multiple",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-line-multiple.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-line-multiple.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-line-multiple.tsx",
+         meta: undefined,
+      },
+      "chart-line-step": {
+         name: "chart-line-step",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-line-step.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-line-step.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-line-step.tsx",
+         meta: undefined,
+      },
+      "chart-pie-donut-active": {
+         name: "chart-pie-donut-active",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-pie-donut-active.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-pie-donut-active.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-pie-donut-active.tsx",
+         meta: undefined,
+      },
+      "chart-pie-donut-text": {
+         name: "chart-pie-donut-text",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-pie-donut-text.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-pie-donut-text.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-pie-donut-text.tsx",
+         meta: undefined,
+      },
+      "chart-pie-donut": {
+         name: "chart-pie-donut",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-pie-donut.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-pie-donut.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-pie-donut.tsx",
+         meta: undefined,
+      },
+      "chart-pie-interactive": {
+         name: "chart-pie-interactive",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-pie-interactive.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-pie-interactive.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-pie-interactive.tsx",
+         meta: undefined,
+      },
+      "chart-pie-label-custom": {
+         name: "chart-pie-label-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-pie-label-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-pie-label-custom.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-pie-label-custom.tsx",
+         meta: undefined,
+      },
+      "chart-pie-label-list": {
+         name: "chart-pie-label-list",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-pie-label-list.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-pie-label-list.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-pie-label-list.tsx",
+         meta: undefined,
+      },
+      "chart-pie-label": {
+         name: "chart-pie-label",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-pie-label.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-pie-label.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-pie-label.tsx",
+         meta: undefined,
+      },
+      "chart-pie-legend": {
+         name: "chart-pie-legend",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-pie-legend.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-pie-legend.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-pie-legend.tsx",
+         meta: undefined,
+      },
+      "chart-pie-separator-none": {
+         name: "chart-pie-separator-none",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-pie-separator-none.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/charts/chart-pie-separator-none.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-pie-separator-none.tsx",
+         meta: undefined,
+      },
+      "chart-pie-simple": {
+         name: "chart-pie-simple",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-pie-simple.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-pie-simple.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-pie-simple.tsx",
+         meta: undefined,
+      },
+      "chart-pie-stacked": {
+         name: "chart-pie-stacked",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-pie-stacked.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-pie-stacked.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-pie-stacked.tsx",
+         meta: undefined,
+      },
+      "chart-radar-default": {
+         name: "chart-radar-default",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-default.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radar-default.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radar-default.tsx",
+         meta: undefined,
+      },
+      "chart-radar-dots": {
+         name: "chart-radar-dots",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-dots.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radar-dots.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radar-dots.tsx",
+         meta: undefined,
+      },
+      "chart-radar-grid-circle-fill": {
+         name: "chart-radar-grid-circle-fill",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-grid-circle-fill.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/charts/chart-radar-grid-circle-fill.tsx"
+               ),
+         ),
+         source: "__registry__/miami/charts/chart-radar-grid-circle-fill.tsx",
+         meta: undefined,
+      },
+      "chart-radar-grid-circle-no-lines": {
+         name: "chart-radar-grid-circle-no-lines",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-grid-circle-no-lines.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/charts/chart-radar-grid-circle-no-lines.tsx"
+               ),
+         ),
+         source:
+            "__registry__/miami/charts/chart-radar-grid-circle-no-lines.tsx",
+         meta: undefined,
+      },
+      "chart-radar-grid-circle": {
+         name: "chart-radar-grid-circle",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-grid-circle.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radar-grid-circle.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radar-grid-circle.tsx",
+         meta: undefined,
+      },
+      "chart-radar-grid-custom": {
+         name: "chart-radar-grid-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-grid-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radar-grid-custom.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radar-grid-custom.tsx",
+         meta: undefined,
+      },
+      "chart-radar-grid-fill": {
+         name: "chart-radar-grid-fill",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-grid-fill.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radar-grid-fill.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radar-grid-fill.tsx",
+         meta: undefined,
+      },
+      "chart-radar-grid-none": {
+         name: "chart-radar-grid-none",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-grid-none.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radar-grid-none.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radar-grid-none.tsx",
+         meta: undefined,
+      },
+      "chart-radar-icons": {
+         name: "chart-radar-icons",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-icons.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radar-icons.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radar-icons.tsx",
+         meta: undefined,
+      },
+      "chart-radar-label-custom": {
+         name: "chart-radar-label-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-label-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/charts/chart-radar-label-custom.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radar-label-custom.tsx",
+         meta: undefined,
+      },
+      "chart-radar-legend": {
+         name: "chart-radar-legend",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-legend.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radar-legend.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radar-legend.tsx",
+         meta: undefined,
+      },
+      "chart-radar-lines-only": {
+         name: "chart-radar-lines-only",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-lines-only.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radar-lines-only.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radar-lines-only.tsx",
+         meta: undefined,
+      },
+      "chart-radar-multiple": {
+         name: "chart-radar-multiple",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-multiple.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radar-multiple.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radar-multiple.tsx",
+         meta: undefined,
+      },
+      "chart-radar-radius": {
+         name: "chart-radar-radius",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radar-radius.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radar-radius.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radar-radius.tsx",
+         meta: undefined,
+      },
+      "chart-radial-grid": {
+         name: "chart-radial-grid",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radial-grid.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radial"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radial-grid.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radial-grid.tsx",
+         meta: undefined,
+      },
+      "chart-radial-label": {
+         name: "chart-radial-label",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radial-label.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radial"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radial-label.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radial-label.tsx",
+         meta: undefined,
+      },
+      "chart-radial-shape": {
+         name: "chart-radial-shape",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radial-shape.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radial"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radial-shape.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radial-shape.tsx",
+         meta: undefined,
+      },
+      "chart-radial-simple": {
+         name: "chart-radial-simple",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radial-simple.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radial"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radial-simple.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radial-simple.tsx",
+         meta: undefined,
+      },
+      "chart-radial-stacked": {
+         name: "chart-radial-stacked",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radial-stacked.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radial"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radial-stacked.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radial-stacked.tsx",
+         meta: undefined,
+      },
+      "chart-radial-text": {
+         name: "chart-radial-text",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-radial-text.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radial"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-radial-text.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-radial-text.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-default": {
+         name: "chart-tooltip-default",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-tooltip-default.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-tooltip-default.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-tooltip-default.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-indicator-line": {
+         name: "chart-tooltip-indicator-line",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-tooltip-indicator-line.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/charts/chart-tooltip-indicator-line.tsx"
+               ),
+         ),
+         source: "__registry__/miami/charts/chart-tooltip-indicator-line.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-indicator-none": {
+         name: "chart-tooltip-indicator-none",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-tooltip-indicator-none.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/charts/chart-tooltip-indicator-none.tsx"
+               ),
+         ),
+         source: "__registry__/miami/charts/chart-tooltip-indicator-none.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-label-none": {
+         name: "chart-tooltip-label-none",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-tooltip-label-none.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/charts/chart-tooltip-label-none.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-tooltip-label-none.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-label-custom": {
+         name: "chart-tooltip-label-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-tooltip-label-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/charts/chart-tooltip-label-custom.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-tooltip-label-custom.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-label-formatter": {
+         name: "chart-tooltip-label-formatter",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-tooltip-label-formatter.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/charts/chart-tooltip-label-formatter.tsx"
+               ),
+         ),
+         source: "__registry__/miami/charts/chart-tooltip-label-formatter.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-formatter": {
+         name: "chart-tooltip-formatter",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-tooltip-formatter.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-tooltip-formatter.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-tooltip-formatter.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-icons": {
+         name: "chart-tooltip-icons",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-tooltip-icons.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-tooltip-icons.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-tooltip-icons.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-advanced": {
+         name: "chart-tooltip-advanced",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/miami/charts/chart-tooltip-advanced.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () => import("~/registry/miami/charts/chart-tooltip-advanced.tsx"),
+         ),
+         source: "__registry__/miami/charts/chart-tooltip-advanced.tsx",
+         meta: undefined,
+      },
+      utils: {
+         name: "utils",
+         description: "",
+         type: "registry:lib",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/lib/utils.ts",
+               type: "registry:lib",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/miami/lib/utils.ts")),
+         source: "",
+         meta: undefined,
+      },
+      "use-mobile": {
+         name: "use-mobile",
+         description: "",
+         type: "registry:hook",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/hooks/use-mobile.tsx",
+               type: "registry:hook",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/hooks/use-mobile.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "use-toast": {
+         name: "use-toast",
+         description: "",
+         type: "registry:hook",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/hooks/use-toast.ts",
+               type: "registry:hook",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/hooks/use-toast.ts"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "use-anchor-observer": {
+         name: "use-anchor-observer",
+         description: "",
+         type: "registry:hook",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/hooks/use-anchor-observer.ts",
+               type: "registry:hook",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/hooks/use-anchor-observer.ts"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "use-on-change": {
+         name: "use-on-change",
+         description: "",
+         type: "registry:hook",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/hooks/use-on-change.ts",
+               type: "registry:hook",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/hooks/use-on-change.ts"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      sink: {
+         name: "sink",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "accordion",
+            "alert",
+            "alert-dialog",
+            "aspect-ratio",
+            "avatar",
+            "badge",
+            "breadcrumb",
+            "button",
+            "calendar",
+            "card",
+            "carousel",
+            "chart",
+            "checkbox",
+            "collapsible",
+            "command",
+            "context-menu",
+            "dialog",
+            "drawer",
+            "dropdown-menu",
+            "hover-card",
+            "input",
+            "input-otp",
+            "label",
+            "menubar",
+            "navigation-menu",
+            "pagination",
+            "popover",
+            "progress",
+            "radio-group",
+            "resizable",
+            "scroll-area",
+            "select",
+            "separator",
+            "sheet",
+            "sidebar",
+            "skeleton",
+            "slider",
+            "sonner",
+            "switch",
+            "table",
+            "tabs",
+            "textarea",
+            "toast",
+            "toggle",
+            "toggle-group",
+            "tooltip",
+         ],
+         files: [
+            {
+               path: "registry/miami/internal/sink/page.tsx",
+               type: "registry:page",
+               target: "app/sink/page.tsx",
+            },
+            {
+               path: "registry/miami/internal/sink/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/component-wrapper.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/nav-projects.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/team-switcher.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/accordion-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/alert-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/alert-dialog-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/aspect-ratio-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/avatar-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/badge-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/breadcrumb-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/button-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/calendar-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/card-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/carousel-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/checkbox-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/collapsible-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/combobox-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/command-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/context-menu-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/date-picker-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/dialog-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/drawer-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/dropdown-menu-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/hover-card-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/input-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/input-otp-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/label-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/menubar-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/navigation-menu-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/pagination-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/popover-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/progress-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/radio-group-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/resizable-handle.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/scroll-area-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/select-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/separator-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/sheet-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/skeleton-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/slider-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/sonner-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/switch-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/table-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/tabs-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/textarea-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/toast-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/toggle-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/toggle-group-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/tooltip-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/badge-destructive.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/badge-outline.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/badge-secondary.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/button-destructive.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/button-ghost.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/button-link.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/button-loading.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/button-outline.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/button-secondary.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/button-with-icon.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/toggle-disabled.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/toggle-outline.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/miami/internal/sink/components/toggle-with-text.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sink/page.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-demo": {
+         name: "sidebar-demo",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-header": {
+         name: "sidebar-header",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-header.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-header.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-footer": {
+         name: "sidebar-footer",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-footer.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-footer.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-group": {
+         name: "sidebar-group",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-group.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-group.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-group-collapsible": {
+         name: "sidebar-group-collapsible",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-group-collapsible.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/internal/sidebar-group-collapsible.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-group-action": {
+         name: "sidebar-group-action",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-group-action.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-group-action.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-menu": {
+         name: "sidebar-menu",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-menu.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-menu.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-menu-action": {
+         name: "sidebar-menu-action",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-menu-action.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-menu-action.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-menu-sub": {
+         name: "sidebar-menu-sub",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-menu-sub.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-menu-sub.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-menu-collapsible": {
+         name: "sidebar-menu-collapsible",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-menu-collapsible.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/internal/sidebar-menu-collapsible.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-menu-badge": {
+         name: "sidebar-menu-badge",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-menu-badge.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-menu-badge.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-rsc": {
+         name: "sidebar-rsc",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-rsc.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-rsc.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-controlled": {
+         name: "sidebar-controlled",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-controlled.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-controlled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-01": {
+         name: "v0-sidebar-01",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "label",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-01.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-01.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-02": {
+         name: "v0-sidebar-02",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "label",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-02.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-02.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-03": {
+         name: "v0-sidebar-03",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: ["sidebar", "breadcrumb"],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-03.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-03.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-04": {
+         name: "v0-sidebar-04",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: ["sidebar", "breadcrumb", "separator"],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-04.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-04.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-05": {
+         name: "v0-sidebar-05",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "label",
+            "collapsible",
+         ],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-05.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-05.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-06": {
+         name: "v0-sidebar-06",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "card",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-06.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-06.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-07": {
+         name: "v0-sidebar-07",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-07.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-07.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-08": {
+         name: "v0-sidebar-08",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-08.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-08.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-09": {
+         name: "v0-sidebar-09",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+            "switch",
+         ],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-09.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-09.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-10": {
+         name: "v0-sidebar-10",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "popover",
+            "collapsible",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-10.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-10.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-11": {
+         name: "v0-sidebar-11",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+         ],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-11.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-11.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-12": {
+         name: "v0-sidebar-12",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "calendar",
+            "dropdown-menu",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-12.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-12.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-13": {
+         name: "v0-sidebar-13",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: ["sidebar", "breadcrumb", "button", "dialog"],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-13.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-13.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-14": {
+         name: "v0-sidebar-14",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: ["sidebar", "breadcrumb"],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-14.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-14.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-15": {
+         name: "v0-sidebar-15",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "popover",
+            "collapsible",
+            "dropdown-menu",
+            "calendar",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/miami/internal/sidebar-15.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/sidebar-15.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-login-01": {
+         name: "v0-login-01",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: ["button", "card", "input", "label"],
+         files: [
+            {
+               path: "registry/miami/internal/login-01.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/internal/login-01.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "accordion-demo": {
+         name: "accordion-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["accordion"],
+         files: [
+            {
+               path: "registry/miami/examples/accordion-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/accordion-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "alert-demo": {
+         name: "alert-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["alert"],
+         files: [
+            {
+               path: "registry/miami/examples/alert-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/alert-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "alert-destructive": {
+         name: "alert-destructive",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["alert"],
+         files: [
+            {
+               path: "registry/miami/examples/alert-destructive.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/alert-destructive.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "alert-dialog-demo": {
+         name: "alert-dialog-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["alert-dialog", "button"],
+         files: [
+            {
+               path: "registry/miami/examples/alert-dialog-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/alert-dialog-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "aspect-ratio-demo": {
+         name: "aspect-ratio-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["aspect-ratio"],
+         files: [
+            {
+               path: "registry/miami/examples/aspect-ratio-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/aspect-ratio-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "avatar-demo": {
+         name: "avatar-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["avatar"],
+         files: [
+            {
+               path: "registry/miami/examples/avatar-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/avatar-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "badge-demo": {
+         name: "badge-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["badge"],
+         files: [
+            {
+               path: "registry/miami/examples/badge-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/badge-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "badge-destructive": {
+         name: "badge-destructive",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["badge"],
+         files: [
+            {
+               path: "registry/miami/examples/badge-destructive.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/badge-destructive.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "badge-outline": {
+         name: "badge-outline",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["badge"],
+         files: [
+            {
+               path: "registry/miami/examples/badge-outline.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/badge-outline.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "badge-secondary": {
+         name: "badge-secondary",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["badge"],
+         files: [
+            {
+               path: "registry/miami/examples/badge-secondary.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/badge-secondary.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "breadcrumb-demo": {
+         name: "breadcrumb-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["breadcrumb"],
+         files: [
+            {
+               path: "registry/miami/examples/breadcrumb-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/breadcrumb-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "breadcrumb-separator": {
+         name: "breadcrumb-separator",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["breadcrumb"],
+         files: [
+            {
+               path: "registry/miami/examples/breadcrumb-separator.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/breadcrumb-separator.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "breadcrumb-dropdown": {
+         name: "breadcrumb-dropdown",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["breadcrumb"],
+         files: [
+            {
+               path: "registry/miami/examples/breadcrumb-dropdown.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/breadcrumb-dropdown.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "breadcrumb-ellipsis": {
+         name: "breadcrumb-ellipsis",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["breadcrumb"],
+         files: [
+            {
+               path: "registry/miami/examples/breadcrumb-ellipsis.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/breadcrumb-ellipsis.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "breadcrumb-link": {
+         name: "breadcrumb-link",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["breadcrumb"],
+         files: [
+            {
+               path: "registry/miami/examples/breadcrumb-link.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/breadcrumb-link.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "breadcrumb-responsive": {
+         name: "breadcrumb-responsive",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["breadcrumb"],
+         files: [
+            {
+               path: "registry/miami/examples/breadcrumb-responsive.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/breadcrumb-responsive.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-demo": {
+         name: "button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/examples/button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/button-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-secondary": {
+         name: "button-secondary",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/examples/button-secondary.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/button-secondary.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-destructive": {
+         name: "button-destructive",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/examples/button-destructive.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/button-destructive.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-outline": {
+         name: "button-outline",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/examples/button-outline.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/button-outline.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-ghost": {
+         name: "button-ghost",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/examples/button-ghost.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/button-ghost.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-link": {
+         name: "button-link",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/examples/button-link.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/button-link.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-with-icon": {
+         name: "button-with-icon",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/examples/button-with-icon.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/button-with-icon.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-loading": {
+         name: "button-loading",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/examples/button-loading.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/button-loading.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-icon": {
+         name: "button-icon",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/examples/button-icon.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/button-icon.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-as-child": {
+         name: "button-as-child",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/miami/examples/button-as-child.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/button-as-child.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "pulsating-button-demo": {
+         name: "pulsating-button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/pulsating-button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/pulsating-button-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "calendar-demo": {
+         name: "calendar-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["calendar"],
+         files: [
+            {
+               path: "registry/miami/examples/calendar-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/calendar-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "calendar-form": {
+         name: "calendar-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["calendar", "form", "popover"],
+         files: [
+            {
+               path: "registry/miami/examples/calendar-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/calendar-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "card-demo": {
+         name: "card-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["card", "button", "switch"],
+         files: [
+            {
+               path: "registry/miami/examples/card-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/card-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "card-with-form": {
+         name: "card-with-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "card", "input", "label", "select"],
+         files: [
+            {
+               path: "registry/miami/examples/card-with-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/card-with-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-demo": {
+         name: "carousel-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/miami/examples/carousel-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/carousel-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-size": {
+         name: "carousel-size",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/miami/examples/carousel-size.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/carousel-size.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-spacing": {
+         name: "carousel-spacing",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/miami/examples/carousel-spacing.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/carousel-spacing.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-orientation": {
+         name: "carousel-orientation",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/miami/examples/carousel-orientation.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/carousel-orientation.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-dots": {
+         name: "carousel-dots",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/miami/examples/carousel-dots.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/carousel-dots.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-api": {
+         name: "carousel-api",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/miami/examples/carousel-api.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/carousel-api.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-plugin": {
+         name: "carousel-plugin",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/miami/examples/carousel-plugin.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/carousel-plugin.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "checkbox-demo": {
+         name: "checkbox-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["checkbox"],
+         files: [
+            {
+               path: "registry/miami/examples/checkbox-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/checkbox-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "checkbox-disabled": {
+         name: "checkbox-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["checkbox"],
+         files: [
+            {
+               path: "registry/miami/examples/checkbox-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/checkbox-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "checkbox-form-multiple": {
+         name: "checkbox-form-multiple",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["checkbox", "form"],
+         files: [
+            {
+               path: "registry/miami/examples/checkbox-form-multiple.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/checkbox-form-multiple.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "checkbox-form-single": {
+         name: "checkbox-form-single",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["checkbox", "form"],
+         files: [
+            {
+               path: "registry/miami/examples/checkbox-form-single.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/checkbox-form-single.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "checkbox-with-text": {
+         name: "checkbox-with-text",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["checkbox"],
+         files: [
+            {
+               path: "registry/miami/examples/checkbox-with-text.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/checkbox-with-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "collapsible-demo": {
+         name: "collapsible-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["collapsible"],
+         files: [
+            {
+               path: "registry/miami/examples/collapsible-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/collapsible-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "combobox-demo": {
+         name: "combobox-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["command"],
+         files: [
+            {
+               path: "registry/miami/examples/combobox-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/combobox-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "combobox-dropdown-menu": {
+         name: "combobox-dropdown-menu",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["command", "dropdown-menu", "button"],
+         files: [
+            {
+               path: "registry/miami/examples/combobox-dropdown-menu.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/combobox-dropdown-menu.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "combobox-form": {
+         name: "combobox-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["command", "form"],
+         files: [
+            {
+               path: "registry/miami/examples/combobox-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/combobox-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "combobox-popover": {
+         name: "combobox-popover",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["combobox", "popover"],
+         files: [
+            {
+               path: "registry/miami/examples/combobox-popover.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/combobox-popover.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "combobox-responsive": {
+         name: "combobox-responsive",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["combobox", "popover", "drawer"],
+         files: [
+            {
+               path: "registry/miami/examples/combobox-responsive.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/combobox-responsive.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "command-demo": {
+         name: "command-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["command"],
+         files: [
+            {
+               path: "registry/miami/examples/command-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/command-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "command-dialog": {
+         name: "command-dialog",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["command", "dialog"],
+         files: [
+            {
+               path: "registry/miami/examples/command-dialog.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/command-dialog.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "context-menu-demo": {
+         name: "context-menu-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["context-menu"],
+         files: [
+            {
+               path: "registry/miami/examples/context-menu-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/context-menu-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "data-table-demo": {
+         name: "data-table-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["data-table"],
+         files: [
+            {
+               path: "registry/miami/examples/data-table-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/data-table-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "date-picker-demo": {
+         name: "date-picker-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "calendar", "popover"],
+         files: [
+            {
+               path: "registry/miami/examples/date-picker-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/date-picker-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "date-picker-form": {
+         name: "date-picker-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "calendar", "form", "popover"],
+         files: [
+            {
+               path: "registry/miami/examples/date-picker-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/date-picker-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "date-picker-with-presets": {
+         name: "date-picker-with-presets",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "calendar", "popover", "select"],
+         files: [
+            {
+               path: "registry/miami/examples/date-picker-with-presets.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/date-picker-with-presets.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "date-picker-with-range": {
+         name: "date-picker-with-range",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "calendar", "popover"],
+         files: [
+            {
+               path: "registry/miami/examples/date-picker-with-range.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/date-picker-with-range.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dialog-demo": {
+         name: "dialog-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["dialog"],
+         files: [
+            {
+               path: "registry/miami/examples/dialog-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/dialog-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dialog-close-button": {
+         name: "dialog-close-button",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["dialog", "button"],
+         files: [
+            {
+               path: "registry/miami/examples/dialog-close-button.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/dialog-close-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "drawer-demo": {
+         name: "drawer-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["drawer"],
+         files: [
+            {
+               path: "registry/miami/examples/drawer-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/drawer-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "drawer-dialog": {
+         name: "drawer-dialog",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["drawer", "dialog"],
+         files: [
+            {
+               path: "registry/miami/examples/drawer-dialog.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/drawer-dialog.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dropdown-menu-demo": {
+         name: "dropdown-menu-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["dropdown-menu"],
+         files: [
+            {
+               path: "registry/miami/examples/dropdown-menu-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/dropdown-menu-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dropdown-menu-checkboxes": {
+         name: "dropdown-menu-checkboxes",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["dropdown-menu", "checkbox"],
+         files: [
+            {
+               path: "registry/miami/examples/dropdown-menu-checkboxes.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/dropdown-menu-checkboxes.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dropdown-menu-radio-group": {
+         name: "dropdown-menu-radio-group",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["dropdown-menu", "radio-group"],
+         files: [
+            {
+               path: "registry/miami/examples/dropdown-menu-radio-group.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/dropdown-menu-radio-group.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hover-card-demo": {
+         name: "hover-card-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["hover-card"],
+         files: [
+            {
+               path: "registry/miami/examples/hover-card-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/hover-card-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-demo": {
+         name: "input-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input"],
+         files: [
+            {
+               path: "registry/miami/examples/input-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-disabled": {
+         name: "input-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input"],
+         files: [
+            {
+               path: "registry/miami/examples/input-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-file": {
+         name: "input-file",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input"],
+         files: [
+            {
+               path: "registry/miami/examples/input-file.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-file.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-form": {
+         name: "input-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input", "button", "form"],
+         files: [
+            {
+               path: "registry/miami/examples/input-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-with-button": {
+         name: "input-with-button",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input", "button"],
+         files: [
+            {
+               path: "registry/miami/examples/input-with-button.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-with-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-with-label": {
+         name: "input-with-label",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input", "button", "label"],
+         files: [
+            {
+               path: "registry/miami/examples/input-with-label.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-with-label.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-with-text": {
+         name: "input-with-text",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input", "button", "label"],
+         files: [
+            {
+               path: "registry/miami/examples/input-with-text.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-with-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp-demo": {
+         name: "input-otp-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input-otp"],
+         files: [
+            {
+               path: "registry/miami/examples/input-otp-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-otp-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp-pattern": {
+         name: "input-otp-pattern",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input-otp"],
+         files: [
+            {
+               path: "registry/miami/examples/input-otp-pattern.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-otp-pattern.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp-separator": {
+         name: "input-otp-separator",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input-otp"],
+         files: [
+            {
+               path: "registry/miami/examples/input-otp-separator.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-otp-separator.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp-controlled": {
+         name: "input-otp-controlled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input-otp"],
+         files: [
+            {
+               path: "registry/miami/examples/input-otp-controlled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-otp-controlled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp-form": {
+         name: "input-otp-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input-otp", "form"],
+         files: [
+            {
+               path: "registry/miami/examples/input-otp-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-otp-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp-disabled": {
+         name: "input-otp-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input-otp", "form"],
+         files: [
+            {
+               path: "registry/miami/examples/input-otp-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-otp-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone-default": {
+         name: "input-phone-default",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "input", "popover"],
+         files: [
+            {
+               path: "registry/miami/examples/input-phone-default.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-phone-default.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone-demo": {
+         name: "input-phone-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "input", "popover"],
+         files: [
+            {
+               path: "registry/miami/examples/input-phone-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-phone-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone-form": {
+         name: "input-phone-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "input", "popover"],
+         files: [
+            {
+               path: "registry/miami/examples/input-phone-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-phone-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone-initial": {
+         name: "input-phone-initial",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "input", "popover"],
+         files: [
+            {
+               path: "registry/miami/examples/input-phone-initial.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-phone-initial.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone-international": {
+         name: "input-phone-international",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "input", "popover"],
+         files: [
+            {
+               path: "registry/miami/examples/input-phone-international.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/input-phone-international.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone-national": {
+         name: "input-phone-national",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "input", "popover"],
+         files: [
+            {
+               path: "registry/miami/examples/input-phone-national.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/input-phone-national.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "label-demo": {
+         name: "label-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["label"],
+         files: [
+            {
+               path: "registry/miami/examples/label-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/label-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "menubar-demo": {
+         name: "menubar-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["menubar"],
+         files: [
+            {
+               path: "registry/miami/examples/menubar-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/menubar-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "navigation-menu-demo": {
+         name: "navigation-menu-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["navigation-menu"],
+         files: [
+            {
+               path: "registry/miami/examples/navigation-menu-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/navigation-menu-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "pagination-demo": {
+         name: "pagination-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["pagination"],
+         files: [
+            {
+               path: "registry/miami/examples/pagination-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/pagination-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "popover-demo": {
+         name: "popover-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["popover"],
+         files: [
+            {
+               path: "registry/miami/examples/popover-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/popover-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "progress-demo": {
+         name: "progress-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["progress"],
+         files: [
+            {
+               path: "registry/miami/examples/progress-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/progress-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "radio-group-demo": {
+         name: "radio-group-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["radio-group"],
+         files: [
+            {
+               path: "registry/miami/examples/radio-group-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/radio-group-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "radio-group-form": {
+         name: "radio-group-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["radio-group", "form"],
+         files: [
+            {
+               path: "registry/miami/examples/radio-group-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/radio-group-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "resizable-demo": {
+         name: "resizable-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["resizable"],
+         files: [
+            {
+               path: "registry/miami/examples/resizable-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/resizable-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "resizable-demo-with-handle": {
+         name: "resizable-demo-with-handle",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["resizable"],
+         files: [
+            {
+               path: "registry/miami/examples/resizable-demo-with-handle.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/resizable-demo-with-handle.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "resizable-vertical": {
+         name: "resizable-vertical",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["resizable"],
+         files: [
+            {
+               path: "registry/miami/examples/resizable-vertical.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/resizable-vertical.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "resizable-handle": {
+         name: "resizable-handle",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["resizable"],
+         files: [
+            {
+               path: "registry/miami/examples/resizable-handle.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/resizable-handle.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-area-demo": {
+         name: "scroll-area-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["scroll-area"],
+         files: [
+            {
+               path: "registry/miami/examples/scroll-area-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/scroll-area-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-area-horizontal-demo": {
+         name: "scroll-area-horizontal-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["scroll-area"],
+         files: [
+            {
+               path: "registry/miami/examples/scroll-area-horizontal-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/scroll-area-horizontal-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "magic-card-demo": {
+         name: "magic-card-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/magic-card-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/magic-card-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "neon-gradient-card-demo": {
+         name: "neon-gradient-card-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/neon-gradient-card-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/neon-gradient-card-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "magic-card-gradient": {
+         name: "magic-card-gradient",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/magic-card-gradient.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/magic-card-gradient.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "meteors-demo": {
+         name: "meteors-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/meteors-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/meteors-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-pattern-demo": {
+         name: "grid-pattern-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/grid-pattern-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/grid-pattern-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-pattern-linear-gradient": {
+         name: "grid-pattern-linear-gradient",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/grid-pattern-linear-gradient.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/grid-pattern-linear-gradient.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-pattern-dashed": {
+         name: "grid-pattern-dashed",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/grid-pattern-dashed.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/grid-pattern-dashed.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dot-pattern-demo": {
+         name: "dot-pattern-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/dot-pattern-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/dot-pattern-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dot-pattern-linear-gradient": {
+         name: "dot-pattern-linear-gradient",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/dot-pattern-linear-gradient.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/dot-pattern-linear-gradient.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "marquee-demo": {
+         name: "marquee-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/marquee-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/marquee-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "marquee-demo-vertical": {
+         name: "marquee-demo-vertical",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/marquee-demo-vertical.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/marquee-demo-vertical.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "marquee-logos": {
+         name: "marquee-logos",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/marquee-logos.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/marquee-logos.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "marquee-3d": {
+         name: "marquee-3d",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/marquee-3d.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/marquee-3d.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "globe-demo": {
+         name: "globe-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/globe-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/globe-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tweet-card-demo": {
+         name: "tweet-card-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/tweet-card-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/tweet-card-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tweet-card-images": {
+         name: "tweet-card-images",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/tweet-card-images.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/tweet-card-images.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tweet-card-meta-preview": {
+         name: "tweet-card-meta-preview",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/tweet-card-meta-preview.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/tweet-card-meta-preview.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "shimmer-button-demo": {
+         name: "shimmer-button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/shimmer-button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/shimmer-button-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hero-video-demo": {
+         name: "hero-video-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/hero-video-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/hero-video-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hero-video-youtube": {
+         name: "hero-video-youtube",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/hero-video-youtube.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/hero-video-youtube.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "bento-demo": {
+         name: "bento-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/bento-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/bento-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "bento-demo-vertical": {
+         name: "bento-demo-vertical",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/bento-demo-vertical.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/bento-demo-vertical.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "number-ticker-demo": {
+         name: "number-ticker-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/number-ticker-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/number-ticker-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "ripple-demo": {
+         name: "ripple-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/ripple-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/ripple-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "retro-grid-demo": {
+         name: "retro-grid-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/retro-grid-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/retro-grid-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-list-demo": {
+         name: "animated-list-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-list-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/animated-list-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-shiny-text-demo": {
+         name: "animated-shiny-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-shiny-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/animated-shiny-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "particles-demo": {
+         name: "particles-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/particles-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/particles-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-grid-pattern-demo": {
+         name: "animated-grid-pattern-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-grid-pattern-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/animated-grid-pattern-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "border-beam-demo": {
+         name: "border-beam-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/border-beam-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/border-beam-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-beam-demo": {
+         name: "animated-beam-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-beam-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/animated-beam-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-beam-unidirectional": {
+         name: "animated-beam-unidirectional",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-beam-unidirectional.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/animated-beam-unidirectional.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-beam-bidirectional": {
+         name: "animated-beam-bidirectional",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-beam-bidirectional.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/animated-beam-bidirectional.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-beam-multiple-inputs": {
+         name: "animated-beam-multiple-inputs",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-beam-multiple-inputs.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/animated-beam-multiple-inputs.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-beam-multiple-outputs": {
+         name: "animated-beam-multiple-outputs",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-beam-multiple-outputs.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/animated-beam-multiple-outputs.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-1": {
+         name: "animated-feature-card-1",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-feature-card-1.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/animated-feature-card-1.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-2": {
+         name: "animated-feature-card-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-feature-card-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/animated-feature-card-2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-3": {
+         name: "animated-feature-card-3",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-feature-card-3.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/animated-feature-card-3.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-4": {
+         name: "animated-feature-card-4",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-feature-card-4.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/animated-feature-card-4.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-5": {
+         name: "animated-feature-card-5",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-feature-card-5.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/animated-feature-card-5.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-6": {
+         name: "animated-feature-card-6",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-feature-card-6.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/animated-feature-card-6.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-7": {
+         name: "animated-feature-card-7",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-feature-card-7.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/animated-feature-card-7.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-8": {
+         name: "animated-feature-card-8",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-feature-card-8.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/animated-feature-card-8.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-9": {
+         name: "animated-feature-card-9",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-feature-card-9.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/animated-feature-card-9.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-10": {
+         name: "animated-feature-card-10",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-feature-card-10.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/animated-feature-card-10.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-reveal-demo": {
+         name: "text-reveal-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/text-reveal-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/text-reveal-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-gradient-text-demo": {
+         name: "animated-gradient-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-gradient-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/animated-gradient-text-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "orbiting-circles-demo": {
+         name: "orbiting-circles-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/orbiting-circles-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/orbiting-circles-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dock-demo": {
+         name: "dock-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/dock-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/dock-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dock-demo-2": {
+         name: "dock-demo-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/dock-demo-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/dock-demo-2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dock-demo-3": {
+         name: "dock-demo-3",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/dock-demo-3.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/dock-demo-3.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "word-rotate-demo": {
+         name: "word-rotate-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/word-rotate-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/word-rotate-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "avatar-circles-demo": {
+         name: "avatar-circles-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/avatar-circles-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/avatar-circles-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "word-pull-up-demo": {
+         name: "word-pull-up-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/word-pull-up-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/word-pull-up-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typing-animation-demo": {
+         name: "typing-animation-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typing-animation-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typing-animation-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "wavy-text-demo": {
+         name: "wavy-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/wavy-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/wavy-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "blur-in-demo": {
+         name: "blur-in-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/blur-in-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/blur-in-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "separate-away-demo": {
+         name: "separate-away-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/separate-away-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/separate-away-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-based-velocity-demo": {
+         name: "scroll-based-velocity-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/scroll-based-velocity-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/scroll-based-velocity-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "letter-pullup-demo": {
+         name: "letter-pullup-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/letter-pullup-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/letter-pullup-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "flip-text-demo": {
+         name: "flip-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/flip-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/flip-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sparkles-text-demo": {
+         name: "sparkles-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/sparkles-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/sparkles-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "icon-cloud-demo": {
+         name: "icon-cloud-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/icon-cloud-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/icon-cloud-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "gradual-spacing-demo": {
+         name: "gradual-spacing-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/gradual-spacing-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/gradual-spacing-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "word-fade-in-demo": {
+         name: "word-fade-in-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/word-fade-in-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/word-fade-in-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "fade-text-demo": {
+         name: "fade-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/fade-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/fade-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "shiny-button-demo": {
+         name: "shiny-button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/shiny-button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/shiny-button-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "box-reveal-demo": {
+         name: "box-reveal-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/box-reveal-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/box-reveal-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "gauge-circle-demo": {
+         name: "gauge-circle-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/gauge-circle-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/gauge-circle-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "shine-border-demo": {
+         name: "shine-border-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/shine-border-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/shine-border-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "shine-border-demo-2": {
+         name: "shine-border-demo-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/shine-border-demo-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/shine-border-demo-2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-hover": {
+         name: "confetti-hover",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/confetti-hover.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/confetti-hover.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-basic-cannon": {
+         name: "confetti-basic-cannon",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/confetti-basic-cannon.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/confetti-basic-cannon.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-random-direction": {
+         name: "confetti-random-direction",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/confetti-random-direction.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/confetti-random-direction.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-fireworks": {
+         name: "confetti-fireworks",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/confetti-fireworks.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/confetti-fireworks.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-stars": {
+         name: "confetti-stars",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/confetti-stars.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/confetti-stars.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-side-cannons": {
+         name: "confetti-side-cannons",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/confetti-side-cannons.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/confetti-side-cannons.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-custom-shapes": {
+         name: "confetti-custom-shapes",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/confetti-custom-shapes.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/confetti-custom-shapes.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-emoji": {
+         name: "confetti-emoji",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/confetti-emoji.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/confetti-emoji.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-subscribe-button-demo": {
+         name: "animated-subscribe-button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-subscribe-button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/animated-subscribe-button-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "mode-toggle": {
+         name: "mode-toggle",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/mode-toggle.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/mode-toggle.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "mode-toggle-group": {
+         name: "mode-toggle-group",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/mode-toggle.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/mode-toggle.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "cool-mode-demo": {
+         name: "cool-mode-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/cool-mode-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/cool-mode-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "cool-mode-custom": {
+         name: "cool-mode-custom",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/cool-mode-custom.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/cool-mode-custom.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "timeline-demo": {
+         name: "timeline-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["timeline"],
+         files: [
+            {
+               path: "registry/miami/examples/timeline-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/timeline-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "timeline-right": {
+         name: "timeline-right",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["timeline"],
+         files: [
+            {
+               path: "registry/miami/examples/timeline-right.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/timeline-right.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "timeline-alternate": {
+         name: "timeline-alternate",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["timeline"],
+         files: [
+            {
+               path: "registry/miami/examples/timeline-alternate.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/timeline-alternate.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "timeline-labels": {
+         name: "timeline-labels",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["timeline"],
+         files: [
+            {
+               path: "registry/miami/examples/timeline-labels.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/timeline-labels.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "star-rating-demo": {
+         name: "star-rating-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/star-rating-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/star-rating-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "star-rating-colored": {
+         name: "star-rating-colored",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/star-rating-colored.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/star-rating-colored.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "star-rating-icon": {
+         name: "star-rating-icon",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/star-rating-icon.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/star-rating-icon.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-demo": {
+         name: "stepper-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/stepper-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-custom-styles": {
+         name: "stepper-custom-styles",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-custom-styles.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/stepper-custom-styles.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-orientation": {
+         name: "stepper-orientation",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-orientation.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/stepper-orientation.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-description": {
+         name: "stepper-description",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-description.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/stepper-description.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-sizes": {
+         name: "stepper-sizes",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-sizes.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/stepper-sizes.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-form": {
+         name: "stepper-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/stepper-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-variants": {
+         name: "stepper-variants",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-variants.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/stepper-variants.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-custom-icons": {
+         name: "stepper-custom-icons",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-custom-icons.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/stepper-custom-icons.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-footer-inside": {
+         name: "stepper-footer-inside",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-footer-inside.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/stepper-footer-inside.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-scroll-tracking": {
+         name: "stepper-scroll-tracking",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-scroll-tracking.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/stepper-scroll-tracking.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-clickable-steps": {
+         name: "stepper-clickable-steps",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-clickable-steps.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/stepper-clickable-steps.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-optional-steps": {
+         name: "stepper-optional-steps",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-optional-steps.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/stepper-optional-steps.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-state": {
+         name: "stepper-state",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/miami/examples/stepper-state.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/stepper-state.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tour-demo": {
+         name: "tour-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/tour-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/tour-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toc-demo": {
+         name: "toc-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toc-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toc-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toc-nested": {
+         name: "toc-nested",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toc-nested.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toc-nested.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toc-active": {
+         name: "toc-active",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toc-active.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toc-active.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-basic": {
+         name: "multi-select-basic",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/miami/examples/multi-select-basic.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/multi-select-basic.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-filter": {
+         name: "multi-select-filter",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/miami/examples/multi-select-filter.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/multi-select-filter.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-controllable-search": {
+         name: "multi-select-controllable-search",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/miami/examples/multi-select-controllable-search.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/multi-select-controllable-search.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-input-custom": {
+         name: "multi-select-input-custom",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/miami/examples/multi-select-input-custom.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/multi-select-input-custom.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-limit-count": {
+         name: "multi-select-limit-count",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/miami/examples/multi-select-limit-count.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/multi-select-limit-count.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-limit-display-length": {
+         name: "multi-select-limit-display-length",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/miami/examples/multi-select-limit-display-length.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/multi-select-limit-display-length.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-form": {
+         name: "multi-select-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/miami/examples/multi-select-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/multi-select-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-progress-demo": {
+         name: "scroll-progress-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/scroll-progress-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/scroll-progress-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "video-modal-demo": {
+         name: "video-modal-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/video-modal-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/video-modal-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scratch-to-reveal-demo": {
+         name: "scratch-to-reveal-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/scratch-to-reveal-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/scratch-to-reveal-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-demo": {
+         name: "confetti-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/confetti-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/confetti-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "blur-fade-demo": {
+         name: "blur-fade-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/blur-fade-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/blur-fade-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "blur-fade-text-demo": {
+         name: "blur-fade-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/blur-fade-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/blur-fade-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "file-tree-demo": {
+         name: "file-tree-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/file-tree-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/file-tree-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "rainbow-button-demo": {
+         name: "rainbow-button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/rainbow-button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/rainbow-button-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hero-video-dialog-demo": {
+         name: "hero-video-dialog-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/hero-video-dialog-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/hero-video-dialog-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hero-video-dialog-demo-top-in-bottom-out": {
+         name: "hero-video-dialog-demo-top-in-bottom-out",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/hero-video-dialog-demo-top-in-bottom-out.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/hero-video-dialog-demo-top-in-bottom-out.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "flickering-grid-demo": {
+         name: "flickering-grid-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/flickering-grid-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/flickering-grid-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "flickering-grid-rounded-demo": {
+         name: "flickering-grid-rounded-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/flickering-grid-rounded-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/flickering-grid-rounded-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hyper-text-demo": {
+         name: "hyper-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/hyper-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/hyper-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "safari-demo": {
+         name: "safari-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/safari-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/safari-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "safari-demo-2": {
+         name: "safari-demo-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/safari-demo-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/safari-demo-2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "iphone-15-pro-demo": {
+         name: "iphone-15-pro-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/iphone-15-pro-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/iphone-15-pro-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "iphone-15-pro-demo-2": {
+         name: "iphone-15-pro-demo-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/iphone-15-pro-demo-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/iphone-15-pro-demo-2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-circular-progress-bar-demo": {
+         name: "animated-circular-progress-bar-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/animated-circular-progress-bar-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/animated-circular-progress-bar-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toast-demo": {
+         name: "toast-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["toast"],
+         files: [
+            {
+               path: "registry/miami/examples/toast-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toast-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toast-destructive": {
+         name: "toast-destructive",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["toast"],
+         files: [
+            {
+               path: "registry/miami/examples/toast-destructive.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toast-destructive.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toast-simple": {
+         name: "toast-simple",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["toast"],
+         files: [
+            {
+               path: "registry/miami/examples/toast-simple.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toast-simple.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toast-with-action": {
+         name: "toast-with-action",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["toast"],
+         files: [
+            {
+               path: "registry/miami/examples/toast-with-action.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toast-with-action.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toast-with-title": {
+         name: "toast-with-title",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["toast"],
+         files: [
+            {
+               path: "registry/miami/examples/toast-with-title.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toast-with-title.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sonner-demo": {
+         name: "sonner-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["sonner"],
+         files: [
+            {
+               path: "registry/miami/examples/sonner-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/sonner-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "select-demo": {
+         name: "select-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["select"],
+         files: [
+            {
+               path: "registry/miami/examples/select-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/select-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "select-scrollable": {
+         name: "select-scrollable",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["select"],
+         files: [
+            {
+               path: "registry/miami/examples/select-scrollable.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/select-scrollable.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "select-form": {
+         name: "select-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["select"],
+         files: [
+            {
+               path: "registry/miami/examples/select-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/select-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "separator-demo": {
+         name: "separator-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/separator-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/separator-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sheet-demo": {
+         name: "sheet-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/sheet-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/sheet-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sheet-side": {
+         name: "sheet-side",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/sheet-side.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/sheet-side.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "skeleton-demo": {
+         name: "skeleton-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/skeleton-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/skeleton-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "skeleton-card": {
+         name: "skeleton-card",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/skeleton-card.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/skeleton-card.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-demo": {
+         name: "slider-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/slider-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/slider-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-disabled": {
+         name: "slider-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/slider-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/slider-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-inverted": {
+         name: "slider-inverted",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/slider-inverted.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/slider-inverted.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-vertical": {
+         name: "slider-vertical",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/slider-vertical.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/slider-vertical.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-range": {
+         name: "slider-range",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/slider-range.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/slider-range.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-tick-marks-half": {
+         name: "slider-tick-marks-half",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/slider-tick-marks-half.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/slider-tick-marks-half.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-tick-marks-full": {
+         name: "slider-tick-marks-full",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/slider-tick-marks-full.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/slider-tick-marks-full.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-format-label": {
+         name: "slider-format-label",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/slider-format-label.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/slider-format-label.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-format-label-side": {
+         name: "slider-format-label-side",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/slider-format-label-side.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/slider-format-label-side.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "switch-demo": {
+         name: "switch-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/switch-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/switch-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "switch-form": {
+         name: "switch-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/switch-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/switch-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "table-demo": {
+         name: "table-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/table-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/table-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tabs-demo": {
+         name: "tabs-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/tabs-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/tabs-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "textarea-demo": {
+         name: "textarea-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/textarea-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/textarea-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "textarea-disabled": {
+         name: "textarea-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/textarea-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/textarea-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "textarea-with-label": {
+         name: "textarea-with-label",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/textarea-with-label.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/textarea-with-label.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "textarea-with-text": {
+         name: "textarea-with-text",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/textarea-with-text.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/textarea-with-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "textarea-with-button": {
+         name: "textarea-with-button",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/textarea-with-button.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/textarea-with-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "textarea-form": {
+         name: "textarea-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/textarea-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/textarea-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-demo": {
+         name: "toggle-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toggle-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toggle-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-outline": {
+         name: "toggle-outline",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toggle-outline.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toggle-outline.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-with-text": {
+         name: "toggle-with-text",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toggle-with-text.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toggle-with-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-sm": {
+         name: "toggle-sm",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toggle-sm.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toggle-sm.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-lg": {
+         name: "toggle-lg",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toggle-lg.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toggle-lg.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-disabled": {
+         name: "toggle-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toggle-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toggle-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group-demo": {
+         name: "toggle-group-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toggle-group-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toggle-group-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group-outline": {
+         name: "toggle-group-outline",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toggle-group-outline.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toggle-group-outline.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group-single": {
+         name: "toggle-group-single",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toggle-group-single.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toggle-group-single.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group-sm": {
+         name: "toggle-group-sm",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toggle-group-sm.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toggle-group-sm.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group-lg": {
+         name: "toggle-group-lg",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toggle-group-lg.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toggle-group-lg.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group-disabled": {
+         name: "toggle-group-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/toggle-group-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/toggle-group-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tooltip-demo": {
+         name: "tooltip-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/tooltip-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/tooltip-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tooltip-secondary": {
+         name: "tooltip-secondary",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/tooltip-secondary.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/tooltip-secondary.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tooltip-outline": {
+         name: "tooltip-outline",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/tooltip-outline.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/tooltip-outline.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tooltip-with-toggle-demo": {
+         name: "tooltip-with-toggle-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/tooltip-with-toggle-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/tooltip-with-toggle-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-layout-demo": {
+         name: "grid-layout-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/grid-layout-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/grid-layout-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-layout-crosshairs-demo": {
+         name: "grid-layout-crosshairs-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/grid-layout-crosshairs-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/grid-layout-crosshairs-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-layout-columns-demo": {
+         name: "grid-layout-columns-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/grid-layout-columns-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/grid-layout-columns-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-layout-variants-demo": {
+         name: "grid-layout-variants-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["grid-layout"],
+         files: [
+            {
+               path: "registry/miami/examples/grid-layout-variants-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/grid-layout-variants-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "globe-grid-demo": {
+         name: "globe-grid-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/globe-grid-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/globe-grid-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "globe-grid-full-demo": {
+         name: "globe-grid-full-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/globe-grid-full-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/globe-grid-full-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "nyx-toc-demo": {
+         name: "nyx-toc-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/nyx-toc-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/nyx-toc-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "nyx-toc-popover-demo": {
+         name: "nyx-toc-popover-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/nyx-toc-popover-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/nyx-toc-popover-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-demo": {
+         name: "typography-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-h1": {
+         name: "typography-h1",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-h1.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-h1.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-h2": {
+         name: "typography-h2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-h2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-h2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-h3": {
+         name: "typography-h3",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-h3.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-h3.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-h4": {
+         name: "typography-h4",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-h4.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-h4.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-blockquote": {
+         name: "typography-blockquote",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-blockquote.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-blockquote.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-table": {
+         name: "typography-table",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-table.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-table.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-list": {
+         name: "typography-list",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-list.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-list.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-inline-code": {
+         name: "typography-inline-code",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-inline-code.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/miami/examples/typography-inline-code.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-lead": {
+         name: "typography-lead",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-lead.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-lead.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-large": {
+         name: "typography-large",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-large.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-large.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-small": {
+         name: "typography-small",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-small.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-small.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-muted": {
+         name: "typography-muted",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-muted.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-muted.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-p": {
+         name: "typography-p",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/typography-p.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/typography-p.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "terminal-demo": {
+         name: "terminal-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/terminal-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/terminal-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "script-copy-btn-demo": {
+         name: "script-copy-btn-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/script-copy-btn-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/script-copy-btn-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate-demo": {
+         name: "text-animate-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/text-animate-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/text-animate-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate-demo-2": {
+         name: "text-animate-demo-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/text-animate-demo-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/text-animate-demo-2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate-demo-3": {
+         name: "text-animate-demo-3",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/text-animate-demo-3.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/text-animate-demo-3.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate-demo-4": {
+         name: "text-animate-demo-4",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/text-animate-demo-4.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/text-animate-demo-4.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate-demo-5": {
+         name: "text-animate-demo-5",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/text-animate-demo-5.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/text-animate-demo-5.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate-demo-6": {
+         name: "text-animate-demo-6",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/text-animate-demo-6.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/text-animate-demo-6.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "line-shadow-text-demo": {
+         name: "line-shadow-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/line-shadow-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/line-shadow-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "aurora-text-demo": {
+         name: "aurora-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/aurora-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/aurora-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "morphing-text-demo": {
+         name: "morphing-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/morphing-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/morphing-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "ripple-button-demo": {
+         name: "ripple-button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/ripple-button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/ripple-button-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "warp-background-demo": {
+         name: "warp-background-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/warp-background-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/miami/examples/warp-background-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "interactive-grid-pattern-demo": {
+         name: "interactive-grid-pattern-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/interactive-grid-pattern-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/interactive-grid-pattern-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "interactive-grid-pattern-demo-2": {
+         name: "interactive-grid-pattern-demo-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/miami/examples/interactive-grid-pattern-demo-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/miami/examples/interactive-grid-pattern-demo-2.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+   },
+   default: {
+      accordion: {
+         name: "accordion",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/accordion.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/accordion.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      alert: {
+         name: "alert",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/alert.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/alert.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "alert-dialog": {
+         name: "alert-dialog",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/ui/alert-dialog.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/alert-dialog.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-beam": {
+         name: "animated-beam",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/animated-beam.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/animated-beam.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-grid-pattern": {
+         name: "animated-grid-pattern",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/animated-grid-pattern.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/animated-grid-pattern.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-list": {
+         name: "animated-list",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/animated-list.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/animated-list.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-shiny-text": {
+         name: "animated-shiny-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/animated-shiny-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/animated-shiny-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-subscribe-button": {
+         name: "animated-subscribe-button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/animated-subscribe-button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/animated-subscribe-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-gradient-text": {
+         name: "animated-gradient-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/animated-gradient-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/animated-gradient-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "aspect-ratio": {
+         name: "aspect-ratio",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/aspect-ratio.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/aspect-ratio.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      avatar: {
+         name: "avatar",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/avatar.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/avatar.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "avatar-circles": {
+         name: "avatar-circles",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/avatar-circles.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/avatar-circles.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      badge: {
+         name: "badge",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/badge.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/badge.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "bento-grid": {
+         name: "bento-grid",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/bento-grid.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/bento-grid.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "blur-in": {
+         name: "blur-in",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/blur-in.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/blur-in.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "border-beam": {
+         name: "border-beam",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/border-beam.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/border-beam.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "box-reveal": {
+         name: "box-reveal",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/box-reveal.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/box-reveal.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      breadcrumb: {
+         name: "breadcrumb",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/breadcrumb.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/breadcrumb.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "blur-fade": {
+         name: "blur-fade",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/blur-fade.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/blur-fade.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      button: {
+         name: "button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      calendar: {
+         name: "calendar",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/ui/calendar.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/calendar.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      card: {
+         name: "card",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/card.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/card.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      carousel: {
+         name: "carousel",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/ui/carousel.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/carousel.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      chart: {
+         name: "chart",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["card"],
+         files: [
+            {
+               path: "registry/default/ui/chart.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/chart.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      checkbox: {
+         name: "checkbox",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/checkbox.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/checkbox.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "client-tweet-card": {
+         name: "client-tweet-card",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/client-tweet-card.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/client-tweet-card.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      collapsible: {
+         name: "collapsible",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/collapsible.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/collapsible.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      command: {
+         name: "command",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["dialog"],
+         files: [
+            {
+               path: "registry/default/ui/command.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/command.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      confetti: {
+         name: "confetti",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/confetti.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/confetti.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "context-menu": {
+         name: "context-menu",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/context-menu.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/context-menu.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "cool-mode": {
+         name: "cool-mode",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/cool-mode.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/cool-mode.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      dialog: {
+         name: "dialog",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/dialog.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/dialog.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      dock: {
+         name: "dock",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/dock.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/dock.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "dot-pattern": {
+         name: "dot-pattern",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/dot-pattern.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/dot-pattern.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      drawer: {
+         name: "drawer",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/drawer.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/drawer.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dropdown-menu": {
+         name: "dropdown-menu",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/dropdown-menu.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/dropdown-menu.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "fade-text": {
+         name: "fade-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/fade-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/fade-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "file-tree": {
+         name: "file-tree",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/file-tree.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/file-tree.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "flip-text": {
+         name: "flip-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/flip-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/flip-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      form: {
+         name: "form",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["button", "label"],
+         files: [
+            {
+               path: "registry/default/ui/form.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/form.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      globe: {
+         name: "globe",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/globe.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/globe.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "gradual-spacing": {
+         name: "gradual-spacing",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/gradual-spacing.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/gradual-spacing.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-pattern": {
+         name: "grid-pattern",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/grid-pattern.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/grid-pattern.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "gauge-circle": {
+         name: "gauge-circle",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/gauge-circle.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/gauge-circle.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hero-video-dialog": {
+         name: "hero-video-dialog",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/hero-video-dialog.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/hero-video-dialog.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hover-card": {
+         name: "hover-card",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/hover-card.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/hover-card.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "icon-cloud": {
+         name: "icon-cloud",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/icon-cloud.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/icon-cloud.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      input: {
+         name: "input",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/input.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/input.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp": {
+         name: "input-otp",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/input-otp.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/input-otp.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone": {
+         name: "input-phone",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["button", "input", "popover", "command"],
+         files: [
+            {
+               path: "registry/default/ui/input-phone.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/input-phone.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      label: {
+         name: "label",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/label.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/label.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "letter-pullup": {
+         name: "letter-pullup",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/letter-pullup.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/letter-pullup.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "magic-card": {
+         name: "magic-card",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/magic-card.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/magic-card.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      marquee: {
+         name: "marquee",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/marquee.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/marquee.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      menubar: {
+         name: "menubar",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/menubar.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/menubar.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      meteors: {
+         name: "meteors",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/meteors.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/meteors.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select": {
+         name: "multi-select",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/multi-select.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/multi-select.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "navigation-menu": {
+         name: "navigation-menu",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/navigation-menu.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/navigation-menu.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "neon-gradient-card": {
+         name: "neon-gradient-card",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/neon-gradient-card.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/neon-gradient-card.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "number-ticker": {
+         name: "number-ticker",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/number-ticker.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/number-ticker.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "orbiting-circles": {
+         name: "orbiting-circles",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/orbiting-circles.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/orbiting-circles.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      pagination: {
+         name: "pagination",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/ui/pagination.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/pagination.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      particles: {
+         name: "particles",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/particles.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/particles.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      popover: {
+         name: "popover",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/popover.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/popover.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      progress: {
+         name: "progress",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/progress.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/progress.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "pulsating-button": {
+         name: "pulsating-button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/pulsating-button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/pulsating-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "radio-group": {
+         name: "radio-group",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/radio-group.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/radio-group.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      resizable: {
+         name: "resizable",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/resizable.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/resizable.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "retro-grid": {
+         name: "retro-grid",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/retro-grid.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/retro-grid.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      ripple: {
+         name: "ripple",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/ripple.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/ripple.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-area": {
+         name: "scroll-area",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/scroll-area.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/scroll-area.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-based-velocity": {
+         name: "scroll-based-velocity",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/scroll-based-velocity.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/scroll-based-velocity.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-progress": {
+         name: "scroll-progress",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/scroll-progress.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/scroll-progress.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      select: {
+         name: "select",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/select.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/select.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "separate-away": {
+         name: "separate-away",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/separate-away.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/separate-away.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      separator: {
+         name: "separator",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/separator.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/separator.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      sheet: {
+         name: "sheet",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/sheet.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/sheet.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "shimmer-button": {
+         name: "shimmer-button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/shimmer-button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/shimmer-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "shine-border": {
+         name: "shine-border",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/shine-border.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/shine-border.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "shiny-button": {
+         name: "shiny-button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/shiny-button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/shiny-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      sidebar: {
+         name: "sidebar",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: [
+            "button",
+            "separator",
+            "sheet",
+            "tooltip",
+            "input",
+            "use-mobile",
+            "skeleton",
+         ],
+         files: [
+            {
+               path: "registry/default/ui/sidebar.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/sidebar.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      skeleton: {
+         name: "skeleton",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/skeleton.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/skeleton.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      slider: {
+         name: "slider",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/slider.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/slider.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      sonner: {
+         name: "sonner",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/sonner.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/sonner.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sparkles-text": {
+         name: "sparkles-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/sparkles-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/sparkles-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "star-rating": {
+         name: "star-rating",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/star-rating.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/star-rating.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      switch: {
+         name: "switch",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/switch.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/switch.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      stepper: {
+         name: "stepper",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["collapsible"],
+         files: [
+            {
+               path: "registry/default/ui/stepper.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/stepper.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scratch-to-reveal": {
+         name: "scratch-to-reveal",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/scratch-to-reveal.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/scratch-to-reveal.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      table: {
+         name: "table",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/table.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/table.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      tabs: {
+         name: "tabs",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/tabs.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/tabs.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      textarea: {
+         name: "textarea",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/textarea.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/textarea.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-reveal": {
+         name: "text-reveal",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/text-reveal.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/text-reveal.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      timeline: {
+         name: "timeline",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/timeline.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/timeline.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      toc: {
+         name: "toc",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/toc.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/toc.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      toast: {
+         name: "toast",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/toast.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+            {
+               path: "registry/default/hooks/use-toast.ts",
+               type: "registry:hook",
+               target: "",
+            },
+            {
+               path: "registry/default/ui/toaster.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/toast.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      toggle: {
+         name: "toggle",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/toggle.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/toggle.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group": {
+         name: "toggle-group",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["toggle"],
+         files: [
+            {
+               path: "registry/default/ui/toggle-group.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/toggle-group.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      tooltip: {
+         name: "tooltip",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/tooltip.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/tooltip.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      tour: {
+         name: "tour",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/tour.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/ui/tour.tsx")),
+         source: "",
+         meta: undefined,
+      },
+      "typing-animation": {
+         name: "typing-animation",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/typing-animation.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/typing-animation.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tweet-card": {
+         name: "tweet-card",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/tweet-card.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/tweet-card.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "video-modal": {
+         name: "video-modal",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/video-modal.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/video-modal.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "wavy-text": {
+         name: "wavy-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/wavy-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/wavy-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "word-fade-in": {
+         name: "word-fade-in",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/word-fade-in.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/word-fade-in.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "word-pull-up": {
+         name: "word-pull-up",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/word-pull-up.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/word-pull-up.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "word-rotate": {
+         name: "word-rotate",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/word-rotate.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/word-rotate.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "rainbow-button": {
+         name: "rainbow-button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/rainbow-button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/rainbow-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "flickering-grid": {
+         name: "flickering-grid",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/flickering-grid.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/flickering-grid.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hyper-text": {
+         name: "hyper-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/hyper-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/hyper-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      safari: {
+         name: "safari",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/safari.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/safari.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "iphone-15-pro": {
+         name: "iphone-15-pro",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/iphone-15-pro.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/iphone-15-pro.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-circular-progress-bar": {
+         name: "animated-circular-progress-bar",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/animated-circular-progress-bar.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/ui/animated-circular-progress-bar.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-layout": {
+         name: "grid-layout",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/grid-layout.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/grid-layout.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "globe-grid": {
+         name: "globe-grid",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/globe-grid.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/globe-grid.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "nyx-toc": {
+         name: "nyx-toc",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: ["popover"],
+         files: [
+            {
+               path: "registry/default/ui/nyx-toc.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+            {
+               path: "registry/default/hooks/use-anchor-observer.ts",
+               type: "registry:hook",
+               target: "",
+            },
+            {
+               path: "registry/default/hooks/use-on-change.ts",
+               type: "registry:hook",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/nyx-toc.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      terminal: {
+         name: "terminal",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/terminal.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/terminal.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "script-copy-btn": {
+         name: "script-copy-btn",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/script-copy-btn.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/script-copy-btn.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate": {
+         name: "text-animate",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/text-animate.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/text-animate.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "line-shadow-text": {
+         name: "line-shadow-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/line-shadow-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/line-shadow-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "aurora-text": {
+         name: "aurora-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/aurora-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/aurora-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "morphing-text": {
+         name: "morphing-text",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/morphing-text.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/morphing-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "ripple-button": {
+         name: "ripple-button",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/ripple-button.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/ripple-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "warp-background": {
+         name: "warp-background",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/warp-background.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/warp-background.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "interactive-grid-pattern": {
+         name: "interactive-grid-pattern",
+         description: "",
+         type: "registry:ui",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/ui/interactive-grid-pattern.tsx",
+               type: "registry:ui",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/ui/interactive-grid-pattern.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-01": {
+         name: "sidebar-01",
+         description: "A simple sidebar with navigation grouped by section.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "label",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-01/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-01/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-01/components/search-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-01/components/version-switcher.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-01/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-01/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-02": {
+         name: "sidebar-02",
+         description: "A sidebar with collapsible sections.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "label",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-02/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-02/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-02/components/search-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-02/components/version-switcher.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-02/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-02/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-03": {
+         name: "sidebar-03",
+         description: "A sidebar with submenus.",
+         type: "registry:block",
+         registryDependencies: ["sidebar", "breadcrumb"],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-03/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-03/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-03/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-03/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-04": {
+         name: "sidebar-04",
+         description: "A floating sidebar with submenus.",
+         type: "registry:block",
+         registryDependencies: ["sidebar", "breadcrumb", "separator"],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-04/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-04/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-04/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-04/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-05": {
+         name: "sidebar-05",
+         description: "A sidebar with collapsible submenus.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "label",
+            "collapsible",
+         ],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-05/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-05/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-05/components/search-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-05/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-05/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-06": {
+         name: "sidebar-06",
+         description: "A sidebar with submenus as dropdowns.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "card",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-06/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-06/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-06/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-06/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-06/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-07": {
+         name: "sidebar-07",
+         description: "A sidebar that collapses to icons.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-07/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-07/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-07/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-07/components/nav-projects.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-07/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-07/components/team-switcher.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-07/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-07/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-08": {
+         name: "sidebar-08",
+         description: "An inset sidebar with secondary navigation.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-08/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-08/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-08/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-08/components/nav-projects.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-08/components/nav-secondary.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-08/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-08/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-08/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-09": {
+         name: "sidebar-09",
+         description: "Collapsible nested sidebars.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+            "switch",
+         ],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-09/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-09/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-09/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-09/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-09/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-10": {
+         name: "sidebar-10",
+         description: "A sidebar in a popover.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "popover",
+            "collapsible",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-10/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-10/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-10/components/nav-actions.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-10/components/nav-favorites.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-10/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-10/components/nav-secondary.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-10/components/nav-workspaces.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-10/components/team-switcher.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-10/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-10/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-11": {
+         name: "sidebar-11",
+         description: "A sidebar with a collapsible file tree.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+         ],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-11/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-11/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-11/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-11/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-12": {
+         name: "sidebar-12",
+         description: "A sidebar with a calendar.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "calendar",
+            "dropdown-menu",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-12/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-12/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-12/components/calendars.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-12/components/date-picker.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-12/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-12/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-12/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-13": {
+         name: "sidebar-13",
+         description: "A sidebar in a dialog.",
+         type: "registry:block",
+         registryDependencies: ["sidebar", "breadcrumb", "button", "dialog"],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-13/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-13/components/settings-dialog.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-13/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-13/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-14": {
+         name: "sidebar-14",
+         description: "A sidebar on the right.",
+         type: "registry:block",
+         registryDependencies: ["sidebar", "breadcrumb"],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-14/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-14/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-14/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-14/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-15": {
+         name: "sidebar-15",
+         description: "A left and right sidebar.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "popover",
+            "collapsible",
+            "dropdown-menu",
+            "calendar",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-15/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-15/components/calendars.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-15/components/date-picker.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-15/components/nav-favorites.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-15/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-15/components/nav-secondary.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-15/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-15/components/nav-workspaces.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-15/components/sidebar-left.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-15/components/sidebar-right.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-15/components/team-switcher.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-15/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-15/page.tsx",
+         meta: undefined,
+      },
+      "sidebar-16": {
+         name: "sidebar-16",
+         description: "A sidebar with a sticky site header.",
+         type: "registry:block",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+            "button",
+         ],
+         files: [
+            {
+               path: "registry/default/blocks/sidebar-16/page.tsx",
+               type: "registry:page",
+               target: "app/dashboard/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/sidebar-16/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-16/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-16/components/nav-projects.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-16/components/nav-secondary.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-16/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-16/components/search-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/blocks/sidebar-16/components/site-header.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["sidebar", "dashboard"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/sidebar-16/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/sidebar-16/page.tsx",
+         meta: undefined,
+      },
+      "login-01": {
+         name: "login-01",
+         description: "A simple login form.",
+         type: "registry:block",
+         registryDependencies: ["button", "card", "input", "label"],
+         files: [
+            {
+               path: "registry/default/blocks/login-01/page.tsx",
+               type: "registry:page",
+               target: "app/login/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/login-01/components/login-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["authentication", "login"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/login-01/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/login-01/page.tsx",
+         meta: undefined,
+      },
+      "login-02": {
+         name: "login-02",
+         description: "A two column login page with a cover image.",
+         type: "registry:block",
+         registryDependencies: ["button", "card", "input", "label"],
+         files: [
+            {
+               path: "registry/default/blocks/login-02/page.tsx",
+               type: "registry:page",
+               target: "app/login/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/login-02/components/login-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["authentication", "login"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/login-02/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/login-02/page.tsx",
+         meta: undefined,
+      },
+      "login-03": {
+         name: "login-03",
+         description: "A login page with a muted background color.",
+         type: "registry:block",
+         registryDependencies: ["button", "card", "input", "label"],
+         files: [
+            {
+               path: "registry/default/blocks/login-03/page.tsx",
+               type: "registry:page",
+               target: "app/login/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/login-03/components/login-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["authentication", "login"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/login-03/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/login-03/page.tsx",
+         meta: undefined,
+      },
+      "login-04": {
+         name: "login-04",
+         description: "A login page with form and image.",
+         type: "registry:block",
+         registryDependencies: ["button", "card", "input", "label"],
+         files: [
+            {
+               path: "registry/default/blocks/login-04/page.tsx",
+               type: "registry:page",
+               target: "app/login/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/login-04/components/login-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["authentication", "login"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/login-04/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/login-04/page.tsx",
+         meta: undefined,
+      },
+      "login-05": {
+         name: "login-05",
+         description: "A simple email-only login page.",
+         type: "registry:block",
+         registryDependencies: ["button", "card", "input", "label"],
+         files: [
+            {
+               path: "registry/default/blocks/login-05/page.tsx",
+               type: "registry:page",
+               target: "app/login/page.tsx",
+            },
+            {
+               path: "registry/default/blocks/login-05/components/login-form.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["authentication", "login"],
+         component: React.lazy(
+            () => import("~/registry/default/blocks/login-05/page.tsx"),
+         ),
+         source: "__registry__/default/blocks/login-05/page.tsx",
+         meta: undefined,
+      },
+      "chart-area-axes": {
+         name: "chart-area-axes",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-area-axes.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-area-axes.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-area-axes.tsx",
+         meta: undefined,
+      },
+      "chart-area-default": {
+         name: "chart-area-default",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-area-default.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-area-default.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-area-default.tsx",
+         meta: undefined,
+      },
+      "chart-area-gradient": {
+         name: "chart-area-gradient",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-area-gradient.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-area-gradient.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-area-gradient.tsx",
+         meta: undefined,
+      },
+      "chart-area-icons": {
+         name: "chart-area-icons",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-area-icons.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-area-icons.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-area-icons.tsx",
+         meta: undefined,
+      },
+      "chart-area-interactive": {
+         name: "chart-area-interactive",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart", "select"],
+         files: [
+            {
+               path: "registry/default/charts/chart-area-interactive.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-area-interactive.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-area-interactive.tsx",
+         meta: undefined,
+      },
+      "chart-area-legend": {
+         name: "chart-area-legend",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-area-legend.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-area-legend.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-area-legend.tsx",
+         meta: undefined,
+      },
+      "chart-area-linear": {
+         name: "chart-area-linear",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-area-linear.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-area-linear.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-area-linear.tsx",
+         meta: undefined,
+      },
+      "chart-area-stacked-expand": {
+         name: "chart-area-stacked-expand",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-area-stacked-expand.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/charts/chart-area-stacked-expand.tsx"
+               ),
+         ),
+         source: "__registry__/default/charts/chart-area-stacked-expand.tsx",
+         meta: undefined,
+      },
+      "chart-area-stacked": {
+         name: "chart-area-stacked",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-area-stacked.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-area-stacked.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-area-stacked.tsx",
+         meta: undefined,
+      },
+      "chart-area-step": {
+         name: "chart-area-step",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-area-step.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-area"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-area-step.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-area-step.tsx",
+         meta: undefined,
+      },
+      "chart-bar-active": {
+         name: "chart-bar-active",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-bar-active.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-bar-active.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-bar-active.tsx",
+         meta: undefined,
+      },
+      "chart-bar-default": {
+         name: "chart-bar-default",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-bar-default.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-bar-default.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-bar-default.tsx",
+         meta: undefined,
+      },
+      "chart-bar-horizontal": {
+         name: "chart-bar-horizontal",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-bar-horizontal.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-bar-horizontal.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-bar-horizontal.tsx",
+         meta: undefined,
+      },
+      "chart-bar-interactive": {
+         name: "chart-bar-interactive",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-bar-interactive.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-bar-interactive.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-bar-interactive.tsx",
+         meta: undefined,
+      },
+      "chart-bar-label-custom": {
+         name: "chart-bar-label-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-bar-label-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-bar-label-custom.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-bar-label-custom.tsx",
+         meta: undefined,
+      },
+      "chart-bar-label": {
+         name: "chart-bar-label",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-bar-label.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-bar-label.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-bar-label.tsx",
+         meta: undefined,
+      },
+      "chart-bar-mixed": {
+         name: "chart-bar-mixed",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-bar-mixed.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-bar-mixed.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-bar-mixed.tsx",
+         meta: undefined,
+      },
+      "chart-bar-multiple": {
+         name: "chart-bar-multiple",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-bar-multiple.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-bar-multiple.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-bar-multiple.tsx",
+         meta: undefined,
+      },
+      "chart-bar-negative": {
+         name: "chart-bar-negative",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-bar-negative.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-bar-negative.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-bar-negative.tsx",
+         meta: undefined,
+      },
+      "chart-bar-stacked": {
+         name: "chart-bar-stacked",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-bar-stacked.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-bar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-bar-stacked.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-bar-stacked.tsx",
+         meta: undefined,
+      },
+      "chart-line-default": {
+         name: "chart-line-default",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-line-default.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-line-default.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-line-default.tsx",
+         meta: undefined,
+      },
+      "chart-line-dots-colors": {
+         name: "chart-line-dots-colors",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-line-dots-colors.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-line-dots-colors.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-line-dots-colors.tsx",
+         meta: undefined,
+      },
+      "chart-line-dots-custom": {
+         name: "chart-line-dots-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-line-dots-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-line-dots-custom.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-line-dots-custom.tsx",
+         meta: undefined,
+      },
+      "chart-line-dots": {
+         name: "chart-line-dots",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-line-dots.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-line-dots.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-line-dots.tsx",
+         meta: undefined,
+      },
+      "chart-line-interactive": {
+         name: "chart-line-interactive",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-line-interactive.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-line-interactive.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-line-interactive.tsx",
+         meta: undefined,
+      },
+      "chart-line-label-custom": {
+         name: "chart-line-label-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-line-label-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-line-label-custom.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-line-label-custom.tsx",
+         meta: undefined,
+      },
+      "chart-line-label": {
+         name: "chart-line-label",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-line-label.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-line-label.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-line-label.tsx",
+         meta: undefined,
+      },
+      "chart-line-linear": {
+         name: "chart-line-linear",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-line-linear.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-line-linear.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-line-linear.tsx",
+         meta: undefined,
+      },
+      "chart-line-multiple": {
+         name: "chart-line-multiple",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-line-multiple.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-line-multiple.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-line-multiple.tsx",
+         meta: undefined,
+      },
+      "chart-line-step": {
+         name: "chart-line-step",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-line-step.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-line"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-line-step.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-line-step.tsx",
+         meta: undefined,
+      },
+      "chart-pie-donut-active": {
+         name: "chart-pie-donut-active",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-pie-donut-active.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-pie-donut-active.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-pie-donut-active.tsx",
+         meta: undefined,
+      },
+      "chart-pie-donut-text": {
+         name: "chart-pie-donut-text",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-pie-donut-text.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-pie-donut-text.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-pie-donut-text.tsx",
+         meta: undefined,
+      },
+      "chart-pie-donut": {
+         name: "chart-pie-donut",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-pie-donut.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-pie-donut.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-pie-donut.tsx",
+         meta: undefined,
+      },
+      "chart-pie-interactive": {
+         name: "chart-pie-interactive",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-pie-interactive.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-pie-interactive.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-pie-interactive.tsx",
+         meta: undefined,
+      },
+      "chart-pie-label-custom": {
+         name: "chart-pie-label-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-pie-label-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-pie-label-custom.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-pie-label-custom.tsx",
+         meta: undefined,
+      },
+      "chart-pie-label-list": {
+         name: "chart-pie-label-list",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-pie-label-list.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-pie-label-list.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-pie-label-list.tsx",
+         meta: undefined,
+      },
+      "chart-pie-label": {
+         name: "chart-pie-label",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-pie-label.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-pie-label.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-pie-label.tsx",
+         meta: undefined,
+      },
+      "chart-pie-legend": {
+         name: "chart-pie-legend",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-pie-legend.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-pie-legend.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-pie-legend.tsx",
+         meta: undefined,
+      },
+      "chart-pie-separator-none": {
+         name: "chart-pie-separator-none",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-pie-separator-none.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-pie-separator-none.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-pie-separator-none.tsx",
+         meta: undefined,
+      },
+      "chart-pie-simple": {
+         name: "chart-pie-simple",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-pie-simple.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-pie-simple.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-pie-simple.tsx",
+         meta: undefined,
+      },
+      "chart-pie-stacked": {
+         name: "chart-pie-stacked",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-pie-stacked.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-pie"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-pie-stacked.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-pie-stacked.tsx",
+         meta: undefined,
+      },
+      "chart-radar-default": {
+         name: "chart-radar-default",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-default.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radar-default.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radar-default.tsx",
+         meta: undefined,
+      },
+      "chart-radar-dots": {
+         name: "chart-radar-dots",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-dots.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radar-dots.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radar-dots.tsx",
+         meta: undefined,
+      },
+      "chart-radar-grid-circle-fill": {
+         name: "chart-radar-grid-circle-fill",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-grid-circle-fill.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/charts/chart-radar-grid-circle-fill.tsx"
+               ),
+         ),
+         source: "__registry__/default/charts/chart-radar-grid-circle-fill.tsx",
+         meta: undefined,
+      },
+      "chart-radar-grid-circle-no-lines": {
+         name: "chart-radar-grid-circle-no-lines",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-grid-circle-no-lines.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/charts/chart-radar-grid-circle-no-lines.tsx"
+               ),
+         ),
+         source:
+            "__registry__/default/charts/chart-radar-grid-circle-no-lines.tsx",
+         meta: undefined,
+      },
+      "chart-radar-grid-circle": {
+         name: "chart-radar-grid-circle",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-grid-circle.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-radar-grid-circle.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radar-grid-circle.tsx",
+         meta: undefined,
+      },
+      "chart-radar-grid-custom": {
+         name: "chart-radar-grid-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-grid-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-radar-grid-custom.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radar-grid-custom.tsx",
+         meta: undefined,
+      },
+      "chart-radar-grid-fill": {
+         name: "chart-radar-grid-fill",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-grid-fill.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radar-grid-fill.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radar-grid-fill.tsx",
+         meta: undefined,
+      },
+      "chart-radar-grid-none": {
+         name: "chart-radar-grid-none",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-grid-none.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radar-grid-none.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radar-grid-none.tsx",
+         meta: undefined,
+      },
+      "chart-radar-icons": {
+         name: "chart-radar-icons",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-icons.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radar-icons.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radar-icons.tsx",
+         meta: undefined,
+      },
+      "chart-radar-label-custom": {
+         name: "chart-radar-label-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-label-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-radar-label-custom.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radar-label-custom.tsx",
+         meta: undefined,
+      },
+      "chart-radar-legend": {
+         name: "chart-radar-legend",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-legend.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radar-legend.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radar-legend.tsx",
+         meta: undefined,
+      },
+      "chart-radar-lines-only": {
+         name: "chart-radar-lines-only",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-lines-only.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-radar-lines-only.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radar-lines-only.tsx",
+         meta: undefined,
+      },
+      "chart-radar-multiple": {
+         name: "chart-radar-multiple",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-multiple.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radar-multiple.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radar-multiple.tsx",
+         meta: undefined,
+      },
+      "chart-radar-radius": {
+         name: "chart-radar-radius",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radar-radius.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radar"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radar-radius.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radar-radius.tsx",
+         meta: undefined,
+      },
+      "chart-radial-grid": {
+         name: "chart-radial-grid",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radial-grid.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radial"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radial-grid.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radial-grid.tsx",
+         meta: undefined,
+      },
+      "chart-radial-label": {
+         name: "chart-radial-label",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radial-label.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radial"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radial-label.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radial-label.tsx",
+         meta: undefined,
+      },
+      "chart-radial-shape": {
+         name: "chart-radial-shape",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radial-shape.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radial"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radial-shape.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radial-shape.tsx",
+         meta: undefined,
+      },
+      "chart-radial-simple": {
+         name: "chart-radial-simple",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radial-simple.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radial"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radial-simple.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radial-simple.tsx",
+         meta: undefined,
+      },
+      "chart-radial-stacked": {
+         name: "chart-radial-stacked",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radial-stacked.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radial"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radial-stacked.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radial-stacked.tsx",
+         meta: undefined,
+      },
+      "chart-radial-text": {
+         name: "chart-radial-text",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-radial-text.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-radial"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-radial-text.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-radial-text.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-default": {
+         name: "chart-tooltip-default",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-tooltip-default.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-tooltip-default.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-tooltip-default.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-indicator-line": {
+         name: "chart-tooltip-indicator-line",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-tooltip-indicator-line.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/charts/chart-tooltip-indicator-line.tsx"
+               ),
+         ),
+         source: "__registry__/default/charts/chart-tooltip-indicator-line.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-indicator-none": {
+         name: "chart-tooltip-indicator-none",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-tooltip-indicator-none.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/charts/chart-tooltip-indicator-none.tsx"
+               ),
+         ),
+         source: "__registry__/default/charts/chart-tooltip-indicator-none.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-label-none": {
+         name: "chart-tooltip-label-none",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-tooltip-label-none.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-tooltip-label-none.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-tooltip-label-none.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-label-custom": {
+         name: "chart-tooltip-label-custom",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-tooltip-label-custom.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/charts/chart-tooltip-label-custom.tsx"
+               ),
+         ),
+         source: "__registry__/default/charts/chart-tooltip-label-custom.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-label-formatter": {
+         name: "chart-tooltip-label-formatter",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-tooltip-label-formatter.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/charts/chart-tooltip-label-formatter.tsx"
+               ),
+         ),
+         source:
+            "__registry__/default/charts/chart-tooltip-label-formatter.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-formatter": {
+         name: "chart-tooltip-formatter",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-tooltip-formatter.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-tooltip-formatter.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-tooltip-formatter.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-icons": {
+         name: "chart-tooltip-icons",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-tooltip-icons.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () => import("~/registry/default/charts/chart-tooltip-icons.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-tooltip-icons.tsx",
+         meta: undefined,
+      },
+      "chart-tooltip-advanced": {
+         name: "chart-tooltip-advanced",
+         description: "",
+         type: "registry:block",
+         registryDependencies: ["card", "chart"],
+         files: [
+            {
+               path: "registry/default/charts/chart-tooltip-advanced.tsx",
+               type: "registry:block",
+               target: "",
+            },
+         ],
+         categories: ["charts", "charts-tooltip"],
+         component: React.lazy(
+            () =>
+               import("~/registry/default/charts/chart-tooltip-advanced.tsx"),
+         ),
+         source: "__registry__/default/charts/chart-tooltip-advanced.tsx",
+         meta: undefined,
+      },
+      utils: {
+         name: "utils",
+         description: "",
+         type: "registry:lib",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/lib/utils.ts",
+               type: "registry:lib",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(() => import("~/registry/default/lib/utils.ts")),
+         source: "",
+         meta: undefined,
+      },
+      "use-mobile": {
+         name: "use-mobile",
+         description: "",
+         type: "registry:hook",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/hooks/use-mobile.tsx",
+               type: "registry:hook",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/hooks/use-mobile.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "use-toast": {
+         name: "use-toast",
+         description: "",
+         type: "registry:hook",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/hooks/use-toast.ts",
+               type: "registry:hook",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/hooks/use-toast.ts"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "use-anchor-observer": {
+         name: "use-anchor-observer",
+         description: "",
+         type: "registry:hook",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/hooks/use-anchor-observer.ts",
+               type: "registry:hook",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/hooks/use-anchor-observer.ts"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "use-on-change": {
+         name: "use-on-change",
+         description: "",
+         type: "registry:hook",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/hooks/use-on-change.ts",
+               type: "registry:hook",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/hooks/use-on-change.ts"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      sink: {
+         name: "sink",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "accordion",
+            "alert",
+            "alert-dialog",
+            "aspect-ratio",
+            "avatar",
+            "badge",
+            "breadcrumb",
+            "button",
+            "calendar",
+            "card",
+            "carousel",
+            "chart",
+            "checkbox",
+            "collapsible",
+            "command",
+            "context-menu",
+            "dialog",
+            "drawer",
+            "dropdown-menu",
+            "hover-card",
+            "input",
+            "input-otp",
+            "label",
+            "menubar",
+            "navigation-menu",
+            "pagination",
+            "popover",
+            "progress",
+            "radio-group",
+            "resizable",
+            "scroll-area",
+            "select",
+            "separator",
+            "sheet",
+            "sidebar",
+            "skeleton",
+            "slider",
+            "sonner",
+            "switch",
+            "table",
+            "tabs",
+            "textarea",
+            "toast",
+            "toggle",
+            "toggle-group",
+            "tooltip",
+         ],
+         files: [
+            {
+               path: "registry/default/internal/sink/page.tsx",
+               type: "registry:page",
+               target: "app/sink/page.tsx",
+            },
+            {
+               path: "registry/default/internal/sink/components/app-sidebar.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/component-wrapper.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/nav-main.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/nav-projects.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/nav-user.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/team-switcher.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/accordion-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/alert-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/alert-dialog-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/aspect-ratio-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/avatar-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/badge-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/breadcrumb-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/button-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/calendar-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/card-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/carousel-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/checkbox-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/collapsible-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/combobox-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/command-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/context-menu-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/date-picker-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/dialog-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/drawer-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/dropdown-menu-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/hover-card-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/input-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/input-otp-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/label-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/menubar-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/navigation-menu-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/pagination-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/popover-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/progress-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/radio-group-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/resizable-handle.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/scroll-area-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/select-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/separator-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/sheet-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/skeleton-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/slider-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/sonner-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/switch-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/table-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/tabs-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/textarea-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/toast-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/toggle-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/toggle-group-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/tooltip-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/badge-destructive.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/badge-outline.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/badge-secondary.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/button-destructive.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/button-ghost.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/button-link.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/button-loading.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/button-outline.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/button-secondary.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/button-with-icon.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/toggle-disabled.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/toggle-outline.tsx",
+               type: "registry:component",
+               target: "",
+            },
+            {
+               path: "registry/default/internal/sink/components/toggle-with-text.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sink/page.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-demo": {
+         name: "sidebar-demo",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-demo.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-header": {
+         name: "sidebar-header",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-header.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-header.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-footer": {
+         name: "sidebar-footer",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-footer.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-footer.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-group": {
+         name: "sidebar-group",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-group.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-group.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-group-collapsible": {
+         name: "sidebar-group-collapsible",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-group-collapsible.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/internal/sidebar-group-collapsible.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-group-action": {
+         name: "sidebar-group-action",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-group-action.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/internal/sidebar-group-action.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-menu": {
+         name: "sidebar-menu",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-menu.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-menu.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-menu-action": {
+         name: "sidebar-menu-action",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-menu-action.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-menu-action.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-menu-sub": {
+         name: "sidebar-menu-sub",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-menu-sub.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-menu-sub.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-menu-collapsible": {
+         name: "sidebar-menu-collapsible",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-menu-collapsible.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/internal/sidebar-menu-collapsible.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-menu-badge": {
+         name: "sidebar-menu-badge",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-menu-badge.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-menu-badge.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-rsc": {
+         name: "sidebar-rsc",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-rsc.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-rsc.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sidebar-controlled": {
+         name: "sidebar-controlled",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/internal/sidebar-controlled.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-controlled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-01": {
+         name: "v0-sidebar-01",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "label",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-01.tsx",
+               type: "registry:component",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-01.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-02": {
+         name: "v0-sidebar-02",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "label",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-02.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-02.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-03": {
+         name: "v0-sidebar-03",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: ["sidebar", "breadcrumb"],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-03.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-03.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-04": {
+         name: "v0-sidebar-04",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: ["sidebar", "breadcrumb", "separator"],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-04.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-04.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-05": {
+         name: "v0-sidebar-05",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "label",
+            "collapsible",
+         ],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-05.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-05.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-06": {
+         name: "v0-sidebar-06",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "card",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-06.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-06.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-07": {
+         name: "v0-sidebar-07",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-07.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-07.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-08": {
+         name: "v0-sidebar-08",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-08.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-08.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-09": {
+         name: "v0-sidebar-09",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "dropdown-menu",
+            "avatar",
+            "switch",
+         ],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-09.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-09.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-10": {
+         name: "v0-sidebar-10",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "popover",
+            "collapsible",
+            "dropdown-menu",
+         ],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-10.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-10.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-11": {
+         name: "v0-sidebar-11",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+         ],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-11.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-11.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-12": {
+         name: "v0-sidebar-12",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "collapsible",
+            "calendar",
+            "dropdown-menu",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-12.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-12.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-13": {
+         name: "v0-sidebar-13",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: ["sidebar", "breadcrumb", "button", "dialog"],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-13.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-13.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-14": {
+         name: "v0-sidebar-14",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: ["sidebar", "breadcrumb"],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-14.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-14.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-sidebar-15": {
+         name: "v0-sidebar-15",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: [
+            "sidebar",
+            "breadcrumb",
+            "separator",
+            "popover",
+            "collapsible",
+            "dropdown-menu",
+            "calendar",
+            "avatar",
+         ],
+         files: [
+            {
+               path: "registry/default/internal/sidebar-15.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/sidebar-15.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "v0-login-01": {
+         name: "v0-login-01",
+         description: "",
+         type: "registry:internal",
+         registryDependencies: ["button", "card", "input", "label"],
+         files: [
+            {
+               path: "registry/default/internal/login-01.tsx",
+               type: "registry:internal",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/internal/login-01.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "accordion-demo": {
+         name: "accordion-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["accordion"],
+         files: [
+            {
+               path: "registry/default/examples/accordion-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/accordion-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "alert-demo": {
+         name: "alert-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["alert"],
+         files: [
+            {
+               path: "registry/default/examples/alert-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/alert-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "alert-destructive": {
+         name: "alert-destructive",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["alert"],
+         files: [
+            {
+               path: "registry/default/examples/alert-destructive.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/alert-destructive.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "alert-dialog-demo": {
+         name: "alert-dialog-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["alert-dialog", "button"],
+         files: [
+            {
+               path: "registry/default/examples/alert-dialog-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/alert-dialog-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "aspect-ratio-demo": {
+         name: "aspect-ratio-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["aspect-ratio"],
+         files: [
+            {
+               path: "registry/default/examples/aspect-ratio-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/aspect-ratio-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "avatar-demo": {
+         name: "avatar-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["avatar"],
+         files: [
+            {
+               path: "registry/default/examples/avatar-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/avatar-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "badge-demo": {
+         name: "badge-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["badge"],
+         files: [
+            {
+               path: "registry/default/examples/badge-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/badge-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "badge-destructive": {
+         name: "badge-destructive",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["badge"],
+         files: [
+            {
+               path: "registry/default/examples/badge-destructive.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/badge-destructive.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "badge-outline": {
+         name: "badge-outline",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["badge"],
+         files: [
+            {
+               path: "registry/default/examples/badge-outline.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/badge-outline.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "badge-secondary": {
+         name: "badge-secondary",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["badge"],
+         files: [
+            {
+               path: "registry/default/examples/badge-secondary.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/badge-secondary.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "breadcrumb-demo": {
+         name: "breadcrumb-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["breadcrumb"],
+         files: [
+            {
+               path: "registry/default/examples/breadcrumb-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/breadcrumb-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "breadcrumb-separator": {
+         name: "breadcrumb-separator",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["breadcrumb"],
+         files: [
+            {
+               path: "registry/default/examples/breadcrumb-separator.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/breadcrumb-separator.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "breadcrumb-dropdown": {
+         name: "breadcrumb-dropdown",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["breadcrumb"],
+         files: [
+            {
+               path: "registry/default/examples/breadcrumb-dropdown.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/breadcrumb-dropdown.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "breadcrumb-ellipsis": {
+         name: "breadcrumb-ellipsis",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["breadcrumb"],
+         files: [
+            {
+               path: "registry/default/examples/breadcrumb-ellipsis.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/breadcrumb-ellipsis.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "breadcrumb-link": {
+         name: "breadcrumb-link",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["breadcrumb"],
+         files: [
+            {
+               path: "registry/default/examples/breadcrumb-link.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/breadcrumb-link.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "breadcrumb-responsive": {
+         name: "breadcrumb-responsive",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["breadcrumb"],
+         files: [
+            {
+               path: "registry/default/examples/breadcrumb-responsive.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/breadcrumb-responsive.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-demo": {
+         name: "button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/examples/button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/button-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-secondary": {
+         name: "button-secondary",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/examples/button-secondary.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/button-secondary.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-destructive": {
+         name: "button-destructive",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/examples/button-destructive.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/button-destructive.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-outline": {
+         name: "button-outline",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/examples/button-outline.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/button-outline.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-ghost": {
+         name: "button-ghost",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/examples/button-ghost.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/button-ghost.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-link": {
+         name: "button-link",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/examples/button-link.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/button-link.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-with-icon": {
+         name: "button-with-icon",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/examples/button-with-icon.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/button-with-icon.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-loading": {
+         name: "button-loading",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/examples/button-loading.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/button-loading.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-icon": {
+         name: "button-icon",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/examples/button-icon.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/button-icon.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "button-as-child": {
+         name: "button-as-child",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button"],
+         files: [
+            {
+               path: "registry/default/examples/button-as-child.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/button-as-child.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "pulsating-button-demo": {
+         name: "pulsating-button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/pulsating-button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/pulsating-button-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "calendar-demo": {
+         name: "calendar-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["calendar"],
+         files: [
+            {
+               path: "registry/default/examples/calendar-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/calendar-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "calendar-form": {
+         name: "calendar-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["calendar", "form", "popover"],
+         files: [
+            {
+               path: "registry/default/examples/calendar-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/calendar-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "card-demo": {
+         name: "card-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["card", "button", "switch"],
+         files: [
+            {
+               path: "registry/default/examples/card-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/card-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "card-with-form": {
+         name: "card-with-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "card", "input", "label", "select"],
+         files: [
+            {
+               path: "registry/default/examples/card-with-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/card-with-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-demo": {
+         name: "carousel-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/default/examples/carousel-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/carousel-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-size": {
+         name: "carousel-size",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/default/examples/carousel-size.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/carousel-size.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-spacing": {
+         name: "carousel-spacing",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/default/examples/carousel-spacing.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/carousel-spacing.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-orientation": {
+         name: "carousel-orientation",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/default/examples/carousel-orientation.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/carousel-orientation.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-dots": {
+         name: "carousel-dots",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/default/examples/carousel-dots.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/carousel-dots.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-api": {
+         name: "carousel-api",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/default/examples/carousel-api.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/carousel-api.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "carousel-plugin": {
+         name: "carousel-plugin",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["carousel"],
+         files: [
+            {
+               path: "registry/default/examples/carousel-plugin.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/carousel-plugin.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "checkbox-demo": {
+         name: "checkbox-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["checkbox"],
+         files: [
+            {
+               path: "registry/default/examples/checkbox-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/checkbox-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "checkbox-disabled": {
+         name: "checkbox-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["checkbox"],
+         files: [
+            {
+               path: "registry/default/examples/checkbox-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/checkbox-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "checkbox-form-multiple": {
+         name: "checkbox-form-multiple",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["checkbox", "form"],
+         files: [
+            {
+               path: "registry/default/examples/checkbox-form-multiple.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/checkbox-form-multiple.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "checkbox-form-single": {
+         name: "checkbox-form-single",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["checkbox", "form"],
+         files: [
+            {
+               path: "registry/default/examples/checkbox-form-single.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/checkbox-form-single.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "checkbox-with-text": {
+         name: "checkbox-with-text",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["checkbox"],
+         files: [
+            {
+               path: "registry/default/examples/checkbox-with-text.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/checkbox-with-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "collapsible-demo": {
+         name: "collapsible-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["collapsible"],
+         files: [
+            {
+               path: "registry/default/examples/collapsible-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/collapsible-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "combobox-demo": {
+         name: "combobox-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["command"],
+         files: [
+            {
+               path: "registry/default/examples/combobox-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/combobox-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "combobox-dropdown-menu": {
+         name: "combobox-dropdown-menu",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["command", "dropdown-menu", "button"],
+         files: [
+            {
+               path: "registry/default/examples/combobox-dropdown-menu.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/combobox-dropdown-menu.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "combobox-form": {
+         name: "combobox-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["command", "form"],
+         files: [
+            {
+               path: "registry/default/examples/combobox-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/combobox-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "combobox-popover": {
+         name: "combobox-popover",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["combobox", "popover"],
+         files: [
+            {
+               path: "registry/default/examples/combobox-popover.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/combobox-popover.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "combobox-responsive": {
+         name: "combobox-responsive",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["combobox", "popover", "drawer"],
+         files: [
+            {
+               path: "registry/default/examples/combobox-responsive.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/combobox-responsive.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "command-demo": {
+         name: "command-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["command"],
+         files: [
+            {
+               path: "registry/default/examples/command-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/command-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "command-dialog": {
+         name: "command-dialog",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["command", "dialog"],
+         files: [
+            {
+               path: "registry/default/examples/command-dialog.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/command-dialog.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "context-menu-demo": {
+         name: "context-menu-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["context-menu"],
+         files: [
+            {
+               path: "registry/default/examples/context-menu-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/context-menu-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "data-table-demo": {
+         name: "data-table-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["data-table"],
+         files: [
+            {
+               path: "registry/default/examples/data-table-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/data-table-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "date-picker-demo": {
+         name: "date-picker-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "calendar", "popover"],
+         files: [
+            {
+               path: "registry/default/examples/date-picker-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/date-picker-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "date-picker-form": {
+         name: "date-picker-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "calendar", "form", "popover"],
+         files: [
+            {
+               path: "registry/default/examples/date-picker-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/date-picker-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "date-picker-with-presets": {
+         name: "date-picker-with-presets",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "calendar", "popover", "select"],
+         files: [
+            {
+               path: "registry/default/examples/date-picker-with-presets.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/date-picker-with-presets.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "date-picker-with-range": {
+         name: "date-picker-with-range",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "calendar", "popover"],
+         files: [
+            {
+               path: "registry/default/examples/date-picker-with-range.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/date-picker-with-range.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dialog-demo": {
+         name: "dialog-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["dialog"],
+         files: [
+            {
+               path: "registry/default/examples/dialog-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/dialog-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dialog-close-button": {
+         name: "dialog-close-button",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["dialog", "button"],
+         files: [
+            {
+               path: "registry/default/examples/dialog-close-button.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/dialog-close-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "drawer-demo": {
+         name: "drawer-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["drawer"],
+         files: [
+            {
+               path: "registry/default/examples/drawer-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/drawer-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "drawer-dialog": {
+         name: "drawer-dialog",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["drawer", "dialog"],
+         files: [
+            {
+               path: "registry/default/examples/drawer-dialog.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/drawer-dialog.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dropdown-menu-demo": {
+         name: "dropdown-menu-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["dropdown-menu"],
+         files: [
+            {
+               path: "registry/default/examples/dropdown-menu-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/dropdown-menu-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dropdown-menu-checkboxes": {
+         name: "dropdown-menu-checkboxes",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["dropdown-menu", "checkbox"],
+         files: [
+            {
+               path: "registry/default/examples/dropdown-menu-checkboxes.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/dropdown-menu-checkboxes.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dropdown-menu-radio-group": {
+         name: "dropdown-menu-radio-group",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["dropdown-menu", "radio-group"],
+         files: [
+            {
+               path: "registry/default/examples/dropdown-menu-radio-group.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/dropdown-menu-radio-group.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hover-card-demo": {
+         name: "hover-card-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["hover-card"],
+         files: [
+            {
+               path: "registry/default/examples/hover-card-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/hover-card-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-demo": {
+         name: "input-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input"],
+         files: [
+            {
+               path: "registry/default/examples/input-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-disabled": {
+         name: "input-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input"],
+         files: [
+            {
+               path: "registry/default/examples/input-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-file": {
+         name: "input-file",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input"],
+         files: [
+            {
+               path: "registry/default/examples/input-file.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-file.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-form": {
+         name: "input-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input", "button", "form"],
+         files: [
+            {
+               path: "registry/default/examples/input-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-with-button": {
+         name: "input-with-button",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input", "button"],
+         files: [
+            {
+               path: "registry/default/examples/input-with-button.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-with-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-with-label": {
+         name: "input-with-label",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input", "button", "label"],
+         files: [
+            {
+               path: "registry/default/examples/input-with-label.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-with-label.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-with-text": {
+         name: "input-with-text",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input", "button", "label"],
+         files: [
+            {
+               path: "registry/default/examples/input-with-text.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-with-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp-demo": {
+         name: "input-otp-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input-otp"],
+         files: [
+            {
+               path: "registry/default/examples/input-otp-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-otp-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp-pattern": {
+         name: "input-otp-pattern",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input-otp"],
+         files: [
+            {
+               path: "registry/default/examples/input-otp-pattern.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-otp-pattern.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp-separator": {
+         name: "input-otp-separator",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input-otp"],
+         files: [
+            {
+               path: "registry/default/examples/input-otp-separator.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-otp-separator.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp-controlled": {
+         name: "input-otp-controlled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input-otp"],
+         files: [
+            {
+               path: "registry/default/examples/input-otp-controlled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/input-otp-controlled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp-form": {
+         name: "input-otp-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input-otp", "form"],
+         files: [
+            {
+               path: "registry/default/examples/input-otp-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-otp-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-otp-disabled": {
+         name: "input-otp-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["input-otp", "form"],
+         files: [
+            {
+               path: "registry/default/examples/input-otp-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-otp-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone-default": {
+         name: "input-phone-default",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "input", "popover"],
+         files: [
+            {
+               path: "registry/default/examples/input-phone-default.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-phone-default.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone-demo": {
+         name: "input-phone-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "input", "popover"],
+         files: [
+            {
+               path: "registry/default/examples/input-phone-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-phone-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone-form": {
+         name: "input-phone-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "input", "popover"],
+         files: [
+            {
+               path: "registry/default/examples/input-phone-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-phone-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone-initial": {
+         name: "input-phone-initial",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "input", "popover"],
+         files: [
+            {
+               path: "registry/default/examples/input-phone-initial.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/input-phone-initial.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone-international": {
+         name: "input-phone-international",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "input", "popover"],
+         files: [
+            {
+               path: "registry/default/examples/input-phone-international.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/input-phone-international.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "input-phone-national": {
+         name: "input-phone-national",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["button", "input", "popover"],
+         files: [
+            {
+               path: "registry/default/examples/input-phone-national.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/input-phone-national.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "label-demo": {
+         name: "label-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["label"],
+         files: [
+            {
+               path: "registry/default/examples/label-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/label-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "menubar-demo": {
+         name: "menubar-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["menubar"],
+         files: [
+            {
+               path: "registry/default/examples/menubar-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/menubar-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "navigation-menu-demo": {
+         name: "navigation-menu-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["navigation-menu"],
+         files: [
+            {
+               path: "registry/default/examples/navigation-menu-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/navigation-menu-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "pagination-demo": {
+         name: "pagination-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["pagination"],
+         files: [
+            {
+               path: "registry/default/examples/pagination-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/pagination-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "popover-demo": {
+         name: "popover-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["popover"],
+         files: [
+            {
+               path: "registry/default/examples/popover-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/popover-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "progress-demo": {
+         name: "progress-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["progress"],
+         files: [
+            {
+               path: "registry/default/examples/progress-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/progress-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "radio-group-demo": {
+         name: "radio-group-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["radio-group"],
+         files: [
+            {
+               path: "registry/default/examples/radio-group-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/radio-group-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "radio-group-form": {
+         name: "radio-group-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["radio-group", "form"],
+         files: [
+            {
+               path: "registry/default/examples/radio-group-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/radio-group-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "resizable-demo": {
+         name: "resizable-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["resizable"],
+         files: [
+            {
+               path: "registry/default/examples/resizable-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/resizable-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "resizable-demo-with-handle": {
+         name: "resizable-demo-with-handle",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["resizable"],
+         files: [
+            {
+               path: "registry/default/examples/resizable-demo-with-handle.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/resizable-demo-with-handle.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "resizable-vertical": {
+         name: "resizable-vertical",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["resizable"],
+         files: [
+            {
+               path: "registry/default/examples/resizable-vertical.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/resizable-vertical.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "resizable-handle": {
+         name: "resizable-handle",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["resizable"],
+         files: [
+            {
+               path: "registry/default/examples/resizable-handle.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/resizable-handle.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-area-demo": {
+         name: "scroll-area-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["scroll-area"],
+         files: [
+            {
+               path: "registry/default/examples/scroll-area-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/scroll-area-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-area-horizontal-demo": {
+         name: "scroll-area-horizontal-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["scroll-area"],
+         files: [
+            {
+               path: "registry/default/examples/scroll-area-horizontal-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/scroll-area-horizontal-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "magic-card-demo": {
+         name: "magic-card-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/magic-card-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/magic-card-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "neon-gradient-card-demo": {
+         name: "neon-gradient-card-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/neon-gradient-card-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/neon-gradient-card-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "magic-card-gradient": {
+         name: "magic-card-gradient",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/magic-card-gradient.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/magic-card-gradient.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "meteors-demo": {
+         name: "meteors-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/meteors-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/meteors-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-pattern-demo": {
+         name: "grid-pattern-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/grid-pattern-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/grid-pattern-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-pattern-linear-gradient": {
+         name: "grid-pattern-linear-gradient",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/grid-pattern-linear-gradient.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/grid-pattern-linear-gradient.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-pattern-dashed": {
+         name: "grid-pattern-dashed",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/grid-pattern-dashed.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/grid-pattern-dashed.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dot-pattern-demo": {
+         name: "dot-pattern-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/dot-pattern-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/dot-pattern-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dot-pattern-linear-gradient": {
+         name: "dot-pattern-linear-gradient",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/dot-pattern-linear-gradient.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/dot-pattern-linear-gradient.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "marquee-demo": {
+         name: "marquee-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/marquee-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/marquee-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "marquee-demo-vertical": {
+         name: "marquee-demo-vertical",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/marquee-demo-vertical.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/marquee-demo-vertical.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "marquee-logos": {
+         name: "marquee-logos",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/marquee-logos.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/marquee-logos.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "marquee-3d": {
+         name: "marquee-3d",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/marquee-3d.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/marquee-3d.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "globe-demo": {
+         name: "globe-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/globe-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/globe-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tweet-card-demo": {
+         name: "tweet-card-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/tweet-card-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/tweet-card-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tweet-card-images": {
+         name: "tweet-card-images",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/tweet-card-images.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/tweet-card-images.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tweet-card-meta-preview": {
+         name: "tweet-card-meta-preview",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/tweet-card-meta-preview.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/tweet-card-meta-preview.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "shimmer-button-demo": {
+         name: "shimmer-button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/shimmer-button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/shimmer-button-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hero-video-demo": {
+         name: "hero-video-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/hero-video-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/hero-video-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hero-video-youtube": {
+         name: "hero-video-youtube",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/hero-video-youtube.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/hero-video-youtube.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "bento-demo": {
+         name: "bento-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/bento-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/bento-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "bento-demo-vertical": {
+         name: "bento-demo-vertical",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/bento-demo-vertical.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/bento-demo-vertical.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "number-ticker-demo": {
+         name: "number-ticker-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/number-ticker-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/number-ticker-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "ripple-demo": {
+         name: "ripple-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/ripple-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/ripple-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "retro-grid-demo": {
+         name: "retro-grid-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/retro-grid-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/retro-grid-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-list-demo": {
+         name: "animated-list-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-list-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/animated-list-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-shiny-text-demo": {
+         name: "animated-shiny-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-shiny-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-shiny-text-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "particles-demo": {
+         name: "particles-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/particles-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/particles-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-grid-pattern-demo": {
+         name: "animated-grid-pattern-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-grid-pattern-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-grid-pattern-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "border-beam-demo": {
+         name: "border-beam-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/border-beam-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/border-beam-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-beam-demo": {
+         name: "animated-beam-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-beam-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/animated-beam-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-beam-unidirectional": {
+         name: "animated-beam-unidirectional",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-beam-unidirectional.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-beam-unidirectional.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-beam-bidirectional": {
+         name: "animated-beam-bidirectional",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-beam-bidirectional.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-beam-bidirectional.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-beam-multiple-inputs": {
+         name: "animated-beam-multiple-inputs",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-beam-multiple-inputs.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-beam-multiple-inputs.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-beam-multiple-outputs": {
+         name: "animated-beam-multiple-outputs",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-beam-multiple-outputs.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-beam-multiple-outputs.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-1": {
+         name: "animated-feature-card-1",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-feature-card-1.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-feature-card-1.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-2": {
+         name: "animated-feature-card-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-feature-card-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-feature-card-2.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-3": {
+         name: "animated-feature-card-3",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-feature-card-3.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-feature-card-3.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-4": {
+         name: "animated-feature-card-4",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-feature-card-4.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-feature-card-4.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-5": {
+         name: "animated-feature-card-5",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-feature-card-5.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-feature-card-5.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-6": {
+         name: "animated-feature-card-6",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-feature-card-6.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-feature-card-6.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-7": {
+         name: "animated-feature-card-7",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-feature-card-7.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-feature-card-7.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-8": {
+         name: "animated-feature-card-8",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-feature-card-8.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-feature-card-8.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-9": {
+         name: "animated-feature-card-9",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-feature-card-9.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-feature-card-9.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-feature-card-10": {
+         name: "animated-feature-card-10",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-feature-card-10.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-feature-card-10.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-reveal-demo": {
+         name: "text-reveal-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/text-reveal-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/text-reveal-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-gradient-text-demo": {
+         name: "animated-gradient-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-gradient-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-gradient-text-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "orbiting-circles-demo": {
+         name: "orbiting-circles-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/orbiting-circles-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/orbiting-circles-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dock-demo": {
+         name: "dock-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/dock-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/dock-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dock-demo-2": {
+         name: "dock-demo-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/dock-demo-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/dock-demo-2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "dock-demo-3": {
+         name: "dock-demo-3",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/dock-demo-3.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/dock-demo-3.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "word-rotate-demo": {
+         name: "word-rotate-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/word-rotate-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/word-rotate-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "avatar-circles-demo": {
+         name: "avatar-circles-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/avatar-circles-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/avatar-circles-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "word-pull-up-demo": {
+         name: "word-pull-up-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/word-pull-up-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/word-pull-up-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typing-animation-demo": {
+         name: "typing-animation-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typing-animation-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/typing-animation-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "wavy-text-demo": {
+         name: "wavy-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/wavy-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/wavy-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "blur-in-demo": {
+         name: "blur-in-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/blur-in-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/blur-in-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "separate-away-demo": {
+         name: "separate-away-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/separate-away-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/separate-away-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-based-velocity-demo": {
+         name: "scroll-based-velocity-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/scroll-based-velocity-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/scroll-based-velocity-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "letter-pullup-demo": {
+         name: "letter-pullup-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/letter-pullup-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/letter-pullup-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "flip-text-demo": {
+         name: "flip-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/flip-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/flip-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sparkles-text-demo": {
+         name: "sparkles-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/sparkles-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/sparkles-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "icon-cloud-demo": {
+         name: "icon-cloud-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/icon-cloud-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/icon-cloud-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "gradual-spacing-demo": {
+         name: "gradual-spacing-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/gradual-spacing-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/gradual-spacing-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "word-fade-in-demo": {
+         name: "word-fade-in-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/word-fade-in-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/word-fade-in-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "fade-text-demo": {
+         name: "fade-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/fade-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/fade-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "shiny-button-demo": {
+         name: "shiny-button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/shiny-button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/shiny-button-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "box-reveal-demo": {
+         name: "box-reveal-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/box-reveal-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/box-reveal-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "gauge-circle-demo": {
+         name: "gauge-circle-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/gauge-circle-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/gauge-circle-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "shine-border-demo": {
+         name: "shine-border-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/shine-border-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/shine-border-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "shine-border-demo-2": {
+         name: "shine-border-demo-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/shine-border-demo-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/shine-border-demo-2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-hover": {
+         name: "confetti-hover",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/confetti-hover.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/confetti-hover.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-basic-cannon": {
+         name: "confetti-basic-cannon",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/confetti-basic-cannon.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/confetti-basic-cannon.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-random-direction": {
+         name: "confetti-random-direction",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/confetti-random-direction.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/confetti-random-direction.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-fireworks": {
+         name: "confetti-fireworks",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/confetti-fireworks.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/confetti-fireworks.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-stars": {
+         name: "confetti-stars",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/confetti-stars.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/confetti-stars.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-side-cannons": {
+         name: "confetti-side-cannons",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/confetti-side-cannons.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/confetti-side-cannons.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-custom-shapes": {
+         name: "confetti-custom-shapes",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/confetti-custom-shapes.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/confetti-custom-shapes.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-emoji": {
+         name: "confetti-emoji",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/confetti-emoji.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/confetti-emoji.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-subscribe-button-demo": {
+         name: "animated-subscribe-button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-subscribe-button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-subscribe-button-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "mode-toggle": {
+         name: "mode-toggle",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/mode-toggle.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/mode-toggle.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "mode-toggle-group": {
+         name: "mode-toggle-group",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/mode-toggle.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/mode-toggle.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "cool-mode-demo": {
+         name: "cool-mode-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/cool-mode-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/cool-mode-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "cool-mode-custom": {
+         name: "cool-mode-custom",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/cool-mode-custom.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/cool-mode-custom.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "timeline-demo": {
+         name: "timeline-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["timeline"],
+         files: [
+            {
+               path: "registry/default/examples/timeline-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/timeline-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "timeline-right": {
+         name: "timeline-right",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["timeline"],
+         files: [
+            {
+               path: "registry/default/examples/timeline-right.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/timeline-right.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "timeline-alternate": {
+         name: "timeline-alternate",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["timeline"],
+         files: [
+            {
+               path: "registry/default/examples/timeline-alternate.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/timeline-alternate.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "timeline-labels": {
+         name: "timeline-labels",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["timeline"],
+         files: [
+            {
+               path: "registry/default/examples/timeline-labels.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/timeline-labels.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "star-rating-demo": {
+         name: "star-rating-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/star-rating-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/star-rating-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "star-rating-colored": {
+         name: "star-rating-colored",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/star-rating-colored.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/star-rating-colored.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "star-rating-icon": {
+         name: "star-rating-icon",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/star-rating-icon.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/star-rating-icon.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-demo": {
+         name: "stepper-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/stepper-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-custom-styles": {
+         name: "stepper-custom-styles",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-custom-styles.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/stepper-custom-styles.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-orientation": {
+         name: "stepper-orientation",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-orientation.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/stepper-orientation.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-description": {
+         name: "stepper-description",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-description.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/stepper-description.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-sizes": {
+         name: "stepper-sizes",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-sizes.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/stepper-sizes.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-form": {
+         name: "stepper-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/stepper-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-variants": {
+         name: "stepper-variants",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-variants.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/stepper-variants.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-custom-icons": {
+         name: "stepper-custom-icons",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-custom-icons.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/stepper-custom-icons.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-footer-inside": {
+         name: "stepper-footer-inside",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-footer-inside.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/stepper-footer-inside.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-scroll-tracking": {
+         name: "stepper-scroll-tracking",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-scroll-tracking.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/stepper-scroll-tracking.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-clickable-steps": {
+         name: "stepper-clickable-steps",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-clickable-steps.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/stepper-clickable-steps.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-optional-steps": {
+         name: "stepper-optional-steps",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-optional-steps.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/stepper-optional-steps.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "stepper-state": {
+         name: "stepper-state",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["stepper"],
+         files: [
+            {
+               path: "registry/default/examples/stepper-state.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/stepper-state.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tour-demo": {
+         name: "tour-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/tour-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/tour-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toc-demo": {
+         name: "toc-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toc-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toc-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toc-nested": {
+         name: "toc-nested",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toc-nested.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toc-nested.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toc-active": {
+         name: "toc-active",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toc-active.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toc-active.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-basic": {
+         name: "multi-select-basic",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/default/examples/multi-select-basic.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/multi-select-basic.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-filter": {
+         name: "multi-select-filter",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/default/examples/multi-select-filter.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/multi-select-filter.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-controllable-search": {
+         name: "multi-select-controllable-search",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/default/examples/multi-select-controllable-search.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/multi-select-controllable-search.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-input-custom": {
+         name: "multi-select-input-custom",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/default/examples/multi-select-input-custom.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/multi-select-input-custom.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-limit-count": {
+         name: "multi-select-limit-count",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/default/examples/multi-select-limit-count.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/multi-select-limit-count.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-limit-display-length": {
+         name: "multi-select-limit-display-length",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/default/examples/multi-select-limit-display-length.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/multi-select-limit-display-length.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "multi-select-form": {
+         name: "multi-select-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["multi-select"],
+         files: [
+            {
+               path: "registry/default/examples/multi-select-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/multi-select-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scroll-progress-demo": {
+         name: "scroll-progress-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/scroll-progress-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/scroll-progress-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "video-modal-demo": {
+         name: "video-modal-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/video-modal-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/video-modal-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "scratch-to-reveal-demo": {
+         name: "scratch-to-reveal-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/scratch-to-reveal-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/scratch-to-reveal-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "confetti-demo": {
+         name: "confetti-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/confetti-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/confetti-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "blur-fade-demo": {
+         name: "blur-fade-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/blur-fade-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/blur-fade-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "blur-fade-text-demo": {
+         name: "blur-fade-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/blur-fade-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/blur-fade-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "file-tree-demo": {
+         name: "file-tree-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/file-tree-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/file-tree-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "rainbow-button-demo": {
+         name: "rainbow-button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/rainbow-button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/rainbow-button-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hero-video-dialog-demo": {
+         name: "hero-video-dialog-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/hero-video-dialog-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/hero-video-dialog-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hero-video-dialog-demo-top-in-bottom-out": {
+         name: "hero-video-dialog-demo-top-in-bottom-out",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/hero-video-dialog-demo-top-in-bottom-out.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/hero-video-dialog-demo-top-in-bottom-out.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "flickering-grid-demo": {
+         name: "flickering-grid-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/flickering-grid-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/flickering-grid-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "flickering-grid-rounded-demo": {
+         name: "flickering-grid-rounded-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/flickering-grid-rounded-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/flickering-grid-rounded-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "hyper-text-demo": {
+         name: "hyper-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/hyper-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/hyper-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "safari-demo": {
+         name: "safari-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/safari-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/safari-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "safari-demo-2": {
+         name: "safari-demo-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/safari-demo-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/safari-demo-2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "iphone-15-pro-demo": {
+         name: "iphone-15-pro-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/iphone-15-pro-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/iphone-15-pro-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "iphone-15-pro-demo-2": {
+         name: "iphone-15-pro-demo-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/iphone-15-pro-demo-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/iphone-15-pro-demo-2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "animated-circular-progress-bar-demo": {
+         name: "animated-circular-progress-bar-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/animated-circular-progress-bar-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/animated-circular-progress-bar-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toast-demo": {
+         name: "toast-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["toast"],
+         files: [
+            {
+               path: "registry/default/examples/toast-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toast-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toast-destructive": {
+         name: "toast-destructive",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["toast"],
+         files: [
+            {
+               path: "registry/default/examples/toast-destructive.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toast-destructive.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toast-simple": {
+         name: "toast-simple",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["toast"],
+         files: [
+            {
+               path: "registry/default/examples/toast-simple.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toast-simple.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toast-with-action": {
+         name: "toast-with-action",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["toast"],
+         files: [
+            {
+               path: "registry/default/examples/toast-with-action.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toast-with-action.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toast-with-title": {
+         name: "toast-with-title",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["toast"],
+         files: [
+            {
+               path: "registry/default/examples/toast-with-title.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toast-with-title.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sonner-demo": {
+         name: "sonner-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["sonner"],
+         files: [
+            {
+               path: "registry/default/examples/sonner-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/sonner-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "select-demo": {
+         name: "select-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["select"],
+         files: [
+            {
+               path: "registry/default/examples/select-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/select-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "select-scrollable": {
+         name: "select-scrollable",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["select"],
+         files: [
+            {
+               path: "registry/default/examples/select-scrollable.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/select-scrollable.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "select-form": {
+         name: "select-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["select"],
+         files: [
+            {
+               path: "registry/default/examples/select-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/select-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "separator-demo": {
+         name: "separator-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/separator-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/separator-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sheet-demo": {
+         name: "sheet-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/sheet-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/sheet-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "sheet-side": {
+         name: "sheet-side",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/sheet-side.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/sheet-side.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "skeleton-demo": {
+         name: "skeleton-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/skeleton-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/skeleton-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "skeleton-card": {
+         name: "skeleton-card",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/skeleton-card.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/skeleton-card.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-demo": {
+         name: "slider-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/slider-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/slider-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-disabled": {
+         name: "slider-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/slider-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/slider-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-inverted": {
+         name: "slider-inverted",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/slider-inverted.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/slider-inverted.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-vertical": {
+         name: "slider-vertical",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/slider-vertical.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/slider-vertical.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-range": {
+         name: "slider-range",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/slider-range.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/slider-range.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-tick-marks-half": {
+         name: "slider-tick-marks-half",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/slider-tick-marks-half.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/slider-tick-marks-half.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-tick-marks-full": {
+         name: "slider-tick-marks-full",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/slider-tick-marks-full.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/slider-tick-marks-full.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-format-label": {
+         name: "slider-format-label",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/slider-format-label.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/slider-format-label.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "slider-format-label-side": {
+         name: "slider-format-label-side",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/slider-format-label-side.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/slider-format-label-side.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "switch-demo": {
+         name: "switch-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/switch-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/switch-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "switch-form": {
+         name: "switch-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/switch-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/switch-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "table-demo": {
+         name: "table-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/table-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/table-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tabs-demo": {
+         name: "tabs-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/tabs-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/tabs-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "textarea-demo": {
+         name: "textarea-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/textarea-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/textarea-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "textarea-disabled": {
+         name: "textarea-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/textarea-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/textarea-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "textarea-with-label": {
+         name: "textarea-with-label",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/textarea-with-label.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/textarea-with-label.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "textarea-with-text": {
+         name: "textarea-with-text",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/textarea-with-text.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/textarea-with-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "textarea-with-button": {
+         name: "textarea-with-button",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/textarea-with-button.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/textarea-with-button.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "textarea-form": {
+         name: "textarea-form",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/textarea-form.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/textarea-form.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-demo": {
+         name: "toggle-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toggle-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toggle-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-outline": {
+         name: "toggle-outline",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toggle-outline.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toggle-outline.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-with-text": {
+         name: "toggle-with-text",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toggle-with-text.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toggle-with-text.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-sm": {
+         name: "toggle-sm",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toggle-sm.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toggle-sm.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-lg": {
+         name: "toggle-lg",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toggle-lg.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toggle-lg.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-disabled": {
+         name: "toggle-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toggle-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toggle-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group-demo": {
+         name: "toggle-group-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toggle-group-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toggle-group-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group-outline": {
+         name: "toggle-group-outline",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toggle-group-outline.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/toggle-group-outline.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group-single": {
+         name: "toggle-group-single",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toggle-group-single.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toggle-group-single.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group-sm": {
+         name: "toggle-group-sm",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toggle-group-sm.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toggle-group-sm.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group-lg": {
+         name: "toggle-group-lg",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toggle-group-lg.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/toggle-group-lg.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "toggle-group-disabled": {
+         name: "toggle-group-disabled",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/toggle-group-disabled.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/toggle-group-disabled.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tooltip-demo": {
+         name: "tooltip-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/tooltip-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/tooltip-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tooltip-secondary": {
+         name: "tooltip-secondary",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/tooltip-secondary.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/tooltip-secondary.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tooltip-outline": {
+         name: "tooltip-outline",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/tooltip-outline.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/tooltip-outline.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "tooltip-with-toggle-demo": {
+         name: "tooltip-with-toggle-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/tooltip-with-toggle-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/tooltip-with-toggle-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-layout-demo": {
+         name: "grid-layout-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/grid-layout-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/grid-layout-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-layout-crosshairs-demo": {
+         name: "grid-layout-crosshairs-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/grid-layout-crosshairs-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/grid-layout-crosshairs-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-layout-columns-demo": {
+         name: "grid-layout-columns-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/grid-layout-columns-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/grid-layout-columns-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "grid-layout-variants-demo": {
+         name: "grid-layout-variants-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: ["grid-layout"],
+         files: [
+            {
+               path: "registry/default/examples/grid-layout-variants-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/grid-layout-variants-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "globe-grid-demo": {
+         name: "globe-grid-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/globe-grid-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/globe-grid-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "globe-grid-full-demo": {
+         name: "globe-grid-full-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/globe-grid-full-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/globe-grid-full-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "nyx-toc-demo": {
+         name: "nyx-toc-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/nyx-toc-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/nyx-toc-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "nyx-toc-popover-demo": {
+         name: "nyx-toc-popover-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/nyx-toc-popover-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/nyx-toc-popover-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-demo": {
+         name: "typography-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/typography-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-h1": {
+         name: "typography-h1",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-h1.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/typography-h1.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-h2": {
+         name: "typography-h2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-h2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/typography-h2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-h3": {
+         name: "typography-h3",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-h3.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/typography-h3.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-h4": {
+         name: "typography-h4",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-h4.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/typography-h4.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-blockquote": {
+         name: "typography-blockquote",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-blockquote.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/typography-blockquote.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-table": {
+         name: "typography-table",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-table.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/typography-table.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-list": {
+         name: "typography-list",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-list.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/typography-list.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-inline-code": {
+         name: "typography-inline-code",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-inline-code.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/typography-inline-code.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-lead": {
+         name: "typography-lead",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-lead.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/typography-lead.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-large": {
+         name: "typography-large",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-large.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/typography-large.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-small": {
+         name: "typography-small",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-small.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/typography-small.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-muted": {
+         name: "typography-muted",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-muted.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/typography-muted.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "typography-p": {
+         name: "typography-p",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/typography-p.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/typography-p.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "terminal-demo": {
+         name: "terminal-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/terminal-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/terminal-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "script-copy-btn-demo": {
+         name: "script-copy-btn-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/script-copy-btn-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/script-copy-btn-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate-demo": {
+         name: "text-animate-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/text-animate-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/text-animate-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate-demo-2": {
+         name: "text-animate-demo-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/text-animate-demo-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/text-animate-demo-2.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate-demo-3": {
+         name: "text-animate-demo-3",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/text-animate-demo-3.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/text-animate-demo-3.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate-demo-4": {
+         name: "text-animate-demo-4",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/text-animate-demo-4.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/text-animate-demo-4.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate-demo-5": {
+         name: "text-animate-demo-5",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/text-animate-demo-5.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/text-animate-demo-5.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "text-animate-demo-6": {
+         name: "text-animate-demo-6",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/text-animate-demo-6.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/text-animate-demo-6.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "line-shadow-text-demo": {
+         name: "line-shadow-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/line-shadow-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/line-shadow-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "aurora-text-demo": {
+         name: "aurora-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/aurora-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/aurora-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "morphing-text-demo": {
+         name: "morphing-text-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/morphing-text-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/morphing-text-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "ripple-button-demo": {
+         name: "ripple-button-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/ripple-button-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () => import("~/registry/default/examples/ripple-button-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "warp-background-demo": {
+         name: "warp-background-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/warp-background-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import("~/registry/default/examples/warp-background-demo.tsx"),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "interactive-grid-pattern-demo": {
+         name: "interactive-grid-pattern-demo",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/interactive-grid-pattern-demo.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/interactive-grid-pattern-demo.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+      "interactive-grid-pattern-demo-2": {
+         name: "interactive-grid-pattern-demo-2",
+         description: "",
+         type: "registry:example",
+         registryDependencies: undefined,
+         files: [
+            {
+               path: "registry/default/examples/interactive-grid-pattern-demo-2.tsx",
+               type: "registry:example",
+               target: "",
+            },
+         ],
+         categories: undefined,
+         component: React.lazy(
+            () =>
+               import(
+                  "~/registry/default/examples/interactive-grid-pattern-demo-2.tsx"
+               ),
+         ),
+         source: "",
+         meta: undefined,
+      },
+   },
 }
diff --git a/apps/web/__registry__/miami/block/_sink/page.tsx b/apps/web/__registry__/miami/block/_sink/page.tsx
index fd23f8cc..f2110149 100644
--- a/apps/web/__registry__/miami/block/_sink/page.tsx
+++ b/apps/web/__registry__/miami/block/_sink/page.tsx
@@ -1,64 +1,64 @@
-import { AccordionDemo } from '~/registry/miami/block/_sink/components/accordion-demo'
-import { AlertDemo } from '~/registry/miami/block/_sink/components/alert-demo'
-import { AlertDialogDemo } from '~/registry/miami/block/_sink/components/alert-dialog-demo'
-import { AppSidebar } from '~/registry/miami/block/_sink/components/app-sidebar'
-import { AspectRatioDemo } from '~/registry/miami/block/_sink/components/aspect-ratio-demo'
-import { AvatarDemo } from '~/registry/miami/block/_sink/components/avatar-demo'
-import { BadgeDemo } from '~/registry/miami/block/_sink/components/badge-demo'
-import { BadgeDestructive } from '~/registry/miami/block/_sink/components/badge-destructive'
-import { BadgeOutline } from '~/registry/miami/block/_sink/components/badge-outline'
-import { BadgeSecondary } from '~/registry/miami/block/_sink/components/badge-secondary'
-import { BreadcrumbDemo } from '~/registry/miami/block/_sink/components/breadcrumb-demo'
-import { ButtonDemo } from '~/registry/miami/block/_sink/components/button-demo'
-import { ButtonDestructive } from '~/registry/miami/block/_sink/components/button-destructive'
-import { ButtonGhost } from '~/registry/miami/block/_sink/components/button-ghost'
-import { ButtonLink } from '~/registry/miami/block/_sink/components/button-link'
-import { ButtonLoading } from '~/registry/miami/block/_sink/components/button-loading'
-import { ButtonOutline } from '~/registry/miami/block/_sink/components/button-outline'
-import { ButtonSecondary } from '~/registry/miami/block/_sink/components/button-secondary'
-import { ButtonWithIcon } from '~/registry/miami/block/_sink/components/button-with-icon'
-import { CalendarDemo } from '~/registry/miami/block/_sink/components/calendar-demo'
-import { CardDemo } from '~/registry/miami/block/_sink/components/card-demo'
-import { CarouselDemo } from '~/registry/miami/block/_sink/components/carousel-demo'
-import { CheckboxDemo } from '~/registry/miami/block/_sink/components/checkbox-demo'
-import { CollapsibleDemo } from '~/registry/miami/block/_sink/components/collapsible-demo'
-import { ComboboxDemo } from '~/registry/miami/block/_sink/components/combobox-demo'
-import { CommandDemo } from '~/registry/miami/block/_sink/components/command-demo'
-import { ComponentWrapper } from '~/registry/miami/block/_sink/components/component-wrapper'
-import { ContextMenuDemo } from '~/registry/miami/block/_sink/components/context-menu-demo'
-import { DatePickerDemo } from '~/registry/miami/block/_sink/components/date-picker-demo'
-import { DialogDemo } from '~/registry/miami/block/_sink/components/dialog-demo'
-import { DrawerDemo } from '~/registry/miami/block/_sink/components/drawer-demo'
-import { DropdownMenuDemo } from '~/registry/miami/block/_sink/components/dropdown-menu-demo'
-import { HoverCardDemo } from '~/registry/miami/block/_sink/components/hover-card-demo'
-import { InputDemo } from '~/registry/miami/block/_sink/components/input-demo'
-import { InputOTPDemo } from '~/registry/miami/block/_sink/components/input-otp-demo'
-import { LabelDemo } from '~/registry/miami/block/_sink/components/label-demo'
-import { MenubarDemo } from '~/registry/miami/block/_sink/components/menubar-demo'
-import { NavigationMenuDemo } from '~/registry/miami/block/_sink/components/navigation-menu-demo'
-import { PaginationDemo } from '~/registry/miami/block/_sink/components/pagination-demo'
-import { PopoverDemo } from '~/registry/miami/block/_sink/components/popover-demo'
-import { ProgressDemo } from '~/registry/miami/block/_sink/components/progress-demo'
-import { RadioGroupDemo } from '~/registry/miami/block/_sink/components/radio-group-demo'
-import { ResizableHandleDemo } from '~/registry/miami/block/_sink/components/resizable-handle'
-import { ScrollAreaDemo } from '~/registry/miami/block/_sink/components/scroll-area-demo'
-import { SelectDemo } from '~/registry/miami/block/_sink/components/select-demo'
-import { SeparatorDemo } from '~/registry/miami/block/_sink/components/separator-demo'
-import { SheetDemo } from '~/registry/miami/block/_sink/components/sheet-demo'
-import { SkeletonDemo } from '~/registry/miami/block/_sink/components/skeleton-demo'
-import { SliderDemo } from '~/registry/miami/block/_sink/components/slider-demo'
-import { SonnerDemo } from '~/registry/miami/block/_sink/components/sonner-demo'
-import { SwitchDemo } from '~/registry/miami/block/_sink/components/switch-demo'
-import { TableDemo } from '~/registry/miami/block/_sink/components/table-demo'
-import { TabsDemo } from '~/registry/miami/block/_sink/components/tabs-demo'
-import { TextareaDemo } from '~/registry/miami/block/_sink/components/textarea-demo'
-import { ToastDemo } from '~/registry/miami/block/_sink/components/toast-demo'
-import { ToggleDemo } from '~/registry/miami/block/_sink/components/toggle-demo'
-import { ToggleDisabled } from '~/registry/miami/block/_sink/components/toggle-disabled'
-import { ToggleGroupDemo } from '~/registry/miami/block/_sink/components/toggle-group-demo'
-import { ToggleOutline } from '~/registry/miami/block/_sink/components/toggle-outline'
-import { ToggleWithText } from '~/registry/miami/block/_sink/components/toggle-with-text'
-import { TooltipDemo } from '~/registry/miami/block/_sink/components/tooltip-demo'
+import { AccordionDemo } from "~/registry/miami/block/_sink/components/accordion-demo"
+import { AlertDemo } from "~/registry/miami/block/_sink/components/alert-demo"
+import { AlertDialogDemo } from "~/registry/miami/block/_sink/components/alert-dialog-demo"
+import { AppSidebar } from "~/registry/miami/block/_sink/components/app-sidebar"
+import { AspectRatioDemo } from "~/registry/miami/block/_sink/components/aspect-ratio-demo"
+import { AvatarDemo } from "~/registry/miami/block/_sink/components/avatar-demo"
+import { BadgeDemo } from "~/registry/miami/block/_sink/components/badge-demo"
+import { BadgeDestructive } from "~/registry/miami/block/_sink/components/badge-destructive"
+import { BadgeOutline } from "~/registry/miami/block/_sink/components/badge-outline"
+import { BadgeSecondary } from "~/registry/miami/block/_sink/components/badge-secondary"
+import { BreadcrumbDemo } from "~/registry/miami/block/_sink/components/breadcrumb-demo"
+import { ButtonDemo } from "~/registry/miami/block/_sink/components/button-demo"
+import { ButtonDestructive } from "~/registry/miami/block/_sink/components/button-destructive"
+import { ButtonGhost } from "~/registry/miami/block/_sink/components/button-ghost"
+import { ButtonLink } from "~/registry/miami/block/_sink/components/button-link"
+import { ButtonLoading } from "~/registry/miami/block/_sink/components/button-loading"
+import { ButtonOutline } from "~/registry/miami/block/_sink/components/button-outline"
+import { ButtonSecondary } from "~/registry/miami/block/_sink/components/button-secondary"
+import { ButtonWithIcon } from "~/registry/miami/block/_sink/components/button-with-icon"
+import { CalendarDemo } from "~/registry/miami/block/_sink/components/calendar-demo"
+import { CardDemo } from "~/registry/miami/block/_sink/components/card-demo"
+import { CarouselDemo } from "~/registry/miami/block/_sink/components/carousel-demo"
+import { CheckboxDemo } from "~/registry/miami/block/_sink/components/checkbox-demo"
+import { CollapsibleDemo } from "~/registry/miami/block/_sink/components/collapsible-demo"
+import { ComboboxDemo } from "~/registry/miami/block/_sink/components/combobox-demo"
+import { CommandDemo } from "~/registry/miami/block/_sink/components/command-demo"
+import { ComponentWrapper } from "~/registry/miami/block/_sink/components/component-wrapper"
+import { ContextMenuDemo } from "~/registry/miami/block/_sink/components/context-menu-demo"
+import { DatePickerDemo } from "~/registry/miami/block/_sink/components/date-picker-demo"
+import { DialogDemo } from "~/registry/miami/block/_sink/components/dialog-demo"
+import { DrawerDemo } from "~/registry/miami/block/_sink/components/drawer-demo"
+import { DropdownMenuDemo } from "~/registry/miami/block/_sink/components/dropdown-menu-demo"
+import { HoverCardDemo } from "~/registry/miami/block/_sink/components/hover-card-demo"
+import { InputDemo } from "~/registry/miami/block/_sink/components/input-demo"
+import { InputOTPDemo } from "~/registry/miami/block/_sink/components/input-otp-demo"
+import { LabelDemo } from "~/registry/miami/block/_sink/components/label-demo"
+import { MenubarDemo } from "~/registry/miami/block/_sink/components/menubar-demo"
+import { NavigationMenuDemo } from "~/registry/miami/block/_sink/components/navigation-menu-demo"
+import { PaginationDemo } from "~/registry/miami/block/_sink/components/pagination-demo"
+import { PopoverDemo } from "~/registry/miami/block/_sink/components/popover-demo"
+import { ProgressDemo } from "~/registry/miami/block/_sink/components/progress-demo"
+import { RadioGroupDemo } from "~/registry/miami/block/_sink/components/radio-group-demo"
+import { ResizableHandleDemo } from "~/registry/miami/block/_sink/components/resizable-handle"
+import { ScrollAreaDemo } from "~/registry/miami/block/_sink/components/scroll-area-demo"
+import { SelectDemo } from "~/registry/miami/block/_sink/components/select-demo"
+import { SeparatorDemo } from "~/registry/miami/block/_sink/components/separator-demo"
+import { SheetDemo } from "~/registry/miami/block/_sink/components/sheet-demo"
+import { SkeletonDemo } from "~/registry/miami/block/_sink/components/skeleton-demo"
+import { SliderDemo } from "~/registry/miami/block/_sink/components/slider-demo"
+import { SonnerDemo } from "~/registry/miami/block/_sink/components/sonner-demo"
+import { SwitchDemo } from "~/registry/miami/block/_sink/components/switch-demo"
+import { TableDemo } from "~/registry/miami/block/_sink/components/table-demo"
+import { TabsDemo } from "~/registry/miami/block/_sink/components/tabs-demo"
+import { TextareaDemo } from "~/registry/miami/block/_sink/components/textarea-demo"
+import { ToastDemo } from "~/registry/miami/block/_sink/components/toast-demo"
+import { ToggleDemo } from "~/registry/miami/block/_sink/components/toggle-demo"
+import { ToggleDisabled } from "~/registry/miami/block/_sink/components/toggle-disabled"
+import { ToggleGroupDemo } from "~/registry/miami/block/_sink/components/toggle-group-demo"
+import { ToggleOutline } from "~/registry/miami/block/_sink/components/toggle-outline"
+import { ToggleWithText } from "~/registry/miami/block/_sink/components/toggle-with-text"
+import { TooltipDemo } from "~/registry/miami/block/_sink/components/tooltip-demo"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -66,13 +66,13 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 export default function SinkPage() {
    return (
@@ -197,7 +197,10 @@ export default function SinkPage() {
                   <ComponentWrapper name="Menubar">
                      <MenubarDemo />
                   </ComponentWrapper>
-                  <ComponentWrapper name="NavigationMenu" className="col-span-2">
+                  <ComponentWrapper
+                     name="NavigationMenu"
+                     className="col-span-2"
+                  >
                      <NavigationMenuDemo />
                   </ComponentWrapper>
                   <ComponentWrapper name="Pagination">
diff --git a/apps/web/__registry__/miami/block/authentication-01.tsx b/apps/web/__registry__/miami/block/authentication-01.tsx
index f3ab7121..631987b7 100644
--- a/apps/web/__registry__/miami/block/authentication-01.tsx
+++ b/apps/web/__registry__/miami/block/authentication-01.tsx
@@ -1,4 +1,4 @@
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
@@ -6,17 +6,17 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 
-export const description
-  = 'A simple login form with email and password. The submit button says \'Sign in\'.'
+export const description =
+   "A simple login form with email and password. The submit button says 'Sign in'."
 
-export const iframeHeight = '600px'
+export const iframeHeight = "600px"
 
-export const containerClassName
-  = 'w-full h-screen flex items-center justify-center px-4'
+export const containerClassName =
+   "w-full h-screen flex items-center justify-center px-4"
 
 export default function LoginForm() {
    return (
@@ -30,7 +30,12 @@ export default function LoginForm() {
          <CardContent className="grid gap-4">
             <div className="grid gap-2">
                <Label htmlFor="email">Email</Label>
-               <Input id="email" type="email" placeholder="m@example.com" required />
+               <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+               />
             </div>
             <div className="grid gap-2">
                <Label htmlFor="password">Password</Label>
diff --git a/apps/web/__registry__/miami/block/authentication-02.tsx b/apps/web/__registry__/miami/block/authentication-02.tsx
index 410bb9b6..261994e2 100644
--- a/apps/web/__registry__/miami/block/authentication-02.tsx
+++ b/apps/web/__registry__/miami/block/authentication-02.tsx
@@ -1,23 +1,23 @@
-import Link from 'next/link'
+import Link from "next/link"
 
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 
-export const description
-  = 'A login form with email and password. There\'s an option to login with Google and a link to sign up if you don\'t have an account.'
+export const description =
+   "A login form with email and password. There's an option to login with Google and a link to sign up if you don't have an account."
 
-export const iframeHeight = '600px'
+export const iframeHeight = "600px"
 
-export const containerClassName
-  = 'w-full h-screen flex items-center justify-center px-4'
+export const containerClassName =
+   "w-full h-screen flex items-center justify-center px-4"
 
 export default function LoginForm() {
    return (
@@ -42,7 +42,10 @@ export default function LoginForm() {
                <div className="grid gap-2">
                   <div className="flex items-center">
                      <Label htmlFor="password">Password</Label>
-                     <Link href="#" className="ml-auto inline-block text-sm underline">
+                     <Link
+                        href="#"
+                        className="ml-auto inline-block text-sm underline"
+                     >
                         Forgot your password?
                      </Link>
                   </div>
@@ -56,8 +59,7 @@ export default function LoginForm() {
                </Button>
             </div>
             <div className="mt-4 text-center text-sm">
-               Don&apos;t have an account?
-               {' '}
+               Don&apos;t have an account?{" "}
                <Link href="#" className="underline">
                   Sign up
                </Link>
diff --git a/apps/web/__registry__/miami/block/authentication-03.tsx b/apps/web/__registry__/miami/block/authentication-03.tsx
index 1bc3eab1..052d6def 100644
--- a/apps/web/__registry__/miami/block/authentication-03.tsx
+++ b/apps/web/__registry__/miami/block/authentication-03.tsx
@@ -1,23 +1,23 @@
-import Link from 'next/link'
+import Link from "next/link"
 
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 
-export const description
-  = 'A sign up form with first name, last name, email and password inside a card. There\'s an option to sign up with GitHub and a link to login if you already have an account'
+export const description =
+   "A sign up form with first name, last name, email and password inside a card. There's an option to sign up with GitHub and a link to login if you already have an account"
 
-export const iframeHeight = '600px'
+export const iframeHeight = "600px"
 
-export const containerClassName
-  = 'w-full h-screen flex items-center justify-center px-4'
+export const containerClassName =
+   "w-full h-screen flex items-center justify-center px-4"
 
 export default function LoginForm() {
    return (
@@ -61,8 +61,7 @@ export default function LoginForm() {
                </Button>
             </div>
             <div className="mt-4 text-center text-sm">
-               Already have an account?
-               {' '}
+               Already have an account?{" "}
                <Link href="#" className="underline">
                   Sign in
                </Link>
diff --git a/apps/web/__registry__/miami/block/authentication-04.tsx b/apps/web/__registry__/miami/block/authentication-04.tsx
index fe0e2387..c5aa2610 100644
--- a/apps/web/__registry__/miami/block/authentication-04.tsx
+++ b/apps/web/__registry__/miami/block/authentication-04.tsx
@@ -1,16 +1,16 @@
-import Image from 'next/image'
-import Link from 'next/link'
+import Image from "next/image"
+import Link from "next/link"
 
-import { Button } from '~/registry/miami/ui/button'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 
-export const description
-  = 'A login page with two columns. The first column has the login form with email and password. There\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'
+export const description =
+   "A login page with two columns. The first column has the login form with email and password. There's a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image."
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const containerClassName = 'w-full h-full p-4 lg:p-0'
+export const containerClassName = "w-full h-full p-4 lg:p-0"
 
 export default function Dashboard() {
    return (
@@ -53,8 +53,7 @@ export default function Dashboard() {
                   </Button>
                </div>
                <div className="mt-4 text-center text-sm">
-                  Don&apos;t have an account?
-                  {' '}
+                  Don&apos;t have an account?{" "}
                   <Link href="#" className="underline">
                      Sign up
                   </Link>
diff --git a/apps/web/__registry__/miami/block/chart-area-axes.tsx b/apps/web/__registry__/miami/block/chart-area-axes.tsx
index ac21eed0..49b4476a 100644
--- a/apps/web/__registry__/miami/block/chart-area-axes.tsx
+++ b/apps/web/__registry__/miami/block/chart-area-axes.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'An area chart with axes'
+export const description = "An area chart with axes"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -67,7 +65,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <YAxis
                      tickLine={false}
@@ -75,7 +73,10 @@ export default function Component() {
                      tickMargin={8}
                      tickCount={3}
                   />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
                   <Area
                      dataKey="mobile"
                      type="natural"
@@ -99,8 +100,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/miami/block/chart-area-default.tsx b/apps/web/__registry__/miami/block/chart-area-default.tsx
index 0b64a90e..d1e73de5 100644
--- a/apps/web/__registry__/miami/block/chart-area-default.tsx
+++ b/apps/web/__registry__/miami/block/chart-area-default.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A simple area chart'
+export const description = "A simple area chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -63,7 +61,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -83,8 +81,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/miami/block/chart-area-gradient.tsx b/apps/web/__registry__/miami/block/chart-area-gradient.tsx
index b4fdb42e..140484ed 100644
--- a/apps/web/__registry__/miami/block/chart-area-gradient.tsx
+++ b/apps/web/__registry__/miami/block/chart-area-gradient.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'An area chart with gradient fill'
+export const description = "An area chart with gradient fill"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -67,11 +65,20 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
                   />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
                   <defs>
-                     <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                     <linearGradient
+                        id="fillDesktop"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
                         <stop
                            offset="5%"
                            stopColor="var(--color-desktop)"
@@ -83,7 +90,13 @@ export default function Component() {
                            stopOpacity={0.1}
                         />
                      </linearGradient>
-                     <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                     <linearGradient
+                        id="fillMobile"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
                         <stop
                            offset="5%"
                            stopColor="var(--color-mobile)"
@@ -119,8 +132,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/miami/block/chart-area-icons.tsx b/apps/web/__registry__/miami/block/chart-area-icons.tsx
index 7c467ed1..6f9e9e54 100644
--- a/apps/web/__registry__/miami/block/chart-area-icons.tsx
+++ b/apps/web/__registry__/miami/block/chart-area-icons.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingDown, TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingDown, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,38 +10,36 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'An area chart with icons'
+export const description = "An area chart with icons"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
       icon: TrendingDown,
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
       icon: TrendingUp,
    },
 } satisfies ChartConfig
@@ -71,7 +69,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -101,8 +99,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/miami/block/chart-area-interactive.tsx b/apps/web/__registry__/miami/block/chart-area-interactive.tsx
index 85d5527d..2d4c09b9 100644
--- a/apps/web/__registry__/miami/block/chart-area-interactive.tsx
+++ b/apps/web/__registry__/miami/block/chart-area-interactive.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -9,146 +9,143 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/miami/ui/select'
+} from "~/registry/miami/ui/select"
 
-export const description = 'An interactive area chart'
+export const description = "An interactive area chart"
 
 const chartData = [
-   { date: '2024-04-01', desktop: 222, mobile: 150 },
-   { date: '2024-04-02', desktop: 97, mobile: 180 },
-   { date: '2024-04-03', desktop: 167, mobile: 120 },
-   { date: '2024-04-04', desktop: 242, mobile: 260 },
-   { date: '2024-04-05', desktop: 373, mobile: 290 },
-   { date: '2024-04-06', desktop: 301, mobile: 340 },
-   { date: '2024-04-07', desktop: 245, mobile: 180 },
-   { date: '2024-04-08', desktop: 409, mobile: 320 },
-   { date: '2024-04-09', desktop: 59, mobile: 110 },
-   { date: '2024-04-10', desktop: 261, mobile: 190 },
-   { date: '2024-04-11', desktop: 327, mobile: 350 },
-   { date: '2024-04-12', desktop: 292, mobile: 210 },
-   { date: '2024-04-13', desktop: 342, mobile: 380 },
-   { date: '2024-04-14', desktop: 137, mobile: 220 },
-   { date: '2024-04-15', desktop: 120, mobile: 170 },
-   { date: '2024-04-16', desktop: 138, mobile: 190 },
-   { date: '2024-04-17', desktop: 446, mobile: 360 },
-   { date: '2024-04-18', desktop: 364, mobile: 410 },
-   { date: '2024-04-19', desktop: 243, mobile: 180 },
-   { date: '2024-04-20', desktop: 89, mobile: 150 },
-   { date: '2024-04-21', desktop: 137, mobile: 200 },
-   { date: '2024-04-22', desktop: 224, mobile: 170 },
-   { date: '2024-04-23', desktop: 138, mobile: 230 },
-   { date: '2024-04-24', desktop: 387, mobile: 290 },
-   { date: '2024-04-25', desktop: 215, mobile: 250 },
-   { date: '2024-04-26', desktop: 75, mobile: 130 },
-   { date: '2024-04-27', desktop: 383, mobile: 420 },
-   { date: '2024-04-28', desktop: 122, mobile: 180 },
-   { date: '2024-04-29', desktop: 315, mobile: 240 },
-   { date: '2024-04-30', desktop: 454, mobile: 380 },
-   { date: '2024-05-01', desktop: 165, mobile: 220 },
-   { date: '2024-05-02', desktop: 293, mobile: 310 },
-   { date: '2024-05-03', desktop: 247, mobile: 190 },
-   { date: '2024-05-04', desktop: 385, mobile: 420 },
-   { date: '2024-05-05', desktop: 481, mobile: 390 },
-   { date: '2024-05-06', desktop: 498, mobile: 520 },
-   { date: '2024-05-07', desktop: 388, mobile: 300 },
-   { date: '2024-05-08', desktop: 149, mobile: 210 },
-   { date: '2024-05-09', desktop: 227, mobile: 180 },
-   { date: '2024-05-10', desktop: 293, mobile: 330 },
-   { date: '2024-05-11', desktop: 335, mobile: 270 },
-   { date: '2024-05-12', desktop: 197, mobile: 240 },
-   { date: '2024-05-13', desktop: 197, mobile: 160 },
-   { date: '2024-05-14', desktop: 448, mobile: 490 },
-   { date: '2024-05-15', desktop: 473, mobile: 380 },
-   { date: '2024-05-16', desktop: 338, mobile: 400 },
-   { date: '2024-05-17', desktop: 499, mobile: 420 },
-   { date: '2024-05-18', desktop: 315, mobile: 350 },
-   { date: '2024-05-19', desktop: 235, mobile: 180 },
-   { date: '2024-05-20', desktop: 177, mobile: 230 },
-   { date: '2024-05-21', desktop: 82, mobile: 140 },
-   { date: '2024-05-22', desktop: 81, mobile: 120 },
-   { date: '2024-05-23', desktop: 252, mobile: 290 },
-   { date: '2024-05-24', desktop: 294, mobile: 220 },
-   { date: '2024-05-25', desktop: 201, mobile: 250 },
-   { date: '2024-05-26', desktop: 213, mobile: 170 },
-   { date: '2024-05-27', desktop: 420, mobile: 460 },
-   { date: '2024-05-28', desktop: 233, mobile: 190 },
-   { date: '2024-05-29', desktop: 78, mobile: 130 },
-   { date: '2024-05-30', desktop: 340, mobile: 280 },
-   { date: '2024-05-31', desktop: 178, mobile: 230 },
-   { date: '2024-06-01', desktop: 178, mobile: 200 },
-   { date: '2024-06-02', desktop: 470, mobile: 410 },
-   { date: '2024-06-03', desktop: 103, mobile: 160 },
-   { date: '2024-06-04', desktop: 439, mobile: 380 },
-   { date: '2024-06-05', desktop: 88, mobile: 140 },
-   { date: '2024-06-06', desktop: 294, mobile: 250 },
-   { date: '2024-06-07', desktop: 323, mobile: 370 },
-   { date: '2024-06-08', desktop: 385, mobile: 320 },
-   { date: '2024-06-09', desktop: 438, mobile: 480 },
-   { date: '2024-06-10', desktop: 155, mobile: 200 },
-   { date: '2024-06-11', desktop: 92, mobile: 150 },
-   { date: '2024-06-12', desktop: 492, mobile: 420 },
-   { date: '2024-06-13', desktop: 81, mobile: 130 },
-   { date: '2024-06-14', desktop: 426, mobile: 380 },
-   { date: '2024-06-15', desktop: 307, mobile: 350 },
-   { date: '2024-06-16', desktop: 371, mobile: 310 },
-   { date: '2024-06-17', desktop: 475, mobile: 520 },
-   { date: '2024-06-18', desktop: 107, mobile: 170 },
-   { date: '2024-06-19', desktop: 341, mobile: 290 },
-   { date: '2024-06-20', desktop: 408, mobile: 450 },
-   { date: '2024-06-21', desktop: 169, mobile: 210 },
-   { date: '2024-06-22', desktop: 317, mobile: 270 },
-   { date: '2024-06-23', desktop: 480, mobile: 530 },
-   { date: '2024-06-24', desktop: 132, mobile: 180 },
-   { date: '2024-06-25', desktop: 141, mobile: 190 },
-   { date: '2024-06-26', desktop: 434, mobile: 380 },
-   { date: '2024-06-27', desktop: 448, mobile: 490 },
-   { date: '2024-06-28', desktop: 149, mobile: 200 },
-   { date: '2024-06-29', desktop: 103, mobile: 160 },
-   { date: '2024-06-30', desktop: 446, mobile: 400 },
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
 export default function Component() {
-   const [timeRange, setTimeRange] = React.useState('90d')
+   const [timeRange, setTimeRange] = React.useState("90d")
 
    const filteredData = chartData.filter((item) => {
       const date = new Date(item.date)
-      const referenceDate = new Date('2024-06-30')
+      const referenceDate = new Date("2024-06-30")
       let daysToSubtract = 90
-      if (timeRange === '30d') {
+      if (timeRange === "30d") {
          daysToSubtract = 30
-      }
-      else if (timeRange === '7d') {
+      } else if (timeRange === "7d") {
          daysToSubtract = 7
       }
       const startDate = new Date(referenceDate)
@@ -192,7 +189,13 @@ export default function Component() {
             >
                <AreaChart data={filteredData}>
                   <defs>
-                     <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                     <linearGradient
+                        id="fillDesktop"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
                         <stop
                            offset="5%"
                            stopColor="var(--color-desktop)"
@@ -204,7 +207,13 @@ export default function Component() {
                            stopOpacity={0.1}
                         />
                      </linearGradient>
-                     <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                     <linearGradient
+                        id="fillMobile"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
                         <stop
                            offset="5%"
                            stopColor="var(--color-mobile)"
@@ -226,25 +235,28 @@ export default function Component() {
                      minTickGap={32}
                      tickFormatter={(value) => {
                         const date = new Date(value)
-                        return date.toLocaleDateString('en-US', {
-                           month: 'short',
-                           day: 'numeric',
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
                         })
                      }}
                   />
                   <ChartTooltip
                      cursor={false}
-                     content={(
+                     content={
                         <ChartTooltipContent
                            labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 month: 'short',
-                                 day: 'numeric',
-                              })
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                 },
+                              )
                            }}
                            indicator="dot"
                         />
-                     )}
+                     }
                   />
                   <Area
                      dataKey="mobile"
diff --git a/apps/web/__registry__/miami/block/chart-area-legend.tsx b/apps/web/__registry__/miami/block/chart-area-legend.tsx
index 9f9dc28b..bba56c59 100644
--- a/apps/web/__registry__/miami/block/chart-area-legend.tsx
+++ b/apps/web/__registry__/miami/block/chart-area-legend.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,37 +10,35 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'An area chart with a legend'
+export const description = "An area chart with a legend"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -69,7 +67,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -99,8 +97,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/miami/block/chart-area-linear.tsx b/apps/web/__registry__/miami/block/chart-area-linear.tsx
index 9957dfd7..c2da1f9c 100644
--- a/apps/web/__registry__/miami/block/chart-area-linear.tsx
+++ b/apps/web/__registry__/miami/block/chart-area-linear.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A linear area chart'
+export const description = "A linear area chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -63,7 +61,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -83,8 +81,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/miami/block/chart-area-stacked-expand.tsx b/apps/web/__registry__/miami/block/chart-area-stacked-expand.tsx
index 6d81a874..359f45c0 100644
--- a/apps/web/__registry__/miami/block/chart-area-stacked-expand.tsx
+++ b/apps/web/__registry__/miami/block/chart-area-stacked-expand.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,39 +10,37 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A stacked area chart with expand stacking'
+export const description = "A stacked area chart with expand stacking"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80, other: 45 },
-   { month: 'February', desktop: 305, mobile: 200, other: 100 },
-   { month: 'March', desktop: 237, mobile: 120, other: 150 },
-   { month: 'April', desktop: 73, mobile: 190, other: 50 },
-   { month: 'May', desktop: 209, mobile: 130, other: 100 },
-   { month: 'June', desktop: 214, mobile: 140, other: 160 },
+   { month: "January", desktop: 186, mobile: 80, other: 45 },
+   { month: "February", desktop: 305, mobile: 200, other: 100 },
+   { month: "March", desktop: 237, mobile: 120, other: 150 },
+   { month: "April", desktop: 73, mobile: 190, other: 50 },
+   { month: "May", desktop: 209, mobile: 130, other: 100 },
+   { month: "June", desktop: 214, mobile: 140, other: 160 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-3))',
+      label: "Other",
+      color: "hsl(var(--chart-3))",
    },
 } satisfies ChartConfig
 
@@ -73,7 +71,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -110,8 +108,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/miami/block/chart-area-stacked.tsx b/apps/web/__registry__/miami/block/chart-area-stacked.tsx
index becf5e88..3fdfe8c9 100644
--- a/apps/web/__registry__/miami/block/chart-area-stacked.tsx
+++ b/apps/web/__registry__/miami/block/chart-area-stacked.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A stacked area chart'
+export const description = "A stacked area chart"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -67,7 +65,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -96,8 +94,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/miami/block/chart-area-step.tsx b/apps/web/__registry__/miami/block/chart-area-step.tsx
index af39855e..d9bc6b08 100644
--- a/apps/web/__registry__/miami/block/chart-area-step.tsx
+++ b/apps/web/__registry__/miami/block/chart-area-step.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { Activity, TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+import { Activity, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A step area chart'
+export const description = "A step area chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
       icon: Activity,
    },
 } satisfies ChartConfig
@@ -64,7 +62,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -84,8 +82,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/miami/block/chart-bar-active.tsx b/apps/web/__registry__/miami/block/chart-bar-active.tsx
index fff43d66..f6260061 100644
--- a/apps/web/__registry__/miami/block/chart-bar-active.tsx
+++ b/apps/web/__registry__/miami/block/chart-bar-active.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A bar chart with an active bar'
+export const description = "A bar chart with an active bar"
 
 const chartData = [
-   { browser: 'chrome', visitors: 187, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 275, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -72,8 +70,9 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value =>
-                        chartConfig[value as keyof typeof chartConfig]?.label}
+                     tickFormatter={(value) =>
+                        chartConfig[value as keyof typeof chartConfig]?.label
+                     }
                   />
                   <ChartTooltip
                      cursor={false}
@@ -101,9 +100,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-bar-default.tsx b/apps/web/__registry__/miami/block/chart-bar-default.tsx
index 94a414fd..f0ba5361 100644
--- a/apps/web/__registry__/miami/block/chart-bar-default.tsx
+++ b/apps/web/__registry__/miami/block/chart-bar-default.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A bar chart'
+export const description = "A bar chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -54,21 +52,23 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
                      content={<ChartTooltipContent hideLabel />}
                   />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={8}
+                  />
                </BarChart>
             </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-bar-horizontal.tsx b/apps/web/__registry__/miami/block/chart-bar-horizontal.tsx
index 041ba2be..6aea515a 100644
--- a/apps/web/__registry__/miami/block/chart-bar-horizontal.tsx
+++ b/apps/web/__registry__/miami/block/chart-bar-horizontal.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A horizontal bar chart'
+export const description = "A horizontal bar chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -62,21 +60,23 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
                      content={<ChartTooltipContent hideLabel />}
                   />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={5} />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={5}
+                  />
                </BarChart>
             </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-bar-interactive.tsx b/apps/web/__registry__/miami/block/chart-bar-interactive.tsx
index 7bd2618d..8e56b459 100644
--- a/apps/web/__registry__/miami/block/chart-bar-interactive.tsx
+++ b/apps/web/__registry__/miami/block/chart-bar-interactive.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -9,129 +9,127 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'An interactive bar chart'
+export const description = "An interactive bar chart"
 
 const chartData = [
-   { date: '2024-04-01', desktop: 222, mobile: 150 },
-   { date: '2024-04-02', desktop: 97, mobile: 180 },
-   { date: '2024-04-03', desktop: 167, mobile: 120 },
-   { date: '2024-04-04', desktop: 242, mobile: 260 },
-   { date: '2024-04-05', desktop: 373, mobile: 290 },
-   { date: '2024-04-06', desktop: 301, mobile: 340 },
-   { date: '2024-04-07', desktop: 245, mobile: 180 },
-   { date: '2024-04-08', desktop: 409, mobile: 320 },
-   { date: '2024-04-09', desktop: 59, mobile: 110 },
-   { date: '2024-04-10', desktop: 261, mobile: 190 },
-   { date: '2024-04-11', desktop: 327, mobile: 350 },
-   { date: '2024-04-12', desktop: 292, mobile: 210 },
-   { date: '2024-04-13', desktop: 342, mobile: 380 },
-   { date: '2024-04-14', desktop: 137, mobile: 220 },
-   { date: '2024-04-15', desktop: 120, mobile: 170 },
-   { date: '2024-04-16', desktop: 138, mobile: 190 },
-   { date: '2024-04-17', desktop: 446, mobile: 360 },
-   { date: '2024-04-18', desktop: 364, mobile: 410 },
-   { date: '2024-04-19', desktop: 243, mobile: 180 },
-   { date: '2024-04-20', desktop: 89, mobile: 150 },
-   { date: '2024-04-21', desktop: 137, mobile: 200 },
-   { date: '2024-04-22', desktop: 224, mobile: 170 },
-   { date: '2024-04-23', desktop: 138, mobile: 230 },
-   { date: '2024-04-24', desktop: 387, mobile: 290 },
-   { date: '2024-04-25', desktop: 215, mobile: 250 },
-   { date: '2024-04-26', desktop: 75, mobile: 130 },
-   { date: '2024-04-27', desktop: 383, mobile: 420 },
-   { date: '2024-04-28', desktop: 122, mobile: 180 },
-   { date: '2024-04-29', desktop: 315, mobile: 240 },
-   { date: '2024-04-30', desktop: 454, mobile: 380 },
-   { date: '2024-05-01', desktop: 165, mobile: 220 },
-   { date: '2024-05-02', desktop: 293, mobile: 310 },
-   { date: '2024-05-03', desktop: 247, mobile: 190 },
-   { date: '2024-05-04', desktop: 385, mobile: 420 },
-   { date: '2024-05-05', desktop: 481, mobile: 390 },
-   { date: '2024-05-06', desktop: 498, mobile: 520 },
-   { date: '2024-05-07', desktop: 388, mobile: 300 },
-   { date: '2024-05-08', desktop: 149, mobile: 210 },
-   { date: '2024-05-09', desktop: 227, mobile: 180 },
-   { date: '2024-05-10', desktop: 293, mobile: 330 },
-   { date: '2024-05-11', desktop: 335, mobile: 270 },
-   { date: '2024-05-12', desktop: 197, mobile: 240 },
-   { date: '2024-05-13', desktop: 197, mobile: 160 },
-   { date: '2024-05-14', desktop: 448, mobile: 490 },
-   { date: '2024-05-15', desktop: 473, mobile: 380 },
-   { date: '2024-05-16', desktop: 338, mobile: 400 },
-   { date: '2024-05-17', desktop: 499, mobile: 420 },
-   { date: '2024-05-18', desktop: 315, mobile: 350 },
-   { date: '2024-05-19', desktop: 235, mobile: 180 },
-   { date: '2024-05-20', desktop: 177, mobile: 230 },
-   { date: '2024-05-21', desktop: 82, mobile: 140 },
-   { date: '2024-05-22', desktop: 81, mobile: 120 },
-   { date: '2024-05-23', desktop: 252, mobile: 290 },
-   { date: '2024-05-24', desktop: 294, mobile: 220 },
-   { date: '2024-05-25', desktop: 201, mobile: 250 },
-   { date: '2024-05-26', desktop: 213, mobile: 170 },
-   { date: '2024-05-27', desktop: 420, mobile: 460 },
-   { date: '2024-05-28', desktop: 233, mobile: 190 },
-   { date: '2024-05-29', desktop: 78, mobile: 130 },
-   { date: '2024-05-30', desktop: 340, mobile: 280 },
-   { date: '2024-05-31', desktop: 178, mobile: 230 },
-   { date: '2024-06-01', desktop: 178, mobile: 200 },
-   { date: '2024-06-02', desktop: 470, mobile: 410 },
-   { date: '2024-06-03', desktop: 103, mobile: 160 },
-   { date: '2024-06-04', desktop: 439, mobile: 380 },
-   { date: '2024-06-05', desktop: 88, mobile: 140 },
-   { date: '2024-06-06', desktop: 294, mobile: 250 },
-   { date: '2024-06-07', desktop: 323, mobile: 370 },
-   { date: '2024-06-08', desktop: 385, mobile: 320 },
-   { date: '2024-06-09', desktop: 438, mobile: 480 },
-   { date: '2024-06-10', desktop: 155, mobile: 200 },
-   { date: '2024-06-11', desktop: 92, mobile: 150 },
-   { date: '2024-06-12', desktop: 492, mobile: 420 },
-   { date: '2024-06-13', desktop: 81, mobile: 130 },
-   { date: '2024-06-14', desktop: 426, mobile: 380 },
-   { date: '2024-06-15', desktop: 307, mobile: 350 },
-   { date: '2024-06-16', desktop: 371, mobile: 310 },
-   { date: '2024-06-17', desktop: 475, mobile: 520 },
-   { date: '2024-06-18', desktop: 107, mobile: 170 },
-   { date: '2024-06-19', desktop: 341, mobile: 290 },
-   { date: '2024-06-20', desktop: 408, mobile: 450 },
-   { date: '2024-06-21', desktop: 169, mobile: 210 },
-   { date: '2024-06-22', desktop: 317, mobile: 270 },
-   { date: '2024-06-23', desktop: 480, mobile: 530 },
-   { date: '2024-06-24', desktop: 132, mobile: 180 },
-   { date: '2024-06-25', desktop: 141, mobile: 190 },
-   { date: '2024-06-26', desktop: 434, mobile: 380 },
-   { date: '2024-06-27', desktop: 448, mobile: 490 },
-   { date: '2024-06-28', desktop: 149, mobile: 200 },
-   { date: '2024-06-29', desktop: 103, mobile: 160 },
-   { date: '2024-06-30', desktop: 446, mobile: 400 },
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
 ]
 
 const chartConfig = {
    views: {
-      label: 'Page Views',
+      label: "Page Views",
    },
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
 export default function Component() {
-   const [activeChart, setActiveChart]
-    = React.useState<keyof typeof chartConfig>('desktop')
+   const [activeChart, setActiveChart] =
+      React.useState<keyof typeof chartConfig>("desktop")
 
    const total = React.useMemo(
       () => ({
@@ -151,7 +149,7 @@ export default function Component() {
                </CardDescription>
             </div>
             <div className="flex">
-               {['desktop', 'mobile'].map((key) => {
+               {["desktop", "mobile"].map((key) => {
                   const chart = key as keyof typeof chartConfig
                   return (
                      <button
@@ -193,28 +191,34 @@ export default function Component() {
                      minTickGap={32}
                      tickFormatter={(value) => {
                         const date = new Date(value)
-                        return date.toLocaleDateString('en-US', {
-                           month: 'short',
-                           day: 'numeric',
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
                         })
                      }}
                   />
                   <ChartTooltip
-                     content={(
+                     content={
                         <ChartTooltipContent
                            className="w-[150px]"
                            nameKey="views"
                            labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 month: 'short',
-                                 day: 'numeric',
-                                 year: 'numeric',
-                              })
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                 },
+                              )
                            }}
                         />
-                     )}
+                     }
+                  />
+                  <Bar
+                     dataKey={activeChart}
+                     fill={`var(--color-${activeChart})`}
                   />
-                  <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
                </BarChart>
             </ChartContainer>
          </CardContent>
diff --git a/apps/web/__registry__/miami/block/chart-bar-label-custom.tsx b/apps/web/__registry__/miami/block/chart-bar-label-custom.tsx
index f82e95b6..7d88561e 100644
--- a/apps/web/__registry__/miami/block/chart-bar-label-custom.tsx
+++ b/apps/web/__registry__/miami/block/chart-bar-label-custom.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
 
 import {
    Card,
@@ -10,38 +10,36 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A bar chart with a custom label'
+export const description = "A bar chart with a custom label"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
    label: {
-      color: 'hsl(var(--background))',
+      color: "hsl(var(--background))",
    },
 } satisfies ChartConfig
 
@@ -69,7 +67,7 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                      hide
                   />
                   <XAxis dataKey="desktop" type="number" hide />
@@ -103,9 +101,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-bar-label.tsx b/apps/web/__registry__/miami/block/chart-bar-label.tsx
index 85533ed0..1823eacc 100644
--- a/apps/web/__registry__/miami/block/chart-bar-label.tsx
+++ b/apps/web/__registry__/miami/block/chart-bar-label.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A bar chart with a label'
+export const description = "A bar chart with a label"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -60,7 +58,7 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -79,9 +77,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-bar-mixed.tsx b/apps/web/__registry__/miami/block/chart-bar-mixed.tsx
index ac8d54a4..f7d95743 100644
--- a/apps/web/__registry__/miami/block/chart-bar-mixed.tsx
+++ b/apps/web/__registry__/miami/block/chart-bar-mixed.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A mixed bar chart'
+export const description = "A mixed bar chart"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -79,8 +77,9 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value =>
-                        chartConfig[value as keyof typeof chartConfig]?.label}
+                     tickFormatter={(value) =>
+                        chartConfig[value as keyof typeof chartConfig]?.label
+                     }
                   />
                   <XAxis dataKey="visitors" type="number" hide />
                   <ChartTooltip
@@ -93,9 +92,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-bar-multiple.tsx b/apps/web/__registry__/miami/block/chart-bar-multiple.tsx
index fad70c33..5034cf1a 100644
--- a/apps/web/__registry__/miami/block/chart-bar-multiple.tsx
+++ b/apps/web/__registry__/miami/block/chart-bar-multiple.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A multiple bar chart'
+export const description = "A multiple bar chart"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -58,22 +56,24 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
                      content={<ChartTooltipContent indicator="dashed" />}
                   />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={4}
+                  />
                   <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
                </BarChart>
             </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-bar-negative.tsx b/apps/web/__registry__/miami/block/chart-bar-negative.tsx
index 1daaef73..bab63b8e 100644
--- a/apps/web/__registry__/miami/block/chart-bar-negative.tsx
+++ b/apps/web/__registry__/miami/block/chart-bar-negative.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, Cell, LabelList } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"
 
 import {
    Card,
@@ -10,30 +10,28 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A bar chart with negative values'
+export const description = "A bar chart with negative values"
 
 const chartData = [
-   { month: 'January', visitors: 186 },
-   { month: 'February', visitors: 205 },
-   { month: 'March', visitors: -207 },
-   { month: 'April', visitors: 173 },
-   { month: 'May', visitors: -209 },
-   { month: 'June', visitors: 214 },
+   { month: "January", visitors: 186 },
+   { month: "February", visitors: 205 },
+   { month: "March", visitors: -207 },
+   { month: "April", visitors: 173 },
+   { month: "May", visitors: -209 },
+   { month: "June", visitors: 214 },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
 } satisfies ChartConfig
 
@@ -53,14 +51,18 @@ export default function Component() {
                      content={<ChartTooltipContent hideLabel hideIndicator />}
                   />
                   <Bar dataKey="visitors">
-                     <LabelList position="top" dataKey="month" fillOpacity={1} />
-                     {chartData.map(item => (
+                     <LabelList
+                        position="top"
+                        dataKey="month"
+                        fillOpacity={1}
+                     />
+                     {chartData.map((item) => (
                         <Cell
                            key={item.month}
                            fill={
                               item.visitors > 0
-                                 ? 'hsl(var(--chart-1))'
-                                 : 'hsl(var(--chart-2))'
+                                 ? "hsl(var(--chart-1))"
+                                 : "hsl(var(--chart-2))"
                            }
                         />
                      ))}
@@ -70,9 +72,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-bar-stacked.tsx b/apps/web/__registry__/miami/block/chart-bar-stacked.tsx
index 6c08afff..82dbe564 100644
--- a/apps/web/__registry__/miami/block/chart-bar-stacked.tsx
+++ b/apps/web/__registry__/miami/block/chart-bar-stacked.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,37 +10,35 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -60,7 +58,7 @@ export default function Component() {
                      tickLine={false}
                      tickMargin={10}
                      axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip content={<ChartTooltipContent hideLabel />} />
                   <ChartLegend content={<ChartLegendContent />} />
@@ -81,9 +79,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-line-default.tsx b/apps/web/__registry__/miami/block/chart-line-default.tsx
index a21afde3..6fb83095 100644
--- a/apps/web/__registry__/miami/block/chart-line-default.tsx
+++ b/apps/web/__registry__/miami/block/chart-line-default.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A line chart'
+export const description = "A line chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -61,7 +59,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -79,9 +77,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-line-dots-colors.tsx b/apps/web/__registry__/miami/block/chart-line-dots-colors.tsx
index 76a8bf53..d915faf4 100644
--- a/apps/web/__registry__/miami/block/chart-line-dots-colors.tsx
+++ b/apps/web/__registry__/miami/block/chart-line-dots-colors.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Dot, Line, LineChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Dot, Line, LineChart } from "recharts"
 
 import {
    Card,
@@ -10,50 +10,48 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A line chart with dots and colors'
+export const description = "A line chart with dots and colors"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
-      color: 'hsl(var(--chart-2))',
+      label: "Visitors",
+      color: "hsl(var(--chart-2))",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -78,13 +76,13 @@ export default function Component() {
                   <CartesianGrid vertical={false} />
                   <ChartTooltip
                      cursor={false}
-                     content={(
+                     content={
                         <ChartTooltipContent
                            indicator="line"
                            nameKey="visitors"
                            hideLabel
                         />
-                     )}
+                     }
                   />
                   <Line
                      dataKey="visitors"
@@ -109,9 +107,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-line-dots-custom.tsx b/apps/web/__registry__/miami/block/chart-line-dots-custom.tsx
index 6e30008b..a5fe2c1e 100644
--- a/apps/web/__registry__/miami/block/chart-line-dots-custom.tsx
+++ b/apps/web/__registry__/miami/block/chart-line-dots-custom.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { GitCommitVertical, TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import { GitCommitVertical, TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A line chart with custom dots'
+export const description = "A line chart with custom dots"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -65,7 +63,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -96,9 +94,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-line-dots.tsx b/apps/web/__registry__/miami/block/chart-line-dots.tsx
index 85eab829..28542039 100644
--- a/apps/web/__registry__/miami/block/chart-line-dots.tsx
+++ b/apps/web/__registry__/miami/block/chart-line-dots.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A line chart with dots'
+export const description = "A line chart with dots"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -65,7 +63,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -77,7 +75,7 @@ export default function Component() {
                      stroke="var(--color-desktop)"
                      strokeWidth={2}
                      dot={{
-                        fill: 'var(--color-desktop)',
+                        fill: "var(--color-desktop)",
                      }}
                      activeDot={{
                         r: 6,
@@ -88,9 +86,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-line-interactive.tsx b/apps/web/__registry__/miami/block/chart-line-interactive.tsx
index d9504116..e1c1b550 100644
--- a/apps/web/__registry__/miami/block/chart-line-interactive.tsx
+++ b/apps/web/__registry__/miami/block/chart-line-interactive.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import * as React from "react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -9,129 +9,127 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'An interactive line chart'
+export const description = "An interactive line chart"
 
 const chartData = [
-   { date: '2024-04-01', desktop: 222, mobile: 150 },
-   { date: '2024-04-02', desktop: 97, mobile: 180 },
-   { date: '2024-04-03', desktop: 167, mobile: 120 },
-   { date: '2024-04-04', desktop: 242, mobile: 260 },
-   { date: '2024-04-05', desktop: 373, mobile: 290 },
-   { date: '2024-04-06', desktop: 301, mobile: 340 },
-   { date: '2024-04-07', desktop: 245, mobile: 180 },
-   { date: '2024-04-08', desktop: 409, mobile: 320 },
-   { date: '2024-04-09', desktop: 59, mobile: 110 },
-   { date: '2024-04-10', desktop: 261, mobile: 190 },
-   { date: '2024-04-11', desktop: 327, mobile: 350 },
-   { date: '2024-04-12', desktop: 292, mobile: 210 },
-   { date: '2024-04-13', desktop: 342, mobile: 380 },
-   { date: '2024-04-14', desktop: 137, mobile: 220 },
-   { date: '2024-04-15', desktop: 120, mobile: 170 },
-   { date: '2024-04-16', desktop: 138, mobile: 190 },
-   { date: '2024-04-17', desktop: 446, mobile: 360 },
-   { date: '2024-04-18', desktop: 364, mobile: 410 },
-   { date: '2024-04-19', desktop: 243, mobile: 180 },
-   { date: '2024-04-20', desktop: 89, mobile: 150 },
-   { date: '2024-04-21', desktop: 137, mobile: 200 },
-   { date: '2024-04-22', desktop: 224, mobile: 170 },
-   { date: '2024-04-23', desktop: 138, mobile: 230 },
-   { date: '2024-04-24', desktop: 387, mobile: 290 },
-   { date: '2024-04-25', desktop: 215, mobile: 250 },
-   { date: '2024-04-26', desktop: 75, mobile: 130 },
-   { date: '2024-04-27', desktop: 383, mobile: 420 },
-   { date: '2024-04-28', desktop: 122, mobile: 180 },
-   { date: '2024-04-29', desktop: 315, mobile: 240 },
-   { date: '2024-04-30', desktop: 454, mobile: 380 },
-   { date: '2024-05-01', desktop: 165, mobile: 220 },
-   { date: '2024-05-02', desktop: 293, mobile: 310 },
-   { date: '2024-05-03', desktop: 247, mobile: 190 },
-   { date: '2024-05-04', desktop: 385, mobile: 420 },
-   { date: '2024-05-05', desktop: 481, mobile: 390 },
-   { date: '2024-05-06', desktop: 498, mobile: 520 },
-   { date: '2024-05-07', desktop: 388, mobile: 300 },
-   { date: '2024-05-08', desktop: 149, mobile: 210 },
-   { date: '2024-05-09', desktop: 227, mobile: 180 },
-   { date: '2024-05-10', desktop: 293, mobile: 330 },
-   { date: '2024-05-11', desktop: 335, mobile: 270 },
-   { date: '2024-05-12', desktop: 197, mobile: 240 },
-   { date: '2024-05-13', desktop: 197, mobile: 160 },
-   { date: '2024-05-14', desktop: 448, mobile: 490 },
-   { date: '2024-05-15', desktop: 473, mobile: 380 },
-   { date: '2024-05-16', desktop: 338, mobile: 400 },
-   { date: '2024-05-17', desktop: 499, mobile: 420 },
-   { date: '2024-05-18', desktop: 315, mobile: 350 },
-   { date: '2024-05-19', desktop: 235, mobile: 180 },
-   { date: '2024-05-20', desktop: 177, mobile: 230 },
-   { date: '2024-05-21', desktop: 82, mobile: 140 },
-   { date: '2024-05-22', desktop: 81, mobile: 120 },
-   { date: '2024-05-23', desktop: 252, mobile: 290 },
-   { date: '2024-05-24', desktop: 294, mobile: 220 },
-   { date: '2024-05-25', desktop: 201, mobile: 250 },
-   { date: '2024-05-26', desktop: 213, mobile: 170 },
-   { date: '2024-05-27', desktop: 420, mobile: 460 },
-   { date: '2024-05-28', desktop: 233, mobile: 190 },
-   { date: '2024-05-29', desktop: 78, mobile: 130 },
-   { date: '2024-05-30', desktop: 340, mobile: 280 },
-   { date: '2024-05-31', desktop: 178, mobile: 230 },
-   { date: '2024-06-01', desktop: 178, mobile: 200 },
-   { date: '2024-06-02', desktop: 470, mobile: 410 },
-   { date: '2024-06-03', desktop: 103, mobile: 160 },
-   { date: '2024-06-04', desktop: 439, mobile: 380 },
-   { date: '2024-06-05', desktop: 88, mobile: 140 },
-   { date: '2024-06-06', desktop: 294, mobile: 250 },
-   { date: '2024-06-07', desktop: 323, mobile: 370 },
-   { date: '2024-06-08', desktop: 385, mobile: 320 },
-   { date: '2024-06-09', desktop: 438, mobile: 480 },
-   { date: '2024-06-10', desktop: 155, mobile: 200 },
-   { date: '2024-06-11', desktop: 92, mobile: 150 },
-   { date: '2024-06-12', desktop: 492, mobile: 420 },
-   { date: '2024-06-13', desktop: 81, mobile: 130 },
-   { date: '2024-06-14', desktop: 426, mobile: 380 },
-   { date: '2024-06-15', desktop: 307, mobile: 350 },
-   { date: '2024-06-16', desktop: 371, mobile: 310 },
-   { date: '2024-06-17', desktop: 475, mobile: 520 },
-   { date: '2024-06-18', desktop: 107, mobile: 170 },
-   { date: '2024-06-19', desktop: 341, mobile: 290 },
-   { date: '2024-06-20', desktop: 408, mobile: 450 },
-   { date: '2024-06-21', desktop: 169, mobile: 210 },
-   { date: '2024-06-22', desktop: 317, mobile: 270 },
-   { date: '2024-06-23', desktop: 480, mobile: 530 },
-   { date: '2024-06-24', desktop: 132, mobile: 180 },
-   { date: '2024-06-25', desktop: 141, mobile: 190 },
-   { date: '2024-06-26', desktop: 434, mobile: 380 },
-   { date: '2024-06-27', desktop: 448, mobile: 490 },
-   { date: '2024-06-28', desktop: 149, mobile: 200 },
-   { date: '2024-06-29', desktop: 103, mobile: 160 },
-   { date: '2024-06-30', desktop: 446, mobile: 400 },
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
 ]
 
 const chartConfig = {
    views: {
-      label: 'Page Views',
+      label: "Page Views",
    },
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
 export default function Component() {
-   const [activeChart, setActiveChart]
-    = React.useState<keyof typeof chartConfig>('desktop')
+   const [activeChart, setActiveChart] =
+      React.useState<keyof typeof chartConfig>("desktop")
 
    const total = React.useMemo(
       () => ({
@@ -151,7 +149,7 @@ export default function Component() {
                </CardDescription>
             </div>
             <div className="flex">
-               {['desktop', 'mobile'].map((key) => {
+               {["desktop", "mobile"].map((key) => {
                   const chart = key as keyof typeof chartConfig
                   return (
                      <button
@@ -193,26 +191,29 @@ export default function Component() {
                      minTickGap={32}
                      tickFormatter={(value) => {
                         const date = new Date(value)
-                        return date.toLocaleDateString('en-US', {
-                           month: 'short',
-                           day: 'numeric',
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
                         })
                      }}
                   />
                   <ChartTooltip
-                     content={(
+                     content={
                         <ChartTooltipContent
                            className="w-[150px]"
                            nameKey="views"
                            labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 month: 'short',
-                                 day: 'numeric',
-                                 year: 'numeric',
-                              })
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                 },
+                              )
                            }}
                         />
-                     )}
+                     }
                   />
                   <Line
                      dataKey={activeChart}
diff --git a/apps/web/__registry__/miami/block/chart-line-label-custom.tsx b/apps/web/__registry__/miami/block/chart-line-label-custom.tsx
index 87816e09..405c5840 100644
--- a/apps/web/__registry__/miami/block/chart-line-label-custom.tsx
+++ b/apps/web/__registry__/miami/block/chart-line-label-custom.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, LabelList, Line, LineChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart } from "recharts"
 
 import {
    Card,
@@ -10,50 +10,48 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A line chart with a custom label'
+export const description = "A line chart with a custom label"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
-      color: 'hsl(var(--chart-2))',
+      label: "Visitors",
+      color: "hsl(var(--chart-2))",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -78,13 +76,13 @@ export default function Component() {
                   <CartesianGrid vertical={false} />
                   <ChartTooltip
                      cursor={false}
-                     content={(
+                     content={
                         <ChartTooltipContent
                            indicator="line"
                            nameKey="visitors"
                            hideLabel
                         />
-                     )}
+                     }
                   />
                   <Line
                      dataKey="visitors"
@@ -92,7 +90,7 @@ export default function Component() {
                      stroke="var(--color-visitors)"
                      strokeWidth={2}
                      dot={{
-                        fill: 'var(--color-visitors)',
+                        fill: "var(--color-visitors)",
                      }}
                      activeDot={{
                         r: 6,
@@ -105,7 +103,8 @@ export default function Component() {
                         fontSize={12}
                         dataKey="browser"
                         formatter={(value: keyof typeof chartConfig) =>
-                           chartConfig[value]?.label}
+                           chartConfig[value]?.label
+                        }
                      />
                   </Line>
                </LineChart>
@@ -113,9 +112,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-line-label.tsx b/apps/web/__registry__/miami/block/chart-line-label.tsx
index 8064a229..dbad79b5 100644
--- a/apps/web/__registry__/miami/block/chart-line-label.tsx
+++ b/apps/web/__registry__/miami/block/chart-line-label.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, LabelList, Line, LineChart, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A line chart with a label'
+export const description = "A line chart with a label"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -66,7 +64,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -78,7 +76,7 @@ export default function Component() {
                      stroke="var(--color-desktop)"
                      strokeWidth={2}
                      dot={{
-                        fill: 'var(--color-desktop)',
+                        fill: "var(--color-desktop)",
                      }}
                      activeDot={{
                         r: 6,
@@ -96,9 +94,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-line-linear.tsx b/apps/web/__registry__/miami/block/chart-line-linear.tsx
index c9c26dcf..35b32f16 100644
--- a/apps/web/__registry__/miami/block/chart-line-linear.tsx
+++ b/apps/web/__registry__/miami/block/chart-line-linear.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A linear line chart'
+export const description = "A linear line chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -61,7 +59,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -79,9 +77,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-line-multiple.tsx b/apps/web/__registry__/miami/block/chart-line-multiple.tsx
index 39df9711..04cbe1cd 100644
--- a/apps/web/__registry__/miami/block/chart-line-multiple.tsx
+++ b/apps/web/__registry__/miami/block/chart-line-multiple.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A multiple line chart'
+export const description = "A multiple line chart"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -65,9 +63,12 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
                   />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
                   <Line
                      dataKey="desktop"
                      type="monotone"
@@ -89,8 +90,7 @@ export default function Component() {
             <div className="flex w-full items-start gap-2 text-sm">
                <div className="grid gap-2">
                   <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
+                     Trending up by 5.2% this month{" "}
                      <TrendingUp className="size-4" />
                   </div>
                   <div className="text-muted-foreground flex items-center gap-2 leading-none">
diff --git a/apps/web/__registry__/miami/block/chart-line-step.tsx b/apps/web/__registry__/miami/block/chart-line-step.tsx
index c1a292a9..5662e393 100644
--- a/apps/web/__registry__/miami/block/chart-line-step.tsx
+++ b/apps/web/__registry__/miami/block/chart-line-step.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A line chart with step'
+export const description = "A line chart with step"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -61,7 +59,7 @@ export default function Component() {
                      tickLine={false}
                      axisLine={false}
                      tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
+                     tickFormatter={(value) => value.slice(0, 3)}
                   />
                   <ChartTooltip
                      cursor={false}
@@ -79,9 +77,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col items-start gap-2 text-sm">
             <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-pie-donut-active.tsx b/apps/web/__registry__/miami/block/chart-pie-donut-active.tsx
index 3b2bd7a2..c7bf4d07 100644
--- a/apps/web/__registry__/miami/block/chart-pie-donut-active.tsx
+++ b/apps/web/__registry__/miami/block/chart-pie-donut-active.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Label, Pie, PieChart, Sector } from 'recharts'
-import type { PieSectorDataItem } from 'recharts/types/polar/Pie'
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import type { PieSectorDataItem } from "recharts/types/polar/Pie"
 
 import {
    Card,
@@ -11,49 +11,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A donut chart with an active sector'
+export const description = "A donut chart with an active sector"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -93,9 +91,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-pie-donut-text.tsx b/apps/web/__registry__/miami/block/chart-pie-donut-text.tsx
index 860d39e6..d995f04b 100644
--- a/apps/web/__registry__/miami/block/chart-pie-donut-text.tsx
+++ b/apps/web/__registry__/miami/block/chart-pie-donut-text.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { TrendingUp } from 'lucide-react'
-import { Label, Pie, PieChart } from 'recharts'
+import * as React from "react"
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -11,49 +11,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A donut chart with text'
+export const description = "A donut chart with text"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 287, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 190, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 190, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -87,7 +85,7 @@ export default function Component() {
                   >
                      <Label
                         content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                               return (
                                  <text
                                     x={viewBox.cx}
@@ -120,9 +118,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-pie-donut.tsx b/apps/web/__registry__/miami/block/chart-pie-donut.tsx
index a3dbb2d5..44139718 100644
--- a/apps/web/__registry__/miami/block/chart-pie-donut.tsx
+++ b/apps/web/__registry__/miami/block/chart-pie-donut.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A donut chart'
+export const description = "A donut chart"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -84,9 +82,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-pie-interactive.tsx b/apps/web/__registry__/miami/block/chart-pie-interactive.tsx
index 6979152e..f8cbe4cd 100644
--- a/apps/web/__registry__/miami/block/chart-pie-interactive.tsx
+++ b/apps/web/__registry__/miami/block/chart-pie-interactive.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Label, Pie, PieChart, Sector } from 'recharts'
-import type { PieSectorDataItem } from 'recharts/types/polar/Pie'
+import * as React from "react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import type { PieSectorDataItem } from "recharts/types/polar/Pie"
 
 import {
    Card,
@@ -10,75 +10,73 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartStyle,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/miami/ui/select'
+} from "~/registry/miami/ui/select"
 
-export const description = 'An interactive pie chart'
+export const description = "An interactive pie chart"
 
 const desktopData = [
-   { month: 'january', desktop: 186, fill: 'var(--color-january)' },
-   { month: 'february', desktop: 305, fill: 'var(--color-february)' },
-   { month: 'march', desktop: 237, fill: 'var(--color-march)' },
-   { month: 'april', desktop: 173, fill: 'var(--color-april)' },
-   { month: 'may', desktop: 209, fill: 'var(--color-may)' },
+   { month: "january", desktop: 186, fill: "var(--color-january)" },
+   { month: "february", desktop: 305, fill: "var(--color-february)" },
+   { month: "march", desktop: 237, fill: "var(--color-march)" },
+   { month: "april", desktop: 173, fill: "var(--color-april)" },
+   { month: "may", desktop: 209, fill: "var(--color-may)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    desktop: {
-      label: 'Desktop',
+      label: "Desktop",
    },
    mobile: {
-      label: 'Mobile',
+      label: "Mobile",
    },
    january: {
-      label: 'January',
-      color: 'hsl(var(--chart-1))',
+      label: "January",
+      color: "hsl(var(--chart-1))",
    },
    february: {
-      label: 'February',
-      color: 'hsl(var(--chart-2))',
+      label: "February",
+      color: "hsl(var(--chart-2))",
    },
    march: {
-      label: 'March',
-      color: 'hsl(var(--chart-3))',
+      label: "March",
+      color: "hsl(var(--chart-3))",
    },
    april: {
-      label: 'April',
-      color: 'hsl(var(--chart-4))',
+      label: "April",
+      color: "hsl(var(--chart-4))",
    },
    may: {
-      label: 'May',
-      color: 'hsl(var(--chart-5))',
+      label: "May",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
 export default function Component() {
-   const id = 'pie-interactive'
+   const id = "pie-interactive"
    const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
 
    const activeIndex = React.useMemo(
-      () => desktopData.findIndex(item => item.month === activeMonth),
+      () => desktopData.findIndex((item) => item.month === activeMonth),
       [activeMonth],
    )
-   const months = React.useMemo(() => desktopData.map(item => item.month), [])
+   const months = React.useMemo(() => desktopData.map((item) => item.month), [])
 
    return (
       <Card data-chart={id} className="flex flex-col">
@@ -158,7 +156,7 @@ export default function Component() {
                   >
                      <Label
                         content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                               return (
                                  <text
                                     x={viewBox.cx}
@@ -171,7 +169,9 @@ export default function Component() {
                                        y={viewBox.cy}
                                        className="fill-foreground text-3xl font-bold"
                                     >
-                                       {desktopData[activeIndex].desktop.toLocaleString()}
+                                       {desktopData[
+                                          activeIndex
+                                       ].desktop.toLocaleString()}
                                     </tspan>
                                     <tspan
                                        x={viewBox.cx}
diff --git a/apps/web/__registry__/miami/block/chart-pie-label-custom.tsx b/apps/web/__registry__/miami/block/chart-pie-label-custom.tsx
index a369051c..b61af77a 100644
--- a/apps/web/__registry__/miami/block/chart-pie-label-custom.tsx
+++ b/apps/web/__registry__/miami/block/chart-pie-label-custom.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A pie chart with a custom label'
+export const description = "A pie chart with a custom label"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -70,7 +68,9 @@ export default function Component() {
             >
                <PieChart>
                   <ChartTooltip
-                     content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+                     content={
+                        <ChartTooltipContent nameKey="visitors" hideLabel />
+                     }
                   />
                   <Pie
                      data={chartData}
@@ -98,9 +98,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-pie-label-list.tsx b/apps/web/__registry__/miami/block/chart-pie-label-list.tsx
index e21dd107..047d7d57 100644
--- a/apps/web/__registry__/miami/block/chart-pie-label-list.tsx
+++ b/apps/web/__registry__/miami/block/chart-pie-label-list.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { LabelList, Pie, PieChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { LabelList, Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A pie chart with a label list'
+export const description = "A pie chart with a label list"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -70,7 +68,9 @@ export default function Component() {
             >
                <PieChart>
                   <ChartTooltip
-                     content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+                     content={
+                        <ChartTooltipContent nameKey="visitors" hideLabel />
+                     }
                   />
                   <Pie data={chartData} dataKey="visitors">
                      <LabelList
@@ -79,7 +79,8 @@ export default function Component() {
                         stroke="none"
                         fontSize={12}
                         formatter={(value: keyof typeof chartConfig) =>
-                           chartConfig[value]?.label}
+                           chartConfig[value]?.label
+                        }
                      />
                   </Pie>
                </PieChart>
@@ -87,9 +88,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-pie-label.tsx b/apps/web/__registry__/miami/block/chart-pie-label.tsx
index 692d5af1..45895be8 100644
--- a/apps/web/__registry__/miami/block/chart-pie-label.tsx
+++ b/apps/web/__registry__/miami/block/chart-pie-label.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A pie chart with a label'
+export const description = "A pie chart with a label"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -70,15 +68,18 @@ export default function Component() {
             >
                <PieChart>
                   <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-                  <Pie data={chartData} dataKey="visitors" label nameKey="browser" />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     label
+                     nameKey="browser"
+                  />
                </PieChart>
             </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-pie-legend.tsx b/apps/web/__registry__/miami/block/chart-pie-legend.tsx
index 783950b1..bbb52a6b 100644
--- a/apps/web/__registry__/miami/block/chart-pie-legend.tsx
+++ b/apps/web/__registry__/miami/block/chart-pie-legend.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Pie, PieChart } from 'recharts'
+import { Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -8,49 +8,47 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A pie chart with a legend'
+export const description = "A pie chart with a legend"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
diff --git a/apps/web/__registry__/miami/block/chart-pie-separator-none.tsx b/apps/web/__registry__/miami/block/chart-pie-separator-none.tsx
index 555481d6..f8d97055 100644
--- a/apps/web/__registry__/miami/block/chart-pie-separator-none.tsx
+++ b/apps/web/__registry__/miami/block/chart-pie-separator-none.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A pie chart with no separator'
+export const description = "A pie chart with no separator"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -84,9 +82,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-pie-simple.tsx b/apps/web/__registry__/miami/block/chart-pie-simple.tsx
index 83216e41..5f3439f8 100644
--- a/apps/web/__registry__/miami/block/chart-pie-simple.tsx
+++ b/apps/web/__registry__/miami/block/chart-pie-simple.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A simple pie chart'
+export const description = "A simple pie chart"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -79,9 +77,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-pie-stacked.tsx b/apps/web/__registry__/miami/block/chart-pie-stacked.tsx
index a7656da0..3717d7bf 100644
--- a/apps/web/__registry__/miami/block/chart-pie-stacked.tsx
+++ b/apps/web/__registry__/miami/block/chart-pie-stacked.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { TrendingUp } from 'lucide-react'
-import { Label, Pie, PieChart } from 'recharts'
+import * as React from "react"
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
 
 import {
    Card,
@@ -11,63 +11,61 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A pie chart with stacked sections'
+export const description = "A pie chart with stacked sections"
 
 const desktopData = [
-   { month: 'january', desktop: 186, fill: 'var(--color-january)' },
-   { month: 'february', desktop: 305, fill: 'var(--color-february)' },
-   { month: 'march', desktop: 237, fill: 'var(--color-march)' },
-   { month: 'april', desktop: 173, fill: 'var(--color-april)' },
-   { month: 'may', desktop: 209, fill: 'var(--color-may)' },
+   { month: "january", desktop: 186, fill: "var(--color-january)" },
+   { month: "february", desktop: 305, fill: "var(--color-february)" },
+   { month: "march", desktop: 237, fill: "var(--color-march)" },
+   { month: "april", desktop: 173, fill: "var(--color-april)" },
+   { month: "may", desktop: 209, fill: "var(--color-may)" },
 ]
 
 const mobileData = [
-   { month: 'january', mobile: 80, fill: 'var(--color-january)' },
-   { month: 'february', mobile: 200, fill: 'var(--color-february)' },
-   { month: 'march', mobile: 120, fill: 'var(--color-march)' },
-   { month: 'april', mobile: 190, fill: 'var(--color-april)' },
-   { month: 'may', mobile: 130, fill: 'var(--color-may)' },
+   { month: "january", mobile: 80, fill: "var(--color-january)" },
+   { month: "february", mobile: 200, fill: "var(--color-february)" },
+   { month: "march", mobile: 120, fill: "var(--color-march)" },
+   { month: "april", mobile: 190, fill: "var(--color-april)" },
+   { month: "may", mobile: 130, fill: "var(--color-may)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    desktop: {
-      label: 'Desktop',
+      label: "Desktop",
    },
    mobile: {
-      label: 'Mobile',
+      label: "Mobile",
    },
    january: {
-      label: 'January',
-      color: 'hsl(var(--chart-1))',
+      label: "January",
+      color: "hsl(var(--chart-1))",
    },
    february: {
-      label: 'February',
-      color: 'hsl(var(--chart-2))',
+      label: "February",
+      color: "hsl(var(--chart-2))",
    },
    march: {
-      label: 'March',
-      color: 'hsl(var(--chart-3))',
+      label: "March",
+      color: "hsl(var(--chart-3))",
    },
    april: {
-      label: 'April',
-      color: 'hsl(var(--chart-4))',
+      label: "April",
+      color: "hsl(var(--chart-4))",
    },
    may: {
-      label: 'May',
-      color: 'hsl(var(--chart-5))',
+      label: "May",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -85,18 +83,19 @@ export default function Component() {
             >
                <PieChart>
                   <ChartTooltip
-                     content={(
+                     content={
                         <ChartTooltipContent
                            labelKey="visitors"
                            nameKey="month"
                            indicator="line"
                            labelFormatter={(_, payload) => {
                               return chartConfig[
-                                 payload?.[0].dataKey as keyof typeof chartConfig
+                                 payload?.[0]
+                                    .dataKey as keyof typeof chartConfig
                               ].label
                            }}
                         />
-                     )}
+                     }
                   />
                   <Pie data={desktopData} dataKey="desktop" outerRadius={60} />
                   <Pie
@@ -110,9 +109,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-radar-default.tsx b/apps/web/__registry__/miami/block/chart-radar-default.tsx
index 9198d509..50183ea6 100644
--- a/apps/web/__registry__/miami/block/chart-radar-default.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-default.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart'
+export const description = "A radar chart"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -53,7 +51,10 @@ export default function Component() {
                className="mx-auto aspect-square max-h-[250px]"
             >
                <RadarChart data={chartData}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
                   <PolarAngleAxis dataKey="month" />
                   <PolarGrid />
                   <Radar
@@ -66,9 +67,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-dots.tsx b/apps/web/__registry__/miami/block/chart-radar-dots.tsx
index cda00f88..c99422a6 100644
--- a/apps/web/__registry__/miami/block/chart-radar-dots.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-dots.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with dots'
+export const description = "A radar chart with dots"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -53,7 +51,10 @@ export default function Component() {
                className="mx-auto aspect-square max-h-[250px]"
             >
                <RadarChart data={chartData}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
                   <PolarAngleAxis dataKey="month" />
                   <PolarGrid />
                   <Radar
@@ -70,9 +71,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-grid-circle-fill.tsx b/apps/web/__registry__/miami/block/chart-radar-grid-circle-fill.tsx
index 35b34cf4..830563da 100644
--- a/apps/web/__registry__/miami/block/chart-radar-grid-circle-fill.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-grid-circle-fill.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with a grid and circle fill'
+export const description = "A radar chart with a grid and circle fill"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 285 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 203 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 264 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 285 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 264 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -53,7 +51,10 @@ export default function Component() {
                className="mx-auto aspect-square max-h-[250px]"
             >
                <RadarChart data={chartData}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
                   <PolarGrid
                      className="fill-[--color-desktop] opacity-20"
                      gridType="circle"
@@ -69,9 +70,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-grid-circle-no-lines.tsx b/apps/web/__registry__/miami/block/chart-radar-grid-circle-no-lines.tsx
index b10c2f66..4d1766a9 100644
--- a/apps/web/__registry__/miami/block/chart-radar-grid-circle-no-lines.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-grid-circle-no-lines.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with a grid and circle fill'
+export const description = "A radar chart with a grid and circle fill"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 203 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -73,9 +71,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-grid-circle.tsx b/apps/web/__registry__/miami/block/chart-radar-grid-circle.tsx
index e18bf807..5b260800 100644
--- a/apps/web/__registry__/miami/block/chart-radar-grid-circle.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-grid-circle.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with a grid and circle'
+export const description = "A radar chart with a grid and circle"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -73,9 +71,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-grid-custom.tsx b/apps/web/__registry__/miami/block/chart-radar-grid-custom.tsx
index e3dd31c8..3c440a0c 100644
--- a/apps/web/__registry__/miami/block/chart-radar-grid-custom.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-grid-custom.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with a custom grid'
+export const description = "A radar chart with a custom grid"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -57,7 +55,11 @@ export default function Component() {
                      cursor={false}
                      content={<ChartTooltipContent hideLabel />}
                   />
-                  <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />
+                  <PolarGrid
+                     radialLines={false}
+                     polarRadius={[90]}
+                     strokeWidth={1}
+                  />
                   <PolarAngleAxis dataKey="month" />
                   <Radar
                      dataKey="desktop"
@@ -69,9 +71,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-grid-fill.tsx b/apps/web/__registry__/miami/block/chart-radar-grid-fill.tsx
index f6be9099..de85cb3c 100644
--- a/apps/web/__registry__/miami/block/chart-radar-grid-fill.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-grid-fill.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with a grid filled'
+export const description = "A radar chart with a grid filled"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 285 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 203 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 264 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 285 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 264 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -69,9 +67,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-grid-none.tsx b/apps/web/__registry__/miami/block/chart-radar-grid-none.tsx
index 48b39894..c1e18f0d 100644
--- a/apps/web/__registry__/miami/block/chart-radar-grid-none.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-grid-none.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,31 +10,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with no grid'
+export const description = "A radar chart with no grid"
 
 const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
 } satisfies ChartConfig
 
@@ -72,9 +70,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-icons.tsx b/apps/web/__registry__/miami/block/chart-radar-icons.tsx
index 5579e927..0907bd21 100644
--- a/apps/web/__registry__/miami/block/chart-radar-icons.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-icons.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,38 +10,36 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with icons'
+export const description = "A radar chart with icons"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
       icon: ArrowDownFromLine,
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
       icon: ArrowUpFromLine,
    },
 } satisfies ChartConfig
@@ -79,15 +77,16 @@ export default function Component() {
                      fillOpacity={0.6}
                   />
                   <Radar dataKey="mobile" fill="var(--color-mobile)" />
-                  <ChartLegend className="mt-8" content={<ChartLegendContent />} />
+                  <ChartLegend
+                     className="mt-8"
+                     content={<ChartLegendContent />}
+                  />
                </RadarChart>
             </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col gap-2 pt-4 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-label-custom.tsx b/apps/web/__registry__/miami/block/chart-radar-label-custom.tsx
index 13e8b839..507de961 100644
--- a/apps/web/__registry__/miami/block/chart-radar-label-custom.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-label-custom.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with a custom label'
+export const description = "A radar chart with a custom label"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -111,9 +109,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-legend.tsx b/apps/web/__registry__/miami/block/chart-radar-legend.tsx
index 5e5dfb2a..13b0c4ff 100644
--- a/apps/web/__registry__/miami/block/chart-radar-legend.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-legend.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,37 +10,35 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with a legend'
+export const description = "A radar chart with a legend"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -77,15 +75,16 @@ export default function Component() {
                      fillOpacity={0.6}
                   />
                   <Radar dataKey="mobile" fill="var(--color-mobile)" />
-                  <ChartLegend className="mt-8" content={<ChartLegendContent />} />
+                  <ChartLegend
+                     className="mt-8"
+                     content={<ChartLegendContent />}
+                  />
                </RadarChart>
             </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col gap-2 pt-4 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-lines-only.tsx b/apps/web/__registry__/miami/block/chart-radar-lines-only.tsx
index 8e5f6e61..a28d004f 100644
--- a/apps/web/__registry__/miami/block/chart-radar-lines-only.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-lines-only.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with lines only'
+export const description = "A radar chart with lines only"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 160 },
-   { month: 'February', desktop: 185, mobile: 170 },
-   { month: 'March', desktop: 207, mobile: 180 },
-   { month: 'April', desktop: 173, mobile: 160 },
-   { month: 'May', desktop: 160, mobile: 190 },
-   { month: 'June', desktop: 174, mobile: 204 },
+   { month: "January", desktop: 186, mobile: 160 },
+   { month: "February", desktop: 185, mobile: 170 },
+   { month: "March", desktop: 207, mobile: 180 },
+   { month: "April", desktop: 173, mobile: 160 },
+   { month: "May", desktop: 160, mobile: 190 },
+   { month: "June", desktop: 174, mobile: 204 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -82,9 +80,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-multiple.tsx b/apps/web/__registry__/miami/block/chart-radar-multiple.tsx
index 19772c15..e8cf0725 100644
--- a/apps/web/__registry__/miami/block/chart-radar-multiple.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-multiple.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 
 import {
    Card,
@@ -10,35 +10,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with multiple data'
+export const description = "A radar chart with multiple data"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -74,9 +72,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radar-radius.tsx b/apps/web/__registry__/miami/block/chart-radar-radius.tsx
index 66e4ed73..cda02e80 100644
--- a/apps/web/__registry__/miami/block/chart-radar-radius.tsx
+++ b/apps/web/__registry__/miami/block/chart-radar-radius.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
+import { TrendingUp } from "lucide-react"
 import {
    PolarAngleAxis,
    PolarGrid,
    PolarRadiusAxis,
    Radar,
    RadarChart,
-} from 'recharts'
+} from "recharts"
 
 import {
    Card,
@@ -16,35 +16,33 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radar chart with a radius axis'
+export const description = "A radar chart with a radius axis"
 
 const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
 ]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -66,7 +64,10 @@ export default function Component() {
                   <ChartTooltip
                      cursor={false}
                      content={
-                        <ChartTooltipContent indicator="line" labelKey="month" />
+                        <ChartTooltipContent
+                           indicator="line"
+                           labelKey="month"
+                        />
                      }
                   />
                   <PolarGrid />
@@ -87,9 +88,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground flex items-center gap-2 leading-none">
                January - June 2024
diff --git a/apps/web/__registry__/miami/block/chart-radial-grid.tsx b/apps/web/__registry__/miami/block/chart-radial-grid.tsx
index 21c4ade4..8f437c76 100644
--- a/apps/web/__registry__/miami/block/chart-radial-grid.tsx
+++ b/apps/web/__registry__/miami/block/chart-radial-grid.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { PolarGrid, RadialBar, RadialBarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { PolarGrid, RadialBar, RadialBarChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radial chart with a grid'
+export const description = "A radial chart with a grid"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -68,10 +66,16 @@ export default function Component() {
                config={chartConfig}
                className="mx-auto aspect-square max-h-[250px]"
             >
-               <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>
+               <RadialBarChart
+                  data={chartData}
+                  innerRadius={30}
+                  outerRadius={100}
+               >
                   <ChartTooltip
                      cursor={false}
-                     content={<ChartTooltipContent hideLabel nameKey="browser" />}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
                   />
                   <PolarGrid gridType="circle" />
                   <RadialBar dataKey="visitors" />
@@ -80,9 +84,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-radial-label.tsx b/apps/web/__registry__/miami/block/chart-radial-label.tsx
index 5e50aaf8..b9a25ade 100644
--- a/apps/web/__registry__/miami/block/chart-radial-label.tsx
+++ b/apps/web/__registry__/miami/block/chart-radial-label.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { LabelList, RadialBar, RadialBarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { LabelList, RadialBar, RadialBarChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radial chart with a label'
+export const description = "A radial chart with a label"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -77,7 +75,9 @@ export default function Component() {
                >
                   <ChartTooltip
                      cursor={false}
-                     content={<ChartTooltipContent hideLabel nameKey="browser" />}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
                   />
                   <RadialBar dataKey="visitors" background>
                      <LabelList
@@ -92,9 +92,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-radial-shape.tsx b/apps/web/__registry__/miami/block/chart-radial-shape.tsx
index 2745fc87..ce806e9e 100644
--- a/apps/web/__registry__/miami/block/chart-radial-shape.tsx
+++ b/apps/web/__registry__/miami/block/chart-radial-shape.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
+import { TrendingUp } from "lucide-react"
 import {
    Label,
    PolarGrid,
    PolarRadiusAxis,
    RadialBar,
    RadialBarChart,
-} from 'recharts'
+} from "recharts"
 
 import {
    Card,
@@ -16,23 +16,23 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type { ChartConfig } from '~/registry/miami/ui/chart'
-import { ChartContainer } from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
+import { ChartContainer } from "~/registry/miami/ui/chart"
 
-export const description = 'A radial chart with a custom shape'
+export const description = "A radial chart with a custom shape"
 
 const chartData = [
-   { browser: 'safari', visitors: 1260, fill: 'var(--color-safari)' },
+   { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -62,10 +62,14 @@ export default function Component() {
                      polarRadius={[86, 74]}
                   />
                   <RadialBar dataKey="visitors" background />
-                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
                      <Label
                         content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                               return (
                                  <text
                                     x={viewBox.cx}
@@ -98,9 +102,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-radial-simple.tsx b/apps/web/__registry__/miami/block/chart-radial-simple.tsx
index 32448c3e..8a1305c6 100644
--- a/apps/web/__registry__/miami/block/chart-radial-simple.tsx
+++ b/apps/web/__registry__/miami/block/chart-radial-simple.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { RadialBar, RadialBarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { RadialBar, RadialBarChart } from "recharts"
 
 import {
    Card,
@@ -10,49 +10,47 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radial chart'
+export const description = "A radial chart"
 
 const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
    firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
    },
    edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
    },
    other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
+      label: "Other",
+      color: "hsl(var(--chart-5))",
    },
 } satisfies ChartConfig
 
@@ -68,10 +66,16 @@ export default function Component() {
                config={chartConfig}
                className="mx-auto aspect-square max-h-[250px]"
             >
-               <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>
+               <RadialBarChart
+                  data={chartData}
+                  innerRadius={30}
+                  outerRadius={110}
+               >
                   <ChartTooltip
                      cursor={false}
-                     content={<ChartTooltipContent hideLabel nameKey="browser" />}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
                   />
                   <RadialBar dataKey="visitors" background />
                </RadialBarChart>
@@ -79,9 +83,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-radial-stacked.tsx b/apps/web/__registry__/miami/block/chart-radial-stacked.tsx
index 34c8b3c6..8c32adb2 100644
--- a/apps/web/__registry__/miami/block/chart-radial-stacked.tsx
+++ b/apps/web/__registry__/miami/block/chart-radial-stacked.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
-import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts'
+import { TrendingUp } from "lucide-react"
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
 
 import {
    Card,
@@ -10,28 +10,26 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A radial chart with stacked sections'
+export const description = "A radial chart with stacked sections"
 
-const chartData = [{ month: 'january', desktop: 1260, mobile: 570 }]
+const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]
 
 const chartConfig = {
    desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
    },
    mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -59,12 +57,20 @@ export default function Component() {
                      cursor={false}
                      content={<ChartTooltipContent hideLabel />}
                   />
-                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
                      <Label
                         content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                               return (
-                                 <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                 >
                                     <tspan
                                        x={viewBox.cx}
                                        y={(viewBox.cy || 0) - 16}
@@ -104,9 +110,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-radial-text.tsx b/apps/web/__registry__/miami/block/chart-radial-text.tsx
index 76d4ca8b..6858182a 100644
--- a/apps/web/__registry__/miami/block/chart-radial-text.tsx
+++ b/apps/web/__registry__/miami/block/chart-radial-text.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { TrendingUp } from 'lucide-react'
+import { TrendingUp } from "lucide-react"
 import {
    Label,
    PolarGrid,
    PolarRadiusAxis,
    RadialBar,
    RadialBarChart,
-} from 'recharts'
+} from "recharts"
 
 import {
    Card,
@@ -16,23 +16,23 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type { ChartConfig } from '~/registry/miami/ui/chart'
-import { ChartContainer } from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
+import { ChartContainer } from "~/registry/miami/ui/chart"
 
-export const description = 'A radial chart with text'
+export const description = "A radial chart with text"
 
 const chartData = [
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
 ]
 
 const chartConfig = {
    visitors: {
-      label: 'Visitors',
+      label: "Visitors",
    },
    safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -63,10 +63,14 @@ export default function Component() {
                      polarRadius={[86, 74]}
                   />
                   <RadialBar dataKey="visitors" background cornerRadius={10} />
-                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
                      <Label
                         content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                               return (
                                  <text
                                     x={viewBox.cx}
@@ -99,9 +103,7 @@ export default function Component() {
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
+               Trending up by 5.2% this month <TrendingUp className="size-4" />
             </div>
             <div className="text-muted-foreground leading-none">
                Showing total visitors for the last 6 months
diff --git a/apps/web/__registry__/miami/block/chart-tooltip-advanced.tsx b/apps/web/__registry__/miami/block/chart-tooltip-advanced.tsx
index a5810a5c..6e711e01 100644
--- a/apps/web/__registry__/miami/block/chart-tooltip-advanced.tsx
+++ b/apps/web/__registry__/miami/block/chart-tooltip-advanced.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -58,8 +56,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
@@ -76,7 +74,7 @@ export default function Component() {
                      radius={[4, 4, 0, 0]}
                   />
                   <ChartTooltip
-                     content={(
+                     content={
                         <ChartTooltipContent
                            hideLabel
                            className="w-[180px]"
@@ -86,12 +84,12 @@ export default function Component() {
                                     className="size-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
                                     style={
                                        {
-                                          '--color-bg': `var(--color-${name})`,
+                                          "--color-bg": `var(--color-${name})`,
                                        } as React.CSSProperties
                                     }
                                  />
-                                 {chartConfig[name as keyof typeof chartConfig]?.label
-                                 || name}
+                                 {chartConfig[name as keyof typeof chartConfig]
+                                    ?.label || name}
                                  <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
                                     {value}
                                     <span className="text-muted-foreground font-normal">
@@ -103,7 +101,8 @@ export default function Component() {
                                     <div className="text-foreground mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium">
                                        Total
                                        <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
-                                          {item.payload.running + item.payload.swimming}
+                                          {item.payload.running +
+                                             item.payload.swimming}
                                           <span className="text-muted-foreground font-normal">
                                              kcal
                                           </span>
@@ -113,7 +112,7 @@ export default function Component() {
                               </>
                            )}
                         />
-                     )}
+                     }
                      cursor={false}
                      defaultIndex={1}
                   />
diff --git a/apps/web/__registry__/miami/block/chart-tooltip-default.tsx b/apps/web/__registry__/miami/block/chart-tooltip-default.tsx
index d4830690..cd1bb64f 100644
--- a/apps/web/__registry__/miami/block/chart-tooltip-default.tsx
+++ b/apps/web/__registry__/miami/block/chart-tooltip-default.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -58,8 +56,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
diff --git a/apps/web/__registry__/miami/block/chart-tooltip-formatter.tsx b/apps/web/__registry__/miami/block/chart-tooltip-formatter.tsx
index ac2955f5..9e0dd837 100644
--- a/apps/web/__registry__/miami/block/chart-tooltip-formatter.tsx
+++ b/apps/web/__registry__/miami/block/chart-tooltip-formatter.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -56,8 +54,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
@@ -74,13 +72,13 @@ export default function Component() {
                      radius={[4, 4, 0, 0]}
                   />
                   <ChartTooltip
-                     content={(
+                     content={
                         <ChartTooltipContent
                            hideLabel
                            formatter={(value, name) => (
                               <div className="text-muted-foreground flex min-w-[130px] items-center text-xs">
-                                 {chartConfig[name as keyof typeof chartConfig]?.label
-                                 || name}
+                                 {chartConfig[name as keyof typeof chartConfig]
+                                    ?.label || name}
                                  <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
                                     {value}
                                     <span className="text-muted-foreground font-normal">
@@ -90,7 +88,7 @@ export default function Component() {
                               </div>
                            )}
                         />
-                     )}
+                     }
                      cursor={false}
                      defaultIndex={1}
                   />
diff --git a/apps/web/__registry__/miami/block/chart-tooltip-icons.tsx b/apps/web/__registry__/miami/block/chart-tooltip-icons.tsx
index b50525d5..230951d6 100644
--- a/apps/web/__registry__/miami/block/chart-tooltip-icons.tsx
+++ b/apps/web/__registry__/miami/block/chart-tooltip-icons.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { Footprints, Waves } from 'lucide-react'
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Footprints, Waves } from "lucide-react"
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -9,36 +9,34 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
       icon: Footprints,
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
       icon: Waves,
    },
 } satisfies ChartConfig
@@ -59,8 +57,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
diff --git a/apps/web/__registry__/miami/block/chart-tooltip-indicator-line.tsx b/apps/web/__registry__/miami/block/chart-tooltip-indicator-line.tsx
index 53e1dbd9..21dc4d3c 100644
--- a/apps/web/__registry__/miami/block/chart-tooltip-indicator-line.tsx
+++ b/apps/web/__registry__/miami/block/chart-tooltip-indicator-line.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -56,8 +54,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
diff --git a/apps/web/__registry__/miami/block/chart-tooltip-indicator-none.tsx b/apps/web/__registry__/miami/block/chart-tooltip-indicator-none.tsx
index f361e81c..73d058ff 100644
--- a/apps/web/__registry__/miami/block/chart-tooltip-indicator-none.tsx
+++ b/apps/web/__registry__/miami/block/chart-tooltip-indicator-none.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -56,8 +54,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
diff --git a/apps/web/__registry__/miami/block/chart-tooltip-label-custom.tsx b/apps/web/__registry__/miami/block/chart-tooltip-label-custom.tsx
index e82b0abe..5092e69f 100644
--- a/apps/web/__registry__/miami/block/chart-tooltip-label-custom.tsx
+++ b/apps/web/__registry__/miami/block/chart-tooltip-label-custom.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,38 +8,36 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    activities: {
-      label: 'Activities',
+      label: "Activities",
    },
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -61,8 +59,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
@@ -80,7 +78,10 @@ export default function Component() {
                   />
                   <ChartTooltip
                      content={
-                        <ChartTooltipContent labelKey="activities" indicator="line" />
+                        <ChartTooltipContent
+                           labelKey="activities"
+                           indicator="line"
+                        />
                      }
                      cursor={false}
                      defaultIndex={1}
diff --git a/apps/web/__registry__/miami/block/chart-tooltip-label-formatter.tsx b/apps/web/__registry__/miami/block/chart-tooltip-label-formatter.tsx
index da4094f4..2041ee08 100644
--- a/apps/web/__registry__/miami/block/chart-tooltip-label-formatter.tsx
+++ b/apps/web/__registry__/miami/block/chart-tooltip-label-formatter.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -56,8 +54,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
@@ -74,17 +72,20 @@ export default function Component() {
                      radius={[4, 4, 0, 0]}
                   />
                   <ChartTooltip
-                     content={(
+                     content={
                         <ChartTooltipContent
                            labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 day: 'numeric',
-                                 month: 'long',
-                                 year: 'numeric',
-                              })
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    day: "numeric",
+                                    month: "long",
+                                    year: "numeric",
+                                 },
+                              )
                            }}
                         />
-                     )}
+                     }
                      cursor={false}
                      defaultIndex={1}
                   />
diff --git a/apps/web/__registry__/miami/block/chart-tooltip-label-none.tsx b/apps/web/__registry__/miami/block/chart-tooltip-label-none.tsx
index a5bb295b..b60748be 100644
--- a/apps/web/__registry__/miami/block/chart-tooltip-label-none.tsx
+++ b/apps/web/__registry__/miami/block/chart-tooltip-label-none.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis } from "recharts"
 
 import {
    Card,
@@ -8,35 +8,33 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/card"
+import type { ChartConfig } from "~/registry/miami/ui/chart"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
+} from "~/registry/miami/ui/chart"
 
-export const description = 'A stacked bar chart with a legend'
+export const description = "A stacked bar chart with a legend"
 
 const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
 ]
 
 const chartConfig = {
    running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
+      label: "Running",
+      color: "hsl(var(--chart-1))",
    },
    swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
    },
 } satisfies ChartConfig
 
@@ -56,8 +54,8 @@ export default function Component() {
                      tickMargin={10}
                      axisLine={false}
                      tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
                         })
                      }}
                   />
diff --git a/apps/web/__registry__/miami/block/charts-01.tsx b/apps/web/__registry__/miami/block/charts-01.tsx
index 85197479..3b55acd7 100644
--- a/apps/web/__registry__/miami/block/charts-01.tsx
+++ b/apps/web/__registry__/miami/block/charts-01.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client"
 
 import {
    Area,
@@ -17,7 +17,7 @@ import {
    ReferenceLine,
    XAxis,
    YAxis,
-} from 'recharts'
+} from "recharts"
 
 import {
    Card,
@@ -26,32 +26,29 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami//ui/card'
+} from "~/registry/miami//ui/card"
 import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
-} from '~/registry/miami//ui/chart'
-import { Separator } from '~/registry/miami//ui/separator'
+} from "~/registry/miami//ui/chart"
+import { Separator } from "~/registry/miami//ui/separator"
 
-export const description = 'A collection of health charts.'
+export const description = "A collection of health charts."
 
-export const iframeHeight = '900px'
+export const iframeHeight = "900px"
 
-export const containerClassName = 'min-h-screen py-12'
+export const containerClassName = "min-h-screen py-12"
 
 export default function Charts() {
    return (
       <div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
          <div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
-            <Card
-               className="lg:max-w-md" x-chunk="charts-01-chunk-0"
-            >
+            <Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
                <CardHeader className="space-y-0 pb-2">
                   <CardDescription>Today</CardDescription>
                   <CardTitle className="text-4xl tabular-nums">
-                     12,584
-                     {' '}
+                     12,584{" "}
                      <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
                         steps
                      </span>
@@ -61,8 +58,8 @@ export default function Charts() {
                   <ChartContainer
                      config={{
                         steps: {
-                           label: 'Steps',
-                           color: 'hsl(var(--chart-1))',
+                           label: "Steps",
+                           color: "hsl(var(--chart-1))",
                         },
                      }}
                   >
@@ -74,31 +71,31 @@ export default function Charts() {
                         }}
                         data={[
                            {
-                              date: '2024-01-01',
+                              date: "2024-01-01",
                               steps: 2000,
                            },
                            {
-                              date: '2024-01-02',
+                              date: "2024-01-02",
                               steps: 2100,
                            },
                            {
-                              date: '2024-01-03',
+                              date: "2024-01-03",
                               steps: 2200,
                            },
                            {
-                              date: '2024-01-04',
+                              date: "2024-01-04",
                               steps: 1300,
                            },
                            {
-                              date: '2024-01-05',
+                              date: "2024-01-05",
                               steps: 1400,
                            },
                            {
-                              date: '2024-01-06',
+                              date: "2024-01-06",
                               steps: 2500,
                            },
                            {
-                              date: '2024-01-07',
+                              date: "2024-01-07",
                               steps: 1600,
                            },
                         ]}
@@ -116,25 +113,31 @@ export default function Charts() {
                            axisLine={false}
                            tickMargin={4}
                            tickFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 weekday: 'short',
-                              })
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    weekday: "short",
+                                 },
+                              )
                            }}
                         />
                         <ChartTooltip
                            defaultIndex={2}
-                           content={(
+                           content={
                               <ChartTooltipContent
                                  hideIndicator
                                  labelFormatter={(value) => {
-                                    return new Date(value).toLocaleDateString('en-US', {
-                                       day: 'numeric',
-                                       month: 'long',
-                                       year: 'numeric',
-                                    })
+                                    return new Date(value).toLocaleDateString(
+                                       "en-US",
+                                       {
+                                          day: "numeric",
+                                          month: "long",
+                                          year: "numeric",
+                                       },
+                                    )
                                  }}
                               />
-                           )}
+                           }
                            cursor={false}
                         />
                         <ReferenceLine
@@ -163,24 +166,20 @@ export default function Charts() {
                </CardContent>
                <CardFooter className="flex-col items-start gap-1">
                   <CardDescription>
-                     Over the past 7 days, you have walked
-                     {' '}
-                     <span className="text-foreground font-medium">53,305</span>
-                     {' '}
+                     Over the past 7 days, you have walked{" "}
+                     <span className="text-foreground font-medium">53,305</span>{" "}
                      steps.
                   </CardDescription>
                   <CardDescription>
-                     You need
-                     {' '}
-                     <span className="text-foreground font-medium">12,584</span>
-                     {' '}
-                     more
-                     steps to reach your goal.
+                     You need{" "}
+                     <span className="text-foreground font-medium">12,584</span>{" "}
+                     more steps to reach your goal.
                   </CardDescription>
                </CardFooter>
             </Card>
             <Card
-               className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1"
+               className="flex flex-col lg:max-w-md"
+               x-chunk="charts-01-chunk-1"
             >
                <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
                   <div>
@@ -206,8 +205,8 @@ export default function Charts() {
                   <ChartContainer
                      config={{
                         resting: {
-                           label: 'Resting',
-                           color: 'hsl(var(--chart-1))',
+                           label: "Resting",
+                           color: "hsl(var(--chart-1))",
                         },
                      }}
                      className="w-full"
@@ -221,31 +220,31 @@ export default function Charts() {
                         }}
                         data={[
                            {
-                              date: '2024-01-01',
+                              date: "2024-01-01",
                               resting: 62,
                            },
                            {
-                              date: '2024-01-02',
+                              date: "2024-01-02",
                               resting: 72,
                            },
                            {
-                              date: '2024-01-03',
+                              date: "2024-01-03",
                               resting: 35,
                            },
                            {
-                              date: '2024-01-04',
+                              date: "2024-01-04",
                               resting: 62,
                            },
                            {
-                              date: '2024-01-05',
+                              date: "2024-01-05",
                               resting: 52,
                            },
                            {
-                              date: '2024-01-06',
+                              date: "2024-01-06",
                               resting: 62,
                            },
                            {
-                              date: '2024-01-07',
+                              date: "2024-01-07",
                               resting: 70,
                            },
                         ]}
@@ -256,16 +255,19 @@ export default function Charts() {
                            stroke="hsl(var(--muted-foreground))"
                            strokeOpacity={0.5}
                         />
-                        <YAxis hide domain={['dataMin - 10', 'dataMax + 10']} />
+                        <YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
                         <XAxis
                            dataKey="date"
                            tickLine={false}
                            axisLine={false}
                            tickMargin={8}
                            tickFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 weekday: 'short',
-                              })
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    weekday: "short",
+                                 },
+                              )
                            }}
                         />
                         <Line
@@ -276,24 +278,27 @@ export default function Charts() {
                            strokeWidth={2}
                            dot={false}
                            activeDot={{
-                              fill: 'var(--color-resting)',
-                              stroke: 'var(--color-resting)',
+                              fill: "var(--color-resting)",
+                              stroke: "var(--color-resting)",
                               r: 4,
                            }}
                         />
                         <ChartTooltip
-                           content={(
+                           content={
                               <ChartTooltipContent
                                  indicator="line"
                                  labelFormatter={(value) => {
-                                    return new Date(value).toLocaleDateString('en-US', {
-                                       day: 'numeric',
-                                       month: 'long',
-                                       year: 'numeric',
-                                    })
+                                    return new Date(value).toLocaleDateString(
+                                       "en-US",
+                                       {
+                                          day: "numeric",
+                                          month: "long",
+                                          year: "numeric",
+                                       },
+                                    )
                                  }}
                               />
-                           )}
+                           }
                            cursor={false}
                         />
                      </LineChart>
@@ -302,9 +307,7 @@ export default function Charts() {
             </Card>
          </div>
          <div className="grid w-full flex-1 gap-6 lg:max-w-80">
-            <Card
-               className="max-w-xs" x-chunk="charts-01-chunk-2"
-            >
+            <Card className="max-w-xs" x-chunk="charts-01-chunk-2">
                <CardHeader>
                   <CardTitle>Progress</CardTitle>
                   <CardDescription>
@@ -322,8 +325,8 @@ export default function Charts() {
                      <ChartContainer
                         config={{
                            steps: {
-                              label: 'Steps',
-                              color: 'hsl(var(--chart-1))',
+                              label: "Steps",
+                              color: "hsl(var(--chart-1))",
                            },
                         }}
                         className="aspect-auto h-[32px] w-full"
@@ -339,7 +342,7 @@ export default function Charts() {
                            }}
                            data={[
                               {
-                                 date: '2024',
+                                 date: "2024",
                                  steps: 12435,
                               },
                            ]}
@@ -358,7 +361,12 @@ export default function Charts() {
                                  fill="white"
                               />
                            </Bar>
-                           <YAxis dataKey="date" type="category" tickCount={1} hide />
+                           <YAxis
+                              dataKey="date"
+                              type="category"
+                              tickCount={1}
+                              hide
+                           />
                            <XAxis dataKey="steps" type="number" hide />
                         </BarChart>
                      </ChartContainer>
@@ -373,8 +381,8 @@ export default function Charts() {
                      <ChartContainer
                         config={{
                            steps: {
-                              label: 'Steps',
-                              color: 'hsl(var(--muted))',
+                              label: "Steps",
+                              color: "hsl(var(--muted))",
                            },
                         }}
                         className="aspect-auto h-[32px] w-full"
@@ -390,7 +398,7 @@ export default function Charts() {
                            }}
                            data={[
                               {
-                                 date: '2023',
+                                 date: "2023",
                                  steps: 10103,
                               },
                            ]}
@@ -409,21 +417,24 @@ export default function Charts() {
                                  fill="hsl(var(--muted-foreground))"
                               />
                            </Bar>
-                           <YAxis dataKey="date" type="category" tickCount={1} hide />
+                           <YAxis
+                              dataKey="date"
+                              type="category"
+                              tickCount={1}
+                              hide
+                           />
                            <XAxis dataKey="steps" type="number" hide />
                         </BarChart>
                      </ChartContainer>
                   </div>
                </CardContent>
             </Card>
-            <Card
-               className="max-w-xs" x-chunk="charts-01-chunk-3"
-            >
+            <Card className="max-w-xs" x-chunk="charts-01-chunk-3">
                <CardHeader className="p-4 pb-0">
                   <CardTitle>Walking Distance</CardTitle>
                   <CardDescription>
-                     Over the last 7 days, your distance walked and run was 12.5 miles
-                     per day.
+                     Over the last 7 days, your distance walked and run was 12.5
+                     miles per day.
                   </CardDescription>
                </CardHeader>
                <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
@@ -436,8 +447,8 @@ export default function Charts() {
                   <ChartContainer
                      config={{
                         steps: {
-                           label: 'Steps',
-                           color: 'hsl(var(--chart-1))',
+                           label: "Steps",
+                           color: "hsl(var(--chart-1))",
                         },
                      }}
                      className="ml-auto w-[72px]"
@@ -452,31 +463,31 @@ export default function Charts() {
                         }}
                         data={[
                            {
-                              date: '2024-01-01',
+                              date: "2024-01-01",
                               steps: 2000,
                            },
                            {
-                              date: '2024-01-02',
+                              date: "2024-01-02",
                               steps: 2100,
                            },
                            {
-                              date: '2024-01-03',
+                              date: "2024-01-03",
                               steps: 2200,
                            },
                            {
-                              date: '2024-01-04',
+                              date: "2024-01-04",
                               steps: 1300,
                            },
                            {
-                              date: '2024-01-05',
+                              date: "2024-01-05",
                               steps: 1400,
                            },
                            {
-                              date: '2024-01-06',
+                              date: "2024-01-06",
                               steps: 2500,
                            },
                            {
-                              date: '2024-01-07',
+                              date: "2024-01-07",
                               steps: 1600,
                            },
                         ]}
@@ -500,23 +511,21 @@ export default function Charts() {
                   </ChartContainer>
                </CardContent>
             </Card>
-            <Card
-               className="max-w-xs" x-chunk="charts-01-chunk-4"
-            >
+            <Card className="max-w-xs" x-chunk="charts-01-chunk-4">
                <CardContent className="flex gap-4 p-4 pb-2">
                   <ChartContainer
                      config={{
                         move: {
-                           label: 'Move',
-                           color: 'hsl(var(--chart-1))',
+                           label: "Move",
+                           color: "hsl(var(--chart-1))",
                         },
                         stand: {
-                           label: 'Stand',
-                           color: 'hsl(var(--chart-2))',
+                           label: "Stand",
+                           color: "hsl(var(--chart-2))",
                         },
                         exercise: {
-                           label: 'Exercise',
-                           color: 'hsl(var(--chart-3))',
+                           label: "Exercise",
+                           color: "hsl(var(--chart-3))",
                         },
                      }}
                      className="h-[140px] w-full"
@@ -530,22 +539,22 @@ export default function Charts() {
                         }}
                         data={[
                            {
-                              activity: 'stand',
+                              activity: "stand",
                               value: (8 / 12) * 100,
-                              label: '8/12 hr',
-                              fill: 'var(--color-stand)',
+                              label: "8/12 hr",
+                              fill: "var(--color-stand)",
                            },
                            {
-                              activity: 'exercise',
+                              activity: "exercise",
                               value: (46 / 60) * 100,
-                              label: '46/60 min',
-                              fill: 'var(--color-exercise)',
+                              label: "46/60 min",
+                              fill: "var(--color-exercise)",
                            },
                            {
-                              activity: 'move',
+                              activity: "move",
                               value: (245 / 360) * 100,
-                              label: '245/360 kcal',
-                              fill: 'var(--color-move)',
+                              label: "245/360 kcal",
+                              fill: "var(--color-move)",
                            },
                         ]}
                         layout="vertical"
@@ -576,7 +585,9 @@ export default function Charts() {
                <CardFooter className="flex flex-row border-t p-4">
                   <div className="flex w-full items-center gap-2">
                      <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-xs">Move</div>
+                        <div className="text-muted-foreground text-xs">
+                           Move
+                        </div>
                         <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
                            562
                            <span className="text-muted-foreground text-sm font-normal">
@@ -584,9 +595,14 @@ export default function Charts() {
                            </span>
                         </div>
                      </div>
-                     <Separator orientation="vertical" className="mx-2 h-10 w-px" />
+                     <Separator
+                        orientation="vertical"
+                        className="mx-2 h-10 w-px"
+                     />
                      <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-xs">Exercise</div>
+                        <div className="text-muted-foreground text-xs">
+                           Exercise
+                        </div>
                         <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
                            73
                            <span className="text-muted-foreground text-sm font-normal">
@@ -594,9 +610,14 @@ export default function Charts() {
                            </span>
                         </div>
                      </div>
-                     <Separator orientation="vertical" className="mx-2 h-10 w-px" />
+                     <Separator
+                        orientation="vertical"
+                        className="mx-2 h-10 w-px"
+                     />
                      <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-xs">Stand</div>
+                        <div className="text-muted-foreground text-xs">
+                           Stand
+                        </div>
                         <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
                            14
                            <span className="text-muted-foreground text-sm font-normal">
@@ -609,13 +630,13 @@ export default function Charts() {
             </Card>
          </div>
          <div className="grid w-full flex-1 gap-6">
-            <Card
-               className="max-w-xs" x-chunk="charts-01-chunk-5"
-            >
+            <Card className="max-w-xs" x-chunk="charts-01-chunk-5">
                <CardContent className="flex gap-4 p-4">
                   <div className="grid items-center gap-2">
                      <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-sm">Move</div>
+                        <div className="text-muted-foreground text-sm">
+                           Move
+                        </div>
                         <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
                            562/600
                            <span className="text-muted-foreground text-sm font-normal">
@@ -624,7 +645,9 @@ export default function Charts() {
                         </div>
                      </div>
                      <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-sm">Exercise</div>
+                        <div className="text-muted-foreground text-sm">
+                           Exercise
+                        </div>
                         <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
                            73/120
                            <span className="text-muted-foreground text-sm font-normal">
@@ -633,7 +656,9 @@ export default function Charts() {
                         </div>
                      </div>
                      <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-sm">Stand</div>
+                        <div className="text-muted-foreground text-sm">
+                           Stand
+                        </div>
                         <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
                            8/12
                            <span className="text-muted-foreground text-sm font-normal">
@@ -645,16 +670,16 @@ export default function Charts() {
                   <ChartContainer
                      config={{
                         move: {
-                           label: 'Move',
-                           color: 'hsl(var(--chart-1))',
+                           label: "Move",
+                           color: "hsl(var(--chart-1))",
                         },
                         exercise: {
-                           label: 'Exercise',
-                           color: 'hsl(var(--chart-2))',
+                           label: "Exercise",
+                           color: "hsl(var(--chart-2))",
                         },
                         stand: {
-                           label: 'Stand',
-                           color: 'hsl(var(--chart-3))',
+                           label: "Stand",
+                           color: "hsl(var(--chart-3))",
                         },
                      }}
                      className="mx-auto aspect-square w-full max-w-[80%]"
@@ -668,19 +693,19 @@ export default function Charts() {
                         }}
                         data={[
                            {
-                              activity: 'stand',
+                              activity: "stand",
                               value: (8 / 12) * 100,
-                              fill: 'var(--color-stand)',
+                              fill: "var(--color-stand)",
                            },
                            {
-                              activity: 'exercise',
+                              activity: "exercise",
                               value: (46 / 60) * 100,
-                              fill: 'var(--color-exercise)',
+                              fill: "var(--color-exercise)",
                            },
                            {
-                              activity: 'move',
+                              activity: "move",
                               value: (245 / 360) * 100,
-                              fill: 'var(--color-move)',
+                              fill: "var(--color-move)",
                            },
                         ]}
                         innerRadius="20%"
@@ -694,18 +719,21 @@ export default function Charts() {
                            dataKey="value"
                            tick={false}
                         />
-                        <RadialBar dataKey="value" background cornerRadius={5} />
+                        <RadialBar
+                           dataKey="value"
+                           background
+                           cornerRadius={5}
+                        />
                      </RadialBarChart>
                   </ChartContainer>
                </CardContent>
             </Card>
-            <Card
-               className="max-w-xs" x-chunk="charts-01-chunk-6"
-            >
+            <Card className="max-w-xs" x-chunk="charts-01-chunk-6">
                <CardHeader className="p-4 pb-0">
                   <CardTitle>Active Energy</CardTitle>
                   <CardDescription>
-                     You're burning an average of 754 calories per day. Good job!
+                     You're burning an average of 754 calories per day. Good
+                     job!
                   </CardDescription>
                </CardHeader>
                <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
@@ -718,8 +746,8 @@ export default function Charts() {
                   <ChartContainer
                      config={{
                         calories: {
-                           label: 'Calories',
-                           color: 'hsl(var(--chart-1))',
+                           label: "Calories",
+                           color: "hsl(var(--chart-1))",
                         },
                      }}
                      className="ml-auto w-[64px]"
@@ -734,31 +762,31 @@ export default function Charts() {
                         }}
                         data={[
                            {
-                              date: '2024-01-01',
+                              date: "2024-01-01",
                               calories: 354,
                            },
                            {
-                              date: '2024-01-02',
+                              date: "2024-01-02",
                               calories: 514,
                            },
                            {
-                              date: '2024-01-03',
+                              date: "2024-01-03",
                               calories: 345,
                            },
                            {
-                              date: '2024-01-04',
+                              date: "2024-01-04",
                               calories: 734,
                            },
                            {
-                              date: '2024-01-05',
+                              date: "2024-01-05",
                               calories: 645,
                            },
                            {
-                              date: '2024-01-06',
+                              date: "2024-01-06",
                               calories: 456,
                            },
                            {
-                              date: '2024-01-07',
+                              date: "2024-01-07",
                               calories: 345,
                            },
                         ]}
@@ -782,9 +810,7 @@ export default function Charts() {
                   </ChartContainer>
                </CardContent>
             </Card>
-            <Card
-               className="max-w-xs" x-chunk="charts-01-chunk-7"
-            >
+            <Card className="max-w-xs" x-chunk="charts-01-chunk-7">
                <CardHeader className="space-y-0 pb-0">
                   <CardDescription>Time in Bed</CardDescription>
                   <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
@@ -802,8 +828,8 @@ export default function Charts() {
                   <ChartContainer
                      config={{
                         time: {
-                           label: 'Time',
-                           color: 'hsl(var(--chart-2))',
+                           label: "Time",
+                           color: "hsl(var(--chart-2))",
                         },
                      }}
                   >
@@ -811,31 +837,31 @@ export default function Charts() {
                         accessibilityLayer
                         data={[
                            {
-                              date: '2024-01-01',
+                              date: "2024-01-01",
                               time: 8.5,
                            },
                            {
-                              date: '2024-01-02',
+                              date: "2024-01-02",
                               time: 7.2,
                            },
                            {
-                              date: '2024-01-03',
+                              date: "2024-01-03",
                               time: 8.1,
                            },
                            {
-                              date: '2024-01-04',
+                              date: "2024-01-04",
                               time: 6.2,
                            },
                            {
-                              date: '2024-01-05',
+                              date: "2024-01-05",
                               time: 5.2,
                            },
                            {
-                              date: '2024-01-06',
+                              date: "2024-01-06",
                               time: 8.1,
                            },
                            {
-                              date: '2024-01-07',
+                              date: "2024-01-07",
                               time: 7.0,
                            },
                         ]}
@@ -847,9 +873,15 @@ export default function Charts() {
                         }}
                      >
                         <XAxis dataKey="date" hide />
-                        <YAxis domain={['dataMin - 5', 'dataMax + 2']} hide />
+                        <YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
                         <defs>
-                           <linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
+                           <linearGradient
+                              id="fillTime"
+                              x1="0"
+                              y1="0"
+                              x2="0"
+                              y2="1"
+                           >
                               <stop
                                  offset="5%"
                                  stopColor="var(--color-time)"
@@ -872,7 +904,7 @@ export default function Charts() {
                         <ChartTooltip
                            cursor={false}
                            content={<ChartTooltipContent hideLabel />}
-                           formatter={value => (
+                           formatter={(value) => (
                               <div className="text-muted-foreground flex min-w-[120px] items-center text-xs">
                                  Time in bed
                                  <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
diff --git a/apps/web/__registry__/miami/block/dashboard-01.tsx b/apps/web/__registry__/miami/block/dashboard-01.tsx
index 112762fc..a0eb5485 100644
--- a/apps/web/__registry__/miami/block/dashboard-01.tsx
+++ b/apps/web/__registry__/miami/block/dashboard-01.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link"
 import {
    Activity,
    ArrowUpRight,
@@ -9,22 +9,18 @@ import {
    Package2,
    Search,
    Users,
-} from 'lucide-react'
+} from "lucide-react"
 
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Badge } from '~/registry/miami/ui/badge'
-import { Button } from '~/registry/miami/ui/button'
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Badge } from "~/registry/miami/ui/badge"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
+} from "~/registry/miami/ui/card"
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -32,9 +28,9 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/miami/ui/sheet'
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
 import {
    Table,
    TableBody,
@@ -42,14 +38,14 @@ import {
    TableHead,
    TableHeader,
    TableRow,
-} from '~/registry/miami/ui/table'
+} from "~/registry/miami/ui/table"
 
-export const description
-  = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'
+export const description =
+   "An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales."
 
-export const iframeHeight = '730px'
+export const iframeHeight = "730px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -157,7 +153,11 @@ export default function Dashboard() {
                </form>
                <DropdownMenu>
                   <DropdownMenuTrigger asChild>
-                     <Button variant="secondary" size="icon" className="rounded-full">
+                     <Button
+                        variant="secondary"
+                        size="icon"
+                        className="rounded-full"
+                     >
                         <CircleUser className="size-5" />
                         <span className="sr-only">Toggle user menu</span>
                      </Button>
@@ -205,7 +205,9 @@ export default function Dashboard() {
                </Card>
                <Card x-chunk="dashboard-01-chunk-2">
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                     <CardTitle className="text-sm font-medium">Sales</CardTitle>
+                     <CardTitle className="text-sm font-medium">
+                        Sales
+                     </CardTitle>
                      <CreditCard className="text-muted-foreground size-4" />
                   </CardHeader>
                   <CardContent>
@@ -217,7 +219,9 @@ export default function Dashboard() {
                </Card>
                <Card x-chunk="dashboard-01-chunk-3">
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                     <CardTitle className="text-sm font-medium">Active Now</CardTitle>
+                     <CardTitle className="text-sm font-medium">
+                        Active Now
+                     </CardTitle>
                      <Activity className="text-muted-foreground size-4" />
                   </CardHeader>
                   <CardContent>
@@ -229,9 +233,7 @@ export default function Dashboard() {
                </Card>
             </div>
             <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-               <Card
-                  className="xl:col-span-2" x-chunk="dashboard-01-chunk-4"
-               >
+               <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
                   <CardHeader className="flex flex-row items-center">
                      <div className="grid gap-2">
                         <CardTitle>Transactions</CardTitle>
@@ -260,7 +262,9 @@ export default function Dashboard() {
                               <TableHead className="hidden xl:table-column">
                                  Date
                               </TableHead>
-                              <TableHead className="text-right">Amount</TableHead>
+                              <TableHead className="text-right">
+                                 Amount
+                              </TableHead>
                            </TableRow>
                         </TableHeader>
                         <TableBody>
@@ -282,7 +286,9 @@ export default function Dashboard() {
                               <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
                                  2023-06-23
                               </TableCell>
-                              <TableCell className="text-right">$250.00</TableCell>
+                              <TableCell className="text-right">
+                                 $250.00
+                              </TableCell>
                            </TableRow>
                            <TableRow>
                               <TableCell>
@@ -302,11 +308,15 @@ export default function Dashboard() {
                               <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
                                  2023-06-24
                               </TableCell>
-                              <TableCell className="text-right">$150.00</TableCell>
+                              <TableCell className="text-right">
+                                 $150.00
+                              </TableCell>
                            </TableRow>
                            <TableRow>
                               <TableCell>
-                                 <div className="font-medium">Noah Williams</div>
+                                 <div className="font-medium">
+                                    Noah Williams
+                                 </div>
                                  <div className="text-muted-foreground hidden text-sm md:inline">
                                     noah@example.com
                                  </div>
@@ -322,7 +332,9 @@ export default function Dashboard() {
                               <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
                                  2023-06-25
                               </TableCell>
-                              <TableCell className="text-right">$350.00</TableCell>
+                              <TableCell className="text-right">
+                                 $350.00
+                              </TableCell>
                            </TableRow>
                            <TableRow>
                               <TableCell>
@@ -342,7 +354,9 @@ export default function Dashboard() {
                               <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
                                  2023-06-26
                               </TableCell>
-                              <TableCell className="text-right">$450.00</TableCell>
+                              <TableCell className="text-right">
+                                 $450.00
+                              </TableCell>
                            </TableRow>
                            <TableRow>
                               <TableCell>
@@ -362,7 +376,9 @@ export default function Dashboard() {
                               <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
                                  2023-06-27
                               </TableCell>
-                              <TableCell className="text-right">$550.00</TableCell>
+                              <TableCell className="text-right">
+                                 $550.00
+                              </TableCell>
                            </TableRow>
                         </TableBody>
                      </Table>
diff --git a/apps/web/__registry__/miami/block/dashboard-02.tsx b/apps/web/__registry__/miami/block/dashboard-02.tsx
index 9b17130c..fbee7790 100644
--- a/apps/web/__registry__/miami/block/dashboard-02.tsx
+++ b/apps/web/__registry__/miami/block/dashboard-02.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link"
 import {
    Bell,
    CircleUser,
@@ -10,17 +10,17 @@ import {
    Search,
    ShoppingCart,
    Users,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Badge } from '~/registry/miami/ui/badge'
-import { Button } from '~/registry/miami/ui/button'
+import { Badge } from "~/registry/miami/ui/badge"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
+} from "~/registry/miami/ui/card"
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -28,16 +28,16 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/miami/ui/sheet'
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
 
-export const description
-  = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'
+export const description =
+   "A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action."
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -45,11 +45,18 @@ export default function Dashboard() {
          <div className="bg-muted/40 hidden border-r md:block">
             <div className="flex h-full max-h-screen flex-col gap-2">
                <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
-                  <Link href="/" className="flex items-center gap-2 font-semibold">
+                  <Link
+                     href="/"
+                     className="flex items-center gap-2 font-semibold"
+                  >
                      <Package2 className="size-6" />
                      <span className="">Acme Inc</span>
                   </Link>
-                  <Button variant="outline" size="icon" className="ml-auto size-8">
+                  <Button
+                     variant="outline"
+                     size="icon"
+                     className="ml-auto size-8"
+                  >
                      <Bell className="size-4" />
                      <span className="sr-only">Toggle notifications</span>
                   </Button>
@@ -78,8 +85,7 @@ export default function Dashboard() {
                         className="bg-muted text-primary hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
                      >
                         <Package className="size-4" />
-                        Products
-                        {' '}
+                        Products{" "}
                      </Link>
                      <Link
                         href="#"
@@ -102,8 +108,8 @@ export default function Dashboard() {
                      <CardHeader className="p-2 pt-0 md:p-4">
                         <CardTitle>Upgrade to Pro</CardTitle>
                         <CardDescription>
-                           Unlock all features and get unlimited access to our support
-                           team.
+                           Unlock all features and get unlimited access to our
+                           support team.
                         </CardDescription>
                      </CardHeader>
                      <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
@@ -181,8 +187,8 @@ export default function Dashboard() {
                            <CardHeader>
                               <CardTitle>Upgrade to Pro</CardTitle>
                               <CardDescription>
-                                 Unlock all features and get unlimited access to our
-                                 support team.
+                                 Unlock all features and get unlimited access to
+                                 our support team.
                               </CardDescription>
                            </CardHeader>
                            <CardContent>
@@ -208,7 +214,11 @@ export default function Dashboard() {
                </div>
                <DropdownMenu>
                   <DropdownMenuTrigger asChild>
-                     <Button variant="secondary" size="icon" className="rounded-full">
+                     <Button
+                        variant="secondary"
+                        size="icon"
+                        className="rounded-full"
+                     >
                         <CircleUser className="size-5" />
                         <span className="sr-only">Toggle user menu</span>
                      </Button>
@@ -225,10 +235,13 @@ export default function Dashboard() {
             </header>
             <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
                <div className="flex items-center">
-                  <h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
+                  <h1 className="text-lg font-semibold md:text-2xl">
+                     Inventory
+                  </h1>
                </div>
                <div
-                  className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm" x-chunk="dashboard-02-chunk-1"
+                  className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
+                  x-chunk="dashboard-02-chunk-1"
                >
                   <div className="flex flex-col items-center gap-1 text-center">
                      <h3 className="text-2xl font-bold tracking-tight">
diff --git a/apps/web/__registry__/miami/block/dashboard-03.tsx b/apps/web/__registry__/miami/block/dashboard-03.tsx
index 507eb3c6..8f066f88 100644
--- a/apps/web/__registry__/miami/block/dashboard-03.tsx
+++ b/apps/web/__registry__/miami/block/dashboard-03.tsx
@@ -15,10 +15,10 @@ import {
    SquareUser,
    Triangle,
    Turtle,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Badge } from '~/registry/miami/ui/badge'
-import { Button } from '~/registry/miami/ui/button'
+import { Badge } from "~/registry/miami/ui/badge"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Drawer,
    DrawerContent,
@@ -26,29 +26,29 @@ import {
    DrawerHeader,
    DrawerTitle,
    DrawerTrigger,
-} from '~/registry/miami/ui/drawer'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/drawer"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/miami/ui/select'
-import { Textarea } from '~/registry/miami/ui/textarea'
+} from "~/registry/miami/ui/select"
+import { Textarea } from "~/registry/miami/ui/textarea"
 import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
+} from "~/registry/miami/ui/tooltip"
 
-export const description
-  = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'
+export const description =
+   "An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages."
 
-export const iframeHeight = '720px'
+export const iframeHeight = "720px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -206,14 +206,17 @@ export default function Dashboard() {
                                           <Rabbit className="size-5" />
                                           <div className="grid gap-0.5">
                                              <p>
-                                                Neural
-                                                {' '}
+                                                Neural{" "}
                                                 <span className="text-foreground font-medium">
                                                    Genesis
                                                 </span>
                                              </p>
-                                             <p className="text-xs" data-description>
-                                                Our fastest model for general use cases.
+                                             <p
+                                                className="text-xs"
+                                                data-description
+                                             >
+                                                Our fastest model for general
+                                                use cases.
                                              </p>
                                           </div>
                                        </div>
@@ -223,14 +226,17 @@ export default function Dashboard() {
                                           <Bird className="size-5" />
                                           <div className="grid gap-0.5">
                                              <p>
-                                                Neural
-                                                {' '}
+                                                Neural{" "}
                                                 <span className="text-foreground font-medium">
                                                    Explorer
                                                 </span>
                                              </p>
-                                             <p className="text-xs" data-description>
-                                                Performance and speed for efficiency.
+                                             <p
+                                                className="text-xs"
+                                                data-description
+                                             >
+                                                Performance and speed for
+                                                efficiency.
                                              </p>
                                           </div>
                                        </div>
@@ -240,15 +246,17 @@ export default function Dashboard() {
                                           <Turtle className="size-5" />
                                           <div className="grid gap-0.5">
                                              <p>
-                                                Neural
-                                                {' '}
+                                                Neural{" "}
                                                 <span className="text-foreground font-medium">
                                                    Quantum
                                                 </span>
                                              </p>
-                                             <p className="text-xs" data-description>
-                                                The most powerful model for complex
-                                                computations.
+                                             <p
+                                                className="text-xs"
+                                                data-description
+                                             >
+                                                The most powerful model for
+                                                complex computations.
                                              </p>
                                           </div>
                                        </div>
@@ -258,15 +266,27 @@ export default function Dashboard() {
                            </div>
                            <div className="grid gap-3">
                               <Label htmlFor="temperature">Temperature</Label>
-                              <Input id="temperature" type="number" placeholder="0.4" />
+                              <Input
+                                 id="temperature"
+                                 type="number"
+                                 placeholder="0.4"
+                              />
                            </div>
                            <div className="grid gap-3">
                               <Label htmlFor="top-p">Top P</Label>
-                              <Input id="top-p" type="number" placeholder="0.7" />
+                              <Input
+                                 id="top-p"
+                                 type="number"
+                                 placeholder="0.7"
+                              />
                            </div>
                            <div className="grid gap-3">
                               <Label htmlFor="top-k">Top K</Label>
-                              <Input id="top-k" type="number" placeholder="0.0" />
+                              <Input
+                                 id="top-k"
+                                 type="number"
+                                 placeholder="0.0"
+                              />
                            </div>
                         </fieldset>
                         <fieldset className="grid gap-6 rounded-lg border p-4">
@@ -280,15 +300,22 @@ export default function Dashboard() {
                                     <SelectValue placeholder="Select a role" />
                                  </SelectTrigger>
                                  <SelectContent>
-                                    <SelectItem value="system">System</SelectItem>
+                                    <SelectItem value="system">
+                                       System
+                                    </SelectItem>
                                     <SelectItem value="user">User</SelectItem>
-                                    <SelectItem value="assistant">Assistant</SelectItem>
+                                    <SelectItem value="assistant">
+                                       Assistant
+                                    </SelectItem>
                                  </SelectContent>
                               </Select>
                            </div>
                            <div className="grid gap-3">
                               <Label htmlFor="content">Content</Label>
-                              <Textarea id="content" placeholder="You are a..." />
+                              <Textarea
+                                 id="content"
+                                 placeholder="You are a..."
+                              />
                            </div>
                         </fieldset>
                      </form>
@@ -305,7 +332,8 @@ export default function Dashboard() {
             </header>
             <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
                <div
-                  className="relative hidden flex-col items-start gap-8 md:flex" x-chunk="dashboard-03-chunk-0"
+                  className="relative hidden flex-col items-start gap-8 md:flex"
+                  x-chunk="dashboard-03-chunk-0"
                >
                   <form className="grid w-full items-start gap-6">
                      <fieldset className="grid gap-6 rounded-lg border p-4">
@@ -327,14 +355,17 @@ export default function Dashboard() {
                                        <Rabbit className="size-5" />
                                        <div className="grid gap-0.5">
                                           <p>
-                                             Neural
-                                             {' '}
+                                             Neural{" "}
                                              <span className="text-foreground font-medium">
                                                 Genesis
                                              </span>
                                           </p>
-                                          <p className="text-xs" data-description>
-                                             Our fastest model for general use cases.
+                                          <p
+                                             className="text-xs"
+                                             data-description
+                                          >
+                                             Our fastest model for general use
+                                             cases.
                                           </p>
                                        </div>
                                     </div>
@@ -344,14 +375,17 @@ export default function Dashboard() {
                                        <Bird className="size-5" />
                                        <div className="grid gap-0.5">
                                           <p>
-                                             Neural
-                                             {' '}
+                                             Neural{" "}
                                              <span className="text-foreground font-medium">
                                                 Explorer
                                              </span>
                                           </p>
-                                          <p className="text-xs" data-description>
-                                             Performance and speed for efficiency.
+                                          <p
+                                             className="text-xs"
+                                             data-description
+                                          >
+                                             Performance and speed for
+                                             efficiency.
                                           </p>
                                        </div>
                                     </div>
@@ -361,14 +395,17 @@ export default function Dashboard() {
                                        <Turtle className="size-5" />
                                        <div className="grid gap-0.5">
                                           <p>
-                                             Neural
-                                             {' '}
+                                             Neural{" "}
                                              <span className="text-foreground font-medium">
                                                 Quantum
                                              </span>
                                           </p>
-                                          <p className="text-xs" data-description>
-                                             The most powerful model for complex computations.
+                                          <p
+                                             className="text-xs"
+                                             data-description
+                                          >
+                                             The most powerful model for complex
+                                             computations.
                                           </p>
                                        </div>
                                     </div>
@@ -378,16 +415,28 @@ export default function Dashboard() {
                         </div>
                         <div className="grid gap-3">
                            <Label htmlFor="temperature">Temperature</Label>
-                           <Input id="temperature" type="number" placeholder="0.4" />
+                           <Input
+                              id="temperature"
+                              type="number"
+                              placeholder="0.4"
+                           />
                         </div>
                         <div className="grid grid-cols-2 gap-4">
                            <div className="grid gap-3">
                               <Label htmlFor="top-p">Top P</Label>
-                              <Input id="top-p" type="number" placeholder="0.7" />
+                              <Input
+                                 id="top-p"
+                                 type="number"
+                                 placeholder="0.7"
+                              />
                            </div>
                            <div className="grid gap-3">
                               <Label htmlFor="top-k">Top K</Label>
-                              <Input id="top-k" type="number" placeholder="0.0" />
+                              <Input
+                                 id="top-k"
+                                 type="number"
+                                 placeholder="0.0"
+                              />
                            </div>
                         </div>
                      </fieldset>
@@ -404,7 +453,9 @@ export default function Dashboard() {
                               <SelectContent>
                                  <SelectItem value="system">System</SelectItem>
                                  <SelectItem value="user">User</SelectItem>
-                                 <SelectItem value="assistant">Assistant</SelectItem>
+                                 <SelectItem value="assistant">
+                                    Assistant
+                                 </SelectItem>
                               </SelectContent>
                            </Select>
                         </div>
@@ -425,7 +476,8 @@ export default function Dashboard() {
                   </Badge>
                   <div className="flex-1" />
                   <form
-                     className="bg-background focus-within:ring-ring relative overflow-hidden rounded-lg border focus-within:ring-1" x-chunk="dashboard-03-chunk-1"
+                     className="bg-background focus-within:ring-ring relative overflow-hidden rounded-lg border focus-within:ring-1"
+                     x-chunk="dashboard-03-chunk-1"
                   >
                      <Label htmlFor="message" className="sr-only">
                         Message
@@ -443,7 +495,9 @@ export default function Dashboard() {
                                  <span className="sr-only">Attach file</span>
                               </Button>
                            </TooltipTrigger>
-                           <TooltipContent side="top">Attach File</TooltipContent>
+                           <TooltipContent side="top">
+                              Attach File
+                           </TooltipContent>
                         </Tooltip>
                         <Tooltip>
                            <TooltipTrigger asChild>
@@ -452,9 +506,15 @@ export default function Dashboard() {
                                  <span className="sr-only">Use Microphone</span>
                               </Button>
                            </TooltipTrigger>
-                           <TooltipContent side="top">Use Microphone</TooltipContent>
+                           <TooltipContent side="top">
+                              Use Microphone
+                           </TooltipContent>
                         </Tooltip>
-                        <Button type="submit" size="sm" className="ml-auto gap-1.5">
+                        <Button
+                           type="submit"
+                           size="sm"
+                           className="ml-auto gap-1.5"
+                        >
                            Send Message
                            <CornerDownLeft className="size-3.5" />
                         </Button>
diff --git a/apps/web/__registry__/miami/block/dashboard-04.tsx b/apps/web/__registry__/miami/block/dashboard-04.tsx
index 3667c1cc..41125560 100644
--- a/apps/web/__registry__/miami/block/dashboard-04.tsx
+++ b/apps/web/__registry__/miami/block/dashboard-04.tsx
@@ -1,7 +1,7 @@
-import Link from 'next/link'
-import { CircleUser, Menu, Package2, Search } from 'lucide-react'
+import Link from "next/link"
+import { CircleUser, Menu, Package2, Search } from "lucide-react"
 
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
@@ -9,8 +9,8 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import { Checkbox } from '~/registry/miami/ui/checkbox'
+} from "~/registry/miami/ui/card"
+import { Checkbox } from "~/registry/miami/ui/checkbox"
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -18,16 +18,16 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/miami/ui/sheet'
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
 
-export const description
-  = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'
+export const description =
+   "A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings."
 
-export const iframeHeight = '780px'
+export const iframeHeight = "780px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -135,7 +135,11 @@ export default function Dashboard() {
                </form>
                <DropdownMenu>
                   <DropdownMenuTrigger asChild>
-                     <Button variant="secondary" size="icon" className="rounded-full">
+                     <Button
+                        variant="secondary"
+                        size="icon"
+                        className="rounded-full"
+                     >
                         <CircleUser className="size-5" />
                         <span className="sr-only">Toggle user menu</span>
                      </Button>
@@ -157,7 +161,8 @@ export default function Dashboard() {
             </div>
             <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
                <nav
-                  className="text-muted-foreground grid gap-4 text-sm" x-chunk="dashboard-04-chunk-0"
+                  className="text-muted-foreground grid gap-4 text-sm"
+                  x-chunk="dashboard-04-chunk-0"
                >
                   <Link href="#" className="text-primary font-semibold">
                      General
@@ -189,8 +194,8 @@ export default function Dashboard() {
                      <CardHeader>
                         <CardTitle>Plugins Directory</CardTitle>
                         <CardDescription>
-                           The directory within your project, in which your plugins are
-                           located.
+                           The directory within your project, in which your
+                           plugins are located.
                         </CardDescription>
                      </CardHeader>
                      <CardContent>
diff --git a/apps/web/__registry__/miami/block/dashboard-05.tsx b/apps/web/__registry__/miami/block/dashboard-05.tsx
index ca1af625..c71c37d9 100644
--- a/apps/web/__registry__/miami/block/dashboard-05.tsx
+++ b/apps/web/__registry__/miami/block/dashboard-05.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
-import Image from 'next/image'
-import Link from 'next/link'
+import * as React from "react"
+import Image from "next/image"
+import Link from "next/link"
 import {
    ChevronLeft,
    ChevronRight,
@@ -19,9 +19,9 @@ import {
    ShoppingCart,
    Truck,
    Users2,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Badge } from '~/registry/miami/ui/badge'
+import { Badge } from "~/registry/miami/ui/badge"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -29,8 +29,8 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Button } from '~/registry/miami/ui/button'
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
@@ -38,7 +38,7 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
+} from "~/registry/miami/ui/card"
 import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
@@ -47,16 +47,16 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
 import {
    Pagination,
    PaginationContent,
    PaginationItem,
-} from '~/registry/miami/ui/pagination'
-import { Progress } from '~/registry/miami/ui/progress'
-import { Separator } from '~/registry/miami/ui/separator'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/miami/ui/sheet'
+} from "~/registry/miami/ui/pagination"
+import { Progress } from "~/registry/miami/ui/progress"
+import { Separator } from "~/registry/miami/ui/separator"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
 import {
    Table,
    TableBody,
@@ -64,25 +64,25 @@ import {
    TableHead,
    TableHeader,
    TableRow,
-} from '~/registry/miami/ui/table'
+} from "~/registry/miami/ui/table"
 import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
-} from '~/registry/miami/ui/tabs'
+} from "~/registry/miami/ui/tabs"
 import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
+} from "~/registry/miami/ui/tooltip"
 
-export const description
-  = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'
+export const description =
+   "An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information."
 
-export const iframeHeight = '906px'
+export const iframeHeight = "906px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -176,7 +176,11 @@ export default function Dashboard() {
             <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
                <Sheet>
                   <SheetTrigger asChild>
-                     <Button size="icon" variant="outline" className="sm:hidden">
+                     <Button
+                        size="icon"
+                        variant="outline"
+                        className="sm:hidden"
+                     >
                         <PanelLeft className="size-5" />
                         <span className="sr-only">Toggle Menu</span>
                      </Button>
@@ -285,13 +289,14 @@ export default function Dashboard() {
                <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
                   <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
                      <Card
-                        className="sm:col-span-2" x-chunk="dashboard-05-chunk-0"
+                        className="sm:col-span-2"
+                        x-chunk="dashboard-05-chunk-0"
                      >
                         <CardHeader className="pb-3">
                            <CardTitle>Your Orders</CardTitle>
                            <CardDescription className="max-w-lg text-balance leading-relaxed">
-                              Introducing Our Dynamic Orders Dashboard for Seamless
-                              Management and Insightful Analysis.
+                              Introducing Our Dynamic Orders Dashboard for
+                              Seamless Management and Insightful Analysis.
                            </CardDescription>
                         </CardHeader>
                         <CardFooter>
@@ -343,11 +348,15 @@ export default function Dashboard() {
                                     className="h-7 gap-1 text-sm"
                                  >
                                     <ListFilter className="size-3.5" />
-                                    <span className="sr-only sm:not-sr-only">Filter</span>
+                                    <span className="sr-only sm:not-sr-only">
+                                       Filter
+                                    </span>
                                  </Button>
                               </DropdownMenuTrigger>
                               <DropdownMenuContent align="end">
-                                 <DropdownMenuLabel>Filter by</DropdownMenuLabel>
+                                 <DropdownMenuLabel>
+                                    Filter by
+                                 </DropdownMenuLabel>
                                  <DropdownMenuSeparator />
                                  <DropdownMenuCheckboxItem checked>
                                     Fulfilled
@@ -366,7 +375,9 @@ export default function Dashboard() {
                               className="h-7 gap-1 text-sm"
                            >
                               <File className="size-3.5" />
-                              <span className="sr-only sm:not-sr-only">Export</span>
+                              <span className="sr-only sm:not-sr-only">
+                                 Export
+                              </span>
                            </Button>
                         </div>
                      </div>
@@ -392,13 +403,17 @@ export default function Dashboard() {
                                        <TableHead className="hidden md:table-cell">
                                           Date
                                        </TableHead>
-                                       <TableHead className="text-right">Amount</TableHead>
+                                       <TableHead className="text-right">
+                                          Amount
+                                       </TableHead>
                                     </TableRow>
                                  </TableHeader>
                                  <TableBody>
                                     <TableRow className="bg-accent">
                                        <TableCell>
-                                          <div className="font-medium">Liam Johnson</div>
+                                          <div className="font-medium">
+                                             Liam Johnson
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              liam@example.com
                                           </div>
@@ -407,18 +422,25 @@ export default function Dashboard() {
                                           Sale
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
                                              Fulfilled
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-23
                                        </TableCell>
-                                       <TableCell className="text-right">$250.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $250.00
+                                       </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Olivia Smith</div>
+                                          <div className="font-medium">
+                                             Olivia Smith
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              olivia@example.com
                                           </div>
@@ -427,14 +449,19 @@ export default function Dashboard() {
                                           Refund
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="outline">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="outline"
+                                          >
                                              Declined
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-24
                                        </TableCell>
-                                       <TableCell className="text-right">$150.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $150.00
+                                       </TableCell>
                                     </TableRow>
                                     {/* <TableRow>
                           <TableCell>
@@ -458,7 +485,9 @@ export default function Dashboard() {
                         </TableRow> */}
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Noah Williams</div>
+                                          <div className="font-medium">
+                                             Noah Williams
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              noah@example.com
                                           </div>
@@ -467,18 +496,25 @@ export default function Dashboard() {
                                           Subscription
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
                                              Fulfilled
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-25
                                        </TableCell>
-                                       <TableCell className="text-right">$350.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $350.00
+                                       </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Emma Brown</div>
+                                          <div className="font-medium">
+                                             Emma Brown
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              emma@example.com
                                           </div>
@@ -487,18 +523,25 @@ export default function Dashboard() {
                                           Sale
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
                                              Fulfilled
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-26
                                        </TableCell>
-                                       <TableCell className="text-right">$450.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $450.00
+                                       </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Liam Johnson</div>
+                                          <div className="font-medium">
+                                             Liam Johnson
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              liam@example.com
                                           </div>
@@ -507,18 +550,25 @@ export default function Dashboard() {
                                           Sale
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
                                              Fulfilled
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-23
                                        </TableCell>
-                                       <TableCell className="text-right">$250.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $250.00
+                                       </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Olivia Smith</div>
+                                          <div className="font-medium">
+                                             Olivia Smith
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              olivia@example.com
                                           </div>
@@ -527,18 +577,25 @@ export default function Dashboard() {
                                           Refund
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="outline">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="outline"
+                                          >
                                              Declined
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-24
                                        </TableCell>
-                                       <TableCell className="text-right">$150.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $150.00
+                                       </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>
-                                          <div className="font-medium">Emma Brown</div>
+                                          <div className="font-medium">
+                                             Emma Brown
+                                          </div>
                                           <div className="text-muted-foreground hidden text-sm md:inline">
                                              emma@example.com
                                           </div>
@@ -547,14 +604,19 @@ export default function Dashboard() {
                                           Sale
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
                                              Fulfilled
                                           </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                           2023-06-26
                                        </TableCell>
-                                       <TableCell className="text-right">$450.00</TableCell>
+                                       <TableCell className="text-right">
+                                          $450.00
+                                       </TableCell>
                                     </TableRow>
                                  </TableBody>
                               </Table>
@@ -565,7 +627,8 @@ export default function Dashboard() {
                </div>
                <div>
                   <Card
-                     className="overflow-hidden" x-chunk="dashboard-05-chunk-4"
+                     className="overflow-hidden"
+                     x-chunk="dashboard-05-chunk-4"
                   >
                      <CardHeader className="bg-muted/50 flex flex-row items-start">
                         <div className="grid gap-0.5">
@@ -580,10 +643,16 @@ export default function Dashboard() {
                                  <span className="sr-only">Copy Order ID</span>
                               </Button>
                            </CardTitle>
-                           <CardDescription>Date: November 23, 2023</CardDescription>
+                           <CardDescription>
+                              Date: November 23, 2023
+                           </CardDescription>
                         </div>
                         <div className="ml-auto flex items-center gap-1">
-                           <Button size="sm" variant="outline" className="h-8 gap-1">
+                           <Button
+                              size="sm"
+                              variant="outline"
+                              className="h-8 gap-1"
+                           >
                               <Truck className="size-3.5" />
                               <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
                                  Track Order
@@ -591,7 +660,11 @@ export default function Dashboard() {
                            </Button>
                            <DropdownMenu>
                               <DropdownMenuTrigger asChild>
-                                 <Button size="icon" variant="outline" className="size-8">
+                                 <Button
+                                    size="icon"
+                                    variant="outline"
+                                    className="size-8"
+                                 >
                                     <MoreVertical className="size-3.5" />
                                     <span className="sr-only">More</span>
                                  </Button>
@@ -611,17 +684,13 @@ export default function Dashboard() {
                            <ul className="grid gap-3">
                               <li className="flex items-center justify-between">
                                  <span className="text-muted-foreground">
-                                    Glimmer Lamps x
-                                    {' '}
-                                    <span>2</span>
+                                    Glimmer Lamps x <span>2</span>
                                  </span>
                                  <span>$250.00</span>
                               </li>
                               <li className="flex items-center justify-between">
                                  <span className="text-muted-foreground">
-                                    Aqua Filters x
-                                    {' '}
-                                    <span>1</span>
+                                    Aqua Filters x <span>1</span>
                                  </span>
                                  <span>$49.00</span>
                               </li>
@@ -629,19 +698,27 @@ export default function Dashboard() {
                            <Separator className="my-2" />
                            <ul className="grid gap-3">
                               <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">Subtotal</span>
+                                 <span className="text-muted-foreground">
+                                    Subtotal
+                                 </span>
                                  <span>$299.00</span>
                               </li>
                               <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">Shipping</span>
+                                 <span className="text-muted-foreground">
+                                    Shipping
+                                 </span>
                                  <span>$5.00</span>
                               </li>
                               <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">Tax</span>
+                                 <span className="text-muted-foreground">
+                                    Tax
+                                 </span>
                                  <span>$25.00</span>
                               </li>
                               <li className="flex items-center justify-between font-semibold">
-                                 <span className="text-muted-foreground">Total</span>
+                                 <span className="text-muted-foreground">
+                                    Total
+                                 </span>
                                  <span>$329.00</span>
                               </li>
                            </ul>
@@ -649,7 +726,9 @@ export default function Dashboard() {
                         <Separator className="my-4" />
                         <div className="grid grid-cols-2 gap-4">
                            <div className="grid gap-3">
-                              <div className="font-semibold">Shipping Information</div>
+                              <div className="font-semibold">
+                                 Shipping Information
+                              </div>
                               <address className="text-muted-foreground grid gap-0.5 not-italic">
                                  <span>Liam Johnson</span>
                                  <span>1234 Main St.</span>
@@ -657,7 +736,9 @@ export default function Dashboard() {
                               </address>
                            </div>
                            <div className="grid auto-rows-max gap-3">
-                              <div className="font-semibold">Billing Information</div>
+                              <div className="font-semibold">
+                                 Billing Information
+                              </div>
                               <div className="text-muted-foreground">
                                  Same as shipping address
                               </div>
@@ -665,20 +746,28 @@ export default function Dashboard() {
                         </div>
                         <Separator className="my-4" />
                         <div className="grid gap-3">
-                           <div className="font-semibold">Customer Information</div>
+                           <div className="font-semibold">
+                              Customer Information
+                           </div>
                            <dl className="grid gap-3">
                               <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground">Customer</dt>
+                                 <dt className="text-muted-foreground">
+                                    Customer
+                                 </dt>
                                  <dd>Liam Johnson</dd>
                               </div>
                               <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground">Email</dt>
+                                 <dt className="text-muted-foreground">
+                                    Email
+                                 </dt>
                                  <dd>
                                     <a href="mailto:">liam@acme.com</a>
                                  </dd>
                               </div>
                               <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground">Phone</dt>
+                                 <dt className="text-muted-foreground">
+                                    Phone
+                                 </dt>
                                  <dd>
                                     <a href="tel:">+1 234 567 890</a>
                                  </dd>
@@ -687,7 +776,9 @@ export default function Dashboard() {
                         </div>
                         <Separator className="my-4" />
                         <div className="grid gap-3">
-                           <div className="font-semibold">Payment Information</div>
+                           <div className="font-semibold">
+                              Payment Information
+                           </div>
                            <dl className="grid gap-3">
                               <div className="flex items-center justify-between">
                                  <dt className="text-muted-foreground flex items-center gap-1">
@@ -701,20 +792,29 @@ export default function Dashboard() {
                      </CardContent>
                      <CardFooter className="bg-muted/50 flex flex-row items-center border-t px-6 py-3">
                         <div className="text-muted-foreground text-xs">
-                           Updated
-                           {' '}
+                           Updated{" "}
                            <time dateTime="2023-11-23">November 23, 2023</time>
                         </div>
                         <Pagination className="ml-auto mr-0 w-auto">
                            <PaginationContent>
                               <PaginationItem>
-                                 <Button size="icon" variant="outline" className="size-6">
+                                 <Button
+                                    size="icon"
+                                    variant="outline"
+                                    className="size-6"
+                                 >
                                     <ChevronLeft className="size-3.5" />
-                                    <span className="sr-only">Previous Order</span>
+                                    <span className="sr-only">
+                                       Previous Order
+                                    </span>
                                  </Button>
                               </PaginationItem>
                               <PaginationItem>
-                                 <Button size="icon" variant="outline" className="size-6">
+                                 <Button
+                                    size="icon"
+                                    variant="outline"
+                                    className="size-6"
+                                 >
                                     <ChevronRight className="size-3.5" />
                                     <span className="sr-only">Next Order</span>
                                  </Button>
diff --git a/apps/web/__registry__/miami/block/dashboard-06.tsx b/apps/web/__registry__/miami/block/dashboard-06.tsx
index ab1db619..1723a07b 100644
--- a/apps/web/__registry__/miami/block/dashboard-06.tsx
+++ b/apps/web/__registry__/miami/block/dashboard-06.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import Link from 'next/link'
+import Image from "next/image"
+import Link from "next/link"
 import {
    File,
    Home,
@@ -14,9 +14,9 @@ import {
    Settings,
    ShoppingCart,
    Users2,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Badge } from '~/registry/miami/ui/badge'
+import { Badge } from "~/registry/miami/ui/badge"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -24,8 +24,8 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Button } from '~/registry/miami/ui/button'
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
@@ -33,7 +33,7 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
+} from "~/registry/miami/ui/card"
 import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
@@ -42,9 +42,9 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/miami/ui/sheet'
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
 import {
    Table,
    TableBody,
@@ -52,25 +52,25 @@ import {
    TableHead,
    TableHeader,
    TableRow,
-} from '~/registry/miami/ui/table'
+} from "~/registry/miami/ui/table"
 import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
-} from '~/registry/miami/ui/tabs'
+} from "~/registry/miami/ui/tabs"
 import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
+} from "~/registry/miami/ui/tooltip"
 
-export const description
-  = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'
+export const description =
+   "An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions."
 
-export const iframeHeight = '820px'
+export const iframeHeight = "820px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -164,7 +164,11 @@ export default function Dashboard() {
             <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
                <Sheet>
                   <SheetTrigger asChild>
-                     <Button size="icon" variant="outline" className="sm:hidden">
+                     <Button
+                        size="icon"
+                        variant="outline"
+                        className="sm:hidden"
+                     >
                         <PanelLeft className="size-5" />
                         <span className="sr-only">Toggle Menu</span>
                      </Button>
@@ -276,14 +280,21 @@ export default function Dashboard() {
                         <TabsTrigger value="all">All</TabsTrigger>
                         <TabsTrigger value="active">Active</TabsTrigger>
                         <TabsTrigger value="draft">Draft</TabsTrigger>
-                        <TabsTrigger value="archived" className="hidden sm:flex">
+                        <TabsTrigger
+                           value="archived"
+                           className="hidden sm:flex"
+                        >
                            Archived
                         </TabsTrigger>
                      </TabsList>
                      <div className="ml-auto flex items-center gap-2">
                         <DropdownMenu>
                            <DropdownMenuTrigger asChild>
-                              <Button variant="outline" size="sm" className="h-7 gap-1">
+                              <Button
+                                 variant="outline"
+                                 size="sm"
+                                 className="h-7 gap-1"
+                              >
                                  <ListFilter className="size-3.5" />
                                  <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
                                     Filter
@@ -296,13 +307,19 @@ export default function Dashboard() {
                               <DropdownMenuCheckboxItem checked>
                                  Active
                               </DropdownMenuCheckboxItem>
-                              <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>
+                              <DropdownMenuCheckboxItem>
+                                 Draft
+                              </DropdownMenuCheckboxItem>
                               <DropdownMenuCheckboxItem>
                                  Archived
                               </DropdownMenuCheckboxItem>
                            </DropdownMenuContent>
                         </DropdownMenu>
-                        <Button size="sm" variant="outline" className="h-7 gap-1">
+                        <Button
+                           size="sm"
+                           variant="outline"
+                           className="h-7 gap-1"
+                        >
                            <File className="size-3.5" />
                            <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
                               Export
@@ -321,7 +338,8 @@ export default function Dashboard() {
                         <CardHeader>
                            <CardTitle>Products</CardTitle>
                            <CardDescription>
-                              Manage your products and view their sales performance.
+                              Manage your products and view their sales
+                              performance.
                            </CardDescription>
                         </CardHeader>
                         <CardContent>
@@ -378,13 +396,21 @@ export default function Dashboard() {
                                                 variant="ghost"
                                              >
                                                 <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
                                              </Button>
                                           </DropdownMenuTrigger>
                                           <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
                                           </DropdownMenuContent>
                                        </DropdownMenu>
                                     </TableCell>
@@ -421,13 +447,21 @@ export default function Dashboard() {
                                                 variant="ghost"
                                              >
                                                 <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
                                              </Button>
                                           </DropdownMenuTrigger>
                                           <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
                                           </DropdownMenuContent>
                                        </DropdownMenu>
                                     </TableCell>
@@ -464,13 +498,21 @@ export default function Dashboard() {
                                                 variant="ghost"
                                              >
                                                 <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
                                              </Button>
                                           </DropdownMenuTrigger>
                                           <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
                                           </DropdownMenuContent>
                                        </DropdownMenu>
                                     </TableCell>
@@ -507,13 +549,21 @@ export default function Dashboard() {
                                                 variant="ghost"
                                              >
                                                 <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
                                              </Button>
                                           </DropdownMenuTrigger>
                                           <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
                                           </DropdownMenuContent>
                                        </DropdownMenu>
                                     </TableCell>
@@ -550,13 +600,21 @@ export default function Dashboard() {
                                                 variant="ghost"
                                              >
                                                 <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
                                              </Button>
                                           </DropdownMenuTrigger>
                                           <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
                                           </DropdownMenuContent>
                                        </DropdownMenu>
                                     </TableCell>
@@ -593,13 +651,21 @@ export default function Dashboard() {
                                                 variant="ghost"
                                              >
                                                 <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
                                              </Button>
                                           </DropdownMenuTrigger>
                                           <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
                                           </DropdownMenuContent>
                                        </DropdownMenu>
                                     </TableCell>
@@ -609,14 +675,8 @@ export default function Dashboard() {
                         </CardContent>
                         <CardFooter>
                            <div className="text-muted-foreground text-xs">
-                              Showing
-                              {' '}
-                              <strong>1-10</strong>
-                              {' '}
-                              of
-                              <strong>32</strong>
-                              {' '}
-                              products
+                              Showing <strong>1-10</strong> of
+                              <strong>32</strong> products
                            </div>
                         </CardFooter>
                      </Card>
diff --git a/apps/web/__registry__/miami/block/dashboard-07.tsx b/apps/web/__registry__/miami/block/dashboard-07.tsx
index 4c76393a..8c089500 100644
--- a/apps/web/__registry__/miami/block/dashboard-07.tsx
+++ b/apps/web/__registry__/miami/block/dashboard-07.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import Link from 'next/link'
+import Image from "next/image"
+import Link from "next/link"
 import {
    ChevronLeft,
    Home,
@@ -13,9 +13,9 @@ import {
    ShoppingCart,
    Upload,
    Users2,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Badge } from '~/registry/miami/ui/badge'
+import { Badge } from "~/registry/miami/ui/badge"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -23,8 +23,8 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Button } from '~/registry/miami/ui/button'
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
@@ -32,7 +32,7 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
+} from "~/registry/miami/ui/card"
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -40,17 +40,17 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/miami/ui/select'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/miami/ui/sheet'
+} from "~/registry/miami/ui/select"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
 import {
    Table,
    TableBody,
@@ -58,24 +58,21 @@ import {
    TableHead,
    TableHeader,
    TableRow,
-} from '~/registry/miami/ui/table'
-import { Textarea } from '~/registry/miami/ui/textarea'
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/miami/ui/toggle-group'
+} from "~/registry/miami/ui/table"
+import { Textarea } from "~/registry/miami/ui/textarea"
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
 import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
+} from "~/registry/miami/ui/tooltip"
 
-export const description
-  = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'
+export const description =
+   "A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images."
 
-export const iframeHeight = '1100px'
+export const iframeHeight = "1100px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Dashboard() {
    return (
@@ -169,7 +166,11 @@ export default function Dashboard() {
             <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
                <Sheet>
                   <SheetTrigger asChild>
-                     <Button size="icon" variant="outline" className="sm:hidden">
+                     <Button
+                        size="icon"
+                        variant="outline"
+                        className="sm:hidden"
+                     >
                         <PanelLeft className="size-5" />
                         <span className="sr-only">Toggle Menu</span>
                      </Button>
@@ -300,7 +301,8 @@ export default function Dashboard() {
                            <CardHeader>
                               <CardTitle>Product Details</CardTitle>
                               <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit
+                                 Lipsum dolor sit amet, consectetur adipiscing
+                                 elit
                               </CardDescription>
                            </CardHeader>
                            <CardContent>
@@ -315,7 +317,9 @@ export default function Dashboard() {
                                     />
                                  </div>
                                  <div className="grid gap-3">
-                                    <Label htmlFor="description">Description</Label>
+                                    <Label htmlFor="description">
+                                       Description
+                                    </Label>
                                     <Textarea
                                        id="description"
                                        defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
@@ -329,17 +333,22 @@ export default function Dashboard() {
                            <CardHeader>
                               <CardTitle>Stock</CardTitle>
                               <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit
+                                 Lipsum dolor sit amet, consectetur adipiscing
+                                 elit
                               </CardDescription>
                            </CardHeader>
                            <CardContent>
                               <Table>
                                  <TableHeader>
                                     <TableRow>
-                                       <TableHead className="w-[100px]">SKU</TableHead>
+                                       <TableHead className="w-[100px]">
+                                          SKU
+                                       </TableHead>
                                        <TableHead>Stock</TableHead>
                                        <TableHead>Price</TableHead>
-                                       <TableHead className="w-[100px]">Size</TableHead>
+                                       <TableHead className="w-[100px]">
+                                          Size
+                                       </TableHead>
                                     </TableRow>
                                  </TableHeader>
                                  <TableBody>
@@ -348,7 +357,10 @@ export default function Dashboard() {
                                           GGPC-001
                                        </TableCell>
                                        <TableCell>
-                                          <Label htmlFor="stock-1" className="sr-only">
+                                          <Label
+                                             htmlFor="stock-1"
+                                             className="sr-only"
+                                          >
                                              Stock
                                           </Label>
                                           <Input
@@ -358,7 +370,10 @@ export default function Dashboard() {
                                           />
                                        </TableCell>
                                        <TableCell>
-                                          <Label htmlFor="price-1" className="sr-only">
+                                          <Label
+                                             htmlFor="price-1"
+                                             className="sr-only"
+                                          >
                                              Price
                                           </Label>
                                           <Input
@@ -373,9 +388,15 @@ export default function Dashboard() {
                                              defaultValue="s"
                                              variant="outline"
                                           >
-                                             <ToggleGroupItem value="s">S</ToggleGroupItem>
-                                             <ToggleGroupItem value="m">M</ToggleGroupItem>
-                                             <ToggleGroupItem value="l">L</ToggleGroupItem>
+                                             <ToggleGroupItem value="s">
+                                                S
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="m">
+                                                M
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="l">
+                                                L
+                                             </ToggleGroupItem>
                                           </ToggleGroup>
                                        </TableCell>
                                     </TableRow>
@@ -384,7 +405,10 @@ export default function Dashboard() {
                                           GGPC-002
                                        </TableCell>
                                        <TableCell>
-                                          <Label htmlFor="stock-2" className="sr-only">
+                                          <Label
+                                             htmlFor="stock-2"
+                                             className="sr-only"
+                                          >
                                              Stock
                                           </Label>
                                           <Input
@@ -394,7 +418,10 @@ export default function Dashboard() {
                                           />
                                        </TableCell>
                                        <TableCell>
-                                          <Label htmlFor="price-2" className="sr-only">
+                                          <Label
+                                             htmlFor="price-2"
+                                             className="sr-only"
+                                          >
                                              Price
                                           </Label>
                                           <Input
@@ -409,9 +436,15 @@ export default function Dashboard() {
                                              defaultValue="m"
                                              variant="outline"
                                           >
-                                             <ToggleGroupItem value="s">S</ToggleGroupItem>
-                                             <ToggleGroupItem value="m">M</ToggleGroupItem>
-                                             <ToggleGroupItem value="l">L</ToggleGroupItem>
+                                             <ToggleGroupItem value="s">
+                                                S
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="m">
+                                                M
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="l">
+                                                L
+                                             </ToggleGroupItem>
                                           </ToggleGroup>
                                        </TableCell>
                                     </TableRow>
@@ -420,7 +453,10 @@ export default function Dashboard() {
                                           GGPC-003
                                        </TableCell>
                                        <TableCell>
-                                          <Label htmlFor="stock-3" className="sr-only">
+                                          <Label
+                                             htmlFor="stock-3"
+                                             className="sr-only"
+                                          >
                                              Stock
                                           </Label>
                                           <Input
@@ -430,7 +466,10 @@ export default function Dashboard() {
                                           />
                                        </TableCell>
                                        <TableCell>
-                                          <Label htmlFor="price-3" className="sr-only">
+                                          <Label
+                                             htmlFor="price-3"
+                                             className="sr-only"
+                                          >
                                              Stock
                                           </Label>
                                           <Input
@@ -445,9 +484,15 @@ export default function Dashboard() {
                                              defaultValue="s"
                                              variant="outline"
                                           >
-                                             <ToggleGroupItem value="s">S</ToggleGroupItem>
-                                             <ToggleGroupItem value="m">M</ToggleGroupItem>
-                                             <ToggleGroupItem value="l">L</ToggleGroupItem>
+                                             <ToggleGroupItem value="s">
+                                                S
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="m">
+                                                M
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="l">
+                                                L
+                                             </ToggleGroupItem>
                                           </ToggleGroup>
                                        </TableCell>
                                     </TableRow>
@@ -455,7 +500,11 @@ export default function Dashboard() {
                               </Table>
                            </CardContent>
                            <CardFooter className="justify-center border-t p-4">
-                              <Button size="sm" variant="ghost" className="gap-1">
+                              <Button
+                                 size="sm"
+                                 variant="ghost"
+                                 className="gap-1"
+                              >
                                  <PlusCircle className="size-3.5" />
                                  Add Variant
                               </Button>
@@ -477,7 +526,9 @@ export default function Dashboard() {
                                           <SelectValue placeholder="Select category" />
                                        </SelectTrigger>
                                        <SelectContent>
-                                          <SelectItem value="clothing">Clothing</SelectItem>
+                                          <SelectItem value="clothing">
+                                             Clothing
+                                          </SelectItem>
                                           <SelectItem value="electronics">
                                              Electronics
                                           </SelectItem>
@@ -499,8 +550,12 @@ export default function Dashboard() {
                                           <SelectValue placeholder="Select subcategory" />
                                        </SelectTrigger>
                                        <SelectContent>
-                                          <SelectItem value="t-shirts">T-Shirts</SelectItem>
-                                          <SelectItem value="hoodies">Hoodies</SelectItem>
+                                          <SelectItem value="t-shirts">
+                                             T-Shirts
+                                          </SelectItem>
+                                          <SelectItem value="hoodies">
+                                             Hoodies
+                                          </SelectItem>
                                           <SelectItem value="sweatshirts">
                                              Sweatshirts
                                           </SelectItem>
@@ -521,13 +576,22 @@ export default function Dashboard() {
                                  <div className="grid gap-3">
                                     <Label htmlFor="status">Status</Label>
                                     <Select>
-                                       <SelectTrigger id="status" aria-label="Select status">
+                                       <SelectTrigger
+                                          id="status"
+                                          aria-label="Select status"
+                                       >
                                           <SelectValue placeholder="Select status" />
                                        </SelectTrigger>
                                        <SelectContent>
-                                          <SelectItem value="draft">Draft</SelectItem>
-                                          <SelectItem value="published">Active</SelectItem>
-                                          <SelectItem value="archived">Archived</SelectItem>
+                                          <SelectItem value="draft">
+                                             Draft
+                                          </SelectItem>
+                                          <SelectItem value="published">
+                                             Active
+                                          </SelectItem>
+                                          <SelectItem value="archived">
+                                             Archived
+                                          </SelectItem>
                                        </SelectContent>
                                     </Select>
                                  </div>
@@ -535,12 +599,14 @@ export default function Dashboard() {
                            </CardContent>
                         </Card>
                         <Card
-                           className="overflow-hidden" x-chunk="dashboard-07-chunk-4"
+                           className="overflow-hidden"
+                           x-chunk="dashboard-07-chunk-4"
                         >
                            <CardHeader>
                               <CardTitle>Product Images</CardTitle>
                               <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit
+                                 Lipsum dolor sit amet, consectetur adipiscing
+                                 elit
                               </CardDescription>
                            </CardHeader>
                            <CardContent>
@@ -583,7 +649,8 @@ export default function Dashboard() {
                            <CardHeader>
                               <CardTitle>Archive Product</CardTitle>
                               <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit.
+                                 Lipsum dolor sit amet, consectetur adipiscing
+                                 elit.
                               </CardDescription>
                            </CardHeader>
                            <CardContent>
diff --git a/apps/web/__registry__/miami/block/demo-sidebar-controlled.tsx b/apps/web/__registry__/miami/block/demo-sidebar-controlled.tsx
index 6123cdec..3034f431 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar-controlled.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar-controlled.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 import {
    Frame,
    LifeBuoy,
@@ -9,9 +9,9 @@ import {
    PanelLeftOpen,
    PieChart,
    Send,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    Sidebar,
    SidebarContent,
@@ -23,32 +23,32 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 const projects = [
    {
-      name: 'Design Engineering',
-      url: '#',
+      name: "Design Engineering",
+      url: "#",
       icon: Frame,
    },
    {
-      name: 'Sales & Marketing',
-      url: '#',
+      name: "Sales & Marketing",
+      url: "#",
       icon: PieChart,
    },
    {
-      name: 'Travel',
-      url: '#',
+      name: "Travel",
+      url: "#",
       icon: Map,
    },
    {
-      name: 'Support',
-      url: '#',
+      name: "Support",
+      url: "#",
       icon: LifeBuoy,
    },
    {
-      name: 'Feedback',
-      url: '#',
+      name: "Feedback",
+      url: "#",
       icon: Send,
    },
 ]
@@ -64,7 +64,7 @@ export default function AppSidebar() {
                   <SidebarGroupLabel>Projects</SidebarGroupLabel>
                   <SidebarGroupContent>
                      <SidebarMenu>
-                        {projects.map(project => (
+                        {projects.map((project) => (
                            <SidebarMenuItem key={project.name}>
                               <SidebarMenuButton asChild>
                                  <a href={project.url}>
@@ -82,16 +82,12 @@ export default function AppSidebar() {
          <SidebarInset>
             <header className="flex h-12 items-center justify-between px-4">
                <Button
-                  onClick={() => setOpen(open => !open)}
+                  onClick={() => setOpen((open) => !open)}
                   size="sm"
                   variant="ghost"
                >
                   {open ? <PanelLeftClose /> : <PanelLeftOpen />}
-                  <span>
-                     {open ? 'Open' : 'Close'}
-                     {' '}
-                     Sidebar
-                  </span>
+                  <span>{open ? "Open" : "Close"} Sidebar</span>
                </Button>
             </header>
          </SidebarInset>
diff --git a/apps/web/__registry__/miami/block/demo-sidebar-footer.tsx b/apps/web/__registry__/miami/block/demo-sidebar-footer.tsx
index b7d56101..bfb481ab 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar-footer.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar-footer.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { ChevronDown, ChevronUp, User2 } from 'lucide-react'
+import { ChevronDown, ChevronUp, User2 } from "lucide-react"
 
 import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
+} from "~/registry/miami/ui/dropdown-menu"
 import {
    Sidebar,
    SidebarContent,
@@ -19,7 +19,7 @@ import {
    SidebarMenuItem,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 export default function AppSidebar() {
    return (
diff --git a/apps/web/__registry__/miami/block/demo-sidebar-group-action.tsx b/apps/web/__registry__/miami/block/demo-sidebar-group-action.tsx
index 3b299f62..686e3912 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar-group-action.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar-group-action.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client"
 
 import {
    ChevronDown,
@@ -8,8 +8,8 @@ import {
    PieChart,
    Plus,
    Send,
-} from 'lucide-react'
-import { Toaster, toast } from 'sonner'
+} from "lucide-react"
+import { Toaster, toast } from "sonner"
 
 import {
    Sidebar,
@@ -22,7 +22,7 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 export default function AppSidebar() {
    return (
@@ -30,7 +30,7 @@ export default function AppSidebar() {
          <Toaster
             position="bottom-left"
             toastOptions={{
-               className: 'ml-[160px]',
+               className: "ml-[160px]",
             }}
          />
          <Sidebar>
@@ -39,11 +39,9 @@ export default function AppSidebar() {
                   <SidebarGroupLabel>Projects</SidebarGroupLabel>
                   <SidebarGroupAction
                      title="Add Project"
-                     onClick={() => toast('You clicked the group action!')}
+                     onClick={() => toast("You clicked the group action!")}
                   >
-                     <Plus />
-                     {' '}
-                     <span className="sr-only">Add Project</span>
+                     <Plus /> <span className="sr-only">Add Project</span>
                   </SidebarGroupAction>
                   <SidebarGroupContent>
                      <SidebarMenu>
diff --git a/apps/web/__registry__/miami/block/demo-sidebar-group-collapsible.tsx b/apps/web/__registry__/miami/block/demo-sidebar-group-collapsible.tsx
index 56fbdec6..93761342 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar-group-collapsible.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar-group-collapsible.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import { ChevronDown, LifeBuoy, Send } from 'lucide-react'
+import { ChevronDown, LifeBuoy, Send } from "lucide-react"
 
 import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
+} from "~/registry/miami/ui/collapsible"
 import {
    Sidebar,
    SidebarContent,
@@ -17,7 +17,7 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 export default function AppSidebar() {
    return (
diff --git a/apps/web/__registry__/miami/block/demo-sidebar-group.tsx b/apps/web/__registry__/miami/block/demo-sidebar-group.tsx
index 1b4343f4..4ebf7b88 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar-group.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar-group.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { LifeBuoy, Send } from 'lucide-react'
+import { LifeBuoy, Send } from "lucide-react"
 
 import {
    Sidebar,
@@ -12,7 +12,7 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 export default function AppSidebar() {
    return (
diff --git a/apps/web/__registry__/miami/block/demo-sidebar-header.tsx b/apps/web/__registry__/miami/block/demo-sidebar-header.tsx
index aebe08af..b6cb9051 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar-header.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar-header.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { ChevronDown } from 'lucide-react'
+import { ChevronDown } from "lucide-react"
 
 import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
+} from "~/registry/miami/ui/dropdown-menu"
 import {
    Sidebar,
    SidebarHeader,
@@ -17,7 +17,7 @@ import {
    SidebarMenuItem,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 export default function AppSidebar() {
    return (
diff --git a/apps/web/__registry__/miami/block/demo-sidebar-menu-action.tsx b/apps/web/__registry__/miami/block/demo-sidebar-menu-action.tsx
index 80efff17..0b8de559 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar-menu-action.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar-menu-action.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client"
 
 import {
    Frame,
@@ -7,14 +7,14 @@ import {
    MoreHorizontal,
    PieChart,
    Send,
-} from 'lucide-react'
+} from "lucide-react"
 
 import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
+} from "~/registry/miami/ui/dropdown-menu"
 import {
    Sidebar,
    SidebarContent,
@@ -26,32 +26,32 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 const projects = [
    {
-      name: 'Design Engineering',
-      url: '#',
+      name: "Design Engineering",
+      url: "#",
       icon: Frame,
    },
    {
-      name: 'Sales & Marketing',
-      url: '#',
+      name: "Sales & Marketing",
+      url: "#",
       icon: PieChart,
    },
    {
-      name: 'Travel',
-      url: '#',
+      name: "Travel",
+      url: "#",
       icon: Map,
    },
    {
-      name: 'Support',
-      url: '#',
+      name: "Support",
+      url: "#",
       icon: LifeBuoy,
    },
    {
-      name: 'Feedback',
-      url: '#',
+      name: "Feedback",
+      url: "#",
       icon: Send,
    },
 ]
@@ -83,7 +83,10 @@ export default function AppSidebar() {
                                        <span className="sr-only">More</span>
                                     </SidebarMenuAction>
                                  </DropdownMenuTrigger>
-                                 <DropdownMenuContent side="right" align="start">
+                                 <DropdownMenuContent
+                                    side="right"
+                                    align="start"
+                                 >
                                     <DropdownMenuItem>
                                        <span>Edit Project</span>
                                     </DropdownMenuItem>
diff --git a/apps/web/__registry__/miami/block/demo-sidebar-menu-badge.tsx b/apps/web/__registry__/miami/block/demo-sidebar-menu-badge.tsx
index 4089d4d7..a77f5091 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar-menu-badge.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar-menu-badge.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-react'
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
 
 import {
    Sidebar,
@@ -13,38 +13,38 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 const projects = [
    {
-      name: 'Design Engineering',
-      url: '#',
+      name: "Design Engineering",
+      url: "#",
       icon: Frame,
-      badge: '24',
+      badge: "24",
    },
    {
-      name: 'Sales & Marketing',
-      url: '#',
+      name: "Sales & Marketing",
+      url: "#",
       icon: PieChart,
-      badge: '12',
+      badge: "12",
    },
    {
-      name: 'Travel',
-      url: '#',
+      name: "Travel",
+      url: "#",
       icon: Map,
-      badge: '3',
+      badge: "3",
    },
    {
-      name: 'Support',
-      url: '#',
+      name: "Support",
+      url: "#",
       icon: LifeBuoy,
-      badge: '21',
+      badge: "21",
    },
    {
-      name: 'Feedback',
-      url: '#',
+      name: "Feedback",
+      url: "#",
       icon: Send,
-      badge: '8',
+      badge: "8",
    },
 ]
 
@@ -57,7 +57,7 @@ export default function AppSidebar() {
                   <SidebarGroupLabel>Projects</SidebarGroupLabel>
                   <SidebarGroupContent>
                      <SidebarMenu>
-                        {projects.map(project => (
+                        {projects.map((project) => (
                            <SidebarMenuItem key={project.name}>
                               <SidebarMenuButton
                                  asChild
@@ -68,7 +68,9 @@ export default function AppSidebar() {
                                     <span>{project.name}</span>
                                  </a>
                               </SidebarMenuButton>
-                              <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>
+                              <SidebarMenuBadge>
+                                 {project.badge}
+                              </SidebarMenuBadge>
                            </SidebarMenuItem>
                         ))}
                      </SidebarMenu>
diff --git a/apps/web/__registry__/miami/block/demo-sidebar-menu-collapsible.tsx b/apps/web/__registry__/miami/block/demo-sidebar-menu-collapsible.tsx
index a24e3844..1afb6a99 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar-menu-collapsible.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar-menu-collapsible.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import { ChevronRight } from 'lucide-react'
+import { ChevronRight } from "lucide-react"
 
 import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
+} from "~/registry/miami/ui/collapsible"
 import {
    Sidebar,
    SidebarContent,
@@ -20,131 +20,131 @@ import {
    SidebarMenuSubButton,
    SidebarMenuSubItem,
    SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 const items = [
    {
-      title: 'Getting Started',
-      url: '#',
+      title: "Getting Started",
+      url: "#",
       items: [
          {
-            title: 'Installation',
-            url: '#',
+            title: "Installation",
+            url: "#",
          },
          {
-            title: 'Project Structure',
-            url: '#',
+            title: "Project Structure",
+            url: "#",
          },
       ],
    },
    {
-      title: 'Building Your Application',
-      url: '#',
+      title: "Building Your Application",
+      url: "#",
       items: [
          {
-            title: 'Routing',
-            url: '#',
+            title: "Routing",
+            url: "#",
          },
          {
-            title: 'Data Fetching',
-            url: '#',
+            title: "Data Fetching",
+            url: "#",
             isActive: true,
          },
          {
-            title: 'Rendering',
-            url: '#',
+            title: "Rendering",
+            url: "#",
          },
          {
-            title: 'Caching',
-            url: '#',
+            title: "Caching",
+            url: "#",
          },
          {
-            title: 'Styling',
-            url: '#',
+            title: "Styling",
+            url: "#",
          },
          {
-            title: 'Optimizing',
-            url: '#',
+            title: "Optimizing",
+            url: "#",
          },
          {
-            title: 'Configuring',
-            url: '#',
+            title: "Configuring",
+            url: "#",
          },
          {
-            title: 'Testing',
-            url: '#',
+            title: "Testing",
+            url: "#",
          },
          {
-            title: 'Authentication',
-            url: '#',
+            title: "Authentication",
+            url: "#",
          },
          {
-            title: 'Deploying',
-            url: '#',
+            title: "Deploying",
+            url: "#",
          },
          {
-            title: 'Upgrading',
-            url: '#',
+            title: "Upgrading",
+            url: "#",
          },
          {
-            title: 'Examples',
-            url: '#',
+            title: "Examples",
+            url: "#",
          },
       ],
    },
    {
-      title: 'API Reference',
-      url: '#',
+      title: "API Reference",
+      url: "#",
       items: [
          {
-            title: 'Components',
-            url: '#',
+            title: "Components",
+            url: "#",
          },
          {
-            title: 'File Conventions',
-            url: '#',
+            title: "File Conventions",
+            url: "#",
          },
          {
-            title: 'Functions',
-            url: '#',
+            title: "Functions",
+            url: "#",
          },
          {
-            title: 'next.config.js Options',
-            url: '#',
+            title: "next.config.js Options",
+            url: "#",
          },
          {
-            title: 'CLI',
-            url: '#',
+            title: "CLI",
+            url: "#",
          },
          {
-            title: 'Edge Runtime',
-            url: '#',
+            title: "Edge Runtime",
+            url: "#",
          },
       ],
    },
    {
-      title: 'Architecture',
-      url: '#',
+      title: "Architecture",
+      url: "#",
       items: [
          {
-            title: 'Accessibility',
-            url: '#',
+            title: "Accessibility",
+            url: "#",
          },
          {
-            title: 'Fast Refresh',
-            url: '#',
+            title: "Fast Refresh",
+            url: "#",
          },
          {
-            title: 'Next.js Compiler',
-            url: '#',
+            title: "Next.js Compiler",
+            url: "#",
          },
          {
-            title: 'Supported Browsers',
-            url: '#',
+            title: "Supported Browsers",
+            url: "#",
          },
          {
-            title: 'Turbopack',
-            url: '#',
+            title: "Turbopack",
+            url: "#",
          },
       ],
    },
diff --git a/apps/web/__registry__/miami/block/demo-sidebar-menu-sub.tsx b/apps/web/__registry__/miami/block/demo-sidebar-menu-sub.tsx
index 0c34069b..bb52bda0 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar-menu-sub.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar-menu-sub.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client"
 
 import {
    Sidebar,
@@ -12,131 +12,131 @@ import {
    SidebarMenuSubButton,
    SidebarMenuSubItem,
    SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 const items = [
    {
-      title: 'Getting Started',
-      url: '#',
+      title: "Getting Started",
+      url: "#",
       items: [
          {
-            title: 'Installation',
-            url: '#',
+            title: "Installation",
+            url: "#",
          },
          {
-            title: 'Project Structure',
-            url: '#',
+            title: "Project Structure",
+            url: "#",
          },
       ],
    },
    {
-      title: 'Building Your Application',
-      url: '#',
+      title: "Building Your Application",
+      url: "#",
       items: [
          {
-            title: 'Routing',
-            url: '#',
+            title: "Routing",
+            url: "#",
          },
          {
-            title: 'Data Fetching',
-            url: '#',
+            title: "Data Fetching",
+            url: "#",
             isActive: true,
          },
          {
-            title: 'Rendering',
-            url: '#',
+            title: "Rendering",
+            url: "#",
          },
          {
-            title: 'Caching',
-            url: '#',
+            title: "Caching",
+            url: "#",
          },
          {
-            title: 'Styling',
-            url: '#',
+            title: "Styling",
+            url: "#",
          },
          {
-            title: 'Optimizing',
-            url: '#',
+            title: "Optimizing",
+            url: "#",
          },
          {
-            title: 'Configuring',
-            url: '#',
+            title: "Configuring",
+            url: "#",
          },
          {
-            title: 'Testing',
-            url: '#',
+            title: "Testing",
+            url: "#",
          },
          {
-            title: 'Authentication',
-            url: '#',
+            title: "Authentication",
+            url: "#",
          },
          {
-            title: 'Deploying',
-            url: '#',
+            title: "Deploying",
+            url: "#",
          },
          {
-            title: 'Upgrading',
-            url: '#',
+            title: "Upgrading",
+            url: "#",
          },
          {
-            title: 'Examples',
-            url: '#',
+            title: "Examples",
+            url: "#",
          },
       ],
    },
    {
-      title: 'API Reference',
-      url: '#',
+      title: "API Reference",
+      url: "#",
       items: [
          {
-            title: 'Components',
-            url: '#',
+            title: "Components",
+            url: "#",
          },
          {
-            title: 'File Conventions',
-            url: '#',
+            title: "File Conventions",
+            url: "#",
          },
          {
-            title: 'Functions',
-            url: '#',
+            title: "Functions",
+            url: "#",
          },
          {
-            title: 'next.config.js Options',
-            url: '#',
+            title: "next.config.js Options",
+            url: "#",
          },
          {
-            title: 'CLI',
-            url: '#',
+            title: "CLI",
+            url: "#",
          },
          {
-            title: 'Edge Runtime',
-            url: '#',
+            title: "Edge Runtime",
+            url: "#",
          },
       ],
    },
    {
-      title: 'Architecture',
-      url: '#',
+      title: "Architecture",
+      url: "#",
       items: [
          {
-            title: 'Accessibility',
-            url: '#',
+            title: "Accessibility",
+            url: "#",
          },
          {
-            title: 'Fast Refresh',
-            url: '#',
+            title: "Fast Refresh",
+            url: "#",
          },
          {
-            title: 'Next.js Compiler',
-            url: '#',
+            title: "Next.js Compiler",
+            url: "#",
          },
          {
-            title: 'Supported Browsers',
-            url: '#',
+            title: "Supported Browsers",
+            url: "#",
          },
          {
-            title: 'Turbopack',
-            url: '#',
+            title: "Turbopack",
+            url: "#",
          },
       ],
    },
diff --git a/apps/web/__registry__/miami/block/demo-sidebar-menu.tsx b/apps/web/__registry__/miami/block/demo-sidebar-menu.tsx
index 4a49fe89..53c8742d 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar-menu.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar-menu.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-react'
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
 
 import {
    Sidebar,
@@ -12,32 +12,32 @@ import {
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 const projects = [
    {
-      name: 'Design Engineering',
-      url: '#',
+      name: "Design Engineering",
+      url: "#",
       icon: Frame,
    },
    {
-      name: 'Sales & Marketing',
-      url: '#',
+      name: "Sales & Marketing",
+      url: "#",
       icon: PieChart,
    },
    {
-      name: 'Travel',
-      url: '#',
+      name: "Travel",
+      url: "#",
       icon: Map,
    },
    {
-      name: 'Support',
-      url: '#',
+      name: "Support",
+      url: "#",
       icon: LifeBuoy,
    },
    {
-      name: 'Feedback',
-      url: '#',
+      name: "Feedback",
+      url: "#",
       icon: Send,
    },
 ]
@@ -51,7 +51,7 @@ export default function AppSidebar() {
                   <SidebarGroupLabel>Projects</SidebarGroupLabel>
                   <SidebarGroupContent>
                      <SidebarMenu>
-                        {projects.map(project => (
+                        {projects.map((project) => (
                            <SidebarMenuItem key={project.name}>
                               <SidebarMenuButton asChild>
                                  <a href={project.url}>
diff --git a/apps/web/__registry__/miami/block/demo-sidebar-rsc.tsx b/apps/web/__registry__/miami/block/demo-sidebar-rsc.tsx
index ff8ae417..b3322921 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar-rsc.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar-rsc.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
-import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-react'
+import * as React from "react"
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
 
 import {
    Sidebar,
@@ -12,44 +12,44 @@ import {
    SidebarMenuItem,
    SidebarMenuSkeleton,
    SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 const projects = [
    {
-      name: 'Design Engineering',
-      url: '#',
+      name: "Design Engineering",
+      url: "#",
       icon: Frame,
-      badge: '24',
+      badge: "24",
    },
    {
-      name: 'Sales & Marketing',
-      url: '#',
+      name: "Sales & Marketing",
+      url: "#",
       icon: PieChart,
-      badge: '12',
+      badge: "12",
    },
    {
-      name: 'Travel',
-      url: '#',
+      name: "Travel",
+      url: "#",
       icon: Map,
-      badge: '3',
+      badge: "3",
    },
    {
-      name: 'Support',
-      url: '#',
+      name: "Support",
+      url: "#",
       icon: LifeBuoy,
-      badge: '21',
+      badge: "21",
    },
    {
-      name: 'Feedback',
-      url: '#',
+      name: "Feedback",
+      url: "#",
       icon: Send,
-      badge: '8',
+      badge: "8",
    },
 ]
 
 // Dummy fetch function
 async function fetchProjects() {
-   await new Promise(resolve => setTimeout(resolve, 3000))
+   await new Promise((resolve) => setTimeout(resolve, 3000))
    return projects
 }
 
@@ -89,7 +89,7 @@ async function NavProjects() {
 
    return (
       <SidebarMenu>
-         {projects.map(project => (
+         {projects.map((project) => (
             <SidebarMenuItem key={project.name}>
                <SidebarMenuButton asChild>
                   <a href={project.url}>
diff --git a/apps/web/__registry__/miami/block/demo-sidebar.tsx b/apps/web/__registry__/miami/block/demo-sidebar.tsx
index 3ddca004..843edac6 100644
--- a/apps/web/__registry__/miami/block/demo-sidebar.tsx
+++ b/apps/web/__registry__/miami/block/demo-sidebar.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Calendar, Home, Inbox, Search, Settings } from 'lucide-react'
+import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
 
 import {
    Sidebar,
@@ -14,33 +14,33 @@ import {
    SidebarMenuItem,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
 // Menu items.
 const items = [
    {
-      title: 'Home',
-      url: '#',
+      title: "Home",
+      url: "#",
       icon: Home,
    },
    {
-      title: 'Inbox',
-      url: '#',
+      title: "Inbox",
+      url: "#",
       icon: Inbox,
    },
    {
-      title: 'Calendar',
-      url: '#',
+      title: "Calendar",
+      url: "#",
       icon: Calendar,
    },
    {
-      title: 'Search',
-      url: '#',
+      title: "Search",
+      url: "#",
       icon: Search,
    },
    {
-      title: 'Settings',
-      url: '#',
+      title: "Settings",
+      url: "#",
       icon: Settings,
    },
 ]
@@ -54,7 +54,7 @@ export default function AppSidebar() {
                   <SidebarGroupLabel>Application</SidebarGroupLabel>
                   <SidebarGroupContent>
                      <SidebarMenu>
-                        {items.map(item => (
+                        {items.map((item) => (
                            <SidebarMenuItem key={item.title}>
                               <SidebarMenuButton asChild>
                                  <a href={item.url}>
diff --git a/apps/web/__registry__/miami/block/login-01/page.tsx b/apps/web/__registry__/miami/block/login-01/page.tsx
index 82f8c2ac..4175419e 100644
--- a/apps/web/__registry__/miami/block/login-01/page.tsx
+++ b/apps/web/__registry__/miami/block/login-01/page.tsx
@@ -1,10 +1,10 @@
-import { LoginForm } from '~/registry/miami/block/login-01/components/login-form'
+import { LoginForm } from "~/registry/miami/block/login-01/components/login-form"
 
-export const description = 'A simple login form.'
+export const description = "A simple login form."
 
-export const iframeHeight = '870px'
+export const iframeHeight = "870px"
 
-export const containerClassName = 'w-full h-full'
+export const containerClassName = "w-full h-full"
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/block/sidebar-01/page.tsx b/apps/web/__registry__/miami/block/sidebar-01/page.tsx
index 4fe9e88b..fefc2215 100644
--- a/apps/web/__registry__/miami/block/sidebar-01/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-01/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-01/components/app-sidebar'
+import { AppSidebar } from "~/registry/miami/block/sidebar-01/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,18 +6,18 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description
-  = 'A simple sidebar with navigation grouped by section.'
+export const description =
+   "A simple sidebar with navigation grouped by section."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/block/sidebar-02/page.tsx b/apps/web/__registry__/miami/block/sidebar-02/page.tsx
index 7e2dfbf6..78b5d339 100644
--- a/apps/web/__registry__/miami/block/sidebar-02/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-02/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-02/components/app-sidebar'
+import { AppSidebar } from "~/registry/miami/block/sidebar-02/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar with collapsible sections.'
+export const description = "A sidebar with collapsible sections."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/block/sidebar-03/page.tsx b/apps/web/__registry__/miami/block/sidebar-03/page.tsx
index b39cf308..d9949c39 100644
--- a/apps/web/__registry__/miami/block/sidebar-03/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-03/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-03/components/app-sidebar'
+import { AppSidebar } from "~/registry/miami/block/sidebar-03/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar with submenus.'
+export const description = "A sidebar with submenus."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/block/sidebar-04/page.tsx b/apps/web/__registry__/miami/block/sidebar-04/page.tsx
index 475d6c24..59a63035 100644
--- a/apps/web/__registry__/miami/block/sidebar-04/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-04/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-04/components/app-sidebar'
+import { AppSidebar } from "~/registry/miami/block/sidebar-04/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,24 +6,24 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A floating sidebar with submenus.'
+export const description = "A floating sidebar with submenus."
 
 export default function Page() {
    return (
       <SidebarProvider
          style={
             {
-               '--sidebar-width': '19rem',
+               "--sidebar-width": "19rem",
             } as React.CSSProperties
          }
       >
diff --git a/apps/web/__registry__/miami/block/sidebar-05/page.tsx b/apps/web/__registry__/miami/block/sidebar-05/page.tsx
index 652c5884..d2f397ca 100644
--- a/apps/web/__registry__/miami/block/sidebar-05/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-05/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-05/components/app-sidebar'
+import { AppSidebar } from "~/registry/miami/block/sidebar-05/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar with collapsible submenus.'
+export const description = "A sidebar with collapsible submenus."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/block/sidebar-06/page.tsx b/apps/web/__registry__/miami/block/sidebar-06/page.tsx
index 1bcd5e8f..2c0dec3f 100644
--- a/apps/web/__registry__/miami/block/sidebar-06/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-06/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-06/components/app-sidebar'
+import { AppSidebar } from "~/registry/miami/block/sidebar-06/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar with submenus as dropdowns.'
+export const description = "A sidebar with submenus as dropdowns."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/block/sidebar-07/page.tsx b/apps/web/__registry__/miami/block/sidebar-07/page.tsx
index 95f38920..397ee819 100644
--- a/apps/web/__registry__/miami/block/sidebar-07/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-07/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-07/components/app-sidebar'
+import { AppSidebar } from "~/registry/miami/block/sidebar-07/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar that collapses to icons.'
+export const description = "A sidebar that collapses to icons."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/block/sidebar-08/page.tsx b/apps/web/__registry__/miami/block/sidebar-08/page.tsx
index b8a7fb6d..9af6dd13 100644
--- a/apps/web/__registry__/miami/block/sidebar-08/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-08/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-08/components/app-sidebar'
+import { AppSidebar } from "~/registry/miami/block/sidebar-08/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'An inset sidebar with secondary navigation.'
+export const description = "An inset sidebar with secondary navigation."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/block/sidebar-09/page.tsx b/apps/web/__registry__/miami/block/sidebar-09/page.tsx
index c24ae8f8..360d2d58 100644
--- a/apps/web/__registry__/miami/block/sidebar-09/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-09/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-09/components/app-sidebar'
+import { AppSidebar } from "~/registry/miami/block/sidebar-09/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,24 +6,24 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'Collapsible nested sidebars.'
+export const description = "Collapsible nested sidebars."
 
 export default function Page() {
    return (
       <SidebarProvider
          style={
             {
-               '--sidebar-width': '350px',
+               "--sidebar-width": "350px",
             } as React.CSSProperties
          }
       >
diff --git a/apps/web/__registry__/miami/block/sidebar-10/page.tsx b/apps/web/__registry__/miami/block/sidebar-10/page.tsx
index b101a814..50393732 100644
--- a/apps/web/__registry__/miami/block/sidebar-10/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-10/page.tsx
@@ -1,21 +1,21 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-10/components/app-sidebar'
-import { NavActions } from '~/registry/miami/block/sidebar-10/components/nav-actions'
+import { AppSidebar } from "~/registry/miami/block/sidebar-10/components/app-sidebar"
+import { NavActions } from "~/registry/miami/block/sidebar-10/components/nav-actions"
 import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbList,
    BreadcrumbPage,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar in a popover.'
+export const description = "A sidebar in a popover."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/block/sidebar-11/page.tsx b/apps/web/__registry__/miami/block/sidebar-11/page.tsx
index f0977c63..e43e33a3 100644
--- a/apps/web/__registry__/miami/block/sidebar-11/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-11/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-11/components/app-sidebar'
+import { AppSidebar } from "~/registry/miami/block/sidebar-11/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,17 +6,17 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar with a collapsible file tree.'
+export const description = "A sidebar with a collapsible file tree."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/block/sidebar-12/page.tsx b/apps/web/__registry__/miami/block/sidebar-12/page.tsx
index 58db9716..366f8199 100644
--- a/apps/web/__registry__/miami/block/sidebar-12/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-12/page.tsx
@@ -1,20 +1,20 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-12/components/app-sidebar'
+import { AppSidebar } from "~/registry/miami/block/sidebar-12/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbList,
    BreadcrumbPage,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar with a calendar.'
+export const description = "A sidebar with a calendar."
 
 export default function Page() {
    return (
@@ -35,7 +35,10 @@ export default function Page() {
             <div className="flex flex-1 flex-col gap-4 p-4">
                <div className="grid auto-rows-min gap-4 md:grid-cols-5">
                   {Array.from({ length: 20 }).map((_, i) => (
-                     <div key={i} className="bg-muted/50 aspect-square rounded-xl" />
+                     <div
+                        key={i}
+                        className="bg-muted/50 aspect-square rounded-xl"
+                     />
                   ))}
                </div>
             </div>
diff --git a/apps/web/__registry__/miami/block/sidebar-13/page.tsx b/apps/web/__registry__/miami/block/sidebar-13/page.tsx
index fe8f0402..f4578ba1 100644
--- a/apps/web/__registry__/miami/block/sidebar-13/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-13/page.tsx
@@ -1,8 +1,8 @@
-import { SettingsDialog } from '~/registry/miami/block/sidebar-13/components/settings-dialog'
+import { SettingsDialog } from "~/registry/miami/block/sidebar-13/components/settings-dialog"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar in a dialog.'
+export const description = "A sidebar in a dialog."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/block/sidebar-14/page.tsx b/apps/web/__registry__/miami/block/sidebar-14/page.tsx
index 0d205792..1d6bd0f2 100644
--- a/apps/web/__registry__/miami/block/sidebar-14/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-14/page.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-14/components/app-sidebar'
+import { AppSidebar } from "~/registry/miami/block/sidebar-14/components/app-sidebar"
 import {
    Breadcrumb,
    BreadcrumbItem,
@@ -6,16 +6,16 @@ import {
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
+} from "~/registry/miami/ui/breadcrumb"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A sidebar on the right.'
+export const description = "A sidebar on the right."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/block/sidebar-15/page.tsx b/apps/web/__registry__/miami/block/sidebar-15/page.tsx
index 4c409dcf..bc49d9c1 100644
--- a/apps/web/__registry__/miami/block/sidebar-15/page.tsx
+++ b/apps/web/__registry__/miami/block/sidebar-15/page.tsx
@@ -1,21 +1,21 @@
-import { SidebarLeft } from '~/registry/miami/block/sidebar-15/components/sidebar-left'
-import { SidebarRight } from '~/registry/miami/block/sidebar-15/components/sidebar-right'
+import { SidebarLeft } from "~/registry/miami/block/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "~/registry/miami/block/sidebar-15/components/sidebar-right"
 import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbList,
    BreadcrumbPage,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
+} from "~/registry/miami/ui/sidebar"
 
-export const iframeHeight = '800px'
+export const iframeHeight = "800px"
 
-export const description = 'A left and right sidebar.'
+export const description = "A left and right sidebar."
 
 export default function Page() {
    return (
diff --git a/apps/web/__registry__/miami/blocks/login-01/page.tsx b/apps/web/__registry__/miami/blocks/login-01/page.tsx
new file mode 100644
index 00000000..7278bb4b
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/login-01/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "~/registry/miami/blocks/login-01/components/login-form"
+
+export default function Page() {
+   return (
+      <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+         <div className="w-full max-w-sm">
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/login-02/page.tsx b/apps/web/__registry__/miami/blocks/login-02/page.tsx
new file mode 100644
index 00000000..96babd35
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/login-02/page.tsx
@@ -0,0 +1,32 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "~/registry/miami/blocks/login-02/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="grid min-h-svh lg:grid-cols-2">
+         <div className="flex flex-col gap-4 p-6 md:p-10">
+            <div className="flex justify-center gap-2 md:justify-start">
+               <a href="#" className="flex items-center gap-2 font-medium">
+                  <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+                     <GalleryVerticalEnd className="size-4" />
+                  </div>
+                  Acme Inc.
+               </a>
+            </div>
+            <div className="flex flex-1 items-center justify-center">
+               <div className="w-full max-w-xs">
+                  <LoginForm />
+               </div>
+            </div>
+         </div>
+         <div className="relative hidden bg-muted lg:block">
+            <img
+               src="/placeholder.svg"
+               alt="Image"
+               className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+            />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/login-03/page.tsx b/apps/web/__registry__/miami/blocks/login-03/page.tsx
new file mode 100644
index 00000000..ebd0938c
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/login-03/page.tsx
@@ -0,0 +1,22 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "~/registry/miami/blocks/login-03/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+         <div className="flex w-full max-w-sm flex-col gap-6">
+            <a
+               href="#"
+               className="flex items-center gap-2 self-center font-medium"
+            >
+               <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+               </div>
+               Acme Inc.
+            </a>
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/login-04/page.tsx b/apps/web/__registry__/miami/blocks/login-04/page.tsx
new file mode 100644
index 00000000..5512ae30
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/login-04/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "~/registry/miami/blocks/login-04/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+         <div className="w-full max-w-sm md:max-w-3xl">
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/login-05/page.tsx b/apps/web/__registry__/miami/blocks/login-05/page.tsx
new file mode 100644
index 00000000..11cadf68
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/login-05/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "~/registry/miami/blocks/login-05/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+         <div className="w-full max-w-sm">
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-01/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000..07a23e91
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-01/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-01/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-02/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000..ca95d0ab
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-02/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-02/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               {Array.from({ length: 24 }).map((_, index) => (
+                  <div
+                     key={index}
+                     className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                  />
+               ))}
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-03/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000..dfbbbe61
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-03/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-03/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+               <div className="flex items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-04/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000..fcd531c6
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-04/page.tsx
@@ -0,0 +1,56 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-04/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider
+         style={
+            {
+               "--sidebar-width": "19rem",
+            } as React.CSSProperties
+         }
+      >
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-05/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000..2877811b
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-05/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-05/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-06/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000..a754e431
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-06/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-06/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-07/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000..a8819cc4
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-07/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-07/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-08/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000..fe9a3a3b
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-08/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-08/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-09/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000..094ad2dc
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-09/page.tsx
@@ -0,0 +1,54 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-09/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider
+         style={
+            {
+               "--sidebar-width": "350px",
+            } as React.CSSProperties
+         }
+      >
+         <AppSidebar />
+         <SidebarInset>
+            <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Inbox</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               {Array.from({ length: 24 }).map((_, index) => (
+                  <div
+                     key={index}
+                     className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                  />
+               ))}
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-10/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000..852aec2d
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-10/page.tsx
@@ -0,0 +1,46 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-10/components/app-sidebar"
+import { NavActions } from "~/registry/miami/blocks/sidebar-10/components/nav-actions"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-14 shrink-0 items-center gap-2">
+               <div className="flex flex-1 items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem>
+                           <BreadcrumbPage className="line-clamp-1">
+                              Project Management & Task Tracking
+                           </BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+               <div className="ml-auto px-3">
+                  <NavActions />
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+               <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+               <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-11/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000..aa1c0fa5
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-11/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-11/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">components</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">ui</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>button.tsx</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-12/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000..442fec4a
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-12/page.tsx
@@ -0,0 +1,44 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-12/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>October 2024</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+                  {Array.from({ length: 20 }).map((_, i) => (
+                     <div
+                        key={i}
+                        className="aspect-square rounded-xl bg-muted/50"
+                     />
+                  ))}
+               </div>
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-13/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000..b77c9783
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-13/page.tsx
@@ -0,0 +1,9 @@
+import { SettingsDialog } from "~/registry/miami/blocks/sidebar-13/components/settings-dialog"
+
+export default function Page() {
+   return (
+      <div className="flex h-svh items-center justify-center">
+         <SettingsDialog />
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-14/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000..31e89b6c
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-14/page.tsx
@@ -0,0 +1,48 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-14/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+               <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+         <AppSidebar side="right" />
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-15/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000..2c891896
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-15/page.tsx
@@ -0,0 +1,44 @@
+import { SidebarLeft } from "~/registry/miami/blocks/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "~/registry/miami/blocks/sidebar-15/components/sidebar-right"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <SidebarLeft />
+         <SidebarInset>
+            <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+               <div className="flex flex-1 items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem>
+                           <BreadcrumbPage className="line-clamp-1">
+                              Project Management & Task Tracking
+                           </BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+               <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+            </div>
+         </SidebarInset>
+         <SidebarRight />
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/__registry__/miami/blocks/sidebar-16/page.tsx b/apps/web/__registry__/miami/blocks/sidebar-16/page.tsx
new file mode 100644
index 00000000..301f91f1
--- /dev/null
+++ b/apps/web/__registry__/miami/blocks/sidebar-16/page.tsx
@@ -0,0 +1,30 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-16/components/app-sidebar"
+import { SiteHeader } from "~/registry/miami/blocks/sidebar-16/components/site-header"
+import { SidebarInset, SidebarProvider } from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a header and a search form."
+
+export default function Page() {
+   return (
+      <div className="[--header-height:calc(theme(spacing.14))]">
+         <SidebarProvider className="flex flex-col">
+            <SiteHeader />
+            <div className="flex flex-1">
+               <AppSidebar />
+               <SidebarInset>
+                  <div className="flex flex-1 flex-col gap-4 p-4">
+                     <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                        <div className="aspect-video rounded-xl bg-muted/50" />
+                        <div className="aspect-video rounded-xl bg-muted/50" />
+                        <div className="aspect-video rounded-xl bg-muted/50" />
+                     </div>
+                     <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+                  </div>
+               </SidebarInset>
+            </div>
+         </SidebarProvider>
+      </div>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-area-axes.tsx b/apps/web/__registry__/miami/charts/chart-area-axes.tsx
new file mode 100644
index 00000000..92194485
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-area-axes.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An area chart with axes"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Axes</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: -20,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <YAxis
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickCount={3}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-area-default.tsx b/apps/web/__registry__/miami/charts/chart-area-default.tsx
new file mode 100644
index 00000000..164c3c50
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-area-default.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A simple area chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-area-gradient.tsx b/apps/web/__registry__/miami/charts/chart-area-gradient.tsx
new file mode 100644
index 00000000..dcd8e9ec
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-area-gradient.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An area chart with gradient fill"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Gradient</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <defs>
+                     <linearGradient
+                        id="fillDesktop"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                     <linearGradient
+                        id="fillMobile"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                  </defs>
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="url(#fillMobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="url(#fillDesktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-area-icons.tsx b/apps/web/__registry__/miami/charts/chart-area-icons.tsx
new file mode 100644
index 00000000..9cd82054
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-area-icons.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { TrendingDown, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An area chart with icons"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+      icon: TrendingDown,
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+      icon: TrendingUp,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Icons</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-area-interactive.tsx b/apps/web/__registry__/miami/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000..8a4db42e
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-area-interactive.tsx
@@ -0,0 +1,281 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const [timeRange, setTimeRange] = React.useState("90d")
+
+   const filteredData = chartData.filter((item) => {
+      const date = new Date(item.date)
+      const referenceDate = new Date("2024-06-30")
+      let daysToSubtract = 90
+      if (timeRange === "30d") {
+         daysToSubtract = 30
+      } else if (timeRange === "7d") {
+         daysToSubtract = 7
+      }
+      const startDate = new Date(referenceDate)
+      startDate.setDate(startDate.getDate() - daysToSubtract)
+      return date >= startDate
+   })
+
+   return (
+      <Card>
+         <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
+            <div className="grid flex-1 gap-1 text-center sm:text-left">
+               <CardTitle>Area Chart - Interactive</CardTitle>
+               <CardDescription>
+                  Showing total visitors for the last 3 months
+               </CardDescription>
+            </div>
+            <Select value={timeRange} onValueChange={setTimeRange}>
+               <SelectTrigger
+                  className="w-[160px] rounded-lg sm:ml-auto"
+                  aria-label="Select a value"
+               >
+                  <SelectValue placeholder="Last 3 months" />
+               </SelectTrigger>
+               <SelectContent className="rounded-xl">
+                  <SelectItem value="90d" className="rounded-lg">
+                     Last 3 months
+                  </SelectItem>
+                  <SelectItem value="30d" className="rounded-lg">
+                     Last 30 days
+                  </SelectItem>
+                  <SelectItem value="7d" className="rounded-lg">
+                     Last 7 days
+                  </SelectItem>
+               </SelectContent>
+            </Select>
+         </CardHeader>
+         <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+            <ChartContainer
+               config={chartConfig}
+               className="aspect-auto h-[250px] w-full"
+            >
+               <AreaChart data={filteredData}>
+                  <defs>
+                     <linearGradient
+                        id="fillDesktop"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                     <linearGradient
+                        id="fillMobile"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                  </defs>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     minTickGap={32}
+                     tickFormatter={(value) => {
+                        const date = new Date(value)
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
+                        })
+                     }}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                 },
+                              )
+                           }}
+                           indicator="dot"
+                        />
+                     }
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="url(#fillMobile)"
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="url(#fillDesktop)"
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-area-legend.tsx b/apps/web/__registry__/miami/charts/chart-area-legend.tsx
new file mode 100644
index 00000000..d6c2f912
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-area-legend.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An area chart with a legend"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Legend</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-area-linear.tsx b/apps/web/__registry__/miami/charts/chart-area-linear.tsx
new file mode 100644
index 00000000..876f0a01
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-area-linear.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A linear area chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Linear</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="dot" hideLabel />}
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="linear"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-area-stacked-expand.tsx b/apps/web/__registry__/miami/charts/chart-area-stacked-expand.tsx
new file mode 100644
index 00000000..52fa57ac
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-area-stacked-expand.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked area chart with expand stacking"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80, other: 45 },
+   { month: "February", desktop: 305, mobile: 200, other: 100 },
+   { month: "March", desktop: 237, mobile: 120, other: 150 },
+   { month: "April", desktop: 73, mobile: 190, other: 50 },
+   { month: "May", desktop: 209, mobile: 130, other: 100 },
+   { month: "June", desktop: 214, mobile: 140, other: 160 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-3))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Stacked Expanded</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                     top: 12,
+                  }}
+                  stackOffset="expand"
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="other"
+                     type="natural"
+                     fill="var(--color-other)"
+                     fillOpacity={0.1}
+                     stroke="var(--color-other)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-area-stacked.tsx b/apps/web/__registry__/miami/charts/chart-area-stacked.tsx
new file mode 100644
index 00000000..479c34da
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-area-stacked.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked area chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Stacked</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="dot" />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-area-step.tsx b/apps/web/__registry__/miami/charts/chart-area-step.tsx
new file mode 100644
index 00000000..f1e9d853
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-area-step.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { Activity, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A step area chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+      icon: Activity,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Step</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="step"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-bar-active.tsx b/apps/web/__registry__/miami/charts/chart-bar-active.tsx
new file mode 100644
index 00000000..0e7dc223
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-bar-active.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart with an active bar"
+
+const chartData = [
+   { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Active</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="browser"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) =>
+                        chartConfig[value as keyof typeof chartConfig]?.label
+                     }
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                     dataKey="visitors"
+                     strokeWidth={2}
+                     radius={8}
+                     activeIndex={2}
+                     activeBar={({ ...props }) => {
+                        return (
+                           <Rectangle
+                              {...props}
+                              fillOpacity={0.8}
+                              stroke={props.payload.fill}
+                              strokeDasharray={4}
+                              strokeDashoffset={4}
+                           />
+                        )
+                     }}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-bar-default.tsx b/apps/web/__registry__/miami/charts/chart-bar-default.tsx
new file mode 100644
index 00000000..16453837
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-bar-default.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={8}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-bar-horizontal.tsx b/apps/web/__registry__/miami/charts/chart-bar-horizontal.tsx
new file mode 100644
index 00000000..e89feb3d
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-bar-horizontal.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A horizontal bar chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Horizontal</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  layout="vertical"
+                  margin={{
+                     left: -20,
+                  }}
+               >
+                  <XAxis type="number" dataKey="desktop" hide />
+                  <YAxis
+                     dataKey="month"
+                     type="category"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={5}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-bar-interactive.tsx b/apps/web/__registry__/miami/charts/chart-bar-interactive.tsx
new file mode 100644
index 00000000..f23caccf
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-bar-interactive.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An interactive bar chart"
+
+const chartData = [
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+   views: {
+      label: "Page Views",
+   },
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const [activeChart, setActiveChart] =
+      React.useState<keyof typeof chartConfig>("desktop")
+
+   const total = React.useMemo(
+      () => ({
+         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+      }),
+      [],
+   )
+
+   return (
+      <Card>
+         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+            <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+               <CardTitle>Bar Chart - Interactive</CardTitle>
+               <CardDescription>
+                  Showing total visitors for the last 3 months
+               </CardDescription>
+            </div>
+            <div className="flex">
+               {["desktop", "mobile"].map((key) => {
+                  const chart = key as keyof typeof chartConfig
+                  return (
+                     <button
+                        key={chart}
+                        data-active={activeChart === chart}
+                        className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                        onClick={() => setActiveChart(chart)}
+                     >
+                        <span className="text-xs text-muted-foreground">
+                           {chartConfig[chart].label}
+                        </span>
+                        <span className="text-lg font-bold leading-none sm:text-3xl">
+                           {total[key as keyof typeof total].toLocaleString()}
+                        </span>
+                     </button>
+                  )
+               })}
+            </div>
+         </CardHeader>
+         <CardContent className="px-2 sm:p-6">
+            <ChartContainer
+               config={chartConfig}
+               className="aspect-auto h-[250px] w-full"
+            >
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     minTickGap={32}
+                     tickFormatter={(value) => {
+                        const date = new Date(value)
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
+                        })
+                     }}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           className="w-[150px]"
+                           nameKey="views"
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                 },
+                              )
+                           }}
+                        />
+                     }
+                  />
+                  <Bar
+                     dataKey={activeChart}
+                     fill={`var(--color-${activeChart})`}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-bar-label-custom.tsx b/apps/web/__registry__/miami/charts/chart-bar-label-custom.tsx
new file mode 100644
index 00000000..3abee3e1
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-bar-label-custom.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart with a custom label"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+   label: {
+      color: "hsl(var(--background))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Custom Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  layout="vertical"
+                  margin={{
+                     right: 16,
+                  }}
+               >
+                  <CartesianGrid horizontal={false} />
+                  <YAxis
+                     dataKey="month"
+                     type="category"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                     hide
+                  />
+                  <XAxis dataKey="desktop" type="number" hide />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     layout="vertical"
+                     fill="var(--color-desktop)"
+                     radius={4}
+                  >
+                     <LabelList
+                        dataKey="month"
+                        position="insideLeft"
+                        offset={8}
+                        className="fill-[--color-label]"
+                        fontSize={12}
+                     />
+                     <LabelList
+                        dataKey="desktop"
+                        position="right"
+                        offset={8}
+                        className="fill-foreground"
+                        fontSize={12}
+                     />
+                  </Bar>
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-bar-label.tsx b/apps/web/__registry__/miami/charts/chart-bar-label.tsx
new file mode 100644
index 00000000..ca006fdb
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-bar-label.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart with a label"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 20,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
+                     <LabelList
+                        position="top"
+                        offset={12}
+                        className="fill-foreground"
+                        fontSize={12}
+                     />
+                  </Bar>
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-bar-mixed.tsx b/apps/web/__registry__/miami/charts/chart-bar-mixed.tsx
new file mode 100644
index 00000000..56bde747
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-bar-mixed.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A mixed bar chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Mixed</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  layout="vertical"
+                  margin={{
+                     left: 0,
+                  }}
+               >
+                  <YAxis
+                     dataKey="browser"
+                     type="category"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) =>
+                        chartConfig[value as keyof typeof chartConfig]?.label
+                     }
+                  />
+                  <XAxis dataKey="visitors" type="number" hide />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar dataKey="visitors" layout="vertical" radius={5} />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-bar-multiple.tsx b/apps/web/__registry__/miami/charts/chart-bar-multiple.tsx
new file mode 100644
index 00000000..3fec4b70
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-bar-multiple.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A multiple bar chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Multiple</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="dashed" />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={4}
+                  />
+                  <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-bar-negative.tsx b/apps/web/__registry__/miami/charts/chart-bar-negative.tsx
new file mode 100644
index 00000000..7078443a
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-bar-negative.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart with negative values"
+
+const chartData = [
+   { month: "January", visitors: 186 },
+   { month: "February", visitors: 205 },
+   { month: "March", visitors: -207 },
+   { month: "April", visitors: 173 },
+   { month: "May", visitors: -209 },
+   { month: "June", visitors: 214 },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Negative</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel hideIndicator />}
+                  />
+                  <Bar dataKey="visitors">
+                     <LabelList
+                        position="top"
+                        dataKey="month"
+                        fillOpacity={1}
+                     />
+                     {chartData.map((item) => (
+                        <Cell
+                           key={item.month}
+                           fill={
+                              item.visitors > 0
+                                 ? "hsl(var(--chart-1))"
+                                 : "hsl(var(--chart-2))"
+                           }
+                        />
+                     ))}
+                  </Bar>
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-bar-stacked.tsx b/apps/web/__registry__/miami/charts/chart-bar-stacked.tsx
new file mode 100644
index 00000000..ff9a0b58
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-bar-stacked.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Stacked + Legend</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+                  <ChartLegend content={<ChartLegendContent />} />
+                  <Bar
+                     dataKey="desktop"
+                     stackId="a"
+                     fill="var(--color-desktop)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="mobile"
+                     stackId="a"
+                     fill="var(--color-mobile)"
+                     radius={[4, 4, 0, 0]}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-line-default.tsx b/apps/web/__registry__/miami/charts/chart-line-default.tsx
new file mode 100644
index 00000000..ab335c1c
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-line-default.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-line-dots-colors.tsx b/apps/web/__registry__/miami/charts/chart-line-dots-colors.tsx
new file mode 100644
index 00000000..c2cef299
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-line-dots-colors.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Dot, Line, LineChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with dots and colors"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+      color: "hsl(var(--chart-2))",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Dots Colors</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 24,
+                     left: 24,
+                     right: 24,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           indicator="line"
+                           nameKey="visitors"
+                           hideLabel
+                        />
+                     }
+                  />
+                  <Line
+                     dataKey="visitors"
+                     type="natural"
+                     stroke="var(--color-visitors)"
+                     strokeWidth={2}
+                     dot={({ payload, ...props }) => {
+                        return (
+                           <Dot
+                              key={payload.browser}
+                              r={5}
+                              cx={props.cx}
+                              cy={props.cy}
+                              fill={payload.fill}
+                              stroke={payload.fill}
+                           />
+                        )
+                     }}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-line-dots-custom.tsx b/apps/web/__registry__/miami/charts/chart-line-dots-custom.tsx
new file mode 100644
index 00000000..362dd1ce
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-line-dots-custom.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { GitCommitVertical, TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with custom dots"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Custom Dots</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={({ cx, cy, payload }) => {
+                        const r = 24
+                        return (
+                           <GitCommitVertical
+                              key={payload.month}
+                              x={cx - r / 2}
+                              y={cy - r / 2}
+                              width={r}
+                              height={r}
+                              fill="hsl(var(--background))"
+                              stroke="var(--color-desktop)"
+                           />
+                        )
+                     }}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-line-dots.tsx b/apps/web/__registry__/miami/charts/chart-line-dots.tsx
new file mode 100644
index 00000000..b41afc1c
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-line-dots.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with dots"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Dots</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={{
+                        fill: "var(--color-desktop)",
+                     }}
+                     activeDot={{
+                        r: 6,
+                     }}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-line-interactive.tsx b/apps/web/__registry__/miami/charts/chart-line-interactive.tsx
new file mode 100644
index 00000000..3fb317b9
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-line-interactive.tsx
@@ -0,0 +1,230 @@
+"use client"
+
+import * as React from "react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An interactive line chart"
+
+const chartData = [
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+   views: {
+      label: "Page Views",
+   },
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const [activeChart, setActiveChart] =
+      React.useState<keyof typeof chartConfig>("desktop")
+
+   const total = React.useMemo(
+      () => ({
+         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+      }),
+      [],
+   )
+
+   return (
+      <Card>
+         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+            <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+               <CardTitle>Line Chart - Interactive</CardTitle>
+               <CardDescription>
+                  Showing total visitors for the last 3 months
+               </CardDescription>
+            </div>
+            <div className="flex">
+               {["desktop", "mobile"].map((key) => {
+                  const chart = key as keyof typeof chartConfig
+                  return (
+                     <button
+                        key={chart}
+                        data-active={activeChart === chart}
+                        className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                        onClick={() => setActiveChart(chart)}
+                     >
+                        <span className="text-xs text-muted-foreground">
+                           {chartConfig[chart].label}
+                        </span>
+                        <span className="text-lg font-bold leading-none sm:text-3xl">
+                           {total[key as keyof typeof total].toLocaleString()}
+                        </span>
+                     </button>
+                  )
+               })}
+            </div>
+         </CardHeader>
+         <CardContent className="px-2 sm:p-6">
+            <ChartContainer
+               config={chartConfig}
+               className="aspect-auto h-[250px] w-full"
+            >
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     minTickGap={32}
+                     tickFormatter={(value) => {
+                        const date = new Date(value)
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
+                        })
+                     }}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           className="w-[150px]"
+                           nameKey="views"
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                 },
+                              )
+                           }}
+                        />
+                     }
+                  />
+                  <Line
+                     dataKey={activeChart}
+                     type="monotone"
+                     stroke={`var(--color-${activeChart})`}
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-line-label-custom.tsx b/apps/web/__registry__/miami/charts/chart-line-label-custom.tsx
new file mode 100644
index 00000000..08f26a4e
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-line-label-custom.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with a custom label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+      color: "hsl(var(--chart-2))",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Custom Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 24,
+                     left: 24,
+                     right: 24,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           indicator="line"
+                           nameKey="visitors"
+                           hideLabel
+                        />
+                     }
+                  />
+                  <Line
+                     dataKey="visitors"
+                     type="natural"
+                     stroke="var(--color-visitors)"
+                     strokeWidth={2}
+                     dot={{
+                        fill: "var(--color-visitors)",
+                     }}
+                     activeDot={{
+                        r: 6,
+                     }}
+                  >
+                     <LabelList
+                        position="top"
+                        offset={12}
+                        className="fill-foreground"
+                        fontSize={12}
+                        dataKey="browser"
+                        formatter={(value: keyof typeof chartConfig) =>
+                           chartConfig[value]?.label
+                        }
+                     />
+                  </Line>
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-line-label.tsx b/apps/web/__registry__/miami/charts/chart-line-label.tsx
new file mode 100644
index 00000000..3ae88b1f
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-line-label.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with a label"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 20,
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={{
+                        fill: "var(--color-desktop)",
+                     }}
+                     activeDot={{
+                        r: 6,
+                     }}
+                  >
+                     <LabelList
+                        position="top"
+                        offset={12}
+                        className="fill-foreground"
+                        fontSize={12}
+                     />
+                  </Line>
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-line-linear.tsx b/apps/web/__registry__/miami/charts/chart-line-linear.tsx
new file mode 100644
index 00000000..eec8e1a0
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-line-linear.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A linear line chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Linear</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="linear"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-line-multiple.tsx b/apps/web/__registry__/miami/charts/chart-line-multiple.tsx
new file mode 100644
index 00000000..7bfcafc6
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-line-multiple.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A multiple line chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Multiple</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="monotone"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+                  <Line
+                     dataKey="mobile"
+                     type="monotone"
+                     stroke="var(--color-mobile)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     Showing total visitors for the last 6 months
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-line-step.tsx b/apps/web/__registry__/miami/charts/chart-line-step.tsx
new file mode 100644
index 00000000..9b0c7657
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-line-step.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with step"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Step</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="step"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-pie-donut-active.tsx b/apps/web/__registry__/miami/charts/chart-pie-donut-active.tsx
new file mode 100644
index 00000000..9517f7d5
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-pie-donut-active.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import type { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A donut chart with an active sector"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Donut Active</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     innerRadius={60}
+                     strokeWidth={5}
+                     activeIndex={0}
+                     activeShape={({
+                        outerRadius = 0,
+                        ...props
+                     }: PieSectorDataItem) => (
+                        <Sector {...props} outerRadius={outerRadius + 10} />
+                     )}
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-pie-donut-text.tsx b/apps/web/__registry__/miami/charts/chart-pie-donut-text.tsx
new file mode 100644
index 00000000..1417bb1d
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-pie-donut-text.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import * as React from "react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A donut chart with text"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 190, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const totalVisitors = React.useMemo(() => {
+      return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+   }, [])
+
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Donut with Text</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     innerRadius={60}
+                     strokeWidth={5}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-3xl font-bold"
+                                    >
+                                       {totalVisitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </Pie>
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-pie-donut.tsx b/apps/web/__registry__/miami/charts/chart-pie-donut.tsx
new file mode 100644
index 00000000..267d1b3e
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-pie-donut.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A donut chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Donut</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     innerRadius={60}
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-pie-interactive.tsx b/apps/web/__registry__/miami/charts/chart-pie-interactive.tsx
new file mode 100644
index 00000000..fffa4349
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-pie-interactive.tsx
@@ -0,0 +1,194 @@
+"use client"
+
+import * as React from "react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import type { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartStyle,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export const description = "An interactive pie chart"
+
+const desktopData = [
+   { month: "january", desktop: 186, fill: "var(--color-january)" },
+   { month: "february", desktop: 305, fill: "var(--color-february)" },
+   { month: "march", desktop: 237, fill: "var(--color-march)" },
+   { month: "april", desktop: 173, fill: "var(--color-april)" },
+   { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   desktop: {
+      label: "Desktop",
+   },
+   mobile: {
+      label: "Mobile",
+   },
+   january: {
+      label: "January",
+      color: "hsl(var(--chart-1))",
+   },
+   february: {
+      label: "February",
+      color: "hsl(var(--chart-2))",
+   },
+   march: {
+      label: "March",
+      color: "hsl(var(--chart-3))",
+   },
+   april: {
+      label: "April",
+      color: "hsl(var(--chart-4))",
+   },
+   may: {
+      label: "May",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const id = "pie-interactive"
+   const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
+
+   const activeIndex = React.useMemo(
+      () => desktopData.findIndex((item) => item.month === activeMonth),
+      [activeMonth],
+   )
+   const months = React.useMemo(() => desktopData.map((item) => item.month), [])
+
+   return (
+      <Card data-chart={id} className="flex flex-col">
+         <ChartStyle id={id} config={chartConfig} />
+         <CardHeader className="flex-row items-start space-y-0 pb-0">
+            <div className="grid gap-1">
+               <CardTitle>Pie Chart - Interactive</CardTitle>
+               <CardDescription>January - June 2024</CardDescription>
+            </div>
+            <Select value={activeMonth} onValueChange={setActiveMonth}>
+               <SelectTrigger
+                  className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
+                  aria-label="Select a value"
+               >
+                  <SelectValue placeholder="Select month" />
+               </SelectTrigger>
+               <SelectContent align="end" className="rounded-xl">
+                  {months.map((key) => {
+                     const config = chartConfig[key as keyof typeof chartConfig]
+
+                     if (!config) {
+                        return null
+                     }
+
+                     return (
+                        <SelectItem
+                           key={key}
+                           value={key}
+                           className="rounded-lg [&_span]:flex"
+                        >
+                           <div className="flex items-center gap-2 text-xs">
+                              <span
+                                 className="flex h-3 w-3 shrink-0 rounded-sm"
+                                 style={{
+                                    backgroundColor: `var(--color-${key})`,
+                                 }}
+                              />
+                              {config?.label}
+                           </div>
+                        </SelectItem>
+                     )
+                  })}
+               </SelectContent>
+            </Select>
+         </CardHeader>
+         <CardContent className="flex flex-1 justify-center pb-0">
+            <ChartContainer
+               id={id}
+               config={chartConfig}
+               className="mx-auto aspect-square w-full max-w-[300px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={desktopData}
+                     dataKey="desktop"
+                     nameKey="month"
+                     innerRadius={60}
+                     strokeWidth={5}
+                     activeIndex={activeIndex}
+                     activeShape={({
+                        outerRadius = 0,
+                        ...props
+                     }: PieSectorDataItem) => (
+                        <g>
+                           <Sector {...props} outerRadius={outerRadius + 10} />
+                           <Sector
+                              {...props}
+                              outerRadius={outerRadius + 25}
+                              innerRadius={outerRadius + 12}
+                           />
+                        </g>
+                     )}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-3xl font-bold"
+                                    >
+                                       {desktopData[
+                                          activeIndex
+                                       ].desktop.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </Pie>
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-pie-label-custom.tsx b/apps/web/__registry__/miami/charts/chart-pie-label-custom.tsx
new file mode 100644
index 00000000..d926e0d6
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-pie-label-custom.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with a custom label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Custom Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px] px-0"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent nameKey="visitors" hideLabel />
+                     }
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     labelLine={false}
+                     label={({ payload, ...props }) => {
+                        return (
+                           <text
+                              cx={props.cx}
+                              cy={props.cy}
+                              x={props.x}
+                              y={props.y}
+                              textAnchor={props.textAnchor}
+                              dominantBaseline={props.dominantBaseline}
+                              fill="hsla(var(--foreground))"
+                           >
+                              {payload.visitors}
+                           </text>
+                        )
+                     }}
+                     nameKey="browser"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-pie-label-list.tsx b/apps/web/__registry__/miami/charts/chart-pie-label-list.tsx
new file mode 100644
index 00000000..c31543d4
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-pie-label-list.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with a label list"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Label List</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent nameKey="visitors" hideLabel />
+                     }
+                  />
+                  <Pie data={chartData} dataKey="visitors">
+                     <LabelList
+                        dataKey="browser"
+                        className="fill-background"
+                        stroke="none"
+                        fontSize={12}
+                        formatter={(value: keyof typeof chartConfig) =>
+                           chartConfig[value]?.label
+                        }
+                     />
+                  </Pie>
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-pie-label.tsx b/apps/web/__registry__/miami/charts/chart-pie-label.tsx
new file mode 100644
index 00000000..9a9ceb58
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-pie-label.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with a label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
+            >
+               <PieChart>
+                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     label
+                     nameKey="browser"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-pie-legend.tsx b/apps/web/__registry__/miami/charts/chart-pie-legend.tsx
new file mode 100644
index 00000000..e0ae6dc6
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-pie-legend.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with a legend"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Legend</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[300px]"
+            >
+               <PieChart>
+                  <Pie data={chartData} dataKey="visitors" />
+                  <ChartLegend
+                     content={<ChartLegendContent nameKey="browser" />}
+                     className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-pie-separator-none.tsx b/apps/web/__registry__/miami/charts/chart-pie-separator-none.tsx
new file mode 100644
index 00000000..a2727312
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-pie-separator-none.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with no separator"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Separator None</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     stroke="0"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-pie-simple.tsx b/apps/web/__registry__/miami/charts/chart-pie-simple.tsx
new file mode 100644
index 00000000..40cb711a
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-pie-simple.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A simple pie chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie data={chartData} dataKey="visitors" nameKey="browser" />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-pie-stacked.tsx b/apps/web/__registry__/miami/charts/chart-pie-stacked.tsx
new file mode 100644
index 00000000..60238dc6
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-pie-stacked.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import * as React from "react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with stacked sections"
+
+const desktopData = [
+   { month: "january", desktop: 186, fill: "var(--color-january)" },
+   { month: "february", desktop: 305, fill: "var(--color-february)" },
+   { month: "march", desktop: 237, fill: "var(--color-march)" },
+   { month: "april", desktop: 173, fill: "var(--color-april)" },
+   { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const mobileData = [
+   { month: "january", mobile: 80, fill: "var(--color-january)" },
+   { month: "february", mobile: 200, fill: "var(--color-february)" },
+   { month: "march", mobile: 120, fill: "var(--color-march)" },
+   { month: "april", mobile: 190, fill: "var(--color-april)" },
+   { month: "may", mobile: 130, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   desktop: {
+      label: "Desktop",
+   },
+   mobile: {
+      label: "Mobile",
+   },
+   january: {
+      label: "January",
+      color: "hsl(var(--chart-1))",
+   },
+   february: {
+      label: "February",
+      color: "hsl(var(--chart-2))",
+   },
+   march: {
+      label: "March",
+      color: "hsl(var(--chart-3))",
+   },
+   april: {
+      label: "April",
+      color: "hsl(var(--chart-4))",
+   },
+   may: {
+      label: "May",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Stacked</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           labelKey="visitors"
+                           nameKey="month"
+                           indicator="line"
+                           labelFormatter={(_, payload) => {
+                              return chartConfig[
+                                 payload?.[0]
+                                    .dataKey as keyof typeof chartConfig
+                              ].label
+                           }}
+                        />
+                     }
+                  />
+                  <Pie data={desktopData} dataKey="desktop" outerRadius={60} />
+                  <Pie
+                     data={mobileData}
+                     dataKey="mobile"
+                     innerRadius={70}
+                     outerRadius={90}
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-default.tsx b/apps/web/__registry__/miami/charts/chart-radar-default.tsx
new file mode 100644
index 00000000..f29cdc8d
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-default.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-dots.tsx b/apps/web/__registry__/miami/charts/chart-radar-dots.tsx
new file mode 100644
index 00000000..113082e4
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-dots.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with dots"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center">
+            <CardTitle>Radar Chart - Dots</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-grid-circle-fill.tsx b/apps/web/__registry__/miami/charts/chart-radar-grid-circle-fill.tsx
new file mode 100644
index 00000000..f20f6f8b
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-grid-circle-fill.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 285 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <PolarGrid
+                     className="fill-[--color-desktop] opacity-20"
+                     gridType="circle"
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.5}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-grid-circle-no-lines.tsx b/apps/web/__registry__/miami/charts/chart-radar-grid-circle-no-lines.tsx
new file mode 100644
index 00000000..15d7fc66
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-grid-circle-no-lines.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid gridType="circle" radialLines={false} />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-grid-circle.tsx b/apps/web/__registry__/miami/charts/chart-radar-grid-circle.tsx
new file mode 100644
index 00000000..63f244c5
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-grid-circle.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a grid and circle"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Circle</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid gridType="circle" />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-grid-custom.tsx b/apps/web/__registry__/miami/charts/chart-radar-grid-custom.tsx
new file mode 100644
index 00000000..d378825a
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-grid-custom.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a custom grid"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Custom</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid
+                     radialLines={false}
+                     polarRadius={[90]}
+                     strokeWidth={1}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-grid-fill.tsx b/apps/web/__registry__/miami/charts/chart-radar-grid-fill.tsx
new file mode 100644
index 00000000..0605ca27
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-grid-fill.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a grid filled"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 285 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Filled</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid className="fill-[--color-desktop] opacity-20" />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.5}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-grid-none.tsx b/apps/web/__registry__/miami/charts/chart-radar-grid-none.tsx
new file mode 100644
index 00000000..f8ee632a
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-grid-none.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with no grid"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid None</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-icons.tsx b/apps/web/__registry__/miami/charts/chart-radar-icons.tsx
new file mode 100644
index 00000000..9c783a31
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-icons.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with icons"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+      icon: ArrowDownFromLine,
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+      icon: ArrowUpFromLine,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Icons</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart
+                  data={chartData}
+                  margin={{
+                     top: -40,
+                     bottom: -10,
+                  }}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+                  <ChartLegend
+                     className="mt-8"
+                     content={<ChartLegendContent />}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 pt-4 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-label-custom.tsx b/apps/web/__registry__/miami/charts/chart-radar-label-custom.tsx
new file mode 100644
index 00000000..36fb2186
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-label-custom.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a custom label"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Custom Label</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart
+                  data={chartData}
+                  margin={{
+                     top: 10,
+                     right: 10,
+                     bottom: 10,
+                     left: 10,
+                  }}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis
+                     dataKey="month"
+                     tick={({ x, y, textAnchor, value, index, ...props }) => {
+                        const data = chartData[index]
+
+                        return (
+                           <text
+                              x={x}
+                              y={index === 0 ? y - 10 : y}
+                              textAnchor={textAnchor}
+                              fontSize={13}
+                              fontWeight={500}
+                              {...props}
+                           >
+                              <tspan>{data.desktop}</tspan>
+                              <tspan className="fill-muted-foreground">/</tspan>
+                              <tspan>{data.mobile}</tspan>
+                              <tspan
+                                 x={x}
+                                 dy={"1rem"}
+                                 fontSize={12}
+                                 className="fill-muted-foreground"
+                              >
+                                 {data.month}
+                              </tspan>
+                           </text>
+                        )
+                     }}
+                  />
+
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-legend.tsx b/apps/web/__registry__/miami/charts/chart-radar-legend.tsx
new file mode 100644
index 00000000..6083f8f9
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-legend.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a legend"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Legend</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart
+                  data={chartData}
+                  margin={{
+                     top: -40,
+                     bottom: -10,
+                  }}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+                  <ChartLegend
+                     className="mt-8"
+                     content={<ChartLegendContent />}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 pt-4 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-lines-only.tsx b/apps/web/__registry__/miami/charts/chart-radar-lines-only.tsx
new file mode 100644
index 00000000..1cb9f8b9
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-lines-only.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with lines only"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 160 },
+   { month: "February", desktop: 185, mobile: 170 },
+   { month: "March", desktop: 207, mobile: 180 },
+   { month: "April", desktop: 173, mobile: 160 },
+   { month: "May", desktop: 160, mobile: 190 },
+   { month: "June", desktop: 174, mobile: 204 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Lines Only</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid radialLines={false} />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0}
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                  />
+                  <Radar
+                     dataKey="mobile"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0}
+                     stroke="var(--color-mobile)"
+                     strokeWidth={2}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-multiple.tsx b/apps/web/__registry__/miami/charts/chart-radar-multiple.tsx
new file mode 100644
index 00000000..0635dbb8
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-multiple.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with multiple data"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Multiple</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radar-radius.tsx b/apps/web/__registry__/miami/charts/chart-radar-radius.tsx
new file mode 100644
index 00000000..7ed0f6fc
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radar-radius.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+   PolarAngleAxis,
+   PolarGrid,
+   PolarRadiusAxis,
+   Radar,
+   RadarChart,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a radius axis"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Radius Axis</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           indicator="line"
+                           labelKey="month"
+                        />
+                     }
+                  />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+                  <PolarRadiusAxis
+                     angle={60}
+                     stroke="hsla(var(--foreground))"
+                     orientation="middle"
+                     axisLine={false}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radial-grid.tsx b/apps/web/__registry__/miami/charts/chart-radial-grid.tsx
new file mode 100644
index 00000000..943f7439
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radial-grid.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarGrid, RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with a grid"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Grid</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  innerRadius={30}
+                  outerRadius={100}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
+                  />
+                  <PolarGrid gridType="circle" />
+                  <RadialBar dataKey="visitors" />
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radial-label.tsx b/apps/web/__registry__/miami/charts/chart-radial-label.tsx
new file mode 100644
index 00000000..3050ff22
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radial-label.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with a label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  startAngle={-90}
+                  endAngle={380}
+                  innerRadius={30}
+                  outerRadius={110}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
+                  />
+                  <RadialBar dataKey="visitors" background>
+                     <LabelList
+                        position="insideStart"
+                        dataKey="browser"
+                        className="fill-white capitalize mix-blend-luminosity"
+                        fontSize={11}
+                     />
+                  </RadialBar>
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radial-shape.tsx b/apps/web/__registry__/miami/charts/chart-radial-shape.tsx
new file mode 100644
index 00000000..30957dda
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radial-shape.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+   Label,
+   PolarGrid,
+   PolarRadiusAxis,
+   RadialBar,
+   RadialBarChart,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { type ChartConfig, ChartContainer } from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with a custom shape"
+
+const chartData = [
+   { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Shape</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  endAngle={100}
+                  innerRadius={80}
+                  outerRadius={140}
+               >
+                  <PolarGrid
+                     gridType="circle"
+                     radialLines={false}
+                     stroke="none"
+                     className="first:fill-muted last:fill-background"
+                     polarRadius={[86, 74]}
+                  />
+                  <RadialBar dataKey="visitors" background />
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-4xl font-bold"
+                                    >
+                                       {chartData[0].visitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </PolarRadiusAxis>
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radial-simple.tsx b/apps/web/__registry__/miami/charts/chart-radial-simple.tsx
new file mode 100644
index 00000000..f8ed1c4c
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radial-simple.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  innerRadius={30}
+                  outerRadius={110}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
+                  />
+                  <RadialBar dataKey="visitors" background />
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radial-stacked.tsx b/apps/web/__registry__/miami/charts/chart-radial-stacked.tsx
new file mode 100644
index 00000000..2f50074f
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radial-stacked.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with stacked sections"
+
+const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const totalVisitors = chartData[0].desktop + chartData[0].mobile
+
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Stacked</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex flex-1 items-center pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square w-full max-w-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  endAngle={180}
+                  innerRadius={80}
+                  outerRadius={130}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) - 16}
+                                       className="fill-foreground text-2xl font-bold"
+                                    >
+                                       {totalVisitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 4}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </PolarRadiusAxis>
+                  <RadialBar
+                     dataKey="desktop"
+                     stackId="a"
+                     cornerRadius={5}
+                     fill="var(--color-desktop)"
+                     className="stroke-transparent stroke-2"
+                  />
+                  <RadialBar
+                     dataKey="mobile"
+                     fill="var(--color-mobile)"
+                     stackId="a"
+                     cornerRadius={5}
+                     className="stroke-transparent stroke-2"
+                  />
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-radial-text.tsx b/apps/web/__registry__/miami/charts/chart-radial-text.tsx
new file mode 100644
index 00000000..bf163f1b
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-radial-text.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+   Label,
+   PolarGrid,
+   PolarRadiusAxis,
+   RadialBar,
+   RadialBarChart,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { type ChartConfig, ChartContainer } from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with text"
+
+const chartData = [
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Text</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  startAngle={0}
+                  endAngle={250}
+                  innerRadius={80}
+                  outerRadius={110}
+               >
+                  <PolarGrid
+                     gridType="circle"
+                     radialLines={false}
+                     stroke="none"
+                     className="first:fill-muted last:fill-background"
+                     polarRadius={[86, 74]}
+                  />
+                  <RadialBar dataKey="visitors" background cornerRadius={10} />
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-4xl font-bold"
+                                    >
+                                       {chartData[0].visitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </PolarRadiusAxis>
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-tooltip-advanced.tsx b/apps/web/__registry__/miami/charts/chart-tooltip-advanced.tsx
new file mode 100644
index 00000000..98966002
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-tooltip-advanced.tsx
@@ -0,0 +1,124 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Advanced</CardTitle>
+            <CardDescription>
+               Tooltip with custom formatter and total.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           hideLabel
+                           className="w-[180px]"
+                           formatter={(value, name, item, index) => (
+                              <>
+                                 <div
+                                    className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
+                                    style={
+                                       {
+                                          "--color-bg": `var(--color-${name})`,
+                                       } as React.CSSProperties
+                                    }
+                                 />
+                                 {chartConfig[name as keyof typeof chartConfig]
+                                    ?.label || name}
+                                 <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                    {value}
+                                    <span className="font-normal text-muted-foreground">
+                                       kcal
+                                    </span>
+                                 </div>
+                                 {/* Add this after the last item */}
+                                 {index === 1 && (
+                                    <div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
+                                       Total
+                                       <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                          {item.payload.running +
+                                             item.payload.swimming}
+                                          <span className="font-normal text-muted-foreground">
+                                             kcal
+                                          </span>
+                                       </div>
+                                    </div>
+                                 )}
+                              </>
+                           )}
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-tooltip-default.tsx b/apps/web/__registry__/miami/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000..53e812dd
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-tooltip-default.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+   "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Default</CardTitle>
+            <CardDescription>
+               Default tooltip with ChartTooltipContent.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-tooltip-formatter.tsx b/apps/web/__registry__/miami/charts/chart-tooltip-formatter.tsx
new file mode 100644
index 00000000..fef08446
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-tooltip-formatter.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Formatter</CardTitle>
+            <CardDescription>Tooltip with custom formatter .</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           hideLabel
+                           formatter={(value, name) => (
+                              <div className="flex min-w-[130px] items-center text-xs text-muted-foreground">
+                                 {chartConfig[name as keyof typeof chartConfig]
+                                    ?.label || name}
+                                 <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                    {value}
+                                    <span className="font-normal text-muted-foreground">
+                                       kcal
+                                    </span>
+                                 </div>
+                              </div>
+                           )}
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-tooltip-icons.tsx b/apps/web/__registry__/miami/charts/chart-tooltip-icons.tsx
new file mode 100644
index 00000000..3710195d
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-tooltip-icons.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Footprints, Waves } from "lucide-react"
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+      icon: Footprints,
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+      icon: Waves,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Icons</CardTitle>
+            <CardDescription>Tooltip with icons.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent hideLabel />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-tooltip-indicator-line.tsx b/apps/web/__registry__/miami/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000..c15a99e5
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-tooltip-indicator-line.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+   "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Line Indicator</CardTitle>
+            <CardDescription>Tooltip with line indicator.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent indicator="line" />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-tooltip-indicator-none.tsx b/apps/web/__registry__/miami/charts/chart-tooltip-indicator-none.tsx
new file mode 100644
index 00000000..c5b8cf4f
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-tooltip-indicator-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - No Indicator</CardTitle>
+            <CardDescription>Tooltip with no indicator.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent hideIndicator />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-tooltip-label-custom.tsx b/apps/web/__registry__/miami/charts/chart-tooltip-label-custom.tsx
new file mode 100644
index 00000000..59563667
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-tooltip-label-custom.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   activities: {
+      label: "Activities",
+   },
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Custom label</CardTitle>
+            <CardDescription>
+               Tooltip with custom label from chartConfig.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           labelKey="activities"
+                           indicator="line"
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-tooltip-label-formatter.tsx b/apps/web/__registry__/miami/charts/chart-tooltip-label-formatter.tsx
new file mode 100644
index 00000000..83fbd36c
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-tooltip-label-formatter.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Label Formatter</CardTitle>
+            <CardDescription>Tooltip with label formatter.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    day: "numeric",
+                                    month: "long",
+                                    year: "numeric",
+                                 },
+                              )
+                           }}
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/__registry__/miami/charts/chart-tooltip-label-none.tsx b/apps/web/__registry__/miami/charts/chart-tooltip-label-none.tsx
new file mode 100644
index 00000000..b4f5f0ea
--- /dev/null
+++ b/apps/web/__registry__/miami/charts/chart-tooltip-label-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - No Label</CardTitle>
+            <CardDescription>Tooltip with no label.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent hideIndicator hideLabel />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/actions/edit-in-v0.ts b/apps/web/actions/edit-in-v0.ts
new file mode 100644
index 00000000..4b0817bd
--- /dev/null
+++ b/apps/web/actions/edit-in-v0.ts
@@ -0,0 +1,47 @@
+"use server"
+
+import { track } from "@vercel/analytics/server"
+import { capitalCase } from "change-case"
+
+import { getRegistryItem } from "~/lib/registry"
+import type { Style } from "~/registry/registry-styles"
+
+export async function editInV0({
+   name,
+   style,
+   url,
+}: {
+   name: string
+   style?: Style["name"]
+   url: string
+}) {
+   style = style ?? "miami"
+   try {
+      const registryItem = await getRegistryItem(name, style)
+
+      if (!registryItem) {
+         return { error: "Something went wrong. Please try again later." }
+      }
+
+      const baseUrl = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3333"
+      const registryUrl = `${baseUrl}/v0/styles/${style}/${name}.json`
+
+      await track("edit_in_v0", {
+         name,
+         title: capitalCase(registryItem.name),
+         description:
+            registryItem.description ?? capitalCase(registryItem.name),
+         style,
+         url,
+      })
+
+      return {
+         url: `https://v0.dev/chat/api/open?url=${encodeURIComponent(registryUrl)}`,
+      }
+   } catch (error) {
+      console.error(error)
+      if (error instanceof Error) {
+         return { error: error.message }
+      }
+   }
+}
diff --git a/apps/web/app/(app)/blocks/[...categories]/page.tsx b/apps/web/app/(app)/blocks/[...categories]/page.tsx
new file mode 100644
index 00000000..408b23ad
--- /dev/null
+++ b/apps/web/app/(app)/blocks/[...categories]/page.tsx
@@ -0,0 +1,31 @@
+import { BlockDisplay } from "~/components/block-display"
+import { getAllBlockIds } from "~/lib/blocks"
+import { registryCategories } from "~/registry/registry-categories"
+
+export const dynamicParams = false
+
+export async function generateStaticParams() {
+   return registryCategories.map((category) => ({
+      categories: [category.slug],
+   }))
+}
+
+export default async function BlocksPage({
+   params,
+}: {
+   params: { categories?: string[] }
+}) {
+   const blocks = await getAllBlockIds(
+      ["registry:block"],
+      params.categories ?? [],
+   )
+
+   return blocks.map((name) => (
+      <div
+         key={name}
+         className="border-grid container border-b py-8 first:pt-6 last:border-b-0 md:py-12"
+      >
+         <BlockDisplay name={name} />
+      </div>
+   ))
+}
diff --git a/apps/web/app/(app)/blocks/layout.tsx b/apps/web/app/(app)/blocks/layout.tsx
index 73a80fdd..890f5525 100644
--- a/apps/web/app/(app)/blocks/layout.tsx
+++ b/apps/web/app/(app)/blocks/layout.tsx
@@ -1,18 +1,22 @@
-import type { Metadata } from 'next'
+import type { Metadata } from "next"
 
-import { Announcement } from '~/components/announcement'
+import { Announcement } from "~/components/announcement"
+import { BlocksNav } from "~/components/blocks-nav"
 import {
    PageActions,
    PageHeader,
    PageHeaderDescription,
    PageHeaderHeading,
-} from '~/components/page-header'
-import { Button } from '~/registry/miami/ui/button'
+} from "~/components/page-header"
+import { Button } from "~/registry/miami/ui/button"
+
+import "~/styles/mdx.css"
+import Link from "next/link"
 
 export const metadata: Metadata = {
-   title: 'Building Blocks.',
+   title: "Building Blocks.",
    description:
-    'Beautifully designed. Copy and paste into your apps. Open Source.',
+      "Beautifully designed. Copy and paste into your apps. Open Source.",
 }
 
 export default function BlocksLayout({
@@ -21,33 +25,31 @@ export default function BlocksLayout({
    children: React.ReactNode
 }) {
    return (
-      <div className="relative">
+      <>
          <PageHeader>
             <Announcement />
             <PageHeaderHeading>Building Blocks for the Web</PageHeaderHeading>
             <PageHeaderDescription>
-               Beautifully designed. Copy and paste into your apps. Open Source.
+               Clean, modern building blocks. Copy and paste into your apps.
+               Works with all React frameworks. Open Source. Free forever.
             </PageHeaderDescription>
             <PageActions>
                <Button asChild size="sm">
                   <a href="#blocks">Browse Blocks</a>
                </Button>
                <Button asChild variant="ghost" size="sm">
-                  <a
-                     rel="noopener noreferrer"
-                     href="https://github.com/shadcn-ui/ui/discussions/new?category=blocks-request"
-                     target="_blank"
-                  >
-                     Request a block
-                  </a>
+                  <Link href="/docs/blocks">Add a block</Link>
                </Button>
             </PageActions>
          </PageHeader>
-         <div className="container py-6">
-            <section id="blocks" className="scroll-mt-24">
-               {children}
-            </section>
+         <div id="blocks" className="border-grid scroll-mt-24 border-b">
+            <div className="container-wrapper">
+               <div className="container flex items-center py-4">
+                  <BlocksNav />
+               </div>
+            </div>
          </div>
-      </div>
+         <div className="container-wrapper flex-1">{children}</div>
+      </>
    )
 }
diff --git a/apps/web/app/(app)/blocks/page.tsx b/apps/web/app/(app)/blocks/page.tsx
index 1f601487..326ee02f 100644
--- a/apps/web/app/(app)/blocks/page.tsx
+++ b/apps/web/app/(app)/blocks/page.tsx
@@ -1,20 +1,18 @@
-import * as React from 'react'
+import { BlockDisplay } from "~/components/block-display"
 
-import { getAllBlockIds } from '~/lib/blocks'
-import { BlockDisplay } from '~/components/block-display'
-
-import '~/styles/mdx.css'
+const FEATURED_BLOCKS = ["sidebar-07", "sidebar-03", "login-03", "login-04"]
 
 export default async function BlocksPage() {
-   const blocks = await getAllBlockIds()
-
    return (
-      <div className="gap-3 md:flex md:flex-row-reverse md:items-start">
-         <div className="grid flex-1 gap-12 md:gap-24 lg:gap-48">
-            {blocks.map(name => (
-               <BlockDisplay key={name} name={name} />
-            ))}
-         </div>
+      <div>
+         {FEATURED_BLOCKS.map((block) => (
+            <div
+               key={block}
+               className="border-grid container border-b py-8 first:pt-6 last:border-b-0 md:py-12"
+            >
+               <BlockDisplay name={block} />
+            </div>
+         ))}
       </div>
    )
 }
diff --git a/apps/web/app/(app)/charts/charts.tsx b/apps/web/app/(app)/charts/charts.tsx
index 7a9c0915..b2bcde3d 100644
--- a/apps/web/app/(app)/charts/charts.tsx
+++ b/apps/web/app/(app)/charts/charts.tsx
@@ -1,76 +1,76 @@
-export { default as ChartAreaDefault } from '~/registry/miami/block/chart-area-default'
-export { default as ChartAreaLinear } from '~/registry/miami/block/chart-area-linear'
-export { default as ChartAreaStep } from '~/registry/miami/block/chart-area-step'
-export { default as ChartAreaLegend } from '~/registry/miami/block/chart-area-legend'
-export { default as ChartAreaStacked } from '~/registry/miami/block/chart-area-stacked'
-export { default as ChartAreaStackedExpand } from '~/registry/miami/block/chart-area-stacked-expand'
-export { default as ChartAreaIcons } from '~/registry/miami/block/chart-area-icons'
-export { default as ChartAreaGradient } from '~/registry/miami/block/chart-area-gradient'
-export { default as ChartAreaAxes } from '~/registry/miami/block/chart-area-axes'
-export { default as ChartAreaInteractive } from '~/registry/miami/block/chart-area-interactive'
+export { default as ChartAreaDefault } from "~/registry/miami/charts/chart-area-default"
+export { default as ChartAreaLinear } from "~/registry/miami/charts/chart-area-linear"
+export { default as ChartAreaStep } from "~/registry/miami/charts/chart-area-step"
+export { default as ChartAreaLegend } from "~/registry/miami/charts/chart-area-legend"
+export { default as ChartAreaStacked } from "~/registry/miami/charts/chart-area-stacked"
+export { default as ChartAreaStackedExpand } from "~/registry/miami/charts/chart-area-stacked-expand"
+export { default as ChartAreaIcons } from "~/registry/miami/charts/chart-area-icons"
+export { default as ChartAreaGradient } from "~/registry/miami/charts/chart-area-gradient"
+export { default as ChartAreaAxes } from "~/registry/miami/charts/chart-area-axes"
+export { default as ChartAreaInteractive } from "~/registry/miami/charts/chart-area-interactive"
 
-export { default as ChartBarDefault } from '~/registry/miami/block/chart-bar-default'
-export { default as ChartBarHorizontal } from '~/registry/miami/block/chart-bar-horizontal'
-export { default as ChartBarMultiple } from '~/registry/miami/block/chart-bar-multiple'
-export { default as ChartBarStacked } from '~/registry/miami/block/chart-bar-stacked'
-export { default as ChartBarLabel } from '~/registry/miami/block/chart-bar-label'
-export { default as ChartBarLabelCustom } from '~/registry/miami/block/chart-bar-label-custom'
-export { default as ChartBarMixed } from '~/registry/miami/block/chart-bar-mixed'
-export { default as ChartBarActive } from '~/registry/miami/block/chart-bar-active'
-export { default as ChartBarNegative } from '~/registry/miami/block/chart-bar-negative'
-export { default as ChartBarInteractive } from '~/registry/miami/block/chart-bar-interactive'
+export { default as ChartBarDefault } from "~/registry/miami/charts/chart-bar-default"
+export { default as ChartBarHorizontal } from "~/registry/miami/charts/chart-bar-horizontal"
+export { default as ChartBarMultiple } from "~/registry/miami/charts/chart-bar-multiple"
+export { default as ChartBarStacked } from "~/registry/miami/charts/chart-bar-stacked"
+export { default as ChartBarLabel } from "~/registry/miami/charts/chart-bar-label"
+export { default as ChartBarLabelCustom } from "~/registry/miami/charts/chart-bar-label-custom"
+export { default as ChartBarMixed } from "~/registry/miami/charts/chart-bar-mixed"
+export { default as ChartBarActive } from "~/registry/miami/charts/chart-bar-active"
+export { default as ChartBarNegative } from "~/registry/miami/charts/chart-bar-negative"
+export { default as ChartBarInteractive } from "~/registry/miami/charts/chart-bar-interactive"
 
-export { default as ChartLineDefault } from '~/registry/miami/block/chart-line-default'
-export { default as ChartLineLinear } from '~/registry/miami/block/chart-line-linear'
-export { default as ChartLineStep } from '~/registry/miami/block/chart-line-step'
-export { default as ChartLineMultiple } from '~/registry/miami/block/chart-line-multiple'
-export { default as ChartLineDots } from '~/registry/miami/block/chart-line-dots'
-export { default as ChartLineDotsCustom } from '~/registry/miami/block/chart-line-dots-custom'
-export { default as ChartLineDotsColors } from '~/registry/miami/block/chart-line-dots-colors'
-export { default as ChartLineLabel } from '~/registry/miami/block/chart-line-label'
-export { default as ChartLineLabelCustom } from '~/registry/miami/block/chart-line-label-custom'
-export { default as ChartLineInteractive } from '~/registry/miami/block/chart-line-interactive'
+export { default as ChartLineDefault } from "~/registry/miami/charts/chart-line-default"
+export { default as ChartLineLinear } from "~/registry/miami/charts/chart-line-linear"
+export { default as ChartLineStep } from "~/registry/miami/charts/chart-line-step"
+export { default as ChartLineMultiple } from "~/registry/miami/charts/chart-line-multiple"
+export { default as ChartLineDots } from "~/registry/miami/charts/chart-line-dots"
+export { default as ChartLineDotsCustom } from "~/registry/miami/charts/chart-line-dots-custom"
+export { default as ChartLineDotsColors } from "~/registry/miami/charts/chart-line-dots-colors"
+export { default as ChartLineLabel } from "~/registry/miami/charts/chart-line-label"
+export { default as ChartLineLabelCustom } from "~/registry/miami/charts/chart-line-label-custom"
+export { default as ChartLineInteractive } from "~/registry/miami/charts/chart-line-interactive"
 
-export { default as ChartPieSimple } from '~/registry/miami/block/chart-pie-simple'
-export { default as ChartPieSeparatorNone } from '~/registry/miami/block/chart-pie-separator-none'
-export { default as ChartPieLabel } from '~/registry/miami/block/chart-pie-label'
-export { default as ChartPieLabelCustom } from '~/registry/miami/block/chart-pie-label-custom'
-export { default as ChartPieLabelList } from '~/registry/miami/block/chart-pie-label-list'
-export { default as ChartPieLegend } from '~/registry/miami/block/chart-pie-legend'
-export { default as ChartPieDonut } from '~/registry/miami/block/chart-pie-donut'
-export { default as ChartPieDonutActive } from '~/registry/miami/block/chart-pie-donut-active'
-export { default as ChartPieDonutText } from '~/registry/miami/block/chart-pie-donut-text'
-export { default as ChartPieStacked } from '~/registry/miami/block/chart-pie-stacked'
-export { default as ChartPieInteractive } from '~/registry/miami/block/chart-pie-interactive'
+export { default as ChartPieSimple } from "~/registry/miami/charts/chart-pie-simple"
+export { default as ChartPieSeparatorNone } from "~/registry/miami/charts/chart-pie-separator-none"
+export { default as ChartPieLabel } from "~/registry/miami/charts/chart-pie-label"
+export { default as ChartPieLabelCustom } from "~/registry/miami/charts/chart-pie-label-custom"
+export { default as ChartPieLabelList } from "~/registry/miami/charts/chart-pie-label-list"
+export { default as ChartPieLegend } from "~/registry/miami/charts/chart-pie-legend"
+export { default as ChartPieDonut } from "~/registry/miami/charts/chart-pie-donut"
+export { default as ChartPieDonutActive } from "~/registry/miami/charts/chart-pie-donut-active"
+export { default as ChartPieDonutText } from "~/registry/miami/charts/chart-pie-donut-text"
+export { default as ChartPieStacked } from "~/registry/miami/charts/chart-pie-stacked"
+export { default as ChartPieInteractive } from "~/registry/miami/charts/chart-pie-interactive"
 
-export { default as ChartRadarDefault } from '~/registry/miami/block/chart-radar-default'
-export { default as ChartRadarDots } from '~/registry/miami/block/chart-radar-dots'
-export { default as ChartRadarLinesOnly } from '~/registry/miami/block/chart-radar-lines-only'
-export { default as ChartRadarLabelCustom } from '~/registry/miami/block/chart-radar-label-custom'
-export { default as ChartRadarGridCustom } from '~/registry/miami/block/chart-radar-grid-custom'
-export { default as ChartRadarGridNone } from '~/registry/miami/block/chart-radar-grid-none'
-export { default as ChartRadarGridCircle } from '~/registry/miami/block/chart-radar-grid-circle'
-export { default as ChartRadarGridCircleNoLines } from '~/registry/miami/block/chart-radar-grid-circle-no-lines'
-export { default as ChartRadarGridCircleFill } from '~/registry/miami/block/chart-radar-grid-circle-fill'
-export { default as ChartRadarGridFill } from '~/registry/miami/block/chart-radar-grid-fill'
-export { default as ChartRadarMultiple } from '~/registry/miami/block/chart-radar-multiple'
-export { default as ChartRadarLegend } from '~/registry/miami/block/chart-radar-legend'
-export { default as ChartRadarIcons } from '~/registry/miami/block/chart-radar-icons'
-export { default as ChartRadarRadius } from '~/registry/miami/block/chart-radar-radius'
+export { default as ChartRadarDefault } from "~/registry/miami/charts/chart-radar-default"
+export { default as ChartRadarDots } from "~/registry/miami/charts/chart-radar-dots"
+export { default as ChartRadarLinesOnly } from "~/registry/miami/charts/chart-radar-lines-only"
+export { default as ChartRadarLabelCustom } from "~/registry/miami/charts/chart-radar-label-custom"
+export { default as ChartRadarGridCustom } from "~/registry/miami/charts/chart-radar-grid-custom"
+export { default as ChartRadarGridNone } from "~/registry/miami/charts/chart-radar-grid-none"
+export { default as ChartRadarGridCircle } from "~/registry/miami/charts/chart-radar-grid-circle"
+export { default as ChartRadarGridCircleNoLines } from "~/registry/miami/charts/chart-radar-grid-circle-no-lines"
+export { default as ChartRadarGridCircleFill } from "~/registry/miami/charts/chart-radar-grid-circle-fill"
+export { default as ChartRadarGridFill } from "~/registry/miami/charts/chart-radar-grid-fill"
+export { default as ChartRadarMultiple } from "~/registry/miami/charts/chart-radar-multiple"
+export { default as ChartRadarLegend } from "~/registry/miami/charts/chart-radar-legend"
+export { default as ChartRadarIcons } from "~/registry/miami/charts/chart-radar-icons"
+export { default as ChartRadarRadius } from "~/registry/miami/charts/chart-radar-radius"
 
-export { default as ChartRadialSimple } from '~/registry/miami/block/chart-radial-simple'
-export { default as ChartRadialLabel } from '~/registry/miami/block/chart-radial-label'
-export { default as ChartRadialGrid } from '~/registry/miami/block/chart-radial-grid'
-export { default as ChartRadialText } from '~/registry/miami/block/chart-radial-text'
-export { default as ChartRadialShape } from '~/registry/miami/block/chart-radial-shape'
-export { default as ChartRadialStacked } from '~/registry/miami/block/chart-radial-stacked'
+export { default as ChartRadialSimple } from "~/registry/miami/charts/chart-radial-simple"
+export { default as ChartRadialLabel } from "~/registry/miami/charts/chart-radial-label"
+export { default as ChartRadialGrid } from "~/registry/miami/charts/chart-radial-grid"
+export { default as ChartRadialText } from "~/registry/miami/charts/chart-radial-text"
+export { default as ChartRadialShape } from "~/registry/miami/charts/chart-radial-shape"
+export { default as ChartRadialStacked } from "~/registry/miami/charts/chart-radial-stacked"
 
-export { default as ChartTooltipDefault } from '~/registry/miami/block/chart-tooltip-default'
-export { default as ChartTooltipIndicatorLine } from '~/registry/miami/block/chart-tooltip-indicator-line'
-export { default as ChartTooltipIndicatorNone } from '~/registry/miami/block/chart-tooltip-indicator-none'
-export { default as ChartTooltipLabelCustom } from '~/registry/miami/block/chart-tooltip-label-custom'
-export { default as ChartTooltipLabelFormatter } from '~/registry/miami/block/chart-tooltip-label-formatter'
-export { default as ChartTooltipLabelNone } from '~/registry/miami/block/chart-tooltip-label-none'
-export { default as ChartTooltipFormatter } from '~/registry/miami/block/chart-tooltip-formatter'
-export { default as ChartTooltipIcons } from '~/registry/miami/block/chart-tooltip-icons'
-export { default as ChartTooltipAdvanced } from '~/registry/miami/block/chart-tooltip-advanced'
+export { default as ChartTooltipDefault } from "~/registry/miami/charts/chart-tooltip-default"
+export { default as ChartTooltipIndicatorLine } from "~/registry/miami/charts/chart-tooltip-indicator-line"
+export { default as ChartTooltipIndicatorNone } from "~/registry/miami/charts/chart-tooltip-indicator-none"
+export { default as ChartTooltipLabelCustom } from "~/registry/miami/charts/chart-tooltip-label-custom"
+export { default as ChartTooltipLabelFormatter } from "~/registry/miami/charts/chart-tooltip-label-formatter"
+export { default as ChartTooltipLabelNone } from "~/registry/miami/charts/chart-tooltip-label-none"
+export { default as ChartTooltipFormatter } from "~/registry/miami/charts/chart-tooltip-formatter"
+export { default as ChartTooltipIcons } from "~/registry/miami/charts/chart-tooltip-icons"
+export { default as ChartTooltipAdvanced } from "~/registry/miami/charts/chart-tooltip-advanced"
diff --git a/apps/web/app/(app)/charts/layout.tsx b/apps/web/app/(app)/charts/layout.tsx
index d4c00f5d..7219cc58 100644
--- a/apps/web/app/(app)/charts/layout.tsx
+++ b/apps/web/app/(app)/charts/layout.tsx
@@ -1,19 +1,20 @@
-import type { Metadata } from 'next'
-import Link from 'next/link'
+import type { Metadata } from "next"
+import Link from "next/link"
 
-import { Announcement } from '~/components/announcement'
+import { Announcement } from "~/components/announcement"
+import { ChartsNav } from "~/components/charts-nav"
 import {
    PageActions,
    PageHeader,
    PageHeaderDescription,
    PageHeaderHeading,
-} from '~/components/page-header'
-import { Button } from '~/registry/miami/ui/button'
+} from "~/components/page-header"
+import { Button } from "~/registry/miami/ui/button"
 
 export const metadata: Metadata = {
-   title: 'Beautiful Charts',
+   title: "Beautiful Charts",
    description:
-    'Built using Recharts. Copy and paste into your apps. Open Source.',
+      "Built using Recharts. Copy and paste into your apps. Open Source.",
 }
 
 export default function ChartsLayout({
@@ -22,7 +23,7 @@ export default function ChartsLayout({
    children: React.ReactNode
 }) {
    return (
-      <div className="relative">
+      <>
          <PageHeader>
             <Announcement />
             <PageHeaderHeading>Beautiful Charts</PageHeaderHeading>
@@ -38,11 +39,20 @@ export default function ChartsLayout({
                </Button>
             </PageActions>
          </PageHeader>
-         <div className="container py-6">
-            <section id="charts" className="scroll-mt-20">
-               {children}
-            </section>
+         <div className="border-grid border-b">
+            <div className="container-wrapper">
+               <div className="container py-4">
+                  <ChartsNav />
+               </div>
+            </div>
          </div>
-      </div>
+         <div className="container-wrapper">
+            <div className="container py-6">
+               <section id="charts" className="scroll-mt-20">
+                  {children}
+               </section>
+            </div>
+         </div>
+      </>
    )
 }
diff --git a/apps/web/app/(app)/charts/page.tsx b/apps/web/app/(app)/charts/page.tsx
index 2f6d22a9..744d8288 100644
--- a/apps/web/app/(app)/charts/page.tsx
+++ b/apps/web/app/(app)/charts/page.tsx
@@ -1,20 +1,18 @@
-import { THEMES } from '~/lib/themes'
-import { ChartDisplay } from '~/components/chart-display'
-import { ChartsNav } from '~/components/charts-nav'
-import { ThemesSwitcher } from '~/components/themes-selector'
-import { ThemesStyle } from '~/components/themes-styles'
-import { Separator } from '~/registry/miami/ui/separator'
-import * as Charts from '~/app/(app)/charts/charts'
+import * as Charts from "~/app/(app)/charts/charts"
+import { ChartDisplay } from "~/components/chart-display"
+import { ThemesSwitcher } from "~/components/themes-selector"
+import { ThemesStyle } from "~/components/themes-styles"
+import { THEMES } from "~/lib/themes"
+import { Separator } from "~/registry/miami/ui/separator"
 
 export default function ChartsPage() {
    return (
       <div className="grid gap-4">
-         <ChartsNav className="[&>a:first-child]:bg-muted [&>a:first-child]:text-primary [&>a:first-child]:font-medium" />
          <ThemesStyle />
          <div className="gap-6 md:flex md:flex-row-reverse md:items-start">
             <ThemesSwitcher
                themes={THEMES}
-               className="bg-background/95 supports-[backdrop-filter]:bg-background/60 fixed inset-x-0 bottom-0 z-40 flex backdrop-blur lg:sticky lg:bottom-auto lg:top-20"
+               className="fixed inset-x-0 bottom-0 z-40 flex bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:sticky lg:bottom-auto lg:top-20"
             />
             <div className="grid flex-1 gap-12">
                <h2 className="sr-only">Examples</h2>
diff --git a/apps/web/app/(app)/colors/layout.tsx b/apps/web/app/(app)/colors/layout.tsx
index bcd88311..abe94a65 100644
--- a/apps/web/app/(app)/colors/layout.tsx
+++ b/apps/web/app/(app)/colors/layout.tsx
@@ -1,27 +1,27 @@
-import type { Metadata } from 'next'
-import Link from 'next/link'
+import type { Metadata } from "next"
+import Link from "next/link"
 
-import { Announcement } from '~/components/announcement'
+import { Announcement } from "~/components/announcement"
 import {
    PageActions,
    PageHeader,
    PageHeaderDescription,
    PageHeaderHeading,
-} from '~/components/page-header'
-import { Button } from '~/registry/miami/ui/button'
+} from "~/components/page-header"
+import { Button } from "~/registry/miami/ui/button"
 
 export const metadata: Metadata = {
-   title: 'Tailwind Colors',
-   description: 'All colors in all formats.',
+   title: "Tailwind Colors",
+   description: "All colors in all formats.",
 }
 
-export default function ChartsLayout({
+export default function ColorsLayout({
    children,
 }: {
    children: React.ReactNode
 }) {
    return (
-      <div className="container relative">
+      <>
          <PageHeader>
             <Announcement />
             <PageHeaderHeading>Tailwind Colors</PageHeaderHeading>
@@ -37,9 +37,13 @@ export default function ChartsLayout({
                </Button>
             </PageActions>
          </PageHeader>
-         <section id="charts" className="scroll-mt-20">
-            {children}
-         </section>
-      </div>
+         <div className="container-wrapper">
+            <div className="container py-6">
+               <section id="colors" className="scroll-mt-20">
+                  {children}
+               </section>
+            </div>
+         </div>
+      </>
    )
 }
diff --git a/apps/web/app/(app)/colors/page.tsx b/apps/web/app/(app)/colors/page.tsx
index 2e288f38..daff40eb 100644
--- a/apps/web/app/(app)/colors/page.tsx
+++ b/apps/web/app/(app)/colors/page.tsx
@@ -1,12 +1,12 @@
-import { getColors } from '~/lib/colors'
-import { ColorPalette } from '~/components/color-palette'
-
-const colors = getColors()
+import { ColorPalette } from "~/components/color-palette"
+import { getColors } from "~/lib/colors"
 
 export default function ColorsPage() {
+   const colors = getColors()
+
    return (
-      <div id="colors" className="grid scroll-mt-20 gap-8">
-         {colors.map(colorPalette => (
+      <div className="grid gap-8">
+         {colors.map((colorPalette) => (
             <ColorPalette key={colorPalette.name} colorPalette={colorPalette} />
          ))}
       </div>
diff --git a/apps/web/app/(app)/docs/[[...slug]]/page.tsx b/apps/web/app/(app)/docs/[[...slug]]/page.tsx
index 54df85ec..d0f24fe4 100644
--- a/apps/web/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/web/app/(app)/docs/[[...slug]]/page.tsx
@@ -1,21 +1,21 @@
-import { ChevronRightIcon, ExternalLinkIcon } from '@radix-ui/react-icons'
-import { allDocs } from 'content-collections'
-import type { Metadata } from 'next'
-import Link from 'next/link'
-import { notFound } from 'next/navigation'
+import { Mdx } from "~/components/mdx-components"
+import { DocPager } from "~/components/pager"
+import { badgeVariants } from "~/components/ui/badge"
+import { ScrollArea } from "~/components/ui/scroll-area"
+import { siteConfig } from "~/config/site"
+import { getTableOfContents } from "~/lib/toc"
+import { absoluteUrl, ny } from "~/lib/utils"
 
-import { Mdx } from '~/components/mdx-components'
-import { DocPager } from '~/components/pager'
-import { badgeVariants } from '~/components/ui/badge'
-import { ScrollArea } from '~/components/ui/scroll-area'
-import { siteConfig } from '~/config/site'
-import { getTableOfContents } from '~/lib/toc'
-import { absoluteUrl, ny } from '~/lib/utils'
+import "~/styles/mdx.css"
 
-import '~/styles/mdx.css'
+import { ChevronRightIcon, ExternalLinkIcon } from "@radix-ui/react-icons"
+import { allDocs } from "content-collections"
+import type { Metadata } from "next"
+import Link from "next/link"
+import { notFound } from "next/navigation"
 
-import { Contribute } from '~/components/contribute'
-import { TableOfContents } from '~/components/toc'
+import { Contribute } from "~/components/contribute"
+import { TableOfContents } from "~/components/toc"
 
 interface DocPageProps {
    params: {
@@ -24,8 +24,8 @@ interface DocPageProps {
 }
 
 async function getDocFromParams({ params }: DocPageProps) {
-   const slug = params.slug?.join('/') || ''
-   const doc = allDocs.find(doc => doc.slugAsParams === slug)
+   const slug = params.slug?.join("/") || ""
+   const doc = allDocs.find((doc) => doc.slugAsParams === slug)
 
    if (!doc) {
       return null
@@ -49,7 +49,7 @@ export async function generateMetadata({
       openGraph: {
          title: doc.title,
          description: doc.description,
-         type: 'article',
+         type: "article",
          url: absoluteUrl(doc.slug),
          images: [
             {
@@ -61,20 +61,20 @@ export async function generateMetadata({
          ],
       },
       twitter: {
-         card: 'summary_large_image',
+         card: "summary_large_image",
          title: doc.title,
          description: doc.description,
          images: [doc.image],
-         creator: '@nyxb0',
+         creator: "@dillionverma",
       },
    }
 }
 
 export async function generateStaticParams(): Promise<
-   DocPageProps['params'][]
+   DocPageProps["params"][]
 > {
-   return allDocs.map(doc => ({
-      slug: doc.slugAsParams.split('/'),
+   return allDocs.map((doc) => ({
+      slug: doc.slugAsParams.split("/"),
    }))
 }
 
@@ -89,54 +89,62 @@ export default async function DocPage({ params }: DocPageProps) {
 
    return (
       <main
-         className={ny('relative py-6 lg:gap-10 lg:py-8 xl:grid ', {
-            'xl:grid-cols-[1fr_300px]': doc.toc,
+         className={ny("relative py-6 lg:gap-10 lg:py-8 xl:grid ", {
+            "xl:grid-cols-[1fr_300px]": doc.toc,
          })}
       >
          <div className="mx-auto w-full min-w-0">
-            <div className="text-muted-foreground mb-4 flex items-center space-x-1 text-sm">
+            <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
                <div className="truncate">Docs</div>
                <ChevronRightIcon className="size-4" />
-               <div className="text-foreground font-medium">{doc.title}</div>
+               <div className="font-medium text-foreground">{doc.title}</div>
             </div>
             <div className="space-y-2">
-               <h1 className={ny('scroll-m-20 text-4xl font-bold tracking-tight')}>
+               <h1
+                  className={ny(
+                     "scroll-m-20 text-4xl font-bold tracking-tight",
+                  )}
+               >
                   {doc.title}
                </h1>
                {doc.description && (
-                  <p className="text-muted-foreground text-balance text-lg">
+                  <p className="text-balance text-lg text-muted-foreground">
                      {doc.description}
                   </p>
                )}
             </div>
-            {doc.links
-               ? (
-                     <div className="flex items-center space-x-2 pt-4">
-                        {doc.links?.doc && (
-                           <Link
-                              href={doc.links.doc}
-                              target="_blank"
-                              rel="noreferrer"
-                              className={ny(badgeVariants({ variant: 'secondary' }), 'gap-1')}
-                           >
-                              Docs
-                              <ExternalLinkIcon className="size-3" />
-                           </Link>
+            {doc.links ? (
+               <div className="flex items-center space-x-2 pt-4">
+                  {doc.links?.doc && (
+                     <Link
+                        href={doc.links.doc}
+                        target="_blank"
+                        rel="noreferrer"
+                        className={ny(
+                           badgeVariants({ variant: "secondary" }),
+                           "gap-1",
                         )}
-                        {doc.links?.api && (
-                           <Link
-                              href={doc.links.api}
-                              target="_blank"
-                              rel="noreferrer"
-                              className={ny(badgeVariants({ variant: 'secondary' }), 'gap-1')}
-                           >
-                              API Reference
-                              <ExternalLinkIcon className="size-3" />
-                           </Link>
+                     >
+                        Docs
+                        <ExternalLinkIcon className="size-3" />
+                     </Link>
+                  )}
+                  {doc.links?.api && (
+                     <Link
+                        href={doc.links.api}
+                        target="_blank"
+                        rel="noreferrer"
+                        className={ny(
+                           badgeVariants({ variant: "secondary" }),
+                           "gap-1",
                         )}
-                     </div>
-                  )
-               : null}
+                     >
+                        API Reference
+                        <ExternalLinkIcon className="size-3" />
+                     </Link>
+                  )}
+               </div>
+            ) : null}
             <div className="pb-12 pt-8">
                <Mdx code={doc.body.code} />
             </div>
diff --git a/apps/web/app/(app)/docs/layout.tsx b/apps/web/app/(app)/docs/layout.tsx
index a5e7d068..90b28633 100644
--- a/apps/web/app/(app)/docs/layout.tsx
+++ b/apps/web/app/(app)/docs/layout.tsx
@@ -1,6 +1,7 @@
-import { docsConfig } from '~/config/docs'
-import { DocsSidebarNav } from '~/components/sidebar-nav'
-import { ScrollArea } from '~/registry/miami/ui/scroll-area'
+import { DocsSidebarNav } from "~/components/sidebar-nav"
+import { ScrollArea } from "~/components/ui/scroll-area"
+import { docsConfig } from "~/config/docs"
+import type { SidebarNavItem } from "~/types/nav"
 
 interface DocsLayoutProps {
    children: React.ReactNode
@@ -8,15 +9,15 @@ interface DocsLayoutProps {
 
 export default function DocsLayout({ children }: DocsLayoutProps) {
    return (
-      <div className="border-b">
-         <div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-            <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
-               <ScrollArea className="h-full py-6 pr-6 lg:py-8">
-                  <DocsSidebarNav config={docsConfig} />
-               </ScrollArea>
-            </aside>
-            {children}
-         </div>
+      <div className="container flex-1 items-start md:grid md:grid-cols-[240px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[250px_minmax(0,1fr)] lg:gap-10">
+         <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
+            <ScrollArea className="h-full pr-6">
+               <DocsSidebarNav
+                  items={docsConfig.sidebarNav as SidebarNavItem[]}
+               />
+            </ScrollArea>
+         </aside>
+         {children}
       </div>
    )
 }
diff --git a/apps/web/app/(app)/docs/not-found.tsx b/apps/web/app/(app)/docs/not-found.tsx
deleted file mode 100644
index 9a5a5125..00000000
--- a/apps/web/app/(app)/docs/not-found.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-import { Icons } from '~/components/icons'
-import { Button, buttonVariants } from '~/components/ui/button'
-
-export default function NotFound() {
-   const router = useRouter()
-   return (
-      <section>
-         <div className="container mx-auto flex min-h-[calc(100vh-8rem)] items-center px-6 py-12">
-            <div className="mx-auto flex max-w-sm flex-col items-center text-center">
-               <p className="rounded-full bg-blue-50 p-3 text-sm font-medium dark:bg-gray-800">
-                  <Icons.warning className="size-6" />
-               </p>
-               <h1 className="mt-3 text-2xl font-semibold text-gray-800 md:text-3xl dark:text-white">
-                  Page not found
-               </h1>
-               <p className="mt-4 text-gray-500 dark:text-gray-400">
-                  The page you are looking for doesn&apos;t exist.
-               </p>
-
-               <div className="group mt-6 flex w-full shrink-0 items-center gap-x-3 sm:w-auto">
-                  <Button
-                     onClick={() => router.back()}
-                     className={buttonVariants({ variant: 'secondary' })}
-                  >
-                     <Icons.chevronLeft className="size-4 transition-transform group-hover:-translate-x-1" />
-                     <span>Go back</span>
-                  </Button>
-
-                  <Link href="/" className={buttonVariants({ variant: 'default' })}>
-                     Take me home
-                  </Link>
-               </div>
-            </div>
-         </div>
-      </section>
-   )
-}
diff --git a/apps/web/app/(app)/examples/authentication/components/user-auth-form.tsx b/apps/web/app/(app)/examples/authentication/components/user-auth-form.tsx
index 0103cb9b..2e119733 100644
--- a/apps/web/app/(app)/examples/authentication/components/user-auth-form.tsx
+++ b/apps/web/app/(app)/examples/authentication/components/user-auth-form.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { Icons } from '~/components/icons'
-import { Button } from '~/registry/miami/ui/button'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+import { Icons } from "~/components/icons"
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 
 interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
 
@@ -23,7 +23,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
    }
 
    return (
-      <div className={ny('grid gap-6', className)} {...props}>
+      <div className={ny("grid gap-6", className)} {...props}>
          <form onSubmit={onSubmit}>
             <div className="grid gap-2">
                <div className="grid gap-1">
@@ -42,7 +42,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                </div>
                <Button disabled={isLoading}>
                   {isLoading && (
-                     <Icons.spinner className="mr-2 size-4 animate-spin" />
+                     <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
                   )}
                   Sign In with Email
                </Button>
@@ -53,20 +53,17 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                <span className="w-full border-t" />
             </div>
             <div className="relative flex justify-center text-xs uppercase">
-               <span className="bg-background text-muted-foreground px-2">
+               <span className="bg-background px-2 text-muted-foreground">
                   Or continue with
                </span>
             </div>
          </div>
          <Button variant="outline" type="button" disabled={isLoading}>
-            {isLoading
-               ? (
-                     <Icons.spinner className="mr-2 size-4 animate-spin" />
-                  )
-               : (
-                     <Icons.gitHub className="mr-2 size-4" />
-                  )}
-            {' '}
+            {isLoading ? (
+               <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+               <Icons.gitHub className="mr-2 h-4 w-4" />
+            )}{" "}
             GitHub
          </Button>
       </div>
diff --git a/apps/web/app/(app)/examples/authentication/page.tsx b/apps/web/app/(app)/examples/authentication/page.tsx
index 9ce32208..81824cfc 100644
--- a/apps/web/app/(app)/examples/authentication/page.tsx
+++ b/apps/web/app/(app)/examples/authentication/page.tsx
@@ -1,14 +1,14 @@
-import type { Metadata } from 'next'
-import Image from 'next/image'
-import Link from 'next/link'
+import type { Metadata } from "next"
+import Image from "next/image"
+import Link from "next/link"
 
-import { ny } from '~/lib/utils'
-import { buttonVariants } from '~/registry/miami/ui/button'
-import { UserAuthForm } from '~/app/(app)/examples/authentication/components/user-auth-form'
+import { UserAuthForm } from "~/app/(app)/examples/authentication/components/user-auth-form"
+import { ny } from "~/lib/utils"
+import { buttonVariants } from "~/registry/miami/ui/button"
 
 export const metadata: Metadata = {
-   title: 'Authentication',
-   description: 'Authentication forms built using the components.',
+   title: "Authentication",
+   description: "Authentication forms built using the components.",
 }
 
 export default function AuthenticationPage() {
@@ -34,13 +34,13 @@ export default function AuthenticationPage() {
             <Link
                href="/examples/authentication"
                className={ny(
-                  buttonVariants({ variant: 'ghost' }),
-                  'absolute right-4 top-4 md:right-8 md:top-8',
+                  buttonVariants({ variant: "ghost" }),
+                  "absolute right-4 top-4 md:right-8 md:top-8",
                )}
             >
                Login
             </Link>
-            <div className="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
+            <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
                <div className="absolute inset-0 bg-zinc-900" />
                <div className="relative z-20 flex items-center text-lg font-medium">
                   <svg
@@ -51,7 +51,7 @@ export default function AuthenticationPage() {
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
-                     className="mr-2 size-6"
+                     className="mr-2 h-6 w-6"
                   >
                      <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
                   </svg>
@@ -60,9 +60,9 @@ export default function AuthenticationPage() {
                <div className="relative z-20 mt-auto">
                   <blockquote className="space-y-2">
                      <p className="text-lg">
-                        &ldquo;This library has saved me countless hours of work and
-                        helped me deliver stunning designs to my clients faster than
-                        ever before.&rdquo;
+                        &ldquo;This library has saved me countless hours of work
+                        and helped me deliver stunning designs to my clients
+                        faster than ever before.&rdquo;
                      </p>
                      <footer className="text-sm">Sofia Davis</footer>
                   </blockquote>
@@ -74,26 +74,23 @@ export default function AuthenticationPage() {
                      <h1 className="text-2xl font-semibold tracking-tight">
                         Create an account
                      </h1>
-                     <p className="text-muted-foreground text-sm">
+                     <p className="text-sm text-muted-foreground">
                         Enter your email below to create your account
                      </p>
                   </div>
                   <UserAuthForm />
-                  <p className="text-muted-foreground px-8 text-center text-sm">
-                     By clicking continue, you agree to our
-                     {' '}
+                  <p className="px-8 text-center text-sm text-muted-foreground">
+                     By clicking continue, you agree to our{" "}
                      <Link
                         href="/terms"
-                        className="hover:text-primary underline underline-offset-4"
+                        className="underline underline-offset-4 hover:text-primary"
                      >
                         Terms of Service
-                     </Link>
-                     {' '}
-                     and
-                     {' '}
+                     </Link>{" "}
+                     and{" "}
                      <Link
                         href="/privacy"
-                        className="hover:text-primary underline underline-offset-4"
+                        className="underline underline-offset-4 hover:text-primary"
                      >
                         Privacy Policy
                      </Link>
diff --git a/apps/web/app/(app)/examples/cards/components/cookie-settings.tsx b/apps/web/app/(app)/examples/cards/components/cookie-settings.tsx
index de58e53f..b0f707ab 100644
--- a/apps/web/app/(app)/examples/cards/components/cookie-settings.tsx
+++ b/apps/web/app/(app)/examples/cards/components/cookie-settings.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
@@ -8,9 +8,9 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import { Label } from '~/registry/miami/ui/label'
-import { Switch } from '~/registry/miami/ui/switch'
+} from "~/registry/miami/ui/card"
+import { Label } from "~/registry/miami/ui/label"
+import { Switch } from "~/registry/miami/ui/switch"
 
 export function DemoCookieSettings() {
    return (
@@ -23,9 +23,9 @@ export function DemoCookieSettings() {
             <div className="flex items-center justify-between space-x-2">
                <Label htmlFor="necessary" className="flex flex-col space-y-1">
                   <span>Strictly Necessary</span>
-                  <span className="text-muted-foreground font-normal leading-snug">
-                     These cookies are essential in order to use the website and use
-                     its features.
+                  <span className="font-normal leading-snug text-muted-foreground">
+                     These cookies are essential in order to use the website and
+                     use its features.
                   </span>
                </Label>
                <Switch id="necessary" defaultChecked />
@@ -33,7 +33,7 @@ export function DemoCookieSettings() {
             <div className="flex items-center justify-between space-x-2">
                <Label htmlFor="functional" className="flex flex-col space-y-1">
                   <span>Functional Cookies</span>
-                  <span className="text-muted-foreground font-normal leading-snug">
+                  <span className="font-normal leading-snug text-muted-foreground">
                      These cookies allow the website to provide personalized
                      functionality.
                   </span>
@@ -43,8 +43,9 @@ export function DemoCookieSettings() {
             <div className="flex items-center justify-between space-x-2">
                <Label htmlFor="performance" className="flex flex-col space-y-1">
                   <span>Performance Cookies</span>
-                  <span className="text-muted-foreground font-normal leading-snug">
-                     These cookies help to improve the performance of the website.
+                  <span className="font-normal leading-snug text-muted-foreground">
+                     These cookies help to improve the performance of the
+                     website.
                   </span>
                </Label>
                <Switch id="performance" />
diff --git a/apps/web/app/(app)/examples/cards/components/create-account.tsx b/apps/web/app/(app)/examples/cards/components/create-account.tsx
index edee5998..60ec9604 100644
--- a/apps/web/app/(app)/examples/cards/components/create-account.tsx
+++ b/apps/web/app/(app)/examples/cards/components/create-account.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { Icons } from '~/components/icons'
-import { Button } from '~/registry/miami/ui/button'
+import { Icons } from "~/components/icons"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
@@ -9,9 +9,9 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 
 export function DemoCreateAccount() {
    return (
@@ -25,11 +25,11 @@ export function DemoCreateAccount() {
          <CardContent className="grid gap-4">
             <div className="grid grid-cols-2 gap-6">
                <Button variant="outline">
-                  <Icons.gitHub className="mr-2 size-4" />
+                  <Icons.gitHub className="mr-2 h-4 w-4" />
                   Github
                </Button>
                <Button variant="outline">
-                  <Icons.google className="mr-2 size-4" />
+                  <Icons.google className="mr-2 h-4 w-4" />
                   Google
                </Button>
             </div>
@@ -38,7 +38,7 @@ export function DemoCreateAccount() {
                   <span className="w-full border-t" />
                </div>
                <div className="relative flex justify-center text-xs uppercase">
-                  <span className="bg-background text-muted-foreground px-2">
+                  <span className="bg-background px-2 text-muted-foreground">
                      Or continue with
                   </span>
                </div>
diff --git a/apps/web/app/(app)/examples/cards/components/date-picker.tsx b/apps/web/app/(app)/examples/cards/components/date-picker.tsx
index 9f2c02d4..772d6e31 100644
--- a/apps/web/app/(app)/examples/cards/components/date-picker.tsx
+++ b/apps/web/app/(app)/examples/cards/components/date-picker.tsx
@@ -1,6 +1,6 @@
-import DatePickerWithRange from '~/registry/default/example/date-picker-with-range'
-import { Card, CardContent } from '~/registry/miami/ui/card'
-import { Label } from '~/registry/miami/ui/label'
+import DatePickerWithRange from "~/registry/default/examples/date-picker-with-range"
+import { Card, CardContent } from "~/registry/miami/ui/card"
+import { Label } from "~/registry/miami/ui/label"
 
 export function DemoDatePicker() {
    return (
diff --git a/apps/web/app/(app)/examples/cards/components/github-card.tsx b/apps/web/app/(app)/examples/cards/components/github-card.tsx
index 002c635f..2e4e072c 100644
--- a/apps/web/app/(app)/examples/cards/components/github-card.tsx
+++ b/apps/web/app/(app)/examples/cards/components/github-card.tsx
@@ -1,13 +1,13 @@
-import { ChevronDown, Circle, Plus, Star } from 'lucide-react'
+import { ChevronDown, Circle, Plus, Star } from "lucide-react"
 
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
+} from "~/registry/miami/ui/card"
 import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
@@ -16,21 +16,21 @@ import {
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/dropdown-menu"
+import { Separator } from "~/registry/miami/ui/separator"
 
 export function DemoGithub() {
    return (
       <Card>
          <CardHeader className="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
             <div className="space-y-1">
-               <CardTitle>shadcn/ui</CardTitle>
+               <CardTitle>nyxb/ui</CardTitle>
                <CardDescription>
-                  Beautifully designed components that you can copy and paste into
-                  your apps. Accessible. Customizable. Open Source.
+                  Beautifully designed components that you can copy and paste
+                  into your apps. Accessible. Customizable. Open Source.
                </CardDescription>
             </div>
-            <div className="bg-secondary text-secondary-foreground flex items-center space-x-1 rounded-md">
+            <div className="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
                <Button variant="secondary" className="px-3 shadow-none">
                   <Star />
                   Star
@@ -53,26 +53,28 @@ export function DemoGithub() {
                      <DropdownMenuCheckboxItem checked>
                         Future Ideas
                      </DropdownMenuCheckboxItem>
-                     <DropdownMenuCheckboxItem>My Stack</DropdownMenuCheckboxItem>
-                     <DropdownMenuCheckboxItem>Inspiration</DropdownMenuCheckboxItem>
+                     <DropdownMenuCheckboxItem>
+                        My Stack
+                     </DropdownMenuCheckboxItem>
+                     <DropdownMenuCheckboxItem>
+                        Inspiration
+                     </DropdownMenuCheckboxItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem>
-                        <Plus />
-                        {' '}
-                        Create List
+                        <Plus /> Create List
                      </DropdownMenuItem>
                   </DropdownMenuContent>
                </DropdownMenu>
             </div>
          </CardHeader>
          <CardContent>
-            <div className="text-muted-foreground flex space-x-4 text-sm">
+            <div className="flex space-x-4 text-sm text-muted-foreground">
                <div className="flex items-center">
-                  <Circle className="mr-1 size-3 fill-sky-400 text-sky-400" />
+                  <Circle className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
                   TypeScript
                </div>
                <div className="flex items-center">
-                  <Star className="mr-1 size-3" />
+                  <Star className="mr-1 h-3 w-3" />
                   20k
                </div>
                <div>Updated April 2023</div>
diff --git a/apps/web/app/(app)/examples/cards/components/notifications.tsx b/apps/web/app/(app)/examples/cards/components/notifications.tsx
index ab099be8..773b0068 100644
--- a/apps/web/app/(app)/examples/cards/components/notifications.tsx
+++ b/apps/web/app/(app)/examples/cards/components/notifications.tsx
@@ -1,4 +1,4 @@
-import { Bell, EyeOff, User } from 'lucide-react'
+import { Bell, EyeOff, User } from "lucide-react"
 
 import {
    Card,
@@ -6,7 +6,7 @@ import {
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
+} from "~/registry/miami/ui/card"
 
 export function DemoNotifications() {
    return (
@@ -18,29 +18,29 @@ export function DemoNotifications() {
             </CardDescription>
          </CardHeader>
          <CardContent className="grid gap-1">
-            <div className="hover:bg-accent hover:text-accent-foreground -mx-2 flex items-start space-x-4 rounded-md p-2 transition-all">
-               <Bell className="mt-px size-5" />
+            <div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
+               <Bell className="mt-px h-5 w-5" />
                <div className="space-y-1">
                   <p className="text-sm font-medium leading-none">Everything</p>
-                  <p className="text-muted-foreground text-sm">
+                  <p className="text-sm text-muted-foreground">
                      Email digest, mentions & all activity.
                   </p>
                </div>
             </div>
-            <div className="bg-accent text-accent-foreground -mx-2 flex items-start space-x-4 rounded-md p-2 transition-all">
-               <User className="mt-px size-5" />
+            <div className="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
+               <User className="mt-px h-5 w-5" />
                <div className="space-y-1">
                   <p className="text-sm font-medium leading-none">Available</p>
-                  <p className="text-muted-foreground text-sm">
+                  <p className="text-sm text-muted-foreground">
                      Only mentions and comments.
                   </p>
                </div>
             </div>
-            <div className="hover:bg-accent hover:text-accent-foreground -mx-2 flex items-start space-x-4 rounded-md p-2 transition-all">
-               <EyeOff className="mt-px size-5" />
+            <div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
+               <EyeOff className="mt-px h-5 w-5" />
                <div className="space-y-1">
                   <p className="text-sm font-medium leading-none">Ignoring</p>
-                  <p className="text-muted-foreground text-sm">
+                  <p className="text-sm text-muted-foreground">
                      Turn off all notifications.
                   </p>
                </div>
diff --git a/apps/web/app/(app)/examples/cards/components/payment-method.tsx b/apps/web/app/(app)/examples/cards/components/payment-method.tsx
index 12c17802..44011fb5 100644
--- a/apps/web/app/(app)/examples/cards/components/payment-method.tsx
+++ b/apps/web/app/(app)/examples/cards/components/payment-method.tsx
@@ -1,5 +1,5 @@
-import { Icons } from '~/components/icons'
-import { Button } from '~/registry/miami/ui/button'
+import { Icons } from "~/components/icons"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
@@ -7,17 +7,17 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/miami/ui/radio-group"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/miami/ui/select'
+} from "~/registry/miami/ui/select"
 
 export function DemoPaymentMethod() {
    return (
@@ -31,10 +31,14 @@ export function DemoPaymentMethod() {
          <CardContent className="grid gap-6">
             <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
                <div>
-                  <RadioGroupItem value="card" id="card" className="peer sr-only" />
+                  <RadioGroupItem
+                     value="card"
+                     id="card"
+                     className="peer sr-only"
+                  />
                   <Label
                      htmlFor="card"
-                     className="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4"
+                     className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                   >
                      <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -44,7 +48,7 @@ export function DemoPaymentMethod() {
                         strokeLinecap="round"
                         strokeLinejoin="round"
                         strokeWidth="2"
-                        className="mb-3 size-6"
+                        className="mb-3 h-6 w-6"
                      >
                         <rect width="20" height="14" x="2" y="5" rx="2" />
                         <path d="M2 10h20" />
@@ -60,19 +64,23 @@ export function DemoPaymentMethod() {
                   />
                   <Label
                      htmlFor="paypal"
-                     className="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4"
+                     className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                   >
-                     <Icons.paypal className="mb-3 size-6" />
+                     <Icons.paypal className="mb-3 h-6 w-6" />
                      Paypal
                   </Label>
                </div>
                <div>
-                  <RadioGroupItem value="apple" id="apple" className="peer sr-only" />
+                  <RadioGroupItem
+                     value="apple"
+                     id="apple"
+                     className="peer sr-only"
+                  />
                   <Label
                      htmlFor="apple"
-                     className="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4"
+                     className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                   >
-                     <Icons.apple className="mb-3 size-6" />
+                     <Icons.apple className="mb-3 h-6 w-6" />
                      Apple
                   </Label>
                </div>
@@ -116,7 +124,10 @@ export function DemoPaymentMethod() {
                      </SelectTrigger>
                      <SelectContent>
                         {Array.from({ length: 10 }, (_, i) => (
-                           <SelectItem key={i} value={`${new Date().getFullYear() + i}`}>
+                           <SelectItem
+                              key={i}
+                              value={`${new Date().getFullYear() + i}`}
+                           >
                               {new Date().getFullYear() + i}
                            </SelectItem>
                         ))}
diff --git a/apps/web/app/(app)/examples/cards/components/report-an-issue.tsx b/apps/web/app/(app)/examples/cards/components/report-an-issue.tsx
index a6e021d7..9897264c 100644
--- a/apps/web/app/(app)/examples/cards/components/report-an-issue.tsx
+++ b/apps/web/app/(app)/examples/cards/components/report-an-issue.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
@@ -8,17 +8,17 @@ import {
    CardFooter,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/miami/ui/select'
-import { Textarea } from '~/registry/miami/ui/textarea'
+} from "~/registry/miami/ui/select"
+import { Textarea } from "~/registry/miami/ui/textarea"
 
 export function DemoReportAnIssue() {
    return (
diff --git a/apps/web/app/(app)/examples/cards/components/share-document.tsx b/apps/web/app/(app)/examples/cards/components/share-document.tsx
index 1692d2a1..efbcd85c 100644
--- a/apps/web/app/(app)/examples/cards/components/share-document.tsx
+++ b/apps/web/app/(app)/examples/cards/components/share-document.tsx
@@ -1,27 +1,23 @@
-'use client'
+"use client"
 
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Button } from '~/registry/miami/ui/button'
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/miami/ui/select'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/select"
+import { Separator } from "~/registry/miami/ui/separator"
 
 export function DemoShareDocument() {
    return (
@@ -53,7 +49,9 @@ export function DemoShareDocument() {
                            <p className="text-sm font-medium leading-none">
                               Olivia Martin
                            </p>
-                           <p className="text-muted-foreground text-sm">m@example.com</p>
+                           <p className="text-sm text-muted-foreground">
+                              m@example.com
+                           </p>
                         </div>
                      </div>
                      <Select defaultValue="edit">
@@ -76,7 +74,9 @@ export function DemoShareDocument() {
                            <p className="text-sm font-medium leading-none">
                               Isabella Nguyen
                            </p>
-                           <p className="text-muted-foreground text-sm">b@example.com</p>
+                           <p className="text-sm text-muted-foreground">
+                              b@example.com
+                           </p>
                         </div>
                      </div>
                      <Select defaultValue="view">
@@ -99,7 +99,9 @@ export function DemoShareDocument() {
                            <p className="text-sm font-medium leading-none">
                               Sofia Davis
                            </p>
-                           <p className="text-muted-foreground text-sm">p@example.com</p>
+                           <p className="text-sm text-muted-foreground">
+                              p@example.com
+                           </p>
                         </div>
                      </div>
                      <Select defaultValue="view">
diff --git a/apps/web/app/(app)/examples/cards/components/team-members.tsx b/apps/web/app/(app)/examples/cards/components/team-members.tsx
index ac62a5fa..00bd0bf4 100644
--- a/apps/web/app/(app)/examples/cards/components/team-members.tsx
+++ b/apps/web/app/(app)/examples/cards/components/team-members.tsx
@@ -1,18 +1,14 @@
-import { ChevronDown } from 'lucide-react'
+import { ChevronDown } from "lucide-react"
 
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Button } from '~/registry/miami/ui/button'
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
+} from "~/registry/miami/ui/card"
 import {
    Command,
    CommandEmpty,
@@ -20,12 +16,12 @@ import {
    CommandInput,
    CommandItem,
    CommandList,
-} from '~/registry/miami/ui/command'
+} from "~/registry/miami/ui/command"
 import {
    Popover,
    PopoverContent,
    PopoverTrigger,
-} from '~/registry/miami/ui/popover'
+} from "~/registry/miami/ui/popover"
 
 export function DemoTeamMembers() {
    return (
@@ -44,16 +40,18 @@ export function DemoTeamMembers() {
                      <AvatarFallback>OM</AvatarFallback>
                   </Avatar>
                   <div>
-                     <p className="text-sm font-medium leading-none">Sofia Davis</p>
-                     <p className="text-muted-foreground text-sm">m@example.com</p>
+                     <p className="text-sm font-medium leading-none">
+                        Sofia Davis
+                     </p>
+                     <p className="text-sm text-muted-foreground">
+                        m@example.com
+                     </p>
                   </div>
                </div>
                <Popover>
                   <PopoverTrigger asChild>
                      <Button variant="outline" className="ml-auto">
-                        Owner
-                        {' '}
-                        <ChevronDown className="text-muted-foreground" />
+                        Owner <ChevronDown className="text-muted-foreground" />
                      </Button>
                   </PopoverTrigger>
                   <PopoverContent className="p-0" align="end">
@@ -64,25 +62,25 @@ export function DemoTeamMembers() {
                            <CommandGroup>
                               <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                                  <p>Viewer</p>
-                                 <p className="text-muted-foreground text-sm">
+                                 <p className="text-sm text-muted-foreground">
                                     Can view and comment.
                                  </p>
                               </CommandItem>
                               <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                                  <p>Developer</p>
-                                 <p className="text-muted-foreground text-sm">
+                                 <p className="text-sm text-muted-foreground">
                                     Can view, comment and edit.
                                  </p>
                               </CommandItem>
                               <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                                  <p>Billing</p>
-                                 <p className="text-muted-foreground text-sm">
+                                 <p className="text-sm text-muted-foreground">
                                     Can view, comment and manage billing.
                                  </p>
                               </CommandItem>
                               <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                                  <p>Owner</p>
-                                 <p className="text-muted-foreground text-sm">
+                                 <p className="text-sm text-muted-foreground">
                                     Admin-level access to all resources.
                                  </p>
                               </CommandItem>
@@ -99,16 +97,18 @@ export function DemoTeamMembers() {
                      <AvatarFallback>JL</AvatarFallback>
                   </Avatar>
                   <div>
-                     <p className="text-sm font-medium leading-none">Jackson Lee</p>
-                     <p className="text-muted-foreground text-sm">p@example.com</p>
+                     <p className="text-sm font-medium leading-none">
+                        Jackson Lee
+                     </p>
+                     <p className="text-sm text-muted-foreground">
+                        p@example.com
+                     </p>
                   </div>
                </div>
                <Popover>
                   <PopoverTrigger asChild>
                      <Button variant="outline" className="ml-auto">
-                        Member
-                        {' '}
-                        <ChevronDown className="text-muted-foreground" />
+                        Member <ChevronDown className="text-muted-foreground" />
                      </Button>
                   </PopoverTrigger>
                   <PopoverContent className="p-0" align="end">
@@ -119,25 +119,25 @@ export function DemoTeamMembers() {
                            <CommandGroup className="p-1.5">
                               <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                                  <p>Viewer</p>
-                                 <p className="text-muted-foreground text-sm">
+                                 <p className="text-sm text-muted-foreground">
                                     Can view and comment.
                                  </p>
                               </CommandItem>
                               <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                                  <p>Developer</p>
-                                 <p className="text-muted-foreground text-sm">
+                                 <p className="text-sm text-muted-foreground">
                                     Can view, comment and edit.
                                  </p>
                               </CommandItem>
                               <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                                  <p>Billing</p>
-                                 <p className="text-muted-foreground text-sm">
+                                 <p className="text-sm text-muted-foreground">
                                     Can view, comment and manage billing.
                                  </p>
                               </CommandItem>
                               <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                                  <p>Owner</p>
-                                 <p className="text-muted-foreground text-sm">
+                                 <p className="text-sm text-muted-foreground">
                                     Admin-level access to all resources.
                                  </p>
                               </CommandItem>
diff --git a/apps/web/app/(app)/examples/cards/page.tsx b/apps/web/app/(app)/examples/cards/page.tsx
index 02996c18..c5263978 100644
--- a/apps/web/app/(app)/examples/cards/page.tsx
+++ b/apps/web/app/(app)/examples/cards/page.tsx
@@ -1,20 +1,21 @@
-import type { Metadata } from 'next'
-import Image from 'next/image'
+import type { Metadata } from "next"
+import Image from "next/image"
 
-import { DemoCookieSettings } from './components/cookie-settings'
-import { DemoCreateAccount } from './components/create-account'
-import { DemoDatePicker } from './components/date-picker'
-import { DemoGithub } from './components/github-card'
-import { DemoNotifications } from './components/notifications'
-import { DemoPaymentMethod } from './components/payment-method'
-import { DemoReportAnIssue } from './components/report-an-issue'
-import { DemoShareDocument } from './components/share-document'
-import { DemoTeamMembers } from './components/team-members'
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
+
+import { DemoCookieSettings } from "./components/cookie-settings"
+import { DemoCreateAccount } from "./components/create-account"
+import { DemoDatePicker } from "./components/date-picker"
+import { DemoGithub } from "./components/github-card"
+import { DemoNotifications } from "./components/notifications"
+import { DemoPaymentMethod } from "./components/payment-method"
+import { DemoReportAnIssue } from "./components/report-an-issue"
+import { DemoShareDocument } from "./components/share-document"
+import { DemoTeamMembers } from "./components/team-members"
 
 export const metadata: Metadata = {
-   title: 'Cards',
-   description: 'Examples of cards built using the components.',
+   title: "Cards",
+   description: "Examples of cards built using the components.",
 }
 
 function DemoContainer({
@@ -24,7 +25,7 @@ function DemoContainer({
    return (
       <div
          className={ny(
-            'flex items-center justify-center [&>div]:w-full',
+            "flex items-center justify-center [&>div]:w-full",
             className,
          )}
          {...props}
diff --git a/apps/web/app/(app)/examples/dashboard/components/date-range-picker.tsx b/apps/web/app/(app)/examples/dashboard/components/date-range-picker.tsx
index e7ac0648..a97e0fff 100644
--- a/apps/web/app/(app)/examples/dashboard/components/date-range-picker.tsx
+++ b/apps/web/app/(app)/examples/dashboard/components/date-range-picker.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { addDays, format } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-import type { DateRange } from 'react-day-picker'
+import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import * as React from "react"
+import type { DateRange } from "react-day-picker"
 
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import { Calendar } from '~/registry/miami/ui/calendar'
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Calendar } from "~/registry/miami/ui/calendar"
 import {
    Popover,
    PopoverContent,
    PopoverTrigger,
-} from '~/registry/miami/ui/popover'
+} from "~/registry/miami/ui/popover"
 
 export function CalendarDateRangePicker({
    className,
@@ -23,37 +23,30 @@ export function CalendarDateRangePicker({
    })
 
    return (
-      <div className={ny('grid gap-2', className)}>
+      <div className={ny("grid gap-2", className)}>
          <Popover>
             <PopoverTrigger asChild>
                <Button
                   id="date"
-                  variant="outline"
+                  variant={"outline"}
                   className={ny(
-                     'w-[260px] justify-start text-left font-normal',
-                     !date && 'text-muted-foreground',
+                     "w-[260px] justify-start text-left font-normal",
+                     !date && "text-muted-foreground",
                   )}
                >
-                  <CalendarIcon className="mr-2 size-4" />
-                  {date?.from
-                     ? (
-                           date.to
-                              ? (
-                                    <>
-                                       {format(date.from, 'LLL dd, y')}
-                                       {' '}
-                                       -
-                                       {' '}
-                                       {format(date.to, 'LLL dd, y')}
-                                    </>
-                                 )
-                              : (
-                                    format(date.from, 'LLL dd, y')
-                                 )
-                        )
-                     : (
-                           <span>Pick a date</span>
-                        )}
+                  <CalendarIcon className="mr-2 h-4 w-4" />
+                  {date?.from ? (
+                     date.to ? (
+                        <>
+                           {format(date.from, "LLL dd, y")} -{" "}
+                           {format(date.to, "LLL dd, y")}
+                        </>
+                     ) : (
+                        format(date.from, "LLL dd, y")
+                     )
+                  ) : (
+                     <span>Pick a date</span>
+                  )}
                </Button>
             </PopoverTrigger>
             <PopoverContent className="w-auto p-0" align="end">
diff --git a/apps/web/app/(app)/examples/dashboard/components/main-nav.tsx b/apps/web/app/(app)/examples/dashboard/components/main-nav.tsx
index 3effb906..a6d4a166 100644
--- a/apps/web/app/(app)/examples/dashboard/components/main-nav.tsx
+++ b/apps/web/app/(app)/examples/dashboard/components/main-nav.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link'
+import Link from "next/link"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 export function MainNav({
    className,
@@ -8,30 +8,30 @@ export function MainNav({
 }: React.HTMLAttributes<HTMLElement>) {
    return (
       <nav
-         className={ny('flex items-center space-x-4 lg:space-x-6', className)}
+         className={ny("flex items-center space-x-4 lg:space-x-6", className)}
          {...props}
       >
          <Link
             href="/examples/dashboard"
-            className="hover:text-primary text-sm font-medium transition-colors"
+            className="text-sm font-medium transition-colors hover:text-primary"
          >
             Overview
          </Link>
          <Link
             href="/examples/dashboard"
-            className="text-muted-foreground hover:text-primary text-sm font-medium transition-colors"
+            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
          >
             Customers
          </Link>
          <Link
             href="/examples/dashboard"
-            className="text-muted-foreground hover:text-primary text-sm font-medium transition-colors"
+            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
          >
             Products
          </Link>
          <Link
             href="/examples/dashboard"
-            className="text-muted-foreground hover:text-primary text-sm font-medium transition-colors"
+            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
          >
             Settings
          </Link>
diff --git a/apps/web/app/(app)/examples/dashboard/components/overview.tsx b/apps/web/app/(app)/examples/dashboard/components/overview.tsx
index de2afa9c..80b085f0 100644
--- a/apps/web/app/(app)/examples/dashboard/components/overview.tsx
+++ b/apps/web/app/(app)/examples/dashboard/components/overview.tsx
@@ -1,83 +1,83 @@
-'use client'
+"use client"
 
-import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"
 
 const data = [
-   {
-      name: 'Jan',
-      total: Math.floor(Math.random() * 5000) + 1000,
-   },
-   {
-      name: 'Feb',
-      total: Math.floor(Math.random() * 5000) + 1000,
-   },
-   {
-      name: 'Mar',
-      total: Math.floor(Math.random() * 5000) + 1000,
-   },
-   {
-      name: 'Apr',
-      total: Math.floor(Math.random() * 5000) + 1000,
-   },
-   {
-      name: 'May',
-      total: Math.floor(Math.random() * 5000) + 1000,
-   },
-   {
-      name: 'Jun',
-      total: Math.floor(Math.random() * 5000) + 1000,
-   },
-   {
-      name: 'Jul',
-      total: Math.floor(Math.random() * 5000) + 1000,
-   },
-   {
-      name: 'Aug',
-      total: Math.floor(Math.random() * 5000) + 1000,
-   },
-   {
-      name: 'Sep',
-      total: Math.floor(Math.random() * 5000) + 1000,
-   },
-   {
-      name: 'Oct',
-      total: Math.floor(Math.random() * 5000) + 1000,
-   },
-   {
-      name: 'Nov',
-      total: Math.floor(Math.random() * 5000) + 1000,
-   },
-   {
-      name: 'Dec',
-      total: Math.floor(Math.random() * 5000) + 1000,
-   },
+  {
+    name: "Jan",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Feb",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Mar",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Apr",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "May",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Jun",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Jul",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Aug",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Sep",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Oct",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Nov",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Dec",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
 ]
 
 export function Overview() {
-   return (
-      <ResponsiveContainer width="100%" height={350}>
-         <BarChart data={data}>
-            <XAxis
-               dataKey="name"
-               stroke="#888888"
-               fontSize={12}
-               tickLine={false}
-               axisLine={false}
-            />
-            <YAxis
-               stroke="#888888"
-               fontSize={12}
-               tickLine={false}
-               axisLine={false}
-               tickFormatter={value => `$${value}`}
-            />
-            <Bar
-               dataKey="total"
-               fill="currentColor"
-               radius={[4, 4, 0, 0]}
-               className="fill-primary"
-            />
-         </BarChart>
-      </ResponsiveContainer>
-   )
+  return (
+    <ResponsiveContainer width="100%" height={350}>
+      <BarChart data={data}>
+        <XAxis
+          dataKey="name"
+          stroke="#888888"
+          fontSize={12}
+          tickLine={false}
+          axisLine={false}
+        />
+        <YAxis
+          stroke="#888888"
+          fontSize={12}
+          tickLine={false}
+          axisLine={false}
+          tickFormatter={(value) => `$${value}`}
+        />
+        <Bar
+          dataKey="total"
+          fill="currentColor"
+          radius={[4, 4, 0, 0]}
+          className="fill-primary"
+        />
+      </BarChart>
+    </ResponsiveContainer>
+  )
 }
diff --git a/apps/web/app/(app)/examples/dashboard/components/recent-sales.tsx b/apps/web/app/(app)/examples/dashboard/components/recent-sales.tsx
index 7852c5c8..4a883ec5 100644
--- a/apps/web/app/(app)/examples/dashboard/components/recent-sales.tsx
+++ b/apps/web/app/(app)/examples/dashboard/components/recent-sales.tsx
@@ -1,68 +1,70 @@
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
 
 export function RecentSales() {
    return (
       <div className="space-y-8">
          <div className="flex items-center">
-            <Avatar className="size-9">
+            <Avatar className="h-9 w-9">
                <AvatarImage src="/avatars/01.png" alt="Avatar" />
                <AvatarFallback>OM</AvatarFallback>
             </Avatar>
             <div className="ml-4 space-y-1">
                <p className="text-sm font-medium leading-none">Olivia Martin</p>
-               <p className="text-muted-foreground text-sm">
+               <p className="text-sm text-muted-foreground">
                   olivia.martin@email.com
                </p>
             </div>
             <div className="ml-auto font-medium">+$1,999.00</div>
          </div>
          <div className="flex items-center">
-            <Avatar className="flex size-9 items-center justify-center space-y-0 border">
+            <Avatar className="flex h-9 w-9 items-center justify-center space-y-0 border">
                <AvatarImage src="/avatars/02.png" alt="Avatar" />
                <AvatarFallback>JL</AvatarFallback>
             </Avatar>
             <div className="ml-4 space-y-1">
                <p className="text-sm font-medium leading-none">Jackson Lee</p>
-               <p className="text-muted-foreground text-sm">jackson.lee@email.com</p>
+               <p className="text-sm text-muted-foreground">
+                  jackson.lee@email.com
+               </p>
             </div>
             <div className="ml-auto font-medium">+$39.00</div>
          </div>
          <div className="flex items-center">
-            <Avatar className="size-9">
+            <Avatar className="h-9 w-9">
                <AvatarImage src="/avatars/03.png" alt="Avatar" />
                <AvatarFallback>IN</AvatarFallback>
             </Avatar>
             <div className="ml-4 space-y-1">
-               <p className="text-sm font-medium leading-none">Isabella Nguyen</p>
-               <p className="text-muted-foreground text-sm">
+               <p className="text-sm font-medium leading-none">
+                  Isabella Nguyen
+               </p>
+               <p className="text-sm text-muted-foreground">
                   isabella.nguyen@email.com
                </p>
             </div>
             <div className="ml-auto font-medium">+$299.00</div>
          </div>
          <div className="flex items-center">
-            <Avatar className="size-9">
+            <Avatar className="h-9 w-9">
                <AvatarImage src="/avatars/04.png" alt="Avatar" />
                <AvatarFallback>WK</AvatarFallback>
             </Avatar>
             <div className="ml-4 space-y-1">
                <p className="text-sm font-medium leading-none">William Kim</p>
-               <p className="text-muted-foreground text-sm">will@email.com</p>
+               <p className="text-sm text-muted-foreground">will@email.com</p>
             </div>
             <div className="ml-auto font-medium">+$99.00</div>
          </div>
          <div className="flex items-center">
-            <Avatar className="size-9">
+            <Avatar className="h-9 w-9">
                <AvatarImage src="/avatars/05.png" alt="Avatar" />
                <AvatarFallback>SD</AvatarFallback>
             </Avatar>
             <div className="ml-4 space-y-1">
                <p className="text-sm font-medium leading-none">Sofia Davis</p>
-               <p className="text-muted-foreground text-sm">sofia.davis@email.com</p>
+               <p className="text-sm text-muted-foreground">
+                  sofia.davis@email.com
+               </p>
             </div>
             <div className="ml-auto font-medium">+$39.00</div>
          </div>
diff --git a/apps/web/app/(app)/examples/dashboard/components/search.tsx b/apps/web/app/(app)/examples/dashboard/components/search.tsx
index fc5cf78a..24022784 100644
--- a/apps/web/app/(app)/examples/dashboard/components/search.tsx
+++ b/apps/web/app/(app)/examples/dashboard/components/search.tsx
@@ -1,4 +1,4 @@
-import { Input } from '~/registry/miami/ui/input'
+import { Input } from "~/registry/miami/ui/input"
 
 export function Search() {
    return (
diff --git a/apps/web/app/(app)/examples/dashboard/components/team-switcher.tsx b/apps/web/app/(app)/examples/dashboard/components/team-switcher.tsx
index 52448640..642ed1c3 100644
--- a/apps/web/app/(app)/examples/dashboard/components/team-switcher.tsx
+++ b/apps/web/app/(app)/examples/dashboard/components/team-switcher.tsx
@@ -1,15 +1,11 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Check, ChevronsUpDown, PlusCircle } from 'lucide-react'
+import { Check, ChevronsUpDown, PlusCircle } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Button } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Command,
    CommandEmpty,
@@ -18,7 +14,7 @@ import {
    CommandItem,
    CommandList,
    CommandSeparator,
-} from '~/registry/miami/ui/command'
+} from "~/registry/miami/ui/command"
 import {
    Dialog,
    DialogContent,
@@ -27,48 +23,48 @@ import {
    DialogHeader,
    DialogTitle,
    DialogTrigger,
-} from '~/registry/miami/ui/dialog'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/dialog"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 import {
    Popover,
    PopoverContent,
    PopoverTrigger,
-} from '~/registry/miami/ui/popover'
+} from "~/registry/miami/ui/popover"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/miami/ui/select'
+} from "~/registry/miami/ui/select"
 
 const groups = [
    {
-      label: 'Personal Account',
+      label: "Personal Account",
       teams: [
          {
-            label: 'Alicia Koch',
-            value: 'personal',
+            label: "Alicia Koch",
+            value: "personal",
          },
       ],
    },
    {
-      label: 'Teams',
+      label: "Teams",
       teams: [
          {
-            label: 'Acme Inc.',
-            value: 'acme-inc',
+            label: "Acme Inc.",
+            value: "acme-inc",
          },
          {
-            label: 'Monsters Inc.',
-            value: 'monsters',
+            label: "Monsters Inc.",
+            value: "monsters",
          },
       ],
    },
 ]
 
-type Team = (typeof groups)[number]['teams'][number]
+type Team = (typeof groups)[number]["teams"][number]
 
 type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverTrigger>
 
@@ -90,9 +86,9 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                   role="combobox"
                   aria-expanded={open}
                   aria-label="Select a team"
-                  className={ny('w-[200px] justify-between', className)}
+                  className={ny("w-[200px] justify-between", className)}
                >
-                  <Avatar className="mr-2 size-5">
+                  <Avatar className="mr-2 h-5 w-5">
                      <AvatarImage
                         src={`https://avatar.vercel.sh/${selectedTeam.value}.png`}
                         alt={selectedTeam.label}
@@ -109,9 +105,9 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                   <CommandInput placeholder="Search team..." />
                   <CommandList>
                      <CommandEmpty>No team found.</CommandEmpty>
-                     {groups.map(group => (
+                     {groups.map((group) => (
                         <CommandGroup key={group.label} heading={group.label}>
-                           {group.teams.map(team => (
+                           {group.teams.map((team) => (
                               <CommandItem
                                  key={team.value}
                                  onSelect={() => {
@@ -120,7 +116,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                                  }}
                                  className="text-sm"
                               >
-                                 <Avatar className="mr-2 size-5">
+                                 <Avatar className="mr-2 h-5 w-5">
                                     <AvatarImage
                                        src={`https://avatar.vercel.sh/${team.value}.png`}
                                        alt={team.label}
@@ -131,10 +127,10 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                                  {team.label}
                                  <Check
                                     className={ny(
-                                       'ml-auto',
+                                       "ml-auto",
                                        selectedTeam.value === team.value
-                                          ? 'opacity-100'
-                                          : 'opacity-0',
+                                          ? "opacity-100"
+                                          : "opacity-0",
                                     )}
                                  />
                               </CommandItem>
@@ -152,7 +148,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                                  setShowNewTeamDialog(true)
                               }}
                            >
-                              <PlusCircle className="size-5" />
+                              <PlusCircle className="h-5 w-5" />
                               Create Team
                            </CommandItem>
                         </DialogTrigger>
@@ -182,19 +178,13 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                         </SelectTrigger>
                         <SelectContent>
                            <SelectItem value="free">
-                              <span className="font-medium">Free</span>
-                              {' '}
-                              -
-                              {' '}
+                              <span className="font-medium">Free</span> -{" "}
                               <span className="text-muted-foreground">
                                  Trial for two weeks
                               </span>
                            </SelectItem>
                            <SelectItem value="pro">
-                              <span className="font-medium">Pro</span>
-                              {' '}
-                              -
-                              {' '}
+                              <span className="font-medium">Pro</span> -{" "}
                               <span className="text-muted-foreground">
                                  $9/month per user
                               </span>
@@ -205,7 +195,10 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                </div>
             </div>
             <DialogFooter>
-               <Button variant="outline" onClick={() => setShowNewTeamDialog(false)}>
+               <Button
+                  variant="outline"
+                  onClick={() => setShowNewTeamDialog(false)}
+               >
                   Cancel
                </Button>
                <Button type="submit">Continue</Button>
diff --git a/apps/web/app/(app)/examples/dashboard/components/user-nav.tsx b/apps/web/app/(app)/examples/dashboard/components/user-nav.tsx
index 3c84ab8f..5f0882ef 100644
--- a/apps/web/app/(app)/examples/dashboard/components/user-nav.tsx
+++ b/apps/web/app/(app)/examples/dashboard/components/user-nav.tsx
@@ -1,9 +1,5 @@
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Button } from '~/registry/miami/ui/button'
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -13,15 +9,15 @@ import {
    DropdownMenuSeparator,
    DropdownMenuShortcut,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
+} from "~/registry/miami/ui/dropdown-menu"
 
 export function UserNav() {
    return (
       <DropdownMenu>
          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="relative size-8 rounded-full">
-               <Avatar className="size-8">
-                  <AvatarImage src="/avatars/01.png" alt="@shadcn" />
+            <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+               <Avatar className="h-8 w-8">
+                  <AvatarImage src="/avatars/01.png" alt="@nyxb" />
                   <AvatarFallback>SC</AvatarFallback>
                </Avatar>
             </Button>
@@ -29,8 +25,8 @@ export function UserNav() {
          <DropdownMenuContent className="w-56" align="end" forceMount>
             <DropdownMenuLabel className="font-normal">
                <div className="flex flex-col space-y-1">
-                  <p className="text-sm font-medium leading-none">shadcn</p>
-                  <p className="text-muted-foreground text-xs leading-none">
+                  <p className="text-sm font-medium leading-none">nyxb</p>
+                  <p className="text-xs leading-none text-muted-foreground">
                      m@example.com
                   </p>
                </div>
diff --git a/apps/web/app/(app)/examples/dashboard/page.tsx b/apps/web/app/(app)/examples/dashboard/page.tsx
index f05b34aa..ac44a4d8 100644
--- a/apps/web/app/(app)/examples/dashboard/page.tsx
+++ b/apps/web/app/(app)/examples/dashboard/page.tsx
@@ -1,31 +1,31 @@
-import type { Metadata } from 'next'
-import Image from 'next/image'
+import type { Metadata } from "next"
+import Image from "next/image"
 
-import { Button } from '~/registry/miami/ui/button'
+import { CalendarDateRangePicker } from "~/app/(app)/examples/dashboard/components/date-range-picker"
+import { MainNav } from "~/app/(app)/examples/dashboard/components/main-nav"
+import { Overview } from "~/app/(app)/examples/dashboard/components/overview"
+import { RecentSales } from "~/app/(app)/examples/dashboard/components/recent-sales"
+import { Search } from "~/app/(app)/examples/dashboard/components/search"
+import TeamSwitcher from "~/app/(app)/examples/dashboard/components/team-switcher"
+import { UserNav } from "~/app/(app)/examples/dashboard/components/user-nav"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
-} from '~/registry/miami/ui/card'
+} from "~/registry/miami/ui/card"
 import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
-} from '~/registry/miami/ui/tabs'
-import { CalendarDateRangePicker } from '~/app/(app)/examples/dashboard/components/date-range-picker'
-import { MainNav } from '~/app/(app)/examples/dashboard/components/main-nav'
-import { Overview } from '~/app/(app)/examples/dashboard/components/overview'
-import { RecentSales } from '~/app/(app)/examples/dashboard/components/recent-sales'
-import { Search } from '~/app/(app)/examples/dashboard/components/search'
-import TeamSwitcher from '~/app/(app)/examples/dashboard/components/team-switcher'
-import { UserNav } from '~/app/(app)/examples/dashboard/components/user-nav'
+} from "~/registry/miami/ui/tabs"
 
 export const metadata: Metadata = {
-   title: 'Dashboard',
-   description: 'Example dashboard app built using the components.',
+   title: "Dashboard",
+   description: "Example dashboard app built using the components.",
 }
 
 export default function DashboardPage() {
@@ -60,7 +60,9 @@ export default function DashboardPage() {
             </div>
             <div className="flex-1 space-y-4 p-8 pt-6">
                <div className="flex items-center justify-between space-y-2">
-                  <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
+                  <h2 className="text-3xl font-bold tracking-tight">
+                     Dashboard
+                  </h2>
                   <div className="flex items-center space-x-2">
                      <CalendarDateRangePicker />
                      <Button>Download</Button>
@@ -94,14 +96,16 @@ export default function DashboardPage() {
                                  strokeLinecap="round"
                                  strokeLinejoin="round"
                                  strokeWidth="2"
-                                 className="text-muted-foreground size-4"
+                                 className="h-4 w-4 text-muted-foreground"
                               >
                                  <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
                               </svg>
                            </CardHeader>
                            <CardContent>
-                              <div className="text-2xl font-bold">$45,231.89</div>
-                              <p className="text-muted-foreground text-xs">
+                              <div className="text-2xl font-bold">
+                                 $45,231.89
+                              </div>
+                              <p className="text-xs text-muted-foreground">
                                  +20.1% from last month
                               </p>
                            </CardContent>
@@ -119,7 +123,7 @@ export default function DashboardPage() {
                                  strokeLinecap="round"
                                  strokeLinejoin="round"
                                  strokeWidth="2"
-                                 className="text-muted-foreground size-4"
+                                 className="h-4 w-4 text-muted-foreground"
                               >
                                  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                                  <circle cx="9" cy="7" r="4" />
@@ -128,14 +132,16 @@ export default function DashboardPage() {
                            </CardHeader>
                            <CardContent>
                               <div className="text-2xl font-bold">+2350</div>
-                              <p className="text-muted-foreground text-xs">
+                              <p className="text-xs text-muted-foreground">
                                  +180.1% from last month
                               </p>
                            </CardContent>
                         </Card>
                         <Card>
                            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                              <CardTitle className="text-sm font-medium">Sales</CardTitle>
+                              <CardTitle className="text-sm font-medium">
+                                 Sales
+                              </CardTitle>
                               <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 24 24"
@@ -144,15 +150,21 @@ export default function DashboardPage() {
                                  strokeLinecap="round"
                                  strokeLinejoin="round"
                                  strokeWidth="2"
-                                 className="text-muted-foreground size-4"
+                                 className="h-4 w-4 text-muted-foreground"
                               >
-                                 <rect width="20" height="14" x="2" y="5" rx="2" />
+                                 <rect
+                                    width="20"
+                                    height="14"
+                                    x="2"
+                                    y="5"
+                                    rx="2"
+                                 />
                                  <path d="M2 10h20" />
                               </svg>
                            </CardHeader>
                            <CardContent>
                               <div className="text-2xl font-bold">+12,234</div>
-                              <p className="text-muted-foreground text-xs">
+                              <p className="text-xs text-muted-foreground">
                                  +19% from last month
                               </p>
                            </CardContent>
@@ -170,14 +182,14 @@ export default function DashboardPage() {
                                  strokeLinecap="round"
                                  strokeLinejoin="round"
                                  strokeWidth="2"
-                                 className="text-muted-foreground size-4"
+                                 className="h-4 w-4 text-muted-foreground"
                               >
                                  <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
                               </svg>
                            </CardHeader>
                            <CardContent>
                               <div className="text-2xl font-bold">+573</div>
-                              <p className="text-muted-foreground text-xs">
+                              <p className="text-xs text-muted-foreground">
                                  +201 since last hour
                               </p>
                            </CardContent>
diff --git a/apps/web/app/(app)/examples/forms/account/account-form.tsx b/apps/web/app/(app)/examples/forms/account/account-form.tsx
index fa41ed7f..68b391f0 100644
--- a/apps/web/app/(app)/examples/forms/account/account-form.tsx
+++ b/apps/web/app/(app)/examples/forms/account/account-form.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import { zodResolver } from '@hookform/resolvers/zod'
-import { format } from 'date-fns'
-import { CalendarIcon, Check, ChevronsUpDown } from 'lucide-react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format } from "date-fns"
+import { CalendarIcon, Check, ChevronsUpDown } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
 
-import { ny } from '~/lib/utils'
-import { toast } from '~/registry/miami/hooks/use-toast'
-import { Button } from '~/registry/miami/ui/button'
-import { Calendar } from '~/registry/miami/ui/calendar'
+import { ny } from "~/lib/utils"
+import { toast } from "~/registry/miami/hooks/use-toast"
+import { Button } from "~/registry/miami/ui/button"
+import { Calendar } from "~/registry/miami/ui/calendar"
 import {
    Command,
    CommandEmpty,
@@ -17,7 +17,7 @@ import {
    CommandInput,
    CommandItem,
    CommandList,
-} from '~/registry/miami/ui/command'
+} from "~/registry/miami/ui/command"
 import {
    Form,
    FormControl,
@@ -26,40 +26,40 @@ import {
    FormItem,
    FormLabel,
    FormMessage,
-} from '~/registry/miami/ui/form'
-import { Input } from '~/registry/miami/ui/input'
+} from "~/registry/miami/ui/form"
+import { Input } from "~/registry/miami/ui/input"
 import {
    Popover,
    PopoverContent,
    PopoverTrigger,
-} from '~/registry/miami/ui/popover'
+} from "~/registry/miami/ui/popover"
 
 const languages = [
-   { label: 'English', value: 'en' },
-   { label: 'French', value: 'fr' },
-   { label: 'German', value: 'de' },
-   { label: 'Spanish', value: 'es' },
-   { label: 'Portuguese', value: 'pt' },
-   { label: 'Russian', value: 'ru' },
-   { label: 'Japanese', value: 'ja' },
-   { label: 'Korean', value: 'ko' },
-   { label: 'Chinese', value: 'zh' },
+   { label: "English", value: "en" },
+   { label: "French", value: "fr" },
+   { label: "German", value: "de" },
+   { label: "Spanish", value: "es" },
+   { label: "Portuguese", value: "pt" },
+   { label: "Russian", value: "ru" },
+   { label: "Japanese", value: "ja" },
+   { label: "Korean", value: "ko" },
+   { label: "Chinese", value: "zh" },
 ] as const
 
 const accountFormSchema = z.object({
    name: z
       .string()
       .min(2, {
-         message: 'Name must be at least 2 characters.',
+         message: "Name must be at least 2 characters.",
       })
       .max(30, {
-         message: 'Name must not be longer than 30 characters.',
+         message: "Name must not be longer than 30 characters.",
       }),
    dob: z.date({
-      required_error: 'A date of birth is required.',
+      required_error: "A date of birth is required.",
    }),
    language: z.string({
-      required_error: 'Please select a language.',
+      required_error: "Please select a language.",
    }),
 })
 
@@ -79,10 +79,12 @@ export function AccountForm() {
 
    function onSubmit(data: AccountFormValues) {
       toast({
-         title: 'You submitted the following values:',
+         title: "You submitted the following values:",
          description: (
             <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
             </pre>
          ),
       })
@@ -101,8 +103,8 @@ export function AccountForm() {
                         <Input placeholder="Your name" {...field} />
                      </FormControl>
                      <FormDescription>
-                        This is the name that will be displayed on your profile and in
-                        emails.
+                        This is the name that will be displayed on your profile
+                        and in emails.
                      </FormDescription>
                      <FormMessage />
                   </FormItem>
@@ -118,20 +120,18 @@ export function AccountForm() {
                         <PopoverTrigger asChild>
                            <FormControl>
                               <Button
-                                 variant="outline"
+                                 variant={"outline"}
                                  className={ny(
-                                    'w-[240px] pl-3 text-left font-normal',
-                                    !field.value && 'text-muted-foreground',
+                                    "w-[240px] pl-3 text-left font-normal",
+                                    !field.value && "text-muted-foreground",
                                  )}
                               >
-                                 {field.value
-                                    ? (
-                                          format(field.value, 'PPP')
-                                       )
-                                    : (
-                                          <span>Pick a date</span>
-                                       )}
-                                 <CalendarIcon className="ml-auto size-4 opacity-50" />
+                                 {field.value ? (
+                                    format(field.value, "PPP")
+                                 ) : (
+                                    <span>Pick a date</span>
+                                 )}
+                                 <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                               </Button>
                            </FormControl>
                         </PopoverTrigger>
@@ -140,8 +140,10 @@ export function AccountForm() {
                               mode="single"
                               selected={field.value}
                               onSelect={field.onChange}
-                              disabled={date =>
-                                 date > new Date() || date < new Date('1900-01-01')}
+                              disabled={(date) =>
+                                 date > new Date() ||
+                                 date < new Date("1900-01-01")
+                              }
                               initialFocus
                            />
                         </PopoverContent>
@@ -166,15 +168,16 @@ export function AccountForm() {
                                  variant="outline"
                                  role="combobox"
                                  className={ny(
-                                    'w-[200px] justify-between',
-                                    !field.value && 'text-muted-foreground',
+                                    "w-[200px] justify-between",
+                                    !field.value && "text-muted-foreground",
                                  )}
                               >
                                  {field.value
                                     ? languages.find(
-                                       language => language.value === field.value,
-                                    )?.label
-                                    : 'Select language'}
+                                         (language) =>
+                                            language.value === field.value,
+                                      )?.label
+                                    : "Select language"}
                                  <ChevronsUpDown className="opacity-50" />
                               </Button>
                            </FormControl>
@@ -185,20 +188,23 @@ export function AccountForm() {
                               <CommandList>
                                  <CommandEmpty>No language found.</CommandEmpty>
                                  <CommandGroup>
-                                    {languages.map(language => (
+                                    {languages.map((language) => (
                                        <CommandItem
                                           value={language.label}
                                           key={language.value}
                                           onSelect={() => {
-                                             form.setValue('language', language.value)
+                                             form.setValue(
+                                                "language",
+                                                language.value,
+                                             )
                                           }}
                                        >
                                           <Check
                                              className={ny(
-                                                'mr-2',
+                                                "mr-2",
                                                 language.value === field.value
-                                                   ? 'opacity-100'
-                                                   : 'opacity-0',
+                                                   ? "opacity-100"
+                                                   : "opacity-0",
                                              )}
                                           />
                                           {language.label}
diff --git a/apps/web/app/(app)/examples/forms/account/page.tsx b/apps/web/app/(app)/examples/forms/account/page.tsx
index 034b83f8..1ea68cb8 100644
--- a/apps/web/app/(app)/examples/forms/account/page.tsx
+++ b/apps/web/app/(app)/examples/forms/account/page.tsx
@@ -1,12 +1,13 @@
-import { Separator } from '~/registry/miami/ui/separator'
-import { AccountForm } from '~/app/(app)/examples/forms/account/account-form'
+import { Separator } from "~/registry/miami/ui/separator"
+
+import { AccountForm } from "~/app/(app)/examples/forms/account/account-form"
 
 export default function SettingsAccountPage() {
    return (
       <div className="space-y-6">
          <div>
             <h3 className="text-lg font-medium">Account</h3>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
                Update your account settings. Set your preferred language and
                timezone.
             </p>
diff --git a/apps/web/app/(app)/examples/forms/appearance/appearance-form.tsx b/apps/web/app/(app)/examples/forms/appearance/appearance-form.tsx
index 868c0b31..e11bfdff 100644
--- a/apps/web/app/(app)/examples/forms/appearance/appearance-form.tsx
+++ b/apps/web/app/(app)/examples/forms/appearance/appearance-form.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { zodResolver } from '@hookform/resolvers/zod'
-import { ChevronDown } from 'lucide-react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
+import { zodResolver } from "@hookform/resolvers/zod"
+import { ChevronDown } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
 
-import { ny } from '~/lib/utils'
-import { toast } from '~/registry/miami/hooks/use-toast'
-import { Button, buttonVariants } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import { toast } from "~/registry/miami/hooks/use-toast"
+import { Button, buttonVariants } from "~/registry/miami/ui/button"
 import {
    Form,
    FormControl,
@@ -16,16 +16,16 @@ import {
    FormItem,
    FormLabel,
    FormMessage,
-} from '~/registry/miami/ui/form'
-import { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'
+} from "~/registry/miami/ui/form"
+import { RadioGroup, RadioGroupItem } from "~/registry/miami/ui/radio-group"
 
 const appearanceFormSchema = z.object({
-   theme: z.enum(['light', 'dark'], {
-      required_error: 'Please select a theme.',
+   theme: z.enum(["light", "dark"], {
+      required_error: "Please select a theme.",
    }),
-   font: z.enum(['inter', 'manrope', 'system'], {
-      invalid_type_error: 'Select a font',
-      required_error: 'Please select a font.',
+   font: z.enum(["inter", "manrope", "system"], {
+      invalid_type_error: "Select a font",
+      required_error: "Please select a font.",
    }),
 })
 
@@ -33,7 +33,7 @@ type AppearanceFormValues = z.infer<typeof appearanceFormSchema>
 
 // This can come from your database or API.
 const defaultValues: Partial<AppearanceFormValues> = {
-   theme: 'light',
+   theme: "light",
 }
 
 export function AppearanceForm() {
@@ -44,10 +44,12 @@ export function AppearanceForm() {
 
    function onSubmit(data: AppearanceFormValues) {
       toast({
-         title: 'You submitted the following values:',
+         title: "You submitted the following values:",
          description: (
             <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
             </pre>
          ),
       })
@@ -66,8 +68,8 @@ export function AppearanceForm() {
                         <FormControl>
                            <select
                               className={ny(
-                                 buttonVariants({ variant: 'outline' }),
-                                 'w-[200px] appearance-none font-normal',
+                                 buttonVariants({ variant: "outline" }),
+                                 "w-[200px] appearance-none font-normal",
                               )}
                               {...field}
                            >
@@ -76,7 +78,7 @@ export function AppearanceForm() {
                               <option value="system">System</option>
                            </select>
                         </FormControl>
-                        <ChevronDown className="absolute right-3 top-2.5 size-4 opacity-50" />
+                        <ChevronDown className="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
                      </div>
                      <FormDescription>
                         Set the font you want to use in the dashboard.
@@ -103,20 +105,23 @@ export function AppearanceForm() {
                         <FormItem>
                            <FormLabel className="[&:has([data-state=checked])>div]:border-primary">
                               <FormControl>
-                                 <RadioGroupItem value="light" className="sr-only" />
+                                 <RadioGroupItem
+                                    value="light"
+                                    className="sr-only"
+                                 />
                               </FormControl>
-                              <div className="border-muted hover:border-accent items-center rounded-md border-2 p-1">
+                              <div className="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
                                  <div className="space-y-2 rounded-sm bg-[#ecedef] p-2">
                                     <div className="space-y-2 rounded-md bg-white p-2 shadow-sm">
                                        <div className="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
                                        <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
                                     </div>
                                     <div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
-                                       <div className="size-4 rounded-full bg-[#ecedef]" />
+                                       <div className="h-4 w-4 rounded-full bg-[#ecedef]" />
                                        <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
                                     </div>
                                     <div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
-                                       <div className="size-4 rounded-full bg-[#ecedef]" />
+                                       <div className="h-4 w-4 rounded-full bg-[#ecedef]" />
                                        <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
                                     </div>
                                  </div>
@@ -129,20 +134,23 @@ export function AppearanceForm() {
                         <FormItem>
                            <FormLabel className="[&:has([data-state=checked])>div]:border-primary">
                               <FormControl>
-                                 <RadioGroupItem value="dark" className="sr-only" />
+                                 <RadioGroupItem
+                                    value="dark"
+                                    className="sr-only"
+                                 />
                               </FormControl>
-                              <div className="border-muted bg-popover hover:bg-accent hover:text-accent-foreground items-center rounded-md border-2 p-1">
+                              <div className="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
                                  <div className="space-y-2 rounded-sm bg-slate-950 p-2">
                                     <div className="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
                                        <div className="h-2 w-[80px] rounded-lg bg-slate-400" />
                                        <div className="h-2 w-[100px] rounded-lg bg-slate-400" />
                                     </div>
                                     <div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
-                                       <div className="size-4 rounded-full bg-slate-400" />
+                                       <div className="h-4 w-4 rounded-full bg-slate-400" />
                                        <div className="h-2 w-[100px] rounded-lg bg-slate-400" />
                                     </div>
                                     <div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
-                                       <div className="size-4 rounded-full bg-slate-400" />
+                                       <div className="h-4 w-4 rounded-full bg-slate-400" />
                                        <div className="h-2 w-[100px] rounded-lg bg-slate-400" />
                                     </div>
                                  </div>
diff --git a/apps/web/app/(app)/examples/forms/appearance/page.tsx b/apps/web/app/(app)/examples/forms/appearance/page.tsx
index 95066b7e..6d92e909 100644
--- a/apps/web/app/(app)/examples/forms/appearance/page.tsx
+++ b/apps/web/app/(app)/examples/forms/appearance/page.tsx
@@ -1,14 +1,14 @@
-import { Separator } from '~/registry/miami/ui/separator'
-import { AppearanceForm } from '~/app/(app)/examples/forms/appearance/appearance-form'
+import { AppearanceForm } from "~/app/(app)/examples/forms/appearance/appearance-form"
+import { Separator } from "~/registry/miami/ui/separator"
 
 export default function SettingsAppearancePage() {
    return (
       <div className="space-y-6">
          <div>
             <h3 className="text-lg font-medium">Appearance</h3>
-            <p className="text-muted-foreground text-sm">
-               Customize the appearance of the app. Automatically switch between day
-               and night themes.
+            <p className="text-sm text-muted-foreground">
+               Customize the appearance of the app. Automatically switch between
+               day and night themes.
             </p>
          </div>
          <Separator />
diff --git a/apps/web/app/(app)/examples/forms/components/sidebar-nav.tsx b/apps/web/app/(app)/examples/forms/components/sidebar-nav.tsx
index e0e19f36..b4a7828e 100644
--- a/apps/web/app/(app)/examples/forms/components/sidebar-nav.tsx
+++ b/apps/web/app/(app)/examples/forms/components/sidebar-nav.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
+import Link from "next/link"
+import { usePathname } from "next/navigation"
 
-import { ny } from '~/lib/utils'
-import { buttonVariants } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import { buttonVariants } from "~/registry/miami/ui/button"
 
 interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
    items: {
@@ -19,21 +19,21 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
    return (
       <nav
          className={ny(
-            'flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1',
+            "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
             className,
          )}
          {...props}
       >
-         {items.map(item => (
+         {items.map((item) => (
             <Link
                key={item.href}
                href={item.href}
                className={ny(
-                  buttonVariants({ variant: 'ghost' }),
+                  buttonVariants({ variant: "ghost" }),
                   pathname === item.href
-                     ? 'bg-muted hover:bg-muted'
-                     : 'hover:bg-transparent hover:underline',
-                  'justify-start',
+                     ? "bg-muted hover:bg-muted"
+                     : "hover:bg-transparent hover:underline",
+                  "justify-start",
                )}
             >
                {item.title}
diff --git a/apps/web/app/(app)/examples/forms/display/display-form.tsx b/apps/web/app/(app)/examples/forms/display/display-form.tsx
index 1d73f79a..b0aa5a6f 100644
--- a/apps/web/app/(app)/examples/forms/display/display-form.tsx
+++ b/apps/web/app/(app)/examples/forms/display/display-form.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
 
-import { toast } from '~/registry/miami/hooks/use-toast'
-import { Button } from '~/registry/miami/ui/button'
-import { Checkbox } from '~/registry/miami/ui/checkbox'
+import { toast } from "~/registry/miami/hooks/use-toast"
+import { Button } from "~/registry/miami/ui/button"
+import { Checkbox } from "~/registry/miami/ui/checkbox"
 import {
    Form,
    FormControl,
@@ -15,38 +15,38 @@ import {
    FormItem,
    FormLabel,
    FormMessage,
-} from '~/registry/miami/ui/form'
+} from "~/registry/miami/ui/form"
 
 const items = [
    {
-      id: 'recents',
-      label: 'Recents',
+      id: "recents",
+      label: "Recents",
    },
    {
-      id: 'home',
-      label: 'Home',
+      id: "home",
+      label: "Home",
    },
    {
-      id: 'applications',
-      label: 'Applications',
+      id: "applications",
+      label: "Applications",
    },
    {
-      id: 'desktop',
-      label: 'Desktop',
+      id: "desktop",
+      label: "Desktop",
    },
    {
-      id: 'downloads',
-      label: 'Downloads',
+      id: "downloads",
+      label: "Downloads",
    },
    {
-      id: 'documents',
-      label: 'Documents',
+      id: "documents",
+      label: "Documents",
    },
 ] as const
 
 const displayFormSchema = z.object({
-   items: z.array(z.string()).refine(value => value.some(item => item), {
-      message: 'You have to select at least one item.',
+   items: z.array(z.string()).refine((value) => value.some((item) => item), {
+      message: "You have to select at least one item.",
    }),
 })
 
@@ -54,7 +54,7 @@ type DisplayFormValues = z.infer<typeof displayFormSchema>
 
 // This can come from your database or API.
 const defaultValues: Partial<DisplayFormValues> = {
-   items: ['recents', 'home'],
+   items: ["recents", "home"],
 }
 
 export function DisplayForm() {
@@ -65,10 +65,12 @@ export function DisplayForm() {
 
    function onSubmit(data: DisplayFormValues) {
       toast({
-         title: 'You submitted the following values:',
+         title: "You submitted the following values:",
          description: (
             <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
             </pre>
          ),
       })
@@ -88,7 +90,7 @@ export function DisplayForm() {
                            Select the items you want to display in the sidebar.
                         </FormDescription>
                      </div>
-                     {items.map(item => (
+                     {items.map((item) => (
                         <FormField
                            key={item.id}
                            control={form.control}
@@ -101,15 +103,21 @@ export function DisplayForm() {
                                  >
                                     <FormControl>
                                        <Checkbox
-                                          checked={field.value?.includes(item.id)}
+                                          checked={field.value?.includes(
+                                             item.id,
+                                          )}
                                           onCheckedChange={(checked) => {
                                              return checked
-                                                ? field.onChange([...field.value, item.id])
+                                                ? field.onChange([
+                                                     ...field.value,
+                                                     item.id,
+                                                  ])
                                                 : field.onChange(
-                                                   field.value?.filter(
-                                                      value => value !== item.id,
-                                                   ),
-                                                )
+                                                     field.value?.filter(
+                                                        (value) =>
+                                                           value !== item.id,
+                                                     ),
+                                                  )
                                           }}
                                        />
                                     </FormControl>
diff --git a/apps/web/app/(app)/examples/forms/display/page.tsx b/apps/web/app/(app)/examples/forms/display/page.tsx
index 2b15f910..096bf622 100644
--- a/apps/web/app/(app)/examples/forms/display/page.tsx
+++ b/apps/web/app/(app)/examples/forms/display/page.tsx
@@ -1,12 +1,12 @@
-import { Separator } from '~/registry/miami/ui/separator'
-import { DisplayForm } from '~/app/(app)/examples/forms/display/display-form'
+import { DisplayForm } from "~/app/(app)/examples/forms/display/display-form"
+import { Separator } from "~/registry/miami/ui/separator"
 
 export default function SettingsDisplayPage() {
    return (
       <div className="space-y-6">
          <div>
             <h3 className="text-lg font-medium">Display</h3>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
                Turn items on or off to control what&apos;s displayed in the app.
             </p>
          </div>
diff --git a/apps/web/app/(app)/examples/forms/layout.tsx b/apps/web/app/(app)/examples/forms/layout.tsx
index 14ac789f..5e7dffa9 100644
--- a/apps/web/app/(app)/examples/forms/layout.tsx
+++ b/apps/web/app/(app)/examples/forms/layout.tsx
@@ -1,34 +1,34 @@
-import type { Metadata } from 'next'
-import Image from 'next/image'
+import type { Metadata } from "next"
+import Image from "next/image"
 
-import { Separator } from '~/registry/miami/ui/separator'
-import { SidebarNav } from '~/app/(app)/examples/forms/components/sidebar-nav'
+import { SidebarNav } from "~/app/(app)/examples/forms/components/sidebar-nav"
+import { Separator } from "~/registry/miami/ui/separator"
 
 export const metadata: Metadata = {
-   title: 'Forms',
-   description: 'Advanced form example using react-hook-form and Zod.',
+   title: "Forms",
+   description: "Advanced form example using react-hook-form and Zod.",
 }
 
 const sidebarNavItems = [
    {
-      title: 'Profile',
-      href: '/examples/forms',
+      title: "Profile",
+      href: "/examples/forms",
    },
    {
-      title: 'Account',
-      href: '/examples/forms/account',
+      title: "Account",
+      href: "/examples/forms/account",
    },
    {
-      title: 'Appearance',
-      href: '/examples/forms/appearance',
+      title: "Appearance",
+      href: "/examples/forms/appearance",
    },
    {
-      title: 'Notifications',
-      href: '/examples/forms/notifications',
+      title: "Notifications",
+      href: "/examples/forms/notifications",
    },
    {
-      title: 'Display',
-      href: '/examples/forms/display',
+      title: "Display",
+      href: "/examples/forms/display",
    },
 ]
 
diff --git a/apps/web/app/(app)/examples/forms/notifications/notifications-form.tsx b/apps/web/app/(app)/examples/forms/notifications/notifications-form.tsx
index 5087fb3e..0b413cd3 100644
--- a/apps/web/app/(app)/examples/forms/notifications/notifications-form.tsx
+++ b/apps/web/app/(app)/examples/forms/notifications/notifications-form.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import Link from 'next/link'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
+import { zodResolver } from "@hookform/resolvers/zod"
+import Link from "next/link"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
 
-import { toast } from '~/registry/miami/hooks/use-toast'
-import { Button } from '~/registry/miami/ui/button'
-import { Checkbox } from '~/registry/miami/ui/checkbox'
+import { toast } from "~/registry/miami/hooks/use-toast"
+import { Button } from "~/registry/miami/ui/button"
+import { Checkbox } from "~/registry/miami/ui/checkbox"
 import {
    Form,
    FormControl,
@@ -16,13 +16,13 @@ import {
    FormItem,
    FormLabel,
    FormMessage,
-} from '~/registry/miami/ui/form'
-import { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'
-import { Switch } from '~/registry/miami/ui/switch'
+} from "~/registry/miami/ui/form"
+import { RadioGroup, RadioGroupItem } from "~/registry/miami/ui/radio-group"
+import { Switch } from "~/registry/miami/ui/switch"
 
 const notificationsFormSchema = z.object({
-   type: z.enum(['all', 'mentions', 'none'], {
-      required_error: 'You need to select a notification type.',
+   type: z.enum(["all", "mentions", "none"], {
+      required_error: "You need to select a notification type.",
    }),
    mobile: z.boolean().default(false).optional(),
    communication_emails: z.boolean().default(false).optional(),
@@ -49,10 +49,12 @@ export function NotificationsForm() {
 
    function onSubmit(data: NotificationsFormValues) {
       toast({
-         title: 'You submitted the following values:',
+         title: "You submitted the following values:",
          description: (
             <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
             </pre>
          ),
       })
@@ -93,7 +95,9 @@ export function NotificationsForm() {
                               <FormControl>
                                  <RadioGroupItem value="none" />
                               </FormControl>
-                              <FormLabel className="font-normal">Nothing</FormLabel>
+                              <FormLabel className="font-normal">
+                                 Nothing
+                              </FormLabel>
                            </FormItem>
                         </RadioGroup>
                      </FormControl>
@@ -136,7 +140,8 @@ export function NotificationsForm() {
                                  Marketing emails
                               </FormLabel>
                               <FormDescription>
-                                 Receive emails about new products, features, and more.
+                                 Receive emails about new products, features,
+                                 and more.
                               </FormDescription>
                            </div>
                            <FormControl>
@@ -154,9 +159,12 @@ export function NotificationsForm() {
                      render={({ field }) => (
                         <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                            <div className="space-y-0.5">
-                              <FormLabel className="text-base">Social emails</FormLabel>
+                              <FormLabel className="text-base">
+                                 Social emails
+                              </FormLabel>
                               <FormDescription>
-                                 Receive emails for friend requests, follows, and more.
+                                 Receive emails for friend requests, follows,
+                                 and more.
                               </FormDescription>
                            </div>
                            <FormControl>
@@ -174,9 +182,12 @@ export function NotificationsForm() {
                      render={({ field }) => (
                         <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                            <div className="space-y-0.5">
-                              <FormLabel className="text-base">Security emails</FormLabel>
+                              <FormLabel className="text-base">
+                                 Security emails
+                              </FormLabel>
                               <FormDescription>
-                                 Receive emails about your account activity and security.
+                                 Receive emails about your account activity and
+                                 security.
                               </FormDescription>
                            </div>
                            <FormControl>
@@ -208,10 +219,8 @@ export function NotificationsForm() {
                            Use different settings for my mobile devices
                         </FormLabel>
                         <FormDescription>
-                           You can manage your mobile notifications in the
-                           {' '}
-                           <Link href="/examples/forms">mobile settings</Link>
-                           {' '}
+                           You can manage your mobile notifications in the{" "}
+                           <Link href="/examples/forms">mobile settings</Link>{" "}
                            page.
                         </FormDescription>
                      </div>
diff --git a/apps/web/app/(app)/examples/forms/notifications/page.tsx b/apps/web/app/(app)/examples/forms/notifications/page.tsx
index a40a1b38..3b82e724 100644
--- a/apps/web/app/(app)/examples/forms/notifications/page.tsx
+++ b/apps/web/app/(app)/examples/forms/notifications/page.tsx
@@ -1,12 +1,12 @@
-import { Separator } from '~/registry/miami/ui/separator'
-import { NotificationsForm } from '~/app/(app)/examples/forms/notifications/notifications-form'
+import { NotificationsForm } from "~/app/(app)/examples/forms/notifications/notifications-form"
+import { Separator } from "~/registry/miami/ui/separator"
 
 export default function SettingsNotificationsPage() {
    return (
       <div className="space-y-6">
          <div>
             <h3 className="text-lg font-medium">Notifications</h3>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
                Configure how you receive notifications.
             </p>
          </div>
diff --git a/apps/web/app/(app)/examples/forms/page.tsx b/apps/web/app/(app)/examples/forms/page.tsx
index e62b8c96..813391f3 100644
--- a/apps/web/app/(app)/examples/forms/page.tsx
+++ b/apps/web/app/(app)/examples/forms/page.tsx
@@ -1,12 +1,12 @@
-import { Separator } from '~/registry/miami/ui/separator'
-import { ProfileForm } from '~/app/(app)/examples/forms/profile-form'
+import { ProfileForm } from "~/app/(app)/examples/forms/profile-form"
+import { Separator } from "~/registry/miami/ui/separator"
 
 export default function SettingsProfilePage() {
    return (
       <div className="space-y-6">
          <div>
             <h3 className="text-lg font-medium">Profile</h3>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
                This is how others will see you on the site.
             </p>
          </div>
diff --git a/apps/web/app/(app)/examples/forms/profile-form.tsx b/apps/web/app/(app)/examples/forms/profile-form.tsx
index 55350c15..715c2cb7 100644
--- a/apps/web/app/(app)/examples/forms/profile-form.tsx
+++ b/apps/web/app/(app)/examples/forms/profile-form.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import Link from 'next/link'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useFieldArray, useForm } from 'react-hook-form'
-import { z } from 'zod'
+import { zodResolver } from "@hookform/resolvers/zod"
+import Link from "next/link"
+import { useFieldArray, useForm } from "react-hook-form"
+import { z } from "zod"
 
-import { ny } from '~/lib/utils'
-import { toast } from '~/registry/miami/hooks/use-toast'
-import { Button } from '~/registry/miami/ui/button'
+import { toast } from "~/registry/miami/hooks/use-toast"
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Form,
    FormControl,
@@ -16,36 +16,36 @@ import {
    FormItem,
    FormLabel,
    FormMessage,
-} from '~/registry/miami/ui/form'
-import { Input } from '~/registry/miami/ui/input'
+} from "~/registry/miami/ui/form"
+import { Input } from "~/registry/miami/ui/input"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/miami/ui/select'
-import { Textarea } from '~/registry/miami/ui/textarea'
+} from "~/registry/miami/ui/select"
+import { Textarea } from "~/registry/miami/ui/textarea"
 
 const profileFormSchema = z.object({
    username: z
       .string()
       .min(2, {
-         message: 'Username must be at least 2 characters.',
+         message: "Username must be at least 2 characters.",
       })
       .max(30, {
-         message: 'Username must not be longer than 30 characters.',
+         message: "Username must not be longer than 30 characters.",
       }),
    email: z
       .string({
-         required_error: 'Please select an email to display.',
+         required_error: "Please select an email to display.",
       })
       .email(),
    bio: z.string().max(160).min(4),
    urls: z
       .array(
          z.object({
-            value: z.string().url({ message: 'Please enter a valid URL.' }),
+            value: z.string().url({ message: "Please enter a valid URL." }),
          }),
       )
       .optional(),
@@ -55,10 +55,10 @@ type ProfileFormValues = z.infer<typeof profileFormSchema>
 
 // This can come from your database or API.
 const defaultValues: Partial<ProfileFormValues> = {
-   bio: 'I own a computer.',
+   bio: "I own a computer.",
    urls: [
-      { value: 'https://shadcn.com' },
-      { value: 'http://twitter.com/shadcn' },
+      { value: "https://nyxbui.design" },
+      { value: "http://twitter.com/nyxb0" },
    ],
 }
 
@@ -66,20 +66,22 @@ export function ProfileForm() {
    const form = useForm<ProfileFormValues>({
       resolver: zodResolver(profileFormSchema),
       defaultValues,
-      mode: 'onChange',
+      mode: "onChange",
    })
 
    const { fields, append } = useFieldArray({
-      name: 'urls',
+      name: "urls",
       control: form.control,
    })
 
    function onSubmit(data: ProfileFormValues) {
       toast({
-         title: 'You submitted the following values:',
+         title: "You submitted the following values:",
          description: (
             <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
             </pre>
          ),
       })
@@ -95,11 +97,12 @@ export function ProfileForm() {
                   <FormItem>
                      <FormLabel>Username</FormLabel>
                      <FormControl>
-                        <Input placeholder="shadcn" {...field} />
+                        <Input placeholder="nyxb" {...field} />
                      </FormControl>
                      <FormDescription>
-                        This is your public display name. It can be your real name or a
-                        pseudonym. You can only change this once every 30 days.
+                        This is your public display name. It can be your real
+                        name or a pseudonym. You can only change this once every
+                        30 days.
                      </FormDescription>
                      <FormMessage />
                   </FormItem>
@@ -111,23 +114,30 @@ export function ProfileForm() {
                render={({ field }) => (
                   <FormItem>
                      <FormLabel>Email</FormLabel>
-                     <Select onValueChange={field.onChange} defaultValue={field.value}>
+                     <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                     >
                         <FormControl>
                            <SelectTrigger>
                               <SelectValue placeholder="Select a verified email to display" />
                            </SelectTrigger>
                         </FormControl>
                         <SelectContent>
-                           <SelectItem value="m@example.com">m@example.com</SelectItem>
-                           <SelectItem value="m@google.com">m@google.com</SelectItem>
-                           <SelectItem value="m@support.com">m@support.com</SelectItem>
+                           <SelectItem value="m@example.com">
+                              m@example.com
+                           </SelectItem>
+                           <SelectItem value="m@google.com">
+                              m@google.com
+                           </SelectItem>
+                           <SelectItem value="m@support.com">
+                              m@support.com
+                           </SelectItem>
                         </SelectContent>
                      </Select>
                      <FormDescription>
-                        You can manage verified email addresses in your
-                        {' '}
-                        <Link href="/examples/forms">email settings</Link>
-                        .
+                        You can manage verified email addresses in your{" "}
+                        <Link href="/examples/forms">email settings</Link>.
                      </FormDescription>
                      <FormMessage />
                   </FormItem>
@@ -147,12 +157,8 @@ export function ProfileForm() {
                         />
                      </FormControl>
                      <FormDescription>
-                        You can
-                        {' '}
-                        <span>@mention</span>
-                        {' '}
-                        other users and organizations to
-                        link to them.
+                        You can <span>@mention</span> other users and
+                        organizations to link to them.
                      </FormDescription>
                      <FormMessage />
                   </FormItem>
@@ -166,11 +172,14 @@ export function ProfileForm() {
                      name={`urls.${index}.value`}
                      render={({ field }) => (
                         <FormItem>
-                           <FormLabel className={ny(index !== 0 && 'sr-only')}>
+                           <FormLabel className={ny(index !== 0 && "sr-only")}>
                               URLs
                            </FormLabel>
-                           <FormDescription className={ny(index !== 0 && 'sr-only')}>
-                              Add links to your website, blog, or social media profiles.
+                           <FormDescription
+                              className={ny(index !== 0 && "sr-only")}
+                           >
+                              Add links to your website, blog, or social media
+                              profiles.
                            </FormDescription>
                            <FormControl>
                               <Input {...field} />
@@ -185,7 +194,7 @@ export function ProfileForm() {
                   variant="outline"
                   size="sm"
                   className="mt-2"
-                  onClick={() => append({ value: '' })}
+                  onClick={() => append({ value: "" })}
                >
                   Add URL
                </Button>
diff --git a/apps/web/app/(app)/examples/layout.tsx b/apps/web/app/(app)/examples/layout.tsx
index 67b0ea18..bc6e3528 100644
--- a/apps/web/app/(app)/examples/layout.tsx
+++ b/apps/web/app/(app)/examples/layout.tsx
@@ -1,59 +1,58 @@
-import type { Metadata } from 'next'
-import Link from 'next/link'
+import type { Metadata } from "next"
+import Link from "next/link"
 
-import { siteConfig } from '~/config/site'
-import { Announcement } from '~/components/announcement'
-import { ExamplesNav } from '~/components/examples-nav'
+import { Announcement } from "~/components/announcement"
+import { ExamplesNav } from "~/components/examples-nav"
 import {
    PageActions,
    PageHeader,
    PageHeaderDescription,
    PageHeaderHeading,
-} from '~/components/page-header'
-import { Button } from '~/registry/miami/ui/button'
+} from "~/components/page-header"
+import { Button } from "~/registry/miami/ui/button"
 
 export const metadata: Metadata = {
-   title: 'Examples',
-   description: 'Check out some examples app built using the components.',
+   title: "Examples",
+   description: "Check out some examples app built using the components.",
 }
 
-interface ExamplesLayoutProps {
+export default function ExamplesLayout({
+   children,
+}: {
    children: React.ReactNode
-}
-
-export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
+}) {
    return (
-      <div className="relative">
+      <>
          <PageHeader>
             <Announcement />
             <PageHeaderHeading>Build your component library</PageHeaderHeading>
             <PageHeaderDescription>
-               Beautifully designed components that you can copy and paste into your
-               apps. Made with Tailwind CSS. Open source.
+               Beautifully designed components that you can copy and paste into
+               your apps. Made with Tailwind CSS. Open source.
             </PageHeaderDescription>
             <PageActions>
                <Button asChild size="sm">
                   <Link href="/docs">Get Started</Link>
                </Button>
                <Button asChild size="sm" variant="ghost">
-                  <Link
-                     target="_blank"
-                     rel="noreferrer"
-                     href={siteConfig.links.github}
-                  >
-                     GitHub
-                  </Link>
+                  <Link href="/blocks">Browse Blocks</Link>
                </Button>
             </PageActions>
          </PageHeader>
-         <div className="container py-6">
-            <section>
-               <ExamplesNav />
-               <div className="bg-background overflow-hidden rounded-lg border shadow">
-                  {children}
+         <div className="border-grid border-b">
+            <div className="container-wrapper">
+               <div className="container py-4">
+                  <ExamplesNav />
                </div>
-            </section>
+            </div>
+         </div>
+         <div className="container-wrapper">
+            <div className="container py-6">
+               <section className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
+                  {children}
+               </section>
+            </div>
          </div>
-      </div>
+      </>
    )
 }
diff --git a/apps/web/app/(app)/examples/mail/components/account-switcher.tsx b/apps/web/app/(app)/examples/mail/components/account-switcher.tsx
index 8e315488..f5d87712 100644
--- a/apps/web/app/(app)/examples/mail/components/account-switcher.tsx
+++ b/apps/web/app/(app)/examples/mail/components/account-switcher.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/miami/ui/select'
+} from "~/registry/miami/ui/select"
 
 interface AccountSwitcherProps {
    isCollapsed: boolean
@@ -32,26 +32,30 @@ export function AccountSwitcher({
       <Select defaultValue={selectedAccount} onValueChange={setSelectedAccount}>
          <SelectTrigger
             className={ny(
-               'flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:size-4 [&_svg]:shrink-0',
-               isCollapsed
-               && 'flex size-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden',
+               "flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0",
+               isCollapsed &&
+                  "flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden",
             )}
             aria-label="Select account"
          >
             <SelectValue placeholder="Select an account">
-               {accounts.find(account => account.email === selectedAccount)?.icon}
-               <span className={ny('ml-2', isCollapsed && 'hidden')}>
+               {
+                  accounts.find((account) => account.email === selectedAccount)
+                     ?.icon
+               }
+               <span className={ny("ml-2", isCollapsed && "hidden")}>
                   {
-                     accounts.find(account => account.email === selectedAccount)
-                        ?.label
+                     accounts.find(
+                        (account) => account.email === selectedAccount,
+                     )?.label
                   }
                </span>
             </SelectValue>
          </SelectTrigger>
          <SelectContent>
-            {accounts.map(account => (
+            {accounts.map((account) => (
                <SelectItem key={account.email} value={account.email}>
-                  <div className="[&_svg]:text-foreground flex items-center gap-3 [&_svg]:size-4 [&_svg]:shrink-0">
+                  <div className="flex items-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&_svg]:text-foreground">
                      {account.icon}
                      {account.email}
                   </div>
diff --git a/apps/web/app/(app)/examples/mail/components/mail-display.tsx b/apps/web/app/(app)/examples/mail/components/mail-display.tsx
index d461a083..8c44972b 100644
--- a/apps/web/app/(app)/examples/mail/components/mail-display.tsx
+++ b/apps/web/app/(app)/examples/mail/components/mail-display.tsx
@@ -1,7 +1,7 @@
-import addDays from 'date-fns/addDays'
-import addHours from 'date-fns/addHours'
-import format from 'date-fns/format'
-import nextSaturday from 'date-fns/nextSaturday'
+import addDays from "date-fns/addDays"
+import addHours from "date-fns/addHours"
+import format from "date-fns/format"
+import nextSaturday from "date-fns/nextSaturday"
 import {
    Archive,
    ArchiveX,
@@ -11,38 +11,34 @@ import {
    Reply,
    ReplyAll,
    Trash2,
-} from 'lucide-react'
+} from "lucide-react"
 
+import type { Mail } from "~/app/(app)/examples/mail/data"
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
+import { Calendar } from "~/registry/miami/ui/calendar"
 import {
    DropdownMenuContent,
    DropdownMenuItem,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Button } from '~/registry/miami/ui/button'
-import { Calendar } from '~/registry/miami/ui/calendar'
+} from "~/registry/miami/ui/dropdown-menu"
 import {
    DropdownMenu,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/dropdown-menu"
+import { Label } from "~/registry/miami/ui/label"
 import {
    Popover,
    PopoverContent,
    PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-import { Separator } from '~/registry/miami/ui/separator'
-import { Switch } from '~/registry/miami/ui/switch'
-import { Textarea } from '~/registry/miami/ui/textarea'
+} from "~/registry/miami/ui/popover"
+import { Separator } from "~/registry/miami/ui/separator"
+import { Switch } from "~/registry/miami/ui/switch"
+import { Textarea } from "~/registry/miami/ui/textarea"
 import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-import type { Mail } from '~/app/(app)/examples/mail/data'
+} from "~/registry/miami/ui/tooltip"
 
 interface MailDisplayProps {
    mail: Mail | null
@@ -58,7 +54,7 @@ export function MailDisplay({ mail }: MailDisplayProps) {
                <Tooltip>
                   <TooltipTrigger asChild>
                      <Button variant="ghost" size="icon" disabled={!mail}>
-                        <Archive className="size-4" />
+                        <Archive className="h-4 w-4" />
                         <span className="sr-only">Archive</span>
                      </Button>
                   </TooltipTrigger>
@@ -67,7 +63,7 @@ export function MailDisplay({ mail }: MailDisplayProps) {
                <Tooltip>
                   <TooltipTrigger asChild>
                      <Button variant="ghost" size="icon" disabled={!mail}>
-                        <ArchiveX className="size-4" />
+                        <ArchiveX className="h-4 w-4" />
                         <span className="sr-only">Move to junk</span>
                      </Button>
                   </TooltipTrigger>
@@ -76,7 +72,7 @@ export function MailDisplay({ mail }: MailDisplayProps) {
                <Tooltip>
                   <TooltipTrigger asChild>
                      <Button variant="ghost" size="icon" disabled={!mail}>
-                        <Trash2 className="size-4" />
+                        <Trash2 className="h-4 w-4" />
                         <span className="sr-only">Move to trash</span>
                      </Button>
                   </TooltipTrigger>
@@ -88,23 +84,24 @@ export function MailDisplay({ mail }: MailDisplayProps) {
                      <PopoverTrigger asChild>
                         <TooltipTrigger asChild>
                            <Button variant="ghost" size="icon" disabled={!mail}>
-                              <Clock className="size-4" />
+                              <Clock className="h-4 w-4" />
                               <span className="sr-only">Snooze</span>
                            </Button>
                         </TooltipTrigger>
                      </PopoverTrigger>
                      <PopoverContent className="flex w-[535px] p-0">
                         <div className="flex flex-col gap-2 border-r px-2 py-4">
-                           <div className="px-4 text-sm font-medium">Snooze until</div>
+                           <div className="px-4 text-sm font-medium">
+                              Snooze until
+                           </div>
                            <div className="grid min-w-[250px] gap-1">
                               <Button
                                  variant="ghost"
                                  className="justify-start font-normal"
                               >
-                                 Later today
-                                 {' '}
-                                 <span className="text-muted-foreground ml-auto">
-                                    {format(addHours(today, 4), 'E, h:m b')}
+                                 Later today{" "}
+                                 <span className="ml-auto text-muted-foreground">
+                                    {format(addHours(today, 4), "E, h:m b")}
                                  </span>
                               </Button>
                               <Button
@@ -112,8 +109,8 @@ export function MailDisplay({ mail }: MailDisplayProps) {
                                  className="justify-start font-normal"
                               >
                                  Tomorrow
-                                 <span className="text-muted-foreground ml-auto">
-                                    {format(addDays(today, 1), 'E, h:m b')}
+                                 <span className="ml-auto text-muted-foreground">
+                                    {format(addDays(today, 1), "E, h:m b")}
                                  </span>
                               </Button>
                               <Button
@@ -121,8 +118,8 @@ export function MailDisplay({ mail }: MailDisplayProps) {
                                  className="justify-start font-normal"
                               >
                                  This weekend
-                                 <span className="text-muted-foreground ml-auto">
-                                    {format(nextSaturday(today), 'E, h:m b')}
+                                 <span className="ml-auto text-muted-foreground">
+                                    {format(nextSaturday(today), "E, h:m b")}
                                  </span>
                               </Button>
                               <Button
@@ -130,8 +127,8 @@ export function MailDisplay({ mail }: MailDisplayProps) {
                                  className="justify-start font-normal"
                               >
                                  Next week
-                                 <span className="text-muted-foreground ml-auto">
-                                    {format(addDays(today, 7), 'E, h:m b')}
+                                 <span className="ml-auto text-muted-foreground">
+                                    {format(addDays(today, 7), "E, h:m b")}
                                  </span>
                               </Button>
                            </div>
@@ -148,7 +145,7 @@ export function MailDisplay({ mail }: MailDisplayProps) {
                <Tooltip>
                   <TooltipTrigger asChild>
                      <Button variant="ghost" size="icon" disabled={!mail}>
-                        <Reply className="size-4" />
+                        <Reply className="h-4 w-4" />
                         <span className="sr-only">Reply</span>
                      </Button>
                   </TooltipTrigger>
@@ -157,7 +154,7 @@ export function MailDisplay({ mail }: MailDisplayProps) {
                <Tooltip>
                   <TooltipTrigger asChild>
                      <Button variant="ghost" size="icon" disabled={!mail}>
-                        <ReplyAll className="size-4" />
+                        <ReplyAll className="h-4 w-4" />
                         <span className="sr-only">Reply all</span>
                      </Button>
                   </TooltipTrigger>
@@ -166,7 +163,7 @@ export function MailDisplay({ mail }: MailDisplayProps) {
                <Tooltip>
                   <TooltipTrigger asChild>
                      <Button variant="ghost" size="icon" disabled={!mail}>
-                        <Forward className="size-4" />
+                        <Forward className="h-4 w-4" />
                         <span className="sr-only">Forward</span>
                      </Button>
                   </TooltipTrigger>
@@ -177,7 +174,7 @@ export function MailDisplay({ mail }: MailDisplayProps) {
             <DropdownMenu>
                <DropdownMenuTrigger asChild>
                   <Button variant="ghost" size="icon" disabled={!mail}>
-                     <MoreVertical className="size-4" />
+                     <MoreVertical className="h-4 w-4" />
                      <span className="sr-only">More</span>
                   </Button>
                </DropdownMenuTrigger>
@@ -190,76 +187,73 @@ export function MailDisplay({ mail }: MailDisplayProps) {
             </DropdownMenu>
          </div>
          <Separator />
-         {mail
-            ? (
-                  <div className="flex flex-1 flex-col">
-                     <div className="flex items-start p-4">
-                        <div className="flex items-start gap-4 text-sm">
-                           <Avatar>
-                              <AvatarImage alt={mail.name} />
-                              <AvatarFallback>
-                                 {mail.name
-                                    .split(' ')
-                                    .map(chunk => chunk[0])
-                                    .join('')}
-                              </AvatarFallback>
-                           </Avatar>
-                           <div className="grid gap-1">
-                              <div className="font-semibold">{mail.name}</div>
-                              <div className="line-clamp-1 text-xs">{mail.subject}</div>
-                              <div className="line-clamp-1 text-xs">
-                                 <span className="font-medium">Reply-To:</span>
-                                 {' '}
-                                 {mail.email}
-                              </div>
-                           </div>
+         {mail ? (
+            <div className="flex flex-1 flex-col">
+               <div className="flex items-start p-4">
+                  <div className="flex items-start gap-4 text-sm">
+                     <Avatar>
+                        <AvatarImage alt={mail.name} />
+                        <AvatarFallback>
+                           {mail.name
+                              .split(" ")
+                              .map((chunk) => chunk[0])
+                              .join("")}
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid gap-1">
+                        <div className="font-semibold">{mail.name}</div>
+                        <div className="line-clamp-1 text-xs">
+                           {mail.subject}
+                        </div>
+                        <div className="line-clamp-1 text-xs">
+                           <span className="font-medium">Reply-To:</span>{" "}
+                           {mail.email}
                         </div>
-                        {mail.date && (
-                           <div className="text-muted-foreground ml-auto text-xs">
-                              {format(new Date(mail.date), 'PPpp')}
-                           </div>
-                        )}
                      </div>
-                     <Separator />
-                     <div className="flex-1 whitespace-pre-wrap p-4 text-sm">
-                        {mail.text}
+                  </div>
+                  {mail.date && (
+                     <div className="ml-auto text-xs text-muted-foreground">
+                        {format(new Date(mail.date), "PPpp")}
                      </div>
-                     <Separator className="mt-auto" />
-                     <div className="p-4">
-                        <form>
-                           <div className="grid gap-4">
-                              <Textarea
-                                 className="p-4"
-                                 placeholder={`Reply ${mail.name}...`}
-                              />
-                              <div className="flex items-center">
-                                 <Label
-                                    htmlFor="mute"
-                                    className="flex items-center gap-2 text-xs font-normal"
-                                 >
-                                    <Switch id="mute" aria-label="Mute thread" />
-                                    {' '}
-                                    Mute this
-                                    thread
-                                 </Label>
-                                 <Button
-                                    onClick={e => e.preventDefault()}
-                                    size="sm"
-                                    className="ml-auto"
-                                 >
-                                    Send
-                                 </Button>
-                              </div>
-                           </div>
-                        </form>
+                  )}
+               </div>
+               <Separator />
+               <div className="flex-1 whitespace-pre-wrap p-4 text-sm">
+                  {mail.text}
+               </div>
+               <Separator className="mt-auto" />
+               <div className="p-4">
+                  <form>
+                     <div className="grid gap-4">
+                        <Textarea
+                           className="p-4"
+                           placeholder={`Reply ${mail.name}...`}
+                        />
+                        <div className="flex items-center">
+                           <Label
+                              htmlFor="mute"
+                              className="flex items-center gap-2 text-xs font-normal"
+                           >
+                              <Switch id="mute" aria-label="Mute thread" /> Mute
+                              this thread
+                           </Label>
+                           <Button
+                              onClick={(e) => e.preventDefault()}
+                              size="sm"
+                              className="ml-auto"
+                           >
+                              Send
+                           </Button>
+                        </div>
                      </div>
-                  </div>
-               )
-            : (
-                  <div className="text-muted-foreground p-8 text-center">
-                     No message selected
-                  </div>
-               )}
+                  </form>
+               </div>
+            </div>
+         ) : (
+            <div className="p-8 text-center text-muted-foreground">
+               No message selected
+            </div>
+         )}
       </div>
    )
 }
diff --git a/apps/web/app/(app)/examples/mail/components/mail-list.tsx b/apps/web/app/(app)/examples/mail/components/mail-list.tsx
index d5dedacd..2ff09914 100644
--- a/apps/web/app/(app)/examples/mail/components/mail-list.tsx
+++ b/apps/web/app/(app)/examples/mail/components/mail-list.tsx
@@ -1,12 +1,11 @@
-import type { ComponentProps } from 'react'
-import formatDistanceToNow from 'date-fns/formatDistanceToNow'
+import formatDistanceToNow from "date-fns/formatDistanceToNow"
+import type { ComponentProps } from "react"
 
-import { ny } from '~/lib/utils'
-import { Badge } from '~/registry/miami/ui/badge'
-import { ScrollArea } from '~/registry/miami/ui/scroll-area'
-import { Separator } from '~/registry/miami/ui/separator'
-import type { Mail } from '~/app/(app)/examples/mail/data'
-import { useMail } from '~/app/(app)/examples/mail/use-mail'
+import type { Mail } from "~/app/(app)/examples/mail/data"
+import { useMail } from "~/app/(app)/examples/mail/use-mail"
+import { ny } from "~/lib/utils"
+import { Badge } from "~/registry/miami/ui/badge"
+import { ScrollArea } from "~/registry/miami/ui/scroll-area"
 
 interface MailListProps {
    items: Mail[]
@@ -18,33 +17,34 @@ export function MailList({ items }: MailListProps) {
    return (
       <ScrollArea className="h-screen">
          <div className="flex flex-col gap-2 p-4 pt-0">
-            {items.map(item => (
+            {items.map((item) => (
                <button
                   key={item.id}
                   className={ny(
-                     'hover:bg-accent flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all',
-                     mail.selected === item.id && 'bg-muted',
+                     "flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent",
+                     mail.selected === item.id && "bg-muted",
                   )}
                   onClick={() =>
                      setMail({
                         ...mail,
                         selected: item.id,
-                     })}
+                     })
+                  }
                >
                   <div className="flex w-full flex-col gap-1">
                      <div className="flex items-center">
                         <div className="flex items-center gap-2">
                            <div className="font-semibold">{item.name}</div>
                            {!item.read && (
-                              <span className="flex size-2 rounded-full bg-blue-600" />
+                              <span className="flex h-2 w-2 rounded-full bg-blue-600" />
                            )}
                         </div>
                         <div
                            className={ny(
-                              'ml-auto text-xs',
+                              "ml-auto text-xs",
                               mail.selected === item.id
-                                 ? 'text-foreground'
-                                 : 'text-muted-foreground',
+                                 ? "text-foreground"
+                                 : "text-muted-foreground",
                            )}
                         >
                            {formatDistanceToNow(new Date(item.date), {
@@ -54,20 +54,21 @@ export function MailList({ items }: MailListProps) {
                      </div>
                      <div className="text-xs font-medium">{item.subject}</div>
                   </div>
-                  <div className="text-muted-foreground line-clamp-2 text-xs">
+                  <div className="line-clamp-2 text-xs text-muted-foreground">
                      {item.text.substring(0, 300)}
                   </div>
-                  {item.labels.length
-                     ? (
-                           <div className="flex items-center gap-2">
-                              {item.labels.map(label => (
-                                 <Badge key={label} variant={getBadgeVariantFromLabel(label)}>
-                                    {label}
-                                 </Badge>
-                              ))}
-                           </div>
-                        )
-                     : null}
+                  {item.labels.length ? (
+                     <div className="flex items-center gap-2">
+                        {item.labels.map((label) => (
+                           <Badge
+                              key={label}
+                              variant={getBadgeVariantFromLabel(label)}
+                           >
+                              {label}
+                           </Badge>
+                        ))}
+                     </div>
+                  ) : null}
                </button>
             ))}
          </div>
@@ -77,14 +78,14 @@ export function MailList({ items }: MailListProps) {
 
 function getBadgeVariantFromLabel(
    label: string,
-): ComponentProps<typeof Badge>['variant'] {
-   if (['work'].includes(label.toLowerCase())) {
-      return 'default'
+): ComponentProps<typeof Badge>["variant"] {
+   if (["work"].includes(label.toLowerCase())) {
+      return "default"
    }
 
-   if (['personal'].includes(label.toLowerCase())) {
-      return 'outline'
+   if (["personal"].includes(label.toLowerCase())) {
+      return "outline"
    }
 
-   return 'secondary'
+   return "secondary"
 }
diff --git a/apps/web/app/(app)/examples/mail/components/mail.tsx b/apps/web/app/(app)/examples/mail/components/mail.tsx
index f94213f7..c74fd13d 100644
--- a/apps/web/app/(app)/examples/mail/components/mail.tsx
+++ b/apps/web/app/(app)/examples/mail/components/mail.tsx
@@ -1,6 +1,5 @@
-'use client'
+"use client"
 
-import * as React from 'react'
 import {
    AlertCircle,
    Archive,
@@ -13,29 +12,30 @@ import {
    ShoppingCart,
    Trash2,
    Users2,
-} from 'lucide-react'
+} from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { Input } from '~/registry/miami/ui/input'
+import { AccountSwitcher } from "~/app/(app)/examples/mail/components/account-switcher"
+import { MailDisplay } from "~/app/(app)/examples/mail/components/mail-display"
+import { MailList } from "~/app/(app)/examples/mail/components/mail-list"
+import { Nav } from "~/app/(app)/examples/mail/components/nav"
+import type { Mail } from "~/app/(app)/examples/mail/data"
+import { useMail } from "~/app/(app)/examples/mail/use-mail"
+import { ny } from "~/lib/utils"
+import { Input } from "~/registry/miami/ui/input"
 import {
    ResizableHandle,
    ResizablePanel,
    ResizablePanelGroup,
-} from '~/registry/miami/ui/resizable'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/resizable"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
-} from '~/registry/miami/ui/tabs'
-import { TooltipProvider } from '~/registry/miami/ui/tooltip'
-import { AccountSwitcher } from '~/app/(app)/examples/mail/components/account-switcher'
-import { MailDisplay } from '~/app/(app)/examples/mail/components/mail-display'
-import { MailList } from '~/app/(app)/examples/mail/components/mail-list'
-import { Nav } from '~/app/(app)/examples/mail/components/nav'
-import type { Mail } from '~/app/(app)/examples/mail/data'
-import { useMail } from '~/app/(app)/examples/mail/use-mail'
+} from "~/registry/miami/ui/tabs"
+import { TooltipProvider } from "~/registry/miami/ui/tooltip"
 
 interface MailProps {
    accounts: {
@@ -65,81 +65,84 @@ export function Mail({
             direction="horizontal"
             onLayout={(sizes: number[]) => {
                document.cookie = `react-resizable-panels:layout:mail=${JSON.stringify(
-            sizes,
-          )}`
+                  sizes,
+               )}`
             }}
             className="h-full max-h-[800px] items-stretch"
          >
             <ResizablePanel
                defaultSize={defaultLayout[0]}
                collapsedSize={navCollapsedSize}
-               collapsible
+               collapsible={true}
                minSize={15}
                maxSize={20}
                onCollapse={() => {
                   setIsCollapsed(true)
                   document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(
-              true,
-            )}`
+                     true,
+                  )}`
                }}
                onResize={() => {
                   setIsCollapsed(false)
                   document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(
-              false,
-            )}`
+                     false,
+                  )}`
                }}
                className={ny(
-                  isCollapsed
-                  && 'min-w-[50px] transition-all duration-300 ease-in-out',
+                  isCollapsed &&
+                     "min-w-[50px] transition-all duration-300 ease-in-out",
                )}
             >
                <div
                   className={ny(
-                     'flex h-[52px] items-center justify-center',
-                     isCollapsed ? 'h-[52px]' : 'px-2',
+                     "flex h-[52px] items-center justify-center",
+                     isCollapsed ? "h-[52px]" : "px-2",
                   )}
                >
-                  <AccountSwitcher isCollapsed={isCollapsed} accounts={accounts} />
+                  <AccountSwitcher
+                     isCollapsed={isCollapsed}
+                     accounts={accounts}
+                  />
                </div>
                <Separator />
                <Nav
                   isCollapsed={isCollapsed}
                   links={[
                      {
-                        title: 'Inbox',
-                        label: '128',
+                        title: "Inbox",
+                        label: "128",
                         icon: Inbox,
-                        variant: 'default',
+                        variant: "default",
                      },
                      {
-                        title: 'Drafts',
-                        label: '9',
+                        title: "Drafts",
+                        label: "9",
                         icon: File,
-                        variant: 'ghost',
+                        variant: "ghost",
                      },
                      {
-                        title: 'Sent',
-                        label: '',
+                        title: "Sent",
+                        label: "",
                         icon: Send,
-                        variant: 'ghost',
+                        variant: "ghost",
                      },
                      {
-                        title: 'Junk',
-                        label: '23',
+                        title: "Junk",
+                        label: "23",
                         icon: ArchiveX,
-                        variant: 'ghost',
+                        variant: "ghost",
                      },
                      {
-                        title: 'Trash',
-                        label: '',
+                        title: "Trash",
+                        label: "",
                         icon: Trash2,
-                        variant: 'ghost',
+                        variant: "ghost",
                      },
                      {
-                        title: 'Archive',
-                        label: '',
+                        title: "Archive",
+                        label: "",
                         icon: Archive,
-                        variant: 'ghost',
+                        variant: "ghost",
                      },
                   ]}
                />
@@ -148,34 +151,34 @@ export function Mail({
                   isCollapsed={isCollapsed}
                   links={[
                      {
-                        title: 'Social',
-                        label: '972',
+                        title: "Social",
+                        label: "972",
                         icon: Users2,
-                        variant: 'ghost',
+                        variant: "ghost",
                      },
                      {
-                        title: 'Updates',
-                        label: '342',
+                        title: "Updates",
+                        label: "342",
                         icon: AlertCircle,
-                        variant: 'ghost',
+                        variant: "ghost",
                      },
                      {
-                        title: 'Forums',
-                        label: '128',
+                        title: "Forums",
+                        label: "128",
                         icon: MessagesSquare,
-                        variant: 'ghost',
+                        variant: "ghost",
                      },
                      {
-                        title: 'Shopping',
-                        label: '8',
+                        title: "Shopping",
+                        label: "8",
                         icon: ShoppingCart,
-                        variant: 'ghost',
+                        variant: "ghost",
                      },
                      {
-                        title: 'Promotions',
-                        label: '21',
+                        title: "Promotions",
+                        label: "21",
                         icon: Archive,
-                        variant: 'ghost',
+                        variant: "ghost",
                      },
                   ]}
                />
@@ -201,10 +204,10 @@ export function Mail({
                      </TabsList>
                   </div>
                   <Separator />
-                  <div className="bg-background/95 supports-[backdrop-filter]:bg-background/60 p-4 backdrop-blur">
+                  <div className="bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
                      <form>
                         <div className="relative">
-                           <Search className="text-muted-foreground absolute left-2 top-2.5 size-4" />
+                           <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                            <Input placeholder="Search" className="pl-8" />
                         </div>
                      </form>
@@ -213,14 +216,14 @@ export function Mail({
                      <MailList items={mails} />
                   </TabsContent>
                   <TabsContent value="unread" className="m-0">
-                     <MailList items={mails.filter(item => !item.read)} />
+                     <MailList items={mails.filter((item) => !item.read)} />
                   </TabsContent>
                </Tabs>
             </ResizablePanel>
             <ResizableHandle withHandle />
             <ResizablePanel defaultSize={defaultLayout[2]} minSize={30}>
                <MailDisplay
-                  mail={mails.find(item => item.id === mail.selected) || null}
+                  mail={mails.find((item) => item.id === mail.selected) || null}
                />
             </ResizablePanel>
          </ResizablePanelGroup>
diff --git a/apps/web/app/(app)/examples/mail/components/nav.tsx b/apps/web/app/(app)/examples/mail/components/nav.tsx
index 598a4e44..9b8de9aa 100644
--- a/apps/web/app/(app)/examples/mail/components/nav.tsx
+++ b/apps/web/app/(app)/examples/mail/components/nav.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import Link from 'next/link'
-import type { LucideIcon } from 'lucide-react'
+import type { LucideIcon } from "lucide-react"
+import Link from "next/link"
 
-import { ny } from '~/lib/utils'
-import { buttonVariants } from '~/registry/default/ui/button'
+import { ny } from "~/lib/utils"
+import { buttonVariants } from "~/registry/miami/ui/button"
 import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
+} from "~/registry/miami/ui/tooltip"
 
 interface NavProps {
    isCollapsed: boolean
@@ -17,7 +17,7 @@ interface NavProps {
       title: string
       label?: string
       icon: LucideIcon
-      variant: 'default' | 'ghost'
+      variant: "default" | "ghost"
    }[]
 }
 
@@ -29,59 +29,63 @@ export function Nav({ links, isCollapsed }: NavProps) {
       >
          <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
             {links.map((link, index) =>
-               isCollapsed
-                  ? (
-                        <Tooltip key={index} delayDuration={0}>
-                           <TooltipTrigger asChild>
-                              <Link
-                                 href="#"
-                                 className={ny(
-                                    buttonVariants({ variant: link.variant, size: 'icon' }),
-                                    'size-9',
-                                    link.variant === 'default'
-                                    && 'dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white',
-                                 )}
-                              >
-                                 <link.icon className="size-4" />
-                                 <span className="sr-only">{link.title}</span>
-                              </Link>
-                           </TooltipTrigger>
-                           <TooltipContent side="right" className="flex items-center gap-4">
-                              {link.title}
-                              {link.label && (
-                                 <span className="text-muted-foreground ml-auto">
-                                    {link.label}
-                                 </span>
-                              )}
-                           </TooltipContent>
-                        </Tooltip>
-                     )
-                  : (
+               isCollapsed ? (
+                  <Tooltip key={index} delayDuration={0}>
+                     <TooltipTrigger asChild>
                         <Link
-                           key={index}
                            href="#"
                            className={ny(
-                              buttonVariants({ variant: link.variant, size: 'sm' }),
-                              link.variant === 'default'
-                              && 'dark:bg-muted dark:hover:bg-muted dark:text-white dark:hover:text-white',
-                              'justify-start',
+                              buttonVariants({
+                                 variant: link.variant,
+                                 size: "icon",
+                              }),
+                              "h-9 w-9",
+                              link.variant === "default" &&
+                                 "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white",
                            )}
                         >
-                           <link.icon className="mr-2 size-4" />
-                           {link.title}
-                           {link.label && (
-                              <span
-                                 className={ny(
-                                    'ml-auto',
-                                    link.variant === 'default'
-                                    && 'text-background dark:text-white',
-                                 )}
-                              >
-                                 {link.label}
-                              </span>
-                           )}
+                           <link.icon className="h-4 w-4" />
+                           <span className="sr-only">{link.title}</span>
                         </Link>
-                     ),
+                     </TooltipTrigger>
+                     <TooltipContent
+                        side="right"
+                        className="flex items-center gap-4"
+                     >
+                        {link.title}
+                        {link.label && (
+                           <span className="ml-auto text-muted-foreground">
+                              {link.label}
+                           </span>
+                        )}
+                     </TooltipContent>
+                  </Tooltip>
+               ) : (
+                  <Link
+                     key={index}
+                     href="#"
+                     className={ny(
+                        buttonVariants({ variant: link.variant, size: "sm" }),
+                        link.variant === "default" &&
+                           "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white",
+                        "justify-start",
+                     )}
+                  >
+                     <link.icon className="mr-2 h-4 w-4" />
+                     {link.title}
+                     {link.label && (
+                        <span
+                           className={ny(
+                              "ml-auto",
+                              link.variant === "default" &&
+                                 "text-background dark:text-white",
+                           )}
+                        >
+                           {link.label}
+                        </span>
+                     )}
+                  </Link>
+               ),
             )}
          </nav>
       </div>
diff --git a/apps/web/app/(app)/examples/mail/data.tsx b/apps/web/app/(app)/examples/mail/data.tsx
index 246836af..f0bdf9c6 100644
--- a/apps/web/app/(app)/examples/mail/data.tsx
+++ b/apps/web/app/(app)/examples/mail/data.tsx
@@ -1,173 +1,173 @@
 export const mails = [
    {
-      id: '6c84fb90-12c4-11e1-840d-7b25c5ee775a',
-      name: 'William Smith',
-      email: 'williamsmith@example.com',
-      subject: 'Meeting Tomorrow',
-      text: 'Hi, let\'s have a meeting tomorrow to discuss the project. I\'ve been reviewing the project details and have some ideas I\'d like to share. It\'s crucial that we align on our next steps to ensure the project\'s success.\n\nPlease come prepared with any questions or insights you may have. Looking forward to our meeting!\n\nBest regards, William',
-      date: '2023-10-22T09:00:00',
+      id: "6c84fb90-12c4-11e1-840d-7b25c5ee775a",
+      name: "William Smith",
+      email: "williamsmith@example.com",
+      subject: "Meeting Tomorrow",
+      text: "Hi, let's have a meeting tomorrow to discuss the project. I've been reviewing the project details and have some ideas I'd like to share. It's crucial that we align on our next steps to ensure the project's success.\n\nPlease come prepared with any questions or insights you may have. Looking forward to our meeting!\n\nBest regards, William",
+      date: "2023-10-22T09:00:00",
       read: true,
-      labels: ['meeting', 'work', 'important'],
+      labels: ["meeting", "work", "important"],
    },
    {
-      id: '110e8400-e29b-11d4-a716-446655440000',
-      name: 'Alice Smith',
-      email: 'alicesmith@example.com',
-      subject: 'Re: Project Update',
-      text: 'Thank you for the project update. It looks great! I\'ve gone through the report, and the progress is impressive. The team has done a fantastic job, and I appreciate the hard work everyone has put in.\n\nI have a few minor suggestions that I\'ll include in the attached document.\n\nLet\'s discuss these during our next meeting. Keep up the excellent work!\n\nBest regards, Alice',
-      date: '2023-10-22T10:30:00',
+      id: "110e8400-e29b-11d4-a716-446655440000",
+      name: "Alice Smith",
+      email: "alicesmith@example.com",
+      subject: "Re: Project Update",
+      text: "Thank you for the project update. It looks great! I've gone through the report, and the progress is impressive. The team has done a fantastic job, and I appreciate the hard work everyone has put in.\n\nI have a few minor suggestions that I'll include in the attached document.\n\nLet's discuss these during our next meeting. Keep up the excellent work!\n\nBest regards, Alice",
+      date: "2023-10-22T10:30:00",
       read: true,
-      labels: ['work', 'important'],
+      labels: ["work", "important"],
    },
    {
-      id: '3e7c3f6d-bdf5-46ae-8d90-171300f27ae2',
-      name: 'Bob Johnson',
-      email: 'bobjohnson@example.com',
-      subject: 'Weekend Plans',
-      text: 'Any plans for the weekend? I was thinking of going hiking in the nearby mountains. It\'s been a while since we had some outdoor fun.\n\nIf you\'re interested, let me know, and we can plan the details. It\'ll be a great way to unwind and enjoy nature.\n\nLooking forward to your response!\n\nBest, Bob',
-      date: '2023-04-10T11:45:00',
+      id: "3e7c3f6d-bdf5-46ae-8d90-171300f27ae2",
+      name: "Bob Johnson",
+      email: "bobjohnson@example.com",
+      subject: "Weekend Plans",
+      text: "Any plans for the weekend? I was thinking of going hiking in the nearby mountains. It's been a while since we had some outdoor fun.\n\nIf you're interested, let me know, and we can plan the details. It'll be a great way to unwind and enjoy nature.\n\nLooking forward to your response!\n\nBest, Bob",
+      date: "2023-04-10T11:45:00",
       read: true,
-      labels: ['personal'],
+      labels: ["personal"],
    },
    {
-      id: '61c35085-72d7-42b4-8d62-738f700d4b92',
-      name: 'Emily Davis',
-      email: 'emilydavis@example.com',
-      subject: 'Re: Question about Budget',
-      text: 'I have a question about the budget for the upcoming project. It seems like there\'s a discrepancy in the allocation of resources.\n\nI\'ve reviewed the budget report and identified a few areas where we might be able to optimize our spending without compromising the project\'s quality.\n\nI\'ve attached a detailed analysis for your reference. Let\'s discuss this further in our next meeting.\n\nThanks, Emily',
-      date: '2023-03-25T13:15:00',
+      id: "61c35085-72d7-42b4-8d62-738f700d4b92",
+      name: "Emily Davis",
+      email: "emilydavis@example.com",
+      subject: "Re: Question about Budget",
+      text: "I have a question about the budget for the upcoming project. It seems like there's a discrepancy in the allocation of resources.\n\nI've reviewed the budget report and identified a few areas where we might be able to optimize our spending without compromising the project's quality.\n\nI've attached a detailed analysis for your reference. Let's discuss this further in our next meeting.\n\nThanks, Emily",
+      date: "2023-03-25T13:15:00",
       read: false,
-      labels: ['work', 'budget'],
+      labels: ["work", "budget"],
    },
    {
-      id: '8f7b5db9-d935-4e42-8e05-1f1d0a3dfb97',
-      name: 'Michael Wilson',
-      email: 'michaelwilson@example.com',
-      subject: 'Important Announcement',
-      text: 'I have an important announcement to make during our team meeting. It pertains to a strategic shift in our approach to the upcoming product launch. We\'ve received valuable feedback from our beta testers, and I believe it\'s time to make some adjustments to better meet our customers\' needs.\n\nThis change is crucial to our success, and I look forward to discussing it with the team. Please be prepared to share your insights during the meeting.\n\nRegards, Michael',
-      date: '2023-03-10T15:00:00',
+      id: "8f7b5db9-d935-4e42-8e05-1f1d0a3dfb97",
+      name: "Michael Wilson",
+      email: "michaelwilson@example.com",
+      subject: "Important Announcement",
+      text: "I have an important announcement to make during our team meeting. It pertains to a strategic shift in our approach to the upcoming product launch. We've received valuable feedback from our beta testers, and I believe it's time to make some adjustments to better meet our customers' needs.\n\nThis change is crucial to our success, and I look forward to discussing it with the team. Please be prepared to share your insights during the meeting.\n\nRegards, Michael",
+      date: "2023-03-10T15:00:00",
       read: false,
-      labels: ['meeting', 'work', 'important'],
+      labels: ["meeting", "work", "important"],
    },
    {
-      id: '1f0f2c02-e299-40de-9b1d-86ef9e42126b',
-      name: 'Sarah Brown',
-      email: 'sarahbrown@example.com',
-      subject: 'Re: Feedback on Proposal',
-      text: 'Thank you for your feedback on the proposal. It looks great! I\'m pleased to hear that you found it promising. The team worked diligently to address all the key points you raised, and I believe we now have a strong foundation for the project.\n\nI\'ve attached the revised proposal for your review.\n\nPlease let me know if you have any further comments or suggestions. Looking forward to your response.\n\nBest regards, Sarah',
-      date: '2023-02-15T16:30:00',
+      id: "1f0f2c02-e299-40de-9b1d-86ef9e42126b",
+      name: "Sarah Brown",
+      email: "sarahbrown@example.com",
+      subject: "Re: Feedback on Proposal",
+      text: "Thank you for your feedback on the proposal. It looks great! I'm pleased to hear that you found it promising. The team worked diligently to address all the key points you raised, and I believe we now have a strong foundation for the project.\n\nI've attached the revised proposal for your review.\n\nPlease let me know if you have any further comments or suggestions. Looking forward to your response.\n\nBest regards, Sarah",
+      date: "2023-02-15T16:30:00",
       read: true,
-      labels: ['work'],
+      labels: ["work"],
    },
    {
-      id: '17c0a96d-4415-42b1-8b4f-764efab57f66',
-      name: 'David Lee',
-      email: 'davidlee@example.com',
-      subject: 'New Project Idea',
-      text: 'I have an exciting new project idea to discuss with you. It involves expanding our services to target a niche market that has shown considerable growth in recent months.\n\nI\'ve prepared a detailed proposal outlining the potential benefits and the strategy for execution.\n\nThis project has the potential to significantly impact our business positively. Let\'s set up a meeting to dive into the details and determine if it aligns with our current goals.\n\nBest regards, David',
-      date: '2023-01-28T17:45:00',
+      id: "17c0a96d-4415-42b1-8b4f-764efab57f66",
+      name: "David Lee",
+      email: "davidlee@example.com",
+      subject: "New Project Idea",
+      text: "I have an exciting new project idea to discuss with you. It involves expanding our services to target a niche market that has shown considerable growth in recent months.\n\nI've prepared a detailed proposal outlining the potential benefits and the strategy for execution.\n\nThis project has the potential to significantly impact our business positively. Let's set up a meeting to dive into the details and determine if it aligns with our current goals.\n\nBest regards, David",
+      date: "2023-01-28T17:45:00",
       read: false,
-      labels: ['meeting', 'work', 'important'],
+      labels: ["meeting", "work", "important"],
    },
    {
-      id: '2f0130cb-39fc-44c4-bb3c-0a4337edaaab',
-      name: 'Olivia Wilson',
-      email: 'oliviawilson@example.com',
-      subject: 'Vacation Plans',
-      text: 'Let\'s plan our vacation for next month. What do you think? I\'ve been thinking of visiting a tropical paradise, and I\'ve put together some destination options.\n\nI believe it\'s time for us to unwind and recharge. Please take a look at the options and let me know your preferences.\n\nWe can start making arrangements to ensure a smooth and enjoyable trip.\n\nExcited to hear your thoughts! Olivia',
-      date: '2022-12-20T18:30:00',
+      id: "2f0130cb-39fc-44c4-bb3c-0a4337edaaab",
+      name: "Olivia Wilson",
+      email: "oliviawilson@example.com",
+      subject: "Vacation Plans",
+      text: "Let's plan our vacation for next month. What do you think? I've been thinking of visiting a tropical paradise, and I've put together some destination options.\n\nI believe it's time for us to unwind and recharge. Please take a look at the options and let me know your preferences.\n\nWe can start making arrangements to ensure a smooth and enjoyable trip.\n\nExcited to hear your thoughts! Olivia",
+      date: "2022-12-20T18:30:00",
       read: true,
-      labels: ['personal'],
+      labels: ["personal"],
    },
    {
-      id: 'de305d54-75b4-431b-adb2-eb6b9e546014',
-      name: 'James Martin',
-      email: 'jamesmartin@example.com',
-      subject: 'Re: Conference Registration',
-      text: 'I\'ve completed the registration for the conference next month. The event promises to be a great networking opportunity, and I\'m looking forward to attending the various sessions and connecting with industry experts.\n\nI\'ve also attached the conference schedule for your reference.\n\nIf there are any specific topics or sessions you\'d like me to explore, please let me know. It\'s an exciting event, and I\'ll make the most of it.\n\nBest regards, James',
-      date: '2022-11-30T19:15:00',
+      id: "de305d54-75b4-431b-adb2-eb6b9e546014",
+      name: "James Martin",
+      email: "jamesmartin@example.com",
+      subject: "Re: Conference Registration",
+      text: "I've completed the registration for the conference next month. The event promises to be a great networking opportunity, and I'm looking forward to attending the various sessions and connecting with industry experts.\n\nI've also attached the conference schedule for your reference.\n\nIf there are any specific topics or sessions you'd like me to explore, please let me know. It's an exciting event, and I'll make the most of it.\n\nBest regards, James",
+      date: "2022-11-30T19:15:00",
       read: true,
-      labels: ['work', 'conference'],
+      labels: ["work", "conference"],
    },
    {
-      id: '7dd90c63-00f6-40f3-bd87-5060a24e8ee7',
-      name: 'Sophia White',
-      email: 'sophiawhite@example.com',
-      subject: 'Team Dinner',
-      text: 'Let\'s have a team dinner next week to celebrate our success. We\'ve achieved some significant milestones, and it\'s time to acknowledge our hard work and dedication.\n\nI\'ve made reservations at a lovely restaurant, and I\'m sure it\'ll be an enjoyable evening.\n\nPlease confirm your availability and any dietary preferences. Looking forward to a fun and memorable dinner with the team!\n\nBest, Sophia',
-      date: '2022-11-05T20:30:00',
+      id: "7dd90c63-00f6-40f3-bd87-5060a24e8ee7",
+      name: "Sophia White",
+      email: "sophiawhite@example.com",
+      subject: "Team Dinner",
+      text: "Let's have a team dinner next week to celebrate our success. We've achieved some significant milestones, and it's time to acknowledge our hard work and dedication.\n\nI've made reservations at a lovely restaurant, and I'm sure it'll be an enjoyable evening.\n\nPlease confirm your availability and any dietary preferences. Looking forward to a fun and memorable dinner with the team!\n\nBest, Sophia",
+      date: "2022-11-05T20:30:00",
       read: false,
-      labels: ['meeting', 'work'],
+      labels: ["meeting", "work"],
    },
    {
-      id: '99a88f78-3eb4-4d87-87b7-7b15a49a0a05',
-      name: 'Daniel Johnson',
-      email: 'danieljohnson@example.com',
-      subject: 'Feedback Request',
-      text: 'I\'d like your feedback on the latest project deliverables. We\'ve made significant progress, and I value your input to ensure we\'re on the right track.\n\nI\'ve attached the deliverables for your review, and I\'m particularly interested in any areas where you think we can further enhance the quality or efficiency.\n\nYour feedback is invaluable, and I appreciate your time and expertise. Let\'s work together to make this project a success.\n\nRegards, Daniel',
-      date: '2022-10-22T09:30:00',
+      id: "99a88f78-3eb4-4d87-87b7-7b15a49a0a05",
+      name: "Daniel Johnson",
+      email: "danieljohnson@example.com",
+      subject: "Feedback Request",
+      text: "I'd like your feedback on the latest project deliverables. We've made significant progress, and I value your input to ensure we're on the right track.\n\nI've attached the deliverables for your review, and I'm particularly interested in any areas where you think we can further enhance the quality or efficiency.\n\nYour feedback is invaluable, and I appreciate your time and expertise. Let's work together to make this project a success.\n\nRegards, Daniel",
+      date: "2022-10-22T09:30:00",
       read: false,
-      labels: ['work'],
+      labels: ["work"],
    },
    {
-      id: 'f47ac10b-58cc-4372-a567-0e02b2c3d479',
-      name: 'Ava Taylor',
-      email: 'avataylor@example.com',
-      subject: 'Re: Meeting Agenda',
-      text: 'Here\'s the agenda for our meeting next week. I\'ve included all the topics we need to cover, as well as time allocations for each.\n\nIf you have any additional items to discuss or any specific points to address, please let me know, and we can integrate them into the agenda.\n\nIt\'s essential that our meeting is productive and addresses all relevant matters.\n\nLooking forward to our meeting! Ava',
-      date: '2022-10-10T10:45:00',
+      id: "f47ac10b-58cc-4372-a567-0e02b2c3d479",
+      name: "Ava Taylor",
+      email: "avataylor@example.com",
+      subject: "Re: Meeting Agenda",
+      text: "Here's the agenda for our meeting next week. I've included all the topics we need to cover, as well as time allocations for each.\n\nIf you have any additional items to discuss or any specific points to address, please let me know, and we can integrate them into the agenda.\n\nIt's essential that our meeting is productive and addresses all relevant matters.\n\nLooking forward to our meeting! Ava",
+      date: "2022-10-10T10:45:00",
       read: true,
-      labels: ['meeting', 'work'],
+      labels: ["meeting", "work"],
    },
    {
-      id: 'c1a0ecb4-2540-49c5-86f8-21e5ce79e4e6',
-      name: 'William Anderson',
-      email: 'williamanderson@example.com',
-      subject: 'Product Launch Update',
-      text: 'The product launch is on track. I\'ll provide an update during our call. We\'ve made substantial progress in the development and marketing of our new product.\n\nI\'m excited to share the latest updates with you during our upcoming call. It\'s crucial that we coordinate our efforts to ensure a successful launch. Please come prepared with any questions or insights you may have.\n\nLet\'s make this product launch a resounding success!\n\nBest regards, William',
-      date: '2022-09-20T12:00:00',
+      id: "c1a0ecb4-2540-49c5-86f8-21e5ce79e4e6",
+      name: "William Anderson",
+      email: "williamanderson@example.com",
+      subject: "Product Launch Update",
+      text: "The product launch is on track. I'll provide an update during our call. We've made substantial progress in the development and marketing of our new product.\n\nI'm excited to share the latest updates with you during our upcoming call. It's crucial that we coordinate our efforts to ensure a successful launch. Please come prepared with any questions or insights you may have.\n\nLet's make this product launch a resounding success!\n\nBest regards, William",
+      date: "2022-09-20T12:00:00",
       read: false,
-      labels: ['meeting', 'work', 'important'],
+      labels: ["meeting", "work", "important"],
    },
    {
-      id: 'ba54eefd-4097-4949-99f2-2a9ae4d1a836',
-      name: 'Mia Harris',
-      email: 'miaharris@example.com',
-      subject: 'Re: Travel Itinerary',
-      text: 'I\'ve received the travel itinerary. It looks great! Thank you for your prompt assistance in arranging the details. I\'ve reviewed the schedule and the accommodations, and everything seems to be in order. I\'m looking forward to the trip, and I\'m confident it\'ll be a smooth and enjoyable experience.\n\nIf there are any specific activities or attractions you recommend at our destination, please feel free to share your suggestions.\n\nExcited for the trip! Mia',
-      date: '2022-09-10T13:15:00',
+      id: "ba54eefd-4097-4949-99f2-2a9ae4d1a836",
+      name: "Mia Harris",
+      email: "miaharris@example.com",
+      subject: "Re: Travel Itinerary",
+      text: "I've received the travel itinerary. It looks great! Thank you for your prompt assistance in arranging the details. I've reviewed the schedule and the accommodations, and everything seems to be in order. I'm looking forward to the trip, and I'm confident it'll be a smooth and enjoyable experience.\n\nIf there are any specific activities or attractions you recommend at our destination, please feel free to share your suggestions.\n\nExcited for the trip! Mia",
+      date: "2022-09-10T13:15:00",
       read: true,
-      labels: ['personal', 'travel'],
+      labels: ["personal", "travel"],
    },
    {
-      id: 'df09b6ed-28bd-4e0c-85a9-9320ec5179aa',
-      name: 'Ethan Clark',
-      email: 'ethanclark@example.com',
-      subject: 'Team Building Event',
-      text: 'Let\'s plan a team-building event for our department. Team cohesion and morale are vital to our success, and I believe a well-organized team-building event can be incredibly beneficial. I\'ve done some research and have a few ideas for fun and engaging activities.\n\nPlease let me know your thoughts and availability. We want this event to be both enjoyable and productive.\n\nTogether, we\'ll strengthen our team and boost our performance.\n\nRegards, Ethan',
-      date: '2022-08-25T15:30:00',
+      id: "df09b6ed-28bd-4e0c-85a9-9320ec5179aa",
+      name: "Ethan Clark",
+      email: "ethanclark@example.com",
+      subject: "Team Building Event",
+      text: "Let's plan a team-building event for our department. Team cohesion and morale are vital to our success, and I believe a well-organized team-building event can be incredibly beneficial. I've done some research and have a few ideas for fun and engaging activities.\n\nPlease let me know your thoughts and availability. We want this event to be both enjoyable and productive.\n\nTogether, we'll strengthen our team and boost our performance.\n\nRegards, Ethan",
+      date: "2022-08-25T15:30:00",
       read: false,
-      labels: ['meeting', 'work'],
+      labels: ["meeting", "work"],
    },
    {
-      id: 'd67c1842-7f8b-4b4b-9be1-1b3b1ab4611d',
-      name: 'Chloe Hall',
-      email: 'chloehall@example.com',
-      subject: 'Re: Budget Approval',
-      text: 'The budget has been approved. We can proceed with the project. I\'m delighted to inform you that our budget proposal has received the green light from the finance department. This is a significant milestone, and it means we can move forward with the project as planned.\n\nI\'ve attached the finalized budget for your reference. Let\'s ensure that we stay on track and deliver the project on time and within budget.\n\nIt\'s an exciting time for us! Chloe',
-      date: '2022-08-10T16:45:00',
+      id: "d67c1842-7f8b-4b4b-9be1-1b3b1ab4611d",
+      name: "Chloe Hall",
+      email: "chloehall@example.com",
+      subject: "Re: Budget Approval",
+      text: "The budget has been approved. We can proceed with the project. I'm delighted to inform you that our budget proposal has received the green light from the finance department. This is a significant milestone, and it means we can move forward with the project as planned.\n\nI've attached the finalized budget for your reference. Let's ensure that we stay on track and deliver the project on time and within budget.\n\nIt's an exciting time for us! Chloe",
+      date: "2022-08-10T16:45:00",
       read: true,
-      labels: ['work', 'budget'],
+      labels: ["work", "budget"],
    },
    {
-      id: '6c9a7f94-8329-4d70-95d3-51f68c186ae1',
-      name: 'Samuel Turner',
-      email: 'samuelturner@example.com',
-      subject: 'Weekend Hike',
-      text: 'Who\'s up for a weekend hike in the mountains? I\'ve been craving some outdoor adventure, and a hike in the mountains sounds like the perfect escape. If you\'re up for the challenge, we can explore some scenic trails and enjoy the beauty of nature.\n\nI\'ve done some research and have a few routes in mind.\n\nLet me know if you\'re interested, and we can plan the details.\n\nIt\'s sure to be a memorable experience! Samuel',
-      date: '2022-07-28T17:30:00',
+      id: "6c9a7f94-8329-4d70-95d3-51f68c186ae1",
+      name: "Samuel Turner",
+      email: "samuelturner@example.com",
+      subject: "Weekend Hike",
+      text: "Who's up for a weekend hike in the mountains? I've been craving some outdoor adventure, and a hike in the mountains sounds like the perfect escape. If you're up for the challenge, we can explore some scenic trails and enjoy the beauty of nature.\n\nI've done some research and have a few routes in mind.\n\nLet me know if you're interested, and we can plan the details.\n\nIt's sure to be a memorable experience! Samuel",
+      date: "2022-07-28T17:30:00",
       read: false,
-      labels: ['personal'],
+      labels: ["personal"],
    },
 ]
 
@@ -175,8 +175,8 @@ export type Mail = (typeof mails)[number]
 
 export const accounts = [
    {
-      label: 'Alicia Koch',
-      email: 'alicia@example.com',
+      label: "Alicia Koch",
+      email: "alicia@example.com",
       icon: (
          <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <title>Vercel</title>
@@ -185,8 +185,8 @@ export const accounts = [
       ),
    },
    {
-      label: 'Alicia Koch',
-      email: 'alicia@gmail.com',
+      label: "Alicia Koch",
+      email: "alicia@gmail.com",
       icon: (
          <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <title>Gmail</title>
@@ -198,8 +198,8 @@ export const accounts = [
       ),
    },
    {
-      label: 'Alicia Koch',
-      email: 'alicia@me.com',
+      label: "Alicia Koch",
+      email: "alicia@me.com",
       icon: (
          <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <title>iCloud</title>
@@ -216,84 +216,84 @@ export type Account = (typeof accounts)[number]
 
 export const contacts = [
    {
-      name: 'Emma Johnson',
-      email: 'emma.johnson@example.com',
+      name: "Emma Johnson",
+      email: "emma.johnson@example.com",
    },
    {
-      name: 'Liam Wilson',
-      email: 'liam.wilson@example.com',
+      name: "Liam Wilson",
+      email: "liam.wilson@example.com",
    },
    {
-      name: 'Olivia Davis',
-      email: 'olivia.davis@example.com',
+      name: "Olivia Davis",
+      email: "olivia.davis@example.com",
    },
    {
-      name: 'Noah Martinez',
-      email: 'noah.martinez@example.com',
+      name: "Noah Martinez",
+      email: "noah.martinez@example.com",
    },
    {
-      name: 'Ava Taylor',
-      email: 'ava.taylor@example.com',
+      name: "Ava Taylor",
+      email: "ava.taylor@example.com",
    },
    {
-      name: 'Lucas Brown',
-      email: 'lucas.brown@example.com',
+      name: "Lucas Brown",
+      email: "lucas.brown@example.com",
    },
    {
-      name: 'Sophia Smith',
-      email: 'sophia.smith@example.com',
+      name: "Sophia Smith",
+      email: "sophia.smith@example.com",
    },
    {
-      name: 'Ethan Wilson',
-      email: 'ethan.wilson@example.com',
+      name: "Ethan Wilson",
+      email: "ethan.wilson@example.com",
    },
    {
-      name: 'Isabella Jackson',
-      email: 'isabella.jackson@example.com',
+      name: "Isabella Jackson",
+      email: "isabella.jackson@example.com",
    },
    {
-      name: 'Mia Clark',
-      email: 'mia.clark@example.com',
+      name: "Mia Clark",
+      email: "mia.clark@example.com",
    },
    {
-      name: 'Mason Lee',
-      email: 'mason.lee@example.com',
+      name: "Mason Lee",
+      email: "mason.lee@example.com",
    },
    {
-      name: 'Layla Harris',
-      email: 'layla.harris@example.com',
+      name: "Layla Harris",
+      email: "layla.harris@example.com",
    },
    {
-      name: 'William Anderson',
-      email: 'william.anderson@example.com',
+      name: "William Anderson",
+      email: "william.anderson@example.com",
    },
    {
-      name: 'Ella White',
-      email: 'ella.white@example.com',
+      name: "Ella White",
+      email: "ella.white@example.com",
    },
    {
-      name: 'James Thomas',
-      email: 'james.thomas@example.com',
+      name: "James Thomas",
+      email: "james.thomas@example.com",
    },
    {
-      name: 'Harper Lewis',
-      email: 'harper.lewis@example.com',
+      name: "Harper Lewis",
+      email: "harper.lewis@example.com",
    },
    {
-      name: 'Benjamin Moore',
-      email: 'benjamin.moore@example.com',
+      name: "Benjamin Moore",
+      email: "benjamin.moore@example.com",
    },
    {
-      name: 'Aria Hall',
-      email: 'aria.hall@example.com',
+      name: "Aria Hall",
+      email: "aria.hall@example.com",
    },
    {
-      name: 'Henry Turner',
-      email: 'henry.turner@example.com',
+      name: "Henry Turner",
+      email: "henry.turner@example.com",
    },
    {
-      name: 'Scarlett Adams',
-      email: 'scarlett.adams@example.com',
+      name: "Scarlett Adams",
+      email: "scarlett.adams@example.com",
    },
 ]
 
diff --git a/apps/web/app/(app)/examples/mail/page.tsx b/apps/web/app/(app)/examples/mail/page.tsx
index 2aea9c06..908a4cb7 100644
--- a/apps/web/app/(app)/examples/mail/page.tsx
+++ b/apps/web/app/(app)/examples/mail/page.tsx
@@ -1,12 +1,12 @@
-import { cookies } from 'next/headers'
-import Image from 'next/image'
+import { cookies } from "next/headers"
+import Image from "next/image"
 
-import { Mail } from '~/app/(app)/examples/mail/components/mail'
-import { accounts, mails } from '~/app/(app)/examples/mail/data'
+import { Mail } from "~/app/(app)/examples/mail/components/mail"
+import { accounts, mails } from "~/app/(app)/examples/mail/data"
 
 export default function MailPage() {
-   const layout = cookies().get('react-resizable-panels:layout:mail')
-   const collapsed = cookies().get('react-resizable-panels:collapsed')
+   const layout = cookies().get("react-resizable-panels:layout:mail")
+   const collapsed = cookies().get("react-resizable-panels:collapsed")
 
    const defaultLayout = layout ? JSON.parse(layout.value) : undefined
    const defaultCollapsed = collapsed ? JSON.parse(collapsed.value) : undefined
diff --git a/apps/web/app/(app)/examples/mail/use-mail.ts b/apps/web/app/(app)/examples/mail/use-mail.ts
index ee692075..e539f146 100644
--- a/apps/web/app/(app)/examples/mail/use-mail.ts
+++ b/apps/web/app/(app)/examples/mail/use-mail.ts
@@ -1,10 +1,9 @@
-import { atom, useAtom } from 'jotai'
+import { atom, useAtom } from "jotai"
 
-import type { Mail } from '~/app/(app)/examples/mail/data'
-import { mails } from '~/app/(app)/examples/mail/data'
+import { type Mail, mails } from "~/app/(app)/examples/mail/data"
 
-interface Config {
-   selected: Mail['id'] | null
+type Config = {
+   selected: Mail["id"] | null
 }
 
 const configAtom = atom<Config>({
diff --git a/apps/web/app/(app)/examples/music/components/album-artwork.tsx b/apps/web/app/(app)/examples/music/components/album-artwork.tsx
index ad234ecb..77201772 100644
--- a/apps/web/app/(app)/examples/music/components/album-artwork.tsx
+++ b/apps/web/app/(app)/examples/music/components/album-artwork.tsx
@@ -1,9 +1,7 @@
-import Image from 'next/image'
-import { PlusCircle } from 'lucide-react'
+import { PlusCircle } from "lucide-react"
+import Image from "next/image"
 
-import type { Album } from '../data/albums'
-import { playlists } from '../data/playlists'
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 import {
    ContextMenu,
    ContextMenuContent,
@@ -13,25 +11,28 @@ import {
    ContextMenuSubContent,
    ContextMenuSubTrigger,
    ContextMenuTrigger,
-} from '~/registry/miami/ui/context-menu'
+} from "~/registry/miami/ui/context-menu"
+
+import type { Album } from "../data/albums"
+import { playlists } from "../data/playlists"
 
 interface AlbumArtworkProps extends React.HTMLAttributes<HTMLDivElement> {
    album: Album
-   aspectRatio?: 'portrait' | 'square'
+   aspectRatio?: "portrait" | "square"
    width?: number
    height?: number
 }
 
 export function AlbumArtwork({
    album,
-   aspectRatio = 'portrait',
+   aspectRatio = "portrait",
    width,
    height,
    className,
    ...props
 }: AlbumArtworkProps) {
    return (
-      <div className={ny('space-y-3', className)} {...props}>
+      <div className={ny("space-y-3", className)} {...props}>
          <ContextMenu>
             <ContextMenuTrigger>
                <div className="overflow-hidden rounded-md">
@@ -41,8 +42,10 @@ export function AlbumArtwork({
                      width={width}
                      height={height}
                      className={ny(
-                        'size-auto object-cover transition-all hover:scale-105',
-                        aspectRatio === 'portrait' ? 'aspect-[3/4]' : 'aspect-square',
+                        "h-auto w-auto object-cover transition-all hover:scale-105",
+                        aspectRatio === "portrait"
+                           ? "aspect-[3/4]"
+                           : "aspect-square",
                      )}
                   />
                </div>
@@ -53,11 +56,11 @@ export function AlbumArtwork({
                   <ContextMenuSubTrigger>Add to Playlist</ContextMenuSubTrigger>
                   <ContextMenuSubContent className="w-48">
                      <ContextMenuItem>
-                        <PlusCircle className="mr-2 size-4" />
+                        <PlusCircle className="mr-2 h-4 w-4" />
                         New Playlist
                      </ContextMenuItem>
                      <ContextMenuSeparator />
-                     {playlists.map(playlist => (
+                     {playlists.map((playlist) => (
                         <ContextMenuItem key={playlist}>
                            <svg
                               xmlns="http://www.w3.org/2000/svg"
@@ -66,7 +69,7 @@ export function AlbumArtwork({
                               strokeLinecap="round"
                               strokeLinejoin="round"
                               strokeWidth="2"
-                              className="mr-2 size-4"
+                              className="mr-2 h-4 w-4"
                               viewBox="0 0 24 24"
                            >
                               <path d="M21 15V6M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM12 12H3M16 6H3M12 18H3" />
@@ -87,7 +90,7 @@ export function AlbumArtwork({
          </ContextMenu>
          <div className="space-y-1 text-sm">
             <h3 className="font-medium leading-none">{album.name}</h3>
-            <p className="text-muted-foreground text-xs">{album.artist}</p>
+            <p className="text-xs text-muted-foreground">{album.artist}</p>
          </div>
       </div>
    )
diff --git a/apps/web/app/(app)/examples/music/components/menu.tsx b/apps/web/app/(app)/examples/music/components/menu.tsx
index 019ff91c..cfcd0329 100644
--- a/apps/web/app/(app)/examples/music/components/menu.tsx
+++ b/apps/web/app/(app)/examples/music/components/menu.tsx
@@ -13,7 +13,7 @@ import {
    MenubarSubContent,
    MenubarSubTrigger,
    MenubarTrigger,
-} from '~/registry/miami/ui/menubar'
+} from "~/registry/miami/ui/menubar"
 
 export function Menu() {
    return (
@@ -24,26 +24,18 @@ export function Menu() {
                <MenubarItem>About Music</MenubarItem>
                <MenubarSeparator />
                <MenubarItem>
-                  Preferences...
-                  {' '}
-                  <MenubarShortcut>⌘,</MenubarShortcut>
+                  Preferences... <MenubarShortcut>⌘,</MenubarShortcut>
                </MenubarItem>
                <MenubarSeparator />
                <MenubarItem>
-                  Hide Music...
-                  {' '}
-                  <MenubarShortcut>⌘H</MenubarShortcut>
+                  Hide Music... <MenubarShortcut>⌘H</MenubarShortcut>
                </MenubarItem>
                <MenubarItem>
-                  Hide Others...
-                  {' '}
-                  <MenubarShortcut>⇧⌘H</MenubarShortcut>
+                  Hide Others... <MenubarShortcut>⇧⌘H</MenubarShortcut>
                </MenubarItem>
                <MenubarShortcut />
                <MenubarItem>
-                  Quit Music
-                  {' '}
-                  <MenubarShortcut>⌘Q</MenubarShortcut>
+                  Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
                </MenubarItem>
             </MenubarContent>
          </MenubarMenu>
@@ -54,33 +46,24 @@ export function Menu() {
                   <MenubarSubTrigger>New</MenubarSubTrigger>
                   <MenubarSubContent className="w-[230px]">
                      <MenubarItem>
-                        Playlist
-                        {' '}
-                        <MenubarShortcut>⌘N</MenubarShortcut>
+                        Playlist <MenubarShortcut>⌘N</MenubarShortcut>
                      </MenubarItem>
                      <MenubarItem disabled>
-                        Playlist from Selection
-                        {' '}
+                        Playlist from Selection{" "}
                         <MenubarShortcut>⇧⌘N</MenubarShortcut>
                      </MenubarItem>
                      <MenubarItem>
-                        Smart Playlist...
-                        {' '}
-                        <MenubarShortcut>⌥⌘N</MenubarShortcut>
+                        Smart Playlist... <MenubarShortcut>⌥⌘N</MenubarShortcut>
                      </MenubarItem>
                      <MenubarItem>Playlist Folder</MenubarItem>
                      <MenubarItem disabled>Genius Playlist</MenubarItem>
                   </MenubarSubContent>
                </MenubarSub>
                <MenubarItem>
-                  Open Stream URL...
-                  {' '}
-                  <MenubarShortcut>⌘U</MenubarShortcut>
+                  Open Stream URL... <MenubarShortcut>⌘U</MenubarShortcut>
                </MenubarItem>
                <MenubarItem>
-                  Close Window
-                  {' '}
-                  <MenubarShortcut>⌘W</MenubarShortcut>
+                  Close Window <MenubarShortcut>⌘W</MenubarShortcut>
                </MenubarItem>
                <MenubarSeparator />
                <MenubarSub>
@@ -101,25 +84,18 @@ export function Menu() {
                   </MenubarSubContent>
                </MenubarSub>
                <MenubarItem>
-                  Import...
-                  {' '}
-                  <MenubarShortcut>⌘O</MenubarShortcut>
+                  Import... <MenubarShortcut>⌘O</MenubarShortcut>
                </MenubarItem>
                <MenubarItem disabled>Burn Playlist to Disc...</MenubarItem>
                <MenubarSeparator />
                <MenubarItem>
-                  Show in Finder
-                  {' '}
-                  <MenubarShortcut>⇧⌘R</MenubarShortcut>
-                  {' '}
+                  Show in Finder <MenubarShortcut>⇧⌘R</MenubarShortcut>{" "}
                </MenubarItem>
                <MenubarItem>Convert</MenubarItem>
                <MenubarSeparator />
                <MenubarItem>Page Setup...</MenubarItem>
                <MenubarItem disabled>
-                  Print...
-                  {' '}
-                  <MenubarShortcut>⌘P</MenubarShortcut>
+                  Print... <MenubarShortcut>⌘P</MenubarShortcut>
                </MenubarItem>
             </MenubarContent>
          </MenubarMenu>
@@ -127,46 +103,31 @@ export function Menu() {
             <MenubarTrigger>Edit</MenubarTrigger>
             <MenubarContent>
                <MenubarItem disabled>
-                  Undo
-                  {' '}
-                  <MenubarShortcut>⌘Z</MenubarShortcut>
+                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>
                </MenubarItem>
                <MenubarItem disabled>
-                  Redo
-                  {' '}
-                  <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
                </MenubarItem>
                <MenubarSeparator />
                <MenubarItem disabled>
-                  Cut
-                  {' '}
-                  <MenubarShortcut>⌘X</MenubarShortcut>
+                  Cut <MenubarShortcut>⌘X</MenubarShortcut>
                </MenubarItem>
                <MenubarItem disabled>
-                  Copy
-                  {' '}
-                  <MenubarShortcut>⌘C</MenubarShortcut>
+                  Copy <MenubarShortcut>⌘C</MenubarShortcut>
                </MenubarItem>
                <MenubarItem disabled>
-                  Paste
-                  {' '}
-                  <MenubarShortcut>⌘V</MenubarShortcut>
+                  Paste <MenubarShortcut>⌘V</MenubarShortcut>
                </MenubarItem>
                <MenubarSeparator />
                <MenubarItem>
-                  Select All
-                  {' '}
-                  <MenubarShortcut>⌘A</MenubarShortcut>
+                  Select All <MenubarShortcut>⌘A</MenubarShortcut>
                </MenubarItem>
                <MenubarItem disabled>
-                  Deselect All
-                  {' '}
-                  <MenubarShortcut>⇧⌘A</MenubarShortcut>
+                  Deselect All <MenubarShortcut>⇧⌘A</MenubarShortcut>
                </MenubarItem>
                <MenubarSeparator />
                <MenubarItem>
-                  Smart Dictation...
-                  {' '}
+                  Smart Dictation...{" "}
                   <MenubarShortcut>
                      <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -175,7 +136,7 @@ export function Menu() {
                         strokeLinecap="round"
                         strokeLinejoin="round"
                         strokeWidth="2"
-                        className="size-4"
+                        className="h-4 w-4"
                         viewBox="0 0 24 24"
                      >
                         <path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
@@ -184,8 +145,7 @@ export function Menu() {
                   </MenubarShortcut>
                </MenubarItem>
                <MenubarItem>
-                  Emoji & Symbols
-                  {' '}
+                  Emoji & Symbols{" "}
                   <MenubarShortcut>
                      <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -194,7 +154,7 @@ export function Menu() {
                         strokeLinecap="round"
                         strokeLinejoin="round"
                         strokeWidth="2"
-                        className="size-4"
+                        className="h-4 w-4"
                         viewBox="0 0 24 24"
                      >
                         <circle cx="12" cy="12" r="10" />
diff --git a/apps/web/app/(app)/examples/music/components/podcast-empty-placeholder.tsx b/apps/web/app/(app)/examples/music/components/podcast-empty-placeholder.tsx
index aee1a005..2d5252d3 100644
--- a/apps/web/app/(app)/examples/music/components/podcast-empty-placeholder.tsx
+++ b/apps/web/app/(app)/examples/music/components/podcast-empty-placeholder.tsx
@@ -1,4 +1,4 @@
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    Dialog,
    DialogContent,
@@ -7,9 +7,9 @@ import {
    DialogHeader,
    DialogTitle,
    DialogTrigger,
-} from '~/registry/miami/ui/dialog'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/dialog"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 
 export function PodcastEmptyPlaceholder() {
    return (
@@ -22,7 +22,7 @@ export function PodcastEmptyPlaceholder() {
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
-               className="text-muted-foreground size-10"
+               className="h-10 w-10 text-muted-foreground"
                viewBox="0 0 24 24"
             >
                <circle cx="12" cy="11" r="1" />
@@ -31,7 +31,7 @@ export function PodcastEmptyPlaceholder() {
             </svg>
 
             <h3 className="mt-4 text-lg font-semibold">No episodes added</h3>
-            <p className="text-muted-foreground mb-4 mt-2 text-sm">
+            <p className="mb-4 mt-2 text-sm text-muted-foreground">
                You have not added any podcasts. Add one below.
             </p>
             <Dialog>
@@ -50,7 +50,10 @@ export function PodcastEmptyPlaceholder() {
                   <div className="grid gap-4 py-4">
                      <div className="grid gap-2">
                         <Label htmlFor="url">Podcast URL</Label>
-                        <Input id="url" placeholder="https://example.com/feed.xml" />
+                        <Input
+                           id="url"
+                           placeholder="https://example.com/feed.xml"
+                        />
                      </div>
                   </div>
                   <DialogFooter>
diff --git a/apps/web/app/(app)/examples/music/components/sidebar.tsx b/apps/web/app/(app)/examples/music/components/sidebar.tsx
index 6b5dbfe1..8143d3ba 100644
--- a/apps/web/app/(app)/examples/music/components/sidebar.tsx
+++ b/apps/web/app/(app)/examples/music/components/sidebar.tsx
@@ -1,7 +1,8 @@
-import type { Playlist } from '../data/playlists'
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import { ScrollArea } from '~/registry/miami/ui/scroll-area'
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { ScrollArea } from "~/registry/miami/ui/scroll-area"
+
+import type { Playlist } from "../data/playlists"
 
 interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
    playlists: Playlist[]
@@ -9,7 +10,7 @@ interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export function Sidebar({ className, playlists }: SidebarProps) {
    return (
-      <div className={ny('pb-12', className)}>
+      <div className={ny("pb-12", className)}>
          <div className="space-y-4 py-4">
             <div className="px-3 py-2">
                <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
@@ -25,7 +26,7 @@ export function Sidebar({ className, playlists }: SidebarProps) {
                         strokeWidth="2"
                         strokeLinecap="round"
                         strokeLinejoin="round"
-                        className="mr-2 size-4"
+                        className="mr-2 h-4 w-4"
                      >
                         <circle cx="12" cy="12" r="10" />
                         <polygon points="10 8 16 12 10 16 10 8" />
@@ -41,7 +42,7 @@ export function Sidebar({ className, playlists }: SidebarProps) {
                         strokeWidth="2"
                         strokeLinecap="round"
                         strokeLinejoin="round"
-                        className="mr-2 size-4"
+                        className="mr-2 h-4 w-4"
                      >
                         <rect width="7" height="7" x="3" y="3" rx="1" />
                         <rect width="7" height="7" x="14" y="3" rx="1" />
@@ -59,7 +60,7 @@ export function Sidebar({ className, playlists }: SidebarProps) {
                         strokeWidth="2"
                         strokeLinecap="round"
                         strokeLinejoin="round"
-                        className="mr-2 size-4"
+                        className="mr-2 h-4 w-4"
                      >
                         <path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9" />
                         <path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5" />
@@ -85,7 +86,7 @@ export function Sidebar({ className, playlists }: SidebarProps) {
                         strokeWidth="2"
                         strokeLinecap="round"
                         strokeLinejoin="round"
-                        className="mr-2 size-4"
+                        className="mr-2 h-4 w-4"
                      >
                         <path d="M21 15V6" />
                         <path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
@@ -104,7 +105,7 @@ export function Sidebar({ className, playlists }: SidebarProps) {
                         strokeWidth="2"
                         strokeLinecap="round"
                         strokeLinejoin="round"
-                        className="mr-2 size-4"
+                        className="mr-2 h-4 w-4"
                      >
                         <circle cx="8" cy="18" r="4" />
                         <path d="M12 18V2l7 4" />
@@ -120,7 +121,7 @@ export function Sidebar({ className, playlists }: SidebarProps) {
                         strokeWidth="2"
                         strokeLinecap="round"
                         strokeLinejoin="round"
-                        className="mr-2 size-4"
+                        className="mr-2 h-4 w-4"
                      >
                         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
                         <circle cx="12" cy="7" r="4" />
@@ -136,7 +137,7 @@ export function Sidebar({ className, playlists }: SidebarProps) {
                         strokeWidth="2"
                         strokeLinecap="round"
                         strokeLinejoin="round"
-                        className="mr-2 size-4"
+                        className="mr-2 h-4 w-4"
                      >
                         <path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
                         <circle cx="17" cy="7" r="5" />
@@ -152,7 +153,7 @@ export function Sidebar({ className, playlists }: SidebarProps) {
                         strokeWidth="2"
                         strokeLinecap="round"
                         strokeLinejoin="round"
-                        className="mr-2 size-4"
+                        className="mr-2 h-4 w-4"
                      >
                         <path d="m16 6 4 14" />
                         <path d="M12 6v14" />
@@ -183,7 +184,7 @@ export function Sidebar({ className, playlists }: SidebarProps) {
                               strokeWidth="2"
                               strokeLinecap="round"
                               strokeLinejoin="round"
-                              className="mr-2 size-4"
+                              className="mr-2 h-4 w-4"
                            >
                               <path d="M21 15V6" />
                               <path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
diff --git a/apps/web/app/(app)/examples/music/data/albums.ts b/apps/web/app/(app)/examples/music/data/albums.ts
index 6af72e61..cc628be1 100644
--- a/apps/web/app/(app)/examples/music/data/albums.ts
+++ b/apps/web/app/(app)/examples/music/data/albums.ts
@@ -6,66 +6,56 @@ export interface Album {
 
 export const listenNowAlbums: Album[] = [
    {
-      name: 'React Rendezvous',
-      artist: 'Ethan Byte',
-      cover:
-      'https://images.unsplash.com/photo-1611348586804-61bf6c080437?w=300&dpr=2&q=80',
+      name: "React Rendezvous",
+      artist: "Ethan Byte",
+      cover: "https://images.unsplash.com/photo-1611348586804-61bf6c080437?w=300&dpr=2&q=80",
    },
    {
-      name: 'Async Awakenings',
-      artist: 'Nina Netcode',
-      cover:
-      'https://images.unsplash.com/photo-1468817814611-b7edf94b5d60?w=300&dpr=2&q=80',
+      name: "Async Awakenings",
+      artist: "Nina Netcode",
+      cover: "https://images.unsplash.com/photo-1468817814611-b7edf94b5d60?w=300&dpr=2&q=80",
    },
    {
-      name: 'The Art of Reusability',
-      artist: 'Lena Logic',
-      cover:
-      'https://images.unsplash.com/photo-1528143358888-6d3c7f67bd5d?w=300&dpr=2&q=80',
+      name: "The Art of Reusability",
+      artist: "Lena Logic",
+      cover: "https://images.unsplash.com/photo-1528143358888-6d3c7f67bd5d?w=300&dpr=2&q=80",
    },
    {
-      name: 'Stateful Symphony',
-      artist: 'Beth Binary',
-      cover:
-      'https://images.unsplash.com/photo-1490300472339-79e4adc6be4a?w=300&dpr=2&q=80',
+      name: "Stateful Symphony",
+      artist: "Beth Binary",
+      cover: "https://images.unsplash.com/photo-1490300472339-79e4adc6be4a?w=300&dpr=2&q=80",
    },
 ]
 
 export const madeForYouAlbums: Album[] = [
    {
-      name: 'Thinking Components',
-      artist: 'Lena Logic',
-      cover:
-      'https://images.unsplash.com/photo-1615247001958-f4bc92fa6a4a?w=300&dpr=2&q=80',
+      name: "Thinking Components",
+      artist: "Lena Logic",
+      cover: "https://images.unsplash.com/photo-1615247001958-f4bc92fa6a4a?w=300&dpr=2&q=80",
    },
    {
-      name: 'Functional Fury',
-      artist: 'Beth Binary',
-      cover:
-      'https://images.unsplash.com/photo-1513745405825-efaf9a49315f?w=300&dpr=2&q=80',
+      name: "Functional Fury",
+      artist: "Beth Binary",
+      cover: "https://images.unsplash.com/photo-1513745405825-efaf9a49315f?w=300&dpr=2&q=80",
    },
    {
-      name: 'React Rendezvous',
-      artist: 'Ethan Byte',
-      cover:
-      'https://images.unsplash.com/photo-1614113489855-66422ad300a4?w=300&dpr=2&q=80',
+      name: "React Rendezvous",
+      artist: "Ethan Byte",
+      cover: "https://images.unsplash.com/photo-1614113489855-66422ad300a4?w=300&dpr=2&q=80",
    },
    {
-      name: 'Stateful Symphony',
-      artist: 'Beth Binary',
-      cover:
-      'https://images.unsplash.com/photo-1446185250204-f94591f7d702?w=300&dpr=2&q=80',
+      name: "Stateful Symphony",
+      artist: "Beth Binary",
+      cover: "https://images.unsplash.com/photo-1446185250204-f94591f7d702?w=300&dpr=2&q=80",
    },
    {
-      name: 'Async Awakenings',
-      artist: 'Nina Netcode',
-      cover:
-      'https://images.unsplash.com/photo-1468817814611-b7edf94b5d60?w=300&dpr=2&q=80',
+      name: "Async Awakenings",
+      artist: "Nina Netcode",
+      cover: "https://images.unsplash.com/photo-1468817814611-b7edf94b5d60?w=300&dpr=2&q=80",
    },
    {
-      name: 'The Art of Reusability',
-      artist: 'Lena Logic',
-      cover:
-      'https://images.unsplash.com/photo-1490300472339-79e4adc6be4a?w=300&dpr=2&q=80',
+      name: "The Art of Reusability",
+      artist: "Lena Logic",
+      cover: "https://images.unsplash.com/photo-1490300472339-79e4adc6be4a?w=300&dpr=2&q=80",
    },
 ]
diff --git a/apps/web/app/(app)/examples/music/data/playlists.ts b/apps/web/app/(app)/examples/music/data/playlists.ts
index 3efe3271..7a5c495f 100644
--- a/apps/web/app/(app)/examples/music/data/playlists.ts
+++ b/apps/web/app/(app)/examples/music/data/playlists.ts
@@ -1,16 +1,16 @@
 export type Playlist = (typeof playlists)[number]
 
 export const playlists = [
-   'Recently Added',
-   'Recently Played',
-   'Top Songs',
-   'Top Albums',
-   'Top Artists',
-   'Logic Discography',
-   'Bedtime Beats',
-   'Feeling Happy',
-   'I miss Y2K Pop',
-   'Runtober',
-   'Mellow Days',
-   'Eminem Essentials',
+   "Recently Added",
+   "Recently Played",
+   "Top Songs",
+   "Top Albums",
+   "Top Artists",
+   "Logic Discography",
+   "Bedtime Beats",
+   "Feeling Happy",
+   "I miss Y2K Pop",
+   "Runtober",
+   "Mellow Days",
+   "Eminem Essentials",
 ]
diff --git a/apps/web/app/(app)/examples/music/page.tsx b/apps/web/app/(app)/examples/music/page.tsx
index cb355e42..122975ae 100644
--- a/apps/web/app/(app)/examples/music/page.tsx
+++ b/apps/web/app/(app)/examples/music/page.tsx
@@ -1,26 +1,27 @@
-import type { Metadata } from 'next'
-import Image from 'next/image'
-import { PlusCircle } from 'lucide-react'
+import { PlusCircle } from "lucide-react"
+import type { Metadata } from "next"
+import Image from "next/image"
 
-import { AlbumArtwork } from './components/album-artwork'
-import { Menu } from './components/menu'
-import { PodcastEmptyPlaceholder } from './components/podcast-empty-placeholder'
-import { Sidebar } from './components/sidebar'
-import { listenNowAlbums, madeForYouAlbums } from './data/albums'
-import { playlists } from './data/playlists'
+import { Button } from "~/registry/miami/ui/button"
+import { ScrollArea, ScrollBar } from "~/registry/miami/ui/scroll-area"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
-} from '~/registry/miami/ui/tabs'
-import { Separator } from '~/registry/miami/ui/separator'
-import { ScrollArea, ScrollBar } from '~/registry/miami/ui/scroll-area'
-import { Button } from '~/registry/miami/ui/button'
+} from "~/registry/miami/ui/tabs"
+
+import { AlbumArtwork } from "./components/album-artwork"
+import { Menu } from "./components/menu"
+import { PodcastEmptyPlaceholder } from "./components/podcast-empty-placeholder"
+import { Sidebar } from "./components/sidebar"
+import { listenNowAlbums, madeForYouAlbums } from "./data/albums"
+import { playlists } from "./data/playlists"
 
 export const metadata: Metadata = {
-   title: 'Music App',
-   description: 'Example music app using the components.',
+   title: "Music App",
+   description: "Example music app using the components.",
 }
 
 export default function MusicPage() {
@@ -47,16 +48,27 @@ export default function MusicPage() {
             <div className="border-t">
                <div className="bg-background">
                   <div className="grid lg:grid-cols-5">
-                     <Sidebar playlists={playlists} className="hidden lg:block" />
+                     <Sidebar
+                        playlists={playlists}
+                        className="hidden lg:block"
+                     />
                      <div className="col-span-3 lg:col-span-4 lg:border-l">
                         <div className="h-full px-4 py-6 lg:px-8">
-                           <Tabs defaultValue="music" className="h-full space-y-6">
+                           <Tabs
+                              defaultValue="music"
+                              className="h-full space-y-6"
+                           >
                               <div className="space-between flex items-center">
                                  <TabsList>
-                                    <TabsTrigger value="music" className="relative">
+                                    <TabsTrigger
+                                       value="music"
+                                       className="relative"
+                                    >
                                        Music
                                     </TabsTrigger>
-                                    <TabsTrigger value="podcasts">Podcasts</TabsTrigger>
+                                    <TabsTrigger value="podcasts">
+                                       Podcasts
+                                    </TabsTrigger>
                                     <TabsTrigger value="live" disabled>
                                        Live
                                     </TabsTrigger>
@@ -77,7 +89,7 @@ export default function MusicPage() {
                                        <h2 className="text-2xl font-semibold tracking-tight">
                                           Listen Now
                                        </h2>
-                                       <p className="text-muted-foreground text-sm">
+                                       <p className="text-sm text-muted-foreground">
                                           Top picks for you. Updated daily.
                                        </p>
                                     </div>
@@ -86,7 +98,7 @@ export default function MusicPage() {
                                  <div className="relative">
                                     <ScrollArea>
                                        <div className="flex space-x-4 pb-4">
-                                          {listenNowAlbums.map(album => (
+                                          {listenNowAlbums.map((album) => (
                                              <AlbumArtwork
                                                 key={album.name}
                                                 album={album}
@@ -104,7 +116,7 @@ export default function MusicPage() {
                                     <h2 className="text-2xl font-semibold tracking-tight">
                                        Made for You
                                     </h2>
-                                    <p className="text-muted-foreground text-sm">
+                                    <p className="text-sm text-muted-foreground">
                                        Your personal playlists. Updated daily.
                                     </p>
                                  </div>
@@ -112,7 +124,7 @@ export default function MusicPage() {
                                  <div className="relative">
                                     <ScrollArea>
                                        <div className="flex space-x-4 pb-4">
-                                          {madeForYouAlbums.map(album => (
+                                          {madeForYouAlbums.map((album) => (
                                              <AlbumArtwork
                                                 key={album.name}
                                                 album={album}
@@ -136,7 +148,7 @@ export default function MusicPage() {
                                        <h2 className="text-2xl font-semibold tracking-tight">
                                           New Episodes
                                        </h2>
-                                       <p className="text-muted-foreground text-sm">
+                                       <p className="text-sm text-muted-foreground">
                                           Your favorite podcasts. Updated daily.
                                        </p>
                                     </div>
diff --git a/apps/web/app/(app)/examples/playground/components/code-viewer.tsx b/apps/web/app/(app)/examples/playground/components/code-viewer.tsx
index 01438795..caf9b6a6 100644
--- a/apps/web/app/(app)/examples/playground/components/code-viewer.tsx
+++ b/apps/web/app/(app)/examples/playground/components/code-viewer.tsx
@@ -1,4 +1,4 @@
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    Dialog,
    DialogContent,
@@ -6,7 +6,7 @@ import {
    DialogHeader,
    DialogTitle,
    DialogTrigger,
-} from '~/registry/miami/ui/dialog'
+} from "~/registry/miami/ui/dialog"
 
 export function CodeViewer() {
    return (
@@ -18,23 +18,19 @@ export function CodeViewer() {
             <DialogHeader>
                <DialogTitle>View code</DialogTitle>
                <DialogDescription>
-                  You can use the following code to start integrating your current
-                  prompt and settings into your application.
+                  You can use the following code to start integrating your
+                  current prompt and settings into your application.
                </DialogDescription>
             </DialogHeader>
             <div className="grid gap-4">
                <div className="rounded-md bg-black p-6">
                   <pre>
-                     <code className="text-muted-foreground grid gap-1 text-sm [&_span]:h-4">
+                     <code className="grid gap-1 text-sm text-muted-foreground [&_span]:h-4">
                         <span>
-                           <span className="text-sky-300">import</span>
-                           {' '}
-                           os
+                           <span className="text-sky-300">import</span> os
                         </span>
                         <span>
-                           <span className="text-sky-300">import</span>
-                           {' '}
-                           openai
+                           <span className="text-sky-300">import</span> openai
                         </span>
                         <span />
                         <span>
@@ -47,56 +43,50 @@ export function CodeViewer() {
                         <span />
                         <span>response = openai.Completion.create(</span>
                         <span>
-                           {' '}
+                           {" "}
                            model=
-                           <span className="text-green-300">&quot;davinci&quot;</span>
+                           <span className="text-green-300">
+                              &quot;davinci&quot;
+                           </span>
                            ,
                         </span>
                         <span>
-                           {' '}
+                           {" "}
                            prompt=
-                           <span className="text-amber-300">&quot;&quot;</span>
-                           ,
+                           <span className="text-amber-300">&quot;&quot;</span>,
                         </span>
                         <span>
-                           {' '}
+                           {" "}
                            temperature=
-                           <span className="text-amber-300">0.9</span>
-                           ,
+                           <span className="text-amber-300">0.9</span>,
                         </span>
                         <span>
-                           {' '}
-                           max_tokens=
-                           <span className="text-amber-300">5</span>
-                           ,
+                           {" "}
+                           max_tokens=<span className="text-amber-300">5</span>,
                         </span>
                         <span>
-                           {' '}
-                           top_p=
-                           <span className="text-amber-300">1</span>
-                           ,
+                           {" "}
+                           top_p=<span className="text-amber-300">1</span>,
                         </span>
                         <span>
-                           {' '}
+                           {" "}
                            frequency_penalty=
-                           <span className="text-amber-300">0</span>
-                           ,
+                           <span className="text-amber-300">0</span>,
                         </span>
                         <span>
-                           {' '}
+                           {" "}
                            presence_penalty=
-                           <span className="text-green-300">0</span>
-                           ,
+                           <span className="text-green-300">0</span>,
                         </span>
                         <span>)</span>
                      </code>
                   </pre>
                </div>
                <div>
-                  <p className="text-muted-foreground text-sm">
+                  <p className="text-sm text-muted-foreground">
                      Your API Key can be found here. You should use environment
-                     variables or a secret management tool to expose your key to your
-                     applications.
+                     variables or a secret management tool to expose your key to
+                     your applications.
                   </p>
                </div>
             </div>
diff --git a/apps/web/app/(app)/examples/playground/components/maxlength-selector.tsx b/apps/web/app/(app)/examples/playground/components/maxlength-selector.tsx
index 09cf2e36..a49ea072 100644
--- a/apps/web/app/(app)/examples/playground/components/maxlength-selector.tsx
+++ b/apps/web/app/(app)/examples/playground/components/maxlength-selector.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import type { SliderProps } from '@radix-ui/react-slider'
+import type { SliderProps } from "@radix-ui/react-slider"
+import * as React from "react"
 
 import {
    HoverCard,
    HoverCardContent,
    HoverCardTrigger,
-} from '~/registry/miami/ui/hover-card'
-import { Label } from '~/registry/miami/ui/label'
-import { Slider } from '~/registry/miami/ui/slider'
+} from "~/registry/miami/ui/hover-card"
+import { Label } from "~/registry/miami/ui/label"
+import { Slider } from "~/registry/miami/ui/slider"
 
 interface MaxLengthSelectorProps {
-   defaultValue: SliderProps['defaultValue']
+   defaultValue: SliderProps["defaultValue"]
 }
 
 export function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
@@ -25,7 +25,7 @@ export function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
                <div className="grid gap-4">
                   <div className="flex items-center justify-between">
                      <Label htmlFor="maxlength">Maximum Length</Label>
-                     <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+                     <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
                         {value}
                      </span>
                   </div>
@@ -35,7 +35,7 @@ export function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
                      defaultValue={value}
                      step={10}
                      onValueChange={setValue}
-                     className="[&_[role=slider]]:size-4"
+                     className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
                      aria-label="Maximum Length"
                   />
                </div>
@@ -45,9 +45,9 @@ export function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
                className="w-[260px] text-sm"
                side="left"
             >
-               The maximum number of tokens to generate. Requests can use up to 2,048
-               or 4,000 tokens, shared between prompt and completion. The exact limit
-               varies by model.
+               The maximum number of tokens to generate. Requests can use up to
+               2,048 or 4,000 tokens, shared between prompt and completion. The
+               exact limit varies by model.
             </HoverCardContent>
          </HoverCard>
       </div>
diff --git a/apps/web/app/(app)/examples/playground/components/model-selector.tsx b/apps/web/app/(app)/examples/playground/components/model-selector.tsx
index c2890b7b..367893b3 100644
--- a/apps/web/app/(app)/examples/playground/components/model-selector.tsx
+++ b/apps/web/app/(app)/examples/playground/components/model-selector.tsx
@@ -1,13 +1,12 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import type { PopoverProps } from '@radix-ui/react-popover'
-import { Check, ChevronsUpDown } from 'lucide-react'
+import type { PopoverProps } from "@radix-ui/react-popover"
+import { Check, ChevronsUpDown } from "lucide-react"
+import * as React from "react"
 
-import type { Model, ModelType } from '../data/models'
-import { ny } from '~/lib/utils'
-import { useMutationObserver } from '~/hooks/use-mutation-observer'
-import { Button } from '~/registry/miami/ui/button'
+import { useMutationObserver } from "~/hooks/use-mutation-observer"
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Command,
    CommandEmpty,
@@ -15,18 +14,20 @@ import {
    CommandInput,
    CommandItem,
    CommandList,
-} from '~/registry/miami/ui/command'
+} from "~/registry/miami/ui/command"
 import {
    HoverCard,
    HoverCardContent,
    HoverCardTrigger,
-} from '~/registry/miami/ui/hover-card'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/hover-card"
+import { Label } from "~/registry/miami/ui/label"
 import {
    Popover,
    PopoverContent,
    PopoverTrigger,
-} from '~/registry/miami/ui/popover'
+} from "~/registry/miami/ui/popover"
+
+import type { Model, ModelType } from "../data/models"
 
 interface ModelSelectorProps extends PopoverProps {
    types: readonly ModelType[]
@@ -49,8 +50,9 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
                className="w-[260px] text-sm"
                side="left"
             >
-               The model which will generate the completion. Some models are suitable
-               for natural language tasks, others specialize in code. Learn more.
+               The model which will generate the completion. Some models are
+               suitable for natural language tasks, others specialize in code.
+               Learn more.
             </HoverCardContent>
          </HoverCard>
          <Popover open={open} onOpenChange={setOpen} {...props}>
@@ -62,7 +64,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
                   aria-label="Select a model"
                   className="w-full justify-between"
                >
-                  {selectedModel ? selectedModel.name : 'Select a model...'}
+                  {selectedModel ? selectedModel.name : "Select a model..."}
                   <ChevronsUpDown className="opacity-50" />
                </Button>
             </PopoverTrigger>
@@ -75,22 +77,22 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
                      className="min-h-[280px]"
                   >
                      <div className="grid gap-2">
-                        <h4 className="font-medium leading-none">{peekedModel.name}</h4>
-                        <div className="text-muted-foreground text-sm">
+                        <h4 className="font-medium leading-none">
+                           {peekedModel.name}
+                        </h4>
+                        <div className="text-sm text-muted-foreground">
                            {peekedModel.description}
                         </div>
-                        {peekedModel.strengths
-                           ? (
-                                 <div className="mt-4 grid gap-2">
-                                    <h5 className="text-sm font-medium leading-none">
-                                       Strengths
-                                    </h5>
-                                    <ul className="text-muted-foreground text-sm">
-                                       {peekedModel.strengths}
-                                    </ul>
-                                 </div>
-                              )
-                           : null}
+                        {peekedModel.strengths ? (
+                           <div className="mt-4 grid gap-2">
+                              <h5 className="text-sm font-medium leading-none">
+                                 Strengths
+                              </h5>
+                              <ul className="text-sm text-muted-foreground">
+                                 {peekedModel.strengths}
+                              </ul>
+                           </div>
+                        ) : null}
                      </div>
                   </HoverCardContent>
                   <Command loop>
@@ -98,16 +100,18 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
                         <CommandInput placeholder="Search Models..." />
                         <CommandEmpty>No Models found.</CommandEmpty>
                         <HoverCardTrigger />
-                        {types.map(type => (
+                        {types.map((type) => (
                            <CommandGroup key={type} heading={type}>
                               {models
-                                 .filter(model => model.type === type)
-                                 .map(model => (
+                                 .filter((model) => model.type === type)
+                                 .map((model) => (
                                     <ModelItem
                                        key={model.id}
                                        model={model}
-                                       isSelected={selectedModel?.id === model.id}
-                                       onPeek={model => setPeekedModel(model)}
+                                       isSelected={
+                                          selectedModel?.id === model.id
+                                       }
+                                       onPeek={(model) => setPeekedModel(model)}
                                        onSelect={() => {
                                           setSelectedModel(model)
                                           setOpen(false)
@@ -138,9 +142,9 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
    useMutationObserver(ref, (mutations) => {
       mutations.forEach((mutation) => {
          if (
-            mutation.type === 'attributes'
-            && mutation.attributeName === 'aria-selected'
-            && ref.current?.getAttribute('aria-selected') === 'true'
+            mutation.type === "attributes" &&
+            mutation.attributeName === "aria-selected" &&
+            ref.current?.getAttribute("aria-selected") === "true"
          ) {
             onPeek(model)
          }
@@ -156,7 +160,7 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
       >
          {model.name}
          <Check
-            className={ny('ml-auto', isSelected ? 'opacity-100' : 'opacity-0')}
+            className={ny("ml-auto", isSelected ? "opacity-100" : "opacity-0")}
          />
       </CommandItem>
    )
diff --git a/apps/web/app/(app)/examples/playground/components/preset-actions.tsx b/apps/web/app/(app)/examples/playground/components/preset-actions.tsx
index 9a8be721..04e53c02 100644
--- a/apps/web/app/(app)/examples/playground/components/preset-actions.tsx
+++ b/apps/web/app/(app)/examples/playground/components/preset-actions.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Dialog } from '@radix-ui/react-dialog'
-import { MoreHorizontal } from 'lucide-react'
+import { Dialog } from "@radix-ui/react-dialog"
+import { MoreHorizontal } from "lucide-react"
+import * as React from "react"
 
-import { toast } from '~/registry/miami/hooks/use-toast'
+import { toast } from "~/registry/miami/hooks/use-toast"
 import {
    AlertDialog,
    AlertDialogCancel,
@@ -13,24 +13,24 @@ import {
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
-} from '~/registry/miami/ui/alert-dialog'
-import { Button } from '~/registry/miami/ui/button'
+} from "~/registry/miami/ui/alert-dialog"
+import { Button } from "~/registry/miami/ui/button"
 import {
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
-} from '~/registry/miami/ui/dialog'
+} from "~/registry/miami/ui/dialog"
 import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Label } from '~/registry/miami/ui/label'
-import { Switch } from '~/registry/miami/ui/switch'
+} from "~/registry/miami/ui/dropdown-menu"
+import { Label } from "~/registry/miami/ui/label"
+import { Switch } from "~/registry/miami/ui/switch"
 
 export function PresetActions() {
    const [open, setIsOpen] = React.useState(false)
@@ -63,24 +63,25 @@ export function PresetActions() {
                <DialogHeader>
                   <DialogTitle>Content filter preferences</DialogTitle>
                   <DialogDescription>
-                     The content filter flags text that may violate our content policy.
-                     It&apos;s powered by our moderation endpoint which is free to use
-                     to moderate your OpenAI API traffic. Learn more.
+                     The content filter flags text that may violate our content
+                     policy. It&apos;s powered by our moderation endpoint which
+                     is free to use to moderate your OpenAI API traffic. Learn
+                     more.
                   </DialogDescription>
                </DialogHeader>
                <div className="py-6">
-                  <h4 className="text-muted-foreground text-sm">
+                  <h4 className="text-sm text-muted-foreground">
                      Playground Warnings
                   </h4>
                   <div className="flex items-start justify-between space-x-4 pt-3">
-                     <Switch name="show" id="show" defaultChecked />
+                     <Switch name="show" id="show" defaultChecked={true} />
                      <Label className="grid gap-1 font-normal" htmlFor="show">
                         <span className="font-semibold">
                            Show a warning when content is flagged
                         </span>
-                        <span className="text-muted-foreground text-sm">
-                           A warning will be shown when sexual, hateful, violent or
-                           self-harm content is detected.
+                        <span className="text-sm text-muted-foreground">
+                           A warning will be shown when sexual, hateful, violent
+                           or self-harm content is detected.
                         </span>
                      </Label>
                   </div>
@@ -92,7 +93,10 @@ export function PresetActions() {
                </DialogFooter>
             </DialogContent>
          </Dialog>
-         <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+         <AlertDialog
+            open={showDeleteDialog}
+            onOpenChange={setShowDeleteDialog}
+         >
             <AlertDialogContent>
                <AlertDialogHeader>
                   <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
@@ -108,7 +112,7 @@ export function PresetActions() {
                      onClick={() => {
                         setShowDeleteDialog(false)
                         toast({
-                           description: 'This preset has been deleted.',
+                           description: "This preset has been deleted.",
                         })
                      }}
                   >
diff --git a/apps/web/app/(app)/examples/playground/components/preset-save.tsx b/apps/web/app/(app)/examples/playground/components/preset-save.tsx
index eb8bdf78..3378913e 100644
--- a/apps/web/app/(app)/examples/playground/components/preset-save.tsx
+++ b/apps/web/app/(app)/examples/playground/components/preset-save.tsx
@@ -1,4 +1,4 @@
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    Dialog,
    DialogContent,
@@ -7,9 +7,9 @@ import {
    DialogHeader,
    DialogTitle,
    DialogTrigger,
-} from '~/registry/miami/ui/dialog'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/dialog"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 
 export function PresetSave() {
    return (
@@ -21,8 +21,8 @@ export function PresetSave() {
             <DialogHeader>
                <DialogTitle>Save preset</DialogTitle>
                <DialogDescription>
-                  This will save the current playground state as a preset which you
-                  can access later or share with others.
+                  This will save the current playground state as a preset which
+                  you can access later or share with others.
                </DialogDescription>
             </DialogHeader>
             <div className="grid gap-4 py-4">
diff --git a/apps/web/app/(app)/examples/playground/components/preset-selector.tsx b/apps/web/app/(app)/examples/playground/components/preset-selector.tsx
index 6346b579..fd3830d3 100644
--- a/apps/web/app/(app)/examples/playground/components/preset-selector.tsx
+++ b/apps/web/app/(app)/examples/playground/components/preset-selector.tsx
@@ -1,13 +1,12 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { useRouter } from 'next/navigation'
-import type { PopoverProps } from '@radix-ui/react-popover'
-import { Check, ChevronsUpDown } from 'lucide-react'
+import type { PopoverProps } from "@radix-ui/react-popover"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { useRouter } from "next/navigation"
+import * as React from "react"
 
-import type { Preset } from '../data/presets'
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Command,
    CommandEmpty,
@@ -15,12 +14,14 @@ import {
    CommandInput,
    CommandItem,
    CommandList,
-} from '~/registry/miami/ui/command'
+} from "~/registry/miami/ui/command"
 import {
    Popover,
    PopoverContent,
    PopoverTrigger,
-} from '~/registry/miami/ui/popover'
+} from "~/registry/miami/ui/popover"
+
+import type { Preset } from "../data/presets"
 
 interface PresetSelectorProps extends PopoverProps {
    presets: Preset[]
@@ -41,7 +42,7 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
                aria-expanded={open}
                className="flex-1 justify-between md:max-w-[200px] lg:max-w-[300px]"
             >
-               {selectedPreset ? selectedPreset.name : 'Load a preset...'}
+               {selectedPreset ? selectedPreset.name : "Load a preset..."}
                <ChevronsUpDown className="opacity-50" />
             </Button>
          </PopoverTrigger>
@@ -51,7 +52,7 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
                <CommandList>
                   <CommandEmpty>No presets found.</CommandEmpty>
                   <CommandGroup heading="Examples">
-                     {presets.map(preset => (
+                     {presets.map((preset) => (
                         <CommandItem
                            key={preset.id}
                            onSelect={() => {
@@ -62,17 +63,17 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
                            {preset.name}
                            <Check
                               className={ny(
-                                 'ml-auto',
+                                 "ml-auto",
                                  selectedPreset?.id === preset.id
-                                    ? 'opacity-100'
-                                    : 'opacity-0',
+                                    ? "opacity-100"
+                                    : "opacity-0",
                               )}
                            />
                         </CommandItem>
                      ))}
                   </CommandGroup>
                   <CommandGroup className="pt-0">
-                     <CommandItem onSelect={() => router.push('/examples')}>
+                     <CommandItem onSelect={() => router.push("/examples")}>
                         More examples
                      </CommandItem>
                   </CommandGroup>
diff --git a/apps/web/app/(app)/examples/playground/components/preset-share.tsx b/apps/web/app/(app)/examples/playground/components/preset-share.tsx
index b1746b8f..41e3c334 100644
--- a/apps/web/app/(app)/examples/playground/components/preset-share.tsx
+++ b/apps/web/app/(app)/examples/playground/components/preset-share.tsx
@@ -1,13 +1,13 @@
-import { Copy } from 'lucide-react'
+import { Copy } from "lucide-react"
 
-import { Button } from '~/registry/miami/ui/button'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
 import {
    Popover,
    PopoverContent,
    PopoverTrigger,
-} from '~/registry/miami/ui/popover'
+} from "~/registry/miami/ui/popover"
 
 export function PresetShare() {
    return (
@@ -18,9 +18,9 @@ export function PresetShare() {
          <PopoverContent align="end" className="w-[520px]">
             <div className="flex flex-col space-y-2 text-center sm:text-left">
                <h3 className="text-lg font-semibold">Share preset</h3>
-               <p className="text-muted-foreground text-sm">
-                  Anyone who has this link and an OpenAI account will be able to view
-                  this.
+               <p className="text-sm text-muted-foreground">
+                  Anyone who has this link and an OpenAI account will be able to
+                  view this.
                </p>
             </div>
             <div className="flex items-center space-x-2 pt-4">
diff --git a/apps/web/app/(app)/examples/playground/components/temperature-selector.tsx b/apps/web/app/(app)/examples/playground/components/temperature-selector.tsx
index 51b7c31d..d7e2485c 100644
--- a/apps/web/app/(app)/examples/playground/components/temperature-selector.tsx
+++ b/apps/web/app/(app)/examples/playground/components/temperature-selector.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import type { SliderProps } from '@radix-ui/react-slider'
+import type { SliderProps } from "@radix-ui/react-slider"
+import * as React from "react"
 
 import {
    HoverCard,
    HoverCardContent,
    HoverCardTrigger,
-} from '~/registry/miami/ui/hover-card'
-import { Label } from '~/registry/miami/ui/label'
-import { Slider } from '~/registry/miami/ui/slider'
+} from "~/registry/miami/ui/hover-card"
+import { Label } from "~/registry/miami/ui/label"
+import { Slider } from "~/registry/miami/ui/slider"
 
 interface TemperatureSelectorProps {
-   defaultValue: SliderProps['defaultValue']
+   defaultValue: SliderProps["defaultValue"]
 }
 
 export function TemperatureSelector({
@@ -27,7 +27,7 @@ export function TemperatureSelector({
                <div className="grid gap-4">
                   <div className="flex items-center justify-between">
                      <Label htmlFor="temperature">Temperature</Label>
-                     <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+                     <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
                         {value}
                      </span>
                   </div>
@@ -37,7 +37,7 @@ export function TemperatureSelector({
                      defaultValue={value}
                      step={0.1}
                      onValueChange={setValue}
-                     className="[&_[role=slider]]:size-4"
+                     className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
                      aria-label="Temperature"
                   />
                </div>
@@ -47,9 +47,9 @@ export function TemperatureSelector({
                className="w-[260px] text-sm"
                side="left"
             >
-               Controls randomness: lowering results in less random completions. As
-               the temperature approaches zero, the model will become deterministic
-               and repetitive.
+               Controls randomness: lowering results in less random completions.
+               As the temperature approaches zero, the model will become
+               deterministic and repetitive.
             </HoverCardContent>
          </HoverCard>
       </div>
diff --git a/apps/web/app/(app)/examples/playground/components/top-p-selector.tsx b/apps/web/app/(app)/examples/playground/components/top-p-selector.tsx
index 75a31cd7..75885115 100644
--- a/apps/web/app/(app)/examples/playground/components/top-p-selector.tsx
+++ b/apps/web/app/(app)/examples/playground/components/top-p-selector.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import type { SliderProps } from '@radix-ui/react-slider'
+import type { SliderProps } from "@radix-ui/react-slider"
+import * as React from "react"
 
 import {
    HoverCard,
    HoverCardContent,
    HoverCardTrigger,
-} from '~/registry/miami/ui/hover-card'
-import { Label } from '~/registry/miami/ui/label'
-import { Slider } from '~/registry/miami/ui/slider'
+} from "~/registry/miami/ui/hover-card"
+import { Label } from "~/registry/miami/ui/label"
+import { Slider } from "~/registry/miami/ui/slider"
 
 interface TopPSelectorProps {
-   defaultValue: SliderProps['defaultValue']
+   defaultValue: SliderProps["defaultValue"]
 }
 
 export function TopPSelector({ defaultValue }: TopPSelectorProps) {
@@ -25,7 +25,7 @@ export function TopPSelector({ defaultValue }: TopPSelectorProps) {
                <div className="grid gap-4">
                   <div className="flex items-center justify-between">
                      <Label htmlFor="top-p">Top P</Label>
-                     <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+                     <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
                         {value}
                      </span>
                   </div>
@@ -35,7 +35,7 @@ export function TopPSelector({ defaultValue }: TopPSelectorProps) {
                      defaultValue={value}
                      step={0.1}
                      onValueChange={setValue}
-                     className="[&_[role=slider]]:size-4"
+                     className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
                      aria-label="Top P"
                   />
                </div>
diff --git a/apps/web/app/(app)/examples/playground/data/models.ts b/apps/web/app/(app)/examples/playground/data/models.ts
index 001d4a60..d84da40b 100644
--- a/apps/web/app/(app)/examples/playground/data/models.ts
+++ b/apps/web/app/(app)/examples/playground/data/models.ts
@@ -1,4 +1,4 @@
-export const types = ['GPT-3', 'Codex'] as const
+export const types = ["GPT-3", "Codex"] as const
 
 export type ModelType = (typeof types)[number]
 
@@ -12,51 +12,52 @@ export interface Model<Type = string> {
 
 export const models: Model<ModelType>[] = [
    {
-      id: 'c305f976-8e38-42b1-9fb7-d21b2e34f0da',
-      name: 'text-davinci-003',
+      id: "c305f976-8e38-42b1-9fb7-d21b2e34f0da",
+      name: "text-davinci-003",
       description:
-      'Most capable GPT-3 model. Can do any task the other models can do, often with higher quality, longer output and better instruction-following. Also supports inserting completions within text.',
-      type: 'GPT-3',
+         "Most capable GPT-3 model. Can do any task the other models can do, often with higher quality, longer output and better instruction-following. Also supports inserting completions within text.",
+      type: "GPT-3",
       strengths:
-      'Complex intent, cause and effect, creative generation, search, summarization for audience',
+         "Complex intent, cause and effect, creative generation, search, summarization for audience",
    },
    {
-      id: '464a47c3-7ab5-44d7-b669-f9cb5a9e8465',
-      name: 'text-curie-001',
-      description: 'Very capable, but faster and lower cost than Davinci.',
-      type: 'GPT-3',
+      id: "464a47c3-7ab5-44d7-b669-f9cb5a9e8465",
+      name: "text-curie-001",
+      description: "Very capable, but faster and lower cost than Davinci.",
+      type: "GPT-3",
       strengths:
-      'Language translation, complex classification, sentiment, summarization',
+         "Language translation, complex classification, sentiment, summarization",
    },
    {
-      id: 'ac0797b0-7e31-43b6-a494-da7e2ab43445',
-      name: 'text-babbage-001',
-      description: 'Capable of straightforward tasks, very fast, and lower cost.',
-      type: 'GPT-3',
-      strengths: 'Moderate classification, semantic search',
+      id: "ac0797b0-7e31-43b6-a494-da7e2ab43445",
+      name: "text-babbage-001",
+      description:
+         "Capable of straightforward tasks, very fast, and lower cost.",
+      type: "GPT-3",
+      strengths: "Moderate classification, semantic search",
    },
    {
-      id: 'be638fb1-973b-4471-a49c-290325085802',
-      name: 'text-ada-001',
+      id: "be638fb1-973b-4471-a49c-290325085802",
+      name: "text-ada-001",
       description:
-      'Capable of very simple tasks, usually the fastest model in the GPT-3 series, and lowest cost.',
-      type: 'GPT-3',
+         "Capable of very simple tasks, usually the fastest model in the GPT-3 series, and lowest cost.",
+      type: "GPT-3",
       strengths:
-      'Parsing text, simple classification, address correction, keywords',
+         "Parsing text, simple classification, address correction, keywords",
    },
    {
-      id: 'b43c0ea9-5ad4-456a-ae29-26cd77b6d0fb',
-      name: 'code-davinci-002',
+      id: "b43c0ea9-5ad4-456a-ae29-26cd77b6d0fb",
+      name: "code-davinci-002",
       description:
-      'Most capable Codex model. Particularly good at translating natural language to code. In addition to completing code, also supports inserting completions within code.',
-      type: 'Codex',
+         "Most capable Codex model. Particularly good at translating natural language to code. In addition to completing code, also supports inserting completions within code.",
+      type: "Codex",
    },
    {
-      id: 'bbd57291-4622-4a21-9eed-dd6bd786fdd1',
-      name: 'code-cushman-001',
+      id: "bbd57291-4622-4a21-9eed-dd6bd786fdd1",
+      name: "code-cushman-001",
       description:
-      'Almost as capable as Davinci Codex, but slightly faster. This speed advantage may make it preferable for real-time applications.',
-      type: 'Codex',
-      strengths: 'Real-time application where low-latency is preferable',
+         "Almost as capable as Davinci Codex, but slightly faster. This speed advantage may make it preferable for real-time applications.",
+      type: "Codex",
+      strengths: "Real-time application where low-latency is preferable",
    },
 ]
diff --git a/apps/web/app/(app)/examples/playground/data/presets.ts b/apps/web/app/(app)/examples/playground/data/presets.ts
index 46abc188..166afc8e 100644
--- a/apps/web/app/(app)/examples/playground/data/presets.ts
+++ b/apps/web/app/(app)/examples/playground/data/presets.ts
@@ -5,43 +5,43 @@ export interface Preset {
 
 export const presets: Preset[] = [
    {
-      id: '9cb0e66a-9937-465d-a188-2c4c4ae2401f',
-      name: 'Grammatical Standard English',
+      id: "9cb0e66a-9937-465d-a188-2c4c4ae2401f",
+      name: "Grammatical Standard English",
    },
    {
-      id: '61eb0e32-2391-4cd3-adc3-66efe09bc0b7',
-      name: 'Summarize for a 2nd grader',
+      id: "61eb0e32-2391-4cd3-adc3-66efe09bc0b7",
+      name: "Summarize for a 2nd grader",
    },
    {
-      id: 'a4e1fa51-f4ce-4e45-892c-224030a00bdd',
-      name: 'Text to command',
+      id: "a4e1fa51-f4ce-4e45-892c-224030a00bdd",
+      name: "Text to command",
    },
    {
-      id: 'cc198b13-4933-43aa-977e-dcd95fa30770',
-      name: 'Q&A',
+      id: "cc198b13-4933-43aa-977e-dcd95fa30770",
+      name: "Q&A",
    },
    {
-      id: 'adfa95be-a575-45fd-a9ef-ea45386c64de',
-      name: 'English to other languages',
+      id: "adfa95be-a575-45fd-a9ef-ea45386c64de",
+      name: "English to other languages",
    },
    {
-      id: 'c569a06a-0bd6-43a7-adf9-bf68c09e7a79',
-      name: 'Parse unstructured data',
+      id: "c569a06a-0bd6-43a7-adf9-bf68c09e7a79",
+      name: "Parse unstructured data",
    },
    {
-      id: '15ccc0d7-f37a-4f0a-8163-a37e162877dc',
-      name: 'Classification',
+      id: "15ccc0d7-f37a-4f0a-8163-a37e162877dc",
+      name: "Classification",
    },
    {
-      id: '4641ef41-1c0f-421d-b4b2-70fe431081f3',
-      name: 'Natural language to Python',
+      id: "4641ef41-1c0f-421d-b4b2-70fe431081f3",
+      name: "Natural language to Python",
    },
    {
-      id: '48d34082-72f3-4a1b-a14d-f15aca4f57a0',
-      name: 'Explain code',
+      id: "48d34082-72f3-4a1b-a14d-f15aca4f57a0",
+      name: "Explain code",
    },
    {
-      id: 'dfd42fd5-0394-4810-92c6-cc907d3bfd1a',
-      name: 'Chat',
+      id: "dfd42fd5-0394-4810-92c6-cc907d3bfd1a",
+      name: "Chat",
    },
 ]
diff --git a/apps/web/app/(app)/examples/playground/page.tsx b/apps/web/app/(app)/examples/playground/page.tsx
index e171ed7f..79a90c37 100644
--- a/apps/web/app/(app)/examples/playground/page.tsx
+++ b/apps/web/app/(app)/examples/playground/page.tsx
@@ -1,37 +1,38 @@
-import type { Metadata } from 'next'
-import Image from 'next/image'
-import { RotateCcw } from 'lucide-react'
+import { RotateCcw } from "lucide-react"
+import type { Metadata } from "next"
+import Image from "next/image"
 
-import { CodeViewer } from './components/code-viewer'
-import { MaxLengthSelector } from './components/maxlength-selector'
-import { ModelSelector } from './components/model-selector'
-import { PresetActions } from './components/preset-actions'
-import { PresetSave } from './components/preset-save'
-import { PresetSelector } from './components/preset-selector'
-import { PresetShare } from './components/preset-share'
-import { TemperatureSelector } from './components/temperature-selector'
-import { TopPSelector } from './components/top-p-selector'
-import { models, types } from './data/models'
-import { presets } from './data/presets'
-import { Textarea } from '~/registry/miami/ui/textarea'
+import { Button } from "~/registry/miami/ui/button"
+import {
+   HoverCard,
+   HoverCardContent,
+   HoverCardTrigger,
+} from "~/registry/miami/ui/hover-card"
+import { Label } from "~/registry/miami/ui/label"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
-} from '~/registry/miami/ui/tabs'
-import { Separator } from '~/registry/miami/ui/separator'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   HoverCard,
-   HoverCardContent,
-   HoverCardTrigger,
-} from '~/registry/miami/ui/hover-card'
-import { Button } from '~/registry/miami/ui/button'
+} from "~/registry/miami/ui/tabs"
+import { Textarea } from "~/registry/miami/ui/textarea"
+
+import { CodeViewer } from "./components/code-viewer"
+import { MaxLengthSelector } from "./components/maxlength-selector"
+import { ModelSelector } from "./components/model-selector"
+import { PresetActions } from "./components/preset-actions"
+import { PresetSave } from "./components/preset-save"
+import { PresetSelector } from "./components/preset-selector"
+import { PresetShare } from "./components/preset-share"
+import { TemperatureSelector } from "./components/temperature-selector"
+import { TopPSelector } from "./components/top-p-selector"
+import { models, types } from "./data/models"
+import { presets } from "./data/presets"
 
 export const metadata: Metadata = {
-   title: 'Playground',
-   description: 'The OpenAI Playground built using the components.',
+   title: "Playground",
+   description: "The OpenAI Playground built using the components.",
 }
 
 export default function PlaygroundPage() {
@@ -78,11 +79,15 @@ export default function PlaygroundPage() {
                                     Mode
                                  </span>
                               </HoverCardTrigger>
-                              <HoverCardContent className="w-[320px] text-sm" side="left">
-                                 Choose the interface that best suits your task. You can
-                                 provide: a simple prompt to complete, starting and ending
-                                 text to insert a completion within, or some text with
-                                 instructions to edit it.
+                              <HoverCardContent
+                                 className="w-[320px] text-sm"
+                                 side="left"
+                              >
+                                 Choose the interface that best suits your task.
+                                 You can provide: a simple prompt to complete,
+                                 starting and ending text to insert a completion
+                                 within, or some text with instructions to edit
+                                 it.
                               </HoverCardContent>
                            </HoverCard>
                            <TabsList className="grid grid-cols-3">
@@ -92,7 +97,7 @@ export default function PlaygroundPage() {
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 20 20"
                                     fill="none"
-                                    className="size-5"
+                                    className="h-5 w-5"
                                  >
                                     <rect
                                        x="4"
@@ -101,8 +106,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <rect
                                        x="4"
                                        y="7"
@@ -110,8 +114,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <rect
                                        x="4"
                                        y="11"
@@ -119,8 +122,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <rect
                                        x="4"
                                        y="15"
@@ -128,8 +130,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <rect
                                        x="8.5"
                                        y="11"
@@ -137,8 +138,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <rect
                                        x="8.5"
                                        y="15"
@@ -146,8 +146,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <rect
                                        x="13"
                                        y="11"
@@ -155,8 +154,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                  </svg>
                               </TabsTrigger>
                               <TabsTrigger value="insert">
@@ -165,15 +163,14 @@ export default function PlaygroundPage() {
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 20 20"
                                     fill="none"
-                                    className="size-5"
+                                    className="h-5 w-5"
                                  >
                                     <path
                                        fillRule="evenodd"
                                        clipRule="evenodd"
                                        d="M14.491 7.769a.888.888 0 0 1 .287.648.888.888 0 0 1-.287.648l-3.916 3.667a1.013 1.013 0 0 1-.692.268c-.26 0-.509-.097-.692-.268L5.275 9.065A.886.886 0 0 1 5 8.42a.889.889 0 0 1 .287-.64c.181-.17.427-.267.683-.269.257-.002.504.09.69.258L8.903 9.87V3.917c0-.243.103-.477.287-.649.183-.171.432-.268.692-.268.26 0 .509.097.692.268a.888.888 0 0 1 .287.649V9.87l2.245-2.102c.183-.172.432-.269.692-.269.26 0 .508.097.692.269Z"
                                        fill="currentColor"
-                                    >
-                                    </path>
+                                    ></path>
                                     <rect
                                        x="4"
                                        y="15"
@@ -181,8 +178,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <rect
                                        x="8.5"
                                        y="15"
@@ -190,8 +186,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <rect
                                        x="13"
                                        y="15"
@@ -199,8 +194,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                  </svg>
                               </TabsTrigger>
                               <TabsTrigger value="edit">
@@ -209,7 +203,7 @@ export default function PlaygroundPage() {
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 20 20"
                                     fill="none"
-                                    className="size-5"
+                                    className="h-5 w-5"
                                  >
                                     <rect
                                        x="4"
@@ -218,8 +212,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <rect
                                        x="4"
                                        y="7"
@@ -227,8 +220,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <rect
                                        x="4"
                                        y="11"
@@ -236,8 +228,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <rect
                                        x="4"
                                        y="15"
@@ -245,8 +236,7 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <rect
                                        x="8.5"
                                        y="11"
@@ -254,13 +244,11 @@ export default function PlaygroundPage() {
                                        height="2"
                                        rx="1"
                                        fill="currentColor"
-                                    >
-                                    </rect>
+                                    ></rect>
                                     <path
                                        d="M17.154 11.346a1.182 1.182 0 0 0-1.671 0L11 15.829V17.5h1.671l4.483-4.483a1.182 1.182 0 0 0 0-1.671Z"
                                        fill="currentColor"
-                                    >
-                                    </path>
+                                    ></path>
                                  </svg>
                               </TabsTrigger>
                            </TabsList>
@@ -271,7 +259,10 @@ export default function PlaygroundPage() {
                         <TopPSelector defaultValue={[0.9]} />
                      </div>
                      <div className="md:order-1">
-                        <TabsContent value="complete" className="mt-0 border-0 p-0">
+                        <TabsContent
+                           value="complete"
+                           className="mt-0 border-0 p-0"
+                        >
                            <div className="flex h-full flex-col space-y-4">
                               <Textarea
                                  placeholder="Write a tagline for an ice cream shop"
@@ -280,25 +271,32 @@ export default function PlaygroundPage() {
                               <div className="flex items-center space-x-2">
                                  <Button>Submit</Button>
                                  <Button variant="secondary">
-                                    <span className="sr-only">Show history</span>
+                                    <span className="sr-only">
+                                       Show history
+                                    </span>
                                     <RotateCcw />
                                  </Button>
                               </div>
                            </div>
                         </TabsContent>
-                        <TabsContent value="insert" className="mt-0 border-0 p-0">
+                        <TabsContent
+                           value="insert"
+                           className="mt-0 border-0 p-0"
+                        >
                            <div className="flex flex-col space-y-4">
                               <div className="grid h-full grid-rows-2 gap-6 lg:grid-cols-2 lg:grid-rows-1">
                                  <Textarea
                                     placeholder="We're writing to [inset]. Congrats from OpenAI!"
                                     className="h-full min-h-[300px] lg:min-h-[700px] xl:min-h-[700px]"
                                  />
-                                 <div className="bg-muted rounded-md border"></div>
+                                 <div className="rounded-md border bg-muted"></div>
                               </div>
                               <div className="flex items-center space-x-2">
                                  <Button>Submit</Button>
                                  <Button variant="secondary">
-                                    <span className="sr-only">Show history</span>
+                                    <span className="sr-only">
+                                       Show history
+                                    </span>
                                     <RotateCcw />
                                  </Button>
                               </div>
@@ -317,19 +315,23 @@ export default function PlaygroundPage() {
                                        />
                                     </div>
                                     <div className="flex flex-col space-y-2">
-                                       <Label htmlFor="instructions">Instructions</Label>
+                                       <Label htmlFor="instructions">
+                                          Instructions
+                                       </Label>
                                        <Textarea
                                           id="instructions"
                                           placeholder="Fix the grammar."
                                        />
                                     </div>
                                  </div>
-                                 <div className="bg-muted mt-[21px] min-h-[400px] rounded-md border lg:min-h-[700px]" />
+                                 <div className="mt-[21px] min-h-[400px] rounded-md border bg-muted lg:min-h-[700px]" />
                               </div>
                               <div className="flex items-center space-x-2">
                                  <Button>Submit</Button>
                                  <Button variant="secondary">
-                                    <span className="sr-only">Show history</span>
+                                    <span className="sr-only">
+                                       Show history
+                                    </span>
                                     <RotateCcw />
                                  </Button>
                               </div>
diff --git a/apps/web/app/(app)/examples/tasks/components/columns.tsx b/apps/web/app/(app)/examples/tasks/components/columns.tsx
index 9c0f6399..653d2e77 100644
--- a/apps/web/app/(app)/examples/tasks/components/columns.tsx
+++ b/apps/web/app/(app)/examples/tasks/components/columns.tsx
@@ -1,24 +1,27 @@
-'use client'
+"use client"
 
-import type { ColumnDef } from '@tanstack/react-table'
+import type { ColumnDef } from "@tanstack/react-table"
 
-import { labels, priorities, statuses } from '../data/data'
-import type { Task } from '../data/schema'
-import { DataTableColumnHeader } from './data-table-column-header'
-import { DataTableRowActions } from './data-table-row-actions'
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-import { Badge } from '~/registry/miami/ui/badge'
+import { Badge } from "~/registry/miami/ui/badge"
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+
+import { labels, priorities, statuses } from "../data/data"
+import type { Task } from "../data/schema"
+import { DataTableColumnHeader } from "./data-table-column-header"
+import { DataTableRowActions } from "./data-table-row-actions"
 
 export const columns: ColumnDef<Task>[] = [
    {
-      id: 'select',
+      id: "select",
       header: ({ table }) => (
          <Checkbox
             checked={
-               table.getIsAllPageRowsSelected()
-               || (table.getIsSomePageRowsSelected() && 'indeterminate')
+               table.getIsAllPageRowsSelected() ||
+               (table.getIsSomePageRowsSelected() && "indeterminate")
+            }
+            onCheckedChange={(value) =>
+               table.toggleAllPageRowsSelected(!!value)
             }
-            onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
             aria-label="Select all"
             className="translate-y-[2px]"
          />
@@ -26,7 +29,7 @@ export const columns: ColumnDef<Task>[] = [
       cell: ({ row }) => (
          <Checkbox
             checked={row.getIsSelected()}
-            onCheckedChange={value => row.toggleSelected(!!value)}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
             aria-label="Select row"
             className="translate-y-[2px]"
          />
@@ -35,40 +38,42 @@ export const columns: ColumnDef<Task>[] = [
       enableHiding: false,
    },
    {
-      accessorKey: 'id',
+      accessorKey: "id",
       header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Task" />
       ),
-      cell: ({ row }) => <div className="w-[80px]">{row.getValue('id')}</div>,
+      cell: ({ row }) => <div className="w-[80px]">{row.getValue("id")}</div>,
       enableSorting: false,
       enableHiding: false,
    },
    {
-      accessorKey: 'title',
+      accessorKey: "title",
       header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Title" />
       ),
       cell: ({ row }) => {
-         const label = labels.find(label => label.value === row.original.label)
+         const label = labels.find(
+            (label) => label.value === row.original.label,
+         )
 
          return (
             <div className="flex space-x-2">
                {label && <Badge variant="outline">{label.label}</Badge>}
                <span className="max-w-[500px] truncate font-medium">
-                  {row.getValue('title')}
+                  {row.getValue("title")}
                </span>
             </div>
          )
       },
    },
    {
-      accessorKey: 'status',
+      accessorKey: "status",
       header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Status" />
       ),
       cell: ({ row }) => {
          const status = statuses.find(
-            status => status.value === row.getValue('status'),
+            (status) => status.value === row.getValue("status"),
          )
 
          if (!status) {
@@ -78,7 +83,7 @@ export const columns: ColumnDef<Task>[] = [
          return (
             <div className="flex w-[100px] items-center">
                {status.icon && (
-                  <status.icon className="text-muted-foreground mr-2 size-4" />
+                  <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />
                )}
                <span>{status.label}</span>
             </div>
@@ -89,13 +94,13 @@ export const columns: ColumnDef<Task>[] = [
       },
    },
    {
-      accessorKey: 'priority',
+      accessorKey: "priority",
       header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Priority" />
       ),
       cell: ({ row }) => {
          const priority = priorities.find(
-            priority => priority.value === row.getValue('priority'),
+            (priority) => priority.value === row.getValue("priority"),
          )
 
          if (!priority) {
@@ -105,7 +110,7 @@ export const columns: ColumnDef<Task>[] = [
          return (
             <div className="flex items-center">
                {priority.icon && (
-                  <priority.icon className="text-muted-foreground mr-2 size-4" />
+                  <priority.icon className="mr-2 h-4 w-4 text-muted-foreground" />
                )}
                <span>{priority.label}</span>
             </div>
@@ -116,7 +121,7 @@ export const columns: ColumnDef<Task>[] = [
       },
    },
    {
-      id: 'actions',
+      id: "actions",
       cell: ({ row }) => <DataTableRowActions row={row} />,
    },
 ]
diff --git a/apps/web/app/(app)/examples/tasks/components/data-table-column-header.tsx b/apps/web/app/(app)/examples/tasks/components/data-table-column-header.tsx
index 898b285b..0b9a3369 100644
--- a/apps/web/app/(app)/examples/tasks/components/data-table-column-header.tsx
+++ b/apps/web/app/(app)/examples/tasks/components/data-table-column-header.tsx
@@ -1,15 +1,15 @@
-import type { Column } from '@tanstack/react-table'
-import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from 'lucide-react'
+import type { Column } from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react"
 
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
 import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
+} from "~/registry/miami/ui/dropdown-menu"
 
 interface DataTableColumnHeaderProps<TData, TValue>
    extends React.HTMLAttributes<HTMLDivElement> {
@@ -27,40 +27,36 @@ export function DataTableColumnHeader<TData, TValue>({
    }
 
    return (
-      <div className={ny('flex items-center space-x-2', className)}>
+      <div className={ny("flex items-center space-x-2", className)}>
          <DropdownMenu>
             <DropdownMenuTrigger asChild>
                <Button
                   variant="ghost"
                   size="sm"
-                  className="data-[state=open]:bg-accent -ml-3 h-8"
+                  className="-ml-3 h-8 data-[state=open]:bg-accent"
                >
                   <span>{title}</span>
-                  {column.getIsSorted() === 'desc'
-                     ? (
-                           <ArrowDown />
-                        )
-                     : column.getIsSorted() === 'asc'
-                        ? (
-                              <ArrowUp />
-                           )
-                        : (
-                              <ChevronsUpDown />
-                           )}
+                  {column.getIsSorted() === "desc" ? (
+                     <ArrowDown />
+                  ) : column.getIsSorted() === "asc" ? (
+                     <ArrowUp />
+                  ) : (
+                     <ChevronsUpDown />
+                  )}
                </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start">
                <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-                  <ArrowUp className="text-muted-foreground/70 size-3.5" />
+                  <ArrowUp className="h-3.5 w-3.5 text-muted-foreground/70" />
                   Asc
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-                  <ArrowDown className="text-muted-foreground/70 size-3.5" />
+                  <ArrowDown className="h-3.5 w-3.5 text-muted-foreground/70" />
                   Desc
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-                  <EyeOff className="text-muted-foreground/70 size-3.5" />
+                  <EyeOff className="h-3.5 w-3.5 text-muted-foreground/70" />
                   Hide
                </DropdownMenuItem>
             </DropdownMenuContent>
diff --git a/apps/web/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx b/apps/web/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
index cb48863c..cdf06df8 100644
--- a/apps/web/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
+++ b/apps/web/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
-import type { Column } from '@tanstack/react-table'
-import { Check, PlusCircle } from 'lucide-react'
+import type { Column } from "@tanstack/react-table"
+import { Check, PlusCircle } from "lucide-react"
+import type * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { Badge } from '~/registry/miami/ui/badge'
-import { Button } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import { Badge } from "~/registry/miami/ui/badge"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Command,
    CommandEmpty,
@@ -13,13 +13,13 @@ import {
    CommandItem,
    CommandList,
    CommandSeparator,
-} from '~/registry/miami/ui/command'
+} from "~/registry/miami/ui/command"
 import {
    Popover,
    PopoverContent,
    PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/popover"
+import { Separator } from "~/registry/miami/ui/separator"
 
 interface DataTableFacetedFilterProps<TData, TValue> {
    column?: Column<TData, TValue>
@@ -55,30 +55,28 @@ export function DataTableFacetedFilter<TData, TValue>({
                         {selectedValues.size}
                      </Badge>
                      <div className="hidden space-x-1 lg:flex">
-                        {selectedValues.size > 2
-                           ? (
+                        {selectedValues.size > 2 ? (
+                           <Badge
+                              variant="secondary"
+                              className="rounded-sm px-1 font-normal"
+                           >
+                              {selectedValues.size} selected
+                           </Badge>
+                        ) : (
+                           options
+                              .filter((option) =>
+                                 selectedValues.has(option.value),
+                              )
+                              .map((option) => (
                                  <Badge
                                     variant="secondary"
+                                    key={option.value}
                                     className="rounded-sm px-1 font-normal"
                                  >
-                                    {selectedValues.size}
-                                    {' '}
-                                    selected
+                                    {option.label}
                                  </Badge>
-                              )
-                           : (
-                                 options
-                                    .filter(option => selectedValues.has(option.value))
-                                    .map(option => (
-                                       <Badge
-                                          variant="secondary"
-                                          key={option.value}
-                                          className="rounded-sm px-1 font-normal"
-                                       >
-                                          {option.label}
-                                       </Badge>
-                                    ))
-                              )}
+                              ))
+                        )}
                      </div>
                   </>
                )}
@@ -98,32 +96,33 @@ export function DataTableFacetedFilter<TData, TValue>({
                               onSelect={() => {
                                  if (isSelected) {
                                     selectedValues.delete(option.value)
-                                 }
-                                 else {
+                                 } else {
                                     selectedValues.add(option.value)
                                  }
                                  const filterValues = Array.from(selectedValues)
                                  column?.setFilterValue(
-                                    filterValues.length ? filterValues : undefined,
+                                    filterValues.length
+                                       ? filterValues
+                                       : undefined,
                                  )
                               }}
                            >
                               <div
                                  className={ny(
-                                    'border-primary mr-2 flex size-4 items-center justify-center rounded-sm border',
+                                    "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                                     isSelected
-                                       ? 'bg-primary text-primary-foreground'
-                                       : 'opacity-50 [&_svg]:invisible',
+                                       ? "bg-primary text-primary-foreground"
+                                       : "opacity-50 [&_svg]:invisible",
                                  )}
                               >
                                  <Check />
                               </div>
                               {option.icon && (
-                                 <option.icon className="text-muted-foreground mr-2 size-4" />
+                                 <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
                               )}
                               <span>{option.label}</span>
                               {facets?.get(option.value) && (
-                                 <span className="ml-auto flex size-4 items-center justify-center font-mono text-xs">
+                                 <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
                                     {facets.get(option.value)}
                                  </span>
                               )}
diff --git a/apps/web/app/(app)/examples/tasks/components/data-table-pagination.tsx b/apps/web/app/(app)/examples/tasks/components/data-table-pagination.tsx
index 2864bb6f..f73d56c4 100644
--- a/apps/web/app/(app)/examples/tasks/components/data-table-pagination.tsx
+++ b/apps/web/app/(app)/examples/tasks/components/data-table-pagination.tsx
@@ -1,19 +1,19 @@
-import type { Table } from '@tanstack/react-table'
+import type { Table } from "@tanstack/react-table"
 import {
    ChevronLeft,
    ChevronRight,
    ChevronsLeft,
    ChevronsRight,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/miami/ui/select'
+} from "~/registry/miami/ui/select"
 
 interface DataTablePaginationProps<TData> {
    table: Table<TData>
@@ -24,14 +24,9 @@ export function DataTablePagination<TData>({
 }: DataTablePaginationProps<TData>) {
    return (
       <div className="flex items-center justify-between px-2">
-         <div className="text-muted-foreground flex-1 text-sm">
-            {table.getFilteredSelectedRowModel().rows.length}
-            {' '}
-            of
-            {' '}
-            {table.getFilteredRowModel().rows.length}
-            {' '}
-            row(s) selected.
+         <div className="flex-1 text-sm text-muted-foreground">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
          </div>
          <div className="flex items-center space-x-6 lg:space-x-8">
             <div className="flex items-center space-x-2">
@@ -43,10 +38,12 @@ export function DataTablePagination<TData>({
                   }}
                >
                   <SelectTrigger className="h-8 w-[70px]">
-                     <SelectValue placeholder={table.getState().pagination.pageSize} />
+                     <SelectValue
+                        placeholder={table.getState().pagination.pageSize}
+                     />
                   </SelectTrigger>
                   <SelectContent side="top">
-                     {[10, 20, 30, 40, 50].map(pageSize => (
+                     {[10, 20, 30, 40, 50].map((pageSize) => (
                         <SelectItem key={pageSize} value={`${pageSize}`}>
                            {pageSize}
                         </SelectItem>
@@ -55,18 +52,13 @@ export function DataTablePagination<TData>({
                </Select>
             </div>
             <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-               Page
-               {' '}
-               {table.getState().pagination.pageIndex + 1}
-               {' '}
-               of
-               {' '}
+               Page {table.getState().pagination.pageIndex + 1} of{" "}
                {table.getPageCount()}
             </div>
             <div className="flex items-center space-x-2">
                <Button
                   variant="outline"
-                  className="hidden size-8 p-0 lg:flex"
+                  className="hidden h-8 w-8 p-0 lg:flex"
                   onClick={() => table.setPageIndex(0)}
                   disabled={!table.getCanPreviousPage()}
                >
@@ -75,7 +67,7 @@ export function DataTablePagination<TData>({
                </Button>
                <Button
                   variant="outline"
-                  className="size-8 p-0"
+                  className="h-8 w-8 p-0"
                   onClick={() => table.previousPage()}
                   disabled={!table.getCanPreviousPage()}
                >
@@ -84,7 +76,7 @@ export function DataTablePagination<TData>({
                </Button>
                <Button
                   variant="outline"
-                  className="size-8 p-0"
+                  className="h-8 w-8 p-0"
                   onClick={() => table.nextPage()}
                   disabled={!table.getCanNextPage()}
                >
@@ -93,7 +85,7 @@ export function DataTablePagination<TData>({
                </Button>
                <Button
                   variant="outline"
-                  className="hidden size-8 p-0 lg:flex"
+                  className="hidden h-8 w-8 p-0 lg:flex"
                   onClick={() => table.setPageIndex(table.getPageCount() - 1)}
                   disabled={!table.getCanNextPage()}
                >
diff --git a/apps/web/app/(app)/examples/tasks/components/data-table-row-actions.tsx b/apps/web/app/(app)/examples/tasks/components/data-table-row-actions.tsx
index 898a2026..9f324442 100644
--- a/apps/web/app/(app)/examples/tasks/components/data-table-row-actions.tsx
+++ b/apps/web/app/(app)/examples/tasks/components/data-table-row-actions.tsx
@@ -1,11 +1,9 @@
-'use client'
+"use client"
 
-import type { Row } from '@tanstack/react-table'
-import { MoreHorizontal } from 'lucide-react'
+import type { Row } from "@tanstack/react-table"
+import { MoreHorizontal } from "lucide-react"
 
-import { labels } from '../data/data'
-import { taskSchema } from '../data/schema'
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -18,7 +16,10 @@ import {
    DropdownMenuSubContent,
    DropdownMenuSubTrigger,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
+} from "~/registry/miami/ui/dropdown-menu"
+
+import { labels } from "../data/data"
+import { taskSchema } from "../data/schema"
 
 interface DataTableRowActionsProps<TData> {
    row: Row<TData>
@@ -34,7 +35,7 @@ export function DataTableRowActions<TData>({
          <DropdownMenuTrigger asChild>
             <Button
                variant="ghost"
-               className="data-[state=open]:bg-muted flex size-8 p-0"
+               className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
             >
                <MoreHorizontal />
                <span className="sr-only">Open menu</span>
@@ -49,8 +50,11 @@ export function DataTableRowActions<TData>({
                <DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
                <DropdownMenuSubContent>
                   <DropdownMenuRadioGroup value={task.label}>
-                     {labels.map(label => (
-                        <DropdownMenuRadioItem key={label.value} value={label.value}>
+                     {labels.map((label) => (
+                        <DropdownMenuRadioItem
+                           key={label.value}
+                           value={label.value}
+                        >
                            {label.label}
                         </DropdownMenuRadioItem>
                      ))}
diff --git a/apps/web/app/(app)/examples/tasks/components/data-table-toolbar.tsx b/apps/web/app/(app)/examples/tasks/components/data-table-toolbar.tsx
index 1a2b2bff..02f0b09d 100644
--- a/apps/web/app/(app)/examples/tasks/components/data-table-toolbar.tsx
+++ b/apps/web/app/(app)/examples/tasks/components/data-table-toolbar.tsx
@@ -1,13 +1,14 @@
-'use client'
+"use client"
 
-import type { Table } from '@tanstack/react-table'
-import { X } from 'lucide-react'
+import type { Table } from "@tanstack/react-table"
+import { X } from "lucide-react"
 
-import { priorities, statuses } from '../data/data'
-import { DataTableFacetedFilter } from './data-table-faceted-filter'
-import { Button } from '~/registry/miami/ui/button'
-import { Input } from '~/registry/miami/ui/input'
-import { DataTableViewOptions } from '~/app/(app)/examples/tasks/components/data-table-view-options'
+import { DataTableViewOptions } from "~/app/(app)/examples/tasks/components/data-table-view-options"
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+
+import { priorities, statuses } from "../data/data"
+import { DataTableFacetedFilter } from "./data-table-faceted-filter"
 
 interface DataTableToolbarProps<TData> {
    table: Table<TData>
@@ -23,21 +24,24 @@ export function DataTableToolbar<TData>({
          <div className="flex flex-1 items-center space-x-2">
             <Input
                placeholder="Filter tasks..."
-               value={(table.getColumn('title')?.getFilterValue() as string) ?? ''}
-               onChange={event =>
-                  table.getColumn('title')?.setFilterValue(event.target.value)}
+               value={
+                  (table.getColumn("title")?.getFilterValue() as string) ?? ""
+               }
+               onChange={(event) =>
+                  table.getColumn("title")?.setFilterValue(event.target.value)
+               }
                className="h-8 w-[150px] lg:w-[250px]"
             />
-            {table.getColumn('status') && (
+            {table.getColumn("status") && (
                <DataTableFacetedFilter
-                  column={table.getColumn('status')}
+                  column={table.getColumn("status")}
                   title="Status"
                   options={statuses}
                />
             )}
-            {table.getColumn('priority') && (
+            {table.getColumn("priority") && (
                <DataTableFacetedFilter
-                  column={table.getColumn('priority')}
+                  column={table.getColumn("priority")}
                   title="Priority"
                   options={priorities}
                />
diff --git a/apps/web/app/(app)/examples/tasks/components/data-table-view-options.tsx b/apps/web/app/(app)/examples/tasks/components/data-table-view-options.tsx
index d1518c6e..26506c72 100644
--- a/apps/web/app/(app)/examples/tasks/components/data-table-view-options.tsx
+++ b/apps/web/app/(app)/examples/tasks/components/data-table-view-options.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client"
 
-import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
-import type { Table } from '@tanstack/react-table'
-import { Settings2 } from 'lucide-react'
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
+import type { Table } from "@tanstack/react-table"
+import { Settings2 } from "lucide-react"
 
-import { Button } from '~/registry/miami/ui/button'
+import { Button } from "~/registry/miami/ui/button"
 import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuLabel,
    DropdownMenuSeparator,
-} from '~/registry/miami/ui/dropdown-menu'
+} from "~/registry/miami/ui/dropdown-menu"
 
 interface DataTableViewOptionsProps<TData> {
    table: Table<TData>
@@ -38,8 +38,9 @@ export function DataTableViewOptions<TData>({
             {table
                .getAllColumns()
                .filter(
-                  column =>
-                     typeof column.accessorFn !== 'undefined' && column.getCanHide(),
+                  (column) =>
+                     typeof column.accessorFn !== "undefined" &&
+                     column.getCanHide(),
                )
                .map((column) => {
                   return (
@@ -47,7 +48,9 @@ export function DataTableViewOptions<TData>({
                         key={column.id}
                         className="capitalize"
                         checked={column.getIsVisible()}
-                        onCheckedChange={value => column.toggleVisibility(!!value)}
+                        onCheckedChange={(value) =>
+                           column.toggleVisibility(!!value)
+                        }
                      >
                         {column.id}
                      </DropdownMenuCheckboxItem>
diff --git a/apps/web/app/(app)/examples/tasks/components/data-table.tsx b/apps/web/app/(app)/examples/tasks/components/data-table.tsx
index df412658..d6602ac5 100644
--- a/apps/web/app/(app)/examples/tasks/components/data-table.tsx
+++ b/apps/web/app/(app)/examples/tasks/components/data-table.tsx
@@ -1,13 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import type {
-   ColumnDef,
-   ColumnFiltersState,
-   SortingState,
-   VisibilityState,
-} from '@tanstack/react-table'
 import {
+   type ColumnDef,
+   type ColumnFiltersState,
+   type SortingState,
+   type VisibilityState,
    flexRender,
    getCoreRowModel,
    getFacetedRowModel,
@@ -16,10 +13,9 @@ import {
    getPaginationRowModel,
    getSortedRowModel,
    useReactTable,
-} from '@tanstack/react-table'
+} from "@tanstack/react-table"
+import * as React from "react"
 
-import { DataTablePagination } from './data-table-pagination'
-import { DataTableToolbar } from './data-table-toolbar'
 import {
    Table,
    TableBody,
@@ -27,7 +23,10 @@ import {
    TableHead,
    TableHeader,
    TableRow,
-} from '~/registry/miami/ui/table'
+} from "~/registry/miami/ui/table"
+
+import { DataTablePagination } from "./data-table-pagination"
+import { DataTableToolbar } from "./data-table-toolbar"
 
 interface DataTableProps<TData, TValue> {
    columns: ColumnDef<TData, TValue>[]
@@ -39,8 +38,8 @@ export function DataTable<TData, TValue>({
    data,
 }: DataTableProps<TData, TValue>) {
    const [rowSelection, setRowSelection] = React.useState({})
-   const [columnVisibility, setColumnVisibility]
-    = React.useState<VisibilityState>({})
+   const [columnVisibility, setColumnVisibility] =
+      React.useState<VisibilityState>({})
    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
       [],
    )
@@ -74,17 +73,20 @@ export function DataTable<TData, TValue>({
          <div className="rounded-md border">
             <Table>
                <TableHeader>
-                  {table.getHeaderGroups().map(headerGroup => (
+                  {table.getHeaderGroups().map((headerGroup) => (
                      <TableRow key={headerGroup.id}>
                         {headerGroup.headers.map((header) => {
                            return (
-                              <TableHead key={header.id} colSpan={header.colSpan}>
+                              <TableHead
+                                 key={header.id}
+                                 colSpan={header.colSpan}
+                              >
                                  {header.isPlaceholder
                                     ? null
                                     : flexRender(
-                                       header.column.columnDef.header,
-                                       header.getContext(),
-                                    )}
+                                         header.column.columnDef.header,
+                                         header.getContext(),
+                                      )}
                               </TableHead>
                            )
                         })}
@@ -92,34 +94,32 @@ export function DataTable<TData, TValue>({
                   ))}
                </TableHeader>
                <TableBody>
-                  {table.getRowModel().rows?.length
-                     ? (
-                           table.getRowModel().rows.map(row => (
-                              <TableRow
-                                 key={row.id}
-                                 data-state={row.getIsSelected() && 'selected'}
-                              >
-                                 {row.getVisibleCells().map(cell => (
-                                    <TableCell key={cell.id}>
-                                       {flexRender(
-                                          cell.column.columnDef.cell,
-                                          cell.getContext(),
-                                       )}
-                                    </TableCell>
-                                 ))}
-                              </TableRow>
-                           ))
-                        )
-                     : (
-                           <TableRow>
-                              <TableCell
-                                 colSpan={columns.length}
-                                 className="h-24 text-center"
-                              >
-                                 No results.
+                  {table.getRowModel().rows?.length ? (
+                     table.getRowModel().rows.map((row) => (
+                        <TableRow
+                           key={row.id}
+                           data-state={row.getIsSelected() && "selected"}
+                        >
+                           {row.getVisibleCells().map((cell) => (
+                              <TableCell key={cell.id}>
+                                 {flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext(),
+                                 )}
                               </TableCell>
-                           </TableRow>
-                        )}
+                           ))}
+                        </TableRow>
+                     ))
+                  ) : (
+                     <TableRow>
+                        <TableCell
+                           colSpan={columns.length}
+                           className="h-24 text-center"
+                        >
+                           No results.
+                        </TableCell>
+                     </TableRow>
+                  )}
                </TableBody>
             </Table>
          </div>
diff --git a/apps/web/app/(app)/examples/tasks/components/user-nav.tsx b/apps/web/app/(app)/examples/tasks/components/user-nav.tsx
index 36c258dd..d43025f5 100644
--- a/apps/web/app/(app)/examples/tasks/components/user-nav.tsx
+++ b/apps/web/app/(app)/examples/tasks/components/user-nav.tsx
@@ -1,9 +1,5 @@
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Button } from '~/registry/miami/ui/button'
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -13,15 +9,15 @@ import {
    DropdownMenuSeparator,
    DropdownMenuShortcut,
    DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
+} from "~/registry/miami/ui/dropdown-menu"
 
 export function UserNav() {
    return (
       <DropdownMenu>
          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="relative size-8 rounded-full">
-               <Avatar className="size-9">
-                  <AvatarImage src="/avatars/03.png" alt="@shadcn" />
+            <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+               <Avatar className="h-9 w-9">
+                  <AvatarImage src="/avatars/03.png" alt="@nyxb" />
                   <AvatarFallback>SC</AvatarFallback>
                </Avatar>
             </Button>
@@ -29,8 +25,8 @@ export function UserNav() {
          <DropdownMenuContent className="w-56" align="end" forceMount>
             <DropdownMenuLabel className="font-normal">
                <div className="flex flex-col space-y-1">
-                  <p className="text-sm font-medium leading-none">shadcn</p>
-                  <p className="text-muted-foreground text-xs leading-none">
+                  <p className="text-sm font-medium leading-none">nyxb</p>
+                  <p className="text-xs leading-none text-muted-foreground">
                      m@example.com
                   </p>
                </div>
diff --git a/apps/web/app/(app)/examples/tasks/data/data.tsx b/apps/web/app/(app)/examples/tasks/data/data.tsx
index 4cd22cde..69f580a9 100644
--- a/apps/web/app/(app)/examples/tasks/data/data.tsx
+++ b/apps/web/app/(app)/examples/tasks/data/data.tsx
@@ -7,65 +7,65 @@ import {
    CircleOff,
    HelpCircle,
    Timer,
-} from 'lucide-react'
+} from "lucide-react"
 
 export const labels = [
    {
-      value: 'bug',
-      label: 'Bug',
+      value: "bug",
+      label: "Bug",
    },
    {
-      value: 'feature',
-      label: 'Feature',
+      value: "feature",
+      label: "Feature",
    },
    {
-      value: 'documentation',
-      label: 'Documentation',
+      value: "documentation",
+      label: "Documentation",
    },
 ]
 
 export const statuses = [
    {
-      value: 'backlog',
-      label: 'Backlog',
+      value: "backlog",
+      label: "Backlog",
       icon: HelpCircle,
    },
    {
-      value: 'todo',
-      label: 'Todo',
+      value: "todo",
+      label: "Todo",
       icon: Circle,
    },
    {
-      value: 'in progress',
-      label: 'In Progress',
+      value: "in progress",
+      label: "In Progress",
       icon: Timer,
    },
    {
-      value: 'done',
-      label: 'Done',
+      value: "done",
+      label: "Done",
       icon: CheckCircle,
    },
    {
-      value: 'canceled',
-      label: 'Canceled',
+      value: "canceled",
+      label: "Canceled",
       icon: CircleOff,
    },
 ]
 
 export const priorities = [
    {
-      label: 'Low',
-      value: 'low',
+      label: "Low",
+      value: "low",
       icon: ArrowDown,
    },
    {
-      label: 'Medium',
-      value: 'medium',
+      label: "Medium",
+      value: "medium",
       icon: ArrowRight,
    },
    {
-      label: 'High',
-      value: 'high',
+      label: "High",
+      value: "high",
       icon: ArrowUp,
    },
 ]
diff --git a/apps/web/app/(app)/examples/tasks/data/schema.ts b/apps/web/app/(app)/examples/tasks/data/schema.ts
index b07100fc..841827aa 100644
--- a/apps/web/app/(app)/examples/tasks/data/schema.ts
+++ b/apps/web/app/(app)/examples/tasks/data/schema.ts
@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import { z } from "zod"
 
 // We're keeping a simple non-relational schema here.
 // IRL, you will have a schema for your data models.
diff --git a/apps/web/app/(app)/examples/tasks/data/seed.ts b/apps/web/app/(app)/examples/tasks/data/seed.ts
index 8cd1e72a..18d9f7c4 100755
--- a/apps/web/app/(app)/examples/tasks/data/seed.ts
+++ b/apps/web/app/(app)/examples/tasks/data/seed.ts
@@ -1,21 +1,20 @@
-import fs from 'fs'
-import path from 'path'
-import { faker } from '@faker-js/faker'
+import fs from "fs"
+import path from "path"
+import { faker } from "@faker-js/faker"
 
-import { labels, priorities, statuses } from './data'
+import { labels, priorities, statuses } from "./data"
 
 const tasks = Array.from({ length: 100 }, () => ({
    id: `TASK-${faker.number.int({ min: 1000, max: 9999 })}`,
-   title: faker.hacker.phrase().replace(/^./, letter => letter.toUpperCase()),
+   title: faker.hacker.phrase().replace(/^./, (letter) => letter.toUpperCase()),
    status: faker.helpers.arrayElement(statuses).value,
    label: faker.helpers.arrayElement(labels).value,
    priority: faker.helpers.arrayElement(priorities).value,
 }))
 
 fs.writeFileSync(
-   path.join(__dirname, 'tasks.json'),
+   path.join(__dirname, "tasks.json"),
    JSON.stringify(tasks, null, 2),
 )
 
-// eslint-disable-next-line no-console
-console.log('✅ Tasks data generated.')
+console.log("✅ Tasks data generated.")
diff --git a/apps/web/app/(app)/examples/tasks/data/tasks.json b/apps/web/app/(app)/examples/tasks/data/tasks.json
index 2d10a4a0..4e75c239 100644
--- a/apps/web/app/(app)/examples/tasks/data/tasks.json
+++ b/apps/web/app/(app)/examples/tasks/data/tasks.json
@@ -1,702 +1,702 @@
 [
-  {
-    "id": "TASK-8782",
-    "title": "You can't compress the program without quantifying the open-source SSD pixel!",
-    "status": "in progress",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-7878",
-    "title": "Try to calculate the EXE feed, maybe it will index the multi-byte pixel!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-7839",
-    "title": "We need to bypass the neural TCP card!",
-    "status": "todo",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-5562",
-    "title": "The SAS interface is down, bypass the open-source pixel so we can back up the PNG bandwidth!",
-    "status": "backlog",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-8686",
-    "title": "I'll parse the wireless SSL protocol, that should driver the API panel!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-1280",
-    "title": "Use the digital TLS panel, then you can transmit the haptic system!",
-    "status": "done",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-7262",
-    "title": "The UTF8 application is down, parse the neural bandwidth so we can back up the PNG firewall!",
-    "status": "done",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1138",
-    "title": "Generating the driver won't do anything, we need to quantify the 1080p SMTP bandwidth!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-7184",
-    "title": "We need to program the back-end THX pixel!",
-    "status": "todo",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-5160",
-    "title": "Calculating the bus won't do anything, we need to navigate the back-end JSON protocol!",
-    "status": "in progress",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-5618",
-    "title": "Generating the driver won't do anything, we need to index the online SSL application!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-6699",
-    "title": "I'll transmit the wireless JBOD capacitor, that should hard drive the SSD feed!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-2858",
-    "title": "We need to override the online UDP bus!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-9864",
-    "title": "I'll reboot the 1080p FTP panel, that should matrix the HEX hard drive!",
-    "status": "done",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-8404",
-    "title": "We need to generate the virtual HEX alarm!",
-    "status": "in progress",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-5365",
-    "title": "Backing up the pixel won't do anything, we need to transmit the primary IB array!",
-    "status": "in progress",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-1780",
-    "title": "The CSS feed is down, index the bluetooth transmitter so we can compress the CLI protocol!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-6938",
-    "title": "Use the redundant SCSI application, then you can hack the optical alarm!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-9885",
-    "title": "We need to compress the auxiliary VGA driver!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-3216",
-    "title": "Transmitting the transmitter won't do anything, we need to compress the virtual HDD sensor!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-9285",
-    "title": "The IP monitor is down, copy the haptic alarm so we can generate the HTTP transmitter!",
-    "status": "todo",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1024",
-    "title": "Overriding the microchip won't do anything, we need to transmit the digital OCR transmitter!",
-    "status": "in progress",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-7068",
-    "title": "You can't generate the capacitor without indexing the wireless HEX pixel!",
-    "status": "canceled",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-6502",
-    "title": "Navigating the microchip won't do anything, we need to bypass the back-end SQL bus!",
-    "status": "todo",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-5326",
-    "title": "We need to hack the redundant UTF8 transmitter!",
-    "status": "todo",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-6274",
-    "title": "Use the virtual PCI circuit, then you can parse the bluetooth alarm!",
-    "status": "canceled",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-1571",
-    "title": "I'll input the neural DRAM circuit, that should protocol the SMTP interface!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-9518",
-    "title": "Compressing the interface won't do anything, we need to compress the online SDD matrix!",
-    "status": "canceled",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-5581",
-    "title": "I'll synthesize the digital COM pixel, that should transmitter the UTF8 protocol!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-2197",
-    "title": "Parsing the feed won't do anything, we need to copy the bluetooth DRAM bus!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-8484",
-    "title": "We need to parse the solid state UDP firewall!",
-    "status": "in progress",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-9892",
-    "title": "If we back up the application, we can get to the UDP application through the multi-byte THX capacitor!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-9616",
-    "title": "We need to synthesize the cross-platform ASCII pixel!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-9744",
-    "title": "Use the back-end IP card, then you can input the solid state hard drive!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-1376",
-    "title": "Generating the alarm won't do anything, we need to generate the mobile IP capacitor!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-7382",
-    "title": "If we back up the firewall, we can get to the RAM alarm through the primary UTF8 pixel!",
-    "status": "todo",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-2290",
-    "title": "I'll compress the virtual JSON panel, that should application the UTF8 bus!",
-    "status": "canceled",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1533",
-    "title": "You can't input the firewall without overriding the wireless TCP firewall!",
-    "status": "done",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-4920",
-    "title": "Bypassing the hard drive won't do anything, we need to input the bluetooth JSON program!",
-    "status": "in progress",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-5168",
-    "title": "If we synthesize the bus, we can get to the IP panel through the virtual TLS array!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-7103",
-    "title": "We need to parse the multi-byte EXE bandwidth!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-4314",
-    "title": "If we compress the program, we can get to the XML alarm through the multi-byte COM matrix!",
-    "status": "in progress",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-3415",
-    "title": "Use the cross-platform XML application, then you can quantify the solid state feed!",
-    "status": "todo",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-8339",
-    "title": "Try to calculate the DNS interface, maybe it will input the bluetooth capacitor!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-6995",
-    "title": "Try to hack the XSS bandwidth, maybe it will override the bluetooth matrix!",
-    "status": "todo",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-8053",
-    "title": "If we connect the program, we can get to the UTF8 matrix through the digital UDP protocol!",
-    "status": "todo",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-4336",
-    "title": "If we synthesize the microchip, we can get to the SAS sensor through the optical UDP program!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-8790",
-    "title": "I'll back up the optical COM alarm, that should alarm the RSS capacitor!",
-    "status": "done",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-8980",
-    "title": "Try to navigate the SQL transmitter, maybe it will back up the virtual firewall!",
-    "status": "canceled",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-7342",
-    "title": "Use the neural CLI card, then you can parse the online port!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-5608",
-    "title": "I'll hack the haptic SSL program, that should bus the UDP transmitter!",
-    "status": "canceled",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-1606",
-    "title": "I'll generate the bluetooth PNG firewall, that should pixel the SSL driver!",
-    "status": "done",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-7872",
-    "title": "Transmitting the circuit won't do anything, we need to reboot the 1080p RSS monitor!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-4167",
-    "title": "Use the cross-platform SMS circuit, then you can synthesize the optical feed!",
-    "status": "canceled",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-9581",
-    "title": "You can't index the port without hacking the cross-platform XSS monitor!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-8806",
-    "title": "We need to bypass the back-end SSL panel!",
-    "status": "done",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-6542",
-    "title": "Try to quantify the RSS firewall, maybe it will quantify the open-source system!",
-    "status": "done",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-6806",
-    "title": "The VGA protocol is down, reboot the back-end matrix so we can parse the CSS panel!",
-    "status": "canceled",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-9549",
-    "title": "You can't bypass the bus without connecting the neural JBOD bus!",
-    "status": "todo",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1075",
-    "title": "Backing up the driver won't do anything, we need to parse the redundant RAM pixel!",
-    "status": "done",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-1427",
-    "title": "Use the auxiliary PCI circuit, then you can calculate the cross-platform interface!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1907",
-    "title": "Hacking the circuit won't do anything, we need to back up the online DRAM system!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-4309",
-    "title": "If we generate the system, we can get to the TCP sensor through the optical GB pixel!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3973",
-    "title": "I'll parse the back-end ADP array, that should bandwidth the RSS bandwidth!",
-    "status": "todo",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-7962",
-    "title": "Use the wireless RAM program, then you can hack the cross-platform feed!",
-    "status": "canceled",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-3360",
-    "title": "You can't quantify the program without synthesizing the neural OCR interface!",
-    "status": "done",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-9887",
-    "title": "Use the auxiliary ASCII sensor, then you can connect the solid state port!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3649",
-    "title": "I'll input the virtual USB system, that should circuit the DNS monitor!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3586",
-    "title": "If we quantify the circuit, we can get to the CLI feed through the mobile SMS hard drive!",
-    "status": "in progress",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-5150",
-    "title": "I'll hack the wireless XSS port, that should transmitter the IP interface!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3652",
-    "title": "The SQL interface is down, override the optical bus so we can program the ASCII interface!",
-    "status": "backlog",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-6884",
-    "title": "Use the digital PCI circuit, then you can synthesize the multi-byte microchip!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1591",
-    "title": "We need to connect the mobile XSS driver!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-3802",
-    "title": "Try to override the ASCII protocol, maybe it will parse the virtual matrix!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-7253",
-    "title": "Programming the capacitor won't do anything, we need to bypass the neural IB hard drive!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-9739",
-    "title": "We need to hack the multi-byte HDD bus!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-4424",
-    "title": "Try to hack the HEX alarm, maybe it will connect the optical pixel!",
-    "status": "in progress",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3922",
-    "title": "You can't back up the capacitor without generating the wireless PCI program!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-4921",
-    "title": "I'll index the open-source IP feed, that should system the GB application!",
-    "status": "canceled",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-5814",
-    "title": "We need to calculate the 1080p AGP feed!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-2645",
-    "title": "Synthesizing the system won't do anything, we need to navigate the multi-byte HDD firewall!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-4535",
-    "title": "Try to copy the JSON circuit, maybe it will connect the wireless feed!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-4463",
-    "title": "We need to copy the solid state AGP monitor!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-9745",
-    "title": "If we connect the protocol, we can get to the GB system through the bluetooth PCI microchip!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-2080",
-    "title": "If we input the bus, we can get to the RAM matrix through the auxiliary RAM card!",
-    "status": "todo",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3838",
-    "title": "I'll bypass the online TCP application, that should panel the AGP system!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1340",
-    "title": "We need to navigate the virtual PNG circuit!",
-    "status": "todo",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-6665",
-    "title": "If we parse the monitor, we can get to the SSD hard drive through the cross-platform AGP alarm!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-7585",
-    "title": "If we calculate the hard drive, we can get to the SSL program through the multi-byte CSS microchip!",
-    "status": "backlog",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-6319",
-    "title": "We need to copy the multi-byte SCSI program!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-4369",
-    "title": "Try to input the SCSI bus, maybe it will generate the 1080p pixel!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-9035",
-    "title": "We need to override the solid state PNG array!",
-    "status": "canceled",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-3970",
-    "title": "You can't index the transmitter without quantifying the haptic ASCII card!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-4473",
-    "title": "You can't bypass the protocol without overriding the neural RSS program!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-4136",
-    "title": "You can't hack the hard drive without hacking the primary JSON program!",
-    "status": "canceled",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3939",
-    "title": "Use the back-end SQL firewall, then you can connect the neural hard drive!",
-    "status": "done",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-2007",
-    "title": "I'll input the back-end USB protocol, that should bandwidth the PCI system!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-7516",
-    "title": "Use the primary SQL program, then you can generate the auxiliary transmitter!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-6906",
-    "title": "Try to back up the DRAM system, maybe it will reboot the online transmitter!",
-    "status": "done",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-5207",
-    "title": "The SMS interface is down, copy the bluetooth bus so we can quantify the VGA card!",
-    "status": "in progress",
-    "label": "bug",
-    "priority": "low"
-  }
+   {
+      "id": "TASK-8782",
+      "title": "You can't compress the program without quantifying the open-source SSD pixel!",
+      "status": "in progress",
+      "label": "documentation",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-7878",
+      "title": "Try to calculate the EXE feed, maybe it will index the multi-byte pixel!",
+      "status": "backlog",
+      "label": "documentation",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-7839",
+      "title": "We need to bypass the neural TCP card!",
+      "status": "todo",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-5562",
+      "title": "The SAS interface is down, bypass the open-source pixel so we can back up the PNG bandwidth!",
+      "status": "backlog",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-8686",
+      "title": "I'll parse the wireless SSL protocol, that should driver the API panel!",
+      "status": "canceled",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-1280",
+      "title": "Use the digital TLS panel, then you can transmit the haptic system!",
+      "status": "done",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-7262",
+      "title": "The UTF8 application is down, parse the neural bandwidth so we can back up the PNG firewall!",
+      "status": "done",
+      "label": "feature",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-1138",
+      "title": "Generating the driver won't do anything, we need to quantify the 1080p SMTP bandwidth!",
+      "status": "in progress",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-7184",
+      "title": "We need to program the back-end THX pixel!",
+      "status": "todo",
+      "label": "feature",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-5160",
+      "title": "Calculating the bus won't do anything, we need to navigate the back-end JSON protocol!",
+      "status": "in progress",
+      "label": "documentation",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-5618",
+      "title": "Generating the driver won't do anything, we need to index the online SSL application!",
+      "status": "done",
+      "label": "documentation",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-6699",
+      "title": "I'll transmit the wireless JBOD capacitor, that should hard drive the SSD feed!",
+      "status": "backlog",
+      "label": "documentation",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-2858",
+      "title": "We need to override the online UDP bus!",
+      "status": "backlog",
+      "label": "bug",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-9864",
+      "title": "I'll reboot the 1080p FTP panel, that should matrix the HEX hard drive!",
+      "status": "done",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-8404",
+      "title": "We need to generate the virtual HEX alarm!",
+      "status": "in progress",
+      "label": "bug",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-5365",
+      "title": "Backing up the pixel won't do anything, we need to transmit the primary IB array!",
+      "status": "in progress",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-1780",
+      "title": "The CSS feed is down, index the bluetooth transmitter so we can compress the CLI protocol!",
+      "status": "todo",
+      "label": "documentation",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-6938",
+      "title": "Use the redundant SCSI application, then you can hack the optical alarm!",
+      "status": "todo",
+      "label": "documentation",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-9885",
+      "title": "We need to compress the auxiliary VGA driver!",
+      "status": "backlog",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-3216",
+      "title": "Transmitting the transmitter won't do anything, we need to compress the virtual HDD sensor!",
+      "status": "backlog",
+      "label": "documentation",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-9285",
+      "title": "The IP monitor is down, copy the haptic alarm so we can generate the HTTP transmitter!",
+      "status": "todo",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-1024",
+      "title": "Overriding the microchip won't do anything, we need to transmit the digital OCR transmitter!",
+      "status": "in progress",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-7068",
+      "title": "You can't generate the capacitor without indexing the wireless HEX pixel!",
+      "status": "canceled",
+      "label": "bug",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-6502",
+      "title": "Navigating the microchip won't do anything, we need to bypass the back-end SQL bus!",
+      "status": "todo",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-5326",
+      "title": "We need to hack the redundant UTF8 transmitter!",
+      "status": "todo",
+      "label": "bug",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-6274",
+      "title": "Use the virtual PCI circuit, then you can parse the bluetooth alarm!",
+      "status": "canceled",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-1571",
+      "title": "I'll input the neural DRAM circuit, that should protocol the SMTP interface!",
+      "status": "in progress",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-9518",
+      "title": "Compressing the interface won't do anything, we need to compress the online SDD matrix!",
+      "status": "canceled",
+      "label": "documentation",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-5581",
+      "title": "I'll synthesize the digital COM pixel, that should transmitter the UTF8 protocol!",
+      "status": "backlog",
+      "label": "documentation",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-2197",
+      "title": "Parsing the feed won't do anything, we need to copy the bluetooth DRAM bus!",
+      "status": "todo",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-8484",
+      "title": "We need to parse the solid state UDP firewall!",
+      "status": "in progress",
+      "label": "bug",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-9892",
+      "title": "If we back up the application, we can get to the UDP application through the multi-byte THX capacitor!",
+      "status": "done",
+      "label": "documentation",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-9616",
+      "title": "We need to synthesize the cross-platform ASCII pixel!",
+      "status": "in progress",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-9744",
+      "title": "Use the back-end IP card, then you can input the solid state hard drive!",
+      "status": "done",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-1376",
+      "title": "Generating the alarm won't do anything, we need to generate the mobile IP capacitor!",
+      "status": "backlog",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-7382",
+      "title": "If we back up the firewall, we can get to the RAM alarm through the primary UTF8 pixel!",
+      "status": "todo",
+      "label": "feature",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-2290",
+      "title": "I'll compress the virtual JSON panel, that should application the UTF8 bus!",
+      "status": "canceled",
+      "label": "documentation",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-1533",
+      "title": "You can't input the firewall without overriding the wireless TCP firewall!",
+      "status": "done",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-4920",
+      "title": "Bypassing the hard drive won't do anything, we need to input the bluetooth JSON program!",
+      "status": "in progress",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-5168",
+      "title": "If we synthesize the bus, we can get to the IP panel through the virtual TLS array!",
+      "status": "in progress",
+      "label": "feature",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-7103",
+      "title": "We need to parse the multi-byte EXE bandwidth!",
+      "status": "canceled",
+      "label": "feature",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-4314",
+      "title": "If we compress the program, we can get to the XML alarm through the multi-byte COM matrix!",
+      "status": "in progress",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-3415",
+      "title": "Use the cross-platform XML application, then you can quantify the solid state feed!",
+      "status": "todo",
+      "label": "feature",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-8339",
+      "title": "Try to calculate the DNS interface, maybe it will input the bluetooth capacitor!",
+      "status": "in progress",
+      "label": "feature",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-6995",
+      "title": "Try to hack the XSS bandwidth, maybe it will override the bluetooth matrix!",
+      "status": "todo",
+      "label": "feature",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-8053",
+      "title": "If we connect the program, we can get to the UTF8 matrix through the digital UDP protocol!",
+      "status": "todo",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-4336",
+      "title": "If we synthesize the microchip, we can get to the SAS sensor through the optical UDP program!",
+      "status": "todo",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-8790",
+      "title": "I'll back up the optical COM alarm, that should alarm the RSS capacitor!",
+      "status": "done",
+      "label": "bug",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-8980",
+      "title": "Try to navigate the SQL transmitter, maybe it will back up the virtual firewall!",
+      "status": "canceled",
+      "label": "bug",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-7342",
+      "title": "Use the neural CLI card, then you can parse the online port!",
+      "status": "backlog",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-5608",
+      "title": "I'll hack the haptic SSL program, that should bus the UDP transmitter!",
+      "status": "canceled",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-1606",
+      "title": "I'll generate the bluetooth PNG firewall, that should pixel the SSL driver!",
+      "status": "done",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-7872",
+      "title": "Transmitting the circuit won't do anything, we need to reboot the 1080p RSS monitor!",
+      "status": "canceled",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-4167",
+      "title": "Use the cross-platform SMS circuit, then you can synthesize the optical feed!",
+      "status": "canceled",
+      "label": "bug",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-9581",
+      "title": "You can't index the port without hacking the cross-platform XSS monitor!",
+      "status": "backlog",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-8806",
+      "title": "We need to bypass the back-end SSL panel!",
+      "status": "done",
+      "label": "bug",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-6542",
+      "title": "Try to quantify the RSS firewall, maybe it will quantify the open-source system!",
+      "status": "done",
+      "label": "feature",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-6806",
+      "title": "The VGA protocol is down, reboot the back-end matrix so we can parse the CSS panel!",
+      "status": "canceled",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-9549",
+      "title": "You can't bypass the bus without connecting the neural JBOD bus!",
+      "status": "todo",
+      "label": "feature",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-1075",
+      "title": "Backing up the driver won't do anything, we need to parse the redundant RAM pixel!",
+      "status": "done",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-1427",
+      "title": "Use the auxiliary PCI circuit, then you can calculate the cross-platform interface!",
+      "status": "done",
+      "label": "documentation",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-1907",
+      "title": "Hacking the circuit won't do anything, we need to back up the online DRAM system!",
+      "status": "todo",
+      "label": "documentation",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-4309",
+      "title": "If we generate the system, we can get to the TCP sensor through the optical GB pixel!",
+      "status": "backlog",
+      "label": "bug",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-3973",
+      "title": "I'll parse the back-end ADP array, that should bandwidth the RSS bandwidth!",
+      "status": "todo",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-7962",
+      "title": "Use the wireless RAM program, then you can hack the cross-platform feed!",
+      "status": "canceled",
+      "label": "bug",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-3360",
+      "title": "You can't quantify the program without synthesizing the neural OCR interface!",
+      "status": "done",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-9887",
+      "title": "Use the auxiliary ASCII sensor, then you can connect the solid state port!",
+      "status": "backlog",
+      "label": "bug",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-3649",
+      "title": "I'll input the virtual USB system, that should circuit the DNS monitor!",
+      "status": "in progress",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-3586",
+      "title": "If we quantify the circuit, we can get to the CLI feed through the mobile SMS hard drive!",
+      "status": "in progress",
+      "label": "bug",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-5150",
+      "title": "I'll hack the wireless XSS port, that should transmitter the IP interface!",
+      "status": "canceled",
+      "label": "feature",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-3652",
+      "title": "The SQL interface is down, override the optical bus so we can program the ASCII interface!",
+      "status": "backlog",
+      "label": "feature",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-6884",
+      "title": "Use the digital PCI circuit, then you can synthesize the multi-byte microchip!",
+      "status": "canceled",
+      "label": "feature",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-1591",
+      "title": "We need to connect the mobile XSS driver!",
+      "status": "in progress",
+      "label": "feature",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-3802",
+      "title": "Try to override the ASCII protocol, maybe it will parse the virtual matrix!",
+      "status": "in progress",
+      "label": "feature",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-7253",
+      "title": "Programming the capacitor won't do anything, we need to bypass the neural IB hard drive!",
+      "status": "backlog",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-9739",
+      "title": "We need to hack the multi-byte HDD bus!",
+      "status": "done",
+      "label": "documentation",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-4424",
+      "title": "Try to hack the HEX alarm, maybe it will connect the optical pixel!",
+      "status": "in progress",
+      "label": "documentation",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-3922",
+      "title": "You can't back up the capacitor without generating the wireless PCI program!",
+      "status": "backlog",
+      "label": "bug",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-4921",
+      "title": "I'll index the open-source IP feed, that should system the GB application!",
+      "status": "canceled",
+      "label": "bug",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-5814",
+      "title": "We need to calculate the 1080p AGP feed!",
+      "status": "backlog",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-2645",
+      "title": "Synthesizing the system won't do anything, we need to navigate the multi-byte HDD firewall!",
+      "status": "todo",
+      "label": "documentation",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-4535",
+      "title": "Try to copy the JSON circuit, maybe it will connect the wireless feed!",
+      "status": "in progress",
+      "label": "feature",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-4463",
+      "title": "We need to copy the solid state AGP monitor!",
+      "status": "done",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-9745",
+      "title": "If we connect the protocol, we can get to the GB system through the bluetooth PCI microchip!",
+      "status": "canceled",
+      "label": "feature",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-2080",
+      "title": "If we input the bus, we can get to the RAM matrix through the auxiliary RAM card!",
+      "status": "todo",
+      "label": "bug",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-3838",
+      "title": "I'll bypass the online TCP application, that should panel the AGP system!",
+      "status": "backlog",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-1340",
+      "title": "We need to navigate the virtual PNG circuit!",
+      "status": "todo",
+      "label": "bug",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-6665",
+      "title": "If we parse the monitor, we can get to the SSD hard drive through the cross-platform AGP alarm!",
+      "status": "canceled",
+      "label": "feature",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-7585",
+      "title": "If we calculate the hard drive, we can get to the SSL program through the multi-byte CSS microchip!",
+      "status": "backlog",
+      "label": "feature",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-6319",
+      "title": "We need to copy the multi-byte SCSI program!",
+      "status": "backlog",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-4369",
+      "title": "Try to input the SCSI bus, maybe it will generate the 1080p pixel!",
+      "status": "backlog",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-9035",
+      "title": "We need to override the solid state PNG array!",
+      "status": "canceled",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-3970",
+      "title": "You can't index the transmitter without quantifying the haptic ASCII card!",
+      "status": "todo",
+      "label": "documentation",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-4473",
+      "title": "You can't bypass the protocol without overriding the neural RSS program!",
+      "status": "todo",
+      "label": "documentation",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-4136",
+      "title": "You can't hack the hard drive without hacking the primary JSON program!",
+      "status": "canceled",
+      "label": "bug",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-3939",
+      "title": "Use the back-end SQL firewall, then you can connect the neural hard drive!",
+      "status": "done",
+      "label": "feature",
+      "priority": "low"
+   },
+   {
+      "id": "TASK-2007",
+      "title": "I'll input the back-end USB protocol, that should bandwidth the PCI system!",
+      "status": "backlog",
+      "label": "bug",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-7516",
+      "title": "Use the primary SQL program, then you can generate the auxiliary transmitter!",
+      "status": "done",
+      "label": "documentation",
+      "priority": "medium"
+   },
+   {
+      "id": "TASK-6906",
+      "title": "Try to back up the DRAM system, maybe it will reboot the online transmitter!",
+      "status": "done",
+      "label": "feature",
+      "priority": "high"
+   },
+   {
+      "id": "TASK-5207",
+      "title": "The SMS interface is down, copy the bluetooth bus so we can quantify the VGA card!",
+      "status": "in progress",
+      "label": "bug",
+      "priority": "low"
+   }
 ]
diff --git a/apps/web/app/(app)/examples/tasks/page.tsx b/apps/web/app/(app)/examples/tasks/page.tsx
index ca485c38..f53ab536 100644
--- a/apps/web/app/(app)/examples/tasks/page.tsx
+++ b/apps/web/app/(app)/examples/tasks/page.tsx
@@ -1,23 +1,23 @@
-import { promises as fs } from 'fs'
-import path from 'path'
-import type { Metadata } from 'next'
-import Image from 'next/image'
-import { z } from 'zod'
+import { promises as fs } from "fs"
+import path from "path"
+import type { Metadata } from "next"
+import Image from "next/image"
+import { z } from "zod"
 
-import { columns } from './components/columns'
-import { DataTable } from './components/data-table'
-import { UserNav } from './components/user-nav'
-import { taskSchema } from './data/schema'
+import { columns } from "./components/columns"
+import { DataTable } from "./components/data-table"
+import { UserNav } from "./components/user-nav"
+import { taskSchema } from "./data/schema"
 
 export const metadata: Metadata = {
-   title: 'Tasks',
-   description: 'A task and issue tracker build using Tanstack Table.',
+   title: "Tasks",
+   description: "A task and issue tracker build using Tanstack Table.",
 }
 
 // Simulate a database read for tasks.
 async function getTasks() {
    const data = await fs.readFile(
-      path.join(process.cwd(), 'app/(app)/examples/tasks/data/tasks.json'),
+      path.join(process.cwd(), "app/(app)/examples/tasks/data/tasks.json"),
    )
 
    const tasks = JSON.parse(data.toString())
@@ -49,7 +49,9 @@ export default async function TaskPage() {
          <div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
             <div className="flex items-center justify-between space-y-2">
                <div>
-                  <h2 className="text-2xl font-bold tracking-tight">Welcome back!</h2>
+                  <h2 className="text-2xl font-bold tracking-tight">
+                     Welcome back!
+                  </h2>
                   <p className="text-muted-foreground">
                      Here&apos;s a list of your tasks for this month!
                   </p>
diff --git a/apps/web/app/(app)/layout.tsx b/apps/web/app/(app)/layout.tsx
index 7e4f95af..9b3cfe3f 100644
--- a/apps/web/app/(app)/layout.tsx
+++ b/apps/web/app/(app)/layout.tsx
@@ -1,20 +1,18 @@
-import { SiteBanner } from '~/components/site-banner'
-import { SiteFooter } from '~/components/site-footer'
-import { SiteHeader } from '~/components/site-header'
+import { SiteBanner } from "~/components/site-banner"
+import { SiteFooter } from "~/components/site-footer"
+import { SiteHeader } from "~/components/site-header"
 
-interface MarketingLayoutProps {
+interface AppLayoutProps {
    children: React.ReactNode
 }
 
-export default async function MarketingLayout({
-   children,
-}: MarketingLayoutProps) {
+export default function AppLayout({ children }: AppLayoutProps) {
    return (
-      <>
-         <SiteBanner />
+      <div data-wrapper="" className="border-grid flex flex-1 flex-col">
+         {/* <SiteBanner /> */}
          <SiteHeader />
-         <main className="flex-1">{children}</main>
+         <main className="flex flex-1 flex-col">{children}</main>
          <SiteFooter />
-      </>
+      </div>
    )
 }
diff --git a/apps/web/app/(app)/themes/layout.tsx b/apps/web/app/(app)/themes/layout.tsx
new file mode 100644
index 00000000..5b108ef9
--- /dev/null
+++ b/apps/web/app/(app)/themes/layout.tsx
@@ -0,0 +1,49 @@
+import type { Metadata } from "next"
+
+import { Announcement } from "~/components/announcement"
+import {
+   PageActions,
+   PageHeader,
+   PageHeaderDescription,
+   PageHeaderHeading,
+} from "~/components/page-header"
+import { ThemeCustomizer } from "~/components/theme-customizer"
+
+export const metadata: Metadata = {
+   title: "Themes",
+   description:
+      "Hand-picked themes that you can copy and paste into your apps.",
+}
+
+export default function ThemesLayout({
+   children,
+}: {
+   children: React.ReactNode
+}) {
+   return (
+      <>
+         <PageHeader>
+            <Announcement />
+            <PageHeaderHeading className="hidden md:block">
+               Add colors. Make it yours.
+            </PageHeaderHeading>
+            <PageHeaderHeading className="md:hidden">
+               Make it yours
+            </PageHeaderHeading>
+            <PageHeaderDescription>
+               Hand-picked themes that you can copy and paste into your apps.
+            </PageHeaderDescription>
+            <PageActions>
+               <ThemeCustomizer />
+            </PageActions>
+         </PageHeader>
+         <div className="container-wrapper">
+            <div className="container py-6">
+               <section id="themes" className="scroll-mt-20">
+                  {children}
+               </section>
+            </div>
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/app/(app)/themes/page.tsx b/apps/web/app/(app)/themes/page.tsx
index 7d05989e..18521ec7 100644
--- a/apps/web/app/(app)/themes/page.tsx
+++ b/apps/web/app/(app)/themes/page.tsx
@@ -1,46 +1,12 @@
-import type { Metadata } from 'next'
+import { CardsDemo } from "~/components/cards"
+import { ThemeWrapper } from "~/components/theme-wrapper"
 
-import 'public/r/themes.css'
-import { Announcement } from '~/components/announcement'
-import {
-   PageActions,
-   PageHeader,
-   PageHeaderDescription,
-   PageHeaderHeading,
-} from '~/components/page-header'
-import { ThemeCustomizer } from '~/components/theme-customizer'
-import { ThemeWrapper } from '~/components/theme-wrapper'
-import { ThemesTabs } from '~/app/(app)/themes/tabs'
-
-export const metadata: Metadata = {
-   title: 'Themes',
-   description: 'Hand-picked themes that you can copy and paste into your apps.',
-}
+import "public/r/themes.css"
 
 export default function ThemesPage() {
    return (
-      <div className="container">
-         <ThemeWrapper
-            defaultTheme="zinc"
-            className="relative flex w-full flex-col items-start md:flex-row"
-         >
-            <PageHeader className="w-full">
-               <Announcement />
-               <PageHeaderHeading className="hidden md:block">
-                  Add colors. Make it yours.
-               </PageHeaderHeading>
-               <PageHeaderHeading className="md:hidden">
-                  Make it yours
-               </PageHeaderHeading>
-               <PageHeaderDescription>
-                  Hand-picked themes that you can copy and paste into your apps.
-               </PageHeaderDescription>
-               <PageActions>
-                  <ThemeCustomizer />
-               </PageActions>
-            </PageHeader>
-         </ThemeWrapper>
-         <ThemesTabs />
-      </div>
+      <ThemeWrapper>
+         <CardsDemo />
+      </ThemeWrapper>
    )
 }
diff --git a/apps/web/app/(app)/themes/tabs.tsx b/apps/web/app/(app)/themes/tabs.tsx
deleted file mode 100644
index f1b8fa37..00000000
--- a/apps/web/app/(app)/themes/tabs.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { useConfig } from '~/hooks/use-config'
-import { ThemeWrapper } from '~/components/theme-wrapper'
-import CardsDefault from '~/registry/default/example/cards'
-import { Skeleton } from '~/registry/default/ui/skeleton'
-import CardsNewYork from '~/registry/miami/example/cards'
-
-export function ThemesTabs() {
-   const [mounted, setMounted] = React.useState(false)
-   const [config] = useConfig()
-
-   React.useEffect(() => {
-      setMounted(true)
-   }, [])
-
-   return (
-      <div className="space-y-8">
-         {!mounted
-            ? (
-                  <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:gap-6">
-                     <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-6">
-                        <Skeleton className="h-[218px] w-full" />
-                        <div className="grid gap-1 sm:grid-cols-[260px_1fr] md:hidden">
-                           <Skeleton className="h-[218px] w-full" />
-                           <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
-                              <Skeleton className="h-[218px] w-full" />
-                           </div>
-                           <div className="pt-3 sm:col-span-2 xl:pt-4">
-                              <Skeleton className="h-[218px] w-full" />
-                           </div>
-                        </div>
-                        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-                           <div className="space-y-4 xl:space-y-6">
-                              <Skeleton className="h-[218px] w-full" />
-                              <Skeleton className="h-[218px] w-full" />
-                              <Skeleton className="h-[218px] w-full" />
-                           </div>
-                           <div className="space-y-4 xl:space-y-6">
-                              <Skeleton className="h-[218px] w-full" />
-                              <Skeleton className="h-[218px] w-full" />
-                              <div className="hidden xl:block">
-                                 <Skeleton className="h-[218px] w-full" />
-                              </div>
-                           </div>
-                        </div>
-                     </div>
-                     <div className="space-y-4 lg:col-span-6 xl:col-span-4 xl:space-y-6">
-                        <div className="hidden gap-1 sm:grid-cols-[260px_1fr] md:grid">
-                           <Skeleton className="h-[218px] w-full" />
-                           <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
-                              <Skeleton className="h-[218px] w-full" />
-                           </div>
-                           <div className="pt-3 sm:col-span-2 xl:pt-4">
-                              <Skeleton className="h-[218px] w-full" />
-                           </div>
-                        </div>
-                        <div className="hidden md:block">
-                           <Skeleton className="h-[218px] w-full" />
-                        </div>
-                        <Skeleton className="h-[218px] w-full" />
-                     </div>
-                  </div>
-               )
-            : (
-                  <ThemeWrapper>
-                     {config.style === 'miami' && <CardsNewYork />}
-                     {config.style === 'default' && <CardsDefault />}
-                  </ThemeWrapper>
-               )}
-      </div>
-   )
-}
diff --git a/apps/web/app/(blocks)/blocks/[style]/[name]/page.tsx b/apps/web/app/(blocks)/blocks/[style]/[name]/page.tsx
deleted file mode 100644
index 4d13b929..00000000
--- a/apps/web/app/(blocks)/blocks/[style]/[name]/page.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import * as React from 'react'
-import type { Metadata } from 'next'
-import { notFound } from 'next/navigation'
-
-import { siteConfig } from '~/config/site'
-import { getAllBlockIds } from '~/lib/blocks'
-import { absoluteUrl, ny } from '~/lib/utils'
-import type { Style } from '~/registry/registry-styles'
-import { styles } from '~/registry/registry-styles'
-
-import '~/styles/mdx.css'
-import { getRegistryComponent, getRegistryItem } from '~/lib/registry'
-
-const getCachedRegistryItem = React.cache(
-   async (name: string, style: Style['name']) => {
-      return await getRegistryItem(name, style)
-   },
-)
-
-export async function generateMetadata({
-   params,
-}: {
-   params: {
-      style: Style['name']
-      name: string
-   }
-}): Promise<Metadata> {
-   const { name, style } = params
-   const item = await getCachedRegistryItem(name, style)
-
-   if (!item) {
-      return {}
-   }
-
-   const title = item.name
-   const description = item.description
-
-   return {
-      title: `${item.name}${item.description ? ` - ${item.description}` : ''}`,
-      description,
-      openGraph: {
-         title,
-         description,
-         type: 'article',
-         url: absoluteUrl(`/blocks/${style}/${item.name}`),
-         images: [
-            {
-               url: siteConfig.ogImage,
-               width: 1200,
-               height: 630,
-               alt: siteConfig.name,
-            },
-         ],
-      },
-      twitter: {
-         card: 'summary_large_image',
-         title,
-         description,
-         images: [siteConfig.ogImage],
-         creator: '@shadny',
-      },
-   }
-}
-
-export async function generateStaticParams() {
-   const blockIds = await getAllBlockIds()
-   return styles
-      .map(style =>
-         blockIds.map(name => ({
-            style: style.name,
-            name,
-         })),
-      )
-      .flat()
-}
-
-export default async function BlockPage({
-   params,
-}: {
-   params: {
-      style: Style['name']
-      name: string
-   }
-}) {
-   const { name, style } = params
-   const item = await getCachedRegistryItem(name, style)
-   const Component = getRegistryComponent(name, style)
-
-   if (!item || !Component) {
-      return notFound()
-   }
-
-   return (
-      <>
-         <div
-            className={ny(
-               'themes-wrapper bg-background',
-               item.meta?.containerClassName,
-            )}
-         >
-            <Component />
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/app/(internal)/icons/layout.tsx b/apps/web/app/(internal)/icons/layout.tsx
index 288ee0eb..4ada17d6 100644
--- a/apps/web/app/(internal)/icons/layout.tsx
+++ b/apps/web/app/(internal)/icons/layout.tsx
@@ -1,15 +1,15 @@
-import type { Metadata } from 'next'
+import type { Metadata } from "next"
 
-import { Announcement } from '~/components/announcement'
+import { Announcement } from "~/components/announcement"
 import {
    PageHeader,
    PageHeaderDescription,
    PageHeaderHeading,
-} from '~/components/page-header'
+} from "~/components/page-header"
 
 export const metadata: Metadata = {
-   title: 'Icons',
-   description: 'All icons in all libraries.',
+   title: "Icons",
+   description: "All icons in all libraries.",
 }
 
 export default function IconsLayout({
diff --git a/apps/web/app/(internal)/icons/page.tsx b/apps/web/app/(internal)/icons/page.tsx
index 7b7bd05e..8c38152e 100644
--- a/apps/web/app/(internal)/icons/page.tsx
+++ b/apps/web/app/(internal)/icons/page.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Icons } from '~/__registry__/icons'
+import * as React from "react"
+import { Icons } from "~/__registry__/icons"
 
 import {
    Table,
@@ -10,8 +10,8 @@ import {
    TableHead,
    TableHeader,
    TableRow,
-} from '~/registry/miami/ui/table'
-import { iconLibraries } from '~/registry/registry-icons'
+} from "~/registry/miami/ui/table"
+import { iconLibraries } from "~/registry/registry-icons"
 
 export default function IconsPage() {
    return (
@@ -22,7 +22,7 @@ export default function IconsPage() {
                   <TableHead className="w-[240px]" align="left">
                      name
                   </TableHead>
-                  {Object.keys(iconLibraries).map(library => (
+                  {Object.keys(iconLibraries).map((library) => (
                      <TableHead key={library}>{library}</TableHead>
                   ))}
                </TableRow>
@@ -36,7 +36,10 @@ export default function IconsPage() {
                      {Object.entries(iconLibraries).map(([library, name]) => {
                         const IconComponent = icon[library as keyof typeof icon]
                         return (
-                           <TableCell key={library} className="[&_svg]:size-4">
+                           <TableCell
+                              key={library}
+                              className="[&_svg]:h-4 [&_svg]:w-4"
+                           >
                               <React.Suspense fallback={<div>Loading...</div>}>
                                  {IconComponent && <IconComponent />}
                               </React.Suspense>
diff --git a/apps/web/app/(internal)/sink/page.tsx b/apps/web/app/(internal)/sink/page.tsx
index 8d55d151..6221876d 100644
--- a/apps/web/app/(internal)/sink/page.tsx
+++ b/apps/web/app/(internal)/sink/page.tsx
@@ -1,3 +1,3 @@
-import SinkPage from '~/registry/miami/block/_sink/page'
+import SinkPage from "~/registry/miami/internal/sink/page"
 
 export default SinkPage
diff --git a/apps/web/app/(marketing)/[...slug]/page.tsx b/apps/web/app/(marketing)/[...slug]/page.tsx
index e297b21a..4ede6574 100644
--- a/apps/web/app/(marketing)/[...slug]/page.tsx
+++ b/apps/web/app/(marketing)/[...slug]/page.tsx
@@ -1,10 +1,10 @@
-import { allPages } from 'content-collections'
-import type { Metadata } from 'next'
-import { notFound } from 'next/navigation'
-import { env } from '~/scripts/env.mts'
-import { Mdx } from '~/components/mdx-components'
-import { siteConfig } from '~/config/site'
-import { absoluteUrl } from '~/lib/utils'
+import { allPages } from "content-collections"
+import type { Metadata } from "next"
+import { notFound } from "next/navigation"
+import { Mdx } from "~/components/mdx-components"
+import { siteConfig } from "~/config/site"
+import { absoluteUrl } from "~/lib/utils"
+import { env } from "~/scripts/env.mjs"
 
 interface PageProps {
    params: {
@@ -12,9 +12,9 @@ interface PageProps {
    }
 }
 
-async function getPageFromParams(params: PageProps['params']) {
-   const slug = params?.slug?.join('/')
-   const page = allPages.find(page => page.slugAsParams === slug)
+async function getPageFromParams(params: PageProps["params"]) {
+   const slug = params?.slug?.join("/")
+   const page = allPages.find((page) => page.slugAsParams === slug)
 
    if (!page) {
       return null
@@ -35,9 +35,9 @@ export async function generateMetadata({
    const url = env.NEXT_PUBLIC_APP_URL
 
    const ogUrl = new URL(`${url}/og`)
-   ogUrl.searchParams.set('heading', page.title)
-   ogUrl.searchParams.set('type', siteConfig.name)
-   ogUrl.searchParams.set('mode', 'light')
+   ogUrl.searchParams.set("heading", page.title)
+   ogUrl.searchParams.set("type", siteConfig.name)
+   ogUrl.searchParams.set("mode", "light")
 
    return {
       title: page.title,
@@ -45,7 +45,7 @@ export async function generateMetadata({
       openGraph: {
          title: page.title,
          description: page.description,
-         type: 'article',
+         type: "article",
          url: absoluteUrl(page.slug),
          images: [
             {
@@ -57,7 +57,7 @@ export async function generateMetadata({
          ],
       },
       twitter: {
-         card: 'summary_large_image',
+         card: "summary_large_image",
          title: page.title,
          description: page.description,
          images: [ogUrl.toString()],
@@ -65,9 +65,9 @@ export async function generateMetadata({
    }
 }
 
-export async function generateStaticParams(): Promise<PageProps['params'][]> {
-   return allPages.map(page => ({
-      slug: page.slugAsParams.split('/'),
+export async function generateStaticParams(): Promise<PageProps["params"][]> {
+   return allPages.map((page) => ({
+      slug: page.slugAsParams.split("/"),
    }))
 }
 
@@ -85,7 +85,9 @@ export default async function PagePage({ params }: PageProps) {
                {page.title}
             </h1>
             {page.description && (
-               <p className="text-muted-foreground text-xl">{page.description}</p>
+               <p className="text-muted-foreground text-xl">
+                  {page.description}
+               </p>
             )}
          </div>
          <hr className="my-4" />
diff --git a/apps/web/app/(marketing)/layout.tsx b/apps/web/app/(marketing)/layout.tsx
index 7e4f95af..aa144dbb 100644
--- a/apps/web/app/(marketing)/layout.tsx
+++ b/apps/web/app/(marketing)/layout.tsx
@@ -1,6 +1,6 @@
-import { SiteBanner } from '~/components/site-banner'
-import { SiteFooter } from '~/components/site-footer'
-import { SiteHeader } from '~/components/site-header'
+import { SiteBanner } from "~/components/site-banner"
+import { SiteFooter } from "~/components/site-footer"
+import { SiteHeader } from "~/components/site-header"
 
 interface MarketingLayoutProps {
    children: React.ReactNode
@@ -11,7 +11,7 @@ export default async function MarketingLayout({
 }: MarketingLayoutProps) {
    return (
       <>
-         <SiteBanner />
+         {/* <SiteBanner /> */}
          <SiteHeader />
          <main className="flex-1">{children}</main>
          <SiteFooter />
diff --git a/apps/web/app/(marketing)/showcase/[...slug]/page.tsx b/apps/web/app/(marketing)/showcase/[...slug]/page.tsx
index 37bd0758..c6d948a2 100644
--- a/apps/web/app/(marketing)/showcase/[...slug]/page.tsx
+++ b/apps/web/app/(marketing)/showcase/[...slug]/page.tsx
@@ -1,11 +1,11 @@
-import type { Metadata } from 'next'
-import { notFound } from 'next/navigation'
-import { allShowcases } from 'content-collections'
-import { env } from '~/scripts/env.mts'
+import { allShowcases } from "content-collections"
+import type { Metadata } from "next"
+import { notFound } from "next/navigation"
+import { env } from "~/scripts/env.mjs"
 
-import { siteConfig } from '~/config/site'
-import { absoluteUrl } from '~/lib/utils'
-import { ShowcaseCard } from '~/components/sections/showcase'
+import { ShowcaseCard } from "~/components/sections/showcase"
+import { siteConfig } from "~/config/site"
+import { absoluteUrl } from "~/lib/utils"
 
 interface PageProps {
    params: {
@@ -13,9 +13,9 @@ interface PageProps {
    }
 }
 
-async function getPageFromParams(params: PageProps['params']) {
-   const slug = params?.slug?.join('/')
-   const page = allShowcases.find(page => page.slugAsParams === slug)
+async function getPageFromParams(params: PageProps["params"]) {
+   const slug = params?.slug?.join("/")
+   const page = allShowcases.find((page) => page.slugAsParams === slug)
 
    if (!page) {
       return null
@@ -36,9 +36,9 @@ export async function generateMetadata({
    const url = env.NEXT_PUBLIC_APP_URL
 
    const ogUrl = new URL(`${url}/api/og`)
-   ogUrl.searchParams.set('heading', page.title)
-   ogUrl.searchParams.set('type', siteConfig.name)
-   ogUrl.searchParams.set('mode', 'light')
+   ogUrl.searchParams.set("heading", page.title)
+   ogUrl.searchParams.set("type", siteConfig.name)
+   ogUrl.searchParams.set("mode", "light")
 
    return {
       title: page.title,
@@ -46,7 +46,7 @@ export async function generateMetadata({
       openGraph: {
          title: page.title,
          description: page.description,
-         type: 'article',
+         type: "article",
          url: absoluteUrl(page.slug),
          images: [
             {
@@ -58,7 +58,7 @@ export async function generateMetadata({
          ],
       },
       twitter: {
-         card: 'summary_large_image',
+         card: "summary_large_image",
          title: page.title,
          description: page.description,
          images: [ogUrl.toString()],
@@ -66,9 +66,9 @@ export async function generateMetadata({
    }
 }
 
-export async function generateStaticParams(): Promise<PageProps['params'][]> {
-   return allShowcases.map(page => ({
-      slug: page.slugAsParams.split('/'),
+export async function generateStaticParams(): Promise<PageProps["params"][]> {
+   return allShowcases.map((page) => ({
+      slug: page.slugAsParams.split("/"),
    }))
 }
 
@@ -85,9 +85,7 @@ export default async function PagePage({ params }: PageProps) {
             {page.title}
          </h2>
          <h3 className="text-foreground/80 mx-auto mb-8 text-balance text-center text-lg font-medium tracking-tight">
-            {page.title}
-            {' '}
-            uses Nyxb UI to build their landing page.
+            {page.title} uses Nyxb UI to build their landing page.
          </h3>
          <ShowcaseCard
             title={page.title}
diff --git a/apps/web/app/(view)/view/styles/[style]/[name]/page.tsx b/apps/web/app/(view)/view/styles/[style]/[name]/page.tsx
new file mode 100644
index 00000000..8d5f7fe7
--- /dev/null
+++ b/apps/web/app/(view)/view/styles/[style]/[name]/page.tsx
@@ -0,0 +1,101 @@
+import type { Metadata } from "next"
+import { notFound } from "next/navigation"
+import * as React from "react"
+
+import { siteConfig } from "~/config/site"
+import { getAllBlockIds } from "~/lib/blocks"
+import { absoluteUrl, ny } from "~/lib/utils"
+import { type Style, styles } from "~/registry/registry-styles"
+
+import "~/styles/mdx.css"
+import { getRegistryComponent, getRegistryItem } from "~/lib/registry"
+
+const getCachedRegistryItem = React.cache(
+   async (name: string, style: Style["name"]) => {
+      return await getRegistryItem(name, style)
+   },
+)
+
+export const dynamicParams = false
+
+export async function generateMetadata({
+   params,
+}: {
+   params: {
+      style: Style["name"]
+      name: string
+   }
+}): Promise<Metadata> {
+   const { name, style } = params
+   const item = await getCachedRegistryItem(name, style)
+
+   if (!item) {
+      return {}
+   }
+
+   const title = item.name
+   const description = item.description
+
+   return {
+      title: `${item.name}${item.description ? ` - ${item.description}` : ""}`,
+      description,
+      openGraph: {
+         title,
+         description,
+         type: "article",
+         url: absoluteUrl(`/blocks/${style}/${item.name}`),
+         images: [
+            {
+               url: siteConfig.ogImage,
+               width: 1200,
+               height: 630,
+               alt: siteConfig.name,
+            },
+         ],
+      },
+      twitter: {
+         card: "summary_large_image",
+         title,
+         description,
+         images: [siteConfig.ogImage],
+         creator: "@nyxb",
+      },
+   }
+}
+
+export async function generateStaticParams() {
+   const blockIds = await getAllBlockIds()
+   return styles.flatMap((style) =>
+      blockIds.map((name) => ({
+         style: style.name,
+         name,
+      })),
+   )
+}
+
+export default async function BlockPage({
+   params,
+}: {
+   params: {
+      style: Style["name"]
+      name: string
+   }
+}) {
+   const { name, style } = params
+   const item = await getCachedRegistryItem(name, style)
+   const Component = getRegistryComponent(name, style)
+
+   if (!item || !Component) {
+      return notFound()
+   }
+
+   return (
+      <>
+         <div
+            className={ny("themes-wrapper bg-background", item.meta?.container)}
+         >
+            <Component />
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 50172764..4dd2898b 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,22 +1,22 @@
-import type { Metadata } from 'next'
-import { ViewTransitions } from 'next-view-transitions'
-import { ThemeProvider } from '~/components/theme-provider'
-import { Toaster } from '~/components/ui/sonner'
-import { TooltipProvider } from '~/components/ui/tooltip'
-import { fontSans } from '~/lib/fonts'
-import { absoluteUrl, constructMetadata, ny } from '~/lib/utils'
-import { Toaster as DefaultToaster } from '~/registry/default/ui/toaster'
-import { Toaster as NewYorkSonner } from '~/registry/miami/ui/sonner'
-import { Toaster as NewYorkToaster } from '~/registry/miami/ui/toaster'
-import { TailwindIndicator } from '~/components/tailwind-indicator'
-import { ThemeSwitcher } from '~/components/theme-switcher'
-import '~/styles/globals.css'
+import type { Metadata } from "next"
+import { ViewTransitions } from "next-view-transitions"
+import { TailwindIndicator } from "~/components/tailwind-indicator"
+import { ThemeProvider } from "~/components/theme-provider"
+import { ThemeSwitcher } from "~/components/theme-switcher"
+import { Toaster } from "~/components/ui/sonner"
+import { TooltipProvider } from "~/components/ui/tooltip"
+import { fontSans } from "~/lib/fonts"
+import { absoluteUrl, constructMetadata, ny } from "~/lib/utils"
+import { Toaster as DefaultToaster } from "~/registry/default/ui/toaster"
+import { Toaster as NewYorkSonner } from "~/registry/miami/ui/sonner"
+import { Toaster as NewYorkToaster } from "~/registry/miami/ui/toaster"
+import "~/styles/globals.css"
 
 export const metadata: Metadata = constructMetadata({
-   title: 'Nyxb UI',
+   title: "Nyxb UI",
    description:
-    'Beautiful UI components and templates to make your landing page look stunning.',
-   image: absoluteUrl('/api/og'),
+      "Beautiful UI components and templates to make your landing page look stunning.",
+   image: absoluteUrl("/api/og"),
 })
 
 export default function RootLayout({
@@ -30,7 +30,7 @@ export default function RootLayout({
             <head />
             <body
                className={ny(
-                  'bg-background relative flex min-h-screen w-full flex-col justify-center overflow-x-hidden scroll-smooth font-sans antialiased',
+                  "bg-background relative flex min-h-screen w-full flex-col justify-center overflow-x-hidden scroll-smooth font-sans antialiased",
                   fontSans.variable,
                )}
             >
diff --git a/apps/web/components/block-chunk.tsx b/apps/web/components/block-chunk.tsx
deleted file mode 100644
index b52fe7f0..00000000
--- a/apps/web/components/block-chunk.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { AnimatePresence, motion } from 'framer-motion'
-
-import { ny } from '~/lib/utils'
-import { useLiftMode } from '~/hooks/use-lift-mode'
-import { BlockCopyButton } from '~/components/block-copy-button'
-import type { Block } from '~/registry/schema'
-import type { BlockChunk } from '~/registry/schema'
-
-export function BlockChunk({
-   block,
-   chunk,
-   children,
-   ...props
-}: React.PropsWithChildren<{ block: Block, chunk?: BlockChunk }>) {
-   const { isLiftMode } = useLiftMode(block.name)
-
-   if (!chunk) {
-      return null
-   }
-
-   return (
-      <AnimatePresence>
-         {isLiftMode && (
-            <motion.div
-               key={chunk.name}
-               x-chunk-container={chunk.name}
-               initial={{ opacity: 0 }}
-               animate={{ opacity: 1 }}
-               exit={{ opacity: 0, transition: { ease: 'easeOut', duration: 0.2 } }}
-               transition={{ ease: 'easeIn', duration: 0.2 }}
-               className={ny(
-                  'bg-background group rounded-xl shadow-xl transition',
-                  chunk.container?.className,
-               )}
-               {...props}
-            >
-               <div className="relative z-30">{children}</div>
-               {chunk.code && (
-                  <div className="absolute inset-x-0 top-0 z-30 flex px-4 py-3 opacity-0 transition-all duration-200 ease-in group-hover:-translate-y-12 group-hover:opacity-100">
-                     <div className="flex w-full items-center justify-end gap-2">
-                        <BlockCopyButton
-                           event="copy_chunk_code"
-                           name={chunk.name}
-                           code={chunk.code}
-                        />
-                     </div>
-                  </div>
-               )}
-            </motion.div>
-         )}
-      </AnimatePresence>
-   )
-}
diff --git a/apps/web/components/block-display.tsx b/apps/web/components/block-display.tsx
index 3359051b..3eecaf17 100644
--- a/apps/web/components/block-display.tsx
+++ b/apps/web/components/block-display.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react'
-import type { z } from 'zod'
+import type { registryItemFileSchema } from "nyxb/registry"
+import * as React from "react"
+import type { z } from "zod"
 
-import { highlightCode } from '~/lib/highlight-code'
+import { BlockViewer } from "~/components/block-viewer"
+import { highlightCode } from "~/lib/highlight-code"
 import {
    createFileTreeForRegistryItemFiles,
    getRegistryItem,
-} from '~/lib/registry'
-import { BlockViewer } from '~/components/block-viewer'
-import type { registryItemFileSchema } from '~/registry/schema'
+} from "~/lib/registry"
 
 export async function BlockDisplay({ name }: { name: string }) {
    const item = await getCachedRegistryItem(name)
@@ -22,7 +22,11 @@ export async function BlockDisplay({ name }: { name: string }) {
    ])
 
    return (
-      <BlockViewer item={item} tree={tree} highlightedFiles={highlightedFiles} />
+      <BlockViewer
+         item={item}
+         tree={tree}
+         highlightedFiles={highlightedFiles}
+      />
    )
 }
 
@@ -31,7 +35,7 @@ const getCachedRegistryItem = React.cache(async (name: string) => {
 })
 
 const getCachedFileTree = React.cache(
-   async (files: Array<{ path: string, target?: string }>) => {
+   async (files: Array<{ path: string; target?: string }>) => {
       if (!files) {
          return null
       }
@@ -43,9 +47,9 @@ const getCachedFileTree = React.cache(
 const getCachedHighlightedFiles = React.cache(
    async (files: z.infer<typeof registryItemFileSchema>[]) => {
       return await Promise.all(
-         files.map(async file => ({
+         files.map(async (file) => ({
             ...file,
-            highlightedContent: await highlightCode(file.content ?? ''),
+            highlightedContent: await highlightCode(file.content ?? ""),
          })),
       )
    },
diff --git a/apps/web/components/block-preview.tsx b/apps/web/components/block-preview.tsx
deleted file mode 100644
index 8a644223..00000000
--- a/apps/web/components/block-preview.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import Image from 'next/image'
-import type { ImperativePanelHandle } from 'react-resizable-panels'
-
-import { BlockToolbar } from '~/components/block-toolbar'
-import {
-   ResizableHandle,
-   ResizablePanel,
-   ResizablePanelGroup,
-} from '~/registry/miami/ui/resizable'
-import type { Block } from '~/registry/schema'
-
-export function BlockPreview({
-   block,
-}: {
-   block: Pick<Block, 'name' | 'style' | 'description' | 'container'>
-}) {
-   const ref = React.useRef<ImperativePanelHandle>(null)
-
-   return (
-      <div
-         id={block.name}
-         className="relative grid w-full scroll-m-20 gap-4"
-         style={
-            {
-               '--container-height': block.container?.height,
-            } as React.CSSProperties
-         }
-      >
-         <BlockToolbar block={block} resizablePanelRef={ref} />
-         <ResizablePanelGroup direction="horizontal" className="relative z-10">
-            <ResizablePanel
-               ref={ref}
-               className="bg-background relative aspect-[4/2.5] rounded-lg border md:aspect-auto"
-               defaultSize={100}
-               minSize={30}
-            >
-               <Image
-                  src={`/images/blocks/${block.name}.png`}
-                  alt={block.name}
-                  data-block={block.name}
-                  width={1440}
-                  height={900}
-                  className="bg-background absolute left-0 top-0 z-20 w-[970px] max-w-none data-[block=sidebar-10]:left-auto data-[block=sidebar-10]:right-0 data-[block=sidebar-11]:-top-1/3 data-[block=sidebar-14]:left-auto data-[block=sidebar-14]:right-0 data-[block=login-01]:max-w-full data-[block=sidebar-13]:max-w-full data-[block=sidebar-15]:max-w-full sm:w-[1280px] md:hidden dark:hidden md:dark:hidden"
-               />
-               <Image
-                  src={`/images/blocks/${block.name}-dark.png`}
-                  alt={block.name}
-                  data-block={block.name}
-                  width={1440}
-                  height={900}
-                  className="bg-background absolute left-0 top-0 z-20 hidden w-[970px] max-w-none data-[block=sidebar-10]:left-auto data-[block=sidebar-10]:right-0 data-[block=sidebar-11]:-top-1/3 data-[block=sidebar-14]:left-auto data-[block=sidebar-14]:right-0 data-[block=login-01]:max-w-full data-[block=sidebar-13]:max-w-full data-[block=sidebar-15]:max-w-full sm:w-[1280px] md:hidden dark:block md:dark:hidden"
-               />
-               <iframe
-                  src={`/blocks/${block.style}/${block.name}`}
-                  height={block.container?.height ?? 450}
-                  className="chunk-mode bg-background relative z-20 hidden w-full md:block"
-               />
-            </ResizablePanel>
-            <ResizableHandle className="after:bg-border relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-x-px after:-translate-y-1/2 after:rounded-full after:transition-all after:hover:h-10 sm:block" />
-            <ResizablePanel defaultSize={0} minSize={0} />
-         </ResizablePanelGroup>
-      </div>
-   )
-}
diff --git a/apps/web/components/block-toolbar.tsx b/apps/web/components/block-toolbar.tsx
deleted file mode 100644
index a8b28d7a..00000000
--- a/apps/web/components/block-toolbar.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import Link from 'next/link'
-import {
-   Check,
-   Fullscreen,
-   Monitor,
-   Smartphone,
-   Tablet,
-   Terminal,
-} from 'lucide-react'
-import type { ImperativePanelHandle } from 'react-resizable-panels'
-
-import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard'
-import { Button } from '~/registry/miami/ui/button'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/miami/ui/toggle-group'
-import type { Block } from '~/registry/schema'
-
-export function BlockToolbar({
-   block,
-   resizablePanelRef,
-}: {
-   block: Pick<Block, 'name' | 'style' | 'description' | 'container'>
-   resizablePanelRef: React.RefObject<ImperativePanelHandle>
-}) {
-   const { copyToClipboard, isCopied } = useCopyToClipboard()
-
-   return (
-      <div className="flex items-center gap-2 md:gap-4">
-         <Button asChild variant="link" className="whitespace-normal px-1 md:px-2">
-            <a href={`#${block.name}`}>{block.description}</a>
-         </Button>
-         <div className="ml-auto hidden items-center gap-2 md:flex md:pr-[14px]">
-            <Button
-               variant="ghost"
-               className="bg-muted h-7 rounded-md border shadow-none"
-               size="sm"
-               onClick={() => {
-                  copyToClipboard(`npx nyxb@latest add ${block.name}`)
-               }}
-            >
-               {isCopied ? <Check /> : <Terminal />}
-               npx nyxb add
-               {' '}
-               {block.name}
-            </Button>
-            <Separator orientation="vertical" className="mx-2 hidden h-4 md:flex" />
-            <div className="hidden h-7 items-center gap-1.5 rounded-md border p-[2px] shadow-none md:flex">
-               <ToggleGroup
-                  type="single"
-                  defaultValue="100"
-                  onValueChange={(value) => {
-                     if (resizablePanelRef.current) {
-                        resizablePanelRef.current.resize(Number.parseInt(value))
-                     }
-                  }}
-               >
-                  <ToggleGroupItem
-                     value="100"
-                     className="size-[22px] rounded-sm p-0"
-                     title="Desktop"
-                  >
-                     <Monitor className="size-3.5" />
-                  </ToggleGroupItem>
-                  <ToggleGroupItem
-                     value="60"
-                     className="size-[22px] rounded-sm p-0"
-                     title="Tablet"
-                  >
-                     <Tablet className="size-3.5" />
-                  </ToggleGroupItem>
-                  <ToggleGroupItem
-                     value="30"
-                     className="size-[22px] rounded-sm p-0"
-                     title="Mobile"
-                  >
-                     <Smartphone className="size-3.5" />
-                  </ToggleGroupItem>
-                  <Separator orientation="vertical" className="h-4" />
-                  <Button
-                     size="icon"
-                     variant="ghost"
-                     className="size-[22px] rounded-sm p-0"
-                     asChild
-                     title="Open in New Tab"
-                  >
-                     <Link
-                        href={`/blocks/${block.style}/${block.name}`}
-                        target="_blank"
-                     >
-                        <span className="sr-only">Open in New Tab</span>
-                        <Fullscreen className="size-3.5" />
-                     </Link>
-                  </Button>
-               </ToggleGroup>
-            </div>
-            <Separator orientation="vertical" className="mx-2 hidden h-4 md:flex" />
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/components/block-viewer.tsx b/apps/web/components/block-viewer.tsx
index b6e494d5..a3b4a7d6 100644
--- a/apps/web/components/block-viewer.tsx
+++ b/apps/web/components/block-viewer.tsx
@@ -1,8 +1,5 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import Image from 'next/image'
-import Link from 'next/link'
 import {
    Check,
    ChevronRight,
@@ -14,25 +11,33 @@ import {
    Smartphone,
    Tablet,
    Terminal,
-} from 'lucide-react'
-import type { ImperativePanelHandle } from 'react-resizable-panels'
-import type { z } from 'zod'
+} from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import type { registryItemFileSchema, registryItemSchema } from "nyxb/registry"
+import * as React from "react"
+import type { ImperativePanelHandle } from "react-resizable-panels"
+import type { z } from "zod"
 
-import { trackEvent } from '~/lib/events'
-import type { FileTree, createFileTreeForRegistryItemFiles } from '~/lib/registry'
-import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard'
-import { Button } from '~/registry/miami/ui/button'
+import { V0Button } from "~/components/v0-button"
+import { useCopyToClipboard } from "~/hooks/use-copy-to-clipboard"
+import { trackEvent } from "~/lib/events"
+import type {
+   FileTree,
+   createFileTreeForRegistryItemFiles,
+} from "~/lib/registry"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
+} from "~/registry/miami/ui/collapsible"
 import {
    ResizableHandle,
    ResizablePanel,
    ResizablePanelGroup,
-} from '~/registry/miami/ui/resizable'
-import { Separator } from '~/registry/miami/ui/separator'
+} from "~/registry/miami/ui/resizable"
+import { Separator } from "~/registry/miami/ui/separator"
 import {
    Sidebar,
    SidebarGroup,
@@ -43,29 +48,25 @@ import {
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
-import { Tabs, TabsList, TabsTrigger } from '~/registry/miami/ui/tabs'
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/miami/ui/toggle-group'
-import type { Style } from '~/registry/registry-styles'
-import type { registryEntrySchema, registryItemFileSchema } from '~/registry/schema'
+} from "~/registry/miami/ui/sidebar"
+import { Tabs, TabsList, TabsTrigger } from "~/registry/miami/ui/tabs"
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
+import type { Style } from "~/registry/registry-styles"
 
-interface BlockViewerContext {
-   item: z.infer<typeof registryEntrySchema>
-   view: 'code' | 'preview'
-   setView: (view: 'code' | 'preview') => void
-   style?: Style['name']
-   setStyle: (style: Style['name']) => void
+type BlockViewerContext = {
+   item: z.infer<typeof registryItemSchema>
+   view: "code" | "preview"
+   setView: (view: "code" | "preview") => void
+   style?: Style["name"]
+   setStyle: (style: Style["name"]) => void
    activeFile: string | null
    setActiveFile: (file: string) => void
    resizablePanelRef: React.RefObject<ImperativePanelHandle> | null
    tree: ReturnType<typeof createFileTreeForRegistryItemFiles> | null
    highlightedFiles:
       | (z.infer<typeof registryItemFileSchema> & {
-         highlightedContent: string
-      })[]
+           highlightedContent: string
+        })[]
       | null
 }
 
@@ -74,7 +75,9 @@ const BlockViewerContext = React.createContext<BlockViewerContext | null>(null)
 function useBlockViewer() {
    const context = React.useContext(BlockViewerContext)
    if (!context) {
-      throw new Error('useBlockViewer must be used within a BlockViewerProvider.')
+      throw new Error(
+         "useBlockViewer must be used within a BlockViewerProvider.",
+      )
    }
    return context
 }
@@ -84,14 +87,14 @@ function BlockViewerProvider({
    tree,
    highlightedFiles,
    children,
-}: Pick<BlockViewerContext, 'item' | 'tree' | 'highlightedFiles'> & {
+}: Pick<BlockViewerContext, "item" | "tree" | "highlightedFiles"> & {
    children: React.ReactNode
 }) {
-   const [view, setView] = React.useState<BlockViewerContext['view']>('preview')
-   const [style, setStyle]
-    = React.useState<BlockViewerContext['style']>('miami')
+   const [view, setView] = React.useState<BlockViewerContext["view"]>("preview")
+   const [style, setStyle] =
+      React.useState<BlockViewerContext["style"]>("miami")
    const [activeFile, setActiveFile] = React.useState<
-      BlockViewerContext['activeFile']
+      BlockViewerContext["activeFile"]
    >(highlightedFiles?.[0].target ?? null)
    const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
 
@@ -116,7 +119,7 @@ function BlockViewerProvider({
             className="group/block-view-wrapper flex min-w-0 flex-col items-stretch gap-4"
             style={
                {
-                  '--height': item.meta?.iframeHeight ?? 450,
+                  "--height": item.meta?.iframeHeight ?? "930px",
                } as React.CSSProperties
             }
          >
@@ -134,7 +137,7 @@ function BlockViewerToolbar() {
       <div className="flex w-full items-center gap-2 md:pr-[14px]">
          <Tabs
             defaultValue="preview"
-            onValueChange={value => setView(value as 'preview' | 'code')}
+            onValueChange={(value) => setView(value as "preview" | "code")}
             className="hidden lg:flex"
          >
             <TabsList className="h-7 items-center rounded-md p-0 px-[calc(theme(spacing.1)_-_2px)] py-[theme(spacing.1)]">
@@ -152,29 +155,17 @@ function BlockViewerToolbar() {
                </TabsTrigger>
             </TabsList>
          </Tabs>
-         <Separator orientation="vertical" className="mx-2 hidden h-4 lg:flex" />
+         <Separator
+            orientation="vertical"
+            className="mx-2 hidden h-4 lg:flex"
+         />
          <a
             href={`#${item.name}`}
             className="text-sm font-medium underline-offset-2 hover:underline"
          >
             {item.description}
          </a>
-         <div className="ml-auto flex items-center gap-2">
-            <Button
-               variant="ghost"
-               className="hidden size-7 rounded-md border bg-transparent shadow-none md:flex lg:w-auto"
-               size="sm"
-               onClick={() => {
-                  copyToClipboard(`npx shadcn@latest add ${item.name}`)
-               }}
-            >
-               {isCopied ? <Check /> : <Terminal />}
-               <span className="hidden lg:inline">
-                  npx shadcn add
-                  {item.name}
-               </span>
-            </Button>
-            <Separator orientation="vertical" className="mx-2 hidden h-4 md:flex" />
+         <div className="ml-auto hidden items-center gap-2 md:flex">
             <div className="hidden h-7 items-center gap-1.5 rounded-md border p-[2px] shadow-none lg:flex">
                <ToggleGroup
                   type="single"
@@ -187,41 +178,71 @@ function BlockViewerToolbar() {
                >
                   <ToggleGroupItem
                      value="100"
-                     className="size-[22px] rounded-sm p-0"
+                     className="h-[22px] w-[22px] min-w-0 rounded-sm p-0"
                      title="Desktop"
                   >
-                     <Monitor className="size-3.5" />
+                     <Monitor className="h-3.5 w-3.5" />
                   </ToggleGroupItem>
                   <ToggleGroupItem
                      value="60"
-                     className="size-[22px] rounded-sm p-0"
+                     className="h-[22px] w-[22px] min-w-0 rounded-sm p-0"
                      title="Tablet"
                   >
-                     <Tablet className="size-3.5" />
+                     <Tablet className="h-3.5 w-3.5" />
                   </ToggleGroupItem>
                   <ToggleGroupItem
                      value="30"
-                     className="size-[22px] rounded-sm p-0"
+                     className="h-[22px] w-[22px] min-w-0 rounded-sm p-0"
                      title="Mobile"
                   >
-                     <Smartphone className="size-3.5" />
+                     <Smartphone className="h-3.5 w-3.5" />
                   </ToggleGroupItem>
                   <Separator orientation="vertical" className="h-4" />
                   <Button
                      size="icon"
                      variant="ghost"
-                     className="size-[22px] rounded-sm p-0"
+                     className="h-[22px] w-[22px] rounded-sm p-0"
                      asChild
                      title="Open in New Tab"
                   >
-                     <Link href={`/blocks/${style}/${item.name}`} target="_blank">
+                     <Link
+                        href={`/view/styles/${style}/${item.name}`}
+                        target="_blank"
+                     >
                         <span className="sr-only">Open in New Tab</span>
-                        <Fullscreen className="size-3.5" />
+                        <Fullscreen className="h-3.5 w-3.5" />
                      </Link>
                   </Button>
                </ToggleGroup>
             </div>
-            <Separator orientation="vertical" className="mx-2 hidden h-4 xl:flex" />
+            <Separator
+               orientation="vertical"
+               className="mx-1 hidden h-4 md:flex"
+            />
+            <div className="flex h-7 items-center gap-1 rounded-md border p-[2px]">
+               <Button
+                  variant="ghost"
+                  className="hidden h-[22px] w-auto gap-1 rounded-sm px-2 md:flex lg:w-auto"
+                  size="sm"
+                  onClick={() => {
+                     copyToClipboard(`npx nyxb@latest add ${item.name}`)
+                  }}
+               >
+                  {isCopied ? <Check /> : <Terminal />}
+                  <span className="hidden lg:inline">
+                     npx nyxb add {item.name}
+                  </span>
+               </Button>
+            </div>
+            <Separator
+               orientation="vertical"
+               className="mx-1 hidden h-4 xl:flex"
+            />
+            <V0Button
+               className="hidden shadow-none sm:flex"
+               id={`v0-button-${item.name}`}
+               name={`${item.name}`}
+            />
          </div>
       </div>
    )
@@ -231,38 +252,41 @@ function BlockViewerView() {
    const { item, style, resizablePanelRef } = useBlockViewer()
 
    return (
-      <div className="h-[--height] group-data-[view=code]/block-view-wrapper:hidden">
+      <div className="group-data-[view=code]/block-view-wrapper:hidden md:h-[--height]">
          <div className="grid w-full gap-4">
-            <ResizablePanelGroup direction="horizontal" className="relative z-10">
+            <ResizablePanelGroup
+               direction="horizontal"
+               className="relative z-10"
+            >
                <ResizablePanel
                   ref={resizablePanelRef}
-                  className="bg-background relative aspect-[4/2.5] rounded-xl border md:aspect-auto"
+                  className="relative aspect-[4/2.5] rounded-xl border bg-background md:aspect-auto"
                   defaultSize={100}
                   minSize={30}
                >
                   <Image
-                     src={`/images/blocks/${item.name}.png`}
+                     src={`/r/styles/${style}/${item.name}-light.png`}
                      alt={item.name}
                      data-block={item.name}
                      width={1440}
                      height={900}
-                     className="bg-background absolute left-0 top-0 z-20 w-[970px] max-w-none data-[block=sidebar-10]:left-auto data-[block=sidebar-10]:right-0 data-[block=sidebar-11]:-top-1/3 data-[block=sidebar-14]:left-auto data-[block=sidebar-14]:right-0 data-[block=login-01]:max-w-full data-[block=sidebar-13]:max-w-full data-[block=sidebar-15]:max-w-full sm:w-[1280px] md:hidden dark:hidden md:dark:hidden"
+                     className="object-cover dark:hidden md:hidden md:dark:hidden"
                   />
                   <Image
-                     src={`/images/blocks/${item.name}-dark.png`}
+                     src={`/r/styles/${style}/${item.name}-dark.png`}
                      alt={item.name}
                      data-block={item.name}
                      width={1440}
                      height={900}
-                     className="bg-background absolute left-0 top-0 z-20 hidden w-[970px] max-w-none data-[block=sidebar-10]:left-auto data-[block=sidebar-10]:right-0 data-[block=sidebar-11]:-top-1/3 data-[block=sidebar-14]:left-auto data-[block=sidebar-14]:right-0 data-[block=login-01]:max-w-full data-[block=sidebar-13]:max-w-full data-[block=sidebar-15]:max-w-full sm:w-[1280px] md:hidden dark:block md:dark:hidden"
+                     className="hidden object-cover dark:block md:hidden md:dark:hidden"
                   />
                   <iframe
-                     src={`/blocks/${style}/${item.name}`}
-                     height={item.meta?.iframeHeight ?? 450}
-                     className="chunk-mode bg-background relative z-20 hidden w-full md:block"
+                     src={`/view/styles/${style}/${item.name}`}
+                     height={item.meta?.iframeHeight ?? 930}
+                     className="relative z-20 hidden w-full bg-background md:block"
                   />
                </ResizablePanel>
-               <ResizableHandle className="after:bg-border relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-x-px after:-translate-y-1/2 after:rounded-full after:transition-all after:hover:h-10 md:block" />
+               <ResizableHandle className="relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 md:block" />
                <ResizablePanel defaultSize={0} minSize={0} />
             </ResizablePanelGroup>
          </div>
@@ -274,7 +298,7 @@ function BlockViewerCode() {
    const { activeFile, highlightedFiles } = useBlockViewer()
 
    const file = React.useMemo(() => {
-      return highlightedFiles?.find(file => file.target === activeFile)
+      return highlightedFiles?.find((file) => file.target === activeFile)
    }, [highlightedFiles, activeFile])
 
    if (!file) {
@@ -282,7 +306,7 @@ function BlockViewerCode() {
    }
 
    return (
-      <div className="mr-[14px] flex h-[--height] overflow-hidden rounded-xl bg-zinc-950 text-white group-data-[view=preview]/block-view-wrapper:hidden">
+      <div className="flex overflow-hidden rounded-xl bg-zinc-950 text-white group-data-[view=preview]/block-view-wrapper:hidden md:h-[--height]">
          <div className="w-[280px]">
             <BlockViewerFileTree />
          </div>
@@ -297,8 +321,10 @@ function BlockViewerCode() {
             <div
                key={file?.path}
                data-rehype-pretty-code-fragment
-               dangerouslySetInnerHTML={{ __html: file?.highlightedContent ?? '' }}
-               className="relative flex-1 overflow-hidden after:absolute after:inset-y-0 after:left-0 after:w-10 after:bg-zinc-950 [&_.line:before]:sticky [&_.line:before]:left-2 [&_.line:before]:z-10 [&_.line:before]:-translate-y-px [&_.line:before]:pr-1 [&_pre]:h-[--height] [&_pre]:overflow-auto [&_pre]:!bg-transparent [&_pre]:pb-20 [&_pre]:pt-4 [&_pre]:font-mono [&_pre]:text-sm [&_pre]:leading-relaxed"
+               dangerouslySetInnerHTML={{
+                  __html: file?.highlightedContent ?? "",
+               }}
+               className="relative flex-1 overflow-hidden [&_.line:before]:sticky [&_.line:before]:left-2 [&_.line:before]:z-10 [&_.line:before]:translate-y-[-1px] [&_.line:before]:pr-1 [&_pre]:h-[--height] [&_pre]:overflow-auto [&_pre]:!bg-transparent [&_pre]:pb-20 [&_pre]:pt-4 [&_pre]:pl-6 [&_pre]:font-mono [&_pre]:text-sm [&_pre]:leading-relaxed"
             />
          </div>
       </div>
@@ -335,7 +361,7 @@ export function BlockViewerFileTree() {
    )
 }
 
-function Tree({ item, index }: { item: FileTree, index: number }) {
+function Tree({ item, index }: { item: FileTree; index: number }) {
    const { activeFile, setActiveFile } = useBlockViewer()
 
    if (!item.children) {
@@ -348,12 +374,12 @@ function Tree({ item, index }: { item: FileTree, index: number }) {
                data-index={index}
                style={
                   {
-                     '--index': `${index * (index === 2 ? 1.2 : 1.3)}rem`,
+                     "--index": `${index * (index === 2 ? 1.2 : 1.3)}rem`,
                   } as React.CSSProperties
                }
             >
                <ChevronRight className="invisible" />
-               <File className="size-4" />
+               <File className="h-4 w-4" />
                {item.name}
             </SidebarMenuButton>
          </SidebarMenuItem>
@@ -371,12 +397,12 @@ function Tree({ item, index }: { item: FileTree, index: number }) {
                   className="whitespace-nowrap rounded-none pl-[--index] hover:bg-zinc-700 hover:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white data-[state=open]:hover:bg-zinc-700 data-[state=open]:hover:text-white"
                   style={
                      {
-                        '--index': `${index * (index === 1 ? 1 : 1.2)}rem`,
+                        "--index": `${index * (index === 1 ? 1 : 1.2)}rem`,
                      } as React.CSSProperties
                   }
                >
-                  <ChevronRight className="size-4 transition-transform" />
-                  <Folder className="size-4" />
+                  <ChevronRight className="h-4 w-4 transition-transform" />
+                  <Folder className="h-4 w-4" />
                   {item.name}
                </SidebarMenuButton>
             </CollapsibleTrigger>
@@ -397,7 +423,7 @@ function BlockCopyCodeButton() {
    const { copyToClipboard, isCopied } = useCopyToClipboard()
 
    const file = React.useMemo(() => {
-      return item.files?.find(file => file.target === activeFile)
+      return item.files?.find((file) => file.target === activeFile)
    }, [activeFile, item.files])
 
    const content = file?.content
@@ -411,14 +437,14 @@ function BlockCopyCodeButton() {
          onClick={() => {
             copyToClipboard(content)
             trackEvent({
-               name: 'copy_block_code',
+               name: "copy_block_code",
                properties: {
                   name: item.name,
                   file: file.path,
                },
             })
          }}
-         className="size-7 shrink-0 rounded-lg p-0 hover:bg-zinc-700 hover:text-white focus:bg-zinc-700 focus:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white [&>svg]:size-3"
+         className="h-7 w-7 shrink-0 rounded-lg p-0 hover:bg-zinc-700 hover:text-white focus:bg-zinc-700 focus:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white [&>svg]:size-3"
          variant="ghost"
       >
          {isCopied ? <Check /> : <Clipboard />}
@@ -431,7 +457,7 @@ function BlockViewer({
    tree,
    highlightedFiles,
    ...props
-}: Pick<BlockViewerContext, 'item' | 'tree' | 'highlightedFiles'>) {
+}: Pick<BlockViewerContext, "item" | "tree" | "highlightedFiles">) {
    return (
       <BlockViewerProvider
          item={item}
diff --git a/apps/web/components/blocks-nav.tsx b/apps/web/components/blocks-nav.tsx
new file mode 100644
index 00000000..7d0bddf0
--- /dev/null
+++ b/apps/web/components/blocks-nav.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import { ScrollArea, ScrollBar } from "~/registry/miami/ui/scroll-area"
+import { registryCategories } from "~/registry/registry-categories"
+
+export function BlocksNav() {
+   const pathname = usePathname()
+
+   return (
+      <div className="relative overflow-hidden">
+         <ScrollArea className="max-w-none">
+            <div className="flex items-center">
+               <BlocksNavLink
+                  category={{ name: "Featured", slug: "", hidden: false }}
+                  isActive={pathname === "/blocks"}
+               />
+               {registryCategories.map((category) => (
+                  <BlocksNavLink
+                     key={category.slug}
+                     category={category}
+                     isActive={pathname === `/blocks/${category.slug}`}
+                  />
+               ))}
+            </div>
+            <ScrollBar orientation="horizontal" className="invisible" />
+         </ScrollArea>
+      </div>
+   )
+}
+
+function BlocksNavLink({
+   category,
+   isActive,
+}: {
+   category: (typeof registryCategories)[number]
+   isActive: boolean
+}) {
+   if (category.hidden) {
+      return null
+   }
+
+   return (
+      <Link
+         href={`/blocks/${category.slug}`}
+         key={category.slug}
+         className="flex h-7 shrink-0 items-center justify-center whitespace-nowrap rounded-full px-4 text-center text-sm font-medium text-muted-foreground transition-colors hover:text-foreground data-[active=true]:bg-muted data-[active=true]:text-foreground"
+         data-active={isActive}
+      >
+         {category.name}
+      </Link>
+   )
+}
diff --git a/apps/web/components/cards/activity-goal.tsx b/apps/web/components/cards/activity-goal.tsx
new file mode 100644
index 00000000..63f42dc6
--- /dev/null
+++ b/apps/web/components/cards/activity-goal.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import { Minus, Plus } from "lucide-react"
+import * as React from "react"
+import { Bar, BarChart } from "recharts"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { type ChartConfig, ChartContainer } from "~/registry/miami/ui/chart"
+
+const data = [
+   {
+      goal: 400,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 239,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 349,
+   },
+]
+
+const chartConfig = {
+   goal: {
+      label: "Goal",
+      color: "hsl(var(--primary))",
+   },
+} satisfies ChartConfig
+
+export function CardsActivityGoal() {
+   const [goal, setGoal] = React.useState(350)
+
+   function onClick(adjustment: number) {
+      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+   }
+
+   return (
+      <Card>
+         <CardHeader className="pb-4">
+            <CardTitle>Move Goal</CardTitle>
+            <CardDescription>Set your daily activity goal.</CardDescription>
+         </CardHeader>
+         <CardContent className="pb-2">
+            <div className="flex items-center justify-center space-x-2">
+               <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-8 w-8 shrink-0 rounded-full"
+                  onClick={() => onClick(-10)}
+                  disabled={goal <= 200}
+               >
+                  <Minus />
+                  <span className="sr-only">Decrease</span>
+               </Button>
+               <div className="flex-1 text-center">
+                  <div className="text-5xl font-bold tracking-tighter">
+                     {goal}
+                  </div>
+                  <div className="text-[0.70rem] uppercase text-muted-foreground">
+                     Calories/day
+                  </div>
+               </div>
+               <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-8 w-8 shrink-0 rounded-full"
+                  onClick={() => onClick(10)}
+                  disabled={goal >= 400}
+               >
+                  <Plus />
+                  <span className="sr-only">Increase</span>
+               </Button>
+            </div>
+            <div className="my-3 h-[60px]">
+               <ChartContainer
+                  config={chartConfig}
+                  className="aspect-auto h-full w-full"
+               >
+                  <BarChart data={data}>
+                     <Bar dataKey="goal" radius={4} fill="var(--color-goal)" />
+                  </BarChart>
+               </ChartContainer>
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">Set Goal</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/components/cards/calendar.tsx b/apps/web/components/cards/calendar.tsx
new file mode 100644
index 00000000..049b1179
--- /dev/null
+++ b/apps/web/components/cards/calendar.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { addDays } from "date-fns"
+
+import { Calendar } from "~/registry/miami/ui/calendar"
+import { Card, CardContent } from "~/registry/miami/ui/card"
+
+const start = new Date(2023, 5, 5)
+
+export function CardsCalendar() {
+   return (
+      <Card className="max-w-[260px]">
+         <CardContent className="p-1">
+            <Calendar
+               numberOfMonths={1}
+               mode="range"
+               defaultMonth={start}
+               selected={{
+                  from: start,
+                  to: addDays(start, 8),
+               }}
+            />
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/components/cards/chat.tsx b/apps/web/components/cards/chat.tsx
new file mode 100644
index 00000000..64b2673f
--- /dev/null
+++ b/apps/web/components/cards/chat.tsx
@@ -0,0 +1,269 @@
+"use client"
+
+import { Check, Plus, Send } from "lucide-react"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardFooter,
+   CardHeader,
+} from "~/registry/miami/ui/card"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/miami/ui/command"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogFooter,
+   DialogHeader,
+   DialogTitle,
+} from "~/registry/miami/ui/dialog"
+import { Input } from "~/registry/miami/ui/input"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/miami/ui/tooltip"
+
+const users = [
+   {
+      name: "Olivia Martin",
+      email: "m@example.com",
+      avatar: "/avatars/01.png",
+   },
+   {
+      name: "Isabella Nguyen",
+      email: "isabella.nguyen@email.com",
+      avatar: "/avatars/03.png",
+   },
+   {
+      name: "Emma Wilson",
+      email: "emma@example.com",
+      avatar: "/avatars/05.png",
+   },
+   {
+      name: "Jackson Lee",
+      email: "lee@example.com",
+      avatar: "/avatars/02.png",
+   },
+   {
+      name: "William Kim",
+      email: "will@email.com",
+      avatar: "/avatars/04.png",
+   },
+] as const
+
+type User = (typeof users)[number]
+
+export function CardsChat() {
+   const [open, setOpen] = React.useState(false)
+   const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
+
+   const [messages, setMessages] = React.useState([
+      {
+         role: "agent",
+         content: "Hi, how can I help you today?",
+      },
+      {
+         role: "user",
+         content: "Hey, I'm having trouble with my account.",
+      },
+      {
+         role: "agent",
+         content: "What seems to be the problem?",
+      },
+      {
+         role: "user",
+         content: "I can't log in.",
+      },
+   ])
+   const [input, setInput] = React.useState("")
+   const inputLength = input.trim().length
+
+   return (
+      <>
+         <Card>
+            <CardHeader className="flex flex-row items-center">
+               <div className="flex items-center space-x-4">
+                  <Avatar>
+                     <AvatarImage src="/avatars/01.png" alt="Image" />
+                     <AvatarFallback>OM</AvatarFallback>
+                  </Avatar>
+                  <div>
+                     <p className="text-sm font-medium leading-none">
+                        Sofia Davis
+                     </p>
+                     <p className="text-sm text-muted-foreground">
+                        m@example.com
+                     </p>
+                  </div>
+               </div>
+               <TooltipProvider delayDuration={0}>
+                  <Tooltip>
+                     <TooltipTrigger asChild>
+                        <Button
+                           size="icon"
+                           variant="outline"
+                           className="ml-auto rounded-full"
+                           onClick={() => setOpen(true)}
+                        >
+                           <Plus />
+                           <span className="sr-only">New message</span>
+                        </Button>
+                     </TooltipTrigger>
+                     <TooltipContent sideOffset={10}>
+                        New message
+                     </TooltipContent>
+                  </Tooltip>
+               </TooltipProvider>
+            </CardHeader>
+            <CardContent>
+               <div className="space-y-4">
+                  {messages.map((message, index) => (
+                     <div
+                        key={index}
+                        className={ny(
+                           "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
+                           message.role === "user"
+                              ? "ml-auto bg-primary text-primary-foreground"
+                              : "bg-muted",
+                        )}
+                     >
+                        {message.content}
+                     </div>
+                  ))}
+               </div>
+            </CardContent>
+            <CardFooter>
+               <form
+                  onSubmit={(event) => {
+                     event.preventDefault()
+                     if (inputLength === 0) return
+                     setMessages([
+                        ...messages,
+                        {
+                           role: "user",
+                           content: input,
+                        },
+                     ])
+                     setInput("")
+                  }}
+                  className="flex w-full items-center space-x-2"
+               >
+                  <Input
+                     id="message"
+                     placeholder="Type your message..."
+                     className="flex-1"
+                     autoComplete="off"
+                     value={input}
+                     onChange={(event) => setInput(event.target.value)}
+                  />
+                  <Button
+                     type="submit"
+                     size="icon"
+                     disabled={inputLength === 0}
+                  >
+                     <Send />
+                     <span className="sr-only">Send</span>
+                  </Button>
+               </form>
+            </CardFooter>
+         </Card>
+         <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent className="gap-0 p-0 outline-none">
+               <DialogHeader className="px-4 pb-4 pt-5">
+                  <DialogTitle>New message</DialogTitle>
+                  <DialogDescription>
+                     Invite a user to this thread. This will create a new group
+                     message.
+                  </DialogDescription>
+               </DialogHeader>
+               <Command className="overflow-hidden rounded-t-none border-t bg-transparent">
+                  <CommandInput placeholder="Search user..." />
+                  <CommandList>
+                     <CommandEmpty>No users found.</CommandEmpty>
+                     <CommandGroup className="p-2">
+                        {users.map((user) => (
+                           <CommandItem
+                              key={user.email}
+                              className="flex items-center px-2"
+                              onSelect={() => {
+                                 if (selectedUsers.includes(user)) {
+                                    return setSelectedUsers(
+                                       selectedUsers.filter(
+                                          (selectedUser) =>
+                                             selectedUser !== user,
+                                       ),
+                                    )
+                                 }
+
+                                 return setSelectedUsers(
+                                    [...users].filter((u) =>
+                                       [...selectedUsers, user].includes(u),
+                                    ),
+                                 )
+                              }}
+                           >
+                              <Avatar>
+                                 <AvatarImage src={user.avatar} alt="Image" />
+                                 <AvatarFallback>{user.name[0]}</AvatarFallback>
+                              </Avatar>
+                              <div className="ml-2">
+                                 <p className="text-sm font-medium leading-none">
+                                    {user.name}
+                                 </p>
+                                 <p className="text-sm text-muted-foreground">
+                                    {user.email}
+                                 </p>
+                              </div>
+                              {selectedUsers.includes(user) ? (
+                                 <Check className="ml-auto flex h-5 w-5 text-primary" />
+                              ) : null}
+                           </CommandItem>
+                        ))}
+                     </CommandGroup>
+                  </CommandList>
+               </Command>
+               <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
+                  {selectedUsers.length > 0 ? (
+                     <div className="flex -space-x-2 overflow-hidden">
+                        {selectedUsers.map((user) => (
+                           <Avatar
+                              key={user.email}
+                              className="inline-block border-2 border-background"
+                           >
+                              <AvatarImage src={user.avatar} />
+                              <AvatarFallback>{user.name[0]}</AvatarFallback>
+                           </Avatar>
+                        ))}
+                     </div>
+                  ) : (
+                     <p className="text-sm text-muted-foreground">
+                        Select users to add to this thread.
+                     </p>
+                  )}
+                  <Button
+                     disabled={selectedUsers.length < 2}
+                     onClick={() => {
+                        setOpen(false)
+                     }}
+                  >
+                     Continue
+                  </Button>
+               </DialogFooter>
+            </DialogContent>
+         </Dialog>
+      </>
+   )
+}
diff --git a/apps/web/components/cards/cookie-settings.tsx b/apps/web/components/cards/cookie-settings.tsx
new file mode 100644
index 00000000..6467c6cc
--- /dev/null
+++ b/apps/web/components/cards/cookie-settings.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Label } from "~/registry/miami/ui/label"
+import { Switch } from "~/registry/miami/ui/switch"
+
+export function CardsCookieSettings() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Cookie Settings</CardTitle>
+            <CardDescription>Manage your cookie settings here.</CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-6">
+            <div className="flex items-center justify-between space-x-4">
+               <Label htmlFor="necessary" className="flex flex-col space-y-1">
+                  <span>Strictly Necessary</span>
+                  <span className="text-xs font-normal leading-snug text-muted-foreground">
+                     These cookies are essential in order to use the website and
+                     use its features.
+                  </span>
+               </Label>
+               <Switch id="necessary" defaultChecked aria-label="Necessary" />
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+               <Label htmlFor="functional" className="flex flex-col space-y-1">
+                  <span>Functional Cookies</span>
+                  <span className="text-xs font-normal leading-snug text-muted-foreground">
+                     These cookies allow the website to provide personalized
+                     functionality.
+                  </span>
+               </Label>
+               <Switch id="functional" aria-label="Functional" />
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+               <Label htmlFor="performance" className="flex flex-col space-y-1">
+                  <span>Performance Cookies</span>
+                  <span className="text-xs font-normal leading-snug text-muted-foreground">
+                     These cookies help to improve the performance of the
+                     website.
+                  </span>
+               </Label>
+               <Switch id="performance" aria-label="Performance" />
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button variant="outline" className="w-full">
+               Save preferences
+            </Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/components/cards/create-account.tsx b/apps/web/components/cards/create-account.tsx
new file mode 100644
index 00000000..51d49354
--- /dev/null
+++ b/apps/web/components/cards/create-account.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import { Icons } from "~/components/icons"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function CardsCreateAccount() {
+   return (
+      <Card>
+         <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl">Create an account</CardTitle>
+            <CardDescription>
+               Enter your email below to create your account
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-4">
+            <div className="grid grid-cols-2 gap-6">
+               <Button variant="outline">
+                  <Icons.gitHub />
+                  GitHub
+               </Button>
+               <Button variant="outline">
+                  <Icons.google />
+                  Google
+               </Button>
+            </div>
+            <div className="relative">
+               <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t" />
+               </div>
+               <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-card px-2 text-muted-foreground">
+                     Or continue with
+                  </span>
+               </div>
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor="email">Email</Label>
+               <Input id="email" type="email" placeholder="m@example.com" />
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor="password">Password</Label>
+               <Input id="password" type="password" />
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">Create account</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/components/cards/data-table.tsx b/apps/web/components/cards/data-table.tsx
new file mode 100644
index 00000000..16848bb8
--- /dev/null
+++ b/apps/web/components/cards/data-table.tsx
@@ -0,0 +1,336 @@
+"use client"
+
+import {
+   type ColumnDef,
+   type ColumnFiltersState,
+   type SortingState,
+   type VisibilityState,
+   flexRender,
+   getCoreRowModel,
+   getFilteredRowModel,
+   getPaginationRowModel,
+   getSortedRowModel,
+   useReactTable,
+} from "@tanstack/react-table"
+import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+import {
+   DropdownMenu,
+   DropdownMenuCheckboxItem,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import {
+   Table,
+   TableBody,
+   TableCell,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/miami/ui/table"
+
+const data: Payment[] = [
+   {
+      id: "m5gr84i9",
+      amount: 316,
+      status: "success",
+      email: "ken99@yahoo.com",
+   },
+   {
+      id: "3u1reuv4",
+      amount: 242,
+      status: "success",
+      email: "Abe45@gmail.com",
+   },
+   {
+      id: "derv1ws0",
+      amount: 837,
+      status: "processing",
+      email: "Monserrat44@gmail.com",
+   },
+   {
+      id: "bhqecj4p",
+      amount: 721,
+      status: "failed",
+      email: "carmella@hotmail.com",
+   },
+]
+
+export type Payment = {
+   id: string
+   amount: number
+   status: "pending" | "processing" | "success" | "failed"
+   email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+   {
+      id: "select",
+      header: ({ table }) => (
+         <Checkbox
+            checked={
+               table.getIsAllPageRowsSelected() ||
+               (table.getIsSomePageRowsSelected() && "indeterminate")
+            }
+            onCheckedChange={(value) =>
+               table.toggleAllPageRowsSelected(!!value)
+            }
+            aria-label="Select all"
+         />
+      ),
+      cell: ({ row }) => (
+         <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+         />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+   },
+   {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ row }) => (
+         <div className="capitalize">{row.getValue("status")}</div>
+      ),
+   },
+   {
+      accessorKey: "email",
+      header: ({ column }) => {
+         return (
+            <Button
+               variant="ghost"
+               onClick={() =>
+                  column.toggleSorting(column.getIsSorted() === "asc")
+               }
+            >
+               Email
+               <ArrowUpDown />
+            </Button>
+         )
+      },
+      cell: ({ row }) => (
+         <div className="lowercase">{row.getValue("email")}</div>
+      ),
+   },
+   {
+      accessorKey: "amount",
+      header: () => <div className="text-right">Amount</div>,
+      cell: ({ row }) => {
+         const amount = Number.parseFloat(row.getValue("amount"))
+
+         // Format the amount as a dollar amount
+         const formatted = new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+         }).format(amount)
+
+         return <div className="text-right font-medium">{formatted}</div>
+      },
+   },
+   {
+      id: "actions",
+      enableHiding: false,
+      cell: ({ row }) => {
+         const payment = row.original
+
+         return (
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="h-8 w-8 p-0">
+                     <span className="sr-only">Open menu</span>
+                     <MoreHorizontal />
+                  </Button>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                  <DropdownMenuItem
+                     onClick={() => navigator.clipboard.writeText(payment.id)}
+                  >
+                     Copy payment ID
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>View customer</DropdownMenuItem>
+                  <DropdownMenuItem>View payment details</DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         )
+      },
+   },
+]
+
+export function CardsDataTable() {
+   const [sorting, setSorting] = React.useState<SortingState>([])
+   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+      [],
+   )
+   const [columnVisibility, setColumnVisibility] =
+      React.useState<VisibilityState>({})
+   const [rowSelection, setRowSelection] = React.useState({})
+
+   const table = useReactTable({
+      data,
+      columns,
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setColumnFilters,
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      onColumnVisibilityChange: setColumnVisibility,
+      onRowSelectionChange: setRowSelection,
+      state: {
+         sorting,
+         columnFilters,
+         columnVisibility,
+         rowSelection,
+      },
+   })
+
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle className="text-xl">Payments</CardTitle>
+            <CardDescription>Manage your payments.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <div className="mb-4 flex items-center gap-4">
+               <Input
+                  placeholder="Filter emails..."
+                  value={
+                     (table.getColumn("email")?.getFilterValue() as string) ??
+                     ""
+                  }
+                  onChange={(event) =>
+                     table
+                        .getColumn("email")
+                        ?.setFilterValue(event.target.value)
+                  }
+                  className="max-w-sm"
+               />
+               <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                     <Button variant="outline" className="ml-auto">
+                        Columns <ChevronDown />
+                     </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                     {table
+                        .getAllColumns()
+                        .filter((column) => column.getCanHide())
+                        .map((column) => {
+                           return (
+                              <DropdownMenuCheckboxItem
+                                 key={column.id}
+                                 className="capitalize"
+                                 checked={column.getIsVisible()}
+                                 onCheckedChange={(value) =>
+                                    column.toggleVisibility(!!value)
+                                 }
+                              >
+                                 {column.id}
+                              </DropdownMenuCheckboxItem>
+                           )
+                        })}
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </div>
+            <div className="rounded-md border">
+               <Table>
+                  <TableHeader>
+                     {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                           {headerGroup.headers.map((header) => {
+                              return (
+                                 <TableHead
+                                    key={header.id}
+                                    className="[&:has([role=checkbox])]:pl-3"
+                                 >
+                                    {header.isPlaceholder
+                                       ? null
+                                       : flexRender(
+                                            header.column.columnDef.header,
+                                            header.getContext(),
+                                         )}
+                                 </TableHead>
+                              )
+                           })}
+                        </TableRow>
+                     ))}
+                  </TableHeader>
+                  <TableBody>
+                     {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                           <TableRow
+                              key={row.id}
+                              data-state={row.getIsSelected() && "selected"}
+                           >
+                              {row.getVisibleCells().map((cell) => (
+                                 <TableCell
+                                    key={cell.id}
+                                    className="[&:has([role=checkbox])]:pl-3"
+                                 >
+                                    {flexRender(
+                                       cell.column.columnDef.cell,
+                                       cell.getContext(),
+                                    )}
+                                 </TableCell>
+                              ))}
+                           </TableRow>
+                        ))
+                     ) : (
+                        <TableRow>
+                           <TableCell
+                              colSpan={columns.length}
+                              className="h-24 text-center"
+                           >
+                              No results.
+                           </TableCell>
+                        </TableRow>
+                     )}
+                  </TableBody>
+               </Table>
+            </div>
+            <div className="flex items-center justify-end space-x-2 pt-4">
+               <div className="flex-1 text-sm text-muted-foreground">
+                  {table.getFilteredSelectedRowModel().rows.length} of{" "}
+                  {table.getFilteredRowModel().rows.length} row(s) selected.
+               </div>
+               <div className="space-x-2">
+                  <Button
+                     variant="outline"
+                     size="sm"
+                     onClick={() => table.previousPage()}
+                     disabled={!table.getCanPreviousPage()}
+                  >
+                     Previous
+                  </Button>
+                  <Button
+                     variant="outline"
+                     size="sm"
+                     onClick={() => table.nextPage()}
+                     disabled={!table.getCanNextPage()}
+                  >
+                     Next
+                  </Button>
+               </div>
+            </div>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/components/cards/index.tsx b/apps/web/components/cards/index.tsx
new file mode 100644
index 00000000..184847fc
--- /dev/null
+++ b/apps/web/components/cards/index.tsx
@@ -0,0 +1,63 @@
+import { CardsActivityGoal } from "~/components/cards/activity-goal"
+import { CardsCalendar } from "~/components/cards/calendar"
+import { CardsChat } from "~/components/cards/chat"
+import { CardsCookieSettings } from "~/components/cards/cookie-settings"
+import { CardsCreateAccount } from "~/components/cards/create-account"
+import { CardsDataTable } from "~/components/cards/data-table"
+import { CardsMetric } from "~/components/cards/metric"
+import { CardsPaymentMethod } from "~/components/cards/payment-method"
+import { CardsReportIssue } from "~/components/cards/report-issue"
+import { CardsShare } from "~/components/cards/share"
+import { CardsStats } from "~/components/cards/stats"
+import { CardsTeamMembers } from "~/components/cards/team-members"
+
+export function CardsDemo() {
+   return (
+      <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
+         <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
+            <CardsStats />
+            <div className="grid gap-1 sm:grid-cols-[260px_1fr] md:hidden">
+               <CardsCalendar />
+               <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
+                  <CardsActivityGoal />
+               </div>
+               <div className="pt-3 sm:col-span-2 xl:pt-4">
+                  <CardsMetric />
+               </div>
+            </div>
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+               <div className="space-y-4 xl:space-y-4">
+                  <CardsTeamMembers />
+                  <CardsCookieSettings />
+                  <CardsPaymentMethod />
+               </div>
+               <div className="space-y-4 xl:space-y-4">
+                  <CardsChat />
+                  <CardsCreateAccount />
+                  <div className="hidden xl:block">
+                     <CardsReportIssue />
+                  </div>
+               </div>
+            </div>
+         </div>
+         <div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
+            <div className="hidden gap-1 sm:grid-cols-[260px_1fr] md:grid">
+               <CardsCalendar />
+               <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
+                  <CardsActivityGoal />
+               </div>
+               <div className="pt-3 sm:col-span-2 xl:pt-3">
+                  <CardsMetric />
+               </div>
+            </div>
+            <div className="hidden md:block">
+               <CardsDataTable />
+            </div>
+            <CardsShare />
+            <div className="xl:hidden">
+               <CardsReportIssue />
+            </div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/components/cards/metric.tsx b/apps/web/components/cards/metric.tsx
new file mode 100644
index 00000000..cf86dfa3
--- /dev/null
+++ b/apps/web/components/cards/metric.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { Line, LineChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+const data = [
+   {
+      average: 400,
+      today: 240,
+   },
+   {
+      average: 300,
+      today: 139,
+   },
+   {
+      average: 200,
+      today: 980,
+   },
+   {
+      average: 278,
+      today: 390,
+   },
+   {
+      average: 189,
+      today: 480,
+   },
+   {
+      average: 239,
+      today: 380,
+   },
+   {
+      average: 349,
+      today: 430,
+   },
+]
+
+const chartConfig = {
+   today: {
+      label: "Today",
+      color: "hsl(var(--primary))",
+   },
+   average: {
+      label: "Average",
+      color: "hsl(var(--primary))",
+   },
+} satisfies ChartConfig
+
+export function CardsMetric() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Exercise Minutes</CardTitle>
+            <CardDescription>
+               Your exercise minutes are ahead of where you normally are.
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-4">
+            <ChartContainer
+               config={chartConfig}
+               className="w-full md:h-[200px]"
+            >
+               <LineChart
+                  data={data}
+                  margin={{
+                     top: 5,
+                     right: 10,
+                     left: 10,
+                     bottom: 0,
+                  }}
+               >
+                  <Line
+                     type="monotone"
+                     strokeWidth={2}
+                     dataKey="average"
+                     stroke="var(--color-average)"
+                     strokeOpacity={0.5}
+                     activeDot={{
+                        r: 6,
+                        fill: "var(--color-average)",
+                     }}
+                  />
+                  <Line
+                     type="monotone"
+                     dataKey="today"
+                     strokeWidth={2}
+                     stroke="var(--color-today)"
+                     activeDot={{
+                        r: 8,
+                        style: { fill: "var(--color-today)" },
+                     }}
+                  />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/components/cards/payment-method.tsx b/apps/web/components/cards/payment-method.tsx
new file mode 100644
index 00000000..f97c8c2e
--- /dev/null
+++ b/apps/web/components/cards/payment-method.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import { Icons } from "~/components/icons"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/miami/ui/radio-group"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export function CardsPaymentMethod() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Payment Method</CardTitle>
+            <CardDescription>
+               Add a new payment method to your account.
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-6">
+            <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
+               <div>
+                  <RadioGroupItem
+                     value="card"
+                     id="card"
+                     className="peer sr-only"
+                     aria-label="Card"
+                  />
+                  <Label
+                     htmlFor="card"
+                     className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+                  >
+                     <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        className="mb-3 h-6 w-6"
+                     >
+                        <rect width="20" height="14" x="2" y="5" rx="2" />
+                        <path d="M2 10h20" />
+                     </svg>
+                     Card
+                  </Label>
+               </div>
+               <div>
+                  <RadioGroupItem
+                     value="paypal"
+                     id="paypal"
+                     className="peer sr-only"
+                     aria-label="Paypal"
+                  />
+                  <Label
+                     htmlFor="paypal"
+                     className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+                  >
+                     <Icons.paypal className="mb-3 h-6 w-6" />
+                     Paypal
+                  </Label>
+               </div>
+               <div>
+                  <RadioGroupItem
+                     value="apple"
+                     id="apple"
+                     className="peer sr-only"
+                     aria-label="Apple"
+                  />
+                  <Label
+                     htmlFor="apple"
+                     className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary "
+                  >
+                     <Icons.apple className="mb-3 h-6 w-6" />
+                     Apple
+                  </Label>
+               </div>
+            </RadioGroup>
+            <div className="grid gap-2">
+               <Label htmlFor="name">Name</Label>
+               <Input id="name" placeholder="First Last" />
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor="city">City</Label>
+               <Input id="city" placeholder="" />
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor="number">Card number</Label>
+               <Input id="number" placeholder="" />
+            </div>
+            <div className="grid grid-cols-3 gap-4">
+               <div className="grid gap-2">
+                  <Label htmlFor="month">Expires</Label>
+                  <Select>
+                     <SelectTrigger id="month" aria-label="Month">
+                        <SelectValue placeholder="Month" />
+                     </SelectTrigger>
+                     <SelectContent>
+                        <SelectItem value="1">January</SelectItem>
+                        <SelectItem value="2">February</SelectItem>
+                        <SelectItem value="3">March</SelectItem>
+                        <SelectItem value="4">April</SelectItem>
+                        <SelectItem value="5">May</SelectItem>
+                        <SelectItem value="6">June</SelectItem>
+                        <SelectItem value="7">July</SelectItem>
+                        <SelectItem value="8">August</SelectItem>
+                        <SelectItem value="9">September</SelectItem>
+                        <SelectItem value="10">October</SelectItem>
+                        <SelectItem value="11">November</SelectItem>
+                        <SelectItem value="12">December</SelectItem>
+                     </SelectContent>
+                  </Select>
+               </div>
+               <div className="grid gap-2">
+                  <Label htmlFor="year">Year</Label>
+                  <Select>
+                     <SelectTrigger id="year" aria-label="Year">
+                        <SelectValue placeholder="Year" />
+                     </SelectTrigger>
+                     <SelectContent>
+                        {Array.from({ length: 10 }, (_, i) => (
+                           <SelectItem
+                              key={i}
+                              value={`${new Date().getFullYear() + i}`}
+                           >
+                              {new Date().getFullYear() + i}
+                           </SelectItem>
+                        ))}
+                     </SelectContent>
+                  </Select>
+               </div>
+               <div className="grid gap-2">
+                  <Label htmlFor="cvc">CVC</Label>
+                  <Input id="cvc" placeholder="CVC" />
+               </div>
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">Continue</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/components/cards/report-issue.tsx b/apps/web/components/cards/report-issue.tsx
new file mode 100644
index 00000000..61f44836
--- /dev/null
+++ b/apps/web/components/cards/report-issue.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+import { Textarea } from "~/registry/miami/ui/textarea"
+
+export function CardsReportIssue() {
+   const id = React.useId()
+
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Report an issue</CardTitle>
+            <CardDescription>
+               What area are you having problems with?
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-6">
+            <div className="grid gap-4 sm:grid-cols-2">
+               <div className="grid gap-2">
+                  <Label htmlFor={`area-${id}`}>Area</Label>
+                  <Select defaultValue="billing">
+                     <SelectTrigger id={`area-${id}`} aria-label="Area">
+                        <SelectValue placeholder="Select" />
+                     </SelectTrigger>
+                     <SelectContent>
+                        <SelectItem value="team">Team</SelectItem>
+                        <SelectItem value="billing">Billing</SelectItem>
+                        <SelectItem value="account">Account</SelectItem>
+                        <SelectItem value="deployments">Deployments</SelectItem>
+                        <SelectItem value="support">Support</SelectItem>
+                     </SelectContent>
+                  </Select>
+               </div>
+               <div className="grid gap-2">
+                  <Label htmlFor={`security-level-${id}`}>Security Level</Label>
+                  <Select defaultValue="2">
+                     <SelectTrigger
+                        id={`security-level-${id}`}
+                        className="line-clamp-1 w-full truncate"
+                        aria-label="Security Level"
+                     >
+                        <SelectValue placeholder="Select level" />
+                     </SelectTrigger>
+                     <SelectContent>
+                        <SelectItem value="1">Severity 1 (Highest)</SelectItem>
+                        <SelectItem value="2">Severity 2</SelectItem>
+                        <SelectItem value="3">Severity 3</SelectItem>
+                        <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
+                     </SelectContent>
+                  </Select>
+               </div>
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor={`subject-${id}`}>Subject</Label>
+               <Input id={`subject-${id}`} placeholder="I need help with..." />
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor={`description-${id}`}>Description</Label>
+               <Textarea
+                  id={`description-${id}`}
+                  placeholder="Please include all information relevant to your issue."
+               />
+            </div>
+         </CardContent>
+         <CardFooter className="justify-between space-x-2">
+            <Button variant="ghost" size="sm">
+               Cancel
+            </Button>
+            <Button size="sm">Submit</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/components/cards/share.tsx b/apps/web/components/cards/share.tsx
new file mode 100644
index 00000000..199ab277
--- /dev/null
+++ b/apps/web/components/cards/share.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+import { Separator } from "~/registry/miami/ui/separator"
+
+export function CardsShare() {
+   return (
+      <Card>
+         <CardHeader className="pb-3">
+            <CardTitle>Share this document</CardTitle>
+            <CardDescription>
+               Anyone with the link can view this document.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <div className="flex space-x-2">
+               <Label htmlFor="link" className="sr-only">
+                  Link
+               </Label>
+               <Input
+                  id="link"
+                  value="http://example.com/link/to/document"
+                  readOnly
+               />
+               <Button className="shrink-0">Copy Link</Button>
+            </div>
+            <Separator className="my-4" />
+            <div className="space-y-4">
+               <div className="text-sm font-medium">People with access</div>
+               <div className="grid gap-6">
+                  <div className="flex items-center justify-between space-x-4">
+                     <div className="flex items-center space-x-4">
+                        <Avatar>
+                           <AvatarImage src="/avatars/03.png" alt="Image" />
+                           <AvatarFallback>OM</AvatarFallback>
+                        </Avatar>
+                        <div>
+                           <p className="text-sm font-medium leading-none">
+                              Olivia Martin
+                           </p>
+                           <p className="text-sm text-muted-foreground">
+                              m@example.com
+                           </p>
+                        </div>
+                     </div>
+                     <Select defaultValue="edit">
+                        <SelectTrigger
+                           className="ml-auto w-[110px]"
+                           aria-label="Edit"
+                        >
+                           <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                           <SelectItem value="edit">Can edit</SelectItem>
+                           <SelectItem value="view">Can view</SelectItem>
+                        </SelectContent>
+                     </Select>
+                  </div>
+                  <div className="flex items-center justify-between space-x-4">
+                     <div className="flex items-center space-x-4">
+                        <Avatar>
+                           <AvatarImage src="/avatars/05.png" alt="Image" />
+                           <AvatarFallback>IN</AvatarFallback>
+                        </Avatar>
+                        <div>
+                           <p className="text-sm font-medium leading-none">
+                              Isabella Nguyen
+                           </p>
+                           <p className="text-sm text-muted-foreground">
+                              b@example.com
+                           </p>
+                        </div>
+                     </div>
+                     <Select defaultValue="view">
+                        <SelectTrigger
+                           className="ml-auto w-[110px]"
+                           aria-label="Edit"
+                        >
+                           <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                           <SelectItem value="edit">Can edit</SelectItem>
+                           <SelectItem value="view">Can view</SelectItem>
+                        </SelectContent>
+                     </Select>
+                  </div>
+                  <div className="flex items-center justify-between space-x-4">
+                     <div className="flex items-center space-x-4">
+                        <Avatar>
+                           <AvatarImage src="/avatars/01.png" alt="Image" />
+                           <AvatarFallback>SD</AvatarFallback>
+                        </Avatar>
+                        <div>
+                           <p className="text-sm font-medium leading-none">
+                              Sofia Davis
+                           </p>
+                           <p className="text-sm text-muted-foreground">
+                              p@example.com
+                           </p>
+                        </div>
+                     </div>
+                     <Select defaultValue="view">
+                        <SelectTrigger
+                           className="ml-auto w-[110px]"
+                           aria-label="Edit"
+                        >
+                           <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                           <SelectItem value="edit">Can edit</SelectItem>
+                           <SelectItem value="view">Can view</SelectItem>
+                        </SelectContent>
+                     </Select>
+                  </div>
+               </div>
+            </div>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/components/cards/stats.tsx b/apps/web/components/cards/stats.tsx
new file mode 100644
index 00000000..7dbf06fb
--- /dev/null
+++ b/apps/web/components/cards/stats.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { Bar, BarChart, Line, LineChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { type ChartConfig, ChartContainer } from "~/registry/miami/ui/chart"
+
+const data = [
+   {
+      revenue: 10400,
+      subscription: 240,
+   },
+   {
+      revenue: 14405,
+      subscription: 300,
+   },
+   {
+      revenue: 9400,
+      subscription: 200,
+   },
+   {
+      revenue: 8200,
+      subscription: 278,
+   },
+   {
+      revenue: 7000,
+      subscription: 189,
+   },
+   {
+      revenue: 9600,
+      subscription: 239,
+   },
+   {
+      revenue: 11244,
+      subscription: 278,
+   },
+   {
+      revenue: 26475,
+      subscription: 189,
+   },
+]
+
+const chartConfig = {
+   revenue: {
+      label: "Revenue",
+      color: "hsl(var(--primary))",
+   },
+   subscription: {
+      label: "Subscriptions",
+      color: "hsl(var(--primary))",
+   },
+} satisfies ChartConfig
+
+export function CardsStats() {
+   return (
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
+         <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+               <CardTitle className="text-sm font-normal">
+                  Total Revenue
+               </CardTitle>
+            </CardHeader>
+            <CardContent className="pb-0">
+               <div className="text-2xl font-bold">$15,231.89</div>
+               <p className="text-xs text-muted-foreground">
+                  +20.1% from last month
+               </p>
+               <ChartContainer config={chartConfig} className="h-[80px] w-full">
+                  <LineChart
+                     data={data}
+                     margin={{
+                        top: 5,
+                        right: 10,
+                        left: 10,
+                        bottom: 0,
+                     }}
+                  >
+                     <Line
+                        type="monotone"
+                        strokeWidth={2}
+                        dataKey="revenue"
+                        stroke="var(--color-revenue)"
+                        activeDot={{
+                           r: 6,
+                        }}
+                     />
+                  </LineChart>
+               </ChartContainer>
+            </CardContent>
+         </Card>
+         <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+               <CardTitle className="text-sm font-normal">
+                  Subscriptions
+               </CardTitle>
+            </CardHeader>
+            <CardContent>
+               <div className="text-2xl font-bold">+2350</div>
+               <p className="text-xs text-muted-foreground">
+                  +180.1% from last month
+               </p>
+               <ChartContainer
+                  config={chartConfig}
+                  className="mt-2 h-[80px] w-full"
+               >
+                  <BarChart data={data}>
+                     <Bar
+                        dataKey="subscription"
+                        fill="var(--color-subscription)"
+                        radius={4}
+                     />
+                  </BarChart>
+               </ChartContainer>
+            </CardContent>
+         </Card>
+      </div>
+   )
+}
diff --git a/apps/web/components/cards/team-members.tsx b/apps/web/components/cards/team-members.tsx
new file mode 100644
index 00000000..2effe596
--- /dev/null
+++ b/apps/web/components/cards/team-members.tsx
@@ -0,0 +1,212 @@
+"use client"
+
+import { ChevronDown } from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/miami/ui/command"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+export function CardsTeamMembers() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Team Members</CardTitle>
+            <CardDescription>
+               Invite your team members to collaborate.
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-6">
+            <div className="flex items-center justify-between space-x-4">
+               <div className="flex items-center space-x-4">
+                  <Avatar className="h-8 w-8">
+                     <AvatarImage src="/avatars/01.png" alt="Image" />
+                     <AvatarFallback>OM</AvatarFallback>
+                  </Avatar>
+                  <div>
+                     <p className="text-sm font-medium leading-none">
+                        Sofia Davis
+                     </p>
+                     <p className="text-sm text-muted-foreground">
+                        m@example.com
+                     </p>
+                  </div>
+               </div>
+               <Popover>
+                  <PopoverTrigger asChild>
+                     <Button variant="outline" size="sm" className="ml-auto">
+                        Owner <ChevronDown className="text-muted-foreground" />
+                     </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="end">
+                     <Command>
+                        <CommandInput placeholder="Select new role..." />
+                        <CommandList>
+                           <CommandEmpty>No roles found.</CommandEmpty>
+                           <CommandGroup>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Viewer</p>
+                                 <p className="text-sm text-muted-foreground">
+                                    Can view and comment.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Developer</p>
+                                 <p className="text-sm text-muted-foreground">
+                                    Can view, comment and edit.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Billing</p>
+                                 <p className="text-sm text-muted-foreground">
+                                    Can view, comment and manage billing.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Owner</p>
+                                 <p className="text-sm text-muted-foreground">
+                                    Admin-level access to all resources.
+                                 </p>
+                              </CommandItem>
+                           </CommandGroup>
+                        </CommandList>
+                     </Command>
+                  </PopoverContent>
+               </Popover>
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+               <div className="flex items-center space-x-4">
+                  <Avatar className="h-8 w-8">
+                     <AvatarImage src="/avatars/02.png" alt="Image" />
+                     <AvatarFallback>JL</AvatarFallback>
+                  </Avatar>
+                  <div>
+                     <p className="text-sm font-medium leading-none">
+                        Jackson Lee
+                     </p>
+                     <p className="text-sm text-muted-foreground">
+                        p@example.com
+                     </p>
+                  </div>
+               </div>
+               <Popover>
+                  <PopoverTrigger asChild>
+                     <Button variant="outline" size="sm" className="ml-auto">
+                        Member <ChevronDown className="text-muted-foreground" />
+                     </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="end">
+                     <Command>
+                        <CommandInput placeholder="Select new role..." />
+                        <CommandList>
+                           <CommandEmpty>No roles found.</CommandEmpty>
+                           <CommandGroup className="p-1.5">
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Viewer</p>
+                                 <p className="text-sm text-muted-foreground">
+                                    Can view and comment.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Developer</p>
+                                 <p className="text-sm text-muted-foreground">
+                                    Can view, comment and edit.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Billing</p>
+                                 <p className="text-sm text-muted-foreground">
+                                    Can view, comment and manage billing.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Owner</p>
+                                 <p className="text-sm text-muted-foreground">
+                                    Admin-level access to all resources.
+                                 </p>
+                              </CommandItem>
+                           </CommandGroup>
+                        </CommandList>
+                     </Command>
+                  </PopoverContent>
+               </Popover>
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+               <div className="flex items-center space-x-4">
+                  <Avatar className="h-8 w-8">
+                     <AvatarImage src="/avatars/03.png" alt="Image" />
+                     <AvatarFallback>IN</AvatarFallback>
+                  </Avatar>
+                  <div>
+                     <p className="text-sm font-medium leading-none">
+                        Isabella Nguyen
+                     </p>
+                     <p className="text-sm text-muted-foreground">
+                        i@example.com
+                     </p>
+                  </div>
+               </div>
+               <Popover>
+                  <PopoverTrigger asChild>
+                     <Button variant="outline" size="sm" className="ml-auto">
+                        Member <ChevronDown className="text-muted-foreground" />
+                     </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="end">
+                     <Command>
+                        <CommandInput placeholder="Select new role..." />
+                        <CommandList>
+                           <CommandEmpty>No roles found.</CommandEmpty>
+                           <CommandGroup className="p-1.5">
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Viewer</p>
+                                 <p className="text-sm text-muted-foreground">
+                                    Can view and comment.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Developer</p>
+                                 <p className="text-sm text-muted-foreground">
+                                    Can view, comment and edit.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Billing</p>
+                                 <p className="text-sm text-muted-foreground">
+                                    Can view, comment and manage billing.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Owner</p>
+                                 <p className="text-sm text-muted-foreground">
+                                    Admin-level access to all resources.
+                                 </p>
+                              </CommandItem>
+                           </CommandGroup>
+                        </CommandList>
+                     </Command>
+                  </PopoverContent>
+               </Popover>
+            </div>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/components/chart-code-viewer.tsx b/apps/web/components/chart-code-viewer.tsx
index 149b1639..dd7eadb3 100644
--- a/apps/web/components/chart-code-viewer.tsx
+++ b/apps/web/components/chart-code-viewer.tsx
@@ -1,27 +1,24 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { useMediaQuery } from '~/hooks/use-media-query'
-import { useThemesConfig } from '~/hooks/use-themes-config'
-import { ChartCopyButton } from '~/components/chart-copy-button'
-import type { Chart } from '~/components/chart-display'
-import { Button } from '~/registry/miami/ui/button'
+import { ChartCopyButton } from "~/components/chart-copy-button"
+import type { Chart } from "~/components/chart-display"
+import { V0Button } from "~/components/v0-button"
+import { useMediaQuery } from "~/hooks/use-media-query"
+import { useThemesConfig } from "~/hooks/use-themes-config"
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Drawer,
    DrawerContent,
    DrawerTrigger,
-} from '~/registry/miami/ui/drawer'
-import {
-   Sheet,
-   SheetContent,
-   SheetTrigger,
-} from '~/registry/miami/ui/sheet'
+} from "~/registry/miami/ui/drawer"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
 import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
-} from '~/registry/miami/ui/tabs'
+} from "~/registry/miami/ui/tabs"
 
 export function ChartCodeViewer({
    chart,
@@ -29,24 +26,24 @@ export function ChartCodeViewer({
    children,
 }: {
    chart: Chart
-} & React.ComponentProps<'div'>) {
-   const [tab, setTab] = React.useState('code')
+} & React.ComponentProps<"div">) {
+   const [tab, setTab] = React.useState("code")
    const { themesConfig } = useThemesConfig()
-   const isDesktop = useMediaQuery('(min-width: 768px)')
+   const isDesktop = useMediaQuery("(min-width: 768px)")
 
    const themeCode = React.useMemo(() => {
       return `\
 @layer base {
   :root {
 ${Object.entries(themesConfig?.activeTheme.cssVars.light || {})
-  .map(([key, value]) => `    ${key}: ${value};`)
-  .join('\n')}
+   .map(([key, value]) => `    ${key}: ${value};`)
+   .join("\n")}
   }
 
   .dark {
 ${Object.entries(themesConfig?.activeTheme.cssVars.dark || {})
-  .map(([key, value]) => `    ${key}: ${value};`)
-  .join('\n')}
+   .map(([key, value]) => `    ${key}: ${value};`)
+   .join("\n")}
     }
 }
 `
@@ -56,7 +53,7 @@ ${Object.entries(themesConfig?.activeTheme.cssVars.dark || {})
       <Button
          size="sm"
          variant="outline"
-         className="text-foreground hover:bg-muted dark:text-foreground h-6 rounded-[6px] border bg-transparent px-2 text-xs shadow-none"
+         className="h-6 rounded-[6px] border bg-transparent px-2 text-xs text-foreground shadow-none hover:bg-muted dark:text-foreground"
       >
          View Code
       </Button>
@@ -88,16 +85,21 @@ ${Object.entries(themesConfig?.activeTheme.cssVars.dark || {})
                      Theme
                   </TabsTrigger>
                </TabsList>
-               {tab === 'code' && (
+               {tab === "code" && (
                   <div className="ml-auto flex items-center justify-center gap-2">
                      <ChartCopyButton
                         event="copy_chart_code"
                         name={chart.name}
-                        code={chart.files?.[0]?.content ?? ''}
+                        code={chart.files?.[0]?.content ?? ""}
+                     />
+                     <V0Button
+                        id={`v0-button-${chart.name}`}
+                        name={chart.name}
+                        className="h-7"
                      />
                   </div>
                )}
-               {tab === 'theme' && (
+               {tab === "theme" && (
                   <ChartCopyButton
                      event="copy_chart_theme"
                      name={chart.name}
@@ -128,11 +130,11 @@ ${Object.entries(themesConfig?.activeTheme.cssVars.dark || {})
                   data-rehype-pretty-code-fragment
                   className="relative overflow-auto rounded-lg bg-black py-6"
                >
-                  <pre className="bg-black font-mono text-sm leading-relaxed">
-                     <code data-line-numbers="">
-                        <span className="line text-zinc-700">{`/* ${themesConfig?.activeTheme.name} */`}</span>
-                        {themeCode.split('\n').map((line, index) => (
-                           <span key={index} className="line">
+                  <pre className="bg-black font-mono text-sm leading-relaxed whitespace-pre-wrap break-all">
+                     <code data-line-numbers className="block">
+                        <span className="line text-zinc-700 block">{`/* ${themesConfig?.activeTheme.name} */`}</span>
+                        {themeCode.split("\n").map((line, index) => (
+                           <span key={index} className="line block">
                               {line}
                            </span>
                         ))}
@@ -150,11 +152,13 @@ ${Object.entries(themesConfig?.activeTheme.cssVars.dark || {})
             <DrawerTrigger asChild>{button}</DrawerTrigger>
             <DrawerContent
                className={ny(
-                  'flex max-h-[80vh] flex-col sm:max-h-[90vh] [&>div.bg-muted]:shrink-0',
+                  "flex max-h-[80vh] flex-col sm:max-h-[90vh] [&>div.bg-muted]:shrink-0",
                   className,
                )}
             >
-               <div className="flex h-full flex-col overflow-auto">{content}</div>
+               <div className="flex h-full flex-col overflow-auto">
+                  {content}
+               </div>
             </DrawerContent>
          </Drawer>
       )
@@ -166,7 +170,7 @@ ${Object.entries(themesConfig?.activeTheme.cssVars.dark || {})
          <SheetContent
             side="right"
             className={ny(
-               'flex flex-col gap-0 border-l-0 p-0 sm:max-w-sm md:w-[700px] md:max-w-[700px] dark:border-l',
+               "flex flex-col gap-0 border-l-0 p-0 dark:border-l sm:max-w-sm md:w-[700px] md:max-w-[700px]",
                className,
             )}
          >
diff --git a/apps/web/components/chart-display.tsx b/apps/web/components/chart-display.tsx
index 9f9b5f19..df83afed 100644
--- a/apps/web/components/chart-display.tsx
+++ b/apps/web/components/chart-display.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react'
-import type { z } from 'zod'
+import type { registryItemSchema } from "nyxb/registry"
+import * as React from "react"
+import type { z } from "zod"
 
-import { highlightCode } from '~/lib/highlight-code'
-import { getRegistryItem } from '~/lib/registry'
-import { ny } from '~/lib/utils'
-import { ChartToolbar } from '~/components/chart-toolbar'
-import type { registryEntrySchema } from '~/registry/schema'
+import { ChartToolbar } from "~/components/chart-toolbar"
+import { highlightCode } from "~/lib/highlight-code"
+import { getRegistryItem } from "~/lib/registry"
+import { ny } from "~/lib/utils"
 
-export type Chart = z.infer<typeof registryEntrySchema> & {
+export type Chart = z.infer<typeof registryItemSchema> & {
    highlightedCode: string
 }
 
@@ -15,10 +15,10 @@ export async function ChartDisplay({
    name,
    children,
    className,
-}: { name: string } & React.ComponentProps<'div'>) {
+}: { name: string } & React.ComponentProps<"div">) {
    const chart = await getCachedRegistryItem(name)
    const highlightedCode = await getChartHighlightedCode(
-      chart?.files?.[0]?.content ?? '',
+      chart?.files?.[0]?.content ?? "",
    )
 
    if (!chart || !highlightedCode) {
@@ -28,13 +28,13 @@ export async function ChartDisplay({
    return (
       <div
          className={ny(
-            'themes-wrapper group relative flex flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out hover:z-30',
+            "themes-wrapper group relative flex flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out hover:z-30",
             className,
          )}
       >
          <ChartToolbar
             chart={{ ...chart, highlightedCode }}
-            className="bg-card text-card-foreground relative z-20 flex justify-end border-b px-3 py-2.5"
+            className="relative z-20 flex justify-end border-b bg-card px-3 py-2.5 text-card-foreground"
          >
             {children}
          </ChartToolbar>
diff --git a/apps/web/components/chart-toolbar.tsx b/apps/web/components/chart-toolbar.tsx
index b470fcbd..a30711c8 100644
--- a/apps/web/components/chart-toolbar.tsx
+++ b/apps/web/components/chart-toolbar.tsx
@@ -1,5 +1,10 @@
-'use client'
+"use client"
 
+import { ChartCodeViewer } from "~/components/chart-code-viewer"
+import { ny } from "~/lib/utils"
+import { Separator } from "~/registry/miami/ui/separator"
+
+import "~/styles/mdx.css"
 import {
    AreaChart,
    BarChartBig,
@@ -8,15 +13,10 @@ import {
    MousePointer2,
    PieChart,
    Radar,
-} from 'lucide-react'
-import { ny } from '~/lib/utils'
-import { ChartCodeViewer } from '~/components/chart-code-viewer'
-import { Separator } from '~/registry/miami/ui/separator'
-
-import '~/styles/mdx.css'
+} from "lucide-react"
 
-import { ChartCopyButton } from '~/components/chart-copy-button'
-import type { Chart } from '~/components/chart-display'
+import { ChartCopyButton } from "~/components/chart-copy-button"
+import type { Chart } from "~/components/chart-display"
 
 export function ChartToolbar({
    chart,
@@ -24,20 +24,23 @@ export function ChartToolbar({
    children,
 }: {
    chart: Chart
-} & React.ComponentProps<'div'>) {
+} & React.ComponentProps<"div">) {
    return (
-      <div className={ny('flex items-center gap-2', className)}>
-         <div className="text-muted-foreground flex items-center gap-1.5 pl-1 text-[13px] [&>svg]:size-[0.9rem]">
+      <div className={ny("flex items-center gap-2", className)}>
+         <div className="flex items-center gap-1.5 pl-1 text-[13px] text-muted-foreground [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]">
             <ChartTitle chart={chart} />
          </div>
          <div className="ml-auto flex items-center gap-2 [&>form]:flex">
             <ChartCopyButton
                event="copy_chart_code"
                name={chart.name}
-               code={chart.files?.[0]?.content ?? ''}
-               className="[&_svg]-h-3 text-foreground hover:bg-muted dark:text-foreground size-6 rounded-[6px] bg-transparent shadow-none [&_svg]:w-3"
+               code={chart.files?.[0]?.content ?? ""}
+               className="[&_svg]-h-3 h-6 w-6 rounded-[6px] bg-transparent text-foreground shadow-none hover:bg-muted dark:text-foreground [&_svg]:w-3"
+            />
+            <Separator
+               orientation="vertical"
+               className="mx-0 hidden h-4 md:flex"
             />
-            <Separator orientation="vertical" className="mx-0 hidden h-4 md:flex" />
             <ChartCodeViewer chart={chart}>{children}</ChartCodeViewer>
          </div>
       </div>
@@ -45,73 +48,61 @@ export function ChartToolbar({
 }
 
 function ChartTitle({ chart }: { chart: Chart }) {
-   const { subcategory } = chart
+   const { categories } = chart
 
-   if (!subcategory) {
+   if (!categories?.length) {
       return null
    }
 
-   if (subcategory === 'Line') {
+   if (categories.includes("charts-line")) {
       return (
          <>
-            <LineChart />
-            {' '}
-            Chart
+            <LineChart /> Chart
          </>
       )
    }
 
-   if (subcategory === 'Bar') {
+   if (categories.includes("charts-bar")) {
       return (
          <>
-            <BarChartBig />
-            {' '}
-            Chart
+            <BarChartBig /> Chart
          </>
       )
    }
 
-   if (subcategory === 'Pie') {
+   if (categories.includes("charts-pie")) {
       return (
          <>
-            <PieChart />
-            {' '}
-            Chart
+            <PieChart /> Chart
          </>
       )
    }
 
-   if (subcategory === 'Area') {
+   if (categories.includes("charts-area")) {
       return (
          <>
-            <AreaChart />
-            {' '}
-            Chart
+            <AreaChart /> Chart
          </>
       )
    }
 
-   if (subcategory === 'Radar') {
+   if (categories.includes("charts-radar")) {
       return (
          <>
-            <Hexagon />
-            {' '}
-            Chart
+            <Hexagon /> Chart
          </>
       )
    }
 
-   if (subcategory === 'Radial') {
+   if (categories.includes("charts-radial")) {
       return (
          <>
-            <Radar />
-            {' '}
-            Chart
+            <Radar /> Chart
          </>
       )
    }
 
-   if (subcategory === 'Tooltip') {
+   if (categories.includes("charts-tooltip")) {
       return (
          <>
             <MousePointer2 />
@@ -120,5 +111,5 @@ function ChartTitle({ chart }: { chart: Chart }) {
       )
    }
 
-   return subcategory
+   return categories[0]
 }
diff --git a/apps/web/components/color-format-selector.tsx b/apps/web/components/color-format-selector.tsx
index 7109b5eb..574aeea5 100644
--- a/apps/web/components/color-format-selector.tsx
+++ b/apps/web/components/color-format-selector.tsx
@@ -1,24 +1,24 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { type Color, getColorFormat } from '~/lib/colors'
-import { ny } from '~/lib/utils'
-import { useColors } from '~/hooks/use-colors'
+import { useColors } from "~/hooks/use-colors"
+import { type Color, getColorFormat } from "~/lib/colors"
+import { ny } from "~/lib/utils"
 import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
-} from '~/registry/miami/ui/select'
-import { Skeleton } from '~/registry/miami/ui/skeleton'
+} from "~/registry/miami/ui/select"
+import { Skeleton } from "~/registry/miami/ui/skeleton"
 
 export function ColorFormatSelector({
    color,
    className,
    ...props
-}: Omit<React.ComponentProps<typeof SelectTrigger>, 'color'> & {
+}: Omit<React.ComponentProps<typeof SelectTrigger>, "color"> & {
    color: Color
 }) {
    const { format, setFormat, isLoading } = useColors()
@@ -31,11 +31,14 @@ export function ColorFormatSelector({
    return (
       <Select value={format} onValueChange={setFormat}>
          <SelectTrigger
-            className={ny('h-7 w-auto gap-1.5 rounded-lg pr-2 text-xs', className)}
+            className={ny(
+               "h-7 w-auto gap-1.5 rounded-lg pr-2 text-xs",
+               className,
+            )}
             {...props}
          >
             <span className="font-medium">Format: </span>
-            <span className="text-muted-foreground font-mono text-xs">
+            <span className="font-mono text-xs text-muted-foreground">
                {format}
             </span>
          </SelectTrigger>
@@ -47,7 +50,7 @@ export function ColorFormatSelector({
                   className="gap-2 rounded-lg [&>span]:flex [&>span]:items-center [&>span]:gap-2"
                >
                   <span className="font-medium">{format}</span>
-                  <span className="text-muted-foreground font-mono text-xs">
+                  <span className="font-mono text-xs text-muted-foreground">
                      {value}
                   </span>
                </SelectItem>
@@ -63,7 +66,7 @@ export function ColorFormatSelectorSkeleton({
 }: React.ComponentProps<typeof Skeleton>) {
    return (
       <Skeleton
-         className={ny('h-7 w-[116px] gap-1.5 rounded-lg', className)}
+         className={ny("h-7 w-[116px] gap-1.5 rounded-lg", className)}
          {...props}
       />
    )
diff --git a/apps/web/components/color-palette.tsx b/apps/web/components/color-palette.tsx
index 808dcee4..66a0c657 100644
--- a/apps/web/components/color-palette.tsx
+++ b/apps/web/components/color-palette.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react'
+import * as React from "react"
 
-import type { ColorPalette } from '~/lib/colors'
-import { Color } from '~/components/color'
+import { Color } from "~/components/color"
 import {
    ColorFormatSelector,
    ColorFormatSelectorSkeleton,
-} from '~/components/color-format-selector'
+} from "~/components/color-format-selector"
+import type { ColorPalette } from "~/lib/colors"
 
 export function ColorPalette({ colorPalette }: { colorPalette: ColorPalette }) {
    return (
       <div
          id={colorPalette.name}
-         className="ring-border rounded-lg shadow-sm ring-1"
+         className="rounded-lg shadow-sm ring-1 ring-border"
       >
          <div className="flex items-center p-2 pb-0">
             <div className="flex-1 pl-1 text-sm font-medium">
@@ -25,7 +25,7 @@ export function ColorPalette({ colorPalette }: { colorPalette: ColorPalette }) {
             </React.Suspense>
          </div>
          <div className="flex flex-col gap-1 p-2 sm:flex-row sm:gap-2">
-            {colorPalette.colors.map(color => (
+            {colorPalette.colors.map((color) => (
                <Color key={color.hex} color={color} />
             ))}
          </div>
diff --git a/apps/web/components/color.tsx b/apps/web/components/color.tsx
index 43e96f83..36f0cdbd 100644
--- a/apps/web/components/color.tsx
+++ b/apps/web/components/color.tsx
@@ -1,13 +1,12 @@
-'use client'
+"use client"
 
-import { Check, Clipboard } from 'lucide-react'
-import { toast } from 'sonner'
+import { Check, Clipboard } from "lucide-react"
+import { toast } from "sonner"
 
-import type { Color } from '~/lib/colors'
-import { trackEvent } from '~/lib/events'
-import { useColors } from '~/hooks/use-colors'
-import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard'
-import { copyToClipboardWithMeta } from '~/components/copy-button'
+import { useColors } from "~/hooks/use-colors"
+import { useCopyToClipboard } from "~/hooks/use-copy-to-clipboard"
+import type { Color } from "~/lib/colors"
+import { trackEvent } from "~/lib/events"
 
 export function Color({ color }: { color: Color }) {
    const { format } = useColors()
@@ -16,17 +15,17 @@ export function Color({ color }: { color: Color }) {
    return (
       <button
          key={color.hex}
-         className="group relative flex aspect-[3/1] w-full flex-1 flex-col gap-2 text-[--text] sm:aspect-[2/3] sm:size-auto [&>svg]:absolute [&>svg]:right-4 [&>svg]:top-4 [&>svg]:size-3.5 [&>svg]:opacity-0 [&>svg]:transition-opacity"
+         className="group relative flex aspect-[3/1] w-full flex-1 flex-col gap-2 text-[--text] sm:aspect-[2/3] sm:h-auto sm:w-auto [&>svg]:absolute [&>svg]:right-4 [&>svg]:top-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:opacity-0 [&>svg]:transition-opacity"
          style={
             {
-               '--bg': `hsl(${color.hsl})`,
-               '--text': color.foreground,
+               "--bg": `hsl(${color.hsl})`,
+               "--text": color.foreground,
             } as React.CSSProperties
          }
          onClick={() => {
             copyToClipboard(color[format])
             trackEvent({
-               name: 'copy_color',
+               name: "copy_color",
                properties: {
                   color: color.id,
                   value: color[format],
@@ -36,19 +35,17 @@ export function Color({ color }: { color: Color }) {
             toast.success(`Copied ${color[format]} to clipboard.`)
          }}
       >
-         {isCopied
-            ? (
-                  <Check className="group-hover:opacity-100" />
-               )
-            : (
-                  <Clipboard className="group-hover:opacity-100" />
-               )}
+         {isCopied ? (
+            <Check className="group-hover:opacity-100" />
+         ) : (
+            <Clipboard className="group-hover:opacity-100" />
+         )}
          <div className="w-full flex-1 rounded-md bg-[--bg] md:rounded-lg" />
          <div className="flex w-full flex-col items-center justify-center gap-1">
-            <span className="text-muted-foreground group-hover:text-foreground hidden font-mono text-xs tabular-nums transition-colors lg:flex">
+            <span className="hidden font-mono text-xs tabular-nums text-muted-foreground transition-colors group-hover:text-foreground lg:flex">
                {color.className}
             </span>
-            <span className="text-muted-foreground group-hover:text-foreground font-mono text-xs tabular-nums transition-colors lg:hidden">
+            <span className="font-mono text-xs tabular-nums text-muted-foreground transition-colors group-hover:text-foreground lg:hidden">
                {color.scale}
             </span>
          </div>
diff --git a/apps/web/components/command-menu.tsx b/apps/web/components/command-menu.tsx
index eabff273..fd609aa7 100644
--- a/apps/web/components/command-menu.tsx
+++ b/apps/web/components/command-menu.tsx
@@ -1,20 +1,14 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { useRouter } from 'next/navigation'
-import type { DialogProps } from '@radix-ui/react-alert-dialog'
-import {
-   CircleIcon,
-   FileIcon,
-   LaptopIcon,
-   MoonIcon,
-   SunIcon,
-} from '@radix-ui/react-icons'
-import { useTheme } from 'next-themes'
+import type { DialogProps } from "@radix-ui/react-dialog"
+import { Circle, File, Laptop, Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { useRouter } from "next/navigation"
+import * as React from "react"
 
-import { docsConfig } from '~/config/docs'
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
+import { docsConfig } from "~/config/docs"
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
 import {
    CommandDialog,
    CommandEmpty,
@@ -23,7 +17,7 @@ import {
    CommandItem,
    CommandList,
    CommandSeparator,
-} from '~/registry/miami/ui/command'
+} from "~/registry/miami/ui/command"
 
 export function CommandMenu({ ...props }: DialogProps) {
    const router = useRouter()
@@ -32,23 +26,24 @@ export function CommandMenu({ ...props }: DialogProps) {
 
    React.useEffect(() => {
       const down = (e: KeyboardEvent) => {
-         if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || e.key === '/') {
+         if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
             if (
-               (e.target instanceof HTMLElement && e.target.isContentEditable)
-               || e.target instanceof HTMLInputElement
-               || e.target instanceof HTMLTextAreaElement
-               || e.target instanceof HTMLSelectElement
+               (e.target instanceof HTMLElement &&
+                  e.target.isContentEditable) ||
+               e.target instanceof HTMLInputElement ||
+               e.target instanceof HTMLTextAreaElement ||
+               e.target instanceof HTMLSelectElement
             ) {
                return
             }
 
             e.preventDefault()
-            setOpen(open => !open)
+            setOpen((open) => !open)
          }
       }
 
-      document.addEventListener('keydown', down)
-      return () => document.removeEventListener('keydown', down)
+      document.addEventListener("keydown", down)
+      return () => document.removeEventListener("keydown", down)
    }, [])
 
    const runCommand = React.useCallback((command: () => unknown) => {
@@ -61,16 +56,17 @@ export function CommandMenu({ ...props }: DialogProps) {
          <Button
             variant="outline"
             className={ny(
-               'bg-muted/50 text-muted-foreground relative h-8 w-full justify-start rounded-lg text-sm font-normal shadow-none sm:pr-12 md:w-40 lg:w-64',
+               "relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64",
             )}
             onClick={() => setOpen(true)}
             {...props}
          >
-            <span className="hidden lg:inline-flex">Search documentation...</span>
+            <span className="hidden lg:inline-flex">
+               Search documentation...
+            </span>
             <span className="inline-flex lg:hidden">Search...</span>
-            <kbd className="bg-muted pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
-               <span className="text-xs">⌘</span>
-               K
+            <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+               <span className="text-xs">⌘</span>K
             </kbd>
          </Button>
          <CommandDialog open={open} onOpenChange={setOpen}>
@@ -79,32 +75,36 @@ export function CommandMenu({ ...props }: DialogProps) {
                <CommandEmpty>No results found.</CommandEmpty>
                <CommandGroup heading="Links">
                   {docsConfig.mainNav
-                     .filter(navitem => !navitem.external)
-                     .map(navItem => (
+                     .filter((navitem) => !navitem.external)
+                     .map((navItem) => (
                         <CommandItem
-                           key={navItem.href || navItem.title}
+                           key={navItem.href}
                            value={navItem.title}
                            onSelect={() => {
-                              runCommand(() => router.push(navItem.href as string))
+                              runCommand(() =>
+                                 router.push(navItem.href as string),
+                              )
                            }}
                         >
-                           <FileIcon className="mr-2 size-4" />
+                           <File />
                            {navItem.title}
                         </CommandItem>
                      ))}
                </CommandGroup>
-               {docsConfig.sidebarNav.map(group => (
+               {docsConfig.sidebarNav.map((group) => (
                   <CommandGroup key={group.title} heading={group.title}>
-                     {group.items.map(navItem => (
+                     {group.items.map((navItem) => (
                         <CommandItem
-                           key={navItem.href || navItem.title}
+                           key={navItem.href}
                            value={navItem.title}
                            onSelect={() => {
-                              runCommand(() => router.push(navItem.href as string))
+                              runCommand(() =>
+                                 router.push(navItem.href as string),
+                              )
                            }}
                         >
-                           <div className="mr-2 flex size-4 items-center justify-center">
-                              <CircleIcon className="size-3" />
+                           <div className="mr-2 flex h-4 w-4 items-center justify-center">
+                              <Circle className="h-3 w-3" />
                            </div>
                            {navItem.title}
                         </CommandItem>
@@ -113,16 +113,22 @@ export function CommandMenu({ ...props }: DialogProps) {
                ))}
                <CommandSeparator />
                <CommandGroup heading="Theme">
-                  <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
-                     <SunIcon className="mr-2 size-4" />
+                  <CommandItem
+                     onSelect={() => runCommand(() => setTheme("light"))}
+                  >
+                     <Sun />
                      Light
                   </CommandItem>
-                  <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
-                     <MoonIcon className="mr-2 size-4" />
+                  <CommandItem
+                     onSelect={() => runCommand(() => setTheme("dark"))}
+                  >
+                     <Moon />
                      Dark
                   </CommandItem>
-                  <CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
-                     <LaptopIcon className="mr-2 size-4" />
+                  <CommandItem
+                     onSelect={() => runCommand(() => setTheme("system"))}
+                  >
+                     <Laptop />
                      System
                   </CommandItem>
                </CommandGroup>
diff --git a/apps/web/components/component-preview.tsx b/apps/web/components/component-preview.tsx
index 27194281..9658f723 100644
--- a/apps/web/components/component-preview.tsx
+++ b/apps/web/components/component-preview.tsx
@@ -1,66 +1,58 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Index } from '__registry__'
-import { RotateCcw } from 'lucide-react'
+import Image from "next/image"
+import * as React from "react"
+import { Index } from "~/__registry__"
 
-import { useConfig } from '~/hooks/use-config'
-import { ny } from '~/lib/utils'
-import { Button } from '~/components/ui/button'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs'
-import ComponentWrapper from '~/components/component-wrapper'
-import { Icons } from '~/components/icons'
-import { styles } from '~/registry/registry-styles'
-import { StyleSwitcher } from '~/components/style-switcher'
+import { CopyButton } from "~/components/copy-button"
+import { Icons } from "~/components/icons"
+import { StyleSwitcher } from "~/components/style-switcher"
+import { ThemeWrapper } from "~/components/theme-wrapper"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs"
+import { V0Button } from "~/components/v0-button"
+import { useConfig } from "~/hooks/use-config"
+import { ny } from "~/lib/utils"
+import { styles } from "~/registry/registry-styles"
 
 interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
    name: string
-   align?: 'center' | 'start' | 'end'
-   preview?: boolean
-   styleSwitch?: boolean
-   dots?: boolean
+   extractClassname?: boolean
+   extractedClassNames?: string
+   align?: "center" | "start" | "end"
    description?: string
+   hideCode?: boolean
+   type?: "block" | "component" | "example"
 }
 
 export function ComponentPreview({
    name,
+   type,
    children,
    className,
-   align = 'center',
-   preview = false,
-   styleSwitch = false,
-   dots = true,
+   extractClassname,
+   extractedClassNames,
+   align = "center",
    description,
+   hideCode = false,
    ...props
 }: ComponentPreviewProps) {
-   const [key, setKey] = React.useState(0)
-   const [isLoaded, setIsLoaded] = React.useState(!preview)
    const [config] = useConfig()
-   const index = styles.findIndex(style => style.name === config.style)
+   const [key, setKey] = React.useState(0)
+   const index = styles.findIndex((style) => style.name === config.style)
 
    const Codes = React.Children.toArray(children) as React.ReactElement[]
    const Code = Codes[index]
 
-   React.useEffect(() => {
-      if (preview) {
-         const timer = setTimeout(() => setIsLoaded(true), 100)
-         return () => clearTimeout(timer)
-      }
-   }, [preview])
-
    const Preview = React.useMemo(() => {
       const Component = Index[config.style][name]?.component
 
       if (!Component) {
-         console.error(`Component with name "${name}" not found in registry.`)
          return (
-            <p className="text-muted-foreground text-sm">
-               Component
-               {' '}
-               <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
+            <p className="text-sm text-muted-foreground">
+               Component{" "}
+               <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
                   {name}
-               </code>
-               {' '}
+               </code>{" "}
                not found in registry.
             </p>
          )
@@ -69,66 +61,114 @@ export function ComponentPreview({
       return <Component />
    }, [name, config.style])
 
-   if (!isLoaded)
-      return null
+   const codeString = React.useMemo(() => {
+      if (
+         typeof Code?.props["data-rehype-pretty-code-fragment"] !== "undefined"
+      ) {
+         const [Button] = React.Children.toArray(
+            Code.props.children,
+         ) as React.ReactElement[]
+         return Button?.props?.value || Button?.props?.__rawString__ || null
+      }
+   }, [Code])
+
+   if (type === "block") {
+      return (
+         <div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border">
+            <Image
+               src={`/r/styles/${config.style}/${name}-light.png`}
+               alt={name}
+               width={1440}
+               height={900}
+               className="absolute left-0 top-0 z-20 w-[970px] max-w-none bg-background dark:hidden sm:w-[1280px] md:hidden md:dark:hidden"
+            />
+            <Image
+               src={`/r/styles/${config.style}/${name}-dark.png`}
+               alt={name}
+               width={1440}
+               height={900}
+               className="absolute left-0 top-0 z-20 hidden w-[970px] max-w-none bg-background dark:block sm:w-[1280px] md:hidden md:dark:hidden"
+            />
+            <div className="absolute inset-0 hidden w-[1600px] bg-background md:block">
+               <iframe
+                  src={`/view/styles/${config.style}/${name}`}
+                  className="size-full"
+               />
+            </div>
+         </div>
+      )
+   }
 
    return (
       <div
          className={ny(
-            'relative my-4 flex flex-col space-y-2 lg:max-w-[120ch]',
+            "group relative my-4 flex flex-col space-y-2",
             className,
          )}
          {...props}
       >
-         {description && (
-            <p className="text-muted-foreground text-sm">{description}</p>
-         )}
          <Tabs defaultValue="preview" className="relative mr-auto w-full">
-            {!preview && (
-               <div className="flex items-center justify-between pb-3">
+            <div className="flex items-center justify-between pb-3">
+               {!hideCode && (
                   <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
                      <TabsTrigger
                         value="preview"
-                        className="text-muted-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold shadow-none transition-none data-[state=active]:shadow-none"
+                        className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
                      >
                         Preview
                      </TabsTrigger>
                      <TabsTrigger
                         value="code"
-                        className="text-muted-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold shadow-none transition-none data-[state=active]:shadow-none"
+                        className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
                      >
                         Code
                      </TabsTrigger>
                   </TabsList>
-               </div>
-            )}
-            <TabsContent value="preview" className="relative rounded-md" key={key}>
-               <ComponentWrapper dots={dots}>
-                  {styleSwitch && (
-                     <div className="absolute left-4 top-4">
-                        <StyleSwitcher />
-                     </div>
-                  )}
-                  {!styleSwitch && (
-                     <Button
-                        onClick={() => setKey(prev => prev + 1)}
-                        className="absolute right-4 top-4 z-10 flex items-center rounded-lg px-3 py-1"
-                        variant="ghost"
+               )}
+            </div>
+            <TabsContent value="preview" className="relative rounded-md border">
+               <div className="flex items-center justify-between p-4">
+                  <StyleSwitcher />
+                  <div className="flex items-center gap-2">
+                     {description ? <V0Button name={name} /> : null}
+                     <button
+                        onClick={() => setKey((k) => k + 1)}
+                        className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-transparent text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                        title="Reload component"
                      >
-                        <RotateCcw aria-label="restart-btn" size={16} />
-                     </Button>
-                  )}
-                  <React.Suspense
-                     fallback={(
-                        <div className="text-muted-foreground flex items-center text-sm">
-                           <Icons.spinner className="mr-2 size-4 animate-spin" />
-                           Loading...
-                        </div>
+                        <Icons.refresh className="h-3.5 w-3.5" />
+                     </button>
+                     <CopyButton
+                        value={codeString}
+                        variant="outline"
+                        className="h-7 w-7 text-foreground opacity-100 hover:bg-muted hover:text-foreground [&_svg]:h-3.5 [&_svg]:w-3.5"
+                     />
+                  </div>
+               </div>
+               <ThemeWrapper defaultTheme="zinc">
+                  <div
+                     key={key}
+                     className={ny(
+                        "preview flex min-h-[350px] w-full justify-center p-10",
+                        {
+                           "items-center": align === "center",
+                           "items-start": align === "start",
+                           "items-end": align === "end",
+                        },
                      )}
                   >
-                     {Preview}
-                  </React.Suspense>
-               </ComponentWrapper>
+                     <React.Suspense
+                        fallback={
+                           <div className="flex w-full items-center justify-center text-sm text-muted-foreground">
+                              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+                              Loading...
+                           </div>
+                        }
+                     >
+                        {Preview}
+                     </React.Suspense>
+                  </div>
+               </ThemeWrapper>
             </TabsContent>
             <TabsContent value="code">
                <div className="flex flex-col space-y-4">
diff --git a/apps/web/components/framework-docs.tsx b/apps/web/components/framework-docs.tsx
index b62a5d05..33ea990a 100644
--- a/apps/web/components/framework-docs.tsx
+++ b/apps/web/components/framework-docs.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { allDocs } from 'content-collections'
+import { allDocs } from "content-collections"
+import type * as React from "react"
 
-import { Mdx } from './mdx-components'
+import { Mdx } from "./mdx-components"
 
 interface FrameworkDocsProps extends React.HTMLAttributes<HTMLDivElement> {
    data: string
@@ -11,11 +11,10 @@ interface FrameworkDocsProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export function FrameworkDocs({ ...props }: FrameworkDocsProps) {
    const frameworkDoc = allDocs.find(
-      doc => doc.slug === `/docs/installation/${props.data}`,
+      (doc) => doc.slug === `/docs/installation/${props.data}`,
    )
 
-   if (!frameworkDoc)
-      return null
+   if (!frameworkDoc) return null
 
    return <Mdx code={frameworkDoc.body.code} />
 }
diff --git a/apps/web/components/icons.tsx b/apps/web/components/icons.tsx
index 536583c6..35eb94ff 100644
--- a/apps/web/components/icons.tsx
+++ b/apps/web/components/icons.tsx
@@ -1,4 +1,4 @@
-import { DiscordLogoIcon } from '@radix-ui/react-icons'
+import { DiscordLogoIcon } from "@radix-ui/react-icons"
 import {
    AlertTriangle,
    ArrowRight,
@@ -17,12 +17,13 @@ import {
    MoreVertical,
    Pizza,
    Plus,
+   RotateCw,
    Settings,
    SunMedium,
    Trash,
    User,
    X,
-} from 'lucide-react'
+} from "lucide-react"
 
 export type IconProps = React.HTMLAttributes<SVGElement>
 
@@ -38,20 +39,62 @@ export const Icons = {
          fill="currentColor"
          {...props}
       >
-         <polygon points="116.73 266.3 116.73 164.57 75.02 202.32 49.93 250.53 66.08 323.88 116.73 430.88 116.73 266.3" fillRule="evenodd" />
-         <polygon points="116.73 430.88 49.93 250.53 .22 314.49 116.73 430.88" fillRule="evenodd" />
-         <polygon points="0 314.49 49.7 250.53 0 116.37 0 314.49" fillRule="evenodd" />
-         <polygon points=".22 116.37 49.93 250.53 116.73 164.57 .22 116.37" fillRule="evenodd" />
-         <polygon points=".42 115.92 112.79 162.4 116.93 164.12 106.56 9.91 .42 115.92" fillRule="evenodd" />
-         <polygon points="106.37 10.36 116.73 164.57 182.41 202.93 239.67 215.43 213.26 151.4 106.37 10.36" fillRule="evenodd" />
-         <polygon points="239.67 215.43 116.73 164.57 290.59 338.22 372.98 420.5 305.83 283.87 239.67 215.43" fillRule="evenodd" />
-         <polygon points="106.37 10.36 239.67 215.43 305.1 253.66 362.6 266.3 188.75 92.65 116.73 20.74 106.37 10.36" fillRule="evenodd" />
-         <polygon points="362.6 266.3 239.67 215.43 372.98 420.5 382.02 327.46 362.6 266.3" fillRule="evenodd" />
-         <polygon points="362.6 266.3 372.98 420.5 479.11 314.49 415.37 277.46 362.6 266.3" fillRule="evenodd" />
-         <polygon points="362.6 266.3 479.11 314.49 449.79 216.55 429.42 180.34 393.93 207.94 362.6 266.3" fillRule="evenodd" />
-         <polygon points="362.6 266.3 429.42 180.34 408.73 113.29 362.6 0 362.6 164.56 362.6 266.3" fillRule="evenodd" />
-         <polygon points="429.42 180.34 479.11 314.49 479.11 116.37 445.33 146.69 429.42 180.34" fillRule="evenodd" />
-         <polygon points="429.42 180.34 479.11 116.37 362.6 0 429.42 180.34" fillRule="evenodd" />
+         <polygon
+            points="116.73 266.3 116.73 164.57 75.02 202.32 49.93 250.53 66.08 323.88 116.73 430.88 116.73 266.3"
+            fillRule="evenodd"
+         />
+         <polygon
+            points="116.73 430.88 49.93 250.53 .22 314.49 116.73 430.88"
+            fillRule="evenodd"
+         />
+         <polygon
+            points="0 314.49 49.7 250.53 0 116.37 0 314.49"
+            fillRule="evenodd"
+         />
+         <polygon
+            points=".22 116.37 49.93 250.53 116.73 164.57 .22 116.37"
+            fillRule="evenodd"
+         />
+         <polygon
+            points=".42 115.92 112.79 162.4 116.93 164.12 106.56 9.91 .42 115.92"
+            fillRule="evenodd"
+         />
+         <polygon
+            points="106.37 10.36 116.73 164.57 182.41 202.93 239.67 215.43 213.26 151.4 106.37 10.36"
+            fillRule="evenodd"
+         />
+         <polygon
+            points="239.67 215.43 116.73 164.57 290.59 338.22 372.98 420.5 305.83 283.87 239.67 215.43"
+            fillRule="evenodd"
+         />
+         <polygon
+            points="106.37 10.36 239.67 215.43 305.1 253.66 362.6 266.3 188.75 92.65 116.73 20.74 106.37 10.36"
+            fillRule="evenodd"
+         />
+         <polygon
+            points="362.6 266.3 239.67 215.43 372.98 420.5 382.02 327.46 362.6 266.3"
+            fillRule="evenodd"
+         />
+         <polygon
+            points="362.6 266.3 372.98 420.5 479.11 314.49 415.37 277.46 362.6 266.3"
+            fillRule="evenodd"
+         />
+         <polygon
+            points="362.6 266.3 479.11 314.49 449.79 216.55 429.42 180.34 393.93 207.94 362.6 266.3"
+            fillRule="evenodd"
+         />
+         <polygon
+            points="362.6 266.3 429.42 180.34 408.73 113.29 362.6 0 362.6 164.56 362.6 266.3"
+            fillRule="evenodd"
+         />
+         <polygon
+            points="429.42 180.34 479.11 314.49 479.11 116.37 445.33 146.69 429.42 180.34"
+            fillRule="evenodd"
+         />
+         <polygon
+            points="429.42 180.34 479.11 116.37 362.6 0 429.42 180.34"
+            fillRule="evenodd"
+         />
       </svg>
    ),
    close: X,
@@ -75,14 +118,12 @@ export const Icons = {
             className="opacity-0 transition group-hover:opacity-100"
             d="M0 5h7"
             strokeLinecap="round"
-         >
-         </path>
+         ></path>
          <path
             className="transition group-hover:translate-x-[3px]"
             d="M1 1l4 4-4 4"
             strokeLinecap="round"
-         >
-         </path>
+         ></path>
       </svg>
    ),
    trash: Trash,
@@ -120,8 +161,7 @@ export const Icons = {
          <path
             fill="currentColor"
             d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-         >
-         </path>
+         ></path>
       </svg>
    ),
    radix: (props: IconProps) => (
@@ -129,14 +169,12 @@ export const Icons = {
          <path
             d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"
             fill="currentcolor"
-         >
-         </path>
+         ></path>
          <path d="M12 0H4V8H12V0Z" fill="currentcolor"></path>
          <path
             d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"
             fill="currentcolor"
-         >
-         </path>
+         ></path>
       </svg>
    ),
    aria: (props: IconProps) => (
@@ -255,43 +293,35 @@ export const Icons = {
          <path
             d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
             fill="#201515"
-         >
-         </path>
+         ></path>
          <path
             d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
             fill="#201515"
-         >
-         </path>
+         ></path>
          <path
             d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
             fill="#201515"
-         >
-         </path>
+         ></path>
          <path
             d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
             fill="#201515"
-         >
-         </path>
+         ></path>
          <path
             d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
             fill="#201515"
-         >
-         </path>
+         ></path>
          <path
             d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
             fill="#201515"
-         >
-         </path>
+         ></path>
          <path
             d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
             fill="#201515"
-         >
-         </path>
+         ></path>
          <path
             d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z"
             fill="#FF4F00"
-         >
-         </path>
+         ></path>
       </svg>
    ),
    googleDrive: (props: IconProps) => (
@@ -351,23 +381,19 @@ export const Icons = {
          <path
             fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
             d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
-         >
-         </path>
+         ></path>
          <path
             d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
             opacity=".05"
-         >
-         </path>
+         ></path>
          <path
             d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
             opacity=".07"
-         >
-         </path>
+         ></path>
          <path
             fill="#fff"
             d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
-         >
-         </path>
+         ></path>
       </svg>
    ),
    whatsapp: (props: IconProps) => (
@@ -438,13 +464,11 @@ export const Icons = {
             <path
                d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
                id="path-1"
-            >
-            </path>
+            ></path>
             <path
                d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
                id="path-3"
-            >
-            </path>
+            ></path>
             <linearGradient
                x1="50.0053945%"
                y1="8.58610612%"
@@ -453,33 +477,32 @@ export const Icons = {
                id="linearGradient-5"
             >
                <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%"></stop>
-               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%"></stop>
+               <stop
+                  stopColor="#1A237E"
+                  stopOpacity="0.02"
+                  offset="100%"
+               ></stop>
             </linearGradient>
             <path
                d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
                id="path-6"
-            >
-            </path>
+            ></path>
             <path
                d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
                id="path-8"
-            >
-            </path>
+            ></path>
             <path
                d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
                id="path-10"
-            >
-            </path>
+            ></path>
             <path
                d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
                id="path-12"
-            >
-            </path>
+            ></path>
             <path
                d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
                id="path-14"
-            >
-            </path>
+            ></path>
             <radialGradient
                cx="3.16804688%"
                cy="2.71744318%"
@@ -505,8 +528,14 @@ export const Icons = {
                transform="translate(-451.000000, -463.000000)"
             >
                <g id="Hero" transform="translate(0.000000, 63.000000)">
-                  <g id="Personal" transform="translate(277.000000, 309.000000)">
-                     <g id="Docs-icon" transform="translate(174.000000, 91.000000)">
+                  <g
+                     id="Personal"
+                     transform="translate(277.000000, 309.000000)"
+                  >
+                     <g
+                        id="Docs-icon"
+                        transform="translate(174.000000, 91.000000)"
+                     >
                         <g id="Group">
                            <g id="Clipped">
                               <mask id="mask-2" fill="white">
@@ -519,8 +548,7 @@ export const Icons = {
                                  fill="#4285F4"
                                  fillRule="nonzero"
                                  mask="url(#mask-2)"
-                              >
-                              </path>
+                              ></path>
                            </g>
                            <g id="Clipped">
                               <mask id="mask-4" fill="white">
@@ -533,8 +561,7 @@ export const Icons = {
                                  fillRule="nonzero"
                                  mask="url(#mask-4)"
                                  points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
-                              >
-                              </polygon>
+                              ></polygon>
                            </g>
                            <g id="Clipped">
                               <mask id="mask-7" fill="white">
@@ -547,8 +574,7 @@ export const Icons = {
                                  fill="#F1F1F1"
                                  fillRule="nonzero"
                                  mask="url(#mask-7)"
-                              >
-                              </path>
+                              ></path>
                            </g>
                            <g id="Clipped">
                               <mask id="mask-9" fill="white">
@@ -562,8 +588,7 @@ export const Icons = {
                                        id="Path"
                                        fill="#A1C2FA"
                                        fillRule="nonzero"
-                                    >
-                                    </path>
+                                    ></path>
                                  </g>
                               </g>
                            </g>
@@ -579,8 +604,7 @@ export const Icons = {
                                  fill="#FFFFFF"
                                  fillRule="nonzero"
                                  mask="url(#mask-11)"
-                              >
-                              </path>
+                              ></path>
                            </g>
                            <g id="Clipped">
                               <mask id="mask-13" fill="white">
@@ -594,8 +618,7 @@ export const Icons = {
                                  fill="#1A237E"
                                  fillRule="nonzero"
                                  mask="url(#mask-13)"
-                              >
-                              </path>
+                              ></path>
                            </g>
                            <g id="Clipped">
                               <mask id="mask-15" fill="white">
@@ -609,8 +632,7 @@ export const Icons = {
                                  fill="#1A237E"
                                  fillRule="nonzero"
                                  mask="url(#mask-15)"
-                              >
-                              </path>
+                              ></path>
                            </g>
                         </g>
                         <path
@@ -618,8 +640,7 @@ export const Icons = {
                            id="Path"
                            fill="url(#radialGradient-16)"
                            fillRule="nonzero"
-                        >
-                        </path>
+                        ></path>
                      </g>
                   </g>
                </g>
@@ -627,4 +648,5 @@ export const Icons = {
          </g>
       </svg>
    ),
+   refresh: RotateCw,
 }
diff --git a/apps/web/components/main-nav.tsx b/apps/web/components/main-nav.tsx
index 2e5ba57c..dad2040d 100644
--- a/apps/web/components/main-nav.tsx
+++ b/apps/web/components/main-nav.tsx
@@ -1,22 +1,32 @@
-'use client'
+"use client"
 
-import React from 'react'
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import { ExternalLinkIcon } from '@radix-ui/react-icons'
-import { Icons } from '~/components/icons'
-import { Badge } from '~/components/ui/badge'
-import { docsConfig } from '~/config/docs'
-import { siteConfig } from '~/config/site'
-import { ny } from '~/lib/utils'
-import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '~/registry/miami/ui/navigation-menu'
+import { ExternalLinkIcon } from "@radix-ui/react-icons"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import React from "react"
+import { Icons } from "~/components/icons"
+import { Badge } from "~/components/ui/badge"
+import { docsConfig } from "~/config/docs"
+import { siteConfig } from "~/config/site"
+import { ny } from "~/lib/utils"
+import {
+   NavigationMenu,
+   NavigationMenuContent,
+   NavigationMenuItem,
+   NavigationMenuLink,
+   NavigationMenuList,
+   NavigationMenuTrigger,
+} from "~/registry/miami/ui/navigation-menu"
 
 export function MainNav() {
    const pathname = usePathname()
 
    return (
       <div className="mr-4 hidden md:flex">
-         <Link href="/" className="relative flex items-center space-x-2 lg:mr-6">
+         <Link
+            href="/"
+            className="relative flex items-center space-x-2 lg:mr-6"
+         >
             <Icons.logo className="size-6" />
             <span className="hidden font-bold md:inline-block">
                {siteConfig.name}
@@ -24,53 +34,59 @@ export function MainNav() {
             <Badge variant="secondary">Beta</Badge>
          </Link>
          <nav className="hidden items-center space-x-6 text-sm font-medium xl:flex">
-            {docsConfig.mainNav.map(item => (
-               item.items
-                  ? (
-                        <NavigationMenu key={item.title}>
-                           <NavigationMenuList>
-                              <NavigationMenuItem>
-                                 <NavigationMenuTrigger>
-                                    {item.title}
-                                 </NavigationMenuTrigger>
-                                 <NavigationMenuContent className="flex flex-col items-center">
-                                    <ul className="flex flex-col items-center gap-3 p-4">
-                                       {item.items.map(subItem => (
-                                          <ListItem key={subItem.href} href={subItem.href} title={subItem.title}>
-                                             {subItem.label}
-                                          </ListItem>
-                                       ))}
-                                    </ul>
-                                 </NavigationMenuContent>
-                              </NavigationMenuItem>
-                           </NavigationMenuList>
-                        </NavigationMenu>
-                     )
-                  : (
-                        <Link
-                           key={item.href}
-                           href={item.href!}
-                           target={item.external ? '_blank' : undefined}
-                           className={ny(
-                              'hover:text-foreground/80 flex items-center justify-center transition-colors',
-                              pathname === item.href
-                                 ? 'text-foreground'
-                                 : 'text-foreground/60',
-                           )}
-                        >
-                           {item.title}
-                           {item.external && <ExternalLinkIcon className="ml-2 size-4" />}
-                        </Link>
-                     )
-            ))}
+            {docsConfig.mainNav.map((item) =>
+               item.items ? (
+                  <NavigationMenu key={item.title}>
+                     <NavigationMenuList>
+                        <NavigationMenuItem>
+                           <NavigationMenuTrigger>
+                              {item.title}
+                           </NavigationMenuTrigger>
+                           <NavigationMenuContent className="flex flex-col items-center">
+                              <ul className="flex flex-col items-center gap-3 p-4">
+                                 {item.items.map((subItem) => (
+                                    <ListItem
+                                       key={subItem.href}
+                                       href={subItem.href}
+                                       title={subItem.title}
+                                    >
+                                       {typeof subItem.label === "string"
+                                          ? subItem.label
+                                          : null}
+                                    </ListItem>
+                                 ))}
+                              </ul>
+                           </NavigationMenuContent>
+                        </NavigationMenuItem>
+                     </NavigationMenuList>
+                  </NavigationMenu>
+               ) : (
+                  <Link
+                     key={item.href}
+                     href={item.href!}
+                     target={item.external ? "_blank" : undefined}
+                     className={ny(
+                        "hover:text-foreground/80 flex items-center justify-center transition-colors",
+                        pathname === item.href
+                           ? "text-foreground"
+                           : "text-foreground/60",
+                     )}
+                  >
+                     {item.title}
+                     {item.external && (
+                        <ExternalLinkIcon className="ml-2 size-4" />
+                     )}
+                  </Link>
+               ),
+            )}
          </nav>
       </div>
    )
 }
 
 const ListItem = React.forwardRef<
-   React.ElementRef<'a'>,
-   React.ComponentPropsWithoutRef<'a'>
+   React.ElementRef<"a">,
+   React.ComponentPropsWithoutRef<"a">
 >(({ className, title, children, ...props }, ref) => {
    return (
       <li className="flex justify-center">
@@ -78,7 +94,7 @@ const ListItem = React.forwardRef<
             <a
                ref={ref}
                className={ny(
-                  'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors',
+                  "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors",
                   className,
                )}
                {...props}
@@ -92,4 +108,4 @@ const ListItem = React.forwardRef<
       </li>
    )
 })
-ListItem.displayName = 'ListItem'
+ListItem.displayName = "ListItem"
diff --git a/apps/web/components/mdx-components.tsx b/apps/web/components/mdx-components.tsx
index df4129d3..db51acbd 100644
--- a/apps/web/components/mdx-components.tsx
+++ b/apps/web/components/mdx-components.tsx
@@ -1,49 +1,45 @@
 // eslint-disable-next-line ts/ban-ts-comment
 // @ts-nocheck
-'use client'
+"use client"
 
-import * as React from 'react'
-import Image from 'next/image'
-import Link from 'next/link'
-import { useMDXComponent } from '@content-collections/mdx/react'
-import type { NpmCommands } from 'types/unist'
+import { useMDXComponent } from "@content-collections/mdx/react"
+import Image from "next/image"
+import Link from "next/link"
+import type * as React from "react"
+import type { NpmCommands } from "types/unist"
 
-import type { Event } from '~/lib/events'
-import { ny } from '~/lib/utils'
-import { useConfig } from '~/hooks/use-config'
-import { Callout } from '~/components/callout'
-import { CodeBlockWrapper } from '~/components/code-block-wrapper'
-import { ComponentExample } from '~/components/component-example'
-import { ComponentPreview } from '~/components/component-preview'
-import { ComponentSource } from '~/components/component-source'
-import { CopyButton, CopyNpmCommandButton } from '~/components/copy-button'
-import { FrameworkDocs } from '~/components/framework-docs'
-import { StyleWrapper } from '~/components/style-wrapper'
+import { Callout } from "~/components/callout"
+import { CodeBlockWrapper } from "~/components/code-block-wrapper"
+import { ComponentExample } from "~/components/component-example"
+import { ComponentInstallation } from "~/components/component-installation"
+import { ComponentPreview } from "~/components/component-preview"
+import { ComponentSource } from "~/components/component-source"
+import { CopyButton, CopyNpmCommandButton } from "~/components/copy-button"
+import { FrameworkDocs } from "~/components/framework-docs"
+import { PropsTable } from "~/components/props-table"
+import RepoDownload from "~/components/repo-download"
+import { StyleWrapper } from "~/components/style-wrapper"
+import TechStack from "~/components/tech-stack"
+import TemplatePreview from "~/components/template-preview"
+import { useConfig } from "~/hooks/use-config"
+import type { Event } from "~/lib/events"
+import { ny } from "~/lib/utils"
+import TweetCard from "~/registry/default/ui/tweet-card"
 import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
-} from '~/registry/miami/ui/accordion'
-import {
-   Alert,
-   AlertDescription,
-   AlertTitle,
-} from '~/registry/miami/ui/alert'
-import { AspectRatio } from '~/registry/miami/ui/aspect-ratio'
+} from "~/registry/miami/ui/accordion"
+import { Alert, AlertDescription, AlertTitle } from "~/registry/miami/ui/alert"
+import { AspectRatio } from "~/registry/miami/ui/aspect-ratio"
 import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
-} from '~/registry/miami/ui/tabs'
-import type { Style } from '~/registry/registry-styles'
-import TweetCard from '~/registry/default/ui/tweet-card'
-import RepoDownload from '~/components/repo-download'
-import TechStack from '~/components/tech-stack'
-import TemplatePreview from '~/components/template-preview'
-import { PropsTable } from '~/components/props-table'
-import { ComponentInstallation } from '~/components/component-installation'
+} from "~/registry/miami/ui/tabs"
+import type { Style } from "~/registry/registry-styles"
 
 const components = {
    Accordion,
@@ -60,7 +56,7 @@ const components = {
    h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
       <h1
          className={ny(
-            'font-heading mt-2 scroll-m-20 text-4xl font-bold',
+            "font-heading mt-2 scroll-m-20 text-4xl font-bold",
             className,
          )}
          {...props}
@@ -69,7 +65,7 @@ const components = {
    h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
       <h2
          className={ny(
-            'font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0',
+            "font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0",
             className,
          )}
          {...props}
@@ -78,7 +74,7 @@ const components = {
    h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
       <h3
          className={ny(
-            'font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight',
+            "font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
             className,
          )}
          {...props}
@@ -87,7 +83,7 @@ const components = {
    h4: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
       <h4
          className={ny(
-            'font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight',
+            "font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
             className,
          )}
          {...props}
@@ -96,7 +92,7 @@ const components = {
    h5: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
       <h5
          className={ny(
-            'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',
+            "mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
             className,
          )}
          {...props}
@@ -105,7 +101,7 @@ const components = {
    h6: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
       <h6
          className={ny(
-            'mt-8 scroll-m-20 text-base font-semibold tracking-tight',
+            "mt-8 scroll-m-20 text-base font-semibold tracking-tight",
             className,
          )}
          {...props}
@@ -113,28 +109,28 @@ const components = {
    ),
    a: ({ className, ...props }: React.HTMLAttributes<HTMLAnchorElement>) => (
       <a
-         className={ny('font-medium underline underline-offset-4', className)}
+         className={ny("font-medium underline underline-offset-4", className)}
          {...props}
       />
    ),
    p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
       <p
-         className={ny('leading-7 [&:not(:first-child)]:mt-6', className)}
+         className={ny("leading-7 [&:not(:first-child)]:mt-6", className)}
          {...props}
       />
    ),
    ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
-      <ul className={ny('my-6 ml-6 list-disc', className)} {...props} />
+      <ul className={ny("my-6 ml-6 list-disc", className)} {...props} />
    ),
    ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (
-      <ol className={ny('my-6 ml-6 list-decimal', className)} {...props} />
+      <ol className={ny("my-6 ml-6 list-decimal", className)} {...props} />
    ),
    li: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
-      <li className={ny('mt-2', className)} {...props} />
+      <li className={ny("mt-2", className)} {...props} />
    ),
    blockquote: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
       <blockquote
-         className={ny('mt-6 border-l-2 pl-6 italic', className)}
+         className={ny("mt-6 border-l-2 pl-6 italic", className)}
          {...props}
       />
    ),
@@ -143,7 +139,7 @@ const components = {
       alt,
       ...props
    }: React.ImgHTMLAttributes<HTMLImageElement>) => (
-      <img className={ny('rounded-md', className)} alt={alt} {...props} />
+      <img className={ny("rounded-md", className)} alt={alt} {...props} />
    ),
    hr: ({ ...props }: React.HTMLAttributes<HTMLHRElement>) => (
       <hr className="my-4 md:my-8" {...props} />
@@ -152,7 +148,7 @@ const components = {
       <div className="my-6 w-full overflow-y-auto">
          <table
             className={ny(
-               'relative w-full overflow-hidden border-none text-sm',
+               "relative w-full overflow-hidden border-none text-sm",
                className,
             )}
             {...props}
@@ -161,23 +157,29 @@ const components = {
    ),
    tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
       <tr
-         className={ny('last:border-b-none m-0 border-b', className)}
+         className={ny("last:border-b-none m-0 border-b", className)}
          {...props}
       />
    ),
-   th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
+   th: ({
+      className,
+      ...props
+   }: React.HTMLAttributes<HTMLTableCellElement>) => (
       <th
          className={ny(
-            'px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right',
+            "px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
             className,
          )}
          {...props}
       />
    ),
-   td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
+   td: ({
+      className,
+      ...props
+   }: React.HTMLAttributes<HTMLTableCellElement>) => (
       <td
          className={ny(
-            'px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right',
+            "px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
             className,
          )}
          {...props}
@@ -196,17 +198,17 @@ const components = {
       __style__,
       ...props
    }: React.HTMLAttributes<HTMLPreElement> & {
-      __style__?: Style['name']
+      __style__?: Style["name"]
       __rawString__?: string
       __withMeta__?: boolean
       __src__?: string
-      __event__?: Event['name']
+      __event__?: Event["name"]
    } & NpmCommands) => {
       return (
          <StyleWrapper styleName={__style__}>
             <pre
                className={ny(
-                  'mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900',
+                  "mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900",
                   className,
                )}
                {...props}
@@ -216,30 +218,36 @@ const components = {
                   value={__rawString__}
                   src={__src__}
                   event={__event__}
-                  className={ny('absolute right-4 top-4', __withMeta__ && 'top-16')}
-               />
-            )}
-            {__npmCommand__
-            && __yarnCommand__
-            && __pnpmCommand__
-            && __bunCommand__ && (
-               <CopyNpmCommandButton
-                  commands={{
-                     __npmCommand__,
-                     __yarnCommand__,
-                     __pnpmCommand__,
-                     __bunCommand__,
-                  }}
-                  className={ny('absolute right-4 top-4', __withMeta__ && 'top-16')}
+                  className={ny(
+                     "absolute right-4 top-4",
+                     __withMeta__ && "top-16",
+                  )}
                />
             )}
+            {__npmCommand__ &&
+               __yarnCommand__ &&
+               __pnpmCommand__ &&
+               __bunCommand__ && (
+                  <CopyNpmCommandButton
+                     commands={{
+                        __npmCommand__,
+                        __yarnCommand__,
+                        __pnpmCommand__,
+                        __bunCommand__,
+                     }}
+                     className={ny(
+                        "absolute right-4 top-4",
+                        __withMeta__ && "top-16",
+                     )}
+                  />
+               )}
          </StyleWrapper>
       )
    },
    code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
       <code
          className={ny(
-            'bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm',
+            "bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm",
             className,
          )}
          {...props}
@@ -254,10 +262,10 @@ const components = {
    CodeBlockWrapper: ({ ...props }) => (
       <CodeBlockWrapper className="rounded-md border" {...props} />
    ),
-   Step: ({ className, ...props }: React.ComponentProps<'h3'>) => (
+   Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
       <h3
          className={ny(
-            'font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight',
+            "font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
             className,
          )}
          {...props}
@@ -270,7 +278,7 @@ const components = {
       />
    ),
    Tabs: ({ className, ...props }: React.ComponentProps<typeof Tabs>) => (
-      <Tabs className={ny('relative mt-6 w-full', className)} {...props} />
+      <Tabs className={ny("relative mt-6 w-full", className)} {...props} />
    ),
    TabsList: ({
       className,
@@ -278,7 +286,7 @@ const components = {
    }: React.ComponentProps<typeof TabsList>) => (
       <TabsList
          className={ny(
-            'w-full justify-start rounded-none border-b bg-transparent p-0',
+            "w-full justify-start rounded-none border-b bg-transparent p-0",
             className,
          )}
          {...props}
@@ -290,7 +298,7 @@ const components = {
    }: React.ComponentProps<typeof TabsTrigger>) => (
       <TabsTrigger
          className={ny(
-            'text-muted-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold shadow-none transition-none data-[state=active]:shadow-none',
+            "text-muted-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold shadow-none transition-none data-[state=active]:shadow-none",
             className,
          )}
          {...props}
@@ -302,7 +310,7 @@ const components = {
    }: React.ComponentProps<typeof TabsContent>) => (
       <TabsContent
          className={ny(
-            'relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold',
+            "relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold",
             className,
          )}
          {...props}
@@ -316,14 +324,14 @@ const components = {
    ),
    Link: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
       <Link
-         className={ny('font-medium underline underline-offset-4', className)}
+         className={ny("font-medium underline underline-offset-4", className)}
          {...props}
       />
    ),
    LinkedCard: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
       <Link
          className={ny(
-            'bg-card text-card-foreground hover:bg-muted/50 flex w-full flex-col items-center rounded-xl border p-6 shadow transition-colors sm:p-10',
+            "bg-card text-card-foreground hover:bg-muted/50 flex w-full flex-col items-center rounded-xl border p-6 shadow transition-colors sm:p-10",
             className,
          )}
          {...props}
@@ -344,7 +352,7 @@ export function Mdx({ code }: MdxProps) {
    })
 
    return (
-      <article className={ny('mx-auto max-w-[120ch]')}>
+      <article className={ny("mx-auto max-w-[120ch]")}>
          <Component components={components} />
       </article>
    )
diff --git a/apps/web/components/mobile-nav.tsx b/apps/web/components/mobile-nav.tsx
index f92008fb..941fabcc 100644
--- a/apps/web/components/mobile-nav.tsx
+++ b/apps/web/components/mobile-nav.tsx
@@ -1,17 +1,18 @@
-'use client'
+"use client"
 
-import { SidebarOpen } from 'lucide-react'
-import type { LinkProps } from 'next/link'
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-import * as React from 'react'
-import { Icons } from '~/components/icons'
-import { Button } from '~/components/ui/button'
-import { ScrollArea } from '~/components/ui/scroll-area'
-import { Sheet, SheetContent, SheetTrigger } from '~/components/ui/sheet'
-import { docsConfig } from '~/config/docs'
-import { siteConfig } from '~/config/site'
-import { ny } from '~/lib/utils'
+import { SidebarOpen } from "lucide-react"
+import type { LinkProps } from "next/link"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import * as React from "react"
+import { Icons } from "~/components/icons"
+import { Button } from "~/components/ui/button"
+import { NavLabel } from "~/components/ui/nav-label"
+import { ScrollArea } from "~/components/ui/scroll-area"
+import { Sheet, SheetContent, SheetTrigger } from "~/components/ui/sheet"
+import { docsConfig } from "~/config/docs"
+import { siteConfig } from "~/config/site"
+import { ny } from "~/lib/utils"
 
 export function MobileNav() {
    const [open, setOpen] = React.useState(false)
@@ -38,64 +39,108 @@ export function MobileNav() {
             </MobileLink>
             <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
                <div className="flex flex-col space-y-3">
-                  {docsConfig.mainNav?.map(
-                     item =>
-                        // eslint-disable-next-line style/multiline-ternary
-                        item.href ? (
-                           <MobileLink
-                              key={item.href}
-                              href={item.href}
-                              onOpenChange={setOpen}
-                           >
-                              {item.title}
-                           </MobileLink>
-                        ) : (
-                           <div key={item.title} className="flex flex-col space-y-3">
-                              <h4 className="font-medium">{item.title}</h4>
-                              {item.items?.map(subItem => (
-                                 <MobileLink
-                                    key={subItem.href}
-                                    href={subItem.href!}
-                                    onOpenChange={setOpen}
-                                    className="text-muted-foreground"
-                                 >
-                                    {subItem.title}
-                                    {subItem.label && (
-                                       <span className="ml-2 rounded-md bg-[#FFBD7A] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                                          {subItem.label}
-                                       </span>
-                                    )}
-                                 </MobileLink>
-                              ))}
-                           </div>
-                        ),
+                  {docsConfig.mainNav?.map((item) =>
+                     // eslint-disable-next-line style/multiline-ternary
+                     item.href ? (
+                        <MobileLink
+                           key={item.href}
+                           href={item.href}
+                           onOpenChange={setOpen}
+                        >
+                           {item.title}
+                           {item.label && (
+                              <div className="flex gap-2 ml-2">
+                                 {Array.isArray(item.label) ? (
+                                    item.label.map((label, i) => (
+                                       <NavLabel
+                                          key={i}
+                                          text={label.text}
+                                          variant={label.variant}
+                                       />
+                                    ))
+                                 ) : (
+                                    <NavLabel
+                                       text={item.label.text}
+                                       variant={item.label.variant}
+                                    />
+                                 )}
+                              </div>
+                           )}
+                        </MobileLink>
+                     ) : (
+                        <div
+                           key={item.title}
+                           className="flex flex-col space-y-3"
+                        >
+                           <h4 className="font-medium">{item.title}</h4>
+                           {item.items?.map((subItem) => (
+                              <MobileLink
+                                 key={subItem.href}
+                                 href={subItem.href!}
+                                 onOpenChange={setOpen}
+                                 className="text-muted-foreground"
+                              >
+                                 {subItem.title}
+                                 {subItem.label && (
+                                    <div className="flex gap-2 ml-2">
+                                       {Array.isArray(subItem.label) ? (
+                                          subItem.label.map((label, i) => (
+                                             <NavLabel
+                                                key={i}
+                                                text={label.text}
+                                                variant={label.variant}
+                                             />
+                                          ))
+                                       ) : (
+                                          <NavLabel
+                                             text={subItem.label.text}
+                                             variant={subItem.label.variant}
+                                          />
+                                       )}
+                                    </div>
+                                 )}
+                              </MobileLink>
+                           ))}
+                        </div>
+                     ),
                   )}
                </div>
                <div className="flex flex-col space-y-2">
                   {docsConfig.sidebarNav.map((item, index) => (
                      <div key={index} className="flex flex-col space-y-3 pt-6">
                         <h4 className="font-medium">{item.title}</h4>
-                        {item.items?.map(item => (
+                        {item.items?.map((item) => (
                            <React.Fragment key={item.href}>
-                              {!item.disabled
-                              && (item.href
-                                 ? (
-                                       <MobileLink
-                                          href={item.href!} // Sicherstellen, dass href definiert ist
-                                          onOpenChange={setOpen}
-                                          className="text-muted-foreground"
-                                       >
-                                          {item.title}
-                                          {item.label && (
-                                             <span className="ml-2 rounded-md bg-[#FFBD7A] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                                                {item.label}
-                                             </span>
-                                          )}
-                                       </MobileLink>
-                                    )
-                                 : (
-                                       item.title
-                                    ))}
+                              {!item.disabled &&
+                                 (item.href ? (
+                                    <MobileLink
+                                       href={item.href!} // Sicherstellen, dass href definiert ist
+                                       onOpenChange={setOpen}
+                                       className="text-muted-foreground"
+                                    >
+                                       {item.title}
+                                       {item.label && (
+                                          <div className="flex gap-2 ml-2">
+                                             {Array.isArray(item.label) ? (
+                                                item.label.map((label, i) => (
+                                                   <NavLabel
+                                                      key={i}
+                                                      text={label.text}
+                                                      variant={label.variant}
+                                                   />
+                                                ))
+                                             ) : (
+                                                <NavLabel
+                                                   text={item.label.text}
+                                                   variant={item.label.variant}
+                                                />
+                                             )}
+                                          </div>
+                                       )}
+                                    </MobileLink>
+                                 ) : (
+                                    item.title
+                                 ))}
                            </React.Fragment>
                         ))}
                      </div>
diff --git a/apps/web/components/page-header.tsx b/apps/web/components/page-header.tsx
index de635efb..18796d06 100644
--- a/apps/web/components/page-header.tsx
+++ b/apps/web/components/page-header.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 function PageHeader({
    className,
@@ -6,14 +6,12 @@ function PageHeader({
    ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
    return (
-      <section
-         className={ny(
-            'mx-auto flex flex-col items-start gap-2 px-4 py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10',
-            className,
-         )}
-         {...props}
-      >
-         {children}
+      <section className={ny("border-grid border-b", className)} {...props}>
+         <div className="container-wrapper">
+            <div className="container flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
+               {children}
+            </div>
+         </div>
       </section>
    )
 }
@@ -25,7 +23,7 @@ function PageHeaderHeading({
    return (
       <h1
          className={ny(
-            'text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]',
+            "text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]",
             className,
          )}
          {...props}
@@ -40,7 +38,7 @@ function PageHeaderDescription({
    return (
       <p
          className={ny(
-            'text-foreground max-w-2xl text-balance text-lg font-light',
+            "max-w-2xl text-balance text-lg font-light text-foreground",
             className,
          )}
          {...props}
@@ -55,7 +53,7 @@ function PageActions({
    return (
       <div
          className={ny(
-            'flex w-full items-center justify-start gap-2 py-2',
+            "flex w-full items-center justify-start gap-2 pt-2",
             className,
          )}
          {...props}
diff --git a/apps/web/components/pager.tsx b/apps/web/components/pager.tsx
index 38a4034a..ed660f9d 100644
--- a/apps/web/components/pager.tsx
+++ b/apps/web/components/pager.tsx
@@ -1,11 +1,11 @@
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'
-import type { Doc } from 'content-collections'
-import Link from 'next/link'
-import type { NavItem, NavItemWithChildren } from '~/types'
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
+import type { Doc } from "content-collections"
+import Link from "next/link"
+import type { NavItem, NavItemWithChildren } from "~/types/nav"
 
-import { buttonVariants } from '~/components/ui/button'
-import { docsConfig } from '~/config/docs'
-import { ny } from '~/lib/utils'
+import { buttonVariants } from "~/components/ui/button"
+import { docsConfig } from "~/config/docs"
+import { ny } from "~/lib/utils"
 
 interface DocsPagerProps {
    doc: Doc
@@ -23,7 +23,7 @@ export function DocPager({ doc }: DocsPagerProps) {
          {pager?.prev?.href && (
             <Link
                href={pager.prev.href}
-               className={buttonVariants({ variant: 'outline' })}
+               className={buttonVariants({ variant: "outline" })}
             >
                <ChevronLeftIcon className="mr-2 size-4" />
                {pager.prev.title}
@@ -32,7 +32,7 @@ export function DocPager({ doc }: DocsPagerProps) {
          {pager?.next?.href && (
             <Link
                href={pager.next.href}
-               className={ny(buttonVariants({ variant: 'outline' }), 'ml-auto')}
+               className={ny(buttonVariants({ variant: "outline" }), "ml-auto")}
             >
                {pager.next.title}
                <ChevronRightIcon className="ml-2 size-4" />
@@ -45,13 +45,13 @@ export function DocPager({ doc }: DocsPagerProps) {
 export function getPagerForDoc(doc: Doc) {
    const flattenedLinks = [null, ...flatten(docsConfig.sidebarNav), null]
    const activeIndex = flattenedLinks.findIndex(
-      link => doc.slug === link?.href,
+      (link) => doc.slug === link?.href,
    )
    const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null
-   const next
-    = activeIndex !== flattenedLinks.length - 1
-       ? flattenedLinks[activeIndex + 1]
-       : null
+   const next =
+      activeIndex !== flattenedLinks.length - 1
+         ? flattenedLinks[activeIndex + 1]
+         : null
    return {
       prev,
       next,
@@ -63,5 +63,5 @@ export function flatten(links: NavItemWithChildren[]): NavItem[] {
       .reduce<NavItem[]>((flat, link) => {
          return flat.concat(link.items?.length ? flatten(link.items) : link)
       }, [])
-      .filter(link => !link?.disabled)
+      .filter((link) => !link?.disabled)
 }
diff --git a/apps/web/components/sidebar-nav.tsx b/apps/web/components/sidebar-nav.tsx
index cc90b9da..0ee8f691 100644
--- a/apps/web/components/sidebar-nav.tsx
+++ b/apps/web/components/sidebar-nav.tsx
@@ -1,95 +1,216 @@
-'use client'
+"use client"
 
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import type { SidebarNavItem } from 'types/nav'
+import { ExternalLinkIcon } from "@radix-ui/react-icons"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import type { SidebarNavItem } from "~/types/nav"
 
-import type { DocsConfig } from '~/config/docs'
-import { ny } from '~/lib/utils'
+import { Minus, Plus } from "lucide-react"
+import { motion } from "motion/react"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/components/ui/collapsible"
+import { NavLabel as NavLabelComponent } from "~/components/ui/nav-label"
+import { ny } from "~/lib/utils"
+import type { NavLabel } from "~/types/nav"
 
 export interface DocsSidebarNavProps {
-   config: DocsConfig
+   items: SidebarNavItem[]
 }
 
-export function DocsSidebarNav({ config }: DocsSidebarNavProps) {
+export function DocsSidebarNav({ items }: DocsSidebarNavProps) {
    const pathname = usePathname()
 
-   const items = pathname?.startsWith('/charts')
-      ? config.chartsNav
-      : config.sidebarNav
+   return items.length ? (
+      <div className="w-full">
+         {items.map((item, index) => {
+            const isCurrentCategory = item.items?.some(
+               (subItem) => subItem.href === pathname,
+            )
 
-   return items.length
-      ? (
-            <div className="w-full">
-               {items.map((item, index) => (
-                  <div key={index} className={ny('pb-4')}>
-                     <h4 className="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
-                        {item.title}
-                     </h4>
-                     {item?.items?.length && (
-                        <DocsSidebarNavItems items={item.items} pathname={pathname} />
-                     )}
+            return (
+               <Collapsible
+                  key={index}
+                  defaultOpen
+                  className="group/collapsible"
+               >
+                  <div className="pb-3">
+                     <CollapsibleTrigger asChild>
+                        <h4
+                           className={ny(
+                              "rounded-md px-2 py-1.5 text-sm font-semibold flex items-center justify-between hover:cursor-pointer hover:bg-secondary/50 transition-colors border-l-[3px] border-transparent",
+                              isCurrentCategory && "border-emerald-500",
+                           )}
+                        >
+                           <span className="flex items-center min-h-[24px]">
+                              {item.title}
+                           </span>
+                           {item.label && (
+                              <div className="flex items-center gap-1.5 ml-[-56px] mt-[-5px] min-h-[24px]">
+                                 {Array.isArray(item.label) ? (
+                                    item.label.map((label: NavLabel, i) => (
+                                       <NavLabelComponent
+                                          key={i}
+                                          text={label.text}
+                                          variant={label.variant ?? "default"}
+                                       />
+                                    ))
+                                 ) : typeof item.label === "string" ? (
+                                    <NavLabelComponent
+                                       text={item.label}
+                                       variant="default"
+                                    />
+                                 ) : (
+                                    <NavLabelComponent
+                                       text={(item.label as NavLabel).text}
+                                       variant={
+                                          (item.label as NavLabel).variant ??
+                                          "default"
+                                       }
+                                    />
+                                 )}
+                              </div>
+                           )}
+                           <div className="flex h-6 w-6 items-center justify-center">
+                              <Plus className="h-4 w-4 group-data-[state=open]/collapsible:hidden" />
+                              <Minus className="h-4 w-4 group-data-[state=closed]/collapsible:hidden" />
+                           </div>
+                        </h4>
+                     </CollapsibleTrigger>
+                     <CollapsibleContent>
+                        {item?.items && (
+                           <div
+                              className={ny(
+                                 "mt-1 border-l border-border/40",
+                                 isCurrentCategory && "border-primary/20",
+                              )}
+                           >
+                              <DocsSidebarNavItems
+                                 items={item.items}
+                                 pathname={pathname}
+                                 groupId={`group-${index}`}
+                              />
+                           </div>
+                        )}
+                     </CollapsibleContent>
                   </div>
-               ))}
-            </div>
-         )
-      : null
+               </Collapsible>
+            )
+         })}
+      </div>
+   ) : null
 }
 
 interface DocsSidebarNavItemsProps {
    items: SidebarNavItem[]
    pathname: string | null
+   groupId: string
 }
 
 export function DocsSidebarNavItems({
    items,
    pathname,
+   groupId,
 }: DocsSidebarNavItemsProps) {
-   return items?.length
-      ? (
-            <div className="grid grid-flow-row auto-rows-max text-sm">
-               {items.map((item, index) =>
-                  item.href && !item.disabled
-                     ? (
-                           <Link
-                              key={index}
-                              href={item.href}
-                              className={ny(
-                                 'group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline',
-                                 item.disabled && 'cursor-not-allowed opacity-60',
-                                 pathname === item.href
-                                    ? 'text-foreground font-medium'
-                                    : 'text-muted-foreground',
-                              )}
-                              target={item.external ? '_blank' : ''}
-                              rel={item.external ? 'noreferrer' : ''}
-                           >
-                              {item.title}
-                              {item.label && (
-                                 <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                                    {item.label}
-                                 </span>
-                              )}
-                           </Link>
-                        )
-                     : (
-                           <span
-                              key={index}
-                              className={ny(
-                                 'text-muted-foreground flex w-full cursor-not-allowed items-center rounded-md p-2 hover:underline',
-                                 item.disabled && 'cursor-not-allowed opacity-60',
-                              )}
-                           >
-                              {item.title}
-                              {item.label && (
-                                 <span className="bg-muted text-muted-foreground ml-2 rounded-md px-1.5 py-0.5 text-xs leading-none no-underline group-hover:no-underline">
-                                    {item.label}
-                                 </span>
-                              )}
-                           </span>
-                        ),
-               )}
-            </div>
-         )
-      : null
+   return items?.length ? (
+      <div className="relative grid grid-flow-row auto-rows-max gap-0.5 text-sm">
+         {items.map((item, index) =>
+            item.href && !item.disabled ? (
+               <Link
+                  key={index}
+                  href={item.href}
+                  className={ny(
+                     "group relative flex w-full items-center rounded-md border border-transparent px-2 py-1.5 transition-colors",
+                     "hover:bg-secondary/50 hover:text-foreground",
+                     item.disabled && "cursor-not-allowed opacity-60",
+                     pathname === item.href
+                        ? "font-medium text-foreground"
+                        : "text-muted-foreground",
+                  )}
+                  target={item.external ? "_blank" : ""}
+                  rel={item.external ? "noreferrer" : ""}
+               >
+                  {pathname === item.href && (
+                     <motion.div
+                        layoutId={groupId}
+                        className="absolute inset-0 rounded-md border-l-2 border-primary bg-secondary/40"
+                        initial={false}
+                        transition={{
+                           type: "spring",
+                           stiffness: 350,
+                           damping: 30,
+                        }}
+                     />
+                  )}
+                  <span className="relative z-10 truncate">{item.title}</span>
+                  {item.label && (
+                     <div className="relative z-10 flex items-center gap-1.5 ml-2">
+                        {Array.isArray(item.label) ? (
+                           item.label.map((label: NavLabel, i) => (
+                              <NavLabelComponent
+                                 key={i}
+                                 text={label.text}
+                                 variant={label.variant ?? "default"}
+                              />
+                           ))
+                        ) : typeof item.label === "string" ? (
+                           <NavLabelComponent
+                              text={item.label}
+                              variant="default"
+                           />
+                        ) : (
+                           <NavLabelComponent
+                              text={(item.label as NavLabel).text}
+                              variant={
+                                 (item.label as NavLabel).variant ?? "default"
+                              }
+                           />
+                        )}
+                     </div>
+                  )}
+                  {item.external && (
+                     <ExternalLinkIcon className="relative z-10 ml-2 size-4" />
+                  )}
+               </Link>
+            ) : (
+               <span
+                  key={index}
+                  className={ny(
+                     "flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground",
+                     item.disabled && "cursor-not-allowed opacity-60",
+                  )}
+               >
+                  {item.title}
+                  {item.label && (
+                     <div className="flex items-center gap-1.5 ml-2">
+                        {Array.isArray(item.label) ? (
+                           item.label.map((label: NavLabel, i) => (
+                              <NavLabelComponent
+                                 key={i}
+                                 text={label.text}
+                                 variant={label.variant ?? "default"}
+                              />
+                           ))
+                        ) : typeof item.label === "string" ? (
+                           <NavLabelComponent
+                              text={item.label}
+                              variant="default"
+                           />
+                        ) : (
+                           <NavLabelComponent
+                              text={(item.label as NavLabel).text}
+                              variant={
+                                 (item.label as NavLabel).variant ?? "default"
+                              }
+                           />
+                        )}
+                     </div>
+                  )}
+               </span>
+            ),
+         )}
+      </div>
+   ) : null
 }
diff --git a/apps/web/components/site-header.tsx b/apps/web/components/site-header.tsx
index a2750151..3702e3f6 100644
--- a/apps/web/components/site-header.tsx
+++ b/apps/web/components/site-header.tsx
@@ -1,27 +1,27 @@
-import { StarIcon } from '@heroicons/react/24/solid'
-import Link from 'next/link'
-import { CommandMenu } from '~/components/command-menu'
-import { Icons } from '~/components/icons'
-import { MainNav } from '~/components/main-nav'
-import { MobileNav } from '~/components/mobile-nav'
-import { ModeToggle } from '~/components/mode-toggle'
-import { buttonVariants } from '~/components/ui/button'
-import { siteConfig } from '~/config/site'
-import { ny } from '~/lib/utils'
-import NumberTicker from '~/registry/miami/ui/number-ticker'
+import { StarIcon } from "@heroicons/react/24/solid"
+import Link from "next/link"
+import { CommandMenu } from "~/components/command-menu"
+import { Icons } from "~/components/icons"
+import { MainNav } from "~/components/main-nav"
+import { MobileNav } from "~/components/mobile-nav"
+import { ModeToggle } from "~/components/mode-toggle"
+import { buttonVariants } from "~/components/ui/button"
+import { siteConfig } from "~/config/site"
+import { ny } from "~/lib/utils"
+import NumberTicker from "~/registry/miami/ui/number-ticker"
 
 export async function SiteHeader() {
    let stars = 300 // Default value
 
    try {
       const response = await fetch(
-         'https://api.github.com/repos/nyxb/nyxb-ui',
+         "https://api.github.com/repos/nyxb/nyxb-ui",
          {
             headers: process.env.GITHUB_OAUTH_TOKEN
                ? {
-                     'Authorization': `Bearer ${process.env.GITHUB_OAUTH_TOKEN}`,
-                     'Content-Type': 'application/json',
-                  }
+                    Authorization: `Bearer ${process.env.GITHUB_OAUTH_TOKEN}`,
+                    "Content-Type": "application/json",
+                 }
                : {},
             next: {
                revalidate: 3600,
@@ -33,15 +33,14 @@ export async function SiteHeader() {
          const data = await response.json()
          stars = data.stargazers_count || stars // Update stars if API response is valid
       }
-   }
-   catch (error) {
-      console.error('Error fetching GitHub stars:', error)
+   } catch (error) {
+      console.error("Error fetching GitHub stars:", error)
    }
 
    return (
       <header
          className={ny(
-            'supports-backdrop-blur:bg-background/90 bg-background/40 sticky top-0 z-40 w-full backdrop-blur-lg',
+            "supports-backdrop-blur:bg-background/90 bg-background/40 sticky top-0 z-40 w-full backdrop-blur-lg",
          )}
       >
          <div className="container flex h-16 items-center">
@@ -51,9 +50,9 @@ export async function SiteHeader() {
                <Link
                   className={ny(
                      buttonVariants({
-                        variant: 'rainbow',
+                        variant: "rainbow-outline",
                      }),
-                     'hidden md:inline-flex',
+                     "hidden md:inline-flex",
                   )}
                   target="_blank"
                   href={siteConfig.links.github}
@@ -61,14 +60,15 @@ export async function SiteHeader() {
                   <div className="flex items-center">
                      <Icons.gitHub className="size-4" />
                      <span className="ml-1 lg:hidden">Star</span>
-                     <span className="ml-1 hidden lg:inline">Star on GitHub</span>
-                     {' '}
+                     <span className="ml-1 hidden lg:inline">
+                        Star on GitHub
+                     </span>{" "}
                   </div>
                   <div className="ml-2 flex items-center gap-1 text-sm md:flex">
                      <StarIcon className="size-4 text-gray-500 transition-all duration-300 group-hover:text-yellow-300" />
                      <NumberTicker
                         value={stars}
-                        className="font-display font-medium text-white dark:text-black"
+                        className="font-display font-medium text-white dark:text-white"
                      />
                   </div>
                </Link>
@@ -85,9 +85,9 @@ export async function SiteHeader() {
                      <div
                         className={ny(
                            buttonVariants({
-                              variant: 'ghost',
+                              variant: "ghost",
                            }),
-                           'w-9 px-0',
+                           "w-9 px-0",
                         )}
                      >
                         <Icons.discord className="size-4" />
@@ -102,9 +102,9 @@ export async function SiteHeader() {
                      <div
                         className={ny(
                            buttonVariants({
-                              variant: 'ghost',
+                              variant: "ghost",
                            }),
-                           'w-9 px-0',
+                           "w-9 px-0",
                         )}
                      >
                         <Icons.gitHub className="size-4" />
@@ -119,9 +119,9 @@ export async function SiteHeader() {
                      <div
                         className={ny(
                            buttonVariants({
-                              variant: 'ghost',
+                              variant: "ghost",
                            }),
-                           'w-9 px-0',
+                           "w-9 px-0",
                         )}
                      >
                         <Icons.twitter className="size-4 fill-current" />
diff --git a/apps/web/components/theme-customizer.tsx b/apps/web/components/theme-customizer.tsx
index a1dac20a..9a8815b8 100644
--- a/apps/web/components/theme-customizer.tsx
+++ b/apps/web/components/theme-customizer.tsx
@@ -1,22 +1,15 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import {
-   CheckIcon,
-   CopyIcon,
-   InfoCircledIcon,
-   MoonIcon,
-   ResetIcon,
-   SunIcon,
-} from '@radix-ui/react-icons'
-import template from 'lodash.template'
-import { useTheme } from 'next-themes'
+import template from "lodash/template"
+import { Check, Copy, Moon, Repeat, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { useConfig } from '~/hooks/use-config'
-import { copyToClipboardWithMeta } from '~/components/copy-button2'
-import { ThemeWrapper } from '~/components/theme-wrapper2'
-import { Button } from '~/registry/miami/ui/button'
+import { copyToClipboardWithMeta } from "~/components/copy-button"
+import { ThemeWrapper } from "~/components/theme-wrapper"
+import { useConfig } from "~/hooks/use-config"
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Dialog,
    DialogContent,
@@ -24,28 +17,22 @@ import {
    DialogHeader,
    DialogTitle,
    DialogTrigger,
-} from '~/registry/miami/ui/dialog'
+} from "~/registry/miami/ui/dialog"
 import {
    Drawer,
    DrawerContent,
    DrawerTrigger,
-} from '~/registry/miami/ui/drawer'
-import { Label } from '~/registry/miami/ui/label'
+} from "~/registry/miami/ui/drawer"
+import { Label } from "~/registry/miami/ui/label"
 import {
    Popover,
    PopoverContent,
    PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-import { Skeleton } from '~/registry/miami/ui/skeleton'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-import type { BaseColor } from '~/registry/registry-base-colors'
-import { baseColors } from '~/registry/registry-base-colors'
+} from "~/registry/miami/ui/popover"
+import { Skeleton } from "~/registry/miami/ui/skeleton"
+import { type BaseColor, baseColors } from "~/registry/registry-base-colors"
 
-import '~/styles/mdx.css'
+import "~/styles/mdx2.css"
 
 export function ThemeCustomizer() {
    const [config, setConfig] = useConfig()
@@ -80,78 +67,6 @@ export function ThemeCustomizer() {
                   <Customizer />
                </PopoverContent>
             </Popover>
-            <div className="ml-2 hidden items-center gap-0.5">
-               {mounted
-                  ? (
-                        <>
-                           {['zinc', 'rose', 'blue', 'green', 'orange'].map((color) => {
-                              const baseColor = baseColors.find(
-                                 baseColor => baseColor.name === color,
-                              )
-                              const isActive = config.theme === color
-
-                              if (!baseColor) {
-                                 return null
-                              }
-
-                              return (
-                                 <Tooltip key={baseColor.name}>
-                                    <TooltipTrigger asChild>
-                                       <button
-                                          onClick={() =>
-                                             setConfig({
-                                                ...config,
-                                                theme: baseColor.name,
-                                             })}
-                                          className={ny(
-                                             'flex size-8 items-center justify-center rounded-full border-2 text-xs',
-                                             isActive
-                                                ? 'border-[--theme-primary]'
-                                                : 'border-transparent',
-                                          )}
-                                          style={
-                                             {
-                                                '--theme-primary': `hsl(${
-                              baseColor?.activeColor[
-                                mode === 'dark' ? 'dark' : 'light'
-                              ]
-                            })`,
-                                             } as React.CSSProperties
-                                          }
-                                       >
-                                          <span
-                                             className={ny(
-                                                'flex size-5 items-center justify-center rounded-full bg-[--theme-primary]',
-                                             )}
-                                          >
-                                             {isActive && (
-                                                <CheckIcon className="size-4 text-white" />
-                                             )}
-                                          </span>
-                                          <span className="sr-only">{baseColor.label}</span>
-                                       </button>
-                                    </TooltipTrigger>
-                                    <TooltipContent
-                                       align="center"
-                                       className="rounded-lg bg-zinc-900 text-zinc-50"
-                                    >
-                                       {baseColor.label}
-                                    </TooltipContent>
-                                 </Tooltip>
-                              )
-                           })}
-                        </>
-                     )
-                  : (
-                        <div className="mr-1 flex items-center gap-4">
-                           <Skeleton className="size-5 rounded-full" />
-                           <Skeleton className="size-5 rounded-full" />
-                           <Skeleton className="size-5 rounded-full" />
-                           <Skeleton className="size-5 rounded-full" />
-                           <Skeleton className="size-5 rounded-full" />
-                        </div>
-                     )}
-            </div>
          </div>
          <CopyCodeButton variant="ghost" size="sm" className="[&_svg]:hidden" />
       </div>
@@ -175,147 +90,91 @@ function Customizer() {
          <div className="flex items-start pt-4 md:pt-0">
             <div className="space-y-1 pr-2">
                <div className="font-semibold leading-none tracking-tight">
-                  Customize
+                  Theme Customizer
                </div>
-               <div className="text-muted-foreground text-xs">
-                  Pick a style and color for your components.
+               <div className="text-xs text-muted-foreground">
+                  Customize your components colors.
                </div>
             </div>
             <Button
                variant="ghost"
                size="icon"
-               className="ml-auto rounded-lg"
+               className="ml-auto rounded-[0.5rem]"
                onClick={() => {
                   setConfig({
                      ...config,
-                     theme: 'zinc',
+                     theme: "zinc",
                      radius: 0.5,
                   })
                }}
             >
-               <ResetIcon />
+               <Repeat />
                <span className="sr-only">Reset</span>
             </Button>
          </div>
          <div className="flex flex-1 flex-col space-y-4 md:space-y-6">
-            <div className="space-y-1.5">
-               <div className="flex w-full items-center">
-                  <Label className="text-xs">Style</Label>
-                  <Popover>
-                     <PopoverTrigger>
-                        <InfoCircledIcon className="ml-1 size-3" />
-                        <span className="sr-only">About styles</span>
-                     </PopoverTrigger>
-                     <PopoverContent
-                        className="space-y-3 rounded-lg text-sm"
-                        side="right"
-                        align="start"
-                        alignOffset={-20}
-                     >
-                        <p className="font-medium">
-                           What is the difference between the Miami and Default style?
-                        </p>
-                        <p>
-                           A style comes with its own set of components, animations,
-                           icons and more.
-                        </p>
-                        <p>
-                           The
-                           {' '}
-                           <span className="font-medium">Default</span>
-                           {' '}
-                           style has
-                           larger inputs, uses lucide-react for icons and
-                           tailwindcss-animate for animations.
-                        </p>
-                        <p>
-                           The
-                           {' '}
-                           <span className="font-medium">Miami</span>
-                           {' '}
-                           style ships
-                           with smaller buttons and cards with shadows. It uses icons
-                           from Radix Icons.
-                        </p>
-                     </PopoverContent>
-                  </Popover>
-               </div>
-               <div className="grid grid-cols-3 gap-2">
-                  <Button
-                     variant="outline"
-                     size="sm"
-                     onClick={() => setConfig({ ...config, style: 'default' })}
-                     className={ny(
-                        config.style === 'default' && 'border-primary border-2',
-                     )}
-                  >
-                     Default
-                  </Button>
-                  <Button
-                     variant="outline"
-                     size="sm"
-                     onClick={() => setConfig({ ...config, style: 'miami' })}
-                     className={ny(
-                        config.style === 'miami' && 'border-primary border-2',
-                     )}
-                  >
-                     Miami
-                  </Button>
-               </div>
-            </div>
             <div className="space-y-1.5">
                <Label className="text-xs">Color</Label>
                <div className="grid grid-cols-3 gap-2">
-                  {baseColors.map((theme) => {
-                     const isActive = config.theme === theme.name
+                  {baseColors
+                     .filter(
+                        (theme) =>
+                           !["slate", "stone", "gray", "neutral"].includes(
+                              theme.name,
+                           ),
+                     )
+                     .map((theme) => {
+                        const isActive = config.theme === theme.name
 
-                     return mounted
-                        ? (
-                              <Button
-                                 variant="outline"
-                                 size="sm"
-                                 key={theme.name}
-                                 onClick={() => {
-                                    setConfig({
-                                       ...config,
-                                       theme: theme.name,
-                                    })
-                                 }}
+                        return mounted ? (
+                           <Button
+                              variant={"outline"}
+                              size="sm"
+                              key={theme.name}
+                              onClick={() => {
+                                 setConfig({
+                                    ...config,
+                                    theme: theme.name,
+                                 })
+                              }}
+                              className={ny(
+                                 "justify-start",
+                                 isActive && "border-2 border-primary",
+                              )}
+                              style={
+                                 {
+                                    "--theme-primary": `hsl(${
+                                       theme?.activeColor[
+                                          mode === "dark" ? "dark" : "light"
+                                       ]
+                                    })`,
+                                 } as React.CSSProperties
+                              }
+                           >
+                              <span
                                  className={ny(
-                                    'justify-start',
-                                    isActive && 'border-primary border-2',
+                                    "mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]",
                                  )}
-                                 style={
-                                    {
-                                       '--theme-primary': `hsl(${
-                        theme?.activeColor[mode === 'dark' ? 'dark' : 'light']
-                      })`,
-                                    } as React.CSSProperties
-                                 }
                               >
-                                 <span
-                                    className={ny(
-                                       'mr-1 flex size-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]',
-                                    )}
-                                 >
-                                    {isActive && <CheckIcon className="size-4 text-white" />}
-                                 </span>
-                                 {theme.label}
-                              </Button>
-                           )
-                        : (
-                              <Skeleton className="h-8 w-full" key={theme.name} />
-                           )
-                  })}
+                                 {isActive && (
+                                    <Check className="h-4 w-4 text-white" />
+                                 )}
+                              </span>
+                              {theme.label}
+                           </Button>
+                        ) : (
+                           <Skeleton className="h-8 w-full" key={theme.name} />
+                        )
+                     })}
                </div>
             </div>
             <div className="space-y-1.5">
                <Label className="text-xs">Radius</Label>
                <div className="grid grid-cols-5 gap-2">
-                  {['0', '0.3', '0.5', '0.75', '1.0'].map((value) => {
+                  {["0", "0.3", "0.5", "0.75", "1.0"].map((value) => {
                      return (
                         <Button
-                           variant="outline"
+                           variant={"outline"}
                            size="sm"
                            key={value}
                            onClick={() => {
@@ -325,8 +184,8 @@ function Customizer() {
                               })
                            }}
                            className={ny(
-                              config.radius === Number.parseFloat(value)
-                              && 'border-primary border-2',
+                              config.radius === Number.parseFloat(value) &&
+                                 "border-2 border-primary",
                            )}
                         >
                            {value}
@@ -338,35 +197,37 @@ function Customizer() {
             <div className="space-y-1.5">
                <Label className="text-xs">Mode</Label>
                <div className="grid grid-cols-3 gap-2">
-                  {mounted
-                     ? (
-                           <>
-                              <Button
-                                 variant="outline"
-                                 size="sm"
-                                 onClick={() => setMode('light')}
-                                 className={ny(mode === 'light' && 'border-primary border-2')}
-                              >
-                                 <SunIcon className="mr-1 -translate-x-1" />
-                                 Light
-                              </Button>
-                              <Button
-                                 variant="outline"
-                                 size="sm"
-                                 onClick={() => setMode('dark')}
-                                 className={ny(mode === 'dark' && 'border-primary border-2')}
-                              >
-                                 <MoonIcon className="mr-1 -translate-x-1" />
-                                 Dark
-                              </Button>
-                           </>
-                        )
-                     : (
-                           <>
-                              <Skeleton className="h-8 w-full" />
-                              <Skeleton className="h-8 w-full" />
-                           </>
-                        )}
+                  {mounted ? (
+                     <>
+                        <Button
+                           variant={"outline"}
+                           size="sm"
+                           onClick={() => setMode("light")}
+                           className={ny(
+                              mode === "light" && "border-2 border-primary",
+                           )}
+                        >
+                           <Sun className="mr-1 -translate-x-1" />
+                           Light
+                        </Button>
+                        <Button
+                           variant={"outline"}
+                           size="sm"
+                           onClick={() => setMode("dark")}
+                           className={ny(
+                              mode === "dark" && "border-2 border-primary",
+                           )}
+                        >
+                           <Moon className="mr-1 -translate-x-1" />
+                           Dark
+                        </Button>
+                     </>
+                  ) : (
+                     <>
+                        <Skeleton className="h-8 w-full" />
+                        <Skeleton className="h-8 w-full" />
+                     </>
+                  )}
                </div>
             </div>
          </div>
@@ -379,7 +240,7 @@ function CopyCodeButton({
    ...props
 }: React.ComponentProps<typeof Button>) {
    const [config] = useConfig()
-   const activeTheme = baseColors.find(theme => theme.name === config.theme)
+   const activeTheme = baseColors.find((theme) => theme.name === config.theme)
    const [hasCopied, setHasCopied] = React.useState(false)
 
    React.useEffect(() => {
@@ -393,31 +254,28 @@ function CopyCodeButton({
          {activeTheme && (
             <Button
                onClick={() => {
-                  copyToClipboardWithMeta(getThemeCode(activeTheme, config.radius), {
-                     name: 'copy_theme_code',
-                     properties: {
-                        theme: activeTheme.name,
-                        radius: config.radius,
+                  copyToClipboardWithMeta(
+                     getThemeCode(activeTheme, config.radius),
+                     {
+                        name: "copy_theme_code",
+                        properties: {
+                           theme: activeTheme.name,
+                           radius: config.radius,
+                        },
                      },
-                  })
+                  )
                   setHasCopied(true)
                }}
-               className={ny('md:hidden', className)}
+               className={ny("md:hidden", className)}
                {...props}
             >
-               {hasCopied
-                  ? (
-                        <CheckIcon className="mr-2 size-4" />
-                     )
-                  : (
-                        <CopyIcon className="mr-2 size-4" />
-                     )}
+               {hasCopied ? <Check /> : <Copy />}
                Copy code
             </Button>
          )}
          <Dialog>
             <DialogTrigger asChild>
-               <Button className={ny('hidden md:flex', className)} {...props}>
+               <Button className={ny("hidden md:flex", className)} {...props}>
                   Copy code
                </Button>
             </DialogTrigger>
@@ -437,7 +295,7 @@ function CopyCodeButton({
                            copyToClipboardWithMeta(
                               getThemeCode(activeTheme, config.radius),
                               {
-                                 name: 'copy_theme_code',
+                                 name: "copy_theme_code",
                                  properties: {
                                     theme: activeTheme.name,
                                     radius: config.radius,
@@ -446,15 +304,9 @@ function CopyCodeButton({
                            )
                            setHasCopied(true)
                         }}
-                        className="bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground absolute right-4 top-4"
+                        className="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground"
                      >
-                        {hasCopied
-                           ? (
-                                 <CheckIcon className="mr-2 size-4" />
-                              )
-                           : (
-                                 <CopyIcon className="mr-2 size-4" />
-                              )}
+                        {hasCopied ? <Check /> : <Copy />}
                         Copy
                      </Button>
                   )}
@@ -467,23 +319,157 @@ function CopyCodeButton({
 
 function CustomizerCode() {
    const [config] = useConfig()
-   const activeTheme = baseColors.find(theme => theme.name === config.theme)
-
-   if (!activeTheme)
-      return null
-
-   const themeCode = getThemeCode(activeTheme, config.radius)
+   const activeTheme = baseColors.find((theme) => theme.name === config.theme)
 
    return (
       <ThemeWrapper defaultTheme="zinc" className="relative space-y-4">
          <div data-rehype-pretty-code-fragment="">
             <pre className="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900">
-               <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm text-white">
-                  {themeCode.split('\n').map((line, i) => (
-                     <span key={i} className="line block">
-                        {line}
-                     </span>
+               <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
+                  <span className="line text-white">@layer base &#123;</span>
+                  <span className="line text-white">
+                     &nbsp;&nbsp;:root &#123;
+                  </span>
+                  <span className="line text-white">
+                     &nbsp;&nbsp;&nbsp;&nbsp;--background:{" "}
+                     {activeTheme?.cssVars.light["background"]};
+                  </span>
+                  <span className="line text-white">
+                     &nbsp;&nbsp;&nbsp;&nbsp;--foreground:{" "}
+                     {activeTheme?.cssVars.light["foreground"]};
+                  </span>
+                  {[
+                     "card",
+                     "popover",
+                     "primary",
+                     "secondary",
+                     "muted",
+                     "accent",
+                     "destructive",
+                  ].map((prefix) => (
+                     <>
+                        <span className="line text-white">
+                           &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                           {
+                              activeTheme?.cssVars.light[
+                                 prefix as keyof typeof activeTheme.cssVars.light
+                              ]
+                           }
+                           ;
+                        </span>
+                        <span className="line text-white">
+                           &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}-foreground:{" "}
+                           {
+                              activeTheme?.cssVars.light[
+                                 `${prefix}-foreground` as keyof typeof activeTheme.cssVars.light
+                              ]
+                           }
+                           ;
+                        </span>
+                     </>
                   ))}
+                  <span className="line text-white">
+                     &nbsp;&nbsp;&nbsp;&nbsp;--border:{" "}
+                     {activeTheme?.cssVars.light["border"]};
+                  </span>
+                  <span className="line text-white">
+                     &nbsp;&nbsp;&nbsp;&nbsp;--input:{" "}
+                     {activeTheme?.cssVars.light["input"]};
+                  </span>
+                  <span className="line text-white">
+                     &nbsp;&nbsp;&nbsp;&nbsp;--ring:{" "}
+                     {activeTheme?.cssVars.light["ring"]};
+                  </span>
+                  <span className="line text-white">
+                     &nbsp;&nbsp;&nbsp;&nbsp;--radius: {config.radius}rem;
+                  </span>
+                  {["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
+                     (prefix) => (
+                        <>
+                           <span className="line text-white">
+                              &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                              {
+                                 activeTheme?.cssVars.light[
+                                    prefix as keyof typeof activeTheme.cssVars.light
+                                 ]
+                              }
+                              ;
+                           </span>
+                        </>
+                     ),
+                  )}
+                  <span className="line text-white">&nbsp;&nbsp;&#125;</span>
+                  <span className="line text-white">&nbsp;</span>
+                  <span className="line text-white">
+                     &nbsp;&nbsp;.dark &#123;
+                  </span>
+                  <span className="line text-white">
+                     &nbsp;&nbsp;&nbsp;&nbsp;--background:{" "}
+                     {activeTheme?.cssVars.dark["background"]};
+                  </span>
+                  <span className="line text-white">
+                     &nbsp;&nbsp;&nbsp;&nbsp;--foreground:{" "}
+                     {activeTheme?.cssVars.dark["foreground"]};
+                  </span>
+                  {[
+                     "card",
+                     "popover",
+                     "primary",
+                     "secondary",
+                     "muted",
+                     "accent",
+                     "destructive",
+                  ].map((prefix) => (
+                     <>
+                        <span className="line text-white">
+                           &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                           {
+                              activeTheme?.cssVars.dark[
+                                 prefix as keyof typeof activeTheme.cssVars.dark
+                              ]
+                           }
+                           ;
+                        </span>
+                        <span className="line text-white">
+                           &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}-foreground:{" "}
+                           {
+                              activeTheme?.cssVars.dark[
+                                 `${prefix}-foreground` as keyof typeof activeTheme.cssVars.dark
+                              ]
+                           }
+                           ;
+                        </span>
+                     </>
+                  ))}
+                  <span className="line text-white">
+                     &nbsp;&nbsp;&nbsp;&nbsp;--border:{" "}
+                     {activeTheme?.cssVars.dark["border"]};
+                  </span>
+                  <span className="line text-white">
+                     &nbsp;&nbsp;&nbsp;&nbsp;--input:{" "}
+                     {activeTheme?.cssVars.dark["input"]};
+                  </span>
+                  <span className="line text-white">
+                     &nbsp;&nbsp;&nbsp;&nbsp;--ring:{" "}
+                     {activeTheme?.cssVars.dark["ring"]};
+                  </span>
+                  {["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
+                     (prefix) => (
+                        <>
+                           <span className="line text-white">
+                              &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                              {
+                                 activeTheme?.cssVars.dark[
+                                    prefix as keyof typeof activeTheme.cssVars.dark
+                                 ]
+                              }
+                              ;
+                           </span>
+                        </>
+                     ),
+                  )}
+                  <span className="line text-white">&nbsp;&nbsp;&#125;</span>
+                  <span className="line text-white">&#125;</span>
                </code>
             </pre>
          </div>
@@ -493,7 +479,7 @@ function CustomizerCode() {
 
 function getThemeCode(theme: BaseColor, radius: number) {
    if (!theme) {
-      return ''
+      return ""
    }
 
    return template(BASE_STYLES_WITH_VARIABLES)({
diff --git a/apps/web/components/theme-provider.tsx b/apps/web/components/theme-provider.tsx
index 6f587211..3b11e1ac 100644
--- a/apps/web/components/theme-provider.tsx
+++ b/apps/web/components/theme-provider.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { ThemeProvider as NextThemesProvider } from 'next-themes'
-import type { ThemeProviderProps } from 'next-themes/dist/types'
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
diff --git a/apps/web/components/theme-wrapper.tsx b/apps/web/components/theme-wrapper.tsx
index 1e3b4168..764e5134 100644
--- a/apps/web/components/theme-wrapper.tsx
+++ b/apps/web/components/theme-wrapper.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { ny } from '~/lib/utils'
-import { useConfig } from '~/hooks/use-config'
+import { useConfig } from "~/hooks/use-config"
+import { ny } from "~/lib/utils"
 
-interface ThemeWrapperProps extends React.ComponentProps<'div'> {
+interface ThemeWrapperProps extends React.ComponentProps<"div"> {
    defaultTheme?: string
 }
 
@@ -17,13 +17,13 @@ export function ThemeWrapper({
    return (
       <div
          className={ny(
-        `theme-${defaultTheme || config.theme}`,
-        'w-full',
-        className,
+            `theme-${defaultTheme || config.theme}`,
+            "w-full",
+            className,
          )}
          style={
             {
-               '--radius': `${defaultTheme ? 0.5 : config.radius}rem`,
+               "--radius": `${defaultTheme ? 0.5 : config.radius}rem`,
             } as React.CSSProperties
          }
       >
diff --git a/apps/web/components/themes-selector.tsx b/apps/web/components/themes-selector.tsx
index 4eb914a0..b6efc9d3 100644
--- a/apps/web/components/themes-selector.tsx
+++ b/apps/web/components/themes-selector.tsx
@@ -1,33 +1,29 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { useTheme } from 'next-themes'
+import { useTheme } from "next-themes"
+import * as React from "react"
 
-import type { Theme } from '~/lib/themes'
-import { THEMES } from '~/lib/themes'
-import { ny } from '~/lib/utils'
-import { useMediaQuery } from '~/hooks/use-media-query'
-import { useThemesConfig } from '~/hooks/use-themes-config'
-import { Skeleton } from '~/registry/miami/ui/skeleton'
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/miami/ui/toggle-group'
+import { useMediaQuery } from "~/hooks/use-media-query"
+import { useThemesConfig } from "~/hooks/use-themes-config"
+import { THEMES, type Theme } from "~/lib/themes"
+import { ny } from "~/lib/utils"
+import { Skeleton } from "~/registry/miami/ui/skeleton"
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
 import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
+} from "~/registry/miami/ui/tooltip"
 
 export function ThemesSwitcher({
    themes = THEMES,
    className,
-}: React.ComponentProps<'div'> & { themes?: Theme[] }) {
+}: React.ComponentProps<"div"> & { themes?: Theme[] }) {
    const { theme: mode } = useTheme()
    const [mounted, setMounted] = React.useState(false)
    const { themesConfig, setThemesConfig } = useThemesConfig()
    const activeTheme = themesConfig.activeTheme
-   const isDesktop = useMediaQuery('(min-width: 1024px)')
+   const isDesktop = useMediaQuery("(min-width: 1024px)")
 
    React.useEffect(() => {
       setMounted(true)
@@ -37,16 +33,16 @@ export function ThemesSwitcher({
       return (
          <div
             className={ny(
-               'flex items-center justify-center gap-0.5 py-4 lg:flex-col lg:justify-start lg:gap-1',
+               "flex items-center justify-center gap-0.5 py-4 lg:flex-col lg:justify-start lg:gap-1",
                className,
             )}
          >
-            {themes.map(theme => (
+            {themes.map((theme) => (
                <div
                   key={theme.id}
-                  className="flex size-10 items-center justify-center rounded-lg border-2 border-transparent"
+                  className="flex h-10 w-10 items-center justify-center rounded-lg border-2 border-transparent"
                >
-                  <Skeleton className="size-6 rounded-sm" />
+                  <Skeleton className="h-6 w-6 rounded-sm" />
                </div>
             ))}
          </div>
@@ -58,7 +54,7 @@ export function ThemesSwitcher({
          type="single"
          value={activeTheme.name}
          onValueChange={(value) => {
-            const theme = themes.find(theme => theme.name === value)
+            const theme = themes.find((theme) => theme.name === value)
             if (!theme) {
                return
             }
@@ -66,15 +62,17 @@ export function ThemesSwitcher({
             setThemesConfig({ ...themesConfig, activeTheme: theme })
          }}
          className={ny(
-            'flex items-center justify-center gap-0.5 py-4 lg:flex-col lg:justify-start lg:gap-1',
+            "flex items-center justify-center gap-0.5 py-4 lg:flex-col lg:justify-start lg:gap-1",
             className,
          )}
       >
          {themes.map((theme) => {
             const isActive = theme.name === activeTheme.name
-            const isDarkTheme = ['Midnight'].includes(theme.name)
-            const cssVars
-          = mounted && mode === 'dark' ? theme.cssVars.dark : theme.cssVars.light
+            const isDarkTheme = ["Midnight"].includes(theme.name)
+            const cssVars =
+               mounted && mode === "dark"
+                  ? theme.cssVars.dark
+                  : theme.cssVars.light
 
             return (
                <Tooltip key={theme.name}>
@@ -82,37 +80,41 @@ export function ThemesSwitcher({
                      <ToggleGroupItem
                         value={theme.name}
                         className={ny(
-                           'group flex size-10 shrink-0 items-center justify-center rounded-lg border-2 border-transparent p-0 hover:bg-transparent focus-visible:bg-transparent aria-checked:border-[--color-1]',
-                           mounted && isDarkTheme && mode !== 'dark' ? 'invert-[1]' : '',
+                           "group flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border-2 border-transparent p-0 hover:bg-transparent focus-visible:bg-transparent aria-checked:border-[--color-1]",
+                           mounted && isDarkTheme && mode !== "dark"
+                              ? "invert-[1]"
+                              : "",
                         )}
                         style={
                            {
                               ...cssVars,
-                              '--color-1': 'hsl(var(--chart-1))',
-                              '--color-2': 'hsl(var(--chart-2))',
-                              '--color-3': 'hsl(var(--chart-3))',
-                              '--color-4': 'hsl(var(--chart-4))',
+                              "--color-1": "hsl(var(--chart-1))",
+                              "--color-2": "hsl(var(--chart-2))",
+                              "--color-3": "hsl(var(--chart-3))",
+                              "--color-4": "hsl(var(--chart-4))",
                            } as React.CSSProperties
                         }
                      >
-                        <div className="size-6 overflow-hidden rounded-sm">
+                        <div className="h-6 w-6 overflow-hidden rounded-sm">
                            <div
                               className={ny(
-                                 'grid size-12 -translate-x-1/4 -translate-y-1/4 grid-cols-2 overflow-hidden rounded-md transition-all ease-in-out group-hover:rotate-45',
-                                 isActive ? 'rotate-45 group-hover:rotate-0' : 'rotate-0',
+                                 "grid h-12 w-12 -translate-x-1/4 -translate-y-1/4 grid-cols-2 overflow-hidden rounded-md transition-all ease-in-out group-hover:rotate-45",
+                                 isActive
+                                    ? "rotate-45 group-hover:rotate-0"
+                                    : "rotate-0",
                               )}
                            >
-                              <span className="flex size-6 bg-[--color-1]" />
-                              <span className="flex size-6 bg-[--color-2]" />
-                              <span className="flex size-6 bg-[--color-3]" />
-                              <span className="flex size-6 bg-[--color-4]" />
+                              <span className="flex h-6 w-6 bg-[--color-1]" />
+                              <span className="flex h-6 w-6 bg-[--color-2]" />
+                              <span className="flex h-6 w-6 bg-[--color-3]" />
+                              <span className="flex h-6 w-6 bg-[--color-4]" />
                               <span className="sr-only">{theme.name}</span>
                            </div>
                         </div>
                      </ToggleGroupItem>
                   </TooltipTrigger>
                   <TooltipContent
-                     side={isDesktop ? 'left' : 'top'}
+                     side={isDesktop ? "left" : "top"}
                      className="bg-black text-white"
                   >
                      {theme.name}
diff --git a/apps/web/components/themes-styles.tsx b/apps/web/components/themes-styles.tsx
index 64dad134..799f4d32 100644
--- a/apps/web/components/themes-styles.tsx
+++ b/apps/web/components/themes-styles.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { useThemesConfig } from '~/hooks/use-themes-config'
+import { useThemesConfig } from "~/hooks/use-themes-config"
 
 export function ThemesStyle() {
    const { themesConfig } = useThemesConfig()
@@ -15,15 +15,15 @@ export function ThemesStyle() {
 .themes-wrapper,
 [data-chart] {
   ${Object.entries(themesConfig.activeTheme.cssVars.light)
-    .map(([key, value]) => `${key}: ${value};`)
-    .join('\n')}
+     .map(([key, value]) => `${key}: ${value};`)
+     .join("\n")}
 }
 
 .dark .themes-wrapper,
 .dark [data-chart] {
   ${Object.entries(themesConfig.activeTheme.cssVars.dark)
-    .map(([key, value]) => `${key}: ${value};`)
-    .join('\n')}
+     .map(([key, value]) => `${key}: ${value};`)
+     .join("\n")}
 }
   `}
       </style>
diff --git a/apps/web/components/ui/badge.tsx b/apps/web/components/ui/badge.tsx
index ea4a1af0..701bde8c 100644
--- a/apps/web/components/ui/badge.tsx
+++ b/apps/web/components/ui/badge.tsx
@@ -1,31 +1,31 @@
-import { type VariantProps, cva } from 'class-variance-authority'
-import * as React from 'react'
+import { type VariantProps, cva } from "class-variance-authority"
+import type * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const badgeVariants = cva(
-   'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
    {
       variants: {
          variant: {
             default:
-          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+               "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
             secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+               "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
             destructive:
-          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-            outline: 'text-foreground',
+               "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+            outline: "text-foreground",
          },
       },
       defaultVariants: {
-         variant: 'default',
+         variant: "default",
       },
    },
 )
 
 export interface BadgeProps
    extends React.HTMLAttributes<HTMLDivElement>,
-   VariantProps<typeof badgeVariants> {}
+      VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
    return (
diff --git a/apps/web/components/ui/nav-label.tsx b/apps/web/components/ui/nav-label.tsx
new file mode 100644
index 00000000..b06430a4
--- /dev/null
+++ b/apps/web/components/ui/nav-label.tsx
@@ -0,0 +1,43 @@
+import { type VariantProps, cva } from "class-variance-authority"
+import type * as React from "react"
+import { ny } from "~/lib/utils"
+import type { NavLabel as NavLabelType } from "~/types/nav"
+
+const labelVariants = cva(
+   "inline-flex items-center rounded-md px-4 py-1 text-xs font-semibold -translate-y-1",
+   {
+      variants: {
+         variant: {
+            default:
+               "group relative border-0 border-input bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--primary))_40%,hsl(var(--primary-foreground))_60%)] text-primary [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--primary))_40%,hsl(var(--primary-foreground))_60%)] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--primary))_40%,hsl(var(--primary-foreground))_60%)]",
+            new: "group relative cursor-pointer border-0 border-input bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(142,76%,46%)_40%,hsl(142,76%,56%)_60%)] text-emerald-700 [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(142,76%,46%)_40%,hsl(142,76%,56%)_60%)] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(142,76%,46%)_40%,hsl(142,76%,56%)_60%)]",
+            beta: "group relative cursor-pointer border-0 border-input bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(221,83%,53%)_40%,hsl(221,83%,63%)_60%)] text-blue-700 [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(221,83%,53%)_40%,hsl(221,83%,63%)_60%)] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(221,83%,53%)_40%,hsl(221,83%,63%)_60%)]",
+            canary:
+               "group relative cursor-pointer border-0 border-input bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(43,96%,56%)_40%,hsl(43,96%,66%)_60%)] text-amber-700 [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(43,96%,56%)_40%,hsl(43,96%,66%)_60%)] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(43,96%,56%)_40%,hsl(43,96%,66%)_60%)]",
+            experimental:
+               "group relative cursor-pointer border-0 border-input bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(271,91%,65%)_40%,hsl(271,91%,75%)_60%)] text-purple-700 [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(271,91%,65%)_40%,hsl(271,91%,75%)_60%)] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(271,91%,65%)_40%,hsl(271,91%,75%)_60%)]",
+            deprecated:
+               "group relative cursor-pointer border-0 border-input bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(0,84%,60%)_40%,hsl(0,84%,70%)_60%)] text-red-700 [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(0,84%,60%)_40%,hsl(0,84%,70%)_60%)] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(0,84%,60%)_40%,hsl(0,84%,70%)_60%)]",
+         },
+      },
+      defaultVariants: {
+         variant: "default",
+      },
+   },
+)
+
+export interface NavLabelProps
+   extends React.HTMLAttributes<HTMLSpanElement>,
+      VariantProps<typeof labelVariants> {
+   text: string
+}
+
+function NavLabel({ text, variant, className, ...props }: NavLabelProps) {
+   return (
+      <span className={ny(labelVariants({ variant }), className)} {...props}>
+         {text}
+      </span>
+   )
+}
+
+export { NavLabel, labelVariants }
diff --git a/apps/web/components/v0-button.tsx b/apps/web/components/v0-button.tsx
new file mode 100644
index 00000000..69f6eacb
--- /dev/null
+++ b/apps/web/components/v0-button.tsx
@@ -0,0 +1,159 @@
+"use client"
+
+import { Loader2 } from "lucide-react"
+import * as React from "react"
+import { useFormStatus } from "react-dom"
+import { toast } from "sonner"
+import { editInV0 } from "~/actions/edit-in-v0"
+
+import { Button, type ButtonProps } from "~/components/ui/button"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipTrigger,
+} from "~/components/ui/tooltip"
+import { ny } from "~/lib/utils"
+import type { Style } from "~/registry/registry-styles"
+
+type Size = "default" | "icon"
+
+function V0Tooltip({
+   size,
+   style = "default",
+   children,
+}: React.PropsWithChildren<{ size: Size; style?: Style["name"] }>) {
+   if (size === "default") {
+      return <>{children}</>
+   }
+
+   return (
+      <Tooltip>
+         <TooltipTrigger asChild>
+            {style === "miami" ? (
+               <span tabIndex={-1}>{children}</span>
+            ) : (
+               <>{children}</>
+            )}
+         </TooltipTrigger>
+         <TooltipContent>
+            {style === "miami" ? <>Not available in Miami</> : <>Open in v0</>}
+         </TooltipContent>
+      </Tooltip>
+   )
+}
+
+export function V0Button({
+   name,
+   size = "default",
+   disabled,
+   className,
+   ...props
+}: {
+   name: string
+   size?: Size
+} & ButtonProps) {
+   const [url, setUrl] = React.useState("https://nyxbui.design")
+
+   React.useEffect(() => {
+      setUrl(window.location.href)
+   }, [])
+
+   return (
+      <form
+         action={async () => {
+            try {
+               const result = await editInV0({
+                  name,
+                  url,
+               })
+
+               if (result?.error) {
+                  throw new Error(result.error)
+               }
+
+               if (result?.url) {
+                  const popupOpened = window.open(result.url, "_blank")
+                  if (!popupOpened) {
+                     toast.warning("Pop-up window blocked.", {
+                        description:
+                           "Click the pop-up button in your browser to continue.",
+                        duration: 5000,
+                     })
+                  }
+               }
+            } catch (error) {
+               if (error instanceof Error) {
+                  toast.error(error.message)
+               }
+            }
+         }}
+      >
+         <Form
+            size={size}
+            className={className}
+            disabled={disabled}
+            {...props}
+         />
+      </form>
+   )
+}
+
+function Form({
+   disabled,
+   size = "default",
+   className,
+   ...props
+}: Omit<React.ComponentProps<typeof V0Button>, "name">) {
+   const { pending } = useFormStatus()
+
+   return (
+      <V0Tooltip size={size}>
+         <Button
+            aria-label="Open in v0"
+            className={ny(
+               "z-50 h-[calc(theme(spacing.7)_-_1px)] gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black",
+               size === "icon" && "h-7 w-7 p-0",
+               className,
+            )}
+            disabled={disabled || pending}
+            {...props}
+         >
+            {size === "icon" ? (
+               <>
+                  {pending ? (
+                     <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  ) : (
+                     <V0Logo className="h-4 w-4" />
+                  )}
+               </>
+            ) : (
+               <>
+                  {pending && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+                  Open in <V0Logo />
+               </>
+            )}
+         </Button>
+      </V0Tooltip>
+   )
+}
+
+export function V0Logo({ className, ...props }: React.ComponentProps<"svg">) {
+   return (
+      <svg
+         viewBox="0 0 40 20"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+         className={ny("h-5 w-5 text-current", className)}
+         {...props}
+      >
+         <path
+            d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
+            fill="currentColor"
+         ></path>
+         <path
+            d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
+            fill="currentColor"
+         ></path>
+      </svg>
+   )
+}
diff --git a/apps/web/config/docs.ts b/apps/web/config/docs.ts
index 717d048b..2bb8cd3d 100644
--- a/apps/web/config/docs.ts
+++ b/apps/web/config/docs.ts
@@ -1,4 +1,4 @@
-import type { MainNavItem, SidebarNavItem } from '~/types/nav'
+import type { MainNavItem, SidebarNavItem } from "~/types/nav"
 
 export interface DocsConfig {
    mainNav: MainNavItem[]
@@ -9,103 +9,150 @@ export interface DocsConfig {
 export const docsConfig: DocsConfig = {
    mainNav: [
       {
-         title: 'Docs',
-         href: '/docs/installation',
+         title: "Docs",
+         href: "/docs/installation",
       },
       {
-         title: 'Components',
-         href: '/components',
+         title: "Components",
+         href: "/components",
       },
       {
-         title: 'Themes',
-         href: '/themes',
+         title: "Themes",
+         href: "/themes",
       },
       {
-         title: 'Blocks',
-         href: '/blocks',
+         title: "Blocks",
+         href: "/blocks",
       },
       {
-         title: 'Charts',
-         href: '/charts',
+         title: "Charts",
+         href: "/charts",
       },
       {
-         title: 'Examples',
-         href: '/examples',
+         title: "Examples",
+         href: "/examples",
       },
       // {
       //    title: 'Templates',
       //    href: '/templates',
       // },
       {
-         title: 'More',
+         title: "More",
          items: [
             // {
             //    title: 'Examples',
             //    href: '/examples',
             // },
             {
-               title: 'Showcase',
-               href: '/showcase',
+               title: "Showcase",
+               href: "/showcase",
             },
             {
-               title: 'Colors',
-               href: '/colors',
+               title: "Colors",
+               href: "/colors",
             },
          ],
       },
    ],
    sidebarNav: [
       {
-         title: 'Getting Started',
+         title: "Getting Started",
          items: [
             {
-               title: 'Introduction',
-               href: '/docs',
+               title: "Introduction",
+               href: "/docs",
                items: [],
             },
             {
-               title: 'Installation',
-               href: '/docs/installation',
+               title: "Installation",
+               href: "/docs/installation",
                items: [],
             },
+            // {
+            //    title: "Story",
+            //    href: "/docs/story",
+            //    items: [],
+            // },
+            {
+               title: "nyxbui.json",
+               href: "/docs/nyxbui-json",
+               items: [],
+            },
+            {
+               title: "Theming",
+               href: "/docs/theming",
+               items: [],
+            },
+            {
+               title: "Dark mode",
+               href: "/docs/dark-mode",
+               items: [],
+            },
+            {
+               title: "CLI",
+               href: "/docs/cli",
+               items: [],
+            },
+            {
+               title: "Monorepo",
+               href: "/docs/monorepo",
+               items: [],
+               label: [
+                  { text: "New", variant: "new" },
+                  { text: "Canary", variant: "canary" },
+               ],
+            },
             {
-               title: 'Story',
-               href: '/docs/story',
+               title: "Next.js 15 + React 19",
+               href: "/docs/react-19",
                items: [],
             },
             {
-               title: 'nyxbui.json',
-               href: '/docs/nyxbui-json',
+               title: "Typography",
+               href: "/docs/components/typography",
                items: [],
             },
             {
-               title: 'Theming',
-               href: '/docs/theming',
+               title: "Blocks",
+               href: "/docs/blocks",
                items: [],
+               label: [{ text: "New", variant: "new" }],
             },
             {
-               title: 'Dark mode',
-               href: '/docs/dark-mode',
+               title: "Changelog",
+               href: "/docs/changelog",
                items: [],
             },
+         ],
+      },
+      {
+         title: "Registry",
+         href: "/docs/registry",
+         label: [{ text: "New", variant: "new" }],
+         items: [
             {
-               title: 'CLI',
-               href: '/docs/cli',
+               title: "Getting Started",
+               href: "/docs/registry/getting-started",
                items: [],
             },
             {
-               title: 'Next.js 15 + React 19',
-               href: '/docs/react-19',
+               title: "Registry JSON",
+               href: "/docs/registry/registry-json",
                items: [],
             },
             {
-               title: 'Typography',
-               href: '/docs/components/typography',
+               title: "Registry Item JSON",
+               href: "/docs/registry/registry-item-json",
                items: [],
             },
             {
-               title: 'Changelog',
-               href: '/docs/changelog',
+               title: "Open in v0",
+               href: "/docs/registry/open-in-v0",
+               items: [],
+            },
+            {
+               title: "FAQ",
+               href: "/docs/registry/faq",
                items: [],
             },
          ],
@@ -139,727 +186,747 @@ export const docsConfig: DocsConfig = {
       //    ],
       // },
       {
-         title: 'Components',
+         title: "Components",
          items: [
             {
-               title: 'Accordion',
-               href: '/docs/components/accordion',
+               title: "Accordion",
+               href: "/docs/components/accordion",
                items: [],
             },
             {
-               title: 'Alert',
-               href: '/docs/components/alert',
+               title: "Alert",
+               href: "/docs/components/alert",
                items: [],
             },
             {
-               title: 'Alert Dialog',
-               href: '/docs/components/alert-dialog',
+               title: "Alert Dialog",
+               href: "/docs/components/alert-dialog",
                items: [],
             },
             {
-               title: 'Animated List',
-               href: '/docs/components/animated-list',
+               title: "Animated List",
+               href: "/docs/components/animated-list",
                items: [],
             },
             {
-               title: 'Animated Circular Progress Bar',
+               title: "Animated Circular Progress Bar",
                href: `/docs/components/animated-circular-progress-bar`,
                items: [],
-               label: '',
             },
             {
-               title: 'Aspect Ratio',
-               href: '/docs/components/aspect-ratio',
+               title: "Aspect Ratio",
+               href: "/docs/components/aspect-ratio",
                items: [],
             },
             {
-               title: 'Avatar',
-               href: '/docs/components/avatar',
+               title: "Avatar",
+               href: "/docs/components/avatar",
                items: [],
             },
             {
-               title: 'Avatar Circles',
-               href: '/docs/components/avatar-circles',
+               title: "Avatar Circles",
+               href: "/docs/components/avatar-circles",
                items: [],
-               label: '',
             },
             {
-               title: 'Badge',
-               href: '/docs/components/badge',
+               title: "Badge",
+               href: "/docs/components/badge",
                items: [],
             },
             {
-               title: 'Bento Grid',
-               href: '/docs/components/bento-grid',
+               title: "Bento Grid",
+               href: "/docs/components/bento-grid",
                items: [],
             },
             {
-               title: 'Breadcrumb',
-               href: '/docs/components/breadcrumb',
+               title: "Breadcrumb",
+               href: "/docs/components/breadcrumb",
                items: [],
             },
             {
-               title: 'Calendar',
-               href: '/docs/components/calendar',
+               title: "Calendar",
+               href: "/docs/components/calendar",
                items: [],
             },
             {
-               title: 'Card',
-               href: '/docs/components/card',
+               title: "Card",
+               href: "/docs/components/card",
                items: [],
             },
             {
-               title: 'Carousel',
-               href: '/docs/components/carousel',
+               title: "Carousel",
+               href: "/docs/components/carousel",
                items: [],
             },
             {
-               title: 'Checkbox',
-               href: '/docs/components/checkbox',
+               title: "Checkbox",
+               href: "/docs/components/checkbox",
                items: [],
             },
             {
-               title: 'Collapsible',
-               href: '/docs/components/collapsible',
+               title: "Collapsible",
+               href: "/docs/components/collapsible",
                items: [],
             },
             {
-               title: 'Combobox',
-               href: '/docs/components/combobox',
+               title: "Combobox",
+               href: "/docs/components/combobox",
                items: [],
             },
             {
-               title: 'Command',
-               href: '/docs/components/command',
+               title: "Command",
+               href: "/docs/components/command",
                items: [],
             },
             {
-               title: 'Context Menu',
-               href: '/docs/components/context-menu',
+               title: "Context Menu",
+               href: "/docs/components/context-menu",
                items: [],
             },
             {
-               title: 'Data Table',
-               href: '/docs/components/data-table',
+               title: "Data Table",
+               href: "/docs/components/data-table",
                items: [],
             },
             {
-               title: 'Date Picker',
-               href: '/docs/components/date-picker',
+               title: "Date Picker",
+               href: "/docs/components/date-picker",
                items: [],
             },
             {
-               title: 'Dialog',
-               href: '/docs/components/dialog',
+               title: "Dialog",
+               href: "/docs/components/dialog",
                items: [],
             },
             {
-               title: 'Dock',
-               href: '/docs/components/dock',
+               title: "Dock",
+               href: "/docs/components/dock",
                items: [],
             },
             {
-               title: 'Drawer',
-               href: '/docs/components/drawer',
+               title: "Drawer",
+               href: "/docs/components/drawer",
                items: [],
             },
             {
-               title: 'Dropdown Menu',
-               href: '/docs/components/dropdown-menu',
+               title: "Dropdown Menu",
+               href: "/docs/components/dropdown-menu",
                items: [],
             },
             {
-               title: 'File Tree',
+               title: "File Tree",
                href: `/docs/components/file-tree`,
                items: [],
             },
             {
-               title: 'Form',
-               href: '/docs/components/form',
+               title: "Form",
+               href: "/docs/components/form",
                items: [],
             },
             {
-               title: 'Gauge Circle',
-               href: '/docs/components/gauge-circle',
+               title: "Gauge Circle",
+               href: "/docs/components/gauge-circle",
                items: [],
-               label: '',
             },
             {
-               title: 'Globe',
-               href: '/docs/components/globe',
+               title: "Globe",
+               href: "/docs/components/globe",
                items: [],
             },
             {
-               title: 'Hero Video Dialog',
-               href: '/docs/components/hero-video-dialog',
+               title: "Hero Video Dialog",
+               href: "/docs/components/hero-video-dialog",
                items: [],
             },
             {
-               title: 'Hover Card',
-               href: '/docs/components/hover-card',
+               title: "Hover Card",
+               href: "/docs/components/hover-card",
                items: [],
             },
             {
-               title: 'Input',
-               href: '/docs/components/input',
+               title: "Input",
+               href: "/docs/components/input",
                items: [],
             },
             {
-               title: 'Input OTP',
-               href: '/docs/components/input-otp',
+               title: "Input OTP",
+               href: "/docs/components/input-otp",
                items: [],
             },
             {
-               title: 'Input Phone',
-               href: '/docs/components/input-phone',
+               title: "Input Phone",
+               href: "/docs/components/input-phone",
                items: [],
             },
             {
-               title: 'Interactive Icon Cloud',
-               href: '/docs/components/icon-cloud',
+               title: "Interactive Icon Cloud",
+               href: "/docs/components/icon-cloud",
                items: [],
-               label: '',
             },
             {
-               title: 'Label',
-               href: '/docs/components/label',
+               title: "Label",
+               href: "/docs/components/label",
                items: [],
             },
             {
-               title: 'Marquee',
-               href: '/docs/components/marquee',
+               title: "Marquee",
+               href: "/docs/components/marquee",
                items: [],
             },
             {
-               title: 'Menubar',
-               href: '/docs/components/menubar',
+               title: "Menubar",
+               href: "/docs/components/menubar",
                items: [],
             },
             {
-               title: 'Multi Select',
-               href: '/docs/components/multi-select',
+               title: "Multi Select",
+               href: "/docs/components/multi-select",
                items: [],
             },
             {
-               title: 'Navigation Menu',
-               href: '/docs/components/navigation-menu',
+               title: "Navigation Menu",
+               href: "/docs/components/navigation-menu",
                items: [],
             },
             {
-               title: 'Orbiting Circles',
-               href: '/docs/components/orbiting-circles',
+               title: "Orbiting Circles",
+               href: "/docs/components/orbiting-circles",
                items: [],
-               label: '',
             },
             {
-               title: 'Pagination',
-               href: '/docs/components/pagination',
+               title: "Pagination",
+               href: "/docs/components/pagination",
                items: [],
             },
             {
-               title: 'Popover',
-               href: '/docs/components/popover',
+               title: "Popover",
+               href: "/docs/components/popover",
                items: [],
             },
             {
-               title: 'Progress',
-               href: '/docs/components/progress',
+               title: "Progress",
+               href: "/docs/components/progress",
                items: [],
             },
             {
-               title: 'Radio Group',
-               href: '/docs/components/radio-group',
+               title: "Radio Group",
+               href: "/docs/components/radio-group",
                items: [],
             },
             {
-               title: 'Resizable',
-               href: '/docs/components/resizable',
+               title: "Resizable",
+               href: "/docs/components/resizable",
                items: [],
             },
             {
-               title: 'Scroll Area',
-               href: '/docs/components/scroll-area',
+               title: "Scroll Area",
+               href: "/docs/components/scroll-area",
                items: [],
             },
             {
-               title: 'Scroll Progress',
-               href: `/docs/components/scroll-progress`,
+               title: "Select",
+               href: "/docs/components/select",
                items: [],
             },
             {
-               title: 'Scratch To Reveal',
-               href: `/docs/components/scratch-to-reveal`,
+               title: "Separator",
+               href: "/docs/components/separator",
                items: [],
             },
             {
-               title: 'Select',
-               href: '/docs/components/select',
+               title: "Sheet",
+               href: "/docs/components/sheet",
                items: [],
             },
             {
-               title: 'Separator',
-               href: '/docs/components/separator',
+               title: "Skeleton",
+               href: "/docs/components/skeleton",
                items: [],
             },
             {
-               title: 'Sheet',
-               href: '/docs/components/sheet',
+               title: "Slider",
+               href: "/docs/components/slider",
                items: [],
             },
             {
-               title: 'Skeleton',
-               href: '/docs/components/skeleton',
+               title: "Sonner",
+               href: "/docs/components/sonner",
                items: [],
             },
             {
-               title: 'Slider',
-               href: '/docs/components/slider',
+               title: "Star Rating",
+               href: "/docs/components/star-rating",
                items: [],
             },
             {
-               title: 'Sonner',
-               href: '/docs/components/sonner',
+               title: "Stepper",
+               href: "/docs/components/stepper",
                items: [],
             },
             {
-               title: 'Star Rating',
-               href: '/docs/components/star-rating',
+               title: "Script Copy Button",
+               href: "/docs/components/script-copy-btn",
                items: [],
+               label: [{ text: "New", variant: "new" }],
             },
             {
-               title: 'Stepper',
-               href: '/docs/components/stepper',
+               title: "Switch",
+               href: "/docs/components/switch",
                items: [],
             },
             {
-               title: 'Switch',
-               href: '/docs/components/switch',
+               title: "Table",
+               href: "/docs/components/table",
                items: [],
             },
             {
-               title: 'Table',
-               href: '/docs/components/table',
+               title: "Tabs",
+               href: "/docs/components/tabs",
                items: [],
             },
             {
-               title: 'Tabs',
-               href: '/docs/components/tabs',
+               title: "Terminal",
+               href: "/docs/components/terminal",
                items: [],
+               label: [{ text: "New", variant: "new" }],
             },
             {
-               title: 'Textarea',
-               href: '/docs/components/textarea',
+               title: "Textarea",
+               href: "/docs/components/textarea",
                items: [],
             },
             {
-               title: 'Timeline',
-               href: '/docs/components/timeline',
+               title: "Timeline",
+               href: "/docs/components/timeline",
                items: [],
             },
             {
-               title: 'Toast',
-               href: '/docs/components/toast',
+               title: "Toast",
+               href: "/docs/components/toast",
                items: [],
             },
             {
-               title: 'TOC',
-               href: '/docs/components/toc',
+               title: "TOC",
+               href: "/docs/components/toc",
                items: [],
             },
             {
-               title: 'Nyx TOC',
-               href: '/docs/components/nyx-toc',
+               title: "Nyx TOC",
+               href: "/docs/components/nyx-toc",
                items: [],
-               label: 'New',
             },
             {
-               title: 'Toggle',
-               href: '/docs/components/toggle',
+               title: "Toggle",
+               href: "/docs/components/toggle",
                items: [],
             },
             {
-               title: 'Toggle Group',
-               href: '/docs/components/toggle-group',
+               title: "Toggle Group",
+               href: "/docs/components/toggle-group",
                items: [],
             },
             {
-               title: 'Tooltip',
-               href: '/docs/components/tooltip',
+               title: "Tooltip",
+               href: "/docs/components/tooltip",
                items: [],
             },
             {
-               title: 'Tour',
-               href: '/docs/components/tour',
+               title: "Tour",
+               href: "/docs/components/tour",
                items: [],
             },
             {
-               title: 'Tweet Card',
-               href: '/docs/components/tweet-card',
+               title: "Tweet Card",
+               href: "/docs/components/tweet-card",
                items: [],
             },
             {
-               title: 'Video Modal',
+               title: "Video Modal",
                href: `/docs/components/video-modal`,
                items: [],
             },
          ],
       },
-      // {
-      //    title: 'Page Sections',
-      //    items: [
-      //    ],
-      // },
       {
-         title: 'Device Mockups',
+         title: "Device Mockups",
          items: [
             {
-               title: 'Safari',
-               href: '/docs/components/safari',
+               title: "Safari",
+               href: "/docs/components/safari",
                items: [],
             },
             {
-               title: 'iPhone 15 Pro',
-               href: '/docs/components/iphone-15-pro',
+               title: "iPhone 15 Pro",
+               href: "/docs/components/iphone-15-pro",
                items: [],
             },
          ],
       },
       {
-         title: 'Special Effects',
+         title: "Special Effects",
          items: [
             {
-               title: 'Animated Beam',
+               title: "Animated Beam",
                href: `/docs/components/animated-beam`,
                items: [],
             },
             {
-               title: 'Border Beam',
+               title: "Border Beam",
                href: `/docs/components/border-beam`,
                items: [],
             },
             {
-               title: 'Shine Border',
+               title: "Shine Border",
                href: `/docs/components/shine-border`,
                items: [],
-               label: '',
             },
             {
-               title: 'Magic Card',
+               title: "Scratch To Reveal",
+               href: `/docs/components/scratch-to-reveal`,
+               items: [],
+            },
+            {
+               title: "Scroll Progress",
+               href: `/docs/components/scroll-progress`,
+               items: [],
+            },
+            {
+               title: "Magic Card",
                href: `/docs/components/magic-card`,
                items: [],
             },
             {
-               title: 'Meteors',
+               title: "Meteors",
                href: `/docs/components/meteors`,
                items: [],
             },
             {
-               title: 'Neon Gradient Card',
+               title: "Neon Gradient Card",
                href: `/docs/components/neon-gradient-card`,
                items: [],
-               label: '',
             },
             {
-               title: 'Confetti',
+               title: "Confetti",
                href: `/docs/components/confetti`,
                items: [],
             },
             {
-               title: 'Particles',
+               title: "Particles",
                href: `/docs/components/particles`,
                items: [],
             },
             {
-               title: 'Cool Mode',
+               title: "Cool Mode",
                href: `/docs/components/cool-mode`,
                items: [],
-               label: '',
             },
          ],
       },
       {
-         title: 'Animations',
+         title: "Animations",
          items: [
             {
-               title: 'Blur Fade',
+               title: "Blur Fade",
                href: `/docs/components/blur-fade`,
                items: [],
             },
             {
-               title: 'Globe Grid',
+               title: "Globe Grid",
                href: `/docs/components/globe-grid`,
                items: [],
-               label: 'New',
             },
          ],
       },
       {
-         title: 'Text Animations',
+         title: "Text Animations",
          items: [
             {
-               title: 'Animated Shiny Text',
+               title: "Text Animate",
+               href: `/docs/components/text-animate`,
+               items: [],
+               label: [{ text: "New", variant: "new" }],
+            },
+            {
+               title: "Line Shadow Text",
+               href: `/docs/components/line-shadow-text`,
+               items: [],
+               label: [{ text: "New", variant: "new" }],
+            },
+            {
+               title: "Aurora Text",
+               href: `/docs/components/aurora-text`,
+               items: [],
+               label: [{ text: "New", variant: "new" }],
+            },
+            {
+               title: "Animated Shiny Text",
                href: `/docs/components/animated-shiny-text`,
                items: [],
             },
             {
-               title: 'Animated Gradient Text',
+               title: "Animated Gradient Text",
                href: `/docs/components/animated-gradient-text`,
                items: [],
-               label: '',
             },
             {
-               title: 'Number Ticker',
+               title: "Number Ticker",
                href: `/docs/components/number-ticker`,
                items: [],
             },
             {
-               title: 'Text Reveal',
+               title: "Text Reveal",
                href: `/docs/components/text-reveal`,
                items: [],
-               label: '',
             },
             {
-               title: 'Hyper Text',
+               title: "Hyper Text",
                href: `/docs/components/hyper-text`,
                items: [],
-               label: '',
             },
             {
-               title: 'Word Rotate',
+               title: "Word Rotate",
                href: `/docs/components/word-rotate`,
                items: [],
-               label: '',
             },
             {
-               title: 'Typing Animation',
+               title: "Typing Animation",
                href: `/docs/components/typing-animation`,
                items: [],
-               label: '',
             },
             {
-               title: 'Wavy Text',
+               title: "Wavy Text",
                href: `/docs/components/wavy-text`,
                items: [],
-               label: '',
             },
             {
-               title: 'Blur In',
+               title: "Blur In",
                href: `/docs/components/blur-in`,
                items: [],
-               label: '',
             },
             {
-               title: 'Separate Away',
+               title: "Separate Away",
                href: `/docs/components/separate-away`,
                items: [],
-               label: '',
             },
             {
-               title: 'Scroll Based Velocity',
+               title: "Scroll Based Velocity",
                href: `/docs/components/scroll-based-velocity`,
                items: [],
-               label: '',
             },
             {
-               title: 'Letter Pullup',
+               title: "Letter Pullup",
                href: `/docs/components/letter-pullup`,
                items: [],
-               label: '',
             },
             {
-               title: 'Word Pull Up',
+               title: "Word Pull Up",
                href: `/docs/components/word-pull-up`,
                items: [],
-               label: '',
             },
             {
-               title: 'Flip Text',
+               title: "Flip Text",
                href: `/docs/components/flip-text`,
                items: [],
-               label: '',
             },
             {
-               title: 'Gradual Spacing',
+               title: "Gradual Spacing",
                href: `/docs/components/gradual-spacing`,
                items: [],
-               label: '',
             },
             {
-               title: 'Word Fade In',
+               title: "Word Fade In",
                href: `/docs/components/word-fade-in`,
                items: [],
-               label: '',
             },
             {
-               title: 'Fade Text',
+               title: "Fade Text",
                href: `/docs/components/fade-text`,
                items: [],
-               label: '',
             },
             {
-               title: 'Box Reveal',
+               title: "Box Reveal",
                href: `/docs/components/box-reveal`,
                items: [],
-               label: '',
             },
             {
-               title: 'Sparkles Text',
+               title: "Sparkles Text",
                href: `/docs/components/sparkles-text`,
                items: [],
             },
+            {
+               title: "Morphing Text",
+               href: `/docs/components/morphing-text`,
+               items: [],
+               label: [{ text: "New", variant: "new" }],
+            },
          ],
       },
       {
-         title: 'Buttons',
+         title: "Buttons",
          items: [
             {
-               title: 'Rainbow Button',
-               href: '/docs/components/rainbow-button',
+               title: "Rainbow Button",
+               href: "/docs/components/rainbow-button",
                items: [],
             },
             {
-               title: 'Standard Button',
-               href: '/docs/components/button',
+               title: "Standard Button",
+               href: "/docs/components/button",
                items: [],
             },
             {
-               title: 'Shimmer Button',
+               title: "Shimmer Button",
                href: `/docs/components/shimmer-button`,
                items: [],
             },
             {
-               title: 'Shiny Button',
+               title: "Shiny Button",
                href: `/docs/components/shiny-button`,
                items: [],
-               label: '',
             },
             {
-               title: 'Animated Subscribe Button',
+               title: "Animated Subscribe Button",
                href: `/docs/components/animated-subscribe-button`,
                items: [],
             },
             {
-               title: 'Pulsating Button',
+               title: "Pulsating Button",
                href: `/docs/components/pulsating-button`,
                items: [],
             },
+            {
+               title: "Ripple Button",
+               href: `/docs/components/ripple-button`,
+               items: [],
+               label: [{ text: "New", variant: "new" }],
+            },
          ],
       },
       {
-         title: 'Backgrounds',
+         title: "Backgrounds",
          items: [
             {
-               title: 'Animated Grid Pattern',
-               href: `/docs/components/animated-grid-pattern`,
+               title: "Warp Background",
+               href: `/docs/components/warp-background`,
                items: [],
-               label: '',
+               label: [{ text: "New", variant: "new" }],
             },
             {
-               title: 'Flickering Grid',
+               title: "Flickering Grid",
                href: `/docs/components/flickering-grid`,
                items: [],
             },
             {
-               title: 'Grid Layout',
-               href: '/docs/components/grid-layout',
+               title: "Animated Grid Pattern",
+               href: `/docs/components/animated-grid-pattern`,
                items: [],
-               label: 'New',
             },
             {
-               title: 'Retro Grid',
+               title: "Grid Layout",
+               href: "/docs/components/grid-layout",
+               items: [],
+            },
+            {
+               title: "Retro Grid",
                href: `/docs/components/retro-grid`,
                items: [],
             },
             {
-               title: 'Ripple',
+               title: "Ripple",
                href: `/docs/components/ripple`,
                items: [],
             },
             {
-               title: 'Dot Pattern',
+               title: "Dot Pattern",
                href: `/docs/components/dot-pattern`,
                items: [],
             },
             {
-               title: 'Grid Pattern',
+               title: "Grid Pattern",
                href: `/docs/components/grid-pattern`,
                items: [],
             },
             {
-               title: 'Wavy Dot Pattern',
-               href: `/docs/components/wavy-dot-pattern`,
+               title: "Interactive Grid Pattern",
+               href: `/docs/components/interactive-grid-pattern`,
                items: [],
+               label: [{ text: "New", variant: "new" }],
             },
          ],
       },
+      // {
+      //    title: "Experimental Feature",
+      //    href: "/docs/experimental",
+      //    items: [],
+      // },
    ],
    chartsNav: [
       {
-         title: 'Getting Started',
+         title: "Getting Started",
          items: [
             {
-               title: 'Introduction',
-               href: '/docs/charts',
+               title: "Introduction",
+               href: "/docs/charts",
                items: [],
             },
             {
-               title: 'Installation',
-               href: '/docs/charts/installation',
+               title: "Installation",
+               href: "/docs/charts/installation",
                items: [],
             },
             {
-               title: 'Theming',
-               href: '/docs/charts/theming',
+               title: "Theming",
+               href: "/docs/charts/theming",
                items: [],
             },
          ],
       },
       {
-         title: 'Charts',
+         title: "Charts",
          items: [
             {
-               title: 'Area Chart',
-               href: '/docs/charts/area',
+               title: "Area Chart",
+               href: "/docs/charts/area",
                items: [],
             },
             {
-               title: 'Bar Chart',
-               href: '/docs/charts/bar',
+               title: "Bar Chart",
+               href: "/docs/charts/bar",
                items: [],
             },
             {
-               title: 'Line Chart',
-               href: '/docs/charts/line',
+               title: "Line Chart",
+               href: "/docs/charts/line",
                items: [],
             },
             {
-               title: 'Pie Chart',
-               href: '/docs/charts/pie',
+               title: "Pie Chart",
+               href: "/docs/charts/pie",
                items: [],
             },
             {
-               title: 'Radar Chart',
-               href: '/docs/charts/radar',
+               title: "Radar Chart",
+               href: "/docs/charts/radar",
                items: [],
             },
             {
-               title: 'Radial Chart',
-               href: '/docs/charts/radial',
+               title: "Radial Chart",
+               href: "/docs/charts/radial",
                items: [],
             },
          ],
       },
       {
-         title: 'Components',
+         title: "Components",
          items: [
             {
-               title: 'Tooltip',
-               href: '/docs/charts/tooltip',
+               title: "Tooltip",
+               href: "/docs/charts/tooltip",
                items: [],
             },
             {
-               title: 'Legend',
-               href: '/docs/charts/legend',
+               title: "Legend",
+               href: "/docs/charts/legend",
                items: [],
             },
          ],
diff --git a/apps/web/config/site.ts b/apps/web/config/site.ts
index 9b3f891f..99943d7d 100644
--- a/apps/web/config/site.ts
+++ b/apps/web/config/site.ts
@@ -1,22 +1,27 @@
 export const siteConfig = {
-   name: 'Nyxb UI',
-   url: 'https://nyxb.design',
-   ogImage: 'https://nyxb.design/api/og',
+   name: "Nyxb UI",
+   url: "https://nyxb.design",
+   ogImage: "https://nyxb.design/api/og",
    description:
-    'Beautifully designed landing page components built with React & Tailwind CSS.',
+      "Beautifully designed landing page components built with React & Tailwind CSS.",
    links: {
-      twitter: 'https://twitter.com/nyxb0',
-      discord: 'https://discord.gg/aBxNpG7fMP',
-      github: 'https://github.com/nyxb-ui',
+      twitter: "https://twitter.com/nyxb0",
+      discord: "https://discord.gg/aBxNpG7fMP",
+      github: "https://github.com/nyxb-ui",
    },
    keywords: [
-      'React',
-      'Tailwind CSS',
-      'Framer Motion',
-      'Landing Page',
-      'Components',
-      'Next.js',
+      "React",
+      "Tailwind CSS",
+      "Framer Motion",
+      "Landing Page",
+      "Components",
+      "Next.js",
    ],
 }
 
 export type SiteConfig = typeof siteConfig
+
+export const META_THEME_COLORS = {
+   light: "#ffffff",
+   dark: "#09090b",
+}
diff --git a/apps/web/content-collections.ts b/apps/web/content-collections.ts
index d70a3873..cdd303c7 100644
--- a/apps/web/content-collections.ts
+++ b/apps/web/content-collections.ts
@@ -1,51 +1,48 @@
-import { readFileSync } from 'fs'
-import path from 'path'
-import { defineCollection, defineConfig } from '@content-collections/core'
-import { compileMDX } from '@content-collections/mdx'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
-import rehypePrettyCode, { type Options } from 'rehype-pretty-code'
-import rehypeSlug from 'rehype-slug'
-import { codeImport } from 'remark-code-import'
-import remarkGfm from 'remark-gfm'
-import { createHighlighter } from 'shiki'
-import { visit } from 'unist-util-visit'
-import lumosDarkTheme from './lib/lumos-dark.json'
+import { readFileSync } from "fs"
+import path from "path"
+import { defineCollection, defineConfig } from "@content-collections/core"
+import { compileMDX } from "@content-collections/mdx"
+import rehypeAutolinkHeadings from "rehype-autolink-headings"
+import rehypePrettyCode, { type Options } from "rehype-pretty-code"
+import rehypeSlug from "rehype-slug"
+import { codeImport } from "remark-code-import"
+import remarkGfm from "remark-gfm"
+import { createHighlighter } from "shiki"
+import { visit } from "unist-util-visit"
+import { lumosDarkTheme } from "./lib/lumos-dark"
 
-import { rehypeComponent } from './lib/rehype-component'
-import { rehypeNpmCommand } from './lib/rehype-npm-command'
+import { rehypeComponent } from "./lib/rehype-component"
+import { rehypeNpmCommand } from "./lib/rehype-npm-command"
 
 const prettyCodeOptions: Options = {
-   theme: 'github-dark',
-   getHighlighter: options =>
-      createHighlighter({
-         ...options,
-      }),
+   theme: lumosDarkTheme as any,
+   getHighlighter: createHighlighter,
    onVisitLine(node) {
       // Prevent lines from collapsing in `display: grid` mode, and allow empty
       // lines to be copy/pasted
       if (node.children.length === 0) {
-         node.children = [{ type: 'text', value: ' ' }]
+         node.children = [{ type: "text", value: " " }]
       }
    },
    onVisitHighlightedLine(node) {
       if (!node.properties.className) {
          node.properties.className = []
       }
-      node.properties.className.push('line--highlighted')
+      node.properties.className.push("line--highlighted")
    },
    onVisitHighlightedChars(node) {
       if (!node.properties.className) {
          node.properties.className = []
       }
-      node.properties.className = ['word--highlighted']
+      node.properties.className = ["word--highlighted"]
    },
 }
 
 const showcase = defineCollection({
-   name: 'Showcase',
-   directory: 'content/showcase',
-   include: '**/*.mdx',
-   schema: z => ({
+   name: "Showcase",
+   directory: "content/showcase",
+   include: "**/*.mdx",
+   schema: (z) => ({
       title: z.string(),
       description: z.string(),
       image: z.string(),
@@ -70,10 +67,10 @@ const showcase = defineCollection({
 })
 
 const pages = defineCollection({
-   name: 'Page',
-   directory: 'content/pages',
-   include: '**/*.mdx',
-   schema: z => ({
+   name: "Page",
+   directory: "content/pages",
+   include: "**/*.mdx",
+   schema: (z) => ({
       title: z.string(),
       description: z.string(),
    }),
@@ -94,10 +91,10 @@ const pages = defineCollection({
 })
 
 const documents = defineCollection({
-   name: 'Doc',
-   directory: 'content',
-   include: '**/*.mdx',
-   schema: z => ({
+   name: "Doc",
+   directory: "content",
+   include: "**/*.mdx",
+   schema: (z) => ({
       title: z.string(),
       description: z.string(),
       published: z.boolean().default(true),
@@ -121,9 +118,9 @@ const documents = defineCollection({
             rehypeComponent,
             () => (tree) => {
                visit(tree, (node) => {
-                  if (node?.type === 'element' && node?.tagName === 'pre') {
+                  if (node?.type === "element" && node?.tagName === "pre") {
                      const [codeEl] = node.children
-                     if (codeEl.tagName !== 'code') {
+                     if (codeEl.tagName !== "code") {
                         return
                      }
                      if (codeEl.data?.meta) {
@@ -132,7 +129,10 @@ const documents = defineCollection({
                         const match = codeEl.data?.meta.match(regex)
                         if (match) {
                            node.__event__ = match ? match[1] : null
-                           codeEl.data.meta = codeEl.data.meta.replace(regex, '')
+                           codeEl.data.meta = codeEl.data.meta.replace(
+                              regex,
+                              "",
+                           )
                         }
                      }
                      node.__rawString__ = codeEl.children?.[0].value
@@ -144,18 +144,20 @@ const documents = defineCollection({
             [rehypePrettyCode, prettyCodeOptions],
             () => (tree) => {
                visit(tree, (node) => {
-                  if (node?.type === 'element' && node?.tagName === 'figure') {
-                     if (!('data-rehype-pretty-code-figure' in node.properties)) {
+                  if (node?.type === "element" && node?.tagName === "figure") {
+                     if (
+                        !("data-rehype-pretty-code-figure" in node.properties)
+                     ) {
                         return
                      }
 
                      const preElement = node.children.at(-1)
-                     if (preElement.tagName !== 'pre') {
+                     if (preElement.tagName !== "pre") {
                         return
                      }
 
-                     preElement.properties.__withMeta__
-                = node.children.at(0).tagName === 'div'
+                     preElement.properties.__withMeta__ =
+                        node.children.at(0).tagName === "div"
                      preElement.properties.__rawString__ = node.__rawString__
 
                      if (node.__src__) {
@@ -177,8 +179,8 @@ const documents = defineCollection({
                rehypeAutolinkHeadings,
                {
                   properties: {
-                     className: ['subheading-anchor'],
-                     ariaLabel: 'Link to section',
+                     className: ["subheading-anchor"],
+                     ariaLabel: "Link to section",
                   },
                },
             ],
@@ -188,7 +190,7 @@ const documents = defineCollection({
          ...document,
          image: `${process.env.NEXT_PUBLIC_APP_URL}/og?title=${encodeURI(document.title)}`,
          slug: `/${document._meta.path}`,
-         slugAsParams: document._meta.path.split('/').slice(1).join('/'),
+         slugAsParams: document._meta.path.split("/").slice(1).join("/"),
          body: {
             raw: document.content,
             code: body,
diff --git a/apps/web/content/docs/blocks.mdx b/apps/web/content/docs/blocks.mdx
new file mode 100644
index 00000000..2d189319
--- /dev/null
+++ b/apps/web/content/docs/blocks.mdx
@@ -0,0 +1,238 @@
+---
+title: Add a block
+description: Contribute components to the blocks library.
+---
+
+We are inviting the community to contribute to the [blocks library](/blocks). Share your components and blocks with other developers and help build a library of high-quality, reusable components.
+
+We'd love to see all types of blocks: applications, marketing, products, and more.
+
+## Setup your workspace
+
+<Steps>
+
+### Fork the repository
+
+```bash
+git clone https://github.com/nyxb-ui/ui.git
+```
+
+### Create a new branch
+
+```bash
+git checkout -b username/my-new-block
+```
+
+### Install dependencies
+
+```bash
+pnpm install
+```
+
+### Start the dev server
+
+```bash
+pnpm web:dev
+```
+
+</Steps>
+
+## Add a block
+
+A block can be a single component (eg. a variation of a ui component) or a complex component (eg. a dashboard) with multiple components, hooks, and utils.
+
+<Steps>
+
+### Create a new block
+
+Create a new folder in the `apps/web/registry/miami/blocks` directory. Make sure the folder is named in kebab-case and under `miami`.
+
+```txt
+apps
+└── web
+    └── registry
+        └── miami
+            └── blocks
+                └── dashboard-01
+```
+
+<Callout className="mt-6">
+
+**Note:** The build script will take care of building the block for the `default` style.
+
+</Callout>
+
+### Add your block files
+
+Add your files to the block folder. Here is an example of a block with a page, components, hooks, and utils.
+
+```txt
+dashboard-01
+└── page.tsx
+└── components
+    └── hello-world.tsx
+    └── example-card.tsx
+└── hooks
+    └── use-hello-world.ts
+└── lib
+    └── format-date.ts
+```
+
+<Callout className="mt-6">
+
+**Note:** You can start with one file and add more files later.
+
+</Callout>
+
+</Steps>
+
+## Add your block to the registry
+
+<Steps>
+
+### Add your block definition to `registry-blocks.tsx`
+
+To add your block to the registry, you need to add your block definition to `registry-blocks.ts`.
+
+This follows the registry schema at [https://nyxbui.design/schema/registry-item.json](https://nyxbui.design/schema/registry-item.json).
+
+```tsx title="apps/www/registry/registry-blocks.tsx"
+export const blocks = [
+  // ...
+  {
+    name: "dashboard-01",
+    author: "nyxb (https://nyxbui.design)",
+    title: "Dashboard",
+    description: "A simple dashboard with a hello world component.",
+    type: "registry:block",
+    registryDependencies: ["input", "button", "card"],
+    dependencies: ["zod"],
+    files: [
+      {
+        path: "blocks/dashboard-01/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/dashboard-01/components/hello-world.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/components/example-card.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/hooks/use-hello-world.ts",
+        type: "registry:hook",
+      },
+      {
+        path: "blocks/dashboard-01/lib/format-date.ts",
+        type: "registry:lib",
+      },
+    ],
+    categories: ["dashboard"],
+  },
+]
+```
+
+Make sure you add a name, description, type, registryDependencies, dependencies, files, and categories. We'll go over each of these in more detail in the schema docs (coming soon).
+
+### Run the build script
+
+```bash
+pnpm registry:build
+```
+
+<Callout className="mt-6">
+
+**Note:** you do not need to run this script for every change. You only need to run it when you update the block definition.
+
+</Callout>
+
+### View your block
+
+Once the build script is finished, you can view your block at `http://localhost:3333/blocks/[CATEGORY]` or a full screen preview at `http://localhost:3333/view/styles/miami/dashboard-01`.
+
+<Image
+  src="/images/block-preview-light.png"
+  width="1432"
+  height="960"
+  alt="Block preview"
+  className="border dark:hidden shadow-sm rounded-lg overflow-hidden mt-6 w-full"
+/>
+<Image
+  src="/images/block-preview-dark.png"
+  width="1432"
+  height="960"
+  alt="Block preview"
+  className="border hidden dark:block shadow-sm rounded-lg overflow-hidden mt-6 w-full"
+/>
+
+### Build your block
+
+You can now build your block by editing the files in the block folder and viewing the changes in the browser.
+
+If you add more files, make sure to add them to the `files` array in the block definition.
+
+</Steps>
+
+## Publish your block
+
+Once you're ready to publish your block, you can submit a pull request to the main repository.
+
+<Steps>
+
+### Run the build script
+
+```bash
+pnpm registry:build
+```
+
+### Capture a screenshot
+
+```bash
+pnpm registry:capture
+```
+
+<Callout className="mt-6">
+
+**Note:** If you've run the capture script before, you might need to delete the existing screenshots (both light and dark) at `apps/www/public/r/styles/miami` and run the script again.
+
+</Callout>
+
+### Submit a pull request
+
+Commit your changes and submit a pull request to the main repository.
+
+Your block will be reviewed and merged. Once merged it will be published to the website and available to be installed via the CLI.
+
+</Steps>
+
+## Categories
+
+The `categories` property is used to organize your block in the registry.
+
+### Add a category
+
+If you need to add a new category, you can do so by adding it to the `registryCategories` array in `apps/web/registry/registry-categories.ts`.
+
+```tsx title="apps/web/registry/registry-categories.ts"
+export const registryCategories = [
+  // ...
+  {
+    name: "Input",
+    slug: "input",
+    hidden: false,
+  },
+]
+```
+
+## Guidelines
+
+Here are some guidelines to follow when contributing to the blocks library.
+
+- The following properties are required for the block definition: `name`, `description`, `type`, `files`, and `categories`.
+- Make sure to list all registry dependencies in `registryDependencies`. A registry dependency is the name of the component in the registry eg. `input`, `button`, `card`, etc.
+- Make sure to list all dependencies in `dependencies`. A dependency is the name of the package in the registry eg. `zod`, `sonner`, etc.
+- If your block has a page (optional), it should be the first entry in the `files` array and it should have a `target` property. This helps the CLI place the page in the correct location for file-based routing.
+- **Imports should always use the `~/registry` path.** eg. `import { Input } from "~/registry/miami/input"`
diff --git a/apps/web/content/docs/cli.mdx b/apps/web/content/docs/cli.mdx
index afb5c4be..277f4be1 100644
--- a/apps/web/content/docs/cli.mdx
+++ b/apps/web/content/docs/cli.mdx
@@ -85,20 +85,38 @@ Options:
   -y, --yes          skip confirmation prompt. (default: false)
   -o, --overwrite    overwrite existing files. (default: false)
   -c, --cwd <cwd>    the working directory. defaults to the current directory.
+  -a, --all          add all available components. (default: false)
   -p, --path <path>  the path to add the component to.
   -h, --help         display help for command
 ```
 
-## Monorepo
+## build
 
-In a monorepo, you can specify the path to your workspace with the `-c` or `--cwd` option.
+Use the `build` command to generate the registry JSON files.
 
 ```bash
-npx nyxb@latest init -c ./apps/www
+npx nyxb@latest build
 ```
 
-or
+This command reads the `registry.json` file and generates the registry JSON files in the `public/r` directory.
+
+```txt
+Usage: nyxb build [options] [registry]
+
+build components for a nyxb registry
+
+Arguments:
+  registry             path to registry.json file (default: "./registry.json")
+
+Options:
+  -o, --output <path>  destination directory for json files (default: "./public/r")
+  -c, --cwd <cwd>      the working directory. defaults to the current directory. (default:
+                       "/Users/nyxb/Code/nyxb/ui/packages/nyxb")
+  -h, --help           display help for command
+```
+
+To customize the output directory, use the `--output` option.
 
 ```bash
-npx nyxb@latest add alert-dialog -c ./apps/www
+npx nyxb@latest build --output ./public/registry
 ```
diff --git a/apps/web/content/docs/components/accordion.mdx b/apps/web/content/docs/components/accordion.mdx
index ad76210c..fc4c2ef8 100644
--- a/apps/web/content/docs/components/accordion.mdx
+++ b/apps/web/content/docs/components/accordion.mdx
@@ -10,8 +10,7 @@ links:
 <ComponentPreview
   name="accordion-demo"
   className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
-  styleSwitch={true}
-  dots={false}
+  description="An accordion with three items"
 />
 
 ## Installation
diff --git a/apps/web/content/docs/components/animated-grid-pattern.mdx b/apps/web/content/docs/components/animated-grid-pattern.mdx
index 60ee4f8c..44d113ad 100644
--- a/apps/web/content/docs/components/animated-grid-pattern.mdx
+++ b/apps/web/content/docs/components/animated-grid-pattern.mdx
@@ -6,10 +6,12 @@ author: nyxb
 published: true
 ---
 
-<ComponentPreview name="animated-grid-pattern-demo" />
+<ComponentPreview 
+name="animated-grid-pattern-demo"
+description="A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS."
+ />
 
-
-### Installation
+## Installation
 
 <Tabs defaultValue="cli">
 
@@ -20,7 +22,7 @@ published: true
 <TabsContent value="cli">
 
 ```bash
-npx nyxb@latest add animated-grid-pattern
+npx nyx@latest add animated-grid-pattern
 ```
 
 </TabsContent>
@@ -29,14 +31,12 @@ npx nyxb@latest add animated-grid-pattern
 
 <Steps>
 
-Copy and paste the following code into your project.
-
-```text
-components/ui/animated-grid-pattern.tsx
-```
+<Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="animated-grid-pattern" />
 
+<Step>Update the import paths to match your project setup.</Step>
+
 </Steps>
 
 </TabsContent>
@@ -47,15 +47,15 @@ components/ui/animated-grid-pattern.tsx
 
 ### GridPattern
 
-| Prop            | Type   | Description                                   | Default |
-| --------------- | ------ | --------------------------------------------- | ------- |
-| className       | string | Additional classes to be added to the pattern | -       |
-| width           | number | Width of the pattern                          | 40      |
-| height          | number | Height of the pattern                         | 40      |
-| x               | number | X offset of the pattern                       | -1      |
-| y               | number | Y offset of the pattern                       | -1      |
-| strokeDasharray | number | Stroke dash array of the pattern              | 0       |
-| numSquares      | number | Number of squares in the pattern              | 200     |
-| maxOpacity      | number | Maximum opacity of the pattern                | 0.5     |
-| duration        | number | Duration of the animation                     | 1       |
-| repeatDelay     | number | Repeat delay of the animation                 | 0.5     |
+| Prop              | Type     | Default | Description                                   |
+| ----------------- | -------- | ------- | --------------------------------------------- |
+| `className`       | `string` | `-`     | Additional classes to be added to the pattern |
+| `width`           | `number` | `40`    | Width of the pattern                          |
+| `height`          | `number` | `40`    | Height of the pattern                         |
+| `x`               | `number` | `-1`    | X offset of the pattern                       |
+| `y`               | `number` | `-1`    | Y offset of the pattern                       |
+| `strokeDasharray` | `number` | `0`     | Stroke dash array of the pattern              |
+| `numSquares`      | `number` | `200`   | Number of squares in the pattern              |
+| `maxOpacity`      | `number` | `0.5`   | Maximum opacity of the pattern                |
+| `duration`        | `number` | `1`     | Duration of the animation                     |
+| `repeatDelay`     | `number` | `0.5`   | Repeat delay of the animation                 |
diff --git a/apps/web/content/docs/components/aurora-text.mdx b/apps/web/content/docs/components/aurora-text.mdx
new file mode 100644
index 00000000..8f30bab2
--- /dev/null
+++ b/apps/web/content/docs/components/aurora-text.mdx
@@ -0,0 +1,112 @@
+---
+title: Aurora Text
+date: 2025-01-12
+description: A beautiful aurora text effect
+author: nyxb
+published: true
+---
+
+<ComponentPreview name="aurora-text-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx nyxb@latest add aurora-text
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="aurora-text" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Update `globals.css`</Step>
+
+Add the following to your `globals.css` file:
+
+```css
+:root {
+  --color-1: 0 100% 63%;
+  --color-2: 270 100% 63%;
+  --color-3: 210 100% 63%;
+  --color-4: 195 100% 63%;
+  --color-5: 90 100% 63%;
+}
+```
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-32}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        "color-1": "hsl(var(--color-1))",
+        "color-2": "hsl(var(--color-2))",
+        "color-3": "hsl(var(--color-3))",
+        "color-4": "hsl(var(--color-4))",
+        "color-5": "hsl(var(--color-5))",
+      },
+      keyframes: {
+        "aurora-border": {
+          "0%, 100%": { borderRadius: "37% 29% 27% 27% / 28% 25% 41% 37%" },
+          "25%": { borderRadius: "47% 29% 39% 49% / 61% 19% 66% 26%" },
+          "50%": { borderRadius: "57% 23% 47% 72% / 63% 17% 66% 33%" },
+          "75%": { borderRadius: "28% 49% 29% 100% / 93% 20% 64% 25%" },
+        },
+        "aurora-1": {
+          "0%, 100%": { top: "0", right: "0" },
+          "50%": { top: "50%", right: "25%" },
+          "75%": { top: "25%", right: "50%" },
+        },
+        "aurora-2": {
+          "0%, 100%": { top: "0", left: "0" },
+          "60%": { top: "75%", left: "25%" },
+          "85%": { top: "50%", left: "50%" },
+        },
+        "aurora-3": {
+          "0%, 100%": { bottom: "0", left: "0" },
+          "40%": { bottom: "50%", left: "25%" },
+          "65%": { bottom: "25%", left: "50%" },
+        },
+        "aurora-4": {
+          "0%, 100%": { bottom: "0", right: "0" },
+          "50%": { bottom: "25%", right: "40%" },
+          "90%": { bottom: "50%", right: "25%" },
+        },
+      },
+    },
+  },
+};
+```
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Props
+
+| Prop        | Type                | Default  | Description                                   |
+| ----------- | ------------------- | -------- | --------------------------------------------- |
+| `className` | `string`            | `-`      | The class name to be applied to the component |
+| `children`  | `ReactNode`         | `-`      | Children elements                             |
+| `as`        | `React.ElementType` | `"span"` | The element type to render as                 |
diff --git a/apps/web/content/docs/components/badge.mdx b/apps/web/content/docs/components/badge.mdx
index 780b5c4c..1700495a 100644
--- a/apps/web/content/docs/components/badge.mdx
+++ b/apps/web/content/docs/components/badge.mdx
@@ -64,7 +64,7 @@ import { badgeVariants } from "~/components/ui/badge"
 
 ### Default
 
-<ComponentPreview name="badge-demo" description="A badge" styleSwitch={true} button="copy" />
+<ComponentPreview name="badge-demo" description="A badge" />
 
 ---
 
diff --git a/apps/web/content/docs/components/dot-pattern.mdx b/apps/web/content/docs/components/dot-pattern.mdx
index 155fda7e..f6c2602d 100644
--- a/apps/web/content/docs/components/dot-pattern.mdx
+++ b/apps/web/content/docs/components/dot-pattern.mdx
@@ -9,8 +9,7 @@ video: https://cdn.nyxbui.design/dot-pattern.mp4
 
 <ComponentPreview name="dot-pattern-demo" />
 
-
-### Installation
+## Installation
 
 <Tabs defaultValue="cli">
 
@@ -30,14 +29,12 @@ npx nyxb@latest add dot-pattern
 
 <Steps>
 
-Copy and paste the following code into your project.
-
-```text
-components/ui/dot-pattern.tsx
-```
+<Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="dot-pattern" />
 
+<Step>Update the import paths to match your project setup.</Step>
+
 </Steps>
 
 </TabsContent>
@@ -54,13 +51,13 @@ components/ui/dot-pattern.tsx
 
 ### Dot Pattern
 
-| Prop      | Type   | Description                   | Default |
-| --------- | ------ | ----------------------------- | ------- |
-| width     | any    | Width of the dot pattern      | 16      |
-| height    | any    | Height of the dot pattern     | 16      |
-| x         | any    | X position of the dot         | 0       |
-| y         | any    | Y position of the dot         | 0       |
-| cx        | any    | X position of the circle      | 1       |
-| cy        | any    | Y position of the circle      | 1       |
-| cr        | any    | Radius of the circle          | 1       |
-| className | string | Class name of the dot pattern | -       |
+| Prop        | Type     | Default | Description                   |
+| ----------- | -------- | ------- | ----------------------------- |
+| `width`     | `any`    | `16`    | Width of the dot pattern      |
+| `height`    | `any`    | `16`    | Height of the dot pattern     |
+| `x`         | `any`    | `0`     | X position of the dot         |
+| `y`         | `any`    | `0`     | Y position of the dot         |
+| `cx`        | `any`    | `1`     | X position of the circle      |
+| `cy`        | `any`    | `1`     | Y position of the circle      |
+| `cr`        | `any`    | `1`     | Radius of the circle          |
+| `className` | `string` | `-`     | Class name of the dot pattern |
diff --git a/apps/web/content/docs/components/flickering-grid.mdx b/apps/web/content/docs/components/flickering-grid.mdx
index 744615c8..59dcd41d 100644
--- a/apps/web/content/docs/components/flickering-grid.mdx
+++ b/apps/web/content/docs/components/flickering-grid.mdx
@@ -1,12 +1,15 @@
 ---
 title: Flickering Grid
-date: 2024-10-05
+date: 2024-08-15
 description: A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
 author: nyxb
 published: true
 ---
 
-<ComponentPreview name="flickering-grid-demo" />
+<ComponentPreview 
+name="flickering-grid-demo"
+description="A flickering grid background made with SVGs, fully customizable using Tailwind CSS."
+/>
 
 ## Installation
 
@@ -19,7 +22,7 @@ published: true
 <TabsContent value="cli">
 
 ```bash
-npx nyxb@latest add flickering-grid
+npx nyx@latest add flickering-grid
 ```
 
 </TabsContent>
@@ -48,13 +51,13 @@ npx nyxb@latest add flickering-grid
 
 ## Props
 
-| Prop          | Type   | Description                           | Default        |
-| ------------- | ------ | ------------------------------------- | -------------- |
-| squareSize    | number | Size of each square in the grid       | 4              |
-| gridGap       | number | Gap between squares in the grid       | 6              |
-| flickerChance | number | Probability of a square flickering    | 0.3            |
-| color         | string | Color of the squares                  | "rgb(0, 0, 0)" |
-| width         | number | Width of the canvas                   | -              |
-| height        | number | Height of the canvas                  | -              |
-| className     | string | Additional CSS classes for the canvas | -              |
-| maxOpacity    | number | Maximum opacity of the squares        | 0.2            |
+| Prop            | Type     | Default          | Description                           |
+| --------------- | -------- | ---------------- | ------------------------------------- |
+| `squareSize`    | `number` | `4`              | Size of each square in the grid       |
+| `gridGap`       | `number` | `6`              | Gap between squares in the grid       |
+| `flickerChance` | `number` | `0.3`            | Probability of a square flickering    |
+| `color`         | `string` | `"rgb(0, 0, 0)"` | Color of the squares                  |
+| `width`         | `number` | `-`              | Width of the canvas                   |
+| `height`        | `number` | `-`              | Height of the canvas                  |
+| `className`     | `string` | `-`              | Additional CSS classes for the canvas |
+| `maxOpacity`    | `number` | `0.2`            | Maximum opacity of the squares        |
diff --git a/apps/web/content/docs/components/grid-pattern.mdx b/apps/web/content/docs/components/grid-pattern.mdx
index 4e621c6a..67d34213 100644
--- a/apps/web/content/docs/components/grid-pattern.mdx
+++ b/apps/web/content/docs/components/grid-pattern.mdx
@@ -7,10 +7,12 @@ published: true
 video: https://cdn.nyxbui.design/grid-pattern.mp4
 ---
 
-<ComponentPreview name="grid-pattern-demo" />
+<ComponentPreview 
+name="grid-pattern-demo"
+description="A background grid pattern made with SVGs, fully customizable using Tailwind CSS."
+ />
 
-
-### Installation
+## Installation
 
 <Tabs defaultValue="cli">
 
@@ -30,14 +32,12 @@ npx nyxb@latest add grid-pattern
 
 <Steps>
 
-Copy and paste the following code into your project.
-
-```text
-components/ui/grid-pattern.tsx
-```
+<Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="grid-pattern" />
 
+<Step>Update the import paths to match your project setup.</Step>
+
 </Steps>
 
 </TabsContent>
@@ -58,11 +58,11 @@ components/ui/grid-pattern.tsx
 
 ### GridPattern
 
-| Prop            | Type   | Description                                   | Default |
-| --------------- | ------ | --------------------------------------------- | ------- |
-| width           | number | Width of the pattern                          | 40      |
-| height          | number | Height of the pattern                         | 40      |
-| x               | number | X offset of the pattern                       | -1      |
-| y               | number | Y offset of the pattern                       | -1      |
-| squares         | number | X Y coordinates of filled squares as 2D array | []      |
-| strokeDasharray | string | Stroke dash array for the pattern             | 0       |
+| Prop              | Type     | Default | Description                                   |
+| ----------------- | -------- | ------- | --------------------------------------------- |
+| `width`           | `number` | `40`    | Width of the pattern                          |
+| `height`          | `number` | `40`    | Height of the pattern                         |
+| `x`               | `number` | `-1`    | X offset of the pattern                       |
+| `y`               | `number` | `-1`    | Y offset of the pattern                       |
+| `squares`         | `number` | `[]`    | X Y coordinates of filled squares as 2D array |
+| `strokeDasharray` | `string` | `0`     | Stroke dash array for the pattern             |
diff --git a/apps/web/content/docs/components/interactive-grid-pattern.mdx b/apps/web/content/docs/components/interactive-grid-pattern.mdx
new file mode 100644
index 00000000..0ebff751
--- /dev/null
+++ b/apps/web/content/docs/components/interactive-grid-pattern.mdx
@@ -0,0 +1,60 @@
+---
+title: Interactive Grid Pattern
+date: 2024-12-31
+description: A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
+author: nyxb
+published: true
+---
+
+<ComponentPreview 
+name="interactive-grid-pattern-demo"
+description="A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS."
+ />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx nyxb@latest add interactive-grid-pattern
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="interactive-grid-pattern" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Examples
+
+### Colorful
+
+<ComponentPreview name="interactive-grid-pattern-demo-2" />
+
+## Props
+
+| Prop               | Type               | Description                                                                                   | Default   |
+| ------------------ | ------------------ | --------------------------------------------------------------------------------------------- | --------- |
+| `width`            | `number`           | Width of each square in the grid                                                              | `40`      |
+| `height`           | `number`           | Height of each square in the grid                                                             | `40`      |
+| `squares`          | `[number, number]` | Number of squares in the grid. First number is horizontal squares, second is vertical squares | `[24,24]` |
+| `className`        | `string`           | Class name applied to the grid container                                                      | -         |
+| `squaresClassName` | `string`           | Class name applied to individual squares in the grid                                          | -         |
diff --git a/apps/web/content/docs/components/line-shadow-text.mdx b/apps/web/content/docs/components/line-shadow-text.mdx
new file mode 100644
index 00000000..6c315748
--- /dev/null
+++ b/apps/web/content/docs/components/line-shadow-text.mdx
@@ -0,0 +1,72 @@
+---
+title: Line Shadow Text
+date: 2025-01-11
+description: A line shadow text component for nyxb
+author: nyxb
+published: true
+---
+
+<ComponentPreview name="line-shadow-text-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx nyxb@latest add line-shadow-text
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="line-shadow-text" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-13}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      animation: {
+        "line-shadow": "line-shadow 15s linear infinite",
+      },
+      keyframes: {
+        "line-shadow": {
+          "0%": { "background-position": "0 0" },
+          "100%": { "background-position": "100% -100%" },
+        },
+      },
+    },
+  },
+};
+```
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Props
+
+| Prop        | Type   | Default   | Description                            |
+| ----------- | ------ | --------- | -------------------------------------- |
+| shadowColor | string | `"black"` | The color of the shadow effect         |
+| children    | string | -         | The text to display with shadow effect |
+| as          | string | `"span"`  | The HTML element to render the text as |
diff --git a/apps/web/content/docs/components/morphing-text.mdx b/apps/web/content/docs/components/morphing-text.mdx
new file mode 100644
index 00000000..a133787d
--- /dev/null
+++ b/apps/web/content/docs/components/morphing-text.mdx
@@ -0,0 +1,51 @@
+---
+title: Morphing Text
+date: 2024-09-02
+description: A dynamic text morphing component for Nyxb UI.
+author: nyxb
+published: true
+---
+
+<ComponentPreview 
+name="morphing-text-demo"
+description="A dynamic text morphing component for Nyxb UI."
+ />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx nyxb@latest add morphing-text
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="morphing-text" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Props
+
+| Prop        | Type       | Default | Description                          |
+| ----------- | ---------- | ------- | ------------------------------------ |
+| `texts`     | `string[]` | `[]`    | Array of texts to morph between      |
+| `className` | `string?`  | `""`    | Additional classes for the container |
+
+This `MorphingText` component dynamically transitions between an array of text strings, creating a smooth, engaging visual effect.
diff --git a/apps/web/content/docs/components/retro-grid.mdx b/apps/web/content/docs/components/retro-grid.mdx
index 72042d59..f6176976 100644
--- a/apps/web/content/docs/components/retro-grid.mdx
+++ b/apps/web/content/docs/components/retro-grid.mdx
@@ -9,8 +9,7 @@ video: https://cdn.nyxbui.design/retro-grid.mp4
 
 <ComponentPreview name="retro-grid-demo" />
 
-
-### Installation
+## Installation
 
 <Tabs defaultValue="cli">
 
@@ -21,28 +20,7 @@ video: https://cdn.nyxbui.design/retro-grid.mp4
 <TabsContent value="cli">
 
 ```bash
-npx nyxb@latest add retro-grid
-```
-
-Add the following animations to your tailwind.config.ts file:
-
-```ts
-// tailwind.config.ts
-module.exports = {
-  theme: {
-    extend: {
-      animation: {
-        grid: "grid 15s linear infinite",
-      },
-      keyframes: {
-        grid: {
-          "0%": { transform: "translateY(-50%)" },
-          "100%": { transform: "translateY(0)" },
-        },
-      },
-    },
-  },
-};
+npx nyx@latest add retro-grid
 ```
 
 </TabsContent>
@@ -51,10 +29,18 @@ module.exports = {
 
 <Steps>
 
-Copy and paste the following code into your project.
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="retro-grid" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Update `tailwind.config.js`</Step>
 
-```ts
-// tailwind.config.ts
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-13}
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   theme: {
     extend: {
@@ -72,12 +58,6 @@ module.exports = {
 };
 ```
 
-```text
-components/ui/retro-grid.tsx
-```
-
-<ComponentSource name="retro-grid" />
-
 </Steps>
 
 </TabsContent>
@@ -86,6 +66,11 @@ components/ui/retro-grid.tsx
 
 ## Props
 
-| Prop      | Type   | Description                      | Default |
-| --------- | ------ | -------------------------------- | ------- |
-| className | string | The class name for the component | ""      |
+| Prop             | Type     | Default  | Description                                   |
+| ---------------- | -------- | -------- | --------------------------------------------- |
+| `className`      | `string` | `-`      | Additional CSS classes for the grid container |
+| `angle`          | `number` | `65`     | Rotation angle of the grid in degrees         |
+| `cellSize`       | `number` | `60`     | Grid cell size in pixels                      |
+| `opacity`        | `number` | `0.5`    | Grid opacity value between 0 and 1            |
+| `lightLineColor` | `string` | `"gray"` | Grid line color in light mode                 |
+| `darkLineColor`  | `string` | `"gray"` | Grid line color in dark mode                  |
diff --git a/apps/web/content/docs/components/ripple-button.mdx b/apps/web/content/docs/components/ripple-button.mdx
new file mode 100644
index 00000000..0133b344
--- /dev/null
+++ b/apps/web/content/docs/components/ripple-button.mdx
@@ -0,0 +1,79 @@
+---
+title: Ripple Button
+date: 2024-11-17
+description: An animated button with ripple useful for user engagement.
+author: nyxb
+published: true
+---
+
+<ComponentPreview name="ripple-button-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx nyxb@latest add ripple-button
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="ripple-button" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-20}
+/** @type {import('tailwindcss').Config} */
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      animation: {
+        rippling: "rippling var(--duration) ease-out",
+      },
+      keyframes: {
+        rippling: {
+          "0%": {
+            opacity: "1",
+          },
+          "100%": {
+            transform: "scale(2)",
+            opacity: "0",
+          },
+        },
+      },
+    },
+  },
+};
+```
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Props
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children`    | `React.ReactNode` | `-`     | The content of the button.                                |
+| `className`   | `string`          | `-`     | Additional class names for the button.                    |
+| `rippleColor` | `string`          | `-`     | The rbg numbers only for the color of the rippling waves. |
+| `duration`    | `string`          | `-`     | The time span of one ripple.                              |
diff --git a/apps/web/content/docs/components/ripple.mdx b/apps/web/content/docs/components/ripple.mdx
index 75e93c76..1c7b73b8 100644
--- a/apps/web/content/docs/components/ripple.mdx
+++ b/apps/web/content/docs/components/ripple.mdx
@@ -9,8 +9,7 @@ video: https://cdn.nyxbui.design/ripple.mp4
 
 <ComponentPreview name="ripple-demo" />
 
-
-### Installation
+## Installation
 
 <Tabs defaultValue="cli">
 
@@ -21,7 +20,7 @@ video: https://cdn.nyxbui.design/ripple.mp4
 <TabsContent value="cli">
 
 ```bash
-npx nyxb@latest add ripple
+npx nyx@latest add ripple
 ```
 
 </TabsContent>
@@ -30,15 +29,23 @@ npx nyxb@latest add ripple
 
 <Steps>
 
-Copy and paste the following code into your project.
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="ripple" />
+
+<Step>Update the import paths to match your project setup.</Step>
 
-```ts
-// tailwind.config.ts
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-17}
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   theme: {
     extend: {
       animation: {
-        ripple: "ripple 3400ms ease infinite",
+        ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite",
       },
       keyframes: {
         ripple: {
@@ -55,14 +62,17 @@ module.exports = {
 };
 ```
 
-```text
-components/ui/ripple.tsx
-```
-
-<ComponentSource name="ripple" />
-
 </Steps>
 
 </TabsContent>
 
 </Tabs>
+
+## Props
+
+| Prop                | Type     | Default | Description                            |
+| ------------------- | -------- | ------- | -------------------------------------- |
+| `mainCircleSize`    | `number` | `210`   | The size of the main circle in pixels  |
+| `mainCircleOpacity` | `number` | `0.24`  | The opacity of the main circle         |
+| `numCircles`        | `number` | `8`     | The number of ripple circles to render |
+
diff --git a/apps/web/content/docs/components/script-copy-btn.mdx b/apps/web/content/docs/components/script-copy-btn.mdx
new file mode 100644
index 00000000..d4c8a4ee
--- /dev/null
+++ b/apps/web/content/docs/components/script-copy-btn.mdx
@@ -0,0 +1,50 @@
+---
+title: Script Copy Button
+date: 2023-11-18
+description: Copy code to clipboard
+author: nyxb
+published: true
+---
+
+<ComponentPreview name="script-copy-btn-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx nyxb@latest add script-copy-btn
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="script-copy-btn" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Props
+
+| Prop                         | Type                     | Default | Description                                                 |
+| ---------------------------- | ------------------------ | ------- | ----------------------------------------------------------- |
+| `className`                  | `string`                 | `-`     | The class name to be applied to the component               |
+| `showMultiplePackageOptions` | `boolean`                | `true`  | Whether to show options for multiple package managers       |
+| `codeLanguage`               | `string`                 | `-`     | The language of the code snippet (e.g., "shell")            |
+| `lightTheme`                 | `string`                 | `-`     | The theme to use for light mode                             |
+| `darkTheme`                  | `string`                 | `-`     | The theme to use for dark mode                              |
+| `commandMap`                 | `Record<string, string>` | `-`     | A map of package manager names to their respective commands |
diff --git a/apps/web/content/docs/components/terminal.mdx b/apps/web/content/docs/components/terminal.mdx
new file mode 100644
index 00000000..5c513a9b
--- /dev/null
+++ b/apps/web/content/docs/components/terminal.mdx
@@ -0,0 +1,66 @@
+---
+title: Terminal
+date: 2025-01-16
+description: An implementation of the MacOS terminal. Useful for showcasing a command line interface.
+author: nyxb
+published: true
+---
+
+<ComponentPreview name="terminal-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx nyxb@latest add terminal
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="terminal" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Props
+
+### Terminal
+
+| Prop        | Type        | Default | Description                              |
+| ----------- | ----------- | ------- | ---------------------------------------- |
+| `children`  | `ReactNode` | `-`     | Content to be typed out in the terminal. |
+| `className` | `string`    | `-`     | Custom CSS class for styling.            |
+
+### AnimatedSpan
+
+| Prop        | Type        | Default | Description                                        |
+| ----------- | ----------- | ------- | -------------------------------------------------- |
+| `children`  | `ReactNode` | `-`     | Content to be animated.                            |
+| `delay`     | `number`    | `0`     | Delay in milliseconds before the animation starts. |
+| `className` | `string`    | `-`     | Custom CSS class for styling.                      |
+
+### TypingAnimation
+
+| Prop        | Type                | Default  | Description                                        |
+| ----------- | ------------------- | -------- | -------------------------------------------------- |
+| `children`  | `ReactNode`         | `-`      | Content to be animated.                            |
+| `delay`     | `number`            | `0`      | Delay in milliseconds before the animation starts. |
+| `className` | `string`            | `-`      | Custom CSS class for styling.                      |
+| `duration`  | `number`            | `100`    | Duration in milliseconds for each character typed. |
+| `as`        | `React.ElementType` | `"span"` | The component type to render.                      |
diff --git a/apps/web/content/docs/components/text-animate.mdx b/apps/web/content/docs/components/text-animate.mdx
new file mode 100644
index 00000000..892f9d5f
--- /dev/null
+++ b/apps/web/content/docs/components/text-animate.mdx
@@ -0,0 +1,80 @@
+---
+title: Text Animate
+date: 2025-01-01
+description: A text animation component that animates text using a variety of different animations.
+author: nyxb
+published: true
+---
+
+<ComponentPreview 
+name="text-animate-demo"
+description="A text animation component that animates text using a variety of different animations."
+ />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx nyxb@latest add text-animate-demo
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="text-animate" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Examples
+
+### Blur In by Text
+
+<ComponentPreview name="text-animate-demo-2" />
+
+### Slide Up by Word
+
+<ComponentPreview name="text-animate-demo-3" />
+
+### Scale Up by Text
+
+<ComponentPreview name="text-animate-demo-4" />
+
+### Fade In by Line
+
+<ComponentPreview name="text-animate-demo-5" />
+
+### Slide Left by Character
+
+<ComponentPreview name="text-animate-demo-6" />
+
+## Props
+
+| Prop          | Type                                        | Default    | Description                                               |
+| ------------- | ------------------------------------------- | ---------- | --------------------------------------------------------- |
+| `children`    | `string`                                    | `-`        | The text content to animate                               |
+| `className`   | `string`                                    | `-`        | The class name to be applied to the component             |
+| `delay`       | `number`                                    | `0`        | Delay before animation starts                             |
+| `duration`    | `number`                                    | `0.3`      | Duration of the animation                                 |
+| `variants`    | `Variants`                                  | `-`        | Custom motion variants for the animation                  |
+| `as`          | `ElementType`                               | `"p"`      | The element type to render                                |
+| `by`          | `"text" \| "word" \| "character" \| "line"` | `"word"`   | How to split the text ("text", "word", "character")       |
+| `startOnView` | `boolean`                                   | `true`     | Whether to start animation when component enters viewport |
+| `animation`   | `AnimationVariant`                          | `"fadeIn"` | The animation preset to use                               |
diff --git a/apps/web/content/docs/components/typography.mdx b/apps/web/content/docs/components/typography.mdx
index 419d20cf..49d770b1 100644
--- a/apps/web/content/docs/components/typography.mdx
+++ b/apps/web/content/docs/components/typography.mdx
@@ -5,59 +5,60 @@ component: true
 ---
 
 <ComponentPreview
-  name="typography-demo"
-  className="[&>div.min-h-[350px]]:p-6"
-  description="A collection of typographic elements."
+   name="typography-demo"
+   className="[&>div.min-h-[350px]]:p-6"
+   description="A collection of typographic elements."
+   dots={false}
 />
 
 ## h1
 
-<ComponentPreview name="typography-h1" />
+<ComponentPreview name="typography-h1" dots={false} />
 
 ## h2
 
-<ComponentPreview name="typography-h2" />
+<ComponentPreview name="typography-h2" dots={false} />
 
 ## h3
 
-<ComponentPreview name="typography-h3" />
+<ComponentPreview name="typography-h3" dots={false} />
 
 ## h4
 
-<ComponentPreview name="typography-h4" />
+<ComponentPreview name="typography-h4" dots={false} />
 
 ## p
 
-<ComponentPreview name="typography-p" />
+<ComponentPreview name="typography-p" dots={false} />
 
 ## blockquote
 
-<ComponentPreview name="typography-blockquote" />
+<ComponentPreview name="typography-blockquote" dots={false} />
 
 ## table
 
-<ComponentPreview name="typography-table" />
+<ComponentPreview name="typography-table" dots={false} />
 
 ## list
 
-<ComponentPreview name="typography-list" />
+<ComponentPreview name="typography-list" dots={false} />
 
 ## Inline code
 
-<ComponentPreview name="typography-inline-code" />
+<ComponentPreview name="typography-inline-code" dots={false} />
 
 ## Lead
 
-<ComponentPreview name="typography-lead" />
+<ComponentPreview name="typography-lead" dots={false} />
 
 ## Large
 
-<ComponentPreview name="typography-large" />
+<ComponentPreview name="typography-large" dots={false} />
 
 ## Small
 
-<ComponentPreview name="typography-small" />
+<ComponentPreview name="typography-small" dots={false} />
 
 ## Muted
 
-<ComponentPreview name="typography-muted" />
+<ComponentPreview name="typography-muted" dots={false} />
diff --git a/apps/web/content/docs/components/warp-background.mdx b/apps/web/content/docs/components/warp-background.mdx
new file mode 100644
index 00000000..3e0d34ae
--- /dev/null
+++ b/apps/web/content/docs/components/warp-background.mdx
@@ -0,0 +1,57 @@
+---
+title: Warp Background
+date: 2024-12-24
+description: A container component that applies a warp animation effect to its children
+author: nyxb
+published: true
+---
+
+<ComponentPreview 
+name="warp-background-demo"
+description="A container component that applies a warp animation effect to its children"
+/>
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx nyx@latest add warp-background
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="warp-background" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Props
+
+| Prop           | Type              | Default                | Description                                     |
+| -------------- | ----------------- | ---------------------- | ----------------------------------------------- |
+| `children`     | `React.ReactNode` | `-`                    | The content to be put inside the warp animation |
+| `perspective`  | `number`          | `100`                  | The perspective of the warp animation           |
+| `beamsPerSide` | `number`          | `3`                    | The number of beams per side                    |
+| `beamSize`     | `number`          | `5`                    | The size of the beams                           |
+| `beamDelayMax` | `number`          | `3`                    | The maximum delay of the beams                  |
+| `beamDelayMin` | `number`          | `0`                    | The minimum delay of the beams                  |
+| `beamDuration` | `number`          | `3`                    | The duration of the beams                       |
+| `gridColor`    | `string`          | `"hsl(var(--border))"` | The color of the grid lines                     |
diff --git a/apps/web/content/docs/components/wavy-dot-pattern.mdx b/apps/web/content/docs/components/wavy-dot-pattern.mdx
deleted file mode 100644
index 919c0d86..00000000
--- a/apps/web/content/docs/components/wavy-dot-pattern.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: Wavy Dot Pattern
-date: 2024-05-24
-description: A background dot pattern that ripples when dots are clicked.
-author: nyxb
-published: true
----
-
-<ComponentPreview name = "wavy-dot-pattern-demo" />
-
-
-### Installation
-
-<Tabs defaultValue="cli">
-
-<TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx nyxb@latest add wavy-dot-pattern
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps>
-
-Copy and paste the following code into your project.
-
-```bash
-npm i react-anime
-```
-
-```text
-components/ui/wavy-dot-pattern.tsx
-```
-
-<ComponentSource name = "wavy-dot-pattern" />
-
-</Steps>
-
-</TabsContent>
-
-</Tabs>
-
-
-## Props
-
-### Dot Pattern
-
-| Prop       | Type   | Description                   | Default |
-| ---------- | ------ | ----------------------------- | ------- |
-| className  | string | Class name of the dot grid    | -       |
-| gridWidth  | number | Width of the dot grid         | 30      |
-| gridHeight | number | Height of the dot grid        | 15      |
-| dotWidth   | number | Width of the dot              | 8       |
-| dotWidth   | number | Width of the dot              | 8       |
diff --git a/apps/web/content/docs/dark-mode/next.mdx b/apps/web/content/docs/dark-mode/next.mdx
index 447d39a5..b8c0c1d0 100644
--- a/apps/web/content/docs/dark-mode/next.mdx
+++ b/apps/web/content/docs/dark-mode/next.mdx
@@ -22,9 +22,11 @@ npm install next-themes
 
 import * as React from "react"
 import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { type ThemeProviderProps } from "next-themes/dist/types"
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }
 ```
@@ -59,20 +61,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
 
 ### Add a mode toggle
 
-**Example 1** using Dropdown Menu
-
-in this example, we will use a `Dropdown Menu` component to toggle between light, dark mode.
-
-<ComponentPreview name="mode-toggle" className="[&_.preview]:items-start" styleSwitch={true} button="copy" dots={false} />
-
-**Example 2** using Toggle Group
-
-in this example, we will use a `Toggle Group` component to toggle between light, dark mode. also, we can change `scale` of this for smaller view.
-
-<ComponentPreview name="mode-toggle-group" className="[&_.preview]:items-start" styleSwitch={true} button="copy" dots={false} />
-
 Place a mode toggle on your site to toggle between light and dark mode.
 
-<ComponentPreview name="mode-toggle" className="[&_.preview]:items-start" styleSwitch={true} button="copy" dots={false} />
+<ComponentPreview name="mode-toggle" dots={false} className="[&_.preview]:items-start" />
 
 </Steps>
diff --git a/apps/web/content/docs/monorepo.mdx b/apps/web/content/docs/monorepo.mdx
new file mode 100644
index 00000000..48627291
--- /dev/null
+++ b/apps/web/content/docs/monorepo.mdx
@@ -0,0 +1,175 @@
+---
+title: Monorepo
+description: Using nyxb/ui components and CLI in a monorepo.
+---
+
+<Callout>
+  **Note:** We're releasing monorepo support in the CLI as __experimental__.
+  Help us improve it by testing it out and sending feedback. If you have any
+  questions, please [reach out to
+  us](https://github.com/nyxb-ui/ui/discussions).
+</Callout>
+
+Until now, using nyxb/ui in a monorepo was a bit of a pain. You could add
+components using the CLI, but you had to manage where the components
+were installed and manually fix import paths.
+
+With the new monorepo support in the CLI, we've made it a lot easier to use
+nyxb/ui in a monorepo.
+
+The CLI now understands the monorepo structure and will install the components,
+dependencies and registry dependencies to the correct paths and handle imports
+for you.
+
+## Getting started
+
+<Steps>
+
+### Create a new monorepo project
+
+To create a new monorepo project, run the `init` command. You will be prompted
+to select the type of project you are creating.
+
+```bash
+npx nyxb@canary init
+```
+
+Select the `Next.js (Monorepo)` option.
+
+```bash
+? Would you like to start a new project?
+    Next.js
+❯   Next.js (Monorepo)
+```
+
+This will create a new monorepo project with two workspaces: `web` and `ui`,
+and [Turborepo](https://turbo.build/repo/docs) as the build system.
+
+Everything is set up for you, so you can start adding components to your project.
+
+### Add components to your project
+
+To add components to your project, run the `add` command **in the path of your app**.
+
+```bash
+cd apps/web
+```
+
+```bash
+npx nyxb@canary add [COMPONENT]
+```
+
+The CLI will figure out what type of component you are adding and install the
+correct files to the correct path.
+
+For example, if you run `npx nyxb@canary add button`, the CLI will install the button component under `packages/ui` and update the import path for components in `apps/web`.
+
+If you run `npx nyxb@canary add login-01`, the CLI will install the `button`, `label`, `input` and `card` components under `packages/ui` and the `login-form` component under `apps/web/components`.
+
+### Importing components
+
+You can import components from the `@workspace/ui` package as follows:
+
+```tsx
+import { Button } from "@workspace/ui/components/button"
+```
+
+You can also import hooks and utilities from the `@workspace/ui` package.
+
+```tsx
+import { useTheme } from "@workspace/ui/hooks/use-theme"
+import { cn } from "@workspace/ui/lib/utils"
+```
+
+</Steps>
+
+## File Structure
+
+When you create a new monorepo project, the CLI will create the following file structure:
+
+```txt
+apps
+└── web         # Your app goes here.
+    ├── app
+    │   └── page.tsx
+    ├── components
+    │   └── login-form.tsx
+    ├── nyxbui.json
+    └── package.json
+packages
+└── ui          # Your components and dependencies are installed here.
+    ├── src
+    │   ├── components
+    │   │   └── button.tsx
+    │   ├── hooks
+    │   ├── lib
+    │   │   └── utils.ts
+    │   └── styles
+    │       └── globals.css
+    ├── nyxbui.json
+    └── package.json
+package.json
+turbo.json
+```
+
+## Requirements
+
+1. Every workspace must have a `nyxbui.json` file. A `package.json` file tells npm how to install the dependencies. A `nyxbui.json` file tells the CLI how and where to install components.
+
+2. The `nyxbui.json` file must properly define aliases for the workspace. This tells the CLI how to import components, hooks, utilities, etc.
+
+```json title="apps/web/nyxbui.json"
+{
+  "$schema": "https://nyxbui.design/schema.json",
+  "style": "miami",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "../../packages/ui/tailwind.config.ts",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "~/components",
+    "hooks": "~/hooks",
+    "lib": "~/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  }
+}
+```
+
+```json title="packages/ui/nyxbui.json"
+{
+  "$schema": "https://nyxbui.design/schema.json",
+  "style": "miami",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@workspace/ui/components",
+    "utils": "@workspace/ui/lib/utils",
+    "hooks": "@workspace/ui/hooks",
+    "lib": "@workspace/ui/lib",
+    "ui": "@workspace/ui/components"
+  }
+}
+```
+
+3. Ensure you have the same `style`, `iconLibrary` and `baseColor` in both `nyxbui.json` files.
+
+By following these requirements, the CLI will be able to install ui components, blocks, libs and hooks to the correct paths and handle imports for you.
+
+## Help us improve monorepo support
+
+We're releasing monorepo support in the CLI as **experimental**. Help us improve it by testing it out and sending feedback.
+
+If you have any questions, please reach out to us on [GitHub Discussions](https://github.com/nyxb-ui/ui/discussions).
diff --git a/apps/web/content/docs/registry/faq.mdx b/apps/web/content/docs/registry/faq.mdx
new file mode 100644
index 00000000..f10c9a15
--- /dev/null
+++ b/apps/web/content/docs/registry/faq.mdx
@@ -0,0 +1,125 @@
+---
+title: FAQ
+description: Frequently asked questions about running a registry.
+---
+
+## Frequently asked questions
+
+### What does a complex component look like?
+
+Here's an example of a complex component that installs a page, two components, a hook, a format-date utils and a config file.
+
+```json showLineNumbers
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    {
+      "path": "registry/hello-world/page.tsx",
+      "type": "registry:page",
+      "target": "app/hello/page.tsx"
+    },
+    {
+      "path": "registry/hello-world/components/hello-world.tsx",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/hello-world/components/formatted-message.tsx",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/hello-world/hooks/use-hello.ts",
+      "type": "registry:hook"
+    },
+    {
+      "path": "registry/hello-world/lib/format-date.ts",
+      "type": "registry:utils"
+    },
+    {
+      "path": "registry/hello-world/hello.config.ts",
+      "type": "registry:file",
+      "target": "~/hello.config.ts"
+    }
+  ]
+}
+```
+
+### How do I add a new Tailwind color?
+
+To add a new color you need to add it to `cssVars` and `tailwind.config.theme.extend.colors`.
+
+```json showLineNumbers {10-19} {24-29}
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    // ...
+  ],
+  "cssVars": {
+    "light": {
+      "brand-background": "20 14.3% 4.1%",
+      "brand-accent": "20 14.3% 4.1%"
+    },
+    "dark": {
+      "brand-background": "20 14.3% 4.1%",
+      "brand-accent": "20 14.3% 4.1%"
+    }
+  },
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "brand": {
+              "DEFAULT": "hsl(var(--brand-background))",
+              "accent": "hsl(var(--brand-accent))"
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+The CLI will update the project CSS file and tailwind.config.js file. Once updated, the new colors will be available to be used as utility classes: `bg-brand` and `text-brand-accent`.
+
+### How do I add a Tailwind animation?
+
+To add a new animation you add it to `tailwind.config.theme.extend.animation` and `tailwind.config.theme.extend.keyframes`.
+
+```json showLineNumbers {14-22}
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    // ...
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "keyframes": {
+            "wiggle": {
+              "0%, 100%": { "transform": "rotate(-3deg)" },
+              "50%": { "transform": "rotate(3deg)" }
+            }
+          },
+          "animation": {
+            "wiggle": "wiggle 1s ease-in-out infinite"
+          }
+        }
+      }
+    }
+  }
+}
+```
diff --git a/apps/web/content/docs/registry/getting-started.mdx b/apps/web/content/docs/registry/getting-started.mdx
new file mode 100644
index 00000000..23bff7c9
--- /dev/null
+++ b/apps/web/content/docs/registry/getting-started.mdx
@@ -0,0 +1,186 @@
+---
+title: Getting Started
+description: Learn how to get setup and run your own component registry.
+---
+
+This guide will walk you through the process of setting up your own component registry.
+
+It assumes you already have a project with components and would like to turn it into a registry.
+
+If you're starting a new registry project, you can use the [registry template](https://github.com/nyxb-ui/registry-template) as a starting point. We have already configured it for you.
+
+## registry.json
+
+The `registry.json` file is only required if you're using the `nyxb` CLI to build your registry.
+
+If you're using a different build system, you can skip this step as long as your build system produces valid JSON files that conform to the [registry-item schema specification](/docs/registry/registry-item-json).
+
+<Steps>
+
+### Add a registry.json file
+
+Create a `registry.json` file in the root of your project. Your project can be a Next.js, Remix, Vite, or any other project that supports React.
+
+```json title="registry.json" showLineNumbers
+{
+  "$schema": "https://nyxbui.design/schema/registry.json",
+  "name": "acme",
+  "homepage": "https://acme.com",
+  "items": [
+    // ...
+  ]
+}
+```
+
+This `registry.json` file must conform to the [registry schema specification](/docs/registry/registry-json).
+
+</Steps>
+
+## Add a registry item
+
+<Steps>
+
+### Create your component
+
+Add your first component. Here's an example of a simple `<HelloWorld />` component:
+
+```tsx title="registry/hello-world/hello-world.tsx" showLineNumbers
+import { Button } from "~/components/ui/button"
+
+export function HelloWorld() {
+  return <Button>Hello World</Button>
+}
+```
+
+<Callout className="mt-6">
+  **Note:** This example places the component in the `registry` directory. You
+  can place it anywhere in your project as long as you set the correct path in
+  the `registry.json` file.
+</Callout>
+
+```txt
+registry
+└── hello-world
+    └── hello-world.tsx
+```
+
+<Callout className="mt-6 [&_[data-rehype-pretty-code-title]]:pt-1 [&_pre]:mb-0">
+  **Important:** If you're placing your component in a custom directory, make
+  sure it is configured in your `tailwind.config.ts` file.
+
+```ts showLineNumbers
+// tailwind.config.ts
+export default {
+  content: ["./registry/**/*.{js,ts,jsx,tsx}"],
+}
+```
+
+</Callout>
+
+### Add your component to the registry
+
+To add your component to the registry, you need to add your component definition to `registry.json`.
+
+```json title="registry.json" showLineNumbers {6-17}
+{
+  "$schema": "https://nyxbui.design/schema/registry.json",
+  "name": "acme",
+  "homepage": "https://acme.com",
+  "items": [
+    {
+      "name": "hello-world",
+      "type": "registry:block",
+      "title": "Hello World",
+      "description": "A simple hello world component.",
+      "files": [
+        {
+          "path": "registry/hello-world/hello-world.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
+```
+
+You define your registry item by adding a `name`, `type`, `title`, `description` and `files`.
+
+For every file you add, you must specify the `path` and `type` of the file. The `path` is the relative path to the file from the root of your project. The `type` is the type of the file.
+
+You can read more about the registry item schema and file types in the [registry item schema docs](/docs/registry/registry-item-json).
+
+</Steps>
+
+## Build your registry
+
+<Steps>
+
+### Install the nyxb CLI
+
+Note: the `build` command is currently only available in the `nyxb@canary` version of the CLI.
+
+```bash
+npm install nyxb@canary
+```
+
+### Add a build script
+
+Add a `registry:build` script to your `package.json` file.
+
+```json title="package.json" showLineNumbers
+{
+  "scripts": {
+    "registry:build": "nyxb build"
+  }
+}
+```
+
+### Run the build script
+
+Run the build script to generate the registry JSON files.
+
+```bash
+npm run registry:build
+```
+
+<Callout className="mt-6">
+  **Note:** By default, the build script will generate the registry JSON files
+  in `public/r` e.g `public/r/hello-world.json`.
+
+You can change the output directory by passing the `--output` option. See the [nyxb build command](/docs/cli#build) for more information.
+
+</Callout>
+
+</Steps>
+
+## Serve your registry
+
+If you're running your registry on Next.js, you can now serve your registry by running the `next` server. The command might differ for other frameworks.
+
+```bash
+npm run dev
+```
+
+Your files will now be served at `http://localhost:3000/r/[NAME].json` eg. `http://localhost:3000/r/hello-world.json`.
+
+## Publish your registry
+
+To make your registry available to other developers, you can publish it by deploying your project to a public URL.
+
+## Guidelines
+
+Here are some guidelines to follow when building components for a registry.
+
+- The following properties are required for the block definition: `name`, `description`, `type` and `files`.
+- Make sure to list all registry dependencies in `registryDependencies`. A registry dependency is the name of the component in the registry eg. `input`, `button`, `card`, etc or a URL to a registry item eg. `http://localhost:3000/r/editor.json`.
+- Make sure to list all dependencies in `dependencies`. A dependency is the name of the package in the registry eg. `zod`, `sonner`, etc. To set a version, you can use the `name@version` format eg. `zod@^3.20.0`.
+- **Imports should always use the `@/registry` path.** eg. `import { HelloWorld } from "@/registry/hello-world/hello-world"`
+- Ideally, place your files within a registry item in `components`, `hooks`, `lib` directories.
+
+## Install using the CLI
+
+To install a registry item using the `nyxb` CLI, use the `add` command followed by the URL of the registry item.
+
+```bash
+npx nyxb@latest add http://localhost:3000/r/hello-world.json
+```
diff --git a/apps/web/content/docs/registry/index.mdx b/apps/web/content/docs/registry/index.mdx
new file mode 100644
index 00000000..90b887c5
--- /dev/null
+++ b/apps/web/content/docs/registry/index.mdx
@@ -0,0 +1,40 @@
+---
+title: Registry
+description: Run your own component registry.
+---
+
+<Callout>
+  **Note:** This feature is currently experimental. Help us improve it by
+  testing it out and sending feedback. If you have any questions, please [reach
+  out to us](https://github.com/nyxb-ui/ui/discussions).
+</Callout>
+
+You can use the `nyxb` CLI to run your own component registry. Running your own registry allows you to distribute your custom components, hooks, pages, and other files to any React project.
+
+<figure className="flex flex-col gap-4">
+  <Image
+    src="/images/registry-light.png"
+    width="1432"
+    height="960"
+    alt="Registry"
+    className="border dark:hidden shadow-sm rounded-lg overflow-hidden mt-6 w-full"
+  />
+  <Image
+    src="/images/registry-dark.png"
+    width="1432"
+    height="960"
+    alt="Registry"
+    className="border hidden dark:block shadow-sm rounded-lg overflow-hidden mt-6 w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    Distribute code to any React project.
+  </figcaption>
+</figure>
+
+Registry items are automatically compatible with the `nyxb` CLI and `Open in v0`.
+
+## Requirements
+
+You are free to design and host your custom registry as you see fit. The only requirement is that your registry items must be valid JSON files that conform to the [registry-item schema specification](/docs/registry/registry-item-json).
+
+If you'd like to see an example of a registry, we have a [template project](https://github.com/nyxb-ui/registry-template) for you to use as a starting point.
diff --git a/apps/web/content/docs/registry/open-in-v0.mdx b/apps/web/content/docs/registry/open-in-v0.mdx
new file mode 100644
index 00000000..4b4fab78
--- /dev/null
+++ b/apps/web/content/docs/registry/open-in-v0.mdx
@@ -0,0 +1,59 @@
+---
+title: Open in v0
+description: Integrate your registry with Open in v0.
+---
+
+If your registry is hosted and publicly accessible via a URL, you can open a registry item in v0 by using the `https://v0.dev/chat/api/open?url=[URL]` endpoint.
+
+eg. [https://v0.dev/chat/api/open?url=https://example.com/r/hello-world.json](https://v0.dev/chat/api/open?url=https://example.com/r/hello-world.json)
+
+## Button
+
+You can copy and paste the following code to add a `Open in v0` button to your site.
+
+```jsx
+import { Button } from "@/components/ui/button"
+
+export function OpenInV0Button({ url }: { url: string }) {
+  return (
+    <Button
+      aria-label="Open in v0"
+      className="h-8 gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black"
+      asChild
+    >
+      <a
+        href={`https://v0.dev/chat/api/open?url=${url}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        Open in{" "}
+        <svg
+          viewBox="0 0 40 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5 text-current"
+        >
+          <path
+            d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
+            fill="currentColor"
+          ></path>
+          <path
+            d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </a>
+    </Button>
+  )
+}
+```
+
+## Usage
+
+```jsx
+<OpenInV0Button url="https://example.com/r/hello-world.json" />
+```
+
+## Known issues
+
+- The `Open in v0` button does not support `cssVars` and `tailwind` properties.
diff --git a/apps/web/content/docs/registry/registry-item-json.mdx b/apps/web/content/docs/registry/registry-item-json.mdx
new file mode 100644
index 00000000..498d2929
--- /dev/null
+++ b/apps/web/content/docs/registry/registry-item-json.mdx
@@ -0,0 +1,272 @@
+---
+title: registry-item.json
+description: Specification for registry items.
+---
+
+The `registry-item.json` schema is used to define your custom registry items.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hello-world",
+  "type": "registry:block",
+  "title": "Hello World",
+  "description": "A simple hello world component.",
+  "files": [
+    {
+      "path": "registry/hello-world/hello-world.tsx",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/hello-world/use-hello-world.ts",
+      "type": "registry:hook"
+    }
+  ]
+}
+```
+
+## Definitions
+
+You can see the JSON Schema for `registry-item.json` [here](https://nyxbui.design/schema/registry-item.json).
+
+### $schema
+
+The `$schema` property is used to specify the schema for the `registry-item.json` file.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json"
+}
+```
+
+### name
+
+The `name` property is used to specify the name of your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "name": "hello-world"
+}
+```
+
+### title
+
+A human-readable title for your registry item. Keep it short and descriptive.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "title": "Hello World"
+}
+```
+
+### description
+
+A description of your registry item. This can be longer and more detailed than the `title`.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "description": "A simple hello world component."
+}
+```
+
+### type
+
+The `type` property is used to specify the type of your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "type": "registry:block"
+}
+```
+
+The following types are supported:
+
+| Type                 | Description                                      |
+| -------------------- | ------------------------------------------------ |
+| `registry:block`     | Use for complex components with multiple files.  |
+| `registry:component` | Use for simple components.                       |
+| `registry:lib`       | Use for lib and utils.                           |
+| `registry:hook`      | Use for hooks.                                   |
+| `registry:ui`        | Use for UI components and single-file primitives |
+| `registry:page`      | Use for page or file-based routes.               |
+| `registry:file`      | Use for miscellaneous files.                     |
+
+### author
+
+The `author` property is used to specify the author of the registry item.
+
+It can be unique to the registry item or the same as the author of the registry.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "author": "John Doe <john@doe.com>"
+}
+```
+
+### dependencies
+
+The `dependencies` property is used to specify the dependencies of your registry item. This is for `npm` packages.
+
+Use `@version` to specify the version of your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "dependencies": [
+    "@radix-ui/react-accordion",
+    "zod",
+    "lucide-react",
+    "name@1.0.2"
+  ]
+}
+```
+
+### registryDependencies
+
+Used for registry dependencies. Can be names or URLs.
+
+- For `nyxb/ui` registry items such as `button`, `input`, `select`, etc use the name eg. `['button', 'input', 'select']`.
+- For custom registry items use the URL of the registry item eg. `['https://example.com/r/hello-world.json']`.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "registryDependencies": [
+    "button",
+    "input",
+    "select",
+    "https://example.com/r/editor.json"
+  ]
+}
+```
+
+Note: The CLI will automatically resolve remote registry dependencies.
+
+### files
+
+The `files` property is used to specify the files of your registry item. Each file has a `path`, `type` and `target` (optional) property.
+
+**The `target` property is required for `registry:page` and `registry:file` types.**
+
+```json title="registry-item.json" showLineNumbers
+{
+  "files": [
+    {
+      "path": "registry/hello-world/page.tsx",
+      "type": "registry:page",
+      "target": "app/hello/page.tsx"
+    },
+    {
+      "path": "registry/hello-world/hello-world.tsx",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/hello-world/use-hello-world.ts",
+      "type": "registry:hook"
+    },
+    {
+      "path": "registry/hello-world/.env",
+      "type": "registry:file",
+      "target": "~/.env"
+    }
+  ]
+}
+```
+
+#### path
+
+The `path` property is used to specify the path to the file in your registry. This path is used by the build script to parse, transform and build the registry JSON payload.
+
+#### type
+
+The `type` property is used to specify the type of the file. See the [type](#type) section for more information.
+
+#### target
+
+The `target` property is used to indicate where the file should be placed in a project. This is optional and only required for `registry:page` and `registry:file` types.
+
+By default, the `nyxb` cli will read a project's `components.json` file to determine the target path. For some files, such as routes or config you can specify the target path manually.
+
+Use `~` to refer to the root of the project e.g `~/foo.config.js`.
+
+### tailwind
+
+The `tailwind` property is used for tailwind configuration such as `theme`, `plugins` and `content`.
+
+You can use the `tailwind.config` property to add colors, animations and plugins to your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "brand": "hsl(var(--brand))"
+          },
+          "keyframes": {
+            "wiggle": {
+              "0%, 100%": { "transform": "rotate(-3deg)" },
+              "50%": { "transform": "rotate(3deg)" }
+            }
+          },
+          "animation": {
+            "wiggle": "wiggle 1s ease-in-out infinite"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### cssVars
+
+Use to define CSS variables for your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "cssVars": {
+    "light": {
+      "brand": "20 14.3% 4.1%",
+      "radius": "0.5rem"
+    },
+    "dark": {
+      "brand": "20 14.3% 4.1%"
+    }
+  }
+}
+```
+
+<Callout>
+  **Note:** When adding colors, make sure to also add them to the
+  `tailwind.config.theme.extend.colors` property.
+</Callout>
+
+### docs
+
+Use `docs` to show custom documentation or message when installing your registry item via the CLI.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "docs": "Remember to add the FOO_BAR environment variable to your .env file."
+}
+```
+
+### categories
+
+Use `categories` to organize your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "categories": ["sidebar", "dashboard"]
+}
+```
+
+### meta
+
+Use `meta` to add additional metadata to your registry item. You can add any key/value pair that you want to be available to the registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "meta": { "foo": "bar" }
+}
+```
diff --git a/apps/web/content/docs/registry/registry-json.mdx b/apps/web/content/docs/registry/registry-json.mdx
new file mode 100644
index 00000000..4ca9491f
--- /dev/null
+++ b/apps/web/content/docs/registry/registry-json.mdx
@@ -0,0 +1,87 @@
+---
+title: registry.json
+description: Schema for running your own component registry.
+---
+
+The `registry.json` schema is used to define your custom component registry.
+
+```json title="registry.json" showLineNumbers
+{
+  "$schema": "https://nyxbui.design/schema/registry.json",
+  "name": "nyxb",
+  "homepage": "https://nyxbui.design",
+  "items": [
+    {
+      "name": "hello-world",
+      "type": "registry:block",
+      "title": "Hello World",
+      "description": "A simple hello world component.",
+      "files": [
+        {
+          "path": "registry/hello-world/hello-world.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Definitions
+
+You can see the JSON Schema for `registry.json` [here](https://nyxbui.design/schema/registry.json).
+
+### $schema
+
+The `$schema` property is used to specify the schema for the `registry.json` file.
+
+```json title="registry.json" showLineNumbers
+{
+  "$schema": "https://nyxbui.design/schema/registry.json"
+}
+```
+
+### name
+
+The `name` property is used to specify the name of your registry. This is used for data attributes and other metadata.
+
+```json title="registry.json" showLineNumbers
+{
+  "name": "acme"
+}
+```
+
+### homepage
+
+The homepage of your registry. This is used for data attributes and other metadata.
+
+```json title="registry.json" showLineNumbers
+{
+  "homepage": "https://acme.com"
+}
+```
+
+### items
+
+The `items` in your registry. Each item must implement the [registry-item schema specification](https://nyxbui.design/schema/registry-item.json).
+
+```json title="registry.json" showLineNumbers
+{
+  "items": [
+    {
+      "name": "hello-world",
+      "type": "registry:block",
+      "title": "Hello World",
+      "description": "A simple hello world component.",
+      "files": [
+        {
+          "path": "registry/hello-world/hello-world.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
+```
+
+See the [registry-item schema documentation](/docs/registry/registry-item) for more information.
diff --git a/apps/web/lib/blocks.ts b/apps/web/lib/blocks.ts
index c899737c..26941379 100644
--- a/apps/web/lib/blocks.ts
+++ b/apps/web/lib/blocks.ts
@@ -1,30 +1,30 @@
-'use server'
+"use server"
 
-import { z } from 'zod'
-import { Index } from '~/__registry__'
+import { registryItemSchema } from "nyxb/registry"
+import { z } from "zod"
 
-import type { Style } from '~/registry/registry-styles'
-import { registryEntrySchema } from '~/registry/schema'
-
-const DEFAULT_BLOCKS_STYLE = 'miami' satisfies Style['name']
-const BLOCKS_WHITELIST_PREFIXES = ['sidebar', 'login']
-const REGISTRY_BLOCK_TYPES = ['registry:block']
+import type { Style } from "~/registry/registry-styles"
 
 export async function getAllBlockIds(
-   style: Style['name'] = DEFAULT_BLOCKS_STYLE,
-) {
-   const blocks = await _getAllBlocks(style)
-   return blocks.map(block => block.name)
-}
-
-async function _getAllBlocks(style: Style['name'] = DEFAULT_BLOCKS_STYLE) {
-   const index = z.record(registryEntrySchema).parse(Index[style])
+   types: z.infer<typeof registryItemSchema>["type"][] = [
+      "registry:block",
+      "registry:internal",
+   ],
+   categories: string[] = [],
+   style: Style["name"] = "miami",
+): Promise<string[]> {
+   const { Index } = await import("~/__registry__")
+   const index = z.record(registryItemSchema).parse(Index[style])
 
-   return Object.values(index).filter(block =>
-      BLOCKS_WHITELIST_PREFIXES.some(
-         prefix =>
-            block.name.startsWith(prefix)
-            && REGISTRY_BLOCK_TYPES.includes(block.type),
-      ),
-   )
+   return Object.values(index)
+      .filter(
+         (block) =>
+            types.includes(block.type) &&
+            (categories.length === 0 ||
+               block.categories?.some((category) =>
+                  categories.includes(category),
+               )) &&
+            !block.name.startsWith("chart-"),
+      )
+      .map((block) => block.name)
 }
diff --git a/apps/web/lib/github.ts b/apps/web/lib/github.ts
index 5ece597d..71bceaed 100644
--- a/apps/web/lib/github.ts
+++ b/apps/web/lib/github.ts
@@ -33,9 +33,8 @@ export function getGitHubIssueUrl(params: GitHubIssueUrlParams): string {
 
    Object.entries(issueParams).forEach(([key, value]) => {
       if (Array.isArray(value)) {
-         value.forEach(item => urlParams.append(key, item))
-      }
-      else if (value !== undefined) {
+         value.forEach((item) => urlParams.append(key, item))
+      } else if (value !== undefined) {
          urlParams.append(key, value.toString())
       }
    })
@@ -44,5 +43,5 @@ export function getGitHubIssueUrl(params: GitHubIssueUrlParams): string {
 }
 
 export function getGithubFileUrl(slug: string) {
-   return `https://github.com/magicuidesign/magicui/blob/main/content${slug === '/docs' ? '/docs/index' : slug}.mdx`
+   return `https://github.com/nyxb-ui/ui/blob/main/content${slug === "/docs" ? "/docs/index" : slug}.mdx`
 }
diff --git a/apps/web/lib/highlight-code.ts b/apps/web/lib/highlight-code.ts
index 4409a273..910e9c2a 100644
--- a/apps/web/lib/highlight-code.ts
+++ b/apps/web/lib/highlight-code.ts
@@ -1,21 +1,21 @@
-'use server'
+"use server"
 
-import { codeToHtml } from 'shiki'
-import { lumosDarkTheme } from './lumos-dark'
+import { codeToHtml } from "shiki"
+import { lumosDarkTheme } from "./lumos-dark"
 
 export async function highlightCode(code: string) {
    return await codeToHtml(code, {
-      lang: 'tsx',
+      lang: "tsx",
       theme: lumosDarkTheme,
       transformers: [
          {
             pre(node) {
-               node.properties.className = 'overflow-x-auto py-4'
-               node.properties.style = 'background-color: rgb(9 9 11);' // zinc-950
+               node.properties.className = "overflow-x-auto py-4"
+               node.properties.style = "background-color: rgb(9 9 11);" // zinc-950
             },
             code(node) {
-               node.properties['data-line-numbers'] = ''
-               node.properties.className = 'grid min-w-full text-sm'
+               node.properties["data-line-numbers"] = ""
+               node.properties.className = "grid min-w-full text-sm"
             },
          },
       ],
diff --git a/apps/web/lib/registry.ts b/apps/web/lib/registry.ts
index 91b78023..3a06535e 100644
--- a/apps/web/lib/registry.ts
+++ b/apps/web/lib/registry.ts
@@ -1,16 +1,14 @@
-import { promises as fs } from 'fs'
-import { tmpdir } from 'os'
-import path from 'path'
-import type { SourceFile } from 'ts-morph'
-import { Project, ScriptKind, SyntaxKind } from 'ts-morph'
-import type { z } from 'zod'
-import { Index } from '~/__registry__'
+import { promises as fs } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import { type registryItemFileSchema, registryItemSchema } from "nyxb/registry"
+import { Project, ScriptKind, type SourceFile, SyntaxKind } from "ts-morph"
+import type { z } from "zod"
+import { Index } from "~/__registry__"
 
-import type { Style } from '~/registry/registry-styles'
-import type { registryItemFileSchema } from '~/registry/schema'
-import { registryEntrySchema } from '~/registry/schema'
+import type { Style } from "~/registry/registry-styles"
 
-export const DEFAULT_REGISTRY_STYLE = 'miami' satisfies Style['name']
+export const DEFAULT_REGISTRY_STYLE = "miami" satisfies Style["name"]
 
 const memoizedIndex: typeof Index = Object.fromEntries(
    Object.entries(Index).map(([style, items]) => [style, { ...items }]),
@@ -18,14 +16,14 @@ const memoizedIndex: typeof Index = Object.fromEntries(
 
 export function getRegistryComponent(
    name: string,
-   style: Style['name'] = DEFAULT_REGISTRY_STYLE,
+   style: Style["name"] = DEFAULT_REGISTRY_STYLE,
 ) {
    return memoizedIndex[style][name]?.component
 }
 
 export async function getRegistryItem(
    name: string,
-   style: Style['name'] = DEFAULT_REGISTRY_STYLE,
+   style: Style["name"] = DEFAULT_REGISTRY_STYLE,
 ) {
    const item = memoizedIndex[style][name]
 
@@ -36,18 +34,18 @@ export async function getRegistryItem(
    // Convert all file paths to object.
    // TODO: remove when we migrate to new registry.
    item.files = item.files.map((file: unknown) =>
-      typeof file === 'string' ? { path: file } : file,
+      typeof file === "string" ? { path: file } : file,
    )
 
    // Fail early before doing expensive file operations.
-   const result = registryEntrySchema.safeParse(item)
+   const result = registryItemSchema.safeParse(item)
    if (!result.success) {
       return null
    }
 
    let files: typeof result.data.files = []
    for (const file of item.files) {
-      const content = await getFileContent(file.path)
+      const content = await getFileContent(file)
       const relativePath = path.relative(process.cwd(), file.path)
 
       files.push({
@@ -59,15 +57,15 @@ export async function getRegistryItem(
 
    // Get meta.
    // Assume the first file is the main file.
-   const meta = await getFileMeta(files[0].path)
+   // const meta = await getFileMeta(files[0].path)
 
    // Fix file paths.
    files = fixFilePaths(files)
 
-   const parsed = registryEntrySchema.safeParse({
+   const parsed = registryItemSchema.safeParse({
       ...result.data,
       files,
-      meta,
+      // meta,
    })
 
    if (!parsed.success) {
@@ -78,27 +76,31 @@ export async function getRegistryItem(
    return parsed.data
 }
 
-async function getFileContent(filePath: string) {
-   const raw = await fs.readFile(filePath, 'utf-8')
+async function getFileContent(file: z.infer<typeof registryItemFileSchema>) {
+   const raw = await fs.readFile(file.path, "utf-8")
 
    const project = new Project({
       compilerOptions: {},
    })
 
-   const tempFile = await createTempSourceFile(filePath)
+   const tempFile = await createTempSourceFile(file.path)
    const sourceFile = project.createSourceFile(tempFile, raw, {
       scriptKind: ScriptKind.TSX,
    })
 
    // Remove meta variables.
-   removeVariable(sourceFile, 'iframeHeight')
-   removeVariable(sourceFile, 'containerClassName')
-   removeVariable(sourceFile, 'description')
+   removeVariable(sourceFile, "iframeHeight")
+   removeVariable(sourceFile, "containerClassName")
+   removeVariable(sourceFile, "description")
 
    let code = sourceFile.getFullText()
 
-   // Format the code.
-   code = code.replaceAll('export default', 'export')
+   // Some registry items uses default export.
+   // We want to use named export instead.
+   // TODO: do we really need this? - @nyxb.
+   if (file.type !== "registry:page") {
+      code = code.replaceAll("export default", "export")
+   }
 
    // Fix imports.
    code = fixImport(code)
@@ -107,7 +109,7 @@ async function getFileContent(filePath: string) {
 }
 
 async function getFileMeta(filePath: string) {
-   const raw = await fs.readFile(filePath, 'utf-8')
+   const raw = await fs.readFile(filePath, "utf-8")
 
    const project = new Project({
       compilerOptions: {},
@@ -118,9 +120,9 @@ async function getFileMeta(filePath: string) {
       scriptKind: ScriptKind.TSX,
    })
 
-   const iframeHeight = extractVariable(sourceFile, 'iframeHeight')
-   const containerClassName = extractVariable(sourceFile, 'containerClassName')
-   const description = extractVariable(sourceFile, 'description')
+   const iframeHeight = extractVariable(sourceFile, "iframeHeight")
+   const containerClassName = extractVariable(sourceFile, "containerClassName")
+   const description = extractVariable(sourceFile, "description")
 
    return {
       iframeHeight,
@@ -132,34 +134,34 @@ async function getFileMeta(filePath: string) {
 function getFileTarget(file: z.infer<typeof registryItemFileSchema>) {
    let target = file.target
 
-   if (!target || target === '') {
-      const fileName = file.path.split('/').pop()
+   if (!target || target === "") {
+      const fileName = file.path.split("/").pop()
       if (
-         file.type === 'registry:block'
-         || file.type === 'registry:component'
-         || file.type === 'registry:example'
+         file.type === "registry:block" ||
+         file.type === "registry:component" ||
+         file.type === "registry:example"
       ) {
          target = `components/${fileName}`
       }
 
-      if (file.type === 'registry:ui') {
+      if (file.type === "registry:ui") {
          target = `components/ui/${fileName}`
       }
 
-      if (file.type === 'registry:hook') {
+      if (file.type === "registry:hook") {
          target = `hooks/${fileName}`
       }
 
-      if (file.type === 'registry:lib') {
+      if (file.type === "registry:lib") {
          target = `lib/${fileName}`
       }
    }
 
-   return target
+   return target ?? ""
 }
 
 async function createTempSourceFile(filename: string) {
-   const dir = await fs.mkdtemp(path.join(tmpdir(), 'nyxb-'))
+   const dir = await fs.mkdtemp(path.join(tmpdir(), "nyxb-"))
    return path.join(dir, filename)
 }
 
@@ -182,7 +184,7 @@ function extractVariable(sourceFile: SourceFile, name: string) {
    return value
 }
 
-function fixFilePaths(files: z.infer<typeof registryEntrySchema>['files']) {
+function fixFilePaths(files: z.infer<typeof registryItemSchema>["files"]) {
    if (!files) {
       return []
    }
@@ -201,8 +203,7 @@ function fixFilePaths(files: z.infer<typeof registryEntrySchema>['files']) {
 }
 
 export function fixImport(content: string) {
-   // eslint-disable-next-line regexp/no-super-linear-backtracking
-   const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g
+   const regex = /~\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g
 
    const replacement = (
       match: string,
@@ -210,16 +211,13 @@ export function fixImport(content: string) {
       type: string,
       component: string,
    ) => {
-      if (type.endsWith('components')) {
+      if (type.endsWith("components")) {
          return `~/components/${component}`
-      }
-      else if (type.endsWith('ui')) {
+      } else if (type.endsWith("ui")) {
          return `~/components/ui/${component}`
-      }
-      else if (type.endsWith('hooks')) {
+      } else if (type.endsWith("hooks")) {
          return `~/hooks/${component}`
-      }
-      else if (type.endsWith('lib')) {
+      } else if (type.endsWith("lib")) {
          return `~/lib/${component}`
       }
 
@@ -229,38 +227,36 @@ export function fixImport(content: string) {
    return content.replace(regex, replacement)
 }
 
-export interface FileTree {
+export type FileTree = {
    name: string
    path?: string
    children?: FileTree[]
 }
 
 export function createFileTreeForRegistryItemFiles(
-   files: Array<{ path: string, target?: string }>,
+   files: Array<{ path: string; target?: string }>,
 ) {
    const root: FileTree[] = []
 
    for (const file of files) {
       const path = file.target ?? file.path
-      const parts = path.split('/')
+      const parts = path.split("/")
       let currentLevel = root
 
       for (let i = 0; i < parts.length; i++) {
          const part = parts[i]
          const isFile = i === parts.length - 1
-         const existingNode = currentLevel.find(node => node.name === part)
+         const existingNode = currentLevel.find((node) => node.name === part)
 
          if (existingNode) {
             if (isFile) {
                // Update existing file node with full path
                existingNode.path = path
-            }
-            else {
+            } else {
                // Move to next level in the tree
                currentLevel = existingNode.children!
             }
-         }
-         else {
+         } else {
             const newNode: FileTree = isFile
                ? { name: part, path }
                : { name: part, children: [] }
diff --git a/apps/web/lib/themes.ts b/apps/web/lib/themes.ts
index 5a6e27b0..26febeab 100644
--- a/apps/web/lib/themes.ts
+++ b/apps/web/lib/themes.ts
@@ -1,477 +1,477 @@
-import { themeColorsToCssVariables } from '~/lib/charts'
+import { themeColorsToCssVariables } from "~/lib/charts"
 
 const _THEMES = [
    {
-      name: 'Default',
-      id: 'default-shadcn',
+      name: "Default",
+      id: "default-nyxb",
       colors: {
-         'background': '0 0% 100%',
-         'foreground': '240 10% 3.9%',
-         'card': '0 0% 100%',
-         'card-foreground': '240 10% 3.9%',
-         'popover': '0 0% 100%',
-         'popover-foreground': '240 10% 3.9%',
-         'primary': '240 5.9% 10%',
-         'primary-foreground': '0 0% 98%',
-         'secondary': '240 4.8% 95.9%',
-         'secondary-foreground': '240 5.9% 10%',
-         'muted': '240 4.8% 95.9%',
-         'muted-foreground': '240 3.8% 46.1%',
-         'accent': '240 4.8% 95.9%',
-         'accent-foreground': '240 5.9% 10%',
-         'destructive': '0 84.2% 60.2%',
-         'destructive-foreground': '0 0% 98%',
-         'border': '240 5.9% 90%',
-         'input': '240 5.9% 90%',
-         'ring': '240 10% 3.9%',
-         'chart-1': '173 58% 39%',
-         'chart-2': '12 76% 61%',
-         'chart-3': '197 37% 24%',
-         'chart-4': '43 74% 66%',
-         'chart-5': '27 87% 67%',
+         background: "0 0% 100%",
+         foreground: "240 10% 3.9%",
+         card: "0 0% 100%",
+         "card-foreground": "240 10% 3.9%",
+         popover: "0 0% 100%",
+         "popover-foreground": "240 10% 3.9%",
+         primary: "240 5.9% 10%",
+         "primary-foreground": "0 0% 98%",
+         secondary: "240 4.8% 95.9%",
+         "secondary-foreground": "240 5.9% 10%",
+         muted: "240 4.8% 95.9%",
+         "muted-foreground": "240 3.8% 46.1%",
+         accent: "240 4.8% 95.9%",
+         "accent-foreground": "240 5.9% 10%",
+         destructive: "0 84.2% 60.2%",
+         "destructive-foreground": "0 0% 98%",
+         border: "240 5.9% 90%",
+         input: "240 5.9% 90%",
+         ring: "240 10% 3.9%",
+         "chart-1": "173 58% 39%",
+         "chart-2": "12 76% 61%",
+         "chart-3": "197 37% 24%",
+         "chart-4": "43 74% 66%",
+         "chart-5": "27 87% 67%",
       },
       colorsDark: {
-         'background': '240 10% 3.9%',
-         'foreground': '0 0% 98%',
-         'card': '240 10% 3.9%',
-         'card-foreground': '0 0% 98%',
-         'popover': '240 10% 3.9%',
-         'popover-foreground': '0 0% 98%',
-         'primary': '0 0% 98%',
-         'primary-foreground': '240 5.9% 10%',
-         'secondary': '240 3.7% 15.9%',
-         'secondary-foreground': '0 0% 98%',
-         'muted': '240 3.7% 15.9%',
-         'muted-foreground': '240 5% 64.9%',
-         'accent': '240 3.7% 15.9%',
-         'accent-foreground': '0 0% 98%',
-         'destructive': '0 62.8% 30.6%',
-         'destructive-foreground': '0 0% 98%',
-         'border': '240 3.7% 15.9%',
-         'input': '240 3.7% 15.9%',
-         'ring': '240 4.9% 83.9%',
-         'chart-1': '220 70% 50%',
-         'chart-5': '160 60% 45%',
-         'chart-3': '30 80% 55%',
-         'chart-4': '280 65% 60%',
-         'chart-2': '340 75% 55%',
+         background: "240 10% 3.9%",
+         foreground: "0 0% 98%",
+         card: "240 10% 3.9%",
+         "card-foreground": "0 0% 98%",
+         popover: "240 10% 3.9%",
+         "popover-foreground": "0 0% 98%",
+         primary: "0 0% 98%",
+         "primary-foreground": "240 5.9% 10%",
+         secondary: "240 3.7% 15.9%",
+         "secondary-foreground": "0 0% 98%",
+         muted: "240 3.7% 15.9%",
+         "muted-foreground": "240 5% 64.9%",
+         accent: "240 3.7% 15.9%",
+         "accent-foreground": "0 0% 98%",
+         destructive: "0 62.8% 30.6%",
+         "destructive-foreground": "0 0% 98%",
+         border: "240 3.7% 15.9%",
+         input: "240 3.7% 15.9%",
+         ring: "240 4.9% 83.9%",
+         "chart-1": "220 70% 50%",
+         "chart-5": "160 60% 45%",
+         "chart-3": "30 80% 55%",
+         "chart-4": "280 65% 60%",
+         "chart-2": "340 75% 55%",
       },
       fontFamily: {
          heading: {
-            name: 'Inter',
-            type: 'sans-serif',
+            name: "Inter",
+            type: "sans-serif",
          },
          body: {
-            name: 'Inter',
-            type: 'sans-serif',
+            name: "Inter",
+            type: "sans-serif",
          },
       },
       radius: 0.5,
    },
    {
-      name: 'Palette',
-      id: 'default-palette',
+      name: "Palette",
+      id: "default-palette",
       colors: {
-         'background': '0 0% 100%',
-         'foreground': '240 10% 3.9%',
-         'card': '0 0% 100%',
-         'card-foreground': '240 10% 3.9%',
-         'popover': '0 0% 100%',
-         'popover-foreground': '240 10% 3.9%',
-         'primary': '240 5.9% 10%',
-         'primary-foreground': '0 0% 98%',
-         'secondary': '240 4.8% 95.9%',
-         'secondary-foreground': '240 5.9% 10%',
-         'muted': '240 4.8% 95.9%',
-         'muted-foreground': '240 3.8% 46.1%',
-         'accent': '240 4.8% 95.9%',
-         'accent-foreground': '240 5.9% 10%',
-         'destructive': '0 84.2% 60.2%',
-         'destructive-foreground': '0 0% 98%',
-         'border': '240 5.9% 90%',
-         'input': '240 5.9% 90%',
-         'ring': '240 10% 3.9%',
-         'chart-1': '12 76% 61%',
-         'chart-2': '173 58% 39%',
-         'chart-3': '197 37% 24%',
-         'chart-4': '43 74% 66%',
-         'chart-5': '27 87% 67%',
+         background: "0 0% 100%",
+         foreground: "240 10% 3.9%",
+         card: "0 0% 100%",
+         "card-foreground": "240 10% 3.9%",
+         popover: "0 0% 100%",
+         "popover-foreground": "240 10% 3.9%",
+         primary: "240 5.9% 10%",
+         "primary-foreground": "0 0% 98%",
+         secondary: "240 4.8% 95.9%",
+         "secondary-foreground": "240 5.9% 10%",
+         muted: "240 4.8% 95.9%",
+         "muted-foreground": "240 3.8% 46.1%",
+         accent: "240 4.8% 95.9%",
+         "accent-foreground": "240 5.9% 10%",
+         destructive: "0 84.2% 60.2%",
+         "destructive-foreground": "0 0% 98%",
+         border: "240 5.9% 90%",
+         input: "240 5.9% 90%",
+         ring: "240 10% 3.9%",
+         "chart-1": "12 76% 61%",
+         "chart-2": "173 58% 39%",
+         "chart-3": "197 37% 24%",
+         "chart-4": "43 74% 66%",
+         "chart-5": "27 87% 67%",
       },
       colorsDark: {
-         'background': '240 10% 3.9%',
-         'foreground': '0 0% 98%',
-         'card': '240 10% 3.9%',
-         'card-foreground': '0 0% 98%',
-         'popover': '240 10% 3.9%',
-         'popover-foreground': '0 0% 98%',
-         'primary': '0 0% 98%',
-         'primary-foreground': '240 5.9% 10%',
-         'secondary': '240 3.7% 15.9%',
-         'secondary-foreground': '0 0% 98%',
-         'muted': '240 3.7% 15.9%',
-         'muted-foreground': '240 5% 64.9%',
-         'accent': '240 3.7% 15.9%',
-         'accent-foreground': '0 0% 98%',
-         'destructive': '0 62.8% 30.6%',
-         'destructive-foreground': '0 0% 98%',
-         'border': '240 3.7% 15.9%',
-         'input': '240 3.7% 15.9%',
-         'ring': '240 4.9% 83.9%',
-         'chart-1': '220 70% 50%',
-         'chart-2': '160 60% 45%',
-         'chart-3': '30 80% 55%',
-         'chart-4': '280 65% 60%',
-         'chart-5': '340 75% 55%',
+         background: "240 10% 3.9%",
+         foreground: "0 0% 98%",
+         card: "240 10% 3.9%",
+         "card-foreground": "0 0% 98%",
+         popover: "240 10% 3.9%",
+         "popover-foreground": "0 0% 98%",
+         primary: "0 0% 98%",
+         "primary-foreground": "240 5.9% 10%",
+         secondary: "240 3.7% 15.9%",
+         "secondary-foreground": "0 0% 98%",
+         muted: "240 3.7% 15.9%",
+         "muted-foreground": "240 5% 64.9%",
+         accent: "240 3.7% 15.9%",
+         "accent-foreground": "0 0% 98%",
+         destructive: "0 62.8% 30.6%",
+         "destructive-foreground": "0 0% 98%",
+         border: "240 3.7% 15.9%",
+         input: "240 3.7% 15.9%",
+         ring: "240 4.9% 83.9%",
+         "chart-1": "220 70% 50%",
+         "chart-2": "160 60% 45%",
+         "chart-3": "30 80% 55%",
+         "chart-4": "280 65% 60%",
+         "chart-5": "340 75% 55%",
       },
       fontFamily: {
          heading: {
-            name: 'Inter',
-            type: 'sans-serif',
+            name: "Inter",
+            type: "sans-serif",
          },
          body: {
-            name: 'Inter',
-            type: 'sans-serif',
+            name: "Inter",
+            type: "sans-serif",
          },
       },
       radius: 0.5,
    },
    {
-      name: 'Sapphire',
-      id: 'default-sapphire',
+      name: "Sapphire",
+      id: "default-sapphire",
       colors: {
-         'background': '0 0% 100%',
-         'foreground': '222.2 84% 4.9%',
-         'card': '0 0% 100%',
-         'cardForeground': '222.2 84% 4.9%',
-         'popover': '0 0% 100%',
-         'popoverForeground': '222.2 84% 4.9%',
-         'primary': '221.2 83.2% 53.3%',
-         'primaryForeground': '210 40% 98%',
-         'secondary': '210 40% 96.1%',
-         'secondaryForeground': '222.2 47.4% 11.2%',
-         'muted': '210 40% 96.1%',
-         'mutedForeground': '215.4 16.3% 44%',
-         'accent': '210 40% 96.1%',
-         'accentForeground': '222.2 47.4% 11.2%',
-         'destructive': '0 72% 51%',
-         'destructiveForeground': '210 40% 98%',
-         'border': '214.3 31.8% 91.4%',
-         'input': '214.3 31.8% 91.4%',
-         'ring': '221.2 83.2% 53.3%',
-         'chart-1': '221.2 83.2% 53.3%',
-         'chart-2': '212 95% 68%',
-         'chart-3': '216 92% 60%',
-         'chart-4': '210 98% 78%',
-         'chart-5': '212 97% 87%',
+         background: "0 0% 100%",
+         foreground: "222.2 84% 4.9%",
+         card: "0 0% 100%",
+         cardForeground: "222.2 84% 4.9%",
+         popover: "0 0% 100%",
+         popoverForeground: "222.2 84% 4.9%",
+         primary: "221.2 83.2% 53.3%",
+         primaryForeground: "210 40% 98%",
+         secondary: "210 40% 96.1%",
+         secondaryForeground: "222.2 47.4% 11.2%",
+         muted: "210 40% 96.1%",
+         mutedForeground: "215.4 16.3% 44%",
+         accent: "210 40% 96.1%",
+         accentForeground: "222.2 47.4% 11.2%",
+         destructive: "0 72% 51%",
+         destructiveForeground: "210 40% 98%",
+         border: "214.3 31.8% 91.4%",
+         input: "214.3 31.8% 91.4%",
+         ring: "221.2 83.2% 53.3%",
+         "chart-1": "221.2 83.2% 53.3%",
+         "chart-2": "212 95% 68%",
+         "chart-3": "216 92% 60%",
+         "chart-4": "210 98% 78%",
+         "chart-5": "212 97% 87%",
       },
       colorsDark: {
-         'background': '240 10% 3.9%',
-         'foreground': '0 0% 98%',
-         'card': '240 10% 3.9%',
-         'card-foreground': '0 0% 98%',
-         'popover': '240 10% 3.9%',
-         'popover-foreground': '0 0% 98%',
-         'primary': '221.2 83.2% 53.3%',
-         'primaryForeground': '210 40% 98%',
-         'secondary': '210 40% 96.1%',
-         'secondaryForeground': '222.2 47.4% 11.2%',
-         'muted': '240 3.7% 15.9%',
-         'muted-foreground': '240 5% 64.9%',
-         'accent': '240 3.7% 15.9%',
-         'accent-foreground': '0 0% 98%',
-         'destructive': '0 72% 51%',
-         'destructiveForeground': '210 40% 98%',
-         'border': '240 3.7% 15.9%',
-         'input': '240 3.7% 15.9%',
-         'ring': '221.2 83.2% 53.3%',
-         'chart-1': '221.2 83.2% 53.3%',
-         'chart-2': '212 95% 68%',
-         'chart-3': '216 92% 60%',
-         'chart-4': '210 98% 78%',
-         'chart-5': '212 97% 87%',
+         background: "240 10% 3.9%",
+         foreground: "0 0% 98%",
+         card: "240 10% 3.9%",
+         "card-foreground": "0 0% 98%",
+         popover: "240 10% 3.9%",
+         "popover-foreground": "0 0% 98%",
+         primary: "221.2 83.2% 53.3%",
+         primaryForeground: "210 40% 98%",
+         secondary: "210 40% 96.1%",
+         secondaryForeground: "222.2 47.4% 11.2%",
+         muted: "240 3.7% 15.9%",
+         "muted-foreground": "240 5% 64.9%",
+         accent: "240 3.7% 15.9%",
+         "accent-foreground": "0 0% 98%",
+         destructive: "0 72% 51%",
+         destructiveForeground: "210 40% 98%",
+         border: "240 3.7% 15.9%",
+         input: "240 3.7% 15.9%",
+         ring: "221.2 83.2% 53.3%",
+         "chart-1": "221.2 83.2% 53.3%",
+         "chart-2": "212 95% 68%",
+         "chart-3": "216 92% 60%",
+         "chart-4": "210 98% 78%",
+         "chart-5": "212 97% 87%",
       },
       fontFamily: {
          heading: {
-            name: 'Inter',
-            type: 'sans-serif',
+            name: "Inter",
+            type: "sans-serif",
          },
          body: {
-            name: 'Inter',
-            type: 'sans-serif',
+            name: "Inter",
+            type: "sans-serif",
          },
       },
       radius: 0.5,
    },
    {
-      name: 'Ruby',
-      id: 'default-ruby',
+      name: "Ruby",
+      id: "default-ruby",
       colors: {
-         'background': '0 0% 100%',
-         'foreground': '240 10% 3.9%',
-         'card': '0 0% 100%',
-         'cardForeground': '240 10% 3.9%',
-         'popover': '0 0% 100%',
-         'popoverForeground': '240 10% 3.9%',
-         'primary': '346.8 77.2% 49.8%',
-         'primaryForeground': '355.7 100% 99%',
-         'secondary': '240 4.8% 95.9%',
-         'secondaryForeground': '240 5.9% 10%',
-         'muted': '240 4.8% 95.9%',
-         'mutedForeground': '240 3.8% 45%',
-         'accent': '240 4.8% 95.9%',
-         'accentForeground': '240 5.9% 10%',
-         'destructive': '0 72% 51%',
-         'destructiveForeground': '0 0% 98%',
-         'border': '240 5.9% 90%',
-         'input': '240 5.9% 90%',
-         'ring': '346.8 77.2% 49.8%',
-         'chart-1': '347 77% 50%',
-         'chart-2': '352 83% 91%',
-         'chart-3': '350 80% 72%',
-         'chart-4': '351 83% 82%',
-         'chart-5': '349 77% 62%',
+         background: "0 0% 100%",
+         foreground: "240 10% 3.9%",
+         card: "0 0% 100%",
+         cardForeground: "240 10% 3.9%",
+         popover: "0 0% 100%",
+         popoverForeground: "240 10% 3.9%",
+         primary: "346.8 77.2% 49.8%",
+         primaryForeground: "355.7 100% 99%",
+         secondary: "240 4.8% 95.9%",
+         secondaryForeground: "240 5.9% 10%",
+         muted: "240 4.8% 95.9%",
+         mutedForeground: "240 3.8% 45%",
+         accent: "240 4.8% 95.9%",
+         accentForeground: "240 5.9% 10%",
+         destructive: "0 72% 51%",
+         destructiveForeground: "0 0% 98%",
+         border: "240 5.9% 90%",
+         input: "240 5.9% 90%",
+         ring: "346.8 77.2% 49.8%",
+         "chart-1": "347 77% 50%",
+         "chart-2": "352 83% 91%",
+         "chart-3": "350 80% 72%",
+         "chart-4": "351 83% 82%",
+         "chart-5": "349 77% 62%",
       },
       colorsDark: {
-         'background': '240 10% 3.9%',
-         'foreground': '0 0% 98%',
-         'card': '240 10% 3.9%',
-         'card-foreground': '0 0% 98%',
-         'popover': '240 10% 3.9%',
-         'popover-foreground': '0 0% 98%',
-         'primary': '346.8 77.2% 49.8%',
-         'primaryForeground': '355.7 100% 99%',
-         'secondary': '240 4.8% 95.9%',
-         'secondaryForeground': '240 5.9% 10%',
-         'muted': '240 3.7% 15.9%',
-         'muted-foreground': '240 5% 64.9%',
-         'accent': '240 3.7% 15.9%',
-         'accent-foreground': '0 0% 98%',
-         'destructive': '0 72% 51%',
-         'destructiveForeground': '0 0% 98%',
-         'border': '240 3.7% 15.9%',
-         'input': '240 3.7% 15.9%',
-         'ring': '221.2 83.2% 53.3%',
-         'chart-1': '347 77% 50%',
-         'chart-2': '349 77% 62%',
-         'chart-3': '350 80% 72%',
-         'chart-4': '351 83% 82%',
-         'chart-5': '352 83% 91%',
+         background: "240 10% 3.9%",
+         foreground: "0 0% 98%",
+         card: "240 10% 3.9%",
+         "card-foreground": "0 0% 98%",
+         popover: "240 10% 3.9%",
+         "popover-foreground": "0 0% 98%",
+         primary: "346.8 77.2% 49.8%",
+         primaryForeground: "355.7 100% 99%",
+         secondary: "240 4.8% 95.9%",
+         secondaryForeground: "240 5.9% 10%",
+         muted: "240 3.7% 15.9%",
+         "muted-foreground": "240 5% 64.9%",
+         accent: "240 3.7% 15.9%",
+         "accent-foreground": "0 0% 98%",
+         destructive: "0 72% 51%",
+         destructiveForeground: "0 0% 98%",
+         border: "240 3.7% 15.9%",
+         input: "240 3.7% 15.9%",
+         ring: "221.2 83.2% 53.3%",
+         "chart-1": "347 77% 50%",
+         "chart-2": "349 77% 62%",
+         "chart-3": "350 80% 72%",
+         "chart-4": "351 83% 82%",
+         "chart-5": "352 83% 91%",
       },
       fontFamily: {
          heading: {
-            name: 'Inter',
-            type: 'sans-serif',
+            name: "Inter",
+            type: "sans-serif",
          },
          body: {
-            name: 'Inter',
-            type: 'sans-serif',
+            name: "Inter",
+            type: "sans-serif",
          },
       },
       radius: 0.5,
    },
    {
-      name: 'Emerald',
-      id: 'default-emerald',
+      name: "Emerald",
+      id: "default-emerald",
       colors: {
-         'background': '0 0% 100%',
-         'foreground': '240 10% 3.9%',
-         'card': '0 0% 100%',
-         'cardForeground': '240 10% 3.9%',
-         'popover': '0 0% 100%',
-         'popoverForeground': '240 10% 3.9%',
-         'primary': '142 86% 28%',
-         'primaryForeground': '356 29% 98%',
-         'secondary': '240 4.8% 95.9%',
-         'secondaryForeground': '240 5.9% 10%',
-         'muted': '240 4.8% 95.9%',
-         'mutedForeground': '240 3.8% 45%',
-         'accent': '240 4.8% 95.9%',
-         'accentForeground': '240 5.9% 10%',
-         'destructive': '0 72% 51%',
-         'destructiveForeground': '0 0% 98%',
-         'border': '240 5.9% 90%',
-         'input': '240 5.9% 90%',
-         'ring': '142 86% 28%',
-         'chart-1': '139 65% 20%',
-         'chart-2': '140 74% 44%',
-         'chart-3': '142 88% 28%',
-         'chart-4': '137 55% 15%',
-         'chart-5': '141 40% 9%',
+         background: "0 0% 100%",
+         foreground: "240 10% 3.9%",
+         card: "0 0% 100%",
+         cardForeground: "240 10% 3.9%",
+         popover: "0 0% 100%",
+         popoverForeground: "240 10% 3.9%",
+         primary: "142 86% 28%",
+         primaryForeground: "356 29% 98%",
+         secondary: "240 4.8% 95.9%",
+         secondaryForeground: "240 5.9% 10%",
+         muted: "240 4.8% 95.9%",
+         mutedForeground: "240 3.8% 45%",
+         accent: "240 4.8% 95.9%",
+         accentForeground: "240 5.9% 10%",
+         destructive: "0 72% 51%",
+         destructiveForeground: "0 0% 98%",
+         border: "240 5.9% 90%",
+         input: "240 5.9% 90%",
+         ring: "142 86% 28%",
+         "chart-1": "139 65% 20%",
+         "chart-2": "140 74% 44%",
+         "chart-3": "142 88% 28%",
+         "chart-4": "137 55% 15%",
+         "chart-5": "141 40% 9%",
       },
       colorsDark: {
-         'background': '240 10% 3.9%',
-         'foreground': '0 0% 98%',
-         'card': '240 10% 3.9%',
-         'card-foreground': '0 0% 98%',
-         'popover': '240 10% 3.9%',
-         'popover-foreground': '0 0% 98%',
-         'primary': '142 86% 28%',
-         'primaryForeground': '356 29% 98%',
-         'secondary': '240 4.8% 95.9%',
-         'secondaryForeground': '240 5.9% 10%',
-         'muted': '240 3.7% 15.9%',
-         'muted-foreground': '240 5% 64.9%',
-         'accent': '240 3.7% 15.9%',
-         'accent-foreground': '0 0% 98%',
-         'destructive': '0 72% 51%',
-         'destructiveForeground': '0 0% 98%',
-         'border': '240 3.7% 15.9%',
-         'input': '240 3.7% 15.9%',
-         'ring': '142 86% 28%',
-         'chart-1': '142 88% 28%',
-         'chart-2': '139 65% 20%',
-         'chart-3': '140 74% 24%',
-         'chart-4': '137 55% 15%',
-         'chart-5': '141 40% 9%',
+         background: "240 10% 3.9%",
+         foreground: "0 0% 98%",
+         card: "240 10% 3.9%",
+         "card-foreground": "0 0% 98%",
+         popover: "240 10% 3.9%",
+         "popover-foreground": "0 0% 98%",
+         primary: "142 86% 28%",
+         primaryForeground: "356 29% 98%",
+         secondary: "240 4.8% 95.9%",
+         secondaryForeground: "240 5.9% 10%",
+         muted: "240 3.7% 15.9%",
+         "muted-foreground": "240 5% 64.9%",
+         accent: "240 3.7% 15.9%",
+         "accent-foreground": "0 0% 98%",
+         destructive: "0 72% 51%",
+         destructiveForeground: "0 0% 98%",
+         border: "240 3.7% 15.9%",
+         input: "240 3.7% 15.9%",
+         ring: "142 86% 28%",
+         "chart-1": "142 88% 28%",
+         "chart-2": "139 65% 20%",
+         "chart-3": "140 74% 24%",
+         "chart-4": "137 55% 15%",
+         "chart-5": "141 40% 9%",
       },
       fontFamily: {
          heading: {
-            name: 'Inter',
-            type: 'sans-serif',
+            name: "Inter",
+            type: "sans-serif",
          },
          body: {
-            name: 'Inter',
-            type: 'sans-serif',
+            name: "Inter",
+            type: "sans-serif",
          },
       },
       radius: 0.5,
    },
    {
-      name: 'Daylight',
-      id: 'default-daylight',
+      name: "Daylight",
+      id: "default-daylight",
       colors: {
-         'background': '36 39% 88%',
-         'foreground': '36 45% 15%',
-         'primary': '36 45% 70%',
-         'primaryForeground': '36 45% 11%',
-         'secondary': '40 35% 77%',
-         'secondaryForeground': '36 45% 25%',
-         'accent': '36 64% 57%',
-         'accentForeground': '36 72% 17%',
-         'destructive': '0 84% 37%',
-         'destructiveForeground': '0 0% 98%',
-         'muted': '36 33% 75%',
-         'mutedForeground': '36 45% 25%',
-         'card': '36 46% 82%',
-         'cardForeground': '36 45% 20%',
-         'popover': '0 0% 100%',
-         'popoverForeground': '240 10% 3.9%',
-         'border': '36 45% 60%',
-         'input': '36 45% 60%',
-         'ring': '36 45% 30%',
-         'chart-1': '25 34% 28%',
-         'chart-2': '26 36% 34%',
-         'chart-3': '28 40% 40%',
-         'chart-4': '31 41% 48%',
-         'chart-5': '35 43% 53%',
+         background: "36 39% 88%",
+         foreground: "36 45% 15%",
+         primary: "36 45% 70%",
+         primaryForeground: "36 45% 11%",
+         secondary: "40 35% 77%",
+         secondaryForeground: "36 45% 25%",
+         accent: "36 64% 57%",
+         accentForeground: "36 72% 17%",
+         destructive: "0 84% 37%",
+         destructiveForeground: "0 0% 98%",
+         muted: "36 33% 75%",
+         mutedForeground: "36 45% 25%",
+         card: "36 46% 82%",
+         cardForeground: "36 45% 20%",
+         popover: "0 0% 100%",
+         popoverForeground: "240 10% 3.9%",
+         border: "36 45% 60%",
+         input: "36 45% 60%",
+         ring: "36 45% 30%",
+         "chart-1": "25 34% 28%",
+         "chart-2": "26 36% 34%",
+         "chart-3": "28 40% 40%",
+         "chart-4": "31 41% 48%",
+         "chart-5": "35 43% 53%",
       },
       colorsDark: {
-         'background': '36 39% 88%',
-         'foreground': '36 45% 15%',
-         'primary': '36 45% 70%',
-         'primaryForeground': '36 45% 11%',
-         'secondary': '40 35% 77%',
-         'secondaryForeground': '36 45% 25%',
-         'accent': '36 64% 57%',
-         'accentForeground': '36 72% 17%',
-         'destructive': '0 84% 37%',
-         'destructiveForeground': '0 0% 98%',
-         'muted': '36 33% 75%',
-         'mutedForeground': '36 45% 25%',
-         'card': '36 46% 82%',
-         'cardForeground': '36 45% 20%',
-         'popover': '0 0% 100%',
-         'popoverForeground': '240 10% 3.9%',
-         'border': '36 45% 60%',
-         'input': '36 45% 60%',
-         'ring': '36 45% 30%',
-         'chart-1': '25 34% 28%',
-         'chart-2': '26 36% 34%',
-         'chart-3': '28 40% 40%',
-         'chart-4': '31 41% 48%',
-         'chart-5': '35 43% 53%',
+         background: "36 39% 88%",
+         foreground: "36 45% 15%",
+         primary: "36 45% 70%",
+         primaryForeground: "36 45% 11%",
+         secondary: "40 35% 77%",
+         secondaryForeground: "36 45% 25%",
+         accent: "36 64% 57%",
+         accentForeground: "36 72% 17%",
+         destructive: "0 84% 37%",
+         destructiveForeground: "0 0% 98%",
+         muted: "36 33% 75%",
+         mutedForeground: "36 45% 25%",
+         card: "36 46% 82%",
+         cardForeground: "36 45% 20%",
+         popover: "0 0% 100%",
+         popoverForeground: "240 10% 3.9%",
+         border: "36 45% 60%",
+         input: "36 45% 60%",
+         ring: "36 45% 30%",
+         "chart-1": "25 34% 28%",
+         "chart-2": "26 36% 34%",
+         "chart-3": "28 40% 40%",
+         "chart-4": "31 41% 48%",
+         "chart-5": "35 43% 53%",
       },
       fontFamily: {
          heading: {
-            name: 'DM Sans',
-            type: 'sans-serif',
+            name: "DM Sans",
+            type: "sans-serif",
          },
          body: {
-            name: 'Space Mono',
-            type: 'monospace',
+            name: "Space Mono",
+            type: "monospace",
          },
       },
    },
    {
-      name: 'Midnight',
-      id: 'default-midnight',
+      name: "Midnight",
+      id: "default-midnight",
       colors: {
-         'background': '240 5% 6%',
-         'foreground': '60 5% 90%',
-         'primary': '240 0% 90%',
-         'primaryForeground': '60 0% 0%',
-         'secondary': '240 4% 15%',
-         'secondaryForeground': '60 5% 85%',
-         'accent': '240 0% 13%',
-         'accentForeground': '60 0% 100%',
-         'destructive': '0 60% 50%',
-         'destructiveForeground': '0 0% 98%',
-         'muted': '240 5% 25%',
-         'mutedForeground': '60 5% 85%',
-         'card': '240 4% 10%',
-         'cardForeground': '60 5% 90%',
-         'popover': '240 5% 15%',
-         'popoverForeground': '60 5% 85%',
-         'border': '240 6% 20%',
-         'input': '240 6% 20%',
-         'ring': '240 5% 90%',
-         'chart-1': '359 2% 90%',
-         'chart-2': '240 1% 74%',
-         'chart-3': '240 1% 58%',
-         'chart-4': '240 1% 42%',
-         'chart-5': '240 2% 26%',
+         background: "240 5% 6%",
+         foreground: "60 5% 90%",
+         primary: "240 0% 90%",
+         primaryForeground: "60 0% 0%",
+         secondary: "240 4% 15%",
+         secondaryForeground: "60 5% 85%",
+         accent: "240 0% 13%",
+         accentForeground: "60 0% 100%",
+         destructive: "0 60% 50%",
+         destructiveForeground: "0 0% 98%",
+         muted: "240 5% 25%",
+         mutedForeground: "60 5% 85%",
+         card: "240 4% 10%",
+         cardForeground: "60 5% 90%",
+         popover: "240 5% 15%",
+         popoverForeground: "60 5% 85%",
+         border: "240 6% 20%",
+         input: "240 6% 20%",
+         ring: "240 5% 90%",
+         "chart-1": "359 2% 90%",
+         "chart-2": "240 1% 74%",
+         "chart-3": "240 1% 58%",
+         "chart-4": "240 1% 42%",
+         "chart-5": "240 2% 26%",
       },
       colorsDark: {
-         'background': '240 5% 6%',
-         'foreground': '60 5% 90%',
-         'primary': '240 0% 90%',
-         'primaryForeground': '60 0% 0%',
-         'secondary': '240 4% 15%',
-         'secondaryForeground': '60 5% 85%',
-         'accent': '240 0% 13%',
-         'accentForeground': '60 0% 100%',
-         'destructive': '0 60% 50%',
-         'destructiveForeground': '0 0% 98%',
-         'muted': '240 5% 25%',
-         'mutedForeground': '60 5% 85%',
-         'card': '240 4% 10%',
-         'cardForeground': '60 5% 90%',
-         'popover': '240 5% 15%',
-         'popoverForeground': '60 5% 85%',
-         'border': '240 6% 20%',
-         'input': '240 6% 20%',
-         'ring': '240 5% 90%',
-         'chart-1': '359 2% 90%',
-         'chart-2': '240 1% 74%',
-         'chart-3': '240 1% 58%',
-         'chart-4': '240 1% 42%',
-         'chart-5': '240 2% 26%',
+         background: "240 5% 6%",
+         foreground: "60 5% 90%",
+         primary: "240 0% 90%",
+         primaryForeground: "60 0% 0%",
+         secondary: "240 4% 15%",
+         secondaryForeground: "60 5% 85%",
+         accent: "240 0% 13%",
+         accentForeground: "60 0% 100%",
+         destructive: "0 60% 50%",
+         destructiveForeground: "0 0% 98%",
+         muted: "240 5% 25%",
+         mutedForeground: "60 5% 85%",
+         card: "240 4% 10%",
+         cardForeground: "60 5% 90%",
+         popover: "240 5% 15%",
+         popoverForeground: "60 5% 85%",
+         border: "240 6% 20%",
+         input: "240 6% 20%",
+         ring: "240 5% 90%",
+         "chart-1": "359 2% 90%",
+         "chart-2": "240 1% 74%",
+         "chart-3": "240 1% 58%",
+         "chart-4": "240 1% 42%",
+         "chart-5": "240 2% 26%",
       },
       fontFamily: {
          heading: {
-            name: 'Manrope',
-            type: 'sans-serif',
+            name: "Manrope",
+            type: "sans-serif",
          },
          body: {
-            name: 'Manrope',
-            type: 'sans-serif',
+            name: "Manrope",
+            type: "sans-serif",
          },
       },
       radius: 0.5,
    },
 ] as const
 
-export const THEMES = _THEMES.map(theme => ({
+export const THEMES = _THEMES.map((theme) => ({
    ...theme,
    cssVars: {
       light: themeColorsToCssVariables(theme.colors),
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
index b9caf999..53829693 100644
--- a/apps/web/next.config.mjs
+++ b/apps/web/next.config.mjs
@@ -1,35 +1,36 @@
-import path, { dirname } from 'path'
-import { fileURLToPath } from 'url'
-import { withContentCollections } from '@content-collections/next'
+import path, { dirname } from "path"
+import { fileURLToPath } from "url"
+import { withContentCollections } from "@content-collections/next"
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-   output: process.env.NODE_ENV === 'production' ? 'standalone' : undefined,
+   output: process.env.NODE_ENV === "production" ? "standalone" : undefined,
    reactStrictMode: true,
    swcMinify: true,
    experimental: {
       optimizeCss: true,
    },
+   transpilePackages: ["ts-morph"],
    images: {
       remotePatterns: [
          {
-            protocol: 'https',
-            hostname: 'avatars.githubusercontent.com',
+            protocol: "https",
+            hostname: "avatars.githubusercontent.com",
          },
          {
-            protocol: 'https',
-            hostname: 'images.unsplash.com',
+            protocol: "https",
+            hostname: "images.unsplash.com",
          },
          {
-            protocol: 'https',
-            hostname: 'cdn.nyxbui.design',
+            protocol: "https",
+            hostname: "cdn.nyxbui.design",
          },
          {
-            protocol: 'http',
-            hostname: 'localhost',
+            protocol: "http",
+            hostname: "localhost",
          },
       ],
    },
@@ -39,74 +40,74 @@ const nextConfig = {
    compiler: {
       // Remove console.log from production except for error logs
       removeConsole:
-         process.env.NODE_ENV === 'production' ? { exclude: ['error'] } : false,
+         process.env.NODE_ENV === "production" ? { exclude: ["error"] } : false,
    },
    async redirects() {
       return [
          {
-            source: '/discord',
-            destination: 'https://discord.gg/aBxNpG7fMP',
+            source: "/discord",
+            destination: "https://discord.gg/aBxNpG7fMP",
             permanent: true,
          },
          {
-            source: '/components',
-            destination: '/docs/components/accordion',
+            source: "/components",
+            destination: "/docs/components/accordion",
             permanent: true,
          },
          {
-            source: '/docs/components',
-            destination: '/docs/components/accordion',
+            source: "/docs/components",
+            destination: "/docs/components/accordion",
             permanent: true,
          },
          {
-            source: '/examples',
-            destination: '/examples/mail',
+            source: "/examples",
+            destination: "/examples/mail",
             permanent: false,
          },
          {
-            source: '/components/:path*',
-            destination: '/docs/components/:path*',
+            source: "/components/:path*",
+            destination: "/docs/components/:path*",
             permanent: true,
          },
          {
-            source: '/docs/primitives/:path*',
-            destination: '/docs/components/:path*',
+            source: "/docs/primitives/:path*",
+            destination: "/docs/components/:path*",
             permanent: true,
          },
          {
-            source: '/figma',
-            destination: '/docs/figma',
+            source: "/figma",
+            destination: "/docs/figma",
             permanent: true,
          },
          {
-            source: '/docs/forms',
-            destination: '/docs/components/form',
+            source: "/docs/forms",
+            destination: "/docs/components/form",
             permanent: false,
          },
          {
-            source: '/docs/forms/react-hook-form',
-            destination: '/docs/components/form',
+            source: "/docs/forms/react-hook-form",
+            destination: "/docs/components/form",
             permanent: false,
          },
          {
-            source: '/templates',
-            destination: '/docs/templates/startup',
+            source: "/templates",
+            destination: "/docs/templates/startup",
             permanent: false,
          },
          {
-            source: '/sidebar',
-            destination: '/docs/components/sidebar',
+            source: "/sidebar",
+            destination: "/docs/components/sidebar",
             permanent: true,
          },
          {
-            source: '/react-19',
-            destination: '/docs/react-19',
+            source: "/react-19",
+            destination: "/docs/react-19",
             permanent: true,
          },
       ]
    },
    webpack: (config) => {
-      config.resolve.alias.jotai = path.resolve(__dirname, 'node_modules/jotai')
+      config.resolve.alias.jotai = path.resolve(__dirname, "node_modules/jotai")
 
       return config
    },
diff --git a/apps/web/package.json b/apps/web/package.json
index 288e843e..74e5e636 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,127 +1,136 @@
 {
-  "name": "web",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev -p 3333",
-    "start": "next start -p 3333",
-    "build": "NODE_OPTIONS=\"--max-old-space-size=8192\" pnpm build:registry && next build",
-    "build:env": "tsx ./scripts/env.mts",
-    "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && tsx ./scripts/eslint-fix.mts",
-    "seed:tasks": "tsx --tsconfig ./tsconfig.scripts.json ./app/(app)/examples/tasks/data/seed.ts",
-    "build:docs": "content-collections build",
-    "typecheck": "pnpm build:env && pnpm build:docs&& tsc --noEmit",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "preview": "next build && next start -p 3333"
-  },
-  "dependencies": {
-    "@content-collections/cli": "^0.1.4",
-    "@content-collections/core": "^0.7.1",
-    "@content-collections/mdx": "^0.1.5",
-    "@content-collections/next": "^0.2.2",
-    "@faker-js/faker": "^8.2.0",
-    "@headlessui/react": "^2.0.4",
-    "@heroicons/react": "^2.1.3",
-    "@hookform/resolvers": "^3.6.0",
-    "@motionone/utils": "^10.18.0",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
-    "@radix-ui/react-aspect-ratio": "^1.0.3",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-hover-card": "^1.0.7",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-menubar": "^1.0.4",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-primitive": "^2.0.0",
-    "@radix-ui/react-progress": "^1.0.3",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.0.5",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.4",
-    "@radix-ui/react-toggle": "^1.0.3",
-    "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "@radix-ui/react-use-controllable-state": "^1.1.0",
-    "@t3-oss/env-nextjs": "^0.7.1",
-    "@tanstack/react-table": "^8.17.3",
-    "@vercel/analytics": "^1.3.1",
-    "canvas-confetti": "^1.9.3",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
-    "cobe": "^0.6.3",
-    "critters": "^0.0.22",
-    "date-fns": "^2.30.0",
-    "embla-carousel-autoplay": "^8.1.5",
-    "embla-carousel-react": "^8.1.5",
-    "framer-motion": "^10.12.16",
-    "geist": "^1.3.0",
-    "gsap": "^3.12.5",
-    "input-otp": "^1.2.4",
-    "jotai": "^2.8.3",
-    "lodash.template": "^4.5.0",
-    "lucide-react": "^0.395.0",
-    "next": "14.2.4",
-    "next-themes": "^0.3.0",
-    "next-view-transitions": "^0.2.0",
-    "octokit": "^4.0.2",
-    "react": "^18.3.1",
-    "react-anime": "^4.1.1",
-    "react-day-picker": "^8.10.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.44.2",
-    "react-icon-cloud": "^4.1.4",
-    "react-phone-number-input": "^3.3.9",
-    "react-resizable-panels": "^0.0.55",
-    "react-spring": "^9.7.3",
-    "react-tweet": "^3.2.1",
-    "react-wrap-balancer": "^1.1.1",
-    "recharts": "2.12.7",
-    "remark-code-import": "^1.2.0",
-    "schema-dts": "^1.1.2",
-    "sonner": "^1.5.0",
-    "swr": "2.2.6-beta.3",
-    "tailwind-merge": "^2.3.0",
-    "ts-morph": "^18.0.0",
-    "vaul": "^0.9.1",
-    "zod": "^3.20.2"
-  },
-  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/canvas-confetti": "^1.6.4",
-    "@types/lodash.template": "^4.5.1",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@types/unist": "^3.0.2",
-    "mdast-util-toc": "^6.1.1",
-    "postcss": "^8",
-    "rehype": "^13.0.1",
-    "rehype-autolink-headings": "^7.1.0",
-    "rehype-pretty-code": "^0.13.2",
-    "rehype-slug": "6.0.0",
-    "remark": "^14.0.3",
-    "remark-code-import": "^1.2.0",
-    "remark-gfm": "^4.0.0",
-    "rimraf": "^4.1.3",
-    "shiki": "^1.21.1",
-    "tailwindcss": "^3.4.1",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5",
-    "unist-builder": "4.0.0",
-    "unist-util-visit": "^5.0.0"
-  }
+   "name": "web",
+   "version": "0.1.0",
+   "private": true,
+   "type": "module",
+   "scripts": {
+      "dev": "next dev -p 3333",
+      "build": "content-collections build && pnpm build:all-registry && next build",
+      "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && biome format --write ./__registry__ --log-level=error --config-path ../../biome.json",
+      "build:v0-registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-v0-registry.mts && biome format --write ./__registry__ --log-level=error --config-path ../../biome.json",
+      "build:all-registry": "pnpm build:registry && pnpm build:v0-registry",
+      "registry:capture": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/capture-registry.mts",
+      "build:docs": "content-collections build",
+      "seed:tasks": "tsx --tsconfig ./tsconfig.scripts.json ./app/(app)/examples/tasks/data/seed.ts",
+      "start": "next start -p 3333",
+      "check": "biome check .",
+      "check:fix": "biome check . --write",
+      "preview": "next build && next start -p 3333",
+      "typecheck": "content-collections build && tsc --noEmit"
+   },
+   "dependencies": {
+      "motion": "^11.15.0",
+      "change-case": "^5.4.4",
+      "nyxb": "2.0.8-canary.1",
+      "lodash": "^4.17.21",
+      "@content-collections/cli": "^0.1.4",
+      "@content-collections/core": "^0.7.1",
+      "@content-collections/mdx": "^0.1.5",
+      "@content-collections/next": "^0.2.2",
+      "@faker-js/faker": "^8.2.0",
+      "@headlessui/react": "^2.0.4",
+      "@heroicons/react": "^2.1.3",
+      "@hookform/resolvers": "^3.6.0",
+      "@motionone/utils": "^10.18.0",
+      "@radix-ui/react-accordion": "^1.1.2",
+      "@radix-ui/react-alert-dialog": "^1.0.4",
+      "@radix-ui/react-aspect-ratio": "^1.0.3",
+      "@radix-ui/react-avatar": "^1.0.4",
+      "@radix-ui/react-checkbox": "^1.0.4",
+      "@radix-ui/react-collapsible": "^1.0.3",
+      "@radix-ui/react-context-menu": "^2.1.5",
+      "@radix-ui/react-dialog": "^1.0.5",
+      "@radix-ui/react-dropdown-menu": "^2.0.6",
+      "@radix-ui/react-hover-card": "^1.0.7",
+      "@radix-ui/react-icons": "^1.3.0",
+      "@radix-ui/react-label": "^2.0.2",
+      "@radix-ui/react-menubar": "^1.0.4",
+      "@radix-ui/react-navigation-menu": "^1.1.4",
+      "@radix-ui/react-popover": "^1.0.7",
+      "@radix-ui/react-primitive": "^2.0.0",
+      "@radix-ui/react-progress": "^1.0.3",
+      "@radix-ui/react-radio-group": "^1.1.3",
+      "@radix-ui/react-scroll-area": "^1.0.5",
+      "@radix-ui/react-select": "^2.0.0",
+      "@radix-ui/react-separator": "^1.0.3",
+      "@radix-ui/react-slider": "^1.1.2",
+      "@radix-ui/react-slot": "^1.0.2",
+      "@radix-ui/react-switch": "^1.0.3",
+      "@radix-ui/react-tabs": "^1.0.4",
+      "@radix-ui/react-toast": "^1.1.4",
+      "@radix-ui/react-toggle": "^1.0.3",
+      "@radix-ui/react-toggle-group": "^1.0.4",
+      "@radix-ui/react-tooltip": "^1.0.7",
+      "@radix-ui/react-use-controllable-state": "^1.1.0",
+      "@t3-oss/env-nextjs": "^0.7.1",
+      "@tanstack/react-table": "^8.17.3",
+      "@vercel/analytics": "^1.3.1",
+      "canvas-confetti": "^1.9.3",
+      "class-variance-authority": "^0.7.0",
+      "clsx": "^2.1.1",
+      "cmdk": "^1.0.0",
+      "cobe": "^0.6.3",
+      "critters": "^0.0.22",
+      "date-fns": "^2.30.0",
+      "embla-carousel-autoplay": "^8.1.5",
+      "embla-carousel-react": "^8.1.5",
+      "framer-motion": "^10.12.16",
+      "geist": "^1.3.0",
+      "gsap": "^3.12.5",
+      "input-otp": "^1.2.4",
+      "jotai": "^2.8.3",
+      "lodash.template": "^4.5.0",
+      "lucide-react": "^0.395.0",
+      "next": "14.2.4",
+      "next-themes": "^0.4.3",
+      "next-view-transitions": "^0.2.0",
+      "octokit": "^4.0.2",
+      "react": "^18.2.0",
+      "react-anime": "^4.1.1",
+      "react-day-picker": "^8.10.1",
+      "react-dom": "^18.2.0",
+      "react-hook-form": "^7.44.2",
+      "react-icon-cloud": "^4.1.4",
+      "react-phone-number-input": "^3.3.9",
+      "react-resizable-panels": "^0.0.55",
+      "react-spring": "^9.7.3",
+      "react-tweet": "^3.2.1",
+      "react-wrap-balancer": "^1.1.1",
+      "recharts": "2.12.7",
+      "remark-code-import": "^1.2.0",
+      "schema-dts": "^1.1.2",
+      "sonner": "^1.5.0",
+      "swr": "2.2.6-beta.3",
+      "tailwind-merge": "^2.3.0",
+      "ts-morph": "^18.0.0",
+      "vaul": "^0.9.1",
+      "zod": "^3.20.2"
+   },
+   "devDependencies": {
+      "@types/lodash": "^4.17.7",
+      "@tailwindcss/typography": "^0.5.9",
+      "@types/canvas-confetti": "^1.6.4",
+      "@types/lodash.template": "^4.5.1",
+      "@types/node": "^20",
+      "@types/react": "^18.2.65",
+      "@types/react-color": "^3.0.6",
+      "@types/react-dom": "^18.2.22",
+      "@types/unist": "^3.0.2",
+      "mdast-util-toc": "^6.1.1",
+      "postcss": "^8",
+      "rehype": "^13.0.1",
+      "rehype-autolink-headings": "^7.1.0",
+      "rehype-pretty-code": "^0.13.2",
+      "rehype-slug": "6.0.0",
+      "remark": "^14.0.3",
+      "remark-code-import": "^1.2.0",
+      "remark-gfm": "^4.0.0",
+      "rimraf": "^4.1.3",
+      "shiki": "1.20.0",
+      "tailwindcss": "^3.4.1",
+      "tailwindcss-animate": "^1.0.7",
+      "typescript": "^5.5.3",
+      "unist-builder": "4.0.0",
+      "unist-util-visit": "^5.0.0"
+   }
 }
diff --git a/apps/web/public/images/block-preview-dark.png b/apps/web/public/images/block-preview-dark.png
new file mode 100644
index 00000000..c3b74af0
Binary files /dev/null and b/apps/web/public/images/block-preview-dark.png differ
diff --git a/apps/web/public/images/block-preview-light.png b/apps/web/public/images/block-preview-light.png
new file mode 100644
index 00000000..b2258962
Binary files /dev/null and b/apps/web/public/images/block-preview-light.png differ
diff --git a/apps/web/public/images/registry-dark.png b/apps/web/public/images/registry-dark.png
new file mode 100644
index 00000000..6028eaee
Binary files /dev/null and b/apps/web/public/images/registry-dark.png differ
diff --git a/apps/web/public/images/registry-light.png b/apps/web/public/images/registry-light.png
new file mode 100644
index 00000000..6d41e915
Binary files /dev/null and b/apps/web/public/images/registry-light.png differ
diff --git a/apps/web/public/r/colors/index.json b/apps/web/public/r/colors/index.json
index c25158ef..c06c452a 100644
--- a/apps/web/public/r/colors/index.json
+++ b/apps/web/public/r/colors/index.json
@@ -6,6 +6,7 @@
     "hex": "#000000",
     "rgb": "rgb(0,0,0)",
     "hsl": "hsl(0,0%,0%)",
+    "oklch": "oklch(0.00,0.00,0)",
     "rgbChannel": "0 0 0",
     "hslChannel": "0 0% 0%"
   },
@@ -13,6 +14,7 @@
     "hex": "#ffffff",
     "rgb": "rgb(255,255,255)",
     "hsl": "hsl(0,0%,100%)",
+    "oklch": "oklch(1.00,0.00,0)",
     "rgbChannel": "255 255 255",
     "hslChannel": "0 0% 100%"
   },
@@ -22,6 +24,7 @@
       "hex": "#f8fafc",
       "rgb": "rgb(248,250,252)",
       "hsl": "hsl(210,40%,98%)",
+      "oklch": "oklch(0.98,0.00,248)",
       "rgbChannel": "248 250 252",
       "hslChannel": "210 40% 98%"
     },
@@ -30,6 +33,7 @@
       "hex": "#f1f5f9",
       "rgb": "rgb(241,245,249)",
       "hsl": "hsl(210,40%,96.1%)",
+      "oklch": "oklch(0.97,0.01,248)",
       "rgbChannel": "241 245 249",
       "hslChannel": "210 40% 96.1%"
     },
@@ -38,6 +42,7 @@
       "hex": "#e2e8f0",
       "rgb": "rgb(226,232,240)",
       "hsl": "hsl(214.3,31.8%,91.4%)",
+      "oklch": "oklch(0.93,0.01,256)",
       "rgbChannel": "226 232 240",
       "hslChannel": "214.3 31.8% 91.4%"
     },
@@ -46,6 +51,7 @@
       "hex": "#cbd5e1",
       "rgb": "rgb(203,213,225)",
       "hsl": "hsl(212.7,26.8%,83.9%)",
+      "oklch": "oklch(0.87,0.02,253)",
       "rgbChannel": "203 213 225",
       "hslChannel": "212.7 26.8% 83.9%"
     },
@@ -54,6 +60,7 @@
       "hex": "#94a3b8",
       "rgb": "rgb(148,163,184)",
       "hsl": "hsl(215,20.2%,65.1%)",
+      "oklch": "oklch(0.71,0.04,257)",
       "rgbChannel": "148 163 184",
       "hslChannel": "215 20.2% 65.1%"
     },
@@ -62,6 +69,7 @@
       "hex": "#64748b",
       "rgb": "rgb(100,116,139)",
       "hsl": "hsl(215.4,16.3%,46.9%)",
+      "oklch": "oklch(0.55,0.04,257)",
       "rgbChannel": "100 116 139",
       "hslChannel": "215.4 16.3% 46.9%"
     },
@@ -70,6 +78,7 @@
       "hex": "#475569",
       "rgb": "rgb(71,85,105)",
       "hsl": "hsl(215.3,19.3%,34.5%)",
+      "oklch": "oklch(0.45,0.04,257)",
       "rgbChannel": "71 85 105",
       "hslChannel": "215.3 19.3% 34.5%"
     },
@@ -78,6 +87,7 @@
       "hex": "#334155",
       "rgb": "rgb(51,65,85)",
       "hsl": "hsl(215.3,25%,26.7%)",
+      "oklch": "oklch(0.37,0.04,257)",
       "rgbChannel": "51 65 85",
       "hslChannel": "215.3 25% 26.7%"
     },
@@ -86,6 +96,7 @@
       "hex": "#1e293b",
       "rgb": "rgb(30,41,59)",
       "hsl": "hsl(217.2,32.6%,17.5%)",
+      "oklch": "oklch(0.28,0.04,260)",
       "rgbChannel": "30 41 59",
       "hslChannel": "217.2 32.6% 17.5%"
     },
@@ -94,6 +105,7 @@
       "hex": "#0f172a",
       "rgb": "rgb(15,23,42)",
       "hsl": "hsl(222.2,47.4%,11.2%)",
+      "oklch": "oklch(0.21,0.04,266)",
       "rgbChannel": "15 23 42",
       "hslChannel": "222.2 47.4% 11.2%"
     },
@@ -102,6 +114,7 @@
       "hex": "#020617",
       "rgb": "rgb(2,6,23)",
       "hsl": "hsl(222.2,84%,4.9%)",
+      "oklch": "oklch(0.13,0.04,265)",
       "rgbChannel": "2 6 23",
       "hslChannel": "222.2 84% 4.9%"
     }
@@ -112,6 +125,7 @@
       "hex": "#f9fafb",
       "rgb": "rgb(249,250,251)",
       "hsl": "hsl(210,20%,98%)",
+      "oklch": "oklch(0.98,0.00,248)",
       "rgbChannel": "249 250 251",
       "hslChannel": "210 20% 98%"
     },
@@ -120,6 +134,7 @@
       "hex": "#f3f4f6",
       "rgb": "rgb(243,244,246)",
       "hsl": "hsl(220,14.3%,95.9%)",
+      "oklch": "oklch(0.97,0.00,265)",
       "rgbChannel": "243 244 246",
       "hslChannel": "220 14.3% 95.9%"
     },
@@ -128,6 +143,7 @@
       "hex": "#e5e7eb",
       "rgb": "rgb(229,231,235)",
       "hsl": "hsl(220,13%,91%)",
+      "oklch": "oklch(0.93,0.01,265)",
       "rgbChannel": "229 231 235",
       "hslChannel": "220 13% 91%"
     },
@@ -136,6 +152,7 @@
       "hex": "#d1d5db",
       "rgb": "rgb(209,213,219)",
       "hsl": "hsl(216,12.2%,83.9%)",
+      "oklch": "oklch(0.87,0.01,258)",
       "rgbChannel": "209 213 219",
       "hslChannel": "216 12.2% 83.9%"
     },
@@ -144,6 +161,7 @@
       "hex": "#9ca3af",
       "rgb": "rgb(156,163,175)",
       "hsl": "hsl(217.9,10.6%,64.9%)",
+      "oklch": "oklch(0.71,0.02,261)",
       "rgbChannel": "156 163 175",
       "hslChannel": "217.9 10.6% 64.9%"
     },
@@ -152,6 +170,7 @@
       "hex": "#6b7280",
       "rgb": "rgb(107,114,128)",
       "hsl": "hsl(220,8.9%,46.1%)",
+      "oklch": "oklch(0.55,0.02,264)",
       "rgbChannel": "107 114 128",
       "hslChannel": "220 8.9% 46.1%"
     },
@@ -160,6 +179,7 @@
       "hex": "#4b5563",
       "rgb": "rgb(75,85,99)",
       "hsl": "hsl(215,13.8%,34.1%)",
+      "oklch": "oklch(0.45,0.03,257)",
       "rgbChannel": "75 85 99",
       "hslChannel": "215 13.8% 34.1%"
     },
@@ -168,6 +188,7 @@
       "hex": "#374151",
       "rgb": "rgb(55,65,81)",
       "hsl": "hsl(216.9,19.1%,26.7%)",
+      "oklch": "oklch(0.37,0.03,260)",
       "rgbChannel": "55 65 81",
       "hslChannel": "216.9 19.1% 26.7%"
     },
@@ -176,6 +197,7 @@
       "hex": "#1f2937",
       "rgb": "rgb(31,41,55)",
       "hsl": "hsl(215,27.9%,16.9%)",
+      "oklch": "oklch(0.28,0.03,257)",
       "rgbChannel": "31 41 55",
       "hslChannel": "215 27.9% 16.9%"
     },
@@ -184,6 +206,7 @@
       "hex": "#111827",
       "rgb": "rgb(17,24,39)",
       "hsl": "hsl(220.9,39.3%,11%)",
+      "oklch": "oklch(0.21,0.03,265)",
       "rgbChannel": "17 24 39",
       "hslChannel": "220.9 39.3% 11%"
     },
@@ -192,6 +215,7 @@
       "hex": "#030712",
       "rgb": "rgb(3,7,18)",
       "hsl": "hsl(224,71.4%,4.1%)",
+      "oklch": "oklch(0.13,0.03,262)",
       "rgbChannel": "3 7 18",
       "hslChannel": "224 71.4% 4.1%"
     }
@@ -202,6 +226,7 @@
       "hex": "#fafafa",
       "rgb": "rgb(250,250,250)",
       "hsl": "hsl(0,0%,98%)",
+      "oklch": "oklch(0.99,0.00,0)",
       "rgbChannel": "250 250 250",
       "hslChannel": "0 0% 98%"
     },
@@ -210,6 +235,7 @@
       "hex": "#f4f4f5",
       "rgb": "rgb(244,244,245)",
       "hsl": "hsl(240,4.8%,95.9%)",
+      "oklch": "oklch(0.97,0.00,286)",
       "rgbChannel": "244 244 245",
       "hslChannel": "240 4.8% 95.9%"
     },
@@ -218,6 +244,7 @@
       "hex": "#e4e4e7",
       "rgb": "rgb(228,228,231)",
       "hsl": "hsl(240,5.9%,90%)",
+      "oklch": "oklch(0.92,0.00,286)",
       "rgbChannel": "228 228 231",
       "hslChannel": "240 5.9% 90%"
     },
@@ -226,6 +253,7 @@
       "hex": "#d4d4d8",
       "rgb": "rgb(212,212,216)",
       "hsl": "hsl(240,4.9%,83.9%)",
+      "oklch": "oklch(0.87,0.01,286)",
       "rgbChannel": "212 212 216",
       "hslChannel": "240 4.9% 83.9%"
     },
@@ -234,6 +262,7 @@
       "hex": "#a1a1aa",
       "rgb": "rgb(161,161,170)",
       "hsl": "hsl(240,5%,64.9%)",
+      "oklch": "oklch(0.71,0.01,286)",
       "rgbChannel": "161 161 170",
       "hslChannel": "240 5% 64.9%"
     },
@@ -242,6 +271,7 @@
       "hex": "#71717a",
       "rgb": "rgb(113,113,122)",
       "hsl": "hsl(240,3.8%,46.1%)",
+      "oklch": "oklch(0.55,0.01,286)",
       "rgbChannel": "113 113 122",
       "hslChannel": "240 3.8% 46.1%"
     },
@@ -250,6 +280,7 @@
       "hex": "#52525b",
       "rgb": "rgb(82,82,91)",
       "hsl": "hsl(240,5.2%,33.9%)",
+      "oklch": "oklch(0.44,0.01,286)",
       "rgbChannel": "82 82 91",
       "hslChannel": "240 5.2% 33.9%"
     },
@@ -258,6 +289,7 @@
       "hex": "#3f3f46",
       "rgb": "rgb(63,63,70)",
       "hsl": "hsl(240,5.3%,26.1%)",
+      "oklch": "oklch(0.37,0.01,286)",
       "rgbChannel": "63 63 70",
       "hslChannel": "240 5.3% 26.1%"
     },
@@ -266,6 +298,7 @@
       "hex": "#27272a",
       "rgb": "rgb(39,39,42)",
       "hsl": "hsl(240,3.7%,15.9%)",
+      "oklch": "oklch(0.27,0.01,286)",
       "rgbChannel": "39 39 42",
       "hslChannel": "240 3.7% 15.9%"
     },
@@ -274,6 +307,7 @@
       "hex": "#18181b",
       "rgb": "rgb(24,24,27)",
       "hsl": "hsl(240,5.9%,10%)",
+      "oklch": "oklch(0.21,0.01,286)",
       "rgbChannel": "24 24 27",
       "hslChannel": "240 5.9% 10%"
     },
@@ -282,6 +316,7 @@
       "hex": "#09090b",
       "rgb": "rgb(9,9,11)",
       "hsl": "hsl(240,10%,3.9%)",
+      "oklch": "oklch(0.14,0.00,286)",
       "rgbChannel": "9 9 11",
       "hslChannel": "240 10% 3.9%"
     }
@@ -292,6 +327,7 @@
       "hex": "#fafafa",
       "rgb": "rgb(250,250,250)",
       "hsl": "hsl(0,0%,98%)",
+      "oklch": "oklch(0.99,0.00,0)",
       "rgbChannel": "250 250 250",
       "hslChannel": "0 0% 98%"
     },
@@ -300,6 +336,7 @@
       "hex": "#f5f5f5",
       "rgb": "rgb(245,245,245)",
       "hsl": "hsl(0,0%,96.1%)",
+      "oklch": "oklch(0.97,0.00,0)",
       "rgbChannel": "245 245 245",
       "hslChannel": "0 0% 96.1%"
     },
@@ -308,6 +345,7 @@
       "hex": "#e5e5e5",
       "rgb": "rgb(229,229,229)",
       "hsl": "hsl(0,0%,89.8%)",
+      "oklch": "oklch(0.92,0.00,0)",
       "rgbChannel": "229 229 229",
       "hslChannel": "0 0% 89.8%"
     },
@@ -316,6 +354,7 @@
       "hex": "#d4d4d4",
       "rgb": "rgb(212,212,212)",
       "hsl": "hsl(0,0%,83.1%)",
+      "oklch": "oklch(0.87,0.00,0)",
       "rgbChannel": "212 212 212",
       "hslChannel": "0 0% 83.1%"
     },
@@ -324,6 +363,7 @@
       "hex": "#a3a3a3",
       "rgb": "rgb(163,163,163)",
       "hsl": "hsl(0,0%,63.9%)",
+      "oklch": "oklch(0.72,0.00,0)",
       "rgbChannel": "163 163 163",
       "hslChannel": "0 0% 63.9%"
     },
@@ -332,6 +372,7 @@
       "hex": "#737373",
       "rgb": "rgb(115,115,115)",
       "hsl": "hsl(0,0%,45.1%)",
+      "oklch": "oklch(0.56,0.00,0)",
       "rgbChannel": "115 115 115",
       "hslChannel": "0 0% 45.1%"
     },
@@ -340,6 +381,7 @@
       "hex": "#525252",
       "rgb": "rgb(82,82,82)",
       "hsl": "hsl(0,0%,32.2%)",
+      "oklch": "oklch(0.44,0.00,0)",
       "rgbChannel": "82 82 82",
       "hslChannel": "0 0% 32.2%"
     },
@@ -348,6 +390,7 @@
       "hex": "#404040",
       "rgb": "rgb(64,64,64)",
       "hsl": "hsl(0,0%,25.1%)",
+      "oklch": "oklch(0.37,0.00,0)",
       "rgbChannel": "64 64 64",
       "hslChannel": "0 0% 25.1%"
     },
@@ -356,6 +399,7 @@
       "hex": "#262626",
       "rgb": "rgb(38,38,38)",
       "hsl": "hsl(0,0%,14.9%)",
+      "oklch": "oklch(0.27,0.00,0)",
       "rgbChannel": "38 38 38",
       "hslChannel": "0 0% 14.9%"
     },
@@ -364,6 +408,7 @@
       "hex": "#171717",
       "rgb": "rgb(23,23,23)",
       "hsl": "hsl(0,0%,9%)",
+      "oklch": "oklch(0.20,0.00,0)",
       "rgbChannel": "23 23 23",
       "hslChannel": "0 0% 9%"
     },
@@ -372,6 +417,7 @@
       "hex": "#0a0a0a",
       "rgb": "rgb(10,10,10)",
       "hsl": "hsl(0,0%,3.9%)",
+      "oklch": "oklch(0.14,0.00,0)",
       "rgbChannel": "10 10 10",
       "hslChannel": "0 0% 3.9%"
     }
@@ -382,6 +428,7 @@
       "hex": "#fafaf9",
       "rgb": "rgb(250,250,249)",
       "hsl": "hsl(60,9.1%,97.8%)",
+      "oklch": "oklch(0.98,0.00,106)",
       "rgbChannel": "250 250 249",
       "hslChannel": "60 9.1% 97.8%"
     },
@@ -390,6 +437,7 @@
       "hex": "#f5f5f4",
       "rgb": "rgb(245,245,244)",
       "hsl": "hsl(60,4.8%,95.9%)",
+      "oklch": "oklch(0.97,0.00,106)",
       "rgbChannel": "245 245 244",
       "hslChannel": "60 4.8% 95.9%"
     },
@@ -398,6 +446,7 @@
       "hex": "#e7e5e4",
       "rgb": "rgb(231,229,228)",
       "hsl": "hsl(20,5.9%,90%)",
+      "oklch": "oklch(0.92,0.00,49)",
       "rgbChannel": "231 229 228",
       "hslChannel": "20 5.9% 90%"
     },
@@ -406,6 +455,7 @@
       "hex": "#d6d3d1",
       "rgb": "rgb(214,211,209)",
       "hsl": "hsl(24,5.7%,82.9%)",
+      "oklch": "oklch(0.87,0.00,56)",
       "rgbChannel": "214 211 209",
       "hslChannel": "24 5.7% 82.9%"
     },
@@ -414,6 +464,7 @@
       "hex": "#a8a29e",
       "rgb": "rgb(168,162,158)",
       "hsl": "hsl(24,5.4%,63.9%)",
+      "oklch": "oklch(0.72,0.01,56)",
       "rgbChannel": "168 162 158",
       "hslChannel": "24 5.4% 63.9%"
     },
@@ -422,6 +473,7 @@
       "hex": "#78716c",
       "rgb": "rgb(120,113,108)",
       "hsl": "hsl(25,5.3%,44.7%)",
+      "oklch": "oklch(0.55,0.01,58)",
       "rgbChannel": "120 113 108",
       "hslChannel": "25 5.3% 44.7%"
     },
@@ -430,6 +482,7 @@
       "hex": "#57534e",
       "rgb": "rgb(87,83,78)",
       "hsl": "hsl(33.3,5.5%,32.4%)",
+      "oklch": "oklch(0.44,0.01,74)",
       "rgbChannel": "87 83 78",
       "hslChannel": "33.3 5.5% 32.4%"
     },
@@ -438,6 +491,7 @@
       "hex": "#44403c",
       "rgb": "rgb(68,64,60)",
       "hsl": "hsl(30,6.3%,25.1%)",
+      "oklch": "oklch(0.37,0.01,68)",
       "rgbChannel": "68 64 60",
       "hslChannel": "30 6.3% 25.1%"
     },
@@ -446,6 +500,7 @@
       "hex": "#292524",
       "rgb": "rgb(41,37,36)",
       "hsl": "hsl(12,6.5%,15.1%)",
+      "oklch": "oklch(0.27,0.01,34)",
       "rgbChannel": "41 37 36",
       "hslChannel": "12 6.5% 15.1%"
     },
@@ -454,6 +509,7 @@
       "hex": "#1c1917",
       "rgb": "rgb(28,25,23)",
       "hsl": "hsl(24,9.8%,10%)",
+      "oklch": "oklch(0.22,0.01,56)",
       "rgbChannel": "28 25 23",
       "hslChannel": "24 9.8% 10%"
     },
@@ -462,6 +518,7 @@
       "hex": "#0c0a09",
       "rgb": "rgb(12,10,9)",
       "hsl": "hsl(20,14.3%,4.1%)",
+      "oklch": "oklch(0.15,0.00,49)",
       "rgbChannel": "12 10 9",
       "hslChannel": "20 14.3% 4.1%"
     }
@@ -472,6 +529,7 @@
       "hex": "#fef2f2",
       "rgb": "rgb(254,242,242)",
       "hsl": "hsl(0,85.7%,97.3%)",
+      "oklch": "oklch(0.97,0.01,17)",
       "rgbChannel": "254 242 242",
       "hslChannel": "0 85.7% 97.3%"
     },
@@ -480,6 +538,7 @@
       "hex": "#fee2e2",
       "rgb": "rgb(254,226,226)",
       "hsl": "hsl(0,93.3%,94.1%)",
+      "oklch": "oklch(0.94,0.03,18)",
       "rgbChannel": "254 226 226",
       "hslChannel": "0 93.3% 94.1%"
     },
@@ -488,6 +547,7 @@
       "hex": "#fecaca",
       "rgb": "rgb(254,202,202)",
       "hsl": "hsl(0,96.3%,89.4%)",
+      "oklch": "oklch(0.88,0.06,18)",
       "rgbChannel": "254 202 202",
       "hslChannel": "0 96.3% 89.4%"
     },
@@ -496,6 +556,7 @@
       "hex": "#fca5a5",
       "rgb": "rgb(252,165,165)",
       "hsl": "hsl(0,93.5%,81.8%)",
+      "oklch": "oklch(0.81,0.10,20)",
       "rgbChannel": "252 165 165",
       "hslChannel": "0 93.5% 81.8%"
     },
@@ -504,6 +565,7 @@
       "hex": "#f87171",
       "rgb": "rgb(248,113,113)",
       "hsl": "hsl(0,90.6%,70.8%)",
+      "oklch": "oklch(0.71,0.17,22)",
       "rgbChannel": "248 113 113",
       "hslChannel": "0 90.6% 70.8%"
     },
@@ -512,6 +574,7 @@
       "hex": "#ef4444",
       "rgb": "rgb(239,68,68)",
       "hsl": "hsl(0,84.2%,60.2%)",
+      "oklch": "oklch(0.64,0.21,25)",
       "rgbChannel": "239 68 68",
       "hslChannel": "0 84.2% 60.2%"
     },
@@ -520,6 +583,7 @@
       "hex": "#dc2626",
       "rgb": "rgb(220,38,38)",
       "hsl": "hsl(0,72.2%,50.6%)",
+      "oklch": "oklch(0.58,0.22,27)",
       "rgbChannel": "220 38 38",
       "hslChannel": "0 72.2% 50.6%"
     },
@@ -528,6 +592,7 @@
       "hex": "#b91c1c",
       "rgb": "rgb(185,28,28)",
       "hsl": "hsl(0,73.7%,41.8%)",
+      "oklch": "oklch(0.51,0.19,28)",
       "rgbChannel": "185 28 28",
       "hslChannel": "0 73.7% 41.8%"
     },
@@ -536,6 +601,7 @@
       "hex": "#991b1b",
       "rgb": "rgb(153,27,27)",
       "hsl": "hsl(0,70%,35.3%)",
+      "oklch": "oklch(0.44,0.16,27)",
       "rgbChannel": "153 27 27",
       "hslChannel": "0 70% 35.3%"
     },
@@ -544,6 +610,7 @@
       "hex": "#7f1d1d",
       "rgb": "rgb(127,29,29)",
       "hsl": "hsl(0,62.8%,30.6%)",
+      "oklch": "oklch(0.40,0.13,26)",
       "rgbChannel": "127 29 29",
       "hslChannel": "0 62.8% 30.6%"
     },
@@ -552,6 +619,7 @@
       "hex": "#450a0a",
       "rgb": "rgb(69,10,10)",
       "hsl": "hsl(0,74.7%,15.5%)",
+      "oklch": "oklch(0.26,0.09,26)",
       "rgbChannel": "69 10 10",
       "hslChannel": "0 74.7% 15.5%"
     }
@@ -562,6 +630,7 @@
       "hex": "#fff7ed",
       "rgb": "rgb(255,247,237)",
       "hsl": "hsl(33.3,100%,96.5%)",
+      "oklch": "oklch(0.98,0.02,74)",
       "rgbChannel": "255 247 237",
       "hslChannel": "33.3 100% 96.5%"
     },
@@ -570,6 +639,7 @@
       "hex": "#ffedd5",
       "rgb": "rgb(255,237,213)",
       "hsl": "hsl(34.3,100%,91.8%)",
+      "oklch": "oklch(0.95,0.04,75)",
       "rgbChannel": "255 237 213",
       "hslChannel": "34.3 100% 91.8%"
     },
@@ -578,6 +648,7 @@
       "hex": "#fed7aa",
       "rgb": "rgb(254,215,170)",
       "hsl": "hsl(32.1,97.7%,83.1%)",
+      "oklch": "oklch(0.90,0.07,71)",
       "rgbChannel": "254 215 170",
       "hslChannel": "32.1 97.7% 83.1%"
     },
@@ -586,6 +657,7 @@
       "hex": "#fdba74",
       "rgb": "rgb(253,186,116)",
       "hsl": "hsl(30.7,97.2%,72.4%)",
+      "oklch": "oklch(0.84,0.12,66)",
       "rgbChannel": "253 186 116",
       "hslChannel": "30.7 97.2% 72.4%"
     },
@@ -594,6 +666,7 @@
       "hex": "#fb923c",
       "rgb": "rgb(251,146,60)",
       "hsl": "hsl(27,96%,61%)",
+      "oklch": "oklch(0.76,0.16,56)",
       "rgbChannel": "251 146 60",
       "hslChannel": "27 96% 61%"
     },
@@ -602,6 +675,7 @@
       "hex": "#f97316",
       "rgb": "rgb(249,115,22)",
       "hsl": "hsl(24.6,95%,53.1%)",
+      "oklch": "oklch(0.70,0.19,48)",
       "rgbChannel": "249 115 22",
       "hslChannel": "24.6 95% 53.1%"
     },
@@ -610,6 +684,7 @@
       "hex": "#ea580c",
       "rgb": "rgb(234,88,12)",
       "hsl": "hsl(20.5,90.2%,48.2%)",
+      "oklch": "oklch(0.65,0.19,41)",
       "rgbChannel": "234 88 12",
       "hslChannel": "20.5 90.2% 48.2%"
     },
@@ -618,6 +693,7 @@
       "hex": "#c2410c",
       "rgb": "rgb(194,65,12)",
       "hsl": "hsl(17.5,88.3%,40.4%)",
+      "oklch": "oklch(0.55,0.17,38)",
       "rgbChannel": "194 65 12",
       "hslChannel": "17.5 88.3% 40.4%"
     },
@@ -626,6 +702,7 @@
       "hex": "#9a3412",
       "rgb": "rgb(154,52,18)",
       "hsl": "hsl(15,79.1%,33.7%)",
+      "oklch": "oklch(0.47,0.14,37)",
       "rgbChannel": "154 52 18",
       "hslChannel": "15 79.1% 33.7%"
     },
@@ -634,6 +711,7 @@
       "hex": "#7c2d12",
       "rgb": "rgb(124,45,18)",
       "hsl": "hsl(15.3,74.6%,27.8%)",
+      "oklch": "oklch(0.41,0.12,38)",
       "rgbChannel": "124 45 18",
       "hslChannel": "15.3 74.6% 27.8%"
     },
@@ -642,6 +720,7 @@
       "hex": "#431407",
       "rgb": "rgb(67,20,7)",
       "hsl": "hsl(13,81.1%,14.5%)",
+      "oklch": "oklch(0.27,0.08,36)",
       "rgbChannel": "67 20 7",
       "hslChannel": "13 81.1% 14.5%"
     }
@@ -652,6 +731,7 @@
       "hex": "#fffbeb",
       "rgb": "rgb(255,251,235)",
       "hsl": "hsl(48,100%,96.1%)",
+      "oklch": "oklch(0.99,0.02,95)",
       "rgbChannel": "255 251 235",
       "hslChannel": "48 100% 96.1%"
     },
@@ -660,6 +740,7 @@
       "hex": "#fef3c7",
       "rgb": "rgb(254,243,199)",
       "hsl": "hsl(48,96.5%,88.8%)",
+      "oklch": "oklch(0.96,0.06,96)",
       "rgbChannel": "254 243 199",
       "hslChannel": "48 96.5% 88.8%"
     },
@@ -668,6 +749,7 @@
       "hex": "#fde68a",
       "rgb": "rgb(253,230,138)",
       "hsl": "hsl(48,96.6%,76.7%)",
+      "oklch": "oklch(0.92,0.12,96)",
       "rgbChannel": "253 230 138",
       "hslChannel": "48 96.6% 76.7%"
     },
@@ -676,6 +758,7 @@
       "hex": "#fcd34d",
       "rgb": "rgb(252,211,77)",
       "hsl": "hsl(45.9,96.7%,64.5%)",
+      "oklch": "oklch(0.88,0.15,92)",
       "rgbChannel": "252 211 77",
       "hslChannel": "45.9 96.7% 64.5%"
     },
@@ -684,6 +767,7 @@
       "hex": "#fbbf24",
       "rgb": "rgb(251,191,36)",
       "hsl": "hsl(43.3,96.4%,56.3%)",
+      "oklch": "oklch(0.84,0.16,84)",
       "rgbChannel": "251 191 36",
       "hslChannel": "43.3 96.4% 56.3%"
     },
@@ -692,6 +776,7 @@
       "hex": "#f59e0b",
       "rgb": "rgb(245,158,11)",
       "hsl": "hsl(37.7,92.1%,50.2%)",
+      "oklch": "oklch(0.77,0.16,70)",
       "rgbChannel": "245 158 11",
       "hslChannel": "37.7 92.1% 50.2%"
     },
@@ -700,6 +785,7 @@
       "hex": "#d97706",
       "rgb": "rgb(217,119,6)",
       "hsl": "hsl(32.1,94.6%,43.7%)",
+      "oklch": "oklch(0.67,0.16,58)",
       "rgbChannel": "217 119 6",
       "hslChannel": "32.1 94.6% 43.7%"
     },
@@ -708,6 +794,7 @@
       "hex": "#b45309",
       "rgb": "rgb(180,83,9)",
       "hsl": "hsl(26,90.5%,37.1%)",
+      "oklch": "oklch(0.56,0.15,49)",
       "rgbChannel": "180 83 9",
       "hslChannel": "26 90.5% 37.1%"
     },
@@ -716,6 +803,7 @@
       "hex": "#92400e",
       "rgb": "rgb(146,64,14)",
       "hsl": "hsl(22.7,82.5%,31.4%)",
+      "oklch": "oklch(0.47,0.12,46)",
       "rgbChannel": "146 64 14",
       "hslChannel": "22.7 82.5% 31.4%"
     },
@@ -724,6 +812,7 @@
       "hex": "#78350f",
       "rgb": "rgb(120,53,15)",
       "hsl": "hsl(21.7,77.8%,26.5%)",
+      "oklch": "oklch(0.41,0.11,46)",
       "rgbChannel": "120 53 15",
       "hslChannel": "21.7 77.8% 26.5%"
     },
@@ -732,6 +821,7 @@
       "hex": "#451a03",
       "rgb": "rgb(69,26,3)",
       "hsl": "hsl(20.9,91.7%,14.1%)",
+      "oklch": "oklch(0.28,0.07,46)",
       "rgbChannel": "69 26 3",
       "hslChannel": "20.9 91.7% 14.1%"
     }
@@ -742,6 +832,7 @@
       "hex": "#fefce8",
       "rgb": "rgb(254,252,232)",
       "hsl": "hsl(54.5,91.7%,95.3%)",
+      "oklch": "oklch(0.99,0.03,102)",
       "rgbChannel": "254 252 232",
       "hslChannel": "54.5 91.7% 95.3%"
     },
@@ -750,6 +841,7 @@
       "hex": "#fef9c3",
       "rgb": "rgb(254,249,195)",
       "hsl": "hsl(54.9,96.7%,88%)",
+      "oklch": "oklch(0.97,0.07,103)",
       "rgbChannel": "254 249 195",
       "hslChannel": "54.9 96.7% 88%"
     },
@@ -758,6 +850,7 @@
       "hex": "#fef08a",
       "rgb": "rgb(254,240,138)",
       "hsl": "hsl(52.8,98.3%,76.9%)",
+      "oklch": "oklch(0.95,0.12,102)",
       "rgbChannel": "254 240 138",
       "hslChannel": "52.8 98.3% 76.9%"
     },
@@ -766,6 +859,7 @@
       "hex": "#fde047",
       "rgb": "rgb(253,224,71)",
       "hsl": "hsl(50.4,97.8%,63.5%)",
+      "oklch": "oklch(0.91,0.17,98)",
       "rgbChannel": "253 224 71",
       "hslChannel": "50.4 97.8% 63.5%"
     },
@@ -774,6 +868,7 @@
       "hex": "#facc15",
       "rgb": "rgb(250,204,21)",
       "hsl": "hsl(47.9,95.8%,53.1%)",
+      "oklch": "oklch(0.86,0.17,92)",
       "rgbChannel": "250 204 21",
       "hslChannel": "47.9 95.8% 53.1%"
     },
@@ -782,6 +877,7 @@
       "hex": "#eab308",
       "rgb": "rgb(234,179,8)",
       "hsl": "hsl(45.4,93.4%,47.5%)",
+      "oklch": "oklch(0.80,0.16,86)",
       "rgbChannel": "234 179 8",
       "hslChannel": "45.4 93.4% 47.5%"
     },
@@ -790,6 +886,7 @@
       "hex": "#ca8a04",
       "rgb": "rgb(202,138,4)",
       "hsl": "hsl(40.6,96.1%,40.4%)",
+      "oklch": "oklch(0.68,0.14,76)",
       "rgbChannel": "202 138 4",
       "hslChannel": "40.6 96.1% 40.4%"
     },
@@ -798,6 +895,7 @@
       "hex": "#a16207",
       "rgb": "rgb(161,98,7)",
       "hsl": "hsl(35.5,91.7%,32.9%)",
+      "oklch": "oklch(0.55,0.12,66)",
       "rgbChannel": "161 98 7",
       "hslChannel": "35.5 91.7% 32.9%"
     },
@@ -806,6 +904,7 @@
       "hex": "#854d0e",
       "rgb": "rgb(133,77,14)",
       "hsl": "hsl(31.8,81%,28.8%)",
+      "oklch": "oklch(0.48,0.10,62)",
       "rgbChannel": "133 77 14",
       "hslChannel": "31.8 81% 28.8%"
     },
@@ -814,6 +913,7 @@
       "hex": "#713f12",
       "rgb": "rgb(113,63,18)",
       "hsl": "hsl(28.4,72.5%,25.7%)",
+      "oklch": "oklch(0.42,0.09,58)",
       "rgbChannel": "113 63 18",
       "hslChannel": "28.4 72.5% 25.7%"
     },
@@ -822,6 +922,7 @@
       "hex": "#422006",
       "rgb": "rgb(66,32,6)",
       "hsl": "hsl(26,83.3%,14.1%)",
+      "oklch": "oklch(0.29,0.06,54)",
       "rgbChannel": "66 32 6",
       "hslChannel": "26 83.3% 14.1%"
     }
@@ -832,6 +933,7 @@
       "hex": "#f7fee7",
       "rgb": "rgb(247,254,231)",
       "hsl": "hsl(78.3,92%,95.1%)",
+      "oklch": "oklch(0.99,0.03,121)",
       "rgbChannel": "247 254 231",
       "hslChannel": "78.3 92% 95.1%"
     },
@@ -840,6 +942,7 @@
       "hex": "#ecfccb",
       "rgb": "rgb(236,252,203)",
       "hsl": "hsl(79.6,89.1%,89.2%)",
+      "oklch": "oklch(0.97,0.07,122)",
       "rgbChannel": "236 252 203",
       "hslChannel": "79.6 89.1% 89.2%"
     },
@@ -848,6 +951,7 @@
       "hex": "#d9f99d",
       "rgb": "rgb(217,249,157)",
       "hsl": "hsl(80.9,88.5%,79.6%)",
+      "oklch": "oklch(0.94,0.12,124)",
       "rgbChannel": "217 249 157",
       "hslChannel": "80.9 88.5% 79.6%"
     },
@@ -856,6 +960,7 @@
       "hex": "#bef264",
       "rgb": "rgb(190,242,100)",
       "hsl": "hsl(82,84.5%,67.1%)",
+      "oklch": "oklch(0.90,0.18,127)",
       "rgbChannel": "190 242 100",
       "hslChannel": "82 84.5% 67.1%"
     },
@@ -864,6 +969,7 @@
       "hex": "#a3e635",
       "rgb": "rgb(163,230,53)",
       "hsl": "hsl(82.7,78%,55.5%)",
+      "oklch": "oklch(0.85,0.21,129)",
       "rgbChannel": "163 230 53",
       "hslChannel": "82.7 78% 55.5%"
     },
@@ -872,6 +978,7 @@
       "hex": "#84cc16",
       "rgb": "rgb(132,204,22)",
       "hsl": "hsl(83.7,80.5%,44.3%)",
+      "oklch": "oklch(0.77,0.20,131)",
       "rgbChannel": "132 204 22",
       "hslChannel": "83.7 80.5% 44.3%"
     },
@@ -880,6 +987,7 @@
       "hex": "#65a30d",
       "rgb": "rgb(101,163,13)",
       "hsl": "hsl(84.8,85.2%,34.5%)",
+      "oklch": "oklch(0.65,0.18,132)",
       "rgbChannel": "101 163 13",
       "hslChannel": "84.8 85.2% 34.5%"
     },
@@ -888,6 +996,7 @@
       "hex": "#4d7c0f",
       "rgb": "rgb(77,124,15)",
       "hsl": "hsl(85.9,78.4%,27.3%)",
+      "oklch": "oklch(0.53,0.14,132)",
       "rgbChannel": "77 124 15",
       "hslChannel": "85.9 78.4% 27.3%"
     },
@@ -896,6 +1005,7 @@
       "hex": "#3f6212",
       "rgb": "rgb(63,98,18)",
       "hsl": "hsl(86.3,69%,22.7%)",
+      "oklch": "oklch(0.45,0.11,131)",
       "rgbChannel": "63 98 18",
       "hslChannel": "86.3 69% 22.7%"
     },
@@ -904,6 +1014,7 @@
       "hex": "#365314",
       "rgb": "rgb(54,83,20)",
       "hsl": "hsl(87.6,61.2%,20.2%)",
+      "oklch": "oklch(0.41,0.10,131)",
       "rgbChannel": "54 83 20",
       "hslChannel": "87.6 61.2% 20.2%"
     },
@@ -912,6 +1023,7 @@
       "hex": "#1a2e05",
       "rgb": "rgb(26,46,5)",
       "hsl": "hsl(89.3,80.4%,10%)",
+      "oklch": "oklch(0.27,0.07,132)",
       "rgbChannel": "26 46 5",
       "hslChannel": "89.3 80.4% 10%"
     }
@@ -922,6 +1034,7 @@
       "hex": "#f0fdf4",
       "rgb": "rgb(240,253,244)",
       "hsl": "hsl(138.5,76.5%,96.7%)",
+      "oklch": "oklch(0.98,0.02,156)",
       "rgbChannel": "240 253 244",
       "hslChannel": "138.5 76.5% 96.7%"
     },
@@ -930,6 +1043,7 @@
       "hex": "#dcfce7",
       "rgb": "rgb(220,252,231)",
       "hsl": "hsl(140.6,84.2%,92.5%)",
+      "oklch": "oklch(0.96,0.04,157)",
       "rgbChannel": "220 252 231",
       "hslChannel": "140.6 84.2% 92.5%"
     },
@@ -938,6 +1052,7 @@
       "hex": "#bbf7d0",
       "rgb": "rgb(187,247,208)",
       "hsl": "hsl(141,78.9%,85.1%)",
+      "oklch": "oklch(0.93,0.08,156)",
       "rgbChannel": "187 247 208",
       "hslChannel": "141 78.9% 85.1%"
     },
@@ -946,6 +1061,7 @@
       "hex": "#86efac",
       "rgb": "rgb(134,239,172)",
       "hsl": "hsl(141.7,76.6%,73.1%)",
+      "oklch": "oklch(0.87,0.14,154)",
       "rgbChannel": "134 239 172",
       "hslChannel": "141.7 76.6% 73.1%"
     },
@@ -954,6 +1070,7 @@
       "hex": "#4ade80",
       "rgb": "rgb(74,222,128)",
       "hsl": "hsl(141.9,69.2%,58%)",
+      "oklch": "oklch(0.80,0.18,152)",
       "rgbChannel": "74 222 128",
       "hslChannel": "141.9 69.2% 58%"
     },
@@ -962,6 +1079,7 @@
       "hex": "#22c55e",
       "rgb": "rgb(34,197,94)",
       "hsl": "hsl(142.1,70.6%,45.3%)",
+      "oklch": "oklch(0.72,0.19,150)",
       "rgbChannel": "34 197 94",
       "hslChannel": "142.1 70.6% 45.3%"
     },
@@ -970,6 +1088,7 @@
       "hex": "#16a34a",
       "rgb": "rgb(22,163,74)",
       "hsl": "hsl(142.1,76.2%,36.3%)",
+      "oklch": "oklch(0.63,0.17,149)",
       "rgbChannel": "22 163 74",
       "hslChannel": "142.1 76.2% 36.3%"
     },
@@ -978,6 +1097,7 @@
       "hex": "#15803d",
       "rgb": "rgb(21,128,61)",
       "hsl": "hsl(142.4,71.8%,29.2%)",
+      "oklch": "oklch(0.53,0.14,150)",
       "rgbChannel": "21 128 61",
       "hslChannel": "142.4 71.8% 29.2%"
     },
@@ -986,6 +1106,7 @@
       "hex": "#166534",
       "rgb": "rgb(22,101,52)",
       "hsl": "hsl(142.8,64.2%,24.1%)",
+      "oklch": "oklch(0.45,0.11,151)",
       "rgbChannel": "22 101 52",
       "hslChannel": "142.8 64.2% 24.1%"
     },
@@ -994,6 +1115,7 @@
       "hex": "#14532d",
       "rgb": "rgb(20,83,45)",
       "hsl": "hsl(143.8,61.2%,20.2%)",
+      "oklch": "oklch(0.39,0.09,153)",
       "rgbChannel": "20 83 45",
       "hslChannel": "143.8 61.2% 20.2%"
     },
@@ -1002,6 +1124,7 @@
       "hex": "#052e16",
       "rgb": "rgb(5,46,22)",
       "hsl": "hsl(144.9,80.4%,10%)",
+      "oklch": "oklch(0.27,0.06,153)",
       "rgbChannel": "5 46 22",
       "hslChannel": "144.9 80.4% 10%"
     }
@@ -1012,6 +1135,7 @@
       "hex": "#ecfdf5",
       "rgb": "rgb(236,253,245)",
       "hsl": "hsl(151.8,81%,95.9%)",
+      "oklch": "oklch(0.98,0.02,166)",
       "rgbChannel": "236 253 245",
       "hslChannel": "151.8 81% 95.9%"
     },
@@ -1020,6 +1144,7 @@
       "hex": "#d1fae5",
       "rgb": "rgb(209,250,229)",
       "hsl": "hsl(149.3,80.4%,90%)",
+      "oklch": "oklch(0.95,0.05,163)",
       "rgbChannel": "209 250 229",
       "hslChannel": "149.3 80.4% 90%"
     },
@@ -1028,6 +1153,7 @@
       "hex": "#a7f3d0",
       "rgb": "rgb(167,243,208)",
       "hsl": "hsl(152.4,76%,80.4%)",
+      "oklch": "oklch(0.90,0.09,164)",
       "rgbChannel": "167 243 208",
       "hslChannel": "152.4 76% 80.4%"
     },
@@ -1036,6 +1162,7 @@
       "hex": "#6ee7b7",
       "rgb": "rgb(110,231,183)",
       "hsl": "hsl(156.2,71.6%,66.9%)",
+      "oklch": "oklch(0.85,0.13,165)",
       "rgbChannel": "110 231 183",
       "hslChannel": "156.2 71.6% 66.9%"
     },
@@ -1044,6 +1171,7 @@
       "hex": "#34d399",
       "rgb": "rgb(52,211,153)",
       "hsl": "hsl(158.1,64.4%,51.6%)",
+      "oklch": "oklch(0.77,0.15,163)",
       "rgbChannel": "52 211 153",
       "hslChannel": "158.1 64.4% 51.6%"
     },
@@ -1052,6 +1180,7 @@
       "hex": "#10b981",
       "rgb": "rgb(16,185,129)",
       "hsl": "hsl(160.1,84.1%,39.4%)",
+      "oklch": "oklch(0.70,0.15,162)",
       "rgbChannel": "16 185 129",
       "hslChannel": "160.1 84.1% 39.4%"
     },
@@ -1060,6 +1189,7 @@
       "hex": "#059669",
       "rgb": "rgb(5,150,105)",
       "hsl": "hsl(161.4,93.5%,30.4%)",
+      "oklch": "oklch(0.60,0.13,163)",
       "rgbChannel": "5 150 105",
       "hslChannel": "161.4 93.5% 30.4%"
     },
@@ -1068,6 +1198,7 @@
       "hex": "#047857",
       "rgb": "rgb(4,120,87)",
       "hsl": "hsl(162.9,93.5%,24.3%)",
+      "oklch": "oklch(0.51,0.10,166)",
       "rgbChannel": "4 120 87",
       "hslChannel": "162.9 93.5% 24.3%"
     },
@@ -1076,6 +1207,7 @@
       "hex": "#065f46",
       "rgb": "rgb(6,95,70)",
       "hsl": "hsl(163.1,88.1%,19.8%)",
+      "oklch": "oklch(0.43,0.09,167)",
       "rgbChannel": "6 95 70",
       "hslChannel": "163.1 88.1% 19.8%"
     },
@@ -1084,6 +1216,7 @@
       "hex": "#064e3b",
       "rgb": "rgb(6,78,59)",
       "hsl": "hsl(164.2,85.7%,16.5%)",
+      "oklch": "oklch(0.38,0.07,169)",
       "rgbChannel": "6 78 59",
       "hslChannel": "164.2 85.7% 16.5%"
     },
@@ -1092,6 +1225,7 @@
       "hex": "#022c22",
       "rgb": "rgb(2,44,34)",
       "hsl": "hsl(165.7,91.3%,9%)",
+      "oklch": "oklch(0.26,0.05,173)",
       "rgbChannel": "2 44 34",
       "hslChannel": "165.7 91.3% 9%"
     }
@@ -1102,6 +1236,7 @@
       "hex": "#f0fdfa",
       "rgb": "rgb(240,253,250)",
       "hsl": "hsl(166.2,76.5%,96.7%)",
+      "oklch": "oklch(0.98,0.01,181)",
       "rgbChannel": "240 253 250",
       "hslChannel": "166.2 76.5% 96.7%"
     },
@@ -1110,6 +1245,7 @@
       "hex": "#ccfbf1",
       "rgb": "rgb(204,251,241)",
       "hsl": "hsl(167.2,85.5%,89.2%)",
+      "oklch": "oklch(0.95,0.05,181)",
       "rgbChannel": "204 251 241",
       "hslChannel": "167.2 85.5% 89.2%"
     },
@@ -1118,6 +1254,7 @@
       "hex": "#99f6e4",
       "rgb": "rgb(153,246,228)",
       "hsl": "hsl(168.4,83.8%,78.2%)",
+      "oklch": "oklch(0.91,0.09,180)",
       "rgbChannel": "153 246 228",
       "hslChannel": "168.4 83.8% 78.2%"
     },
@@ -1126,6 +1263,7 @@
       "hex": "#5eead4",
       "rgb": "rgb(94,234,212)",
       "hsl": "hsl(170.6,76.9%,64.3%)",
+      "oklch": "oklch(0.85,0.13,181)",
       "rgbChannel": "94 234 212",
       "hslChannel": "170.6 76.9% 64.3%"
     },
@@ -1134,6 +1272,7 @@
       "hex": "#2dd4bf",
       "rgb": "rgb(45,212,191)",
       "hsl": "hsl(172.5,66%,50.4%)",
+      "oklch": "oklch(0.78,0.13,182)",
       "rgbChannel": "45 212 191",
       "hslChannel": "172.5 66% 50.4%"
     },
@@ -1142,6 +1281,7 @@
       "hex": "#14b8a6",
       "rgb": "rgb(20,184,166)",
       "hsl": "hsl(173.4,80.4%,40%)",
+      "oklch": "oklch(0.70,0.12,183)",
       "rgbChannel": "20 184 166",
       "hslChannel": "173.4 80.4% 40%"
     },
@@ -1150,6 +1290,7 @@
       "hex": "#0d9488",
       "rgb": "rgb(13,148,136)",
       "hsl": "hsl(174.7,83.9%,31.6%)",
+      "oklch": "oklch(0.60,0.10,185)",
       "rgbChannel": "13 148 136",
       "hslChannel": "174.7 83.9% 31.6%"
     },
@@ -1158,6 +1299,7 @@
       "hex": "#0f766e",
       "rgb": "rgb(15,118,110)",
       "hsl": "hsl(175.3,77.4%,26.1%)",
+      "oklch": "oklch(0.51,0.09,186)",
       "rgbChannel": "15 118 110",
       "hslChannel": "175.3 77.4% 26.1%"
     },
@@ -1166,6 +1308,7 @@
       "hex": "#115e59",
       "rgb": "rgb(17,94,89)",
       "hsl": "hsl(176.1,69.4%,21.8%)",
+      "oklch": "oklch(0.44,0.07,188)",
       "rgbChannel": "17 94 89",
       "hslChannel": "176.1 69.4% 21.8%"
     },
@@ -1174,6 +1317,7 @@
       "hex": "#134e4a",
       "rgb": "rgb(19,78,74)",
       "hsl": "hsl(175.9,60.8%,19%)",
+      "oklch": "oklch(0.39,0.06,188)",
       "rgbChannel": "19 78 74",
       "hslChannel": "175.9 60.8% 19%"
     },
@@ -1182,6 +1326,7 @@
       "hex": "#042f2e",
       "rgb": "rgb(4,47,46)",
       "hsl": "hsl(178.6,84.3%,10%)",
+      "oklch": "oklch(0.28,0.04,193)",
       "rgbChannel": "4 47 46",
       "hslChannel": "178.6 84.3% 10%"
     }
@@ -1192,6 +1337,7 @@
       "hex": "#ecfeff",
       "rgb": "rgb(236,254,255)",
       "hsl": "hsl(183.2,100%,96.3%)",
+      "oklch": "oklch(0.98,0.02,201)",
       "rgbChannel": "236 254 255",
       "hslChannel": "183.2 100% 96.3%"
     },
@@ -1200,6 +1346,7 @@
       "hex": "#cffafe",
       "rgb": "rgb(207,250,254)",
       "hsl": "hsl(185.1,95.9%,90.4%)",
+      "oklch": "oklch(0.96,0.04,203)",
       "rgbChannel": "207 250 254",
       "hslChannel": "185.1 95.9% 90.4%"
     },
@@ -1208,6 +1355,7 @@
       "hex": "#a5f3fc",
       "rgb": "rgb(165,243,252)",
       "hsl": "hsl(186.2,93.5%,81.8%)",
+      "oklch": "oklch(0.92,0.08,205)",
       "rgbChannel": "165 243 252",
       "hslChannel": "186.2 93.5% 81.8%"
     },
@@ -1216,6 +1364,7 @@
       "hex": "#67e8f9",
       "rgb": "rgb(103,232,249)",
       "hsl": "hsl(187,92.4%,69%)",
+      "oklch": "oklch(0.87,0.12,207)",
       "rgbChannel": "103 232 249",
       "hslChannel": "187 92.4% 69%"
     },
@@ -1224,6 +1373,7 @@
       "hex": "#22d3ee",
       "rgb": "rgb(34,211,238)",
       "hsl": "hsl(187.9,85.7%,53.3%)",
+      "oklch": "oklch(0.80,0.13,212)",
       "rgbChannel": "34 211 238",
       "hslChannel": "187.9 85.7% 53.3%"
     },
@@ -1232,6 +1382,7 @@
       "hex": "#06b6d4",
       "rgb": "rgb(6,182,212)",
       "hsl": "hsl(188.7,94.5%,42.7%)",
+      "oklch": "oklch(0.71,0.13,215)",
       "rgbChannel": "6 182 212",
       "hslChannel": "188.7 94.5% 42.7%"
     },
@@ -1240,6 +1391,7 @@
       "hex": "#0891b2",
       "rgb": "rgb(8,145,178)",
       "hsl": "hsl(191.6,91.4%,36.5%)",
+      "oklch": "oklch(0.61,0.11,222)",
       "rgbChannel": "8 145 178",
       "hslChannel": "191.6 91.4% 36.5%"
     },
@@ -1248,6 +1400,7 @@
       "hex": "#0e7490",
       "rgb": "rgb(14,116,144)",
       "hsl": "hsl(192.9,82.3%,31%)",
+      "oklch": "oklch(0.52,0.09,223)",
       "rgbChannel": "14 116 144",
       "hslChannel": "192.9 82.3% 31%"
     },
@@ -1256,6 +1409,7 @@
       "hex": "#155e75",
       "rgb": "rgb(21,94,117)",
       "hsl": "hsl(194.4,69.6%,27.1%)",
+      "oklch": "oklch(0.45,0.08,224)",
       "rgbChannel": "21 94 117",
       "hslChannel": "194.4 69.6% 27.1%"
     },
@@ -1264,6 +1418,7 @@
       "hex": "#164e63",
       "rgb": "rgb(22,78,99)",
       "hsl": "hsl(196.4,63.6%,23.7%)",
+      "oklch": "oklch(0.40,0.07,227)",
       "rgbChannel": "22 78 99",
       "hslChannel": "196.4 63.6% 23.7%"
     },
@@ -1272,6 +1427,7 @@
       "hex": "#083344",
       "rgb": "rgb(8,51,68)",
       "hsl": "hsl(197,78.9%,14.9%)",
+      "oklch": "oklch(0.30,0.05,230)",
       "rgbChannel": "8 51 68",
       "hslChannel": "197 78.9% 14.9%"
     }
@@ -1282,6 +1438,7 @@
       "hex": "#f0f9ff",
       "rgb": "rgb(240,249,255)",
       "hsl": "hsl(204,100%,97.1%)",
+      "oklch": "oklch(0.98,0.01,237)",
       "rgbChannel": "240 249 255",
       "hslChannel": "204 100% 97.1%"
     },
@@ -1290,6 +1447,7 @@
       "hex": "#e0f2fe",
       "rgb": "rgb(224,242,254)",
       "hsl": "hsl(204,93.8%,93.7%)",
+      "oklch": "oklch(0.95,0.03,237)",
       "rgbChannel": "224 242 254",
       "hslChannel": "204 93.8% 93.7%"
     },
@@ -1298,6 +1456,7 @@
       "hex": "#bae6fd",
       "rgb": "rgb(186,230,253)",
       "hsl": "hsl(200.6,94.4%,86.1%)",
+      "oklch": "oklch(0.90,0.06,231)",
       "rgbChannel": "186 230 253",
       "hslChannel": "200.6 94.4% 86.1%"
     },
@@ -1306,6 +1465,7 @@
       "hex": "#7dd3fc",
       "rgb": "rgb(125,211,252)",
       "hsl": "hsl(199.4,95.5%,73.9%)",
+      "oklch": "oklch(0.83,0.10,230)",
       "rgbChannel": "125 211 252",
       "hslChannel": "199.4 95.5% 73.9%"
     },
@@ -1314,6 +1474,7 @@
       "hex": "#38bdf8",
       "rgb": "rgb(56,189,248)",
       "hsl": "hsl(198.4,93.2%,59.6%)",
+      "oklch": "oklch(0.75,0.14,233)",
       "rgbChannel": "56 189 248",
       "hslChannel": "198.4 93.2% 59.6%"
     },
@@ -1322,6 +1483,7 @@
       "hex": "#0ea5e9",
       "rgb": "rgb(14,165,233)",
       "hsl": "hsl(198.6,88.7%,48.4%)",
+      "oklch": "oklch(0.68,0.15,237)",
       "rgbChannel": "14 165 233",
       "hslChannel": "198.6 88.7% 48.4%"
     },
@@ -1330,6 +1492,7 @@
       "hex": "#0284c7",
       "rgb": "rgb(2,132,199)",
       "hsl": "hsl(200.4,98%,39.4%)",
+      "oklch": "oklch(0.59,0.14,242)",
       "rgbChannel": "2 132 199",
       "hslChannel": "200.4 98% 39.4%"
     },
@@ -1338,6 +1501,7 @@
       "hex": "#0369a1",
       "rgb": "rgb(3,105,161)",
       "hsl": "hsl(201.3,96.3%,32.2%)",
+      "oklch": "oklch(0.50,0.12,243)",
       "rgbChannel": "3 105 161",
       "hslChannel": "201.3 96.3% 32.2%"
     },
@@ -1346,6 +1510,7 @@
       "hex": "#075985",
       "rgb": "rgb(7,89,133)",
       "hsl": "hsl(201,90%,27.5%)",
+      "oklch": "oklch(0.44,0.10,241)",
       "rgbChannel": "7 89 133",
       "hslChannel": "201 90% 27.5%"
     },
@@ -1354,6 +1519,7 @@
       "hex": "#0c4a6e",
       "rgb": "rgb(12,74,110)",
       "hsl": "hsl(202,80.3%,23.9%)",
+      "oklch": "oklch(0.39,0.08,241)",
       "rgbChannel": "12 74 110",
       "hslChannel": "202 80.3% 23.9%"
     },
@@ -1362,6 +1528,7 @@
       "hex": "#082f49",
       "rgb": "rgb(8,47,73)",
       "hsl": "hsl(204,80.2%,15.9%)",
+      "oklch": "oklch(0.29,0.06,243)",
       "rgbChannel": "8 47 73",
       "hslChannel": "204 80.2% 15.9%"
     }
@@ -1372,6 +1539,7 @@
       "hex": "#eff6ff",
       "rgb": "rgb(239,246,255)",
       "hsl": "hsl(213.8,100%,96.9%)",
+      "oklch": "oklch(0.97,0.01,255)",
       "rgbChannel": "239 246 255",
       "hslChannel": "213.8 100% 96.9%"
     },
@@ -1380,6 +1548,7 @@
       "hex": "#dbeafe",
       "rgb": "rgb(219,234,254)",
       "hsl": "hsl(214.3,94.6%,92.7%)",
+      "oklch": "oklch(0.93,0.03,256)",
       "rgbChannel": "219 234 254",
       "hslChannel": "214.3 94.6% 92.7%"
     },
@@ -1388,6 +1557,7 @@
       "hex": "#bfdbfe",
       "rgb": "rgb(191,219,254)",
       "hsl": "hsl(213.3,96.9%,87.3%)",
+      "oklch": "oklch(0.88,0.06,254)",
       "rgbChannel": "191 219 254",
       "hslChannel": "213.3 96.9% 87.3%"
     },
@@ -1396,6 +1566,7 @@
       "hex": "#93c5fd",
       "rgb": "rgb(147,197,253)",
       "hsl": "hsl(211.7,96.4%,78.4%)",
+      "oklch": "oklch(0.81,0.10,252)",
       "rgbChannel": "147 197 253",
       "hslChannel": "211.7 96.4% 78.4%"
     },
@@ -1404,6 +1575,7 @@
       "hex": "#60a5fa",
       "rgb": "rgb(96,165,250)",
       "hsl": "hsl(213.1,93.9%,67.8%)",
+      "oklch": "oklch(0.71,0.14,255)",
       "rgbChannel": "96 165 250",
       "hslChannel": "213.1 93.9% 67.8%"
     },
@@ -1412,6 +1584,7 @@
       "hex": "#3b82f6",
       "rgb": "rgb(59,130,246)",
       "hsl": "hsl(217.2,91.2%,59.8%)",
+      "oklch": "oklch(0.62,0.19,260)",
       "rgbChannel": "59 130 246",
       "hslChannel": "217.2 91.2% 59.8%"
     },
@@ -1420,6 +1593,7 @@
       "hex": "#2563eb",
       "rgb": "rgb(37,99,235)",
       "hsl": "hsl(221.2,83.2%,53.3%)",
+      "oklch": "oklch(0.55,0.22,263)",
       "rgbChannel": "37 99 235",
       "hslChannel": "221.2 83.2% 53.3%"
     },
@@ -1428,6 +1602,7 @@
       "hex": "#1d4ed8",
       "rgb": "rgb(29,78,216)",
       "hsl": "hsl(224.3,76.3%,48%)",
+      "oklch": "oklch(0.49,0.22,264)",
       "rgbChannel": "29 78 216",
       "hslChannel": "224.3 76.3% 48%"
     },
@@ -1436,6 +1611,7 @@
       "hex": "#1e40af",
       "rgb": "rgb(30,64,175)",
       "hsl": "hsl(225.9,70.7%,40.2%)",
+      "oklch": "oklch(0.42,0.18,266)",
       "rgbChannel": "30 64 175",
       "hslChannel": "225.9 70.7% 40.2%"
     },
@@ -1444,6 +1620,7 @@
       "hex": "#1e3a8a",
       "rgb": "rgb(30,58,138)",
       "hsl": "hsl(224.4,64.3%,32.9%)",
+      "oklch": "oklch(0.38,0.14,266)",
       "rgbChannel": "30 58 138",
       "hslChannel": "224.4 64.3% 32.9%"
     },
@@ -1452,6 +1629,7 @@
       "hex": "#172554",
       "rgb": "rgb(23,37,84)",
       "hsl": "hsl(226.2,57%,21%)",
+      "oklch": "oklch(0.28,0.09,268)",
       "rgbChannel": "23 37 84",
       "hslChannel": "226.2 57% 21%"
     }
@@ -1462,6 +1640,7 @@
       "hex": "#eef2ff",
       "rgb": "rgb(238,242,255)",
       "hsl": "hsl(225.9,100%,96.7%)",
+      "oklch": "oklch(0.96,0.02,272)",
       "rgbChannel": "238 242 255",
       "hslChannel": "225.9 100% 96.7%"
     },
@@ -1470,6 +1649,7 @@
       "hex": "#e0e7ff",
       "rgb": "rgb(224,231,255)",
       "hsl": "hsl(226.5,100%,93.9%)",
+      "oklch": "oklch(0.93,0.03,273)",
       "rgbChannel": "224 231 255",
       "hslChannel": "226.5 100% 93.9%"
     },
@@ -1478,6 +1658,7 @@
       "hex": "#c7d2fe",
       "rgb": "rgb(199,210,254)",
       "hsl": "hsl(228,96.5%,88.8%)",
+      "oklch": "oklch(0.87,0.06,274)",
       "rgbChannel": "199 210 254",
       "hslChannel": "228 96.5% 88.8%"
     },
@@ -1486,6 +1667,7 @@
       "hex": "#a5b4fc",
       "rgb": "rgb(165,180,252)",
       "hsl": "hsl(229.7,93.5%,81.8%)",
+      "oklch": "oklch(0.79,0.10,275)",
       "rgbChannel": "165 180 252",
       "hslChannel": "229.7 93.5% 81.8%"
     },
@@ -1494,6 +1676,7 @@
       "hex": "#818cf8",
       "rgb": "rgb(129,140,248)",
       "hsl": "hsl(234.5,89.5%,73.9%)",
+      "oklch": "oklch(0.68,0.16,277)",
       "rgbChannel": "129 140 248",
       "hslChannel": "234.5 89.5% 73.9%"
     },
@@ -1502,6 +1685,7 @@
       "hex": "#6366f1",
       "rgb": "rgb(99,102,241)",
       "hsl": "hsl(238.7,83.5%,66.7%)",
+      "oklch": "oklch(0.59,0.20,277)",
       "rgbChannel": "99 102 241",
       "hslChannel": "238.7 83.5% 66.7%"
     },
@@ -1510,6 +1694,7 @@
       "hex": "#4f46e5",
       "rgb": "rgb(79,70,229)",
       "hsl": "hsl(243.4,75.4%,58.6%)",
+      "oklch": "oklch(0.51,0.23,277)",
       "rgbChannel": "79 70 229",
       "hslChannel": "243.4 75.4% 58.6%"
     },
@@ -1518,6 +1703,7 @@
       "hex": "#4338ca",
       "rgb": "rgb(67,56,202)",
       "hsl": "hsl(244.5,57.9%,50.6%)",
+      "oklch": "oklch(0.46,0.21,277)",
       "rgbChannel": "67 56 202",
       "hslChannel": "244.5 57.9% 50.6%"
     },
@@ -1526,6 +1712,7 @@
       "hex": "#3730a3",
       "rgb": "rgb(55,48,163)",
       "hsl": "hsl(243.7,54.5%,41.4%)",
+      "oklch": "oklch(0.40,0.18,277)",
       "rgbChannel": "55 48 163",
       "hslChannel": "243.7 54.5% 41.4%"
     },
@@ -1534,6 +1721,7 @@
       "hex": "#312e81",
       "rgb": "rgb(49,46,129)",
       "hsl": "hsl(242.2,47.4%,34.3%)",
+      "oklch": "oklch(0.36,0.14,279)",
       "rgbChannel": "49 46 129",
       "hslChannel": "242.2 47.4% 34.3%"
     },
@@ -1542,6 +1730,7 @@
       "hex": "#1e1b4b",
       "rgb": "rgb(30,27,75)",
       "hsl": "hsl(243.8,47.1%,20%)",
+      "oklch": "oklch(0.26,0.09,281)",
       "rgbChannel": "30 27 75",
       "hslChannel": "243.8 47.1% 20%"
     }
@@ -1552,6 +1741,7 @@
       "hex": "#f5f3ff",
       "rgb": "rgb(245,243,255)",
       "hsl": "hsl(250,100%,97.6%)",
+      "oklch": "oklch(0.97,0.02,294)",
       "rgbChannel": "245 243 255",
       "hslChannel": "250 100% 97.6%"
     },
@@ -1560,6 +1750,7 @@
       "hex": "#ede9fe",
       "rgb": "rgb(237,233,254)",
       "hsl": "hsl(251.4,91.3%,95.5%)",
+      "oklch": "oklch(0.94,0.03,295)",
       "rgbChannel": "237 233 254",
       "hslChannel": "251.4 91.3% 95.5%"
     },
@@ -1568,6 +1759,7 @@
       "hex": "#ddd6fe",
       "rgb": "rgb(221,214,254)",
       "hsl": "hsl(250.5,95.2%,91.8%)",
+      "oklch": "oklch(0.89,0.05,293)",
       "rgbChannel": "221 214 254",
       "hslChannel": "250.5 95.2% 91.8%"
     },
@@ -1576,6 +1768,7 @@
       "hex": "#c4b5fd",
       "rgb": "rgb(196,181,253)",
       "hsl": "hsl(252.5,94.7%,85.1%)",
+      "oklch": "oklch(0.81,0.10,294)",
       "rgbChannel": "196 181 253",
       "hslChannel": "252.5 94.7% 85.1%"
     },
@@ -1584,6 +1777,7 @@
       "hex": "#a78bfa",
       "rgb": "rgb(167,139,250)",
       "hsl": "hsl(255.1,91.7%,76.3%)",
+      "oklch": "oklch(0.71,0.16,294)",
       "rgbChannel": "167 139 250",
       "hslChannel": "255.1 91.7% 76.3%"
     },
@@ -1592,6 +1786,7 @@
       "hex": "#8b5cf6",
       "rgb": "rgb(139,92,246)",
       "hsl": "hsl(258.3,89.5%,66.3%)",
+      "oklch": "oklch(0.61,0.22,293)",
       "rgbChannel": "139 92 246",
       "hslChannel": "258.3 89.5% 66.3%"
     },
@@ -1600,6 +1795,7 @@
       "hex": "#7c3aed",
       "rgb": "rgb(124,58,237)",
       "hsl": "hsl(262.1,83.3%,57.8%)",
+      "oklch": "oklch(0.54,0.25,293)",
       "rgbChannel": "124 58 237",
       "hslChannel": "262.1 83.3% 57.8%"
     },
@@ -1608,6 +1804,7 @@
       "hex": "#6d28d9",
       "rgb": "rgb(109,40,217)",
       "hsl": "hsl(263.4,70%,50.4%)",
+      "oklch": "oklch(0.49,0.24,293)",
       "rgbChannel": "109 40 217",
       "hslChannel": "263.4 70% 50.4%"
     },
@@ -1616,6 +1813,7 @@
       "hex": "#5b21b6",
       "rgb": "rgb(91,33,182)",
       "hsl": "hsl(263.4,69.3%,42.2%)",
+      "oklch": "oklch(0.43,0.21,293)",
       "rgbChannel": "91 33 182",
       "hslChannel": "263.4 69.3% 42.2%"
     },
@@ -1624,6 +1822,7 @@
       "hex": "#4c1d95",
       "rgb": "rgb(76,29,149)",
       "hsl": "hsl(263.5,67.4%,34.9%)",
+      "oklch": "oklch(0.38,0.18,294)",
       "rgbChannel": "76 29 149",
       "hslChannel": "263.5 67.4% 34.9%"
     },
@@ -1632,6 +1831,7 @@
       "hex": "#1e1b4b",
       "rgb": "rgb(46,16,101)",
       "hsl": "hsl(261.2,72.6%,22.9%)",
+      "oklch": "oklch(0.28,0.14,291)",
       "rgbChannel": "46 16 101",
       "hslChannel": "261.2 72.6% 22.9%"
     }
@@ -1642,6 +1842,7 @@
       "hex": "#faf5ff",
       "rgb": "rgb(250,245,255)",
       "hsl": "hsl(270,100%,98%)",
+      "oklch": "oklch(0.98,0.01,308)",
       "rgbChannel": "250 245 255",
       "hslChannel": "270 100% 98%"
     },
@@ -1650,6 +1851,7 @@
       "hex": "#f3e8ff",
       "rgb": "rgb(243,232,255)",
       "hsl": "hsl(268.7,100%,95.5%)",
+      "oklch": "oklch(0.95,0.03,307)",
       "rgbChannel": "243 232 255",
       "hslChannel": "268.7 100% 95.5%"
     },
@@ -1658,6 +1860,7 @@
       "hex": "#e9d5ff",
       "rgb": "rgb(233,213,255)",
       "hsl": "hsl(268.6,100%,91.8%)",
+      "oklch": "oklch(0.90,0.06,307)",
       "rgbChannel": "233 213 255",
       "hslChannel": "268.6 100% 91.8%"
     },
@@ -1666,6 +1869,7 @@
       "hex": "#d8b4fe",
       "rgb": "rgb(216,180,254)",
       "hsl": "hsl(269.2,97.4%,85.1%)",
+      "oklch": "oklch(0.83,0.11,306)",
       "rgbChannel": "216 180 254",
       "hslChannel": "269.2 97.4% 85.1%"
     },
@@ -1674,6 +1878,7 @@
       "hex": "#c084fc",
       "rgb": "rgb(192,132,252)",
       "hsl": "hsl(270,95.2%,75.3%)",
+      "oklch": "oklch(0.72,0.18,306)",
       "rgbChannel": "192 132 252",
       "hslChannel": "270 95.2% 75.3%"
     },
@@ -1682,6 +1887,7 @@
       "hex": "#a855f7",
       "rgb": "rgb(168,85,247)",
       "hsl": "hsl(270.7,91%,65.1%)",
+      "oklch": "oklch(0.63,0.23,304)",
       "rgbChannel": "168 85 247",
       "hslChannel": "270.7 91% 65.1%"
     },
@@ -1690,6 +1896,7 @@
       "hex": "#9333ea",
       "rgb": "rgb(147,51,234)",
       "hsl": "hsl(271.5,81.3%,55.9%)",
+      "oklch": "oklch(0.56,0.25,302)",
       "rgbChannel": "147 51 234",
       "hslChannel": "271.5 81.3% 55.9%"
     },
@@ -1698,6 +1905,7 @@
       "hex": "#7e22ce",
       "rgb": "rgb(126,34,206)",
       "hsl": "hsl(272.1,71.7%,47.1%)",
+      "oklch": "oklch(0.50,0.24,302)",
       "rgbChannel": "126 34 206",
       "hslChannel": "272.1 71.7% 47.1%"
     },
@@ -1706,6 +1914,7 @@
       "hex": "#6b21a8",
       "rgb": "rgb(107,33,168)",
       "hsl": "hsl(272.9,67.2%,39.4%)",
+      "oklch": "oklch(0.44,0.20,304)",
       "rgbChannel": "107 33 168",
       "hslChannel": "272.9 67.2% 39.4%"
     },
@@ -1714,6 +1923,7 @@
       "hex": "#581c87",
       "rgb": "rgb(88,28,135)",
       "hsl": "hsl(273.6,65.6%,32%)",
+      "oklch": "oklch(0.38,0.17,305)",
       "rgbChannel": "88 28 135",
       "hslChannel": "273.6 65.6% 32%"
     },
@@ -1722,6 +1932,7 @@
       "hex": "#3b0764",
       "rgb": "rgb(59,7,100)",
       "hsl": "hsl(273.5,86.9%,21%)",
+      "oklch": "oklch(0.29,0.14,303)",
       "rgbChannel": "59 7 100",
       "hslChannel": "273.5 86.9% 21%"
     }
@@ -1732,6 +1943,7 @@
       "hex": "#fdf4ff",
       "rgb": "rgb(253,244,255)",
       "hsl": "hsl(289.1,100%,97.8%)",
+      "oklch": "oklch(0.98,0.02,320)",
       "rgbChannel": "253 244 255",
       "hslChannel": "289.1 100% 97.8%"
     },
@@ -1740,6 +1952,7 @@
       "hex": "#fae8ff",
       "rgb": "rgb(250,232,255)",
       "hsl": "hsl(287,100%,95.5%)",
+      "oklch": "oklch(0.95,0.04,319)",
       "rgbChannel": "250 232 255",
       "hslChannel": "287 100% 95.5%"
     },
@@ -1748,6 +1961,7 @@
       "hex": "#f5d0fe",
       "rgb": "rgb(245,208,254)",
       "hsl": "hsl(288.3,95.8%,90.6%)",
+      "oklch": "oklch(0.90,0.07,320)",
       "rgbChannel": "245 208 254",
       "hslChannel": "288.3 95.8% 90.6%"
     },
@@ -1756,6 +1970,7 @@
       "hex": "#f0abfc",
       "rgb": "rgb(240,171,252)",
       "hsl": "hsl(291.1,93.1%,82.9%)",
+      "oklch": "oklch(0.83,0.13,321)",
       "rgbChannel": "240 171 252",
       "hslChannel": "291.1 93.1% 82.9%"
     },
@@ -1764,6 +1979,7 @@
       "hex": "#e879f9",
       "rgb": "rgb(232,121,249)",
       "hsl": "hsl(292,91.4%,72.5%)",
+      "oklch": "oklch(0.75,0.21,322)",
       "rgbChannel": "232 121 249",
       "hslChannel": "292 91.4% 72.5%"
     },
@@ -1772,6 +1988,7 @@
       "hex": "#d946ef",
       "rgb": "rgb(217,70,239)",
       "hsl": "hsl(292.2,84.1%,60.6%)",
+      "oklch": "oklch(0.67,0.26,322)",
       "rgbChannel": "217 70 239",
       "hslChannel": "292.2 84.1% 60.6%"
     },
@@ -1780,6 +1997,7 @@
       "hex": "#c026d3",
       "rgb": "rgb(192,38,211)",
       "hsl": "hsl(293.4,69.5%,48.8%)",
+      "oklch": "oklch(0.59,0.26,323)",
       "rgbChannel": "192 38 211",
       "hslChannel": "293.4 69.5% 48.8%"
     },
@@ -1788,6 +2006,7 @@
       "hex": "#a21caf",
       "rgb": "rgb(162,28,175)",
       "hsl": "hsl(294.7,72.4%,39.8%)",
+      "oklch": "oklch(0.52,0.23,324)",
       "rgbChannel": "162 28 175",
       "hslChannel": "294.7 72.4% 39.8%"
     },
@@ -1796,6 +2015,7 @@
       "hex": "#86198f",
       "rgb": "rgb(134,25,143)",
       "hsl": "hsl(295.4,70.2%,32.9%)",
+      "oklch": "oklch(0.45,0.19,325)",
       "rgbChannel": "134 25 143",
       "hslChannel": "295.4 70.2% 32.9%"
     },
@@ -1804,6 +2024,7 @@
       "hex": "#701a75",
       "rgb": "rgb(112,26,117)",
       "hsl": "hsl(296.7,63.6%,28%)",
+      "oklch": "oklch(0.40,0.16,326)",
       "rgbChannel": "112 26 117",
       "hslChannel": "296.7 63.6% 28%"
     },
@@ -1812,6 +2033,7 @@
       "hex": "#4a044e",
       "rgb": "rgb(74,4,78)",
       "hsl": "hsl(296.8,90.2%,16.1%)",
+      "oklch": "oklch(0.29,0.13,326)",
       "rgbChannel": "74 4 78",
       "hslChannel": "296.8 90.2% 16.1%"
     }
@@ -1822,6 +2044,7 @@
       "hex": "#fdf2f8",
       "rgb": "rgb(253,242,248)",
       "hsl": "hsl(327.3,73.3%,97.1%)",
+      "oklch": "oklch(0.97,0.01,343)",
       "rgbChannel": "253 242 248",
       "hslChannel": "327.3 73.3% 97.1%"
     },
@@ -1830,6 +2053,7 @@
       "hex": "#fce7f3",
       "rgb": "rgb(252,231,243)",
       "hsl": "hsl(325.7,77.8%,94.7%)",
+      "oklch": "oklch(0.95,0.03,342)",
       "rgbChannel": "252 231 243",
       "hslChannel": "325.7 77.8% 94.7%"
     },
@@ -1838,6 +2062,7 @@
       "hex": "#fbcfe8",
       "rgb": "rgb(251,207,232)",
       "hsl": "hsl(325.9,84.6%,89.8%)",
+      "oklch": "oklch(0.90,0.06,343)",
       "rgbChannel": "251 207 232",
       "hslChannel": "325.9 84.6% 89.8%"
     },
@@ -1846,6 +2071,7 @@
       "hex": "#f9a8d4",
       "rgb": "rgb(249,168,212)",
       "hsl": "hsl(327.4,87.1%,81.8%)",
+      "oklch": "oklch(0.82,0.11,346)",
       "rgbChannel": "249 168 212",
       "hslChannel": "327.4 87.1% 81.8%"
     },
@@ -1854,6 +2080,7 @@
       "hex": "#f472b6",
       "rgb": "rgb(244,114,182)",
       "hsl": "hsl(328.6,85.5%,70.2%)",
+      "oklch": "oklch(0.73,0.18,350)",
       "rgbChannel": "244 114 182",
       "hslChannel": "328.6 85.5% 70.2%"
     },
@@ -1862,6 +2089,7 @@
       "hex": "#ec4899",
       "rgb": "rgb(236,72,153)",
       "hsl": "hsl(330.4,81.2%,60.4%)",
+      "oklch": "oklch(0.66,0.21,354)",
       "rgbChannel": "236 72 153",
       "hslChannel": "330.4 81.2% 60.4%"
     },
@@ -1870,6 +2098,7 @@
       "hex": "#db2777",
       "rgb": "rgb(219,39,119)",
       "hsl": "hsl(333.3,71.4%,50.6%)",
+      "oklch": "oklch(0.59,0.22,1)",
       "rgbChannel": "219 39 119",
       "hslChannel": "333.3 71.4% 50.6%"
     },
@@ -1878,6 +2107,7 @@
       "hex": "#be185d",
       "rgb": "rgb(190,24,93)",
       "hsl": "hsl(335.1,77.6%,42%)",
+      "oklch": "oklch(0.52,0.20,4)",
       "rgbChannel": "190 24 93",
       "hslChannel": "335.1 77.6% 42%"
     },
@@ -1886,6 +2116,7 @@
       "hex": "#9d174d",
       "rgb": "rgb(157,23,77)",
       "hsl": "hsl(335.8,74.4%,35.3%)",
+      "oklch": "oklch(0.46,0.17,4)",
       "rgbChannel": "157 23 77",
       "hslChannel": "335.8 74.4% 35.3%"
     },
@@ -1894,6 +2125,7 @@
       "hex": "#831843",
       "rgb": "rgb(131,24,67)",
       "hsl": "hsl(335.9,69%,30.4%)",
+      "oklch": "oklch(0.41,0.14,2)",
       "rgbChannel": "131 24 67",
       "hslChannel": "335.9 69% 30.4%"
     },
@@ -1902,6 +2134,7 @@
       "hex": "#500724",
       "rgb": "rgb(80,7,36)",
       "hsl": "hsl(336.2,83.9%,17.1%)",
+      "oklch": "oklch(0.28,0.10,4)",
       "rgbChannel": "80 7 36",
       "hslChannel": "336.2 83.9% 17.1%"
     }
@@ -1912,6 +2145,7 @@
       "hex": "#fff1f2",
       "rgb": "rgb(255,241,242)",
       "hsl": "hsl(355.7,100%,97.3%)",
+      "oklch": "oklch(0.97,0.02,12)",
       "rgbChannel": "255 241 242",
       "hslChannel": "355.7 100% 97.3%"
     },
@@ -1920,6 +2154,7 @@
       "hex": "#ffe4e6",
       "rgb": "rgb(255,228,230)",
       "hsl": "hsl(355.6,100%,94.7%)",
+      "oklch": "oklch(0.94,0.03,13)",
       "rgbChannel": "255 228 230",
       "hslChannel": "355.6 100% 94.7%"
     },
@@ -1928,6 +2163,7 @@
       "hex": "#fecdd3",
       "rgb": "rgb(254,205,211)",
       "hsl": "hsl(352.7,96.1%,90%)",
+      "oklch": "oklch(0.89,0.06,10)",
       "rgbChannel": "254 205 211",
       "hslChannel": "352.7 96.1% 90%"
     },
@@ -1936,6 +2172,7 @@
       "hex": "#fda4af",
       "rgb": "rgb(253,164,175)",
       "hsl": "hsl(352.6,95.7%,81.8%)",
+      "oklch": "oklch(0.81,0.11,12)",
       "rgbChannel": "253 164 175",
       "hslChannel": "352.6 95.7% 81.8%"
     },
@@ -1944,6 +2181,7 @@
       "hex": "#fb7185",
       "rgb": "rgb(251,113,133)",
       "hsl": "hsl(351.3,94.5%,71.4%)",
+      "oklch": "oklch(0.72,0.17,13)",
       "rgbChannel": "251 113 133",
       "hslChannel": "351.3 94.5% 71.4%"
     },
@@ -1952,6 +2190,7 @@
       "hex": "#f43f5e",
       "rgb": "rgb(244,63,94)",
       "hsl": "hsl(349.7,89.2%,60.2%)",
+      "oklch": "oklch(0.65,0.22,16)",
       "rgbChannel": "244 63 94",
       "hslChannel": "349.7 89.2% 60.2%"
     },
@@ -1960,6 +2199,7 @@
       "hex": "#e11d48",
       "rgb": "rgb(225,29,72)",
       "hsl": "hsl(346.8,77.2%,49.8%)",
+      "oklch": "oklch(0.59,0.22,18)",
       "rgbChannel": "225 29 72",
       "hslChannel": "346.8 77.2% 49.8%"
     },
@@ -1968,6 +2208,7 @@
       "hex": "#be123c",
       "rgb": "rgb(190,18,60)",
       "hsl": "hsl(345.3,82.7%,40.8%)",
+      "oklch": "oklch(0.51,0.20,17)",
       "rgbChannel": "190 18 60",
       "hslChannel": "345.3 82.7% 40.8%"
     },
@@ -1976,6 +2217,7 @@
       "hex": "#9f1239",
       "rgb": "rgb(159,18,57)",
       "hsl": "hsl(343.4,79.7%,34.7%)",
+      "oklch": "oklch(0.45,0.17,14)",
       "rgbChannel": "159 18 57",
       "hslChannel": "343.4 79.7% 34.7%"
     },
@@ -1984,6 +2226,7 @@
       "hex": "#881337",
       "rgb": "rgb(136,19,55)",
       "hsl": "hsl(341.5,75.5%,30.4%)",
+      "oklch": "oklch(0.41,0.15,10)",
       "rgbChannel": "136 19 55",
       "hslChannel": "341.5 75.5% 30.4%"
     },
@@ -1992,6 +2235,7 @@
       "hex": "#4c0519",
       "rgb": "rgb(76,5,25)",
       "hsl": "hsl(343.1,87.7%,15.9%)",
+      "oklch": "oklch(0.27,0.10,12)",
       "rgbChannel": "76 5 25",
       "hslChannel": "343.1 87.7% 15.9%"
     }
diff --git a/apps/web/public/r/index.json b/apps/web/public/r/index.json
index 193df075..507c5b48 100644
--- a/apps/web/public/r/index.json
+++ b/apps/web/public/r/index.json
@@ -8,7 +8,7 @@
     "files": [
       {
         "path": "ui/accordion.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -48,7 +48,7 @@
     "files": [
       {
         "path": "ui/alert.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -64,7 +64,7 @@
     "files": [
       {
         "path": "ui/alert-dialog.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -77,7 +77,7 @@
     "files": [
       {
         "path": "ui/animated-beam.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -90,7 +90,7 @@
     "files": [
       {
         "path": "ui/animated-grid-pattern.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -103,7 +103,7 @@
     "files": [
       {
         "path": "ui/animated-list.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -113,7 +113,7 @@
     "files": [
       {
         "path": "ui/animated-shiny-text.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -147,7 +147,7 @@
     "files": [
       {
         "path": "ui/animated-subscribe-button.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -157,7 +157,7 @@
     "files": [
       {
         "path": "ui/animated-gradient-text.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -188,7 +188,7 @@
     "files": [
       {
         "path": "ui/aspect-ratio.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -201,7 +201,7 @@
     "files": [
       {
         "path": "ui/avatar.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -211,7 +211,7 @@
     "files": [
       {
         "path": "ui/avatar-circles.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -221,7 +221,7 @@
     "files": [
       {
         "path": "ui/badge.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -234,7 +234,7 @@
     "files": [
       {
         "path": "ui/bento-grid.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -247,7 +247,7 @@
     "files": [
       {
         "path": "ui/blur-in.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -257,7 +257,7 @@
     "files": [
       {
         "path": "ui/border-beam.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -288,7 +288,7 @@
     "files": [
       {
         "path": "ui/box-reveal.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -301,7 +301,7 @@
     "files": [
       {
         "path": "ui/breadcrumb.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -314,7 +314,7 @@
     "files": [
       {
         "path": "ui/blur-fade.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -327,7 +327,7 @@
     "files": [
       {
         "path": "ui/button.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -344,7 +344,7 @@
     "files": [
       {
         "path": "ui/calendar.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -354,7 +354,7 @@
     "files": [
       {
         "path": "ui/card.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -370,7 +370,7 @@
     "files": [
       {
         "path": "ui/carousel.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -387,7 +387,7 @@
     "files": [
       {
         "path": "ui/chart.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -400,7 +400,7 @@
     "files": [
       {
         "path": "ui/checkbox.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -413,7 +413,7 @@
     "files": [
       {
         "path": "ui/client-tweet-card.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -426,7 +426,7 @@
     "files": [
       {
         "path": "ui/collapsible.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -442,7 +442,7 @@
     "files": [
       {
         "path": "ui/command.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -456,7 +456,7 @@
     "files": [
       {
         "path": "ui/confetti.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -469,7 +469,7 @@
     "files": [
       {
         "path": "ui/context-menu.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -479,7 +479,7 @@
     "files": [
       {
         "path": "ui/cool-mode.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -492,7 +492,7 @@
     "files": [
       {
         "path": "ui/dialog.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -505,7 +505,7 @@
     "files": [
       {
         "path": "ui/dock.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -515,7 +515,7 @@
     "files": [
       {
         "path": "ui/dot-pattern.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -529,7 +529,7 @@
     "files": [
       {
         "path": "ui/drawer.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -542,7 +542,7 @@
     "files": [
       {
         "path": "ui/dropdown-menu.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -555,7 +555,7 @@
     "files": [
       {
         "path": "ui/fade-text.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -565,7 +565,7 @@
     "files": [
       {
         "path": "ui/file-tree.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -578,7 +578,7 @@
     "files": [
       {
         "path": "ui/flip-text.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -599,7 +599,7 @@
     "files": [
       {
         "path": "ui/form.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -613,7 +613,7 @@
     "files": [
       {
         "path": "ui/globe.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -626,7 +626,7 @@
     "files": [
       {
         "path": "ui/gradual-spacing.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -636,7 +636,7 @@
     "files": [
       {
         "path": "ui/grid-pattern.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -646,7 +646,7 @@
     "files": [
       {
         "path": "ui/gauge-circle.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -659,7 +659,7 @@
     "files": [
       {
         "path": "ui/hero-video-dialog.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -672,7 +672,7 @@
     "files": [
       {
         "path": "ui/hover-card.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -686,7 +686,7 @@
     "files": [
       {
         "path": "ui/icon-cloud.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -696,7 +696,7 @@
     "files": [
       {
         "path": "ui/input.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -709,7 +709,7 @@
     "files": [
       {
         "path": "ui/input-otp.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -729,7 +729,7 @@
     "files": [
       {
         "path": "ui/input-phone.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -742,7 +742,7 @@
     "files": [
       {
         "path": "ui/label.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -755,7 +755,7 @@
     "files": [
       {
         "path": "ui/letter-pullup.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -768,7 +768,7 @@
     "files": [
       {
         "path": "ui/magic-card.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -778,7 +778,7 @@
     "files": [
       {
         "path": "ui/marquee.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -821,7 +821,7 @@
     "files": [
       {
         "path": "ui/menubar.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -831,7 +831,7 @@
     "files": [
       {
         "path": "ui/meteors.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -841,7 +841,7 @@
     "files": [
       {
         "path": "ui/multi-select.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -854,7 +854,7 @@
     "files": [
       {
         "path": "ui/navigation-menu.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -864,7 +864,7 @@
     "files": [
       {
         "path": "ui/neon-gradient-card.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -898,7 +898,7 @@
     "files": [
       {
         "path": "ui/number-ticker.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -908,7 +908,7 @@
     "files": [
       {
         "path": "ui/orbiting-circles.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -942,7 +942,7 @@
     "files": [
       {
         "path": "ui/pagination.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -952,7 +952,7 @@
     "files": [
       {
         "path": "ui/particles.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -965,7 +965,7 @@
     "files": [
       {
         "path": "ui/popover.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -978,7 +978,7 @@
     "files": [
       {
         "path": "ui/progress.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -988,7 +988,7 @@
     "files": [
       {
         "path": "ui/pulsating-button.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -1022,7 +1022,7 @@
     "files": [
       {
         "path": "ui/radio-group.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1035,7 +1035,7 @@
     "files": [
       {
         "path": "ui/resizable.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1045,7 +1045,7 @@
     "files": [
       {
         "path": "ui/retro-grid.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -1076,7 +1076,7 @@
     "files": [
       {
         "path": "ui/ripple.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -1110,7 +1110,7 @@
     "files": [
       {
         "path": "ui/scroll-area.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1123,7 +1123,7 @@
     "files": [
       {
         "path": "ui/scroll-based-velocity.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1136,7 +1136,7 @@
     "files": [
       {
         "path": "ui/scroll-progress.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1149,7 +1149,7 @@
     "files": [
       {
         "path": "ui/select.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1162,7 +1162,7 @@
     "files": [
       {
         "path": "ui/separate-away.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1175,7 +1175,7 @@
     "files": [
       {
         "path": "ui/separator.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1188,7 +1188,7 @@
     "files": [
       {
         "path": "ui/sheet.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1198,7 +1198,7 @@
     "files": [
       {
         "path": "ui/shimmer-button.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -1241,7 +1241,7 @@
     "files": [
       {
         "path": "ui/shine-border.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -1278,7 +1278,7 @@
     "files": [
       {
         "path": "ui/shiny-button.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1302,7 +1302,7 @@
     "files": [
       {
         "path": "ui/sidebar.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -1354,7 +1354,7 @@
     "files": [
       {
         "path": "ui/skeleton.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1367,7 +1367,7 @@
     "files": [
       {
         "path": "ui/slider.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1381,7 +1381,7 @@
     "files": [
       {
         "path": "ui/sonner.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1394,7 +1394,7 @@
     "files": [
       {
         "path": "ui/sparkles-text.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1407,7 +1407,7 @@
     "files": [
       {
         "path": "ui/star-rating.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1420,7 +1420,7 @@
     "files": [
       {
         "path": "ui/switch.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1436,7 +1436,7 @@
     "files": [
       {
         "path": "ui/stepper.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1449,7 +1449,7 @@
     "files": [
       {
         "path": "ui/scratch-to-reveal.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1459,7 +1459,7 @@
     "files": [
       {
         "path": "ui/table.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1472,7 +1472,7 @@
     "files": [
       {
         "path": "ui/tabs.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1482,7 +1482,7 @@
     "files": [
       {
         "path": "ui/textarea.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1495,7 +1495,7 @@
     "files": [
       {
         "path": "ui/text-reveal.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1508,7 +1508,7 @@
     "files": [
       {
         "path": "ui/timeline.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1518,7 +1518,7 @@
     "files": [
       {
         "path": "ui/toc.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1552,7 +1552,7 @@
     "files": [
       {
         "path": "ui/toggle.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1568,7 +1568,7 @@
     "files": [
       {
         "path": "ui/toggle-group.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1581,7 +1581,7 @@
     "files": [
       {
         "path": "ui/tooltip.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1591,7 +1591,7 @@
     "files": [
       {
         "path": "ui/tour.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1601,7 +1601,7 @@
     "files": [
       {
         "path": "ui/typing-animation.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1614,7 +1614,7 @@
     "files": [
       {
         "path": "ui/tweet-card.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1627,7 +1627,7 @@
     "files": [
       {
         "path": "ui/video-modal.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -1661,19 +1661,6 @@
       }
     }
   },
-  {
-    "name": "wavy-dot-pattern",
-    "type": "registry:ui",
-    "dependencies": [
-      "react-anime"
-    ],
-    "files": [
-      {
-        "path": "ui/wavy-dot-pattern.tsx",
-        "type": "registry:component"
-      }
-    ]
-  },
   {
     "name": "wavy-text",
     "type": "registry:ui",
@@ -1683,7 +1670,7 @@
     "files": [
       {
         "path": "ui/wavy-text.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1696,7 +1683,7 @@
     "files": [
       {
         "path": "ui/word-fade-in.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1709,7 +1696,7 @@
     "files": [
       {
         "path": "ui/word-pull-up.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1722,7 +1709,7 @@
     "files": [
       {
         "path": "ui/word-rotate.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1732,7 +1719,7 @@
     "files": [
       {
         "path": "ui/rainbow-button.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -1789,7 +1776,7 @@
     "files": [
       {
         "path": "ui/flickering-grid.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1802,7 +1789,7 @@
     "files": [
       {
         "path": "ui/hyper-text.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1812,7 +1799,7 @@
     "files": [
       {
         "path": "ui/safari.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1822,7 +1809,7 @@
     "files": [
       {
         "path": "ui/iphone-15-pro.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1832,7 +1819,7 @@
     "files": [
       {
         "path": "ui/animated-circular-progress-bar.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1842,7 +1829,7 @@
     "files": [
       {
         "path": "ui/grid-layout.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -1877,7 +1864,7 @@
     "files": [
       {
         "path": "ui/globe-grid.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       }
     ],
     "tailwind": {
@@ -1928,7 +1915,7 @@
     "files": [
       {
         "path": "ui/nyx-toc.tsx",
-        "type": "registry:component"
+        "type": "registry:ui"
       },
       {
         "path": "hooks/use-anchor-observer.ts",
@@ -1963,5 +1950,254 @@
         }
       }
     }
+  },
+  {
+    "name": "terminal",
+    "type": "registry:ui",
+    "dependencies": [
+      "motion"
+    ],
+    "files": [
+      {
+        "path": "ui/terminal.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "script-copy-btn",
+    "type": "registry:ui",
+    "dependencies": [
+      "motion",
+      "shiki",
+      "next-themes"
+    ],
+    "files": [
+      {
+        "path": "ui/script-copy-btn.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "text-animate",
+    "type": "registry:ui",
+    "dependencies": [
+      "motion"
+    ],
+    "files": [
+      {
+        "path": "ui/text-animate.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "line-shadow-text",
+    "type": "registry:ui",
+    "dependencies": [
+      "motion"
+    ],
+    "files": [
+      {
+        "path": "ui/line-shadow-text.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "tailwind": {
+      "config": {
+        "theme": {
+          "extend": {
+            "animation": {
+              "line-shadow": "line-shadow 15s linear infinite"
+            },
+            "keyframes": {
+              "line-shadow": {
+                "0%": {
+                  "background-position": "0 0"
+                },
+                "100%": {
+                  "background-position": "100% -100%"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  {
+    "name": "aurora-text",
+    "type": "registry:ui",
+    "dependencies": [
+      "motion"
+    ],
+    "files": [
+      {
+        "path": "ui/aurora-text.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "tailwind": {
+      "config": {
+        "theme": {
+          "extend": {
+            "keyframes": {
+              "aurora-border": {
+                "0%, 100%": {
+                  "borderRadius": "37% 29% 27% 27% / 28% 25% 41% 37%"
+                },
+                "25%": {
+                  "borderRadius": "47% 29% 39% 49% / 61% 19% 66% 26%"
+                },
+                "50%": {
+                  "borderRadius": "57% 23% 47% 72% / 63% 17% 66% 33%"
+                },
+                "75%": {
+                  "borderRadius": "28% 49% 29% 100% / 93% 20% 64% 25%"
+                }
+              },
+              "aurora-1": {
+                "0%, 100%": {
+                  "top": "0",
+                  "right": "0"
+                },
+                "50%": {
+                  "top": "50%",
+                  "right": "25%"
+                },
+                "75%": {
+                  "top": "25%",
+                  "right": "50%"
+                }
+              },
+              "aurora-2": {
+                "0%, 100%": {
+                  "top": "0",
+                  "left": "0"
+                },
+                "60%": {
+                  "top": "75%",
+                  "left": "25%"
+                },
+                "85%": {
+                  "top": "50%",
+                  "left": "50%"
+                }
+              },
+              "aurora-3": {
+                "0%, 100%": {
+                  "bottom": "0",
+                  "left": "0"
+                },
+                "40%": {
+                  "bottom": "50%",
+                  "left": "25%"
+                },
+                "65%": {
+                  "bottom": "25%",
+                  "left": "50%"
+                }
+              },
+              "aurora-4": {
+                "0%, 100%": {
+                  "bottom": "0",
+                  "right": "0"
+                },
+                "50%": {
+                  "bottom": "25%",
+                  "right": "40%"
+                },
+                "90%": {
+                  "bottom": "50%",
+                  "right": "25%"
+                }
+              }
+            },
+            "animation": {
+              "aurora-border": "aurora-border 10s ease-in-out infinite",
+              "aurora-1": "aurora-1 15s ease-in-out infinite",
+              "aurora-2": "aurora-2 15s ease-in-out infinite",
+              "aurora-3": "aurora-3 15s ease-in-out infinite",
+              "aurora-4": "aurora-4 15s ease-in-out infinite"
+            }
+          }
+        }
+      }
+    }
+  },
+  {
+    "name": "morphing-text",
+    "type": "registry:ui",
+    "dependencies": [
+      "motion"
+    ],
+    "files": [
+      {
+        "path": "ui/morphing-text.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "ripple-button",
+    "type": "registry:ui",
+    "dependencies": [
+      "motion"
+    ],
+    "files": [
+      {
+        "path": "ui/ripple-button.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "tailwind": {
+      "config": {
+        "theme": {
+          "extend": {
+            "animation": {
+              "rippling": "rippling var(--duration) ease-out"
+            },
+            "keyframes": {
+              "rippling": {
+                "0%": {
+                  "opacity": "1"
+                },
+                "100%": {
+                  "transform": "scale(2)",
+                  "opacity": "0"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  {
+    "name": "warp-background",
+    "type": "registry:ui",
+    "dependencies": [
+      "motion"
+    ],
+    "files": [
+      {
+        "path": "ui/warp-background.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "interactive-grid-pattern",
+    "type": "registry:ui",
+    "dependencies": [
+      "motion"
+    ],
+    "files": [
+      {
+        "path": "ui/interactive-grid-pattern.tsx",
+        "type": "registry:ui"
+      }
+    ]
   }
 ]
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/accordion-demo.json b/apps/web/public/r/styles/default/accordion-demo.json
index 461b20e9..6c465e5c 100644
--- a/apps/web/public/r/styles/default/accordion-demo.json
+++ b/apps/web/public/r/styles/default/accordion-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "accordion-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "accordion"
   ],
   "files": [
     {
-      "path": "example/accordion-demo.tsx",
-      "content": "import {\n   Accordion,\n   AccordionContent,\n   AccordionItem,\n   AccordionTrigger,\n} from '~/registry/default/ui/accordion'\n\nexport default function AccordionDemo() {\n   return (\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n         <AccordionItem value=\"item-1\">\n            <AccordionTrigger>Is it accessible?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It adheres to the WAI-ARIA design pattern.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-2\">\n            <AccordionTrigger>Is it styled?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It comes with default styles that matches the other\n               components&apos; aesthetic.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-3\">\n            <AccordionTrigger>Is it animated?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It&apos;s animated by default, but you can disable it if you\n               prefer.\n            </AccordionContent>\n         </AccordionItem>\n      </Accordion>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/accordion-demo.tsx",
+      "content": "import {\n   Accordion,\n   AccordionContent,\n   AccordionItem,\n   AccordionTrigger,\n} from \"~/registry/default/ui/accordion\"\n\nexport default function AccordionDemo() {\n   return (\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n         <AccordionItem value=\"item-1\">\n            <AccordionTrigger>Is it accessible?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It adheres to the WAI-ARIA design pattern.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-2\">\n            <AccordionTrigger>Is it styled?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It comes with default styles that matches the other\n               components&apos; aesthetic.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-3\">\n            <AccordionTrigger>Is it animated?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It&apos;s animated by default, but you can disable it if you\n               prefer.\n            </AccordionContent>\n         </AccordionItem>\n      </Accordion>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/accordion.json b/apps/web/public/r/styles/default/accordion.json
index 0b60d833..dfcb5006 100644
--- a/apps/web/public/r/styles/default/accordion.json
+++ b/apps/web/public/r/styles/default/accordion.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "accordion",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-accordion"
   ],
   "files": [
     {
       "path": "ui/accordion.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { ChevronDown } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n   <AccordionPrimitive.Item\n      ref={ref}\n      className={ny('border-b', className)}\n      {...props}\n   />\n))\nAccordionItem.displayName = 'AccordionItem'\n\nconst AccordionTrigger = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n         ref={ref}\n         className={ny(\n            'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n            className,\n         )}\n         {...props}\n      >\n         {children}\n         <ChevronDown className=\"size-4 shrink-0 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n   </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <AccordionPrimitive.Content\n      ref={ref}\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all\"\n      {...props}\n   >\n      <div className={ny('pb-4 pt-0', className)}>{children}</div>\n   </AccordionPrimitive.Content>\n))\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n   <AccordionPrimitive.Item\n      ref={ref}\n      className={ny(\"border-b\", className)}\n      {...props}\n   />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n         ref={ref}\n         className={ny(\n            \"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n         <ChevronDown className=\"size-4 shrink-0 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n   </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <AccordionPrimitive.Content\n      ref={ref}\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all\"\n      {...props}\n   >\n      <div className={ny(\"pb-4 pt-0\", className)}>{children}</div>\n   </AccordionPrimitive.Content>\n))\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/alert-demo.json b/apps/web/public/r/styles/default/alert-demo.json
index b8053013..c4cc1137 100644
--- a/apps/web/public/r/styles/default/alert-demo.json
+++ b/apps/web/public/r/styles/default/alert-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "alert-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "alert"
   ],
   "files": [
     {
-      "path": "example/alert-demo.tsx",
-      "content": "import { Terminal } from 'lucide-react'\n\nimport {\n   Alert,\n   AlertDescription,\n   AlertTitle,\n} from '~/registry/default/ui/alert'\n\nexport default function AlertDemo() {\n   return (\n      <Alert>\n         <Terminal className=\"size-4\" />\n         <AlertTitle>Heads up!</AlertTitle>\n         <AlertDescription>\n            You can add components to your app using the cli.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n   Alert,\n   AlertDescription,\n   AlertTitle,\n} from \"~/registry/default/ui/alert\"\n\nexport default function AlertDemo() {\n   return (\n      <Alert>\n         <Terminal className=\"size-4\" />\n         <AlertTitle>Heads up!</AlertTitle>\n         <AlertDescription>\n            You can add components to your app using the cli.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/alert-destructive.json b/apps/web/public/r/styles/default/alert-destructive.json
index ca763c9f..9f267673 100644
--- a/apps/web/public/r/styles/default/alert-destructive.json
+++ b/apps/web/public/r/styles/default/alert-destructive.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "alert-destructive",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "alert"
   ],
   "files": [
     {
-      "path": "example/alert-destructive.tsx",
-      "content": "import { AlertCircle } from 'lucide-react'\n\nimport {\n   Alert,\n   AlertDescription,\n   AlertTitle,\n} from '~/registry/default/ui/alert'\n\nexport default function AlertDestructive() {\n   return (\n      <Alert variant=\"destructive\">\n         <AlertCircle className=\"size-4\" />\n         <AlertTitle>Error</AlertTitle>\n         <AlertDescription>\n            Your session has expired. Please log in again.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/alert-destructive.tsx",
+      "content": "import { AlertCircle } from \"lucide-react\"\n\nimport {\n   Alert,\n   AlertDescription,\n   AlertTitle,\n} from \"~/registry/default/ui/alert\"\n\nexport default function AlertDestructive() {\n   return (\n      <Alert variant=\"destructive\">\n         <AlertCircle className=\"size-4\" />\n         <AlertTitle>Error</AlertTitle>\n         <AlertDescription>\n            Your session has expired. Please log in again.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/alert-dialog-demo.json b/apps/web/public/r/styles/default/alert-dialog-demo.json
index 07b829c7..d36db2c5 100644
--- a/apps/web/public/r/styles/default/alert-dialog-demo.json
+++ b/apps/web/public/r/styles/default/alert-dialog-demo.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "alert-dialog-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "alert-dialog",
     "button"
   ],
   "files": [
     {
-      "path": "example/alert-dialog-demo.tsx",
-      "content": "import {\n   AlertDialog,\n   AlertDialogAction,\n   AlertDialogCancel,\n   AlertDialogContent,\n   AlertDialogDescription,\n   AlertDialogFooter,\n   AlertDialogHeader,\n   AlertDialogTitle,\n   AlertDialogTrigger,\n} from '~/registry/default/ui/alert-dialog'\nimport { Button } from '~/registry/default/ui/button'\n\nexport default function AlertDialogDemo() {\n   return (\n      <AlertDialog>\n         <AlertDialogTrigger asChild>\n            <Button variant=\"outline\">Show Dialog</Button>\n         </AlertDialogTrigger>\n         <AlertDialogContent>\n            <AlertDialogHeader>\n               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n               <AlertDialogDescription>\n                  This action cannot be undone. This will permanently delete your\n                  account and remove your data from our servers.\n               </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n               <AlertDialogCancel>Cancel</AlertDialogCancel>\n               <AlertDialogAction>Continue</AlertDialogAction>\n            </AlertDialogFooter>\n         </AlertDialogContent>\n      </AlertDialog>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/alert-dialog-demo.tsx",
+      "content": "import {\n   AlertDialog,\n   AlertDialogAction,\n   AlertDialogCancel,\n   AlertDialogContent,\n   AlertDialogDescription,\n   AlertDialogFooter,\n   AlertDialogHeader,\n   AlertDialogTitle,\n   AlertDialogTrigger,\n} from \"~/registry/default/ui/alert-dialog\"\nimport { Button } from \"~/registry/default/ui/button\"\n\nexport default function AlertDialogDemo() {\n   return (\n      <AlertDialog>\n         <AlertDialogTrigger asChild>\n            <Button variant=\"outline\">Show Dialog</Button>\n         </AlertDialogTrigger>\n         <AlertDialogContent>\n            <AlertDialogHeader>\n               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n               <AlertDialogDescription>\n                  This action cannot be undone. This will permanently delete\n                  your account and remove your data from our servers.\n               </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n               <AlertDialogCancel>Cancel</AlertDialogCancel>\n               <AlertDialogAction>Continue</AlertDialogAction>\n            </AlertDialogFooter>\n         </AlertDialogContent>\n      </AlertDialog>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/alert-dialog.json b/apps/web/public/r/styles/default/alert-dialog.json
index 5075a74c..990f31dc 100644
--- a/apps/web/public/r/styles/default/alert-dialog.json
+++ b/apps/web/public/r/styles/default/alert-dialog.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "alert-dialog",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-alert-dialog"
   ],
@@ -10,8 +12,8 @@
   "files": [
     {
       "path": "ui/alert-dialog.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'\nimport type { VariantProps } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\nimport { buttonVariants } from '~/registry/default/ui/button'\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Overlay\n      className={ny(\n         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',\n         className,\n      )}\n      {...props}\n      ref={ref}\n   />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n         ref={ref}\n         className={ny(\n            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',\n            className,\n         )}\n         {...props}\n      />\n   </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nfunction AlertDialogHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            'flex flex-col space-y-2 text-center sm:text-left',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nAlertDialogHeader.displayName = 'AlertDialogHeader'\n\nfunction AlertDialogFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nAlertDialogFooter.displayName = 'AlertDialogFooter'\n\nconst AlertDialogTitle = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Title\n      ref={ref}\n      className={ny('text-lg font-semibold', className)}\n      {...props}\n   />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Description\n      ref={ref}\n      className={ny('text-muted-foreground text-sm', className)}\n      {...props}\n   />\n))\nAlertDialogDescription.displayName\n  = AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Action>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &\n   VariantProps<typeof buttonVariants>\n>(({ className, variant, size, ...props }, ref) => (\n   <AlertDialogPrimitive.Action\n      ref={ref}\n      className={ny(buttonVariants({ variant, size }), className)}\n      {...props}\n   />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &\n   VariantProps<typeof buttonVariants>\n>(({ className, variant = 'outline', size, ...props }, ref) => (\n   <AlertDialogPrimitive.Cancel\n      ref={ref}\n      className={ny(buttonVariants({ variant, size }), 'mt-2 sm:mt-0', className)}\n      {...props}\n   />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n   AlertDialog,\n   AlertDialogPortal,\n   AlertDialogOverlay,\n   AlertDialogTrigger,\n   AlertDialogContent,\n   AlertDialogHeader,\n   AlertDialogFooter,\n   AlertDialogTitle,\n   AlertDialogDescription,\n   AlertDialogAction,\n   AlertDialogCancel,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { buttonVariants } from \"~/registry/default/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Overlay\n      className={ny(\n         \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80\",\n         className,\n      )}\n      {...props}\n      ref={ref}\n   />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n         ref={ref}\n         className={ny(\n            \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg\",\n            className,\n         )}\n         {...props}\n      />\n   </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nfunction AlertDialogHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            \"flex flex-col space-y-2 text-center sm:text-left\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nfunction AlertDialogFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Title\n      ref={ref}\n      className={ny(\"text-lg font-semibold\", className)}\n      {...props}\n   />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Description\n      ref={ref}\n      className={ny(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nAlertDialogDescription.displayName =\n   AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Action>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &\n      VariantProps<typeof buttonVariants>\n>(({ className, variant, size, ...props }, ref) => (\n   <AlertDialogPrimitive.Action\n      ref={ref}\n      className={ny(buttonVariants({ variant, size }), className)}\n      {...props}\n   />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &\n      VariantProps<typeof buttonVariants>\n>(({ className, variant = \"outline\", size, ...props }, ref) => (\n   <AlertDialogPrimitive.Cancel\n      ref={ref}\n      className={ny(\n         buttonVariants({ variant, size }),\n         \"mt-2 sm:mt-0\",\n         className,\n      )}\n      {...props}\n   />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n   AlertDialog,\n   AlertDialogPortal,\n   AlertDialogOverlay,\n   AlertDialogTrigger,\n   AlertDialogContent,\n   AlertDialogHeader,\n   AlertDialogFooter,\n   AlertDialogTitle,\n   AlertDialogDescription,\n   AlertDialogAction,\n   AlertDialogCancel,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/alert.json b/apps/web/public/r/styles/default/alert.json
index e6258396..804bd96b 100644
--- a/apps/web/public/r/styles/default/alert.json
+++ b/apps/web/public/r/styles/default/alert.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "alert",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/alert.tsx",
-      "content": "import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst alertVariants = cva(\n   'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n   {\n      variants: {\n         variant: {\n            default: 'bg-background text-foreground',\n            destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n      },\n   },\n)\n\nconst Alert = React.forwardRef<\n   HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n   <div\n      ref={ref}\n      role=\"alert\"\n      className={ny(alertVariants({ variant }), className)}\n      {...props}\n   />\n))\nAlert.displayName = 'Alert'\n\nconst AlertTitle = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n   <h5\n      ref={ref}\n      className={ny('mb-1 font-medium leading-none tracking-tight', className)}\n      {...props}\n   />\n))\nAlertTitle.displayName = 'AlertTitle'\n\nconst AlertDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny('text-sm [&_p]:leading-relaxed', className)}\n      {...props}\n   />\n))\nAlertDescription.displayName = 'AlertDescription'\n\nexport { Alert, AlertTitle, AlertDescription }\n",
-      "type": "registry:component",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst alertVariants = cva(\n   \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-background text-foreground\",\n            destructive:\n               \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nconst Alert = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n   <div\n      ref={ref}\n      role=\"alert\"\n      className={ny(alertVariants({ variant }), className)}\n      {...props}\n   />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n   <h5\n      ref={ref}\n      className={ny(\"mb-1 font-medium leading-none tracking-tight\", className)}\n      {...props}\n   />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\"text-sm [&_p]:leading-relaxed\", className)}\n      {...props}\n   />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-beam-bidirectional.json b/apps/web/public/r/styles/default/animated-beam-bidirectional.json
index 3f368e46..fdf9b377 100644
--- a/apps/web/public/r/styles/default/animated-beam-bidirectional.json
+++ b/apps/web/public/r/styles/default/animated-beam-bidirectional.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-beam-bidirectional",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-beam-bidirectional.tsx",
-      "content": "'use client'\n\nimport React, { forwardRef, useRef } from 'react'\nimport { ny } from '~/lib/utils'\nimport { AnimatedBeam } from '~/registry/default/ui/animated-beam'\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string, children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.user />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.openai />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n            startYOffset={10}\n            endYOffset={10}\n            curvature={-20}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n            startYOffset={-10}\n            endYOffset={-10}\n            curvature={20}\n            reverse\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   openai: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-beam-bidirectional.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\nimport { AnimatedBeam } from \"~/registry/default/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.user />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.openai />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n            startYOffset={10}\n            endYOffset={10}\n            curvature={-20}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n            startYOffset={-10}\n            endYOffset={-10}\n            curvature={20}\n            reverse\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   openai: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-beam-demo.json b/apps/web/public/r/styles/default/animated-beam-demo.json
index d1c69536..6adb8a67 100644
--- a/apps/web/public/r/styles/default/animated-beam-demo.json
+++ b/apps/web/public/r/styles/default/animated-beam-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-beam-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-beam-demo.tsx",
-      "content": "'use client'\n\nimport React, { forwardRef, useRef } from 'react'\nimport { ny } from '~/lib/utils'\nimport { AnimatedBeam } from '~/registry/default/ui/animated-beam'\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string, children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n            </div>\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div2Ref}>\n                  <Icons.notion />\n               </Circle>\n               <Circle ref={div4Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n               <Circle ref={div6Ref}>\n                  <Icons.zapier />\n               </Circle>\n            </div>\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div7Ref}>\n                  <Icons.messenger />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div4Ref}\n            curvature={-75}\n            endYOffset={-10}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div4Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div4Ref}\n            curvature={75}\n            endYOffset={10}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div4Ref}\n            curvature={-75}\n            endYOffset={-10}\n            reverse\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div4Ref}\n            reverse\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div7Ref}\n            toRef={div4Ref}\n            curvature={75}\n            endYOffset={10}\n            reverse\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g id=\"Personal\" transform=\"translate(277.000000, 309.000000)\">\n                     <g id=\"Docs-icon\" transform=\"translate(174.000000, 91.000000)\">\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              >\n                              </polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-beam-demo.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\nimport { AnimatedBeam } from \"~/registry/default/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n            </div>\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div2Ref}>\n                  <Icons.notion />\n               </Circle>\n               <Circle ref={div4Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n               <Circle ref={div6Ref}>\n                  <Icons.zapier />\n               </Circle>\n            </div>\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div7Ref}>\n                  <Icons.messenger />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div4Ref}\n            curvature={-75}\n            endYOffset={-10}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div4Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div4Ref}\n            curvature={75}\n            endYOffset={10}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div4Ref}\n            curvature={-75}\n            endYOffset={-10}\n            reverse\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div4Ref}\n            reverse\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div7Ref}\n            toRef={div4Ref}\n            curvature={75}\n            endYOffset={10}\n            reverse\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g\n                     id=\"Personal\"\n                     transform=\"translate(277.000000, 309.000000)\"\n                  >\n                     <g\n                        id=\"Docs-icon\"\n                        transform=\"translate(174.000000, 91.000000)\"\n                     >\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              ></polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-beam-multiple-inputs.json b/apps/web/public/r/styles/default/animated-beam-multiple-inputs.json
index 85e971f0..ca3fde44 100644
--- a/apps/web/public/r/styles/default/animated-beam-multiple-inputs.json
+++ b/apps/web/public/r/styles/default/animated-beam-multiple-inputs.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-beam-multiple-inputs",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-beam-multiple-inputs.tsx",
-      "content": "'use client'\n\nimport React, { forwardRef, useRef } from 'react'\nimport { ny } from '~/lib/utils'\nimport { AnimatedBeam } from '~/registry/default/ui/animated-beam'\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string, children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'border-border z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamMultipleInputDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-row items-stretch justify-between gap-10\">\n            <div className=\"flex flex-col justify-center gap-2\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div4Ref}>\n                  <Icons.messenger />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.notion />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div6Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div7Ref}>\n                  <Icons.user />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div4Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div7Ref}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g id=\"Personal\" transform=\"translate(277.000000, 309.000000)\">\n                     <g id=\"Docs-icon\" transform=\"translate(174.000000, 91.000000)\">\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              >\n                              </polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-beam-multiple-inputs.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\nimport { AnimatedBeam } from \"~/registry/default/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"border-border z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamMultipleInputDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-row items-stretch justify-between gap-10\">\n            <div className=\"flex flex-col justify-center gap-2\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div4Ref}>\n                  <Icons.messenger />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.notion />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div6Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div7Ref}>\n                  <Icons.user />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div4Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div7Ref}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g\n                     id=\"Personal\"\n                     transform=\"translate(277.000000, 309.000000)\"\n                  >\n                     <g\n                        id=\"Docs-icon\"\n                        transform=\"translate(174.000000, 91.000000)\"\n                     >\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              ></polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-beam-multiple-outputs.json b/apps/web/public/r/styles/default/animated-beam-multiple-outputs.json
index 0ad65c86..21b04191 100644
--- a/apps/web/public/r/styles/default/animated-beam-multiple-outputs.json
+++ b/apps/web/public/r/styles/default/animated-beam-multiple-outputs.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-beam-multiple-outputs",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-beam-multiple-outputs.tsx",
-      "content": "'use client'\n\nimport React, { forwardRef, useRef } from 'react'\nimport { ny } from '~/lib/utils'\nimport { AnimatedBeam } from '~/registry/default/ui/animated-beam'\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string, children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamMultipleOutputDemo({\n   className,\n}: {\n   className?: string\n}) {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className={ny(\n            'bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl',\n            className,\n         )}\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-row items-stretch justify-between gap-10\">\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div7Ref}>\n                  <Icons.user />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div6Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center gap-2\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div4Ref}>\n                  <Icons.messenger />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.notion />\n               </Circle>\n            </div>\n         </div>\n\n         {/* AnimatedBeams */}\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div4Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div7Ref}\n            duration={3}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g id=\"Personal\" transform=\"translate(277.000000, 309.000000)\">\n                     <g id=\"Docs-icon\" transform=\"translate(174.000000, 91.000000)\">\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              >\n                              </polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-beam-multiple-outputs.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\nimport { AnimatedBeam } from \"~/registry/default/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamMultipleOutputDemo({\n   className,\n}: {\n   className?: string\n}) {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className={ny(\n            \"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\",\n            className,\n         )}\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-row items-stretch justify-between gap-10\">\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div7Ref}>\n                  <Icons.user />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div6Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center gap-2\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div4Ref}>\n                  <Icons.messenger />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.notion />\n               </Circle>\n            </div>\n         </div>\n\n         {/* AnimatedBeams */}\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div4Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div7Ref}\n            duration={3}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g\n                     id=\"Personal\"\n                     transform=\"translate(277.000000, 309.000000)\"\n                  >\n                     <g\n                        id=\"Docs-icon\"\n                        transform=\"translate(174.000000, 91.000000)\"\n                     >\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              ></polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-beam-unidirectional.json b/apps/web/public/r/styles/default/animated-beam-unidirectional.json
index 2449d6cc..a386a2e4 100644
--- a/apps/web/public/r/styles/default/animated-beam-unidirectional.json
+++ b/apps/web/public/r/styles/default/animated-beam-unidirectional.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-beam-unidirectional",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-beam-unidirectional.tsx",
-      "content": "'use client'\n\nimport React, { forwardRef, useRef } from 'react'\nimport { ny } from '~/lib/utils'\nimport { AnimatedBeam } from '~/registry/default/ui/animated-beam'\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string, children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.user />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.openai />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            duration={3}\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   openai: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-beam-unidirectional.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\nimport { AnimatedBeam } from \"~/registry/default/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.user />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.openai />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            duration={3}\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   openai: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-beam.json b/apps/web/public/r/styles/default/animated-beam.json
index 257bc99e..c274d312 100644
--- a/apps/web/public/r/styles/default/animated-beam.json
+++ b/apps/web/public/r/styles/default/animated-beam.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-beam",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/animated-beam.tsx",
-      "content": "'use client'\n\nimport { motion } from 'framer-motion'\nimport type { RefObject } from 'react'\nimport { useEffect, useId, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\nexport interface AnimatedBeamProps {\n   className?: string\n   containerRef: RefObject<HTMLElement> // Container ref\n   fromRef: RefObject<HTMLElement>\n   toRef: RefObject<HTMLElement>\n   curvature?: number\n   reverse?: boolean\n   pathColor?: string\n   pathWidth?: number\n   pathOpacity?: number\n   gradientStartColor?: string\n   gradientStopColor?: string\n   delay?: number\n   duration?: number\n   startXOffset?: number\n   startYOffset?: number\n   endXOffset?: number\n   endYOffset?: number\n}\n\nexport const AnimatedBeam: React.FC<AnimatedBeamProps> = ({\n   className,\n   containerRef,\n   fromRef,\n   toRef,\n   curvature = 0,\n   reverse = false, // Include the reverse prop\n   duration = Math.random() * 3 + 4,\n   delay = 0,\n   pathColor = 'gray',\n   pathWidth = 2,\n   pathOpacity = 0.2,\n   gradientStartColor = '#ffaa40',\n   gradientStopColor = '#9c40ff',\n   startXOffset = 0,\n   startYOffset = 0,\n   endXOffset = 0,\n   endYOffset = 0,\n}) => {\n   const id = useId()\n   const [pathD, setPathD] = useState('')\n   const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 })\n\n   // Calculate the gradient coordinates based on the reverse prop\n   const gradientCoordinates = reverse\n      ? {\n            x1: ['90%', '-10%'],\n            x2: ['100%', '0%'],\n            y1: ['0%', '0%'],\n            y2: ['0%', '0%'],\n         }\n      : {\n            x1: ['10%', '110%'],\n            x2: ['0%', '100%'],\n            y1: ['0%', '0%'],\n            y2: ['0%', '0%'],\n         }\n\n   useEffect(() => {\n      const updatePath = () => {\n         if (containerRef.current && fromRef.current && toRef.current) {\n            const containerRect = containerRef.current.getBoundingClientRect()\n            const rectA = fromRef.current.getBoundingClientRect()\n            const rectB = toRef.current.getBoundingClientRect()\n\n            const svgWidth = containerRect.width\n            const svgHeight = containerRect.height\n            setSvgDimensions({ width: svgWidth, height: svgHeight })\n\n            const startX\n          = rectA.left - containerRect.left + rectA.width / 2 + startXOffset\n            const startY\n          = rectA.top - containerRect.top + rectA.height / 2 + startYOffset\n            const endX\n          = rectB.left - containerRect.left + rectB.width / 2 + endXOffset\n            const endY\n          = rectB.top - containerRect.top + rectB.height / 2 + endYOffset\n\n            const controlY = startY - curvature\n            const d = `M ${startX},${startY} Q ${\n          (startX + endX) / 2\n        },${controlY} ${endX},${endY}`\n            setPathD(d)\n         }\n      }\n\n      // Initialize ResizeObserver\n      const resizeObserver = new ResizeObserver((entries) => {\n      // For all entries, recalculate the path\n         for (const entry of entries) updatePath()\n      })\n\n      // Observe the container element\n      if (containerRef.current)\n         resizeObserver.observe(containerRef.current)\n\n      // Call the updatePath initially to set the initial path\n      updatePath()\n\n      // Clean up the observer on component unmount\n      return () => {\n         resizeObserver.disconnect()\n      }\n   }, [\n      containerRef,\n      fromRef,\n      toRef,\n      curvature,\n      startXOffset,\n      startYOffset,\n      endXOffset,\n      endYOffset,\n   ])\n\n   return (\n      <svg\n         fill=\"none\"\n         width={svgDimensions.width}\n         height={svgDimensions.height}\n         xmlns=\"http://www.w3.org/2000/svg\"\n         className={ny(\n            'pointer-events-none absolute left-0 top-0 transform-gpu stroke-2',\n            className,\n         )}\n         viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}\n      >\n         <path\n            d={pathD}\n            stroke={pathColor}\n            strokeWidth={pathWidth}\n            strokeOpacity={pathOpacity}\n            strokeLinecap=\"round\"\n         />\n         <path\n            d={pathD}\n            strokeWidth={pathWidth}\n            stroke={`url(#${id})`}\n            strokeOpacity=\"1\"\n            strokeLinecap=\"round\"\n         />\n         <defs>\n            <motion.linearGradient\n               className=\"transform-gpu\"\n               id={id}\n               gradientUnits=\"userSpaceOnUse\"\n               initial={{\n                  x1: '0%',\n                  x2: '0%',\n                  y1: '0%',\n                  y2: '0%',\n               }}\n               animate={{\n                  x1: gradientCoordinates.x1,\n                  x2: gradientCoordinates.x2,\n                  y1: gradientCoordinates.y1,\n                  y2: gradientCoordinates.y2,\n               }}\n               transition={{\n                  delay,\n                  duration,\n                  ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo\n                  repeat: Infinity,\n                  repeatDelay: 0,\n               }}\n            >\n               <stop stopColor={gradientStartColor} stopOpacity=\"0\"></stop>\n               <stop stopColor={gradientStartColor}></stop>\n               <stop offset=\"32.5%\" stopColor={gradientStopColor}></stop>\n               <stop\n                  offset=\"100%\"\n                  stopColor={gradientStopColor}\n                  stopOpacity=\"0\"\n               >\n               </stop>\n            </motion.linearGradient>\n         </defs>\n      </svg>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport type { RefObject } from \"react\"\nimport { useEffect, useId, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\nexport interface AnimatedBeamProps {\n   className?: string\n   containerRef: RefObject<HTMLElement> // Container ref\n   fromRef: RefObject<HTMLElement>\n   toRef: RefObject<HTMLElement>\n   curvature?: number\n   reverse?: boolean\n   pathColor?: string\n   pathWidth?: number\n   pathOpacity?: number\n   gradientStartColor?: string\n   gradientStopColor?: string\n   delay?: number\n   duration?: number\n   startXOffset?: number\n   startYOffset?: number\n   endXOffset?: number\n   endYOffset?: number\n}\n\nexport const AnimatedBeam: React.FC<AnimatedBeamProps> = ({\n   className,\n   containerRef,\n   fromRef,\n   toRef,\n   curvature = 0,\n   reverse = false, // Include the reverse prop\n   duration = Math.random() * 3 + 4,\n   delay = 0,\n   pathColor = \"gray\",\n   pathWidth = 2,\n   pathOpacity = 0.2,\n   gradientStartColor = \"#ffaa40\",\n   gradientStopColor = \"#9c40ff\",\n   startXOffset = 0,\n   startYOffset = 0,\n   endXOffset = 0,\n   endYOffset = 0,\n}) => {\n   const id = useId()\n   const [pathD, setPathD] = useState(\"\")\n   const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 })\n\n   // Calculate the gradient coordinates based on the reverse prop\n   const gradientCoordinates = reverse\n      ? {\n           x1: [\"90%\", \"-10%\"],\n           x2: [\"100%\", \"0%\"],\n           y1: [\"0%\", \"0%\"],\n           y2: [\"0%\", \"0%\"],\n        }\n      : {\n           x1: [\"10%\", \"110%\"],\n           x2: [\"0%\", \"100%\"],\n           y1: [\"0%\", \"0%\"],\n           y2: [\"0%\", \"0%\"],\n        }\n\n   useEffect(() => {\n      const updatePath = () => {\n         if (containerRef.current && fromRef.current && toRef.current) {\n            const containerRect = containerRef.current.getBoundingClientRect()\n            const rectA = fromRef.current.getBoundingClientRect()\n            const rectB = toRef.current.getBoundingClientRect()\n\n            const svgWidth = containerRect.width\n            const svgHeight = containerRect.height\n            setSvgDimensions({ width: svgWidth, height: svgHeight })\n\n            const startX =\n               rectA.left - containerRect.left + rectA.width / 2 + startXOffset\n            const startY =\n               rectA.top - containerRect.top + rectA.height / 2 + startYOffset\n            const endX =\n               rectB.left - containerRect.left + rectB.width / 2 + endXOffset\n            const endY =\n               rectB.top - containerRect.top + rectB.height / 2 + endYOffset\n\n            const controlY = startY - curvature\n            const d = `M ${startX},${startY} Q ${\n               (startX + endX) / 2\n            },${controlY} ${endX},${endY}`\n            setPathD(d)\n         }\n      }\n\n      // Initialize ResizeObserver\n      const resizeObserver = new ResizeObserver((entries) => {\n         // For all entries, recalculate the path\n         for (const entry of entries) updatePath()\n      })\n\n      // Observe the container element\n      if (containerRef.current) resizeObserver.observe(containerRef.current)\n\n      // Call the updatePath initially to set the initial path\n      updatePath()\n\n      // Clean up the observer on component unmount\n      return () => {\n         resizeObserver.disconnect()\n      }\n   }, [\n      containerRef,\n      fromRef,\n      toRef,\n      curvature,\n      startXOffset,\n      startYOffset,\n      endXOffset,\n      endYOffset,\n   ])\n\n   return (\n      <svg\n         fill=\"none\"\n         width={svgDimensions.width}\n         height={svgDimensions.height}\n         xmlns=\"http://www.w3.org/2000/svg\"\n         className={ny(\n            \"pointer-events-none absolute left-0 top-0 transform-gpu stroke-2\",\n            className,\n         )}\n         viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}\n      >\n         <path\n            d={pathD}\n            stroke={pathColor}\n            strokeWidth={pathWidth}\n            strokeOpacity={pathOpacity}\n            strokeLinecap=\"round\"\n         />\n         <path\n            d={pathD}\n            strokeWidth={pathWidth}\n            stroke={`url(#${id})`}\n            strokeOpacity=\"1\"\n            strokeLinecap=\"round\"\n         />\n         <defs>\n            <motion.linearGradient\n               className=\"transform-gpu\"\n               id={id}\n               gradientUnits=\"userSpaceOnUse\"\n               initial={{\n                  x1: \"0%\",\n                  x2: \"0%\",\n                  y1: \"0%\",\n                  y2: \"0%\",\n               }}\n               animate={{\n                  x1: gradientCoordinates.x1,\n                  x2: gradientCoordinates.x2,\n                  y1: gradientCoordinates.y1,\n                  y2: gradientCoordinates.y2,\n               }}\n               transition={{\n                  delay,\n                  duration,\n                  ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo\n                  repeat: Number.POSITIVE_INFINITY,\n                  repeatDelay: 0,\n               }}\n            >\n               <stop stopColor={gradientStartColor} stopOpacity=\"0\"></stop>\n               <stop stopColor={gradientStartColor}></stop>\n               <stop offset=\"32.5%\" stopColor={gradientStopColor}></stop>\n               <stop\n                  offset=\"100%\"\n                  stopColor={gradientStopColor}\n                  stopOpacity=\"0\"\n               ></stop>\n            </motion.linearGradient>\n         </defs>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-circular-progress-bar-demo.json b/apps/web/public/r/styles/default/animated-circular-progress-bar-demo.json
index e8c290ac..a01cece8 100644
--- a/apps/web/public/r/styles/default/animated-circular-progress-bar-demo.json
+++ b/apps/web/public/r/styles/default/animated-circular-progress-bar-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-circular-progress-bar-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-circular-progress-bar-demo.tsx",
-      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\n\nimport AnimatedCircularProgressBar from '~/registry/default/ui/animated-circular-progress-bar'\n\nexport default function AnimatedCircularProgressBarDemo() {\n   const [value, setValue] = useState(0)\n\n   useEffect(() => {\n      const handleIncrement = (prev: number) => {\n         if (prev === 100) {\n            return 0\n         }\n         return prev + 10\n      }\n      setValue(handleIncrement)\n      const interval = setInterval(() => setValue(handleIncrement), 2000)\n      return () => clearInterval(interval)\n   }, [])\n\n   return (\n      <AnimatedCircularProgressBar\n         max={100}\n         min={0}\n         value={value}\n         gaugePrimaryColor=\"rgb(79 70 229)\"\n         gaugeSecondaryColor=\"rgba(0, 0, 0, 0.1)\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-circular-progress-bar-demo.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport AnimatedCircularProgressBar from \"~/registry/default/ui/animated-circular-progress-bar\"\n\nexport default function AnimatedCircularProgressBarDemo() {\n   const [value, setValue] = useState(0)\n\n   useEffect(() => {\n      const handleIncrement = (prev: number) => {\n         if (prev === 100) {\n            return 0\n         }\n         return prev + 10\n      }\n      setValue(handleIncrement)\n      const interval = setInterval(() => setValue(handleIncrement), 2000)\n      return () => clearInterval(interval)\n   }, [])\n\n   return (\n      <AnimatedCircularProgressBar\n         max={100}\n         min={0}\n         value={value}\n         gaugePrimaryColor=\"rgb(79 70 229)\"\n         gaugeSecondaryColor=\"rgba(0, 0, 0, 0.1)\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-circular-progress-bar.json b/apps/web/public/r/styles/default/animated-circular-progress-bar.json
index 76287d99..d9b4c4bd 100644
--- a/apps/web/public/r/styles/default/animated-circular-progress-bar.json
+++ b/apps/web/public/r/styles/default/animated-circular-progress-bar.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-circular-progress-bar",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/animated-circular-progress-bar.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\ninterface Props {\n   max: number\n   value: number\n   min: number\n   gaugePrimaryColor: string\n   gaugeSecondaryColor: string\n   className?: string\n}\n\nexport default function AnimatedCircularProgressBar({\n   max = 100,\n   min = 0,\n   value = 0,\n   gaugePrimaryColor,\n   gaugeSecondaryColor,\n   className,\n}: Props) {\n   const circumference = 2 * Math.PI * 45\n   const percentPx = circumference / 100\n   const currentPercent = Math.round(((value - min) / (max - min)) * 100)\n\n   return (\n      <div\n         className={ny('relative size-40 text-2xl font-semibold', className)}\n         style={\n            {\n               '--circle-size': '100px',\n               '--circumference': circumference,\n               '--percent-to-px': `${percentPx}px`,\n               '--gap-percent': '5',\n               '--offset-factor': '0',\n               '--transition-length': '1s',\n               '--transition-step': '200ms',\n               '--delay': '0s',\n               '--percent-to-deg': '3.6deg',\n               'transform': 'translateZ(0)',\n            } as React.CSSProperties\n         }\n      >\n         <svg\n            fill=\"none\"\n            className=\"size-full\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 100 100\"\n         >\n            {currentPercent <= 90 && currentPercent >= 0 && (\n               <circle\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"45\"\n                  strokeWidth=\"10\"\n                  strokeDashoffset=\"0\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\" opacity-100\"\n                  style={\n                     {\n                        'stroke': gaugeSecondaryColor,\n                        '--stroke-percent': 90 - currentPercent,\n                        '--offset-factor-secondary': 'calc(1 - var(--offset-factor))',\n                        'strokeDasharray':\n                  'calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)',\n                        'transform':\n                  'rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)',\n                        'transition': 'all var(--transition-length) ease var(--delay)',\n                        'transformOrigin':\n                  'calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)',\n                     } as React.CSSProperties\n                  }\n               />\n            )}\n            <circle\n               cx=\"50\"\n               cy=\"50\"\n               r=\"45\"\n               strokeWidth=\"10\"\n               strokeDashoffset=\"0\"\n               strokeLinecap=\"round\"\n               strokeLinejoin=\"round\"\n               className=\"opacity-100\"\n               style={\n                  {\n                     'stroke': gaugePrimaryColor,\n                     '--stroke-percent': currentPercent,\n                     'strokeDasharray':\n                'calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)',\n                     'transition':\n                'var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)',\n                     'transitionProperty': 'stroke-dasharray,transform',\n                     'transform':\n                'rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))',\n                     'transformOrigin':\n                'calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)',\n                  } as React.CSSProperties\n               }\n            />\n         </svg>\n         <span\n            data-current-value={currentPercent}\n            className=\"animate-in fade-in absolute inset-0 m-auto size-fit delay-[var(--delay)] duration-[var(--transition-length)] ease-linear\"\n         >\n            {currentPercent}\n         </span>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/lib/utils\"\n\ninterface Props {\n   max: number\n   value: number\n   min: number\n   gaugePrimaryColor: string\n   gaugeSecondaryColor: string\n   className?: string\n}\n\nexport default function AnimatedCircularProgressBar({\n   max = 100,\n   min = 0,\n   value = 0,\n   gaugePrimaryColor,\n   gaugeSecondaryColor,\n   className,\n}: Props) {\n   const circumference = 2 * Math.PI * 45\n   const percentPx = circumference / 100\n   const currentPercent = Math.round(((value - min) / (max - min)) * 100)\n\n   return (\n      <div\n         className={ny(\"relative size-40 text-2xl font-semibold\", className)}\n         style={\n            {\n               \"--circle-size\": \"100px\",\n               \"--circumference\": circumference,\n               \"--percent-to-px\": `${percentPx}px`,\n               \"--gap-percent\": \"5\",\n               \"--offset-factor\": \"0\",\n               \"--transition-length\": \"1s\",\n               \"--transition-step\": \"200ms\",\n               \"--delay\": \"0s\",\n               \"--percent-to-deg\": \"3.6deg\",\n               transform: \"translateZ(0)\",\n            } as React.CSSProperties\n         }\n      >\n         <svg\n            fill=\"none\"\n            className=\"size-full\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 100 100\"\n         >\n            {currentPercent <= 90 && currentPercent >= 0 && (\n               <circle\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"45\"\n                  strokeWidth=\"10\"\n                  strokeDashoffset=\"0\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\" opacity-100\"\n                  style={\n                     {\n                        stroke: gaugeSecondaryColor,\n                        \"--stroke-percent\": 90 - currentPercent,\n                        \"--offset-factor-secondary\":\n                           \"calc(1 - var(--offset-factor))\",\n                        strokeDasharray:\n                           \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n                        transform:\n                           \"rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)\",\n                        transition:\n                           \"all var(--transition-length) ease var(--delay)\",\n                        transformOrigin:\n                           \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n                     } as React.CSSProperties\n                  }\n               />\n            )}\n            <circle\n               cx=\"50\"\n               cy=\"50\"\n               r=\"45\"\n               strokeWidth=\"10\"\n               strokeDashoffset=\"0\"\n               strokeLinecap=\"round\"\n               strokeLinejoin=\"round\"\n               className=\"opacity-100\"\n               style={\n                  {\n                     stroke: gaugePrimaryColor,\n                     \"--stroke-percent\": currentPercent,\n                     strokeDasharray:\n                        \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n                     transition:\n                        \"var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)\",\n                     transitionProperty: \"stroke-dasharray,transform\",\n                     transform:\n                        \"rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))\",\n                     transformOrigin:\n                        \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n                  } as React.CSSProperties\n               }\n            />\n         </svg>\n         <span\n            data-current-value={currentPercent}\n            className=\"animate-in fade-in absolute inset-0 m-auto size-fit delay-[var(--delay)] duration-[var(--transition-length)] ease-linear\"\n         >\n            {currentPercent}\n         </span>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-feature-card-1.json b/apps/web/public/r/styles/default/animated-feature-card-1.json
index 8319b692..3ea723cb 100644
--- a/apps/web/public/r/styles/default/animated-feature-card-1.json
+++ b/apps/web/public/r/styles/default/animated-feature-card-1.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-1",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-1.tsx",
-      "content": "'use client'\n\nimport { motion } from 'framer-motion'\n\nexport default function FeatureCard1() {\n   const variant1 = {\n      initial: {\n         scale: 0.87,\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: 'linear',\n         },\n      },\n      whileHover: {\n         scale: 0.8,\n         boxShadow:\n        'rgba(245,40,145,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: 'linear',\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: -27,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: 'linear',\n         },\n      },\n      whileHover: {\n         y: -55,\n         scale: 0.87,\n         boxShadow:\n        'rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: 'linear',\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         y: -25,\n         opacity: 0,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: 'linear',\n         },\n      },\n      whileHover: {\n         y: -45,\n         opacity: 1,\n         scale: 1,\n         boxShadow:\n        'rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: 'easeInOut',\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 p-10\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"z-[1] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"z-[2] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jane\"\n                           alt=\"jane\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant3}\n                     className=\"absolute bottom-0 z-[3] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jill\"\n                           alt=\"jill\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Notifications</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Instantly get notified about events\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-1.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\n\nexport default function FeatureCard1() {\n   const variant1 = {\n      initial: {\n         scale: 0.87,\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n      whileHover: {\n         scale: 0.8,\n         boxShadow:\n            \"rgba(245,40,145,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: -27,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n      whileHover: {\n         y: -55,\n         scale: 0.87,\n         boxShadow:\n            \"rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         y: -25,\n         opacity: 0,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n      whileHover: {\n         y: -45,\n         opacity: 1,\n         scale: 1,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"easeInOut\",\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 p-10\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"z-[1] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"z-[2] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jane\"\n                           alt=\"jane\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant3}\n                     className=\"absolute bottom-0 z-[3] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jill\"\n                           alt=\"jill\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Notifications</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Instantly get notified about events\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-feature-card-10.json b/apps/web/public/r/styles/default/animated-feature-card-10.json
index 77575a4b..30259a3d 100644
--- a/apps/web/public/r/styles/default/animated-feature-card-10.json
+++ b/apps/web/public/r/styles/default/animated-feature-card-10.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-10",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-10.tsx",
-      "content": "'use client'\n\nimport {\n   AnimatePresence,\n   cubicBezier,\n   motion,\n   useAnimation,\n   useInView,\n} from 'framer-motion'\nimport { useEffect, useRef } from 'react'\n\nconst cardImage = [\n   {\n      id: 1,\n      title: 'Tom',\n      link: '#',\n      image: 'https://avatar.vercel.sh/tom',\n   },\n   {\n      id: 2,\n      title: 'Chris',\n      link: '#',\n      image: 'https://avatar.vercel.sh/chris',\n   },\n   {\n      id: 3,\n      title: 'PJ',\n      link: '#',\n      image: 'https://avatar.vercel.sh/pj',\n   },\n   {\n      id: 4,\n      title: 'Scott',\n      link: '#',\n      image: 'https://avatar.vercel.sh/scott',\n   },\n   {\n      id: 5,\n      title: 'Yehuda',\n      link: '#',\n      image: 'https://avatar.vercel.sh/yehuda',\n   },\n   {\n      id: 6,\n      title: 'Ezra',\n      link: '#',\n      image: 'https://avatar.vercel.sh/ezra',\n   },\n   {\n      id: 7,\n      title: 'Ivey',\n      link: '#',\n      image: 'https://avatar.vercel.sh/ivey',\n   },\n   {\n      id: 8,\n      title: 'Evan',\n      link: '#',\n      image: 'https://avatar.vercel.sh/evan',\n   },\n   {\n      id: 9,\n      title: 'Van',\n      link: '#',\n      image: 'https://avatar.vercel.sh/van',\n   },\n]\n\nexport default function FeatureCard10() {\n   const containerRef = useRef(null)\n   const inView = useInView(containerRef, { amount: 0.25 })\n   const controls = useAnimation()\n\n   useEffect(() => {\n      if (inView)\n         controls.start('visible')\n      else controls.start('hidden')\n   }, [inView, controls])\n\n   return (\n      <div className=\"flex h-full transform-gpu flex-col items-center justify-between gap-5 rounded-lg border border-neutral-200 bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] xl:flex-row dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <div className=\"flex w-full flex-col items-start justify-between gap-y-10 p-10 xl:h-full xl:w-1/2\">\n            <h2 className=\"text-3xl font-semibold\">\n               Nyxb UI let's you build amazing websites with all your friends.\n            </h2>\n            <a\n               href=\"#\"\n               className=\"text-base font-normal text-gray-500 underline-offset-4 transition-all hover:underline\"\n            >\n               Check out our showcase\n            </a>\n         </div>\n         <div className=\"relative w-full overflow-hidden xl:w-1/2\">\n            <div className=\"pointer-events-none absolute inset-x-0 top-0 z-10 h-1/3 bg-gradient-to-b from-white dark:from-black\"></div>\n            <div\n               ref={containerRef}\n               className=\"relative -right-[50px] -top-[100px] grid max-h-[450px] grid-cols-3 gap-5 [transform:rotate(-15deg)translateZ(10px);]\"\n            >\n               <AnimatePresence>\n                  {cardImage.map((card, index) => (\n                     <motion.div\n                        variants={{\n                           hidden: { opacity: 0, scale: 0.96, y: 25 },\n                           visible: { opacity: 1, scale: 1, y: 0 },\n                        }}\n                        initial=\"hidden\"\n                        animate={controls}\n                        exit={{\n                           opacity: 0,\n                           scale: 0,\n                           transition: {\n                              duration: 0.1,\n                              ease: cubicBezier(0.22, 1, 0.36, 1),\n                           },\n                        }}\n                        transition={{\n                           duration: 0.2,\n                           ease: cubicBezier(0.22, 1, 0.36, 1),\n                           delay: index * 0.04,\n                        }}\n                        key={card.id}\n                        className=\"flex flex-col items-center gap-y-2 rounded-md border bg-white/5 p-5\"\n                     >\n                        <img\n                           src={card.image}\n                           alt={card.title}\n                           className=\"size-20 rounded-full object-cover\"\n                        />\n                        <p className=\"text-sm dark:text-neutral-200/50\">{card.title}</p>\n                        <a\n                           href={card.link}\n                           className=\"rounded-md border border-neutral-700/50 bg-neutral-600 p-2 py-0.5 text-white shadow-xl drop-shadow-lg hover:bg-neutral-500 dark:border-neutral-400/20 dark:bg-gray-500\"\n                        >\n                           Website\n                        </a>\n                     </motion.div>\n                  ))}\n               </AnimatePresence>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-10.tsx",
+      "content": "\"use client\"\n\nimport {\n   AnimatePresence,\n   cubicBezier,\n   motion,\n   useAnimation,\n   useInView,\n} from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\n\nconst cardImage = [\n   {\n      id: 1,\n      title: \"Tom\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/tom\",\n   },\n   {\n      id: 2,\n      title: \"Chris\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/chris\",\n   },\n   {\n      id: 3,\n      title: \"PJ\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/pj\",\n   },\n   {\n      id: 4,\n      title: \"Scott\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/scott\",\n   },\n   {\n      id: 5,\n      title: \"Yehuda\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/yehuda\",\n   },\n   {\n      id: 6,\n      title: \"Ezra\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/ezra\",\n   },\n   {\n      id: 7,\n      title: \"Ivey\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/ivey\",\n   },\n   {\n      id: 8,\n      title: \"Evan\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/evan\",\n   },\n   {\n      id: 9,\n      title: \"Van\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/van\",\n   },\n]\n\nexport default function FeatureCard10() {\n   const containerRef = useRef(null)\n   const inView = useInView(containerRef, { amount: 0.25 })\n   const controls = useAnimation()\n\n   useEffect(() => {\n      if (inView) controls.start(\"visible\")\n      else controls.start(\"hidden\")\n   }, [inView, controls])\n\n   return (\n      <div className=\"flex h-full transform-gpu flex-col items-center justify-between gap-5 rounded-lg border border-neutral-200 bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] xl:flex-row dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <div className=\"flex w-full flex-col items-start justify-between gap-y-10 p-10 xl:h-full xl:w-1/2\">\n            <h2 className=\"text-3xl font-semibold\">\n               Nyxb UI let's you build amazing websites with all your friends.\n            </h2>\n            <a\n               href=\"#\"\n               className=\"text-base font-normal text-gray-500 underline-offset-4 transition-all hover:underline\"\n            >\n               Check out our showcase\n            </a>\n         </div>\n         <div className=\"relative w-full overflow-hidden xl:w-1/2\">\n            <div className=\"pointer-events-none absolute inset-x-0 top-0 z-10 h-1/3 bg-gradient-to-b from-white dark:from-black\"></div>\n            <div\n               ref={containerRef}\n               className=\"relative -right-[50px] -top-[100px] grid max-h-[450px] grid-cols-3 gap-5 [transform:rotate(-15deg)translateZ(10px);]\"\n            >\n               <AnimatePresence>\n                  {cardImage.map((card, index) => (\n                     <motion.div\n                        variants={{\n                           hidden: { opacity: 0, scale: 0.96, y: 25 },\n                           visible: { opacity: 1, scale: 1, y: 0 },\n                        }}\n                        initial=\"hidden\"\n                        animate={controls}\n                        exit={{\n                           opacity: 0,\n                           scale: 0,\n                           transition: {\n                              duration: 0.1,\n                              ease: cubicBezier(0.22, 1, 0.36, 1),\n                           },\n                        }}\n                        transition={{\n                           duration: 0.2,\n                           ease: cubicBezier(0.22, 1, 0.36, 1),\n                           delay: index * 0.04,\n                        }}\n                        key={card.id}\n                        className=\"flex flex-col items-center gap-y-2 rounded-md border bg-white/5 p-5\"\n                     >\n                        <img\n                           src={card.image}\n                           alt={card.title}\n                           className=\"size-20 rounded-full object-cover\"\n                        />\n                        <p className=\"text-sm dark:text-neutral-200/50\">\n                           {card.title}\n                        </p>\n                        <a\n                           href={card.link}\n                           className=\"rounded-md border border-neutral-700/50 bg-neutral-600 p-2 py-0.5 text-white shadow-xl drop-shadow-lg hover:bg-neutral-500 dark:border-neutral-400/20 dark:bg-gray-500\"\n                        >\n                           Website\n                        </a>\n                     </motion.div>\n                  ))}\n               </AnimatePresence>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-feature-card-2.json b/apps/web/public/r/styles/default/animated-feature-card-2.json
index fd1bcdb6..6722c42a 100644
--- a/apps/web/public/r/styles/default/animated-feature-card-2.json
+++ b/apps/web/public/r/styles/default/animated-feature-card-2.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-2",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-2.tsx",
-      "content": "'use client'\n\nimport { cubicBezier, motion } from 'framer-motion'\nimport { Clock, Download, MessageCircle, Star } from 'lucide-react'\n\nconst texts = [\n   {\n      id: 1,\n      header: 'New Feature Release.',\n      subheader: 'Experience our app\\'s latest features now.',\n      icon: <Star />,\n   },\n   {\n      id: 2,\n      header: 'App Update Available.',\n      subheader:\n      'A new update is available for download. Get the latest version!',\n      icon: <Download />,\n   },\n   {\n      id: 3,\n      header: 'Scheduled Maintenance.',\n      subheader:\n      'Our app will be temporarily unavailable due to scheduled maintenance.',\n      icon: <Clock />,\n   },\n   {\n      id: 4,\n      header: 'Feedback Appreciated.',\n      subheader:\n      'We\\'d love to hear your thoughts on our app. Share your feedback!',\n      icon: <MessageCircle />,\n   },\n]\n\nexport default function FeatureCard2() {\n   const itemVariants = {\n      initial: (index: number) => ({\n         y: 0,\n         scale: index === 3 ? 0.85 : 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      }),\n      whileHover: (index: number) => ({\n         y: -110,\n         opacity: 1,\n         scale: index === 0 ? 0.85 : index === 3 ? 1 : 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      }),\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl\">\n               <motion.div className=\"flex h-[310px] w-full cursor-pointer flex-col gap-y-5 overflow-hidden rounded-t-md p-5\">\n                  {texts.map((text, index) => (\n                     <motion.div\n                        key={text.id}\n                        className=\"w-full origin-right rounded-md  border border-slate-300/50 p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                        custom={index}\n                        variants={itemVariants}\n                     >\n                        <div className=\"flex flex-row gap-2\">\n                           {text.icon}\n                           <p className=\"text-black dark:text-white\">{text.header}</p>\n                        </div>\n                        <p className=\"text-gray-400 dark:text-gray-400\">\n                           {text.subheader}\n                        </p>\n                     </motion.div>\n                  ))}\n               </motion.div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Notifications</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Instantly get notified about events\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-2.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\nimport { Clock, Download, MessageCircle, Star } from \"lucide-react\"\n\nconst texts = [\n   {\n      id: 1,\n      header: \"New Feature Release.\",\n      subheader: \"Experience our app's latest features now.\",\n      icon: <Star />,\n   },\n   {\n      id: 2,\n      header: \"App Update Available.\",\n      subheader:\n         \"A new update is available for download. Get the latest version!\",\n      icon: <Download />,\n   },\n   {\n      id: 3,\n      header: \"Scheduled Maintenance.\",\n      subheader:\n         \"Our app will be temporarily unavailable due to scheduled maintenance.\",\n      icon: <Clock />,\n   },\n   {\n      id: 4,\n      header: \"Feedback Appreciated.\",\n      subheader:\n         \"We'd love to hear your thoughts on our app. Share your feedback!\",\n      icon: <MessageCircle />,\n   },\n]\n\nexport default function FeatureCard2() {\n   const itemVariants = {\n      initial: (index: number) => ({\n         y: 0,\n         scale: index === 3 ? 0.85 : 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      }),\n      whileHover: (index: number) => ({\n         y: -110,\n         opacity: 1,\n         scale: index === 0 ? 0.85 : index === 3 ? 1 : 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      }),\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl\">\n               <motion.div className=\"flex h-[310px] w-full cursor-pointer flex-col gap-y-5 overflow-hidden rounded-t-md p-5\">\n                  {texts.map((text, index) => (\n                     <motion.div\n                        key={text.id}\n                        className=\"w-full origin-right rounded-md  border border-slate-300/50 p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                        custom={index}\n                        variants={itemVariants}\n                     >\n                        <div className=\"flex flex-row gap-2\">\n                           {text.icon}\n                           <p className=\"text-black dark:text-white\">\n                              {text.header}\n                           </p>\n                        </div>\n                        <p className=\"text-gray-400 dark:text-gray-400\">\n                           {text.subheader}\n                        </p>\n                     </motion.div>\n                  ))}\n               </motion.div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Notifications</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Instantly get notified about events\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-feature-card-3.json b/apps/web/public/r/styles/default/animated-feature-card-3.json
index 77cdd82e..c148afcf 100644
--- a/apps/web/public/r/styles/default/animated-feature-card-3.json
+++ b/apps/web/public/r/styles/default/animated-feature-card-3.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-3",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-3.tsx",
-      "content": "'use client'\n\nimport { cubicBezier, motion } from 'framer-motion'\n\nexport default function FeatureCard3() {\n   const variant1 = {\n      initial: {\n         y: 4,\n         scale: 0.5,\n         opacity: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -2,\n         opacity: 1,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: -2,\n         opacity: 1,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 8,\n         opacity: 1,\n         scale: 1.05,\n         boxShadow:\n        'rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <motion.div className=\"flex size-full cursor-pointer flex-col items-center justify-center gap-y-2 overflow-hidden rounded-t-xl p-8\">\n               <motion.p\n                  variants={variant1}\n                  className=\"w-fit rounded-full border px-2 text-[15px]\"\n               >\n                  Make it Pop ✨\n               </motion.p>\n               <motion.div\n                  variants={variant2}\n                  className=\"flex max-w-[300px] items-start gap-x-2 rounded-lg border border-neutral-300 border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n               >\n                  <div className=\"flex size-6 shrink-0 rounded-full bg-blue-500\">\n                     <img\n                        className=\"size-full rounded-full object-cover\"\n                        src=\"https://avatar.vercel.sh/jane\"\n                        alt=\"jane\"\n                     />\n                  </div>\n                  <div>\n                     <h3 className=\"text-base font-semibold\">Josh</h3>\n                     <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n                     </p>\n                  </div>\n               </motion.div>\n            </motion.div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">AI Co-Pilot</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Use AI to make your writing stand out\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-3.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard3() {\n   const variant1 = {\n      initial: {\n         y: 4,\n         scale: 0.5,\n         opacity: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -2,\n         opacity: 1,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: -2,\n         opacity: 1,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 8,\n         opacity: 1,\n         scale: 1.05,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <motion.div className=\"flex size-full cursor-pointer flex-col items-center justify-center gap-y-2 overflow-hidden rounded-t-xl p-8\">\n               <motion.p\n                  variants={variant1}\n                  className=\"w-fit rounded-full border px-2 text-[15px]\"\n               >\n                  Make it Pop ✨\n               </motion.p>\n               <motion.div\n                  variants={variant2}\n                  className=\"flex max-w-[300px] items-start gap-x-2 rounded-lg border border-neutral-300 border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n               >\n                  <div className=\"flex size-6 shrink-0 rounded-full bg-blue-500\">\n                     <img\n                        className=\"size-full rounded-full object-cover\"\n                        src=\"https://avatar.vercel.sh/jane\"\n                        alt=\"jane\"\n                     />\n                  </div>\n                  <div>\n                     <h3 className=\"text-base font-semibold\">Josh</h3>\n                     <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n                     </p>\n                  </div>\n               </motion.div>\n            </motion.div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">AI Co-Pilot</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Use AI to make your writing stand out\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-feature-card-4.json b/apps/web/public/r/styles/default/animated-feature-card-4.json
index 3499e8be..3023b88f 100644
--- a/apps/web/public/r/styles/default/animated-feature-card-4.json
+++ b/apps/web/public/r/styles/default/animated-feature-card-4.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-4",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-4.tsx",
-      "content": "'use client'\n\nimport { cubicBezier, motion } from 'framer-motion'\n\nexport default function FeatureCard4() {\n   const variant1 = {\n      initial: {\n         x: 35,\n         y: 5,\n         scale: 0.8,\n         rotate: -3,\n         zIndex: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 0,\n         y: 0,\n         scale: 1,\n         rotate: 0,\n         boxShadow:\n        'rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         scale: 1.1,\n         zIndex: 2,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         scale: 1,\n         boxShadow:\n        'rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         x: -35,\n         y: 5,\n         scale: 0.8,\n         rotate: 3,\n         zIndex: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 0,\n         y: 0,\n         scale: 1,\n         rotate: 0,\n         boxShadow:\n        'rgba(245,40,145,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl bg-transparent p-10\">\n               <motion.div className=\"flex h-[230px] w-full items-center justify-between gap-x-4\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"z-[3] flex h-fit w-full  flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/christina\"\n                           alt=\"christina\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant3}\n                     className=\"z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/joshua\"\n                           alt=\"joshua\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n               </motion.div>\n            </div>\n\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Social</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Write once, share with your friends\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-4.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard4() {\n   const variant1 = {\n      initial: {\n         x: 35,\n         y: 5,\n         scale: 0.8,\n         rotate: -3,\n         zIndex: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 0,\n         y: 0,\n         scale: 1,\n         rotate: 0,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         scale: 1.1,\n         zIndex: 2,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         scale: 1,\n         boxShadow:\n            \"rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         x: -35,\n         y: 5,\n         scale: 0.8,\n         rotate: 3,\n         zIndex: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 0,\n         y: 0,\n         scale: 1,\n         rotate: 0,\n         boxShadow:\n            \"rgba(245,40,145,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl bg-transparent p-10\">\n               <motion.div className=\"flex h-[230px] w-full items-center justify-between gap-x-4\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"z-[3] flex h-fit w-full  flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/christina\"\n                           alt=\"christina\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant3}\n                     className=\"z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/joshua\"\n                           alt=\"joshua\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n               </motion.div>\n            </div>\n\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Social</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Write once, share with your friends\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-feature-card-5.json b/apps/web/public/r/styles/default/animated-feature-card-5.json
index cc50f1ab..aedcd948 100644
--- a/apps/web/public/r/styles/default/animated-feature-card-5.json
+++ b/apps/web/public/r/styles/default/animated-feature-card-5.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-5",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-5.tsx",
-      "content": "'use client'\n\nimport { cubicBezier, motion } from 'framer-motion'\n\nexport default function FeatureCard5() {\n   const variant1 = {\n      initial: {\n         viewBox: '0 -950 366 1408',\n         filter: 'saturate(0.3)',\n         opacity: 0.5,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         viewBox: '0 -60 366 310',\n         filter: 'saturate(1)',\n         opacity: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"relative flex size-full cursor-pointer items-center justify-center overflow-hidden rounded-t-xl bg-transparent p-10\">\n               <div className=\"relative h-[150px] w-full cursor-pointer overflow-hidden rounded-xl border border-slate-200/50 bg-white dark:border-neutral-700/50 dark:bg-neutral-900\">\n                  <motion.p\n                     variants={variant2}\n                     className=\"absolute left-5 top-5 w-fit text-[15px]\"\n                  >\n                     +245%\n                  </motion.p>\n                  <motion.svg\n                     variants={variant1}\n                     xmlns=\"http://www.w3.org/2000/svg\"\n                     fill=\"none\"\n                     preserveAspectRatio=\"none\"\n                     className=\"absolute inset-0 size-full\"\n                     viewBox=\"0 -950 366 1408\"\n                  >\n                     <path\n                        fill=\"url(#a)\"\n                        d=\"M0 193c109.5 0 260.5-52.5 366-192.5v907H0V193Z\"\n                     />\n                     <defs>\n                        <linearGradient\n                           id=\"a\"\n                           x1={183}\n                           x2={183}\n                           y1={0.5}\n                           y2={262}\n                           gradientUnits=\"userSpaceOnUse\"\n                        >\n                           <stop stopColor=\"#22c55e\" />\n                           <stop offset={1} stopColor=\"#15803d\" />\n                        </linearGradient>\n                     </defs>\n                  </motion.svg>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Growth</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Invest and watch your money grow\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-5.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard5() {\n   const variant1 = {\n      initial: {\n         viewBox: \"0 -950 366 1408\",\n         filter: \"saturate(0.3)\",\n         opacity: 0.5,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         viewBox: \"0 -60 366 310\",\n         filter: \"saturate(1)\",\n         opacity: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"relative flex size-full cursor-pointer items-center justify-center overflow-hidden rounded-t-xl bg-transparent p-10\">\n               <div className=\"relative h-[150px] w-full cursor-pointer overflow-hidden rounded-xl border border-slate-200/50 bg-white dark:border-neutral-700/50 dark:bg-neutral-900\">\n                  <motion.p\n                     variants={variant2}\n                     className=\"absolute left-5 top-5 w-fit text-[15px]\"\n                  >\n                     +245%\n                  </motion.p>\n                  <motion.svg\n                     variants={variant1}\n                     xmlns=\"http://www.w3.org/2000/svg\"\n                     fill=\"none\"\n                     preserveAspectRatio=\"none\"\n                     className=\"absolute inset-0 size-full\"\n                     viewBox=\"0 -950 366 1408\"\n                  >\n                     <path\n                        fill=\"url(#a)\"\n                        d=\"M0 193c109.5 0 260.5-52.5 366-192.5v907H0V193Z\"\n                     />\n                     <defs>\n                        <linearGradient\n                           id=\"a\"\n                           x1={183}\n                           x2={183}\n                           y1={0.5}\n                           y2={262}\n                           gradientUnits=\"userSpaceOnUse\"\n                        >\n                           <stop stopColor=\"#22c55e\" />\n                           <stop offset={1} stopColor=\"#15803d\" />\n                        </linearGradient>\n                     </defs>\n                  </motion.svg>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Growth</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Invest and watch your money grow\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-feature-card-6.json b/apps/web/public/r/styles/default/animated-feature-card-6.json
index 0190382b..53f603fd 100644
--- a/apps/web/public/r/styles/default/animated-feature-card-6.json
+++ b/apps/web/public/r/styles/default/animated-feature-card-6.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-6",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-6.tsx",
-      "content": "'use client'\n\nimport { cubicBezier, motion } from 'framer-motion'\n\nexport default function FeatureCard6() {\n   const variant1 = {\n      initial: {\n         y: 0,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 25,\n         x: 10,\n         scale: 1,\n         rotate: -2,\n         boxShadow:\n        'rgba(39,127,245,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 0,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -25,\n         x: -10,\n         scale: 1,\n         rotate: 3,\n         boxShadow:\n        'rgba(39,245,76,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex h-[300px] w-full items-center justify-center rounded-t-xl bg-transparent \">\n               <div className=\"relative flex cursor-pointer flex-col items-center justify-center gap-y-2 p-14\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"dark:bg-neutral-980 z-[3] flex size-full items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"absolute bottom-14 z-[2] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Share</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Share results with your friends\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-6.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard6() {\n   const variant1 = {\n      initial: {\n         y: 0,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 25,\n         x: 10,\n         scale: 1,\n         rotate: -2,\n         boxShadow:\n            \"rgba(39,127,245,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 0,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -25,\n         x: -10,\n         scale: 1,\n         rotate: 3,\n         boxShadow:\n            \"rgba(39,245,76,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex h-[300px] w-full items-center justify-center rounded-t-xl bg-transparent \">\n               <div className=\"relative flex cursor-pointer flex-col items-center justify-center gap-y-2 p-14\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"dark:bg-neutral-980 z-[3] flex size-full items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"absolute bottom-14 z-[2] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Share</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Share results with your friends\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-feature-card-7.json b/apps/web/public/r/styles/default/animated-feature-card-7.json
index 0f1a1223..c24f4db1 100644
--- a/apps/web/public/r/styles/default/animated-feature-card-7.json
+++ b/apps/web/public/r/styles/default/animated-feature-card-7.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-7",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-7.tsx",
-      "content": "'use client'\n\nimport { motion, useAnimation, useInView } from 'framer-motion'\nimport {\n   BarChart,\n   File,\n   Globe,\n   HeartHandshake,\n   Rss,\n   Shield,\n} from 'lucide-react'\nimport { useEffect, useId, useRef, useState } from 'react'\nimport Marquee from '~/registry/default/ui/marquee'\nimport { ny } from '~/lib/utils'\n\nconst tiles = [\n   {\n      icon: <HeartHandshake className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Globe className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <File className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-green-500 via-teal-500 to-emerald-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Shield className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Rss className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <BarChart className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-gray-600 via-gray-500 to-gray-400 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n]\n\nfunction shuffleArray(array: any[]) {\n   let currentIndex = array.length\n   let randomIndex\n   // While there remain elements to shuffle.\n   while (currentIndex !== 0) {\n      // Pick a remaining element.\n      randomIndex = Math.floor(Math.random() * currentIndex)\n      currentIndex--;\n      // And swap it with the current element.\n      [array[currentIndex], array[randomIndex]] = [\n         array[randomIndex],\n         array[currentIndex],\n      ]\n   }\n   return array\n}\n\nfunction Card(card: { icon: JSX.Element, bg: JSX.Element }) {\n   const id = useId()\n   const controls = useAnimation()\n   const ref = useRef(null)\n   const inView = useInView(ref, { once: true })\n\n   useEffect(() => {\n      if (inView) {\n         controls.start({\n            opacity: 1,\n            transition: { delay: Math.random() * 2, ease: 'easeOut', duration: 1 },\n         })\n      }\n   }, [controls, inView])\n\n   return (\n      <motion.div\n         key={id}\n         ref={ref}\n         initial={{ opacity: 0 }}\n         animate={controls}\n         className={ny(\n            'relative size-20 cursor-pointer overflow-hidden rounded-2xl border p-4',\n            // light styles\n            'bg-white',\n            // dark styles\n            'transform-gpu dark:bg-transparent dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',\n         )}\n      >\n         {card.icon}\n         {card.bg}\n      </motion.div>\n   )\n}\n\nexport default function FeatureCard7() {\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n   const [randomTiles1] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles2] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles3] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles4] = useState(() => shuffleArray([...tiles]))\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"group relative flex h-[300px] w-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl p-4\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 px-10\">\n                  <Marquee\n                     reverse\n                     className=\"-delay-[200ms] [--duration:20s]\"\n                     repeat={4}\n                  >\n                     {randomTiles1.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee reverse className=\"[--duration:30s]\" repeat={4}>\n                     {randomTiles2.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee\n                     reverse\n                     className=\"-delay-[200ms] [--duration:20s]\"\n                     repeat={4}\n                  >\n                     {randomTiles3.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee reverse className=\"[--duration:30s]\" repeat={4}>\n                     {randomTiles4.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n                  <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Integrations</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Integrate with all your favourite apps\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-7.tsx",
+      "content": "\"use client\"\n\nimport { motion, useAnimation, useInView } from \"framer-motion\"\nimport {\n   BarChart,\n   File,\n   Globe,\n   HeartHandshake,\n   Rss,\n   Shield,\n} from \"lucide-react\"\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\nimport Marquee from \"~/registry/default/ui/marquee\"\n\nconst tiles = [\n   {\n      icon: <HeartHandshake className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Globe className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <File className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-green-500 via-teal-500 to-emerald-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Shield className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Rss className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <BarChart className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-gray-600 via-gray-500 to-gray-400 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n]\n\nfunction shuffleArray(array: any[]) {\n   let currentIndex = array.length\n   let randomIndex\n   // While there remain elements to shuffle.\n   while (currentIndex !== 0) {\n      // Pick a remaining element.\n      randomIndex = Math.floor(Math.random() * currentIndex)\n      currentIndex--\n      // And swap it with the current element.\n      ;[array[currentIndex], array[randomIndex]] = [\n         array[randomIndex],\n         array[currentIndex],\n      ]\n   }\n   return array\n}\n\nfunction Card(card: { icon: JSX.Element; bg: JSX.Element }) {\n   const id = useId()\n   const controls = useAnimation()\n   const ref = useRef(null)\n   const inView = useInView(ref, { once: true })\n\n   useEffect(() => {\n      if (inView) {\n         controls.start({\n            opacity: 1,\n            transition: {\n               delay: Math.random() * 2,\n               ease: \"easeOut\",\n               duration: 1,\n            },\n         })\n      }\n   }, [controls, inView])\n\n   return (\n      <motion.div\n         key={id}\n         ref={ref}\n         initial={{ opacity: 0 }}\n         animate={controls}\n         className={ny(\n            \"relative size-20 cursor-pointer overflow-hidden rounded-2xl border p-4\",\n            // light styles\n            \"bg-white\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         {card.icon}\n         {card.bg}\n      </motion.div>\n   )\n}\n\nexport default function FeatureCard7() {\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n   const [randomTiles1] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles2] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles3] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles4] = useState(() => shuffleArray([...tiles]))\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"group relative flex h-[300px] w-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl p-4\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 px-10\">\n                  <Marquee\n                     reverse\n                     className=\"-delay-[200ms] [--duration:20s]\"\n                     repeat={4}\n                  >\n                     {randomTiles1.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee reverse className=\"[--duration:30s]\" repeat={4}>\n                     {randomTiles2.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee\n                     reverse\n                     className=\"-delay-[200ms] [--duration:20s]\"\n                     repeat={4}\n                  >\n                     {randomTiles3.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee reverse className=\"[--duration:30s]\" repeat={4}>\n                     {randomTiles4.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n                  <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Integrations</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Integrate with all your favourite apps\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-feature-card-8.json b/apps/web/public/r/styles/default/animated-feature-card-8.json
index 05603aa1..75106a6f 100644
--- a/apps/web/public/r/styles/default/animated-feature-card-8.json
+++ b/apps/web/public/r/styles/default/animated-feature-card-8.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-8",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-8.tsx",
-      "content": "'use client'\n\nimport { cubicBezier, motion } from 'framer-motion'\n\nexport default function FeatureCard8() {\n   const variant1 = {\n      initial: {\n         y: 0,\n         scale: 0.97,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -45,\n         scale: 1,\n         boxShadow:\n        'rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 30,\n         opacity: 0,\n         scale: 0.97,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 10,\n         opacity: 1,\n         scale: 1,\n         boxShadow:\n        'rgba(245,40,145,0.05) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         x: 30,\n         y: 20,\n         opacity: 0,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 5,\n         y: 5,\n         opacity: 1,\n         boxShadow:\n        'rgba(39,245,76,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex size-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl bg-transparent\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 px-10 py-20\">\n                  <motion.div\n                     variants={variant1}\n                     className=\" relative flex items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-6 rounded-full bg-blue-500\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/joshua\"\n                           alt=\"joshua\"\n                        />\n                     </div>\n                     <div className=\"w-[calc(100%-3rem)]\">\n                        <h3 className=\"text-base font-semibold\">Mary</h3>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                           I think the design can be improved\n                        </p>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\" absolute inset-10 -bottom-14 z-[3] m-auto flex h-fit items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"w-8 \">\n                        <div className=\"size-6 rounded-full bg-blue-500\">\n                           <img\n                              className=\"size-full rounded-full object-cover\"\n                              src=\"https://avatar.vercel.sh/christina\"\n                              alt=\"christina\"\n                           />\n                        </div>\n                     </div>\n                     <div className=\"w-[calc(100%-3rem)]\">\n                        <h3 className=\"text-base font-semibold\">Joshua</h3>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                           On it ✅\n                        </p>\n                     </div>\n                     <motion.p\n                        variants={variant3}\n                        className=\"highlighted absolute -bottom-2 right-2 w-fit rounded-full border bg-cyan-500 px-2 py-0.5 text-xs text-white\"\n                     >\n                        sent\n                     </motion.p>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Reply</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Reply to other creators in app\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-8.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard8() {\n   const variant1 = {\n      initial: {\n         y: 0,\n         scale: 0.97,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -45,\n         scale: 1,\n         boxShadow:\n            \"rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 30,\n         opacity: 0,\n         scale: 0.97,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 10,\n         opacity: 1,\n         scale: 1,\n         boxShadow:\n            \"rgba(245,40,145,0.05) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         x: 30,\n         y: 20,\n         opacity: 0,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 5,\n         y: 5,\n         opacity: 1,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex size-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl bg-transparent\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 px-10 py-20\">\n                  <motion.div\n                     variants={variant1}\n                     className=\" relative flex items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-6 rounded-full bg-blue-500\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/joshua\"\n                           alt=\"joshua\"\n                        />\n                     </div>\n                     <div className=\"w-[calc(100%-3rem)]\">\n                        <h3 className=\"text-base font-semibold\">Mary</h3>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                           I think the design can be improved\n                        </p>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\" absolute inset-10 -bottom-14 z-[3] m-auto flex h-fit items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"w-8 \">\n                        <div className=\"size-6 rounded-full bg-blue-500\">\n                           <img\n                              className=\"size-full rounded-full object-cover\"\n                              src=\"https://avatar.vercel.sh/christina\"\n                              alt=\"christina\"\n                           />\n                        </div>\n                     </div>\n                     <div className=\"w-[calc(100%-3rem)]\">\n                        <h3 className=\"text-base font-semibold\">Joshua</h3>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                           On it ✅\n                        </p>\n                     </div>\n                     <motion.p\n                        variants={variant3}\n                        className=\"highlighted absolute -bottom-2 right-2 w-fit rounded-full border bg-cyan-500 px-2 py-0.5 text-xs text-white\"\n                     >\n                        sent\n                     </motion.p>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Reply</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Reply to other creators in app\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-feature-card-9.json b/apps/web/public/r/styles/default/animated-feature-card-9.json
index 927470ac..db480908 100644
--- a/apps/web/public/r/styles/default/animated-feature-card-9.json
+++ b/apps/web/public/r/styles/default/animated-feature-card-9.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-9",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-9.tsx",
-      "content": "'use client'\n\nimport { AnimatePresence, motion } from 'framer-motion'\nimport type { ReactElement } from 'react'\nimport React, { useEffect, useMemo, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\nexport const AnimatedList = React.memo(\n   ({\n      className,\n      children,\n      delay = 1000,\n   }: {\n      className?: string\n      children: React.ReactNode\n      delay?: number\n   }) => {\n      const [index, setIndex] = useState(0)\n      const childrenArray = React.Children.toArray(children)\n\n      useEffect(() => {\n         const interval = setInterval(() => {\n            setIndex(prevIndex => (prevIndex + 1) % childrenArray.length)\n         }, delay)\n\n         return () => clearInterval(interval)\n      }, [childrenArray.length, delay])\n\n      const itemsToShow = useMemo(\n         () => childrenArray.slice(0, index + 1).reverse(),\n         [index, childrenArray],\n      )\n\n      return (\n         <div className={`flex flex-col items-center gap-4 ${className}`}>\n            <AnimatePresence>\n               {itemsToShow.map(item => (\n                  <AnimatedListItem key={(item as ReactElement).key}>\n                     {item}\n                  </AnimatedListItem>\n               ))}\n            </AnimatePresence>\n         </div>\n      )\n   },\n)\n\nAnimatedList.displayName = 'AnimatedList'\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n   const animations = {\n      initial: { scale: 0, opacity: 0 },\n      animate: { scale: 1, opacity: 1, originY: 0 },\n      exit: { scale: 0, opacity: 0 },\n      transition: { type: 'spring', stiffness: 350, damping: 40 },\n   }\n\n   return (\n      <motion.div {...animations} layout className=\"mx-auto w-full\">\n         {children}\n      </motion.div>\n   )\n}\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: 'Payment received',\n      description: 'Nyxb UI',\n      time: '15m ago',\n\n      icon: '💸',\n      color: '#00C9A7',\n   },\n   {\n      name: 'User signed up',\n      description: 'Nyxb UI',\n      time: '10m ago',\n      icon: '👤',\n      color: '#FFB800',\n   },\n   {\n      name: 'New message',\n      description: 'Nyxb UI',\n      time: '5m ago',\n      icon: '💬',\n      color: '#FF3D71',\n   },\n   {\n      name: 'New event',\n      description: 'Nyxb UI',\n      time: '2m ago',\n      icon: '🗞️',\n      color: '#1E86FF',\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={ny(\n            'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-lg p-4',\n            // animation styles\n            'transition-all duration-200 ease-in-out hover:scale-[103%]',\n            // light styles\n            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',\n            // dark styles\n            'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nexport default function FeatureCard9() {\n   return (\n      <div className=\"relative flex size-full max-h-[500px] min-h-[500px] max-w-lg transform-gpu flex-col justify-between overflow-hidden rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <div className=\"flex items-center justify-center overflow-hidden\">\n            <AnimatedList>\n               {notifications.map((item, idx) => (\n                  <Notification {...item} key={idx} />\n               ))}\n            </AnimatedList>\n         </div>\n         <div className=\"flex flex-col items-start gap-y-1 border-t p-4 dark:border-neutral-800\">\n            <h2 className=\"text-xl font-semibold\">Notifications</h2>\n            <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n               Get realtime notifications for events you subscribe too\n            </p>\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-9.tsx",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport type { ReactElement } from \"react\"\nimport React, { useEffect, useMemo, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\nexport const AnimatedList = React.memo(\n   ({\n      className,\n      children,\n      delay = 1000,\n   }: {\n      className?: string\n      children: React.ReactNode\n      delay?: number\n   }) => {\n      const [index, setIndex] = useState(0)\n      const childrenArray = React.Children.toArray(children)\n\n      useEffect(() => {\n         const interval = setInterval(() => {\n            setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n         }, delay)\n\n         return () => clearInterval(interval)\n      }, [childrenArray.length, delay])\n\n      const itemsToShow = useMemo(\n         () => childrenArray.slice(0, index + 1).reverse(),\n         [index, childrenArray],\n      )\n\n      return (\n         <div className={`flex flex-col items-center gap-4 ${className}`}>\n            <AnimatePresence>\n               {itemsToShow.map((item) => (\n                  <AnimatedListItem key={(item as ReactElement).key}>\n                     {item}\n                  </AnimatedListItem>\n               ))}\n            </AnimatePresence>\n         </div>\n      )\n   },\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n   const animations = {\n      initial: { scale: 0, opacity: 0 },\n      animate: { scale: 1, opacity: 1, originY: 0 },\n      exit: { scale: 0, opacity: 0 },\n      transition: { type: \"spring\", stiffness: 350, damping: 40 },\n   }\n\n   return (\n      <motion.div {...animations} layout className=\"mx-auto w-full\">\n         {children}\n      </motion.div>\n   )\n}\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: \"Payment received\",\n      description: \"Nyxb UI\",\n      time: \"15m ago\",\n\n      icon: \"💸\",\n      color: \"#00C9A7\",\n   },\n   {\n      name: \"User signed up\",\n      description: \"Nyxb UI\",\n      time: \"10m ago\",\n      icon: \"👤\",\n      color: \"#FFB800\",\n   },\n   {\n      name: \"New message\",\n      description: \"Nyxb UI\",\n      time: \"5m ago\",\n      icon: \"💬\",\n      color: \"#FF3D71\",\n   },\n   {\n      name: \"New event\",\n      description: \"Nyxb UI\",\n      time: \"2m ago\",\n      icon: \"🗞️\",\n      color: \"#1E86FF\",\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={ny(\n            \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-lg p-4\",\n            // animation styles\n            \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nexport default function FeatureCard9() {\n   return (\n      <div className=\"relative flex size-full max-h-[500px] min-h-[500px] max-w-lg transform-gpu flex-col justify-between overflow-hidden rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <div className=\"flex items-center justify-center overflow-hidden\">\n            <AnimatedList>\n               {notifications.map((item, idx) => (\n                  <Notification {...item} key={idx} />\n               ))}\n            </AnimatedList>\n         </div>\n         <div className=\"flex flex-col items-start gap-y-1 border-t p-4 dark:border-neutral-800\">\n            <h2 className=\"text-xl font-semibold\">Notifications</h2>\n            <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n               Get realtime notifications for events you subscribe too\n            </p>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-gradient-text-demo.json b/apps/web/public/r/styles/default/animated-gradient-text-demo.json
index adb765d0..edf79f71 100644
--- a/apps/web/public/r/styles/default/animated-gradient-text-demo.json
+++ b/apps/web/public/r/styles/default/animated-gradient-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-gradient-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-gradient-text-demo.tsx",
-      "content": "import { ChevronRight } from 'lucide-react'\nimport { ny } from '~/lib/utils'\nimport AnimatedGradientText from '~/registry/default/ui/animated-gradient-text'\n\nexport default async function AnimatedGradientTextDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <AnimatedGradientText>\n            🎉\n            {' '}\n            <hr className=\"mx-2 h-4 w-px shrink-0 bg-gray-300\" />\n            {' '}\n            <span\n               className={ny(\n            `animate-gradient inline bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,\n               )}\n            >\n               Introducing Nyxb UI\n            </span>\n            <ChevronRight className=\"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n         </AnimatedGradientText>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-gradient-text-demo.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\nimport { ny } from \"~/lib/utils\"\nimport AnimatedGradientText from \"~/registry/default/ui/animated-gradient-text\"\n\nexport default async function AnimatedGradientTextDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <AnimatedGradientText>\n            🎉 <hr className=\"mx-2 h-4 w-px shrink-0 bg-gray-300\" />{\" \"}\n            <span\n               className={ny(\n                  `animate-gradient inline bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,\n               )}\n            >\n               Introducing Nyxb UI\n            </span>\n            <ChevronRight className=\"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n         </AnimatedGradientText>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-gradient-text.json b/apps/web/public/r/styles/default/animated-gradient-text.json
index 7dc29f24..ca099200 100644
--- a/apps/web/public/r/styles/default/animated-gradient-text.json
+++ b/apps/web/public/r/styles/default/animated-gradient-text.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-gradient-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/animated-gradient-text.tsx",
-      "content": "import type { ReactNode } from 'react'\nimport { ny } from '~/lib/utils'\n\nexport default function AnimatedGradientText({\n   children,\n   className,\n}: {\n   children: ReactNode\n   className?: string\n}) {\n   return (\n      <div\n         className={ny(\n            'group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40',\n            className,\n         )}\n      >\n         <div className=\"animate-gradient absolute inset-0 block size-full bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-px ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]\" />\n\n         {children}\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import type { ReactNode } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\nexport default function AnimatedGradientText({\n   children,\n   className,\n}: {\n   children: ReactNode\n   className?: string\n}) {\n   return (\n      <div\n         className={ny(\n            \"group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40\",\n            className,\n         )}\n      >\n         <div className=\"animate-gradient absolute inset-0 block size-full bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-px ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]\" />\n\n         {children}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/animated-grid-pattern-demo.json b/apps/web/public/r/styles/default/animated-grid-pattern-demo.json
index 671c1d34..f6d19718 100644
--- a/apps/web/public/r/styles/default/animated-grid-pattern-demo.json
+++ b/apps/web/public/r/styles/default/animated-grid-pattern-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-grid-pattern-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-grid-pattern-demo.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\nimport AnimatedGridPattern from '~/registry/default/ui/animated-grid-pattern'\n\nfunction AnimatedGridPatternDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Animated Grid Pattern\n         </p>\n         <AnimatedGridPattern\n            numSquares={30}\n            maxOpacity={0.5}\n            duration={3}\n            repeatDelay={1}\n            className={ny(\n               '[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]',\n               'inset-x-0 inset-y-[-30%] h-[200%] skew-y-12',\n            )}\n         />\n      </div>\n   )\n}\n\nexport default AnimatedGridPatternDemo\n",
-      "type": "registry:component",
+      "path": "examples/animated-grid-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\nimport { GridPattern } from \"~/registry/default/ui/grid-pattern\"\n\nexport default function GridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            squares={[\n               [4, 4],\n               [5, 1],\n               [8, 2],\n               [5, 3],\n               [5, 5],\n               [10, 10],\n               [12, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n            ]}\n            className={ny(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n               \"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-grid-pattern.json b/apps/web/public/r/styles/default/animated-grid-pattern.json
index 1f256749..a8dd057c 100644
--- a/apps/web/public/r/styles/default/animated-grid-pattern.json
+++ b/apps/web/public/r/styles/default/animated-grid-pattern.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-grid-pattern",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/animated-grid-pattern.tsx",
-      "content": "'use client'\n\nimport { motion } from 'framer-motion'\nimport { useEffect, useId, useRef, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface GridPatternProps {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   strokeDasharray?: any\n   numSquares?: number\n   className?: string\n   maxOpacity?: number\n   duration?: number\n   repeatDelay?: number\n}\n\nexport function GridPattern({\n   width = 40,\n   height = 40,\n   x = -1,\n   y = -1,\n   strokeDasharray = 0,\n   numSquares = 50,\n   className,\n   maxOpacity = 0.5,\n   duration = 4,\n   repeatDelay = 0.5,\n   ...props\n}: GridPatternProps) {\n   const id = useId()\n   const containerRef = useRef(null)\n   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n   const [squares, setSquares] = useState(() => generateSquares(numSquares))\n\n   function getPos() {\n      return [\n         Math.floor((Math.random() * dimensions.width) / width),\n         Math.floor((Math.random() * dimensions.height) / height),\n      ]\n   }\n\n   // Adjust the generateSquares function to return objects with an id, x, and y\n   function generateSquares(count: number) {\n      return Array.from({ length: count }, (_, i) => ({\n         id: i,\n         pos: getPos(),\n      }))\n   }\n\n   // Function to update a single square's position\n   const updateSquarePosition = (id: number) => {\n      setSquares(currentSquares =>\n         currentSquares.map(sq =>\n            sq.id === id\n               ? {\n                     ...sq,\n                     pos: getPos(),\n                  }\n               : sq,\n         ),\n      )\n   }\n\n   // Update squares to animate in\n   useEffect(() => {\n      if (dimensions.width && dimensions.height)\n         setSquares(generateSquares(numSquares))\n   }, [dimensions, numSquares])\n\n   // Resize observer to update container dimensions\n   useEffect(() => {\n      const resizeObserver = new ResizeObserver((entries) => {\n         for (const entry of entries) {\n            setDimensions({\n               width: entry.contentRect.width,\n               height: entry.contentRect.height,\n            })\n         }\n      })\n\n      if (containerRef.current)\n         resizeObserver.observe(containerRef.current)\n\n      return () => {\n         if (containerRef.current)\n            resizeObserver.unobserve(containerRef.current)\n      }\n   }, [containerRef])\n\n   return (\n      <svg\n         ref={containerRef}\n         aria-hidden=\"true\"\n         className={ny(\n            'pointer-events-none absolute inset-0 size-full fill-gray-400/30 stroke-gray-400/30',\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <path\n                  d={`M.5 ${height}V.5H${width}`}\n                  fill=\"none\"\n                  strokeDasharray={strokeDasharray}\n               />\n            </pattern>\n         </defs>\n         <rect width=\"100%\" height=\"100%\" fill={`url(#${id})`} />\n         <svg x={x} y={y} className=\"overflow-visible\">\n            {squares.map(({ pos: [x, y], id }, index) => (\n               <motion.rect\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: maxOpacity }}\n                  transition={{\n                     duration,\n                     repeat: 1,\n                     delay: index * 0.1,\n                     repeatType: 'reverse',\n                  }}\n                  onAnimationComplete={() => updateSquarePosition(id)}\n                  key={`${x}-${y}-${index}`}\n                  width={width - 1}\n                  height={height - 1}\n                  x={x * width + 1}\n                  y={y * height + 1}\n                  fill=\"currentColor\"\n                  strokeWidth=\"0\"\n               />\n            ))}\n         </svg>\n      </svg>\n   )\n}\n\nexport default GridPattern\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion } from \"motion/react\"\nimport {\n   type ComponentPropsWithoutRef,\n   useEffect,\n   useId,\n   useRef,\n   useState,\n} from \"react\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\n\nexport interface AnimatedGridPatternProps\n   extends ComponentPropsWithoutRef<\"svg\"> {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   strokeDasharray?: any\n   numSquares?: number\n   maxOpacity?: number\n   duration?: number\n   repeatDelay?: number\n}\n\nexport function AnimatedGridPattern({\n   width = 40,\n   height = 40,\n   x = -1,\n   y = -1,\n   strokeDasharray = 0,\n   numSquares = 50,\n   className,\n   maxOpacity = 0.5,\n   duration = 4,\n   repeatDelay = 0.5,\n   ...props\n}: AnimatedGridPatternProps) {\n   const id = useId()\n   const containerRef = useRef(null)\n   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n   const [squares, setSquares] = useState(() => generateSquares(numSquares))\n\n   function getPos() {\n      return [\n         Math.floor((Math.random() * dimensions.width) / width),\n         Math.floor((Math.random() * dimensions.height) / height),\n      ]\n   }\n\n   // Adjust the generateSquares function to return objects with an id, x, and y\n   function generateSquares(count: number) {\n      return Array.from({ length: count }, (_, i) => ({\n         id: i,\n         pos: getPos(),\n      }))\n   }\n\n   // Function to update a single square's position\n   const updateSquarePosition = (id: number) => {\n      setSquares((currentSquares) =>\n         currentSquares.map((sq) =>\n            sq.id === id\n               ? {\n                    ...sq,\n                    pos: getPos(),\n                 }\n               : sq,\n         ),\n      )\n   }\n\n   // Update squares to animate in\n   useEffect(() => {\n      if (dimensions.width && dimensions.height) {\n         setSquares(generateSquares(numSquares))\n      }\n   }, [dimensions, numSquares])\n\n   // Resize observer to update container dimensions\n   useEffect(() => {\n      const resizeObserver = new ResizeObserver((entries) => {\n         for (const entry of entries) {\n            setDimensions({\n               width: entry.contentRect.width,\n               height: entry.contentRect.height,\n            })\n         }\n      })\n\n      if (containerRef.current) {\n         resizeObserver.observe(containerRef.current)\n      }\n\n      return () => {\n         if (containerRef.current) {\n            resizeObserver.unobserve(containerRef.current)\n         }\n      }\n   }, [containerRef])\n\n   return (\n      <svg\n         ref={containerRef}\n         aria-hidden=\"true\"\n         className={ny(\n            \"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30\",\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <path\n                  d={`M.5 ${height}V.5H${width}`}\n                  fill=\"none\"\n                  strokeDasharray={strokeDasharray}\n               />\n            </pattern>\n         </defs>\n         <rect width=\"100%\" height=\"100%\" fill={`url(#${id})`} />\n         <svg x={x} y={y} className=\"overflow-visible\">\n            {squares.map(({ pos: [x, y], id }, index) => (\n               <motion.rect\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: maxOpacity }}\n                  transition={{\n                     duration,\n                     repeat: 1,\n                     delay: index * 0.1,\n                     repeatType: \"reverse\",\n                  }}\n                  onAnimationComplete={() => updateSquarePosition(id)}\n                  key={`${x}-${y}-${index}`}\n                  width={width - 1}\n                  height={height - 1}\n                  x={x * width + 1}\n                  y={y * height + 1}\n                  fill=\"currentColor\"\n                  strokeWidth=\"0\"\n               />\n            ))}\n         </svg>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-list-demo.json b/apps/web/public/r/styles/default/animated-list-demo.json
index 8b4ad1d1..6fc2605b 100644
--- a/apps/web/public/r/styles/default/animated-list-demo.json
+++ b/apps/web/public/r/styles/default/animated-list-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-list-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-list-demo.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\nimport { AnimatedList } from '~/registry/default/ui/animated-list'\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: 'Payment received',\n      description: 'Nyxb UI',\n      time: '15m ago',\n\n      icon: '💸',\n      color: '#00C9A7',\n   },\n   {\n      name: 'User signed up',\n      description: 'Nyxb UI',\n      time: '10m ago',\n      icon: '👤',\n      color: '#FFB800',\n   },\n   {\n      name: 'New message',\n      description: 'Nyxb UI',\n      time: '5m ago',\n      icon: '💬',\n      color: '#FF3D71',\n   },\n   {\n      name: 'New event',\n      description: 'Nyxb UI',\n      time: '2m ago',\n      icon: '🗞️',\n      color: '#1E86FF',\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={ny(\n            'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4',\n            // animation styles\n            'transition-all duration-200 ease-in-out hover:scale-[103%]',\n            // light styles\n            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',\n            // dark styles\n            'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nexport default function AnimatedListDemo() {\n   return (\n      <div className=\"bg-background relative flex max-h-[400px] min-h-[400px] w-full max-w-lg flex-col overflow-hidden rounded-lg border p-6 shadow-lg\">\n         <AnimatedList>\n            {notifications.map((item, idx) => (\n               <Notification {...item} key={idx} />\n            ))}\n         </AnimatedList>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-list-demo.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/lib/utils\"\nimport { AnimatedList } from \"~/registry/default/ui/animated-list\"\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: \"Payment received\",\n      description: \"Nyxb UI\",\n      time: \"15m ago\",\n\n      icon: \"💸\",\n      color: \"#00C9A7\",\n   },\n   {\n      name: \"User signed up\",\n      description: \"Nyxb UI\",\n      time: \"10m ago\",\n      icon: \"👤\",\n      color: \"#FFB800\",\n   },\n   {\n      name: \"New message\",\n      description: \"Nyxb UI\",\n      time: \"5m ago\",\n      icon: \"💬\",\n      color: \"#FF3D71\",\n   },\n   {\n      name: \"New event\",\n      description: \"Nyxb UI\",\n      time: \"2m ago\",\n      icon: \"🗞️\",\n      color: \"#1E86FF\",\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={ny(\n            \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4\",\n            // animation styles\n            \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nexport default function AnimatedListDemo() {\n   return (\n      <div className=\"bg-background relative flex max-h-[400px] min-h-[400px] w-full max-w-lg flex-col overflow-hidden rounded-lg border p-6 shadow-lg\">\n         <AnimatedList>\n            {notifications.map((item, idx) => (\n               <Notification {...item} key={idx} />\n            ))}\n         </AnimatedList>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-list.json b/apps/web/public/r/styles/default/animated-list.json
index b6cf1c1f..c4f6347a 100644
--- a/apps/web/public/r/styles/default/animated-list.json
+++ b/apps/web/public/r/styles/default/animated-list.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-list",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/animated-list.tsx",
-      "content": "'use client'\n\nimport { AnimatePresence, motion } from 'framer-motion'\nimport type { ReactElement } from 'react'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nexport const AnimatedList = React.memo(\n   ({\n      className,\n      children,\n      delay = 1000,\n   }: {\n      className?: string\n      children: React.ReactNode\n      delay?: number\n   }) => {\n      const [index, setIndex] = useState(0)\n      const childrenArray = React.Children.toArray(children)\n\n      useEffect(() => {\n         const interval = setInterval(() => {\n            setIndex(prevIndex => (prevIndex + 1) % childrenArray.length)\n         }, delay)\n\n         return () => clearInterval(interval)\n      }, [childrenArray.length, delay])\n\n      const itemsToShow = useMemo(\n         () => childrenArray.slice(0, index + 1).reverse(),\n         [index, childrenArray],\n      )\n\n      return (\n         <div className={`flex flex-col items-center gap-4 ${className}`}>\n            <AnimatePresence>\n               {itemsToShow.map(item => (\n                  <AnimatedListItem key={(item as ReactElement).key}>\n                     {item}\n                  </AnimatedListItem>\n               ))}\n            </AnimatePresence>\n         </div>\n      )\n   },\n)\n\nAnimatedList.displayName = 'AnimatedList'\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n   const animations = {\n      initial: { scale: 0, opacity: 0 },\n      animate: { scale: 1, opacity: 1, originY: 0 },\n      exit: { scale: 0, opacity: 0 },\n      transition: { type: 'spring', stiffness: 350, damping: 40 },\n   }\n\n   return (\n      <motion.div {...animations} layout className=\"mx-auto w-full\">\n         {children}\n      </motion.div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport type { ReactElement } from \"react\"\nimport React, { useEffect, useMemo, useState } from \"react\"\n\nexport const AnimatedList = React.memo(\n   ({\n      className,\n      children,\n      delay = 1000,\n   }: {\n      className?: string\n      children: React.ReactNode\n      delay?: number\n   }) => {\n      const [index, setIndex] = useState(0)\n      const childrenArray = React.Children.toArray(children)\n\n      useEffect(() => {\n         const interval = setInterval(() => {\n            setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n         }, delay)\n\n         return () => clearInterval(interval)\n      }, [childrenArray.length, delay])\n\n      const itemsToShow = useMemo(\n         () => childrenArray.slice(0, index + 1).reverse(),\n         [index, childrenArray],\n      )\n\n      return (\n         <div className={`flex flex-col items-center gap-4 ${className}`}>\n            <AnimatePresence>\n               {itemsToShow.map((item) => (\n                  <AnimatedListItem key={(item as ReactElement).key}>\n                     {item}\n                  </AnimatedListItem>\n               ))}\n            </AnimatePresence>\n         </div>\n      )\n   },\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n   const animations = {\n      initial: { scale: 0, opacity: 0 },\n      animate: { scale: 1, opacity: 1, originY: 0 },\n      exit: { scale: 0, opacity: 0 },\n      transition: { type: \"spring\", stiffness: 350, damping: 40 },\n   }\n\n   return (\n      <motion.div {...animations} layout className=\"mx-auto w-full\">\n         {children}\n      </motion.div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-shiny-text-demo.json b/apps/web/public/r/styles/default/animated-shiny-text-demo.json
index bd7fa323..2fbbd374 100644
--- a/apps/web/public/r/styles/default/animated-shiny-text-demo.json
+++ b/apps/web/public/r/styles/default/animated-shiny-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-shiny-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-shiny-text-demo.tsx",
-      "content": "import { ArrowRightIcon } from '@radix-ui/react-icons'\nimport { ny } from '~/lib/utils'\nimport AnimatedShinyText from '~/registry/default/ui/animated-shiny-text'\n\nexport default async function AnimatedShinyTextDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <div\n            className={ny(\n               'group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800',\n            )}\n         >\n            <AnimatedShinyText className=\"inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400\">\n               <span>✨ Introducing Nyxb UI</span>\n               <ArrowRightIcon className=\"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n            </AnimatedShinyText>\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-shiny-text-demo.tsx",
+      "content": "import { ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport { ny } from \"~/lib/utils\"\nimport AnimatedShinyText from \"~/registry/default/ui/animated-shiny-text\"\n\nexport default async function AnimatedShinyTextDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <div\n            className={ny(\n               \"group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800\",\n            )}\n         >\n            <AnimatedShinyText className=\"inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400\">\n               <span>✨ Introducing Nyxb UI</span>\n               <ArrowRightIcon className=\"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n            </AnimatedShinyText>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-shiny-text.json b/apps/web/public/r/styles/default/animated-shiny-text.json
index ef4d03be..730d25d1 100644
--- a/apps/web/public/r/styles/default/animated-shiny-text.json
+++ b/apps/web/public/r/styles/default/animated-shiny-text.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-shiny-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/animated-shiny-text.tsx",
-      "content": "import type { CSSProperties, FC, ReactNode } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface AnimatedShinyTextProps {\n   children: ReactNode\n   className?: string\n   shimmerWidth?: number\n}\n\nconst AnimatedShinyText: FC<AnimatedShinyTextProps> = ({\n   children,\n   className,\n   shimmerWidth = 100,\n}) => {\n   return (\n      <p\n         style={\n            {\n               '--shimmer-width': `${shimmerWidth}px`,\n            } as CSSProperties\n         }\n         className={ny(\n            'mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50 ',\n\n            // Shimmer effect\n            'animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]',\n\n            // Shimmer gradient\n            'bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80',\n\n            className,\n         )}\n      >\n         {children}\n      </p>\n   )\n}\n\nexport default AnimatedShinyText\n",
-      "type": "registry:component",
+      "content": "import type { CSSProperties, FC, ReactNode } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface AnimatedShinyTextProps {\n   children: ReactNode\n   className?: string\n   shimmerWidth?: number\n}\n\nconst AnimatedShinyText: FC<AnimatedShinyTextProps> = ({\n   children,\n   className,\n   shimmerWidth = 100,\n}) => {\n   return (\n      <p\n         style={\n            {\n               \"--shimmer-width\": `${shimmerWidth}px`,\n            } as CSSProperties\n         }\n         className={ny(\n            \"mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50 \",\n\n            // Shimmer effect\n            \"animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]\",\n\n            // Shimmer gradient\n            \"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80\",\n\n            className,\n         )}\n      >\n         {children}\n      </p>\n   )\n}\n\nexport default AnimatedShinyText\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/animated-subscribe-button-demo.json b/apps/web/public/r/styles/default/animated-subscribe-button-demo.json
index be765ce3..2ea5c58c 100644
--- a/apps/web/public/r/styles/default/animated-subscribe-button-demo.json
+++ b/apps/web/public/r/styles/default/animated-subscribe-button-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-subscribe-button-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-subscribe-button-demo.tsx",
-      "content": "import { CheckIcon, ChevronRightIcon } from 'lucide-react'\nimport { AnimatedSubscribeButton } from '~/registry/default/ui/animated-subscribe-button'\n\nexport default function AnimatedSubscribeButtonDemo() {\n   return (\n      <AnimatedSubscribeButton\n         buttonColor=\"#000000\"\n         buttonTextColor=\"#ffffff\"\n         subscribeStatus={false}\n         initialText={(\n            <span className=\"group inline-flex items-center\">\n               Subscribe\n               {' '}\n               <ChevronRightIcon className=\"ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1\" />\n            </span>\n         )}\n         changeText={(\n            <span className=\"group inline-flex items-center\">\n               <CheckIcon className=\"mr-2 size-4\" />\n               Subscribed\n               {' '}\n            </span>\n         )}\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-subscribe-button-demo.tsx",
+      "content": "import { CheckIcon, ChevronRightIcon } from \"lucide-react\"\nimport { AnimatedSubscribeButton } from \"~/registry/default/ui/animated-subscribe-button\"\n\nexport default function AnimatedSubscribeButtonDemo() {\n   return (\n      <AnimatedSubscribeButton\n         buttonColor=\"#000000\"\n         buttonTextColor=\"#ffffff\"\n         subscribeStatus={false}\n         initialText={\n            <span className=\"group inline-flex items-center\">\n               Subscribe{\" \"}\n               <ChevronRightIcon className=\"ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1\" />\n            </span>\n         }\n         changeText={\n            <span className=\"group inline-flex items-center\">\n               <CheckIcon className=\"mr-2 size-4\" />\n               Subscribed{\" \"}\n            </span>\n         }\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/animated-subscribe-button.json b/apps/web/public/r/styles/default/animated-subscribe-button.json
index 78fc6308..492ed6f0 100644
--- a/apps/web/public/r/styles/default/animated-subscribe-button.json
+++ b/apps/web/public/r/styles/default/animated-subscribe-button.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-subscribe-button",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/animated-subscribe-button.tsx",
-      "content": "'use client'\n\nimport { AnimatePresence, motion } from 'framer-motion'\nimport React, { useState } from 'react'\n\ninterface AnimatedSubscribeButtonProps {\n   buttonColor: string\n   buttonTextColor?: string\n   subscribeStatus: boolean\n   initialText: React.ReactElement | string\n   changeText: React.ReactElement | string\n}\n\nexport const AnimatedSubscribeButton: React.FC<\n   AnimatedSubscribeButtonProps\n> = ({\n   buttonColor,\n   subscribeStatus,\n   buttonTextColor,\n   changeText,\n   initialText,\n}) => {\n   const [isSubscribed, setIsSubscribed] = useState<boolean>(subscribeStatus)\n\n   return (\n      <AnimatePresence mode=\"wait\">\n         {isSubscribed\n            ? (\n                  <motion.button\n                     className=\"relative flex h-[46px] w-[200px] items-center justify-center overflow-hidden rounded-md bg-white p-[10px] outline outline-1 outline-black\"\n                     onClick={() => setIsSubscribed(false)}\n                     initial={{ opacity: 0 }}\n                     animate={{ opacity: 1 }}\n                     exit={{ opacity: 0 }}\n                  >\n                     <motion.span\n                        key=\"action\"\n                        className=\"relative block size-full font-semibold\"\n                        initial={{ y: -50 }}\n                        animate={{ y: 0 }}\n                        style={{ color: buttonColor }}\n                     >\n                        {changeText}\n                     </motion.span>\n                  </motion.button>\n               )\n            : (\n                  <motion.button\n                     className=\"relative flex w-[200px] cursor-pointer items-center justify-center rounded-md border-none p-[10px]\"\n                     style={{ backgroundColor: buttonColor, color: buttonTextColor }}\n                     onClick={() => setIsSubscribed(true)}\n                     initial={{ opacity: 0 }}\n                     animate={{ opacity: 1 }}\n                     exit={{ opacity: 0 }}\n                  >\n                     <motion.span\n                        key=\"reaction\"\n                        className=\"relative block font-semibold\"\n                        initial={{ x: 0 }}\n                        exit={{ x: 50, transition: { duration: 0.1 } }}\n                     >\n                        {initialText}\n                     </motion.span>\n                  </motion.button>\n               )}\n      </AnimatePresence>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport type React from \"react\"\nimport { useState } from \"react\"\n\ninterface AnimatedSubscribeButtonProps {\n   buttonColor: string\n   buttonTextColor?: string\n   subscribeStatus: boolean\n   initialText: React.ReactElement | string\n   changeText: React.ReactElement | string\n}\n\nexport const AnimatedSubscribeButton: React.FC<\n   AnimatedSubscribeButtonProps\n> = ({\n   buttonColor,\n   subscribeStatus,\n   buttonTextColor,\n   changeText,\n   initialText,\n}) => {\n   const [isSubscribed, setIsSubscribed] = useState<boolean>(subscribeStatus)\n\n   return (\n      <AnimatePresence mode=\"wait\">\n         {isSubscribed ? (\n            <motion.button\n               className=\"relative flex h-[46px] w-[200px] items-center justify-center overflow-hidden rounded-md bg-white p-[10px] outline outline-1 outline-black\"\n               onClick={() => setIsSubscribed(false)}\n               initial={{ opacity: 0 }}\n               animate={{ opacity: 1 }}\n               exit={{ opacity: 0 }}\n            >\n               <motion.span\n                  key=\"action\"\n                  className=\"relative block size-full font-semibold\"\n                  initial={{ y: -50 }}\n                  animate={{ y: 0 }}\n                  style={{ color: buttonColor }}\n               >\n                  {changeText}\n               </motion.span>\n            </motion.button>\n         ) : (\n            <motion.button\n               className=\"relative flex w-[200px] cursor-pointer items-center justify-center rounded-md border-none p-[10px]\"\n               style={{ backgroundColor: buttonColor, color: buttonTextColor }}\n               onClick={() => setIsSubscribed(true)}\n               initial={{ opacity: 0 }}\n               animate={{ opacity: 1 }}\n               exit={{ opacity: 0 }}\n            >\n               <motion.span\n                  key=\"reaction\"\n                  className=\"relative block font-semibold\"\n                  initial={{ x: 0 }}\n                  exit={{ x: 50, transition: { duration: 0.1 } }}\n               >\n                  {initialText}\n               </motion.span>\n            </motion.button>\n         )}\n      </AnimatePresence>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/aspect-ratio-demo.json b/apps/web/public/r/styles/default/aspect-ratio-demo.json
index 14aa0878..740d68f3 100644
--- a/apps/web/public/r/styles/default/aspect-ratio-demo.json
+++ b/apps/web/public/r/styles/default/aspect-ratio-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "aspect-ratio-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "aspect-ratio"
   ],
   "files": [
     {
-      "path": "example/aspect-ratio-demo.tsx",
-      "content": "import Image from 'next/image'\n\nimport { AspectRatio } from '~/registry/default/ui/aspect-ratio'\n\nexport default function AspectRatioDemo() {\n   return (\n      <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n         <Image\n            src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n            alt=\"Photo by Drew Beamer\"\n            fill\n            className=\"rounded-md object-cover\"\n         />\n      </AspectRatio>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"~/registry/default/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n   return (\n      <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n         <Image\n            src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n            alt=\"Photo by Drew Beamer\"\n            fill\n            className=\"rounded-md object-cover\"\n         />\n      </AspectRatio>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/aspect-ratio.json b/apps/web/public/r/styles/default/aspect-ratio.json
index a49b9235..397a91ed 100644
--- a/apps/web/public/r/styles/default/aspect-ratio.json
+++ b/apps/web/public/r/styles/default/aspect-ratio.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "aspect-ratio",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-aspect-ratio"
   ],
   "files": [
     {
       "path": "ui/aspect-ratio.tsx",
-      "content": "'use client'\n\nimport * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/aurora-text-demo.json b/apps/web/public/r/styles/default/aurora-text-demo.json
new file mode 100644
index 00000000..ff1bd536
--- /dev/null
+++ b/apps/web/public/r/styles/default/aurora-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "aurora-text-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/aurora-text-demo.tsx",
+      "content": "import { AuroraText } from \"~/registry/default/ui/aurora-text\"\n\nexport default function AuroraTextDemo() {\n   return (\n      <h1 className=\"text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl\">\n         Ship <AuroraText>beautiful</AuroraText>\n      </h1>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/aurora-text.json b/apps/web/public/r/styles/default/aurora-text.json
new file mode 100644
index 00000000..c776ddd5
--- /dev/null
+++ b/apps/web/public/r/styles/default/aurora-text.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "aurora-text",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/aurora-text.tsx",
+      "content": "import { type MotionProps, motion } from \"motion/react\"\nimport type React from \"react\"\nimport { ny } from \"~/registry/default/lib/utils\"\n\ninterface AuroraTextProps\n   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps> {\n   className?: string\n   children: React.ReactNode\n   as?: React.ElementType\n}\n\nexport function AuroraText({\n   className,\n   children,\n   as: Component = \"span\",\n   ...props\n}: AuroraTextProps) {\n   const MotionComponent = motion.create(Component)\n\n   return (\n      <MotionComponent\n         className={ny(\"relative inline-flex overflow-hidden\", className)}\n         {...props}\n      >\n         {children}\n         <span className=\"pointer-events-none absolute inset-0 mix-blend-lighten dark:mix-blend-darken\">\n            <span className=\"pointer-events-none absolute -top-1/2 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-1_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-1))] mix-blend-overlay blur-[1rem]\"></span>\n            <span className=\"pointer-events-none absolute right-0 top-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-2_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-2))] mix-blend-overlay blur-[1rem]\"></span>\n            <span className=\"pointer-events-none absolute bottom-0 left-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-3_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-3))] mix-blend-overlay blur-[1rem]\"></span>\n            <span className=\"pointer-events-none absolute -bottom-1/2 right-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-4_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-4))] mix-blend-overlay blur-[1rem]\"></span>\n         </span>\n      </MotionComponent>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "keyframes": {
+            "aurora-border": {
+              "0%, 100%": {
+                "borderRadius": "37% 29% 27% 27% / 28% 25% 41% 37%"
+              },
+              "25%": {
+                "borderRadius": "47% 29% 39% 49% / 61% 19% 66% 26%"
+              },
+              "50%": {
+                "borderRadius": "57% 23% 47% 72% / 63% 17% 66% 33%"
+              },
+              "75%": {
+                "borderRadius": "28% 49% 29% 100% / 93% 20% 64% 25%"
+              }
+            },
+            "aurora-1": {
+              "0%, 100%": {
+                "top": "0",
+                "right": "0"
+              },
+              "50%": {
+                "top": "50%",
+                "right": "25%"
+              },
+              "75%": {
+                "top": "25%",
+                "right": "50%"
+              }
+            },
+            "aurora-2": {
+              "0%, 100%": {
+                "top": "0",
+                "left": "0"
+              },
+              "60%": {
+                "top": "75%",
+                "left": "25%"
+              },
+              "85%": {
+                "top": "50%",
+                "left": "50%"
+              }
+            },
+            "aurora-3": {
+              "0%, 100%": {
+                "bottom": "0",
+                "left": "0"
+              },
+              "40%": {
+                "bottom": "50%",
+                "left": "25%"
+              },
+              "65%": {
+                "bottom": "25%",
+                "left": "50%"
+              }
+            },
+            "aurora-4": {
+              "0%, 100%": {
+                "bottom": "0",
+                "right": "0"
+              },
+              "50%": {
+                "bottom": "25%",
+                "right": "40%"
+              },
+              "90%": {
+                "bottom": "50%",
+                "right": "25%"
+              }
+            }
+          },
+          "animation": {
+            "aurora-border": "aurora-border 10s ease-in-out infinite",
+            "aurora-1": "aurora-1 15s ease-in-out infinite",
+            "aurora-2": "aurora-2 15s ease-in-out infinite",
+            "aurora-3": "aurora-3 15s ease-in-out infinite",
+            "aurora-4": "aurora-4 15s ease-in-out infinite"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/avatar-circles-demo.json b/apps/web/public/r/styles/default/avatar-circles-demo.json
index 79104ce5..e7b82b40 100644
--- a/apps/web/public/r/styles/default/avatar-circles-demo.json
+++ b/apps/web/public/r/styles/default/avatar-circles-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "avatar-circles-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/avatar-circles-demo.tsx",
-      "content": "import AvatarCircles from '~/registry/default/ui/avatar-circles'\n\nconst avatarUrls = [\n   'https://avatars.githubusercontent.com/u/98586665',\n   'https://avatars.githubusercontent.com/u/20110627',\n   'https://avatars.githubusercontent.com/u/106103625',\n   'https://avatars.githubusercontent.com/u/59228569',\n]\n\nexport default async function AvatarCirclesDemo() {\n   return <AvatarCircles numPeople={99} avatarUrls={avatarUrls} />\n}\n",
-      "type": "registry:component",
+      "path": "examples/avatar-circles-demo.tsx",
+      "content": "import AvatarCircles from \"~/registry/default/ui/avatar-circles\"\n\nconst avatarUrls = [\n   \"https://avatars.githubusercontent.com/u/98586665\",\n   \"https://avatars.githubusercontent.com/u/20110627\",\n   \"https://avatars.githubusercontent.com/u/106103625\",\n   \"https://avatars.githubusercontent.com/u/59228569\",\n]\n\nexport default async function AvatarCirclesDemo() {\n   return <AvatarCircles numPeople={99} avatarUrls={avatarUrls} />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/avatar-circles.json b/apps/web/public/r/styles/default/avatar-circles.json
index 54cbd288..d5334644 100644
--- a/apps/web/public/r/styles/default/avatar-circles.json
+++ b/apps/web/public/r/styles/default/avatar-circles.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "avatar-circles",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/avatar-circles.tsx",
-      "content": "'use client'\n\nimport React from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface AvatarCirclesProps {\n   className?: string\n   numPeople?: number\n   avatarUrls: string[]\n}\n\nfunction AvatarCircles({\n   numPeople,\n   className,\n   avatarUrls,\n}: AvatarCirclesProps) {\n   return (\n      <div className={ny('z-10 flex -space-x-4 rtl:space-x-reverse', className)}>\n         {avatarUrls.map((url, index) => (\n            <img\n               key={index}\n               className=\"size-10 rounded-full border-2 border-white dark:border-gray-800\"\n               src={url}\n               width={40}\n               height={40}\n               alt={`Avatar ${index + 1}`}\n            />\n         ))}\n         <a\n            className=\"flex size-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black\"\n            href=\"\"\n         >\n            +\n            {numPeople}\n         </a>\n      </div>\n   )\n}\n\nexport default AvatarCircles\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface AvatarCirclesProps {\n   className?: string\n   numPeople?: number\n   avatarUrls: string[]\n}\n\nfunction AvatarCircles({\n   numPeople,\n   className,\n   avatarUrls,\n}: AvatarCirclesProps) {\n   return (\n      <div\n         className={ny(\"z-10 flex -space-x-4 rtl:space-x-reverse\", className)}\n      >\n         {avatarUrls.map((url, index) => (\n            <img\n               key={index}\n               className=\"size-10 rounded-full border-2 border-white dark:border-gray-800\"\n               src={url}\n               width={40}\n               height={40}\n               alt={`Avatar ${index + 1}`}\n            />\n         ))}\n         <a\n            className=\"flex size-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black\"\n            href=\"\"\n         >\n            +{numPeople}\n         </a>\n      </div>\n   )\n}\n\nexport default AvatarCircles\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/avatar-demo.json b/apps/web/public/r/styles/default/avatar-demo.json
index 738f112b..b4db0e7b 100644
--- a/apps/web/public/r/styles/default/avatar-demo.json
+++ b/apps/web/public/r/styles/default/avatar-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "avatar-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "avatar"
   ],
   "files": [
     {
-      "path": "example/avatar-demo.tsx",
-      "content": "import {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/default/ui/avatar'\n\nexport default function AvatarDemo() {\n   return (\n      <Avatar>\n         <AvatarImage src=\"https://github.com/nyxb.png\" alt=\"@nyxb\" />\n         <AvatarFallback>NY</AvatarFallback>\n      </Avatar>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/avatar-demo.tsx",
+      "content": "import {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from \"~/registry/default/ui/avatar\"\n\nexport default function AvatarDemo() {\n   return (\n      <Avatar>\n         <AvatarImage src=\"https://github.com/nyxb.png\" alt=\"@nyxb\" />\n         <AvatarFallback>NY</AvatarFallback>\n      </Avatar>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/avatar.json b/apps/web/public/r/styles/default/avatar.json
index f203641f..e4cbcd03 100644
--- a/apps/web/public/r/styles/default/avatar.json
+++ b/apps/web/public/r/styles/default/avatar.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "avatar",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-avatar"
   ],
   "files": [
     {
       "path": "ui/avatar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\n\nimport { ny } from '~/lib/utils'\n\nconst Avatar = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Root\n      ref={ref}\n      className={ny(\n         'relative flex size-10 shrink-0 overflow-hidden rounded-full',\n         className,\n      )}\n      {...props}\n   />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Image>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Image\n      ref={ref}\n      className={ny('aspect-square size-full', className)}\n      {...props}\n   />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Fallback>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Fallback\n      ref={ref}\n      className={ny(\n         'bg-muted flex size-full items-center justify-center rounded-full',\n         className,\n      )}\n      {...props}\n   />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Avatar = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Root\n      ref={ref}\n      className={ny(\n         \"relative flex size-10 shrink-0 overflow-hidden rounded-full\",\n         className,\n      )}\n      {...props}\n   />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Image>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Image\n      ref={ref}\n      className={ny(\"aspect-square size-full\", className)}\n      {...props}\n   />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Fallback>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Fallback\n      ref={ref}\n      className={ny(\n         \"bg-muted flex size-full items-center justify-center rounded-full\",\n         className,\n      )}\n      {...props}\n   />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/badge-demo.json b/apps/web/public/r/styles/default/badge-demo.json
index 6728cb0e..75f94657 100644
--- a/apps/web/public/r/styles/default/badge-demo.json
+++ b/apps/web/public/r/styles/default/badge-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "badge-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "badge"
   ],
   "files": [
     {
-      "path": "example/badge-demo.tsx",
-      "content": "import { Badge } from '~/registry/default/ui/badge'\n\nexport default function BadgeDemo() {\n   return <Badge>Badge</Badge>\n}\n",
-      "type": "registry:component",
+      "path": "examples/badge-demo.tsx",
+      "content": "import { Badge } from \"~/registry/default/ui/badge\"\n\nexport default function BadgeDemo() {\n   return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/badge-destructive.json b/apps/web/public/r/styles/default/badge-destructive.json
index 58857d1e..4e7e86c7 100644
--- a/apps/web/public/r/styles/default/badge-destructive.json
+++ b/apps/web/public/r/styles/default/badge-destructive.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "badge-destructive",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "badge"
   ],
   "files": [
     {
-      "path": "example/badge-destructive.tsx",
-      "content": "import { Badge } from '~/registry/default/ui/badge'\n\nexport default function BadgeDestructive() {\n   return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
-      "type": "registry:component",
+      "path": "examples/badge-destructive.tsx",
+      "content": "import { Badge } from \"~/registry/default/ui/badge\"\n\nexport default function BadgeDestructive() {\n   return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/badge-outline.json b/apps/web/public/r/styles/default/badge-outline.json
index d23426d2..4bb5a554 100644
--- a/apps/web/public/r/styles/default/badge-outline.json
+++ b/apps/web/public/r/styles/default/badge-outline.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "badge-outline",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "badge"
   ],
   "files": [
     {
-      "path": "example/badge-outline.tsx",
-      "content": "import { Badge } from '~/registry/default/ui/badge'\n\nexport default function BadgeOutline() {\n   return <Badge variant=\"outline\">Outline</Badge>\n}\n",
-      "type": "registry:component",
+      "path": "examples/badge-outline.tsx",
+      "content": "import { Badge } from \"~/registry/default/ui/badge\"\n\nexport default function BadgeOutline() {\n   return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/badge-secondary.json b/apps/web/public/r/styles/default/badge-secondary.json
index 4550e3c5..80579e22 100644
--- a/apps/web/public/r/styles/default/badge-secondary.json
+++ b/apps/web/public/r/styles/default/badge-secondary.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "badge-secondary",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "badge"
   ],
   "files": [
     {
-      "path": "example/badge-secondary.tsx",
-      "content": "import { Badge } from '~/registry/default/ui/badge'\n\nexport default function BadgeSecondary() {\n   return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
-      "type": "registry:component",
+      "path": "examples/badge-secondary.tsx",
+      "content": "import { Badge } from \"~/registry/default/ui/badge\"\n\nexport default function BadgeSecondary() {\n   return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/badge.json b/apps/web/public/r/styles/default/badge.json
index 872d808f..7d4201f2 100644
--- a/apps/web/public/r/styles/default/badge.json
+++ b/apps/web/public/r/styles/default/badge.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "badge",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/badge.tsx",
-      "content": "import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst badgeVariants = cva(\n   'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n   {\n      variants: {\n         variant: {\n            default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n            secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n            destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n            outline: 'text-foreground',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n      },\n   },\n)\n\nexport interface BadgeProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n   VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n   return (\n      <div className={ny(badgeVariants({ variant }), className)} {...props} />\n   )\n}\n\nexport { Badge, badgeVariants }\n",
-      "type": "registry:component",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\"\nimport type * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst badgeVariants = cva(\n   \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n   {\n      variants: {\n         variant: {\n            default:\n               \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n            secondary:\n               \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n            destructive:\n               \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n            outline: \"text-foreground\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nexport interface BadgeProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n   return (\n      <div className={ny(badgeVariants({ variant }), className)} {...props} />\n   )\n}\n\nexport { Badge, badgeVariants }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/bento-demo-vertical.json b/apps/web/public/r/styles/default/bento-demo-vertical.json
index 1f97354d..9f0a156b 100644
--- a/apps/web/public/r/styles/default/bento-demo-vertical.json
+++ b/apps/web/public/r/styles/default/bento-demo-vertical.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "bento-demo-vertical",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/bento-demo-vertical.tsx",
-      "content": "import {\n   BellIcon,\n   CalendarIcon,\n   FileTextIcon,\n   GlobeIcon,\n   InputIcon,\n} from '@radix-ui/react-icons'\nimport { BentoCard, BentoGrid } from '~/registry/default/ui/bento-grid'\n\nconst features = [\n   {\n      Icon: FileTextIcon,\n      name: 'Save your files',\n      description: 'We automatically save your files as you type.',\n      href: '/docs',\n      cta: 'Learn more',\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: 'lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3',\n   },\n   {\n      Icon: InputIcon,\n      name: 'Full text search',\n      description: 'Search through all your files in one place.',\n      href: '/docs',\n      cta: 'Learn more',\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: 'lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3',\n   },\n   {\n      Icon: GlobeIcon,\n      name: 'Multilingual',\n      description: 'Supports 100+ languages and counting.',\n      href: '/docs',\n      cta: 'Learn more',\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: 'lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4',\n   },\n   {\n      Icon: CalendarIcon,\n      name: 'Calendar',\n      description: 'Use the calendar to filter your files by date.',\n      href: '/docs',\n      cta: 'Learn more',\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: 'lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2',\n   },\n   {\n      Icon: BellIcon,\n      name: 'Notifications',\n      description:\n      'Get notified when someone shares a file or mentions you in a comment.',\n      href: '/docs',\n      cta: 'Learn more',\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: 'lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4',\n   },\n]\n\nexport default async function BentoDemo() {\n   return (\n      <BentoGrid className=\"lg:grid-rows-3\">\n         {features.map(feature => (\n            <BentoCard key={feature.name} {...feature} />\n         ))}\n      </BentoGrid>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/bento-demo-vertical.tsx",
+      "content": "import {\n   BellIcon,\n   CalendarIcon,\n   FileTextIcon,\n   GlobeIcon,\n   InputIcon,\n} from \"@radix-ui/react-icons\"\nimport { BentoCard, BentoGrid } from \"~/registry/default/ui/bento-grid\"\n\nconst features = [\n   {\n      Icon: FileTextIcon,\n      name: \"Save your files\",\n      description: \"We automatically save your files as you type.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3\",\n   },\n   {\n      Icon: InputIcon,\n      name: \"Full text search\",\n      description: \"Search through all your files in one place.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3\",\n   },\n   {\n      Icon: GlobeIcon,\n      name: \"Multilingual\",\n      description: \"Supports 100+ languages and counting.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4\",\n   },\n   {\n      Icon: CalendarIcon,\n      name: \"Calendar\",\n      description: \"Use the calendar to filter your files by date.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2\",\n   },\n   {\n      Icon: BellIcon,\n      name: \"Notifications\",\n      description:\n         \"Get notified when someone shares a file or mentions you in a comment.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4\",\n   },\n]\n\nexport default async function BentoDemo() {\n   return (\n      <BentoGrid className=\"lg:grid-rows-3\">\n         {features.map((feature) => (\n            <BentoCard key={feature.name} {...feature} />\n         ))}\n      </BentoGrid>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/bento-demo.json b/apps/web/public/r/styles/default/bento-demo.json
index 022a897f..de32ffea 100644
--- a/apps/web/public/r/styles/default/bento-demo.json
+++ b/apps/web/public/r/styles/default/bento-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "bento-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/bento-demo.tsx",
-      "content": "import { CalendarIcon, FileTextIcon, InputIcon } from '@radix-ui/react-icons'\nimport { Share2Icon } from 'lucide-react'\nimport { Calendar } from '~/components/ui/calendar'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/components/ui/command'\nimport { ny } from '~/lib/utils'\nimport AnimatedBeamMultipleOutputDemo from '~/registry/default/example/animated-beam-multiple-outputs'\nimport { BentoCard, BentoGrid } from '~/registry/default/ui/bento-grid'\nimport Marquee from '~/registry/default/ui/marquee'\n\nconst files = [\n   {\n      name: 'bitcoin.pdf',\n      body: 'Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.',\n   },\n   {\n      name: 'finances.xlsx',\n      body: 'A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.',\n   },\n   {\n      name: 'logo.svg',\n      body: 'Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.',\n   },\n   {\n      name: 'keys.gpg',\n      body: 'GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.',\n   },\n   {\n      name: 'seed.txt',\n      body: 'A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.',\n   },\n]\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: 'Payment received',\n      description: 'Nyxb UI',\n      time: '15m ago',\n\n      icon: '💸',\n      color: '#00C9A7',\n   },\n   {\n      name: 'User signed up',\n      description: 'Nyxb UI',\n      time: '10m ago',\n      icon: '👤',\n      color: '#FFB800',\n   },\n   {\n      name: 'New message',\n      description: 'Nyxb UI',\n      time: '5m ago',\n      icon: '💬',\n      color: '#FF3D71',\n   },\n   {\n      name: 'New event',\n      description: 'Nyxb UI',\n      time: '2m ago',\n      icon: '🗞️',\n      color: '#1E86FF',\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={ny(\n            'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4',\n            // animation styles\n            'transition-all duration-200 ease-in-out hover:scale-[103%]',\n            // light styles\n            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',\n            // dark styles\n            'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nconst features = [\n   {\n      Icon: FileTextIcon,\n      name: 'Save your files',\n      description: 'We automatically save your files as you type.',\n      href: '/docs',\n      cta: 'Learn more',\n      className: 'col-span-3 lg:col-span-1',\n      background: (\n         <Marquee\n            pauseOnHover\n            className=\"absolute top-10 [--duration:20s] [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] \"\n         >\n            {files.map((f, idx) => (\n               <figure\n                  key={idx}\n                  className={ny(\n                     'relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4',\n                     'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',\n                     'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',\n                     'transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none',\n                  )}\n               >\n                  <div className=\"flex flex-row items-center gap-2\">\n                     <div className=\"flex flex-col\">\n                        <figcaption className=\"text-sm font-medium dark:text-white \">\n                           {f.name}\n                        </figcaption>\n                     </div>\n                  </div>\n                  <blockquote className=\"mt-2 text-xs\">{f.body}</blockquote>\n               </figure>\n            ))}\n         </Marquee>\n      ),\n   },\n   {\n      Icon: InputIcon,\n      name: 'Full text search',\n      description: 'Search through all your files in one place.',\n      href: '/docs',\n      cta: 'Learn more',\n      className: 'col-span-3 lg:col-span-2',\n      background: (\n         <Command className=\"absolute right-10 top-10 w-[70%] origin-top translate-x-0 border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:-translate-x-10\">\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n               <CommandEmpty>No results found.</CommandEmpty>\n               <CommandGroup heading=\"Suggestions\">\n                  <CommandItem>screenshot.png</CommandItem>\n                  <CommandItem>bitcoin.pdf</CommandItem>\n                  <CommandItem>finances.xlsx</CommandItem>\n                  <CommandItem>logo.svg</CommandItem>\n                  <CommandItem>keys.gpg</CommandItem>\n                  <CommandItem>seed.txt</CommandItem>\n               </CommandGroup>\n            </CommandList>\n         </Command>\n      ),\n   },\n   {\n      Icon: Share2Icon,\n      name: 'Integrations',\n      description: 'Supports 100+ integrations and counting.',\n      href: '/docs',\n      cta: 'Learn more',\n      className: 'col-span-3 lg:col-span-2',\n      background: (\n         <AnimatedBeamMultipleOutputDemo className=\"absolute right-2 top-4 h-[300px] w-[600px] border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105\" />\n      ),\n   },\n   {\n      Icon: CalendarIcon,\n      name: 'Calendar',\n      description: 'Use the calendar to filter your files by date.',\n      className: 'col-span-3 lg:col-span-1',\n      href: '/docs',\n      cta: 'Learn more',\n      background: (\n         <Calendar\n            mode=\"single\"\n            selected={new Date(2022, 4, 11, 0, 0, 0)}\n            className=\"absolute right-0 top-10 origin-top rounded-md border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:scale-105\"\n         />\n      ),\n   },\n]\n\nexport default function BentoDemo() {\n   return (\n      <BentoGrid>\n         {features.map((feature, idx) => (\n            <BentoCard key={idx} {...feature} />\n         ))}\n      </BentoGrid>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/bento-demo.tsx",
+      "content": "import { CalendarIcon, FileTextIcon, InputIcon } from \"@radix-ui/react-icons\"\nimport { Share2Icon } from \"lucide-react\"\nimport { Calendar } from \"~/components/ui/calendar\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/components/ui/command\"\nimport { ny } from \"~/lib/utils\"\nimport AnimatedBeamMultipleOutputDemo from \"~/registry/default/examples/animated-beam-multiple-outputs\"\nimport { BentoCard, BentoGrid } from \"~/registry/default/ui/bento-grid\"\nimport Marquee from \"~/registry/default/ui/marquee\"\n\nconst files = [\n   {\n      name: \"bitcoin.pdf\",\n      body: \"Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.\",\n   },\n   {\n      name: \"finances.xlsx\",\n      body: \"A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.\",\n   },\n   {\n      name: \"logo.svg\",\n      body: \"Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.\",\n   },\n   {\n      name: \"keys.gpg\",\n      body: \"GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.\",\n   },\n   {\n      name: \"seed.txt\",\n      body: \"A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.\",\n   },\n]\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: \"Payment received\",\n      description: \"Nyxb UI\",\n      time: \"15m ago\",\n\n      icon: \"💸\",\n      color: \"#00C9A7\",\n   },\n   {\n      name: \"User signed up\",\n      description: \"Nyxb UI\",\n      time: \"10m ago\",\n      icon: \"👤\",\n      color: \"#FFB800\",\n   },\n   {\n      name: \"New message\",\n      description: \"Nyxb UI\",\n      time: \"5m ago\",\n      icon: \"💬\",\n      color: \"#FF3D71\",\n   },\n   {\n      name: \"New event\",\n      description: \"Nyxb UI\",\n      time: \"2m ago\",\n      icon: \"🗞️\",\n      color: \"#1E86FF\",\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={ny(\n            \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4\",\n            // animation styles\n            \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nconst features = [\n   {\n      Icon: FileTextIcon,\n      name: \"Save your files\",\n      description: \"We automatically save your files as you type.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      className: \"col-span-3 lg:col-span-1\",\n      background: (\n         <Marquee\n            pauseOnHover\n            className=\"absolute top-10 [--duration:20s] [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] \"\n         >\n            {files.map((f, idx) => (\n               <figure\n                  key={idx}\n                  className={ny(\n                     \"relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4\",\n                     \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n                     \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n                     \"transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none\",\n                  )}\n               >\n                  <div className=\"flex flex-row items-center gap-2\">\n                     <div className=\"flex flex-col\">\n                        <figcaption className=\"text-sm font-medium dark:text-white \">\n                           {f.name}\n                        </figcaption>\n                     </div>\n                  </div>\n                  <blockquote className=\"mt-2 text-xs\">{f.body}</blockquote>\n               </figure>\n            ))}\n         </Marquee>\n      ),\n   },\n   {\n      Icon: InputIcon,\n      name: \"Full text search\",\n      description: \"Search through all your files in one place.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      className: \"col-span-3 lg:col-span-2\",\n      background: (\n         <Command className=\"absolute right-10 top-10 w-[70%] origin-top translate-x-0 border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:-translate-x-10\">\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n               <CommandEmpty>No results found.</CommandEmpty>\n               <CommandGroup heading=\"Suggestions\">\n                  <CommandItem>screenshot.png</CommandItem>\n                  <CommandItem>bitcoin.pdf</CommandItem>\n                  <CommandItem>finances.xlsx</CommandItem>\n                  <CommandItem>logo.svg</CommandItem>\n                  <CommandItem>keys.gpg</CommandItem>\n                  <CommandItem>seed.txt</CommandItem>\n               </CommandGroup>\n            </CommandList>\n         </Command>\n      ),\n   },\n   {\n      Icon: Share2Icon,\n      name: \"Integrations\",\n      description: \"Supports 100+ integrations and counting.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      className: \"col-span-3 lg:col-span-2\",\n      background: (\n         <AnimatedBeamMultipleOutputDemo className=\"absolute right-2 top-4 h-[300px] w-[600px] border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105\" />\n      ),\n   },\n   {\n      Icon: CalendarIcon,\n      name: \"Calendar\",\n      description: \"Use the calendar to filter your files by date.\",\n      className: \"col-span-3 lg:col-span-1\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: (\n         <Calendar\n            mode=\"single\"\n            selected={new Date(2022, 4, 11, 0, 0, 0)}\n            className=\"absolute right-0 top-10 origin-top rounded-md border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:scale-105\"\n         />\n      ),\n   },\n]\n\nexport default function BentoDemo() {\n   return (\n      <BentoGrid>\n         {features.map((feature, idx) => (\n            <BentoCard key={idx} {...feature} />\n         ))}\n      </BentoGrid>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/bento-grid.json b/apps/web/public/r/styles/default/bento-grid.json
index 5c8840d0..b4a4778b 100644
--- a/apps/web/public/r/styles/default/bento-grid.json
+++ b/apps/web/public/r/styles/default/bento-grid.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "bento-grid",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-icons"
   ],
   "files": [
     {
       "path": "ui/bento-grid.tsx",
-      "content": "import { ArrowRightIcon } from '@radix-ui/react-icons'\nimport type { ReactNode } from 'react'\nimport { Button } from '~/components/ui/button'\nimport { ny } from '~/lib/utils'\n\nfunction BentoGrid({\n   children,\n   className,\n}: {\n   children: ReactNode\n   className?: string\n}) {\n   return (\n      <div\n         className={ny(\n            'grid w-full auto-rows-[22rem] grid-cols-3 gap-4',\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n}\n\nfunction BentoCard({\n   name,\n   className,\n   background,\n   Icon,\n   description,\n   href,\n   cta,\n}: {\n   name: string\n   className: string\n   background: ReactNode\n   Icon: any\n   description: string\n   href: string\n   cta: string\n}) {\n   return (\n      <div\n         key={name}\n         className={ny(\n            'group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl',\n            // light styles\n            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',\n            // dark styles\n            'transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',\n            className,\n         )}\n      >\n         <div>{background}</div>\n         <div className=\"pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10\">\n            <Icon className=\"size-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75\" />\n            <h3 className=\"text-xl font-semibold text-neutral-700 dark:text-neutral-300\">\n               {name}\n            </h3>\n            <p className=\"max-w-lg text-neutral-400\">{description}</p>\n         </div>\n\n         <div\n            className={ny(\n               'pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100',\n            )}\n         >\n            <Button\n               variant=\"ghost\"\n               asChild\n               size=\"sm\"\n               className=\"pointer-events-auto\"\n            >\n               <a href={href}>\n                  {cta}\n                  <ArrowRightIcon className=\"ml-2 size-4\" />\n               </a>\n            </Button>\n         </div>\n         <div className=\"pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10\" />\n      </div>\n   )\n}\n\nexport { BentoCard, BentoGrid }\n",
-      "type": "registry:component",
+      "content": "import { ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport type { ReactNode } from \"react\"\nimport { Button } from \"~/components/ui/button\"\nimport { ny } from \"~/lib/utils\"\n\nfunction BentoGrid({\n   children,\n   className,\n}: {\n   children: ReactNode\n   className?: string\n}) {\n   return (\n      <div\n         className={ny(\n            \"grid w-full auto-rows-[22rem] grid-cols-3 gap-4\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n}\n\nfunction BentoCard({\n   name,\n   className,\n   background,\n   Icon,\n   description,\n   href,\n   cta,\n}: {\n   name: string\n   className: string\n   background: ReactNode\n   Icon: any\n   description: string\n   href: string\n   cta: string\n}) {\n   return (\n      <div\n         key={name}\n         className={ny(\n            \"group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n            className,\n         )}\n      >\n         <div>{background}</div>\n         <div className=\"pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10\">\n            <Icon className=\"size-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75\" />\n            <h3 className=\"text-xl font-semibold text-neutral-700 dark:text-neutral-300\">\n               {name}\n            </h3>\n            <p className=\"max-w-lg text-neutral-400\">{description}</p>\n         </div>\n\n         <div\n            className={ny(\n               \"pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100\",\n            )}\n         >\n            <Button\n               variant=\"ghost\"\n               asChild\n               size=\"sm\"\n               className=\"pointer-events-auto\"\n            >\n               <a href={href}>\n                  {cta}\n                  <ArrowRightIcon className=\"ml-2 size-4\" />\n               </a>\n            </Button>\n         </div>\n         <div className=\"pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10\" />\n      </div>\n   )\n}\n\nexport { BentoCard, BentoGrid }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/blur-fade-demo.json b/apps/web/public/r/styles/default/blur-fade-demo.json
index 135afc25..1258519d 100644
--- a/apps/web/public/r/styles/default/blur-fade-demo.json
+++ b/apps/web/public/r/styles/default/blur-fade-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "blur-fade-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/blur-fade-demo.tsx",
-      "content": "import BlurFade from '~/registry/default/ui/blur-fade'\n\nconst images = Array.from({ length: 9 }, (_, i) => {\n   const isLandscape = i % 2 === 0\n   const width = isLandscape ? 800 : 600\n   const height = isLandscape ? 600 : 800\n   return `https://picsum.photos/seed/${i + 1}/${width}/${height}`\n})\n\nexport default function BlurFadeDemo() {\n   return (\n      <section id=\"photos\">\n         <div className=\"columns-2 gap-4 sm:columns-3\">\n            {images.map((imageUrl, idx) => (\n               <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>\n                  <img\n                     className=\"mb-4 size-full rounded-lg object-contain\"\n                     src={imageUrl}\n                     alt={`Random stock image ${idx + 1}`}\n                  />\n               </BlurFade>\n            ))}\n         </div>\n      </section>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/blur-fade-demo.tsx",
+      "content": "import BlurFade from \"~/registry/default/ui/blur-fade\"\n\nconst images = Array.from({ length: 9 }, (_, i) => {\n   const isLandscape = i % 2 === 0\n   const width = isLandscape ? 800 : 600\n   const height = isLandscape ? 600 : 800\n   return `https://picsum.photos/seed/${i + 1}/${width}/${height}`\n})\n\nexport default function BlurFadeDemo() {\n   return (\n      <section id=\"photos\">\n         <div className=\"columns-2 gap-4 sm:columns-3\">\n            {images.map((imageUrl, idx) => (\n               <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>\n                  <img\n                     className=\"mb-4 size-full rounded-lg object-contain\"\n                     src={imageUrl}\n                     alt={`Random stock image ${idx + 1}`}\n                  />\n               </BlurFade>\n            ))}\n         </div>\n      </section>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/blur-fade-text-demo.json b/apps/web/public/r/styles/default/blur-fade-text-demo.json
index b33382db..917654d0 100644
--- a/apps/web/public/r/styles/default/blur-fade-text-demo.json
+++ b/apps/web/public/r/styles/default/blur-fade-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "blur-fade-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/blur-fade-text-demo.tsx",
-      "content": "import BlurFade from '~/registry/default/ui/blur-fade'\n\nexport default function BlurFadeTextDemo() {\n   return (\n      <section id=\"header\">\n         <BlurFade delay={0.25} inView>\n            <h2 className=\"text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none\">\n               Hello World 👋\n            </h2>\n         </BlurFade>\n         <BlurFade delay={0.25 * 2} inView>\n            <span className=\"text-pretty text-xl tracking-tighter sm:text-3xl xl:text-4xl/none\">\n               Nice to meet you\n            </span>\n         </BlurFade>\n      </section>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/blur-fade-text-demo.tsx",
+      "content": "import BlurFade from \"~/registry/default/ui/blur-fade\"\n\nexport default function BlurFadeTextDemo() {\n   return (\n      <section id=\"header\">\n         <BlurFade delay={0.25} inView>\n            <h2 className=\"text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none\">\n               Hello World 👋\n            </h2>\n         </BlurFade>\n         <BlurFade delay={0.25 * 2} inView>\n            <span className=\"text-pretty text-xl tracking-tighter sm:text-3xl xl:text-4xl/none\">\n               Nice to meet you\n            </span>\n         </BlurFade>\n      </section>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/blur-fade.json b/apps/web/public/r/styles/default/blur-fade.json
index 5a687a3d..9364ca37 100644
--- a/apps/web/public/r/styles/default/blur-fade.json
+++ b/apps/web/public/r/styles/default/blur-fade.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "blur-fade",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/blur-fade.tsx",
-      "content": "'use client'\n\nimport { useRef } from 'react'\nimport type { Variants } from 'framer-motion'\nimport { AnimatePresence, motion, useInView } from 'framer-motion'\n\ninterface BlurFadeProps {\n   children: React.ReactNode\n   className?: string\n   variant?: {\n      hidden: { y: number }\n      visible: { y: number }\n   }\n   duration?: number\n   delay?: number\n   yOffset?: number\n   inView?: boolean\n   inViewMargin?: `${number}px`\n   blur?: string\n}\n\nexport default function BlurFade({\n   children,\n   className,\n   variant,\n   duration = 0.4,\n   delay = 0,\n   yOffset = 6,\n   inView = false,\n   inViewMargin = '-50px',\n   blur = '6px',\n}: BlurFadeProps) {\n   const ref = useRef(null)\n   const inViewResult = useInView(ref, { once: true, margin: inViewMargin })\n   const isInView = !inView || inViewResult\n   const defaultVariants: Variants = {\n      hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },\n      visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },\n   }\n   const combinedVariants = variant || defaultVariants\n   return (\n      <AnimatePresence>\n         <motion.div\n            ref={ref}\n            initial=\"hidden\"\n            animate={isInView ? 'visible' : 'hidden'}\n            exit=\"hidden\"\n            variants={combinedVariants}\n            transition={{\n               delay: 0.04 + delay,\n               duration,\n               ease: 'easeOut',\n            }}\n            className={className}\n         >\n            {children}\n         </motion.div>\n      </AnimatePresence>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion, useInView } from \"framer-motion\"\nimport { useRef } from \"react\"\n\ninterface BlurFadeProps {\n   children: React.ReactNode\n   className?: string\n   variant?: {\n      hidden: { y: number }\n      visible: { y: number }\n   }\n   duration?: number\n   delay?: number\n   yOffset?: number\n   inView?: boolean\n   inViewMargin?: `${number}px`\n   blur?: string\n}\n\nexport default function BlurFade({\n   children,\n   className,\n   variant,\n   duration = 0.4,\n   delay = 0,\n   yOffset = 6,\n   inView = false,\n   inViewMargin = \"-50px\",\n   blur = \"6px\",\n}: BlurFadeProps) {\n   const ref = useRef(null)\n   const inViewResult = useInView(ref, { once: true, margin: inViewMargin })\n   const isInView = !inView || inViewResult\n   const defaultVariants: Variants = {\n      hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },\n      visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },\n   }\n   const combinedVariants = variant || defaultVariants\n   return (\n      <AnimatePresence>\n         <motion.div\n            ref={ref}\n            initial=\"hidden\"\n            animate={isInView ? \"visible\" : \"hidden\"}\n            exit=\"hidden\"\n            variants={combinedVariants}\n            transition={{\n               delay: 0.04 + delay,\n               duration,\n               ease: \"easeOut\",\n            }}\n            className={className}\n         >\n            {children}\n         </motion.div>\n      </AnimatePresence>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/blur-in-demo.json b/apps/web/public/r/styles/default/blur-in-demo.json
index 64e6ffb9..3accada9 100644
--- a/apps/web/public/r/styles/default/blur-in-demo.json
+++ b/apps/web/public/r/styles/default/blur-in-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "blur-in-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/blur-in-demo.tsx",
-      "content": "import BlurIn from '~/registry/default/ui/blur-in'\n\nfunction BlurInDemo() {\n   return (\n      <BlurIn\n         word=\"Blur In\"\n         className=\"text-4xl font-bold text-black dark:text-white\"\n      />\n   )\n}\nexport default BlurInDemo\n",
-      "type": "registry:component",
+      "path": "examples/blur-in-demo.tsx",
+      "content": "import BlurIn from \"~/registry/default/ui/blur-in\"\n\nfunction BlurInDemo() {\n   return (\n      <BlurIn\n         word=\"Blur In\"\n         className=\"text-4xl font-bold text-black dark:text-white\"\n      />\n   )\n}\nexport default BlurInDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/blur-in.json b/apps/web/public/r/styles/default/blur-in.json
index 66d048d2..bbecc1cc 100644
--- a/apps/web/public/r/styles/default/blur-in.json
+++ b/apps/web/public/r/styles/default/blur-in.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "blur-in",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/blur-in.tsx",
-      "content": "'use client'\nimport { motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface BlurIntProps {\n   word: string\n   className?: string\n   variant?: {\n      hidden: { filter: string, opacity: number }\n      visible: { filter: string, opacity: number }\n   }\n   duration?: number\n}\nfunction BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {\n   const defaultVariants = {\n      hidden: { filter: 'blur(10px)', opacity: 0 },\n      visible: { filter: 'blur(0px)', opacity: 1 },\n   }\n   const combinedVariants = variant || defaultVariants\n\n   return (\n      <motion.h1\n         initial=\"hidden\"\n         animate=\"visible\"\n         transition={{ duration }}\n         variants={combinedVariants}\n         className={ny(\n            className,\n            'font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]',\n         )}\n      >\n         {word}\n      </motion.h1>\n   )\n}\n\nexport default BlurIn\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport { motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface BlurIntProps {\n   word: string\n   className?: string\n   variant?: {\n      hidden: { filter: string; opacity: number }\n      visible: { filter: string; opacity: number }\n   }\n   duration?: number\n}\nfunction BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {\n   const defaultVariants = {\n      hidden: { filter: \"blur(10px)\", opacity: 0 },\n      visible: { filter: \"blur(0px)\", opacity: 1 },\n   }\n   const combinedVariants = variant || defaultVariants\n\n   return (\n      <motion.h1\n         initial=\"hidden\"\n         animate=\"visible\"\n         transition={{ duration }}\n         variants={combinedVariants}\n         className={ny(\n            className,\n            \"font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]\",\n         )}\n      >\n         {word}\n      </motion.h1>\n   )\n}\n\nexport default BlurIn\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/border-beam-demo.json b/apps/web/public/r/styles/default/border-beam-demo.json
index ccdf3f46..57f0192a 100644
--- a/apps/web/public/r/styles/default/border-beam-demo.json
+++ b/apps/web/public/r/styles/default/border-beam-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "border-beam-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/border-beam-demo.tsx",
-      "content": "import { BorderBeam } from '~/registry/default/ui/border-beam'\n\nexport default function BorderBeamDemo() {\n   return (\n      <div className=\"relative rounded-xl\">\n         <img\n            src=\"/dashboard-dark.png\"\n            alt=\"Hero Image\"\n            className=\"hidden w-[700px] rounded-[inherit] border object-contain shadow-lg dark:block\"\n         />\n         <img\n            src=\"/dashboard-light.png\"\n            alt=\"Hero Image\"\n            className=\"block w-[700px] rounded-[inherit] border object-contain shadow-lg dark:hidden\"\n         />\n\n         <BorderBeam size={250} duration={12} delay={9} />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/border-beam-demo.tsx",
+      "content": "import { BorderBeam } from \"~/registry/default/ui/border-beam\"\n\nexport default function BorderBeamDemo() {\n   return (\n      <div className=\"relative rounded-xl\">\n         <img\n            src=\"/dashboard-dark.png\"\n            alt=\"Hero Image\"\n            className=\"hidden w-[700px] rounded-[inherit] border object-contain shadow-lg dark:block\"\n         />\n         <img\n            src=\"/dashboard-light.png\"\n            alt=\"Hero Image\"\n            className=\"block w-[700px] rounded-[inherit] border object-contain shadow-lg dark:hidden\"\n         />\n\n         <BorderBeam size={250} duration={12} delay={9} />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/border-beam.json b/apps/web/public/r/styles/default/border-beam.json
index 2e3179c5..fc3496b1 100644
--- a/apps/web/public/r/styles/default/border-beam.json
+++ b/apps/web/public/r/styles/default/border-beam.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "border-beam",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/border-beam.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\ninterface BorderBeamProps {\n   className?: string\n   size?: number\n   duration?: number\n   borderWidth?: number\n   anchor?: number\n   colorFrom?: string\n   colorTo?: string\n   delay?: number\n}\n\nexport function BorderBeam({\n   className,\n   size = 200,\n   duration = 15,\n   anchor = 90,\n   borderWidth = 1.5,\n   colorFrom = '#ffaa40',\n   colorTo = '#9c40ff',\n   delay = 0,\n}: BorderBeamProps) {\n   return (\n      <div\n         style={\n            {\n               '--size': size,\n               '--duration': duration,\n               '--anchor': anchor,\n               '--border-width': borderWidth,\n               '--color-from': colorFrom,\n               '--color-to': colorTo,\n               '--delay': `-${delay}s`,\n            } as React.CSSProperties\n         }\n         className={ny(\n            'pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]',\n\n            // mask styles\n            '![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]',\n\n            // pseudo styles\n            'after:animate-border-beam after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]',\n            className,\n         )}\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/lib/utils\"\n\ninterface BorderBeamProps {\n   className?: string\n   size?: number\n   duration?: number\n   borderWidth?: number\n   anchor?: number\n   colorFrom?: string\n   colorTo?: string\n   delay?: number\n}\n\nexport function BorderBeam({\n   className,\n   size = 200,\n   duration = 15,\n   anchor = 90,\n   borderWidth = 1.5,\n   colorFrom = \"#ffaa40\",\n   colorTo = \"#9c40ff\",\n   delay = 0,\n}: BorderBeamProps) {\n   return (\n      <div\n         style={\n            {\n               \"--size\": size,\n               \"--duration\": duration,\n               \"--anchor\": anchor,\n               \"--border-width\": borderWidth,\n               \"--color-from\": colorFrom,\n               \"--color-to\": colorTo,\n               \"--delay\": `-${delay}s`,\n            } as React.CSSProperties\n         }\n         className={ny(\n            \"pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]\",\n\n            // mask styles\n            \"![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]\",\n\n            // pseudo styles\n            \"after:animate-border-beam after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]\",\n            className,\n         )}\n      />\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/box-reveal-demo.json b/apps/web/public/r/styles/default/box-reveal-demo.json
index 92fdd208..b4ad0afd 100644
--- a/apps/web/public/r/styles/default/box-reveal-demo.json
+++ b/apps/web/public/r/styles/default/box-reveal-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "box-reveal-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/box-reveal-demo.tsx",
-      "content": "import BoxReveal from '~/registry/default/ui/box-reveal'\n\nimport { Button } from '~/components/ui/button'\n\nexport default async function BoxRevealDemo() {\n   return (\n      <div className=\"size-full max-w-lg items-center justify-center overflow-hidden pt-8\">\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <p className=\"text-[3.5rem] font-semibold\">\n               Nyxb UI\n               <span className=\"text-[#5046e6]\">.</span>\n            </p>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <h2 className=\"mt-[.5rem] text-[1rem]\">\n               UI library for\n               {' '}\n               <span className=\"text-[#5046e6]\">Design Engineers</span>\n            </h2>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <div className=\"mt-6\">\n               <p>\n                  -&gt; 20+ free and open-source animated components built with\n                  <span className=\"font-semibold text-[#5046e6]\"> React</span>\n                  ,\n                  <span className=\"font-semibold text-[#5046e6]\"> Typescript</span>\n                  ,\n                  <span className=\"font-semibold text-[#5046e6]\"> Tailwind CSS</span>\n                  ,\n                  and\n                  <span className=\"font-semibold text-[#5046e6]\"> Framer Motion</span>\n                  .\n                  {' '}\n                  <br />\n                  -&gt; 100% open-source, and customizable.\n                  {' '}\n                  <br />\n               </p>\n            </div>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <Button className=\"mt-[1.6rem] bg-[#5046e6]\">Explore</Button>\n         </BoxReveal>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/box-reveal-demo.tsx",
+      "content": "import BoxReveal from \"~/registry/default/ui/box-reveal\"\n\nimport { Button } from \"~/components/ui/button\"\n\nexport default async function BoxRevealDemo() {\n   return (\n      <div className=\"size-full max-w-lg items-center justify-center overflow-hidden pt-8\">\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <p className=\"text-[3.5rem] font-semibold\">\n               Nyxb UI\n               <span className=\"text-[#5046e6]\">.</span>\n            </p>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <h2 className=\"mt-[.5rem] text-[1rem]\">\n               UI library for{\" \"}\n               <span className=\"text-[#5046e6]\">Design Engineers</span>\n            </h2>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <div className=\"mt-6\">\n               <p>\n                  -&gt; 20+ free and open-source animated components built with\n                  <span className=\"font-semibold text-[#5046e6]\"> React</span>,\n                  <span className=\"font-semibold text-[#5046e6]\">\n                     {\" \"}\n                     Typescript\n                  </span>\n                  ,\n                  <span className=\"font-semibold text-[#5046e6]\">\n                     {\" \"}\n                     Tailwind CSS\n                  </span>\n                  , and\n                  <span className=\"font-semibold text-[#5046e6]\">\n                     {\" \"}\n                     Framer Motion\n                  </span>\n                  . <br />\n                  -&gt; 100% open-source, and customizable. <br />\n               </p>\n            </div>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <Button className=\"mt-[1.6rem] bg-[#5046e6]\">Explore</Button>\n         </BoxReveal>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/box-reveal.json b/apps/web/public/r/styles/default/box-reveal.json
index 62a7a7c9..dcf2ba64 100644
--- a/apps/web/public/r/styles/default/box-reveal.json
+++ b/apps/web/public/r/styles/default/box-reveal.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "box-reveal",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/box-reveal.tsx",
-      "content": "'use client'\n\nimport { motion, useAnimation, useInView } from 'framer-motion'\nimport { useEffect, useRef } from 'react'\n\ninterface BoxRevealProps {\n   children: JSX.Element\n   width?: 'fit-content' | '100%'\n   boxColor?: string\n   duration?: number\n}\n\nexport function BoxReveal({\n   children,\n   width = 'fit-content',\n   boxColor,\n   duration,\n}: BoxRevealProps) {\n   const mainControls = useAnimation()\n   const slideControls = useAnimation()\n\n   const ref = useRef(null)\n   const isInView = useInView(ref, { once: true })\n\n   useEffect(() => {\n      if (isInView) {\n         slideControls.start('visible')\n         mainControls.start('visible')\n      }\n      else {\n         slideControls.start('hidden')\n         mainControls.start('hidden')\n      }\n   }, [isInView, mainControls, slideControls])\n\n   return (\n      <div ref={ref} style={{ position: 'relative', width, overflow: 'hidden' }}>\n         <motion.div\n            variants={{\n               hidden: { opacity: 0, y: 75 },\n               visible: { opacity: 1, y: 0 },\n            }}\n            initial=\"hidden\"\n            animate={mainControls}\n            transition={{ duration: duration || 0.5, delay: 0.25 }}\n         >\n            {children}\n         </motion.div>\n\n         <motion.div\n            variants={{\n               hidden: { left: 0 },\n               visible: { left: '100%' },\n            }}\n            initial=\"hidden\"\n            animate={slideControls}\n            transition={{ duration: duration || 0.5, ease: 'easeIn' }}\n            style={{\n               position: 'absolute',\n               top: 4,\n               bottom: 4,\n               left: 0,\n               right: 0,\n               zIndex: 20,\n               background: boxColor || '#5046e6',\n            }}\n         />\n      </div>\n   )\n}\n\nexport default BoxReveal\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion, useAnimation, useInView } from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\n\ninterface BoxRevealProps {\n   children: JSX.Element\n   width?: \"fit-content\" | \"100%\"\n   boxColor?: string\n   duration?: number\n}\n\nexport function BoxReveal({\n   children,\n   width = \"fit-content\",\n   boxColor,\n   duration,\n}: BoxRevealProps) {\n   const mainControls = useAnimation()\n   const slideControls = useAnimation()\n\n   const ref = useRef(null)\n   const isInView = useInView(ref, { once: true })\n\n   useEffect(() => {\n      if (isInView) {\n         slideControls.start(\"visible\")\n         mainControls.start(\"visible\")\n      } else {\n         slideControls.start(\"hidden\")\n         mainControls.start(\"hidden\")\n      }\n   }, [isInView, mainControls, slideControls])\n\n   return (\n      <div\n         ref={ref}\n         style={{ position: \"relative\", width, overflow: \"hidden\" }}\n      >\n         <motion.div\n            variants={{\n               hidden: { opacity: 0, y: 75 },\n               visible: { opacity: 1, y: 0 },\n            }}\n            initial=\"hidden\"\n            animate={mainControls}\n            transition={{ duration: duration || 0.5, delay: 0.25 }}\n         >\n            {children}\n         </motion.div>\n\n         <motion.div\n            variants={{\n               hidden: { left: 0 },\n               visible: { left: \"100%\" },\n            }}\n            initial=\"hidden\"\n            animate={slideControls}\n            transition={{ duration: duration || 0.5, ease: \"easeIn\" }}\n            style={{\n               position: \"absolute\",\n               top: 4,\n               bottom: 4,\n               left: 0,\n               right: 0,\n               zIndex: 20,\n               background: boxColor || \"#5046e6\",\n            }}\n         />\n      </div>\n   )\n}\n\nexport default BoxReveal\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/breadcrumb-demo.json b/apps/web/public/r/styles/default/breadcrumb-demo.json
index e11cb137..ad3142f5 100644
--- a/apps/web/public/r/styles/default/breadcrumb-demo.json
+++ b/apps/web/public/r/styles/default/breadcrumb-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "example/breadcrumb-demo.tsx",
-      "content": "import {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\n\nexport default function BreadcrumbDemo() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     <BreadcrumbEllipsis className=\"size-4\" />\n                     <span className=\"sr-only\">Toggle menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/breadcrumb-demo.tsx",
+      "content": "import {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\n\nexport default function BreadcrumbDemo() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     <BreadcrumbEllipsis className=\"size-4\" />\n                     <span className=\"sr-only\">Toggle menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/docs/components\">\n                  Components\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/breadcrumb-dropdown.json b/apps/web/public/r/styles/default/breadcrumb-dropdown.json
index 7f0f6bba..f8524bdb 100644
--- a/apps/web/public/r/styles/default/breadcrumb-dropdown.json
+++ b/apps/web/public/r/styles/default/breadcrumb-dropdown.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb-dropdown",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "example/breadcrumb-dropdown.tsx",
-      "content": "import { ChevronDown, Slash } from 'lucide-react'\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\n\nexport default function BreadcrumbWithDropdown() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <Slash />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     Components\n                     <ChevronDown className=\"size-4\" />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <Slash />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/breadcrumb-dropdown.tsx",
+      "content": "import { ChevronDown, Slash } from \"lucide-react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <Slash />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     Components\n                     <ChevronDown className=\"size-4\" />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <Slash />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/breadcrumb-ellipsis.json b/apps/web/public/r/styles/default/breadcrumb-ellipsis.json
index 4bd7337f..addceb45 100644
--- a/apps/web/public/r/styles/default/breadcrumb-ellipsis.json
+++ b/apps/web/public/r/styles/default/breadcrumb-ellipsis.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb-ellipsis",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "example/breadcrumb-ellipsis.tsx",
-      "content": "import Link from 'next/link'\n\nimport {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\n\nexport default function BreadcrumbCollapsed() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink asChild>\n                  <Link href=\"/\">Home</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbEllipsis />\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink asChild>\n                  <Link href=\"/docs/components\">Components</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/breadcrumb-ellipsis.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\n\nexport default function BreadcrumbCollapsed() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink asChild>\n                  <Link href=\"/\">Home</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbEllipsis />\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink asChild>\n                  <Link href=\"/docs/components\">Components</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/breadcrumb-link.json b/apps/web/public/r/styles/default/breadcrumb-link.json
index c2e61764..f7f56b38 100644
--- a/apps/web/public/r/styles/default/breadcrumb-link.json
+++ b/apps/web/public/r/styles/default/breadcrumb-link.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb-link",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "example/breadcrumb-link.tsx",
-      "content": "import Link from 'next/link'\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\n\nexport default function BreadcrumbWithCustomSeparator() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink>\n                  <Link href=\"/\">Home</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink>\n                  <Link href=\"/components\">Components</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/breadcrumb-link.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink>\n                  <Link href=\"/\">Home</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink>\n                  <Link href=\"/components\">Components</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/breadcrumb-responsive.json b/apps/web/public/r/styles/default/breadcrumb-responsive.json
index 7a932486..2fa91feb 100644
--- a/apps/web/public/r/styles/default/breadcrumb-responsive.json
+++ b/apps/web/public/r/styles/default/breadcrumb-responsive.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb-responsive",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "example/breadcrumb-responsive.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport Link from 'next/link'\n\nimport { useMediaQuery } from '~/hooks/use-media-query'\nimport {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from '~/registry/default/ui/drawer'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\n\nconst items = [\n   { href: '#', label: 'Home' },\n   { href: '#', label: 'Documentation' },\n   { href: '#', label: 'Building Your Application' },\n   { href: '#', label: 'Data Fetching' },\n   { label: 'Caching and Revalidating' },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery('(min-width: 768px)')\n\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            {items.length > ITEMS_TO_DISPLAY\n               ? (\n                     <>\n                        <BreadcrumbItem>\n                           {isDesktop\n                              ? (\n                                    <DropdownMenu open={open} onOpenChange={setOpen}>\n                                       <DropdownMenuTrigger\n                                          className=\"flex items-center gap-1\"\n                                          aria-label=\"Toggle menu\"\n                                       >\n                                          <BreadcrumbEllipsis className=\"size-4\" />\n                                       </DropdownMenuTrigger>\n                                       <DropdownMenuContent align=\"start\">\n                                          {items.slice(1, -2).map((item, index) => (\n                                             <DropdownMenuItem key={index}>\n                                                <Link href={item.href ? item.href : '#'}>\n                                                   {item.label}\n                                                </Link>\n                                             </DropdownMenuItem>\n                                          ))}\n                                       </DropdownMenuContent>\n                                    </DropdownMenu>\n                                 )\n                              : (\n                                    <Drawer open={open} onOpenChange={setOpen}>\n                                       <DrawerTrigger aria-label=\"Toggle Menu\">\n                                          <BreadcrumbEllipsis className=\"size-4\" />\n                                       </DrawerTrigger>\n                                       <DrawerContent>\n                                          <DrawerHeader className=\"text-left\">\n                                             <DrawerTitle>Navigate to</DrawerTitle>\n                                             <DrawerDescription>\n                                                Select a page to navigate to.\n                                             </DrawerDescription>\n                                          </DrawerHeader>\n                                          <div className=\"grid gap-1 px-4\">\n                                             {items.slice(1, -2).map((item, index) => (\n                                                <Link\n                                                   key={index}\n                                                   href={item.href ? item.href : '#'}\n                                                   className=\"py-1 text-sm\"\n                                                >\n                                                   {item.label}\n                                                </Link>\n                                             ))}\n                                          </div>\n                                          <DrawerFooter className=\"pt-4\">\n                                             <DrawerClose asChild>\n                                                <Button variant=\"outline\">Close</Button>\n                                             </DrawerClose>\n                                          </DrawerFooter>\n                                       </DrawerContent>\n                                    </Drawer>\n                                 )}\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator />\n                     </>\n                  )\n               : null}\n            {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n               <BreadcrumbItem key={index}>\n                  {item.href\n                     ? (\n                           <>\n                              <BreadcrumbLink\n                                 asChild\n                                 className=\"max-w-20 truncate md:max-w-none\"\n                              >\n                                 <Link href={item.href}>{item.label}</Link>\n                              </BreadcrumbLink>\n                              <BreadcrumbSeparator />\n                           </>\n                        )\n                     : (\n                           <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                              {item.label}\n                           </BreadcrumbPage>\n                        )}\n               </BreadcrumbItem>\n            ))}\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/breadcrumb-responsive.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"~/hooks/use-media-query\"\nimport {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"~/registry/default/ui/drawer\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\n\nconst items = [\n   { href: \"#\", label: \"Home\" },\n   { href: \"#\", label: \"Documentation\" },\n   { href: \"#\", label: \"Building Your Application\" },\n   { href: \"#\", label: \"Data Fetching\" },\n   { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href={items[0].href}>\n                  {items[0].label}\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            {items.length > ITEMS_TO_DISPLAY ? (\n               <>\n                  <BreadcrumbItem>\n                     {isDesktop ? (\n                        <DropdownMenu open={open} onOpenChange={setOpen}>\n                           <DropdownMenuTrigger\n                              className=\"flex items-center gap-1\"\n                              aria-label=\"Toggle menu\"\n                           >\n                              <BreadcrumbEllipsis className=\"size-4\" />\n                           </DropdownMenuTrigger>\n                           <DropdownMenuContent align=\"start\">\n                              {items.slice(1, -2).map((item, index) => (\n                                 <DropdownMenuItem key={index}>\n                                    <Link href={item.href ? item.href : \"#\"}>\n                                       {item.label}\n                                    </Link>\n                                 </DropdownMenuItem>\n                              ))}\n                           </DropdownMenuContent>\n                        </DropdownMenu>\n                     ) : (\n                        <Drawer open={open} onOpenChange={setOpen}>\n                           <DrawerTrigger aria-label=\"Toggle Menu\">\n                              <BreadcrumbEllipsis className=\"size-4\" />\n                           </DrawerTrigger>\n                           <DrawerContent>\n                              <DrawerHeader className=\"text-left\">\n                                 <DrawerTitle>Navigate to</DrawerTitle>\n                                 <DrawerDescription>\n                                    Select a page to navigate to.\n                                 </DrawerDescription>\n                              </DrawerHeader>\n                              <div className=\"grid gap-1 px-4\">\n                                 {items.slice(1, -2).map((item, index) => (\n                                    <Link\n                                       key={index}\n                                       href={item.href ? item.href : \"#\"}\n                                       className=\"py-1 text-sm\"\n                                    >\n                                       {item.label}\n                                    </Link>\n                                 ))}\n                              </div>\n                              <DrawerFooter className=\"pt-4\">\n                                 <DrawerClose asChild>\n                                    <Button variant=\"outline\">Close</Button>\n                                 </DrawerClose>\n                              </DrawerFooter>\n                           </DrawerContent>\n                        </Drawer>\n                     )}\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator />\n               </>\n            ) : null}\n            {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n               <BreadcrumbItem key={index}>\n                  {item.href ? (\n                     <>\n                        <BreadcrumbLink\n                           asChild\n                           className=\"max-w-20 truncate md:max-w-none\"\n                        >\n                           <Link href={item.href}>{item.label}</Link>\n                        </BreadcrumbLink>\n                        <BreadcrumbSeparator />\n                     </>\n                  ) : (\n                     <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                        {item.label}\n                     </BreadcrumbPage>\n                  )}\n               </BreadcrumbItem>\n            ))}\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/breadcrumb-separator.json b/apps/web/public/r/styles/default/breadcrumb-separator.json
index 12abe56a..7a336c76 100644
--- a/apps/web/public/r/styles/default/breadcrumb-separator.json
+++ b/apps/web/public/r/styles/default/breadcrumb-separator.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb-separator",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "example/breadcrumb-separator.tsx",
-      "content": "import { Slash } from 'lucide-react'\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\n\nexport default function BreadcrumbWithCustomSeparator() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <Slash />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <Slash />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/breadcrumb-separator.tsx",
+      "content": "import { Slash } from \"lucide-react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <Slash />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <Slash />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/breadcrumb.json b/apps/web/public/r/styles/default/breadcrumb.json
index f0367f7c..8855156e 100644
--- a/apps/web/public/r/styles/default/breadcrumb.json
+++ b/apps/web/public/r/styles/default/breadcrumb.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-slot"
   ],
   "files": [
     {
       "path": "ui/breadcrumb.tsx",
-      "content": "import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronRight, MoreHorizontal } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst Breadcrumb = React.forwardRef<\n   HTMLElement,\n   React.ComponentPropsWithoutRef<'nav'> & {\n      separator?: React.ReactNode\n   }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = 'Breadcrumb'\n\nconst BreadcrumbList = React.forwardRef<\n   HTMLOListElement,\n   React.ComponentPropsWithoutRef<'ol'>\n>(({ className, ...props }, ref) => (\n   <ol\n      ref={ref}\n      className={ny(\n         'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',\n         className,\n      )}\n      {...props}\n   />\n))\nBreadcrumbList.displayName = 'BreadcrumbList'\n\nconst BreadcrumbItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentPropsWithoutRef<'li'>\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={ny('inline-flex items-center gap-1.5', className)}\n      {...props}\n   />\n))\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\nconst BreadcrumbLink = React.forwardRef<\n   HTMLAnchorElement,\n   React.ComponentPropsWithoutRef<'a'> & {\n      asChild?: boolean\n   }\n>(({ asChild, className, ...props }, ref) => {\n   const Comp = asChild ? Slot : 'a'\n\n   return (\n      <Comp\n         ref={ref}\n         className={ny('hover:text-foreground transition-colors', className)}\n         {...props}\n      />\n   )\n})\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\nconst BreadcrumbPage = React.forwardRef<\n   HTMLSpanElement,\n   React.ComponentPropsWithoutRef<'span'>\n>(({ className, ...props }, ref) => (\n   <span\n      ref={ref}\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={ny('text-foreground font-normal', className)}\n      {...props}\n   />\n))\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\nfunction BreadcrumbSeparator({\n   children,\n   className,\n   ...props\n}: React.ComponentProps<'li'>) {\n   return (\n      <li\n         role=\"presentation\"\n         aria-hidden=\"true\"\n         className={ny('[&>svg]:size-3.5', className)}\n         {...props}\n      >\n         {children ?? <ChevronRight />}\n      </li>\n   )\n}\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\nfunction BreadcrumbEllipsis({\n   className,\n   ...props\n}: React.ComponentProps<'span'>) {\n   return (\n      <span\n         role=\"presentation\"\n         aria-hidden=\"true\"\n         className={ny('flex size-9 items-center justify-center', className)}\n         {...props}\n      >\n         <MoreHorizontal className=\"size-4\" />\n         <span className=\"sr-only\">More</span>\n      </span>\n   )\n}\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\nexport {\n   Breadcrumb,\n   BreadcrumbList,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n   BreadcrumbEllipsis,\n}\n",
-      "type": "registry:component",
+      "content": "import { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n   HTMLElement,\n   React.ComponentPropsWithoutRef<\"nav\"> & {\n      separator?: React.ReactNode\n   }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n   HTMLOListElement,\n   React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n   <ol\n      ref={ref}\n      className={ny(\n         \"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5\",\n         className,\n      )}\n      {...props}\n   />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={ny(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n   />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n   HTMLAnchorElement,\n   React.ComponentPropsWithoutRef<\"a\"> & {\n      asChild?: boolean\n   }\n>(({ asChild, className, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"a\"\n\n   return (\n      <Comp\n         ref={ref}\n         className={ny(\"hover:text-foreground transition-colors\", className)}\n         {...props}\n      />\n   )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n   HTMLSpanElement,\n   React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n   <span\n      ref={ref}\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={ny(\"text-foreground font-normal\", className)}\n      {...props}\n   />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nfunction BreadcrumbSeparator({\n   children,\n   className,\n   ...props\n}: React.ComponentProps<\"li\">) {\n   return (\n      <li\n         role=\"presentation\"\n         aria-hidden=\"true\"\n         className={ny(\"[&>svg]:size-3.5\", className)}\n         {...props}\n      >\n         {children ?? <ChevronRight />}\n      </li>\n   )\n}\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nfunction BreadcrumbEllipsis({\n   className,\n   ...props\n}: React.ComponentProps<\"span\">) {\n   return (\n      <span\n         role=\"presentation\"\n         aria-hidden=\"true\"\n         className={ny(\"flex size-9 items-center justify-center\", className)}\n         {...props}\n      >\n         <MoreHorizontal className=\"size-4\" />\n         <span className=\"sr-only\">More</span>\n      </span>\n   )\n}\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\n\nexport {\n   Breadcrumb,\n   BreadcrumbList,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n   BreadcrumbEllipsis,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/button-as-child.json b/apps/web/public/r/styles/default/button-as-child.json
index d8a6083a..b2432a48 100644
--- a/apps/web/public/r/styles/default/button-as-child.json
+++ b/apps/web/public/r/styles/default/button-as-child.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-as-child",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-as-child.tsx",
-      "content": "import Link from 'next/link'\n\nimport { Button } from '~/registry/default/ui/button'\n\nexport default function ButtonAsChild() {\n   return (\n      <Button asChild>\n         <Link href=\"/login\">Login</Link>\n      </Button>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-as-child.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"~/registry/default/ui/button\"\n\nexport default function ButtonAsChild() {\n   return (\n      <Button asChild>\n         <Link href=\"/login\">Login</Link>\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/button-demo.json b/apps/web/public/r/styles/default/button-demo.json
index 63457b03..2e145c9a 100644
--- a/apps/web/public/r/styles/default/button-demo.json
+++ b/apps/web/public/r/styles/default/button-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-demo.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\n\nexport default function ButtonDemo() {\n   return <Button>Button</Button>\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\n\nexport default function ButtonDemo() {\n   return <Button>Button</Button>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/button-destructive.json b/apps/web/public/r/styles/default/button-destructive.json
index d4493530..a34128f9 100644
--- a/apps/web/public/r/styles/default/button-destructive.json
+++ b/apps/web/public/r/styles/default/button-destructive.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-destructive",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-destructive.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\n\nexport default function ButtonDestructive() {\n   return <Button variant=\"destructive\">Destructive</Button>\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-destructive.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\n\nexport default function ButtonDestructive() {\n   return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/button-ghost.json b/apps/web/public/r/styles/default/button-ghost.json
index b5a6ccc9..0620f0e3 100644
--- a/apps/web/public/r/styles/default/button-ghost.json
+++ b/apps/web/public/r/styles/default/button-ghost.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-ghost",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-ghost.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\n\nexport default function ButtonGhost() {\n   return <Button variant=\"ghost\">Ghost</Button>\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-ghost.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\n\nexport default function ButtonGhost() {\n   return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/button-icon.json b/apps/web/public/r/styles/default/button-icon.json
index a153f35a..9ed81624 100644
--- a/apps/web/public/r/styles/default/button-icon.json
+++ b/apps/web/public/r/styles/default/button-icon.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-icon",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-icon.tsx",
-      "content": "import { ChevronRight } from 'lucide-react'\n\nimport { Button } from '~/registry/default/ui/button'\n\nexport default function ButtonIcon() {\n   return (\n      <Button variant=\"outline\" size=\"icon\">\n         <ChevronRight className=\"size-4\" />\n      </Button>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-icon.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\n\nexport default function ButtonIcon() {\n   return (\n      <Button variant=\"outline\" size=\"icon\">\n         <ChevronRight className=\"size-4\" />\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/button-link.json b/apps/web/public/r/styles/default/button-link.json
index df8b96ee..a9d86b4b 100644
--- a/apps/web/public/r/styles/default/button-link.json
+++ b/apps/web/public/r/styles/default/button-link.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-link",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-link.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\n\nexport default function ButtonLink() {\n   return <Button variant=\"link\">Link</Button>\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-link.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\n\nexport default function ButtonLink() {\n   return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/button-loading.json b/apps/web/public/r/styles/default/button-loading.json
index b1e691e2..17a5e51d 100644
--- a/apps/web/public/r/styles/default/button-loading.json
+++ b/apps/web/public/r/styles/default/button-loading.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-loading",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-loading.tsx",
-      "content": "import { Loader2 } from 'lucide-react'\n\nimport { Button } from '~/registry/default/ui/button'\n\nexport default function ButtonLoading() {\n   return (\n      <Button disabled>\n         <Loader2 className=\"mr-2 size-4 animate-spin\" />\n         Please wait\n      </Button>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\n\nexport default function ButtonLoading() {\n   return (\n      <Button disabled>\n         <Loader2 className=\"mr-2 size-4 animate-spin\" />\n         Please wait\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/button-outline.json b/apps/web/public/r/styles/default/button-outline.json
index e942c90a..1a7289b0 100644
--- a/apps/web/public/r/styles/default/button-outline.json
+++ b/apps/web/public/r/styles/default/button-outline.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-outline",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-outline.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\n\nexport default function ButtonOutline() {\n   return <Button variant=\"outline\">Outline</Button>\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-outline.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\n\nexport default function ButtonOutline() {\n   return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/button-secondary.json b/apps/web/public/r/styles/default/button-secondary.json
index 8a51c95f..6fbe4486 100644
--- a/apps/web/public/r/styles/default/button-secondary.json
+++ b/apps/web/public/r/styles/default/button-secondary.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-secondary",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-secondary.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\n\nexport default function ButtonSecondary() {\n   return <Button variant=\"secondary\">Secondary</Button>\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-secondary.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\n\nexport default function ButtonSecondary() {\n   return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/button-with-icon.json b/apps/web/public/r/styles/default/button-with-icon.json
index 3bf0326b..4b38c2a5 100644
--- a/apps/web/public/r/styles/default/button-with-icon.json
+++ b/apps/web/public/r/styles/default/button-with-icon.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-with-icon",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-with-icon.tsx",
-      "content": "import { Mail } from 'lucide-react'\n\nimport { Button } from '~/registry/default/ui/button'\n\nexport default function ButtonWithIcon() {\n   return (\n      <Button>\n         <Mail className=\"mr-2 size-4\" />\n         {' '}\n         Login with Email\n      </Button>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-with-icon.tsx",
+      "content": "import { Mail } from \"lucide-react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\n\nexport default function ButtonWithIcon() {\n   return (\n      <Button>\n         <Mail className=\"mr-2 size-4\" /> Login with Email\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/button.json b/apps/web/public/r/styles/default/button.json
index 341ea41d..adf00416 100644
--- a/apps/web/public/r/styles/default/button.json
+++ b/apps/web/public/r/styles/default/button.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-slot"
   ],
   "files": [
     {
       "path": "ui/button.tsx",
-      "content": "import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst buttonVariants = cva(\n   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n   {\n      variants: {\n         variant: {\n            default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n            destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n            outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n            secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n            ghost: 'hover:bg-accent hover:text-accent-foreground',\n            link: 'text-primary underline-offset-4 hover:underline',\n         },\n         size: {\n            default: 'h-10 px-4 py-2',\n            sm: 'h-9 rounded-md px-3',\n            lg: 'h-11 rounded-md px-8',\n            icon: 'h-10 w-10',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n         size: 'default',\n      },\n   },\n)\n\nexport interface ButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n   VariantProps<typeof buttonVariants> {\n   asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n   ({ className, variant, size, asChild = false, ...props }, ref) => {\n      const Comp = asChild ? Slot : 'button'\n      return (\n         <Comp\n            className={ny(buttonVariants({ variant, size, className }))}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n",
-      "type": "registry:component",
+      "content": "import { Slot } from \"@radix-ui/react-slot\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst buttonVariants = cva(\n   \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n            destructive:\n               \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n            outline:\n               \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n            secondary:\n               \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n            ghost: \"hover:bg-accent hover:text-accent-foreground\",\n            link: \"text-primary underline-offset-4 hover:underline\",\n         },\n         size: {\n            default: \"h-10 px-4 py-2\",\n            sm: \"h-9 rounded-md px-3\",\n            lg: \"h-11 rounded-md px-8\",\n            icon: \"h-10 w-10\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n         size: \"default\",\n      },\n   },\n)\n\nexport interface ButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n      VariantProps<typeof buttonVariants> {\n   asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n   ({ className, variant, size, asChild = false, ...props }, ref) => {\n      const Comp = asChild ? Slot : \"button\"\n      return (\n         <Comp\n            className={ny(buttonVariants({ variant, size, className }))}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/calendar-demo.json b/apps/web/public/r/styles/default/calendar-demo.json
index 0e9403fc..31964188 100644
--- a/apps/web/public/r/styles/default/calendar-demo.json
+++ b/apps/web/public/r/styles/default/calendar-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "calendar-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "calendar"
   ],
   "files": [
     {
-      "path": "example/calendar-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Calendar } from '~/registry/default/ui/calendar'\n\nexport default function CalendarDemo() {\n   const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n   return (\n      <Calendar\n         mode=\"single\"\n         selected={date}\n         onSelect={setDate}\n         className=\"rounded-md border\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"~/registry/default/ui/calendar\"\n\nexport default function CalendarDemo() {\n   const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n   return (\n      <Calendar\n         mode=\"single\"\n         selected={date}\n         onSelect={setDate}\n         className=\"rounded-md border\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/calendar-form.json b/apps/web/public/r/styles/default/calendar-form.json
index 900a3dc4..f805b055 100644
--- a/apps/web/public/r/styles/default/calendar-form.json
+++ b/apps/web/public/r/styles/default/calendar-form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "calendar-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "calendar",
     "form",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/calendar-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { format } from 'date-fns'\nimport { CalendarIcon } from 'lucide-react'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport { Calendar } from '~/registry/default/ui/calendar'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/default/ui/popover'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst FormSchema = z.object({\n   dob: z.date({\n      required_error: 'A date of birth is required.',\n   }),\n})\n\nexport default function CalendarForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"dob\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Date of birth</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 className={ny(\n                                    'w-[240px] pl-3 text-left font-normal',\n                                    !field.value && 'text-muted-foreground',\n                                 )}\n                              >\n                                 {field.value\n                                    ? (\n                                          format(field.value, 'PPP')\n                                       )\n                                    : (\n                                          <span>Pick a date</span>\n                                       )}\n                                 <CalendarIcon className=\"ml-auto size-4 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                           <Calendar\n                              mode=\"single\"\n                              selected={field.value}\n                              onSelect={field.onChange}\n                              disabled={date =>\n                                 date > new Date() || date < new Date('1900-01-01')}\n                              initialFocus\n                           />\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        Your date of birth is used to calculate your age.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/calendar-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Calendar } from \"~/registry/default/ui/calendar\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst FormSchema = z.object({\n   dob: z.date({\n      required_error: \"A date of birth is required.\",\n   }),\n})\n\nexport default function CalendarForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"dob\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Date of birth</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 className={ny(\n                                    \"w-[240px] pl-3 text-left font-normal\",\n                                    !field.value && \"text-muted-foreground\",\n                                 )}\n                              >\n                                 {field.value ? (\n                                    format(field.value, \"PPP\")\n                                 ) : (\n                                    <span>Pick a date</span>\n                                 )}\n                                 <CalendarIcon className=\"ml-auto size-4 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                           <Calendar\n                              mode=\"single\"\n                              selected={field.value}\n                              onSelect={field.onChange}\n                              disabled={(date) =>\n                                 date > new Date() ||\n                                 date < new Date(\"1900-01-01\")\n                              }\n                              initialFocus\n                           />\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        Your date of birth is used to calculate your age.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/calendar.json b/apps/web/public/r/styles/default/calendar.json
index 2a3a2ab4..8612c32f 100644
--- a/apps/web/public/r/styles/default/calendar.json
+++ b/apps/web/public/r/styles/default/calendar.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "calendar",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "react-day-picker@8.10.1",
     "date-fns"
@@ -11,8 +13,8 @@
   "files": [
     {
       "path": "ui/calendar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { DayPicker } from 'react-day-picker'\n\nimport { ny } from '~/lib/utils'\nimport { buttonVariants } from '~/registry/default/ui/button'\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n   className,\n   classNames,\n   showOutsideDays = true,\n   ...props\n}: CalendarProps) {\n   return (\n      <DayPicker\n         showOutsideDays={showOutsideDays}\n         className={ny('p-3', className)}\n         classNames={{\n            months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',\n            month: 'space-y-4',\n            caption: 'flex justify-center pt-1 relative items-center',\n            caption_label: 'text-sm font-medium',\n            nav: 'space-x-1 flex items-center',\n            nav_button: ny(\n               buttonVariants({ variant: 'outline' }),\n               'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n            ),\n            nav_button_previous: 'absolute left-1',\n            nav_button_next: 'absolute right-1',\n            table: 'w-full border-collapse space-y-1',\n            head_row: 'flex',\n            head_cell:\n          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',\n            row: 'flex w-full mt-2',\n            cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',\n            day: ny(\n               buttonVariants({ variant: 'ghost' }),\n               'size-9 p-0 font-normal aria-selected:opacity-100',\n            ),\n            day_range_end: 'day-range-end',\n            day_selected:\n          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',\n            day_today: 'bg-accent text-accent-foreground',\n            day_outside:\n          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',\n            day_disabled: 'text-muted-foreground opacity-50',\n            day_range_middle:\n          'aria-selected:bg-accent aria-selected:text-accent-foreground',\n            day_hidden: 'invisible',\n            ...classNames,\n         }}\n         components={{\n            IconLeft: ({ ...props }) => <ChevronLeft className=\"size-4\" />,\n            IconRight: ({ ...props }) => <ChevronRight className=\"size-4\" />,\n         }}\n         {...props}\n      />\n   )\n}\nCalendar.displayName = 'Calendar'\n\nexport { Calendar }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport type * as React from \"react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { ny } from \"~/lib/utils\"\nimport { buttonVariants } from \"~/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n   className,\n   classNames,\n   showOutsideDays = true,\n   ...props\n}: CalendarProps) {\n   return (\n      <DayPicker\n         showOutsideDays={showOutsideDays}\n         className={ny(\"p-3\", className)}\n         classNames={{\n            months:\n               \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n            month: \"space-y-4\",\n            caption: \"flex justify-center pt-1 relative items-center\",\n            caption_label: \"text-sm font-medium\",\n            nav: \"space-x-1 flex items-center\",\n            nav_button: ny(\n               buttonVariants({ variant: \"outline\" }),\n               \"size-7 bg-transparent p-0 opacity-50 hover:opacity-100\",\n            ),\n            nav_button_previous: \"absolute left-1\",\n            nav_button_next: \"absolute right-1\",\n            table: \"w-full border-collapse space-y-1\",\n            head_row: \"flex\",\n            head_cell:\n               \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n            row: \"flex w-full mt-2\",\n            cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n            day: ny(\n               buttonVariants({ variant: \"ghost\" }),\n               \"size-9 p-0 font-normal aria-selected:opacity-100\",\n            ),\n            day_range_end: \"day-range-end\",\n            day_selected:\n               \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n            day_today: \"bg-accent text-accent-foreground\",\n            day_outside:\n               \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n            day_disabled: \"text-muted-foreground opacity-50\",\n            day_range_middle:\n               \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n            day_hidden: \"invisible\",\n            ...classNames,\n         }}\n         components={{\n            IconLeft: ({ ...props }) => <ChevronLeft className=\"size-4\" />,\n            IconRight: ({ ...props }) => <ChevronRight className=\"size-4\" />,\n         }}\n         {...props}\n      />\n   )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/card-demo.json b/apps/web/public/r/styles/default/card-demo.json
index 66098cd1..bb5e4b25 100644
--- a/apps/web/public/r/styles/default/card-demo.json
+++ b/apps/web/public/r/styles/default/card-demo.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "card-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "button",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/card-demo.tsx",
-      "content": "import { BellRing, Check } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport { Switch } from '~/registry/default/ui/switch'\n\nconst notifications = [\n   {\n      title: 'Your call has been confirmed.',\n      description: '1 hour ago',\n   },\n   {\n      title: 'You have a new message!',\n      description: '1 hour ago',\n   },\n   {\n      title: 'Your subscription is expiring soon!',\n      description: '2 hours ago',\n   },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n   return (\n      <Card className={ny('w-[380px]', className)} {...props}>\n         <CardHeader>\n            <CardTitle>Notifications</CardTitle>\n            <CardDescription>You have 3 unread messages.</CardDescription>\n         </CardHeader>\n         <CardContent className=\"grid gap-4\">\n            <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n               <BellRing />\n               <div className=\"flex-1 space-y-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                     Push Notifications\n                  </p>\n                  <p className=\"text-muted-foreground text-sm\">\n                     Send notifications to device.\n                  </p>\n               </div>\n               <Switch />\n            </div>\n            <div>\n               {notifications.map((notification, index) => (\n                  <div\n                     key={index}\n                     className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n                  >\n                     <span className=\"flex size-2 translate-y-1 rounded-full bg-sky-500\" />\n                     <div className=\"space-y-1\">\n                        <p className=\"text-sm font-medium leading-none\">\n                           {notification.title}\n                        </p>\n                        <p className=\"text-muted-foreground text-sm\">\n                           {notification.description}\n                        </p>\n                     </div>\n                  </div>\n               ))}\n            </div>\n         </CardContent>\n         <CardFooter>\n            <Button className=\"w-full\">\n               <Check className=\"mr-2 size-4\" />\n               {' '}\n               Mark all as read\n            </Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport { Switch } from \"~/registry/default/ui/switch\"\n\nconst notifications = [\n   {\n      title: \"Your call has been confirmed.\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"You have a new message!\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"Your subscription is expiring soon!\",\n      description: \"2 hours ago\",\n   },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n   return (\n      <Card className={ny(\"w-[380px]\", className)} {...props}>\n         <CardHeader>\n            <CardTitle>Notifications</CardTitle>\n            <CardDescription>You have 3 unread messages.</CardDescription>\n         </CardHeader>\n         <CardContent className=\"grid gap-4\">\n            <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n               <BellRing />\n               <div className=\"flex-1 space-y-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                     Push Notifications\n                  </p>\n                  <p className=\"text-muted-foreground text-sm\">\n                     Send notifications to device.\n                  </p>\n               </div>\n               <Switch />\n            </div>\n            <div>\n               {notifications.map((notification, index) => (\n                  <div\n                     key={index}\n                     className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n                  >\n                     <span className=\"flex size-2 translate-y-1 rounded-full bg-sky-500\" />\n                     <div className=\"space-y-1\">\n                        <p className=\"text-sm font-medium leading-none\">\n                           {notification.title}\n                        </p>\n                        <p className=\"text-muted-foreground text-sm\">\n                           {notification.description}\n                        </p>\n                     </div>\n                  </div>\n               ))}\n            </div>\n         </CardContent>\n         <CardFooter>\n            <Button className=\"w-full\">\n               <Check className=\"mr-2 size-4\" /> Mark all as read\n            </Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/card-with-form.json b/apps/web/public/r/styles/default/card-with-form.json
index f98f3e73..1e6a7f37 100644
--- a/apps/web/public/r/styles/default/card-with-form.json
+++ b/apps/web/public/r/styles/default/card-with-form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "card-with-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "card",
@@ -10,9 +12,9 @@
   ],
   "files": [
     {
-      "path": "example/card-with-form.tsx",
-      "content": "import * as React from 'react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/default/ui/select'\n\nexport default function CardWithForm() {\n   return (\n      <Card className=\"w-[350px]\">\n         <CardHeader>\n            <CardTitle>Create project</CardTitle>\n            <CardDescription>Deploy your new project in one-click.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <form>\n               <div className=\"grid w-full items-center gap-4\">\n                  <div className=\"flex flex-col space-y-1.5\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" placeholder=\"Name of your project\" />\n                  </div>\n                  <div className=\"flex flex-col space-y-1.5\">\n                     <Label htmlFor=\"framework\">Framework</Label>\n                     <Select>\n                        <SelectTrigger id=\"framework\">\n                           <SelectValue placeholder=\"Select\" />\n                        </SelectTrigger>\n                        <SelectContent position=\"popper\">\n                           <SelectItem value=\"next\">Next.js</SelectItem>\n                           <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                           <SelectItem value=\"astro\">Astro</SelectItem>\n                           <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                        </SelectContent>\n                     </Select>\n                  </div>\n               </div>\n            </form>\n         </CardContent>\n         <CardFooter className=\"flex justify-between\">\n            <Button variant=\"outline\">Cancel</Button>\n            <Button>Deploy</Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/card-with-form.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/default/ui/select\"\n\nexport default function CardWithForm() {\n   return (\n      <Card className=\"w-[350px]\">\n         <CardHeader>\n            <CardTitle>Create project</CardTitle>\n            <CardDescription>\n               Deploy your new project in one-click.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <form>\n               <div className=\"grid w-full items-center gap-4\">\n                  <div className=\"flex flex-col space-y-1.5\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" placeholder=\"Name of your project\" />\n                  </div>\n                  <div className=\"flex flex-col space-y-1.5\">\n                     <Label htmlFor=\"framework\">Framework</Label>\n                     <Select>\n                        <SelectTrigger id=\"framework\">\n                           <SelectValue placeholder=\"Select\" />\n                        </SelectTrigger>\n                        <SelectContent position=\"popper\">\n                           <SelectItem value=\"next\">Next.js</SelectItem>\n                           <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                           <SelectItem value=\"astro\">Astro</SelectItem>\n                           <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                        </SelectContent>\n                     </Select>\n                  </div>\n               </div>\n            </form>\n         </CardContent>\n         <CardFooter className=\"flex justify-between\">\n            <Button variant=\"outline\">Cancel</Button>\n            <Button>Deploy</Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/card.json b/apps/web/public/r/styles/default/card.json
index 83046ba8..5448d24c 100644
--- a/apps/web/public/r/styles/default/card.json
+++ b/apps/web/public/r/styles/default/card.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "card",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/card.tsx",
-      "content": "import * as React from 'react'\n\nimport { ny } from '~/lib/utils'\n\nconst Card = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         'bg-card text-card-foreground rounded-lg border shadow-sm',\n         className,\n      )}\n      {...props}\n   />\n))\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny('flex flex-col space-y-1.5 p-6', className)}\n      {...props}\n   />\n))\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n   <h3\n      ref={ref}\n      className={ny(\n         'text-2xl font-semibold leading-none tracking-tight',\n         className,\n      )}\n      {...props}\n   />\n))\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n   <p\n      ref={ref}\n      className={ny('text-muted-foreground text-sm', className)}\n      {...props}\n   />\n))\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div ref={ref} className={ny('p-6 pt-0', className)} {...props} />\n))\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny('flex items-center p-6 pt-0', className)}\n      {...props}\n   />\n))\nCardFooter.displayName = 'CardFooter'\n\nexport {\n   Card,\n   CardHeader,\n   CardFooter,\n   CardTitle,\n   CardDescription,\n   CardContent,\n}\n",
-      "type": "registry:component",
+      "content": "import * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Card = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         \"bg-card text-card-foreground rounded-lg border shadow-sm\",\n         className,\n      )}\n      {...props}\n   />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\"flex flex-col space-y-1.5 p-6\", className)}\n      {...props}\n   />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n   <h3\n      ref={ref}\n      className={ny(\n         \"text-2xl font-semibold leading-none tracking-tight\",\n         className,\n      )}\n      {...props}\n   />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n   <p\n      ref={ref}\n      className={ny(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div ref={ref} className={ny(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\"flex items-center p-6 pt-0\", className)}\n      {...props}\n   />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/carousel-api.json b/apps/web/public/r/styles/default/carousel-api.json
index c6387efc..ac55d97a 100644
--- a/apps/web/public/r/styles/default/carousel-api.json
+++ b/apps/web/public/r/styles/default/carousel-api.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-api",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-api.tsx",
-      "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/default/ui/card'\nimport {\n   Carousel,\n   type CarouselApi,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/default/ui/carousel'\n\nexport default function CarouselDApiDemo() {\n   const [api, setApi] = React.useState<CarouselApi>()\n   const [current, setCurrent] = React.useState(0)\n   const [count, setCount] = React.useState(0)\n\n   React.useEffect(() => {\n      if (!api)\n         return\n\n      setCount(api.scrollSnapList().length)\n      setCurrent(api.selectedScrollSnap() + 1)\n\n      api.on('select', () => {\n         setCurrent(api.selectedScrollSnap() + 1)\n      })\n   }, [api])\n\n   return (\n      <div>\n         <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n            <CarouselContent>\n               {Array.from({ length: 5 }).map((_, index) => (\n                  <CarouselItem key={index}>\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </CarouselItem>\n               ))}\n            </CarouselContent>\n            <CarouselPrevious />\n            <CarouselNext />\n         </Carousel>\n         <div className=\"text-muted-foreground py-2 text-center text-sm\">\n            Slide\n            {' '}\n            {current}\n            {' '}\n            of\n            {count}\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-api.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/default/ui/card\"\nimport {\n   Carousel,\n   type CarouselApi,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/default/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n   const [api, setApi] = React.useState<CarouselApi>()\n   const [current, setCurrent] = React.useState(0)\n   const [count, setCount] = React.useState(0)\n\n   React.useEffect(() => {\n      if (!api) return\n\n      setCount(api.scrollSnapList().length)\n      setCurrent(api.selectedScrollSnap() + 1)\n\n      api.on(\"select\", () => {\n         setCurrent(api.selectedScrollSnap() + 1)\n      })\n   }, [api])\n\n   return (\n      <div>\n         <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n            <CarouselContent>\n               {Array.from({ length: 5 }).map((_, index) => (\n                  <CarouselItem key={index}>\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </CarouselItem>\n               ))}\n            </CarouselContent>\n            <CarouselPrevious />\n            <CarouselNext />\n         </Carousel>\n         <div className=\"text-muted-foreground py-2 text-center text-sm\">\n            Slide {current} of\n            {count}\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/carousel-demo.json b/apps/web/public/r/styles/default/carousel-demo.json
index 7d99a8f9..c3e43106 100644
--- a/apps/web/public/r/styles/default/carousel-demo.json
+++ b/apps/web/public/r/styles/default/carousel-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-demo.tsx",
-      "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/default/ui/card'\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/default/ui/carousel'\n\nexport default function CarouselDemo() {\n   return (\n      <Carousel className=\"w-full max-w-xs\">\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/default/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/default/ui/carousel\"\n\nexport default function CarouselDemo() {\n   return (\n      <Carousel className=\"w-full max-w-xs\">\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/carousel-dots.json b/apps/web/public/r/styles/default/carousel-dots.json
index 56ed97ec..081fbec7 100644
--- a/apps/web/public/r/styles/default/carousel-dots.json
+++ b/apps/web/public/r/styles/default/carousel-dots.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-dots",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-dots.tsx",
-      "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/default/ui/card'\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselDots,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/default/ui/carousel'\n\nexport default function CarouselDotsDemo() {\n   return (\n      <Carousel\n         opts={{\n            align: 'start',\n         }}\n         className=\"w-full max-w-sm\"\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselDots />\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-dots.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/default/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselDots,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/default/ui/carousel\"\n\nexport default function CarouselDotsDemo() {\n   return (\n      <Carousel\n         opts={{\n            align: \"start\",\n         }}\n         className=\"w-full max-w-sm\"\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselDots />\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/carousel-orientation.json b/apps/web/public/r/styles/default/carousel-orientation.json
index ca980274..589f9f94 100644
--- a/apps/web/public/r/styles/default/carousel-orientation.json
+++ b/apps/web/public/r/styles/default/carousel-orientation.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-orientation",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-orientation.tsx",
-      "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/default/ui/card'\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/default/ui/carousel'\n\nexport default function CarouselOrientation() {\n   return (\n      <Carousel\n         opts={{\n            align: 'start',\n         }}\n         orientation=\"vertical\"\n         className=\"w-full max-w-xs\"\n      >\n         <CarouselContent className=\"-mt-1 h-[200px]\">\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/default/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/default/ui/carousel\"\n\nexport default function CarouselOrientation() {\n   return (\n      <Carousel\n         opts={{\n            align: \"start\",\n         }}\n         orientation=\"vertical\"\n         className=\"w-full max-w-xs\"\n      >\n         <CarouselContent className=\"-mt-1 h-[200px]\">\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/carousel-plugin.json b/apps/web/public/r/styles/default/carousel-plugin.json
index c9cac062..87c327d6 100644
--- a/apps/web/public/r/styles/default/carousel-plugin.json
+++ b/apps/web/public/r/styles/default/carousel-plugin.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-plugin",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-plugin.tsx",
-      "content": "import * as React from 'react'\nimport Autoplay from 'embla-carousel-autoplay'\n\nimport { Card, CardContent } from '~/registry/default/ui/card'\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/default/ui/carousel'\n\nexport default function CarouselPlugin() {\n   const plugin = React.useRef(\n      Autoplay({ delay: 2000, stopOnInteraction: true }),\n   )\n\n   return (\n      <Carousel\n         plugins={[plugin.current]}\n         className=\"w-full max-w-xs\"\n         onMouseEnter={plugin.current.stop}\n         onMouseLeave={plugin.current.reset}\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-plugin.tsx",
+      "content": "import Autoplay from \"embla-carousel-autoplay\"\nimport * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/default/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/default/ui/carousel\"\n\nexport default function CarouselPlugin() {\n   const plugin = React.useRef(\n      Autoplay({ delay: 2000, stopOnInteraction: true }),\n   )\n\n   return (\n      <Carousel\n         plugins={[plugin.current]}\n         className=\"w-full max-w-xs\"\n         onMouseEnter={plugin.current.stop}\n         onMouseLeave={plugin.current.reset}\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/carousel-size.json b/apps/web/public/r/styles/default/carousel-size.json
index f6cd1e37..a9065483 100644
--- a/apps/web/public/r/styles/default/carousel-size.json
+++ b/apps/web/public/r/styles/default/carousel-size.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-size",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-size.tsx",
-      "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/default/ui/card'\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/default/ui/carousel'\n\nexport default function CarouselSize() {\n   return (\n      <Carousel\n         opts={{\n            align: 'start',\n         }}\n         className=\"w-full max-w-sm\"\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-size.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/default/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/default/ui/carousel\"\n\nexport default function CarouselSize() {\n   return (\n      <Carousel\n         opts={{\n            align: \"start\",\n         }}\n         className=\"w-full max-w-sm\"\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/carousel-spacing.json b/apps/web/public/r/styles/default/carousel-spacing.json
index 757b1798..2296ecb0 100644
--- a/apps/web/public/r/styles/default/carousel-spacing.json
+++ b/apps/web/public/r/styles/default/carousel-spacing.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-spacing",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-spacing.tsx",
-      "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/default/ui/card'\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/default/ui/carousel'\n\nexport default function CarouselSpacing() {\n   return (\n      <Carousel className=\"w-full max-w-sm\">\n         <CarouselContent className=\"-ml-1\">\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-spacing.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/default/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/default/ui/carousel\"\n\nexport default function CarouselSpacing() {\n   return (\n      <Carousel className=\"w-full max-w-sm\">\n         <CarouselContent className=\"-ml-1\">\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem\n                  key={index}\n                  className=\"pl-1 md:basis-1/2 lg:basis-1/3\"\n               >\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-2xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/carousel.json b/apps/web/public/r/styles/default/carousel.json
index 3bbd1987..21a17933 100644
--- a/apps/web/public/r/styles/default/carousel.json
+++ b/apps/web/public/r/styles/default/carousel.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "embla-carousel-react"
   ],
@@ -10,8 +12,8 @@
   "files": [
     {
       "path": "ui/carousel.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\nimport { ArrowLeft, ArrowRight } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ninterface CarouselProps {\n   opts?: CarouselOptions\n   plugins?: CarouselPlugin\n   setApi?: (api: CarouselApi) => void\n   orientation?: 'horizontal' | 'vertical'\n   dotsPosition?: 'top' | 'bottom' | 'left' | 'right'\n}\n\ntype CarouselContextProps = {\n   carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n   api: ReturnType<typeof useEmblaCarousel>[1]\n   scrollPrev: () => void\n   scrollNext: () => void\n   scrollTo: (index: number) => void\n   canScrollPrev: boolean\n   canScrollNext: boolean\n   totalSlides: number\n   currentIndex: number\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n   const context = React.useContext(CarouselContext)\n\n   if (!context)\n      throw new Error('useCarousel must be used within a <Carousel />')\n\n   return context\n}\n\nconst Carousel = React.forwardRef<\n   HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n   (\n      {\n         opts,\n         plugins,\n         setApi,\n         orientation = 'horizontal',\n         dotsPosition = 'bottom',\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const [carouselRef, api] = useEmblaCarousel(\n         {\n            ...opts,\n            axis: orientation === 'horizontal' ? 'x' : 'y',\n         },\n         plugins,\n      )\n      const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n      const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n      const [currentIndex, setCurrentIndex] = React.useState(0)\n      const [totalSlides, setTotalSlides] = React.useState(0)\n\n      const onSelect = React.useCallback((api: CarouselApi) => {\n         if (!api)\n            return\n\n         setCanScrollPrev(api.canScrollPrev())\n         setCanScrollNext(api.canScrollNext())\n         setCurrentIndex(api.selectedScrollSnap())\n         setTotalSlides(api.scrollSnapList().length)\n      }, [])\n\n      const scrollTo = React.useCallback(\n         (index: number) => {\n            api?.scrollTo(index)\n         },\n         [api],\n      )\n\n      const scrollPrev = React.useCallback(() => {\n         api?.scrollPrev()\n      }, [api])\n\n      const scrollNext = React.useCallback(() => {\n         api?.scrollNext()\n      }, [api])\n\n      const handleKeyDown = React.useCallback(\n         (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'ArrowLeft') {\n               event.preventDefault()\n               scrollPrev()\n            }\n            else if (event.key === 'ArrowRight') {\n               event.preventDefault()\n               scrollNext()\n            }\n         },\n         [scrollPrev, scrollNext],\n      )\n\n      React.useEffect(() => {\n         if (!api || !setApi)\n            return\n\n         setApi(api)\n      }, [api, setApi])\n\n      React.useEffect(() => {\n         if (!api)\n            return\n\n         onSelect(api)\n         api.on('reInit', onSelect)\n         api.on('select', onSelect)\n\n         return () => {\n            api?.off('select', onSelect)\n         }\n      }, [api, onSelect])\n\n      let effectiveDotsPosition = dotsPosition\n      if (\n         orientation === 'horizontal'\n         && (dotsPosition === 'left' || dotsPosition === 'right')\n      ) {\n         console.warn(\n        `Invalid dotsPosition \"${dotsPosition}\" for horizontal orientation, defaulting to \"bottom\".`,\n         )\n         effectiveDotsPosition = 'bottom'\n      }\n      else if (\n         orientation === 'vertical'\n         && (dotsPosition === 'top' || dotsPosition === 'bottom')\n      ) {\n         console.warn(\n        `Invalid dotsPosition \"${dotsPosition}\" for vertical orientation, defaulting to \"left\".`,\n         )\n         effectiveDotsPosition = 'left'\n      }\n\n      return (\n         <CarouselContext.Provider\n            value={{\n               carouselRef,\n               api,\n               opts,\n               orientation:\n            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n               dotsPosition: effectiveDotsPosition,\n               scrollPrev,\n               scrollNext,\n               scrollTo,\n               canScrollPrev,\n               canScrollNext,\n               totalSlides,\n               currentIndex,\n            }}\n         >\n            <div\n               ref={ref}\n               onKeyDownCapture={handleKeyDown}\n               className={ny('relative', className)}\n               role=\"region\"\n               aria-roledescription=\"carousel\"\n               {...props}\n            >\n               {children}\n            </div>\n         </CarouselContext.Provider>\n      )\n   },\n)\nCarousel.displayName = 'Carousel'\n\nconst CarouselContent = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { carouselRef, orientation } = useCarousel()\n\n   return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n         <div\n            ref={ref}\n            className={ny(\n               'flex',\n               orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n               className,\n            )}\n            {...props}\n         />\n      </div>\n   )\n})\nCarouselContent.displayName = 'CarouselContent'\n\nconst CarouselItem = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { orientation } = useCarousel()\n\n   return (\n      <div\n         ref={ref}\n         role=\"group\"\n         aria-roledescription=\"slide\"\n         className={ny(\n            'min-w-0 shrink-0 grow-0 basis-full',\n            orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nCarouselItem.displayName = 'CarouselItem'\n\nconst CarouselPrevious = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<typeof Button>\n>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {\n   const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n   return (\n      <Button\n         ref={ref}\n         variant={variant}\n         size={size}\n         className={ny(\n            'absolute  size-8 rounded-full',\n            orientation === 'horizontal'\n               ? '-left-12 top-1/2 -translate-y-1/2'\n               : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n            className,\n         )}\n         disabled={!canScrollPrev}\n         onClick={scrollPrev}\n         {...props}\n      >\n         <ArrowLeft className=\"size-4\" />\n         <span className=\"sr-only\">Previous slide</span>\n      </Button>\n   )\n})\nCarouselPrevious.displayName = 'CarouselPrevious'\n\nconst CarouselNext = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<typeof Button>\n>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {\n   const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n   return (\n      <Button\n         ref={ref}\n         variant={variant}\n         size={size}\n         className={ny(\n            'absolute size-8 rounded-full',\n            orientation === 'horizontal'\n               ? '-right-12 top-1/2 -translate-y-1/2'\n               : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n            className,\n         )}\n         disabled={!canScrollNext}\n         onClick={scrollNext}\n         {...props}\n      >\n         <ArrowRight className=\"size-4\" />\n         <span className=\"sr-only\">Next slide</span>\n      </Button>\n   )\n})\nCarouselNext.displayName = 'CarouselNext'\n\nconst dotsContainerVariants = cva('absolute flex justify-center', {\n   variants: {\n      orientation: {\n         horizontal: 'inset-x-0 flex-row',\n         vertical: 'inset-y-0 flex-col',\n      },\n      size: {\n         default: 'p-4',\n         sm: 'p-4',\n         md: 'p-1',\n         lg: 'p-0',\n      },\n      position: {\n         top: '-top-10',\n         right: '-right-10',\n         bottom: '-bottom-10',\n         left: '-left-10',\n      },\n      gap: {\n         default: 'gap-2',\n         sm: 'gap-2',\n         md: 'gap-4',\n         lg: 'gap-6',\n      },\n   },\n   defaultVariants: {\n      orientation: 'horizontal',\n      size: 'default',\n      position: 'bottom',\n      gap: 'default',\n   },\n})\n\nconst dotsVariants = cva(\n   'rounded-full ring-1 ring-muted ring-offset-1 ring-offset-background transition-all duration-300',\n   {\n      variants: {\n         size: {\n            default: 'size-3',\n            sm: 'size-3',\n            md: 'size-4',\n            lg: 'size-6',\n         },\n      },\n      defaultVariants: {\n         size: 'default',\n      },\n   },\n)\n\ninterface CarouselDotsProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n   VariantProps<typeof dotsContainerVariants>,\n   VariantProps<typeof dotsVariants> {}\n\nconst CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(\n   ({ className, size, gap, ...props }, ref) => {\n      const { orientation, dotsPosition, totalSlides, currentIndex, scrollTo }\n      = useCarousel()\n\n      if (totalSlides <= 1)\n         return null\n\n      return (\n         <div\n            ref={ref}\n            role=\"tablist\"\n            className={ny(\n               dotsContainerVariants({\n                  orientation,\n                  size,\n                  position: dotsPosition,\n                  gap,\n               }),\n               className,\n            )}\n            {...props}\n         >\n            {Array.from({ length: totalSlides }).map((_, index) => (\n               <button\n                  key={index}\n                  role=\"tab\"\n                  aria-selected={currentIndex === index}\n                  aria-label={`Go to slide ${index + 1}`}\n                  onClick={() => scrollTo(index)}\n                  className={ny(\n                     dotsVariants({ size }),\n                     currentIndex === index ? 'bg-card-foreground' : 'bg-muted',\n                  )}\n               />\n            ))}\n         </div>\n      )\n   },\n)\nCarouselDots.displayName = 'CarouselDots'\n\nexport {\n   type CarouselApi,\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselPrevious,\n   CarouselNext,\n   CarouselDots,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport useEmblaCarousel, {\n   type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ninterface CarouselProps {\n   opts?: CarouselOptions\n   plugins?: CarouselPlugin\n   setApi?: (api: CarouselApi) => void\n   orientation?: \"horizontal\" | \"vertical\"\n   dotsPosition?: \"top\" | \"bottom\" | \"left\" | \"right\"\n}\n\ntype CarouselContextProps = {\n   carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n   api: ReturnType<typeof useEmblaCarousel>[1]\n   scrollPrev: () => void\n   scrollNext: () => void\n   scrollTo: (index: number) => void\n   canScrollPrev: boolean\n   canScrollNext: boolean\n   totalSlides: number\n   currentIndex: number\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n   const context = React.useContext(CarouselContext)\n\n   if (!context)\n      throw new Error(\"useCarousel must be used within a <Carousel />\")\n\n   return context\n}\n\nconst Carousel = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n   (\n      {\n         opts,\n         plugins,\n         setApi,\n         orientation = \"horizontal\",\n         dotsPosition = \"bottom\",\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const [carouselRef, api] = useEmblaCarousel(\n         {\n            ...opts,\n            axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n         },\n         plugins,\n      )\n      const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n      const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n      const [currentIndex, setCurrentIndex] = React.useState(0)\n      const [totalSlides, setTotalSlides] = React.useState(0)\n\n      const onSelect = React.useCallback((api: CarouselApi) => {\n         if (!api) return\n\n         setCanScrollPrev(api.canScrollPrev())\n         setCanScrollNext(api.canScrollNext())\n         setCurrentIndex(api.selectedScrollSnap())\n         setTotalSlides(api.scrollSnapList().length)\n      }, [])\n\n      const scrollTo = React.useCallback(\n         (index: number) => {\n            api?.scrollTo(index)\n         },\n         [api],\n      )\n\n      const scrollPrev = React.useCallback(() => {\n         api?.scrollPrev()\n      }, [api])\n\n      const scrollNext = React.useCallback(() => {\n         api?.scrollNext()\n      }, [api])\n\n      const handleKeyDown = React.useCallback(\n         (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === \"ArrowLeft\") {\n               event.preventDefault()\n               scrollPrev()\n            } else if (event.key === \"ArrowRight\") {\n               event.preventDefault()\n               scrollNext()\n            }\n         },\n         [scrollPrev, scrollNext],\n      )\n\n      React.useEffect(() => {\n         if (!api || !setApi) return\n\n         setApi(api)\n      }, [api, setApi])\n\n      React.useEffect(() => {\n         if (!api) return\n\n         onSelect(api)\n         api.on(\"reInit\", onSelect)\n         api.on(\"select\", onSelect)\n\n         return () => {\n            api?.off(\"select\", onSelect)\n         }\n      }, [api, onSelect])\n\n      let effectiveDotsPosition = dotsPosition\n      if (\n         orientation === \"horizontal\" &&\n         (dotsPosition === \"left\" || dotsPosition === \"right\")\n      ) {\n         console.warn(\n            `Invalid dotsPosition \"${dotsPosition}\" for horizontal orientation, defaulting to \"bottom\".`,\n         )\n         effectiveDotsPosition = \"bottom\"\n      } else if (\n         orientation === \"vertical\" &&\n         (dotsPosition === \"top\" || dotsPosition === \"bottom\")\n      ) {\n         console.warn(\n            `Invalid dotsPosition \"${dotsPosition}\" for vertical orientation, defaulting to \"left\".`,\n         )\n         effectiveDotsPosition = \"left\"\n      }\n\n      return (\n         <CarouselContext.Provider\n            value={{\n               carouselRef,\n               api,\n               opts,\n               orientation:\n                  orientation ||\n                  (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n               dotsPosition: effectiveDotsPosition,\n               scrollPrev,\n               scrollNext,\n               scrollTo,\n               canScrollPrev,\n               canScrollNext,\n               totalSlides,\n               currentIndex,\n            }}\n         >\n            <div\n               ref={ref}\n               onKeyDownCapture={handleKeyDown}\n               className={ny(\"relative\", className)}\n               role=\"region\"\n               aria-roledescription=\"carousel\"\n               {...props}\n            >\n               {children}\n            </div>\n         </CarouselContext.Provider>\n      )\n   },\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { carouselRef, orientation } = useCarousel()\n\n   return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n         <div\n            ref={ref}\n            className={ny(\n               \"flex\",\n               orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n               className,\n            )}\n            {...props}\n         />\n      </div>\n   )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { orientation } = useCarousel()\n\n   return (\n      <div\n         ref={ref}\n         role=\"group\"\n         aria-roledescription=\"slide\"\n         className={ny(\n            \"min-w-0 shrink-0 grow-0 basis-full\",\n            orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n   const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n   return (\n      <Button\n         ref={ref}\n         variant={variant}\n         size={size}\n         className={ny(\n            \"absolute  size-8 rounded-full\",\n            orientation === \"horizontal\"\n               ? \"-left-12 top-1/2 -translate-y-1/2\"\n               : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n            className,\n         )}\n         disabled={!canScrollPrev}\n         onClick={scrollPrev}\n         {...props}\n      >\n         <ArrowLeft className=\"size-4\" />\n         <span className=\"sr-only\">Previous slide</span>\n      </Button>\n   )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n   const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n   return (\n      <Button\n         ref={ref}\n         variant={variant}\n         size={size}\n         className={ny(\n            \"absolute size-8 rounded-full\",\n            orientation === \"horizontal\"\n               ? \"-right-12 top-1/2 -translate-y-1/2\"\n               : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n            className,\n         )}\n         disabled={!canScrollNext}\n         onClick={scrollNext}\n         {...props}\n      >\n         <ArrowRight className=\"size-4\" />\n         <span className=\"sr-only\">Next slide</span>\n      </Button>\n   )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nconst dotsContainerVariants = cva(\"absolute flex justify-center\", {\n   variants: {\n      orientation: {\n         horizontal: \"inset-x-0 flex-row\",\n         vertical: \"inset-y-0 flex-col\",\n      },\n      size: {\n         default: \"p-4\",\n         sm: \"p-4\",\n         md: \"p-1\",\n         lg: \"p-0\",\n      },\n      position: {\n         top: \"-top-10\",\n         right: \"-right-10\",\n         bottom: \"-bottom-10\",\n         left: \"-left-10\",\n      },\n      gap: {\n         default: \"gap-2\",\n         sm: \"gap-2\",\n         md: \"gap-4\",\n         lg: \"gap-6\",\n      },\n   },\n   defaultVariants: {\n      orientation: \"horizontal\",\n      size: \"default\",\n      position: \"bottom\",\n      gap: \"default\",\n   },\n})\n\nconst dotsVariants = cva(\n   \"rounded-full ring-1 ring-muted ring-offset-1 ring-offset-background transition-all duration-300\",\n   {\n      variants: {\n         size: {\n            default: \"size-3\",\n            sm: \"size-3\",\n            md: \"size-4\",\n            lg: \"size-6\",\n         },\n      },\n      defaultVariants: {\n         size: \"default\",\n      },\n   },\n)\n\ninterface CarouselDotsProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof dotsContainerVariants>,\n      VariantProps<typeof dotsVariants> {}\n\nconst CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(\n   ({ className, size, gap, ...props }, ref) => {\n      const { orientation, dotsPosition, totalSlides, currentIndex, scrollTo } =\n         useCarousel()\n\n      if (totalSlides <= 1) return null\n\n      return (\n         <div\n            ref={ref}\n            role=\"tablist\"\n            className={ny(\n               dotsContainerVariants({\n                  orientation,\n                  size,\n                  position: dotsPosition,\n                  gap,\n               }),\n               className,\n            )}\n            {...props}\n         >\n            {Array.from({ length: totalSlides }).map((_, index) => (\n               <button\n                  key={index}\n                  role=\"tab\"\n                  aria-selected={currentIndex === index}\n                  aria-label={`Go to slide ${index + 1}`}\n                  onClick={() => scrollTo(index)}\n                  className={ny(\n                     dotsVariants({ size }),\n                     currentIndex === index ? \"bg-card-foreground\" : \"bg-muted\",\n                  )}\n               />\n            ))}\n         </div>\n      )\n   },\n)\nCarouselDots.displayName = \"CarouselDots\"\n\nexport {\n   type CarouselApi,\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselPrevious,\n   CarouselNext,\n   CarouselDots,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/chart-area-axes.json b/apps/web/public/r/styles/default/chart-area-axes.json
index 48e7ee5f..d8863944 100644
--- a/apps/web/public/r/styles/default/chart-area-axes.json
+++ b/apps/web/public/r/styles/default/chart-area-axes.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-axes",
   "type": "registry:block",
-  "description": "An area chart with axes",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-axes.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Axes</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: -20,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <YAxis\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickCount={3}\n                  />\n                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-axes.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Axes</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: -20,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <YAxis\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickCount={3}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-area-default.json b/apps/web/public/r/styles/default/chart-area-default.json
index 60ea6746..ec15d195 100644
--- a/apps/web/public/r/styles/default/chart-area-default.json
+++ b/apps/web/public/r/styles/default/chart-area-default.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-default",
   "type": "registry:block",
-  "description": "A simple area chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-default.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-area-gradient.json b/apps/web/public/r/styles/default/chart-area-gradient.json
index 2d75b796..9b88b17e 100644
--- a/apps/web/public/r/styles/default/chart-area-gradient.json
+++ b/apps/web/public/r/styles/default/chart-area-gradient.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-gradient",
   "type": "registry:block",
-  "description": "An area chart with gradient fill",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-gradient.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Gradient</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                  <defs>\n                     <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                     <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                  </defs>\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"url(#fillMobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"url(#fillDesktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-gradient.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Gradient</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <defs>\n                     <linearGradient\n                        id=\"fillDesktop\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                     <linearGradient\n                        id=\"fillMobile\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                  </defs>\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"url(#fillMobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"url(#fillDesktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-area-icons.json b/apps/web/public/r/styles/default/chart-area-icons.json
index e6e54b7a..2d6ade51 100644
--- a/apps/web/public/r/styles/default/chart-area-icons.json
+++ b/apps/web/public/r/styles/default/chart-area-icons.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-icons",
   "type": "registry:block",
-  "description": "An area chart with icons",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-icons.tsx",
-      "content": "'use client'\n\nimport { TrendingDown, TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n      icon: TrendingDown,\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n      icon: TrendingUp,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Icons</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-icons.tsx",
+      "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n      icon: TrendingDown,\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n      icon: TrendingUp,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Icons</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-area-interactive.json b/apps/web/public/r/styles/default/chart-area-interactive.json
index 48f17379..0e64ea5f 100644
--- a/apps/web/public/r/styles/default/chart-area-interactive.json
+++ b/apps/web/public/r/styles/default/chart-area-interactive.json
@@ -1,7 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-interactive",
   "type": "registry:block",
-  "description": "An interactive area chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart",
@@ -9,10 +10,14 @@
   ],
   "files": [
     {
-      "path": "block/chart-area-interactive.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/default/ui/select'\nconst chartData = [\n   { date: '2024-04-01', desktop: 222, mobile: 150 },\n   { date: '2024-04-02', desktop: 97, mobile: 180 },\n   { date: '2024-04-03', desktop: 167, mobile: 120 },\n   { date: '2024-04-04', desktop: 242, mobile: 260 },\n   { date: '2024-04-05', desktop: 373, mobile: 290 },\n   { date: '2024-04-06', desktop: 301, mobile: 340 },\n   { date: '2024-04-07', desktop: 245, mobile: 180 },\n   { date: '2024-04-08', desktop: 409, mobile: 320 },\n   { date: '2024-04-09', desktop: 59, mobile: 110 },\n   { date: '2024-04-10', desktop: 261, mobile: 190 },\n   { date: '2024-04-11', desktop: 327, mobile: 350 },\n   { date: '2024-04-12', desktop: 292, mobile: 210 },\n   { date: '2024-04-13', desktop: 342, mobile: 380 },\n   { date: '2024-04-14', desktop: 137, mobile: 220 },\n   { date: '2024-04-15', desktop: 120, mobile: 170 },\n   { date: '2024-04-16', desktop: 138, mobile: 190 },\n   { date: '2024-04-17', desktop: 446, mobile: 360 },\n   { date: '2024-04-18', desktop: 364, mobile: 410 },\n   { date: '2024-04-19', desktop: 243, mobile: 180 },\n   { date: '2024-04-20', desktop: 89, mobile: 150 },\n   { date: '2024-04-21', desktop: 137, mobile: 200 },\n   { date: '2024-04-22', desktop: 224, mobile: 170 },\n   { date: '2024-04-23', desktop: 138, mobile: 230 },\n   { date: '2024-04-24', desktop: 387, mobile: 290 },\n   { date: '2024-04-25', desktop: 215, mobile: 250 },\n   { date: '2024-04-26', desktop: 75, mobile: 130 },\n   { date: '2024-04-27', desktop: 383, mobile: 420 },\n   { date: '2024-04-28', desktop: 122, mobile: 180 },\n   { date: '2024-04-29', desktop: 315, mobile: 240 },\n   { date: '2024-04-30', desktop: 454, mobile: 380 },\n   { date: '2024-05-01', desktop: 165, mobile: 220 },\n   { date: '2024-05-02', desktop: 293, mobile: 310 },\n   { date: '2024-05-03', desktop: 247, mobile: 190 },\n   { date: '2024-05-04', desktop: 385, mobile: 420 },\n   { date: '2024-05-05', desktop: 481, mobile: 390 },\n   { date: '2024-05-06', desktop: 498, mobile: 520 },\n   { date: '2024-05-07', desktop: 388, mobile: 300 },\n   { date: '2024-05-08', desktop: 149, mobile: 210 },\n   { date: '2024-05-09', desktop: 227, mobile: 180 },\n   { date: '2024-05-10', desktop: 293, mobile: 330 },\n   { date: '2024-05-11', desktop: 335, mobile: 270 },\n   { date: '2024-05-12', desktop: 197, mobile: 240 },\n   { date: '2024-05-13', desktop: 197, mobile: 160 },\n   { date: '2024-05-14', desktop: 448, mobile: 490 },\n   { date: '2024-05-15', desktop: 473, mobile: 380 },\n   { date: '2024-05-16', desktop: 338, mobile: 400 },\n   { date: '2024-05-17', desktop: 499, mobile: 420 },\n   { date: '2024-05-18', desktop: 315, mobile: 350 },\n   { date: '2024-05-19', desktop: 235, mobile: 180 },\n   { date: '2024-05-20', desktop: 177, mobile: 230 },\n   { date: '2024-05-21', desktop: 82, mobile: 140 },\n   { date: '2024-05-22', desktop: 81, mobile: 120 },\n   { date: '2024-05-23', desktop: 252, mobile: 290 },\n   { date: '2024-05-24', desktop: 294, mobile: 220 },\n   { date: '2024-05-25', desktop: 201, mobile: 250 },\n   { date: '2024-05-26', desktop: 213, mobile: 170 },\n   { date: '2024-05-27', desktop: 420, mobile: 460 },\n   { date: '2024-05-28', desktop: 233, mobile: 190 },\n   { date: '2024-05-29', desktop: 78, mobile: 130 },\n   { date: '2024-05-30', desktop: 340, mobile: 280 },\n   { date: '2024-05-31', desktop: 178, mobile: 230 },\n   { date: '2024-06-01', desktop: 178, mobile: 200 },\n   { date: '2024-06-02', desktop: 470, mobile: 410 },\n   { date: '2024-06-03', desktop: 103, mobile: 160 },\n   { date: '2024-06-04', desktop: 439, mobile: 380 },\n   { date: '2024-06-05', desktop: 88, mobile: 140 },\n   { date: '2024-06-06', desktop: 294, mobile: 250 },\n   { date: '2024-06-07', desktop: 323, mobile: 370 },\n   { date: '2024-06-08', desktop: 385, mobile: 320 },\n   { date: '2024-06-09', desktop: 438, mobile: 480 },\n   { date: '2024-06-10', desktop: 155, mobile: 200 },\n   { date: '2024-06-11', desktop: 92, mobile: 150 },\n   { date: '2024-06-12', desktop: 492, mobile: 420 },\n   { date: '2024-06-13', desktop: 81, mobile: 130 },\n   { date: '2024-06-14', desktop: 426, mobile: 380 },\n   { date: '2024-06-15', desktop: 307, mobile: 350 },\n   { date: '2024-06-16', desktop: 371, mobile: 310 },\n   { date: '2024-06-17', desktop: 475, mobile: 520 },\n   { date: '2024-06-18', desktop: 107, mobile: 170 },\n   { date: '2024-06-19', desktop: 341, mobile: 290 },\n   { date: '2024-06-20', desktop: 408, mobile: 450 },\n   { date: '2024-06-21', desktop: 169, mobile: 210 },\n   { date: '2024-06-22', desktop: 317, mobile: 270 },\n   { date: '2024-06-23', desktop: 480, mobile: 530 },\n   { date: '2024-06-24', desktop: 132, mobile: 180 },\n   { date: '2024-06-25', desktop: 141, mobile: 190 },\n   { date: '2024-06-26', desktop: 434, mobile: 380 },\n   { date: '2024-06-27', desktop: 448, mobile: 490 },\n   { date: '2024-06-28', desktop: 149, mobile: 200 },\n   { date: '2024-06-29', desktop: 103, mobile: 160 },\n   { date: '2024-06-30', desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [timeRange, setTimeRange] = React.useState('90d')\n\n   const filteredData = chartData.filter((item) => {\n      const date = new Date(item.date)\n      const now = new Date()\n      let daysToSubtract = 90\n      if (timeRange === '30d') {\n         daysToSubtract = 30\n      }\n      else if (timeRange === '7d') {\n         daysToSubtract = 7\n      }\n      now.setDate(now.getDate() - daysToSubtract)\n      return date >= now\n   })\n\n   return (\n      <Card>\n         <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n            <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n               <CardTitle>Area Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <Select value={timeRange} onValueChange={setTimeRange}>\n               <SelectTrigger\n                  className=\"w-[160px] rounded-lg sm:ml-auto\"\n                  aria-label=\"Select a value\"\n               >\n                  <SelectValue placeholder=\"Last 3 months\" />\n               </SelectTrigger>\n               <SelectContent className=\"rounded-xl\">\n                  <SelectItem value=\"90d\" className=\"rounded-lg\">\n                     Last 3 months\n                  </SelectItem>\n                  <SelectItem value=\"30d\" className=\"rounded-lg\">\n                     Last 30 days\n                  </SelectItem>\n                  <SelectItem value=\"7d\" className=\"rounded-lg\">\n                     Last 7 days\n                  </SelectItem>\n               </SelectContent>\n            </Select>\n         </CardHeader>\n         <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <AreaChart data={filteredData}>\n                  <defs>\n                     <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                     <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                  </defs>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString('en-US', {\n                           month: 'short',\n                           day: 'numeric',\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={(\n                        <ChartTooltipContent\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString('en-US', {\n                                 month: 'short',\n                                 day: 'numeric',\n                              })\n                           }}\n                           indicator=\"dot\"\n                        />\n                     )}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"url(#fillMobile)\"\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"url(#fillDesktop)\"\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/default/ui/select\"\nconst chartData = [\n   { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n   { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n   { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n   { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n   { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n   { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n   { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n   { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n   { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n   { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n   { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n   { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n   { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n   { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n   { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n   { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n   { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n   { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n   { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n   { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n   { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n   { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n   { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n   { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n   { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n   { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n   { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n   { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n   { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n   { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n   { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n   { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n   { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n   { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n   { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n   { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n   { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n   { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n   { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n   { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n   { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n   { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n   { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n   { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n   { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n   { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n   { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n   { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n   { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n   { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n   { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n   { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n   { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n   { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n   { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n   { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n   { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n   { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n   { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n   { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n   { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n   { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n   { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n   { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n   { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n   { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n   { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n   { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n   { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n   { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n   { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n   { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n   { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n   { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n   { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n   { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n   { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n   { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n   { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n   { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n   { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n   { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n   { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n   { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n   { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n   { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n   { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n   { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n   { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n   const filteredData = chartData.filter((item) => {\n      const date = new Date(item.date)\n      const referenceDate = new Date(\"2024-06-30\")\n      let daysToSubtract = 90\n      if (timeRange === \"30d\") {\n         daysToSubtract = 30\n      } else if (timeRange === \"7d\") {\n         daysToSubtract = 7\n      }\n      const startDate = new Date(referenceDate)\n      startDate.setDate(startDate.getDate() - daysToSubtract)\n      return date >= startDate\n   })\n\n   return (\n      <Card>\n         <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n            <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n               <CardTitle>Area Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <Select value={timeRange} onValueChange={setTimeRange}>\n               <SelectTrigger\n                  className=\"w-[160px] rounded-lg sm:ml-auto\"\n                  aria-label=\"Select a value\"\n               >\n                  <SelectValue placeholder=\"Last 3 months\" />\n               </SelectTrigger>\n               <SelectContent className=\"rounded-xl\">\n                  <SelectItem value=\"90d\" className=\"rounded-lg\">\n                     Last 3 months\n                  </SelectItem>\n                  <SelectItem value=\"30d\" className=\"rounded-lg\">\n                     Last 30 days\n                  </SelectItem>\n                  <SelectItem value=\"7d\" className=\"rounded-lg\">\n                     Last 7 days\n                  </SelectItem>\n               </SelectContent>\n            </Select>\n         </CardHeader>\n         <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <AreaChart data={filteredData}>\n                  <defs>\n                     <linearGradient\n                        id=\"fillDesktop\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                     <linearGradient\n                        id=\"fillMobile\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                  </defs>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString(\"en-US\", {\n                           month: \"short\",\n                           day: \"numeric\",\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    month: \"short\",\n                                    day: \"numeric\",\n                                 },\n                              )\n                           }}\n                           indicator=\"dot\"\n                        />\n                     }\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"url(#fillMobile)\"\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"url(#fillDesktop)\"\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-area-legend.json b/apps/web/public/r/styles/default/chart-area-legend.json
index 9cdf330c..9d18d291 100644
--- a/apps/web/public/r/styles/default/chart-area-legend.json
+++ b/apps/web/public/r/styles/default/chart-area-legend.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-legend",
   "type": "registry:block",
-  "description": "An area chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-legend.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Legend</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Legend</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-area-linear.json b/apps/web/public/r/styles/default/chart-area-linear.json
index 4ab3aa7d..48a0cc8e 100644
--- a/apps/web/public/r/styles/default/chart-area-linear.json
+++ b/apps/web/public/r/styles/default/chart-area-linear.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-linear",
   "type": "registry:block",
-  "description": "A linear area chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-linear.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Linear</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"linear\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Linear</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"linear\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-area-stacked-expand.json b/apps/web/public/r/styles/default/chart-area-stacked-expand.json
index f5d60881..f7666ad9 100644
--- a/apps/web/public/r/styles/default/chart-area-stacked-expand.json
+++ b/apps/web/public/r/styles/default/chart-area-stacked-expand.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-stacked-expand",
   "type": "registry:block",
-  "description": "A stacked area chart with expand stacking",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-stacked-expand.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80, other: 45 },\n   { month: 'February', desktop: 305, mobile: 200, other: 100 },\n   { month: 'March', desktop: 237, mobile: 120, other: 150 },\n   { month: 'April', desktop: 73, mobile: 190, other: 50 },\n   { month: 'May', desktop: 209, mobile: 130, other: 100 },\n   { month: 'June', desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-3))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                     top: 12,\n                  }}\n                  stackOffset=\"expand\"\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"other\"\n                     type=\"natural\"\n                     fill=\"var(--color-other)\"\n                     fillOpacity={0.1}\n                     stroke=\"var(--color-other)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-stacked-expand.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n   { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n   { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n   { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n   { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n   { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-3))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                     top: 12,\n                  }}\n                  stackOffset=\"expand\"\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"other\"\n                     type=\"natural\"\n                     fill=\"var(--color-other)\"\n                     fillOpacity={0.1}\n                     stroke=\"var(--color-other)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-area-stacked.json b/apps/web/public/r/styles/default/chart-area-stacked.json
index 66786763..3f69d098 100644
--- a/apps/web/public/r/styles/default/chart-area-stacked.json
+++ b/apps/web/public/r/styles/default/chart-area-stacked.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-stacked",
   "type": "registry:block",
-  "description": "A stacked area chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-stacked.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Stacked</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Stacked</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-area-step.json b/apps/web/public/r/styles/default/chart-area-step.json
index 7a5cce50..01e98b99 100644
--- a/apps/web/public/r/styles/default/chart-area-step.json
+++ b/apps/web/public/r/styles/default/chart-area-step.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-step",
   "type": "registry:block",
-  "description": "A step area chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-step.tsx",
-      "content": "'use client'\n\nimport { Activity, TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n      icon: Activity,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Step</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"step\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-step.tsx",
+      "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n      icon: Activity,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Step</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"step\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-bar-active.json b/apps/web/public/r/styles/default/chart-bar-active.json
index 8586c845..330a2aa9 100644
--- a/apps/web/public/r/styles/default/chart-bar-active.json
+++ b/apps/web/public/r/styles/default/chart-bar-active.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-active",
   "type": "registry:block",
-  "description": "A bar chart with an active bar",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-active.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 187, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 275, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Active</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"browser\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value =>\n                        chartConfig[value as keyof typeof chartConfig]?.label}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"visitors\"\n                     strokeWidth={2}\n                     radius={8}\n                     activeIndex={2}\n                     activeBar={({ ...props }) => {\n                        return (\n                           <Rectangle\n                              {...props}\n                              fillOpacity={0.8}\n                              stroke={props.payload.fill}\n                              strokeDasharray={4}\n                              strokeDashoffset={4}\n                           />\n                        )\n                     }}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Active</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"browser\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) =>\n                        chartConfig[value as keyof typeof chartConfig]?.label\n                     }\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"visitors\"\n                     strokeWidth={2}\n                     radius={8}\n                     activeIndex={2}\n                     activeBar={({ ...props }) => {\n                        return (\n                           <Rectangle\n                              {...props}\n                              fillOpacity={0.8}\n                              stroke={props.payload.fill}\n                              strokeDasharray={4}\n                              strokeDashoffset={4}\n                           />\n                        )\n                     }}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-bar-default.json b/apps/web/public/r/styles/default/chart-bar-default.json
index 6816e353..7ba26868 100644
--- a/apps/web/public/r/styles/default/chart-bar-default.json
+++ b/apps/web/public/r/styles/default/chart-bar-default.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-default",
   "type": "registry:block",
-  "description": "A bar chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-default.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     radius={8}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-bar-horizontal.json b/apps/web/public/r/styles/default/chart-bar-horizontal.json
index f717f28c..af99714a 100644
--- a/apps/web/public/r/styles/default/chart-bar-horizontal.json
+++ b/apps/web/public/r/styles/default/chart-bar-horizontal.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-horizontal",
   "type": "registry:block",
-  "description": "A horizontal bar chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-horizontal.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, XAxis, YAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Horizontal</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     left: -20,\n                  }}\n               >\n                  <XAxis type=\"number\" dataKey=\"desktop\" hide />\n                  <YAxis\n                     dataKey=\"month\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-horizontal.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Horizontal</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     left: -20,\n                  }}\n               >\n                  <XAxis type=\"number\" dataKey=\"desktop\" hide />\n                  <YAxis\n                     dataKey=\"month\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     radius={5}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-bar-interactive.json b/apps/web/public/r/styles/default/chart-bar-interactive.json
index 6c45a8e3..db318d33 100644
--- a/apps/web/public/r/styles/default/chart-bar-interactive.json
+++ b/apps/web/public/r/styles/default/chart-bar-interactive.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-interactive",
   "type": "registry:block",
-  "description": "An interactive bar chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-interactive.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { date: '2024-04-01', desktop: 222, mobile: 150 },\n   { date: '2024-04-02', desktop: 97, mobile: 180 },\n   { date: '2024-04-03', desktop: 167, mobile: 120 },\n   { date: '2024-04-04', desktop: 242, mobile: 260 },\n   { date: '2024-04-05', desktop: 373, mobile: 290 },\n   { date: '2024-04-06', desktop: 301, mobile: 340 },\n   { date: '2024-04-07', desktop: 245, mobile: 180 },\n   { date: '2024-04-08', desktop: 409, mobile: 320 },\n   { date: '2024-04-09', desktop: 59, mobile: 110 },\n   { date: '2024-04-10', desktop: 261, mobile: 190 },\n   { date: '2024-04-11', desktop: 327, mobile: 350 },\n   { date: '2024-04-12', desktop: 292, mobile: 210 },\n   { date: '2024-04-13', desktop: 342, mobile: 380 },\n   { date: '2024-04-14', desktop: 137, mobile: 220 },\n   { date: '2024-04-15', desktop: 120, mobile: 170 },\n   { date: '2024-04-16', desktop: 138, mobile: 190 },\n   { date: '2024-04-17', desktop: 446, mobile: 360 },\n   { date: '2024-04-18', desktop: 364, mobile: 410 },\n   { date: '2024-04-19', desktop: 243, mobile: 180 },\n   { date: '2024-04-20', desktop: 89, mobile: 150 },\n   { date: '2024-04-21', desktop: 137, mobile: 200 },\n   { date: '2024-04-22', desktop: 224, mobile: 170 },\n   { date: '2024-04-23', desktop: 138, mobile: 230 },\n   { date: '2024-04-24', desktop: 387, mobile: 290 },\n   { date: '2024-04-25', desktop: 215, mobile: 250 },\n   { date: '2024-04-26', desktop: 75, mobile: 130 },\n   { date: '2024-04-27', desktop: 383, mobile: 420 },\n   { date: '2024-04-28', desktop: 122, mobile: 180 },\n   { date: '2024-04-29', desktop: 315, mobile: 240 },\n   { date: '2024-04-30', desktop: 454, mobile: 380 },\n   { date: '2024-05-01', desktop: 165, mobile: 220 },\n   { date: '2024-05-02', desktop: 293, mobile: 310 },\n   { date: '2024-05-03', desktop: 247, mobile: 190 },\n   { date: '2024-05-04', desktop: 385, mobile: 420 },\n   { date: '2024-05-05', desktop: 481, mobile: 390 },\n   { date: '2024-05-06', desktop: 498, mobile: 520 },\n   { date: '2024-05-07', desktop: 388, mobile: 300 },\n   { date: '2024-05-08', desktop: 149, mobile: 210 },\n   { date: '2024-05-09', desktop: 227, mobile: 180 },\n   { date: '2024-05-10', desktop: 293, mobile: 330 },\n   { date: '2024-05-11', desktop: 335, mobile: 270 },\n   { date: '2024-05-12', desktop: 197, mobile: 240 },\n   { date: '2024-05-13', desktop: 197, mobile: 160 },\n   { date: '2024-05-14', desktop: 448, mobile: 490 },\n   { date: '2024-05-15', desktop: 473, mobile: 380 },\n   { date: '2024-05-16', desktop: 338, mobile: 400 },\n   { date: '2024-05-17', desktop: 499, mobile: 420 },\n   { date: '2024-05-18', desktop: 315, mobile: 350 },\n   { date: '2024-05-19', desktop: 235, mobile: 180 },\n   { date: '2024-05-20', desktop: 177, mobile: 230 },\n   { date: '2024-05-21', desktop: 82, mobile: 140 },\n   { date: '2024-05-22', desktop: 81, mobile: 120 },\n   { date: '2024-05-23', desktop: 252, mobile: 290 },\n   { date: '2024-05-24', desktop: 294, mobile: 220 },\n   { date: '2024-05-25', desktop: 201, mobile: 250 },\n   { date: '2024-05-26', desktop: 213, mobile: 170 },\n   { date: '2024-05-27', desktop: 420, mobile: 460 },\n   { date: '2024-05-28', desktop: 233, mobile: 190 },\n   { date: '2024-05-29', desktop: 78, mobile: 130 },\n   { date: '2024-05-30', desktop: 340, mobile: 280 },\n   { date: '2024-05-31', desktop: 178, mobile: 230 },\n   { date: '2024-06-01', desktop: 178, mobile: 200 },\n   { date: '2024-06-02', desktop: 470, mobile: 410 },\n   { date: '2024-06-03', desktop: 103, mobile: 160 },\n   { date: '2024-06-04', desktop: 439, mobile: 380 },\n   { date: '2024-06-05', desktop: 88, mobile: 140 },\n   { date: '2024-06-06', desktop: 294, mobile: 250 },\n   { date: '2024-06-07', desktop: 323, mobile: 370 },\n   { date: '2024-06-08', desktop: 385, mobile: 320 },\n   { date: '2024-06-09', desktop: 438, mobile: 480 },\n   { date: '2024-06-10', desktop: 155, mobile: 200 },\n   { date: '2024-06-11', desktop: 92, mobile: 150 },\n   { date: '2024-06-12', desktop: 492, mobile: 420 },\n   { date: '2024-06-13', desktop: 81, mobile: 130 },\n   { date: '2024-06-14', desktop: 426, mobile: 380 },\n   { date: '2024-06-15', desktop: 307, mobile: 350 },\n   { date: '2024-06-16', desktop: 371, mobile: 310 },\n   { date: '2024-06-17', desktop: 475, mobile: 520 },\n   { date: '2024-06-18', desktop: 107, mobile: 170 },\n   { date: '2024-06-19', desktop: 341, mobile: 290 },\n   { date: '2024-06-20', desktop: 408, mobile: 450 },\n   { date: '2024-06-21', desktop: 169, mobile: 210 },\n   { date: '2024-06-22', desktop: 317, mobile: 270 },\n   { date: '2024-06-23', desktop: 480, mobile: 530 },\n   { date: '2024-06-24', desktop: 132, mobile: 180 },\n   { date: '2024-06-25', desktop: 141, mobile: 190 },\n   { date: '2024-06-26', desktop: 434, mobile: 380 },\n   { date: '2024-06-27', desktop: 448, mobile: 490 },\n   { date: '2024-06-28', desktop: 149, mobile: 200 },\n   { date: '2024-06-29', desktop: 103, mobile: 160 },\n   { date: '2024-06-30', desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   views: {\n      label: 'Page Views',\n   },\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [activeChart, setActiveChart]\n    = React.useState<keyof typeof chartConfig>('desktop')\n\n   const total = React.useMemo(\n      () => ({\n         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n      }),\n      [],\n   )\n\n   return (\n      <Card>\n         <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n            <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n               <CardTitle>Bar Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <div className=\"flex\">\n               {['desktop', 'mobile'].map((key) => {\n                  const chart = key as keyof typeof chartConfig\n                  return (\n                     <button\n                        key={chart}\n                        data-active={activeChart === chart}\n                        className=\"data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                        onClick={() => setActiveChart(chart)}\n                     >\n                        <span className=\"text-muted-foreground text-xs\">\n                           {chartConfig[chart].label}\n                        </span>\n                        <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                           {total[key as keyof typeof total].toLocaleString()}\n                        </span>\n                     </button>\n                  )\n               })}\n            </div>\n         </CardHeader>\n         <CardContent className=\"px-2 sm:p-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString('en-US', {\n                           month: 'short',\n                           day: 'numeric',\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     content={(\n                        <ChartTooltipContent\n                           className=\"w-[150px]\"\n                           nameKey=\"views\"\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString('en-US', {\n                                 month: 'short',\n                                 day: 'numeric',\n                                 year: 'numeric',\n                              })\n                           }}\n                        />\n                     )}\n                  />\n                  <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n   { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n   { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n   { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n   { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n   { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n   { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n   { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n   { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n   { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n   { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n   { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n   { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n   { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n   { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n   { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n   { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n   { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n   { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n   { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n   { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n   { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n   { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n   { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n   { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n   { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n   { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n   { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n   { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n   { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n   { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n   { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n   { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n   { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n   { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n   { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n   { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n   { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n   { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n   { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n   { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n   { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n   { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n   { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n   { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n   { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n   { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n   { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n   { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n   { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n   { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n   { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n   { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n   { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n   { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n   { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n   { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n   { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n   { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n   { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n   { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n   { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n   { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n   { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n   { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n   { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n   { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n   { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n   { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n   { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n   { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n   { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n   { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n   { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n   { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n   { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n   { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n   { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n   { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n   { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n   { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n   { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n   { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n   { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n   { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n   { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n   { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n   { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n   { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   views: {\n      label: \"Page Views\",\n   },\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [activeChart, setActiveChart] =\n      React.useState<keyof typeof chartConfig>(\"desktop\")\n\n   const total = React.useMemo(\n      () => ({\n         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n      }),\n      [],\n   )\n\n   return (\n      <Card>\n         <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n            <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n               <CardTitle>Bar Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <div className=\"flex\">\n               {[\"desktop\", \"mobile\"].map((key) => {\n                  const chart = key as keyof typeof chartConfig\n                  return (\n                     <button\n                        key={chart}\n                        data-active={activeChart === chart}\n                        className=\"relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                        onClick={() => setActiveChart(chart)}\n                     >\n                        <span className=\"text-xs text-muted-foreground\">\n                           {chartConfig[chart].label}\n                        </span>\n                        <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                           {total[key as keyof typeof total].toLocaleString()}\n                        </span>\n                     </button>\n                  )\n               })}\n            </div>\n         </CardHeader>\n         <CardContent className=\"px-2 sm:p-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString(\"en-US\", {\n                           month: \"short\",\n                           day: \"numeric\",\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           className=\"w-[150px]\"\n                           nameKey=\"views\"\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    month: \"short\",\n                                    day: \"numeric\",\n                                    year: \"numeric\",\n                                 },\n                              )\n                           }}\n                        />\n                     }\n                  />\n                  <Bar\n                     dataKey={activeChart}\n                     fill={`var(--color-${activeChart})`}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-bar-label-custom.json b/apps/web/public/r/styles/default/chart-bar-label-custom.json
index c382a43a..d6976cd0 100644
--- a/apps/web/public/r/styles/default/chart-bar-label-custom.json
+++ b/apps/web/public/r/styles/default/chart-bar-label-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-label-custom",
   "type": "registry:block",
-  "description": "A bar chart with a custom label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-label-custom.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n   label: {\n      color: 'hsl(var(--background))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     right: 16,\n                  }}\n               >\n                  <CartesianGrid horizontal={false} />\n                  <YAxis\n                     dataKey=\"month\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value => value.slice(0, 3)}\n                     hide\n                  />\n                  <XAxis dataKey=\"desktop\" type=\"number\" hide />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     layout=\"vertical\"\n                     fill=\"var(--color-desktop)\"\n                     radius={4}\n                  >\n                     <LabelList\n                        dataKey=\"month\"\n                        position=\"insideLeft\"\n                        offset={8}\n                        className=\"fill-[--color-label]\"\n                        fontSize={12}\n                     />\n                     <LabelList\n                        dataKey=\"desktop\"\n                        position=\"right\"\n                        offset={8}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   label: {\n      color: \"hsl(var(--background))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     right: 16,\n                  }}\n               >\n                  <CartesianGrid horizontal={false} />\n                  <YAxis\n                     dataKey=\"month\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                     hide\n                  />\n                  <XAxis dataKey=\"desktop\" type=\"number\" hide />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     layout=\"vertical\"\n                     fill=\"var(--color-desktop)\"\n                     radius={4}\n                  >\n                     <LabelList\n                        dataKey=\"month\"\n                        position=\"insideLeft\"\n                        offset={8}\n                        className=\"fill-[--color-label]\"\n                        fontSize={12}\n                     />\n                     <LabelList\n                        dataKey=\"desktop\"\n                        position=\"right\"\n                        offset={8}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-bar-label.json b/apps/web/public/r/styles/default/chart-bar-label.json
index 237c332a..2d01f6ef 100644
--- a/apps/web/public/r/styles/default/chart-bar-label.json
+++ b/apps/web/public/r/styles/default/chart-bar-label.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-label",
   "type": "registry:block",
-  "description": "A bar chart with a label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-label.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 20,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 20,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-bar-mixed.json b/apps/web/public/r/styles/default/chart-bar-mixed.json
index 0df86662..c875cd90 100644
--- a/apps/web/public/r/styles/default/chart-bar-mixed.json
+++ b/apps/web/public/r/styles/default/chart-bar-mixed.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-mixed",
   "type": "registry:block",
-  "description": "A mixed bar chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-mixed.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, XAxis, YAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Mixed</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     left: 0,\n                  }}\n               >\n                  <YAxis\n                     dataKey=\"browser\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value =>\n                        chartConfig[value as keyof typeof chartConfig]?.label}\n                  />\n                  <XAxis dataKey=\"visitors\" type=\"number\" hide />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-mixed.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Mixed</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     left: 0,\n                  }}\n               >\n                  <YAxis\n                     dataKey=\"browser\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) =>\n                        chartConfig[value as keyof typeof chartConfig]?.label\n                     }\n                  />\n                  <XAxis dataKey=\"visitors\" type=\"number\" hide />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-bar-multiple.json b/apps/web/public/r/styles/default/chart-bar-multiple.json
index 8da28818..f8fed3fb 100644
--- a/apps/web/public/r/styles/default/chart-bar-multiple.json
+++ b/apps/web/public/r/styles/default/chart-bar-multiple.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-multiple",
   "type": "registry:block",
-  "description": "A multiple bar chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-multiple.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Multiple</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dashed\" />}\n                  />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n                  <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Multiple</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dashed\" />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     radius={4}\n                  />\n                  <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-bar-negative.json b/apps/web/public/r/styles/default/chart-bar-negative.json
index bca15e47..06ef4661 100644
--- a/apps/web/public/r/styles/default/chart-bar-negative.json
+++ b/apps/web/public/r/styles/default/chart-bar-negative.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-negative",
   "type": "registry:block",
-  "description": "A bar chart with negative values",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-negative.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', visitors: 186 },\n   { month: 'February', visitors: 205 },\n   { month: 'March', visitors: -207 },\n   { month: 'April', visitors: 173 },\n   { month: 'May', visitors: -209 },\n   { month: 'June', visitors: 214 },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Negative</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel hideIndicator />}\n                  />\n                  <Bar dataKey=\"visitors\">\n                     <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n                     {chartData.map(item => (\n                        <Cell\n                           key={item.month}\n                           fill={\n                              item.visitors > 0\n                                 ? 'hsl(var(--chart-1))'\n                                 : 'hsl(var(--chart-2))'\n                           }\n                        />\n                     ))}\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-negative.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", visitors: 186 },\n   { month: \"February\", visitors: 205 },\n   { month: \"March\", visitors: -207 },\n   { month: \"April\", visitors: 173 },\n   { month: \"May\", visitors: -209 },\n   { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Negative</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel hideIndicator />}\n                  />\n                  <Bar dataKey=\"visitors\">\n                     <LabelList\n                        position=\"top\"\n                        dataKey=\"month\"\n                        fillOpacity={1}\n                     />\n                     {chartData.map((item) => (\n                        <Cell\n                           key={item.month}\n                           fill={\n                              item.visitors > 0\n                                 ? \"hsl(var(--chart-1))\"\n                                 : \"hsl(var(--chart-2))\"\n                           }\n                        />\n                     ))}\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-bar-stacked.json b/apps/web/public/r/styles/default/chart-bar-stacked.json
index 8601feb0..6cb5f7df 100644
--- a/apps/web/public/r/styles/default/chart-bar-stacked.json
+++ b/apps/web/public/r/styles/default/chart-bar-stacked.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-stacked",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-stacked.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <ChartLegend content={<ChartLegendContent />} />\n                  <Bar\n                     dataKey=\"desktop\"\n                     stackId=\"a\"\n                     fill=\"var(--color-desktop)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"mobile\"\n                     stackId=\"a\"\n                     fill=\"var(--color-mobile)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <ChartLegend content={<ChartLegendContent />} />\n                  <Bar\n                     dataKey=\"desktop\"\n                     stackId=\"a\"\n                     fill=\"var(--color-desktop)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"mobile\"\n                     stackId=\"a\"\n                     fill=\"var(--color-mobile)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-line-default.json b/apps/web/public/r/styles/default/chart-line-default.json
index 975f42ea..702f97a8 100644
--- a/apps/web/public/r/styles/default/chart-line-default.json
+++ b/apps/web/public/r/styles/default/chart-line-default.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-default",
   "type": "registry:block",
-  "description": "A line chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-default.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-line-dots-colors.json b/apps/web/public/r/styles/default/chart-line-dots-colors.json
index b57245ff..a1050ee1 100644
--- a/apps/web/public/r/styles/default/chart-line-dots-colors.json
+++ b/apps/web/public/r/styles/default/chart-line-dots-colors.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-dots-colors",
   "type": "registry:block",
-  "description": "A line chart with dots and colors",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots-colors.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Dot, Line, LineChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n      color: 'hsl(var(--chart-2))',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Dots Colors</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 24,\n                     left: 24,\n                     right: 24,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={(\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           nameKey=\"visitors\"\n                           hideLabel\n                        />\n                     )}\n                  />\n                  <Line\n                     dataKey=\"visitors\"\n                     type=\"natural\"\n                     stroke=\"var(--color-visitors)\"\n                     strokeWidth={2}\n                     dot={({ payload, ...props }) => {\n                        return (\n                           <Dot\n                              key={payload.browser}\n                              r={5}\n                              cx={props.cx}\n                              cy={props.cy}\n                              fill={payload.fill}\n                              stroke={payload.fill}\n                           />\n                        )\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-dots-colors.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Dots Colors</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 24,\n                     left: 24,\n                     right: 24,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           nameKey=\"visitors\"\n                           hideLabel\n                        />\n                     }\n                  />\n                  <Line\n                     dataKey=\"visitors\"\n                     type=\"natural\"\n                     stroke=\"var(--color-visitors)\"\n                     strokeWidth={2}\n                     dot={({ payload, ...props }) => {\n                        return (\n                           <Dot\n                              key={payload.browser}\n                              r={5}\n                              cx={props.cx}\n                              cy={props.cy}\n                              fill={payload.fill}\n                              stroke={payload.fill}\n                           />\n                        )\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-line-dots-custom.json b/apps/web/public/r/styles/default/chart-line-dots-custom.json
index 799ea543..746231d5 100644
--- a/apps/web/public/r/styles/default/chart-line-dots-custom.json
+++ b/apps/web/public/r/styles/default/chart-line-dots-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-dots-custom",
   "type": "registry:block",
-  "description": "A line chart with custom dots",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots-custom.tsx",
-      "content": "'use client'\n\nimport { GitCommitVertical, TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Custom Dots</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={({ cx, cy, payload }) => {\n                        const r = 24\n                        return (\n                           <GitCommitVertical\n                              key={payload.month}\n                              x={cx - r / 2}\n                              y={cy - r / 2}\n                              width={r}\n                              height={r}\n                              fill=\"hsl(var(--background))\"\n                              stroke=\"var(--color-desktop)\"\n                           />\n                        )\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-dots-custom.tsx",
+      "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Custom Dots</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={({ cx, cy, payload }) => {\n                        const r = 24\n                        return (\n                           <GitCommitVertical\n                              key={payload.month}\n                              x={cx - r / 2}\n                              y={cy - r / 2}\n                              width={r}\n                              height={r}\n                              fill=\"hsl(var(--background))\"\n                              stroke=\"var(--color-desktop)\"\n                           />\n                        )\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-line-dots.json b/apps/web/public/r/styles/default/chart-line-dots.json
index d6bae5a8..7509887b 100644
--- a/apps/web/public/r/styles/default/chart-line-dots.json
+++ b/apps/web/public/r/styles/default/chart-line-dots.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-dots",
   "type": "registry:block",
-  "description": "A line chart with dots",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Dots</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: 'var(--color-desktop)',\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Dots</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: \"var(--color-desktop)\",\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-line-interactive.json b/apps/web/public/r/styles/default/chart-line-interactive.json
index 9fd90120..2a3a001e 100644
--- a/apps/web/public/r/styles/default/chart-line-interactive.json
+++ b/apps/web/public/r/styles/default/chart-line-interactive.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-interactive",
   "type": "registry:block",
-  "description": "An interactive line chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-interactive.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { date: '2024-04-01', desktop: 222, mobile: 150 },\n   { date: '2024-04-02', desktop: 97, mobile: 180 },\n   { date: '2024-04-03', desktop: 167, mobile: 120 },\n   { date: '2024-04-04', desktop: 242, mobile: 260 },\n   { date: '2024-04-05', desktop: 373, mobile: 290 },\n   { date: '2024-04-06', desktop: 301, mobile: 340 },\n   { date: '2024-04-07', desktop: 245, mobile: 180 },\n   { date: '2024-04-08', desktop: 409, mobile: 320 },\n   { date: '2024-04-09', desktop: 59, mobile: 110 },\n   { date: '2024-04-10', desktop: 261, mobile: 190 },\n   { date: '2024-04-11', desktop: 327, mobile: 350 },\n   { date: '2024-04-12', desktop: 292, mobile: 210 },\n   { date: '2024-04-13', desktop: 342, mobile: 380 },\n   { date: '2024-04-14', desktop: 137, mobile: 220 },\n   { date: '2024-04-15', desktop: 120, mobile: 170 },\n   { date: '2024-04-16', desktop: 138, mobile: 190 },\n   { date: '2024-04-17', desktop: 446, mobile: 360 },\n   { date: '2024-04-18', desktop: 364, mobile: 410 },\n   { date: '2024-04-19', desktop: 243, mobile: 180 },\n   { date: '2024-04-20', desktop: 89, mobile: 150 },\n   { date: '2024-04-21', desktop: 137, mobile: 200 },\n   { date: '2024-04-22', desktop: 224, mobile: 170 },\n   { date: '2024-04-23', desktop: 138, mobile: 230 },\n   { date: '2024-04-24', desktop: 387, mobile: 290 },\n   { date: '2024-04-25', desktop: 215, mobile: 250 },\n   { date: '2024-04-26', desktop: 75, mobile: 130 },\n   { date: '2024-04-27', desktop: 383, mobile: 420 },\n   { date: '2024-04-28', desktop: 122, mobile: 180 },\n   { date: '2024-04-29', desktop: 315, mobile: 240 },\n   { date: '2024-04-30', desktop: 454, mobile: 380 },\n   { date: '2024-05-01', desktop: 165, mobile: 220 },\n   { date: '2024-05-02', desktop: 293, mobile: 310 },\n   { date: '2024-05-03', desktop: 247, mobile: 190 },\n   { date: '2024-05-04', desktop: 385, mobile: 420 },\n   { date: '2024-05-05', desktop: 481, mobile: 390 },\n   { date: '2024-05-06', desktop: 498, mobile: 520 },\n   { date: '2024-05-07', desktop: 388, mobile: 300 },\n   { date: '2024-05-08', desktop: 149, mobile: 210 },\n   { date: '2024-05-09', desktop: 227, mobile: 180 },\n   { date: '2024-05-10', desktop: 293, mobile: 330 },\n   { date: '2024-05-11', desktop: 335, mobile: 270 },\n   { date: '2024-05-12', desktop: 197, mobile: 240 },\n   { date: '2024-05-13', desktop: 197, mobile: 160 },\n   { date: '2024-05-14', desktop: 448, mobile: 490 },\n   { date: '2024-05-15', desktop: 473, mobile: 380 },\n   { date: '2024-05-16', desktop: 338, mobile: 400 },\n   { date: '2024-05-17', desktop: 499, mobile: 420 },\n   { date: '2024-05-18', desktop: 315, mobile: 350 },\n   { date: '2024-05-19', desktop: 235, mobile: 180 },\n   { date: '2024-05-20', desktop: 177, mobile: 230 },\n   { date: '2024-05-21', desktop: 82, mobile: 140 },\n   { date: '2024-05-22', desktop: 81, mobile: 120 },\n   { date: '2024-05-23', desktop: 252, mobile: 290 },\n   { date: '2024-05-24', desktop: 294, mobile: 220 },\n   { date: '2024-05-25', desktop: 201, mobile: 250 },\n   { date: '2024-05-26', desktop: 213, mobile: 170 },\n   { date: '2024-05-27', desktop: 420, mobile: 460 },\n   { date: '2024-05-28', desktop: 233, mobile: 190 },\n   { date: '2024-05-29', desktop: 78, mobile: 130 },\n   { date: '2024-05-30', desktop: 340, mobile: 280 },\n   { date: '2024-05-31', desktop: 178, mobile: 230 },\n   { date: '2024-06-01', desktop: 178, mobile: 200 },\n   { date: '2024-06-02', desktop: 470, mobile: 410 },\n   { date: '2024-06-03', desktop: 103, mobile: 160 },\n   { date: '2024-06-04', desktop: 439, mobile: 380 },\n   { date: '2024-06-05', desktop: 88, mobile: 140 },\n   { date: '2024-06-06', desktop: 294, mobile: 250 },\n   { date: '2024-06-07', desktop: 323, mobile: 370 },\n   { date: '2024-06-08', desktop: 385, mobile: 320 },\n   { date: '2024-06-09', desktop: 438, mobile: 480 },\n   { date: '2024-06-10', desktop: 155, mobile: 200 },\n   { date: '2024-06-11', desktop: 92, mobile: 150 },\n   { date: '2024-06-12', desktop: 492, mobile: 420 },\n   { date: '2024-06-13', desktop: 81, mobile: 130 },\n   { date: '2024-06-14', desktop: 426, mobile: 380 },\n   { date: '2024-06-15', desktop: 307, mobile: 350 },\n   { date: '2024-06-16', desktop: 371, mobile: 310 },\n   { date: '2024-06-17', desktop: 475, mobile: 520 },\n   { date: '2024-06-18', desktop: 107, mobile: 170 },\n   { date: '2024-06-19', desktop: 341, mobile: 290 },\n   { date: '2024-06-20', desktop: 408, mobile: 450 },\n   { date: '2024-06-21', desktop: 169, mobile: 210 },\n   { date: '2024-06-22', desktop: 317, mobile: 270 },\n   { date: '2024-06-23', desktop: 480, mobile: 530 },\n   { date: '2024-06-24', desktop: 132, mobile: 180 },\n   { date: '2024-06-25', desktop: 141, mobile: 190 },\n   { date: '2024-06-26', desktop: 434, mobile: 380 },\n   { date: '2024-06-27', desktop: 448, mobile: 490 },\n   { date: '2024-06-28', desktop: 149, mobile: 200 },\n   { date: '2024-06-29', desktop: 103, mobile: 160 },\n   { date: '2024-06-30', desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   views: {\n      label: 'Page Views',\n   },\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [activeChart, setActiveChart]\n    = React.useState<keyof typeof chartConfig>('desktop')\n\n   const total = React.useMemo(\n      () => ({\n         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n      }),\n      [],\n   )\n\n   return (\n      <Card>\n         <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n            <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n               <CardTitle>Line Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <div className=\"flex\">\n               {['desktop', 'mobile'].map((key) => {\n                  const chart = key as keyof typeof chartConfig\n                  return (\n                     <button\n                        key={chart}\n                        data-active={activeChart === chart}\n                        className=\"data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                        onClick={() => setActiveChart(chart)}\n                     >\n                        <span className=\"text-muted-foreground text-xs\">\n                           {chartConfig[chart].label}\n                        </span>\n                        <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                           {total[key as keyof typeof total].toLocaleString()}\n                        </span>\n                     </button>\n                  )\n               })}\n            </div>\n         </CardHeader>\n         <CardContent className=\"px-2 sm:p-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString('en-US', {\n                           month: 'short',\n                           day: 'numeric',\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     content={(\n                        <ChartTooltipContent\n                           className=\"w-[150px]\"\n                           nameKey=\"views\"\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString('en-US', {\n                                 month: 'short',\n                                 day: 'numeric',\n                                 year: 'numeric',\n                              })\n                           }}\n                        />\n                     )}\n                  />\n                  <Line\n                     dataKey={activeChart}\n                     type=\"monotone\"\n                     stroke={`var(--color-${activeChart})`}\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n   { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n   { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n   { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n   { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n   { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n   { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n   { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n   { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n   { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n   { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n   { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n   { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n   { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n   { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n   { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n   { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n   { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n   { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n   { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n   { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n   { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n   { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n   { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n   { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n   { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n   { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n   { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n   { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n   { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n   { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n   { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n   { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n   { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n   { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n   { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n   { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n   { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n   { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n   { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n   { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n   { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n   { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n   { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n   { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n   { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n   { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n   { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n   { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n   { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n   { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n   { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n   { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n   { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n   { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n   { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n   { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n   { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n   { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n   { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n   { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n   { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n   { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n   { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n   { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n   { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n   { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n   { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n   { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n   { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n   { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n   { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n   { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n   { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n   { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n   { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n   { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n   { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n   { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n   { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n   { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n   { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n   { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n   { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n   { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n   { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n   { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n   { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n   { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   views: {\n      label: \"Page Views\",\n   },\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [activeChart, setActiveChart] =\n      React.useState<keyof typeof chartConfig>(\"desktop\")\n\n   const total = React.useMemo(\n      () => ({\n         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n      }),\n      [],\n   )\n\n   return (\n      <Card>\n         <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n            <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n               <CardTitle>Line Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <div className=\"flex\">\n               {[\"desktop\", \"mobile\"].map((key) => {\n                  const chart = key as keyof typeof chartConfig\n                  return (\n                     <button\n                        key={chart}\n                        data-active={activeChart === chart}\n                        className=\"flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                        onClick={() => setActiveChart(chart)}\n                     >\n                        <span className=\"text-xs text-muted-foreground\">\n                           {chartConfig[chart].label}\n                        </span>\n                        <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                           {total[key as keyof typeof total].toLocaleString()}\n                        </span>\n                     </button>\n                  )\n               })}\n            </div>\n         </CardHeader>\n         <CardContent className=\"px-2 sm:p-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString(\"en-US\", {\n                           month: \"short\",\n                           day: \"numeric\",\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           className=\"w-[150px]\"\n                           nameKey=\"views\"\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    month: \"short\",\n                                    day: \"numeric\",\n                                    year: \"numeric\",\n                                 },\n                              )\n                           }}\n                        />\n                     }\n                  />\n                  <Line\n                     dataKey={activeChart}\n                     type=\"monotone\"\n                     stroke={`var(--color-${activeChart})`}\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-line-label-custom.json b/apps/web/public/r/styles/default/chart-line-label-custom.json
index 2930c662..cbde50cb 100644
--- a/apps/web/public/r/styles/default/chart-line-label-custom.json
+++ b/apps/web/public/r/styles/default/chart-line-label-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-label-custom",
   "type": "registry:block",
-  "description": "A line chart with a custom label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-label-custom.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, LabelList, Line, LineChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n      color: 'hsl(var(--chart-2))',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 24,\n                     left: 24,\n                     right: 24,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={(\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           nameKey=\"visitors\"\n                           hideLabel\n                        />\n                     )}\n                  />\n                  <Line\n                     dataKey=\"visitors\"\n                     type=\"natural\"\n                     stroke=\"var(--color-visitors)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: 'var(--color-visitors)',\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  >\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                        dataKey=\"browser\"\n                        formatter={(value: keyof typeof chartConfig) =>\n                           chartConfig[value]?.label}\n                     />\n                  </Line>\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 24,\n                     left: 24,\n                     right: 24,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           nameKey=\"visitors\"\n                           hideLabel\n                        />\n                     }\n                  />\n                  <Line\n                     dataKey=\"visitors\"\n                     type=\"natural\"\n                     stroke=\"var(--color-visitors)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: \"var(--color-visitors)\",\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  >\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                        dataKey=\"browser\"\n                        formatter={(value: keyof typeof chartConfig) =>\n                           chartConfig[value]?.label\n                        }\n                     />\n                  </Line>\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-line-label.json b/apps/web/public/r/styles/default/chart-line-label.json
index 74b86479..3ba3e46b 100644
--- a/apps/web/public/r/styles/default/chart-line-label.json
+++ b/apps/web/public/r/styles/default/chart-line-label.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-label",
   "type": "registry:block",
-  "description": "A line chart with a label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-label.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 20,\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: 'var(--color-desktop)',\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  >\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Line>\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 20,\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: \"var(--color-desktop)\",\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  >\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Line>\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-line-linear.json b/apps/web/public/r/styles/default/chart-line-linear.json
index 3d88b4c1..7930a838 100644
--- a/apps/web/public/r/styles/default/chart-line-linear.json
+++ b/apps/web/public/r/styles/default/chart-line-linear.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-linear",
   "type": "registry:block",
-  "description": "A linear line chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-linear.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Linear</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"linear\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Linear</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"linear\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-line-multiple.json b/apps/web/public/r/styles/default/chart-line-multiple.json
index 53e11b19..5838459e 100644
--- a/apps/web/public/r/styles/default/chart-line-multiple.json
+++ b/apps/web/public/r/styles/default/chart-line-multiple.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-multiple",
   "type": "registry:block",
-  "description": "A multiple line chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-multiple.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Multiple</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"monotone\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n                  <Line\n                     dataKey=\"mobile\"\n                     type=\"monotone\"\n                     stroke=\"var(--color-mobile)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     Showing total visitors for the last 6 months\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Multiple</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"monotone\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n                  <Line\n                     dataKey=\"mobile\"\n                     type=\"monotone\"\n                     stroke=\"var(--color-mobile)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     Showing total visitors for the last 6 months\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-line-step.json b/apps/web/public/r/styles/default/chart-line-step.json
index 7665ddbd..2e07936f 100644
--- a/apps/web/public/r/styles/default/chart-line-step.json
+++ b/apps/web/public/r/styles/default/chart-line-step.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-step",
   "type": "registry:block",
-  "description": "A line chart with step",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-step.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Step</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"step\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-step.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Step</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"step\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-pie-donut-active.json b/apps/web/public/r/styles/default/chart-pie-donut-active.json
index fae0602c..b57f9680 100644
--- a/apps/web/public/r/styles/default/chart-pie-donut-active.json
+++ b/apps/web/public/r/styles/default/chart-pie-donut-active.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-donut-active",
   "type": "registry:block",
-  "description": "A donut chart with an active sector",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut-active.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Label, Pie, PieChart, Sector } from 'recharts'\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut Active</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                     activeIndex={0}\n                     activeShape={({\n                        outerRadius = 0,\n                        ...props\n                     }: PieSectorDataItem) => (\n                        <Sector {...props} outerRadius={outerRadius + 10} />\n                     )}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-donut-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut Active</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                     activeIndex={0}\n                     activeShape={({\n                        outerRadius = 0,\n                        ...props\n                     }: PieSectorDataItem) => (\n                        <Sector {...props} outerRadius={outerRadius + 10} />\n                     )}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-pie-donut-text.json b/apps/web/public/r/styles/default/chart-pie-donut-text.json
index 408e3a35..69d9679b 100644
--- a/apps/web/public/r/styles/default/chart-pie-donut-text.json
+++ b/apps/web/public/r/styles/default/chart-pie-donut-text.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-donut-text",
   "type": "registry:block",
-  "description": "A donut chart with text",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut-text.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { TrendingUp } from 'lucide-react'\nimport { Label, Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 287, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 190, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const totalVisitors = React.useMemo(() => {\n      return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n   }, [])\n\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut with Text</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-3xl font-bold\"\n                                    >\n                                       {totalVisitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-donut-text.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const totalVisitors = React.useMemo(() => {\n      return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n   }, [])\n\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut with Text</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-3xl font-bold\"\n                                    >\n                                       {totalVisitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-pie-donut.json b/apps/web/public/r/styles/default/chart-pie-donut.json
index 75779363..c0772bc6 100644
--- a/apps/web/public/r/styles/default/chart-pie-donut.json
+++ b/apps/web/public/r/styles/default/chart-pie-donut.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-donut",
   "type": "registry:block",
-  "description": "A donut chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-donut.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-pie-interactive.json b/apps/web/public/r/styles/default/chart-pie-interactive.json
index dd6eccdd..ac5349ad 100644
--- a/apps/web/public/r/styles/default/chart-pie-interactive.json
+++ b/apps/web/public/r/styles/default/chart-pie-interactive.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-interactive",
   "type": "registry:block",
-  "description": "An interactive pie chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-interactive.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Label, Pie, PieChart, Sector } from 'recharts'\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartStyle,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/default/ui/select'\nconst desktopData = [\n   { month: 'january', desktop: 186, fill: 'var(--color-january)' },\n   { month: 'february', desktop: 305, fill: 'var(--color-february)' },\n   { month: 'march', desktop: 237, fill: 'var(--color-march)' },\n   { month: 'april', desktop: 173, fill: 'var(--color-april)' },\n   { month: 'may', desktop: 209, fill: 'var(--color-may)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   desktop: {\n      label: 'Desktop',\n   },\n   mobile: {\n      label: 'Mobile',\n   },\n   january: {\n      label: 'January',\n      color: 'hsl(var(--chart-1))',\n   },\n   february: {\n      label: 'February',\n      color: 'hsl(var(--chart-2))',\n   },\n   march: {\n      label: 'March',\n      color: 'hsl(var(--chart-3))',\n   },\n   april: {\n      label: 'April',\n      color: 'hsl(var(--chart-4))',\n   },\n   may: {\n      label: 'May',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const id = 'pie-interactive'\n   const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n   const activeIndex = React.useMemo(\n      () => desktopData.findIndex(item => item.month === activeMonth),\n      [activeMonth],\n   )\n   const months = React.useMemo(() => desktopData.map(item => item.month), [])\n\n   return (\n      <Card data-chart={id} className=\"flex flex-col\">\n         <ChartStyle id={id} config={chartConfig} />\n         <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n            <div className=\"grid gap-1\">\n               <CardTitle>Pie Chart - Interactive</CardTitle>\n               <CardDescription>January - June 2024</CardDescription>\n            </div>\n            <Select value={activeMonth} onValueChange={setActiveMonth}>\n               <SelectTrigger\n                  className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n                  aria-label=\"Select a value\"\n               >\n                  <SelectValue placeholder=\"Select month\" />\n               </SelectTrigger>\n               <SelectContent align=\"end\" className=\"rounded-xl\">\n                  {months.map((key) => {\n                     const config = chartConfig[key as keyof typeof chartConfig]\n\n                     if (!config) {\n                        return null\n                     }\n\n                     return (\n                        <SelectItem\n                           key={key}\n                           value={key}\n                           className=\"rounded-lg [&_span]:flex\"\n                        >\n                           <div className=\"flex items-center gap-2 text-xs\">\n                              <span\n                                 className=\"flex size-3 shrink-0 rounded-sm\"\n                                 style={{\n                                    backgroundColor: `var(--color-${key})`,\n                                 }}\n                              />\n                              {config?.label}\n                           </div>\n                        </SelectItem>\n                     )\n                  })}\n               </SelectContent>\n            </Select>\n         </CardHeader>\n         <CardContent className=\"flex flex-1 justify-center pb-0\">\n            <ChartContainer\n               id={id}\n               config={chartConfig}\n               className=\"mx-auto aspect-square w-full max-w-[300px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={desktopData}\n                     dataKey=\"desktop\"\n                     nameKey=\"month\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                     activeIndex={activeIndex}\n                     activeShape={({\n                        outerRadius = 0,\n                        ...props\n                     }: PieSectorDataItem) => (\n                        <g>\n                           <Sector {...props} outerRadius={outerRadius + 10} />\n                           <Sector\n                              {...props}\n                              outerRadius={outerRadius + 25}\n                              innerRadius={outerRadius + 12}\n                           />\n                        </g>\n                     )}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-3xl font-bold\"\n                                    >\n                                       {desktopData[activeIndex].desktop.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartStyle,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/default/ui/select\"\nconst desktopData = [\n   { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n   { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n   { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n   { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n   { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   desktop: {\n      label: \"Desktop\",\n   },\n   mobile: {\n      label: \"Mobile\",\n   },\n   january: {\n      label: \"January\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   february: {\n      label: \"February\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   march: {\n      label: \"March\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   april: {\n      label: \"April\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   may: {\n      label: \"May\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const id = \"pie-interactive\"\n   const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n   const activeIndex = React.useMemo(\n      () => desktopData.findIndex((item) => item.month === activeMonth),\n      [activeMonth],\n   )\n   const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n   return (\n      <Card data-chart={id} className=\"flex flex-col\">\n         <ChartStyle id={id} config={chartConfig} />\n         <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n            <div className=\"grid gap-1\">\n               <CardTitle>Pie Chart - Interactive</CardTitle>\n               <CardDescription>January - June 2024</CardDescription>\n            </div>\n            <Select value={activeMonth} onValueChange={setActiveMonth}>\n               <SelectTrigger\n                  className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n                  aria-label=\"Select a value\"\n               >\n                  <SelectValue placeholder=\"Select month\" />\n               </SelectTrigger>\n               <SelectContent align=\"end\" className=\"rounded-xl\">\n                  {months.map((key) => {\n                     const config = chartConfig[key as keyof typeof chartConfig]\n\n                     if (!config) {\n                        return null\n                     }\n\n                     return (\n                        <SelectItem\n                           key={key}\n                           value={key}\n                           className=\"rounded-lg [&_span]:flex\"\n                        >\n                           <div className=\"flex items-center gap-2 text-xs\">\n                              <span\n                                 className=\"flex h-3 w-3 shrink-0 rounded-sm\"\n                                 style={{\n                                    backgroundColor: `var(--color-${key})`,\n                                 }}\n                              />\n                              {config?.label}\n                           </div>\n                        </SelectItem>\n                     )\n                  })}\n               </SelectContent>\n            </Select>\n         </CardHeader>\n         <CardContent className=\"flex flex-1 justify-center pb-0\">\n            <ChartContainer\n               id={id}\n               config={chartConfig}\n               className=\"mx-auto aspect-square w-full max-w-[300px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={desktopData}\n                     dataKey=\"desktop\"\n                     nameKey=\"month\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                     activeIndex={activeIndex}\n                     activeShape={({\n                        outerRadius = 0,\n                        ...props\n                     }: PieSectorDataItem) => (\n                        <g>\n                           <Sector {...props} outerRadius={outerRadius + 10} />\n                           <Sector\n                              {...props}\n                              outerRadius={outerRadius + 25}\n                              innerRadius={outerRadius + 12}\n                           />\n                        </g>\n                     )}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-3xl font-bold\"\n                                    >\n                                       {desktopData[\n                                          activeIndex\n                                       ].desktop.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-pie-label-custom.json b/apps/web/public/r/styles/default/chart-pie-label-custom.json
index 10470cf8..a2ada66f 100644
--- a/apps/web/public/r/styles/default/chart-pie-label-custom.json
+++ b/apps/web/public/r/styles/default/chart-pie-label-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-label-custom",
   "type": "registry:block",
-  "description": "A pie chart with a custom label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label-custom.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     labelLine={false}\n                     label={({ payload, ...props }) => {\n                        return (\n                           <text\n                              cx={props.cx}\n                              cy={props.cy}\n                              x={props.x}\n                              y={props.y}\n                              textAnchor={props.textAnchor}\n                              dominantBaseline={props.dominantBaseline}\n                              fill=\"hsla(var(--foreground))\"\n                           >\n                              {`${\n                      chartConfig[payload.browser as keyof typeof chartConfig]\n                        ?.label\n                    } (${payload.visitors})`}\n                           </text>\n                        )\n                     }}\n                     nameKey=\"browser\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] px-0\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent nameKey=\"visitors\" hideLabel />\n                     }\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     labelLine={false}\n                     label={({ payload, ...props }) => {\n                        return (\n                           <text\n                              cx={props.cx}\n                              cy={props.cy}\n                              x={props.x}\n                              y={props.y}\n                              textAnchor={props.textAnchor}\n                              dominantBaseline={props.dominantBaseline}\n                              fill=\"hsla(var(--foreground))\"\n                           >\n                              {payload.visitors}\n                           </text>\n                        )\n                     }}\n                     nameKey=\"browser\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-pie-label-list.json b/apps/web/public/r/styles/default/chart-pie-label-list.json
index 911bcfab..35da4bb9 100644
--- a/apps/web/public/r/styles/default/chart-pie-label-list.json
+++ b/apps/web/public/r/styles/default/chart-pie-label-list.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-label-list",
   "type": "registry:block",
-  "description": "A pie chart with a label list",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label-list.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { LabelList, Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Label List</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n                  />\n                  <Pie data={chartData} dataKey=\"visitors\">\n                     <LabelList\n                        dataKey=\"browser\"\n                        className=\"fill-background\"\n                        stroke=\"none\"\n                        fontSize={12}\n                        formatter={(value: keyof typeof chartConfig) =>\n                           chartConfig[value]?.label}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-label-list.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Label List</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent nameKey=\"visitors\" hideLabel />\n                     }\n                  />\n                  <Pie data={chartData} dataKey=\"visitors\">\n                     <LabelList\n                        dataKey=\"browser\"\n                        className=\"fill-background\"\n                        stroke=\"none\"\n                        fontSize={12}\n                        formatter={(value: keyof typeof chartConfig) =>\n                           chartConfig[value]?.label\n                        }\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-pie-label.json b/apps/web/public/r/styles/default/chart-pie-label.json
index da3035c5..0dd9e7f1 100644
--- a/apps/web/public/r/styles/default/chart-pie-label.json
+++ b/apps/web/public/r/styles/default/chart-pie-label.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-label",
   "type": "registry:block",
-  "description": "A pie chart with a label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[250px] pb-0\"\n            >\n               <PieChart>\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground\"\n            >\n               <PieChart>\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     label\n                     nameKey=\"browser\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-pie-legend.json b/apps/web/public/r/styles/default/chart-pie-legend.json
index b4968d47..021c9eeb 100644
--- a/apps/web/public/r/styles/default/chart-pie-legend.json
+++ b/apps/web/public/r/styles/default/chart-pie-legend.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-legend",
   "type": "registry:block",
-  "description": "A pie chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-legend.tsx",
-      "content": "'use client'\n\nimport { Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Legend</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[300px]\"\n            >\n               <PieChart>\n                  <Pie data={chartData} dataKey=\"visitors\" />\n                  <ChartLegend\n                     content={<ChartLegendContent nameKey=\"browser\" />}\n                     className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-legend.tsx",
+      "content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Legend</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[300px]\"\n            >\n               <PieChart>\n                  <Pie data={chartData} dataKey=\"visitors\" />\n                  <ChartLegend\n                     content={<ChartLegendContent nameKey=\"browser\" />}\n                     className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-pie-separator-none.json b/apps/web/public/r/styles/default/chart-pie-separator-none.json
index 313d09f9..e035f6bd 100644
--- a/apps/web/public/r/styles/default/chart-pie-separator-none.json
+++ b/apps/web/public/r/styles/default/chart-pie-separator-none.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-separator-none",
   "type": "registry:block",
-  "description": "A pie chart with no separator",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-separator-none.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Separator None</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     stroke=\"0\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-separator-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Separator None</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     stroke=\"0\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-pie-simple.json b/apps/web/public/r/styles/default/chart-pie-simple.json
index 3f71200e..92c1323e 100644
--- a/apps/web/public/r/styles/default/chart-pie-simple.json
+++ b/apps/web/public/r/styles/default/chart-pie-simple.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-simple",
   "type": "registry:block",
-  "description": "A simple pie chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-simple.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-pie-stacked.json b/apps/web/public/r/styles/default/chart-pie-stacked.json
index 717ba61d..d2327cd8 100644
--- a/apps/web/public/r/styles/default/chart-pie-stacked.json
+++ b/apps/web/public/r/styles/default/chart-pie-stacked.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-stacked",
   "type": "registry:block",
-  "description": "A pie chart with stacked sections",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-stacked.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { TrendingUp } from 'lucide-react'\nimport { Label, Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst desktopData = [\n   { month: 'january', desktop: 186, fill: 'var(--color-january)' },\n   { month: 'february', desktop: 305, fill: 'var(--color-february)' },\n   { month: 'march', desktop: 237, fill: 'var(--color-march)' },\n   { month: 'april', desktop: 173, fill: 'var(--color-april)' },\n   { month: 'may', desktop: 209, fill: 'var(--color-may)' },\n]\n\nconst mobileData = [\n   { month: 'january', mobile: 80, fill: 'var(--color-january)' },\n   { month: 'february', mobile: 200, fill: 'var(--color-february)' },\n   { month: 'march', mobile: 120, fill: 'var(--color-march)' },\n   { month: 'april', mobile: 190, fill: 'var(--color-april)' },\n   { month: 'may', mobile: 130, fill: 'var(--color-may)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   desktop: {\n      label: 'Desktop',\n   },\n   mobile: {\n      label: 'Mobile',\n   },\n   january: {\n      label: 'January',\n      color: 'hsl(var(--chart-1))',\n   },\n   february: {\n      label: 'February',\n      color: 'hsl(var(--chart-2))',\n   },\n   march: {\n      label: 'March',\n      color: 'hsl(var(--chart-3))',\n   },\n   april: {\n      label: 'April',\n      color: 'hsl(var(--chart-4))',\n   },\n   may: {\n      label: 'May',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Stacked</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={(\n                        <ChartTooltipContent\n                           labelKey=\"visitors\"\n                           nameKey=\"month\"\n                           indicator=\"line\"\n                           labelFormatter={(_, payload) => {\n                              return chartConfig[\n                                 payload?.[0].dataKey as keyof typeof chartConfig\n                              ].label\n                           }}\n                        />\n                     )}\n                  />\n                  <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n                  <Pie\n                     data={mobileData}\n                     dataKey=\"mobile\"\n                     innerRadius={70}\n                     outerRadius={90}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst desktopData = [\n   { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n   { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n   { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n   { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n   { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n   { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n   { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n   { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n   { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n   { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   desktop: {\n      label: \"Desktop\",\n   },\n   mobile: {\n      label: \"Mobile\",\n   },\n   january: {\n      label: \"January\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   february: {\n      label: \"February\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   march: {\n      label: \"March\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   april: {\n      label: \"April\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   may: {\n      label: \"May\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Stacked</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           labelKey=\"visitors\"\n                           nameKey=\"month\"\n                           indicator=\"line\"\n                           labelFormatter={(_, payload) => {\n                              return chartConfig[\n                                 payload?.[0]\n                                    .dataKey as keyof typeof chartConfig\n                              ].label\n                           }}\n                        />\n                     }\n                  />\n                  <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n                  <Pie\n                     data={mobileData}\n                     dataKey=\"mobile\"\n                     innerRadius={70}\n                     outerRadius={90}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-default.json b/apps/web/public/r/styles/default/chart-radar-default.json
index 46959e3d..6c22e5ea 100644
--- a/apps/web/public/r/styles/default/chart-radar-default.json
+++ b/apps/web/public/r/styles/default/chart-radar-default.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-default",
   "type": "registry:block",
-  "description": "A radar chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-default.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 273 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-dots.json b/apps/web/public/r/styles/default/chart-radar-dots.json
index 2a347def..15c3608e 100644
--- a/apps/web/public/r/styles/default/chart-radar-dots.json
+++ b/apps/web/public/r/styles/default/chart-radar-dots.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-dots",
   "type": "registry:block",
-  "description": "A radar chart with dots",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-dots.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 273 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center\">\n            <CardTitle>Radar Chart - Dots</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center\">\n            <CardTitle>Radar Chart - Dots</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-grid-circle-fill.json b/apps/web/public/r/styles/default/chart-radar-grid-circle-fill.json
index b46d7bdf..25ede014 100644
--- a/apps/web/public/r/styles/default/chart-radar-grid-circle-fill.json
+++ b/apps/web/public/r/styles/default/chart-radar-grid-circle-fill.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-grid-circle-fill",
   "type": "registry:block",
-  "description": "A radar chart with a grid and circle fill",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle-fill.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 285 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 203 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 264 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                  <PolarGrid\n                     className=\"fill-[--color-desktop] opacity-20\"\n                     gridType=\"circle\"\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.5}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-grid-circle-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 285 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 203 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <PolarGrid\n                     className=\"fill-[--color-desktop] opacity-20\"\n                     gridType=\"circle\"\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.5}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-grid-circle-no-lines.json b/apps/web/public/r/styles/default/chart-radar-grid-circle-no-lines.json
index e428fb53..f246aec8 100644
--- a/apps/web/public/r/styles/default/chart-radar-grid-circle-no-lines.json
+++ b/apps/web/public/r/styles/default/chart-radar-grid-circle-no-lines.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-grid-circle-no-lines",
   "type": "registry:block",
-  "description": "A radar chart with a grid and circle fill",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle-no-lines.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 203 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid gridType=\"circle\" radialLines={false} />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-grid-circle-no-lines.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 203 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid gridType=\"circle\" radialLines={false} />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-grid-circle.json b/apps/web/public/r/styles/default/chart-radar-grid-circle.json
index 6925f2bd..e49f9f61 100644
--- a/apps/web/public/r/styles/default/chart-radar-grid-circle.json
+++ b/apps/web/public/r/styles/default/chart-radar-grid-circle.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-grid-circle",
   "type": "registry:block",
-  "description": "A radar chart with a grid and circle",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 273 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid gridType=\"circle\" />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-grid-circle.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid gridType=\"circle\" />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-grid-custom.json b/apps/web/public/r/styles/default/chart-radar-grid-custom.json
index ea3c0029..4d574e72 100644
--- a/apps/web/public/r/styles/default/chart-radar-grid-custom.json
+++ b/apps/web/public/r/styles/default/chart-radar-grid-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-grid-custom",
   "type": "registry:block",
-  "description": "A radar chart with a custom grid",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-custom.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 273 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Custom</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-grid-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Custom</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid\n                     radialLines={false}\n                     polarRadius={[90]}\n                     strokeWidth={1}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-grid-fill.json b/apps/web/public/r/styles/default/chart-radar-grid-fill.json
index 5e544078..999551f5 100644
--- a/apps/web/public/r/styles/default/chart-radar-grid-fill.json
+++ b/apps/web/public/r/styles/default/chart-radar-grid-fill.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-grid-fill",
   "type": "registry:block",
-  "description": "A radar chart with a grid filled",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-fill.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 285 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 203 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 264 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Filled</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.5}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-grid-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 285 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 203 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Filled</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.5}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-grid-none.json b/apps/web/public/r/styles/default/chart-radar-grid-none.json
index ff92dd3e..a2d3733c 100644
--- a/apps/web/public/r/styles/default/chart-radar-grid-none.json
+++ b/apps/web/public/r/styles/default/chart-radar-grid-none.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-grid-none",
   "type": "registry:block",
-  "description": "A radar chart with no grid",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-none.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 273 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid None</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-grid-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid None</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-icons.json b/apps/web/public/r/styles/default/chart-radar-icons.json
index 7722da45..25e79de9 100644
--- a/apps/web/public/r/styles/default/chart-radar-icons.json
+++ b/apps/web/public/r/styles/default/chart-radar-icons.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-icons",
   "type": "registry:block",
-  "description": "A radar chart with icons",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-icons.tsx",
-      "content": "'use client'\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n      icon: ArrowDownFromLine,\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n      icon: ArrowUpFromLine,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Icons</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: -40,\n                     bottom: -10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-icons.tsx",
+      "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n      icon: ArrowDownFromLine,\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n      icon: ArrowUpFromLine,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Icons</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: -40,\n                     bottom: -10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <ChartLegend\n                     className=\"mt-8\"\n                     content={<ChartLegendContent />}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-label-custom.json b/apps/web/public/r/styles/default/chart-radar-label-custom.json
index 8163275b..7f91c12d 100644
--- a/apps/web/public/r/styles/default/chart-radar-label-custom.json
+++ b/apps/web/public/r/styles/default/chart-radar-label-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-label-custom",
   "type": "registry:block",
-  "description": "A radar chart with a custom label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-label-custom.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Custom Label</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: 10,\n                     right: 10,\n                     bottom: 10,\n                     left: 10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis\n                     dataKey=\"month\"\n                     tick={({ x, y, textAnchor, value, index, ...props }) => {\n                        const data = chartData[index]\n\n                        return (\n                           <text\n                              x={x}\n                              y={index === 0 ? y - 10 : y}\n                              textAnchor={textAnchor}\n                              fontSize={13}\n                              fontWeight={500}\n                              {...props}\n                           >\n                              <tspan>{data.desktop}</tspan>\n                              <tspan className=\"fill-muted-foreground\">/</tspan>\n                              <tspan>{data.mobile}</tspan>\n                              <tspan\n                                 x={x}\n                                 dy=\"1rem\"\n                                 fontSize={12}\n                                 className=\"fill-muted-foreground\"\n                              >\n                                 {data.month}\n                              </tspan>\n                           </text>\n                        )\n                     }}\n                  />\n\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Custom Label</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: 10,\n                     right: 10,\n                     bottom: 10,\n                     left: 10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis\n                     dataKey=\"month\"\n                     tick={({ x, y, textAnchor, value, index, ...props }) => {\n                        const data = chartData[index]\n\n                        return (\n                           <text\n                              x={x}\n                              y={index === 0 ? y - 10 : y}\n                              textAnchor={textAnchor}\n                              fontSize={13}\n                              fontWeight={500}\n                              {...props}\n                           >\n                              <tspan>{data.desktop}</tspan>\n                              <tspan className=\"fill-muted-foreground\">/</tspan>\n                              <tspan>{data.mobile}</tspan>\n                              <tspan\n                                 x={x}\n                                 dy={\"1rem\"}\n                                 fontSize={12}\n                                 className=\"fill-muted-foreground\"\n                              >\n                                 {data.month}\n                              </tspan>\n                           </text>\n                        )\n                     }}\n                  />\n\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-legend.json b/apps/web/public/r/styles/default/chart-radar-legend.json
index 8346a61b..872357b8 100644
--- a/apps/web/public/r/styles/default/chart-radar-legend.json
+++ b/apps/web/public/r/styles/default/chart-radar-legend.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-legend",
   "type": "registry:block",
-  "description": "A radar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-legend.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Legend</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: -40,\n                     bottom: -10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Legend</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: -40,\n                     bottom: -10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <ChartLegend\n                     className=\"mt-8\"\n                     content={<ChartLegendContent />}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-lines-only.json b/apps/web/public/r/styles/default/chart-radar-lines-only.json
index ee2d5415..2d3c01db 100644
--- a/apps/web/public/r/styles/default/chart-radar-lines-only.json
+++ b/apps/web/public/r/styles/default/chart-radar-lines-only.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-lines-only",
   "type": "registry:block",
-  "description": "A radar chart with lines only",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-lines-only.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 160 },\n   { month: 'February', desktop: 185, mobile: 170 },\n   { month: 'March', desktop: 207, mobile: 180 },\n   { month: 'April', desktop: 173, mobile: 160 },\n   { month: 'May', desktop: 160, mobile: 190 },\n   { month: 'June', desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Lines Only</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid radialLines={false} />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0}\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                  />\n                  <Radar\n                     dataKey=\"mobile\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0}\n                     stroke=\"var(--color-mobile)\"\n                     strokeWidth={2}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-lines-only.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 160 },\n   { month: \"February\", desktop: 185, mobile: 170 },\n   { month: \"March\", desktop: 207, mobile: 180 },\n   { month: \"April\", desktop: 173, mobile: 160 },\n   { month: \"May\", desktop: 160, mobile: 190 },\n   { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Lines Only</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid radialLines={false} />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0}\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                  />\n                  <Radar\n                     dataKey=\"mobile\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0}\n                     stroke=\"var(--color-mobile)\"\n                     strokeWidth={2}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-multiple.json b/apps/web/public/r/styles/default/chart-radar-multiple.json
index 37205861..db5656ee 100644
--- a/apps/web/public/r/styles/default/chart-radar-multiple.json
+++ b/apps/web/public/r/styles/default/chart-radar-multiple.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-multiple",
   "type": "registry:block",
-  "description": "A radar chart with multiple data",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-multiple.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Multiple</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Multiple</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radar-radius.json b/apps/web/public/r/styles/default/chart-radar-radius.json
index 11f84ba3..b0083d45 100644
--- a/apps/web/public/r/styles/default/chart-radar-radius.json
+++ b/apps/web/public/r/styles/default/chart-radar-radius.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-radius",
   "type": "registry:block",
-  "description": "A radar chart with a radius axis",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-radius.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport {\n   PolarAngleAxis,\n   PolarGrid,\n   PolarRadiusAxis,\n   Radar,\n   RadarChart,\n} from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Radius Axis</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n                     }\n                  />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <PolarRadiusAxis\n                     angle={60}\n                     stroke=\"hsla(var(--foreground))\"\n                     orientation=\"middle\"\n                     axisLine={false}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-radius.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n   PolarAngleAxis,\n   PolarGrid,\n   PolarRadiusAxis,\n   Radar,\n   RadarChart,\n} from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Radius Axis</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           labelKey=\"month\"\n                        />\n                     }\n                  />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <PolarRadiusAxis\n                     angle={60}\n                     stroke=\"hsla(var(--foreground))\"\n                     orientation=\"middle\"\n                     axisLine={false}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radial-grid.json b/apps/web/public/r/styles/default/chart-radial-grid.json
index adb7cadd..6975e885 100644
--- a/apps/web/public/r/styles/default/chart-radial-grid.json
+++ b/apps/web/public/r/styles/default/chart-radial-grid.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radial-grid",
   "type": "registry:block",
-  "description": "A radial chart with a grid",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-grid.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarGrid, RadialBar, RadialBarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Grid</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n                  />\n                  <PolarGrid gridType=\"circle\" />\n                  <RadialBar dataKey=\"visitors\" />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radial-grid.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Grid</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  innerRadius={30}\n                  outerRadius={100}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent hideLabel nameKey=\"browser\" />\n                     }\n                  />\n                  <PolarGrid gridType=\"circle\" />\n                  <RadialBar dataKey=\"visitors\" />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radial-label.json b/apps/web/public/r/styles/default/chart-radial-label.json
index 61749b68..4f0b2883 100644
--- a/apps/web/public/r/styles/default/chart-radial-label.json
+++ b/apps/web/public/r/styles/default/chart-radial-label.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radial-label",
   "type": "registry:block",
-  "description": "A radial chart with a label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-label.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { LabelList, RadialBar, RadialBarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  startAngle={-90}\n                  endAngle={380}\n                  innerRadius={30}\n                  outerRadius={110}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n                  />\n                  <RadialBar dataKey=\"visitors\" background>\n                     <LabelList\n                        position=\"insideStart\"\n                        dataKey=\"browser\"\n                        className=\"fill-white capitalize mix-blend-luminosity\"\n                        fontSize={11}\n                     />\n                  </RadialBar>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radial-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  startAngle={-90}\n                  endAngle={380}\n                  innerRadius={30}\n                  outerRadius={110}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent hideLabel nameKey=\"browser\" />\n                     }\n                  />\n                  <RadialBar dataKey=\"visitors\" background>\n                     <LabelList\n                        position=\"insideStart\"\n                        dataKey=\"browser\"\n                        className=\"fill-white capitalize mix-blend-luminosity\"\n                        fontSize={11}\n                     />\n                  </RadialBar>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radial-shape.json b/apps/web/public/r/styles/default/chart-radial-shape.json
index c76df171..61d006c0 100644
--- a/apps/web/public/r/styles/default/chart-radial-shape.json
+++ b/apps/web/public/r/styles/default/chart-radial-shape.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radial-shape",
   "type": "registry:block",
-  "description": "A radial chart with a custom shape",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-shape.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport {\n   Label,\n   PolarGrid,\n   PolarRadiusAxis,\n   RadialBar,\n   RadialBarChart,\n} from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type { ChartConfig } from '~/registry/default/ui/chart'\nimport { ChartContainer } from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'safari', visitors: 1260, fill: 'var(--color-safari)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Shape</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  endAngle={100}\n                  innerRadius={80}\n                  outerRadius={140}\n               >\n                  <PolarGrid\n                     gridType=\"circle\"\n                     radialLines={false}\n                     stroke=\"none\"\n                     className=\"first:fill-muted last:fill-background\"\n                     polarRadius={[86, 74]}\n                  />\n                  <RadialBar dataKey=\"visitors\" background />\n                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-4xl font-bold\"\n                                    >\n                                       {chartData[0].visitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radial-shape.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n   Label,\n   PolarGrid,\n   PolarRadiusAxis,\n   RadialBar,\n   RadialBarChart,\n} from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport { type ChartConfig, ChartContainer } from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Shape</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  endAngle={100}\n                  innerRadius={80}\n                  outerRadius={140}\n               >\n                  <PolarGrid\n                     gridType=\"circle\"\n                     radialLines={false}\n                     stroke=\"none\"\n                     className=\"first:fill-muted last:fill-background\"\n                     polarRadius={[86, 74]}\n                  />\n                  <RadialBar dataKey=\"visitors\" background />\n                  <PolarRadiusAxis\n                     tick={false}\n                     tickLine={false}\n                     axisLine={false}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-4xl font-bold\"\n                                    >\n                                       {chartData[0].visitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radial-simple.json b/apps/web/public/r/styles/default/chart-radial-simple.json
index 38266815..7c5e10df 100644
--- a/apps/web/public/r/styles/default/chart-radial-simple.json
+++ b/apps/web/public/r/styles/default/chart-radial-simple.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radial-simple",
   "type": "registry:block",
-  "description": "A radial chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-simple.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { RadialBar, RadialBarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n                  />\n                  <RadialBar dataKey=\"visitors\" background />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radial-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  innerRadius={30}\n                  outerRadius={110}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent hideLabel nameKey=\"browser\" />\n                     }\n                  />\n                  <RadialBar dataKey=\"visitors\" background />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radial-stacked.json b/apps/web/public/r/styles/default/chart-radial-stacked.json
index c53cd952..baf8e5b7 100644
--- a/apps/web/public/r/styles/default/chart-radial-stacked.json
+++ b/apps/web/public/r/styles/default/chart-radial-stacked.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radial-stacked",
   "type": "registry:block",
-  "description": "A radial chart with stacked sections",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-stacked.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [{ month: 'january', desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Stacked</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex flex-1 items-center pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square w-full max-w-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  endAngle={180}\n                  innerRadius={80}\n                  outerRadius={130}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                              return (\n                                 <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) - 16}\n                                       className=\"fill-foreground text-2xl font-bold\"\n                                    >\n                                       {totalVisitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 4}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n                  <RadialBar\n                     dataKey=\"desktop\"\n                     stackId=\"a\"\n                     cornerRadius={5}\n                     fill=\"var(--color-desktop)\"\n                     className=\"stroke-transparent stroke-2\"\n                  />\n                  <RadialBar\n                     dataKey=\"mobile\"\n                     fill=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                     cornerRadius={5}\n                     className=\"stroke-transparent stroke-2\"\n                  />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radial-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Stacked</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex flex-1 items-center pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square w-full max-w-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  endAngle={180}\n                  innerRadius={80}\n                  outerRadius={130}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarRadiusAxis\n                     tick={false}\n                     tickLine={false}\n                     axisLine={false}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) - 16}\n                                       className=\"fill-foreground text-2xl font-bold\"\n                                    >\n                                       {totalVisitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 4}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n                  <RadialBar\n                     dataKey=\"desktop\"\n                     stackId=\"a\"\n                     cornerRadius={5}\n                     fill=\"var(--color-desktop)\"\n                     className=\"stroke-transparent stroke-2\"\n                  />\n                  <RadialBar\n                     dataKey=\"mobile\"\n                     fill=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                     cornerRadius={5}\n                     className=\"stroke-transparent stroke-2\"\n                  />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-radial-text.json b/apps/web/public/r/styles/default/chart-radial-text.json
index d177de22..e43b503f 100644
--- a/apps/web/public/r/styles/default/chart-radial-text.json
+++ b/apps/web/public/r/styles/default/chart-radial-text.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radial-text",
   "type": "registry:block",
-  "description": "A radial chart with text",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-text.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport {\n   Label,\n   PolarGrid,\n   PolarRadiusAxis,\n   RadialBar,\n   RadialBarChart,\n} from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type { ChartConfig } from '~/registry/default/ui/chart'\nimport { ChartContainer } from '~/registry/default/ui/chart'\nconst chartData = [\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Text</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  startAngle={0}\n                  endAngle={250}\n                  innerRadius={80}\n                  outerRadius={110}\n               >\n                  <PolarGrid\n                     gridType=\"circle\"\n                     radialLines={false}\n                     stroke=\"none\"\n                     className=\"first:fill-muted last:fill-background\"\n                     polarRadius={[86, 74]}\n                  />\n                  <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-4xl font-bold\"\n                                    >\n                                       {chartData[0].visitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radial-text.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n   Label,\n   PolarGrid,\n   PolarRadiusAxis,\n   RadialBar,\n   RadialBarChart,\n} from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport { type ChartConfig, ChartContainer } from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Text</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  startAngle={0}\n                  endAngle={250}\n                  innerRadius={80}\n                  outerRadius={110}\n               >\n                  <PolarGrid\n                     gridType=\"circle\"\n                     radialLines={false}\n                     stroke=\"none\"\n                     className=\"first:fill-muted last:fill-background\"\n                     polarRadius={[86, 74]}\n                  />\n                  <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n                  <PolarRadiusAxis\n                     tick={false}\n                     tickLine={false}\n                     axisLine={false}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-4xl font-bold\"\n                                    >\n                                       {chartData[0].visitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-tooltip-advanced.json b/apps/web/public/r/styles/default/chart-tooltip-advanced.json
index e38a7c09..189327be 100644
--- a/apps/web/public/r/styles/default/chart-tooltip-advanced.json
+++ b/apps/web/public/r/styles/default/chart-tooltip-advanced.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-advanced",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-advanced.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Advanced</CardTitle>\n            <CardDescription>\n               Tooltip with custom formatter and total.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={(\n                        <ChartTooltipContent\n                           hideLabel\n                           className=\"w-[180px]\"\n                           formatter={(value, name, item, index) => (\n                              <>\n                                 <div\n                                    className=\"size-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n                                    style={\n                                       {\n                                          '--color-bg': `var(--color-${name})`,\n                                       } as React.CSSProperties\n                                    }\n                                 />\n                                 {chartConfig[name as keyof typeof chartConfig]?.label\n                                 || name}\n                                 <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                                    {value}\n                                    <span className=\"text-muted-foreground font-normal\">\n                                       kcal\n                                    </span>\n                                 </div>\n                                 {/* Add this after the last item */}\n                                 {index === 1 && (\n                                    <div className=\"text-foreground mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium\">\n                                       Total\n                                       <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                                          {item.payload.running + item.payload.swimming}\n                                          <span className=\"text-muted-foreground font-normal\">\n                                             kcal\n                                          </span>\n                                       </div>\n                                    </div>\n                                 )}\n                              </>\n                           )}\n                        />\n                     )}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-advanced.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Advanced</CardTitle>\n            <CardDescription>\n               Tooltip with custom formatter and total.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           hideLabel\n                           className=\"w-[180px]\"\n                           formatter={(value, name, item, index) => (\n                              <>\n                                 <div\n                                    className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n                                    style={\n                                       {\n                                          \"--color-bg\": `var(--color-${name})`,\n                                       } as React.CSSProperties\n                                    }\n                                 />\n                                 {chartConfig[name as keyof typeof chartConfig]\n                                    ?.label || name}\n                                 <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                                    {value}\n                                    <span className=\"font-normal text-muted-foreground\">\n                                       kcal\n                                    </span>\n                                 </div>\n                                 {/* Add this after the last item */}\n                                 {index === 1 && (\n                                    <div className=\"mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground\">\n                                       Total\n                                       <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                                          {item.payload.running +\n                                             item.payload.swimming}\n                                          <span className=\"font-normal text-muted-foreground\">\n                                             kcal\n                                          </span>\n                                       </div>\n                                    </div>\n                                 )}\n                              </>\n                           )}\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-tooltip-default.json b/apps/web/public/r/styles/default/chart-tooltip-default.json
index d157d57b..51041542 100644
--- a/apps/web/public/r/styles/default/chart-tooltip-default.json
+++ b/apps/web/public/r/styles/default/chart-tooltip-default.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-default",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-default.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Default</CardTitle>\n            <CardDescription>\n               Default tooltip with ChartTooltipContent.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-default.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Default</CardTitle>\n            <CardDescription>\n               Default tooltip with ChartTooltipContent.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-tooltip-formatter.json b/apps/web/public/r/styles/default/chart-tooltip-formatter.json
index cb723e1e..e75fb0ea 100644
--- a/apps/web/public/r/styles/default/chart-tooltip-formatter.json
+++ b/apps/web/public/r/styles/default/chart-tooltip-formatter.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-formatter",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-formatter.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Formatter</CardTitle>\n            <CardDescription>Tooltip with custom formatter .</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={(\n                        <ChartTooltipContent\n                           hideLabel\n                           formatter={(value, name) => (\n                              <div className=\"text-muted-foreground flex min-w-[130px] items-center text-xs\">\n                                 {chartConfig[name as keyof typeof chartConfig]?.label\n                                 || name}\n                                 <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                                    {value}\n                                    <span className=\"text-muted-foreground font-normal\">\n                                       kcal\n                                    </span>\n                                 </div>\n                              </div>\n                           )}\n                        />\n                     )}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Formatter</CardTitle>\n            <CardDescription>Tooltip with custom formatter .</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           hideLabel\n                           formatter={(value, name) => (\n                              <div className=\"flex min-w-[130px] items-center text-xs text-muted-foreground\">\n                                 {chartConfig[name as keyof typeof chartConfig]\n                                    ?.label || name}\n                                 <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                                    {value}\n                                    <span className=\"font-normal text-muted-foreground\">\n                                       kcal\n                                    </span>\n                                 </div>\n                              </div>\n                           )}\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-tooltip-icons.json b/apps/web/public/r/styles/default/chart-tooltip-icons.json
index 0c9d982c..660842e6 100644
--- a/apps/web/public/r/styles/default/chart-tooltip-icons.json
+++ b/apps/web/public/r/styles/default/chart-tooltip-icons.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-icons",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-icons.tsx",
-      "content": "'use client'\n\nimport { Footprints, Waves } from 'lucide-react'\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n      icon: Footprints,\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n      icon: Waves,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Icons</CardTitle>\n            <CardDescription>Tooltip with icons.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideLabel />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-icons.tsx",
+      "content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n      icon: Footprints,\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n      icon: Waves,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Icons</CardTitle>\n            <CardDescription>Tooltip with icons.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideLabel />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-tooltip-indicator-line.json b/apps/web/public/r/styles/default/chart-tooltip-indicator-line.json
index 16f17e35..568d8d63 100644
--- a/apps/web/public/r/styles/default/chart-tooltip-indicator-line.json
+++ b/apps/web/public/r/styles/default/chart-tooltip-indicator-line.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-indicator-line",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-indicator-line.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Line Indicator</CardTitle>\n            <CardDescription>Tooltip with line indicator.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-indicator-line.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Line Indicator</CardTitle>\n            <CardDescription>Tooltip with line indicator.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-tooltip-indicator-none.json b/apps/web/public/r/styles/default/chart-tooltip-indicator-none.json
index 27b1f647..aab7feff 100644
--- a/apps/web/public/r/styles/default/chart-tooltip-indicator-none.json
+++ b/apps/web/public/r/styles/default/chart-tooltip-indicator-none.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-indicator-none",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-indicator-none.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - No Indicator</CardTitle>\n            <CardDescription>Tooltip with no indicator.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideIndicator />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-indicator-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - No Indicator</CardTitle>\n            <CardDescription>Tooltip with no indicator.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideIndicator />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-tooltip-label-custom.json b/apps/web/public/r/styles/default/chart-tooltip-label-custom.json
index 712a25a8..23bf1915 100644
--- a/apps/web/public/r/styles/default/chart-tooltip-label-custom.json
+++ b/apps/web/public/r/styles/default/chart-tooltip-label-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-label-custom",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-custom.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   activities: {\n      label: 'Activities',\n   },\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Custom label</CardTitle>\n            <CardDescription>\n               Tooltip with custom label from chartConfig.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent labelKey=\"activities\" indicator=\"line\" />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   activities: {\n      label: \"Activities\",\n   },\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Custom label</CardTitle>\n            <CardDescription>\n               Tooltip with custom label from chartConfig.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           labelKey=\"activities\"\n                           indicator=\"line\"\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-tooltip-label-formatter.json b/apps/web/public/r/styles/default/chart-tooltip-label-formatter.json
index 609e6241..06ab89ab 100644
--- a/apps/web/public/r/styles/default/chart-tooltip-label-formatter.json
+++ b/apps/web/public/r/styles/default/chart-tooltip-label-formatter.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-label-formatter",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-formatter.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Label Formatter</CardTitle>\n            <CardDescription>Tooltip with label formatter.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={(\n                        <ChartTooltipContent\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString('en-US', {\n                                 day: 'numeric',\n                                 month: 'long',\n                                 year: 'numeric',\n                              })\n                           }}\n                        />\n                     )}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-label-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Label Formatter</CardTitle>\n            <CardDescription>Tooltip with label formatter.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    day: \"numeric\",\n                                    month: \"long\",\n                                    year: \"numeric\",\n                                 },\n                              )\n                           }}\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart-tooltip-label-none.json b/apps/web/public/r/styles/default/chart-tooltip-label-none.json
index eb04078e..73644f18 100644
--- a/apps/web/public/r/styles/default/chart-tooltip-label-none.json
+++ b/apps/web/public/r/styles/default/chart-tooltip-label-none.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-label-none",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-none.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/default/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/default/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - No Label</CardTitle>\n            <CardDescription>Tooltip with no label.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideIndicator hideLabel />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-label-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/default/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - No Label</CardTitle>\n            <CardDescription>Tooltip with no label.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideIndicator hideLabel />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/chart.json b/apps/web/public/r/styles/default/chart.json
index fd8535c9..6d7414bc 100644
--- a/apps/web/public/r/styles/default/chart.json
+++ b/apps/web/public/r/styles/default/chart.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "recharts",
     "lucide-react"
@@ -11,8 +13,8 @@
   "files": [
     {
       "path": "ui/chart.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as RechartsPrimitive from 'recharts'\n\nimport { ny } from '~/lib/utils'\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: '', dark: '.dark' } as const\n\nexport type ChartConfig = {\n   [k in string]: {\n      label?: React.ReactNode\n      icon?: React.ComponentType\n   } & (\n      | { color?: string, theme?: never }\n      | { color?: never, theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ninterface ChartContextProps {\n   config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n   const context = React.useContext(ChartContext)\n\n   if (!context) {\n      throw new Error('useChart must be used within a <ChartContainer />')\n   }\n\n   return context\n}\n\nconst ChartContainer = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'> & {\n      config: ChartConfig\n      children: React.ComponentProps<\n      typeof RechartsPrimitive.ResponsiveContainer\n      >['children']\n   }\n>(({ id, className, children, config, ...props }, ref) => {\n   const uniqueId = React.useId()\n   const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`\n\n   return (\n      <ChartContext.Provider value={{ config }}>\n         <div\n            data-chart={chartId}\n            ref={ref}\n            className={ny(\n               '[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke=\\'#ccc\\']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke=\\'#fff\\']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke=\\'#fff\\']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none',\n               className,\n            )}\n            {...props}\n         >\n            <ChartStyle id={chartId} config={config} />\n            <RechartsPrimitive.ResponsiveContainer>\n               {children}\n            </RechartsPrimitive.ResponsiveContainer>\n         </div>\n      </ChartContext.Provider>\n   )\n})\nChartContainer.displayName = 'Chart'\n\nfunction ChartStyle({ id, config }: { id: string, config: ChartConfig }) {\n   const colorConfig = Object.entries(config).filter(\n      ([_, config]) => config.theme || config.color,\n   )\n\n   if (!colorConfig.length) {\n      return null\n   }\n\n   return (\n      <style\n         dangerouslySetInnerHTML={{\n            __html: Object.entries(THEMES).map(\n               ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color\n      = itemConfig.theme?.[theme as keyof typeof itemConfig.theme]\n      || itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join('\\n')}\n}\n`,\n            ),\n         }}\n      />\n   )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n   React.ComponentProps<'div'> & {\n      hideLabel?: boolean\n      hideIndicator?: boolean\n      indicator?: 'line' | 'dot' | 'dashed'\n      nameKey?: string\n      labelKey?: string\n   }\n>(\n   (\n      {\n         active,\n         payload,\n         className,\n         indicator = 'dot',\n         hideLabel = false,\n         hideIndicator = false,\n         label,\n         labelFormatter,\n         labelClassName,\n         formatter,\n         color,\n         nameKey,\n         labelKey,\n      },\n      ref,\n   ) => {\n      const { config } = useChart()\n\n      const tooltipLabel = React.useMemo(() => {\n         if (hideLabel || !payload?.length) {\n            return null\n         }\n\n         const [item] = payload\n         const key = `${labelKey || item?.dataKey || item?.name || 'value'}`\n         const itemConfig = getPayloadConfigFromPayload(config, item, key)\n         const value\n        = !labelKey && typeof label === 'string'\n           ? config[label as keyof typeof config]?.label || label\n           : itemConfig?.label\n\n         if (labelFormatter) {\n            return (\n               <div className={ny('font-medium', labelClassName)}>\n                  {labelFormatter(value, payload)}\n               </div>\n            )\n         }\n\n         if (!value) {\n            return null\n         }\n\n         return <div className={ny('font-medium', labelClassName)}>{value}</div>\n      }, [\n         label,\n         labelFormatter,\n         payload,\n         hideLabel,\n         labelClassName,\n         config,\n         labelKey,\n      ])\n\n      if (!active || !payload?.length) {\n         return null\n      }\n\n      const nestLabel = payload.length === 1 && indicator !== 'dot'\n\n      return (\n         <div\n            ref={ref}\n            className={ny(\n               'border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',\n               className,\n            )}\n         >\n            {!nestLabel ? tooltipLabel : null}\n            <div className=\"grid gap-1.5\">\n               {payload.map((item, index) => {\n                  const key = `${nameKey || item.name || item.dataKey || 'value'}`\n                  const itemConfig = getPayloadConfigFromPayload(config, item, key)\n                  const indicatorColor = color || item.payload.fill || item.color\n\n                  return (\n                     <div\n                        key={item.dataKey}\n                        className={ny(\n                           '[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5',\n                           indicator === 'dot' && 'items-center',\n                        )}\n                     >\n                        {formatter && item.value && item.name\n                           ? (\n                                 formatter(item.value, item.name, item, index, item.payload)\n                              )\n                           : (\n                                 <>\n                                    {itemConfig?.icon\n                                       ? (\n                                             <itemConfig.icon />\n                                          )\n                                       : (\n                                             !hideIndicator && (\n                                                <div\n                                                   className={ny(\n                                                      'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',\n                                                      {\n                                                         'h-2.5 w-2.5': indicator === 'dot',\n                                                         'w-1': indicator === 'line',\n                                                         'w-0 border-[1.5px] border-dashed bg-transparent':\n                                indicator === 'dashed',\n                                                         'my-0.5': nestLabel && indicator === 'dashed',\n                                                      },\n                                                   )}\n                                                   style={\n                                                      {\n                                                         '--color-bg': indicatorColor,\n                                                         '--color-border': indicatorColor,\n                                                      } as React.CSSProperties\n                                                   }\n                                                />\n                                             )\n                                          )}\n                                    <div\n                                       className={ny(\n                                          'flex flex-1 justify-between leading-none',\n                                          nestLabel ? 'items-end' : 'items-center',\n                                       )}\n                                    >\n                                       <div className=\"grid gap-1.5\">\n                                          {nestLabel ? tooltipLabel : null}\n                                          <span className=\"text-muted-foreground\">\n                                             {itemConfig?.label || item.name}\n                                          </span>\n                                       </div>\n                                       {item.value !== undefined && (\n                                          <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                                             {item.value.toLocaleString()}\n                                          </span>\n                                       )}\n                                    </div>\n                                 </>\n                              )}\n                     </div>\n                  )\n               })}\n            </div>\n         </div>\n      )\n   },\n)\nChartTooltipContent.displayName = 'ChartTooltip'\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'> &\n   Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {\n      hideIcon?: boolean\n      nameKey?: string\n   }\n>(\n   (\n      { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },\n      ref,\n   ) => {\n      const { config } = useChart()\n\n      if (!payload?.length) {\n         return null\n      }\n\n      return (\n         <div\n            ref={ref}\n            className={ny(\n               'flex items-center justify-center gap-4',\n               verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n               className,\n            )}\n         >\n            {payload.map((item) => {\n               const key = `${nameKey || item.dataKey || 'value'}`\n               const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n               return (\n                  <div\n                     key={item.value}\n                     className={ny(\n                        '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3',\n                     )}\n                  >\n                     {itemConfig?.icon && !hideIcon\n                        ? (\n                              <itemConfig.icon />\n                           )\n                        : (\n                              <div\n                                 className=\"size-2 shrink-0 rounded-[2px]\"\n                                 style={{\n                                    backgroundColor: item.color,\n                                 }}\n                              />\n                           )}\n                     {itemConfig?.label}\n                  </div>\n               )\n            })}\n         </div>\n      )\n   },\n)\nChartLegendContent.displayName = 'ChartLegend'\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n   config: ChartConfig,\n   payload: unknown,\n   key: string,\n) {\n   if (typeof payload !== 'object' || payload === null) {\n      return undefined\n   }\n\n   const payloadPayload\n    = 'payload' in payload\n    && typeof payload.payload === 'object'\n    && payload.payload !== null\n       ? payload.payload\n       : undefined\n\n   let configLabelKey: string = key\n\n   if (\n      key in payload\n      && typeof payload[key as keyof typeof payload] === 'string'\n   ) {\n      configLabelKey = payload[key as keyof typeof payload] as string\n   }\n   else if (\n      payloadPayload\n      && key in payloadPayload\n      && typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'\n   ) {\n      configLabelKey = payloadPayload[\n         key as keyof typeof payloadPayload\n      ] as string\n   }\n\n   return configLabelKey in config\n      ? config[configLabelKey]\n      : config[key as keyof typeof config]\n}\n\nexport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n   ChartLegend,\n   ChartLegendContent,\n   ChartStyle,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { ny } from \"~/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n   [k in string]: {\n      label?: React.ReactNode\n      icon?: React.ComponentType\n   } & (\n      | { color?: string; theme?: never }\n      | { color?: never; theme: Record<keyof typeof THEMES, string> }\n   )\n}\n\ninterface ChartContextProps {\n   config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n   const context = React.useContext(ChartContext)\n\n   if (!context) {\n      throw new Error(\"useChart must be used within a <ChartContainer />\")\n   }\n\n   return context\n}\n\nconst ChartContainer = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      config: ChartConfig\n      children: React.ComponentProps<\n         typeof RechartsPrimitive.ResponsiveContainer\n      >[\"children\"]\n   }\n>(({ id, className, children, config, ...props }, ref) => {\n   const uniqueId = React.useId()\n   const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n   return (\n      <ChartContext.Provider value={{ config }}>\n         <div\n            data-chart={chartId}\n            ref={ref}\n            className={ny(\n               \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n               className,\n            )}\n            {...props}\n         >\n            <ChartStyle id={chartId} config={config} />\n            <RechartsPrimitive.ResponsiveContainer>\n               {children}\n            </RechartsPrimitive.ResponsiveContainer>\n         </div>\n      </ChartContext.Provider>\n   )\n})\nChartContainer.displayName = \"Chart\"\n\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n   const colorConfig = Object.entries(config).filter(\n      ([_, config]) => config.theme || config.color,\n   )\n\n   if (!colorConfig.length) {\n      return null\n   }\n\n   return (\n      <style\n         dangerouslySetInnerHTML={{\n            __html: Object.entries(THEMES).map(\n               ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n   .map(([key, itemConfig]) => {\n      const color =\n         itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n         itemConfig.color\n      return color ? `  --color-${key}: ${color};` : null\n   })\n   .join(\"\\n\")}\n}\n`,\n            ),\n         }}\n      />\n   )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n      React.ComponentProps<\"div\"> & {\n         hideLabel?: boolean\n         hideIndicator?: boolean\n         indicator?: \"line\" | \"dot\" | \"dashed\"\n         nameKey?: string\n         labelKey?: string\n      }\n>(\n   (\n      {\n         active,\n         payload,\n         className,\n         indicator = \"dot\",\n         hideLabel = false,\n         hideIndicator = false,\n         label,\n         labelFormatter,\n         labelClassName,\n         formatter,\n         color,\n         nameKey,\n         labelKey,\n      },\n      ref,\n   ) => {\n      const { config } = useChart()\n\n      const tooltipLabel = React.useMemo(() => {\n         if (hideLabel || !payload?.length) {\n            return null\n         }\n\n         const [item] = payload\n         const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n         const itemConfig = getPayloadConfigFromPayload(config, item, key)\n         const value =\n            !labelKey && typeof label === \"string\"\n               ? config[label as keyof typeof config]?.label || label\n               : itemConfig?.label\n\n         if (labelFormatter) {\n            return (\n               <div className={ny(\"font-medium\", labelClassName)}>\n                  {labelFormatter(value, payload)}\n               </div>\n            )\n         }\n\n         if (!value) {\n            return null\n         }\n\n         return <div className={ny(\"font-medium\", labelClassName)}>{value}</div>\n      }, [\n         label,\n         labelFormatter,\n         payload,\n         hideLabel,\n         labelClassName,\n         config,\n         labelKey,\n      ])\n\n      if (!active || !payload?.length) {\n         return null\n      }\n\n      const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n      return (\n         <div\n            ref={ref}\n            className={ny(\n               \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n               className,\n            )}\n         >\n            {!nestLabel ? tooltipLabel : null}\n            <div className=\"grid gap-1.5\">\n               {payload.map((item, index) => {\n                  const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n                  const itemConfig = getPayloadConfigFromPayload(\n                     config,\n                     item,\n                     key,\n                  )\n                  const indicatorColor =\n                     color || item.payload.fill || item.color\n\n                  return (\n                     <div\n                        key={item.dataKey}\n                        className={ny(\n                           \"[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5\",\n                           indicator === \"dot\" && \"items-center\",\n                        )}\n                     >\n                        {formatter && item.value && item.name ? (\n                           formatter(\n                              item.value,\n                              item.name,\n                              item,\n                              index,\n                              item.payload,\n                           )\n                        ) : (\n                           <>\n                              {itemConfig?.icon ? (\n                                 <itemConfig.icon />\n                              ) : (\n                                 !hideIndicator && (\n                                    <div\n                                       className={ny(\n                                          \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                                          {\n                                             \"h-2.5 w-2.5\": indicator === \"dot\",\n                                             \"w-1\": indicator === \"line\",\n                                             \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                                indicator === \"dashed\",\n                                             \"my-0.5\":\n                                                nestLabel &&\n                                                indicator === \"dashed\",\n                                          },\n                                       )}\n                                       style={\n                                          {\n                                             \"--color-bg\": indicatorColor,\n                                             \"--color-border\": indicatorColor,\n                                          } as React.CSSProperties\n                                       }\n                                    />\n                                 )\n                              )}\n                              <div\n                                 className={ny(\n                                    \"flex flex-1 justify-between leading-none\",\n                                    nestLabel ? \"items-end\" : \"items-center\",\n                                 )}\n                              >\n                                 <div className=\"grid gap-1.5\">\n                                    {nestLabel ? tooltipLabel : null}\n                                    <span className=\"text-muted-foreground\">\n                                       {itemConfig?.label || item.name}\n                                    </span>\n                                 </div>\n                                 {item.value !== undefined && (\n                                    <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                                       {item.value.toLocaleString()}\n                                    </span>\n                                 )}\n                              </div>\n                           </>\n                        )}\n                     </div>\n                  )\n               })}\n            </div>\n         </div>\n      )\n   },\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> &\n      Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n         hideIcon?: boolean\n         nameKey?: string\n      }\n>(\n   (\n      {\n         className,\n         hideIcon = false,\n         payload,\n         verticalAlign = \"bottom\",\n         nameKey,\n      },\n      ref,\n   ) => {\n      const { config } = useChart()\n\n      if (!payload?.length) {\n         return null\n      }\n\n      return (\n         <div\n            ref={ref}\n            className={ny(\n               \"flex items-center justify-center gap-4\",\n               verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n               className,\n            )}\n         >\n            {payload.map((item) => {\n               const key = `${nameKey || item.dataKey || \"value\"}`\n               const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n               return (\n                  <div\n                     key={item.value}\n                     className={ny(\n                        \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3\",\n                     )}\n                  >\n                     {itemConfig?.icon && !hideIcon ? (\n                        <itemConfig.icon />\n                     ) : (\n                        <div\n                           className=\"size-2 shrink-0 rounded-[2px]\"\n                           style={{\n                              backgroundColor: item.color,\n                           }}\n                        />\n                     )}\n                     {itemConfig?.label}\n                  </div>\n               )\n            })}\n         </div>\n      )\n   },\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n   config: ChartConfig,\n   payload: unknown,\n   key: string,\n) {\n   if (typeof payload !== \"object\" || payload === null) {\n      return undefined\n   }\n\n   const payloadPayload =\n      \"payload\" in payload &&\n      typeof payload.payload === \"object\" &&\n      payload.payload !== null\n         ? payload.payload\n         : undefined\n\n   let configLabelKey: string = key\n\n   if (\n      key in payload &&\n      typeof payload[key as keyof typeof payload] === \"string\"\n   ) {\n      configLabelKey = payload[key as keyof typeof payload] as string\n   } else if (\n      payloadPayload &&\n      key in payloadPayload &&\n      typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n   ) {\n      configLabelKey = payloadPayload[\n         key as keyof typeof payloadPayload\n      ] as string\n   }\n\n   return configLabelKey in config\n      ? config[configLabelKey]\n      : config[key as keyof typeof config]\n}\n\nexport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n   ChartLegend,\n   ChartLegendContent,\n   ChartStyle,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/checkbox-demo.json b/apps/web/public/r/styles/default/checkbox-demo.json
index 15124ee9..872584f0 100644
--- a/apps/web/public/r/styles/default/checkbox-demo.json
+++ b/apps/web/public/r/styles/default/checkbox-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "checkbox-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "checkbox"
   ],
   "files": [
     {
-      "path": "example/checkbox-demo.tsx",
-      "content": "'use client'\n\nimport { Checkbox } from '~/registry/default/ui/checkbox'\n\nexport default function CheckboxDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms\" />\n         <label\n            htmlFor=\"terms\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"~/registry/default/ui/checkbox\"\n\nexport default function CheckboxDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms\" />\n         <label\n            htmlFor=\"terms\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/checkbox-disabled.json b/apps/web/public/r/styles/default/checkbox-disabled.json
index 12aa488d..b017f8ab 100644
--- a/apps/web/public/r/styles/default/checkbox-disabled.json
+++ b/apps/web/public/r/styles/default/checkbox-disabled.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "checkbox-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "checkbox"
   ],
   "files": [
     {
-      "path": "example/checkbox-disabled.tsx",
-      "content": "import { Checkbox } from '~/registry/default/ui/checkbox'\n\nexport default function CheckboxDisabled() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms2\" disabled />\n         <label\n            htmlFor=\"terms2\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/checkbox-disabled.tsx",
+      "content": "import { Checkbox } from \"~/registry/default/ui/checkbox\"\n\nexport default function CheckboxDisabled() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms2\" disabled />\n         <label\n            htmlFor=\"terms2\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/checkbox-form-multiple.json b/apps/web/public/r/styles/default/checkbox-form-multiple.json
index 546751ca..2c797e15 100644
--- a/apps/web/public/r/styles/default/checkbox-form-multiple.json
+++ b/apps/web/public/r/styles/default/checkbox-form-multiple.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "checkbox-form-multiple",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "checkbox",
     "form"
   ],
   "files": [
     {
-      "path": "example/checkbox-form-multiple.tsx",
-      "content": "'use client'\n\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\n\nimport { Button } from '~/registry/default/ui/button'\nimport { Checkbox } from '~/registry/default/ui/checkbox'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst items = [\n   {\n      id: 'recents',\n      label: 'Recents',\n   },\n   {\n      id: 'home',\n      label: 'Home',\n   },\n   {\n      id: 'applications',\n      label: 'Applications',\n   },\n   {\n      id: 'desktop',\n      label: 'Desktop',\n   },\n   {\n      id: 'downloads',\n      label: 'Downloads',\n   },\n   {\n      id: 'documents',\n      label: 'Documents',\n   },\n] as const\n\nconst FormSchema = z.object({\n   items: z.array(z.string()).refine(value => value.some(item => item), {\n      message: 'You have to select at least one item.',\n   }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         items: ['recents', 'home'],\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"items\"\n               render={() => (\n                  <FormItem>\n                     <div className=\"mb-4\">\n                        <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                        <FormDescription>\n                           Select the items you want to display in the sidebar.\n                        </FormDescription>\n                     </div>\n                     {items.map(item => (\n                        <FormField\n                           key={item.id}\n                           control={form.control}\n                           name=\"items\"\n                           render={({ field }) => {\n                              return (\n                                 <FormItem\n                                    key={item.id}\n                                    className=\"flex flex-row items-start space-x-3 space-y-0\"\n                                 >\n                                    <FormControl>\n                                       <Checkbox\n                                          checked={field.value?.includes(item.id)}\n                                          onCheckedChange={(checked) => {\n                                             return checked\n                                                ? field.onChange([...field.value, item.id])\n                                                : field.onChange(\n                                                   field.value?.filter(\n                                                      value => value !== item.id,\n                                                   ),\n                                                )\n                                          }}\n                                       />\n                                    </FormControl>\n                                    <FormLabel className=\"font-normal\">\n                                       {item.label}\n                                    </FormLabel>\n                                 </FormItem>\n                              )\n                           }}\n                        />\n                     ))}\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/checkbox-form-multiple.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Checkbox } from \"~/registry/default/ui/checkbox\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst items = [\n   {\n      id: \"recents\",\n      label: \"Recents\",\n   },\n   {\n      id: \"home\",\n      label: \"Home\",\n   },\n   {\n      id: \"applications\",\n      label: \"Applications\",\n   },\n   {\n      id: \"desktop\",\n      label: \"Desktop\",\n   },\n   {\n      id: \"downloads\",\n      label: \"Downloads\",\n   },\n   {\n      id: \"documents\",\n      label: \"Documents\",\n   },\n] as const\n\nconst FormSchema = z.object({\n   items: z.array(z.string()).refine((value) => value.some((item) => item), {\n      message: \"You have to select at least one item.\",\n   }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         items: [\"recents\", \"home\"],\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"items\"\n               render={() => (\n                  <FormItem>\n                     <div className=\"mb-4\">\n                        <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                        <FormDescription>\n                           Select the items you want to display in the sidebar.\n                        </FormDescription>\n                     </div>\n                     {items.map((item) => (\n                        <FormField\n                           key={item.id}\n                           control={form.control}\n                           name=\"items\"\n                           render={({ field }) => {\n                              return (\n                                 <FormItem\n                                    key={item.id}\n                                    className=\"flex flex-row items-start space-x-3 space-y-0\"\n                                 >\n                                    <FormControl>\n                                       <Checkbox\n                                          checked={field.value?.includes(\n                                             item.id,\n                                          )}\n                                          onCheckedChange={(checked) => {\n                                             return checked\n                                                ? field.onChange([\n                                                     ...field.value,\n                                                     item.id,\n                                                  ])\n                                                : field.onChange(\n                                                     field.value?.filter(\n                                                        (value) =>\n                                                           value !== item.id,\n                                                     ),\n                                                  )\n                                          }}\n                                       />\n                                    </FormControl>\n                                    <FormLabel className=\"font-normal\">\n                                       {item.label}\n                                    </FormLabel>\n                                 </FormItem>\n                              )\n                           }}\n                        />\n                     ))}\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/checkbox-form-single.json b/apps/web/public/r/styles/default/checkbox-form-single.json
index cbed336a..b3cd57a0 100644
--- a/apps/web/public/r/styles/default/checkbox-form-single.json
+++ b/apps/web/public/r/styles/default/checkbox-form-single.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "checkbox-form-single",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "checkbox",
     "form"
   ],
   "files": [
     {
-      "path": "example/checkbox-form-single.tsx",
-      "content": "'use client'\n\nimport Link from 'next/link'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\n\nimport { Button } from '~/registry/default/ui/button'\nimport { Checkbox } from '~/registry/default/ui/checkbox'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n} from '~/registry/default/ui/form'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst FormSchema = z.object({\n   mobile: z.boolean().default(false).optional(),\n})\n\nexport default function CheckboxReactHookFormSingle() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         mobile: true,\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"mobile\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4\">\n                     <FormControl>\n                        <Checkbox\n                           checked={field.value}\n                           onCheckedChange={field.onChange}\n                        />\n                     </FormControl>\n                     <div className=\"space-y-1 leading-none\">\n                        <FormLabel>\n                           Use different settings for my mobile devices\n                        </FormLabel>\n                        <FormDescription>\n                           You can manage your mobile notifications in the\n                           {' '}\n                           <Link href=\"/examples/forms\">mobile settings</Link>\n                           {' '}\n                           page.\n                        </FormDescription>\n                     </div>\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/checkbox-form-single.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport Link from \"next/link\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Checkbox } from \"~/registry/default/ui/checkbox\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n} from \"~/registry/default/ui/form\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst FormSchema = z.object({\n   mobile: z.boolean().default(false).optional(),\n})\n\nexport default function CheckboxReactHookFormSingle() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         mobile: true,\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"mobile\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4\">\n                     <FormControl>\n                        <Checkbox\n                           checked={field.value}\n                           onCheckedChange={field.onChange}\n                        />\n                     </FormControl>\n                     <div className=\"space-y-1 leading-none\">\n                        <FormLabel>\n                           Use different settings for my mobile devices\n                        </FormLabel>\n                        <FormDescription>\n                           You can manage your mobile notifications in the{\" \"}\n                           <Link href=\"/examples/forms\">mobile settings</Link>{\" \"}\n                           page.\n                        </FormDescription>\n                     </div>\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/checkbox-with-text.json b/apps/web/public/r/styles/default/checkbox-with-text.json
index 04b0ae45..c5552e46 100644
--- a/apps/web/public/r/styles/default/checkbox-with-text.json
+++ b/apps/web/public/r/styles/default/checkbox-with-text.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "checkbox-with-text",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "checkbox"
   ],
   "files": [
     {
-      "path": "example/checkbox-with-text.tsx",
-      "content": "'use client'\n\nimport { Checkbox } from '~/registry/default/ui/checkbox'\n\nexport default function CheckboxWithText() {\n   return (\n      <div className=\"items-top flex space-x-2\">\n         <Checkbox id=\"terms1\" />\n         <div className=\"grid gap-1.5 leading-none\">\n            <label\n               htmlFor=\"terms1\"\n               className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n            >\n               Accept terms and conditions\n            </label>\n            <p className=\"text-muted-foreground text-sm\">\n               You agree to our Terms of Service and Privacy Policy.\n            </p>\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/checkbox-with-text.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"~/registry/default/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n   return (\n      <div className=\"items-top flex space-x-2\">\n         <Checkbox id=\"terms1\" />\n         <div className=\"grid gap-1.5 leading-none\">\n            <label\n               htmlFor=\"terms1\"\n               className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n            >\n               Accept terms and conditions\n            </label>\n            <p className=\"text-muted-foreground text-sm\">\n               You agree to our Terms of Service and Privacy Policy.\n            </p>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/checkbox.json b/apps/web/public/r/styles/default/checkbox.json
index 3f444bd3..7ffca174 100644
--- a/apps/web/public/r/styles/default/checkbox.json
+++ b/apps/web/public/r/styles/default/checkbox.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "checkbox",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-checkbox"
   ],
   "files": [
     {
       "path": "ui/checkbox.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst Checkbox = React.forwardRef<\n   React.ElementRef<typeof CheckboxPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <CheckboxPrimitive.Root\n      ref={ref}\n      className={ny(\n         'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n         className,\n      )}\n      {...props}\n   >\n      <CheckboxPrimitive.Indicator\n         className={ny('flex items-center justify-center text-current')}\n      >\n         <Check className=\"size-4\" />\n      </CheckboxPrimitive.Indicator>\n   </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n   React.ElementRef<typeof CheckboxPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <CheckboxPrimitive.Root\n      ref={ref}\n      className={ny(\n         \"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <CheckboxPrimitive.Indicator\n         className={ny(\"flex items-center justify-center text-current\")}\n      >\n         <Check className=\"size-4\" />\n      </CheckboxPrimitive.Indicator>\n   </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/client-tweet-card.json b/apps/web/public/r/styles/default/client-tweet-card.json
index 213fa416..c9a676b8 100644
--- a/apps/web/public/r/styles/default/client-tweet-card.json
+++ b/apps/web/public/r/styles/default/client-tweet-card.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "client-tweet-card",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "react-tweet"
   ],
   "files": [
     {
       "path": "ui/client-tweet-card.tsx",
-      "content": "'use client'\n\nimport type { TweetProps } from 'react-tweet'\nimport { useTweet } from 'react-tweet'\nimport {\n   MagicTweet,\n   TweetNotFound,\n   TweetSkeleton,\n} from '~/registry/default/ui/tweet-card'\n\nfunction ClientTweetCard({\n   id,\n   apiUrl,\n   fallback = <TweetSkeleton />,\n   components,\n   fetchOptions,\n   onError,\n   ...props\n}: TweetProps & { className?: string }) {\n   const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions)\n\n   if (isLoading)\n      return fallback\n   if (error || !data) {\n      const NotFound = components?.TweetNotFound || TweetNotFound\n      return <NotFound error={onError ? onError(error) : error} />\n   }\n\n   return <MagicTweet tweet={data} components={components} {...props} />\n}\n\nexport default ClientTweetCard\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { TweetProps } from \"react-tweet\"\nimport { useTweet } from \"react-tweet\"\nimport {\n   MagicTweet,\n   TweetNotFound,\n   TweetSkeleton,\n} from \"~/registry/default/ui/tweet-card\"\n\nfunction ClientTweetCard({\n   id,\n   apiUrl,\n   fallback = <TweetSkeleton />,\n   components,\n   fetchOptions,\n   onError,\n   ...props\n}: TweetProps & { className?: string }) {\n   const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions)\n\n   if (isLoading) return fallback\n   if (error || !data) {\n      const NotFound = components?.TweetNotFound || TweetNotFound\n      return <NotFound error={onError ? onError(error) : error} />\n   }\n\n   return <MagicTweet tweet={data} components={components} {...props} />\n}\n\nexport default ClientTweetCard\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/collapsible-demo.json b/apps/web/public/r/styles/default/collapsible-demo.json
index 47ef6f38..18b844fd 100644
--- a/apps/web/public/r/styles/default/collapsible-demo.json
+++ b/apps/web/public/r/styles/default/collapsible-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "collapsible-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "collapsible"
   ],
   "files": [
     {
-      "path": "example/collapsible-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronsUpDown } from 'lucide-react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/default/ui/collapsible'\n\nexport default function CollapsibleDemo() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   return (\n      <Collapsible\n         open={isOpen}\n         onOpenChange={setIsOpen}\n         className=\"w-[350px] space-y-2\"\n      >\n         <div className=\"flex items-center justify-between space-x-4 px-4\">\n            <h4 className=\"text-sm font-semibold\">\n               @peduarte starred 3 repositories\n            </h4>\n            <CollapsibleTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n                  <ChevronsUpDown className=\"size-4\" />\n                  <span className=\"sr-only\">Toggle</span>\n               </Button>\n            </CollapsibleTrigger>\n         </div>\n         <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n            @radix-ui/primitives\n         </div>\n         <CollapsibleContent className=\"space-y-2\">\n            <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n               @radix-ui/colors\n            </div>\n            <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n               @stitches/react\n            </div>\n         </CollapsibleContent>\n      </Collapsible>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   return (\n      <Collapsible\n         open={isOpen}\n         onOpenChange={setIsOpen}\n         className=\"w-[350px] space-y-2\"\n      >\n         <div className=\"flex items-center justify-between space-x-4 px-4\">\n            <h4 className=\"text-sm font-semibold\">\n               @peduarte starred 3 repositories\n            </h4>\n            <CollapsibleTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n                  <ChevronsUpDown className=\"size-4\" />\n                  <span className=\"sr-only\">Toggle</span>\n               </Button>\n            </CollapsibleTrigger>\n         </div>\n         <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n            @radix-ui/primitives\n         </div>\n         <CollapsibleContent className=\"space-y-2\">\n            <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n               @radix-ui/colors\n            </div>\n            <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n               @stitches/react\n            </div>\n         </CollapsibleContent>\n      </Collapsible>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/collapsible.json b/apps/web/public/r/styles/default/collapsible.json
index 52c99085..d2e41174 100644
--- a/apps/web/public/r/styles/default/collapsible.json
+++ b/apps/web/public/r/styles/default/collapsible.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "collapsible",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-collapsible"
   ],
   "files": [
     {
       "path": "ui/collapsible.tsx",
-      "content": "'use client'\n\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/combobox-demo.json b/apps/web/public/r/styles/default/combobox-demo.json
index be19846b..21ddfbf6 100644
--- a/apps/web/public/r/styles/default/combobox-demo.json
+++ b/apps/web/public/r/styles/default/combobox-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "combobox-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "command"
   ],
   "files": [
     {
-      "path": "example/combobox-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, ChevronsUpDown } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/registry/default/ui/command'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/default/ui/popover'\n\nconst frameworks = [\n   {\n      value: 'next.js',\n      label: 'Next.js',\n   },\n   {\n      value: 'sveltekit',\n      label: 'SvelteKit',\n   },\n   {\n      value: 'nuxt.js',\n      label: 'Nuxt.js',\n   },\n   {\n      value: 'remix',\n      label: 'Remix',\n   },\n   {\n      value: 'astro',\n      label: 'Astro',\n   },\n]\n\nexport default function ComboboxDemo() {\n   const [open, setOpen] = React.useState(false)\n   const [value, setValue] = React.useState('')\n\n   return (\n      <Popover open={open} onOpenChange={setOpen}>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               role=\"combobox\"\n               aria-expanded={open}\n               className=\"w-[200px] justify-between\"\n            >\n               {value\n                  ? frameworks.find(framework => framework.value === value)?.label\n                  : 'Select framework...'}\n               <ChevronsUpDown className=\"opacity-50\" />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[200px] p-0\">\n            <Command>\n               <CommandInput placeholder=\"Search framework...\" />\n               <CommandList>\n                  <CommandEmpty>No framework found.</CommandEmpty>\n                  <CommandGroup>\n                     {frameworks.map(framework => (\n                        <CommandItem\n                           key={framework.value}\n                           value={framework.value}\n                           onSelect={(currentValue) => {\n                              setValue(currentValue === value ? '' : currentValue)\n                              setOpen(false)\n                           }}\n                        >\n                           {framework.label}\n                           <Check\n                              className={ny(\n                                 'ml-auto',\n                                 value === framework.value ? 'opacity-100' : 'opacity-0',\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/default/ui/command\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\n\nconst frameworks = [\n   {\n      value: \"next.js\",\n      label: \"Next.js\",\n   },\n   {\n      value: \"sveltekit\",\n      label: \"SvelteKit\",\n   },\n   {\n      value: \"nuxt.js\",\n      label: \"Nuxt.js\",\n   },\n   {\n      value: \"remix\",\n      label: \"Remix\",\n   },\n   {\n      value: \"astro\",\n      label: \"Astro\",\n   },\n]\n\nexport default function ComboboxDemo() {\n   const [open, setOpen] = React.useState(false)\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <Popover open={open} onOpenChange={setOpen}>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               role=\"combobox\"\n               aria-expanded={open}\n               className=\"w-[200px] justify-between\"\n            >\n               {value\n                  ? frameworks.find((framework) => framework.value === value)\n                       ?.label\n                  : \"Select framework...\"}\n               <ChevronsUpDown className=\"opacity-50\" />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[200px] p-0\">\n            <Command>\n               <CommandInput placeholder=\"Search framework...\" />\n               <CommandList>\n                  <CommandEmpty>No framework found.</CommandEmpty>\n                  <CommandGroup>\n                     {frameworks.map((framework) => (\n                        <CommandItem\n                           key={framework.value}\n                           value={framework.value}\n                           onSelect={(currentValue) => {\n                              setValue(\n                                 currentValue === value ? \"\" : currentValue,\n                              )\n                              setOpen(false)\n                           }}\n                        >\n                           {framework.label}\n                           <Check\n                              className={ny(\n                                 \"ml-auto\",\n                                 value === framework.value\n                                    ? \"opacity-100\"\n                                    : \"opacity-0\",\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/combobox-dropdown-menu.json b/apps/web/public/r/styles/default/combobox-dropdown-menu.json
index 7f32cfe6..59d7aca6 100644
--- a/apps/web/public/r/styles/default/combobox-dropdown-menu.json
+++ b/apps/web/public/r/styles/default/combobox-dropdown-menu.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "combobox-dropdown-menu",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "command",
     "dropdown-menu",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/combobox-dropdown-menu.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/registry/default/ui/command'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\n\nconst labels = [\n   'feature',\n   'bug',\n   'enhancement',\n   'documentation',\n   'design',\n   'question',\n   'maintenance',\n]\n\nexport default function ComboboxDropdownMenu() {\n   const [label, setLabel] = React.useState('feature')\n   const [open, setOpen] = React.useState(false)\n\n   return (\n      <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n         <p className=\"text-sm font-medium leading-none\">\n            <span className=\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\">\n               {label}\n            </span>\n            <span className=\"text-muted-foreground\">Create a new project</span>\n         </p>\n         <DropdownMenu open={open} onOpenChange={setOpen}>\n            <DropdownMenuTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <MoreHorizontal />\n               </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n               <DropdownMenuLabel>Actions</DropdownMenuLabel>\n               <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                     <User />\n                     Assign to...\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                     <Calendar />\n                     Set due date...\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuSub>\n                     <DropdownMenuSubTrigger>\n                        <Tags />\n                        Apply label\n                     </DropdownMenuSubTrigger>\n                     <DropdownMenuSubContent className=\"p-0\">\n                        <Command>\n                           <CommandInput\n                              placeholder=\"Filter label...\"\n                              autoFocus\n                           />\n                           <CommandList>\n                              <CommandEmpty>No label found.</CommandEmpty>\n                              <CommandGroup>\n                                 {labels.map(label => (\n                                    <CommandItem\n                                       key={label}\n                                       value={label}\n                                       onSelect={(value) => {\n                                          setLabel(value)\n                                          setOpen(false)\n                                       }}\n                                    >\n                                       {label}\n                                    </CommandItem>\n                                 ))}\n                              </CommandGroup>\n                           </CommandList>\n                        </Command>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"text-red-600\">\n                     <Trash />\n                     Delete\n                     <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n               </DropdownMenuGroup>\n            </DropdownMenuContent>\n         </DropdownMenu>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/combobox-dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport { Calendar, MoreHorizontal, Tags, Trash, User } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/default/ui/command\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\n\nconst labels = [\n   \"feature\",\n   \"bug\",\n   \"enhancement\",\n   \"documentation\",\n   \"design\",\n   \"question\",\n   \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n   const [label, setLabel] = React.useState(\"feature\")\n   const [open, setOpen] = React.useState(false)\n\n   return (\n      <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n         <p className=\"text-sm font-medium leading-none\">\n            <span className=\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\">\n               {label}\n            </span>\n            <span className=\"text-muted-foreground\">Create a new project</span>\n         </p>\n         <DropdownMenu open={open} onOpenChange={setOpen}>\n            <DropdownMenuTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <MoreHorizontal />\n               </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n               <DropdownMenuLabel>Actions</DropdownMenuLabel>\n               <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                     <User />\n                     Assign to...\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                     <Calendar />\n                     Set due date...\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuSub>\n                     <DropdownMenuSubTrigger>\n                        <Tags />\n                        Apply label\n                     </DropdownMenuSubTrigger>\n                     <DropdownMenuSubContent className=\"p-0\">\n                        <Command>\n                           <CommandInput\n                              placeholder=\"Filter label...\"\n                              autoFocus\n                           />\n                           <CommandList>\n                              <CommandEmpty>No label found.</CommandEmpty>\n                              <CommandGroup>\n                                 {labels.map((label) => (\n                                    <CommandItem\n                                       key={label}\n                                       value={label}\n                                       onSelect={(value) => {\n                                          setLabel(value)\n                                          setOpen(false)\n                                       }}\n                                    >\n                                       {label}\n                                    </CommandItem>\n                                 ))}\n                              </CommandGroup>\n                           </CommandList>\n                        </Command>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"text-red-600\">\n                     <Trash />\n                     Delete\n                     <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n               </DropdownMenuGroup>\n            </DropdownMenuContent>\n         </DropdownMenu>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/combobox-form.json b/apps/web/public/r/styles/default/combobox-form.json
index d5481d30..7321023d 100644
--- a/apps/web/public/r/styles/default/combobox-form.json
+++ b/apps/web/public/r/styles/default/combobox-form.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "combobox-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "command",
     "form"
   ],
   "files": [
     {
-      "path": "example/combobox-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { Check, ChevronsUpDown } from 'lucide-react'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { ny } from '~/lib/utils'\nimport { toast } from '~/registry/default/hooks/use-toast'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/registry/default/ui/command'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/default/ui/popover'\n\nconst languages = [\n   { label: 'English', value: 'en' },\n   { label: 'French', value: 'fr' },\n   { label: 'German', value: 'de' },\n   { label: 'Spanish', value: 'es' },\n   { label: 'Portuguese', value: 'pt' },\n   { label: 'Russian', value: 'ru' },\n   { label: 'Japanese', value: 'ja' },\n   { label: 'Korean', value: 'ko' },\n   { label: 'Chinese', value: 'zh' },\n] as const\n\nconst FormSchema = z.object({\n   language: z.string({\n      required_error: 'Please select a language.',\n   }),\n})\n\nexport default function ComboboxForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"language\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Language</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 role=\"combobox\"\n                                 className={ny(\n                                    'w-[200px] justify-between',\n                                    !field.value && 'text-muted-foreground',\n                                 )}\n                              >\n                                 {field.value\n                                    ? languages.find(\n                                       language => language.value === field.value,\n                                    )?.label\n                                    : 'Select language'}\n                                 <ChevronsUpDown className=\"ml-2 size-4 shrink-0 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-[200px] p-0\">\n                           <Command>\n                              <CommandInput placeholder=\"Search language...\" />\n                              <CommandList>\n                                 <CommandEmpty>No language found.</CommandEmpty>\n                                 <CommandGroup>\n                                    {languages.map(language => (\n                                       <CommandItem\n                                          value={language.label}\n                                          key={language.value}\n                                          onSelect={() => {\n                                             form.setValue('language', language.value)\n                                          }}\n                                       >\n                                          {language.label}\n                                          <Check\n                                             className={ny(\n                                                'ml-auto',\n                                                language.value === field.value\n                                                   ? 'opacity-100'\n                                                   : 'opacity-0',\n                                             )}\n                                          />\n                                       </CommandItem>\n                                    ))}\n                                 </CommandGroup>\n                              </CommandList>\n                           </Command>\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        This is the language that will be used in the dashboard.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/combobox-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { ny } from \"~/lib/utils\"\nimport { toast } from \"~/registry/default/hooks/use-toast\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/default/ui/command\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\n\nconst languages = [\n   { label: \"English\", value: \"en\" },\n   { label: \"French\", value: \"fr\" },\n   { label: \"German\", value: \"de\" },\n   { label: \"Spanish\", value: \"es\" },\n   { label: \"Portuguese\", value: \"pt\" },\n   { label: \"Russian\", value: \"ru\" },\n   { label: \"Japanese\", value: \"ja\" },\n   { label: \"Korean\", value: \"ko\" },\n   { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n   language: z.string({\n      required_error: \"Please select a language.\",\n   }),\n})\n\nexport default function ComboboxForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"language\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Language</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 role=\"combobox\"\n                                 className={ny(\n                                    \"w-[200px] justify-between\",\n                                    !field.value && \"text-muted-foreground\",\n                                 )}\n                              >\n                                 {field.value\n                                    ? languages.find(\n                                         (language) =>\n                                            language.value === field.value,\n                                      )?.label\n                                    : \"Select language\"}\n                                 <ChevronsUpDown className=\"ml-2 size-4 shrink-0 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-[200px] p-0\">\n                           <Command>\n                              <CommandInput placeholder=\"Search language...\" />\n                              <CommandList>\n                                 <CommandEmpty>No language found.</CommandEmpty>\n                                 <CommandGroup>\n                                    {languages.map((language) => (\n                                       <CommandItem\n                                          value={language.label}\n                                          key={language.value}\n                                          onSelect={() => {\n                                             form.setValue(\n                                                \"language\",\n                                                language.value,\n                                             )\n                                          }}\n                                       >\n                                          {language.label}\n                                          <Check\n                                             className={ny(\n                                                \"ml-auto\",\n                                                language.value === field.value\n                                                   ? \"opacity-100\"\n                                                   : \"opacity-0\",\n                                             )}\n                                          />\n                                       </CommandItem>\n                                    ))}\n                                 </CommandGroup>\n                              </CommandList>\n                           </Command>\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        This is the language that will be used in the dashboard.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/combobox-popover.json b/apps/web/public/r/styles/default/combobox-popover.json
index 8135ad62..0d9912e2 100644
--- a/apps/web/public/r/styles/default/combobox-popover.json
+++ b/apps/web/public/r/styles/default/combobox-popover.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "combobox-popover",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "combobox",
     "popover"
   ],
   "files": [
     {
-      "path": "example/combobox-popover.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport type {\n   LucideIcon,\n} from 'lucide-react'\nimport {\n   ArrowUpCircle,\n   CheckCircle2,\n   Circle,\n   HelpCircle,\n   XCircle,\n} from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/registry/default/ui/command'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/default/ui/popover'\n\ninterface Status {\n   value: string\n   label: string\n   icon: LucideIcon\n}\n\nconst statuses: Status[] = [\n   {\n      value: 'backlog',\n      label: 'Backlog',\n      icon: HelpCircle,\n   },\n   {\n      value: 'todo',\n      label: 'Todo',\n      icon: Circle,\n   },\n   {\n      value: 'in progress',\n      label: 'In Progress',\n      icon: ArrowUpCircle,\n   },\n   {\n      value: 'done',\n      label: 'Done',\n      icon: CheckCircle2,\n   },\n   {\n      value: 'canceled',\n      label: 'Canceled',\n      icon: XCircle,\n   },\n]\n\nexport default function ComboboxPopover() {\n   const [open, setOpen] = React.useState(false)\n   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n      null,\n   )\n\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <p className=\"text-muted-foreground text-sm\">Status</p>\n         <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"w-[150px] justify-start\"\n               >\n                  {selectedStatus\n                     ? (\n                           <>\n                              <selectedStatus.icon className=\"mr-2 size-4 shrink-0\" />\n                              {selectedStatus.label}\n                           </>\n                        )\n                     : (\n                           <>+ Set status</>\n                        )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n               <Command>\n                  <CommandInput placeholder=\"Change status...\" />\n                  <CommandList>\n                     <CommandEmpty>No results found.</CommandEmpty>\n                     <CommandGroup>\n                        {statuses.map(status => (\n                           <CommandItem\n                              key={status.value}\n                              value={status.value}\n                              onSelect={(value) => {\n                                 setSelectedStatus(\n                                    statuses.find(priority => priority.value === value)\n                                    || null,\n                                 )\n                                 setOpen(false)\n                              }}\n                           >\n                              <status.icon\n                                 className={ny(\n                                    'mr-2 size-4',\n                                    status.value === selectedStatus?.value\n                                       ? 'opacity-100'\n                                       : 'opacity-40',\n                                 )}\n                              />\n                              <span>{status.label}</span>\n                           </CommandItem>\n                        ))}\n                     </CommandGroup>\n                  </CommandList>\n               </Command>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/combobox-popover.tsx",
+      "content": "\"use client\"\n\nimport type { LucideIcon } from \"lucide-react\"\nimport {\n   ArrowUpCircle,\n   CheckCircle2,\n   Circle,\n   HelpCircle,\n   XCircle,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/default/ui/command\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\n\ninterface Status {\n   value: string\n   label: string\n   icon: LucideIcon\n}\n\nconst statuses: Status[] = [\n   {\n      value: \"backlog\",\n      label: \"Backlog\",\n      icon: HelpCircle,\n   },\n   {\n      value: \"todo\",\n      label: \"Todo\",\n      icon: Circle,\n   },\n   {\n      value: \"in progress\",\n      label: \"In Progress\",\n      icon: ArrowUpCircle,\n   },\n   {\n      value: \"done\",\n      label: \"Done\",\n      icon: CheckCircle2,\n   },\n   {\n      value: \"canceled\",\n      label: \"Canceled\",\n      icon: XCircle,\n   },\n]\n\nexport default function ComboboxPopover() {\n   const [open, setOpen] = React.useState(false)\n   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n      null,\n   )\n\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <p className=\"text-muted-foreground text-sm\">Status</p>\n         <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"w-[150px] justify-start\"\n               >\n                  {selectedStatus ? (\n                     <>\n                        <selectedStatus.icon className=\"mr-2 size-4 shrink-0\" />\n                        {selectedStatus.label}\n                     </>\n                  ) : (\n                     <>+ Set status</>\n                  )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n               <Command>\n                  <CommandInput placeholder=\"Change status...\" />\n                  <CommandList>\n                     <CommandEmpty>No results found.</CommandEmpty>\n                     <CommandGroup>\n                        {statuses.map((status) => (\n                           <CommandItem\n                              key={status.value}\n                              value={status.value}\n                              onSelect={(value) => {\n                                 setSelectedStatus(\n                                    statuses.find(\n                                       (priority) => priority.value === value,\n                                    ) || null,\n                                 )\n                                 setOpen(false)\n                              }}\n                           >\n                              <status.icon\n                                 className={ny(\n                                    \"mr-2 size-4\",\n                                    status.value === selectedStatus?.value\n                                       ? \"opacity-100\"\n                                       : \"opacity-40\",\n                                 )}\n                              />\n                              <span>{status.label}</span>\n                           </CommandItem>\n                        ))}\n                     </CommandGroup>\n                  </CommandList>\n               </Command>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/combobox-responsive.json b/apps/web/public/r/styles/default/combobox-responsive.json
index b3786ece..e1322d18 100644
--- a/apps/web/public/r/styles/default/combobox-responsive.json
+++ b/apps/web/public/r/styles/default/combobox-responsive.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "combobox-responsive",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "combobox",
     "popover",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/combobox-responsive.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { useMediaQuery } from '~/hooks/use-media-query'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/registry/default/ui/command'\nimport {\n   Drawer,\n   DrawerContent,\n   DrawerTrigger,\n} from '~/registry/default/ui/drawer'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/default/ui/popover'\n\ninterface Status {\n   value: string\n   label: string\n}\n\nconst statuses: Status[] = [\n   {\n      value: 'backlog',\n      label: 'Backlog',\n   },\n   {\n      value: 'todo',\n      label: 'Todo',\n   },\n   {\n      value: 'in progress',\n      label: 'In Progress',\n   },\n   {\n      value: 'done',\n      label: 'Done',\n   },\n   {\n      value: 'canceled',\n      label: 'Canceled',\n   },\n]\n\nexport default function ComboBoxResponsive() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery('(min-width: 768px)')\n   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n      null,\n   )\n\n   if (isDesktop) {\n      return (\n         <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n               <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n                  {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n               <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n            </PopoverContent>\n         </Popover>\n      )\n   }\n\n   return (\n      <Drawer open={open} onOpenChange={setOpen}>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n               {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n            </Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mt-4 border-t\">\n               <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n\nfunction StatusList({\n   setOpen,\n   setSelectedStatus,\n}: {\n   setOpen: (open: boolean) => void\n   setSelectedStatus: (status: Status | null) => void\n}) {\n   return (\n      <Command>\n         <CommandInput placeholder=\"Filter status...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n               {statuses.map(status => (\n                  <CommandItem\n                     key={status.value}\n                     value={status.value}\n                     onSelect={(value) => {\n                        setSelectedStatus(\n                           statuses.find(priority => priority.value === value) || null,\n                        )\n                        setOpen(false)\n                     }}\n                  >\n                     {status.label}\n                  </CommandItem>\n               ))}\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/combobox-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"~/hooks/use-media-query\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/default/ui/command\"\nimport {\n   Drawer,\n   DrawerContent,\n   DrawerTrigger,\n} from \"~/registry/default/ui/drawer\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\n\ninterface Status {\n   value: string\n   label: string\n}\n\nconst statuses: Status[] = [\n   {\n      value: \"backlog\",\n      label: \"Backlog\",\n   },\n   {\n      value: \"todo\",\n      label: \"Todo\",\n   },\n   {\n      value: \"in progress\",\n      label: \"In Progress\",\n   },\n   {\n      value: \"done\",\n      label: \"Done\",\n   },\n   {\n      value: \"canceled\",\n      label: \"Canceled\",\n   },\n]\n\nexport default function ComboBoxResponsive() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n      null,\n   )\n\n   if (isDesktop) {\n      return (\n         <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n               <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n                  {selectedStatus ? (\n                     <>{selectedStatus.label}</>\n                  ) : (\n                     <>+ Set status</>\n                  )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n               <StatusList\n                  setOpen={setOpen}\n                  setSelectedStatus={setSelectedStatus}\n               />\n            </PopoverContent>\n         </Popover>\n      )\n   }\n\n   return (\n      <Drawer open={open} onOpenChange={setOpen}>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n               {selectedStatus ? (\n                  <>{selectedStatus.label}</>\n               ) : (\n                  <>+ Set status</>\n               )}\n            </Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mt-4 border-t\">\n               <StatusList\n                  setOpen={setOpen}\n                  setSelectedStatus={setSelectedStatus}\n               />\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n\nfunction StatusList({\n   setOpen,\n   setSelectedStatus,\n}: {\n   setOpen: (open: boolean) => void\n   setSelectedStatus: (status: Status | null) => void\n}) {\n   return (\n      <Command>\n         <CommandInput placeholder=\"Filter status...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n               {statuses.map((status) => (\n                  <CommandItem\n                     key={status.value}\n                     value={status.value}\n                     onSelect={(value) => {\n                        setSelectedStatus(\n                           statuses.find(\n                              (priority) => priority.value === value,\n                           ) || null,\n                        )\n                        setOpen(false)\n                     }}\n                  >\n                     {status.label}\n                  </CommandItem>\n               ))}\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/command-demo.json b/apps/web/public/r/styles/default/command-demo.json
index 3c7826ee..ce25676c 100644
--- a/apps/web/public/r/styles/default/command-demo.json
+++ b/apps/web/public/r/styles/default/command-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "command-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "command"
   ],
   "files": [
     {
-      "path": "example/command-demo.tsx",
-      "content": "import {\n   Calculator,\n   Calendar,\n   CreditCard,\n   Settings,\n   Smile,\n   User,\n} from 'lucide-react'\n\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from '~/registry/default/ui/command'\n\nexport default function CommandDemo() {\n   return (\n      <Command className=\"rounded-lg border shadow-md\">\n         <CommandInput placeholder=\"Type a command or search...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Suggestions\">\n               <CommandItem>\n                  <Calendar className=\"mr-2 size-4\" />\n                  <span>Calendar</span>\n               </CommandItem>\n               <CommandItem>\n                  <Smile className=\"mr-2 size-4\" />\n                  <span>Search Emoji</span>\n               </CommandItem>\n               <CommandItem>\n                  <Calculator className=\"mr-2 size-4\" />\n                  <span>Calculator</span>\n               </CommandItem>\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup heading=\"Settings\">\n               <CommandItem>\n                  <User className=\"mr-2 size-4\" />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <CreditCard className=\"mr-2 size-4\" />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <Settings className=\"mr-2 size-4\" />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n               </CommandItem>\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/command-demo.tsx",
+      "content": "import {\n   Calculator,\n   Calendar,\n   CreditCard,\n   Settings,\n   Smile,\n   User,\n} from \"lucide-react\"\n\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from \"~/registry/default/ui/command\"\n\nexport default function CommandDemo() {\n   return (\n      <Command className=\"rounded-lg border shadow-md\">\n         <CommandInput placeholder=\"Type a command or search...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Suggestions\">\n               <CommandItem>\n                  <Calendar className=\"mr-2 size-4\" />\n                  <span>Calendar</span>\n               </CommandItem>\n               <CommandItem>\n                  <Smile className=\"mr-2 size-4\" />\n                  <span>Search Emoji</span>\n               </CommandItem>\n               <CommandItem>\n                  <Calculator className=\"mr-2 size-4\" />\n                  <span>Calculator</span>\n               </CommandItem>\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup heading=\"Settings\">\n               <CommandItem>\n                  <User className=\"mr-2 size-4\" />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <CreditCard className=\"mr-2 size-4\" />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <Settings className=\"mr-2 size-4\" />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n               </CommandItem>\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/command-dialog.json b/apps/web/public/r/styles/default/command-dialog.json
index 8c855105..cacd9f32 100644
--- a/apps/web/public/r/styles/default/command-dialog.json
+++ b/apps/web/public/r/styles/default/command-dialog.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "command-dialog",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "command",
     "dialog"
   ],
   "files": [
     {
-      "path": "example/command-dialog.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   Calculator,\n   Calendar,\n   CreditCard,\n   Settings,\n   Smile,\n   User,\n} from 'lucide-react'\n\nimport {\n   CommandDialog,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from '~/registry/default/ui/command'\n\nexport default function CommandDialogDemo() {\n   const [open, setOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      const down = (e: KeyboardEvent) => {\n         if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {\n            e.preventDefault()\n            setOpen(open => !open)\n         }\n      }\n\n      document.addEventListener('keydown', down)\n      return () => document.removeEventListener('keydown', down)\n   }, [])\n\n   return (\n      <>\n         <p className=\"text-muted-foreground text-sm\">\n            Press\n            {' '}\n            <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100\">\n               <span className=\"text-xs\">⌘</span>\n               J\n            </kbd>\n         </p>\n         <CommandDialog open={open} onOpenChange={setOpen}>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n               <CommandEmpty>No results found.</CommandEmpty>\n               <CommandGroup heading=\"Suggestions\">\n                  <CommandItem>\n                     <Calendar className=\"mr-2 size-4\" />\n                     <span>Calendar</span>\n                  </CommandItem>\n                  <CommandItem>\n                     <Smile className=\"mr-2 size-4\" />\n                     <span>Search Emoji</span>\n                  </CommandItem>\n                  <CommandItem>\n                     <Calculator className=\"mr-2 size-4\" />\n                     <span>Calculator</span>\n                  </CommandItem>\n               </CommandGroup>\n               <CommandSeparator />\n               <CommandGroup heading=\"Settings\">\n                  <CommandItem>\n                     <User className=\"mr-2 size-4\" />\n                     <span>Profile</span>\n                     <CommandShortcut>⌘P</CommandShortcut>\n                  </CommandItem>\n                  <CommandItem>\n                     <CreditCard className=\"mr-2 size-4\" />\n                     <span>Billing</span>\n                     <CommandShortcut>⌘B</CommandShortcut>\n                  </CommandItem>\n                  <CommandItem>\n                     <Settings className=\"mr-2 size-4\" />\n                     <span>Settings</span>\n                     <CommandShortcut>⌘S</CommandShortcut>\n                  </CommandItem>\n               </CommandGroup>\n            </CommandList>\n         </CommandDialog>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/command-dialog.tsx",
+      "content": "\"use client\"\n\nimport {\n   Calculator,\n   Calendar,\n   CreditCard,\n   Settings,\n   Smile,\n   User,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   CommandDialog,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from \"~/registry/default/ui/command\"\n\nexport default function CommandDialogDemo() {\n   const [open, setOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      const down = (e: KeyboardEvent) => {\n         if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n            e.preventDefault()\n            setOpen((open) => !open)\n         }\n      }\n\n      document.addEventListener(\"keydown\", down)\n      return () => document.removeEventListener(\"keydown\", down)\n   }, [])\n\n   return (\n      <>\n         <p className=\"text-muted-foreground text-sm\">\n            Press{\" \"}\n            <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100\">\n               <span className=\"text-xs\">⌘</span>J\n            </kbd>\n         </p>\n         <CommandDialog open={open} onOpenChange={setOpen}>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n               <CommandEmpty>No results found.</CommandEmpty>\n               <CommandGroup heading=\"Suggestions\">\n                  <CommandItem>\n                     <Calendar className=\"mr-2 size-4\" />\n                     <span>Calendar</span>\n                  </CommandItem>\n                  <CommandItem>\n                     <Smile className=\"mr-2 size-4\" />\n                     <span>Search Emoji</span>\n                  </CommandItem>\n                  <CommandItem>\n                     <Calculator className=\"mr-2 size-4\" />\n                     <span>Calculator</span>\n                  </CommandItem>\n               </CommandGroup>\n               <CommandSeparator />\n               <CommandGroup heading=\"Settings\">\n                  <CommandItem>\n                     <User className=\"mr-2 size-4\" />\n                     <span>Profile</span>\n                     <CommandShortcut>⌘P</CommandShortcut>\n                  </CommandItem>\n                  <CommandItem>\n                     <CreditCard className=\"mr-2 size-4\" />\n                     <span>Billing</span>\n                     <CommandShortcut>⌘B</CommandShortcut>\n                  </CommandItem>\n                  <CommandItem>\n                     <Settings className=\"mr-2 size-4\" />\n                     <span>Settings</span>\n                     <CommandShortcut>⌘S</CommandShortcut>\n                  </CommandItem>\n               </CommandGroup>\n            </CommandList>\n         </CommandDialog>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/command.json b/apps/web/public/r/styles/default/command.json
index 416f3b32..504920ed 100644
--- a/apps/web/public/r/styles/default/command.json
+++ b/apps/web/public/r/styles/default/command.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "command",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "cmdk@1.0.0"
   ],
@@ -10,8 +12,8 @@
   "files": [
     {
       "path": "ui/command.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport type { DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Dialog, DialogContent } from '~/registry/default/ui/dialog'\n\nconst Command = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive\n      ref={ref}\n      className={ny(\n         'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md',\n         className,\n      )}\n      {...props}\n   />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nfunction CommandDialog({ children, ...props }: DialogProps) {\n   return (\n      <Dialog {...props}>\n         <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n            <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5\">\n               {children}\n            </Command>\n         </DialogContent>\n      </Dialog>\n   )\n}\n\nconst CommandInput = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Input>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n   <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n         ref={ref}\n         className={ny(\n            'placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n            className,\n         )}\n         {...props}\n      />\n   </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.List\n      ref={ref}\n      className={ny('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n      {...props}\n   />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Empty>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n   <CommandPrimitive.Empty\n      ref={ref}\n      className=\"py-6 text-center text-sm\"\n      {...props}\n   />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Group>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Group\n      ref={ref}\n      className={ny(\n         'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Separator\n      ref={ref}\n      className={ny('bg-border -mx-1 h-px', className)}\n      {...props}\n   />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Item\n      ref={ref}\n      className={ny(\n         'data-[selected=\\'true\\']:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nfunction CommandShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\n            'text-muted-foreground ml-auto text-xs tracking-widest',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n   Command,\n   CommandDialog,\n   CommandInput,\n   CommandList,\n   CommandEmpty,\n   CommandGroup,\n   CommandItem,\n   CommandShortcut,\n   CommandSeparator,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Dialog, DialogContent } from \"~/registry/default/ui/dialog\"\n\nconst Command = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive\n      ref={ref}\n      className={ny(\n         \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md\",\n         className,\n      )}\n      {...props}\n   />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nfunction CommandDialog({ children, ...props }: DialogProps) {\n   return (\n      <Dialog {...props}>\n         <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n            <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5\">\n               {children}\n            </Command>\n         </DialogContent>\n      </Dialog>\n   )\n}\n\nconst CommandInput = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Input>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n   <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n         ref={ref}\n         className={ny(\n            \"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n            className,\n         )}\n         {...props}\n      />\n   </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.List\n      ref={ref}\n      className={ny(\n         \"max-h-[300px] overflow-y-auto overflow-x-hidden\",\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Empty>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n   <CommandPrimitive.Empty\n      ref={ref}\n      className=\"py-6 text-center text-sm\"\n      {...props}\n   />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Group>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Group\n      ref={ref}\n      className={ny(\n         \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Separator\n      ref={ref}\n      className={ny(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n   />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Item\n      ref={ref}\n      className={ny(\n         \"data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nfunction CommandShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\n            \"text-muted-foreground ml-auto text-xs tracking-widest\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n   Command,\n   CommandDialog,\n   CommandInput,\n   CommandList,\n   CommandEmpty,\n   CommandGroup,\n   CommandItem,\n   CommandShortcut,\n   CommandSeparator,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/confetti-basic-cannon.json b/apps/web/public/r/styles/default/confetti-basic-cannon.json
index 388d77fb..a7c4fd87 100644
--- a/apps/web/public/r/styles/default/confetti-basic-cannon.json
+++ b/apps/web/public/r/styles/default/confetti-basic-cannon.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-basic-cannon",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-basic-cannon.tsx",
-      "content": "import { ConfettiButton } from '~/registry/default/ui/confetti'\n\nexport default function ConfettiButtonDemo() {\n   return (\n      <div className=\"relative\">\n         <ConfettiButton>Confetti 🎉</ConfettiButton>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-basic-cannon.tsx",
+      "content": "import { ConfettiButton } from \"~/registry/default/ui/confetti\"\n\nexport default function ConfettiButtonDemo() {\n   return (\n      <div className=\"relative\">\n         <ConfettiButton>Confetti 🎉</ConfettiButton>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/confetti-custom-shapes.json b/apps/web/public/r/styles/default/confetti-custom-shapes.json
index 1647069d..450a134d 100644
--- a/apps/web/public/r/styles/default/confetti-custom-shapes.json
+++ b/apps/web/public/r/styles/default/confetti-custom-shapes.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-custom-shapes",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-custom-shapes.tsx",
-      "content": "import confetti from 'canvas-confetti'\nimport { Button } from '~/components/ui/button'\n\nexport default function ConfettiCustomShapes() {\n   const handleClick = () => {\n      const scalar = 2\n      const triangle = confetti.shapeFromPath({\n         path: 'M0 10 L5 0 L10 10z',\n      })\n      const square = confetti.shapeFromPath({\n         path: 'M0 0 L10 0 L10 10 L0 10 Z',\n      })\n      const coin = confetti.shapeFromPath({\n         path: 'M5 0 A5 5 0 1 0 5 10 A5 5 0 1 0 5 0 Z',\n      })\n      const tree = confetti.shapeFromPath({\n         path: 'M5 0 L10 10 L0 10 Z',\n      })\n\n      const defaults = {\n         spread: 360,\n         ticks: 60,\n         gravity: 0,\n         decay: 0.96,\n         startVelocity: 20,\n         shapes: [triangle, square, coin, tree],\n         scalar,\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 30,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 5,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: ['circle'],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative flex items-center justify-center\">\n         <Button onClick={handleClick}>Trigger Shapes</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-custom-shapes.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"~/components/ui/button\"\n\nexport default function ConfettiCustomShapes() {\n   const handleClick = () => {\n      const scalar = 2\n      const triangle = confetti.shapeFromPath({\n         path: \"M0 10 L5 0 L10 10z\",\n      })\n      const square = confetti.shapeFromPath({\n         path: \"M0 0 L10 0 L10 10 L0 10 Z\",\n      })\n      const coin = confetti.shapeFromPath({\n         path: \"M5 0 A5 5 0 1 0 5 10 A5 5 0 1 0 5 0 Z\",\n      })\n      const tree = confetti.shapeFromPath({\n         path: \"M5 0 L10 10 L0 10 Z\",\n      })\n\n      const defaults = {\n         spread: 360,\n         ticks: 60,\n         gravity: 0,\n         decay: 0.96,\n         startVelocity: 20,\n         shapes: [triangle, square, coin, tree],\n         scalar,\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 30,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 5,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: [\"circle\"],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative flex items-center justify-center\">\n         <Button onClick={handleClick}>Trigger Shapes</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/confetti-demo.json b/apps/web/public/r/styles/default/confetti-demo.json
index c97da93b..7396f752 100644
--- a/apps/web/public/r/styles/default/confetti-demo.json
+++ b/apps/web/public/r/styles/default/confetti-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-demo.tsx",
-      "content": "'use client'\n\nimport { useRef } from 'react'\n\nimport type { ConfettiRef } from '~/registry/default/ui/confetti'\nimport Confetti from '~/registry/default/ui/confetti'\n\nexport default function ConfettiDemo() {\n   const confettiRef = useRef<ConfettiRef>(null)\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Confetti\n         </span>\n\n         <Confetti\n            ref={confettiRef}\n            className=\"absolute left-0 top-0 z-0 size-full\"\n            onMouseEnter={() => {\n               confettiRef.current?.fire({})\n            }}\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-demo.tsx",
+      "content": "\"use client\"\n\nimport { useRef } from \"react\"\n\nimport type { ConfettiRef } from \"~/registry/default/ui/confetti\"\nimport Confetti from \"~/registry/default/ui/confetti\"\n\nexport default function ConfettiDemo() {\n   const confettiRef = useRef<ConfettiRef>(null)\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Confetti\n         </span>\n\n         <Confetti\n            ref={confettiRef}\n            className=\"absolute left-0 top-0 z-0 size-full\"\n            onMouseEnter={() => {\n               confettiRef.current?.fire({})\n            }}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/confetti-emoji.json b/apps/web/public/r/styles/default/confetti-emoji.json
index b9e7c5ba..2ac04436 100644
--- a/apps/web/public/r/styles/default/confetti-emoji.json
+++ b/apps/web/public/r/styles/default/confetti-emoji.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-emoji",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-emoji.tsx",
-      "content": "import confetti from 'canvas-confetti'\nimport { Button } from '~/components/ui/button'\n\nexport default function ConfettiEmoji() {\n   const handleClick = () => {\n      const scalar = 2\n      const unicorn = confetti.shapeFromText({ text: '🦄', scalar })\n\n      const defaults = {\n         spread: 360,\n         ticks: 60,\n         gravity: 0,\n         decay: 0.96,\n         startVelocity: 20,\n         shapes: [unicorn],\n         scalar,\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 30,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 5,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: ['circle'],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative justify-center\">\n         <Button onClick={handleClick}>Trigger Emoji</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-emoji.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"~/components/ui/button\"\n\nexport default function ConfettiEmoji() {\n   const handleClick = () => {\n      const scalar = 2\n      const unicorn = confetti.shapeFromText({ text: \"🦄\", scalar })\n\n      const defaults = {\n         spread: 360,\n         ticks: 60,\n         gravity: 0,\n         decay: 0.96,\n         startVelocity: 20,\n         shapes: [unicorn],\n         scalar,\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 30,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 5,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: [\"circle\"],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative justify-center\">\n         <Button onClick={handleClick}>Trigger Emoji</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/confetti-fireworks.json b/apps/web/public/r/styles/default/confetti-fireworks.json
index 35e19cf2..a8c7615e 100644
--- a/apps/web/public/r/styles/default/confetti-fireworks.json
+++ b/apps/web/public/r/styles/default/confetti-fireworks.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-fireworks",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-fireworks.tsx",
-      "content": "import confetti from 'canvas-confetti'\nimport { Button } from '~/components/ui/button'\n\nexport default function ConfettiFireworks() {\n   const handleClick = () => {\n      const duration = 5 * 1000\n      const animationEnd = Date.now() + duration\n      const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }\n\n      const randomInRange = (min: number, max: number) =>\n         Math.random() * (max - min) + min\n\n      const interval = window.setInterval(() => {\n         const timeLeft = animationEnd - Date.now()\n\n         if (timeLeft <= 0)\n            return clearInterval(interval)\n\n         const particleCount = 50 * (timeLeft / duration)\n         confetti({\n            ...defaults,\n            particleCount,\n            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },\n         })\n         confetti({\n            ...defaults,\n            particleCount,\n            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },\n         })\n      }, 250)\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Fireworks</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-fireworks.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"~/components/ui/button\"\n\nexport default function ConfettiFireworks() {\n   const handleClick = () => {\n      const duration = 5 * 1000\n      const animationEnd = Date.now() + duration\n      const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }\n\n      const randomInRange = (min: number, max: number) =>\n         Math.random() * (max - min) + min\n\n      const interval = window.setInterval(() => {\n         const timeLeft = animationEnd - Date.now()\n\n         if (timeLeft <= 0) return clearInterval(interval)\n\n         const particleCount = 50 * (timeLeft / duration)\n         confetti({\n            ...defaults,\n            particleCount,\n            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },\n         })\n         confetti({\n            ...defaults,\n            particleCount,\n            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },\n         })\n      }, 250)\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Fireworks</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/confetti-hover.json b/apps/web/public/r/styles/default/confetti-hover.json
index f021f499..16ffee5a 100644
--- a/apps/web/public/r/styles/default/confetti-hover.json
+++ b/apps/web/public/r/styles/default/confetti-hover.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-hover",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-hover.tsx",
-      "content": "'use client'\n\nimport { useRef } from 'react'\nimport type { ConfettiRef } from '~/registry/default/ui/confetti'\nimport Confetti from '~/registry/default/ui/confetti'\n\nexport default function ConfettiBasicCannon() {\n   const confettiRef = useRef<ConfettiRef>(null)\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full max-w-lg flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Confetti\n         </span>\n\n         <Confetti\n            ref={confettiRef}\n            className=\"absolute left-0 top-0 z-0 size-full\"\n            onMouseEnter={() => {\n               confettiRef.current?.fire({})\n            }}\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-hover.tsx",
+      "content": "\"use client\"\n\nimport { useRef } from \"react\"\nimport type { ConfettiRef } from \"~/registry/default/ui/confetti\"\nimport Confetti from \"~/registry/default/ui/confetti\"\n\nexport default function ConfettiBasicCannon() {\n   const confettiRef = useRef<ConfettiRef>(null)\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full max-w-lg flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Confetti\n         </span>\n\n         <Confetti\n            ref={confettiRef}\n            className=\"absolute left-0 top-0 z-0 size-full\"\n            onMouseEnter={() => {\n               confettiRef.current?.fire({})\n            }}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/confetti-random-direction.json b/apps/web/public/r/styles/default/confetti-random-direction.json
index 4d74bde1..4417ae17 100644
--- a/apps/web/public/r/styles/default/confetti-random-direction.json
+++ b/apps/web/public/r/styles/default/confetti-random-direction.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-random-direction",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-random-direction.tsx",
-      "content": "import { ConfettiButton } from '~/registry/default/ui/confetti'\n\nexport default function ConfettiButtonDemo() {\n   return (\n      <div className=\"relative\">\n         <ConfettiButton\n            options={{\n               get angle() {\n                  return Math.random() * 360\n               },\n            }}\n         >\n            Random Confetti 🎉\n         </ConfettiButton>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-random-direction.tsx",
+      "content": "import { ConfettiButton } from \"~/registry/default/ui/confetti\"\n\nexport default function ConfettiButtonDemo() {\n   return (\n      <div className=\"relative\">\n         <ConfettiButton\n            options={{\n               get angle() {\n                  return Math.random() * 360\n               },\n            }}\n         >\n            Random Confetti 🎉\n         </ConfettiButton>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/confetti-side-cannons.json b/apps/web/public/r/styles/default/confetti-side-cannons.json
index c71a6535..d2649358 100644
--- a/apps/web/public/r/styles/default/confetti-side-cannons.json
+++ b/apps/web/public/r/styles/default/confetti-side-cannons.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-side-cannons",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-side-cannons.tsx",
-      "content": "import confetti from 'canvas-confetti'\nimport { Button } from '~/components/ui/button'\n\nexport default function ConfettiSideCannons() {\n   const handleClick = () => {\n      const end = Date.now() + 3 * 1000 // 3 seconds\n      const colors = ['#a786ff', '#fd8bbc', '#eca184', '#f8deb1']\n\n      const frame = () => {\n         if (Date.now() > end)\n            return\n\n         confetti({\n            particleCount: 2,\n            angle: 60,\n            spread: 55,\n            startVelocity: 60,\n            origin: { x: 0, y: 0.5 },\n            colors,\n         })\n         confetti({\n            particleCount: 2,\n            angle: 120,\n            spread: 55,\n            startVelocity: 60,\n            origin: { x: 1, y: 0.5 },\n            colors,\n         })\n\n         requestAnimationFrame(frame)\n      }\n\n      frame()\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Side Cannons</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-side-cannons.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"~/components/ui/button\"\n\nexport default function ConfettiSideCannons() {\n   const handleClick = () => {\n      const end = Date.now() + 3 * 1000 // 3 seconds\n      const colors = [\"#a786ff\", \"#fd8bbc\", \"#eca184\", \"#f8deb1\"]\n\n      const frame = () => {\n         if (Date.now() > end) return\n\n         confetti({\n            particleCount: 2,\n            angle: 60,\n            spread: 55,\n            startVelocity: 60,\n            origin: { x: 0, y: 0.5 },\n            colors,\n         })\n         confetti({\n            particleCount: 2,\n            angle: 120,\n            spread: 55,\n            startVelocity: 60,\n            origin: { x: 1, y: 0.5 },\n            colors,\n         })\n\n         requestAnimationFrame(frame)\n      }\n\n      frame()\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Side Cannons</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/confetti-stars.json b/apps/web/public/r/styles/default/confetti-stars.json
index 04920b41..a69daa1f 100644
--- a/apps/web/public/r/styles/default/confetti-stars.json
+++ b/apps/web/public/r/styles/default/confetti-stars.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-stars",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-stars.tsx",
-      "content": "import confetti from 'canvas-confetti'\nimport { Button } from '~/components/ui/button'\n\nexport default function ConfettiStars() {\n   const handleClick = () => {\n      const defaults = {\n         spread: 360,\n         ticks: 50,\n         gravity: 0,\n         decay: 0.94,\n         startVelocity: 30,\n         colors: ['#FFE400', '#FFBD00', '#E89400', '#FFCA6C', '#FDFFB8'],\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 40,\n            scalar: 1.2,\n            shapes: ['star'],\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 10,\n            scalar: 0.75,\n            shapes: ['circle'],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Stars</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-stars.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"~/components/ui/button\"\n\nexport default function ConfettiStars() {\n   const handleClick = () => {\n      const defaults = {\n         spread: 360,\n         ticks: 50,\n         gravity: 0,\n         decay: 0.94,\n         startVelocity: 30,\n         colors: [\"#FFE400\", \"#FFBD00\", \"#E89400\", \"#FFCA6C\", \"#FDFFB8\"],\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 40,\n            scalar: 1.2,\n            shapes: [\"star\"],\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 10,\n            scalar: 0.75,\n            shapes: [\"circle\"],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Stars</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/confetti.json b/apps/web/public/r/styles/default/confetti.json
index 3d9444a7..5c324530 100644
--- a/apps/web/public/r/styles/default/confetti.json
+++ b/apps/web/public/r/styles/default/confetti.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "canvas-confetti",
     "@types/canvas-confetti"
@@ -8,8 +10,8 @@
   "files": [
     {
       "path": "ui/confetti.tsx",
-      "content": "'use client'\nimport confetti from 'canvas-confetti'\nimport type { ReactNode } from 'react'\nimport React, { createContext, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react'\n\nimport type {\n   GlobalOptions as ConfettiGlobalOptions,\n   CreateTypes as ConfettiInstance,\n   Options as ConfettiOptions,\n} from 'canvas-confetti'\nimport { Button } from '~/components/ui/button'\nimport type { ButtonProps } from '~/components/ui/button'\n\ninterface Api {\n   fire: (options?: ConfettiOptions) => void\n}\n\ntype Props = React.ComponentPropsWithRef<'canvas'> & {\n   options?: ConfettiOptions\n   globalOptions?: ConfettiGlobalOptions\n   manualstart?: boolean\n   children?: ReactNode\n}\n\nexport type ConfettiRef = Api | null\n\nconst ConfettiContext = createContext<Api>({} as Api)\n\nconst Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {\n   const {\n      options,\n      globalOptions = { resize: true, useWorker: true },\n      manualstart = false,\n      children,\n      ...rest\n   } = props\n   const instanceRef = useRef<ConfettiInstance | null>(null) // confetti instance\n\n   const canvasRef = useCallback(\n      // https://react.dev/reference/react-dom/components/common#ref-callback\n      // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs\n      (node: HTMLCanvasElement) => {\n         if (node !== null) {\n            // <canvas> is mounted => create the confetti instance\n            if (instanceRef.current)\n               return // if not already created\n            instanceRef.current = confetti.create(node, {\n               ...globalOptions,\n               resize: true,\n            })\n         }\n         else {\n            // <canvas> is unmounted => reset and destroy instanceRef\n            if (instanceRef.current) {\n               instanceRef.current.reset()\n               instanceRef.current = null\n            }\n         }\n      },\n      [globalOptions],\n   )\n\n   // `fire` is a function that calls the instance() with `opts` merged with `options`\n   const fire = useCallback(\n      (opts = {}) => instanceRef.current?.({ ...options, ...opts }),\n      [options],\n   )\n\n   const api = useMemo(\n      () => ({\n         fire,\n      }),\n      [fire],\n   )\n\n   useImperativeHandle(ref, () => api, [api])\n\n   useEffect(() => {\n      if (!manualstart)\n         fire()\n   }, [manualstart, fire])\n\n   return (\n      <ConfettiContext.Provider value={api}>\n         <canvas ref={canvasRef} {...rest} />\n         {children}\n      </ConfettiContext.Provider>\n   )\n})\n\ninterface ConfettiButtonProps extends ButtonProps {\n   options?: ConfettiOptions &\n   ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }\n   children?: React.ReactNode\n}\n\nfunction ConfettiButton({ options, children, ...props }: ConfettiButtonProps) {\n   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      const rect = event.currentTarget.getBoundingClientRect()\n      const x = rect.left + rect.width / 2\n      const y = rect.top + rect.height / 2\n      confetti({\n         ...options,\n         origin: {\n            x: x / window.innerWidth,\n            y: y / window.innerHeight,\n         },\n      })\n   }\n\n   return (\n      <Button onClick={handleClick} {...props}>\n         {children}\n      </Button>\n   )\n}\n\nexport { Confetti, ConfettiButton }\n\nexport default Confetti\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport confetti from \"canvas-confetti\"\nimport type { ReactNode } from \"react\"\nimport type React from \"react\"\nimport {\n   createContext,\n   forwardRef,\n   useCallback,\n   useEffect,\n   useImperativeHandle,\n   useMemo,\n   useRef,\n} from \"react\"\n\nimport type {\n   GlobalOptions as ConfettiGlobalOptions,\n   CreateTypes as ConfettiInstance,\n   Options as ConfettiOptions,\n} from \"canvas-confetti\"\nimport { Button } from \"~/components/ui/button\"\nimport type { ButtonProps } from \"~/components/ui/button\"\n\ninterface Api {\n   fire: (options?: ConfettiOptions) => void\n}\n\ntype Props = React.ComponentPropsWithRef<\"canvas\"> & {\n   options?: ConfettiOptions\n   globalOptions?: ConfettiGlobalOptions\n   manualstart?: boolean\n   children?: ReactNode\n}\n\nexport type ConfettiRef = Api | null\n\nconst ConfettiContext = createContext<Api>({} as Api)\n\nconst Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {\n   const {\n      options,\n      globalOptions = { resize: true, useWorker: true },\n      manualstart = false,\n      children,\n      ...rest\n   } = props\n   const instanceRef = useRef<ConfettiInstance | null>(null) // confetti instance\n\n   const canvasRef = useCallback(\n      // https://react.dev/reference/react-dom/components/common#ref-callback\n      // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs\n      (node: HTMLCanvasElement) => {\n         if (node !== null) {\n            // <canvas> is mounted => create the confetti instance\n            if (instanceRef.current) return // if not already created\n            instanceRef.current = confetti.create(node, {\n               ...globalOptions,\n               resize: true,\n            })\n         } else {\n            // <canvas> is unmounted => reset and destroy instanceRef\n            if (instanceRef.current) {\n               instanceRef.current.reset()\n               instanceRef.current = null\n            }\n         }\n      },\n      [globalOptions],\n   )\n\n   // `fire` is a function that calls the instance() with `opts` merged with `options`\n   const fire = useCallback(\n      (opts = {}) => instanceRef.current?.({ ...options, ...opts }),\n      [options],\n   )\n\n   const api = useMemo(\n      () => ({\n         fire,\n      }),\n      [fire],\n   )\n\n   useImperativeHandle(ref, () => api, [api])\n\n   useEffect(() => {\n      if (!manualstart) fire()\n   }, [manualstart, fire])\n\n   return (\n      <ConfettiContext.Provider value={api}>\n         <canvas ref={canvasRef} {...rest} />\n         {children}\n      </ConfettiContext.Provider>\n   )\n})\n\ninterface ConfettiButtonProps extends ButtonProps {\n   options?: ConfettiOptions &\n      ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }\n   children?: React.ReactNode\n}\n\nfunction ConfettiButton({ options, children, ...props }: ConfettiButtonProps) {\n   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      const rect = event.currentTarget.getBoundingClientRect()\n      const x = rect.left + rect.width / 2\n      const y = rect.top + rect.height / 2\n      confetti({\n         ...options,\n         origin: {\n            x: x / window.innerWidth,\n            y: y / window.innerHeight,\n         },\n      })\n   }\n\n   return (\n      <Button onClick={handleClick} {...props}>\n         {children}\n      </Button>\n   )\n}\n\nexport { Confetti, ConfettiButton }\n\nexport default Confetti\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/context-menu-demo.json b/apps/web/public/r/styles/default/context-menu-demo.json
index 22407bf6..9df761bd 100644
--- a/apps/web/public/r/styles/default/context-menu-demo.json
+++ b/apps/web/public/r/styles/default/context-menu-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "context-menu-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "context-menu"
   ],
   "files": [
     {
-      "path": "example/context-menu-demo.tsx",
-      "content": "import {\n   ContextMenu,\n   ContextMenuCheckboxItem,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuLabel,\n   ContextMenuRadioGroup,\n   ContextMenuRadioItem,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuTrigger,\n} from '~/registry/default/ui/context-menu'\n\nexport default function ContextMenuDemo() {\n   return (\n      <ContextMenu>\n         <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n            Right click here\n         </ContextMenuTrigger>\n         <ContextMenuContent className=\"w-64\">\n            <ContextMenuItem inset>\n               Back\n               <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset disabled>\n               Forward\n               <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset>\n               Reload\n               <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSub>\n               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n               <ContextMenuSubContent className=\"w-48\">\n                  <ContextMenuItem>\n                     Save Page As...\n                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n                  </ContextMenuItem>\n                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                  <ContextMenuItem>Name Window...</ContextMenuItem>\n                  <ContextMenuSeparator />\n                  <ContextMenuItem>Developer Tools</ContextMenuItem>\n               </ContextMenuSubContent>\n            </ContextMenuSub>\n            <ContextMenuSeparator />\n            <ContextMenuCheckboxItem checked>\n               Show Bookmarks Bar\n               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuSeparator />\n            <ContextMenuRadioGroup value=\"pedro\">\n               <ContextMenuLabel inset>People</ContextMenuLabel>\n               <ContextMenuSeparator />\n               <ContextMenuRadioItem value=\"pedro\">\n                  Pedro Duarte\n               </ContextMenuRadioItem>\n               <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n         </ContextMenuContent>\n      </ContextMenu>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/context-menu-demo.tsx",
+      "content": "import {\n   ContextMenu,\n   ContextMenuCheckboxItem,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuLabel,\n   ContextMenuRadioGroup,\n   ContextMenuRadioItem,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuTrigger,\n} from \"~/registry/default/ui/context-menu\"\n\nexport default function ContextMenuDemo() {\n   return (\n      <ContextMenu>\n         <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n            Right click here\n         </ContextMenuTrigger>\n         <ContextMenuContent className=\"w-64\">\n            <ContextMenuItem inset>\n               Back\n               <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset disabled>\n               Forward\n               <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset>\n               Reload\n               <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSub>\n               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n               <ContextMenuSubContent className=\"w-48\">\n                  <ContextMenuItem>\n                     Save Page As...\n                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n                  </ContextMenuItem>\n                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                  <ContextMenuItem>Name Window...</ContextMenuItem>\n                  <ContextMenuSeparator />\n                  <ContextMenuItem>Developer Tools</ContextMenuItem>\n               </ContextMenuSubContent>\n            </ContextMenuSub>\n            <ContextMenuSeparator />\n            <ContextMenuCheckboxItem checked>\n               Show Bookmarks Bar\n               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuSeparator />\n            <ContextMenuRadioGroup value=\"pedro\">\n               <ContextMenuLabel inset>People</ContextMenuLabel>\n               <ContextMenuSeparator />\n               <ContextMenuRadioItem value=\"pedro\">\n                  Pedro Duarte\n               </ContextMenuRadioItem>\n               <ContextMenuRadioItem value=\"colm\">\n                  Colm Tuite\n               </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n         </ContextMenuContent>\n      </ContextMenu>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/context-menu.json b/apps/web/public/r/styles/default/context-menu.json
index eaaac776..bd298a85 100644
--- a/apps/web/public/r/styles/default/context-menu.json
+++ b/apps/web/public/r/styles/default/context-menu.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "context-menu",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-context-menu"
   ],
   "files": [
     {
       "path": "ui/context-menu.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <ContextMenuPrimitive.SubTrigger\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n   </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.SubContent\n      ref={ref}\n      className={ny(\n         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n         ref={ref}\n         className={ny(\n            'bg-popover text-popover-foreground animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',\n            className,\n         )}\n         {...props}\n      />\n   </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <ContextMenuPrimitive.Item\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <ContextMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <ContextMenuPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName\n  = ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <ContextMenuPrimitive.RadioItem\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <ContextMenuPrimitive.ItemIndicator>\n            <Circle className=\"size-2 fill-current\" />\n         </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <ContextMenuPrimitive.Label\n      ref={ref}\n      className={ny(\n         'text-foreground px-2 py-1.5 text-sm font-semibold',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.Separator\n      ref={ref}\n      className={ny('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n   />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nfunction ContextMenuShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\n            'text-muted-foreground ml-auto text-xs tracking-widest',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nContextMenuShortcut.displayName = 'ContextMenuShortcut'\n\nexport {\n   ContextMenu,\n   ContextMenuTrigger,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuCheckboxItem,\n   ContextMenuRadioItem,\n   ContextMenuLabel,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuGroup,\n   ContextMenuPortal,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuRadioGroup,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <ContextMenuPrimitive.SubTrigger\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n   </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.SubContent\n      ref={ref}\n      className={ny(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md\",\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n         ref={ref}\n         className={ny(\n            \"bg-popover text-popover-foreground animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md\",\n            className,\n         )}\n         {...props}\n      />\n   </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <ContextMenuPrimitive.Item\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <ContextMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <ContextMenuPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n   ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <ContextMenuPrimitive.RadioItem\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <ContextMenuPrimitive.ItemIndicator>\n            <Circle className=\"size-2 fill-current\" />\n         </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <ContextMenuPrimitive.Label\n      ref={ref}\n      className={ny(\n         \"text-foreground px-2 py-1.5 text-sm font-semibold\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.Separator\n      ref={ref}\n      className={ny(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nfunction ContextMenuShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\n            \"text-muted-foreground ml-auto text-xs tracking-widest\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n   ContextMenu,\n   ContextMenuTrigger,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuCheckboxItem,\n   ContextMenuRadioItem,\n   ContextMenuLabel,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuGroup,\n   ContextMenuPortal,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuRadioGroup,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/cool-mode-custom.json b/apps/web/public/r/styles/default/cool-mode-custom.json
index 2af31e4b..35255250 100644
--- a/apps/web/public/r/styles/default/cool-mode-custom.json
+++ b/apps/web/public/r/styles/default/cool-mode-custom.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "cool-mode-custom",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/cool-mode-custom.tsx",
-      "content": "import React from 'react'\nimport { Button } from '~/components/ui/button'\nimport { CoolMode } from '~/registry/default/ui/cool-mode'\n\nexport default function CoolModeCustom() {\n   return (\n      <div className=\"relative justify-center\">\n         <CoolMode\n            options={{\n               particle:\n            'https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg',\n            }}\n         >\n            <Button>Click Me!</Button>\n         </CoolMode>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/cool-mode-custom.tsx",
+      "content": "import React from \"react\"\nimport { Button } from \"~/components/ui/button\"\nimport { CoolMode } from \"~/registry/default/ui/cool-mode\"\n\nexport default function CoolModeCustom() {\n   return (\n      <div className=\"relative justify-center\">\n         <CoolMode\n            options={{\n               particle:\n                  \"https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg\",\n            }}\n         >\n            <Button>Click Me!</Button>\n         </CoolMode>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/cool-mode-demo.json b/apps/web/public/r/styles/default/cool-mode-demo.json
index e86f4788..e5544134 100644
--- a/apps/web/public/r/styles/default/cool-mode-demo.json
+++ b/apps/web/public/r/styles/default/cool-mode-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "cool-mode-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/cool-mode-demo.tsx",
-      "content": "import React from 'react'\nimport { CoolMode } from '~/registry/default/ui/cool-mode'\nimport { Button } from '~/components/ui/button'\n\nexport default function CoolModeDemo() {\n   return (\n      <div className=\"relative justify-center\">\n         <CoolMode>\n            <Button>Click Me!</Button>\n         </CoolMode>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/cool-mode-demo.tsx",
+      "content": "import React from \"react\"\nimport { Button } from \"~/components/ui/button\"\nimport { CoolMode } from \"~/registry/default/ui/cool-mode\"\n\nexport default function CoolModeDemo() {\n   return (\n      <div className=\"relative justify-center\">\n         <CoolMode>\n            <Button>Click Me!</Button>\n         </CoolMode>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/cool-mode.json b/apps/web/public/r/styles/default/cool-mode.json
index f626e17e..c0f17c0d 100644
--- a/apps/web/public/r/styles/default/cool-mode.json
+++ b/apps/web/public/r/styles/default/cool-mode.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "cool-mode",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/cool-mode.tsx",
-      "content": "'use client'\nimport type { ReactNode } from 'react'\nimport React, { useEffect, useRef } from 'react'\n\nexport interface BaseParticle {\n   element: HTMLElement | SVGSVGElement\n   left: number\n   size: number\n   top: number\n}\n\nexport interface BaseParticleOptions {\n   particle?: string\n   size?: number\n}\n\nexport interface CoolParticle extends BaseParticle {\n   direction: number\n   speedHorz: number\n   speedUp: number\n   spinSpeed: number\n   spinVal: number\n}\n\nexport interface CoolParticleOptions extends BaseParticleOptions {\n   particleCount?: number\n   speedHorz?: number\n   speedUp?: number\n}\n\nfunction getContainer() {\n   const id = '_coolMode_effect'\n   const existingContainer = document.getElementById(id)\n\n   if (existingContainer)\n      return existingContainer\n\n   const container = document.createElement('div')\n   container.setAttribute('id', id)\n   container.setAttribute(\n      'style',\n      'overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647',\n   )\n\n   document.body.appendChild(container)\n\n   return container\n}\n\nlet instanceCounter = 0\n\nfunction applyParticleEffect(\n   element: HTMLElement,\n   options?: CoolParticleOptions,\n): () => void {\n   instanceCounter++\n\n   const defaultParticle = 'circle'\n   const particleType = options?.particle || defaultParticle\n   const sizes = [15, 20, 25, 35, 45]\n   const limit = 45\n\n   let particles: CoolParticle[] = []\n   let autoAddParticle = false\n   let mouseX = 0\n   let mouseY = 0\n\n   const container = getContainer()\n\n   function generateParticle() {\n      const size\n      = options?.size || sizes[Math.floor(Math.random() * sizes.length)]\n      const speedHorz = options?.speedHorz || Math.random() * 10\n      const speedUp = options?.speedUp || Math.random() * 25\n      const spinVal = Math.random() * 360\n      const spinSpeed = Math.random() * 35 * (Math.random() <= 0.5 ? -1 : 1)\n      const top = mouseY - size / 2\n      const left = mouseX - size / 2\n      const direction = Math.random() <= 0.5 ? -1 : 1\n\n      const particle = document.createElement('div')\n\n      if (particleType === 'circle') {\n         const svgNS = 'http://www.w3.org/2000/svg'\n         const circleSVG = document.createElementNS(svgNS, 'svg')\n         const circle = document.createElementNS(svgNS, 'circle')\n         circle.setAttributeNS(null, 'cx', (size / 2).toString())\n         circle.setAttributeNS(null, 'cy', (size / 2).toString())\n         circle.setAttributeNS(null, 'r', (size / 2).toString())\n         circle.setAttributeNS(\n            null,\n            'fill',\n        `hsl(${Math.random() * 360}, 70%, 50%)`,\n         )\n\n         circleSVG.appendChild(circle)\n         circleSVG.setAttribute('width', size.toString())\n         circleSVG.setAttribute('height', size.toString())\n\n         particle.appendChild(circleSVG)\n      }\n      else {\n         particle.innerHTML = `<img src=\"${particleType}\" width=\"${size}\" height=\"${size}\" style=\"border-radius: 50%\">`\n      }\n\n      particle.style.position = 'absolute'\n      particle.style.transform = `translate3d(${left}px, ${top}px, 0px) rotate(${spinVal}deg)`\n\n      container.appendChild(particle)\n\n      particles.push({\n         direction,\n         element: particle,\n         left,\n         size,\n         speedHorz,\n         speedUp,\n         spinSpeed,\n         spinVal,\n         top,\n      })\n   }\n\n   function refreshParticles() {\n      particles.forEach((p) => {\n         p.left = p.left - p.speedHorz * p.direction\n         p.top = p.top - p.speedUp\n         p.speedUp = Math.min(p.size, p.speedUp - 1)\n         p.spinVal = p.spinVal + p.spinSpeed\n\n         if (\n            p.top\n            >= Math.max(window.innerHeight, document.body.clientHeight) + p.size\n         ) {\n            particles = particles.filter(o => o !== p)\n            p.element.remove()\n         }\n\n         p.element.setAttribute(\n            'style',\n            [\n               'position:absolute',\n               'will-change:transform',\n          `top:${p.top}px`,\n          `left:${p.left}px`,\n          `transform:rotate(${p.spinVal}deg)`,\n            ].join(';'),\n         )\n      })\n   }\n\n   let animationFrame: number | undefined\n\n   let lastParticleTimestamp = 0\n   const particleGenerationDelay = 30\n\n   function loop() {\n      const currentTime = performance.now()\n      if (\n         autoAddParticle\n         && particles.length < limit\n         && currentTime - lastParticleTimestamp > particleGenerationDelay\n      ) {\n         generateParticle()\n         lastParticleTimestamp = currentTime\n      }\n\n      refreshParticles()\n      animationFrame = requestAnimationFrame(loop)\n   }\n\n   loop()\n\n   const isTouchInteraction = 'ontouchstart' in window\n\n   const tap = isTouchInteraction ? 'touchstart' : 'mousedown'\n   const tapEnd = isTouchInteraction ? 'touchend' : 'mouseup'\n   const move = isTouchInteraction ? 'touchmove' : 'mousemove'\n\n   const updateMousePosition = (e: MouseEvent | TouchEvent) => {\n      if ('touches' in e) {\n         mouseX = e.touches?.[0].clientX\n         mouseY = e.touches?.[0].clientY\n      }\n      else {\n         mouseX = e.clientX\n         mouseY = e.clientY\n      }\n   }\n\n   const tapHandler = (e: MouseEvent | TouchEvent) => {\n      updateMousePosition(e)\n      autoAddParticle = true\n   }\n\n   const disableAutoAddParticle = () => {\n      autoAddParticle = false\n   }\n\n   element.addEventListener(move, updateMousePosition, { passive: true })\n   element.addEventListener(tap, tapHandler, { passive: true })\n   element.addEventListener(tapEnd, disableAutoAddParticle, { passive: true })\n   element.addEventListener('mouseleave', disableAutoAddParticle, {\n      passive: true,\n   })\n\n   return () => {\n      element.removeEventListener(move, updateMousePosition)\n      element.removeEventListener(tap, tapHandler)\n      element.removeEventListener(tapEnd, disableAutoAddParticle)\n      element.removeEventListener('mouseleave', disableAutoAddParticle)\n\n      const interval = setInterval(() => {\n         if (animationFrame && particles.length === 0) {\n            cancelAnimationFrame(animationFrame)\n            clearInterval(interval)\n\n            if (--instanceCounter === 0)\n               container.remove()\n         }\n      }, 500)\n   }\n}\n\ninterface CoolModeProps {\n   children: ReactNode\n   options?: CoolParticleOptions\n}\n\nexport const CoolMode: React.FC<CoolModeProps> = ({ children, options }) => {\n   const ref = useRef<HTMLElement>(null)\n\n   useEffect(() => {\n      if (ref.current)\n         return applyParticleEffect(ref.current, options)\n   }, [options])\n\n   return React.cloneElement(children as React.ReactElement, { ref })\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport type { ReactNode } from \"react\"\nimport React, { useEffect, useRef } from \"react\"\n\nexport interface BaseParticle {\n   element: HTMLElement | SVGSVGElement\n   left: number\n   size: number\n   top: number\n}\n\nexport interface BaseParticleOptions {\n   particle?: string\n   size?: number\n}\n\nexport interface CoolParticle extends BaseParticle {\n   direction: number\n   speedHorz: number\n   speedUp: number\n   spinSpeed: number\n   spinVal: number\n}\n\nexport interface CoolParticleOptions extends BaseParticleOptions {\n   particleCount?: number\n   speedHorz?: number\n   speedUp?: number\n}\n\nfunction getContainer() {\n   const id = \"_coolMode_effect\"\n   const existingContainer = document.getElementById(id)\n\n   if (existingContainer) return existingContainer\n\n   const container = document.createElement(\"div\")\n   container.setAttribute(\"id\", id)\n   container.setAttribute(\n      \"style\",\n      \"overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647\",\n   )\n\n   document.body.appendChild(container)\n\n   return container\n}\n\nlet instanceCounter = 0\n\nfunction applyParticleEffect(\n   element: HTMLElement,\n   options?: CoolParticleOptions,\n): () => void {\n   instanceCounter++\n\n   const defaultParticle = \"circle\"\n   const particleType = options?.particle || defaultParticle\n   const sizes = [15, 20, 25, 35, 45]\n   const limit = 45\n\n   let particles: CoolParticle[] = []\n   let autoAddParticle = false\n   let mouseX = 0\n   let mouseY = 0\n\n   const container = getContainer()\n\n   function generateParticle() {\n      const size =\n         options?.size || sizes[Math.floor(Math.random() * sizes.length)]\n      const speedHorz = options?.speedHorz || Math.random() * 10\n      const speedUp = options?.speedUp || Math.random() * 25\n      const spinVal = Math.random() * 360\n      const spinSpeed = Math.random() * 35 * (Math.random() <= 0.5 ? -1 : 1)\n      const top = mouseY - size / 2\n      const left = mouseX - size / 2\n      const direction = Math.random() <= 0.5 ? -1 : 1\n\n      const particle = document.createElement(\"div\")\n\n      if (particleType === \"circle\") {\n         const svgNS = \"http://www.w3.org/2000/svg\"\n         const circleSVG = document.createElementNS(svgNS, \"svg\")\n         const circle = document.createElementNS(svgNS, \"circle\")\n         circle.setAttributeNS(null, \"cx\", (size / 2).toString())\n         circle.setAttributeNS(null, \"cy\", (size / 2).toString())\n         circle.setAttributeNS(null, \"r\", (size / 2).toString())\n         circle.setAttributeNS(\n            null,\n            \"fill\",\n            `hsl(${Math.random() * 360}, 70%, 50%)`,\n         )\n\n         circleSVG.appendChild(circle)\n         circleSVG.setAttribute(\"width\", size.toString())\n         circleSVG.setAttribute(\"height\", size.toString())\n\n         particle.appendChild(circleSVG)\n      } else {\n         particle.innerHTML = `<img src=\"${particleType}\" width=\"${size}\" height=\"${size}\" style=\"border-radius: 50%\">`\n      }\n\n      particle.style.position = \"absolute\"\n      particle.style.transform = `translate3d(${left}px, ${top}px, 0px) rotate(${spinVal}deg)`\n\n      container.appendChild(particle)\n\n      particles.push({\n         direction,\n         element: particle,\n         left,\n         size,\n         speedHorz,\n         speedUp,\n         spinSpeed,\n         spinVal,\n         top,\n      })\n   }\n\n   function refreshParticles() {\n      particles.forEach((p) => {\n         p.left = p.left - p.speedHorz * p.direction\n         p.top = p.top - p.speedUp\n         p.speedUp = Math.min(p.size, p.speedUp - 1)\n         p.spinVal = p.spinVal + p.spinSpeed\n\n         if (\n            p.top >=\n            Math.max(window.innerHeight, document.body.clientHeight) + p.size\n         ) {\n            particles = particles.filter((o) => o !== p)\n            p.element.remove()\n         }\n\n         p.element.setAttribute(\n            \"style\",\n            [\n               \"position:absolute\",\n               \"will-change:transform\",\n               `top:${p.top}px`,\n               `left:${p.left}px`,\n               `transform:rotate(${p.spinVal}deg)`,\n            ].join(\";\"),\n         )\n      })\n   }\n\n   let animationFrame: number | undefined\n\n   let lastParticleTimestamp = 0\n   const particleGenerationDelay = 30\n\n   function loop() {\n      const currentTime = performance.now()\n      if (\n         autoAddParticle &&\n         particles.length < limit &&\n         currentTime - lastParticleTimestamp > particleGenerationDelay\n      ) {\n         generateParticle()\n         lastParticleTimestamp = currentTime\n      }\n\n      refreshParticles()\n      animationFrame = requestAnimationFrame(loop)\n   }\n\n   loop()\n\n   const isTouchInteraction = \"ontouchstart\" in window\n\n   const tap = isTouchInteraction ? \"touchstart\" : \"mousedown\"\n   const tapEnd = isTouchInteraction ? \"touchend\" : \"mouseup\"\n   const move = isTouchInteraction ? \"touchmove\" : \"mousemove\"\n\n   const updateMousePosition = (e: MouseEvent | TouchEvent) => {\n      if (\"touches\" in e) {\n         mouseX = e.touches?.[0].clientX\n         mouseY = e.touches?.[0].clientY\n      } else {\n         mouseX = e.clientX\n         mouseY = e.clientY\n      }\n   }\n\n   const tapHandler = (e: MouseEvent | TouchEvent) => {\n      updateMousePosition(e)\n      autoAddParticle = true\n   }\n\n   const disableAutoAddParticle = () => {\n      autoAddParticle = false\n   }\n\n   element.addEventListener(move, updateMousePosition, { passive: true })\n   element.addEventListener(tap, tapHandler, { passive: true })\n   element.addEventListener(tapEnd, disableAutoAddParticle, { passive: true })\n   element.addEventListener(\"mouseleave\", disableAutoAddParticle, {\n      passive: true,\n   })\n\n   return () => {\n      element.removeEventListener(move, updateMousePosition)\n      element.removeEventListener(tap, tapHandler)\n      element.removeEventListener(tapEnd, disableAutoAddParticle)\n      element.removeEventListener(\"mouseleave\", disableAutoAddParticle)\n\n      const interval = setInterval(() => {\n         if (animationFrame && particles.length === 0) {\n            cancelAnimationFrame(animationFrame)\n            clearInterval(interval)\n\n            if (--instanceCounter === 0) container.remove()\n         }\n      }, 500)\n   }\n}\n\ninterface CoolModeProps {\n   children: ReactNode\n   options?: CoolParticleOptions\n}\n\nexport const CoolMode: React.FC<CoolModeProps> = ({ children, options }) => {\n   const ref = useRef<HTMLElement>(null)\n\n   useEffect(() => {\n      if (ref.current) return applyParticleEffect(ref.current, options)\n   }, [options])\n\n   return React.cloneElement(children as React.ReactElement, { ref })\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/data-table-demo.json b/apps/web/public/r/styles/default/data-table-demo.json
index a1f2a43c..a0171823 100644
--- a/apps/web/public/r/styles/default/data-table-demo.json
+++ b/apps/web/public/r/styles/default/data-table-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "data-table-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "data-table"
   ],
   "files": [
     {
-      "path": "example/data-table-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport type {\n   ColumnDef,\n   ColumnFiltersState,\n   SortingState,\n   VisibilityState,\n} from '@tanstack/react-table'\nimport {\n   flexRender,\n   getCoreRowModel,\n   getFilteredRowModel,\n   getPaginationRowModel,\n   getSortedRowModel,\n   useReactTable,\n} from '@tanstack/react-table'\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from 'lucide-react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport { Checkbox } from '~/registry/default/ui/checkbox'\nimport {\n   DropdownMenu,\n   DropdownMenuCheckboxItem,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport { Input } from '~/registry/default/ui/input'\nimport {\n   Table,\n   TableBody,\n   TableCell,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from '~/registry/default/ui/table'\n\nconst data: Payment[] = [\n   {\n      id: 'm5gr84i9',\n      amount: 316,\n      status: 'success',\n      email: 'ken99@yahoo.com',\n   },\n   {\n      id: '3u1reuv4',\n      amount: 242,\n      status: 'success',\n      email: 'Abe45@gmail.com',\n   },\n   {\n      id: 'derv1ws0',\n      amount: 837,\n      status: 'processing',\n      email: 'Monserrat44@gmail.com',\n   },\n   {\n      id: '5kma53ae',\n      amount: 874,\n      status: 'success',\n      email: 'Silas22@gmail.com',\n   },\n   {\n      id: 'bhqecj4p',\n      amount: 721,\n      status: 'failed',\n      email: 'carmella@hotmail.com',\n   },\n]\n\nexport interface Payment {\n   id: string\n   amount: number\n   status: 'pending' | 'processing' | 'success' | 'failed'\n   email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n   {\n      id: 'select',\n      header: ({ table }) => (\n         <Checkbox\n            checked={\n               table.getIsAllPageRowsSelected()\n               || (table.getIsSomePageRowsSelected() && 'indeterminate')\n            }\n            onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}\n            aria-label=\"Select all\"\n         />\n      ),\n      cell: ({ row }) => (\n         <Checkbox\n            checked={row.getIsSelected()}\n            onCheckedChange={value => row.toggleSelected(!!value)}\n            aria-label=\"Select row\"\n         />\n      ),\n      enableSorting: false,\n      enableHiding: false,\n   },\n   {\n      accessorKey: 'status',\n      header: 'Status',\n      cell: ({ row }) => (\n         <div className=\"capitalize\">{row.getValue('status')}</div>\n      ),\n   },\n   {\n      accessorKey: 'email',\n      header: ({ column }) => {\n         return (\n            <Button\n               variant=\"ghost\"\n               onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}\n            >\n               Email\n               <ArrowUpDown className=\"ml-2 size-4\" />\n            </Button>\n         )\n      },\n      cell: ({ row }) => <div className=\"lowercase\">{row.getValue('email')}</div>,\n   },\n   {\n      accessorKey: 'amount',\n      header: () => <div className=\"text-right\">Amount</div>,\n      cell: ({ row }) => {\n         const amount = Number.parseFloat(row.getValue('amount'))\n\n         // Format the amount as a dollar amount\n         const formatted = new Intl.NumberFormat('en-US', {\n            style: 'currency',\n            currency: 'USD',\n         }).format(amount)\n\n         return <div className=\"text-right font-medium\">{formatted}</div>\n      },\n   },\n   {\n      id: 'actions',\n      enableHiding: false,\n      cell: ({ row }) => {\n         const payment = row.original\n\n         return (\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" className=\"size-8 p-0\">\n                     <span className=\"sr-only\">Open menu</span>\n                     <MoreHorizontal className=\"size-4\" />\n                  </Button>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                  <DropdownMenuItem\n                     onClick={() => navigator.clipboard.writeText(payment.id)}\n                  >\n                     Copy payment ID\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>View customer</DropdownMenuItem>\n                  <DropdownMenuItem>View payment details</DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         )\n      },\n   },\n]\n\nexport default function DataTableDemo() {\n   const [sorting, setSorting] = React.useState<SortingState>([])\n   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n      [],\n   )\n   const [columnVisibility, setColumnVisibility]\n    = React.useState<VisibilityState>({})\n   const [rowSelection, setRowSelection] = React.useState({})\n\n   const table = useReactTable({\n      data,\n      columns,\n      onSortingChange: setSorting,\n      onColumnFiltersChange: setColumnFilters,\n      getCoreRowModel: getCoreRowModel(),\n      getPaginationRowModel: getPaginationRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      onColumnVisibilityChange: setColumnVisibility,\n      onRowSelectionChange: setRowSelection,\n      state: {\n         sorting,\n         columnFilters,\n         columnVisibility,\n         rowSelection,\n      },\n   })\n\n   return (\n      <div className=\"w-full\">\n         <div className=\"flex items-center py-4\">\n            <Input\n               placeholder=\"Filter emails...\"\n               value={(table.getColumn('email')?.getFilterValue() as string) ?? ''}\n               onChange={event =>\n                  table.getColumn('email')?.setFilterValue(event.target.value)}\n               className=\"max-w-sm\"\n            />\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" className=\"ml-auto\">\n                     Columns\n                     {' '}\n                     <ChevronDown className=\"ml-2 size-4\" />\n                  </Button>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent align=\"end\">\n                  {table\n                     .getAllColumns()\n                     .filter(column => column.getCanHide())\n                     .map((column) => {\n                        return (\n                           <DropdownMenuCheckboxItem\n                              key={column.id}\n                              className=\"capitalize\"\n                              checked={column.getIsVisible()}\n                              onCheckedChange={value =>\n                                 column.toggleVisibility(!!value)}\n                           >\n                              {column.id}\n                           </DropdownMenuCheckboxItem>\n                        )\n                     })}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </div>\n         <div className=\"rounded-md border\">\n            <Table>\n               <TableHeader>\n                  {table.getHeaderGroups().map(headerGroup => (\n                     <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                           return (\n                              <TableHead key={header.id}>\n                                 {header.isPlaceholder\n                                    ? null\n                                    : flexRender(\n                                       header.column.columnDef.header,\n                                       header.getContext(),\n                                    )}\n                              </TableHead>\n                           )\n                        })}\n                     </TableRow>\n                  ))}\n               </TableHeader>\n               <TableBody>\n                  {table.getRowModel().rows?.length\n                     ? (\n                           table.getRowModel().rows.map(row => (\n                              <TableRow\n                                 key={row.id}\n                                 data-state={row.getIsSelected() && 'selected'}\n                              >\n                                 {row.getVisibleCells().map(cell => (\n                                    <TableCell key={cell.id}>\n                                       {flexRender(\n                                          cell.column.columnDef.cell,\n                                          cell.getContext(),\n                                       )}\n                                    </TableCell>\n                                 ))}\n                              </TableRow>\n                           ))\n                        )\n                     : (\n                           <TableRow>\n                              <TableCell\n                                 colSpan={columns.length}\n                                 className=\"h-24 text-center\"\n                              >\n                                 No results.\n                              </TableCell>\n                           </TableRow>\n                        )}\n               </TableBody>\n            </Table>\n         </div>\n         <div className=\"flex items-center justify-end space-x-2 py-4\">\n            <div className=\"text-muted-foreground flex-1 text-sm\">\n               {table.getFilteredSelectedRowModel().rows.length}\n               {' '}\n               of\n               {' '}\n               {table.getFilteredRowModel().rows.length}\n               {' '}\n               row(s) selected.\n            </div>\n            <div className=\"space-x-2\">\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n               >\n                  Previous\n               </Button>\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n               >\n                  Next\n               </Button>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/data-table-demo.tsx",
+      "content": "\"use client\"\n\nimport type {\n   ColumnDef,\n   ColumnFiltersState,\n   SortingState,\n   VisibilityState,\n} from \"@tanstack/react-table\"\nimport {\n   flexRender,\n   getCoreRowModel,\n   getFilteredRowModel,\n   getPaginationRowModel,\n   getSortedRowModel,\n   useReactTable,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Checkbox } from \"~/registry/default/ui/checkbox\"\nimport {\n   DropdownMenu,\n   DropdownMenuCheckboxItem,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport {\n   Table,\n   TableBody,\n   TableCell,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from \"~/registry/default/ui/table\"\n\nconst data: Payment[] = [\n   {\n      id: \"m5gr84i9\",\n      amount: 316,\n      status: \"success\",\n      email: \"ken99@yahoo.com\",\n   },\n   {\n      id: \"3u1reuv4\",\n      amount: 242,\n      status: \"success\",\n      email: \"Abe45@gmail.com\",\n   },\n   {\n      id: \"derv1ws0\",\n      amount: 837,\n      status: \"processing\",\n      email: \"Monserrat44@gmail.com\",\n   },\n   {\n      id: \"5kma53ae\",\n      amount: 874,\n      status: \"success\",\n      email: \"Silas22@gmail.com\",\n   },\n   {\n      id: \"bhqecj4p\",\n      amount: 721,\n      status: \"failed\",\n      email: \"carmella@hotmail.com\",\n   },\n]\n\nexport interface Payment {\n   id: string\n   amount: number\n   status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n   email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n   {\n      id: \"select\",\n      header: ({ table }) => (\n         <Checkbox\n            checked={\n               table.getIsAllPageRowsSelected() ||\n               (table.getIsSomePageRowsSelected() && \"indeterminate\")\n            }\n            onCheckedChange={(value) =>\n               table.toggleAllPageRowsSelected(!!value)\n            }\n            aria-label=\"Select all\"\n         />\n      ),\n      cell: ({ row }) => (\n         <Checkbox\n            checked={row.getIsSelected()}\n            onCheckedChange={(value) => row.toggleSelected(!!value)}\n            aria-label=\"Select row\"\n         />\n      ),\n      enableSorting: false,\n      enableHiding: false,\n   },\n   {\n      accessorKey: \"status\",\n      header: \"Status\",\n      cell: ({ row }) => (\n         <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n      ),\n   },\n   {\n      accessorKey: \"email\",\n      header: ({ column }) => {\n         return (\n            <Button\n               variant=\"ghost\"\n               onClick={() =>\n                  column.toggleSorting(column.getIsSorted() === \"asc\")\n               }\n            >\n               Email\n               <ArrowUpDown className=\"ml-2 size-4\" />\n            </Button>\n         )\n      },\n      cell: ({ row }) => (\n         <div className=\"lowercase\">{row.getValue(\"email\")}</div>\n      ),\n   },\n   {\n      accessorKey: \"amount\",\n      header: () => <div className=\"text-right\">Amount</div>,\n      cell: ({ row }) => {\n         const amount = Number.parseFloat(row.getValue(\"amount\"))\n\n         // Format the amount as a dollar amount\n         const formatted = new Intl.NumberFormat(\"en-US\", {\n            style: \"currency\",\n            currency: \"USD\",\n         }).format(amount)\n\n         return <div className=\"text-right font-medium\">{formatted}</div>\n      },\n   },\n   {\n      id: \"actions\",\n      enableHiding: false,\n      cell: ({ row }) => {\n         const payment = row.original\n\n         return (\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" className=\"size-8 p-0\">\n                     <span className=\"sr-only\">Open menu</span>\n                     <MoreHorizontal className=\"size-4\" />\n                  </Button>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                  <DropdownMenuItem\n                     onClick={() => navigator.clipboard.writeText(payment.id)}\n                  >\n                     Copy payment ID\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>View customer</DropdownMenuItem>\n                  <DropdownMenuItem>View payment details</DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         )\n      },\n   },\n]\n\nexport default function DataTableDemo() {\n   const [sorting, setSorting] = React.useState<SortingState>([])\n   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n      [],\n   )\n   const [columnVisibility, setColumnVisibility] =\n      React.useState<VisibilityState>({})\n   const [rowSelection, setRowSelection] = React.useState({})\n\n   const table = useReactTable({\n      data,\n      columns,\n      onSortingChange: setSorting,\n      onColumnFiltersChange: setColumnFilters,\n      getCoreRowModel: getCoreRowModel(),\n      getPaginationRowModel: getPaginationRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      onColumnVisibilityChange: setColumnVisibility,\n      onRowSelectionChange: setRowSelection,\n      state: {\n         sorting,\n         columnFilters,\n         columnVisibility,\n         rowSelection,\n      },\n   })\n\n   return (\n      <div className=\"w-full\">\n         <div className=\"flex items-center py-4\">\n            <Input\n               placeholder=\"Filter emails...\"\n               value={\n                  (table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"\n               }\n               onChange={(event) =>\n                  table.getColumn(\"email\")?.setFilterValue(event.target.value)\n               }\n               className=\"max-w-sm\"\n            />\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" className=\"ml-auto\">\n                     Columns <ChevronDown className=\"ml-2 size-4\" />\n                  </Button>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent align=\"end\">\n                  {table\n                     .getAllColumns()\n                     .filter((column) => column.getCanHide())\n                     .map((column) => {\n                        return (\n                           <DropdownMenuCheckboxItem\n                              key={column.id}\n                              className=\"capitalize\"\n                              checked={column.getIsVisible()}\n                              onCheckedChange={(value) =>\n                                 column.toggleVisibility(!!value)\n                              }\n                           >\n                              {column.id}\n                           </DropdownMenuCheckboxItem>\n                        )\n                     })}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </div>\n         <div className=\"rounded-md border\">\n            <Table>\n               <TableHeader>\n                  {table.getHeaderGroups().map((headerGroup) => (\n                     <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                           return (\n                              <TableHead key={header.id}>\n                                 {header.isPlaceholder\n                                    ? null\n                                    : flexRender(\n                                         header.column.columnDef.header,\n                                         header.getContext(),\n                                      )}\n                              </TableHead>\n                           )\n                        })}\n                     </TableRow>\n                  ))}\n               </TableHeader>\n               <TableBody>\n                  {table.getRowModel().rows?.length ? (\n                     table.getRowModel().rows.map((row) => (\n                        <TableRow\n                           key={row.id}\n                           data-state={row.getIsSelected() && \"selected\"}\n                        >\n                           {row.getVisibleCells().map((cell) => (\n                              <TableCell key={cell.id}>\n                                 {flexRender(\n                                    cell.column.columnDef.cell,\n                                    cell.getContext(),\n                                 )}\n                              </TableCell>\n                           ))}\n                        </TableRow>\n                     ))\n                  ) : (\n                     <TableRow>\n                        <TableCell\n                           colSpan={columns.length}\n                           className=\"h-24 text-center\"\n                        >\n                           No results.\n                        </TableCell>\n                     </TableRow>\n                  )}\n               </TableBody>\n            </Table>\n         </div>\n         <div className=\"flex items-center justify-end space-x-2 py-4\">\n            <div className=\"text-muted-foreground flex-1 text-sm\">\n               {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n               {table.getFilteredRowModel().rows.length} row(s) selected.\n            </div>\n            <div className=\"space-x-2\">\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n               >\n                  Previous\n               </Button>\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n               >\n                  Next\n               </Button>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/date-picker-demo.json b/apps/web/public/r/styles/default/date-picker-demo.json
index e94d91d8..edeb8dd7 100644
--- a/apps/web/public/r/styles/default/date-picker-demo.json
+++ b/apps/web/public/r/styles/default/date-picker-demo.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "date-picker-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "date-fns"
   ],
@@ -11,9 +13,9 @@
   ],
   "files": [
     {
-      "path": "example/date-picker-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport { Calendar } from '~/registry/default/ui/calendar'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/default/ui/popover'\n\nexport default function DatePickerDemo() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               className={ny(\n                  'w-[280px] justify-start text-left font-normal',\n                  !date && 'text-muted-foreground',\n               )}\n            >\n               <CalendarIcon className=\"mr-2 size-4\" />\n               {date ? format(date, 'PPP') : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-auto p-0\">\n            <Calendar\n               mode=\"single\"\n               selected={date}\n               onSelect={setDate}\n               initialFocus\n            />\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport { format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Calendar } from \"~/registry/default/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\n\nexport default function DatePickerDemo() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               className={ny(\n                  \"w-[280px] justify-start text-left font-normal\",\n                  !date && \"text-muted-foreground\",\n               )}\n            >\n               <CalendarIcon className=\"mr-2 size-4\" />\n               {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-auto p-0\">\n            <Calendar\n               mode=\"single\"\n               selected={date}\n               onSelect={setDate}\n               initialFocus\n            />\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/date-picker-form.json b/apps/web/public/r/styles/default/date-picker-form.json
index 8bb4e602..2501afb1 100644
--- a/apps/web/public/r/styles/default/date-picker-form.json
+++ b/apps/web/public/r/styles/default/date-picker-form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "date-picker-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "date-fns"
   ],
@@ -12,9 +14,9 @@
   ],
   "files": [
     {
-      "path": "example/date-picker-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { format } from 'date-fns'\nimport { CalendarIcon } from 'lucide-react'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport { Calendar } from '~/registry/default/ui/calendar'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/default/ui/popover'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst FormSchema = z.object({\n   dob: z.date({\n      required_error: 'A date of birth is required.',\n   }),\n})\n\nexport default function DatePickerForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"dob\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Date of birth</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 className={ny(\n                                    'w-[240px] pl-3 text-left font-normal',\n                                    !field.value && 'text-muted-foreground',\n                                 )}\n                              >\n                                 {field.value\n                                    ? (\n                                          format(field.value, 'PPP')\n                                       )\n                                    : (\n                                          <span>Pick a date</span>\n                                       )}\n                                 <CalendarIcon className=\"ml-auto size-4 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                           <Calendar\n                              mode=\"single\"\n                              selected={field.value}\n                              onSelect={field.onChange}\n                              disabled={date =>\n                                 date > new Date() || date < new Date('1900-01-01')}\n                              initialFocus\n                           />\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        Your date of birth is used to calculate your age.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/date-picker-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Calendar } from \"~/registry/default/ui/calendar\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst FormSchema = z.object({\n   dob: z.date({\n      required_error: \"A date of birth is required.\",\n   }),\n})\n\nexport default function DatePickerForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"dob\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Date of birth</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 className={ny(\n                                    \"w-[240px] pl-3 text-left font-normal\",\n                                    !field.value && \"text-muted-foreground\",\n                                 )}\n                              >\n                                 {field.value ? (\n                                    format(field.value, \"PPP\")\n                                 ) : (\n                                    <span>Pick a date</span>\n                                 )}\n                                 <CalendarIcon className=\"ml-auto size-4 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                           <Calendar\n                              mode=\"single\"\n                              selected={field.value}\n                              onSelect={field.onChange}\n                              disabled={(date) =>\n                                 date > new Date() ||\n                                 date < new Date(\"1900-01-01\")\n                              }\n                              initialFocus\n                           />\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        Your date of birth is used to calculate your age.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/date-picker-with-presets.json b/apps/web/public/r/styles/default/date-picker-with-presets.json
index 1f33d5c3..53a3355c 100644
--- a/apps/web/public/r/styles/default/date-picker-with-presets.json
+++ b/apps/web/public/r/styles/default/date-picker-with-presets.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "date-picker-with-presets",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "date-fns"
   ],
@@ -12,9 +14,9 @@
   ],
   "files": [
     {
-      "path": "example/date-picker-with-presets.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport { Calendar } from '~/registry/default/ui/calendar'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/default/ui/popover'\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/default/ui/select'\n\nexport default function DatePickerWithPresets() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               className={ny(\n                  'w-[280px] justify-start text-left font-normal',\n                  !date && 'text-muted-foreground',\n               )}\n            >\n               <CalendarIcon className=\"mr-2 size-4\" />\n               {date ? format(date, 'PPP') : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"flex w-auto flex-col space-y-2 p-2\">\n            <Select\n               onValueChange={value =>\n                  setDate(addDays(new Date(), Number.parseInt(value)))}\n            >\n               <SelectTrigger>\n                  <SelectValue placeholder=\"Select\" />\n               </SelectTrigger>\n               <SelectContent position=\"popper\">\n                  <SelectItem value=\"0\">Today</SelectItem>\n                  <SelectItem value=\"1\">Tomorrow</SelectItem>\n                  <SelectItem value=\"3\">In 3 days</SelectItem>\n                  <SelectItem value=\"7\">In a week</SelectItem>\n               </SelectContent>\n            </Select>\n            <div className=\"rounded-md border\">\n               <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/date-picker-with-presets.tsx",
+      "content": "\"use client\"\n\nimport { addDays, format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Calendar } from \"~/registry/default/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/default/ui/select\"\n\nexport default function DatePickerWithPresets() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               className={ny(\n                  \"w-[280px] justify-start text-left font-normal\",\n                  !date && \"text-muted-foreground\",\n               )}\n            >\n               <CalendarIcon className=\"mr-2 size-4\" />\n               {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"flex w-auto flex-col space-y-2 p-2\">\n            <Select\n               onValueChange={(value) =>\n                  setDate(addDays(new Date(), Number.parseInt(value)))\n               }\n            >\n               <SelectTrigger>\n                  <SelectValue placeholder=\"Select\" />\n               </SelectTrigger>\n               <SelectContent position=\"popper\">\n                  <SelectItem value=\"0\">Today</SelectItem>\n                  <SelectItem value=\"1\">Tomorrow</SelectItem>\n                  <SelectItem value=\"3\">In 3 days</SelectItem>\n                  <SelectItem value=\"7\">In a week</SelectItem>\n               </SelectContent>\n            </Select>\n            <div className=\"rounded-md border\">\n               <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/date-picker-with-range.json b/apps/web/public/r/styles/default/date-picker-with-range.json
index 8549d039..e2350e50 100644
--- a/apps/web/public/r/styles/default/date-picker-with-range.json
+++ b/apps/web/public/r/styles/default/date-picker-with-range.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "date-picker-with-range",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "date-fns"
   ],
@@ -11,9 +13,9 @@
   ],
   "files": [
     {
-      "path": "example/date-picker-with-range.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-react'\nimport type { DateRange } from 'react-day-picker'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport { Calendar } from '~/registry/default/ui/calendar'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/default/ui/popover'\n\nexport default function DatePickerWithRange({\n   className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n   const [date, setDate] = React.useState<DateRange | undefined>({\n      from: new Date(2022, 0, 20),\n      to: addDays(new Date(2022, 0, 20), 20),\n   })\n\n   return (\n      <div className={ny('grid gap-2', className)}>\n         <Popover>\n            <PopoverTrigger asChild>\n               <Button\n                  id=\"date\"\n                  variant=\"outline\"\n                  className={ny(\n                     'w-[300px] justify-start text-left font-normal',\n                     !date && 'text-muted-foreground',\n                  )}\n               >\n                  <CalendarIcon className=\"mr-2 size-4\" />\n                  {date?.from\n                     ? (\n                           date.to\n                              ? (\n                                    <>\n                                       {format(date.from, 'LLL dd, y')}\n                                       {' '}\n                                       -\n                                       {' '}\n                                       {format(date.to, 'LLL dd, y')}\n                                    </>\n                                 )\n                              : (\n                                    format(date.from, 'LLL dd, y')\n                                 )\n                        )\n                     : (\n                           <span>Pick a date</span>\n                        )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto p-0\" align=\"start\">\n               <Calendar\n                  initialFocus\n                  mode=\"range\"\n                  defaultMonth={date?.from}\n                  selected={date}\n                  onSelect={setDate}\n                  numberOfMonths={2}\n               />\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/date-picker-with-range.tsx",
+      "content": "\"use client\"\n\nimport { addDays, format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\nimport * as React from \"react\"\nimport type { DateRange } from \"react-day-picker\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Calendar } from \"~/registry/default/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\n\nexport default function DatePickerWithRange({\n   className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n   const [date, setDate] = React.useState<DateRange | undefined>({\n      from: new Date(2022, 0, 20),\n      to: addDays(new Date(2022, 0, 20), 20),\n   })\n\n   return (\n      <div className={ny(\"grid gap-2\", className)}>\n         <Popover>\n            <PopoverTrigger asChild>\n               <Button\n                  id=\"date\"\n                  variant=\"outline\"\n                  className={ny(\n                     \"w-[300px] justify-start text-left font-normal\",\n                     !date && \"text-muted-foreground\",\n                  )}\n               >\n                  <CalendarIcon className=\"mr-2 size-4\" />\n                  {date?.from ? (\n                     date.to ? (\n                        <>\n                           {format(date.from, \"LLL dd, y\")} -{\" \"}\n                           {format(date.to, \"LLL dd, y\")}\n                        </>\n                     ) : (\n                        format(date.from, \"LLL dd, y\")\n                     )\n                  ) : (\n                     <span>Pick a date</span>\n                  )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto p-0\" align=\"start\">\n               <Calendar\n                  initialFocus\n                  mode=\"range\"\n                  defaultMonth={date?.from}\n                  selected={date}\n                  onSelect={setDate}\n                  numberOfMonths={2}\n               />\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dialog-close-button.json b/apps/web/public/r/styles/default/dialog-close-button.json
index a225e581..a91e4d6a 100644
--- a/apps/web/public/r/styles/default/dialog-close-button.json
+++ b/apps/web/public/r/styles/default/dialog-close-button.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dialog-close-button",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "dialog",
     "button"
   ],
   "files": [
     {
-      "path": "example/dialog-close-button.tsx",
-      "content": "import { Copy } from 'lucide-react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Dialog,\n   DialogClose,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from '~/registry/default/ui/dialog'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\n\nexport default function DialogCloseButton() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Share</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-md\">\n            <DialogHeader>\n               <DialogTitle>Share link</DialogTitle>\n               <DialogDescription>\n                  Anyone who has this link will be able to view this.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"flex items-center space-x-2\">\n               <div className=\"grid flex-1 gap-2\">\n                  <Label htmlFor=\"link\" className=\"sr-only\">\n                     Link\n                  </Label>\n                  <Input\n                     id=\"link\"\n                     defaultValue=\"https://nyxbui.design/docs/installation\"\n                     readOnly\n                  />\n               </div>\n               <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n                  <span className=\"sr-only\">Copy</span>\n                  <Copy className=\"size-4\" />\n               </Button>\n            </div>\n            <DialogFooter className=\"sm:justify-start\">\n               <DialogClose asChild>\n                  <Button type=\"button\" variant=\"secondary\">\n                     Close\n                  </Button>\n               </DialogClose>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/dialog-close-button.tsx",
+      "content": "import { Copy } from \"lucide-react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Dialog,\n   DialogClose,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"~/registry/default/ui/dialog\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport default function DialogCloseButton() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Share</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-md\">\n            <DialogHeader>\n               <DialogTitle>Share link</DialogTitle>\n               <DialogDescription>\n                  Anyone who has this link will be able to view this.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"flex items-center space-x-2\">\n               <div className=\"grid flex-1 gap-2\">\n                  <Label htmlFor=\"link\" className=\"sr-only\">\n                     Link\n                  </Label>\n                  <Input\n                     id=\"link\"\n                     defaultValue=\"https://nyxbui.design/docs/installation\"\n                     readOnly\n                  />\n               </div>\n               <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n                  <span className=\"sr-only\">Copy</span>\n                  <Copy className=\"size-4\" />\n               </Button>\n            </div>\n            <DialogFooter className=\"sm:justify-start\">\n               <DialogClose asChild>\n                  <Button type=\"button\" variant=\"secondary\">\n                     Close\n                  </Button>\n               </DialogClose>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dialog-demo.json b/apps/web/public/r/styles/default/dialog-demo.json
index 427fe382..33cd4450 100644
--- a/apps/web/public/r/styles/default/dialog-demo.json
+++ b/apps/web/public/r/styles/default/dialog-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dialog-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "dialog"
   ],
   "files": [
     {
-      "path": "example/dialog-demo.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from '~/registry/default/ui/dialog'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\n\nexport default function DialogDemo() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-[425px]\">\n            <DialogHeader>\n               <DialogTitle>Edit profile</DialogTitle>\n               <DialogDescription>\n                  Make changes to your profile here. Click save when you're done.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     defaultValue=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     defaultValue=\"~peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <DialogFooter>\n               <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/dialog-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"~/registry/default/ui/dialog\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport default function DialogDemo() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-[425px]\">\n            <DialogHeader>\n               <DialogTitle>Edit profile</DialogTitle>\n               <DialogDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     defaultValue=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     defaultValue=\"~peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <DialogFooter>\n               <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dialog.json b/apps/web/public/r/styles/default/dialog.json
index 20199138..5f275807 100644
--- a/apps/web/public/r/styles/default/dialog.json
+++ b/apps/web/public/r/styles/default/dialog.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dialog",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/dialog.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Overlay\n      ref={ref}\n      className={ny(\n         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',\n         className,\n      )}\n      {...props}\n   />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n         ref={ref}\n         className={ny(\n            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',\n            className,\n         )}\n         {...props}\n      >\n         {children}\n         <DialogPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n         </DialogPrimitive.Close>\n      </DialogPrimitive.Content>\n   </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nfunction DialogHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            'flex flex-col space-y-1.5 text-center sm:text-left',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nDialogHeader.displayName = 'DialogHeader'\n\nfunction DialogFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Title\n      ref={ref}\n      className={ny(\n         'text-lg font-semibold leading-none tracking-tight',\n         className,\n      )}\n      {...props}\n   />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Description\n      ref={ref}\n      className={ny('text-muted-foreground text-sm', className)}\n      {...props}\n   />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n   Dialog,\n   DialogPortal,\n   DialogOverlay,\n   DialogClose,\n   DialogTrigger,\n   DialogContent,\n   DialogHeader,\n   DialogFooter,\n   DialogTitle,\n   DialogDescription,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Overlay\n      ref={ref}\n      className={ny(\n         \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80\",\n         className,\n      )}\n      {...props}\n   />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n         ref={ref}\n         className={ny(\n            \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n         <DialogPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n         </DialogPrimitive.Close>\n      </DialogPrimitive.Content>\n   </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nfunction DialogHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            \"flex flex-col space-y-1.5 text-center sm:text-left\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nDialogHeader.displayName = \"DialogHeader\"\n\nfunction DialogFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Title\n      ref={ref}\n      className={ny(\n         \"text-lg font-semibold leading-none tracking-tight\",\n         className,\n      )}\n      {...props}\n   />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Description\n      ref={ref}\n      className={ny(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n   Dialog,\n   DialogPortal,\n   DialogOverlay,\n   DialogClose,\n   DialogTrigger,\n   DialogContent,\n   DialogHeader,\n   DialogFooter,\n   DialogTitle,\n   DialogDescription,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dock-demo-2.json b/apps/web/public/r/styles/default/dock-demo-2.json
index 82acb15a..2b0781a1 100644
--- a/apps/web/public/r/styles/default/dock-demo-2.json
+++ b/apps/web/public/r/styles/default/dock-demo-2.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dock-demo-2",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/dock-demo-2.tsx",
-      "content": "import React from 'react'\n\nimport { Dock, DockIcon } from '~/registry/default/ui/dock'\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nexport default function DockDemo() {\n   return (\n      <div className=\"relative\">\n         <Dock direction=\"middle\">\n            <DockIcon>\n               <Icons.gitHub className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.googleDrive className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.notion className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.whatsapp className=\"size-6\" />\n            </DockIcon>\n         </Dock>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         >\n         </path>\n      </svg>\n   ),\n   notion: (props: IconProps) => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#fff\"\n         />\n         <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000\"\n         />\n      </svg>\n   ),\n   googleDrive: (props: IconProps) => (\n      <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: (props: IconProps) => (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 175.216 175.552\"\n         {...props}\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            fill=\"#b3b3b3\"\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            filter=\"url(#a)\"\n         />\n         <path\n            fill=\"#fff\"\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n         />\n         <path\n            fill=\"url(#linearGradient1780)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n         />\n         <path\n            fill=\"url(#b)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n         />\n         <path\n            fill=\"#fff\"\n            fillRule=\"evenodd\"\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n         />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/dock-demo-2.tsx",
+      "content": "import type React from \"react\"\n\nimport { Dock, DockIcon } from \"~/registry/default/ui/dock\"\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nexport default function DockDemo() {\n   return (\n      <div className=\"relative\">\n         <Dock direction=\"middle\">\n            <DockIcon>\n               <Icons.gitHub className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.googleDrive className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.notion className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.whatsapp className=\"size-6\" />\n            </DockIcon>\n         </Dock>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         ></path>\n      </svg>\n   ),\n   notion: (props: IconProps) => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#fff\"\n         />\n         <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000\"\n         />\n      </svg>\n   ),\n   googleDrive: (props: IconProps) => (\n      <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: (props: IconProps) => (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 175.216 175.552\"\n         {...props}\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            fill=\"#b3b3b3\"\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            filter=\"url(#a)\"\n         />\n         <path\n            fill=\"#fff\"\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n         />\n         <path\n            fill=\"url(#linearGradient1780)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n         />\n         <path\n            fill=\"url(#b)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n         />\n         <path\n            fill=\"#fff\"\n            fillRule=\"evenodd\"\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dock-demo-3.json b/apps/web/public/r/styles/default/dock-demo-3.json
index 003505a2..ffa00759 100644
--- a/apps/web/public/r/styles/default/dock-demo-3.json
+++ b/apps/web/public/r/styles/default/dock-demo-3.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dock-demo-3",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/dock-demo-3.tsx",
-      "content": "import React from 'react'\n\nimport { Dock, DockIcon } from '~/registry/default/ui/dock'\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nexport default function DockDemo() {\n   return (\n      <div className=\"relative\">\n         <Dock magnification={60} distance={100}>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.gitHub className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.googleDrive className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.notion className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.whatsapp className=\"size-full\" />\n            </DockIcon>\n         </Dock>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         >\n         </path>\n      </svg>\n   ),\n   notion: (props: IconProps) => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#fff\"\n         />\n         <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000\"\n         />\n      </svg>\n   ),\n   googleDrive: (props: IconProps) => (\n      <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: (props: IconProps) => (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 175.216 175.552\"\n         {...props}\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            fill=\"#b3b3b3\"\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            filter=\"url(#a)\"\n         />\n         <path\n            fill=\"#fff\"\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n         />\n         <path\n            fill=\"url(#linearGradient1780)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n         />\n         <path\n            fill=\"url(#b)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n         />\n         <path\n            fill=\"#fff\"\n            fillRule=\"evenodd\"\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n         />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/dock-demo-3.tsx",
+      "content": "import type React from \"react\"\n\nimport { Dock, DockIcon } from \"~/registry/default/ui/dock\"\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nexport default function DockDemo() {\n   return (\n      <div className=\"relative\">\n         <Dock magnification={60} distance={100}>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.gitHub className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.googleDrive className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.notion className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.whatsapp className=\"size-full\" />\n            </DockIcon>\n         </Dock>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         ></path>\n      </svg>\n   ),\n   notion: (props: IconProps) => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#fff\"\n         />\n         <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000\"\n         />\n      </svg>\n   ),\n   googleDrive: (props: IconProps) => (\n      <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: (props: IconProps) => (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 175.216 175.552\"\n         {...props}\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            fill=\"#b3b3b3\"\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            filter=\"url(#a)\"\n         />\n         <path\n            fill=\"#fff\"\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n         />\n         <path\n            fill=\"url(#linearGradient1780)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n         />\n         <path\n            fill=\"url(#b)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n         />\n         <path\n            fill=\"#fff\"\n            fillRule=\"evenodd\"\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dock-demo.json b/apps/web/public/r/styles/default/dock-demo.json
index 8e598941..05d67067 100644
--- a/apps/web/public/r/styles/default/dock-demo.json
+++ b/apps/web/public/r/styles/default/dock-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dock-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/dock-demo.tsx",
-      "content": "import React from 'react'\nimport Link from 'next/link'\nimport { CalendarIcon, HomeIcon, MailIcon, PencilIcon } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { buttonVariants } from '~/components/ui/button'\nimport { Separator } from '~/components/ui/separator'\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/components/ui/tooltip'\nimport { ModeToggle } from '~/components/mode-toggle'\nimport { Dock, DockIcon } from '~/registry/default/ui/dock'\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nconst Icons = {\n   calendar: (props: IconProps) => <CalendarIcon {...props} />,\n   email: (props: IconProps) => <MailIcon {...props} />,\n   linkedin: (props: IconProps) => (\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <title>LinkedIn</title>\n         <path\n            fill=\"currentColor\"\n            d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\n         />\n      </svg>\n   ),\n   x: (props: IconProps) => (\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <title>X</title>\n         <path\n            fill=\"currentColor\"\n            d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\n         />\n      </svg>\n   ),\n   youtube: (props: IconProps) => (\n      <svg\n         width=\"32px\"\n         height=\"32px\"\n         viewBox=\"0 0 32 32\"\n         fill=\"currentColor\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <title>youtube</title>\n         <path d=\"M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z\" />\n      </svg>\n   ),\n   github: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         >\n         </path>\n      </svg>\n   ),\n}\n\nconst DATA = {\n   navbar: [\n      { href: '#', icon: HomeIcon, label: 'Home' },\n      { href: '#', icon: PencilIcon, label: 'Blog' },\n   ],\n   contact: {\n      social: {\n         GitHub: {\n            name: 'GitHub',\n            url: '#',\n            icon: Icons.github,\n         },\n         LinkedIn: {\n            name: 'LinkedIn',\n            url: '#',\n            icon: Icons.linkedin,\n         },\n         X: {\n            name: 'X',\n            url: '#',\n            icon: Icons.x,\n         },\n         email: {\n            name: 'Send Email',\n            url: '#',\n            icon: Icons.email,\n         },\n      },\n   },\n}\n\nexport default function DockDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Dock\n         </span>\n         <TooltipProvider>\n            <Dock direction=\"middle\">\n               {DATA.navbar.map(item => (\n                  <DockIcon key={item.label}>\n                     <Tooltip>\n                        <TooltipTrigger asChild>\n                           <Link\n                              href={item.href}\n                              aria-label={item.label}\n                              className={ny(\n                                 buttonVariants({ variant: 'ghost', size: 'icon' }),\n                                 'size-12 rounded-full',\n                              )}\n                           >\n                              <item.icon className=\"size-4\" />\n                           </Link>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                           <p>{item.label}</p>\n                        </TooltipContent>\n                     </Tooltip>\n                  </DockIcon>\n               ))}\n               <Separator orientation=\"vertical\" className=\"h-full\" />\n               {Object.entries(DATA.contact.social).map(([name, social]) => (\n                  <DockIcon key={name}>\n                     <Tooltip>\n                        <TooltipTrigger asChild>\n                           <Link\n                              href={social.url}\n                              aria-label={social.name}\n                              className={ny(\n                                 buttonVariants({ variant: 'ghost', size: 'icon' }),\n                                 'size-12 rounded-full',\n                              )}\n                           >\n                              <social.icon className=\"size-4\" />\n                           </Link>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                           <p>{name}</p>\n                        </TooltipContent>\n                     </Tooltip>\n                  </DockIcon>\n               ))}\n               <Separator orientation=\"vertical\" className=\"h-full py-2\" />\n               <DockIcon>\n                  <Tooltip>\n                     <TooltipTrigger asChild>\n                        <ModeToggle className=\"rounded-full\" />\n                     </TooltipTrigger>\n                     <TooltipContent>\n                        <p>Theme</p>\n                     </TooltipContent>\n                  </Tooltip>\n               </DockIcon>\n            </Dock>\n         </TooltipProvider>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/dock-demo.tsx",
+      "content": "import { CalendarIcon, HomeIcon, MailIcon, PencilIcon } from \"lucide-react\"\nimport Link from \"next/link\"\nimport type React from \"react\"\n\nimport { ModeToggle } from \"~/components/mode-toggle\"\nimport { buttonVariants } from \"~/components/ui/button\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/components/ui/tooltip\"\nimport { ny } from \"~/lib/utils\"\nimport { Dock, DockIcon } from \"~/registry/default/ui/dock\"\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nconst Icons = {\n   calendar: (props: IconProps) => <CalendarIcon {...props} />,\n   email: (props: IconProps) => <MailIcon {...props} />,\n   linkedin: (props: IconProps) => (\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <title>LinkedIn</title>\n         <path\n            fill=\"currentColor\"\n            d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\n         />\n      </svg>\n   ),\n   x: (props: IconProps) => (\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <title>X</title>\n         <path\n            fill=\"currentColor\"\n            d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\n         />\n      </svg>\n   ),\n   youtube: (props: IconProps) => (\n      <svg\n         width=\"32px\"\n         height=\"32px\"\n         viewBox=\"0 0 32 32\"\n         fill=\"currentColor\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <title>youtube</title>\n         <path d=\"M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z\" />\n      </svg>\n   ),\n   github: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         ></path>\n      </svg>\n   ),\n}\n\nconst DATA = {\n   navbar: [\n      { href: \"#\", icon: HomeIcon, label: \"Home\" },\n      { href: \"#\", icon: PencilIcon, label: \"Blog\" },\n   ],\n   contact: {\n      social: {\n         GitHub: {\n            name: \"GitHub\",\n            url: \"#\",\n            icon: Icons.github,\n         },\n         LinkedIn: {\n            name: \"LinkedIn\",\n            url: \"#\",\n            icon: Icons.linkedin,\n         },\n         X: {\n            name: \"X\",\n            url: \"#\",\n            icon: Icons.x,\n         },\n         email: {\n            name: \"Send Email\",\n            url: \"#\",\n            icon: Icons.email,\n         },\n      },\n   },\n}\n\nexport default function DockDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Dock\n         </span>\n         <TooltipProvider>\n            <Dock direction=\"middle\">\n               {DATA.navbar.map((item) => (\n                  <DockIcon key={item.label}>\n                     <Tooltip>\n                        <TooltipTrigger asChild>\n                           <Link\n                              href={item.href}\n                              aria-label={item.label}\n                              className={ny(\n                                 buttonVariants({\n                                    variant: \"ghost\",\n                                    size: \"icon\",\n                                 }),\n                                 \"size-12 rounded-full\",\n                              )}\n                           >\n                              <item.icon className=\"size-4\" />\n                           </Link>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                           <p>{item.label}</p>\n                        </TooltipContent>\n                     </Tooltip>\n                  </DockIcon>\n               ))}\n               <Separator orientation=\"vertical\" className=\"h-full\" />\n               {Object.entries(DATA.contact.social).map(([name, social]) => (\n                  <DockIcon key={name}>\n                     <Tooltip>\n                        <TooltipTrigger asChild>\n                           <Link\n                              href={social.url}\n                              aria-label={social.name}\n                              className={ny(\n                                 buttonVariants({\n                                    variant: \"ghost\",\n                                    size: \"icon\",\n                                 }),\n                                 \"size-12 rounded-full\",\n                              )}\n                           >\n                              <social.icon className=\"size-4\" />\n                           </Link>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                           <p>{name}</p>\n                        </TooltipContent>\n                     </Tooltip>\n                  </DockIcon>\n               ))}\n               <Separator orientation=\"vertical\" className=\"h-full py-2\" />\n               <DockIcon>\n                  <Tooltip>\n                     <TooltipTrigger asChild>\n                        <ModeToggle className=\"rounded-full\" />\n                     </TooltipTrigger>\n                     <TooltipContent>\n                        <p>Theme</p>\n                     </TooltipContent>\n                  </Tooltip>\n               </DockIcon>\n            </Dock>\n         </TooltipProvider>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dock.json b/apps/web/public/r/styles/default/dock.json
index 671e36f2..aeaa4bff 100644
--- a/apps/web/public/r/styles/default/dock.json
+++ b/apps/web/public/r/styles/default/dock.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dock",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/dock.tsx",
-      "content": "'use client'\n\nimport type { PropsWithChildren } from 'react'\nimport React, { useRef } from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { motion, useMotionValue, useSpring, useTransform } from 'framer-motion'\n\nimport { ny } from '~/lib/utils'\n\nexport interface DockProps extends VariantProps<typeof dockVariants> {\n   className?: string\n   magnification?: number\n   distance?: number\n   direction?: 'top' | 'middle' | 'bottom'\n   children: React.ReactNode\n}\n\nconst DEFAULT_MAGNIFICATION = 60\nconst DEFAULT_DISTANCE = 140\n\nconst dockVariants = cva(\n   'supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md',\n)\n\nconst Dock = React.forwardRef<HTMLDivElement, DockProps>(\n   (\n      {\n         className,\n         children,\n         magnification = DEFAULT_MAGNIFICATION,\n         distance = DEFAULT_DISTANCE,\n         direction = 'bottom',\n         ...props\n      },\n      ref,\n   ) => {\n      const mouseX = useMotionValue(Infinity)\n\n      const renderChildren = () => {\n         return React.Children.map(children, (child) => {\n            if (React.isValidElement(child) && child.type === DockIcon) {\n               return React.cloneElement(child, {\n                  ...child.props,\n                  mouseX,\n                  magnification,\n                  distance,\n               })\n            }\n            return child\n         })\n      }\n\n      return (\n         <motion.div\n            ref={ref}\n            onMouseMove={e => mouseX.set(e.pageX)}\n            onMouseLeave={() => mouseX.set(Infinity)}\n            {...props}\n            className={ny(dockVariants({ className }), {\n               'items-start': direction === 'top',\n               'items-center': direction === 'middle',\n               'items-end': direction === 'bottom',\n            })}\n         >\n            {renderChildren()}\n         </motion.div>\n      )\n   },\n)\n\nDock.displayName = 'Dock'\n\nexport interface DockIconProps {\n   size?: number\n   magnification?: number\n   distance?: number\n   mouseX?: any\n   className?: string\n   children?: React.ReactNode\n   props?: PropsWithChildren\n}\n\nfunction DockIcon({\n   size,\n   magnification = DEFAULT_MAGNIFICATION,\n   distance = DEFAULT_DISTANCE,\n   mouseX,\n   className,\n   children,\n   ...props\n}: DockIconProps) {\n   const ref = useRef<HTMLDivElement>(null)\n\n   const distanceCalc = useTransform(mouseX, (val: number) => {\n      const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 }\n\n      return val - bounds.x - bounds.width / 2\n   })\n\n   const widthSync = useTransform(\n      distanceCalc,\n      [-distance, 0, distance],\n      [40, magnification, 40],\n   )\n\n   const width = useSpring(widthSync, {\n      mass: 0.1,\n      stiffness: 150,\n      damping: 12,\n   })\n\n   return (\n      <motion.div\n         ref={ref}\n         style={{ width }}\n         className={ny(\n            'flex aspect-square cursor-pointer items-center justify-center rounded-full',\n            className,\n         )}\n         {...props}\n      >\n         {children}\n      </motion.div>\n   )\n}\n\nDockIcon.displayName = 'DockIcon'\n\nexport { Dock, DockIcon, dockVariants }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport { motion, useMotionValue, useSpring, useTransform } from \"framer-motion\"\nimport type { PropsWithChildren } from \"react\"\nimport React, { useRef } from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nexport interface DockProps extends VariantProps<typeof dockVariants> {\n   className?: string\n   magnification?: number\n   distance?: number\n   direction?: \"top\" | \"middle\" | \"bottom\"\n   children: React.ReactNode\n}\n\nconst DEFAULT_MAGNIFICATION = 60\nconst DEFAULT_DISTANCE = 140\n\nconst dockVariants = cva(\n   \"supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md\",\n)\n\nconst Dock = React.forwardRef<HTMLDivElement, DockProps>(\n   (\n      {\n         className,\n         children,\n         magnification = DEFAULT_MAGNIFICATION,\n         distance = DEFAULT_DISTANCE,\n         direction = \"bottom\",\n         ...props\n      },\n      ref,\n   ) => {\n      const mouseX = useMotionValue(Number.POSITIVE_INFINITY)\n\n      const renderChildren = () => {\n         return React.Children.map(children, (child) => {\n            if (React.isValidElement(child) && child.type === DockIcon) {\n               return React.cloneElement(child, {\n                  ...child.props,\n                  mouseX,\n                  magnification,\n                  distance,\n               })\n            }\n            return child\n         })\n      }\n\n      return (\n         <motion.div\n            ref={ref}\n            onMouseMove={(e) => mouseX.set(e.pageX)}\n            onMouseLeave={() => mouseX.set(Number.POSITIVE_INFINITY)}\n            {...props}\n            className={ny(dockVariants({ className }), {\n               \"items-start\": direction === \"top\",\n               \"items-center\": direction === \"middle\",\n               \"items-end\": direction === \"bottom\",\n            })}\n         >\n            {renderChildren()}\n         </motion.div>\n      )\n   },\n)\n\nDock.displayName = \"Dock\"\n\nexport interface DockIconProps {\n   size?: number\n   magnification?: number\n   distance?: number\n   mouseX?: any\n   className?: string\n   children?: React.ReactNode\n   props?: PropsWithChildren\n}\n\nfunction DockIcon({\n   size,\n   magnification = DEFAULT_MAGNIFICATION,\n   distance = DEFAULT_DISTANCE,\n   mouseX,\n   className,\n   children,\n   ...props\n}: DockIconProps) {\n   const ref = useRef<HTMLDivElement>(null)\n\n   const distanceCalc = useTransform(mouseX, (val: number) => {\n      const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 }\n\n      return val - bounds.x - bounds.width / 2\n   })\n\n   const widthSync = useTransform(\n      distanceCalc,\n      [-distance, 0, distance],\n      [40, magnification, 40],\n   )\n\n   const width = useSpring(widthSync, {\n      mass: 0.1,\n      stiffness: 150,\n      damping: 12,\n   })\n\n   return (\n      <motion.div\n         ref={ref}\n         style={{ width }}\n         className={ny(\n            \"flex aspect-square cursor-pointer items-center justify-center rounded-full\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n      </motion.div>\n   )\n}\n\nDockIcon.displayName = \"DockIcon\"\n\nexport { Dock, DockIcon, dockVariants }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dot-pattern-demo.json b/apps/web/public/r/styles/default/dot-pattern-demo.json
index e727d8d1..b0d6f50a 100644
--- a/apps/web/public/r/styles/default/dot-pattern-demo.json
+++ b/apps/web/public/r/styles/default/dot-pattern-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dot-pattern-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/dot-pattern-demo.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\nimport DotPattern from '~/registry/default/ui/dot-pattern'\n\nfunction DotPatternDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Dot Pattern\n         </p>\n         <DotPattern\n            className={ny(\n               '[mask-image:radial-gradient(200px_circle_at_center,white,transparent)]',\n            )}\n         />\n      </div>\n   )\n}\n\nexport default DotPatternDemo\n",
-      "type": "registry:component",
+      "path": "examples/dot-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\nimport { DotPattern } from \"~/registry/default/ui/dot-pattern\"\n\nexport default function DotPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Dot Pattern\n         </p>\n         <DotPattern\n            className={ny(\n               \"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dot-pattern-linear-gradient.json b/apps/web/public/r/styles/default/dot-pattern-linear-gradient.json
index 414d3f36..9a07557a 100644
--- a/apps/web/public/r/styles/default/dot-pattern-linear-gradient.json
+++ b/apps/web/public/r/styles/default/dot-pattern-linear-gradient.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dot-pattern-linear-gradient",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/dot-pattern-linear-gradient.tsx",
-      "content": "'use client'\n\nimport DotPattern from '~/registry/default/ui/dot-pattern'\nimport { ny } from '~/lib/utils'\n\nfunction DotPatternDemo2() {\n   return (\n      <div className=\"bg-background relative flex size-full items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Dot Pattern\n         </p>\n         <DotPattern\n            width={20}\n            height={20}\n            cx={1}\n            cy={1}\n            cr={1}\n            className={ny(\n               '[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ',\n            )}\n         />\n      </div>\n   )\n}\n\nexport default DotPatternDemo2\n",
-      "type": "registry:component",
+      "path": "examples/dot-pattern-linear-gradient.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\nimport { DotPattern } from \"~/registry/default/ui/dot-pattern\"\n\nexport default function DotPatternLinearGradient() {\n   return (\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Dot Pattern\n         </p>\n         <DotPattern\n            width={20}\n            height={20}\n            cx={1}\n            cy={1}\n            cr={1}\n            className={ny(\n               \"[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] \",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dot-pattern.json b/apps/web/public/r/styles/default/dot-pattern.json
index a29732f7..10167638 100644
--- a/apps/web/public/r/styles/default/dot-pattern.json
+++ b/apps/web/public/r/styles/default/dot-pattern.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dot-pattern",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/dot-pattern.tsx",
-      "content": "import { useId } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface DotPatternProps {\n   width?: any\n   height?: any\n   x?: any\n   y?: any\n   cx?: any\n   cy?: any\n   cr?: any\n   className?: string\n   [key: string]: any\n}\nexport function DotPattern({\n   width = 16,\n   height = 16,\n   x = 0,\n   y = 0,\n   cx = 1,\n   cy = 1,\n   cr = 1,\n   className,\n   ...props\n}: DotPatternProps) {\n   const id = useId()\n\n   return (\n      <svg\n         aria-hidden=\"true\"\n         className={ny(\n            'pointer-events-none absolute inset-0 size-full fill-neutral-400/80',\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               patternContentUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <circle id=\"pattern-circle\" cx={cx} cy={cy} r={cr} />\n            </pattern>\n         </defs>\n         <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n      </svg>\n   )\n}\n\nexport default DotPattern\n",
-      "type": "registry:component",
+      "content": "import { useId } from \"react\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\n\ninterface DotPatternProps extends React.SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   cx?: number\n   cy?: number\n   cr?: number\n   className?: string\n   [key: string]: unknown\n}\nexport function DotPattern({\n   width = 16,\n   height = 16,\n   x = 0,\n   y = 0,\n   cx = 1,\n   cy = 1,\n   cr = 1,\n   className,\n   ...props\n}: DotPatternProps) {\n   const id = useId()\n\n   return (\n      <svg\n         aria-hidden=\"true\"\n         className={ny(\n            \"pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80\",\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               patternContentUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <circle id=\"pattern-circle\" cx={cx} cy={cy} r={cr} />\n            </pattern>\n         </defs>\n         <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill={`url(#${id})`}\n         />\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/drawer-demo.json b/apps/web/public/r/styles/default/drawer-demo.json
index 5d7e2638..4b7f6316 100644
--- a/apps/web/public/r/styles/default/drawer-demo.json
+++ b/apps/web/public/r/styles/default/drawer-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "drawer-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "drawer"
   ],
   "files": [
     {
-      "path": "example/drawer-demo.tsx",
-      "content": "import * as React from 'react'\nimport { Minus, Plus } from 'lucide-react'\nimport { Bar, BarChart, ResponsiveContainer } from 'recharts'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from '~/registry/default/ui/drawer'\n\nconst data = [\n   {\n      goal: 400,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 239,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 349,\n   },\n]\n\nexport default function DrawerDemo() {\n   const [goal, setGoal] = React.useState(350)\n\n   function onClick(adjustment: number) {\n      setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n   }\n\n   return (\n      <Drawer>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Open Drawer</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mx-auto w-full max-w-sm\">\n               <DrawerHeader>\n                  <DrawerTitle>Move Goal</DrawerTitle>\n                  <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n               </DrawerHeader>\n               <div className=\"p-4 pb-0\">\n                  <div className=\"flex items-center justify-center space-x-2\">\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"size-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(-10)}\n                        disabled={goal <= 200}\n                     >\n                        <Minus className=\"size-4\" />\n                        <span className=\"sr-only\">Decrease</span>\n                     </Button>\n                     <div className=\"flex-1 text-center\">\n                        <div className=\"text-7xl font-bold tracking-tighter\">\n                           {goal}\n                        </div>\n                        <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                           Calories/day\n                        </div>\n                     </div>\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"size-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(10)}\n                        disabled={goal >= 400}\n                     >\n                        <Plus className=\"size-4\" />\n                        <span className=\"sr-only\">Increase</span>\n                     </Button>\n                  </div>\n                  <div className=\"mt-3 h-[120px]\">\n                     <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data}>\n                           <Bar\n                              dataKey=\"goal\"\n                              style={\n                                 {\n                                    fill: 'hsl(var(--foreground))',\n                                    opacity: 0.9,\n                                 } as React.CSSProperties\n                              }\n                           />\n                        </BarChart>\n                     </ResponsiveContainer>\n                  </div>\n               </div>\n               <DrawerFooter>\n                  <Button>Submit</Button>\n                  <DrawerClose asChild>\n                     <Button variant=\"outline\">Cancel</Button>\n                  </DrawerClose>\n               </DrawerFooter>\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/drawer-demo.tsx",
+      "content": "import { Minus, Plus } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"~/registry/default/ui/drawer\"\n\nconst data = [\n   {\n      goal: 400,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 239,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 349,\n   },\n]\n\nexport default function DrawerDemo() {\n   const [goal, setGoal] = React.useState(350)\n\n   function onClick(adjustment: number) {\n      setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n   }\n\n   return (\n      <Drawer>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Open Drawer</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mx-auto w-full max-w-sm\">\n               <DrawerHeader>\n                  <DrawerTitle>Move Goal</DrawerTitle>\n                  <DrawerDescription>\n                     Set your daily activity goal.\n                  </DrawerDescription>\n               </DrawerHeader>\n               <div className=\"p-4 pb-0\">\n                  <div className=\"flex items-center justify-center space-x-2\">\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"size-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(-10)}\n                        disabled={goal <= 200}\n                     >\n                        <Minus className=\"size-4\" />\n                        <span className=\"sr-only\">Decrease</span>\n                     </Button>\n                     <div className=\"flex-1 text-center\">\n                        <div className=\"text-7xl font-bold tracking-tighter\">\n                           {goal}\n                        </div>\n                        <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                           Calories/day\n                        </div>\n                     </div>\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"size-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(10)}\n                        disabled={goal >= 400}\n                     >\n                        <Plus className=\"size-4\" />\n                        <span className=\"sr-only\">Increase</span>\n                     </Button>\n                  </div>\n                  <div className=\"mt-3 h-[120px]\">\n                     <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data}>\n                           <Bar\n                              dataKey=\"goal\"\n                              style={\n                                 {\n                                    fill: \"hsl(var(--foreground))\",\n                                    opacity: 0.9,\n                                 } as React.CSSProperties\n                              }\n                           />\n                        </BarChart>\n                     </ResponsiveContainer>\n                  </div>\n               </div>\n               <DrawerFooter>\n                  <Button>Submit</Button>\n                  <DrawerClose asChild>\n                     <Button variant=\"outline\">Cancel</Button>\n                  </DrawerClose>\n               </DrawerFooter>\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/drawer-dialog.json b/apps/web/public/r/styles/default/drawer-dialog.json
index 95908797..5db12b85 100644
--- a/apps/web/public/r/styles/default/drawer-dialog.json
+++ b/apps/web/public/r/styles/default/drawer-dialog.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "drawer-dialog",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "drawer",
     "dialog"
   ],
   "files": [
     {
-      "path": "example/drawer-dialog.tsx",
-      "content": "import * as React from 'react'\n\nimport { ny } from '~/lib/utils'\nimport { useMediaQuery } from '~/hooks/use-media-query'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from '~/registry/default/ui/dialog'\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from '~/registry/default/ui/drawer'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\n\nexport default function DrawerDialogDemo() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery('(min-width: 768px)')\n\n   if (isDesktop) {\n      return (\n         <Dialog open={open} onOpenChange={setOpen}>\n            <DialogTrigger asChild>\n               <Button variant=\"outline\">Edit Profile</Button>\n            </DialogTrigger>\n            <DialogContent className=\"sm:max-w-[425px]\">\n               <DialogHeader>\n                  <DialogTitle>Edit profile</DialogTitle>\n                  <DialogDescription>\n                     Make changes to your profile here. Click save when you're done.\n                  </DialogDescription>\n               </DialogHeader>\n               <ProfileForm />\n            </DialogContent>\n         </Dialog>\n      )\n   }\n\n   return (\n      <Drawer open={open} onOpenChange={setOpen}>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <DrawerHeader className=\"text-left\">\n               <DrawerTitle>Edit profile</DrawerTitle>\n               <DrawerDescription>\n                  Make changes to your profile here. Click save when you're done.\n               </DrawerDescription>\n            </DrawerHeader>\n            <ProfileForm className=\"px-4\" />\n            <DrawerFooter className=\"pt-2\">\n               <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n               </DrawerClose>\n            </DrawerFooter>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<'form'>) {\n   return (\n      <form className={ny('grid items-start gap-4', className)}>\n         <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input type=\"email\" id=\"email\" defaultValue=\"nyxb@example.com\" />\n         </div>\n         <div className=\"grid gap-2\">\n            <Label htmlFor=\"username\">Username</Label>\n            <Input id=\"username\" defaultValue=\"~nyxb\" />\n         </div>\n         <Button type=\"submit\">Save changes</Button>\n      </form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/drawer-dialog.tsx",
+      "content": "import * as React from \"react\"\n\nimport { useMediaQuery } from \"~/hooks/use-media-query\"\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"~/registry/default/ui/dialog\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"~/registry/default/ui/drawer\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport default function DrawerDialogDemo() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n   if (isDesktop) {\n      return (\n         <Dialog open={open} onOpenChange={setOpen}>\n            <DialogTrigger asChild>\n               <Button variant=\"outline\">Edit Profile</Button>\n            </DialogTrigger>\n            <DialogContent className=\"sm:max-w-[425px]\">\n               <DialogHeader>\n                  <DialogTitle>Edit profile</DialogTitle>\n                  <DialogDescription>\n                     Make changes to your profile here. Click save when you're\n                     done.\n                  </DialogDescription>\n               </DialogHeader>\n               <ProfileForm />\n            </DialogContent>\n         </Dialog>\n      )\n   }\n\n   return (\n      <Drawer open={open} onOpenChange={setOpen}>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <DrawerHeader className=\"text-left\">\n               <DrawerTitle>Edit profile</DrawerTitle>\n               <DrawerDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </DrawerDescription>\n            </DrawerHeader>\n            <ProfileForm className=\"px-4\" />\n            <DrawerFooter className=\"pt-2\">\n               <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n               </DrawerClose>\n            </DrawerFooter>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n   return (\n      <form className={ny(\"grid items-start gap-4\", className)}>\n         <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input type=\"email\" id=\"email\" defaultValue=\"nyxb@example.com\" />\n         </div>\n         <div className=\"grid gap-2\">\n            <Label htmlFor=\"username\">Username</Label>\n            <Input id=\"username\" defaultValue=\"~nyxb\" />\n         </div>\n         <Button type=\"submit\">Save changes</Button>\n      </form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/drawer.json b/apps/web/public/r/styles/default/drawer.json
index b9a20f1a..dcc41d48 100644
--- a/apps/web/public/r/styles/default/drawer.json
+++ b/apps/web/public/r/styles/default/drawer.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "drawer",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "vaul",
     "@radix-ui/react-dialog"
@@ -8,8 +10,8 @@
   "files": [
     {
       "path": "ui/drawer.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Drawer as DrawerPrimitive } from 'vaul'\n\nimport { ny } from '~/lib/utils'\n\nfunction Drawer({\n   shouldScaleBackground = true,\n   ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n   return (\n      <DrawerPrimitive.Root\n         shouldScaleBackground={shouldScaleBackground}\n         {...props}\n      />\n   )\n}\nDrawer.displayName = 'Drawer'\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Overlay\n      ref={ref}\n      className={ny('fixed inset-0 z-50 bg-black/80', className)}\n      {...props}\n   />\n))\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\n\nconst DrawerContent = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n         ref={ref}\n         className={ny(\n            'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border',\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"bg-muted mx-auto mt-4 h-2 w-[100px] cursor-grab rounded-full active:cursor-grabbing\" />\n         {children}\n      </DrawerPrimitive.Content>\n   </DrawerPortal>\n))\nDrawerContent.displayName = 'DrawerContent'\n\nfunction DrawerHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny('grid gap-1.5 p-4 text-center sm:text-left', className)}\n         {...props}\n      />\n   )\n}\nDrawerHeader.displayName = 'DrawerHeader'\n\nfunction DrawerFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny('mt-auto flex flex-col gap-2 p-4', className)}\n         {...props}\n      />\n   )\n}\nDrawerFooter.displayName = 'DrawerFooter'\n\nconst DrawerTitle = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Title\n      ref={ref}\n      className={ny(\n         'text-lg font-semibold leading-none tracking-tight',\n         className,\n      )}\n      {...props}\n   />\n))\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\n\nconst DrawerDescription = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Description\n      ref={ref}\n      className={ny('text-muted-foreground text-sm', className)}\n      {...props}\n   />\n))\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\n\nexport {\n   Drawer,\n   DrawerPortal,\n   DrawerOverlay,\n   DrawerTrigger,\n   DrawerClose,\n   DrawerContent,\n   DrawerHeader,\n   DrawerFooter,\n   DrawerTitle,\n   DrawerDescription,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { ny } from \"~/lib/utils\"\n\nfunction Drawer({\n   shouldScaleBackground = true,\n   ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n   return (\n      <DrawerPrimitive.Root\n         shouldScaleBackground={shouldScaleBackground}\n         {...props}\n      />\n   )\n}\nDrawer.displayName = \"Drawer\"\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Overlay\n      ref={ref}\n      className={ny(\"fixed inset-0 z-50 bg-black/80\", className)}\n      {...props}\n   />\n))\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\n\nconst DrawerContent = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n         ref={ref}\n         className={ny(\n            \"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border\",\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"bg-muted mx-auto mt-4 h-2 w-[100px] cursor-grab rounded-full active:cursor-grabbing\" />\n         {children}\n      </DrawerPrimitive.Content>\n   </DrawerPortal>\n))\nDrawerContent.displayName = \"DrawerContent\"\n\nfunction DrawerHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n         {...props}\n      />\n   )\n}\nDrawerHeader.displayName = \"DrawerHeader\"\n\nfunction DrawerFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\"mt-auto flex flex-col gap-2 p-4\", className)}\n         {...props}\n      />\n   )\n}\nDrawerFooter.displayName = \"DrawerFooter\"\n\nconst DrawerTitle = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Title\n      ref={ref}\n      className={ny(\n         \"text-lg font-semibold leading-none tracking-tight\",\n         className,\n      )}\n      {...props}\n   />\n))\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\n\nconst DrawerDescription = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Description\n      ref={ref}\n      className={ny(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\n\nexport {\n   Drawer,\n   DrawerPortal,\n   DrawerOverlay,\n   DrawerTrigger,\n   DrawerClose,\n   DrawerContent,\n   DrawerHeader,\n   DrawerFooter,\n   DrawerTitle,\n   DrawerDescription,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dropdown-menu-checkboxes.json b/apps/web/public/r/styles/default/dropdown-menu-checkboxes.json
index 6fec7bd5..6f75b957 100644
--- a/apps/web/public/r/styles/default/dropdown-menu-checkboxes.json
+++ b/apps/web/public/r/styles/default/dropdown-menu-checkboxes.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dropdown-menu-checkboxes",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "dropdown-menu",
     "checkbox"
   ],
   "files": [
     {
-      "path": "example/dropdown-menu-checkboxes.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport type { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   DropdownMenu,\n   DropdownMenuCheckboxItem,\n   DropdownMenuContent,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\n\ntype Checked = DropdownMenuCheckboxItemProps['checked']\n\nexport default function DropdownMenuCheckboxes() {\n   const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)\n   const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)\n   const [showPanel, setShowPanel] = React.useState<Checked>(false)\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuCheckboxItem\n               checked={showStatusBar}\n               onCheckedChange={setShowStatusBar}\n            >\n               Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n               checked={showActivityBar}\n               onCheckedChange={setShowActivityBar}\n               disabled\n            >\n               Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n               checked={showPanel}\n               onCheckedChange={setShowPanel}\n            >\n               Panel\n            </DropdownMenuCheckboxItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/dropdown-menu-checkboxes.tsx",
+      "content": "\"use client\"\n\nimport type { DropdownMenuCheckboxItemProps } from \"@radix-ui/react-dropdown-menu\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuCheckboxItem,\n   DropdownMenuContent,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\n\ntype Checked = DropdownMenuCheckboxItemProps[\"checked\"]\n\nexport default function DropdownMenuCheckboxes() {\n   const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)\n   const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)\n   const [showPanel, setShowPanel] = React.useState<Checked>(false)\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuCheckboxItem\n               checked={showStatusBar}\n               onCheckedChange={setShowStatusBar}\n            >\n               Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n               checked={showActivityBar}\n               onCheckedChange={setShowActivityBar}\n               disabled\n            >\n               Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n               checked={showPanel}\n               onCheckedChange={setShowPanel}\n            >\n               Panel\n            </DropdownMenuCheckboxItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dropdown-menu-demo.json b/apps/web/public/r/styles/default/dropdown-menu-demo.json
index 9e3080ec..76ac3d28 100644
--- a/apps/web/public/r/styles/default/dropdown-menu-demo.json
+++ b/apps/web/public/r/styles/default/dropdown-menu-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dropdown-menu-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "dropdown-menu"
   ],
   "files": [
     {
-      "path": "example/dropdown-menu-demo.tsx",
-      "content": "import {\n   Cloud,\n   CreditCard,\n   Github,\n   Keyboard,\n   LifeBuoy,\n   LogOut,\n   Mail,\n   MessageSquare,\n   Plus,\n   PlusCircle,\n   Settings,\n   User,\n   UserPlus,\n   Users,\n} from 'lucide-react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuPortal,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\n\nexport default function DropdownMenuDemo() {\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  <User />\n                  <span>Profile</span>\n                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  <CreditCard />\n                  <span>Billing</span>\n                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  <Settings />\n                  <span>Settings</span>\n                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  <Keyboard />\n                  <span>Keyboard shortcuts</span>\n                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  <Users />\n                  <span>Team</span>\n               </DropdownMenuItem>\n               <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                     <UserPlus />\n                     <span>Invite users</span>\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                     <DropdownMenuSubContent>\n                        <DropdownMenuItem>\n                           <Mail />\n                           <span>Email</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <MessageSquare />\n                           <span>Message</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <PlusCircle />\n                           <span>More...</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n               </DropdownMenuSub>\n               <DropdownMenuItem>\n                  <Plus />\n                  <span>New Team</span>\n                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               <Github />\n               <span>GitHub</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n               <LifeBuoy />\n               <span>Support</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>\n               <Cloud />\n               <span>API</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               <LogOut />\n               <span>Log out</span>\n               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/dropdown-menu-demo.tsx",
+      "content": "import {\n   Cloud,\n   CreditCard,\n   Github,\n   Keyboard,\n   LifeBuoy,\n   LogOut,\n   Mail,\n   MessageSquare,\n   Plus,\n   PlusCircle,\n   Settings,\n   User,\n   UserPlus,\n   Users,\n} from \"lucide-react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuPortal,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\n\nexport default function DropdownMenuDemo() {\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  <User />\n                  <span>Profile</span>\n                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  <CreditCard />\n                  <span>Billing</span>\n                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  <Settings />\n                  <span>Settings</span>\n                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  <Keyboard />\n                  <span>Keyboard shortcuts</span>\n                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  <Users />\n                  <span>Team</span>\n               </DropdownMenuItem>\n               <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                     <UserPlus />\n                     <span>Invite users</span>\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                     <DropdownMenuSubContent>\n                        <DropdownMenuItem>\n                           <Mail />\n                           <span>Email</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <MessageSquare />\n                           <span>Message</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <PlusCircle />\n                           <span>More...</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n               </DropdownMenuSub>\n               <DropdownMenuItem>\n                  <Plus />\n                  <span>New Team</span>\n                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               <Github />\n               <span>GitHub</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n               <LifeBuoy />\n               <span>Support</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>\n               <Cloud />\n               <span>API</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               <LogOut />\n               <span>Log out</span>\n               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dropdown-menu-radio-group.json b/apps/web/public/r/styles/default/dropdown-menu-radio-group.json
index fbeb712c..152315b3 100644
--- a/apps/web/public/r/styles/default/dropdown-menu-radio-group.json
+++ b/apps/web/public/r/styles/default/dropdown-menu-radio-group.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dropdown-menu-radio-group",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "dropdown-menu",
     "radio-group"
   ],
   "files": [
     {
-      "path": "example/dropdown-menu-radio-group.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuLabel,\n   DropdownMenuRadioGroup,\n   DropdownMenuRadioItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\n\nexport default function DropdownMenuRadioGroupDemo() {\n   const [position, setPosition] = React.useState('bottom')\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>\n               <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n               <DropdownMenuRadioItem value=\"bottom\">Bottom</DropdownMenuRadioItem>\n               <DropdownMenuRadioItem value=\"right\">Right</DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/dropdown-menu-radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuLabel,\n   DropdownMenuRadioGroup,\n   DropdownMenuRadioItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\n\nexport default function DropdownMenuRadioGroupDemo() {\n   const [position, setPosition] = React.useState(\"bottom\")\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuRadioGroup\n               value={position}\n               onValueChange={setPosition}\n            >\n               <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n               <DropdownMenuRadioItem value=\"bottom\">\n                  Bottom\n               </DropdownMenuRadioItem>\n               <DropdownMenuRadioItem value=\"right\">\n                  Right\n               </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/dropdown-menu.json b/apps/web/public/r/styles/default/dropdown-menu.json
index 9d0573e4..a9f3eb68 100644
--- a/apps/web/public/r/styles/default/dropdown-menu.json
+++ b/apps/web/public/r/styles/default/dropdown-menu.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dropdown-menu",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-dropdown-menu"
   ],
   "files": [
     {
       "path": "ui/dropdown-menu.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      className={ny(\n         'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n   </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName\n  = DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      className={ny(\n         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuSubContent.displayName\n  = DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n   <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n         ref={ref}\n         sideOffset={sideOffset}\n         className={ny(\n            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',\n            className,\n         )}\n         {...props}\n      />\n   </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <DropdownMenuPrimitive.Item\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <DropdownMenuPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName\n  = DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <DropdownMenuPrimitive.ItemIndicator>\n            <Circle className=\"size-2 fill-current\" />\n         </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <DropdownMenuPrimitive.Label\n      ref={ref}\n      className={ny(\n         'px-2 py-1.5 text-sm font-semibold',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <DropdownMenuPrimitive.Separator\n      ref={ref}\n      className={ny('bg-muted -mx-1 my-1 h-px', className)}\n      {...props}\n   />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nfunction DropdownMenuShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny('ml-auto text-xs tracking-widest opacity-60', className)}\n         {...props}\n      />\n   )\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\n\nexport {\n   DropdownMenu,\n   DropdownMenuTrigger,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuCheckboxItem,\n   DropdownMenuRadioItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuGroup,\n   DropdownMenuPortal,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuRadioGroup,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n   </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n   DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      className={ny(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg\",\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuSubContent.displayName =\n   DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n   <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n         ref={ref}\n         sideOffset={sideOffset}\n         className={ny(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md\",\n            className,\n         )}\n         {...props}\n      />\n   </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <DropdownMenuPrimitive.Item\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <DropdownMenuPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n   DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <DropdownMenuPrimitive.ItemIndicator>\n            <Circle className=\"size-2 fill-current\" />\n         </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <DropdownMenuPrimitive.Label\n      ref={ref}\n      className={ny(\n         \"px-2 py-1.5 text-sm font-semibold\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <DropdownMenuPrimitive.Separator\n      ref={ref}\n      className={ny(\"bg-muted -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nfunction DropdownMenuShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n         {...props}\n      />\n   )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n   DropdownMenu,\n   DropdownMenuTrigger,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuCheckboxItem,\n   DropdownMenuRadioItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuGroup,\n   DropdownMenuPortal,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuRadioGroup,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/fade-text-demo.json b/apps/web/public/r/styles/default/fade-text-demo.json
index b8d0f97c..efd45d70 100644
--- a/apps/web/public/r/styles/default/fade-text-demo.json
+++ b/apps/web/public/r/styles/default/fade-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "fade-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/fade-text-demo.tsx",
-      "content": "import { FadeText } from '~/registry/default/ui/fade-text'\n\nexport default async function FadeTextDemo() {\n   return (\n      <div className=\"flex flex-col space-y-8 text-center\">\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"up\"\n            framerProps={{\n               show: { transition: { delay: 0.2 } },\n            }}\n            text=\"Fade Up\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"right\"\n            framerProps={{\n               show: { transition: { delay: 0.4 } },\n            }}\n            text=\"Fade Right\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"down\"\n            framerProps={{\n               show: { transition: { delay: 0.6 } },\n            }}\n            text=\"Fade Down\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"left\"\n            framerProps={{\n               show: { transition: { delay: 0.8 } },\n            }}\n            text=\"Fade Left\"\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/fade-text-demo.tsx",
+      "content": "import { FadeText } from \"~/registry/default/ui/fade-text\"\n\nexport default async function FadeTextDemo() {\n   return (\n      <div className=\"flex flex-col space-y-8 text-center\">\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"up\"\n            framerProps={{\n               show: { transition: { delay: 0.2 } },\n            }}\n            text=\"Fade Up\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"right\"\n            framerProps={{\n               show: { transition: { delay: 0.4 } },\n            }}\n            text=\"Fade Right\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"down\"\n            framerProps={{\n               show: { transition: { delay: 0.6 } },\n            }}\n            text=\"Fade Down\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"left\"\n            framerProps={{\n               show: { transition: { delay: 0.8 } },\n            }}\n            text=\"Fade Left\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/fade-text.json b/apps/web/public/r/styles/default/fade-text.json
index 4f9659fc..0757cc5b 100644
--- a/apps/web/public/r/styles/default/fade-text.json
+++ b/apps/web/public/r/styles/default/fade-text.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "fade-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/fade-text.tsx",
-      "content": "'use client'\n\nimport type { Variants } from 'framer-motion'\nimport { motion } from 'framer-motion'\nimport { useMemo } from 'react'\n\ninterface FadeTextProps {\n   className?: string\n   direction?: 'up' | 'down' | 'left' | 'right'\n   framerProps?: Variants\n   text: string\n}\n\nexport function FadeText({\n   direction = 'up',\n   className,\n   framerProps = {\n      hidden: { opacity: 0 },\n      show: { opacity: 1, transition: { type: 'spring' } },\n   },\n   text,\n}: FadeTextProps) {\n   const directionOffset = useMemo(() => {\n      const map = { up: 10, down: -10, left: -10, right: 10 }\n      return map[direction]\n   }, [direction])\n\n   const axis = direction === 'up' || direction === 'down' ? 'y' : 'x'\n\n   const FADE_ANIMATION_VARIANTS = useMemo(() => {\n      const { hidden, show, ...rest } = framerProps as {\n         [name: string]: { [name: string]: number, opacity: number }\n      }\n\n      return {\n         ...rest,\n         hidden: {\n            ...(hidden ?? {}),\n            opacity: hidden?.opacity ?? 0,\n            [axis]: hidden?.[axis] ?? directionOffset,\n         },\n         show: {\n            ...(show ?? {}),\n            opacity: show?.opacity ?? 1,\n            [axis]: show?.[axis] ?? 0,\n         },\n      }\n   }, [directionOffset, axis, framerProps])\n\n   return (\n      <motion.div\n         initial=\"hidden\"\n         animate=\"show\"\n         viewport={{ once: true }}\n         variants={FADE_ANIMATION_VARIANTS}\n      >\n         <motion.span className={className}>{text}</motion.span>\n      </motion.div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { motion } from \"framer-motion\"\nimport { useMemo } from \"react\"\n\ninterface FadeTextProps {\n   className?: string\n   direction?: \"up\" | \"down\" | \"left\" | \"right\"\n   framerProps?: Variants\n   text: string\n}\n\nexport function FadeText({\n   direction = \"up\",\n   className,\n   framerProps = {\n      hidden: { opacity: 0 },\n      show: { opacity: 1, transition: { type: \"spring\" } },\n   },\n   text,\n}: FadeTextProps) {\n   const directionOffset = useMemo(() => {\n      const map = { up: 10, down: -10, left: -10, right: 10 }\n      return map[direction]\n   }, [direction])\n\n   const axis = direction === \"up\" || direction === \"down\" ? \"y\" : \"x\"\n\n   const FADE_ANIMATION_VARIANTS = useMemo(() => {\n      const { hidden, show, ...rest } = framerProps as {\n         [name: string]: { [name: string]: number; opacity: number }\n      }\n\n      return {\n         ...rest,\n         hidden: {\n            ...(hidden ?? {}),\n            opacity: hidden?.opacity ?? 0,\n            [axis]: hidden?.[axis] ?? directionOffset,\n         },\n         show: {\n            ...(show ?? {}),\n            opacity: show?.opacity ?? 1,\n            [axis]: show?.[axis] ?? 0,\n         },\n      }\n   }, [directionOffset, axis, framerProps])\n\n   return (\n      <motion.div\n         initial=\"hidden\"\n         animate=\"show\"\n         viewport={{ once: true }}\n         variants={FADE_ANIMATION_VARIANTS}\n      >\n         <motion.span className={className}>{text}</motion.span>\n      </motion.div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/file-tree-demo.json b/apps/web/public/r/styles/default/file-tree-demo.json
index ea3ccd08..50c0b47f 100644
--- a/apps/web/public/r/styles/default/file-tree-demo.json
+++ b/apps/web/public/r/styles/default/file-tree-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "file-tree-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/file-tree-demo.tsx",
-      "content": "import { File, Folder, Tree } from '~/registry/default/ui/file-tree'\n\nexport default function FileTreeDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[300px] w-1/2 flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <Tree\n            className=\"bg-background overflow-hidden rounded-md p-2\"\n            initialSelectedId=\"7\"\n            initialExpandedItems={[\n               '1',\n               '2',\n               '3',\n               '4',\n               '5',\n               '6',\n               '7',\n               '8',\n               '9',\n               '10',\n               '11',\n            ]}\n            elements={ELEMENTS}\n         >\n            <Folder element=\"src\" value=\"1\">\n               <Folder value=\"2\" element=\"app\">\n                  <File value=\"3\">\n                     <p>layout.tsx</p>\n                  </File>\n                  <File value=\"4\">\n                     <p>page.tsx</p>\n                  </File>\n               </Folder>\n               <Folder value=\"5\" element=\"components\">\n                  <Folder value=\"6\" element=\"ui\">\n                     <File value=\"7\">\n                        <p>button.tsx</p>\n                     </File>\n                  </Folder>\n                  <File value=\"8\">\n                     <p>header.tsx</p>\n                  </File>\n                  <File value=\"9\">\n                     <p>footer.tsx</p>\n                  </File>\n               </Folder>\n               <Folder value=\"10\" element=\"lib\">\n                  <File value=\"11\">\n                     <p>utils.ts</p>\n                  </File>\n               </Folder>\n            </Folder>\n         </Tree>\n      </div>\n   )\n}\n\nconst ELEMENTS = [\n   {\n      id: '1',\n      isSelectable: true,\n      name: 'src',\n      children: [\n         {\n            id: '2',\n            isSelectable: true,\n            name: 'app',\n            children: [\n               {\n                  id: '3',\n                  isSelectable: true,\n                  name: 'layout.tsx',\n               },\n               {\n                  id: '4',\n                  isSelectable: true,\n                  name: 'page.tsx',\n               },\n            ],\n         },\n         {\n            id: '5',\n            isSelectable: true,\n            name: 'components',\n            children: [\n               {\n                  id: '6',\n                  isSelectable: true,\n                  name: 'header.tsx',\n               },\n               {\n                  id: '7',\n                  isSelectable: true,\n                  name: 'footer.tsx',\n               },\n            ],\n         },\n         {\n            id: '8',\n            isSelectable: true,\n            name: 'lib',\n            children: [\n               {\n                  id: '9',\n                  isSelectable: true,\n                  name: 'utils.ts',\n               },\n            ],\n         },\n      ],\n   },\n]\n",
-      "type": "registry:component",
+      "path": "examples/file-tree-demo.tsx",
+      "content": "import { File, Folder, Tree } from \"~/registry/default/ui/file-tree\"\n\nexport default function FileTreeDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[300px] w-1/2 flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <Tree\n            className=\"bg-background overflow-hidden rounded-md p-2\"\n            initialSelectedId=\"7\"\n            initialExpandedItems={[\n               \"1\",\n               \"2\",\n               \"3\",\n               \"4\",\n               \"5\",\n               \"6\",\n               \"7\",\n               \"8\",\n               \"9\",\n               \"10\",\n               \"11\",\n            ]}\n            elements={ELEMENTS}\n         >\n            <Folder element=\"src\" value=\"1\">\n               <Folder value=\"2\" element=\"app\">\n                  <File value=\"3\">\n                     <p>layout.tsx</p>\n                  </File>\n                  <File value=\"4\">\n                     <p>page.tsx</p>\n                  </File>\n               </Folder>\n               <Folder value=\"5\" element=\"components\">\n                  <Folder value=\"6\" element=\"ui\">\n                     <File value=\"7\">\n                        <p>button.tsx</p>\n                     </File>\n                  </Folder>\n                  <File value=\"8\">\n                     <p>header.tsx</p>\n                  </File>\n                  <File value=\"9\">\n                     <p>footer.tsx</p>\n                  </File>\n               </Folder>\n               <Folder value=\"10\" element=\"lib\">\n                  <File value=\"11\">\n                     <p>utils.ts</p>\n                  </File>\n               </Folder>\n            </Folder>\n         </Tree>\n      </div>\n   )\n}\n\nconst ELEMENTS = [\n   {\n      id: \"1\",\n      isSelectable: true,\n      name: \"src\",\n      children: [\n         {\n            id: \"2\",\n            isSelectable: true,\n            name: \"app\",\n            children: [\n               {\n                  id: \"3\",\n                  isSelectable: true,\n                  name: \"layout.tsx\",\n               },\n               {\n                  id: \"4\",\n                  isSelectable: true,\n                  name: \"page.tsx\",\n               },\n            ],\n         },\n         {\n            id: \"5\",\n            isSelectable: true,\n            name: \"components\",\n            children: [\n               {\n                  id: \"6\",\n                  isSelectable: true,\n                  name: \"header.tsx\",\n               },\n               {\n                  id: \"7\",\n                  isSelectable: true,\n                  name: \"footer.tsx\",\n               },\n            ],\n         },\n         {\n            id: \"8\",\n            isSelectable: true,\n            name: \"lib\",\n            children: [\n               {\n                  id: \"9\",\n                  isSelectable: true,\n                  name: \"utils.ts\",\n               },\n            ],\n         },\n      ],\n   },\n]\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/file-tree.json b/apps/web/public/r/styles/default/file-tree.json
index 14d9ad76..216820c4 100644
--- a/apps/web/public/r/styles/default/file-tree.json
+++ b/apps/web/public/r/styles/default/file-tree.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "file-tree",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/file-tree.tsx",
-      "content": "'use client'\n\nimport React, {\n   createContext,\n   forwardRef,\n   useCallback,\n   useContext,\n   useEffect,\n   useState,\n} from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { FileIcon, FolderIcon, FolderOpenIcon } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport { ScrollArea } from '~/registry/default/ui/scroll-area'\n\ninterface TreeViewElement {\n   id: string\n   name: string\n   isSelectable?: boolean\n   children?: TreeViewElement[]\n}\n\ninterface TreeContextProps {\n   selectedId: string | undefined\n   expandedItems: string[] | undefined\n   indicator: boolean\n   handleExpand: (id: string) => void\n   selectItem: (id: string) => void\n   setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>\n   openIcon?: React.ReactNode\n   closeIcon?: React.ReactNode\n   direction: 'rtl' | 'ltr'\n}\n\nconst TreeContext = createContext<TreeContextProps | null>(null)\n\nfunction useTree() {\n   const context = useContext(TreeContext)\n   if (!context) {\n      throw new Error('useTree must be used within a TreeProvider')\n   }\n   return context\n}\n\ninterface TreeViewComponentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\ntype Direction = 'rtl' | 'ltr' | undefined\n\ntype TreeViewProps = {\n   initialSelectedId?: string\n   indicator?: boolean\n   elements?: TreeViewElement[]\n   initialExpandedItems?: string[]\n   openIcon?: React.ReactNode\n   closeIcon?: React.ReactNode\n} & TreeViewComponentProps\n\nconst Tree = forwardRef<HTMLDivElement, TreeViewProps>(\n   (\n      {\n         className,\n         elements,\n         initialSelectedId,\n         initialExpandedItems,\n         children,\n         indicator = true,\n         openIcon,\n         closeIcon,\n         dir,\n         ...props\n      },\n      ref,\n   ) => {\n      const [selectedId, setSelectedId] = useState<string | undefined>(\n         initialSelectedId,\n      )\n      const [expandedItems, setExpandedItems] = useState<string[] | undefined>(\n         initialExpandedItems,\n      )\n\n      const selectItem = useCallback((id: string) => {\n         setSelectedId(id)\n      }, [])\n\n      const handleExpand = useCallback((id: string) => {\n         setExpandedItems((prev) => {\n            if (prev?.includes(id)) {\n               return prev.filter(item => item !== id)\n            }\n            return [...(prev ?? []), id]\n         })\n      }, [])\n\n      const expandSpecificTargetedElements = useCallback(\n         (elements?: TreeViewElement[], selectId?: string) => {\n            if (!elements || !selectId)\n               return\n            const findParent = (\n               currentElement: TreeViewElement,\n               currentPath: string[] = [],\n            ) => {\n               const isSelectable = currentElement.isSelectable ?? true\n               const newPath = [...currentPath, currentElement.id]\n               if (currentElement.id === selectId) {\n                  if (isSelectable) {\n                     setExpandedItems(prev => [...(prev ?? []), ...newPath])\n                  }\n                  else {\n                     if (newPath.includes(currentElement.id)) {\n                        newPath.pop()\n                        setExpandedItems(prev => [...(prev ?? []), ...newPath])\n                     }\n                  }\n                  return\n               }\n               if (\n                  isSelectable\n                  && currentElement.children\n                  && currentElement.children.length > 0\n               ) {\n                  currentElement.children.forEach((child) => {\n                     findParent(child, newPath)\n                  })\n               }\n            }\n            elements.forEach((element) => {\n               findParent(element)\n            })\n         },\n         [],\n      )\n\n      useEffect(() => {\n         if (initialSelectedId) {\n            expandSpecificTargetedElements(elements, initialSelectedId)\n         }\n      }, [initialSelectedId, elements])\n\n      const direction = dir === 'rtl' ? 'rtl' : 'ltr'\n\n      return (\n         <TreeContext.Provider\n            value={{\n               selectedId,\n               expandedItems,\n               handleExpand,\n               selectItem,\n               setExpandedItems,\n               indicator,\n               openIcon,\n               closeIcon,\n               direction,\n            }}\n         >\n            <div className={ny('size-full', className)}>\n               <ScrollArea\n                  ref={ref}\n                  className=\"relative h-full px-2\"\n                  dir={dir as Direction}\n               >\n                  <AccordionPrimitive.Root\n                     {...props}\n                     type=\"multiple\"\n                     defaultValue={expandedItems}\n                     value={expandedItems}\n                     className=\"flex flex-col gap-1\"\n                     onValueChange={value =>\n                        setExpandedItems(prev => [...(prev ?? []), value[0]])}\n                     dir={dir as Direction}\n                  >\n                     {children}\n                  </AccordionPrimitive.Root>\n               </ScrollArea>\n            </div>\n         </TreeContext.Provider>\n      )\n   },\n)\n\nTree.displayName = 'Tree'\n\nconst TreeIndicator = forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { direction } = useTree()\n\n   return (\n      <div\n         dir={direction}\n         ref={ref}\n         className={ny(\n            'bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\n\nTreeIndicator.displayName = 'TreeIndicator'\n\ninterface FolderComponentProps\n   extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {}\n\ntype FolderProps = {\n   expandedItems?: string[]\n   element: string\n   isSelectable?: boolean\n   isSelect?: boolean\n} & FolderComponentProps\n\nconst Folder = forwardRef<\n   HTMLDivElement,\n  FolderProps & React.HTMLAttributes<HTMLDivElement>\n>(\n   (\n      {\n         className,\n         element,\n         value,\n         isSelectable = true,\n         isSelect,\n         children,\n         ...props\n      },\n      _ref,\n   ) => {\n      const {\n         direction,\n         handleExpand,\n         expandedItems,\n         indicator,\n         setExpandedItems,\n         openIcon,\n         closeIcon,\n      } = useTree()\n\n      return (\n         <AccordionPrimitive.Item\n            {...props}\n            value={value}\n            className=\"relative h-full overflow-hidden \"\n         >\n            <AccordionPrimitive.Trigger\n               className={ny(\n            `flex items-center gap-1 rounded-md text-sm`,\n            className,\n            {\n               'bg-muted rounded-md': isSelect && isSelectable,\n               'cursor-pointer': isSelectable,\n               'cursor-not-allowed opacity-50': !isSelectable,\n            },\n               )}\n               disabled={!isSelectable}\n               onClick={() => handleExpand(value)}\n            >\n               {expandedItems?.includes(value)\n                  ? openIcon ?? <FolderOpenIcon className=\"size-4\" />\n                  : closeIcon ?? <FolderIcon className=\"size-4\" />}\n               <span>{element}</span>\n            </AccordionPrimitive.Trigger>\n            <AccordionPrimitive.Content className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative h-full overflow-hidden text-sm\">\n               {element && indicator && <TreeIndicator aria-hidden=\"true\" />}\n               <AccordionPrimitive.Root\n                  dir={direction}\n                  type=\"multiple\"\n                  className=\"ml-5 flex flex-col gap-1 py-1 rtl:mr-5 \"\n                  defaultValue={expandedItems}\n                  value={expandedItems}\n                  onValueChange={(value) => {\n                     setExpandedItems?.(prev => [...(prev ?? []), value[0]])\n                  }}\n               >\n                  {children}\n               </AccordionPrimitive.Root>\n            </AccordionPrimitive.Content>\n         </AccordionPrimitive.Item>\n      )\n   },\n)\n\nFolder.displayName = 'Folder'\n\nconst File = forwardRef<\n   HTMLButtonElement,\n   {\n      value: string\n      handleSelect?: (id: string) => void\n      isSelectable?: boolean\n      isSelect?: boolean\n      fileIcon?: React.ReactNode\n   } & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(\n         (\n            {\n               value,\n               className,\n               handleSelect,\n               isSelectable = true,\n               isSelect,\n               fileIcon,\n               children,\n               ...props\n            },\n            ref,\n         ) => {\n            const { direction, selectedId, selectItem } = useTree()\n            const isSelected = isSelect ?? selectedId === value\n            return (\n               <AccordionPrimitive.Item value={value} className=\"relative\">\n                  <AccordionPrimitive.Trigger\n                     ref={ref}\n                     {...props}\n                     dir={direction}\n                     disabled={!isSelectable}\n                     aria-label=\"File\"\n                     className={ny(\n                        'flex cursor-pointer items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out  rtl:pl-1 rtl:pr-0',\n                        {\n                           'bg-muted': isSelected && isSelectable,\n                        },\n                        isSelectable ? 'cursor-pointer' : 'cursor-not-allowed opacity-50',\n                        className,\n                     )}\n                     onClick={() => selectItem(value)}\n                  >\n                     {fileIcon ?? <FileIcon className=\"size-4\" />}\n                     {children}\n                  </AccordionPrimitive.Trigger>\n               </AccordionPrimitive.Item>\n            )\n         },\n         )\n\nFile.displayName = 'File'\n\nconst CollapseButton = forwardRef<\n   HTMLButtonElement,\n   {\n      elements: TreeViewElement[]\n      expandAll?: boolean\n   } & React.HTMLAttributes<HTMLButtonElement>\n>(({ className, elements, expandAll = false, children, ...props }, ref) => {\n   const { expandedItems, setExpandedItems } = useTree()\n\n   const expendAllTree = useCallback((elements: TreeViewElement[]) => {\n      const expandTree = (element: TreeViewElement) => {\n         const isSelectable = element.isSelectable ?? true\n         if (isSelectable && element.children && element.children.length > 0) {\n            setExpandedItems?.(prev => [...(prev ?? []), element.id])\n            element.children.forEach(expandTree)\n         }\n      }\n\n      elements.forEach(expandTree)\n   }, [])\n\n   const closeAll = useCallback(() => {\n      setExpandedItems?.([])\n   }, [])\n\n   useEffect(() => {\n      // eslint-disable-next-line no-console\n      console.log(expandAll)\n      if (expandAll) {\n         expendAllTree(elements)\n      }\n   }, [expandAll])\n\n   return (\n      <Button\n         variant=\"ghost\"\n         className=\"absolute bottom-1 right-2 h-8 w-fit p-1\"\n         onClick={\n            expandedItems && expandedItems.length > 0\n               ? closeAll\n               : () => expendAllTree(elements)\n         }\n         ref={ref}\n         {...props}\n      >\n         {children}\n         <span className=\"sr-only\">Toggle</span>\n      </Button>\n   )\n})\n\nCollapseButton.displayName = 'CollapseButton'\n\nexport { CollapseButton, File, Folder, Tree, type TreeViewElement }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\"\nimport type React from \"react\"\nimport {\n   createContext,\n   forwardRef,\n   useCallback,\n   useContext,\n   useEffect,\n   useState,\n} from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { ScrollArea } from \"~/registry/default/ui/scroll-area\"\n\ninterface TreeViewElement {\n   id: string\n   name: string\n   isSelectable?: boolean\n   children?: TreeViewElement[]\n}\n\ninterface TreeContextProps {\n   selectedId: string | undefined\n   expandedItems: string[] | undefined\n   indicator: boolean\n   handleExpand: (id: string) => void\n   selectItem: (id: string) => void\n   setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>\n   openIcon?: React.ReactNode\n   closeIcon?: React.ReactNode\n   direction: \"rtl\" | \"ltr\"\n}\n\nconst TreeContext = createContext<TreeContextProps | null>(null)\n\nfunction useTree() {\n   const context = useContext(TreeContext)\n   if (!context) {\n      throw new Error(\"useTree must be used within a TreeProvider\")\n   }\n   return context\n}\n\ninterface TreeViewComponentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\ntype Direction = \"rtl\" | \"ltr\" | undefined\n\ntype TreeViewProps = {\n   initialSelectedId?: string\n   indicator?: boolean\n   elements?: TreeViewElement[]\n   initialExpandedItems?: string[]\n   openIcon?: React.ReactNode\n   closeIcon?: React.ReactNode\n} & TreeViewComponentProps\n\nconst Tree = forwardRef<HTMLDivElement, TreeViewProps>(\n   (\n      {\n         className,\n         elements,\n         initialSelectedId,\n         initialExpandedItems,\n         children,\n         indicator = true,\n         openIcon,\n         closeIcon,\n         dir,\n         ...props\n      },\n      ref,\n   ) => {\n      const [selectedId, setSelectedId] = useState<string | undefined>(\n         initialSelectedId,\n      )\n      const [expandedItems, setExpandedItems] = useState<string[] | undefined>(\n         initialExpandedItems,\n      )\n\n      const selectItem = useCallback((id: string) => {\n         setSelectedId(id)\n      }, [])\n\n      const handleExpand = useCallback((id: string) => {\n         setExpandedItems((prev) => {\n            if (prev?.includes(id)) {\n               return prev.filter((item) => item !== id)\n            }\n            return [...(prev ?? []), id]\n         })\n      }, [])\n\n      const expandSpecificTargetedElements = useCallback(\n         (elements?: TreeViewElement[], selectId?: string) => {\n            if (!elements || !selectId) return\n            const findParent = (\n               currentElement: TreeViewElement,\n               currentPath: string[] = [],\n            ) => {\n               const isSelectable = currentElement.isSelectable ?? true\n               const newPath = [...currentPath, currentElement.id]\n               if (currentElement.id === selectId) {\n                  if (isSelectable) {\n                     setExpandedItems((prev) => [...(prev ?? []), ...newPath])\n                  } else {\n                     if (newPath.includes(currentElement.id)) {\n                        newPath.pop()\n                        setExpandedItems((prev) => [\n                           ...(prev ?? []),\n                           ...newPath,\n                        ])\n                     }\n                  }\n                  return\n               }\n               if (\n                  isSelectable &&\n                  currentElement.children &&\n                  currentElement.children.length > 0\n               ) {\n                  currentElement.children.forEach((child) => {\n                     findParent(child, newPath)\n                  })\n               }\n            }\n            elements.forEach((element) => {\n               findParent(element)\n            })\n         },\n         [],\n      )\n\n      useEffect(() => {\n         if (initialSelectedId) {\n            expandSpecificTargetedElements(elements, initialSelectedId)\n         }\n      }, [initialSelectedId, elements])\n\n      const direction = dir === \"rtl\" ? \"rtl\" : \"ltr\"\n\n      return (\n         <TreeContext.Provider\n            value={{\n               selectedId,\n               expandedItems,\n               handleExpand,\n               selectItem,\n               setExpandedItems,\n               indicator,\n               openIcon,\n               closeIcon,\n               direction,\n            }}\n         >\n            <div className={ny(\"size-full\", className)}>\n               <ScrollArea\n                  ref={ref}\n                  className=\"relative h-full px-2\"\n                  dir={dir as Direction}\n               >\n                  <AccordionPrimitive.Root\n                     {...props}\n                     type=\"multiple\"\n                     defaultValue={expandedItems}\n                     value={expandedItems}\n                     className=\"flex flex-col gap-1\"\n                     onValueChange={(value) =>\n                        setExpandedItems((prev) => [...(prev ?? []), value[0]])\n                     }\n                     dir={dir as Direction}\n                  >\n                     {children}\n                  </AccordionPrimitive.Root>\n               </ScrollArea>\n            </div>\n         </TreeContext.Provider>\n      )\n   },\n)\n\nTree.displayName = \"Tree\"\n\nconst TreeIndicator = forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { direction } = useTree()\n\n   return (\n      <div\n         dir={direction}\n         ref={ref}\n         className={ny(\n            \"bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\n\nTreeIndicator.displayName = \"TreeIndicator\"\n\ninterface FolderComponentProps\n   extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {}\n\ntype FolderProps = {\n   expandedItems?: string[]\n   element: string\n   isSelectable?: boolean\n   isSelect?: boolean\n} & FolderComponentProps\n\nconst Folder = forwardRef<\n   HTMLDivElement,\n   FolderProps & React.HTMLAttributes<HTMLDivElement>\n>(\n   (\n      {\n         className,\n         element,\n         value,\n         isSelectable = true,\n         isSelect,\n         children,\n         ...props\n      },\n      _ref,\n   ) => {\n      const {\n         direction,\n         handleExpand,\n         expandedItems,\n         indicator,\n         setExpandedItems,\n         openIcon,\n         closeIcon,\n      } = useTree()\n\n      return (\n         <AccordionPrimitive.Item\n            {...props}\n            value={value}\n            className=\"relative h-full overflow-hidden \"\n         >\n            <AccordionPrimitive.Trigger\n               className={ny(\n                  `flex items-center gap-1 rounded-md text-sm`,\n                  className,\n                  {\n                     \"bg-muted rounded-md\": isSelect && isSelectable,\n                     \"cursor-pointer\": isSelectable,\n                     \"cursor-not-allowed opacity-50\": !isSelectable,\n                  },\n               )}\n               disabled={!isSelectable}\n               onClick={() => handleExpand(value)}\n            >\n               {expandedItems?.includes(value)\n                  ? (openIcon ?? <FolderOpenIcon className=\"size-4\" />)\n                  : (closeIcon ?? <FolderIcon className=\"size-4\" />)}\n               <span>{element}</span>\n            </AccordionPrimitive.Trigger>\n            <AccordionPrimitive.Content className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative h-full overflow-hidden text-sm\">\n               {element && indicator && <TreeIndicator aria-hidden=\"true\" />}\n               <AccordionPrimitive.Root\n                  dir={direction}\n                  type=\"multiple\"\n                  className=\"ml-5 flex flex-col gap-1 py-1 rtl:mr-5 \"\n                  defaultValue={expandedItems}\n                  value={expandedItems}\n                  onValueChange={(value) => {\n                     setExpandedItems?.((prev) => [...(prev ?? []), value[0]])\n                  }}\n               >\n                  {children}\n               </AccordionPrimitive.Root>\n            </AccordionPrimitive.Content>\n         </AccordionPrimitive.Item>\n      )\n   },\n)\n\nFolder.displayName = \"Folder\"\n\nconst File = forwardRef<\n   HTMLButtonElement,\n   {\n      value: string\n      handleSelect?: (id: string) => void\n      isSelectable?: boolean\n      isSelect?: boolean\n      fileIcon?: React.ReactNode\n   } & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(\n   (\n      {\n         value,\n         className,\n         handleSelect,\n         isSelectable = true,\n         isSelect,\n         fileIcon,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const { direction, selectedId, selectItem } = useTree()\n      const isSelected = isSelect ?? selectedId === value\n      return (\n         <AccordionPrimitive.Item value={value} className=\"relative\">\n            <AccordionPrimitive.Trigger\n               ref={ref}\n               {...props}\n               dir={direction}\n               disabled={!isSelectable}\n               aria-label=\"File\"\n               className={ny(\n                  \"flex cursor-pointer items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out  rtl:pl-1 rtl:pr-0\",\n                  {\n                     \"bg-muted\": isSelected && isSelectable,\n                  },\n                  isSelectable\n                     ? \"cursor-pointer\"\n                     : \"cursor-not-allowed opacity-50\",\n                  className,\n               )}\n               onClick={() => selectItem(value)}\n            >\n               {fileIcon ?? <FileIcon className=\"size-4\" />}\n               {children}\n            </AccordionPrimitive.Trigger>\n         </AccordionPrimitive.Item>\n      )\n   },\n)\n\nFile.displayName = \"File\"\n\nconst CollapseButton = forwardRef<\n   HTMLButtonElement,\n   {\n      elements: TreeViewElement[]\n      expandAll?: boolean\n   } & React.HTMLAttributes<HTMLButtonElement>\n>(({ className, elements, expandAll = false, children, ...props }, ref) => {\n   const { expandedItems, setExpandedItems } = useTree()\n\n   const expendAllTree = useCallback((elements: TreeViewElement[]) => {\n      const expandTree = (element: TreeViewElement) => {\n         const isSelectable = element.isSelectable ?? true\n         if (isSelectable && element.children && element.children.length > 0) {\n            setExpandedItems?.((prev) => [...(prev ?? []), element.id])\n            element.children.forEach(expandTree)\n         }\n      }\n\n      elements.forEach(expandTree)\n   }, [])\n\n   const closeAll = useCallback(() => {\n      setExpandedItems?.([])\n   }, [])\n\n   useEffect(() => {\n      // eslint-disable-next-line no-console\n      console.log(expandAll)\n      if (expandAll) {\n         expendAllTree(elements)\n      }\n   }, [expandAll])\n\n   return (\n      <Button\n         variant=\"ghost\"\n         className=\"absolute bottom-1 right-2 h-8 w-fit p-1\"\n         onClick={\n            expandedItems && expandedItems.length > 0\n               ? closeAll\n               : () => expendAllTree(elements)\n         }\n         ref={ref}\n         {...props}\n      >\n         {children}\n         <span className=\"sr-only\">Toggle</span>\n      </Button>\n   )\n})\n\nCollapseButton.displayName = \"CollapseButton\"\n\nexport { CollapseButton, File, Folder, Tree, type TreeViewElement }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/flickering-grid-demo.json b/apps/web/public/r/styles/default/flickering-grid-demo.json
index 6bd27ac4..f9aea616 100644
--- a/apps/web/public/r/styles/default/flickering-grid-demo.json
+++ b/apps/web/public/r/styles/default/flickering-grid-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "flickering-grid-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/flickering-grid-demo.tsx",
-      "content": "import FlickeringGrid from '~/registry/default/ui/flickering-grid'\n\nexport default function FlickeringGridDemo() {\n   return (\n      <div className=\"bg-background relative h-[500px] w-full overflow-hidden rounded-lg border\">\n         <FlickeringGrid\n            className=\"absolute inset-0 z-0 size-full\"\n            squareSize={4}\n            gridGap={6}\n            color=\"#6B7280\"\n            maxOpacity={0.5}\n            flickerChance={0.1}\n            height={800}\n            width={800}\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/flickering-grid-demo.tsx",
+      "content": "import { FlickeringGrid } from \"~/registry/default/ui/flickering-grid\"\n\nexport default function FlickeringGridDemo() {\n   return (\n      <div className=\"relative h-[500px] w-full overflow-hidden rounded-lg border bg-background\">\n         <FlickeringGrid\n            className=\"absolute inset-0 z-0 size-full\"\n            squareSize={4}\n            gridGap={6}\n            color=\"#6B7280\"\n            maxOpacity={0.5}\n            flickerChance={0.1}\n            height={800}\n            width={800}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/flickering-grid-rounded-demo.json b/apps/web/public/r/styles/default/flickering-grid-rounded-demo.json
index 55051e6f..447cffe4 100644
--- a/apps/web/public/r/styles/default/flickering-grid-rounded-demo.json
+++ b/apps/web/public/r/styles/default/flickering-grid-rounded-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "flickering-grid-rounded-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/flickering-grid-rounded-demo.tsx",
-      "content": "import FlickeringGrid from '~/registry/default/ui/flickering-grid'\n\nexport default function FlickeringGridRoundedDemo() {\n   return (\n      <div className=\"bg-background relative size-[600px] w-full overflow-hidden rounded-lg border\">\n         <FlickeringGrid\n            className=\"absolute inset-0 z-0 [mask:radial-gradient(circle_at_center,#fff_300px,transparent_0)]\"\n            squareSize={4}\n            gridGap={6}\n            color=\"#60A5FA\"\n            maxOpacity={0.5}\n            flickerChance={0.1}\n            height={800}\n            width={800}\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/flickering-grid-rounded-demo.tsx",
+      "content": "import { FlickeringGrid } from \"~/registry/default/ui/flickering-grid\"\n\nexport default function FlickeringGridRoundedDemo() {\n   return (\n      <div className=\"relative size-[600px] w-full overflow-hidden rounded-lg border bg-background\">\n         <FlickeringGrid\n            className=\"relative inset-0 z-0 [mask-image:radial-gradient(450px_circle_at_center,white,transparent)]\"\n            squareSize={4}\n            gridGap={6}\n            color=\"#60A5FA\"\n            maxOpacity={0.5}\n            flickerChance={0.1}\n            height={800}\n            width={800}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/flickering-grid.json b/apps/web/public/r/styles/default/flickering-grid.json
index 1475e6df..510759ba 100644
--- a/apps/web/public/r/styles/default/flickering-grid.json
+++ b/apps/web/public/r/styles/default/flickering-grid.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "flickering-grid",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/flickering-grid.tsx",
-      "content": "'use client'\n\nimport React, {\n   useCallback,\n   useEffect,\n   useMemo,\n   useRef,\n   useState,\n} from 'react'\n\ninterface FlickeringGridProps {\n   squareSize?: number\n   gridGap?: number\n   flickerChance?: number\n   color?: string\n   width?: number\n   height?: number\n   className?: string\n   maxOpacity?: number\n}\n\nconst FlickeringGrid: React.FC<FlickeringGridProps> = ({\n   squareSize = 4,\n   gridGap = 6,\n   flickerChance = 0.3,\n   color = 'rgb(0, 0, 0)',\n   width,\n   height,\n   className,\n   maxOpacity = 0.3,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const [isInView, setIsInView] = useState(false)\n\n   const memoizedColor = useMemo(() => {\n      const toRGBA = (color: string) => {\n         if (typeof window === 'undefined') {\n            return `rgba(0, 0, 0,`\n         }\n         const canvas = document.createElement('canvas')\n         canvas.width = canvas.height = 1\n         const ctx = canvas.getContext('2d')\n         if (!ctx)\n            return 'rgba(255, 0, 0,'\n         ctx.fillStyle = color\n         ctx.fillRect(0, 0, 1, 1)\n         const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data\n         return `rgba(${r}, ${g}, ${b},`\n      }\n      return toRGBA(color)\n   }, [color])\n\n   const setupCanvas = useCallback(\n      (canvas: HTMLCanvasElement) => {\n         const canvasWidth = width || canvas.clientWidth\n         const canvasHeight = height || canvas.clientHeight\n         const dpr = window.devicePixelRatio || 1\n         canvas.width = canvasWidth * dpr\n         canvas.height = canvasHeight * dpr\n         canvas.style.width = `${canvasWidth}px`\n         canvas.style.height = `${canvasHeight}px`\n         const cols = Math.floor(canvasWidth / (squareSize + gridGap))\n         const rows = Math.floor(canvasHeight / (squareSize + gridGap))\n\n         const squares = new Float32Array(cols * rows)\n         for (let i = 0; i < squares.length; i++) {\n            squares[i] = Math.random() * maxOpacity\n         }\n\n         return {\n            width: canvasWidth,\n            height: canvasHeight,\n            cols,\n            rows,\n            squares,\n            dpr,\n         }\n      },\n      [squareSize, gridGap, width, height, maxOpacity],\n   )\n\n   const updateSquares = useCallback(\n      (squares: Float32Array, deltaTime: number) => {\n         for (let i = 0; i < squares.length; i++) {\n            if (Math.random() < flickerChance * deltaTime) {\n               squares[i] = Math.random() * maxOpacity\n            }\n         }\n      },\n      [flickerChance, maxOpacity],\n   )\n\n   const drawGrid = useCallback(\n      (\n         ctx: CanvasRenderingContext2D,\n         width: number,\n         height: number,\n         cols: number,\n         rows: number,\n         squares: Float32Array,\n         dpr: number,\n      ) => {\n         ctx.clearRect(0, 0, width, height)\n         ctx.fillStyle = 'transparent'\n         ctx.fillRect(0, 0, width, height)\n\n         for (let i = 0; i < cols; i++) {\n            for (let j = 0; j < rows; j++) {\n               const opacity = squares[i * rows + j]\n               ctx.fillStyle = `${memoizedColor}${opacity})`\n               ctx.fillRect(\n                  i * (squareSize + gridGap) * dpr,\n                  j * (squareSize + gridGap) * dpr,\n                  squareSize * dpr,\n                  squareSize * dpr,\n               )\n            }\n         }\n      },\n      [memoizedColor, squareSize, gridGap],\n   )\n\n   useEffect(() => {\n      const canvas = canvasRef.current\n      if (!canvas)\n         return\n\n      const ctx = canvas.getContext('2d')\n      if (!ctx)\n         return\n\n      let animationFrameId: number\n      let { width, height, cols, rows, squares, dpr } = setupCanvas(canvas)\n\n      let lastTime = 0\n      const animate = (time: number) => {\n         if (!isInView)\n            return\n\n         const deltaTime = (time - lastTime) / 1000\n         lastTime = time\n\n         updateSquares(squares, deltaTime)\n         drawGrid(ctx, width * dpr, height * dpr, cols, rows, squares, dpr)\n         animationFrameId = requestAnimationFrame(animate)\n      }\n\n      const handleResize = () => {\n         ({ width, height, cols, rows, squares, dpr } = setupCanvas(canvas))\n      }\n\n      const observer = new IntersectionObserver(\n         ([entry]) => {\n            setIsInView(entry.isIntersecting)\n         },\n         { threshold: 0 },\n      )\n\n      observer.observe(canvas)\n\n      window.addEventListener('resize', handleResize)\n\n      if (isInView) {\n         animationFrameId = requestAnimationFrame(animate)\n      }\n\n      return () => {\n         window.removeEventListener('resize', handleResize)\n         cancelAnimationFrame(animationFrameId)\n         observer.disconnect()\n      }\n   }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])\n\n   return (\n      <canvas\n         ref={canvasRef}\n         className={`pointer-events-none size-full ${className}`}\n         style={{\n            width: width || '100%',\n            height: height || '100%',\n         }}\n         width={width}\n         height={height}\n      />\n   )\n}\n\nexport default FlickeringGrid\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { ny } from \"~/registry/default/lib/utils\"\n\ninterface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {\n   squareSize?: number\n   gridGap?: number\n   flickerChance?: number\n   color?: string\n   width?: number\n   height?: number\n   className?: string\n   maxOpacity?: number\n}\n\nexport const FlickeringGrid: React.FC<FlickeringGridProps> = ({\n   squareSize = 4,\n   gridGap = 6,\n   flickerChance = 0.3,\n   color = \"rgb(0, 0, 0)\",\n   width,\n   height,\n   className,\n   maxOpacity = 0.3,\n   ...props\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const containerRef = useRef<HTMLDivElement>(null)\n   const [isInView, setIsInView] = useState(false)\n   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 })\n\n   const memoizedColor = useMemo(() => {\n      const toRGBA = (color: string) => {\n         if (typeof window === \"undefined\") {\n            return `rgba(0, 0, 0,`\n         }\n         const canvas = document.createElement(\"canvas\")\n         canvas.width = canvas.height = 1\n         const ctx = canvas.getContext(\"2d\")\n         if (!ctx) return \"rgba(255, 0, 0,\"\n         ctx.fillStyle = color\n         ctx.fillRect(0, 0, 1, 1)\n         const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)\n         return `rgba(${r}, ${g}, ${b},`\n      }\n      return toRGBA(color)\n   }, [color])\n\n   const setupCanvas = useCallback(\n      (canvas: HTMLCanvasElement, width: number, height: number) => {\n         const dpr = window.devicePixelRatio || 1\n         canvas.width = width * dpr\n         canvas.height = height * dpr\n         canvas.style.width = `${width}px`\n         canvas.style.height = `${height}px`\n         const cols = Math.floor(width / (squareSize + gridGap))\n         const rows = Math.floor(height / (squareSize + gridGap))\n\n         const squares = new Float32Array(cols * rows)\n         for (let i = 0; i < squares.length; i++) {\n            squares[i] = Math.random() * maxOpacity\n         }\n\n         return { cols, rows, squares, dpr }\n      },\n      [squareSize, gridGap, maxOpacity],\n   )\n\n   const updateSquares = useCallback(\n      (squares: Float32Array, deltaTime: number) => {\n         for (let i = 0; i < squares.length; i++) {\n            if (Math.random() < flickerChance * deltaTime) {\n               squares[i] = Math.random() * maxOpacity\n            }\n         }\n      },\n      [flickerChance, maxOpacity],\n   )\n\n   const drawGrid = useCallback(\n      (\n         ctx: CanvasRenderingContext2D,\n         width: number,\n         height: number,\n         cols: number,\n         rows: number,\n         squares: Float32Array,\n         dpr: number,\n      ) => {\n         ctx.clearRect(0, 0, width, height)\n         ctx.fillStyle = \"transparent\"\n         ctx.fillRect(0, 0, width, height)\n\n         for (let i = 0; i < cols; i++) {\n            for (let j = 0; j < rows; j++) {\n               const opacity = squares[i * rows + j]\n               ctx.fillStyle = `${memoizedColor}${opacity})`\n               ctx.fillRect(\n                  i * (squareSize + gridGap) * dpr,\n                  j * (squareSize + gridGap) * dpr,\n                  squareSize * dpr,\n                  squareSize * dpr,\n               )\n            }\n         }\n      },\n      [memoizedColor, squareSize, gridGap],\n   )\n\n   useEffect(() => {\n      const canvas = canvasRef.current\n      const container = containerRef.current\n      if (!canvas || !container) return\n\n      const ctx = canvas.getContext(\"2d\")\n      if (!ctx) return\n\n      let animationFrameId: number\n      let gridParams: ReturnType<typeof setupCanvas>\n\n      const updateCanvasSize = () => {\n         const newWidth = width || container.clientWidth\n         const newHeight = height || container.clientHeight\n         setCanvasSize({ width: newWidth, height: newHeight })\n         gridParams = setupCanvas(canvas, newWidth, newHeight)\n      }\n\n      updateCanvasSize()\n\n      let lastTime = 0\n      const animate = (time: number) => {\n         if (!isInView) return\n\n         const deltaTime = (time - lastTime) / 1000\n         lastTime = time\n\n         updateSquares(gridParams.squares, deltaTime)\n         drawGrid(\n            ctx,\n            canvas.width,\n            canvas.height,\n            gridParams.cols,\n            gridParams.rows,\n            gridParams.squares,\n            gridParams.dpr,\n         )\n         animationFrameId = requestAnimationFrame(animate)\n      }\n\n      const resizeObserver = new ResizeObserver(() => {\n         updateCanvasSize()\n      })\n\n      resizeObserver.observe(container)\n\n      const intersectionObserver = new IntersectionObserver(\n         ([entry]) => {\n            setIsInView(entry.isIntersecting)\n         },\n         { threshold: 0 },\n      )\n\n      intersectionObserver.observe(canvas)\n\n      if (isInView) {\n         animationFrameId = requestAnimationFrame(animate)\n      }\n\n      return () => {\n         cancelAnimationFrame(animationFrameId)\n         resizeObserver.disconnect()\n         intersectionObserver.disconnect()\n      }\n   }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])\n\n   return (\n      <div\n         ref={containerRef}\n         className={ny(`h-full w-full ${className}`)}\n         {...props}\n      >\n         <canvas\n            ref={canvasRef}\n            className=\"pointer-events-none\"\n            style={{\n               width: canvasSize.width,\n               height: canvasSize.height,\n            }}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/flip-text-demo.json b/apps/web/public/r/styles/default/flip-text-demo.json
index c95dc34c..2483d6fb 100644
--- a/apps/web/public/r/styles/default/flip-text-demo.json
+++ b/apps/web/public/r/styles/default/flip-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "flip-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/flip-text-demo.tsx",
-      "content": "import FlipText from '~/registry/default/ui/flip-text'\n\nexport default async function FlipTextDemo() {\n   return (\n      <FlipText\n         className=\"text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         word=\"Flip Text\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/flip-text-demo.tsx",
+      "content": "import FlipText from \"~/registry/default/ui/flip-text\"\n\nexport default async function FlipTextDemo() {\n   return (\n      <FlipText\n         className=\"text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         word=\"Flip Text\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/flip-text.json b/apps/web/public/r/styles/default/flip-text.json
index 5ace0bea..7e58f1a6 100644
--- a/apps/web/public/r/styles/default/flip-text.json
+++ b/apps/web/public/r/styles/default/flip-text.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "flip-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/flip-text.tsx",
-      "content": "'use client'\n\nimport type { Variants } from 'framer-motion'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface SlightFlipProps {\n   word: string\n   duration?: number\n   delayMultiple?: number\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function SlightFlip({\n   word,\n   duration = 0.5,\n   delayMultiple = 0.08,\n   framerProps = {\n      hidden: { rotateX: -90, opacity: 0 },\n      visible: { rotateX: 0, opacity: 1 },\n   },\n   className,\n}: SlightFlipProps) {\n   return (\n      <div className=\"flex justify-center space-x-2\">\n         <AnimatePresence mode=\"wait\">\n            {word.split('').map((char, i) => (\n               <motion.span\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={framerProps}\n                  transition={{ duration, delay: i * delayMultiple }}\n                  className={ny('origin-center drop-shadow-sm', className)}\n               >\n                  {char}\n               </motion.span>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface SlightFlipProps {\n   word: string\n   duration?: number\n   delayMultiple?: number\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function SlightFlip({\n   word,\n   duration = 0.5,\n   delayMultiple = 0.08,\n   framerProps = {\n      hidden: { rotateX: -90, opacity: 0 },\n      visible: { rotateX: 0, opacity: 1 },\n   },\n   className,\n}: SlightFlipProps) {\n   return (\n      <div className=\"flex justify-center space-x-2\">\n         <AnimatePresence mode=\"wait\">\n            {word.split(\"\").map((char, i) => (\n               <motion.span\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={framerProps}\n                  transition={{ duration, delay: i * delayMultiple }}\n                  className={ny(\"origin-center drop-shadow-sm\", className)}\n               >\n                  {char}\n               </motion.span>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/form.json b/apps/web/public/r/styles/default/form.json
index 8a48caba..e686565c 100644
--- a/apps/web/public/r/styles/default/form.json
+++ b/apps/web/public/r/styles/default/form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "form",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-label",
     "@radix-ui/react-slot",
@@ -15,8 +17,8 @@
   "files": [
     {
       "path": "ui/form.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport type * as LabelPrimitive from '@radix-ui/react-label'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form'\nimport { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form'\n\nimport { ny } from '~/lib/utils'\nimport { Label } from '~/registry/default/ui/label'\n\nconst Form = FormProvider\n\ninterface FormFieldContextValue<\n   TFieldValues extends FieldValues = FieldValues,\n   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n   name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n   {} as FormFieldContextValue,\n)\n\nfunction FormField<\n   TFieldValues extends FieldValues = FieldValues,\n   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: ControllerProps<TFieldValues, TName>) {\n   return (\n      <FormFieldContext.Provider value={{ name: props.name }}>\n         <Controller {...props} />\n      </FormFieldContext.Provider>\n   )\n}\n\nfunction useFormField() {\n   const fieldContext = React.useContext(FormFieldContext)\n   const itemContext = React.useContext(FormItemContext)\n   const { getFieldState, formState } = useFormContext()\n\n   const fieldState = getFieldState(fieldContext.name, formState)\n\n   if (!fieldContext)\n      throw new Error('useFormField should be used within <FormField>')\n\n   const { id } = itemContext\n\n   return {\n      id,\n      name: fieldContext.name,\n      formItemId: `${id}-form-item`,\n      formDescriptionId: `${id}-form-item-description`,\n      formMessageId: `${id}-form-item-message`,\n      ...fieldState,\n   }\n}\n\ninterface FormItemContextValue {\n   id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n   {} as FormItemContextValue,\n)\n\nconst FormItem = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const id = React.useId()\n\n   return (\n      <FormItemContext.Provider value={{ id }}>\n         <div ref={ref} className={ny('space-y-2', className)} {...props} />\n      </FormItemContext.Provider>\n   )\n})\nFormItem.displayName = 'FormItem'\n\nconst FormLabel = React.forwardRef<\n   React.ElementRef<typeof LabelPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n   const { error, formItemId } = useFormField()\n\n   return (\n      <Label\n         ref={ref}\n         className={ny(error && 'text-destructive', className)}\n         htmlFor={formItemId}\n         {...props}\n      />\n   )\n})\nFormLabel.displayName = 'FormLabel'\n\nconst FormControl = React.forwardRef<\n   React.ElementRef<typeof Slot>,\n   React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n   const { error, formItemId, formDescriptionId, formMessageId }\n    = useFormField()\n\n   return (\n      <Slot\n         ref={ref}\n         id={formItemId}\n         aria-describedby={\n            !error\n               ? `${formDescriptionId}`\n               : `${formDescriptionId} ${formMessageId}`\n         }\n         aria-invalid={!!error}\n         {...props}\n      />\n   )\n})\nFormControl.displayName = 'FormControl'\n\nconst FormDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n   const { formDescriptionId } = useFormField()\n\n   return (\n      <p\n         ref={ref}\n         id={formDescriptionId}\n         className={ny('text-muted-foreground text-sm', className)}\n         {...props}\n      />\n   )\n})\nFormDescription.displayName = 'FormDescription'\n\nconst FormMessage = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n   const { error, formMessageId } = useFormField()\n   const body = error ? String(error?.message) : children\n\n   if (!body)\n      return null\n\n   return (\n      <p\n         ref={ref}\n         id={formMessageId}\n         className={ny('text-destructive text-sm font-medium', className)}\n         {...props}\n      >\n         {body}\n      </p>\n   )\n})\nFormMessage.displayName = 'FormMessage'\n\nconst FormGlobalError = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n   const { errors } = useFormState()\n   const rootError = errors.root\n   if (!rootError)\n      return null\n\n   return (\n      <p\n         ref={ref}\n         className={ny('text-destructive text-sm font-medium', className)}\n         {...props}\n      >\n         {rootError.message}\n      </p>\n   )\n})\nFormGlobalError.displayName = 'FormGlobalError'\n\nexport {\n   useFormField,\n   Form,\n   FormItem,\n   FormLabel,\n   FormControl,\n   FormDescription,\n   FormMessage,\n   FormGlobalError,\n   FormField,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport * as React from \"react\"\nimport type { ControllerProps, FieldPath, FieldValues } from \"react-hook-form\"\nimport {\n   Controller,\n   FormProvider,\n   useFormContext,\n   useFormState,\n} from \"react-hook-form\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nconst Form = FormProvider\n\ninterface FormFieldContextValue<\n   TFieldValues extends FieldValues = FieldValues,\n   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n   name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n   {} as FormFieldContextValue,\n)\n\nfunction FormField<\n   TFieldValues extends FieldValues = FieldValues,\n   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: ControllerProps<TFieldValues, TName>) {\n   return (\n      <FormFieldContext.Provider value={{ name: props.name }}>\n         <Controller {...props} />\n      </FormFieldContext.Provider>\n   )\n}\n\nfunction useFormField() {\n   const fieldContext = React.useContext(FormFieldContext)\n   const itemContext = React.useContext(FormItemContext)\n   const { getFieldState, formState } = useFormContext()\n\n   const fieldState = getFieldState(fieldContext.name, formState)\n\n   if (!fieldContext)\n      throw new Error(\"useFormField should be used within <FormField>\")\n\n   const { id } = itemContext\n\n   return {\n      id,\n      name: fieldContext.name,\n      formItemId: `${id}-form-item`,\n      formDescriptionId: `${id}-form-item-description`,\n      formMessageId: `${id}-form-item-message`,\n      ...fieldState,\n   }\n}\n\ninterface FormItemContextValue {\n   id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n   {} as FormItemContextValue,\n)\n\nconst FormItem = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const id = React.useId()\n\n   return (\n      <FormItemContext.Provider value={{ id }}>\n         <div ref={ref} className={ny(\"space-y-2\", className)} {...props} />\n      </FormItemContext.Provider>\n   )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n   React.ElementRef<typeof LabelPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n   const { error, formItemId } = useFormField()\n\n   return (\n      <Label\n         ref={ref}\n         className={ny(error && \"text-destructive\", className)}\n         htmlFor={formItemId}\n         {...props}\n      />\n   )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n   React.ElementRef<typeof Slot>,\n   React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n   const { error, formItemId, formDescriptionId, formMessageId } =\n      useFormField()\n\n   return (\n      <Slot\n         ref={ref}\n         id={formItemId}\n         aria-describedby={\n            !error\n               ? `${formDescriptionId}`\n               : `${formDescriptionId} ${formMessageId}`\n         }\n         aria-invalid={!!error}\n         {...props}\n      />\n   )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n   const { formDescriptionId } = useFormField()\n\n   return (\n      <p\n         ref={ref}\n         id={formDescriptionId}\n         className={ny(\"text-muted-foreground text-sm\", className)}\n         {...props}\n      />\n   )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n   const { error, formMessageId } = useFormField()\n   const body = error ? String(error?.message) : children\n\n   if (!body) return null\n\n   return (\n      <p\n         ref={ref}\n         id={formMessageId}\n         className={ny(\"text-destructive text-sm font-medium\", className)}\n         {...props}\n      >\n         {body}\n      </p>\n   )\n})\nFormMessage.displayName = \"FormMessage\"\n\nconst FormGlobalError = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n   const { errors } = useFormState()\n   const rootError = errors.root\n   if (!rootError) return null\n\n   return (\n      <p\n         ref={ref}\n         className={ny(\"text-destructive text-sm font-medium\", className)}\n         {...props}\n      >\n         {rootError.message}\n      </p>\n   )\n})\nFormGlobalError.displayName = \"FormGlobalError\"\n\nexport {\n   useFormField,\n   Form,\n   FormItem,\n   FormLabel,\n   FormControl,\n   FormDescription,\n   FormMessage,\n   FormGlobalError,\n   FormField,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/gauge-circle-demo.json b/apps/web/public/r/styles/default/gauge-circle-demo.json
index 26be9572..ea66f91f 100644
--- a/apps/web/public/r/styles/default/gauge-circle-demo.json
+++ b/apps/web/public/r/styles/default/gauge-circle-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "gauge-circle-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/gauge-circle-demo.tsx",
-      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport GaugeCircle from '~/registry/default/ui/gauge-circle'\n\nexport default function GaugeCircleDemo() {\n   const [value, setValue] = useState(0)\n\n   useEffect(() => {\n      const handleIncrement = (prev: number) => {\n         if (prev === 100)\n            return 0\n\n         return prev + 10\n      }\n      setValue(handleIncrement)\n      const interval = setInterval(() => setValue(handleIncrement), 2000)\n      return () => clearInterval(interval)\n   }, [])\n\n   return (\n      <GaugeCircle\n         max={100}\n         min={0}\n         value={value}\n         gaugePrimaryColor=\"rgb(79 70 229)\"\n         gaugeSecondaryColor=\"rgba(0, 0, 0, 0.1)\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/gauge-circle-demo.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport GaugeCircle from \"~/registry/default/ui/gauge-circle\"\n\nexport default function GaugeCircleDemo() {\n   const [value, setValue] = useState(0)\n\n   useEffect(() => {\n      const handleIncrement = (prev: number) => {\n         if (prev === 100) return 0\n\n         return prev + 10\n      }\n      setValue(handleIncrement)\n      const interval = setInterval(() => setValue(handleIncrement), 2000)\n      return () => clearInterval(interval)\n   }, [])\n\n   return (\n      <GaugeCircle\n         max={100}\n         min={0}\n         value={value}\n         gaugePrimaryColor=\"rgb(79 70 229)\"\n         gaugeSecondaryColor=\"rgba(0, 0, 0, 0.1)\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/gauge-circle.json b/apps/web/public/r/styles/default/gauge-circle.json
index 321e5be0..7ed9fab3 100644
--- a/apps/web/public/r/styles/default/gauge-circle.json
+++ b/apps/web/public/r/styles/default/gauge-circle.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "gauge-circle",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/gauge-circle.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\ninterface Props {\n   max: number\n   value: number\n   min: number\n   gaugePrimaryColor: string\n   gaugeSecondaryColor: string\n   className?: string\n}\n\nexport default function GaugeCircle({\n   max = 100,\n   min = 0,\n   value = 0,\n   gaugePrimaryColor,\n   gaugeSecondaryColor,\n   className,\n}: Props) {\n   const circumference = 2 * Math.PI * 45\n   const percentPx = circumference / 100\n   const currentPercent = ((value - min) / (max - min)) * 100\n\n   return (\n      <div\n         className={ny('relative size-40 text-2xl font-semibold', className)}\n         style={\n            {\n               '--circle-size': '100px',\n               '--circumference': `${circumference}px`,\n               '--percent-to-px': `${percentPx}px`,\n               '--gap-percent': '5',\n               '--offset-factor': '0',\n               '--transition-length': '1s',\n               '--transition-step': '200ms',\n               '--delay': '0s',\n               '--percent-to-deg': '3.6deg',\n               'transform': 'translateZ(0)',\n            } as React.CSSProperties\n         }\n      >\n         <svg\n            fill=\"none\"\n            className=\"size-full\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 100 100\"\n         >\n            {currentPercent <= 90 && currentPercent >= 0 && (\n               <circle\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"45\"\n                  strokeWidth=\"10\"\n                  strokeDashoffset=\"0\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\"opacity-100\"\n                  style={{\n                     stroke: gaugeSecondaryColor,\n                     strokeDasharray: `${(90 - currentPercent) * percentPx}px ${circumference}px`,\n                     transform: `rotate(calc(1turn - 90deg - (5 * 3.6deg * (1 - 0)))) scaleY(-1)`,\n                     transition: 'all 1s ease 0s',\n                     transformOrigin: '50px 50px',\n                  }}\n               />\n            )}\n            <circle\n               cx=\"50\"\n               cy=\"50\"\n               r=\"45\"\n               strokeWidth=\"10\"\n               strokeDashoffset=\"0\"\n               strokeLinecap=\"round\"\n               strokeLinejoin=\"round\"\n               className=\"opacity-100\"\n               style={{\n                  stroke: gaugePrimaryColor,\n                  strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,\n                  transition: '1s ease 0s, stroke 1s ease 0s',\n                  transitionProperty: 'stroke-dasharray,transform',\n                  transform: 'rotate(calc(-90deg + 5 * 0 * 3.6deg))',\n                  transformOrigin: '50px 50px',\n               }}\n            />\n         </svg>\n         <span\n            className=\"animate-in fade-in absolute inset-0 m-auto size-fit\"\n            style={{\n               animationDelay: '0s',\n               transitionDuration: '1s',\n            }}\n         >\n            {Math.round(currentPercent)}\n         </span>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/lib/utils\"\n\ninterface Props {\n   max: number\n   value: number\n   min: number\n   gaugePrimaryColor: string\n   gaugeSecondaryColor: string\n   className?: string\n}\n\nexport default function GaugeCircle({\n   max = 100,\n   min = 0,\n   value = 0,\n   gaugePrimaryColor,\n   gaugeSecondaryColor,\n   className,\n}: Props) {\n   const circumference = 2 * Math.PI * 45\n   const percentPx = circumference / 100\n   const currentPercent = ((value - min) / (max - min)) * 100\n\n   return (\n      <div\n         className={ny(\"relative size-40 text-2xl font-semibold\", className)}\n         style={\n            {\n               \"--circle-size\": \"100px\",\n               \"--circumference\": `${circumference}px`,\n               \"--percent-to-px\": `${percentPx}px`,\n               \"--gap-percent\": \"5\",\n               \"--offset-factor\": \"0\",\n               \"--transition-length\": \"1s\",\n               \"--transition-step\": \"200ms\",\n               \"--delay\": \"0s\",\n               \"--percent-to-deg\": \"3.6deg\",\n               transform: \"translateZ(0)\",\n            } as React.CSSProperties\n         }\n      >\n         <svg\n            fill=\"none\"\n            className=\"size-full\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 100 100\"\n         >\n            {currentPercent <= 90 && currentPercent >= 0 && (\n               <circle\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"45\"\n                  strokeWidth=\"10\"\n                  strokeDashoffset=\"0\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\"opacity-100\"\n                  style={{\n                     stroke: gaugeSecondaryColor,\n                     strokeDasharray: `${(90 - currentPercent) * percentPx}px ${circumference}px`,\n                     transform: `rotate(calc(1turn - 90deg - (5 * 3.6deg * (1 - 0)))) scaleY(-1)`,\n                     transition: \"all 1s ease 0s\",\n                     transformOrigin: \"50px 50px\",\n                  }}\n               />\n            )}\n            <circle\n               cx=\"50\"\n               cy=\"50\"\n               r=\"45\"\n               strokeWidth=\"10\"\n               strokeDashoffset=\"0\"\n               strokeLinecap=\"round\"\n               strokeLinejoin=\"round\"\n               className=\"opacity-100\"\n               style={{\n                  stroke: gaugePrimaryColor,\n                  strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,\n                  transition: \"1s ease 0s, stroke 1s ease 0s\",\n                  transitionProperty: \"stroke-dasharray,transform\",\n                  transform: \"rotate(calc(-90deg + 5 * 0 * 3.6deg))\",\n                  transformOrigin: \"50px 50px\",\n               }}\n            />\n         </svg>\n         <span\n            className=\"animate-in fade-in absolute inset-0 m-auto size-fit\"\n            style={{\n               animationDelay: \"0s\",\n               transitionDuration: \"1s\",\n            }}\n         >\n            {Math.round(currentPercent)}\n         </span>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/globe-demo.json b/apps/web/public/r/styles/default/globe-demo.json
index f723e53e..40b1cdec 100644
--- a/apps/web/public/r/styles/default/globe-demo.json
+++ b/apps/web/public/r/styles/default/globe-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "globe-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/globe-demo.tsx",
-      "content": "import Globe from '~/registry/default/ui/globe'\n\nexport default function GlobeDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-40 pb-40 pt-8 md:pb-60 md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Globe\n         </span>\n         <Globe className=\"top-28\" />\n         <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/globe-demo.tsx",
+      "content": "import Globe from \"~/registry/default/ui/globe\"\n\nexport default function GlobeDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-40 pb-40 pt-8 md:pb-60 md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Globe\n         </span>\n         <Globe className=\"top-28\" />\n         <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/globe-grid-demo.json b/apps/web/public/r/styles/default/globe-grid-demo.json
index 22743257..ddef249f 100644
--- a/apps/web/public/r/styles/default/globe-grid-demo.json
+++ b/apps/web/public/r/styles/default/globe-grid-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "globe-grid-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/globe-grid-demo.tsx",
-      "content": "import { GlobeGrid } from '~/registry/miami/ui/globe-grid'\n\nexport function GlobeGridDemo() {\n   return (\n      <GlobeGrid />\n   )\n}\n\nexport default GlobeGridDemo\n",
-      "type": "registry:component",
+      "path": "examples/globe-grid-demo.tsx",
+      "content": "import { GlobeGrid } from \"~/registry/miami/ui/globe-grid\"\n\nexport function GlobeGridDemo() {\n   return <GlobeGrid />\n}\n\nexport default GlobeGridDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/globe-grid-full-demo.json b/apps/web/public/r/styles/default/globe-grid-full-demo.json
index 9517caa3..ff4029c8 100644
--- a/apps/web/public/r/styles/default/globe-grid-full-demo.json
+++ b/apps/web/public/r/styles/default/globe-grid-full-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "globe-grid-full-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/globe-grid-full-demo.tsx",
-      "content": "import { GlobeGrid } from '~/registry/default/ui/globe-grid'\n\nexport function GlobeGridDemo() {\n   return (\n      <GlobeGrid fullGlobe />\n   )\n}\n\nexport default GlobeGridDemo\n",
-      "type": "registry:component",
+      "path": "examples/globe-grid-full-demo.tsx",
+      "content": "import { GlobeGrid } from \"~/registry/default/ui/globe-grid\"\n\nexport function GlobeGridDemo() {\n   return <GlobeGrid fullGlobe />\n}\n\nexport default GlobeGridDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/globe-grid.json b/apps/web/public/r/styles/default/globe-grid.json
index 0601b27c..0b1cd3bd 100644
--- a/apps/web/public/r/styles/default/globe-grid.json
+++ b/apps/web/public/r/styles/default/globe-grid.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "globe-grid",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [],
   "files": [
     {
       "path": "ui/globe-grid.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface GlobeGridProps {\n   fullGlobe?: boolean\n   className?: string\n}\n\nexport function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {\n   return (\n      <div className={ny('relative flex min-h-[350px] w-full items-center justify-center overflow-hidden', className)}>\n         <section\n            className=\"relative w-full max-w-[600px]\"\n            style={{\n               '--sm-grid-columns': '6',\n               '--md-grid-columns': '6',\n               '--sm-grid-rows': fullGlobe ? '12' : '6',\n               '--md-grid-rows': fullGlobe ? '12' : '6',\n               '--grid-columns': 'var(--sm-grid-columns)',\n               '--grid-rows': 'var(--sm-grid-rows)',\n               'aspectRatio': fullGlobe ? '1/1' : '2/1',\n            } as React.CSSProperties}\n         >\n            <style jsx>\n               {`\n               @media (min-width: 768px) {\n                  section {\n                     --grid-columns: var(--md-grid-columns);\n                     --grid-rows: var(--md-grid-rows);\n                  }\n               }\n            `}\n            </style>\n            <div className=\"absolute left-0 top-0 z-[5] ml-[-0.5px] w-full md:left-1/2 md:top-1/2 md:h-[200%] md:-translate-x-1/2 md:-translate-y-1/2\">\n               <svg\n                  aria-hidden=\"true\"\n                  height=\"100%\"\n                  style={{\n                     transform: fullGlobe\n                        ? 'translateY(0px) scale(1.002)'\n                        : 'translateY(-12.5%) scale(1.002)',\n                  }}\n                  viewBox={fullGlobe ? '-1 -1 802 802' : '-1 -151 802 602'}\n                  width=\"100%\"\n                  className=\"[--guide-color:theme(colors.border/50%)]\"\n               >\n                  <defs>\n                     <clipPath id=\"half-globe-clip\">\n                        <rect x=\"-1\" y=\"-151\" width=\"802\" height=\"551\" />\n                     </clipPath>\n                  </defs>\n\n                  <g\n                     data-testid=\"globe-wireframe\"\n                     clipPath={fullGlobe ? 'none' : 'url(#half-globe-clip)'}\n                  >\n                     <circle cx=\"400\" cy=\"400\" fill=\"var(--ds-background-200)\" r=\"400\" />\n                     <path d=\"M 400 800 A -400 400 0 0 0 400 0\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M 400 800 A -266.667 400 0 0 0 400 0\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M 400 800 A -133.333 400 0 0 0 400 0\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M 400 800 A 0 400 0 0 0 400 0\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M 400 0 A 133.333 400 0 0 0 400 800\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M 400 0 A 266.667 400 0 0 0 400 800\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M 400 0 A 400 400 0 0 0 400 800\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n\n                     <path d=\"M178.892,66.667 h442.217\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M101.858,133.333 h596.285\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M53.59,200 h692.82\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M22.876,266.667 h754.247\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M5.595,333.333 h788.811\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M0,400 h800\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     {fullGlobe && (\n                        <>\n                           <path d=\"M5.595,466.667 h788.811\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                           <path d=\"M22.876,533.333 h754.247\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                           <path d=\"M53.59,600 h692.82\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                           <path d=\"M101.858,666.667 h596.285\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                           <path d=\"M178.892,733.333 h442.217\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                        </>\n                     )}\n                  </g>\n\n                  {/* Original animated paths */}\n                  <g id=\"animated-paths\">\n                     {/* First animated path */}\n                     <g id=\"lllldll31\" opacity=\"1\" className=\"[--normal-color:var(--line-color-1)]\">\n                        <path\n                           d=\"M794.405,333.333 h-131.468M662.937,333.333 h-131.468M531.468,333.333 h-131.468M400,333.333 h-131.468M 268.532 333.333 A -133.333 400 0 0 0 266.667 400M266.667,400 h-133.333M133.333,400 h-133.333\"\n                           fill=\"none\"\n                           stroke=\"url(#lllldll31-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-lllldll31\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"lllldll31-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop offset=\"1\" stopColor=\"var(--color)\" stopOpacity=\"0\" />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"794.405;794.405;662.937;531.468;400;268.532;266.667;133.333;0;0;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"333.333;333.333;333.333;333.333;333.333;333.333;400;400;400;400;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;100;100;100;100;100;100;100;100;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Second animated path */}\n                     <g id=\"llullldl34\" opacity=\"1\" className=\"[--normal-color:var(--line-color-2)]\">\n                        <path\n                           d=\"M698.142,133.333 h-99.381M598.762,133.333 h-99.381M 499.381 133.333 A 133.333 400 0 0 0 473.703 66.667M473.703,66.667 h-73.703M400,66.667 h-73.703M326.297,66.667 h-73.703M 252.594 66.667 A -266.667 400 0 0 0 201.238 133.333M201.238,133.333 h-99.381\"\n                           fill=\"none\"\n                           stroke=\"url(#llullldl34-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llullldl34\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llullldl34-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop offset=\"1\" stopColor=\"var(--color)\" stopOpacity=\"0\" />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"698.142;698.142;598.762;499.381;473.703;400;326.297;252.594;201.238;101.858;101.858;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"133.333;133.333;133.333;133.333;66.667;66.667;66.667;66.667;133.333;133.333;133.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;50;50;50;50;50;50;50;50;50;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Third animated path */}\n                     <g id=\"llldlll35\" opacity=\"1\" className=\"[--normal-color:var(--line-color-1)]\">\n                        <path\n                           d=\"M621.108,66.667 h-73.703M547.406,66.667 h-73.703M473.703,66.667 h-73.703M 400 133.333 A 0 400 0 0 0 400 66.667M400,133.333 h-99.381M300.619,133.333 h-99.381M201.238,133.333 h-99.381\"\n                           fill=\"none\"\n                           stroke=\"url(#llldlll35-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llldlll35\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llldlll35-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop offset=\"1\" stopColor=\"var(--color)\" stopOpacity=\"0\" />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"621.108;621.108;547.406;473.703;400;400;300.619;201.238;101.858;101.858;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"66.667;66.667;66.667;66.667;66.667;133.333;133.333;133.333;133.333;133.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Fourth animated path */}\n                     <g id=\"llddllll33\" opacity=\"1\" className=\"[--normal-color:var(--line-color-3)]\">\n                        <path\n                           d=\"M746.41,200 h-115.47M630.94,200 h-115.47M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M 531.468 333.333 A 133.333 400 0 0 0 525.708 266.667M531.468,333.333 h-131.468M400,333.333 h-131.468M268.532,333.333 h-131.468M137.063,333.333 h-131.468\"\n                           fill=\"none\"\n                           stroke=\"url(#llddllll33-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llddllll33\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llddllll33-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop offset=\"1\" stopColor=\"var(--color)\" stopOpacity=\"0\" />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"746.41;746.41;630.94;515.47;525.708;531.468;400;268.532;137.063;5.595;5.595;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"200;200;200;200;266.667;333.333;333.333;333.333;333.333;333.333;333.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;100;100;100;100;100;100;100;100;100;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Fifth animated path */}\n                     <g id=\"lllddlll34\" opacity=\"1\" className=\"[--normal-color:var(--line-color-2)]\">\n                        <path\n                           d=\"M698.142,133.333 h-99.381M598.762,133.333 h-99.381M499.381,133.333 h-99.381M 400 200 A 0 400 0 0 0 400 133.333M 400 266.667 A 0 400 0 0 0 400 200M400,266.667 h-125.708M274.292,266.667 h-125.708M148.584,266.667 h-125.708\"\n                           fill=\"none\"\n                           stroke=\"url(#lllddlll34-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-lllddlll34\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"lllddlll34-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop offset=\"1\" stopColor=\"var(--color)\" stopOpacity=\"0\" />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"698.142;698.142;598.762;499.381;400;400;400;274.292;148.584;22.876;22.876;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"133.333;133.333;133.333;133.333;133.333;200;266.667;266.667;266.667;266.667;266.667;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Sixth animated path */}\n                     <g id=\"llullll32\" opacity=\"1\" className=\"[--normal-color:var(--line-color-3)]\">\n                        <path\n                           d=\"M777.124,266.667 h-125.708M651.416,266.667 h-125.708M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M515.47,200 h-115.47M400,200 h-115.47M284.53,200 h-115.47M169.06,200 h-115.47\"\n                           fill=\"none\"\n                           stroke=\"url(#llullll32-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llullll32\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llullll32-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop offset=\"1\" stopColor=\"var(--color)\" stopOpacity=\"0\" />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"777.124;777.124;651.416;525.708;515.47;400;284.53;169.06;53.59;53.59;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"266.667;266.667;266.667;266.667;200;200;200;200;200;200;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;50;50;50;50;50;50;50;50;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n                  </g>\n\n                  {/* Mirrored paths for full globe */}\n                  {fullGlobe && (\n                     <g\n                        transform=\"translate(0,800) scale(1,-1)\"\n                        className=\"opacity-50\" // Optional: slightly reduce opacity of bottom paths\n                     >\n                        <use href=\"#animated-paths\" />\n                     </g>\n                  )}\n\n                  <defs>\n                     <linearGradient\n                        gradientUnits=\"userSpaceOnUse\"\n                        id=\"globe-gradient\"\n                        x1=\"0\"\n                        x2=\"0\"\n                        y1=\"0\"\n                        y2=\"400\"\n                     >\n                        <stop offset=\"0%\" stopColor=\"var(--guide-color)\" />\n                        <stop offset=\"100%\" stopColor=\"var(--guide-color)\" />\n                     </linearGradient>\n                  </defs>\n               </svg>\n            </div>\n         </section>\n      </div>\n   )\n}\n\nexport default GlobeGrid\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface GlobeGridProps {\n   fullGlobe?: boolean\n   className?: string\n}\n\nexport function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {\n   return (\n      <div\n         className={ny(\n            \"relative flex min-h-[350px] w-full items-center justify-center overflow-hidden\",\n            className,\n         )}\n      >\n         <section\n            className=\"relative w-full max-w-[600px]\"\n            style={\n               {\n                  \"--sm-grid-columns\": \"6\",\n                  \"--md-grid-columns\": \"6\",\n                  \"--sm-grid-rows\": fullGlobe ? \"12\" : \"6\",\n                  \"--md-grid-rows\": fullGlobe ? \"12\" : \"6\",\n                  \"--grid-columns\": \"var(--sm-grid-columns)\",\n                  \"--grid-rows\": \"var(--sm-grid-rows)\",\n                  aspectRatio: fullGlobe ? \"1/1\" : \"2/1\",\n               } as React.CSSProperties\n            }\n         >\n            <style jsx>\n               {`\n               @media (min-width: 768px) {\n                  section {\n                     --grid-columns: var(--md-grid-columns);\n                     --grid-rows: var(--md-grid-rows);\n                  }\n               }\n            `}\n            </style>\n            <div className=\"absolute left-0 top-0 z-[5] ml-[-0.5px] w-full md:left-1/2 md:top-1/2 md:h-[200%] md:-translate-x-1/2 md:-translate-y-1/2\">\n               <svg\n                  aria-hidden=\"true\"\n                  height=\"100%\"\n                  style={{\n                     transform: fullGlobe\n                        ? \"translateY(0px) scale(1.002)\"\n                        : \"translateY(-12.5%) scale(1.002)\",\n                  }}\n                  viewBox={fullGlobe ? \"-1 -1 802 802\" : \"-1 -151 802 602\"}\n                  width=\"100%\"\n                  className=\"[--guide-color:theme(colors.border/50%)]\"\n               >\n                  <defs>\n                     <clipPath id=\"half-globe-clip\">\n                        <rect x=\"-1\" y=\"-151\" width=\"802\" height=\"551\" />\n                     </clipPath>\n                  </defs>\n\n                  <g\n                     data-testid=\"globe-wireframe\"\n                     clipPath={fullGlobe ? \"none\" : \"url(#half-globe-clip)\"}\n                  >\n                     <circle\n                        cx=\"400\"\n                        cy=\"400\"\n                        fill=\"var(--ds-background-200)\"\n                        r=\"400\"\n                     />\n                     <path\n                        d=\"M 400 800 A -400 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 800 A -266.667 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 800 A -133.333 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 800 A 0 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 0 A 133.333 400 0 0 0 400 800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 0 A 266.667 400 0 0 0 400 800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 0 A 400 400 0 0 0 400 800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n\n                     <path\n                        d=\"M178.892,66.667 h442.217\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M101.858,133.333 h596.285\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M53.59,200 h692.82\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M22.876,266.667 h754.247\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M5.595,333.333 h788.811\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M0,400 h800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     {fullGlobe && (\n                        <>\n                           <path\n                              d=\"M5.595,466.667 h788.811\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M22.876,533.333 h754.247\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M53.59,600 h692.82\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M101.858,666.667 h596.285\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M178.892,733.333 h442.217\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                        </>\n                     )}\n                  </g>\n\n                  {/* Original animated paths */}\n                  <g id=\"animated-paths\">\n                     {/* First animated path */}\n                     <g\n                        id=\"lllldll31\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-1)]\"\n                     >\n                        <path\n                           d=\"M794.405,333.333 h-131.468M662.937,333.333 h-131.468M531.468,333.333 h-131.468M400,333.333 h-131.468M 268.532 333.333 A -133.333 400 0 0 0 266.667 400M266.667,400 h-133.333M133.333,400 h-133.333\"\n                           fill=\"none\"\n                           stroke=\"url(#lllldll31-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-lllldll31\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"lllldll31-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"794.405;794.405;662.937;531.468;400;268.532;266.667;133.333;0;0;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"333.333;333.333;333.333;333.333;333.333;333.333;400;400;400;400;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;100;100;100;100;100;100;100;100;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Second animated path */}\n                     <g\n                        id=\"llullldl34\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-2)]\"\n                     >\n                        <path\n                           d=\"M698.142,133.333 h-99.381M598.762,133.333 h-99.381M 499.381 133.333 A 133.333 400 0 0 0 473.703 66.667M473.703,66.667 h-73.703M400,66.667 h-73.703M326.297,66.667 h-73.703M 252.594 66.667 A -266.667 400 0 0 0 201.238 133.333M201.238,133.333 h-99.381\"\n                           fill=\"none\"\n                           stroke=\"url(#llullldl34-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llullldl34\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llullldl34-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"698.142;698.142;598.762;499.381;473.703;400;326.297;252.594;201.238;101.858;101.858;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"133.333;133.333;133.333;133.333;66.667;66.667;66.667;66.667;133.333;133.333;133.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;50;50;50;50;50;50;50;50;50;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Third animated path */}\n                     <g\n                        id=\"llldlll35\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-1)]\"\n                     >\n                        <path\n                           d=\"M621.108,66.667 h-73.703M547.406,66.667 h-73.703M473.703,66.667 h-73.703M 400 133.333 A 0 400 0 0 0 400 66.667M400,133.333 h-99.381M300.619,133.333 h-99.381M201.238,133.333 h-99.381\"\n                           fill=\"none\"\n                           stroke=\"url(#llldlll35-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llldlll35\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llldlll35-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"621.108;621.108;547.406;473.703;400;400;300.619;201.238;101.858;101.858;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"66.667;66.667;66.667;66.667;66.667;133.333;133.333;133.333;133.333;133.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Fourth animated path */}\n                     <g\n                        id=\"llddllll33\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-3)]\"\n                     >\n                        <path\n                           d=\"M746.41,200 h-115.47M630.94,200 h-115.47M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M 531.468 333.333 A 133.333 400 0 0 0 525.708 266.667M531.468,333.333 h-131.468M400,333.333 h-131.468M268.532,333.333 h-131.468M137.063,333.333 h-131.468\"\n                           fill=\"none\"\n                           stroke=\"url(#llddllll33-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llddllll33\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llddllll33-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"746.41;746.41;630.94;515.47;525.708;531.468;400;268.532;137.063;5.595;5.595;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"200;200;200;200;266.667;333.333;333.333;333.333;333.333;333.333;333.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;100;100;100;100;100;100;100;100;100;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Fifth animated path */}\n                     <g\n                        id=\"lllddlll34\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-2)]\"\n                     >\n                        <path\n                           d=\"M698.142,133.333 h-99.381M598.762,133.333 h-99.381M499.381,133.333 h-99.381M 400 200 A 0 400 0 0 0 400 133.333M 400 266.667 A 0 400 0 0 0 400 200M400,266.667 h-125.708M274.292,266.667 h-125.708M148.584,266.667 h-125.708\"\n                           fill=\"none\"\n                           stroke=\"url(#lllddlll34-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-lllddlll34\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"lllddlll34-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"698.142;698.142;598.762;499.381;400;400;400;274.292;148.584;22.876;22.876;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"133.333;133.333;133.333;133.333;133.333;200;266.667;266.667;266.667;266.667;266.667;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Sixth animated path */}\n                     <g\n                        id=\"llullll32\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-3)]\"\n                     >\n                        <path\n                           d=\"M777.124,266.667 h-125.708M651.416,266.667 h-125.708M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M515.47,200 h-115.47M400,200 h-115.47M284.53,200 h-115.47M169.06,200 h-115.47\"\n                           fill=\"none\"\n                           stroke=\"url(#llullll32-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llullll32\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llullll32-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"777.124;777.124;651.416;525.708;515.47;400;284.53;169.06;53.59;53.59;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"266.667;266.667;266.667;266.667;200;200;200;200;200;200;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;50;50;50;50;50;50;50;50;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n                  </g>\n\n                  {/* Mirrored paths for full globe */}\n                  {fullGlobe && (\n                     <g\n                        transform=\"translate(0,800) scale(1,-1)\"\n                        className=\"opacity-50\" // Optional: slightly reduce opacity of bottom paths\n                     >\n                        <use href=\"#animated-paths\" />\n                     </g>\n                  )}\n\n                  <defs>\n                     <linearGradient\n                        gradientUnits=\"userSpaceOnUse\"\n                        id=\"globe-gradient\"\n                        x1=\"0\"\n                        x2=\"0\"\n                        y1=\"0\"\n                        y2=\"400\"\n                     >\n                        <stop offset=\"0%\" stopColor=\"var(--guide-color)\" />\n                        <stop offset=\"100%\" stopColor=\"var(--guide-color)\" />\n                     </linearGradient>\n                  </defs>\n               </svg>\n            </div>\n         </section>\n      </div>\n   )\n}\n\nexport default GlobeGrid\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/globe.json b/apps/web/public/r/styles/default/globe.json
index 5b498a0f..50abd3e3 100644
--- a/apps/web/public/r/styles/default/globe.json
+++ b/apps/web/public/r/styles/default/globe.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "globe",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "cobe",
     "react-spring"
@@ -8,8 +10,8 @@
   "files": [
     {
       "path": "ui/globe.tsx",
-      "content": "'use client'\n\nimport type { COBEOptions } from 'cobe'\nimport createGlobe from 'cobe'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { useSpring } from 'react-spring'\nimport { ny } from '~/lib/utils'\n\nconst GLOBE_CONFIG: COBEOptions = {\n   width: 800,\n   height: 800,\n   onRender: () => {},\n   devicePixelRatio: 2,\n   phi: 0,\n   theta: 0.3,\n   dark: 0,\n   diffuse: 0.4,\n   mapSamples: 16000,\n   mapBrightness: 1.2,\n   baseColor: [1, 1, 1],\n   markerColor: [251 / 255, 100 / 255, 21 / 255],\n   glowColor: [1, 1, 1],\n   markers: [\n      { location: [14.5995, 120.9842], size: 0.03 },\n      { location: [19.076, 72.8777], size: 0.1 },\n      { location: [23.8103, 90.4125], size: 0.05 },\n      { location: [30.0444, 31.2357], size: 0.07 },\n      { location: [39.9042, 116.4074], size: 0.08 },\n      { location: [-23.5505, -46.6333], size: 0.1 },\n      { location: [19.4326, -99.1332], size: 0.1 },\n      { location: [40.7128, -74.006], size: 0.1 },\n      { location: [34.6937, 135.5022], size: 0.05 },\n      { location: [41.0082, 28.9784], size: 0.06 },\n   ],\n}\n\nexport default function Globe({\n   className,\n   config = GLOBE_CONFIG,\n}: {\n   className?: string\n   config?: COBEOptions\n}) {\n   let phi = 0\n   let width = 0\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const pointerInteracting = useRef(null)\n   const pointerInteractionMovement = useRef(0)\n   const [{ r }, api] = useSpring(() => ({\n      r: 0,\n      config: {\n         mass: 1,\n         tension: 280,\n         friction: 40,\n         precision: 0.001,\n      },\n   }))\n\n   const updatePointerInteraction = (value: any) => {\n      pointerInteracting.current = value\n      canvasRef.current!.style.cursor = value ? 'grabbing' : 'grab'\n   }\n\n   const updateMovement = (clientX: any) => {\n      if (pointerInteracting.current !== null) {\n         const delta = clientX - pointerInteracting.current\n         pointerInteractionMovement.current = delta\n         api.start({ r: delta / 200 })\n      }\n   }\n\n   const onRender = useCallback(\n      (state: Record<string, any>) => {\n         if (!pointerInteracting.current)\n            phi += 0.005\n         state.phi = phi + r.get()\n         state.width = width * 2\n         state.height = width * 2\n      },\n      [pointerInteracting, phi, r],\n   )\n\n   const onResize = () => {\n      if (canvasRef.current)\n         width = canvasRef.current.offsetWidth\n   }\n\n   useEffect(() => {\n      window.addEventListener('resize', onResize)\n      onResize()\n\n      const globe = createGlobe(canvasRef.current!, {\n         ...config,\n         width: width * 2,\n         height: width * 2,\n         onRender,\n      })\n\n      setTimeout(() => (canvasRef.current!.style.opacity = '1'))\n      return () => globe.destroy()\n   }, [])\n\n   return (\n      <div\n         className={ny(\n            'absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]',\n            className,\n         )}\n      >\n         <canvas\n            className={ny(\n               'size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]',\n            )}\n            ref={canvasRef}\n            onPointerDown={e =>\n               updatePointerInteraction(e.clientX - pointerInteractionMovement.current)}\n            onPointerUp={() => updatePointerInteraction(null)}\n            onPointerOut={() => updatePointerInteraction(null)}\n            onMouseMove={e => updateMovement(e.clientX)}\n            onTouchMove={e =>\n               e.touches[0] && updateMovement(e.touches[0].clientX)}\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { COBEOptions } from \"cobe\"\nimport createGlobe from \"cobe\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useSpring } from \"react-spring\"\nimport { ny } from \"~/lib/utils\"\n\nconst GLOBE_CONFIG: COBEOptions = {\n   width: 800,\n   height: 800,\n   onRender: () => {},\n   devicePixelRatio: 2,\n   phi: 0,\n   theta: 0.3,\n   dark: 0,\n   diffuse: 0.4,\n   mapSamples: 16000,\n   mapBrightness: 1.2,\n   baseColor: [1, 1, 1],\n   markerColor: [251 / 255, 100 / 255, 21 / 255],\n   glowColor: [1, 1, 1],\n   markers: [\n      { location: [14.5995, 120.9842], size: 0.03 },\n      { location: [19.076, 72.8777], size: 0.1 },\n      { location: [23.8103, 90.4125], size: 0.05 },\n      { location: [30.0444, 31.2357], size: 0.07 },\n      { location: [39.9042, 116.4074], size: 0.08 },\n      { location: [-23.5505, -46.6333], size: 0.1 },\n      { location: [19.4326, -99.1332], size: 0.1 },\n      { location: [40.7128, -74.006], size: 0.1 },\n      { location: [34.6937, 135.5022], size: 0.05 },\n      { location: [41.0082, 28.9784], size: 0.06 },\n   ],\n}\n\nexport default function Globe({\n   className,\n   config = GLOBE_CONFIG,\n}: {\n   className?: string\n   config?: COBEOptions\n}) {\n   let phi = 0\n   let width = 0\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const pointerInteracting = useRef(null)\n   const pointerInteractionMovement = useRef(0)\n   const [{ r }, api] = useSpring(() => ({\n      r: 0,\n      config: {\n         mass: 1,\n         tension: 280,\n         friction: 40,\n         precision: 0.001,\n      },\n   }))\n\n   const updatePointerInteraction = (value: any) => {\n      pointerInteracting.current = value\n      canvasRef.current!.style.cursor = value ? \"grabbing\" : \"grab\"\n   }\n\n   const updateMovement = (clientX: any) => {\n      if (pointerInteracting.current !== null) {\n         const delta = clientX - pointerInteracting.current\n         pointerInteractionMovement.current = delta\n         api.start({ r: delta / 200 })\n      }\n   }\n\n   const onRender = useCallback(\n      (state: Record<string, any>) => {\n         if (!pointerInteracting.current) phi += 0.005\n         state.phi = phi + r.get()\n         state.width = width * 2\n         state.height = width * 2\n      },\n      [pointerInteracting, phi, r],\n   )\n\n   const onResize = () => {\n      if (canvasRef.current) width = canvasRef.current.offsetWidth\n   }\n\n   useEffect(() => {\n      window.addEventListener(\"resize\", onResize)\n      onResize()\n\n      const globe = createGlobe(canvasRef.current!, {\n         ...config,\n         width: width * 2,\n         height: width * 2,\n         onRender,\n      })\n\n      setTimeout(() => (canvasRef.current!.style.opacity = \"1\"))\n      return () => globe.destroy()\n   }, [])\n\n   return (\n      <div\n         className={ny(\n            \"absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]\",\n            className,\n         )}\n      >\n         <canvas\n            className={ny(\n               \"size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]\",\n            )}\n            ref={canvasRef}\n            onPointerDown={(e) =>\n               updatePointerInteraction(\n                  e.clientX - pointerInteractionMovement.current,\n               )\n            }\n            onPointerUp={() => updatePointerInteraction(null)}\n            onPointerOut={() => updatePointerInteraction(null)}\n            onMouseMove={(e) => updateMovement(e.clientX)}\n            onTouchMove={(e) =>\n               e.touches[0] && updateMovement(e.touches[0].clientX)\n            }\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/gradual-spacing-demo.json b/apps/web/public/r/styles/default/gradual-spacing-demo.json
index b0ebb5d4..e44b8236 100644
--- a/apps/web/public/r/styles/default/gradual-spacing-demo.json
+++ b/apps/web/public/r/styles/default/gradual-spacing-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "gradual-spacing-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/gradual-spacing-demo.tsx",
-      "content": "import GradualSpacing from '~/registry/default/ui/gradual-spacing'\n\nexport default async function GradualSpacingDemo() {\n   return (\n      <GradualSpacing\n         className=\"font-display text-center text-4xl font-bold -tracking-widest  text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         text=\"Gradual Spacing\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/gradual-spacing-demo.tsx",
+      "content": "import GradualSpacing from \"~/registry/default/ui/gradual-spacing\"\n\nexport default async function GradualSpacingDemo() {\n   return (\n      <GradualSpacing\n         className=\"font-display text-center text-4xl font-bold -tracking-widest  text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         text=\"Gradual Spacing\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/gradual-spacing.json b/apps/web/public/r/styles/default/gradual-spacing.json
index 1a89bff7..2f3bd96b 100644
--- a/apps/web/public/r/styles/default/gradual-spacing.json
+++ b/apps/web/public/r/styles/default/gradual-spacing.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "gradual-spacing",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/gradual-spacing.tsx",
-      "content": "'use client'\n\nimport type { Variants } from 'framer-motion'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface GradualSpacingProps {\n   text: string\n   duration?: number\n   delayMultiple?: number\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function GradualSpacing({\n   text,\n   duration = 0.5,\n   delayMultiple = 0.04,\n   framerProps = {\n      hidden: { opacity: 0, x: -20 },\n      visible: { opacity: 1, x: 0 },\n   },\n   className,\n}: GradualSpacingProps) {\n   return (\n      <div className=\"flex justify-center space-x-1\">\n         <AnimatePresence>\n            {text.split('').map((char, i) => (\n               <motion.h1\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={framerProps}\n                  transition={{ duration, delay: i * delayMultiple }}\n                  className={ny('drop-shadow-sm ', className)}\n               >\n                  {char === ' ' ? <span>&nbsp;</span> : char}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface GradualSpacingProps {\n   text: string\n   duration?: number\n   delayMultiple?: number\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function GradualSpacing({\n   text,\n   duration = 0.5,\n   delayMultiple = 0.04,\n   framerProps = {\n      hidden: { opacity: 0, x: -20 },\n      visible: { opacity: 1, x: 0 },\n   },\n   className,\n}: GradualSpacingProps) {\n   return (\n      <div className=\"flex justify-center space-x-1\">\n         <AnimatePresence>\n            {text.split(\"\").map((char, i) => (\n               <motion.h1\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={framerProps}\n                  transition={{ duration, delay: i * delayMultiple }}\n                  className={ny(\"drop-shadow-sm \", className)}\n               >\n                  {char === \" \" ? <span>&nbsp;</span> : char}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/grid-layout-columns-demo.json b/apps/web/public/r/styles/default/grid-layout-columns-demo.json
index 9c50ae48..f8cc5828 100644
--- a/apps/web/public/r/styles/default/grid-layout-columns-demo.json
+++ b/apps/web/public/r/styles/default/grid-layout-columns-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-layout-columns-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/grid-layout-columns-demo.tsx",
-      "content": "'use client'\n\nimport GridLayout from '~/registry/default/ui/grid-layout'\n\nexport default function GridLayoutColumnsDemo() {\n   return (\n      <div className=\"space-y-8\">\n         <GridLayout\n            columns={8}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">8 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Compact layouts</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            columns={12}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">12 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Traditional grid</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            columns={16}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">16 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Fine-grained control</p>\n               </div>\n            </div>\n         </GridLayout>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/grid-layout-columns-demo.tsx",
+      "content": "\"use client\"\n\nimport GridLayout from \"~/registry/default/ui/grid-layout\"\n\nexport default function GridLayoutColumnsDemo() {\n   return (\n      <div className=\"space-y-8\">\n         <GridLayout\n            columns={8}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">8 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Compact layouts</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            columns={12}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">12 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Traditional grid</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            columns={16}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">16 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Fine-grained control\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/grid-layout-crosshairs-demo.json b/apps/web/public/r/styles/default/grid-layout-crosshairs-demo.json
index fd62c444..97b2ae97 100644
--- a/apps/web/public/r/styles/default/grid-layout-crosshairs-demo.json
+++ b/apps/web/public/r/styles/default/grid-layout-crosshairs-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-layout-crosshairs-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/grid-layout-crosshairs-demo.tsx",
-      "content": "'use client'\n\nimport GridLayout from '~/registry/default/ui/grid-layout'\n\nexport default function GridLayoutCrosshairsDemo() {\n   return (\n      <GridLayout\n         crosshairs={{\n            topLeft: true,\n            topRight: true,\n            bottomLeft: true,\n            bottomRight: true,\n         }}\n         lineVariant=\"none\"\n         className=\"min-h-[350px] p-6\"\n      >\n         <div className=\"flex h-full flex-col items-center justify-center space-y-4\">\n            <div className=\"text-center\">\n               <h3 className=\"text-2xl font-medium\">Corner Markers</h3>\n               <p className=\"text-muted-foreground mt-2\">\n                  Use crosshairs to highlight key areas or create visual anchors\n               </p>\n            </div>\n            <div className=\"grid w-full max-w-xl grid-cols-2 gap-8 pt-8\">\n               <div className=\"bg-card rounded-lg border p-4 text-center\">Top Left</div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">Top Right</div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">Bottom Left</div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">Bottom Right</div>\n            </div>\n         </div>\n      </GridLayout>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/grid-layout-crosshairs-demo.tsx",
+      "content": "\"use client\"\n\nimport GridLayout from \"~/registry/default/ui/grid-layout\"\n\nexport default function GridLayoutCrosshairsDemo() {\n   return (\n      <GridLayout\n         crosshairs={{\n            topLeft: true,\n            topRight: true,\n            bottomLeft: true,\n            bottomRight: true,\n         }}\n         lineVariant=\"none\"\n         className=\"min-h-[350px] p-6\"\n      >\n         <div className=\"flex h-full flex-col items-center justify-center space-y-4\">\n            <div className=\"text-center\">\n               <h3 className=\"text-2xl font-medium\">Corner Markers</h3>\n               <p className=\"text-muted-foreground mt-2\">\n                  Use crosshairs to highlight key areas or create visual anchors\n               </p>\n            </div>\n            <div className=\"grid w-full max-w-xl grid-cols-2 gap-8 pt-8\">\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Top Left\n               </div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Top Right\n               </div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Bottom Left\n               </div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Bottom Right\n               </div>\n            </div>\n         </div>\n      </GridLayout>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/grid-layout-demo.json b/apps/web/public/r/styles/default/grid-layout-demo.json
index 4a70d02f..ff0b951e 100644
--- a/apps/web/public/r/styles/default/grid-layout-demo.json
+++ b/apps/web/public/r/styles/default/grid-layout-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-layout-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/grid-layout-demo.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/default/ui/button'\nimport GridLayout from '~/registry/default/ui/grid-layout'\n\nexport default function GridLayoutDemo() {\n   return (\n      <GridLayout\n         crosshairs={{\n            topLeft: true,\n            bottomRight: true,\n         }}\n         lineVariant=\"center\"\n         className=\"min-h-[350px] p-8\"\n      >\n         <div className=\"space-y-8\">\n            <div>\n               <h2 className=\"text-4xl font-medium tracking-tight\">\n                  Ready to deploy?\n                  {' '}\n                  <span className=\"text-muted-foreground\">\n                     Start building with a free account.\n                  </span>\n               </h2>\n               <p className=\"text-muted-foreground mt-4 text-xl\">\n                  Speak to an expert for your\n                  {' '}\n                  <span className=\"text-blue-500\">Pro</span>\n                  {' '}\n                  or\n                  {' '}\n                  <span className=\"text-purple-500\">Enterprise</span>\n                  {' '}\n                  needs.\n               </p>\n            </div>\n            <div className=\"flex gap-4\">\n               <Button variant=\"default\" size=\"lg\">\n                  Start Deploying\n               </Button>\n               <Button variant=\"outline\" size=\"lg\">\n                  Contact Sales\n               </Button>\n            </div>\n         </div>\n      </GridLayout>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/grid-layout-demo.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport GridLayout from \"~/registry/default/ui/grid-layout\"\n\nexport default function GridLayoutDemo() {\n   return (\n      <GridLayout\n         crosshairs={{\n            topLeft: true,\n            bottomRight: true,\n         }}\n         lineVariant=\"center\"\n         className=\"min-h-[350px] p-8\"\n      >\n         <div className=\"space-y-8\">\n            <div>\n               <h2 className=\"text-4xl font-medium tracking-tight\">\n                  Ready to deploy?{\" \"}\n                  <span className=\"text-muted-foreground\">\n                     Start building with a free account.\n                  </span>\n               </h2>\n               <p className=\"text-muted-foreground mt-4 text-xl\">\n                  Speak to an expert for your{\" \"}\n                  <span className=\"text-blue-500\">Pro</span> or{\" \"}\n                  <span className=\"text-purple-500\">Enterprise</span> needs.\n               </p>\n            </div>\n            <div className=\"flex gap-4\">\n               <Button variant=\"default\" size=\"lg\">\n                  Start Deploying\n               </Button>\n               <Button variant=\"outline\" size=\"lg\">\n                  Contact Sales\n               </Button>\n            </div>\n         </div>\n      </GridLayout>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/grid-layout-variants-demo.json b/apps/web/public/r/styles/default/grid-layout-variants-demo.json
index 9000cdb6..3e3fe74c 100644
--- a/apps/web/public/r/styles/default/grid-layout-variants-demo.json
+++ b/apps/web/public/r/styles/default/grid-layout-variants-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-layout-variants-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "grid-layout"
   ],
   "files": [
     {
-      "path": "example/grid-layout-variants-demo.tsx",
-      "content": "'use client'\n\nimport GridLayout from '~/registry/default/ui/grid-layout'\n\nexport default function GridLayoutVariantsDemo() {\n   return (\n      <div className=\"space-y-8\">\n         <GridLayout\n            lineVariant=\"center\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Center Line</h3>\n                  <p className=\"text-muted-foreground mt-1\">Minimal and focused</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            lineVariant=\"vertical\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Vertical Lines</h3>\n                  <p className=\"text-muted-foreground mt-1\">Column-focused layout</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            lineVariant=\"horizontal\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Horizontal Lines</h3>\n                  <p className=\"text-muted-foreground mt-1\">Row-based organization</p>\n               </div>\n            </div>\n         </GridLayout>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/grid-layout-variants-demo.tsx",
+      "content": "\"use client\"\n\nimport GridLayout from \"~/registry/default/ui/grid-layout\"\n\nexport default function GridLayoutVariantsDemo() {\n   return (\n      <div className=\"space-y-8\">\n         <GridLayout\n            lineVariant=\"center\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Center Line</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Minimal and focused\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            lineVariant=\"vertical\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Vertical Lines</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Column-focused layout\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            lineVariant=\"horizontal\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Horizontal Lines</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Row-based organization\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/grid-layout.json b/apps/web/public/r/styles/default/grid-layout.json
index b93b5588..513e773a 100644
--- a/apps/web/public/r/styles/default/grid-layout.json
+++ b/apps/web/public/r/styles/default/grid-layout.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-layout",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/grid-layout.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface CrosshairConfig {\n   topLeft?: boolean\n   topRight?: boolean\n   bottomLeft?: boolean\n   bottomRight?: boolean\n}\n\ninterface GridLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n   children: React.ReactNode\n   crosshairs?: CrosshairConfig\n   gridLines?: boolean\n   columns?: 8 | 12 | 16\n   lineVariant?: 'all' | 'vertical' | 'horizontal' | 'center' | 'none'\n}\n\nfunction CrosshairIcon({ className }: { className?: string }) {\n   return (\n      <svg\n         width=\"16\"\n         height=\"16\"\n         viewBox=\"0 0 16 16\"\n         fill=\"none\"\n         className={className}\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M8 1V15M1 8H15\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1\"\n            strokeLinecap=\"round\"\n         />\n      </svg>\n   )\n}\n\nexport function GridLayout({\n   children,\n   crosshairs,\n   gridLines = true,\n   columns = 16,\n   lineVariant = 'all',\n   className,\n   ...props\n}: GridLayoutProps) {\n   return (\n      <div\n         className={ny(\n            'relative grid w-full gap-0',\n            gridLines && 'border-grid-line border',\n            columns === 16 && 'grid-cols-grid-16',\n            columns === 12 && 'grid-cols-grid-12',\n            columns === 8 && 'grid-cols-grid-8',\n            className,\n         )}\n         {...props}\n      >\n         {gridLines && (\n            <div className=\"absolute inset-0 z-0\">\n               {/* Vertikale Linien */}\n               {(lineVariant === 'all' || lineVariant === 'vertical' || lineVariant === 'center') && (\n                  <div className=\"absolute inset-0 flex justify-center\">\n                     {lineVariant === 'center'\n                        ? (\n                              <div className=\"border-grid-line h-full w-px border-r\" />\n                           )\n                        : (\n                              <div\n                                 className={ny(\n                                    'grid size-full',\n                                    columns === 16 && 'grid-cols-grid-16',\n                                    columns === 12 && 'grid-cols-grid-12',\n                                    columns === 8 && 'grid-cols-grid-8',\n                                 )}\n                              >\n                                 {Array.from({ length: columns }).map((_, i) => (\n                                    <div\n                                       key={i}\n                                       className={ny(\n                                          'border-grid-line border-r',\n                                          i === 0 && 'border-l',\n                                       )}\n                                    />\n                                 ))}\n                              </div>\n                           )}\n                  </div>\n               )}\n\n               {/* Horizontale Linien */}\n               {(lineVariant === 'all' || lineVariant === 'horizontal') && (\n                  <div className=\"absolute inset-0 grid grid-rows-[repeat(16,1fr)]\">\n                     {Array.from({ length: 17 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className={ny(\n                              'border-grid-line border-t',\n                              i === 16 && 'border-b',\n                           )}\n                        />\n                     ))}\n                  </div>\n               )}\n            </div>\n         )}\n\n         {/* Crosshairs */}\n         {crosshairs?.topLeft && (\n            <CrosshairIcon className=\"text-grid-line absolute -left-2 -top-2\" />\n         )}\n         {crosshairs?.topRight && (\n            <CrosshairIcon className=\"text-grid-line absolute -right-2 -top-2\" />\n         )}\n         {crosshairs?.bottomLeft && (\n            <CrosshairIcon className=\"text-grid-line absolute -bottom-2 -left-2\" />\n         )}\n         {crosshairs?.bottomRight && (\n            <CrosshairIcon className=\"text-grid-line absolute -bottom-2 -right-2\" />\n         )}\n\n         <div className=\"relative z-10 col-span-full\">{children}</div>\n      </div>\n   )\n}\n\nexport default GridLayout\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface CrosshairConfig {\n   topLeft?: boolean\n   topRight?: boolean\n   bottomLeft?: boolean\n   bottomRight?: boolean\n}\n\ninterface GridLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n   children: React.ReactNode\n   crosshairs?: CrosshairConfig\n   gridLines?: boolean\n   columns?: 8 | 12 | 16\n   lineVariant?: \"all\" | \"vertical\" | \"horizontal\" | \"center\" | \"none\"\n}\n\nfunction CrosshairIcon({ className }: { className?: string }) {\n   return (\n      <svg\n         width=\"16\"\n         height=\"16\"\n         viewBox=\"0 0 16 16\"\n         fill=\"none\"\n         className={className}\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M8 1V15M1 8H15\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1\"\n            strokeLinecap=\"round\"\n         />\n      </svg>\n   )\n}\n\nexport function GridLayout({\n   children,\n   crosshairs,\n   gridLines = true,\n   columns = 16,\n   lineVariant = \"all\",\n   className,\n   ...props\n}: GridLayoutProps) {\n   return (\n      <div\n         className={ny(\n            \"relative grid w-full gap-0\",\n            gridLines && \"border-grid-line border\",\n            columns === 16 && \"grid-cols-grid-16\",\n            columns === 12 && \"grid-cols-grid-12\",\n            columns === 8 && \"grid-cols-grid-8\",\n            className,\n         )}\n         {...props}\n      >\n         {gridLines && (\n            <div className=\"absolute inset-0 z-0\">\n               {/* Vertikale Linien */}\n               {(lineVariant === \"all\" ||\n                  lineVariant === \"vertical\" ||\n                  lineVariant === \"center\") && (\n                  <div className=\"absolute inset-0 flex justify-center\">\n                     {lineVariant === \"center\" ? (\n                        <div className=\"border-grid-line h-full w-px border-r\" />\n                     ) : (\n                        <div\n                           className={ny(\n                              \"grid size-full\",\n                              columns === 16 && \"grid-cols-grid-16\",\n                              columns === 12 && \"grid-cols-grid-12\",\n                              columns === 8 && \"grid-cols-grid-8\",\n                           )}\n                        >\n                           {Array.from({ length: columns }).map((_, i) => (\n                              <div\n                                 key={i}\n                                 className={ny(\n                                    \"border-grid-line border-r\",\n                                    i === 0 && \"border-l\",\n                                 )}\n                              />\n                           ))}\n                        </div>\n                     )}\n                  </div>\n               )}\n\n               {/* Horizontale Linien */}\n               {(lineVariant === \"all\" || lineVariant === \"horizontal\") && (\n                  <div className=\"absolute inset-0 grid grid-rows-[repeat(16,1fr)]\">\n                     {Array.from({ length: 17 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className={ny(\n                              \"border-grid-line border-t\",\n                              i === 16 && \"border-b\",\n                           )}\n                        />\n                     ))}\n                  </div>\n               )}\n            </div>\n         )}\n\n         {/* Crosshairs */}\n         {crosshairs?.topLeft && (\n            <CrosshairIcon className=\"text-grid-line absolute -left-2 -top-2\" />\n         )}\n         {crosshairs?.topRight && (\n            <CrosshairIcon className=\"text-grid-line absolute -right-2 -top-2\" />\n         )}\n         {crosshairs?.bottomLeft && (\n            <CrosshairIcon className=\"text-grid-line absolute -bottom-2 -left-2\" />\n         )}\n         {crosshairs?.bottomRight && (\n            <CrosshairIcon className=\"text-grid-line absolute -bottom-2 -right-2\" />\n         )}\n\n         <div className=\"relative z-10 col-span-full\">{children}</div>\n      </div>\n   )\n}\n\nexport default GridLayout\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/grid-pattern-dashed.json b/apps/web/public/r/styles/default/grid-pattern-dashed.json
index f18d7269..7510d226 100644
--- a/apps/web/public/r/styles/default/grid-pattern-dashed.json
+++ b/apps/web/public/r/styles/default/grid-pattern-dashed.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-pattern-dashed",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/grid-pattern-dashed.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\nimport GridPattern from '~/registry/default/ui/grid-pattern'\n\nfunction GridPatternDashed() {\n   return (\n      <div className=\"bg-background relative flex size-full items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            width={30}\n            height={30}\n            x={-1}\n            y={-1}\n            strokeDasharray=\"4 2\"\n            className={ny(\n               '[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]',\n            )}\n         />\n      </div>\n   )\n}\n\nexport default GridPatternDashed\n",
-      "type": "registry:component",
+      "path": "examples/grid-pattern-dashed.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\nimport { GridPattern } from \"~/registry/default/ui/grid-pattern\"\n\nexport default function GridPatternDashed() {\n   return (\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            width={30}\n            height={30}\n            x={-1}\n            y={-1}\n            strokeDasharray={\"4 2\"}\n            className={ny(\n               \"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/grid-pattern-demo.json b/apps/web/public/r/styles/default/grid-pattern-demo.json
index e4f784c3..d1111496 100644
--- a/apps/web/public/r/styles/default/grid-pattern-demo.json
+++ b/apps/web/public/r/styles/default/grid-pattern-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-pattern-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/grid-pattern-demo.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\nimport GridPattern from '~/registry/default/ui/grid-pattern'\n\nfunction GridPatternDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl \">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            squares={[\n               [4, 4],\n               [5, 1],\n               [8, 2],\n               [6, 6],\n               [10, 5],\n               [13, 3],\n            ]}\n            className={ny(\n               '[mask-image:radial-gradient(200px_circle_at_center,white,transparent)]',\n               'inset-x-0 inset-y-[-30%] h-[200%] skew-y-12',\n            )}\n         />\n      </div>\n   )\n}\n\nexport default GridPatternDemo\n",
-      "type": "registry:component",
+      "path": "examples/grid-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\nimport { GridPattern } from \"~/registry/default/ui/grid-pattern\"\n\nexport default function GridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            squares={[\n               [4, 4],\n               [5, 1],\n               [8, 2],\n               [5, 3],\n               [5, 5],\n               [10, 10],\n               [12, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n            ]}\n            className={ny(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n               \"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/grid-pattern-linear-gradient.json b/apps/web/public/r/styles/default/grid-pattern-linear-gradient.json
index d9802a4c..9b98e918 100644
--- a/apps/web/public/r/styles/default/grid-pattern-linear-gradient.json
+++ b/apps/web/public/r/styles/default/grid-pattern-linear-gradient.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-pattern-linear-gradient",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/grid-pattern-linear-gradient.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\nimport GridPattern from '~/registry/default/ui/grid-pattern'\n\nfunction GridPatternLinearGradient() {\n   return (\n      <div className=\"bg-background relative flex size-full items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            width={20}\n            height={20}\n            x={-1}\n            y={-1}\n            className={ny(\n               '[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ',\n            )}\n         />\n      </div>\n   )\n}\n\nexport default GridPatternLinearGradient\n",
-      "type": "registry:component",
+      "path": "examples/grid-pattern-linear-gradient.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\nimport { GridPattern } from \"~/registry/default/ui/grid-pattern\"\n\nexport default function GridPatternLinearGradient() {\n   return (\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            width={20}\n            height={20}\n            x={-1}\n            y={-1}\n            className={ny(\n               \"[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] \",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/grid-pattern.json b/apps/web/public/r/styles/default/grid-pattern.json
index 1e8db855..d68d0491 100644
--- a/apps/web/public/r/styles/default/grid-pattern.json
+++ b/apps/web/public/r/styles/default/grid-pattern.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-pattern",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/grid-pattern.tsx",
-      "content": "import { useId } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface GridPatternProps {\n   width?: any\n   height?: any\n   x?: any\n   y?: any\n   squares?: Array<[x: number, y: number]>\n   strokeDasharray?: any\n   className?: string\n   [key: string]: any\n}\n\nexport function GridPattern({\n   width = 40,\n   height = 40,\n   x = -1,\n   y = -1,\n   strokeDasharray = 0,\n   squares,\n   className,\n   ...props\n}: GridPatternProps) {\n   const id = useId()\n\n   return (\n      <svg\n         aria-hidden=\"true\"\n         className={ny(\n            'pointer-events-none absolute inset-0 size-full fill-gray-400/30 stroke-gray-400/30',\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <path\n                  d={`M.5 ${height}V.5H${width}`}\n                  fill=\"none\"\n                  strokeDasharray={strokeDasharray}\n               />\n            </pattern>\n         </defs>\n         <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n         {squares && (\n            <svg x={x} y={y} className=\"overflow-visible\">\n               {squares.map(([x, y]) => (\n                  <rect\n                     strokeWidth=\"0\"\n                     key={`${x}-${y}`}\n                     width={width - 1}\n                     height={height - 1}\n                     x={x * width + 1}\n                     y={y * height + 1}\n                  />\n               ))}\n            </svg>\n         )}\n      </svg>\n   )\n}\n\nexport default GridPattern\n",
-      "type": "registry:component",
+      "content": "import { useId } from \"react\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\n\ninterface GridPatternProps extends React.SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   squares?: Array<[x: number, y: number]>\n   strokeDasharray?: string\n   className?: string\n   [key: string]: unknown\n}\n\nexport function GridPattern({\n   width = 40,\n   height = 40,\n   x = -1,\n   y = -1,\n   strokeDasharray = \"0\",\n   squares,\n   className,\n   ...props\n}: GridPatternProps) {\n   const id = useId()\n\n   return (\n      <svg\n         aria-hidden=\"true\"\n         className={ny(\n            \"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30\",\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <path\n                  d={`M.5 ${height}V.5H${width}`}\n                  fill=\"none\"\n                  strokeDasharray={strokeDasharray}\n               />\n            </pattern>\n         </defs>\n         <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill={`url(#${id})`}\n         />\n         {squares && (\n            <svg x={x} y={y} className=\"overflow-visible\">\n               {squares.map(([x, y]) => (\n                  <rect\n                     strokeWidth=\"0\"\n                     key={`${x}-${y}`}\n                     width={width - 1}\n                     height={height - 1}\n                     x={x * width + 1}\n                     y={y * height + 1}\n                  />\n               ))}\n            </svg>\n         )}\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/hero-video-demo.json b/apps/web/public/r/styles/default/hero-video-demo.json
index b5d93281..cc8ca9b8 100644
--- a/apps/web/public/r/styles/default/hero-video-demo.json
+++ b/apps/web/public/r/styles/default/hero-video-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hero-video-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/hero-video-demo.tsx",
-      "content": "import { Button } from '~/components/ui/button'\nimport HeroVideo, { HeroVideoAction } from '~/registry/default/ui/hero-video'\nimport { MagicCard, MagicContainer } from '~/registry/default/ui/magic-card'\n\nfunction PlayButton() {\n   return (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 24 24\"\n         fill=\"currentColor\"\n         className=\"dark:text-white\"\n      >\n         <path\n            fillRule=\"evenodd\"\n            d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   )\n}\n\nexport default function HeroVideoDemo() {\n   return (\n      <div className=\"bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Hero Video\n         </span>\n\n         <MagicContainer>\n            <MagicCard className=\"min-h-[400px] [mask:linear-gradient(0deg,transparent_40%,#fff_100%)]\">\n               <HeroVideo\n                  title=\"Nyxb UI Demo\"\n                  image=\"https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200\"\n               >\n                  <HeroVideoAction>\n                     <Button className=\"size-20 rounded-full\" variant=\"outline\">\n                        <PlayButton />\n                     </Button>\n                  </HeroVideoAction>\n                  <video\n                     autoPlay\n                     className=\"rounded-xl dark:border\"\n                     playsInline\n                     src=\"https://cdn.nyxbui.design/globe.mp4\"\n                  />\n               </HeroVideo>\n            </MagicCard>\n         </MagicContainer>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/hero-video-demo.tsx",
+      "content": "import { Button } from \"~/components/ui/button\"\nimport HeroVideo, { HeroVideoAction } from \"~/registry/default/ui/hero-video\"\nimport { MagicCard, MagicContainer } from \"~/registry/default/ui/magic-card\"\n\nfunction PlayButton() {\n   return (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 24 24\"\n         fill=\"currentColor\"\n         className=\"dark:text-white\"\n      >\n         <path\n            fillRule=\"evenodd\"\n            d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   )\n}\n\nexport default function HeroVideoDemo() {\n   return (\n      <div className=\"bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Hero Video\n         </span>\n\n         <MagicContainer>\n            <MagicCard className=\"min-h-[400px] [mask:linear-gradient(0deg,transparent_40%,#fff_100%)]\">\n               <HeroVideo\n                  title=\"Nyxb UI Demo\"\n                  image=\"https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200\"\n               >\n                  <HeroVideoAction>\n                     <Button className=\"size-20 rounded-full\" variant=\"outline\">\n                        <PlayButton />\n                     </Button>\n                  </HeroVideoAction>\n                  <video\n                     autoPlay\n                     className=\"rounded-xl dark:border\"\n                     playsInline\n                     src=\"https://cdn.nyxbui.design/globe.mp4\"\n                  />\n               </HeroVideo>\n            </MagicCard>\n         </MagicContainer>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/hero-video-dialog-demo-top-in-bottom-out.json b/apps/web/public/r/styles/default/hero-video-dialog-demo-top-in-bottom-out.json
index 97f32684..f0f632e7 100644
--- a/apps/web/public/r/styles/default/hero-video-dialog-demo-top-in-bottom-out.json
+++ b/apps/web/public/r/styles/default/hero-video-dialog-demo-top-in-bottom-out.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hero-video-dialog-demo-top-in-bottom-out",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/hero-video-dialog-demo-top-in-bottom-out.tsx",
-      "content": "import HeroVideoDialog from '~/registry/default/ui/hero-video-dialog'\n\nexport default function HeroVideoDialogDemoTopInBottomOut() {\n   return (\n      <div className=\"relative\">\n         <HeroVideoDialog\n            className=\"block dark:hidden\"\n            animationStyle=\"top-in-bottom-out\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-light.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n         <HeroVideoDialog\n            className=\"hidden dark:block\"\n            animationStyle=\"top-in-bottom-out\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-dark.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/hero-video-dialog-demo-top-in-bottom-out.tsx",
+      "content": "import HeroVideoDialog from \"~/registry/default/ui/hero-video-dialog\"\n\nexport default function HeroVideoDialogDemoTopInBottomOut() {\n   return (\n      <div className=\"relative\">\n         <HeroVideoDialog\n            className=\"block dark:hidden\"\n            animationStyle=\"top-in-bottom-out\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-light.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n         <HeroVideoDialog\n            className=\"hidden dark:block\"\n            animationStyle=\"top-in-bottom-out\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-dark.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/hero-video-dialog-demo.json b/apps/web/public/r/styles/default/hero-video-dialog-demo.json
index fed26ce3..e3ed578a 100644
--- a/apps/web/public/r/styles/default/hero-video-dialog-demo.json
+++ b/apps/web/public/r/styles/default/hero-video-dialog-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hero-video-dialog-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/hero-video-dialog-demo.tsx",
-      "content": "import HeroVideoDialog from '~/registry/default/ui/hero-video-dialog'\n\nexport default function HeroVideoDialogDemo() {\n   return (\n      <div className=\"relative\">\n         <HeroVideoDialog\n            className=\"block dark:hidden\"\n            animationStyle=\"from-center\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-light.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n         <HeroVideoDialog\n            className=\"hidden dark:block\"\n            animationStyle=\"from-center\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-dark.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/hero-video-dialog-demo.tsx",
+      "content": "import HeroVideoDialog from \"~/registry/default/ui/hero-video-dialog\"\n\nexport default function HeroVideoDialogDemo() {\n   return (\n      <div className=\"relative\">\n         <HeroVideoDialog\n            className=\"block dark:hidden\"\n            animationStyle=\"from-center\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-light.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n         <HeroVideoDialog\n            className=\"hidden dark:block\"\n            animationStyle=\"from-center\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-dark.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/hero-video-dialog.json b/apps/web/public/r/styles/default/hero-video-dialog.json
index c93c78b1..70b36c54 100644
--- a/apps/web/public/r/styles/default/hero-video-dialog.json
+++ b/apps/web/public/r/styles/default/hero-video-dialog.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hero-video-dialog",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/hero-video-dialog.tsx",
-      "content": "'use client'\n\nimport { useState } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { Play, XIcon } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\ntype AnimationStyle =\n   | 'from-bottom'\n   | 'from-center'\n   | 'from-top'\n   | 'from-left'\n   | 'from-right'\n   | 'fade'\n   | 'top-in-bottom-out'\n   | 'left-in-right-out'\n\ninterface HeroVideoProps {\n   animationStyle?: AnimationStyle\n   videoSrc: string\n   thumbnailSrc: string\n   thumbnailAlt?: string\n   className?: string\n}\n\nconst animationVariants = {\n   'from-bottom': {\n      initial: { y: '100%', opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: '100%', opacity: 0 },\n   },\n   'from-center': {\n      initial: { scale: 0.5, opacity: 0 },\n      animate: { scale: 1, opacity: 1 },\n      exit: { scale: 0.5, opacity: 0 },\n   },\n   'from-top': {\n      initial: { y: '-100%', opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: '-100%', opacity: 0 },\n   },\n   'from-left': {\n      initial: { x: '-100%', opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: '-100%', opacity: 0 },\n   },\n   'from-right': {\n      initial: { x: '100%', opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: '100%', opacity: 0 },\n   },\n   'fade': {\n      initial: { opacity: 0 },\n      animate: { opacity: 1 },\n      exit: { opacity: 0 },\n   },\n   'top-in-bottom-out': {\n      initial: { y: '-100%', opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: '100%', opacity: 0 },\n   },\n   'left-in-right-out': {\n      initial: { x: '-100%', opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: '100%', opacity: 0 },\n   },\n}\n\nexport default function HeroVideoDialog({\n   animationStyle = 'from-center',\n   videoSrc,\n   thumbnailSrc,\n   thumbnailAlt = 'Video thumbnail',\n   className,\n}: HeroVideoProps) {\n   const [isVideoOpen, setIsVideoOpen] = useState(false)\n   const selectedAnimation = animationVariants[animationStyle]\n\n   return (\n      <div className={ny('relative', className)}>\n         <div\n            className=\"group relative cursor-pointer\"\n            onClick={() => setIsVideoOpen(true)}\n         >\n            <img\n               src={thumbnailSrc}\n               alt={thumbnailAlt}\n               width={1920}\n               height={1080}\n               className=\"w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]\"\n            />\n            <div className=\"absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100\">\n               <div className=\"bg-primary/10 flex size-28 items-center justify-center rounded-full backdrop-blur-md\">\n                  <div\n                     className=\"from-primary/30 to-primary relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]\"\n                  >\n                     <Play\n                        className=\"size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105\"\n                        style={{\n                           filter:\n                    'drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))',\n                        }}\n                     />\n                  </div>\n               </div>\n            </div>\n         </div>\n         <AnimatePresence>\n            {isVideoOpen && (\n               <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  onClick={() => setIsVideoOpen(false)}\n                  exit={{ opacity: 0 }}\n                  className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md\"\n               >\n                  <motion.div\n                     {...selectedAnimation}\n                     transition={{ type: 'spring', damping: 30, stiffness: 300 }}\n                     className=\"relative mx-4 aspect-video w-full max-w-4xl md:mx-0\"\n                  >\n                     <motion.button className=\"absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black\">\n                        <XIcon className=\"size-5\" />\n                     </motion.button>\n                     <div className=\"relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white\">\n                        <iframe\n                           src={videoSrc}\n                           className=\"size-full rounded-2xl\"\n                           allowFullScreen\n                           allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                        >\n                        </iframe>\n                     </div>\n                  </motion.div>\n               </motion.div>\n            )}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { Play, XIcon } from \"lucide-react\"\nimport { useState } from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ntype AnimationStyle =\n   | \"from-bottom\"\n   | \"from-center\"\n   | \"from-top\"\n   | \"from-left\"\n   | \"from-right\"\n   | \"fade\"\n   | \"top-in-bottom-out\"\n   | \"left-in-right-out\"\n\ninterface HeroVideoProps {\n   animationStyle?: AnimationStyle\n   videoSrc: string\n   thumbnailSrc: string\n   thumbnailAlt?: string\n   className?: string\n}\n\nconst animationVariants = {\n   \"from-bottom\": {\n      initial: { y: \"100%\", opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: \"100%\", opacity: 0 },\n   },\n   \"from-center\": {\n      initial: { scale: 0.5, opacity: 0 },\n      animate: { scale: 1, opacity: 1 },\n      exit: { scale: 0.5, opacity: 0 },\n   },\n   \"from-top\": {\n      initial: { y: \"-100%\", opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: \"-100%\", opacity: 0 },\n   },\n   \"from-left\": {\n      initial: { x: \"-100%\", opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: \"-100%\", opacity: 0 },\n   },\n   \"from-right\": {\n      initial: { x: \"100%\", opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: \"100%\", opacity: 0 },\n   },\n   fade: {\n      initial: { opacity: 0 },\n      animate: { opacity: 1 },\n      exit: { opacity: 0 },\n   },\n   \"top-in-bottom-out\": {\n      initial: { y: \"-100%\", opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: \"100%\", opacity: 0 },\n   },\n   \"left-in-right-out\": {\n      initial: { x: \"-100%\", opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: \"100%\", opacity: 0 },\n   },\n}\n\nexport default function HeroVideoDialog({\n   animationStyle = \"from-center\",\n   videoSrc,\n   thumbnailSrc,\n   thumbnailAlt = \"Video thumbnail\",\n   className,\n}: HeroVideoProps) {\n   const [isVideoOpen, setIsVideoOpen] = useState(false)\n   const selectedAnimation = animationVariants[animationStyle]\n\n   return (\n      <div className={ny(\"relative\", className)}>\n         <div\n            className=\"group relative cursor-pointer\"\n            onClick={() => setIsVideoOpen(true)}\n         >\n            <img\n               src={thumbnailSrc}\n               alt={thumbnailAlt}\n               width={1920}\n               height={1080}\n               className=\"w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]\"\n            />\n            <div className=\"absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100\">\n               <div className=\"bg-primary/10 flex size-28 items-center justify-center rounded-full backdrop-blur-md\">\n                  <div className=\"from-primary/30 to-primary relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]\">\n                     <Play\n                        className=\"size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105\"\n                        style={{\n                           filter:\n                              \"drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))\",\n                        }}\n                     />\n                  </div>\n               </div>\n            </div>\n         </div>\n         <AnimatePresence>\n            {isVideoOpen && (\n               <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  onClick={() => setIsVideoOpen(false)}\n                  exit={{ opacity: 0 }}\n                  className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md\"\n               >\n                  <motion.div\n                     {...selectedAnimation}\n                     transition={{\n                        type: \"spring\",\n                        damping: 30,\n                        stiffness: 300,\n                     }}\n                     className=\"relative mx-4 aspect-video w-full max-w-4xl md:mx-0\"\n                  >\n                     <motion.button className=\"absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black\">\n                        <XIcon className=\"size-5\" />\n                     </motion.button>\n                     <div className=\"relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white\">\n                        <iframe\n                           src={videoSrc}\n                           className=\"size-full rounded-2xl\"\n                           allowFullScreen\n                           allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                        ></iframe>\n                     </div>\n                  </motion.div>\n               </motion.div>\n            )}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/hero-video-youtube.json b/apps/web/public/r/styles/default/hero-video-youtube.json
index 5e1f3126..6b440701 100644
--- a/apps/web/public/r/styles/default/hero-video-youtube.json
+++ b/apps/web/public/r/styles/default/hero-video-youtube.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hero-video-youtube",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/hero-video-youtube.tsx",
-      "content": "import { Button } from '~/components/ui/button'\nimport HeroVideo, { HeroVideoAction } from '~/registry/default/ui/hero-video'\nimport { MagicCard, MagicContainer } from '~/registry/default/ui/magic-card'\n\nfunction PlayButton() {\n   return (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 24 24\"\n         fill=\"currentColor\"\n         className=\"dark:text-white\"\n      >\n         <path\n            fillRule=\"evenodd\"\n            d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   )\n}\n\nexport default function HeroVideoDemo() {\n   return (\n      <div className=\"bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Never gonna give you up\n         </span>\n         {/* Magic Card  */}\n         <MagicContainer className=\"relative\">\n            <MagicCard className=\"min-h-[400px] [mask:linear-gradient(0deg,transparent_20%,#fff_100%)]\">\n               <HeroVideo\n                  title=\"Never gonna give you up\"\n                  image=\"https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024\"\n               >\n                  <HeroVideoAction>\n                     <Button className=\"size-20 rounded-full\" variant=\"outline\">\n                        <PlayButton />\n                     </Button>\n                  </HeroVideoAction>\n                  <iframe\n                     height=\"500\"\n                     className=\"h-[500px] rounded-xl border\"\n                     src=\"https://www.youtube.com/embed/dQw4w9WgXcQ?si=FmFbhzaToJQ9iXN4\"\n                     title=\"YouTube video player\"\n                     allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                  />\n               </HeroVideo>\n            </MagicCard>\n         </MagicContainer>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/hero-video-youtube.tsx",
+      "content": "import { Button } from \"~/components/ui/button\"\nimport HeroVideo, { HeroVideoAction } from \"~/registry/default/ui/hero-video\"\nimport { MagicCard, MagicContainer } from \"~/registry/default/ui/magic-card\"\n\nfunction PlayButton() {\n   return (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 24 24\"\n         fill=\"currentColor\"\n         className=\"dark:text-white\"\n      >\n         <path\n            fillRule=\"evenodd\"\n            d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   )\n}\n\nexport default function HeroVideoDemo() {\n   return (\n      <div className=\"bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Never gonna give you up\n         </span>\n         {/* Magic Card  */}\n         <MagicContainer className=\"relative\">\n            <MagicCard className=\"min-h-[400px] [mask:linear-gradient(0deg,transparent_20%,#fff_100%)]\">\n               <HeroVideo\n                  title=\"Never gonna give you up\"\n                  image=\"https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024\"\n               >\n                  <HeroVideoAction>\n                     <Button className=\"size-20 rounded-full\" variant=\"outline\">\n                        <PlayButton />\n                     </Button>\n                  </HeroVideoAction>\n                  <iframe\n                     height=\"500\"\n                     className=\"h-[500px] rounded-xl border\"\n                     src=\"https://www.youtube.com/embed/dQw4w9WgXcQ?si=FmFbhzaToJQ9iXN4\"\n                     title=\"YouTube video player\"\n                     allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                  />\n               </HeroVideo>\n            </MagicCard>\n         </MagicContainer>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/hover-card-demo.json b/apps/web/public/r/styles/default/hover-card-demo.json
index bcdd3f30..eb18841a 100644
--- a/apps/web/public/r/styles/default/hover-card-demo.json
+++ b/apps/web/public/r/styles/default/hover-card-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hover-card-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "hover-card"
   ],
   "files": [
     {
-      "path": "example/hover-card-demo.tsx",
-      "content": "import { CalendarDays } from 'lucide-react'\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/default/ui/avatar'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   HoverCard,\n   HoverCardContent,\n   HoverCardTrigger,\n} from '~/registry/default/ui/hover-card'\n\nexport default function HoverCardDemo() {\n   return (\n      <HoverCard>\n         <HoverCardTrigger asChild>\n            <Button variant=\"link\">@nextjs</Button>\n         </HoverCardTrigger>\n         <HoverCardContent className=\"w-80\">\n            <div className=\"flex justify-between space-x-4\">\n               <Avatar>\n                  <AvatarImage src=\"https://github.com/vercel.png\" />\n                  <AvatarFallback>VC</AvatarFallback>\n               </Avatar>\n               <div className=\"space-y-1\">\n                  <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n                  <p className=\"text-sm\">\n                     The React Framework – created and maintained by @vercel.\n                  </p>\n                  <div className=\"flex items-center pt-2\">\n                     <CalendarDays className=\"mr-2 size-4 opacity-70\" />\n                     {' '}\n                     <span className=\"text-muted-foreground text-xs\">\n                        Joined December 2021\n                     </span>\n                  </div>\n               </div>\n            </div>\n         </HoverCardContent>\n      </HoverCard>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/hover-card-demo.tsx",
+      "content": "import { CalendarDays } from \"lucide-react\"\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from \"~/registry/default/ui/avatar\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   HoverCard,\n   HoverCardContent,\n   HoverCardTrigger,\n} from \"~/registry/default/ui/hover-card\"\n\nexport default function HoverCardDemo() {\n   return (\n      <HoverCard>\n         <HoverCardTrigger asChild>\n            <Button variant=\"link\">@nextjs</Button>\n         </HoverCardTrigger>\n         <HoverCardContent className=\"w-80\">\n            <div className=\"flex justify-between space-x-4\">\n               <Avatar>\n                  <AvatarImage src=\"https://github.com/vercel.png\" />\n                  <AvatarFallback>VC</AvatarFallback>\n               </Avatar>\n               <div className=\"space-y-1\">\n                  <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n                  <p className=\"text-sm\">\n                     The React Framework – created and maintained by @vercel.\n                  </p>\n                  <div className=\"flex items-center pt-2\">\n                     <CalendarDays className=\"mr-2 size-4 opacity-70\" />{\" \"}\n                     <span className=\"text-muted-foreground text-xs\">\n                        Joined December 2021\n                     </span>\n                  </div>\n               </div>\n            </div>\n         </HoverCardContent>\n      </HoverCard>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/hover-card.json b/apps/web/public/r/styles/default/hover-card.json
index 3ba33093..8200105f 100644
--- a/apps/web/public/r/styles/default/hover-card.json
+++ b/apps/web/public/r/styles/default/hover-card.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hover-card",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-hover-card"
   ],
   "files": [
     {
       "path": "ui/hover-card.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as HoverCardPrimitive from '@radix-ui/react-hover-card'\n\nimport { ny } from '~/lib/utils'\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n   React.ElementRef<typeof HoverCardPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (\n   <HoverCardPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={ny(\n         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none',\n         className,\n      )}\n      {...props}\n   />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n   React.ElementRef<typeof HoverCardPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n   <HoverCardPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={ny(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none\",\n         className,\n      )}\n      {...props}\n   />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/hyper-text-demo.json b/apps/web/public/r/styles/default/hyper-text-demo.json
index e06da7ea..44e161f2 100644
--- a/apps/web/public/r/styles/default/hyper-text-demo.json
+++ b/apps/web/public/r/styles/default/hyper-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hyper-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/hyper-text-demo.tsx",
-      "content": "import HyperText from '~/registry/default/ui/hyper-text'\n\nexport default function HyperTextDemo() {\n   return (\n      <HyperText\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         text=\"Hyper Text\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/hyper-text-demo.tsx",
+      "content": "import HyperText from \"~/registry/default/ui/hyper-text\"\n\nexport default function HyperTextDemo() {\n   return (\n      <HyperText\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         text=\"Hyper Text\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/hyper-text.json b/apps/web/public/r/styles/default/hyper-text.json
index ef635ab2..365a6f6e 100644
--- a/apps/web/public/r/styles/default/hyper-text.json
+++ b/apps/web/public/r/styles/default/hyper-text.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hyper-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/hyper-text.tsx",
-      "content": "'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport type { Variants } from 'framer-motion'\nimport { AnimatePresence, motion } from 'framer-motion'\n\nimport { ny } from '~/lib/utils'\n\ninterface HyperTextProps {\n   text: string\n   duration?: number\n   framerProps?: Variants\n   className?: string\n   animateOnLoad?: boolean\n}\n\nconst alphabets = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')\n\nconst getRandomInt = (max: number) => Math.floor(Math.random() * max)\n\nexport default function HyperText({\n   text,\n   duration = 800,\n   framerProps = {\n      initial: { opacity: 0, y: -10 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 3 },\n   },\n   className,\n   animateOnLoad = true,\n}: HyperTextProps) {\n   const [displayText, setDisplayText] = useState(text.split(''))\n   const [trigger, setTrigger] = useState(false)\n   const interations = useRef(0)\n   const isFirstRender = useRef(true)\n\n   const triggerAnimation = () => {\n      interations.current = 0\n      setTrigger(true)\n   }\n\n   useEffect(() => {\n      const interval = setInterval(\n         () => {\n            if (!animateOnLoad && isFirstRender.current) {\n               clearInterval(interval)\n               isFirstRender.current = false\n               return\n            }\n            if (interations.current < text.length) {\n               setDisplayText(t =>\n                  t.map((l, i) =>\n                     l === ' '\n                        ? l\n                        : i <= interations.current\n                           ? text[i]\n                           : alphabets[getRandomInt(26)],\n                  ),\n               )\n               interations.current = interations.current + 0.1\n            }\n            else {\n               setTrigger(false)\n               clearInterval(interval)\n            }\n         },\n         duration / (text.length * 10),\n      )\n      // Clean up interval on unmount\n      return () => clearInterval(interval)\n   }, [text, duration, trigger, animateOnLoad])\n\n   return (\n      <div\n         className=\"flex scale-100 cursor-default overflow-hidden py-2\"\n         onMouseEnter={triggerAnimation}\n      >\n         <AnimatePresence mode=\"wait\">\n            {displayText.map((letter, i) => (\n               <motion.h1\n                  key={i}\n                  className={ny('font-mono', letter === ' ' ? 'w-3' : '', className)}\n                  {...framerProps}\n               >\n                  {letter.toUpperCase()}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { useEffect, useRef, useState } from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ninterface HyperTextProps {\n   text: string\n   duration?: number\n   framerProps?: Variants\n   className?: string\n   animateOnLoad?: boolean\n}\n\nconst alphabets = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\")\n\nconst getRandomInt = (max: number) => Math.floor(Math.random() * max)\n\nexport default function HyperText({\n   text,\n   duration = 800,\n   framerProps = {\n      initial: { opacity: 0, y: -10 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 3 },\n   },\n   className,\n   animateOnLoad = true,\n}: HyperTextProps) {\n   const [displayText, setDisplayText] = useState(text.split(\"\"))\n   const [trigger, setTrigger] = useState(false)\n   const interations = useRef(0)\n   const isFirstRender = useRef(true)\n\n   const triggerAnimation = () => {\n      interations.current = 0\n      setTrigger(true)\n   }\n\n   useEffect(() => {\n      const interval = setInterval(\n         () => {\n            if (!animateOnLoad && isFirstRender.current) {\n               clearInterval(interval)\n               isFirstRender.current = false\n               return\n            }\n            if (interations.current < text.length) {\n               setDisplayText((t) =>\n                  t.map((l, i) =>\n                     l === \" \"\n                        ? l\n                        : i <= interations.current\n                          ? text[i]\n                          : alphabets[getRandomInt(26)],\n                  ),\n               )\n               interations.current = interations.current + 0.1\n            } else {\n               setTrigger(false)\n               clearInterval(interval)\n            }\n         },\n         duration / (text.length * 10),\n      )\n      // Clean up interval on unmount\n      return () => clearInterval(interval)\n   }, [text, duration, trigger, animateOnLoad])\n\n   return (\n      <div\n         className=\"flex scale-100 cursor-default overflow-hidden py-2\"\n         onMouseEnter={triggerAnimation}\n      >\n         <AnimatePresence mode=\"wait\">\n            {displayText.map((letter, i) => (\n               <motion.h1\n                  key={i}\n                  className={ny(\n                     \"font-mono\",\n                     letter === \" \" ? \"w-3\" : \"\",\n                     className,\n                  )}\n                  {...framerProps}\n               >\n                  {letter.toUpperCase()}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/icon-cloud-demo.json b/apps/web/public/r/styles/default/icon-cloud-demo.json
index e99f8fc6..134e88d3 100644
--- a/apps/web/public/r/styles/default/icon-cloud-demo.json
+++ b/apps/web/public/r/styles/default/icon-cloud-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "icon-cloud-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/icon-cloud-demo.tsx",
-      "content": "import IconCloud from '~/registry/default/ui/icon-cloud'\n\nconst slugs = [\n   'typescript',\n   'javascript',\n   'dart',\n   'java',\n   'react',\n   'flutter',\n   'android',\n   'html5',\n   'css3',\n   'nodedotjs',\n   'express',\n   'nextdotjs',\n   'prisma',\n   'amazonaws',\n   'postgresql',\n   'firebase',\n   'nginx',\n   'vercel',\n   'testinglibrary',\n   'jest',\n   'cypress',\n   'docker',\n   'git',\n   'jira',\n   'github',\n   'gitlab',\n   'visualstudiocode',\n   'androidstudio',\n   'sonarqube',\n   'figma',\n]\n\nexport default function IconCloudDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-20 pb-20 pt-8 \">\n         <IconCloud iconSlugs={slugs} />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/icon-cloud-demo.tsx",
+      "content": "import IconCloud from \"~/registry/default/ui/icon-cloud\"\n\nconst slugs = [\n   \"typescript\",\n   \"javascript\",\n   \"dart\",\n   \"java\",\n   \"react\",\n   \"flutter\",\n   \"android\",\n   \"html5\",\n   \"css3\",\n   \"nodedotjs\",\n   \"express\",\n   \"nextdotjs\",\n   \"prisma\",\n   \"amazonaws\",\n   \"postgresql\",\n   \"firebase\",\n   \"nginx\",\n   \"vercel\",\n   \"testinglibrary\",\n   \"jest\",\n   \"cypress\",\n   \"docker\",\n   \"git\",\n   \"jira\",\n   \"github\",\n   \"gitlab\",\n   \"visualstudiocode\",\n   \"androidstudio\",\n   \"sonarqube\",\n   \"figma\",\n]\n\nexport default function IconCloudDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-20 pb-20 pt-8 \">\n         <IconCloud iconSlugs={slugs} />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/icon-cloud.json b/apps/web/public/r/styles/default/icon-cloud.json
index ee0b879c..240e0d52 100644
--- a/apps/web/public/r/styles/default/icon-cloud.json
+++ b/apps/web/public/r/styles/default/icon-cloud.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "icon-cloud",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "next-themes",
     "react-icon-cloud"
@@ -8,8 +10,8 @@
   "files": [
     {
       "path": "ui/icon-cloud.tsx",
-      "content": "'use client'\n\nimport { useTheme } from 'next-themes'\nimport { useEffect, useMemo, useState } from 'react'\nimport type { ICloud, SimpleIcon } from 'react-icon-cloud'\nimport { Cloud, fetchSimpleIcons, renderSimpleIcon } from 'react-icon-cloud'\n\nexport const cloudProps: Omit<ICloud, 'children'> = {\n   containerProps: {\n      style: {\n         display: 'flex',\n         justifyContent: 'center',\n         alignItems: 'center',\n         width: '100%',\n         paddingTop: 40,\n      },\n   },\n   options: {\n      reverse: true,\n      depth: 1,\n      wheelZoom: false,\n      imageScale: 2,\n      activeCursor: 'default',\n      tooltip: 'native',\n      initial: [0.1, -0.1],\n      clickToFront: 500,\n      tooltipDelay: 0,\n      outlineColour: '#0000',\n      maxSpeed: 0.04,\n      minSpeed: 0.02,\n      // dragControl: false,\n   },\n}\n\nexport function renderCustomIcon(icon: SimpleIcon, theme: string) {\n   const bgHex = theme === 'light' ? '#f3f2ef' : '#080510'\n   const fallbackHex = theme === 'light' ? '#6e6e73' : '#ffffff'\n   const minContrastRatio = theme === 'dark' ? 2 : 1.2\n\n   return renderSimpleIcon({\n      icon,\n      bgHex,\n      fallbackHex,\n      minContrastRatio,\n      size: 42,\n      aProps: {\n         href: undefined,\n         target: undefined,\n         rel: undefined,\n         onClick: (e: any) => e.preventDefault(),\n      },\n   })\n}\n\nexport interface DynamicCloudProps {\n   iconSlugs: string[]\n}\n\ntype IconData = Awaited<ReturnType<typeof fetchSimpleIcons>>\n\nexport default function IconCloud({ iconSlugs }: DynamicCloudProps) {\n   const [data, setData] = useState<IconData | null>(null)\n   const { theme } = useTheme()\n\n   useEffect(() => {\n      fetchSimpleIcons({ slugs: iconSlugs }).then(setData)\n   }, [iconSlugs])\n\n   const renderedIcons = useMemo(() => {\n      if (!data)\n         return null\n\n      return Object.values(data.simpleIcons).map(icon =>\n         renderCustomIcon(icon, theme || 'light'),\n      )\n   }, [data, theme])\n\n   return (\n   // @ts-expect-error is fine\n      <Cloud {...cloudProps}>\n         <>{renderedIcons}</>\n      </Cloud>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport type { ICloud, SimpleIcon } from \"react-icon-cloud\"\nimport { Cloud, fetchSimpleIcons, renderSimpleIcon } from \"react-icon-cloud\"\n\nexport const cloudProps: Omit<ICloud, \"children\"> = {\n   containerProps: {\n      style: {\n         display: \"flex\",\n         justifyContent: \"center\",\n         alignItems: \"center\",\n         width: \"100%\",\n         paddingTop: 40,\n      },\n   },\n   options: {\n      reverse: true,\n      depth: 1,\n      wheelZoom: false,\n      imageScale: 2,\n      activeCursor: \"default\",\n      tooltip: \"native\",\n      initial: [0.1, -0.1],\n      clickToFront: 500,\n      tooltipDelay: 0,\n      outlineColour: \"#0000\",\n      maxSpeed: 0.04,\n      minSpeed: 0.02,\n      // dragControl: false,\n   },\n}\n\nexport function renderCustomIcon(icon: SimpleIcon, theme: string) {\n   const bgHex = theme === \"light\" ? \"#f3f2ef\" : \"#080510\"\n   const fallbackHex = theme === \"light\" ? \"#6e6e73\" : \"#ffffff\"\n   const minContrastRatio = theme === \"dark\" ? 2 : 1.2\n\n   return renderSimpleIcon({\n      icon,\n      bgHex,\n      fallbackHex,\n      minContrastRatio,\n      size: 42,\n      aProps: {\n         href: undefined,\n         target: undefined,\n         rel: undefined,\n         onClick: (e: any) => e.preventDefault(),\n      },\n   })\n}\n\nexport interface DynamicCloudProps {\n   iconSlugs: string[]\n}\n\ntype IconData = Awaited<ReturnType<typeof fetchSimpleIcons>>\n\nexport default function IconCloud({ iconSlugs }: DynamicCloudProps) {\n   const [data, setData] = useState<IconData | null>(null)\n   const { theme } = useTheme()\n\n   useEffect(() => {\n      fetchSimpleIcons({ slugs: iconSlugs }).then(setData)\n   }, [iconSlugs])\n\n   const renderedIcons = useMemo(() => {\n      if (!data) return null\n\n      return Object.values(data.simpleIcons).map((icon) =>\n         renderCustomIcon(icon, theme || \"light\"),\n      )\n   }, [data, theme])\n\n   return (\n      // @ts-expect-error is fine\n      <Cloud {...cloudProps}>\n         <>{renderedIcons}</>\n      </Cloud>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-demo.json b/apps/web/public/r/styles/default/input-demo.json
index 27485af7..1b582180 100644
--- a/apps/web/public/r/styles/default/input-demo.json
+++ b/apps/web/public/r/styles/default/input-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input"
   ],
   "files": [
     {
-      "path": "example/input-demo.tsx",
-      "content": "import { Input } from '~/registry/default/ui/input'\n\nexport default function InputDemo() {\n   return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-demo.tsx",
+      "content": "import { Input } from \"~/registry/default/ui/input\"\n\nexport default function InputDemo() {\n   return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-disabled.json b/apps/web/public/r/styles/default/input-disabled.json
index bda3c2e9..50fc5968 100644
--- a/apps/web/public/r/styles/default/input-disabled.json
+++ b/apps/web/public/r/styles/default/input-disabled.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input"
   ],
   "files": [
     {
-      "path": "example/input-disabled.tsx",
-      "content": "import { Input } from '~/registry/default/ui/input'\n\nexport default function InputDisabled() {\n   return <Input disabled type=\"email\" placeholder=\"Email\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-disabled.tsx",
+      "content": "import { Input } from \"~/registry/default/ui/input\"\n\nexport default function InputDisabled() {\n   return <Input disabled type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-file.json b/apps/web/public/r/styles/default/input-file.json
index cac4d2ab..5470b83e 100644
--- a/apps/web/public/r/styles/default/input-file.json
+++ b/apps/web/public/r/styles/default/input-file.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-file",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input"
   ],
   "files": [
     {
-      "path": "example/input-file.tsx",
-      "content": "import { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\n\nexport default function InputFile() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"picture\">Picture</Label>\n         <Input id=\"picture\" type=\"file\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-file.tsx",
+      "content": "import { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport default function InputFile() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"picture\">Picture</Label>\n         <Input id=\"picture\" type=\"file\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-form.json b/apps/web/public/r/styles/default/input-form.json
index 23998ed9..c397ddbc 100644
--- a/apps/web/public/r/styles/default/input-form.json
+++ b/apps/web/public/r/styles/default/input-form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input",
     "button",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport { Input } from '~/registry/default/ui/input'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst FormSchema = z.object({\n   username: z.string().min(2, {\n      message: 'Username must be at least 2 characters.',\n   }),\n})\n\nexport default function InputForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         username: '',\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"username\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Username</FormLabel>\n                     <FormControl>\n                        <Input placeholder=\"nyxb\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your public display name.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst FormSchema = z.object({\n   username: z.string().min(2, {\n      message: \"Username must be at least 2 characters.\",\n   }),\n})\n\nexport default function InputForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         username: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"username\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Username</FormLabel>\n                     <FormControl>\n                        <Input placeholder=\"nyxb\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your public display name.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-otp-controlled.json b/apps/web/public/r/styles/default/input-otp-controlled.json
index 326175bd..14e34f21 100644
--- a/apps/web/public/r/styles/default/input-otp-controlled.json
+++ b/apps/web/public/r/styles/default/input-otp-controlled.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp-controlled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input-otp"
   ],
   "files": [
     {
-      "path": "example/input-otp-controlled.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from '~/registry/default/ui/input-otp'\n\nexport default function InputOTPControlled() {\n   const [value, setValue] = React.useState('')\n\n   return (\n      <div className=\"space-y-2\">\n         <InputOTP\n            maxLength={6}\n            value={value}\n            onChange={value => setValue(value)}\n         >\n            <InputOTPGroup>\n               <InputOTPSlot index={0} />\n               <InputOTPSlot index={1} />\n               <InputOTPSlot index={2} />\n               <InputOTPSlot index={3} />\n               <InputOTPSlot index={4} />\n               <InputOTPSlot index={5} />\n            </InputOTPGroup>\n         </InputOTP>\n         <div className=\"text-center text-sm\">\n            {value === ''\n               ? (\n                     <>Enter your one-time password.</>\n                  )\n               : (\n                     <>\n                        You entered:\n                        {value}\n                     </>\n                  )}\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-otp-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from \"~/registry/default/ui/input-otp\"\n\nexport default function InputOTPControlled() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <div className=\"space-y-2\">\n         <InputOTP\n            maxLength={6}\n            value={value}\n            onChange={(value) => setValue(value)}\n         >\n            <InputOTPGroup>\n               <InputOTPSlot index={0} />\n               <InputOTPSlot index={1} />\n               <InputOTPSlot index={2} />\n               <InputOTPSlot index={3} />\n               <InputOTPSlot index={4} />\n               <InputOTPSlot index={5} />\n            </InputOTPGroup>\n         </InputOTP>\n         <div className=\"text-center text-sm\">\n            {value === \"\" ? (\n               <>Enter your one-time password.</>\n            ) : (\n               <>\n                  You entered:\n                  {value}\n               </>\n            )}\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-otp-demo.json b/apps/web/public/r/styles/default/input-otp-demo.json
index c0ac1b4c..4fbeec46 100644
--- a/apps/web/public/r/styles/default/input-otp-demo.json
+++ b/apps/web/public/r/styles/default/input-otp-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input-otp"
   ],
   "files": [
     {
-      "path": "example/input-otp-demo.tsx",
-      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from '~/registry/default/ui/input-otp'\n\nexport default function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-otp-demo.tsx",
+      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"~/registry/default/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-otp-disabled.json b/apps/web/public/r/styles/default/input-otp-disabled.json
index 0008a175..70594be1 100644
--- a/apps/web/public/r/styles/default/input-otp-disabled.json
+++ b/apps/web/public/r/styles/default/input-otp-disabled.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input-otp",
     "form"
   ],
   "files": [
     {
-      "path": "example/input-otp-disabled.tsx",
-      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from '~/registry/default/ui/input-otp'\n\nexport default function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6} disabled>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-otp-disabled.tsx",
+      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"~/registry/default/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6} disabled>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-otp-form.json b/apps/web/public/r/styles/default/input-otp-form.json
index e8654298..d2bd1133 100644
--- a/apps/web/public/r/styles/default/input-otp-form.json
+++ b/apps/web/public/r/styles/default/input-otp-form.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input-otp",
     "form"
   ],
   "files": [
     {
-      "path": "example/input-otp-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from '~/registry/default/ui/input-otp'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst FormSchema = z.object({\n   pin: z.string().min(6, {\n      message: 'Your one-time password must be 6 characters.',\n   }),\n})\n\nexport default function InputOTPForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         pin: '',\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"pin\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>One-Time Password</FormLabel>\n                     <FormControl>\n                        <InputOTP maxLength={6} {...field}>\n                           <InputOTPGroup>\n                              <InputOTPSlot index={0} />\n                              <InputOTPSlot index={1} />\n                              <InputOTPSlot index={2} />\n                              <InputOTPSlot index={3} />\n                              <InputOTPSlot index={4} />\n                              <InputOTPSlot index={5} />\n                           </InputOTPGroup>\n                        </InputOTP>\n                     </FormControl>\n                     <FormDescription>\n                        Please enter the one-time password sent to your phone.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-otp-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from \"~/registry/default/ui/input-otp\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst FormSchema = z.object({\n   pin: z.string().min(6, {\n      message: \"Your one-time password must be 6 characters.\",\n   }),\n})\n\nexport default function InputOTPForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         pin: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"pin\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>One-Time Password</FormLabel>\n                     <FormControl>\n                        <InputOTP maxLength={6} {...field}>\n                           <InputOTPGroup>\n                              <InputOTPSlot index={0} />\n                              <InputOTPSlot index={1} />\n                              <InputOTPSlot index={2} />\n                              <InputOTPSlot index={3} />\n                              <InputOTPSlot index={4} />\n                              <InputOTPSlot index={5} />\n                           </InputOTPGroup>\n                        </InputOTP>\n                     </FormControl>\n                     <FormDescription>\n                        Please enter the one-time password sent to your phone.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-otp-pattern.json b/apps/web/public/r/styles/default/input-otp-pattern.json
index 0e15e4e4..59653c52 100644
--- a/apps/web/public/r/styles/default/input-otp-pattern.json
+++ b/apps/web/public/r/styles/default/input-otp-pattern.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp-pattern",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input-otp"
   ],
   "files": [
     {
-      "path": "example/input-otp-pattern.tsx",
-      "content": "import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from '~/registry/default/ui/input-otp'\n\nexport default function InputOTPPattern() {\n   return (\n      <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS} inputMode=\"text\" spellCheck=\"false\">\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-otp-pattern.tsx",
+      "content": "import { REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from \"~/registry/default/ui/input-otp\"\n\nexport default function InputOTPPattern() {\n   return (\n      <InputOTP\n         maxLength={6}\n         pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n         inputMode=\"text\"\n         spellCheck=\"false\"\n      >\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-otp-separator.json b/apps/web/public/r/styles/default/input-otp-separator.json
index 0a272a99..c0da8f5e 100644
--- a/apps/web/public/r/styles/default/input-otp-separator.json
+++ b/apps/web/public/r/styles/default/input-otp-separator.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp-separator",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input-otp"
   ],
   "files": [
     {
-      "path": "example/input-otp-separator.tsx",
-      "content": "import React from 'react'\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from '~/registry/default/ui/input-otp'\n\nexport default function InputOTPWithSeparator() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-otp-separator.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"~/registry/default/ui/input-otp\"\n\nexport default function InputOTPWithSeparator() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-otp.json b/apps/web/public/r/styles/default/input-otp.json
index 656449a0..99c505d7 100644
--- a/apps/web/public/r/styles/default/input-otp.json
+++ b/apps/web/public/r/styles/default/input-otp.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "input-otp"
   ],
   "files": [
     {
       "path": "ui/input-otp.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport { Dot } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst InputOTP = React.forwardRef<\n   React.ElementRef<typeof OTPInput>,\n   React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n   <OTPInput\n      ref={ref}\n      containerClassName={ny(\n         'flex items-center gap-2 has-[:disabled]:opacity-50',\n         containerClassName,\n      )}\n      className={ny('disabled:cursor-not-allowed', className)}\n      {...props}\n   />\n))\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n   React.ElementRef<'div'>,\n   React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n   <div ref={ref} className={ny('flex items-center', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n   React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n   const inputOTPContext = React.useContext(OTPInputContext)\n   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',\n            isActive && 'ring-ring ring-offset-background z-10 ring-2',\n            className,\n         )}\n         {...props}\n      >\n         {char}\n         {hasFakeCaret && (\n            <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n               <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n            </div>\n         )}\n      </div>\n   )\n})\nInputOTPSlot.displayName = 'InputOTPSlot'\n\nconst InputOTPSeparator = React.forwardRef<\n   React.ElementRef<'div'>,\n   React.ComponentPropsWithoutRef<'div'>\n>(({ ...props }, ref) => (\n   <div ref={ref} role=\"separator\" {...props}>\n      <Dot />\n   </div>\n))\nInputOTPSeparator.displayName = 'InputOTPSeparator'\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Dot } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n   React.ElementRef<typeof OTPInput>,\n   React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n   <OTPInput\n      ref={ref}\n      containerClassName={ny(\n         \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n         containerClassName,\n      )}\n      className={ny(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n   />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n   React.ElementRef<\"div\">,\n   React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n   <div ref={ref} className={ny(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n   React.ElementRef<\"div\">,\n   React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n   const inputOTPContext = React.useContext(OTPInputContext)\n   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n            isActive && \"ring-ring ring-offset-background z-10 ring-2\",\n            className,\n         )}\n         {...props}\n      >\n         {char}\n         {hasFakeCaret && (\n            <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n               <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n            </div>\n         )}\n      </div>\n   )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n   React.ElementRef<\"div\">,\n   React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n   <div ref={ref} role=\"separator\" {...props}>\n      <Dot />\n   </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-phone-default.json b/apps/web/public/r/styles/default/input-phone-default.json
index 42c649c5..7a37091e 100644
--- a/apps/web/public/r/styles/default/input-phone-default.json
+++ b/apps/web/public/r/styles/default/input-phone-default.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone-default",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "input",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-phone-default.tsx",
-      "content": "import * as React from 'react'\n\nimport { InputPhone } from '~/registry/default/ui/input-phone'\n\nexport default function InputPhoneDefault() {\n   const [value, setValue] = React.useState('')\n\n   return <InputPhone value={value} onChange={setValue} defaultCountry=\"US\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-phone-default.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"~/registry/default/ui/input-phone\"\n\nexport default function InputPhoneDefault() {\n   const [value, setValue] = React.useState(\"\")\n\n   return <InputPhone value={value} onChange={setValue} defaultCountry=\"US\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-phone-demo.json b/apps/web/public/r/styles/default/input-phone-demo.json
index 39e742c8..7b70ac7a 100644
--- a/apps/web/public/r/styles/default/input-phone-demo.json
+++ b/apps/web/public/r/styles/default/input-phone-demo.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "input",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-phone-demo.tsx",
-      "content": "import * as React from 'react'\n\nimport { InputPhone } from '~/registry/default/ui/input-phone'\n\nexport default function InputPhoneDemo() {\n   const [value, setValue] = React.useState('')\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         placeholder=\"Enter a phone number\"\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-phone-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"~/registry/default/ui/input-phone\"\n\nexport default function InputPhoneDemo() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         placeholder=\"Enter a phone number\"\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-phone-form.json b/apps/web/public/r/styles/default/input-phone-form.json
index 7d6f8d9b..3ff12d6b 100644
--- a/apps/web/public/r/styles/default/input-phone-form.json
+++ b/apps/web/public/r/styles/default/input-phone-form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "input",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-phone-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { isValidPhoneNumber } from 'react-phone-number-input'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport { InputPhone } from '~/registry/default/ui/input-phone'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst FormSchema = z.object({\n   phone: z\n      .string()\n      .refine(isValidPhoneNumber, { message: 'Invalid phone number' }),\n})\n\nexport default function InputPhoneForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         phone: '',\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"phone\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Phone Number</FormLabel>\n                     <FormControl>\n                        <InputPhone placeholder=\"Enter a phone number\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        Please enter a valid phone number.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-phone-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { isValidPhoneNumber } from \"react-phone-number-input\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport { InputPhone } from \"~/registry/default/ui/input-phone\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst FormSchema = z.object({\n   phone: z\n      .string()\n      .refine(isValidPhoneNumber, { message: \"Invalid phone number\" }),\n})\n\nexport default function InputPhoneForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         phone: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"phone\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Phone Number</FormLabel>\n                     <FormControl>\n                        <InputPhone\n                           placeholder=\"Enter a phone number\"\n                           {...field}\n                        />\n                     </FormControl>\n                     <FormDescription>\n                        Please enter a valid phone number.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-phone-initial.json b/apps/web/public/r/styles/default/input-phone-initial.json
index 9889bc6d..48264fac 100644
--- a/apps/web/public/r/styles/default/input-phone-initial.json
+++ b/apps/web/public/r/styles/default/input-phone-initial.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone-initial",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "input",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-phone-initial.tsx",
-      "content": "import * as React from 'react'\n\nimport { InputPhone } from '~/registry/default/ui/input-phone'\n\nexport default function InputPhoneInitial() {\n   const [value, setValue] = React.useState('')\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         initialValueFormat=\"national\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-phone-initial.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"~/registry/default/ui/input-phone\"\n\nexport default function InputPhoneInitial() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         initialValueFormat=\"national\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-phone-international.json b/apps/web/public/r/styles/default/input-phone-international.json
index 086a6ac2..5483e058 100644
--- a/apps/web/public/r/styles/default/input-phone-international.json
+++ b/apps/web/public/r/styles/default/input-phone-international.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone-international",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "input",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-phone-international.tsx",
-      "content": "import * as React from 'react'\n\nimport { InputPhone } from '~/registry/default/ui/input-phone'\n\nexport default function InputPhoneInternational() {\n   const [value, setValue] = React.useState('')\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         international\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-phone-international.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"~/registry/default/ui/input-phone\"\n\nexport default function InputPhoneInternational() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         international\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-phone-national.json b/apps/web/public/r/styles/default/input-phone-national.json
index 60cf3cdf..eda6a69b 100644
--- a/apps/web/public/r/styles/default/input-phone-national.json
+++ b/apps/web/public/r/styles/default/input-phone-national.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone-national",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "input",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-phone-national.tsx",
-      "content": "import * as React from 'react'\n\nimport { InputPhone } from '~/registry/default/ui/input-phone'\n\nexport default function InputPhoneNational() {\n   const [value, setValue] = React.useState('')\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         international={false}\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-phone-national.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"~/registry/default/ui/input-phone\"\n\nexport default function InputPhoneNational() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         international={false}\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-phone.json b/apps/web/public/r/styles/default/input-phone.json
index ce321084..f61c1431 100644
--- a/apps/web/public/r/styles/default/input-phone.json
+++ b/apps/web/public/r/styles/default/input-phone.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "react-phone-number-input",
     "@radix-ui/react-icons"
@@ -14,8 +16,8 @@
   "files": [
     {
       "path": "ui/input-phone.tsx",
-      "content": "import * as React from 'react'\nimport { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons'\nimport * as RPNInput from 'react-phone-number-input'\nimport flags from 'react-phone-number-input/flags'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/registry/miami/ui/command'\nimport type { InputProps } from '~/registry/miami/ui/input'\nimport { Input } from '~/registry/miami/ui/input'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\n\ntype InputPhoneProps = Omit<\n   React.InputHTMLAttributes<HTMLInputElement>,\n  'onChange' | 'value'\n> &\nOmit<RPNInput.Props<typeof RPNInput.default>, 'onChange'> & {\n   onChange?: (value: RPNInput.Value) => void\n}\n\nconst InputPhone: React.ForwardRefExoticComponent<InputPhoneProps>\n  = React.forwardRef<React.ElementRef<typeof RPNInput.default>, InputPhoneProps>(\n     ({ className, onChange, ...props }, ref) => (\n        <RPNInput.default\n           ref={ref}\n           className={ny('flex', className)}\n           flagComponent={FlagComponent}\n           countrySelectComponent={CountrySelect}\n           inputComponent={InputComponent}\n           /**\n            * Handles the onChange event.\n            *\n            * react-phone-number-input might trigger the onChange event as undefined\n            * when a valid phone number is not entered. To prevent this,\n            * the value is coerced to an empty string.\n            *\n            * @param {E164Number | undefined} value - The entered value\n            */\n           onChange={value => onChange?.(value as RPNInput.Value)}\n           {...props}\n        />\n     ),\n  )\nInputPhone.displayName = 'InputPhone'\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n   ({ className, ...props }, ref) => (\n      <Input\n         className={ny('rounded-e-lg rounded-s-none', className)}\n         {...props}\n         ref={ref}\n      />\n   ),\n)\nInputComponent.displayName = 'InputComponent'\n\ninterface CountrySelectOption { label: string, value: RPNInput.Country }\n\ninterface CountrySelectProps {\n   disabled?: boolean\n   value: RPNInput.Country\n   onChange: (value: RPNInput.Country) => void\n   options: CountrySelectOption[]\n}\n\nfunction CountrySelect({\n   disabled,\n   value,\n   onChange,\n   options,\n}: CountrySelectProps) {\n   const handleSelect = React.useCallback(\n      (country: RPNInput.Country) => onChange(country),\n      [onChange],\n   )\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               type=\"button\"\n               variant=\"outline\"\n               className={ny('flex gap-1 rounded-e-none rounded-s-lg px-3')}\n               disabled={disabled}\n            >\n               <FlagComponent country={value} countryName={value} />\n               <CaretSortIcon\n                  className={ny(\n                     '-mr-2 size-4 opacity-50',\n                     disabled ? 'hidden' : 'opacity-100',\n                  )}\n               />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[300px] p-0\">\n            <Command>\n               <CommandList>\n                  <CommandInput placeholder=\"Search country...\" />\n                  <CommandEmpty>No country found.</CommandEmpty>\n                  <CommandGroup>\n                     {options.map(option => (\n                        <CommandItem\n                           className=\"gap-2\"\n                           key={option.value || 'ZZ'}\n                           onSelect={() => handleSelect(option.value)}\n                        >\n                           <FlagComponent\n                              country={option.value}\n                              countryName={option.label}\n                           />\n                           <span className=\"flex-1 text-sm\">{option.label}</span>\n                           {option.value && (\n                              <span className=\"text-foreground/50 text-sm\">\n                                 {`+${RPNInput.getCountryCallingCode(option.value)}`}\n                              </span>\n                           )}\n                           <CheckIcon\n                              className={ny(\n                                 'ml-auto size-4',\n                                 option.value === value ? 'opacity-100' : 'opacity-0',\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n\nfunction FlagComponent({ country, countryName }: RPNInput.FlagProps) {\n   const Flag = flags[country]\n\n   return (\n      <span className=\"bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm\">\n         {Flag && <Flag title={countryName} />}\n      </span>\n   )\n}\nFlagComponent.displayName = 'FlagComponent'\n\nexport { InputPhone }\n",
-      "type": "registry:component",
+      "content": "import { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/miami/ui/command\"\nimport type { InputProps } from \"~/registry/miami/ui/input\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\ntype InputPhoneProps = Omit<\n   React.InputHTMLAttributes<HTMLInputElement>,\n   \"onChange\" | \"value\"\n> &\n   Omit<RPNInput.Props<typeof RPNInput.default>, \"onChange\"> & {\n      onChange?: (value: RPNInput.Value) => void\n   }\n\nconst InputPhone: React.ForwardRefExoticComponent<InputPhoneProps> =\n   React.forwardRef<React.ElementRef<typeof RPNInput.default>, InputPhoneProps>(\n      ({ className, onChange, ...props }, ref) => (\n         <RPNInput.default\n            ref={ref}\n            className={ny(\"flex\", className)}\n            flagComponent={FlagComponent}\n            countrySelectComponent={CountrySelect}\n            inputComponent={InputComponent}\n            /**\n             * Handles the onChange event.\n             *\n             * react-phone-number-input might trigger the onChange event as undefined\n             * when a valid phone number is not entered. To prevent this,\n             * the value is coerced to an empty string.\n             *\n             * @param {E164Number | undefined} value - The entered value\n             */\n            onChange={(value) => onChange?.(value as RPNInput.Value)}\n            {...props}\n         />\n      ),\n   )\nInputPhone.displayName = \"InputPhone\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n   ({ className, ...props }, ref) => (\n      <Input\n         className={ny(\"rounded-e-lg rounded-s-none\", className)}\n         {...props}\n         ref={ref}\n      />\n   ),\n)\nInputComponent.displayName = \"InputComponent\"\n\ninterface CountrySelectOption {\n   label: string\n   value: RPNInput.Country\n}\n\ninterface CountrySelectProps {\n   disabled?: boolean\n   value: RPNInput.Country\n   onChange: (value: RPNInput.Country) => void\n   options: CountrySelectOption[]\n}\n\nfunction CountrySelect({\n   disabled,\n   value,\n   onChange,\n   options,\n}: CountrySelectProps) {\n   const handleSelect = React.useCallback(\n      (country: RPNInput.Country) => onChange(country),\n      [onChange],\n   )\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               type=\"button\"\n               variant=\"outline\"\n               className={ny(\"flex gap-1 rounded-e-none rounded-s-lg px-3\")}\n               disabled={disabled}\n            >\n               <FlagComponent country={value} countryName={value} />\n               <CaretSortIcon\n                  className={ny(\n                     \"-mr-2 size-4 opacity-50\",\n                     disabled ? \"hidden\" : \"opacity-100\",\n                  )}\n               />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[300px] p-0\">\n            <Command>\n               <CommandList>\n                  <CommandInput placeholder=\"Search country...\" />\n                  <CommandEmpty>No country found.</CommandEmpty>\n                  <CommandGroup>\n                     {options.map((option) => (\n                        <CommandItem\n                           className=\"gap-2\"\n                           key={option.value || \"ZZ\"}\n                           onSelect={() => handleSelect(option.value)}\n                        >\n                           <FlagComponent\n                              country={option.value}\n                              countryName={option.label}\n                           />\n                           <span className=\"flex-1 text-sm\">\n                              {option.label}\n                           </span>\n                           {option.value && (\n                              <span className=\"text-foreground/50 text-sm\">\n                                 {`+${RPNInput.getCountryCallingCode(option.value)}`}\n                              </span>\n                           )}\n                           <CheckIcon\n                              className={ny(\n                                 \"ml-auto size-4\",\n                                 option.value === value\n                                    ? \"opacity-100\"\n                                    : \"opacity-0\",\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n\nfunction FlagComponent({ country, countryName }: RPNInput.FlagProps) {\n   const Flag = flags[country]\n\n   return (\n      <span className=\"bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm\">\n         {Flag && <Flag title={countryName} />}\n      </span>\n   )\n}\nFlagComponent.displayName = \"FlagComponent\"\n\nexport { InputPhone }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-with-button.json b/apps/web/public/r/styles/default/input-with-button.json
index c3fc2536..f4619b97 100644
--- a/apps/web/public/r/styles/default/input-with-button.json
+++ b/apps/web/public/r/styles/default/input-with-button.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-with-button",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input",
     "button"
   ],
   "files": [
     {
-      "path": "example/input-with-button.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport { Input } from '~/registry/default/ui/input'\n\nexport default function InputWithButton() {\n   return (\n      <div className=\"flex w-full max-w-sm items-center space-x-2\">\n         <Input type=\"email\" placeholder=\"Email\" />\n         <Button type=\"submit\">Subscribe</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-with-button.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport { Input } from \"~/registry/default/ui/input\"\n\nexport default function InputWithButton() {\n   return (\n      <div className=\"flex w-full max-w-sm items-center space-x-2\">\n         <Input type=\"email\" placeholder=\"Email\" />\n         <Button type=\"submit\">Subscribe</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-with-label.json b/apps/web/public/r/styles/default/input-with-label.json
index e0ae6c52..63d393ab 100644
--- a/apps/web/public/r/styles/default/input-with-label.json
+++ b/apps/web/public/r/styles/default/input-with-label.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-with-label",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input",
     "button",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-with-label.tsx",
-      "content": "import { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\n\nexport default function InputWithLabel() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"email\">Email</Label>\n         <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-with-label.tsx",
+      "content": "import { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport default function InputWithLabel() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"email\">Email</Label>\n         <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input-with-text.json b/apps/web/public/r/styles/default/input-with-text.json
index 335d6662..792729eb 100644
--- a/apps/web/public/r/styles/default/input-with-text.json
+++ b/apps/web/public/r/styles/default/input-with-text.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-with-text",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input",
     "button",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-with-text.tsx",
-      "content": "import { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\n\nexport default function InputWithText() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"email-2\">Email</Label>\n         <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n         <p className=\"text-muted-foreground text-sm\">Enter your email address.</p>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-with-text.tsx",
+      "content": "import { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport default function InputWithText() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"email-2\">Email</Label>\n         <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n         <p className=\"text-muted-foreground text-sm\">\n            Enter your email address.\n         </p>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/input.json b/apps/web/public/r/styles/default/input.json
index 9bfe0d9b..9b792e19 100644
--- a/apps/web/public/r/styles/default/input.json
+++ b/apps/web/public/r/styles/default/input.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/input.tsx",
-      "content": "import * as React from 'react'\n\nimport { ny } from '~/lib/utils'\n\nexport interface InputProps\n   extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n   ({ className, type, ...props }, ref) => {\n      return (\n         <input\n            type={type}\n            className={ny(\n               'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nInput.displayName = 'Input'\n\nexport { Input }\n",
-      "type": "registry:component",
+      "content": "import * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nexport interface InputProps\n   extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n   ({ className, type, ...props }, ref) => {\n      return (\n         <input\n            type={type}\n            className={ny(\n               \"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/interactive-grid-pattern-demo-2.json b/apps/web/public/r/styles/default/interactive-grid-pattern-demo-2.json
new file mode 100644
index 00000000..3377c3aa
--- /dev/null
+++ b/apps/web/public/r/styles/default/interactive-grid-pattern-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "interactive-grid-pattern-demo-2",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/interactive-grid-pattern-demo-2.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\nimport { InteractiveGridPattern } from \"~/registry/miami/ui/interactive-grid-pattern\"\n\nexport default function InteractiveGridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Interactive Grid Pattern\n         </p>\n         <InteractiveGridPattern\n            className={ny(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n            )}\n            width={20}\n            height={20}\n            squares={[80, 80]}\n            squaresClassName=\"hover:fill-blue-500\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/interactive-grid-pattern-demo.json b/apps/web/public/r/styles/default/interactive-grid-pattern-demo.json
new file mode 100644
index 00000000..17827fdb
--- /dev/null
+++ b/apps/web/public/r/styles/default/interactive-grid-pattern-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "interactive-grid-pattern-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/interactive-grid-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\nimport { InteractiveGridPattern } from \"~/registry/default/ui/interactive-grid-pattern\"\n\nexport default function InteractiveGridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Interactive Grid Pattern\n         </p>\n         <InteractiveGridPattern\n            className={ny(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n               \"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/interactive-grid-pattern.json b/apps/web/public/r/styles/default/interactive-grid-pattern.json
new file mode 100644
index 00000000..1d29dff1
--- /dev/null
+++ b/apps/web/public/r/styles/default/interactive-grid-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "interactive-grid-pattern",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/interactive-grid-pattern.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useState } from \"react\"\nimport { ny } from \"~/registry/default/lib/utils\"\n\n/**\n * InteractiveGridPattern is a component that renders a grid pattern with interactive squares.\n *\n * @param width - The width of each square.\n * @param height - The height of each square.\n * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares.\n * @param className - The class name of the grid.\n * @param squaresClassName - The class name of the squares.\n */\ninterface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   squares?: [number, number] // [horizontal, vertical]\n   className?: string\n   squaresClassName?: string\n}\n\n/**\n * The InteractiveGridPattern component.\n *\n * @see InteractiveGridPatternProps for the props interface.\n * @returns A React component.\n */\nexport function InteractiveGridPattern({\n   width = 40,\n   height = 40,\n   squares = [24, 24],\n   className,\n   squaresClassName,\n   ...props\n}: InteractiveGridPatternProps) {\n   const [horizontal, vertical] = squares\n   const [hoveredSquare, setHoveredSquare] = useState<number | null>(null)\n\n   return (\n      <svg\n         width={width * horizontal}\n         height={height * vertical}\n         className={ny(\n            \"absolute inset-0 h-full w-full border border-gray-400/30\",\n            className,\n         )}\n         {...props}\n      >\n         {Array.from({ length: horizontal * vertical }).map((_, index) => {\n            const x = (index % horizontal) * width\n            const y = Math.floor(index / horizontal) * height\n            return (\n               <rect\n                  key={index}\n                  x={x}\n                  y={y}\n                  width={width}\n                  height={height}\n                  className={ny(\n                     \"stroke-gray-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000\",\n                     hoveredSquare === index\n                        ? \"fill-gray-300/30\"\n                        : \"fill-transparent\",\n                     squaresClassName,\n                  )}\n                  onMouseEnter={() => setHoveredSquare(index)}\n                  onMouseLeave={() => setHoveredSquare(null)}\n               />\n            )\n         })}\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/iphone-15-pro-demo-2.json b/apps/web/public/r/styles/default/iphone-15-pro-demo-2.json
index 6fd390c0..acdf3441 100644
--- a/apps/web/public/r/styles/default/iphone-15-pro-demo-2.json
+++ b/apps/web/public/r/styles/default/iphone-15-pro-demo-2.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "iphone-15-pro-demo-2",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/iphone-15-pro-demo-2.tsx",
-      "content": "import Iphone15Pro from '~/registry/default/ui/iphone-15-pro'\n\nexport default function Iphone15ProDemo() {\n   return (\n      <div className=\"relative\">\n         <Iphone15Pro\n            className=\"size-full\"\n            src=\"https://via.placeholder.com/430x880\"\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/iphone-15-pro-demo-2.tsx",
+      "content": "import Iphone15Pro from \"~/registry/default/ui/iphone-15-pro\"\n\nexport default function Iphone15ProDemo() {\n   return (\n      <div className=\"relative\">\n         <Iphone15Pro\n            className=\"size-full\"\n            src=\"https://via.placeholder.com/430x880\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/iphone-15-pro-demo.json b/apps/web/public/r/styles/default/iphone-15-pro-demo.json
index 84fac09f..9d934c2d 100644
--- a/apps/web/public/r/styles/default/iphone-15-pro-demo.json
+++ b/apps/web/public/r/styles/default/iphone-15-pro-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "iphone-15-pro-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/iphone-15-pro-demo.tsx",
-      "content": "import Iphone15Pro from '~/registry/default/ui/iphone-15-pro'\n\nexport default function Iphone15ProDemo() {\n   return (\n      <div className=\"relative\">\n         <Iphone15Pro className=\"size-full\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/iphone-15-pro-demo.tsx",
+      "content": "import Iphone15Pro from \"~/registry/default/ui/iphone-15-pro\"\n\nexport default function Iphone15ProDemo() {\n   return (\n      <div className=\"relative\">\n         <Iphone15Pro className=\"size-full\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/iphone-15-pro.json b/apps/web/public/r/styles/default/iphone-15-pro.json
index 80d2934d..15aca473 100644
--- a/apps/web/public/r/styles/default/iphone-15-pro.json
+++ b/apps/web/public/r/styles/default/iphone-15-pro.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "iphone-15-pro",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/iphone-15-pro.tsx",
-      "content": "import type { SVGProps } from 'react'\n\nexport interface Iphone15ProProps extends SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   src?: string\n}\n\nexport default function Iphone15Pro({\n   width = 433,\n   height = 882,\n   src,\n   ...props\n}: Iphone15ProProps) {\n   return (\n      <svg\n         width={width}\n         height={height}\n         viewBox={`0 0 ${width} ${height}`}\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z\"\n            className=\"fill-white dark:fill-[#262626]\"\n         />\n         <path\n            opacity=\"0.5\"\n            d=\"M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z\"\n            className=\"fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]\"\n         />\n\n         {src && (\n            <image\n               href={src}\n               x=\"21.25\"\n               y=\"19.25\"\n               width=\"389.5\"\n               height=\"843.5\"\n               preserveAspectRatio=\"xMidYMid slice\"\n               clipPath=\"url(#roundedCorners)\"\n            />\n         )}\n         <path\n            d=\"M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z\"\n            className=\"fill-[#F5F5F5] dark:fill-[#262626]\"\n         />\n         <path\n            d=\"M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z\"\n            className=\"fill-[#F5F5F5] dark:fill-[#262626]\"\n         />\n         <path\n            d=\"M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <defs>\n            <clipPath id=\"roundedCorners\">\n               <rect\n                  x=\"21.25\"\n                  y=\"19.25\"\n                  width=\"389.5\"\n                  height=\"843.5\"\n                  rx=\"55.75\"\n                  ry=\"55.75\"\n               />\n            </clipPath>\n         </defs>\n      </svg>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import type { SVGProps } from \"react\"\n\nexport interface Iphone15ProProps extends SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   src?: string\n}\n\nexport default function Iphone15Pro({\n   width = 433,\n   height = 882,\n   src,\n   ...props\n}: Iphone15ProProps) {\n   return (\n      <svg\n         width={width}\n         height={height}\n         viewBox={`0 0 ${width} ${height}`}\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z\"\n            className=\"fill-white dark:fill-[#262626]\"\n         />\n         <path\n            opacity=\"0.5\"\n            d=\"M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z\"\n            className=\"fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]\"\n         />\n\n         {src && (\n            <image\n               href={src}\n               x=\"21.25\"\n               y=\"19.25\"\n               width=\"389.5\"\n               height=\"843.5\"\n               preserveAspectRatio=\"xMidYMid slice\"\n               clipPath=\"url(#roundedCorners)\"\n            />\n         )}\n         <path\n            d=\"M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z\"\n            className=\"fill-[#F5F5F5] dark:fill-[#262626]\"\n         />\n         <path\n            d=\"M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z\"\n            className=\"fill-[#F5F5F5] dark:fill-[#262626]\"\n         />\n         <path\n            d=\"M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <defs>\n            <clipPath id=\"roundedCorners\">\n               <rect\n                  x=\"21.25\"\n                  y=\"19.25\"\n                  width=\"389.5\"\n                  height=\"843.5\"\n                  rx=\"55.75\"\n                  ry=\"55.75\"\n               />\n            </clipPath>\n         </defs>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/label-demo.json b/apps/web/public/r/styles/default/label-demo.json
index 287dfa19..acedd14b 100644
--- a/apps/web/public/r/styles/default/label-demo.json
+++ b/apps/web/public/r/styles/default/label-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "label-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "label"
   ],
   "files": [
     {
-      "path": "example/label-demo.tsx",
-      "content": "import { Checkbox } from '~/registry/default/ui/checkbox'\nimport { Label } from '~/registry/default/ui/label'\n\nexport default function LabelDemo() {\n   return (\n      <div>\n         <div className=\"flex items-center space-x-2\">\n            <Checkbox id=\"terms\" />\n            <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/label-demo.tsx",
+      "content": "import { Checkbox } from \"~/registry/default/ui/checkbox\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport default function LabelDemo() {\n   return (\n      <div>\n         <div className=\"flex items-center space-x-2\">\n            <Checkbox id=\"terms\" />\n            <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/label.json b/apps/web/public/r/styles/default/label.json
index b1058c94..d18e2d9a 100644
--- a/apps/web/public/r/styles/default/label.json
+++ b/apps/web/public/r/styles/default/label.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "label",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-label"
   ],
   "files": [
     {
       "path": "ui/label.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as LabelPrimitive from '@radix-ui/react-label'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst labelVariants = cva(\n   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n)\n\nconst Label = React.forwardRef<\n   React.ElementRef<typeof LabelPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n   VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n   <LabelPrimitive.Root\n      ref={ref}\n      className={ny(labelVariants(), className)}\n      {...props}\n   />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst labelVariants = cva(\n   \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n)\n\nconst Label = React.forwardRef<\n   React.ElementRef<typeof LabelPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n      VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n   <LabelPrimitive.Root\n      ref={ref}\n      className={ny(labelVariants(), className)}\n      {...props}\n   />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/letter-pullup-demo.json b/apps/web/public/r/styles/default/letter-pullup-demo.json
index 1c395a5a..b66c7f61 100644
--- a/apps/web/public/r/styles/default/letter-pullup-demo.json
+++ b/apps/web/public/r/styles/default/letter-pullup-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "letter-pullup-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/letter-pullup-demo.tsx",
-      "content": "import LetterPullup from '~/registry/default/ui/letter-pullup'\n\nexport default async function LetterPullupDemo() {\n   return <LetterPullup words=\"Staggered Letter Pull Up\" delay={0.05} />\n}\n",
-      "type": "registry:component",
+      "path": "examples/letter-pullup-demo.tsx",
+      "content": "import LetterPullup from \"~/registry/default/ui/letter-pullup\"\n\nexport default async function LetterPullupDemo() {\n   return <LetterPullup words=\"Staggered Letter Pull Up\" delay={0.05} />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/letter-pullup.json b/apps/web/public/r/styles/default/letter-pullup.json
index 6a120027..8c08823e 100644
--- a/apps/web/public/r/styles/default/letter-pullup.json
+++ b/apps/web/public/r/styles/default/letter-pullup.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "letter-pullup",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/letter-pullup.tsx",
-      "content": "'use client'\n\nimport { motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface LetterPullupProps {\n   className?: string\n   words: string\n   delay?: number\n}\n\nexport default function LetterPullup({\n   className,\n   words,\n   delay,\n}: LetterPullupProps) {\n   const letters = words.split('')\n\n   const pullupVariant = {\n      initial: { y: 100, opacity: 0 },\n      animate: (i: any) => ({\n         y: 0,\n         opacity: 1,\n         transition: {\n            delay: i * (delay || 0.05), // By default, delay each letter's animation by 0.05 seconds\n         },\n      }),\n   }\n\n   return (\n      <div className=\"flex justify-center\">\n         {letters.map((letter, i) => (\n            <motion.h1\n               key={i}\n               variants={pullupVariant}\n               initial=\"initial\"\n               animate=\"animate\"\n               custom={i}\n               className={ny(\n                  'font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-4xl md:leading-[5rem] dark:text-white',\n                  className,\n               )}\n            >\n               {letter === ' ' ? <span>&nbsp;</span> : letter}\n            </motion.h1>\n         ))}\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface LetterPullupProps {\n   className?: string\n   words: string\n   delay?: number\n}\n\nexport default function LetterPullup({\n   className,\n   words,\n   delay,\n}: LetterPullupProps) {\n   const letters = words.split(\"\")\n\n   const pullupVariant = {\n      initial: { y: 100, opacity: 0 },\n      animate: (i: any) => ({\n         y: 0,\n         opacity: 1,\n         transition: {\n            delay: i * (delay || 0.05), // By default, delay each letter's animation by 0.05 seconds\n         },\n      }),\n   }\n\n   return (\n      <div className=\"flex justify-center\">\n         {letters.map((letter, i) => (\n            <motion.h1\n               key={i}\n               variants={pullupVariant}\n               initial=\"initial\"\n               animate=\"animate\"\n               custom={i}\n               className={ny(\n                  \"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-4xl md:leading-[5rem] dark:text-white\",\n                  className,\n               )}\n            >\n               {letter === \" \" ? <span>&nbsp;</span> : letter}\n            </motion.h1>\n         ))}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/line-shadow-text-demo.json b/apps/web/public/r/styles/default/line-shadow-text-demo.json
new file mode 100644
index 00000000..e79681ce
--- /dev/null
+++ b/apps/web/public/r/styles/default/line-shadow-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "line-shadow-text-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/line-shadow-text-demo.tsx",
+      "content": "import { useTheme } from \"next-themes\"\nimport { LineShadowText } from \"~/registry/default/ui/line-shadow-text\"\n\nexport default function LineShadowTextDemo() {\n   const theme = useTheme()\n   const shadowColor = theme.resolvedTheme === \"dark\" ? \"white\" : \"black\"\n   return (\n      <h1 className=\"text-balance text-5xl font-semibold leading-none tracking-tighter sm:text-6xl md:text-7xl lg:text-8xl\">\n         Ship\n         <LineShadowText className=\"italic\" shadowColor={shadowColor}>\n            Fast\n         </LineShadowText>\n      </h1>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/line-shadow-text.json b/apps/web/public/r/styles/default/line-shadow-text.json
new file mode 100644
index 00000000..d35f43d4
--- /dev/null
+++ b/apps/web/public/r/styles/default/line-shadow-text.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "line-shadow-text",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/line-shadow-text.tsx",
+      "content": "import { type MotionProps, motion } from \"motion/react\"\nimport { ny } from \"~/registry/default/lib/utils\"\n\ninterface LineShadowTextProps\n   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,\n      MotionProps {\n   shadowColor?: string\n   as?: React.ElementType\n}\n\nexport function LineShadowText({\n   children,\n   shadowColor = \"black\",\n   className,\n   as: Component = \"span\",\n   ...props\n}: LineShadowTextProps) {\n   const MotionComponent = motion.create(Component)\n   const content = typeof children === \"string\" ? children : null\n\n   if (!content) {\n      throw new Error(\"LineShadowText only accepts string content\")\n   }\n\n   return (\n      <MotionComponent\n         style={{ \"--shadow-color\": shadowColor } as React.CSSProperties}\n         className={ny(\n            \"relative z-0 inline-flex\",\n            \"after:absolute after:left-[0.04em] after:top-[0.04em] after:content-[attr(data-text)]\",\n            \"after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]\",\n            \"after:-z-10 after:bg-[length:0.06em_0.06em] after:bg-clip-text after:text-transparent\",\n            \"after:animate-line-shadow\",\n            className,\n         )}\n         data-text={content}\n         {...props}\n      >\n         {content}\n      </MotionComponent>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "line-shadow": "line-shadow 15s linear infinite"
+          },
+          "keyframes": {
+            "line-shadow": {
+              "0%": {
+                "background-position": "0 0"
+              },
+              "100%": {
+                "background-position": "100% -100%"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/login-01.json b/apps/web/public/r/styles/default/login-01.json
index 3806ed46..35217eb7 100644
--- a/apps/web/public/r/styles/default/login-01.json
+++ b/apps/web/public/r/styles/default/login-01.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "login-01",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A simple login form.",
   "registryDependencies": [
     "button",
@@ -10,16 +12,20 @@
   ],
   "files": [
     {
-      "path": "block/login-01/page.tsx",
-      "content": "import { LoginForm } from '~/registry/default/block/login-01/components/login-form'\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-screen w-full items-center justify-center px-4\">\n         <LoginForm />\n      </div>\n   )\n}\n",
+      "path": "blocks/login-01/page.tsx",
+      "content": "import { LoginForm } from \"~/registry/default/blocks/login-01/components/login-form\"\n\nexport default function Page() {\n   return (\n      <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n         <div className=\"w-full max-w-sm\">\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
-      "path": "block/login-01/components/login-form.tsx",
-      "content": "import Link from 'next/link'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\n\nexport function LoginForm() {\n   return (\n      <Card className=\"mx-auto max-w-sm\">\n         <CardHeader>\n            <CardTitle className=\"text-2xl\">Login</CardTitle>\n            <CardDescription>\n               Enter your email below to login to your account\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <div className=\"grid gap-4\">\n               <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                     id=\"email\"\n                     type=\"email\"\n                     placeholder=\"m@example.com\"\n                     required\n                  />\n               </div>\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center\">\n                     <Label htmlFor=\"password\">Password</Label>\n                     <Link href=\"#\" className=\"ml-auto inline-block text-sm underline\">\n                        Forgot your password?\n                     </Link>\n                  </div>\n                  <Input id=\"password\" type=\"password\" required />\n               </div>\n               <Button type=\"submit\" className=\"w-full\">\n                  Login\n               </Button>\n               <Button variant=\"outline\" className=\"w-full\">\n                  Login with Google\n               </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n               Don&apos;t have an account?\n               {' '}\n               <Link href=\"#\" className=\"underline\">\n                  Sign up\n               </Link>\n            </div>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "blocks/login-01/components/login-form.tsx",
+      "content": "import { ny } from \"~/registry/default/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n   return (\n      <div className={ny(\"flex flex-col gap-6\", className)} {...props}>\n         <Card>\n            <CardHeader>\n               <CardTitle className=\"text-2xl\">Login</CardTitle>\n               <CardDescription>\n                  Enter your email below to login to your account\n               </CardDescription>\n            </CardHeader>\n            <CardContent>\n               <form>\n                  <div className=\"flex flex-col gap-6\">\n                     <div className=\"grid gap-2\">\n                        <Label htmlFor=\"email\">Email</Label>\n                        <Input\n                           id=\"email\"\n                           type=\"email\"\n                           placeholder=\"m@example.com\"\n                           required\n                        />\n                     </div>\n                     <div className=\"grid gap-2\">\n                        <div className=\"flex items-center\">\n                           <Label htmlFor=\"password\">Password</Label>\n                           <a\n                              href=\"#\"\n                              className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                           >\n                              Forgot your password?\n                           </a>\n                        </div>\n                        <Input id=\"password\" type=\"password\" required />\n                     </div>\n                     <Button type=\"submit\" className=\"w-full\">\n                        Login\n                     </Button>\n                     <Button variant=\"outline\" className=\"w-full\">\n                        Login with Google\n                     </Button>\n                  </div>\n                  <div className=\"mt-4 text-center text-sm\">\n                     Don&apos;t have an account?{\" \"}\n                     <a href=\"#\" className=\"underline underline-offset-4\">\n                        Sign up\n                     </a>\n                  </div>\n               </form>\n            </CardContent>\n         </Card>\n      </div>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "authentication",
+    "login"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/login-02.json b/apps/web/public/r/styles/default/login-02.json
new file mode 100644
index 00000000..ec738a6f
--- /dev/null
+++ b/apps/web/public/r/styles/default/login-02.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-02",
+  "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-02/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"~/registry/default/blocks/login-02/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"grid min-h-svh lg:grid-cols-2\">\n         <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n            <div className=\"flex justify-center gap-2 md:justify-start\">\n               <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n                  <div className=\"flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n                     <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  Acme Inc.\n               </a>\n            </div>\n            <div className=\"flex flex-1 items-center justify-center\">\n               <div className=\"w-full max-w-xs\">\n                  <LoginForm />\n               </div>\n            </div>\n         </div>\n         <div className=\"relative hidden bg-muted lg:block\">\n            <img\n               src=\"/placeholder.svg\"\n               alt=\"Image\"\n               className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-02/components/login-form.tsx",
+      "content": "import { ny } from \"~/registry/default/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"form\">) {\n   return (\n      <form className={ny(\"flex flex-col gap-6\", className)} {...props}>\n         <div className=\"flex flex-col items-center gap-2 text-center\">\n            <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n            <p className=\"text-balance text-sm text-muted-foreground\">\n               Enter your email below to login to your account\n            </p>\n         </div>\n         <div className=\"grid gap-6\">\n            <div className=\"grid gap-2\">\n               <Label htmlFor=\"email\">Email</Label>\n               <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n               />\n            </div>\n            <div className=\"grid gap-2\">\n               <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                     href=\"#\"\n                     className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n                  >\n                     Forgot your password?\n                  </a>\n               </div>\n               <Input id=\"password\" type=\"password\" required />\n            </div>\n            <Button type=\"submit\" className=\"w-full\">\n               Login\n            </Button>\n            <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n               <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                  Or continue with\n               </span>\n            </div>\n            <Button\n               variant=\"outline\"\n               className=\"w-full h-10 flex items-center justify-center gap-2\"\n            >\n               <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  className=\"h-5 w-5\"\n               >\n                  <path\n                     d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                     fill=\"currentColor\"\n                  />\n               </svg>\n               Login with GitHub\n            </Button>\n         </div>\n         <div className=\"text-center text-sm\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n               Sign up\n            </a>\n         </div>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/login-03.json b/apps/web/public/r/styles/default/login-03.json
new file mode 100644
index 00000000..3cb6cb04
--- /dev/null
+++ b/apps/web/public/r/styles/default/login-03.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-03",
+  "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-03/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"~/registry/default/blocks/login-03/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n         <div className=\"flex w-full max-w-sm flex-col gap-6\">\n            <a\n               href=\"#\"\n               className=\"flex items-center gap-2 self-center font-medium\"\n            >\n               <div className=\"flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n               </div>\n               Acme Inc.\n            </a>\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-03/components/login-form.tsx",
+      "content": "import { ny } from \"~/registry/default/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n   return (\n      <div className={ny(\"flex flex-col gap-6\", className)} {...props}>\n         <Card>\n            <CardHeader className=\"text-center\">\n               <CardTitle className=\"text-xl\">Welcome back</CardTitle>\n               <CardDescription>\n                  Login with your Apple or Google account\n               </CardDescription>\n            </CardHeader>\n            <CardContent>\n               <form>\n                  <div className=\"grid gap-6\">\n                     <div className=\"flex flex-col gap-4\">\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center gap-2\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           Login with Apple\n                        </Button>\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center gap-2\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           Login with Google\n                        </Button>\n                     </div>\n                     <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                        <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                           Or continue with\n                        </span>\n                     </div>\n                     <div className=\"grid gap-6\">\n                        <div className=\"grid gap-2\">\n                           <Label htmlFor=\"email\">Email</Label>\n                           <Input\n                              id=\"email\"\n                              type=\"email\"\n                              placeholder=\"m@example.com\"\n                              required\n                           />\n                        </div>\n                        <div className=\"grid gap-2\">\n                           <div className=\"flex items-center\">\n                              <Label htmlFor=\"password\">Password</Label>\n                              <a\n                                 href=\"#\"\n                                 className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n                              >\n                                 Forgot your password?\n                              </a>\n                           </div>\n                           <Input id=\"password\" type=\"password\" required />\n                        </div>\n                        <Button type=\"submit\" className=\"w-full\">\n                           Login\n                        </Button>\n                     </div>\n                     <div className=\"text-center text-sm\">\n                        Don&apos;t have an account?{\" \"}\n                        <a href=\"#\" className=\"underline underline-offset-4\">\n                           Sign up\n                        </a>\n                     </div>\n                  </div>\n               </form>\n            </CardContent>\n         </Card>\n         <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  \">\n            By clicking continue, you agree to our{\" \"}\n            <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/login-04.json b/apps/web/public/r/styles/default/login-04.json
new file mode 100644
index 00000000..d9b9c0ec
--- /dev/null
+++ b/apps/web/public/r/styles/default/login-04.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-04",
+  "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
+  "description": "A login page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-04/page.tsx",
+      "content": "import { LoginForm } from \"~/registry/default/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n         <div className=\"w-full max-w-sm md:max-w-3xl\">\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-04/components/login-form.tsx",
+      "content": "import { ny } from \"~/registry/default/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Card, CardContent } from \"~/registry/default/ui/card\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentProps<\"div\">) {\n   return (\n      <div className={ny(\"flex flex-col gap-6\", className)} {...props}>\n         <Card className=\"overflow-hidden\">\n            <CardContent className=\"grid p-0 md:grid-cols-2\">\n               <form className=\"p-6 md:p-8\">\n                  <div className=\"flex flex-col gap-6\">\n                     <div className=\"flex flex-col items-center text-center\">\n                        <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                        <p className=\"text-balance text-muted-foreground\">\n                           Login to your Acme Inc account\n                        </p>\n                     </div>\n                     <div className=\"grid gap-2\">\n                        <Label htmlFor=\"email\">Email</Label>\n                        <Input\n                           id=\"email\"\n                           type=\"email\"\n                           placeholder=\"m@example.com\"\n                           required\n                        />\n                     </div>\n                     <div className=\"grid gap-2\">\n                        <div className=\"flex items-center\">\n                           <Label htmlFor=\"password\">Password</Label>\n                           <a\n                              href=\"#\"\n                              className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                           >\n                              Forgot your password?\n                           </a>\n                        </div>\n                        <Input id=\"password\" type=\"password\" required />\n                     </div>\n                     <Button type=\"submit\" className=\"w-full\">\n                        Login\n                     </Button>\n                     <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                        <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                           Or continue with\n                        </span>\n                     </div>\n                     <div className=\"grid grid-cols-3 gap-4\">\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           <span className=\"sr-only\">Login with Apple</span>\n                        </Button>\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           <span className=\"sr-only\">Login with Google</span>\n                        </Button>\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           <span className=\"sr-only\">Login with Meta</span>\n                        </Button>\n                     </div>\n                     <div className=\"text-center text-sm\">\n                        Don&apos;t have an account?{\" \"}\n                        <a href=\"#\" className=\"underline underline-offset-4\">\n                           Sign up\n                        </a>\n                     </div>\n                  </div>\n               </form>\n               <div className=\"relative hidden bg-muted md:block\">\n                  <img\n                     src=\"/placeholder.svg\"\n                     alt=\"Image\"\n                     className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n                  />\n               </div>\n            </CardContent>\n         </Card>\n         <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary\">\n            By clicking continue, you agree to our{\" \"}\n            <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/login-05.json b/apps/web/public/r/styles/default/login-05.json
new file mode 100644
index 00000000..e85428f7
--- /dev/null
+++ b/apps/web/public/r/styles/default/login-05.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-05",
+  "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"~/registry/default/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n         <div className=\"w-full max-w-sm\">\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-05/components/login-form.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n   return (\n      <div className={ny(\"flex flex-col gap-6\", className)} {...props}>\n         <form>\n            <div className=\"flex flex-col gap-6\">\n               <div className=\"flex flex-col items-center gap-2\">\n                  <a\n                     href=\"#\"\n                     className=\"flex flex-col items-center gap-2 font-medium\"\n                  >\n                     <div className=\"flex h-8 w-8 items-center justify-center rounded-md\">\n                        <GalleryVerticalEnd className=\"size-6\" />\n                     </div>\n                     <span className=\"sr-only\">Acme Inc.</span>\n                  </a>\n                  <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n                  <div className=\"text-center text-sm\">\n                     Don&apos;t have an account?{\" \"}\n                     <a href=\"#\" className=\"underline underline-offset-4\">\n                        Sign up\n                     </a>\n                  </div>\n               </div>\n               <div className=\"flex flex-col gap-6\">\n                  <div className=\"grid gap-2\">\n                     <Label htmlFor=\"email\">Email</Label>\n                     <Input\n                        id=\"email\"\n                        type=\"email\"\n                        placeholder=\"m@example.com\"\n                        required\n                     />\n                  </div>\n                  <Button type=\"submit\" className=\"w-full\">\n                     Login\n                  </Button>\n               </div>\n               <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                  <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                     Or\n                  </span>\n               </div>\n               <div className=\"grid gap-4 sm:grid-cols-2\">\n                  <Button variant=\"outline\" className=\"w-full\">\n                     <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                     >\n                        <path\n                           d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                           fill=\"currentColor\"\n                        />\n                     </svg>\n                     Continue with Apple\n                  </Button>\n                  <Button variant=\"outline\" className=\"w-full\">\n                     <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                     >\n                        <path\n                           d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                           fill=\"currentColor\"\n                        />\n                     </svg>\n                     Continue with Google\n                  </Button>\n               </div>\n            </div>\n         </form>\n         <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary  \">\n            By clicking continue, you agree to our{\" \"}\n            <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/magic-card-demo.json b/apps/web/public/r/styles/default/magic-card-demo.json
index cca4c48c..50d4cb70 100644
--- a/apps/web/public/r/styles/default/magic-card-demo.json
+++ b/apps/web/public/r/styles/default/magic-card-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "magic-card-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/magic-card-demo.tsx",
-      "content": "import { MagicCard, MagicContainer } from '~/registry/default/ui/magic-card'\n\nexport default function MagicCardDemo() {\n   return (\n      <MagicContainer className=\"flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row\">\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Magic\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Card\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Demo\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n      </MagicContainer>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/magic-card-demo.tsx",
+      "content": "import { MagicCard, MagicContainer } from \"~/registry/default/ui/magic-card\"\n\nexport default function MagicCardDemo() {\n   return (\n      <MagicContainer className=\"flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row\">\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Magic\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Card\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Demo\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n      </MagicContainer>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/magic-card-gradient.json b/apps/web/public/r/styles/default/magic-card-gradient.json
index 3c4c1dbe..b7ef5cfd 100644
--- a/apps/web/public/r/styles/default/magic-card-gradient.json
+++ b/apps/web/public/r/styles/default/magic-card-gradient.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "magic-card-gradient",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/magic-card-gradient.tsx",
-      "content": "import { MagicCard, MagicContainer } from '~/registry/default/ui/magic-card'\n\nexport default function MagicCardGradient() {\n   return (\n      <MagicContainer className=\"flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row\">\n         <MagicCard\n            borderWidth={3}\n            className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\"\n         >\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Magic\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Card\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Demo\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n      </MagicContainer>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/magic-card-gradient.tsx",
+      "content": "import { MagicCard, MagicContainer } from \"~/registry/default/ui/magic-card\"\n\nexport default function MagicCardGradient() {\n   return (\n      <MagicContainer className=\"flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row\">\n         <MagicCard\n            borderWidth={3}\n            className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\"\n         >\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Magic\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Card\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Demo\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n      </MagicContainer>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/magic-card.json b/apps/web/public/r/styles/default/magic-card.json
index 53297eee..f2bc3aa1 100644
--- a/apps/web/public/r/styles/default/magic-card.json
+++ b/apps/web/public/r/styles/default/magic-card.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "magic-card",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/magic-card.tsx",
-      "content": "'use client'\n\nimport type { CSSProperties, ReactElement, ReactNode } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface MousePosition {\n   x: number\n   y: number\n}\n\nfunction useMousePosition(): MousePosition {\n   const [mousePosition, setMousePosition] = useState<MousePosition>({\n      x: 0,\n      y: 0,\n   })\n\n   useEffect(() => {\n      const handleMouseMove = (event: globalThis.MouseEvent) => {\n         setMousePosition({ x: event.clientX, y: event.clientY })\n      }\n\n      window.addEventListener('mousemove', handleMouseMove)\n\n      return () => {\n         window.removeEventListener('mousemove', handleMouseMove)\n      }\n   }, [])\n\n   return mousePosition\n}\n\ninterface MagicContainerProps {\n   children?: ReactNode\n   className?: string\n}\n\nfunction MagicContainer({ children, className }: MagicContainerProps) {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const mousePosition = useMousePosition()\n   const mouse = useRef<{ x: number, y: number }>({ x: 0, y: 0 })\n   const containerSize = useRef<{ w: number, h: number }>({ w: 0, h: 0 })\n   const [boxes, setBoxes] = useState<Array<HTMLElement>>([])\n\n   useEffect(() => {\n      init()\n      containerRef.current\n      && setBoxes(\n         Array.from(containerRef.current.children).map(el => el as HTMLElement),\n      )\n   }, [])\n\n   useEffect(() => {\n      init()\n      window.addEventListener('resize', init)\n\n      return () => {\n         window.removeEventListener('resize', init)\n      }\n   }, [setBoxes])\n\n   useEffect(() => {\n      onMouseMove()\n   }, [mousePosition])\n\n   const init = () => {\n      if (containerRef.current) {\n         containerSize.current.w = containerRef.current.offsetWidth\n         containerSize.current.h = containerRef.current.offsetHeight\n      }\n   }\n\n   const onMouseMove = () => {\n      if (containerRef.current) {\n         const rect = containerRef.current.getBoundingClientRect()\n         const { w, h } = containerSize.current\n         const x = mousePosition.x - rect.left\n         const y = mousePosition.y - rect.top\n         const inside = x < w && x > 0 && y < h && y > 0\n\n         mouse.current.x = x\n         mouse.current.y = y\n         boxes.forEach((box) => {\n            const boxX\n          = -(box.getBoundingClientRect().left - rect.left) + mouse.current.x\n            const boxY\n          = -(box.getBoundingClientRect().top - rect.top) + mouse.current.y\n            box.style.setProperty('--mouse-x', `${boxX}px`)\n            box.style.setProperty('--mouse-y', `${boxY}px`)\n\n            if (inside)\n               box.style.setProperty('--opacity', `1`)\n            else box.style.setProperty('--opacity', `0`)\n         })\n      }\n   }\n\n   return (\n      <div className={ny('size-full', className)} ref={containerRef}>\n         {children}\n      </div>\n   )\n}\n\ninterface MagicCardProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the card\n    */\n   as?: ReactElement\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the card\n    */\n   className?: string\n\n   /**\n    * @default \"\"\n    * @type ReactNode\n    * @description\n    * The children of the card\n    */\n   children?: ReactNode\n\n   /**\n    * @default 600\n    * @type number\n    * @description\n    * The size of the spotlight effect in pixels\n    */\n   size?: number\n\n   /**\n    * @default true\n    * @type boolean\n    * @description\n    * Whether to show the spotlight\n    */\n   spotlight?: boolean\n\n   /**\n    * @default \"rgba(255,255,255,0.03)\"\n    * @type string\n    * @description\n    * The color of the spotlight\n    */\n   spotlightColor?: string\n\n   /**\n    * @default true\n    * @type boolean\n    * @description\n    * Whether to isolate the card which is being hovered\n    */\n   isolated?: boolean\n\n   /**\n    * @default \"rgba(255,255,255,0.03)\"\n    * @type string\n    * @description\n    * The background of the card\n    */\n   background?: string\n\n   [key: string]: any\n}\n\nconst MagicCard: React.FC<MagicCardProps> = ({\n   className,\n   children,\n   size = 600,\n   spotlight = true,\n   borderColor = 'hsl(0 0% 98%)',\n   isolated = true,\n   ...props\n}) => {\n   return (\n      <div\n         style={\n            {\n               '--mask-size': `${size}px`,\n               '--border-color': `${borderColor}`,\n            } as CSSProperties\n         }\n         className={ny(\n            'relative z-0 size-full rounded-2xl p-6',\n            'bg-gray-300 dark:bg-gray-700',\n            'bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--border-color),transparent_100%)]',\n            className,\n         )}\n         {...props}\n      >\n         {children}\n\n         {/* Background */}\n         <div className=\"absolute inset-px -z-20 rounded-2xl bg-white dark:bg-black/95\" />\n      </div>\n   )\n}\n\nexport { MagicCard, MagicContainer }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { CSSProperties, ReactElement, ReactNode } from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface MousePosition {\n   x: number\n   y: number\n}\n\nfunction useMousePosition(): MousePosition {\n   const [mousePosition, setMousePosition] = useState<MousePosition>({\n      x: 0,\n      y: 0,\n   })\n\n   useEffect(() => {\n      const handleMouseMove = (event: globalThis.MouseEvent) => {\n         setMousePosition({ x: event.clientX, y: event.clientY })\n      }\n\n      window.addEventListener(\"mousemove\", handleMouseMove)\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMouseMove)\n      }\n   }, [])\n\n   return mousePosition\n}\n\ninterface MagicContainerProps {\n   children?: ReactNode\n   className?: string\n}\n\nfunction MagicContainer({ children, className }: MagicContainerProps) {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const mousePosition = useMousePosition()\n   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })\n   const containerSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })\n   const [boxes, setBoxes] = useState<Array<HTMLElement>>([])\n\n   useEffect(() => {\n      init()\n      containerRef.current &&\n         setBoxes(\n            Array.from(containerRef.current.children).map(\n               (el) => el as HTMLElement,\n            ),\n         )\n   }, [])\n\n   useEffect(() => {\n      init()\n      window.addEventListener(\"resize\", init)\n\n      return () => {\n         window.removeEventListener(\"resize\", init)\n      }\n   }, [setBoxes])\n\n   useEffect(() => {\n      onMouseMove()\n   }, [mousePosition])\n\n   const init = () => {\n      if (containerRef.current) {\n         containerSize.current.w = containerRef.current.offsetWidth\n         containerSize.current.h = containerRef.current.offsetHeight\n      }\n   }\n\n   const onMouseMove = () => {\n      if (containerRef.current) {\n         const rect = containerRef.current.getBoundingClientRect()\n         const { w, h } = containerSize.current\n         const x = mousePosition.x - rect.left\n         const y = mousePosition.y - rect.top\n         const inside = x < w && x > 0 && y < h && y > 0\n\n         mouse.current.x = x\n         mouse.current.y = y\n         boxes.forEach((box) => {\n            const boxX =\n               -(box.getBoundingClientRect().left - rect.left) + mouse.current.x\n            const boxY =\n               -(box.getBoundingClientRect().top - rect.top) + mouse.current.y\n            box.style.setProperty(\"--mouse-x\", `${boxX}px`)\n            box.style.setProperty(\"--mouse-y\", `${boxY}px`)\n\n            if (inside) box.style.setProperty(\"--opacity\", `1`)\n            else box.style.setProperty(\"--opacity\", `0`)\n         })\n      }\n   }\n\n   return (\n      <div className={ny(\"size-full\", className)} ref={containerRef}>\n         {children}\n      </div>\n   )\n}\n\ninterface MagicCardProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the card\n    */\n   as?: ReactElement\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the card\n    */\n   className?: string\n\n   /**\n    * @default \"\"\n    * @type ReactNode\n    * @description\n    * The children of the card\n    */\n   children?: ReactNode\n\n   /**\n    * @default 600\n    * @type number\n    * @description\n    * The size of the spotlight effect in pixels\n    */\n   size?: number\n\n   /**\n    * @default true\n    * @type boolean\n    * @description\n    * Whether to show the spotlight\n    */\n   spotlight?: boolean\n\n   /**\n    * @default \"rgba(255,255,255,0.03)\"\n    * @type string\n    * @description\n    * The color of the spotlight\n    */\n   spotlightColor?: string\n\n   /**\n    * @default true\n    * @type boolean\n    * @description\n    * Whether to isolate the card which is being hovered\n    */\n   isolated?: boolean\n\n   /**\n    * @default \"rgba(255,255,255,0.03)\"\n    * @type string\n    * @description\n    * The background of the card\n    */\n   background?: string\n\n   [key: string]: any\n}\n\nconst MagicCard: React.FC<MagicCardProps> = ({\n   className,\n   children,\n   size = 600,\n   spotlight = true,\n   borderColor = \"hsl(0 0% 98%)\",\n   isolated = true,\n   ...props\n}) => {\n   return (\n      <div\n         style={\n            {\n               \"--mask-size\": `${size}px`,\n               \"--border-color\": `${borderColor}`,\n            } as CSSProperties\n         }\n         className={ny(\n            \"relative z-0 size-full rounded-2xl p-6\",\n            \"bg-gray-300 dark:bg-gray-700\",\n            \"bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--border-color),transparent_100%)]\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n\n         {/* Background */}\n         <div className=\"absolute inset-px -z-20 rounded-2xl bg-white dark:bg-black/95\" />\n      </div>\n   )\n}\n\nexport { MagicCard, MagicContainer }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/marquee-3d.json b/apps/web/public/r/styles/default/marquee-3d.json
index a9f93392..65c39aac 100644
--- a/apps/web/public/r/styles/default/marquee-3d.json
+++ b/apps/web/public/r/styles/default/marquee-3d.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "marquee-3d",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/marquee-3d.tsx",
-      "content": "import Marquee from '~/registry/default/ui/marquee'\n\nconst logos = [\n   {\n      name: 'Microsoft',\n      img: 'https://picsum.photos/id/1/200/300',\n   },\n   {\n      name: 'Apple',\n      img: 'https://picsum.photos/id/2/200/300',\n   },\n   {\n      name: 'Google',\n      img: 'https://picsum.photos/id/3/200/300',\n   },\n   {\n      name: 'Facebook',\n      img: 'https://picsum.photos/id/4/200/300',\n   },\n   {\n      name: 'LinkedIn',\n      img: 'https://picsum.photos/id/5/200/300',\n   },\n   {\n      name: 'Twitter',\n      img: 'https://picsum.photos/id/6/200/300',\n   },\n]\n\nfunction Marquee3D() {\n   return (\n      <div className=\"bg-background relative flex h-full w-96 flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border px-20 md:shadow-xl\">\n         <div className=\"flex flex-row gap-4 [perspective:300px]\">\n            <Marquee\n               className=\"h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]\"\n               vertical\n               style={{\n                  transform:\n              'translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)',\n               }}\n            >\n               {logos.map((data, idx) => (\n                  <img\n                     key={idx}\n                     src={data.img}\n                     alt={data.name}\n                     className=\"mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300\"\n                  />\n               ))}\n            </Marquee>\n         </div>\n\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default Marquee3D\n",
-      "type": "registry:component",
+      "path": "examples/marquee-3d.tsx",
+      "content": "import Marquee from \"~/registry/default/ui/marquee\"\n\nconst logos = [\n   {\n      name: \"Microsoft\",\n      img: \"https://picsum.photos/id/1/200/300\",\n   },\n   {\n      name: \"Apple\",\n      img: \"https://picsum.photos/id/2/200/300\",\n   },\n   {\n      name: \"Google\",\n      img: \"https://picsum.photos/id/3/200/300\",\n   },\n   {\n      name: \"Facebook\",\n      img: \"https://picsum.photos/id/4/200/300\",\n   },\n   {\n      name: \"LinkedIn\",\n      img: \"https://picsum.photos/id/5/200/300\",\n   },\n   {\n      name: \"Twitter\",\n      img: \"https://picsum.photos/id/6/200/300\",\n   },\n]\n\nfunction Marquee3D() {\n   return (\n      <div className=\"bg-background relative flex h-full w-96 flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border px-20 md:shadow-xl\">\n         <div className=\"flex flex-row gap-4 [perspective:300px]\">\n            <Marquee\n               className=\"h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]\"\n               vertical\n               style={{\n                  transform:\n                     \"translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)\",\n               }}\n            >\n               {logos.map((data, idx) => (\n                  <img\n                     key={idx}\n                     src={data.img}\n                     alt={data.name}\n                     className=\"mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300\"\n                  />\n               ))}\n            </Marquee>\n         </div>\n\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default Marquee3D\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/marquee-demo-vertical.json b/apps/web/public/r/styles/default/marquee-demo-vertical.json
index b113cce9..313f663e 100644
--- a/apps/web/public/r/styles/default/marquee-demo-vertical.json
+++ b/apps/web/public/r/styles/default/marquee-demo-vertical.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "marquee-demo-vertical",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/marquee-demo-vertical.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport Marquee from '~/registry/default/ui/marquee'\n\nconst reviews = [\n   {\n      name: 'Jack',\n      username: '@jack',\n      body: 'I\\'ve never seen anything like this before. It\\'s amazing. I love it.',\n      img: 'https://avatar.vercel.sh/jack',\n   },\n   {\n      name: 'Jill',\n      username: '@jill',\n      body: 'I don\\'t know what to say. I\\'m speechless. This is amazing.',\n      img: 'https://avatar.vercel.sh/jill',\n   },\n   {\n      name: 'John',\n      username: '@john',\n      body: 'I\\'m at a loss for words. This is amazing. I love it.',\n      img: 'https://avatar.vercel.sh/john',\n   },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nfunction ReviewCard({\n   img,\n   name,\n   username,\n   body,\n}: {\n   img: string\n   name: string\n   username: string\n   body: string\n}) {\n   return (\n      <figure\n         className={ny(\n            'relative h-40 w-36 cursor-pointer overflow-hidden rounded-xl border p-4',\n            // light styles\n            'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',\n            // dark styles\n            'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-2\">\n            <img className=\"rounded-full\" width=\"32\" height=\"32\" alt=\"\" src={img} />\n            <div className=\"flex flex-col\">\n               <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {name}\n               </figcaption>\n               <p className=\"text-xs font-medium dark:text-white/40\">{username}</p>\n            </div>\n         </div>\n         <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n      </figure>\n   )\n}\n\nfunction MarqueeDemoVertical() {\n   return (\n      <div className=\"bg-background relative flex h-96 flex-row items-center justify-center overflow-hidden rounded-lg border sm:px-20 md:shadow-xl\">\n         <Marquee pauseOnHover vertical className=\"[--duration:20s]\">\n            {firstRow.map(review => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <Marquee reverse pauseOnHover vertical className=\"[--duration:20s]\">\n            {secondRow.map(review => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeDemoVertical\n",
-      "type": "registry:component",
+      "path": "examples/marquee-demo-vertical.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport Marquee from \"~/registry/default/ui/marquee\"\n\nconst reviews = [\n   {\n      name: \"Jack\",\n      username: \"@jack\",\n      body: \"I've never seen anything like this before. It's amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jack\",\n   },\n   {\n      name: \"Jill\",\n      username: \"@jill\",\n      body: \"I don't know what to say. I'm speechless. This is amazing.\",\n      img: \"https://avatar.vercel.sh/jill\",\n   },\n   {\n      name: \"John\",\n      username: \"@john\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/john\",\n   },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nfunction ReviewCard({\n   img,\n   name,\n   username,\n   body,\n}: {\n   img: string\n   name: string\n   username: string\n   body: string\n}) {\n   return (\n      <figure\n         className={ny(\n            \"relative h-40 w-36 cursor-pointer overflow-hidden rounded-xl border p-4\",\n            // light styles\n            \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n            // dark styles\n            \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-2\">\n            <img\n               className=\"rounded-full\"\n               width=\"32\"\n               height=\"32\"\n               alt=\"\"\n               src={img}\n            />\n            <div className=\"flex flex-col\">\n               <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {name}\n               </figcaption>\n               <p className=\"text-xs font-medium dark:text-white/40\">\n                  {username}\n               </p>\n            </div>\n         </div>\n         <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n      </figure>\n   )\n}\n\nfunction MarqueeDemoVertical() {\n   return (\n      <div className=\"bg-background relative flex h-96 flex-row items-center justify-center overflow-hidden rounded-lg border sm:px-20 md:shadow-xl\">\n         <Marquee pauseOnHover vertical className=\"[--duration:20s]\">\n            {firstRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <Marquee reverse pauseOnHover vertical className=\"[--duration:20s]\">\n            {secondRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeDemoVertical\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/marquee-demo.json b/apps/web/public/r/styles/default/marquee-demo.json
index 38e19c0b..3277aa3c 100644
--- a/apps/web/public/r/styles/default/marquee-demo.json
+++ b/apps/web/public/r/styles/default/marquee-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "marquee-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/marquee-demo.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport Marquee from '~/registry/default/ui/marquee'\n\nconst reviews = [\n   {\n      name: 'Jack',\n      username: '@jack',\n      body: 'I\\'ve never seen anything like this before. It\\'s amazing. I love it.',\n      img: 'https://avatar.vercel.sh/jack',\n   },\n   {\n      name: 'Jill',\n      username: '@jill',\n      body: 'I don\\'t know what to say. I\\'m speechless. This is amazing.',\n      img: 'https://avatar.vercel.sh/jill',\n   },\n   {\n      name: 'John',\n      username: '@john',\n      body: 'I\\'m at a loss for words. This is amazing. I love it.',\n      img: 'https://avatar.vercel.sh/john',\n   },\n   {\n      name: 'Jane',\n      username: '@jane',\n      body: 'I\\'m at a loss for words. This is amazing. I love it.',\n      img: 'https://avatar.vercel.sh/jane',\n   },\n   {\n      name: 'Jenny',\n      username: '@jenny',\n      body: 'I\\'m at a loss for words. This is amazing. I love it.',\n      img: 'https://avatar.vercel.sh/jenny',\n   },\n   {\n      name: 'James',\n      username: '@james',\n      body: 'I\\'m at a loss for words. This is amazing. I love it.',\n      img: 'https://avatar.vercel.sh/james',\n   },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nfunction ReviewCard({\n   img,\n   name,\n   username,\n   body,\n}: {\n   img: string\n   name: string\n   username: string\n   body: string\n}) {\n   return (\n      <figure\n         className={ny(\n            'relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4',\n            // light styles\n            'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',\n            // dark styles\n            'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-2\">\n            <img className=\"rounded-full\" width=\"32\" height=\"32\" alt=\"\" src={img} />\n            <div className=\"flex flex-col\">\n               <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {name}\n               </figcaption>\n               <p className=\"text-xs font-medium dark:text-white/40\">{username}</p>\n            </div>\n         </div>\n         <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n      </figure>\n   )\n}\n\nfunction MarqueeDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full flex-col items-center justify-center overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n         <Marquee pauseOnHover className=\"[--duration:20s]\">\n            {firstRow.map(review => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <Marquee reverse pauseOnHover className=\"[--duration:20s]\">\n            {secondRow.map(review => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeDemo\n",
-      "type": "registry:component",
+      "path": "examples/marquee-demo.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport Marquee from \"~/registry/default/ui/marquee\"\n\nconst reviews = [\n   {\n      name: \"Jack\",\n      username: \"@jack\",\n      body: \"I've never seen anything like this before. It's amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jack\",\n   },\n   {\n      name: \"Jill\",\n      username: \"@jill\",\n      body: \"I don't know what to say. I'm speechless. This is amazing.\",\n      img: \"https://avatar.vercel.sh/jill\",\n   },\n   {\n      name: \"John\",\n      username: \"@john\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/john\",\n   },\n   {\n      name: \"Jane\",\n      username: \"@jane\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jane\",\n   },\n   {\n      name: \"Jenny\",\n      username: \"@jenny\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jenny\",\n   },\n   {\n      name: \"James\",\n      username: \"@james\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/james\",\n   },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nfunction ReviewCard({\n   img,\n   name,\n   username,\n   body,\n}: {\n   img: string\n   name: string\n   username: string\n   body: string\n}) {\n   return (\n      <figure\n         className={ny(\n            \"relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4\",\n            // light styles\n            \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n            // dark styles\n            \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-2\">\n            <img\n               className=\"rounded-full\"\n               width=\"32\"\n               height=\"32\"\n               alt=\"\"\n               src={img}\n            />\n            <div className=\"flex flex-col\">\n               <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {name}\n               </figcaption>\n               <p className=\"text-xs font-medium dark:text-white/40\">\n                  {username}\n               </p>\n            </div>\n         </div>\n         <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n      </figure>\n   )\n}\n\nfunction MarqueeDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full flex-col items-center justify-center overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n         <Marquee pauseOnHover className=\"[--duration:20s]\">\n            {firstRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <Marquee reverse pauseOnHover className=\"[--duration:20s]\">\n            {secondRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/marquee-logos.json b/apps/web/public/r/styles/default/marquee-logos.json
index d2de79cd..e0e38ef2 100644
--- a/apps/web/public/r/styles/default/marquee-logos.json
+++ b/apps/web/public/r/styles/default/marquee-logos.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "marquee-logos",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/marquee-logos.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport Marquee from '~/registry/default/ui/marquee'\n\nconst logos = [\n   {\n      name: 'Microsoft',\n      img: 'https://cdn.simpleicons.org/microsoft/000/fff',\n   },\n   {\n      name: 'Apple',\n      img: 'https://cdn.simpleicons.org/apple/000/fff',\n   },\n   {\n      name: 'Google',\n      img: 'https://cdn.simpleicons.org/google/000/fff',\n   },\n   {\n      name: 'Facebook',\n      img: 'https://cdn.simpleicons.org/facebook/000/fff',\n   },\n   {\n      name: 'LinkedIn',\n      img: 'https://cdn.simpleicons.org/linkedin/000/fff',\n   },\n   {\n      name: 'Twitter',\n      img: 'https://cdn.simpleicons.org/twitter/000/fff',\n   },\n]\n\nfunction Logo({ name, img }: { name: string, img: string }) {\n   return (\n      <div className={ny('size-12 cursor-pointer')}>\n         <img src={img} alt={name} />\n      </div>\n   )\n}\n\nfunction MarqueeLogos() {\n   return (\n      <div className=\"bg-background relative flex size-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n         <Marquee className=\"[--gap:3rem]\">\n            {logos.map((logo, idx) => (\n               <Logo key={idx} {...logo} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeLogos\n",
-      "type": "registry:component",
+      "path": "examples/marquee-logos.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport Marquee from \"~/registry/default/ui/marquee\"\n\nconst logos = [\n   {\n      name: \"Microsoft\",\n      img: \"https://cdn.simpleicons.org/microsoft/000/fff\",\n   },\n   {\n      name: \"Apple\",\n      img: \"https://cdn.simpleicons.org/apple/000/fff\",\n   },\n   {\n      name: \"Google\",\n      img: \"https://cdn.simpleicons.org/google/000/fff\",\n   },\n   {\n      name: \"Facebook\",\n      img: \"https://cdn.simpleicons.org/facebook/000/fff\",\n   },\n   {\n      name: \"LinkedIn\",\n      img: \"https://cdn.simpleicons.org/linkedin/000/fff\",\n   },\n   {\n      name: \"Twitter\",\n      img: \"https://cdn.simpleicons.org/twitter/000/fff\",\n   },\n]\n\nfunction Logo({ name, img }: { name: string; img: string }) {\n   return (\n      <div className={ny(\"size-12 cursor-pointer\")}>\n         <img src={img} alt={name} />\n      </div>\n   )\n}\n\nfunction MarqueeLogos() {\n   return (\n      <div className=\"bg-background relative flex size-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n         <Marquee className=\"[--gap:3rem]\">\n            {logos.map((logo, idx) => (\n               <Logo key={idx} {...logo} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeLogos\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/marquee.json b/apps/web/public/r/styles/default/marquee.json
index 7608b3bd..28e061e7 100644
--- a/apps/web/public/r/styles/default/marquee.json
+++ b/apps/web/public/r/styles/default/marquee.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "marquee",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/marquee.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\ninterface MarqueeProps {\n   className?: string\n   reverse?: boolean\n   pauseOnHover?: boolean\n   children?: React.ReactNode\n   vertical?: boolean\n   repeat?: number\n   [key: string]: any\n}\n\nexport default function Marquee({\n   className,\n   reverse,\n   pauseOnHover = false,\n   children,\n   vertical = false,\n   repeat = 4,\n   ...props\n}: MarqueeProps) {\n   return (\n      <div\n         {...props}\n         className={ny(\n            'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]',\n            {\n               'flex-row': !vertical,\n               'flex-col': vertical,\n            },\n            className,\n         )}\n      >\n         {Array(repeat)\n            .fill(0)\n            .map((_, i) => (\n               <div\n                  key={i}\n                  className={ny('flex shrink-0 justify-around [gap:var(--gap)]', {\n                     'animate-marquee flex-row': !vertical,\n                     'animate-marquee-vertical flex-col': vertical,\n                     'group-hover:[animation-play-state:paused]': pauseOnHover,\n                     '[animation-direction:reverse]': reverse,\n                  })}\n               >\n                  {children}\n               </div>\n            ))}\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/lib/utils\"\n\ninterface MarqueeProps {\n   className?: string\n   reverse?: boolean\n   pauseOnHover?: boolean\n   children?: React.ReactNode\n   vertical?: boolean\n   repeat?: number\n   [key: string]: any\n}\n\nexport default function Marquee({\n   className,\n   reverse,\n   pauseOnHover = false,\n   children,\n   vertical = false,\n   repeat = 4,\n   ...props\n}: MarqueeProps) {\n   return (\n      <div\n         {...props}\n         className={ny(\n            \"group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]\",\n            {\n               \"flex-row\": !vertical,\n               \"flex-col\": vertical,\n            },\n            className,\n         )}\n      >\n         {Array(repeat)\n            .fill(0)\n            .map((_, i) => (\n               <div\n                  key={i}\n                  className={ny(\n                     \"flex shrink-0 justify-around [gap:var(--gap)]\",\n                     {\n                        \"animate-marquee flex-row\": !vertical,\n                        \"animate-marquee-vertical flex-col\": vertical,\n                        \"group-hover:[animation-play-state:paused]\":\n                           pauseOnHover,\n                        \"[animation-direction:reverse]\": reverse,\n                     },\n                  )}\n               >\n                  {children}\n               </div>\n            ))}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/menubar-demo.json b/apps/web/public/r/styles/default/menubar-demo.json
index 04a421cb..914909f2 100644
--- a/apps/web/public/r/styles/default/menubar-demo.json
+++ b/apps/web/public/r/styles/default/menubar-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "menubar-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "menubar"
   ],
   "files": [
     {
-      "path": "example/menubar-demo.tsx",
-      "content": "import {\n   Menubar,\n   MenubarCheckboxItem,\n   MenubarContent,\n   MenubarItem,\n   MenubarMenu,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarSeparator,\n   MenubarShortcut,\n   MenubarSub,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarTrigger,\n} from '~/registry/default/ui/menubar'\n\nexport default function MenubarDemo() {\n   return (\n      <Menubar>\n         <MenubarMenu>\n            <MenubarTrigger>File</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  New Tab\n                  {' '}\n                  <MenubarShortcut>⌘T</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  New Window\n                  {' '}\n                  <MenubarShortcut>⌘N</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled>New Incognito Window</MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Share</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Email link</MenubarItem>\n                     <MenubarItem>Messages</MenubarItem>\n                     <MenubarItem>Notes</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>\n                  Print...\n                  {' '}\n                  <MenubarShortcut>⌘P</MenubarShortcut>\n               </MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Edit</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  Undo\n                  {' '}\n                  <MenubarShortcut>⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  Redo\n                  {' '}\n                  <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Find</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Search the web</MenubarItem>\n                     <MenubarSeparator />\n                     <MenubarItem>Find...</MenubarItem>\n                     <MenubarItem>Find Next</MenubarItem>\n                     <MenubarItem>Find Previous</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>Cut</MenubarItem>\n               <MenubarItem>Copy</MenubarItem>\n               <MenubarItem>Paste</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>View</MenubarTrigger>\n            <MenubarContent>\n               <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n               <MenubarCheckboxItem checked>\n                  Always Show Full URLs\n               </MenubarCheckboxItem>\n               <MenubarSeparator />\n               <MenubarItem inset>\n                  Reload\n                  {' '}\n                  <MenubarShortcut>⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled inset>\n                  Force Reload\n                  {' '}\n                  <MenubarShortcut>⇧⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Hide Sidebar</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Profiles</MenubarTrigger>\n            <MenubarContent>\n               <MenubarRadioGroup value=\"benoit\">\n                  <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n                  <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n                  <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n               </MenubarRadioGroup>\n               <MenubarSeparator />\n               <MenubarItem inset>Edit...</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n      </Menubar>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/menubar-demo.tsx",
+      "content": "import {\n   Menubar,\n   MenubarCheckboxItem,\n   MenubarContent,\n   MenubarItem,\n   MenubarMenu,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarSeparator,\n   MenubarShortcut,\n   MenubarSub,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarTrigger,\n} from \"~/registry/default/ui/menubar\"\n\nexport default function MenubarDemo() {\n   return (\n      <Menubar>\n         <MenubarMenu>\n            <MenubarTrigger>File</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  New Window <MenubarShortcut>⌘N</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled>New Incognito Window</MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Share</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Email link</MenubarItem>\n                     <MenubarItem>Messages</MenubarItem>\n                     <MenubarItem>Notes</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>\n                  Print... <MenubarShortcut>⌘P</MenubarShortcut>\n               </MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Edit</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Find</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Search the web</MenubarItem>\n                     <MenubarSeparator />\n                     <MenubarItem>Find...</MenubarItem>\n                     <MenubarItem>Find Next</MenubarItem>\n                     <MenubarItem>Find Previous</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>Cut</MenubarItem>\n               <MenubarItem>Copy</MenubarItem>\n               <MenubarItem>Paste</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>View</MenubarTrigger>\n            <MenubarContent>\n               <MenubarCheckboxItem>\n                  Always Show Bookmarks Bar\n               </MenubarCheckboxItem>\n               <MenubarCheckboxItem checked>\n                  Always Show Full URLs\n               </MenubarCheckboxItem>\n               <MenubarSeparator />\n               <MenubarItem inset>\n                  Reload <MenubarShortcut>⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled inset>\n                  Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Hide Sidebar</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Profiles</MenubarTrigger>\n            <MenubarContent>\n               <MenubarRadioGroup value=\"benoit\">\n                  <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n                  <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n                  <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n               </MenubarRadioGroup>\n               <MenubarSeparator />\n               <MenubarItem inset>Edit...</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n      </Menubar>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/menubar.json b/apps/web/public/r/styles/default/menubar.json
index b1790bd6..45c0e5c7 100644
--- a/apps/web/public/r/styles/default/menubar.json
+++ b/apps/web/public/r/styles/default/menubar.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "menubar",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-menubar"
   ],
   "files": [
     {
       "path": "ui/menubar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as MenubarPrimitive from '@radix-ui/react-menubar'\nimport { Check, ChevronRight, Circle } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Root\n      ref={ref}\n      className={ny(\n         'bg-background flex h-10 items-center space-x-1 rounded-md border p-1',\n         className,\n      )}\n      {...props}\n   />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Trigger\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none',\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <MenubarPrimitive.SubTrigger\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n   </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.SubContent\n      ref={ref}\n      className={ny(\n         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1',\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n   (\n      { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props },\n      ref,\n   ) => (\n      <MenubarPrimitive.Portal>\n         <MenubarPrimitive.Content\n            ref={ref}\n            align={align}\n            alignOffset={alignOffset}\n            sideOffset={sideOffset}\n            className={ny(\n               'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md',\n               className,\n            )}\n            {...props}\n         />\n      </MenubarPrimitive.Portal>\n   ),\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <MenubarPrimitive.Item\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <MenubarPrimitive.CheckboxItem\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <MenubarPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <MenubarPrimitive.RadioItem\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <MenubarPrimitive.ItemIndicator>\n            <Circle className=\"size-2 fill-current\" />\n         </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <MenubarPrimitive.Label\n      ref={ref}\n      className={ny(\n         'px-2 py-1.5 text-sm font-semibold',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Separator\n      ref={ref}\n      className={ny('bg-muted -mx-1 my-1 h-px', className)}\n      {...props}\n   />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nfunction MenubarShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\n            'text-muted-foreground ml-auto text-xs tracking-widest',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nMenubarShortcut.displayname = 'MenubarShortcut'\n\nexport {\n   Menubar,\n   MenubarMenu,\n   MenubarTrigger,\n   MenubarContent,\n   MenubarItem,\n   MenubarSeparator,\n   MenubarLabel,\n   MenubarCheckboxItem,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarPortal,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarGroup,\n   MenubarSub,\n   MenubarShortcut,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Root\n      ref={ref}\n      className={ny(\n         \"bg-background flex h-10 items-center space-x-1 rounded-md border p-1\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Trigger\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <MenubarPrimitive.SubTrigger\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n   </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.SubContent\n      ref={ref}\n      className={ny(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n   (\n      {\n         className,\n         align = \"start\",\n         alignOffset = -4,\n         sideOffset = 8,\n         ...props\n      },\n      ref,\n   ) => (\n      <MenubarPrimitive.Portal>\n         <MenubarPrimitive.Content\n            ref={ref}\n            align={align}\n            alignOffset={alignOffset}\n            sideOffset={sideOffset}\n            className={ny(\n               \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md\",\n               className,\n            )}\n            {...props}\n         />\n      </MenubarPrimitive.Portal>\n   ),\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <MenubarPrimitive.Item\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <MenubarPrimitive.CheckboxItem\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <MenubarPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <MenubarPrimitive.RadioItem\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <MenubarPrimitive.ItemIndicator>\n            <Circle className=\"size-2 fill-current\" />\n         </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <MenubarPrimitive.Label\n      ref={ref}\n      className={ny(\n         \"px-2 py-1.5 text-sm font-semibold\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Separator\n      ref={ref}\n      className={ny(\"bg-muted -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nfunction MenubarShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\n            \"text-muted-foreground ml-auto text-xs tracking-widest\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n   Menubar,\n   MenubarMenu,\n   MenubarTrigger,\n   MenubarContent,\n   MenubarItem,\n   MenubarSeparator,\n   MenubarLabel,\n   MenubarCheckboxItem,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarPortal,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarGroup,\n   MenubarSub,\n   MenubarShortcut,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/meteors-demo.json b/apps/web/public/r/styles/default/meteors-demo.json
index d0ce02dc..146a0796 100644
--- a/apps/web/public/r/styles/default/meteors-demo.json
+++ b/apps/web/public/r/styles/default/meteors-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "meteors-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/meteors-demo.tsx",
-      "content": "import Meteors from '~/registry/default/ui/meteors'\n\nexport default function MeteorDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <Meteors number={30} />\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Meteors\n         </p>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/meteors-demo.tsx",
+      "content": "import Meteors from \"~/registry/default/ui/meteors\"\n\nexport default function MeteorDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <Meteors number={30} />\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Meteors\n         </p>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/meteors.json b/apps/web/public/r/styles/default/meteors.json
index d0cba27f..098ee2f7 100644
--- a/apps/web/public/r/styles/default/meteors.json
+++ b/apps/web/public/r/styles/default/meteors.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "meteors",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/meteors.tsx",
-      "content": "'use client'\n\nimport clsx from 'clsx'\nimport { useEffect, useState } from 'react'\n\ninterface MeteorsProps {\n   number?: number\n}\nexport function Meteors({ number = 20 }: MeteorsProps) {\n   const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(\n      [],\n   )\n\n   useEffect(() => {\n      const styles = [...new Array(number)].map(() => ({\n         top: -5,\n         left: `${Math.floor(Math.random() * window.innerWidth)}px`,\n         animationDelay: `${Math.random() * 1 + 0.2}s`,\n         animationDuration: `${Math.floor(Math.random() * 8 + 2)}s`,\n      }))\n      setMeteorStyles(styles)\n   }, [number])\n\n   return (\n      <>\n         {[...meteorStyles].map((style, idx) => (\n            // Meteor Head\n            <span\n               key={idx}\n               className={clsx(\n                  'pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]',\n               )}\n               style={style}\n            >\n               {/* Meteor Tail */}\n               <div className=\"pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent\" />\n            </span>\n         ))}\n      </>\n   )\n}\n\nexport default Meteors\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport clsx from \"clsx\"\nimport { useEffect, useState } from \"react\"\n\ninterface MeteorsProps {\n   number?: number\n}\nexport function Meteors({ number = 20 }: MeteorsProps) {\n   const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(\n      [],\n   )\n\n   useEffect(() => {\n      const styles = [...new Array(number)].map(() => ({\n         top: -5,\n         left: `${Math.floor(Math.random() * window.innerWidth)}px`,\n         animationDelay: `${Math.random() * 1 + 0.2}s`,\n         animationDuration: `${Math.floor(Math.random() * 8 + 2)}s`,\n      }))\n      setMeteorStyles(styles)\n   }, [number])\n\n   return (\n      <>\n         {[...meteorStyles].map((style, idx) => (\n            // Meteor Head\n            <span\n               key={idx}\n               className={clsx(\n                  \"pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]\",\n               )}\n               style={style}\n            >\n               {/* Meteor Tail */}\n               <div className=\"pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent\" />\n            </span>\n         ))}\n      </>\n   )\n}\n\nexport default Meteors\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/mode-toggle-group.json b/apps/web/public/r/styles/default/mode-toggle-group.json
index 2e5722cc..bf22df33 100644
--- a/apps/web/public/r/styles/default/mode-toggle-group.json
+++ b/apps/web/public/r/styles/default/mode-toggle-group.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "mode-toggle-group",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/mode-toggle.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Moon, Sun } from 'lucide-react'\nimport { useTheme } from 'next-themes'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\n\nexport default function ModeToggle() {\n   const { setTheme } = useTheme()\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n               <Sun className=\"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n               <Moon className=\"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n               <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem onClick={() => setTheme('light')}>\n               Light\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme('dark')}>\n               Dark\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme('system')}>\n               System\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "path": "examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n   const { setTheme } = useTheme()\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n               <Sun className=\"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n               <Moon className=\"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n               <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n               Light\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n               Dark\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n               System\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/mode-toggle.json b/apps/web/public/r/styles/default/mode-toggle.json
index 88808476..3da5d8e7 100644
--- a/apps/web/public/r/styles/default/mode-toggle.json
+++ b/apps/web/public/r/styles/default/mode-toggle.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "mode-toggle",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/mode-toggle.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Moon, Sun } from 'lucide-react'\nimport { useTheme } from 'next-themes'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\n\nexport default function ModeToggle() {\n   const { setTheme } = useTheme()\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n               <Sun className=\"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n               <Moon className=\"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n               <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem onClick={() => setTheme('light')}>\n               Light\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme('dark')}>\n               Dark\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme('system')}>\n               System\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "path": "examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n   const { setTheme } = useTheme()\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n               <Sun className=\"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n               <Moon className=\"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n               <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n               Light\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n               Dark\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n               System\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/morphing-text-demo.json b/apps/web/public/r/styles/default/morphing-text-demo.json
new file mode 100644
index 00000000..299375dd
--- /dev/null
+++ b/apps/web/public/r/styles/default/morphing-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "morphing-text-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/morphing-text-demo.tsx",
+      "content": "import { MorphingText } from \"~/registry/default/ui/morphing-text\"\n\nconst texts = [\n   \"Hello\",\n   \"Morphing\",\n   \"Text\",\n   \"Animation\",\n   \"React\",\n   \"Component\",\n   \"Smooth\",\n   \"Transition\",\n   \"Engaging\",\n]\n\nexport default function MorphingTextDemo() {\n   return <MorphingText texts={texts} />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/morphing-text.json b/apps/web/public/r/styles/default/morphing-text.json
new file mode 100644
index 00000000..d260320e
--- /dev/null
+++ b/apps/web/public/r/styles/default/morphing-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "morphing-text",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/morphing-text.tsx",
+      "content": "\"use client\"\n\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { ny } from \"~/registry/default/lib/utils\"\n\nconst morphTime = 1.5\nconst cooldownTime = 0.5\n\nconst useMorphingText = (texts: string[]) => {\n   const textIndexRef = useRef(0)\n   const morphRef = useRef(0)\n   const cooldownRef = useRef(0)\n   const timeRef = useRef(new Date())\n\n   const text1Ref = useRef<HTMLSpanElement>(null)\n   const text2Ref = useRef<HTMLSpanElement>(null)\n\n   const setStyles = useCallback(\n      (fraction: number) => {\n         const [current1, current2] = [text1Ref.current, text2Ref.current]\n         if (!current1 || !current2) return\n\n         current2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`\n         current2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`\n\n         const invertedFraction = 1 - fraction\n         current1.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`\n         current1.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`\n\n         current1.textContent = texts[textIndexRef.current % texts.length]\n         current2.textContent = texts[(textIndexRef.current + 1) % texts.length]\n      },\n      [texts],\n   )\n\n   const doMorph = useCallback(() => {\n      morphRef.current -= cooldownRef.current\n      cooldownRef.current = 0\n\n      let fraction = morphRef.current / morphTime\n\n      if (fraction > 1) {\n         cooldownRef.current = cooldownTime\n         fraction = 1\n      }\n\n      setStyles(fraction)\n\n      if (fraction === 1) {\n         textIndexRef.current++\n      }\n   }, [setStyles])\n\n   const doCooldown = useCallback(() => {\n      morphRef.current = 0\n      const [current1, current2] = [text1Ref.current, text2Ref.current]\n      if (current1 && current2) {\n         current2.style.filter = \"none\"\n         current2.style.opacity = \"100%\"\n         current1.style.filter = \"none\"\n         current1.style.opacity = \"0%\"\n      }\n   }, [])\n\n   useEffect(() => {\n      let animationFrameId: number\n\n      const animate = () => {\n         animationFrameId = requestAnimationFrame(animate)\n\n         const newTime = new Date()\n         const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000\n         timeRef.current = newTime\n\n         cooldownRef.current -= dt\n\n         if (cooldownRef.current <= 0) doMorph()\n         else doCooldown()\n      }\n\n      animate()\n      return () => {\n         cancelAnimationFrame(animationFrameId)\n      }\n   }, [doMorph, doCooldown])\n\n   return { text1Ref, text2Ref }\n}\n\ninterface MorphingTextProps {\n   className?: string\n   texts: string[]\n}\n\nconst Texts: React.FC<Pick<MorphingTextProps, \"texts\">> = ({ texts }) => {\n   const { text1Ref, text2Ref } = useMorphingText(texts)\n   return (\n      <>\n         <span\n            className=\"absolute inset-x-0 top-0 m-auto inline-block w-full\"\n            ref={text1Ref}\n         />\n         <span\n            className=\"absolute inset-x-0 top-0 m-auto inline-block w-full\"\n            ref={text2Ref}\n         />\n      </>\n   )\n}\n\nconst SvgFilters: React.FC = () => (\n   <svg\n      id=\"filters\"\n      className=\"fixed h-0 w-0\"\n      preserveAspectRatio=\"xMidYMid slice\"\n   >\n      <defs>\n         <filter id=\"threshold\">\n            <feColorMatrix\n               in=\"SourceGraphic\"\n               type=\"matrix\"\n               values=\"1 0 0 0 0\n                  0 1 0 0 0\n                  0 0 1 0 0\n                  0 0 0 255 -140\"\n            />\n         </filter>\n      </defs>\n   </svg>\n)\n\nexport const MorphingText: React.FC<MorphingTextProps> = ({\n   texts,\n   className,\n}) => (\n   <div\n      className={ny(\n         \"relative mx-auto h-16 w-full max-w-screen-md text-center font-sans text-[40pt] font-bold leading-none [filter:url(#threshold)_blur(0.6px)] md:h-24 lg:text-[6rem]\",\n         className,\n      )}\n   >\n      <Texts texts={texts} />\n      <SvgFilters />\n   </div>\n)\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/multi-select-basic.json b/apps/web/public/r/styles/default/multi-select-basic.json
index 88a8357f..4cceeab4 100644
--- a/apps/web/public/r/styles/default/multi-select-basic.json
+++ b/apps/web/public/r/styles/default/multi-select-basic.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-basic",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-basic.tsx",
-      "content": "'use client'\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from '~/registry/default/ui/multi-select'\n\nexport default function MultiSelectBasicDemo() {\n   return (\n      <MultiSelect>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-basic.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"~/registry/default/ui/multi-select\"\n\nexport default function MultiSelectBasicDemo() {\n   return (\n      <MultiSelect>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/multi-select-controllable-search.json b/apps/web/public/r/styles/default/multi-select-controllable-search.json
index 7313c84f..a740972e 100644
--- a/apps/web/public/r/styles/default/multi-select-controllable-search.json
+++ b/apps/web/public/r/styles/default/multi-select-controllable-search.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-controllable-search",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-controllable-search.tsx",
-      "content": "'use client'\n\nimport { useRef, useState } from 'react'\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from '~/registry/default/ui/multi-select'\n\nconst ALL_ITEMS = [\n   { value: 'react', label: 'React', group: 'React' },\n   { value: 'next', label: 'Next.js', group: 'React' },\n   { value: 'remix', label: 'Remix', group: 'React' },\n   { value: 'vue', label: 'Vue', group: 'Vue' },\n   { value: 'nuxt', label: 'Nuxt.js', group: 'Vue' },\n   { value: 'angular', label: 'Angular', group: 'Others' },\n   { value: 'svelte', label: 'Svelte', group: 'Others' },\n]\n\nfunction group(options: Array<(typeof ALL_ITEMS)[number]>): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find(g => g.heading === item.group)\n      if (group)\n         group.children.push(item)\n      else\n         acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword)\n      return group(ALL_ITEMS)\n   await new Promise(resolve => setTimeout(resolve, 500))\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter(item =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n   return group(filtered)\n}\n\nexport default function MultiSelectControllableSearchDemo() {\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword?: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   return (\n      <MultiSelect onSearch={handleSearch}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch />\n            <MultiSelectList>\n               {loading ? null : renderMultiSelectOptions(options)}\n               <MultiSelectEmpty>\n                  {loading ? 'Loading...' : 'No results found'}\n               </MultiSelectEmpty>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-controllable-search.tsx",
+      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from \"~/registry/default/ui/multi-select\"\n\nconst ALL_ITEMS = [\n   { value: \"react\", label: \"React\", group: \"React\" },\n   { value: \"next\", label: \"Next.js\", group: \"React\" },\n   { value: \"remix\", label: \"Remix\", group: \"React\" },\n   { value: \"vue\", label: \"Vue\", group: \"Vue\" },\n   { value: \"nuxt\", label: \"Nuxt.js\", group: \"Vue\" },\n   { value: \"angular\", label: \"Angular\", group: \"Others\" },\n   { value: \"svelte\", label: \"Svelte\", group: \"Others\" },\n]\n\nfunction group(\n   options: Array<(typeof ALL_ITEMS)[number]>,\n): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find((g) => g.heading === item.group)\n      if (group) group.children.push(item)\n      else acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword) return group(ALL_ITEMS)\n   await new Promise((resolve) => setTimeout(resolve, 500))\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter((item) =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n   return group(filtered)\n}\n\nexport default function MultiSelectControllableSearchDemo() {\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword?: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   return (\n      <MultiSelect onSearch={handleSearch}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch />\n            <MultiSelectList>\n               {loading ? null : renderMultiSelectOptions(options)}\n               <MultiSelectEmpty>\n                  {loading ? \"Loading...\" : \"No results found\"}\n               </MultiSelectEmpty>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/multi-select-filter.json b/apps/web/public/r/styles/default/multi-select-filter.json
index 44a6fc4c..ed3bf0ab 100644
--- a/apps/web/public/r/styles/default/multi-select-filter.json
+++ b/apps/web/public/r/styles/default/multi-select-filter.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-filter",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-filter.tsx",
-      "content": "'use client'\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from '~/registry/default/ui/multi-select'\n\nexport default function MultiSelectFilterDemo() {\n   return (\n      <MultiSelect>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch placeholder=\"Input to search\" />\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n            <MultiSelectEmpty />\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-filter.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"~/registry/default/ui/multi-select\"\n\nexport default function MultiSelectFilterDemo() {\n   return (\n      <MultiSelect>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch placeholder=\"Input to search\" />\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n            <MultiSelectEmpty />\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/multi-select-form.json b/apps/web/public/r/styles/default/multi-select-form.json
index 71b0ab95..fabb9652 100644
--- a/apps/web/public/r/styles/default/multi-select-form.json
+++ b/apps/web/public/r/styles/default/multi-select-form.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-form.tsx",
-      "content": "'use client'\n\nimport { useRef, useState } from 'react'\nimport Link from 'next/link'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from '~/registry/default/ui/multi-select'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst ALL_ITEMS = [\n   { value: 'react', label: 'React', group: 'React' },\n   { value: 'next', label: 'Next.js', group: 'React' },\n   { value: 'remix', label: 'Remix', group: 'React' },\n   { value: 'vue', label: 'Vue', group: 'Vue' },\n   { value: 'nuxt', label: 'Nuxt.js', group: 'Vue' },\n   { value: 'angular', label: 'Angular', group: 'Others' },\n   { value: 'svelte', label: 'Svelte', group: 'Others' },\n]\n\nfunction group(options: Array<(typeof ALL_ITEMS)[number]>): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find(g => g.heading === item.group)\n      if (group)\n         group.children.push(item)\n      else\n         acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword)\n      return group(ALL_ITEMS)\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter(item =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n\n   if (!filtered.length) {\n      return [\n         {\n            label: keyword,\n            value: keyword,\n         },\n      ]\n   }\n\n   return group(filtered)\n}\n\nconst FormSchema = z.object({\n   frameworks: z.array(z.string(), {\n      required_error: 'Please select at least one framework.',\n   }),\n})\n\nexport default function MultiSelectFormDemo() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   const onSubmit = (data: z.infer<typeof FormSchema>) => {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"frameworks\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Frameworks</FormLabel>\n                     <MultiSelect\n                        onValueChange={field.onChange}\n                        defaultValue={field.value}\n                        onSearch={keyword => handleSearch(keyword ?? '')}\n                     >\n                        <FormControl>\n                           <MultiSelectTrigger className=\"w-96\">\n                              <MultiSelectValue placeholder=\"Select frameworks\" />\n                           </MultiSelectTrigger>\n                        </FormControl>\n                        <MultiSelectContent>\n                           <MultiSelectSearch />\n                           <MultiSelectList>\n                              {loading ? null : renderMultiSelectOptions(options)}\n                              <MultiSelectEmpty>\n                                 {loading ? 'Loading...' : 'No results found'}\n                              </MultiSelectEmpty>\n                           </MultiSelectList>\n                        </MultiSelectContent>\n                     </MultiSelect>\n                     <FormDescription>\n                        You can manage frameworks in\n                        {' '}\n                        <Link href=\"/examples/forms\">framework settings</Link>\n                        .\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport Link from \"next/link\"\nimport { useRef, useState } from \"react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from \"~/registry/default/ui/multi-select\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst ALL_ITEMS = [\n   { value: \"react\", label: \"React\", group: \"React\" },\n   { value: \"next\", label: \"Next.js\", group: \"React\" },\n   { value: \"remix\", label: \"Remix\", group: \"React\" },\n   { value: \"vue\", label: \"Vue\", group: \"Vue\" },\n   { value: \"nuxt\", label: \"Nuxt.js\", group: \"Vue\" },\n   { value: \"angular\", label: \"Angular\", group: \"Others\" },\n   { value: \"svelte\", label: \"Svelte\", group: \"Others\" },\n]\n\nfunction group(\n   options: Array<(typeof ALL_ITEMS)[number]>,\n): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find((g) => g.heading === item.group)\n      if (group) group.children.push(item)\n      else acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword) return group(ALL_ITEMS)\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter((item) =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n\n   if (!filtered.length) {\n      return [\n         {\n            label: keyword,\n            value: keyword,\n         },\n      ]\n   }\n\n   return group(filtered)\n}\n\nconst FormSchema = z.object({\n   frameworks: z.array(z.string(), {\n      required_error: \"Please select at least one framework.\",\n   }),\n})\n\nexport default function MultiSelectFormDemo() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   const onSubmit = (data: z.infer<typeof FormSchema>) => {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"frameworks\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Frameworks</FormLabel>\n                     <MultiSelect\n                        onValueChange={field.onChange}\n                        defaultValue={field.value}\n                        onSearch={(keyword) => handleSearch(keyword ?? \"\")}\n                     >\n                        <FormControl>\n                           <MultiSelectTrigger className=\"w-96\">\n                              <MultiSelectValue placeholder=\"Select frameworks\" />\n                           </MultiSelectTrigger>\n                        </FormControl>\n                        <MultiSelectContent>\n                           <MultiSelectSearch />\n                           <MultiSelectList>\n                              {loading\n                                 ? null\n                                 : renderMultiSelectOptions(options)}\n                              <MultiSelectEmpty>\n                                 {loading ? \"Loading...\" : \"No results found\"}\n                              </MultiSelectEmpty>\n                           </MultiSelectList>\n                        </MultiSelectContent>\n                     </MultiSelect>\n                     <FormDescription>\n                        You can manage frameworks in{\" \"}\n                        <Link href=\"/examples/forms\">framework settings</Link>.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/multi-select-input-custom.json b/apps/web/public/r/styles/default/multi-select-input-custom.json
index 70a37877..d005e558 100644
--- a/apps/web/public/r/styles/default/multi-select-input-custom.json
+++ b/apps/web/public/r/styles/default/multi-select-input-custom.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-input-custom",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-input-custom.tsx",
-      "content": "'use client'\n\nimport { useRef, useState } from 'react'\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from '~/registry/default/ui/multi-select'\n\nconst ALL_ITEMS = [\n   { value: 'react', label: 'React', group: 'React' },\n   { value: 'next', label: 'Next.js', group: 'React' },\n   { value: 'remix', label: 'Remix', group: 'React' },\n   { value: 'vue', label: 'Vue', group: 'Vue' },\n   { value: 'nuxt', label: 'Nuxt.js', group: 'Vue' },\n   { value: 'angular', label: 'Angular', group: 'Others' },\n   { value: 'svelte', label: 'Svelte', group: 'Others' },\n]\n\nfunction group(options: Array<(typeof ALL_ITEMS)[number]>): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find(g => g.heading === item.group)\n      if (group)\n         group.children.push(item)\n      else\n         acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword)\n      return group(ALL_ITEMS)\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter(item =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n\n   if (!filtered.length) {\n      return [\n         {\n            label: keyword,\n            value: keyword,\n         },\n      ]\n   }\n\n   return group(filtered)\n}\n\nexport default function MultiSelectInputCustomDemo() {\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   return (\n      <MultiSelect onSearch={keyword => handleSearch(keyword ?? '')}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch placeholder=\"input any...\" />\n            <MultiSelectList>\n               {loading ? null : renderMultiSelectOptions(options)}\n               <MultiSelectEmpty>\n                  {loading ? 'Loading...' : 'No results found'}\n               </MultiSelectEmpty>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-input-custom.tsx",
+      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from \"~/registry/default/ui/multi-select\"\n\nconst ALL_ITEMS = [\n   { value: \"react\", label: \"React\", group: \"React\" },\n   { value: \"next\", label: \"Next.js\", group: \"React\" },\n   { value: \"remix\", label: \"Remix\", group: \"React\" },\n   { value: \"vue\", label: \"Vue\", group: \"Vue\" },\n   { value: \"nuxt\", label: \"Nuxt.js\", group: \"Vue\" },\n   { value: \"angular\", label: \"Angular\", group: \"Others\" },\n   { value: \"svelte\", label: \"Svelte\", group: \"Others\" },\n]\n\nfunction group(\n   options: Array<(typeof ALL_ITEMS)[number]>,\n): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find((g) => g.heading === item.group)\n      if (group) group.children.push(item)\n      else acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword) return group(ALL_ITEMS)\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter((item) =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n\n   if (!filtered.length) {\n      return [\n         {\n            label: keyword,\n            value: keyword,\n         },\n      ]\n   }\n\n   return group(filtered)\n}\n\nexport default function MultiSelectInputCustomDemo() {\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   return (\n      <MultiSelect onSearch={(keyword) => handleSearch(keyword ?? \"\")}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch placeholder=\"input any...\" />\n            <MultiSelectList>\n               {loading ? null : renderMultiSelectOptions(options)}\n               <MultiSelectEmpty>\n                  {loading ? \"Loading...\" : \"No results found\"}\n               </MultiSelectEmpty>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/multi-select-limit-count.json b/apps/web/public/r/styles/default/multi-select-limit-count.json
index ca9d11b8..7459176c 100644
--- a/apps/web/public/r/styles/default/multi-select-limit-count.json
+++ b/apps/web/public/r/styles/default/multi-select-limit-count.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-limit-count",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-limit-count.tsx",
-      "content": "'use client'\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from '~/registry/default/ui/multi-select'\n\nexport default function MultiSelectLimitCountDemo() {\n   return (\n      <MultiSelect defaultValue={['react', 'next', 'remix']} maxCount={3}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-limit-count.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"~/registry/default/ui/multi-select\"\n\nexport default function MultiSelectLimitCountDemo() {\n   return (\n      <MultiSelect defaultValue={[\"react\", \"next\", \"remix\"]} maxCount={3}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/multi-select-limit-display-length.json b/apps/web/public/r/styles/default/multi-select-limit-display-length.json
index 7b29148f..cf9dcba7 100644
--- a/apps/web/public/r/styles/default/multi-select-limit-display-length.json
+++ b/apps/web/public/r/styles/default/multi-select-limit-display-length.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-limit-display-length",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-limit-display-length.tsx",
-      "content": "'use client'\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from '~/registry/default/ui/multi-select'\n\nexport default function MultiSelectLimitDisplayLengthDemo() {\n   return (\n      <MultiSelect defaultValue={['long', 'react', 'angular', 'vue', 'remix']}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue\n               placeholder=\"Select stack\"\n               maxDisplay={3}\n               maxItemLength={5}\n            />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n                  <MultiSelectItem value=\"long\">VeryVeryLongItem</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-limit-display-length.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"~/registry/default/ui/multi-select\"\n\nexport default function MultiSelectLimitDisplayLengthDemo() {\n   return (\n      <MultiSelect defaultValue={[\"long\", \"react\", \"angular\", \"vue\", \"remix\"]}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue\n               placeholder=\"Select stack\"\n               maxDisplay={3}\n               maxItemLength={5}\n            />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n                  <MultiSelectItem value=\"long\">\n                     VeryVeryLongItem\n                  </MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/multi-select.json b/apps/web/public/r/styles/default/multi-select.json
index c115d4f9..509400fe 100644
--- a/apps/web/public/r/styles/default/multi-select.json
+++ b/apps/web/public/r/styles/default/multi-select.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/multi-select.tsx",
-      "content": "'use client'\n\nimport React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport type { Primitive } from '@radix-ui/react-primitive'\nimport { useControllableState } from '@radix-ui/react-use-controllable-state'\nimport { Check, ChevronsUpDown, X } from 'lucide-react'\nimport { createPortal } from 'react-dom'\n\nimport { ny } from '~/lib/utils'\nimport { Badge } from '~/registry/default/ui/badge'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n} from '~/registry/default/ui/command'\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/registry/default/ui/tooltip'\n\nexport interface MultiSelectOptionItem {\n   value: string\n   label?: React.ReactNode\n}\n\ninterface MultiSelectContextValue {\n   value: string[]\n\n   open: boolean\n\n   onSelect: (value: string, item: MultiSelectOptionItem) => void\n\n   onDeselect: (value: string, item: MultiSelectOptionItem) => void\n\n   onSearch?: (keyword?: string | undefined) => void\n\n   filter?: boolean | ((keyword: string, current: string) => boolean)\n\n   disabled?: boolean\n\n   maxCount?: number\n\n   itemCache: Map<string, MultiSelectOptionItem>\n}\n\nconst MultiSelectContext = React.createContext<\n  MultiSelectContextValue | undefined\n>(undefined)\n\nfunction useMultiSelect() {\n   const context = React.useContext(MultiSelectContext)\n\n   if (!context)\n      throw new Error('useMultiSelect must be used within MultiSelectProvider')\n\n   return context\n}\n\ntype MultiSelectProps = React.ComponentPropsWithoutRef<\n  typeof PopoverPrimitive.Root\n> & {\n   value?: string[]\n   onValueChange?: (value: string[], items: MultiSelectOptionItem[]) => void\n   onSelect?: (value: string, item: MultiSelectOptionItem) => void\n   onDeselect?: (value: string, item: MultiSelectOptionItem) => void\n   defaultValue?: string[]\n   onSearch?: (keyword?: string | undefined) => void\n   filter?: boolean | ((keyword: string, current: string) => boolean)\n   disabled?: boolean\n   maxCount?: number\n}\n\nconst MultiSelect: React.FC<MultiSelectProps> = ({\n   value: valueProp,\n   onValueChange: onValueChangeProp,\n   onDeselect: onDeselectProp,\n   onSelect: onSelectProp,\n   defaultValue,\n   open: openProp,\n   onOpenChange,\n   defaultOpen,\n   onSearch,\n   filter,\n   disabled,\n   maxCount,\n   ...popoverProps\n}) => {\n   const itemCache = React.useRef(\n      new Map<string, MultiSelectOptionItem>(),\n   ).current\n\n   const handleValueChange = React.useCallback(\n      (state: string[]) => {\n         if (onValueChangeProp) {\n            const items = state.map(value => itemCache.get(value)!)\n\n            onValueChangeProp(state, items)\n         }\n      },\n      [onValueChangeProp],\n   )\n\n   const [value, setValue] = useControllableState({\n      prop: valueProp,\n      defaultProp: defaultValue,\n      onChange: handleValueChange,\n   })\n\n   const [open, setOpen] = useControllableState({\n      prop: openProp,\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n   })\n\n   const handleSelect = React.useCallback(\n      (value: string, item: MultiSelectOptionItem) => {\n         setValue((prev) => {\n            if (prev?.includes(value))\n               return prev\n\n            onSelectProp?.(value, item)\n\n            return prev ? [...prev, value] : [value]\n         })\n      },\n      [onSelectProp, setValue],\n   )\n\n   const handleDeselect = React.useCallback(\n      (value: string, item: MultiSelectOptionItem) => {\n         setValue((prev) => {\n            if (!prev || !prev.includes(value))\n               return prev\n\n            onDeselectProp?.(value, item)\n\n            return prev.filter(v => v !== value)\n         })\n      },\n      [onDeselectProp, setValue],\n   )\n\n   const contextValue = React.useMemo(() => {\n      return {\n         value: value || [],\n         open: open || false,\n         onSearch,\n         filter,\n         disabled,\n         maxCount,\n         onSelect: handleSelect,\n         onDeselect: handleDeselect,\n         itemCache,\n      }\n   }, [\n      value,\n      open,\n      onSearch,\n      filter,\n      disabled,\n      maxCount,\n      handleSelect,\n      handleDeselect,\n   ])\n\n   return (\n      <MultiSelectContext.Provider value={contextValue}>\n         <PopoverPrimitive.Root\n            {...popoverProps}\n            open={open}\n            onOpenChange={setOpen}\n         />\n      </MultiSelectContext.Provider>\n   )\n}\n\nMultiSelect.displayName = 'MultiSelect'\n\ntype MultiSelectTriggerElement = React.ElementRef<typeof Primitive.div>\n\ninterface MultiSelectTriggerProps\n   extends React.ComponentPropsWithoutRef<typeof Primitive.div> {}\n\nfunction PreventClick(e: React.MouseEvent | React.TouchEvent) {\n   e.preventDefault()\n   e.stopPropagation()\n}\n\nconst MultiSelectTrigger = React.forwardRef<\n   MultiSelectTriggerElement,\n   MultiSelectTriggerProps\n>(({ className, children, ...props }, forwardedRef) => {\n   const { disabled } = useMultiSelect()\n\n   return (\n      <PopoverPrimitive.Trigger ref={forwardedRef as any} asChild>\n         <div\n            aria-disabled={disabled}\n            data-disabled={disabled}\n            {...props}\n            className={ny(\n               'border-input ring-offset-background focus:ring-ring flex size-full min-h-10 items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 [&>span]:line-clamp-1',\n               disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text',\n               className,\n            )}\n            onClick={disabled ? PreventClick : props.onClick}\n            onTouchStart={disabled ? PreventClick : props.onTouchStart}\n         >\n            {children}\n            <ChevronsUpDown aria-hidden className=\"size-4 shrink-0 opacity-50\" />\n         </div>\n      </PopoverPrimitive.Trigger>\n   )\n})\n\nMultiSelectTrigger.displayName = 'MultiSelectTrigger'\n\ninterface MultiSelectValueProps\n   extends React.ComponentPropsWithoutRef<typeof Primitive.div> {\n   placeholder?: string\n   maxDisplay?: number\n   maxItemLength?: number\n}\n\nconst MultiSelectValue = React.forwardRef<\n   React.ElementRef<typeof Primitive.div>,\n   MultiSelectValueProps\n>(\n   (\n      { className, placeholder, maxDisplay, maxItemLength, ...props },\n      forwardRef,\n   ) => {\n      const { value, itemCache, onDeselect } = useMultiSelect()\n      const [firstRendered, setFirstRendered] = React.useState(false)\n\n      const renderRemain\n      = maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0\n      const renderItems = renderRemain ? value.slice(0, maxDisplay) : value\n\n      React.useLayoutEffect(() => {\n         setFirstRendered(true)\n      }, [])\n\n      if (!value.length || !firstRendered) {\n         return (\n            <span className=\"text-muted-foreground pointer-events-none\">\n               {placeholder}\n            </span>\n         )\n      }\n\n      return (\n         <TooltipProvider delayDuration={300}>\n            <div\n               className={ny(\n                  'flex flex-1 flex-wrap items-center gap-1.5 overflow-x-hidden',\n                  className,\n               )}\n               {...props}\n               ref={forwardRef}\n            >\n               {renderItems.map((value) => {\n                  const item = itemCache.get(value)\n\n                  const content = item?.label || value\n\n                  const child\n              = maxItemLength\n              && typeof content === 'string'\n              && content.length > maxItemLength\n                 ? `${content.slice(0, maxItemLength)}...`\n                 : content\n\n                  const el = (\n                     <Badge\n                        variant=\"outline\"\n                        key={value}\n                        className=\"group/multi-select-badge cursor-pointer rounded-full pr-1.5\"\n                        onClick={(e) => {\n                           e.preventDefault()\n                           e.stopPropagation()\n                           onDeselect(value, item!)\n                        }}\n                     >\n                        <span>{child}</span>\n                        <X className=\"text-muted-foreground group-hover/multi-select-badge:text-foreground ml-1 size-3\" />\n                     </Badge>\n                  )\n\n                  if (child !== content) {\n                     return (\n                        <Tooltip key={value}>\n                           <TooltipTrigger className=\"inline-flex\">{el}</TooltipTrigger>\n                           <TooltipContent\n                              side=\"bottom\"\n                              align=\"start\"\n                              className=\"z-[51]\"\n                           >\n                              {content}\n                           </TooltipContent>\n                        </Tooltip>\n                     )\n                  }\n\n                  return el\n               })}\n               {renderRemain\n                  ? (\n                        <span className=\"text-muted-foreground py-.5 text-xs leading-4\">\n                           +\n                           {renderRemain}\n                        </span>\n                     )\n                  : null}\n            </div>\n         </TooltipProvider>\n      )\n   },\n)\n\nconst MultiSelectSearch = React.forwardRef<\n   React.ElementRef<typeof CommandInput>,\n   React.ComponentPropsWithoutRef<typeof CommandInput>\n>((props, ref) => {\n   const { onSearch } = useMultiSelect()\n\n   return <CommandInput ref={ref} {...props} onValueChange={onSearch} />\n})\n\nMultiSelectSearch.displayName = 'MultiSelectSearch'\n\nconst MultiSelectList = React.forwardRef<\n   React.ElementRef<typeof CommandList>,\n   React.ComponentPropsWithoutRef<typeof CommandList>\n>(({ className, ...props }, ref) => {\n   return (\n      <CommandList\n         ref={ref}\n         className={ny('max-h-[unset] px-0 py-1', className)}\n         {...props}\n      />\n   )\n})\n\nMultiSelectList.displayName = 'MultiSelectList'\n\ninterface MultiSelectContentProps\n   extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {}\n\nconst MultiSelectContent = React.forwardRef<\n   React.ElementRef<typeof PopoverPrimitive.Content>,\n   MultiSelectContentProps\n>(({ className, children, ...props }, ref) => {\n   const context = useMultiSelect()\n\n   const fragmentRef = React.useRef<DocumentFragment>()\n\n   if (!fragmentRef.current && typeof window !== 'undefined')\n      fragmentRef.current = document.createDocumentFragment()\n\n   if (!context.open) {\n      return fragmentRef.current\n         ? createPortal(<Command>{children}</Command>, fragmentRef.current)\n         : null\n   }\n\n   return (\n      <PopoverPrimitive.Portal forceMount>\n         <PopoverPrimitive.Content\n            ref={ref}\n            align=\"start\"\n            sideOffset={4}\n            collisionPadding={10}\n            className={ny(\n               'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-full rounded-md border p-0 shadow-md outline-none',\n            )}\n            style={\n               {\n                  '--radix-select-content-transform-origin':\n              'var(--radix-popper-transform-origin)',\n                  '--radix-select-content-available-width':\n              'var(--radix-popper-available-width)',\n                  '--radix-select-content-available-height':\n              'var(--radix-popper-available-height)',\n                  '--radix-select-trigger-width': 'var(--radix-popper-anchor-width)',\n                  '--radix-select-trigger-height':\n              'var(--radix-popper-anchor-height)',\n               } as any\n            }\n            {...props}\n         >\n            <Command\n               className={ny(\n                  'max-h-96 w-full min-w-[var(--radix-select-trigger-width)] px-1',\n                  className,\n               )}\n               shouldFilter={!context.onSearch}\n            >\n               {children}\n            </Command>\n         </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n   )\n})\n\ntype MultiSelectItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> &\n   Partial<MultiSelectOptionItem> & {\n      onSelect?: (value: string, item: MultiSelectOptionItem) => void\n      onDeselect?: (value: string, item: MultiSelectOptionItem) => void\n   }\n\nconst MultiSelectItem = React.forwardRef<\n   React.ElementRef<typeof CommandItem>,\n   MultiSelectItemProps\n>(\n   (\n      {\n         value,\n         onSelect: onSelectProp,\n         onDeselect: onDeselectProp,\n         children,\n         label,\n         disabled: disabledProp,\n         className,\n         ...props\n      },\n      forwardedRef,\n   ) => {\n      const {\n         value: contextValue,\n         maxCount,\n         onSelect,\n         onDeselect,\n         itemCache,\n      } = useMultiSelect()\n\n      const item = React.useMemo(() => {\n         return value\n            ? {\n                  value,\n                  label:\n              label || (typeof children === 'string' ? children : undefined),\n               }\n            : undefined\n      }, [value, label, children])\n\n      const selected = Boolean(value && contextValue.includes(value))\n\n      React.useEffect(() => {\n         if (value)\n            itemCache.set(value, item!)\n      }, [selected, value, item])\n\n      const disabled = Boolean(\n         disabledProp || (!selected && maxCount && contextValue.length >= maxCount),\n      )\n\n      const handleClick = () => {\n         if (selected) {\n            onDeselectProp?.(value!, item!)\n            onDeselect(value!, item!)\n         }\n         else {\n            itemCache.set(value!, item!)\n            onSelectProp?.(value!, item!)\n            onSelect(value!, item!)\n         }\n      }\n\n      return (\n         <CommandItem\n            {...props}\n            value={value}\n            className={ny(\n               disabled && 'text-muted-foreground cursor-not-allowed',\n               className,\n            )}\n            disabled={disabled}\n            onSelect={!disabled && value ? handleClick : undefined}\n            ref={forwardedRef}\n         >\n            <span className=\"mr-2 truncate\">\n               {children || label || value}\n            </span>\n            {selected ? <Check className=\"ml-auto size-4 shrink-0\" /> : null}\n         </CommandItem>\n      )\n   },\n)\n\nconst MultiSelectGroup = React.forwardRef<\n   React.ElementRef<typeof CommandGroup>,\n   React.ComponentPropsWithoutRef<typeof CommandGroup>\n>((props, forwardRef) => {\n   return <CommandGroup {...props} ref={forwardRef} />\n})\n\nMultiSelectGroup.displayName = 'MultiSelectGroup'\n\nconst MultiSelectSeparator = React.forwardRef<\n   React.ElementRef<typeof CommandSeparator>,\n   React.ComponentPropsWithoutRef<typeof CommandSeparator>\n>((props, forwardRef) => {\n   return <CommandSeparator {...props} ref={forwardRef} />\n})\n\nMultiSelectSeparator.displayName = 'MultiSelectSeparator'\n\nconst MultiSelectEmpty = React.forwardRef<\n   React.ElementRef<typeof CommandEmpty>,\n   React.ComponentPropsWithoutRef<typeof CommandEmpty>\n>(({ children = 'No Content', ...props }, forwardRef) => {\n   return (\n      <CommandEmpty {...props} ref={forwardRef}>\n         {children}\n      </CommandEmpty>\n   )\n})\n\nMultiSelectEmpty.displayName = 'MultiSelectEmpty'\n\nexport interface MultiSelectOptionSeparator {\n   type: 'separator'\n}\n\nexport interface MultiSelectOptionGroup {\n   heading?: React.ReactNode\n   value?: string\n   children: MultiSelectOption[]\n}\n\nexport type MultiSelectOption =\n   | Pick<\n      MultiSelectItemProps,\n      'value' | 'label' | 'disabled' | 'onSelect' | 'onDeselect'\n   >\n   | MultiSelectOptionSeparator\n   | MultiSelectOptionGroup\n\nfunction renderMultiSelectOptions(list: MultiSelectOption[]) {\n   return list.map((option, index) => {\n      if ('type' in option) {\n         if (option.type === 'separator')\n            return <MultiSelectSeparator key={index} />\n\n         return null\n      }\n\n      if ('children' in option) {\n         return (\n            <MultiSelectGroup\n               key={option.value || index}\n               value={option.value}\n               heading={option.heading}\n            >\n               {renderMultiSelectOptions(option.children)}\n            </MultiSelectGroup>\n         )\n      }\n\n      return (\n         <MultiSelectItem key={option.value} {...option}>\n            {option.label}\n         </MultiSelectItem>\n      )\n   })\n}\n\nexport {\n   MultiSelect,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   MultiSelectSearch,\n   MultiSelectContent,\n   MultiSelectList,\n   MultiSelectItem,\n   MultiSelectGroup,\n   MultiSelectSeparator,\n   MultiSelectEmpty,\n   renderMultiSelectOptions,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport type { Primitive } from \"@radix-ui/react-primitive\"\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\"\nimport { Check, ChevronsUpDown, X } from \"lucide-react\"\nimport React from \"react\"\nimport { createPortal } from \"react-dom\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Badge } from \"~/registry/default/ui/badge\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n} from \"~/registry/default/ui/command\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/default/ui/tooltip\"\n\nexport interface MultiSelectOptionItem {\n   value: string\n   label?: React.ReactNode\n}\n\ninterface MultiSelectContextValue {\n   value: string[]\n\n   open: boolean\n\n   onSelect: (value: string, item: MultiSelectOptionItem) => void\n\n   onDeselect: (value: string, item: MultiSelectOptionItem) => void\n\n   onSearch?: (keyword?: string | undefined) => void\n\n   filter?: boolean | ((keyword: string, current: string) => boolean)\n\n   disabled?: boolean\n\n   maxCount?: number\n\n   itemCache: Map<string, MultiSelectOptionItem>\n}\n\nconst MultiSelectContext = React.createContext<\n   MultiSelectContextValue | undefined\n>(undefined)\n\nfunction useMultiSelect() {\n   const context = React.useContext(MultiSelectContext)\n\n   if (!context)\n      throw new Error(\"useMultiSelect must be used within MultiSelectProvider\")\n\n   return context\n}\n\ntype MultiSelectProps = React.ComponentPropsWithoutRef<\n   typeof PopoverPrimitive.Root\n> & {\n   value?: string[]\n   onValueChange?: (value: string[], items: MultiSelectOptionItem[]) => void\n   onSelect?: (value: string, item: MultiSelectOptionItem) => void\n   onDeselect?: (value: string, item: MultiSelectOptionItem) => void\n   defaultValue?: string[]\n   onSearch?: (keyword?: string | undefined) => void\n   filter?: boolean | ((keyword: string, current: string) => boolean)\n   disabled?: boolean\n   maxCount?: number\n}\n\nconst MultiSelect: React.FC<MultiSelectProps> = ({\n   value: valueProp,\n   onValueChange: onValueChangeProp,\n   onDeselect: onDeselectProp,\n   onSelect: onSelectProp,\n   defaultValue,\n   open: openProp,\n   onOpenChange,\n   defaultOpen,\n   onSearch,\n   filter,\n   disabled,\n   maxCount,\n   ...popoverProps\n}) => {\n   const itemCache = React.useRef(\n      new Map<string, MultiSelectOptionItem>(),\n   ).current\n\n   const handleValueChange = React.useCallback(\n      (state: string[]) => {\n         if (onValueChangeProp) {\n            const items = state.map((value) => itemCache.get(value)!)\n\n            onValueChangeProp(state, items)\n         }\n      },\n      [onValueChangeProp, itemCache],\n   )\n\n   const [value, setValue] = useControllableState({\n      prop: valueProp,\n      defaultProp: defaultValue,\n      onChange: handleValueChange,\n   })\n\n   const [open, setOpen] = useControllableState({\n      prop: openProp,\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n   })\n\n   const handleSelect = React.useCallback(\n      (value: string, item: MultiSelectOptionItem) => {\n         setValue((prev) => {\n            if (prev?.includes(value)) return prev\n\n            onSelectProp?.(value, item)\n\n            return prev ? [...prev, value] : [value]\n         })\n      },\n      [onSelectProp, setValue],\n   )\n\n   const handleDeselect = React.useCallback(\n      (value: string, item: MultiSelectOptionItem) => {\n         setValue((prev) => {\n            if (!prev || !prev.includes(value)) return prev\n\n            onDeselectProp?.(value, item)\n\n            return prev.filter((v) => v !== value)\n         })\n      },\n      [onDeselectProp, setValue],\n   )\n\n   const contextValue = React.useMemo(() => {\n      return {\n         value: value || [],\n         open: open || false,\n         onSearch,\n         filter,\n         disabled,\n         maxCount,\n         onSelect: handleSelect,\n         onDeselect: handleDeselect,\n         itemCache,\n      }\n   }, [\n      value,\n      open,\n      onSearch,\n      filter,\n      disabled,\n      maxCount,\n      handleSelect,\n      handleDeselect,\n      itemCache,\n   ])\n\n   return (\n      <MultiSelectContext.Provider value={contextValue}>\n         <PopoverPrimitive.Root\n            {...popoverProps}\n            open={open}\n            onOpenChange={setOpen}\n         />\n      </MultiSelectContext.Provider>\n   )\n}\n\nMultiSelect.displayName = \"MultiSelect\"\n\ntype MultiSelectTriggerElement = React.ElementRef<typeof Primitive.div>\n\ninterface MultiSelectTriggerProps\n   extends React.ComponentPropsWithoutRef<typeof Primitive.div> {}\n\nfunction PreventClick(e: React.MouseEvent | React.TouchEvent) {\n   e.preventDefault()\n   e.stopPropagation()\n}\n\nconst MultiSelectTrigger = React.forwardRef<\n   MultiSelectTriggerElement,\n   MultiSelectTriggerProps\n>(({ className, children, ...props }, forwardedRef) => {\n   const { disabled } = useMultiSelect()\n\n   return (\n      <PopoverPrimitive.Trigger ref={forwardedRef as any} asChild>\n         <div\n            aria-disabled={disabled}\n            data-disabled={disabled}\n            {...props}\n            className={ny(\n               \"border-input ring-offset-background focus:ring-ring flex size-full min-h-10 items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 [&>span]:line-clamp-1\",\n               disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-text\",\n               className,\n            )}\n            onClick={disabled ? PreventClick : props.onClick}\n            onTouchStart={disabled ? PreventClick : props.onTouchStart}\n         >\n            {children}\n            <ChevronsUpDown\n               aria-hidden\n               className=\"size-4 shrink-0 opacity-50\"\n            />\n         </div>\n      </PopoverPrimitive.Trigger>\n   )\n})\n\nMultiSelectTrigger.displayName = \"MultiSelectTrigger\"\n\ninterface MultiSelectValueProps\n   extends React.ComponentPropsWithoutRef<typeof Primitive.div> {\n   placeholder?: string\n   maxDisplay?: number\n   maxItemLength?: number\n}\n\nconst MultiSelectValue = React.forwardRef<\n   React.ElementRef<typeof Primitive.div>,\n   MultiSelectValueProps\n>(\n   (\n      { className, placeholder, maxDisplay, maxItemLength, ...props },\n      forwardRef,\n   ) => {\n      const { value, itemCache, onDeselect } = useMultiSelect()\n      const [firstRendered, setFirstRendered] = React.useState(false)\n\n      const renderRemain =\n         maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0\n      const renderItems = renderRemain ? value.slice(0, maxDisplay) : value\n\n      React.useLayoutEffect(() => {\n         setFirstRendered(true)\n      }, [])\n\n      if (!value.length || !firstRendered) {\n         return (\n            <span className=\"text-muted-foreground pointer-events-none\">\n               {placeholder}\n            </span>\n         )\n      }\n\n      return (\n         <TooltipProvider delayDuration={300}>\n            <div\n               className={ny(\n                  \"flex flex-1 flex-wrap items-center gap-1.5 overflow-x-hidden\",\n                  className,\n               )}\n               {...props}\n               ref={forwardRef}\n            >\n               {renderItems.map((value) => {\n                  const item = itemCache.get(value)\n\n                  const content = item?.label || value\n\n                  const child =\n                     maxItemLength &&\n                     typeof content === \"string\" &&\n                     content.length > maxItemLength\n                        ? `${content.slice(0, maxItemLength)}...`\n                        : content\n\n                  const el = (\n                     <Badge\n                        variant=\"outline\"\n                        key={value}\n                        className=\"group/multi-select-badge cursor-pointer rounded-full pr-1.5\"\n                        onClick={(e) => {\n                           e.preventDefault()\n                           e.stopPropagation()\n                           onDeselect(value, item!)\n                        }}\n                     >\n                        <span>{child}</span>\n                        <X className=\"text-muted-foreground group-hover/multi-select-badge:text-foreground ml-1 size-3\" />\n                     </Badge>\n                  )\n\n                  if (child !== content) {\n                     return (\n                        <Tooltip key={value}>\n                           <TooltipTrigger className=\"inline-flex\">\n                              {el}\n                           </TooltipTrigger>\n                           <TooltipContent\n                              side=\"bottom\"\n                              align=\"start\"\n                              className=\"z-[51]\"\n                           >\n                              {content}\n                           </TooltipContent>\n                        </Tooltip>\n                     )\n                  }\n\n                  return el\n               })}\n               {renderRemain ? (\n                  <span className=\"text-muted-foreground py-.5 text-xs leading-4\">\n                     +{renderRemain}\n                  </span>\n               ) : null}\n            </div>\n         </TooltipProvider>\n      )\n   },\n)\n\nMultiSelectValue.displayName = \"MultiSelectValue\"\n\nconst MultiSelectSearch = React.forwardRef<\n   React.ElementRef<typeof CommandInput>,\n   React.ComponentPropsWithoutRef<typeof CommandInput>\n>((props, ref) => {\n   const { onSearch } = useMultiSelect()\n\n   return <CommandInput ref={ref} {...props} onValueChange={onSearch} />\n})\n\nMultiSelectSearch.displayName = \"MultiSelectSearch\"\n\nconst MultiSelectList = React.forwardRef<\n   React.ElementRef<typeof CommandList>,\n   React.ComponentPropsWithoutRef<typeof CommandList>\n>(({ className, ...props }, ref) => {\n   return (\n      <CommandList\n         ref={ref}\n         className={ny(\"max-h-[unset] px-0 py-1\", className)}\n         {...props}\n      />\n   )\n})\n\nMultiSelectList.displayName = \"MultiSelectList\"\n\ninterface MultiSelectContentProps\n   extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {}\n\nconst MultiSelectContent = React.forwardRef<\n   React.ElementRef<typeof PopoverPrimitive.Content>,\n   MultiSelectContentProps\n>(({ className, children, ...props }, ref) => {\n   const context = useMultiSelect()\n\n   const fragmentRef = React.useRef<DocumentFragment>()\n\n   if (!fragmentRef.current && typeof window !== \"undefined\")\n      fragmentRef.current = document.createDocumentFragment()\n\n   if (!context.open) {\n      return fragmentRef.current\n         ? createPortal(<Command>{children}</Command>, fragmentRef.current)\n         : null\n   }\n\n   return (\n      <PopoverPrimitive.Portal forceMount>\n         <PopoverPrimitive.Content\n            ref={ref}\n            align=\"start\"\n            sideOffset={4}\n            collisionPadding={10}\n            className={ny(\n               \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-full rounded-md border p-0 shadow-md outline-none\",\n            )}\n            style={\n               {\n                  \"--radix-select-content-transform-origin\":\n                     \"var(--radix-popper-transform-origin)\",\n                  \"--radix-select-content-available-width\":\n                     \"var(--radix-popper-available-width)\",\n                  \"--radix-select-content-available-height\":\n                     \"var(--radix-popper-available-height)\",\n                  \"--radix-select-trigger-width\":\n                     \"var(--radix-popper-anchor-width)\",\n                  \"--radix-select-trigger-height\":\n                     \"var(--radix-popper-anchor-height)\",\n               } as any\n            }\n            {...props}\n         >\n            <Command\n               className={ny(\n                  \"max-h-96 w-full min-w-[var(--radix-select-trigger-width)] px-1\",\n                  className,\n               )}\n               shouldFilter={!context.onSearch}\n            >\n               {children}\n            </Command>\n         </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n   )\n})\n\nMultiSelectContent.displayName = \"MultiSelectContent\"\n\ntype MultiSelectItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> &\n   Partial<MultiSelectOptionItem> & {\n      onSelect?: (value: string, item: MultiSelectOptionItem) => void\n      onDeselect?: (value: string, item: MultiSelectOptionItem) => void\n   }\n\nconst MultiSelectItem = React.forwardRef<\n   React.ElementRef<typeof CommandItem>,\n   MultiSelectItemProps\n>(\n   (\n      {\n         value,\n         onSelect: onSelectProp,\n         onDeselect: onDeselectProp,\n         children,\n         label,\n         disabled: disabledProp,\n         className,\n         ...props\n      },\n      forwardedRef,\n   ) => {\n      const {\n         value: contextValue,\n         maxCount,\n         onSelect,\n         onDeselect,\n         itemCache,\n      } = useMultiSelect()\n\n      const item = React.useMemo(() => {\n         return value\n            ? {\n                 value,\n                 label:\n                    label ||\n                    (typeof children === \"string\" ? children : undefined),\n              }\n            : undefined\n      }, [value, label, children])\n\n      const selected = Boolean(value && contextValue.includes(value))\n\n      React.useEffect(() => {\n         if (value) itemCache.set(value, item!)\n      }, [selected, value, item, itemCache])\n\n      const disabled = Boolean(\n         disabledProp ||\n            (!selected && maxCount && contextValue.length >= maxCount),\n      )\n\n      const handleClick = () => {\n         if (selected) {\n            onDeselectProp?.(value!, item!)\n            onDeselect(value!, item!)\n         } else {\n            itemCache.set(value!, item!)\n            onSelectProp?.(value!, item!)\n            onSelect(value!, item!)\n         }\n      }\n\n      return (\n         <CommandItem\n            {...props}\n            value={value}\n            className={ny(\n               disabled && \"text-muted-foreground cursor-not-allowed\",\n               className,\n            )}\n            disabled={disabled}\n            onSelect={!disabled && value ? handleClick : undefined}\n            ref={forwardedRef}\n         >\n            <span className=\"mr-2 truncate\">{children || label || value}</span>\n            {selected ? <Check className=\"ml-auto size-4 shrink-0\" /> : null}\n         </CommandItem>\n      )\n   },\n)\n\nMultiSelectItem.displayName = \"MultiSelectItem\"\n\nconst MultiSelectGroup = React.forwardRef<\n   React.ElementRef<typeof CommandGroup>,\n   React.ComponentPropsWithoutRef<typeof CommandGroup>\n>((props, forwardRef) => {\n   return <CommandGroup {...props} ref={forwardRef} />\n})\n\nMultiSelectGroup.displayName = \"MultiSelectGroup\"\n\nconst MultiSelectSeparator = React.forwardRef<\n   React.ElementRef<typeof CommandSeparator>,\n   React.ComponentPropsWithoutRef<typeof CommandSeparator>\n>((props, forwardRef) => {\n   return <CommandSeparator {...props} ref={forwardRef} />\n})\n\nMultiSelectSeparator.displayName = \"MultiSelectSeparator\"\n\nconst MultiSelectEmpty = React.forwardRef<\n   React.ElementRef<typeof CommandEmpty>,\n   React.ComponentPropsWithoutRef<typeof CommandEmpty>\n>(({ children = \"No Content\", ...props }, forwardRef) => {\n   return (\n      <CommandEmpty {...props} ref={forwardRef}>\n         {children}\n      </CommandEmpty>\n   )\n})\n\nMultiSelectEmpty.displayName = \"MultiSelectEmpty\"\n\nexport interface MultiSelectOptionSeparator {\n   type: \"separator\"\n}\n\nexport interface MultiSelectOptionGroup {\n   heading?: React.ReactNode\n   value?: string\n   children: MultiSelectOption[]\n}\n\nexport type MultiSelectOption =\n   | Pick<\n        MultiSelectItemProps,\n        \"value\" | \"label\" | \"disabled\" | \"onSelect\" | \"onDeselect\"\n     >\n   | MultiSelectOptionSeparator\n   | MultiSelectOptionGroup\n\nfunction renderMultiSelectOptions(list: MultiSelectOption[]) {\n   return list.map((option, index) => {\n      if (\"type\" in option) {\n         if (option.type === \"separator\")\n            return <MultiSelectSeparator key={index} />\n\n         return null\n      }\n\n      if (\"children\" in option) {\n         return (\n            <MultiSelectGroup\n               key={option.value || index}\n               value={option.value}\n               heading={option.heading}\n            >\n               {renderMultiSelectOptions(option.children)}\n            </MultiSelectGroup>\n         )\n      }\n\n      return (\n         <MultiSelectItem key={option.value} {...option}>\n            {option.label}\n         </MultiSelectItem>\n      )\n   })\n}\n\nexport {\n   MultiSelect,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   MultiSelectSearch,\n   MultiSelectContent,\n   MultiSelectList,\n   MultiSelectItem,\n   MultiSelectGroup,\n   MultiSelectSeparator,\n   MultiSelectEmpty,\n   renderMultiSelectOptions,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/navigation-menu-demo.json b/apps/web/public/r/styles/default/navigation-menu-demo.json
index 527b84f4..bf9372b6 100644
--- a/apps/web/public/r/styles/default/navigation-menu-demo.json
+++ b/apps/web/public/r/styles/default/navigation-menu-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "navigation-menu-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "navigation-menu"
   ],
   "files": [
     {
-      "path": "example/navigation-menu-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport Link from 'next/link'\n\nimport { ny } from '~/lib/utils'\nimport { Icons } from '~/components/icons'\nimport {\n   NavigationMenu,\n   NavigationMenuContent,\n   NavigationMenuItem,\n   NavigationMenuLink,\n   NavigationMenuList,\n   NavigationMenuTrigger,\n   navigationMenuTriggerStyle,\n} from '~/registry/default/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n   {\n      title: 'Alert Dialog',\n      href: '/docs/primitives/alert-dialog',\n      description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n   },\n   {\n      title: 'Hover Card',\n      href: '/docs/primitives/hover-card',\n      description:\n      'For sighted users to preview content available behind a link.',\n   },\n   {\n      title: 'Progress',\n      href: '/docs/primitives/progress',\n      description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n   },\n   {\n      title: 'Scroll-area',\n      href: '/docs/primitives/scroll-area',\n      description: 'Visually or semantically separates content.',\n   },\n   {\n      title: 'Tabs',\n      href: '/docs/primitives/tabs',\n      description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n   },\n   {\n      title: 'Tooltip',\n      href: '/docs/primitives/tooltip',\n      description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n   },\n]\n\nexport default function NavigationMenuDemo() {\n   return (\n      <NavigationMenu>\n         <NavigationMenuList>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                     <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                           <a\n                              className=\"from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md\"\n                              href=\"/\"\n                           >\n                              <Icons.logo className=\"size-6\" />\n                              <div className=\"mb-2 mt-4 text-lg font-medium\">nyxb/ui</div>\n                              <p className=\"text-muted-foreground text-sm leading-tight\">\n                                 Beautifully designed components that you can copy and\n                                 paste into your apps. Accessible. Customizable. Open\n                                 Source.\n                              </p>\n                           </a>\n                        </NavigationMenuLink>\n                     </li>\n                     <ListItem href=\"/docs\" title=\"Introduction\">\n                        Re-usable components built using Radix UI and Tailwind CSS.\n                     </ListItem>\n                     <ListItem href=\"/docs/installation\" title=\"Installation\">\n                        How to install dependencies and structure your app.\n                     </ListItem>\n                     <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                        Styles for headings, paragraphs, lists...etc\n                     </ListItem>\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                     {components.map(component => (\n                        <ListItem\n                           key={component.title}\n                           title={component.title}\n                           href={component.href}\n                        >\n                           {component.description}\n                        </ListItem>\n                     ))}\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <Link href=\"/docs\" legacyBehavior passHref>\n                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n                     Documentation\n                  </NavigationMenuLink>\n               </Link>\n            </NavigationMenuItem>\n         </NavigationMenuList>\n      </NavigationMenu>\n   )\n}\n\nconst ListItem = React.forwardRef<\n   React.ElementRef<'a'>,\n   React.ComponentPropsWithoutRef<'a'>\n>(({ className, title, children, ...props }, ref) => {\n   return (\n      <li>\n         <NavigationMenuLink asChild>\n            <a\n               ref={ref}\n               className={ny(\n                  'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors',\n                  className,\n               )}\n               {...props}\n            >\n               <div className=\"text-sm font-medium leading-none\">{title}</div>\n               <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n                  {children}\n               </p>\n            </a>\n         </NavigationMenuLink>\n      </li>\n   )\n})\nListItem.displayName = 'ListItem'\n",
-      "type": "registry:component",
+      "path": "examples/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport * as React from \"react\"\n\nimport { Icons } from \"~/components/icons\"\nimport { ny } from \"~/lib/utils\"\nimport {\n   NavigationMenu,\n   NavigationMenuContent,\n   NavigationMenuItem,\n   NavigationMenuLink,\n   NavigationMenuList,\n   NavigationMenuTrigger,\n   navigationMenuTriggerStyle,\n} from \"~/registry/default/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n   {\n      title: \"Alert Dialog\",\n      href: \"/docs/primitives/alert-dialog\",\n      description:\n         \"A modal dialog that interrupts the user with important content and expects a response.\",\n   },\n   {\n      title: \"Hover Card\",\n      href: \"/docs/primitives/hover-card\",\n      description:\n         \"For sighted users to preview content available behind a link.\",\n   },\n   {\n      title: \"Progress\",\n      href: \"/docs/primitives/progress\",\n      description:\n         \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n   },\n   {\n      title: \"Scroll-area\",\n      href: \"/docs/primitives/scroll-area\",\n      description: \"Visually or semantically separates content.\",\n   },\n   {\n      title: \"Tabs\",\n      href: \"/docs/primitives/tabs\",\n      description:\n         \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n   },\n   {\n      title: \"Tooltip\",\n      href: \"/docs/primitives/tooltip\",\n      description:\n         \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n   },\n]\n\nexport default function NavigationMenuDemo() {\n   return (\n      <NavigationMenu>\n         <NavigationMenuList>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                     <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                           <a\n                              className=\"from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md\"\n                              href=\"/\"\n                           >\n                              <Icons.logo className=\"size-6\" />\n                              <div className=\"mb-2 mt-4 text-lg font-medium\">\n                                 nyxb/ui\n                              </div>\n                              <p className=\"text-muted-foreground text-sm leading-tight\">\n                                 Beautifully designed components that you can\n                                 copy and paste into your apps. Accessible.\n                                 Customizable. Open Source.\n                              </p>\n                           </a>\n                        </NavigationMenuLink>\n                     </li>\n                     <ListItem href=\"/docs\" title=\"Introduction\">\n                        Re-usable components built using Radix UI and Tailwind\n                        CSS.\n                     </ListItem>\n                     <ListItem href=\"/docs/installation\" title=\"Installation\">\n                        How to install dependencies and structure your app.\n                     </ListItem>\n                     <ListItem\n                        href=\"/docs/primitives/typography\"\n                        title=\"Typography\"\n                     >\n                        Styles for headings, paragraphs, lists...etc\n                     </ListItem>\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                     {components.map((component) => (\n                        <ListItem\n                           key={component.title}\n                           title={component.title}\n                           href={component.href}\n                        >\n                           {component.description}\n                        </ListItem>\n                     ))}\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <Link href=\"/docs\" legacyBehavior passHref>\n                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n                     Documentation\n                  </NavigationMenuLink>\n               </Link>\n            </NavigationMenuItem>\n         </NavigationMenuList>\n      </NavigationMenu>\n   )\n}\n\nconst ListItem = React.forwardRef<\n   React.ElementRef<\"a\">,\n   React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n   return (\n      <li>\n         <NavigationMenuLink asChild>\n            <a\n               ref={ref}\n               className={ny(\n                  \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors\",\n                  className,\n               )}\n               {...props}\n            >\n               <div className=\"text-sm font-medium leading-none\">{title}</div>\n               <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n                  {children}\n               </p>\n            </a>\n         </NavigationMenuLink>\n      </li>\n   )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/navigation-menu.json b/apps/web/public/r/styles/default/navigation-menu.json
index 187fde2e..4112a0a8 100644
--- a/apps/web/public/r/styles/default/navigation-menu.json
+++ b/apps/web/public/r/styles/default/navigation-menu.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "navigation-menu",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-navigation-menu"
   ],
   "files": [
     {
       "path": "ui/navigation-menu.tsx",
-      "content": "import * as React from 'react'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport { cva } from 'class-variance-authority'\nimport { ChevronDown } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst NavigationMenu = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <NavigationMenuPrimitive.Root\n      ref={ref}\n      className={ny(\n         'relative z-10 flex max-w-max flex-1 items-center justify-center',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <NavigationMenuViewport />\n   </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.List\n      ref={ref}\n      className={ny(\n         'group flex flex-1 list-none items-center justify-center space-x-1',\n         className,\n      )}\n      {...props}\n   />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n   'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <NavigationMenuPrimitive.Trigger\n      ref={ref}\n      className={ny(navigationMenuTriggerStyle(), 'group', className)}\n      {...props}\n   >\n      {children}\n      {' '}\n      <ChevronDown\n         className=\"relative top-px ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180\"\n         aria-hidden=\"true\"\n      />\n   </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.Content\n      ref={ref}\n      className={ny(\n         'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto ',\n         className,\n      )}\n      {...props}\n   />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n   <div className={ny('absolute left-0 top-full flex justify-center')}>\n      <NavigationMenuPrimitive.Viewport\n         className={ny(\n            'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]',\n            className,\n         )}\n         ref={ref}\n         {...props}\n      />\n   </div>\n))\nNavigationMenuViewport.displayName\n  = NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.Indicator\n      ref={ref}\n      className={ny(\n         'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',\n         className,\n      )}\n      {...props}\n   >\n      <div className=\"bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md\" />\n   </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName\n  = NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n   navigationMenuTriggerStyle,\n   NavigationMenu,\n   NavigationMenuList,\n   NavigationMenuItem,\n   NavigationMenuContent,\n   NavigationMenuTrigger,\n   NavigationMenuLink,\n   NavigationMenuIndicator,\n   NavigationMenuViewport,\n}\n",
-      "type": "registry:component",
+      "content": "import * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <NavigationMenuPrimitive.Root\n      ref={ref}\n      className={ny(\n         \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <NavigationMenuViewport />\n   </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.List\n      ref={ref}\n      className={ny(\n         \"group flex flex-1 list-none items-center justify-center space-x-1\",\n         className,\n      )}\n      {...props}\n   />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n   \"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50\",\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <NavigationMenuPrimitive.Trigger\n      ref={ref}\n      className={ny(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n   >\n      {children}{\" \"}\n      <ChevronDown\n         className=\"relative top-px ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180\"\n         aria-hidden=\"true\"\n      />\n   </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.Content\n      ref={ref}\n      className={ny(\n         \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto \",\n         className,\n      )}\n      {...props}\n   />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n   <div className={ny(\"absolute left-0 top-full flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n         className={ny(\n            \"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]\",\n            className,\n         )}\n         ref={ref}\n         {...props}\n      />\n   </div>\n))\nNavigationMenuViewport.displayName =\n   NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.Indicator\n      ref={ref}\n      className={ny(\n         \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n         className,\n      )}\n      {...props}\n   >\n      <div className=\"bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md\" />\n   </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n   NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n   navigationMenuTriggerStyle,\n   NavigationMenu,\n   NavigationMenuList,\n   NavigationMenuItem,\n   NavigationMenuContent,\n   NavigationMenuTrigger,\n   NavigationMenuLink,\n   NavigationMenuIndicator,\n   NavigationMenuViewport,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/neon-gradient-card-demo.json b/apps/web/public/r/styles/default/neon-gradient-card-demo.json
index 8eb7fa60..4118f5bc 100644
--- a/apps/web/public/r/styles/default/neon-gradient-card-demo.json
+++ b/apps/web/public/r/styles/default/neon-gradient-card-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "neon-gradient-card-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/neon-gradient-card-demo.tsx",
-      "content": "import { NeonGradientCard } from '~/registry/default/ui/neon-gradient-card'\n\nexport default function NeonGradientCardDemo() {\n   return (\n      <NeonGradientCard className=\"max-w-sm items-center justify-center text-center\">\n         <span className=\"pointer-events-none z-10 h-full whitespace-pre-wrap bg-gradient-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-6xl font-bold leading-none tracking-tighter text-transparent dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]\">\n            Neon Gradient Card\n         </span>\n      </NeonGradientCard>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/neon-gradient-card-demo.tsx",
+      "content": "import { NeonGradientCard } from \"~/registry/default/ui/neon-gradient-card\"\n\nexport default function NeonGradientCardDemo() {\n   return (\n      <NeonGradientCard className=\"max-w-sm items-center justify-center text-center\">\n         <span className=\"pointer-events-none z-10 h-full whitespace-pre-wrap bg-gradient-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-6xl font-bold leading-none tracking-tighter text-transparent dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]\">\n            Neon Gradient Card\n         </span>\n      </NeonGradientCard>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/neon-gradient-card.json b/apps/web/public/r/styles/default/neon-gradient-card.json
index 077e7799..def6fc91 100644
--- a/apps/web/public/r/styles/default/neon-gradient-card.json
+++ b/apps/web/public/r/styles/default/neon-gradient-card.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "neon-gradient-card",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/neon-gradient-card.tsx",
-      "content": "'use client'\n\nimport type {\n   CSSProperties,\n   ReactElement,\n   ReactNode,\n} from 'react'\nimport {\n   useEffect,\n   useRef,\n   useState,\n} from 'react'\n\nimport { ny } from '~/lib/utils'\n\ninterface NeonColorsProps {\n   firstColor: string\n   secondColor: string\n}\n\ninterface NeonGradientCardProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the card\n    */\n   as?: ReactElement\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the card\n    */\n   className?: string\n\n   /**\n    * @default \"\"\n    * @type ReactNode\n    * @description\n    * The children of the card\n    */\n   children?: ReactNode\n\n   /**\n    * @default 5\n    * @type number\n    * @description\n    * The size of the border in pixels\n    */\n   borderSize?: number\n\n   /**\n    * @default 20\n    * @type number\n    * @description\n    * The size of the radius in pixels\n    */\n   borderRadius?: number\n\n   /**\n    * @default \"{ firstColor: '#ff00aa', secondColor: '#00FFF1' }\"\n    * @type string\n    * @description\n    * The colors of the neon gradient\n    */\n   neonColors?: NeonColorsProps\n\n   [key: string]: any\n}\n\nconst NeonGradientCard: React.FC<NeonGradientCardProps> = ({\n   className,\n   children,\n   borderSize = 2,\n   borderRadius = 20,\n   neonColors = {\n      firstColor: '#ff00aa',\n      secondColor: '#00FFF1',\n   },\n   ...props\n}) => {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n   useEffect(() => {\n      const updateDimensions = () => {\n         if (containerRef.current) {\n            const { offsetWidth, offsetHeight } = containerRef.current\n            setDimensions({ width: offsetWidth, height: offsetHeight })\n         }\n      }\n\n      updateDimensions()\n      window.addEventListener('resize', updateDimensions)\n\n      return () => {\n         window.removeEventListener('resize', updateDimensions)\n      }\n   }, [])\n\n   useEffect(() => {\n      if (containerRef.current) {\n         const { offsetWidth, offsetHeight } = containerRef.current\n         setDimensions({ width: offsetWidth, height: offsetHeight })\n      }\n   }, [children])\n\n   return (\n      <div\n         ref={containerRef}\n         style={\n            {\n               '--border-size': `${borderSize}px`,\n               '--border-radius': `${borderRadius}px`,\n               '--neon-first-color': neonColors.firstColor,\n               '--neon-second-color': neonColors.secondColor,\n               '--card-width': `${dimensions.width}px`,\n               '--card-height': `${dimensions.height}px`,\n               '--card-content-radius': `${borderRadius - borderSize}px`,\n               '--pseudo-element-background-image': `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,\n               '--pseudo-element-width': `${dimensions.width + borderSize * 2}px`,\n               '--pseudo-element-height': `${dimensions.height + borderSize * 2}px`,\n               '--after-blur': `${dimensions.width / 3}px`,\n            } as CSSProperties\n         }\n         className={ny(\n            'relative z-10 size-full rounded-[var(--border-radius)]',\n            className,\n         )}\n         {...props}\n      >\n         <div\n            className={ny(\n               'relative size-full min-h-[inherit] rounded-[var(--card-content-radius)] bg-gray-100 p-6',\n               'before:absolute before:-left-[var(--border-size)] before:-top-[var(--border-size)] before:-z-10 before:block',\n               'before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-[\\'\\']',\n               'before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-[length:100%_200%]',\n               'before:animate-background-position-spin',\n               'after:absolute after:-left-[var(--border-size)] after:-top-[var(--border-size)] after:-z-10 after:block',\n               'after:h-[var(--pseudo-element-height)] after:w-[var(--pseudo-element-width)] after:rounded-[var(--border-radius)] after:blur-[var(--after-blur)] after:content-[\\'\\']',\n               'after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80',\n               'after:animate-background-position-spin',\n               'dark:bg-neutral-900',\n            )}\n         >\n            {children}\n         </div>\n      </div>\n   )\n}\n\nexport { NeonGradientCard }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { CSSProperties, ReactElement, ReactNode } from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ninterface NeonColorsProps {\n   firstColor: string\n   secondColor: string\n}\n\ninterface NeonGradientCardProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the card\n    */\n   as?: ReactElement\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the card\n    */\n   className?: string\n\n   /**\n    * @default \"\"\n    * @type ReactNode\n    * @description\n    * The children of the card\n    */\n   children?: ReactNode\n\n   /**\n    * @default 5\n    * @type number\n    * @description\n    * The size of the border in pixels\n    */\n   borderSize?: number\n\n   /**\n    * @default 20\n    * @type number\n    * @description\n    * The size of the radius in pixels\n    */\n   borderRadius?: number\n\n   /**\n    * @default \"{ firstColor: '#ff00aa', secondColor: '#00FFF1' }\"\n    * @type string\n    * @description\n    * The colors of the neon gradient\n    */\n   neonColors?: NeonColorsProps\n\n   [key: string]: any\n}\n\nconst NeonGradientCard: React.FC<NeonGradientCardProps> = ({\n   className,\n   children,\n   borderSize = 2,\n   borderRadius = 20,\n   neonColors = {\n      firstColor: \"#ff00aa\",\n      secondColor: \"#00FFF1\",\n   },\n   ...props\n}) => {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n   useEffect(() => {\n      const updateDimensions = () => {\n         if (containerRef.current) {\n            const { offsetWidth, offsetHeight } = containerRef.current\n            setDimensions({ width: offsetWidth, height: offsetHeight })\n         }\n      }\n\n      updateDimensions()\n      window.addEventListener(\"resize\", updateDimensions)\n\n      return () => {\n         window.removeEventListener(\"resize\", updateDimensions)\n      }\n   }, [])\n\n   useEffect(() => {\n      if (containerRef.current) {\n         const { offsetWidth, offsetHeight } = containerRef.current\n         setDimensions({ width: offsetWidth, height: offsetHeight })\n      }\n   }, [children])\n\n   return (\n      <div\n         ref={containerRef}\n         style={\n            {\n               \"--border-size\": `${borderSize}px`,\n               \"--border-radius\": `${borderRadius}px`,\n               \"--neon-first-color\": neonColors.firstColor,\n               \"--neon-second-color\": neonColors.secondColor,\n               \"--card-width\": `${dimensions.width}px`,\n               \"--card-height\": `${dimensions.height}px`,\n               \"--card-content-radius\": `${borderRadius - borderSize}px`,\n               \"--pseudo-element-background-image\": `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,\n               \"--pseudo-element-width\": `${dimensions.width + borderSize * 2}px`,\n               \"--pseudo-element-height\": `${dimensions.height + borderSize * 2}px`,\n               \"--after-blur\": `${dimensions.width / 3}px`,\n            } as CSSProperties\n         }\n         className={ny(\n            \"relative z-10 size-full rounded-[var(--border-radius)]\",\n            className,\n         )}\n         {...props}\n      >\n         <div\n            className={ny(\n               \"relative size-full min-h-[inherit] rounded-[var(--card-content-radius)] bg-gray-100 p-6\",\n               \"before:absolute before:-left-[var(--border-size)] before:-top-[var(--border-size)] before:-z-10 before:block\",\n               \"before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-['']\",\n               \"before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-[length:100%_200%]\",\n               \"before:animate-background-position-spin\",\n               \"after:absolute after:-left-[var(--border-size)] after:-top-[var(--border-size)] after:-z-10 after:block\",\n               \"after:h-[var(--pseudo-element-height)] after:w-[var(--pseudo-element-width)] after:rounded-[var(--border-radius)] after:blur-[var(--after-blur)] after:content-['']\",\n               \"after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80\",\n               \"after:animate-background-position-spin\",\n               \"dark:bg-neutral-900\",\n            )}\n         >\n            {children}\n         </div>\n      </div>\n   )\n}\n\nexport { NeonGradientCard }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/number-ticker-demo.json b/apps/web/public/r/styles/default/number-ticker-demo.json
index 95dd122c..44278472 100644
--- a/apps/web/public/r/styles/default/number-ticker-demo.json
+++ b/apps/web/public/r/styles/default/number-ticker-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "number-ticker-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/number-ticker-demo.tsx",
-      "content": "import NumberTicker from '~/registry/default/ui/number-ticker'\n\nfunction NumberTickerDemo() {\n   return (\n      <p className=\"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white\">\n         <NumberTicker value={100} />\n      </p>\n   )\n}\n\nexport default NumberTickerDemo\n",
-      "type": "registry:component",
+      "path": "examples/number-ticker-demo.tsx",
+      "content": "import NumberTicker from \"~/registry/default/ui/number-ticker\"\n\nfunction NumberTickerDemo() {\n   return (\n      <p className=\"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white\">\n         <NumberTicker value={100} />\n      </p>\n   )\n}\n\nexport default NumberTickerDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/number-ticker.json b/apps/web/public/r/styles/default/number-ticker.json
index a4bc7dd6..9b47515a 100644
--- a/apps/web/public/r/styles/default/number-ticker.json
+++ b/apps/web/public/r/styles/default/number-ticker.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "number-ticker",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/number-ticker.tsx",
-      "content": "'use client'\n\nimport { useInView, useMotionValue, useSpring } from 'framer-motion'\nimport { useEffect, useRef } from 'react'\nimport { ny } from '~/lib/utils'\n\nexport default function NumberTicker({\n   value,\n   direction = 'up',\n   delay = 0,\n   className,\n}: {\n   value: number\n   direction?: 'up' | 'down'\n   className?: string\n   delay?: number // delay in s\n}) {\n   const ref = useRef<HTMLSpanElement>(null)\n   const motionValue = useMotionValue(direction === 'down' ? value : 0)\n   const springValue = useSpring(motionValue, {\n      damping: 60,\n      stiffness: 100,\n   })\n   const isInView = useInView(ref, { once: true, margin: '0px' })\n\n   useEffect(() => {\n      isInView\n      && setTimeout(() => {\n         motionValue.set(direction === 'down' ? 0 : value)\n      }, delay * 1000)\n   }, [motionValue, isInView, delay, value, direction])\n\n   useEffect(\n      () =>\n         springValue.on('change', (latest) => {\n            if (ref.current) {\n               ref.current.textContent = Intl.NumberFormat('en-US').format(\n                  Math.round(latest),\n               )\n            }\n         }),\n      [springValue],\n   )\n\n   return (\n      <span\n         className={ny(\n            'inline-block tabular-nums tracking-wider text-black dark:text-white',\n            className,\n         )}\n         ref={ref}\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { useInView, useMotionValue, useSpring } from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\nexport default function NumberTicker({\n   value,\n   direction = \"up\",\n   delay = 0,\n   className,\n}: {\n   value: number\n   direction?: \"up\" | \"down\"\n   className?: string\n   delay?: number // delay in s\n}) {\n   const ref = useRef<HTMLSpanElement>(null)\n   const motionValue = useMotionValue(direction === \"down\" ? value : 0)\n   const springValue = useSpring(motionValue, {\n      damping: 60,\n      stiffness: 100,\n   })\n   const isInView = useInView(ref, { once: true, margin: \"0px\" })\n\n   useEffect(() => {\n      isInView &&\n         setTimeout(() => {\n            motionValue.set(direction === \"down\" ? 0 : value)\n         }, delay * 1000)\n   }, [motionValue, isInView, delay, value, direction])\n\n   useEffect(\n      () =>\n         springValue.on(\"change\", (latest) => {\n            if (ref.current) {\n               ref.current.textContent = Intl.NumberFormat(\"en-US\").format(\n                  Math.round(latest),\n               )\n            }\n         }),\n      [springValue],\n   )\n\n   return (\n      <span\n         className={ny(\n            \"inline-block tabular-nums tracking-wider text-black dark:text-white\",\n            className,\n         )}\n         ref={ref}\n      />\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/nyx-toc-demo.json b/apps/web/public/r/styles/default/nyx-toc-demo.json
index 343b8e79..ef2bcd8f 100644
--- a/apps/web/public/r/styles/default/nyx-toc-demo.json
+++ b/apps/web/public/r/styles/default/nyx-toc-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "nyx-toc-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/nyx-toc-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { NyxTOCItems } from '~/registry/miami/ui/nyx-toc'\n\nconst demoItems = [\n   {\n      title: 'Introduction',\n      url: '#introduction',\n      depth: 1,\n   },\n   {\n      title: 'Getting Started',\n      url: '#getting-started',\n      depth: 2,\n   },\n   {\n      title: 'Installation',\n      url: '#installation',\n      depth: 3,\n   },\n   {\n      title: 'Basic Usage',\n      url: '#basic-usage',\n      depth: 3,\n   },\n   {\n      title: 'Advanced Features',\n      url: '#advanced-features',\n      depth: 2,\n   },\n   {\n      title: 'API Reference',\n      url: '#api-reference',\n      depth: 2,\n   },\n]\n\nexport default function NyxTOCDemo() {\n   return (\n      <div className=\"flex gap-10\">\n         <div className=\"flex-1\">\n            <NyxTOCItems\n               items={demoItems}\n               label=\"On This Page\"\n            />\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/nyx-toc-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { NyxTOCItems } from \"~/registry/miami/ui/nyx-toc\"\n\nconst demoItems = [\n   {\n      title: \"Introduction\",\n      url: \"#introduction\",\n      depth: 1,\n   },\n   {\n      title: \"Getting Started\",\n      url: \"#getting-started\",\n      depth: 2,\n   },\n   {\n      title: \"Installation\",\n      url: \"#installation\",\n      depth: 3,\n   },\n   {\n      title: \"Basic Usage\",\n      url: \"#basic-usage\",\n      depth: 3,\n   },\n   {\n      title: \"Advanced Features\",\n      url: \"#advanced-features\",\n      depth: 2,\n   },\n   {\n      title: \"API Reference\",\n      url: \"#api-reference\",\n      depth: 2,\n   },\n]\n\nexport default function NyxTOCDemo() {\n   return (\n      <div className=\"flex gap-10\">\n         <div className=\"flex-1\">\n            <NyxTOCItems items={demoItems} label=\"On This Page\" />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/nyx-toc-popover-demo.json b/apps/web/public/r/styles/default/nyx-toc-popover-demo.json
index 9226117f..f784ad95 100644
--- a/apps/web/public/r/styles/default/nyx-toc-popover-demo.json
+++ b/apps/web/public/r/styles/default/nyx-toc-popover-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "nyx-toc-popover-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/nyx-toc-popover-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { NyxTOCItems, TocPopover, TocPopoverContent, TocPopoverTrigger } from '~/registry/default/ui/nyx-toc'\n\nexport default function NyxTOCPopoverDemo() {\n   // Example TOC items\n   const items = [\n      { title: 'Introduction', url: '#introduction', depth: 1 },\n      { title: 'Getting Started', url: '#getting-started', depth: 2 },\n      { title: 'Installation', url: '#installation', depth: 2 },\n      { title: 'Basic Usage', url: '#basic-usage', depth: 3 },\n      { title: 'Advanced Features', url: '#advanced-features', depth: 2 },\n      { title: 'Configuration', url: '#configuration', depth: 3 },\n      { title: 'Customization', url: '#customization', depth: 2 },\n   ]\n\n   return (\n      <div className=\"flex h-[300px] w-full items-start justify-center p-6\">\n         <TocPopover>\n            <TocPopoverTrigger items={items} className=\"hover:bg-accent rounded-md border\" />\n            <TocPopoverContent>\n               <NyxTOCItems\n                  items={items}\n                  isMenu\n                  label=\"On This Page\"\n               />\n            </TocPopoverContent>\n         </TocPopover>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/nyx-toc-popover-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n   NyxTOCItems,\n   TocPopover,\n   TocPopoverContent,\n   TocPopoverTrigger,\n} from \"~/registry/default/ui/nyx-toc\"\n\nexport default function NyxTOCPopoverDemo() {\n   // Example TOC items\n   const items = [\n      { title: \"Introduction\", url: \"#introduction\", depth: 1 },\n      { title: \"Getting Started\", url: \"#getting-started\", depth: 2 },\n      { title: \"Installation\", url: \"#installation\", depth: 2 },\n      { title: \"Basic Usage\", url: \"#basic-usage\", depth: 3 },\n      { title: \"Advanced Features\", url: \"#advanced-features\", depth: 2 },\n      { title: \"Configuration\", url: \"#configuration\", depth: 3 },\n      { title: \"Customization\", url: \"#customization\", depth: 2 },\n   ]\n\n   return (\n      <div className=\"flex h-[300px] w-full items-start justify-center p-6\">\n         <TocPopover>\n            <TocPopoverTrigger\n               items={items}\n               className=\"hover:bg-accent rounded-md border\"\n            />\n            <TocPopoverContent>\n               <NyxTOCItems items={items} isMenu label=\"On This Page\" />\n            </TocPopoverContent>\n         </TocPopover>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/nyx-toc.json b/apps/web/public/r/styles/default/nyx-toc.json
index 9a5cbbb0..a39b8e78 100644
--- a/apps/web/public/r/styles/default/nyx-toc.json
+++ b/apps/web/public/r/styles/default/nyx-toc.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "nyx-toc",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-icons",
     "@radix-ui/react-popover",
@@ -13,19 +15,19 @@
   "files": [
     {
       "path": "ui/nyx-toc.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport type { AnchorHTMLAttributes, HTMLAttributes, ReactNode, RefObject } from 'react'\nimport { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react'\nimport type { PopoverContentProps, PopoverTriggerProps } from '@radix-ui/react-popover'\nimport { AlignLeft, ChevronRight } from 'lucide-react'\nimport scrollIntoView from 'scroll-into-view-if-needed'\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport { Popover, PopoverContent, PopoverTrigger } from '~/registry/miami/ui/popover'\nimport { ny } from '~/lib/utils'\nimport { useAnchorObserver } from '~/hooks/use-anchor-observer'\nimport { useOnChange } from '~/hooks/use-on-change'\n\n// #region Types\nexport interface TOCItemType {\n   title: ReactNode\n   url: string\n   depth: number\n}\n\nexport type TableOfContents = TOCItemType[]\nexport type TOCThumb = [top: number, height: number]\n\nexport interface TOCProps {\n   header?: ReactNode\n   footer?: ReactNode\n   children: ReactNode\n}\n\nexport interface PageStyles {\n   tocNav?: string\n   toc?: string\n   page?: string\n   article?: string\n}\n\nexport interface TOCItemProps\n   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {\n   href: string\n\n   onActiveChange?: (v: boolean) => void\n}\n\n// #region Components\nconst ScrollArea = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={ny('overflow-hidden', className)}\n      {...props}\n   >\n      {children}\n      <ScrollAreaPrimitive.Corner />\n      <ScrollBar orientation=\"vertical\" />\n   </ScrollAreaPrimitive.Root>\n))\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollViewport = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Viewport>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={ny('size-full rounded-[inherit]', className)}\n      {...props}\n   >\n      {children}\n   </ScrollAreaPrimitive.Viewport>\n))\n\nScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName\n\nconst ScrollBar = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Scrollbar>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n   <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      orientation={orientation}\n      className={ny(\n         'data-[state=hidden]:animate-fd-fade-out flex select-none',\n         orientation === 'vertical' && 'h-full w-1.5',\n         orientation === 'horizontal' && 'h-1.5 flex-col',\n         className,\n      )}\n      {...props}\n   >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-fd-border relative flex-1 rounded-full\" />\n   </ScrollAreaPrimitive.Scrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName\n\nexport { ScrollArea, ScrollBar, ScrollViewport }\n\n// #region Contexts\nconst ActiveAnchorContext = createContext<string[]>([])\nconst ScrollContext = createContext<RefObject<HTMLElement | null>>({ current: null })\nconst StylesContext = createContext<PageStyles>({\n   tocNav: 'xl:hidden',\n   toc: 'max-xl:hidden',\n})\n\n// #region Hooks\nfunction useActiveAnchor(): string | undefined {\n   return useContext(ActiveAnchorContext).at(-1)\n}\n\nfunction useActiveAnchors(): string[] {\n   return useContext(ActiveAnchorContext)\n}\n\nfunction usePageStyles() {\n   return useContext(StylesContext)\n}\n\n// #region Utility Functions\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b))\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   return a !== b\n}\n\nfunction mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\n   return (value) => {\n      refs.forEach((ref) => {\n         if (typeof ref === 'function')\n            ref(value)\n         else if (ref !== null && typeof ref === 'object')\n            (ref as React.MutableRefObject<T | null>).current = value\n      })\n   }\n}\n\nfunction getItemOffset(depth: number): number {\n   if (depth <= 2)\n      return 14\n   if (depth === 3)\n      return 26\n   return 36\n}\n\nfunction getLineOffset(depth: number): number {\n   return depth >= 3 ? 10 : 0\n}\n\n// #region Components\nexport function ScrollProvider({\n   containerRef,\n   children,\n}: {\n   containerRef: RefObject<HTMLElement | null>\n   children?: ReactNode\n}): React.ReactElement {\n   return (\n      <ScrollContext.Provider value={containerRef}>\n         {children}\n      </ScrollContext.Provider>\n   )\n}\n\nexport function AnchorProvider({\n   toc,\n   single = true,\n   children,\n}: {\n   toc: TableOfContents\n   single?: boolean\n   children?: ReactNode\n}): React.ReactElement {\n   const headings = useMemo(() => {\n      return toc.map(item => item.url.split('#')[1])\n   }, [toc])\n\n   return (\n      <ActiveAnchorContext.Provider value={useAnchorObserver(headings, single)}>\n         {children}\n      </ActiveAnchorContext.Provider>\n   )\n}\n\nexport const TOCItem = forwardRef<HTMLAnchorElement, TOCItemProps>(\n   ({ onActiveChange, ...props }, ref) => {\n      const containerRef = useContext(ScrollContext)\n      const anchors = useActiveAnchors()\n      const anchorRef = useRef<HTMLAnchorElement>(null)\n      const mergedRef = mergeRefs(anchorRef, ref)\n\n      const isActive = anchors.includes(props.href.slice(1))\n\n      useOnChange(isActive, (v) => {\n         const element = anchorRef.current\n         if (!element)\n            return\n\n         if (v && containerRef.current) {\n            scrollIntoView(element, {\n               behavior: 'smooth',\n               block: 'center',\n               inline: 'center',\n               scrollMode: 'always',\n               boundary: containerRef.current,\n            })\n         }\n\n         onActiveChange?.(v)\n      })\n\n      return (\n         <a ref={mergedRef} data-active={isActive} {...props}>\n            {props.children}\n         </a>\n      )\n   },\n)\n\nTOCItem.displayName = 'TOCItem'\n\nexport function TocThumb({\n   containerRef,\n   ...props\n}: HTMLAttributes<HTMLDivElement> & {\n   containerRef: RefObject<HTMLElement | null>\n}): ReactNode {\n   const active = useActiveAnchors()\n   const thumbRef = useRef<HTMLDivElement>(null)\n   const activeRef = useRef(active)\n   activeRef.current = active\n\n   function calc(container: HTMLElement, active: string[]): TOCThumb {\n      if (active.length === 0 || container.clientHeight === 0)\n         return [0, 0]\n\n      let upper = Number.MAX_VALUE\n      let lower = 0\n\n      for (const item of active) {\n         const element = container.querySelector<HTMLElement>(`a[href=\"#${item}\"]`)\n         if (!element)\n            continue\n\n         const styles = getComputedStyle(element)\n         upper = Math.min(upper, element.offsetTop + Number.parseFloat(styles.paddingTop))\n         lower = Math.max(\n            lower,\n            element.offsetTop\n            + element.clientHeight\n            - Number.parseFloat(styles.paddingBottom),\n         )\n      }\n\n      return [upper, lower - upper]\n   }\n\n   function update(element: HTMLElement, info: TOCThumb): void {\n      element.style.setProperty('--nyx-top', `${info[0]}px`)\n      element.style.setProperty('--nyx-height', `${info[1]}px`)\n   }\n\n   useEffect(() => {\n      if (!containerRef.current)\n         return\n      const container = containerRef.current\n\n      const onResize = (): void => {\n         if (!thumbRef.current)\n            return\n         update(thumbRef.current, calc(container, activeRef.current))\n      }\n\n      onResize()\n      const observer = new ResizeObserver(onResize)\n      observer.observe(container)\n\n      return () => {\n         observer.disconnect()\n      }\n   }, [containerRef])\n\n   useOnChange(active, () => {\n      if (!containerRef.current || !thumbRef.current)\n         return\n\n      update(thumbRef.current, calc(containerRef.current, active))\n   })\n\n   return <div ref={thumbRef} role=\"none\" {...props} />\n}\n\nexport function TocItemsEmpty() {\n   return (\n      <div className=\"bg-card text-muted-foreground rounded-lg border p-3 text-xs\">\n         No headings found\n      </div>\n   )\n}\n\nexport function Toc(props: HTMLAttributes<HTMLDivElement>) {\n   const { toc } = usePageStyles()\n\n   return (\n      <div\n         id=\"nyx-toc\"\n         {...props}\n         className={ny(\n            'top-nyx-layout-top sticky h-[var(--nyx-toc-height)] pb-2 pt-12',\n            toc,\n            props.className,\n         )}\n         style={{\n            ...props.style,\n            '--nyx-toc-height': 'calc(100dvh - var(--nyx-banner-height) - var(--nyx-nav-height))',\n         } as any}\n      >\n         <div className=\"flex h-full w-[var(--nyx-width)] max-w-full flex-col gap-3 pe-4\">\n            {props.children}\n         </div>\n      </div>\n   )\n}\n\n// Main Component\nexport function NyxTOCItems({\n   items,\n   isMenu = false,\n   label,\n}: {\n   items: TOCItemType[]\n   isMenu?: boolean\n   label?: ReactNode\n}) {\n   const viewRef = useRef<HTMLDivElement>(null)\n   const containerRef = useRef<HTMLDivElement>(null)\n\n   const [svg, setSvg] = useState<{\n      path: string\n      width: number\n      height: number\n   }>()\n\n   useEffect(() => {\n      if (!containerRef.current)\n         return\n      const container = containerRef.current\n\n      function onResize(): void {\n         if (container.clientHeight === 0)\n            return\n         let w = 0\n         let h = 0\n         const d: string[] = []\n         for (let i = 0; i < items.length; i++) {\n            const element: HTMLElement | null = container.querySelector(\n               `a[href=\"#${items[i].url.slice(1)}\"]`,\n            )\n            if (!element)\n               continue\n\n            const styles = getComputedStyle(element)\n            const offset = getLineOffset(items[i].depth) + 1\n            const top = element.offsetTop + Number.parseFloat(styles.paddingTop)\n            const bottom = element.offsetTop + element.clientHeight - Number.parseFloat(styles.paddingBottom)\n\n            w = Math.max(offset, w)\n            h = Math.max(h, bottom)\n\n            d.push(`${i === 0 ? 'M' : 'L'}${offset} ${top}`)\n            d.push(`L${offset} ${bottom}`)\n         }\n\n         setSvg({\n            path: d.join(' '),\n            width: w + 1,\n            height: h,\n         })\n      }\n\n      const observer = new ResizeObserver(onResize)\n      onResize()\n      observer.observe(container)\n      return () => observer.disconnect()\n   }, [items])\n\n   if (items.length === 0)\n      return <TocItemsEmpty />\n\n   return (\n      <>\n         {label && (\n            <h3 className=\"text-muted-foreground -ms-0.5 inline-flex items-center gap-1.5 text-sm\">\n               <AlignLeft className=\"size-4\" />\n               {label}\n            </h3>\n         )}\n         <ScrollArea className={ny('flex flex-col', isMenu && '-ms-3')}>\n            <ScrollViewport className=\"relative min-h-0\" ref={viewRef}>\n               {svg\n                  ? (\n                        <div\n                           className=\"absolute start-0 top-0 rtl:-scale-x-100\"\n                           style={{\n                              width: svg.width,\n                              height: svg.height,\n                              maskImage: `url(\"data:image/svg+xml,${\n                             // Inline SVG\n                             encodeURIComponent(\n                               `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ${svg.width} ${svg.height}\"><path d=\"${svg.path}\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" /></svg>`,\n                             )\n                           }\")`,\n                           }}\n                        >\n                           <TocThumb\n                              containerRef={containerRef}\n                              className=\"bg-primary mt-[var(--nyx-top)] h-[var(--nyx-height)] transition-all\"\n                           />\n                        </div>\n                     )\n                  : null}\n               <ScrollProvider containerRef={viewRef}>\n                  <div className=\"flex flex-col\" ref={containerRef}>\n                     {items.map((item, i) => (\n                        <LocalTOCItem\n                           key={item.url}\n                           item={item}\n                           upper={items[i - 1]?.depth}\n                           lower={items[i + 1]?.depth}\n                        />\n                     ))}\n                  </div>\n               </ScrollProvider>\n            </ScrollViewport>\n         </ScrollArea>\n      </>\n   )\n}\n\n// Popover Components\nexport const TocPopover = Popover\n\nexport function TocPopoverTrigger({\n   items,\n   ...props\n}: PopoverTriggerProps & { items: TOCItemType[] }) {\n   const active = useActiveAnchor()\n   const current = useMemo(() => {\n      return items.find(item => active === item.url.slice(1))?.title\n   }, [items, active])\n\n   return (\n      <PopoverTrigger\n         {...props}\n         className={ny(\n            'inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start',\n            props.className,\n         )}\n      >\n         <AlignLeft className=\"size-4 shrink-0\" />\n         Table of Contents\n         {current && (\n            <>\n               <ChevronRight className=\"text-muted-foreground -mx-1.5 size-4 shrink-0\" />\n               <span className=\"text-muted-foreground truncate\">{current}</span>\n            </>\n         )}\n      </PopoverTrigger>\n   )\n}\n\nexport function TocPopoverContent(props: PopoverContentProps) {\n   return (\n      <PopoverContent\n         hideWhenDetached\n         alignOffset={16}\n         align=\"start\"\n         side=\"bottom\"\n         data-toc-popover=\"\"\n         {...props}\n         className={ny(\n            'flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3',\n            props.className,\n         )}\n      >\n         {props.children}\n      </PopoverContent>\n   )\n}\n\nfunction LocalTOCItem({\n   item,\n   upper = item.depth,\n   lower = item.depth,\n}: {\n   item: TOCItemType\n   upper?: number\n   lower?: number\n}) {\n   const offset = getLineOffset(item.depth)\n   const upperOffset = getLineOffset(upper)\n   const lowerOffset = getLineOffset(lower)\n\n   return (\n      <TOCItem\n         href={item.url}\n         style={{\n            paddingInlineStart: getItemOffset(item.depth),\n         }}\n         className=\"prose text-muted-foreground data-[active=true]:text-primary relative py-1.5 text-sm transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0\"\n      >\n         {offset !== upperOffset\n            ? (\n                  <svg\n                     xmlns=\"http://www.w3.org/2000/svg\"\n                     viewBox=\"0 0 16 16\"\n                     className=\"absolute -top-1.5 start-0 size-4 rtl:-scale-x-100\"\n                  >\n                     <line\n                        x1={upperOffset}\n                        y1=\"0\"\n                        x2={offset}\n                        y2=\"12\"\n                        className=\"stroke-foreground/10\"\n                        strokeWidth=\"1\"\n                     />\n                  </svg>\n               )\n            : null}\n         <div\n            className={ny(\n               'bg-foreground/10 absolute inset-y-0 w-px',\n               offset !== upperOffset && 'top-1.5',\n               offset !== lowerOffset && 'bottom-1.5',\n            )}\n            style={{\n               insetInlineStart: offset,\n            }}\n         />\n         {item.title}\n      </TOCItem>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type {\n   PopoverContentProps,\n   PopoverTriggerProps,\n} from \"@radix-ui/react-popover\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport { AlignLeft, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\nimport type {\n   AnchorHTMLAttributes,\n   HTMLAttributes,\n   ReactNode,\n   RefObject,\n} from \"react\"\nimport {\n   createContext,\n   forwardRef,\n   useContext,\n   useEffect,\n   useMemo,\n   useRef,\n   useState,\n} from \"react\"\nimport scrollIntoView from \"scroll-into-view-if-needed\"\nimport { useAnchorObserver } from \"~/hooks/use-anchor-observer\"\nimport { useOnChange } from \"~/hooks/use-on-change\"\nimport { ny } from \"~/lib/utils\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\n// #region Types\nexport interface TOCItemType {\n   title: ReactNode\n   url: string\n   depth: number\n}\n\nexport type TableOfContents = TOCItemType[]\nexport type TOCThumb = [top: number, height: number]\n\nexport interface TOCProps {\n   header?: ReactNode\n   footer?: ReactNode\n   children: ReactNode\n}\n\nexport interface PageStyles {\n   tocNav?: string\n   toc?: string\n   page?: string\n   article?: string\n}\n\nexport interface TOCItemProps\n   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> {\n   href: string\n\n   onActiveChange?: (v: boolean) => void\n}\n\n// #region Components\nconst ScrollArea = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={ny(\"overflow-hidden\", className)}\n      {...props}\n   >\n      {children}\n      <ScrollAreaPrimitive.Corner />\n      <ScrollBar orientation=\"vertical\" />\n   </ScrollAreaPrimitive.Root>\n))\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollViewport = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Viewport>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={ny(\"size-full rounded-[inherit]\", className)}\n      {...props}\n   >\n      {children}\n   </ScrollAreaPrimitive.Viewport>\n))\n\nScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName\n\nconst ScrollBar = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Scrollbar>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n   <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      orientation={orientation}\n      className={ny(\n         \"data-[state=hidden]:animate-fd-fade-out flex select-none\",\n         orientation === \"vertical\" && \"h-full w-1.5\",\n         orientation === \"horizontal\" && \"h-1.5 flex-col\",\n         className,\n      )}\n      {...props}\n   >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-fd-border relative flex-1 rounded-full\" />\n   </ScrollAreaPrimitive.Scrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName\n\nexport { ScrollArea, ScrollBar, ScrollViewport }\n\n// #region Contexts\nconst ActiveAnchorContext = createContext<string[]>([])\nconst ScrollContext = createContext<RefObject<HTMLElement | null>>({\n   current: null,\n})\nconst StylesContext = createContext<PageStyles>({\n   tocNav: \"xl:hidden\",\n   toc: \"max-xl:hidden\",\n})\n\n// #region Hooks\nfunction useActiveAnchor(): string | undefined {\n   return useContext(ActiveAnchorContext).at(-1)\n}\n\nfunction useActiveAnchors(): string[] {\n   return useContext(ActiveAnchorContext)\n}\n\nfunction usePageStyles() {\n   return useContext(StylesContext)\n}\n\n// #region Utility Functions\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b))\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   return a !== b\n}\n\nfunction mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\n   return (value) => {\n      refs.forEach((ref) => {\n         if (typeof ref === \"function\") ref(value)\n         else if (ref !== null && typeof ref === \"object\")\n            (ref as React.MutableRefObject<T | null>).current = value\n      })\n   }\n}\n\nfunction getItemOffset(depth: number): number {\n   if (depth <= 2) return 14\n   if (depth === 3) return 26\n   return 36\n}\n\nfunction getLineOffset(depth: number): number {\n   return depth >= 3 ? 10 : 0\n}\n\n// #region Components\nexport function ScrollProvider({\n   containerRef,\n   children,\n}: {\n   containerRef: RefObject<HTMLElement | null>\n   children?: ReactNode\n}): React.ReactElement {\n   return (\n      <ScrollContext.Provider value={containerRef}>\n         {children}\n      </ScrollContext.Provider>\n   )\n}\n\nexport function AnchorProvider({\n   toc,\n   single = true,\n   children,\n}: {\n   toc: TableOfContents\n   single?: boolean\n   children?: ReactNode\n}): React.ReactElement {\n   const headings = useMemo(() => {\n      return toc.map((item) => item.url.split(\"#\")[1])\n   }, [toc])\n\n   return (\n      <ActiveAnchorContext.Provider value={useAnchorObserver(headings, single)}>\n         {children}\n      </ActiveAnchorContext.Provider>\n   )\n}\n\nexport const TOCItem = forwardRef<HTMLAnchorElement, TOCItemProps>(\n   ({ onActiveChange, ...props }, ref) => {\n      const containerRef = useContext(ScrollContext)\n      const anchors = useActiveAnchors()\n      const anchorRef = useRef<HTMLAnchorElement>(null)\n      const mergedRef = mergeRefs(anchorRef, ref)\n\n      const isActive = anchors.includes(props.href.slice(1))\n\n      useOnChange(isActive, (v) => {\n         const element = anchorRef.current\n         if (!element) return\n\n         if (v && containerRef.current) {\n            scrollIntoView(element, {\n               behavior: \"smooth\",\n               block: \"center\",\n               inline: \"center\",\n               scrollMode: \"always\",\n               boundary: containerRef.current,\n            })\n         }\n\n         onActiveChange?.(v)\n      })\n\n      return (\n         <a ref={mergedRef} data-active={isActive} {...props}>\n            {props.children}\n         </a>\n      )\n   },\n)\n\nTOCItem.displayName = \"TOCItem\"\n\nexport function TocThumb({\n   containerRef,\n   ...props\n}: HTMLAttributes<HTMLDivElement> & {\n   containerRef: RefObject<HTMLElement | null>\n}): ReactNode {\n   const active = useActiveAnchors()\n   const thumbRef = useRef<HTMLDivElement>(null)\n   const activeRef = useRef(active)\n   activeRef.current = active\n\n   function calc(container: HTMLElement, active: string[]): TOCThumb {\n      if (active.length === 0 || container.clientHeight === 0) return [0, 0]\n\n      let upper = Number.MAX_VALUE\n      let lower = 0\n\n      for (const item of active) {\n         const element = container.querySelector<HTMLElement>(\n            `a[href=\"#${item}\"]`,\n         )\n         if (!element) continue\n\n         const styles = getComputedStyle(element)\n         upper = Math.min(\n            upper,\n            element.offsetTop + Number.parseFloat(styles.paddingTop),\n         )\n         lower = Math.max(\n            lower,\n            element.offsetTop +\n               element.clientHeight -\n               Number.parseFloat(styles.paddingBottom),\n         )\n      }\n\n      return [upper, lower - upper]\n   }\n\n   function update(element: HTMLElement, info: TOCThumb): void {\n      element.style.setProperty(\"--nyx-top\", `${info[0]}px`)\n      element.style.setProperty(\"--nyx-height\", `${info[1]}px`)\n   }\n\n   useEffect(() => {\n      if (!containerRef.current) return\n      const container = containerRef.current\n\n      const onResize = (): void => {\n         if (!thumbRef.current) return\n         update(thumbRef.current, calc(container, activeRef.current))\n      }\n\n      onResize()\n      const observer = new ResizeObserver(onResize)\n      observer.observe(container)\n\n      return () => {\n         observer.disconnect()\n      }\n   }, [containerRef])\n\n   useOnChange(active, () => {\n      if (!containerRef.current || !thumbRef.current) return\n\n      update(thumbRef.current, calc(containerRef.current, active))\n   })\n\n   return <div ref={thumbRef} role=\"none\" {...props} />\n}\n\nexport function TocItemsEmpty() {\n   return (\n      <div className=\"bg-card text-muted-foreground rounded-lg border p-3 text-xs\">\n         No headings found\n      </div>\n   )\n}\n\nexport function Toc(props: HTMLAttributes<HTMLDivElement>) {\n   const { toc } = usePageStyles()\n\n   return (\n      <div\n         id=\"nyx-toc\"\n         {...props}\n         className={ny(\n            \"top-nyx-layout-top sticky h-[var(--nyx-toc-height)] pb-2 pt-12\",\n            toc,\n            props.className,\n         )}\n         style={\n            {\n               ...props.style,\n               \"--nyx-toc-height\":\n                  \"calc(100dvh - var(--nyx-banner-height) - var(--nyx-nav-height))\",\n            } as any\n         }\n      >\n         <div className=\"flex h-full w-[var(--nyx-width)] max-w-full flex-col gap-3 pe-4\">\n            {props.children}\n         </div>\n      </div>\n   )\n}\n\n// Main Component\nexport function NyxTOCItems({\n   items,\n   isMenu = false,\n   label,\n}: {\n   items: TOCItemType[]\n   isMenu?: boolean\n   label?: ReactNode\n}) {\n   const viewRef = useRef<HTMLDivElement>(null)\n   const containerRef = useRef<HTMLDivElement>(null)\n\n   const [svg, setSvg] = useState<{\n      path: string\n      width: number\n      height: number\n   }>()\n\n   useEffect(() => {\n      if (!containerRef.current) return\n      const container = containerRef.current\n\n      function onResize(): void {\n         if (container.clientHeight === 0) return\n         let w = 0\n         let h = 0\n         const d: string[] = []\n         for (let i = 0; i < items.length; i++) {\n            const element: HTMLElement | null = container.querySelector(\n               `a[href=\"#${items[i].url.slice(1)}\"]`,\n            )\n            if (!element) continue\n\n            const styles = getComputedStyle(element)\n            const offset = getLineOffset(items[i].depth) + 1\n            const top = element.offsetTop + Number.parseFloat(styles.paddingTop)\n            const bottom =\n               element.offsetTop +\n               element.clientHeight -\n               Number.parseFloat(styles.paddingBottom)\n\n            w = Math.max(offset, w)\n            h = Math.max(h, bottom)\n\n            d.push(`${i === 0 ? \"M\" : \"L\"}${offset} ${top}`)\n            d.push(`L${offset} ${bottom}`)\n         }\n\n         setSvg({\n            path: d.join(\" \"),\n            width: w + 1,\n            height: h,\n         })\n      }\n\n      const observer = new ResizeObserver(onResize)\n      onResize()\n      observer.observe(container)\n      return () => observer.disconnect()\n   }, [items])\n\n   if (items.length === 0) return <TocItemsEmpty />\n\n   return (\n      <>\n         {label && (\n            <h3 className=\"text-muted-foreground -ms-0.5 inline-flex items-center gap-1.5 text-sm\">\n               <AlignLeft className=\"size-4\" />\n               {label}\n            </h3>\n         )}\n         <ScrollArea className={ny(\"flex flex-col\", isMenu && \"-ms-3\")}>\n            <ScrollViewport className=\"relative min-h-0\" ref={viewRef}>\n               {svg ? (\n                  <div\n                     className=\"absolute start-0 top-0 rtl:-scale-x-100\"\n                     style={{\n                        width: svg.width,\n                        height: svg.height,\n                        maskImage: `url(\"data:image/svg+xml,${\n                           // Inline SVG\n                           encodeURIComponent(\n                              `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ${svg.width} ${svg.height}\"><path d=\"${svg.path}\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" /></svg>`,\n                           )\n                        }\")`,\n                     }}\n                  >\n                     <TocThumb\n                        containerRef={containerRef}\n                        className=\"bg-primary mt-[var(--nyx-top)] h-[var(--nyx-height)] transition-all\"\n                     />\n                  </div>\n               ) : null}\n               <ScrollProvider containerRef={viewRef}>\n                  <div className=\"flex flex-col\" ref={containerRef}>\n                     {items.map((item, i) => (\n                        <LocalTOCItem\n                           key={item.url}\n                           item={item}\n                           upper={items[i - 1]?.depth}\n                           lower={items[i + 1]?.depth}\n                        />\n                     ))}\n                  </div>\n               </ScrollProvider>\n            </ScrollViewport>\n         </ScrollArea>\n      </>\n   )\n}\n\n// Popover Components\nexport const TocPopover = Popover\n\nexport function TocPopoverTrigger({\n   items,\n   ...props\n}: PopoverTriggerProps & { items: TOCItemType[] }) {\n   const active = useActiveAnchor()\n   const current = useMemo(() => {\n      return items.find((item) => active === item.url.slice(1))?.title\n   }, [items, active])\n\n   return (\n      <PopoverTrigger\n         {...props}\n         className={ny(\n            \"inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start\",\n            props.className,\n         )}\n      >\n         <AlignLeft className=\"size-4 shrink-0\" />\n         Table of Contents\n         {current && (\n            <>\n               <ChevronRight className=\"text-muted-foreground -mx-1.5 size-4 shrink-0\" />\n               <span className=\"text-muted-foreground truncate\">{current}</span>\n            </>\n         )}\n      </PopoverTrigger>\n   )\n}\n\nexport function TocPopoverContent(props: PopoverContentProps) {\n   return (\n      <PopoverContent\n         hideWhenDetached\n         alignOffset={16}\n         align=\"start\"\n         side=\"bottom\"\n         data-toc-popover=\"\"\n         {...props}\n         className={ny(\n            \"flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3\",\n            props.className,\n         )}\n      >\n         {props.children}\n      </PopoverContent>\n   )\n}\n\nfunction LocalTOCItem({\n   item,\n   upper = item.depth,\n   lower = item.depth,\n}: {\n   item: TOCItemType\n   upper?: number\n   lower?: number\n}) {\n   const offset = getLineOffset(item.depth)\n   const upperOffset = getLineOffset(upper)\n   const lowerOffset = getLineOffset(lower)\n\n   return (\n      <TOCItem\n         href={item.url}\n         style={{\n            paddingInlineStart: getItemOffset(item.depth),\n         }}\n         className=\"prose text-muted-foreground data-[active=true]:text-primary relative py-1.5 text-sm transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0\"\n      >\n         {offset !== upperOffset ? (\n            <svg\n               xmlns=\"http://www.w3.org/2000/svg\"\n               viewBox=\"0 0 16 16\"\n               className=\"absolute -top-1.5 start-0 size-4 rtl:-scale-x-100\"\n            >\n               <line\n                  x1={upperOffset}\n                  y1=\"0\"\n                  x2={offset}\n                  y2=\"12\"\n                  className=\"stroke-foreground/10\"\n                  strokeWidth=\"1\"\n               />\n            </svg>\n         ) : null}\n         <div\n            className={ny(\n               \"bg-foreground/10 absolute inset-y-0 w-px\",\n               offset !== upperOffset && \"top-1.5\",\n               offset !== lowerOffset && \"bottom-1.5\",\n            )}\n            style={{\n               insetInlineStart: offset,\n            }}\n         />\n         {item.title}\n      </TOCItem>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     },
     {
       "path": "hooks/use-anchor-observer.ts",
-      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\n\n/**\n * Find the active heading of page\n *\n * It selects the top heading by default, and the last item when reached the bottom of page.\n *\n * @param watch - An array of element ids to watch\n * @param single - only one active item at most\n * @returns Active anchor\n */\nexport function useAnchorObserver(watch: string[], single: boolean): string[] {\n   const [activeAnchor, setActiveAnchor] = useState<string[]>([])\n\n   useEffect(() => {\n      let visible: string[] = []\n      const observer = new IntersectionObserver(\n         (entries) => {\n            for (const entry of entries) {\n               if (entry.isIntersecting && !visible.includes(entry.target.id)) {\n                  visible = [...visible, entry.target.id]\n               }\n               else if (\n                  !entry.isIntersecting\n                  && visible.includes(entry.target.id)\n               ) {\n                  visible = visible.filter(v => v !== entry.target.id)\n               }\n            }\n\n            if (visible.length > 0)\n               setActiveAnchor(visible)\n         },\n         {\n            rootMargin: single ? '-80px 0% -70% 0%' : `-20px 0% -40% 0%`,\n            threshold: 1,\n         },\n      )\n\n      function onScroll(): void {\n         const element = document.scrollingElement\n         if (!element)\n            return\n\n         if (element.scrollTop === 0 && single) {\n            setActiveAnchor(watch.slice(0, 1))\n         }\n         else if (\n            element.scrollTop + element.clientHeight\n            >= element.scrollHeight - 6\n         ) {\n            setActiveAnchor((active) => {\n               return active.length > 0 && !single\n                  ? watch.slice(watch.indexOf(active[0]))\n                  : watch.slice(-1)\n            })\n         }\n      }\n\n      for (const heading of watch) {\n         const element = document.getElementById(heading)\n\n         if (element)\n            observer.observe(element)\n      }\n\n      onScroll()\n      window.addEventListener('scroll', onScroll)\n      return () => {\n         window.removeEventListener('scroll', onScroll)\n         observer.disconnect()\n      }\n   }, [single, watch])\n\n   return single ? activeAnchor.slice(0, 1) : activeAnchor\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\n/**\n * Find the active heading of page\n *\n * It selects the top heading by default, and the last item when reached the bottom of page.\n *\n * @param watch - An array of element ids to watch\n * @param single - only one active item at most\n * @returns Active anchor\n */\nexport function useAnchorObserver(watch: string[], single: boolean): string[] {\n   const [activeAnchor, setActiveAnchor] = useState<string[]>([])\n\n   useEffect(() => {\n      let visible: string[] = []\n      const observer = new IntersectionObserver(\n         (entries) => {\n            for (const entry of entries) {\n               if (entry.isIntersecting && !visible.includes(entry.target.id)) {\n                  visible = [...visible, entry.target.id]\n               } else if (\n                  !entry.isIntersecting &&\n                  visible.includes(entry.target.id)\n               ) {\n                  visible = visible.filter((v) => v !== entry.target.id)\n               }\n            }\n\n            if (visible.length > 0) setActiveAnchor(visible)\n         },\n         {\n            rootMargin: single ? \"-80px 0% -70% 0%\" : `-20px 0% -40% 0%`,\n            threshold: 1,\n         },\n      )\n\n      function onScroll(): void {\n         const element = document.scrollingElement\n         if (!element) return\n\n         if (element.scrollTop === 0 && single) {\n            setActiveAnchor(watch.slice(0, 1))\n         } else if (\n            element.scrollTop + element.clientHeight >=\n            element.scrollHeight - 6\n         ) {\n            setActiveAnchor((active) => {\n               return active.length > 0 && !single\n                  ? watch.slice(watch.indexOf(active[0]))\n                  : watch.slice(-1)\n            })\n         }\n      }\n\n      for (const heading of watch) {\n         const element = document.getElementById(heading)\n\n         if (element) observer.observe(element)\n      }\n\n      onScroll()\n      window.addEventListener(\"scroll\", onScroll)\n      return () => {\n         window.removeEventListener(\"scroll\", onScroll)\n         observer.disconnect()\n      }\n   }, [single, watch])\n\n   return single ? activeAnchor.slice(0, 1) : activeAnchor\n}\n",
       "type": "registry:hook",
       "target": ""
     },
     {
       "path": "hooks/use-on-change.ts",
-      "content": "'use client'\n\nimport { useState } from 'react'\n\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b)) {\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   }\n\n   return a !== b\n}\n\n/**\n * @param value - state to watch\n * @param onChange - when the state changed\n * @param isUpdated - a function that determines if the state is updated\n */\nexport function useOnChange<T>(\n   value: T,\n   onChange: (current: T, previous: T) => void,\n   isUpdated: (prev: T, current: T) => boolean = isDifferent,\n): void {\n   const [prev, setPrev] = useState<T>(value)\n\n   if (isUpdated(prev, value)) {\n      onChange(value, prev)\n      setPrev(value)\n   }\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b)) {\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   }\n\n   return a !== b\n}\n\n/**\n * @param value - state to watch\n * @param onChange - when the state changed\n * @param isUpdated - a function that determines if the state is updated\n */\nexport function useOnChange<T>(\n   value: T,\n   onChange: (current: T, previous: T) => void,\n   isUpdated: (prev: T, current: T) => boolean = isDifferent,\n): void {\n   const [prev, setPrev] = useState<T>(value)\n\n   if (isUpdated(prev, value)) {\n      onChange(value, prev)\n      setPrev(value)\n   }\n}\n",
       "type": "registry:hook",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/orbiting-circles-demo.json b/apps/web/public/r/styles/default/orbiting-circles-demo.json
index 5d26d3cf..f3a5cc19 100644
--- a/apps/web/public/r/styles/default/orbiting-circles-demo.json
+++ b/apps/web/public/r/styles/default/orbiting-circles-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "orbiting-circles-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/orbiting-circles-demo.tsx",
-      "content": "import OrbitingCircles from '~/registry/default/ui/orbiting-circles'\n\nexport default function OrbitingCirclesDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Circles\n         </span>\n\n         {/* Inner Circles */}\n         <OrbitingCircles\n            className=\"size-[30px] border-none bg-transparent\"\n            duration={20}\n            delay={20}\n            radius={80}\n         >\n            <Icons.whatsapp />\n         </OrbitingCircles>\n         <OrbitingCircles\n            className=\"size-[30px] border-none bg-transparent\"\n            duration={20}\n            delay={10}\n            radius={80}\n         >\n            <Icons.notion />\n         </OrbitingCircles>\n\n         {/* Outer Circles (reverse) */}\n         <OrbitingCircles\n            className=\"size-[50px] border-none bg-transparent\"\n            radius={190}\n            duration={20}\n            reverse\n         >\n            <Icons.googleDrive />\n         </OrbitingCircles>\n         <OrbitingCircles\n            className=\"size-[50px] border-none bg-transparent\"\n            radius={190}\n            duration={20}\n            delay={20}\n            reverse\n         >\n            <Icons.gitHub />\n         </OrbitingCircles>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: () => (\n      <svg width=\"100\" height=\"100\" viewBox=\"0 0 438.549 438.549\">\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         />\n      </svg>\n   ),\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/orbiting-circles-demo.tsx",
+      "content": "import OrbitingCircles from \"~/registry/default/ui/orbiting-circles\"\n\nexport default function OrbitingCirclesDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Circles\n         </span>\n\n         {/* Inner Circles */}\n         <OrbitingCircles\n            className=\"size-[30px] border-none bg-transparent\"\n            duration={20}\n            delay={20}\n            radius={80}\n         >\n            <Icons.whatsapp />\n         </OrbitingCircles>\n         <OrbitingCircles\n            className=\"size-[30px] border-none bg-transparent\"\n            duration={20}\n            delay={10}\n            radius={80}\n         >\n            <Icons.notion />\n         </OrbitingCircles>\n\n         {/* Outer Circles (reverse) */}\n         <OrbitingCircles\n            className=\"size-[50px] border-none bg-transparent\"\n            radius={190}\n            duration={20}\n            reverse\n         >\n            <Icons.googleDrive />\n         </OrbitingCircles>\n         <OrbitingCircles\n            className=\"size-[50px] border-none bg-transparent\"\n            radius={190}\n            duration={20}\n            delay={20}\n            reverse\n         >\n            <Icons.gitHub />\n         </OrbitingCircles>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: () => (\n      <svg width=\"100\" height=\"100\" viewBox=\"0 0 438.549 438.549\">\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         />\n      </svg>\n   ),\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/orbiting-circles.json b/apps/web/public/r/styles/default/orbiting-circles.json
index a1ae4882..1af78066 100644
--- a/apps/web/public/r/styles/default/orbiting-circles.json
+++ b/apps/web/public/r/styles/default/orbiting-circles.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "orbiting-circles",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/orbiting-circles.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\nexport default function OrbitingCircles({\n   className,\n   children,\n   reverse,\n   duration = 20,\n   delay = 10,\n   radius = 50,\n   path = true,\n}: {\n   className?: string\n   children?: React.ReactNode\n   reverse?: boolean\n   duration?: number\n   delay?: number\n   radius?: number\n   path?: boolean\n}) {\n   return (\n      <>\n         {path && (\n            <svg\n               xmlns=\"http://www.w3.org/2000/svg\"\n               version=\"1.1\"\n               className=\"pointer-events-none absolute inset-0 size-full\"\n            >\n               <circle\n                  className=\"stroke-black/10 stroke-1 dark:stroke-white/10\"\n                  cx=\"50%\"\n                  cy=\"50%\"\n                  r={radius}\n                  fill=\"none\"\n                  strokeDasharray=\"4 4\"\n               />\n            </svg>\n         )}\n\n         <div\n            style={\n               {\n                  '--duration': duration,\n                  '--radius': radius,\n                  '--delay': -delay,\n               } as React.CSSProperties\n            }\n            className={ny(\n               'animate-orbit absolute flex size-full transform-gpu items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10',\n               { '[animation-direction:reverse]': reverse },\n               className,\n            )}\n         >\n            {children}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/lib/utils\"\n\nexport default function OrbitingCircles({\n   className,\n   children,\n   reverse,\n   duration = 20,\n   delay = 10,\n   radius = 50,\n   path = true,\n}: {\n   className?: string\n   children?: React.ReactNode\n   reverse?: boolean\n   duration?: number\n   delay?: number\n   radius?: number\n   path?: boolean\n}) {\n   return (\n      <>\n         {path && (\n            <svg\n               xmlns=\"http://www.w3.org/2000/svg\"\n               version=\"1.1\"\n               className=\"pointer-events-none absolute inset-0 size-full\"\n            >\n               <circle\n                  className=\"stroke-black/10 stroke-1 dark:stroke-white/10\"\n                  cx=\"50%\"\n                  cy=\"50%\"\n                  r={radius}\n                  fill=\"none\"\n                  strokeDasharray=\"4 4\"\n               />\n            </svg>\n         )}\n\n         <div\n            style={\n               {\n                  \"--duration\": duration,\n                  \"--radius\": radius,\n                  \"--delay\": -delay,\n               } as React.CSSProperties\n            }\n            className={ny(\n               \"animate-orbit absolute flex size-full transform-gpu items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10\",\n               { \"[animation-direction:reverse]\": reverse },\n               className,\n            )}\n         >\n            {children}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/pagination-demo.json b/apps/web/public/r/styles/default/pagination-demo.json
index 23995a9d..bfc7b326 100644
--- a/apps/web/public/r/styles/default/pagination-demo.json
+++ b/apps/web/public/r/styles/default/pagination-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "pagination-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "pagination"
   ],
   "files": [
     {
-      "path": "example/pagination-demo.tsx",
-      "content": "import {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n} from '~/registry/default/ui/pagination'\n\nexport default function PaginationDemo() {\n   return (\n      <Pagination>\n         <PaginationContent>\n            <PaginationItem>\n               <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\" isActive>\n                  2\n               </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationNext href=\"#\" />\n            </PaginationItem>\n         </PaginationContent>\n      </Pagination>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/pagination-demo.tsx",
+      "content": "import {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n} from \"~/registry/default/ui/pagination\"\n\nexport default function PaginationDemo() {\n   return (\n      <Pagination>\n         <PaginationContent>\n            <PaginationItem>\n               <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\" isActive>\n                  2\n               </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationNext href=\"#\" />\n            </PaginationItem>\n         </PaginationContent>\n      </Pagination>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/pagination.json b/apps/web/public/r/styles/default/pagination.json
index c0fdb96b..c017d47d 100644
--- a/apps/web/public/r/styles/default/pagination.json
+++ b/apps/web/public/r/styles/default/pagination.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "pagination",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
       "path": "ui/pagination.tsx",
-      "content": "import * as React from 'react'\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport type { ButtonProps } from '~/registry/default/ui/button'\nimport { buttonVariants } from '~/registry/default/ui/button'\n\nfunction Pagination({ className, ...props }: React.ComponentProps<'nav'>) {\n   return (\n      <nav\n         role=\"navigation\"\n         aria-label=\"pagination\"\n         className={ny('mx-auto flex w-full justify-center', className)}\n         {...props}\n      />\n   )\n}\nPagination.displayName = 'Pagination'\n\nconst PaginationContent = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<'ul'>\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      className={ny('flex flex-row items-center gap-1', className)}\n      {...props}\n   />\n))\nPaginationContent.displayName = 'PaginationContent'\n\nconst PaginationItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<'li'>\n>(({ className, ...props }, ref) => (\n   <li ref={ref} className={ny('', className)} {...props} />\n))\nPaginationItem.displayName = 'PaginationItem'\n\ntype PaginationLinkProps = {\n   isActive?: boolean\n} & Pick<ButtonProps, 'size'> &\nReact.ComponentProps<'a'>\n\nfunction PaginationLink({\n   className,\n   isActive,\n   size = 'icon',\n   ...props\n}: PaginationLinkProps) {\n   return (\n      <a\n         aria-current={isActive ? 'page' : undefined}\n         className={ny(\n            buttonVariants({\n               variant: isActive ? 'outline' : 'ghost',\n               size,\n            }),\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nPaginationLink.displayName = 'PaginationLink'\n\nfunction PaginationPrevious({\n   className,\n   ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n   return (\n      <PaginationLink\n         aria-label=\"Go to previous page\"\n         size=\"default\"\n         className={ny('gap-1 pl-2.5', className)}\n         {...props}\n      >\n         <ChevronLeft className=\"size-4\" />\n         <span>Previous</span>\n      </PaginationLink>\n   )\n}\nPaginationPrevious.displayName = 'PaginationPrevious'\n\nfunction PaginationNext({\n   className,\n   ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n   return (\n      <PaginationLink\n         aria-label=\"Go to next page\"\n         size=\"default\"\n         className={ny('gap-1 pr-2.5', className)}\n         {...props}\n      >\n         <span>Next</span>\n         <ChevronRight className=\"size-4\" />\n      </PaginationLink>\n   )\n}\nPaginationNext.displayName = 'PaginationNext'\n\nfunction PaginationEllipsis({\n   className,\n   ...props\n}: React.ComponentProps<'span'>) {\n   return (\n      <span\n         aria-hidden\n         className={ny('flex size-9 items-center justify-center', className)}\n         {...props}\n      >\n         <MoreHorizontal className=\"size-4\" />\n         <span className=\"sr-only\">More pages</span>\n      </span>\n   )\n}\nPaginationEllipsis.displayName = 'PaginationEllipsis'\n\nexport {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n}\n",
-      "type": "registry:component",
+      "content": "import { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport type { ButtonProps } from \"~/registry/default/ui/button\"\nimport { buttonVariants } from \"~/registry/default/ui/button\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n   return (\n      <nav\n         role=\"navigation\"\n         aria-label=\"pagination\"\n         className={ny(\"mx-auto flex w-full justify-center\", className)}\n         {...props}\n      />\n   )\n}\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      className={ny(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n   />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n   <li ref={ref} className={ny(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n   isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n   React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n   className,\n   isActive,\n   size = \"icon\",\n   ...props\n}: PaginationLinkProps) {\n   return (\n      <a\n         aria-current={isActive ? \"page\" : undefined}\n         className={ny(\n            buttonVariants({\n               variant: isActive ? \"outline\" : \"ghost\",\n               size,\n            }),\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nPaginationLink.displayName = \"PaginationLink\"\n\nfunction PaginationPrevious({\n   className,\n   ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n   return (\n      <PaginationLink\n         aria-label=\"Go to previous page\"\n         size=\"default\"\n         className={ny(\"gap-1 pl-2.5\", className)}\n         {...props}\n      >\n         <ChevronLeft className=\"size-4\" />\n         <span>Previous</span>\n      </PaginationLink>\n   )\n}\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nfunction PaginationNext({\n   className,\n   ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n   return (\n      <PaginationLink\n         aria-label=\"Go to next page\"\n         size=\"default\"\n         className={ny(\"gap-1 pr-2.5\", className)}\n         {...props}\n      >\n         <span>Next</span>\n         <ChevronRight className=\"size-4\" />\n      </PaginationLink>\n   )\n}\nPaginationNext.displayName = \"PaginationNext\"\n\nfunction PaginationEllipsis({\n   className,\n   ...props\n}: React.ComponentProps<\"span\">) {\n   return (\n      <span\n         aria-hidden\n         className={ny(\"flex size-9 items-center justify-center\", className)}\n         {...props}\n      >\n         <MoreHorizontal className=\"size-4\" />\n         <span className=\"sr-only\">More pages</span>\n      </span>\n   )\n}\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/particles-demo.json b/apps/web/public/r/styles/default/particles-demo.json
index 4c8fc315..f22fdc0b 100644
--- a/apps/web/public/r/styles/default/particles-demo.json
+++ b/apps/web/public/r/styles/default/particles-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "particles-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/particles-demo.tsx",
-      "content": "'use client'\n\nimport { useTheme } from 'next-themes'\nimport { useEffect, useState } from 'react'\nimport Particles from '~/registry/miami/ui/particles'\n\nfunction ParticlesDemo() {\n   const { theme } = useTheme()\n   const [color, setColor] = useState('#ffffff')\n\n   useEffect(() => {\n      setColor(theme === 'dark' ? '#ffffff' : '#000000')\n   }, [theme])\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Particles\n         </span>\n         <Particles\n            className=\"absolute inset-0\"\n            quantity={100}\n            ease={80}\n            color={color}\n            refresh\n         />\n      </div>\n   )\n}\n\nexport default ParticlesDemo\n",
-      "type": "registry:component",
+      "path": "examples/particles-demo.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { useEffect, useState } from \"react\"\nimport Particles from \"~/registry/miami/ui/particles\"\n\nfunction ParticlesDemo() {\n   const { theme } = useTheme()\n   const [color, setColor] = useState(\"#ffffff\")\n\n   useEffect(() => {\n      setColor(theme === \"dark\" ? \"#ffffff\" : \"#000000\")\n   }, [theme])\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Particles\n         </span>\n         <Particles\n            className=\"absolute inset-0\"\n            quantity={100}\n            ease={80}\n            color={color}\n            refresh\n         />\n      </div>\n   )\n}\n\nexport default ParticlesDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/particles.json b/apps/web/public/r/styles/default/particles.json
index 45ab9936..2ed20029 100644
--- a/apps/web/public/r/styles/default/particles.json
+++ b/apps/web/public/r/styles/default/particles.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "particles",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/particles.tsx",
-      "content": "'use client'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\ninterface MousePosition {\n   x: number\n   y: number\n}\n\nfunction MousePosition(): MousePosition {\n   const [mousePosition, setMousePosition] = useState<MousePosition>({\n      x: 0,\n      y: 0,\n   })\n\n   useEffect(() => {\n      const handleMouseMove = (event: MouseEvent) => {\n         setMousePosition({ x: event.clientX, y: event.clientY })\n      }\n\n      window.addEventListener('mousemove', handleMouseMove)\n\n      return () => {\n         window.removeEventListener('mousemove', handleMouseMove)\n      }\n   }, [])\n\n   return mousePosition\n}\n\ninterface ParticlesProps {\n   className?: string\n   quantity?: number\n   staticity?: number\n   ease?: number\n   size?: number\n   refresh?: boolean\n   color?: string\n   vx?: number\n   vy?: number\n}\nfunction hexToRgb(hex: string): number[] {\n   hex = hex.replace('#', '')\n\n   // Unterstützung für dreistellige Hex-Farbcodes\n   if (hex.length === 3) {\n      hex = hex\n         .split('')\n         .map(char => char + char)\n         .join('')\n   }\n\n   const hexInt = Number.parseInt(hex, 16)\n   const red = (hexInt >> 16) & 255\n   const green = (hexInt >> 8) & 255\n   const blue = hexInt & 255\n   return [red, green, blue]\n}\n\nconst Particles: React.FC<ParticlesProps> = ({\n   className = '',\n   quantity = 100,\n   staticity = 50,\n   ease = 50,\n   size = 0.4,\n   refresh = false,\n   color = '#ffffff',\n   vx = 0,\n   vy = 0,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const canvasContainerRef = useRef<HTMLDivElement>(null)\n   const context = useRef<CanvasRenderingContext2D | null>(null)\n   const circles = useRef<any[]>([])\n   const mousePosition = MousePosition()\n   const mouse = useRef<{ x: number, y: number }>({ x: 0, y: 0 })\n   const canvasSize = useRef<{ w: number, h: number }>({ w: 0, h: 0 })\n   const dpr = typeof window !== 'undefined' ? window.devicePixelRatio : 1\n\n   useEffect(() => {\n      if (canvasRef.current)\n         context.current = canvasRef.current.getContext('2d')\n\n      initCanvas()\n      animate()\n      window.addEventListener('resize', initCanvas)\n\n      return () => {\n         window.removeEventListener('resize', initCanvas)\n      }\n   }, [color])\n\n   useEffect(() => {\n      onMouseMove()\n   }, [mousePosition.x, mousePosition.y])\n\n   useEffect(() => {\n      initCanvas()\n   }, [refresh])\n\n   const initCanvas = () => {\n      resizeCanvas()\n      drawParticles()\n   }\n\n   const onMouseMove = () => {\n      if (canvasRef.current) {\n         const rect = canvasRef.current.getBoundingClientRect()\n         const { w, h } = canvasSize.current\n         const x = mousePosition.x - rect.left - w / 2\n         const y = mousePosition.y - rect.top - h / 2\n         const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2\n         if (inside) {\n            mouse.current.x = x\n            mouse.current.y = y\n         }\n      }\n   }\n\n   interface Circle {\n      x: number\n      y: number\n      translateX: number\n      translateY: number\n      size: number\n      alpha: number\n      targetAlpha: number\n      dx: number\n      dy: number\n      magnetism: number\n   }\n\n   const resizeCanvas = () => {\n      if (canvasContainerRef.current && canvasRef.current && context.current) {\n         circles.current.length = 0\n         canvasSize.current.w = canvasContainerRef.current.offsetWidth\n         canvasSize.current.h = canvasContainerRef.current.offsetHeight\n         canvasRef.current.width = canvasSize.current.w * dpr\n         canvasRef.current.height = canvasSize.current.h * dpr\n         canvasRef.current.style.width = `${canvasSize.current.w}px`\n         canvasRef.current.style.height = `${canvasSize.current.h}px`\n         context.current.scale(dpr, dpr)\n      }\n   }\n\n   const circleParams = (): Circle => {\n      const x = Math.floor(Math.random() * canvasSize.current.w)\n      const y = Math.floor(Math.random() * canvasSize.current.h)\n      const translateX = 0\n      const translateY = 0\n      const pSize = Math.floor(Math.random() * 2) + size\n      const alpha = 0\n      const targetAlpha = Number.parseFloat(\n         (Math.random() * 0.6 + 0.1).toFixed(1),\n      )\n      const dx = (Math.random() - 0.5) * 0.1\n      const dy = (Math.random() - 0.5) * 0.1\n      const magnetism = 0.1 + Math.random() * 4\n      return {\n         x,\n         y,\n         translateX,\n         translateY,\n         size: pSize,\n         alpha,\n         targetAlpha,\n         dx,\n         dy,\n         magnetism,\n      }\n   }\n\n   const rgb = hexToRgb(color)\n\n   const drawCircle = (circle: Circle, update = false) => {\n      if (context.current) {\n         const { x, y, translateX, translateY, size, alpha } = circle\n         context.current.translate(translateX, translateY)\n         context.current.beginPath()\n         context.current.arc(x, y, size, 0, 2 * Math.PI)\n         context.current.fillStyle = `rgba(${rgb.join(', ')}, ${alpha})`\n         context.current.fill()\n         context.current.setTransform(dpr, 0, 0, dpr, 0, 0)\n\n         if (!update)\n            circles.current.push(circle)\n      }\n   }\n\n   const clearContext = () => {\n      if (context.current) {\n         context.current.clearRect(\n            0,\n            0,\n            canvasSize.current.w,\n            canvasSize.current.h,\n         )\n      }\n   }\n\n   const drawParticles = () => {\n      clearContext()\n      const particleCount = quantity\n      for (let i = 0; i < particleCount; i++) {\n         const circle = circleParams()\n         drawCircle(circle)\n      }\n   }\n\n   const remapValue = (\n      value: number,\n      start1: number,\n      end1: number,\n      start2: number,\n      end2: number,\n   ): number => {\n      const remapped\n      = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2\n      return remapped > 0 ? remapped : 0\n   }\n\n   const animate = () => {\n      clearContext()\n      circles.current.forEach((circle: Circle, i: number) => {\n      // Handle the alpha value\n         const edge = [\n            circle.x + circle.translateX - circle.size, // distance from left edge\n            canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge\n            circle.y + circle.translateY - circle.size, // distance from top edge\n            canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge\n         ]\n         const closestEdge = edge.reduce((a, b) => Math.min(a, b))\n         const remapClosestEdge = Number.parseFloat(\n            remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),\n         )\n         if (remapClosestEdge > 1) {\n            circle.alpha += 0.02\n            if (circle.alpha > circle.targetAlpha)\n               circle.alpha = circle.targetAlpha\n         }\n         else {\n            circle.alpha = circle.targetAlpha * remapClosestEdge\n         }\n         circle.x += circle.dx + vx\n         circle.y += circle.dy + vy\n         circle.translateX\n        += (mouse.current.x / (staticity / circle.magnetism) - circle.translateX)\n        / ease\n         circle.translateY\n        += (mouse.current.y / (staticity / circle.magnetism) - circle.translateY)\n        / ease\n\n         drawCircle(circle, true)\n\n         // circle gets out of the canvas\n         if (\n            circle.x < -circle.size\n            || circle.x > canvasSize.current.w + circle.size\n            || circle.y < -circle.size\n            || circle.y > canvasSize.current.h + circle.size\n         ) {\n            // remove the circle from the array\n            circles.current.splice(i, 1)\n            // create a new circle\n            const newCircle = circleParams()\n            drawCircle(newCircle)\n            // update the circle position\n         }\n      })\n      window.requestAnimationFrame(animate)\n   }\n\n   return (\n      <div className={className} ref={canvasContainerRef} aria-hidden=\"true\">\n         <canvas ref={canvasRef} className=\"size-full\" />\n      </div>\n   )\n}\n\nexport default Particles\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\n\ninterface MousePosition {\n   x: number\n   y: number\n}\n\nfunction MousePosition(): MousePosition {\n   const [mousePosition, setMousePosition] = useState<MousePosition>({\n      x: 0,\n      y: 0,\n   })\n\n   useEffect(() => {\n      const handleMouseMove = (event: MouseEvent) => {\n         setMousePosition({ x: event.clientX, y: event.clientY })\n      }\n\n      window.addEventListener(\"mousemove\", handleMouseMove)\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMouseMove)\n      }\n   }, [])\n\n   return mousePosition\n}\n\ninterface ParticlesProps {\n   className?: string\n   quantity?: number\n   staticity?: number\n   ease?: number\n   size?: number\n   refresh?: boolean\n   color?: string\n   vx?: number\n   vy?: number\n}\nfunction hexToRgb(hex: string): number[] {\n   hex = hex.replace(\"#\", \"\")\n\n   // Unterstützung für dreistellige Hex-Farbcodes\n   if (hex.length === 3) {\n      hex = hex\n         .split(\"\")\n         .map((char) => char + char)\n         .join(\"\")\n   }\n\n   const hexInt = Number.parseInt(hex, 16)\n   const red = (hexInt >> 16) & 255\n   const green = (hexInt >> 8) & 255\n   const blue = hexInt & 255\n   return [red, green, blue]\n}\n\nconst Particles: React.FC<ParticlesProps> = ({\n   className = \"\",\n   quantity = 100,\n   staticity = 50,\n   ease = 50,\n   size = 0.4,\n   refresh = false,\n   color = \"#ffffff\",\n   vx = 0,\n   vy = 0,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const canvasContainerRef = useRef<HTMLDivElement>(null)\n   const context = useRef<CanvasRenderingContext2D | null>(null)\n   const circles = useRef<any[]>([])\n   const mousePosition = MousePosition()\n   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })\n   const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })\n   const dpr = typeof window !== \"undefined\" ? window.devicePixelRatio : 1\n\n   useEffect(() => {\n      if (canvasRef.current)\n         context.current = canvasRef.current.getContext(\"2d\")\n\n      initCanvas()\n      animate()\n      window.addEventListener(\"resize\", initCanvas)\n\n      return () => {\n         window.removeEventListener(\"resize\", initCanvas)\n      }\n   }, [color])\n\n   useEffect(() => {\n      onMouseMove()\n   }, [mousePosition.x, mousePosition.y])\n\n   useEffect(() => {\n      initCanvas()\n   }, [refresh])\n\n   const initCanvas = () => {\n      resizeCanvas()\n      drawParticles()\n   }\n\n   const onMouseMove = () => {\n      if (canvasRef.current) {\n         const rect = canvasRef.current.getBoundingClientRect()\n         const { w, h } = canvasSize.current\n         const x = mousePosition.x - rect.left - w / 2\n         const y = mousePosition.y - rect.top - h / 2\n         const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2\n         if (inside) {\n            mouse.current.x = x\n            mouse.current.y = y\n         }\n      }\n   }\n\n   interface Circle {\n      x: number\n      y: number\n      translateX: number\n      translateY: number\n      size: number\n      alpha: number\n      targetAlpha: number\n      dx: number\n      dy: number\n      magnetism: number\n   }\n\n   const resizeCanvas = () => {\n      if (canvasContainerRef.current && canvasRef.current && context.current) {\n         circles.current.length = 0\n         canvasSize.current.w = canvasContainerRef.current.offsetWidth\n         canvasSize.current.h = canvasContainerRef.current.offsetHeight\n         canvasRef.current.width = canvasSize.current.w * dpr\n         canvasRef.current.height = canvasSize.current.h * dpr\n         canvasRef.current.style.width = `${canvasSize.current.w}px`\n         canvasRef.current.style.height = `${canvasSize.current.h}px`\n         context.current.scale(dpr, dpr)\n      }\n   }\n\n   const circleParams = (): Circle => {\n      const x = Math.floor(Math.random() * canvasSize.current.w)\n      const y = Math.floor(Math.random() * canvasSize.current.h)\n      const translateX = 0\n      const translateY = 0\n      const pSize = Math.floor(Math.random() * 2) + size\n      const alpha = 0\n      const targetAlpha = Number.parseFloat(\n         (Math.random() * 0.6 + 0.1).toFixed(1),\n      )\n      const dx = (Math.random() - 0.5) * 0.1\n      const dy = (Math.random() - 0.5) * 0.1\n      const magnetism = 0.1 + Math.random() * 4\n      return {\n         x,\n         y,\n         translateX,\n         translateY,\n         size: pSize,\n         alpha,\n         targetAlpha,\n         dx,\n         dy,\n         magnetism,\n      }\n   }\n\n   const rgb = hexToRgb(color)\n\n   const drawCircle = (circle: Circle, update = false) => {\n      if (context.current) {\n         const { x, y, translateX, translateY, size, alpha } = circle\n         context.current.translate(translateX, translateY)\n         context.current.beginPath()\n         context.current.arc(x, y, size, 0, 2 * Math.PI)\n         context.current.fillStyle = `rgba(${rgb.join(\", \")}, ${alpha})`\n         context.current.fill()\n         context.current.setTransform(dpr, 0, 0, dpr, 0, 0)\n\n         if (!update) circles.current.push(circle)\n      }\n   }\n\n   const clearContext = () => {\n      if (context.current) {\n         context.current.clearRect(\n            0,\n            0,\n            canvasSize.current.w,\n            canvasSize.current.h,\n         )\n      }\n   }\n\n   const drawParticles = () => {\n      clearContext()\n      const particleCount = quantity\n      for (let i = 0; i < particleCount; i++) {\n         const circle = circleParams()\n         drawCircle(circle)\n      }\n   }\n\n   const remapValue = (\n      value: number,\n      start1: number,\n      end1: number,\n      start2: number,\n      end2: number,\n   ): number => {\n      const remapped =\n         ((value - start1) * (end2 - start2)) / (end1 - start1) + start2\n      return remapped > 0 ? remapped : 0\n   }\n\n   const animate = () => {\n      clearContext()\n      circles.current.forEach((circle: Circle, i: number) => {\n         // Handle the alpha value\n         const edge = [\n            circle.x + circle.translateX - circle.size, // distance from left edge\n            canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge\n            circle.y + circle.translateY - circle.size, // distance from top edge\n            canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge\n         ]\n         const closestEdge = edge.reduce((a, b) => Math.min(a, b))\n         const remapClosestEdge = Number.parseFloat(\n            remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),\n         )\n         if (remapClosestEdge > 1) {\n            circle.alpha += 0.02\n            if (circle.alpha > circle.targetAlpha)\n               circle.alpha = circle.targetAlpha\n         } else {\n            circle.alpha = circle.targetAlpha * remapClosestEdge\n         }\n         circle.x += circle.dx + vx\n         circle.y += circle.dy + vy\n         circle.translateX +=\n            (mouse.current.x / (staticity / circle.magnetism) -\n               circle.translateX) /\n            ease\n         circle.translateY +=\n            (mouse.current.y / (staticity / circle.magnetism) -\n               circle.translateY) /\n            ease\n\n         drawCircle(circle, true)\n\n         // circle gets out of the canvas\n         if (\n            circle.x < -circle.size ||\n            circle.x > canvasSize.current.w + circle.size ||\n            circle.y < -circle.size ||\n            circle.y > canvasSize.current.h + circle.size\n         ) {\n            // remove the circle from the array\n            circles.current.splice(i, 1)\n            // create a new circle\n            const newCircle = circleParams()\n            drawCircle(newCircle)\n            // update the circle position\n         }\n      })\n      window.requestAnimationFrame(animate)\n   }\n\n   return (\n      <div className={className} ref={canvasContainerRef} aria-hidden=\"true\">\n         <canvas ref={canvasRef} className=\"size-full\" />\n      </div>\n   )\n}\n\nexport default Particles\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/popover-demo.json b/apps/web/public/r/styles/default/popover-demo.json
index 7b3e86b4..7b1c67d4 100644
--- a/apps/web/public/r/styles/default/popover-demo.json
+++ b/apps/web/public/r/styles/default/popover-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "popover-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "popover"
   ],
   "files": [
     {
-      "path": "example/popover-demo.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/default/ui/popover'\n\nexport default function PopoverDemo() {\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button variant=\"outline\">Open popover</Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-80\">\n            <div className=\"grid gap-4\">\n               <div className=\"space-y-2\">\n                  <h4 className=\"font-medium leading-none\">Dimensions</h4>\n                  <p className=\"text-muted-foreground text-sm\">\n                     Set the dimensions for the layer.\n                  </p>\n               </div>\n               <div className=\"grid gap-2\">\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"width\">Width</Label>\n                     <Input\n                        id=\"width\"\n                        defaultValue=\"100%\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxWidth\">Max. width</Label>\n                     <Input\n                        id=\"maxWidth\"\n                        defaultValue=\"300px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"height\">Height</Label>\n                     <Input\n                        id=\"height\"\n                        defaultValue=\"25px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxHeight\">Max. height</Label>\n                     <Input\n                        id=\"maxHeight\"\n                        defaultValue=\"none\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n               </div>\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/popover-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\n\nexport default function PopoverDemo() {\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button variant=\"outline\">Open popover</Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-80\">\n            <div className=\"grid gap-4\">\n               <div className=\"space-y-2\">\n                  <h4 className=\"font-medium leading-none\">Dimensions</h4>\n                  <p className=\"text-muted-foreground text-sm\">\n                     Set the dimensions for the layer.\n                  </p>\n               </div>\n               <div className=\"grid gap-2\">\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"width\">Width</Label>\n                     <Input\n                        id=\"width\"\n                        defaultValue=\"100%\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxWidth\">Max. width</Label>\n                     <Input\n                        id=\"maxWidth\"\n                        defaultValue=\"300px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"height\">Height</Label>\n                     <Input\n                        id=\"height\"\n                        defaultValue=\"25px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxHeight\">Max. height</Label>\n                     <Input\n                        id=\"maxHeight\"\n                        defaultValue=\"none\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n               </div>\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/popover.json b/apps/web/public/r/styles/default/popover.json
index fa7478a2..9878f5e5 100644
--- a/apps/web/public/r/styles/default/popover.json
+++ b/apps/web/public/r/styles/default/popover.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "popover",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-popover"
   ],
   "files": [
     {
       "path": "ui/popover.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\n\nimport { ny } from '~/lib/utils'\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor // Neues Element hinzugefügt\n\nconst PopoverContent = React.forwardRef<\n   React.ElementRef<typeof PopoverPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (\n   <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n         ref={ref}\n         align={align}\n         sideOffset={sideOffset}\n         className={ny(\n            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',\n            className,\n         )}\n         {...props}\n      />\n   </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } // Geänderter Export\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor // Neues Element hinzugefügt\n\nconst PopoverContent = React.forwardRef<\n   React.ElementRef<typeof PopoverPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n   <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n         ref={ref}\n         align={align}\n         sideOffset={sideOffset}\n         className={ny(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none\",\n            className,\n         )}\n         {...props}\n      />\n   </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } // Geänderter Export\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/progress-demo.json b/apps/web/public/r/styles/default/progress-demo.json
index 18fc2d4f..ece4c1d0 100644
--- a/apps/web/public/r/styles/default/progress-demo.json
+++ b/apps/web/public/r/styles/default/progress-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "progress-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "progress"
   ],
   "files": [
     {
-      "path": "example/progress-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Progress } from '~/registry/default/ui/progress'\n\nexport default function ProgressDemo() {\n   const [progress, setProgress] = React.useState(13)\n\n   React.useEffect(() => {\n      const timer = setTimeout(() => setProgress(66), 500)\n      return () => clearTimeout(timer)\n   }, [])\n\n   return <Progress value={progress} className=\"w-3/5\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"~/registry/default/ui/progress\"\n\nexport default function ProgressDemo() {\n   const [progress, setProgress] = React.useState(13)\n\n   React.useEffect(() => {\n      const timer = setTimeout(() => setProgress(66), 500)\n      return () => clearTimeout(timer)\n   }, [])\n\n   return <Progress value={progress} className=\"w-3/5\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/progress.json b/apps/web/public/r/styles/default/progress.json
index c9219440..e5755679 100644
--- a/apps/web/public/r/styles/default/progress.json
+++ b/apps/web/public/r/styles/default/progress.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "progress",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-progress"
   ],
   "files": [
     {
       "path": "ui/progress.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as ProgressPrimitive from '@radix-ui/react-progress'\n\nimport { ny } from '~/lib/utils'\n\nconst Progress = React.forwardRef<\n   React.ElementRef<typeof ProgressPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <ProgressPrimitive.Root\n      ref={ref}\n      className={ny(\n         'bg-secondary relative h-4 w-full overflow-hidden rounded-full',\n         className,\n      )}\n      {...props}\n   >\n      <ProgressPrimitive.Indicator\n         className=\"bg-primary size-full flex-1 transition-all\"\n         style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}\n      />\n   </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Progress = React.forwardRef<\n   React.ElementRef<typeof ProgressPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <ProgressPrimitive.Root\n      ref={ref}\n      className={ny(\n         \"bg-secondary relative h-4 w-full overflow-hidden rounded-full\",\n         className,\n      )}\n      {...props}\n   >\n      <ProgressPrimitive.Indicator\n         className=\"bg-primary size-full flex-1 transition-all\"\n         style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}\n      />\n   </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/pulsating-button-demo.json b/apps/web/public/r/styles/default/pulsating-button-demo.json
index 6d773ebf..b5e75987 100644
--- a/apps/web/public/r/styles/default/pulsating-button-demo.json
+++ b/apps/web/public/r/styles/default/pulsating-button-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "pulsating-button-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/pulsating-button-demo.tsx",
-      "content": "import { PulsatingButton } from '~/registry/default/ui/pulsating-button'\n\nfunction PulsatingButtonDemo() {\n   return (\n      <PulsatingButton\n         text=\"Join Affiliate Program\"\n         pulseColor=\"150, 0, 255\"\n         backgroundColor=\"#9945FF\"\n         textColor=\"#ffffff\"\n         animationDuration=\"1.5s\"\n         buttonWidth=\"200px\"\n         buttonHeight=\"50px\"\n      />\n   )\n}\n\nexport default PulsatingButtonDemo\n",
-      "type": "registry:component",
+      "path": "examples/pulsating-button-demo.tsx",
+      "content": "import { PulsatingButton } from \"~/registry/default/ui/pulsating-button\"\n\nfunction PulsatingButtonDemo() {\n   return (\n      <PulsatingButton\n         text=\"Join Affiliate Program\"\n         pulseColor=\"150, 0, 255\"\n         backgroundColor=\"#9945FF\"\n         textColor=\"#ffffff\"\n         animationDuration=\"1.5s\"\n         buttonWidth=\"200px\"\n         buttonHeight=\"50px\"\n      />\n   )\n}\n\nexport default PulsatingButtonDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/pulsating-button.json b/apps/web/public/r/styles/default/pulsating-button.json
index e8c12edb..d11fa334 100644
--- a/apps/web/public/r/styles/default/pulsating-button.json
+++ b/apps/web/public/r/styles/default/pulsating-button.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "pulsating-button",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/pulsating-button.tsx",
-      "content": "'use client'\n\nimport React from 'react'\n\ninterface PulsatingButtonProps {\n   text: string\n   pulseColor: string\n   backgroundColor: string\n   textColor: string\n   animationDuration: string\n   buttonWidth: string\n   buttonHeight: string\n}\n\nexport const PulsatingButton: React.FC<PulsatingButtonProps> = ({\n   text,\n   pulseColor,\n   backgroundColor,\n   textColor,\n   animationDuration,\n   buttonWidth,\n   buttonHeight,\n}) => {\n   const pulseKeyframes = {\n      '--tw-pulse-color': pulseColor,\n      'animation': `pulse ${animationDuration} linear infinite`,\n   }\n\n   return (\n      <div\n         className=\"flex items-center justify-center\"\n      >\n         <button\n            className=\"relative block flex cursor-pointer items-center justify-center text-center\"\n            style={{\n               color: textColor,\n               backgroundColor,\n               width: buttonWidth,\n               height: buttonHeight,\n               borderRadius: '12px',\n               ...pulseKeyframes,\n            }}\n         >\n            <div>{text}</div>\n            <style jsx>\n               {`\n          @keyframes pulse {\n            0% {\n              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);\n            }\n            50% {\n              box-shadow: 0 0 0 8px rgba(var(--tw-pulse-color), 0.5);\n            }\n            100% {\n              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);\n            }\n          }\n          button::before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            height: 100%;\n            border-radius: 20px;\n            background: inherit;\n            animation: inherit;\n            transform: translate(-50%, -50%);\n            z-index: -1;\n          }\n        `}\n            </style>\n         </button>\n      </div>\n   )\n}\n\nexport default PulsatingButton\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type React from \"react\"\n\ninterface PulsatingButtonProps {\n   text: string\n   pulseColor: string\n   backgroundColor: string\n   textColor: string\n   animationDuration: string\n   buttonWidth: string\n   buttonHeight: string\n}\n\nexport const PulsatingButton: React.FC<PulsatingButtonProps> = ({\n   text,\n   pulseColor,\n   backgroundColor,\n   textColor,\n   animationDuration,\n   buttonWidth,\n   buttonHeight,\n}) => {\n   const pulseKeyframes = {\n      \"--tw-pulse-color\": pulseColor,\n      animation: `pulse ${animationDuration} linear infinite`,\n   }\n\n   return (\n      <div className=\"flex items-center justify-center\">\n         <button\n            className=\"relative block flex cursor-pointer items-center justify-center text-center\"\n            style={{\n               color: textColor,\n               backgroundColor,\n               width: buttonWidth,\n               height: buttonHeight,\n               borderRadius: \"12px\",\n               ...pulseKeyframes,\n            }}\n         >\n            <div>{text}</div>\n            <style jsx>\n               {`\n          @keyframes pulse {\n            0% {\n              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);\n            }\n            50% {\n              box-shadow: 0 0 0 8px rgba(var(--tw-pulse-color), 0.5);\n            }\n            100% {\n              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);\n            }\n          }\n          button::before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            height: 100%;\n            border-radius: 20px;\n            background: inherit;\n            animation: inherit;\n            transform: translate(-50%, -50%);\n            z-index: -1;\n          }\n        `}\n            </style>\n         </button>\n      </div>\n   )\n}\n\nexport default PulsatingButton\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/radio-group-demo.json b/apps/web/public/r/styles/default/radio-group-demo.json
index 29264e92..3f75bcf6 100644
--- a/apps/web/public/r/styles/default/radio-group-demo.json
+++ b/apps/web/public/r/styles/default/radio-group-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "radio-group-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "radio-group"
   ],
   "files": [
     {
-      "path": "example/radio-group-demo.tsx",
-      "content": "import { Label } from '~/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'\n\nexport default function RadioGroupDemo() {\n   return (\n      <RadioGroup defaultValue=\"comfortable\">\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"default\" id=\"r1\" />\n            <Label htmlFor=\"r1\">Default</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n            <Label htmlFor=\"r2\">Comfortable</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"compact\" id=\"r3\" />\n            <Label htmlFor=\"r3\">Compact</Label>\n         </div>\n      </RadioGroup>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/radio-group-demo.tsx",
+      "content": "import { Label } from \"~/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"~/registry/default/ui/radio-group\"\n\nexport default function RadioGroupDemo() {\n   return (\n      <RadioGroup defaultValue=\"comfortable\">\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"default\" id=\"r1\" />\n            <Label htmlFor=\"r1\">Default</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n            <Label htmlFor=\"r2\">Comfortable</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"compact\" id=\"r3\" />\n            <Label htmlFor=\"r3\">Compact</Label>\n         </div>\n      </RadioGroup>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/radio-group-form.json b/apps/web/public/r/styles/default/radio-group-form.json
index d4a87cbb..5d859361 100644
--- a/apps/web/public/r/styles/default/radio-group-form.json
+++ b/apps/web/public/r/styles/default/radio-group-form.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "radio-group-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "radio-group",
     "form"
   ],
   "files": [
     {
-      "path": "example/radio-group-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst FormSchema = z.object({\n   type: z.enum(['all', 'mentions', 'none'], {\n      required_error: 'You need to select a notification type.',\n   }),\n})\n\nexport default function RadioGroupForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"type\"\n               render={({ field }) => (\n                  <FormItem className=\"space-y-3\">\n                     <FormLabel>Notify me about...</FormLabel>\n                     <FormControl>\n                        <RadioGroup\n                           onValueChange={field.onChange}\n                           defaultValue={field.value}\n                           className=\"flex flex-col space-y-1\"\n                        >\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"all\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 All new messages\n                              </FormLabel>\n                           </FormItem>\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"mentions\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 Direct messages and mentions\n                              </FormLabel>\n                           </FormItem>\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"none\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">Nothing</FormLabel>\n                           </FormItem>\n                        </RadioGroup>\n                     </FormControl>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/radio-group-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport { RadioGroup, RadioGroupItem } from \"~/registry/default/ui/radio-group\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst FormSchema = z.object({\n   type: z.enum([\"all\", \"mentions\", \"none\"], {\n      required_error: \"You need to select a notification type.\",\n   }),\n})\n\nexport default function RadioGroupForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"type\"\n               render={({ field }) => (\n                  <FormItem className=\"space-y-3\">\n                     <FormLabel>Notify me about...</FormLabel>\n                     <FormControl>\n                        <RadioGroup\n                           onValueChange={field.onChange}\n                           defaultValue={field.value}\n                           className=\"flex flex-col space-y-1\"\n                        >\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"all\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 All new messages\n                              </FormLabel>\n                           </FormItem>\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"mentions\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 Direct messages and mentions\n                              </FormLabel>\n                           </FormItem>\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"none\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 Nothing\n                              </FormLabel>\n                           </FormItem>\n                        </RadioGroup>\n                     </FormControl>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/radio-group.json b/apps/web/public/r/styles/default/radio-group.json
index 820cc893..2dd265e8 100644
--- a/apps/web/public/r/styles/default/radio-group.json
+++ b/apps/web/public/r/styles/default/radio-group.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "radio-group",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-radio-group"
   ],
   "files": [
     {
       "path": "ui/radio-group.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { Circle } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst RadioGroup = React.forwardRef<\n   React.ElementRef<typeof RadioGroupPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n   return (\n      <RadioGroupPrimitive.Root\n         className={ny('grid gap-2', className)}\n         {...props}\n         ref={ref}\n      />\n   )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n   React.ElementRef<typeof RadioGroupPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n   return (\n      <RadioGroupPrimitive.Item\n         ref={ref}\n         className={ny(\n            'border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n            className,\n         )}\n         {...props}\n      >\n         <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n            <Circle className=\"size-2.5 fill-current text-current\" />\n         </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n   )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n   React.ElementRef<typeof RadioGroupPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n   return (\n      <RadioGroupPrimitive.Root\n         className={ny(\"grid gap-2\", className)}\n         {...props}\n         ref={ref}\n      />\n   )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n   React.ElementRef<typeof RadioGroupPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n   return (\n      <RadioGroupPrimitive.Item\n         ref={ref}\n         className={ny(\n            \"border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n            className,\n         )}\n         {...props}\n      >\n         <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n            <Circle className=\"size-2.5 fill-current text-current\" />\n         </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n   )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/rainbow-button-demo.json b/apps/web/public/r/styles/default/rainbow-button-demo.json
index 9ef68495..dbed85e5 100644
--- a/apps/web/public/r/styles/default/rainbow-button-demo.json
+++ b/apps/web/public/r/styles/default/rainbow-button-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "rainbow-button-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/rainbow-button-demo.tsx",
-      "content": "import { RainbowButton } from '~/registry/default/ui/rainbow-button'\n\nexport default function RainbowButtonDemo() {\n   return <RainbowButton>Get Unlimited Access</RainbowButton>\n}\n",
-      "type": "registry:component",
+      "path": "examples/rainbow-button-demo.tsx",
+      "content": "import { RainbowButton } from \"~/registry/default/ui/rainbow-button\"\n\nexport default function RainbowButtonDemo() {\n   return <RainbowButton>Get Unlimited Access</RainbowButton>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/rainbow-button.json b/apps/web/public/r/styles/default/rainbow-button.json
index 4a61d156..80a21bbc 100644
--- a/apps/web/public/r/styles/default/rainbow-button.json
+++ b/apps/web/public/r/styles/default/rainbow-button.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "rainbow-button",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/rainbow-button.tsx",
-      "content": "import React from 'react'\n\nimport { ny } from '~/lib/utils'\n\ninterface RainbowButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport function RainbowButton({ children, ...props }: RainbowButtonProps) {\n   return (\n      <button\n         className={ny(\n            'focus-visible:ring-ring animate-rainbow text-primary-foreground group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',\n\n            // before styles\n            'before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]',\n\n            // light mode colors\n            'bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',\n\n            // dark mode colors\n            ' dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',\n         )}\n         {...props}\n      >\n         {children}\n      </button>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import type React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ninterface RainbowButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport function RainbowButton({ children, ...props }: RainbowButtonProps) {\n   return (\n      <button\n         className={ny(\n            \"focus-visible:ring-ring animate-rainbow text-primary-foreground group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50\",\n\n            // before styles\n            \"before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]\",\n\n            // light mode colors\n            \"bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]\",\n\n            // dark mode colors\n            \" dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]\",\n         )}\n         {...props}\n      >\n         {children}\n      </button>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/resizable-demo-with-handle.json b/apps/web/public/r/styles/default/resizable-demo-with-handle.json
index a121092e..86528a16 100644
--- a/apps/web/public/r/styles/default/resizable-demo-with-handle.json
+++ b/apps/web/public/r/styles/default/resizable-demo-with-handle.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "resizable-demo-with-handle",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "resizable"
   ],
   "files": [
     {
-      "path": "example/resizable-demo-with-handle.tsx",
-      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from '~/registry/default/ui/resizable'\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={50}>\n            <div className=\"flex h-[200px] items-center justify-center p-6\">\n               <span className=\"font-semibold\">One</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={50}>\n            <ResizablePanelGroup direction=\"vertical\">\n               <ResizablePanel defaultSize={25}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Two</span>\n                  </div>\n               </ResizablePanel>\n               <ResizableHandle withHandle />\n               <ResizablePanel defaultSize={75}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Three</span>\n                  </div>\n               </ResizablePanel>\n            </ResizablePanelGroup>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/resizable-demo-with-handle.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"~/registry/default/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={50}>\n            <div className=\"flex h-[200px] items-center justify-center p-6\">\n               <span className=\"font-semibold\">One</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={50}>\n            <ResizablePanelGroup direction=\"vertical\">\n               <ResizablePanel defaultSize={25}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Two</span>\n                  </div>\n               </ResizablePanel>\n               <ResizableHandle withHandle />\n               <ResizablePanel defaultSize={75}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Three</span>\n                  </div>\n               </ResizablePanel>\n            </ResizablePanelGroup>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/resizable-demo.json b/apps/web/public/r/styles/default/resizable-demo.json
index e8a79fb6..b9048003 100644
--- a/apps/web/public/r/styles/default/resizable-demo.json
+++ b/apps/web/public/r/styles/default/resizable-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "resizable-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "resizable"
   ],
   "files": [
     {
-      "path": "example/resizable-demo.tsx",
-      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from '~/registry/default/ui/resizable'\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={50}>\n            <div className=\"flex h-[200px] items-center justify-center p-6\">\n               <span className=\"font-semibold\">One</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle />\n         <ResizablePanel defaultSize={50}>\n            <ResizablePanelGroup direction=\"vertical\">\n               <ResizablePanel defaultSize={25}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Two</span>\n                  </div>\n               </ResizablePanel>\n               <ResizableHandle />\n               <ResizablePanel defaultSize={75}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Three</span>\n                  </div>\n               </ResizablePanel>\n            </ResizablePanelGroup>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/resizable-demo.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"~/registry/default/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={50}>\n            <div className=\"flex h-[200px] items-center justify-center p-6\">\n               <span className=\"font-semibold\">One</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle />\n         <ResizablePanel defaultSize={50}>\n            <ResizablePanelGroup direction=\"vertical\">\n               <ResizablePanel defaultSize={25}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Two</span>\n                  </div>\n               </ResizablePanel>\n               <ResizableHandle />\n               <ResizablePanel defaultSize={75}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Three</span>\n                  </div>\n               </ResizablePanel>\n            </ResizablePanelGroup>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/resizable-handle.json b/apps/web/public/r/styles/default/resizable-handle.json
index 5c05d026..a659b508 100644
--- a/apps/web/public/r/styles/default/resizable-handle.json
+++ b/apps/web/public/r/styles/default/resizable-handle.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "resizable-handle",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "resizable"
   ],
   "files": [
     {
-      "path": "example/resizable-handle.tsx",
-      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from '~/registry/default/ui/resizable'\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"min-h-[200px] max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Sidebar</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/resizable-handle.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"~/registry/default/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"min-h-[200px] max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Sidebar</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/resizable-vertical.json b/apps/web/public/r/styles/default/resizable-vertical.json
index 3d1f2083..11055e53 100644
--- a/apps/web/public/r/styles/default/resizable-vertical.json
+++ b/apps/web/public/r/styles/default/resizable-vertical.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "resizable-vertical",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "resizable"
   ],
   "files": [
     {
-      "path": "example/resizable-vertical.tsx",
-      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from '~/registry/default/ui/resizable'\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"vertical\"\n         className=\"min-h-[200px] max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Header</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/resizable-vertical.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"~/registry/default/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"vertical\"\n         className=\"min-h-[200px] max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Header</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/resizable.json b/apps/web/public/r/styles/default/resizable.json
index 236340c9..2305fce7 100644
--- a/apps/web/public/r/styles/default/resizable.json
+++ b/apps/web/public/r/styles/default/resizable.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "resizable",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "react-resizable-panels"
   ],
   "files": [
     {
       "path": "ui/resizable.tsx",
-      "content": "'use client'\n\nimport { GripVertical } from 'lucide-react'\nimport * as ResizablePrimitive from 'react-resizable-panels'\n\nimport { ny } from '~/lib/utils'\n\nfunction ResizablePanelGroup({\n   className,\n   ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n   return (\n      <ResizablePrimitive.PanelGroup\n         className={ny(\n            'flex size-full data-[panel-group-direction=vertical]:flex-col',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nfunction ResizableHandle({\n   withHandle,\n   className,\n   ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n   withHandle?: boolean\n}) {\n   return (\n      <ResizablePrimitive.PanelResizeHandle\n         className={ny(\n            'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',\n            className,\n         )}\n         {...props}\n      >\n         {withHandle && (\n            <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border\">\n               <GripVertical className=\"size-2.5\" />\n            </div>\n         )}\n      </ResizablePrimitive.PanelResizeHandle>\n   )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { ny } from \"~/lib/utils\"\n\nfunction ResizablePanelGroup({\n   className,\n   ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n   return (\n      <ResizablePrimitive.PanelGroup\n         className={ny(\n            \"flex size-full data-[panel-group-direction=vertical]:flex-col\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nfunction ResizableHandle({\n   withHandle,\n   className,\n   ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n   withHandle?: boolean\n}) {\n   return (\n      <ResizablePrimitive.PanelResizeHandle\n         className={ny(\n            \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n            className,\n         )}\n         {...props}\n      >\n         {withHandle && (\n            <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border\">\n               <GripVertical className=\"size-2.5\" />\n            </div>\n         )}\n      </ResizablePrimitive.PanelResizeHandle>\n   )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/retro-grid-demo.json b/apps/web/public/r/styles/default/retro-grid-demo.json
index 52902c76..f865c060 100644
--- a/apps/web/public/r/styles/default/retro-grid-demo.json
+++ b/apps/web/public/r/styles/default/retro-grid-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "retro-grid-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/retro-grid-demo.tsx",
-      "content": "'use client'\n\nimport RetroGrid from '~/registry/default/ui/retro-grid'\n\nfunction RetroGridDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <span className=\"pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent\">\n            Retro Grid\n         </span>\n\n         <RetroGrid />\n      </div>\n   )\n}\n\nexport default RetroGridDemo\n",
-      "type": "registry:component",
+      "path": "examples/retro-grid-demo.tsx",
+      "content": "\"use client\"\n\nimport { RetroGrid } from \"~/registry/default/ui/retro-grid\"\n\nexport default function RetroGridDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <span className=\"pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent\">\n            Retro Grid\n         </span>\n\n         <RetroGrid />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/retro-grid.json b/apps/web/public/r/styles/default/retro-grid.json
index 52ee2db3..33bace3d 100644
--- a/apps/web/public/r/styles/default/retro-grid.json
+++ b/apps/web/public/r/styles/default/retro-grid.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "retro-grid",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/retro-grid.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\nexport default function RetroGrid({ className }: { className?: string }) {\n   return (\n      <div\n         className={ny(\n            'pointer-events-none absolute size-full overflow-hidden opacity-50 [perspective:200px]',\n            className,\n         )}\n      >\n         {/* Grid */}\n         <div className=\"absolute inset-0 [transform:rotateX(35deg)]\">\n            <div\n               className={ny(\n                  'animate-grid',\n\n                  '[background-repeat:repeat] [background-size:60px_60px] [height:300vh] [inset:0%_0px] [margin-left:-50%] [transform-origin:100%_0_0] [width:600vw]',\n\n                  // Light Styles\n                  '[background-image:linear-gradient(to_right,rgba(0,0,0,0.3)_1px,transparent_0),linear-gradient(to_bottom,rgba(0,0,0,0.3)_1px,transparent_0)]',\n\n                  // Dark styles\n                  'dark:[background-image:linear-gradient(to_right,rgba(255,255,255,0.2)_1px,transparent_0),linear-gradient(to_bottom,rgba(255,255,255,0.2)_1px,transparent_0)]',\n               )}\n            />\n         </div>\n\n         {/* Background Gradient */}\n         <div className=\"absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/registry/default/lib/utils\"\n\ninterface RetroGridProps extends React.HTMLAttributes<HTMLDivElement> {\n   /**\n    * Additional CSS classes to apply to the grid container\n    */\n   className?: string\n   /**\n    * Rotation angle of the grid in degrees\n    * @default 65\n    */\n   angle?: number\n   /**\n    * Grid cell size in pixels\n    * @default 60\n    */\n   cellSize?: number\n   /**\n    * Grid opacity value between 0 and 1\n    * @default 0.5\n    */\n   opacity?: number\n   /**\n    * Grid line color in light mode\n    * @default \"gray\"\n    */\n   lightLineColor?: string\n   /**\n    * Grid line color in dark mode\n    * @default \"gray\"\n    */\n   darkLineColor?: string\n}\n\nexport function RetroGrid({\n   className,\n   angle = 65,\n   cellSize = 60,\n   opacity = 0.5,\n   lightLineColor = \"gray\",\n   darkLineColor = \"gray\",\n   ...props\n}: RetroGridProps) {\n   const gridStyles = {\n      \"--grid-angle\": `${angle}deg`,\n      \"--cell-size\": `${cellSize}px`,\n      \"--opacity\": opacity,\n      \"--light-line\": lightLineColor,\n      \"--dark-line\": darkLineColor,\n   } as React.CSSProperties\n\n   return (\n      <div\n         className={ny(\n            \"pointer-events-none absolute size-full overflow-hidden [perspective:200px]\",\n            `opacity-[var(--opacity)]`,\n            className,\n         )}\n         style={gridStyles}\n         {...props}\n      >\n         <div className=\"absolute inset-0 [transform:rotateX(var(--grid-angle))]\">\n            <div className=\"animate-grid [background-image:linear-gradient(to_right,var(--light-line)_1px,transparent_0),linear-gradient(to_bottom,var(--light-line)_1px,transparent_0)] [background-repeat:repeat] [background-size:var(--cell-size)_var(--cell-size)] [height:300vh] [inset:0%_0px] [margin-left:-200%] [transform-origin:100%_0_0] [width:600vw] dark:[background-image:linear-gradient(to_right,var(--dark-line)_1px,transparent_0),linear-gradient(to_bottom,var(--dark-line)_1px,transparent_0)]\" />\n         </div>\n\n         <div className=\"absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black\" />\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/ripple-button-demo.json b/apps/web/public/r/styles/default/ripple-button-demo.json
new file mode 100644
index 00000000..58329c35
--- /dev/null
+++ b/apps/web/public/r/styles/default/ripple-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "ripple-button-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/ripple-button-demo.tsx",
+      "content": "import { RippleButton } from \"~/registry/default/ui/ripple-button\"\n\nexport default function RippleButtonDemo() {\n   return <RippleButton rippleColor=\"#ADD8E6\">Click me</RippleButton>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/ripple-button.json b/apps/web/public/r/styles/default/ripple-button.json
new file mode 100644
index 00000000..fb88144b
--- /dev/null
+++ b/apps/web/public/r/styles/default/ripple-button.json
@@ -0,0 +1,39 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "ripple-button",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/ripple-button.tsx",
+      "content": "\"use client\"\n\nimport React, { type MouseEvent, useEffect, useState } from \"react\"\nimport { ny } from \"~/registry/default/lib/utils\"\n\ninterface RippleButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n   rippleColor?: string\n   duration?: string\n}\n\nexport const RippleButton = React.forwardRef<\n   HTMLButtonElement,\n   RippleButtonProps\n>(\n   (\n      {\n         className,\n         children,\n         rippleColor = \"#ffffff\",\n         duration = \"600ms\",\n         onClick,\n         ...props\n      },\n      ref,\n   ) => {\n      const [buttonRipples, setButtonRipples] = useState<\n         Array<{ x: number; y: number; size: number; key: number }>\n      >([])\n\n      const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n         createRipple(event)\n         onClick?.(event)\n      }\n\n      const createRipple = (event: MouseEvent<HTMLButtonElement>) => {\n         const button = event.currentTarget\n         const rect = button.getBoundingClientRect()\n         const size = Math.max(rect.width, rect.height)\n         const x = event.clientX - rect.left - size / 2\n         const y = event.clientY - rect.top - size / 2\n\n         const newRipple = { x, y, size, key: Date.now() }\n         setButtonRipples((prevRipples) => [...prevRipples, newRipple])\n      }\n\n      useEffect(() => {\n         if (buttonRipples.length > 0) {\n            const lastRipple = buttonRipples[buttonRipples.length - 1]\n            const timeout = setTimeout(() => {\n               setButtonRipples((prevRipples) =>\n                  prevRipples.filter((ripple) => ripple.key !== lastRipple.key),\n               )\n            }, Number.parseInt(duration))\n            return () => clearTimeout(timeout)\n         }\n      }, [buttonRipples, duration])\n\n      return (\n         <button\n            className={ny(\n               \"relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 bg-background px-4 py-2 text-center text-primary\",\n               className,\n            )}\n            onClick={handleClick}\n            ref={ref}\n            {...props}\n         >\n            <div className=\"relative z-10\">{children}</div>\n            <span className=\"pointer-events-none absolute inset-0\">\n               {buttonRipples.map((ripple) => (\n                  <span\n                     className=\"absolute animate-rippling rounded-full bg-background opacity-30\"\n                     key={ripple.key}\n                     style={{\n                        width: `${ripple.size}px`,\n                        height: `${ripple.size}px`,\n                        top: `${ripple.y}px`,\n                        left: `${ripple.x}px`,\n                        backgroundColor: rippleColor,\n                        transform: `scale(0)`,\n                     }}\n                  />\n               ))}\n            </span>\n         </button>\n      )\n   },\n)\n\nRippleButton.displayName = \"RippleButton\"\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "rippling": "rippling var(--duration) ease-out"
+          },
+          "keyframes": {
+            "rippling": {
+              "0%": {
+                "opacity": "1"
+              },
+              "100%": {
+                "transform": "scale(2)",
+                "opacity": "0"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/ripple-demo.json b/apps/web/public/r/styles/default/ripple-demo.json
index b9a363bd..347c33ac 100644
--- a/apps/web/public/r/styles/default/ripple-demo.json
+++ b/apps/web/public/r/styles/default/ripple-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "ripple-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/ripple-demo.tsx",
-      "content": "import Ripple from '~/registry/default/ui/ripple'\n\nfunction RippleDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white\">\n            Ripple\n         </p>\n         <Ripple />\n      </div>\n   )\n}\n\nexport default RippleDemo\n",
-      "type": "registry:component",
+      "path": "examples/ripple-demo.tsx",
+      "content": "import { Ripple } from \"~/registry/default/ui/ripple\"\n\nexport default function RippleDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white\">\n            Ripple\n         </p>\n         <Ripple />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/ripple.json b/apps/web/public/r/styles/default/ripple.json
index 1cb38523..3aa80804 100644
--- a/apps/web/public/r/styles/default/ripple.json
+++ b/apps/web/public/r/styles/default/ripple.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "ripple",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/ripple.tsx",
-      "content": "import type { CSSProperties } from 'react'\nimport React from 'react'\n\n// Modify these\nconst MAIN_CIRCLE_SIZE = 210\nconst MAIN_CIRCLE_OPACITY = 0.24\nconst NUM_CIRCLES = 8\n\nconst Ripple = React.memo(() => {\n   return (\n      <div className=\"absolute left-1/2 top-1/2 size-full overflow-visible\">\n         {Array.from({ length: NUM_CIRCLES }, (_, i) => (\n            <div\n               key={i}\n               className=\"animate-ripple absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-neutral-400\"\n               style={\n                  {\n                     width: MAIN_CIRCLE_SIZE + i * 70,\n                     height: MAIN_CIRCLE_SIZE + i * 70,\n                     opacity: MAIN_CIRCLE_OPACITY - i * 0.03,\n                     animationDelay: `${i * 0.06}s`,\n                  } as CSSProperties\n               }\n            >\n            </div>\n         ))}\n      </div>\n   )\n})\n\nRipple.displayName = 'Ripple'\n\nexport default Ripple\n",
-      "type": "registry:component",
+      "content": "import React, { type ComponentPropsWithoutRef, type CSSProperties } from \"react\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\n\ninterface RippleProps extends ComponentPropsWithoutRef<\"div\"> {\n   mainCircleSize?: number\n   mainCircleOpacity?: number\n   numCircles?: number\n}\n\nexport const Ripple = React.memo(function Ripple({\n   mainCircleSize = 210,\n   mainCircleOpacity = 0.24,\n   numCircles = 8,\n   className,\n   ...props\n}: RippleProps) {\n   return (\n      <div\n         className={ny(\n            \"pointer-events-none absolute inset-0 select-none [mask-image:linear-gradient(to_bottom,white,transparent)]\",\n            className,\n         )}\n         {...props}\n      >\n         {Array.from({ length: numCircles }, (_, i) => {\n            const size = mainCircleSize + i * 70\n            const opacity = mainCircleOpacity - i * 0.03\n            const animationDelay = `${i * 0.06}s`\n            const borderStyle = i === numCircles - 1 ? \"dashed\" : \"solid\"\n            const borderOpacity = 5 + i * 5\n\n            return (\n               <div\n                  key={i}\n                  className={`[--i: absolute animate-ripple rounded-full border bg-foreground/25 shadow-xl${i}]`}\n                  style={\n                     {\n                        width: `${size}px`,\n                        height: `${size}px`,\n                        opacity,\n                        animationDelay,\n                        borderStyle,\n                        borderWidth: \"1px\",\n                        borderColor: `hsl(var(--foreground), ${borderOpacity / 100})`,\n                        top: \"50%\",\n                        left: \"50%\",\n                        transform: \"translate(-50%, -50%) scale(1)\",\n                     } as CSSProperties\n                  }\n               />\n            )\n         })}\n      </div>\n   )\n})\n\nRipple.displayName = \"Ripple\"\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/safari-demo-2.json b/apps/web/public/r/styles/default/safari-demo-2.json
index da5321f2..a06f0f5a 100644
--- a/apps/web/public/r/styles/default/safari-demo-2.json
+++ b/apps/web/public/r/styles/default/safari-demo-2.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "safari-demo-2",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/safari-demo-2.tsx",
-      "content": "import Safari from '~/registry/default/ui/safari'\n\nexport default function SafariDemo() {\n   return (\n      <div className=\"relative\">\n         <Safari\n            url=\"nyxbui.design\"\n            className=\"size-full\"\n            src=\"https://via.placeholder.com/1200x750\"\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/safari-demo-2.tsx",
+      "content": "import Safari from \"~/registry/default/ui/safari\"\n\nexport default function SafariDemo() {\n   return (\n      <div className=\"relative\">\n         <Safari\n            url=\"nyxbui.design\"\n            className=\"size-full\"\n            src=\"https://via.placeholder.com/1200x750\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/safari-demo.json b/apps/web/public/r/styles/default/safari-demo.json
index e400883a..a270481d 100644
--- a/apps/web/public/r/styles/default/safari-demo.json
+++ b/apps/web/public/r/styles/default/safari-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "safari-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/safari-demo.tsx",
-      "content": "import Safari from '~/registry/default/ui/safari'\n\nexport default function SafariDemo() {\n   return (\n      <div className=\"relative\">\n         <Safari url=\"nyxbui.design\" className=\"size-full\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/safari-demo.tsx",
+      "content": "import Safari from \"~/registry/default/ui/safari\"\n\nexport default function SafariDemo() {\n   return (\n      <div className=\"relative\">\n         <Safari url=\"nyxbui.design\" className=\"size-full\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/safari.json b/apps/web/public/r/styles/default/safari.json
index 60fecdba..d0b43a0b 100644
--- a/apps/web/public/r/styles/default/safari.json
+++ b/apps/web/public/r/styles/default/safari.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "safari",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/safari.tsx",
-      "content": "import type { SVGProps } from 'react'\n\nexport interface SafariProps extends SVGProps<SVGSVGElement> {\n   url?: string\n   src?: string\n   width?: number\n   height?: number\n}\n\nexport default function Safari({\n   src,\n   url,\n   width = 1203,\n   height = 753,\n   ...props\n}: SafariProps) {\n   return (\n      <svg\n         width={width}\n         height={height}\n         viewBox={`0 0 ${width} ${height}`}\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <g clipPath=\"url(#path0)\">\n            <path\n               d=\"M0 52H1202V741C1202 747.627 1196.63 753 1190 753H12C5.37258 753 0 747.627 0 741V52Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               fillRule=\"evenodd\"\n               clipRule=\"evenodd\"\n               d=\"M0 12C0 5.37258 5.37258 0 12 0H1190C1196.63 0 1202 5.37258 1202 12V52H0L0 12Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               fillRule=\"evenodd\"\n               clipRule=\"evenodd\"\n               d=\"M1.06738 12C1.06738 5.92487 5.99225 1 12.0674 1H1189.93C1196.01 1 1200.93 5.92487 1200.93 12V51H1.06738V12Z\"\n               className=\"fill-white dark:fill-[#262626]\"\n            />\n            <circle\n               cx=\"27\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <circle\n               cx=\"47\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <circle\n               cx=\"67\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               d=\"M286 17C286 13.6863 288.686 11 292 11H946C949.314 11 952 13.6863 952 17V35C952 38.3137 949.314 41 946 41H292C288.686 41 286 38.3137 286 35V17Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M566.269 32.0852H572.426C573.277 32.0852 573.696 31.6663 573.696 30.7395V25.9851C573.696 25.1472 573.353 24.7219 572.642 24.6521V23.0842C572.642 20.6721 571.036 19.5105 569.348 19.5105C567.659 19.5105 566.053 20.6721 566.053 23.0842V24.6711C565.393 24.7727 565 25.1917 565 25.9851V30.7395C565 31.6663 565.418 32.0852 566.269 32.0852ZM567.272 22.97C567.272 21.491 568.211 20.6785 569.348 20.6785C570.478 20.6785 571.423 21.491 571.423 22.97V24.6394L567.272 24.6458V22.97Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <text\n                  x=\"580\"\n                  y=\"30\"\n                  fill=\"#A3A3A3\"\n                  fontSize=\"12\"\n                  fontFamily=\"Arial, sans-serif\"\n               >\n                  {url}\n               </text>\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M265.5 33.8984C265.641 33.8984 265.852 33.8516 266.047 33.7422C270.547 31.2969 272.109 30.1641 272.109 27.3203V21.4219C272.109 20.4844 271.742 20.1484 270.961 19.8125C270.094 19.4453 267.18 18.4297 266.328 18.1406C266.07 18.0547 265.766 18 265.5 18C265.234 18 264.93 18.0703 264.672 18.1406C263.82 18.3828 260.906 19.4531 260.039 19.8125C259.258 20.1406 258.891 20.4844 258.891 21.4219V27.3203C258.891 30.1641 260.461 31.2812 264.945 33.7422C265.148 33.8516 265.359 33.8984 265.5 33.8984ZM265.922 19.5781C266.945 19.9766 269.172 20.7656 270.344 21.1875C270.562 21.2656 270.617 21.3828 270.617 21.6641V27.0234C270.617 29.3125 269.469 29.9375 265.945 32.0625C265.727 32.1875 265.617 32.2344 265.508 32.2344V19.4844C265.617 19.4844 265.734 19.5156 265.922 19.5781Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M936.273 24.9766C936.5 24.9766 936.68 24.9062 936.82 24.7578L940.023 21.5312C940.195 21.3594 940.273 21.1719 940.273 20.9531C940.273 20.7422 940.188 20.5391 940.023 20.3828L936.82 17.125C936.68 16.9688 936.5 16.8906 936.273 16.8906C935.852 16.8906 935.516 17.2422 935.516 17.6719C935.516 17.8828 935.594 18.0547 935.727 18.2031L937.594 20.0312C937.227 19.9766 936.852 19.9453 936.477 19.9453C932.609 19.9453 929.516 23.0391 929.516 26.9141C929.516 30.7891 932.633 33.9062 936.5 33.9062C940.375 33.9062 943.484 30.7891 943.484 26.9141C943.484 26.4453 943.156 26.1094 942.688 26.1094C942.234 26.1094 941.93 26.4453 941.93 26.9141C941.93 29.9297 939.516 32.3516 936.5 32.3516C933.492 32.3516 931.07 29.9297 931.07 26.9141C931.07 23.875 933.469 21.4688 936.477 21.4688C936.984 21.4688 937.453 21.5078 937.867 21.5781L935.734 23.6875C935.594 23.8281 935.516 24 935.516 24.2109C935.516 24.6406 935.852 24.9766 936.273 24.9766Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1134 33.0156C1134.49 33.0156 1134.89 32.6094 1134.89 32.1484V27.2578H1139.66C1140.13 27.2578 1140.54 26.8594 1140.54 26.3672C1140.54 25.8828 1140.13 25.4766 1139.66 25.4766H1134.89V20.5859C1134.89 20.1172 1134.49 19.7188 1134 19.7188C1133.52 19.7188 1133.11 20.1172 1133.11 20.5859V25.4766H1128.34C1127.88 25.4766 1127.46 25.8828 1127.46 26.3672C1127.46 26.8594 1127.88 27.2578 1128.34 27.2578H1133.11V32.1484C1133.11 32.6094 1133.52 33.0156 1134 33.0156Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1161.8 31.0703H1163.23V32.375C1163.23 34.0547 1164.12 34.9219 1165.81 34.9219H1174.2C1175.89 34.9219 1176.77 34.0547 1176.77 32.3828V24.0469C1176.77 22.375 1175.89 21.5 1174.2 21.5H1172.77V20.2578C1172.77 18.5859 1171.88 17.7109 1170.19 17.7109H1161.8C1160.1 17.7109 1159.23 18.5781 1159.23 20.2578V28.5234C1159.23 30.1953 1160.1 31.0703 1161.8 31.0703ZM1161.9 29.5078C1161.18 29.5078 1160.78 29.1328 1160.78 28.3828V20.3984C1160.78 19.6406 1161.18 19.2656 1161.9 19.2656H1170.09C1170.8 19.2656 1171.2 19.6406 1171.2 20.3984V21.5H1165.81C1164.12 21.5 1163.23 22.375 1163.23 24.0469V29.5078H1161.9ZM1165.91 33.3672C1165.19 33.3672 1164.8 32.9922 1164.8 32.2422V24.1875C1164.8 23.4297 1165.19 23.0625 1165.91 23.0625H1174.1C1174.81 23.0625 1175.21 23.4297 1175.21 24.1875V32.2422C1175.21 32.9922 1174.81 33.3672 1174.1 33.3672H1165.91Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1099.51 28.4141C1099.91 28.4141 1100.24 28.0859 1100.24 27.6953V19.8359L1100.18 18.6797L1100.66 19.25L1101.75 20.4141C1101.88 20.5547 1102.06 20.625 1102.24 20.625C1102.6 20.625 1102.9 20.3672 1102.9 20C1102.9 19.8047 1102.82 19.6641 1102.69 19.5312L1100.06 17.0078C1099.88 16.8203 1099.7 16.7578 1099.51 16.7578C1099.32 16.7578 1099.14 16.8203 1098.95 17.0078L1096.33 19.5312C1096.2 19.6641 1096.12 19.8047 1096.12 20C1096.12 20.3672 1096.41 20.625 1096.77 20.625C1096.95 20.625 1097.14 20.5547 1097.27 20.4141L1098.35 19.25L1098.84 18.6719L1098.78 19.8359V27.6953C1098.78 28.0859 1099.11 28.4141 1099.51 28.4141ZM1095 34.6562H1104C1105.7 34.6562 1106.57 33.7812 1106.57 32.1094V24.4297C1106.57 22.7578 1105.7 21.8828 1104 21.8828H1101.89V23.4375H1103.9C1104.61 23.4375 1105.02 23.8125 1105.02 24.5625V31.9688C1105.02 32.7188 1104.61 33.0938 1103.9 33.0938H1095.1C1094.38 33.0938 1093.98 32.7188 1093.98 31.9688V24.5625C1093.98 23.8125 1094.38 23.4375 1095.1 23.4375H1097.13V21.8828H1095C1093.31 21.8828 1092.43 22.75 1092.43 24.4297V32.1094C1092.43 33.7812 1093.31 34.6562 1095 34.6562Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M99.5703 33.6016H112.938C114.633 33.6016 115.516 32.7266 115.516 31.0547V21.5469C115.516 19.875 114.633 19 112.938 19H99.5703C97.8828 19 97 19.8672 97 21.5469V31.0547C97 32.7266 97.8828 33.6016 99.5703 33.6016ZM99.6719 32.0469C98.9531 32.0469 98.5547 31.6719 98.5547 30.9141V21.6875C98.5547 20.9297 98.9531 20.5547 99.6719 20.5547H103.234V32.0469H99.6719ZM112.836 20.5547C113.555 20.5547 113.953 20.9297 113.953 21.6875V30.9141C113.953 31.6719 113.555 32.0469 112.836 32.0469H104.711V20.5547H112.836ZM101.703 23.4141C101.984 23.4141 102.219 23.1719 102.219 22.9062C102.219 22.6406 101.984 22.4062 101.703 22.4062H100.102C99.8203 22.4062 99.5859 22.6406 99.5859 22.9062C99.5859 23.1719 99.8203 23.4141 100.102 23.4141H101.703ZM101.703 25.5156C101.984 25.5156 102.219 25.2812 102.219 25.0078C102.219 24.7422 101.984 24.5078 101.703 24.5078H100.102C99.8203 24.5078 99.5859 24.7422 99.5859 25.0078C99.5859 25.2812 99.8203 25.5156 100.102 25.5156H101.703ZM101.703 27.6094C101.984 27.6094 102.219 27.3828 102.219 27.1094C102.219 26.8438 101.984 26.6172 101.703 26.6172H100.102C99.8203 26.6172 99.5859 26.8438 99.5859 27.1094C99.5859 27.3828 99.8203 27.6094 100.102 27.6094H101.703Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M143.914 32.5938C144.094 32.7656 144.312 32.8594 144.562 32.8594C145.086 32.8594 145.492 32.4531 145.492 31.9375C145.492 31.6797 145.391 31.4453 145.211 31.2656L139.742 25.9219L145.211 20.5938C145.391 20.4141 145.492 20.1719 145.492 19.9219C145.492 19.4062 145.086 19 144.562 19C144.312 19 144.094 19.0938 143.922 19.2656L137.844 25.2031C137.625 25.4062 137.516 25.6562 137.516 25.9297C137.516 26.2031 137.625 26.4375 137.836 26.6484L143.914 32.5938Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M168.422 32.8594C168.68 32.8594 168.891 32.7656 169.07 32.5938L175.148 26.6562C175.359 26.4375 175.469 26.2109 175.469 25.9297C175.469 25.6562 175.367 25.4141 175.148 25.2109L169.07 19.2656C168.891 19.0938 168.68 19 168.422 19C167.898 19 167.492 19.4062 167.492 19.9219C167.492 20.1719 167.602 20.4141 167.773 20.5938L173.25 25.9375L167.773 31.2656C167.594 31.4531 167.492 31.6797 167.492 31.9375C167.492 32.4531 167.898 32.8594 168.422 32.8594Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <image\n               href={src}\n               width=\"1200\"\n               height=\"700\"\n               x=\"1\"\n               y=\"52\"\n               preserveAspectRatio=\"xMidYMid slice\"\n               clipPath=\"url(#roundedBottom)\"\n            />\n         </g>\n         <defs>\n            <clipPath id=\"path0\">\n               <rect width={width} height={height} fill=\"white\" />\n            </clipPath>\n            <clipPath id=\"roundedBottom\">\n               <path\n                  d=\"M1 52H1201V741C1201 747.075 1196.08 752 1190 752H12C5.92486 752 1 747.075 1 741V52Z\"\n                  fill=\"white\"\n               />\n            </clipPath>\n         </defs>\n      </svg>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import type { SVGProps } from \"react\"\n\nexport interface SafariProps extends SVGProps<SVGSVGElement> {\n   url?: string\n   src?: string\n   width?: number\n   height?: number\n}\n\nexport default function Safari({\n   src,\n   url,\n   width = 1203,\n   height = 753,\n   ...props\n}: SafariProps) {\n   return (\n      <svg\n         width={width}\n         height={height}\n         viewBox={`0 0 ${width} ${height}`}\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <g clipPath=\"url(#path0)\">\n            <path\n               d=\"M0 52H1202V741C1202 747.627 1196.63 753 1190 753H12C5.37258 753 0 747.627 0 741V52Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               fillRule=\"evenodd\"\n               clipRule=\"evenodd\"\n               d=\"M0 12C0 5.37258 5.37258 0 12 0H1190C1196.63 0 1202 5.37258 1202 12V52H0L0 12Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               fillRule=\"evenodd\"\n               clipRule=\"evenodd\"\n               d=\"M1.06738 12C1.06738 5.92487 5.99225 1 12.0674 1H1189.93C1196.01 1 1200.93 5.92487 1200.93 12V51H1.06738V12Z\"\n               className=\"fill-white dark:fill-[#262626]\"\n            />\n            <circle\n               cx=\"27\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <circle\n               cx=\"47\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <circle\n               cx=\"67\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               d=\"M286 17C286 13.6863 288.686 11 292 11H946C949.314 11 952 13.6863 952 17V35C952 38.3137 949.314 41 946 41H292C288.686 41 286 38.3137 286 35V17Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M566.269 32.0852H572.426C573.277 32.0852 573.696 31.6663 573.696 30.7395V25.9851C573.696 25.1472 573.353 24.7219 572.642 24.6521V23.0842C572.642 20.6721 571.036 19.5105 569.348 19.5105C567.659 19.5105 566.053 20.6721 566.053 23.0842V24.6711C565.393 24.7727 565 25.1917 565 25.9851V30.7395C565 31.6663 565.418 32.0852 566.269 32.0852ZM567.272 22.97C567.272 21.491 568.211 20.6785 569.348 20.6785C570.478 20.6785 571.423 21.491 571.423 22.97V24.6394L567.272 24.6458V22.97Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <text\n                  x=\"580\"\n                  y=\"30\"\n                  fill=\"#A3A3A3\"\n                  fontSize=\"12\"\n                  fontFamily=\"Arial, sans-serif\"\n               >\n                  {url}\n               </text>\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M265.5 33.8984C265.641 33.8984 265.852 33.8516 266.047 33.7422C270.547 31.2969 272.109 30.1641 272.109 27.3203V21.4219C272.109 20.4844 271.742 20.1484 270.961 19.8125C270.094 19.4453 267.18 18.4297 266.328 18.1406C266.07 18.0547 265.766 18 265.5 18C265.234 18 264.93 18.0703 264.672 18.1406C263.82 18.3828 260.906 19.4531 260.039 19.8125C259.258 20.1406 258.891 20.4844 258.891 21.4219V27.3203C258.891 30.1641 260.461 31.2812 264.945 33.7422C265.148 33.8516 265.359 33.8984 265.5 33.8984ZM265.922 19.5781C266.945 19.9766 269.172 20.7656 270.344 21.1875C270.562 21.2656 270.617 21.3828 270.617 21.6641V27.0234C270.617 29.3125 269.469 29.9375 265.945 32.0625C265.727 32.1875 265.617 32.2344 265.508 32.2344V19.4844C265.617 19.4844 265.734 19.5156 265.922 19.5781Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M936.273 24.9766C936.5 24.9766 936.68 24.9062 936.82 24.7578L940.023 21.5312C940.195 21.3594 940.273 21.1719 940.273 20.9531C940.273 20.7422 940.188 20.5391 940.023 20.3828L936.82 17.125C936.68 16.9688 936.5 16.8906 936.273 16.8906C935.852 16.8906 935.516 17.2422 935.516 17.6719C935.516 17.8828 935.594 18.0547 935.727 18.2031L937.594 20.0312C937.227 19.9766 936.852 19.9453 936.477 19.9453C932.609 19.9453 929.516 23.0391 929.516 26.9141C929.516 30.7891 932.633 33.9062 936.5 33.9062C940.375 33.9062 943.484 30.7891 943.484 26.9141C943.484 26.4453 943.156 26.1094 942.688 26.1094C942.234 26.1094 941.93 26.4453 941.93 26.9141C941.93 29.9297 939.516 32.3516 936.5 32.3516C933.492 32.3516 931.07 29.9297 931.07 26.9141C931.07 23.875 933.469 21.4688 936.477 21.4688C936.984 21.4688 937.453 21.5078 937.867 21.5781L935.734 23.6875C935.594 23.8281 935.516 24 935.516 24.2109C935.516 24.6406 935.852 24.9766 936.273 24.9766Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1134 33.0156C1134.49 33.0156 1134.89 32.6094 1134.89 32.1484V27.2578H1139.66C1140.13 27.2578 1140.54 26.8594 1140.54 26.3672C1140.54 25.8828 1140.13 25.4766 1139.66 25.4766H1134.89V20.5859C1134.89 20.1172 1134.49 19.7188 1134 19.7188C1133.52 19.7188 1133.11 20.1172 1133.11 20.5859V25.4766H1128.34C1127.88 25.4766 1127.46 25.8828 1127.46 26.3672C1127.46 26.8594 1127.88 27.2578 1128.34 27.2578H1133.11V32.1484C1133.11 32.6094 1133.52 33.0156 1134 33.0156Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1161.8 31.0703H1163.23V32.375C1163.23 34.0547 1164.12 34.9219 1165.81 34.9219H1174.2C1175.89 34.9219 1176.77 34.0547 1176.77 32.3828V24.0469C1176.77 22.375 1175.89 21.5 1174.2 21.5H1172.77V20.2578C1172.77 18.5859 1171.88 17.7109 1170.19 17.7109H1161.8C1160.1 17.7109 1159.23 18.5781 1159.23 20.2578V28.5234C1159.23 30.1953 1160.1 31.0703 1161.8 31.0703ZM1161.9 29.5078C1161.18 29.5078 1160.78 29.1328 1160.78 28.3828V20.3984C1160.78 19.6406 1161.18 19.2656 1161.9 19.2656H1170.09C1170.8 19.2656 1171.2 19.6406 1171.2 20.3984V21.5H1165.81C1164.12 21.5 1163.23 22.375 1163.23 24.0469V29.5078H1161.9ZM1165.91 33.3672C1165.19 33.3672 1164.8 32.9922 1164.8 32.2422V24.1875C1164.8 23.4297 1165.19 23.0625 1165.91 23.0625H1174.1C1174.81 23.0625 1175.21 23.4297 1175.21 24.1875V32.2422C1175.21 32.9922 1174.81 33.3672 1174.1 33.3672H1165.91Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1099.51 28.4141C1099.91 28.4141 1100.24 28.0859 1100.24 27.6953V19.8359L1100.18 18.6797L1100.66 19.25L1101.75 20.4141C1101.88 20.5547 1102.06 20.625 1102.24 20.625C1102.6 20.625 1102.9 20.3672 1102.9 20C1102.9 19.8047 1102.82 19.6641 1102.69 19.5312L1100.06 17.0078C1099.88 16.8203 1099.7 16.7578 1099.51 16.7578C1099.32 16.7578 1099.14 16.8203 1098.95 17.0078L1096.33 19.5312C1096.2 19.6641 1096.12 19.8047 1096.12 20C1096.12 20.3672 1096.41 20.625 1096.77 20.625C1096.95 20.625 1097.14 20.5547 1097.27 20.4141L1098.35 19.25L1098.84 18.6719L1098.78 19.8359V27.6953C1098.78 28.0859 1099.11 28.4141 1099.51 28.4141ZM1095 34.6562H1104C1105.7 34.6562 1106.57 33.7812 1106.57 32.1094V24.4297C1106.57 22.7578 1105.7 21.8828 1104 21.8828H1101.89V23.4375H1103.9C1104.61 23.4375 1105.02 23.8125 1105.02 24.5625V31.9688C1105.02 32.7188 1104.61 33.0938 1103.9 33.0938H1095.1C1094.38 33.0938 1093.98 32.7188 1093.98 31.9688V24.5625C1093.98 23.8125 1094.38 23.4375 1095.1 23.4375H1097.13V21.8828H1095C1093.31 21.8828 1092.43 22.75 1092.43 24.4297V32.1094C1092.43 33.7812 1093.31 34.6562 1095 34.6562Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M99.5703 33.6016H112.938C114.633 33.6016 115.516 32.7266 115.516 31.0547V21.5469C115.516 19.875 114.633 19 112.938 19H99.5703C97.8828 19 97 19.8672 97 21.5469V31.0547C97 32.7266 97.8828 33.6016 99.5703 33.6016ZM99.6719 32.0469C98.9531 32.0469 98.5547 31.6719 98.5547 30.9141V21.6875C98.5547 20.9297 98.9531 20.5547 99.6719 20.5547H103.234V32.0469H99.6719ZM112.836 20.5547C113.555 20.5547 113.953 20.9297 113.953 21.6875V30.9141C113.953 31.6719 113.555 32.0469 112.836 32.0469H104.711V20.5547H112.836ZM101.703 23.4141C101.984 23.4141 102.219 23.1719 102.219 22.9062C102.219 22.6406 101.984 22.4062 101.703 22.4062H100.102C99.8203 22.4062 99.5859 22.6406 99.5859 22.9062C99.5859 23.1719 99.8203 23.4141 100.102 23.4141H101.703ZM101.703 25.5156C101.984 25.5156 102.219 25.2812 102.219 25.0078C102.219 24.7422 101.984 24.5078 101.703 24.5078H100.102C99.8203 24.5078 99.5859 24.7422 99.5859 25.0078C99.5859 25.2812 99.8203 25.5156 100.102 25.5156H101.703ZM101.703 27.6094C101.984 27.6094 102.219 27.3828 102.219 27.1094C102.219 26.8438 101.984 26.6172 101.703 26.6172H100.102C99.8203 26.6172 99.5859 26.8438 99.5859 27.1094C99.5859 27.3828 99.8203 27.6094 100.102 27.6094H101.703Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M143.914 32.5938C144.094 32.7656 144.312 32.8594 144.562 32.8594C145.086 32.8594 145.492 32.4531 145.492 31.9375C145.492 31.6797 145.391 31.4453 145.211 31.2656L139.742 25.9219L145.211 20.5938C145.391 20.4141 145.492 20.1719 145.492 19.9219C145.492 19.4062 145.086 19 144.562 19C144.312 19 144.094 19.0938 143.922 19.2656L137.844 25.2031C137.625 25.4062 137.516 25.6562 137.516 25.9297C137.516 26.2031 137.625 26.4375 137.836 26.6484L143.914 32.5938Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M168.422 32.8594C168.68 32.8594 168.891 32.7656 169.07 32.5938L175.148 26.6562C175.359 26.4375 175.469 26.2109 175.469 25.9297C175.469 25.6562 175.367 25.4141 175.148 25.2109L169.07 19.2656C168.891 19.0938 168.68 19 168.422 19C167.898 19 167.492 19.4062 167.492 19.9219C167.492 20.1719 167.602 20.4141 167.773 20.5938L173.25 25.9375L167.773 31.2656C167.594 31.4531 167.492 31.6797 167.492 31.9375C167.492 32.4531 167.898 32.8594 168.422 32.8594Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <image\n               href={src}\n               width=\"1200\"\n               height=\"700\"\n               x=\"1\"\n               y=\"52\"\n               preserveAspectRatio=\"xMidYMid slice\"\n               clipPath=\"url(#roundedBottom)\"\n            />\n         </g>\n         <defs>\n            <clipPath id=\"path0\">\n               <rect width={width} height={height} fill=\"white\" />\n            </clipPath>\n            <clipPath id=\"roundedBottom\">\n               <path\n                  d=\"M1 52H1201V741C1201 747.075 1196.08 752 1190 752H12C5.92486 752 1 747.075 1 741V52Z\"\n                  fill=\"white\"\n               />\n            </clipPath>\n         </defs>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/scratch-to-reveal-demo.json b/apps/web/public/r/styles/default/scratch-to-reveal-demo.json
index 41fe4ef5..a074ac41 100644
--- a/apps/web/public/r/styles/default/scratch-to-reveal-demo.json
+++ b/apps/web/public/r/styles/default/scratch-to-reveal-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scratch-to-reveal-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/scratch-to-reveal-demo.tsx",
-      "content": "import React from 'react'\nimport ScratchToReveal from '~/registry/default/ui/scratch-to-reveal'\n\nfunction ScratchToRevealDemo() {\n   const handleComplete = () => {\n      // Do Something\n   }\n\n   return (\n      <div>\n         <ScratchToReveal\n            width={250}\n            height={250}\n            minScratchPercentage={70}\n            className=\"flex items-center justify-center overflow-hidden rounded-2xl border-2 bg-gray-100\"\n            onComplete={handleComplete}\n         >\n            <p className=\"text-9xl\">😎</p>\n         </ScratchToReveal>\n      </div>\n   )\n}\n\nexport default ScratchToRevealDemo\n",
-      "type": "registry:component",
+      "path": "examples/scratch-to-reveal-demo.tsx",
+      "content": "import React from \"react\"\nimport ScratchToReveal from \"~/registry/default/ui/scratch-to-reveal\"\n\nfunction ScratchToRevealDemo() {\n   const handleComplete = () => {\n      // Do Something\n   }\n\n   return (\n      <div>\n         <ScratchToReveal\n            width={250}\n            height={250}\n            minScratchPercentage={70}\n            className=\"flex items-center justify-center overflow-hidden rounded-2xl border-2 bg-gray-100\"\n            onComplete={handleComplete}\n         >\n            <p className=\"text-9xl\">😎</p>\n         </ScratchToReveal>\n      </div>\n   )\n}\n\nexport default ScratchToRevealDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/scratch-to-reveal.json b/apps/web/public/r/styles/default/scratch-to-reveal.json
index 86507851..24a9807f 100644
--- a/apps/web/public/r/styles/default/scratch-to-reveal.json
+++ b/apps/web/public/r/styles/default/scratch-to-reveal.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scratch-to-reveal",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/scratch-to-reveal.tsx",
-      "content": "'use client'\nimport React, { useEffect, useRef, useState } from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface ScratchToRevealProps {\n   children: React.ReactNode\n   width: number\n   height: number\n   minScratchPercentage?: number // Minimum percentage of scratched area to be considered as completed (Value between 0 and 100)\n   className?: string\n   onComplete?: () => void\n}\n\nconst ScratchToReveal: React.FC<ScratchToRevealProps> = ({\n   width,\n   height,\n   minScratchPercentage = 50,\n   onComplete,\n   children,\n   className,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const [isScratching, setIsScratching] = useState(false)\n   const [isComplete, setIsComplete] = useState(false) // New state to track completion\n\n   const controls = useAnimation()\n\n   useEffect(() => {\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext('2d')\n      if (canvas && ctx) {\n         ctx.fillStyle = '#ccc'\n         ctx.fillRect(0, 0, canvas.width, canvas.height)\n         // Optionally add a background image or gradient\n         const gradient = ctx.createLinearGradient(\n            0,\n            0,\n            canvas.width,\n            canvas.height,\n         )\n         gradient.addColorStop(0, '#A97CF8')\n         gradient.addColorStop(0.5, '#F38CB8')\n         gradient.addColorStop(1, '#FDCC92')\n         ctx.fillStyle = gradient\n         ctx.fillRect(0, 0, canvas.width, canvas.height)\n      }\n   }, [])\n\n   useEffect(() => {\n      const handleDocumentMouseMove = (event: MouseEvent) => {\n         if (!isScratching)\n            return\n         scratch(event.clientX, event.clientY)\n      }\n\n      const handleDocumentTouchMove = (event: TouchEvent) => {\n         if (!isScratching)\n            return\n         const touch = event.touches[0]\n         scratch(touch.clientX, touch.clientY)\n      }\n\n      const handleDocumentMouseUp = () => {\n         setIsScratching(false)\n         checkCompletion()\n      }\n\n      const handleDocumentTouchEnd = () => {\n         setIsScratching(false)\n         checkCompletion()\n      }\n\n      document.addEventListener('mousedown', handleDocumentMouseMove)\n      document.addEventListener('mousemove', handleDocumentMouseMove)\n      document.addEventListener('touchstart', handleDocumentTouchMove)\n      document.addEventListener('touchmove', handleDocumentTouchMove)\n      document.addEventListener('mouseup', handleDocumentMouseUp)\n      document.addEventListener('touchend', handleDocumentTouchEnd)\n      document.addEventListener('touchcancel', handleDocumentTouchEnd)\n\n      return () => {\n         document.removeEventListener('mousedown', handleDocumentMouseMove)\n         document.removeEventListener('mousemove', handleDocumentMouseMove)\n         document.removeEventListener('touchstart', handleDocumentTouchMove)\n         document.removeEventListener('touchmove', handleDocumentTouchMove)\n         document.removeEventListener('mouseup', handleDocumentMouseUp)\n         document.removeEventListener('touchend', handleDocumentTouchEnd)\n         document.removeEventListener('touchcancel', handleDocumentTouchEnd)\n      }\n   }, [isScratching])\n\n   const handleMouseDown = () => setIsScratching(true)\n\n   const handleTouchStart = () => setIsScratching(true)\n\n   const scratch = (clientX: number, clientY: number) => {\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext('2d')\n      if (canvas && ctx) {\n         const rect = canvas.getBoundingClientRect()\n         const x = clientX - rect.left + 16 // offset to position the scratched circle with cursor\n         const y = clientY - rect.top + 16\n         ctx.globalCompositeOperation = 'destination-out'\n         ctx.beginPath()\n         ctx.arc(x, y, 30, 0, Math.PI * 2)\n         ctx.fill()\n      }\n   }\n\n   const checkCompletion = () => {\n      if (isComplete)\n         return // Check if already completed\n\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext('2d')\n      if (canvas && ctx) {\n         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n         const pixels = imageData.data\n         const totalPixels = pixels.length / 4\n         let clearPixels = 0\n\n         for (let i = 3; i < pixels.length; i += 4) {\n            if (pixels[i] === 0)\n               clearPixels++\n         }\n\n         const percentage = (clearPixels / totalPixels) * 100\n\n         if (percentage >= minScratchPercentage) {\n            setIsComplete(true) // Set complete flag\n            ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvas to reveal everything\n            startAnimation()\n            if (onComplete)\n               onComplete()\n         }\n      }\n   }\n\n   const startAnimation = () => {\n      controls.start({\n         scale: [1, 1.5, 1],\n         rotate: [0, 10, -10, 10, -10, 0],\n         transition: { duration: 0.5 },\n      })\n   }\n\n   return (\n      <motion.div\n         className={ny('relative select-none', className)}\n         style={{\n            width,\n            height,\n            cursor:\n          'url(\\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+\\'), auto',\n         }}\n         animate={controls}\n      >\n         <canvas\n            ref={canvasRef}\n            width={width}\n            height={height}\n            className=\"absolute left-0 top-0\"\n            onMouseDown={handleMouseDown}\n            onTouchStart={handleTouchStart}\n         >\n         </canvas>\n         {children}\n      </motion.div>\n   )\n}\n\nexport default ScratchToReveal\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport { motion, useAnimation } from \"framer-motion\"\nimport type React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface ScratchToRevealProps {\n   children: React.ReactNode\n   width: number\n   height: number\n   minScratchPercentage?: number // Minimum percentage of scratched area to be considered as completed (Value between 0 and 100)\n   className?: string\n   onComplete?: () => void\n}\n\nconst ScratchToReveal: React.FC<ScratchToRevealProps> = ({\n   width,\n   height,\n   minScratchPercentage = 50,\n   onComplete,\n   children,\n   className,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const [isScratching, setIsScratching] = useState(false)\n   const [isComplete, setIsComplete] = useState(false) // New state to track completion\n\n   const controls = useAnimation()\n\n   useEffect(() => {\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext(\"2d\")\n      if (canvas && ctx) {\n         ctx.fillStyle = \"#ccc\"\n         ctx.fillRect(0, 0, canvas.width, canvas.height)\n         // Optionally add a background image or gradient\n         const gradient = ctx.createLinearGradient(\n            0,\n            0,\n            canvas.width,\n            canvas.height,\n         )\n         gradient.addColorStop(0, \"#A97CF8\")\n         gradient.addColorStop(0.5, \"#F38CB8\")\n         gradient.addColorStop(1, \"#FDCC92\")\n         ctx.fillStyle = gradient\n         ctx.fillRect(0, 0, canvas.width, canvas.height)\n      }\n   }, [])\n\n   useEffect(() => {\n      const handleDocumentMouseMove = (event: MouseEvent) => {\n         if (!isScratching) return\n         scratch(event.clientX, event.clientY)\n      }\n\n      const handleDocumentTouchMove = (event: TouchEvent) => {\n         if (!isScratching) return\n         const touch = event.touches[0]\n         scratch(touch.clientX, touch.clientY)\n      }\n\n      const handleDocumentMouseUp = () => {\n         setIsScratching(false)\n         checkCompletion()\n      }\n\n      const handleDocumentTouchEnd = () => {\n         setIsScratching(false)\n         checkCompletion()\n      }\n\n      document.addEventListener(\"mousedown\", handleDocumentMouseMove)\n      document.addEventListener(\"mousemove\", handleDocumentMouseMove)\n      document.addEventListener(\"touchstart\", handleDocumentTouchMove)\n      document.addEventListener(\"touchmove\", handleDocumentTouchMove)\n      document.addEventListener(\"mouseup\", handleDocumentMouseUp)\n      document.addEventListener(\"touchend\", handleDocumentTouchEnd)\n      document.addEventListener(\"touchcancel\", handleDocumentTouchEnd)\n\n      return () => {\n         document.removeEventListener(\"mousedown\", handleDocumentMouseMove)\n         document.removeEventListener(\"mousemove\", handleDocumentMouseMove)\n         document.removeEventListener(\"touchstart\", handleDocumentTouchMove)\n         document.removeEventListener(\"touchmove\", handleDocumentTouchMove)\n         document.removeEventListener(\"mouseup\", handleDocumentMouseUp)\n         document.removeEventListener(\"touchend\", handleDocumentTouchEnd)\n         document.removeEventListener(\"touchcancel\", handleDocumentTouchEnd)\n      }\n   }, [isScratching])\n\n   const handleMouseDown = () => setIsScratching(true)\n\n   const handleTouchStart = () => setIsScratching(true)\n\n   const scratch = (clientX: number, clientY: number) => {\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext(\"2d\")\n      if (canvas && ctx) {\n         const rect = canvas.getBoundingClientRect()\n         const x = clientX - rect.left + 16 // offset to position the scratched circle with cursor\n         const y = clientY - rect.top + 16\n         ctx.globalCompositeOperation = \"destination-out\"\n         ctx.beginPath()\n         ctx.arc(x, y, 30, 0, Math.PI * 2)\n         ctx.fill()\n      }\n   }\n\n   const checkCompletion = () => {\n      if (isComplete) return // Check if already completed\n\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext(\"2d\")\n      if (canvas && ctx) {\n         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n         const pixels = imageData.data\n         const totalPixels = pixels.length / 4\n         let clearPixels = 0\n\n         for (let i = 3; i < pixels.length; i += 4) {\n            if (pixels[i] === 0) clearPixels++\n         }\n\n         const percentage = (clearPixels / totalPixels) * 100\n\n         if (percentage >= minScratchPercentage) {\n            setIsComplete(true) // Set complete flag\n            ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvas to reveal everything\n            startAnimation()\n            if (onComplete) onComplete()\n         }\n      }\n   }\n\n   const startAnimation = () => {\n      controls.start({\n         scale: [1, 1.5, 1],\n         rotate: [0, 10, -10, 10, -10, 0],\n         transition: { duration: 0.5 },\n      })\n   }\n\n   return (\n      <motion.div\n         className={ny(\"relative select-none\", className)}\n         style={{\n            width,\n            height,\n            cursor:\n               \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto\",\n         }}\n         animate={controls}\n      >\n         <canvas\n            ref={canvasRef}\n            width={width}\n            height={height}\n            className=\"absolute left-0 top-0\"\n            onMouseDown={handleMouseDown}\n            onTouchStart={handleTouchStart}\n         ></canvas>\n         {children}\n      </motion.div>\n   )\n}\n\nexport default ScratchToReveal\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/script-copy-btn-demo.json b/apps/web/public/r/styles/default/script-copy-btn-demo.json
new file mode 100644
index 00000000..40ad2dcb
--- /dev/null
+++ b/apps/web/public/r/styles/default/script-copy-btn-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "script-copy-btn-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/script-copy-btn-demo.tsx",
+      "content": "import { ScriptCopyBtn } from \"~/registry/default/ui/script-copy-btn\"\n\nexport default function ScriptCopyBtnDemo() {\n   const customCommandMap = {\n      npm: \"npm run nyxb add button\",\n      yarn: \"yarn nyxb add button\",\n      pnpm: \"pnpm dlx nyxb@latest add button\",\n      bun: \"bun x nyxb@latest add button\",\n   }\n   return (\n      <ScriptCopyBtn\n         showMultiplePackageOptions={true}\n         codeLanguage=\"shell\"\n         lightTheme=\"nord\"\n         darkTheme=\"vitesse-dark\"\n         commandMap={customCommandMap}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/script-copy-btn.json b/apps/web/public/r/styles/default/script-copy-btn.json
new file mode 100644
index 00000000..83eab400
--- /dev/null
+++ b/apps/web/public/r/styles/default/script-copy-btn.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "script-copy-btn",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion",
+    "shiki",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "ui/script-copy-btn.tsx",
+      "content": "\"use client\"\n\nimport { Check, Copy } from \"lucide-react\"\nimport { motion } from \"motion/react\"\nimport { useTheme } from \"next-themes\"\nimport { type HTMLAttributes, useEffect, useState } from \"react\"\nimport { ny } from \"~/registry/default/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\n\ninterface ScriptCopyBtnProps extends HTMLAttributes<HTMLDivElement> {\n   showMultiplePackageOptions?: boolean\n   codeLanguage: string\n   lightTheme: string\n   darkTheme: string\n   commandMap: Record<string, string>\n   className?: string\n}\n\nexport function ScriptCopyBtn({\n   showMultiplePackageOptions = true,\n   codeLanguage,\n   lightTheme,\n   darkTheme,\n   commandMap,\n   className,\n}: ScriptCopyBtnProps) {\n   const packageManagers = Object.keys(commandMap)\n   const [packageManager, setPackageManager] = useState(packageManagers[0])\n   const [copied, setCopied] = useState(false)\n   const [highlightedCode, setHighlightedCode] = useState(\"\")\n   const { theme } = useTheme()\n   const command = commandMap[packageManager]\n\n   useEffect(() => {\n      async function loadHighlightedCode() {\n         try {\n            const { codeToHtml } = await import(\"shiki\")\n            const highlighted = await codeToHtml(command, {\n               lang: codeLanguage,\n               themes: {\n                  light: lightTheme,\n                  dark: darkTheme,\n               },\n               defaultColor: theme === \"dark\" ? \"dark\" : \"light\",\n            })\n            setHighlightedCode(highlighted)\n         } catch (error) {\n            console.error(\"Error highlighting code:\", error)\n            setHighlightedCode(`<pre>${command}</pre>`)\n         }\n      }\n\n      loadHighlightedCode()\n   }, [command, theme, codeLanguage, lightTheme, darkTheme])\n\n   const copyToClipboard = () => {\n      navigator.clipboard.writeText(command)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n   }\n\n   return (\n      <div\n         className={ny(\n            \"mx-auto flex max-w-md items-center justify-center\",\n            className,\n         )}\n      >\n         <div className=\"w-full space-y-2\">\n            <div className=\"mb-2 flex items-center justify-between\">\n               {showMultiplePackageOptions && (\n                  <div className=\"relative\">\n                     <div className=\"inline-flex overflow-hidden rounded-md border border-border text-xs\">\n                        {packageManagers.map((pm, index) => (\n                           <div key={pm} className=\"flex items-center\">\n                              {index > 0 && (\n                                 <div\n                                    className=\"h-4 w-px bg-border\"\n                                    aria-hidden=\"true\"\n                                 />\n                              )}\n                              <Button\n                                 variant=\"ghost\"\n                                 size=\"sm\"\n                                 className={`relative rounded-none bg-background px-2 py-1 hover:bg-background ${\n                                    packageManager === pm\n                                       ? \"text-primary\"\n                                       : \"text-muted-foreground\"\n                                 }`}\n                                 onClick={() => setPackageManager(pm)}\n                              >\n                                 {pm}\n                                 {packageManager === pm && (\n                                    <motion.div\n                                       className=\"absolute inset-x-0 bottom-[1px] mx-auto h-0.5 w-[90%] bg-primary\"\n                                       layoutId=\"activeTab\"\n                                       initial={false}\n                                       transition={{\n                                          type: \"spring\",\n                                          stiffness: 500,\n                                          damping: 30,\n                                       }}\n                                    />\n                                 )}\n                              </Button>\n                           </div>\n                        ))}\n                     </div>\n                  </div>\n               )}\n            </div>\n            <div className=\"relative flex items-center\">\n               <div className=\"min-w-[300px] grow font-mono\">\n                  {highlightedCode ? (\n                     <div\n                        className={`[&>pre]:overflow-x-auto [&>pre]:rounded-md [&>pre]:p-2 [&>pre]:px-4 [&>pre]:font-mono ${\n                           theme === \"dark\" ? \"dark\" : \"light\"\n                        }`}\n                        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n                     />\n                  ) : (\n                     <pre className=\"rounded-md border border-border bg-white p-2 px-4 font-mono dark:bg-black\">\n                        {command}\n                     </pre>\n                  )}\n               </div>\n               <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  className=\"relative ml-2 rounded-md\"\n                  onClick={copyToClipboard}\n                  aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n               >\n                  <span className=\"sr-only\">{copied ? \"Copied\" : \"Copy\"}</span>\n                  <Copy\n                     className={`h-4 w-4 transition-all duration-300 ${\n                        copied ? \"scale-0\" : \"scale-100\"\n                     }`}\n                  />\n                  <Check\n                     className={`absolute inset-0 m-auto h-4 w-4 transition-all duration-300 ${\n                        copied ? \"scale-100\" : \"scale-0\"\n                     }`}\n                  />\n               </Button>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/scroll-area-demo.json b/apps/web/public/r/styles/default/scroll-area-demo.json
index cde6678a..53c6b9d0 100644
--- a/apps/web/public/r/styles/default/scroll-area-demo.json
+++ b/apps/web/public/r/styles/default/scroll-area-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-area-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "scroll-area"
   ],
   "files": [
     {
-      "path": "example/scroll-area-demo.tsx",
-      "content": "import * as React from 'react'\n\nimport { ScrollArea } from '~/registry/default/ui/scroll-area'\nimport { Separator } from '~/registry/default/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n   (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n\nexport default function ScrollAreaDemo() {\n   return (\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n         <div className=\"p-4\">\n            <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n            {tags.map(tag => (\n               <>\n                  <div key={tag} className=\"text-sm\">\n                     {tag}\n                  </div>\n                  <Separator className=\"my-2\" />\n               </>\n            ))}\n         </div>\n      </ScrollArea>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"~/registry/default/ui/scroll-area\"\nimport { Separator } from \"~/registry/default/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n   (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n\nexport default function ScrollAreaDemo() {\n   return (\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n         <div className=\"p-4\">\n            <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n            {tags.map((tag) => (\n               <>\n                  <div key={tag} className=\"text-sm\">\n                     {tag}\n                  </div>\n                  <Separator className=\"my-2\" />\n               </>\n            ))}\n         </div>\n      </ScrollArea>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/scroll-area-horizontal-demo.json b/apps/web/public/r/styles/default/scroll-area-horizontal-demo.json
index c732cccf..45b6c823 100644
--- a/apps/web/public/r/styles/default/scroll-area-horizontal-demo.json
+++ b/apps/web/public/r/styles/default/scroll-area-horizontal-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-area-horizontal-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "scroll-area"
   ],
   "files": [
     {
-      "path": "example/scroll-area-horizontal-demo.tsx",
-      "content": "import * as React from 'react'\nimport Image from 'next/image'\n\nimport { ScrollArea, ScrollBar } from '~/registry/default/ui/scroll-area'\n\nexport interface Artwork {\n   artist: string\n   art: string\n}\n\nexport const works: Artwork[] = [\n   {\n      artist: 'Ornella Binni',\n      art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n   },\n   {\n      artist: 'Tom Byrom',\n      art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n   },\n   {\n      artist: 'Vladimir Malyavko',\n      art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n   },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n   return (\n      <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n         <div className=\"flex w-max space-x-4 p-4\">\n            {works.map(artwork => (\n               <figure key={artwork.artist} className=\"shrink-0\">\n                  <div className=\"overflow-hidden rounded-md\">\n                     <Image\n                        src={artwork.art}\n                        alt={`Photo by ${artwork.artist}`}\n                        className=\"aspect-[3/4] size-fit object-cover\"\n                        width={300}\n                        height={400}\n                     />\n                  </div>\n                  <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                     Photo by\n                     {' '}\n                     <span className=\"text-foreground font-semibold\">\n                        {artwork.artist}\n                     </span>\n                  </figcaption>\n               </figure>\n            ))}\n         </div>\n         <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/scroll-area-horizontal-demo.tsx",
+      "content": "import Image from \"next/image\"\nimport * as React from \"react\"\n\nimport { ScrollArea, ScrollBar } from \"~/registry/default/ui/scroll-area\"\n\nexport interface Artwork {\n   artist: string\n   art: string\n}\n\nexport const works: Artwork[] = [\n   {\n      artist: \"Ornella Binni\",\n      art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n   },\n   {\n      artist: \"Tom Byrom\",\n      art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n   },\n   {\n      artist: \"Vladimir Malyavko\",\n      art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n   },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n   return (\n      <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n         <div className=\"flex w-max space-x-4 p-4\">\n            {works.map((artwork) => (\n               <figure key={artwork.artist} className=\"shrink-0\">\n                  <div className=\"overflow-hidden rounded-md\">\n                     <Image\n                        src={artwork.art}\n                        alt={`Photo by ${artwork.artist}`}\n                        className=\"aspect-[3/4] size-fit object-cover\"\n                        width={300}\n                        height={400}\n                     />\n                  </div>\n                  <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                     Photo by{\" \"}\n                     <span className=\"text-foreground font-semibold\">\n                        {artwork.artist}\n                     </span>\n                  </figcaption>\n               </figure>\n            ))}\n         </div>\n         <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/scroll-area.json b/apps/web/public/r/styles/default/scroll-area.json
index 029fa7dd..25dc8051 100644
--- a/apps/web/public/r/styles/default/scroll-area.json
+++ b/apps/web/public/r/styles/default/scroll-area.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-area",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-scroll-area"
   ],
   "files": [
     {
       "path": "ui/scroll-area.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\n\nimport { ny } from '~/lib/utils'\n\nconst ScrollArea = React.forwardRef<\n   React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={ny('relative overflow-hidden', className)}\n      {...props}\n   >\n      <ScrollAreaPrimitive.Viewport className=\"size-full rounded-[inherit]\">\n         {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n   </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n   <ScrollAreaPrimitive.ScrollAreaScrollbar\n      ref={ref}\n      orientation={orientation}\n      className={ny(\n         'flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n         && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n         && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         className,\n      )}\n      {...props}\n   >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-border relative flex-1 rounded-full\" />\n   </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n   React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={ny(\"relative overflow-hidden\", className)}\n      {...props}\n   >\n      <ScrollAreaPrimitive.Viewport className=\"size-full rounded-[inherit]\">\n         {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n   </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n   React.ComponentPropsWithoutRef<\n      typeof ScrollAreaPrimitive.ScrollAreaScrollbar\n   >\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n   <ScrollAreaPrimitive.ScrollAreaScrollbar\n      ref={ref}\n      orientation={orientation}\n      className={ny(\n         \"flex touch-none select-none transition-colors\",\n         orientation === \"vertical\" &&\n            \"h-full w-2.5 border-l border-l-transparent p-px\",\n         orientation === \"horizontal\" &&\n            \"h-2.5 flex-col border-t border-t-transparent p-px\",\n         className,\n      )}\n      {...props}\n   >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-border relative flex-1 rounded-full\" />\n   </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/scroll-based-velocity-demo.json b/apps/web/public/r/styles/default/scroll-based-velocity-demo.json
index d5bdb8c8..d30e26bb 100644
--- a/apps/web/public/r/styles/default/scroll-based-velocity-demo.json
+++ b/apps/web/public/r/styles/default/scroll-based-velocity-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-based-velocity-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/scroll-based-velocity-demo.tsx",
-      "content": "import { VelocityScroll } from '~/registry/default/ui/scroll-based-velocity'\n\nexport default function ScrollBasedVelocityDemo() {\n   return (\n      <VelocityScroll\n         text=\"Velocity Scroll\"\n         default_velocity={5}\n         className=\"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/scroll-based-velocity-demo.tsx",
+      "content": "import { VelocityScroll } from \"~/registry/default/ui/scroll-based-velocity\"\n\nexport default function ScrollBasedVelocityDemo() {\n   return (\n      <VelocityScroll\n         text=\"Velocity Scroll\"\n         default_velocity={5}\n         className=\"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/scroll-based-velocity.json b/apps/web/public/r/styles/default/scroll-based-velocity.json
index 714beeb9..2704169f 100644
--- a/apps/web/public/r/styles/default/scroll-based-velocity.json
+++ b/apps/web/public/r/styles/default/scroll-based-velocity.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-based-velocity",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/scroll-based-velocity.tsx",
-      "content": "'use client'\n\nimport { wrap } from '@motionone/utils'\nimport {\n   motion,\n   useAnimationFrame,\n   useMotionValue,\n   useScroll,\n   useSpring,\n   useTransform,\n   useVelocity,\n} from 'framer-motion'\nimport React, { useEffect, useRef, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface VelocityScrollProps {\n   text: string\n   default_velocity?: number\n   className?: string\n}\n\ninterface ParallaxProps {\n   children: string\n   baseVelocity: number\n   className?: string\n}\n\nexport function VelocityScroll({\n   text,\n   default_velocity = 5,\n   className,\n}: VelocityScrollProps) {\n   function ParallaxText({\n      children,\n      baseVelocity = 100,\n      className,\n   }: ParallaxProps) {\n      const baseX = useMotionValue(0)\n      const { scrollY } = useScroll()\n      const scrollVelocity = useVelocity(scrollY)\n      const smoothVelocity = useSpring(scrollVelocity, {\n         damping: 50,\n         stiffness: 400,\n      })\n\n      const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {\n         clamp: false,\n      })\n\n      const [repetitions, setRepetitions] = useState(1)\n      const containerRef = useRef<HTMLDivElement>(null)\n      const textRef = useRef<HTMLSpanElement>(null)\n\n      useEffect(() => {\n         const calculateRepetitions = () => {\n            if (containerRef.current && textRef.current) {\n               const containerWidth = containerRef.current.offsetWidth\n               const textWidth = textRef.current.offsetWidth\n               const newRepetitions = Math.ceil(containerWidth / textWidth) + 2\n               setRepetitions(newRepetitions)\n            }\n         }\n\n         calculateRepetitions()\n\n         window.addEventListener('resize', calculateRepetitions)\n         return () => window.removeEventListener('resize', calculateRepetitions)\n      }, [children])\n\n      const x = useTransform(baseX, v => `${wrap(-100 / repetitions, 0, v)}%`)\n\n      const directionFactor = React.useRef<number>(1)\n      useAnimationFrame((t, delta) => {\n         let moveBy = directionFactor.current * baseVelocity * (delta / 1000)\n\n         if (velocityFactor.get() < 0)\n            directionFactor.current = -1\n         else if (velocityFactor.get() > 0)\n            directionFactor.current = 1\n\n         moveBy += directionFactor.current * moveBy * velocityFactor.get()\n\n         baseX.set(baseX.get() + moveBy)\n      })\n\n      return (\n         <div\n            className=\"w-full overflow-hidden whitespace-nowrap\"\n            ref={containerRef}\n         >\n            <motion.div className={ny('inline-block', className)} style={{ x }}>\n               {Array.from({ length: repetitions }).map((_, i) => (\n                  <span key={i} ref={i === 0 ? textRef : null}>\n                     {children}\n                     {' '}\n                  </span>\n               ))}\n            </motion.div>\n         </div>\n      )\n   }\n\n   return (\n      <section className=\"relative w-full\">\n         <ParallaxText baseVelocity={default_velocity} className={className}>\n            {text}\n         </ParallaxText>\n         <ParallaxText baseVelocity={-default_velocity} className={className}>\n            {text}\n         </ParallaxText>\n      </section>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { wrap } from \"@motionone/utils\"\nimport {\n   motion,\n   useAnimationFrame,\n   useMotionValue,\n   useScroll,\n   useSpring,\n   useTransform,\n   useVelocity,\n} from \"framer-motion\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface VelocityScrollProps {\n   text: string\n   default_velocity?: number\n   className?: string\n}\n\ninterface ParallaxProps {\n   children: string\n   baseVelocity: number\n   className?: string\n}\n\nexport function VelocityScroll({\n   text,\n   default_velocity = 5,\n   className,\n}: VelocityScrollProps) {\n   function ParallaxText({\n      children,\n      baseVelocity = 100,\n      className,\n   }: ParallaxProps) {\n      const baseX = useMotionValue(0)\n      const { scrollY } = useScroll()\n      const scrollVelocity = useVelocity(scrollY)\n      const smoothVelocity = useSpring(scrollVelocity, {\n         damping: 50,\n         stiffness: 400,\n      })\n\n      const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {\n         clamp: false,\n      })\n\n      const [repetitions, setRepetitions] = useState(1)\n      const containerRef = useRef<HTMLDivElement>(null)\n      const textRef = useRef<HTMLSpanElement>(null)\n\n      useEffect(() => {\n         const calculateRepetitions = () => {\n            if (containerRef.current && textRef.current) {\n               const containerWidth = containerRef.current.offsetWidth\n               const textWidth = textRef.current.offsetWidth\n               const newRepetitions = Math.ceil(containerWidth / textWidth) + 2\n               setRepetitions(newRepetitions)\n            }\n         }\n\n         calculateRepetitions()\n\n         window.addEventListener(\"resize\", calculateRepetitions)\n         return () => window.removeEventListener(\"resize\", calculateRepetitions)\n      }, [children])\n\n      const x = useTransform(baseX, (v) => `${wrap(-100 / repetitions, 0, v)}%`)\n\n      const directionFactor = React.useRef<number>(1)\n      useAnimationFrame((t, delta) => {\n         let moveBy = directionFactor.current * baseVelocity * (delta / 1000)\n\n         if (velocityFactor.get() < 0) directionFactor.current = -1\n         else if (velocityFactor.get() > 0) directionFactor.current = 1\n\n         moveBy += directionFactor.current * moveBy * velocityFactor.get()\n\n         baseX.set(baseX.get() + moveBy)\n      })\n\n      return (\n         <div\n            className=\"w-full overflow-hidden whitespace-nowrap\"\n            ref={containerRef}\n         >\n            <motion.div className={ny(\"inline-block\", className)} style={{ x }}>\n               {Array.from({ length: repetitions }).map((_, i) => (\n                  <span key={i} ref={i === 0 ? textRef : null}>\n                     {children}{\" \"}\n                  </span>\n               ))}\n            </motion.div>\n         </div>\n      )\n   }\n\n   return (\n      <section className=\"relative w-full\">\n         <ParallaxText baseVelocity={default_velocity} className={className}>\n            {text}\n         </ParallaxText>\n         <ParallaxText baseVelocity={-default_velocity} className={className}>\n            {text}\n         </ParallaxText>\n      </section>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/scroll-progress-demo.json b/apps/web/public/r/styles/default/scroll-progress-demo.json
index 5a94ed56..217700a9 100644
--- a/apps/web/public/r/styles/default/scroll-progress-demo.json
+++ b/apps/web/public/r/styles/default/scroll-progress-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-progress-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/scroll-progress-demo.tsx",
-      "content": "import ScrollProgress from '~/registry/default/ui/scroll-progress'\n\nconst dummyContent = Array.from({ length: 10 }, (_, i) => (\n   <p key={i}>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam\n      lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra\n      nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget\n      libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut\n      porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies\n      a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n   </p>\n))\n\nfunction ScrollProgressDemo() {\n   return (\n      <div>\n         <ScrollProgress className=\"top-[65px]\" />\n         <strong>Note: The scroll progress is shown below the navbar of the page.</strong>\n         {dummyContent}\n      </div>\n   )\n}\n\nexport default ScrollProgressDemo\n",
-      "type": "registry:component",
+      "path": "examples/scroll-progress-demo.tsx",
+      "content": "import ScrollProgress from \"~/registry/default/ui/scroll-progress\"\n\nconst dummyContent = Array.from({ length: 10 }, (_, i) => (\n   <p key={i}>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam\n      lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra\n      nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam\n      eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue\n      enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu\n      vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur\n      adipiscing elit.\n   </p>\n))\n\nfunction ScrollProgressDemo() {\n   return (\n      <div>\n         <ScrollProgress className=\"top-[65px]\" />\n         <strong>\n            Note: The scroll progress is shown below the navbar of the page.\n         </strong>\n         {dummyContent}\n      </div>\n   )\n}\n\nexport default ScrollProgressDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/scroll-progress.json b/apps/web/public/r/styles/default/scroll-progress.json
index f44f124e..f16be29a 100644
--- a/apps/web/public/r/styles/default/scroll-progress.json
+++ b/apps/web/public/r/styles/default/scroll-progress.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-progress",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/scroll-progress.tsx",
-      "content": "import { motion, useScroll, useSpring } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface ScrollProgressProps {\n   className?: string\n}\n\nexport default function ScrollProgress({\n   className,\n}: ScrollProgressProps) {\n   const { scrollYProgress } = useScroll()\n\n   const scaleX = useSpring(scrollYProgress, {\n      stiffness: 200,\n      damping: 50,\n      restDelta: 0.001,\n   })\n\n   return (\n      <motion.div\n         className={ny('fixed inset-x-0 top-0 z-[1000] h-1 origin-left bg-gradient-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]', className)}\n         style={{\n            scaleX,\n         }}\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { motion, useScroll, useSpring } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface ScrollProgressProps {\n   className?: string\n}\n\nexport default function ScrollProgress({ className }: ScrollProgressProps) {\n   const { scrollYProgress } = useScroll()\n\n   const scaleX = useSpring(scrollYProgress, {\n      stiffness: 200,\n      damping: 50,\n      restDelta: 0.001,\n   })\n\n   return (\n      <motion.div\n         className={ny(\n            \"fixed inset-x-0 top-0 z-[1000] h-1 origin-left bg-gradient-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]\",\n            className,\n         )}\n         style={{\n            scaleX,\n         }}\n      />\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/select-demo.json b/apps/web/public/r/styles/default/select-demo.json
index 605bf356..2b0a86ff 100644
--- a/apps/web/public/r/styles/default/select-demo.json
+++ b/apps/web/public/r/styles/default/select-demo.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "select-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "select"
   ],
   "files": [
     {
-      "path": "example/select-demo.tsx",
-      "content": "import * as React from 'react'\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/default/ui/select'\n\nexport default function SelectDemo() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[180px]\">\n            <SelectValue placeholder=\"Select a fruit\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>Fruits</SelectLabel>\n               <SelectItem value=\"apple\">Apple</SelectItem>\n               <SelectItem value=\"banana\">Banana</SelectItem>\n               <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n               <SelectItem value=\"grapes\">Grapes</SelectItem>\n               <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
+      "path": "examples/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/default/ui/select\"\n\nexport default function SelectDemo() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[180px]\">\n            <SelectValue placeholder=\"Select a fruit\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>Fruits</SelectLabel>\n               <SelectItem value=\"apple\">Apple</SelectItem>\n               <SelectItem value=\"banana\">Banana</SelectItem>\n               <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n               <SelectItem value=\"grapes\">Grapes</SelectItem>\n               <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/select-form.json b/apps/web/public/r/styles/default/select-form.json
index 01e3f081..6defaec2 100644
--- a/apps/web/public/r/styles/default/select-form.json
+++ b/apps/web/public/r/styles/default/select-form.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "select-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "select"
   ],
   "files": [
     {
-      "path": "example/select-form.tsx",
-      "content": "'use client'\n\nimport Link from 'next/link'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/default/ui/select'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst FormSchema = z.object({\n   email: z\n      .string({\n         required_error: 'Please select an email to display.',\n      })\n      .email(),\n})\n\nexport default function SelectForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"email\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Email</FormLabel>\n                     <Select onValueChange={field.onChange} defaultValue={field.value}>\n                        <FormControl>\n                           <SelectTrigger>\n                              <SelectValue placeholder=\"Select a verified email to display\" />\n                           </SelectTrigger>\n                        </FormControl>\n                        <SelectContent>\n                           <SelectItem value=\"m@example.com\">m@example.com</SelectItem>\n                           <SelectItem value=\"m@google.com\">m@google.com</SelectItem>\n                           <SelectItem value=\"m@support.com\">m@support.com</SelectItem>\n                        </SelectContent>\n                     </Select>\n                     <FormDescription>\n                        You can manage email addresses in your\n                        {' '}\n                        <Link href=\"/examples/forms\">email settings</Link>\n                        .\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "path": "examples/select-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport Link from \"next/link\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/default/ui/select\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst FormSchema = z.object({\n   email: z\n      .string({\n         required_error: \"Please select an email to display.\",\n      })\n      .email(),\n})\n\nexport default function SelectForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"email\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Email</FormLabel>\n                     <Select\n                        onValueChange={field.onChange}\n                        defaultValue={field.value}\n                     >\n                        <FormControl>\n                           <SelectTrigger>\n                              <SelectValue placeholder=\"Select a verified email to display\" />\n                           </SelectTrigger>\n                        </FormControl>\n                        <SelectContent>\n                           <SelectItem value=\"m@example.com\">\n                              m@example.com\n                           </SelectItem>\n                           <SelectItem value=\"m@google.com\">\n                              m@google.com\n                           </SelectItem>\n                           <SelectItem value=\"m@support.com\">\n                              m@support.com\n                           </SelectItem>\n                        </SelectContent>\n                     </Select>\n                     <FormDescription>\n                        You can manage email addresses in your{\" \"}\n                        <Link href=\"/examples/forms\">email settings</Link>.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/select-scrollable.json b/apps/web/public/r/styles/default/select-scrollable.json
index 2ec68a52..6377177f 100644
--- a/apps/web/public/r/styles/default/select-scrollable.json
+++ b/apps/web/public/r/styles/default/select-scrollable.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "select-scrollable",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "select"
   ],
   "files": [
     {
-      "path": "example/select-scrollable.tsx",
-      "content": "import * as React from 'react'\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/default/ui/select'\n\nexport default function SelectScrollable() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[280px]\">\n            <SelectValue placeholder=\"Select a timezone\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>North America</SelectLabel>\n               <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n               <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n               <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n               <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n               <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n               <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Europe & Africa</SelectLabel>\n               <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n               <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n               <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n               <SelectItem value=\"west\">\n                  Western European Summer Time (WEST)\n               </SelectItem>\n               <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n               <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Asia</SelectLabel>\n               <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n               <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n               <SelectItem value=\"cst_china\">China Standard Time (CST)</SelectItem>\n               <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n               <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n               <SelectItem value=\"ist_indonesia\">\n                  Indonesia Central Standard Time (WITA)\n               </SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Australia & Pacific</SelectLabel>\n               <SelectItem value=\"awst\">\n                  Australian Western Standard Time (AWST)\n               </SelectItem>\n               <SelectItem value=\"acst\">\n                  Australian Central Standard Time (ACST)\n               </SelectItem>\n               <SelectItem value=\"aest\">\n                  Australian Eastern Standard Time (AEST)\n               </SelectItem>\n               <SelectItem value=\"nzst\">New Zealand Standard Time (NZST)</SelectItem>\n               <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>South America</SelectLabel>\n               <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n               <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n               <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n               <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
+      "path": "examples/select-scrollable.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/default/ui/select\"\n\nexport default function SelectScrollable() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[280px]\">\n            <SelectValue placeholder=\"Select a timezone\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>North America</SelectLabel>\n               <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n               <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n               <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n               <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n               <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n               <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Europe & Africa</SelectLabel>\n               <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n               <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n               <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n               <SelectItem value=\"west\">\n                  Western European Summer Time (WEST)\n               </SelectItem>\n               <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n               <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Asia</SelectLabel>\n               <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n               <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n               <SelectItem value=\"cst_china\">\n                  China Standard Time (CST)\n               </SelectItem>\n               <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n               <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n               <SelectItem value=\"ist_indonesia\">\n                  Indonesia Central Standard Time (WITA)\n               </SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Australia & Pacific</SelectLabel>\n               <SelectItem value=\"awst\">\n                  Australian Western Standard Time (AWST)\n               </SelectItem>\n               <SelectItem value=\"acst\">\n                  Australian Central Standard Time (ACST)\n               </SelectItem>\n               <SelectItem value=\"aest\">\n                  Australian Eastern Standard Time (AEST)\n               </SelectItem>\n               <SelectItem value=\"nzst\">\n                  New Zealand Standard Time (NZST)\n               </SelectItem>\n               <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>South America</SelectLabel>\n               <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n               <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n               <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n               <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/select.json b/apps/web/public/r/styles/default/select.json
index 48d57745..c30cda1d 100644
--- a/apps/web/public/r/styles/default/select.json
+++ b/apps/web/public/r/styles/default/select.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "select",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-select"
   ],
   "files": [
     {
       "path": "ui/select.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { Check, ChevronDown, ChevronUp } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <SelectPrimitive.Trigger\n      ref={ref}\n      className={ny(\n         'border-input bg-background ring-offset-background placeholder:data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-left text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n         className,\n      )}\n      onPointerDown={(e) => {\n         if (e.pointerType === 'touch')\n            e.preventDefault()\n      }}\n      {...props}\n   >\n      {children}\n      <SelectPrimitive.Icon asChild>\n         <ChevronDown className=\"size-4 shrink-0 opacity-50\" />\n      </SelectPrimitive.Icon>\n   </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.ScrollUpButton\n      ref={ref}\n      className={ny(\n         'flex cursor-default items-center justify-center py-1',\n         className,\n      )}\n      {...props}\n   >\n      <ChevronUp className=\"size-4\" />\n   </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.ScrollDownButton\n      ref={ref}\n      className={ny(\n         'flex cursor-default items-center justify-center py-1',\n         className,\n      )}\n      {...props}\n   >\n      <ChevronDown className=\"size-4\" />\n   </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName\n  = SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n   <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n         ref={ref}\n         className={ny(\n            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',\n            position === 'popper'\n            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n            className,\n         )}\n         position={position}\n         {...props}\n      >\n         <SelectScrollUpButton />\n         <SelectPrimitive.Viewport\n            className={ny(\n               'p-1',\n               position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',\n            )}\n         >\n            {children}\n         </SelectPrimitive.Viewport>\n         <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n   </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.Label\n      ref={ref}\n      className={ny('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}\n      {...props}\n   />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n   <SelectPrimitive.Item\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <SelectPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </SelectPrimitive.ItemIndicator>\n      </span>\n\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n   </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.Separator\n      ref={ref}\n      className={ny('bg-muted -mx-1 my-1 h-px', className)}\n      {...props}\n   />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n   Select,\n   SelectGroup,\n   SelectValue,\n   SelectTrigger,\n   SelectContent,\n   SelectLabel,\n   SelectItem,\n   SelectSeparator,\n   SelectScrollUpButton,\n   SelectScrollDownButton,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <SelectPrimitive.Trigger\n      ref={ref}\n      className={ny(\n         \"border-input bg-background ring-offset-background placeholder:data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-left text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n         className,\n      )}\n      onPointerDown={(e) => {\n         if (e.pointerType === \"touch\") e.preventDefault()\n      }}\n      {...props}\n   >\n      {children}\n      <SelectPrimitive.Icon asChild>\n         <ChevronDown className=\"size-4 shrink-0 opacity-50\" />\n      </SelectPrimitive.Icon>\n   </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.ScrollUpButton\n      ref={ref}\n      className={ny(\n         \"flex cursor-default items-center justify-center py-1\",\n         className,\n      )}\n      {...props}\n   >\n      <ChevronUp className=\"size-4\" />\n   </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.ScrollDownButton\n      ref={ref}\n      className={ny(\n         \"flex cursor-default items-center justify-center py-1\",\n         className,\n      )}\n      {...props}\n   >\n      <ChevronDown className=\"size-4\" />\n   </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n   SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n   <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n         ref={ref}\n         className={ny(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md\",\n            position === \"popper\" &&\n               \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n            className,\n         )}\n         position={position}\n         {...props}\n      >\n         <SelectScrollUpButton />\n         <SelectPrimitive.Viewport\n            className={ny(\n               \"p-1\",\n               position === \"popper\" &&\n                  \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n            )}\n         >\n            {children}\n         </SelectPrimitive.Viewport>\n         <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n   </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.Label\n      ref={ref}\n      className={ny(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\n      {...props}\n   />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n   <SelectPrimitive.Item\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <SelectPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </SelectPrimitive.ItemIndicator>\n      </span>\n\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n   </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.Separator\n      ref={ref}\n      className={ny(\"bg-muted -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n   Select,\n   SelectGroup,\n   SelectValue,\n   SelectTrigger,\n   SelectContent,\n   SelectLabel,\n   SelectItem,\n   SelectSeparator,\n   SelectScrollUpButton,\n   SelectScrollDownButton,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/separate-away-demo.json b/apps/web/public/r/styles/default/separate-away-demo.json
index 3c016608..34259760 100644
--- a/apps/web/public/r/styles/default/separate-away-demo.json
+++ b/apps/web/public/r/styles/default/separate-away-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "separate-away-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/separate-away-demo.tsx",
-      "content": "import { SeparateAway } from '~/registry/default/ui/separate-away'\n\nexport default async function SeparateAwayDemo() {\n   return (\n      <SeparateAway\n         upper_text=\"Separate\"\n         lower_text=\"Away\"\n         duration={1.5}\n         hidden_opacity={0}\n         visible_opacity={1}\n         className=\"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/separate-away-demo.tsx",
+      "content": "import { SeparateAway } from \"~/registry/default/ui/separate-away\"\n\nexport default async function SeparateAwayDemo() {\n   return (\n      <SeparateAway\n         upper_text=\"Separate\"\n         lower_text=\"Away\"\n         duration={1.5}\n         hidden_opacity={0}\n         visible_opacity={1}\n         className=\"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/separate-away.json b/apps/web/public/r/styles/default/separate-away.json
index e6824739..6c12480e 100644
--- a/apps/web/public/r/styles/default/separate-away.json
+++ b/apps/web/public/r/styles/default/separate-away.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "separate-away",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/separate-away.tsx",
-      "content": "'use client'\n\nimport { motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface SeparateAwayProps {\n   upper_text: string\n   lower_text: string\n   duration?: number\n   hidden_opacity?: number\n   visible_opacity?: number\n   className?: string\n}\n\nexport function SeparateAway({\n   upper_text,\n   lower_text,\n   duration = 1.5,\n   hidden_opacity = 0,\n   visible_opacity = 1,\n   className,\n}: SeparateAwayProps) {\n   const separate = {\n      hidden: { opacity: hidden_opacity, y: 0 },\n      visible: (custom: number) => ({\n         opacity: visible_opacity,\n         y: custom * 5,\n         transition: { duration },\n      }),\n   }\n\n   return (\n      <div>\n         <motion.h1\n            custom={-1}\n            variants={separate}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className={ny(className)}\n         >\n            {upper_text}\n         </motion.h1>\n         <motion.h1\n            custom={1}\n            variants={separate}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className={ny(className)}\n         >\n            {lower_text}\n         </motion.h1>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface SeparateAwayProps {\n   upper_text: string\n   lower_text: string\n   duration?: number\n   hidden_opacity?: number\n   visible_opacity?: number\n   className?: string\n}\n\nexport function SeparateAway({\n   upper_text,\n   lower_text,\n   duration = 1.5,\n   hidden_opacity = 0,\n   visible_opacity = 1,\n   className,\n}: SeparateAwayProps) {\n   const separate = {\n      hidden: { opacity: hidden_opacity, y: 0 },\n      visible: (custom: number) => ({\n         opacity: visible_opacity,\n         y: custom * 5,\n         transition: { duration },\n      }),\n   }\n\n   return (\n      <div>\n         <motion.h1\n            custom={-1}\n            variants={separate}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className={ny(className)}\n         >\n            {upper_text}\n         </motion.h1>\n         <motion.h1\n            custom={1}\n            variants={separate}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className={ny(className)}\n         >\n            {lower_text}\n         </motion.h1>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/separator-demo.json b/apps/web/public/r/styles/default/separator-demo.json
index 6e8c6394..488d45d0 100644
--- a/apps/web/public/r/styles/default/separator-demo.json
+++ b/apps/web/public/r/styles/default/separator-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "separator-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/separator-demo.tsx",
-      "content": "import { Separator } from '~/registry/default/ui/separator'\n\nexport default function SeparatorDemo() {\n   return (\n      <div>\n         <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n            <p className=\"text-muted-foreground text-sm\">\n               An open-source UI component library.\n            </p>\n         </div>\n         <Separator className=\"my-4\" />\n         <div className=\"flex h-5 items-center space-x-4 text-sm\">\n            <div>Blog</div>\n            <Separator orientation=\"vertical\" />\n            <div>Docs</div>\n            <Separator orientation=\"vertical\" />\n            <div>Source</div>\n         </div>\n      </div>\n   )\n}\n",
+      "path": "examples/separator-demo.tsx",
+      "content": "import { Separator } from \"~/registry/default/ui/separator\"\n\nexport default function SeparatorDemo() {\n   return (\n      <div>\n         <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-medium leading-none\">\n               Radix Primitives\n            </h4>\n            <p className=\"text-muted-foreground text-sm\">\n               An open-source UI component library.\n            </p>\n         </div>\n         <Separator className=\"my-4\" />\n         <div className=\"flex h-5 items-center space-x-4 text-sm\">\n            <div>Blog</div>\n            <Separator orientation=\"vertical\" />\n            <div>Docs</div>\n            <Separator orientation=\"vertical\" />\n            <div>Source</div>\n         </div>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/separator.json b/apps/web/public/r/styles/default/separator.json
index 0e66875c..f6056637 100644
--- a/apps/web/public/r/styles/default/separator.json
+++ b/apps/web/public/r/styles/default/separator.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "separator",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-separator"
   ],
   "files": [
     {
       "path": "ui/separator.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\n\nimport { ny } from '~/lib/utils'\n\nconst Separator = React.forwardRef<\n   React.ElementRef<typeof SeparatorPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n   (\n      { className, orientation = 'horizontal', decorative = true, ...props },\n      ref,\n   ) => (\n      <SeparatorPrimitive.Root\n         ref={ref}\n         decorative={decorative}\n         orientation={orientation}\n         className={ny(\n            'bg-border shrink-0',\n            orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n            className,\n         )}\n         {...props}\n      />\n   ),\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Separator = React.forwardRef<\n   React.ElementRef<typeof SeparatorPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n   (\n      { className, orientation = \"horizontal\", decorative = true, ...props },\n      ref,\n   ) => (\n      <SeparatorPrimitive.Root\n         ref={ref}\n         decorative={decorative}\n         orientation={orientation}\n         className={ny(\n            \"shrink-0 bg-border\",\n            orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n            className,\n         )}\n         {...props}\n      />\n   ),\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/sheet-demo.json b/apps/web/public/r/styles/default/sheet-demo.json
index 0e3159b5..0467c3d3 100644
--- a/apps/web/public/r/styles/default/sheet-demo.json
+++ b/apps/web/public/r/styles/default/sheet-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sheet-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/sheet-demo.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from '~/registry/default/ui/sheet'\n\nexport default function SheetDemo() {\n   return (\n      <Sheet>\n         <SheetTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </SheetTrigger>\n         <SheetContent>\n            <SheetHeader>\n               <SheetTitle>Edit profile</SheetTitle>\n               <SheetDescription>\n                  Make changes to your profile here. Click save when you're done.\n               </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input id=\"username\" value=\"~peduarte\" className=\"col-span-3\" />\n               </div>\n            </div>\n            <SheetFooter>\n               <SheetClose asChild>\n                  <Button type=\"submit\">Save changes</Button>\n               </SheetClose>\n            </SheetFooter>\n         </SheetContent>\n      </Sheet>\n   )\n}\n",
+      "path": "examples/sheet-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from \"~/registry/default/ui/sheet\"\n\nexport default function SheetDemo() {\n   return (\n      <Sheet>\n         <SheetTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </SheetTrigger>\n         <SheetContent>\n            <SheetHeader>\n               <SheetTitle>Edit profile</SheetTitle>\n               <SheetDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"~peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <SheetFooter>\n               <SheetClose asChild>\n                  <Button type=\"submit\">Save changes</Button>\n               </SheetClose>\n            </SheetFooter>\n         </SheetContent>\n      </Sheet>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/sheet-side.json b/apps/web/public/r/styles/default/sheet-side.json
index 9257a1f7..a44a4540 100644
--- a/apps/web/public/r/styles/default/sheet-side.json
+++ b/apps/web/public/r/styles/default/sheet-side.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sheet-side",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/sheet-side.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/default/ui/button'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from '~/registry/default/ui/sheet'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n   return (\n      <div className=\"grid grid-cols-2 gap-2\">\n         {SHEET_SIDES.map(side => (\n            <Sheet key={side}>\n               <SheetTrigger asChild>\n                  <Button variant=\"outline\">{side}</Button>\n               </SheetTrigger>\n               <SheetContent side={side}>\n                  <SheetHeader>\n                     <SheetTitle>Edit profile</SheetTitle>\n                     <SheetDescription>\n                        Make changes to your profile here. Click save when you're done.\n                     </SheetDescription>\n                  </SheetHeader>\n                  <div className=\"grid gap-4 py-4\">\n                     <div className=\"grid grid-cols-4 items-center gap-4\">\n                        <Label htmlFor=\"name\" className=\"text-right\">\n                           Name\n                        </Label>\n                        <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n                     </div>\n                     <div className=\"grid grid-cols-4 items-center gap-4\">\n                        <Label htmlFor=\"username\" className=\"text-right\">\n                           Username\n                        </Label>\n                        <Input id=\"username\" value=\"~peduarte\" className=\"col-span-3\" />\n                     </div>\n                  </div>\n                  <SheetFooter>\n                     <SheetClose asChild>\n                        <Button type=\"submit\">Save changes</Button>\n                     </SheetClose>\n                  </SheetFooter>\n               </SheetContent>\n            </Sheet>\n         ))}\n      </div>\n   )\n}\n",
+      "path": "examples/sheet-side.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from \"~/registry/default/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n   return (\n      <div className=\"grid grid-cols-2 gap-2\">\n         {SHEET_SIDES.map((side) => (\n            <Sheet key={side}>\n               <SheetTrigger asChild>\n                  <Button variant=\"outline\">{side}</Button>\n               </SheetTrigger>\n               <SheetContent side={side}>\n                  <SheetHeader>\n                     <SheetTitle>Edit profile</SheetTitle>\n                     <SheetDescription>\n                        Make changes to your profile here. Click save when\n                        you're done.\n                     </SheetDescription>\n                  </SheetHeader>\n                  <div className=\"grid gap-4 py-4\">\n                     <div className=\"grid grid-cols-4 items-center gap-4\">\n                        <Label htmlFor=\"name\" className=\"text-right\">\n                           Name\n                        </Label>\n                        <Input\n                           id=\"name\"\n                           value=\"Pedro Duarte\"\n                           className=\"col-span-3\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-4 items-center gap-4\">\n                        <Label htmlFor=\"username\" className=\"text-right\">\n                           Username\n                        </Label>\n                        <Input\n                           id=\"username\"\n                           value=\"~peduarte\"\n                           className=\"col-span-3\"\n                        />\n                     </div>\n                  </div>\n                  <SheetFooter>\n                     <SheetClose asChild>\n                        <Button type=\"submit\">Save changes</Button>\n                     </SheetClose>\n                  </SheetFooter>\n               </SheetContent>\n            </Sheet>\n         ))}\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/sheet.json b/apps/web/public/r/styles/default/sheet.json
index adda65f1..685efaf8 100644
--- a/apps/web/public/r/styles/default/sheet.json
+++ b/apps/web/public/r/styles/default/sheet.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sheet",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/sheet.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as SheetPrimitive from '@radix-ui/react-dialog'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { X } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Overlay\n      className={ny(\n         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',\n         className,\n      )}\n      {...props}\n      ref={ref}\n   />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n   {\n      variants: {\n         side: {\n            top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n            bottom:\n          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n            left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n            right:\n          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n         },\n      },\n      defaultVariants: {\n         side: 'right',\n      },\n   },\n)\n\ninterface SheetContentProps\n   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n   VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Content>,\n   SheetContentProps\n>(({ side = 'right', className, children, ...props }, ref) => (\n   <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n         ref={ref}\n         className={ny(sheetVariants({ side }), className)}\n         {...props}\n      >\n         {children}\n         <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n         </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n   </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nfunction SheetHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            'flex flex-col space-y-2 text-center sm:text-start',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nSheetHeader.displayName = 'SheetHeader'\n\nfunction SheetFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nSheetFooter.displayName = 'SheetFooter'\n\nconst SheetTitle = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Title\n      ref={ref}\n      className={ny('text-foreground text-lg font-semibold', className)}\n      {...props}\n   />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Description\n      ref={ref}\n      className={ny('text-muted-foreground text-sm', className)}\n      {...props}\n   />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n   Sheet,\n   SheetPortal,\n   SheetOverlay,\n   SheetTrigger,\n   SheetClose,\n   SheetContent,\n   SheetHeader,\n   SheetFooter,\n   SheetTitle,\n   SheetDescription,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Overlay\n      className={ny(\n         \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80\",\n         className,\n      )}\n      {...props}\n      ref={ref}\n   />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n   \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n   {\n      variants: {\n         side: {\n            top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n            bottom:\n               \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n            left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n            right: \"inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n         },\n      },\n      defaultVariants: {\n         side: \"right\",\n      },\n   },\n)\n\ninterface SheetContentProps\n   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n      VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Content>,\n   SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n   <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n         ref={ref}\n         className={ny(sheetVariants({ side }), className)}\n         {...props}\n      >\n         {children}\n         <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n         </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n   </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nfunction SheetHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            \"flex flex-col space-y-2 text-center sm:text-start\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nSheetHeader.displayName = \"SheetHeader\"\n\nfunction SheetFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Title\n      ref={ref}\n      className={ny(\"text-foreground text-lg font-semibold\", className)}\n      {...props}\n   />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Description\n      ref={ref}\n      className={ny(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n   Sheet,\n   SheetPortal,\n   SheetOverlay,\n   SheetTrigger,\n   SheetClose,\n   SheetContent,\n   SheetHeader,\n   SheetFooter,\n   SheetTitle,\n   SheetDescription,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/shimmer-button-demo.json b/apps/web/public/r/styles/default/shimmer-button-demo.json
index 76960c22..2dd031e5 100644
--- a/apps/web/public/r/styles/default/shimmer-button-demo.json
+++ b/apps/web/public/r/styles/default/shimmer-button-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shimmer-button-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/shimmer-button-demo.tsx",
-      "content": "import ShimmerButton from '~/registry/default/ui/shimmer-button'\n\nexport default function ShimmerButtonDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <ShimmerButton className=\"shadow-2xl\">\n            <span className=\"whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10\">\n               Shimmer Button\n            </span>\n         </ShimmerButton>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/shimmer-button-demo.tsx",
+      "content": "import ShimmerButton from \"~/registry/default/ui/shimmer-button\"\n\nexport default function ShimmerButtonDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <ShimmerButton className=\"shadow-2xl\">\n            <span className=\"whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10\">\n               Shimmer Button\n            </span>\n         </ShimmerButton>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/shimmer-button.json b/apps/web/public/r/styles/default/shimmer-button.json
index 9511c4b0..2213c2d7 100644
--- a/apps/web/public/r/styles/default/shimmer-button.json
+++ b/apps/web/public/r/styles/default/shimmer-button.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shimmer-button",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/shimmer-button.tsx",
-      "content": "import type { CSSProperties } from 'react'\nimport React from 'react'\nimport { ny } from '~/lib/utils'\n\nexport interface ShimmerButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n   shimmerColor?: string\n   shimmerSize?: string\n   borderRadius?: string\n   shimmerDuration?: string\n   background?: string\n   className?: string\n   children?: React.ReactNode\n}\n\nconst ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(\n   (\n      {\n         shimmerColor = '#ffffff',\n         shimmerSize = '0.05em',\n         shimmerDuration = '3s',\n         borderRadius = '100px',\n         background = 'rgba(0, 0, 0, 1)',\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      return (\n         <button\n            type=\"button\"\n            style={\n               {\n                  '--spread': '90deg',\n                  '--shimmer-color': shimmerColor,\n                  '--radius': borderRadius,\n                  '--speed': shimmerDuration,\n                  '--cut': shimmerSize,\n                  '--bg': background,\n               } as CSSProperties\n            }\n            className={ny(\n               'group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black',\n               'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px',\n               className,\n            )}\n            ref={ref}\n            {...props}\n         >\n            {/* spark container */}\n            <div\n               className={ny(\n                  '-z-30 blur-[2px]',\n                  'absolute inset-0 overflow-visible [container-type:size]',\n               )}\n            >\n               {/* spark */}\n               <div className=\"animate-slide absolute inset-0 h-[100cqh] [aspect-ratio:1] [border-radius:0] [mask:none]\">\n                  {/* spark before */}\n                  <div className=\"animate-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]\" />\n               </div>\n            </div>\n            {children}\n\n            {/* Highlight */}\n            <div\n               className={ny(\n                  'insert-0 absolute size-full',\n\n                  'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',\n\n                  // transition\n                  'transform-gpu transition-all duration-300 ease-in-out',\n\n                  // on hover\n                  'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',\n\n                  // on click\n                  'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]',\n               )}\n            />\n\n            {/* backdrop */}\n            <div\n               className={ny(\n                  'absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]',\n               )}\n            />\n         </button>\n      )\n   },\n)\n\nShimmerButton.displayName = 'ShimmerButton'\n\nexport default ShimmerButton\n",
-      "type": "registry:component",
+      "content": "import type { CSSProperties } from \"react\"\nimport React from \"react\"\nimport { ny } from \"~/lib/utils\"\n\nexport interface ShimmerButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n   shimmerColor?: string\n   shimmerSize?: string\n   borderRadius?: string\n   shimmerDuration?: string\n   background?: string\n   className?: string\n   children?: React.ReactNode\n}\n\nconst ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(\n   (\n      {\n         shimmerColor = \"#ffffff\",\n         shimmerSize = \"0.05em\",\n         shimmerDuration = \"3s\",\n         borderRadius = \"100px\",\n         background = \"rgba(0, 0, 0, 1)\",\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      return (\n         <button\n            type=\"button\"\n            style={\n               {\n                  \"--spread\": \"90deg\",\n                  \"--shimmer-color\": shimmerColor,\n                  \"--radius\": borderRadius,\n                  \"--speed\": shimmerDuration,\n                  \"--cut\": shimmerSize,\n                  \"--bg\": background,\n               } as CSSProperties\n            }\n            className={ny(\n               \"group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black\",\n               \"transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         >\n            {/* spark container */}\n            <div\n               className={ny(\n                  \"-z-30 blur-[2px]\",\n                  \"absolute inset-0 overflow-visible [container-type:size]\",\n               )}\n            >\n               {/* spark */}\n               <div className=\"animate-slide absolute inset-0 h-[100cqh] [aspect-ratio:1] [border-radius:0] [mask:none]\">\n                  {/* spark before */}\n                  <div className=\"animate-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]\" />\n               </div>\n            </div>\n            {children}\n\n            {/* Highlight */}\n            <div\n               className={ny(\n                  \"insert-0 absolute size-full\",\n\n                  \"rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]\",\n\n                  // transition\n                  \"transform-gpu transition-all duration-300 ease-in-out\",\n\n                  // on hover\n                  \"group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]\",\n\n                  // on click\n                  \"group-active:shadow-[inset_0_-10px_10px_#ffffff3f]\",\n               )}\n            />\n\n            {/* backdrop */}\n            <div\n               className={ny(\n                  \"absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]\",\n               )}\n            />\n         </button>\n      )\n   },\n)\n\nShimmerButton.displayName = \"ShimmerButton\"\n\nexport default ShimmerButton\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/shine-border-demo-2.json b/apps/web/public/r/styles/default/shine-border-demo-2.json
index fd983f29..7022aa1c 100644
--- a/apps/web/public/r/styles/default/shine-border-demo-2.json
+++ b/apps/web/public/r/styles/default/shine-border-demo-2.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shine-border-demo-2",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/shine-border-demo-2.tsx",
-      "content": "import ShineBorder from '~/registry/default/ui/shine-border'\n\nexport default function ShineBorderDemo() {\n   return (\n      <ShineBorder className=\"text-center text-2xl font-bold capitalize\">\n         Shine Border\n      </ShineBorder>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/shine-border-demo-2.tsx",
+      "content": "import ShineBorder from \"~/registry/default/ui/shine-border\"\n\nexport default function ShineBorderDemo() {\n   return (\n      <ShineBorder className=\"text-center text-2xl font-bold capitalize\">\n         Shine Border\n      </ShineBorder>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/shine-border-demo.json b/apps/web/public/r/styles/default/shine-border-demo.json
index 97e12c4e..a7ea4dc8 100644
--- a/apps/web/public/r/styles/default/shine-border-demo.json
+++ b/apps/web/public/r/styles/default/shine-border-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shine-border-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/shine-border-demo.tsx",
-      "content": "import ShineBorder from '~/registry/default/ui/shine-border'\n\nexport default function ShineBorderDemo() {\n   return (\n      <ShineBorder\n         className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\"\n         color={['#A07CFE', '#FE8FB5', '#FFBE7B']}\n      >\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Shine Border\n         </span>\n      </ShineBorder>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/shine-border-demo.tsx",
+      "content": "import ShineBorder from \"~/registry/default/ui/shine-border\"\n\nexport default function ShineBorderDemo() {\n   return (\n      <ShineBorder\n         className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\"\n         color={[\"#A07CFE\", \"#FE8FB5\", \"#FFBE7B\"]}\n      >\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Shine Border\n         </span>\n      </ShineBorder>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/shine-border.json b/apps/web/public/r/styles/default/shine-border.json
index 3a35453c..186adb59 100644
--- a/apps/web/public/r/styles/default/shine-border.json
+++ b/apps/web/public/r/styles/default/shine-border.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shine-border",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/shine-border.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\n\ntype TColorProp = string | string[]\n\ninterface ShineBorderProps {\n   borderRadius?: number\n   borderWidth?: number\n   duration?: number\n   color?: TColorProp\n   className?: string\n   children: React.ReactNode\n}\n\n/**\n * @name Shine Border\n * @description It is an animated background border effect component with easy to use and configurable props.\n * @param borderRadius defines the radius of the border.\n * @param borderWidth defines the width of the border.\n * @param duration defines the animation duration to be applied on the shining border\n * @param color a string or string array to define border color.\n * @param className defines the class name to be applied to the component\n * @param children contains react node elements.\n */\nexport default function ShineBorder({\n   borderRadius = 8,\n   borderWidth = 1,\n   duration = 14,\n   color = '#000000',\n   className,\n   children,\n}: ShineBorderProps) {\n   return (\n      <div\n         style={\n            {\n               '--border-radius': `${borderRadius}px`,\n            } as React.CSSProperties\n         }\n         className={ny(\n            'relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white',\n            className,\n         )}\n      >\n         <div\n            style={\n               {\n                  '--border-width': `${borderWidth}px`,\n                  '--border-radius': `${borderRadius}px`,\n                  '--duration': `${duration}s`,\n                  '--mask-linear-gradient': `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,\n                  '--background-radial-gradient': `radial-gradient(transparent,transparent, ${Array.isArray(color) ? color.join(',') : color},transparent,transparent)`,\n               } as React.CSSProperties\n            }\n            className={`before:bg-shine-size motion-safe:before:animate-shine before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[\"\"] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient]`}\n         >\n         </div>\n         {children}\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { ny } from \"~/lib/utils\"\n\ntype TColorProp = string | string[]\n\ninterface ShineBorderProps {\n   borderRadius?: number\n   borderWidth?: number\n   duration?: number\n   color?: TColorProp\n   className?: string\n   children: React.ReactNode\n}\n\n/**\n * @name Shine Border\n * @description It is an animated background border effect component with easy to use and configurable props.\n * @param borderRadius defines the radius of the border.\n * @param borderWidth defines the width of the border.\n * @param duration defines the animation duration to be applied on the shining border\n * @param color a string or string array to define border color.\n * @param className defines the class name to be applied to the component\n * @param children contains react node elements.\n */\nexport default function ShineBorder({\n   borderRadius = 8,\n   borderWidth = 1,\n   duration = 14,\n   color = \"#000000\",\n   className,\n   children,\n}: ShineBorderProps) {\n   return (\n      <div\n         style={\n            {\n               \"--border-radius\": `${borderRadius}px`,\n            } as React.CSSProperties\n         }\n         className={ny(\n            \"relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white\",\n            className,\n         )}\n      >\n         <div\n            style={\n               {\n                  \"--border-width\": `${borderWidth}px`,\n                  \"--border-radius\": `${borderRadius}px`,\n                  \"--duration\": `${duration}s`,\n                  \"--mask-linear-gradient\": `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,\n                  \"--background-radial-gradient\": `radial-gradient(transparent,transparent, ${Array.isArray(color) ? color.join(\",\") : color},transparent,transparent)`,\n               } as React.CSSProperties\n            }\n            className={`before:bg-shine-size motion-safe:before:animate-shine before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[\"\"] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient]`}\n         ></div>\n         {children}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/shiny-button-demo.json b/apps/web/public/r/styles/default/shiny-button-demo.json
index b35a7587..4649c4c0 100644
--- a/apps/web/public/r/styles/default/shiny-button-demo.json
+++ b/apps/web/public/r/styles/default/shiny-button-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shiny-button-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/shiny-button-demo.tsx",
-      "content": "import ShinyButton from '~/registry/default/ui/shiny-button'\n\nexport default function ShinyButtonDemo() {\n   return <ShinyButton text=\"Shiny Button\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/shiny-button-demo.tsx",
+      "content": "import ShinyButton from \"~/registry/default/ui/shiny-button\"\n\nexport default function ShinyButtonDemo() {\n   return <ShinyButton text=\"Shiny Button\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/shiny-button.json b/apps/web/public/r/styles/default/shiny-button.json
index 0d426011..ed04db55 100644
--- a/apps/web/public/r/styles/default/shiny-button.json
+++ b/apps/web/public/r/styles/default/shiny-button.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shiny-button",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/shiny-button.tsx",
-      "content": "'use client'\nimport { type AnimationProps, motion } from 'framer-motion'\n\nconst animationProps = {\n   initial: { '--x': '100%', 'scale': 0.8 },\n   animate: { '--x': '-100%', 'scale': 1 },\n   whileTap: { scale: 0.95 },\n   transition: {\n      repeat: Infinity,\n      repeatType: 'loop',\n      repeatDelay: 1,\n      type: 'spring',\n      stiffness: 20,\n      damping: 15,\n      mass: 2,\n      scale: {\n         type: 'spring',\n         stiffness: 200,\n         damping: 5,\n         mass: 0.5,\n      },\n   },\n} as AnimationProps\n\nfunction ShinyButton({ text = 'shiny-button' }) {\n   return (\n      <motion.button\n         {...animationProps}\n         className=\"relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]\"\n      >\n         <span\n            className=\"relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]\"\n            style={{\n               maskImage:\n            'linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))',\n            }}\n         >\n            {text}\n         </span>\n         <span\n            style={{\n               mask: 'linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))',\n               maskComposite: 'exclude',\n            }}\n            className=\"absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px\"\n         >\n         </span>\n      </motion.button>\n   )\n}\n\nexport default ShinyButton\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport { type AnimationProps, motion } from \"framer-motion\"\n\nconst animationProps = {\n   initial: { \"--x\": \"100%\", scale: 0.8 },\n   animate: { \"--x\": \"-100%\", scale: 1 },\n   whileTap: { scale: 0.95 },\n   transition: {\n      repeat: Number.POSITIVE_INFINITY,\n      repeatType: \"loop\",\n      repeatDelay: 1,\n      type: \"spring\",\n      stiffness: 20,\n      damping: 15,\n      mass: 2,\n      scale: {\n         type: \"spring\",\n         stiffness: 200,\n         damping: 5,\n         mass: 0.5,\n      },\n   },\n} as AnimationProps\n\nfunction ShinyButton({ text = \"shiny-button\" }) {\n   return (\n      <motion.button\n         {...animationProps}\n         className=\"relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]\"\n      >\n         <span\n            className=\"relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]\"\n            style={{\n               maskImage:\n                  \"linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))\",\n            }}\n         >\n            {text}\n         </span>\n         <span\n            style={{\n               mask: \"linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))\",\n               maskComposite: \"exclude\",\n            }}\n            className=\"absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px\"\n         ></span>\n      </motion.button>\n   )\n}\n\nexport default ShinyButton\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/sidebar-01.json b/apps/web/public/r/styles/default/sidebar-01.json
index 20cbb105..aed332a5 100644
--- a/apps/web/public/r/styles/default/sidebar-01.json
+++ b/apps/web/public/r/styles/default/sidebar-01.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-01",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A simple sidebar with navigation grouped by section.",
   "registryDependencies": [
     "sidebar",
@@ -11,28 +13,32 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-01/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-01/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-01/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\n\nimport { SearchForm } from '~/registry/default/block/sidebar-01/components/search-form'\nimport { VersionSwitcher } from '~/registry/default/block/sidebar-01/components/version-switcher'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <VersionSwitcher\n               versions={data.versions}\n               defaultVersion={data.versions[0]}\n            />\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent>\n            {/* We create a SidebarGroup for each parent. */}\n            {data.navMain.map(item => (\n               <SidebarGroup key={item.title}>\n                  <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {item.items.map(item => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton asChild isActive={item.isActive}>\n                                 <a href={item.url}>{item.title}</a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            ))}\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import type * as React from \"react\"\n\nimport { SearchForm } from \"~/registry/default/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"~/registry/default/blocks/sidebar-01/components/version-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <VersionSwitcher\n               versions={data.versions}\n               defaultVersion={data.versions[0]}\n            />\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent>\n            {/* We create a SidebarGroup for each parent. */}\n            {data.navMain.map((item) => (\n               <SidebarGroup key={item.title}>\n                  <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {item.items.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 asChild\n                                 isActive={item.isActive}\n                              >\n                                 <a href={item.url}>{item.title}</a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            ))}\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-01/components/search-form.tsx",
-      "content": "import { Search } from 'lucide-react'\n\nimport { Label } from '~/registry/default/ui/label'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from '~/registry/default/ui/sidebar'\n\nexport function SearchForm({ ...props }: React.ComponentProps<'form'>) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
+      "path": "blocks/sidebar-01/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"~/registry/default/ui/label\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-01/components/version-switcher.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function VersionSwitcher({\n   versions,\n   defaultVersion,\n}: {\n   versions: string[]\n   defaultVersion: string\n}) {\n   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                        <GalleryVerticalEnd className=\"size-4\" />\n                     </div>\n                     <div className=\"flex flex-col gap-0.5 leading-none\">\n                        <span className=\"font-semibold\">Documentation</span>\n                        <span className=\"\">\n                           v\n                           {selectedVersion}\n                        </span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n               >\n                  {versions.map(version => (\n                     <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                     >\n                        v\n                        {version}\n                        {' '}\n                        {version === selectedVersion && <Check className=\"ml-auto\" />}\n                     </DropdownMenuItem>\n                  ))}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-01/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function VersionSwitcher({\n   versions,\n   defaultVersion,\n}: {\n   versions: string[]\n   defaultVersion: string\n}) {\n   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <GalleryVerticalEnd className=\"size-4\" />\n                     </div>\n                     <div className=\"flex flex-col gap-0.5 leading-none\">\n                        <span className=\"font-semibold\">Documentation</span>\n                        <span className=\"\">v{selectedVersion}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n               >\n                  {versions.map((version) => (\n                     <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                     >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                           <Check className=\"ml-auto\" />\n                        )}\n                     </DropdownMenuItem>\n                  ))}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-02.json b/apps/web/public/r/styles/default/sidebar-02.json
index 28a6e040..22bfb2db 100644
--- a/apps/web/public/r/styles/default/sidebar-02.json
+++ b/apps/web/public/r/styles/default/sidebar-02.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-02",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar with collapsible sections.",
   "registryDependencies": [
     "sidebar",
@@ -11,28 +13,32 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-02/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-02/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-02/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { ChevronRight } from 'lucide-react'\n\nimport { SearchForm } from '~/registry/default/block/sidebar-02/components/search-form'\nimport { VersionSwitcher } from '~/registry/default/block/sidebar-02/components/version-switcher'\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/default/ui/collapsible'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Community',\n         url: '#',\n         items: [\n            {\n               title: 'Contribution Guide',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <VersionSwitcher\n               versions={data.versions}\n               defaultVersion={data.versions[0]}\n            />\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent className=\"gap-0\">\n            {/* We create a collapsible SidebarGroup for each parent. */}\n            {data.navMain.map(item => (\n               <Collapsible\n                  key={item.title}\n                  title={item.title}\n                  defaultOpen\n                  className=\"group/collapsible\"\n               >\n                  <SidebarGroup>\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n                     >\n                        <CollapsibleTrigger>\n                           {item.title}\n                           {' '}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {item.items.map(item => (\n                                 <SidebarMenuItem key={item.title}>\n                                    <SidebarMenuButton asChild isActive={item.isActive}>\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </SidebarGroup>\n               </Collapsible>\n            ))}\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { SearchForm } from \"~/registry/default/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"~/registry/default/blocks/sidebar-02/components/version-switcher\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <VersionSwitcher\n               versions={data.versions}\n               defaultVersion={data.versions[0]}\n            />\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent className=\"gap-0\">\n            {/* We create a collapsible SidebarGroup for each parent. */}\n            {data.navMain.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  title={item.title}\n                  defaultOpen\n                  className=\"group/collapsible\"\n               >\n                  <SidebarGroup>\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {item.title}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {item.items.map((item) => (\n                                 <SidebarMenuItem key={item.title}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={item.isActive}\n                                    >\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </SidebarGroup>\n               </Collapsible>\n            ))}\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-02/components/search-form.tsx",
-      "content": "import { Search } from 'lucide-react'\n\nimport { Label } from '~/registry/default/ui/label'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from '~/registry/default/ui/sidebar'\n\nexport function SearchForm({ ...props }: React.ComponentProps<'form'>) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
+      "path": "blocks/sidebar-02/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"~/registry/default/ui/label\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-02/components/version-switcher.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function VersionSwitcher({\n   versions,\n   defaultVersion,\n}: {\n   versions: string[]\n   defaultVersion: string\n}) {\n   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                        <GalleryVerticalEnd className=\"size-4\" />\n                     </div>\n                     <div className=\"flex flex-col gap-0.5 leading-none\">\n                        <span className=\"font-semibold\">Documentation</span>\n                        <span className=\"\">\n                           v\n                           {selectedVersion}\n                        </span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n               >\n                  {versions.map(version => (\n                     <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                     >\n                        v\n                        {version}\n                        {' '}\n                        {version === selectedVersion && <Check className=\"ml-auto\" />}\n                     </DropdownMenuItem>\n                  ))}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-02/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function VersionSwitcher({\n   versions,\n   defaultVersion,\n}: {\n   versions: string[]\n   defaultVersion: string\n}) {\n   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <GalleryVerticalEnd className=\"size-4\" />\n                     </div>\n                     <div className=\"flex flex-col gap-0.5 leading-none\">\n                        <span className=\"font-semibold\">Documentation</span>\n                        <span className=\"\">v{selectedVersion}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n               >\n                  {versions.map((version) => (\n                     <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                     >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                           <Check className=\"ml-auto\" />\n                        )}\n                     </DropdownMenuItem>\n                  ))}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-03.json b/apps/web/public/r/styles/default/sidebar-03.json
index 19d95beb..00b6c95a 100644
--- a/apps/web/public/r/styles/default/sidebar-03.json
+++ b/apps/web/public/r/styles/default/sidebar-03.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-03",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar with submenus.",
   "registryDependencies": [
     "sidebar",
@@ -8,16 +10,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-03/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n               <div className=\"flex items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-03/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n               <div className=\"flex items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-03/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { GalleryVerticalEnd } from 'lucide-react'\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Community',\n         url: '#',\n         items: [\n            {\n               title: 'Contribution Guide',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu>\n                  {data.navMain.map(item => (\n                     <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild>\n                           <a href={item.url} className=\"font-medium\">\n                              {item.title}\n                           </a>\n                        </SidebarMenuButton>\n                        {item.items?.length\n                           ? (\n                                 <SidebarMenuSub>\n                                    {item.items.map(item => (\n                                       <SidebarMenuSubItem key={item.title}>\n                                          <SidebarMenuSubButton asChild isActive={item.isActive}>\n                                             <a href={item.url}>{item.title}</a>\n                                          </SidebarMenuSubButton>\n                                       </SidebarMenuSubItem>\n                                    ))}\n                                 </SidebarMenuSub>\n                              )\n                           : null}\n                     </SidebarMenuItem>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-03/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu>\n                  {data.navMain.map((item) => (\n                     <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild>\n                           <a href={item.url} className=\"font-medium\">\n                              {item.title}\n                           </a>\n                        </SidebarMenuButton>\n                        {item.items?.length ? (\n                           <SidebarMenuSub>\n                              {item.items.map((item) => (\n                                 <SidebarMenuSubItem key={item.title}>\n                                    <SidebarMenuSubButton\n                                       asChild\n                                       isActive={item.isActive}\n                                    >\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        ) : null}\n                     </SidebarMenuItem>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-04.json b/apps/web/public/r/styles/default/sidebar-04.json
index 026afdd2..a1e50a8c 100644
--- a/apps/web/public/r/styles/default/sidebar-04.json
+++ b/apps/web/public/r/styles/default/sidebar-04.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-04",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A floating sidebar with submenus.",
   "registryDependencies": [
     "sidebar",
@@ -9,16 +11,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-04/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               '--sidebar-width': '19rem',\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-04/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"19rem\",\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-04/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { GalleryVerticalEnd } from 'lucide-react'\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Community',\n         url: '#',\n         items: [\n            {\n               title: 'Contribution Guide',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar variant=\"floating\" {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu className=\"gap-2\">\n                  {data.navMain.map(item => (\n                     <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild>\n                           <a href={item.url} className=\"font-medium\">\n                              {item.title}\n                           </a>\n                        </SidebarMenuButton>\n                        {item.items?.length\n                           ? (\n                                 <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                                    {item.items.map(item => (\n                                       <SidebarMenuSubItem key={item.title}>\n                                          <SidebarMenuSubButton asChild isActive={item.isActive}>\n                                             <a href={item.url}>{item.title}</a>\n                                          </SidebarMenuSubButton>\n                                       </SidebarMenuSubItem>\n                                    ))}\n                                 </SidebarMenuSub>\n                              )\n                           : null}\n                     </SidebarMenuItem>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-04/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar variant=\"floating\" {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu className=\"gap-2\">\n                  {data.navMain.map((item) => (\n                     <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild>\n                           <a href={item.url} className=\"font-medium\">\n                              {item.title}\n                           </a>\n                        </SidebarMenuButton>\n                        {item.items?.length ? (\n                           <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                              {item.items.map((item) => (\n                                 <SidebarMenuSubItem key={item.title}>\n                                    <SidebarMenuSubButton\n                                       asChild\n                                       isActive={item.isActive}\n                                    >\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        ) : null}\n                     </SidebarMenuItem>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-05.json b/apps/web/public/r/styles/default/sidebar-05.json
index 0bc94903..146c3ddd 100644
--- a/apps/web/public/r/styles/default/sidebar-05.json
+++ b/apps/web/public/r/styles/default/sidebar-05.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-05",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar with collapsible submenus.",
   "registryDependencies": [
     "sidebar",
@@ -11,22 +13,26 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-05/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-05/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-05/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-react'\n\nimport { SearchForm } from '~/registry/default/block/sidebar-05/components/search-form'\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/default/ui/collapsible'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Community',\n         url: '#',\n         items: [\n            {\n               title: 'Contribution Guide',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu>\n                  {data.navMain.map((item, index) => (\n                     <Collapsible\n                        key={item.title}\n                        defaultOpen={index === 1}\n                        className=\"group/collapsible\"\n                     >\n                        <SidebarMenuItem>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuButton>\n                                 {item.title}\n                                 {' '}\n                                 <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                                 <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                              </SidebarMenuButton>\n                           </CollapsibleTrigger>\n                           {item.items?.length\n                              ? (\n                                    <CollapsibleContent>\n                                       <SidebarMenuSub>\n                                          {item.items.map(item => (\n                                             <SidebarMenuSubItem key={item.title}>\n                                                <SidebarMenuSubButton\n                                                   asChild\n                                                   isActive={item.isActive}\n                                                >\n                                                   <a href={item.url}>{item.title}</a>\n                                                </SidebarMenuSubButton>\n                                             </SidebarMenuSubItem>\n                                          ))}\n                                       </SidebarMenuSub>\n                                    </CollapsibleContent>\n                                 )\n                              : null}\n                        </SidebarMenuItem>\n                     </Collapsible>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { SearchForm } from \"~/registry/default/blocks/sidebar-05/components/search-form\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu>\n                  {data.navMain.map((item, index) => (\n                     <Collapsible\n                        key={item.title}\n                        defaultOpen={index === 1}\n                        className=\"group/collapsible\"\n                     >\n                        <SidebarMenuItem>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuButton>\n                                 {item.title}{\" \"}\n                                 <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                                 <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                              </SidebarMenuButton>\n                           </CollapsibleTrigger>\n                           {item.items?.length ? (\n                              <CollapsibleContent>\n                                 <SidebarMenuSub>\n                                    {item.items.map((item) => (\n                                       <SidebarMenuSubItem key={item.title}>\n                                          <SidebarMenuSubButton\n                                             asChild\n                                             isActive={item.isActive}\n                                          >\n                                             <a href={item.url}>{item.title}</a>\n                                          </SidebarMenuSubButton>\n                                       </SidebarMenuSubItem>\n                                    ))}\n                                 </SidebarMenuSub>\n                              </CollapsibleContent>\n                           ) : null}\n                        </SidebarMenuItem>\n                     </Collapsible>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-05/components/search-form.tsx",
-      "content": "import { Search } from 'lucide-react'\n\nimport { Label } from '~/registry/default/ui/label'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from '~/registry/default/ui/sidebar'\n\nexport function SearchForm({ ...props }: React.ComponentProps<'form'>) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
+      "path": "blocks/sidebar-05/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"~/registry/default/ui/label\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-06.json b/apps/web/public/r/styles/default/sidebar-06.json
index db245f06..7fed5807 100644
--- a/apps/web/public/r/styles/default/sidebar-06.json
+++ b/apps/web/public/r/styles/default/sidebar-06.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-06",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar with submenus as dropdowns.",
   "registryDependencies": [
     "sidebar",
@@ -11,28 +13,32 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-06/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-06/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-06/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { GalleryVerticalEnd } from 'lucide-react'\n\nimport { NavMain } from '~/registry/default/block/sidebar-06/components/nav-main'\nimport { SidebarOptInForm } from '~/registry/default/block/sidebar-06/components/sidebar-opt-in-form'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n         </SidebarContent>\n         <SidebarFooter>\n            <div className=\"p-1\">\n               <SidebarOptInForm />\n            </div>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"~/registry/default/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"~/registry/default/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n         </SidebarContent>\n         <SidebarFooter>\n            <div className=\"p-1\">\n               <SidebarOptInForm />\n            </div>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-06/components/nav-main.tsx",
-      "content": "'use client'\n\nimport { type LucideIcon, MoreHorizontal } from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarGroup,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup>\n         <SidebarMenu>\n            {items.map(item => (\n               <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                           {item.title}\n                           {' '}\n                           <MoreHorizontal className=\"ml-auto\" />\n                        </SidebarMenuButton>\n                     </DropdownMenuTrigger>\n                     {item.items?.length\n                        ? (\n                              <DropdownMenuContent\n                                 side={isMobile ? 'bottom' : 'right'}\n                                 align={isMobile ? 'end' : 'start'}\n                                 className=\"min-w-56 rounded-lg\"\n                              >\n                                 {item.items.map(item => (\n                                    <DropdownMenuItem asChild key={item.title}>\n                                       <a href={item.url}>{item.title}</a>\n                                    </DropdownMenuItem>\n                                 ))}\n                              </DropdownMenuContent>\n                           )\n                        : null}\n                  </SidebarMenuItem>\n               </DropdownMenu>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-06/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon, MoreHorizontal } from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup>\n         <SidebarMenu>\n            {items.map((item) => (\n               <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                           {item.title} <MoreHorizontal className=\"ml-auto\" />\n                        </SidebarMenuButton>\n                     </DropdownMenuTrigger>\n                     {item.items?.length ? (\n                        <DropdownMenuContent\n                           side={isMobile ? \"bottom\" : \"right\"}\n                           align={isMobile ? \"end\" : \"start\"}\n                           className=\"min-w-56 rounded-lg\"\n                        >\n                           {item.items.map((item) => (\n                              <DropdownMenuItem asChild key={item.title}>\n                                 <a href={item.url}>{item.title}</a>\n                              </DropdownMenuItem>\n                           ))}\n                        </DropdownMenuContent>\n                     ) : null}\n                  </SidebarMenuItem>\n               </DropdownMenu>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport { SidebarInput } from '~/registry/default/ui/sidebar'\n\nexport function SidebarOptInForm() {\n   return (\n      <Card className=\"shadow-none\">\n         <form>\n            <CardHeader className=\"p-4 pb-0\">\n               <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n               <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n               </CardDescription>\n            </CardHeader>\n            <CardContent className=\"grid gap-2.5 p-4\">\n               <SidebarInput type=\"email\" placeholder=\"Email\" />\n               <Button\n                  className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\"\n                  size=\"sm\"\n               >\n                  Subscribe\n               </Button>\n            </CardContent>\n         </form>\n      </Card>\n   )\n}\n",
+      "path": "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport { SidebarInput } from \"~/registry/default/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n   return (\n      <Card className=\"shadow-none\">\n         <form>\n            <CardHeader className=\"p-4 pb-0\">\n               <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n               </CardTitle>\n               <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n               </CardDescription>\n            </CardHeader>\n            <CardContent className=\"grid gap-2.5 p-4\">\n               <SidebarInput type=\"email\" placeholder=\"Email\" />\n               <Button\n                  className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n                  size=\"sm\"\n               >\n                  Subscribe\n               </Button>\n            </CardContent>\n         </form>\n      </Card>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-07.json b/apps/web/public/r/styles/default/sidebar-07.json
index 50323fed..4c27f6b4 100644
--- a/apps/web/public/r/styles/default/sidebar-07.json
+++ b/apps/web/public/r/styles/default/sidebar-07.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-07",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar that collapses to icons.",
   "registryDependencies": [
     "sidebar",
@@ -12,40 +14,44 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-07/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-07/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-07/components/app-sidebar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   AudioWaveform,\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   GalleryVerticalEnd,\n   Map,\n   PieChart,\n   Settings2,\n   SquareTerminal,\n} from 'lucide-react'\n\nimport { NavMain } from '~/registry/default/block/sidebar-07/components/nav-main'\nimport { NavProjects } from '~/registry/default/block/sidebar-07/components/nav-projects'\nimport { NavUser } from '~/registry/default/block/sidebar-07/components/nav-user'\nimport { TeamSwitcher } from '~/registry/default/block/sidebar-07/components/team-switcher'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarRail,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   user: {\n      name: 'shadcn',\n      email: 'm@example.com',\n      avatar: '/avatars/nyxb.jpg',\n   },\n   teams: [\n      {\n         name: 'Acme Inc',\n         logo: GalleryVerticalEnd,\n         plan: 'Enterprise',\n      },\n      {\n         name: 'Acme Corp.',\n         logo: AudioWaveform,\n         plan: 'Startup',\n      },\n      {\n         name: 'Evil Corp.',\n         logo: Command,\n         plan: 'Free',\n      },\n   ],\n   navMain: [\n      {\n         title: 'Playground',\n         url: '#',\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: 'Sales & Marketing',\n         url: '#',\n         icon: PieChart,\n      },\n      {\n         name: 'Travel',\n         url: '#',\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar collapsible=\"icon\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-07/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   GalleryVerticalEnd,\n   Map,\n   PieChart,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"~/registry/default/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"~/registry/default/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"~/registry/default/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"~/registry/default/blocks/sidebar-07/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarRail,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: GalleryVerticalEnd,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar collapsible=\"icon\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-07/components/nav-main.tsx",
-      "content": "'use client'\n\nimport { ChevronRight, type LucideIcon } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/default/ui/collapsible'\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map(item => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n               >\n                  <SidebarMenuItem>\n                     <CollapsibleTrigger asChild>\n                        <SidebarMenuButton tooltip={item.title}>\n                           {item.icon && <item.icon />}\n                           <span>{item.title}</span>\n                           <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                     </CollapsibleTrigger>\n                     <CollapsibleContent>\n                        <SidebarMenuSub>\n                           {item.items?.map(subItem => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                 <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                       <span>{subItem.title}</span>\n                                    </a>\n                                 </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                           ))}\n                        </SidebarMenuSub>\n                     </CollapsibleContent>\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-07/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n               >\n                  <SidebarMenuItem>\n                     <CollapsibleTrigger asChild>\n                        <SidebarMenuButton tooltip={item.title}>\n                           {item.icon && <item.icon />}\n                           <span>{item.title}</span>\n                           <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                     </CollapsibleTrigger>\n                     <CollapsibleContent>\n                        <SidebarMenuSub>\n                           {item.items?.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                 <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                       <span>{subItem.title}</span>\n                                    </a>\n                                 </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                           ))}\n                        </SidebarMenuSub>\n                     </CollapsibleContent>\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-07/components/nav-projects.tsx",
-      "content": "'use client'\n\nimport {\n   Folder,\n   Forward,\n   type LucideIcon,\n   MoreHorizontal,\n   Trash2,\n} from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map(item => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48 rounded-lg\"\n                        side={isMobile ? 'bottom' : 'right'}\n                        align={isMobile ? 'end' : 'start'}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Forward className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-07/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   Forward,\n   type LucideIcon,\n   MoreHorizontal,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Forward className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-07/components/nav-user.tsx",
-      "content": "'use client'\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from 'lucide-react'\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/default/ui/avatar'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"size-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"size-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                           <span className=\"truncate text-xs\">{user.email}</span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-07/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/default/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-07/components/team-switcher.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronsUpDown, Plus } from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                        <activeTeam.logo className=\"size-4\" />\n                     </div>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {activeTeam.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘\n                           {index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"text-muted-foreground font-medium\">Add team</div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-07/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-4\" />\n                     </div>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {activeTeam.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                           {activeTeam.plan}\n                        </span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-08.json b/apps/web/public/r/styles/default/sidebar-08.json
index 0ad0b73d..71a5f758 100644
--- a/apps/web/public/r/styles/default/sidebar-08.json
+++ b/apps/web/public/r/styles/default/sidebar-08.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-08",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "An inset sidebar with secondary navigation.",
   "registryDependencies": [
     "sidebar",
@@ -12,40 +14,44 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-08/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2\">\n               <div className=\"flex items-center gap-2 px-4\">\n                  <SidebarTrigger className=\"-ml-1\" />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-08/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2\">\n               <div className=\"flex items-center gap-2 px-4\">\n                  <SidebarTrigger className=\"-ml-1\" />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-08/components/app-sidebar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Send,\n   Settings2,\n   SquareTerminal,\n} from 'lucide-react'\n\nimport { NavMain } from '~/registry/default/block/sidebar-08/components/nav-main'\nimport { NavProjects } from '~/registry/default/block/sidebar-08/components/nav-projects'\nimport { NavSecondary } from '~/registry/default/block/sidebar-08/components/nav-secondary'\nimport { NavUser } from '~/registry/default/block/sidebar-08/components/nav-user'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/default/ui/sidebar'\n\nconst data = {\n   user: {\n      name: 'shadcn',\n      email: 'm@example.com',\n      avatar: '/avatars/nyxb.jpg',\n   },\n   navMain: [\n      {\n         title: 'Playground',\n         url: '#',\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: 'Support',\n         url: '#',\n         icon: LifeBuoy,\n      },\n      {\n         title: 'Feedback',\n         url: '#',\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: 'Design Engineering',\n         url: '#',\n         icon: Frame,\n      },\n      {\n         name: 'Sales & Marketing',\n         url: '#',\n         icon: PieChart,\n      },\n      {\n         name: 'Travel',\n         url: '#',\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar variant=\"inset\" {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                           <Command className=\"size-4\" />\n                        </div>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">Acme Inc</span>\n                           <span className=\"truncate text-xs\">Enterprise</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-08/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Send,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"~/registry/default/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"~/registry/default/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"~/registry/default/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"~/registry/default/blocks/sidebar-08/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: \"Support\",\n         url: \"#\",\n         icon: LifeBuoy,\n      },\n      {\n         title: \"Feedback\",\n         url: \"#\",\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: \"Design Engineering\",\n         url: \"#\",\n         icon: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar variant=\"inset\" {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <Command className=\"size-4\" />\n                        </div>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              Acme Inc\n                           </span>\n                           <span className=\"truncate text-xs\">Enterprise</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-main.tsx",
-      "content": "'use client'\n\nimport { ChevronRight, type LucideIcon } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/default/ui/collapsible'\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map(item => (\n               <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.items?.length\n                        ? (\n                              <>\n                                 <CollapsibleTrigger asChild>\n                                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                       <ChevronRight />\n                                       <span className=\"sr-only\">Toggle</span>\n                                    </SidebarMenuAction>\n                                 </CollapsibleTrigger>\n                                 <CollapsibleContent>\n                                    <SidebarMenuSub>\n                                       {item.items?.map(subItem => (\n                                          <SidebarMenuSubItem key={subItem.title}>\n                                             <SidebarMenuSubButton asChild>\n                                                <a href={subItem.url}>\n                                                   <span>{subItem.title}</span>\n                                                </a>\n                                             </SidebarMenuSubButton>\n                                          </SidebarMenuSubItem>\n                                       ))}\n                                    </SidebarMenuSub>\n                                 </CollapsibleContent>\n                              </>\n                           )\n                        : null}\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-08/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n               >\n                  <SidebarMenuItem>\n                     <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.items?.length ? (\n                        <>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                 <ChevronRight />\n                                 <span className=\"sr-only\">Toggle</span>\n                              </SidebarMenuAction>\n                           </CollapsibleTrigger>\n                           <CollapsibleContent>\n                              <SidebarMenuSub>\n                                 {item.items?.map((subItem) => (\n                                    <SidebarMenuSubItem key={subItem.title}>\n                                       <SidebarMenuSubButton asChild>\n                                          <a href={subItem.url}>\n                                             <span>{subItem.title}</span>\n                                          </a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           </CollapsibleContent>\n                        </>\n                     ) : null}\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-projects.tsx",
-      "content": "'use client'\n\nimport {\n   Folder,\n   type LucideIcon,\n   MoreHorizontal,\n   Share,\n   Trash2,\n} from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map(item => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? 'bottom' : 'right'}\n                        align={isMobile ? 'end' : 'start'}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Share className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-08/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   type LucideIcon,\n   MoreHorizontal,\n   Share,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Share className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-secondary.tsx",
-      "content": "import * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map(item => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-08/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-user.tsx",
-      "content": "'use client'\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from 'lucide-react'\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/default/ui/avatar'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"size-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"size-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                           <span className=\"truncate text-xs\">{user.email}</span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-08/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/default/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-09.json b/apps/web/public/r/styles/default/sidebar-09.json
index fee423dc..7fbb84a9 100644
--- a/apps/web/public/r/styles/default/sidebar-09.json
+++ b/apps/web/public/r/styles/default/sidebar-09.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-09",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "Collapsible nested sidebars.",
   "registryDependencies": [
     "sidebar",
@@ -13,22 +15,26 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-09/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               '--sidebar-width': '350px',\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Inbox</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-09/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"350px\",\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Inbox</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-09/components/app-sidebar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-react'\n\nimport { NavUser } from '~/registry/default/block/sidebar-09/components/nav-user'\nimport { Label } from '~/registry/default/ui/label'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/default/ui/sidebar'\nimport { Switch } from '~/registry/default/ui/switch'\n\n// This is sample data\nconst data = {\n   user: {\n      name: 'shadcn',\n      email: 'm@example.com',\n      avatar: '/avatars/nyxb.jpg',\n   },\n   navMain: [\n      {\n         title: 'Inbox',\n         url: '#',\n         icon: Inbox,\n         isActive: true,\n      },\n      {\n         title: 'Drafts',\n         url: '#',\n         icon: File,\n         isActive: false,\n      },\n      {\n         title: 'Sent',\n         url: '#',\n         icon: Send,\n         isActive: false,\n      },\n      {\n         title: 'Junk',\n         url: '#',\n         icon: ArchiveX,\n         isActive: false,\n      },\n      {\n         title: 'Trash',\n         url: '#',\n         icon: Trash2,\n         isActive: false,\n      },\n   ],\n   mails: [\n      {\n         name: 'William Smith',\n         email: 'williamsmith@example.com',\n         subject: 'Meeting Tomorrow',\n         date: '09:34 AM',\n         teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n      },\n      {\n         name: 'Alice Smith',\n         email: 'alicesmith@example.com',\n         subject: 'Re: Project Update',\n         date: 'Yesterday',\n         teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n      },\n      {\n         name: 'Bob Johnson',\n         email: 'bobjohnson@example.com',\n         subject: 'Weekend Plans',\n         date: '2 days ago',\n         teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n      },\n      {\n         name: 'Emily Davis',\n         email: 'emilydavis@example.com',\n         subject: 'Re: Question about Budget',\n         date: '2 days ago',\n         teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n      },\n      {\n         name: 'Michael Wilson',\n         email: 'michaelwilson@example.com',\n         subject: 'Important Announcement',\n         date: '1 week ago',\n         teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n      },\n      {\n         name: 'Sarah Brown',\n         email: 'sarahbrown@example.com',\n         subject: 'Re: Feedback on Proposal',\n         date: '1 week ago',\n         teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n      },\n      {\n         name: 'David Lee',\n         email: 'davidlee@example.com',\n         subject: 'New Project Idea',\n         date: '1 week ago',\n         teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n      },\n      {\n         name: 'Olivia Wilson',\n         email: 'oliviawilson@example.com',\n         subject: 'Vacation Plans',\n         date: '1 week ago',\n         teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n      },\n      {\n         name: 'James Martin',\n         email: 'jamesmartin@example.com',\n         subject: 'Re: Conference Registration',\n         date: '1 week ago',\n         teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n      },\n      {\n         name: 'Sophia White',\n         email: 'sophiawhite@example.com',\n         subject: 'Team Dinner',\n         date: '1 week ago',\n         teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   // Note: I'm using state to show active item.\n   // IRL you should use the url/router.\n   const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n   const [mails, setMails] = React.useState(data.mails)\n   const { setOpen } = useSidebar()\n\n   return (\n      <Sidebar\n         collapsible=\"icon\"\n         className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n         {...props}\n      >\n         {/* This is the first sidebar */}\n         {/* We disable collapsible and adjust width to icon. */}\n         {/* This will make the sidebar appear as icons. */}\n         <Sidebar\n            collapsible=\"none\"\n            className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n         >\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                        <a href=\"#\">\n                           <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">Acme Inc</span>\n                              <span className=\"truncate text-xs\">Enterprise</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent className=\"px-1.5 md:px-0\">\n                     <SidebarMenu>\n                        {data.navMain.map(item => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 tooltip={{\n                                    children: item.title,\n                                    hidden: false,\n                                 }}\n                                 onClick={() => {\n                                    setActiveItem(item)\n                                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                                    setMails(\n                                       mail.slice(\n                                          0,\n                                          Math.max(5, Math.floor(Math.random() * 10) + 1),\n                                       ),\n                                    )\n                                    setOpen(true)\n                                 }}\n                                 isActive={activeItem.title === item.title}\n                                 className=\"px-2.5 md:px-2\"\n                              >\n                                 <item.icon />\n                                 <span>{item.title}</span>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <NavUser user={data.user} />\n            </SidebarFooter>\n         </Sidebar>\n\n         {/* This is the second sidebar */}\n         {/* We disable collapsible and let it fill remaining space */}\n         <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n            <SidebarHeader className=\"gap-3.5 border-b p-4\">\n               <div className=\"flex w-full items-center justify-between\">\n                  <div className=\"text-foreground text-base font-medium\">\n                     {activeItem.title}\n                  </div>\n                  <Label className=\"flex items-center gap-2 text-sm\">\n                     <span>Unreads</span>\n                     <Switch className=\"shadow-none\" />\n                  </Label>\n               </div>\n               <SidebarInput placeholder=\"Type to search...\" />\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup className=\"px-0\">\n                  <SidebarGroupContent>\n                     {mails.map(mail => (\n                        <a\n                           href=\"#\"\n                           key={mail.email}\n                           className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0\"\n                        >\n                           <div className=\"flex w-full items-center gap-2\">\n                              <span>{mail.name}</span>\n                              {' '}\n                              <span className=\"ml-auto text-xs\">{mail.date}</span>\n                           </div>\n                           <span className=\"font-medium\">{mail.subject}</span>\n                           <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                              {mail.teaser}\n                           </span>\n                        </a>\n                     ))}\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-09/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { NavUser } from \"~/registry/default/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"~/registry/default/ui/label\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\nimport { Switch } from \"~/registry/default/ui/switch\"\n\n// This is sample data\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         isActive: true,\n      },\n      {\n         title: \"Drafts\",\n         url: \"#\",\n         icon: File,\n         isActive: false,\n      },\n      {\n         title: \"Sent\",\n         url: \"#\",\n         icon: Send,\n         isActive: false,\n      },\n      {\n         title: \"Junk\",\n         url: \"#\",\n         icon: ArchiveX,\n         isActive: false,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n         isActive: false,\n      },\n   ],\n   mails: [\n      {\n         name: \"William Smith\",\n         email: \"williamsmith@example.com\",\n         subject: \"Meeting Tomorrow\",\n         date: \"09:34 AM\",\n         teaser:\n            \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n      },\n      {\n         name: \"Alice Smith\",\n         email: \"alicesmith@example.com\",\n         subject: \"Re: Project Update\",\n         date: \"Yesterday\",\n         teaser:\n            \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n      },\n      {\n         name: \"Bob Johnson\",\n         email: \"bobjohnson@example.com\",\n         subject: \"Weekend Plans\",\n         date: \"2 days ago\",\n         teaser:\n            \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n      },\n      {\n         name: \"Emily Davis\",\n         email: \"emilydavis@example.com\",\n         subject: \"Re: Question about Budget\",\n         date: \"2 days ago\",\n         teaser:\n            \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n      },\n      {\n         name: \"Michael Wilson\",\n         email: \"michaelwilson@example.com\",\n         subject: \"Important Announcement\",\n         date: \"1 week ago\",\n         teaser:\n            \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n      },\n      {\n         name: \"Sarah Brown\",\n         email: \"sarahbrown@example.com\",\n         subject: \"Re: Feedback on Proposal\",\n         date: \"1 week ago\",\n         teaser:\n            \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n      },\n      {\n         name: \"David Lee\",\n         email: \"davidlee@example.com\",\n         subject: \"New Project Idea\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n      },\n      {\n         name: \"Olivia Wilson\",\n         email: \"oliviawilson@example.com\",\n         subject: \"Vacation Plans\",\n         date: \"1 week ago\",\n         teaser:\n            \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n      },\n      {\n         name: \"James Martin\",\n         email: \"jamesmartin@example.com\",\n         subject: \"Re: Conference Registration\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n      },\n      {\n         name: \"Sophia White\",\n         email: \"sophiawhite@example.com\",\n         subject: \"Team Dinner\",\n         date: \"1 week ago\",\n         teaser:\n            \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   // Note: I'm using state to show active item.\n   // IRL you should use the url/router.\n   const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n   const [mails, setMails] = React.useState(data.mails)\n   const { setOpen } = useSidebar()\n\n   return (\n      <Sidebar\n         collapsible=\"icon\"\n         className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n         {...props}\n      >\n         {/* This is the first sidebar */}\n         {/* We disable collapsible and adjust width to icon. */}\n         {/* This will make the sidebar appear as icons. */}\n         <Sidebar\n            collapsible=\"none\"\n            className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n         >\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton\n                        size=\"lg\"\n                        asChild\n                        className=\"md:h-8 md:p-0\"\n                     >\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">\n                                 Acme Inc\n                              </span>\n                              <span className=\"truncate text-xs\">\n                                 Enterprise\n                              </span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent className=\"px-1.5 md:px-0\">\n                     <SidebarMenu>\n                        {data.navMain.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 tooltip={{\n                                    children: item.title,\n                                    hidden: false,\n                                 }}\n                                 onClick={() => {\n                                    setActiveItem(item)\n                                    const mail = data.mails.sort(\n                                       () => Math.random() - 0.5,\n                                    )\n                                    setMails(\n                                       mail.slice(\n                                          0,\n                                          Math.max(\n                                             5,\n                                             Math.floor(Math.random() * 10) + 1,\n                                          ),\n                                       ),\n                                    )\n                                    setOpen(true)\n                                 }}\n                                 isActive={activeItem.title === item.title}\n                                 className=\"px-2.5 md:px-2\"\n                              >\n                                 <item.icon />\n                                 <span>{item.title}</span>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <NavUser user={data.user} />\n            </SidebarFooter>\n         </Sidebar>\n\n         {/* This is the second sidebar */}\n         {/* We disable collapsible and let it fill remaining space */}\n         <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n            <SidebarHeader className=\"gap-3.5 border-b p-4\">\n               <div className=\"flex w-full items-center justify-between\">\n                  <div className=\"text-base font-medium text-foreground\">\n                     {activeItem.title}\n                  </div>\n                  <Label className=\"flex items-center gap-2 text-sm\">\n                     <span>Unreads</span>\n                     <Switch className=\"shadow-none\" />\n                  </Label>\n               </div>\n               <SidebarInput placeholder=\"Type to search...\" />\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup className=\"px-0\">\n                  <SidebarGroupContent>\n                     {mails.map((mail) => (\n                        <a\n                           href=\"#\"\n                           key={mail.email}\n                           className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                        >\n                           <div className=\"flex w-full items-center gap-2\">\n                              <span>{mail.name}</span>{\" \"}\n                              <span className=\"ml-auto text-xs\">\n                                 {mail.date}\n                              </span>\n                           </div>\n                           <span className=\"font-medium\">{mail.subject}</span>\n                           <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                              {mail.teaser}\n                           </span>\n                        </a>\n                     ))}\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-09/components/nav-user.tsx",
-      "content": "'use client'\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from 'lucide-react'\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/default/ui/avatar'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n                  >\n                     <Avatar className=\"size-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"size-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                           <span className=\"truncate text-xs\">{user.email}</span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-09/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/default/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-10.json b/apps/web/public/r/styles/default/sidebar-10.json
index 4ac84f1e..0480216e 100644
--- a/apps/web/public/r/styles/default/sidebar-10.json
+++ b/apps/web/public/r/styles/default/sidebar-10.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-10",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar in a popover.",
   "registryDependencies": [
     "sidebar",
@@ -12,52 +14,56 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-10/components/app-sidebar'\nimport { NavActions } from '~/registry/default/block/sidebar-10/components/nav-actions'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-14 shrink-0 items-center gap-2\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n               <div className=\"ml-auto px-3\">\n                  <NavActions />\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n               <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n               <div className=\"bg-muted/50 mx-auto size-full max-w-3xl rounded-xl\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"~/registry/default/blocks/sidebar-10/components/nav-actions\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-14 shrink-0 items-center gap-2\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n               <div className=\"ml-auto px-3\">\n                  <NavActions />\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-10/components/app-sidebar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   AudioWaveform,\n   Blocks,\n   Calendar,\n   Command,\n   Home,\n   Inbox,\n   MessageCircleQuestion,\n   Search,\n   Settings2,\n   Sparkles,\n   Trash2,\n} from 'lucide-react'\n\nimport { NavFavorites } from '~/registry/default/block/sidebar-10/components/nav-favorites'\nimport { NavMain } from '~/registry/default/block/sidebar-10/components/nav-main'\nimport { NavSecondary } from '~/registry/default/block/sidebar-10/components/nav-secondary'\nimport { NavWorkspaces } from '~/registry/default/block/sidebar-10/components/nav-workspaces'\nimport { TeamSwitcher } from '~/registry/default/block/sidebar-10/components/team-switcher'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarHeader,\n   SidebarRail,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: 'Acme Inc',\n         logo: Command,\n         plan: 'Enterprise',\n      },\n      {\n         name: 'Acme Corp.',\n         logo: AudioWaveform,\n         plan: 'Startup',\n      },\n      {\n         name: 'Evil Corp.',\n         logo: Command,\n         plan: 'Free',\n      },\n   ],\n   navMain: [\n      {\n         title: 'Search',\n         url: '#',\n         icon: Search,\n      },\n      {\n         title: 'Ask AI',\n         url: '#',\n         icon: Sparkles,\n      },\n      {\n         title: 'Home',\n         url: '#',\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: 'Inbox',\n         url: '#',\n         icon: Inbox,\n         badge: '10',\n      },\n   ],\n   navSecondary: [\n      {\n         title: 'Calendar',\n         url: '#',\n         icon: Calendar,\n      },\n      {\n         title: 'Settings',\n         url: '#',\n         icon: Settings2,\n      },\n      {\n         title: 'Templates',\n         url: '#',\n         icon: Blocks,\n      },\n      {\n         title: 'Trash',\n         url: '#',\n         icon: Trash2,\n      },\n      {\n         title: 'Help',\n         url: '#',\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: 'Project Management & Task Tracking',\n         url: '#',\n         emoji: '📊',\n      },\n      {\n         name: 'Family Recipe Collection & Meal Planning',\n         url: '#',\n         emoji: '🍳',\n      },\n      {\n         name: 'Fitness Tracker & Workout Routines',\n         url: '#',\n         emoji: '💪',\n      },\n      {\n         name: 'Book Notes & Reading List',\n         url: '#',\n         emoji: '📚',\n      },\n      {\n         name: 'Sustainable Gardening Tips & Plant Care',\n         url: '#',\n         emoji: '🌱',\n      },\n      {\n         name: 'Language Learning Progress & Resources',\n         url: '#',\n         emoji: '🗣️',\n      },\n      {\n         name: 'Home Renovation Ideas & Budget Tracker',\n         url: '#',\n         emoji: '🏠',\n      },\n      {\n         name: 'Personal Finance & Investment Portfolio',\n         url: '#',\n         emoji: '💰',\n      },\n      {\n         name: 'Movie & TV Show Watchlist with Reviews',\n         url: '#',\n         emoji: '🎬',\n      },\n      {\n         name: 'Daily Habit Tracker & Goal Setting',\n         url: '#',\n         emoji: '✅',\n      },\n   ],\n   workspaces: [\n      {\n         name: 'Personal Life Management',\n         emoji: '🏠',\n         pages: [\n            {\n               name: 'Daily Journal & Reflection',\n               url: '#',\n               emoji: '📔',\n            },\n            {\n               name: 'Health & Wellness Tracker',\n               url: '#',\n               emoji: '🍏',\n            },\n            {\n               name: 'Personal Growth & Learning Goals',\n               url: '#',\n               emoji: '🌟',\n            },\n         ],\n      },\n      {\n         name: 'Professional Development',\n         emoji: '💼',\n         pages: [\n            {\n               name: 'Career Objectives & Milestones',\n               url: '#',\n               emoji: '🎯',\n            },\n            {\n               name: 'Skill Acquisition & Training Log',\n               url: '#',\n               emoji: '🧠',\n            },\n            {\n               name: 'Networking Contacts & Events',\n               url: '#',\n               emoji: '🤝',\n            },\n         ],\n      },\n      {\n         name: 'Creative Projects',\n         emoji: '🎨',\n         pages: [\n            {\n               name: 'Writing Ideas & Story Outlines',\n               url: '#',\n               emoji: '✍️',\n            },\n            {\n               name: 'Art & Design Portfolio',\n               url: '#',\n               emoji: '🖼️',\n            },\n            {\n               name: 'Music Composition & Practice Log',\n               url: '#',\n               emoji: '🎵',\n            },\n         ],\n      },\n      {\n         name: 'Home Management',\n         emoji: '🏡',\n         pages: [\n            {\n               name: 'Household Budget & Expense Tracking',\n               url: '#',\n               emoji: '💰',\n            },\n            {\n               name: 'Home Maintenance Schedule & Tasks',\n               url: '#',\n               emoji: '🔧',\n            },\n            {\n               name: 'Family Calendar & Event Planning',\n               url: '#',\n               emoji: '📅',\n            },\n         ],\n      },\n      {\n         name: 'Travel & Adventure',\n         emoji: '🧳',\n         pages: [\n            {\n               name: 'Trip Planning & Itineraries',\n               url: '#',\n               emoji: '🗺️',\n            },\n            {\n               name: 'Travel Bucket List & Inspiration',\n               url: '#',\n               emoji: '🌎',\n            },\n            {\n               name: 'Travel Journal & Photo Gallery',\n               url: '#',\n               emoji: '📸',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   Blocks,\n   Calendar,\n   Command,\n   Home,\n   Inbox,\n   MessageCircleQuestion,\n   Search,\n   Settings2,\n   Sparkles,\n   Trash2,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavFavorites } from \"~/registry/default/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"~/registry/default/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"~/registry/default/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"~/registry/default/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"~/registry/default/blocks/sidebar-10/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarHeader,\n   SidebarRail,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: Calendar,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-actions.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   ArrowDown,\n   ArrowUp,\n   Bell,\n   Copy,\n   CornerUpLeft,\n   CornerUpRight,\n   FileText,\n   GalleryVerticalEnd,\n   LineChart,\n   Link,\n   MoreHorizontal,\n   Settings2,\n   Star,\n   Trash,\n   Trash2,\n} from 'lucide-react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/default/ui/popover'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/default/ui/sidebar'\n\nconst data = [\n   [\n      {\n         label: 'Customize Page',\n         icon: Settings2,\n      },\n      {\n         label: 'Turn into wiki',\n         icon: FileText,\n      },\n   ],\n   [\n      {\n         label: 'Copy Link',\n         icon: Link,\n      },\n      {\n         label: 'Duplicate',\n         icon: Copy,\n      },\n      {\n         label: 'Move to',\n         icon: CornerUpRight,\n      },\n      {\n         label: 'Move to Trash',\n         icon: Trash2,\n      },\n   ],\n   [\n      {\n         label: 'Undo',\n         icon: CornerUpLeft,\n      },\n      {\n         label: 'View analytics',\n         icon: LineChart,\n      },\n      {\n         label: 'Version History',\n         icon: GalleryVerticalEnd,\n      },\n      {\n         label: 'Show delete pages',\n         icon: Trash,\n      },\n      {\n         label: 'Notifications',\n         icon: Bell,\n      },\n   ],\n   [\n      {\n         label: 'Import',\n         icon: ArrowUp,\n      },\n      {\n         label: 'Export',\n         icon: ArrowDown,\n      },\n   ],\n]\n\nexport function NavActions() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      setIsOpen(true)\n   }, [])\n\n   return (\n      <div className=\"flex items-center gap-2 text-sm\">\n         <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n            Edit Oct 08\n         </div>\n         <Button variant=\"ghost\" size=\"icon\" className=\"size-7\">\n            <Star />\n         </Button>\n         <Popover open={isOpen} onOpenChange={setIsOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"data-[state=open]:bg-accent size-7\"\n               >\n                  <MoreHorizontal />\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent\n               className=\"w-56 overflow-hidden rounded-lg p-0\"\n               align=\"end\"\n            >\n               <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n                  <SidebarContent>\n                     {data.map((group, index) => (\n                        <SidebarGroup key={index} className=\"border-b last:border-none\">\n                           <SidebarGroupContent className=\"gap-0\">\n                              <SidebarMenu>\n                                 {group.map((item, index) => (\n                                    <SidebarMenuItem key={index}>\n                                       <SidebarMenuButton>\n                                          <item.icon />\n                                          {' '}\n                                          <span>{item.label}</span>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </SidebarGroup>\n                     ))}\n                  </SidebarContent>\n               </Sidebar>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/nav-actions.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowDown,\n   ArrowUp,\n   Bell,\n   Copy,\n   CornerUpLeft,\n   CornerUpRight,\n   FileText,\n   GalleryVerticalEnd,\n   LineChart,\n   Link,\n   MoreHorizontal,\n   Settings2,\n   Star,\n   Trash,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nconst data = [\n   [\n      {\n         label: \"Customize Page\",\n         icon: Settings2,\n      },\n      {\n         label: \"Turn into wiki\",\n         icon: FileText,\n      },\n   ],\n   [\n      {\n         label: \"Copy Link\",\n         icon: Link,\n      },\n      {\n         label: \"Duplicate\",\n         icon: Copy,\n      },\n      {\n         label: \"Move to\",\n         icon: CornerUpRight,\n      },\n      {\n         label: \"Move to Trash\",\n         icon: Trash2,\n      },\n   ],\n   [\n      {\n         label: \"Undo\",\n         icon: CornerUpLeft,\n      },\n      {\n         label: \"View analytics\",\n         icon: LineChart,\n      },\n      {\n         label: \"Version History\",\n         icon: GalleryVerticalEnd,\n      },\n      {\n         label: \"Show delete pages\",\n         icon: Trash,\n      },\n      {\n         label: \"Notifications\",\n         icon: Bell,\n      },\n   ],\n   [\n      {\n         label: \"Import\",\n         icon: ArrowUp,\n      },\n      {\n         label: \"Export\",\n         icon: ArrowDown,\n      },\n   ],\n]\n\nexport function NavActions() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      setIsOpen(true)\n   }, [])\n\n   return (\n      <div className=\"flex items-center gap-2 text-sm\">\n         <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n            Edit Oct 08\n         </div>\n         <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n            <Star />\n         </Button>\n         <Popover open={isOpen} onOpenChange={setIsOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-7 w-7 data-[state=open]:bg-accent\"\n               >\n                  <MoreHorizontal />\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent\n               className=\"w-56 overflow-hidden rounded-lg p-0\"\n               align=\"end\"\n            >\n               <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n                  <SidebarContent>\n                     {data.map((group, index) => (\n                        <SidebarGroup\n                           key={index}\n                           className=\"border-b last:border-none\"\n                        >\n                           <SidebarGroupContent className=\"gap-0\">\n                              <SidebarMenu>\n                                 {group.map((item, index) => (\n                                    <SidebarMenuItem key={index}>\n                                       <SidebarMenuButton>\n                                          <item.icon />{\" \"}\n                                          <span>{item.label}</span>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </SidebarGroup>\n                     ))}\n                  </SidebarContent>\n               </Sidebar>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-favorites.tsx",
-      "content": "'use client'\n\nimport {\n   ArrowUpRight,\n   Link,\n   MoreHorizontal,\n   StarOff,\n   Trash2,\n} from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map(item => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? 'bottom' : 'right'}\n                        align={isMobile ? 'end' : 'start'}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowUpRight,\n   Link,\n   MoreHorizontal,\n   StarOff,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-main.tsx",
-      "content": "'use client'\n\nimport type { LucideIcon } from 'lucide-react'\n\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map(item => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport type { LucideIcon } from \"lucide-react\"\n\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-secondary.tsx",
-      "content": "import React from 'react'\nimport type { LucideIcon } from 'lucide-react'\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map(item => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-workspaces.tsx",
-      "content": "import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/default/ui/collapsible'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map(workspace => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map(page => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-10/components/team-switcher.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronDown, Plus } from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘\n                           {index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"text-muted-foreground font-medium\">Add team</div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-11.json b/apps/web/public/r/styles/default/sidebar-11.json
index 1dd50855..a283763e 100644
--- a/apps/web/public/r/styles/default/sidebar-11.json
+++ b/apps/web/public/r/styles/default/sidebar-11.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-11",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar with a collapsible file tree.",
   "registryDependencies": [
     "sidebar",
@@ -10,16 +12,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-11/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>button.tsx</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-11/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>button.tsx</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-11/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { ChevronRight, File, Folder } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/default/ui/collapsible'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarRail,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   changes: [\n      {\n         file: 'README.md',\n         state: 'M',\n      },\n      {\n         file: 'api/hello/route.ts',\n         state: 'U',\n      },\n      {\n         file: 'app/layout.tsx',\n         state: 'M',\n      },\n   ],\n   tree: [\n      [\n         'app',\n         [\n            'api',\n            ['hello', ['route.ts']],\n            'page.tsx',\n            'layout.tsx',\n            ['blog', ['page.tsx']],\n         ],\n      ],\n      [\n         'components',\n         ['ui', 'button.tsx', 'card.tsx'],\n         'header.tsx',\n         'footer.tsx',\n      ],\n      ['lib', ['util.ts']],\n      ['public', 'favicon.ico', 'vercel.svg'],\n      '.eslintrc.json',\n      '.gitignore',\n      'next.config.js',\n      'tailwind.config.js',\n      'package.json',\n      'README.md',\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Changes</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.changes.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                           <SidebarMenuButton>\n                              <File />\n                              {item.file}\n                           </SidebarMenuButton>\n                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n            <SidebarGroup>\n               <SidebarGroupLabel>Files</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.tree.map((item, index) => (\n                        <Tree key={index} item={item} />\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n   const [name, ...items] = Array.isArray(item) ? item : [item]\n\n   if (!items.length) {\n      return (\n         <SidebarMenuButton\n            isActive={name === 'button.tsx'}\n            className=\"data-[active=true]:bg-transparent\"\n         >\n            <File />\n            {name}\n         </SidebarMenuButton>\n      )\n   }\n\n   return (\n      <SidebarMenuItem>\n         <Collapsible\n            className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n            defaultOpen={name === 'components' || name === 'ui'}\n         >\n            <CollapsibleTrigger asChild>\n               <SidebarMenuButton>\n                  <ChevronRight className=\"transition-transform\" />\n                  <Folder />\n                  {name}\n               </SidebarMenuButton>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n               <SidebarMenuSub>\n                  {items.map((subItem, index) => (\n                     <Tree key={index} item={subItem} />\n                  ))}\n               </SidebarMenuSub>\n            </CollapsibleContent>\n         </Collapsible>\n      </SidebarMenuItem>\n   )\n}\n",
+      "path": "blocks/sidebar-11/components/app-sidebar.tsx",
+      "content": "import { ChevronRight, File, Folder } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarRail,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   changes: [\n      {\n         file: \"README.md\",\n         state: \"M\",\n      },\n      {\n         file: \"api/hello/route.ts\",\n         state: \"U\",\n      },\n      {\n         file: \"app/layout.tsx\",\n         state: \"M\",\n      },\n   ],\n   tree: [\n      [\n         \"app\",\n         [\n            \"api\",\n            [\"hello\", [\"route.ts\"]],\n            \"page.tsx\",\n            \"layout.tsx\",\n            [\"blog\", [\"page.tsx\"]],\n         ],\n      ],\n      [\n         \"components\",\n         [\"ui\", \"button.tsx\", \"card.tsx\"],\n         \"header.tsx\",\n         \"footer.tsx\",\n      ],\n      [\"lib\", [\"util.ts\"]],\n      [\"public\", \"favicon.ico\", \"vercel.svg\"],\n      \".eslintrc.json\",\n      \".gitignore\",\n      \"next.config.js\",\n      \"tailwind.config.js\",\n      \"package.json\",\n      \"README.md\",\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Changes</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.changes.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                           <SidebarMenuButton>\n                              <File />\n                              {item.file}\n                           </SidebarMenuButton>\n                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n            <SidebarGroup>\n               <SidebarGroupLabel>Files</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.tree.map((item, index) => (\n                        <Tree key={index} item={item} />\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n   const [name, ...items] = Array.isArray(item) ? item : [item]\n\n   if (!items.length) {\n      return (\n         <SidebarMenuButton\n            isActive={name === \"button.tsx\"}\n            className=\"data-[active=true]:bg-transparent\"\n         >\n            <File />\n            {name}\n         </SidebarMenuButton>\n      )\n   }\n\n   return (\n      <SidebarMenuItem>\n         <Collapsible\n            className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n            defaultOpen={name === \"components\" || name === \"ui\"}\n         >\n            <CollapsibleTrigger asChild>\n               <SidebarMenuButton>\n                  <ChevronRight className=\"transition-transform\" />\n                  <Folder />\n                  {name}\n               </SidebarMenuButton>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n               <SidebarMenuSub>\n                  {items.map((subItem, index) => (\n                     <Tree key={index} item={subItem} />\n                  ))}\n               </SidebarMenuSub>\n            </CollapsibleContent>\n         </Collapsible>\n      </SidebarMenuItem>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-12.json b/apps/web/public/r/styles/default/sidebar-12.json
index 01248f9d..ee4c2fe3 100644
--- a/apps/web/public/r/styles/default/sidebar-12.json
+++ b/apps/web/public/r/styles/default/sidebar-12.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-12",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar with a calendar.",
   "registryDependencies": [
     "sidebar",
@@ -13,34 +15,38 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-12/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>October 2024</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n                  {Array.from({ length: 20 }).map((_, i) => (\n                     <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n                  ))}\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-12/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>October 2024</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n                  {Array.from({ length: 20 }).map((_, i) => (\n                     <div\n                        key={i}\n                        className=\"aspect-square rounded-xl bg-muted/50\"\n                     />\n                  ))}\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-12/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { Plus } from 'lucide-react'\n\nimport { Calendars } from '~/registry/default/block/sidebar-12/components/calendars'\nimport { DatePicker } from '~/registry/default/block/sidebar-12/components/date-picker'\nimport { NavUser } from '~/registry/default/block/sidebar-12/components/nav-user'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n   SidebarSeparator,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   user: {\n      name: 'shadcn',\n      email: 'm@example.com',\n      avatar: '/avatars/nyxb.jpg',\n   },\n   calendars: [\n      {\n         name: 'My Calendars',\n         items: ['Personal', 'Work', 'Family'],\n      },\n      {\n         name: 'Favorites',\n         items: ['Holidays', 'Birthdays'],\n      },\n      {\n         name: 'Other',\n         items: ['Travel', 'Reminders', 'Deadlines'],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "import { Plus } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { Calendars } from \"~/registry/default/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"~/registry/default/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"~/registry/default/blocks/sidebar-12/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n   SidebarSeparator,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-12/components/calendars.tsx",
-      "content": "import * as React from 'react'\nimport { Check, ChevronRight } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/default/ui/collapsible'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarSeparator,\n} from '~/registry/default/ui/sidebar'\n\nexport function Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}\n                           {' '}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n",
+      "path": "blocks/sidebar-12/components/calendars.tsx",
+      "content": "import { Check, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarSeparator,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-12/components/date-picker.tsx",
-      "content": "import { Calendar } from '~/registry/default/ui/calendar'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n} from '~/registry/default/ui/sidebar'\n\nexport function DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-12/components/date-picker.tsx",
+      "content": "import { Calendar } from \"~/registry/default/ui/calendar\"\nimport { SidebarGroup, SidebarGroupContent } from \"~/registry/default/ui/sidebar\"\n\nexport function DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-12/components/nav-user.tsx",
-      "content": "'use client'\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from 'lucide-react'\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/default/ui/avatar'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"size-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"size-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                           <span className=\"truncate text-xs\">{user.email}</span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-12/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/default/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-13.json b/apps/web/public/r/styles/default/sidebar-13.json
index 69197647..014924bf 100644
--- a/apps/web/public/r/styles/default/sidebar-13.json
+++ b/apps/web/public/r/styles/default/sidebar-13.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-13",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar in a dialog.",
   "registryDependencies": [
     "sidebar",
@@ -10,16 +12,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-13/page.tsx",
-      "content": "import { SettingsDialog } from '~/registry/default/block/sidebar-13/components/settings-dialog'\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-svh items-center justify-center\">\n         <SettingsDialog />\n      </div>\n   )\n}\n",
+      "path": "blocks/sidebar-13/page.tsx",
+      "content": "import { SettingsDialog } from \"~/registry/default/blocks/sidebar-13/components/settings-dialog\"\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-svh items-center justify-center\">\n         <SettingsDialog />\n      </div>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-13/components/settings-dialog.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   Bell,\n   Check,\n   Globe,\n   Home,\n   Keyboard,\n   Link,\n   Lock,\n   Menu,\n   MessageCircle,\n   Paintbrush,\n   Settings,\n   Video,\n} from 'lucide-react'\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogTitle,\n   DialogTrigger,\n} from '~/registry/default/ui/dialog'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from '~/registry/default/ui/sidebar'\n\nconst data = {\n   nav: [\n      { name: 'Notifications', icon: Bell },\n      { name: 'Navigation', icon: Menu },\n      { name: 'Home', icon: Home },\n      { name: 'Appearance', icon: Paintbrush },\n      { name: 'Messages & media', icon: MessageCircle },\n      { name: 'Language & region', icon: Globe },\n      { name: 'Accessibility', icon: Keyboard },\n      { name: 'Mark as read', icon: Check },\n      { name: 'Audio & video', icon: Video },\n      { name: 'Connected accounts', icon: Link },\n      { name: 'Privacy & visibility', icon: Lock },\n      { name: 'Advanced', icon: Settings },\n   ],\n}\n\nexport function SettingsDialog() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <Dialog open={open} onOpenChange={setOpen}>\n         <DialogTrigger asChild>\n            <Button size=\"sm\">Open Dialog</Button>\n         </DialogTrigger>\n         <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n            <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n            <DialogDescription className=\"sr-only\">\n               Customize your settings here.\n            </DialogDescription>\n            <SidebarProvider className=\"items-start\">\n               <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n                  <SidebarContent>\n                     <SidebarGroup>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {data.nav.map(item => (\n                                 <SidebarMenuItem key={item.name}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={item.name === 'Messages & media'}\n                                    >\n                                       <a href=\"#\">\n                                          <item.icon />\n                                          <span>{item.name}</span>\n                                       </a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </SidebarGroup>\n                  </SidebarContent>\n               </Sidebar>\n               <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n                  <header className=\"flex h-16 shrink-0 items-center gap-2 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                        <Breadcrumb>\n                           <BreadcrumbList>\n                              <BreadcrumbItem className=\"hidden md:block\">\n                                 <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                              </BreadcrumbItem>\n                              <BreadcrumbSeparator className=\"hidden md:block\" />\n                              <BreadcrumbItem>\n                                 <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                              </BreadcrumbItem>\n                           </BreadcrumbList>\n                        </Breadcrumb>\n                     </div>\n                  </header>\n                  <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n                     {Array.from({ length: 10 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                        />\n                     ))}\n                  </div>\n               </main>\n            </SidebarProvider>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "path": "blocks/sidebar-13/components/settings-dialog.tsx",
+      "content": "\"use client\"\n\nimport {\n   Bell,\n   Check,\n   Globe,\n   Home,\n   Keyboard,\n   Link,\n   Lock,\n   Menu,\n   MessageCircle,\n   Paintbrush,\n   Settings,\n   Video,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogTitle,\n   DialogTrigger,\n} from \"~/registry/default/ui/dialog\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/default/ui/sidebar\"\n\nconst data = {\n   nav: [\n      { name: \"Notifications\", icon: Bell },\n      { name: \"Navigation\", icon: Menu },\n      { name: \"Home\", icon: Home },\n      { name: \"Appearance\", icon: Paintbrush },\n      { name: \"Messages & media\", icon: MessageCircle },\n      { name: \"Language & region\", icon: Globe },\n      { name: \"Accessibility\", icon: Keyboard },\n      { name: \"Mark as read\", icon: Check },\n      { name: \"Audio & video\", icon: Video },\n      { name: \"Connected accounts\", icon: Link },\n      { name: \"Privacy & visibility\", icon: Lock },\n      { name: \"Advanced\", icon: Settings },\n   ],\n}\n\nexport function SettingsDialog() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <Dialog open={open} onOpenChange={setOpen}>\n         <DialogTrigger asChild>\n            <Button size=\"sm\">Open Dialog</Button>\n         </DialogTrigger>\n         <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n            <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n            <DialogDescription className=\"sr-only\">\n               Customize your settings here.\n            </DialogDescription>\n            <SidebarProvider className=\"items-start\">\n               <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n                  <SidebarContent>\n                     <SidebarGroup>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {data.nav.map((item) => (\n                                 <SidebarMenuItem key={item.name}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={\n                                          item.name === \"Messages & media\"\n                                       }\n                                    >\n                                       <a href=\"#\">\n                                          <item.icon />\n                                          <span>{item.name}</span>\n                                       </a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </SidebarGroup>\n                  </SidebarContent>\n               </Sidebar>\n               <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n                  <header className=\"flex h-16 shrink-0 items-center gap-2 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                        <Breadcrumb>\n                           <BreadcrumbList>\n                              <BreadcrumbItem className=\"hidden md:block\">\n                                 <BreadcrumbLink href=\"#\">\n                                    Settings\n                                 </BreadcrumbLink>\n                              </BreadcrumbItem>\n                              <BreadcrumbSeparator className=\"hidden md:block\" />\n                              <BreadcrumbItem>\n                                 <BreadcrumbPage>\n                                    Messages & media\n                                 </BreadcrumbPage>\n                              </BreadcrumbItem>\n                           </BreadcrumbList>\n                        </Breadcrumb>\n                     </div>\n                  </header>\n                  <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n                     {Array.from({ length: 10 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                        />\n                     ))}\n                  </div>\n               </main>\n            </SidebarProvider>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-14.json b/apps/web/public/r/styles/default/sidebar-14.json
index 2316be69..a88cd8a6 100644
--- a/apps/web/public/r/styles/default/sidebar-14.json
+++ b/apps/web/public/r/styles/default/sidebar-14.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-14",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar on the right.",
   "registryDependencies": [
     "sidebar",
@@ -8,16 +10,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/default/block/sidebar-14/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n               <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n         <AppSidebar side=\"right\" />\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-14/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n               <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n         <AppSidebar side=\"right\" />\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-14/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Community',\n         url: '#',\n         items: [\n            {\n               title: 'Contribution Guide',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.navMain.map(item => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length\n                              ? (\n                                    <SidebarMenuSub>\n                                       {item.items.map(item => (\n                                          <SidebarMenuSubItem key={item.title}>\n                                             <SidebarMenuSubButton\n                                                asChild\n                                                isActive={item.isActive}\n                                             >\n                                                <a href={item.url}>{item.title}</a>\n                                             </SidebarMenuSubButton>\n                                          </SidebarMenuSubItem>\n                                       ))}\n                                    </SidebarMenuSub>\n                                 )\n                              : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-14/components/app-sidebar.tsx",
+      "content": "import type * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-15.json b/apps/web/public/r/styles/default/sidebar-15.json
index 4c141db6..1407e684 100644
--- a/apps/web/public/r/styles/default/sidebar-15.json
+++ b/apps/web/public/r/styles/default/sidebar-15.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-15",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A left and right sidebar.",
   "registryDependencies": [
     "sidebar",
@@ -14,70 +16,74 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from '~/registry/default/block/sidebar-15/components/sidebar-left'\nimport { SidebarRight } from '~/registry/default/block/sidebar-15/components/sidebar-right'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarLeft />\n         <SidebarInset>\n            <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n               <div className=\"bg-muted/50 mx-auto h-screen w-full max-w-3xl rounded-xl\" />\n            </div>\n         </SidebarInset>\n         <SidebarRight />\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"~/registry/default/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"~/registry/default/blocks/sidebar-15/components/sidebar-right\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarLeft />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n         <SidebarRight />\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-15/components/calendars.tsx",
-      "content": "import * as React from 'react'\nimport { Check, ChevronRight } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/default/ui/collapsible'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarSeparator,\n} from '~/registry/default/ui/sidebar'\n\nexport function Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}\n                           {' '}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/calendars.tsx",
+      "content": "import { Check, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarSeparator,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/date-picker.tsx",
-      "content": "import { Calendar } from '~/registry/default/ui/calendar'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n} from '~/registry/default/ui/sidebar'\n\nexport function DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/date-picker.tsx",
+      "content": "import { Calendar } from \"~/registry/default/ui/calendar\"\nimport { SidebarGroup, SidebarGroupContent } from \"~/registry/default/ui/sidebar\"\n\nexport function DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-favorites.tsx",
-      "content": "'use client'\n\nimport {\n   ArrowUpRight,\n   Link,\n   MoreHorizontal,\n   StarOff,\n   Trash2,\n} from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map(item => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? 'bottom' : 'right'}\n                        align={isMobile ? 'end' : 'start'}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowUpRight,\n   Link,\n   MoreHorizontal,\n   StarOff,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-main.tsx",
-      "content": "'use client'\n\nimport type { LucideIcon } from 'lucide-react'\n\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map(item => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport type { LucideIcon } from \"lucide-react\"\n\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-secondary.tsx",
-      "content": "import React from 'react'\nimport type { LucideIcon } from 'lucide-react'\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map(item => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-user.tsx",
-      "content": "'use client'\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from 'lucide-react'\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/default/ui/avatar'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"size-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"size-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                           <span className=\"truncate text-xs\">{user.email}</span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/default/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-workspaces.tsx",
-      "content": "import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/default/ui/collapsible'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map(workspace => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map(page => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/sidebar-left.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   AudioWaveform,\n   Blocks,\n   Calendar,\n   Command,\n   Home,\n   Inbox,\n   MessageCircleQuestion,\n   Search,\n   Settings2,\n   Sparkles,\n   Trash2,\n} from 'lucide-react'\n\nimport { NavFavorites } from '~/registry/default/block/sidebar-15/components/nav-favorites'\nimport { NavMain } from '~/registry/default/block/sidebar-15/components/nav-main'\nimport { NavSecondary } from '~/registry/default/block/sidebar-15/components/nav-secondary'\nimport { NavWorkspaces } from '~/registry/default/block/sidebar-15/components/nav-workspaces'\nimport { TeamSwitcher } from '~/registry/default/block/sidebar-15/components/team-switcher'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarHeader,\n   SidebarRail,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: 'Acme Inc',\n         logo: Command,\n         plan: 'Enterprise',\n      },\n      {\n         name: 'Acme Corp.',\n         logo: AudioWaveform,\n         plan: 'Startup',\n      },\n      {\n         name: 'Evil Corp.',\n         logo: Command,\n         plan: 'Free',\n      },\n   ],\n   navMain: [\n      {\n         title: 'Search',\n         url: '#',\n         icon: Search,\n      },\n      {\n         title: 'Ask AI',\n         url: '#',\n         icon: Sparkles,\n      },\n      {\n         title: 'Home',\n         url: '#',\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: 'Inbox',\n         url: '#',\n         icon: Inbox,\n         badge: '10',\n      },\n   ],\n   navSecondary: [\n      {\n         title: 'Calendar',\n         url: '#',\n         icon: Calendar,\n      },\n      {\n         title: 'Settings',\n         url: '#',\n         icon: Settings2,\n      },\n      {\n         title: 'Templates',\n         url: '#',\n         icon: Blocks,\n      },\n      {\n         title: 'Trash',\n         url: '#',\n         icon: Trash2,\n      },\n      {\n         title: 'Help',\n         url: '#',\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: 'Project Management & Task Tracking',\n         url: '#',\n         emoji: '📊',\n      },\n      {\n         name: 'Family Recipe Collection & Meal Planning',\n         url: '#',\n         emoji: '🍳',\n      },\n      {\n         name: 'Fitness Tracker & Workout Routines',\n         url: '#',\n         emoji: '💪',\n      },\n      {\n         name: 'Book Notes & Reading List',\n         url: '#',\n         emoji: '📚',\n      },\n      {\n         name: 'Sustainable Gardening Tips & Plant Care',\n         url: '#',\n         emoji: '🌱',\n      },\n      {\n         name: 'Language Learning Progress & Resources',\n         url: '#',\n         emoji: '🗣️',\n      },\n      {\n         name: 'Home Renovation Ideas & Budget Tracker',\n         url: '#',\n         emoji: '🏠',\n      },\n      {\n         name: 'Personal Finance & Investment Portfolio',\n         url: '#',\n         emoji: '💰',\n      },\n      {\n         name: 'Movie & TV Show Watchlist with Reviews',\n         url: '#',\n         emoji: '🎬',\n      },\n      {\n         name: 'Daily Habit Tracker & Goal Setting',\n         url: '#',\n         emoji: '✅',\n      },\n   ],\n   workspaces: [\n      {\n         name: 'Personal Life Management',\n         emoji: '🏠',\n         pages: [\n            {\n               name: 'Daily Journal & Reflection',\n               url: '#',\n               emoji: '📔',\n            },\n            {\n               name: 'Health & Wellness Tracker',\n               url: '#',\n               emoji: '🍏',\n            },\n            {\n               name: 'Personal Growth & Learning Goals',\n               url: '#',\n               emoji: '🌟',\n            },\n         ],\n      },\n      {\n         name: 'Professional Development',\n         emoji: '💼',\n         pages: [\n            {\n               name: 'Career Objectives & Milestones',\n               url: '#',\n               emoji: '🎯',\n            },\n            {\n               name: 'Skill Acquisition & Training Log',\n               url: '#',\n               emoji: '🧠',\n            },\n            {\n               name: 'Networking Contacts & Events',\n               url: '#',\n               emoji: '🤝',\n            },\n         ],\n      },\n      {\n         name: 'Creative Projects',\n         emoji: '🎨',\n         pages: [\n            {\n               name: 'Writing Ideas & Story Outlines',\n               url: '#',\n               emoji: '✍️',\n            },\n            {\n               name: 'Art & Design Portfolio',\n               url: '#',\n               emoji: '🖼️',\n            },\n            {\n               name: 'Music Composition & Practice Log',\n               url: '#',\n               emoji: '🎵',\n            },\n         ],\n      },\n      {\n         name: 'Home Management',\n         emoji: '🏡',\n         pages: [\n            {\n               name: 'Household Budget & Expense Tracking',\n               url: '#',\n               emoji: '💰',\n            },\n            {\n               name: 'Home Maintenance Schedule & Tasks',\n               url: '#',\n               emoji: '🔧',\n            },\n            {\n               name: 'Family Calendar & Event Planning',\n               url: '#',\n               emoji: '📅',\n            },\n         ],\n      },\n      {\n         name: 'Travel & Adventure',\n         emoji: '🧳',\n         pages: [\n            {\n               name: 'Trip Planning & Itineraries',\n               url: '#',\n               emoji: '🗺️',\n            },\n            {\n               name: 'Travel Bucket List & Inspiration',\n               url: '#',\n               emoji: '🌎',\n            },\n            {\n               name: 'Travel Journal & Photo Gallery',\n               url: '#',\n               emoji: '📸',\n            },\n         ],\n      },\n   ],\n}\n\nexport function SidebarLeft({\n   ...props\n}: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/sidebar-left.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   Blocks,\n   Calendar,\n   Command,\n   Home,\n   Inbox,\n   MessageCircleQuestion,\n   Search,\n   Settings2,\n   Sparkles,\n   Trash2,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavFavorites } from \"~/registry/default/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"~/registry/default/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"~/registry/default/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"~/registry/default/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"~/registry/default/blocks/sidebar-15/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarHeader,\n   SidebarRail,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: Calendar,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function SidebarLeft({\n   ...props\n}: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/sidebar-right.tsx",
-      "content": "import * as React from 'react'\nimport { Plus } from 'lucide-react'\n\nimport { Calendars } from '~/registry/default/block/sidebar-15/components/calendars'\nimport { DatePicker } from '~/registry/default/block/sidebar-15/components/date-picker'\nimport { NavUser } from '~/registry/default/block/sidebar-15/components/nav-user'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n   SidebarSeparator,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   user: {\n      name: 'shadcn',\n      email: 'm@example.com',\n      avatar: '/avatars/nyxb.jpg',\n   },\n   calendars: [\n      {\n         name: 'My Calendars',\n         items: ['Personal', 'Work', 'Family'],\n      },\n      {\n         name: 'Favorites',\n         items: ['Holidays', 'Birthdays'],\n      },\n      {\n         name: 'Other',\n         items: ['Travel', 'Reminders', 'Deadlines'],\n      },\n   ],\n}\n\nexport function SidebarRight({\n   ...props\n}: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         collapsible=\"none\"\n         className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n         {...props}\n      >\n         <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "import { Plus } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { Calendars } from \"~/registry/default/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"~/registry/default/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"~/registry/default/blocks/sidebar-15/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n   SidebarSeparator,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport function SidebarRight({\n   ...props\n}: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         collapsible=\"none\"\n         className=\"sticky hidden lg:flex top-0 h-svh border-l\"\n         {...props}\n      >\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/team-switcher.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronDown, Plus } from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘\n                           {index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"text-muted-foreground font-medium\">Add team</div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-16.json b/apps/web/public/r/styles/default/sidebar-16.json
new file mode 100644
index 00000000..a903e067
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-16.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-16",
+  "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
+  "description": "A sidebar with a sticky site header.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-16/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/default/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"~/registry/default/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"~/registry/default/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <div className=\"[--header-height:calc(theme(spacing.14))]\">\n         <SidebarProvider className=\"flex flex-col\">\n            <SiteHeader />\n            <div className=\"flex flex-1\">\n               <AppSidebar />\n               <SidebarInset>\n                  <div className=\"flex flex-1 flex-col gap-4 p-4\">\n                     <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                        <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                        <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                        <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                     </div>\n                     <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n                  </div>\n               </SidebarInset>\n            </div>\n         </SidebarProvider>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-16/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Send,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"~/registry/default/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"~/registry/default/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"~/registry/default/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"~/registry/default/blocks/sidebar-16/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: \"Support\",\n         url: \"#\",\n         icon: LifeBuoy,\n      },\n      {\n         title: \"Feedback\",\n         url: \"#\",\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: \"Design Engineering\",\n         url: \"#\",\n         icon: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         className=\"top-[--header-height] !h-[calc(100svh-var(--header-height))]\"\n         {...props}\n      >\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <Command className=\"size-4\" />\n                        </div>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              Acme Inc\n                           </span>\n                           <span className=\"truncate text-xs\">Enterprise</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n               >\n                  <SidebarMenuItem>\n                     <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.items?.length ? (\n                        <>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                 <ChevronRight />\n                                 <span className=\"sr-only\">Toggle</span>\n                              </SidebarMenuAction>\n                           </CollapsibleTrigger>\n                           <CollapsibleContent>\n                              <SidebarMenuSub>\n                                 {item.items?.map((subItem) => (\n                                    <SidebarMenuSubItem key={subItem.title}>\n                                       <SidebarMenuSubButton asChild>\n                                          <a href={subItem.url}>\n                                             <span>{subItem.title}</span>\n                                          </a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           </CollapsibleContent>\n                        </>\n                     ) : null}\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   type LucideIcon,\n   MoreHorizontal,\n   Share,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Share className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/default/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"~/registry/default/ui/label\"\nimport { SidebarInput } from \"~/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <div className=\"relative\">\n            <Label htmlFor=\"search\" className=\"sr-only\">\n               Search\n            </Label>\n            <SidebarInput\n               id=\"search\"\n               placeholder=\"Type to search...\"\n               className=\"h-8 pl-7\"\n            />\n            <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n         </div>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/site-header.tsx",
+      "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"~/registry/default/blocks/sidebar-16/components/search-form\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport { useSidebar } from \"~/registry/default/ui/sidebar\"\n\nexport function SiteHeader() {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <header className=\"fle sticky top-0 z-50 w-full items-center border-b bg-background\">\n         <div className=\"flex h-[--header-height] w-full items-center gap-2 px-4\">\n            <Button\n               className=\"h-8 w-8\"\n               variant=\"ghost\"\n               size=\"icon\"\n               onClick={toggleSidebar}\n            >\n               <SidebarIcon />\n            </Button>\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb className=\"hidden sm:block\">\n               <BreadcrumbList>\n                  <BreadcrumbItem>\n                     <BreadcrumbLink href=\"#\">\n                        Building Your Application\n                     </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator />\n                  <BreadcrumbItem>\n                     <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                  </BreadcrumbItem>\n               </BreadcrumbList>\n            </Breadcrumb>\n            <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n         </div>\n      </header>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-controlled.json b/apps/web/public/r/styles/default/sidebar-controlled.json
new file mode 100644
index 00000000..785d01b8
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-controlled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-controlled",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-controlled.tsx",
+      "content": "\"use client\"\n\nimport {\n   Frame,\n   LifeBuoy,\n   Map,\n   PanelLeftClose,\n   PanelLeftOpen,\n   PieChart,\n   Send,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/default/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n   },\n]\n\nexport default function AppSidebar() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <SidebarProvider open={open} onOpenChange={setOpen}>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton asChild>\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center h-12 px-4 justify-between\">\n               <Button\n                  onClick={() => setOpen((open) => !open)}\n                  size=\"sm\"\n                  variant=\"ghost\"\n               >\n                  {open ? <PanelLeftClose /> : <PanelLeftOpen />}\n                  <span>{open ? \"Close\" : \"Open\"} Sidebar</span>\n               </Button>\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-demo.json b/apps/web/public/r/styles/default/sidebar-demo.json
new file mode 100644
index 00000000..78ee8e6e
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-demo",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Calendar, Home, Inbox, Search, Settings } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\n// Menu items.\nconst items = [\n   {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n   },\n   {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n   },\n   {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n   },\n   {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n   },\n   {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings,\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Application</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {items.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton asChild>\n                                 <a href={item.url}>\n                                    <item.icon />\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center justify-between px-4 h-12\">\n               <SidebarTrigger />\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-footer.json b/apps/web/public/r/styles/default/sidebar-footer.json
new file mode 100644
index 00000000..962c7d83
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-footer.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-footer",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-footer.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, ChevronUp, User2 } from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader />\n            <SidebarContent />\n            <SidebarFooter>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                              Username\n                              <ChevronUp className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           side=\"top\"\n                           className=\"w-[--radix-popper-anchor-width]\"\n                        >\n                           <DropdownMenuItem>\n                              <span>Account</span>\n                           </DropdownMenuItem>\n                           <DropdownMenuItem>\n                              <span>Billing</span>\n                           </DropdownMenuItem>\n                           <DropdownMenuItem>\n                              <span>Sign out</span>\n                           </DropdownMenuItem>\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarFooter>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center justify-between px-4 h-12\">\n               <SidebarTrigger />\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-group-action.json b/apps/web/public/r/styles/default/sidebar-group-action.json
new file mode 100644
index 00000000..378af18f
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-group-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-group-action",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-action.tsx",
+      "content": "\"use client\"\n\nimport {\n   ChevronDown,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Plus,\n   Send,\n} from \"lucide-react\"\nimport { Toaster, toast } from \"sonner\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupAction,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Toaster\n            position=\"bottom-left\"\n            toastOptions={{\n               className: \"ml-[160px]\",\n            }}\n         />\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupAction\n                     title=\"Add Project\"\n                     onClick={() => toast(\"You clicked the group action!\")}\n                  >\n                     <Plus /> <span className=\"sr-only\">Add Project</span>\n                  </SidebarGroupAction>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton asChild>\n                              <a href=\"#\">\n                                 <Frame />\n                                 <span>Design Engineering</span>\n                              </a>\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton asChild>\n                              <a href=\"#\">\n                                 <PieChart />\n                                 <span>Sales & Marketing</span>\n                              </a>\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton asChild>\n                              <a href=\"#\">\n                                 <Map />\n                                 <span>Travel</span>\n                              </a>\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-group-collapsible.json b/apps/web/public/r/styles/default/sidebar-group-collapsible.json
new file mode 100644
index 00000000..c185bb1b
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-group-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-group-collapsible",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <Collapsible defaultOpen className=\"group/collapsible\">\n                  <SidebarGroup>\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           Help\n                           <ChevronDown className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              <SidebarMenuItem>\n                                 <SidebarMenuButton>\n                                    <LifeBuoy />\n                                    Support\n                                 </SidebarMenuButton>\n                              </SidebarMenuItem>\n                              <SidebarMenuItem>\n                                 <SidebarMenuButton>\n                                    <Send />\n                                    Feedback\n                                 </SidebarMenuButton>\n                              </SidebarMenuItem>\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </SidebarGroup>\n               </Collapsible>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-group.json b/apps/web/public/r/styles/default/sidebar-group.json
new file mode 100644
index 00000000..cc2a31e3
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-group.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-group",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-group.tsx",
+      "content": "\"use client\"\n\nimport { LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Help</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton>\n                              <LifeBuoy />\n                              Support\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton>\n                              <Send />\n                              Feedback\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-header.json b/apps/web/public/r/styles/default/sidebar-header.json
new file mode 100644
index 00000000..e7c91558
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-header.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-header",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-header.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown } from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   Sidebar,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                              Select Workspace\n                              <ChevronDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent className=\"w-[--radix-popper-anchor-width]\">\n                           <DropdownMenuItem>\n                              <span>Acme Inc</span>\n                           </DropdownMenuItem>\n                           <DropdownMenuItem>\n                              <span>Acme Corp.</span>\n                           </DropdownMenuItem>\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center justify-between px-4 h-12\">\n               <SidebarTrigger />\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-menu-action.json b/apps/web/public/r/styles/default/sidebar-menu-action.json
new file mode 100644
index 00000000..2c01a8df
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-menu-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-action",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-action.tsx",
+      "content": "\"use client\"\n\nimport {\n   Frame,\n   LifeBuoy,\n   Map,\n   MoreHorizontal,\n   PieChart,\n   Send,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/default/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project, index) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton\n                                 asChild\n                                 className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                              >\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              <DropdownMenu>\n                                 <DropdownMenuTrigger asChild>\n                                    <SidebarMenuAction>\n                                       <MoreHorizontal />\n                                       <span className=\"sr-only\">More</span>\n                                    </SidebarMenuAction>\n                                 </DropdownMenuTrigger>\n                                 <DropdownMenuContent\n                                    side=\"right\"\n                                    align=\"start\"\n                                 >\n                                    <DropdownMenuItem>\n                                       <span>Edit Project</span>\n                                    </DropdownMenuItem>\n                                    <DropdownMenuItem>\n                                       <span>Delete Project</span>\n                                    </DropdownMenuItem>\n                                 </DropdownMenuContent>\n                              </DropdownMenu>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-menu-badge.json b/apps/web/public/r/styles/default/sidebar-menu-badge.json
new file mode 100644
index 00000000..5b7132a8
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-menu-badge.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-badge",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-badge.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/default/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n      badge: \"24\",\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n      badge: \"12\",\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n      badge: \"3\",\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n      badge: \"21\",\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n      badge: \"8\",\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton\n                                 asChild\n                                 className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                              >\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              <SidebarMenuBadge>\n                                 {project.badge}\n                              </SidebarMenuBadge>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-menu-collapsible.json b/apps/web/public/r/styles/default/sidebar-menu-collapsible.json
new file mode 100644
index 00000000..a85aacad
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-menu-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-collapsible",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n} from \"~/registry/default/ui/sidebar\"\n\nconst items = [\n   {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Installation\",\n            url: \"#\",\n         },\n         {\n            title: \"Project Structure\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Routing\",\n            url: \"#\",\n         },\n         {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n         },\n         {\n            title: \"Rendering\",\n            url: \"#\",\n         },\n         {\n            title: \"Caching\",\n            url: \"#\",\n         },\n         {\n            title: \"Styling\",\n            url: \"#\",\n         },\n         {\n            title: \"Optimizing\",\n            url: \"#\",\n         },\n         {\n            title: \"Configuring\",\n            url: \"#\",\n         },\n         {\n            title: \"Testing\",\n            url: \"#\",\n         },\n         {\n            title: \"Authentication\",\n            url: \"#\",\n         },\n         {\n            title: \"Deploying\",\n            url: \"#\",\n         },\n         {\n            title: \"Upgrading\",\n            url: \"#\",\n         },\n         {\n            title: \"Examples\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Components\",\n            url: \"#\",\n         },\n         {\n            title: \"File Conventions\",\n            url: \"#\",\n         },\n         {\n            title: \"Functions\",\n            url: \"#\",\n         },\n         {\n            title: \"next.config.js Options\",\n            url: \"#\",\n         },\n         {\n            title: \"CLI\",\n            url: \"#\",\n         },\n         {\n            title: \"Edge Runtime\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Accessibility\",\n            url: \"#\",\n         },\n         {\n            title: \"Fast Refresh\",\n            url: \"#\",\n         },\n         {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n         },\n         {\n            title: \"Supported Browsers\",\n            url: \"#\",\n         },\n         {\n            title: \"Turbopack\",\n            url: \"#\",\n         },\n      ],\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {items.map((item, index) => (\n                           <Collapsible\n                              key={index}\n                              className=\"group/collapsible\"\n                              defaultOpen={index === 0}\n                           >\n                              <SidebarMenuItem>\n                                 <CollapsibleTrigger asChild>\n                                    <SidebarMenuButton>\n                                       <span>{item.title}</span>\n                                       <ChevronRight className=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                                    </SidebarMenuButton>\n                                 </CollapsibleTrigger>\n                                 <CollapsibleContent>\n                                    <SidebarMenuSub>\n                                       {item.items.map((subItem, subIndex) => (\n                                          <SidebarMenuSubItem key={subIndex}>\n                                             <SidebarMenuSubButton asChild>\n                                                <a href={subItem.url}>\n                                                   <span>{subItem.title}</span>\n                                                </a>\n                                             </SidebarMenuSubButton>\n                                          </SidebarMenuSubItem>\n                                       ))}\n                                    </SidebarMenuSub>\n                                 </CollapsibleContent>\n                              </SidebarMenuItem>\n                           </Collapsible>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-menu-sub.json b/apps/web/public/r/styles/default/sidebar-menu-sub.json
new file mode 100644
index 00000000..f9728c31
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-menu-sub.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-sub",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-sub.tsx",
+      "content": "\"use client\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n} from \"~/registry/default/ui/sidebar\"\n\nconst items = [\n   {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Installation\",\n            url: \"#\",\n         },\n         {\n            title: \"Project Structure\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Routing\",\n            url: \"#\",\n         },\n         {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n         },\n         {\n            title: \"Rendering\",\n            url: \"#\",\n         },\n         {\n            title: \"Caching\",\n            url: \"#\",\n         },\n         {\n            title: \"Styling\",\n            url: \"#\",\n         },\n         {\n            title: \"Optimizing\",\n            url: \"#\",\n         },\n         {\n            title: \"Configuring\",\n            url: \"#\",\n         },\n         {\n            title: \"Testing\",\n            url: \"#\",\n         },\n         {\n            title: \"Authentication\",\n            url: \"#\",\n         },\n         {\n            title: \"Deploying\",\n            url: \"#\",\n         },\n         {\n            title: \"Upgrading\",\n            url: \"#\",\n         },\n         {\n            title: \"Examples\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Components\",\n            url: \"#\",\n         },\n         {\n            title: \"File Conventions\",\n            url: \"#\",\n         },\n         {\n            title: \"Functions\",\n            url: \"#\",\n         },\n         {\n            title: \"next.config.js Options\",\n            url: \"#\",\n         },\n         {\n            title: \"CLI\",\n            url: \"#\",\n         },\n         {\n            title: \"Edge Runtime\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Accessibility\",\n            url: \"#\",\n         },\n         {\n            title: \"Fast Refresh\",\n            url: \"#\",\n         },\n         {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n         },\n         {\n            title: \"Supported Browsers\",\n            url: \"#\",\n         },\n         {\n            title: \"Turbopack\",\n            url: \"#\",\n         },\n      ],\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {items.map((item, index) => (\n                           <SidebarMenuItem key={index}>\n                              <SidebarMenuButton asChild>\n                                 <a href={item.url}>\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              <SidebarMenuSub>\n                                 {item.items.map((subItem, subIndex) => (\n                                    <SidebarMenuSubItem key={subIndex}>\n                                       <SidebarMenuSubButton asChild>\n                                          <a href={subItem.url}>\n                                             <span>{subItem.title}</span>\n                                          </a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-menu.json b/apps/web/public/r/styles/default/sidebar-menu.json
new file mode 100644
index 00000000..21355970
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-menu.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/default/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton asChild>\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar-rsc.json b/apps/web/public/r/styles/default/sidebar-rsc.json
new file mode 100644
index 00000000..bf8e82aa
--- /dev/null
+++ b/apps/web/public/r/styles/default/sidebar-rsc.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-rsc",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-rsc.tsx",
+      "content": "import { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSkeleton,\n   SidebarProvider,\n} from \"~/registry/default/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n      badge: \"24\",\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n      badge: \"12\",\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n      badge: \"3\",\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n      badge: \"21\",\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n      badge: \"8\",\n   },\n]\n\n// Dummy fetch function\nasync function fetchProjects() {\n   await new Promise((resolve) => setTimeout(resolve, 3000))\n   return projects\n}\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <React.Suspense fallback={<NavProjectsSkeleton />}>\n                        <NavProjects />\n                     </React.Suspense>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n\nfunction NavProjectsSkeleton() {\n   return (\n      <SidebarMenu>\n         {Array.from({ length: 5 }).map((_, index) => (\n            <SidebarMenuItem key={index}>\n               <SidebarMenuSkeleton showIcon />\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n\nasync function NavProjects() {\n   const projects = await fetchProjects()\n\n   return (\n      <SidebarMenu>\n         {projects.map((project) => (\n            <SidebarMenuItem key={project.name}>\n               <SidebarMenuButton asChild>\n                  <a href={project.url}>\n                     <project.icon />\n                     <span>{project.name}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/sidebar.json b/apps/web/public/r/styles/default/sidebar.json
index 83815868..b71f1ee3 100644
--- a/apps/web/public/r/styles/default/sidebar.json
+++ b/apps/web/public/r/styles/default/sidebar.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-slot",
     "class-variance-authority",
@@ -18,8 +20,8 @@
   "files": [
     {
       "path": "ui/sidebar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\nimport { PanelLeft } from 'lucide-react'\n\nimport { useIsMobile } from '~/registry/default/hooks/use-mobile'\nimport { ny } from '~/registry/default/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport { Input } from '~/registry/default/ui/input'\nimport { Separator } from '~/registry/default/ui/separator'\nimport { Sheet, SheetContent } from '~/registry/default/ui/sheet'\nimport { Skeleton } from '~/registry/default/ui/skeleton'\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/registry/default/ui/tooltip'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar:state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\ninterface SidebarContext {\n   state: 'expanded' | 'collapsed'\n   open: boolean\n   setOpen: (open: boolean) => void\n   openMobile: boolean\n   setOpenMobile: (open: boolean) => void\n   isMobile: boolean\n   toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n   const context = React.useContext(SidebarContext)\n   if (!context) {\n      throw new Error('useSidebar must be used within a Sidebar.')\n   }\n\n   return context\n}\n\nconst SidebarProvider = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'> & {\n      defaultOpen?: boolean\n      open?: boolean\n      onOpenChange?: (open: boolean) => void\n   }\n>(\n         (\n            {\n               defaultOpen = true,\n               open: openProp,\n               onOpenChange: setOpenProp,\n               className,\n               style,\n               children,\n               ...props\n            },\n            ref,\n         ) => {\n            const isMobile = useIsMobile()\n            const [openMobile, setOpenMobile] = React.useState(false)\n\n            // This is the internal state of the sidebar.\n            // We use openProp and setOpenProp for control from outside the component.\n            const [_open, _setOpen] = React.useState(defaultOpen)\n            const open = openProp ?? _open\n            const setOpen = React.useCallback(\n               (value: boolean | ((value: boolean) => boolean)) => {\n                  if (setOpenProp) {\n                     return setOpenProp?.(\n                        typeof value === 'function' ? value(open) : value,\n                     )\n                  }\n\n                  _setOpen(value)\n\n                  // This sets the cookie to keep the sidebar state.\n                  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n               },\n               [setOpenProp, open],\n            )\n\n            // Helper to toggle the sidebar.\n            const toggleSidebar = React.useCallback(() => {\n               return isMobile\n                  ? setOpenMobile(open => !open)\n                  : setOpen(open => !open)\n            }, [isMobile, setOpen, setOpenMobile])\n\n            // Adds a keyboard shortcut to toggle the sidebar.\n            React.useEffect(() => {\n               const handleKeyDown = (event: KeyboardEvent) => {\n                  if (\n                     event.key === SIDEBAR_KEYBOARD_SHORTCUT\n                     && (event.metaKey || event.ctrlKey)\n                  ) {\n                     event.preventDefault()\n                     toggleSidebar()\n                  }\n               }\n\n               window.addEventListener('keydown', handleKeyDown)\n               return () => window.removeEventListener('keydown', handleKeyDown)\n            }, [toggleSidebar])\n\n            // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n            // This makes it easier to style the sidebar with Tailwind classes.\n            const state = open ? 'expanded' : 'collapsed'\n\n            const contextValue = React.useMemo<SidebarContext>(\n               () => ({\n                  state,\n                  open,\n                  setOpen,\n                  isMobile,\n                  openMobile,\n                  setOpenMobile,\n                  toggleSidebar,\n               }),\n               [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n            )\n\n            return (\n               <SidebarContext.Provider value={contextValue}>\n                  <TooltipProvider delayDuration={0}>\n                     <div\n                        style={\n                           {\n                              '--sidebar-width': SIDEBAR_WIDTH,\n                              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n                              ...style,\n                           } as React.CSSProperties\n                        }\n                        className={ny(\n                           'group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',\n                           className,\n                        )}\n                        ref={ref}\n                        {...props}\n                     >\n                        {children}\n                     </div>\n                  </TooltipProvider>\n               </SidebarContext.Provider>\n            )\n         },\n         )\nSidebarProvider.displayName = 'SidebarProvider'\n\nconst Sidebar = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'> & {\n      side?: 'left' | 'right'\n      variant?: 'sidebar' | 'floating' | 'inset'\n      collapsible?: 'offcanvas' | 'icon' | 'none'\n   }\n>(\n   (\n      {\n         side = 'left',\n         variant = 'sidebar',\n         collapsible = 'offcanvas',\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n      if (collapsible === 'none') {\n         return (\n            <div\n               className={ny(\n                  'bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col',\n                  className,\n               )}\n               ref={ref}\n               {...props}\n            >\n               {children}\n            </div>\n         )\n      }\n\n      if (isMobile) {\n         return (\n            <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n               <SheetContent\n                  data-sidebar=\"sidebar\"\n                  data-mobile=\"true\"\n                  className=\"bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden\"\n                  style={\n                     {\n                        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n                     } as React.CSSProperties\n                  }\n                  side={side}\n               >\n                  <div className=\"flex size-full flex-col\">{children}</div>\n               </SheetContent>\n            </Sheet>\n         )\n      }\n\n      return (\n         <div\n            ref={ref}\n            className=\"group peer hidden md:block\"\n            data-state={state}\n            data-collapsible={state === 'collapsed' ? collapsible : ''}\n            data-variant={variant}\n            data-side={side}\n         >\n            {/* This is what handles the sidebar gap on desktop */}\n            <div\n               className={ny(\n                  'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',\n                  'group-data-[collapsible=offcanvas]:w-0',\n                  'group-data-[side=right]:rotate-180',\n                  variant === 'floating' || variant === 'inset'\n                     ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n                     : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n               )}\n            />\n            <div\n               className={ny(\n                  'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',\n                  side === 'left'\n                     ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n                     : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n                  // Adjust the padding for floating and inset variants.\n                  variant === 'floating' || variant === 'inset'\n                     ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n                     : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n                  className,\n               )}\n               {...props}\n            >\n               <div\n                  data-sidebar=\"sidebar\"\n                  className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow\"\n               >\n                  {children}\n               </div>\n            </div>\n         </div>\n      )\n   },\n)\nSidebar.displayName = 'Sidebar'\n\nconst SidebarTrigger = React.forwardRef<\n   React.ElementRef<typeof Button>,\n   React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <Button\n         ref={ref}\n         data-sidebar=\"trigger\"\n         variant=\"ghost\"\n         size=\"icon\"\n         className={ny('size-7', className)}\n         onClick={(event) => {\n            onClick?.(event)\n            toggleSidebar()\n         }}\n         {...props}\n      >\n         <PanelLeft />\n         <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n   )\n})\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<'button'>\n>(({ className, ...props }, ref) => {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <button\n         ref={ref}\n         data-sidebar=\"rail\"\n         aria-label=\"Toggle Sidebar\"\n         tabIndex={-1}\n         onClick={toggleSidebar}\n         title=\"Toggle Sidebar\"\n         className={ny(\n            'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n            '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n            '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n            'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',\n            '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n            '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'main'>\n>(({ className, ...props }, ref) => {\n   return (\n      <main\n         ref={ref}\n         className={ny(\n            'bg-background relative flex min-h-svh flex-1 flex-col',\n            'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = React.forwardRef<\n   React.ElementRef<typeof Input>,\n   React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n   return (\n      <Input\n         ref={ref}\n         data-sidebar=\"input\"\n         className={ny(\n            'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'>\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"header\"\n         className={ny('flex flex-col gap-2 p-2', className)}\n         {...props}\n      />\n   )\n})\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'>\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"footer\"\n         className={ny('flex flex-col gap-2 p-2', className)}\n         {...props}\n      />\n   )\n})\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = React.forwardRef<\n   React.ElementRef<typeof Separator>,\n   React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n   return (\n      <Separator\n         ref={ref}\n         data-sidebar=\"separator\"\n         className={ny('bg-sidebar-border mx-2 w-auto', className)}\n         {...props}\n      />\n   )\n})\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'>\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"content\"\n         className={ny(\n            'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'>\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"group\"\n         className={ny('relative flex w-full min-w-0 flex-col p-2', className)}\n         {...props}\n      />\n   )\n})\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = React.forwardRef<\n   HTMLDivElement,\n  React.ComponentProps<'div'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : 'div'\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"group-label\"\n         className={ny(\n            'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n            'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = React.forwardRef<\n   HTMLButtonElement,\n  React.ComponentProps<'button'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : 'button'\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"group-action\"\n         className={ny(\n            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n            // Increases the hit area of the button on mobile.\n            'after:absolute after:-inset-2 after:md:hidden',\n            'group-data-[collapsible=icon]:hidden',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={ny('w-full text-sm', className)}\n      {...props}\n   />\n))\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<'ul'>\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={ny('flex w-full min-w-0 flex-col gap-1', className)}\n      {...props}\n   />\n))\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<'li'>\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={ny('group/menu-item relative', className)}\n      {...props}\n   />\n))\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n   'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n   {\n      variants: {\n         variant: {\n            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n            outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n         },\n         size: {\n            default: 'h-8 text-sm',\n            sm: 'h-7 text-xs',\n            lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n         size: 'default',\n      },\n   },\n)\n\nconst SidebarMenuButton = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<'button'> & {\n      asChild?: boolean\n      isActive?: boolean\n      tooltip?: string | React.ComponentProps<typeof TooltipContent>\n   } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n   (\n      {\n         asChild = false,\n         isActive = false,\n         variant = 'default',\n         size = 'default',\n         tooltip,\n         className,\n         ...props\n      },\n      ref,\n   ) => {\n      const Comp = asChild ? Slot : 'button'\n      const { isMobile, state } = useSidebar()\n\n      const button = (\n         <Comp\n            ref={ref}\n            data-sidebar=\"menu-button\"\n            data-size={size}\n            data-active={isActive}\n            className={ny(sidebarMenuButtonVariants({ variant, size }), className)}\n            {...props}\n         />\n      )\n\n      if (!tooltip) {\n         return button\n      }\n\n      if (typeof tooltip === 'string') {\n         tooltip = {\n            children: tooltip,\n         }\n      }\n\n      return (\n         <Tooltip>\n            <TooltipTrigger asChild>{button}</TooltipTrigger>\n            <TooltipContent\n               side=\"right\"\n               align=\"center\"\n               hidden={state !== 'collapsed' || isMobile}\n               {...tooltip}\n            />\n         </Tooltip>\n      )\n   },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<'button'> & {\n      asChild?: boolean\n      showOnHover?: boolean\n   }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : 'button'\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"menu-action\"\n         className={ny(\n            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n            // Increases the hit area of the button on mobile.\n            'after:absolute after:-inset-2 after:md:hidden',\n            'peer-data-[size=sm]/menu-button:top-1',\n            'peer-data-[size=default]/menu-button:top-1.5',\n            'peer-data-[size=lg]/menu-button:top-2.5',\n            'group-data-[collapsible=icon]:hidden',\n            showOnHover\n            && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={ny(\n         'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',\n         'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n         'peer-data-[size=sm]/menu-button:top-1',\n         'peer-data-[size=default]/menu-button:top-1.5',\n         'peer-data-[size=lg]/menu-button:top-2.5',\n         'group-data-[collapsible=icon]:hidden',\n         className,\n      )}\n      {...props}\n   />\n))\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'> & {\n      showIcon?: boolean\n   }\n>(({ className, showIcon = false, ...props }, ref) => {\n   // Random width between 50 to 90%.\n   const width = React.useMemo(() => {\n      return `${Math.floor(Math.random() * 40) + 50}%`\n   }, [])\n\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"menu-skeleton\"\n         className={ny('flex h-8 items-center gap-2 rounded-md px-2', className)}\n         {...props}\n      >\n         {showIcon && (\n            <Skeleton\n               className=\"size-4 rounded-md\"\n               data-sidebar=\"menu-skeleton-icon\"\n            />\n         )}\n         <Skeleton\n            className=\"h-4 max-w-[--skeleton-width] flex-1\"\n            data-sidebar=\"menu-skeleton-text\"\n            style={\n               {\n                  '--skeleton-width': width,\n               } as React.CSSProperties\n            }\n         />\n      </div>\n   )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<'ul'>\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={ny(\n         'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n         'group-data-[collapsible=icon]:hidden',\n         className,\n      )}\n      {...props}\n   />\n))\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<'li'>\n>(({ ...props }, ref) => <li ref={ref} {...props} />)\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = React.forwardRef<\n   HTMLAnchorElement,\n   React.ComponentProps<'a'> & {\n      asChild?: boolean\n      size?: 'sm' | 'md'\n      isActive?: boolean\n   }\n>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {\n   const Comp = asChild ? Slot : 'a'\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"menu-sub-button\"\n         data-size={size}\n         data-active={isActive}\n         className={ny(\n            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n            'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n            size === 'sm' && 'text-xs',\n            size === 'md' && 'text-sm',\n            'group-data-[collapsible=icon]:hidden',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupAction,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSkeleton,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport { PanelLeft } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { useIsMobile } from \"~/registry/default/hooks/use-mobile\"\nimport { ny } from \"~/registry/default/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport { Sheet, SheetContent } from \"~/registry/default/ui/sheet\"\nimport { Skeleton } from \"~/registry/default/ui/skeleton\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/default/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar:state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ninterface SidebarContext {\n   state: \"expanded\" | \"collapsed\"\n   open: boolean\n   setOpen: (open: boolean) => void\n   openMobile: boolean\n   setOpenMobile: (open: boolean) => void\n   isMobile: boolean\n   toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n   const context = React.useContext(SidebarContext)\n   if (!context) {\n      throw new Error(\"useSidebar must be used within a Sidebar.\")\n   }\n\n   return context\n}\n\nconst SidebarProvider = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      defaultOpen?: boolean\n      open?: boolean\n      onOpenChange?: (open: boolean) => void\n   }\n>(\n   (\n      {\n         defaultOpen = true,\n         open: openProp,\n         onOpenChange: setOpenProp,\n         className,\n         style,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const isMobile = useIsMobile()\n      const [openMobile, setOpenMobile] = React.useState(false)\n\n      // This is the internal state of the sidebar.\n      // We use openProp and setOpenProp for control from outside the component.\n      const [_open, _setOpen] = React.useState(defaultOpen)\n      const open = openProp ?? _open\n      const setOpen = React.useCallback(\n         (value: boolean | ((value: boolean) => boolean)) => {\n            if (setOpenProp) {\n               return setOpenProp?.(\n                  typeof value === \"function\" ? value(open) : value,\n               )\n            }\n\n            _setOpen(value)\n\n            // This sets the cookie to keep the sidebar state.\n            document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n         },\n         [setOpenProp, open],\n      )\n\n      // Helper to toggle the sidebar.\n      const toggleSidebar = React.useCallback(() => {\n         return isMobile\n            ? setOpenMobile((open) => !open)\n            : setOpen((open) => !open)\n      }, [isMobile, setOpen, setOpenMobile])\n\n      // Adds a keyboard shortcut to toggle the sidebar.\n      React.useEffect(() => {\n         const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n               event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n               (event.metaKey || event.ctrlKey)\n            ) {\n               event.preventDefault()\n               toggleSidebar()\n            }\n         }\n\n         window.addEventListener(\"keydown\", handleKeyDown)\n         return () => window.removeEventListener(\"keydown\", handleKeyDown)\n      }, [toggleSidebar])\n\n      // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n      // This makes it easier to style the sidebar with Tailwind classes.\n      const state = open ? \"expanded\" : \"collapsed\"\n\n      const contextValue = React.useMemo<SidebarContext>(\n         () => ({\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n         }),\n         [\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n         ],\n      )\n\n      return (\n         <SidebarContext.Provider value={contextValue}>\n            <TooltipProvider delayDuration={0}>\n               <div\n                  style={\n                     {\n                        \"--sidebar-width\": SIDEBAR_WIDTH,\n                        \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n                        ...style,\n                     } as React.CSSProperties\n                  }\n                  className={ny(\n                     \"group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full\",\n                     className,\n                  )}\n                  ref={ref}\n                  {...props}\n               >\n                  {children}\n               </div>\n            </TooltipProvider>\n         </SidebarContext.Provider>\n      )\n   },\n)\nSidebarProvider.displayName = \"SidebarProvider\"\n\nconst Sidebar = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      side?: \"left\" | \"right\"\n      variant?: \"sidebar\" | \"floating\" | \"inset\"\n      collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n   }\n>(\n   (\n      {\n         side = \"left\",\n         variant = \"sidebar\",\n         collapsible = \"offcanvas\",\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n      if (collapsible === \"none\") {\n         return (\n            <div\n               className={ny(\n                  \"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col\",\n                  className,\n               )}\n               ref={ref}\n               {...props}\n            >\n               {children}\n            </div>\n         )\n      }\n\n      if (isMobile) {\n         return (\n            <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n               <SheetContent\n                  data-sidebar=\"sidebar\"\n                  data-mobile=\"true\"\n                  className=\"bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden\"\n                  style={\n                     {\n                        \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n                     } as React.CSSProperties\n                  }\n                  side={side}\n               >\n                  <div className=\"flex size-full flex-col\">{children}</div>\n               </SheetContent>\n            </Sheet>\n         )\n      }\n\n      return (\n         <div\n            ref={ref}\n            className=\"group peer hidden md:block\"\n            data-state={state}\n            data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n            data-variant={variant}\n            data-side={side}\n         >\n            {/* This is what handles the sidebar gap on desktop */}\n            <div\n               className={ny(\n                  \"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear\",\n                  \"group-data-[collapsible=offcanvas]:w-0\",\n                  \"group-data-[side=right]:rotate-180\",\n                  variant === \"floating\" || variant === \"inset\"\n                     ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n                     : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\",\n               )}\n            />\n            <div\n               className={ny(\n                  \"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex\",\n                  side === \"left\"\n                     ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n                     : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n                  // Adjust the padding for floating and inset variants.\n                  variant === \"floating\" || variant === \"inset\"\n                     ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n                     : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n                  className,\n               )}\n               {...props}\n            >\n               <div\n                  data-sidebar=\"sidebar\"\n                  className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow\"\n               >\n                  {children}\n               </div>\n            </div>\n         </div>\n      )\n   },\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarTrigger = React.forwardRef<\n   React.ElementRef<typeof Button>,\n   React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <Button\n         ref={ref}\n         data-sidebar=\"trigger\"\n         variant=\"ghost\"\n         size=\"icon\"\n         className={ny(\"size-7\", className)}\n         onClick={(event) => {\n            onClick?.(event)\n            toggleSidebar()\n         }}\n         {...props}\n      >\n         <PanelLeft />\n         <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n   )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst SidebarRail = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <button\n         ref={ref}\n         data-sidebar=\"rail\"\n         aria-label=\"Toggle Sidebar\"\n         tabIndex={-1}\n         onClick={toggleSidebar}\n         title=\"Toggle Sidebar\"\n         className={ny(\n            \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n            \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n            \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n            \"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n            \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n            \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarRail.displayName = \"SidebarRail\"\n\nconst SidebarInset = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"main\">\n>(({ className, ...props }, ref) => {\n   return (\n      <main\n         ref={ref}\n         className={ny(\n            \"bg-background relative flex min-h-svh flex-1 flex-col\",\n            \"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarInset.displayName = \"SidebarInset\"\n\nconst SidebarInput = React.forwardRef<\n   React.ElementRef<typeof Input>,\n   React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n   return (\n      <Input\n         ref={ref}\n         data-sidebar=\"input\"\n         className={ny(\n            \"bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarInput.displayName = \"SidebarInput\"\n\nconst SidebarHeader = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"header\"\n         className={ny(\"flex flex-col gap-2 p-2\", className)}\n         {...props}\n      />\n   )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\nconst SidebarFooter = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"footer\"\n         className={ny(\"flex flex-col gap-2 p-2\", className)}\n         {...props}\n      />\n   )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarSeparator = React.forwardRef<\n   React.ElementRef<typeof Separator>,\n   React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n   return (\n      <Separator\n         ref={ref}\n         data-sidebar=\"separator\"\n         className={ny(\"bg-sidebar-border mx-2 w-auto\", className)}\n         {...props}\n      />\n   )\n})\nSidebarSeparator.displayName = \"SidebarSeparator\"\n\nconst SidebarContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"content\"\n         className={ny(\n            \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\nconst SidebarGroup = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"group\"\n         className={ny(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n         {...props}\n      />\n   )\n})\nSidebarGroup.displayName = \"SidebarGroup\"\n\nconst SidebarGroupLabel = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"div\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"group-label\"\n         className={ny(\n            \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n            \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\"\n\nconst SidebarGroupAction = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"button\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"group-action\"\n         className={ny(\n            \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n            // Increases the hit area of the button on mobile.\n            \"after:absolute after:-inset-2 after:md:hidden\",\n            \"group-data-[collapsible=icon]:hidden\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarGroupAction.displayName = \"SidebarGroupAction\"\n\nconst SidebarGroupContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={ny(\"w-full text-sm\", className)}\n      {...props}\n   />\n))\nSidebarGroupContent.displayName = \"SidebarGroupContent\"\n\nconst SidebarMenu = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={ny(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n   />\n))\nSidebarMenu.displayName = \"SidebarMenu\"\n\nconst SidebarMenuItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={ny(\"group/menu-item relative\", className)}\n      {...props}\n   />\n))\nSidebarMenuItem.displayName = \"SidebarMenuItem\"\n\nconst sidebarMenuButtonVariants = cva(\n   \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n   {\n      variants: {\n         variant: {\n            default:\n               \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n            outline:\n               \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n         },\n         size: {\n            default: \"h-8 text-sm\",\n            sm: \"h-7 text-xs\",\n            lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n         size: \"default\",\n      },\n   },\n)\n\nconst SidebarMenuButton = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\"> & {\n      asChild?: boolean\n      isActive?: boolean\n      tooltip?: string | React.ComponentProps<typeof TooltipContent>\n   } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n   (\n      {\n         asChild = false,\n         isActive = false,\n         variant = \"default\",\n         size = \"default\",\n         tooltip,\n         className,\n         ...props\n      },\n      ref,\n   ) => {\n      const Comp = asChild ? Slot : \"button\"\n      const { isMobile, state } = useSidebar()\n\n      const button = (\n         <Comp\n            ref={ref}\n            data-sidebar=\"menu-button\"\n            data-size={size}\n            data-active={isActive}\n            className={ny(\n               sidebarMenuButtonVariants({ variant, size }),\n               className,\n            )}\n            {...props}\n         />\n      )\n\n      if (!tooltip) {\n         return button\n      }\n\n      if (typeof tooltip === \"string\") {\n         tooltip = {\n            children: tooltip,\n         }\n      }\n\n      return (\n         <Tooltip>\n            <TooltipTrigger asChild>{button}</TooltipTrigger>\n            <TooltipContent\n               side=\"right\"\n               align=\"center\"\n               hidden={state !== \"collapsed\" || isMobile}\n               {...tooltip}\n            />\n         </Tooltip>\n      )\n   },\n)\nSidebarMenuButton.displayName = \"SidebarMenuButton\"\n\nconst SidebarMenuAction = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\"> & {\n      asChild?: boolean\n      showOnHover?: boolean\n   }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"button\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"menu-action\"\n         className={ny(\n            \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n            // Increases the hit area of the button on mobile.\n            \"after:absolute after:-inset-2 after:md:hidden\",\n            \"peer-data-[size=sm]/menu-button:top-1\",\n            \"peer-data-[size=default]/menu-button:top-1.5\",\n            \"peer-data-[size=lg]/menu-button:top-2.5\",\n            \"group-data-[collapsible=icon]:hidden\",\n            showOnHover &&\n               \"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarMenuAction.displayName = \"SidebarMenuAction\"\n\nconst SidebarMenuBadge = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={ny(\n         \"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums\",\n         \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n         \"peer-data-[size=sm]/menu-button:top-1\",\n         \"peer-data-[size=default]/menu-button:top-1.5\",\n         \"peer-data-[size=lg]/menu-button:top-2.5\",\n         \"group-data-[collapsible=icon]:hidden\",\n         className,\n      )}\n      {...props}\n   />\n))\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\"\n\nconst SidebarMenuSkeleton = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      showIcon?: boolean\n   }\n>(({ className, showIcon = false, ...props }, ref) => {\n   // Random width between 50 to 90%.\n   const width = React.useMemo(() => {\n      return `${Math.floor(Math.random() * 40) + 50}%`\n   }, [])\n\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"menu-skeleton\"\n         className={ny(\n            \"flex h-8 items-center gap-2 rounded-md px-2\",\n            className,\n         )}\n         {...props}\n      >\n         {showIcon && (\n            <Skeleton\n               className=\"size-4 rounded-md\"\n               data-sidebar=\"menu-skeleton-icon\"\n            />\n         )}\n         <Skeleton\n            className=\"h-4 max-w-[--skeleton-width] flex-1\"\n            data-sidebar=\"menu-skeleton-text\"\n            style={\n               {\n                  \"--skeleton-width\": width,\n               } as React.CSSProperties\n            }\n         />\n      </div>\n   )\n})\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\n\nconst SidebarMenuSub = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={ny(\n         \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n         \"group-data-[collapsible=icon]:hidden\",\n         className,\n      )}\n      {...props}\n   />\n))\nSidebarMenuSub.displayName = \"SidebarMenuSub\"\n\nconst SidebarMenuSubItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<\"li\">\n>(({ ...props }, ref) => <li ref={ref} {...props} />)\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\"\n\nconst SidebarMenuSubButton = React.forwardRef<\n   HTMLAnchorElement,\n   React.ComponentProps<\"a\"> & {\n      asChild?: boolean\n      size?: \"sm\" | \"md\"\n      isActive?: boolean\n   }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"a\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"menu-sub-button\"\n         data-size={size}\n         data-active={isActive}\n         className={ny(\n            \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n            \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n            size === \"sm\" && \"text-xs\",\n            size === \"md\" && \"text-sm\",\n            \"group-data-[collapsible=icon]:hidden\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\"\n\nexport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupAction,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSkeleton,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/sink.json b/apps/web/public/r/styles/default/sink.json
new file mode 100644
index 00000000..d7694fec
--- /dev/null
+++ b/apps/web/public/r/styles/default/sink.json
@@ -0,0 +1,452 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sink",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "accordion",
+    "alert",
+    "alert-dialog",
+    "aspect-ratio",
+    "avatar",
+    "badge",
+    "breadcrumb",
+    "button",
+    "calendar",
+    "card",
+    "carousel",
+    "chart",
+    "checkbox",
+    "collapsible",
+    "command",
+    "context-menu",
+    "dialog",
+    "drawer",
+    "dropdown-menu",
+    "hover-card",
+    "input",
+    "input-otp",
+    "label",
+    "menubar",
+    "navigation-menu",
+    "pagination",
+    "popover",
+    "progress",
+    "radio-group",
+    "resizable",
+    "scroll-area",
+    "select",
+    "separator",
+    "sheet",
+    "sidebar",
+    "skeleton",
+    "slider",
+    "sonner",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "toast",
+    "toggle",
+    "toggle-group",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "internal/sink/page.tsx",
+      "content": "import { AccordionDemo } from \"~/registry/default/internal/sink/components/accordion-demo\"\nimport { AlertDemo } from \"~/registry/default/internal/sink/components/alert-demo\"\nimport { AlertDialogDemo } from \"~/registry/default/internal/sink/components/alert-dialog-demo\"\nimport { AppSidebar } from \"~/registry/default/internal/sink/components/app-sidebar\"\nimport { AspectRatioDemo } from \"~/registry/default/internal/sink/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"~/registry/default/internal/sink/components/avatar-demo\"\nimport { BadgeDemo } from \"~/registry/default/internal/sink/components/badge-demo\"\nimport { BadgeDestructive } from \"~/registry/default/internal/sink/components/badge-destructive\"\nimport { BadgeOutline } from \"~/registry/default/internal/sink/components/badge-outline\"\nimport { BadgeSecondary } from \"~/registry/default/internal/sink/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"~/registry/default/internal/sink/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"~/registry/default/internal/sink/components/button-demo\"\nimport { ButtonDestructive } from \"~/registry/default/internal/sink/components/button-destructive\"\nimport { ButtonGhost } from \"~/registry/default/internal/sink/components/button-ghost\"\nimport { ButtonLink } from \"~/registry/default/internal/sink/components/button-link\"\nimport { ButtonLoading } from \"~/registry/default/internal/sink/components/button-loading\"\nimport { ButtonOutline } from \"~/registry/default/internal/sink/components/button-outline\"\nimport { ButtonSecondary } from \"~/registry/default/internal/sink/components/button-secondary\"\nimport { ButtonWithIcon } from \"~/registry/default/internal/sink/components/button-with-icon\"\nimport { CalendarDemo } from \"~/registry/default/internal/sink/components/calendar-demo\"\nimport { CardDemo } from \"~/registry/default/internal/sink/components/card-demo\"\nimport { CarouselDemo } from \"~/registry/default/internal/sink/components/carousel-demo\"\nimport { CheckboxDemo } from \"~/registry/default/internal/sink/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"~/registry/default/internal/sink/components/collapsible-demo\"\nimport { ComboboxDemo } from \"~/registry/default/internal/sink/components/combobox-demo\"\nimport { CommandDemo } from \"~/registry/default/internal/sink/components/command-demo\"\nimport { ComponentWrapper } from \"~/registry/default/internal/sink/components/component-wrapper\"\nimport { ContextMenuDemo } from \"~/registry/default/internal/sink/components/context-menu-demo\"\nimport { DatePickerDemo } from \"~/registry/default/internal/sink/components/date-picker-demo\"\nimport { DialogDemo } from \"~/registry/default/internal/sink/components/dialog-demo\"\nimport { DrawerDemo } from \"~/registry/default/internal/sink/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"~/registry/default/internal/sink/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"~/registry/default/internal/sink/components/hover-card-demo\"\nimport { InputDemo } from \"~/registry/default/internal/sink/components/input-demo\"\nimport { InputOTPDemo } from \"~/registry/default/internal/sink/components/input-otp-demo\"\nimport { LabelDemo } from \"~/registry/default/internal/sink/components/label-demo\"\nimport { MenubarDemo } from \"~/registry/default/internal/sink/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"~/registry/default/internal/sink/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"~/registry/default/internal/sink/components/pagination-demo\"\nimport { PopoverDemo } from \"~/registry/default/internal/sink/components/popover-demo\"\nimport { ProgressDemo } from \"~/registry/default/internal/sink/components/progress-demo\"\nimport { RadioGroupDemo } from \"~/registry/default/internal/sink/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"~/registry/default/internal/sink/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"~/registry/default/internal/sink/components/scroll-area-demo\"\nimport { SelectDemo } from \"~/registry/default/internal/sink/components/select-demo\"\nimport { SeparatorDemo } from \"~/registry/default/internal/sink/components/separator-demo\"\nimport { SheetDemo } from \"~/registry/default/internal/sink/components/sheet-demo\"\nimport { SkeletonDemo } from \"~/registry/default/internal/sink/components/skeleton-demo\"\nimport { SliderDemo } from \"~/registry/default/internal/sink/components/slider-demo\"\nimport { SonnerDemo } from \"~/registry/default/internal/sink/components/sonner-demo\"\nimport { SwitchDemo } from \"~/registry/default/internal/sink/components/switch-demo\"\nimport { TableDemo } from \"~/registry/default/internal/sink/components/table-demo\"\nimport { TabsDemo } from \"~/registry/default/internal/sink/components/tabs-demo\"\nimport { TextareaDemo } from \"~/registry/default/internal/sink/components/textarea-demo\"\nimport { ToastDemo } from \"~/registry/default/internal/sink/components/toast-demo\"\nimport { ToggleDemo } from \"~/registry/default/internal/sink/components/toggle-demo\"\nimport { ToggleDisabled } from \"~/registry/default/internal/sink/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"~/registry/default/internal/sink/components/toggle-group-demo\"\nimport { ToggleOutline } from \"~/registry/default/internal/sink/components/toggle-outline\"\nimport { ToggleWithText } from \"~/registry/default/internal/sink/components/toggle-with-text\"\nimport { TooltipDemo } from \"~/registry/default/internal/sink/components/tooltip-demo\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport { Separator } from \"~/registry/default/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/default/ui/sidebar\"\n\nexport default function SinkPage() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n                  <ComponentWrapper name=\"Accordion\">\n                     <AccordionDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Alert\">\n                     <AlertDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"AlertDialog\">\n                     <AlertDialogDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"AspectRatio\">\n                     <AspectRatioDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Avatar\">\n                     <AvatarDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Badge\">\n                     <BadgeDemo />\n                     <BadgeDestructive />\n                     <BadgeOutline />\n                     <BadgeSecondary />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Breadcrumb\">\n                     <BreadcrumbDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Button\">\n                     <div className=\"flex items-center gap-2\">\n                        <ButtonDemo />\n                        <ButtonDestructive />\n                        <ButtonGhost />\n                        <ButtonLink />\n                     </div>\n                     <div className=\"flex items-center gap-2\">\n                        <ButtonLoading />\n                        <ButtonOutline />\n                        <ButtonSecondary />\n                     </div>\n                     <div className=\"flex items-center gap-2\">\n                        <ButtonWithIcon />\n                     </div>\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Calendar\">\n                     <CalendarDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Card\">\n                     <CardDemo className=\"w-full\" />\n                  </ComponentWrapper>\n                  <ComponentWrapper\n                     name=\"Carousel\"\n                     className=\"[&_.max-w-xs]:max-w-[70%]\"\n                  >\n                     <CarouselDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Checkbox\">\n                     <CheckboxDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Collapsible\">\n                     <CollapsibleDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Combobox\">\n                     <ComboboxDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper\n                     name=\"Command\"\n                     className=\"[&_[cmdk-root]]:md:min-w-max\"\n                  >\n                     <CommandDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"ContextMenu\">\n                     <ContextMenuDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"DatePicker\">\n                     <DatePickerDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Dialog\">\n                     <DialogDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Drawer\">\n                     <DrawerDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"DropdownMenu\">\n                     <DropdownMenuDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"HoverCard\">\n                     <HoverCardDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Input\">\n                     <InputDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"InputOTP\">\n                     <InputOTPDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Label\">\n                     <LabelDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Menubar\">\n                     <MenubarDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper\n                     name=\"NavigationMenu\"\n                     className=\"col-span-2\"\n                  >\n                     <NavigationMenuDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Pagination\">\n                     <PaginationDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Popover\">\n                     <PopoverDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Progress\">\n                     <ProgressDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"RadioGroup\">\n                     <RadioGroupDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Resizable\" className=\"col-span-2\">\n                     <ResizableHandleDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"ScrollArea\">\n                     <ScrollAreaDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Select\">\n                     <SelectDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Separator\">\n                     <SeparatorDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Sheet\">\n                     <SheetDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Skeleton\">\n                     <SkeletonDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Slider\">\n                     <SliderDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Sonner\">\n                     <SonnerDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Switch\">\n                     <SwitchDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Table\" className=\"col-span-2\">\n                     <TableDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Tabs\">\n                     <TabsDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Textarea\">\n                     <TextareaDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Toast\">\n                     <ToastDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Toggle\">\n                     <div className=\"flex items-center gap-2\">\n                        <ToggleDemo />\n                        <ToggleDisabled />\n                        <ToggleOutline />\n                        <ToggleWithText />\n                     </div>\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"ToggleGroup\">\n                     <ToggleGroupDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Tooltip\">\n                     <TooltipDemo />\n                  </ComponentWrapper>\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/sink/page.tsx"
+    },
+    {
+      "path": "internal/sink/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   GalleryVerticalEnd,\n   Map,\n   PieChart,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"~/registry/default/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"~/registry/default/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"~/registry/default/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"~/registry/default/blocks/sidebar-07/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarRail,\n} from \"~/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: GalleryVerticalEnd,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar collapsible=\"icon\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/component-wrapper.tsx",
+      "content": "import { ny } from \"~/registry/default/lib/utils\"\n\nexport function ComponentWrapper({\n   className,\n   name,\n   children,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & { name: string }) {\n   return (\n      <div\n         className={ny(\"flex w-full flex-col rounded-lg border\", className)}\n         {...props}\n      >\n         <div className=\"border-b px-4 py-3\">\n            <div className=\"text-sm font-medium\">{name}</div>\n         </div>\n         <div className=\"flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full\">\n            {children}\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n               >\n                  <SidebarMenuItem>\n                     <CollapsibleTrigger asChild>\n                        <SidebarMenuButton tooltip={item.title}>\n                           {item.icon && <item.icon />}\n                           <span>{item.title}</span>\n                           <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                     </CollapsibleTrigger>\n                     <CollapsibleContent>\n                        <SidebarMenuSub>\n                           {item.items?.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                 <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                       <span>{subItem.title}</span>\n                                    </a>\n                                 </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                           ))}\n                        </SidebarMenuSub>\n                     </CollapsibleContent>\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   Forward,\n   type LucideIcon,\n   MoreHorizontal,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Forward className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/default/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-4\" />\n                     </div>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {activeTeam.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                           {activeTeam.plan}\n                        </span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/accordion-demo.tsx",
+      "content": "import {\n   Accordion,\n   AccordionContent,\n   AccordionItem,\n   AccordionTrigger,\n} from \"~/registry/default/ui/accordion\"\n\nexport function AccordionDemo() {\n   return (\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n         <AccordionItem value=\"item-1\">\n            <AccordionTrigger>Is it accessible?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It adheres to the WAI-ARIA design pattern.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-2\">\n            <AccordionTrigger>Is it styled?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It comes with default styles that matches the other\n               components&apos; aesthetic.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-3\">\n            <AccordionTrigger>Is it animated?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It's animated by default, but you can disable it if you\n               prefer.\n            </AccordionContent>\n         </AccordionItem>\n      </Accordion>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport { Alert, AlertDescription, AlertTitle } from \"~/registry/default/ui/alert\"\n\nexport function AlertDemo() {\n   return (\n      <Alert>\n         <Terminal className=\"h-4 w-4\" />\n         <AlertTitle>Heads up!</AlertTitle>\n         <AlertDescription>\n            You can add components to your app using the cli.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-dialog-demo.tsx",
+      "content": "import {\n   AlertDialog,\n   AlertDialogAction,\n   AlertDialogCancel,\n   AlertDialogContent,\n   AlertDialogDescription,\n   AlertDialogFooter,\n   AlertDialogHeader,\n   AlertDialogTitle,\n   AlertDialogTrigger,\n} from \"~/registry/default/ui/alert-dialog\"\nimport { Button } from \"~/registry/default/ui/button\"\n\nexport function AlertDialogDemo() {\n   return (\n      <AlertDialog>\n         <AlertDialogTrigger asChild>\n            <Button variant=\"outline\">Show Dialog</Button>\n         </AlertDialogTrigger>\n         <AlertDialogContent>\n            <AlertDialogHeader>\n               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n               <AlertDialogDescription>\n                  This action cannot be undone. This will permanently delete\n                  your account and remove your data from our servers.\n               </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n               <AlertDialogCancel>Cancel</AlertDialogCancel>\n               <AlertDialogAction>Continue</AlertDialogAction>\n            </AlertDialogFooter>\n         </AlertDialogContent>\n      </AlertDialog>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"~/registry/default/ui/aspect-ratio\"\n\nexport function AspectRatioDemo() {\n   return (\n      <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n         <Image\n            src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n            alt=\"Photo by Drew Beamer\"\n            fill\n            className=\"h-full w-full rounded-md object-cover\"\n         />\n      </AspectRatio>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/avatar-demo.tsx",
+      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"~/registry/default/ui/avatar\"\n\nexport function AvatarDemo() {\n   return (\n      <Avatar>\n         <AvatarImage src=\"https://github.com/nyxb.png\" alt=\"@nyxb\" />\n         <AvatarFallback>CN</AvatarFallback>\n      </Avatar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-demo.tsx",
+      "content": "import { Badge } from \"~/registry/default/ui/badge\"\n\nexport function BadgeDemo() {\n   return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/breadcrumb-demo.tsx",
+      "content": "import {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/default/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                     <span className=\"sr-only\">Toggle menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/docs/components\">\n                  Components\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\n\nexport function ButtonDemo() {\n   return <Button>Button</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"~/registry/default/ui/calendar\"\n\nexport function CalendarDemo() {\n   const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n   return (\n      <Calendar\n         mode=\"single\"\n         selected={date}\n         onSelect={setDate}\n         className=\"rounded-md border shadow\"\n      />\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport { Switch } from \"~/registry/default/ui/switch\"\n\nconst notifications = [\n   {\n      title: \"Your call has been confirmed.\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"You have a new message!\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"Your subscription is expiring soon!\",\n      description: \"2 hours ago\",\n   },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport function CardDemo({ className, ...props }: CardProps) {\n   return (\n      <Card className={ny(\"w-[380px]\", className)} {...props}>\n         <CardHeader>\n            <CardTitle>Notifications</CardTitle>\n            <CardDescription>You have 3 unread messages.</CardDescription>\n         </CardHeader>\n         <CardContent className=\"grid gap-4\">\n            <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n               <BellRing />\n               <div className=\"flex-1 space-y-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                     Push Notifications\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                     Send notifications to device.\n                  </p>\n               </div>\n               <Switch />\n            </div>\n            <div>\n               {notifications.map((notification, index) => (\n                  <div\n                     key={index}\n                     className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n                  >\n                     <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n                     <div className=\"space-y-1\">\n                        <p className=\"text-sm font-medium leading-none\">\n                           {notification.title}\n                        </p>\n                        <p className=\"text-sm text-muted-foreground\">\n                           {notification.description}\n                        </p>\n                     </div>\n                  </div>\n               ))}\n            </div>\n         </CardContent>\n         <CardFooter>\n            <Button className=\"w-full\">\n               <Check /> Mark all as read\n            </Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/default/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/default/ui/carousel\"\n\nexport function CarouselDemo() {\n   return (\n      <Carousel className=\"w-full max-w-xs\">\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"~/registry/default/ui/checkbox\"\n\nexport function CheckboxDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms\" />\n         <label\n            htmlFor=\"terms\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/default/ui/collapsible\"\n\nexport function CollapsibleDemo() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   return (\n      <Collapsible\n         open={isOpen}\n         onOpenChange={setIsOpen}\n         className=\"w-[350px] space-y-2\"\n      >\n         <div className=\"flex items-center justify-between space-x-4 px-4\">\n            <h4 className=\"text-sm font-semibold\">\n               @peduarte starred 3 repositories\n            </h4>\n            <CollapsibleTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <ChevronsUpDown className=\"h-4 w-4\" />\n                  <span className=\"sr-only\">Toggle</span>\n               </Button>\n            </CollapsibleTrigger>\n         </div>\n         <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n            @radix-ui/primitives\n         </div>\n         <CollapsibleContent className=\"space-y-2\">\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @radix-ui/colors\n            </div>\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @stitches/react\n            </div>\n         </CollapsibleContent>\n      </Collapsible>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/default/ui/command\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\n\nconst frameworks = [\n   {\n      value: \"next.js\",\n      label: \"Next.js\",\n   },\n   {\n      value: \"sveltekit\",\n      label: \"SvelteKit\",\n   },\n   {\n      value: \"nuxt.js\",\n      label: \"Nuxt.js\",\n   },\n   {\n      value: \"remix\",\n      label: \"Remix\",\n   },\n   {\n      value: \"astro\",\n      label: \"Astro\",\n   },\n]\n\nexport function ComboboxDemo() {\n   const [open, setOpen] = React.useState(false)\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <Popover open={open} onOpenChange={setOpen}>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               role=\"combobox\"\n               aria-expanded={open}\n               className=\"w-[200px] justify-between\"\n            >\n               {value\n                  ? frameworks.find((framework) => framework.value === value)\n                       ?.label\n                  : \"Select framework...\"}\n               <ChevronsUpDown className=\"opacity-50\" />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[200px] p-0\">\n            <Command>\n               <CommandInput\n                  placeholder=\"Search framework...\"\n                  className=\"h-9\"\n               />\n               <CommandList>\n                  <CommandEmpty>No framework found.</CommandEmpty>\n                  <CommandGroup>\n                     {frameworks.map((framework) => (\n                        <CommandItem\n                           key={framework.value}\n                           value={framework.value}\n                           onSelect={(currentValue) => {\n                              setValue(\n                                 currentValue === value ? \"\" : currentValue,\n                              )\n                              setOpen(false)\n                           }}\n                        >\n                           {framework.label}\n                           <Check\n                              className={ny(\n                                 \"ml-auto\",\n                                 value === framework.value\n                                    ? \"opacity-100\"\n                                    : \"opacity-0\",\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/command-demo.tsx",
+      "content": "import {\n   Calculator,\n   Calendar,\n   CreditCard,\n   Settings,\n   Smile,\n   User,\n} from \"lucide-react\"\n\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from \"~/registry/default/ui/command\"\n\nexport function CommandDemo() {\n   return (\n      <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n         <CommandInput placeholder=\"Type a command or search...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Suggestions\">\n               <CommandItem>\n                  <Calendar />\n                  <span>Calendar</span>\n               </CommandItem>\n               <CommandItem>\n                  <Smile />\n                  <span>Search Emoji</span>\n               </CommandItem>\n               <CommandItem disabled>\n                  <Calculator />\n                  <span>Calculator</span>\n               </CommandItem>\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup heading=\"Settings\">\n               <CommandItem>\n                  <User />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <CreditCard />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <Settings />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n               </CommandItem>\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/context-menu-demo.tsx",
+      "content": "import {\n   ContextMenu,\n   ContextMenuCheckboxItem,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuLabel,\n   ContextMenuRadioGroup,\n   ContextMenuRadioItem,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuTrigger,\n} from \"~/registry/default/ui/context-menu\"\n\nexport function ContextMenuDemo() {\n   return (\n      <ContextMenu>\n         <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n            Right click here\n         </ContextMenuTrigger>\n         <ContextMenuContent className=\"w-64\">\n            <ContextMenuItem inset>\n               Back\n               <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset disabled>\n               Forward\n               <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset>\n               Reload\n               <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSub>\n               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n               <ContextMenuSubContent className=\"w-48\">\n                  <ContextMenuItem>\n                     Save Page As...\n                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n                  </ContextMenuItem>\n                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                  <ContextMenuItem>Name Window...</ContextMenuItem>\n                  <ContextMenuSeparator />\n                  <ContextMenuItem>Developer Tools</ContextMenuItem>\n               </ContextMenuSubContent>\n            </ContextMenuSub>\n            <ContextMenuSeparator />\n            <ContextMenuCheckboxItem checked>\n               Show Bookmarks Bar\n               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuSeparator />\n            <ContextMenuRadioGroup value=\"pedro\">\n               <ContextMenuLabel inset>People</ContextMenuLabel>\n               <ContextMenuSeparator />\n               <ContextMenuRadioItem value=\"pedro\">\n                  Pedro Duarte\n               </ContextMenuRadioItem>\n               <ContextMenuRadioItem value=\"colm\">\n                  Colm Tuite\n               </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n         </ContextMenuContent>\n      </ContextMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Calendar } from \"~/registry/default/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\n\nexport function DatePickerDemo() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant={\"outline\"}\n               className={ny(\n                  \"w-[240px] justify-start text-left font-normal\",\n                  !date && \"text-muted-foreground\",\n               )}\n            >\n               <CalendarIcon />\n               {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n               mode=\"single\"\n               selected={date}\n               onSelect={setDate}\n               initialFocus\n            />\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dialog-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"~/registry/default/ui/dialog\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport function DialogDemo() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-[425px]\">\n            <DialogHeader>\n               <DialogTitle>Edit profile</DialogTitle>\n               <DialogDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"@peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <DialogFooter>\n               <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport { Minus, Plus } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"~/registry/default/ui/drawer\"\n\nconst data = [\n   {\n      goal: 400,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 239,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 349,\n   },\n]\n\nexport function DrawerDemo() {\n   const [goal, setGoal] = React.useState(350)\n\n   function onClick(adjustment: number) {\n      setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n   }\n\n   return (\n      <Drawer>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Open Drawer</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mx-auto w-full max-w-sm\">\n               <DrawerHeader>\n                  <DrawerTitle>Move Goal</DrawerTitle>\n                  <DrawerDescription>\n                     Set your daily activity goal.\n                  </DrawerDescription>\n               </DrawerHeader>\n               <div className=\"p-4 pb-0\">\n                  <div className=\"flex items-center justify-center space-x-2\">\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"h-8 w-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(-10)}\n                        disabled={goal <= 200}\n                     >\n                        <Minus />\n                        <span className=\"sr-only\">Decrease</span>\n                     </Button>\n                     <div className=\"flex-1 text-center\">\n                        <div className=\"text-7xl font-bold tracking-tighter\">\n                           {goal}\n                        </div>\n                        <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                           Calories/day\n                        </div>\n                     </div>\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"h-8 w-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(10)}\n                        disabled={goal >= 400}\n                     >\n                        <Plus />\n                        <span className=\"sr-only\">Increase</span>\n                     </Button>\n                  </div>\n                  <div className=\"mt-3 h-[120px]\">\n                     <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data}>\n                           <Bar\n                              dataKey=\"goal\"\n                              style={\n                                 {\n                                    fill: \"hsl(var(--foreground))\",\n                                    opacity: 0.9,\n                                 } as React.CSSProperties\n                              }\n                           />\n                        </BarChart>\n                     </ResponsiveContainer>\n                  </div>\n               </div>\n               <DrawerFooter>\n                  <Button>Submit</Button>\n                  <DrawerClose asChild>\n                     <Button variant=\"outline\">Cancel</Button>\n                  </DrawerClose>\n               </DrawerFooter>\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuPortal,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from \"~/registry/default/ui/dropdown-menu\"\n\nexport function DropdownMenuDemo() {\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  Profile\n                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Billing\n                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Settings\n                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Keyboard shortcuts\n                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>Team</DropdownMenuItem>\n               <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                     <DropdownMenuSubContent>\n                        <DropdownMenuItem>Email</DropdownMenuItem>\n                        <DropdownMenuItem>Message</DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>More...</DropdownMenuItem>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n               </DropdownMenuSub>\n               <DropdownMenuItem>\n                  New Team\n                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               Log out\n               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/default/ui/avatar\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   HoverCard,\n   HoverCardContent,\n   HoverCardTrigger,\n} from \"~/registry/default/ui/hover-card\"\n\nexport function HoverCardDemo() {\n   return (\n      <HoverCard>\n         <HoverCardTrigger asChild>\n            <Button variant=\"link\">@nextjs</Button>\n         </HoverCardTrigger>\n         <HoverCardContent className=\"w-80\">\n            <div className=\"flex justify-between space-x-4\">\n               <Avatar>\n                  <AvatarImage src=\"https://github.com/vercel.png\" />\n                  <AvatarFallback>VC</AvatarFallback>\n               </Avatar>\n               <div className=\"space-y-1\">\n                  <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n                  <p className=\"text-sm\">\n                     The React Framework – created and maintained by @vercel.\n                  </p>\n                  <div className=\"flex items-center pt-2\">\n                     <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n                     <span className=\"text-xs text-muted-foreground\">\n                        Joined December 2021\n                     </span>\n                  </div>\n               </div>\n            </div>\n         </HoverCardContent>\n      </HoverCard>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-demo.tsx",
+      "content": "import { Input } from \"~/registry/default/ui/input\"\n\nexport function InputDemo() {\n   return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-otp-demo.tsx",
+      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"~/registry/default/ui/input-otp\"\n\nexport function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/label-demo.tsx",
+      "content": "import { Checkbox } from \"~/registry/default/ui/checkbox\"\nimport { Label } from \"~/registry/default/ui/label\"\n\nexport function LabelDemo() {\n   return (\n      <div>\n         <div className=\"flex items-center space-x-2\">\n            <Checkbox id=\"terms\" />\n            <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/menubar-demo.tsx",
+      "content": "import {\n   Menubar,\n   MenubarCheckboxItem,\n   MenubarContent,\n   MenubarItem,\n   MenubarMenu,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarSeparator,\n   MenubarShortcut,\n   MenubarSub,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarTrigger,\n} from \"~/registry/default/ui/menubar\"\n\nexport function MenubarDemo() {\n   return (\n      <Menubar>\n         <MenubarMenu>\n            <MenubarTrigger>File</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  New Window <MenubarShortcut>⌘N</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled>New Incognito Window</MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Share</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Email link</MenubarItem>\n                     <MenubarItem>Messages</MenubarItem>\n                     <MenubarItem>Notes</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>\n                  Print... <MenubarShortcut>⌘P</MenubarShortcut>\n               </MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Edit</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Find</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Search the web</MenubarItem>\n                     <MenubarSeparator />\n                     <MenubarItem>Find...</MenubarItem>\n                     <MenubarItem>Find Next</MenubarItem>\n                     <MenubarItem>Find Previous</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>Cut</MenubarItem>\n               <MenubarItem>Copy</MenubarItem>\n               <MenubarItem>Paste</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>View</MenubarTrigger>\n            <MenubarContent>\n               <MenubarCheckboxItem>\n                  Always Show Bookmarks Bar\n               </MenubarCheckboxItem>\n               <MenubarCheckboxItem checked>\n                  Always Show Full URLs\n               </MenubarCheckboxItem>\n               <MenubarSeparator />\n               <MenubarItem inset>\n                  Reload <MenubarShortcut>⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled inset>\n                  Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Hide Sidebar</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Profiles</MenubarTrigger>\n            <MenubarContent>\n               <MenubarRadioGroup value=\"benoit\">\n                  <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n                  <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n                  <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n               </MenubarRadioGroup>\n               <MenubarSeparator />\n               <MenubarItem inset>Edit...</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n      </Menubar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport {\n   NavigationMenu,\n   NavigationMenuContent,\n   NavigationMenuItem,\n   NavigationMenuLink,\n   NavigationMenuList,\n   NavigationMenuTrigger,\n   navigationMenuTriggerStyle,\n} from \"~/registry/default/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n   {\n      title: \"Alert Dialog\",\n      href: \"/docs/primitives/alert-dialog\",\n      description:\n         \"A modal dialog that interrupts the user with important content and expects a response.\",\n   },\n   {\n      title: \"Hover Card\",\n      href: \"/docs/primitives/hover-card\",\n      description:\n         \"For sighted users to preview content available behind a link.\",\n   },\n   {\n      title: \"Progress\",\n      href: \"/docs/primitives/progress\",\n      description:\n         \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n   },\n   {\n      title: \"Scroll-area\",\n      href: \"/docs/primitives/scroll-area\",\n      description: \"Visually or semantically separates content.\",\n   },\n   {\n      title: \"Tabs\",\n      href: \"/docs/primitives/tabs\",\n      description:\n         \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n   },\n   {\n      title: \"Tooltip\",\n      href: \"/docs/primitives/tooltip\",\n      description:\n         \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n   },\n]\n\nexport function NavigationMenuDemo() {\n   return (\n      <NavigationMenu>\n         <NavigationMenuList>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                     <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                           <a\n                              className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                              href=\"/\"\n                           >\n                              <div className=\"mb-2 mt-4 text-lg font-medium\">\n                                 nyxb/ui\n                              </div>\n                              <p className=\"text-sm leading-tight text-muted-foreground\">\n                                 Beautifully designed components built with\n                                 Radix UI and Tailwind CSS.\n                              </p>\n                           </a>\n                        </NavigationMenuLink>\n                     </li>\n                     <ListItem href=\"/docs\" title=\"Introduction\">\n                        Re-usable components built using Radix UI and Tailwind\n                        CSS.\n                     </ListItem>\n                     <ListItem href=\"/docs/installation\" title=\"Installation\">\n                        How to install dependencies and structure your app.\n                     </ListItem>\n                     <ListItem\n                        href=\"/docs/primitives/typography\"\n                        title=\"Typography\"\n                     >\n                        Styles for headings, paragraphs, lists...etc\n                     </ListItem>\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                     {components.map((component) => (\n                        <ListItem\n                           key={component.title}\n                           title={component.title}\n                           href={component.href}\n                        >\n                           {component.description}\n                        </ListItem>\n                     ))}\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <Link href=\"/docs\" legacyBehavior passHref>\n                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n                     Documentation\n                  </NavigationMenuLink>\n               </Link>\n            </NavigationMenuItem>\n         </NavigationMenuList>\n      </NavigationMenu>\n   )\n}\n\nconst ListItem = React.forwardRef<\n   React.ElementRef<\"a\">,\n   React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n   return (\n      <li>\n         <NavigationMenuLink asChild>\n            <a\n               ref={ref}\n               className={ny(\n                  \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n                  className,\n               )}\n               {...props}\n            >\n               <div className=\"text-sm font-medium leading-none\">{title}</div>\n               <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                  {children}\n               </p>\n            </a>\n         </NavigationMenuLink>\n      </li>\n   )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/pagination-demo.tsx",
+      "content": "import {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n} from \"~/registry/default/ui/pagination\"\n\nexport function PaginationDemo() {\n   return (\n      <Pagination>\n         <PaginationContent>\n            <PaginationItem>\n               <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\" isActive>\n                  2\n               </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationNext href=\"#\" />\n            </PaginationItem>\n         </PaginationContent>\n      </Pagination>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/popover-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/default/ui/popover\"\n\nexport function PopoverDemo() {\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button variant=\"outline\">Open popover</Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-80\">\n            <div className=\"grid gap-4\">\n               <div className=\"space-y-2\">\n                  <h4 className=\"font-medium leading-none\">Dimensions</h4>\n                  <p className=\"text-sm text-muted-foreground\">\n                     Set the dimensions for the layer.\n                  </p>\n               </div>\n               <div className=\"grid gap-2\">\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"width\">Width</Label>\n                     <Input\n                        id=\"width\"\n                        defaultValue=\"100%\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxWidth\">Max. width</Label>\n                     <Input\n                        id=\"maxWidth\"\n                        defaultValue=\"300px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"height\">Height</Label>\n                     <Input\n                        id=\"height\"\n                        defaultValue=\"25px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxHeight\">Max. height</Label>\n                     <Input\n                        id=\"maxHeight\"\n                        defaultValue=\"none\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n               </div>\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"~/registry/default/ui/progress\"\n\nexport function ProgressDemo() {\n   const [progress, setProgress] = React.useState(13)\n\n   React.useEffect(() => {\n      const timer = setTimeout(() => setProgress(66), 500)\n      return () => clearTimeout(timer)\n   }, [])\n\n   return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/radio-group-demo.tsx",
+      "content": "import { Label } from \"~/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"~/registry/default/ui/radio-group\"\n\nexport function RadioGroupDemo() {\n   return (\n      <RadioGroup defaultValue=\"comfortable\">\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"default\" id=\"r1\" />\n            <Label htmlFor=\"r1\">Default</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n            <Label htmlFor=\"r2\">Comfortable</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"compact\" id=\"r3\" />\n            <Label htmlFor=\"r3\">Compact</Label>\n         </div>\n      </RadioGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/resizable-handle.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"~/registry/default/ui/resizable\"\n\nexport function ResizableHandleDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Sidebar</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"~/registry/default/ui/scroll-area\"\nimport { Separator } from \"~/registry/default/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n   (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n\nexport function ScrollAreaDemo() {\n   return (\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n         <div className=\"p-4\">\n            <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n            {tags.map((tag) => (\n               <React.Fragment key={tag}>\n                  <div className=\"text-sm\">{tag}</div>\n                  <Separator className=\"my-2\" />\n               </React.Fragment>\n            ))}\n         </div>\n      </ScrollArea>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/default/ui/select\"\n\nexport function SelectDemo() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[180px]\">\n            <SelectValue placeholder=\"Select a fruit\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>Fruits</SelectLabel>\n               <SelectItem value=\"apple\">Apple</SelectItem>\n               <SelectItem value=\"banana\">Banana</SelectItem>\n               <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n               <SelectItem value=\"grapes\">Grapes</SelectItem>\n               <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/separator-demo.tsx",
+      "content": "import { Separator } from \"~/registry/default/ui/separator\"\n\nexport function SeparatorDemo() {\n   return (\n      <div>\n         <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-medium leading-none\">\n               Radix Primitives\n            </h4>\n            <p className=\"text-sm text-muted-foreground\">\n               An open-source UI component library.\n            </p>\n         </div>\n         <Separator className=\"my-4\" />\n         <div className=\"flex h-5 items-center space-x-4 text-sm\">\n            <div>Blog</div>\n            <Separator orientation=\"vertical\" />\n            <div>Docs</div>\n            <Separator orientation=\"vertical\" />\n            <div>Source</div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sheet-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from \"~/registry/default/ui/sheet\"\n\nexport function SheetDemo() {\n   return (\n      <Sheet>\n         <SheetTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </SheetTrigger>\n         <SheetContent>\n            <SheetHeader>\n               <SheetTitle>Edit profile</SheetTitle>\n               <SheetDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"@peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <SheetFooter>\n               <SheetClose asChild>\n                  <Button type=\"submit\">Save changes</Button>\n               </SheetClose>\n            </SheetFooter>\n         </SheetContent>\n      </Sheet>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"~/registry/default/ui/skeleton\"\n\nexport function SkeletonDemo() {\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <Skeleton className=\"h-12 w-12 rounded-full\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/slider-demo.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny(\"w-[60%]\", className)}\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"~/registry/default/ui/button\"\n\nexport function SonnerDemo() {\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() =>\n            toast(\"Event has been created\", {\n               description: \"Sunday, December 03, 2023 at 9:00 AM\",\n               action: {\n                  label: \"Undo\",\n                  onClick: () => console.log(\"Undo\"),\n               },\n            })\n         }\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/switch-demo.tsx",
+      "content": "import { Label } from \"~/registry/default/ui/label\"\nimport { Switch } from \"~/registry/default/ui/switch\"\n\nexport function SwitchDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Switch id=\"airplane-mode\" />\n         <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/table-demo.tsx",
+      "content": "import {\n   Table,\n   TableBody,\n   TableCaption,\n   TableCell,\n   TableFooter,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from \"~/registry/default/ui/table\"\n\nconst invoices = [\n   {\n      invoice: \"INV001\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$250.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV002\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$150.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV003\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$350.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV004\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$450.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV005\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$550.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV006\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$200.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV007\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$300.00\",\n      paymentMethod: \"Credit Card\",\n   },\n]\n\nexport function TableDemo() {\n   return (\n      <Table>\n         <TableCaption>A list of your recent invoices.</TableCaption>\n         <TableHeader>\n            <TableRow>\n               <TableHead className=\"w-[100px]\">Invoice</TableHead>\n               <TableHead>Status</TableHead>\n               <TableHead>Method</TableHead>\n               <TableHead className=\"text-right\">Amount</TableHead>\n            </TableRow>\n         </TableHeader>\n         <TableBody>\n            {invoices.map((invoice) => (\n               <TableRow key={invoice.invoice}>\n                  <TableCell className=\"font-medium\">\n                     {invoice.invoice}\n                  </TableCell>\n                  <TableCell>{invoice.paymentStatus}</TableCell>\n                  <TableCell>{invoice.paymentMethod}</TableCell>\n                  <TableCell className=\"text-right\">\n                     {invoice.totalAmount}\n                  </TableCell>\n               </TableRow>\n            ))}\n         </TableBody>\n         <TableFooter>\n            <TableRow>\n               <TableCell colSpan={3}>Total</TableCell>\n               <TableCell className=\"text-right\">$2,500.00</TableCell>\n            </TableRow>\n         </TableFooter>\n      </Table>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tabs-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\nimport {\n   Tabs,\n   TabsContent,\n   TabsList,\n   TabsTrigger,\n} from \"~/registry/default/ui/tabs\"\n\nexport function TabsDemo() {\n   return (\n      <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n         <TabsList className=\"grid w-full grid-cols-2\">\n            <TabsTrigger value=\"account\">Account</TabsTrigger>\n            <TabsTrigger value=\"password\">Password</TabsTrigger>\n         </TabsList>\n         <TabsContent value=\"account\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Account</CardTitle>\n                  <CardDescription>\n                     Make changes to your account here. Click save when you're\n                     done.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"username\">Username</Label>\n                     <Input id=\"username\" defaultValue=\"@peduarte\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save changes</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n         <TabsContent value=\"password\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Password</CardTitle>\n                  <CardDescription>\n                     Change your password here. After saving, you'll be logged\n                     out.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"current\">Current password</Label>\n                     <Input id=\"current\" type=\"password\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"new\">New password</Label>\n                     <Input id=\"new\" type=\"password\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save password</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n      </Tabs>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/textarea-demo.tsx",
+      "content": "import { Textarea } from \"~/registry/default/ui/textarea\"\n\nexport function TextareaDemo() {\n   return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"~/registry/default/hooks/use-toast\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport { ToastAction } from \"~/registry/default/ui/toast\"\n\nexport function ToastDemo() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Scheduled: Catch up \",\n               description: \"Friday, February 10, 2023 at 5:57 PM\",\n               action: (\n                  <ToastAction altText=\"Goto schedule to undo\">\n                     Undo\n                  </ToastAction>\n               ),\n            })\n         }}\n      >\n         Add to calendar\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/default/ui/toggle\"\n\nexport function ToggleDemo() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <Bold className=\"h-4 w-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"~/registry/default/ui/toggle-group\"\n\nexport function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"h-4 w-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"h-4 w-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <Underline className=\"h-4 w-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tooltip-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/default/ui/tooltip\"\n\nexport function TooltipDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-destructive.tsx",
+      "content": "import { Badge } from \"~/registry/default/ui/badge\"\n\nexport function BadgeDestructive() {\n   return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-outline.tsx",
+      "content": "import { Badge } from \"~/registry/default/ui/badge\"\n\nexport function BadgeOutline() {\n   return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-secondary.tsx",
+      "content": "import { Badge } from \"~/registry/default/ui/badge\"\n\nexport function BadgeSecondary() {\n   return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-destructive.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\n\nexport function ButtonDestructive() {\n   return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-ghost.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\n\nexport function ButtonGhost() {\n   return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-link.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\n\nexport function ButtonLink() {\n   return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\n\nexport function ButtonLoading() {\n   return (\n      <Button disabled>\n         <Loader2 className=\"animate-spin\" />\n         Please wait\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-outline.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\n\nexport function ButtonOutline() {\n   return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-secondary.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\n\nexport function ButtonSecondary() {\n   return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-with-icon.tsx",
+      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\n\nexport function ButtonWithIcon() {\n   return (\n      <Button>\n         <MailOpen /> Login with Email\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/default/ui/toggle\"\n\nexport function ToggleDisabled() {\n   return (\n      <Toggle aria-label=\"Toggle italic\" disabled>\n         <Underline className=\"h-4 w-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/default/ui/toggle\"\n\nexport function ToggleOutline() {\n   return (\n      <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n         <Italic />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/default/ui/toggle\"\n\nexport function ToggleWithText() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <Italic />\n         Italic\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/skeleton-card.json b/apps/web/public/r/styles/default/skeleton-card.json
index 23f3066f..0e52b219 100644
--- a/apps/web/public/r/styles/default/skeleton-card.json
+++ b/apps/web/public/r/styles/default/skeleton-card.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "skeleton-card",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/skeleton-card.tsx",
-      "content": "import { Skeleton } from '~/registry/default/ui/skeleton'\n\nexport default function SkeletonCard() {\n   return (\n      <div className=\"flex flex-col space-y-3\">\n         <Skeleton className=\"h-[125px] w-[250px] rounded-xl\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
+      "path": "examples/skeleton-card.tsx",
+      "content": "import { Skeleton } from \"~/registry/default/ui/skeleton\"\n\nexport default function SkeletonCard() {\n   return (\n      <div className=\"flex flex-col space-y-3\">\n         <Skeleton className=\"h-[125px] w-[250px] rounded-xl\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/skeleton-demo.json b/apps/web/public/r/styles/default/skeleton-demo.json
index 1df9ad23..acefffa3 100644
--- a/apps/web/public/r/styles/default/skeleton-demo.json
+++ b/apps/web/public/r/styles/default/skeleton-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "skeleton-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/skeleton-demo.tsx",
-      "content": "import { Skeleton } from '~/registry/default/ui/skeleton'\n\nexport default function SkeletonDemo() {\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <Skeleton className=\"size-12 rounded-full\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
+      "path": "examples/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"~/registry/default/ui/skeleton\"\n\nexport default function SkeletonDemo() {\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <Skeleton className=\"size-12 rounded-full\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/skeleton.json b/apps/web/public/r/styles/default/skeleton.json
index cf4a53be..e439ea5b 100644
--- a/apps/web/public/r/styles/default/skeleton.json
+++ b/apps/web/public/r/styles/default/skeleton.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "skeleton",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/skeleton.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\nfunction Skeleton({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny('bg-muted animate-pulse rounded-md', className)}\n         {...props}\n      />\n   )\n}\n\nexport { Skeleton }\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/lib/utils\"\n\nfunction Skeleton({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\"bg-muted animate-pulse rounded-md\", className)}\n         {...props}\n      />\n   )\n}\n\nexport { Skeleton }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/slider-demo.json b/apps/web/public/r/styles/default/slider-demo.json
index 494540a8..db3bc03d 100644
--- a/apps/web/public/r/styles/default/slider-demo.json
+++ b/apps/web/public/r/styles/default/slider-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-demo.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/default/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDemo({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny('w-3/5', className)}\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-demo.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDemo({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/slider-disabled.json b/apps/web/public/r/styles/default/slider-disabled.json
index cd1cd5fa..a970cc1c 100644
--- a/apps/web/public/r/styles/default/slider-disabled.json
+++ b/apps/web/public/r/styles/default/slider-disabled.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-disabled.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/default/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDisabled({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny('w-3/5', className)}\n         disabled\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-disabled.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDisabled({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         disabled\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/slider-format-label-side.json b/apps/web/public/r/styles/default/slider-format-label-side.json
index 2b343111..273f9b3d 100644
--- a/apps/web/public/r/styles/default/slider-format-label-side.json
+++ b/apps/web/public/r/styles/default/slider-format-label-side.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-format-label-side",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-format-label-side.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/default/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderFormatLabelSide({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny('w-3/5', className)}\n         formatLabel={value => `${value} points`}\n         formatLabelSide=\"left\"\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-format-label-side.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderFormatLabelSide({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         formatLabel={(value) => `${value} points`}\n         formatLabelSide=\"left\"\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/slider-format-label.json b/apps/web/public/r/styles/default/slider-format-label.json
index a630a0ae..fe8390a3 100644
--- a/apps/web/public/r/styles/default/slider-format-label.json
+++ b/apps/web/public/r/styles/default/slider-format-label.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-format-label",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-format-label.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/default/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderFormatLabel({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny('w-3/5', className)}\n         formatLabel={value => `${value} points`}\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-format-label.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderFormatLabel({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         formatLabel={(value) => `${value} points`}\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/slider-inverted.json b/apps/web/public/r/styles/default/slider-inverted.json
index 084f1f92..a1238c3d 100644
--- a/apps/web/public/r/styles/default/slider-inverted.json
+++ b/apps/web/public/r/styles/default/slider-inverted.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-inverted",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-inverted.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/default/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderInverted({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny('w-3/5', className)}\n         inverted\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-inverted.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderInverted({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         inverted\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/slider-range.json b/apps/web/public/r/styles/default/slider-range.json
index 5520e277..4d5a3913 100644
--- a/apps/web/public/r/styles/default/slider-range.json
+++ b/apps/web/public/r/styles/default/slider-range.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-range",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-range.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/default/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderRange({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[25, 75]}\n         max={100}\n         step={1}\n         className={ny('w-3/5', className)}\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-range.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderRange({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[25, 75]}\n         max={100}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/slider-tick-marks-full.json b/apps/web/public/r/styles/default/slider-tick-marks-full.json
index 6c2cc3b0..d42d97d3 100644
--- a/apps/web/public/r/styles/default/slider-tick-marks-full.json
+++ b/apps/web/public/r/styles/default/slider-tick-marks-full.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-tick-marks-full",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-tick-marks-full.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/default/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderTickMarksFull({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny('w-3/5', className)}\n         showSteps=\"full\"\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-tick-marks-full.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderTickMarksFull({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         showSteps=\"full\"\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/slider-tick-marks-half.json b/apps/web/public/r/styles/default/slider-tick-marks-half.json
index 606858e8..e8ef3d22 100644
--- a/apps/web/public/r/styles/default/slider-tick-marks-half.json
+++ b/apps/web/public/r/styles/default/slider-tick-marks-half.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-tick-marks-half",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-tick-marks-half.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/default/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderTickMarksHalf({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny('w-3/5', className)}\n         showSteps=\"half\"\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-tick-marks-half.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderTickMarksHalf({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         showSteps=\"half\"\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/slider-vertical.json b/apps/web/public/r/styles/default/slider-vertical.json
index 6bbb93ab..5756524e 100644
--- a/apps/web/public/r/styles/default/slider-vertical.json
+++ b/apps/web/public/r/styles/default/slider-vertical.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-vertical",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-vertical.tsx",
-      "content": "import { Slider } from '~/registry/default/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderVertical({ className, ...props }: SliderProps) {\n   return (\n      <>\n         {/* Vertical slider needs its parent container to define the height */}\n         <div className=\"h-64\">\n            <Slider\n               defaultValue={[50]}\n               max={100}\n               step={1}\n               orientation=\"vertical\"\n               className={className}\n               {...props}\n            />\n         </div>\n      </>\n   )\n}\n",
+      "path": "examples/slider-vertical.tsx",
+      "content": "import { Slider } from \"~/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderVertical({ className, ...props }: SliderProps) {\n   return (\n      <>\n         {/* Vertical slider needs its parent container to define the height */}\n         <div className=\"h-64\">\n            <Slider\n               defaultValue={[50]}\n               max={100}\n               step={1}\n               orientation=\"vertical\"\n               className={className}\n               {...props}\n            />\n         </div>\n      </>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/slider.json b/apps/web/public/r/styles/default/slider.json
index 14e17d88..97648dac 100644
--- a/apps/web/public/r/styles/default/slider.json
+++ b/apps/web/public/r/styles/default/slider.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-slider"
   ],
   "files": [
     {
       "path": "ui/slider.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { ny } from '~/lib/utils'\n\ninterface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n   showSteps?: 'none' | 'half' | 'full'\n   formatLabel?: (value: number) => string\n   formatLabelSide?: string\n}\n\nconst Slider = React.forwardRef<\n   React.ElementRef<typeof SliderPrimitive.Root>,\n   SliderProps\n>(({ className, showSteps = 'none', formatLabel, formatLabelSide = 'top', ...props }, ref) => {\n   const { min = 0, max = 100, step = 1, orientation = 'horizontal', value, defaultValue, onValueChange } = props\n   const [hoveredThumbIndex, setHoveredThumbIndex] = React.useState<boolean>(false)\n   const numberOfSteps = Math.floor((max - min) / step)\n   const stepLines = Array.from({ length: numberOfSteps }, (_, index) => index * step + min)\n\n   const initialValue = Array.isArray(value) ? value : (Array.isArray(defaultValue) ? defaultValue : [min, max])\n   const [localValues, setLocalValues] = React.useState<number[]>(initialValue)\n\n   React.useEffect(() => {\n      if (!isEqual(value, localValues))\n         setLocalValues(Array.isArray(value) ? value : (Array.isArray(defaultValue) ? defaultValue : [min, max]))\n   }, [min, max, value])\n\n   const handleValueChange = (newValues: number[]) => {\n      setLocalValues(newValues)\n      if (onValueChange)\n         onValueChange(newValues)\n   }\n\n   function isEqual(array1: number[] | undefined, array2: number[] | undefined) {\n      array1 = array1 ?? []\n      array2 = array2 ?? []\n\n      if (array1.length !== array2.length)\n         return false\n\n      for (let i = 0; i < array1.length; i++) {\n         if (array1[i] !== array2[i])\n            return false\n      }\n\n      return true\n   }\n\n   return (\n      <SliderPrimitive.Root\n         ref={ref}\n         className={ny(\n            'relative flex cursor-pointer touch-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n            orientation === 'horizontal' ? 'w-full items-center' : 'h-full justify-center',\n            className,\n         )}\n         min={min}\n         max={max}\n         step={step}\n         value={localValues}\n         onValueChange={value => handleValueChange(value)}\n         {...props}\n         onFocus={() => setHoveredThumbIndex(true)}\n         onBlur={() => setHoveredThumbIndex(false)}\n      >\n         <SliderPrimitive.Track className={ny(\n            'bg-primary/20 relative grow overflow-hidden rounded-full',\n            orientation === 'horizontal' ? 'h-1.5 w-full' : 'h-full w-1.5',\n         )}\n         >\n            <SliderPrimitive.Range className={ny(\n               'bg-primary absolute',\n               orientation === 'horizontal' ? 'h-full' : 'w-full',\n            )}\n            />\n            {showSteps !== undefined && showSteps !== 'none' && stepLines.map((value, index) => {\n               if (value === min || value === max)\n                  return null\n\n               const positionPercentage = ((value - min) / (max - min)) * 100\n               const adjustedPosition = 50 + (positionPercentage - 50) * 0.96\n               return (\n                  <div\n                     key={index}\n                     className={ny(\n                        { 'w-0.5 h-2': orientation !== 'vertical', 'w-2 h-0.5': orientation === 'vertical' },\n                        'bg-muted-foreground absolute',\n                        {\n                           'left-1': orientation === 'vertical' && showSteps === 'half',\n                           'top-1': orientation !== 'vertical' && showSteps === 'half',\n                           'left-0': orientation === 'vertical' && showSteps === 'full',\n                           'top-0': orientation !== 'vertical' && showSteps === 'full',\n                           '-translate-x-1/2': orientation !== 'vertical',\n                           '-translate-y-1/2': orientation === 'vertical',\n                        },\n                     )}\n                     style={{\n                        [orientation === 'vertical' ? 'bottom' : 'left']: `${adjustedPosition}%`,\n                     }}\n                  />\n               )\n            })}\n\n         </SliderPrimitive.Track>\n         {localValues.map((numberStep, index) => (\n            <SliderPrimitive.Thumb\n               key={index}\n               className={ny(\n                  'border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1',\n               )}\n            >\n               {hoveredThumbIndex && formatLabel && (\n                  <div\n                     className={ny(\n                        { 'bottom-8 left-1/2 -translate-x-1/2': formatLabelSide === 'top' },\n                        { 'top-8 left-1/2 -translate-x-1/2': formatLabelSide === 'bottom' },\n                        { 'right-8 -translate-y-1/4': formatLabelSide === 'left' },\n                        { 'left-8 -translate-y-1/4': formatLabelSide === 'right' },\n                        'bg-popover text-popover-foreground absolute z-30 w-max items-center justify-items-center rounded-md border px-2 py-1 text-center shadow-sm',\n                     )}\n                  >\n                     {formatLabel(numberStep)}\n                  </div>\n               )}\n            </SliderPrimitive.Thumb>\n         ))}\n      </SliderPrimitive.Root>\n   )\n})\n\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ninterface SliderProps\n   extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n   showSteps?: \"none\" | \"half\" | \"full\"\n   formatLabel?: (value: number) => string\n   formatLabelSide?: string\n}\n\nconst Slider = React.forwardRef<\n   React.ElementRef<typeof SliderPrimitive.Root>,\n   SliderProps\n>(\n   (\n      {\n         className,\n         showSteps = \"none\",\n         formatLabel,\n         formatLabelSide = \"top\",\n         ...props\n      },\n      ref,\n   ) => {\n      const {\n         min = 0,\n         max = 100,\n         step = 1,\n         orientation = \"horizontal\",\n         value,\n         defaultValue,\n         onValueChange,\n      } = props\n      const [hoveredThumbIndex, setHoveredThumbIndex] =\n         React.useState<boolean>(false)\n      const numberOfSteps = Math.floor((max - min) / step)\n      const stepLines = Array.from(\n         { length: numberOfSteps },\n         (_, index) => index * step + min,\n      )\n\n      const initialValue = Array.isArray(value)\n         ? value\n         : Array.isArray(defaultValue)\n           ? defaultValue\n           : [min, max]\n      const [localValues, setLocalValues] =\n         React.useState<number[]>(initialValue)\n\n      React.useEffect(() => {\n         if (!isEqual(value, localValues))\n            setLocalValues(\n               Array.isArray(value)\n                  ? value\n                  : Array.isArray(defaultValue)\n                    ? defaultValue\n                    : [min, max],\n            )\n      }, [min, max, value])\n\n      const handleValueChange = (newValues: number[]) => {\n         setLocalValues(newValues)\n         if (onValueChange) onValueChange(newValues)\n      }\n\n      function isEqual(\n         array1: number[] | undefined,\n         array2: number[] | undefined,\n      ) {\n         array1 = array1 ?? []\n         array2 = array2 ?? []\n\n         if (array1.length !== array2.length) return false\n\n         for (let i = 0; i < array1.length; i++) {\n            if (array1[i] !== array2[i]) return false\n         }\n\n         return true\n      }\n\n      return (\n         <SliderPrimitive.Root\n            ref={ref}\n            className={ny(\n               \"relative flex cursor-pointer touch-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n               orientation === \"horizontal\"\n                  ? \"w-full items-center\"\n                  : \"h-full justify-center\",\n               className,\n            )}\n            min={min}\n            max={max}\n            step={step}\n            value={localValues}\n            onValueChange={(value) => handleValueChange(value)}\n            {...props}\n            onFocus={() => setHoveredThumbIndex(true)}\n            onBlur={() => setHoveredThumbIndex(false)}\n         >\n            <SliderPrimitive.Track\n               className={ny(\n                  \"bg-primary/20 relative grow overflow-hidden rounded-full\",\n                  orientation === \"horizontal\"\n                     ? \"h-1.5 w-full\"\n                     : \"h-full w-1.5\",\n               )}\n            >\n               <SliderPrimitive.Range\n                  className={ny(\n                     \"bg-primary absolute\",\n                     orientation === \"horizontal\" ? \"h-full\" : \"w-full\",\n                  )}\n               />\n               {showSteps !== undefined &&\n                  showSteps !== \"none\" &&\n                  stepLines.map((value, index) => {\n                     if (value === min || value === max) return null\n\n                     const positionPercentage =\n                        ((value - min) / (max - min)) * 100\n                     const adjustedPosition =\n                        50 + (positionPercentage - 50) * 0.96\n                     return (\n                        <div\n                           key={index}\n                           className={ny(\n                              {\n                                 \"w-0.5 h-2\": orientation !== \"vertical\",\n                                 \"w-2 h-0.5\": orientation === \"vertical\",\n                              },\n                              \"bg-muted-foreground absolute\",\n                              {\n                                 \"left-1\":\n                                    orientation === \"vertical\" &&\n                                    showSteps === \"half\",\n                                 \"top-1\":\n                                    orientation !== \"vertical\" &&\n                                    showSteps === \"half\",\n                                 \"left-0\":\n                                    orientation === \"vertical\" &&\n                                    showSteps === \"full\",\n                                 \"top-0\":\n                                    orientation !== \"vertical\" &&\n                                    showSteps === \"full\",\n                                 \"-translate-x-1/2\": orientation !== \"vertical\",\n                                 \"-translate-y-1/2\": orientation === \"vertical\",\n                              },\n                           )}\n                           style={{\n                              [orientation === \"vertical\" ? \"bottom\" : \"left\"]:\n                                 `${adjustedPosition}%`,\n                           }}\n                        />\n                     )\n                  })}\n            </SliderPrimitive.Track>\n            {localValues.map((numberStep, index) => (\n               <SliderPrimitive.Thumb\n                  key={index}\n                  className={ny(\n                     \"border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1\",\n                  )}\n               >\n                  {hoveredThumbIndex && formatLabel && (\n                     <div\n                        className={ny(\n                           {\n                              \"bottom-8 left-1/2 -translate-x-1/2\":\n                                 formatLabelSide === \"top\",\n                           },\n                           {\n                              \"top-8 left-1/2 -translate-x-1/2\":\n                                 formatLabelSide === \"bottom\",\n                           },\n                           {\n                              \"right-8 -translate-y-1/4\":\n                                 formatLabelSide === \"left\",\n                           },\n                           {\n                              \"left-8 -translate-y-1/4\":\n                                 formatLabelSide === \"right\",\n                           },\n                           \"bg-popover text-popover-foreground absolute z-30 w-max items-center justify-items-center rounded-md border px-2 py-1 text-center shadow-sm\",\n                        )}\n                     >\n                        {formatLabel(numberStep)}\n                     </div>\n                  )}\n               </SliderPrimitive.Thumb>\n            ))}\n         </SliderPrimitive.Root>\n      )\n   },\n)\n\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/sonner-demo.json b/apps/web/public/r/styles/default/sonner-demo.json
index eb42ff10..198e5279 100644
--- a/apps/web/public/r/styles/default/sonner-demo.json
+++ b/apps/web/public/r/styles/default/sonner-demo.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sonner-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "sonner"
   ],
   "files": [
     {
-      "path": "example/sonner-demo.tsx",
-      "content": "import { toast } from 'sonner'\n\nimport { Button } from '~/registry/default/ui/button'\n\nexport default function SonnerDemo() {\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() =>\n            toast('Event has been created', {\n               description: 'Sunday, December 03, 2023 at 9:00 AM',\n               action: {\n                  label: 'Undo',\n\n                  // eslint-disable-next-line no-console\n                  onClick: () => console.log('Undo'),\n               },\n            })}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "path": "examples/sonner-demo.tsx",
+      "content": "import { toast } from \"sonner\"\n\nimport { Button } from \"~/registry/default/ui/button\"\n\nexport default function SonnerDemo() {\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() =>\n            toast(\"Event has been created\", {\n               description: \"Sunday, December 03, 2023 at 9:00 AM\",\n               action: {\n                  label: \"Undo\",\n\n                  // eslint-disable-next-line no-console\n                  onClick: () => console.log(\"Undo\"),\n               },\n            })\n         }\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/sonner.json b/apps/web/public/r/styles/default/sonner.json
index dd0dd78e..e2a20b59 100644
--- a/apps/web/public/r/styles/default/sonner.json
+++ b/apps/web/public/r/styles/default/sonner.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sonner",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "sonner",
     "next-themes"
@@ -8,8 +10,8 @@
   "files": [
     {
       "path": "ui/sonner.tsx",
-      "content": "'use client'\n\nimport { useTheme } from 'next-themes'\nimport { Toaster as Sonner } from 'sonner'\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>\n\nfunction Toaster({ ...props }: ToasterProps) {\n   const { theme = 'system' } = useTheme()\n\n   return (\n      <Sonner\n         theme={theme as ToasterProps['theme']}\n         className=\"toaster group\"\n         toastOptions={{\n            classNames: {\n               toast:\n            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n               description: 'group-[.toast]:text-muted-foreground',\n               actionButton:\n            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n               cancelButton:\n            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n            },\n         }}\n         {...props}\n      />\n   )\n}\n\nexport { Toaster }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner } from \"sonner\"\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>\n\nfunction Toaster({ ...props }: ToasterProps) {\n   const { theme = \"system\" } = useTheme()\n\n   return (\n      <Sonner\n         theme={theme as ToasterProps[\"theme\"]}\n         className=\"toaster group\"\n         toastOptions={{\n            classNames: {\n               toast: \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n               description: \"group-[.toast]:text-muted-foreground\",\n               actionButton:\n                  \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n               cancelButton:\n                  \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n            },\n         }}\n         {...props}\n      />\n   )\n}\n\nexport { Toaster }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/sparkles-text-demo.json b/apps/web/public/r/styles/default/sparkles-text-demo.json
index 72a783bf..7fd7586f 100644
--- a/apps/web/public/r/styles/default/sparkles-text-demo.json
+++ b/apps/web/public/r/styles/default/sparkles-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sparkles-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/sparkles-text-demo.tsx",
-      "content": "import SparklesText from '~/registry/default/ui/sparkles-text'\n\nexport default async function SparklesTextDemo() {\n   return <SparklesText text=\"Nyxb UI\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/sparkles-text-demo.tsx",
+      "content": "import SparklesText from \"~/registry/default/ui/sparkles-text\"\n\nexport default async function SparklesTextDemo() {\n   return <SparklesText text=\"Nyxb UI\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/sparkles-text.json b/apps/web/public/r/styles/default/sparkles-text.json
index cc3ea82e..06a43e8b 100644
--- a/apps/web/public/r/styles/default/sparkles-text.json
+++ b/apps/web/public/r/styles/default/sparkles-text.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sparkles-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/sparkles-text.tsx",
-      "content": "'use client'\n\nimport { motion } from 'framer-motion'\nimport type { CSSProperties, ReactElement } from 'react'\nimport { useEffect, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface Sparkle {\n   id: string\n   x: string\n   y: string\n   color: string\n   delay: number\n   scale: number\n   lifespan: number\n}\n\ninterface SparklesTextProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the text\n    */\n   as?: ReactElement\n\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the text\n    */\n   className?: string\n\n   /**\n    * @required\n    * @type string\n    * @description\n    * The text to be displayed\n    */\n   text: string\n\n   /**\n    * @default 10\n    * @type number\n    * @description\n    * The count of sparkles\n    */\n   sparklesCount?: number\n\n   /**\n    * @default \"{first: '#A07CFE', second: '#FE8FB5'}\"\n    * @type string\n    * @description\n    * The colors of the sparkles\n    */\n   colors?: {\n      first: string\n      second: string\n   }\n}\n\nconst SparklesText: React.FC<SparklesTextProps> = ({\n   text,\n   colors = { first: '#A07CFE', second: '#FE8FB5' },\n   className,\n   sparklesCount = 10,\n   ...props\n}) => {\n   const [sparkles, setSparkles] = useState<Sparkle[]>([])\n\n   useEffect(() => {\n      const generateStar = (): Sparkle => {\n         const starX = `${Math.random() * 100}%`\n         const starY = `${Math.random() * 100}%`\n         const color = Math.random() > 0.5 ? colors.first : colors.second\n         const delay = Math.random() * 2\n         const scale = Math.random() * 1 + 0.3\n         const lifespan = Math.random() * 10 + 5\n         const id = `${starX}-${starY}-${Date.now()}`\n         return { id, x: starX, y: starY, color, delay, scale, lifespan }\n      }\n\n      const initializeStars = () => {\n         const newSparkles = Array.from({ length: sparklesCount }, generateStar)\n         setSparkles(newSparkles)\n      }\n\n      const updateStars = () => {\n         setSparkles(currentSparkles =>\n            currentSparkles.map((star) => {\n               if (star.lifespan <= 0)\n                  return generateStar()\n               else return { ...star, lifespan: star.lifespan - 0.1 }\n            }),\n         )\n      }\n\n      initializeStars()\n      const interval = setInterval(updateStars, 100)\n\n      return () => clearInterval(interval)\n   }, [colors.first, colors.second])\n\n   return (\n      <div\n         className={ny('text-6xl font-bold', className)}\n         {...props}\n         style={\n            {\n               '--sparkles-first-color': `${colors.first}`,\n               '--sparkles-second-color': `${colors.second}`,\n            } as CSSProperties\n         }\n      >\n         <span className=\"relative inline-block\">\n            {sparkles.map(sparkle => (\n               <Sparkle key={sparkle.id} {...sparkle} />\n            ))}\n            <strong className=\"bg-gradient-to-r from-[var(--sparkles-first-color)] to-[var(--sparkles-second-color)] bg-clip-text text-transparent\">\n               {text}\n            </strong>\n         </span>\n      </div>\n   )\n}\n\nconst Sparkle: React.FC<Sparkle> = ({ id, x, y, color, delay, scale }) => {\n   return (\n      <motion.svg\n         key={id}\n         className=\"pointer-events-none absolute z-20\"\n         initial={{ opacity: 0, left: x, top: y }}\n         animate={{\n            opacity: [0, 1, 0],\n            scale: [0, scale, 0],\n            rotate: [75, 120, 150],\n         }}\n         transition={{ duration: 0.8, repeat: Infinity, delay }}\n         width=\"21\"\n         height=\"21\"\n         viewBox=\"0 0 21 21\"\n      >\n         <path\n            d=\"M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z\"\n            fill={color}\n         />\n      </motion.svg>\n   )\n}\n\nexport default SparklesText\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport type { CSSProperties, ReactElement } from \"react\"\nimport { useEffect, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface Sparkle {\n   id: string\n   x: string\n   y: string\n   color: string\n   delay: number\n   scale: number\n   lifespan: number\n}\n\ninterface SparklesTextProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the text\n    */\n   as?: ReactElement\n\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the text\n    */\n   className?: string\n\n   /**\n    * @required\n    * @type string\n    * @description\n    * The text to be displayed\n    */\n   text: string\n\n   /**\n    * @default 10\n    * @type number\n    * @description\n    * The count of sparkles\n    */\n   sparklesCount?: number\n\n   /**\n    * @default \"{first: '#A07CFE', second: '#FE8FB5'}\"\n    * @type string\n    * @description\n    * The colors of the sparkles\n    */\n   colors?: {\n      first: string\n      second: string\n   }\n}\n\nconst SparklesText: React.FC<SparklesTextProps> = ({\n   text,\n   colors = { first: \"#A07CFE\", second: \"#FE8FB5\" },\n   className,\n   sparklesCount = 10,\n   ...props\n}) => {\n   const [sparkles, setSparkles] = useState<Sparkle[]>([])\n\n   useEffect(() => {\n      const generateStar = (): Sparkle => {\n         const starX = `${Math.random() * 100}%`\n         const starY = `${Math.random() * 100}%`\n         const color = Math.random() > 0.5 ? colors.first : colors.second\n         const delay = Math.random() * 2\n         const scale = Math.random() * 1 + 0.3\n         const lifespan = Math.random() * 10 + 5\n         const id = `${starX}-${starY}-${Date.now()}`\n         return { id, x: starX, y: starY, color, delay, scale, lifespan }\n      }\n\n      const initializeStars = () => {\n         const newSparkles = Array.from({ length: sparklesCount }, generateStar)\n         setSparkles(newSparkles)\n      }\n\n      const updateStars = () => {\n         setSparkles((currentSparkles) =>\n            currentSparkles.map((star) => {\n               if (star.lifespan <= 0) return generateStar()\n               else return { ...star, lifespan: star.lifespan - 0.1 }\n            }),\n         )\n      }\n\n      initializeStars()\n      const interval = setInterval(updateStars, 100)\n\n      return () => clearInterval(interval)\n   }, [colors.first, colors.second])\n\n   return (\n      <div\n         className={ny(\"text-6xl font-bold\", className)}\n         {...props}\n         style={\n            {\n               \"--sparkles-first-color\": `${colors.first}`,\n               \"--sparkles-second-color\": `${colors.second}`,\n            } as CSSProperties\n         }\n      >\n         <span className=\"relative inline-block\">\n            {sparkles.map((sparkle) => (\n               <Sparkle key={sparkle.id} {...sparkle} />\n            ))}\n            <strong className=\"bg-gradient-to-r from-[var(--sparkles-first-color)] to-[var(--sparkles-second-color)] bg-clip-text text-transparent\">\n               {text}\n            </strong>\n         </span>\n      </div>\n   )\n}\n\nconst Sparkle: React.FC<Sparkle> = ({ id, x, y, color, delay, scale }) => {\n   return (\n      <motion.svg\n         key={id}\n         className=\"pointer-events-none absolute z-20\"\n         initial={{ opacity: 0, left: x, top: y }}\n         animate={{\n            opacity: [0, 1, 0],\n            scale: [0, scale, 0],\n            rotate: [75, 120, 150],\n         }}\n         transition={{ duration: 0.8, repeat: Number.POSITIVE_INFINITY, delay }}\n         width=\"21\"\n         height=\"21\"\n         viewBox=\"0 0 21 21\"\n      >\n         <path\n            d=\"M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z\"\n            fill={color}\n         />\n      </motion.svg>\n   )\n}\n\nexport default SparklesText\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/star-rating-colored.json b/apps/web/public/r/styles/default/star-rating-colored.json
index 83b423e3..cf1ed2ee 100644
--- a/apps/web/public/r/styles/default/star-rating-colored.json
+++ b/apps/web/public/r/styles/default/star-rating-colored.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "star-rating-colored",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/star-rating-colored.tsx",
-      "content": "import * as React from 'react'\nimport { StarRating } from '~/registry/default/ui/star-rating'\n\nexport default function StarRatingColored() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} iconProps={{ className: 'fill-yellow-500 stroke-yellow-500' }} />\n}\n",
-      "type": "registry:component",
+      "path": "examples/star-rating-colored.tsx",
+      "content": "import * as React from \"react\"\nimport { StarRating } from \"~/registry/default/ui/star-rating\"\n\nexport default function StarRatingColored() {\n   const [value, setValue] = React.useState<number>(3)\n   return (\n      <StarRating\n         value={value}\n         setValue={setValue}\n         iconProps={{ className: \"fill-yellow-500 stroke-yellow-500\" }}\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/star-rating-demo.json b/apps/web/public/r/styles/default/star-rating-demo.json
index d2f9fb7e..62500e31 100644
--- a/apps/web/public/r/styles/default/star-rating-demo.json
+++ b/apps/web/public/r/styles/default/star-rating-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "star-rating-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/star-rating-demo.tsx",
-      "content": "import * as React from 'react'\nimport { StarRating } from '~/registry/default/ui/star-rating'\n\nexport default function StarRatingDemo() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} />\n}\n",
-      "type": "registry:component",
+      "path": "examples/star-rating-demo.tsx",
+      "content": "import * as React from \"react\"\nimport { StarRating } from \"~/registry/default/ui/star-rating\"\n\nexport default function StarRatingDemo() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/star-rating-icon.json b/apps/web/public/r/styles/default/star-rating-icon.json
index d2597f12..38386c2d 100644
--- a/apps/web/public/r/styles/default/star-rating-icon.json
+++ b/apps/web/public/r/styles/default/star-rating-icon.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "star-rating-icon",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/star-rating-icon.tsx",
-      "content": "import * as React from 'react'\nimport { Heart } from 'lucide-react'\nimport { StarRating } from '~/registry/default/ui/star-rating'\n\nexport default function StarRatingIcon() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} icon={Heart} />\n}\n",
-      "type": "registry:component",
+      "path": "examples/star-rating-icon.tsx",
+      "content": "import { Heart } from \"lucide-react\"\nimport * as React from \"react\"\nimport { StarRating } from \"~/registry/default/ui/star-rating\"\n\nexport default function StarRatingIcon() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} icon={Heart} />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/star-rating.json b/apps/web/public/r/styles/default/star-rating.json
index 444ec049..b0098c78 100644
--- a/apps/web/public/r/styles/default/star-rating.json
+++ b/apps/web/public/r/styles/default/star-rating.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "star-rating",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "lucide-react"
   ],
   "files": [
     {
       "path": "ui/star-rating.tsx",
-      "content": "import type { Dispatch, SetStateAction } from 'react'\nimport React from 'react'\nimport type { LucideIcon, LucideProps } from 'lucide-react'\nimport { StarIcon } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\ninterface StarWrapperProps {\n   value?: number\n   setValue?: Dispatch<SetStateAction<number>>\n   numStars?: number\n   icon?: LucideIcon\n   disabled?: boolean\n   wrapperProps?: React.HTMLAttributes<HTMLDivElement>\n   iconProps?: LucideProps\n   showcase?: boolean\n}\n\nfunction StarRating({\n   numStars = 5,\n   icon,\n   setValue,\n   value,\n   disabled,\n   showcase,\n   iconProps = {},\n   wrapperProps = {},\n}: StarWrapperProps) {\n   const { className: wrapperClassName, ...restWrapperProps } = wrapperProps\n   const { className: iconClassName, ...restIconProps } = iconProps\n   const IconComponent = icon\n\n   return (\n      <div className={ny('flex items-center gap-1', wrapperClassName)} {...restWrapperProps}>\n         {Array.from({ length: numStars }, (_, i) => {\n            const isRated = i < value!\n            const styledIconProps: LucideProps = {\n               onMouseEnter: () => !showcase && !disabled && setValue!(i + 1),\n               className: ny('fill-primary stroke-primary size-6', {\n                  'opacity-50 pointer-events-none': disabled,\n                  'transition-transform duration-300 hover:scale-110': !disabled && !showcase,\n                  '!fill-muted !stroke-muted': !isRated,\n               }, iconClassName),\n               ...restIconProps,\n            }\n            return (\n               <div key={i}>\n                  {IconComponent\n                     ? (\n                           <IconComponent {...styledIconProps} />\n                        )\n                     : (\n                           <StarIcon {...styledIconProps} />\n                        )}\n               </div>\n            )\n         })}\n      </div>\n   )\n}\n\nexport { StarRating }\n",
-      "type": "registry:component",
+      "content": "import type { LucideIcon, LucideProps } from \"lucide-react\"\nimport { StarIcon } from \"lucide-react\"\nimport type { Dispatch, SetStateAction } from \"react\"\nimport type React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ninterface StarWrapperProps {\n   value?: number\n   setValue?: Dispatch<SetStateAction<number>>\n   numStars?: number\n   icon?: LucideIcon\n   disabled?: boolean\n   wrapperProps?: React.HTMLAttributes<HTMLDivElement>\n   iconProps?: LucideProps\n   showcase?: boolean\n}\n\nfunction StarRating({\n   numStars = 5,\n   icon,\n   setValue,\n   value,\n   disabled,\n   showcase,\n   iconProps = {},\n   wrapperProps = {},\n}: StarWrapperProps) {\n   const { className: wrapperClassName, ...restWrapperProps } = wrapperProps\n   const { className: iconClassName, ...restIconProps } = iconProps\n   const IconComponent = icon\n\n   return (\n      <div\n         className={ny(\"flex items-center gap-1\", wrapperClassName)}\n         {...restWrapperProps}\n      >\n         {Array.from({ length: numStars }, (_, i) => {\n            const isRated = i < value!\n            const styledIconProps: LucideProps = {\n               onMouseEnter: () => !showcase && !disabled && setValue!(i + 1),\n               className: ny(\n                  \"fill-primary stroke-primary size-6\",\n                  {\n                     \"opacity-50 pointer-events-none\": disabled,\n                     \"transition-transform duration-300 hover:scale-110\":\n                        !disabled && !showcase,\n                     \"!fill-muted !stroke-muted\": !isRated,\n                  },\n                  iconClassName,\n               ),\n               ...restIconProps,\n            }\n            return (\n               <div key={i}>\n                  {IconComponent ? (\n                     <IconComponent {...styledIconProps} />\n                  ) : (\n                     <StarIcon {...styledIconProps} />\n                  )}\n               </div>\n            )\n         })}\n      </div>\n   )\n}\n\nexport { StarRating }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-clickable-steps.json b/apps/web/public/r/styles/default/stepper-clickable-steps.json
index 0426b0ec..6cb6601e 100644
--- a/apps/web/public/r/styles/default/stepper-clickable-steps.json
+++ b/apps/web/public/r/styles/default/stepper-clickable-steps.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-clickable-steps",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-clickable-steps.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/default/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/default/ui/stepper'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            initialStep={0}\n            steps={steps}\n            onClickStep={(step, setStep) => {\n               toast({\n                  title: 'Step clicked',\n                  description:\n              'This event is executed globally for all steps. If you want to have an event for a specific step, use the `onClickStep` prop of the independent step.',\n               })\n               setStep(step)\n            }}\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-clickable-steps.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport type { StepItem } from \"~/registry/default/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            initialStep={0}\n            steps={steps}\n            onClickStep={(step, setStep) => {\n               toast({\n                  title: \"Step clicked\",\n                  description:\n                     \"This event is executed globally for all steps. If you want to have an event for a specific step, use the `onClickStep` prop of the independent step.\",\n               })\n               setStep(step)\n            }}\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-custom-icons.json b/apps/web/public/r/styles/default/stepper-custom-icons.json
index 8c0279ac..ff0bfe0e 100644
--- a/apps/web/public/r/styles/default/stepper-custom-icons.json
+++ b/apps/web/public/r/styles/default/stepper-custom-icons.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-custom-icons",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-custom-icons.tsx",
-      "content": "import { Building, Star, User } from 'lucide-react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/default/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/default/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1', icon: User },\n   { label: 'Step 2', icon: Building },\n   { label: 'Step 3', icon: Star },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-custom-icons.tsx",
+      "content": "import { Building, Star, User } from \"lucide-react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport type { StepItem } from \"~/registry/default/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\", icon: User },\n   { label: \"Step 2\", icon: Building },\n   { label: \"Step 3\", icon: Star },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-custom-styles.json b/apps/web/public/r/styles/default/stepper-custom-styles.json
index dbe3c689..1ff2fca7 100644
--- a/apps/web/public/r/styles/default/stepper-custom-styles.json
+++ b/apps/web/public/r/styles/default/stepper-custom-styles.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-custom-styles",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-custom-styles.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/default/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/default/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            initialStep={0}\n            steps={steps}\n            styles={{\n               'step-button-container': ny(\n                  'rounded-none text-purple-700',\n                  'data-[current=true]:border-purple-500 data-[current=true]:bg-purple-50',\n                  'data-[active=true]:border-purple-500 data-[active=true]:bg-purple-500',\n               ),\n               'horizontal-step':\n            'data-[completed=true]:[&:not(:last-child)]:after:bg-purple-500',\n            }}\n            variables={{\n               '--step-icon-size': '60px',\n               '--step-gap': '20px',\n            }}\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-custom-styles.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport type { StepItem } from \"~/registry/default/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            initialStep={0}\n            steps={steps}\n            styles={{\n               \"step-button-container\": ny(\n                  \"rounded-none text-purple-700\",\n                  \"data-[current=true]:border-purple-500 data-[current=true]:bg-purple-50\",\n                  \"data-[active=true]:border-purple-500 data-[active=true]:bg-purple-500\",\n               ),\n               \"horizontal-step\":\n                  \"data-[completed=true]:[&:not(:last-child)]:after:bg-purple-500\",\n            }}\n            variables={{\n               \"--step-icon-size\": \"60px\",\n               \"--step-gap\": \"20px\",\n            }}\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-demo.json b/apps/web/public/r/styles/default/stepper-demo.json
index fe72dc50..30b9df7b 100644
--- a/apps/web/public/r/styles/default/stepper-demo.json
+++ b/apps/web/public/r/styles/default/stepper-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-demo.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/default/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/default/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport type { StepItem } from \"~/registry/default/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-description.json b/apps/web/public/r/styles/default/stepper-description.json
index 685bc73f..c5446494 100644
--- a/apps/web/public/r/styles/default/stepper-description.json
+++ b/apps/web/public/r/styles/default/stepper-description.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-description",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-description.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/default/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/default/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1', description: 'Description 1' },\n   { label: 'Step 2', description: 'Description 2' },\n   { label: 'Step 3', description: 'Description 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-description.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport type { StepItem } from \"~/registry/default/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\", description: \"Description 1\" },\n   { label: \"Step 2\", description: \"Description 2\" },\n   { label: \"Step 3\", description: \"Description 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-footer-inside.json b/apps/web/public/r/styles/default/stepper-footer-inside.json
index 1e1eda59..c9147117 100644
--- a/apps/web/public/r/styles/default/stepper-footer-inside.json
+++ b/apps/web/public/r/styles/default/stepper-footer-inside.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-footer-inside",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-footer-inside.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/default/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/default/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper orientation=\"vertical\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                     <StepButtons />\n                  </Step>\n               )\n            })}\n            <FinalStep />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction StepButtons() {\n   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep }\n    = useStepper()\n   return (\n      <div className=\"mb-4 flex w-full gap-2\">\n         <Button\n            disabled={isDisabledStep}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"secondary\"\n         >\n            Prev\n         </Button>\n         <Button size=\"sm\" onClick={nextStep}>\n            {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n         </Button>\n      </div>\n   )\n}\n\nfunction FinalStep() {\n   const { hasCompletedAllSteps, resetSteps } = useStepper()\n\n   if (!hasCompletedAllSteps)\n      return null\n\n   return (\n      <>\n         <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n            <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n         </div>\n         <div className=\"flex w-full justify-end gap-2\">\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-footer-inside.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport type { StepItem } from \"~/registry/default/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper orientation=\"vertical\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                     <StepButtons />\n                  </Step>\n               )\n            })}\n            <FinalStep />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction StepButtons() {\n   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =\n      useStepper()\n   return (\n      <div className=\"mb-4 flex w-full gap-2\">\n         <Button\n            disabled={isDisabledStep}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"secondary\"\n         >\n            Prev\n         </Button>\n         <Button size=\"sm\" onClick={nextStep}>\n            {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n         </Button>\n      </div>\n   )\n}\n\nfunction FinalStep() {\n   const { hasCompletedAllSteps, resetSteps } = useStepper()\n\n   if (!hasCompletedAllSteps) return null\n\n   return (\n      <>\n         <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n            <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n         </div>\n         <div className=\"flex w-full justify-end gap-2\">\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-form.json b/apps/web/public/r/styles/default/stepper-form.json
index c4148de4..ca734cf6 100644
--- a/apps/web/public/r/styles/default/stepper-form.json
+++ b/apps/web/public/r/styles/default/stepper-form.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport * as z from 'zod'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport { Input } from '~/registry/default/ui/input'\nimport { Step, Stepper, useStepper } from '~/registry/default/ui/stepper'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst steps = [\n   { label: 'Step 1', description: 'Description 1' },\n   { label: 'Step 2', description: 'Description 2' },\n]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper variant=\"circle-alt\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               if (index === 0) {\n                  return (\n                     <Step key={stepProps.label} {...stepProps}>\n                        <FirstStepForm />\n                     </Step>\n                  )\n               }\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <SecondStepForm />\n                  </Step>\n               )\n            })}\n            <MyStepperFooter />\n         </Stepper>\n      </div>\n   )\n}\n\nconst FirstFormSchema = z.object({\n   username: z.string().min(2, {\n      message: 'Username must be at least 2 characters.',\n   }),\n})\n\nfunction FirstStepForm() {\n   const { nextStep } = useStepper()\n\n   const form = useForm<z.infer<typeof FirstFormSchema>>({\n      resolver: zodResolver(FirstFormSchema),\n      defaultValues: {\n         username: '',\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FirstFormSchema>) {\n      nextStep()\n      toast({\n         title: 'First step submitted!',\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"username\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Username</FormLabel>\n                     <FormControl>\n                        <Input placeholder=\"nyxb\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your public display name.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <StepperFormActions />\n         </form>\n      </Form>\n   )\n}\n\nconst SecondFormSchema = z.object({\n   password: z.string().min(8, {\n      message: 'Password must be at least 8 characters.',\n   }),\n})\n\nfunction SecondStepForm() {\n   const { nextStep } = useStepper()\n\n   const form = useForm<z.infer<typeof SecondFormSchema>>({\n      resolver: zodResolver(SecondFormSchema),\n      defaultValues: {\n         password: '',\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof SecondFormSchema>) {\n      nextStep()\n      toast({\n         title: 'Second step submitted!',\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"password\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Password</FormLabel>\n                     <FormControl>\n                        <Input type=\"password\" {...field} />\n                     </FormControl>\n                     <FormDescription>This is your private password.</FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <StepperFormActions />\n         </form>\n      </Form>\n   )\n}\n\nfunction StepperFormActions() {\n   const {\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n\n   return (\n      <div className=\"flex w-full justify-end gap-2\">\n         {hasCompletedAllSteps\n            ? (\n                  <Button size=\"sm\" onClick={resetSteps}>\n                     Reset\n                  </Button>\n               )\n            : (\n                  <>\n                     <Button\n                        disabled={isDisabledStep}\n                        onClick={prevStep}\n                        size=\"sm\"\n                        variant=\"secondary\"\n                     >\n                        Prev\n                     </Button>\n                     <Button size=\"sm\">\n                        {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                     </Button>\n                  </>\n               )}\n      </div>\n   )\n}\n\nfunction MyStepperFooter() {\n   const { activeStep, resetSteps, steps } = useStepper()\n\n   if (activeStep !== steps.length)\n      return null\n\n   return (\n      <div className=\"flex items-center justify-end gap-2\">\n         <Button onClick={resetSteps}>Reset Stepper with Form</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport * as z from \"zod\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst steps = [\n   { label: \"Step 1\", description: \"Description 1\" },\n   { label: \"Step 2\", description: \"Description 2\" },\n]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper variant=\"circle-alt\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               if (index === 0) {\n                  return (\n                     <Step key={stepProps.label} {...stepProps}>\n                        <FirstStepForm />\n                     </Step>\n                  )\n               }\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <SecondStepForm />\n                  </Step>\n               )\n            })}\n            <MyStepperFooter />\n         </Stepper>\n      </div>\n   )\n}\n\nconst FirstFormSchema = z.object({\n   username: z.string().min(2, {\n      message: \"Username must be at least 2 characters.\",\n   }),\n})\n\nfunction FirstStepForm() {\n   const { nextStep } = useStepper()\n\n   const form = useForm<z.infer<typeof FirstFormSchema>>({\n      resolver: zodResolver(FirstFormSchema),\n      defaultValues: {\n         username: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FirstFormSchema>) {\n      nextStep()\n      toast({\n         title: \"First step submitted!\",\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"username\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Username</FormLabel>\n                     <FormControl>\n                        <Input placeholder=\"nyxb\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your public display name.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <StepperFormActions />\n         </form>\n      </Form>\n   )\n}\n\nconst SecondFormSchema = z.object({\n   password: z.string().min(8, {\n      message: \"Password must be at least 8 characters.\",\n   }),\n})\n\nfunction SecondStepForm() {\n   const { nextStep } = useStepper()\n\n   const form = useForm<z.infer<typeof SecondFormSchema>>({\n      resolver: zodResolver(SecondFormSchema),\n      defaultValues: {\n         password: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof SecondFormSchema>) {\n      nextStep()\n      toast({\n         title: \"Second step submitted!\",\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"password\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Password</FormLabel>\n                     <FormControl>\n                        <Input type=\"password\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your private password.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <StepperFormActions />\n         </form>\n      </Form>\n   )\n}\n\nfunction StepperFormActions() {\n   const {\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n\n   return (\n      <div className=\"flex w-full justify-end gap-2\">\n         {hasCompletedAllSteps ? (\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         ) : (\n            <>\n               <Button\n                  disabled={isDisabledStep}\n                  onClick={prevStep}\n                  size=\"sm\"\n                  variant=\"secondary\"\n               >\n                  Prev\n               </Button>\n               <Button size=\"sm\">\n                  {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n               </Button>\n            </>\n         )}\n      </div>\n   )\n}\n\nfunction MyStepperFooter() {\n   const { activeStep, resetSteps, steps } = useStepper()\n\n   if (activeStep !== steps.length) return null\n\n   return (\n      <div className=\"flex items-center justify-end gap-2\">\n         <Button onClick={resetSteps}>Reset Stepper with Form</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-optional-steps.json b/apps/web/public/r/styles/default/stepper-optional-steps.json
index cb957510..4d961a0b 100644
--- a/apps/web/public/r/styles/default/stepper-optional-steps.json
+++ b/apps/web/public/r/styles/default/stepper-optional-steps.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-optional-steps",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-optional-steps.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/default/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/default/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2', optional: true },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-optional-steps.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport type { StepItem } from \"~/registry/default/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\", optional: true },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-orientation.json b/apps/web/public/r/styles/default/stepper-orientation.json
index c13d23a5..a48bb510 100644
--- a/apps/web/public/r/styles/default/stepper-orientation.json
+++ b/apps/web/public/r/styles/default/stepper-orientation.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-orientation",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-orientation.tsx",
-      "content": "import * as React from 'react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport { Label } from '~/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'\nimport type {\n   StepItem,\n   StepperProps,\n} from '~/registry/default/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/default/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperOrientation() {\n   const [orientation, setOrientation]\n    = React.useState<StepperProps['orientation']>('vertical')\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={orientation}\n            onValueChange={value =>\n               setOrientation(value as StepperProps['orientation'])}\n         >\n            <Label\n               htmlFor=\"horizontal\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"horizontal\"\n                  id=\"horizontal\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">Horizontal</h2>\n            </Label>\n            <Label\n               htmlFor=\"vertical\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"vertical\" id=\"vertical\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">Vertical</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper orientation={orientation} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Label } from \"~/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"~/registry/default/ui/radio-group\"\nimport type { StepItem, StepperProps } from \"~/registry/default/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperOrientation() {\n   const [orientation, setOrientation] =\n      React.useState<StepperProps[\"orientation\"]>(\"vertical\")\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={orientation}\n            onValueChange={(value) =>\n               setOrientation(value as StepperProps[\"orientation\"])\n            }\n         >\n            <Label\n               htmlFor=\"horizontal\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"horizontal\"\n                  id=\"horizontal\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">Horizontal</h2>\n            </Label>\n            <Label\n               htmlFor=\"vertical\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"vertical\"\n                  id=\"vertical\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">Vertical</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper orientation={orientation} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-scroll-tracking.json b/apps/web/public/r/styles/default/stepper-scroll-tracking.json
index fb44dbe6..05919587 100644
--- a/apps/web/public/r/styles/default/stepper-scroll-tracking.json
+++ b/apps/web/public/r/styles/default/stepper-scroll-tracking.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-scroll-tracking",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-scroll-tracking.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/default/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/default/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n   { label: 'Step 4' },\n   { label: 'Step 5' },\n   { label: 'Step 6' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            orientation=\"vertical\"\n            initialStep={0}\n            steps={steps}\n            scrollTracking\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                     <StepButtons />\n                  </Step>\n               )\n            })}\n            <FinalStep />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction StepButtons() {\n   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep }\n    = useStepper()\n   return (\n      <div className=\"mb-4 flex w-full gap-2\">\n         <Button\n            disabled={isDisabledStep}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"secondary\"\n         >\n            Prev\n         </Button>\n         <Button size=\"sm\" onClick={nextStep}>\n            {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n         </Button>\n      </div>\n   )\n}\n\nfunction FinalStep() {\n   const { hasCompletedAllSteps, resetSteps } = useStepper()\n\n   if (!hasCompletedAllSteps)\n      return null\n\n   return (\n      <>\n         <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n            <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n         </div>\n         <div className=\"flex w-full justify-end gap-2\">\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-scroll-tracking.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport type { StepItem } from \"~/registry/default/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n   { label: \"Step 4\" },\n   { label: \"Step 5\" },\n   { label: \"Step 6\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            orientation=\"vertical\"\n            initialStep={0}\n            steps={steps}\n            scrollTracking\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                     <StepButtons />\n                  </Step>\n               )\n            })}\n            <FinalStep />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction StepButtons() {\n   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =\n      useStepper()\n   return (\n      <div className=\"mb-4 flex w-full gap-2\">\n         <Button\n            disabled={isDisabledStep}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"secondary\"\n         >\n            Prev\n         </Button>\n         <Button size=\"sm\" onClick={nextStep}>\n            {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n         </Button>\n      </div>\n   )\n}\n\nfunction FinalStep() {\n   const { hasCompletedAllSteps, resetSteps } = useStepper()\n\n   if (!hasCompletedAllSteps) return null\n\n   return (\n      <>\n         <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n            <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n         </div>\n         <div className=\"flex w-full justify-end gap-2\">\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-sizes.json b/apps/web/public/r/styles/default/stepper-sizes.json
index bdf39877..3656f5bc 100644
--- a/apps/web/public/r/styles/default/stepper-sizes.json
+++ b/apps/web/public/r/styles/default/stepper-sizes.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-sizes",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-sizes.tsx",
-      "content": "import * as React from 'react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport { Label } from '~/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'\nimport type {\n   StepItem,\n   StepperProps,\n} from '~/registry/default/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/default/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [size, setSize] = React.useState<StepperProps['size']>('md')\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={size}\n            onValueChange={value => setSize(value as StepperProps['size'])}\n         >\n            <Label\n               htmlFor=\"sm\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"sm\" id=\"sm\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">sm</h2>\n            </Label>\n            <Label\n               htmlFor=\"md\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"md\" id=\"md\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">md</h2>\n            </Label>\n            <Label\n               htmlFor=\"lg\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"lg\" id=\"lg\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">lg</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper size={size} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-sizes.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Label } from \"~/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"~/registry/default/ui/radio-group\"\nimport type { StepItem, StepperProps } from \"~/registry/default/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [size, setSize] = React.useState<StepperProps[\"size\"]>(\"md\")\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={size}\n            onValueChange={(value) => setSize(value as StepperProps[\"size\"])}\n         >\n            <Label\n               htmlFor=\"sm\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"sm\" id=\"sm\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">sm</h2>\n            </Label>\n            <Label\n               htmlFor=\"md\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"md\" id=\"md\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">md</h2>\n            </Label>\n            <Label\n               htmlFor=\"lg\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"lg\" id=\"lg\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">lg</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper size={size} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-state.json b/apps/web/public/r/styles/default/stepper-state.json
index 7385c9f2..fb4ee5fe 100644
--- a/apps/web/public/r/styles/default/stepper-state.json
+++ b/apps/web/public/r/styles/default/stepper-state.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-state",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-state.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/default/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/default/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper state=\"error\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isError,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button disabled={isError} size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-state.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport type { StepItem } from \"~/registry/default/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper state=\"error\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isError,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button disabled={isError} size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper-variants.json b/apps/web/public/r/styles/default/stepper-variants.json
index 9ed74cf1..d52a14de 100644
--- a/apps/web/public/r/styles/default/stepper-variants.json
+++ b/apps/web/public/r/styles/default/stepper-variants.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-variants",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-variants.tsx",
-      "content": "import * as React from 'react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport { Label } from '~/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'\nimport type {\n   StepItem,\n   StepperProps,\n} from '~/registry/default/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/default/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [variant, setVariant]\n    = React.useState<StepperProps['variant']>('circle')\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={variant}\n            onValueChange={value => setVariant(value as StepperProps['variant'])}\n         >\n            <Label\n               htmlFor=\"circle\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"circle\" id=\"circle\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">circle</h2>\n            </Label>\n            <Label\n               htmlFor=\"circle-alt\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"circle-alt\"\n                  id=\"circle-alt\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">circle-alt</h2>\n            </Label>\n            <Label\n               htmlFor=\"line\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"line\" id=\"line\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">line</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper variant={variant} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-variants.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport { Label } from \"~/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"~/registry/default/ui/radio-group\"\nimport type { StepItem, StepperProps } from \"~/registry/default/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/default/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [variant, setVariant] =\n      React.useState<StepperProps[\"variant\"]>(\"circle\")\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={variant}\n            onValueChange={(value) =>\n               setVariant(value as StepperProps[\"variant\"])\n            }\n         >\n            <Label\n               htmlFor=\"circle\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"circle\" id=\"circle\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">circle</h2>\n            </Label>\n            <Label\n               htmlFor=\"circle-alt\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"circle-alt\"\n                  id=\"circle-alt\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">circle-alt</h2>\n            </Label>\n            <Label\n               htmlFor=\"line\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"line\" id=\"line\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">line</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper variant={variant} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/stepper.json b/apps/web/public/r/styles/default/stepper.json
index 8d95d553..a2b843e8 100644
--- a/apps/web/public/r/styles/default/stepper.json
+++ b/apps/web/public/r/styles/default/stepper.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "lucide-react"
   ],
@@ -10,8 +12,8 @@
   "files": [
     {
       "path": "ui/stepper.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { CheckIcon, Loader2, X } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Collapsible,\n   CollapsibleContent,\n} from '~/registry/default/ui/collapsible'\n\n// <---------- CONTEXT ---------->\n\ninterface StepperContextValue extends StepperProps {\n   clickable?: boolean\n   isError?: boolean\n   isLoading?: boolean\n   isVertical?: boolean\n   stepCount?: number\n   expandVerticalSteps?: boolean\n   activeStep: number\n   initialStep: number\n}\n\nconst StepperContext = React.createContext<\n   StepperContextValue & {\n      nextStep: () => void\n      prevStep: () => void\n      resetSteps: () => void\n      setStep: (step: number) => void\n   }\n>({\n            steps: [],\n            activeStep: 0,\n            initialStep: 0,\n            nextStep: () => {},\n            prevStep: () => {},\n            resetSteps: () => {},\n            setStep: () => {},\n         })\n\ninterface StepperContextProviderProps {\n   value: Omit<StepperContextValue, 'activeStep'>\n   children: React.ReactNode\n}\n\nfunction StepperProvider({ value, children }: StepperContextProviderProps) {\n   const isError = value.state === 'error'\n   const isLoading = value.state === 'loading'\n\n   const [activeStep, setActiveStep] = React.useState(value.initialStep)\n\n   const nextStep = () => {\n      setActiveStep(prev => prev + 1)\n   }\n\n   const prevStep = () => {\n      setActiveStep(prev => prev - 1)\n   }\n\n   const resetSteps = () => {\n      setActiveStep(value.initialStep)\n   }\n\n   const setStep = (step: number) => {\n      setActiveStep(step)\n   }\n\n   return (\n      <StepperContext.Provider\n         value={{\n            ...value,\n            isError,\n            isLoading,\n            activeStep,\n            nextStep,\n            prevStep,\n            resetSteps,\n            setStep,\n         }}\n      >\n         {children}\n      </StepperContext.Provider>\n   )\n}\n\n// <---------- HOOKS ---------->\n\nfunction usePrevious<T>(value: T): T | undefined {\n   const ref = React.useRef<T>()\n\n   React.useEffect(() => {\n      ref.current = value\n   }, [value])\n\n   return ref.current\n}\n\nfunction useStepper() {\n   const context = React.useContext(StepperContext)\n\n   if (context === undefined)\n      throw new Error('useStepper must be used within a StepperProvider')\n\n   const { children, className, ...rest } = context\n\n   const isLastStep = context.activeStep === context.steps.length - 1\n   const hasCompletedAllSteps = context.activeStep === context.steps.length\n\n   const previousActiveStep = usePrevious(context.activeStep)\n\n   const currentStep = context.steps[context.activeStep]\n   const isOptionalStep = !!currentStep?.optional\n\n   const isDisabledStep = context.activeStep === 0\n\n   return {\n      ...rest,\n      isLastStep,\n      hasCompletedAllSteps,\n      isOptionalStep,\n      isDisabledStep,\n      currentStep,\n      previousActiveStep,\n   }\n}\n\nfunction useMediaQuery(query: string) {\n   const [value, setValue] = React.useState(false)\n\n   React.useEffect(() => {\n      function onChange(event: MediaQueryListEvent) {\n         setValue(event.matches)\n      }\n\n      const result = matchMedia(query)\n      result.addEventListener('change', onChange)\n      setValue(result.matches)\n\n      return () => result.removeEventListener('change', onChange)\n   }, [query])\n\n   return value\n}\n\n// <---------- STEPS ---------->\n\ninterface StepItem {\n   id?: string\n   label?: string\n   description?: string\n   icon?: IconType\n   optional?: boolean\n}\n\ninterface StepOptions {\n   orientation?: 'vertical' | 'horizontal'\n   state?: 'loading' | 'error'\n   responsive?: boolean\n   checkIcon?: IconType\n   errorIcon?: IconType\n   onClickStep?: (step: number, setStep: (step: number) => void) => void\n   mobileBreakpoint?: string\n   variant?: 'circle' | 'circle-alt' | 'line'\n   expandVerticalSteps?: boolean\n   size?: 'sm' | 'md' | 'lg'\n   styles?: {\n      /** Styles for the main container */\n      'main-container'?: string\n      /** Styles for the horizontal step */\n      'horizontal-step'?: string\n      /** Styles for the horizontal step container (button and labels) */\n      'horizontal-step-container'?: string\n      /** Styles for the vertical step */\n      'vertical-step'?: string\n      /** Styles for the vertical step container (button and labels) */\n      'vertical-step-container'?: string\n      /** Styles for the vertical step content */\n      'vertical-step-content'?: string\n      /** Styles for the step button container */\n      'step-button-container'?: string\n      /** Styles for the label and description container */\n      'step-label-container'?: string\n      /** Styles for the step label */\n      'step-label'?: string\n      /** Styles for the step description */\n      'step-description'?: string\n   }\n   variables?: {\n      '--step-icon-size'?: string\n      '--step-gap'?: string\n   }\n   scrollTracking?: boolean\n}\ninterface StepperProps extends StepOptions {\n   children?: React.ReactNode\n   className?: string\n   initialStep: number\n   steps: StepItem[]\n}\n\nconst VARIABLE_SIZES = {\n   sm: '36px',\n   md: '40px',\n   lg: '44px',\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n   (props, ref: React.Ref<HTMLDivElement>) => {\n      const {\n         className,\n         children,\n         orientation: orientationProp,\n         state,\n         responsive,\n         checkIcon,\n         errorIcon,\n         onClickStep,\n         mobileBreakpoint,\n         expandVerticalSteps = false,\n         initialStep = 0,\n         size,\n         steps,\n         variant,\n         styles,\n         variables,\n         scrollTracking = false,\n         ...rest\n      } = props\n\n      const childArr = React.Children.toArray(children)\n\n      const items = [] as React.ReactElement[]\n\n      const footer = childArr.map((child, _index) => {\n         if (!React.isValidElement(child))\n            throw new Error('Stepper children must be valid React elements.')\n\n         if (child.type === Step) {\n            items.push(child)\n            return null\n         }\n\n         return child\n      })\n\n      const stepCount = items.length\n\n      const isMobile = useMediaQuery(\n      `(max-width: ${mobileBreakpoint || '768px'})`,\n      )\n\n      const clickable = !!onClickStep\n\n      const orientation = isMobile && responsive ? 'vertical' : orientationProp\n\n      const isVertical = orientation === 'vertical'\n\n      return (\n         <StepperProvider\n            value={{\n               initialStep,\n               orientation,\n               state,\n               size,\n               responsive,\n               checkIcon,\n               errorIcon,\n               onClickStep,\n               clickable,\n               stepCount,\n               isVertical,\n               variant: variant || 'circle',\n               expandVerticalSteps,\n               steps,\n               scrollTracking,\n               styles,\n            }}\n         >\n            <div\n               ref={ref}\n               className={ny(\n                  'stepper__main-container',\n                  'flex w-full flex-wrap',\n                  stepCount === 1 ? 'justify-end' : 'justify-between',\n                  orientation === 'vertical' ? 'flex-col' : 'flex-row',\n                  variant === 'line' && orientation === 'horizontal' && 'gap-4',\n                  className,\n                  styles?.['main-container'],\n               )}\n               style={\n                  {\n                     '--step-icon-size':\n                variables?.['--step-icon-size']\n                || `${VARIABLE_SIZES[size || 'md']}`,\n                     '--step-gap': variables?.['--step-gap'] || '8px',\n                  } as React.CSSProperties\n               }\n               {...rest}\n            >\n               <VerticalContent>{items}</VerticalContent>\n            </div>\n            {orientation === 'horizontal' && (\n               <HorizontalContent>{items}</HorizontalContent>\n            )}\n            {footer}\n         </StepperProvider>\n      )\n   },\n)\n\nStepper.defaultProps = {\n   size: 'md',\n   orientation: 'horizontal',\n   responsive: true,\n}\n\nfunction VerticalContent({ children }: { children: React.ReactNode }) {\n   const { activeStep } = useStepper()\n\n   const childArr = React.Children.toArray(children)\n   const stepCount = childArr.length\n\n   return (\n      <>\n         {React.Children.map(children, (child, i) => {\n            const isCompletedStep\n          = (React.isValidElement(child)\n          && (child.props as any).isCompletedStep)\n          ?? i < activeStep\n            const isLastStep = i === stepCount - 1\n            const isCurrentStep = i === activeStep\n\n            const stepProps = {\n               index: i,\n               isCompletedStep,\n               isCurrentStep,\n               isLastStep,\n            }\n\n            if (React.isValidElement(child))\n               return React.cloneElement(child, stepProps)\n\n            return null\n         })}\n      </>\n   )\n}\n\nfunction HorizontalContent({ children }: { children: React.ReactNode }) {\n   const { activeStep } = useStepper()\n   const childArr = React.Children.toArray(children)\n\n   if (activeStep > childArr.length)\n      return null\n\n   return (\n      <>\n         {React.Children.map(childArr[activeStep], (node) => {\n            if (!React.isValidElement(node))\n               return null\n\n            return React.Children.map(node.props.children, childNode => childNode)\n         })}\n      </>\n   )\n}\n\n// <---------- STEP ---------->\n\ninterface StepProps extends React.HTMLAttributes<HTMLLIElement> {\n   label?: string | React.ReactNode\n   description?: string\n   icon?: IconType\n   state?: 'loading' | 'error'\n   checkIcon?: IconType\n   errorIcon?: IconType\n   isCompletedStep?: boolean\n   isKeepError?: boolean\n   onClickStep?: (step: number, setStep: (step: number) => void) => void\n}\n\ninterface StepSharedProps extends StepProps {\n   isLastStep?: boolean\n   isCurrentStep?: boolean\n   index?: number\n   hasVisited: boolean | undefined\n   isError?: boolean\n   isLoading?: boolean\n}\n\n// Props which shouldn't be passed to to the Step component from the user\ninterface StepInternalConfig {\n   index: number\n   isCompletedStep?: boolean\n   isCurrentStep?: boolean\n   isLastStep?: boolean\n}\n\ninterface FullStepProps extends StepProps, StepInternalConfig {}\n\nconst Step = React.forwardRef<HTMLLIElement, StepProps>(\n   (props, ref: React.Ref<any>) => {\n      const {\n         children,\n         description,\n         icon,\n         state,\n         checkIcon,\n         errorIcon,\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         isLastStep,\n         isKeepError,\n         label,\n         onClickStep,\n      } = props as FullStepProps\n\n      const { isVertical, isError, isLoading, clickable } = useStepper()\n\n      const hasVisited = isCurrentStep || isCompletedStep\n\n      const sharedProps = {\n         isLastStep,\n         isCompletedStep,\n         isCurrentStep,\n         index,\n         isError,\n         isLoading,\n         clickable,\n         label,\n         description,\n         hasVisited,\n         icon,\n         isKeepError,\n         checkIcon,\n         state,\n         errorIcon,\n         onClickStep,\n      }\n\n      const renderStep = () => {\n         switch (isVertical) {\n            case true:\n               return (\n                  <VerticalStep ref={ref} {...sharedProps}>\n                     {children}\n                  </VerticalStep>\n               )\n            default:\n               return <HorizontalStep ref={ref} {...sharedProps} />\n         }\n      }\n\n      return renderStep()\n   },\n)\n\n// <---------- VERTICAL STEP ---------->\n\ntype VerticalStepProps = StepSharedProps & {\n   children?: React.ReactNode\n}\n\nconst verticalStepVariants = cva(\n   [\n      'flex flex-col relative transition-all duration-200',\n      'data-[completed=true]:[&:not(:last-child)]:after:bg-primary',\n      'data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive',\n   ],\n   {\n      variants: {\n         variant: {\n            circle: ny(\n               '[&:not(:last-child)]:gap-[var(--step-gap)] [&:not(:last-child)]:pb-[var(--step-gap)]',\n               '[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:w-[2px] [&:not(:last-child)]:after:content-[\\'\\']',\n               '[&:not(:last-child)]:after:inset-x-[calc(var(--step-icon-size)/2)]',\n               '[&:not(:last-child)]:after:absolute',\n               '[&:not(:last-child)]:after:top-[calc(var(--step-icon-size)+var(--step-gap))]',\n               '[&:not(:last-child)]:after:bottom-[var(--step-gap)]',\n               '[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200',\n            ),\n            line: 'flex-1 border-t-0 mb-4',\n         },\n      },\n   },\n)\n\nconst VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(\n   (props, ref) => {\n      const {\n         children,\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         label,\n         description,\n         icon,\n         hasVisited,\n         state,\n         checkIcon: checkIconProp,\n         errorIcon: errorIconProp,\n         onClickStep,\n      } = props\n\n      const {\n         checkIcon: checkIconContext,\n         errorIcon: errorIconContext,\n         isError,\n         isLoading,\n         variant,\n         onClickStep: onClickStepGeneral,\n         clickable,\n         expandVerticalSteps,\n         styles,\n         scrollTracking,\n         orientation,\n         steps,\n         setStep,\n         isLastStep: isLastStepCurrentStep,\n         previousActiveStep,\n      } = useStepper()\n\n      const opacity = hasVisited ? 1 : 0.8\n      const localIsLoading = isLoading || state === 'loading'\n      const localIsError = isError || state === 'error'\n\n      const isLastStep = index === steps.length - 1\n\n      const active\n      = variant === 'line' ? isCompletedStep || isCurrentStep : isCompletedStep\n      const checkIcon = checkIconProp || checkIconContext\n      const errorIcon = errorIconProp || errorIconContext\n\n      const renderChildren = () => {\n         if (!expandVerticalSteps) {\n            return (\n               <Collapsible open={isCurrentStep}>\n                  <CollapsibleContent\n                     ref={(node) => {\n                        if (\n                        // If the step is the first step and the previous step\n                        // was the last step or if the step is not the first step\n                        // This prevents initial scrolling when the stepper\n                        // is located anywhere other than the top of the view.\n                           scrollTracking\n                           && ((index === 0\n                           && previousActiveStep\n                           && previousActiveStep === steps.length)\n                           || (index && index > 0))\n                        ) {\n                           node?.scrollIntoView({\n                              behavior: 'smooth',\n                              block: 'center',\n                           })\n                        }\n                     }}\n                     className=\"data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden\"\n                  >\n                     {children}\n                  </CollapsibleContent>\n               </Collapsible>\n            )\n         }\n         return children\n      }\n\n      return (\n         <div\n            ref={ref}\n            className={ny(\n               'stepper__vertical-step',\n               verticalStepVariants({\n                  variant: variant?.includes('circle') ? 'circle' : 'line',\n               }),\n               isLastStepCurrentStep && 'gap-[var(--step-gap)]',\n               styles?.['vertical-step'],\n            )}\n            data-optional={steps[index || 0]?.optional}\n            data-completed={isCompletedStep}\n            data-active={active}\n            data-clickable={clickable || !!onClickStep}\n            data-invalid={localIsError}\n            onClick={() => {\n               if (onClickStep)\n                  onClickStep(index || 0, setStep)\n               else\n                  onClickStepGeneral?.(index || 0, setStep)\n            }}\n         >\n            <div\n               data-vertical\n               data-active={active}\n               className={ny(\n                  'stepper__vertical-step-container',\n                  'flex items-center',\n                  variant === 'line'\n                  && 'data-[active=true]:border-primary border-s-[3px] py-2 ps-3',\n                  styles?.['vertical-step-container'],\n               )}\n            >\n               <StepButtonContainer\n                  {...{ isLoading: localIsLoading, isError: localIsError, ...props }}\n               >\n                  <StepIcon\n                     {...{\n                        index,\n                        isError: localIsError,\n                        isLoading: localIsLoading,\n                        isCurrentStep,\n                        isCompletedStep,\n                     }}\n                     icon={icon}\n                     checkIcon={checkIcon}\n                     errorIcon={errorIcon}\n                  />\n               </StepButtonContainer>\n               <StepLabel\n                  label={label}\n                  description={description}\n                  {...{ isCurrentStep, opacity }}\n               />\n            </div>\n            <div\n               className={ny(\n                  'stepper__vertical-step-content',\n                  !isLastStep && 'min-h-4',\n                  variant !== 'line' && 'ps-[--step-icon-size]',\n                  variant === 'line' && orientation === 'vertical' && 'min-h-0',\n                  styles?.['vertical-step-content'],\n               )}\n            >\n               {renderChildren()}\n            </div>\n         </div>\n      )\n   },\n)\n\n// <---------- HORIZONTAL STEP ---------->\n\nconst HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(\n   (props, ref) => {\n      const {\n         isError,\n         isLoading,\n         onClickStep,\n         variant,\n         clickable,\n         checkIcon: checkIconContext,\n         errorIcon: errorIconContext,\n         styles,\n         steps,\n         setStep,\n      } = useStepper()\n\n      const {\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         hasVisited,\n         icon,\n         label,\n         description,\n         isKeepError,\n         state,\n         checkIcon: checkIconProp,\n         errorIcon: errorIconProp,\n      } = props\n\n      const localIsLoading = isLoading || state === 'loading'\n      const localIsError = isError || state === 'error'\n\n      const opacity = hasVisited ? 1 : 0.8\n\n      const active\n      = variant === 'line' ? isCompletedStep || isCurrentStep : isCompletedStep\n\n      const checkIcon = checkIconProp || checkIconContext\n      const errorIcon = errorIconProp || errorIconContext\n\n      return (\n         <div\n            aria-disabled={!hasVisited}\n            className={ny(\n               'stepper__horizontal-step',\n               'relative flex items-center transition-all duration-200',\n               '[&:not(:last-child)]:flex-1',\n               '[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200',\n               '[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:content-[\\'\\']',\n               'data-[completed=true]:[&:not(:last-child)]:after:bg-primary',\n               'data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive',\n               variant === 'circle-alt'\n               && 'flex-1 flex-col justify-start [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:-order-1 [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]',\n               variant === 'circle'\n               && '[&:not(:last-child)]:after:me-[var(--step-gap)] [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:flex-1',\n               variant === 'line'\n               && 'data-[active=true]:border-primary flex-1 flex-col border-t-[3px]',\n               styles?.['horizontal-step'],\n            )}\n            data-optional={steps[index || 0]?.optional}\n            data-completed={isCompletedStep}\n            data-active={active}\n            data-invalid={localIsError}\n            data-clickable={clickable}\n            onClick={() => onClickStep?.(index || 0, setStep)}\n            ref={ref}\n         >\n            <div\n               className={ny(\n                  'stepper__horizontal-step-container',\n                  'flex items-center',\n                  variant === 'circle-alt' && 'flex-col justify-center gap-1',\n                  variant === 'line' && 'w-full',\n                  styles?.['horizontal-step-container'],\n               )}\n            >\n               <StepButtonContainer\n                  {...{ ...props, isError: localIsError, isLoading: localIsLoading }}\n               >\n                  <StepIcon\n                     {...{\n                        index,\n                        isCompletedStep,\n                        isCurrentStep,\n                        isError: localIsError,\n                        isKeepError,\n                        isLoading: localIsLoading,\n                     }}\n                     icon={icon}\n                     checkIcon={checkIcon}\n                     errorIcon={errorIcon}\n                  />\n               </StepButtonContainer>\n               <StepLabel\n                  label={label}\n                  description={description}\n                  {...{ isCurrentStep, opacity }}\n               />\n            </div>\n         </div>\n      )\n   },\n)\n\n// <---------- STEP BUTTON CONTAINER ---------->\n\ntype StepButtonContainerProps = StepSharedProps & {\n   children?: React.ReactNode\n}\n\nfunction StepButtonContainer({\n   isCurrentStep,\n   isCompletedStep,\n   children,\n   isError,\n   isLoading: isLoadingProp,\n   onClickStep,\n}: StepButtonContainerProps) {\n   const {\n      clickable,\n      isLoading: isLoadingContext,\n      variant,\n      styles,\n   } = useStepper()\n\n   const currentStepClickable = clickable || !!onClickStep\n\n   const isLoading = isLoadingProp || isLoadingContext\n\n   if (variant === 'line')\n      return null\n\n   return (\n      <Button\n         variant=\"ghost\"\n         tabIndex={currentStepClickable ? 0 : -1}\n         className={ny(\n            'stepper__step-button-container',\n            'pointer-events-none rounded-full p-0',\n            'size-[var(--step-icon-size)]',\n            'flex items-center justify-center rounded-full border-2',\n            'data-[clickable=true]:pointer-events-auto',\n            'data-[active=true]:bg-primary data-[active=true]:border-primary data-[active=true]:text-primary-foreground',\n            'data-[current=true]:border-primary data-[current=true]:bg-secondary',\n            'data-[invalid=true]:bg-destructive data-[invalid=true]:border-destructive data-[invalid=true]:text-destructive-foreground',\n            styles?.['step-button-container'],\n         )}\n         aria-current={isCurrentStep ? 'step' : undefined}\n         data-current={isCurrentStep}\n         data-invalid={isError && (isCurrentStep || isCompletedStep)}\n         data-active={isCompletedStep}\n         data-clickable={currentStepClickable}\n         data-loading={isLoading && (isCurrentStep || isCompletedStep)}\n      >\n         {children}\n      </Button>\n   )\n}\n\n// <---------- STEP ICON ---------->\n\ntype IconType = LucideIcon | React.ComponentType<any> | undefined\n\nconst iconVariants = cva('', {\n   variants: {\n      size: {\n         sm: 'size-4',\n         md: 'size-4',\n         lg: 'size-5',\n      },\n   },\n   defaultVariants: {\n      size: 'md',\n   },\n})\n\ninterface StepIconProps {\n   isCompletedStep?: boolean\n   isCurrentStep?: boolean\n   isError?: boolean\n   isLoading?: boolean\n   isKeepError?: boolean\n   icon?: IconType\n   index?: number\n   checkIcon?: IconType\n   errorIcon?: IconType\n}\n\nconst StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(\n   (props, ref) => {\n      const { size } = useStepper()\n\n      const {\n         isCompletedStep,\n         isCurrentStep,\n         isError,\n         isLoading,\n         isKeepError,\n         icon: CustomIcon,\n         index,\n         checkIcon: CustomCheckIcon,\n         errorIcon: CustomErrorIcon,\n      } = props\n\n      const Icon = React.useMemo(\n         () => (CustomIcon || null),\n         [CustomIcon],\n      )\n\n      const ErrorIcon = React.useMemo(\n         () => (CustomErrorIcon || null),\n         [CustomErrorIcon],\n      )\n\n      const Check = React.useMemo(\n         () => (CustomCheckIcon || CheckIcon),\n         [CustomCheckIcon],\n      )\n\n      return React.useMemo(() => {\n         if (isCompletedStep) {\n            if (isError && isKeepError) {\n               return (\n                  <div key=\"icon\">\n                     <X className={ny(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            return (\n               <div key=\"check-icon\">\n                  <Check className={ny(iconVariants({ size }))} />\n               </div>\n            )\n         }\n         if (isCurrentStep) {\n            if (isError && ErrorIcon) {\n               return (\n                  <div key=\"error-icon\">\n                     <ErrorIcon className={ny(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            if (isError) {\n               return (\n                  <div key=\"icon\">\n                     <X className={ny(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            if (isLoading) {\n               return (\n                  <Loader2 className={ny(iconVariants({ size }), 'animate-spin')} />\n               )\n            }\n         }\n         if (Icon) {\n            return (\n               <div key=\"step-icon\">\n                  <Icon className={ny(iconVariants({ size }))} />\n               </div>\n            )\n         }\n         return (\n            <span\n               ref={ref}\n               key=\"label\"\n               className={ny('text-md text-center font-medium')}\n            >\n               {(index || 0) + 1}\n            </span>\n         )\n      }, [\n         isCompletedStep,\n         isCurrentStep,\n         isError,\n         isLoading,\n         Icon,\n         index,\n         Check,\n         ErrorIcon,\n         isKeepError,\n         ref,\n         size,\n      ])\n   },\n)\n\n// <---------- STEP LABEL ---------->\n\ninterface StepLabelProps {\n   isCurrentStep?: boolean\n   opacity: number\n   label?: string | React.ReactNode\n   description?: string | null\n}\n\nconst labelVariants = cva('', {\n   variants: {\n      size: {\n         sm: 'text-sm',\n         md: 'text-sm',\n         lg: 'text-base',\n      },\n   },\n   defaultVariants: {\n      size: 'md',\n   },\n})\n\nconst descriptionVariants = cva('', {\n   variants: {\n      size: {\n         sm: 'text-xs',\n         md: 'text-xs',\n         lg: 'text-sm',\n      },\n   },\n   defaultVariants: {\n      size: 'md',\n   },\n})\n\nfunction StepLabel({\n   isCurrentStep,\n   opacity,\n   label,\n   description,\n}: StepLabelProps) {\n   const { variant, styles, size, orientation } = useStepper()\n   const shouldRender = !!label || !!description\n\n   return shouldRender\n      ? (\n            <div\n               aria-current={isCurrentStep ? 'step' : undefined}\n               className={ny(\n                  'stepper__step-label-container',\n                  'flex flex-col',\n                  variant !== 'line' ? 'ms-2' : orientation === 'horizontal' && 'my-2',\n                  variant === 'circle-alt' && 'text-center',\n                  variant === 'circle-alt' && orientation === 'horizontal' && 'ms-0',\n                  variant === 'circle-alt' && orientation === 'vertical' && 'text-start',\n                  styles?.['step-label-container'],\n               )}\n               style={{\n                  opacity,\n               }}\n            >\n               {!!label && (\n                  <span\n                     className={ny(\n                        'stepper__step-label',\n                        labelVariants({ size }),\n                        styles?.['step-label'],\n                     )}\n                  >\n                     {label}\n                  </span>\n               )}\n               {!!description && (\n                  <span\n                     className={ny(\n                        'stepper__step-description',\n                        'text-muted-foreground',\n                        descriptionVariants({ size }),\n                        styles?.['step-description'],\n                     )}\n                  >\n                     {description}\n                  </span>\n               )}\n            </div>\n         )\n      : null\n}\n\nexport { Stepper, Step, useStepper }\nexport type { StepProps, StepperProps, StepItem }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { cva } from \"class-variance-authority\"\nimport type { LucideIcon } from \"lucide-react\"\nimport { CheckIcon, Loader2, X } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n} from \"~/registry/default/ui/collapsible\"\n\n// <---------- CONTEXT ---------->\n\ninterface StepperContextValue extends StepperProps {\n   clickable?: boolean\n   isError?: boolean\n   isLoading?: boolean\n   isVertical?: boolean\n   stepCount?: number\n   expandVerticalSteps?: boolean\n   activeStep: number\n   initialStep: number\n}\n\nconst StepperContext = React.createContext<\n   StepperContextValue & {\n      nextStep: () => void\n      prevStep: () => void\n      resetSteps: () => void\n      setStep: (step: number) => void\n   }\n>({\n   steps: [],\n   activeStep: 0,\n   initialStep: 0,\n   nextStep: () => {},\n   prevStep: () => {},\n   resetSteps: () => {},\n   setStep: () => {},\n})\n\ninterface StepperContextProviderProps {\n   value: Omit<StepperContextValue, \"activeStep\">\n   children: React.ReactNode\n}\n\nfunction StepperProvider({ value, children }: StepperContextProviderProps) {\n   const isError = value.state === \"error\"\n   const isLoading = value.state === \"loading\"\n\n   const [activeStep, setActiveStep] = React.useState(value.initialStep)\n\n   const nextStep = () => {\n      setActiveStep((prev) => prev + 1)\n   }\n\n   const prevStep = () => {\n      setActiveStep((prev) => prev - 1)\n   }\n\n   const resetSteps = () => {\n      setActiveStep(value.initialStep)\n   }\n\n   const setStep = (step: number) => {\n      setActiveStep(step)\n   }\n\n   return (\n      <StepperContext.Provider\n         value={{\n            ...value,\n            isError,\n            isLoading,\n            activeStep,\n            nextStep,\n            prevStep,\n            resetSteps,\n            setStep,\n         }}\n      >\n         {children}\n      </StepperContext.Provider>\n   )\n}\n\n// <---------- HOOKS ---------->\n\nfunction usePrevious<T>(value: T): T | undefined {\n   const ref = React.useRef<T>()\n\n   React.useEffect(() => {\n      ref.current = value\n   }, [value])\n\n   return ref.current\n}\n\nfunction useStepper() {\n   const context = React.useContext(StepperContext)\n\n   if (context === undefined)\n      throw new Error(\"useStepper must be used within a StepperProvider\")\n\n   const { children, className, ...rest } = context\n\n   const isLastStep = context.activeStep === context.steps.length - 1\n   const hasCompletedAllSteps = context.activeStep === context.steps.length\n\n   const previousActiveStep = usePrevious(context.activeStep)\n\n   const currentStep = context.steps[context.activeStep]\n   const isOptionalStep = !!currentStep?.optional\n\n   const isDisabledStep = context.activeStep === 0\n\n   return {\n      ...rest,\n      isLastStep,\n      hasCompletedAllSteps,\n      isOptionalStep,\n      isDisabledStep,\n      currentStep,\n      previousActiveStep,\n   }\n}\n\nfunction useMediaQuery(query: string) {\n   const [value, setValue] = React.useState(false)\n\n   React.useEffect(() => {\n      function onChange(event: MediaQueryListEvent) {\n         setValue(event.matches)\n      }\n\n      const result = matchMedia(query)\n      result.addEventListener(\"change\", onChange)\n      setValue(result.matches)\n\n      return () => result.removeEventListener(\"change\", onChange)\n   }, [query])\n\n   return value\n}\n\n// <---------- STEPS ---------->\n\ninterface StepItem {\n   id?: string\n   label?: string\n   description?: string\n   icon?: IconType\n   optional?: boolean\n}\n\ninterface StepOptions {\n   orientation?: \"vertical\" | \"horizontal\"\n   state?: \"loading\" | \"error\"\n   responsive?: boolean\n   checkIcon?: IconType\n   errorIcon?: IconType\n   onClickStep?: (step: number, setStep: (step: number) => void) => void\n   mobileBreakpoint?: string\n   variant?: \"circle\" | \"circle-alt\" | \"line\"\n   expandVerticalSteps?: boolean\n   size?: \"sm\" | \"md\" | \"lg\"\n   styles?: {\n      /** Styles for the main container */\n      \"main-container\"?: string\n      /** Styles for the horizontal step */\n      \"horizontal-step\"?: string\n      /** Styles for the horizontal step container (button and labels) */\n      \"horizontal-step-container\"?: string\n      /** Styles for the vertical step */\n      \"vertical-step\"?: string\n      /** Styles for the vertical step container (button and labels) */\n      \"vertical-step-container\"?: string\n      /** Styles for the vertical step content */\n      \"vertical-step-content\"?: string\n      /** Styles for the step button container */\n      \"step-button-container\"?: string\n      /** Styles for the label and description container */\n      \"step-label-container\"?: string\n      /** Styles for the step label */\n      \"step-label\"?: string\n      /** Styles for the step description */\n      \"step-description\"?: string\n   }\n   variables?: {\n      \"--step-icon-size\"?: string\n      \"--step-gap\"?: string\n   }\n   scrollTracking?: boolean\n}\ninterface StepperProps extends StepOptions {\n   children?: React.ReactNode\n   className?: string\n   initialStep: number\n   steps: StepItem[]\n}\n\nconst VARIABLE_SIZES = {\n   sm: \"36px\",\n   md: \"40px\",\n   lg: \"44px\",\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n   (props, ref: React.Ref<HTMLDivElement>) => {\n      const {\n         className,\n         children,\n         orientation: orientationProp,\n         state,\n         responsive,\n         checkIcon,\n         errorIcon,\n         onClickStep,\n         mobileBreakpoint,\n         expandVerticalSteps = false,\n         initialStep = 0,\n         size,\n         steps,\n         variant,\n         styles,\n         variables,\n         scrollTracking = false,\n         ...rest\n      } = props\n\n      const childArr = React.Children.toArray(children)\n\n      const items = [] as React.ReactElement[]\n\n      const footer = childArr.map((child, _index) => {\n         if (!React.isValidElement(child))\n            throw new Error(\"Stepper children must be valid React elements.\")\n\n         if (child.type === Step) {\n            items.push(child)\n            return null\n         }\n\n         return child\n      })\n\n      const stepCount = items.length\n\n      const isMobile = useMediaQuery(\n         `(max-width: ${mobileBreakpoint || \"768px\"})`,\n      )\n\n      const clickable = !!onClickStep\n\n      const orientation = isMobile && responsive ? \"vertical\" : orientationProp\n\n      const isVertical = orientation === \"vertical\"\n\n      return (\n         <StepperProvider\n            value={{\n               initialStep,\n               orientation,\n               state,\n               size,\n               responsive,\n               checkIcon,\n               errorIcon,\n               onClickStep,\n               clickable,\n               stepCount,\n               isVertical,\n               variant: variant || \"circle\",\n               expandVerticalSteps,\n               steps,\n               scrollTracking,\n               styles,\n            }}\n         >\n            <div\n               ref={ref}\n               className={ny(\n                  \"stepper__main-container\",\n                  \"flex w-full flex-wrap\",\n                  stepCount === 1 ? \"justify-end\" : \"justify-between\",\n                  orientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n                  variant === \"line\" && orientation === \"horizontal\" && \"gap-4\",\n                  className,\n                  styles?.[\"main-container\"],\n               )}\n               style={\n                  {\n                     \"--step-icon-size\":\n                        variables?.[\"--step-icon-size\"] ||\n                        `${VARIABLE_SIZES[size || \"md\"]}`,\n                     \"--step-gap\": variables?.[\"--step-gap\"] || \"8px\",\n                  } as React.CSSProperties\n               }\n               {...rest}\n            >\n               <VerticalContent>{items}</VerticalContent>\n            </div>\n            {orientation === \"horizontal\" && (\n               <HorizontalContent>{items}</HorizontalContent>\n            )}\n            {footer}\n         </StepperProvider>\n      )\n   },\n)\n\nStepper.defaultProps = {\n   size: \"md\",\n   orientation: \"horizontal\",\n   responsive: true,\n}\n\nfunction VerticalContent({ children }: { children: React.ReactNode }) {\n   const { activeStep } = useStepper()\n\n   const childArr = React.Children.toArray(children)\n   const stepCount = childArr.length\n\n   return (\n      <>\n         {React.Children.map(children, (child, i) => {\n            const isCompletedStep =\n               (React.isValidElement(child) &&\n                  (child.props as any).isCompletedStep) ??\n               i < activeStep\n            const isLastStep = i === stepCount - 1\n            const isCurrentStep = i === activeStep\n\n            const stepProps = {\n               index: i,\n               isCompletedStep,\n               isCurrentStep,\n               isLastStep,\n            }\n\n            if (React.isValidElement(child))\n               return React.cloneElement(child, stepProps)\n\n            return null\n         })}\n      </>\n   )\n}\n\nfunction HorizontalContent({ children }: { children: React.ReactNode }) {\n   const { activeStep } = useStepper()\n   const childArr = React.Children.toArray(children)\n\n   if (activeStep > childArr.length) return null\n\n   return (\n      <>\n         {React.Children.map(childArr[activeStep], (node) => {\n            if (!React.isValidElement(node)) return null\n\n            return React.Children.map(\n               node.props.children,\n               (childNode) => childNode,\n            )\n         })}\n      </>\n   )\n}\n\n// <---------- STEP ---------->\n\ninterface StepProps extends React.HTMLAttributes<HTMLLIElement> {\n   label?: string | React.ReactNode\n   description?: string\n   icon?: IconType\n   state?: \"loading\" | \"error\"\n   checkIcon?: IconType\n   errorIcon?: IconType\n   isCompletedStep?: boolean\n   isKeepError?: boolean\n   onClickStep?: (step: number, setStep: (step: number) => void) => void\n}\n\ninterface StepSharedProps extends StepProps {\n   isLastStep?: boolean\n   isCurrentStep?: boolean\n   index?: number\n   hasVisited: boolean | undefined\n   isError?: boolean\n   isLoading?: boolean\n}\n\n// Props which shouldn't be passed to to the Step component from the user\ninterface StepInternalConfig {\n   index: number\n   isCompletedStep?: boolean\n   isCurrentStep?: boolean\n   isLastStep?: boolean\n}\n\ninterface FullStepProps extends StepProps, StepInternalConfig {}\n\nconst Step = React.forwardRef<HTMLLIElement, StepProps>(\n   (props, ref: React.Ref<any>) => {\n      const {\n         children,\n         description,\n         icon,\n         state,\n         checkIcon,\n         errorIcon,\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         isLastStep,\n         isKeepError,\n         label,\n         onClickStep,\n      } = props as FullStepProps\n\n      const { isVertical, isError, isLoading, clickable } = useStepper()\n\n      const hasVisited = isCurrentStep || isCompletedStep\n\n      const sharedProps = {\n         isLastStep,\n         isCompletedStep,\n         isCurrentStep,\n         index,\n         isError,\n         isLoading,\n         clickable,\n         label,\n         description,\n         hasVisited,\n         icon,\n         isKeepError,\n         checkIcon,\n         state,\n         errorIcon,\n         onClickStep,\n      }\n\n      const renderStep = () => {\n         switch (isVertical) {\n            case true:\n               return (\n                  <VerticalStep ref={ref} {...sharedProps}>\n                     {children}\n                  </VerticalStep>\n               )\n            default:\n               return <HorizontalStep ref={ref} {...sharedProps} />\n         }\n      }\n\n      return renderStep()\n   },\n)\n\n// <---------- VERTICAL STEP ---------->\n\ntype VerticalStepProps = StepSharedProps & {\n   children?: React.ReactNode\n}\n\nconst verticalStepVariants = cva(\n   [\n      \"flex flex-col relative transition-all duration-200\",\n      \"data-[completed=true]:[&:not(:last-child)]:after:bg-primary\",\n      \"data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive\",\n   ],\n   {\n      variants: {\n         variant: {\n            circle: ny(\n               \"[&:not(:last-child)]:gap-[var(--step-gap)] [&:not(:last-child)]:pb-[var(--step-gap)]\",\n               \"[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:w-[2px] [&:not(:last-child)]:after:content-['']\",\n               \"[&:not(:last-child)]:after:inset-x-[calc(var(--step-icon-size)/2)]\",\n               \"[&:not(:last-child)]:after:absolute\",\n               \"[&:not(:last-child)]:after:top-[calc(var(--step-icon-size)+var(--step-gap))]\",\n               \"[&:not(:last-child)]:after:bottom-[var(--step-gap)]\",\n               \"[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200\",\n            ),\n            line: \"flex-1 border-t-0 mb-4\",\n         },\n      },\n   },\n)\n\nconst VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(\n   (props, ref) => {\n      const {\n         children,\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         label,\n         description,\n         icon,\n         hasVisited,\n         state,\n         checkIcon: checkIconProp,\n         errorIcon: errorIconProp,\n         onClickStep,\n      } = props\n\n      const {\n         checkIcon: checkIconContext,\n         errorIcon: errorIconContext,\n         isError,\n         isLoading,\n         variant,\n         onClickStep: onClickStepGeneral,\n         clickable,\n         expandVerticalSteps,\n         styles,\n         scrollTracking,\n         orientation,\n         steps,\n         setStep,\n         isLastStep: isLastStepCurrentStep,\n         previousActiveStep,\n      } = useStepper()\n\n      const opacity = hasVisited ? 1 : 0.8\n      const localIsLoading = isLoading || state === \"loading\"\n      const localIsError = isError || state === \"error\"\n\n      const isLastStep = index === steps.length - 1\n\n      const active =\n         variant === \"line\" ? isCompletedStep || isCurrentStep : isCompletedStep\n      const checkIcon = checkIconProp || checkIconContext\n      const errorIcon = errorIconProp || errorIconContext\n\n      const renderChildren = () => {\n         if (!expandVerticalSteps) {\n            return (\n               <Collapsible open={isCurrentStep}>\n                  <CollapsibleContent\n                     ref={(node) => {\n                        if (\n                           // If the step is the first step and the previous step\n                           // was the last step or if the step is not the first step\n                           // This prevents initial scrolling when the stepper\n                           // is located anywhere other than the top of the view.\n                           scrollTracking &&\n                           ((index === 0 &&\n                              previousActiveStep &&\n                              previousActiveStep === steps.length) ||\n                              (index && index > 0))\n                        ) {\n                           node?.scrollIntoView({\n                              behavior: \"smooth\",\n                              block: \"center\",\n                           })\n                        }\n                     }}\n                     className=\"data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden\"\n                  >\n                     {children}\n                  </CollapsibleContent>\n               </Collapsible>\n            )\n         }\n         return children\n      }\n\n      return (\n         <div\n            ref={ref}\n            className={ny(\n               \"stepper__vertical-step\",\n               verticalStepVariants({\n                  variant: variant?.includes(\"circle\") ? \"circle\" : \"line\",\n               }),\n               isLastStepCurrentStep && \"gap-[var(--step-gap)]\",\n               styles?.[\"vertical-step\"],\n            )}\n            data-optional={steps[index || 0]?.optional}\n            data-completed={isCompletedStep}\n            data-active={active}\n            data-clickable={clickable || !!onClickStep}\n            data-invalid={localIsError}\n            onClick={() => {\n               if (onClickStep) onClickStep(index || 0, setStep)\n               else onClickStepGeneral?.(index || 0, setStep)\n            }}\n         >\n            <div\n               data-vertical\n               data-active={active}\n               className={ny(\n                  \"stepper__vertical-step-container\",\n                  \"flex items-center\",\n                  variant === \"line\" &&\n                     \"data-[active=true]:border-primary border-s-[3px] py-2 ps-3\",\n                  styles?.[\"vertical-step-container\"],\n               )}\n            >\n               <StepButtonContainer\n                  {...{\n                     isLoading: localIsLoading,\n                     isError: localIsError,\n                     ...props,\n                  }}\n               >\n                  <StepIcon\n                     {...{\n                        index,\n                        isError: localIsError,\n                        isLoading: localIsLoading,\n                        isCurrentStep,\n                        isCompletedStep,\n                     }}\n                     icon={icon}\n                     checkIcon={checkIcon}\n                     errorIcon={errorIcon}\n                  />\n               </StepButtonContainer>\n               <StepLabel\n                  label={label}\n                  description={description}\n                  {...{ isCurrentStep, opacity }}\n               />\n            </div>\n            <div\n               className={ny(\n                  \"stepper__vertical-step-content\",\n                  !isLastStep && \"min-h-4\",\n                  variant !== \"line\" && \"ps-[--step-icon-size]\",\n                  variant === \"line\" && orientation === \"vertical\" && \"min-h-0\",\n                  styles?.[\"vertical-step-content\"],\n               )}\n            >\n               {renderChildren()}\n            </div>\n         </div>\n      )\n   },\n)\n\n// <---------- HORIZONTAL STEP ---------->\n\nconst HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(\n   (props, ref) => {\n      const {\n         isError,\n         isLoading,\n         onClickStep,\n         variant,\n         clickable,\n         checkIcon: checkIconContext,\n         errorIcon: errorIconContext,\n         styles,\n         steps,\n         setStep,\n      } = useStepper()\n\n      const {\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         hasVisited,\n         icon,\n         label,\n         description,\n         isKeepError,\n         state,\n         checkIcon: checkIconProp,\n         errorIcon: errorIconProp,\n      } = props\n\n      const localIsLoading = isLoading || state === \"loading\"\n      const localIsError = isError || state === \"error\"\n\n      const opacity = hasVisited ? 1 : 0.8\n\n      const active =\n         variant === \"line\" ? isCompletedStep || isCurrentStep : isCompletedStep\n\n      const checkIcon = checkIconProp || checkIconContext\n      const errorIcon = errorIconProp || errorIconContext\n\n      return (\n         <div\n            aria-disabled={!hasVisited}\n            className={ny(\n               \"stepper__horizontal-step\",\n               \"relative flex items-center transition-all duration-200\",\n               \"[&:not(:last-child)]:flex-1\",\n               \"[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200\",\n               \"[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:content-['']\",\n               \"data-[completed=true]:[&:not(:last-child)]:after:bg-primary\",\n               \"data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive\",\n               variant === \"circle-alt\" &&\n                  \"flex-1 flex-col justify-start [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:-order-1 [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]\",\n               variant === \"circle\" &&\n                  \"[&:not(:last-child)]:after:me-[var(--step-gap)] [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:flex-1\",\n               variant === \"line\" &&\n                  \"data-[active=true]:border-primary flex-1 flex-col border-t-[3px]\",\n               styles?.[\"horizontal-step\"],\n            )}\n            data-optional={steps[index || 0]?.optional}\n            data-completed={isCompletedStep}\n            data-active={active}\n            data-invalid={localIsError}\n            data-clickable={clickable}\n            onClick={() => onClickStep?.(index || 0, setStep)}\n            ref={ref}\n         >\n            <div\n               className={ny(\n                  \"stepper__horizontal-step-container\",\n                  \"flex items-center\",\n                  variant === \"circle-alt\" && \"flex-col justify-center gap-1\",\n                  variant === \"line\" && \"w-full\",\n                  styles?.[\"horizontal-step-container\"],\n               )}\n            >\n               <StepButtonContainer\n                  {...{\n                     ...props,\n                     isError: localIsError,\n                     isLoading: localIsLoading,\n                  }}\n               >\n                  <StepIcon\n                     {...{\n                        index,\n                        isCompletedStep,\n                        isCurrentStep,\n                        isError: localIsError,\n                        isKeepError,\n                        isLoading: localIsLoading,\n                     }}\n                     icon={icon}\n                     checkIcon={checkIcon}\n                     errorIcon={errorIcon}\n                  />\n               </StepButtonContainer>\n               <StepLabel\n                  label={label}\n                  description={description}\n                  {...{ isCurrentStep, opacity }}\n               />\n            </div>\n         </div>\n      )\n   },\n)\n\n// <---------- STEP BUTTON CONTAINER ---------->\n\ntype StepButtonContainerProps = StepSharedProps & {\n   children?: React.ReactNode\n}\n\nfunction StepButtonContainer({\n   isCurrentStep,\n   isCompletedStep,\n   children,\n   isError,\n   isLoading: isLoadingProp,\n   onClickStep,\n}: StepButtonContainerProps) {\n   const {\n      clickable,\n      isLoading: isLoadingContext,\n      variant,\n      styles,\n   } = useStepper()\n\n   const currentStepClickable = clickable || !!onClickStep\n\n   const isLoading = isLoadingProp || isLoadingContext\n\n   if (variant === \"line\") return null\n\n   return (\n      <Button\n         variant=\"ghost\"\n         tabIndex={currentStepClickable ? 0 : -1}\n         className={ny(\n            \"stepper__step-button-container\",\n            \"pointer-events-none rounded-full p-0\",\n            \"size-[var(--step-icon-size)]\",\n            \"flex items-center justify-center rounded-full border-2\",\n            \"data-[clickable=true]:pointer-events-auto\",\n            \"data-[active=true]:bg-primary data-[active=true]:border-primary data-[active=true]:text-primary-foreground\",\n            \"data-[current=true]:border-primary data-[current=true]:bg-secondary\",\n            \"data-[invalid=true]:bg-destructive data-[invalid=true]:border-destructive data-[invalid=true]:text-destructive-foreground\",\n            styles?.[\"step-button-container\"],\n         )}\n         aria-current={isCurrentStep ? \"step\" : undefined}\n         data-current={isCurrentStep}\n         data-invalid={isError && (isCurrentStep || isCompletedStep)}\n         data-active={isCompletedStep}\n         data-clickable={currentStepClickable}\n         data-loading={isLoading && (isCurrentStep || isCompletedStep)}\n      >\n         {children}\n      </Button>\n   )\n}\n\n// <---------- STEP ICON ---------->\n\ntype IconType = LucideIcon | React.ComponentType<any> | undefined\n\nconst iconVariants = cva(\"\", {\n   variants: {\n      size: {\n         sm: \"size-4\",\n         md: \"size-4\",\n         lg: \"size-5\",\n      },\n   },\n   defaultVariants: {\n      size: \"md\",\n   },\n})\n\ninterface StepIconProps {\n   isCompletedStep?: boolean\n   isCurrentStep?: boolean\n   isError?: boolean\n   isLoading?: boolean\n   isKeepError?: boolean\n   icon?: IconType\n   index?: number\n   checkIcon?: IconType\n   errorIcon?: IconType\n}\n\nconst StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(\n   (props, ref) => {\n      const { size } = useStepper()\n\n      const {\n         isCompletedStep,\n         isCurrentStep,\n         isError,\n         isLoading,\n         isKeepError,\n         icon: CustomIcon,\n         index,\n         checkIcon: CustomCheckIcon,\n         errorIcon: CustomErrorIcon,\n      } = props\n\n      const Icon = React.useMemo(() => CustomIcon || null, [CustomIcon])\n\n      const ErrorIcon = React.useMemo(\n         () => CustomErrorIcon || null,\n         [CustomErrorIcon],\n      )\n\n      const Check = React.useMemo(\n         () => CustomCheckIcon || CheckIcon,\n         [CustomCheckIcon],\n      )\n\n      return React.useMemo(() => {\n         if (isCompletedStep) {\n            if (isError && isKeepError) {\n               return (\n                  <div key=\"icon\">\n                     <X className={ny(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            return (\n               <div key=\"check-icon\">\n                  <Check className={ny(iconVariants({ size }))} />\n               </div>\n            )\n         }\n         if (isCurrentStep) {\n            if (isError && ErrorIcon) {\n               return (\n                  <div key=\"error-icon\">\n                     <ErrorIcon className={ny(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            if (isError) {\n               return (\n                  <div key=\"icon\">\n                     <X className={ny(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            if (isLoading) {\n               return (\n                  <Loader2\n                     className={ny(iconVariants({ size }), \"animate-spin\")}\n                  />\n               )\n            }\n         }\n         if (Icon) {\n            return (\n               <div key=\"step-icon\">\n                  <Icon className={ny(iconVariants({ size }))} />\n               </div>\n            )\n         }\n         return (\n            <span\n               ref={ref}\n               key=\"label\"\n               className={ny(\"text-md text-center font-medium\")}\n            >\n               {(index || 0) + 1}\n            </span>\n         )\n      }, [\n         isCompletedStep,\n         isCurrentStep,\n         isError,\n         isLoading,\n         Icon,\n         index,\n         Check,\n         ErrorIcon,\n         isKeepError,\n         ref,\n         size,\n      ])\n   },\n)\n\n// <---------- STEP LABEL ---------->\n\ninterface StepLabelProps {\n   isCurrentStep?: boolean\n   opacity: number\n   label?: string | React.ReactNode\n   description?: string | null\n}\n\nconst labelVariants = cva(\"\", {\n   variants: {\n      size: {\n         sm: \"text-sm\",\n         md: \"text-sm\",\n         lg: \"text-base\",\n      },\n   },\n   defaultVariants: {\n      size: \"md\",\n   },\n})\n\nconst descriptionVariants = cva(\"\", {\n   variants: {\n      size: {\n         sm: \"text-xs\",\n         md: \"text-xs\",\n         lg: \"text-sm\",\n      },\n   },\n   defaultVariants: {\n      size: \"md\",\n   },\n})\n\nfunction StepLabel({\n   isCurrentStep,\n   opacity,\n   label,\n   description,\n}: StepLabelProps) {\n   const { variant, styles, size, orientation } = useStepper()\n   const shouldRender = !!label || !!description\n\n   return shouldRender ? (\n      <div\n         aria-current={isCurrentStep ? \"step\" : undefined}\n         className={ny(\n            \"stepper__step-label-container\",\n            \"flex flex-col\",\n            variant !== \"line\"\n               ? \"ms-2\"\n               : orientation === \"horizontal\" && \"my-2\",\n            variant === \"circle-alt\" && \"text-center\",\n            variant === \"circle-alt\" && orientation === \"horizontal\" && \"ms-0\",\n            variant === \"circle-alt\" &&\n               orientation === \"vertical\" &&\n               \"text-start\",\n            styles?.[\"step-label-container\"],\n         )}\n         style={{\n            opacity,\n         }}\n      >\n         {!!label && (\n            <span\n               className={ny(\n                  \"stepper__step-label\",\n                  labelVariants({ size }),\n                  styles?.[\"step-label\"],\n               )}\n            >\n               {label}\n            </span>\n         )}\n         {!!description && (\n            <span\n               className={ny(\n                  \"stepper__step-description\",\n                  \"text-muted-foreground\",\n                  descriptionVariants({ size }),\n                  styles?.[\"step-description\"],\n               )}\n            >\n               {description}\n            </span>\n         )}\n      </div>\n   ) : null\n}\n\nexport { Stepper, Step, useStepper }\nexport type { StepProps, StepperProps, StepItem }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/switch-demo.json b/apps/web/public/r/styles/default/switch-demo.json
index af3b805e..25c40849 100644
--- a/apps/web/public/r/styles/default/switch-demo.json
+++ b/apps/web/public/r/styles/default/switch-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "switch-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/switch-demo.tsx",
-      "content": "import { Label } from '~/registry/default/ui/label'\nimport { Switch } from '~/registry/default/ui/switch'\n\nexport default function SwitchDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Switch id=\"airplane-mode\" />\n         <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n      </div>\n   )\n}\n",
+      "path": "examples/switch-demo.tsx",
+      "content": "import { Label } from \"~/registry/default/ui/label\"\nimport { Switch } from \"~/registry/default/ui/switch\"\n\nexport default function SwitchDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Switch id=\"airplane-mode\" />\n         <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/switch-form.json b/apps/web/public/r/styles/default/switch-form.json
index 1ed3babe..b857488b 100644
--- a/apps/web/public/r/styles/default/switch-form.json
+++ b/apps/web/public/r/styles/default/switch-form.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "switch-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/switch-form.tsx",
-      "content": "'use client'\n\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n} from '~/registry/default/ui/form'\nimport { Switch } from '~/registry/default/ui/switch'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst FormSchema = z.object({\n   marketing_emails: z.boolean().default(false).optional(),\n   security_emails: z.boolean(),\n})\n\nexport default function SwitchForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         security_emails: true,\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full space-y-6\">\n            <div>\n               <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n               <div className=\"space-y-4\">\n                  <FormField\n                     control={form.control}\n                     name=\"marketing_emails\"\n                     render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n                           <div className=\"space-y-0.5\">\n                              <FormLabel className=\"text-base\">\n                                 Marketing emails\n                              </FormLabel>\n                              <FormDescription>\n                                 Receive emails about new products, features, and more.\n                              </FormDescription>\n                           </div>\n                           <FormControl>\n                              <Switch\n                                 checked={field.value}\n                                 onCheckedChange={field.onChange}\n                              />\n                           </FormControl>\n                        </FormItem>\n                     )}\n                  />\n                  <FormField\n                     control={form.control}\n                     name=\"security_emails\"\n                     render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n                           <div className=\"space-y-0.5\">\n                              <FormLabel className=\"text-base\">Security emails</FormLabel>\n                              <FormDescription>\n                                 Receive emails about your account security.\n                              </FormDescription>\n                           </div>\n                           <FormControl>\n                              <Switch\n                                 checked={field.value}\n                                 onCheckedChange={field.onChange}\n                                 disabled\n                                 aria-readonly\n                              />\n                           </FormControl>\n                        </FormItem>\n                     )}\n                  />\n               </div>\n            </div>\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "path": "examples/switch-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n} from \"~/registry/default/ui/form\"\nimport { Switch } from \"~/registry/default/ui/switch\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst FormSchema = z.object({\n   marketing_emails: z.boolean().default(false).optional(),\n   security_emails: z.boolean(),\n})\n\nexport default function SwitchForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         security_emails: true,\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-full space-y-6\"\n         >\n            <div>\n               <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n               <div className=\"space-y-4\">\n                  <FormField\n                     control={form.control}\n                     name=\"marketing_emails\"\n                     render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n                           <div className=\"space-y-0.5\">\n                              <FormLabel className=\"text-base\">\n                                 Marketing emails\n                              </FormLabel>\n                              <FormDescription>\n                                 Receive emails about new products, features,\n                                 and more.\n                              </FormDescription>\n                           </div>\n                           <FormControl>\n                              <Switch\n                                 checked={field.value}\n                                 onCheckedChange={field.onChange}\n                              />\n                           </FormControl>\n                        </FormItem>\n                     )}\n                  />\n                  <FormField\n                     control={form.control}\n                     name=\"security_emails\"\n                     render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n                           <div className=\"space-y-0.5\">\n                              <FormLabel className=\"text-base\">\n                                 Security emails\n                              </FormLabel>\n                              <FormDescription>\n                                 Receive emails about your account security.\n                              </FormDescription>\n                           </div>\n                           <FormControl>\n                              <Switch\n                                 checked={field.value}\n                                 onCheckedChange={field.onChange}\n                                 disabled\n                                 aria-readonly\n                              />\n                           </FormControl>\n                        </FormItem>\n                     )}\n                  />\n               </div>\n            </div>\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/switch.json b/apps/web/public/r/styles/default/switch.json
index 48103849..31c2e19f 100644
--- a/apps/web/public/r/styles/default/switch.json
+++ b/apps/web/public/r/styles/default/switch.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "switch",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-switch"
   ],
   "files": [
     {
       "path": "ui/switch.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitives from '@radix-ui/react-switch'\n\nimport { ny } from '~/lib/utils'\n\nconst Switch = React.forwardRef<\n   React.ElementRef<typeof SwitchPrimitives.Root>,\n   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n   <SwitchPrimitives.Root\n      className={ny(\n         'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n         className,\n      )}\n      {...props}\n      ref={ref}\n   >\n      <SwitchPrimitives.Thumb\n         className={ny(\n            'bg-background pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',\n         )}\n      />\n   </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Switch = React.forwardRef<\n   React.ElementRef<typeof SwitchPrimitives.Root>,\n   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n   <SwitchPrimitives.Root\n      className={ny(\n         \"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n         className,\n      )}\n      {...props}\n      ref={ref}\n   >\n      <SwitchPrimitives.Thumb\n         className={ny(\n            \"bg-background pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\",\n         )}\n      />\n   </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/table-demo.json b/apps/web/public/r/styles/default/table-demo.json
index db606985..9baebbb6 100644
--- a/apps/web/public/r/styles/default/table-demo.json
+++ b/apps/web/public/r/styles/default/table-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "table-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/table-demo.tsx",
-      "content": "import {\n   Table,\n   TableBody,\n   TableCaption,\n   TableCell,\n   TableFooter,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from '~/registry/default/ui/table'\n\nconst invoices = [\n   {\n      invoice: 'INV001',\n      paymentStatus: 'Paid',\n      totalAmount: '$250.00',\n      paymentMethod: 'Credit Card',\n   },\n   {\n      invoice: 'INV002',\n      paymentStatus: 'Pending',\n      totalAmount: '$150.00',\n      paymentMethod: 'PayPal',\n   },\n   {\n      invoice: 'INV003',\n      paymentStatus: 'Unpaid',\n      totalAmount: '$350.00',\n      paymentMethod: 'Bank Transfer',\n   },\n   {\n      invoice: 'INV004',\n      paymentStatus: 'Paid',\n      totalAmount: '$450.00',\n      paymentMethod: 'Credit Card',\n   },\n   {\n      invoice: 'INV005',\n      paymentStatus: 'Paid',\n      totalAmount: '$550.00',\n      paymentMethod: 'PayPal',\n   },\n   {\n      invoice: 'INV006',\n      paymentStatus: 'Pending',\n      totalAmount: '$200.00',\n      paymentMethod: 'Bank Transfer',\n   },\n   {\n      invoice: 'INV007',\n      paymentStatus: 'Unpaid',\n      totalAmount: '$300.00',\n      paymentMethod: 'Credit Card',\n   },\n]\n\nexport default function TableDemo() {\n   return (\n      <Table>\n         <TableCaption>A list of your recent invoices.</TableCaption>\n         <TableHeader>\n            <TableRow>\n               <TableHead className=\"w-[100px]\">Invoice</TableHead>\n               <TableHead>Status</TableHead>\n               <TableHead>Method</TableHead>\n               <TableHead className=\"text-right\">Amount</TableHead>\n            </TableRow>\n         </TableHeader>\n         <TableBody>\n            {invoices.map(invoice => (\n               <TableRow key={invoice.invoice}>\n                  <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n                  <TableCell>{invoice.paymentStatus}</TableCell>\n                  <TableCell>{invoice.paymentMethod}</TableCell>\n                  <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n               </TableRow>\n            ))}\n         </TableBody>\n         <TableFooter>\n            <TableRow>\n               <TableCell colSpan={3}>Total</TableCell>\n               <TableCell className=\"text-right\">$2,500.00</TableCell>\n            </TableRow>\n         </TableFooter>\n      </Table>\n   )\n}\n",
+      "path": "examples/table-demo.tsx",
+      "content": "import {\n   Table,\n   TableBody,\n   TableCaption,\n   TableCell,\n   TableFooter,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from \"~/registry/default/ui/table\"\n\nconst invoices = [\n   {\n      invoice: \"INV001\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$250.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV002\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$150.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV003\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$350.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV004\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$450.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV005\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$550.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV006\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$200.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV007\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$300.00\",\n      paymentMethod: \"Credit Card\",\n   },\n]\n\nexport default function TableDemo() {\n   return (\n      <Table>\n         <TableCaption>A list of your recent invoices.</TableCaption>\n         <TableHeader>\n            <TableRow>\n               <TableHead className=\"w-[100px]\">Invoice</TableHead>\n               <TableHead>Status</TableHead>\n               <TableHead>Method</TableHead>\n               <TableHead className=\"text-right\">Amount</TableHead>\n            </TableRow>\n         </TableHeader>\n         <TableBody>\n            {invoices.map((invoice) => (\n               <TableRow key={invoice.invoice}>\n                  <TableCell className=\"font-medium\">\n                     {invoice.invoice}\n                  </TableCell>\n                  <TableCell>{invoice.paymentStatus}</TableCell>\n                  <TableCell>{invoice.paymentMethod}</TableCell>\n                  <TableCell className=\"text-right\">\n                     {invoice.totalAmount}\n                  </TableCell>\n               </TableRow>\n            ))}\n         </TableBody>\n         <TableFooter>\n            <TableRow>\n               <TableCell colSpan={3}>Total</TableCell>\n               <TableCell className=\"text-right\">$2,500.00</TableCell>\n            </TableRow>\n         </TableFooter>\n      </Table>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/table.json b/apps/web/public/r/styles/default/table.json
index 24883954..e7dcc37e 100644
--- a/apps/web/public/r/styles/default/table.json
+++ b/apps/web/public/r/styles/default/table.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "table",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/table.tsx",
-      "content": "import * as React from 'react'\n\nimport { ny } from '~/lib/utils'\n\nconst Table = React.forwardRef<\n   HTMLTableElement,\n   React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n   <div className=\"relative w-full overflow-auto\">\n      <table\n         ref={ref}\n         className={ny('w-full caption-bottom text-sm', className)}\n         {...props}\n      />\n   </div>\n))\nTable.displayName = 'Table'\n\nconst TableHeader = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <thead ref={ref} className={ny('[&_tr]:border-b', className)} {...props} />\n))\nTableHeader.displayName = 'TableHeader'\n\nconst TableBody = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <tbody\n      ref={ref}\n      className={ny('[&_tr:last-child]:border-0', className)}\n      {...props}\n   />\n))\nTableBody.displayName = 'TableBody'\n\nconst TableFooter = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <tfoot\n      ref={ref}\n      className={ny(\n         'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',\n         className,\n      )}\n      {...props}\n   />\n))\nTableFooter.displayName = 'TableFooter'\n\nconst TableRow = React.forwardRef<\n   HTMLTableRowElement,\n   React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n   <tr\n      ref={ref}\n      className={ny(\n         'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',\n         className,\n      )}\n      {...props}\n   />\n))\nTableRow.displayName = 'TableRow'\n\nconst TableHead = React.forwardRef<\n   HTMLTableCellElement,\n   React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n   <th\n      ref={ref}\n      className={ny(\n         'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',\n         className,\n      )}\n      {...props}\n   />\n))\nTableHead.displayName = 'TableHead'\n\nconst TableCell = React.forwardRef<\n   HTMLTableCellElement,\n   React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n   <td\n      ref={ref}\n      className={ny('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}\n      {...props}\n   />\n))\nTableCell.displayName = 'TableCell'\n\nconst TableCaption = React.forwardRef<\n   HTMLTableCaptionElement,\n   React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n   <caption\n      ref={ref}\n      className={ny('text-muted-foreground mt-4 text-sm', className)}\n      {...props}\n   />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport {\n   Table,\n   TableHeader,\n   TableBody,\n   TableFooter,\n   TableHead,\n   TableRow,\n   TableCell,\n   TableCaption,\n}\n",
-      "type": "registry:component",
+      "content": "import * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Table = React.forwardRef<\n   HTMLTableElement,\n   React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n   <div className=\"relative w-full overflow-auto\">\n      <table\n         ref={ref}\n         className={ny(\"w-full caption-bottom text-sm\", className)}\n         {...props}\n      />\n   </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <thead ref={ref} className={ny(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <tbody\n      ref={ref}\n      className={ny(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n   />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <tfoot\n      ref={ref}\n      className={ny(\n         \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n   HTMLTableRowElement,\n   React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n   <tr\n      ref={ref}\n      className={ny(\n         \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n   HTMLTableCellElement,\n   React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n   <th\n      ref={ref}\n      className={ny(\n         \"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n   HTMLTableCellElement,\n   React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n   <td\n      ref={ref}\n      className={ny(\n         \"p-4 align-middle [&:has([role=checkbox])]:pr-0\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n   HTMLTableCaptionElement,\n   React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n   <caption\n      ref={ref}\n      className={ny(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n   />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n   Table,\n   TableHeader,\n   TableBody,\n   TableFooter,\n   TableHead,\n   TableRow,\n   TableCell,\n   TableCaption,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/tabs-demo.json b/apps/web/public/r/styles/default/tabs-demo.json
index 0bee5ab3..227a65b2 100644
--- a/apps/web/public/r/styles/default/tabs-demo.json
+++ b/apps/web/public/r/styles/default/tabs-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tabs-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tabs-demo.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\nimport {\n   Tabs,\n   TabsContent,\n   TabsList,\n   TabsTrigger,\n} from '~/registry/default/ui/tabs'\n\nexport default function TabsDemo() {\n   return (\n      <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n         <TabsList className=\"grid w-full grid-cols-2\">\n            <TabsTrigger value=\"account\">Account</TabsTrigger>\n            <TabsTrigger value=\"password\">Password</TabsTrigger>\n         </TabsList>\n         <TabsContent value=\"account\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Account</CardTitle>\n                  <CardDescription>\n                     Make changes to your account here. Click save when you're done.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"username\">Username</Label>\n                     <Input id=\"username\" defaultValue=\"~peduarte\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save changes</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n         <TabsContent value=\"password\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Password</CardTitle>\n                  <CardDescription>\n                     Change your password here. After saving, you'll be logged out.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"current\">Current password</Label>\n                     <Input id=\"current\" type=\"password\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"new\">New password</Label>\n                     <Input id=\"new\" type=\"password\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save password</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n      </Tabs>\n   )\n}\n",
+      "path": "examples/tabs-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { Label } from \"~/registry/default/ui/label\"\nimport {\n   Tabs,\n   TabsContent,\n   TabsList,\n   TabsTrigger,\n} from \"~/registry/default/ui/tabs\"\n\nexport default function TabsDemo() {\n   return (\n      <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n         <TabsList className=\"grid w-full grid-cols-2\">\n            <TabsTrigger value=\"account\">Account</TabsTrigger>\n            <TabsTrigger value=\"password\">Password</TabsTrigger>\n         </TabsList>\n         <TabsContent value=\"account\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Account</CardTitle>\n                  <CardDescription>\n                     Make changes to your account here. Click save when you're\n                     done.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"username\">Username</Label>\n                     <Input id=\"username\" defaultValue=\"~peduarte\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save changes</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n         <TabsContent value=\"password\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Password</CardTitle>\n                  <CardDescription>\n                     Change your password here. After saving, you'll be logged\n                     out.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"current\">Current password</Label>\n                     <Input id=\"current\" type=\"password\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"new\">New password</Label>\n                     <Input id=\"new\" type=\"password\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save password</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n      </Tabs>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/tabs.json b/apps/web/public/r/styles/default/tabs.json
index d45750c9..3041bf99 100644
--- a/apps/web/public/r/styles/default/tabs.json
+++ b/apps/web/public/r/styles/default/tabs.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tabs",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-tabs"
   ],
   "files": [
     {
       "path": "ui/tabs.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\n\nimport { ny } from '~/lib/utils'\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.List\n      ref={ref}\n      className={ny(\n         'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',\n         className,\n      )}\n      {...props}\n   />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.Trigger\n      ref={ref}\n      className={ny(\n         'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',\n         className,\n      )}\n      {...props}\n   />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.Content\n      ref={ref}\n      className={ny(\n         'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n         className,\n      )}\n      {...props}\n   />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.List\n      ref={ref}\n      className={ny(\n         \"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1\",\n         className,\n      )}\n      {...props}\n   />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.Trigger\n      ref={ref}\n      className={ny(\n         \"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm\",\n         className,\n      )}\n      {...props}\n   />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.Content\n      ref={ref}\n      className={ny(\n         \"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n         className,\n      )}\n      {...props}\n   />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/terminal-demo.json b/apps/web/public/r/styles/default/terminal-demo.json
new file mode 100644
index 00000000..25b8df5c
--- /dev/null
+++ b/apps/web/public/r/styles/default/terminal-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "terminal-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/terminal-demo.tsx",
+      "content": "import {\n   AnimatedSpan,\n   Terminal,\n   TypingAnimation,\n} from \"~/registry/default/ui/terminal\"\n\nexport default function TerminalDemo() {\n   return (\n      <Terminal>\n         <TypingAnimation>&gt; pnpm dlx nyxb@latest init</TypingAnimation>\n\n         <AnimatedSpan delay={1500} className=\"text-green-500\">\n            <span>✔ Preflight checks.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={2000} className=\"text-green-500\">\n            <span>✔ Verifying framework. Found Next.js.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={2500} className=\"text-green-500\">\n            <span>✔ Validating Tailwind CSS.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={3000} className=\"text-green-500\">\n            <span>✔ Validating import alias.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={3500} className=\"text-green-500\">\n            <span>✔ Writing components.json.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={4000} className=\"text-green-500\">\n            <span>✔ Checking registry.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={4500} className=\"text-green-500\">\n            <span>✔ Updating tailwind.config.ts</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={5000} className=\"text-green-500\">\n            <span>✔ Updating app/globals.css</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={5500} className=\"text-green-500\">\n            <span>✔ Installing dependencies.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={6000} className=\"text-blue-500\">\n            <span>ℹ Updated 1 file:</span>\n            <span className=\"pl-2\">- lib/utils.ts</span>\n         </AnimatedSpan>\n\n         <TypingAnimation delay={6500} className=\"text-muted-foreground\">\n            Success! Project initialization completed.\n         </TypingAnimation>\n\n         <TypingAnimation delay={7000} className=\"text-muted-foreground\">\n            You may now add components.\n         </TypingAnimation>\n      </Terminal>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/terminal.json b/apps/web/public/r/styles/default/terminal.json
new file mode 100644
index 00000000..9d2f04e0
--- /dev/null
+++ b/apps/web/public/r/styles/default/terminal.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "terminal",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/terminal.tsx",
+      "content": "\"use client\"\n\nimport { type MotionProps, motion } from \"motion/react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface AnimatedSpanProps extends MotionProps {\n   children: React.ReactNode\n   delay?: number\n   className?: string\n}\n\nexport const AnimatedSpan = ({\n   children,\n   delay = 0,\n   className,\n   ...props\n}: AnimatedSpanProps) => (\n   <motion.div\n      initial={{ opacity: 0, y: -5 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.3, delay: delay / 1000 }}\n      className={ny(\"grid text-sm font-normal tracking-tight\", className)}\n      {...props}\n   >\n      {children}\n   </motion.div>\n)\n\ninterface TypingAnimationProps extends MotionProps {\n   children: string\n   className?: string\n   duration?: number\n   delay?: number\n   as?: React.ElementType\n}\n\nexport const TypingAnimation = ({\n   children,\n   className,\n   duration = 60,\n   delay = 0,\n   as: Component = \"span\",\n   ...props\n}: TypingAnimationProps) => {\n   if (typeof children !== \"string\") {\n      throw new Error(\"TypingAnimation: children must be a string. Received:\")\n   }\n\n   const MotionComponent = motion.create(Component, {\n      forwardMotionProps: true,\n   })\n\n   const [displayedText, setDisplayedText] = useState<string>(\"\")\n   const [started, setStarted] = useState(false)\n   const elementRef = useRef<HTMLElement | null>(null)\n\n   useEffect(() => {\n      const startTimeout = setTimeout(() => {\n         setStarted(true)\n      }, delay)\n      return () => clearTimeout(startTimeout)\n   }, [delay])\n\n   useEffect(() => {\n      if (!started) return\n\n      let i = 0\n      const typingEffect = setInterval(() => {\n         if (i < children.length) {\n            setDisplayedText(children.substring(0, i + 1))\n            i++\n         } else {\n            clearInterval(typingEffect)\n         }\n      }, duration)\n\n      return () => {\n         clearInterval(typingEffect)\n      }\n   }, [children, duration, started])\n\n   return (\n      <MotionComponent\n         ref={elementRef}\n         className={ny(\"text-sm font-normal tracking-tight\", className)}\n         {...props}\n      >\n         {displayedText}\n      </MotionComponent>\n   )\n}\n\ninterface TerminalProps {\n   children: React.ReactNode\n   className?: string\n}\n\nexport const Terminal = ({ children, className }: TerminalProps) => {\n   return (\n      <div\n         className={ny(\n            \"z-0 h-full max-h-[400px] w-full max-w-lg rounded-xl border border-border bg-background\",\n            className,\n         )}\n      >\n         <div className=\"flex flex-col gap-y-2 border-b border-border p-4\">\n            <div className=\"flex flex-row gap-x-2\">\n               <div className=\"h-2 w-2 rounded-full bg-red-500\"></div>\n               <div className=\"h-2 w-2 rounded-full bg-yellow-500\"></div>\n               <div className=\"h-2 w-2 rounded-full bg-green-500\"></div>\n            </div>\n         </div>\n         <pre className=\"p-4\">\n            <code className=\"grid gap-y-1 overflow-auto\">{children}</code>\n         </pre>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/text-animate-demo-2.json b/apps/web/public/r/styles/default/text-animate-demo-2.json
new file mode 100644
index 00000000..e4c6a23d
--- /dev/null
+++ b/apps/web/public/r/styles/default/text-animate-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-2",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-2.tsx",
+      "content": "import { TextAnimate } from \"~/registry/default/ui/text-animate\"\n\nexport default function TextAnimateDemo2() {\n   return (\n      <TextAnimate animation=\"blurIn\" as=\"h1\">\n         Blur in text\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/text-animate-demo-3.json b/apps/web/public/r/styles/default/text-animate-demo-3.json
new file mode 100644
index 00000000..19f168d3
--- /dev/null
+++ b/apps/web/public/r/styles/default/text-animate-demo-3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-3",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-3.tsx",
+      "content": "import { TextAnimate } from \"~/registry/default/ui/text-animate\"\n\nexport default function TextAnimateDemo3() {\n   return (\n      <TextAnimate animation=\"slideUp\" by=\"word\">\n         Slide up by word\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/text-animate-demo-4.json b/apps/web/public/r/styles/default/text-animate-demo-4.json
new file mode 100644
index 00000000..0c85fdb4
--- /dev/null
+++ b/apps/web/public/r/styles/default/text-animate-demo-4.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-4",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-4.tsx",
+      "content": "import { TextAnimate } from \"~/registry/default/ui/text-animate\"\n\nexport default function TextAnimateDemo4() {\n   return (\n      <TextAnimate animation=\"scaleUp\" by=\"text\">\n         Scale up by text\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/text-animate-demo-5.json b/apps/web/public/r/styles/default/text-animate-demo-5.json
new file mode 100644
index 00000000..e3348c2f
--- /dev/null
+++ b/apps/web/public/r/styles/default/text-animate-demo-5.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-5",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-5.tsx",
+      "content": "import { TextAnimate } from \"~/registry/default/ui/text-animate\"\n\nexport default function TextAnimateDemo5() {\n   return (\n      <TextAnimate animation=\"fadeIn\" by=\"line\" as=\"p\">\n         {`Fade in by line as paragraph\\n\\nFade in by line as paragraph\\n\\nFade in by line as paragraph`}\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/text-animate-demo-6.json b/apps/web/public/r/styles/default/text-animate-demo-6.json
new file mode 100644
index 00000000..fad8381b
--- /dev/null
+++ b/apps/web/public/r/styles/default/text-animate-demo-6.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-6",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-6.tsx",
+      "content": "import { TextAnimate } from \"~/registry/default/ui/text-animate\"\n\nexport default function TextAnimateDemo6() {\n   return (\n      <TextAnimate animation=\"slideLeft\" by=\"character\">\n         Slide left by character\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/text-animate-demo.json b/apps/web/public/r/styles/default/text-animate-demo.json
new file mode 100644
index 00000000..43a17ac2
--- /dev/null
+++ b/apps/web/public/r/styles/default/text-animate-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo.tsx",
+      "content": "import { TextAnimate } from \"~/registry/default/ui/text-animate\"\n\nexport default function TextAnimateDemo() {\n   return (\n      <TextAnimate animation=\"blurInUp\" by=\"character\">\n         Blur in by character\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/text-animate.json b/apps/web/public/r/styles/default/text-animate.json
new file mode 100644
index 00000000..41d27abd
--- /dev/null
+++ b/apps/web/public/r/styles/default/text-animate.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/text-animate.tsx",
+      "content": "\"use client\"\n\nimport {\n   AnimatePresence,\n   type MotionProps,\n   type Variants,\n   motion,\n} from \"motion/react\"\nimport type { ElementType } from \"react\"\nimport { ny } from \"~/registry/default/lib/utils\"\n\ntype AnimationType = \"text\" | \"word\" | \"character\" | \"line\"\ntype AnimationVariant =\n   | \"fadeIn\"\n   | \"blurIn\"\n   | \"blurInUp\"\n   | \"blurInDown\"\n   | \"slideUp\"\n   | \"slideDown\"\n   | \"slideLeft\"\n   | \"slideRight\"\n   | \"scaleUp\"\n   | \"scaleDown\"\n\ninterface TextAnimateProps extends MotionProps {\n   /**\n    * The text content to animate\n    */\n   children: string\n   /**\n    * The class name to be applied to the component\n    */\n   className?: string\n   /**\n    * The class name to be applied to each segment\n    */\n   segmentClassName?: string\n   /**\n    * The delay before the animation starts\n    */\n   delay?: number\n   /**\n    * The duration of the animation\n    */\n   duration?: number\n   /**\n    * Custom motion variants for the animation\n    */\n   variants?: Variants\n   /**\n    * The element type to render\n    */\n   as?: ElementType\n   /**\n    * How to split the text (\"text\", \"word\", \"character\")\n    */\n   by?: AnimationType\n   /**\n    * Whether to start animation when component enters viewport\n    */\n   startOnView?: boolean\n   /**\n    * Whether to animate only once\n    */\n   once?: boolean\n   /**\n    * The animation preset to use\n    */\n   animation?: AnimationVariant\n}\n\nconst staggerTimings: Record<AnimationType, number> = {\n   text: 0.06,\n   word: 0.05,\n   character: 0.03,\n   line: 0.06,\n}\n\nconst defaultContainerVariants = {\n   hidden: { opacity: 1 },\n   show: {\n      opacity: 1,\n      transition: {\n         staggerChildren: 0.05,\n      },\n   },\n   exit: {\n      opacity: 0,\n      transition: {\n         staggerChildren: 0.05,\n         staggerDirection: -1,\n      },\n   },\n}\n\nconst defaultItemVariants: Variants = {\n   hidden: { opacity: 0 },\n   show: {\n      opacity: 1,\n   },\n   exit: {\n      opacity: 0,\n   },\n}\n\nconst defaultItemAnimationVariants: Record<\n   AnimationVariant,\n   { container: Variants; item: Variants }\n> = {\n   fadeIn: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, y: 20 },\n         show: (delay: number) => ({\n            opacity: 1,\n            y: 0,\n            transition: {\n               delay,\n               duration: 0.3,\n            },\n         }),\n         exit: {\n            opacity: 0,\n            y: 20,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   blurIn: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, filter: \"blur(10px)\" },\n         show: (i: number) => ({\n            opacity: 1,\n            filter: \"blur(0px)\",\n            transition: {\n               delay: i * 0.1,\n               duration: 0.3,\n            },\n         }),\n         exit: {\n            opacity: 0,\n            filter: \"blur(10px)\",\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   blurInUp: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, filter: \"blur(10px)\", y: 20 },\n         show: (delay: number) => ({\n            opacity: 1,\n            filter: \"blur(0px)\",\n            y: 0,\n            transition: {\n               y: { duration: 0.3 },\n               opacity: { duration: 0.4 },\n               filter: { duration: 0.3 },\n            },\n         }),\n         exit: {\n            opacity: 0,\n            filter: \"blur(10px)\",\n            y: 20,\n            transition: {\n               y: { duration: 0.3 },\n               opacity: { duration: 0.4 },\n               filter: { duration: 0.3 },\n            },\n         },\n      },\n   },\n   blurInDown: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, filter: \"blur(10px)\", y: -20 },\n         show: (delay: number) => ({\n            opacity: 1,\n            filter: \"blur(0px)\",\n            y: 0,\n            transition: {\n               y: { duration: 0.3 },\n               opacity: { duration: 0.4 },\n               filter: { duration: 0.3 },\n            },\n         }),\n      },\n   },\n   slideUp: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { y: 20, opacity: 0 },\n         show: (delay: number) => ({\n            y: 0,\n            opacity: 1,\n            transition: {\n               delay,\n               duration: 0.3,\n            },\n         }),\n         exit: {\n            y: -20,\n            opacity: 0,\n            transition: {\n               duration: 0.3,\n            },\n         },\n      },\n   },\n   slideDown: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { y: -20, opacity: 0 },\n         show: {\n            y: 0,\n            opacity: 1,\n            transition: { duration: 0.3 },\n         },\n         exit: {\n            y: 20,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   slideLeft: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { x: 20, opacity: 0 },\n         show: {\n            x: 0,\n            opacity: 1,\n            transition: { duration: 0.3 },\n         },\n         exit: {\n            x: -20,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   slideRight: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { x: -20, opacity: 0 },\n         show: {\n            x: 0,\n            opacity: 1,\n            transition: { duration: 0.3 },\n         },\n         exit: {\n            x: 20,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   scaleUp: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { scale: 0.5, opacity: 0 },\n         show: {\n            scale: 1,\n            opacity: 1,\n            transition: {\n               duration: 0.3,\n               scale: {\n                  type: \"spring\",\n                  damping: 15,\n                  stiffness: 300,\n               },\n            },\n         },\n         exit: {\n            scale: 0.5,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   scaleDown: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { scale: 1.5, opacity: 0 },\n         show: (delay: number) => ({\n            scale: 1,\n            opacity: 1,\n            transition: {\n               delay,\n               duration: 0.3,\n               scale: {\n                  type: \"spring\",\n                  damping: 15,\n                  stiffness: 300,\n               },\n            },\n         }),\n         exit: {\n            scale: 1.5,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n}\n\nexport function TextAnimate({\n   children,\n   delay = 0,\n   duration = 0.3,\n   variants,\n   className,\n   segmentClassName,\n   as: Component = \"p\",\n   startOnView = true,\n   once = false,\n   by = \"word\",\n   animation = \"fadeIn\",\n   ...props\n}: TextAnimateProps) {\n   const MotionComponent = motion.create(Component)\n\n   // Use provided variants or default variants based on animation type\n   const finalVariants = animation\n      ? {\n           container: {\n              ...defaultItemAnimationVariants[animation].container,\n              show: {\n                 ...defaultItemAnimationVariants[animation].container.show,\n                 transition: {\n                    staggerChildren: staggerTimings[by],\n                 },\n              },\n              exit: {\n                 ...defaultItemAnimationVariants[animation].container.exit,\n                 transition: {\n                    staggerChildren: staggerTimings[by],\n                    staggerDirection: -1,\n                 },\n              },\n           },\n           item: defaultItemAnimationVariants[animation].item,\n        }\n      : { container: defaultContainerVariants, item: defaultItemVariants }\n\n   let segments: string[] = []\n   switch (by) {\n      case \"word\":\n         segments = children.split(/(\\s+)/)\n         break\n      case \"character\":\n         segments = children.split(\"\")\n         break\n      case \"line\":\n         segments = children.split(\"\\n\")\n         break\n      case \"text\":\n      default:\n         segments = [children]\n         break\n   }\n\n   return (\n      <AnimatePresence mode=\"popLayout\">\n         <MotionComponent\n            variants={finalVariants.container}\n            initial=\"hidden\"\n            whileInView={startOnView ? \"show\" : undefined}\n            animate={startOnView ? undefined : \"show\"}\n            exit=\"exit\"\n            className={ny(\"whitespace-pre-wrap\", className)}\n            {...props}\n         >\n            {segments.map((segment, i) => (\n               <motion.span\n                  key={`${by}-${segment}-${i}`}\n                  variants={finalVariants.item}\n                  custom={i * staggerTimings[by]}\n                  className={ny(\n                     by === \"line\" ? \"block\" : \"inline-block whitespace-pre\",\n                     segmentClassName,\n                  )}\n               >\n                  {segment}\n               </motion.span>\n            ))}\n         </MotionComponent>\n      </AnimatePresence>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/text-reveal-demo.json b/apps/web/public/r/styles/default/text-reveal-demo.json
index 322f6dfb..aeef97e2 100644
--- a/apps/web/public/r/styles/default/text-reveal-demo.json
+++ b/apps/web/public/r/styles/default/text-reveal-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "text-reveal-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/text-reveal-demo.tsx",
-      "content": "import TextReveal from '~/registry/default/ui/text-reveal'\n\nexport default async function TextRevealDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center rounded-lg border bg-white dark:bg-black\">\n         <TextReveal text=\"Nyxb UI will change the way you design.\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/text-reveal-demo.tsx",
+      "content": "import TextReveal from \"~/registry/default/ui/text-reveal\"\n\nexport default async function TextRevealDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center rounded-lg border bg-white dark:bg-black\">\n         <TextReveal text=\"Nyxb UI will change the way you design.\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/text-reveal.json b/apps/web/public/r/styles/default/text-reveal.json
index 6a1e0032..1ced3967 100644
--- a/apps/web/public/r/styles/default/text-reveal.json
+++ b/apps/web/public/r/styles/default/text-reveal.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "text-reveal",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/text-reveal.tsx",
-      "content": "'use client'\n\nimport { motion, useScroll, useTransform } from 'framer-motion'\nimport type { FC, ReactNode } from 'react'\nimport { useRef } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface TextRevealByWordProps {\n   text: string\n   className?: string\n}\n\nexport const TextRevealByWord: FC<TextRevealByWordProps> = ({\n   text,\n   className,\n}) => {\n   const targetRef = useRef<HTMLDivElement | null>(null)\n\n   const { scrollYProgress } = useScroll({\n      target: targetRef,\n   })\n   const words = text.split(' ')\n\n   return (\n      <div ref={targetRef} className={ny('relative z-0 h-[200vh]', className)}>\n         <div className=\"sticky top-0 mx-auto flex h-1/2 max-w-4xl items-center bg-transparent px-4 py-20\">\n            <p\n               ref={targetRef}\n               className=\"flex flex-wrap p-5 text-2xl font-bold text-black/20 md:p-8 md:text-3xl lg:p-10 lg:text-4xl xl:text-5xl dark:text-white/20\"\n            >\n               {words.map((word, i) => {\n                  const start = i / words.length\n                  const end = start + 1 / words.length\n                  return (\n                     <Word key={i} progress={scrollYProgress} range={[start, end]}>\n                        {word}\n                     </Word>\n                  )\n               })}\n            </p>\n         </div>\n      </div>\n   )\n}\n\ninterface WordProps {\n   children: ReactNode\n   progress: any\n   range: [number, number]\n}\n\nconst Word: FC<WordProps> = ({ children, progress, range }) => {\n   const opacity = useTransform(progress, range, [0, 1])\n   return (\n      <span className=\"xl:lg-3 relative mx-1 lg:mx-2.5\">\n         <span className=\"absolute opacity-30\">{children}</span>\n         <motion.span style={{ opacity }} className=\"text-black dark:text-white\">\n            {children}\n         </motion.span>\n      </span>\n   )\n}\n\nexport default TextRevealByWord\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion, useScroll, useTransform } from \"framer-motion\"\nimport type { FC, ReactNode } from \"react\"\nimport { useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface TextRevealByWordProps {\n   text: string\n   className?: string\n}\n\nexport const TextRevealByWord: FC<TextRevealByWordProps> = ({\n   text,\n   className,\n}) => {\n   const targetRef = useRef<HTMLDivElement | null>(null)\n\n   const { scrollYProgress } = useScroll({\n      target: targetRef,\n   })\n   const words = text.split(\" \")\n\n   return (\n      <div ref={targetRef} className={ny(\"relative z-0 h-[200vh]\", className)}>\n         <div className=\"sticky top-0 mx-auto flex h-1/2 max-w-4xl items-center bg-transparent px-4 py-20\">\n            <p\n               ref={targetRef}\n               className=\"flex flex-wrap p-5 text-2xl font-bold text-black/20 md:p-8 md:text-3xl lg:p-10 lg:text-4xl xl:text-5xl dark:text-white/20\"\n            >\n               {words.map((word, i) => {\n                  const start = i / words.length\n                  const end = start + 1 / words.length\n                  return (\n                     <Word\n                        key={i}\n                        progress={scrollYProgress}\n                        range={[start, end]}\n                     >\n                        {word}\n                     </Word>\n                  )\n               })}\n            </p>\n         </div>\n      </div>\n   )\n}\n\ninterface WordProps {\n   children: ReactNode\n   progress: any\n   range: [number, number]\n}\n\nconst Word: FC<WordProps> = ({ children, progress, range }) => {\n   const opacity = useTransform(progress, range, [0, 1])\n   return (\n      <span className=\"xl:lg-3 relative mx-1 lg:mx-2.5\">\n         <span className=\"absolute opacity-30\">{children}</span>\n         <motion.span\n            style={{ opacity }}\n            className=\"text-black dark:text-white\"\n         >\n            {children}\n         </motion.span>\n      </span>\n   )\n}\n\nexport default TextRevealByWord\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/textarea-demo.json b/apps/web/public/r/styles/default/textarea-demo.json
index 6286b64f..5b8f9c15 100644
--- a/apps/web/public/r/styles/default/textarea-demo.json
+++ b/apps/web/public/r/styles/default/textarea-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/textarea-demo.tsx",
-      "content": "import { Textarea } from '~/registry/default/ui/textarea'\n\nexport default function TextareaDemo() {\n   return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "path": "examples/textarea-demo.tsx",
+      "content": "import { Textarea } from \"~/registry/default/ui/textarea\"\n\nexport default function TextareaDemo() {\n   return <Textarea placeholder=\"Type your message here.\" />\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/textarea-disabled.json b/apps/web/public/r/styles/default/textarea-disabled.json
index 78325ced..21d88292 100644
--- a/apps/web/public/r/styles/default/textarea-disabled.json
+++ b/apps/web/public/r/styles/default/textarea-disabled.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/textarea-disabled.tsx",
-      "content": "import { Textarea } from '~/registry/default/ui/textarea'\n\nexport default function TextareaDisabled() {\n   return <Textarea placeholder=\"Type your message here.\" disabled />\n}\n",
+      "path": "examples/textarea-disabled.tsx",
+      "content": "import { Textarea } from \"~/registry/default/ui/textarea\"\n\nexport default function TextareaDisabled() {\n   return <Textarea placeholder=\"Type your message here.\" disabled />\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/textarea-form.json b/apps/web/public/r/styles/default/textarea-form.json
index a358fd45..8a00383f 100644
--- a/apps/web/public/r/styles/default/textarea-form.json
+++ b/apps/web/public/r/styles/default/textarea-form.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/textarea-form.tsx",
-      "content": "'use client'\n\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport { Textarea } from '~/registry/default/ui/textarea'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst FormSchema = z.object({\n   bio: z\n      .string()\n      .min(10, {\n         message: 'Bio must be at least 10 characters.',\n      })\n      .max(160, {\n         message: 'Bio must not be longer than 30 characters.',\n      }),\n})\n\nexport default function TextareaForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"bio\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Bio</FormLabel>\n                     <FormControl>\n                        <Textarea\n                           placeholder=\"Tell us a little bit about yourself\"\n                           className=\"resize-none\"\n                           {...field}\n                        />\n                     </FormControl>\n                     <FormDescription>\n                        You can\n                        {' '}\n                        <span>~mention</span>\n                        {' '}\n                        other users and organizations.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "path": "examples/textarea-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport { Textarea } from \"~/registry/default/ui/textarea\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\n\nconst FormSchema = z.object({\n   bio: z\n      .string()\n      .min(10, {\n         message: \"Bio must be at least 10 characters.\",\n      })\n      .max(160, {\n         message: \"Bio must not be longer than 30 characters.\",\n      }),\n})\n\nexport default function TextareaForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"bio\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Bio</FormLabel>\n                     <FormControl>\n                        <Textarea\n                           placeholder=\"Tell us a little bit about yourself\"\n                           className=\"resize-none\"\n                           {...field}\n                        />\n                     </FormControl>\n                     <FormDescription>\n                        You can <span>~mention</span> other users and\n                        organizations.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/textarea-with-button.json b/apps/web/public/r/styles/default/textarea-with-button.json
index e6ab705b..a8834e4c 100644
--- a/apps/web/public/r/styles/default/textarea-with-button.json
+++ b/apps/web/public/r/styles/default/textarea-with-button.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea-with-button",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/textarea-with-button.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport { Textarea } from '~/registry/default/ui/textarea'\n\nexport default function TextareaWithButton() {\n   return (\n      <div className=\"grid w-full gap-2\">\n         <Textarea placeholder=\"Type your message here.\" />\n         <Button>Send message</Button>\n      </div>\n   )\n}\n",
+      "path": "examples/textarea-with-button.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport { Textarea } from \"~/registry/default/ui/textarea\"\n\nexport default function TextareaWithButton() {\n   return (\n      <div className=\"grid w-full gap-2\">\n         <Textarea placeholder=\"Type your message here.\" />\n         <Button>Send message</Button>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/textarea-with-label.json b/apps/web/public/r/styles/default/textarea-with-label.json
index ffad41e1..b3c02e14 100644
--- a/apps/web/public/r/styles/default/textarea-with-label.json
+++ b/apps/web/public/r/styles/default/textarea-with-label.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea-with-label",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/textarea-with-label.tsx",
-      "content": "import { Label } from '~/registry/default/ui/label'\nimport { Textarea } from '~/registry/default/ui/textarea'\n\nexport default function TextareaWithLabel() {\n   return (\n      <div className=\"grid w-full gap-1.5\">\n         <Label htmlFor=\"message\">Your message</Label>\n         <Textarea placeholder=\"Type your message here.\" id=\"message\" />\n      </div>\n   )\n}\n",
+      "path": "examples/textarea-with-label.tsx",
+      "content": "import { Label } from \"~/registry/default/ui/label\"\nimport { Textarea } from \"~/registry/default/ui/textarea\"\n\nexport default function TextareaWithLabel() {\n   return (\n      <div className=\"grid w-full gap-1.5\">\n         <Label htmlFor=\"message\">Your message</Label>\n         <Textarea placeholder=\"Type your message here.\" id=\"message\" />\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/textarea-with-text.json b/apps/web/public/r/styles/default/textarea-with-text.json
index bf3b9ab6..31d99133 100644
--- a/apps/web/public/r/styles/default/textarea-with-text.json
+++ b/apps/web/public/r/styles/default/textarea-with-text.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea-with-text",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/textarea-with-text.tsx",
-      "content": "import { Label } from '~/registry/default/ui/label'\nimport { Textarea } from '~/registry/default/ui/textarea'\n\nexport default function TextareaWithText() {\n   return (\n      <div className=\"grid w-full gap-1.5\">\n         <Label htmlFor=\"message-2\">Your Message</Label>\n         <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n         <p className=\"text-muted-foreground text-sm\">\n            Your message will be copied to the support team.\n         </p>\n      </div>\n   )\n}\n",
+      "path": "examples/textarea-with-text.tsx",
+      "content": "import { Label } from \"~/registry/default/ui/label\"\nimport { Textarea } from \"~/registry/default/ui/textarea\"\n\nexport default function TextareaWithText() {\n   return (\n      <div className=\"grid w-full gap-1.5\">\n         <Label htmlFor=\"message-2\">Your Message</Label>\n         <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n         <p className=\"text-muted-foreground text-sm\">\n            Your message will be copied to the support team.\n         </p>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/textarea.json b/apps/web/public/r/styles/default/textarea.json
index 06f32f1a..793ae8c4 100644
--- a/apps/web/public/r/styles/default/textarea.json
+++ b/apps/web/public/r/styles/default/textarea.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/textarea.tsx",
-      "content": "import * as React from 'react'\n\nimport { ny } from '~/lib/utils'\n\nexport interface TextareaProps\n   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n   ({ className, ...props }, ref) => {\n      return (\n         <textarea\n            className={ny(\n               'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nTextarea.displayName = 'Textarea'\n\nexport { Textarea }\n",
-      "type": "registry:component",
+      "content": "import * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nexport interface TextareaProps\n   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n   ({ className, ...props }, ref) => {\n      return (\n         <textarea\n            className={ny(\n               \"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/theme-daylight.json b/apps/web/public/r/styles/default/theme-daylight.json
index a6f4f110..e1d36769 100644
--- a/apps/web/public/r/styles/default/theme-daylight.json
+++ b/apps/web/public/r/styles/default/theme-daylight.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "theme-daylight",
   "type": "registry:theme",
+  "author": "nyxbui (https://nyxbui.design)",
   "cssVars": {
     "light": {
       "background": "36 39% 88%",
diff --git a/apps/web/public/r/styles/default/theme-emerald.json b/apps/web/public/r/styles/default/theme-emerald.json
index daae3354..873e81aa 100644
--- a/apps/web/public/r/styles/default/theme-emerald.json
+++ b/apps/web/public/r/styles/default/theme-emerald.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "theme-emerald",
   "type": "registry:theme",
+  "author": "nyxbui (https://nyxbui.design)",
   "cssVars": {
     "light": {
       "background": "0 0% 100%",
diff --git a/apps/web/public/r/styles/default/theme-midnight.json b/apps/web/public/r/styles/default/theme-midnight.json
index af39a8a0..389550d9 100644
--- a/apps/web/public/r/styles/default/theme-midnight.json
+++ b/apps/web/public/r/styles/default/theme-midnight.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "theme-midnight",
   "type": "registry:theme",
+  "author": "nyxbui (https://nyxbui.design)",
   "cssVars": {
     "light": {
       "background": "240 5% 6%",
diff --git a/apps/web/public/r/styles/default/timeline-alternate.json b/apps/web/public/r/styles/default/timeline-alternate.json
index bf1b5e0d..9d5f37ea 100644
--- a/apps/web/public/r/styles/default/timeline-alternate.json
+++ b/apps/web/public/r/styles/default/timeline-alternate.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "timeline-alternate",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "timeline"
   ],
   "files": [
     {
-      "path": "example/timeline-alternate.tsx",
-      "content": "import React from 'react'\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from '~/registry/default/ui/timeline'\n\nexport default function TimelineAlternate() {\n   return (\n      <Timeline positions=\"center\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software project\n               thoroughly. This involves defining the project scope, setting clear\n               objectives, and identifying the target audience. Additionally,\n               creating a timeline and allocating resources appropriately will\n               contribute to a successful development process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that outlines\n               the structure, user interface, and functionality of your application.\n               Consider user experience (UX) principles, wireframing, and prototyping\n               to ensure an intuitive and visually appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual code.\n               Choose a programming language and framework that aligns with your\n               project requirements. Follow best practices, such as modular and\n               reusable code, to enhance maintainability and scalability. Regularly\n               test your code to identify and fix any bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and reliability of\n               your software. Implement different testing methodologies, including\n               unit testing, integration testing, and user acceptance testing. This\n               helps identify and rectify any issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to deploy\n               it. Consider the deployment environment, whether it's on-premises or\n               in the cloud. Ensure proper documentation and provide clear\n               instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading>Done!</TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/timeline-alternate.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"~/registry/default/ui/timeline\"\n\nexport default function TimelineAlternate() {\n   return (\n      <Timeline positions=\"center\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading>Done!</TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/timeline-demo.json b/apps/web/public/r/styles/default/timeline-demo.json
index 0c901051..537e1839 100644
--- a/apps/web/public/r/styles/default/timeline-demo.json
+++ b/apps/web/public/r/styles/default/timeline-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "timeline-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "timeline"
   ],
   "files": [
     {
-      "path": "example/timeline-demo.tsx",
-      "content": "import React from 'react'\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from '~/registry/default/ui/timeline'\n\nexport default function TimelineDemo() {\n   return (\n      <Timeline>\n         <TimelineItem status=\"done\">\n            <TimelineHeading>Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Before diving into coding, it is crucial to plan your software project\n               thoroughly. This involves defining the project scope, setting clear\n               objectives, and identifying the target audience. Additionally,\n               creating a timeline and allocating resources appropriately will\n               contribute to a successful development process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that outlines\n               the structure, user interface, and functionality of your application.\n               Consider user experience (UX) principles, wireframing, and prototyping\n               to ensure an intuitive and visually appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading>Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent>\n               The coding phase involves translating your design into actual code.\n               Choose a programming language and framework that aligns with your\n               project requirements. Follow best practices, such as modular and\n               reusable code, to enhance maintainability and scalability. Regularly\n               test your code to identify and fix any bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and reliability of\n               your software. Implement different testing methodologies, including\n               unit testing, integration testing, and user acceptance testing. This\n               helps identify and rectify any issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Once your software has passed rigorous testing, it's time to deploy\n               it. Consider the deployment environment, whether it's on-premises or\n               in the cloud. Ensure proper documentation and provide clear\n               instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Done!</TimelineHeading>\n            <TimelineDot />\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/timeline-demo.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"~/registry/default/ui/timeline\"\n\nexport default function TimelineDemo() {\n   return (\n      <Timeline>\n         <TimelineItem status=\"done\">\n            <TimelineHeading>Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading>Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent>\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Done!</TimelineHeading>\n            <TimelineDot />\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/timeline-labels.json b/apps/web/public/r/styles/default/timeline-labels.json
index d607fee9..01667cb2 100644
--- a/apps/web/public/r/styles/default/timeline-labels.json
+++ b/apps/web/public/r/styles/default/timeline-labels.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "timeline-labels",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "timeline"
   ],
   "files": [
     {
-      "path": "example/timeline-labels.tsx",
-      "content": "import React from 'react'\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from '~/registry/default/ui/timeline'\n\nexport default function TimelineAlternate() {\n   return (\n      <Timeline positions=\"center\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Done (05/04/2024)\n            </TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software project\n               thoroughly. This involves defining the project scope, setting clear\n               objectives, and identifying the target audience. Additionally,\n               creating a timeline and allocating resources appropriately will\n               contribute to a successful development process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Failed (05/04/2024)\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that outlines\n               the structure, user interface, and functionality of your application.\n               Consider user experience (UX) principles, wireframing, and prototyping\n               to ensure an intuitive and visually appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Current step\n            </TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual code.\n               Choose a programming language and framework that aligns with your\n               project requirements. Follow best practices, such as modular and\n               reusable code, to enhance maintainability and scalability. Regularly\n               test your code to identify and fix any bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Next step\n            </TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and reliability of\n               your software. Implement different testing methodologies, including\n               unit testing, integration testing, and user acceptance testing. This\n               helps identify and rectify any issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Deadline (05/10/2024)\n            </TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to deploy\n               it. Consider the deployment environment, whether it's on-premises or\n               in the cloud. Ensure proper documentation and provide clear\n               instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading>Done!</TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Here everything ends\n            </TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/timeline-labels.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"~/registry/default/ui/timeline\"\n\nexport default function TimelineAlternate() {\n   return (\n      <Timeline positions=\"center\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Done (05/04/2024)\n            </TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Failed (05/04/2024)\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Current step\n            </TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Next step\n            </TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Deadline (05/10/2024)\n            </TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading>Done!</TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Here everything ends\n            </TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/timeline-right.json b/apps/web/public/r/styles/default/timeline-right.json
index e5936561..6a22d584 100644
--- a/apps/web/public/r/styles/default/timeline-right.json
+++ b/apps/web/public/r/styles/default/timeline-right.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "timeline-right",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "timeline"
   ],
   "files": [
     {
-      "path": "example/timeline-right.tsx",
-      "content": "import React from 'react'\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from '~/registry/default/ui/timeline'\n\nexport default function TimelineRight() {\n   return (\n      <Timeline positions=\"right\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software project\n               thoroughly. This involves defining the project scope, setting clear\n               objectives, and identifying the target audience. Additionally,\n               creating a timeline and allocating resources appropriately will\n               contribute to a successful development process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Designing your software involves creating a blueprint that outlines\n               the structure, user interface, and functionality of your application.\n               Consider user experience (UX) principles, wireframing, and prototyping\n               to ensure an intuitive and visually appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual code.\n               Choose a programming language and framework that aligns with your\n               project requirements. Follow best practices, such as modular and\n               reusable code, to enhance maintainability and scalability. Regularly\n               test your code to identify and fix any bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Thorough testing is essential to ensure the quality and reliability of\n               your software. Implement different testing methodologies, including\n               unit testing, integration testing, and user acceptance testing. This\n               helps identify and rectify any issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to deploy\n               it. Consider the deployment environment, whether it's on-premises or\n               in the cloud. Ensure proper documentation and provide clear\n               instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading side=\"left\">Done!</TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/timeline-right.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"~/registry/default/ui/timeline\"\n\nexport default function TimelineRight() {\n   return (\n      <Timeline positions=\"right\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading side=\"left\">Done!</TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/timeline.json b/apps/web/public/r/styles/default/timeline.json
index 6b8afd56..15cc1feb 100644
--- a/apps/web/public/r/styles/default/timeline.json
+++ b/apps/web/public/r/styles/default/timeline.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "timeline",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "lucide-react"
   ],
   "files": [
     {
       "path": "ui/timeline.tsx",
-      "content": "import React from 'react'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\nimport { Check, Circle, X } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst timelineVariants = cva('grid', {\n   variants: {\n      positions: {\n         left: '[&>li]:grid-cols-[0_min-content_1fr]',\n         right: '[&>li]:grid-cols-[1fr_min-content]',\n         center: '[&>li]:grid-cols-[1fr_min-content_1fr]',\n      },\n   },\n   defaultVariants: {\n      positions: 'left',\n   },\n})\n\ninterface TimelineProps\n   extends React.HTMLAttributes<HTMLUListElement>,\n   VariantProps<typeof timelineVariants> {}\n\nconst Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(\n   ({ children, className, positions, ...props }, ref) => {\n      return (\n         <ul\n            className={ny(timelineVariants({ positions }), className)}\n            ref={ref}\n            {...props}\n         >\n            {children}\n         </ul>\n      )\n   },\n)\nTimeline.displayName = 'Timeline'\n\nconst timelineItemVariants = cva('grid items-center gap-x-2', {\n   variants: {\n      status: {\n         done: 'text-primary',\n         default: 'text-muted-foreground',\n      },\n   },\n   defaultVariants: {\n      status: 'default',\n   },\n})\n\ninterface TimelineItemProps\n   extends React.HTMLAttributes<HTMLLIElement>,\n   VariantProps<typeof timelineItemVariants> {}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n   ({ className, status, ...props }, ref) => (\n      <li\n         className={ny(timelineItemVariants({ status }), className)}\n         ref={ref}\n         {...props}\n      />\n   ),\n)\nTimelineItem.displayName = 'TimelineItem'\n\nconst timelineDotVariants = cva(\n   'col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current',\n   {\n      variants: {\n         status: {\n            default: '[&>*]:hidden',\n            current:\n          '[&>*:not(.lucide-circle)]:hidden [&>.lucide-circle]:fill-current [&>.lucide-circle]:text-current',\n            done: 'bg-primary [&>*:not(.lucide-check)]:hidden [&>.lucide-check]:text-background',\n            error:\n          'border-destructive bg-destructive [&>*:not(.lucide-x)]:hidden [&>.lucide-x]:text-background',\n            custom: '[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block',\n         },\n      },\n      defaultVariants: {\n         status: 'default',\n      },\n   },\n)\n\ninterface TimelineDotProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n   VariantProps<typeof timelineDotVariants> {\n   customIcon?: React.ReactNode\n}\n\nconst TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(\n   ({ className, status, customIcon, ...props }, ref) => (\n      <div\n         role=\"status\"\n         className={ny('timeline-dot', timelineDotVariants({ status }), className)}\n         ref={ref}\n         {...props}\n      >\n         <Circle className=\"size-2.5\" />\n         <Check className=\"size-3\" />\n         <X className=\"size-3\" />\n         {customIcon}\n      </div>\n   ),\n)\nTimelineDot.displayName = 'TimelineDot'\n\nconst timelineContentVariants = cva(\n   'row-start-2 row-end-2 pb-8 text-muted-foreground',\n   {\n      variants: {\n         side: {\n            right: 'col-start-3 col-end-4 mr-auto text-left',\n            left: 'col-start-1 col-end-2 ml-auto text-right',\n         },\n      },\n      defaultVariants: {\n         side: 'right',\n      },\n   },\n)\n\ninterface TimelineContentProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n   VariantProps<typeof timelineContentVariants> {}\n\nconst TimelineContent = React.forwardRef<HTMLDivElement, TimelineContentProps>(\n   ({ className, side, ...props }, ref) => (\n      <div\n         className={ny(timelineContentVariants({ side }), className)}\n         ref={ref}\n         {...props}\n      />\n   ),\n)\nTimelineContent.displayName = 'TimelineContent'\n\nconst timelineHeadingVariants = cva(\n   'row-start-1 row-end-1 line-clamp-1 max-w-full truncate',\n   {\n      variants: {\n         side: {\n            right: 'col-start-3 col-end-4 mr-auto text-left',\n            left: 'col-start-1 col-end-2 ml-auto text-right',\n         },\n         variant: {\n            primary: 'text-base font-medium text-primary',\n            secondary: 'text-sm font-light text-muted-foreground',\n         },\n      },\n      defaultVariants: {\n         side: 'right',\n         variant: 'primary',\n      },\n   },\n)\n\ninterface TimelineHeadingProps\n   extends React.HTMLAttributes<HTMLParagraphElement>,\n   VariantProps<typeof timelineHeadingVariants> {}\n\nconst TimelineHeading = React.forwardRef<\n   HTMLParagraphElement,\n   TimelineHeadingProps\n>(({ className, side, variant, ...props }, ref) => (\n   <p\n      role=\"heading\"\n      aria-level={variant === 'primary' ? 2 : 3}\n      className={ny(timelineHeadingVariants({ side, variant }), className)}\n      ref={ref}\n      {...props}\n   />\n))\nTimelineHeading.displayName = 'TimelineHeading'\n\ninterface TimelineLineProps extends React.HTMLAttributes<HTMLHRElement> {\n   done?: boolean\n}\n\nconst TimelineLine = React.forwardRef<HTMLHRElement, TimelineLineProps>(\n   ({ className, done = false, ...props }, ref) => {\n      return (\n         <hr\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            className={ny(\n               'col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full',\n               done ? 'bg-primary' : 'bg-muted',\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nTimelineLine.displayName = 'TimelineLine'\n\nexport {\n   Timeline,\n   TimelineDot,\n   TimelineItem,\n   TimelineContent,\n   TimelineHeading,\n   TimelineLine,\n}\n",
-      "type": "registry:component",
+      "content": "import type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport { Check, Circle, X } from \"lucide-react\"\nimport React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst timelineVariants = cva(\"grid\", {\n   variants: {\n      positions: {\n         left: \"[&>li]:grid-cols-[0_min-content_1fr]\",\n         right: \"[&>li]:grid-cols-[1fr_min-content]\",\n         center: \"[&>li]:grid-cols-[1fr_min-content_1fr]\",\n      },\n   },\n   defaultVariants: {\n      positions: \"left\",\n   },\n})\n\ninterface TimelineProps\n   extends React.HTMLAttributes<HTMLUListElement>,\n      VariantProps<typeof timelineVariants> {}\n\nconst Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(\n   ({ children, className, positions, ...props }, ref) => {\n      return (\n         <ul\n            className={ny(timelineVariants({ positions }), className)}\n            ref={ref}\n            {...props}\n         >\n            {children}\n         </ul>\n      )\n   },\n)\nTimeline.displayName = \"Timeline\"\n\nconst timelineItemVariants = cva(\"grid items-center gap-x-2\", {\n   variants: {\n      status: {\n         done: \"text-primary\",\n         default: \"text-muted-foreground\",\n      },\n   },\n   defaultVariants: {\n      status: \"default\",\n   },\n})\n\ninterface TimelineItemProps\n   extends React.HTMLAttributes<HTMLLIElement>,\n      VariantProps<typeof timelineItemVariants> {}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n   ({ className, status, ...props }, ref) => (\n      <li\n         className={ny(timelineItemVariants({ status }), className)}\n         ref={ref}\n         {...props}\n      />\n   ),\n)\nTimelineItem.displayName = \"TimelineItem\"\n\nconst timelineDotVariants = cva(\n   \"col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current\",\n   {\n      variants: {\n         status: {\n            default: \"[&>*]:hidden\",\n            current:\n               \"[&>*:not(.lucide-circle)]:hidden [&>.lucide-circle]:fill-current [&>.lucide-circle]:text-current\",\n            done: \"bg-primary [&>*:not(.lucide-check)]:hidden [&>.lucide-check]:text-background\",\n            error: \"border-destructive bg-destructive [&>*:not(.lucide-x)]:hidden [&>.lucide-x]:text-background\",\n            custom: \"[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block\",\n         },\n      },\n      defaultVariants: {\n         status: \"default\",\n      },\n   },\n)\n\ninterface TimelineDotProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof timelineDotVariants> {\n   customIcon?: React.ReactNode\n}\n\nconst TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(\n   ({ className, status, customIcon, ...props }, ref) => (\n      <div\n         role=\"status\"\n         className={ny(\n            \"timeline-dot\",\n            timelineDotVariants({ status }),\n            className,\n         )}\n         ref={ref}\n         {...props}\n      >\n         <Circle className=\"size-2.5\" />\n         <Check className=\"size-3\" />\n         <X className=\"size-3\" />\n         {customIcon}\n      </div>\n   ),\n)\nTimelineDot.displayName = \"TimelineDot\"\n\nconst timelineContentVariants = cva(\n   \"row-start-2 row-end-2 pb-8 text-muted-foreground\",\n   {\n      variants: {\n         side: {\n            right: \"col-start-3 col-end-4 mr-auto text-left\",\n            left: \"col-start-1 col-end-2 ml-auto text-right\",\n         },\n      },\n      defaultVariants: {\n         side: \"right\",\n      },\n   },\n)\n\ninterface TimelineContentProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof timelineContentVariants> {}\n\nconst TimelineContent = React.forwardRef<HTMLDivElement, TimelineContentProps>(\n   ({ className, side, ...props }, ref) => (\n      <div\n         className={ny(timelineContentVariants({ side }), className)}\n         ref={ref}\n         {...props}\n      />\n   ),\n)\nTimelineContent.displayName = \"TimelineContent\"\n\nconst timelineHeadingVariants = cva(\n   \"row-start-1 row-end-1 line-clamp-1 max-w-full truncate\",\n   {\n      variants: {\n         side: {\n            right: \"col-start-3 col-end-4 mr-auto text-left\",\n            left: \"col-start-1 col-end-2 ml-auto text-right\",\n         },\n         variant: {\n            primary: \"text-base font-medium text-primary\",\n            secondary: \"text-sm font-light text-muted-foreground\",\n         },\n      },\n      defaultVariants: {\n         side: \"right\",\n         variant: \"primary\",\n      },\n   },\n)\n\ninterface TimelineHeadingProps\n   extends React.HTMLAttributes<HTMLParagraphElement>,\n      VariantProps<typeof timelineHeadingVariants> {}\n\nconst TimelineHeading = React.forwardRef<\n   HTMLParagraphElement,\n   TimelineHeadingProps\n>(({ className, side, variant, ...props }, ref) => (\n   <p\n      role=\"heading\"\n      aria-level={variant === \"primary\" ? 2 : 3}\n      className={ny(timelineHeadingVariants({ side, variant }), className)}\n      ref={ref}\n      {...props}\n   />\n))\nTimelineHeading.displayName = \"TimelineHeading\"\n\ninterface TimelineLineProps extends React.HTMLAttributes<HTMLHRElement> {\n   done?: boolean\n}\n\nconst TimelineLine = React.forwardRef<HTMLHRElement, TimelineLineProps>(\n   ({ className, done = false, ...props }, ref) => {\n      return (\n         <hr\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            className={ny(\n               \"col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full\",\n               done ? \"bg-primary\" : \"bg-muted\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nTimelineLine.displayName = \"TimelineLine\"\n\nexport {\n   Timeline,\n   TimelineDot,\n   TimelineItem,\n   TimelineContent,\n   TimelineHeading,\n   TimelineLine,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/toast-demo.json b/apps/web/public/r/styles/default/toast-demo.json
index f83beb04..044a5752 100644
--- a/apps/web/public/r/styles/default/toast-demo.json
+++ b/apps/web/public/r/styles/default/toast-demo.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toast-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "toast"
   ],
   "files": [
     {
-      "path": "example/toast-demo.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/default/ui/button'\nimport { ToastAction } from '~/registry/default/ui/toast'\nimport { useToast } from '~/registry/default/ui/use-toast'\n\nexport default function ToastDemo() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: 'Scheduled: Catch up ',\n               description: 'Friday, February 10, 2023 at 5:57 PM',\n               action: (\n                  <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n               ),\n            })\n         }}\n      >\n         Add to calendar\n      </Button>\n   )\n}\n",
+      "path": "examples/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport { ToastAction } from \"~/registry/default/ui/toast\"\nimport { useToast } from \"~/registry/default/ui/use-toast\"\n\nexport default function ToastDemo() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Scheduled: Catch up \",\n               description: \"Friday, February 10, 2023 at 5:57 PM\",\n               action: (\n                  <ToastAction altText=\"Goto schedule to undo\">\n                     Undo\n                  </ToastAction>\n               ),\n            })\n         }}\n      >\n         Add to calendar\n      </Button>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toast-destructive.json b/apps/web/public/r/styles/default/toast-destructive.json
index 9c6a7e6c..0bf691bb 100644
--- a/apps/web/public/r/styles/default/toast-destructive.json
+++ b/apps/web/public/r/styles/default/toast-destructive.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toast-destructive",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "toast"
   ],
   "files": [
     {
-      "path": "example/toast-destructive.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/default/ui/button'\nimport { ToastAction } from '~/registry/default/ui/toast'\nimport { useToast } from '~/registry/default/ui/use-toast'\n\nexport default function ToastDestructive() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               variant: 'destructive',\n               title: 'Uh oh! Something went wrong.',\n               description: 'There was a problem with your request.',\n               action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "path": "examples/toast-destructive.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport { ToastAction } from \"~/registry/default/ui/toast\"\nimport { useToast } from \"~/registry/default/ui/use-toast\"\n\nexport default function ToastDestructive() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               variant: \"destructive\",\n               title: \"Uh oh! Something went wrong.\",\n               description: \"There was a problem with your request.\",\n               action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toast-simple.json b/apps/web/public/r/styles/default/toast-simple.json
index b4171257..372389c3 100644
--- a/apps/web/public/r/styles/default/toast-simple.json
+++ b/apps/web/public/r/styles/default/toast-simple.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toast-simple",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "toast"
   ],
   "files": [
     {
-      "path": "example/toast-simple.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/default/ui/button'\nimport { useToast } from '~/registry/default/ui/use-toast'\n\nexport default function ToastSimple() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               description: 'Your message has been sent.',\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "path": "examples/toast-simple.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport { useToast } from \"~/registry/default/ui/use-toast\"\n\nexport default function ToastSimple() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               description: \"Your message has been sent.\",\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toast-with-action.json b/apps/web/public/r/styles/default/toast-with-action.json
index 43d15964..917e773c 100644
--- a/apps/web/public/r/styles/default/toast-with-action.json
+++ b/apps/web/public/r/styles/default/toast-with-action.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toast-with-action",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "toast"
   ],
   "files": [
     {
-      "path": "example/toast-with-action.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/default/ui/button'\nimport { ToastAction } from '~/registry/default/ui/toast'\nimport { useToast } from '~/registry/default/ui/use-toast'\n\nexport default function ToastWithAction() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: 'Uh oh! Something went wrong.',\n               description: 'There was a problem with your request.',\n               action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "path": "examples/toast-with-action.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport { ToastAction } from \"~/registry/default/ui/toast\"\nimport { useToast } from \"~/registry/default/ui/use-toast\"\n\nexport default function ToastWithAction() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Uh oh! Something went wrong.\",\n               description: \"There was a problem with your request.\",\n               action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toast-with-title.json b/apps/web/public/r/styles/default/toast-with-title.json
index caa02f77..6ce05e31 100644
--- a/apps/web/public/r/styles/default/toast-with-title.json
+++ b/apps/web/public/r/styles/default/toast-with-title.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toast-with-title",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "toast"
   ],
   "files": [
     {
-      "path": "example/toast-with-title.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/default/ui/button'\nimport { useToast } from '~/registry/default/ui/use-toast'\n\nexport default function ToastWithTitle() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: 'Uh oh! Something went wrong.',\n               description: 'There was a problem with your request.',\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "path": "examples/toast-with-title.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport { useToast } from \"~/registry/default/ui/use-toast\"\n\nexport default function ToastWithTitle() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Uh oh! Something went wrong.\",\n               description: \"There was a problem with your request.\",\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toast.json b/apps/web/public/r/styles/default/toast.json
index 96dce548..a2d4f574 100644
--- a/apps/web/public/r/styles/default/toast.json
+++ b/apps/web/public/r/styles/default/toast.json
@@ -1,25 +1,27 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toast",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-toast"
   ],
   "files": [
     {
       "path": "ui/toast.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as ToastPrimitives from '@radix-ui/react-toast'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { X } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Viewport>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Viewport\n      ref={ref}\n      className={ny(\n         'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',\n         className,\n      )}\n      {...props}\n   />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n   'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n   {\n      variants: {\n         variant: {\n            default: 'border bg-background text-foreground',\n            destructive:\n          'destructive group border-destructive bg-destructive text-destructive-foreground',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n      },\n   },\n)\n\nconst Toast = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Root>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n   VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n   return (\n      <ToastPrimitives.Root\n         ref={ref}\n         className={ny(toastVariants({ variant }), className)}\n         {...props}\n      />\n   )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Action>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Action\n      ref={ref}\n      className={ny(\n         'ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n         className,\n      )}\n      {...props}\n   />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Close>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Close\n      ref={ref}\n      className={ny(\n         'text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',\n         className,\n      )}\n      toast-close=\"\"\n      {...props}\n   >\n      <X className=\"size-4\" />\n   </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Title>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Title\n      ref={ref}\n      className={ny('text-sm font-semibold', className)}\n      {...props}\n   />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Description>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Description\n      ref={ref}\n      className={ny('text-sm opacity-90', className)}\n      {...props}\n   />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n   type ToastProps,\n   type ToastActionElement,\n   ToastProvider,\n   ToastViewport,\n   Toast,\n   ToastTitle,\n   ToastDescription,\n   ToastClose,\n   ToastAction,\n}\n",
+      "content": "\"use client\"\n\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Viewport>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Viewport\n      ref={ref}\n      className={ny(\n         \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n         className,\n      )}\n      {...props}\n   />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n   \"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n   {\n      variants: {\n         variant: {\n            default: \"border bg-background text-foreground\",\n            destructive:\n               \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nconst Toast = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Root>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n      VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n   return (\n      <ToastPrimitives.Root\n         ref={ref}\n         className={ny(toastVariants({ variant }), className)}\n         {...props}\n      />\n   )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Action>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Action\n      ref={ref}\n      className={ny(\n         \"ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n         className,\n      )}\n      {...props}\n   />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Close>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Close\n      ref={ref}\n      className={ny(\n         \"text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\n         className,\n      )}\n      toast-close=\"\"\n      {...props}\n   >\n      <X className=\"size-4\" />\n   </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Title>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Title\n      ref={ref}\n      className={ny(\"text-sm font-semibold\", className)}\n      {...props}\n   />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Description>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Description\n      ref={ref}\n      className={ny(\"text-sm opacity-90\", className)}\n      {...props}\n   />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n   type ToastProps,\n   type ToastActionElement,\n   ToastProvider,\n   ToastViewport,\n   Toast,\n   ToastTitle,\n   ToastDescription,\n   ToastClose,\n   ToastAction,\n}\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "hooks/use-toast.ts",
-      "content": "'use client'\n\n// Inspired by react-hot-toast library\nimport * as React from 'react'\n\nimport type {\n   ToastActionElement,\n   ToastProps,\n} from '~/registry/default/ui/toast'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n   id: string\n   title?: React.ReactNode\n   description?: React.ReactNode\n   action?: ToastActionElement\n}\n\nconst actionTypes = {\n   ADD_TOAST: 'ADD_TOAST',\n   UPDATE_TOAST: 'UPDATE_TOAST',\n   DISMISS_TOAST: 'DISMISS_TOAST',\n   REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n   count = (count + 1) % Number.MAX_SAFE_INTEGER\n   return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n   | {\n      type: ActionType['ADD_TOAST']\n      toast: ToasterToast\n   }\n   | {\n      type: ActionType['UPDATE_TOAST']\n      toast: Partial<ToasterToast>\n   }\n   | {\n      type: ActionType['DISMISS_TOAST']\n      toastId?: ToasterToast['id']\n   }\n   | {\n      type: ActionType['REMOVE_TOAST']\n      toastId?: ToasterToast['id']\n   }\n\ninterface State {\n   toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n   if (toastTimeouts.has(toastId)) {\n      return\n   }\n\n   const timeout = setTimeout(() => {\n      toastTimeouts.delete(toastId)\n      dispatch({\n         type: 'REMOVE_TOAST',\n         toastId,\n      })\n   }, TOAST_REMOVE_DELAY)\n\n   toastTimeouts.set(toastId, timeout)\n}\n\nexport function reducer(state: State, action: Action): State {\n   switch (action.type) {\n      case 'ADD_TOAST':\n         return {\n            ...state,\n            toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n         }\n\n      case 'UPDATE_TOAST':\n         return {\n            ...state,\n            toasts: state.toasts.map(t =>\n               t.id === action.toast.id ? { ...t, ...action.toast } : t,\n            ),\n         }\n\n      case 'DISMISS_TOAST': {\n         const { toastId } = action\n\n         // ! Side effects ! - This could be extracted into a dismissToast() action,\n         // but I'll keep it here for simplicity\n         if (toastId) {\n            addToRemoveQueue(toastId)\n         }\n         else {\n            state.toasts.forEach((toast) => {\n               addToRemoveQueue(toast.id)\n            })\n         }\n\n         return {\n            ...state,\n            toasts: state.toasts.map(t =>\n               t.id === toastId || toastId === undefined\n                  ? {\n                        ...t,\n                        open: false,\n                     }\n                  : t,\n            ),\n         }\n      }\n      case 'REMOVE_TOAST':\n         if (action.toastId === undefined) {\n            return {\n               ...state,\n               toasts: [],\n            }\n         }\n         return {\n            ...state,\n            toasts: state.toasts.filter(t => t.id !== action.toastId),\n         }\n   }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n   memoryState = reducer(memoryState, action)\n   listeners.forEach((listener) => {\n      listener(memoryState)\n   })\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast({ ...props }: Toast) {\n   const id = genId()\n\n   const update = (props: ToasterToast) =>\n      dispatch({\n         type: 'UPDATE_TOAST',\n         toast: { ...props, id },\n      })\n   const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })\n\n   dispatch({\n      type: 'ADD_TOAST',\n      toast: {\n         ...props,\n         id,\n         open: true,\n         onOpenChange: (open) => {\n            if (!open)\n               dismiss()\n         },\n      },\n   })\n\n   return {\n      id,\n      dismiss,\n      update,\n   }\n}\n\nfunction useToast() {\n   const [state, setState] = React.useState<State>(memoryState)\n\n   React.useEffect(() => {\n      listeners.push(setState)\n      return () => {\n         const index = listeners.indexOf(setState)\n         if (index > -1) {\n            listeners.splice(index, 1)\n         }\n      }\n   }, [state])\n\n   return {\n      ...state,\n      toast,\n      dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),\n   }\n}\n\nexport { useToast, toast }\n",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type { ToastActionElement, ToastProps } from \"~/registry/default/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n   id: string\n   title?: React.ReactNode\n   description?: React.ReactNode\n   action?: ToastActionElement\n}\n\nconst actionTypes = {\n   ADD_TOAST: \"ADD_TOAST\",\n   UPDATE_TOAST: \"UPDATE_TOAST\",\n   DISMISS_TOAST: \"DISMISS_TOAST\",\n   REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n   count = (count + 1) % Number.MAX_SAFE_INTEGER\n   return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n   | {\n        type: ActionType[\"ADD_TOAST\"]\n        toast: ToasterToast\n     }\n   | {\n        type: ActionType[\"UPDATE_TOAST\"]\n        toast: Partial<ToasterToast>\n     }\n   | {\n        type: ActionType[\"DISMISS_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n   | {\n        type: ActionType[\"REMOVE_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n\ninterface State {\n   toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n   if (toastTimeouts.has(toastId)) {\n      return\n   }\n\n   const timeout = setTimeout(() => {\n      toastTimeouts.delete(toastId)\n      dispatch({\n         type: \"REMOVE_TOAST\",\n         toastId,\n      })\n   }, TOAST_REMOVE_DELAY)\n\n   toastTimeouts.set(toastId, timeout)\n}\n\nexport function reducer(state: State, action: Action): State {\n   switch (action.type) {\n      case \"ADD_TOAST\":\n         return {\n            ...state,\n            toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n         }\n\n      case \"UPDATE_TOAST\":\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === action.toast.id ? { ...t, ...action.toast } : t,\n            ),\n         }\n\n      case \"DISMISS_TOAST\": {\n         const { toastId } = action\n\n         // ! Side effects ! - This could be extracted into a dismissToast() action,\n         // but I'll keep it here for simplicity\n         if (toastId) {\n            addToRemoveQueue(toastId)\n         } else {\n            state.toasts.forEach((toast) => {\n               addToRemoveQueue(toast.id)\n            })\n         }\n\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === toastId || toastId === undefined\n                  ? {\n                       ...t,\n                       open: false,\n                    }\n                  : t,\n            ),\n         }\n      }\n      case \"REMOVE_TOAST\":\n         if (action.toastId === undefined) {\n            return {\n               ...state,\n               toasts: [],\n            }\n         }\n         return {\n            ...state,\n            toasts: state.toasts.filter((t) => t.id !== action.toastId),\n         }\n   }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n   memoryState = reducer(memoryState, action)\n   listeners.forEach((listener) => {\n      listener(memoryState)\n   })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n   const id = genId()\n\n   const update = (props: ToasterToast) =>\n      dispatch({\n         type: \"UPDATE_TOAST\",\n         toast: { ...props, id },\n      })\n   const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n   dispatch({\n      type: \"ADD_TOAST\",\n      toast: {\n         ...props,\n         id,\n         open: true,\n         onOpenChange: (open) => {\n            if (!open) dismiss()\n         },\n      },\n   })\n\n   return {\n      id,\n      dismiss,\n      update,\n   }\n}\n\nfunction useToast() {\n   const [state, setState] = React.useState<State>(memoryState)\n\n   React.useEffect(() => {\n      listeners.push(setState)\n      return () => {\n         const index = listeners.indexOf(setState)\n         if (index > -1) {\n            listeners.splice(index, 1)\n         }\n      }\n   }, [state])\n\n   return {\n      ...state,\n      toast,\n      dismiss: (toastId?: string) =>\n         dispatch({ type: \"DISMISS_TOAST\", toastId }),\n   }\n}\n\nexport { useToast, toast }\n",
       "type": "registry:hook",
       "target": ""
     },
     {
       "path": "ui/toaster.tsx",
-      "content": "'use client'\n\nimport {\n   Toast,\n   ToastClose,\n   ToastDescription,\n   ToastProvider,\n   ToastTitle,\n   ToastViewport,\n} from '~/registry/default/ui/toast'\nimport { useToast } from '~/registry/default/ui/use-toast'\n\nexport function Toaster() {\n   const { toasts } = useToast()\n\n   return (\n      <ToastProvider>\n         {toasts.map(({ id, title, description, action, ...props }) => {\n            return (\n               <Toast key={id} {...props}>\n                  <div className=\"grid gap-1\">\n                     {title && <ToastTitle>{title}</ToastTitle>}\n                     {description && (\n                        <ToastDescription>{description}</ToastDescription>\n                     )}\n                  </div>\n                  {action}\n                  <ToastClose />\n               </Toast>\n            )\n         })}\n         <ToastViewport />\n      </ToastProvider>\n   )\n}\n",
+      "content": "\"use client\"\n\nimport {\n   Toast,\n   ToastClose,\n   ToastDescription,\n   ToastProvider,\n   ToastTitle,\n   ToastViewport,\n} from \"~/registry/default/ui/toast\"\nimport { useToast } from \"~/registry/default/ui/use-toast\"\n\nexport function Toaster() {\n   const { toasts } = useToast()\n\n   return (\n      <ToastProvider>\n         {toasts.map(({ id, title, description, action, ...props }) => {\n            return (\n               <Toast key={id} {...props}>\n                  <div className=\"grid gap-1\">\n                     {title && <ToastTitle>{title}</ToastTitle>}\n                     {description && (\n                        <ToastDescription>{description}</ToastDescription>\n                     )}\n                  </div>\n                  {action}\n                  <ToastClose />\n               </Toast>\n            )\n         })}\n         <ToastViewport />\n      </ToastProvider>\n   )\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toc-active.json b/apps/web/public/r/styles/default/toc-active.json
index c130013d..9fb3547d 100644
--- a/apps/web/public/r/styles/default/toc-active.json
+++ b/apps/web/public/r/styles/default/toc-active.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toc-active",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toc-active.tsx",
-      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from '~/registry/default/ui/toc'\n\nexport default function TOCActive() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Active Item Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem indent>\n            <TableOfContentsLink isActive href=\"#second-section\">\n               Second Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/toc-active.tsx",
+      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from \"~/registry/default/ui/toc\"\n\nexport default function TOCActive() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>\n            Active Item Table of Contents\n         </TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem indent>\n            <TableOfContentsLink isActive href=\"#second-section\">\n               Second Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/toc-demo.json b/apps/web/public/r/styles/default/toc-demo.json
index 73e82acd..5754ba08 100644
--- a/apps/web/public/r/styles/default/toc-demo.json
+++ b/apps/web/public/r/styles/default/toc-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toc-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toc-demo.tsx",
-      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from '~/registry/default/ui/toc'\n\nexport default function TOCDemo() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#second-section\">\n               Second Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/toc-demo.tsx",
+      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from \"~/registry/default/ui/toc\"\n\nexport default function TOCDemo() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#second-section\">\n               Second Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/toc-nested.json b/apps/web/public/r/styles/default/toc-nested.json
index 8a3ac58d..f737d056 100644
--- a/apps/web/public/r/styles/default/toc-nested.json
+++ b/apps/web/public/r/styles/default/toc-nested.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toc-nested",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toc-nested.tsx",
-      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from '~/registry/default/ui/toc'\n\nexport default function TOCDNested() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Nested Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section-nested\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem indent>\n            <TableOfContentsList>\n               <TableOfContentsLink href=\"#first-nested-section-nested\">\n                  First Nested Section\n               </TableOfContentsLink>\n               <TableOfContentsItem indent>\n                  <TableOfContentsLink href=\"#second-nested-section-nested\">\n                     Second Nested Section\n                  </TableOfContentsLink>\n               </TableOfContentsItem>\n            </TableOfContentsList>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section-nested\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/toc-nested.tsx",
+      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from \"~/registry/default/ui/toc\"\n\nexport default function TOCDNested() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Nested Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section-nested\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem indent>\n            <TableOfContentsList>\n               <TableOfContentsLink href=\"#first-nested-section-nested\">\n                  First Nested Section\n               </TableOfContentsLink>\n               <TableOfContentsItem indent>\n                  <TableOfContentsLink href=\"#second-nested-section-nested\">\n                     Second Nested Section\n                  </TableOfContentsLink>\n               </TableOfContentsItem>\n            </TableOfContentsList>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section-nested\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/toc.json b/apps/web/public/r/styles/default/toc.json
index 775d226e..c95496d9 100644
--- a/apps/web/public/r/styles/default/toc.json
+++ b/apps/web/public/r/styles/default/toc.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toc",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/toc.tsx",
-      "content": "import * as React from 'react'\n\nimport { ny } from '~/lib/utils'\n\ninterface TableOfContentsListProps\n   extends React.ComponentPropsWithoutRef<'ul'> {\n   indent?: boolean\n}\n\nconst TableOfContentsList = React.forwardRef<\n   React.ElementRef<'ul'>,\n   TableOfContentsListProps\n>(({ className, indent, ...props }, ref) => (\n   <ul\n      ref={ref}\n      className={ny('m-0 list-none', indent && 'pl-4', className)}\n      {...props}\n   />\n))\nTableOfContentsList.displayName = 'TableOfContentsList'\n\ninterface TableOfContentsTitleProps\n   extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst TableOfContentsTitle = React.forwardRef<\n   React.ElementRef<'li'>,\n   TableOfContentsTitleProps\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={ny('mb-2 text-sm font-medium', className)}\n      {...props}\n   />\n))\nTableOfContentsTitle.displayName = 'TableOfContentsTitle'\n\ninterface TableOfContentsItemProps\n   extends React.ComponentPropsWithoutRef<'li'> {\n   indent?: boolean\n}\n\nconst TableOfContentsItem = React.forwardRef<\n   React.ElementRef<'li'>,\n   TableOfContentsItemProps\n>(({ className, indent, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={ny('mt-0 pt-2', indent && 'ml-4', className)}\n      {...props}\n   />\n))\nTableOfContentsItem.displayName = 'TableOfContentsItem'\n\ninterface TableOfContentsLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n   isActive?: boolean\n}\n\nconst TableOfContentsLink = React.forwardRef<\n   React.ElementRef<'a'>,\n   TableOfContentsLinkProps\n>(({ className, isActive, ...props }, ref) => (\n   <a\n      ref={ref}\n      className={ny(\n         'text-foreground hover:text-primary text-sm font-medium transition-colors',\n         isActive ? 'text-foreground font-medium' : 'text-muted-foreground',\n         className,\n      )}\n      {...props}\n   />\n))\nTableOfContentsLink.displayName = 'TableOfContentsLink'\n\nexport {\n   TableOfContentsList,\n   TableOfContentsTitle,\n   TableOfContentsItem,\n   TableOfContentsLink,\n}\n",
-      "type": "registry:component",
+      "content": "import * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ninterface TableOfContentsListProps\n   extends React.ComponentPropsWithoutRef<\"ul\"> {\n   indent?: boolean\n}\n\nconst TableOfContentsList = React.forwardRef<\n   React.ElementRef<\"ul\">,\n   TableOfContentsListProps\n>(({ className, indent, ...props }, ref) => (\n   <ul\n      ref={ref}\n      className={ny(\"m-0 list-none\", indent && \"pl-4\", className)}\n      {...props}\n   />\n))\nTableOfContentsList.displayName = \"TableOfContentsList\"\n\ninterface TableOfContentsTitleProps\n   extends React.ComponentPropsWithoutRef<\"li\"> {}\n\nconst TableOfContentsTitle = React.forwardRef<\n   React.ElementRef<\"li\">,\n   TableOfContentsTitleProps\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={ny(\"mb-2 text-sm font-medium\", className)}\n      {...props}\n   />\n))\nTableOfContentsTitle.displayName = \"TableOfContentsTitle\"\n\ninterface TableOfContentsItemProps\n   extends React.ComponentPropsWithoutRef<\"li\"> {\n   indent?: boolean\n}\n\nconst TableOfContentsItem = React.forwardRef<\n   React.ElementRef<\"li\">,\n   TableOfContentsItemProps\n>(({ className, indent, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={ny(\"mt-0 pt-2\", indent && \"ml-4\", className)}\n      {...props}\n   />\n))\nTableOfContentsItem.displayName = \"TableOfContentsItem\"\n\ninterface TableOfContentsLinkProps extends React.ComponentPropsWithoutRef<\"a\"> {\n   isActive?: boolean\n}\n\nconst TableOfContentsLink = React.forwardRef<\n   React.ElementRef<\"a\">,\n   TableOfContentsLinkProps\n>(({ className, isActive, ...props }, ref) => (\n   <a\n      ref={ref}\n      className={ny(\n         \"text-foreground hover:text-primary text-sm font-medium transition-colors\",\n         isActive ? \"text-foreground font-medium\" : \"text-muted-foreground\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableOfContentsLink.displayName = \"TableOfContentsLink\"\n\nexport {\n   TableOfContentsList,\n   TableOfContentsTitle,\n   TableOfContentsItem,\n   TableOfContentsLink,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/toggle-demo.json b/apps/web/public/r/styles/default/toggle-demo.json
index 9fd08991..6a97bd4a 100644
--- a/apps/web/public/r/styles/default/toggle-demo.json
+++ b/apps/web/public/r/styles/default/toggle-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-demo.tsx",
-      "content": "import { Bold } from 'lucide-react'\n\nimport { Toggle } from '~/registry/default/ui/toggle'\n\nexport default function ToggleDemo() {\n   return (\n      <Toggle aria-label=\"Toggle bold\">\n         <Bold className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "path": "examples/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/default/ui/toggle\"\n\nexport default function ToggleDemo() {\n   return (\n      <Toggle aria-label=\"Toggle bold\">\n         <Bold className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toggle-disabled.json b/apps/web/public/r/styles/default/toggle-disabled.json
index 8a17e541..a72f51a1 100644
--- a/apps/web/public/r/styles/default/toggle-disabled.json
+++ b/apps/web/public/r/styles/default/toggle-disabled.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-disabled.tsx",
-      "content": "import { Underline } from 'lucide-react'\n\nimport { Toggle } from '~/registry/default/ui/toggle'\n\nexport default function ToggleDisabled() {\n   return (\n      <Toggle aria-label=\"Toggle underline\" disabled>\n         <Underline className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "path": "examples/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/default/ui/toggle\"\n\nexport default function ToggleDisabled() {\n   return (\n      <Toggle aria-label=\"Toggle underline\" disabled>\n         <Underline className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toggle-group-demo.json b/apps/web/public/r/styles/default/toggle-group-demo.json
index 46eb4525..9e6cfaee 100644
--- a/apps/web/public/r/styles/default/toggle-group-demo.json
+++ b/apps/web/public/r/styles/default/toggle-group-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-group-demo.tsx",
-      "content": "import { Bold, Italic, Underline } from 'lucide-react'\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from '~/registry/default/ui/toggle-group'\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "path": "examples/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from \"~/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toggle-group-disabled.json b/apps/web/public/r/styles/default/toggle-group-disabled.json
index 436dd0eb..b78d46f4 100644
--- a/apps/web/public/r/styles/default/toggle-group-disabled.json
+++ b/apps/web/public/r/styles/default/toggle-group-disabled.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-group-disabled.tsx",
-      "content": "import { Bold, Italic, Underline } from 'lucide-react'\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from '~/registry/default/ui/toggle-group'\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup disabled type=\"single\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "path": "examples/toggle-group-disabled.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from \"~/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup disabled type=\"single\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toggle-group-lg.json b/apps/web/public/r/styles/default/toggle-group-lg.json
index 3e458366..a42f01ea 100644
--- a/apps/web/public/r/styles/default/toggle-group-lg.json
+++ b/apps/web/public/r/styles/default/toggle-group-lg.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group-lg",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-group-lg.tsx",
-      "content": "import { Bold, Italic, Underline } from 'lucide-react'\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from '~/registry/default/ui/toggle-group'\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup size=\"lg\" type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "path": "examples/toggle-group-lg.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from \"~/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup size=\"lg\" type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toggle-group-outline.json b/apps/web/public/r/styles/default/toggle-group-outline.json
index 4ce382d2..51ee73fe 100644
--- a/apps/web/public/r/styles/default/toggle-group-outline.json
+++ b/apps/web/public/r/styles/default/toggle-group-outline.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group-outline",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-group-outline.tsx",
-      "content": "import { Bold, Italic, Underline } from 'lucide-react'\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from '~/registry/default/ui/toggle-group'\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup variant=\"outline\" type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "path": "examples/toggle-group-outline.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from \"~/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup variant=\"outline\" type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toggle-group-single.json b/apps/web/public/r/styles/default/toggle-group-single.json
index 794151a6..05ef1d5d 100644
--- a/apps/web/public/r/styles/default/toggle-group-single.json
+++ b/apps/web/public/r/styles/default/toggle-group-single.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group-single",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-group-single.tsx",
-      "content": "import { Bold, Italic, Underline } from 'lucide-react'\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from '~/registry/default/ui/toggle-group'\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"single\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "path": "examples/toggle-group-single.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from \"~/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"single\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toggle-group-sm.json b/apps/web/public/r/styles/default/toggle-group-sm.json
index a89db78e..fd233eb9 100644
--- a/apps/web/public/r/styles/default/toggle-group-sm.json
+++ b/apps/web/public/r/styles/default/toggle-group-sm.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group-sm",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-group-sm.tsx",
-      "content": "import { Bold, Italic, Underline } from 'lucide-react'\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from '~/registry/default/ui/toggle-group'\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup size=\"sm\" type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "path": "examples/toggle-group-sm.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from \"~/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup size=\"sm\" type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toggle-group.json b/apps/web/public/r/styles/default/toggle-group.json
index e747abb7..cdb85696 100644
--- a/apps/web/public/r/styles/default/toggle-group.json
+++ b/apps/web/public/r/styles/default/toggle-group.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-toggle-group"
   ],
@@ -10,8 +12,8 @@
   "files": [
     {
       "path": "ui/toggle-group.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport type { VariantProps } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\nimport { toggleVariants } from '~/registry/default/ui/toggle'\n\nconst ToggleGroupContext = React.createContext<\n   VariantProps<typeof toggleVariants>\n>({\n   size: 'default',\n   variant: 'default',\n})\n\nconst ToggleGroup = React.forwardRef<\n   React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n   VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n   <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={ny('flex items-center justify-center gap-1', className)}\n      {...props}\n   >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n         {children}\n      </ToggleGroupContext.Provider>\n   </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n   React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n   VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n   const context = React.useContext(ToggleGroupContext)\n\n   return (\n      <ToggleGroupPrimitive.Item\n         ref={ref}\n         className={ny(\n            toggleVariants({\n               variant: context.variant || variant,\n               size: context.size || size,\n            }),\n            className,\n         )}\n         {...props}\n      >\n         {children}\n      </ToggleGroupPrimitive.Item>\n   )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { toggleVariants } from \"~/registry/default/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n   VariantProps<typeof toggleVariants>\n>({\n   size: \"default\",\n   variant: \"default\",\n})\n\nconst ToggleGroup = React.forwardRef<\n   React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n      VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n   <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={ny(\"flex items-center justify-center gap-1\", className)}\n      {...props}\n   >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n         {children}\n      </ToggleGroupContext.Provider>\n   </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n   React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n      VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n   const context = React.useContext(ToggleGroupContext)\n\n   return (\n      <ToggleGroupPrimitive.Item\n         ref={ref}\n         className={ny(\n            toggleVariants({\n               variant: context.variant || variant,\n               size: context.size || size,\n            }),\n            className,\n         )}\n         {...props}\n      >\n         {children}\n      </ToggleGroupPrimitive.Item>\n   )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/toggle-lg.json b/apps/web/public/r/styles/default/toggle-lg.json
index e1fb8c66..20102ca8 100644
--- a/apps/web/public/r/styles/default/toggle-lg.json
+++ b/apps/web/public/r/styles/default/toggle-lg.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-lg",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-lg.tsx",
-      "content": "import { Italic } from 'lucide-react'\n\nimport { Toggle } from '~/registry/default/ui/toggle'\n\nexport default function ToggleLg() {\n   return (\n      <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n         <Italic className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "path": "examples/toggle-lg.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/default/ui/toggle\"\n\nexport default function ToggleLg() {\n   return (\n      <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n         <Italic className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toggle-outline.json b/apps/web/public/r/styles/default/toggle-outline.json
index 3d80053b..8e896607 100644
--- a/apps/web/public/r/styles/default/toggle-outline.json
+++ b/apps/web/public/r/styles/default/toggle-outline.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-outline",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-outline.tsx",
-      "content": "import { Italic } from 'lucide-react'\n\nimport { Toggle } from '~/registry/default/ui/toggle'\n\nexport default function ToggleOutline() {\n   return (\n      <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n         <Italic className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "path": "examples/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/default/ui/toggle\"\n\nexport default function ToggleOutline() {\n   return (\n      <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n         <Italic className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toggle-sm.json b/apps/web/public/r/styles/default/toggle-sm.json
index 72efe1c4..e504929f 100644
--- a/apps/web/public/r/styles/default/toggle-sm.json
+++ b/apps/web/public/r/styles/default/toggle-sm.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-sm",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-sm.tsx",
-      "content": "import { Italic } from 'lucide-react'\n\nimport { Toggle } from '~/registry/default/ui/toggle'\n\nexport default function ToggleSm() {\n   return (\n      <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n         <Italic className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "path": "examples/toggle-sm.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/default/ui/toggle\"\n\nexport default function ToggleSm() {\n   return (\n      <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n         <Italic className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toggle-with-text.json b/apps/web/public/r/styles/default/toggle-with-text.json
index c2eb41cb..cb28e90f 100644
--- a/apps/web/public/r/styles/default/toggle-with-text.json
+++ b/apps/web/public/r/styles/default/toggle-with-text.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-with-text",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-with-text.tsx",
-      "content": "import { Italic } from 'lucide-react'\n\nimport { Toggle } from '~/registry/default/ui/toggle'\n\nexport default function ToggleWithText() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <Italic className=\"mr-2 size-4\" />\n         Italic\n      </Toggle>\n   )\n}\n",
+      "path": "examples/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/default/ui/toggle\"\n\nexport default function ToggleWithText() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <Italic className=\"mr-2 size-4\" />\n         Italic\n      </Toggle>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/toggle.json b/apps/web/public/r/styles/default/toggle.json
index b77c3737..c654111d 100644
--- a/apps/web/public/r/styles/default/toggle.json
+++ b/apps/web/public/r/styles/default/toggle.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-toggle"
   ],
   "files": [
     {
       "path": "ui/toggle.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as TogglePrimitive from '@radix-ui/react-toggle'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst toggleVariants = cva(\n   'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n   {\n      variants: {\n         variant: {\n            default: 'bg-transparent',\n            outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n         },\n         size: {\n            default: 'h-10 px-3',\n            sm: 'h-9 px-2.5',\n            lg: 'h-11 px-5',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n         size: 'default',\n      },\n   },\n)\n\nconst Toggle = React.forwardRef<\n   React.ElementRef<typeof TogglePrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n   VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n   <TogglePrimitive.Root\n      ref={ref}\n      className={ny(toggleVariants({ variant, size, className }))}\n      {...props}\n   />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst toggleVariants = cva(\n   \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-transparent\",\n            outline:\n               \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n         },\n         size: {\n            default: \"h-10 px-3\",\n            sm: \"h-9 px-2.5\",\n            lg: \"h-11 px-5\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n         size: \"default\",\n      },\n   },\n)\n\nconst Toggle = React.forwardRef<\n   React.ElementRef<typeof TogglePrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n      VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n   <TogglePrimitive.Root\n      ref={ref}\n      className={ny(toggleVariants({ variant, size, className }))}\n      {...props}\n   />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/tooltip-demo.json b/apps/web/public/r/styles/default/tooltip-demo.json
index b7f9e32c..a45bc139 100644
--- a/apps/web/public/r/styles/default/tooltip-demo.json
+++ b/apps/web/public/r/styles/default/tooltip-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tooltip-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tooltip-demo.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport {\n   Tooltip,\n   TooltipArrow,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/registry/default/ui/tooltip'\n\nexport default function TooltipDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Add to library</p>\n               <TooltipArrow />\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "path": "examples/tooltip-demo.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport {\n   Tooltip,\n   TooltipArrow,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/default/ui/tooltip\"\n\nexport default function TooltipDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Add to library</p>\n               <TooltipArrow />\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/tooltip-outline.json b/apps/web/public/r/styles/default/tooltip-outline.json
index 039bca6e..66b3a9a7 100644
--- a/apps/web/public/r/styles/default/tooltip-outline.json
+++ b/apps/web/public/r/styles/default/tooltip-outline.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tooltip-outline",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tooltip-outline.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/registry/default/ui/tooltip'\n\nexport default function TooltipOutline() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent variant=\"outline\">\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "path": "examples/tooltip-outline.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/default/ui/tooltip\"\n\nexport default function TooltipOutline() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent variant=\"outline\">\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/tooltip-secondary.json b/apps/web/public/r/styles/default/tooltip-secondary.json
index 87b5d2de..9ef5df45 100644
--- a/apps/web/public/r/styles/default/tooltip-secondary.json
+++ b/apps/web/public/r/styles/default/tooltip-secondary.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tooltip-secondary",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tooltip-secondary.tsx",
-      "content": "import { Button } from '~/registry/default/ui/button'\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/registry/default/ui/tooltip'\n\nexport default function TooltipSecondary() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent variant=\"secondary\">\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "path": "examples/tooltip-secondary.tsx",
+      "content": "import { Button } from \"~/registry/default/ui/button\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/default/ui/tooltip\"\n\nexport default function TooltipSecondary() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent variant=\"secondary\">\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/tooltip-with-toggle-demo.json b/apps/web/public/r/styles/default/tooltip-with-toggle-demo.json
index b49c445f..e4c65f5c 100644
--- a/apps/web/public/r/styles/default/tooltip-with-toggle-demo.json
+++ b/apps/web/public/r/styles/default/tooltip-with-toggle-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tooltip-with-toggle-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tooltip-with-toggle-demo.tsx",
-      "content": "import { Heart } from 'lucide-react'\n\nimport { Toggle } from '~/registry/default/ui/toggle'\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/registry/default/ui/tooltip'\n\nexport default function TooltipWithToggleDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger>\n               <Toggle variant=\"outline\" aria-label=\"Toggle love\">\n                  <Heart className=\"size-4\" />\n               </Toggle>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Heart</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "path": "examples/tooltip-with-toggle-demo.tsx",
+      "content": "import { Heart } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/default/ui/toggle\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/default/ui/tooltip\"\n\nexport default function TooltipWithToggleDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger>\n               <Toggle variant=\"outline\" aria-label=\"Toggle love\">\n                  <Heart className=\"size-4\" />\n               </Toggle>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Heart</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/tooltip.json b/apps/web/public/r/styles/default/tooltip.json
index f2405db9..6d3e8485 100644
--- a/apps/web/public/r/styles/default/tooltip.json
+++ b/apps/web/public/r/styles/default/tooltip.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tooltip",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-tooltip"
   ],
   "files": [
     {
       "path": "ui/tooltip.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst tooltipVariants = cva(\n   'z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n   {\n      variants: {\n         variant: {\n            default: 'bg-primary text-primary-foreground',\n            outline: 'border bg-popover text-popover-foreground shadow-md',\n            secondary: 'bg-secondary text-secondary-foreground',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n      },\n   },\n)\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipArrow = TooltipPrimitive.TooltipArrow\n\nexport interface TooltipProps\n   extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n   VariantProps<typeof tooltipVariants> {};\n\nconst TooltipContent = React.forwardRef<\n   React.ElementRef<typeof TooltipPrimitive.Content>,\n   TooltipProps\n>(({ className, variant, sideOffset = 4, ...props }, ref) => (\n   <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={ny(tooltipVariants({ variant, className }))}\n      {...props}\n   />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipArrow, TooltipContent, TooltipProvider }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst tooltipVariants = cva(\n   \"z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-primary text-primary-foreground\",\n            outline: \"border bg-popover text-popover-foreground shadow-md\",\n            secondary: \"bg-secondary text-secondary-foreground\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipArrow = TooltipPrimitive.TooltipArrow\n\nexport interface TooltipProps\n   extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n      VariantProps<typeof tooltipVariants> {}\n\nconst TooltipContent = React.forwardRef<\n   React.ElementRef<typeof TooltipPrimitive.Content>,\n   TooltipProps\n>(({ className, variant, sideOffset = 4, ...props }, ref) => (\n   <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={ny(tooltipVariants({ variant, className }))}\n      {...props}\n   />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport {\n   Tooltip,\n   TooltipTrigger,\n   TooltipArrow,\n   TooltipContent,\n   TooltipProvider,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/tour-demo.json b/apps/web/public/r/styles/default/tour-demo.json
index e69c1f27..b8a16e0f 100644
--- a/apps/web/public/r/styles/default/tour-demo.json
+++ b/apps/web/public/r/styles/default/tour-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tour-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tour-demo.tsx",
-      "content": "import * as React from 'react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/default/ui/card'\nimport { Input } from '~/registry/default/ui/input'\nimport { TourFactory } from '~/registry/default/ui/tour'\n\nconst tour = TourFactory([\n   'buttonOne',\n   'buttonTwo',\n   'missingButton',\n   'buttonFour',\n   'emailInput',\n])\n\nfunction TourDisplay(props: {\n   children: React.ReactNode\n   title?: string\n   description?: string\n}) {\n   const ctx = tour.useContext()\n   return (\n      <Card className=\"w-[350px]\">\n         <CardHeader>\n            <CardTitle>{props.title}</CardTitle>\n            <CardDescription>{props.description}</CardDescription>\n         </CardHeader>\n         <CardContent>{props.children}</CardContent>\n         <CardFooter>\n            {ctx.current < ctx.nodes.size\n               ? (\n                     <div className=\"flex w-full justify-between\">\n                        <Button variant=\"outline\" onClick={ctx.close}>\n                           Close\n                        </Button>\n                        <div>\n                           <Button onClick={ctx.previous}>Previous</Button>\n                           <Button onClick={ctx.next}>Next</Button>\n                        </div>\n                     </div>\n                  )\n               : (\n                     <div className=\"flex w-full justify-end\">\n                        <Button onClick={ctx.previous}>Previous</Button>\n                        <Button className=\"bg-green-800\" onClick={ctx.close}>\n                           Finish\n                        </Button>\n                     </div>\n                  )}\n         </CardFooter>\n      </Card>\n   )\n}\n\nfunction TourApplication() {\n   const ctx = tour.useContext()\n   return (\n      <div className=\"flex h-96 w-full items-center justify-center\">\n         <div className=\"absolute bottom-2 left-2 flex gap-2\">\n            <tour.TourFocus\n               name=\"buttonOne\"\n               tourRender={(\n                  <TourDisplay title=\"Create Incident\">\n                     <h1>This button creates an incident</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               )}\n            >\n               <Button>Create Incident</Button>\n            </tour.TourFocus>\n            <tour.TourFocus\n               name=\"buttonFour\"\n               tourRender={(\n                  <TourDisplay title=\"Update Incident\">\n                     <h1>This button pushes your updates</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               )}\n            >\n               <Button>Update Incident</Button>\n            </tour.TourFocus>\n         </div>\n         <div className=\"absolute right-2 top-12 flex gap-2\">\n            <tour.TourFocus\n               name=\"buttonTwo\"\n               tourRender={(\n                  <TourDisplay title=\"Resolve Incident\">\n                     <h1>This button Resolves the Incident</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               )}\n            >\n               <Button>Resolve Incident</Button>\n            </tour.TourFocus>\n         </div>\n         <div>\n            <tour.TourFocus\n               name=\"emailInput\"\n               tourRender={(\n                  <TourDisplay title=\"Email Input\">\n                     <h1>This is where you put incident info</h1>\n                     <p>helpful text about this input</p>\n                  </TourDisplay>\n               )}\n            >\n               <Input type=\"email\" placeholder=\"Email\" />\n            </tour.TourFocus>\n         </div>\n         <div className=\"absolute bottom-2 right-2\">\n            <Button onClick={ctx.open}>Open Tour</Button>\n         </div>\n      </div>\n   )\n}\n\nexport default function TourDemo() {\n   return (\n      <tour.TourProvider>\n         <TourApplication />\n      </tour.TourProvider>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/tour-demo.tsx",
+      "content": "import type * as React from \"react\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport { Input } from \"~/registry/default/ui/input\"\nimport { TourFactory } from \"~/registry/default/ui/tour\"\n\nconst tour = TourFactory([\n   \"buttonOne\",\n   \"buttonTwo\",\n   \"missingButton\",\n   \"buttonFour\",\n   \"emailInput\",\n])\n\nfunction TourDisplay(props: {\n   children: React.ReactNode\n   title?: string\n   description?: string\n}) {\n   const ctx = tour.useContext()\n   return (\n      <Card className=\"w-[350px]\">\n         <CardHeader>\n            <CardTitle>{props.title}</CardTitle>\n            <CardDescription>{props.description}</CardDescription>\n         </CardHeader>\n         <CardContent>{props.children}</CardContent>\n         <CardFooter>\n            {ctx.current < ctx.nodes.size ? (\n               <div className=\"flex w-full justify-between\">\n                  <Button variant=\"outline\" onClick={ctx.close}>\n                     Close\n                  </Button>\n                  <div>\n                     <Button onClick={ctx.previous}>Previous</Button>\n                     <Button onClick={ctx.next}>Next</Button>\n                  </div>\n               </div>\n            ) : (\n               <div className=\"flex w-full justify-end\">\n                  <Button onClick={ctx.previous}>Previous</Button>\n                  <Button className=\"bg-green-800\" onClick={ctx.close}>\n                     Finish\n                  </Button>\n               </div>\n            )}\n         </CardFooter>\n      </Card>\n   )\n}\n\nfunction TourApplication() {\n   const ctx = tour.useContext()\n   return (\n      <div className=\"flex h-96 w-full items-center justify-center\">\n         <div className=\"absolute bottom-2 left-2 flex gap-2\">\n            <tour.TourFocus\n               name=\"buttonOne\"\n               tourRender={\n                  <TourDisplay title=\"Create Incident\">\n                     <h1>This button creates an incident</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               }\n            >\n               <Button>Create Incident</Button>\n            </tour.TourFocus>\n            <tour.TourFocus\n               name=\"buttonFour\"\n               tourRender={\n                  <TourDisplay title=\"Update Incident\">\n                     <h1>This button pushes your updates</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               }\n            >\n               <Button>Update Incident</Button>\n            </tour.TourFocus>\n         </div>\n         <div className=\"absolute right-2 top-12 flex gap-2\">\n            <tour.TourFocus\n               name=\"buttonTwo\"\n               tourRender={\n                  <TourDisplay title=\"Resolve Incident\">\n                     <h1>This button Resolves the Incident</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               }\n            >\n               <Button>Resolve Incident</Button>\n            </tour.TourFocus>\n         </div>\n         <div>\n            <tour.TourFocus\n               name=\"emailInput\"\n               tourRender={\n                  <TourDisplay title=\"Email Input\">\n                     <h1>This is where you put incident info</h1>\n                     <p>helpful text about this input</p>\n                  </TourDisplay>\n               }\n            >\n               <Input type=\"email\" placeholder=\"Email\" />\n            </tour.TourFocus>\n         </div>\n         <div className=\"absolute bottom-2 right-2\">\n            <Button onClick={ctx.open}>Open Tour</Button>\n         </div>\n      </div>\n   )\n}\n\nexport default function TourDemo() {\n   return (\n      <tour.TourProvider>\n         <TourApplication />\n      </tour.TourProvider>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/tour.json b/apps/web/public/r/styles/default/tour.json
index d0da9eee..6255a24f 100644
--- a/apps/web/public/r/styles/default/tour.json
+++ b/apps/web/public/r/styles/default/tour.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tour",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/tour.tsx",
-      "content": "'use client'\nimport React, {\n   createContext,\n   useContext,\n   useEffect,\n   useMemo,\n   useRef,\n   useState,\n} from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { ny } from '~/lib/utils'\n\nexport interface TourContext<T extends string> {\n   nodes: Map<\n      string,\n      {\n         ref: HTMLElement\n         render: React.ReactNode\n         name: T\n      }\n   >\n   show: boolean\n   current: number\n   next: () => void\n   previous: () => void\n   close: () => void\n   open: () => void\n}\n\nexport interface TourProps {\n   children?: React.ReactNode\n}\n\nexport interface TourFocusProps<T extends string> {\n   children: React.ReactNode\n   tourRender: React.ReactNode\n   name: T\n}\n\nexport function TourFactory<T extends string>(order: T[]) {\n   const tourContext = createContext<TourContext<T>>({\n      nodes: new Map(),\n      show: false,\n      current: 0,\n      next: () => {\n         console.log('empty')\n      },\n      previous: () => {\n         console.log('empty')\n      },\n      close: () => {\n         console.log('empty')\n      },\n      open: () => {\n         console.log('empty')\n      },\n   })\n\n   function TourPortal() {\n      const ctx = useContext(tourContext)\n\n      const ref = useRef<HTMLDivElement>(null)\n      const [, forceUpdate] = React.useState({})\n\n      const currentElement = useMemo(\n         () => ctx.nodes.get(order[ctx.current] ?? ''),\n         [ctx],\n      )\n\n      useEffect(() => {\n         const handleResize = () => {\n            forceUpdate({})\n         }\n\n         window.addEventListener('resize', handleResize)\n         window.addEventListener('scroll', handleResize)\n\n         return () => {\n            window.removeEventListener('resize', handleResize)\n            window.removeEventListener('scroll', handleResize)\n         }\n      }, [])\n\n      useEffect(() => {\n         if (ctx.show) {\n            forceUpdate({})\n         }\n      }, [ctx.show])\n\n      if (!currentElement) {\n         return <></>\n      }\n\n      const currentElementRect = currentElement.ref.getBoundingClientRect()\n\n      const height = ref.current?.getBoundingClientRect().height ?? 0\n      const width = ref.current?.getBoundingClientRect().width ?? 0\n\n      const closest = (): React.CSSProperties => {\n         const isCloseToTop = currentElementRect.top < height\n         const isCloseToLeft = currentElementRect.left < width\n         const isCloseToRight\n         = currentElementRect.right > window.innerWidth - width\n\n         if (isCloseToLeft) {\n            return {\n               left: currentElementRect.x + currentElementRect.width,\n               top:\n             currentElementRect.y - height / 2 + currentElementRect.height / 2,\n            }\n         }\n\n         if (isCloseToRight) {\n            return {\n               left: currentElementRect.x - width,\n               top:\n             currentElementRect.y - height / 2 + currentElementRect.height / 2,\n            }\n         }\n\n         if (isCloseToTop) {\n            return {\n               left: currentElementRect.x - width / 2 + currentElementRect.width / 2,\n               top: currentElementRect.y + currentElementRect.height,\n            }\n         }\n\n         return {\n            left: currentElementRect.x - width / 2 + currentElementRect.width / 2,\n            top: currentElementRect.y - height,\n         }\n      }\n\n      return createPortal(\n         <div\n            id=\"tour\"\n            className={ny(\n               'pointer-events-auto fixed left-0 top-0 h-screen w-screen transition-none',\n               !ctx.show ? 'invisible' : 'visible',\n            )}\n         >\n            <div\n               ref={ref}\n               className={ny(\n             `absolute z-50 transition-all duration-500 ease-in-out`,\n               )}\n               style={{\n                  ...closest(),\n               }}\n            >\n               {currentElement.render}\n            </div>\n            <div\n               className=\"absolute z-40 h-screen w-screen overflow-hidden opacity-80 shadow-[0_0_0_100vw_rgba(0,0,0,.99)] transition-all duration-500 ease-in-out\"\n               style={{\n                  height: currentElementRect.height,\n                  width: currentElementRect.width,\n                  left: currentElementRect.x,\n                  top: currentElementRect.y,\n               }}\n            />\n         </div>,\n         document.body,\n      )\n   }\n\n   return {\n      TourProvider: function TourProvider(props: TourProps) {\n         const nodes = useRef<TourContext<T>['nodes']>(new Map())\n\n         const [show, setShow] = useState(false)\n         const [current, setCurrent] = useState(0)\n\n         const getNextIndex = (currIndex: number, nextDiff: number): number => {\n            const lookAheadIndex = currIndex + nextDiff\n            if (lookAheadIndex >= order.length || lookAheadIndex < 0) {\n               return currIndex\n            }\n            if (!nodes.current.has(order[lookAheadIndex])) {\n               return getNextIndex(lookAheadIndex, nextDiff)\n            }\n            return lookAheadIndex\n         }\n\n         return (\n            <tourContext.Provider\n               value={{\n                  nodes: nodes.current,\n                  current,\n                  show,\n                  next: () => {\n                     setCurrent(state =>\n                        Math.min(getNextIndex(state, 1), order.length - 1),\n                     )\n                  },\n                  previous: () => {\n                     setCurrent(state => Math.max(getNextIndex(state, -1), 0))\n                  },\n                  close: () => {\n                     setShow(false)\n                  },\n                  open: () => {\n                     setShow(true)\n                  },\n               }}\n            >\n               <TourPortal />\n               {props.children}\n            </tourContext.Provider>\n         )\n      },\n      context: tourContext,\n      useContext: () => useContext(tourContext),\n      TourFocus: function TourFocus(props: TourFocusProps<T>) {\n         const ctx = useContext(tourContext)\n         return (\n            <div\n               ref={(divRef) => {\n                  if (divRef && !ctx.nodes.has(props.name)) {\n                     ctx.nodes.set(props.name, {\n                        ref: divRef,\n                        render: props.tourRender,\n                        name: props.name,\n                     })\n                  }\n               }}\n            >\n               {props.children}\n            </div>\n         )\n      },\n   }\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport React, {\n   createContext,\n   useContext,\n   useEffect,\n   useMemo,\n   useRef,\n   useState,\n} from \"react\"\nimport { createPortal } from \"react-dom\"\n\nimport { ny } from \"~/lib/utils\"\n\nexport interface TourContext<T extends string> {\n   nodes: Map<\n      string,\n      {\n         ref: HTMLElement\n         render: React.ReactNode\n         name: T\n      }\n   >\n   show: boolean\n   current: number\n   next: () => void\n   previous: () => void\n   close: () => void\n   open: () => void\n}\n\nexport interface TourProps {\n   children?: React.ReactNode\n}\n\nexport interface TourFocusProps<T extends string> {\n   children: React.ReactNode\n   tourRender: React.ReactNode\n   name: T\n}\n\nexport function TourFactory<T extends string>(order: T[]) {\n   const tourContext = createContext<TourContext<T>>({\n      nodes: new Map(),\n      show: false,\n      current: 0,\n      next: () => {\n         console.log(\"empty\")\n      },\n      previous: () => {\n         console.log(\"empty\")\n      },\n      close: () => {\n         console.log(\"empty\")\n      },\n      open: () => {\n         console.log(\"empty\")\n      },\n   })\n\n   function TourPortal() {\n      const ctx = useContext(tourContext)\n\n      const ref = useRef<HTMLDivElement>(null)\n      const [, forceUpdate] = React.useState({})\n\n      const currentElement = useMemo(\n         () => ctx.nodes.get(order[ctx.current] ?? \"\"),\n         [ctx],\n      )\n\n      useEffect(() => {\n         const handleResize = () => {\n            forceUpdate({})\n         }\n\n         window.addEventListener(\"resize\", handleResize)\n         window.addEventListener(\"scroll\", handleResize)\n\n         return () => {\n            window.removeEventListener(\"resize\", handleResize)\n            window.removeEventListener(\"scroll\", handleResize)\n         }\n      }, [])\n\n      useEffect(() => {\n         if (ctx.show) {\n            forceUpdate({})\n         }\n      }, [ctx.show])\n\n      if (!currentElement) {\n         return <></>\n      }\n\n      const currentElementRect = currentElement.ref.getBoundingClientRect()\n\n      const height = ref.current?.getBoundingClientRect().height ?? 0\n      const width = ref.current?.getBoundingClientRect().width ?? 0\n\n      const closest = (): React.CSSProperties => {\n         const isCloseToTop = currentElementRect.top < height\n         const isCloseToLeft = currentElementRect.left < width\n         const isCloseToRight =\n            currentElementRect.right > window.innerWidth - width\n\n         if (isCloseToLeft) {\n            return {\n               left: currentElementRect.x + currentElementRect.width,\n               top:\n                  currentElementRect.y -\n                  height / 2 +\n                  currentElementRect.height / 2,\n            }\n         }\n\n         if (isCloseToRight) {\n            return {\n               left: currentElementRect.x - width,\n               top:\n                  currentElementRect.y -\n                  height / 2 +\n                  currentElementRect.height / 2,\n            }\n         }\n\n         if (isCloseToTop) {\n            return {\n               left:\n                  currentElementRect.x -\n                  width / 2 +\n                  currentElementRect.width / 2,\n               top: currentElementRect.y + currentElementRect.height,\n            }\n         }\n\n         return {\n            left:\n               currentElementRect.x - width / 2 + currentElementRect.width / 2,\n            top: currentElementRect.y - height,\n         }\n      }\n\n      return createPortal(\n         <div\n            id=\"tour\"\n            className={ny(\n               \"pointer-events-auto fixed left-0 top-0 h-screen w-screen transition-none\",\n               !ctx.show ? \"invisible\" : \"visible\",\n            )}\n         >\n            <div\n               ref={ref}\n               className={ny(\n                  `absolute z-50 transition-all duration-500 ease-in-out`,\n               )}\n               style={{\n                  ...closest(),\n               }}\n            >\n               {currentElement.render}\n            </div>\n            <div\n               className=\"absolute z-40 h-screen w-screen overflow-hidden opacity-80 shadow-[0_0_0_100vw_rgba(0,0,0,.99)] transition-all duration-500 ease-in-out\"\n               style={{\n                  height: currentElementRect.height,\n                  width: currentElementRect.width,\n                  left: currentElementRect.x,\n                  top: currentElementRect.y,\n               }}\n            />\n         </div>,\n         document.body,\n      )\n   }\n\n   return {\n      TourProvider: function TourProvider(props: TourProps) {\n         const nodes = useRef<TourContext<T>[\"nodes\"]>(new Map())\n\n         const [show, setShow] = useState(false)\n         const [current, setCurrent] = useState(0)\n\n         const getNextIndex = (currIndex: number, nextDiff: number): number => {\n            const lookAheadIndex = currIndex + nextDiff\n            if (lookAheadIndex >= order.length || lookAheadIndex < 0) {\n               return currIndex\n            }\n            if (!nodes.current.has(order[lookAheadIndex])) {\n               return getNextIndex(lookAheadIndex, nextDiff)\n            }\n            return lookAheadIndex\n         }\n\n         return (\n            <tourContext.Provider\n               value={{\n                  nodes: nodes.current,\n                  current,\n                  show,\n                  next: () => {\n                     setCurrent((state) =>\n                        Math.min(getNextIndex(state, 1), order.length - 1),\n                     )\n                  },\n                  previous: () => {\n                     setCurrent((state) => Math.max(getNextIndex(state, -1), 0))\n                  },\n                  close: () => {\n                     setShow(false)\n                  },\n                  open: () => {\n                     setShow(true)\n                  },\n               }}\n            >\n               <TourPortal />\n               {props.children}\n            </tourContext.Provider>\n         )\n      },\n      context: tourContext,\n      useContext: () => useContext(tourContext),\n      TourFocus: function TourFocus(props: TourFocusProps<T>) {\n         const ctx = useContext(tourContext)\n         return (\n            <div\n               ref={(divRef) => {\n                  if (divRef && !ctx.nodes.has(props.name)) {\n                     ctx.nodes.set(props.name, {\n                        ref: divRef,\n                        render: props.tourRender,\n                        name: props.name,\n                     })\n                  }\n               }}\n            >\n               {props.children}\n            </div>\n         )\n      },\n   }\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/tweet-card-demo.json b/apps/web/public/r/styles/default/tweet-card-demo.json
index 8abe3f79..e850eae5 100644
--- a/apps/web/public/r/styles/default/tweet-card-demo.json
+++ b/apps/web/public/r/styles/default/tweet-card-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tweet-card-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tweet-card-demo.tsx",
-      "content": "import ClientTweetCard from '~/registry/default/ui/client-tweet-card'\n\n/**\n * <TweetCard /> (Server Side Only)\n * <ClientTweetCard /> (Client Side Only)\n */\nexport default async function TweetDemo() {\n   return <ClientTweetCard id=\"1703861725534011484\" className=\"shadow-2xl\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/tweet-card-demo.tsx",
+      "content": "import ClientTweetCard from \"~/registry/default/ui/client-tweet-card\"\n\n/**\n * <TweetCard /> (Server Side Only)\n * <ClientTweetCard /> (Client Side Only)\n */\nexport default async function TweetDemo() {\n   return <ClientTweetCard id=\"1703861725534011484\" className=\"shadow-2xl\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/tweet-card-images.json b/apps/web/public/r/styles/default/tweet-card-images.json
index 8a9d2fde..a412754d 100644
--- a/apps/web/public/r/styles/default/tweet-card-images.json
+++ b/apps/web/public/r/styles/default/tweet-card-images.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tweet-card-images",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tweet-card-images.tsx",
-      "content": "import ClientTweetCard from '~/registry/default/ui/client-tweet-card'\n\nexport default async function TweetImages() {\n   return <ClientTweetCard id=\"1803717292087296479\" className=\"shadow-2xl\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/tweet-card-images.tsx",
+      "content": "import ClientTweetCard from \"~/registry/default/ui/client-tweet-card\"\n\nexport default async function TweetImages() {\n   return <ClientTweetCard id=\"1803717292087296479\" className=\"shadow-2xl\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/tweet-card-meta-preview.json b/apps/web/public/r/styles/default/tweet-card-meta-preview.json
index ca763c4f..ced4686b 100644
--- a/apps/web/public/r/styles/default/tweet-card-meta-preview.json
+++ b/apps/web/public/r/styles/default/tweet-card-meta-preview.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tweet-card-meta-preview",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tweet-card-meta-preview.tsx",
-      "content": "import ClientTweetCard from '~/registry/default/ui/client-tweet-card'\n\nexport default async function TweetMetaPreview() {\n   return <ClientTweetCard id=\"1671108134591504385\" className=\"shadow-2xl\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/tweet-card-meta-preview.tsx",
+      "content": "import ClientTweetCard from \"~/registry/default/ui/client-tweet-card\"\n\nexport default async function TweetMetaPreview() {\n   return <ClientTweetCard id=\"1671108134591504385\" className=\"shadow-2xl\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/tweet-card.json b/apps/web/public/r/styles/default/tweet-card.json
index 56905706..2c986351 100644
--- a/apps/web/public/r/styles/default/tweet-card.json
+++ b/apps/web/public/r/styles/default/tweet-card.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tweet-card",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "react-tweet"
   ],
   "files": [
     {
       "path": "ui/tweet-card.tsx",
-      "content": "import { Suspense } from 'react'\nimport {\n   type EnrichedTweet,\n   type TweetProps,\n   type TwitterComponents,\n   enrichTweet,\n} from 'react-tweet'\nimport { type Tweet, getTweet } from 'react-tweet/api'\nimport { ny } from '~/lib/utils'\n\ninterface TwitterIconProps {\n   className?: string\n   [key: string]: any\n}\nfunction Twitter({ className, ...props }: TwitterIconProps) {\n   return (\n      <svg\n         stroke=\"currentColor\"\n         fill=\"currentColor\"\n         strokeWidth=\"0\"\n         viewBox=\"0 0 24 24\"\n         height=\"1em\"\n         width=\"1em\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         className={className}\n         {...props}\n      >\n         <g>\n            <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n            <path d=\"M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z\"></path>\n         </g>\n      </svg>\n   )\n}\n\nfunction Verified({ className, ...props }: TwitterIconProps) {\n   return (\n      <svg\n         aria-label=\"Verified Account\"\n         viewBox=\"0 0 24 24\"\n         className={className}\n         {...props}\n      >\n         <g fill=\"currentColor\">\n            <path d=\"M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z\" />\n         </g>\n      </svg>\n   )\n}\n\nexport function truncate(str: string | null, length: number) {\n   if (!str || str.length <= length)\n      return str\n   return `${str.slice(0, length - 3)}...`\n}\n\nfunction Skeleton({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny('bg-primary/10 animate-pulse rounded-md', className)}\n         {...props}\n      />\n   )\n}\n\nexport function TweetSkeleton({\n   className,\n   ...props\n}: {\n   className?: string\n   [key: string]: any\n}) {\n   return (\n      <div\n         className={ny(\n            'flex size-full max-h-max min-w-72 flex-col gap-2 rounded-lg border p-4',\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"flex flex-row gap-2\">\n            <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n            <Skeleton className=\"h-10 w-full\" />\n         </div>\n         <Skeleton className=\"h-20 w-full\" />\n      </div>\n   )\n}\n\nexport function TweetNotFound({\n   className,\n   ...props\n}: {\n   className?: string\n   [key: string]: any\n}) {\n   return (\n      <div\n         className={ny(\n            'flex size-full flex-col items-center justify-center gap-2 rounded-lg border p-4',\n            className,\n         )}\n         {...props}\n      >\n         <h3>Tweet not found</h3>\n      </div>\n   )\n}\n\nexport function TweetHeader({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"flex flex-row justify-between tracking-tight\">\n         <div className=\"flex items-center space-x-2\">\n            <a href={tweet.user.url} target=\"_blank\" rel=\"noreferrer\">\n               <img\n                  title={`Profile picture of ${tweet.user.name}`}\n                  alt={tweet.user.screen_name}\n                  height={48}\n                  width={48}\n                  src={tweet.user.profile_image_url_https}\n                  className=\"overflow-hidden rounded-full border border-transparent\"\n               />\n            </a>\n            <div>\n               <a\n                  href={tweet.user.url}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"flex items-center whitespace-nowrap font-semibold\"\n               >\n                  {truncate(tweet.user.name, 20)}\n                  {tweet.user.verified\n                  || (tweet.user.is_blue_verified && (\n                     <Verified className=\"ml-1 inline size-4 text-blue-500\" />\n                  ))}\n               </a>\n               <div className=\"flex items-center space-x-1\">\n                  <a\n                     href={tweet.user.url}\n                     target=\"_blank\"\n                     rel=\"noreferrer\"\n                     className=\"text-sm text-gray-500 transition-all duration-75\"\n                  >\n                     @\n                     {truncate(tweet.user.screen_name, 16)}\n                  </a>\n               </div>\n            </div>\n         </div>\n         <a href={tweet.url} target=\"_blank\" rel=\"noreferrer\">\n            <span className=\"sr-only\">Link to tweet</span>\n            <Twitter className=\"size-5 items-start text-[#3BA9EE] transition-all ease-in-out hover:scale-105\" />\n         </a>\n      </div>\n   )\n}\n\nexport function TweetBody({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"break-words leading-normal tracking-tighter\">\n         {tweet.entities.map((entity, idx) => {\n            switch (entity.type) {\n               case 'url':\n               case 'symbol':\n               case 'hashtag':\n               case 'mention':\n                  return (\n                     <a\n                        key={idx}\n                        href={entity.href}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"text-sm font-normal text-gray-500\"\n                     >\n                        <span>{entity.text}</span>\n                     </a>\n                  )\n               case 'text':\n                  return (\n                     <span\n                        key={idx}\n                        className=\"text-sm font-normal\"\n                        dangerouslySetInnerHTML={{ __html: entity.text }}\n                     />\n                  )\n            }\n         })}\n      </div>\n   )\n}\n\nexport function TweetMedia({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"flex flex-1 items-center justify-center\">\n         {tweet.video && (\n            <video\n               poster={tweet.video.poster}\n               autoPlay\n               loop\n               muted\n               playsInline\n               className=\"rounded-xl border shadow-sm\"\n            >\n               <source src={tweet.video.variants[0].src} type=\"video/mp4\" />\n               Your browser does not support the video tag.\n            </video>\n         )}\n         {tweet.photos && (\n            <div className=\"relative flex transform-gpu snap-x snap-mandatory gap-4 overflow-x-auto\">\n               <div className=\"shrink-0 snap-center sm:w-2\" />\n               {tweet.photos.map(photo => (\n                  <img\n                     key={photo.url}\n                     src={photo.url}\n                     title={`Photo by ${tweet.user.name}`}\n                     alt={tweet.text}\n                     className=\"h-64 w-5/6 shrink-0 snap-center snap-always rounded-xl border object-cover shadow-sm\"\n                  />\n               ))}\n               <div className=\"shrink-0 snap-center sm:w-2\" />\n            </div>\n         )}\n         {!tweet.video\n         && !tweet.photos\n         // @ts-expect-error is fine\n         && tweet?.card?.binding_values?.thumbnail_image_large?.image_value.url && (\n            <img\n               src={\n                  // @ts-expect-error is fine\n                  tweet.card.binding_values.thumbnail_image_large.image_value.url\n               }\n               className=\"h-64 rounded-xl border object-cover shadow-sm\"\n            />\n         )}\n      </div>\n   )\n}\n\nexport function MagicTweet({\n   tweet,\n   components,\n   className,\n   ...props\n}: {\n   tweet: Tweet\n   components?: TwitterComponents\n   className?: string\n}) {\n   const enrichedTweet = enrichTweet(tweet)\n   return (\n      <div\n         className={ny(\n            'relative flex size-full max-w-lg flex-col gap-2 overflow-hidden rounded-lg border p-4 backdrop-blur-md',\n            className,\n         )}\n         {...props}\n      >\n         <TweetHeader tweet={enrichedTweet} />\n         <TweetBody tweet={enrichedTweet} />\n         <TweetMedia tweet={enrichedTweet} />\n      </div>\n   )\n}\n\n/**\n * TweetCard (Server Side Only)\n */\nexport async function TweetCard({\n   id,\n   components,\n   fallback = <TweetSkeleton />,\n   onError,\n   ...props\n}: TweetProps & {\n   className?: string\n}) {\n   const tweet = id\n      ? await getTweet(id).catch((err) => {\n         if (onError)\n            onError(err)\n         else console.error(err)\n      })\n      : undefined\n\n   if (!tweet) {\n      const NotFound = components?.TweetNotFound || TweetNotFound\n      return <NotFound {...props} />\n   }\n\n   return (\n      <Suspense fallback={fallback}>\n         <MagicTweet tweet={tweet} {...props} />\n      </Suspense>\n   )\n}\n\nexport default TweetCard\n",
-      "type": "registry:component",
+      "content": "import { Suspense } from \"react\"\nimport {\n   type EnrichedTweet,\n   type TweetProps,\n   type TwitterComponents,\n   enrichTweet,\n} from \"react-tweet\"\nimport { type Tweet, getTweet } from \"react-tweet/api\"\nimport { ny } from \"~/lib/utils\"\n\ninterface TwitterIconProps {\n   className?: string\n   [key: string]: any\n}\nfunction Twitter({ className, ...props }: TwitterIconProps) {\n   return (\n      <svg\n         stroke=\"currentColor\"\n         fill=\"currentColor\"\n         strokeWidth=\"0\"\n         viewBox=\"0 0 24 24\"\n         height=\"1em\"\n         width=\"1em\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         className={className}\n         {...props}\n      >\n         <g>\n            <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n            <path d=\"M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z\"></path>\n         </g>\n      </svg>\n   )\n}\n\nfunction Verified({ className, ...props }: TwitterIconProps) {\n   return (\n      <svg\n         aria-label=\"Verified Account\"\n         viewBox=\"0 0 24 24\"\n         className={className}\n         {...props}\n      >\n         <g fill=\"currentColor\">\n            <path d=\"M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z\" />\n         </g>\n      </svg>\n   )\n}\n\nexport function truncate(str: string | null, length: number) {\n   if (!str || str.length <= length) return str\n   return `${str.slice(0, length - 3)}...`\n}\n\nfunction Skeleton({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\"bg-primary/10 animate-pulse rounded-md\", className)}\n         {...props}\n      />\n   )\n}\n\nexport function TweetSkeleton({\n   className,\n   ...props\n}: {\n   className?: string\n   [key: string]: any\n}) {\n   return (\n      <div\n         className={ny(\n            \"flex size-full max-h-max min-w-72 flex-col gap-2 rounded-lg border p-4\",\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"flex flex-row gap-2\">\n            <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n            <Skeleton className=\"h-10 w-full\" />\n         </div>\n         <Skeleton className=\"h-20 w-full\" />\n      </div>\n   )\n}\n\nexport function TweetNotFound({\n   className,\n   ...props\n}: {\n   className?: string\n   [key: string]: any\n}) {\n   return (\n      <div\n         className={ny(\n            \"flex size-full flex-col items-center justify-center gap-2 rounded-lg border p-4\",\n            className,\n         )}\n         {...props}\n      >\n         <h3>Tweet not found</h3>\n      </div>\n   )\n}\n\nexport function TweetHeader({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"flex flex-row justify-between tracking-tight\">\n         <div className=\"flex items-center space-x-2\">\n            <a href={tweet.user.url} target=\"_blank\" rel=\"noreferrer\">\n               <img\n                  title={`Profile picture of ${tweet.user.name}`}\n                  alt={tweet.user.screen_name}\n                  height={48}\n                  width={48}\n                  src={tweet.user.profile_image_url_https}\n                  className=\"overflow-hidden rounded-full border border-transparent\"\n               />\n            </a>\n            <div>\n               <a\n                  href={tweet.user.url}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"flex items-center whitespace-nowrap font-semibold\"\n               >\n                  {truncate(tweet.user.name, 20)}\n                  {tweet.user.verified ||\n                     (tweet.user.is_blue_verified && (\n                        <Verified className=\"ml-1 inline size-4 text-blue-500\" />\n                     ))}\n               </a>\n               <div className=\"flex items-center space-x-1\">\n                  <a\n                     href={tweet.user.url}\n                     target=\"_blank\"\n                     rel=\"noreferrer\"\n                     className=\"text-sm text-gray-500 transition-all duration-75\"\n                  >\n                     @{truncate(tweet.user.screen_name, 16)}\n                  </a>\n               </div>\n            </div>\n         </div>\n         <a href={tweet.url} target=\"_blank\" rel=\"noreferrer\">\n            <span className=\"sr-only\">Link to tweet</span>\n            <Twitter className=\"size-5 items-start text-[#3BA9EE] transition-all ease-in-out hover:scale-105\" />\n         </a>\n      </div>\n   )\n}\n\nexport function TweetBody({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"break-words leading-normal tracking-tighter\">\n         {tweet.entities.map((entity, idx) => {\n            switch (entity.type) {\n               case \"url\":\n               case \"symbol\":\n               case \"hashtag\":\n               case \"mention\":\n                  return (\n                     <a\n                        key={idx}\n                        href={entity.href}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"text-sm font-normal text-gray-500\"\n                     >\n                        <span>{entity.text}</span>\n                     </a>\n                  )\n               case \"text\":\n                  return (\n                     <span\n                        key={idx}\n                        className=\"text-sm font-normal\"\n                        dangerouslySetInnerHTML={{ __html: entity.text }}\n                     />\n                  )\n            }\n         })}\n      </div>\n   )\n}\n\nexport function TweetMedia({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"flex flex-1 items-center justify-center\">\n         {tweet.video && (\n            <video\n               poster={tweet.video.poster}\n               autoPlay\n               loop\n               muted\n               playsInline\n               className=\"rounded-xl border shadow-sm\"\n            >\n               <source src={tweet.video.variants[0].src} type=\"video/mp4\" />\n               Your browser does not support the video tag.\n            </video>\n         )}\n         {tweet.photos && (\n            <div className=\"relative flex transform-gpu snap-x snap-mandatory gap-4 overflow-x-auto\">\n               <div className=\"shrink-0 snap-center sm:w-2\" />\n               {tweet.photos.map((photo) => (\n                  <img\n                     key={photo.url}\n                     src={photo.url}\n                     title={`Photo by ${tweet.user.name}`}\n                     alt={tweet.text}\n                     className=\"h-64 w-5/6 shrink-0 snap-center snap-always rounded-xl border object-cover shadow-sm\"\n                  />\n               ))}\n               <div className=\"shrink-0 snap-center sm:w-2\" />\n            </div>\n         )}\n         {!tweet.video &&\n            !tweet.photos &&\n            // @ts-expect-error is fine\n            tweet?.card?.binding_values?.thumbnail_image_large?.image_value\n               .url && (\n               <img\n                  src={\n                     // @ts-expect-error is fine\n                     tweet.card.binding_values.thumbnail_image_large.image_value\n                        .url\n                  }\n                  className=\"h-64 rounded-xl border object-cover shadow-sm\"\n               />\n            )}\n      </div>\n   )\n}\n\nexport function MagicTweet({\n   tweet,\n   components,\n   className,\n   ...props\n}: {\n   tweet: Tweet\n   components?: TwitterComponents\n   className?: string\n}) {\n   const enrichedTweet = enrichTweet(tweet)\n   return (\n      <div\n         className={ny(\n            \"relative flex size-full max-w-lg flex-col gap-2 overflow-hidden rounded-lg border p-4 backdrop-blur-md\",\n            className,\n         )}\n         {...props}\n      >\n         <TweetHeader tweet={enrichedTweet} />\n         <TweetBody tweet={enrichedTweet} />\n         <TweetMedia tweet={enrichedTweet} />\n      </div>\n   )\n}\n\n/**\n * TweetCard (Server Side Only)\n */\nexport async function TweetCard({\n   id,\n   components,\n   fallback = <TweetSkeleton />,\n   onError,\n   ...props\n}: TweetProps & {\n   className?: string\n}) {\n   const tweet = id\n      ? await getTweet(id).catch((err) => {\n           if (onError) onError(err)\n           else console.error(err)\n        })\n      : undefined\n\n   if (!tweet) {\n      const NotFound = components?.TweetNotFound || TweetNotFound\n      return <NotFound {...props} />\n   }\n\n   return (\n      <Suspense fallback={fallback}>\n         <MagicTweet tweet={tweet} {...props} />\n      </Suspense>\n   )\n}\n\nexport default TweetCard\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/typing-animation-demo.json b/apps/web/public/r/styles/default/typing-animation-demo.json
index bcfa1617..c494b28b 100644
--- a/apps/web/public/r/styles/default/typing-animation-demo.json
+++ b/apps/web/public/r/styles/default/typing-animation-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typing-animation-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typing-animation-demo.tsx",
-      "content": "import TypingAnimation from '~/registry/default/ui/typing-animation'\n\nexport default async function TextRevealDemo() {\n   return (\n      <TypingAnimation\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         text=\"Typing Animation\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/typing-animation-demo.tsx",
+      "content": "import TypingAnimation from \"~/registry/default/ui/typing-animation\"\n\nexport default async function TextRevealDemo() {\n   return (\n      <TypingAnimation\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         text=\"Typing Animation\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/typing-animation.json b/apps/web/public/r/styles/default/typing-animation.json
index cd0a4c6c..c5c439a9 100644
--- a/apps/web/public/r/styles/default/typing-animation.json
+++ b/apps/web/public/r/styles/default/typing-animation.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typing-animation",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/typing-animation.tsx",
-      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface TypingAnimationProps {\n   text: string\n   duration?: number\n   className?: string\n}\n\nexport default function TypingAnimation({\n   text,\n   duration = 200,\n   className,\n}: TypingAnimationProps) {\n   const [displayedText, setDisplayedText] = useState<string>('')\n   const [i, setI] = useState<number>(0)\n\n   useEffect(() => {\n      const typingEffect = setInterval(() => {\n         if (i < text.length) {\n            setDisplayedText(text.substring(0, i + 1))\n            setI(i + 1)\n         }\n         else {\n            clearInterval(typingEffect)\n         }\n      }, duration)\n\n      return () => {\n         clearInterval(typingEffect)\n      }\n   }, [duration, i])\n\n   return (\n      <h1\n         className={ny(\n            'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',\n            className,\n         )}\n      >\n         {displayedText || text}\n      </h1>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface TypingAnimationProps {\n   text: string\n   duration?: number\n   className?: string\n}\n\nexport default function TypingAnimation({\n   text,\n   duration = 200,\n   className,\n}: TypingAnimationProps) {\n   const [displayedText, setDisplayedText] = useState<string>(\"\")\n   const [i, setI] = useState<number>(0)\n\n   useEffect(() => {\n      const typingEffect = setInterval(() => {\n         if (i < text.length) {\n            setDisplayedText(text.substring(0, i + 1))\n            setI(i + 1)\n         } else {\n            clearInterval(typingEffect)\n         }\n      }, duration)\n\n      return () => {\n         clearInterval(typingEffect)\n      }\n   }, [duration, i])\n\n   return (\n      <h1\n         className={ny(\n            \"font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm\",\n            className,\n         )}\n      >\n         {displayedText || text}\n      </h1>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/typography-blockquote.json b/apps/web/public/r/styles/default/typography-blockquote.json
index fbe7256f..aa800618 100644
--- a/apps/web/public/r/styles/default/typography-blockquote.json
+++ b/apps/web/public/r/styles/default/typography-blockquote.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-blockquote",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-blockquote.tsx",
-      "content": "export default function TypographyBlockquote() {\n   return (\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n         \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n         they should pay for the privilege.\"\n      </blockquote>\n   )\n}\n",
+      "path": "examples/typography-blockquote.tsx",
+      "content": "export default function TypographyBlockquote() {\n   return (\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n         \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n         that they should pay for the privilege.\"\n      </blockquote>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-demo.json b/apps/web/public/r/styles/default/typography-demo.json
index 13973e19..1ac8901d 100644
--- a/apps/web/public/r/styles/default/typography-demo.json
+++ b/apps/web/public/r/styles/default/typography-demo.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-demo.tsx",
-      "content": "export default function TypographyDemo() {\n   return (\n      <div>\n         <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n            The Joke Tax Chronicles\n         </h1>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            Once upon a time, in a far-off land, there was a very lazy king who\n            spent all day lounging on his throne. One day, his advisors came to him\n            with a problem: the kingdom was running out of money.\n         </p>\n         <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n            The King's Plan\n         </h2>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king thought long and hard, and finally came up with\n            {' '}\n            <a\n               href=\"#\"\n               className=\"text-primary font-medium underline underline-offset-4\"\n            >\n               a brilliant plan\n            </a>\n            : he would tax the jokes in the kingdom.\n         </p>\n         <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n            \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n            that they should pay for the privilege.\"\n         </blockquote>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            The Joke Tax\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king's subjects were not amused. They grumbled and complained, but\n            the king was firm:\n         </p>\n         <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n            <li>1st level of puns: 5 gold coins</li>\n            <li>2nd level of jokes: 10 gold coins</li>\n            <li>3rd level of one-liners : 20 gold coins</li>\n         </ul>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            As a result, people stopped telling jokes, and the kingdom fell into a\n            gloom. But there was one person who refused to let the king's\n            foolishness get him down: a court jester named Jokester.\n         </p>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            Jokester's Revolt\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            Jokester began sneaking into the castle in the middle of the night and\n            leaving jokes all over the place: under the king's pillow, in his soup,\n            even in the royal toilet. The king was furious, but he couldn't seem to\n            stop Jokester.\n         </p>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            And then, one day, the people of the kingdom discovered that the jokes\n            left by Jokester were so funny that they couldn't help but laugh. And\n            once they started laughing, they couldn't stop.\n         </p>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            The People's Rebellion\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The people of the kingdom, feeling uplifted by the laughter, started to\n            tell jokes and puns again, and soon the entire kingdom was in on the\n            joke.\n         </p>\n         <div className=\"my-6 w-full overflow-y-auto\">\n            <table className=\"w-full\">\n               <thead>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        King's Treasury\n                     </th>\n                     <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        People's happiness\n                     </th>\n                  </tr>\n               </thead>\n               <tbody>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Empty\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Overflowing\n                     </td>\n                  </tr>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Modest\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Satisfied\n                     </td>\n                  </tr>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Full\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Ecstatic\n                     </td>\n                  </tr>\n               </tbody>\n            </table>\n         </div>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king, seeing how much happier his subjects were, realized the error\n            of his ways and repealed the joke tax. Jokester was declared a hero, and\n            the kingdom lived happily ever after.\n         </p>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The moral of the story is: never underestimate the power of a good laugh\n            and always be careful of bad ideas.\n         </p>\n      </div>\n   )\n}\n",
+      "path": "examples/typography-demo.tsx",
+      "content": "export default function TypographyDemo() {\n   return (\n      <div>\n         <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n            The Joke Tax Chronicles\n         </h1>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            Once upon a time, in a far-off land, there was a very lazy king who\n            spent all day lounging on his throne. One day, his advisors came to\n            him with a problem: the kingdom was running out of money.\n         </p>\n         <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n            The King's Plan\n         </h2>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king thought long and hard, and finally came up with{\" \"}\n            <a\n               href=\"#\"\n               className=\"text-primary font-medium underline underline-offset-4\"\n            >\n               a brilliant plan\n            </a>\n            : he would tax the jokes in the kingdom.\n         </p>\n         <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n            \"After all,\" he said, \"everyone enjoys a good joke, so it's only\n            fair that they should pay for the privilege.\"\n         </blockquote>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            The Joke Tax\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king's subjects were not amused. They grumbled and complained,\n            but the king was firm:\n         </p>\n         <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n            <li>1st level of puns: 5 gold coins</li>\n            <li>2nd level of jokes: 10 gold coins</li>\n            <li>3rd level of one-liners : 20 gold coins</li>\n         </ul>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            As a result, people stopped telling jokes, and the kingdom fell into\n            a gloom. But there was one person who refused to let the king's\n            foolishness get him down: a court jester named Jokester.\n         </p>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            Jokester's Revolt\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            Jokester began sneaking into the castle in the middle of the night\n            and leaving jokes all over the place: under the king's pillow, in\n            his soup, even in the royal toilet. The king was furious, but he\n            couldn't seem to stop Jokester.\n         </p>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            And then, one day, the people of the kingdom discovered that the\n            jokes left by Jokester were so funny that they couldn't help but\n            laugh. And once they started laughing, they couldn't stop.\n         </p>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            The People's Rebellion\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The people of the kingdom, feeling uplifted by the laughter, started\n            to tell jokes and puns again, and soon the entire kingdom was in on\n            the joke.\n         </p>\n         <div className=\"my-6 w-full overflow-y-auto\">\n            <table className=\"w-full\">\n               <thead>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        King's Treasury\n                     </th>\n                     <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        People's happiness\n                     </th>\n                  </tr>\n               </thead>\n               <tbody>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Empty\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Overflowing\n                     </td>\n                  </tr>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Modest\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Satisfied\n                     </td>\n                  </tr>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Full\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Ecstatic\n                     </td>\n                  </tr>\n               </tbody>\n            </table>\n         </div>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king, seeing how much happier his subjects were, realized the\n            error of his ways and repealed the joke tax. Jokester was declared a\n            hero, and the kingdom lived happily ever after.\n         </p>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The moral of the story is: never underestimate the power of a good\n            laugh and always be careful of bad ideas.\n         </p>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-h1.json b/apps/web/public/r/styles/default/typography-h1.json
index 7a14cfe9..40255cc4 100644
--- a/apps/web/public/r/styles/default/typography-h1.json
+++ b/apps/web/public/r/styles/default/typography-h1.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-h1",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-h1.tsx",
+      "path": "examples/typography-h1.tsx",
       "content": "export default function TypographyH1() {\n   return (\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n         Taxing Laughter: The Joke Tax Chronicles\n      </h1>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-h2.json b/apps/web/public/r/styles/default/typography-h2.json
index 618f3931..ffeecfb9 100644
--- a/apps/web/public/r/styles/default/typography-h2.json
+++ b/apps/web/public/r/styles/default/typography-h2.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-h2",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-h2.tsx",
+      "path": "examples/typography-h2.tsx",
       "content": "export default function TypographyH2() {\n   return (\n      <h2 className=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\">\n         The People of the Kingdom\n      </h2>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-h3.json b/apps/web/public/r/styles/default/typography-h3.json
index 5fb0d455..d00804e2 100644
--- a/apps/web/public/r/styles/default/typography-h3.json
+++ b/apps/web/public/r/styles/default/typography-h3.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-h3",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-h3.tsx",
+      "path": "examples/typography-h3.tsx",
       "content": "export default function TypographyH3() {\n   return (\n      <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n         The Joke Tax\n      </h3>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-h4.json b/apps/web/public/r/styles/default/typography-h4.json
index 0b5eea62..f50f9141 100644
--- a/apps/web/public/r/styles/default/typography-h4.json
+++ b/apps/web/public/r/styles/default/typography-h4.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-h4",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-h4.tsx",
+      "path": "examples/typography-h4.tsx",
       "content": "export default function TypographyH4() {\n   return (\n      <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n         People stopped telling jokes\n      </h4>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-inline-code.json b/apps/web/public/r/styles/default/typography-inline-code.json
index 28429f92..bf130c73 100644
--- a/apps/web/public/r/styles/default/typography-inline-code.json
+++ b/apps/web/public/r/styles/default/typography-inline-code.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-inline-code",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-inline-code.tsx",
+      "path": "examples/typography-inline-code.tsx",
       "content": "export default function TypographyInlineCode() {\n   return (\n      <code className=\"bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n         @radix-ui/react-alert-dialog\n      </code>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-large.json b/apps/web/public/r/styles/default/typography-large.json
index b08ab56b..28fd1848 100644
--- a/apps/web/public/r/styles/default/typography-large.json
+++ b/apps/web/public/r/styles/default/typography-large.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-large",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-large.tsx",
+      "path": "examples/typography-large.tsx",
       "content": "export default function TypographyLarge() {\n   return <div className=\"text-lg font-semibold\">Are you absolutely sure?</div>\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-lead.json b/apps/web/public/r/styles/default/typography-lead.json
index 93490110..1667e485 100644
--- a/apps/web/public/r/styles/default/typography-lead.json
+++ b/apps/web/public/r/styles/default/typography-lead.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-lead",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-lead.tsx",
-      "content": "export default function TypographyLead() {\n   return (\n      <p className=\"text-muted-foreground text-xl\">\n         A modal dialog that interrupts the user with important content and expects\n         a response.\n      </p>\n   )\n}\n",
+      "path": "examples/typography-lead.tsx",
+      "content": "export default function TypographyLead() {\n   return (\n      <p className=\"text-muted-foreground text-xl\">\n         A modal dialog that interrupts the user with important content and\n         expects a response.\n      </p>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-list.json b/apps/web/public/r/styles/default/typography-list.json
index 576319fe..92e98431 100644
--- a/apps/web/public/r/styles/default/typography-list.json
+++ b/apps/web/public/r/styles/default/typography-list.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-list",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-list.tsx",
+      "path": "examples/typography-list.tsx",
       "content": "export default function TypographyList() {\n   return (\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n         <li>1st level of puns: 5 gold coins</li>\n         <li>2nd level of jokes: 10 gold coins</li>\n         <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-muted.json b/apps/web/public/r/styles/default/typography-muted.json
index 326df2b1..9aee9a25 100644
--- a/apps/web/public/r/styles/default/typography-muted.json
+++ b/apps/web/public/r/styles/default/typography-muted.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-muted",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-muted.tsx",
+      "path": "examples/typography-muted.tsx",
       "content": "export default function TypographyMuted() {\n   return (\n      <p className=\"text-muted-foreground text-sm\">Enter your email address.</p>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-p.json b/apps/web/public/r/styles/default/typography-p.json
index 60029aa5..5694382f 100644
--- a/apps/web/public/r/styles/default/typography-p.json
+++ b/apps/web/public/r/styles/default/typography-p.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-p",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-p.tsx",
-      "content": "export default function TypographyP() {\n   return (\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n         The king, seeing how much happier his subjects were, realized the error of\n         his ways and repealed the joke tax.\n      </p>\n   )\n}\n",
+      "path": "examples/typography-p.tsx",
+      "content": "export default function TypographyP() {\n   return (\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n         The king, seeing how much happier his subjects were, realized the error\n         of his ways and repealed the joke tax.\n      </p>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-small.json b/apps/web/public/r/styles/default/typography-small.json
index 72d927d9..07807fca 100644
--- a/apps/web/public/r/styles/default/typography-small.json
+++ b/apps/web/public/r/styles/default/typography-small.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-small",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-small.tsx",
+      "path": "examples/typography-small.tsx",
       "content": "export default function TypographySmall() {\n   return (\n      <small className=\"text-sm font-medium leading-none\">Email address</small>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/typography-table.json b/apps/web/public/r/styles/default/typography-table.json
index c35a0c9f..a9499bab 100644
--- a/apps/web/public/r/styles/default/typography-table.json
+++ b/apps/web/public/r/styles/default/typography-table.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-table",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-table.tsx",
+      "path": "examples/typography-table.tsx",
       "content": "export default function TypographyTable() {\n   return (\n      <div className=\"my-6 w-full overflow-y-auto\">\n         <table className=\"w-full\">\n            <thead>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     King's Treasury\n                  </th>\n                  <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     People's happiness\n                  </th>\n               </tr>\n            </thead>\n            <tbody>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Empty\n                  </td>\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Overflowing\n                  </td>\n               </tr>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Modest\n                  </td>\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Satisfied\n                  </td>\n               </tr>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Full\n                  </td>\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Ecstatic\n                  </td>\n               </tr>\n            </tbody>\n         </table>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/use-anchor-observer.json b/apps/web/public/r/styles/default/use-anchor-observer.json
index 3f408022..e0155b0e 100644
--- a/apps/web/public/r/styles/default/use-anchor-observer.json
+++ b/apps/web/public/r/styles/default/use-anchor-observer.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "use-anchor-observer",
   "type": "registry:hook",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "hooks/use-anchor-observer.ts",
-      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\n\n/**\n * Find the active heading of page\n *\n * It selects the top heading by default, and the last item when reached the bottom of page.\n *\n * @param watch - An array of element ids to watch\n * @param single - only one active item at most\n * @returns Active anchor\n */\nexport function useAnchorObserver(watch: string[], single: boolean): string[] {\n   const [activeAnchor, setActiveAnchor] = useState<string[]>([])\n\n   useEffect(() => {\n      let visible: string[] = []\n      const observer = new IntersectionObserver(\n         (entries) => {\n            for (const entry of entries) {\n               if (entry.isIntersecting && !visible.includes(entry.target.id)) {\n                  visible = [...visible, entry.target.id]\n               }\n               else if (\n                  !entry.isIntersecting\n                  && visible.includes(entry.target.id)\n               ) {\n                  visible = visible.filter(v => v !== entry.target.id)\n               }\n            }\n\n            if (visible.length > 0)\n               setActiveAnchor(visible)\n         },\n         {\n            rootMargin: single ? '-80px 0% -70% 0%' : `-20px 0% -40% 0%`,\n            threshold: 1,\n         },\n      )\n\n      function onScroll(): void {\n         const element = document.scrollingElement\n         if (!element)\n            return\n\n         if (element.scrollTop === 0 && single) {\n            setActiveAnchor(watch.slice(0, 1))\n         }\n         else if (\n            element.scrollTop + element.clientHeight\n            >= element.scrollHeight - 6\n         ) {\n            setActiveAnchor((active) => {\n               return active.length > 0 && !single\n                  ? watch.slice(watch.indexOf(active[0]))\n                  : watch.slice(-1)\n            })\n         }\n      }\n\n      for (const heading of watch) {\n         const element = document.getElementById(heading)\n\n         if (element)\n            observer.observe(element)\n      }\n\n      onScroll()\n      window.addEventListener('scroll', onScroll)\n      return () => {\n         window.removeEventListener('scroll', onScroll)\n         observer.disconnect()\n      }\n   }, [single, watch])\n\n   return single ? activeAnchor.slice(0, 1) : activeAnchor\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\n/**\n * Find the active heading of page\n *\n * It selects the top heading by default, and the last item when reached the bottom of page.\n *\n * @param watch - An array of element ids to watch\n * @param single - only one active item at most\n * @returns Active anchor\n */\nexport function useAnchorObserver(watch: string[], single: boolean): string[] {\n   const [activeAnchor, setActiveAnchor] = useState<string[]>([])\n\n   useEffect(() => {\n      let visible: string[] = []\n      const observer = new IntersectionObserver(\n         (entries) => {\n            for (const entry of entries) {\n               if (entry.isIntersecting && !visible.includes(entry.target.id)) {\n                  visible = [...visible, entry.target.id]\n               } else if (\n                  !entry.isIntersecting &&\n                  visible.includes(entry.target.id)\n               ) {\n                  visible = visible.filter((v) => v !== entry.target.id)\n               }\n            }\n\n            if (visible.length > 0) setActiveAnchor(visible)\n         },\n         {\n            rootMargin: single ? \"-80px 0% -70% 0%\" : `-20px 0% -40% 0%`,\n            threshold: 1,\n         },\n      )\n\n      function onScroll(): void {\n         const element = document.scrollingElement\n         if (!element) return\n\n         if (element.scrollTop === 0 && single) {\n            setActiveAnchor(watch.slice(0, 1))\n         } else if (\n            element.scrollTop + element.clientHeight >=\n            element.scrollHeight - 6\n         ) {\n            setActiveAnchor((active) => {\n               return active.length > 0 && !single\n                  ? watch.slice(watch.indexOf(active[0]))\n                  : watch.slice(-1)\n            })\n         }\n      }\n\n      for (const heading of watch) {\n         const element = document.getElementById(heading)\n\n         if (element) observer.observe(element)\n      }\n\n      onScroll()\n      window.addEventListener(\"scroll\", onScroll)\n      return () => {\n         window.removeEventListener(\"scroll\", onScroll)\n         observer.disconnect()\n      }\n   }, [single, watch])\n\n   return single ? activeAnchor.slice(0, 1) : activeAnchor\n}\n",
       "type": "registry:hook",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/use-mobile.json b/apps/web/public/r/styles/default/use-mobile.json
index 9fae205b..c4dc65aa 100644
--- a/apps/web/public/r/styles/default/use-mobile.json
+++ b/apps/web/public/r/styles/default/use-mobile.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "use-mobile",
   "type": "registry:hook",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "hooks/use-mobile.tsx",
-      "content": "import * as React from 'react'\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n   React.useEffect(() => {\n      const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n      const onChange = () => {\n         setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n      }\n      mql.addEventListener('change', onChange)\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n      return () => mql.removeEventListener('change', onChange)\n   }, [])\n\n   return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n      undefined,\n   )\n\n   React.useEffect(() => {\n      const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n      const onChange = () => {\n         setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n      }\n      mql.addEventListener(\"change\", onChange)\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n      return () => mql.removeEventListener(\"change\", onChange)\n   }, [])\n\n   return !!isMobile\n}\n",
       "type": "registry:hook",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/use-on-change.json b/apps/web/public/r/styles/default/use-on-change.json
index 3bcc8945..77b1487f 100644
--- a/apps/web/public/r/styles/default/use-on-change.json
+++ b/apps/web/public/r/styles/default/use-on-change.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "use-on-change",
   "type": "registry:hook",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "hooks/use-on-change.ts",
-      "content": "'use client'\n\nimport { useState } from 'react'\n\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b)) {\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   }\n\n   return a !== b\n}\n\n/**\n * @param value - state to watch\n * @param onChange - when the state changed\n * @param isUpdated - a function that determines if the state is updated\n */\nexport function useOnChange<T>(\n   value: T,\n   onChange: (current: T, previous: T) => void,\n   isUpdated: (prev: T, current: T) => boolean = isDifferent,\n): void {\n   const [prev, setPrev] = useState<T>(value)\n\n   if (isUpdated(prev, value)) {\n      onChange(value, prev)\n      setPrev(value)\n   }\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b)) {\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   }\n\n   return a !== b\n}\n\n/**\n * @param value - state to watch\n * @param onChange - when the state changed\n * @param isUpdated - a function that determines if the state is updated\n */\nexport function useOnChange<T>(\n   value: T,\n   onChange: (current: T, previous: T) => void,\n   isUpdated: (prev: T, current: T) => boolean = isDifferent,\n): void {\n   const [prev, setPrev] = useState<T>(value)\n\n   if (isUpdated(prev, value)) {\n      onChange(value, prev)\n      setPrev(value)\n   }\n}\n",
       "type": "registry:hook",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/use-toast.json b/apps/web/public/r/styles/default/use-toast.json
index 6308d8fc..85402490 100644
--- a/apps/web/public/r/styles/default/use-toast.json
+++ b/apps/web/public/r/styles/default/use-toast.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "use-toast",
   "type": "registry:hook",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "hooks/use-toast.ts",
-      "content": "'use client'\n\n// Inspired by react-hot-toast library\nimport * as React from 'react'\n\nimport type {\n   ToastActionElement,\n   ToastProps,\n} from '~/registry/default/ui/toast'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n   id: string\n   title?: React.ReactNode\n   description?: React.ReactNode\n   action?: ToastActionElement\n}\n\nconst actionTypes = {\n   ADD_TOAST: 'ADD_TOAST',\n   UPDATE_TOAST: 'UPDATE_TOAST',\n   DISMISS_TOAST: 'DISMISS_TOAST',\n   REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n   count = (count + 1) % Number.MAX_SAFE_INTEGER\n   return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n   | {\n      type: ActionType['ADD_TOAST']\n      toast: ToasterToast\n   }\n   | {\n      type: ActionType['UPDATE_TOAST']\n      toast: Partial<ToasterToast>\n   }\n   | {\n      type: ActionType['DISMISS_TOAST']\n      toastId?: ToasterToast['id']\n   }\n   | {\n      type: ActionType['REMOVE_TOAST']\n      toastId?: ToasterToast['id']\n   }\n\ninterface State {\n   toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n   if (toastTimeouts.has(toastId)) {\n      return\n   }\n\n   const timeout = setTimeout(() => {\n      toastTimeouts.delete(toastId)\n      dispatch({\n         type: 'REMOVE_TOAST',\n         toastId,\n      })\n   }, TOAST_REMOVE_DELAY)\n\n   toastTimeouts.set(toastId, timeout)\n}\n\nexport function reducer(state: State, action: Action): State {\n   switch (action.type) {\n      case 'ADD_TOAST':\n         return {\n            ...state,\n            toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n         }\n\n      case 'UPDATE_TOAST':\n         return {\n            ...state,\n            toasts: state.toasts.map(t =>\n               t.id === action.toast.id ? { ...t, ...action.toast } : t,\n            ),\n         }\n\n      case 'DISMISS_TOAST': {\n         const { toastId } = action\n\n         // ! Side effects ! - This could be extracted into a dismissToast() action,\n         // but I'll keep it here for simplicity\n         if (toastId) {\n            addToRemoveQueue(toastId)\n         }\n         else {\n            state.toasts.forEach((toast) => {\n               addToRemoveQueue(toast.id)\n            })\n         }\n\n         return {\n            ...state,\n            toasts: state.toasts.map(t =>\n               t.id === toastId || toastId === undefined\n                  ? {\n                        ...t,\n                        open: false,\n                     }\n                  : t,\n            ),\n         }\n      }\n      case 'REMOVE_TOAST':\n         if (action.toastId === undefined) {\n            return {\n               ...state,\n               toasts: [],\n            }\n         }\n         return {\n            ...state,\n            toasts: state.toasts.filter(t => t.id !== action.toastId),\n         }\n   }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n   memoryState = reducer(memoryState, action)\n   listeners.forEach((listener) => {\n      listener(memoryState)\n   })\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast({ ...props }: Toast) {\n   const id = genId()\n\n   const update = (props: ToasterToast) =>\n      dispatch({\n         type: 'UPDATE_TOAST',\n         toast: { ...props, id },\n      })\n   const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })\n\n   dispatch({\n      type: 'ADD_TOAST',\n      toast: {\n         ...props,\n         id,\n         open: true,\n         onOpenChange: (open) => {\n            if (!open)\n               dismiss()\n         },\n      },\n   })\n\n   return {\n      id,\n      dismiss,\n      update,\n   }\n}\n\nfunction useToast() {\n   const [state, setState] = React.useState<State>(memoryState)\n\n   React.useEffect(() => {\n      listeners.push(setState)\n      return () => {\n         const index = listeners.indexOf(setState)\n         if (index > -1) {\n            listeners.splice(index, 1)\n         }\n      }\n   }, [state])\n\n   return {\n      ...state,\n      toast,\n      dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),\n   }\n}\n\nexport { useToast, toast }\n",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type { ToastActionElement, ToastProps } from \"~/registry/default/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n   id: string\n   title?: React.ReactNode\n   description?: React.ReactNode\n   action?: ToastActionElement\n}\n\nconst actionTypes = {\n   ADD_TOAST: \"ADD_TOAST\",\n   UPDATE_TOAST: \"UPDATE_TOAST\",\n   DISMISS_TOAST: \"DISMISS_TOAST\",\n   REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n   count = (count + 1) % Number.MAX_SAFE_INTEGER\n   return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n   | {\n        type: ActionType[\"ADD_TOAST\"]\n        toast: ToasterToast\n     }\n   | {\n        type: ActionType[\"UPDATE_TOAST\"]\n        toast: Partial<ToasterToast>\n     }\n   | {\n        type: ActionType[\"DISMISS_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n   | {\n        type: ActionType[\"REMOVE_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n\ninterface State {\n   toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n   if (toastTimeouts.has(toastId)) {\n      return\n   }\n\n   const timeout = setTimeout(() => {\n      toastTimeouts.delete(toastId)\n      dispatch({\n         type: \"REMOVE_TOAST\",\n         toastId,\n      })\n   }, TOAST_REMOVE_DELAY)\n\n   toastTimeouts.set(toastId, timeout)\n}\n\nexport function reducer(state: State, action: Action): State {\n   switch (action.type) {\n      case \"ADD_TOAST\":\n         return {\n            ...state,\n            toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n         }\n\n      case \"UPDATE_TOAST\":\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === action.toast.id ? { ...t, ...action.toast } : t,\n            ),\n         }\n\n      case \"DISMISS_TOAST\": {\n         const { toastId } = action\n\n         // ! Side effects ! - This could be extracted into a dismissToast() action,\n         // but I'll keep it here for simplicity\n         if (toastId) {\n            addToRemoveQueue(toastId)\n         } else {\n            state.toasts.forEach((toast) => {\n               addToRemoveQueue(toast.id)\n            })\n         }\n\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === toastId || toastId === undefined\n                  ? {\n                       ...t,\n                       open: false,\n                    }\n                  : t,\n            ),\n         }\n      }\n      case \"REMOVE_TOAST\":\n         if (action.toastId === undefined) {\n            return {\n               ...state,\n               toasts: [],\n            }\n         }\n         return {\n            ...state,\n            toasts: state.toasts.filter((t) => t.id !== action.toastId),\n         }\n   }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n   memoryState = reducer(memoryState, action)\n   listeners.forEach((listener) => {\n      listener(memoryState)\n   })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n   const id = genId()\n\n   const update = (props: ToasterToast) =>\n      dispatch({\n         type: \"UPDATE_TOAST\",\n         toast: { ...props, id },\n      })\n   const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n   dispatch({\n      type: \"ADD_TOAST\",\n      toast: {\n         ...props,\n         id,\n         open: true,\n         onOpenChange: (open) => {\n            if (!open) dismiss()\n         },\n      },\n   })\n\n   return {\n      id,\n      dismiss,\n      update,\n   }\n}\n\nfunction useToast() {\n   const [state, setState] = React.useState<State>(memoryState)\n\n   React.useEffect(() => {\n      listeners.push(setState)\n      return () => {\n         const index = listeners.indexOf(setState)\n         if (index > -1) {\n            listeners.splice(index, 1)\n         }\n      }\n   }, [state])\n\n   return {\n      ...state,\n      toast,\n      dismiss: (toastId?: string) =>\n         dispatch({ type: \"DISMISS_TOAST\", toastId }),\n   }\n}\n\nexport { useToast, toast }\n",
       "type": "registry:hook",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/utils.json b/apps/web/public/r/styles/default/utils.json
index 97968d71..fc7c37ea 100644
--- a/apps/web/public/r/styles/default/utils.json
+++ b/apps/web/public/r/styles/default/utils.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "utils",
   "type": "registry:lib",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "clsx",
     "tailwind-merge"
@@ -8,7 +10,7 @@
   "files": [
     {
       "path": "lib/utils.ts",
-      "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function ny(...inputs: ClassValue[]) {\n   return twMerge(clsx(inputs))\n}\n",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function ny(...inputs: ClassValue[]) {\n   return twMerge(clsx(inputs))\n}\n",
       "type": "registry:lib",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/default/v0-login-01.json b/apps/web/public/r/styles/default/v0-login-01.json
new file mode 100644
index 00000000..118864ab
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-login-01.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-login-01",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "internal/login-01.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"~/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/components/ui/card\"\nimport { Input } from \"~/components/ui/input\"\nimport { Label } from \"~/components/ui/label\"\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-screen w-full items-center justify-center px-4\">\n         <Card className=\"mx-auto max-w-sm\">\n            <CardHeader>\n               <CardTitle className=\"text-2xl\">Login</CardTitle>\n               <CardDescription>\n                  Enter your email below to login to your account\n               </CardDescription>\n            </CardHeader>\n            <CardContent>\n               <div className=\"grid gap-4\">\n                  <div className=\"grid gap-2\">\n                     <Label htmlFor=\"email\">Email</Label>\n                     <Input\n                        id=\"email\"\n                        type=\"email\"\n                        placeholder=\"m@example.com\"\n                        required\n                     />\n                  </div>\n                  <div className=\"grid gap-2\">\n                     <div className=\"flex items-center\">\n                        <Label htmlFor=\"password\">Password</Label>\n                        <Link\n                           href=\"#\"\n                           className=\"ml-auto inline-block text-sm underline\"\n                        >\n                           Forgot your password?\n                        </Link>\n                     </div>\n                     <Input id=\"password\" type=\"password\" required />\n                  </div>\n                  <Button type=\"submit\" className=\"w-full\">\n                     Login\n                  </Button>\n                  <Button variant=\"outline\" className=\"w-full\">\n                     Login with Google\n                  </Button>\n               </div>\n               <div className=\"mt-4 text-center text-sm\">\n                  Don&apos;t have an account?{\" \"}\n                  <Link href=\"#\" className=\"underline\">\n                     Sign up\n                  </Link>\n               </div>\n            </CardContent>\n         </Card>\n      </div>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-01.json b/apps/web/public/r/styles/default/v0-sidebar-01.json
new file mode 100644
index 00000000..f394bb63
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-01.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-01",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-01.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Label } from \"~/components/ui/label\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   const [selectedVersion, setSelectedVersion] = React.useState(\n      data.versions[0],\n   )\n\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                                 <GalleryVerticalEnd className=\"size-4\" />\n                              </div>\n                              <div className=\"flex flex-col gap-0.5 leading-none\">\n                                 <span className=\"font-semibold\">\n                                    Documentation\n                                 </span>\n                                 <span className=\"\">v{selectedVersion}</span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                           align=\"start\"\n                        >\n                           {data.versions.map((version) => (\n                              <DropdownMenuItem\n                                 key={version}\n                                 onSelect={() => setSelectedVersion(version)}\n                              >\n                                 v{version}{\" \"}\n                                 {version === selectedVersion && (\n                                    <Check className=\"ml-auto\" />\n                                 )}\n                              </DropdownMenuItem>\n                           ))}\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n               <form>\n                  <SidebarGroup className=\"py-0\">\n                     <SidebarGroupContent className=\"relative\">\n                        <Label htmlFor=\"search\" className=\"sr-only\">\n                           Search\n                        </Label>\n                        <SidebarInput\n                           id=\"search\"\n                           placeholder=\"Search the docs...\"\n                           className=\"pl-8\"\n                        />\n                        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               </form>\n            </SidebarHeader>\n            <SidebarContent>\n               {/* We create a SidebarGroup for each parent. */}\n               {data.navMain.map((item) => (\n                  <SidebarGroup key={item.title}>\n                     <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n                     <SidebarGroupContent>\n                        <SidebarMenu>\n                           {item.items.map((item) => (\n                              <SidebarMenuItem key={item.title}>\n                                 <SidebarMenuButton\n                                    asChild\n                                    isActive={item.isActive}\n                                 >\n                                    <a href={item.url}>{item.title}</a>\n                                 </SidebarMenuButton>\n                              </SidebarMenuItem>\n                           ))}\n                        </SidebarMenu>\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               ))}\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": "components/sidebar-01.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-02.json b/apps/web/public/r/styles/default/v0-sidebar-02.json
new file mode 100644
index 00000000..13151fb8
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-02.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-02",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-02.tsx",
+      "content": "\"use client\"\n\nimport {\n   Check,\n   ChevronRight,\n   ChevronsUpDown,\n   GalleryVerticalEnd,\n   Search,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Label } from \"~/components/ui/label\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   const [selectedVersion, setSelectedVersion] = React.useState(\n      data.versions[0],\n   )\n\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                                 <GalleryVerticalEnd className=\"size-4\" />\n                              </div>\n                              <div className=\"flex flex-col gap-0.5 leading-none\">\n                                 <span className=\"font-semibold\">\n                                    Documentation\n                                 </span>\n                                 <span className=\"\">v{selectedVersion}</span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                           align=\"start\"\n                        >\n                           {data.versions.map((version) => (\n                              <DropdownMenuItem\n                                 key={version}\n                                 onSelect={() => setSelectedVersion(version)}\n                              >\n                                 v{version}{\" \"}\n                                 {version === selectedVersion && (\n                                    <Check className=\"ml-auto\" />\n                                 )}\n                              </DropdownMenuItem>\n                           ))}\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n               <form>\n                  <SidebarGroup className=\"py-0\">\n                     <SidebarGroupContent className=\"relative\">\n                        <Label htmlFor=\"search\" className=\"sr-only\">\n                           Search\n                        </Label>\n                        <SidebarInput\n                           id=\"search\"\n                           placeholder=\"Search the docs...\"\n                           className=\"pl-8\"\n                        />\n                        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               </form>\n            </SidebarHeader>\n            <SidebarContent className=\"gap-0\">\n               {/* We create a collapsible SidebarGroup for each parent. */}\n               {data.navMain.map((item) => (\n                  <Collapsible\n                     key={item.title}\n                     title={item.title}\n                     defaultOpen\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroup>\n                        <SidebarGroupLabel\n                           asChild\n                           className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                        >\n                           <CollapsibleTrigger>\n                              {item.title}{\" \"}\n                              <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                           </CollapsibleTrigger>\n                        </SidebarGroupLabel>\n                        <CollapsibleContent>\n                           <SidebarGroupContent>\n                              <SidebarMenu>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuItem key={item.title}>\n                                       <SidebarMenuButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </CollapsibleContent>\n                     </SidebarGroup>\n                  </Collapsible>\n               ))}\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-03.json b/apps/web/public/r/styles/default/v0-sidebar-03.json
new file mode 100644
index 00000000..654792f5
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-03.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-03",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-03.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Label } from \"~/components/ui/label\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n               <div className=\"flex items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-04.json b/apps/web/public/r/styles/default/v0-sidebar-04.json
new file mode 100644
index 00000000..ddfee841
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-04.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-04",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-04.tsx",
+      "content": "\"use client\"\n\nimport { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"19rem\",\n            } as React.CSSProperties\n         }\n      >\n         <Sidebar variant=\"floating\">\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu className=\"gap-2\">\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-05.json b/apps/web/public/r/styles/default/v0-sidebar-05.json
new file mode 100644
index 00000000..f13cfe8a
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-05.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-05",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-05.tsx",
+      "content": "import { GalleryVerticalEnd, Minus, Plus, Search } from \"lucide-react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport { Label } from \"~/components/ui/label\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n               <form>\n                  <SidebarGroup className=\"py-0\">\n                     <SidebarGroupContent className=\"relative\">\n                        <Label htmlFor=\"search\" className=\"sr-only\">\n                           Search\n                        </Label>\n                        <SidebarInput\n                           id=\"search\"\n                           placeholder=\"Search the docs...\"\n                           className=\"pl-8\"\n                        />\n                        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               </form>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu>\n                     {data.navMain.map((item, index) => (\n                        <Collapsible\n                           key={item.title}\n                           defaultOpen={index === 1}\n                           className=\"group/collapsible\"\n                        >\n                           <SidebarMenuItem>\n                              <CollapsibleTrigger asChild>\n                                 <SidebarMenuButton>\n                                    {item.title}{\" \"}\n                                    <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                                    <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                                 </SidebarMenuButton>\n                              </CollapsibleTrigger>\n                              {item.items?.length ? (\n                                 <CollapsibleContent>\n                                    <SidebarMenuSub>\n                                       {item.items.map((item) => (\n                                          <SidebarMenuSubItem key={item.title}>\n                                             <SidebarMenuSubButton\n                                                asChild\n                                                isActive={item.isActive}\n                                             >\n                                                <a href={item.url}>\n                                                   {item.title}\n                                                </a>\n                                             </SidebarMenuSubButton>\n                                          </SidebarMenuSubItem>\n                                       ))}\n                                    </SidebarMenuSub>\n                                 </CollapsibleContent>\n                              ) : null}\n                           </SidebarMenuItem>\n                        </Collapsible>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-06.json b/apps/web/public/r/styles/default/v0-sidebar-06.json
new file mode 100644
index 00000000..c18f6c83
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-06.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-06",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-06.tsx",
+      "content": "\"use client\"\n\nimport { GalleryVerticalEnd, MoreHorizontal } from \"lucide-react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport { Button } from \"~/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/components/ui/card\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n   useSidebar,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <DropdownMenu key={item.title}>\n                           <SidebarMenuItem>\n                              <DropdownMenuTrigger asChild>\n                                 <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                                    {item.title}{\" \"}\n                                    <MoreHorizontal className=\"ml-auto\" />\n                                 </SidebarMenuButton>\n                              </DropdownMenuTrigger>\n                              {item.items?.length ? (\n                                 <DropdownMenuContent\n                                    side=\"bottom\"\n                                    align=\"end\"\n                                    className=\"min-w-56 rounded-lg\"\n                                 >\n                                    {item.items.map((item) => (\n                                       <DropdownMenuItem\n                                          asChild\n                                          key={item.title}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </DropdownMenuItem>\n                                    ))}\n                                 </DropdownMenuContent>\n                              ) : null}\n                           </SidebarMenuItem>\n                        </DropdownMenu>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <div className=\"p-1\">\n                  <Card className=\"shadow-none\">\n                     <form>\n                        <CardHeader className=\"p-4 pb-0\">\n                           <CardTitle className=\"text-sm\">\n                              Subscribe to our newsletter\n                           </CardTitle>\n                           <CardDescription>\n                              Opt-in to receive updates and news about the\n                              sidebar.\n                           </CardDescription>\n                        </CardHeader>\n                        <CardContent className=\"grid gap-2.5 p-4\">\n                           <SidebarInput type=\"email\" placeholder=\"Email\" />\n                           <Button\n                              className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n                              size=\"sm\"\n                           >\n                              Subscribe\n                           </Button>\n                        </CardContent>\n                     </form>\n                  </Card>\n               </div>\n            </SidebarFooter>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-07.json b/apps/web/public/r/styles/default/v0-sidebar-07.json
new file mode 100644
index 00000000..5e40fc49
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-07.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-07",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-07.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   BadgeCheck,\n   Bell,\n   BookOpen,\n   Bot,\n   ChevronRight,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   Folder,\n   Forward,\n   Frame,\n   GalleryVerticalEnd,\n   LogOut,\n   Map,\n   MoreHorizontal,\n   PieChart,\n   Plus,\n   Settings2,\n   Sparkles,\n   SquareTerminal,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: GalleryVerticalEnd,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport default function Page() {\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 asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                                 <activeTeam.logo className=\"size-4\" />\n                              </div>\n                              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                 <span className=\"truncate font-semibold\">\n                                    {activeTeam.name}\n                                 </span>\n                                 <span className=\"truncate text-xs\">\n                                    {activeTeam.plan}\n                                 </span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                           align=\"start\"\n                           side=\"bottom\"\n                           sideOffset={4}\n                        >\n                           <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                              Teams\n                           </DropdownMenuLabel>\n                           {data.teams.map((team, index) => (\n                              <DropdownMenuItem\n                                 key={team.name}\n                                 onClick={() => setActiveTeam(team)}\n                                 className=\"gap-2 p-2\"\n                              >\n                                 <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                                    <team.logo className=\"size-4 shrink-0\" />\n                                 </div>\n                                 {team.name}\n                                 <DropdownMenuShortcut>\n                                    ⌘{index + 1}\n                                 </DropdownMenuShortcut>\n                              </DropdownMenuItem>\n                           ))}\n                           <DropdownMenuSeparator />\n                           <DropdownMenuItem className=\"gap-2 p-2\">\n                              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                                 <Plus className=\"size-4\" />\n                              </div>\n                              <div className=\"font-medium text-muted-foreground\">\n                                 Add team\n                              </div>\n                           </DropdownMenuItem>\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                           asChild\n                           defaultOpen={item.isActive}\n                           className=\"group/collapsible\"\n                        >\n                           <SidebarMenuItem>\n                              <CollapsibleTrigger asChild>\n                                 <SidebarMenuButton tooltip={item.title}>\n                                    {item.icon && <item.icon />}\n                                    <span>{item.title}</span>\n                                    <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                                 </SidebarMenuButton>\n                              </CollapsibleTrigger>\n                              <CollapsibleContent>\n                                 <SidebarMenuSub>\n                                    {item.items?.map((subItem) => (\n                                       <SidebarMenuSubItem key={subItem.title}>\n                                          <SidebarMenuSubButton asChild>\n                                             <a href={subItem.url}>\n                                                <span>{subItem.title}</span>\n                                             </a>\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 asChild>\n                              <a href={item.url}>\n                                 <item.icon />\n                                 <span>{item.name}</span>\n                              </a>\n                           </SidebarMenuButton>\n                           <DropdownMenu>\n                              <DropdownMenuTrigger asChild>\n                                 <SidebarMenuAction showOnHover>\n                                    <MoreHorizontal />\n                                    <span className=\"sr-only\">More</span>\n                                 </SidebarMenuAction>\n                              </DropdownMenuTrigger>\n                              <DropdownMenuContent\n                                 className=\"w-48 rounded-lg\"\n                                 side=\"bottom\"\n                                 align=\"end\"\n                              >\n                                 <DropdownMenuItem>\n                                    <Folder className=\"text-muted-foreground\" />\n                                    <span>View Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuItem>\n                                    <Forward className=\"text-muted-foreground\" />\n                                    <span>Share Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuSeparator />\n                                 <DropdownMenuItem>\n                                    <Trash2 className=\"text-muted-foreground\" />\n                                    <span>Delete Project</span>\n                                 </DropdownMenuItem>\n                              </DropdownMenuContent>\n                           </DropdownMenu>\n                        </SidebarMenuItem>\n                     ))}\n                     <SidebarMenuItem>\n                        <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                           <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                           <span>More</span>\n                        </SidebarMenuButton>\n                     </SidebarMenuItem>\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <Avatar className=\"h-8 w-8 rounded-lg\">\n                                 <AvatarImage\n                                    src={data.user.avatar}\n                                    alt={data.user.name}\n                                 />\n                                 <AvatarFallback className=\"rounded-lg\">\n                                    CN\n                                 </AvatarFallback>\n                              </Avatar>\n                              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                 <span className=\"truncate font-semibold\">\n                                    {data.user.name}\n                                 </span>\n                                 <span className=\"truncate text-xs\">\n                                    {data.user.email}\n                                 </span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto size-4\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                           side=\"bottom\"\n                           align=\"end\"\n                           sideOffset={4}\n                        >\n                           <DropdownMenuLabel className=\"p-0 font-normal\">\n                              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                                 <Avatar className=\"h-8 w-8 rounded-lg\">\n                                    <AvatarImage\n                                       src={data.user.avatar}\n                                       alt={data.user.name}\n                                    />\n                                    <AvatarFallback className=\"rounded-lg\">\n                                       CN\n                                    </AvatarFallback>\n                                 </Avatar>\n                                 <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                    <span className=\"truncate font-semibold\">\n                                       {data.user.name}\n                                    </span>\n                                    <span className=\"truncate text-xs\">\n                                       {data.user.email}\n                                    </span>\n                                 </div>\n                              </div>\n                           </DropdownMenuLabel>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <Sparkles />\n                                 Upgrade to Pro\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <BadgeCheck />\n                                 Account\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <CreditCard />\n                                 Billing\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <Bell />\n                                 Notifications\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuItem>\n                              <LogOut />\n                              Log out\n                           </DropdownMenuItem>\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 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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-08.json b/apps/web/public/r/styles/default/v0-sidebar-08.json
new file mode 100644
index 00000000..34fc772d
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-08.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-08",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-08.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   BookOpen,\n   Bot,\n   ChevronRight,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   Folder,\n   Frame,\n   LifeBuoy,\n   LogOut,\n   Map,\n   MoreHorizontal,\n   PieChart,\n   Send,\n   Settings2,\n   Share,\n   Sparkles,\n   SquareTerminal,\n   Trash2,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: \"Support\",\n         url: \"#\",\n         icon: LifeBuoy,\n      },\n      {\n         title: \"Feedback\",\n         url: \"#\",\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: \"Design Engineering\",\n         url: \"#\",\n         icon: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <Sidebar variant=\"inset\">\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">\n                                 Acme Inc\n                              </span>\n                              <span className=\"truncate text-xs\">\n                                 Enterprise\n                              </span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\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                           asChild\n                           defaultOpen={item.isActive}\n                        >\n                           <SidebarMenuItem>\n                              <SidebarMenuButton asChild tooltip={item.title}>\n                                 <a href={item.url}>\n                                    <item.icon />\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              {item.items?.length ? (\n                                 <>\n                                    <CollapsibleTrigger asChild>\n                                       <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                          <ChevronRight />\n                                          <span className=\"sr-only\">\n                                             Toggle\n                                          </span>\n                                       </SidebarMenuAction>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent>\n                                       <SidebarMenuSub>\n                                          {item.items?.map((subItem) => (\n                                             <SidebarMenuSubItem\n                                                key={subItem.title}\n                                             >\n                                                <SidebarMenuSubButton asChild>\n                                                   <a href={subItem.url}>\n                                                      <span>\n                                                         {subItem.title}\n                                                      </span>\n                                                   </a>\n                                                </SidebarMenuSubButton>\n                                             </SidebarMenuSubItem>\n                                          ))}\n                                       </SidebarMenuSub>\n                                    </CollapsibleContent>\n                                 </>\n                              ) : null}\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 asChild>\n                              <a href={item.url}>\n                                 <item.icon />\n                                 <span>{item.name}</span>\n                              </a>\n                           </SidebarMenuButton>\n                           <DropdownMenu>\n                              <DropdownMenuTrigger asChild>\n                                 <SidebarMenuAction showOnHover>\n                                    <MoreHorizontal />\n                                    <span className=\"sr-only\">More</span>\n                                 </SidebarMenuAction>\n                              </DropdownMenuTrigger>\n                              <DropdownMenuContent\n                                 className=\"w-48\"\n                                 side=\"bottom\"\n                                 align=\"end\"\n                              >\n                                 <DropdownMenuItem>\n                                    <Folder className=\"text-muted-foreground\" />\n                                    <span>View Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuItem>\n                                    <Share className=\"text-muted-foreground\" />\n                                    <span>Share Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuSeparator />\n                                 <DropdownMenuItem>\n                                    <Trash2 className=\"text-muted-foreground\" />\n                                    <span>Delete Project</span>\n                                 </DropdownMenuItem>\n                              </DropdownMenuContent>\n                           </DropdownMenu>\n                        </SidebarMenuItem>\n                     ))}\n                     <SidebarMenuItem>\n                        <SidebarMenuButton>\n                           <MoreHorizontal />\n                           <span>More</span>\n                        </SidebarMenuButton>\n                     </SidebarMenuItem>\n                  </SidebarMenu>\n               </SidebarGroup>\n               <SidebarGroup className=\"mt-auto\">\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {data.navSecondary.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton asChild size=\"sm\">\n                                 <a href={item.url}>\n                                    <item.icon />\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <Avatar className=\"h-8 w-8 rounded-lg\">\n                                 <AvatarImage\n                                    src={data.user.avatar}\n                                    alt={data.user.name}\n                                 />\n                                 <AvatarFallback className=\"rounded-lg\">\n                                    CN\n                                 </AvatarFallback>\n                              </Avatar>\n                              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                 <span className=\"truncate font-semibold\">\n                                    {data.user.name}\n                                 </span>\n                                 <span className=\"truncate text-xs\">\n                                    {data.user.email}\n                                 </span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto size-4\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                           side=\"bottom\"\n                           align=\"end\"\n                           sideOffset={4}\n                        >\n                           <DropdownMenuLabel className=\"p-0 font-normal\">\n                              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                                 <Avatar className=\"h-8 w-8 rounded-lg\">\n                                    <AvatarImage\n                                       src={data.user.avatar}\n                                       alt={data.user.name}\n                                    />\n                                    <AvatarFallback className=\"rounded-lg\">\n                                       CN\n                                    </AvatarFallback>\n                                 </Avatar>\n                                 <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                    <span className=\"truncate font-semibold\">\n                                       {data.user.name}\n                                    </span>\n                                    <span className=\"truncate text-xs\">\n                                       {data.user.email}\n                                    </span>\n                                 </div>\n                              </div>\n                           </DropdownMenuLabel>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <Sparkles />\n                                 Upgrade to Pro\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <BadgeCheck />\n                                 Account\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <CreditCard />\n                                 Billing\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <Bell />\n                                 Notifications\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuItem>\n                              <LogOut />\n                              Log out\n                           </DropdownMenuItem>\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarFooter>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2\">\n               <div className=\"flex items-center gap-2 px-4\">\n                  <SidebarTrigger className=\"-ml-1\" />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-09.json b/apps/web/public/r/styles/default/v0-sidebar-09.json
new file mode 100644
index 00000000..f0dba08e
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-09.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-09",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-09.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArchiveX,\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   File,\n   Inbox,\n   LogOut,\n   Send,\n   Sparkles,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Label } from \"~/components/ui/label\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n   useSidebar,\n} from \"~/components/ui/sidebar\"\nimport { Switch } from \"~/components/ui/switch\"\n\n// This is sample data\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         isActive: true,\n      },\n      {\n         title: \"Drafts\",\n         url: \"#\",\n         icon: File,\n         isActive: false,\n      },\n      {\n         title: \"Sent\",\n         url: \"#\",\n         icon: Send,\n         isActive: false,\n      },\n      {\n         title: \"Junk\",\n         url: \"#\",\n         icon: ArchiveX,\n         isActive: false,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n         isActive: false,\n      },\n   ],\n   mails: [\n      {\n         name: \"William Smith\",\n         email: \"williamsmith@example.com\",\n         subject: \"Meeting Tomorrow\",\n         date: \"09:34 AM\",\n         teaser:\n            \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n      },\n      {\n         name: \"Alice Smith\",\n         email: \"alicesmith@example.com\",\n         subject: \"Re: Project Update\",\n         date: \"Yesterday\",\n         teaser:\n            \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n      },\n      {\n         name: \"Bob Johnson\",\n         email: \"bobjohnson@example.com\",\n         subject: \"Weekend Plans\",\n         date: \"2 days ago\",\n         teaser:\n            \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n      },\n      {\n         name: \"Emily Davis\",\n         email: \"emilydavis@example.com\",\n         subject: \"Re: Question about Budget\",\n         date: \"2 days ago\",\n         teaser:\n            \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n      },\n      {\n         name: \"Michael Wilson\",\n         email: \"michaelwilson@example.com\",\n         subject: \"Important Announcement\",\n         date: \"1 week ago\",\n         teaser:\n            \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n      },\n      {\n         name: \"Sarah Brown\",\n         email: \"sarahbrown@example.com\",\n         subject: \"Re: Feedback on Proposal\",\n         date: \"1 week ago\",\n         teaser:\n            \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n      },\n      {\n         name: \"David Lee\",\n         email: \"davidlee@example.com\",\n         subject: \"New Project Idea\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n      },\n      {\n         name: \"Olivia Wilson\",\n         email: \"oliviawilson@example.com\",\n         subject: \"Vacation Plans\",\n         date: \"1 week ago\",\n         teaser:\n            \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n      },\n      {\n         name: \"James Martin\",\n         email: \"jamesmartin@example.com\",\n         subject: \"Re: Conference Registration\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n      },\n      {\n         name: \"Sophia White\",\n         email: \"sophiawhite@example.com\",\n         subject: \"Team Dinner\",\n         date: \"1 week ago\",\n         teaser:\n            \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"350px\",\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Inbox</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   // Note: I'm using state to show active item.\n   // IRL you should use the url/router.\n   const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n   const [mails, setMails] = React.useState(data.mails)\n   const { setOpen } = useSidebar()\n\n   return (\n      <Sidebar\n         collapsible=\"icon\"\n         className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n         {...props}\n      >\n         {/* This is the first sidebar */}\n         {/* We disable collapsible and adjust width to icon. */}\n         {/* This will make the sidebar appear as icons. */}\n         <Sidebar\n            collapsible=\"none\"\n            className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n         >\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton\n                        size=\"lg\"\n                        asChild\n                        className=\"md:h-8 md:p-0\"\n                     >\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">\n                                 Acme Inc\n                              </span>\n                              <span className=\"truncate text-xs\">\n                                 Enterprise\n                              </span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent className=\"px-1.5 md:px-0\">\n                     <SidebarMenu>\n                        {data.navMain.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 tooltip={{\n                                    children: item.title,\n                                    hidden: false,\n                                 }}\n                                 onClick={() => {\n                                    setActiveItem(item)\n                                    const mail = data.mails.sort(\n                                       () => Math.random() - 0.5,\n                                    )\n                                    setMails(\n                                       mail.slice(\n                                          0,\n                                          Math.max(\n                                             5,\n                                             Math.floor(Math.random() * 10) + 1,\n                                          ),\n                                       ),\n                                    )\n                                    setOpen(true)\n                                 }}\n                                 isActive={activeItem.title === item.title}\n                                 className=\"px-2.5 md:px-2\"\n                              >\n                                 <item.icon />\n                                 <span>{item.title}</span>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <NavUser user={data.user} />\n            </SidebarFooter>\n         </Sidebar>\n\n         {/* This is the second sidebar */}\n         {/* We disable collapsible and let it fill remaining space */}\n         <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n            <SidebarHeader className=\"gap-3.5 border-b p-4\">\n               <div className=\"flex w-full items-center justify-between\">\n                  <div className=\"text-base font-medium text-foreground\">\n                     {activeItem.title}\n                  </div>\n                  <Label className=\"flex items-center gap-2 text-sm\">\n                     <span>Unreads</span>\n                     <Switch className=\"shadow-none\" />\n                  </Label>\n               </div>\n               <SidebarInput placeholder=\"Type to search...\" />\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup className=\"px-0\">\n                  <SidebarGroupContent>\n                     {mails.map((mail) => (\n                        <a\n                           href=\"#\"\n                           key={mail.email}\n                           className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                        >\n                           <div className=\"flex w-full items-center gap-2\">\n                              <span>{mail.name}</span>{\" \"}\n                              <span className=\"ml-auto text-xs\">\n                                 {mail.date}\n                              </span>\n                           </div>\n                           <span className=\"font-medium\">{mail.subject}</span>\n                           <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                              {mail.teaser}\n                           </span>\n                        </a>\n                     ))}\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </Sidebar>\n   )\n}\n\nfunction NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-10.json b/apps/web/public/r/styles/default/v0-sidebar-10.json
new file mode 100644
index 00000000..bfe9af7e
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-10.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-10",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-10.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowDown,\n   ArrowUp,\n   ArrowUpRight,\n   AudioWaveform,\n   Bell,\n   Blocks,\n   Calendar,\n   ChevronDown,\n   ChevronRight,\n   Command,\n   Copy,\n   CornerUpLeft,\n   CornerUpRight,\n   FileText,\n   GalleryVerticalEnd,\n   Home,\n   Inbox,\n   LineChart,\n   Link,\n   type LucideIcon,\n   MessageCircleQuestion,\n   MoreHorizontal,\n   Plus,\n   Search,\n   Settings2,\n   Sparkles,\n   Star,\n   StarOff,\n   Trash,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"~/components/ui/breadcrumb\"\nimport { Button } from \"~/components/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/components/ui/popover\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n   useSidebar,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: Calendar,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n   actions: [\n      [\n         {\n            label: \"Customize Page\",\n            icon: Settings2,\n         },\n         {\n            label: \"Turn into wiki\",\n            icon: FileText,\n         },\n      ],\n      [\n         {\n            label: \"Copy Link\",\n            icon: Link,\n         },\n         {\n            label: \"Duplicate\",\n            icon: Copy,\n         },\n         {\n            label: \"Move to\",\n            icon: CornerUpRight,\n         },\n         {\n            label: \"Move to Trash\",\n            icon: Trash2,\n         },\n      ],\n      [\n         {\n            label: \"Undo\",\n            icon: CornerUpLeft,\n         },\n         {\n            label: \"View analytics\",\n            icon: LineChart,\n         },\n         {\n            label: \"Version History\",\n            icon: GalleryVerticalEnd,\n         },\n         {\n            label: \"Show delete pages\",\n            icon: Trash,\n         },\n         {\n            label: \"Notifications\",\n            icon: Bell,\n         },\n      ],\n      [\n         {\n            label: \"Import\",\n            icon: ArrowUp,\n         },\n         {\n            label: \"Export\",\n            icon: ArrowDown,\n         },\n      ],\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-14 shrink-0 items-center gap-2\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n               <div className=\"ml-auto px-3\">\n                  <NavActions actions={data.actions} />\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction NavActions({\n   actions,\n}: {\n   actions: {\n      label: string\n      icon: LucideIcon\n   }[][]\n}) {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      setIsOpen(true)\n   }, [])\n\n   return (\n      <div className=\"flex items-center gap-2 text-sm\">\n         <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n            Edit Oct 08\n         </div>\n         <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n            <Star />\n         </Button>\n         <Popover open={isOpen} onOpenChange={setIsOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-7 w-7 data-[state=open]:bg-accent\"\n               >\n                  <MoreHorizontal />\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent\n               className=\"w-56 overflow-hidden rounded-lg p-0\"\n               align=\"end\"\n            >\n               <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n                  <SidebarContent>\n                     {actions.map((group, index) => (\n                        <SidebarGroup\n                           key={index}\n                           className=\"border-b last:border-none\"\n                        >\n                           <SidebarGroupContent className=\"gap-0\">\n                              <SidebarMenu>\n                                 {group.map((item, index) => (\n                                    <SidebarMenuItem key={index}>\n                                       <SidebarMenuButton>\n                                          <item.icon />{\" \"}\n                                          <span>{item.label}</span>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </SidebarGroup>\n                     ))}\n                  </SidebarContent>\n               </Sidebar>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n\nfunction NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n\nfunction NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n\nfunction NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-11.json b/apps/web/public/r/styles/default/v0-sidebar-11.json
new file mode 100644
index 00000000..403ca7e6
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-11.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-11",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-11.tsx",
+      "content": "import { ChevronRight, File, Folder } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   changes: [\n      {\n         file: \"README.md\",\n         state: \"M\",\n      },\n      {\n         file: \"api/hello/route.ts\",\n         state: \"U\",\n      },\n      {\n         file: \"app/layout.tsx\",\n         state: \"M\",\n      },\n   ],\n   tree: [\n      [\n         \"app\",\n         [\n            \"api\",\n            [\"hello\", [\"route.ts\"]],\n            \"page.tsx\",\n            \"layout.tsx\",\n            [\"blog\", [\"page.tsx\"]],\n         ],\n      ],\n      [\n         \"components\",\n         [\"ui\", \"button.tsx\", \"card.tsx\"],\n         \"header.tsx\",\n         \"footer.tsx\",\n      ],\n      [\"lib\", [\"util.ts\"]],\n      [\"public\", \"favicon.ico\", \"vercel.svg\"],\n      \".eslintrc.json\",\n      \".gitignore\",\n      \"next.config.js\",\n      \"tailwind.config.js\",\n      \"package.json\",\n      \"README.md\",\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>button.tsx</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Changes</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.changes.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                           <SidebarMenuButton>\n                              <File />\n                              {item.file}\n                           </SidebarMenuButton>\n                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n            <SidebarGroup>\n               <SidebarGroupLabel>Files</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.tree.map((item, index) => (\n                        <Tree key={index} item={item} />\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n   const [name, ...items] = Array.isArray(item) ? item : [item]\n\n   if (!items.length) {\n      return (\n         <SidebarMenuButton\n            isActive={name === \"button.tsx\"}\n            className=\"data-[active=true]:bg-transparent\"\n         >\n            <File />\n            {name}\n         </SidebarMenuButton>\n      )\n   }\n\n   return (\n      <SidebarMenuItem>\n         <Collapsible\n            className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n            defaultOpen={name === \"components\" || name === \"ui\"}\n         >\n            <CollapsibleTrigger asChild>\n               <SidebarMenuButton>\n                  <ChevronRight className=\"transition-transform\" />\n                  <Folder />\n                  {name}\n               </SidebarMenuButton>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n               <SidebarMenuSub>\n                  {items.map((subItem, index) => (\n                     <Tree key={index} item={subItem} />\n                  ))}\n               </SidebarMenuSub>\n            </CollapsibleContent>\n         </Collapsible>\n      </SidebarMenuItem>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-12.json b/apps/web/public/r/styles/default/v0-sidebar-12.json
new file mode 100644
index 00000000..d8057a8b
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-12.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-12",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-12.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   Check,\n   ChevronRight,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Plus,\n   Sparkles,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"~/components/ui/breadcrumb\"\nimport { Calendar } from \"~/components/ui/calendar\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n} from \"~/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>October 2024</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n                  {Array.from({ length: 20 }).map((_, i) => (\n                     <div\n                        key={i}\n                        className=\"aspect-square rounded-xl bg-muted/50\"\n                     />\n                  ))}\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n\nfunction DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-13.json b/apps/web/public/r/styles/default/v0-sidebar-13.json
new file mode 100644
index 00000000..62a48b6b
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-13.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-13",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-13.tsx",
+      "content": "\"use client\"\n\nimport {\n   Bell,\n   Check,\n   Globe,\n   Home,\n   Keyboard,\n   Link,\n   Lock,\n   Menu,\n   MessageCircle,\n   Paintbrush,\n   Settings,\n   Video,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport { Button } from \"~/components/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogTitle,\n   DialogTrigger,\n} from \"~/components/ui/dialog\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/components/ui/sidebar\"\nconst data = {\n   nav: [\n      { name: \"Notifications\", icon: Bell },\n      { name: \"Navigation\", icon: Menu },\n      { name: \"Home\", icon: Home },\n      { name: \"Appearance\", icon: Paintbrush },\n      { name: \"Messages & media\", icon: MessageCircle },\n      { name: \"Language & region\", icon: Globe },\n      { name: \"Accessibility\", icon: Keyboard },\n      { name: \"Mark as read\", icon: Check },\n      { name: \"Audio & video\", icon: Video },\n      { name: \"Connected accounts\", icon: Link },\n      { name: \"Privacy & visibility\", icon: Lock },\n      { name: \"Advanced\", icon: Settings },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-svh items-center justify-center\">\n         <SettingsDialog />\n      </div>\n   )\n}\n\nfunction SettingsDialog() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <Dialog open={open} onOpenChange={setOpen}>\n         <DialogTrigger asChild>\n            <Button size=\"sm\">Open Dialog</Button>\n         </DialogTrigger>\n         <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n            <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n            <DialogDescription className=\"sr-only\">\n               Customize your settings here.\n            </DialogDescription>\n            <SidebarProvider className=\"items-start\">\n               <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n                  <SidebarContent>\n                     <SidebarGroup>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {data.nav.map((item) => (\n                                 <SidebarMenuItem key={item.name}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={\n                                          item.name === \"Messages & media\"\n                                       }\n                                    >\n                                       <a href=\"#\">\n                                          <item.icon />\n                                          <span>{item.name}</span>\n                                       </a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </SidebarGroup>\n                  </SidebarContent>\n               </Sidebar>\n               <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n                  <header className=\"flex h-16 shrink-0 items-center gap-2 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                        <Breadcrumb>\n                           <BreadcrumbList>\n                              <BreadcrumbItem className=\"hidden md:block\">\n                                 <BreadcrumbLink href=\"#\">\n                                    Settings\n                                 </BreadcrumbLink>\n                              </BreadcrumbItem>\n                              <BreadcrumbSeparator className=\"hidden md:block\" />\n                              <BreadcrumbItem>\n                                 <BreadcrumbPage>\n                                    Messages & media\n                                 </BreadcrumbPage>\n                              </BreadcrumbItem>\n                           </BreadcrumbList>\n                        </Breadcrumb>\n                     </div>\n                  </header>\n                  <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n                     {Array.from({ length: 10 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                        />\n                     ))}\n                  </div>\n               </main>\n            </SidebarProvider>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-14.json b/apps/web/public/r/styles/default/v0-sidebar-14.json
new file mode 100644
index 00000000..5a9358a0
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-14.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-14",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-14.tsx",
+      "content": "import type * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n               <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n         <AppSidebar side=\"right\" />\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/v0-sidebar-15.json b/apps/web/public/r/styles/default/v0-sidebar-15.json
new file mode 100644
index 00000000..bf20b4b1
--- /dev/null
+++ b/apps/web/public/r/styles/default/v0-sidebar-15.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-15",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-15.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowUpRight,\n   AudioWaveform,\n   BadgeCheck,\n   Bell,\n   Blocks,\n   CalendarIcon,\n   Check,\n   ChevronDown,\n   ChevronRight,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   Home,\n   Inbox,\n   Link,\n   LogOut,\n   type LucideIcon,\n   MessageCircleQuestion,\n   MoreHorizontal,\n   Plus,\n   Search,\n   Settings2,\n   Sparkles,\n   StarOff,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"~/components/ui/breadcrumb\"\nimport { Calendar } from \"~/components/ui/calendar\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst sidebarLeftData = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: CalendarIcon,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n}\n\n// This is sample data.\nconst sidebarRightData = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarLeft />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n         <SidebarRight />\n      </SidebarProvider>\n   )\n}\n\nfunction SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={sidebarLeftData.teams} />\n            <NavMain items={sidebarLeftData.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={sidebarLeftData.favorites} />\n            <NavWorkspaces workspaces={sidebarLeftData.workspaces} />\n            <NavSecondary\n               items={sidebarLeftData.navSecondary}\n               className=\"mt-auto\"\n            />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         collapsible=\"none\"\n         className=\"sticky hidden lg:flex top-0 h-svh border-l\"\n         {...props}\n      >\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={sidebarRightData.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={sidebarRightData.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n\nfunction Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n\nfunction DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n\nfunction NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n\nfunction NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n\nfunction NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/video-modal-demo.json b/apps/web/public/r/styles/default/video-modal-demo.json
index 1ee9b1d8..7e2b8600 100644
--- a/apps/web/public/r/styles/default/video-modal-demo.json
+++ b/apps/web/public/r/styles/default/video-modal-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "video-modal-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/video-modal-demo.tsx",
-      "content": "import { PlayCircle } from 'lucide-react'\nimport {\n   VideoModal,\n   VideoModalContent,\n   VideoModalDescription,\n   VideoModalTitle,\n   VideoModalTrigger,\n   VideoModalVideo,\n   VideoPlayButton,\n   VideoPlayer,\n   VideoPreview,\n} from '~/registry/default/ui/video-modal'\nimport { Button } from '~/registry/default/ui/button'\n\nfunction VideoModalDemo() {\n   return (\n      <div className=\"relative justify-center\">\n         <VideoModal>\n            <VideoModalTrigger>\n               <Button>Open modal</Button>\n            </VideoModalTrigger>\n            <VideoModalContent>\n               <VideoModalTitle>Modal Video Demo</VideoModalTitle>\n               <VideoModalDescription>\n                  Your subtitle or description here\n               </VideoModalDescription>\n               <VideoModalVideo>\n                  <VideoPlayer>\n                     <VideoPreview>\n                        <img\n                           src=\"https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200\"\n                           alt=\"Video preview\"\n                        />\n                     </VideoPreview>\n                     <VideoPlayButton>\n                        <button className=\"absolute inset-0 m-auto flex size-32 items-center justify-center rounded-full border border-white border-white/10 bg-white/50 transition duration-300 hover:bg-white/75\">\n                           <PlayCircle className=\"size-20 stroke-1 text-white\" />\n                        </button>\n                     </VideoPlayButton>\n                     <iframe\n                        className=\"size-full\"\n                        src=\"https://cdn.magicui.design/globe.mp4\"\n                        allow=\"accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;\"\n                        allowFullScreen\n                     />\n                  </VideoPlayer>\n               </VideoModalVideo>\n            </VideoModalContent>\n         </VideoModal>\n      </div>\n   )\n}\n\nexport default VideoModalDemo\n",
-      "type": "registry:component",
+      "path": "examples/video-modal-demo.tsx",
+      "content": "import { PlayCircle } from \"lucide-react\"\nimport { Button } from \"~/registry/default/ui/button\"\nimport {\n   VideoModal,\n   VideoModalContent,\n   VideoModalDescription,\n   VideoModalTitle,\n   VideoModalTrigger,\n   VideoModalVideo,\n   VideoPlayButton,\n   VideoPlayer,\n   VideoPreview,\n} from \"~/registry/default/ui/video-modal\"\n\nfunction VideoModalDemo() {\n   return (\n      <div className=\"relative justify-center\">\n         <VideoModal>\n            <VideoModalTrigger>\n               <Button>Open modal</Button>\n            </VideoModalTrigger>\n            <VideoModalContent>\n               <VideoModalTitle>Modal Video Demo</VideoModalTitle>\n               <VideoModalDescription>\n                  Your subtitle or description here\n               </VideoModalDescription>\n               <VideoModalVideo>\n                  <VideoPlayer>\n                     <VideoPreview>\n                        <img\n                           src=\"https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200\"\n                           alt=\"Video preview\"\n                        />\n                     </VideoPreview>\n                     <VideoPlayButton>\n                        <button className=\"absolute inset-0 m-auto flex size-32 items-center justify-center rounded-full border border-white border-white/10 bg-white/50 transition duration-300 hover:bg-white/75\">\n                           <PlayCircle className=\"size-20 stroke-1 text-white\" />\n                        </button>\n                     </VideoPlayButton>\n                     <iframe\n                        className=\"size-full\"\n                        src=\"https://cdn.magicui.design/globe.mp4\"\n                        allow=\"accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;\"\n                        allowFullScreen\n                     />\n                  </VideoPlayer>\n               </VideoModalVideo>\n            </VideoModalContent>\n         </VideoModal>\n      </div>\n   )\n}\n\nexport default VideoModalDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/video-modal.json b/apps/web/public/r/styles/default/video-modal.json
index c4ab3e8e..757f5b53 100644
--- a/apps/web/public/r/styles/default/video-modal.json
+++ b/apps/web/public/r/styles/default/video-modal.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "video-modal",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/video-modal.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { ny } from '~/lib/utils'\n\nconst VideoModal = DialogPrimitive.Root\n\nconst VideoModalTrigger = DialogPrimitive.Trigger\n\nconst VideoModalPortal = DialogPrimitive.Portal\n\nconst VideoModalClose = DialogPrimitive.Close\n\nconst VideoModalOverlay = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Overlay\n      ref={ref}\n      className={ny(\n         'data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in fixed inset-0 z-50 backdrop-blur-xl',\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst VideoModalContent = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <VideoModalPortal>\n      <VideoModalOverlay />\n      <DialogPrimitive.Content\n         ref={ref}\n         className={ny(\n            'fixed left-1/2 top-1/2 z-50 flex h-screen w-screen -translate-x-1/2 -translate-y-1/2 items-center justify-center p-3',\n            'data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] transition-all',\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"relative mx-auto flex size-full items-center justify-center rounded-2xl border border-gray-950/[.1] bg-gray-50/[.2] dark:border-gray-50/[.1] dark:bg-gray-950/[.5]\">\n            {/* Mobile close button */}\n            <CloseIcon isMobile />\n\n            <div className=\"flex h-4/5 w-full max-w-5xl gap-6\">\n               {/* Desktop close button */}\n               <CloseIcon />\n               <div className=\"flex w-full flex-col max-lg:p-4 max-lg:text-center\">\n                  {children}\n               </div>\n            </div>\n         </div>\n      </DialogPrimitive.Content>\n   </VideoModalPortal>\n))\n\nVideoModalContent.displayName = DialogPrimitive.Content.displayName\n\nconst VideoModalTitle = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Title\n      ref={ref}\n      className={ny(\n         'mb-4 text-4xl font-bold text-gray-950 dark:text-gray-50',\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalTitle.displayName = DialogPrimitive.Title.displayName\n\nconst VideoModalDescription = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Description\n      ref={ref}\n      className={ny(\n         'mb-6 text-xl text-gray-950/80 dark:text-gray-50/70',\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalDescription.displayName = DialogPrimitive.Description.displayName\n\nconst VideoPreview = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         'absolute inset-0 z-10 transition-opacity duration-500 group-[.playing]:pointer-events-none group-[.playing]:opacity-0',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoPreview.displayName = 'VideoPreview'\n\nconst VideoPlayButton = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         'absolute inset-0 z-20 flex items-center justify-center transition-opacity duration-300 group-[.playing]:pointer-events-none group-[.playing]:opacity-0',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoPlayButton.displayName = 'VideoPlayButton'\n\nconst VideoPlayer = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n   const [isPlaying, setIsPlaying] = React.useState(false)\n\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'group relative aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover dark:border-gray-50/[.1]',\n            isPlaying && 'playing',\n            className,\n         )}\n         onClick={() => setIsPlaying(true)}\n         {...props}\n      >\n         {children}\n      </div>\n   )\n})\nVideoPlayer.displayName = 'VideoPlayer'\n\nconst VideoModalVideo = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         'aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover shadow-xl dark:border-gray-50/[.1]',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoModalVideo.displayName = 'VideoModalVideo'\n\nconst CloseIcon = React.forwardRef<\n   React.ElementRef<typeof VideoModalClose>,\n   React.ComponentPropsWithoutRef<typeof VideoModalClose> & {\n      isMobile?: boolean\n   }\n>(({ className, isMobile = false, ...props }, ref) => (\n   <VideoModalClose\n      ref={ref}\n      className={ny(\n         'rounded-full border border-gray-950/[.1] bg-gray-950/[.01] p-2 transition duration-300 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',\n         isMobile\n            ? 'absolute right-4 top-4 lg:hidden'\n            : 'hidden self-start lg:block',\n         className,\n      )}\n      {...props}\n   >\n      <svg\n         fill=\"none\"\n         height=\"12\"\n         viewBox=\"0 0 12 12\"\n         width=\"12\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M1 1L11 11M11 1L1 11\"\n            className=\"stroke-current\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.5\"\n         >\n         </path>\n      </svg>\n      <span className=\"sr-only\">Close</span>\n   </VideoModalClose>\n))\n\nCloseIcon.displayName = 'CloseIcon'\n\nexport {\n   VideoModal,\n   VideoModalTrigger,\n   VideoModalContent,\n   VideoModalTitle,\n   VideoModalDescription,\n   VideoModalVideo,\n   VideoPreview,\n   VideoPlayButton,\n   VideoPlayer,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport * as React from \"react\"\nimport { ny } from \"~/lib/utils\"\n\nconst VideoModal = DialogPrimitive.Root\n\nconst VideoModalTrigger = DialogPrimitive.Trigger\n\nconst VideoModalPortal = DialogPrimitive.Portal\n\nconst VideoModalClose = DialogPrimitive.Close\n\nconst VideoModalOverlay = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Overlay\n      ref={ref}\n      className={ny(\n         \"data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in fixed inset-0 z-50 backdrop-blur-xl\",\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst VideoModalContent = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <VideoModalPortal>\n      <VideoModalOverlay />\n      <DialogPrimitive.Content\n         ref={ref}\n         className={ny(\n            \"fixed left-1/2 top-1/2 z-50 flex h-screen w-screen -translate-x-1/2 -translate-y-1/2 items-center justify-center p-3\",\n            \"data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] transition-all\",\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"relative mx-auto flex size-full items-center justify-center rounded-2xl border border-gray-950/[.1] bg-gray-50/[.2] dark:border-gray-50/[.1] dark:bg-gray-950/[.5]\">\n            {/* Mobile close button */}\n            <CloseIcon isMobile />\n\n            <div className=\"flex h-4/5 w-full max-w-5xl gap-6\">\n               {/* Desktop close button */}\n               <CloseIcon />\n               <div className=\"flex w-full flex-col max-lg:p-4 max-lg:text-center\">\n                  {children}\n               </div>\n            </div>\n         </div>\n      </DialogPrimitive.Content>\n   </VideoModalPortal>\n))\n\nVideoModalContent.displayName = DialogPrimitive.Content.displayName\n\nconst VideoModalTitle = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Title\n      ref={ref}\n      className={ny(\n         \"mb-4 text-4xl font-bold text-gray-950 dark:text-gray-50\",\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalTitle.displayName = DialogPrimitive.Title.displayName\n\nconst VideoModalDescription = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Description\n      ref={ref}\n      className={ny(\n         \"mb-6 text-xl text-gray-950/80 dark:text-gray-50/70\",\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalDescription.displayName = DialogPrimitive.Description.displayName\n\nconst VideoPreview = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         \"absolute inset-0 z-10 transition-opacity duration-500 group-[.playing]:pointer-events-none group-[.playing]:opacity-0\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoPreview.displayName = \"VideoPreview\"\n\nconst VideoPlayButton = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         \"absolute inset-0 z-20 flex items-center justify-center transition-opacity duration-300 group-[.playing]:pointer-events-none group-[.playing]:opacity-0\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoPlayButton.displayName = \"VideoPlayButton\"\n\nconst VideoPlayer = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n   const [isPlaying, setIsPlaying] = React.useState(false)\n\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"group relative aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover dark:border-gray-50/[.1]\",\n            isPlaying && \"playing\",\n            className,\n         )}\n         onClick={() => setIsPlaying(true)}\n         {...props}\n      >\n         {children}\n      </div>\n   )\n})\nVideoPlayer.displayName = \"VideoPlayer\"\n\nconst VideoModalVideo = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         \"aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover shadow-xl dark:border-gray-50/[.1]\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoModalVideo.displayName = \"VideoModalVideo\"\n\nconst CloseIcon = React.forwardRef<\n   React.ElementRef<typeof VideoModalClose>,\n   React.ComponentPropsWithoutRef<typeof VideoModalClose> & {\n      isMobile?: boolean\n   }\n>(({ className, isMobile = false, ...props }, ref) => (\n   <VideoModalClose\n      ref={ref}\n      className={ny(\n         \"rounded-full border border-gray-950/[.1] bg-gray-950/[.01] p-2 transition duration-300 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n         isMobile\n            ? \"absolute right-4 top-4 lg:hidden\"\n            : \"hidden self-start lg:block\",\n         className,\n      )}\n      {...props}\n   >\n      <svg\n         fill=\"none\"\n         height=\"12\"\n         viewBox=\"0 0 12 12\"\n         width=\"12\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M1 1L11 11M11 1L1 11\"\n            className=\"stroke-current\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.5\"\n         ></path>\n      </svg>\n      <span className=\"sr-only\">Close</span>\n   </VideoModalClose>\n))\n\nCloseIcon.displayName = \"CloseIcon\"\n\nexport {\n   VideoModal,\n   VideoModalTrigger,\n   VideoModalContent,\n   VideoModalTitle,\n   VideoModalDescription,\n   VideoModalVideo,\n   VideoPreview,\n   VideoPlayButton,\n   VideoPlayer,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/default/warp-background-demo.json b/apps/web/public/r/styles/default/warp-background-demo.json
new file mode 100644
index 00000000..1b674607
--- /dev/null
+++ b/apps/web/public/r/styles/default/warp-background-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "warp-background-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/warp-background-demo.tsx",
+      "content": "import {\n   Card,\n   CardContent,\n   CardDescription,\n   CardTitle,\n} from \"~/registry/default/ui/card\"\nimport { WarpBackground } from \"~/registry/default/ui/warp-background\"\n\nexport default function ExampleComponentDemo() {\n   return (\n      <WarpBackground>\n         <Card className=\"w-80\">\n            <CardContent className=\"flex flex-col gap-2 p-4\">\n               <CardTitle>Congratulations on Your Promotion!</CardTitle>\n               <CardDescription>\n                  Your hard work and dedication have paid off. We&apos;re\n                  thrilled to see you take this next step in your career. Keep\n                  up the fantastic work!\n               </CardDescription>\n            </CardContent>\n         </Card>\n      </WarpBackground>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/warp-background.json b/apps/web/public/r/styles/default/warp-background.json
new file mode 100644
index 00000000..12f1a451
--- /dev/null
+++ b/apps/web/public/r/styles/default/warp-background.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "warp-background",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/warp-background.tsx",
+      "content": "import { motion } from \"motion/react\"\nimport type React from \"react\"\nimport { type HTMLAttributes, useCallback, useMemo } from \"react\"\nimport { ny } from \"~/registry/default/lib/utils\"\n\ninterface WarpBackgroundProps extends HTMLAttributes<HTMLDivElement> {\n   children: React.ReactNode\n   perspective?: number\n   beamsPerSide?: number\n   beamSize?: number\n   beamDelayMax?: number\n   beamDelayMin?: number\n   beamDuration?: number\n   gridColor?: string\n}\n\nconst Beam = ({\n   width,\n   x,\n   delay,\n   duration,\n}: {\n   width: string | number\n   x: string | number\n   delay: number\n   duration: number\n}) => {\n   const hue = Math.floor(Math.random() * 360)\n   const ar = Math.floor(Math.random() * 10) + 1\n\n   return (\n      <motion.div\n         style={\n            {\n               \"--x\": `${x}`,\n               \"--width\": `${width}`,\n               \"--aspect-ratio\": `${ar}`,\n               \"--background\": `linear-gradient(hsl(${hue} 80% 60%), transparent)`,\n            } as React.CSSProperties\n         }\n         className={`absolute left-[var(--x)] top-0 [aspect-ratio:1/var(--aspect-ratio)] [background:var(--background)] [width:var(--width)]`}\n         initial={{ y: \"100cqmax\", x: \"-50%\" }}\n         animate={{ y: \"-100%\", x: \"-50%\" }}\n         transition={{\n            duration,\n            delay,\n            repeat: Number.POSITIVE_INFINITY,\n            ease: \"linear\",\n         }}\n      />\n   )\n}\n\nexport const WarpBackground: React.FC<WarpBackgroundProps> = ({\n   children,\n   perspective = 100,\n   className,\n   beamsPerSide = 3,\n   beamSize = 5,\n   beamDelayMax = 3,\n   beamDelayMin = 0,\n   beamDuration = 3,\n   gridColor = \"hsl(var(--border))\",\n   ...props\n}) => {\n   const generateBeams = useCallback(() => {\n      const beams = []\n      const cellsPerSide = Math.floor(100 / beamSize)\n      const step = cellsPerSide / beamsPerSide\n\n      for (let i = 0; i < beamsPerSide; i++) {\n         const x = Math.floor(i * step)\n         const delay =\n            Math.random() * (beamDelayMax - beamDelayMin) + beamDelayMin\n         beams.push({ x, delay })\n      }\n      return beams\n   }, [beamsPerSide, beamSize, beamDelayMax, beamDelayMin])\n\n   const topBeams = useMemo(() => generateBeams(), [generateBeams])\n   const rightBeams = useMemo(() => generateBeams(), [generateBeams])\n   const bottomBeams = useMemo(() => generateBeams(), [generateBeams])\n   const leftBeams = useMemo(() => generateBeams(), [generateBeams])\n\n   return (\n      <div className={ny(\"relative rounded border p-20\", className)} {...props}>\n         <div\n            style={\n               {\n                  \"--perspective\": `${perspective}px`,\n                  \"--grid-color\": gridColor,\n                  \"--beam-size\": `${beamSize}%`,\n               } as React.CSSProperties\n            }\n            className={\n               \"pointer-events-none absolute left-0 top-0 size-full overflow-hidden [clip-path:inset(0)] [container-type:size] [perspective:var(--perspective)] [transform-style:preserve-3d]\"\n            }\n         >\n            {/* top side */}\n            <div className=\"absolute [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]\">\n               {topBeams.map((beam, index) => (\n                  <Beam\n                     key={`top-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n            {/* bottom side */}\n            <div className=\"absolute top-full [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]\">\n               {bottomBeams.map((beam, index) => (\n                  <Beam\n                     key={`bottom-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n            {/* left side */}\n            <div className=\"absolute left-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:0%_0%] [transform:rotate(90deg)_rotateX(-90deg)] [width:100cqh]\">\n               {leftBeams.map((beam, index) => (\n                  <Beam\n                     key={`left-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n            {/* right side */}\n            <div className=\"absolute right-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [width:100cqh] [transform-origin:100%_0%] [transform:rotate(-90deg)_rotateX(-90deg)]\">\n               {rightBeams.map((beam, index) => (\n                  <Beam\n                     key={`right-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n         </div>\n         <div className=\"relative\">{children}</div>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/default/wavy-dot-pattern-demo.json b/apps/web/public/r/styles/default/wavy-dot-pattern-demo.json
index 07f89f57..6b582359 100644
--- a/apps/web/public/r/styles/default/wavy-dot-pattern-demo.json
+++ b/apps/web/public/r/styles/default/wavy-dot-pattern-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "wavy-dot-pattern-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/wavy-dot-pattern-demo.tsx",
-      "content": "import WavyDotPattern from '~/registry/default/ui/wavy-dot-pattern'\n\nexport default function WavyDotPatternDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl \">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-4xl font-semibold tracking-tighter text-black dark:text-white\">\n            Wavy Dot Pattern\n         </p>\n\n         <WavyDotPattern\n            gridWidth={30}\n            gridHeight={15}\n            dotWidth={8}\n            dotHeight={8}\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/wavy-dot-pattern-demo.tsx",
+      "content": "import WavyDotPattern from \"~/registry/default/ui/wavy-dot-pattern\"\n\nexport default function WavyDotPatternDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl \">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-4xl font-semibold tracking-tighter text-black dark:text-white\">\n            Wavy Dot Pattern\n         </p>\n\n         <WavyDotPattern\n            gridWidth={30}\n            gridHeight={15}\n            dotWidth={8}\n            dotHeight={8}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/wavy-dot-pattern.json b/apps/web/public/r/styles/default/wavy-dot-pattern.json
index 70ce969a..b67ba1de 100644
--- a/apps/web/public/r/styles/default/wavy-dot-pattern.json
+++ b/apps/web/public/r/styles/default/wavy-dot-pattern.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "wavy-dot-pattern",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "react-anime"
   ],
   "files": [
     {
       "path": "ui/wavy-dot-pattern.tsx",
-      "content": "'use client'\nimport { useState } from 'react'\nimport { anime } from 'react-anime'\nimport { ny } from '~/lib/utils'\n\ninterface WavyDotPatternProps {\n   className?: string\n   gridWidth?: number\n   gridHeight?: number\n   dotWidth?: number\n   dotHeight?: number\n}\n\nexport function WavyDotPattern({\n   className,\n   gridWidth,\n   gridHeight,\n   dotWidth,\n   dotHeight,\n}: WavyDotPatternProps) {\n   const [dotClickDisabled, setDotClickDisabled] = useState<boolean>(false)\n\n   const handleDotClick = (e: any, width: number, height: number) => {\n      setDotClickDisabled(true)\n\n      anime({\n         targets: '.dot-point',\n         scale: [\n            { value: 1.35, easing: 'easeOutSine', duration: 250 },\n            { value: 1, easing: 'easeInOutQuad', duration: 500 },\n         ],\n         translateY: [\n            { value: -15, easing: 'easeOutSine', duration: 250 },\n            { value: 1, easing: 'easeInOutQuad', duration: 500 },\n         ],\n         opacity: [\n            { value: 0.7, easing: 'easeOutSine', duration: 250 },\n            { value: 0.35, easing: 'easeInOutQuad', duration: 500 },\n         ],\n         delay: anime.stagger(100, {\n            grid: [width, height],\n            from: e.target.dataset.index,\n         }),\n      })\n\n      setTimeout(() => setDotClickDisabled(false), 2000)\n   }\n\n   const GRID_WIDTH = gridWidth || 30\n   const GRID_HEIGHT = gridHeight || 30\n\n   const DOT_WIDTH = dotWidth ? `w-[${dotWidth}px]` : 'w-[8px]'\n   const DOT_HEIGHT = dotHeight ? `h-[${dotHeight}px]` : 'h-[8px]'\n\n   let index = 0\n\n   const dots = []\n\n   for (let i = 0; i < GRID_WIDTH; i++) {\n      for (let j = 0; j < GRID_HEIGHT; j++) {\n         dots.push(\n            <button\n               className=\"rounded-[8px] p-[0.8rem]\"\n               type=\"button\"\n               onClick={e => handleDotClick(e, GRID_WIDTH, GRID_HEIGHT)}\n               data-index={index}\n               key={`${i}-${j}`}\n               disabled={dotClickDisabled}\n            >\n               <div\n                  className={ny(\n                     'dot-point',\n                     'rounded-xl bg-gradient-to-r from-[#d9cab3] to-black opacity-35 hover:from-black hover:to-black hover:opacity-100',\n                     DOT_WIDTH,\n                     DOT_HEIGHT,\n                  )}\n                  data-index={index}\n               />\n            </button>,\n         )\n         index++\n      }\n   }\n\n   return (\n      <div\n         style={{ gridTemplateColumns: `repeat(${GRID_WIDTH}, 1fr)` }}\n         className={ny('max-w-3/4 absolute z-0 grid', className)}\n      >\n         {dots.map(dot => dot)}\n      </div>\n   )\n}\n\nexport default WavyDotPattern\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport { useState } from \"react\"\nimport { anime } from \"react-anime\"\nimport { ny } from \"~/lib/utils\"\n\ninterface WavyDotPatternProps {\n   className?: string\n   gridWidth?: number\n   gridHeight?: number\n   dotWidth?: number\n   dotHeight?: number\n}\n\nexport function WavyDotPattern({\n   className,\n   gridWidth,\n   gridHeight,\n   dotWidth,\n   dotHeight,\n}: WavyDotPatternProps) {\n   const [dotClickDisabled, setDotClickDisabled] = useState<boolean>(false)\n\n   const handleDotClick = (e: any, width: number, height: number) => {\n      setDotClickDisabled(true)\n\n      anime({\n         targets: \".dot-point\",\n         scale: [\n            { value: 1.35, easing: \"easeOutSine\", duration: 250 },\n            { value: 1, easing: \"easeInOutQuad\", duration: 500 },\n         ],\n         translateY: [\n            { value: -15, easing: \"easeOutSine\", duration: 250 },\n            { value: 1, easing: \"easeInOutQuad\", duration: 500 },\n         ],\n         opacity: [\n            { value: 0.7, easing: \"easeOutSine\", duration: 250 },\n            { value: 0.35, easing: \"easeInOutQuad\", duration: 500 },\n         ],\n         delay: anime.stagger(100, {\n            grid: [width, height],\n            from: e.target.dataset.index,\n         }),\n      })\n\n      setTimeout(() => setDotClickDisabled(false), 2000)\n   }\n\n   const GRID_WIDTH = gridWidth || 30\n   const GRID_HEIGHT = gridHeight || 30\n\n   const DOT_WIDTH = dotWidth ? `w-[${dotWidth}px]` : \"w-[8px]\"\n   const DOT_HEIGHT = dotHeight ? `h-[${dotHeight}px]` : \"h-[8px]\"\n\n   let index = 0\n\n   const dots = []\n\n   for (let i = 0; i < GRID_WIDTH; i++) {\n      for (let j = 0; j < GRID_HEIGHT; j++) {\n         dots.push(\n            <button\n               className=\"rounded-[8px] p-[0.8rem]\"\n               type=\"button\"\n               onClick={(e) => handleDotClick(e, GRID_WIDTH, GRID_HEIGHT)}\n               data-index={index}\n               key={`${i}-${j}`}\n               disabled={dotClickDisabled}\n            >\n               <div\n                  className={ny(\n                     \"dot-point\",\n                     \"rounded-xl bg-gradient-to-r from-[#d9cab3] to-black opacity-35 hover:from-black hover:to-black hover:opacity-100\",\n                     DOT_WIDTH,\n                     DOT_HEIGHT,\n                  )}\n                  data-index={index}\n               />\n            </button>,\n         )\n         index++\n      }\n   }\n\n   return (\n      <div\n         style={{ gridTemplateColumns: `repeat(${GRID_WIDTH}, 1fr)` }}\n         className={ny(\"max-w-3/4 absolute z-0 grid\", className)}\n      >\n         {dots.map((dot) => dot)}\n      </div>\n   )\n}\n\nexport default WavyDotPattern\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/wavy-text-demo.json b/apps/web/public/r/styles/default/wavy-text-demo.json
index 1534c361..c1fcc4a5 100644
--- a/apps/web/public/r/styles/default/wavy-text-demo.json
+++ b/apps/web/public/r/styles/default/wavy-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "wavy-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/wavy-text-demo.tsx",
-      "content": "import WavyText from '~/registry/default/ui/wavy-text'\n\nexport default function WavyTextDemo() {\n   return (\n      <WavyText\n         word=\"Wavy Text\"\n         className=\"text-4xl font-bold text-black dark:text-white\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/wavy-text-demo.tsx",
+      "content": "import WavyText from \"~/registry/default/ui/wavy-text\"\n\nexport default function WavyTextDemo() {\n   return (\n      <WavyText\n         word=\"Wavy Text\"\n         className=\"text-4xl font-bold text-black dark:text-white\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/wavy-text.json b/apps/web/public/r/styles/default/wavy-text.json
index 53bf7a83..dcbea63b 100644
--- a/apps/web/public/r/styles/default/wavy-text.json
+++ b/apps/web/public/r/styles/default/wavy-text.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "wavy-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/wavy-text.tsx",
-      "content": "'use client'\n\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { useMemo } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface WavyTextProps {\n   word: string\n   className?: string\n   variant?: {\n      hidden: { y: number }\n      visible: { y: number }\n   }\n   duration?: number\n   delay?: number\n}\nfunction WavyText({\n   word,\n   className,\n   variant,\n   duration = 0.5,\n   delay = 0.05,\n}: WavyTextProps) {\n   const defaultVariants = {\n      hidden: { y: 10 },\n      visible: { y: -10 },\n   }\n   const combinedVariants = variant || defaultVariants\n   const characters = useMemo(() => word.split(''), [word])\n   return (\n      <div className=\"flex justify-center space-x-2 overflow-hidden p-3\">\n         <AnimatePresence>\n            {characters.map((char, i) => (\n               <motion.h1\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={combinedVariants}\n                  transition={{\n                     yoyo: Infinity,\n                     duration,\n                     delay: i * delay,\n                  }}\n                  className={ny(\n                     className,\n                     'font-display text-center text-4xl font-bold tracking-[-0.15em] md:text-7xl',\n                  )}\n               >\n                  {char}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n\nexport default WavyText\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { useMemo } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface WavyTextProps {\n   word: string\n   className?: string\n   variant?: {\n      hidden: { y: number }\n      visible: { y: number }\n   }\n   duration?: number\n   delay?: number\n}\nfunction WavyText({\n   word,\n   className,\n   variant,\n   duration = 0.5,\n   delay = 0.05,\n}: WavyTextProps) {\n   const defaultVariants = {\n      hidden: { y: 10 },\n      visible: { y: -10 },\n   }\n   const combinedVariants = variant || defaultVariants\n   const characters = useMemo(() => word.split(\"\"), [word])\n   return (\n      <div className=\"flex justify-center space-x-2 overflow-hidden p-3\">\n         <AnimatePresence>\n            {characters.map((char, i) => (\n               <motion.h1\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={combinedVariants}\n                  transition={{\n                     yoyo: Number.POSITIVE_INFINITY,\n                     duration,\n                     delay: i * delay,\n                  }}\n                  className={ny(\n                     className,\n                     \"font-display text-center text-4xl font-bold tracking-[-0.15em] md:text-7xl\",\n                  )}\n               >\n                  {char}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n\nexport default WavyText\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/word-fade-in-demo.json b/apps/web/public/r/styles/default/word-fade-in-demo.json
index 1e0a5b65..d38eee9c 100644
--- a/apps/web/public/r/styles/default/word-fade-in-demo.json
+++ b/apps/web/public/r/styles/default/word-fade-in-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "word-fade-in-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/word-fade-in-demo.tsx",
-      "content": "import WordFadeIn from '~/registry/default/ui/word-fade-in'\n\nexport default async function WordFadeInDemo() {\n   return <WordFadeIn words=\"Word Fade In\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/word-fade-in-demo.tsx",
+      "content": "import WordFadeIn from \"~/registry/default/ui/word-fade-in\"\n\nexport default async function WordFadeInDemo() {\n   return <WordFadeIn words=\"Word Fade In\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/word-fade-in.json b/apps/web/public/r/styles/default/word-fade-in.json
index 25452f57..4d364bb2 100644
--- a/apps/web/public/r/styles/default/word-fade-in.json
+++ b/apps/web/public/r/styles/default/word-fade-in.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "word-fade-in",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/word-fade-in.tsx",
-      "content": "'use client'\n\nimport type { Variants } from 'framer-motion'\nimport { motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface WordFadeInProps {\n   words: string\n   className?: string\n   delay?: number\n   variants?: Variants\n}\n\nexport default function WordFadeIn({\n   words,\n   delay = 0.15,\n   variants = {\n      hidden: { opacity: 0 },\n      visible: (i: any) => ({\n         y: 0,\n         opacity: 1,\n         transition: { delay: i * delay },\n      }),\n   },\n   className,\n}: WordFadeInProps) {\n   const _words = words.split(' ')\n\n   return (\n      <motion.h1\n         variants={variants}\n         initial=\"hidden\"\n         animate=\"visible\"\n         className={ny(\n            'font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white',\n            className,\n         )}\n      >\n         {_words.map((word, i) => (\n            <motion.span key={word} variants={variants} custom={i}>\n               {word}\n               {' '}\n            </motion.span>\n         ))}\n      </motion.h1>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface WordFadeInProps {\n   words: string\n   className?: string\n   delay?: number\n   variants?: Variants\n}\n\nexport default function WordFadeIn({\n   words,\n   delay = 0.15,\n   variants = {\n      hidden: { opacity: 0 },\n      visible: (i: any) => ({\n         y: 0,\n         opacity: 1,\n         transition: { delay: i * delay },\n      }),\n   },\n   className,\n}: WordFadeInProps) {\n   const _words = words.split(\" \")\n\n   return (\n      <motion.h1\n         variants={variants}\n         initial=\"hidden\"\n         animate=\"visible\"\n         className={ny(\n            \"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white\",\n            className,\n         )}\n      >\n         {_words.map((word, i) => (\n            <motion.span key={word} variants={variants} custom={i}>\n               {word}{\" \"}\n            </motion.span>\n         ))}\n      </motion.h1>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/word-pull-up-demo.json b/apps/web/public/r/styles/default/word-pull-up-demo.json
index 4419dbf3..d4681f93 100644
--- a/apps/web/public/r/styles/default/word-pull-up-demo.json
+++ b/apps/web/public/r/styles/default/word-pull-up-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "word-pull-up-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/word-pull-up-demo.tsx",
-      "content": "import WordPullUp from '~/registry/default/ui/word-pull-up'\n\nexport default async function WordPullUpDemo() {\n   return (\n      <WordPullUp\n         className=\"text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         words=\"Word Pull Up\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/word-pull-up-demo.tsx",
+      "content": "import WordPullUp from \"~/registry/default/ui/word-pull-up\"\n\nexport default async function WordPullUpDemo() {\n   return (\n      <WordPullUp\n         className=\"text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         words=\"Word Pull Up\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/word-pull-up.json b/apps/web/public/r/styles/default/word-pull-up.json
index 7592c770..09d6198c 100644
--- a/apps/web/public/r/styles/default/word-pull-up.json
+++ b/apps/web/public/r/styles/default/word-pull-up.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "word-pull-up",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/word-pull-up.tsx",
-      "content": "'use client'\n\nimport type { Variants } from 'framer-motion'\nimport { motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface WordPullUpProps {\n   words: string\n   delayMultiple?: number\n   wrapperFramerProps?: Variants\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function WordPullUp({\n   words,\n   wrapperFramerProps = {\n      hidden: { opacity: 0 },\n      show: {\n         opacity: 1,\n         transition: {\n            staggerChildren: 0.2,\n         },\n      },\n   },\n   framerProps = {\n      hidden: { y: 20, opacity: 0 },\n      show: { y: 0, opacity: 1 },\n   },\n   className,\n}: WordPullUpProps) {\n   return (\n      <motion.h1\n         variants={wrapperFramerProps}\n         initial=\"hidden\"\n         animate=\"show\"\n         className={ny(\n            'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',\n            className,\n         )}\n      >\n         {words.split(' ').map((word, i) => (\n            <motion.span\n               key={i}\n               variants={framerProps}\n               style={{ display: 'inline-block', paddingRight: '8px' }}\n            >\n               {word === '' ? <span>&nbsp;</span> : word}\n            </motion.span>\n         ))}\n      </motion.h1>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface WordPullUpProps {\n   words: string\n   delayMultiple?: number\n   wrapperFramerProps?: Variants\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function WordPullUp({\n   words,\n   wrapperFramerProps = {\n      hidden: { opacity: 0 },\n      show: {\n         opacity: 1,\n         transition: {\n            staggerChildren: 0.2,\n         },\n      },\n   },\n   framerProps = {\n      hidden: { y: 20, opacity: 0 },\n      show: { y: 0, opacity: 1 },\n   },\n   className,\n}: WordPullUpProps) {\n   return (\n      <motion.h1\n         variants={wrapperFramerProps}\n         initial=\"hidden\"\n         animate=\"show\"\n         className={ny(\n            \"font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm\",\n            className,\n         )}\n      >\n         {words.split(\" \").map((word, i) => (\n            <motion.span\n               key={i}\n               variants={framerProps}\n               style={{ display: \"inline-block\", paddingRight: \"8px\" }}\n            >\n               {word === \"\" ? <span>&nbsp;</span> : word}\n            </motion.span>\n         ))}\n      </motion.h1>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/word-rotate-demo.json b/apps/web/public/r/styles/default/word-rotate-demo.json
index 5938036c..5550c73d 100644
--- a/apps/web/public/r/styles/default/word-rotate-demo.json
+++ b/apps/web/public/r/styles/default/word-rotate-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "word-rotate-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/word-rotate-demo.tsx",
-      "content": "import WordRotate from '~/registry/default/ui/word-rotate'\n\nexport default async function WordRotateDemo() {\n   return (\n      <WordRotate\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         words={['Word', 'Rotate']}\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/word-rotate-demo.tsx",
+      "content": "import WordRotate from \"~/registry/default/ui/word-rotate\"\n\nexport default async function WordRotateDemo() {\n   return (\n      <WordRotate\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         words={[\"Word\", \"Rotate\"]}\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/default/word-rotate.json b/apps/web/public/r/styles/default/word-rotate.json
index 60c06f3b..110c5ebe 100644
--- a/apps/web/public/r/styles/default/word-rotate.json
+++ b/apps/web/public/r/styles/default/word-rotate.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "word-rotate",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/word-rotate.tsx",
-      "content": "'use client'\n\nimport type { HTMLMotionProps } from 'framer-motion'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { useEffect, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface WordRotateProps {\n   words: string[]\n   duration?: number\n   framerProps?: HTMLMotionProps<'h1'>\n   className?: string\n}\n\nexport default function WordRotate({\n   words,\n   duration = 2500,\n   framerProps = {\n      initial: { opacity: 0, y: -50 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 50 },\n      transition: { duration: 0.25, ease: 'easeOut' },\n   },\n   className,\n}: WordRotateProps) {\n   const [index, setIndex] = useState(0)\n\n   useEffect(() => {\n      const interval = setInterval(() => {\n         setIndex(prevIndex => (prevIndex + 1) % words.length)\n      }, duration)\n\n      // Clean up interval on unmount\n      return () => clearInterval(interval)\n   }, [words, duration])\n\n   return (\n      <div className=\"overflow-hidden py-2\">\n         <AnimatePresence mode=\"wait\">\n            <motion.h1\n               key={words[index]}\n               className={ny(className)}\n               {...framerProps}\n            >\n               {words[index]}\n            </motion.h1>\n         </AnimatePresence>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { HTMLMotionProps } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { useEffect, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface WordRotateProps {\n   words: string[]\n   duration?: number\n   framerProps?: HTMLMotionProps<\"h1\">\n   className?: string\n}\n\nexport default function WordRotate({\n   words,\n   duration = 2500,\n   framerProps = {\n      initial: { opacity: 0, y: -50 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 50 },\n      transition: { duration: 0.25, ease: \"easeOut\" },\n   },\n   className,\n}: WordRotateProps) {\n   const [index, setIndex] = useState(0)\n\n   useEffect(() => {\n      const interval = setInterval(() => {\n         setIndex((prevIndex) => (prevIndex + 1) % words.length)\n      }, duration)\n\n      // Clean up interval on unmount\n      return () => clearInterval(interval)\n   }, [words, duration])\n\n   return (\n      <div className=\"overflow-hidden py-2\">\n         <AnimatePresence mode=\"wait\">\n            <motion.h1\n               key={words[index]}\n               className={ny(className)}\n               {...framerProps}\n            >\n               {words[index]}\n            </motion.h1>\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/accordion-demo.json b/apps/web/public/r/styles/miami/accordion-demo.json
index a75e6a72..528376ec 100644
--- a/apps/web/public/r/styles/miami/accordion-demo.json
+++ b/apps/web/public/r/styles/miami/accordion-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "accordion-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "accordion"
   ],
   "files": [
     {
-      "path": "example/accordion-demo.tsx",
-      "content": "import {\n   Accordion,\n   AccordionContent,\n   AccordionItem,\n   AccordionTrigger,\n} from '~/registry/miami/ui/accordion'\n\nexport default function AccordionDemo() {\n   return (\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n         <AccordionItem value=\"item-1\">\n            <AccordionTrigger>Is it accessible?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It adheres to the WAI-ARIA design pattern.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-2\">\n            <AccordionTrigger>Is it styled?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It comes with default styles that matches the other\n               components&apos; aesthetic.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-3\">\n            <AccordionTrigger>Is it animated?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It's animated by default, but you can disable it if you prefer.\n            </AccordionContent>\n         </AccordionItem>\n      </Accordion>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/accordion-demo.tsx",
+      "content": "import {\n   Accordion,\n   AccordionContent,\n   AccordionItem,\n   AccordionTrigger,\n} from \"~/registry/miami/ui/accordion\"\n\nexport default function AccordionDemo() {\n   return (\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n         <AccordionItem value=\"item-1\">\n            <AccordionTrigger>Is it accessible?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It adheres to the WAI-ARIA design pattern.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-2\">\n            <AccordionTrigger>Is it styled?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It comes with default styles that matches the other\n               components&apos; aesthetic.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-3\">\n            <AccordionTrigger>Is it animated?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It's animated by default, but you can disable it if you\n               prefer.\n            </AccordionContent>\n         </AccordionItem>\n      </Accordion>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/accordion.json b/apps/web/public/r/styles/miami/accordion.json
index 2db20798..ebafd31e 100644
--- a/apps/web/public/r/styles/miami/accordion.json
+++ b/apps/web/public/r/styles/miami/accordion.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "accordion",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-accordion"
   ],
   "files": [
     {
       "path": "ui/accordion.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { ChevronDownIcon } from '@radix-ui/react-icons'\n\nimport { ny } from '~/lib/utils'\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n   <AccordionPrimitive.Item\n      ref={ref}\n      className={ny('border-b', className)}\n      {...props}\n   />\n))\nAccordionItem.displayName = 'AccordionItem'\n\nconst AccordionTrigger = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n         ref={ref}\n         className={ny(\n            'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n            className,\n         )}\n         {...props}\n      >\n         {children}\n         <ChevronDownIcon className=\"text-muted-foreground size-4 shrink-0 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n   </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <AccordionPrimitive.Content\n      ref={ref}\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n      {...props}\n   >\n      <div className={ny('pb-4 pt-0', className)}>{children}</div>\n   </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n   <AccordionPrimitive.Item\n      ref={ref}\n      className={ny(\"border-b\", className)}\n      {...props}\n   />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n         ref={ref}\n         className={ny(\n            \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n         <ChevronDownIcon className=\"text-muted-foreground size-4 shrink-0 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n   </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <AccordionPrimitive.Content\n      ref={ref}\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n      {...props}\n   >\n      <div className={ny(\"pb-4 pt-0\", className)}>{children}</div>\n   </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/alert-demo.json b/apps/web/public/r/styles/miami/alert-demo.json
index 35d90bc9..e63231b1 100644
--- a/apps/web/public/r/styles/miami/alert-demo.json
+++ b/apps/web/public/r/styles/miami/alert-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "alert-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "alert"
   ],
   "files": [
     {
-      "path": "example/alert-demo.tsx",
-      "content": "import { RocketIcon } from '@radix-ui/react-icons'\n\nimport { Alert, AlertDescription, AlertTitle } from '~/registry/miami/ui/alert'\n\nexport default function AlertDemo() {\n   return (\n      <Alert>\n         <RocketIcon className=\"size-4\" />\n         <AlertTitle>Heads up!</AlertTitle>\n         <AlertDescription>\n            You can add components to your app using the cli.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/alert-demo.tsx",
+      "content": "import { RocketIcon } from \"@radix-ui/react-icons\"\n\nimport { Alert, AlertDescription, AlertTitle } from \"~/registry/miami/ui/alert\"\n\nexport default function AlertDemo() {\n   return (\n      <Alert>\n         <RocketIcon className=\"size-4\" />\n         <AlertTitle>Heads up!</AlertTitle>\n         <AlertDescription>\n            You can add components to your app using the cli.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/alert-destructive.json b/apps/web/public/r/styles/miami/alert-destructive.json
index aa98de57..ef2ee6a9 100644
--- a/apps/web/public/r/styles/miami/alert-destructive.json
+++ b/apps/web/public/r/styles/miami/alert-destructive.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "alert-destructive",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "alert"
   ],
   "files": [
     {
-      "path": "example/alert-destructive.tsx",
-      "content": "import { ExclamationTriangleIcon } from '@radix-ui/react-icons'\n\nimport { Alert, AlertDescription, AlertTitle } from '~/registry/miami/ui/alert'\n\nexport default function AlertDestructive() {\n   return (\n      <Alert variant=\"destructive\">\n         <ExclamationTriangleIcon className=\"size-4\" />\n         <AlertTitle>Error</AlertTitle>\n         <AlertDescription>\n            Your session has expired. Please log in again.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/alert-destructive.tsx",
+      "content": "import { ExclamationTriangleIcon } from \"@radix-ui/react-icons\"\n\nimport { Alert, AlertDescription, AlertTitle } from \"~/registry/miami/ui/alert\"\n\nexport default function AlertDestructive() {\n   return (\n      <Alert variant=\"destructive\">\n         <ExclamationTriangleIcon className=\"size-4\" />\n         <AlertTitle>Error</AlertTitle>\n         <AlertDescription>\n            Your session has expired. Please log in again.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/alert-dialog-demo.json b/apps/web/public/r/styles/miami/alert-dialog-demo.json
index ffe6c02e..40945c65 100644
--- a/apps/web/public/r/styles/miami/alert-dialog-demo.json
+++ b/apps/web/public/r/styles/miami/alert-dialog-demo.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "alert-dialog-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "alert-dialog",
     "button"
   ],
   "files": [
     {
-      "path": "example/alert-dialog-demo.tsx",
-      "content": "import {\n   AlertDialog,\n   AlertDialogAction,\n   AlertDialogCancel,\n   AlertDialogContent,\n   AlertDialogDescription,\n   AlertDialogFooter,\n   AlertDialogHeader,\n   AlertDialogTitle,\n   AlertDialogTrigger,\n} from '~/registry/miami/ui/alert-dialog'\nimport { Button } from '~/registry/miami/ui/button'\n\nexport default function AlertDialogDemo() {\n   return (\n      <AlertDialog>\n         <AlertDialogTrigger asChild>\n            <Button variant=\"outline\">Show Dialog</Button>\n         </AlertDialogTrigger>\n         <AlertDialogContent>\n            <AlertDialogHeader>\n               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n               <AlertDialogDescription>\n                  This action cannot be undone. This will permanently delete your\n                  account and remove your data from our servers.\n               </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n               <AlertDialogCancel>Cancel</AlertDialogCancel>\n               <AlertDialogAction>Continue</AlertDialogAction>\n            </AlertDialogFooter>\n         </AlertDialogContent>\n      </AlertDialog>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/alert-dialog-demo.tsx",
+      "content": "import {\n   AlertDialog,\n   AlertDialogAction,\n   AlertDialogCancel,\n   AlertDialogContent,\n   AlertDialogDescription,\n   AlertDialogFooter,\n   AlertDialogHeader,\n   AlertDialogTitle,\n   AlertDialogTrigger,\n} from \"~/registry/miami/ui/alert-dialog\"\nimport { Button } from \"~/registry/miami/ui/button\"\n\nexport default function AlertDialogDemo() {\n   return (\n      <AlertDialog>\n         <AlertDialogTrigger asChild>\n            <Button variant=\"outline\">Show Dialog</Button>\n         </AlertDialogTrigger>\n         <AlertDialogContent>\n            <AlertDialogHeader>\n               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n               <AlertDialogDescription>\n                  This action cannot be undone. This will permanently delete\n                  your account and remove your data from our servers.\n               </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n               <AlertDialogCancel>Cancel</AlertDialogCancel>\n               <AlertDialogAction>Continue</AlertDialogAction>\n            </AlertDialogFooter>\n         </AlertDialogContent>\n      </AlertDialog>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/alert-dialog.json b/apps/web/public/r/styles/miami/alert-dialog.json
index 1a25190b..1d96cd9d 100644
--- a/apps/web/public/r/styles/miami/alert-dialog.json
+++ b/apps/web/public/r/styles/miami/alert-dialog.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "alert-dialog",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-alert-dialog"
   ],
@@ -10,8 +12,8 @@
   "files": [
     {
       "path": "ui/alert-dialog.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'\nimport type { VariantProps } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\nimport { buttonVariants } from '~/registry/miami/ui/button'\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Overlay\n      className={ny(\n         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',\n         className,\n      )}\n      {...props}\n      ref={ref}\n   />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n         ref={ref}\n         className={ny(\n            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',\n            className,\n         )}\n         {...props}\n      />\n   </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nfunction AlertDialogHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            'flex flex-col space-y-2 text-center sm:text-left',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nAlertDialogHeader.displayName = 'AlertDialogHeader'\n\nfunction AlertDialogFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nAlertDialogFooter.displayName = 'AlertDialogFooter'\n\nconst AlertDialogTitle = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Title\n      ref={ref}\n      className={ny('text-lg font-semibold', className)}\n      {...props}\n   />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Description\n      ref={ref}\n      className={ny('text-muted-foreground text-sm', className)}\n      {...props}\n   />\n))\nAlertDialogDescription.displayName\n  = AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Action>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &\n   VariantProps<typeof buttonVariants>\n>(({ className, variant, size, ...props }, ref) => (\n   <AlertDialogPrimitive.Action\n      ref={ref}\n      className={ny(buttonVariants({ variant, size }), className)}\n      {...props}\n   />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &\n   VariantProps<typeof buttonVariants>\n>(({ className, variant = 'outline', size, ...props }, ref) => (\n   <AlertDialogPrimitive.Cancel\n      ref={ref}\n      className={ny(buttonVariants({ variant, size }), 'mt-2 sm:mt-0', className)}\n      {...props}\n   />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n   AlertDialog,\n   AlertDialogPortal,\n   AlertDialogOverlay,\n   AlertDialogTrigger,\n   AlertDialogContent,\n   AlertDialogHeader,\n   AlertDialogFooter,\n   AlertDialogTitle,\n   AlertDialogDescription,\n   AlertDialogAction,\n   AlertDialogCancel,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { buttonVariants } from \"~/registry/miami/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Overlay\n      className={ny(\n         \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80\",\n         className,\n      )}\n      {...props}\n      ref={ref}\n   />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n         ref={ref}\n         className={ny(\n            \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg\",\n            className,\n         )}\n         {...props}\n      />\n   </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nfunction AlertDialogHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            \"flex flex-col space-y-2 text-center sm:text-left\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nfunction AlertDialogFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Title\n      ref={ref}\n      className={ny(\"text-lg font-semibold\", className)}\n      {...props}\n   />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Description\n      ref={ref}\n      className={ny(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nAlertDialogDescription.displayName =\n   AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Action>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &\n      VariantProps<typeof buttonVariants>\n>(({ className, variant, size, ...props }, ref) => (\n   <AlertDialogPrimitive.Action\n      ref={ref}\n      className={ny(buttonVariants({ variant, size }), className)}\n      {...props}\n   />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &\n      VariantProps<typeof buttonVariants>\n>(({ className, variant = \"outline\", size, ...props }, ref) => (\n   <AlertDialogPrimitive.Cancel\n      ref={ref}\n      className={ny(\n         buttonVariants({ variant, size }),\n         \"mt-2 sm:mt-0\",\n         className,\n      )}\n      {...props}\n   />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n   AlertDialog,\n   AlertDialogPortal,\n   AlertDialogOverlay,\n   AlertDialogTrigger,\n   AlertDialogContent,\n   AlertDialogHeader,\n   AlertDialogFooter,\n   AlertDialogTitle,\n   AlertDialogDescription,\n   AlertDialogAction,\n   AlertDialogCancel,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/alert.json b/apps/web/public/r/styles/miami/alert.json
index 24acdb4c..968602b5 100644
--- a/apps/web/public/r/styles/miami/alert.json
+++ b/apps/web/public/r/styles/miami/alert.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "alert",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/alert.tsx",
-      "content": "import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst alertVariants = cva(\n   'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n   {\n      variants: {\n         variant: {\n            default: 'bg-background text-foreground',\n            destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n      },\n   },\n)\n\nconst Alert = React.forwardRef<\n   HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n   <div\n      ref={ref}\n      role=\"alert\"\n      className={ny(alertVariants({ variant }), className)}\n      {...props}\n   />\n))\nAlert.displayName = 'Alert'\n\nconst AlertTitle = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n   <h5\n      ref={ref}\n      className={ny('mb-1 font-medium leading-none tracking-tight', className)}\n      {...props}\n   />\n))\nAlertTitle.displayName = 'AlertTitle'\n\nconst AlertDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny('text-sm [&_p]:leading-relaxed', className)}\n      {...props}\n   />\n))\nAlertDescription.displayName = 'AlertDescription'\n\nexport { Alert, AlertTitle, AlertDescription }\n",
-      "type": "registry:component",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst alertVariants = cva(\n   \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-background text-foreground\",\n            destructive:\n               \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nconst Alert = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n   <div\n      ref={ref}\n      role=\"alert\"\n      className={ny(alertVariants({ variant }), className)}\n      {...props}\n   />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n   <h5\n      ref={ref}\n      className={ny(\"mb-1 font-medium leading-none tracking-tight\", className)}\n      {...props}\n   />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\"text-sm [&_p]:leading-relaxed\", className)}\n      {...props}\n   />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-beam-bidirectional.json b/apps/web/public/r/styles/miami/animated-beam-bidirectional.json
index 003fb704..b6475a69 100644
--- a/apps/web/public/r/styles/miami/animated-beam-bidirectional.json
+++ b/apps/web/public/r/styles/miami/animated-beam-bidirectional.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-beam-bidirectional",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-beam-bidirectional.tsx",
-      "content": "'use client'\n\nimport React, { forwardRef, useRef } from 'react'\nimport { ny } from '~/lib/utils'\nimport { AnimatedBeam } from '~/registry/miami/ui/animated-beam'\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string, children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.user />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.openai />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n            startYOffset={10}\n            endYOffset={10}\n            curvature={-20}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n            startYOffset={-10}\n            endYOffset={-10}\n            curvature={20}\n            reverse\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   openai: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-beam-bidirectional.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\nimport { AnimatedBeam } from \"~/registry/miami/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.user />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.openai />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n            startYOffset={10}\n            endYOffset={10}\n            curvature={-20}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n            startYOffset={-10}\n            endYOffset={-10}\n            curvature={20}\n            reverse\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   openai: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-beam-demo.json b/apps/web/public/r/styles/miami/animated-beam-demo.json
index 2cd410aa..de836418 100644
--- a/apps/web/public/r/styles/miami/animated-beam-demo.json
+++ b/apps/web/public/r/styles/miami/animated-beam-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-beam-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-beam-demo.tsx",
-      "content": "'use client'\n\nimport React, { forwardRef, useRef } from 'react'\nimport { ny } from '~/lib/utils'\nimport { AnimatedBeam } from '~/registry/miami/ui/animated-beam'\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string, children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n            </div>\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div2Ref}>\n                  <Icons.notion />\n               </Circle>\n               <Circle ref={div4Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n               <Circle ref={div6Ref}>\n                  <Icons.zapier />\n               </Circle>\n            </div>\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div7Ref}>\n                  <Icons.messenger />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div4Ref}\n            curvature={-75}\n            endYOffset={-10}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div4Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div4Ref}\n            curvature={75}\n            endYOffset={10}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div4Ref}\n            curvature={-75}\n            endYOffset={-10}\n            reverse\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div4Ref}\n            reverse\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div7Ref}\n            toRef={div4Ref}\n            curvature={75}\n            endYOffset={10}\n            reverse\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g id=\"Personal\" transform=\"translate(277.000000, 309.000000)\">\n                     <g id=\"Docs-icon\" transform=\"translate(174.000000, 91.000000)\">\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              >\n                              </polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-beam-demo.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\nimport { AnimatedBeam } from \"~/registry/miami/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n            </div>\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div2Ref}>\n                  <Icons.notion />\n               </Circle>\n               <Circle ref={div4Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n               <Circle ref={div6Ref}>\n                  <Icons.zapier />\n               </Circle>\n            </div>\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div7Ref}>\n                  <Icons.messenger />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div4Ref}\n            curvature={-75}\n            endYOffset={-10}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div4Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div4Ref}\n            curvature={75}\n            endYOffset={10}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div4Ref}\n            curvature={-75}\n            endYOffset={-10}\n            reverse\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div4Ref}\n            reverse\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div7Ref}\n            toRef={div4Ref}\n            curvature={75}\n            endYOffset={10}\n            reverse\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g\n                     id=\"Personal\"\n                     transform=\"translate(277.000000, 309.000000)\"\n                  >\n                     <g\n                        id=\"Docs-icon\"\n                        transform=\"translate(174.000000, 91.000000)\"\n                     >\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              ></polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-beam-multiple-inputs.json b/apps/web/public/r/styles/miami/animated-beam-multiple-inputs.json
index 85e971f0..ca3fde44 100644
--- a/apps/web/public/r/styles/miami/animated-beam-multiple-inputs.json
+++ b/apps/web/public/r/styles/miami/animated-beam-multiple-inputs.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-beam-multiple-inputs",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-beam-multiple-inputs.tsx",
-      "content": "'use client'\n\nimport React, { forwardRef, useRef } from 'react'\nimport { ny } from '~/lib/utils'\nimport { AnimatedBeam } from '~/registry/default/ui/animated-beam'\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string, children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'border-border z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamMultipleInputDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-row items-stretch justify-between gap-10\">\n            <div className=\"flex flex-col justify-center gap-2\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div4Ref}>\n                  <Icons.messenger />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.notion />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div6Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div7Ref}>\n                  <Icons.user />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div4Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div7Ref}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g id=\"Personal\" transform=\"translate(277.000000, 309.000000)\">\n                     <g id=\"Docs-icon\" transform=\"translate(174.000000, 91.000000)\">\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              >\n                              </polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-beam-multiple-inputs.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\nimport { AnimatedBeam } from \"~/registry/default/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"border-border z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamMultipleInputDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-row items-stretch justify-between gap-10\">\n            <div className=\"flex flex-col justify-center gap-2\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div4Ref}>\n                  <Icons.messenger />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.notion />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div6Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div7Ref}>\n                  <Icons.user />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div4Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div7Ref}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g\n                     id=\"Personal\"\n                     transform=\"translate(277.000000, 309.000000)\"\n                  >\n                     <g\n                        id=\"Docs-icon\"\n                        transform=\"translate(174.000000, 91.000000)\"\n                     >\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              ></polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-beam-multiple-outputs.json b/apps/web/public/r/styles/miami/animated-beam-multiple-outputs.json
index e23d9d77..9b531100 100644
--- a/apps/web/public/r/styles/miami/animated-beam-multiple-outputs.json
+++ b/apps/web/public/r/styles/miami/animated-beam-multiple-outputs.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-beam-multiple-outputs",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-beam-multiple-outputs.tsx",
-      "content": "'use client'\n\nimport React, { forwardRef, useRef } from 'react'\nimport { ny } from '~/lib/utils'\nimport { AnimatedBeam } from '~/registry/miami/ui/animated-beam'\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string, children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamMultipleOutputDemo({\n   className,\n}: {\n   className?: string\n}) {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className={ny(\n            'bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl',\n            className,\n         )}\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-row items-stretch justify-between gap-10\">\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div7Ref}>\n                  <Icons.user />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div6Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center gap-2\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div4Ref}>\n                  <Icons.messenger />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.notion />\n               </Circle>\n            </div>\n         </div>\n\n         {/* AnimatedBeams */}\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div4Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div7Ref}\n            duration={3}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g id=\"Personal\" transform=\"translate(277.000000, 309.000000)\">\n                     <g id=\"Docs-icon\" transform=\"translate(174.000000, 91.000000)\">\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              >\n                              </polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-beam-multiple-outputs.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\nimport { AnimatedBeam } from \"~/registry/miami/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamMultipleOutputDemo({\n   className,\n}: {\n   className?: string\n}) {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className={ny(\n            \"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\",\n            className,\n         )}\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-row items-stretch justify-between gap-10\">\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div7Ref}>\n                  <Icons.user />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div6Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center gap-2\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div4Ref}>\n                  <Icons.messenger />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.notion />\n               </Circle>\n            </div>\n         </div>\n\n         {/* AnimatedBeams */}\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div4Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div7Ref}\n            duration={3}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g\n                     id=\"Personal\"\n                     transform=\"translate(277.000000, 309.000000)\"\n                  >\n                     <g\n                        id=\"Docs-icon\"\n                        transform=\"translate(174.000000, 91.000000)\"\n                     >\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              ></polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-beam-unidirectional.json b/apps/web/public/r/styles/miami/animated-beam-unidirectional.json
index 2cf70a5c..fc1a97c0 100644
--- a/apps/web/public/r/styles/miami/animated-beam-unidirectional.json
+++ b/apps/web/public/r/styles/miami/animated-beam-unidirectional.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-beam-unidirectional",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-beam-unidirectional.tsx",
-      "content": "'use client'\n\nimport React, { forwardRef, useRef } from 'react'\nimport { ny } from '~/lib/utils'\nimport { AnimatedBeam } from '~/registry/miami/ui/animated-beam'\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string, children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.user />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.openai />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            duration={3}\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   openai: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-beam-unidirectional.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\nimport { AnimatedBeam } from \"~/registry/miami/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.user />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.openai />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            duration={3}\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   openai: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-beam.json b/apps/web/public/r/styles/miami/animated-beam.json
index 257bc99e..c274d312 100644
--- a/apps/web/public/r/styles/miami/animated-beam.json
+++ b/apps/web/public/r/styles/miami/animated-beam.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-beam",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/animated-beam.tsx",
-      "content": "'use client'\n\nimport { motion } from 'framer-motion'\nimport type { RefObject } from 'react'\nimport { useEffect, useId, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\nexport interface AnimatedBeamProps {\n   className?: string\n   containerRef: RefObject<HTMLElement> // Container ref\n   fromRef: RefObject<HTMLElement>\n   toRef: RefObject<HTMLElement>\n   curvature?: number\n   reverse?: boolean\n   pathColor?: string\n   pathWidth?: number\n   pathOpacity?: number\n   gradientStartColor?: string\n   gradientStopColor?: string\n   delay?: number\n   duration?: number\n   startXOffset?: number\n   startYOffset?: number\n   endXOffset?: number\n   endYOffset?: number\n}\n\nexport const AnimatedBeam: React.FC<AnimatedBeamProps> = ({\n   className,\n   containerRef,\n   fromRef,\n   toRef,\n   curvature = 0,\n   reverse = false, // Include the reverse prop\n   duration = Math.random() * 3 + 4,\n   delay = 0,\n   pathColor = 'gray',\n   pathWidth = 2,\n   pathOpacity = 0.2,\n   gradientStartColor = '#ffaa40',\n   gradientStopColor = '#9c40ff',\n   startXOffset = 0,\n   startYOffset = 0,\n   endXOffset = 0,\n   endYOffset = 0,\n}) => {\n   const id = useId()\n   const [pathD, setPathD] = useState('')\n   const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 })\n\n   // Calculate the gradient coordinates based on the reverse prop\n   const gradientCoordinates = reverse\n      ? {\n            x1: ['90%', '-10%'],\n            x2: ['100%', '0%'],\n            y1: ['0%', '0%'],\n            y2: ['0%', '0%'],\n         }\n      : {\n            x1: ['10%', '110%'],\n            x2: ['0%', '100%'],\n            y1: ['0%', '0%'],\n            y2: ['0%', '0%'],\n         }\n\n   useEffect(() => {\n      const updatePath = () => {\n         if (containerRef.current && fromRef.current && toRef.current) {\n            const containerRect = containerRef.current.getBoundingClientRect()\n            const rectA = fromRef.current.getBoundingClientRect()\n            const rectB = toRef.current.getBoundingClientRect()\n\n            const svgWidth = containerRect.width\n            const svgHeight = containerRect.height\n            setSvgDimensions({ width: svgWidth, height: svgHeight })\n\n            const startX\n          = rectA.left - containerRect.left + rectA.width / 2 + startXOffset\n            const startY\n          = rectA.top - containerRect.top + rectA.height / 2 + startYOffset\n            const endX\n          = rectB.left - containerRect.left + rectB.width / 2 + endXOffset\n            const endY\n          = rectB.top - containerRect.top + rectB.height / 2 + endYOffset\n\n            const controlY = startY - curvature\n            const d = `M ${startX},${startY} Q ${\n          (startX + endX) / 2\n        },${controlY} ${endX},${endY}`\n            setPathD(d)\n         }\n      }\n\n      // Initialize ResizeObserver\n      const resizeObserver = new ResizeObserver((entries) => {\n      // For all entries, recalculate the path\n         for (const entry of entries) updatePath()\n      })\n\n      // Observe the container element\n      if (containerRef.current)\n         resizeObserver.observe(containerRef.current)\n\n      // Call the updatePath initially to set the initial path\n      updatePath()\n\n      // Clean up the observer on component unmount\n      return () => {\n         resizeObserver.disconnect()\n      }\n   }, [\n      containerRef,\n      fromRef,\n      toRef,\n      curvature,\n      startXOffset,\n      startYOffset,\n      endXOffset,\n      endYOffset,\n   ])\n\n   return (\n      <svg\n         fill=\"none\"\n         width={svgDimensions.width}\n         height={svgDimensions.height}\n         xmlns=\"http://www.w3.org/2000/svg\"\n         className={ny(\n            'pointer-events-none absolute left-0 top-0 transform-gpu stroke-2',\n            className,\n         )}\n         viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}\n      >\n         <path\n            d={pathD}\n            stroke={pathColor}\n            strokeWidth={pathWidth}\n            strokeOpacity={pathOpacity}\n            strokeLinecap=\"round\"\n         />\n         <path\n            d={pathD}\n            strokeWidth={pathWidth}\n            stroke={`url(#${id})`}\n            strokeOpacity=\"1\"\n            strokeLinecap=\"round\"\n         />\n         <defs>\n            <motion.linearGradient\n               className=\"transform-gpu\"\n               id={id}\n               gradientUnits=\"userSpaceOnUse\"\n               initial={{\n                  x1: '0%',\n                  x2: '0%',\n                  y1: '0%',\n                  y2: '0%',\n               }}\n               animate={{\n                  x1: gradientCoordinates.x1,\n                  x2: gradientCoordinates.x2,\n                  y1: gradientCoordinates.y1,\n                  y2: gradientCoordinates.y2,\n               }}\n               transition={{\n                  delay,\n                  duration,\n                  ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo\n                  repeat: Infinity,\n                  repeatDelay: 0,\n               }}\n            >\n               <stop stopColor={gradientStartColor} stopOpacity=\"0\"></stop>\n               <stop stopColor={gradientStartColor}></stop>\n               <stop offset=\"32.5%\" stopColor={gradientStopColor}></stop>\n               <stop\n                  offset=\"100%\"\n                  stopColor={gradientStopColor}\n                  stopOpacity=\"0\"\n               >\n               </stop>\n            </motion.linearGradient>\n         </defs>\n      </svg>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport type { RefObject } from \"react\"\nimport { useEffect, useId, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\nexport interface AnimatedBeamProps {\n   className?: string\n   containerRef: RefObject<HTMLElement> // Container ref\n   fromRef: RefObject<HTMLElement>\n   toRef: RefObject<HTMLElement>\n   curvature?: number\n   reverse?: boolean\n   pathColor?: string\n   pathWidth?: number\n   pathOpacity?: number\n   gradientStartColor?: string\n   gradientStopColor?: string\n   delay?: number\n   duration?: number\n   startXOffset?: number\n   startYOffset?: number\n   endXOffset?: number\n   endYOffset?: number\n}\n\nexport const AnimatedBeam: React.FC<AnimatedBeamProps> = ({\n   className,\n   containerRef,\n   fromRef,\n   toRef,\n   curvature = 0,\n   reverse = false, // Include the reverse prop\n   duration = Math.random() * 3 + 4,\n   delay = 0,\n   pathColor = \"gray\",\n   pathWidth = 2,\n   pathOpacity = 0.2,\n   gradientStartColor = \"#ffaa40\",\n   gradientStopColor = \"#9c40ff\",\n   startXOffset = 0,\n   startYOffset = 0,\n   endXOffset = 0,\n   endYOffset = 0,\n}) => {\n   const id = useId()\n   const [pathD, setPathD] = useState(\"\")\n   const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 })\n\n   // Calculate the gradient coordinates based on the reverse prop\n   const gradientCoordinates = reverse\n      ? {\n           x1: [\"90%\", \"-10%\"],\n           x2: [\"100%\", \"0%\"],\n           y1: [\"0%\", \"0%\"],\n           y2: [\"0%\", \"0%\"],\n        }\n      : {\n           x1: [\"10%\", \"110%\"],\n           x2: [\"0%\", \"100%\"],\n           y1: [\"0%\", \"0%\"],\n           y2: [\"0%\", \"0%\"],\n        }\n\n   useEffect(() => {\n      const updatePath = () => {\n         if (containerRef.current && fromRef.current && toRef.current) {\n            const containerRect = containerRef.current.getBoundingClientRect()\n            const rectA = fromRef.current.getBoundingClientRect()\n            const rectB = toRef.current.getBoundingClientRect()\n\n            const svgWidth = containerRect.width\n            const svgHeight = containerRect.height\n            setSvgDimensions({ width: svgWidth, height: svgHeight })\n\n            const startX =\n               rectA.left - containerRect.left + rectA.width / 2 + startXOffset\n            const startY =\n               rectA.top - containerRect.top + rectA.height / 2 + startYOffset\n            const endX =\n               rectB.left - containerRect.left + rectB.width / 2 + endXOffset\n            const endY =\n               rectB.top - containerRect.top + rectB.height / 2 + endYOffset\n\n            const controlY = startY - curvature\n            const d = `M ${startX},${startY} Q ${\n               (startX + endX) / 2\n            },${controlY} ${endX},${endY}`\n            setPathD(d)\n         }\n      }\n\n      // Initialize ResizeObserver\n      const resizeObserver = new ResizeObserver((entries) => {\n         // For all entries, recalculate the path\n         for (const entry of entries) updatePath()\n      })\n\n      // Observe the container element\n      if (containerRef.current) resizeObserver.observe(containerRef.current)\n\n      // Call the updatePath initially to set the initial path\n      updatePath()\n\n      // Clean up the observer on component unmount\n      return () => {\n         resizeObserver.disconnect()\n      }\n   }, [\n      containerRef,\n      fromRef,\n      toRef,\n      curvature,\n      startXOffset,\n      startYOffset,\n      endXOffset,\n      endYOffset,\n   ])\n\n   return (\n      <svg\n         fill=\"none\"\n         width={svgDimensions.width}\n         height={svgDimensions.height}\n         xmlns=\"http://www.w3.org/2000/svg\"\n         className={ny(\n            \"pointer-events-none absolute left-0 top-0 transform-gpu stroke-2\",\n            className,\n         )}\n         viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}\n      >\n         <path\n            d={pathD}\n            stroke={pathColor}\n            strokeWidth={pathWidth}\n            strokeOpacity={pathOpacity}\n            strokeLinecap=\"round\"\n         />\n         <path\n            d={pathD}\n            strokeWidth={pathWidth}\n            stroke={`url(#${id})`}\n            strokeOpacity=\"1\"\n            strokeLinecap=\"round\"\n         />\n         <defs>\n            <motion.linearGradient\n               className=\"transform-gpu\"\n               id={id}\n               gradientUnits=\"userSpaceOnUse\"\n               initial={{\n                  x1: \"0%\",\n                  x2: \"0%\",\n                  y1: \"0%\",\n                  y2: \"0%\",\n               }}\n               animate={{\n                  x1: gradientCoordinates.x1,\n                  x2: gradientCoordinates.x2,\n                  y1: gradientCoordinates.y1,\n                  y2: gradientCoordinates.y2,\n               }}\n               transition={{\n                  delay,\n                  duration,\n                  ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo\n                  repeat: Number.POSITIVE_INFINITY,\n                  repeatDelay: 0,\n               }}\n            >\n               <stop stopColor={gradientStartColor} stopOpacity=\"0\"></stop>\n               <stop stopColor={gradientStartColor}></stop>\n               <stop offset=\"32.5%\" stopColor={gradientStopColor}></stop>\n               <stop\n                  offset=\"100%\"\n                  stopColor={gradientStopColor}\n                  stopOpacity=\"0\"\n               ></stop>\n            </motion.linearGradient>\n         </defs>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-circular-progress-bar-demo.json b/apps/web/public/r/styles/miami/animated-circular-progress-bar-demo.json
index 694fb7b7..df40554e 100644
--- a/apps/web/public/r/styles/miami/animated-circular-progress-bar-demo.json
+++ b/apps/web/public/r/styles/miami/animated-circular-progress-bar-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-circular-progress-bar-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-circular-progress-bar-demo.tsx",
-      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\n\nimport AnimatedCircularProgressBar from '~/registry/miami/ui/animated-circular-progress-bar'\n\nexport default function AnimatedCircularProgressBarDemo() {\n   const [value, setValue] = useState(0)\n\n   useEffect(() => {\n      const handleIncrement = (prev: number) => {\n         if (prev === 100) {\n            return 0\n         }\n         return prev + 10\n      }\n      setValue(handleIncrement)\n      const interval = setInterval(() => setValue(handleIncrement), 2000)\n      return () => clearInterval(interval)\n   }, [])\n\n   return (\n      <AnimatedCircularProgressBar\n         max={100}\n         min={0}\n         value={value}\n         gaugePrimaryColor=\"rgb(79 70 229)\"\n         gaugeSecondaryColor=\"rgba(0, 0, 0, 0.1)\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-circular-progress-bar-demo.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport AnimatedCircularProgressBar from \"~/registry/miami/ui/animated-circular-progress-bar\"\n\nexport default function AnimatedCircularProgressBarDemo() {\n   const [value, setValue] = useState(0)\n\n   useEffect(() => {\n      const handleIncrement = (prev: number) => {\n         if (prev === 100) {\n            return 0\n         }\n         return prev + 10\n      }\n      setValue(handleIncrement)\n      const interval = setInterval(() => setValue(handleIncrement), 2000)\n      return () => clearInterval(interval)\n   }, [])\n\n   return (\n      <AnimatedCircularProgressBar\n         max={100}\n         min={0}\n         value={value}\n         gaugePrimaryColor=\"rgb(79 70 229)\"\n         gaugeSecondaryColor=\"rgba(0, 0, 0, 0.1)\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-circular-progress-bar.json b/apps/web/public/r/styles/miami/animated-circular-progress-bar.json
index 76287d99..d9b4c4bd 100644
--- a/apps/web/public/r/styles/miami/animated-circular-progress-bar.json
+++ b/apps/web/public/r/styles/miami/animated-circular-progress-bar.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-circular-progress-bar",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/animated-circular-progress-bar.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\ninterface Props {\n   max: number\n   value: number\n   min: number\n   gaugePrimaryColor: string\n   gaugeSecondaryColor: string\n   className?: string\n}\n\nexport default function AnimatedCircularProgressBar({\n   max = 100,\n   min = 0,\n   value = 0,\n   gaugePrimaryColor,\n   gaugeSecondaryColor,\n   className,\n}: Props) {\n   const circumference = 2 * Math.PI * 45\n   const percentPx = circumference / 100\n   const currentPercent = Math.round(((value - min) / (max - min)) * 100)\n\n   return (\n      <div\n         className={ny('relative size-40 text-2xl font-semibold', className)}\n         style={\n            {\n               '--circle-size': '100px',\n               '--circumference': circumference,\n               '--percent-to-px': `${percentPx}px`,\n               '--gap-percent': '5',\n               '--offset-factor': '0',\n               '--transition-length': '1s',\n               '--transition-step': '200ms',\n               '--delay': '0s',\n               '--percent-to-deg': '3.6deg',\n               'transform': 'translateZ(0)',\n            } as React.CSSProperties\n         }\n      >\n         <svg\n            fill=\"none\"\n            className=\"size-full\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 100 100\"\n         >\n            {currentPercent <= 90 && currentPercent >= 0 && (\n               <circle\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"45\"\n                  strokeWidth=\"10\"\n                  strokeDashoffset=\"0\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\" opacity-100\"\n                  style={\n                     {\n                        'stroke': gaugeSecondaryColor,\n                        '--stroke-percent': 90 - currentPercent,\n                        '--offset-factor-secondary': 'calc(1 - var(--offset-factor))',\n                        'strokeDasharray':\n                  'calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)',\n                        'transform':\n                  'rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)',\n                        'transition': 'all var(--transition-length) ease var(--delay)',\n                        'transformOrigin':\n                  'calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)',\n                     } as React.CSSProperties\n                  }\n               />\n            )}\n            <circle\n               cx=\"50\"\n               cy=\"50\"\n               r=\"45\"\n               strokeWidth=\"10\"\n               strokeDashoffset=\"0\"\n               strokeLinecap=\"round\"\n               strokeLinejoin=\"round\"\n               className=\"opacity-100\"\n               style={\n                  {\n                     'stroke': gaugePrimaryColor,\n                     '--stroke-percent': currentPercent,\n                     'strokeDasharray':\n                'calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)',\n                     'transition':\n                'var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)',\n                     'transitionProperty': 'stroke-dasharray,transform',\n                     'transform':\n                'rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))',\n                     'transformOrigin':\n                'calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)',\n                  } as React.CSSProperties\n               }\n            />\n         </svg>\n         <span\n            data-current-value={currentPercent}\n            className=\"animate-in fade-in absolute inset-0 m-auto size-fit delay-[var(--delay)] duration-[var(--transition-length)] ease-linear\"\n         >\n            {currentPercent}\n         </span>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/lib/utils\"\n\ninterface Props {\n   max: number\n   value: number\n   min: number\n   gaugePrimaryColor: string\n   gaugeSecondaryColor: string\n   className?: string\n}\n\nexport default function AnimatedCircularProgressBar({\n   max = 100,\n   min = 0,\n   value = 0,\n   gaugePrimaryColor,\n   gaugeSecondaryColor,\n   className,\n}: Props) {\n   const circumference = 2 * Math.PI * 45\n   const percentPx = circumference / 100\n   const currentPercent = Math.round(((value - min) / (max - min)) * 100)\n\n   return (\n      <div\n         className={ny(\"relative size-40 text-2xl font-semibold\", className)}\n         style={\n            {\n               \"--circle-size\": \"100px\",\n               \"--circumference\": circumference,\n               \"--percent-to-px\": `${percentPx}px`,\n               \"--gap-percent\": \"5\",\n               \"--offset-factor\": \"0\",\n               \"--transition-length\": \"1s\",\n               \"--transition-step\": \"200ms\",\n               \"--delay\": \"0s\",\n               \"--percent-to-deg\": \"3.6deg\",\n               transform: \"translateZ(0)\",\n            } as React.CSSProperties\n         }\n      >\n         <svg\n            fill=\"none\"\n            className=\"size-full\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 100 100\"\n         >\n            {currentPercent <= 90 && currentPercent >= 0 && (\n               <circle\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"45\"\n                  strokeWidth=\"10\"\n                  strokeDashoffset=\"0\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\" opacity-100\"\n                  style={\n                     {\n                        stroke: gaugeSecondaryColor,\n                        \"--stroke-percent\": 90 - currentPercent,\n                        \"--offset-factor-secondary\":\n                           \"calc(1 - var(--offset-factor))\",\n                        strokeDasharray:\n                           \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n                        transform:\n                           \"rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)\",\n                        transition:\n                           \"all var(--transition-length) ease var(--delay)\",\n                        transformOrigin:\n                           \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n                     } as React.CSSProperties\n                  }\n               />\n            )}\n            <circle\n               cx=\"50\"\n               cy=\"50\"\n               r=\"45\"\n               strokeWidth=\"10\"\n               strokeDashoffset=\"0\"\n               strokeLinecap=\"round\"\n               strokeLinejoin=\"round\"\n               className=\"opacity-100\"\n               style={\n                  {\n                     stroke: gaugePrimaryColor,\n                     \"--stroke-percent\": currentPercent,\n                     strokeDasharray:\n                        \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n                     transition:\n                        \"var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)\",\n                     transitionProperty: \"stroke-dasharray,transform\",\n                     transform:\n                        \"rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))\",\n                     transformOrigin:\n                        \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n                  } as React.CSSProperties\n               }\n            />\n         </svg>\n         <span\n            data-current-value={currentPercent}\n            className=\"animate-in fade-in absolute inset-0 m-auto size-fit delay-[var(--delay)] duration-[var(--transition-length)] ease-linear\"\n         >\n            {currentPercent}\n         </span>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-feature-card-1.json b/apps/web/public/r/styles/miami/animated-feature-card-1.json
index 8319b692..3ea723cb 100644
--- a/apps/web/public/r/styles/miami/animated-feature-card-1.json
+++ b/apps/web/public/r/styles/miami/animated-feature-card-1.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-1",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-1.tsx",
-      "content": "'use client'\n\nimport { motion } from 'framer-motion'\n\nexport default function FeatureCard1() {\n   const variant1 = {\n      initial: {\n         scale: 0.87,\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: 'linear',\n         },\n      },\n      whileHover: {\n         scale: 0.8,\n         boxShadow:\n        'rgba(245,40,145,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: 'linear',\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: -27,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: 'linear',\n         },\n      },\n      whileHover: {\n         y: -55,\n         scale: 0.87,\n         boxShadow:\n        'rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: 'linear',\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         y: -25,\n         opacity: 0,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: 'linear',\n         },\n      },\n      whileHover: {\n         y: -45,\n         opacity: 1,\n         scale: 1,\n         boxShadow:\n        'rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: 'easeInOut',\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 p-10\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"z-[1] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"z-[2] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jane\"\n                           alt=\"jane\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant3}\n                     className=\"absolute bottom-0 z-[3] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jill\"\n                           alt=\"jill\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Notifications</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Instantly get notified about events\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-1.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\n\nexport default function FeatureCard1() {\n   const variant1 = {\n      initial: {\n         scale: 0.87,\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n      whileHover: {\n         scale: 0.8,\n         boxShadow:\n            \"rgba(245,40,145,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: -27,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n      whileHover: {\n         y: -55,\n         scale: 0.87,\n         boxShadow:\n            \"rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         y: -25,\n         opacity: 0,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n      whileHover: {\n         y: -45,\n         opacity: 1,\n         scale: 1,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"easeInOut\",\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 p-10\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"z-[1] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"z-[2] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jane\"\n                           alt=\"jane\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant3}\n                     className=\"absolute bottom-0 z-[3] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jill\"\n                           alt=\"jill\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Notifications</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Instantly get notified about events\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-feature-card-10.json b/apps/web/public/r/styles/miami/animated-feature-card-10.json
index 77575a4b..30259a3d 100644
--- a/apps/web/public/r/styles/miami/animated-feature-card-10.json
+++ b/apps/web/public/r/styles/miami/animated-feature-card-10.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-10",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-10.tsx",
-      "content": "'use client'\n\nimport {\n   AnimatePresence,\n   cubicBezier,\n   motion,\n   useAnimation,\n   useInView,\n} from 'framer-motion'\nimport { useEffect, useRef } from 'react'\n\nconst cardImage = [\n   {\n      id: 1,\n      title: 'Tom',\n      link: '#',\n      image: 'https://avatar.vercel.sh/tom',\n   },\n   {\n      id: 2,\n      title: 'Chris',\n      link: '#',\n      image: 'https://avatar.vercel.sh/chris',\n   },\n   {\n      id: 3,\n      title: 'PJ',\n      link: '#',\n      image: 'https://avatar.vercel.sh/pj',\n   },\n   {\n      id: 4,\n      title: 'Scott',\n      link: '#',\n      image: 'https://avatar.vercel.sh/scott',\n   },\n   {\n      id: 5,\n      title: 'Yehuda',\n      link: '#',\n      image: 'https://avatar.vercel.sh/yehuda',\n   },\n   {\n      id: 6,\n      title: 'Ezra',\n      link: '#',\n      image: 'https://avatar.vercel.sh/ezra',\n   },\n   {\n      id: 7,\n      title: 'Ivey',\n      link: '#',\n      image: 'https://avatar.vercel.sh/ivey',\n   },\n   {\n      id: 8,\n      title: 'Evan',\n      link: '#',\n      image: 'https://avatar.vercel.sh/evan',\n   },\n   {\n      id: 9,\n      title: 'Van',\n      link: '#',\n      image: 'https://avatar.vercel.sh/van',\n   },\n]\n\nexport default function FeatureCard10() {\n   const containerRef = useRef(null)\n   const inView = useInView(containerRef, { amount: 0.25 })\n   const controls = useAnimation()\n\n   useEffect(() => {\n      if (inView)\n         controls.start('visible')\n      else controls.start('hidden')\n   }, [inView, controls])\n\n   return (\n      <div className=\"flex h-full transform-gpu flex-col items-center justify-between gap-5 rounded-lg border border-neutral-200 bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] xl:flex-row dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <div className=\"flex w-full flex-col items-start justify-between gap-y-10 p-10 xl:h-full xl:w-1/2\">\n            <h2 className=\"text-3xl font-semibold\">\n               Nyxb UI let's you build amazing websites with all your friends.\n            </h2>\n            <a\n               href=\"#\"\n               className=\"text-base font-normal text-gray-500 underline-offset-4 transition-all hover:underline\"\n            >\n               Check out our showcase\n            </a>\n         </div>\n         <div className=\"relative w-full overflow-hidden xl:w-1/2\">\n            <div className=\"pointer-events-none absolute inset-x-0 top-0 z-10 h-1/3 bg-gradient-to-b from-white dark:from-black\"></div>\n            <div\n               ref={containerRef}\n               className=\"relative -right-[50px] -top-[100px] grid max-h-[450px] grid-cols-3 gap-5 [transform:rotate(-15deg)translateZ(10px);]\"\n            >\n               <AnimatePresence>\n                  {cardImage.map((card, index) => (\n                     <motion.div\n                        variants={{\n                           hidden: { opacity: 0, scale: 0.96, y: 25 },\n                           visible: { opacity: 1, scale: 1, y: 0 },\n                        }}\n                        initial=\"hidden\"\n                        animate={controls}\n                        exit={{\n                           opacity: 0,\n                           scale: 0,\n                           transition: {\n                              duration: 0.1,\n                              ease: cubicBezier(0.22, 1, 0.36, 1),\n                           },\n                        }}\n                        transition={{\n                           duration: 0.2,\n                           ease: cubicBezier(0.22, 1, 0.36, 1),\n                           delay: index * 0.04,\n                        }}\n                        key={card.id}\n                        className=\"flex flex-col items-center gap-y-2 rounded-md border bg-white/5 p-5\"\n                     >\n                        <img\n                           src={card.image}\n                           alt={card.title}\n                           className=\"size-20 rounded-full object-cover\"\n                        />\n                        <p className=\"text-sm dark:text-neutral-200/50\">{card.title}</p>\n                        <a\n                           href={card.link}\n                           className=\"rounded-md border border-neutral-700/50 bg-neutral-600 p-2 py-0.5 text-white shadow-xl drop-shadow-lg hover:bg-neutral-500 dark:border-neutral-400/20 dark:bg-gray-500\"\n                        >\n                           Website\n                        </a>\n                     </motion.div>\n                  ))}\n               </AnimatePresence>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-10.tsx",
+      "content": "\"use client\"\n\nimport {\n   AnimatePresence,\n   cubicBezier,\n   motion,\n   useAnimation,\n   useInView,\n} from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\n\nconst cardImage = [\n   {\n      id: 1,\n      title: \"Tom\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/tom\",\n   },\n   {\n      id: 2,\n      title: \"Chris\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/chris\",\n   },\n   {\n      id: 3,\n      title: \"PJ\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/pj\",\n   },\n   {\n      id: 4,\n      title: \"Scott\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/scott\",\n   },\n   {\n      id: 5,\n      title: \"Yehuda\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/yehuda\",\n   },\n   {\n      id: 6,\n      title: \"Ezra\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/ezra\",\n   },\n   {\n      id: 7,\n      title: \"Ivey\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/ivey\",\n   },\n   {\n      id: 8,\n      title: \"Evan\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/evan\",\n   },\n   {\n      id: 9,\n      title: \"Van\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/van\",\n   },\n]\n\nexport default function FeatureCard10() {\n   const containerRef = useRef(null)\n   const inView = useInView(containerRef, { amount: 0.25 })\n   const controls = useAnimation()\n\n   useEffect(() => {\n      if (inView) controls.start(\"visible\")\n      else controls.start(\"hidden\")\n   }, [inView, controls])\n\n   return (\n      <div className=\"flex h-full transform-gpu flex-col items-center justify-between gap-5 rounded-lg border border-neutral-200 bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] xl:flex-row dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <div className=\"flex w-full flex-col items-start justify-between gap-y-10 p-10 xl:h-full xl:w-1/2\">\n            <h2 className=\"text-3xl font-semibold\">\n               Nyxb UI let's you build amazing websites with all your friends.\n            </h2>\n            <a\n               href=\"#\"\n               className=\"text-base font-normal text-gray-500 underline-offset-4 transition-all hover:underline\"\n            >\n               Check out our showcase\n            </a>\n         </div>\n         <div className=\"relative w-full overflow-hidden xl:w-1/2\">\n            <div className=\"pointer-events-none absolute inset-x-0 top-0 z-10 h-1/3 bg-gradient-to-b from-white dark:from-black\"></div>\n            <div\n               ref={containerRef}\n               className=\"relative -right-[50px] -top-[100px] grid max-h-[450px] grid-cols-3 gap-5 [transform:rotate(-15deg)translateZ(10px);]\"\n            >\n               <AnimatePresence>\n                  {cardImage.map((card, index) => (\n                     <motion.div\n                        variants={{\n                           hidden: { opacity: 0, scale: 0.96, y: 25 },\n                           visible: { opacity: 1, scale: 1, y: 0 },\n                        }}\n                        initial=\"hidden\"\n                        animate={controls}\n                        exit={{\n                           opacity: 0,\n                           scale: 0,\n                           transition: {\n                              duration: 0.1,\n                              ease: cubicBezier(0.22, 1, 0.36, 1),\n                           },\n                        }}\n                        transition={{\n                           duration: 0.2,\n                           ease: cubicBezier(0.22, 1, 0.36, 1),\n                           delay: index * 0.04,\n                        }}\n                        key={card.id}\n                        className=\"flex flex-col items-center gap-y-2 rounded-md border bg-white/5 p-5\"\n                     >\n                        <img\n                           src={card.image}\n                           alt={card.title}\n                           className=\"size-20 rounded-full object-cover\"\n                        />\n                        <p className=\"text-sm dark:text-neutral-200/50\">\n                           {card.title}\n                        </p>\n                        <a\n                           href={card.link}\n                           className=\"rounded-md border border-neutral-700/50 bg-neutral-600 p-2 py-0.5 text-white shadow-xl drop-shadow-lg hover:bg-neutral-500 dark:border-neutral-400/20 dark:bg-gray-500\"\n                        >\n                           Website\n                        </a>\n                     </motion.div>\n                  ))}\n               </AnimatePresence>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-feature-card-2.json b/apps/web/public/r/styles/miami/animated-feature-card-2.json
index fd1bcdb6..6722c42a 100644
--- a/apps/web/public/r/styles/miami/animated-feature-card-2.json
+++ b/apps/web/public/r/styles/miami/animated-feature-card-2.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-2",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-2.tsx",
-      "content": "'use client'\n\nimport { cubicBezier, motion } from 'framer-motion'\nimport { Clock, Download, MessageCircle, Star } from 'lucide-react'\n\nconst texts = [\n   {\n      id: 1,\n      header: 'New Feature Release.',\n      subheader: 'Experience our app\\'s latest features now.',\n      icon: <Star />,\n   },\n   {\n      id: 2,\n      header: 'App Update Available.',\n      subheader:\n      'A new update is available for download. Get the latest version!',\n      icon: <Download />,\n   },\n   {\n      id: 3,\n      header: 'Scheduled Maintenance.',\n      subheader:\n      'Our app will be temporarily unavailable due to scheduled maintenance.',\n      icon: <Clock />,\n   },\n   {\n      id: 4,\n      header: 'Feedback Appreciated.',\n      subheader:\n      'We\\'d love to hear your thoughts on our app. Share your feedback!',\n      icon: <MessageCircle />,\n   },\n]\n\nexport default function FeatureCard2() {\n   const itemVariants = {\n      initial: (index: number) => ({\n         y: 0,\n         scale: index === 3 ? 0.85 : 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      }),\n      whileHover: (index: number) => ({\n         y: -110,\n         opacity: 1,\n         scale: index === 0 ? 0.85 : index === 3 ? 1 : 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      }),\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl\">\n               <motion.div className=\"flex h-[310px] w-full cursor-pointer flex-col gap-y-5 overflow-hidden rounded-t-md p-5\">\n                  {texts.map((text, index) => (\n                     <motion.div\n                        key={text.id}\n                        className=\"w-full origin-right rounded-md  border border-slate-300/50 p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                        custom={index}\n                        variants={itemVariants}\n                     >\n                        <div className=\"flex flex-row gap-2\">\n                           {text.icon}\n                           <p className=\"text-black dark:text-white\">{text.header}</p>\n                        </div>\n                        <p className=\"text-gray-400 dark:text-gray-400\">\n                           {text.subheader}\n                        </p>\n                     </motion.div>\n                  ))}\n               </motion.div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Notifications</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Instantly get notified about events\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-2.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\nimport { Clock, Download, MessageCircle, Star } from \"lucide-react\"\n\nconst texts = [\n   {\n      id: 1,\n      header: \"New Feature Release.\",\n      subheader: \"Experience our app's latest features now.\",\n      icon: <Star />,\n   },\n   {\n      id: 2,\n      header: \"App Update Available.\",\n      subheader:\n         \"A new update is available for download. Get the latest version!\",\n      icon: <Download />,\n   },\n   {\n      id: 3,\n      header: \"Scheduled Maintenance.\",\n      subheader:\n         \"Our app will be temporarily unavailable due to scheduled maintenance.\",\n      icon: <Clock />,\n   },\n   {\n      id: 4,\n      header: \"Feedback Appreciated.\",\n      subheader:\n         \"We'd love to hear your thoughts on our app. Share your feedback!\",\n      icon: <MessageCircle />,\n   },\n]\n\nexport default function FeatureCard2() {\n   const itemVariants = {\n      initial: (index: number) => ({\n         y: 0,\n         scale: index === 3 ? 0.85 : 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      }),\n      whileHover: (index: number) => ({\n         y: -110,\n         opacity: 1,\n         scale: index === 0 ? 0.85 : index === 3 ? 1 : 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      }),\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl\">\n               <motion.div className=\"flex h-[310px] w-full cursor-pointer flex-col gap-y-5 overflow-hidden rounded-t-md p-5\">\n                  {texts.map((text, index) => (\n                     <motion.div\n                        key={text.id}\n                        className=\"w-full origin-right rounded-md  border border-slate-300/50 p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                        custom={index}\n                        variants={itemVariants}\n                     >\n                        <div className=\"flex flex-row gap-2\">\n                           {text.icon}\n                           <p className=\"text-black dark:text-white\">\n                              {text.header}\n                           </p>\n                        </div>\n                        <p className=\"text-gray-400 dark:text-gray-400\">\n                           {text.subheader}\n                        </p>\n                     </motion.div>\n                  ))}\n               </motion.div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Notifications</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Instantly get notified about events\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-feature-card-3.json b/apps/web/public/r/styles/miami/animated-feature-card-3.json
index 77cdd82e..c148afcf 100644
--- a/apps/web/public/r/styles/miami/animated-feature-card-3.json
+++ b/apps/web/public/r/styles/miami/animated-feature-card-3.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-3",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-3.tsx",
-      "content": "'use client'\n\nimport { cubicBezier, motion } from 'framer-motion'\n\nexport default function FeatureCard3() {\n   const variant1 = {\n      initial: {\n         y: 4,\n         scale: 0.5,\n         opacity: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -2,\n         opacity: 1,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: -2,\n         opacity: 1,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 8,\n         opacity: 1,\n         scale: 1.05,\n         boxShadow:\n        'rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <motion.div className=\"flex size-full cursor-pointer flex-col items-center justify-center gap-y-2 overflow-hidden rounded-t-xl p-8\">\n               <motion.p\n                  variants={variant1}\n                  className=\"w-fit rounded-full border px-2 text-[15px]\"\n               >\n                  Make it Pop ✨\n               </motion.p>\n               <motion.div\n                  variants={variant2}\n                  className=\"flex max-w-[300px] items-start gap-x-2 rounded-lg border border-neutral-300 border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n               >\n                  <div className=\"flex size-6 shrink-0 rounded-full bg-blue-500\">\n                     <img\n                        className=\"size-full rounded-full object-cover\"\n                        src=\"https://avatar.vercel.sh/jane\"\n                        alt=\"jane\"\n                     />\n                  </div>\n                  <div>\n                     <h3 className=\"text-base font-semibold\">Josh</h3>\n                     <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n                     </p>\n                  </div>\n               </motion.div>\n            </motion.div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">AI Co-Pilot</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Use AI to make your writing stand out\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-3.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard3() {\n   const variant1 = {\n      initial: {\n         y: 4,\n         scale: 0.5,\n         opacity: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -2,\n         opacity: 1,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: -2,\n         opacity: 1,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 8,\n         opacity: 1,\n         scale: 1.05,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <motion.div className=\"flex size-full cursor-pointer flex-col items-center justify-center gap-y-2 overflow-hidden rounded-t-xl p-8\">\n               <motion.p\n                  variants={variant1}\n                  className=\"w-fit rounded-full border px-2 text-[15px]\"\n               >\n                  Make it Pop ✨\n               </motion.p>\n               <motion.div\n                  variants={variant2}\n                  className=\"flex max-w-[300px] items-start gap-x-2 rounded-lg border border-neutral-300 border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n               >\n                  <div className=\"flex size-6 shrink-0 rounded-full bg-blue-500\">\n                     <img\n                        className=\"size-full rounded-full object-cover\"\n                        src=\"https://avatar.vercel.sh/jane\"\n                        alt=\"jane\"\n                     />\n                  </div>\n                  <div>\n                     <h3 className=\"text-base font-semibold\">Josh</h3>\n                     <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n                     </p>\n                  </div>\n               </motion.div>\n            </motion.div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">AI Co-Pilot</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Use AI to make your writing stand out\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-feature-card-4.json b/apps/web/public/r/styles/miami/animated-feature-card-4.json
index 3499e8be..3023b88f 100644
--- a/apps/web/public/r/styles/miami/animated-feature-card-4.json
+++ b/apps/web/public/r/styles/miami/animated-feature-card-4.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-4",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-4.tsx",
-      "content": "'use client'\n\nimport { cubicBezier, motion } from 'framer-motion'\n\nexport default function FeatureCard4() {\n   const variant1 = {\n      initial: {\n         x: 35,\n         y: 5,\n         scale: 0.8,\n         rotate: -3,\n         zIndex: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 0,\n         y: 0,\n         scale: 1,\n         rotate: 0,\n         boxShadow:\n        'rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         scale: 1.1,\n         zIndex: 2,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         scale: 1,\n         boxShadow:\n        'rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         x: -35,\n         y: 5,\n         scale: 0.8,\n         rotate: 3,\n         zIndex: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 0,\n         y: 0,\n         scale: 1,\n         rotate: 0,\n         boxShadow:\n        'rgba(245,40,145,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl bg-transparent p-10\">\n               <motion.div className=\"flex h-[230px] w-full items-center justify-between gap-x-4\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"z-[3] flex h-fit w-full  flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/christina\"\n                           alt=\"christina\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant3}\n                     className=\"z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/joshua\"\n                           alt=\"joshua\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n               </motion.div>\n            </div>\n\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Social</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Write once, share with your friends\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-4.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard4() {\n   const variant1 = {\n      initial: {\n         x: 35,\n         y: 5,\n         scale: 0.8,\n         rotate: -3,\n         zIndex: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 0,\n         y: 0,\n         scale: 1,\n         rotate: 0,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         scale: 1.1,\n         zIndex: 2,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         scale: 1,\n         boxShadow:\n            \"rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         x: -35,\n         y: 5,\n         scale: 0.8,\n         rotate: 3,\n         zIndex: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 0,\n         y: 0,\n         scale: 1,\n         rotate: 0,\n         boxShadow:\n            \"rgba(245,40,145,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl bg-transparent p-10\">\n               <motion.div className=\"flex h-[230px] w-full items-center justify-between gap-x-4\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"z-[3] flex h-fit w-full  flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/christina\"\n                           alt=\"christina\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant3}\n                     className=\"z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/joshua\"\n                           alt=\"joshua\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n               </motion.div>\n            </div>\n\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Social</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Write once, share with your friends\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-feature-card-5.json b/apps/web/public/r/styles/miami/animated-feature-card-5.json
index cc50f1ab..aedcd948 100644
--- a/apps/web/public/r/styles/miami/animated-feature-card-5.json
+++ b/apps/web/public/r/styles/miami/animated-feature-card-5.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-5",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-5.tsx",
-      "content": "'use client'\n\nimport { cubicBezier, motion } from 'framer-motion'\n\nexport default function FeatureCard5() {\n   const variant1 = {\n      initial: {\n         viewBox: '0 -950 366 1408',\n         filter: 'saturate(0.3)',\n         opacity: 0.5,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         viewBox: '0 -60 366 310',\n         filter: 'saturate(1)',\n         opacity: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"relative flex size-full cursor-pointer items-center justify-center overflow-hidden rounded-t-xl bg-transparent p-10\">\n               <div className=\"relative h-[150px] w-full cursor-pointer overflow-hidden rounded-xl border border-slate-200/50 bg-white dark:border-neutral-700/50 dark:bg-neutral-900\">\n                  <motion.p\n                     variants={variant2}\n                     className=\"absolute left-5 top-5 w-fit text-[15px]\"\n                  >\n                     +245%\n                  </motion.p>\n                  <motion.svg\n                     variants={variant1}\n                     xmlns=\"http://www.w3.org/2000/svg\"\n                     fill=\"none\"\n                     preserveAspectRatio=\"none\"\n                     className=\"absolute inset-0 size-full\"\n                     viewBox=\"0 -950 366 1408\"\n                  >\n                     <path\n                        fill=\"url(#a)\"\n                        d=\"M0 193c109.5 0 260.5-52.5 366-192.5v907H0V193Z\"\n                     />\n                     <defs>\n                        <linearGradient\n                           id=\"a\"\n                           x1={183}\n                           x2={183}\n                           y1={0.5}\n                           y2={262}\n                           gradientUnits=\"userSpaceOnUse\"\n                        >\n                           <stop stopColor=\"#22c55e\" />\n                           <stop offset={1} stopColor=\"#15803d\" />\n                        </linearGradient>\n                     </defs>\n                  </motion.svg>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Growth</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Invest and watch your money grow\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-5.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard5() {\n   const variant1 = {\n      initial: {\n         viewBox: \"0 -950 366 1408\",\n         filter: \"saturate(0.3)\",\n         opacity: 0.5,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         viewBox: \"0 -60 366 310\",\n         filter: \"saturate(1)\",\n         opacity: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"relative flex size-full cursor-pointer items-center justify-center overflow-hidden rounded-t-xl bg-transparent p-10\">\n               <div className=\"relative h-[150px] w-full cursor-pointer overflow-hidden rounded-xl border border-slate-200/50 bg-white dark:border-neutral-700/50 dark:bg-neutral-900\">\n                  <motion.p\n                     variants={variant2}\n                     className=\"absolute left-5 top-5 w-fit text-[15px]\"\n                  >\n                     +245%\n                  </motion.p>\n                  <motion.svg\n                     variants={variant1}\n                     xmlns=\"http://www.w3.org/2000/svg\"\n                     fill=\"none\"\n                     preserveAspectRatio=\"none\"\n                     className=\"absolute inset-0 size-full\"\n                     viewBox=\"0 -950 366 1408\"\n                  >\n                     <path\n                        fill=\"url(#a)\"\n                        d=\"M0 193c109.5 0 260.5-52.5 366-192.5v907H0V193Z\"\n                     />\n                     <defs>\n                        <linearGradient\n                           id=\"a\"\n                           x1={183}\n                           x2={183}\n                           y1={0.5}\n                           y2={262}\n                           gradientUnits=\"userSpaceOnUse\"\n                        >\n                           <stop stopColor=\"#22c55e\" />\n                           <stop offset={1} stopColor=\"#15803d\" />\n                        </linearGradient>\n                     </defs>\n                  </motion.svg>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Growth</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Invest and watch your money grow\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-feature-card-6.json b/apps/web/public/r/styles/miami/animated-feature-card-6.json
index 0190382b..53f603fd 100644
--- a/apps/web/public/r/styles/miami/animated-feature-card-6.json
+++ b/apps/web/public/r/styles/miami/animated-feature-card-6.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-6",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-6.tsx",
-      "content": "'use client'\n\nimport { cubicBezier, motion } from 'framer-motion'\n\nexport default function FeatureCard6() {\n   const variant1 = {\n      initial: {\n         y: 0,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 25,\n         x: 10,\n         scale: 1,\n         rotate: -2,\n         boxShadow:\n        'rgba(39,127,245,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 0,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -25,\n         x: -10,\n         scale: 1,\n         rotate: 3,\n         boxShadow:\n        'rgba(39,245,76,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex h-[300px] w-full items-center justify-center rounded-t-xl bg-transparent \">\n               <div className=\"relative flex cursor-pointer flex-col items-center justify-center gap-y-2 p-14\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"dark:bg-neutral-980 z-[3] flex size-full items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"absolute bottom-14 z-[2] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Share</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Share results with your friends\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-6.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard6() {\n   const variant1 = {\n      initial: {\n         y: 0,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 25,\n         x: 10,\n         scale: 1,\n         rotate: -2,\n         boxShadow:\n            \"rgba(39,127,245,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 0,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -25,\n         x: -10,\n         scale: 1,\n         rotate: 3,\n         boxShadow:\n            \"rgba(39,245,76,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex h-[300px] w-full items-center justify-center rounded-t-xl bg-transparent \">\n               <div className=\"relative flex cursor-pointer flex-col items-center justify-center gap-y-2 p-14\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"dark:bg-neutral-980 z-[3] flex size-full items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"absolute bottom-14 z-[2] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Share</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Share results with your friends\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-feature-card-7.json b/apps/web/public/r/styles/miami/animated-feature-card-7.json
index 9d3adf24..65e38821 100644
--- a/apps/web/public/r/styles/miami/animated-feature-card-7.json
+++ b/apps/web/public/r/styles/miami/animated-feature-card-7.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-7",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-7.tsx",
-      "content": "'use client'\n\nimport { motion, useAnimation, useInView } from 'framer-motion'\nimport {\n   BarChart,\n   File,\n   Globe,\n   HeartHandshake,\n   Rss,\n   Shield,\n} from 'lucide-react'\nimport { useEffect, useId, useRef, useState } from 'react'\nimport Marquee from '~/registry/miami/ui/marquee'\nimport { ny } from '~/lib/utils'\n\nconst tiles = [\n   {\n      icon: <HeartHandshake className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Globe className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <File className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-green-500 via-teal-500 to-emerald-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Shield className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Rss className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <BarChart className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-gray-600 via-gray-500 to-gray-400 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n]\n\nfunction shuffleArray(array: any[]) {\n   let currentIndex = array.length\n   let randomIndex\n   // While there remain elements to shuffle.\n   while (currentIndex !== 0) {\n      // Pick a remaining element.\n      randomIndex = Math.floor(Math.random() * currentIndex)\n      currentIndex--;\n      // And swap it with the current element.\n      [array[currentIndex], array[randomIndex]] = [\n         array[randomIndex],\n         array[currentIndex],\n      ]\n   }\n   return array\n}\n\nfunction Card(card: { icon: JSX.Element, bg: JSX.Element }) {\n   const id = useId()\n   const controls = useAnimation()\n   const ref = useRef(null)\n   const inView = useInView(ref, { once: true })\n\n   useEffect(() => {\n      if (inView) {\n         controls.start({\n            opacity: 1,\n            transition: { delay: Math.random() * 2, ease: 'easeOut', duration: 1 },\n         })\n      }\n   }, [controls, inView])\n\n   return (\n      <motion.div\n         key={id}\n         ref={ref}\n         initial={{ opacity: 0 }}\n         animate={controls}\n         className={ny(\n            'relative size-20 cursor-pointer overflow-hidden rounded-2xl border p-4',\n            // light styles\n            'bg-white',\n            // dark styles\n            'transform-gpu dark:bg-transparent dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',\n         )}\n      >\n         {card.icon}\n         {card.bg}\n      </motion.div>\n   )\n}\n\nexport default function FeatureCard7() {\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n   const [randomTiles1] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles2] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles3] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles4] = useState(() => shuffleArray([...tiles]))\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"group relative flex h-[300px] w-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl p-4\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 px-10\">\n                  <Marquee\n                     reverse\n                     className=\"-delay-[200ms] [--duration:20s]\"\n                     repeat={4}\n                  >\n                     {randomTiles1.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee reverse className=\"[--duration:30s]\" repeat={4}>\n                     {randomTiles2.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee\n                     reverse\n                     className=\"-delay-[200ms] [--duration:20s]\"\n                     repeat={4}\n                  >\n                     {randomTiles3.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee reverse className=\"[--duration:30s]\" repeat={4}>\n                     {randomTiles4.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n                  <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Integrations</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Integrate with all your favourite apps\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-7.tsx",
+      "content": "\"use client\"\n\nimport { motion, useAnimation, useInView } from \"framer-motion\"\nimport {\n   BarChart,\n   File,\n   Globe,\n   HeartHandshake,\n   Rss,\n   Shield,\n} from \"lucide-react\"\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\nimport Marquee from \"~/registry/miami/ui/marquee\"\n\nconst tiles = [\n   {\n      icon: <HeartHandshake className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Globe className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <File className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-green-500 via-teal-500 to-emerald-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Shield className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Rss className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <BarChart className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-gray-600 via-gray-500 to-gray-400 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n]\n\nfunction shuffleArray(array: any[]) {\n   let currentIndex = array.length\n   let randomIndex\n   // While there remain elements to shuffle.\n   while (currentIndex !== 0) {\n      // Pick a remaining element.\n      randomIndex = Math.floor(Math.random() * currentIndex)\n      currentIndex--\n      // And swap it with the current element.\n      ;[array[currentIndex], array[randomIndex]] = [\n         array[randomIndex],\n         array[currentIndex],\n      ]\n   }\n   return array\n}\n\nfunction Card(card: { icon: JSX.Element; bg: JSX.Element }) {\n   const id = useId()\n   const controls = useAnimation()\n   const ref = useRef(null)\n   const inView = useInView(ref, { once: true })\n\n   useEffect(() => {\n      if (inView) {\n         controls.start({\n            opacity: 1,\n            transition: {\n               delay: Math.random() * 2,\n               ease: \"easeOut\",\n               duration: 1,\n            },\n         })\n      }\n   }, [controls, inView])\n\n   return (\n      <motion.div\n         key={id}\n         ref={ref}\n         initial={{ opacity: 0 }}\n         animate={controls}\n         className={ny(\n            \"relative size-20 cursor-pointer overflow-hidden rounded-2xl border p-4\",\n            // light styles\n            \"bg-white\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         {card.icon}\n         {card.bg}\n      </motion.div>\n   )\n}\n\nexport default function FeatureCard7() {\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n   const [randomTiles1] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles2] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles3] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles4] = useState(() => shuffleArray([...tiles]))\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"group relative flex h-[300px] w-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl p-4\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 px-10\">\n                  <Marquee\n                     reverse\n                     className=\"-delay-[200ms] [--duration:20s]\"\n                     repeat={4}\n                  >\n                     {randomTiles1.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee reverse className=\"[--duration:30s]\" repeat={4}>\n                     {randomTiles2.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee\n                     reverse\n                     className=\"-delay-[200ms] [--duration:20s]\"\n                     repeat={4}\n                  >\n                     {randomTiles3.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee reverse className=\"[--duration:30s]\" repeat={4}>\n                     {randomTiles4.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n                  <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Integrations</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Integrate with all your favourite apps\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-feature-card-8.json b/apps/web/public/r/styles/miami/animated-feature-card-8.json
index 05603aa1..75106a6f 100644
--- a/apps/web/public/r/styles/miami/animated-feature-card-8.json
+++ b/apps/web/public/r/styles/miami/animated-feature-card-8.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-8",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-8.tsx",
-      "content": "'use client'\n\nimport { cubicBezier, motion } from 'framer-motion'\n\nexport default function FeatureCard8() {\n   const variant1 = {\n      initial: {\n         y: 0,\n         scale: 0.97,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -45,\n         scale: 1,\n         boxShadow:\n        'rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 30,\n         opacity: 0,\n         scale: 0.97,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 10,\n         opacity: 1,\n         scale: 1,\n         boxShadow:\n        'rgba(245,40,145,0.05) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         x: 30,\n         y: 20,\n         opacity: 0,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 5,\n         y: 5,\n         opacity: 1,\n         boxShadow:\n        'rgba(39,245,76,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex size-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl bg-transparent\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 px-10 py-20\">\n                  <motion.div\n                     variants={variant1}\n                     className=\" relative flex items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-6 rounded-full bg-blue-500\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/joshua\"\n                           alt=\"joshua\"\n                        />\n                     </div>\n                     <div className=\"w-[calc(100%-3rem)]\">\n                        <h3 className=\"text-base font-semibold\">Mary</h3>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                           I think the design can be improved\n                        </p>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\" absolute inset-10 -bottom-14 z-[3] m-auto flex h-fit items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"w-8 \">\n                        <div className=\"size-6 rounded-full bg-blue-500\">\n                           <img\n                              className=\"size-full rounded-full object-cover\"\n                              src=\"https://avatar.vercel.sh/christina\"\n                              alt=\"christina\"\n                           />\n                        </div>\n                     </div>\n                     <div className=\"w-[calc(100%-3rem)]\">\n                        <h3 className=\"text-base font-semibold\">Joshua</h3>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                           On it ✅\n                        </p>\n                     </div>\n                     <motion.p\n                        variants={variant3}\n                        className=\"highlighted absolute -bottom-2 right-2 w-fit rounded-full border bg-cyan-500 px-2 py-0.5 text-xs text-white\"\n                     >\n                        sent\n                     </motion.p>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Reply</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Reply to other creators in app\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-8.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard8() {\n   const variant1 = {\n      initial: {\n         y: 0,\n         scale: 0.97,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -45,\n         scale: 1,\n         boxShadow:\n            \"rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 30,\n         opacity: 0,\n         scale: 0.97,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 10,\n         opacity: 1,\n         scale: 1,\n         boxShadow:\n            \"rgba(245,40,145,0.05) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         x: 30,\n         y: 20,\n         opacity: 0,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 5,\n         y: 5,\n         opacity: 1,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex size-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl bg-transparent\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 px-10 py-20\">\n                  <motion.div\n                     variants={variant1}\n                     className=\" relative flex items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-6 rounded-full bg-blue-500\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/joshua\"\n                           alt=\"joshua\"\n                        />\n                     </div>\n                     <div className=\"w-[calc(100%-3rem)]\">\n                        <h3 className=\"text-base font-semibold\">Mary</h3>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                           I think the design can be improved\n                        </p>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\" absolute inset-10 -bottom-14 z-[3] m-auto flex h-fit items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"w-8 \">\n                        <div className=\"size-6 rounded-full bg-blue-500\">\n                           <img\n                              className=\"size-full rounded-full object-cover\"\n                              src=\"https://avatar.vercel.sh/christina\"\n                              alt=\"christina\"\n                           />\n                        </div>\n                     </div>\n                     <div className=\"w-[calc(100%-3rem)]\">\n                        <h3 className=\"text-base font-semibold\">Joshua</h3>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                           On it ✅\n                        </p>\n                     </div>\n                     <motion.p\n                        variants={variant3}\n                        className=\"highlighted absolute -bottom-2 right-2 w-fit rounded-full border bg-cyan-500 px-2 py-0.5 text-xs text-white\"\n                     >\n                        sent\n                     </motion.p>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Reply</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Reply to other creators in app\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-feature-card-9.json b/apps/web/public/r/styles/miami/animated-feature-card-9.json
index 927470ac..db480908 100644
--- a/apps/web/public/r/styles/miami/animated-feature-card-9.json
+++ b/apps/web/public/r/styles/miami/animated-feature-card-9.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-feature-card-9",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-feature-card-9.tsx",
-      "content": "'use client'\n\nimport { AnimatePresence, motion } from 'framer-motion'\nimport type { ReactElement } from 'react'\nimport React, { useEffect, useMemo, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\nexport const AnimatedList = React.memo(\n   ({\n      className,\n      children,\n      delay = 1000,\n   }: {\n      className?: string\n      children: React.ReactNode\n      delay?: number\n   }) => {\n      const [index, setIndex] = useState(0)\n      const childrenArray = React.Children.toArray(children)\n\n      useEffect(() => {\n         const interval = setInterval(() => {\n            setIndex(prevIndex => (prevIndex + 1) % childrenArray.length)\n         }, delay)\n\n         return () => clearInterval(interval)\n      }, [childrenArray.length, delay])\n\n      const itemsToShow = useMemo(\n         () => childrenArray.slice(0, index + 1).reverse(),\n         [index, childrenArray],\n      )\n\n      return (\n         <div className={`flex flex-col items-center gap-4 ${className}`}>\n            <AnimatePresence>\n               {itemsToShow.map(item => (\n                  <AnimatedListItem key={(item as ReactElement).key}>\n                     {item}\n                  </AnimatedListItem>\n               ))}\n            </AnimatePresence>\n         </div>\n      )\n   },\n)\n\nAnimatedList.displayName = 'AnimatedList'\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n   const animations = {\n      initial: { scale: 0, opacity: 0 },\n      animate: { scale: 1, opacity: 1, originY: 0 },\n      exit: { scale: 0, opacity: 0 },\n      transition: { type: 'spring', stiffness: 350, damping: 40 },\n   }\n\n   return (\n      <motion.div {...animations} layout className=\"mx-auto w-full\">\n         {children}\n      </motion.div>\n   )\n}\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: 'Payment received',\n      description: 'Nyxb UI',\n      time: '15m ago',\n\n      icon: '💸',\n      color: '#00C9A7',\n   },\n   {\n      name: 'User signed up',\n      description: 'Nyxb UI',\n      time: '10m ago',\n      icon: '👤',\n      color: '#FFB800',\n   },\n   {\n      name: 'New message',\n      description: 'Nyxb UI',\n      time: '5m ago',\n      icon: '💬',\n      color: '#FF3D71',\n   },\n   {\n      name: 'New event',\n      description: 'Nyxb UI',\n      time: '2m ago',\n      icon: '🗞️',\n      color: '#1E86FF',\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={ny(\n            'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-lg p-4',\n            // animation styles\n            'transition-all duration-200 ease-in-out hover:scale-[103%]',\n            // light styles\n            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',\n            // dark styles\n            'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nexport default function FeatureCard9() {\n   return (\n      <div className=\"relative flex size-full max-h-[500px] min-h-[500px] max-w-lg transform-gpu flex-col justify-between overflow-hidden rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <div className=\"flex items-center justify-center overflow-hidden\">\n            <AnimatedList>\n               {notifications.map((item, idx) => (\n                  <Notification {...item} key={idx} />\n               ))}\n            </AnimatedList>\n         </div>\n         <div className=\"flex flex-col items-start gap-y-1 border-t p-4 dark:border-neutral-800\">\n            <h2 className=\"text-xl font-semibold\">Notifications</h2>\n            <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n               Get realtime notifications for events you subscribe too\n            </p>\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-feature-card-9.tsx",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport type { ReactElement } from \"react\"\nimport React, { useEffect, useMemo, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\nexport const AnimatedList = React.memo(\n   ({\n      className,\n      children,\n      delay = 1000,\n   }: {\n      className?: string\n      children: React.ReactNode\n      delay?: number\n   }) => {\n      const [index, setIndex] = useState(0)\n      const childrenArray = React.Children.toArray(children)\n\n      useEffect(() => {\n         const interval = setInterval(() => {\n            setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n         }, delay)\n\n         return () => clearInterval(interval)\n      }, [childrenArray.length, delay])\n\n      const itemsToShow = useMemo(\n         () => childrenArray.slice(0, index + 1).reverse(),\n         [index, childrenArray],\n      )\n\n      return (\n         <div className={`flex flex-col items-center gap-4 ${className}`}>\n            <AnimatePresence>\n               {itemsToShow.map((item) => (\n                  <AnimatedListItem key={(item as ReactElement).key}>\n                     {item}\n                  </AnimatedListItem>\n               ))}\n            </AnimatePresence>\n         </div>\n      )\n   },\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n   const animations = {\n      initial: { scale: 0, opacity: 0 },\n      animate: { scale: 1, opacity: 1, originY: 0 },\n      exit: { scale: 0, opacity: 0 },\n      transition: { type: \"spring\", stiffness: 350, damping: 40 },\n   }\n\n   return (\n      <motion.div {...animations} layout className=\"mx-auto w-full\">\n         {children}\n      </motion.div>\n   )\n}\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: \"Payment received\",\n      description: \"Nyxb UI\",\n      time: \"15m ago\",\n\n      icon: \"💸\",\n      color: \"#00C9A7\",\n   },\n   {\n      name: \"User signed up\",\n      description: \"Nyxb UI\",\n      time: \"10m ago\",\n      icon: \"👤\",\n      color: \"#FFB800\",\n   },\n   {\n      name: \"New message\",\n      description: \"Nyxb UI\",\n      time: \"5m ago\",\n      icon: \"💬\",\n      color: \"#FF3D71\",\n   },\n   {\n      name: \"New event\",\n      description: \"Nyxb UI\",\n      time: \"2m ago\",\n      icon: \"🗞️\",\n      color: \"#1E86FF\",\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={ny(\n            \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-lg p-4\",\n            // animation styles\n            \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nexport default function FeatureCard9() {\n   return (\n      <div className=\"relative flex size-full max-h-[500px] min-h-[500px] max-w-lg transform-gpu flex-col justify-between overflow-hidden rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <div className=\"flex items-center justify-center overflow-hidden\">\n            <AnimatedList>\n               {notifications.map((item, idx) => (\n                  <Notification {...item} key={idx} />\n               ))}\n            </AnimatedList>\n         </div>\n         <div className=\"flex flex-col items-start gap-y-1 border-t p-4 dark:border-neutral-800\">\n            <h2 className=\"text-xl font-semibold\">Notifications</h2>\n            <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n               Get realtime notifications for events you subscribe too\n            </p>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-gradient-text-demo.json b/apps/web/public/r/styles/miami/animated-gradient-text-demo.json
index fa0012a3..5ca0fc0f 100644
--- a/apps/web/public/r/styles/miami/animated-gradient-text-demo.json
+++ b/apps/web/public/r/styles/miami/animated-gradient-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-gradient-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-gradient-text-demo.tsx",
-      "content": "import { ChevronRight } from 'lucide-react'\nimport { ny } from '~/lib/utils'\nimport AnimatedGradientText from '~/registry/miami/ui/animated-gradient-text'\n\nexport default async function AnimatedGradientTextDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <AnimatedGradientText>\n            🎉\n            {' '}\n            <hr className=\"mx-2 h-4 w-px shrink-0 bg-gray-300\" />\n            {' '}\n            <span\n               className={ny(\n            `animate-gradient inline bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,\n               )}\n            >\n               Introducing Nyxb UI\n            </span>\n            <ChevronRight className=\"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n         </AnimatedGradientText>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-gradient-text-demo.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\nimport { ny } from \"~/lib/utils\"\nimport AnimatedGradientText from \"~/registry/miami/ui/animated-gradient-text\"\n\nexport default async function AnimatedGradientTextDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <AnimatedGradientText>\n            🎉 <hr className=\"mx-2 h-4 w-px shrink-0 bg-gray-300\" />{\" \"}\n            <span\n               className={ny(\n                  `animate-gradient inline bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,\n               )}\n            >\n               Introducing Nyxb UI\n            </span>\n            <ChevronRight className=\"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n         </AnimatedGradientText>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-gradient-text.json b/apps/web/public/r/styles/miami/animated-gradient-text.json
index 7dc29f24..ca099200 100644
--- a/apps/web/public/r/styles/miami/animated-gradient-text.json
+++ b/apps/web/public/r/styles/miami/animated-gradient-text.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-gradient-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/animated-gradient-text.tsx",
-      "content": "import type { ReactNode } from 'react'\nimport { ny } from '~/lib/utils'\n\nexport default function AnimatedGradientText({\n   children,\n   className,\n}: {\n   children: ReactNode\n   className?: string\n}) {\n   return (\n      <div\n         className={ny(\n            'group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40',\n            className,\n         )}\n      >\n         <div className=\"animate-gradient absolute inset-0 block size-full bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-px ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]\" />\n\n         {children}\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import type { ReactNode } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\nexport default function AnimatedGradientText({\n   children,\n   className,\n}: {\n   children: ReactNode\n   className?: string\n}) {\n   return (\n      <div\n         className={ny(\n            \"group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40\",\n            className,\n         )}\n      >\n         <div className=\"animate-gradient absolute inset-0 block size-full bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-px ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]\" />\n\n         {children}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/animated-grid-pattern-demo.json b/apps/web/public/r/styles/miami/animated-grid-pattern-demo.json
index c1cc56c7..52cd605c 100644
--- a/apps/web/public/r/styles/miami/animated-grid-pattern-demo.json
+++ b/apps/web/public/r/styles/miami/animated-grid-pattern-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-grid-pattern-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-grid-pattern-demo.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\nimport AnimatedGridPattern from '~/registry/miami/ui/animated-grid-pattern'\n\nfunction AnimatedGridPatternDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Animated Grid Pattern\n         </p>\n         <AnimatedGridPattern\n            numSquares={30}\n            maxOpacity={0.5}\n            duration={3}\n            repeatDelay={1}\n            className={ny(\n               '[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]',\n               'inset-x-0 inset-y-[-30%] h-[200%] skew-y-12',\n            )}\n         />\n      </div>\n   )\n}\n\nexport default AnimatedGridPatternDemo\n",
-      "type": "registry:component",
+      "path": "examples/animated-grid-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\nimport { GridPattern } from \"~/registry/miami/ui/grid-pattern\"\n\nexport default function GridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            squares={[\n               [4, 4],\n               [5, 1],\n               [8, 2],\n               [5, 3],\n               [5, 5],\n               [10, 10],\n               [12, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n            ]}\n            className={ny(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n               \"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-grid-pattern.json b/apps/web/public/r/styles/miami/animated-grid-pattern.json
index 1f256749..07951a8d 100644
--- a/apps/web/public/r/styles/miami/animated-grid-pattern.json
+++ b/apps/web/public/r/styles/miami/animated-grid-pattern.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-grid-pattern",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/animated-grid-pattern.tsx",
-      "content": "'use client'\n\nimport { motion } from 'framer-motion'\nimport { useEffect, useId, useRef, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface GridPatternProps {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   strokeDasharray?: any\n   numSquares?: number\n   className?: string\n   maxOpacity?: number\n   duration?: number\n   repeatDelay?: number\n}\n\nexport function GridPattern({\n   width = 40,\n   height = 40,\n   x = -1,\n   y = -1,\n   strokeDasharray = 0,\n   numSquares = 50,\n   className,\n   maxOpacity = 0.5,\n   duration = 4,\n   repeatDelay = 0.5,\n   ...props\n}: GridPatternProps) {\n   const id = useId()\n   const containerRef = useRef(null)\n   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n   const [squares, setSquares] = useState(() => generateSquares(numSquares))\n\n   function getPos() {\n      return [\n         Math.floor((Math.random() * dimensions.width) / width),\n         Math.floor((Math.random() * dimensions.height) / height),\n      ]\n   }\n\n   // Adjust the generateSquares function to return objects with an id, x, and y\n   function generateSquares(count: number) {\n      return Array.from({ length: count }, (_, i) => ({\n         id: i,\n         pos: getPos(),\n      }))\n   }\n\n   // Function to update a single square's position\n   const updateSquarePosition = (id: number) => {\n      setSquares(currentSquares =>\n         currentSquares.map(sq =>\n            sq.id === id\n               ? {\n                     ...sq,\n                     pos: getPos(),\n                  }\n               : sq,\n         ),\n      )\n   }\n\n   // Update squares to animate in\n   useEffect(() => {\n      if (dimensions.width && dimensions.height)\n         setSquares(generateSquares(numSquares))\n   }, [dimensions, numSquares])\n\n   // Resize observer to update container dimensions\n   useEffect(() => {\n      const resizeObserver = new ResizeObserver((entries) => {\n         for (const entry of entries) {\n            setDimensions({\n               width: entry.contentRect.width,\n               height: entry.contentRect.height,\n            })\n         }\n      })\n\n      if (containerRef.current)\n         resizeObserver.observe(containerRef.current)\n\n      return () => {\n         if (containerRef.current)\n            resizeObserver.unobserve(containerRef.current)\n      }\n   }, [containerRef])\n\n   return (\n      <svg\n         ref={containerRef}\n         aria-hidden=\"true\"\n         className={ny(\n            'pointer-events-none absolute inset-0 size-full fill-gray-400/30 stroke-gray-400/30',\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <path\n                  d={`M.5 ${height}V.5H${width}`}\n                  fill=\"none\"\n                  strokeDasharray={strokeDasharray}\n               />\n            </pattern>\n         </defs>\n         <rect width=\"100%\" height=\"100%\" fill={`url(#${id})`} />\n         <svg x={x} y={y} className=\"overflow-visible\">\n            {squares.map(({ pos: [x, y], id }, index) => (\n               <motion.rect\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: maxOpacity }}\n                  transition={{\n                     duration,\n                     repeat: 1,\n                     delay: index * 0.1,\n                     repeatType: 'reverse',\n                  }}\n                  onAnimationComplete={() => updateSquarePosition(id)}\n                  key={`${x}-${y}-${index}`}\n                  width={width - 1}\n                  height={height - 1}\n                  x={x * width + 1}\n                  y={y * height + 1}\n                  fill=\"currentColor\"\n                  strokeWidth=\"0\"\n               />\n            ))}\n         </svg>\n      </svg>\n   )\n}\n\nexport default GridPattern\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion } from \"motion/react\"\nimport {\n   type ComponentPropsWithoutRef,\n   useEffect,\n   useId,\n   useRef,\n   useState,\n} from \"react\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\n\nexport interface AnimatedGridPatternProps\n   extends ComponentPropsWithoutRef<\"svg\"> {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   strokeDasharray?: any\n   numSquares?: number\n   maxOpacity?: number\n   duration?: number\n   repeatDelay?: number\n}\n\nexport function AnimatedGridPattern({\n   width = 40,\n   height = 40,\n   x = -1,\n   y = -1,\n   strokeDasharray = 0,\n   numSquares = 50,\n   className,\n   maxOpacity = 0.5,\n   duration = 4,\n   repeatDelay = 0.5,\n   ...props\n}: AnimatedGridPatternProps) {\n   const id = useId()\n   const containerRef = useRef(null)\n   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n   const [squares, setSquares] = useState(() => generateSquares(numSquares))\n\n   function getPos() {\n      return [\n         Math.floor((Math.random() * dimensions.width) / width),\n         Math.floor((Math.random() * dimensions.height) / height),\n      ]\n   }\n\n   // Adjust the generateSquares function to return objects with an id, x, and y\n   function generateSquares(count: number) {\n      return Array.from({ length: count }, (_, i) => ({\n         id: i,\n         pos: getPos(),\n      }))\n   }\n\n   // Function to update a single square's position\n   const updateSquarePosition = (id: number) => {\n      setSquares((currentSquares) =>\n         currentSquares.map((sq) =>\n            sq.id === id\n               ? {\n                    ...sq,\n                    pos: getPos(),\n                 }\n               : sq,\n         ),\n      )\n   }\n\n   // Update squares to animate in\n   useEffect(() => {\n      if (dimensions.width && dimensions.height) {\n         setSquares(generateSquares(numSquares))\n      }\n   }, [dimensions, numSquares])\n\n   // Resize observer to update container dimensions\n   useEffect(() => {\n      const resizeObserver = new ResizeObserver((entries) => {\n         for (const entry of entries) {\n            setDimensions({\n               width: entry.contentRect.width,\n               height: entry.contentRect.height,\n            })\n         }\n      })\n\n      if (containerRef.current) {\n         resizeObserver.observe(containerRef.current)\n      }\n\n      return () => {\n         if (containerRef.current) {\n            resizeObserver.unobserve(containerRef.current)\n         }\n      }\n   }, [containerRef])\n\n   return (\n      <svg\n         ref={containerRef}\n         aria-hidden=\"true\"\n         className={ny(\n            \"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30\",\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <path\n                  d={`M.5 ${height}V.5H${width}`}\n                  fill=\"none\"\n                  strokeDasharray={strokeDasharray}\n               />\n            </pattern>\n         </defs>\n         <rect width=\"100%\" height=\"100%\" fill={`url(#${id})`} />\n         <svg x={x} y={y} className=\"overflow-visible\">\n            {squares.map(({ pos: [x, y], id }, index) => (\n               <motion.rect\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: maxOpacity }}\n                  transition={{\n                     duration,\n                     repeat: 1,\n                     delay: index * 0.1,\n                     repeatType: \"reverse\",\n                  }}\n                  onAnimationComplete={() => updateSquarePosition(id)}\n                  key={`${x}-${y}-${index}`}\n                  width={width - 1}\n                  height={height - 1}\n                  x={x * width + 1}\n                  y={y * height + 1}\n                  fill=\"currentColor\"\n                  strokeWidth=\"0\"\n               />\n            ))}\n         </svg>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-list-demo.json b/apps/web/public/r/styles/miami/animated-list-demo.json
index 67657b6d..3509e1fc 100644
--- a/apps/web/public/r/styles/miami/animated-list-demo.json
+++ b/apps/web/public/r/styles/miami/animated-list-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-list-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-list-demo.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\nimport { AnimatedList } from '~/registry/miami/ui/animated-list'\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: 'Payment received',\n      description: 'Nyxb UI',\n      time: '15m ago',\n\n      icon: '💸',\n      color: '#00C9A7',\n   },\n   {\n      name: 'User signed up',\n      description: 'Nyxb UI',\n      time: '10m ago',\n      icon: '👤',\n      color: '#FFB800',\n   },\n   {\n      name: 'New message',\n      description: 'Nyxb UI',\n      time: '5m ago',\n      icon: '💬',\n      color: '#FF3D71',\n   },\n   {\n      name: 'New event',\n      description: 'Nyxb UI',\n      time: '2m ago',\n      icon: '🗞️',\n      color: '#1E86FF',\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={ny(\n            'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4',\n            // animation styles\n            'transition-all duration-200 ease-in-out hover:scale-[103%]',\n            // light styles\n            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',\n            // dark styles\n            'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nexport default function AnimatedListDemo() {\n   return (\n      <div className=\"bg-background relative flex max-h-[400px] min-h-[400px] w-full max-w-lg flex-col overflow-hidden rounded-lg border p-6 shadow-lg\">\n         <AnimatedList>\n            {notifications.map((item, idx) => (\n               <Notification {...item} key={idx} />\n            ))}\n         </AnimatedList>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-list-demo.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/lib/utils\"\nimport { AnimatedList } from \"~/registry/miami/ui/animated-list\"\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: \"Payment received\",\n      description: \"Nyxb UI\",\n      time: \"15m ago\",\n\n      icon: \"💸\",\n      color: \"#00C9A7\",\n   },\n   {\n      name: \"User signed up\",\n      description: \"Nyxb UI\",\n      time: \"10m ago\",\n      icon: \"👤\",\n      color: \"#FFB800\",\n   },\n   {\n      name: \"New message\",\n      description: \"Nyxb UI\",\n      time: \"5m ago\",\n      icon: \"💬\",\n      color: \"#FF3D71\",\n   },\n   {\n      name: \"New event\",\n      description: \"Nyxb UI\",\n      time: \"2m ago\",\n      icon: \"🗞️\",\n      color: \"#1E86FF\",\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={ny(\n            \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4\",\n            // animation styles\n            \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nexport default function AnimatedListDemo() {\n   return (\n      <div className=\"bg-background relative flex max-h-[400px] min-h-[400px] w-full max-w-lg flex-col overflow-hidden rounded-lg border p-6 shadow-lg\">\n         <AnimatedList>\n            {notifications.map((item, idx) => (\n               <Notification {...item} key={idx} />\n            ))}\n         </AnimatedList>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-list.json b/apps/web/public/r/styles/miami/animated-list.json
index b6cf1c1f..c4f6347a 100644
--- a/apps/web/public/r/styles/miami/animated-list.json
+++ b/apps/web/public/r/styles/miami/animated-list.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-list",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/animated-list.tsx",
-      "content": "'use client'\n\nimport { AnimatePresence, motion } from 'framer-motion'\nimport type { ReactElement } from 'react'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nexport const AnimatedList = React.memo(\n   ({\n      className,\n      children,\n      delay = 1000,\n   }: {\n      className?: string\n      children: React.ReactNode\n      delay?: number\n   }) => {\n      const [index, setIndex] = useState(0)\n      const childrenArray = React.Children.toArray(children)\n\n      useEffect(() => {\n         const interval = setInterval(() => {\n            setIndex(prevIndex => (prevIndex + 1) % childrenArray.length)\n         }, delay)\n\n         return () => clearInterval(interval)\n      }, [childrenArray.length, delay])\n\n      const itemsToShow = useMemo(\n         () => childrenArray.slice(0, index + 1).reverse(),\n         [index, childrenArray],\n      )\n\n      return (\n         <div className={`flex flex-col items-center gap-4 ${className}`}>\n            <AnimatePresence>\n               {itemsToShow.map(item => (\n                  <AnimatedListItem key={(item as ReactElement).key}>\n                     {item}\n                  </AnimatedListItem>\n               ))}\n            </AnimatePresence>\n         </div>\n      )\n   },\n)\n\nAnimatedList.displayName = 'AnimatedList'\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n   const animations = {\n      initial: { scale: 0, opacity: 0 },\n      animate: { scale: 1, opacity: 1, originY: 0 },\n      exit: { scale: 0, opacity: 0 },\n      transition: { type: 'spring', stiffness: 350, damping: 40 },\n   }\n\n   return (\n      <motion.div {...animations} layout className=\"mx-auto w-full\">\n         {children}\n      </motion.div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport type { ReactElement } from \"react\"\nimport React, { useEffect, useMemo, useState } from \"react\"\n\nexport const AnimatedList = React.memo(\n   ({\n      className,\n      children,\n      delay = 1000,\n   }: {\n      className?: string\n      children: React.ReactNode\n      delay?: number\n   }) => {\n      const [index, setIndex] = useState(0)\n      const childrenArray = React.Children.toArray(children)\n\n      useEffect(() => {\n         const interval = setInterval(() => {\n            setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n         }, delay)\n\n         return () => clearInterval(interval)\n      }, [childrenArray.length, delay])\n\n      const itemsToShow = useMemo(\n         () => childrenArray.slice(0, index + 1).reverse(),\n         [index, childrenArray],\n      )\n\n      return (\n         <div className={`flex flex-col items-center gap-4 ${className}`}>\n            <AnimatePresence>\n               {itemsToShow.map((item) => (\n                  <AnimatedListItem key={(item as ReactElement).key}>\n                     {item}\n                  </AnimatedListItem>\n               ))}\n            </AnimatePresence>\n         </div>\n      )\n   },\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n   const animations = {\n      initial: { scale: 0, opacity: 0 },\n      animate: { scale: 1, opacity: 1, originY: 0 },\n      exit: { scale: 0, opacity: 0 },\n      transition: { type: \"spring\", stiffness: 350, damping: 40 },\n   }\n\n   return (\n      <motion.div {...animations} layout className=\"mx-auto w-full\">\n         {children}\n      </motion.div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-shiny-text-demo.json b/apps/web/public/r/styles/miami/animated-shiny-text-demo.json
index 4d4efffd..32b32e80 100644
--- a/apps/web/public/r/styles/miami/animated-shiny-text-demo.json
+++ b/apps/web/public/r/styles/miami/animated-shiny-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-shiny-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-shiny-text-demo.tsx",
-      "content": "import { ArrowRightIcon } from '@radix-ui/react-icons'\nimport { ny } from '~/lib/utils'\nimport AnimatedShinyText from '~/registry/miami/ui/animated-shiny-text'\n\nexport default async function AnimatedShinyTextDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <div\n            className={ny(\n               'group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800',\n            )}\n         >\n            <AnimatedShinyText className=\"inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400\">\n               <span>✨ Introducing Nyxb UI</span>\n               <ArrowRightIcon className=\"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n            </AnimatedShinyText>\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-shiny-text-demo.tsx",
+      "content": "import { ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport { ny } from \"~/lib/utils\"\nimport AnimatedShinyText from \"~/registry/miami/ui/animated-shiny-text\"\n\nexport default async function AnimatedShinyTextDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <div\n            className={ny(\n               \"group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800\",\n            )}\n         >\n            <AnimatedShinyText className=\"inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400\">\n               <span>✨ Introducing Nyxb UI</span>\n               <ArrowRightIcon className=\"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n            </AnimatedShinyText>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-shiny-text.json b/apps/web/public/r/styles/miami/animated-shiny-text.json
index ef4d03be..730d25d1 100644
--- a/apps/web/public/r/styles/miami/animated-shiny-text.json
+++ b/apps/web/public/r/styles/miami/animated-shiny-text.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-shiny-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/animated-shiny-text.tsx",
-      "content": "import type { CSSProperties, FC, ReactNode } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface AnimatedShinyTextProps {\n   children: ReactNode\n   className?: string\n   shimmerWidth?: number\n}\n\nconst AnimatedShinyText: FC<AnimatedShinyTextProps> = ({\n   children,\n   className,\n   shimmerWidth = 100,\n}) => {\n   return (\n      <p\n         style={\n            {\n               '--shimmer-width': `${shimmerWidth}px`,\n            } as CSSProperties\n         }\n         className={ny(\n            'mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50 ',\n\n            // Shimmer effect\n            'animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]',\n\n            // Shimmer gradient\n            'bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80',\n\n            className,\n         )}\n      >\n         {children}\n      </p>\n   )\n}\n\nexport default AnimatedShinyText\n",
-      "type": "registry:component",
+      "content": "import type { CSSProperties, FC, ReactNode } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface AnimatedShinyTextProps {\n   children: ReactNode\n   className?: string\n   shimmerWidth?: number\n}\n\nconst AnimatedShinyText: FC<AnimatedShinyTextProps> = ({\n   children,\n   className,\n   shimmerWidth = 100,\n}) => {\n   return (\n      <p\n         style={\n            {\n               \"--shimmer-width\": `${shimmerWidth}px`,\n            } as CSSProperties\n         }\n         className={ny(\n            \"mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50 \",\n\n            // Shimmer effect\n            \"animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]\",\n\n            // Shimmer gradient\n            \"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80\",\n\n            className,\n         )}\n      >\n         {children}\n      </p>\n   )\n}\n\nexport default AnimatedShinyText\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/animated-subscribe-button-demo.json b/apps/web/public/r/styles/miami/animated-subscribe-button-demo.json
index c543f4d6..3f882c2d 100644
--- a/apps/web/public/r/styles/miami/animated-subscribe-button-demo.json
+++ b/apps/web/public/r/styles/miami/animated-subscribe-button-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-subscribe-button-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/animated-subscribe-button-demo.tsx",
-      "content": "import { CheckIcon, ChevronRightIcon } from 'lucide-react'\nimport { AnimatedSubscribeButton } from '~/registry/miami/ui/animated-subscribe-button'\n\nexport default function AnimatedSubscribeButtonDemo() {\n   return (\n      <AnimatedSubscribeButton\n         buttonColor=\"#000000\"\n         buttonTextColor=\"#ffffff\"\n         subscribeStatus={false}\n         initialText={(\n            <span className=\"group inline-flex items-center\">\n               Subscribe\n               {' '}\n               <ChevronRightIcon className=\"ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1\" />\n            </span>\n         )}\n         changeText={(\n            <span className=\"group inline-flex items-center\">\n               <CheckIcon className=\"mr-2 size-4\" />\n               Subscribed\n               {' '}\n            </span>\n         )}\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/animated-subscribe-button-demo.tsx",
+      "content": "import { CheckIcon, ChevronRightIcon } from \"lucide-react\"\nimport { AnimatedSubscribeButton } from \"~/registry/miami/ui/animated-subscribe-button\"\n\nexport default function AnimatedSubscribeButtonDemo() {\n   return (\n      <AnimatedSubscribeButton\n         buttonColor=\"#000000\"\n         buttonTextColor=\"#ffffff\"\n         subscribeStatus={false}\n         initialText={\n            <span className=\"group inline-flex items-center\">\n               Subscribe{\" \"}\n               <ChevronRightIcon className=\"ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1\" />\n            </span>\n         }\n         changeText={\n            <span className=\"group inline-flex items-center\">\n               <CheckIcon className=\"mr-2 size-4\" />\n               Subscribed{\" \"}\n            </span>\n         }\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/animated-subscribe-button.json b/apps/web/public/r/styles/miami/animated-subscribe-button.json
index 78fc6308..492ed6f0 100644
--- a/apps/web/public/r/styles/miami/animated-subscribe-button.json
+++ b/apps/web/public/r/styles/miami/animated-subscribe-button.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "animated-subscribe-button",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/animated-subscribe-button.tsx",
-      "content": "'use client'\n\nimport { AnimatePresence, motion } from 'framer-motion'\nimport React, { useState } from 'react'\n\ninterface AnimatedSubscribeButtonProps {\n   buttonColor: string\n   buttonTextColor?: string\n   subscribeStatus: boolean\n   initialText: React.ReactElement | string\n   changeText: React.ReactElement | string\n}\n\nexport const AnimatedSubscribeButton: React.FC<\n   AnimatedSubscribeButtonProps\n> = ({\n   buttonColor,\n   subscribeStatus,\n   buttonTextColor,\n   changeText,\n   initialText,\n}) => {\n   const [isSubscribed, setIsSubscribed] = useState<boolean>(subscribeStatus)\n\n   return (\n      <AnimatePresence mode=\"wait\">\n         {isSubscribed\n            ? (\n                  <motion.button\n                     className=\"relative flex h-[46px] w-[200px] items-center justify-center overflow-hidden rounded-md bg-white p-[10px] outline outline-1 outline-black\"\n                     onClick={() => setIsSubscribed(false)}\n                     initial={{ opacity: 0 }}\n                     animate={{ opacity: 1 }}\n                     exit={{ opacity: 0 }}\n                  >\n                     <motion.span\n                        key=\"action\"\n                        className=\"relative block size-full font-semibold\"\n                        initial={{ y: -50 }}\n                        animate={{ y: 0 }}\n                        style={{ color: buttonColor }}\n                     >\n                        {changeText}\n                     </motion.span>\n                  </motion.button>\n               )\n            : (\n                  <motion.button\n                     className=\"relative flex w-[200px] cursor-pointer items-center justify-center rounded-md border-none p-[10px]\"\n                     style={{ backgroundColor: buttonColor, color: buttonTextColor }}\n                     onClick={() => setIsSubscribed(true)}\n                     initial={{ opacity: 0 }}\n                     animate={{ opacity: 1 }}\n                     exit={{ opacity: 0 }}\n                  >\n                     <motion.span\n                        key=\"reaction\"\n                        className=\"relative block font-semibold\"\n                        initial={{ x: 0 }}\n                        exit={{ x: 50, transition: { duration: 0.1 } }}\n                     >\n                        {initialText}\n                     </motion.span>\n                  </motion.button>\n               )}\n      </AnimatePresence>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport type React from \"react\"\nimport { useState } from \"react\"\n\ninterface AnimatedSubscribeButtonProps {\n   buttonColor: string\n   buttonTextColor?: string\n   subscribeStatus: boolean\n   initialText: React.ReactElement | string\n   changeText: React.ReactElement | string\n}\n\nexport const AnimatedSubscribeButton: React.FC<\n   AnimatedSubscribeButtonProps\n> = ({\n   buttonColor,\n   subscribeStatus,\n   buttonTextColor,\n   changeText,\n   initialText,\n}) => {\n   const [isSubscribed, setIsSubscribed] = useState<boolean>(subscribeStatus)\n\n   return (\n      <AnimatePresence mode=\"wait\">\n         {isSubscribed ? (\n            <motion.button\n               className=\"relative flex h-[46px] w-[200px] items-center justify-center overflow-hidden rounded-md bg-white p-[10px] outline outline-1 outline-black\"\n               onClick={() => setIsSubscribed(false)}\n               initial={{ opacity: 0 }}\n               animate={{ opacity: 1 }}\n               exit={{ opacity: 0 }}\n            >\n               <motion.span\n                  key=\"action\"\n                  className=\"relative block size-full font-semibold\"\n                  initial={{ y: -50 }}\n                  animate={{ y: 0 }}\n                  style={{ color: buttonColor }}\n               >\n                  {changeText}\n               </motion.span>\n            </motion.button>\n         ) : (\n            <motion.button\n               className=\"relative flex w-[200px] cursor-pointer items-center justify-center rounded-md border-none p-[10px]\"\n               style={{ backgroundColor: buttonColor, color: buttonTextColor }}\n               onClick={() => setIsSubscribed(true)}\n               initial={{ opacity: 0 }}\n               animate={{ opacity: 1 }}\n               exit={{ opacity: 0 }}\n            >\n               <motion.span\n                  key=\"reaction\"\n                  className=\"relative block font-semibold\"\n                  initial={{ x: 0 }}\n                  exit={{ x: 50, transition: { duration: 0.1 } }}\n               >\n                  {initialText}\n               </motion.span>\n            </motion.button>\n         )}\n      </AnimatePresence>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/aspect-ratio-demo.json b/apps/web/public/r/styles/miami/aspect-ratio-demo.json
index 3f64b545..d1b03e4d 100644
--- a/apps/web/public/r/styles/miami/aspect-ratio-demo.json
+++ b/apps/web/public/r/styles/miami/aspect-ratio-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "aspect-ratio-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "aspect-ratio"
   ],
   "files": [
     {
-      "path": "example/aspect-ratio-demo.tsx",
-      "content": "import Image from 'next/image'\n\nimport { AspectRatio } from '~/registry/miami/ui/aspect-ratio'\n\nexport default function AspectRatioDemo() {\n   return (\n      <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n         <Image\n            src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n            alt=\"Photo by Drew Beamer\"\n            fill\n            className=\"rounded-md object-cover\"\n         />\n      </AspectRatio>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"~/registry/miami/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n   return (\n      <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n         <Image\n            src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n            alt=\"Photo by Drew Beamer\"\n            fill\n            className=\"rounded-md object-cover\"\n         />\n      </AspectRatio>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/aspect-ratio.json b/apps/web/public/r/styles/miami/aspect-ratio.json
index a49b9235..397a91ed 100644
--- a/apps/web/public/r/styles/miami/aspect-ratio.json
+++ b/apps/web/public/r/styles/miami/aspect-ratio.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "aspect-ratio",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-aspect-ratio"
   ],
   "files": [
     {
       "path": "ui/aspect-ratio.tsx",
-      "content": "'use client'\n\nimport * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/aurora-text-demo.json b/apps/web/public/r/styles/miami/aurora-text-demo.json
new file mode 100644
index 00000000..45b5527f
--- /dev/null
+++ b/apps/web/public/r/styles/miami/aurora-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "aurora-text-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/aurora-text-demo.tsx",
+      "content": "import { AuroraText } from \"~/registry/miami/ui/aurora-text\"\n\nexport default function AuroraTextDemo() {\n   return (\n      <h1 className=\"text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl\">\n         Ship <AuroraText>beautiful</AuroraText>\n      </h1>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/aurora-text.json b/apps/web/public/r/styles/miami/aurora-text.json
new file mode 100644
index 00000000..31840905
--- /dev/null
+++ b/apps/web/public/r/styles/miami/aurora-text.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "aurora-text",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/aurora-text.tsx",
+      "content": "import { type MotionProps, motion } from \"motion/react\"\nimport type React from \"react\"\nimport { ny } from \"~/registry/miami/lib/utils\"\n\ninterface AuroraTextProps\n   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps> {\n   className?: string\n   children: React.ReactNode\n   as?: React.ElementType\n}\n\nexport function AuroraText({\n   className,\n   children,\n   as: Component = \"span\",\n   ...props\n}: AuroraTextProps) {\n   const MotionComponent = motion.create(Component)\n\n   return (\n      <MotionComponent\n         className={ny(\"relative inline-flex overflow-hidden\", className)}\n         {...props}\n      >\n         {children}\n         <span className=\"pointer-events-none absolute inset-0 mix-blend-lighten dark:mix-blend-darken\">\n            <span className=\"pointer-events-none absolute -top-1/2 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-1_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-1))] mix-blend-overlay blur-[1rem]\"></span>\n            <span className=\"pointer-events-none absolute right-0 top-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-2_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-2))] mix-blend-overlay blur-[1rem]\"></span>\n            <span className=\"pointer-events-none absolute bottom-0 left-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-3_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-3))] mix-blend-overlay blur-[1rem]\"></span>\n            <span className=\"pointer-events-none absolute -bottom-1/2 right-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-4_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-4))] mix-blend-overlay blur-[1rem]\"></span>\n         </span>\n      </MotionComponent>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "keyframes": {
+            "aurora-border": {
+              "0%, 100%": {
+                "borderRadius": "37% 29% 27% 27% / 28% 25% 41% 37%"
+              },
+              "25%": {
+                "borderRadius": "47% 29% 39% 49% / 61% 19% 66% 26%"
+              },
+              "50%": {
+                "borderRadius": "57% 23% 47% 72% / 63% 17% 66% 33%"
+              },
+              "75%": {
+                "borderRadius": "28% 49% 29% 100% / 93% 20% 64% 25%"
+              }
+            },
+            "aurora-1": {
+              "0%, 100%": {
+                "top": "0",
+                "right": "0"
+              },
+              "50%": {
+                "top": "50%",
+                "right": "25%"
+              },
+              "75%": {
+                "top": "25%",
+                "right": "50%"
+              }
+            },
+            "aurora-2": {
+              "0%, 100%": {
+                "top": "0",
+                "left": "0"
+              },
+              "60%": {
+                "top": "75%",
+                "left": "25%"
+              },
+              "85%": {
+                "top": "50%",
+                "left": "50%"
+              }
+            },
+            "aurora-3": {
+              "0%, 100%": {
+                "bottom": "0",
+                "left": "0"
+              },
+              "40%": {
+                "bottom": "50%",
+                "left": "25%"
+              },
+              "65%": {
+                "bottom": "25%",
+                "left": "50%"
+              }
+            },
+            "aurora-4": {
+              "0%, 100%": {
+                "bottom": "0",
+                "right": "0"
+              },
+              "50%": {
+                "bottom": "25%",
+                "right": "40%"
+              },
+              "90%": {
+                "bottom": "50%",
+                "right": "25%"
+              }
+            }
+          },
+          "animation": {
+            "aurora-border": "aurora-border 10s ease-in-out infinite",
+            "aurora-1": "aurora-1 15s ease-in-out infinite",
+            "aurora-2": "aurora-2 15s ease-in-out infinite",
+            "aurora-3": "aurora-3 15s ease-in-out infinite",
+            "aurora-4": "aurora-4 15s ease-in-out infinite"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/avatar-circles-demo.json b/apps/web/public/r/styles/miami/avatar-circles-demo.json
index 5b255c93..925c9fd8 100644
--- a/apps/web/public/r/styles/miami/avatar-circles-demo.json
+++ b/apps/web/public/r/styles/miami/avatar-circles-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "avatar-circles-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/avatar-circles-demo.tsx",
-      "content": "import AvatarCircles from '~/registry/miami/ui/avatar-circles'\n\nconst avatarUrls = [\n   'https://avatars.githubusercontent.com/u/98586665',\n   'https://avatars.githubusercontent.com/u/20110627',\n   'https://avatars.githubusercontent.com/u/106103625',\n   'https://avatars.githubusercontent.com/u/59228569',\n]\n\nexport default async function AvatarCirclesDemo() {\n   return <AvatarCircles numPeople={99} avatarUrls={avatarUrls} />\n}\n",
-      "type": "registry:component",
+      "path": "examples/avatar-circles-demo.tsx",
+      "content": "import AvatarCircles from \"~/registry/miami/ui/avatar-circles\"\n\nconst avatarUrls = [\n   \"https://avatars.githubusercontent.com/u/98586665\",\n   \"https://avatars.githubusercontent.com/u/20110627\",\n   \"https://avatars.githubusercontent.com/u/106103625\",\n   \"https://avatars.githubusercontent.com/u/59228569\",\n]\n\nexport default async function AvatarCirclesDemo() {\n   return <AvatarCircles numPeople={99} avatarUrls={avatarUrls} />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/avatar-circles.json b/apps/web/public/r/styles/miami/avatar-circles.json
index 54cbd288..d5334644 100644
--- a/apps/web/public/r/styles/miami/avatar-circles.json
+++ b/apps/web/public/r/styles/miami/avatar-circles.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "avatar-circles",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/avatar-circles.tsx",
-      "content": "'use client'\n\nimport React from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface AvatarCirclesProps {\n   className?: string\n   numPeople?: number\n   avatarUrls: string[]\n}\n\nfunction AvatarCircles({\n   numPeople,\n   className,\n   avatarUrls,\n}: AvatarCirclesProps) {\n   return (\n      <div className={ny('z-10 flex -space-x-4 rtl:space-x-reverse', className)}>\n         {avatarUrls.map((url, index) => (\n            <img\n               key={index}\n               className=\"size-10 rounded-full border-2 border-white dark:border-gray-800\"\n               src={url}\n               width={40}\n               height={40}\n               alt={`Avatar ${index + 1}`}\n            />\n         ))}\n         <a\n            className=\"flex size-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black\"\n            href=\"\"\n         >\n            +\n            {numPeople}\n         </a>\n      </div>\n   )\n}\n\nexport default AvatarCircles\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface AvatarCirclesProps {\n   className?: string\n   numPeople?: number\n   avatarUrls: string[]\n}\n\nfunction AvatarCircles({\n   numPeople,\n   className,\n   avatarUrls,\n}: AvatarCirclesProps) {\n   return (\n      <div\n         className={ny(\"z-10 flex -space-x-4 rtl:space-x-reverse\", className)}\n      >\n         {avatarUrls.map((url, index) => (\n            <img\n               key={index}\n               className=\"size-10 rounded-full border-2 border-white dark:border-gray-800\"\n               src={url}\n               width={40}\n               height={40}\n               alt={`Avatar ${index + 1}`}\n            />\n         ))}\n         <a\n            className=\"flex size-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black\"\n            href=\"\"\n         >\n            +{numPeople}\n         </a>\n      </div>\n   )\n}\n\nexport default AvatarCircles\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/avatar-demo.json b/apps/web/public/r/styles/miami/avatar-demo.json
index 658bf590..2576a590 100644
--- a/apps/web/public/r/styles/miami/avatar-demo.json
+++ b/apps/web/public/r/styles/miami/avatar-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "avatar-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "avatar"
   ],
   "files": [
     {
-      "path": "example/avatar-demo.tsx",
-      "content": "import {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/miami/ui/avatar'\n\nexport default function AvatarDemo() {\n   return (\n      <Avatar>\n         <AvatarImage src=\"https://github.com/nyxb.png\" alt=\"@nyxb\" />\n         <AvatarFallback>NY</AvatarFallback>\n      </Avatar>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/avatar-demo.tsx",
+      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"~/registry/miami/ui/avatar\"\n\nexport default function AvatarDemo() {\n   return (\n      <Avatar>\n         <AvatarImage src=\"https://github.com/nyxb.png\" alt=\"@nyxb\" />\n         <AvatarFallback>NY</AvatarFallback>\n      </Avatar>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/avatar.json b/apps/web/public/r/styles/miami/avatar.json
index f203641f..e4cbcd03 100644
--- a/apps/web/public/r/styles/miami/avatar.json
+++ b/apps/web/public/r/styles/miami/avatar.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "avatar",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-avatar"
   ],
   "files": [
     {
       "path": "ui/avatar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\n\nimport { ny } from '~/lib/utils'\n\nconst Avatar = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Root\n      ref={ref}\n      className={ny(\n         'relative flex size-10 shrink-0 overflow-hidden rounded-full',\n         className,\n      )}\n      {...props}\n   />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Image>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Image\n      ref={ref}\n      className={ny('aspect-square size-full', className)}\n      {...props}\n   />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Fallback>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Fallback\n      ref={ref}\n      className={ny(\n         'bg-muted flex size-full items-center justify-center rounded-full',\n         className,\n      )}\n      {...props}\n   />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Avatar = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Root\n      ref={ref}\n      className={ny(\n         \"relative flex size-10 shrink-0 overflow-hidden rounded-full\",\n         className,\n      )}\n      {...props}\n   />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Image>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Image\n      ref={ref}\n      className={ny(\"aspect-square size-full\", className)}\n      {...props}\n   />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Fallback>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Fallback\n      ref={ref}\n      className={ny(\n         \"bg-muted flex size-full items-center justify-center rounded-full\",\n         className,\n      )}\n      {...props}\n   />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/badge-demo.json b/apps/web/public/r/styles/miami/badge-demo.json
index 56c4535f..cd59175f 100644
--- a/apps/web/public/r/styles/miami/badge-demo.json
+++ b/apps/web/public/r/styles/miami/badge-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "badge-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "badge"
   ],
   "files": [
     {
-      "path": "example/badge-demo.tsx",
-      "content": "import { Badge } from '~/registry/miami/ui/badge'\n\nexport default function BadgeDemo() {\n   return <Badge>Badge</Badge>\n}\n",
-      "type": "registry:component",
+      "path": "examples/badge-demo.tsx",
+      "content": "import { Badge } from \"~/registry/miami/ui/badge\"\n\nexport default function BadgeDemo() {\n   return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/badge-destructive.json b/apps/web/public/r/styles/miami/badge-destructive.json
index 7352b302..da164df9 100644
--- a/apps/web/public/r/styles/miami/badge-destructive.json
+++ b/apps/web/public/r/styles/miami/badge-destructive.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "badge-destructive",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "badge"
   ],
   "files": [
     {
-      "path": "example/badge-destructive.tsx",
-      "content": "import { Badge } from '~/registry/miami/ui/badge'\n\nexport default function BadgeDestructive() {\n   return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
-      "type": "registry:component",
+      "path": "examples/badge-destructive.tsx",
+      "content": "import { Badge } from \"~/registry/miami/ui/badge\"\n\nexport default function BadgeDestructive() {\n   return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/badge-outline.json b/apps/web/public/r/styles/miami/badge-outline.json
index c4a68ba0..ae5ceff0 100644
--- a/apps/web/public/r/styles/miami/badge-outline.json
+++ b/apps/web/public/r/styles/miami/badge-outline.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "badge-outline",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "badge"
   ],
   "files": [
     {
-      "path": "example/badge-outline.tsx",
-      "content": "import { Badge } from '~/registry/miami/ui/badge'\n\nexport default function BadgeOutline() {\n   return <Badge variant=\"outline\">Outline</Badge>\n}\n",
-      "type": "registry:component",
+      "path": "examples/badge-outline.tsx",
+      "content": "import { Badge } from \"~/registry/miami/ui/badge\"\n\nexport default function BadgeOutline() {\n   return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/badge-secondary.json b/apps/web/public/r/styles/miami/badge-secondary.json
index 27402608..fd6ec6ba 100644
--- a/apps/web/public/r/styles/miami/badge-secondary.json
+++ b/apps/web/public/r/styles/miami/badge-secondary.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "badge-secondary",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "badge"
   ],
   "files": [
     {
-      "path": "example/badge-secondary.tsx",
-      "content": "import { Badge } from '~/registry/miami/ui/badge'\n\nexport default function BadgeSecondary() {\n   return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
-      "type": "registry:component",
+      "path": "examples/badge-secondary.tsx",
+      "content": "import { Badge } from \"~/registry/miami/ui/badge\"\n\nexport default function BadgeSecondary() {\n   return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/badge.json b/apps/web/public/r/styles/miami/badge.json
index 2149e442..085cde55 100644
--- a/apps/web/public/r/styles/miami/badge.json
+++ b/apps/web/public/r/styles/miami/badge.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "badge",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/badge.tsx",
-      "content": "import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst badgeVariants = cva(\n   'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n   {\n      variants: {\n         variant: {\n            default:\n          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n            secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n            destructive:\n          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n            outline: 'text-foreground',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n      },\n   },\n)\n\nexport interface BadgeProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n   VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n   return (\n      <div className={ny(badgeVariants({ variant }), className)} {...props} />\n   )\n}\n\nexport { Badge, badgeVariants }\n",
-      "type": "registry:component",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\"\nimport type * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst badgeVariants = cva(\n   \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n   {\n      variants: {\n         variant: {\n            default:\n               \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n            secondary:\n               \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n            destructive:\n               \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n            outline: \"text-foreground\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nexport interface BadgeProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n   return (\n      <div className={ny(badgeVariants({ variant }), className)} {...props} />\n   )\n}\n\nexport { Badge, badgeVariants }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/bento-demo-vertical.json b/apps/web/public/r/styles/miami/bento-demo-vertical.json
index 01772afa..e3f6d4e4 100644
--- a/apps/web/public/r/styles/miami/bento-demo-vertical.json
+++ b/apps/web/public/r/styles/miami/bento-demo-vertical.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "bento-demo-vertical",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/bento-demo-vertical.tsx",
-      "content": "import {\n   BellIcon,\n   CalendarIcon,\n   FileTextIcon,\n   GlobeIcon,\n   InputIcon,\n} from '@radix-ui/react-icons'\nimport { BentoCard, BentoGrid } from '~/registry/miami/ui/bento-grid'\n\nconst features = [\n   {\n      Icon: FileTextIcon,\n      name: 'Save your files',\n      description: 'We automatically save your files as you type.',\n      href: '/docs',\n      cta: 'Learn more',\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: 'lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3',\n   },\n   {\n      Icon: InputIcon,\n      name: 'Full text search',\n      description: 'Search through all your files in one place.',\n      href: '/docs',\n      cta: 'Learn more',\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: 'lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3',\n   },\n   {\n      Icon: GlobeIcon,\n      name: 'Multilingual',\n      description: 'Supports 100+ languages and counting.',\n      href: '/docs',\n      cta: 'Learn more',\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: 'lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4',\n   },\n   {\n      Icon: CalendarIcon,\n      name: 'Calendar',\n      description: 'Use the calendar to filter your files by date.',\n      href: '/docs',\n      cta: 'Learn more',\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: 'lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2',\n   },\n   {\n      Icon: BellIcon,\n      name: 'Notifications',\n      description:\n      'Get notified when someone shares a file or mentions you in a comment.',\n      href: '/docs',\n      cta: 'Learn more',\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: 'lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4',\n   },\n]\n\nexport default async function BentoDemo() {\n   return (\n      <BentoGrid className=\"lg:grid-rows-3\">\n         {features.map(feature => (\n            <BentoCard key={feature.name} {...feature} />\n         ))}\n      </BentoGrid>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/bento-demo-vertical.tsx",
+      "content": "import {\n   BellIcon,\n   CalendarIcon,\n   FileTextIcon,\n   GlobeIcon,\n   InputIcon,\n} from \"@radix-ui/react-icons\"\nimport { BentoCard, BentoGrid } from \"~/registry/miami/ui/bento-grid\"\n\nconst features = [\n   {\n      Icon: FileTextIcon,\n      name: \"Save your files\",\n      description: \"We automatically save your files as you type.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3\",\n   },\n   {\n      Icon: InputIcon,\n      name: \"Full text search\",\n      description: \"Search through all your files in one place.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3\",\n   },\n   {\n      Icon: GlobeIcon,\n      name: \"Multilingual\",\n      description: \"Supports 100+ languages and counting.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4\",\n   },\n   {\n      Icon: CalendarIcon,\n      name: \"Calendar\",\n      description: \"Use the calendar to filter your files by date.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2\",\n   },\n   {\n      Icon: BellIcon,\n      name: \"Notifications\",\n      description:\n         \"Get notified when someone shares a file or mentions you in a comment.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4\",\n   },\n]\n\nexport default async function BentoDemo() {\n   return (\n      <BentoGrid className=\"lg:grid-rows-3\">\n         {features.map((feature) => (\n            <BentoCard key={feature.name} {...feature} />\n         ))}\n      </BentoGrid>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/bento-demo.json b/apps/web/public/r/styles/miami/bento-demo.json
index 0e860b16..5a8bbd5d 100644
--- a/apps/web/public/r/styles/miami/bento-demo.json
+++ b/apps/web/public/r/styles/miami/bento-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "bento-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/bento-demo.tsx",
-      "content": "import { CalendarIcon, FileTextIcon, InputIcon } from '@radix-ui/react-icons'\nimport { Share2Icon } from 'lucide-react'\nimport { Calendar } from '~/components/ui/calendar'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/components/ui/command'\nimport { ny } from '~/lib/utils'\nimport AnimatedBeamMultipleOutputDemo from '~/registry/miami/example/animated-beam-multiple-outputs'\nimport { BentoCard, BentoGrid } from '~/registry/miami/ui/bento-grid'\nimport Marquee from '~/registry/miami/ui/marquee'\n\nconst files = [\n   {\n      name: 'bitcoin.pdf',\n      body: 'Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.',\n   },\n   {\n      name: 'finances.xlsx',\n      body: 'A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.',\n   },\n   {\n      name: 'logo.svg',\n      body: 'Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.',\n   },\n   {\n      name: 'keys.gpg',\n      body: 'GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.',\n   },\n   {\n      name: 'seed.txt',\n      body: 'A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.',\n   },\n]\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: 'Payment received',\n      description: 'Nyxb UI',\n      time: '15m ago',\n\n      icon: '💸',\n      color: '#00C9A7',\n   },\n   {\n      name: 'User signed up',\n      description: 'Nyxb UI',\n      time: '10m ago',\n      icon: '👤',\n      color: '#FFB800',\n   },\n   {\n      name: 'New message',\n      description: 'Nyxb UI',\n      time: '5m ago',\n      icon: '💬',\n      color: '#FF3D71',\n   },\n   {\n      name: 'New event',\n      description: 'Nyxb UI',\n      time: '2m ago',\n      icon: '🗞️',\n      color: '#1E86FF',\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={ny(\n            'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4',\n            // animation styles\n            'transition-all duration-200 ease-in-out hover:scale-[103%]',\n            // light styles\n            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',\n            // dark styles\n            'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nconst features = [\n   {\n      Icon: FileTextIcon,\n      name: 'Save your files',\n      description: 'We automatically save your files as you type.',\n      href: '/docs',\n      cta: 'Learn more',\n      className: 'col-span-3 lg:col-span-1',\n      background: (\n         <Marquee\n            pauseOnHover\n            className=\"absolute top-10 [--duration:20s] [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] \"\n         >\n            {files.map((f, idx) => (\n               <figure\n                  key={idx}\n                  className={ny(\n                     'relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4',\n                     'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',\n                     'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',\n                     'transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none',\n                  )}\n               >\n                  <div className=\"flex flex-row items-center gap-2\">\n                     <div className=\"flex flex-col\">\n                        <figcaption className=\"text-sm font-medium dark:text-white \">\n                           {f.name}\n                        </figcaption>\n                     </div>\n                  </div>\n                  <blockquote className=\"mt-2 text-xs\">{f.body}</blockquote>\n               </figure>\n            ))}\n         </Marquee>\n      ),\n   },\n   {\n      Icon: InputIcon,\n      name: 'Full text search',\n      description: 'Search through all your files in one place.',\n      href: '/docs',\n      cta: 'Learn more',\n      className: 'col-span-3 lg:col-span-2',\n      background: (\n         <Command className=\"absolute right-10 top-10 w-[70%] origin-top translate-x-0 border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:-translate-x-10\">\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n               <CommandEmpty>No results found.</CommandEmpty>\n               <CommandGroup heading=\"Suggestions\">\n                  <CommandItem>screenshot.png</CommandItem>\n                  <CommandItem>bitcoin.pdf</CommandItem>\n                  <CommandItem>finances.xlsx</CommandItem>\n                  <CommandItem>logo.svg</CommandItem>\n                  <CommandItem>keys.gpg</CommandItem>\n                  <CommandItem>seed.txt</CommandItem>\n               </CommandGroup>\n            </CommandList>\n         </Command>\n      ),\n   },\n   {\n      Icon: Share2Icon,\n      name: 'Integrations',\n      description: 'Supports 100+ integrations and counting.',\n      href: '/docs',\n      cta: 'Learn more',\n      className: 'col-span-3 lg:col-span-2',\n      background: (\n         <AnimatedBeamMultipleOutputDemo className=\"absolute right-2 top-4 h-[300px] w-[600px] border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105\" />\n      ),\n   },\n   {\n      Icon: CalendarIcon,\n      name: 'Calendar',\n      description: 'Use the calendar to filter your files by date.',\n      className: 'col-span-3 lg:col-span-1',\n      href: '/docs',\n      cta: 'Learn more',\n      background: (\n         <Calendar\n            mode=\"single\"\n            selected={new Date(2022, 4, 11, 0, 0, 0)}\n            className=\"absolute right-0 top-10 origin-top rounded-md border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:scale-105\"\n         />\n      ),\n   },\n]\n\nexport default function BentoDemo() {\n   return (\n      <BentoGrid>\n         {features.map((feature, idx) => (\n            <BentoCard key={idx} {...feature} />\n         ))}\n      </BentoGrid>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/bento-demo.tsx",
+      "content": "import { CalendarIcon, FileTextIcon, InputIcon } from \"@radix-ui/react-icons\"\nimport { Share2Icon } from \"lucide-react\"\nimport { Calendar } from \"~/components/ui/calendar\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/components/ui/command\"\nimport { ny } from \"~/lib/utils\"\nimport AnimatedBeamMultipleOutputDemo from \"~/registry/miami/examples/animated-beam-multiple-outputs\"\nimport { BentoCard, BentoGrid } from \"~/registry/miami/ui/bento-grid\"\nimport Marquee from \"~/registry/miami/ui/marquee\"\n\nconst files = [\n   {\n      name: \"bitcoin.pdf\",\n      body: \"Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.\",\n   },\n   {\n      name: \"finances.xlsx\",\n      body: \"A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.\",\n   },\n   {\n      name: \"logo.svg\",\n      body: \"Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.\",\n   },\n   {\n      name: \"keys.gpg\",\n      body: \"GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.\",\n   },\n   {\n      name: \"seed.txt\",\n      body: \"A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.\",\n   },\n]\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: \"Payment received\",\n      description: \"Nyxb UI\",\n      time: \"15m ago\",\n\n      icon: \"💸\",\n      color: \"#00C9A7\",\n   },\n   {\n      name: \"User signed up\",\n      description: \"Nyxb UI\",\n      time: \"10m ago\",\n      icon: \"👤\",\n      color: \"#FFB800\",\n   },\n   {\n      name: \"New message\",\n      description: \"Nyxb UI\",\n      time: \"5m ago\",\n      icon: \"💬\",\n      color: \"#FF3D71\",\n   },\n   {\n      name: \"New event\",\n      description: \"Nyxb UI\",\n      time: \"2m ago\",\n      icon: \"🗞️\",\n      color: \"#1E86FF\",\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={ny(\n            \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4\",\n            // animation styles\n            \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nconst features = [\n   {\n      Icon: FileTextIcon,\n      name: \"Save your files\",\n      description: \"We automatically save your files as you type.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      className: \"col-span-3 lg:col-span-1\",\n      background: (\n         <Marquee\n            pauseOnHover\n            className=\"absolute top-10 [--duration:20s] [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] \"\n         >\n            {files.map((f, idx) => (\n               <figure\n                  key={idx}\n                  className={ny(\n                     \"relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4\",\n                     \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n                     \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n                     \"transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none\",\n                  )}\n               >\n                  <div className=\"flex flex-row items-center gap-2\">\n                     <div className=\"flex flex-col\">\n                        <figcaption className=\"text-sm font-medium dark:text-white \">\n                           {f.name}\n                        </figcaption>\n                     </div>\n                  </div>\n                  <blockquote className=\"mt-2 text-xs\">{f.body}</blockquote>\n               </figure>\n            ))}\n         </Marquee>\n      ),\n   },\n   {\n      Icon: InputIcon,\n      name: \"Full text search\",\n      description: \"Search through all your files in one place.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      className: \"col-span-3 lg:col-span-2\",\n      background: (\n         <Command className=\"absolute right-10 top-10 w-[70%] origin-top translate-x-0 border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:-translate-x-10\">\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n               <CommandEmpty>No results found.</CommandEmpty>\n               <CommandGroup heading=\"Suggestions\">\n                  <CommandItem>screenshot.png</CommandItem>\n                  <CommandItem>bitcoin.pdf</CommandItem>\n                  <CommandItem>finances.xlsx</CommandItem>\n                  <CommandItem>logo.svg</CommandItem>\n                  <CommandItem>keys.gpg</CommandItem>\n                  <CommandItem>seed.txt</CommandItem>\n               </CommandGroup>\n            </CommandList>\n         </Command>\n      ),\n   },\n   {\n      Icon: Share2Icon,\n      name: \"Integrations\",\n      description: \"Supports 100+ integrations and counting.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      className: \"col-span-3 lg:col-span-2\",\n      background: (\n         <AnimatedBeamMultipleOutputDemo className=\"absolute right-2 top-4 h-[300px] w-[600px] border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105\" />\n      ),\n   },\n   {\n      Icon: CalendarIcon,\n      name: \"Calendar\",\n      description: \"Use the calendar to filter your files by date.\",\n      className: \"col-span-3 lg:col-span-1\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: (\n         <Calendar\n            mode=\"single\"\n            selected={new Date(2022, 4, 11, 0, 0, 0)}\n            className=\"absolute right-0 top-10 origin-top rounded-md border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:scale-105\"\n         />\n      ),\n   },\n]\n\nexport default function BentoDemo() {\n   return (\n      <BentoGrid>\n         {features.map((feature, idx) => (\n            <BentoCard key={idx} {...feature} />\n         ))}\n      </BentoGrid>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/bento-grid.json b/apps/web/public/r/styles/miami/bento-grid.json
index 5c8840d0..b4a4778b 100644
--- a/apps/web/public/r/styles/miami/bento-grid.json
+++ b/apps/web/public/r/styles/miami/bento-grid.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "bento-grid",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-icons"
   ],
   "files": [
     {
       "path": "ui/bento-grid.tsx",
-      "content": "import { ArrowRightIcon } from '@radix-ui/react-icons'\nimport type { ReactNode } from 'react'\nimport { Button } from '~/components/ui/button'\nimport { ny } from '~/lib/utils'\n\nfunction BentoGrid({\n   children,\n   className,\n}: {\n   children: ReactNode\n   className?: string\n}) {\n   return (\n      <div\n         className={ny(\n            'grid w-full auto-rows-[22rem] grid-cols-3 gap-4',\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n}\n\nfunction BentoCard({\n   name,\n   className,\n   background,\n   Icon,\n   description,\n   href,\n   cta,\n}: {\n   name: string\n   className: string\n   background: ReactNode\n   Icon: any\n   description: string\n   href: string\n   cta: string\n}) {\n   return (\n      <div\n         key={name}\n         className={ny(\n            'group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl',\n            // light styles\n            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',\n            // dark styles\n            'transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',\n            className,\n         )}\n      >\n         <div>{background}</div>\n         <div className=\"pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10\">\n            <Icon className=\"size-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75\" />\n            <h3 className=\"text-xl font-semibold text-neutral-700 dark:text-neutral-300\">\n               {name}\n            </h3>\n            <p className=\"max-w-lg text-neutral-400\">{description}</p>\n         </div>\n\n         <div\n            className={ny(\n               'pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100',\n            )}\n         >\n            <Button\n               variant=\"ghost\"\n               asChild\n               size=\"sm\"\n               className=\"pointer-events-auto\"\n            >\n               <a href={href}>\n                  {cta}\n                  <ArrowRightIcon className=\"ml-2 size-4\" />\n               </a>\n            </Button>\n         </div>\n         <div className=\"pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10\" />\n      </div>\n   )\n}\n\nexport { BentoCard, BentoGrid }\n",
-      "type": "registry:component",
+      "content": "import { ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport type { ReactNode } from \"react\"\nimport { Button } from \"~/components/ui/button\"\nimport { ny } from \"~/lib/utils\"\n\nfunction BentoGrid({\n   children,\n   className,\n}: {\n   children: ReactNode\n   className?: string\n}) {\n   return (\n      <div\n         className={ny(\n            \"grid w-full auto-rows-[22rem] grid-cols-3 gap-4\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n}\n\nfunction BentoCard({\n   name,\n   className,\n   background,\n   Icon,\n   description,\n   href,\n   cta,\n}: {\n   name: string\n   className: string\n   background: ReactNode\n   Icon: any\n   description: string\n   href: string\n   cta: string\n}) {\n   return (\n      <div\n         key={name}\n         className={ny(\n            \"group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n            className,\n         )}\n      >\n         <div>{background}</div>\n         <div className=\"pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10\">\n            <Icon className=\"size-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75\" />\n            <h3 className=\"text-xl font-semibold text-neutral-700 dark:text-neutral-300\">\n               {name}\n            </h3>\n            <p className=\"max-w-lg text-neutral-400\">{description}</p>\n         </div>\n\n         <div\n            className={ny(\n               \"pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100\",\n            )}\n         >\n            <Button\n               variant=\"ghost\"\n               asChild\n               size=\"sm\"\n               className=\"pointer-events-auto\"\n            >\n               <a href={href}>\n                  {cta}\n                  <ArrowRightIcon className=\"ml-2 size-4\" />\n               </a>\n            </Button>\n         </div>\n         <div className=\"pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10\" />\n      </div>\n   )\n}\n\nexport { BentoCard, BentoGrid }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/blur-fade-demo.json b/apps/web/public/r/styles/miami/blur-fade-demo.json
index 921c89a4..e4581f71 100644
--- a/apps/web/public/r/styles/miami/blur-fade-demo.json
+++ b/apps/web/public/r/styles/miami/blur-fade-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "blur-fade-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/blur-fade-demo.tsx",
-      "content": "import BlurFade from '~/registry/miami/ui/blur-fade'\n\nconst images = Array.from({ length: 9 }, (_, i) => {\n   const isLandscape = i % 2 === 0\n   const width = isLandscape ? 800 : 600\n   const height = isLandscape ? 600 : 800\n   return `https://picsum.photos/seed/${i + 1}/${width}/${height}`\n})\n\nexport default function BlurFadeDemo() {\n   return (\n      <section id=\"photos\">\n         <div className=\"columns-2 gap-4 sm:columns-3\">\n            {images.map((imageUrl, idx) => (\n               <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>\n                  <img\n                     className=\"mb-4 size-full rounded-lg object-contain\"\n                     src={imageUrl}\n                     alt={`Random stock image ${idx + 1}`}\n                  />\n               </BlurFade>\n            ))}\n         </div>\n      </section>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/blur-fade-demo.tsx",
+      "content": "import BlurFade from \"~/registry/miami/ui/blur-fade\"\n\nconst images = Array.from({ length: 9 }, (_, i) => {\n   const isLandscape = i % 2 === 0\n   const width = isLandscape ? 800 : 600\n   const height = isLandscape ? 600 : 800\n   return `https://picsum.photos/seed/${i + 1}/${width}/${height}`\n})\n\nexport default function BlurFadeDemo() {\n   return (\n      <section id=\"photos\">\n         <div className=\"columns-2 gap-4 sm:columns-3\">\n            {images.map((imageUrl, idx) => (\n               <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>\n                  <img\n                     className=\"mb-4 size-full rounded-lg object-contain\"\n                     src={imageUrl}\n                     alt={`Random stock image ${idx + 1}`}\n                  />\n               </BlurFade>\n            ))}\n         </div>\n      </section>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/blur-fade-text-demo.json b/apps/web/public/r/styles/miami/blur-fade-text-demo.json
index fe7a11be..fbf2c522 100644
--- a/apps/web/public/r/styles/miami/blur-fade-text-demo.json
+++ b/apps/web/public/r/styles/miami/blur-fade-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "blur-fade-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/blur-fade-text-demo.tsx",
-      "content": "import BlurFade from '~/registry/miami/ui/blur-fade'\n\nexport default function BlurFadeTextDemo() {\n   return (\n      <section id=\"header\">\n         <BlurFade delay={0.25} inView>\n            <h2 className=\"text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none\">\n               Hello World 👋\n            </h2>\n         </BlurFade>\n         <BlurFade delay={0.25 * 2} inView>\n            <span className=\"text-pretty text-xl tracking-tighter sm:text-3xl xl:text-4xl/none\">\n               Nice to meet you\n            </span>\n         </BlurFade>\n      </section>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/blur-fade-text-demo.tsx",
+      "content": "import BlurFade from \"~/registry/miami/ui/blur-fade\"\n\nexport default function BlurFadeTextDemo() {\n   return (\n      <section id=\"header\">\n         <BlurFade delay={0.25} inView>\n            <h2 className=\"text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none\">\n               Hello World 👋\n            </h2>\n         </BlurFade>\n         <BlurFade delay={0.25 * 2} inView>\n            <span className=\"text-pretty text-xl tracking-tighter sm:text-3xl xl:text-4xl/none\">\n               Nice to meet you\n            </span>\n         </BlurFade>\n      </section>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/blur-fade.json b/apps/web/public/r/styles/miami/blur-fade.json
index 5a687a3d..9364ca37 100644
--- a/apps/web/public/r/styles/miami/blur-fade.json
+++ b/apps/web/public/r/styles/miami/blur-fade.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "blur-fade",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/blur-fade.tsx",
-      "content": "'use client'\n\nimport { useRef } from 'react'\nimport type { Variants } from 'framer-motion'\nimport { AnimatePresence, motion, useInView } from 'framer-motion'\n\ninterface BlurFadeProps {\n   children: React.ReactNode\n   className?: string\n   variant?: {\n      hidden: { y: number }\n      visible: { y: number }\n   }\n   duration?: number\n   delay?: number\n   yOffset?: number\n   inView?: boolean\n   inViewMargin?: `${number}px`\n   blur?: string\n}\n\nexport default function BlurFade({\n   children,\n   className,\n   variant,\n   duration = 0.4,\n   delay = 0,\n   yOffset = 6,\n   inView = false,\n   inViewMargin = '-50px',\n   blur = '6px',\n}: BlurFadeProps) {\n   const ref = useRef(null)\n   const inViewResult = useInView(ref, { once: true, margin: inViewMargin })\n   const isInView = !inView || inViewResult\n   const defaultVariants: Variants = {\n      hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },\n      visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },\n   }\n   const combinedVariants = variant || defaultVariants\n   return (\n      <AnimatePresence>\n         <motion.div\n            ref={ref}\n            initial=\"hidden\"\n            animate={isInView ? 'visible' : 'hidden'}\n            exit=\"hidden\"\n            variants={combinedVariants}\n            transition={{\n               delay: 0.04 + delay,\n               duration,\n               ease: 'easeOut',\n            }}\n            className={className}\n         >\n            {children}\n         </motion.div>\n      </AnimatePresence>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion, useInView } from \"framer-motion\"\nimport { useRef } from \"react\"\n\ninterface BlurFadeProps {\n   children: React.ReactNode\n   className?: string\n   variant?: {\n      hidden: { y: number }\n      visible: { y: number }\n   }\n   duration?: number\n   delay?: number\n   yOffset?: number\n   inView?: boolean\n   inViewMargin?: `${number}px`\n   blur?: string\n}\n\nexport default function BlurFade({\n   children,\n   className,\n   variant,\n   duration = 0.4,\n   delay = 0,\n   yOffset = 6,\n   inView = false,\n   inViewMargin = \"-50px\",\n   blur = \"6px\",\n}: BlurFadeProps) {\n   const ref = useRef(null)\n   const inViewResult = useInView(ref, { once: true, margin: inViewMargin })\n   const isInView = !inView || inViewResult\n   const defaultVariants: Variants = {\n      hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },\n      visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },\n   }\n   const combinedVariants = variant || defaultVariants\n   return (\n      <AnimatePresence>\n         <motion.div\n            ref={ref}\n            initial=\"hidden\"\n            animate={isInView ? \"visible\" : \"hidden\"}\n            exit=\"hidden\"\n            variants={combinedVariants}\n            transition={{\n               delay: 0.04 + delay,\n               duration,\n               ease: \"easeOut\",\n            }}\n            className={className}\n         >\n            {children}\n         </motion.div>\n      </AnimatePresence>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/blur-in-demo.json b/apps/web/public/r/styles/miami/blur-in-demo.json
index 019db887..4a90178d 100644
--- a/apps/web/public/r/styles/miami/blur-in-demo.json
+++ b/apps/web/public/r/styles/miami/blur-in-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "blur-in-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/blur-in-demo.tsx",
-      "content": "import BlurIn from '~/registry/miami/ui/blur-in'\n\nfunction BlurInDemo() {\n   return (\n      <BlurIn\n         word=\"Blur In\"\n         className=\"text-4xl font-bold text-black dark:text-white\"\n      />\n   )\n}\nexport default BlurInDemo\n",
-      "type": "registry:component",
+      "path": "examples/blur-in-demo.tsx",
+      "content": "import BlurIn from \"~/registry/miami/ui/blur-in\"\n\nfunction BlurInDemo() {\n   return (\n      <BlurIn\n         word=\"Blur In\"\n         className=\"text-4xl font-bold text-black dark:text-white\"\n      />\n   )\n}\nexport default BlurInDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/blur-in.json b/apps/web/public/r/styles/miami/blur-in.json
index 66d048d2..bbecc1cc 100644
--- a/apps/web/public/r/styles/miami/blur-in.json
+++ b/apps/web/public/r/styles/miami/blur-in.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "blur-in",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/blur-in.tsx",
-      "content": "'use client'\nimport { motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface BlurIntProps {\n   word: string\n   className?: string\n   variant?: {\n      hidden: { filter: string, opacity: number }\n      visible: { filter: string, opacity: number }\n   }\n   duration?: number\n}\nfunction BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {\n   const defaultVariants = {\n      hidden: { filter: 'blur(10px)', opacity: 0 },\n      visible: { filter: 'blur(0px)', opacity: 1 },\n   }\n   const combinedVariants = variant || defaultVariants\n\n   return (\n      <motion.h1\n         initial=\"hidden\"\n         animate=\"visible\"\n         transition={{ duration }}\n         variants={combinedVariants}\n         className={ny(\n            className,\n            'font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]',\n         )}\n      >\n         {word}\n      </motion.h1>\n   )\n}\n\nexport default BlurIn\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport { motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface BlurIntProps {\n   word: string\n   className?: string\n   variant?: {\n      hidden: { filter: string; opacity: number }\n      visible: { filter: string; opacity: number }\n   }\n   duration?: number\n}\nfunction BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {\n   const defaultVariants = {\n      hidden: { filter: \"blur(10px)\", opacity: 0 },\n      visible: { filter: \"blur(0px)\", opacity: 1 },\n   }\n   const combinedVariants = variant || defaultVariants\n\n   return (\n      <motion.h1\n         initial=\"hidden\"\n         animate=\"visible\"\n         transition={{ duration }}\n         variants={combinedVariants}\n         className={ny(\n            className,\n            \"font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]\",\n         )}\n      >\n         {word}\n      </motion.h1>\n   )\n}\n\nexport default BlurIn\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/border-beam-demo.json b/apps/web/public/r/styles/miami/border-beam-demo.json
index c061d93b..a059b3f7 100644
--- a/apps/web/public/r/styles/miami/border-beam-demo.json
+++ b/apps/web/public/r/styles/miami/border-beam-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "border-beam-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/border-beam-demo.tsx",
-      "content": "import { BorderBeam } from '~/registry/miami/ui/border-beam'\n\nexport default function BorderBeamDemo() {\n   return (\n      <div className=\"relative rounded-xl\">\n         <img\n            src=\"/dashboard-dark.png\"\n            alt=\"Hero Image\"\n            className=\"hidden w-[700px] rounded-[inherit] border object-contain shadow-lg dark:block\"\n         />\n         <img\n            src=\"/dashboard-light.png\"\n            alt=\"Hero Image\"\n            className=\"block w-[700px] rounded-[inherit] border object-contain shadow-lg dark:hidden\"\n         />\n\n         <BorderBeam size={250} duration={12} delay={9} />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/border-beam-demo.tsx",
+      "content": "import { BorderBeam } from \"~/registry/miami/ui/border-beam\"\n\nexport default function BorderBeamDemo() {\n   return (\n      <div className=\"relative rounded-xl\">\n         <img\n            src=\"/dashboard-dark.png\"\n            alt=\"Hero Image\"\n            className=\"hidden w-[700px] rounded-[inherit] border object-contain shadow-lg dark:block\"\n         />\n         <img\n            src=\"/dashboard-light.png\"\n            alt=\"Hero Image\"\n            className=\"block w-[700px] rounded-[inherit] border object-contain shadow-lg dark:hidden\"\n         />\n\n         <BorderBeam size={250} duration={12} delay={9} />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/border-beam.json b/apps/web/public/r/styles/miami/border-beam.json
index 2e3179c5..fc3496b1 100644
--- a/apps/web/public/r/styles/miami/border-beam.json
+++ b/apps/web/public/r/styles/miami/border-beam.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "border-beam",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/border-beam.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\ninterface BorderBeamProps {\n   className?: string\n   size?: number\n   duration?: number\n   borderWidth?: number\n   anchor?: number\n   colorFrom?: string\n   colorTo?: string\n   delay?: number\n}\n\nexport function BorderBeam({\n   className,\n   size = 200,\n   duration = 15,\n   anchor = 90,\n   borderWidth = 1.5,\n   colorFrom = '#ffaa40',\n   colorTo = '#9c40ff',\n   delay = 0,\n}: BorderBeamProps) {\n   return (\n      <div\n         style={\n            {\n               '--size': size,\n               '--duration': duration,\n               '--anchor': anchor,\n               '--border-width': borderWidth,\n               '--color-from': colorFrom,\n               '--color-to': colorTo,\n               '--delay': `-${delay}s`,\n            } as React.CSSProperties\n         }\n         className={ny(\n            'pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]',\n\n            // mask styles\n            '![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]',\n\n            // pseudo styles\n            'after:animate-border-beam after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]',\n            className,\n         )}\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/lib/utils\"\n\ninterface BorderBeamProps {\n   className?: string\n   size?: number\n   duration?: number\n   borderWidth?: number\n   anchor?: number\n   colorFrom?: string\n   colorTo?: string\n   delay?: number\n}\n\nexport function BorderBeam({\n   className,\n   size = 200,\n   duration = 15,\n   anchor = 90,\n   borderWidth = 1.5,\n   colorFrom = \"#ffaa40\",\n   colorTo = \"#9c40ff\",\n   delay = 0,\n}: BorderBeamProps) {\n   return (\n      <div\n         style={\n            {\n               \"--size\": size,\n               \"--duration\": duration,\n               \"--anchor\": anchor,\n               \"--border-width\": borderWidth,\n               \"--color-from\": colorFrom,\n               \"--color-to\": colorTo,\n               \"--delay\": `-${delay}s`,\n            } as React.CSSProperties\n         }\n         className={ny(\n            \"pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]\",\n\n            // mask styles\n            \"![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]\",\n\n            // pseudo styles\n            \"after:animate-border-beam after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]\",\n            className,\n         )}\n      />\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/box-reveal-demo.json b/apps/web/public/r/styles/miami/box-reveal-demo.json
index c7f3c5bc..6a6786be 100644
--- a/apps/web/public/r/styles/miami/box-reveal-demo.json
+++ b/apps/web/public/r/styles/miami/box-reveal-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "box-reveal-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/box-reveal-demo.tsx",
-      "content": "import BoxReveal from '~/registry/miami/ui/box-reveal'\n\nimport { Button } from '~/components/ui/button'\n\nexport default async function BoxRevealDemo() {\n   return (\n      <div className=\"size-full max-w-lg items-center justify-center overflow-hidden pt-8\">\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <p className=\"text-[3.5rem] font-semibold\">\n               Nyxb UI\n               <span className=\"text-[#5046e6]\">.</span>\n            </p>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <h2 className=\"mt-[.5rem] text-[1rem]\">\n               UI library for\n               {' '}\n               <span className=\"text-[#5046e6]\">Design Engineers</span>\n            </h2>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <div className=\"mt-6\">\n               <p>\n                  -&gt; 20+ free and open-source animated components built with\n                  <span className=\"font-semibold text-[#5046e6]\"> React</span>\n                  ,\n                  <span className=\"font-semibold text-[#5046e6]\"> Typescript</span>\n                  ,\n                  <span className=\"font-semibold text-[#5046e6]\"> Tailwind CSS</span>\n                  ,\n                  and\n                  <span className=\"font-semibold text-[#5046e6]\"> Framer Motion</span>\n                  .\n                  {' '}\n                  <br />\n                  -&gt; 100% open-source, and customizable.\n                  {' '}\n                  <br />\n               </p>\n            </div>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <Button className=\"mt-[1.6rem] bg-[#5046e6]\">Explore</Button>\n         </BoxReveal>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/box-reveal-demo.tsx",
+      "content": "import BoxReveal from \"~/registry/miami/ui/box-reveal\"\n\nimport { Button } from \"~/components/ui/button\"\n\nexport default async function BoxRevealDemo() {\n   return (\n      <div className=\"size-full max-w-lg items-center justify-center overflow-hidden pt-8\">\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <p className=\"text-[3.5rem] font-semibold\">\n               Nyxb UI\n               <span className=\"text-[#5046e6]\">.</span>\n            </p>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <h2 className=\"mt-[.5rem] text-[1rem]\">\n               UI library for{\" \"}\n               <span className=\"text-[#5046e6]\">Design Engineers</span>\n            </h2>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <div className=\"mt-6\">\n               <p>\n                  -&gt; 20+ free and open-source animated components built with\n                  <span className=\"font-semibold text-[#5046e6]\"> React</span>,\n                  <span className=\"font-semibold text-[#5046e6]\">\n                     {\" \"}\n                     Typescript\n                  </span>\n                  ,\n                  <span className=\"font-semibold text-[#5046e6]\">\n                     {\" \"}\n                     Tailwind CSS\n                  </span>\n                  , and\n                  <span className=\"font-semibold text-[#5046e6]\">\n                     {\" \"}\n                     Framer Motion\n                  </span>\n                  . <br />\n                  -&gt; 100% open-source, and customizable. <br />\n               </p>\n            </div>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <Button className=\"mt-[1.6rem] bg-[#5046e6]\">Explore</Button>\n         </BoxReveal>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/box-reveal.json b/apps/web/public/r/styles/miami/box-reveal.json
index 62a7a7c9..dcf2ba64 100644
--- a/apps/web/public/r/styles/miami/box-reveal.json
+++ b/apps/web/public/r/styles/miami/box-reveal.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "box-reveal",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/box-reveal.tsx",
-      "content": "'use client'\n\nimport { motion, useAnimation, useInView } from 'framer-motion'\nimport { useEffect, useRef } from 'react'\n\ninterface BoxRevealProps {\n   children: JSX.Element\n   width?: 'fit-content' | '100%'\n   boxColor?: string\n   duration?: number\n}\n\nexport function BoxReveal({\n   children,\n   width = 'fit-content',\n   boxColor,\n   duration,\n}: BoxRevealProps) {\n   const mainControls = useAnimation()\n   const slideControls = useAnimation()\n\n   const ref = useRef(null)\n   const isInView = useInView(ref, { once: true })\n\n   useEffect(() => {\n      if (isInView) {\n         slideControls.start('visible')\n         mainControls.start('visible')\n      }\n      else {\n         slideControls.start('hidden')\n         mainControls.start('hidden')\n      }\n   }, [isInView, mainControls, slideControls])\n\n   return (\n      <div ref={ref} style={{ position: 'relative', width, overflow: 'hidden' }}>\n         <motion.div\n            variants={{\n               hidden: { opacity: 0, y: 75 },\n               visible: { opacity: 1, y: 0 },\n            }}\n            initial=\"hidden\"\n            animate={mainControls}\n            transition={{ duration: duration || 0.5, delay: 0.25 }}\n         >\n            {children}\n         </motion.div>\n\n         <motion.div\n            variants={{\n               hidden: { left: 0 },\n               visible: { left: '100%' },\n            }}\n            initial=\"hidden\"\n            animate={slideControls}\n            transition={{ duration: duration || 0.5, ease: 'easeIn' }}\n            style={{\n               position: 'absolute',\n               top: 4,\n               bottom: 4,\n               left: 0,\n               right: 0,\n               zIndex: 20,\n               background: boxColor || '#5046e6',\n            }}\n         />\n      </div>\n   )\n}\n\nexport default BoxReveal\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion, useAnimation, useInView } from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\n\ninterface BoxRevealProps {\n   children: JSX.Element\n   width?: \"fit-content\" | \"100%\"\n   boxColor?: string\n   duration?: number\n}\n\nexport function BoxReveal({\n   children,\n   width = \"fit-content\",\n   boxColor,\n   duration,\n}: BoxRevealProps) {\n   const mainControls = useAnimation()\n   const slideControls = useAnimation()\n\n   const ref = useRef(null)\n   const isInView = useInView(ref, { once: true })\n\n   useEffect(() => {\n      if (isInView) {\n         slideControls.start(\"visible\")\n         mainControls.start(\"visible\")\n      } else {\n         slideControls.start(\"hidden\")\n         mainControls.start(\"hidden\")\n      }\n   }, [isInView, mainControls, slideControls])\n\n   return (\n      <div\n         ref={ref}\n         style={{ position: \"relative\", width, overflow: \"hidden\" }}\n      >\n         <motion.div\n            variants={{\n               hidden: { opacity: 0, y: 75 },\n               visible: { opacity: 1, y: 0 },\n            }}\n            initial=\"hidden\"\n            animate={mainControls}\n            transition={{ duration: duration || 0.5, delay: 0.25 }}\n         >\n            {children}\n         </motion.div>\n\n         <motion.div\n            variants={{\n               hidden: { left: 0 },\n               visible: { left: \"100%\" },\n            }}\n            initial=\"hidden\"\n            animate={slideControls}\n            transition={{ duration: duration || 0.5, ease: \"easeIn\" }}\n            style={{\n               position: \"absolute\",\n               top: 4,\n               bottom: 4,\n               left: 0,\n               right: 0,\n               zIndex: 20,\n               background: boxColor || \"#5046e6\",\n            }}\n         />\n      </div>\n   )\n}\n\nexport default BoxReveal\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/breadcrumb-demo.json b/apps/web/public/r/styles/miami/breadcrumb-demo.json
index 967f5304..57c48c2e 100644
--- a/apps/web/public/r/styles/miami/breadcrumb-demo.json
+++ b/apps/web/public/r/styles/miami/breadcrumb-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "example/breadcrumb-demo.tsx",
-      "content": "import {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\n\nexport default function BreadcrumbDemo() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     <BreadcrumbEllipsis className=\"size-4\" />\n                     <span className=\"sr-only\">Toggle menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/breadcrumb-demo.tsx",
+      "content": "import {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\n\nexport default function BreadcrumbDemo() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     <BreadcrumbEllipsis className=\"size-4\" />\n                     <span className=\"sr-only\">Toggle menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/docs/components\">\n                  Components\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/breadcrumb-dropdown.json b/apps/web/public/r/styles/miami/breadcrumb-dropdown.json
index c462e222..062d1db4 100644
--- a/apps/web/public/r/styles/miami/breadcrumb-dropdown.json
+++ b/apps/web/public/r/styles/miami/breadcrumb-dropdown.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb-dropdown",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "example/breadcrumb-dropdown.tsx",
-      "content": "import { ChevronDownIcon, SlashIcon } from '@radix-ui/react-icons'\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\n\nexport default function BreadcrumbWithDropdown() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <SlashIcon />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     Components\n                     <ChevronDownIcon />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <SlashIcon />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/breadcrumb-dropdown.tsx",
+      "content": "import { ChevronDownIcon, SlashIcon } from \"@radix-ui/react-icons\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <SlashIcon />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     Components\n                     <ChevronDownIcon />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <SlashIcon />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/breadcrumb-ellipsis.json b/apps/web/public/r/styles/miami/breadcrumb-ellipsis.json
index 51c790c5..e30ea698 100644
--- a/apps/web/public/r/styles/miami/breadcrumb-ellipsis.json
+++ b/apps/web/public/r/styles/miami/breadcrumb-ellipsis.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb-ellipsis",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "example/breadcrumb-ellipsis.tsx",
-      "content": "import Link from 'next/link'\n\nimport {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\n\nexport default function BreadcrumbCollapsed() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink asChild>\n                  <Link href=\"/\">Home</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbEllipsis />\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink asChild>\n                  <Link href=\"/docs/components\">Components</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/breadcrumb-ellipsis.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\n\nexport default function BreadcrumbCollapsed() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink asChild>\n                  <Link href=\"/\">Home</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbEllipsis />\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink asChild>\n                  <Link href=\"/docs/components\">Components</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/breadcrumb-link.json b/apps/web/public/r/styles/miami/breadcrumb-link.json
index 1ec819f9..8304c295 100644
--- a/apps/web/public/r/styles/miami/breadcrumb-link.json
+++ b/apps/web/public/r/styles/miami/breadcrumb-link.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb-link",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "example/breadcrumb-link.tsx",
-      "content": "import Link from 'next/link'\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\n\nexport default function BreadcrumbWithCustomSeparator() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink>\n                  <Link href=\"/\">Home</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink>\n                  <Link href=\"/components\">Components</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/breadcrumb-link.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink>\n                  <Link href=\"/\">Home</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink>\n                  <Link href=\"/components\">Components</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/breadcrumb-responsive.json b/apps/web/public/r/styles/miami/breadcrumb-responsive.json
index e3a1fd92..78c16cde 100644
--- a/apps/web/public/r/styles/miami/breadcrumb-responsive.json
+++ b/apps/web/public/r/styles/miami/breadcrumb-responsive.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb-responsive",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "example/breadcrumb-responsive.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport Link from 'next/link'\n\nimport { useMediaQuery } from '~/hooks/use-media-query'\nimport {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from '~/registry/miami/ui/drawer'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\n\nconst items = [\n   { href: '#', label: 'Home' },\n   { href: '#', label: 'Documentation' },\n   { href: '#', label: 'Building Your Application' },\n   { href: '#', label: 'Data Fetching' },\n   { label: 'Caching and Revalidating' },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery('(min-width: 768px)')\n\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            {items.length > ITEMS_TO_DISPLAY\n               ? (\n                     <>\n                        <BreadcrumbItem>\n                           {isDesktop\n                              ? (\n                                    <DropdownMenu open={open} onOpenChange={setOpen}>\n                                       <DropdownMenuTrigger\n                                          className=\"flex items-center gap-1\"\n                                          aria-label=\"Toggle menu\"\n                                       >\n                                          <BreadcrumbEllipsis className=\"size-4\" />\n                                       </DropdownMenuTrigger>\n                                       <DropdownMenuContent align=\"start\">\n                                          {items.slice(1, -2).map((item, index) => (\n                                             <DropdownMenuItem key={index}>\n                                                <Link href={item.href ? item.href : '#'}>\n                                                   {item.label}\n                                                </Link>\n                                             </DropdownMenuItem>\n                                          ))}\n                                       </DropdownMenuContent>\n                                    </DropdownMenu>\n                                 )\n                              : (\n                                    <Drawer open={open} onOpenChange={setOpen}>\n                                       <DrawerTrigger aria-label=\"Toggle Menu\">\n                                          <BreadcrumbEllipsis className=\"size-4\" />\n                                       </DrawerTrigger>\n                                       <DrawerContent>\n                                          <DrawerHeader className=\"text-left\">\n                                             <DrawerTitle>Navigate to</DrawerTitle>\n                                             <DrawerDescription>\n                                                Select a page to navigate to.\n                                             </DrawerDescription>\n                                          </DrawerHeader>\n                                          <div className=\"grid gap-1 px-4\">\n                                             {items.slice(1, -2).map((item, index) => (\n                                                <Link\n                                                   key={index}\n                                                   href={item.href ? item.href : '#'}\n                                                   className=\"py-1 text-sm\"\n                                                >\n                                                   {item.label}\n                                                </Link>\n                                             ))}\n                                          </div>\n                                          <DrawerFooter className=\"pt-4\">\n                                             <DrawerClose asChild>\n                                                <Button variant=\"outline\">Close</Button>\n                                             </DrawerClose>\n                                          </DrawerFooter>\n                                       </DrawerContent>\n                                    </Drawer>\n                                 )}\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator />\n                     </>\n                  )\n               : null}\n            {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n               <BreadcrumbItem key={index}>\n                  {item.href\n                     ? (\n                           <>\n                              <BreadcrumbLink\n                                 asChild\n                                 className=\"max-w-20 truncate md:max-w-none\"\n                              >\n                                 <Link href={item.href}>{item.label}</Link>\n                              </BreadcrumbLink>\n                              <BreadcrumbSeparator />\n                           </>\n                        )\n                     : (\n                           <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                              {item.label}\n                           </BreadcrumbPage>\n                        )}\n               </BreadcrumbItem>\n            ))}\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/breadcrumb-responsive.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"~/hooks/use-media-query\"\nimport {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"~/registry/miami/ui/drawer\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\n\nconst items = [\n   { href: \"#\", label: \"Home\" },\n   { href: \"#\", label: \"Documentation\" },\n   { href: \"#\", label: \"Building Your Application\" },\n   { href: \"#\", label: \"Data Fetching\" },\n   { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href={items[0].href}>\n                  {items[0].label}\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            {items.length > ITEMS_TO_DISPLAY ? (\n               <>\n                  <BreadcrumbItem>\n                     {isDesktop ? (\n                        <DropdownMenu open={open} onOpenChange={setOpen}>\n                           <DropdownMenuTrigger\n                              className=\"flex items-center gap-1\"\n                              aria-label=\"Toggle menu\"\n                           >\n                              <BreadcrumbEllipsis className=\"size-4\" />\n                           </DropdownMenuTrigger>\n                           <DropdownMenuContent align=\"start\">\n                              {items.slice(1, -2).map((item, index) => (\n                                 <DropdownMenuItem key={index}>\n                                    <Link href={item.href ? item.href : \"#\"}>\n                                       {item.label}\n                                    </Link>\n                                 </DropdownMenuItem>\n                              ))}\n                           </DropdownMenuContent>\n                        </DropdownMenu>\n                     ) : (\n                        <Drawer open={open} onOpenChange={setOpen}>\n                           <DrawerTrigger aria-label=\"Toggle Menu\">\n                              <BreadcrumbEllipsis className=\"size-4\" />\n                           </DrawerTrigger>\n                           <DrawerContent>\n                              <DrawerHeader className=\"text-left\">\n                                 <DrawerTitle>Navigate to</DrawerTitle>\n                                 <DrawerDescription>\n                                    Select a page to navigate to.\n                                 </DrawerDescription>\n                              </DrawerHeader>\n                              <div className=\"grid gap-1 px-4\">\n                                 {items.slice(1, -2).map((item, index) => (\n                                    <Link\n                                       key={index}\n                                       href={item.href ? item.href : \"#\"}\n                                       className=\"py-1 text-sm\"\n                                    >\n                                       {item.label}\n                                    </Link>\n                                 ))}\n                              </div>\n                              <DrawerFooter className=\"pt-4\">\n                                 <DrawerClose asChild>\n                                    <Button variant=\"outline\">Close</Button>\n                                 </DrawerClose>\n                              </DrawerFooter>\n                           </DrawerContent>\n                        </Drawer>\n                     )}\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator />\n               </>\n            ) : null}\n            {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n               <BreadcrumbItem key={index}>\n                  {item.href ? (\n                     <>\n                        <BreadcrumbLink\n                           asChild\n                           className=\"max-w-20 truncate md:max-w-none\"\n                        >\n                           <Link href={item.href}>{item.label}</Link>\n                        </BreadcrumbLink>\n                        <BreadcrumbSeparator />\n                     </>\n                  ) : (\n                     <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                        {item.label}\n                     </BreadcrumbPage>\n                  )}\n               </BreadcrumbItem>\n            ))}\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/breadcrumb-separator.json b/apps/web/public/r/styles/miami/breadcrumb-separator.json
index 008b36af..c00bd38b 100644
--- a/apps/web/public/r/styles/miami/breadcrumb-separator.json
+++ b/apps/web/public/r/styles/miami/breadcrumb-separator.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb-separator",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "example/breadcrumb-separator.tsx",
-      "content": "import { SlashIcon } from '@radix-ui/react-icons'\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\n\nexport default function BreadcrumbWithCustomSeparator() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <SlashIcon />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <SlashIcon />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/breadcrumb-separator.tsx",
+      "content": "import { SlashIcon } from \"@radix-ui/react-icons\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <SlashIcon />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <SlashIcon />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/breadcrumb.json b/apps/web/public/r/styles/miami/breadcrumb.json
index 88f39d58..be4f194f 100644
--- a/apps/web/public/r/styles/miami/breadcrumb.json
+++ b/apps/web/public/r/styles/miami/breadcrumb.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "breadcrumb",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-slot"
   ],
   "files": [
     {
       "path": "ui/breadcrumb.tsx",
-      "content": "import * as React from 'react'\nimport { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { ny } from '~/lib/utils'\n\nconst Breadcrumb = React.forwardRef<\n   HTMLElement,\n   React.ComponentPropsWithoutRef<'nav'> & {\n      separator?: React.ReactNode\n   }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = 'Breadcrumb'\n\nconst BreadcrumbList = React.forwardRef<\n   HTMLOListElement,\n   React.ComponentPropsWithoutRef<'ol'>\n>(({ className, ...props }, ref) => (\n   <ol\n      ref={ref}\n      className={ny(\n         'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',\n         className,\n      )}\n      {...props}\n   />\n))\nBreadcrumbList.displayName = 'BreadcrumbList'\n\nconst BreadcrumbItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentPropsWithoutRef<'li'>\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={ny('inline-flex items-center gap-1.5', className)}\n      {...props}\n   />\n))\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\nconst BreadcrumbLink = React.forwardRef<\n   HTMLAnchorElement,\n   React.ComponentPropsWithoutRef<'a'> & {\n      asChild?: boolean\n   }\n>(({ asChild, className, ...props }, ref) => {\n   const Comp = asChild ? Slot : 'a'\n\n   return (\n      <Comp\n         ref={ref}\n         className={ny('hover:text-foreground transition-colors', className)}\n         {...props}\n      />\n   )\n})\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\nconst BreadcrumbPage = React.forwardRef<\n   HTMLSpanElement,\n   React.ComponentPropsWithoutRef<'span'>\n>(({ className, ...props }, ref) => (\n   <span\n      ref={ref}\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={ny('text-foreground font-normal', className)}\n      {...props}\n   />\n))\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\nfunction BreadcrumbSeparator({\n   children,\n   className,\n   ...props\n}: React.ComponentProps<'li'>) {\n   return (\n      <li\n         role=\"presentation\"\n         aria-hidden=\"true\"\n         className={ny('[&>svg]:size-3.5', className)}\n         {...props}\n      >\n         {children ?? <ChevronRightIcon />}\n      </li>\n   )\n}\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\nfunction BreadcrumbEllipsis({\n   className,\n   ...props\n}: React.ComponentProps<'span'>) {\n   return (\n      <span\n         role=\"presentation\"\n         aria-hidden=\"true\"\n         className={ny('flex size-9 items-center justify-center', className)}\n         {...props}\n      >\n         <DotsHorizontalIcon className=\"size-4\" />\n         <span className=\"sr-only\">More</span>\n      </span>\n   )\n}\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\nexport {\n   Breadcrumb,\n   BreadcrumbList,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n   BreadcrumbEllipsis,\n}\n",
-      "type": "registry:component",
+      "content": "import { ChevronRightIcon, DotsHorizontalIcon } from \"@radix-ui/react-icons\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n   HTMLElement,\n   React.ComponentPropsWithoutRef<\"nav\"> & {\n      separator?: React.ReactNode\n   }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n   HTMLOListElement,\n   React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n   <ol\n      ref={ref}\n      className={ny(\n         \"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5\",\n         className,\n      )}\n      {...props}\n   />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={ny(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n   />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n   HTMLAnchorElement,\n   React.ComponentPropsWithoutRef<\"a\"> & {\n      asChild?: boolean\n   }\n>(({ asChild, className, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"a\"\n\n   return (\n      <Comp\n         ref={ref}\n         className={ny(\"hover:text-foreground transition-colors\", className)}\n         {...props}\n      />\n   )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n   HTMLSpanElement,\n   React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n   <span\n      ref={ref}\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={ny(\"text-foreground font-normal\", className)}\n      {...props}\n   />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nfunction BreadcrumbSeparator({\n   children,\n   className,\n   ...props\n}: React.ComponentProps<\"li\">) {\n   return (\n      <li\n         role=\"presentation\"\n         aria-hidden=\"true\"\n         className={ny(\"[&>svg]:size-3.5\", className)}\n         {...props}\n      >\n         {children ?? <ChevronRightIcon />}\n      </li>\n   )\n}\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nfunction BreadcrumbEllipsis({\n   className,\n   ...props\n}: React.ComponentProps<\"span\">) {\n   return (\n      <span\n         role=\"presentation\"\n         aria-hidden=\"true\"\n         className={ny(\"flex size-9 items-center justify-center\", className)}\n         {...props}\n      >\n         <DotsHorizontalIcon className=\"size-4\" />\n         <span className=\"sr-only\">More</span>\n      </span>\n   )\n}\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\n\nexport {\n   Breadcrumb,\n   BreadcrumbList,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n   BreadcrumbEllipsis,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/button-as-child.json b/apps/web/public/r/styles/miami/button-as-child.json
index 86f9efb6..1b2f6657 100644
--- a/apps/web/public/r/styles/miami/button-as-child.json
+++ b/apps/web/public/r/styles/miami/button-as-child.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-as-child",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-as-child.tsx",
-      "content": "import Link from 'next/link'\n\nimport { Button } from '~/registry/miami/ui/button'\n\nexport default function ButtonAsChild() {\n   return (\n      <Button asChild>\n         <Link href=\"/login\">Login</Link>\n      </Button>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-as-child.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\n\nexport default function ButtonAsChild() {\n   return (\n      <Button asChild>\n         <Link href=\"/login\">Login</Link>\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/button-demo.json b/apps/web/public/r/styles/miami/button-demo.json
index f9b9cca7..df811b88 100644
--- a/apps/web/public/r/styles/miami/button-demo.json
+++ b/apps/web/public/r/styles/miami/button-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-demo.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\n\nexport default function ButtonDemo() {\n   return <Button>Button</Button>\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\n\nexport default function ButtonDemo() {\n   return <Button>Button</Button>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/button-destructive.json b/apps/web/public/r/styles/miami/button-destructive.json
index c9b886a7..17bb232c 100644
--- a/apps/web/public/r/styles/miami/button-destructive.json
+++ b/apps/web/public/r/styles/miami/button-destructive.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-destructive",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-destructive.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\n\nexport default function ButtonDestructive() {\n   return <Button variant=\"destructive\">Destructive</Button>\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-destructive.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\n\nexport default function ButtonDestructive() {\n   return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/button-ghost.json b/apps/web/public/r/styles/miami/button-ghost.json
index c02ed8b0..a31f1750 100644
--- a/apps/web/public/r/styles/miami/button-ghost.json
+++ b/apps/web/public/r/styles/miami/button-ghost.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-ghost",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-ghost.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\n\nexport default function ButtonGhost() {\n   return <Button variant=\"ghost\">Ghost</Button>\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-ghost.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\n\nexport default function ButtonGhost() {\n   return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/button-icon.json b/apps/web/public/r/styles/miami/button-icon.json
index a1efa40d..cdf6807d 100644
--- a/apps/web/public/r/styles/miami/button-icon.json
+++ b/apps/web/public/r/styles/miami/button-icon.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-icon",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-icon.tsx",
-      "content": "import { ChevronRightIcon } from '@radix-ui/react-icons'\n\nimport { Button } from '~/registry/miami/ui/button'\n\nexport default function ButtonIcon() {\n   return (\n      <Button variant=\"outline\" size=\"icon\">\n         <ChevronRightIcon className=\"size-4\" />\n      </Button>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-icon.tsx",
+      "content": "import { ChevronRightIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\n\nexport default function ButtonIcon() {\n   return (\n      <Button variant=\"outline\" size=\"icon\">\n         <ChevronRightIcon className=\"size-4\" />\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/button-link.json b/apps/web/public/r/styles/miami/button-link.json
index 34456164..55fd48bd 100644
--- a/apps/web/public/r/styles/miami/button-link.json
+++ b/apps/web/public/r/styles/miami/button-link.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-link",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-link.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\n\nexport default function ButtonLink() {\n   return <Button variant=\"link\">Link</Button>\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-link.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\n\nexport default function ButtonLink() {\n   return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/button-loading.json b/apps/web/public/r/styles/miami/button-loading.json
index 5e40cf5f..6b3c0234 100644
--- a/apps/web/public/r/styles/miami/button-loading.json
+++ b/apps/web/public/r/styles/miami/button-loading.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-loading",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-loading.tsx",
-      "content": "import { ReloadIcon } from '@radix-ui/react-icons'\n\nimport { Button } from '~/registry/miami/ui/button'\n\nexport default function ButtonLoading() {\n   return (\n      <Button disabled>\n         <ReloadIcon className=\"mr-2 size-4 animate-spin\" />\n         Please wait\n      </Button>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-loading.tsx",
+      "content": "import { ReloadIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\n\nexport default function ButtonLoading() {\n   return (\n      <Button disabled>\n         <ReloadIcon className=\"mr-2 size-4 animate-spin\" />\n         Please wait\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/button-outline.json b/apps/web/public/r/styles/miami/button-outline.json
index 878816ec..975e8c3e 100644
--- a/apps/web/public/r/styles/miami/button-outline.json
+++ b/apps/web/public/r/styles/miami/button-outline.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-outline",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-outline.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\n\nexport default function ButtonOutline() {\n   return <Button variant=\"outline\">Outline</Button>\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-outline.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\n\nexport default function ButtonOutline() {\n   return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/button-secondary.json b/apps/web/public/r/styles/miami/button-secondary.json
index 0ba7414e..83b79758 100644
--- a/apps/web/public/r/styles/miami/button-secondary.json
+++ b/apps/web/public/r/styles/miami/button-secondary.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-secondary",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-secondary.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\n\nexport default function ButtonSecondary() {\n   return <Button variant=\"secondary\">Secondary</Button>\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-secondary.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\n\nexport default function ButtonSecondary() {\n   return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/button-with-icon.json b/apps/web/public/r/styles/miami/button-with-icon.json
index 5b915850..995b6c7a 100644
--- a/apps/web/public/r/styles/miami/button-with-icon.json
+++ b/apps/web/public/r/styles/miami/button-with-icon.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button-with-icon",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "example/button-with-icon.tsx",
-      "content": "import { EnvelopeOpenIcon } from '@radix-ui/react-icons'\n\nimport { Button } from '~/registry/miami/ui/button'\n\nexport default function ButtonWithIcon() {\n   return (\n      <Button>\n         <EnvelopeOpenIcon className=\"mr-2 size-4\" />\n         {' '}\n         Login with Email\n      </Button>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/button-with-icon.tsx",
+      "content": "import { EnvelopeOpenIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\n\nexport default function ButtonWithIcon() {\n   return (\n      <Button>\n         <EnvelopeOpenIcon className=\"mr-2 size-4\" /> Login with Email\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/button.json b/apps/web/public/r/styles/miami/button.json
index 3795a850..51e781f0 100644
--- a/apps/web/public/r/styles/miami/button.json
+++ b/apps/web/public/r/styles/miami/button.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "button",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-slot"
   ],
   "files": [
     {
       "path": "ui/button.tsx",
-      "content": "import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst buttonVariants = cva(\n   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n   {\n      variants: {\n         variant: {\n            default:\n          'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n            destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n            outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n            secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n            ghost: 'hover:bg-accent hover:text-accent-foreground',\n            link: 'text-primary underline-offset-4 hover:underline',\n         },\n         size: {\n            default: 'h-9 px-4 py-2',\n            sm: 'h-8 rounded-md px-3 text-xs',\n            lg: 'h-10 rounded-md px-8',\n            icon: 'h-9 w-9',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n         size: 'default',\n      },\n   },\n)\n\nexport interface ButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n   VariantProps<typeof buttonVariants> {\n   asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n   ({ className, variant, size, asChild = false, ...props }, ref) => {\n      const Comp = asChild ? Slot : 'button'\n      return (\n         <Comp\n            className={ny(buttonVariants({ variant, size, className }))}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n",
-      "type": "registry:component",
+      "content": "import { Slot } from \"@radix-ui/react-slot\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst buttonVariants = cva(\n   \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n   {\n      variants: {\n         variant: {\n            default:\n               \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n            destructive:\n               \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n            outline:\n               \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n            secondary:\n               \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n            ghost: \"hover:bg-accent hover:text-accent-foreground\",\n            link: \"text-primary underline-offset-4 hover:underline\",\n         },\n         size: {\n            default: \"h-9 px-4 py-2\",\n            sm: \"h-8 rounded-md px-3 text-xs\",\n            lg: \"h-10 rounded-md px-8\",\n            icon: \"h-9 w-9\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n         size: \"default\",\n      },\n   },\n)\n\nexport interface ButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n      VariantProps<typeof buttonVariants> {\n   asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n   ({ className, variant, size, asChild = false, ...props }, ref) => {\n      const Comp = asChild ? Slot : \"button\"\n      return (\n         <Comp\n            className={ny(buttonVariants({ variant, size, className }))}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/calendar-demo.json b/apps/web/public/r/styles/miami/calendar-demo.json
index 88d8b826..f5f52587 100644
--- a/apps/web/public/r/styles/miami/calendar-demo.json
+++ b/apps/web/public/r/styles/miami/calendar-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "calendar-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "calendar"
   ],
   "files": [
     {
-      "path": "example/calendar-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Calendar } from '~/registry/miami/ui/calendar'\n\nexport default function CalendarDemo() {\n   const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n   return (\n      <Calendar\n         mode=\"single\"\n         selected={date}\n         onSelect={setDate}\n         className=\"rounded-md border shadow\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"~/registry/miami/ui/calendar\"\n\nexport default function CalendarDemo() {\n   const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n   return (\n      <Calendar\n         mode=\"single\"\n         selected={date}\n         onSelect={setDate}\n         className=\"rounded-md border shadow\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/calendar-form.json b/apps/web/public/r/styles/miami/calendar-form.json
index ede254cc..8c5e8b02 100644
--- a/apps/web/public/r/styles/miami/calendar-form.json
+++ b/apps/web/public/r/styles/miami/calendar-form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "calendar-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "calendar",
     "form",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/calendar-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { CalendarIcon } from '@radix-ui/react-icons'\nimport { format } from 'date-fns'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport { Calendar } from '~/registry/miami/ui/calendar'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/miami/ui/form'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst FormSchema = z.object({\n   dob: z.date({\n      required_error: 'A date of birth is required.',\n   }),\n})\n\nexport default function CalendarForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"dob\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Date of birth</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 className={ny(\n                                    'w-[240px] pl-3 text-left font-normal',\n                                    !field.value && 'text-muted-foreground',\n                                 )}\n                              >\n                                 {field.value\n                                    ? (\n                                          format(field.value, 'PPP')\n                                       )\n                                    : (\n                                          <span>Pick a date</span>\n                                       )}\n                                 <CalendarIcon className=\"ml-auto size-4 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                           <Calendar\n                              mode=\"single\"\n                              selected={field.value}\n                              onSelect={field.onChange}\n                              disabled={date =>\n                                 date > new Date() || date < new Date('1900-01-01')}\n                              initialFocus\n                           />\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        Your date of birth is used to calculate your age.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/calendar-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { format } from \"date-fns\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Calendar } from \"~/registry/miami/ui/calendar\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/miami/ui/form\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst FormSchema = z.object({\n   dob: z.date({\n      required_error: \"A date of birth is required.\",\n   }),\n})\n\nexport default function CalendarForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"dob\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Date of birth</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 className={ny(\n                                    \"w-[240px] pl-3 text-left font-normal\",\n                                    !field.value && \"text-muted-foreground\",\n                                 )}\n                              >\n                                 {field.value ? (\n                                    format(field.value, \"PPP\")\n                                 ) : (\n                                    <span>Pick a date</span>\n                                 )}\n                                 <CalendarIcon className=\"ml-auto size-4 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                           <Calendar\n                              mode=\"single\"\n                              selected={field.value}\n                              onSelect={field.onChange}\n                              disabled={(date) =>\n                                 date > new Date() ||\n                                 date < new Date(\"1900-01-01\")\n                              }\n                              initialFocus\n                           />\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        Your date of birth is used to calculate your age.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/calendar.json b/apps/web/public/r/styles/miami/calendar.json
index 14a2c1fc..0ad09662 100644
--- a/apps/web/public/r/styles/miami/calendar.json
+++ b/apps/web/public/r/styles/miami/calendar.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "calendar",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "react-day-picker@8.10.1",
     "date-fns"
@@ -11,8 +13,8 @@
   "files": [
     {
       "path": "ui/calendar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'\nimport { DayPicker } from 'react-day-picker'\n\nimport { ny } from '~/lib/utils'\nimport { buttonVariants } from '~/registry/miami/ui/button'\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n   className,\n   classNames,\n   showOutsideDays = true,\n   ...props\n}: CalendarProps) {\n   return (\n      <DayPicker\n         showOutsideDays={showOutsideDays}\n         className={ny('p-3', className)}\n         classNames={{\n            months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',\n            month: 'space-y-4',\n            caption: 'flex justify-center pt-1 relative items-center',\n            caption_label: 'text-sm font-medium',\n            nav: 'space-x-1 flex items-center',\n            nav_button: ny(\n               buttonVariants({ variant: 'outline' }),\n               'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n            ),\n            nav_button_previous: 'absolute left-1',\n            nav_button_next: 'absolute right-1',\n            table: 'w-full border-collapse space-y-1',\n            head_row: 'flex',\n            head_cell:\n          'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',\n            row: 'flex w-full mt-2',\n            cell: ny(\n               '[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected].day-range-end)]:rounded-r-md',\n               props.mode === 'range'\n                  ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'\n                  : '[&:has([aria-selected])]:rounded-md',\n            ),\n            day: ny(\n               buttonVariants({ variant: 'ghost' }),\n               'size-8 p-0 font-normal aria-selected:opacity-100',\n            ),\n            day_range_start: 'day-range-start',\n            day_range_end: 'day-range-end',\n            day_selected:\n          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',\n            day_today: 'bg-accent text-accent-foreground',\n            day_outside:\n          'day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',\n            day_disabled: 'text-muted-foreground opacity-50',\n            day_range_middle:\n          'aria-selected:bg-accent aria-selected:text-accent-foreground',\n            day_hidden: 'invisible',\n            ...classNames,\n         }}\n         components={{\n            IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"size-4\" />,\n            IconRight: ({ ...props }) => <ChevronRightIcon className=\"size-4\" />,\n         }}\n         {...props}\n      />\n   )\n}\nCalendar.displayName = 'Calendar'\n\nexport { Calendar }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport type * as React from \"react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { ny } from \"~/lib/utils\"\nimport { buttonVariants } from \"~/registry/miami/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n   className,\n   classNames,\n   showOutsideDays = true,\n   ...props\n}: CalendarProps) {\n   return (\n      <DayPicker\n         showOutsideDays={showOutsideDays}\n         className={ny(\"p-3\", className)}\n         classNames={{\n            months:\n               \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n            month: \"space-y-4\",\n            caption: \"flex justify-center pt-1 relative items-center\",\n            caption_label: \"text-sm font-medium\",\n            nav: \"space-x-1 flex items-center\",\n            nav_button: ny(\n               buttonVariants({ variant: \"outline\" }),\n               \"size-7 bg-transparent p-0 opacity-50 hover:opacity-100\",\n            ),\n            nav_button_previous: \"absolute left-1\",\n            nav_button_next: \"absolute right-1\",\n            table: \"w-full border-collapse space-y-1\",\n            head_row: \"flex\",\n            head_cell:\n               \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n            row: \"flex w-full mt-2\",\n            cell: ny(\n               \"[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n               props.mode === \"range\"\n                  ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n                  : \"[&:has([aria-selected])]:rounded-md\",\n            ),\n            day: ny(\n               buttonVariants({ variant: \"ghost\" }),\n               \"size-8 p-0 font-normal aria-selected:opacity-100\",\n            ),\n            day_range_start: \"day-range-start\",\n            day_range_end: \"day-range-end\",\n            day_selected:\n               \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n            day_today: \"bg-accent text-accent-foreground\",\n            day_outside:\n               \"day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n            day_disabled: \"text-muted-foreground opacity-50\",\n            day_range_middle:\n               \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n            day_hidden: \"invisible\",\n            ...classNames,\n         }}\n         components={{\n            IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"size-4\" />,\n            IconRight: ({ ...props }) => (\n               <ChevronRightIcon className=\"size-4\" />\n            ),\n         }}\n         {...props}\n      />\n   )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/card-demo.json b/apps/web/public/r/styles/miami/card-demo.json
index 99a12dc4..9eefbc01 100644
--- a/apps/web/public/r/styles/miami/card-demo.json
+++ b/apps/web/public/r/styles/miami/card-demo.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "card-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "button",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/card-demo.tsx",
-      "content": "import { BellIcon, CheckIcon } from '@radix-ui/react-icons'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport { Switch } from '~/registry/miami/ui/switch'\n\nconst notifications = [\n   {\n      title: 'Your call has been confirmed.',\n      description: '1 hour ago',\n   },\n   {\n      title: 'You have a new message!',\n      description: '1 hour ago',\n   },\n   {\n      title: 'Your subscription is expiring soon!',\n      description: '2 hours ago',\n   },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n   return (\n      <Card className={ny('w-[380px]', className)} {...props}>\n         <CardHeader>\n            <CardTitle>Notifications</CardTitle>\n            <CardDescription>You have 3 unread messages.</CardDescription>\n         </CardHeader>\n         <CardContent className=\"grid gap-4\">\n            <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n               <BellIcon />\n               <div className=\"flex-1 space-y-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                     Push Notifications\n                  </p>\n                  <p className=\"text-muted-foreground text-sm\">\n                     Send notifications to device.\n                  </p>\n               </div>\n               <Switch />\n            </div>\n            <div>\n               {notifications.map((notification, index) => (\n                  <div\n                     key={index}\n                     className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n                  >\n                     <span className=\"flex size-2 translate-y-1 rounded-full bg-sky-500\" />\n                     <div className=\"space-y-1\">\n                        <p className=\"text-sm font-medium leading-none\">\n                           {notification.title}\n                        </p>\n                        <p className=\"text-muted-foreground text-sm\">\n                           {notification.description}\n                        </p>\n                     </div>\n                  </div>\n               ))}\n            </div>\n         </CardContent>\n         <CardFooter>\n            <Button className=\"w-full\">\n               <CheckIcon className=\"mr-2 size-4\" />\n               {' '}\n               Mark all as read\n            </Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/card-demo.tsx",
+      "content": "import { BellIcon, CheckIcon } from \"@radix-ui/react-icons\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport { Switch } from \"~/registry/miami/ui/switch\"\n\nconst notifications = [\n   {\n      title: \"Your call has been confirmed.\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"You have a new message!\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"Your subscription is expiring soon!\",\n      description: \"2 hours ago\",\n   },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n   return (\n      <Card className={ny(\"w-[380px]\", className)} {...props}>\n         <CardHeader>\n            <CardTitle>Notifications</CardTitle>\n            <CardDescription>You have 3 unread messages.</CardDescription>\n         </CardHeader>\n         <CardContent className=\"grid gap-4\">\n            <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n               <BellIcon />\n               <div className=\"flex-1 space-y-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                     Push Notifications\n                  </p>\n                  <p className=\"text-muted-foreground text-sm\">\n                     Send notifications to device.\n                  </p>\n               </div>\n               <Switch />\n            </div>\n            <div>\n               {notifications.map((notification, index) => (\n                  <div\n                     key={index}\n                     className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n                  >\n                     <span className=\"flex size-2 translate-y-1 rounded-full bg-sky-500\" />\n                     <div className=\"space-y-1\">\n                        <p className=\"text-sm font-medium leading-none\">\n                           {notification.title}\n                        </p>\n                        <p className=\"text-muted-foreground text-sm\">\n                           {notification.description}\n                        </p>\n                     </div>\n                  </div>\n               ))}\n            </div>\n         </CardContent>\n         <CardFooter>\n            <Button className=\"w-full\">\n               <CheckIcon className=\"mr-2 size-4\" /> Mark all as read\n            </Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/card-with-form.json b/apps/web/public/r/styles/miami/card-with-form.json
index 03a8a99a..9d978aa4 100644
--- a/apps/web/public/r/styles/miami/card-with-form.json
+++ b/apps/web/public/r/styles/miami/card-with-form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "card-with-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "card",
@@ -10,9 +12,9 @@
   ],
   "files": [
     {
-      "path": "example/card-with-form.tsx",
-      "content": "import * as React from 'react'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport { Input } from '~/registry/miami/ui/input'\nimport { Label } from '~/registry/miami/ui/label'\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/miami/ui/select'\n\nexport default function CardWithForm() {\n   return (\n      <Card className=\"w-[350px]\">\n         <CardHeader>\n            <CardTitle>Create project</CardTitle>\n            <CardDescription>Deploy your new project in one-click.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <form>\n               <div className=\"grid w-full items-center gap-4\">\n                  <div className=\"flex flex-col space-y-1.5\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" placeholder=\"Name of your project\" />\n                  </div>\n                  <div className=\"flex flex-col space-y-1.5\">\n                     <Label htmlFor=\"framework\">Framework</Label>\n                     <Select>\n                        <SelectTrigger id=\"framework\">\n                           <SelectValue placeholder=\"Select\" />\n                        </SelectTrigger>\n                        <SelectContent position=\"popper\">\n                           <SelectItem value=\"next\">Next.js</SelectItem>\n                           <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                           <SelectItem value=\"astro\">Astro</SelectItem>\n                           <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                        </SelectContent>\n                     </Select>\n                  </div>\n               </div>\n            </form>\n         </CardContent>\n         <CardFooter className=\"flex justify-between\">\n            <Button variant=\"outline\">Cancel</Button>\n            <Button>Deploy</Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/card-with-form.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/miami/ui/select\"\n\nexport default function CardWithForm() {\n   return (\n      <Card className=\"w-[350px]\">\n         <CardHeader>\n            <CardTitle>Create project</CardTitle>\n            <CardDescription>\n               Deploy your new project in one-click.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <form>\n               <div className=\"grid w-full items-center gap-4\">\n                  <div className=\"flex flex-col space-y-1.5\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" placeholder=\"Name of your project\" />\n                  </div>\n                  <div className=\"flex flex-col space-y-1.5\">\n                     <Label htmlFor=\"framework\">Framework</Label>\n                     <Select>\n                        <SelectTrigger id=\"framework\">\n                           <SelectValue placeholder=\"Select\" />\n                        </SelectTrigger>\n                        <SelectContent position=\"popper\">\n                           <SelectItem value=\"next\">Next.js</SelectItem>\n                           <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                           <SelectItem value=\"astro\">Astro</SelectItem>\n                           <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                        </SelectContent>\n                     </Select>\n                  </div>\n               </div>\n            </form>\n         </CardContent>\n         <CardFooter className=\"flex justify-between\">\n            <Button variant=\"outline\">Cancel</Button>\n            <Button>Deploy</Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/card.json b/apps/web/public/r/styles/miami/card.json
index d7c0dc68..ae221837 100644
--- a/apps/web/public/r/styles/miami/card.json
+++ b/apps/web/public/r/styles/miami/card.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "card",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/card.tsx",
-      "content": "import * as React from 'react'\n\nimport { ny } from '~/lib/utils'\n\nconst Card = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         'bg-card text-card-foreground rounded-xl border shadow',\n         className,\n      )}\n      {...props}\n   />\n))\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny('flex flex-col space-y-1.5 p-6', className)}\n      {...props}\n   />\n))\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n   <h3\n      ref={ref}\n      className={ny('font-semibold leading-none tracking-tight', className)}\n      {...props}\n   />\n))\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n   <p\n      ref={ref}\n      className={ny('text-muted-foreground text-sm', className)}\n      {...props}\n   />\n))\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div ref={ref} className={ny('p-6 pt-0', className)} {...props} />\n))\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny('flex items-center p-6 pt-0', className)}\n      {...props}\n   />\n))\nCardFooter.displayName = 'CardFooter'\n\nexport {\n   Card,\n   CardHeader,\n   CardFooter,\n   CardTitle,\n   CardDescription,\n   CardContent,\n}\n",
-      "type": "registry:component",
+      "content": "import * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Card = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         \"bg-card text-card-foreground rounded-xl border shadow\",\n         className,\n      )}\n      {...props}\n   />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\"flex flex-col space-y-1.5 p-6\", className)}\n      {...props}\n   />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n   <h3\n      ref={ref}\n      className={ny(\"font-semibold leading-none tracking-tight\", className)}\n      {...props}\n   />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n   <p\n      ref={ref}\n      className={ny(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div ref={ref} className={ny(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\"flex items-center p-6 pt-0\", className)}\n      {...props}\n   />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/carousel-api.json b/apps/web/public/r/styles/miami/carousel-api.json
index a2fbac5c..4b1fa09e 100644
--- a/apps/web/public/r/styles/miami/carousel-api.json
+++ b/apps/web/public/r/styles/miami/carousel-api.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-api",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-api.tsx",
-      "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/miami/ui/card'\nimport {\n   Carousel,\n   type CarouselApi,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/miami/ui/carousel'\n\nexport default function CarouselDApiDemo() {\n   const [api, setApi] = React.useState<CarouselApi>()\n   const [current, setCurrent] = React.useState(0)\n   const [count, setCount] = React.useState(0)\n\n   React.useEffect(() => {\n      if (!api)\n         return\n\n      setCount(api.scrollSnapList().length)\n      setCurrent(api.selectedScrollSnap() + 1)\n\n      api.on('select', () => {\n         setCurrent(api.selectedScrollSnap() + 1)\n      })\n   }, [api])\n\n   return (\n      <div>\n         <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n            <CarouselContent>\n               {Array.from({ length: 5 }).map((_, index) => (\n                  <CarouselItem key={index}>\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </CarouselItem>\n               ))}\n            </CarouselContent>\n            <CarouselPrevious />\n            <CarouselNext />\n         </Carousel>\n         <div className=\"text-muted-foreground py-2 text-center text-sm\">\n            Slide\n            {' '}\n            {current}\n            {' '}\n            of\n            {count}\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-api.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/miami/ui/card\"\nimport {\n   Carousel,\n   type CarouselApi,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/miami/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n   const [api, setApi] = React.useState<CarouselApi>()\n   const [current, setCurrent] = React.useState(0)\n   const [count, setCount] = React.useState(0)\n\n   React.useEffect(() => {\n      if (!api) return\n\n      setCount(api.scrollSnapList().length)\n      setCurrent(api.selectedScrollSnap() + 1)\n\n      api.on(\"select\", () => {\n         setCurrent(api.selectedScrollSnap() + 1)\n      })\n   }, [api])\n\n   return (\n      <div>\n         <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n            <CarouselContent>\n               {Array.from({ length: 5 }).map((_, index) => (\n                  <CarouselItem key={index}>\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </CarouselItem>\n               ))}\n            </CarouselContent>\n            <CarouselPrevious />\n            <CarouselNext />\n         </Carousel>\n         <div className=\"text-muted-foreground py-2 text-center text-sm\">\n            Slide {current} of\n            {count}\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/carousel-demo.json b/apps/web/public/r/styles/miami/carousel-demo.json
index c5b362a5..8f4f7d75 100644
--- a/apps/web/public/r/styles/miami/carousel-demo.json
+++ b/apps/web/public/r/styles/miami/carousel-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-demo.tsx",
-      "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/miami/ui/card'\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/miami/ui/carousel'\n\nexport default function CarouselDemo() {\n   return (\n      <Carousel className=\"w-full max-w-xs\">\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/miami/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/miami/ui/carousel\"\n\nexport default function CarouselDemo() {\n   return (\n      <Carousel className=\"w-full max-w-xs\">\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/carousel-dots.json b/apps/web/public/r/styles/miami/carousel-dots.json
index 6a324cd3..25848109 100644
--- a/apps/web/public/r/styles/miami/carousel-dots.json
+++ b/apps/web/public/r/styles/miami/carousel-dots.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-dots",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-dots.tsx",
-      "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/miami/ui/card'\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselDots,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/miami/ui/carousel'\n\nexport default function CarouselSize() {\n   return (\n      <Carousel\n         opts={{\n            align: 'start',\n         }}\n         className=\"w-full max-w-sm\"\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselDots />\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-dots.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/miami/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselDots,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/miami/ui/carousel\"\n\nexport default function CarouselSize() {\n   return (\n      <Carousel\n         opts={{\n            align: \"start\",\n         }}\n         className=\"w-full max-w-sm\"\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselDots />\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/carousel-orientation.json b/apps/web/public/r/styles/miami/carousel-orientation.json
index 52642dd7..1d60d0ac 100644
--- a/apps/web/public/r/styles/miami/carousel-orientation.json
+++ b/apps/web/public/r/styles/miami/carousel-orientation.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-orientation",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-orientation.tsx",
-      "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/miami/ui/card'\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/miami/ui/carousel'\n\nexport default function CarouselOrientation() {\n   return (\n      <Carousel\n         opts={{\n            align: 'start',\n         }}\n         orientation=\"vertical\"\n         className=\"w-full max-w-xs\"\n      >\n         <CarouselContent className=\"-mt-1 h-[200px]\">\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/miami/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/miami/ui/carousel\"\n\nexport default function CarouselOrientation() {\n   return (\n      <Carousel\n         opts={{\n            align: \"start\",\n         }}\n         orientation=\"vertical\"\n         className=\"w-full max-w-xs\"\n      >\n         <CarouselContent className=\"-mt-1 h-[200px]\">\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/carousel-plugin.json b/apps/web/public/r/styles/miami/carousel-plugin.json
index 050e391e..434b403c 100644
--- a/apps/web/public/r/styles/miami/carousel-plugin.json
+++ b/apps/web/public/r/styles/miami/carousel-plugin.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-plugin",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-plugin.tsx",
-      "content": "import * as React from 'react'\nimport Autoplay from 'embla-carousel-autoplay'\n\nimport { Card, CardContent } from '~/registry/miami/ui/card'\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/miami/ui/carousel'\n\nexport default function CarouselPlugin() {\n   const plugin = React.useRef(\n      Autoplay({ delay: 2000, stopOnInteraction: true }),\n   )\n\n   return (\n      <Carousel\n         plugins={[plugin.current]}\n         className=\"w-full max-w-xs\"\n         onMouseEnter={plugin.current.stop}\n         onMouseLeave={plugin.current.reset}\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-plugin.tsx",
+      "content": "import Autoplay from \"embla-carousel-autoplay\"\nimport * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/miami/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/miami/ui/carousel\"\n\nexport default function CarouselPlugin() {\n   const plugin = React.useRef(\n      Autoplay({ delay: 2000, stopOnInteraction: true }),\n   )\n\n   return (\n      <Carousel\n         plugins={[plugin.current]}\n         className=\"w-full max-w-xs\"\n         onMouseEnter={plugin.current.stop}\n         onMouseLeave={plugin.current.reset}\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/carousel-size.json b/apps/web/public/r/styles/miami/carousel-size.json
index 7005e50b..f85f7158 100644
--- a/apps/web/public/r/styles/miami/carousel-size.json
+++ b/apps/web/public/r/styles/miami/carousel-size.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-size",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-size.tsx",
-      "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/miami/ui/card'\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/miami/ui/carousel'\n\nexport default function CarouselSize() {\n   return (\n      <Carousel\n         opts={{\n            align: 'start',\n         }}\n         className=\"w-full max-w-sm\"\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-size.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/miami/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/miami/ui/carousel\"\n\nexport default function CarouselSize() {\n   return (\n      <Carousel\n         opts={{\n            align: \"start\",\n         }}\n         className=\"w-full max-w-sm\"\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/carousel-spacing.json b/apps/web/public/r/styles/miami/carousel-spacing.json
index ffe97540..dc639a06 100644
--- a/apps/web/public/r/styles/miami/carousel-spacing.json
+++ b/apps/web/public/r/styles/miami/carousel-spacing.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel-spacing",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "carousel"
   ],
   "files": [
     {
-      "path": "example/carousel-spacing.tsx",
-      "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/miami/ui/card'\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from '~/registry/miami/ui/carousel'\n\nexport default function CarouselSpacing() {\n   return (\n      <Carousel className=\"w-full max-w-sm\">\n         <CarouselContent className=\"-ml-1\">\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/carousel-spacing.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/miami/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/miami/ui/carousel\"\n\nexport default function CarouselSpacing() {\n   return (\n      <Carousel className=\"w-full max-w-sm\">\n         <CarouselContent className=\"-ml-1\">\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem\n                  key={index}\n                  className=\"pl-1 md:basis-1/2 lg:basis-1/3\"\n               >\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-2xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/carousel.json b/apps/web/public/r/styles/miami/carousel.json
index b1bd6929..df0106f7 100644
--- a/apps/web/public/r/styles/miami/carousel.json
+++ b/apps/web/public/r/styles/miami/carousel.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "carousel",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "embla-carousel-react"
   ],
@@ -10,8 +12,8 @@
   "files": [
     {
       "path": "ui/carousel.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ninterface CarouselProps {\n   opts?: CarouselOptions\n   plugins?: CarouselPlugin\n   setApi?: (api: CarouselApi) => void\n   orientation?: 'horizontal' | 'vertical'\n   dotsPosition?: 'top' | 'bottom' | 'left' | 'right'\n}\n\ntype CarouselContextProps = {\n   carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n   api: ReturnType<typeof useEmblaCarousel>[1]\n   scrollPrev: () => void\n   scrollNext: () => void\n   scrollTo: (index: number) => void\n   canScrollPrev: boolean\n   canScrollNext: boolean\n   totalSlides: number\n   currentIndex: number\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n   const context = React.useContext(CarouselContext)\n\n   if (!context)\n      throw new Error('useCarousel must be used within a <Carousel />')\n\n   return context\n}\n\nconst Carousel = React.forwardRef<\n   HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n   (\n      {\n         opts,\n         plugins,\n         setApi,\n         orientation = 'horizontal',\n         dotsPosition = 'bottom',\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const [carouselRef, api] = useEmblaCarousel(\n         {\n            ...opts,\n            axis: orientation === 'horizontal' ? 'x' : 'y',\n         },\n         plugins,\n      )\n      const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n      const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n      const [currentIndex, setCurrentIndex] = React.useState(0)\n      const [totalSlides, setTotalSlides] = React.useState(0)\n\n      const onSelect = React.useCallback((api: CarouselApi) => {\n         if (!api)\n            return\n\n         setCanScrollPrev(api.canScrollPrev())\n         setCanScrollNext(api.canScrollNext())\n         setCurrentIndex(api.selectedScrollSnap())\n         setTotalSlides(api.scrollSnapList().length)\n      }, [])\n\n      const scrollTo = React.useCallback(\n         (index: number) => {\n            api?.scrollTo(index)\n         },\n         [api],\n      )\n\n      const scrollPrev = React.useCallback(() => {\n         api?.scrollPrev()\n      }, [api])\n\n      const scrollNext = React.useCallback(() => {\n         api?.scrollNext()\n      }, [api])\n\n      const handleKeyDown = React.useCallback(\n         (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'ArrowLeft') {\n               event.preventDefault()\n               scrollPrev()\n            }\n            else if (event.key === 'ArrowRight') {\n               event.preventDefault()\n               scrollNext()\n            }\n         },\n         [scrollPrev, scrollNext],\n      )\n\n      React.useEffect(() => {\n         if (!api || !setApi)\n            return\n\n         setApi(api)\n      }, [api, setApi])\n\n      React.useEffect(() => {\n         if (!api)\n            return\n\n         onSelect(api)\n         api.on('reInit', onSelect)\n         api.on('select', onSelect)\n\n         return () => {\n            api?.off('select', onSelect)\n         }\n      }, [api, onSelect])\n\n      let effectiveDotsPosition = dotsPosition\n      if (\n         orientation === 'horizontal'\n         && (dotsPosition === 'left' || dotsPosition === 'right')\n      ) {\n         console.warn(\n        `Invalid dotsPosition \"${dotsPosition}\" for horizontal orientation, defaulting to \"bottom\".`,\n         )\n         effectiveDotsPosition = 'bottom'\n      }\n      else if (\n         orientation === 'vertical'\n         && (dotsPosition === 'top' || dotsPosition === 'bottom')\n      ) {\n         console.warn(\n        `Invalid dotsPosition \"${dotsPosition}\" for vertical orientation, defaulting to \"left\".`,\n         )\n         effectiveDotsPosition = 'left'\n      }\n\n      return (\n         <CarouselContext.Provider\n            value={{\n               carouselRef,\n               api,\n               opts,\n               orientation:\n            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n               dotsPosition: effectiveDotsPosition,\n               scrollPrev,\n               scrollNext,\n               scrollTo,\n               canScrollPrev,\n               canScrollNext,\n               totalSlides,\n               currentIndex,\n            }}\n         >\n            <div\n               ref={ref}\n               onKeyDownCapture={handleKeyDown}\n               className={ny('relative', className)}\n               role=\"region\"\n               aria-roledescription=\"carousel\"\n               {...props}\n            >\n               {children}\n            </div>\n         </CarouselContext.Provider>\n      )\n   },\n)\nCarousel.displayName = 'Carousel'\n\nconst CarouselContent = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { carouselRef, orientation } = useCarousel()\n\n   return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n         <div\n            ref={ref}\n            className={ny(\n               'flex',\n               orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n               className,\n            )}\n            {...props}\n         />\n      </div>\n   )\n})\nCarouselContent.displayName = 'CarouselContent'\n\nconst CarouselItem = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { orientation } = useCarousel()\n\n   return (\n      <div\n         ref={ref}\n         role=\"group\"\n         aria-roledescription=\"slide\"\n         className={ny(\n            'min-w-0 shrink-0 grow-0 basis-full',\n            orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nCarouselItem.displayName = 'CarouselItem'\n\nconst CarouselPrevious = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<typeof Button>\n>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {\n   const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n   return (\n      <Button\n         ref={ref}\n         variant={variant}\n         size={size}\n         className={ny(\n            'absolute  size-8 rounded-full',\n            orientation === 'horizontal'\n               ? '-left-12 top-1/2 -translate-y-1/2'\n               : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n            className,\n         )}\n         disabled={!canScrollPrev}\n         onClick={scrollPrev}\n         {...props}\n      >\n         <ArrowLeftIcon className=\"size-4\" />\n         <span className=\"sr-only\">Previous slide</span>\n      </Button>\n   )\n})\nCarouselPrevious.displayName = 'CarouselPrevious'\n\nconst CarouselNext = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<typeof Button>\n>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {\n   const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n   return (\n      <Button\n         ref={ref}\n         variant={variant}\n         size={size}\n         className={ny(\n            'absolute size-8 rounded-full',\n            orientation === 'horizontal'\n               ? '-right-12 top-1/2 -translate-y-1/2'\n               : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n            className,\n         )}\n         disabled={!canScrollNext}\n         onClick={scrollNext}\n         {...props}\n      >\n         <ArrowRightIcon className=\"size-4\" />\n         <span className=\"sr-only\">Next slide</span>\n      </Button>\n   )\n})\nCarouselNext.displayName = 'CarouselNext'\n\nconst dotsContainerVariants = cva('absolute flex justify-center', {\n   variants: {\n      orientation: {\n         horizontal: 'inset-x-0 flex-row',\n         vertical: 'inset-y-0 flex-col',\n      },\n      size: {\n         default: 'p-4',\n         sm: 'p-4',\n         md: 'p-1',\n         lg: 'p-0',\n      },\n      position: {\n         top: '-top-10',\n         right: '-right-10',\n         bottom: '-bottom-10',\n         left: '-left-10',\n      },\n      gap: {\n         default: 'gap-2',\n         sm: 'gap-2',\n         md: 'gap-4',\n         lg: 'gap-6',\n      },\n   },\n   defaultVariants: {\n      orientation: 'horizontal',\n      size: 'default',\n      position: 'bottom',\n      gap: 'default',\n   },\n})\n\nconst dotsVariants = cva(\n   'rounded-full ring-1 ring-muted ring-offset-1 ring-offset-background transition-all duration-300',\n   {\n      variants: {\n         size: {\n            default: 'size-3',\n            sm: 'size-3',\n            md: 'size-4',\n            lg: 'size-6',\n         },\n      },\n      defaultVariants: {\n         size: 'default',\n      },\n   },\n)\n\ninterface CarouselDotsProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n   VariantProps<typeof dotsContainerVariants>,\n   VariantProps<typeof dotsVariants> {}\n\nconst CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(\n   ({ className, size, gap, ...props }, ref) => {\n      const { orientation, dotsPosition, totalSlides, currentIndex, scrollTo }\n      = useCarousel()\n\n      if (totalSlides <= 1)\n         return null\n\n      return (\n         <div\n            ref={ref}\n            role=\"tablist\"\n            className={ny(\n               dotsContainerVariants({\n                  orientation,\n                  size,\n                  position: dotsPosition,\n                  gap,\n               }),\n               className,\n            )}\n            {...props}\n         >\n            {Array.from({ length: totalSlides }).map((_, index) => (\n               <button\n                  key={index}\n                  role=\"tab\"\n                  aria-selected={currentIndex === index}\n                  aria-label={`Go to slide ${index + 1}`}\n                  onClick={() => scrollTo(index)}\n                  className={ny(\n                     dotsVariants({ size }),\n                     currentIndex === index ? 'bg-card-foreground' : 'bg-muted',\n                  )}\n               />\n            ))}\n         </div>\n      )\n   },\n)\nCarouselDots.displayName = 'CarouselDots'\n\nexport {\n   type CarouselApi,\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselPrevious,\n   CarouselNext,\n   CarouselDots,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport useEmblaCarousel, {\n   type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ninterface CarouselProps {\n   opts?: CarouselOptions\n   plugins?: CarouselPlugin\n   setApi?: (api: CarouselApi) => void\n   orientation?: \"horizontal\" | \"vertical\"\n   dotsPosition?: \"top\" | \"bottom\" | \"left\" | \"right\"\n}\n\ntype CarouselContextProps = {\n   carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n   api: ReturnType<typeof useEmblaCarousel>[1]\n   scrollPrev: () => void\n   scrollNext: () => void\n   scrollTo: (index: number) => void\n   canScrollPrev: boolean\n   canScrollNext: boolean\n   totalSlides: number\n   currentIndex: number\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n   const context = React.useContext(CarouselContext)\n\n   if (!context)\n      throw new Error(\"useCarousel must be used within a <Carousel />\")\n\n   return context\n}\n\nconst Carousel = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n   (\n      {\n         opts,\n         plugins,\n         setApi,\n         orientation = \"horizontal\",\n         dotsPosition = \"bottom\",\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const [carouselRef, api] = useEmblaCarousel(\n         {\n            ...opts,\n            axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n         },\n         plugins,\n      )\n      const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n      const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n      const [currentIndex, setCurrentIndex] = React.useState(0)\n      const [totalSlides, setTotalSlides] = React.useState(0)\n\n      const onSelect = React.useCallback((api: CarouselApi) => {\n         if (!api) return\n\n         setCanScrollPrev(api.canScrollPrev())\n         setCanScrollNext(api.canScrollNext())\n         setCurrentIndex(api.selectedScrollSnap())\n         setTotalSlides(api.scrollSnapList().length)\n      }, [])\n\n      const scrollTo = React.useCallback(\n         (index: number) => {\n            api?.scrollTo(index)\n         },\n         [api],\n      )\n\n      const scrollPrev = React.useCallback(() => {\n         api?.scrollPrev()\n      }, [api])\n\n      const scrollNext = React.useCallback(() => {\n         api?.scrollNext()\n      }, [api])\n\n      const handleKeyDown = React.useCallback(\n         (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === \"ArrowLeft\") {\n               event.preventDefault()\n               scrollPrev()\n            } else if (event.key === \"ArrowRight\") {\n               event.preventDefault()\n               scrollNext()\n            }\n         },\n         [scrollPrev, scrollNext],\n      )\n\n      React.useEffect(() => {\n         if (!api || !setApi) return\n\n         setApi(api)\n      }, [api, setApi])\n\n      React.useEffect(() => {\n         if (!api) return\n\n         onSelect(api)\n         api.on(\"reInit\", onSelect)\n         api.on(\"select\", onSelect)\n\n         return () => {\n            api?.off(\"select\", onSelect)\n         }\n      }, [api, onSelect])\n\n      let effectiveDotsPosition = dotsPosition\n      if (\n         orientation === \"horizontal\" &&\n         (dotsPosition === \"left\" || dotsPosition === \"right\")\n      ) {\n         console.warn(\n            `Invalid dotsPosition \"${dotsPosition}\" for horizontal orientation, defaulting to \"bottom\".`,\n         )\n         effectiveDotsPosition = \"bottom\"\n      } else if (\n         orientation === \"vertical\" &&\n         (dotsPosition === \"top\" || dotsPosition === \"bottom\")\n      ) {\n         console.warn(\n            `Invalid dotsPosition \"${dotsPosition}\" for vertical orientation, defaulting to \"left\".`,\n         )\n         effectiveDotsPosition = \"left\"\n      }\n\n      return (\n         <CarouselContext.Provider\n            value={{\n               carouselRef,\n               api,\n               opts,\n               orientation:\n                  orientation ||\n                  (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n               dotsPosition: effectiveDotsPosition,\n               scrollPrev,\n               scrollNext,\n               scrollTo,\n               canScrollPrev,\n               canScrollNext,\n               totalSlides,\n               currentIndex,\n            }}\n         >\n            <div\n               ref={ref}\n               onKeyDownCapture={handleKeyDown}\n               className={ny(\"relative\", className)}\n               role=\"region\"\n               aria-roledescription=\"carousel\"\n               {...props}\n            >\n               {children}\n            </div>\n         </CarouselContext.Provider>\n      )\n   },\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { carouselRef, orientation } = useCarousel()\n\n   return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n         <div\n            ref={ref}\n            className={ny(\n               \"flex\",\n               orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n               className,\n            )}\n            {...props}\n         />\n      </div>\n   )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { orientation } = useCarousel()\n\n   return (\n      <div\n         ref={ref}\n         role=\"group\"\n         aria-roledescription=\"slide\"\n         className={ny(\n            \"min-w-0 shrink-0 grow-0 basis-full\",\n            orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n   const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n   return (\n      <Button\n         ref={ref}\n         variant={variant}\n         size={size}\n         className={ny(\n            \"absolute  size-8 rounded-full\",\n            orientation === \"horizontal\"\n               ? \"-left-12 top-1/2 -translate-y-1/2\"\n               : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n            className,\n         )}\n         disabled={!canScrollPrev}\n         onClick={scrollPrev}\n         {...props}\n      >\n         <ArrowLeftIcon className=\"size-4\" />\n         <span className=\"sr-only\">Previous slide</span>\n      </Button>\n   )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n   const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n   return (\n      <Button\n         ref={ref}\n         variant={variant}\n         size={size}\n         className={ny(\n            \"absolute size-8 rounded-full\",\n            orientation === \"horizontal\"\n               ? \"-right-12 top-1/2 -translate-y-1/2\"\n               : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n            className,\n         )}\n         disabled={!canScrollNext}\n         onClick={scrollNext}\n         {...props}\n      >\n         <ArrowRightIcon className=\"size-4\" />\n         <span className=\"sr-only\">Next slide</span>\n      </Button>\n   )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nconst dotsContainerVariants = cva(\"absolute flex justify-center\", {\n   variants: {\n      orientation: {\n         horizontal: \"inset-x-0 flex-row\",\n         vertical: \"inset-y-0 flex-col\",\n      },\n      size: {\n         default: \"p-4\",\n         sm: \"p-4\",\n         md: \"p-1\",\n         lg: \"p-0\",\n      },\n      position: {\n         top: \"-top-10\",\n         right: \"-right-10\",\n         bottom: \"-bottom-10\",\n         left: \"-left-10\",\n      },\n      gap: {\n         default: \"gap-2\",\n         sm: \"gap-2\",\n         md: \"gap-4\",\n         lg: \"gap-6\",\n      },\n   },\n   defaultVariants: {\n      orientation: \"horizontal\",\n      size: \"default\",\n      position: \"bottom\",\n      gap: \"default\",\n   },\n})\n\nconst dotsVariants = cva(\n   \"rounded-full ring-1 ring-muted ring-offset-1 ring-offset-background transition-all duration-300\",\n   {\n      variants: {\n         size: {\n            default: \"size-3\",\n            sm: \"size-3\",\n            md: \"size-4\",\n            lg: \"size-6\",\n         },\n      },\n      defaultVariants: {\n         size: \"default\",\n      },\n   },\n)\n\ninterface CarouselDotsProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof dotsContainerVariants>,\n      VariantProps<typeof dotsVariants> {}\n\nconst CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(\n   ({ className, size, gap, ...props }, ref) => {\n      const { orientation, dotsPosition, totalSlides, currentIndex, scrollTo } =\n         useCarousel()\n\n      if (totalSlides <= 1) return null\n\n      return (\n         <div\n            ref={ref}\n            role=\"tablist\"\n            className={ny(\n               dotsContainerVariants({\n                  orientation,\n                  size,\n                  position: dotsPosition,\n                  gap,\n               }),\n               className,\n            )}\n            {...props}\n         >\n            {Array.from({ length: totalSlides }).map((_, index) => (\n               <button\n                  key={index}\n                  role=\"tab\"\n                  aria-selected={currentIndex === index}\n                  aria-label={`Go to slide ${index + 1}`}\n                  onClick={() => scrollTo(index)}\n                  className={ny(\n                     dotsVariants({ size }),\n                     currentIndex === index ? \"bg-card-foreground\" : \"bg-muted\",\n                  )}\n               />\n            ))}\n         </div>\n      )\n   },\n)\nCarouselDots.displayName = \"CarouselDots\"\n\nexport {\n   type CarouselApi,\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselPrevious,\n   CarouselNext,\n   CarouselDots,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/chart-area-axes.json b/apps/web/public/r/styles/miami/chart-area-axes.json
index f928cebd..79f66498 100644
--- a/apps/web/public/r/styles/miami/chart-area-axes.json
+++ b/apps/web/public/r/styles/miami/chart-area-axes.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-axes",
   "type": "registry:block",
-  "description": "An area chart with axes",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-axes.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Axes</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: -20,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <YAxis\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickCount={3}\n                  />\n                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-axes.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Axes</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: -20,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <YAxis\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickCount={3}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-area-default.json b/apps/web/public/r/styles/miami/chart-area-default.json
index 04e7fc6f..885fb3eb 100644
--- a/apps/web/public/r/styles/miami/chart-area-default.json
+++ b/apps/web/public/r/styles/miami/chart-area-default.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-default",
   "type": "registry:block",
-  "description": "A simple area chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-default.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-area-gradient.json b/apps/web/public/r/styles/miami/chart-area-gradient.json
index fe1cfda3..0e676e91 100644
--- a/apps/web/public/r/styles/miami/chart-area-gradient.json
+++ b/apps/web/public/r/styles/miami/chart-area-gradient.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-gradient",
   "type": "registry:block",
-  "description": "An area chart with gradient fill",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-gradient.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Gradient</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                  <defs>\n                     <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                     <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                  </defs>\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"url(#fillMobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"url(#fillDesktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-gradient.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Gradient</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <defs>\n                     <linearGradient\n                        id=\"fillDesktop\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                     <linearGradient\n                        id=\"fillMobile\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                  </defs>\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"url(#fillMobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"url(#fillDesktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-area-icons.json b/apps/web/public/r/styles/miami/chart-area-icons.json
index 1d279bc6..0dc29d5f 100644
--- a/apps/web/public/r/styles/miami/chart-area-icons.json
+++ b/apps/web/public/r/styles/miami/chart-area-icons.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-icons",
   "type": "registry:block",
-  "description": "An area chart with icons",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-icons.tsx",
-      "content": "'use client'\n\nimport { TrendingDown, TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n      icon: TrendingDown,\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n      icon: TrendingUp,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Icons</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-icons.tsx",
+      "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n      icon: TrendingDown,\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n      icon: TrendingUp,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Icons</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-area-interactive.json b/apps/web/public/r/styles/miami/chart-area-interactive.json
index 0c97653f..c0a1568f 100644
--- a/apps/web/public/r/styles/miami/chart-area-interactive.json
+++ b/apps/web/public/r/styles/miami/chart-area-interactive.json
@@ -1,7 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-interactive",
   "type": "registry:block",
-  "description": "An interactive area chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart",
@@ -9,10 +10,14 @@
   ],
   "files": [
     {
-      "path": "block/chart-area-interactive.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/miami/ui/select'\nconst chartData = [\n   { date: '2024-04-01', desktop: 222, mobile: 150 },\n   { date: '2024-04-02', desktop: 97, mobile: 180 },\n   { date: '2024-04-03', desktop: 167, mobile: 120 },\n   { date: '2024-04-04', desktop: 242, mobile: 260 },\n   { date: '2024-04-05', desktop: 373, mobile: 290 },\n   { date: '2024-04-06', desktop: 301, mobile: 340 },\n   { date: '2024-04-07', desktop: 245, mobile: 180 },\n   { date: '2024-04-08', desktop: 409, mobile: 320 },\n   { date: '2024-04-09', desktop: 59, mobile: 110 },\n   { date: '2024-04-10', desktop: 261, mobile: 190 },\n   { date: '2024-04-11', desktop: 327, mobile: 350 },\n   { date: '2024-04-12', desktop: 292, mobile: 210 },\n   { date: '2024-04-13', desktop: 342, mobile: 380 },\n   { date: '2024-04-14', desktop: 137, mobile: 220 },\n   { date: '2024-04-15', desktop: 120, mobile: 170 },\n   { date: '2024-04-16', desktop: 138, mobile: 190 },\n   { date: '2024-04-17', desktop: 446, mobile: 360 },\n   { date: '2024-04-18', desktop: 364, mobile: 410 },\n   { date: '2024-04-19', desktop: 243, mobile: 180 },\n   { date: '2024-04-20', desktop: 89, mobile: 150 },\n   { date: '2024-04-21', desktop: 137, mobile: 200 },\n   { date: '2024-04-22', desktop: 224, mobile: 170 },\n   { date: '2024-04-23', desktop: 138, mobile: 230 },\n   { date: '2024-04-24', desktop: 387, mobile: 290 },\n   { date: '2024-04-25', desktop: 215, mobile: 250 },\n   { date: '2024-04-26', desktop: 75, mobile: 130 },\n   { date: '2024-04-27', desktop: 383, mobile: 420 },\n   { date: '2024-04-28', desktop: 122, mobile: 180 },\n   { date: '2024-04-29', desktop: 315, mobile: 240 },\n   { date: '2024-04-30', desktop: 454, mobile: 380 },\n   { date: '2024-05-01', desktop: 165, mobile: 220 },\n   { date: '2024-05-02', desktop: 293, mobile: 310 },\n   { date: '2024-05-03', desktop: 247, mobile: 190 },\n   { date: '2024-05-04', desktop: 385, mobile: 420 },\n   { date: '2024-05-05', desktop: 481, mobile: 390 },\n   { date: '2024-05-06', desktop: 498, mobile: 520 },\n   { date: '2024-05-07', desktop: 388, mobile: 300 },\n   { date: '2024-05-08', desktop: 149, mobile: 210 },\n   { date: '2024-05-09', desktop: 227, mobile: 180 },\n   { date: '2024-05-10', desktop: 293, mobile: 330 },\n   { date: '2024-05-11', desktop: 335, mobile: 270 },\n   { date: '2024-05-12', desktop: 197, mobile: 240 },\n   { date: '2024-05-13', desktop: 197, mobile: 160 },\n   { date: '2024-05-14', desktop: 448, mobile: 490 },\n   { date: '2024-05-15', desktop: 473, mobile: 380 },\n   { date: '2024-05-16', desktop: 338, mobile: 400 },\n   { date: '2024-05-17', desktop: 499, mobile: 420 },\n   { date: '2024-05-18', desktop: 315, mobile: 350 },\n   { date: '2024-05-19', desktop: 235, mobile: 180 },\n   { date: '2024-05-20', desktop: 177, mobile: 230 },\n   { date: '2024-05-21', desktop: 82, mobile: 140 },\n   { date: '2024-05-22', desktop: 81, mobile: 120 },\n   { date: '2024-05-23', desktop: 252, mobile: 290 },\n   { date: '2024-05-24', desktop: 294, mobile: 220 },\n   { date: '2024-05-25', desktop: 201, mobile: 250 },\n   { date: '2024-05-26', desktop: 213, mobile: 170 },\n   { date: '2024-05-27', desktop: 420, mobile: 460 },\n   { date: '2024-05-28', desktop: 233, mobile: 190 },\n   { date: '2024-05-29', desktop: 78, mobile: 130 },\n   { date: '2024-05-30', desktop: 340, mobile: 280 },\n   { date: '2024-05-31', desktop: 178, mobile: 230 },\n   { date: '2024-06-01', desktop: 178, mobile: 200 },\n   { date: '2024-06-02', desktop: 470, mobile: 410 },\n   { date: '2024-06-03', desktop: 103, mobile: 160 },\n   { date: '2024-06-04', desktop: 439, mobile: 380 },\n   { date: '2024-06-05', desktop: 88, mobile: 140 },\n   { date: '2024-06-06', desktop: 294, mobile: 250 },\n   { date: '2024-06-07', desktop: 323, mobile: 370 },\n   { date: '2024-06-08', desktop: 385, mobile: 320 },\n   { date: '2024-06-09', desktop: 438, mobile: 480 },\n   { date: '2024-06-10', desktop: 155, mobile: 200 },\n   { date: '2024-06-11', desktop: 92, mobile: 150 },\n   { date: '2024-06-12', desktop: 492, mobile: 420 },\n   { date: '2024-06-13', desktop: 81, mobile: 130 },\n   { date: '2024-06-14', desktop: 426, mobile: 380 },\n   { date: '2024-06-15', desktop: 307, mobile: 350 },\n   { date: '2024-06-16', desktop: 371, mobile: 310 },\n   { date: '2024-06-17', desktop: 475, mobile: 520 },\n   { date: '2024-06-18', desktop: 107, mobile: 170 },\n   { date: '2024-06-19', desktop: 341, mobile: 290 },\n   { date: '2024-06-20', desktop: 408, mobile: 450 },\n   { date: '2024-06-21', desktop: 169, mobile: 210 },\n   { date: '2024-06-22', desktop: 317, mobile: 270 },\n   { date: '2024-06-23', desktop: 480, mobile: 530 },\n   { date: '2024-06-24', desktop: 132, mobile: 180 },\n   { date: '2024-06-25', desktop: 141, mobile: 190 },\n   { date: '2024-06-26', desktop: 434, mobile: 380 },\n   { date: '2024-06-27', desktop: 448, mobile: 490 },\n   { date: '2024-06-28', desktop: 149, mobile: 200 },\n   { date: '2024-06-29', desktop: 103, mobile: 160 },\n   { date: '2024-06-30', desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [timeRange, setTimeRange] = React.useState('90d')\n\n   const filteredData = chartData.filter((item) => {\n      const date = new Date(item.date)\n      const referenceDate = new Date('2024-06-30')\n      let daysToSubtract = 90\n      if (timeRange === '30d') {\n         daysToSubtract = 30\n      }\n      else if (timeRange === '7d') {\n         daysToSubtract = 7\n      }\n      const startDate = new Date(referenceDate)\n      startDate.setDate(startDate.getDate() - daysToSubtract)\n      return date >= startDate\n   })\n\n   return (\n      <Card>\n         <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n            <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n               <CardTitle>Area Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <Select value={timeRange} onValueChange={setTimeRange}>\n               <SelectTrigger\n                  className=\"w-[160px] rounded-lg sm:ml-auto\"\n                  aria-label=\"Select a value\"\n               >\n                  <SelectValue placeholder=\"Last 3 months\" />\n               </SelectTrigger>\n               <SelectContent className=\"rounded-xl\">\n                  <SelectItem value=\"90d\" className=\"rounded-lg\">\n                     Last 3 months\n                  </SelectItem>\n                  <SelectItem value=\"30d\" className=\"rounded-lg\">\n                     Last 30 days\n                  </SelectItem>\n                  <SelectItem value=\"7d\" className=\"rounded-lg\">\n                     Last 7 days\n                  </SelectItem>\n               </SelectContent>\n            </Select>\n         </CardHeader>\n         <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <AreaChart data={filteredData}>\n                  <defs>\n                     <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                     <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                  </defs>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString('en-US', {\n                           month: 'short',\n                           day: 'numeric',\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={(\n                        <ChartTooltipContent\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString('en-US', {\n                                 month: 'short',\n                                 day: 'numeric',\n                              })\n                           }}\n                           indicator=\"dot\"\n                        />\n                     )}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"url(#fillMobile)\"\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"url(#fillDesktop)\"\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/miami/ui/select\"\nconst chartData = [\n   { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n   { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n   { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n   { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n   { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n   { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n   { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n   { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n   { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n   { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n   { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n   { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n   { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n   { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n   { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n   { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n   { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n   { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n   { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n   { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n   { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n   { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n   { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n   { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n   { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n   { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n   { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n   { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n   { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n   { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n   { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n   { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n   { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n   { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n   { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n   { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n   { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n   { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n   { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n   { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n   { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n   { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n   { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n   { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n   { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n   { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n   { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n   { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n   { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n   { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n   { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n   { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n   { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n   { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n   { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n   { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n   { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n   { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n   { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n   { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n   { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n   { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n   { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n   { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n   { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n   { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n   { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n   { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n   { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n   { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n   { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n   { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n   { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n   { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n   { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n   { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n   { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n   { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n   { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n   { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n   { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n   { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n   { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n   { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n   { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n   { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n   { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n   { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n   { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n   const filteredData = chartData.filter((item) => {\n      const date = new Date(item.date)\n      const referenceDate = new Date(\"2024-06-30\")\n      let daysToSubtract = 90\n      if (timeRange === \"30d\") {\n         daysToSubtract = 30\n      } else if (timeRange === \"7d\") {\n         daysToSubtract = 7\n      }\n      const startDate = new Date(referenceDate)\n      startDate.setDate(startDate.getDate() - daysToSubtract)\n      return date >= startDate\n   })\n\n   return (\n      <Card>\n         <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n            <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n               <CardTitle>Area Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <Select value={timeRange} onValueChange={setTimeRange}>\n               <SelectTrigger\n                  className=\"w-[160px] rounded-lg sm:ml-auto\"\n                  aria-label=\"Select a value\"\n               >\n                  <SelectValue placeholder=\"Last 3 months\" />\n               </SelectTrigger>\n               <SelectContent className=\"rounded-xl\">\n                  <SelectItem value=\"90d\" className=\"rounded-lg\">\n                     Last 3 months\n                  </SelectItem>\n                  <SelectItem value=\"30d\" className=\"rounded-lg\">\n                     Last 30 days\n                  </SelectItem>\n                  <SelectItem value=\"7d\" className=\"rounded-lg\">\n                     Last 7 days\n                  </SelectItem>\n               </SelectContent>\n            </Select>\n         </CardHeader>\n         <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <AreaChart data={filteredData}>\n                  <defs>\n                     <linearGradient\n                        id=\"fillDesktop\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                     <linearGradient\n                        id=\"fillMobile\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                  </defs>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString(\"en-US\", {\n                           month: \"short\",\n                           day: \"numeric\",\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    month: \"short\",\n                                    day: \"numeric\",\n                                 },\n                              )\n                           }}\n                           indicator=\"dot\"\n                        />\n                     }\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"url(#fillMobile)\"\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"url(#fillDesktop)\"\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-area-legend.json b/apps/web/public/r/styles/miami/chart-area-legend.json
index 30aa524d..118dd9c9 100644
--- a/apps/web/public/r/styles/miami/chart-area-legend.json
+++ b/apps/web/public/r/styles/miami/chart-area-legend.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-legend",
   "type": "registry:block",
-  "description": "An area chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-legend.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Legend</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Legend</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-area-linear.json b/apps/web/public/r/styles/miami/chart-area-linear.json
index 97afc9ef..4e3a7a70 100644
--- a/apps/web/public/r/styles/miami/chart-area-linear.json
+++ b/apps/web/public/r/styles/miami/chart-area-linear.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-linear",
   "type": "registry:block",
-  "description": "A linear area chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-linear.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Linear</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"linear\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Linear</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"linear\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-area-stacked-expand.json b/apps/web/public/r/styles/miami/chart-area-stacked-expand.json
index 23771af6..e5881161 100644
--- a/apps/web/public/r/styles/miami/chart-area-stacked-expand.json
+++ b/apps/web/public/r/styles/miami/chart-area-stacked-expand.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-stacked-expand",
   "type": "registry:block",
-  "description": "A stacked area chart with expand stacking",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-stacked-expand.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80, other: 45 },\n   { month: 'February', desktop: 305, mobile: 200, other: 100 },\n   { month: 'March', desktop: 237, mobile: 120, other: 150 },\n   { month: 'April', desktop: 73, mobile: 190, other: 50 },\n   { month: 'May', desktop: 209, mobile: 130, other: 100 },\n   { month: 'June', desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-3))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                     top: 12,\n                  }}\n                  stackOffset=\"expand\"\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"other\"\n                     type=\"natural\"\n                     fill=\"var(--color-other)\"\n                     fillOpacity={0.1}\n                     stroke=\"var(--color-other)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-stacked-expand.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n   { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n   { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n   { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n   { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n   { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-3))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                     top: 12,\n                  }}\n                  stackOffset=\"expand\"\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"other\"\n                     type=\"natural\"\n                     fill=\"var(--color-other)\"\n                     fillOpacity={0.1}\n                     stroke=\"var(--color-other)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-area-stacked.json b/apps/web/public/r/styles/miami/chart-area-stacked.json
index 41698cf3..8a4fdd3d 100644
--- a/apps/web/public/r/styles/miami/chart-area-stacked.json
+++ b/apps/web/public/r/styles/miami/chart-area-stacked.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-stacked",
   "type": "registry:block",
-  "description": "A stacked area chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-stacked.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Stacked</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Stacked</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-area-step.json b/apps/web/public/r/styles/miami/chart-area-step.json
index 51e7bb1b..af2823d6 100644
--- a/apps/web/public/r/styles/miami/chart-area-step.json
+++ b/apps/web/public/r/styles/miami/chart-area-step.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-area-step",
   "type": "registry:block",
-  "description": "A step area chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-step.tsx",
-      "content": "'use client'\n\nimport { Activity, TrendingUp } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n      icon: Activity,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Step</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"step\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-area-step.tsx",
+      "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n      icon: Activity,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Step</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"step\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-bar-active.json b/apps/web/public/r/styles/miami/chart-bar-active.json
index 19f84c76..d4730772 100644
--- a/apps/web/public/r/styles/miami/chart-bar-active.json
+++ b/apps/web/public/r/styles/miami/chart-bar-active.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-active",
   "type": "registry:block",
-  "description": "A bar chart with an active bar",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-active.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 187, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 275, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Active</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"browser\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value =>\n                        chartConfig[value as keyof typeof chartConfig]?.label}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"visitors\"\n                     strokeWidth={2}\n                     radius={8}\n                     activeIndex={2}\n                     activeBar={({ ...props }) => {\n                        return (\n                           <Rectangle\n                              {...props}\n                              fillOpacity={0.8}\n                              stroke={props.payload.fill}\n                              strokeDasharray={4}\n                              strokeDashoffset={4}\n                           />\n                        )\n                     }}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Active</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"browser\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) =>\n                        chartConfig[value as keyof typeof chartConfig]?.label\n                     }\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"visitors\"\n                     strokeWidth={2}\n                     radius={8}\n                     activeIndex={2}\n                     activeBar={({ ...props }) => {\n                        return (\n                           <Rectangle\n                              {...props}\n                              fillOpacity={0.8}\n                              stroke={props.payload.fill}\n                              strokeDasharray={4}\n                              strokeDashoffset={4}\n                           />\n                        )\n                     }}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-bar-default.json b/apps/web/public/r/styles/miami/chart-bar-default.json
index 19c94b92..9b9ab819 100644
--- a/apps/web/public/r/styles/miami/chart-bar-default.json
+++ b/apps/web/public/r/styles/miami/chart-bar-default.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-default",
   "type": "registry:block",
-  "description": "A bar chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-default.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     radius={8}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-bar-horizontal.json b/apps/web/public/r/styles/miami/chart-bar-horizontal.json
index 4d6d2dc4..0330ea2d 100644
--- a/apps/web/public/r/styles/miami/chart-bar-horizontal.json
+++ b/apps/web/public/r/styles/miami/chart-bar-horizontal.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-horizontal",
   "type": "registry:block",
-  "description": "A horizontal bar chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-horizontal.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, XAxis, YAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Horizontal</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     left: -20,\n                  }}\n               >\n                  <XAxis type=\"number\" dataKey=\"desktop\" hide />\n                  <YAxis\n                     dataKey=\"month\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-horizontal.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Horizontal</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     left: -20,\n                  }}\n               >\n                  <XAxis type=\"number\" dataKey=\"desktop\" hide />\n                  <YAxis\n                     dataKey=\"month\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     radius={5}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-bar-interactive.json b/apps/web/public/r/styles/miami/chart-bar-interactive.json
index 2d80e70b..041c0805 100644
--- a/apps/web/public/r/styles/miami/chart-bar-interactive.json
+++ b/apps/web/public/r/styles/miami/chart-bar-interactive.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-interactive",
   "type": "registry:block",
-  "description": "An interactive bar chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-interactive.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { date: '2024-04-01', desktop: 222, mobile: 150 },\n   { date: '2024-04-02', desktop: 97, mobile: 180 },\n   { date: '2024-04-03', desktop: 167, mobile: 120 },\n   { date: '2024-04-04', desktop: 242, mobile: 260 },\n   { date: '2024-04-05', desktop: 373, mobile: 290 },\n   { date: '2024-04-06', desktop: 301, mobile: 340 },\n   { date: '2024-04-07', desktop: 245, mobile: 180 },\n   { date: '2024-04-08', desktop: 409, mobile: 320 },\n   { date: '2024-04-09', desktop: 59, mobile: 110 },\n   { date: '2024-04-10', desktop: 261, mobile: 190 },\n   { date: '2024-04-11', desktop: 327, mobile: 350 },\n   { date: '2024-04-12', desktop: 292, mobile: 210 },\n   { date: '2024-04-13', desktop: 342, mobile: 380 },\n   { date: '2024-04-14', desktop: 137, mobile: 220 },\n   { date: '2024-04-15', desktop: 120, mobile: 170 },\n   { date: '2024-04-16', desktop: 138, mobile: 190 },\n   { date: '2024-04-17', desktop: 446, mobile: 360 },\n   { date: '2024-04-18', desktop: 364, mobile: 410 },\n   { date: '2024-04-19', desktop: 243, mobile: 180 },\n   { date: '2024-04-20', desktop: 89, mobile: 150 },\n   { date: '2024-04-21', desktop: 137, mobile: 200 },\n   { date: '2024-04-22', desktop: 224, mobile: 170 },\n   { date: '2024-04-23', desktop: 138, mobile: 230 },\n   { date: '2024-04-24', desktop: 387, mobile: 290 },\n   { date: '2024-04-25', desktop: 215, mobile: 250 },\n   { date: '2024-04-26', desktop: 75, mobile: 130 },\n   { date: '2024-04-27', desktop: 383, mobile: 420 },\n   { date: '2024-04-28', desktop: 122, mobile: 180 },\n   { date: '2024-04-29', desktop: 315, mobile: 240 },\n   { date: '2024-04-30', desktop: 454, mobile: 380 },\n   { date: '2024-05-01', desktop: 165, mobile: 220 },\n   { date: '2024-05-02', desktop: 293, mobile: 310 },\n   { date: '2024-05-03', desktop: 247, mobile: 190 },\n   { date: '2024-05-04', desktop: 385, mobile: 420 },\n   { date: '2024-05-05', desktop: 481, mobile: 390 },\n   { date: '2024-05-06', desktop: 498, mobile: 520 },\n   { date: '2024-05-07', desktop: 388, mobile: 300 },\n   { date: '2024-05-08', desktop: 149, mobile: 210 },\n   { date: '2024-05-09', desktop: 227, mobile: 180 },\n   { date: '2024-05-10', desktop: 293, mobile: 330 },\n   { date: '2024-05-11', desktop: 335, mobile: 270 },\n   { date: '2024-05-12', desktop: 197, mobile: 240 },\n   { date: '2024-05-13', desktop: 197, mobile: 160 },\n   { date: '2024-05-14', desktop: 448, mobile: 490 },\n   { date: '2024-05-15', desktop: 473, mobile: 380 },\n   { date: '2024-05-16', desktop: 338, mobile: 400 },\n   { date: '2024-05-17', desktop: 499, mobile: 420 },\n   { date: '2024-05-18', desktop: 315, mobile: 350 },\n   { date: '2024-05-19', desktop: 235, mobile: 180 },\n   { date: '2024-05-20', desktop: 177, mobile: 230 },\n   { date: '2024-05-21', desktop: 82, mobile: 140 },\n   { date: '2024-05-22', desktop: 81, mobile: 120 },\n   { date: '2024-05-23', desktop: 252, mobile: 290 },\n   { date: '2024-05-24', desktop: 294, mobile: 220 },\n   { date: '2024-05-25', desktop: 201, mobile: 250 },\n   { date: '2024-05-26', desktop: 213, mobile: 170 },\n   { date: '2024-05-27', desktop: 420, mobile: 460 },\n   { date: '2024-05-28', desktop: 233, mobile: 190 },\n   { date: '2024-05-29', desktop: 78, mobile: 130 },\n   { date: '2024-05-30', desktop: 340, mobile: 280 },\n   { date: '2024-05-31', desktop: 178, mobile: 230 },\n   { date: '2024-06-01', desktop: 178, mobile: 200 },\n   { date: '2024-06-02', desktop: 470, mobile: 410 },\n   { date: '2024-06-03', desktop: 103, mobile: 160 },\n   { date: '2024-06-04', desktop: 439, mobile: 380 },\n   { date: '2024-06-05', desktop: 88, mobile: 140 },\n   { date: '2024-06-06', desktop: 294, mobile: 250 },\n   { date: '2024-06-07', desktop: 323, mobile: 370 },\n   { date: '2024-06-08', desktop: 385, mobile: 320 },\n   { date: '2024-06-09', desktop: 438, mobile: 480 },\n   { date: '2024-06-10', desktop: 155, mobile: 200 },\n   { date: '2024-06-11', desktop: 92, mobile: 150 },\n   { date: '2024-06-12', desktop: 492, mobile: 420 },\n   { date: '2024-06-13', desktop: 81, mobile: 130 },\n   { date: '2024-06-14', desktop: 426, mobile: 380 },\n   { date: '2024-06-15', desktop: 307, mobile: 350 },\n   { date: '2024-06-16', desktop: 371, mobile: 310 },\n   { date: '2024-06-17', desktop: 475, mobile: 520 },\n   { date: '2024-06-18', desktop: 107, mobile: 170 },\n   { date: '2024-06-19', desktop: 341, mobile: 290 },\n   { date: '2024-06-20', desktop: 408, mobile: 450 },\n   { date: '2024-06-21', desktop: 169, mobile: 210 },\n   { date: '2024-06-22', desktop: 317, mobile: 270 },\n   { date: '2024-06-23', desktop: 480, mobile: 530 },\n   { date: '2024-06-24', desktop: 132, mobile: 180 },\n   { date: '2024-06-25', desktop: 141, mobile: 190 },\n   { date: '2024-06-26', desktop: 434, mobile: 380 },\n   { date: '2024-06-27', desktop: 448, mobile: 490 },\n   { date: '2024-06-28', desktop: 149, mobile: 200 },\n   { date: '2024-06-29', desktop: 103, mobile: 160 },\n   { date: '2024-06-30', desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   views: {\n      label: 'Page Views',\n   },\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [activeChart, setActiveChart]\n    = React.useState<keyof typeof chartConfig>('desktop')\n\n   const total = React.useMemo(\n      () => ({\n         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n      }),\n      [],\n   )\n\n   return (\n      <Card>\n         <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n            <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n               <CardTitle>Bar Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <div className=\"flex\">\n               {['desktop', 'mobile'].map((key) => {\n                  const chart = key as keyof typeof chartConfig\n                  return (\n                     <button\n                        key={chart}\n                        data-active={activeChart === chart}\n                        className=\"data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                        onClick={() => setActiveChart(chart)}\n                     >\n                        <span className=\"text-muted-foreground text-xs\">\n                           {chartConfig[chart].label}\n                        </span>\n                        <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                           {total[key as keyof typeof total].toLocaleString()}\n                        </span>\n                     </button>\n                  )\n               })}\n            </div>\n         </CardHeader>\n         <CardContent className=\"px-2 sm:p-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString('en-US', {\n                           month: 'short',\n                           day: 'numeric',\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     content={(\n                        <ChartTooltipContent\n                           className=\"w-[150px]\"\n                           nameKey=\"views\"\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString('en-US', {\n                                 month: 'short',\n                                 day: 'numeric',\n                                 year: 'numeric',\n                              })\n                           }}\n                        />\n                     )}\n                  />\n                  <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n   { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n   { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n   { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n   { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n   { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n   { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n   { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n   { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n   { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n   { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n   { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n   { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n   { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n   { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n   { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n   { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n   { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n   { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n   { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n   { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n   { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n   { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n   { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n   { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n   { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n   { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n   { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n   { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n   { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n   { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n   { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n   { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n   { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n   { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n   { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n   { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n   { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n   { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n   { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n   { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n   { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n   { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n   { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n   { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n   { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n   { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n   { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n   { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n   { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n   { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n   { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n   { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n   { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n   { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n   { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n   { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n   { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n   { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n   { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n   { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n   { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n   { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n   { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n   { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n   { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n   { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n   { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n   { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n   { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n   { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n   { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n   { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n   { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n   { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n   { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n   { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n   { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n   { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n   { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n   { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n   { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n   { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n   { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n   { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n   { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n   { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n   { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n   { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   views: {\n      label: \"Page Views\",\n   },\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [activeChart, setActiveChart] =\n      React.useState<keyof typeof chartConfig>(\"desktop\")\n\n   const total = React.useMemo(\n      () => ({\n         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n      }),\n      [],\n   )\n\n   return (\n      <Card>\n         <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n            <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n               <CardTitle>Bar Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <div className=\"flex\">\n               {[\"desktop\", \"mobile\"].map((key) => {\n                  const chart = key as keyof typeof chartConfig\n                  return (\n                     <button\n                        key={chart}\n                        data-active={activeChart === chart}\n                        className=\"relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                        onClick={() => setActiveChart(chart)}\n                     >\n                        <span className=\"text-xs text-muted-foreground\">\n                           {chartConfig[chart].label}\n                        </span>\n                        <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                           {total[key as keyof typeof total].toLocaleString()}\n                        </span>\n                     </button>\n                  )\n               })}\n            </div>\n         </CardHeader>\n         <CardContent className=\"px-2 sm:p-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString(\"en-US\", {\n                           month: \"short\",\n                           day: \"numeric\",\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           className=\"w-[150px]\"\n                           nameKey=\"views\"\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    month: \"short\",\n                                    day: \"numeric\",\n                                    year: \"numeric\",\n                                 },\n                              )\n                           }}\n                        />\n                     }\n                  />\n                  <Bar\n                     dataKey={activeChart}\n                     fill={`var(--color-${activeChart})`}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-bar-label-custom.json b/apps/web/public/r/styles/miami/chart-bar-label-custom.json
index da1ae644..f14e3026 100644
--- a/apps/web/public/r/styles/miami/chart-bar-label-custom.json
+++ b/apps/web/public/r/styles/miami/chart-bar-label-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-label-custom",
   "type": "registry:block",
-  "description": "A bar chart with a custom label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-label-custom.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n   label: {\n      color: 'hsl(var(--background))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     right: 16,\n                  }}\n               >\n                  <CartesianGrid horizontal={false} />\n                  <YAxis\n                     dataKey=\"month\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value => value.slice(0, 3)}\n                     hide\n                  />\n                  <XAxis dataKey=\"desktop\" type=\"number\" hide />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     layout=\"vertical\"\n                     fill=\"var(--color-desktop)\"\n                     radius={4}\n                  >\n                     <LabelList\n                        dataKey=\"month\"\n                        position=\"insideLeft\"\n                        offset={8}\n                        className=\"fill-[--color-label]\"\n                        fontSize={12}\n                     />\n                     <LabelList\n                        dataKey=\"desktop\"\n                        position=\"right\"\n                        offset={8}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   label: {\n      color: \"hsl(var(--background))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     right: 16,\n                  }}\n               >\n                  <CartesianGrid horizontal={false} />\n                  <YAxis\n                     dataKey=\"month\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                     hide\n                  />\n                  <XAxis dataKey=\"desktop\" type=\"number\" hide />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     layout=\"vertical\"\n                     fill=\"var(--color-desktop)\"\n                     radius={4}\n                  >\n                     <LabelList\n                        dataKey=\"month\"\n                        position=\"insideLeft\"\n                        offset={8}\n                        className=\"fill-[--color-label]\"\n                        fontSize={12}\n                     />\n                     <LabelList\n                        dataKey=\"desktop\"\n                        position=\"right\"\n                        offset={8}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-bar-label.json b/apps/web/public/r/styles/miami/chart-bar-label.json
index 418ca759..83e15e56 100644
--- a/apps/web/public/r/styles/miami/chart-bar-label.json
+++ b/apps/web/public/r/styles/miami/chart-bar-label.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-label",
   "type": "registry:block",
-  "description": "A bar chart with a label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-label.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 20,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 20,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-bar-mixed.json b/apps/web/public/r/styles/miami/chart-bar-mixed.json
index e45dc4d6..545bdcbd 100644
--- a/apps/web/public/r/styles/miami/chart-bar-mixed.json
+++ b/apps/web/public/r/styles/miami/chart-bar-mixed.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-mixed",
   "type": "registry:block",
-  "description": "A mixed bar chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-mixed.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, XAxis, YAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Mixed</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     left: 0,\n                  }}\n               >\n                  <YAxis\n                     dataKey=\"browser\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value =>\n                        chartConfig[value as keyof typeof chartConfig]?.label}\n                  />\n                  <XAxis dataKey=\"visitors\" type=\"number\" hide />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-mixed.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Mixed</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     left: 0,\n                  }}\n               >\n                  <YAxis\n                     dataKey=\"browser\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) =>\n                        chartConfig[value as keyof typeof chartConfig]?.label\n                     }\n                  />\n                  <XAxis dataKey=\"visitors\" type=\"number\" hide />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-bar-multiple.json b/apps/web/public/r/styles/miami/chart-bar-multiple.json
index 075981e7..2de0d62b 100644
--- a/apps/web/public/r/styles/miami/chart-bar-multiple.json
+++ b/apps/web/public/r/styles/miami/chart-bar-multiple.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-multiple",
   "type": "registry:block",
-  "description": "A multiple bar chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-multiple.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Multiple</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dashed\" />}\n                  />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n                  <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Multiple</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dashed\" />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     radius={4}\n                  />\n                  <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-bar-negative.json b/apps/web/public/r/styles/miami/chart-bar-negative.json
index b1301846..88468b34 100644
--- a/apps/web/public/r/styles/miami/chart-bar-negative.json
+++ b/apps/web/public/r/styles/miami/chart-bar-negative.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-negative",
   "type": "registry:block",
-  "description": "A bar chart with negative values",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-negative.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', visitors: 186 },\n   { month: 'February', visitors: 205 },\n   { month: 'March', visitors: -207 },\n   { month: 'April', visitors: 173 },\n   { month: 'May', visitors: -209 },\n   { month: 'June', visitors: 214 },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Negative</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel hideIndicator />}\n                  />\n                  <Bar dataKey=\"visitors\">\n                     <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n                     {chartData.map(item => (\n                        <Cell\n                           key={item.month}\n                           fill={\n                              item.visitors > 0\n                                 ? 'hsl(var(--chart-1))'\n                                 : 'hsl(var(--chart-2))'\n                           }\n                        />\n                     ))}\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-negative.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", visitors: 186 },\n   { month: \"February\", visitors: 205 },\n   { month: \"March\", visitors: -207 },\n   { month: \"April\", visitors: 173 },\n   { month: \"May\", visitors: -209 },\n   { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Negative</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel hideIndicator />}\n                  />\n                  <Bar dataKey=\"visitors\">\n                     <LabelList\n                        position=\"top\"\n                        dataKey=\"month\"\n                        fillOpacity={1}\n                     />\n                     {chartData.map((item) => (\n                        <Cell\n                           key={item.month}\n                           fill={\n                              item.visitors > 0\n                                 ? \"hsl(var(--chart-1))\"\n                                 : \"hsl(var(--chart-2))\"\n                           }\n                        />\n                     ))}\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-bar-stacked.json b/apps/web/public/r/styles/miami/chart-bar-stacked.json
index d036688c..0cb72bd8 100644
--- a/apps/web/public/r/styles/miami/chart-bar-stacked.json
+++ b/apps/web/public/r/styles/miami/chart-bar-stacked.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-bar-stacked",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-stacked.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <ChartLegend content={<ChartLegendContent />} />\n                  <Bar\n                     dataKey=\"desktop\"\n                     stackId=\"a\"\n                     fill=\"var(--color-desktop)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"mobile\"\n                     stackId=\"a\"\n                     fill=\"var(--color-mobile)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-bar-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <ChartLegend content={<ChartLegendContent />} />\n                  <Bar\n                     dataKey=\"desktop\"\n                     stackId=\"a\"\n                     fill=\"var(--color-desktop)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"mobile\"\n                     stackId=\"a\"\n                     fill=\"var(--color-mobile)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-line-default.json b/apps/web/public/r/styles/miami/chart-line-default.json
index ba2e4348..5014cd04 100644
--- a/apps/web/public/r/styles/miami/chart-line-default.json
+++ b/apps/web/public/r/styles/miami/chart-line-default.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-default",
   "type": "registry:block",
-  "description": "A line chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-default.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-line-dots-colors.json b/apps/web/public/r/styles/miami/chart-line-dots-colors.json
index d3cd4148..d9ab17f2 100644
--- a/apps/web/public/r/styles/miami/chart-line-dots-colors.json
+++ b/apps/web/public/r/styles/miami/chart-line-dots-colors.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-dots-colors",
   "type": "registry:block",
-  "description": "A line chart with dots and colors",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots-colors.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Dot, Line, LineChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n      color: 'hsl(var(--chart-2))',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Dots Colors</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 24,\n                     left: 24,\n                     right: 24,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={(\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           nameKey=\"visitors\"\n                           hideLabel\n                        />\n                     )}\n                  />\n                  <Line\n                     dataKey=\"visitors\"\n                     type=\"natural\"\n                     stroke=\"var(--color-visitors)\"\n                     strokeWidth={2}\n                     dot={({ payload, ...props }) => {\n                        return (\n                           <Dot\n                              key={payload.browser}\n                              r={5}\n                              cx={props.cx}\n                              cy={props.cy}\n                              fill={payload.fill}\n                              stroke={payload.fill}\n                           />\n                        )\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-dots-colors.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Dots Colors</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 24,\n                     left: 24,\n                     right: 24,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           nameKey=\"visitors\"\n                           hideLabel\n                        />\n                     }\n                  />\n                  <Line\n                     dataKey=\"visitors\"\n                     type=\"natural\"\n                     stroke=\"var(--color-visitors)\"\n                     strokeWidth={2}\n                     dot={({ payload, ...props }) => {\n                        return (\n                           <Dot\n                              key={payload.browser}\n                              r={5}\n                              cx={props.cx}\n                              cy={props.cy}\n                              fill={payload.fill}\n                              stroke={payload.fill}\n                           />\n                        )\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-line-dots-custom.json b/apps/web/public/r/styles/miami/chart-line-dots-custom.json
index e732a298..0b79a997 100644
--- a/apps/web/public/r/styles/miami/chart-line-dots-custom.json
+++ b/apps/web/public/r/styles/miami/chart-line-dots-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-dots-custom",
   "type": "registry:block",
-  "description": "A line chart with custom dots",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots-custom.tsx",
-      "content": "'use client'\n\nimport { GitCommitVertical, TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Custom Dots</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={({ cx, cy, payload }) => {\n                        const r = 24\n                        return (\n                           <GitCommitVertical\n                              key={payload.month}\n                              x={cx - r / 2}\n                              y={cy - r / 2}\n                              width={r}\n                              height={r}\n                              fill=\"hsl(var(--background))\"\n                              stroke=\"var(--color-desktop)\"\n                           />\n                        )\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-dots-custom.tsx",
+      "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Custom Dots</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={({ cx, cy, payload }) => {\n                        const r = 24\n                        return (\n                           <GitCommitVertical\n                              key={payload.month}\n                              x={cx - r / 2}\n                              y={cy - r / 2}\n                              width={r}\n                              height={r}\n                              fill=\"hsl(var(--background))\"\n                              stroke=\"var(--color-desktop)\"\n                           />\n                        )\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-line-dots.json b/apps/web/public/r/styles/miami/chart-line-dots.json
index 8ad081f4..63bab28e 100644
--- a/apps/web/public/r/styles/miami/chart-line-dots.json
+++ b/apps/web/public/r/styles/miami/chart-line-dots.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-dots",
   "type": "registry:block",
-  "description": "A line chart with dots",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Dots</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: 'var(--color-desktop)',\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Dots</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: \"var(--color-desktop)\",\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-line-interactive.json b/apps/web/public/r/styles/miami/chart-line-interactive.json
index 6e446a97..b961b657 100644
--- a/apps/web/public/r/styles/miami/chart-line-interactive.json
+++ b/apps/web/public/r/styles/miami/chart-line-interactive.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-interactive",
   "type": "registry:block",
-  "description": "An interactive line chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-interactive.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { date: '2024-04-01', desktop: 222, mobile: 150 },\n   { date: '2024-04-02', desktop: 97, mobile: 180 },\n   { date: '2024-04-03', desktop: 167, mobile: 120 },\n   { date: '2024-04-04', desktop: 242, mobile: 260 },\n   { date: '2024-04-05', desktop: 373, mobile: 290 },\n   { date: '2024-04-06', desktop: 301, mobile: 340 },\n   { date: '2024-04-07', desktop: 245, mobile: 180 },\n   { date: '2024-04-08', desktop: 409, mobile: 320 },\n   { date: '2024-04-09', desktop: 59, mobile: 110 },\n   { date: '2024-04-10', desktop: 261, mobile: 190 },\n   { date: '2024-04-11', desktop: 327, mobile: 350 },\n   { date: '2024-04-12', desktop: 292, mobile: 210 },\n   { date: '2024-04-13', desktop: 342, mobile: 380 },\n   { date: '2024-04-14', desktop: 137, mobile: 220 },\n   { date: '2024-04-15', desktop: 120, mobile: 170 },\n   { date: '2024-04-16', desktop: 138, mobile: 190 },\n   { date: '2024-04-17', desktop: 446, mobile: 360 },\n   { date: '2024-04-18', desktop: 364, mobile: 410 },\n   { date: '2024-04-19', desktop: 243, mobile: 180 },\n   { date: '2024-04-20', desktop: 89, mobile: 150 },\n   { date: '2024-04-21', desktop: 137, mobile: 200 },\n   { date: '2024-04-22', desktop: 224, mobile: 170 },\n   { date: '2024-04-23', desktop: 138, mobile: 230 },\n   { date: '2024-04-24', desktop: 387, mobile: 290 },\n   { date: '2024-04-25', desktop: 215, mobile: 250 },\n   { date: '2024-04-26', desktop: 75, mobile: 130 },\n   { date: '2024-04-27', desktop: 383, mobile: 420 },\n   { date: '2024-04-28', desktop: 122, mobile: 180 },\n   { date: '2024-04-29', desktop: 315, mobile: 240 },\n   { date: '2024-04-30', desktop: 454, mobile: 380 },\n   { date: '2024-05-01', desktop: 165, mobile: 220 },\n   { date: '2024-05-02', desktop: 293, mobile: 310 },\n   { date: '2024-05-03', desktop: 247, mobile: 190 },\n   { date: '2024-05-04', desktop: 385, mobile: 420 },\n   { date: '2024-05-05', desktop: 481, mobile: 390 },\n   { date: '2024-05-06', desktop: 498, mobile: 520 },\n   { date: '2024-05-07', desktop: 388, mobile: 300 },\n   { date: '2024-05-08', desktop: 149, mobile: 210 },\n   { date: '2024-05-09', desktop: 227, mobile: 180 },\n   { date: '2024-05-10', desktop: 293, mobile: 330 },\n   { date: '2024-05-11', desktop: 335, mobile: 270 },\n   { date: '2024-05-12', desktop: 197, mobile: 240 },\n   { date: '2024-05-13', desktop: 197, mobile: 160 },\n   { date: '2024-05-14', desktop: 448, mobile: 490 },\n   { date: '2024-05-15', desktop: 473, mobile: 380 },\n   { date: '2024-05-16', desktop: 338, mobile: 400 },\n   { date: '2024-05-17', desktop: 499, mobile: 420 },\n   { date: '2024-05-18', desktop: 315, mobile: 350 },\n   { date: '2024-05-19', desktop: 235, mobile: 180 },\n   { date: '2024-05-20', desktop: 177, mobile: 230 },\n   { date: '2024-05-21', desktop: 82, mobile: 140 },\n   { date: '2024-05-22', desktop: 81, mobile: 120 },\n   { date: '2024-05-23', desktop: 252, mobile: 290 },\n   { date: '2024-05-24', desktop: 294, mobile: 220 },\n   { date: '2024-05-25', desktop: 201, mobile: 250 },\n   { date: '2024-05-26', desktop: 213, mobile: 170 },\n   { date: '2024-05-27', desktop: 420, mobile: 460 },\n   { date: '2024-05-28', desktop: 233, mobile: 190 },\n   { date: '2024-05-29', desktop: 78, mobile: 130 },\n   { date: '2024-05-30', desktop: 340, mobile: 280 },\n   { date: '2024-05-31', desktop: 178, mobile: 230 },\n   { date: '2024-06-01', desktop: 178, mobile: 200 },\n   { date: '2024-06-02', desktop: 470, mobile: 410 },\n   { date: '2024-06-03', desktop: 103, mobile: 160 },\n   { date: '2024-06-04', desktop: 439, mobile: 380 },\n   { date: '2024-06-05', desktop: 88, mobile: 140 },\n   { date: '2024-06-06', desktop: 294, mobile: 250 },\n   { date: '2024-06-07', desktop: 323, mobile: 370 },\n   { date: '2024-06-08', desktop: 385, mobile: 320 },\n   { date: '2024-06-09', desktop: 438, mobile: 480 },\n   { date: '2024-06-10', desktop: 155, mobile: 200 },\n   { date: '2024-06-11', desktop: 92, mobile: 150 },\n   { date: '2024-06-12', desktop: 492, mobile: 420 },\n   { date: '2024-06-13', desktop: 81, mobile: 130 },\n   { date: '2024-06-14', desktop: 426, mobile: 380 },\n   { date: '2024-06-15', desktop: 307, mobile: 350 },\n   { date: '2024-06-16', desktop: 371, mobile: 310 },\n   { date: '2024-06-17', desktop: 475, mobile: 520 },\n   { date: '2024-06-18', desktop: 107, mobile: 170 },\n   { date: '2024-06-19', desktop: 341, mobile: 290 },\n   { date: '2024-06-20', desktop: 408, mobile: 450 },\n   { date: '2024-06-21', desktop: 169, mobile: 210 },\n   { date: '2024-06-22', desktop: 317, mobile: 270 },\n   { date: '2024-06-23', desktop: 480, mobile: 530 },\n   { date: '2024-06-24', desktop: 132, mobile: 180 },\n   { date: '2024-06-25', desktop: 141, mobile: 190 },\n   { date: '2024-06-26', desktop: 434, mobile: 380 },\n   { date: '2024-06-27', desktop: 448, mobile: 490 },\n   { date: '2024-06-28', desktop: 149, mobile: 200 },\n   { date: '2024-06-29', desktop: 103, mobile: 160 },\n   { date: '2024-06-30', desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   views: {\n      label: 'Page Views',\n   },\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [activeChart, setActiveChart]\n    = React.useState<keyof typeof chartConfig>('desktop')\n\n   const total = React.useMemo(\n      () => ({\n         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n      }),\n      [],\n   )\n\n   return (\n      <Card>\n         <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n            <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n               <CardTitle>Line Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <div className=\"flex\">\n               {['desktop', 'mobile'].map((key) => {\n                  const chart = key as keyof typeof chartConfig\n                  return (\n                     <button\n                        key={chart}\n                        data-active={activeChart === chart}\n                        className=\"data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                        onClick={() => setActiveChart(chart)}\n                     >\n                        <span className=\"text-muted-foreground text-xs\">\n                           {chartConfig[chart].label}\n                        </span>\n                        <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                           {total[key as keyof typeof total].toLocaleString()}\n                        </span>\n                     </button>\n                  )\n               })}\n            </div>\n         </CardHeader>\n         <CardContent className=\"px-2 sm:p-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString('en-US', {\n                           month: 'short',\n                           day: 'numeric',\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     content={(\n                        <ChartTooltipContent\n                           className=\"w-[150px]\"\n                           nameKey=\"views\"\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString('en-US', {\n                                 month: 'short',\n                                 day: 'numeric',\n                                 year: 'numeric',\n                              })\n                           }}\n                        />\n                     )}\n                  />\n                  <Line\n                     dataKey={activeChart}\n                     type=\"monotone\"\n                     stroke={`var(--color-${activeChart})`}\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n   { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n   { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n   { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n   { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n   { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n   { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n   { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n   { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n   { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n   { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n   { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n   { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n   { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n   { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n   { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n   { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n   { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n   { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n   { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n   { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n   { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n   { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n   { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n   { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n   { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n   { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n   { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n   { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n   { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n   { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n   { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n   { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n   { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n   { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n   { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n   { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n   { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n   { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n   { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n   { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n   { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n   { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n   { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n   { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n   { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n   { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n   { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n   { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n   { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n   { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n   { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n   { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n   { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n   { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n   { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n   { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n   { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n   { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n   { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n   { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n   { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n   { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n   { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n   { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n   { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n   { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n   { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n   { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n   { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n   { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n   { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n   { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n   { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n   { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n   { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n   { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n   { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n   { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n   { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n   { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n   { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n   { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n   { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n   { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n   { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n   { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n   { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n   { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   views: {\n      label: \"Page Views\",\n   },\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [activeChart, setActiveChart] =\n      React.useState<keyof typeof chartConfig>(\"desktop\")\n\n   const total = React.useMemo(\n      () => ({\n         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n      }),\n      [],\n   )\n\n   return (\n      <Card>\n         <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n            <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n               <CardTitle>Line Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <div className=\"flex\">\n               {[\"desktop\", \"mobile\"].map((key) => {\n                  const chart = key as keyof typeof chartConfig\n                  return (\n                     <button\n                        key={chart}\n                        data-active={activeChart === chart}\n                        className=\"flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                        onClick={() => setActiveChart(chart)}\n                     >\n                        <span className=\"text-xs text-muted-foreground\">\n                           {chartConfig[chart].label}\n                        </span>\n                        <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                           {total[key as keyof typeof total].toLocaleString()}\n                        </span>\n                     </button>\n                  )\n               })}\n            </div>\n         </CardHeader>\n         <CardContent className=\"px-2 sm:p-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString(\"en-US\", {\n                           month: \"short\",\n                           day: \"numeric\",\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           className=\"w-[150px]\"\n                           nameKey=\"views\"\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    month: \"short\",\n                                    day: \"numeric\",\n                                    year: \"numeric\",\n                                 },\n                              )\n                           }}\n                        />\n                     }\n                  />\n                  <Line\n                     dataKey={activeChart}\n                     type=\"monotone\"\n                     stroke={`var(--color-${activeChart})`}\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-line-label-custom.json b/apps/web/public/r/styles/miami/chart-line-label-custom.json
index 3b6b49ad..40ce91ef 100644
--- a/apps/web/public/r/styles/miami/chart-line-label-custom.json
+++ b/apps/web/public/r/styles/miami/chart-line-label-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-label-custom",
   "type": "registry:block",
-  "description": "A line chart with a custom label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-label-custom.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, LabelList, Line, LineChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n      color: 'hsl(var(--chart-2))',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 24,\n                     left: 24,\n                     right: 24,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={(\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           nameKey=\"visitors\"\n                           hideLabel\n                        />\n                     )}\n                  />\n                  <Line\n                     dataKey=\"visitors\"\n                     type=\"natural\"\n                     stroke=\"var(--color-visitors)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: 'var(--color-visitors)',\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  >\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                        dataKey=\"browser\"\n                        formatter={(value: keyof typeof chartConfig) =>\n                           chartConfig[value]?.label}\n                     />\n                  </Line>\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 24,\n                     left: 24,\n                     right: 24,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           nameKey=\"visitors\"\n                           hideLabel\n                        />\n                     }\n                  />\n                  <Line\n                     dataKey=\"visitors\"\n                     type=\"natural\"\n                     stroke=\"var(--color-visitors)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: \"var(--color-visitors)\",\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  >\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                        dataKey=\"browser\"\n                        formatter={(value: keyof typeof chartConfig) =>\n                           chartConfig[value]?.label\n                        }\n                     />\n                  </Line>\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-line-label.json b/apps/web/public/r/styles/miami/chart-line-label.json
index 0a1fa5f0..24da4f41 100644
--- a/apps/web/public/r/styles/miami/chart-line-label.json
+++ b/apps/web/public/r/styles/miami/chart-line-label.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-label",
   "type": "registry:block",
-  "description": "A line chart with a label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-label.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 20,\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: 'var(--color-desktop)',\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  >\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Line>\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 20,\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: \"var(--color-desktop)\",\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  >\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Line>\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-line-linear.json b/apps/web/public/r/styles/miami/chart-line-linear.json
index a70670ca..27646467 100644
--- a/apps/web/public/r/styles/miami/chart-line-linear.json
+++ b/apps/web/public/r/styles/miami/chart-line-linear.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-linear",
   "type": "registry:block",
-  "description": "A linear line chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-linear.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Linear</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"linear\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Linear</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"linear\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-line-multiple.json b/apps/web/public/r/styles/miami/chart-line-multiple.json
index cc7df262..62b5583c 100644
--- a/apps/web/public/r/styles/miami/chart-line-multiple.json
+++ b/apps/web/public/r/styles/miami/chart-line-multiple.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-multiple",
   "type": "registry:block",
-  "description": "A multiple line chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-multiple.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Multiple</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"monotone\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n                  <Line\n                     dataKey=\"mobile\"\n                     type=\"monotone\"\n                     stroke=\"var(--color-mobile)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month\n                     {' '}\n                     <TrendingUp className=\"size-4\" />\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                     Showing total visitors for the last 6 months\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Multiple</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"monotone\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n                  <Line\n                     dataKey=\"mobile\"\n                     type=\"monotone\"\n                     stroke=\"var(--color-mobile)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     Showing total visitors for the last 6 months\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-line-step.json b/apps/web/public/r/styles/miami/chart-line-step.json
index 27136f7d..370551eb 100644
--- a/apps/web/public/r/styles/miami/chart-line-step.json
+++ b/apps/web/public/r/styles/miami/chart-line-step.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-line-step",
   "type": "registry:block",
-  "description": "A line chart with step",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-step.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { CartesianGrid, Line, LineChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 73 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Step</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={value => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"step\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-line-step.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Step</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"step\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-pie-donut-active.json b/apps/web/public/r/styles/miami/chart-pie-donut-active.json
index 777e2417..19782517 100644
--- a/apps/web/public/r/styles/miami/chart-pie-donut-active.json
+++ b/apps/web/public/r/styles/miami/chart-pie-donut-active.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-donut-active",
   "type": "registry:block",
-  "description": "A donut chart with an active sector",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut-active.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Label, Pie, PieChart, Sector } from 'recharts'\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut Active</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                     activeIndex={0}\n                     activeShape={({\n                        outerRadius = 0,\n                        ...props\n                     }: PieSectorDataItem) => (\n                        <Sector {...props} outerRadius={outerRadius + 10} />\n                     )}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-donut-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut Active</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                     activeIndex={0}\n                     activeShape={({\n                        outerRadius = 0,\n                        ...props\n                     }: PieSectorDataItem) => (\n                        <Sector {...props} outerRadius={outerRadius + 10} />\n                     )}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-pie-donut-text.json b/apps/web/public/r/styles/miami/chart-pie-donut-text.json
index 08dbcb19..dfacb1a5 100644
--- a/apps/web/public/r/styles/miami/chart-pie-donut-text.json
+++ b/apps/web/public/r/styles/miami/chart-pie-donut-text.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-donut-text",
   "type": "registry:block",
-  "description": "A donut chart with text",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut-text.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { TrendingUp } from 'lucide-react'\nimport { Label, Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 287, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 190, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const totalVisitors = React.useMemo(() => {\n      return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n   }, [])\n\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut with Text</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-3xl font-bold\"\n                                    >\n                                       {totalVisitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-donut-text.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const totalVisitors = React.useMemo(() => {\n      return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n   }, [])\n\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut with Text</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-3xl font-bold\"\n                                    >\n                                       {totalVisitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-pie-donut.json b/apps/web/public/r/styles/miami/chart-pie-donut.json
index c9a7e9c2..0b679149 100644
--- a/apps/web/public/r/styles/miami/chart-pie-donut.json
+++ b/apps/web/public/r/styles/miami/chart-pie-donut.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-donut",
   "type": "registry:block",
-  "description": "A donut chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-donut.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-pie-interactive.json b/apps/web/public/r/styles/miami/chart-pie-interactive.json
index 3d7d3c9c..f3445e27 100644
--- a/apps/web/public/r/styles/miami/chart-pie-interactive.json
+++ b/apps/web/public/r/styles/miami/chart-pie-interactive.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-interactive",
   "type": "registry:block",
-  "description": "An interactive pie chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-interactive.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Label, Pie, PieChart, Sector } from 'recharts'\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartStyle,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/miami/ui/select'\nconst desktopData = [\n   { month: 'january', desktop: 186, fill: 'var(--color-january)' },\n   { month: 'february', desktop: 305, fill: 'var(--color-february)' },\n   { month: 'march', desktop: 237, fill: 'var(--color-march)' },\n   { month: 'april', desktop: 173, fill: 'var(--color-april)' },\n   { month: 'may', desktop: 209, fill: 'var(--color-may)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   desktop: {\n      label: 'Desktop',\n   },\n   mobile: {\n      label: 'Mobile',\n   },\n   january: {\n      label: 'January',\n      color: 'hsl(var(--chart-1))',\n   },\n   february: {\n      label: 'February',\n      color: 'hsl(var(--chart-2))',\n   },\n   march: {\n      label: 'March',\n      color: 'hsl(var(--chart-3))',\n   },\n   april: {\n      label: 'April',\n      color: 'hsl(var(--chart-4))',\n   },\n   may: {\n      label: 'May',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const id = 'pie-interactive'\n   const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n   const activeIndex = React.useMemo(\n      () => desktopData.findIndex(item => item.month === activeMonth),\n      [activeMonth],\n   )\n   const months = React.useMemo(() => desktopData.map(item => item.month), [])\n\n   return (\n      <Card data-chart={id} className=\"flex flex-col\">\n         <ChartStyle id={id} config={chartConfig} />\n         <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n            <div className=\"grid gap-1\">\n               <CardTitle>Pie Chart - Interactive</CardTitle>\n               <CardDescription>January - June 2024</CardDescription>\n            </div>\n            <Select value={activeMonth} onValueChange={setActiveMonth}>\n               <SelectTrigger\n                  className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n                  aria-label=\"Select a value\"\n               >\n                  <SelectValue placeholder=\"Select month\" />\n               </SelectTrigger>\n               <SelectContent align=\"end\" className=\"rounded-xl\">\n                  {months.map((key) => {\n                     const config = chartConfig[key as keyof typeof chartConfig]\n\n                     if (!config) {\n                        return null\n                     }\n\n                     return (\n                        <SelectItem\n                           key={key}\n                           value={key}\n                           className=\"rounded-lg [&_span]:flex\"\n                        >\n                           <div className=\"flex items-center gap-2 text-xs\">\n                              <span\n                                 className=\"flex size-3 shrink-0 rounded-sm\"\n                                 style={{\n                                    backgroundColor: `var(--color-${key})`,\n                                 }}\n                              />\n                              {config?.label}\n                           </div>\n                        </SelectItem>\n                     )\n                  })}\n               </SelectContent>\n            </Select>\n         </CardHeader>\n         <CardContent className=\"flex flex-1 justify-center pb-0\">\n            <ChartContainer\n               id={id}\n               config={chartConfig}\n               className=\"mx-auto aspect-square w-full max-w-[300px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={desktopData}\n                     dataKey=\"desktop\"\n                     nameKey=\"month\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                     activeIndex={activeIndex}\n                     activeShape={({\n                        outerRadius = 0,\n                        ...props\n                     }: PieSectorDataItem) => (\n                        <g>\n                           <Sector {...props} outerRadius={outerRadius + 10} />\n                           <Sector\n                              {...props}\n                              outerRadius={outerRadius + 25}\n                              innerRadius={outerRadius + 12}\n                           />\n                        </g>\n                     )}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-3xl font-bold\"\n                                    >\n                                       {desktopData[activeIndex].desktop.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartStyle,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/miami/ui/select\"\nconst desktopData = [\n   { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n   { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n   { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n   { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n   { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   desktop: {\n      label: \"Desktop\",\n   },\n   mobile: {\n      label: \"Mobile\",\n   },\n   january: {\n      label: \"January\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   february: {\n      label: \"February\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   march: {\n      label: \"March\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   april: {\n      label: \"April\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   may: {\n      label: \"May\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const id = \"pie-interactive\"\n   const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n   const activeIndex = React.useMemo(\n      () => desktopData.findIndex((item) => item.month === activeMonth),\n      [activeMonth],\n   )\n   const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n   return (\n      <Card data-chart={id} className=\"flex flex-col\">\n         <ChartStyle id={id} config={chartConfig} />\n         <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n            <div className=\"grid gap-1\">\n               <CardTitle>Pie Chart - Interactive</CardTitle>\n               <CardDescription>January - June 2024</CardDescription>\n            </div>\n            <Select value={activeMonth} onValueChange={setActiveMonth}>\n               <SelectTrigger\n                  className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n                  aria-label=\"Select a value\"\n               >\n                  <SelectValue placeholder=\"Select month\" />\n               </SelectTrigger>\n               <SelectContent align=\"end\" className=\"rounded-xl\">\n                  {months.map((key) => {\n                     const config = chartConfig[key as keyof typeof chartConfig]\n\n                     if (!config) {\n                        return null\n                     }\n\n                     return (\n                        <SelectItem\n                           key={key}\n                           value={key}\n                           className=\"rounded-lg [&_span]:flex\"\n                        >\n                           <div className=\"flex items-center gap-2 text-xs\">\n                              <span\n                                 className=\"flex h-3 w-3 shrink-0 rounded-sm\"\n                                 style={{\n                                    backgroundColor: `var(--color-${key})`,\n                                 }}\n                              />\n                              {config?.label}\n                           </div>\n                        </SelectItem>\n                     )\n                  })}\n               </SelectContent>\n            </Select>\n         </CardHeader>\n         <CardContent className=\"flex flex-1 justify-center pb-0\">\n            <ChartContainer\n               id={id}\n               config={chartConfig}\n               className=\"mx-auto aspect-square w-full max-w-[300px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={desktopData}\n                     dataKey=\"desktop\"\n                     nameKey=\"month\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                     activeIndex={activeIndex}\n                     activeShape={({\n                        outerRadius = 0,\n                        ...props\n                     }: PieSectorDataItem) => (\n                        <g>\n                           <Sector {...props} outerRadius={outerRadius + 10} />\n                           <Sector\n                              {...props}\n                              outerRadius={outerRadius + 25}\n                              innerRadius={outerRadius + 12}\n                           />\n                        </g>\n                     )}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-3xl font-bold\"\n                                    >\n                                       {desktopData[\n                                          activeIndex\n                                       ].desktop.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-pie-label-custom.json b/apps/web/public/r/styles/miami/chart-pie-label-custom.json
index 1c221413..5436827d 100644
--- a/apps/web/public/r/styles/miami/chart-pie-label-custom.json
+++ b/apps/web/public/r/styles/miami/chart-pie-label-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-label-custom",
   "type": "registry:block",
-  "description": "A pie chart with a custom label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label-custom.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] px-0\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     labelLine={false}\n                     label={({ payload, ...props }) => {\n                        return (\n                           <text\n                              cx={props.cx}\n                              cy={props.cy}\n                              x={props.x}\n                              y={props.y}\n                              textAnchor={props.textAnchor}\n                              dominantBaseline={props.dominantBaseline}\n                              fill=\"hsla(var(--foreground))\"\n                           >\n                              {payload.visitors}\n                           </text>\n                        )\n                     }}\n                     nameKey=\"browser\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] px-0\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent nameKey=\"visitors\" hideLabel />\n                     }\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     labelLine={false}\n                     label={({ payload, ...props }) => {\n                        return (\n                           <text\n                              cx={props.cx}\n                              cy={props.cy}\n                              x={props.x}\n                              y={props.y}\n                              textAnchor={props.textAnchor}\n                              dominantBaseline={props.dominantBaseline}\n                              fill=\"hsla(var(--foreground))\"\n                           >\n                              {payload.visitors}\n                           </text>\n                        )\n                     }}\n                     nameKey=\"browser\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-pie-label-list.json b/apps/web/public/r/styles/miami/chart-pie-label-list.json
index 6d1cc922..558c510c 100644
--- a/apps/web/public/r/styles/miami/chart-pie-label-list.json
+++ b/apps/web/public/r/styles/miami/chart-pie-label-list.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-label-list",
   "type": "registry:block",
-  "description": "A pie chart with a label list",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label-list.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { LabelList, Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Label List</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"[&_.recharts-text]:fill-background mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n                  />\n                  <Pie data={chartData} dataKey=\"visitors\">\n                     <LabelList\n                        dataKey=\"browser\"\n                        className=\"fill-background\"\n                        stroke=\"none\"\n                        fontSize={12}\n                        formatter={(value: keyof typeof chartConfig) =>\n                           chartConfig[value]?.label}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-label-list.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Label List</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent nameKey=\"visitors\" hideLabel />\n                     }\n                  />\n                  <Pie data={chartData} dataKey=\"visitors\">\n                     <LabelList\n                        dataKey=\"browser\"\n                        className=\"fill-background\"\n                        stroke=\"none\"\n                        fontSize={12}\n                        formatter={(value: keyof typeof chartConfig) =>\n                           chartConfig[value]?.label\n                        }\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-pie-label.json b/apps/web/public/r/styles/miami/chart-pie-label.json
index 6126338f..b6b45700 100644
--- a/apps/web/public/r/styles/miami/chart-pie-label.json
+++ b/apps/web/public/r/styles/miami/chart-pie-label.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-label",
   "type": "registry:block",
-  "description": "A pie chart with a label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[250px] pb-0\"\n            >\n               <PieChart>\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground\"\n            >\n               <PieChart>\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     label\n                     nameKey=\"browser\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-pie-legend.json b/apps/web/public/r/styles/miami/chart-pie-legend.json
index 65aeb5a3..009be317 100644
--- a/apps/web/public/r/styles/miami/chart-pie-legend.json
+++ b/apps/web/public/r/styles/miami/chart-pie-legend.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-legend",
   "type": "registry:block",
-  "description": "A pie chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-legend.tsx",
-      "content": "'use client'\n\nimport { Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Legend</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[300px]\"\n            >\n               <PieChart>\n                  <Pie data={chartData} dataKey=\"visitors\" />\n                  <ChartLegend\n                     content={<ChartLegendContent nameKey=\"browser\" />}\n                     className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-legend.tsx",
+      "content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Legend</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[300px]\"\n            >\n               <PieChart>\n                  <Pie data={chartData} dataKey=\"visitors\" />\n                  <ChartLegend\n                     content={<ChartLegendContent nameKey=\"browser\" />}\n                     className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-pie-separator-none.json b/apps/web/public/r/styles/miami/chart-pie-separator-none.json
index fb8e2e6d..b9426ac5 100644
--- a/apps/web/public/r/styles/miami/chart-pie-separator-none.json
+++ b/apps/web/public/r/styles/miami/chart-pie-separator-none.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-separator-none",
   "type": "registry:block",
-  "description": "A pie chart with no separator",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-separator-none.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Separator None</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     stroke=\"0\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-separator-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Separator None</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     stroke=\"0\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-pie-simple.json b/apps/web/public/r/styles/miami/chart-pie-simple.json
index 54f8d5fc..6aa759c2 100644
--- a/apps/web/public/r/styles/miami/chart-pie-simple.json
+++ b/apps/web/public/r/styles/miami/chart-pie-simple.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-simple",
   "type": "registry:block",
-  "description": "A simple pie chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-simple.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-pie-stacked.json b/apps/web/public/r/styles/miami/chart-pie-stacked.json
index 03822aff..f57d0a2a 100644
--- a/apps/web/public/r/styles/miami/chart-pie-stacked.json
+++ b/apps/web/public/r/styles/miami/chart-pie-stacked.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-pie-stacked",
   "type": "registry:block",
-  "description": "A pie chart with stacked sections",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-stacked.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { TrendingUp } from 'lucide-react'\nimport { Label, Pie, PieChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst desktopData = [\n   { month: 'january', desktop: 186, fill: 'var(--color-january)' },\n   { month: 'february', desktop: 305, fill: 'var(--color-february)' },\n   { month: 'march', desktop: 237, fill: 'var(--color-march)' },\n   { month: 'april', desktop: 173, fill: 'var(--color-april)' },\n   { month: 'may', desktop: 209, fill: 'var(--color-may)' },\n]\n\nconst mobileData = [\n   { month: 'january', mobile: 80, fill: 'var(--color-january)' },\n   { month: 'february', mobile: 200, fill: 'var(--color-february)' },\n   { month: 'march', mobile: 120, fill: 'var(--color-march)' },\n   { month: 'april', mobile: 190, fill: 'var(--color-april)' },\n   { month: 'may', mobile: 130, fill: 'var(--color-may)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   desktop: {\n      label: 'Desktop',\n   },\n   mobile: {\n      label: 'Mobile',\n   },\n   january: {\n      label: 'January',\n      color: 'hsl(var(--chart-1))',\n   },\n   february: {\n      label: 'February',\n      color: 'hsl(var(--chart-2))',\n   },\n   march: {\n      label: 'March',\n      color: 'hsl(var(--chart-3))',\n   },\n   april: {\n      label: 'April',\n      color: 'hsl(var(--chart-4))',\n   },\n   may: {\n      label: 'May',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Stacked</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={(\n                        <ChartTooltipContent\n                           labelKey=\"visitors\"\n                           nameKey=\"month\"\n                           indicator=\"line\"\n                           labelFormatter={(_, payload) => {\n                              return chartConfig[\n                                 payload?.[0].dataKey as keyof typeof chartConfig\n                              ].label\n                           }}\n                        />\n                     )}\n                  />\n                  <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n                  <Pie\n                     data={mobileData}\n                     dataKey=\"mobile\"\n                     innerRadius={70}\n                     outerRadius={90}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-pie-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst desktopData = [\n   { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n   { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n   { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n   { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n   { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n   { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n   { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n   { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n   { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n   { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   desktop: {\n      label: \"Desktop\",\n   },\n   mobile: {\n      label: \"Mobile\",\n   },\n   january: {\n      label: \"January\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   february: {\n      label: \"February\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   march: {\n      label: \"March\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   april: {\n      label: \"April\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   may: {\n      label: \"May\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Stacked</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           labelKey=\"visitors\"\n                           nameKey=\"month\"\n                           indicator=\"line\"\n                           labelFormatter={(_, payload) => {\n                              return chartConfig[\n                                 payload?.[0]\n                                    .dataKey as keyof typeof chartConfig\n                              ].label\n                           }}\n                        />\n                     }\n                  />\n                  <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n                  <Pie\n                     data={mobileData}\n                     dataKey=\"mobile\"\n                     innerRadius={70}\n                     outerRadius={90}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-default.json b/apps/web/public/r/styles/miami/chart-radar-default.json
index e69480cb..1e253c69 100644
--- a/apps/web/public/r/styles/miami/chart-radar-default.json
+++ b/apps/web/public/r/styles/miami/chart-radar-default.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-default",
   "type": "registry:block",
-  "description": "A radar chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-default.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 273 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-dots.json b/apps/web/public/r/styles/miami/chart-radar-dots.json
index f75d037a..384cabfc 100644
--- a/apps/web/public/r/styles/miami/chart-radar-dots.json
+++ b/apps/web/public/r/styles/miami/chart-radar-dots.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-dots",
   "type": "registry:block",
-  "description": "A radar chart with dots",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-dots.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 273 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center\">\n            <CardTitle>Radar Chart - Dots</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center\">\n            <CardTitle>Radar Chart - Dots</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-grid-circle-fill.json b/apps/web/public/r/styles/miami/chart-radar-grid-circle-fill.json
index 2591c7ec..4d523c98 100644
--- a/apps/web/public/r/styles/miami/chart-radar-grid-circle-fill.json
+++ b/apps/web/public/r/styles/miami/chart-radar-grid-circle-fill.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-grid-circle-fill",
   "type": "registry:block",
-  "description": "A radar chart with a grid and circle fill",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle-fill.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 285 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 203 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 264 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                  <PolarGrid\n                     className=\"fill-[--color-desktop] opacity-20\"\n                     gridType=\"circle\"\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.5}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-grid-circle-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 285 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 203 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <PolarGrid\n                     className=\"fill-[--color-desktop] opacity-20\"\n                     gridType=\"circle\"\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.5}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-grid-circle-no-lines.json b/apps/web/public/r/styles/miami/chart-radar-grid-circle-no-lines.json
index d230d04d..c992d248 100644
--- a/apps/web/public/r/styles/miami/chart-radar-grid-circle-no-lines.json
+++ b/apps/web/public/r/styles/miami/chart-radar-grid-circle-no-lines.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-grid-circle-no-lines",
   "type": "registry:block",
-  "description": "A radar chart with a grid and circle fill",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle-no-lines.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 203 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid gridType=\"circle\" radialLines={false} />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-grid-circle-no-lines.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 203 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid gridType=\"circle\" radialLines={false} />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-grid-circle.json b/apps/web/public/r/styles/miami/chart-radar-grid-circle.json
index 686ec672..0e52e5fd 100644
--- a/apps/web/public/r/styles/miami/chart-radar-grid-circle.json
+++ b/apps/web/public/r/styles/miami/chart-radar-grid-circle.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-grid-circle",
   "type": "registry:block",
-  "description": "A radar chart with a grid and circle",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 273 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid gridType=\"circle\" />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-grid-circle.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid gridType=\"circle\" />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-grid-custom.json b/apps/web/public/r/styles/miami/chart-radar-grid-custom.json
index 04f82747..e1e90715 100644
--- a/apps/web/public/r/styles/miami/chart-radar-grid-custom.json
+++ b/apps/web/public/r/styles/miami/chart-radar-grid-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-grid-custom",
   "type": "registry:block",
-  "description": "A radar chart with a custom grid",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-custom.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 273 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Custom</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-grid-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Custom</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid\n                     radialLines={false}\n                     polarRadius={[90]}\n                     strokeWidth={1}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-grid-fill.json b/apps/web/public/r/styles/miami/chart-radar-grid-fill.json
index df74b6db..fbe8232a 100644
--- a/apps/web/public/r/styles/miami/chart-radar-grid-fill.json
+++ b/apps/web/public/r/styles/miami/chart-radar-grid-fill.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-grid-fill",
   "type": "registry:block",
-  "description": "A radar chart with a grid filled",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-fill.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 285 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 203 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 264 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Filled</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.5}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-grid-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 285 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 203 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Filled</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.5}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-grid-none.json b/apps/web/public/r/styles/miami/chart-radar-grid-none.json
index 14be6c69..53934c63 100644
--- a/apps/web/public/r/styles/miami/chart-radar-grid-none.json
+++ b/apps/web/public/r/styles/miami/chart-radar-grid-none.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-grid-none",
   "type": "registry:block",
-  "description": "A radar chart with no grid",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-none.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186 },\n   { month: 'February', desktop: 305 },\n   { month: 'March', desktop: 237 },\n   { month: 'April', desktop: 273 },\n   { month: 'May', desktop: 209 },\n   { month: 'June', desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid None</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-grid-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid None</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-icons.json b/apps/web/public/r/styles/miami/chart-radar-icons.json
index 6ed47e8d..45cc4481 100644
--- a/apps/web/public/r/styles/miami/chart-radar-icons.json
+++ b/apps/web/public/r/styles/miami/chart-radar-icons.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-icons",
   "type": "registry:block",
-  "description": "A radar chart with icons",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-icons.tsx",
-      "content": "'use client'\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n      icon: ArrowDownFromLine,\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n      icon: ArrowUpFromLine,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Icons</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: -40,\n                     bottom: -10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-icons.tsx",
+      "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n      icon: ArrowDownFromLine,\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n      icon: ArrowUpFromLine,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Icons</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: -40,\n                     bottom: -10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <ChartLegend\n                     className=\"mt-8\"\n                     content={<ChartLegendContent />}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-label-custom.json b/apps/web/public/r/styles/miami/chart-radar-label-custom.json
index fde09431..d249752d 100644
--- a/apps/web/public/r/styles/miami/chart-radar-label-custom.json
+++ b/apps/web/public/r/styles/miami/chart-radar-label-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-label-custom",
   "type": "registry:block",
-  "description": "A radar chart with a custom label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-label-custom.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Custom Label</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: 10,\n                     right: 10,\n                     bottom: 10,\n                     left: 10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis\n                     dataKey=\"month\"\n                     tick={({ x, y, textAnchor, value, index, ...props }) => {\n                        const data = chartData[index]\n\n                        return (\n                           <text\n                              x={x}\n                              y={index === 0 ? y - 10 : y}\n                              textAnchor={textAnchor}\n                              fontSize={13}\n                              fontWeight={500}\n                              {...props}\n                           >\n                              <tspan>{data.desktop}</tspan>\n                              <tspan className=\"fill-muted-foreground\">/</tspan>\n                              <tspan>{data.mobile}</tspan>\n                              <tspan\n                                 x={x}\n                                 dy=\"1rem\"\n                                 fontSize={12}\n                                 className=\"fill-muted-foreground\"\n                              >\n                                 {data.month}\n                              </tspan>\n                           </text>\n                        )\n                     }}\n                  />\n\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Custom Label</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: 10,\n                     right: 10,\n                     bottom: 10,\n                     left: 10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis\n                     dataKey=\"month\"\n                     tick={({ x, y, textAnchor, value, index, ...props }) => {\n                        const data = chartData[index]\n\n                        return (\n                           <text\n                              x={x}\n                              y={index === 0 ? y - 10 : y}\n                              textAnchor={textAnchor}\n                              fontSize={13}\n                              fontWeight={500}\n                              {...props}\n                           >\n                              <tspan>{data.desktop}</tspan>\n                              <tspan className=\"fill-muted-foreground\">/</tspan>\n                              <tspan>{data.mobile}</tspan>\n                              <tspan\n                                 x={x}\n                                 dy={\"1rem\"}\n                                 fontSize={12}\n                                 className=\"fill-muted-foreground\"\n                              >\n                                 {data.month}\n                              </tspan>\n                           </text>\n                        )\n                     }}\n                  />\n\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-legend.json b/apps/web/public/r/styles/miami/chart-radar-legend.json
index 596aed99..a1bd7b64 100644
--- a/apps/web/public/r/styles/miami/chart-radar-legend.json
+++ b/apps/web/public/r/styles/miami/chart-radar-legend.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-legend",
   "type": "registry:block",
-  "description": "A radar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-legend.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Legend</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: -40,\n                     bottom: -10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Legend</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: -40,\n                     bottom: -10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <ChartLegend\n                     className=\"mt-8\"\n                     content={<ChartLegendContent />}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-lines-only.json b/apps/web/public/r/styles/miami/chart-radar-lines-only.json
index dc27b217..71e10502 100644
--- a/apps/web/public/r/styles/miami/chart-radar-lines-only.json
+++ b/apps/web/public/r/styles/miami/chart-radar-lines-only.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-lines-only",
   "type": "registry:block",
-  "description": "A radar chart with lines only",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-lines-only.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 160 },\n   { month: 'February', desktop: 185, mobile: 170 },\n   { month: 'March', desktop: 207, mobile: 180 },\n   { month: 'April', desktop: 173, mobile: 160 },\n   { month: 'May', desktop: 160, mobile: 190 },\n   { month: 'June', desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Lines Only</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid radialLines={false} />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0}\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                  />\n                  <Radar\n                     dataKey=\"mobile\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0}\n                     stroke=\"var(--color-mobile)\"\n                     strokeWidth={2}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-lines-only.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 160 },\n   { month: \"February\", desktop: 185, mobile: 170 },\n   { month: \"March\", desktop: 207, mobile: 180 },\n   { month: \"April\", desktop: 173, mobile: 160 },\n   { month: \"May\", desktop: 160, mobile: 190 },\n   { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Lines Only</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid radialLines={false} />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0}\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                  />\n                  <Radar\n                     dataKey=\"mobile\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0}\n                     stroke=\"var(--color-mobile)\"\n                     strokeWidth={2}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-multiple.json b/apps/web/public/r/styles/miami/chart-radar-multiple.json
index a2434525..01e66e16 100644
--- a/apps/web/public/r/styles/miami/chart-radar-multiple.json
+++ b/apps/web/public/r/styles/miami/chart-radar-multiple.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-multiple",
   "type": "registry:block",
-  "description": "A radar chart with multiple data",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-multiple.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Multiple</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Multiple</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radar-radius.json b/apps/web/public/r/styles/miami/chart-radar-radius.json
index 13769668..4108671e 100644
--- a/apps/web/public/r/styles/miami/chart-radar-radius.json
+++ b/apps/web/public/r/styles/miami/chart-radar-radius.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radar-radius",
   "type": "registry:block",
-  "description": "A radar chart with a radius axis",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-radius.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport {\n   PolarAngleAxis,\n   PolarGrid,\n   PolarRadiusAxis,\n   Radar,\n   RadarChart,\n} from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { month: 'January', desktop: 186, mobile: 80 },\n   { month: 'February', desktop: 305, mobile: 200 },\n   { month: 'March', desktop: 237, mobile: 120 },\n   { month: 'April', desktop: 73, mobile: 190 },\n   { month: 'May', desktop: 209, mobile: 130 },\n   { month: 'June', desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Radius Axis</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n                     }\n                  />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <PolarRadiusAxis\n                     angle={60}\n                     stroke=\"hsla(var(--foreground))\"\n                     orientation=\"middle\"\n                     axisLine={false}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radar-radius.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n   PolarAngleAxis,\n   PolarGrid,\n   PolarRadiusAxis,\n   Radar,\n   RadarChart,\n} from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Radius Axis</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           labelKey=\"month\"\n                        />\n                     }\n                  />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <PolarRadiusAxis\n                     angle={60}\n                     stroke=\"hsla(var(--foreground))\"\n                     orientation=\"middle\"\n                     axisLine={false}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radial-grid.json b/apps/web/public/r/styles/miami/chart-radial-grid.json
index 984475b9..6095aa8e 100644
--- a/apps/web/public/r/styles/miami/chart-radial-grid.json
+++ b/apps/web/public/r/styles/miami/chart-radial-grid.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radial-grid",
   "type": "registry:block",
-  "description": "A radial chart with a grid",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-grid.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { PolarGrid, RadialBar, RadialBarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Grid</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n                  />\n                  <PolarGrid gridType=\"circle\" />\n                  <RadialBar dataKey=\"visitors\" />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radial-grid.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Grid</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  innerRadius={30}\n                  outerRadius={100}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent hideLabel nameKey=\"browser\" />\n                     }\n                  />\n                  <PolarGrid gridType=\"circle\" />\n                  <RadialBar dataKey=\"visitors\" />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radial-label.json b/apps/web/public/r/styles/miami/chart-radial-label.json
index 9a85d710..07b6efd5 100644
--- a/apps/web/public/r/styles/miami/chart-radial-label.json
+++ b/apps/web/public/r/styles/miami/chart-radial-label.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radial-label",
   "type": "registry:block",
-  "description": "A radial chart with a label",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-label.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { LabelList, RadialBar, RadialBarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  startAngle={-90}\n                  endAngle={380}\n                  innerRadius={30}\n                  outerRadius={110}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n                  />\n                  <RadialBar dataKey=\"visitors\" background>\n                     <LabelList\n                        position=\"insideStart\"\n                        dataKey=\"browser\"\n                        className=\"fill-white capitalize mix-blend-luminosity\"\n                        fontSize={11}\n                     />\n                  </RadialBar>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radial-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  startAngle={-90}\n                  endAngle={380}\n                  innerRadius={30}\n                  outerRadius={110}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent hideLabel nameKey=\"browser\" />\n                     }\n                  />\n                  <RadialBar dataKey=\"visitors\" background>\n                     <LabelList\n                        position=\"insideStart\"\n                        dataKey=\"browser\"\n                        className=\"fill-white capitalize mix-blend-luminosity\"\n                        fontSize={11}\n                     />\n                  </RadialBar>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radial-shape.json b/apps/web/public/r/styles/miami/chart-radial-shape.json
index f75e5550..4633bc7e 100644
--- a/apps/web/public/r/styles/miami/chart-radial-shape.json
+++ b/apps/web/public/r/styles/miami/chart-radial-shape.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radial-shape",
   "type": "registry:block",
-  "description": "A radial chart with a custom shape",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-shape.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport {\n   Label,\n   PolarGrid,\n   PolarRadiusAxis,\n   RadialBar,\n   RadialBarChart,\n} from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type { ChartConfig } from '~/registry/miami/ui/chart'\nimport { ChartContainer } from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'safari', visitors: 1260, fill: 'var(--color-safari)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Shape</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  endAngle={100}\n                  innerRadius={80}\n                  outerRadius={140}\n               >\n                  <PolarGrid\n                     gridType=\"circle\"\n                     radialLines={false}\n                     stroke=\"none\"\n                     className=\"first:fill-muted last:fill-background\"\n                     polarRadius={[86, 74]}\n                  />\n                  <RadialBar dataKey=\"visitors\" background />\n                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-4xl font-bold\"\n                                    >\n                                       {chartData[0].visitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radial-shape.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n   Label,\n   PolarGrid,\n   PolarRadiusAxis,\n   RadialBar,\n   RadialBarChart,\n} from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport { type ChartConfig, ChartContainer } from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Shape</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  endAngle={100}\n                  innerRadius={80}\n                  outerRadius={140}\n               >\n                  <PolarGrid\n                     gridType=\"circle\"\n                     radialLines={false}\n                     stroke=\"none\"\n                     className=\"first:fill-muted last:fill-background\"\n                     polarRadius={[86, 74]}\n                  />\n                  <RadialBar dataKey=\"visitors\" background />\n                  <PolarRadiusAxis\n                     tick={false}\n                     tickLine={false}\n                     axisLine={false}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-4xl font-bold\"\n                                    >\n                                       {chartData[0].visitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radial-simple.json b/apps/web/public/r/styles/miami/chart-radial-simple.json
index 24de14e3..ec49c9b3 100644
--- a/apps/web/public/r/styles/miami/chart-radial-simple.json
+++ b/apps/web/public/r/styles/miami/chart-radial-simple.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radial-simple",
   "type": "registry:block",
-  "description": "A radial chart",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-simple.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { RadialBar, RadialBarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },\n   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },\n   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   chrome: {\n      label: 'Chrome',\n      color: 'hsl(var(--chart-1))',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n   firefox: {\n      label: 'Firefox',\n      color: 'hsl(var(--chart-3))',\n   },\n   edge: {\n      label: 'Edge',\n      color: 'hsl(var(--chart-4))',\n   },\n   other: {\n      label: 'Other',\n      color: 'hsl(var(--chart-5))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n                  />\n                  <RadialBar dataKey=\"visitors\" background />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radial-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  innerRadius={30}\n                  outerRadius={110}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent hideLabel nameKey=\"browser\" />\n                     }\n                  />\n                  <RadialBar dataKey=\"visitors\" background />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radial-stacked.json b/apps/web/public/r/styles/miami/chart-radial-stacked.json
index c874e16f..be4bf343 100644
--- a/apps/web/public/r/styles/miami/chart-radial-stacked.json
+++ b/apps/web/public/r/styles/miami/chart-radial-stacked.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radial-stacked",
   "type": "registry:block",
-  "description": "A radial chart with stacked sections",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-stacked.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [{ month: 'january', desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n   desktop: {\n      label: 'Desktop',\n      color: 'hsl(var(--chart-1))',\n   },\n   mobile: {\n      label: 'Mobile',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Stacked</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex flex-1 items-center pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square w-full max-w-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  endAngle={180}\n                  innerRadius={80}\n                  outerRadius={130}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                              return (\n                                 <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) - 16}\n                                       className=\"fill-foreground text-2xl font-bold\"\n                                    >\n                                       {totalVisitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 4}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n                  <RadialBar\n                     dataKey=\"desktop\"\n                     stackId=\"a\"\n                     cornerRadius={5}\n                     fill=\"var(--color-desktop)\"\n                     className=\"stroke-transparent stroke-2\"\n                  />\n                  <RadialBar\n                     dataKey=\"mobile\"\n                     fill=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                     cornerRadius={5}\n                     className=\"stroke-transparent stroke-2\"\n                  />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radial-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Stacked</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex flex-1 items-center pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square w-full max-w-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  endAngle={180}\n                  innerRadius={80}\n                  outerRadius={130}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarRadiusAxis\n                     tick={false}\n                     tickLine={false}\n                     axisLine={false}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) - 16}\n                                       className=\"fill-foreground text-2xl font-bold\"\n                                    >\n                                       {totalVisitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 4}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n                  <RadialBar\n                     dataKey=\"desktop\"\n                     stackId=\"a\"\n                     cornerRadius={5}\n                     fill=\"var(--color-desktop)\"\n                     className=\"stroke-transparent stroke-2\"\n                  />\n                  <RadialBar\n                     dataKey=\"mobile\"\n                     fill=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                     cornerRadius={5}\n                     className=\"stroke-transparent stroke-2\"\n                  />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-radial-text.json b/apps/web/public/r/styles/miami/chart-radial-text.json
index a714e280..9bf68a63 100644
--- a/apps/web/public/r/styles/miami/chart-radial-text.json
+++ b/apps/web/public/r/styles/miami/chart-radial-text.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-radial-text",
   "type": "registry:block",
-  "description": "A radial chart with text",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-text.tsx",
-      "content": "'use client'\n\nimport { TrendingUp } from 'lucide-react'\nimport {\n   Label,\n   PolarGrid,\n   PolarRadiusAxis,\n   RadialBar,\n   RadialBarChart,\n} from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type { ChartConfig } from '~/registry/miami/ui/chart'\nimport { ChartContainer } from '~/registry/miami/ui/chart'\nconst chartData = [\n   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: 'Visitors',\n   },\n   safari: {\n      label: 'Safari',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Text</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  startAngle={0}\n                  endAngle={250}\n                  innerRadius={80}\n                  outerRadius={110}\n               >\n                  <PolarGrid\n                     gridType=\"circle\"\n                     radialLines={false}\n                     stroke=\"none\"\n                     className=\"first:fill-muted last:fill-background\"\n                     polarRadius={[86, 74]}\n                  />\n                  <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-4xl font-bold\"\n                                    >\n                                       {chartData[0].visitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month\n               {' '}\n               <TrendingUp className=\"size-4\" />\n            </div>\n            <div className=\"text-muted-foreground leading-none\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-radial-text.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n   Label,\n   PolarGrid,\n   PolarRadiusAxis,\n   RadialBar,\n   RadialBarChart,\n} from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport { type ChartConfig, ChartContainer } from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Text</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  startAngle={0}\n                  endAngle={250}\n                  innerRadius={80}\n                  outerRadius={110}\n               >\n                  <PolarGrid\n                     gridType=\"circle\"\n                     radialLines={false}\n                     stroke=\"none\"\n                     className=\"first:fill-muted last:fill-background\"\n                     polarRadius={[86, 74]}\n                  />\n                  <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n                  <PolarRadiusAxis\n                     tick={false}\n                     tickLine={false}\n                     axisLine={false}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-4xl font-bold\"\n                                    >\n                                       {chartData[0].visitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-tooltip-advanced.json b/apps/web/public/r/styles/miami/chart-tooltip-advanced.json
index 790a6bb0..96c3fae0 100644
--- a/apps/web/public/r/styles/miami/chart-tooltip-advanced.json
+++ b/apps/web/public/r/styles/miami/chart-tooltip-advanced.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-advanced",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-advanced.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Advanced</CardTitle>\n            <CardDescription>\n               Tooltip with custom formatter and total.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={(\n                        <ChartTooltipContent\n                           hideLabel\n                           className=\"w-[180px]\"\n                           formatter={(value, name, item, index) => (\n                              <>\n                                 <div\n                                    className=\"size-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n                                    style={\n                                       {\n                                          '--color-bg': `var(--color-${name})`,\n                                       } as React.CSSProperties\n                                    }\n                                 />\n                                 {chartConfig[name as keyof typeof chartConfig]?.label\n                                 || name}\n                                 <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                                    {value}\n                                    <span className=\"text-muted-foreground font-normal\">\n                                       kcal\n                                    </span>\n                                 </div>\n                                 {/* Add this after the last item */}\n                                 {index === 1 && (\n                                    <div className=\"text-foreground mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium\">\n                                       Total\n                                       <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                                          {item.payload.running + item.payload.swimming}\n                                          <span className=\"text-muted-foreground font-normal\">\n                                             kcal\n                                          </span>\n                                       </div>\n                                    </div>\n                                 )}\n                              </>\n                           )}\n                        />\n                     )}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-advanced.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Advanced</CardTitle>\n            <CardDescription>\n               Tooltip with custom formatter and total.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           hideLabel\n                           className=\"w-[180px]\"\n                           formatter={(value, name, item, index) => (\n                              <>\n                                 <div\n                                    className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n                                    style={\n                                       {\n                                          \"--color-bg\": `var(--color-${name})`,\n                                       } as React.CSSProperties\n                                    }\n                                 />\n                                 {chartConfig[name as keyof typeof chartConfig]\n                                    ?.label || name}\n                                 <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                                    {value}\n                                    <span className=\"font-normal text-muted-foreground\">\n                                       kcal\n                                    </span>\n                                 </div>\n                                 {/* Add this after the last item */}\n                                 {index === 1 && (\n                                    <div className=\"mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground\">\n                                       Total\n                                       <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                                          {item.payload.running +\n                                             item.payload.swimming}\n                                          <span className=\"font-normal text-muted-foreground\">\n                                             kcal\n                                          </span>\n                                       </div>\n                                    </div>\n                                 )}\n                              </>\n                           )}\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-tooltip-default.json b/apps/web/public/r/styles/miami/chart-tooltip-default.json
index 75ea03ec..316dfeb7 100644
--- a/apps/web/public/r/styles/miami/chart-tooltip-default.json
+++ b/apps/web/public/r/styles/miami/chart-tooltip-default.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-default",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-default.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Default</CardTitle>\n            <CardDescription>\n               Default tooltip with ChartTooltipContent.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-default.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Default</CardTitle>\n            <CardDescription>\n               Default tooltip with ChartTooltipContent.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-tooltip-formatter.json b/apps/web/public/r/styles/miami/chart-tooltip-formatter.json
index d73c0d50..b437a37f 100644
--- a/apps/web/public/r/styles/miami/chart-tooltip-formatter.json
+++ b/apps/web/public/r/styles/miami/chart-tooltip-formatter.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-formatter",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-formatter.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Formatter</CardTitle>\n            <CardDescription>Tooltip with custom formatter .</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={(\n                        <ChartTooltipContent\n                           hideLabel\n                           formatter={(value, name) => (\n                              <div className=\"text-muted-foreground flex min-w-[130px] items-center text-xs\">\n                                 {chartConfig[name as keyof typeof chartConfig]?.label\n                                 || name}\n                                 <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                                    {value}\n                                    <span className=\"text-muted-foreground font-normal\">\n                                       kcal\n                                    </span>\n                                 </div>\n                              </div>\n                           )}\n                        />\n                     )}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Formatter</CardTitle>\n            <CardDescription>Tooltip with custom formatter .</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           hideLabel\n                           formatter={(value, name) => (\n                              <div className=\"flex min-w-[130px] items-center text-xs text-muted-foreground\">\n                                 {chartConfig[name as keyof typeof chartConfig]\n                                    ?.label || name}\n                                 <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                                    {value}\n                                    <span className=\"font-normal text-muted-foreground\">\n                                       kcal\n                                    </span>\n                                 </div>\n                              </div>\n                           )}\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-tooltip-icons.json b/apps/web/public/r/styles/miami/chart-tooltip-icons.json
index 31f87da0..2d553973 100644
--- a/apps/web/public/r/styles/miami/chart-tooltip-icons.json
+++ b/apps/web/public/r/styles/miami/chart-tooltip-icons.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-icons",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-icons.tsx",
-      "content": "'use client'\n\nimport { Footprints, Waves } from 'lucide-react'\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n      icon: Footprints,\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n      icon: Waves,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Icons</CardTitle>\n            <CardDescription>Tooltip with icons.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideLabel />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-icons.tsx",
+      "content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n      icon: Footprints,\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n      icon: Waves,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Icons</CardTitle>\n            <CardDescription>Tooltip with icons.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideLabel />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-tooltip-indicator-line.json b/apps/web/public/r/styles/miami/chart-tooltip-indicator-line.json
index 2898d2e4..1ad1da5a 100644
--- a/apps/web/public/r/styles/miami/chart-tooltip-indicator-line.json
+++ b/apps/web/public/r/styles/miami/chart-tooltip-indicator-line.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-indicator-line",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-indicator-line.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Line Indicator</CardTitle>\n            <CardDescription>Tooltip with line indicator.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-indicator-line.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Line Indicator</CardTitle>\n            <CardDescription>Tooltip with line indicator.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-tooltip-indicator-none.json b/apps/web/public/r/styles/miami/chart-tooltip-indicator-none.json
index d374fdad..d6a03148 100644
--- a/apps/web/public/r/styles/miami/chart-tooltip-indicator-none.json
+++ b/apps/web/public/r/styles/miami/chart-tooltip-indicator-none.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-indicator-none",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-indicator-none.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - No Indicator</CardTitle>\n            <CardDescription>Tooltip with no indicator.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideIndicator />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-indicator-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - No Indicator</CardTitle>\n            <CardDescription>Tooltip with no indicator.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideIndicator />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-tooltip-label-custom.json b/apps/web/public/r/styles/miami/chart-tooltip-label-custom.json
index d17b97e3..005269f9 100644
--- a/apps/web/public/r/styles/miami/chart-tooltip-label-custom.json
+++ b/apps/web/public/r/styles/miami/chart-tooltip-label-custom.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-label-custom",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-custom.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   activities: {\n      label: 'Activities',\n   },\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Custom label</CardTitle>\n            <CardDescription>\n               Tooltip with custom label from chartConfig.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent labelKey=\"activities\" indicator=\"line\" />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   activities: {\n      label: \"Activities\",\n   },\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Custom label</CardTitle>\n            <CardDescription>\n               Tooltip with custom label from chartConfig.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           labelKey=\"activities\"\n                           indicator=\"line\"\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-tooltip-label-formatter.json b/apps/web/public/r/styles/miami/chart-tooltip-label-formatter.json
index a6b4d9e8..f6618331 100644
--- a/apps/web/public/r/styles/miami/chart-tooltip-label-formatter.json
+++ b/apps/web/public/r/styles/miami/chart-tooltip-label-formatter.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-label-formatter",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-formatter.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Label Formatter</CardTitle>\n            <CardDescription>Tooltip with label formatter.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={(\n                        <ChartTooltipContent\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString('en-US', {\n                                 day: 'numeric',\n                                 month: 'long',\n                                 year: 'numeric',\n                              })\n                           }}\n                        />\n                     )}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-label-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Label Formatter</CardTitle>\n            <CardDescription>Tooltip with label formatter.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    day: \"numeric\",\n                                    month: \"long\",\n                                    year: \"numeric\",\n                                 },\n                              )\n                           }}\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart-tooltip-label-none.json b/apps/web/public/r/styles/miami/chart-tooltip-label-none.json
index 15db68bc..a2f8f92a 100644
--- a/apps/web/public/r/styles/miami/chart-tooltip-label-none.json
+++ b/apps/web/public/r/styles/miami/chart-tooltip-label-none.json
@@ -1,17 +1,22 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart-tooltip-label-none",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-none.tsx",
-      "content": "'use client'\n\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport type {\n   ChartConfig,\n} from '~/registry/miami/ui/chart'\nimport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from '~/registry/miami/ui/chart'\nconst chartData = [\n   { date: '2024-07-15', running: 450, swimming: 300 },\n   { date: '2024-07-16', running: 380, swimming: 420 },\n   { date: '2024-07-17', running: 520, swimming: 120 },\n   { date: '2024-07-18', running: 140, swimming: 550 },\n   { date: '2024-07-19', running: 600, swimming: 350 },\n   { date: '2024-07-20', running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: 'Running',\n      color: 'hsl(var(--chart-1))',\n   },\n   swimming: {\n      label: 'Swimming',\n      color: 'hsl(var(--chart-2))',\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - No Label</CardTitle>\n            <CardDescription>Tooltip with no label.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString('en-US', {\n                           weekday: 'short',\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideIndicator hideLabel />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "charts/chart-tooltip-label-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"~/registry/miami/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - No Label</CardTitle>\n            <CardDescription>Tooltip with no label.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideIndicator hideLabel />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/chart.json b/apps/web/public/r/styles/miami/chart.json
index fd8535c9..6d7414bc 100644
--- a/apps/web/public/r/styles/miami/chart.json
+++ b/apps/web/public/r/styles/miami/chart.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "chart",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "recharts",
     "lucide-react"
@@ -11,8 +13,8 @@
   "files": [
     {
       "path": "ui/chart.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as RechartsPrimitive from 'recharts'\n\nimport { ny } from '~/lib/utils'\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: '', dark: '.dark' } as const\n\nexport type ChartConfig = {\n   [k in string]: {\n      label?: React.ReactNode\n      icon?: React.ComponentType\n   } & (\n      | { color?: string, theme?: never }\n      | { color?: never, theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ninterface ChartContextProps {\n   config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n   const context = React.useContext(ChartContext)\n\n   if (!context) {\n      throw new Error('useChart must be used within a <ChartContainer />')\n   }\n\n   return context\n}\n\nconst ChartContainer = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'> & {\n      config: ChartConfig\n      children: React.ComponentProps<\n      typeof RechartsPrimitive.ResponsiveContainer\n      >['children']\n   }\n>(({ id, className, children, config, ...props }, ref) => {\n   const uniqueId = React.useId()\n   const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`\n\n   return (\n      <ChartContext.Provider value={{ config }}>\n         <div\n            data-chart={chartId}\n            ref={ref}\n            className={ny(\n               '[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke=\\'#ccc\\']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke=\\'#fff\\']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke=\\'#fff\\']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none',\n               className,\n            )}\n            {...props}\n         >\n            <ChartStyle id={chartId} config={config} />\n            <RechartsPrimitive.ResponsiveContainer>\n               {children}\n            </RechartsPrimitive.ResponsiveContainer>\n         </div>\n      </ChartContext.Provider>\n   )\n})\nChartContainer.displayName = 'Chart'\n\nfunction ChartStyle({ id, config }: { id: string, config: ChartConfig }) {\n   const colorConfig = Object.entries(config).filter(\n      ([_, config]) => config.theme || config.color,\n   )\n\n   if (!colorConfig.length) {\n      return null\n   }\n\n   return (\n      <style\n         dangerouslySetInnerHTML={{\n            __html: Object.entries(THEMES).map(\n               ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color\n      = itemConfig.theme?.[theme as keyof typeof itemConfig.theme]\n      || itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join('\\n')}\n}\n`,\n            ),\n         }}\n      />\n   )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n   React.ComponentProps<'div'> & {\n      hideLabel?: boolean\n      hideIndicator?: boolean\n      indicator?: 'line' | 'dot' | 'dashed'\n      nameKey?: string\n      labelKey?: string\n   }\n>(\n   (\n      {\n         active,\n         payload,\n         className,\n         indicator = 'dot',\n         hideLabel = false,\n         hideIndicator = false,\n         label,\n         labelFormatter,\n         labelClassName,\n         formatter,\n         color,\n         nameKey,\n         labelKey,\n      },\n      ref,\n   ) => {\n      const { config } = useChart()\n\n      const tooltipLabel = React.useMemo(() => {\n         if (hideLabel || !payload?.length) {\n            return null\n         }\n\n         const [item] = payload\n         const key = `${labelKey || item?.dataKey || item?.name || 'value'}`\n         const itemConfig = getPayloadConfigFromPayload(config, item, key)\n         const value\n        = !labelKey && typeof label === 'string'\n           ? config[label as keyof typeof config]?.label || label\n           : itemConfig?.label\n\n         if (labelFormatter) {\n            return (\n               <div className={ny('font-medium', labelClassName)}>\n                  {labelFormatter(value, payload)}\n               </div>\n            )\n         }\n\n         if (!value) {\n            return null\n         }\n\n         return <div className={ny('font-medium', labelClassName)}>{value}</div>\n      }, [\n         label,\n         labelFormatter,\n         payload,\n         hideLabel,\n         labelClassName,\n         config,\n         labelKey,\n      ])\n\n      if (!active || !payload?.length) {\n         return null\n      }\n\n      const nestLabel = payload.length === 1 && indicator !== 'dot'\n\n      return (\n         <div\n            ref={ref}\n            className={ny(\n               'border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',\n               className,\n            )}\n         >\n            {!nestLabel ? tooltipLabel : null}\n            <div className=\"grid gap-1.5\">\n               {payload.map((item, index) => {\n                  const key = `${nameKey || item.name || item.dataKey || 'value'}`\n                  const itemConfig = getPayloadConfigFromPayload(config, item, key)\n                  const indicatorColor = color || item.payload.fill || item.color\n\n                  return (\n                     <div\n                        key={item.dataKey}\n                        className={ny(\n                           '[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5',\n                           indicator === 'dot' && 'items-center',\n                        )}\n                     >\n                        {formatter && item.value && item.name\n                           ? (\n                                 formatter(item.value, item.name, item, index, item.payload)\n                              )\n                           : (\n                                 <>\n                                    {itemConfig?.icon\n                                       ? (\n                                             <itemConfig.icon />\n                                          )\n                                       : (\n                                             !hideIndicator && (\n                                                <div\n                                                   className={ny(\n                                                      'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',\n                                                      {\n                                                         'h-2.5 w-2.5': indicator === 'dot',\n                                                         'w-1': indicator === 'line',\n                                                         'w-0 border-[1.5px] border-dashed bg-transparent':\n                                indicator === 'dashed',\n                                                         'my-0.5': nestLabel && indicator === 'dashed',\n                                                      },\n                                                   )}\n                                                   style={\n                                                      {\n                                                         '--color-bg': indicatorColor,\n                                                         '--color-border': indicatorColor,\n                                                      } as React.CSSProperties\n                                                   }\n                                                />\n                                             )\n                                          )}\n                                    <div\n                                       className={ny(\n                                          'flex flex-1 justify-between leading-none',\n                                          nestLabel ? 'items-end' : 'items-center',\n                                       )}\n                                    >\n                                       <div className=\"grid gap-1.5\">\n                                          {nestLabel ? tooltipLabel : null}\n                                          <span className=\"text-muted-foreground\">\n                                             {itemConfig?.label || item.name}\n                                          </span>\n                                       </div>\n                                       {item.value !== undefined && (\n                                          <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                                             {item.value.toLocaleString()}\n                                          </span>\n                                       )}\n                                    </div>\n                                 </>\n                              )}\n                     </div>\n                  )\n               })}\n            </div>\n         </div>\n      )\n   },\n)\nChartTooltipContent.displayName = 'ChartTooltip'\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'> &\n   Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {\n      hideIcon?: boolean\n      nameKey?: string\n   }\n>(\n   (\n      { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },\n      ref,\n   ) => {\n      const { config } = useChart()\n\n      if (!payload?.length) {\n         return null\n      }\n\n      return (\n         <div\n            ref={ref}\n            className={ny(\n               'flex items-center justify-center gap-4',\n               verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n               className,\n            )}\n         >\n            {payload.map((item) => {\n               const key = `${nameKey || item.dataKey || 'value'}`\n               const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n               return (\n                  <div\n                     key={item.value}\n                     className={ny(\n                        '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3',\n                     )}\n                  >\n                     {itemConfig?.icon && !hideIcon\n                        ? (\n                              <itemConfig.icon />\n                           )\n                        : (\n                              <div\n                                 className=\"size-2 shrink-0 rounded-[2px]\"\n                                 style={{\n                                    backgroundColor: item.color,\n                                 }}\n                              />\n                           )}\n                     {itemConfig?.label}\n                  </div>\n               )\n            })}\n         </div>\n      )\n   },\n)\nChartLegendContent.displayName = 'ChartLegend'\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n   config: ChartConfig,\n   payload: unknown,\n   key: string,\n) {\n   if (typeof payload !== 'object' || payload === null) {\n      return undefined\n   }\n\n   const payloadPayload\n    = 'payload' in payload\n    && typeof payload.payload === 'object'\n    && payload.payload !== null\n       ? payload.payload\n       : undefined\n\n   let configLabelKey: string = key\n\n   if (\n      key in payload\n      && typeof payload[key as keyof typeof payload] === 'string'\n   ) {\n      configLabelKey = payload[key as keyof typeof payload] as string\n   }\n   else if (\n      payloadPayload\n      && key in payloadPayload\n      && typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'\n   ) {\n      configLabelKey = payloadPayload[\n         key as keyof typeof payloadPayload\n      ] as string\n   }\n\n   return configLabelKey in config\n      ? config[configLabelKey]\n      : config[key as keyof typeof config]\n}\n\nexport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n   ChartLegend,\n   ChartLegendContent,\n   ChartStyle,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { ny } from \"~/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n   [k in string]: {\n      label?: React.ReactNode\n      icon?: React.ComponentType\n   } & (\n      | { color?: string; theme?: never }\n      | { color?: never; theme: Record<keyof typeof THEMES, string> }\n   )\n}\n\ninterface ChartContextProps {\n   config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n   const context = React.useContext(ChartContext)\n\n   if (!context) {\n      throw new Error(\"useChart must be used within a <ChartContainer />\")\n   }\n\n   return context\n}\n\nconst ChartContainer = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      config: ChartConfig\n      children: React.ComponentProps<\n         typeof RechartsPrimitive.ResponsiveContainer\n      >[\"children\"]\n   }\n>(({ id, className, children, config, ...props }, ref) => {\n   const uniqueId = React.useId()\n   const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n   return (\n      <ChartContext.Provider value={{ config }}>\n         <div\n            data-chart={chartId}\n            ref={ref}\n            className={ny(\n               \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n               className,\n            )}\n            {...props}\n         >\n            <ChartStyle id={chartId} config={config} />\n            <RechartsPrimitive.ResponsiveContainer>\n               {children}\n            </RechartsPrimitive.ResponsiveContainer>\n         </div>\n      </ChartContext.Provider>\n   )\n})\nChartContainer.displayName = \"Chart\"\n\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n   const colorConfig = Object.entries(config).filter(\n      ([_, config]) => config.theme || config.color,\n   )\n\n   if (!colorConfig.length) {\n      return null\n   }\n\n   return (\n      <style\n         dangerouslySetInnerHTML={{\n            __html: Object.entries(THEMES).map(\n               ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n   .map(([key, itemConfig]) => {\n      const color =\n         itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n         itemConfig.color\n      return color ? `  --color-${key}: ${color};` : null\n   })\n   .join(\"\\n\")}\n}\n`,\n            ),\n         }}\n      />\n   )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n      React.ComponentProps<\"div\"> & {\n         hideLabel?: boolean\n         hideIndicator?: boolean\n         indicator?: \"line\" | \"dot\" | \"dashed\"\n         nameKey?: string\n         labelKey?: string\n      }\n>(\n   (\n      {\n         active,\n         payload,\n         className,\n         indicator = \"dot\",\n         hideLabel = false,\n         hideIndicator = false,\n         label,\n         labelFormatter,\n         labelClassName,\n         formatter,\n         color,\n         nameKey,\n         labelKey,\n      },\n      ref,\n   ) => {\n      const { config } = useChart()\n\n      const tooltipLabel = React.useMemo(() => {\n         if (hideLabel || !payload?.length) {\n            return null\n         }\n\n         const [item] = payload\n         const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n         const itemConfig = getPayloadConfigFromPayload(config, item, key)\n         const value =\n            !labelKey && typeof label === \"string\"\n               ? config[label as keyof typeof config]?.label || label\n               : itemConfig?.label\n\n         if (labelFormatter) {\n            return (\n               <div className={ny(\"font-medium\", labelClassName)}>\n                  {labelFormatter(value, payload)}\n               </div>\n            )\n         }\n\n         if (!value) {\n            return null\n         }\n\n         return <div className={ny(\"font-medium\", labelClassName)}>{value}</div>\n      }, [\n         label,\n         labelFormatter,\n         payload,\n         hideLabel,\n         labelClassName,\n         config,\n         labelKey,\n      ])\n\n      if (!active || !payload?.length) {\n         return null\n      }\n\n      const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n      return (\n         <div\n            ref={ref}\n            className={ny(\n               \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n               className,\n            )}\n         >\n            {!nestLabel ? tooltipLabel : null}\n            <div className=\"grid gap-1.5\">\n               {payload.map((item, index) => {\n                  const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n                  const itemConfig = getPayloadConfigFromPayload(\n                     config,\n                     item,\n                     key,\n                  )\n                  const indicatorColor =\n                     color || item.payload.fill || item.color\n\n                  return (\n                     <div\n                        key={item.dataKey}\n                        className={ny(\n                           \"[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5\",\n                           indicator === \"dot\" && \"items-center\",\n                        )}\n                     >\n                        {formatter && item.value && item.name ? (\n                           formatter(\n                              item.value,\n                              item.name,\n                              item,\n                              index,\n                              item.payload,\n                           )\n                        ) : (\n                           <>\n                              {itemConfig?.icon ? (\n                                 <itemConfig.icon />\n                              ) : (\n                                 !hideIndicator && (\n                                    <div\n                                       className={ny(\n                                          \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                                          {\n                                             \"h-2.5 w-2.5\": indicator === \"dot\",\n                                             \"w-1\": indicator === \"line\",\n                                             \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                                indicator === \"dashed\",\n                                             \"my-0.5\":\n                                                nestLabel &&\n                                                indicator === \"dashed\",\n                                          },\n                                       )}\n                                       style={\n                                          {\n                                             \"--color-bg\": indicatorColor,\n                                             \"--color-border\": indicatorColor,\n                                          } as React.CSSProperties\n                                       }\n                                    />\n                                 )\n                              )}\n                              <div\n                                 className={ny(\n                                    \"flex flex-1 justify-between leading-none\",\n                                    nestLabel ? \"items-end\" : \"items-center\",\n                                 )}\n                              >\n                                 <div className=\"grid gap-1.5\">\n                                    {nestLabel ? tooltipLabel : null}\n                                    <span className=\"text-muted-foreground\">\n                                       {itemConfig?.label || item.name}\n                                    </span>\n                                 </div>\n                                 {item.value !== undefined && (\n                                    <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                                       {item.value.toLocaleString()}\n                                    </span>\n                                 )}\n                              </div>\n                           </>\n                        )}\n                     </div>\n                  )\n               })}\n            </div>\n         </div>\n      )\n   },\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> &\n      Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n         hideIcon?: boolean\n         nameKey?: string\n      }\n>(\n   (\n      {\n         className,\n         hideIcon = false,\n         payload,\n         verticalAlign = \"bottom\",\n         nameKey,\n      },\n      ref,\n   ) => {\n      const { config } = useChart()\n\n      if (!payload?.length) {\n         return null\n      }\n\n      return (\n         <div\n            ref={ref}\n            className={ny(\n               \"flex items-center justify-center gap-4\",\n               verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n               className,\n            )}\n         >\n            {payload.map((item) => {\n               const key = `${nameKey || item.dataKey || \"value\"}`\n               const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n               return (\n                  <div\n                     key={item.value}\n                     className={ny(\n                        \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3\",\n                     )}\n                  >\n                     {itemConfig?.icon && !hideIcon ? (\n                        <itemConfig.icon />\n                     ) : (\n                        <div\n                           className=\"size-2 shrink-0 rounded-[2px]\"\n                           style={{\n                              backgroundColor: item.color,\n                           }}\n                        />\n                     )}\n                     {itemConfig?.label}\n                  </div>\n               )\n            })}\n         </div>\n      )\n   },\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n   config: ChartConfig,\n   payload: unknown,\n   key: string,\n) {\n   if (typeof payload !== \"object\" || payload === null) {\n      return undefined\n   }\n\n   const payloadPayload =\n      \"payload\" in payload &&\n      typeof payload.payload === \"object\" &&\n      payload.payload !== null\n         ? payload.payload\n         : undefined\n\n   let configLabelKey: string = key\n\n   if (\n      key in payload &&\n      typeof payload[key as keyof typeof payload] === \"string\"\n   ) {\n      configLabelKey = payload[key as keyof typeof payload] as string\n   } else if (\n      payloadPayload &&\n      key in payloadPayload &&\n      typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n   ) {\n      configLabelKey = payloadPayload[\n         key as keyof typeof payloadPayload\n      ] as string\n   }\n\n   return configLabelKey in config\n      ? config[configLabelKey]\n      : config[key as keyof typeof config]\n}\n\nexport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n   ChartLegend,\n   ChartLegendContent,\n   ChartStyle,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/checkbox-demo.json b/apps/web/public/r/styles/miami/checkbox-demo.json
index 7824077f..7daa61c0 100644
--- a/apps/web/public/r/styles/miami/checkbox-demo.json
+++ b/apps/web/public/r/styles/miami/checkbox-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "checkbox-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "checkbox"
   ],
   "files": [
     {
-      "path": "example/checkbox-demo.tsx",
-      "content": "'use client'\n\nimport { Checkbox } from '~/registry/miami/ui/checkbox'\n\nexport default function CheckboxDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms\" />\n         <label\n            htmlFor=\"terms\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"~/registry/miami/ui/checkbox\"\n\nexport default function CheckboxDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms\" />\n         <label\n            htmlFor=\"terms\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/checkbox-disabled.json b/apps/web/public/r/styles/miami/checkbox-disabled.json
index 8e2e3995..2133d40b 100644
--- a/apps/web/public/r/styles/miami/checkbox-disabled.json
+++ b/apps/web/public/r/styles/miami/checkbox-disabled.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "checkbox-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "checkbox"
   ],
   "files": [
     {
-      "path": "example/checkbox-disabled.tsx",
-      "content": "import { Checkbox } from '~/registry/miami/ui/checkbox'\n\nexport default function CheckboxDisabled() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms2\" disabled />\n         <label\n            htmlFor=\"terms2\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/checkbox-disabled.tsx",
+      "content": "import { Checkbox } from \"~/registry/miami/ui/checkbox\"\n\nexport default function CheckboxDisabled() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms2\" disabled />\n         <label\n            htmlFor=\"terms2\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/checkbox-form-multiple.json b/apps/web/public/r/styles/miami/checkbox-form-multiple.json
index 005e2db9..37064d0b 100644
--- a/apps/web/public/r/styles/miami/checkbox-form-multiple.json
+++ b/apps/web/public/r/styles/miami/checkbox-form-multiple.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "checkbox-form-multiple",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "checkbox",
     "form"
   ],
   "files": [
     {
-      "path": "example/checkbox-form-multiple.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport { Checkbox } from '~/registry/miami/ui/checkbox'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/miami/ui/form'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst items = [\n   {\n      id: 'recents',\n      label: 'Recents',\n   },\n   {\n      id: 'home',\n      label: 'Home',\n   },\n   {\n      id: 'applications',\n      label: 'Applications',\n   },\n   {\n      id: 'desktop',\n      label: 'Desktop',\n   },\n   {\n      id: 'downloads',\n      label: 'Downloads',\n   },\n   {\n      id: 'documents',\n      label: 'Documents',\n   },\n] as const\n\nconst FormSchema = z.object({\n   items: z.array(z.string()).refine(value => value.some(item => item), {\n      message: 'You have to select at least one item.',\n   }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         items: ['recents', 'home'],\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"items\"\n               render={() => (\n                  <FormItem>\n                     <div className=\"mb-4\">\n                        <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                        <FormDescription>\n                           Select the items you want to display in the sidebar.\n                        </FormDescription>\n                     </div>\n                     {items.map(item => (\n                        <FormField\n                           key={item.id}\n                           control={form.control}\n                           name=\"items\"\n                           render={({ field }) => {\n                              return (\n                                 <FormItem\n                                    key={item.id}\n                                    className=\"flex flex-row items-start space-x-3 space-y-0\"\n                                 >\n                                    <FormControl>\n                                       <Checkbox\n                                          checked={field.value?.includes(item.id)}\n                                          onCheckedChange={(checked) => {\n                                             return checked\n                                                ? field.onChange([...field.value, item.id])\n                                                : field.onChange(\n                                                   field.value?.filter(\n                                                      value => value !== item.id,\n                                                   ),\n                                                )\n                                          }}\n                                       />\n                                    </FormControl>\n                                    <FormLabel className=\"text-sm font-normal\">\n                                       {item.label}\n                                    </FormLabel>\n                                 </FormItem>\n                              )\n                           }}\n                        />\n                     ))}\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/checkbox-form-multiple.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Checkbox } from \"~/registry/miami/ui/checkbox\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/miami/ui/form\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst items = [\n   {\n      id: \"recents\",\n      label: \"Recents\",\n   },\n   {\n      id: \"home\",\n      label: \"Home\",\n   },\n   {\n      id: \"applications\",\n      label: \"Applications\",\n   },\n   {\n      id: \"desktop\",\n      label: \"Desktop\",\n   },\n   {\n      id: \"downloads\",\n      label: \"Downloads\",\n   },\n   {\n      id: \"documents\",\n      label: \"Documents\",\n   },\n] as const\n\nconst FormSchema = z.object({\n   items: z.array(z.string()).refine((value) => value.some((item) => item), {\n      message: \"You have to select at least one item.\",\n   }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         items: [\"recents\", \"home\"],\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"items\"\n               render={() => (\n                  <FormItem>\n                     <div className=\"mb-4\">\n                        <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                        <FormDescription>\n                           Select the items you want to display in the sidebar.\n                        </FormDescription>\n                     </div>\n                     {items.map((item) => (\n                        <FormField\n                           key={item.id}\n                           control={form.control}\n                           name=\"items\"\n                           render={({ field }) => {\n                              return (\n                                 <FormItem\n                                    key={item.id}\n                                    className=\"flex flex-row items-start space-x-3 space-y-0\"\n                                 >\n                                    <FormControl>\n                                       <Checkbox\n                                          checked={field.value?.includes(\n                                             item.id,\n                                          )}\n                                          onCheckedChange={(checked) => {\n                                             return checked\n                                                ? field.onChange([\n                                                     ...field.value,\n                                                     item.id,\n                                                  ])\n                                                : field.onChange(\n                                                     field.value?.filter(\n                                                        (value) =>\n                                                           value !== item.id,\n                                                     ),\n                                                  )\n                                          }}\n                                       />\n                                    </FormControl>\n                                    <FormLabel className=\"text-sm font-normal\">\n                                       {item.label}\n                                    </FormLabel>\n                                 </FormItem>\n                              )\n                           }}\n                        />\n                     ))}\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/checkbox-form-single.json b/apps/web/public/r/styles/miami/checkbox-form-single.json
index efb815eb..b56cec55 100644
--- a/apps/web/public/r/styles/miami/checkbox-form-single.json
+++ b/apps/web/public/r/styles/miami/checkbox-form-single.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "checkbox-form-single",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "checkbox",
     "form"
   ],
   "files": [
     {
-      "path": "example/checkbox-form-single.tsx",
-      "content": "'use client'\n\nimport Link from 'next/link'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport { Checkbox } from '~/registry/miami/ui/checkbox'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n} from '~/registry/miami/ui/form'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst FormSchema = z.object({\n   mobile: z.boolean().default(false).optional(),\n})\n\nexport default function CheckboxReactHookFormSingle() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         mobile: true,\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"mobile\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow\">\n                     <FormControl>\n                        <Checkbox\n                           checked={field.value}\n                           onCheckedChange={field.onChange}\n                        />\n                     </FormControl>\n                     <div className=\"space-y-1 leading-none\">\n                        <FormLabel>\n                           Use different settings for my mobile devices\n                        </FormLabel>\n                        <FormDescription>\n                           You can manage your mobile notifications in the\n                           {' '}\n                           <Link href=\"/examples/forms\">mobile settings</Link>\n                           {' '}\n                           page.\n                        </FormDescription>\n                     </div>\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/checkbox-form-single.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport Link from \"next/link\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Checkbox } from \"~/registry/miami/ui/checkbox\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n} from \"~/registry/miami/ui/form\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst FormSchema = z.object({\n   mobile: z.boolean().default(false).optional(),\n})\n\nexport default function CheckboxReactHookFormSingle() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         mobile: true,\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"mobile\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow\">\n                     <FormControl>\n                        <Checkbox\n                           checked={field.value}\n                           onCheckedChange={field.onChange}\n                        />\n                     </FormControl>\n                     <div className=\"space-y-1 leading-none\">\n                        <FormLabel>\n                           Use different settings for my mobile devices\n                        </FormLabel>\n                        <FormDescription>\n                           You can manage your mobile notifications in the{\" \"}\n                           <Link href=\"/examples/forms\">mobile settings</Link>{\" \"}\n                           page.\n                        </FormDescription>\n                     </div>\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/checkbox-with-text.json b/apps/web/public/r/styles/miami/checkbox-with-text.json
index c8b05763..70f6fa78 100644
--- a/apps/web/public/r/styles/miami/checkbox-with-text.json
+++ b/apps/web/public/r/styles/miami/checkbox-with-text.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "checkbox-with-text",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "checkbox"
   ],
   "files": [
     {
-      "path": "example/checkbox-with-text.tsx",
-      "content": "'use client'\n\nimport { Checkbox } from '~/registry/miami/ui/checkbox'\n\nexport default function CheckboxWithText() {\n   return (\n      <div className=\"items-top flex space-x-2\">\n         <Checkbox id=\"terms1\" />\n         <div className=\"grid gap-1.5 leading-none\">\n            <label\n               htmlFor=\"terms1\"\n               className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n            >\n               Accept terms and conditions\n            </label>\n            <p className=\"text-muted-foreground text-sm\">\n               You agree to our Terms of Service and Privacy Policy.\n            </p>\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/checkbox-with-text.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"~/registry/miami/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n   return (\n      <div className=\"items-top flex space-x-2\">\n         <Checkbox id=\"terms1\" />\n         <div className=\"grid gap-1.5 leading-none\">\n            <label\n               htmlFor=\"terms1\"\n               className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n            >\n               Accept terms and conditions\n            </label>\n            <p className=\"text-muted-foreground text-sm\">\n               You agree to our Terms of Service and Privacy Policy.\n            </p>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/checkbox.json b/apps/web/public/r/styles/miami/checkbox.json
index ffc55c35..1e1f77f5 100644
--- a/apps/web/public/r/styles/miami/checkbox.json
+++ b/apps/web/public/r/styles/miami/checkbox.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "checkbox",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-checkbox"
   ],
   "files": [
     {
       "path": "ui/checkbox.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { CheckIcon } from '@radix-ui/react-icons'\n\nimport { ny } from '~/lib/utils'\n\nconst Checkbox = React.forwardRef<\n   React.ElementRef<typeof CheckboxPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <CheckboxPrimitive.Root\n      ref={ref}\n      className={ny(\n         'border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',\n         className,\n      )}\n      {...props}\n   >\n      <CheckboxPrimitive.Indicator\n         className={ny('flex items-center justify-center text-current')}\n      >\n         <CheckIcon className=\"size-4\" />\n      </CheckboxPrimitive.Indicator>\n   </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { CheckIcon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n   React.ElementRef<typeof CheckboxPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <CheckboxPrimitive.Root\n      ref={ref}\n      className={ny(\n         \"border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <CheckboxPrimitive.Indicator\n         className={ny(\"flex items-center justify-center text-current\")}\n      >\n         <CheckIcon className=\"size-4\" />\n      </CheckboxPrimitive.Indicator>\n   </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/client-tweet-card.json b/apps/web/public/r/styles/miami/client-tweet-card.json
index cdb7f685..ea37df68 100644
--- a/apps/web/public/r/styles/miami/client-tweet-card.json
+++ b/apps/web/public/r/styles/miami/client-tweet-card.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "client-tweet-card",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "react-tweet"
   ],
   "files": [
     {
       "path": "ui/client-tweet-card.tsx",
-      "content": "'use client'\n\nimport type { TweetProps } from 'react-tweet'\nimport { useTweet } from 'react-tweet'\nimport {\n   MagicTweet,\n   TweetNotFound,\n   TweetSkeleton,\n} from '~/registry/miami/ui/tweet-card'\n\nfunction ClientTweetCard({\n   id,\n   apiUrl,\n   fallback = <TweetSkeleton />,\n   components,\n   fetchOptions,\n   onError,\n   ...props\n}: TweetProps & { className?: string }) {\n   const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions)\n\n   if (isLoading)\n      return fallback\n   if (error || !data) {\n      const NotFound = components?.TweetNotFound || TweetNotFound\n      return <NotFound error={onError ? onError(error) : error} />\n   }\n\n   return <MagicTweet tweet={data} components={components} {...props} />\n}\n\nexport default ClientTweetCard\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { TweetProps } from \"react-tweet\"\nimport { useTweet } from \"react-tweet\"\nimport {\n   MagicTweet,\n   TweetNotFound,\n   TweetSkeleton,\n} from \"~/registry/miami/ui/tweet-card\"\n\nfunction ClientTweetCard({\n   id,\n   apiUrl,\n   fallback = <TweetSkeleton />,\n   components,\n   fetchOptions,\n   onError,\n   ...props\n}: TweetProps & { className?: string }) {\n   const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions)\n\n   if (isLoading) return fallback\n   if (error || !data) {\n      const NotFound = components?.TweetNotFound || TweetNotFound\n      return <NotFound error={onError ? onError(error) : error} />\n   }\n\n   return <MagicTweet tweet={data} components={components} {...props} />\n}\n\nexport default ClientTweetCard\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/collapsible-demo.json b/apps/web/public/r/styles/miami/collapsible-demo.json
index 41c13f67..f9e45262 100644
--- a/apps/web/public/r/styles/miami/collapsible-demo.json
+++ b/apps/web/public/r/styles/miami/collapsible-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "collapsible-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "collapsible"
   ],
   "files": [
     {
-      "path": "example/collapsible-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { CaretSortIcon } from '@radix-ui/react-icons'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/miami/ui/collapsible'\n\nexport default function CollapsibleDemo() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   return (\n      <Collapsible\n         open={isOpen}\n         onOpenChange={setIsOpen}\n         className=\"w-[350px] space-y-2\"\n      >\n         <div className=\"flex items-center justify-between space-x-4 px-4\">\n            <h4 className=\"text-sm font-semibold\">\n               @peduarte starred 3 repositories\n            </h4>\n            <CollapsibleTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <CaretSortIcon className=\"size-4\" />\n                  <span className=\"sr-only\">Toggle</span>\n               </Button>\n            </CollapsibleTrigger>\n         </div>\n         <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n            @radix-ui/primitives\n         </div>\n         <CollapsibleContent className=\"space-y-2\">\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @radix-ui/colors\n            </div>\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @stitches/react\n            </div>\n         </CollapsibleContent>\n      </Collapsible>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport { CaretSortIcon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   return (\n      <Collapsible\n         open={isOpen}\n         onOpenChange={setIsOpen}\n         className=\"w-[350px] space-y-2\"\n      >\n         <div className=\"flex items-center justify-between space-x-4 px-4\">\n            <h4 className=\"text-sm font-semibold\">\n               @peduarte starred 3 repositories\n            </h4>\n            <CollapsibleTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <CaretSortIcon className=\"size-4\" />\n                  <span className=\"sr-only\">Toggle</span>\n               </Button>\n            </CollapsibleTrigger>\n         </div>\n         <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n            @radix-ui/primitives\n         </div>\n         <CollapsibleContent className=\"space-y-2\">\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @radix-ui/colors\n            </div>\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @stitches/react\n            </div>\n         </CollapsibleContent>\n      </Collapsible>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/collapsible.json b/apps/web/public/r/styles/miami/collapsible.json
index 52c99085..d2e41174 100644
--- a/apps/web/public/r/styles/miami/collapsible.json
+++ b/apps/web/public/r/styles/miami/collapsible.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "collapsible",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-collapsible"
   ],
   "files": [
     {
       "path": "ui/collapsible.tsx",
-      "content": "'use client'\n\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/combobox-demo.json b/apps/web/public/r/styles/miami/combobox-demo.json
index 80e09b4d..5bade4ab 100644
--- a/apps/web/public/r/styles/miami/combobox-demo.json
+++ b/apps/web/public/r/styles/miami/combobox-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "combobox-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "command"
   ],
   "files": [
     {
-      "path": "example/combobox-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, ChevronsUpDown } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/registry/miami/ui/command'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\n\nconst frameworks = [\n   {\n      value: 'next.js',\n      label: 'Next.js',\n   },\n   {\n      value: 'sveltekit',\n      label: 'SvelteKit',\n   },\n   {\n      value: 'nuxt.js',\n      label: 'Nuxt.js',\n   },\n   {\n      value: 'remix',\n      label: 'Remix',\n   },\n   {\n      value: 'astro',\n      label: 'Astro',\n   },\n]\n\nexport default function ComboboxDemo() {\n   const [open, setOpen] = React.useState(false)\n   const [value, setValue] = React.useState('')\n\n   return (\n      <Popover open={open} onOpenChange={setOpen}>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               role=\"combobox\"\n               aria-expanded={open}\n               className=\"w-[200px] justify-between\"\n            >\n               {value\n                  ? frameworks.find(framework => framework.value === value)?.label\n                  : 'Select framework...'}\n               <ChevronsUpDown className=\"opacity-50\" />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[200px] p-0\">\n            <Command>\n               <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n               <CommandList>\n                  <CommandEmpty>No framework found.</CommandEmpty>\n                  <CommandGroup>\n                     {frameworks.map(framework => (\n                        <CommandItem\n                           key={framework.value}\n                           value={framework.value}\n                           onSelect={(currentValue) => {\n                              setValue(currentValue === value ? '' : currentValue)\n                              setOpen(false)\n                           }}\n                        >\n                           {framework.label}\n                           <Check\n                              className={ny(\n                                 'ml-auto',\n                                 value === framework.value ? 'opacity-100' : 'opacity-0',\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/miami/ui/command\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\nconst frameworks = [\n   {\n      value: \"next.js\",\n      label: \"Next.js\",\n   },\n   {\n      value: \"sveltekit\",\n      label: \"SvelteKit\",\n   },\n   {\n      value: \"nuxt.js\",\n      label: \"Nuxt.js\",\n   },\n   {\n      value: \"remix\",\n      label: \"Remix\",\n   },\n   {\n      value: \"astro\",\n      label: \"Astro\",\n   },\n]\n\nexport default function ComboboxDemo() {\n   const [open, setOpen] = React.useState(false)\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <Popover open={open} onOpenChange={setOpen}>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               role=\"combobox\"\n               aria-expanded={open}\n               className=\"w-[200px] justify-between\"\n            >\n               {value\n                  ? frameworks.find((framework) => framework.value === value)\n                       ?.label\n                  : \"Select framework...\"}\n               <ChevronsUpDown className=\"opacity-50\" />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[200px] p-0\">\n            <Command>\n               <CommandInput\n                  placeholder=\"Search framework...\"\n                  className=\"h-9\"\n               />\n               <CommandList>\n                  <CommandEmpty>No framework found.</CommandEmpty>\n                  <CommandGroup>\n                     {frameworks.map((framework) => (\n                        <CommandItem\n                           key={framework.value}\n                           value={framework.value}\n                           onSelect={(currentValue) => {\n                              setValue(\n                                 currentValue === value ? \"\" : currentValue,\n                              )\n                              setOpen(false)\n                           }}\n                        >\n                           {framework.label}\n                           <Check\n                              className={ny(\n                                 \"ml-auto\",\n                                 value === framework.value\n                                    ? \"opacity-100\"\n                                    : \"opacity-0\",\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/combobox-dropdown-menu.json b/apps/web/public/r/styles/miami/combobox-dropdown-menu.json
index ba3d7312..39915551 100644
--- a/apps/web/public/r/styles/miami/combobox-dropdown-menu.json
+++ b/apps/web/public/r/styles/miami/combobox-dropdown-menu.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "combobox-dropdown-menu",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "command",
     "dropdown-menu",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/combobox-dropdown-menu.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { MoreHorizontal } from 'lucide-react'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/registry/miami/ui/command'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\n\nconst labels = [\n   'feature',\n   'bug',\n   'enhancement',\n   'documentation',\n   'design',\n   'question',\n   'maintenance',\n]\n\nexport default function ComboboxDropdownMenu() {\n   const [label, setLabel] = React.useState('feature')\n   const [open, setOpen] = React.useState(false)\n\n   return (\n      <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n         <p className=\"text-sm font-medium leading-none\">\n            <span className=\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\">\n               {label}\n            </span>\n            <span className=\"text-muted-foreground\">Create a new project</span>\n         </p>\n         <DropdownMenu open={open} onOpenChange={setOpen}>\n            <DropdownMenuTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <MoreHorizontal />\n               </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n               <DropdownMenuLabel>Actions</DropdownMenuLabel>\n               <DropdownMenuGroup>\n                  <DropdownMenuItem>Assign to...</DropdownMenuItem>\n                  <DropdownMenuItem>Set due date...</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuSub>\n                     <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>\n                     <DropdownMenuSubContent className=\"p-0\">\n                        <Command>\n                           <CommandInput\n                              placeholder=\"Filter label...\"\n                              autoFocus\n                              className=\"h-9\"\n                           />\n                           <CommandList>\n                              <CommandEmpty>No label found.</CommandEmpty>\n                              <CommandGroup>\n                                 {labels.map(label => (\n                                    <CommandItem\n                                       key={label}\n                                       value={label}\n                                       onSelect={(value) => {\n                                          setLabel(value)\n                                          setOpen(false)\n                                       }}\n                                    >\n                                       {label}\n                                    </CommandItem>\n                                 ))}\n                              </CommandGroup>\n                           </CommandList>\n                        </Command>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"text-red-600\">\n                     Delete\n                     <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n               </DropdownMenuGroup>\n            </DropdownMenuContent>\n         </DropdownMenu>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/combobox-dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport { MoreHorizontal } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/miami/ui/command\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\n\nconst labels = [\n   \"feature\",\n   \"bug\",\n   \"enhancement\",\n   \"documentation\",\n   \"design\",\n   \"question\",\n   \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n   const [label, setLabel] = React.useState(\"feature\")\n   const [open, setOpen] = React.useState(false)\n\n   return (\n      <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n         <p className=\"text-sm font-medium leading-none\">\n            <span className=\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\">\n               {label}\n            </span>\n            <span className=\"text-muted-foreground\">Create a new project</span>\n         </p>\n         <DropdownMenu open={open} onOpenChange={setOpen}>\n            <DropdownMenuTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <MoreHorizontal />\n               </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n               <DropdownMenuLabel>Actions</DropdownMenuLabel>\n               <DropdownMenuGroup>\n                  <DropdownMenuItem>Assign to...</DropdownMenuItem>\n                  <DropdownMenuItem>Set due date...</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuSub>\n                     <DropdownMenuSubTrigger>\n                        Apply label\n                     </DropdownMenuSubTrigger>\n                     <DropdownMenuSubContent className=\"p-0\">\n                        <Command>\n                           <CommandInput\n                              placeholder=\"Filter label...\"\n                              autoFocus\n                              className=\"h-9\"\n                           />\n                           <CommandList>\n                              <CommandEmpty>No label found.</CommandEmpty>\n                              <CommandGroup>\n                                 {labels.map((label) => (\n                                    <CommandItem\n                                       key={label}\n                                       value={label}\n                                       onSelect={(value) => {\n                                          setLabel(value)\n                                          setOpen(false)\n                                       }}\n                                    >\n                                       {label}\n                                    </CommandItem>\n                                 ))}\n                              </CommandGroup>\n                           </CommandList>\n                        </Command>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"text-red-600\">\n                     Delete\n                     <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n               </DropdownMenuGroup>\n            </DropdownMenuContent>\n         </DropdownMenu>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/combobox-form.json b/apps/web/public/r/styles/miami/combobox-form.json
index b9ef006d..52a21aec 100644
--- a/apps/web/public/r/styles/miami/combobox-form.json
+++ b/apps/web/public/r/styles/miami/combobox-form.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "combobox-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "command",
     "form"
   ],
   "files": [
     {
-      "path": "example/combobox-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { Check, ChevronsUpDown } from 'lucide-react'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { ny } from '~/lib/utils'\nimport { toast } from '~/registry/miami/hooks/use-toast'\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/registry/miami/ui/command'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/miami/ui/form'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\n\nconst languages = [\n   { label: 'English', value: 'en' },\n   { label: 'French', value: 'fr' },\n   { label: 'German', value: 'de' },\n   { label: 'Spanish', value: 'es' },\n   { label: 'Portuguese', value: 'pt' },\n   { label: 'Russian', value: 'ru' },\n   { label: 'Japanese', value: 'ja' },\n   { label: 'Korean', value: 'ko' },\n   { label: 'Chinese', value: 'zh' },\n] as const\n\nconst FormSchema = z.object({\n   language: z.string({\n      required_error: 'Please select a language.',\n   }),\n})\n\nexport default function ComboboxForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"language\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Language</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 role=\"combobox\"\n                                 className={ny(\n                                    'w-[200px] justify-between',\n                                    !field.value && 'text-muted-foreground',\n                                 )}\n                              >\n                                 {field.value\n                                    ? languages.find(\n                                       language => language.value === field.value,\n                                    )?.label\n                                    : 'Select language'}\n                                 <ChevronsUpDown className=\"opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-[200px] p-0\">\n                           <Command>\n                              <CommandInput\n                                 placeholder=\"Search framework...\"\n                                 className=\"h-9\"\n                              />\n                              <CommandList>\n                                 <CommandEmpty>No framework found.</CommandEmpty>\n                                 <CommandGroup>\n                                    {languages.map(language => (\n                                       <CommandItem\n                                          value={language.label}\n                                          key={language.value}\n                                          onSelect={() => {\n                                             form.setValue('language', language.value)\n                                          }}\n                                       >\n                                          {language.label}\n                                          <Check\n                                             className={ny(\n                                                'ml-auto',\n                                                language.value === field.value\n                                                   ? 'opacity-100'\n                                                   : 'opacity-0',\n                                             )}\n                                          />\n                                       </CommandItem>\n                                    ))}\n                                 </CommandGroup>\n                              </CommandList>\n                           </Command>\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        This is the language that will be used in the dashboard.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/combobox-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { ny } from \"~/lib/utils\"\nimport { toast } from \"~/registry/miami/hooks/use-toast\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/miami/ui/command\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/miami/ui/form\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\nconst languages = [\n   { label: \"English\", value: \"en\" },\n   { label: \"French\", value: \"fr\" },\n   { label: \"German\", value: \"de\" },\n   { label: \"Spanish\", value: \"es\" },\n   { label: \"Portuguese\", value: \"pt\" },\n   { label: \"Russian\", value: \"ru\" },\n   { label: \"Japanese\", value: \"ja\" },\n   { label: \"Korean\", value: \"ko\" },\n   { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n   language: z.string({\n      required_error: \"Please select a language.\",\n   }),\n})\n\nexport default function ComboboxForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"language\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Language</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 role=\"combobox\"\n                                 className={ny(\n                                    \"w-[200px] justify-between\",\n                                    !field.value && \"text-muted-foreground\",\n                                 )}\n                              >\n                                 {field.value\n                                    ? languages.find(\n                                         (language) =>\n                                            language.value === field.value,\n                                      )?.label\n                                    : \"Select language\"}\n                                 <ChevronsUpDown className=\"opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-[200px] p-0\">\n                           <Command>\n                              <CommandInput\n                                 placeholder=\"Search framework...\"\n                                 className=\"h-9\"\n                              />\n                              <CommandList>\n                                 <CommandEmpty>\n                                    No framework found.\n                                 </CommandEmpty>\n                                 <CommandGroup>\n                                    {languages.map((language) => (\n                                       <CommandItem\n                                          value={language.label}\n                                          key={language.value}\n                                          onSelect={() => {\n                                             form.setValue(\n                                                \"language\",\n                                                language.value,\n                                             )\n                                          }}\n                                       >\n                                          {language.label}\n                                          <Check\n                                             className={ny(\n                                                \"ml-auto\",\n                                                language.value === field.value\n                                                   ? \"opacity-100\"\n                                                   : \"opacity-0\",\n                                             )}\n                                          />\n                                       </CommandItem>\n                                    ))}\n                                 </CommandGroup>\n                              </CommandList>\n                           </Command>\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        This is the language that will be used in the dashboard.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/combobox-popover.json b/apps/web/public/r/styles/miami/combobox-popover.json
index 7e708c17..a8b77f8a 100644
--- a/apps/web/public/r/styles/miami/combobox-popover.json
+++ b/apps/web/public/r/styles/miami/combobox-popover.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "combobox-popover",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "combobox",
     "popover"
   ],
   "files": [
     {
-      "path": "example/combobox-popover.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/registry/miami/ui/command'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\n\ninterface Status {\n   value: string\n   label: string\n}\n\nconst statuses: Status[] = [\n   {\n      value: 'backlog',\n      label: 'Backlog',\n   },\n   {\n      value: 'todo',\n      label: 'Todo',\n   },\n   {\n      value: 'in progress',\n      label: 'In Progress',\n   },\n   {\n      value: 'done',\n      label: 'Done',\n   },\n   {\n      value: 'canceled',\n      label: 'Canceled',\n   },\n]\n\nexport default function ComboboxPopover() {\n   const [open, setOpen] = React.useState(false)\n   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n      null,\n   )\n\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <p className=\"text-muted-foreground text-sm\">Status</p>\n         <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n               <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n                  {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n               <Command>\n                  <CommandInput placeholder=\"Change status...\" />\n                  <CommandList>\n                     <CommandEmpty>No results found.</CommandEmpty>\n                     <CommandGroup>\n                        {statuses.map(status => (\n                           <CommandItem\n                              key={status.value}\n                              value={status.value}\n                              onSelect={(value) => {\n                                 setSelectedStatus(\n                                    statuses.find(priority => priority.value === value)\n                                    || null,\n                                 )\n                                 setOpen(false)\n                              }}\n                           >\n                              {status.label}\n                           </CommandItem>\n                        ))}\n                     </CommandGroup>\n                  </CommandList>\n               </Command>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/combobox-popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/miami/ui/command\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\ninterface Status {\n   value: string\n   label: string\n}\n\nconst statuses: Status[] = [\n   {\n      value: \"backlog\",\n      label: \"Backlog\",\n   },\n   {\n      value: \"todo\",\n      label: \"Todo\",\n   },\n   {\n      value: \"in progress\",\n      label: \"In Progress\",\n   },\n   {\n      value: \"done\",\n      label: \"Done\",\n   },\n   {\n      value: \"canceled\",\n      label: \"Canceled\",\n   },\n]\n\nexport default function ComboboxPopover() {\n   const [open, setOpen] = React.useState(false)\n   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n      null,\n   )\n\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <p className=\"text-muted-foreground text-sm\">Status</p>\n         <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n               <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n                  {selectedStatus ? (\n                     <>{selectedStatus.label}</>\n                  ) : (\n                     <>+ Set status</>\n                  )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n               <Command>\n                  <CommandInput placeholder=\"Change status...\" />\n                  <CommandList>\n                     <CommandEmpty>No results found.</CommandEmpty>\n                     <CommandGroup>\n                        {statuses.map((status) => (\n                           <CommandItem\n                              key={status.value}\n                              value={status.value}\n                              onSelect={(value) => {\n                                 setSelectedStatus(\n                                    statuses.find(\n                                       (priority) => priority.value === value,\n                                    ) || null,\n                                 )\n                                 setOpen(false)\n                              }}\n                           >\n                              {status.label}\n                           </CommandItem>\n                        ))}\n                     </CommandGroup>\n                  </CommandList>\n               </Command>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/combobox-responsive.json b/apps/web/public/r/styles/miami/combobox-responsive.json
index c90cbfa9..051db62d 100644
--- a/apps/web/public/r/styles/miami/combobox-responsive.json
+++ b/apps/web/public/r/styles/miami/combobox-responsive.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "combobox-responsive",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "combobox",
     "popover",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/combobox-responsive.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { useMediaQuery } from '~/hooks/use-media-query'\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/registry/miami/ui/command'\nimport {\n   Drawer,\n   DrawerContent,\n   DrawerTrigger,\n} from '~/registry/miami/ui/drawer'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\n\ninterface Status {\n   value: string\n   label: string\n}\n\nconst statuses: Status[] = [\n   {\n      value: 'backlog',\n      label: 'Backlog',\n   },\n   {\n      value: 'todo',\n      label: 'Todo',\n   },\n   {\n      value: 'in progress',\n      label: 'In Progress',\n   },\n   {\n      value: 'done',\n      label: 'Done',\n   },\n   {\n      value: 'canceled',\n      label: 'Canceled',\n   },\n]\n\nexport default function ComboBoxResponsive() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery('(min-width: 768px)')\n   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n      null,\n   )\n\n   if (isDesktop) {\n      return (\n         <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n               <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n                  {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n               <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n            </PopoverContent>\n         </Popover>\n      )\n   }\n\n   return (\n      <Drawer open={open} onOpenChange={setOpen}>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n               {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n            </Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mt-4 border-t\">\n               <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n\nfunction StatusList({\n   setOpen,\n   setSelectedStatus,\n}: {\n   setOpen: (open: boolean) => void\n   setSelectedStatus: (status: Status | null) => void\n}) {\n   return (\n      <Command>\n         <CommandInput placeholder=\"Filter status...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n               {statuses.map(status => (\n                  <CommandItem\n                     key={status.value}\n                     value={status.value}\n                     onSelect={(value) => {\n                        setSelectedStatus(\n                           statuses.find(priority => priority.value === value) || null,\n                        )\n                        setOpen(false)\n                     }}\n                  >\n                     {status.label}\n                  </CommandItem>\n               ))}\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/combobox-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"~/hooks/use-media-query\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/miami/ui/command\"\nimport {\n   Drawer,\n   DrawerContent,\n   DrawerTrigger,\n} from \"~/registry/miami/ui/drawer\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\ninterface Status {\n   value: string\n   label: string\n}\n\nconst statuses: Status[] = [\n   {\n      value: \"backlog\",\n      label: \"Backlog\",\n   },\n   {\n      value: \"todo\",\n      label: \"Todo\",\n   },\n   {\n      value: \"in progress\",\n      label: \"In Progress\",\n   },\n   {\n      value: \"done\",\n      label: \"Done\",\n   },\n   {\n      value: \"canceled\",\n      label: \"Canceled\",\n   },\n]\n\nexport default function ComboBoxResponsive() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n      null,\n   )\n\n   if (isDesktop) {\n      return (\n         <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n               <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n                  {selectedStatus ? (\n                     <>{selectedStatus.label}</>\n                  ) : (\n                     <>+ Set status</>\n                  )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n               <StatusList\n                  setOpen={setOpen}\n                  setSelectedStatus={setSelectedStatus}\n               />\n            </PopoverContent>\n         </Popover>\n      )\n   }\n\n   return (\n      <Drawer open={open} onOpenChange={setOpen}>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n               {selectedStatus ? (\n                  <>{selectedStatus.label}</>\n               ) : (\n                  <>+ Set status</>\n               )}\n            </Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mt-4 border-t\">\n               <StatusList\n                  setOpen={setOpen}\n                  setSelectedStatus={setSelectedStatus}\n               />\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n\nfunction StatusList({\n   setOpen,\n   setSelectedStatus,\n}: {\n   setOpen: (open: boolean) => void\n   setSelectedStatus: (status: Status | null) => void\n}) {\n   return (\n      <Command>\n         <CommandInput placeholder=\"Filter status...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n               {statuses.map((status) => (\n                  <CommandItem\n                     key={status.value}\n                     value={status.value}\n                     onSelect={(value) => {\n                        setSelectedStatus(\n                           statuses.find(\n                              (priority) => priority.value === value,\n                           ) || null,\n                        )\n                        setOpen(false)\n                     }}\n                  >\n                     {status.label}\n                  </CommandItem>\n               ))}\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/command-demo.json b/apps/web/public/r/styles/miami/command-demo.json
index fe22dfda..a8bd17ca 100644
--- a/apps/web/public/r/styles/miami/command-demo.json
+++ b/apps/web/public/r/styles/miami/command-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "command-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "command"
   ],
   "files": [
     {
-      "path": "example/command-demo.tsx",
-      "content": "import {\n   CalendarIcon,\n   EnvelopeClosedIcon,\n   FaceIcon,\n   GearIcon,\n   PersonIcon,\n   RocketIcon,\n} from '@radix-ui/react-icons'\n\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from '~/registry/miami/ui/command'\n\nexport default function CommandDemo() {\n   return (\n      <Command className=\"rounded-lg border shadow-md\">\n         <CommandInput placeholder=\"Type a command or search...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Suggestions\">\n               <CommandItem>\n                  <CalendarIcon className=\"mr-2 size-4\" />\n                  <span>Calendar</span>\n               </CommandItem>\n               <CommandItem>\n                  <FaceIcon className=\"mr-2 size-4\" />\n                  <span>Search Emoji</span>\n               </CommandItem>\n               <CommandItem>\n                  <RocketIcon className=\"mr-2 size-4\" />\n                  <span>Launch</span>\n               </CommandItem>\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup heading=\"Settings\">\n               <CommandItem>\n                  <PersonIcon className=\"mr-2 size-4\" />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <EnvelopeClosedIcon className=\"mr-2 size-4\" />\n                  <span>Mail</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <GearIcon className=\"mr-2 size-4\" />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n               </CommandItem>\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/command-demo.tsx",
+      "content": "import {\n   CalendarIcon,\n   EnvelopeClosedIcon,\n   FaceIcon,\n   GearIcon,\n   PersonIcon,\n   RocketIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from \"~/registry/miami/ui/command\"\n\nexport default function CommandDemo() {\n   return (\n      <Command className=\"rounded-lg border shadow-md\">\n         <CommandInput placeholder=\"Type a command or search...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Suggestions\">\n               <CommandItem>\n                  <CalendarIcon className=\"mr-2 size-4\" />\n                  <span>Calendar</span>\n               </CommandItem>\n               <CommandItem>\n                  <FaceIcon className=\"mr-2 size-4\" />\n                  <span>Search Emoji</span>\n               </CommandItem>\n               <CommandItem>\n                  <RocketIcon className=\"mr-2 size-4\" />\n                  <span>Launch</span>\n               </CommandItem>\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup heading=\"Settings\">\n               <CommandItem>\n                  <PersonIcon className=\"mr-2 size-4\" />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <EnvelopeClosedIcon className=\"mr-2 size-4\" />\n                  <span>Mail</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <GearIcon className=\"mr-2 size-4\" />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n               </CommandItem>\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/command-dialog.json b/apps/web/public/r/styles/miami/command-dialog.json
index eb24dce0..a87bf41c 100644
--- a/apps/web/public/r/styles/miami/command-dialog.json
+++ b/apps/web/public/r/styles/miami/command-dialog.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "command-dialog",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "command",
     "dialog"
   ],
   "files": [
     {
-      "path": "example/command-dialog.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   CalendarIcon,\n   EnvelopeClosedIcon,\n   FaceIcon,\n   GearIcon,\n   PersonIcon,\n   RocketIcon,\n} from '@radix-ui/react-icons'\n\nimport {\n   CommandDialog,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from '~/registry/miami/ui/command'\n\nexport default function CommandDialogDemo() {\n   const [open, setOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      const down = (e: KeyboardEvent) => {\n         if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {\n            e.preventDefault()\n            setOpen(open => !open)\n         }\n      }\n\n      document.addEventListener('keydown', down)\n      return () => document.removeEventListener('keydown', down)\n   }, [])\n\n   return (\n      <>\n         <p className=\"text-muted-foreground text-sm\">\n            Press\n            {' '}\n            <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100\">\n               <span className=\"text-xs\">⌘</span>\n               J\n            </kbd>\n         </p>\n         <CommandDialog open={open} onOpenChange={setOpen}>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n               <CommandEmpty>No results found.</CommandEmpty>\n               <CommandGroup heading=\"Suggestions\">\n                  <CommandItem>\n                     <CalendarIcon className=\"mr-2 size-4\" />\n                     <span>Calendar</span>\n                  </CommandItem>\n                  <CommandItem>\n                     <FaceIcon className=\"mr-2 size-4\" />\n                     <span>Search Emoji</span>\n                  </CommandItem>\n                  <CommandItem>\n                     <RocketIcon className=\"mr-2 size-4\" />\n                     <span>Launch</span>\n                  </CommandItem>\n               </CommandGroup>\n               <CommandSeparator />\n               <CommandGroup heading=\"Settings\">\n                  <CommandItem>\n                     <PersonIcon className=\"mr-2 size-4\" />\n                     <span>Profile</span>\n                     <CommandShortcut>⌘P</CommandShortcut>\n                  </CommandItem>\n                  <CommandItem>\n                     <EnvelopeClosedIcon className=\"mr-2 size-4\" />\n                     <span>Mail</span>\n                     <CommandShortcut>⌘B</CommandShortcut>\n                  </CommandItem>\n                  <CommandItem>\n                     <GearIcon className=\"mr-2 size-4\" />\n                     <span>Settings</span>\n                     <CommandShortcut>⌘S</CommandShortcut>\n                  </CommandItem>\n               </CommandGroup>\n            </CommandList>\n         </CommandDialog>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/command-dialog.tsx",
+      "content": "\"use client\"\n\nimport {\n   CalendarIcon,\n   EnvelopeClosedIcon,\n   FaceIcon,\n   GearIcon,\n   PersonIcon,\n   RocketIcon,\n} from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport {\n   CommandDialog,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from \"~/registry/miami/ui/command\"\n\nexport default function CommandDialogDemo() {\n   const [open, setOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      const down = (e: KeyboardEvent) => {\n         if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n            e.preventDefault()\n            setOpen((open) => !open)\n         }\n      }\n\n      document.addEventListener(\"keydown\", down)\n      return () => document.removeEventListener(\"keydown\", down)\n   }, [])\n\n   return (\n      <>\n         <p className=\"text-muted-foreground text-sm\">\n            Press{\" \"}\n            <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100\">\n               <span className=\"text-xs\">⌘</span>J\n            </kbd>\n         </p>\n         <CommandDialog open={open} onOpenChange={setOpen}>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n               <CommandEmpty>No results found.</CommandEmpty>\n               <CommandGroup heading=\"Suggestions\">\n                  <CommandItem>\n                     <CalendarIcon className=\"mr-2 size-4\" />\n                     <span>Calendar</span>\n                  </CommandItem>\n                  <CommandItem>\n                     <FaceIcon className=\"mr-2 size-4\" />\n                     <span>Search Emoji</span>\n                  </CommandItem>\n                  <CommandItem>\n                     <RocketIcon className=\"mr-2 size-4\" />\n                     <span>Launch</span>\n                  </CommandItem>\n               </CommandGroup>\n               <CommandSeparator />\n               <CommandGroup heading=\"Settings\">\n                  <CommandItem>\n                     <PersonIcon className=\"mr-2 size-4\" />\n                     <span>Profile</span>\n                     <CommandShortcut>⌘P</CommandShortcut>\n                  </CommandItem>\n                  <CommandItem>\n                     <EnvelopeClosedIcon className=\"mr-2 size-4\" />\n                     <span>Mail</span>\n                     <CommandShortcut>⌘B</CommandShortcut>\n                  </CommandItem>\n                  <CommandItem>\n                     <GearIcon className=\"mr-2 size-4\" />\n                     <span>Settings</span>\n                     <CommandShortcut>⌘S</CommandShortcut>\n                  </CommandItem>\n               </CommandGroup>\n            </CommandList>\n         </CommandDialog>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/command.json b/apps/web/public/r/styles/miami/command.json
index 219b43f0..d730743c 100644
--- a/apps/web/public/r/styles/miami/command.json
+++ b/apps/web/public/r/styles/miami/command.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "command",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "cmdk@1.0.0"
   ],
@@ -10,8 +12,8 @@
   "files": [
     {
       "path": "ui/command.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport type { DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Dialog, DialogContent } from '~/registry/miami/ui/dialog'\n\nconst Command = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive\n      ref={ref}\n      className={ny(\n         'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md',\n         className,\n      )}\n      {...props}\n   />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nfunction CommandDialog({ children, ...props }: DialogProps) {\n   return (\n      <Dialog {...props}>\n         <DialogContent className=\"overflow-hidden p-0\">\n            <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5\">\n               {children}\n            </Command>\n         </DialogContent>\n      </Dialog>\n   )\n}\n\nconst CommandInput = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Input>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n   <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n         ref={ref}\n         className={ny(\n            'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n            className,\n         )}\n         {...props}\n      />\n   </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.List\n      ref={ref}\n      className={ny('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n      {...props}\n   />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Empty>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n   <CommandPrimitive.Empty\n      ref={ref}\n      className=\"py-6 text-center text-sm\"\n      {...props}\n   />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Group>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Group\n      ref={ref}\n      className={ny(\n         'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Separator\n      ref={ref}\n      className={ny('bg-border -mx-1 h-px', className)}\n      {...props}\n   />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Item\n      ref={ref}\n      className={ny(\n         'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nfunction CommandShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\n            'text-muted-foreground ml-auto text-xs tracking-widest',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n   Command,\n   CommandDialog,\n   CommandInput,\n   CommandList,\n   CommandEmpty,\n   CommandGroup,\n   CommandItem,\n   CommandShortcut,\n   CommandSeparator,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Dialog, DialogContent } from \"~/registry/miami/ui/dialog\"\n\nconst Command = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive\n      ref={ref}\n      className={ny(\n         \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md\",\n         className,\n      )}\n      {...props}\n   />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nfunction CommandDialog({ children, ...props }: DialogProps) {\n   return (\n      <Dialog {...props}>\n         <DialogContent className=\"overflow-hidden p-0\">\n            <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5\">\n               {children}\n            </Command>\n         </DialogContent>\n      </Dialog>\n   )\n}\n\nconst CommandInput = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Input>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n   <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n         ref={ref}\n         className={ny(\n            \"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n            className,\n         )}\n         {...props}\n      />\n   </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.List\n      ref={ref}\n      className={ny(\n         \"max-h-[300px] overflow-y-auto overflow-x-hidden\",\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Empty>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n   <CommandPrimitive.Empty\n      ref={ref}\n      className=\"py-6 text-center text-sm\"\n      {...props}\n   />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Group>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Group\n      ref={ref}\n      className={ny(\n         \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Separator\n      ref={ref}\n      className={ny(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n   />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Item\n      ref={ref}\n      className={ny(\n         \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nfunction CommandShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\n            \"text-muted-foreground ml-auto text-xs tracking-widest\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n   Command,\n   CommandDialog,\n   CommandInput,\n   CommandList,\n   CommandEmpty,\n   CommandGroup,\n   CommandItem,\n   CommandShortcut,\n   CommandSeparator,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/confetti-basic-cannon.json b/apps/web/public/r/styles/miami/confetti-basic-cannon.json
index 8db6e879..7da744bc 100644
--- a/apps/web/public/r/styles/miami/confetti-basic-cannon.json
+++ b/apps/web/public/r/styles/miami/confetti-basic-cannon.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-basic-cannon",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-basic-cannon.tsx",
-      "content": "import { ConfettiButton } from '~/registry/miami/ui/confetti'\n\nexport default function ConfettiButtonDemo() {\n   return (\n      <div className=\"relative\">\n         <ConfettiButton>Confetti 🎉</ConfettiButton>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-basic-cannon.tsx",
+      "content": "import { ConfettiButton } from \"~/registry/miami/ui/confetti\"\n\nexport default function ConfettiButtonDemo() {\n   return (\n      <div className=\"relative\">\n         <ConfettiButton>Confetti 🎉</ConfettiButton>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/confetti-custom-shapes.json b/apps/web/public/r/styles/miami/confetti-custom-shapes.json
index 1647069d..450a134d 100644
--- a/apps/web/public/r/styles/miami/confetti-custom-shapes.json
+++ b/apps/web/public/r/styles/miami/confetti-custom-shapes.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-custom-shapes",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-custom-shapes.tsx",
-      "content": "import confetti from 'canvas-confetti'\nimport { Button } from '~/components/ui/button'\n\nexport default function ConfettiCustomShapes() {\n   const handleClick = () => {\n      const scalar = 2\n      const triangle = confetti.shapeFromPath({\n         path: 'M0 10 L5 0 L10 10z',\n      })\n      const square = confetti.shapeFromPath({\n         path: 'M0 0 L10 0 L10 10 L0 10 Z',\n      })\n      const coin = confetti.shapeFromPath({\n         path: 'M5 0 A5 5 0 1 0 5 10 A5 5 0 1 0 5 0 Z',\n      })\n      const tree = confetti.shapeFromPath({\n         path: 'M5 0 L10 10 L0 10 Z',\n      })\n\n      const defaults = {\n         spread: 360,\n         ticks: 60,\n         gravity: 0,\n         decay: 0.96,\n         startVelocity: 20,\n         shapes: [triangle, square, coin, tree],\n         scalar,\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 30,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 5,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: ['circle'],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative flex items-center justify-center\">\n         <Button onClick={handleClick}>Trigger Shapes</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-custom-shapes.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"~/components/ui/button\"\n\nexport default function ConfettiCustomShapes() {\n   const handleClick = () => {\n      const scalar = 2\n      const triangle = confetti.shapeFromPath({\n         path: \"M0 10 L5 0 L10 10z\",\n      })\n      const square = confetti.shapeFromPath({\n         path: \"M0 0 L10 0 L10 10 L0 10 Z\",\n      })\n      const coin = confetti.shapeFromPath({\n         path: \"M5 0 A5 5 0 1 0 5 10 A5 5 0 1 0 5 0 Z\",\n      })\n      const tree = confetti.shapeFromPath({\n         path: \"M5 0 L10 10 L0 10 Z\",\n      })\n\n      const defaults = {\n         spread: 360,\n         ticks: 60,\n         gravity: 0,\n         decay: 0.96,\n         startVelocity: 20,\n         shapes: [triangle, square, coin, tree],\n         scalar,\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 30,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 5,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: [\"circle\"],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative flex items-center justify-center\">\n         <Button onClick={handleClick}>Trigger Shapes</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/confetti-demo.json b/apps/web/public/r/styles/miami/confetti-demo.json
index c97da93b..7396f752 100644
--- a/apps/web/public/r/styles/miami/confetti-demo.json
+++ b/apps/web/public/r/styles/miami/confetti-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-demo.tsx",
-      "content": "'use client'\n\nimport { useRef } from 'react'\n\nimport type { ConfettiRef } from '~/registry/default/ui/confetti'\nimport Confetti from '~/registry/default/ui/confetti'\n\nexport default function ConfettiDemo() {\n   const confettiRef = useRef<ConfettiRef>(null)\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Confetti\n         </span>\n\n         <Confetti\n            ref={confettiRef}\n            className=\"absolute left-0 top-0 z-0 size-full\"\n            onMouseEnter={() => {\n               confettiRef.current?.fire({})\n            }}\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-demo.tsx",
+      "content": "\"use client\"\n\nimport { useRef } from \"react\"\n\nimport type { ConfettiRef } from \"~/registry/default/ui/confetti\"\nimport Confetti from \"~/registry/default/ui/confetti\"\n\nexport default function ConfettiDemo() {\n   const confettiRef = useRef<ConfettiRef>(null)\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Confetti\n         </span>\n\n         <Confetti\n            ref={confettiRef}\n            className=\"absolute left-0 top-0 z-0 size-full\"\n            onMouseEnter={() => {\n               confettiRef.current?.fire({})\n            }}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/confetti-emoji.json b/apps/web/public/r/styles/miami/confetti-emoji.json
index b9e7c5ba..2ac04436 100644
--- a/apps/web/public/r/styles/miami/confetti-emoji.json
+++ b/apps/web/public/r/styles/miami/confetti-emoji.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-emoji",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-emoji.tsx",
-      "content": "import confetti from 'canvas-confetti'\nimport { Button } from '~/components/ui/button'\n\nexport default function ConfettiEmoji() {\n   const handleClick = () => {\n      const scalar = 2\n      const unicorn = confetti.shapeFromText({ text: '🦄', scalar })\n\n      const defaults = {\n         spread: 360,\n         ticks: 60,\n         gravity: 0,\n         decay: 0.96,\n         startVelocity: 20,\n         shapes: [unicorn],\n         scalar,\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 30,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 5,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: ['circle'],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative justify-center\">\n         <Button onClick={handleClick}>Trigger Emoji</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-emoji.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"~/components/ui/button\"\n\nexport default function ConfettiEmoji() {\n   const handleClick = () => {\n      const scalar = 2\n      const unicorn = confetti.shapeFromText({ text: \"🦄\", scalar })\n\n      const defaults = {\n         spread: 360,\n         ticks: 60,\n         gravity: 0,\n         decay: 0.96,\n         startVelocity: 20,\n         shapes: [unicorn],\n         scalar,\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 30,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 5,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: [\"circle\"],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative justify-center\">\n         <Button onClick={handleClick}>Trigger Emoji</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/confetti-fireworks.json b/apps/web/public/r/styles/miami/confetti-fireworks.json
index 35e19cf2..a8c7615e 100644
--- a/apps/web/public/r/styles/miami/confetti-fireworks.json
+++ b/apps/web/public/r/styles/miami/confetti-fireworks.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-fireworks",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-fireworks.tsx",
-      "content": "import confetti from 'canvas-confetti'\nimport { Button } from '~/components/ui/button'\n\nexport default function ConfettiFireworks() {\n   const handleClick = () => {\n      const duration = 5 * 1000\n      const animationEnd = Date.now() + duration\n      const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }\n\n      const randomInRange = (min: number, max: number) =>\n         Math.random() * (max - min) + min\n\n      const interval = window.setInterval(() => {\n         const timeLeft = animationEnd - Date.now()\n\n         if (timeLeft <= 0)\n            return clearInterval(interval)\n\n         const particleCount = 50 * (timeLeft / duration)\n         confetti({\n            ...defaults,\n            particleCount,\n            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },\n         })\n         confetti({\n            ...defaults,\n            particleCount,\n            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },\n         })\n      }, 250)\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Fireworks</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-fireworks.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"~/components/ui/button\"\n\nexport default function ConfettiFireworks() {\n   const handleClick = () => {\n      const duration = 5 * 1000\n      const animationEnd = Date.now() + duration\n      const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }\n\n      const randomInRange = (min: number, max: number) =>\n         Math.random() * (max - min) + min\n\n      const interval = window.setInterval(() => {\n         const timeLeft = animationEnd - Date.now()\n\n         if (timeLeft <= 0) return clearInterval(interval)\n\n         const particleCount = 50 * (timeLeft / duration)\n         confetti({\n            ...defaults,\n            particleCount,\n            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },\n         })\n         confetti({\n            ...defaults,\n            particleCount,\n            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },\n         })\n      }, 250)\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Fireworks</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/confetti-hover.json b/apps/web/public/r/styles/miami/confetti-hover.json
index 22216845..30e36c76 100644
--- a/apps/web/public/r/styles/miami/confetti-hover.json
+++ b/apps/web/public/r/styles/miami/confetti-hover.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-hover",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-hover.tsx",
-      "content": "'use client'\n\nimport { useRef } from 'react'\nimport type { ConfettiRef } from '~/registry/miami/ui/confetti'\nimport Confetti from '~/registry/miami/ui/confetti'\n\nexport default function ConfettiBasicCannon() {\n   const confettiRef = useRef<ConfettiRef>(null)\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full max-w-lg flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Confetti\n         </span>\n\n         <Confetti\n            ref={confettiRef}\n            className=\"absolute left-0 top-0 z-0 size-full\"\n            onMouseEnter={() => {\n               confettiRef.current?.fire({})\n            }}\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-hover.tsx",
+      "content": "\"use client\"\n\nimport { useRef } from \"react\"\nimport type { ConfettiRef } from \"~/registry/miami/ui/confetti\"\nimport Confetti from \"~/registry/miami/ui/confetti\"\n\nexport default function ConfettiBasicCannon() {\n   const confettiRef = useRef<ConfettiRef>(null)\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full max-w-lg flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Confetti\n         </span>\n\n         <Confetti\n            ref={confettiRef}\n            className=\"absolute left-0 top-0 z-0 size-full\"\n            onMouseEnter={() => {\n               confettiRef.current?.fire({})\n            }}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/confetti-random-direction.json b/apps/web/public/r/styles/miami/confetti-random-direction.json
index 3c3bcfc9..5006fdc6 100644
--- a/apps/web/public/r/styles/miami/confetti-random-direction.json
+++ b/apps/web/public/r/styles/miami/confetti-random-direction.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-random-direction",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-random-direction.tsx",
-      "content": "import { ConfettiButton } from '~/registry/miami/ui/confetti'\n\nexport default function ConfettiButtonDemo() {\n   return (\n      <div className=\"relative\">\n         <ConfettiButton\n            options={{\n               get angle() {\n                  return Math.random() * 360\n               },\n            }}\n         >\n            Random Confetti 🎉\n         </ConfettiButton>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-random-direction.tsx",
+      "content": "import { ConfettiButton } from \"~/registry/miami/ui/confetti\"\n\nexport default function ConfettiButtonDemo() {\n   return (\n      <div className=\"relative\">\n         <ConfettiButton\n            options={{\n               get angle() {\n                  return Math.random() * 360\n               },\n            }}\n         >\n            Random Confetti 🎉\n         </ConfettiButton>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/confetti-side-cannons.json b/apps/web/public/r/styles/miami/confetti-side-cannons.json
index c71a6535..d2649358 100644
--- a/apps/web/public/r/styles/miami/confetti-side-cannons.json
+++ b/apps/web/public/r/styles/miami/confetti-side-cannons.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-side-cannons",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-side-cannons.tsx",
-      "content": "import confetti from 'canvas-confetti'\nimport { Button } from '~/components/ui/button'\n\nexport default function ConfettiSideCannons() {\n   const handleClick = () => {\n      const end = Date.now() + 3 * 1000 // 3 seconds\n      const colors = ['#a786ff', '#fd8bbc', '#eca184', '#f8deb1']\n\n      const frame = () => {\n         if (Date.now() > end)\n            return\n\n         confetti({\n            particleCount: 2,\n            angle: 60,\n            spread: 55,\n            startVelocity: 60,\n            origin: { x: 0, y: 0.5 },\n            colors,\n         })\n         confetti({\n            particleCount: 2,\n            angle: 120,\n            spread: 55,\n            startVelocity: 60,\n            origin: { x: 1, y: 0.5 },\n            colors,\n         })\n\n         requestAnimationFrame(frame)\n      }\n\n      frame()\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Side Cannons</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-side-cannons.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"~/components/ui/button\"\n\nexport default function ConfettiSideCannons() {\n   const handleClick = () => {\n      const end = Date.now() + 3 * 1000 // 3 seconds\n      const colors = [\"#a786ff\", \"#fd8bbc\", \"#eca184\", \"#f8deb1\"]\n\n      const frame = () => {\n         if (Date.now() > end) return\n\n         confetti({\n            particleCount: 2,\n            angle: 60,\n            spread: 55,\n            startVelocity: 60,\n            origin: { x: 0, y: 0.5 },\n            colors,\n         })\n         confetti({\n            particleCount: 2,\n            angle: 120,\n            spread: 55,\n            startVelocity: 60,\n            origin: { x: 1, y: 0.5 },\n            colors,\n         })\n\n         requestAnimationFrame(frame)\n      }\n\n      frame()\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Side Cannons</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/confetti-stars.json b/apps/web/public/r/styles/miami/confetti-stars.json
index 04920b41..a69daa1f 100644
--- a/apps/web/public/r/styles/miami/confetti-stars.json
+++ b/apps/web/public/r/styles/miami/confetti-stars.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti-stars",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/confetti-stars.tsx",
-      "content": "import confetti from 'canvas-confetti'\nimport { Button } from '~/components/ui/button'\n\nexport default function ConfettiStars() {\n   const handleClick = () => {\n      const defaults = {\n         spread: 360,\n         ticks: 50,\n         gravity: 0,\n         decay: 0.94,\n         startVelocity: 30,\n         colors: ['#FFE400', '#FFBD00', '#E89400', '#FFCA6C', '#FDFFB8'],\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 40,\n            scalar: 1.2,\n            shapes: ['star'],\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 10,\n            scalar: 0.75,\n            shapes: ['circle'],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Stars</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/confetti-stars.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"~/components/ui/button\"\n\nexport default function ConfettiStars() {\n   const handleClick = () => {\n      const defaults = {\n         spread: 360,\n         ticks: 50,\n         gravity: 0,\n         decay: 0.94,\n         startVelocity: 30,\n         colors: [\"#FFE400\", \"#FFBD00\", \"#E89400\", \"#FFCA6C\", \"#FDFFB8\"],\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 40,\n            scalar: 1.2,\n            shapes: [\"star\"],\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 10,\n            scalar: 0.75,\n            shapes: [\"circle\"],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Stars</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/confetti.json b/apps/web/public/r/styles/miami/confetti.json
index 3d9444a7..5c324530 100644
--- a/apps/web/public/r/styles/miami/confetti.json
+++ b/apps/web/public/r/styles/miami/confetti.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "confetti",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "canvas-confetti",
     "@types/canvas-confetti"
@@ -8,8 +10,8 @@
   "files": [
     {
       "path": "ui/confetti.tsx",
-      "content": "'use client'\nimport confetti from 'canvas-confetti'\nimport type { ReactNode } from 'react'\nimport React, { createContext, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react'\n\nimport type {\n   GlobalOptions as ConfettiGlobalOptions,\n   CreateTypes as ConfettiInstance,\n   Options as ConfettiOptions,\n} from 'canvas-confetti'\nimport { Button } from '~/components/ui/button'\nimport type { ButtonProps } from '~/components/ui/button'\n\ninterface Api {\n   fire: (options?: ConfettiOptions) => void\n}\n\ntype Props = React.ComponentPropsWithRef<'canvas'> & {\n   options?: ConfettiOptions\n   globalOptions?: ConfettiGlobalOptions\n   manualstart?: boolean\n   children?: ReactNode\n}\n\nexport type ConfettiRef = Api | null\n\nconst ConfettiContext = createContext<Api>({} as Api)\n\nconst Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {\n   const {\n      options,\n      globalOptions = { resize: true, useWorker: true },\n      manualstart = false,\n      children,\n      ...rest\n   } = props\n   const instanceRef = useRef<ConfettiInstance | null>(null) // confetti instance\n\n   const canvasRef = useCallback(\n      // https://react.dev/reference/react-dom/components/common#ref-callback\n      // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs\n      (node: HTMLCanvasElement) => {\n         if (node !== null) {\n            // <canvas> is mounted => create the confetti instance\n            if (instanceRef.current)\n               return // if not already created\n            instanceRef.current = confetti.create(node, {\n               ...globalOptions,\n               resize: true,\n            })\n         }\n         else {\n            // <canvas> is unmounted => reset and destroy instanceRef\n            if (instanceRef.current) {\n               instanceRef.current.reset()\n               instanceRef.current = null\n            }\n         }\n      },\n      [globalOptions],\n   )\n\n   // `fire` is a function that calls the instance() with `opts` merged with `options`\n   const fire = useCallback(\n      (opts = {}) => instanceRef.current?.({ ...options, ...opts }),\n      [options],\n   )\n\n   const api = useMemo(\n      () => ({\n         fire,\n      }),\n      [fire],\n   )\n\n   useImperativeHandle(ref, () => api, [api])\n\n   useEffect(() => {\n      if (!manualstart)\n         fire()\n   }, [manualstart, fire])\n\n   return (\n      <ConfettiContext.Provider value={api}>\n         <canvas ref={canvasRef} {...rest} />\n         {children}\n      </ConfettiContext.Provider>\n   )\n})\n\ninterface ConfettiButtonProps extends ButtonProps {\n   options?: ConfettiOptions &\n   ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }\n   children?: React.ReactNode\n}\n\nfunction ConfettiButton({ options, children, ...props }: ConfettiButtonProps) {\n   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      const rect = event.currentTarget.getBoundingClientRect()\n      const x = rect.left + rect.width / 2\n      const y = rect.top + rect.height / 2\n      confetti({\n         ...options,\n         origin: {\n            x: x / window.innerWidth,\n            y: y / window.innerHeight,\n         },\n      })\n   }\n\n   return (\n      <Button onClick={handleClick} {...props}>\n         {children}\n      </Button>\n   )\n}\n\nexport { Confetti, ConfettiButton }\n\nexport default Confetti\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport confetti from \"canvas-confetti\"\nimport type { ReactNode } from \"react\"\nimport type React from \"react\"\nimport {\n   createContext,\n   forwardRef,\n   useCallback,\n   useEffect,\n   useImperativeHandle,\n   useMemo,\n   useRef,\n} from \"react\"\n\nimport type {\n   GlobalOptions as ConfettiGlobalOptions,\n   CreateTypes as ConfettiInstance,\n   Options as ConfettiOptions,\n} from \"canvas-confetti\"\nimport { Button } from \"~/components/ui/button\"\nimport type { ButtonProps } from \"~/components/ui/button\"\n\ninterface Api {\n   fire: (options?: ConfettiOptions) => void\n}\n\ntype Props = React.ComponentPropsWithRef<\"canvas\"> & {\n   options?: ConfettiOptions\n   globalOptions?: ConfettiGlobalOptions\n   manualstart?: boolean\n   children?: ReactNode\n}\n\nexport type ConfettiRef = Api | null\n\nconst ConfettiContext = createContext<Api>({} as Api)\n\nconst Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {\n   const {\n      options,\n      globalOptions = { resize: true, useWorker: true },\n      manualstart = false,\n      children,\n      ...rest\n   } = props\n   const instanceRef = useRef<ConfettiInstance | null>(null) // confetti instance\n\n   const canvasRef = useCallback(\n      // https://react.dev/reference/react-dom/components/common#ref-callback\n      // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs\n      (node: HTMLCanvasElement) => {\n         if (node !== null) {\n            // <canvas> is mounted => create the confetti instance\n            if (instanceRef.current) return // if not already created\n            instanceRef.current = confetti.create(node, {\n               ...globalOptions,\n               resize: true,\n            })\n         } else {\n            // <canvas> is unmounted => reset and destroy instanceRef\n            if (instanceRef.current) {\n               instanceRef.current.reset()\n               instanceRef.current = null\n            }\n         }\n      },\n      [globalOptions],\n   )\n\n   // `fire` is a function that calls the instance() with `opts` merged with `options`\n   const fire = useCallback(\n      (opts = {}) => instanceRef.current?.({ ...options, ...opts }),\n      [options],\n   )\n\n   const api = useMemo(\n      () => ({\n         fire,\n      }),\n      [fire],\n   )\n\n   useImperativeHandle(ref, () => api, [api])\n\n   useEffect(() => {\n      if (!manualstart) fire()\n   }, [manualstart, fire])\n\n   return (\n      <ConfettiContext.Provider value={api}>\n         <canvas ref={canvasRef} {...rest} />\n         {children}\n      </ConfettiContext.Provider>\n   )\n})\n\ninterface ConfettiButtonProps extends ButtonProps {\n   options?: ConfettiOptions &\n      ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }\n   children?: React.ReactNode\n}\n\nfunction ConfettiButton({ options, children, ...props }: ConfettiButtonProps) {\n   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      const rect = event.currentTarget.getBoundingClientRect()\n      const x = rect.left + rect.width / 2\n      const y = rect.top + rect.height / 2\n      confetti({\n         ...options,\n         origin: {\n            x: x / window.innerWidth,\n            y: y / window.innerHeight,\n         },\n      })\n   }\n\n   return (\n      <Button onClick={handleClick} {...props}>\n         {children}\n      </Button>\n   )\n}\n\nexport { Confetti, ConfettiButton }\n\nexport default Confetti\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/context-menu-demo.json b/apps/web/public/r/styles/miami/context-menu-demo.json
index 4b8b19b4..70afe983 100644
--- a/apps/web/public/r/styles/miami/context-menu-demo.json
+++ b/apps/web/public/r/styles/miami/context-menu-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "context-menu-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "context-menu"
   ],
   "files": [
     {
-      "path": "example/context-menu-demo.tsx",
-      "content": "import {\n   ContextMenu,\n   ContextMenuCheckboxItem,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuLabel,\n   ContextMenuRadioGroup,\n   ContextMenuRadioItem,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuTrigger,\n} from '~/registry/miami/ui/context-menu'\n\nexport default function ContextMenuDemo() {\n   return (\n      <ContextMenu>\n         <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n            Right click here\n         </ContextMenuTrigger>\n         <ContextMenuContent className=\"w-64\">\n            <ContextMenuItem inset>\n               Back\n               <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset disabled>\n               Forward\n               <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset>\n               Reload\n               <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSub>\n               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n               <ContextMenuSubContent className=\"w-48\">\n                  <ContextMenuItem>\n                     Save Page As...\n                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n                  </ContextMenuItem>\n                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                  <ContextMenuItem>Name Window...</ContextMenuItem>\n                  <ContextMenuSeparator />\n                  <ContextMenuItem>Developer Tools</ContextMenuItem>\n               </ContextMenuSubContent>\n            </ContextMenuSub>\n            <ContextMenuSeparator />\n            <ContextMenuCheckboxItem checked>\n               Show Bookmarks Bar\n               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuSeparator />\n            <ContextMenuRadioGroup value=\"pedro\">\n               <ContextMenuLabel inset>People</ContextMenuLabel>\n               <ContextMenuSeparator />\n               <ContextMenuRadioItem value=\"pedro\">\n                  Pedro Duarte\n               </ContextMenuRadioItem>\n               <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n         </ContextMenuContent>\n      </ContextMenu>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/context-menu-demo.tsx",
+      "content": "import {\n   ContextMenu,\n   ContextMenuCheckboxItem,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuLabel,\n   ContextMenuRadioGroup,\n   ContextMenuRadioItem,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuTrigger,\n} from \"~/registry/miami/ui/context-menu\"\n\nexport default function ContextMenuDemo() {\n   return (\n      <ContextMenu>\n         <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n            Right click here\n         </ContextMenuTrigger>\n         <ContextMenuContent className=\"w-64\">\n            <ContextMenuItem inset>\n               Back\n               <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset disabled>\n               Forward\n               <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset>\n               Reload\n               <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSub>\n               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n               <ContextMenuSubContent className=\"w-48\">\n                  <ContextMenuItem>\n                     Save Page As...\n                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n                  </ContextMenuItem>\n                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                  <ContextMenuItem>Name Window...</ContextMenuItem>\n                  <ContextMenuSeparator />\n                  <ContextMenuItem>Developer Tools</ContextMenuItem>\n               </ContextMenuSubContent>\n            </ContextMenuSub>\n            <ContextMenuSeparator />\n            <ContextMenuCheckboxItem checked>\n               Show Bookmarks Bar\n               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuSeparator />\n            <ContextMenuRadioGroup value=\"pedro\">\n               <ContextMenuLabel inset>People</ContextMenuLabel>\n               <ContextMenuSeparator />\n               <ContextMenuRadioItem value=\"pedro\">\n                  Pedro Duarte\n               </ContextMenuRadioItem>\n               <ContextMenuRadioItem value=\"colm\">\n                  Colm Tuite\n               </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n         </ContextMenuContent>\n      </ContextMenu>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/context-menu.json b/apps/web/public/r/styles/miami/context-menu.json
index 71a68fa0..de2b39b9 100644
--- a/apps/web/public/r/styles/miami/context-menu.json
+++ b/apps/web/public/r/styles/miami/context-menu.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "context-menu",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-context-menu"
   ],
   "files": [
     {
       "path": "ui/context-menu.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu'\nimport {\n   CheckIcon,\n   ChevronRightIcon,\n   DotFilledIcon,\n} from '@radix-ui/react-icons'\n\nimport { ny } from '~/lib/utils'\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <ContextMenuPrimitive.SubTrigger\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n   </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.SubContent\n      ref={ref}\n      className={ny(\n         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n         ref={ref}\n         className={ny(\n            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',\n            className,\n         )}\n         {...props}\n      />\n   </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <ContextMenuPrimitive.Item\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <ContextMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <ContextMenuPrimitive.ItemIndicator>\n            <CheckIcon className=\"size-4\" />\n         </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName\n  = ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <ContextMenuPrimitive.RadioItem\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <ContextMenuPrimitive.ItemIndicator>\n            <DotFilledIcon className=\"size-4 fill-current\" />\n         </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <ContextMenuPrimitive.Label\n      ref={ref}\n      className={ny(\n         'text-foreground px-2 py-1.5 text-sm font-semibold',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.Separator\n      ref={ref}\n      className={ny('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n   />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nfunction ContextMenuShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\n            'text-muted-foreground ml-auto text-xs tracking-widest',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nContextMenuShortcut.displayName = 'ContextMenuShortcut'\n\nexport {\n   ContextMenu,\n   ContextMenuTrigger,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuCheckboxItem,\n   ContextMenuRadioItem,\n   ContextMenuLabel,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuGroup,\n   ContextMenuPortal,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuRadioGroup,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport {\n   CheckIcon,\n   ChevronRightIcon,\n   DotFilledIcon,\n} from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <ContextMenuPrimitive.SubTrigger\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n   </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.SubContent\n      ref={ref}\n      className={ny(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg\",\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n         ref={ref}\n         className={ny(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md\",\n            className,\n         )}\n         {...props}\n      />\n   </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <ContextMenuPrimitive.Item\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <ContextMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <ContextMenuPrimitive.ItemIndicator>\n            <CheckIcon className=\"size-4\" />\n         </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n   ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <ContextMenuPrimitive.RadioItem\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <ContextMenuPrimitive.ItemIndicator>\n            <DotFilledIcon className=\"size-4 fill-current\" />\n         </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <ContextMenuPrimitive.Label\n      ref={ref}\n      className={ny(\n         \"text-foreground px-2 py-1.5 text-sm font-semibold\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.Separator\n      ref={ref}\n      className={ny(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nfunction ContextMenuShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\n            \"text-muted-foreground ml-auto text-xs tracking-widest\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n   ContextMenu,\n   ContextMenuTrigger,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuCheckboxItem,\n   ContextMenuRadioItem,\n   ContextMenuLabel,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuGroup,\n   ContextMenuPortal,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuRadioGroup,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/cool-mode-custom.json b/apps/web/public/r/styles/miami/cool-mode-custom.json
index 98abe7c0..5c3659fb 100644
--- a/apps/web/public/r/styles/miami/cool-mode-custom.json
+++ b/apps/web/public/r/styles/miami/cool-mode-custom.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "cool-mode-custom",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/cool-mode-custom.tsx",
-      "content": "import React from 'react'\nimport { Button } from '~/components/ui/button'\nimport { CoolMode } from '~/registry/miami/ui/cool-mode'\n\nexport default function CoolModeCustom() {\n   return (\n      <div className=\"relative justify-center\">\n         <CoolMode\n            options={{\n               particle:\n            'https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg',\n            }}\n         >\n            <Button>Click Me!</Button>\n         </CoolMode>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/cool-mode-custom.tsx",
+      "content": "import React from \"react\"\nimport { Button } from \"~/components/ui/button\"\nimport { CoolMode } from \"~/registry/miami/ui/cool-mode\"\n\nexport default function CoolModeCustom() {\n   return (\n      <div className=\"relative justify-center\">\n         <CoolMode\n            options={{\n               particle:\n                  \"https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg\",\n            }}\n         >\n            <Button>Click Me!</Button>\n         </CoolMode>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/cool-mode-demo.json b/apps/web/public/r/styles/miami/cool-mode-demo.json
index 62ad9156..6d87f23e 100644
--- a/apps/web/public/r/styles/miami/cool-mode-demo.json
+++ b/apps/web/public/r/styles/miami/cool-mode-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "cool-mode-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/cool-mode-demo.tsx",
-      "content": "import React from 'react'\nimport { CoolMode } from '~/registry/miami/ui/cool-mode'\nimport { Button } from '~/components/ui/button'\n\nexport default function CoolModeDemo() {\n   return (\n      <div className=\"relative justify-center\">\n         <CoolMode>\n            <Button>Click Me!</Button>\n         </CoolMode>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/cool-mode-demo.tsx",
+      "content": "import React from \"react\"\nimport { Button } from \"~/components/ui/button\"\nimport { CoolMode } from \"~/registry/miami/ui/cool-mode\"\n\nexport default function CoolModeDemo() {\n   return (\n      <div className=\"relative justify-center\">\n         <CoolMode>\n            <Button>Click Me!</Button>\n         </CoolMode>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/cool-mode.json b/apps/web/public/r/styles/miami/cool-mode.json
index f626e17e..c0f17c0d 100644
--- a/apps/web/public/r/styles/miami/cool-mode.json
+++ b/apps/web/public/r/styles/miami/cool-mode.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "cool-mode",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/cool-mode.tsx",
-      "content": "'use client'\nimport type { ReactNode } from 'react'\nimport React, { useEffect, useRef } from 'react'\n\nexport interface BaseParticle {\n   element: HTMLElement | SVGSVGElement\n   left: number\n   size: number\n   top: number\n}\n\nexport interface BaseParticleOptions {\n   particle?: string\n   size?: number\n}\n\nexport interface CoolParticle extends BaseParticle {\n   direction: number\n   speedHorz: number\n   speedUp: number\n   spinSpeed: number\n   spinVal: number\n}\n\nexport interface CoolParticleOptions extends BaseParticleOptions {\n   particleCount?: number\n   speedHorz?: number\n   speedUp?: number\n}\n\nfunction getContainer() {\n   const id = '_coolMode_effect'\n   const existingContainer = document.getElementById(id)\n\n   if (existingContainer)\n      return existingContainer\n\n   const container = document.createElement('div')\n   container.setAttribute('id', id)\n   container.setAttribute(\n      'style',\n      'overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647',\n   )\n\n   document.body.appendChild(container)\n\n   return container\n}\n\nlet instanceCounter = 0\n\nfunction applyParticleEffect(\n   element: HTMLElement,\n   options?: CoolParticleOptions,\n): () => void {\n   instanceCounter++\n\n   const defaultParticle = 'circle'\n   const particleType = options?.particle || defaultParticle\n   const sizes = [15, 20, 25, 35, 45]\n   const limit = 45\n\n   let particles: CoolParticle[] = []\n   let autoAddParticle = false\n   let mouseX = 0\n   let mouseY = 0\n\n   const container = getContainer()\n\n   function generateParticle() {\n      const size\n      = options?.size || sizes[Math.floor(Math.random() * sizes.length)]\n      const speedHorz = options?.speedHorz || Math.random() * 10\n      const speedUp = options?.speedUp || Math.random() * 25\n      const spinVal = Math.random() * 360\n      const spinSpeed = Math.random() * 35 * (Math.random() <= 0.5 ? -1 : 1)\n      const top = mouseY - size / 2\n      const left = mouseX - size / 2\n      const direction = Math.random() <= 0.5 ? -1 : 1\n\n      const particle = document.createElement('div')\n\n      if (particleType === 'circle') {\n         const svgNS = 'http://www.w3.org/2000/svg'\n         const circleSVG = document.createElementNS(svgNS, 'svg')\n         const circle = document.createElementNS(svgNS, 'circle')\n         circle.setAttributeNS(null, 'cx', (size / 2).toString())\n         circle.setAttributeNS(null, 'cy', (size / 2).toString())\n         circle.setAttributeNS(null, 'r', (size / 2).toString())\n         circle.setAttributeNS(\n            null,\n            'fill',\n        `hsl(${Math.random() * 360}, 70%, 50%)`,\n         )\n\n         circleSVG.appendChild(circle)\n         circleSVG.setAttribute('width', size.toString())\n         circleSVG.setAttribute('height', size.toString())\n\n         particle.appendChild(circleSVG)\n      }\n      else {\n         particle.innerHTML = `<img src=\"${particleType}\" width=\"${size}\" height=\"${size}\" style=\"border-radius: 50%\">`\n      }\n\n      particle.style.position = 'absolute'\n      particle.style.transform = `translate3d(${left}px, ${top}px, 0px) rotate(${spinVal}deg)`\n\n      container.appendChild(particle)\n\n      particles.push({\n         direction,\n         element: particle,\n         left,\n         size,\n         speedHorz,\n         speedUp,\n         spinSpeed,\n         spinVal,\n         top,\n      })\n   }\n\n   function refreshParticles() {\n      particles.forEach((p) => {\n         p.left = p.left - p.speedHorz * p.direction\n         p.top = p.top - p.speedUp\n         p.speedUp = Math.min(p.size, p.speedUp - 1)\n         p.spinVal = p.spinVal + p.spinSpeed\n\n         if (\n            p.top\n            >= Math.max(window.innerHeight, document.body.clientHeight) + p.size\n         ) {\n            particles = particles.filter(o => o !== p)\n            p.element.remove()\n         }\n\n         p.element.setAttribute(\n            'style',\n            [\n               'position:absolute',\n               'will-change:transform',\n          `top:${p.top}px`,\n          `left:${p.left}px`,\n          `transform:rotate(${p.spinVal}deg)`,\n            ].join(';'),\n         )\n      })\n   }\n\n   let animationFrame: number | undefined\n\n   let lastParticleTimestamp = 0\n   const particleGenerationDelay = 30\n\n   function loop() {\n      const currentTime = performance.now()\n      if (\n         autoAddParticle\n         && particles.length < limit\n         && currentTime - lastParticleTimestamp > particleGenerationDelay\n      ) {\n         generateParticle()\n         lastParticleTimestamp = currentTime\n      }\n\n      refreshParticles()\n      animationFrame = requestAnimationFrame(loop)\n   }\n\n   loop()\n\n   const isTouchInteraction = 'ontouchstart' in window\n\n   const tap = isTouchInteraction ? 'touchstart' : 'mousedown'\n   const tapEnd = isTouchInteraction ? 'touchend' : 'mouseup'\n   const move = isTouchInteraction ? 'touchmove' : 'mousemove'\n\n   const updateMousePosition = (e: MouseEvent | TouchEvent) => {\n      if ('touches' in e) {\n         mouseX = e.touches?.[0].clientX\n         mouseY = e.touches?.[0].clientY\n      }\n      else {\n         mouseX = e.clientX\n         mouseY = e.clientY\n      }\n   }\n\n   const tapHandler = (e: MouseEvent | TouchEvent) => {\n      updateMousePosition(e)\n      autoAddParticle = true\n   }\n\n   const disableAutoAddParticle = () => {\n      autoAddParticle = false\n   }\n\n   element.addEventListener(move, updateMousePosition, { passive: true })\n   element.addEventListener(tap, tapHandler, { passive: true })\n   element.addEventListener(tapEnd, disableAutoAddParticle, { passive: true })\n   element.addEventListener('mouseleave', disableAutoAddParticle, {\n      passive: true,\n   })\n\n   return () => {\n      element.removeEventListener(move, updateMousePosition)\n      element.removeEventListener(tap, tapHandler)\n      element.removeEventListener(tapEnd, disableAutoAddParticle)\n      element.removeEventListener('mouseleave', disableAutoAddParticle)\n\n      const interval = setInterval(() => {\n         if (animationFrame && particles.length === 0) {\n            cancelAnimationFrame(animationFrame)\n            clearInterval(interval)\n\n            if (--instanceCounter === 0)\n               container.remove()\n         }\n      }, 500)\n   }\n}\n\ninterface CoolModeProps {\n   children: ReactNode\n   options?: CoolParticleOptions\n}\n\nexport const CoolMode: React.FC<CoolModeProps> = ({ children, options }) => {\n   const ref = useRef<HTMLElement>(null)\n\n   useEffect(() => {\n      if (ref.current)\n         return applyParticleEffect(ref.current, options)\n   }, [options])\n\n   return React.cloneElement(children as React.ReactElement, { ref })\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport type { ReactNode } from \"react\"\nimport React, { useEffect, useRef } from \"react\"\n\nexport interface BaseParticle {\n   element: HTMLElement | SVGSVGElement\n   left: number\n   size: number\n   top: number\n}\n\nexport interface BaseParticleOptions {\n   particle?: string\n   size?: number\n}\n\nexport interface CoolParticle extends BaseParticle {\n   direction: number\n   speedHorz: number\n   speedUp: number\n   spinSpeed: number\n   spinVal: number\n}\n\nexport interface CoolParticleOptions extends BaseParticleOptions {\n   particleCount?: number\n   speedHorz?: number\n   speedUp?: number\n}\n\nfunction getContainer() {\n   const id = \"_coolMode_effect\"\n   const existingContainer = document.getElementById(id)\n\n   if (existingContainer) return existingContainer\n\n   const container = document.createElement(\"div\")\n   container.setAttribute(\"id\", id)\n   container.setAttribute(\n      \"style\",\n      \"overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647\",\n   )\n\n   document.body.appendChild(container)\n\n   return container\n}\n\nlet instanceCounter = 0\n\nfunction applyParticleEffect(\n   element: HTMLElement,\n   options?: CoolParticleOptions,\n): () => void {\n   instanceCounter++\n\n   const defaultParticle = \"circle\"\n   const particleType = options?.particle || defaultParticle\n   const sizes = [15, 20, 25, 35, 45]\n   const limit = 45\n\n   let particles: CoolParticle[] = []\n   let autoAddParticle = false\n   let mouseX = 0\n   let mouseY = 0\n\n   const container = getContainer()\n\n   function generateParticle() {\n      const size =\n         options?.size || sizes[Math.floor(Math.random() * sizes.length)]\n      const speedHorz = options?.speedHorz || Math.random() * 10\n      const speedUp = options?.speedUp || Math.random() * 25\n      const spinVal = Math.random() * 360\n      const spinSpeed = Math.random() * 35 * (Math.random() <= 0.5 ? -1 : 1)\n      const top = mouseY - size / 2\n      const left = mouseX - size / 2\n      const direction = Math.random() <= 0.5 ? -1 : 1\n\n      const particle = document.createElement(\"div\")\n\n      if (particleType === \"circle\") {\n         const svgNS = \"http://www.w3.org/2000/svg\"\n         const circleSVG = document.createElementNS(svgNS, \"svg\")\n         const circle = document.createElementNS(svgNS, \"circle\")\n         circle.setAttributeNS(null, \"cx\", (size / 2).toString())\n         circle.setAttributeNS(null, \"cy\", (size / 2).toString())\n         circle.setAttributeNS(null, \"r\", (size / 2).toString())\n         circle.setAttributeNS(\n            null,\n            \"fill\",\n            `hsl(${Math.random() * 360}, 70%, 50%)`,\n         )\n\n         circleSVG.appendChild(circle)\n         circleSVG.setAttribute(\"width\", size.toString())\n         circleSVG.setAttribute(\"height\", size.toString())\n\n         particle.appendChild(circleSVG)\n      } else {\n         particle.innerHTML = `<img src=\"${particleType}\" width=\"${size}\" height=\"${size}\" style=\"border-radius: 50%\">`\n      }\n\n      particle.style.position = \"absolute\"\n      particle.style.transform = `translate3d(${left}px, ${top}px, 0px) rotate(${spinVal}deg)`\n\n      container.appendChild(particle)\n\n      particles.push({\n         direction,\n         element: particle,\n         left,\n         size,\n         speedHorz,\n         speedUp,\n         spinSpeed,\n         spinVal,\n         top,\n      })\n   }\n\n   function refreshParticles() {\n      particles.forEach((p) => {\n         p.left = p.left - p.speedHorz * p.direction\n         p.top = p.top - p.speedUp\n         p.speedUp = Math.min(p.size, p.speedUp - 1)\n         p.spinVal = p.spinVal + p.spinSpeed\n\n         if (\n            p.top >=\n            Math.max(window.innerHeight, document.body.clientHeight) + p.size\n         ) {\n            particles = particles.filter((o) => o !== p)\n            p.element.remove()\n         }\n\n         p.element.setAttribute(\n            \"style\",\n            [\n               \"position:absolute\",\n               \"will-change:transform\",\n               `top:${p.top}px`,\n               `left:${p.left}px`,\n               `transform:rotate(${p.spinVal}deg)`,\n            ].join(\";\"),\n         )\n      })\n   }\n\n   let animationFrame: number | undefined\n\n   let lastParticleTimestamp = 0\n   const particleGenerationDelay = 30\n\n   function loop() {\n      const currentTime = performance.now()\n      if (\n         autoAddParticle &&\n         particles.length < limit &&\n         currentTime - lastParticleTimestamp > particleGenerationDelay\n      ) {\n         generateParticle()\n         lastParticleTimestamp = currentTime\n      }\n\n      refreshParticles()\n      animationFrame = requestAnimationFrame(loop)\n   }\n\n   loop()\n\n   const isTouchInteraction = \"ontouchstart\" in window\n\n   const tap = isTouchInteraction ? \"touchstart\" : \"mousedown\"\n   const tapEnd = isTouchInteraction ? \"touchend\" : \"mouseup\"\n   const move = isTouchInteraction ? \"touchmove\" : \"mousemove\"\n\n   const updateMousePosition = (e: MouseEvent | TouchEvent) => {\n      if (\"touches\" in e) {\n         mouseX = e.touches?.[0].clientX\n         mouseY = e.touches?.[0].clientY\n      } else {\n         mouseX = e.clientX\n         mouseY = e.clientY\n      }\n   }\n\n   const tapHandler = (e: MouseEvent | TouchEvent) => {\n      updateMousePosition(e)\n      autoAddParticle = true\n   }\n\n   const disableAutoAddParticle = () => {\n      autoAddParticle = false\n   }\n\n   element.addEventListener(move, updateMousePosition, { passive: true })\n   element.addEventListener(tap, tapHandler, { passive: true })\n   element.addEventListener(tapEnd, disableAutoAddParticle, { passive: true })\n   element.addEventListener(\"mouseleave\", disableAutoAddParticle, {\n      passive: true,\n   })\n\n   return () => {\n      element.removeEventListener(move, updateMousePosition)\n      element.removeEventListener(tap, tapHandler)\n      element.removeEventListener(tapEnd, disableAutoAddParticle)\n      element.removeEventListener(\"mouseleave\", disableAutoAddParticle)\n\n      const interval = setInterval(() => {\n         if (animationFrame && particles.length === 0) {\n            cancelAnimationFrame(animationFrame)\n            clearInterval(interval)\n\n            if (--instanceCounter === 0) container.remove()\n         }\n      }, 500)\n   }\n}\n\ninterface CoolModeProps {\n   children: ReactNode\n   options?: CoolParticleOptions\n}\n\nexport const CoolMode: React.FC<CoolModeProps> = ({ children, options }) => {\n   const ref = useRef<HTMLElement>(null)\n\n   useEffect(() => {\n      if (ref.current) return applyParticleEffect(ref.current, options)\n   }, [options])\n\n   return React.cloneElement(children as React.ReactElement, { ref })\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/data-table-demo.json b/apps/web/public/r/styles/miami/data-table-demo.json
index 8517ee5a..a9a1835f 100644
--- a/apps/web/public/r/styles/miami/data-table-demo.json
+++ b/apps/web/public/r/styles/miami/data-table-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "data-table-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "data-table"
   ],
   "files": [
     {
-      "path": "example/data-table-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   CaretSortIcon,\n   ChevronDownIcon,\n   DotsHorizontalIcon,\n} from '@radix-ui/react-icons'\nimport type {\n   ColumnDef,\n   ColumnFiltersState,\n   SortingState,\n   VisibilityState,\n} from '@tanstack/react-table'\nimport {\n   flexRender,\n   getCoreRowModel,\n   getFilteredRowModel,\n   getPaginationRowModel,\n   getSortedRowModel,\n   useReactTable,\n} from '@tanstack/react-table'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport { Checkbox } from '~/registry/miami/ui/checkbox'\nimport {\n   DropdownMenu,\n   DropdownMenuCheckboxItem,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport { Input } from '~/registry/miami/ui/input'\nimport {\n   Table,\n   TableBody,\n   TableCell,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from '~/registry/miami/ui/table'\n\nconst data: Payment[] = [\n   {\n      id: 'm5gr84i9',\n      amount: 316,\n      status: 'success',\n      email: 'ken99@yahoo.com',\n   },\n   {\n      id: '3u1reuv4',\n      amount: 242,\n      status: 'success',\n      email: 'Abe45@gmail.com',\n   },\n   {\n      id: 'derv1ws0',\n      amount: 837,\n      status: 'processing',\n      email: 'Monserrat44@gmail.com',\n   },\n   {\n      id: '5kma53ae',\n      amount: 874,\n      status: 'success',\n      email: 'Silas22@gmail.com',\n   },\n   {\n      id: 'bhqecj4p',\n      amount: 721,\n      status: 'failed',\n      email: 'carmella@hotmail.com',\n   },\n]\n\nexport interface Payment {\n   id: string\n   amount: number\n   status: 'pending' | 'processing' | 'success' | 'failed'\n   email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n   {\n      id: 'select',\n      header: ({ table }) => (\n         <Checkbox\n            checked={\n               table.getIsAllPageRowsSelected()\n               || (table.getIsSomePageRowsSelected() && 'indeterminate')\n            }\n            onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}\n            aria-label=\"Select all\"\n         />\n      ),\n      cell: ({ row }) => (\n         <Checkbox\n            checked={row.getIsSelected()}\n            onCheckedChange={value => row.toggleSelected(!!value)}\n            aria-label=\"Select row\"\n         />\n      ),\n      enableSorting: false,\n      enableHiding: false,\n   },\n   {\n      accessorKey: 'status',\n      header: 'Status',\n      cell: ({ row }) => (\n         <div className=\"capitalize\">{row.getValue('status')}</div>\n      ),\n   },\n   {\n      accessorKey: 'email',\n      header: ({ column }) => {\n         return (\n            <Button\n               variant=\"ghost\"\n               onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}\n            >\n               Email\n               <CaretSortIcon className=\"ml-2 size-4\" />\n            </Button>\n         )\n      },\n      cell: ({ row }) => <div className=\"lowercase\">{row.getValue('email')}</div>,\n   },\n   {\n      accessorKey: 'amount',\n      header: () => <div className=\"text-right\">Amount</div>,\n      cell: ({ row }) => {\n         const amount = Number.parseFloat(row.getValue('amount'))\n\n         // Format the amount as a dollar amount\n         const formatted = new Intl.NumberFormat('en-US', {\n            style: 'currency',\n            currency: 'USD',\n         }).format(amount)\n\n         return <div className=\"text-right font-medium\">{formatted}</div>\n      },\n   },\n   {\n      id: 'actions',\n      enableHiding: false,\n      cell: ({ row }) => {\n         const payment = row.original\n\n         return (\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" className=\"size-8 p-0\">\n                     <span className=\"sr-only\">Open menu</span>\n                     <DotsHorizontalIcon className=\"size-4\" />\n                  </Button>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                  <DropdownMenuItem\n                     onClick={() => navigator.clipboard.writeText(payment.id)}\n                  >\n                     Copy payment ID\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>View customer</DropdownMenuItem>\n                  <DropdownMenuItem>View payment details</DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         )\n      },\n   },\n]\n\nexport default function DataTableDemo() {\n   const [sorting, setSorting] = React.useState<SortingState>([])\n   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n      [],\n   )\n   const [columnVisibility, setColumnVisibility]\n    = React.useState<VisibilityState>({})\n   const [rowSelection, setRowSelection] = React.useState({})\n\n   const table = useReactTable({\n      data,\n      columns,\n      onSortingChange: setSorting,\n      onColumnFiltersChange: setColumnFilters,\n      getCoreRowModel: getCoreRowModel(),\n      getPaginationRowModel: getPaginationRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      onColumnVisibilityChange: setColumnVisibility,\n      onRowSelectionChange: setRowSelection,\n      state: {\n         sorting,\n         columnFilters,\n         columnVisibility,\n         rowSelection,\n      },\n   })\n\n   return (\n      <div className=\"w-full\">\n         <div className=\"flex items-center py-4\">\n            <Input\n               placeholder=\"Filter emails...\"\n               value={(table.getColumn('email')?.getFilterValue() as string) ?? ''}\n               onChange={event =>\n                  table.getColumn('email')?.setFilterValue(event.target.value)}\n               className=\"max-w-sm\"\n            />\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" className=\"ml-auto\">\n                     Columns\n                     {' '}\n                     <ChevronDownIcon className=\"ml-2 size-4\" />\n                  </Button>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent align=\"end\">\n                  {table\n                     .getAllColumns()\n                     .filter(column => column.getCanHide())\n                     .map((column) => {\n                        return (\n                           <DropdownMenuCheckboxItem\n                              key={column.id}\n                              className=\"capitalize\"\n                              checked={column.getIsVisible()}\n                              onCheckedChange={value =>\n                                 column.toggleVisibility(!!value)}\n                           >\n                              {column.id}\n                           </DropdownMenuCheckboxItem>\n                        )\n                     })}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </div>\n         <div className=\"rounded-md border\">\n            <Table>\n               <TableHeader>\n                  {table.getHeaderGroups().map(headerGroup => (\n                     <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                           return (\n                              <TableHead key={header.id}>\n                                 {header.isPlaceholder\n                                    ? null\n                                    : flexRender(\n                                       header.column.columnDef.header,\n                                       header.getContext(),\n                                    )}\n                              </TableHead>\n                           )\n                        })}\n                     </TableRow>\n                  ))}\n               </TableHeader>\n               <TableBody>\n                  {table.getRowModel().rows?.length\n                     ? (\n                           table.getRowModel().rows.map(row => (\n                              <TableRow\n                                 key={row.id}\n                                 data-state={row.getIsSelected() && 'selected'}\n                              >\n                                 {row.getVisibleCells().map(cell => (\n                                    <TableCell key={cell.id}>\n                                       {flexRender(\n                                          cell.column.columnDef.cell,\n                                          cell.getContext(),\n                                       )}\n                                    </TableCell>\n                                 ))}\n                              </TableRow>\n                           ))\n                        )\n                     : (\n                           <TableRow>\n                              <TableCell\n                                 colSpan={columns.length}\n                                 className=\"h-24 text-center\"\n                              >\n                                 No results.\n                              </TableCell>\n                           </TableRow>\n                        )}\n               </TableBody>\n            </Table>\n         </div>\n         <div className=\"flex items-center justify-end space-x-2 py-4\">\n            <div className=\"text-muted-foreground flex-1 text-sm\">\n               {table.getFilteredSelectedRowModel().rows.length}\n               {' '}\n               of\n               {' '}\n               {table.getFilteredRowModel().rows.length}\n               {' '}\n               row(s) selected.\n            </div>\n            <div className=\"space-x-2\">\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n               >\n                  Previous\n               </Button>\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n               >\n                  Next\n               </Button>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/data-table-demo.tsx",
+      "content": "\"use client\"\n\nimport {\n   CaretSortIcon,\n   ChevronDownIcon,\n   DotsHorizontalIcon,\n} from \"@radix-ui/react-icons\"\nimport type {\n   ColumnDef,\n   ColumnFiltersState,\n   SortingState,\n   VisibilityState,\n} from \"@tanstack/react-table\"\nimport {\n   flexRender,\n   getCoreRowModel,\n   getFilteredRowModel,\n   getPaginationRowModel,\n   getSortedRowModel,\n   useReactTable,\n} from \"@tanstack/react-table\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Checkbox } from \"~/registry/miami/ui/checkbox\"\nimport {\n   DropdownMenu,\n   DropdownMenuCheckboxItem,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport {\n   Table,\n   TableBody,\n   TableCell,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from \"~/registry/miami/ui/table\"\n\nconst data: Payment[] = [\n   {\n      id: \"m5gr84i9\",\n      amount: 316,\n      status: \"success\",\n      email: \"ken99@yahoo.com\",\n   },\n   {\n      id: \"3u1reuv4\",\n      amount: 242,\n      status: \"success\",\n      email: \"Abe45@gmail.com\",\n   },\n   {\n      id: \"derv1ws0\",\n      amount: 837,\n      status: \"processing\",\n      email: \"Monserrat44@gmail.com\",\n   },\n   {\n      id: \"5kma53ae\",\n      amount: 874,\n      status: \"success\",\n      email: \"Silas22@gmail.com\",\n   },\n   {\n      id: \"bhqecj4p\",\n      amount: 721,\n      status: \"failed\",\n      email: \"carmella@hotmail.com\",\n   },\n]\n\nexport interface Payment {\n   id: string\n   amount: number\n   status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n   email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n   {\n      id: \"select\",\n      header: ({ table }) => (\n         <Checkbox\n            checked={\n               table.getIsAllPageRowsSelected() ||\n               (table.getIsSomePageRowsSelected() && \"indeterminate\")\n            }\n            onCheckedChange={(value) =>\n               table.toggleAllPageRowsSelected(!!value)\n            }\n            aria-label=\"Select all\"\n         />\n      ),\n      cell: ({ row }) => (\n         <Checkbox\n            checked={row.getIsSelected()}\n            onCheckedChange={(value) => row.toggleSelected(!!value)}\n            aria-label=\"Select row\"\n         />\n      ),\n      enableSorting: false,\n      enableHiding: false,\n   },\n   {\n      accessorKey: \"status\",\n      header: \"Status\",\n      cell: ({ row }) => (\n         <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n      ),\n   },\n   {\n      accessorKey: \"email\",\n      header: ({ column }) => {\n         return (\n            <Button\n               variant=\"ghost\"\n               onClick={() =>\n                  column.toggleSorting(column.getIsSorted() === \"asc\")\n               }\n            >\n               Email\n               <CaretSortIcon className=\"ml-2 size-4\" />\n            </Button>\n         )\n      },\n      cell: ({ row }) => (\n         <div className=\"lowercase\">{row.getValue(\"email\")}</div>\n      ),\n   },\n   {\n      accessorKey: \"amount\",\n      header: () => <div className=\"text-right\">Amount</div>,\n      cell: ({ row }) => {\n         const amount = Number.parseFloat(row.getValue(\"amount\"))\n\n         // Format the amount as a dollar amount\n         const formatted = new Intl.NumberFormat(\"en-US\", {\n            style: \"currency\",\n            currency: \"USD\",\n         }).format(amount)\n\n         return <div className=\"text-right font-medium\">{formatted}</div>\n      },\n   },\n   {\n      id: \"actions\",\n      enableHiding: false,\n      cell: ({ row }) => {\n         const payment = row.original\n\n         return (\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" className=\"size-8 p-0\">\n                     <span className=\"sr-only\">Open menu</span>\n                     <DotsHorizontalIcon className=\"size-4\" />\n                  </Button>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                  <DropdownMenuItem\n                     onClick={() => navigator.clipboard.writeText(payment.id)}\n                  >\n                     Copy payment ID\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>View customer</DropdownMenuItem>\n                  <DropdownMenuItem>View payment details</DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         )\n      },\n   },\n]\n\nexport default function DataTableDemo() {\n   const [sorting, setSorting] = React.useState<SortingState>([])\n   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n      [],\n   )\n   const [columnVisibility, setColumnVisibility] =\n      React.useState<VisibilityState>({})\n   const [rowSelection, setRowSelection] = React.useState({})\n\n   const table = useReactTable({\n      data,\n      columns,\n      onSortingChange: setSorting,\n      onColumnFiltersChange: setColumnFilters,\n      getCoreRowModel: getCoreRowModel(),\n      getPaginationRowModel: getPaginationRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      onColumnVisibilityChange: setColumnVisibility,\n      onRowSelectionChange: setRowSelection,\n      state: {\n         sorting,\n         columnFilters,\n         columnVisibility,\n         rowSelection,\n      },\n   })\n\n   return (\n      <div className=\"w-full\">\n         <div className=\"flex items-center py-4\">\n            <Input\n               placeholder=\"Filter emails...\"\n               value={\n                  (table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"\n               }\n               onChange={(event) =>\n                  table.getColumn(\"email\")?.setFilterValue(event.target.value)\n               }\n               className=\"max-w-sm\"\n            />\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" className=\"ml-auto\">\n                     Columns <ChevronDownIcon className=\"ml-2 size-4\" />\n                  </Button>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent align=\"end\">\n                  {table\n                     .getAllColumns()\n                     .filter((column) => column.getCanHide())\n                     .map((column) => {\n                        return (\n                           <DropdownMenuCheckboxItem\n                              key={column.id}\n                              className=\"capitalize\"\n                              checked={column.getIsVisible()}\n                              onCheckedChange={(value) =>\n                                 column.toggleVisibility(!!value)\n                              }\n                           >\n                              {column.id}\n                           </DropdownMenuCheckboxItem>\n                        )\n                     })}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </div>\n         <div className=\"rounded-md border\">\n            <Table>\n               <TableHeader>\n                  {table.getHeaderGroups().map((headerGroup) => (\n                     <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                           return (\n                              <TableHead key={header.id}>\n                                 {header.isPlaceholder\n                                    ? null\n                                    : flexRender(\n                                         header.column.columnDef.header,\n                                         header.getContext(),\n                                      )}\n                              </TableHead>\n                           )\n                        })}\n                     </TableRow>\n                  ))}\n               </TableHeader>\n               <TableBody>\n                  {table.getRowModel().rows?.length ? (\n                     table.getRowModel().rows.map((row) => (\n                        <TableRow\n                           key={row.id}\n                           data-state={row.getIsSelected() && \"selected\"}\n                        >\n                           {row.getVisibleCells().map((cell) => (\n                              <TableCell key={cell.id}>\n                                 {flexRender(\n                                    cell.column.columnDef.cell,\n                                    cell.getContext(),\n                                 )}\n                              </TableCell>\n                           ))}\n                        </TableRow>\n                     ))\n                  ) : (\n                     <TableRow>\n                        <TableCell\n                           colSpan={columns.length}\n                           className=\"h-24 text-center\"\n                        >\n                           No results.\n                        </TableCell>\n                     </TableRow>\n                  )}\n               </TableBody>\n            </Table>\n         </div>\n         <div className=\"flex items-center justify-end space-x-2 py-4\">\n            <div className=\"text-muted-foreground flex-1 text-sm\">\n               {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n               {table.getFilteredRowModel().rows.length} row(s) selected.\n            </div>\n            <div className=\"space-x-2\">\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n               >\n                  Previous\n               </Button>\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n               >\n                  Next\n               </Button>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/date-picker-demo.json b/apps/web/public/r/styles/miami/date-picker-demo.json
index 599e7750..2ce38237 100644
--- a/apps/web/public/r/styles/miami/date-picker-demo.json
+++ b/apps/web/public/r/styles/miami/date-picker-demo.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "date-picker-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "date-fns"
   ],
@@ -11,9 +13,9 @@
   ],
   "files": [
     {
-      "path": "example/date-picker-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { format } from 'date-fns'\nimport { CalendarIcon } from '@radix-ui/react-icons'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport { Calendar } from '~/registry/miami/ui/calendar'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\n\nexport default function DatePickerDemo() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               className={ny(\n                  'w-[240px] justify-start text-left font-normal',\n                  !date && 'text-muted-foreground',\n               )}\n            >\n               <CalendarIcon className=\"mr-2 size-4\" />\n               {date ? format(date, 'PPP') : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n               mode=\"single\"\n               selected={date}\n               onSelect={setDate}\n               initialFocus\n            />\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { format } from \"date-fns\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Calendar } from \"~/registry/miami/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\nexport default function DatePickerDemo() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               className={ny(\n                  \"w-[240px] justify-start text-left font-normal\",\n                  !date && \"text-muted-foreground\",\n               )}\n            >\n               <CalendarIcon className=\"mr-2 size-4\" />\n               {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n               mode=\"single\"\n               selected={date}\n               onSelect={setDate}\n               initialFocus\n            />\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/date-picker-form.json b/apps/web/public/r/styles/miami/date-picker-form.json
index 41abe534..19764221 100644
--- a/apps/web/public/r/styles/miami/date-picker-form.json
+++ b/apps/web/public/r/styles/miami/date-picker-form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "date-picker-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "date-fns"
   ],
@@ -12,9 +14,9 @@
   ],
   "files": [
     {
-      "path": "example/date-picker-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { CalendarIcon } from '@radix-ui/react-icons'\nimport { format } from 'date-fns'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport { Calendar } from '~/registry/miami/ui/calendar'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/miami/ui/form'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst FormSchema = z.object({\n   dob: z.date({\n      required_error: 'A date of birth is required.',\n   }),\n})\n\nexport default function DatePickerForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"dob\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Date of birth</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 className={ny(\n                                    'w-[240px] pl-3 text-left font-normal',\n                                    !field.value && 'text-muted-foreground',\n                                 )}\n                              >\n                                 {field.value\n                                    ? (\n                                          format(field.value, 'PPP')\n                                       )\n                                    : (\n                                          <span>Pick a date</span>\n                                       )}\n                                 <CalendarIcon className=\"ml-auto size-4 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                           <Calendar\n                              mode=\"single\"\n                              selected={field.value}\n                              onSelect={field.onChange}\n                              disabled={date =>\n                                 date > new Date() || date < new Date('1900-01-01')}\n                              initialFocus\n                           />\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        Your date of birth is used to calculate your age.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/date-picker-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { format } from \"date-fns\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Calendar } from \"~/registry/miami/ui/calendar\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/miami/ui/form\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst FormSchema = z.object({\n   dob: z.date({\n      required_error: \"A date of birth is required.\",\n   }),\n})\n\nexport default function DatePickerForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"dob\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Date of birth</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 className={ny(\n                                    \"w-[240px] pl-3 text-left font-normal\",\n                                    !field.value && \"text-muted-foreground\",\n                                 )}\n                              >\n                                 {field.value ? (\n                                    format(field.value, \"PPP\")\n                                 ) : (\n                                    <span>Pick a date</span>\n                                 )}\n                                 <CalendarIcon className=\"ml-auto size-4 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                           <Calendar\n                              mode=\"single\"\n                              selected={field.value}\n                              onSelect={field.onChange}\n                              disabled={(date) =>\n                                 date > new Date() ||\n                                 date < new Date(\"1900-01-01\")\n                              }\n                              initialFocus\n                           />\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        Your date of birth is used to calculate your age.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/date-picker-with-presets.json b/apps/web/public/r/styles/miami/date-picker-with-presets.json
index 4ad073d6..dcd73596 100644
--- a/apps/web/public/r/styles/miami/date-picker-with-presets.json
+++ b/apps/web/public/r/styles/miami/date-picker-with-presets.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "date-picker-with-presets",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "date-fns"
   ],
@@ -12,9 +14,9 @@
   ],
   "files": [
     {
-      "path": "example/date-picker-with-presets.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { CalendarIcon } from '@radix-ui/react-icons'\nimport { addDays, format } from 'date-fns'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport { Calendar } from '~/registry/miami/ui/calendar'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/miami/ui/select'\n\nexport default function DatePickerWithPresets() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               className={ny(\n                  'w-[240px] justify-start text-left font-normal',\n                  !date && 'text-muted-foreground',\n               )}\n            >\n               <CalendarIcon className=\"mr-2 size-4\" />\n               {date ? format(date, 'PPP') : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent\n            align=\"start\"\n            className=\"flex w-auto flex-col space-y-2 p-2\"\n         >\n            <Select\n               onValueChange={value =>\n                  setDate(addDays(new Date(), Number.parseInt(value)))}\n            >\n               <SelectTrigger>\n                  <SelectValue placeholder=\"Select\" />\n               </SelectTrigger>\n               <SelectContent position=\"popper\">\n                  <SelectItem value=\"0\">Today</SelectItem>\n                  <SelectItem value=\"1\">Tomorrow</SelectItem>\n                  <SelectItem value=\"3\">In 3 days</SelectItem>\n                  <SelectItem value=\"7\">In a week</SelectItem>\n               </SelectContent>\n            </Select>\n            <div className=\"rounded-md border\">\n               <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/date-picker-with-presets.tsx",
+      "content": "\"use client\"\n\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { addDays, format } from \"date-fns\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Calendar } from \"~/registry/miami/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/miami/ui/select\"\n\nexport default function DatePickerWithPresets() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               className={ny(\n                  \"w-[240px] justify-start text-left font-normal\",\n                  !date && \"text-muted-foreground\",\n               )}\n            >\n               <CalendarIcon className=\"mr-2 size-4\" />\n               {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent\n            align=\"start\"\n            className=\"flex w-auto flex-col space-y-2 p-2\"\n         >\n            <Select\n               onValueChange={(value) =>\n                  setDate(addDays(new Date(), Number.parseInt(value)))\n               }\n            >\n               <SelectTrigger>\n                  <SelectValue placeholder=\"Select\" />\n               </SelectTrigger>\n               <SelectContent position=\"popper\">\n                  <SelectItem value=\"0\">Today</SelectItem>\n                  <SelectItem value=\"1\">Tomorrow</SelectItem>\n                  <SelectItem value=\"3\">In 3 days</SelectItem>\n                  <SelectItem value=\"7\">In a week</SelectItem>\n               </SelectContent>\n            </Select>\n            <div className=\"rounded-md border\">\n               <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/date-picker-with-range.json b/apps/web/public/r/styles/miami/date-picker-with-range.json
index 4c2600df..f5963d83 100644
--- a/apps/web/public/r/styles/miami/date-picker-with-range.json
+++ b/apps/web/public/r/styles/miami/date-picker-with-range.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "date-picker-with-range",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "date-fns"
   ],
@@ -11,9 +13,9 @@
   ],
   "files": [
     {
-      "path": "example/date-picker-with-range.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { CalendarIcon } from '@radix-ui/react-icons'\nimport { addDays, format } from 'date-fns'\nimport type { DateRange } from 'react-day-picker'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport { Calendar } from '~/registry/miami/ui/calendar'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\n\nexport default function DatePickerWithRange({\n   className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n   const [date, setDate] = React.useState<DateRange | undefined>({\n      from: new Date(2022, 0, 20),\n      to: addDays(new Date(2022, 0, 20), 20),\n   })\n\n   return (\n      <div className={ny('grid gap-2', className)}>\n         <Popover>\n            <PopoverTrigger asChild>\n               <Button\n                  id=\"date\"\n                  variant=\"outline\"\n                  className={ny(\n                     'w-[300px] justify-start text-left font-normal',\n                     !date && 'text-muted-foreground',\n                  )}\n               >\n                  <CalendarIcon className=\"mr-2 size-4\" />\n                  {date?.from\n                     ? (\n                           date.to\n                              ? (\n                                    <>\n                                       {format(date.from, 'LLL dd, y')}\n                                       {' '}\n                                       -\n                                       {' '}\n                                       {format(date.to, 'LLL dd, y')}\n                                    </>\n                                 )\n                              : (\n                                    format(date.from, 'LLL dd, y')\n                                 )\n                        )\n                     : (\n                           <span>Pick a date</span>\n                        )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto p-0\" align=\"start\">\n               <Calendar\n                  initialFocus\n                  mode=\"range\"\n                  defaultMonth={date?.from}\n                  selected={date}\n                  onSelect={setDate}\n                  numberOfMonths={2}\n               />\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/date-picker-with-range.tsx",
+      "content": "\"use client\"\n\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { addDays, format } from \"date-fns\"\nimport * as React from \"react\"\nimport type { DateRange } from \"react-day-picker\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Calendar } from \"~/registry/miami/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\nexport default function DatePickerWithRange({\n   className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n   const [date, setDate] = React.useState<DateRange | undefined>({\n      from: new Date(2022, 0, 20),\n      to: addDays(new Date(2022, 0, 20), 20),\n   })\n\n   return (\n      <div className={ny(\"grid gap-2\", className)}>\n         <Popover>\n            <PopoverTrigger asChild>\n               <Button\n                  id=\"date\"\n                  variant=\"outline\"\n                  className={ny(\n                     \"w-[300px] justify-start text-left font-normal\",\n                     !date && \"text-muted-foreground\",\n                  )}\n               >\n                  <CalendarIcon className=\"mr-2 size-4\" />\n                  {date?.from ? (\n                     date.to ? (\n                        <>\n                           {format(date.from, \"LLL dd, y\")} -{\" \"}\n                           {format(date.to, \"LLL dd, y\")}\n                        </>\n                     ) : (\n                        format(date.from, \"LLL dd, y\")\n                     )\n                  ) : (\n                     <span>Pick a date</span>\n                  )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto p-0\" align=\"start\">\n               <Calendar\n                  initialFocus\n                  mode=\"range\"\n                  defaultMonth={date?.from}\n                  selected={date}\n                  onSelect={setDate}\n                  numberOfMonths={2}\n               />\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dialog-close-button.json b/apps/web/public/r/styles/miami/dialog-close-button.json
index 752d9d70..1898b658 100644
--- a/apps/web/public/r/styles/miami/dialog-close-button.json
+++ b/apps/web/public/r/styles/miami/dialog-close-button.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dialog-close-button",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "dialog",
     "button"
   ],
   "files": [
     {
-      "path": "example/dialog-close-button.tsx",
-      "content": "import { CopyIcon } from '@radix-ui/react-icons'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Dialog,\n   DialogClose,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from '~/registry/miami/ui/dialog'\nimport { Input } from '~/registry/miami/ui/input'\nimport { Label } from '~/registry/miami/ui/label'\n\nexport default function DialogCloseButton() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Share</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-md\">\n            <DialogHeader>\n               <DialogTitle>Share link</DialogTitle>\n               <DialogDescription>\n                  Anyone who has this link will be able to view this.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"flex items-center space-x-2\">\n               <div className=\"grid flex-1 gap-2\">\n                  <Label htmlFor=\"link\" className=\"sr-only\">\n                     Link\n                  </Label>\n                  <Input\n                     id=\"link\"\n                     defaultValue=\"https://nyxbui.design/docs/installation\"\n                     readOnly\n                  />\n               </div>\n               <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n                  <span className=\"sr-only\">Copy</span>\n                  <CopyIcon className=\"size-4\" />\n               </Button>\n            </div>\n            <DialogFooter className=\"sm:justify-start\">\n               <DialogClose asChild>\n                  <Button type=\"button\" variant=\"secondary\">\n                     Close\n                  </Button>\n               </DialogClose>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/dialog-close-button.tsx",
+      "content": "import { CopyIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Dialog,\n   DialogClose,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"~/registry/miami/ui/dialog\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport default function DialogCloseButton() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Share</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-md\">\n            <DialogHeader>\n               <DialogTitle>Share link</DialogTitle>\n               <DialogDescription>\n                  Anyone who has this link will be able to view this.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"flex items-center space-x-2\">\n               <div className=\"grid flex-1 gap-2\">\n                  <Label htmlFor=\"link\" className=\"sr-only\">\n                     Link\n                  </Label>\n                  <Input\n                     id=\"link\"\n                     defaultValue=\"https://nyxbui.design/docs/installation\"\n                     readOnly\n                  />\n               </div>\n               <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n                  <span className=\"sr-only\">Copy</span>\n                  <CopyIcon className=\"size-4\" />\n               </Button>\n            </div>\n            <DialogFooter className=\"sm:justify-start\">\n               <DialogClose asChild>\n                  <Button type=\"button\" variant=\"secondary\">\n                     Close\n                  </Button>\n               </DialogClose>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dialog-demo.json b/apps/web/public/r/styles/miami/dialog-demo.json
index 28f4c86d..aed8c9b0 100644
--- a/apps/web/public/r/styles/miami/dialog-demo.json
+++ b/apps/web/public/r/styles/miami/dialog-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dialog-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "dialog"
   ],
   "files": [
     {
-      "path": "example/dialog-demo.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from '~/registry/miami/ui/dialog'\nimport { Input } from '~/registry/miami/ui/input'\nimport { Label } from '~/registry/miami/ui/label'\n\nexport default function DialogDemo() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-[425px]\">\n            <DialogHeader>\n               <DialogTitle>Edit profile</DialogTitle>\n               <DialogDescription>\n                  Make changes to your profile here. Click save when you're done.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input id=\"username\" value=\"~peduarte\" className=\"col-span-3\" />\n               </div>\n            </div>\n            <DialogFooter>\n               <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/dialog-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"~/registry/miami/ui/dialog\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport default function DialogDemo() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-[425px]\">\n            <DialogHeader>\n               <DialogTitle>Edit profile</DialogTitle>\n               <DialogDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"~peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <DialogFooter>\n               <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dialog.json b/apps/web/public/r/styles/miami/dialog.json
index 40d0dca4..6ccb47b2 100644
--- a/apps/web/public/r/styles/miami/dialog.json
+++ b/apps/web/public/r/styles/miami/dialog.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dialog",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/dialog.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { Cross2Icon } from '@radix-ui/react-icons'\n\nimport { ny } from '~/lib/utils'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Overlay\n      ref={ref}\n      className={ny(\n         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',\n         className,\n      )}\n      {...props}\n   />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n         ref={ref}\n         className={ny(\n            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',\n            className,\n         )}\n         {...props}\n      >\n         {children}\n         <DialogPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n            <Cross2Icon className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n         </DialogPrimitive.Close>\n      </DialogPrimitive.Content>\n   </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nfunction DialogHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            'flex flex-col space-y-1.5 text-center sm:text-left',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nDialogHeader.displayName = 'DialogHeader'\n\nfunction DialogFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Title\n      ref={ref}\n      className={ny(\n         'text-lg font-semibold leading-none tracking-tight',\n         className,\n      )}\n      {...props}\n   />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Description\n      ref={ref}\n      className={ny('text-muted-foreground text-sm', className)}\n      {...props}\n   />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n   Dialog,\n   DialogPortal,\n   DialogOverlay,\n   DialogTrigger,\n   DialogClose,\n   DialogContent,\n   DialogHeader,\n   DialogFooter,\n   DialogTitle,\n   DialogDescription,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Overlay\n      ref={ref}\n      className={ny(\n         \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80\",\n         className,\n      )}\n      {...props}\n   />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n         ref={ref}\n         className={ny(\n            \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n         <DialogPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n            <Cross2Icon className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n         </DialogPrimitive.Close>\n      </DialogPrimitive.Content>\n   </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nfunction DialogHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            \"flex flex-col space-y-1.5 text-center sm:text-left\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nDialogHeader.displayName = \"DialogHeader\"\n\nfunction DialogFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Title\n      ref={ref}\n      className={ny(\n         \"text-lg font-semibold leading-none tracking-tight\",\n         className,\n      )}\n      {...props}\n   />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Description\n      ref={ref}\n      className={ny(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n   Dialog,\n   DialogPortal,\n   DialogOverlay,\n   DialogTrigger,\n   DialogClose,\n   DialogContent,\n   DialogHeader,\n   DialogFooter,\n   DialogTitle,\n   DialogDescription,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dock-demo-2.json b/apps/web/public/r/styles/miami/dock-demo-2.json
index 02094145..6c236cf0 100644
--- a/apps/web/public/r/styles/miami/dock-demo-2.json
+++ b/apps/web/public/r/styles/miami/dock-demo-2.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dock-demo-2",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/dock-demo-2.tsx",
-      "content": "import React from 'react'\n\nimport { Dock, DockIcon } from '~/registry/miami/ui/dock'\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nexport default function DockDemo() {\n   return (\n      <div className=\"relative\">\n         <Dock direction=\"middle\">\n            <DockIcon>\n               <Icons.gitHub className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.googleDrive className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.notion className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.whatsapp className=\"size-6\" />\n            </DockIcon>\n         </Dock>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         >\n         </path>\n      </svg>\n   ),\n   notion: (props: IconProps) => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#fff\"\n         />\n         <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000\"\n         />\n      </svg>\n   ),\n   googleDrive: (props: IconProps) => (\n      <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: (props: IconProps) => (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 175.216 175.552\"\n         {...props}\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            fill=\"#b3b3b3\"\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            filter=\"url(#a)\"\n         />\n         <path\n            fill=\"#fff\"\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n         />\n         <path\n            fill=\"url(#linearGradient1780)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n         />\n         <path\n            fill=\"url(#b)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n         />\n         <path\n            fill=\"#fff\"\n            fillRule=\"evenodd\"\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n         />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/dock-demo-2.tsx",
+      "content": "import type React from \"react\"\n\nimport { Dock, DockIcon } from \"~/registry/miami/ui/dock\"\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nexport default function DockDemo() {\n   return (\n      <div className=\"relative\">\n         <Dock direction=\"middle\">\n            <DockIcon>\n               <Icons.gitHub className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.googleDrive className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.notion className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.whatsapp className=\"size-6\" />\n            </DockIcon>\n         </Dock>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         ></path>\n      </svg>\n   ),\n   notion: (props: IconProps) => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#fff\"\n         />\n         <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000\"\n         />\n      </svg>\n   ),\n   googleDrive: (props: IconProps) => (\n      <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: (props: IconProps) => (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 175.216 175.552\"\n         {...props}\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            fill=\"#b3b3b3\"\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            filter=\"url(#a)\"\n         />\n         <path\n            fill=\"#fff\"\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n         />\n         <path\n            fill=\"url(#linearGradient1780)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n         />\n         <path\n            fill=\"url(#b)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n         />\n         <path\n            fill=\"#fff\"\n            fillRule=\"evenodd\"\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dock-demo-3.json b/apps/web/public/r/styles/miami/dock-demo-3.json
index f767d029..df75a05f 100644
--- a/apps/web/public/r/styles/miami/dock-demo-3.json
+++ b/apps/web/public/r/styles/miami/dock-demo-3.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dock-demo-3",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/dock-demo-3.tsx",
-      "content": "import React from 'react'\n\nimport { Dock, DockIcon } from '~/registry/miami/ui/dock'\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nexport default function DockDemo() {\n   return (\n      <div className=\"relative\">\n         <Dock magnification={60} distance={100}>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.gitHub className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.googleDrive className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.notion className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.whatsapp className=\"size-full\" />\n            </DockIcon>\n         </Dock>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         >\n         </path>\n      </svg>\n   ),\n   notion: (props: IconProps) => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#fff\"\n         />\n         <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000\"\n         />\n      </svg>\n   ),\n   googleDrive: (props: IconProps) => (\n      <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: (props: IconProps) => (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 175.216 175.552\"\n         {...props}\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            fill=\"#b3b3b3\"\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            filter=\"url(#a)\"\n         />\n         <path\n            fill=\"#fff\"\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n         />\n         <path\n            fill=\"url(#linearGradient1780)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n         />\n         <path\n            fill=\"url(#b)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n         />\n         <path\n            fill=\"#fff\"\n            fillRule=\"evenodd\"\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n         />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/dock-demo-3.tsx",
+      "content": "import type React from \"react\"\n\nimport { Dock, DockIcon } from \"~/registry/miami/ui/dock\"\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nexport default function DockDemo() {\n   return (\n      <div className=\"relative\">\n         <Dock magnification={60} distance={100}>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.gitHub className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.googleDrive className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.notion className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.whatsapp className=\"size-full\" />\n            </DockIcon>\n         </Dock>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         ></path>\n      </svg>\n   ),\n   notion: (props: IconProps) => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#fff\"\n         />\n         <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000\"\n         />\n      </svg>\n   ),\n   googleDrive: (props: IconProps) => (\n      <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: (props: IconProps) => (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 175.216 175.552\"\n         {...props}\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            fill=\"#b3b3b3\"\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            filter=\"url(#a)\"\n         />\n         <path\n            fill=\"#fff\"\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n         />\n         <path\n            fill=\"url(#linearGradient1780)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n         />\n         <path\n            fill=\"url(#b)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n         />\n         <path\n            fill=\"#fff\"\n            fillRule=\"evenodd\"\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dock-demo.json b/apps/web/public/r/styles/miami/dock-demo.json
index 34a6cc7a..9f61d09d 100644
--- a/apps/web/public/r/styles/miami/dock-demo.json
+++ b/apps/web/public/r/styles/miami/dock-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dock-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/dock-demo.tsx",
-      "content": "import React from 'react'\nimport Link from 'next/link'\nimport { CalendarIcon, HomeIcon, MailIcon, PencilIcon } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { buttonVariants } from '~/components/ui/button'\nimport { Separator } from '~/components/ui/separator'\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/components/ui/tooltip'\nimport { ModeToggle } from '~/components/mode-toggle'\nimport { Dock, DockIcon } from '~/registry/miami/ui/dock'\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nconst Icons = {\n   calendar: (props: IconProps) => <CalendarIcon {...props} />,\n   email: (props: IconProps) => <MailIcon {...props} />,\n   linkedin: (props: IconProps) => (\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <title>LinkedIn</title>\n         <path\n            fill=\"currentColor\"\n            d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\n         />\n      </svg>\n   ),\n   x: (props: IconProps) => (\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <title>X</title>\n         <path\n            fill=\"currentColor\"\n            d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\n         />\n      </svg>\n   ),\n   youtube: (props: IconProps) => (\n      <svg\n         width=\"32px\"\n         height=\"32px\"\n         viewBox=\"0 0 32 32\"\n         fill=\"currentColor\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <title>youtube</title>\n         <path d=\"M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z\" />\n      </svg>\n   ),\n   github: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         >\n         </path>\n      </svg>\n   ),\n}\n\nconst DATA = {\n   navbar: [\n      { href: '#', icon: HomeIcon, label: 'Home' },\n      { href: '#', icon: PencilIcon, label: 'Blog' },\n   ],\n   contact: {\n      social: {\n         GitHub: {\n            name: 'GitHub',\n            url: '#',\n            icon: Icons.github,\n         },\n         LinkedIn: {\n            name: 'LinkedIn',\n            url: '#',\n            icon: Icons.linkedin,\n         },\n         X: {\n            name: 'X',\n            url: '#',\n            icon: Icons.x,\n         },\n         email: {\n            name: 'Send Email',\n            url: '#',\n            icon: Icons.email,\n         },\n      },\n   },\n}\n\nexport default function DockDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Dock\n         </span>\n         <TooltipProvider>\n            <Dock direction=\"middle\">\n               {DATA.navbar.map(item => (\n                  <DockIcon key={item.label}>\n                     <Tooltip>\n                        <TooltipTrigger asChild>\n                           <Link\n                              href={item.href}\n                              aria-label={item.label}\n                              className={ny(\n                                 buttonVariants({ variant: 'ghost', size: 'icon' }),\n                                 'size-12 rounded-full',\n                              )}\n                           >\n                              <item.icon className=\"size-4\" />\n                           </Link>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                           <p>{item.label}</p>\n                        </TooltipContent>\n                     </Tooltip>\n                  </DockIcon>\n               ))}\n               <Separator orientation=\"vertical\" className=\"h-full\" />\n               {Object.entries(DATA.contact.social).map(([name, social]) => (\n                  <DockIcon key={name}>\n                     <Tooltip>\n                        <TooltipTrigger asChild>\n                           <Link\n                              href={social.url}\n                              aria-label={social.name}\n                              className={ny(\n                                 buttonVariants({ variant: 'ghost', size: 'icon' }),\n                                 'size-12 rounded-full',\n                              )}\n                           >\n                              <social.icon className=\"size-4\" />\n                           </Link>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                           <p>{name}</p>\n                        </TooltipContent>\n                     </Tooltip>\n                  </DockIcon>\n               ))}\n               <Separator orientation=\"vertical\" className=\"h-full py-2\" />\n               <DockIcon>\n                  <Tooltip>\n                     <TooltipTrigger asChild>\n                        <ModeToggle className=\"rounded-full\" />\n                     </TooltipTrigger>\n                     <TooltipContent>\n                        <p>Theme</p>\n                     </TooltipContent>\n                  </Tooltip>\n               </DockIcon>\n            </Dock>\n         </TooltipProvider>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/dock-demo.tsx",
+      "content": "import { CalendarIcon, HomeIcon, MailIcon, PencilIcon } from \"lucide-react\"\nimport Link from \"next/link\"\nimport type React from \"react\"\n\nimport { ModeToggle } from \"~/components/mode-toggle\"\nimport { buttonVariants } from \"~/components/ui/button\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/components/ui/tooltip\"\nimport { ny } from \"~/lib/utils\"\nimport { Dock, DockIcon } from \"~/registry/miami/ui/dock\"\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nconst Icons = {\n   calendar: (props: IconProps) => <CalendarIcon {...props} />,\n   email: (props: IconProps) => <MailIcon {...props} />,\n   linkedin: (props: IconProps) => (\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <title>LinkedIn</title>\n         <path\n            fill=\"currentColor\"\n            d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\n         />\n      </svg>\n   ),\n   x: (props: IconProps) => (\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <title>X</title>\n         <path\n            fill=\"currentColor\"\n            d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\n         />\n      </svg>\n   ),\n   youtube: (props: IconProps) => (\n      <svg\n         width=\"32px\"\n         height=\"32px\"\n         viewBox=\"0 0 32 32\"\n         fill=\"currentColor\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <title>youtube</title>\n         <path d=\"M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z\" />\n      </svg>\n   ),\n   github: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         ></path>\n      </svg>\n   ),\n}\n\nconst DATA = {\n   navbar: [\n      { href: \"#\", icon: HomeIcon, label: \"Home\" },\n      { href: \"#\", icon: PencilIcon, label: \"Blog\" },\n   ],\n   contact: {\n      social: {\n         GitHub: {\n            name: \"GitHub\",\n            url: \"#\",\n            icon: Icons.github,\n         },\n         LinkedIn: {\n            name: \"LinkedIn\",\n            url: \"#\",\n            icon: Icons.linkedin,\n         },\n         X: {\n            name: \"X\",\n            url: \"#\",\n            icon: Icons.x,\n         },\n         email: {\n            name: \"Send Email\",\n            url: \"#\",\n            icon: Icons.email,\n         },\n      },\n   },\n}\n\nexport default function DockDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Dock\n         </span>\n         <TooltipProvider>\n            <Dock direction=\"middle\">\n               {DATA.navbar.map((item) => (\n                  <DockIcon key={item.label}>\n                     <Tooltip>\n                        <TooltipTrigger asChild>\n                           <Link\n                              href={item.href}\n                              aria-label={item.label}\n                              className={ny(\n                                 buttonVariants({\n                                    variant: \"ghost\",\n                                    size: \"icon\",\n                                 }),\n                                 \"size-12 rounded-full\",\n                              )}\n                           >\n                              <item.icon className=\"size-4\" />\n                           </Link>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                           <p>{item.label}</p>\n                        </TooltipContent>\n                     </Tooltip>\n                  </DockIcon>\n               ))}\n               <Separator orientation=\"vertical\" className=\"h-full\" />\n               {Object.entries(DATA.contact.social).map(([name, social]) => (\n                  <DockIcon key={name}>\n                     <Tooltip>\n                        <TooltipTrigger asChild>\n                           <Link\n                              href={social.url}\n                              aria-label={social.name}\n                              className={ny(\n                                 buttonVariants({\n                                    variant: \"ghost\",\n                                    size: \"icon\",\n                                 }),\n                                 \"size-12 rounded-full\",\n                              )}\n                           >\n                              <social.icon className=\"size-4\" />\n                           </Link>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                           <p>{name}</p>\n                        </TooltipContent>\n                     </Tooltip>\n                  </DockIcon>\n               ))}\n               <Separator orientation=\"vertical\" className=\"h-full py-2\" />\n               <DockIcon>\n                  <Tooltip>\n                     <TooltipTrigger asChild>\n                        <ModeToggle className=\"rounded-full\" />\n                     </TooltipTrigger>\n                     <TooltipContent>\n                        <p>Theme</p>\n                     </TooltipContent>\n                  </Tooltip>\n               </DockIcon>\n            </Dock>\n         </TooltipProvider>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dock.json b/apps/web/public/r/styles/miami/dock.json
index 671e36f2..aeaa4bff 100644
--- a/apps/web/public/r/styles/miami/dock.json
+++ b/apps/web/public/r/styles/miami/dock.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dock",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/dock.tsx",
-      "content": "'use client'\n\nimport type { PropsWithChildren } from 'react'\nimport React, { useRef } from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { motion, useMotionValue, useSpring, useTransform } from 'framer-motion'\n\nimport { ny } from '~/lib/utils'\n\nexport interface DockProps extends VariantProps<typeof dockVariants> {\n   className?: string\n   magnification?: number\n   distance?: number\n   direction?: 'top' | 'middle' | 'bottom'\n   children: React.ReactNode\n}\n\nconst DEFAULT_MAGNIFICATION = 60\nconst DEFAULT_DISTANCE = 140\n\nconst dockVariants = cva(\n   'supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md',\n)\n\nconst Dock = React.forwardRef<HTMLDivElement, DockProps>(\n   (\n      {\n         className,\n         children,\n         magnification = DEFAULT_MAGNIFICATION,\n         distance = DEFAULT_DISTANCE,\n         direction = 'bottom',\n         ...props\n      },\n      ref,\n   ) => {\n      const mouseX = useMotionValue(Infinity)\n\n      const renderChildren = () => {\n         return React.Children.map(children, (child) => {\n            if (React.isValidElement(child) && child.type === DockIcon) {\n               return React.cloneElement(child, {\n                  ...child.props,\n                  mouseX,\n                  magnification,\n                  distance,\n               })\n            }\n            return child\n         })\n      }\n\n      return (\n         <motion.div\n            ref={ref}\n            onMouseMove={e => mouseX.set(e.pageX)}\n            onMouseLeave={() => mouseX.set(Infinity)}\n            {...props}\n            className={ny(dockVariants({ className }), {\n               'items-start': direction === 'top',\n               'items-center': direction === 'middle',\n               'items-end': direction === 'bottom',\n            })}\n         >\n            {renderChildren()}\n         </motion.div>\n      )\n   },\n)\n\nDock.displayName = 'Dock'\n\nexport interface DockIconProps {\n   size?: number\n   magnification?: number\n   distance?: number\n   mouseX?: any\n   className?: string\n   children?: React.ReactNode\n   props?: PropsWithChildren\n}\n\nfunction DockIcon({\n   size,\n   magnification = DEFAULT_MAGNIFICATION,\n   distance = DEFAULT_DISTANCE,\n   mouseX,\n   className,\n   children,\n   ...props\n}: DockIconProps) {\n   const ref = useRef<HTMLDivElement>(null)\n\n   const distanceCalc = useTransform(mouseX, (val: number) => {\n      const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 }\n\n      return val - bounds.x - bounds.width / 2\n   })\n\n   const widthSync = useTransform(\n      distanceCalc,\n      [-distance, 0, distance],\n      [40, magnification, 40],\n   )\n\n   const width = useSpring(widthSync, {\n      mass: 0.1,\n      stiffness: 150,\n      damping: 12,\n   })\n\n   return (\n      <motion.div\n         ref={ref}\n         style={{ width }}\n         className={ny(\n            'flex aspect-square cursor-pointer items-center justify-center rounded-full',\n            className,\n         )}\n         {...props}\n      >\n         {children}\n      </motion.div>\n   )\n}\n\nDockIcon.displayName = 'DockIcon'\n\nexport { Dock, DockIcon, dockVariants }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport { motion, useMotionValue, useSpring, useTransform } from \"framer-motion\"\nimport type { PropsWithChildren } from \"react\"\nimport React, { useRef } from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nexport interface DockProps extends VariantProps<typeof dockVariants> {\n   className?: string\n   magnification?: number\n   distance?: number\n   direction?: \"top\" | \"middle\" | \"bottom\"\n   children: React.ReactNode\n}\n\nconst DEFAULT_MAGNIFICATION = 60\nconst DEFAULT_DISTANCE = 140\n\nconst dockVariants = cva(\n   \"supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md\",\n)\n\nconst Dock = React.forwardRef<HTMLDivElement, DockProps>(\n   (\n      {\n         className,\n         children,\n         magnification = DEFAULT_MAGNIFICATION,\n         distance = DEFAULT_DISTANCE,\n         direction = \"bottom\",\n         ...props\n      },\n      ref,\n   ) => {\n      const mouseX = useMotionValue(Number.POSITIVE_INFINITY)\n\n      const renderChildren = () => {\n         return React.Children.map(children, (child) => {\n            if (React.isValidElement(child) && child.type === DockIcon) {\n               return React.cloneElement(child, {\n                  ...child.props,\n                  mouseX,\n                  magnification,\n                  distance,\n               })\n            }\n            return child\n         })\n      }\n\n      return (\n         <motion.div\n            ref={ref}\n            onMouseMove={(e) => mouseX.set(e.pageX)}\n            onMouseLeave={() => mouseX.set(Number.POSITIVE_INFINITY)}\n            {...props}\n            className={ny(dockVariants({ className }), {\n               \"items-start\": direction === \"top\",\n               \"items-center\": direction === \"middle\",\n               \"items-end\": direction === \"bottom\",\n            })}\n         >\n            {renderChildren()}\n         </motion.div>\n      )\n   },\n)\n\nDock.displayName = \"Dock\"\n\nexport interface DockIconProps {\n   size?: number\n   magnification?: number\n   distance?: number\n   mouseX?: any\n   className?: string\n   children?: React.ReactNode\n   props?: PropsWithChildren\n}\n\nfunction DockIcon({\n   size,\n   magnification = DEFAULT_MAGNIFICATION,\n   distance = DEFAULT_DISTANCE,\n   mouseX,\n   className,\n   children,\n   ...props\n}: DockIconProps) {\n   const ref = useRef<HTMLDivElement>(null)\n\n   const distanceCalc = useTransform(mouseX, (val: number) => {\n      const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 }\n\n      return val - bounds.x - bounds.width / 2\n   })\n\n   const widthSync = useTransform(\n      distanceCalc,\n      [-distance, 0, distance],\n      [40, magnification, 40],\n   )\n\n   const width = useSpring(widthSync, {\n      mass: 0.1,\n      stiffness: 150,\n      damping: 12,\n   })\n\n   return (\n      <motion.div\n         ref={ref}\n         style={{ width }}\n         className={ny(\n            \"flex aspect-square cursor-pointer items-center justify-center rounded-full\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n      </motion.div>\n   )\n}\n\nDockIcon.displayName = \"DockIcon\"\n\nexport { Dock, DockIcon, dockVariants }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dot-pattern-demo.json b/apps/web/public/r/styles/miami/dot-pattern-demo.json
index 39dc53c4..6a49063b 100644
--- a/apps/web/public/r/styles/miami/dot-pattern-demo.json
+++ b/apps/web/public/r/styles/miami/dot-pattern-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dot-pattern-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/dot-pattern-demo.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\nimport DotPattern from '~/registry/miami/ui/dot-pattern'\n\nfunction DotPatternDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Dot Pattern\n         </p>\n         <DotPattern\n            className={ny(\n               '[mask-image:radial-gradient(200px_circle_at_center,white,transparent)]',\n            )}\n         />\n      </div>\n   )\n}\n\nexport default DotPatternDemo\n",
-      "type": "registry:component",
+      "path": "examples/dot-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\nimport { DotPattern } from \"~/registry/miami/ui/dot-pattern\"\n\nexport default function DotPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Dot Pattern\n         </p>\n         <DotPattern\n            className={ny(\n               \"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dot-pattern-linear-gradient.json b/apps/web/public/r/styles/miami/dot-pattern-linear-gradient.json
index 8de810af..645e4b81 100644
--- a/apps/web/public/r/styles/miami/dot-pattern-linear-gradient.json
+++ b/apps/web/public/r/styles/miami/dot-pattern-linear-gradient.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dot-pattern-linear-gradient",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/dot-pattern-linear-gradient.tsx",
-      "content": "'use client'\n\nimport DotPattern from '~/registry/miami/ui/dot-pattern'\nimport { ny } from '~/lib/utils'\n\nfunction DotPatternDemo2() {\n   return (\n      <div className=\"bg-background relative flex size-full items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Dot Pattern\n         </p>\n         <DotPattern\n            width={20}\n            height={20}\n            cx={1}\n            cy={1}\n            cr={1}\n            className={ny(\n               '[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ',\n            )}\n         />\n      </div>\n   )\n}\n\nexport default DotPatternDemo2\n",
-      "type": "registry:component",
+      "path": "examples/dot-pattern-linear-gradient.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\nimport { DotPattern } from \"~/registry/miami/ui/dot-pattern\"\n\nexport default function DotPatternLinearGradient() {\n   return (\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Dot Pattern\n         </p>\n         <DotPattern\n            width={20}\n            height={20}\n            cx={1}\n            cy={1}\n            cr={1}\n            className={ny(\n               \"[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] \",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dot-pattern.json b/apps/web/public/r/styles/miami/dot-pattern.json
index a29732f7..be8012a9 100644
--- a/apps/web/public/r/styles/miami/dot-pattern.json
+++ b/apps/web/public/r/styles/miami/dot-pattern.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dot-pattern",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/dot-pattern.tsx",
-      "content": "import { useId } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface DotPatternProps {\n   width?: any\n   height?: any\n   x?: any\n   y?: any\n   cx?: any\n   cy?: any\n   cr?: any\n   className?: string\n   [key: string]: any\n}\nexport function DotPattern({\n   width = 16,\n   height = 16,\n   x = 0,\n   y = 0,\n   cx = 1,\n   cy = 1,\n   cr = 1,\n   className,\n   ...props\n}: DotPatternProps) {\n   const id = useId()\n\n   return (\n      <svg\n         aria-hidden=\"true\"\n         className={ny(\n            'pointer-events-none absolute inset-0 size-full fill-neutral-400/80',\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               patternContentUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <circle id=\"pattern-circle\" cx={cx} cy={cy} r={cr} />\n            </pattern>\n         </defs>\n         <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n      </svg>\n   )\n}\n\nexport default DotPattern\n",
-      "type": "registry:component",
+      "content": "import { useId } from \"react\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\n\ninterface DotPatternProps extends React.SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   cx?: number\n   cy?: number\n   cr?: number\n   className?: string\n   [key: string]: unknown\n}\nexport function DotPattern({\n   width = 16,\n   height = 16,\n   x = 0,\n   y = 0,\n   cx = 1,\n   cy = 1,\n   cr = 1,\n   className,\n   ...props\n}: DotPatternProps) {\n   const id = useId()\n\n   return (\n      <svg\n         aria-hidden=\"true\"\n         className={ny(\n            \"pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80\",\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               patternContentUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <circle id=\"pattern-circle\" cx={cx} cy={cy} r={cr} />\n            </pattern>\n         </defs>\n         <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill={`url(#${id})`}\n         />\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/drawer-demo.json b/apps/web/public/r/styles/miami/drawer-demo.json
index 04a8916d..b419558a 100644
--- a/apps/web/public/r/styles/miami/drawer-demo.json
+++ b/apps/web/public/r/styles/miami/drawer-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "drawer-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "drawer"
   ],
   "files": [
     {
-      "path": "example/drawer-demo.tsx",
-      "content": "import * as React from 'react'\nimport { MinusIcon, PlusIcon } from '@radix-ui/react-icons'\nimport { Bar, BarChart, ResponsiveContainer } from 'recharts'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from '~/registry/miami/ui/drawer'\n\nconst data = [\n   {\n      goal: 400,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 239,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 349,\n   },\n]\n\nexport default function DrawerDemo() {\n   const [goal, setGoal] = React.useState(350)\n\n   function onClick(adjustment: number) {\n      setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n   }\n\n   return (\n      <Drawer>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Open Drawer</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mx-auto w-full max-w-sm\">\n               <DrawerHeader>\n                  <DrawerTitle>Move Goal</DrawerTitle>\n                  <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n               </DrawerHeader>\n               <div className=\"p-4 pb-0\">\n                  <div className=\"flex items-center justify-center space-x-2\">\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"size-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(-10)}\n                        disabled={goal <= 200}\n                     >\n                        <MinusIcon className=\"size-4\" />\n                        <span className=\"sr-only\">Decrease</span>\n                     </Button>\n                     <div className=\"flex-1 text-center\">\n                        <div className=\"text-7xl font-bold tracking-tighter\">\n                           {goal}\n                        </div>\n                        <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                           Calories/day\n                        </div>\n                     </div>\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"size-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(10)}\n                        disabled={goal >= 400}\n                     >\n                        <PlusIcon className=\"size-4\" />\n                        <span className=\"sr-only\">Increase</span>\n                     </Button>\n                  </div>\n                  <div className=\"mt-3 h-[120px]\">\n                     <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data}>\n                           <Bar\n                              dataKey=\"goal\"\n                              style={\n                                 {\n                                    fill: 'hsl(var(--foreground))',\n                                    opacity: 0.9,\n                                 } as React.CSSProperties\n                              }\n                           />\n                        </BarChart>\n                     </ResponsiveContainer>\n                  </div>\n               </div>\n               <DrawerFooter>\n                  <Button>Submit</Button>\n                  <DrawerClose asChild>\n                     <Button variant=\"outline\">Cancel</Button>\n                  </DrawerClose>\n               </DrawerFooter>\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/drawer-demo.tsx",
+      "content": "import { MinusIcon, PlusIcon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"~/registry/miami/ui/drawer\"\n\nconst data = [\n   {\n      goal: 400,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 239,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 349,\n   },\n]\n\nexport default function DrawerDemo() {\n   const [goal, setGoal] = React.useState(350)\n\n   function onClick(adjustment: number) {\n      setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n   }\n\n   return (\n      <Drawer>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Open Drawer</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mx-auto w-full max-w-sm\">\n               <DrawerHeader>\n                  <DrawerTitle>Move Goal</DrawerTitle>\n                  <DrawerDescription>\n                     Set your daily activity goal.\n                  </DrawerDescription>\n               </DrawerHeader>\n               <div className=\"p-4 pb-0\">\n                  <div className=\"flex items-center justify-center space-x-2\">\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"size-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(-10)}\n                        disabled={goal <= 200}\n                     >\n                        <MinusIcon className=\"size-4\" />\n                        <span className=\"sr-only\">Decrease</span>\n                     </Button>\n                     <div className=\"flex-1 text-center\">\n                        <div className=\"text-7xl font-bold tracking-tighter\">\n                           {goal}\n                        </div>\n                        <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                           Calories/day\n                        </div>\n                     </div>\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"size-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(10)}\n                        disabled={goal >= 400}\n                     >\n                        <PlusIcon className=\"size-4\" />\n                        <span className=\"sr-only\">Increase</span>\n                     </Button>\n                  </div>\n                  <div className=\"mt-3 h-[120px]\">\n                     <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data}>\n                           <Bar\n                              dataKey=\"goal\"\n                              style={\n                                 {\n                                    fill: \"hsl(var(--foreground))\",\n                                    opacity: 0.9,\n                                 } as React.CSSProperties\n                              }\n                           />\n                        </BarChart>\n                     </ResponsiveContainer>\n                  </div>\n               </div>\n               <DrawerFooter>\n                  <Button>Submit</Button>\n                  <DrawerClose asChild>\n                     <Button variant=\"outline\">Cancel</Button>\n                  </DrawerClose>\n               </DrawerFooter>\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/drawer-dialog.json b/apps/web/public/r/styles/miami/drawer-dialog.json
index 2e1a9911..beb014d7 100644
--- a/apps/web/public/r/styles/miami/drawer-dialog.json
+++ b/apps/web/public/r/styles/miami/drawer-dialog.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "drawer-dialog",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "drawer",
     "dialog"
   ],
   "files": [
     {
-      "path": "example/drawer-dialog.tsx",
-      "content": "import * as React from 'react'\n\nimport { ny } from '~/lib/utils'\nimport { useMediaQuery } from '~/hooks/use-media-query'\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from '~/registry/miami/ui/dialog'\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from '~/registry/miami/ui/drawer'\nimport { Input } from '~/registry/miami/ui/input'\nimport { Label } from '~/registry/miami/ui/label'\n\nexport default function DrawerDialogDemo() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery('(min-width: 768px)')\n\n   if (isDesktop) {\n      return (\n         <Dialog open={open} onOpenChange={setOpen}>\n            <DialogTrigger asChild>\n               <Button variant=\"outline\">Edit Profile</Button>\n            </DialogTrigger>\n            <DialogContent className=\"sm:max-w-[425px]\">\n               <DialogHeader>\n                  <DialogTitle>Edit profile</DialogTitle>\n                  <DialogDescription>\n                     Make changes to your profile here. Click save when you're done.\n                  </DialogDescription>\n               </DialogHeader>\n               <ProfileForm />\n            </DialogContent>\n         </Dialog>\n      )\n   }\n\n   return (\n      <Drawer open={open} onOpenChange={setOpen}>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <DrawerHeader className=\"text-left\">\n               <DrawerTitle>Edit profile</DrawerTitle>\n               <DrawerDescription>\n                  Make changes to your profile here. Click save when you're done.\n               </DrawerDescription>\n            </DrawerHeader>\n            <ProfileForm className=\"px-4\" />\n            <DrawerFooter className=\"pt-2\">\n               <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n               </DrawerClose>\n            </DrawerFooter>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<'form'>) {\n   return (\n      <form className={ny('grid items-start gap-4', className)}>\n         <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input type=\"email\" id=\"email\" defaultValue=\"nyxb@example.com\" />\n         </div>\n         <div className=\"grid gap-2\">\n            <Label htmlFor=\"username\">Username</Label>\n            <Input id=\"username\" defaultValue=\"~nyxb\" />\n         </div>\n         <Button type=\"submit\">Save changes</Button>\n      </form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/drawer-dialog.tsx",
+      "content": "import * as React from \"react\"\n\nimport { useMediaQuery } from \"~/hooks/use-media-query\"\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"~/registry/miami/ui/dialog\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"~/registry/miami/ui/drawer\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport default function DrawerDialogDemo() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n   if (isDesktop) {\n      return (\n         <Dialog open={open} onOpenChange={setOpen}>\n            <DialogTrigger asChild>\n               <Button variant=\"outline\">Edit Profile</Button>\n            </DialogTrigger>\n            <DialogContent className=\"sm:max-w-[425px]\">\n               <DialogHeader>\n                  <DialogTitle>Edit profile</DialogTitle>\n                  <DialogDescription>\n                     Make changes to your profile here. Click save when you're\n                     done.\n                  </DialogDescription>\n               </DialogHeader>\n               <ProfileForm />\n            </DialogContent>\n         </Dialog>\n      )\n   }\n\n   return (\n      <Drawer open={open} onOpenChange={setOpen}>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <DrawerHeader className=\"text-left\">\n               <DrawerTitle>Edit profile</DrawerTitle>\n               <DrawerDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </DrawerDescription>\n            </DrawerHeader>\n            <ProfileForm className=\"px-4\" />\n            <DrawerFooter className=\"pt-2\">\n               <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n               </DrawerClose>\n            </DrawerFooter>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n   return (\n      <form className={ny(\"grid items-start gap-4\", className)}>\n         <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input type=\"email\" id=\"email\" defaultValue=\"nyxb@example.com\" />\n         </div>\n         <div className=\"grid gap-2\">\n            <Label htmlFor=\"username\">Username</Label>\n            <Input id=\"username\" defaultValue=\"~nyxb\" />\n         </div>\n         <Button type=\"submit\">Save changes</Button>\n      </form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/drawer.json b/apps/web/public/r/styles/miami/drawer.json
index b9a20f1a..dcc41d48 100644
--- a/apps/web/public/r/styles/miami/drawer.json
+++ b/apps/web/public/r/styles/miami/drawer.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "drawer",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "vaul",
     "@radix-ui/react-dialog"
@@ -8,8 +10,8 @@
   "files": [
     {
       "path": "ui/drawer.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Drawer as DrawerPrimitive } from 'vaul'\n\nimport { ny } from '~/lib/utils'\n\nfunction Drawer({\n   shouldScaleBackground = true,\n   ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n   return (\n      <DrawerPrimitive.Root\n         shouldScaleBackground={shouldScaleBackground}\n         {...props}\n      />\n   )\n}\nDrawer.displayName = 'Drawer'\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Overlay\n      ref={ref}\n      className={ny('fixed inset-0 z-50 bg-black/80', className)}\n      {...props}\n   />\n))\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\n\nconst DrawerContent = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n         ref={ref}\n         className={ny(\n            'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border',\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"bg-muted mx-auto mt-4 h-2 w-[100px] cursor-grab rounded-full active:cursor-grabbing\" />\n         {children}\n      </DrawerPrimitive.Content>\n   </DrawerPortal>\n))\nDrawerContent.displayName = 'DrawerContent'\n\nfunction DrawerHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny('grid gap-1.5 p-4 text-center sm:text-left', className)}\n         {...props}\n      />\n   )\n}\nDrawerHeader.displayName = 'DrawerHeader'\n\nfunction DrawerFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny('mt-auto flex flex-col gap-2 p-4', className)}\n         {...props}\n      />\n   )\n}\nDrawerFooter.displayName = 'DrawerFooter'\n\nconst DrawerTitle = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Title\n      ref={ref}\n      className={ny(\n         'text-lg font-semibold leading-none tracking-tight',\n         className,\n      )}\n      {...props}\n   />\n))\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\n\nconst DrawerDescription = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Description\n      ref={ref}\n      className={ny('text-muted-foreground text-sm', className)}\n      {...props}\n   />\n))\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\n\nexport {\n   Drawer,\n   DrawerPortal,\n   DrawerOverlay,\n   DrawerTrigger,\n   DrawerClose,\n   DrawerContent,\n   DrawerHeader,\n   DrawerFooter,\n   DrawerTitle,\n   DrawerDescription,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { ny } from \"~/lib/utils\"\n\nfunction Drawer({\n   shouldScaleBackground = true,\n   ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n   return (\n      <DrawerPrimitive.Root\n         shouldScaleBackground={shouldScaleBackground}\n         {...props}\n      />\n   )\n}\nDrawer.displayName = \"Drawer\"\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Overlay\n      ref={ref}\n      className={ny(\"fixed inset-0 z-50 bg-black/80\", className)}\n      {...props}\n   />\n))\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\n\nconst DrawerContent = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n         ref={ref}\n         className={ny(\n            \"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border\",\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"bg-muted mx-auto mt-4 h-2 w-[100px] cursor-grab rounded-full active:cursor-grabbing\" />\n         {children}\n      </DrawerPrimitive.Content>\n   </DrawerPortal>\n))\nDrawerContent.displayName = \"DrawerContent\"\n\nfunction DrawerHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n         {...props}\n      />\n   )\n}\nDrawerHeader.displayName = \"DrawerHeader\"\n\nfunction DrawerFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\"mt-auto flex flex-col gap-2 p-4\", className)}\n         {...props}\n      />\n   )\n}\nDrawerFooter.displayName = \"DrawerFooter\"\n\nconst DrawerTitle = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Title\n      ref={ref}\n      className={ny(\n         \"text-lg font-semibold leading-none tracking-tight\",\n         className,\n      )}\n      {...props}\n   />\n))\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\n\nconst DrawerDescription = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Description\n      ref={ref}\n      className={ny(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\n\nexport {\n   Drawer,\n   DrawerPortal,\n   DrawerOverlay,\n   DrawerTrigger,\n   DrawerClose,\n   DrawerContent,\n   DrawerHeader,\n   DrawerFooter,\n   DrawerTitle,\n   DrawerDescription,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dropdown-menu-checkboxes.json b/apps/web/public/r/styles/miami/dropdown-menu-checkboxes.json
index 94e6c45b..84348efe 100644
--- a/apps/web/public/r/styles/miami/dropdown-menu-checkboxes.json
+++ b/apps/web/public/r/styles/miami/dropdown-menu-checkboxes.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dropdown-menu-checkboxes",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "dropdown-menu",
     "checkbox"
   ],
   "files": [
     {
-      "path": "example/dropdown-menu-checkboxes.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport type { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   DropdownMenu,\n   DropdownMenuCheckboxItem,\n   DropdownMenuContent,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\n\ntype Checked = DropdownMenuCheckboxItemProps['checked']\n\nexport default function DropdownMenuCheckboxes() {\n   const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)\n   const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)\n   const [showPanel, setShowPanel] = React.useState<Checked>(false)\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuCheckboxItem\n               checked={showStatusBar}\n               onCheckedChange={setShowStatusBar}\n            >\n               Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n               checked={showActivityBar}\n               onCheckedChange={setShowActivityBar}\n               disabled\n            >\n               Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n               checked={showPanel}\n               onCheckedChange={setShowPanel}\n            >\n               Panel\n            </DropdownMenuCheckboxItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/dropdown-menu-checkboxes.tsx",
+      "content": "\"use client\"\n\nimport type { DropdownMenuCheckboxItemProps } from \"@radix-ui/react-dropdown-menu\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuCheckboxItem,\n   DropdownMenuContent,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\n\ntype Checked = DropdownMenuCheckboxItemProps[\"checked\"]\n\nexport default function DropdownMenuCheckboxes() {\n   const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)\n   const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)\n   const [showPanel, setShowPanel] = React.useState<Checked>(false)\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuCheckboxItem\n               checked={showStatusBar}\n               onCheckedChange={setShowStatusBar}\n            >\n               Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n               checked={showActivityBar}\n               onCheckedChange={setShowActivityBar}\n               disabled\n            >\n               Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n               checked={showPanel}\n               onCheckedChange={setShowPanel}\n            >\n               Panel\n            </DropdownMenuCheckboxItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dropdown-menu-demo.json b/apps/web/public/r/styles/miami/dropdown-menu-demo.json
index 19f885b7..35055211 100644
--- a/apps/web/public/r/styles/miami/dropdown-menu-demo.json
+++ b/apps/web/public/r/styles/miami/dropdown-menu-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dropdown-menu-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "dropdown-menu"
   ],
   "files": [
     {
-      "path": "example/dropdown-menu-demo.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuPortal,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\n\nexport default function DropdownMenuDemo() {\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  Profile\n                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Billing\n                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Settings\n                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Keyboard shortcuts\n                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>Team</DropdownMenuItem>\n               <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                     <DropdownMenuSubContent>\n                        <DropdownMenuItem>Email</DropdownMenuItem>\n                        <DropdownMenuItem>Message</DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>More...</DropdownMenuItem>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n               </DropdownMenuSub>\n               <DropdownMenuItem>\n                  New Team\n                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               Log out\n               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuPortal,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\n\nexport default function DropdownMenuDemo() {\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  Profile\n                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Billing\n                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Settings\n                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Keyboard shortcuts\n                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>Team</DropdownMenuItem>\n               <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                     <DropdownMenuSubContent>\n                        <DropdownMenuItem>Email</DropdownMenuItem>\n                        <DropdownMenuItem>Message</DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>More...</DropdownMenuItem>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n               </DropdownMenuSub>\n               <DropdownMenuItem>\n                  New Team\n                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               Log out\n               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dropdown-menu-radio-group.json b/apps/web/public/r/styles/miami/dropdown-menu-radio-group.json
index 3a57cbe3..22c99cb5 100644
--- a/apps/web/public/r/styles/miami/dropdown-menu-radio-group.json
+++ b/apps/web/public/r/styles/miami/dropdown-menu-radio-group.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dropdown-menu-radio-group",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "dropdown-menu",
     "radio-group"
   ],
   "files": [
     {
-      "path": "example/dropdown-menu-radio-group.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuLabel,\n   DropdownMenuRadioGroup,\n   DropdownMenuRadioItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\n\nexport default function DropdownMenuRadioGroupDemo() {\n   const [position, setPosition] = React.useState('bottom')\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>\n               <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n               <DropdownMenuRadioItem value=\"bottom\">Bottom</DropdownMenuRadioItem>\n               <DropdownMenuRadioItem value=\"right\">Right</DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/dropdown-menu-radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuLabel,\n   DropdownMenuRadioGroup,\n   DropdownMenuRadioItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\n\nexport default function DropdownMenuRadioGroupDemo() {\n   const [position, setPosition] = React.useState(\"bottom\")\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuRadioGroup\n               value={position}\n               onValueChange={setPosition}\n            >\n               <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n               <DropdownMenuRadioItem value=\"bottom\">\n                  Bottom\n               </DropdownMenuRadioItem>\n               <DropdownMenuRadioItem value=\"right\">\n                  Right\n               </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/dropdown-menu.json b/apps/web/public/r/styles/miami/dropdown-menu.json
index 9d0573e4..a9f3eb68 100644
--- a/apps/web/public/r/styles/miami/dropdown-menu.json
+++ b/apps/web/public/r/styles/miami/dropdown-menu.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "dropdown-menu",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-dropdown-menu"
   ],
   "files": [
     {
       "path": "ui/dropdown-menu.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      className={ny(\n         'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n   </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName\n  = DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      className={ny(\n         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuSubContent.displayName\n  = DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n   <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n         ref={ref}\n         sideOffset={sideOffset}\n         className={ny(\n            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',\n            className,\n         )}\n         {...props}\n      />\n   </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <DropdownMenuPrimitive.Item\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <DropdownMenuPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName\n  = DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <DropdownMenuPrimitive.ItemIndicator>\n            <Circle className=\"size-2 fill-current\" />\n         </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <DropdownMenuPrimitive.Label\n      ref={ref}\n      className={ny(\n         'px-2 py-1.5 text-sm font-semibold',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <DropdownMenuPrimitive.Separator\n      ref={ref}\n      className={ny('bg-muted -mx-1 my-1 h-px', className)}\n      {...props}\n   />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nfunction DropdownMenuShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny('ml-auto text-xs tracking-widest opacity-60', className)}\n         {...props}\n      />\n   )\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\n\nexport {\n   DropdownMenu,\n   DropdownMenuTrigger,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuCheckboxItem,\n   DropdownMenuRadioItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuGroup,\n   DropdownMenuPortal,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuRadioGroup,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n   </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n   DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      className={ny(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg\",\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuSubContent.displayName =\n   DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n   <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n         ref={ref}\n         sideOffset={sideOffset}\n         className={ny(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md\",\n            className,\n         )}\n         {...props}\n      />\n   </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <DropdownMenuPrimitive.Item\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <DropdownMenuPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n   DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <DropdownMenuPrimitive.ItemIndicator>\n            <Circle className=\"size-2 fill-current\" />\n         </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <DropdownMenuPrimitive.Label\n      ref={ref}\n      className={ny(\n         \"px-2 py-1.5 text-sm font-semibold\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <DropdownMenuPrimitive.Separator\n      ref={ref}\n      className={ny(\"bg-muted -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nfunction DropdownMenuShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n         {...props}\n      />\n   )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n   DropdownMenu,\n   DropdownMenuTrigger,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuCheckboxItem,\n   DropdownMenuRadioItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuGroup,\n   DropdownMenuPortal,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuRadioGroup,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/fade-text-demo.json b/apps/web/public/r/styles/miami/fade-text-demo.json
index 821bd683..45d96cac 100644
--- a/apps/web/public/r/styles/miami/fade-text-demo.json
+++ b/apps/web/public/r/styles/miami/fade-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "fade-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/fade-text-demo.tsx",
-      "content": "import { FadeText } from '~/registry/miami/ui/fade-text'\n\nexport default async function FadeTextDemo() {\n   return (\n      <div className=\"flex flex-col space-y-8 text-center\">\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"up\"\n            framerProps={{\n               show: { transition: { delay: 0.2 } },\n            }}\n            text=\"Fade Up\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"right\"\n            framerProps={{\n               show: { transition: { delay: 0.4 } },\n            }}\n            text=\"Fade Right\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"down\"\n            framerProps={{\n               show: { transition: { delay: 0.6 } },\n            }}\n            text=\"Fade Down\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"left\"\n            framerProps={{\n               show: { transition: { delay: 0.8 } },\n            }}\n            text=\"Fade Left\"\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/fade-text-demo.tsx",
+      "content": "import { FadeText } from \"~/registry/miami/ui/fade-text\"\n\nexport default async function FadeTextDemo() {\n   return (\n      <div className=\"flex flex-col space-y-8 text-center\">\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"up\"\n            framerProps={{\n               show: { transition: { delay: 0.2 } },\n            }}\n            text=\"Fade Up\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"right\"\n            framerProps={{\n               show: { transition: { delay: 0.4 } },\n            }}\n            text=\"Fade Right\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"down\"\n            framerProps={{\n               show: { transition: { delay: 0.6 } },\n            }}\n            text=\"Fade Down\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"left\"\n            framerProps={{\n               show: { transition: { delay: 0.8 } },\n            }}\n            text=\"Fade Left\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/fade-text.json b/apps/web/public/r/styles/miami/fade-text.json
index 4f9659fc..0757cc5b 100644
--- a/apps/web/public/r/styles/miami/fade-text.json
+++ b/apps/web/public/r/styles/miami/fade-text.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "fade-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/fade-text.tsx",
-      "content": "'use client'\n\nimport type { Variants } from 'framer-motion'\nimport { motion } from 'framer-motion'\nimport { useMemo } from 'react'\n\ninterface FadeTextProps {\n   className?: string\n   direction?: 'up' | 'down' | 'left' | 'right'\n   framerProps?: Variants\n   text: string\n}\n\nexport function FadeText({\n   direction = 'up',\n   className,\n   framerProps = {\n      hidden: { opacity: 0 },\n      show: { opacity: 1, transition: { type: 'spring' } },\n   },\n   text,\n}: FadeTextProps) {\n   const directionOffset = useMemo(() => {\n      const map = { up: 10, down: -10, left: -10, right: 10 }\n      return map[direction]\n   }, [direction])\n\n   const axis = direction === 'up' || direction === 'down' ? 'y' : 'x'\n\n   const FADE_ANIMATION_VARIANTS = useMemo(() => {\n      const { hidden, show, ...rest } = framerProps as {\n         [name: string]: { [name: string]: number, opacity: number }\n      }\n\n      return {\n         ...rest,\n         hidden: {\n            ...(hidden ?? {}),\n            opacity: hidden?.opacity ?? 0,\n            [axis]: hidden?.[axis] ?? directionOffset,\n         },\n         show: {\n            ...(show ?? {}),\n            opacity: show?.opacity ?? 1,\n            [axis]: show?.[axis] ?? 0,\n         },\n      }\n   }, [directionOffset, axis, framerProps])\n\n   return (\n      <motion.div\n         initial=\"hidden\"\n         animate=\"show\"\n         viewport={{ once: true }}\n         variants={FADE_ANIMATION_VARIANTS}\n      >\n         <motion.span className={className}>{text}</motion.span>\n      </motion.div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { motion } from \"framer-motion\"\nimport { useMemo } from \"react\"\n\ninterface FadeTextProps {\n   className?: string\n   direction?: \"up\" | \"down\" | \"left\" | \"right\"\n   framerProps?: Variants\n   text: string\n}\n\nexport function FadeText({\n   direction = \"up\",\n   className,\n   framerProps = {\n      hidden: { opacity: 0 },\n      show: { opacity: 1, transition: { type: \"spring\" } },\n   },\n   text,\n}: FadeTextProps) {\n   const directionOffset = useMemo(() => {\n      const map = { up: 10, down: -10, left: -10, right: 10 }\n      return map[direction]\n   }, [direction])\n\n   const axis = direction === \"up\" || direction === \"down\" ? \"y\" : \"x\"\n\n   const FADE_ANIMATION_VARIANTS = useMemo(() => {\n      const { hidden, show, ...rest } = framerProps as {\n         [name: string]: { [name: string]: number; opacity: number }\n      }\n\n      return {\n         ...rest,\n         hidden: {\n            ...(hidden ?? {}),\n            opacity: hidden?.opacity ?? 0,\n            [axis]: hidden?.[axis] ?? directionOffset,\n         },\n         show: {\n            ...(show ?? {}),\n            opacity: show?.opacity ?? 1,\n            [axis]: show?.[axis] ?? 0,\n         },\n      }\n   }, [directionOffset, axis, framerProps])\n\n   return (\n      <motion.div\n         initial=\"hidden\"\n         animate=\"show\"\n         viewport={{ once: true }}\n         variants={FADE_ANIMATION_VARIANTS}\n      >\n         <motion.span className={className}>{text}</motion.span>\n      </motion.div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/file-tree-demo.json b/apps/web/public/r/styles/miami/file-tree-demo.json
index 5312d73b..1c5a5ebe 100644
--- a/apps/web/public/r/styles/miami/file-tree-demo.json
+++ b/apps/web/public/r/styles/miami/file-tree-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "file-tree-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/file-tree-demo.tsx",
-      "content": "import { File, Folder, Tree } from '~/registry/miami/ui/file-tree'\n\nexport default function FileTreeDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[300px] w-1/2 flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <Tree\n            className=\"bg-background overflow-hidden rounded-md p-2\"\n            initialSelectedId=\"7\"\n            initialExpandedItems={[\n               '1',\n               '2',\n               '3',\n               '4',\n               '5',\n               '6',\n               '7',\n               '8',\n               '9',\n               '10',\n               '11',\n            ]}\n            elements={ELEMENTS}\n         >\n            <Folder element=\"src\" value=\"1\">\n               <Folder value=\"2\" element=\"app\">\n                  <File value=\"3\">\n                     <p>layout.tsx</p>\n                  </File>\n                  <File value=\"4\">\n                     <p>page.tsx</p>\n                  </File>\n               </Folder>\n               <Folder value=\"5\" element=\"components\">\n                  <Folder value=\"6\" element=\"ui\">\n                     <File value=\"7\">\n                        <p>button.tsx</p>\n                     </File>\n                  </Folder>\n                  <File value=\"8\">\n                     <p>header.tsx</p>\n                  </File>\n                  <File value=\"9\">\n                     <p>footer.tsx</p>\n                  </File>\n               </Folder>\n               <Folder value=\"10\" element=\"lib\">\n                  <File value=\"11\">\n                     <p>utils.ts</p>\n                  </File>\n               </Folder>\n            </Folder>\n         </Tree>\n      </div>\n   )\n}\n\nconst ELEMENTS = [\n   {\n      id: '1',\n      isSelectable: true,\n      name: 'src',\n      children: [\n         {\n            id: '2',\n            isSelectable: true,\n            name: 'app',\n            children: [\n               {\n                  id: '3',\n                  isSelectable: true,\n                  name: 'layout.tsx',\n               },\n               {\n                  id: '4',\n                  isSelectable: true,\n                  name: 'page.tsx',\n               },\n            ],\n         },\n         {\n            id: '5',\n            isSelectable: true,\n            name: 'components',\n            children: [\n               {\n                  id: '6',\n                  isSelectable: true,\n                  name: 'header.tsx',\n               },\n               {\n                  id: '7',\n                  isSelectable: true,\n                  name: 'footer.tsx',\n               },\n            ],\n         },\n         {\n            id: '8',\n            isSelectable: true,\n            name: 'lib',\n            children: [\n               {\n                  id: '9',\n                  isSelectable: true,\n                  name: 'utils.ts',\n               },\n            ],\n         },\n      ],\n   },\n]\n",
-      "type": "registry:component",
+      "path": "examples/file-tree-demo.tsx",
+      "content": "import { File, Folder, Tree } from \"~/registry/miami/ui/file-tree\"\n\nexport default function FileTreeDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[300px] w-1/2 flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <Tree\n            className=\"bg-background overflow-hidden rounded-md p-2\"\n            initialSelectedId=\"7\"\n            initialExpandedItems={[\n               \"1\",\n               \"2\",\n               \"3\",\n               \"4\",\n               \"5\",\n               \"6\",\n               \"7\",\n               \"8\",\n               \"9\",\n               \"10\",\n               \"11\",\n            ]}\n            elements={ELEMENTS}\n         >\n            <Folder element=\"src\" value=\"1\">\n               <Folder value=\"2\" element=\"app\">\n                  <File value=\"3\">\n                     <p>layout.tsx</p>\n                  </File>\n                  <File value=\"4\">\n                     <p>page.tsx</p>\n                  </File>\n               </Folder>\n               <Folder value=\"5\" element=\"components\">\n                  <Folder value=\"6\" element=\"ui\">\n                     <File value=\"7\">\n                        <p>button.tsx</p>\n                     </File>\n                  </Folder>\n                  <File value=\"8\">\n                     <p>header.tsx</p>\n                  </File>\n                  <File value=\"9\">\n                     <p>footer.tsx</p>\n                  </File>\n               </Folder>\n               <Folder value=\"10\" element=\"lib\">\n                  <File value=\"11\">\n                     <p>utils.ts</p>\n                  </File>\n               </Folder>\n            </Folder>\n         </Tree>\n      </div>\n   )\n}\n\nconst ELEMENTS = [\n   {\n      id: \"1\",\n      isSelectable: true,\n      name: \"src\",\n      children: [\n         {\n            id: \"2\",\n            isSelectable: true,\n            name: \"app\",\n            children: [\n               {\n                  id: \"3\",\n                  isSelectable: true,\n                  name: \"layout.tsx\",\n               },\n               {\n                  id: \"4\",\n                  isSelectable: true,\n                  name: \"page.tsx\",\n               },\n            ],\n         },\n         {\n            id: \"5\",\n            isSelectable: true,\n            name: \"components\",\n            children: [\n               {\n                  id: \"6\",\n                  isSelectable: true,\n                  name: \"header.tsx\",\n               },\n               {\n                  id: \"7\",\n                  isSelectable: true,\n                  name: \"footer.tsx\",\n               },\n            ],\n         },\n         {\n            id: \"8\",\n            isSelectable: true,\n            name: \"lib\",\n            children: [\n               {\n                  id: \"9\",\n                  isSelectable: true,\n                  name: \"utils.ts\",\n               },\n            ],\n         },\n      ],\n   },\n]\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/file-tree.json b/apps/web/public/r/styles/miami/file-tree.json
index 3a26cdb0..e1f85582 100644
--- a/apps/web/public/r/styles/miami/file-tree.json
+++ b/apps/web/public/r/styles/miami/file-tree.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "file-tree",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/file-tree.tsx",
-      "content": "'use client'\n\nimport React, {\n   createContext,\n   forwardRef,\n   useCallback,\n   useContext,\n   useEffect,\n   useState,\n} from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { FileIcon, FolderIcon, FolderOpenIcon } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport { ScrollArea } from '~/registry/miami/ui/scroll-area'\n\ninterface TreeViewElement {\n   id: string\n   name: string\n   isSelectable?: boolean\n   children?: TreeViewElement[]\n}\n\ninterface TreeContextProps {\n   selectedId: string | undefined\n   expandedItems: string[] | undefined\n   indicator: boolean\n   handleExpand: (id: string) => void\n   selectItem: (id: string) => void\n   setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>\n   openIcon?: React.ReactNode\n   closeIcon?: React.ReactNode\n   direction: 'rtl' | 'ltr'\n}\n\nconst TreeContext = createContext<TreeContextProps | null>(null)\n\nfunction useTree() {\n   const context = useContext(TreeContext)\n   if (!context) {\n      throw new Error('useTree must be used within a TreeProvider')\n   }\n   return context\n}\n\ninterface TreeViewComponentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\ntype Direction = 'rtl' | 'ltr' | undefined\n\ntype TreeViewProps = {\n   initialSelectedId?: string\n   indicator?: boolean\n   elements?: TreeViewElement[]\n   initialExpandedItems?: string[]\n   openIcon?: React.ReactNode\n   closeIcon?: React.ReactNode\n} & TreeViewComponentProps\n\nconst Tree = forwardRef<HTMLDivElement, TreeViewProps>(\n   (\n      {\n         className,\n         elements,\n         initialSelectedId,\n         initialExpandedItems,\n         children,\n         indicator = true,\n         openIcon,\n         closeIcon,\n         dir,\n         ...props\n      },\n      ref,\n   ) => {\n      const [selectedId, setSelectedId] = useState<string | undefined>(\n         initialSelectedId,\n      )\n      const [expandedItems, setExpandedItems] = useState<string[] | undefined>(\n         initialExpandedItems,\n      )\n\n      const selectItem = useCallback((id: string) => {\n         setSelectedId(id)\n      }, [])\n\n      const handleExpand = useCallback((id: string) => {\n         setExpandedItems((prev) => {\n            if (prev?.includes(id)) {\n               return prev.filter(item => item !== id)\n            }\n            return [...(prev ?? []), id]\n         })\n      }, [])\n\n      const expandSpecificTargetedElements = useCallback(\n         (elements?: TreeViewElement[], selectId?: string) => {\n            if (!elements || !selectId)\n               return\n            const findParent = (\n               currentElement: TreeViewElement,\n               currentPath: string[] = [],\n            ) => {\n               const isSelectable = currentElement.isSelectable ?? true\n               const newPath = [...currentPath, currentElement.id]\n               if (currentElement.id === selectId) {\n                  if (isSelectable) {\n                     setExpandedItems(prev => [...(prev ?? []), ...newPath])\n                  }\n                  else {\n                     if (newPath.includes(currentElement.id)) {\n                        newPath.pop()\n                        setExpandedItems(prev => [...(prev ?? []), ...newPath])\n                     }\n                  }\n                  return\n               }\n               if (\n                  isSelectable\n                  && currentElement.children\n                  && currentElement.children.length > 0\n               ) {\n                  currentElement.children.forEach((child) => {\n                     findParent(child, newPath)\n                  })\n               }\n            }\n            elements.forEach((element) => {\n               findParent(element)\n            })\n         },\n         [],\n      )\n\n      useEffect(() => {\n         if (initialSelectedId) {\n            expandSpecificTargetedElements(elements, initialSelectedId)\n         }\n      }, [initialSelectedId, elements])\n\n      const direction = dir === 'rtl' ? 'rtl' : 'ltr'\n\n      return (\n         <TreeContext.Provider\n            value={{\n               selectedId,\n               expandedItems,\n               handleExpand,\n               selectItem,\n               setExpandedItems,\n               indicator,\n               openIcon,\n               closeIcon,\n               direction,\n            }}\n         >\n            <div className={ny('size-full', className)}>\n               <ScrollArea\n                  ref={ref}\n                  className=\"relative h-full px-2\"\n                  dir={dir as Direction}\n               >\n                  <AccordionPrimitive.Root\n                     {...props}\n                     type=\"multiple\"\n                     defaultValue={expandedItems}\n                     value={expandedItems}\n                     className=\"flex flex-col gap-1\"\n                     onValueChange={value =>\n                        setExpandedItems(prev => [...(prev ?? []), value[0]])}\n                     dir={dir as Direction}\n                  >\n                     {children}\n                  </AccordionPrimitive.Root>\n               </ScrollArea>\n            </div>\n         </TreeContext.Provider>\n      )\n   },\n)\n\nTree.displayName = 'Tree'\n\nconst TreeIndicator = forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { direction } = useTree()\n\n   return (\n      <div\n         dir={direction}\n         ref={ref}\n         className={ny(\n            'bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\n\nTreeIndicator.displayName = 'TreeIndicator'\n\ninterface FolderComponentProps\n   extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {}\n\ntype FolderProps = {\n   expandedItems?: string[]\n   element: string\n   isSelectable?: boolean\n   isSelect?: boolean\n} & FolderComponentProps\n\nconst Folder = forwardRef<\n   HTMLDivElement,\n  FolderProps & React.HTMLAttributes<HTMLDivElement>\n>(\n   (\n      {\n         className,\n         element,\n         value,\n         isSelectable = true,\n         isSelect,\n         children,\n         ...props\n      },\n      _ref,\n   ) => {\n      const {\n         direction,\n         handleExpand,\n         expandedItems,\n         indicator,\n         setExpandedItems,\n         openIcon,\n         closeIcon,\n      } = useTree()\n\n      return (\n         <AccordionPrimitive.Item\n            {...props}\n            value={value}\n            className=\"relative h-full overflow-hidden \"\n         >\n            <AccordionPrimitive.Trigger\n               className={ny(\n            `flex items-center gap-1 rounded-md text-sm`,\n            className,\n            {\n               'bg-muted rounded-md': isSelect && isSelectable,\n               'cursor-pointer': isSelectable,\n               'cursor-not-allowed opacity-50': !isSelectable,\n            },\n               )}\n               disabled={!isSelectable}\n               onClick={() => handleExpand(value)}\n            >\n               {expandedItems?.includes(value)\n                  ? openIcon ?? <FolderOpenIcon className=\"size-4\" />\n                  : closeIcon ?? <FolderIcon className=\"size-4\" />}\n               <span>{element}</span>\n            </AccordionPrimitive.Trigger>\n            <AccordionPrimitive.Content className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative h-full overflow-hidden text-sm\">\n               {element && indicator && <TreeIndicator aria-hidden=\"true\" />}\n               <AccordionPrimitive.Root\n                  dir={direction}\n                  type=\"multiple\"\n                  className=\"ml-5 flex flex-col gap-1 py-1 rtl:mr-5 \"\n                  defaultValue={expandedItems}\n                  value={expandedItems}\n                  onValueChange={(value) => {\n                     setExpandedItems?.(prev => [...(prev ?? []), value[0]])\n                  }}\n               >\n                  {children}\n               </AccordionPrimitive.Root>\n            </AccordionPrimitive.Content>\n         </AccordionPrimitive.Item>\n      )\n   },\n)\n\nFolder.displayName = 'Folder'\n\nconst File = forwardRef<\n   HTMLButtonElement,\n   {\n      value: string\n      handleSelect?: (id: string) => void\n      isSelectable?: boolean\n      isSelect?: boolean\n      fileIcon?: React.ReactNode\n   } & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(\n         (\n            {\n               value,\n               className,\n               handleSelect,\n               isSelectable = true,\n               isSelect,\n               fileIcon,\n               children,\n               ...props\n            },\n            ref,\n         ) => {\n            const { direction, selectedId, selectItem } = useTree()\n            const isSelected = isSelect ?? selectedId === value\n            return (\n               <AccordionPrimitive.Item value={value} className=\"relative\">\n                  <AccordionPrimitive.Trigger\n                     ref={ref}\n                     {...props}\n                     dir={direction}\n                     disabled={!isSelectable}\n                     aria-label=\"File\"\n                     className={ny(\n                        'flex cursor-pointer items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out  rtl:pl-1 rtl:pr-0',\n                        {\n                           'bg-muted': isSelected && isSelectable,\n                        },\n                        isSelectable ? 'cursor-pointer' : 'cursor-not-allowed opacity-50',\n                        className,\n                     )}\n                     onClick={() => selectItem(value)}\n                  >\n                     {fileIcon ?? <FileIcon className=\"size-4\" />}\n                     {children}\n                  </AccordionPrimitive.Trigger>\n               </AccordionPrimitive.Item>\n            )\n         },\n         )\n\nFile.displayName = 'File'\n\nconst CollapseButton = forwardRef<\n   HTMLButtonElement,\n   {\n      elements: TreeViewElement[]\n      expandAll?: boolean\n   } & React.HTMLAttributes<HTMLButtonElement>\n>(({ className, elements, expandAll = false, children, ...props }, ref) => {\n   const { expandedItems, setExpandedItems } = useTree()\n\n   const expendAllTree = useCallback((elements: TreeViewElement[]) => {\n      const expandTree = (element: TreeViewElement) => {\n         const isSelectable = element.isSelectable ?? true\n         if (isSelectable && element.children && element.children.length > 0) {\n            setExpandedItems?.(prev => [...(prev ?? []), element.id])\n            element.children.forEach(expandTree)\n         }\n      }\n\n      elements.forEach(expandTree)\n   }, [])\n\n   const closeAll = useCallback(() => {\n      setExpandedItems?.([])\n   }, [])\n\n   useEffect(() => {\n      // eslint-disable-next-line no-console\n      console.log(expandAll)\n      if (expandAll) {\n         expendAllTree(elements)\n      }\n   }, [expandAll])\n\n   return (\n      <Button\n         variant=\"ghost\"\n         className=\"absolute bottom-1 right-2 h-8 w-fit p-1\"\n         onClick={\n            expandedItems && expandedItems.length > 0\n               ? closeAll\n               : () => expendAllTree(elements)\n         }\n         ref={ref}\n         {...props}\n      >\n         {children}\n         <span className=\"sr-only\">Toggle</span>\n      </Button>\n   )\n})\n\nCollapseButton.displayName = 'CollapseButton'\n\nexport { CollapseButton, File, Folder, Tree, type TreeViewElement }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\"\nimport type React from \"react\"\nimport {\n   createContext,\n   forwardRef,\n   useCallback,\n   useContext,\n   useEffect,\n   useState,\n} from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { ScrollArea } from \"~/registry/miami/ui/scroll-area\"\n\ninterface TreeViewElement {\n   id: string\n   name: string\n   isSelectable?: boolean\n   children?: TreeViewElement[]\n}\n\ninterface TreeContextProps {\n   selectedId: string | undefined\n   expandedItems: string[] | undefined\n   indicator: boolean\n   handleExpand: (id: string) => void\n   selectItem: (id: string) => void\n   setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>\n   openIcon?: React.ReactNode\n   closeIcon?: React.ReactNode\n   direction: \"rtl\" | \"ltr\"\n}\n\nconst TreeContext = createContext<TreeContextProps | null>(null)\n\nfunction useTree() {\n   const context = useContext(TreeContext)\n   if (!context) {\n      throw new Error(\"useTree must be used within a TreeProvider\")\n   }\n   return context\n}\n\ninterface TreeViewComponentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\ntype Direction = \"rtl\" | \"ltr\" | undefined\n\ntype TreeViewProps = {\n   initialSelectedId?: string\n   indicator?: boolean\n   elements?: TreeViewElement[]\n   initialExpandedItems?: string[]\n   openIcon?: React.ReactNode\n   closeIcon?: React.ReactNode\n} & TreeViewComponentProps\n\nconst Tree = forwardRef<HTMLDivElement, TreeViewProps>(\n   (\n      {\n         className,\n         elements,\n         initialSelectedId,\n         initialExpandedItems,\n         children,\n         indicator = true,\n         openIcon,\n         closeIcon,\n         dir,\n         ...props\n      },\n      ref,\n   ) => {\n      const [selectedId, setSelectedId] = useState<string | undefined>(\n         initialSelectedId,\n      )\n      const [expandedItems, setExpandedItems] = useState<string[] | undefined>(\n         initialExpandedItems,\n      )\n\n      const selectItem = useCallback((id: string) => {\n         setSelectedId(id)\n      }, [])\n\n      const handleExpand = useCallback((id: string) => {\n         setExpandedItems((prev) => {\n            if (prev?.includes(id)) {\n               return prev.filter((item) => item !== id)\n            }\n            return [...(prev ?? []), id]\n         })\n      }, [])\n\n      const expandSpecificTargetedElements = useCallback(\n         (elements?: TreeViewElement[], selectId?: string) => {\n            if (!elements || !selectId) return\n            const findParent = (\n               currentElement: TreeViewElement,\n               currentPath: string[] = [],\n            ) => {\n               const isSelectable = currentElement.isSelectable ?? true\n               const newPath = [...currentPath, currentElement.id]\n               if (currentElement.id === selectId) {\n                  if (isSelectable) {\n                     setExpandedItems((prev) => [...(prev ?? []), ...newPath])\n                  } else {\n                     if (newPath.includes(currentElement.id)) {\n                        newPath.pop()\n                        setExpandedItems((prev) => [\n                           ...(prev ?? []),\n                           ...newPath,\n                        ])\n                     }\n                  }\n                  return\n               }\n               if (\n                  isSelectable &&\n                  currentElement.children &&\n                  currentElement.children.length > 0\n               ) {\n                  currentElement.children.forEach((child) => {\n                     findParent(child, newPath)\n                  })\n               }\n            }\n            elements.forEach((element) => {\n               findParent(element)\n            })\n         },\n         [],\n      )\n\n      useEffect(() => {\n         if (initialSelectedId) {\n            expandSpecificTargetedElements(elements, initialSelectedId)\n         }\n      }, [initialSelectedId, elements])\n\n      const direction = dir === \"rtl\" ? \"rtl\" : \"ltr\"\n\n      return (\n         <TreeContext.Provider\n            value={{\n               selectedId,\n               expandedItems,\n               handleExpand,\n               selectItem,\n               setExpandedItems,\n               indicator,\n               openIcon,\n               closeIcon,\n               direction,\n            }}\n         >\n            <div className={ny(\"size-full\", className)}>\n               <ScrollArea\n                  ref={ref}\n                  className=\"relative h-full px-2\"\n                  dir={dir as Direction}\n               >\n                  <AccordionPrimitive.Root\n                     {...props}\n                     type=\"multiple\"\n                     defaultValue={expandedItems}\n                     value={expandedItems}\n                     className=\"flex flex-col gap-1\"\n                     onValueChange={(value) =>\n                        setExpandedItems((prev) => [...(prev ?? []), value[0]])\n                     }\n                     dir={dir as Direction}\n                  >\n                     {children}\n                  </AccordionPrimitive.Root>\n               </ScrollArea>\n            </div>\n         </TreeContext.Provider>\n      )\n   },\n)\n\nTree.displayName = \"Tree\"\n\nconst TreeIndicator = forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { direction } = useTree()\n\n   return (\n      <div\n         dir={direction}\n         ref={ref}\n         className={ny(\n            \"bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\n\nTreeIndicator.displayName = \"TreeIndicator\"\n\ninterface FolderComponentProps\n   extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {}\n\ntype FolderProps = {\n   expandedItems?: string[]\n   element: string\n   isSelectable?: boolean\n   isSelect?: boolean\n} & FolderComponentProps\n\nconst Folder = forwardRef<\n   HTMLDivElement,\n   FolderProps & React.HTMLAttributes<HTMLDivElement>\n>(\n   (\n      {\n         className,\n         element,\n         value,\n         isSelectable = true,\n         isSelect,\n         children,\n         ...props\n      },\n      _ref,\n   ) => {\n      const {\n         direction,\n         handleExpand,\n         expandedItems,\n         indicator,\n         setExpandedItems,\n         openIcon,\n         closeIcon,\n      } = useTree()\n\n      return (\n         <AccordionPrimitive.Item\n            {...props}\n            value={value}\n            className=\"relative h-full overflow-hidden \"\n         >\n            <AccordionPrimitive.Trigger\n               className={ny(\n                  `flex items-center gap-1 rounded-md text-sm`,\n                  className,\n                  {\n                     \"bg-muted rounded-md\": isSelect && isSelectable,\n                     \"cursor-pointer\": isSelectable,\n                     \"cursor-not-allowed opacity-50\": !isSelectable,\n                  },\n               )}\n               disabled={!isSelectable}\n               onClick={() => handleExpand(value)}\n            >\n               {expandedItems?.includes(value)\n                  ? (openIcon ?? <FolderOpenIcon className=\"size-4\" />)\n                  : (closeIcon ?? <FolderIcon className=\"size-4\" />)}\n               <span>{element}</span>\n            </AccordionPrimitive.Trigger>\n            <AccordionPrimitive.Content className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative h-full overflow-hidden text-sm\">\n               {element && indicator && <TreeIndicator aria-hidden=\"true\" />}\n               <AccordionPrimitive.Root\n                  dir={direction}\n                  type=\"multiple\"\n                  className=\"ml-5 flex flex-col gap-1 py-1 rtl:mr-5 \"\n                  defaultValue={expandedItems}\n                  value={expandedItems}\n                  onValueChange={(value) => {\n                     setExpandedItems?.((prev) => [...(prev ?? []), value[0]])\n                  }}\n               >\n                  {children}\n               </AccordionPrimitive.Root>\n            </AccordionPrimitive.Content>\n         </AccordionPrimitive.Item>\n      )\n   },\n)\n\nFolder.displayName = \"Folder\"\n\nconst File = forwardRef<\n   HTMLButtonElement,\n   {\n      value: string\n      handleSelect?: (id: string) => void\n      isSelectable?: boolean\n      isSelect?: boolean\n      fileIcon?: React.ReactNode\n   } & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(\n   (\n      {\n         value,\n         className,\n         handleSelect,\n         isSelectable = true,\n         isSelect,\n         fileIcon,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const { direction, selectedId, selectItem } = useTree()\n      const isSelected = isSelect ?? selectedId === value\n      return (\n         <AccordionPrimitive.Item value={value} className=\"relative\">\n            <AccordionPrimitive.Trigger\n               ref={ref}\n               {...props}\n               dir={direction}\n               disabled={!isSelectable}\n               aria-label=\"File\"\n               className={ny(\n                  \"flex cursor-pointer items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out  rtl:pl-1 rtl:pr-0\",\n                  {\n                     \"bg-muted\": isSelected && isSelectable,\n                  },\n                  isSelectable\n                     ? \"cursor-pointer\"\n                     : \"cursor-not-allowed opacity-50\",\n                  className,\n               )}\n               onClick={() => selectItem(value)}\n            >\n               {fileIcon ?? <FileIcon className=\"size-4\" />}\n               {children}\n            </AccordionPrimitive.Trigger>\n         </AccordionPrimitive.Item>\n      )\n   },\n)\n\nFile.displayName = \"File\"\n\nconst CollapseButton = forwardRef<\n   HTMLButtonElement,\n   {\n      elements: TreeViewElement[]\n      expandAll?: boolean\n   } & React.HTMLAttributes<HTMLButtonElement>\n>(({ className, elements, expandAll = false, children, ...props }, ref) => {\n   const { expandedItems, setExpandedItems } = useTree()\n\n   const expendAllTree = useCallback((elements: TreeViewElement[]) => {\n      const expandTree = (element: TreeViewElement) => {\n         const isSelectable = element.isSelectable ?? true\n         if (isSelectable && element.children && element.children.length > 0) {\n            setExpandedItems?.((prev) => [...(prev ?? []), element.id])\n            element.children.forEach(expandTree)\n         }\n      }\n\n      elements.forEach(expandTree)\n   }, [])\n\n   const closeAll = useCallback(() => {\n      setExpandedItems?.([])\n   }, [])\n\n   useEffect(() => {\n      // eslint-disable-next-line no-console\n      console.log(expandAll)\n      if (expandAll) {\n         expendAllTree(elements)\n      }\n   }, [expandAll])\n\n   return (\n      <Button\n         variant=\"ghost\"\n         className=\"absolute bottom-1 right-2 h-8 w-fit p-1\"\n         onClick={\n            expandedItems && expandedItems.length > 0\n               ? closeAll\n               : () => expendAllTree(elements)\n         }\n         ref={ref}\n         {...props}\n      >\n         {children}\n         <span className=\"sr-only\">Toggle</span>\n      </Button>\n   )\n})\n\nCollapseButton.displayName = \"CollapseButton\"\n\nexport { CollapseButton, File, Folder, Tree, type TreeViewElement }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/flickering-grid-demo.json b/apps/web/public/r/styles/miami/flickering-grid-demo.json
index 984ab4bb..85d5c558 100644
--- a/apps/web/public/r/styles/miami/flickering-grid-demo.json
+++ b/apps/web/public/r/styles/miami/flickering-grid-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "flickering-grid-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/flickering-grid-demo.tsx",
-      "content": "import FlickeringGrid from '~/registry/miami/ui/flickering-grid'\n\nexport default function FlickeringGridDemo() {\n   return (\n      <div className=\"bg-background relative h-[500px] w-full overflow-hidden rounded-lg border\">\n         <FlickeringGrid\n            className=\"absolute inset-0 z-0 size-full\"\n            squareSize={4}\n            gridGap={6}\n            color=\"#6B7280\"\n            maxOpacity={0.5}\n            flickerChance={0.1}\n            height={800}\n            width={800}\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/flickering-grid-demo.tsx",
+      "content": "import { FlickeringGrid } from \"~/registry/miami/ui/flickering-grid\"\n\nexport default function FlickeringGridDemo() {\n   return (\n      <div className=\"relative h-[500px] w-full overflow-hidden rounded-lg border bg-background\">\n         <FlickeringGrid\n            className=\"absolute inset-0 z-0 size-full\"\n            squareSize={4}\n            gridGap={6}\n            color=\"#6B7280\"\n            maxOpacity={0.5}\n            flickerChance={0.1}\n            height={800}\n            width={800}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/flickering-grid-rounded-demo.json b/apps/web/public/r/styles/miami/flickering-grid-rounded-demo.json
index 22f11c7b..aa2a6d9f 100644
--- a/apps/web/public/r/styles/miami/flickering-grid-rounded-demo.json
+++ b/apps/web/public/r/styles/miami/flickering-grid-rounded-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "flickering-grid-rounded-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/flickering-grid-rounded-demo.tsx",
-      "content": "import FlickeringGrid from '~/registry/miami/ui/flickering-grid'\n\nexport default function FlickeringGridRoundedDemo() {\n   return (\n      <div className=\"bg-background relative size-[600px] w-full overflow-hidden rounded-lg border\">\n         <FlickeringGrid\n            className=\"absolute inset-0 z-0 [mask:radial-gradient(circle_at_center,#fff_300px,transparent_0)]\"\n            squareSize={4}\n            gridGap={6}\n            color=\"#60A5FA\"\n            maxOpacity={0.5}\n            flickerChance={0.1}\n            height={800}\n            width={800}\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/flickering-grid-rounded-demo.tsx",
+      "content": "import { FlickeringGrid } from \"~/registry/miami/ui/flickering-grid\"\n\nexport default function FlickeringGridRoundedDemo() {\n   return (\n      <div className=\"relative size-[600px] w-full overflow-hidden rounded-lg border bg-background\">\n         <FlickeringGrid\n            className=\"relative inset-0 z-0 [mask-image:radial-gradient(450px_circle_at_center,white,transparent)]\"\n            squareSize={4}\n            gridGap={6}\n            color=\"#60A5FA\"\n            maxOpacity={0.5}\n            flickerChance={0.1}\n            height={800}\n            width={800}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/flickering-grid.json b/apps/web/public/r/styles/miami/flickering-grid.json
index 1475e6df..f6a8bfec 100644
--- a/apps/web/public/r/styles/miami/flickering-grid.json
+++ b/apps/web/public/r/styles/miami/flickering-grid.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "flickering-grid",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/flickering-grid.tsx",
-      "content": "'use client'\n\nimport React, {\n   useCallback,\n   useEffect,\n   useMemo,\n   useRef,\n   useState,\n} from 'react'\n\ninterface FlickeringGridProps {\n   squareSize?: number\n   gridGap?: number\n   flickerChance?: number\n   color?: string\n   width?: number\n   height?: number\n   className?: string\n   maxOpacity?: number\n}\n\nconst FlickeringGrid: React.FC<FlickeringGridProps> = ({\n   squareSize = 4,\n   gridGap = 6,\n   flickerChance = 0.3,\n   color = 'rgb(0, 0, 0)',\n   width,\n   height,\n   className,\n   maxOpacity = 0.3,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const [isInView, setIsInView] = useState(false)\n\n   const memoizedColor = useMemo(() => {\n      const toRGBA = (color: string) => {\n         if (typeof window === 'undefined') {\n            return `rgba(0, 0, 0,`\n         }\n         const canvas = document.createElement('canvas')\n         canvas.width = canvas.height = 1\n         const ctx = canvas.getContext('2d')\n         if (!ctx)\n            return 'rgba(255, 0, 0,'\n         ctx.fillStyle = color\n         ctx.fillRect(0, 0, 1, 1)\n         const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data\n         return `rgba(${r}, ${g}, ${b},`\n      }\n      return toRGBA(color)\n   }, [color])\n\n   const setupCanvas = useCallback(\n      (canvas: HTMLCanvasElement) => {\n         const canvasWidth = width || canvas.clientWidth\n         const canvasHeight = height || canvas.clientHeight\n         const dpr = window.devicePixelRatio || 1\n         canvas.width = canvasWidth * dpr\n         canvas.height = canvasHeight * dpr\n         canvas.style.width = `${canvasWidth}px`\n         canvas.style.height = `${canvasHeight}px`\n         const cols = Math.floor(canvasWidth / (squareSize + gridGap))\n         const rows = Math.floor(canvasHeight / (squareSize + gridGap))\n\n         const squares = new Float32Array(cols * rows)\n         for (let i = 0; i < squares.length; i++) {\n            squares[i] = Math.random() * maxOpacity\n         }\n\n         return {\n            width: canvasWidth,\n            height: canvasHeight,\n            cols,\n            rows,\n            squares,\n            dpr,\n         }\n      },\n      [squareSize, gridGap, width, height, maxOpacity],\n   )\n\n   const updateSquares = useCallback(\n      (squares: Float32Array, deltaTime: number) => {\n         for (let i = 0; i < squares.length; i++) {\n            if (Math.random() < flickerChance * deltaTime) {\n               squares[i] = Math.random() * maxOpacity\n            }\n         }\n      },\n      [flickerChance, maxOpacity],\n   )\n\n   const drawGrid = useCallback(\n      (\n         ctx: CanvasRenderingContext2D,\n         width: number,\n         height: number,\n         cols: number,\n         rows: number,\n         squares: Float32Array,\n         dpr: number,\n      ) => {\n         ctx.clearRect(0, 0, width, height)\n         ctx.fillStyle = 'transparent'\n         ctx.fillRect(0, 0, width, height)\n\n         for (let i = 0; i < cols; i++) {\n            for (let j = 0; j < rows; j++) {\n               const opacity = squares[i * rows + j]\n               ctx.fillStyle = `${memoizedColor}${opacity})`\n               ctx.fillRect(\n                  i * (squareSize + gridGap) * dpr,\n                  j * (squareSize + gridGap) * dpr,\n                  squareSize * dpr,\n                  squareSize * dpr,\n               )\n            }\n         }\n      },\n      [memoizedColor, squareSize, gridGap],\n   )\n\n   useEffect(() => {\n      const canvas = canvasRef.current\n      if (!canvas)\n         return\n\n      const ctx = canvas.getContext('2d')\n      if (!ctx)\n         return\n\n      let animationFrameId: number\n      let { width, height, cols, rows, squares, dpr } = setupCanvas(canvas)\n\n      let lastTime = 0\n      const animate = (time: number) => {\n         if (!isInView)\n            return\n\n         const deltaTime = (time - lastTime) / 1000\n         lastTime = time\n\n         updateSquares(squares, deltaTime)\n         drawGrid(ctx, width * dpr, height * dpr, cols, rows, squares, dpr)\n         animationFrameId = requestAnimationFrame(animate)\n      }\n\n      const handleResize = () => {\n         ({ width, height, cols, rows, squares, dpr } = setupCanvas(canvas))\n      }\n\n      const observer = new IntersectionObserver(\n         ([entry]) => {\n            setIsInView(entry.isIntersecting)\n         },\n         { threshold: 0 },\n      )\n\n      observer.observe(canvas)\n\n      window.addEventListener('resize', handleResize)\n\n      if (isInView) {\n         animationFrameId = requestAnimationFrame(animate)\n      }\n\n      return () => {\n         window.removeEventListener('resize', handleResize)\n         cancelAnimationFrame(animationFrameId)\n         observer.disconnect()\n      }\n   }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])\n\n   return (\n      <canvas\n         ref={canvasRef}\n         className={`pointer-events-none size-full ${className}`}\n         style={{\n            width: width || '100%',\n            height: height || '100%',\n         }}\n         width={width}\n         height={height}\n      />\n   )\n}\n\nexport default FlickeringGrid\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { ny } from \"~/registry/miami/lib/utils\"\n\ninterface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {\n   squareSize?: number\n   gridGap?: number\n   flickerChance?: number\n   color?: string\n   width?: number\n   height?: number\n   className?: string\n   maxOpacity?: number\n}\n\nexport const FlickeringGrid: React.FC<FlickeringGridProps> = ({\n   squareSize = 4,\n   gridGap = 6,\n   flickerChance = 0.3,\n   color = \"rgb(0, 0, 0)\",\n   width,\n   height,\n   className,\n   maxOpacity = 0.3,\n   ...props\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const containerRef = useRef<HTMLDivElement>(null)\n   const [isInView, setIsInView] = useState(false)\n   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 })\n\n   const memoizedColor = useMemo(() => {\n      const toRGBA = (color: string) => {\n         if (typeof window === \"undefined\") {\n            return `rgba(0, 0, 0,`\n         }\n         const canvas = document.createElement(\"canvas\")\n         canvas.width = canvas.height = 1\n         const ctx = canvas.getContext(\"2d\")\n         if (!ctx) return \"rgba(255, 0, 0,\"\n         ctx.fillStyle = color\n         ctx.fillRect(0, 0, 1, 1)\n         const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)\n         return `rgba(${r}, ${g}, ${b},`\n      }\n      return toRGBA(color)\n   }, [color])\n\n   const setupCanvas = useCallback(\n      (canvas: HTMLCanvasElement, width: number, height: number) => {\n         const dpr = window.devicePixelRatio || 1\n         canvas.width = width * dpr\n         canvas.height = height * dpr\n         canvas.style.width = `${width}px`\n         canvas.style.height = `${height}px`\n         const cols = Math.floor(width / (squareSize + gridGap))\n         const rows = Math.floor(height / (squareSize + gridGap))\n\n         const squares = new Float32Array(cols * rows)\n         for (let i = 0; i < squares.length; i++) {\n            squares[i] = Math.random() * maxOpacity\n         }\n\n         return { cols, rows, squares, dpr }\n      },\n      [squareSize, gridGap, maxOpacity],\n   )\n\n   const updateSquares = useCallback(\n      (squares: Float32Array, deltaTime: number) => {\n         for (let i = 0; i < squares.length; i++) {\n            if (Math.random() < flickerChance * deltaTime) {\n               squares[i] = Math.random() * maxOpacity\n            }\n         }\n      },\n      [flickerChance, maxOpacity],\n   )\n\n   const drawGrid = useCallback(\n      (\n         ctx: CanvasRenderingContext2D,\n         width: number,\n         height: number,\n         cols: number,\n         rows: number,\n         squares: Float32Array,\n         dpr: number,\n      ) => {\n         ctx.clearRect(0, 0, width, height)\n         ctx.fillStyle = \"transparent\"\n         ctx.fillRect(0, 0, width, height)\n\n         for (let i = 0; i < cols; i++) {\n            for (let j = 0; j < rows; j++) {\n               const opacity = squares[i * rows + j]\n               ctx.fillStyle = `${memoizedColor}${opacity})`\n               ctx.fillRect(\n                  i * (squareSize + gridGap) * dpr,\n                  j * (squareSize + gridGap) * dpr,\n                  squareSize * dpr,\n                  squareSize * dpr,\n               )\n            }\n         }\n      },\n      [memoizedColor, squareSize, gridGap],\n   )\n\n   useEffect(() => {\n      const canvas = canvasRef.current\n      const container = containerRef.current\n      if (!canvas || !container) return\n\n      const ctx = canvas.getContext(\"2d\")\n      if (!ctx) return\n\n      let animationFrameId: number\n      let gridParams: ReturnType<typeof setupCanvas>\n\n      const updateCanvasSize = () => {\n         const newWidth = width || container.clientWidth\n         const newHeight = height || container.clientHeight\n         setCanvasSize({ width: newWidth, height: newHeight })\n         gridParams = setupCanvas(canvas, newWidth, newHeight)\n      }\n\n      updateCanvasSize()\n\n      let lastTime = 0\n      const animate = (time: number) => {\n         if (!isInView) return\n\n         const deltaTime = (time - lastTime) / 1000\n         lastTime = time\n\n         updateSquares(gridParams.squares, deltaTime)\n         drawGrid(\n            ctx,\n            canvas.width,\n            canvas.height,\n            gridParams.cols,\n            gridParams.rows,\n            gridParams.squares,\n            gridParams.dpr,\n         )\n         animationFrameId = requestAnimationFrame(animate)\n      }\n\n      const resizeObserver = new ResizeObserver(() => {\n         updateCanvasSize()\n      })\n\n      resizeObserver.observe(container)\n\n      const intersectionObserver = new IntersectionObserver(\n         ([entry]) => {\n            setIsInView(entry.isIntersecting)\n         },\n         { threshold: 0 },\n      )\n\n      intersectionObserver.observe(canvas)\n\n      if (isInView) {\n         animationFrameId = requestAnimationFrame(animate)\n      }\n\n      return () => {\n         cancelAnimationFrame(animationFrameId)\n         resizeObserver.disconnect()\n         intersectionObserver.disconnect()\n      }\n   }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])\n\n   return (\n      <div\n         ref={containerRef}\n         className={ny(`h-full w-full ${className}`)}\n         {...props}\n      >\n         <canvas\n            ref={canvasRef}\n            className=\"pointer-events-none\"\n            style={{\n               width: canvasSize.width,\n               height: canvasSize.height,\n            }}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/flip-text-demo.json b/apps/web/public/r/styles/miami/flip-text-demo.json
index a57ca84c..423222e6 100644
--- a/apps/web/public/r/styles/miami/flip-text-demo.json
+++ b/apps/web/public/r/styles/miami/flip-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "flip-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/flip-text-demo.tsx",
-      "content": "import FlipText from '~/registry/miami/ui/flip-text'\n\nexport default async function FlipTextDemo() {\n   return (\n      <FlipText\n         className=\"text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         word=\"Flip Text\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/flip-text-demo.tsx",
+      "content": "import FlipText from \"~/registry/miami/ui/flip-text\"\n\nexport default async function FlipTextDemo() {\n   return (\n      <FlipText\n         className=\"text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         word=\"Flip Text\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/flip-text.json b/apps/web/public/r/styles/miami/flip-text.json
index 5ace0bea..7e58f1a6 100644
--- a/apps/web/public/r/styles/miami/flip-text.json
+++ b/apps/web/public/r/styles/miami/flip-text.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "flip-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/flip-text.tsx",
-      "content": "'use client'\n\nimport type { Variants } from 'framer-motion'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface SlightFlipProps {\n   word: string\n   duration?: number\n   delayMultiple?: number\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function SlightFlip({\n   word,\n   duration = 0.5,\n   delayMultiple = 0.08,\n   framerProps = {\n      hidden: { rotateX: -90, opacity: 0 },\n      visible: { rotateX: 0, opacity: 1 },\n   },\n   className,\n}: SlightFlipProps) {\n   return (\n      <div className=\"flex justify-center space-x-2\">\n         <AnimatePresence mode=\"wait\">\n            {word.split('').map((char, i) => (\n               <motion.span\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={framerProps}\n                  transition={{ duration, delay: i * delayMultiple }}\n                  className={ny('origin-center drop-shadow-sm', className)}\n               >\n                  {char}\n               </motion.span>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface SlightFlipProps {\n   word: string\n   duration?: number\n   delayMultiple?: number\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function SlightFlip({\n   word,\n   duration = 0.5,\n   delayMultiple = 0.08,\n   framerProps = {\n      hidden: { rotateX: -90, opacity: 0 },\n      visible: { rotateX: 0, opacity: 1 },\n   },\n   className,\n}: SlightFlipProps) {\n   return (\n      <div className=\"flex justify-center space-x-2\">\n         <AnimatePresence mode=\"wait\">\n            {word.split(\"\").map((char, i) => (\n               <motion.span\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={framerProps}\n                  transition={{ duration, delay: i * delayMultiple }}\n                  className={ny(\"origin-center drop-shadow-sm\", className)}\n               >\n                  {char}\n               </motion.span>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/form.json b/apps/web/public/r/styles/miami/form.json
index e7faef3e..85944931 100644
--- a/apps/web/public/r/styles/miami/form.json
+++ b/apps/web/public/r/styles/miami/form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "form",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-label",
     "@radix-ui/react-slot",
@@ -15,8 +17,8 @@
   "files": [
     {
       "path": "ui/form.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport type * as LabelPrimitive from '@radix-ui/react-label'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form'\nimport { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form'\n\nimport { ny } from '~/lib/utils'\nimport { Label } from '~/registry/miami/ui/label'\n\nconst Form = FormProvider\n\ninterface FormFieldContextValue<\n   TFieldValues extends FieldValues = FieldValues,\n   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n   name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n   {} as FormFieldContextValue,\n)\n\nfunction FormField<\n   TFieldValues extends FieldValues = FieldValues,\n   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: ControllerProps<TFieldValues, TName>) {\n   return (\n      <FormFieldContext.Provider value={{ name: props.name }}>\n         <Controller {...props} />\n      </FormFieldContext.Provider>\n   )\n}\n\nfunction useFormField() {\n   const fieldContext = React.useContext(FormFieldContext)\n   const itemContext = React.useContext(FormItemContext)\n   const { getFieldState, formState } = useFormContext()\n\n   const fieldState = getFieldState(fieldContext.name, formState)\n\n   if (!fieldContext)\n      throw new Error('useFormField should be used within <FormField>')\n\n   const { id } = itemContext\n\n   return {\n      id,\n      name: fieldContext.name,\n      formItemId: `${id}-form-item`,\n      formDescriptionId: `${id}-form-item-description`,\n      formMessageId: `${id}-form-item-message`,\n      ...fieldState,\n   }\n}\n\ninterface FormItemContextValue {\n   id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n   {} as FormItemContextValue,\n)\n\nconst FormItem = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const id = React.useId()\n\n   return (\n      <FormItemContext.Provider value={{ id }}>\n         <div ref={ref} className={ny('space-y-2', className)} {...props} />\n      </FormItemContext.Provider>\n   )\n})\nFormItem.displayName = 'FormItem'\n\nconst FormLabel = React.forwardRef<\n   React.ElementRef<typeof LabelPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n   const { error, formItemId } = useFormField()\n\n   return (\n      <Label\n         ref={ref}\n         className={ny(error && 'text-destructive', className)}\n         htmlFor={formItemId}\n         {...props}\n      />\n   )\n})\nFormLabel.displayName = 'FormLabel'\n\nconst FormControl = React.forwardRef<\n   React.ElementRef<typeof Slot>,\n   React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n   const { error, formItemId, formDescriptionId, formMessageId }\n    = useFormField()\n\n   return (\n      <Slot\n         ref={ref}\n         id={formItemId}\n         aria-describedby={\n            !error\n               ? `${formDescriptionId}`\n               : `${formDescriptionId} ${formMessageId}`\n         }\n         aria-invalid={!!error}\n         {...props}\n      />\n   )\n})\nFormControl.displayName = 'FormControl'\n\nconst FormDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n   const { formDescriptionId } = useFormField()\n\n   return (\n      <p\n         ref={ref}\n         id={formDescriptionId}\n         className={ny('text-muted-foreground text-[0.8rem]', className)}\n         {...props}\n      />\n   )\n})\nFormDescription.displayName = 'FormDescription'\n\nconst FormMessage = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n   const { error, formMessageId } = useFormField()\n   const body = error ? String(error?.message) : children\n\n   if (!body)\n      return null\n\n   return (\n      <p\n         ref={ref}\n         id={formMessageId}\n         className={ny('text-destructive text-[0.8rem] font-medium', className)}\n         {...props}\n      >\n         {body}\n      </p>\n   )\n})\nFormMessage.displayName = 'FormMessage'\n\nconst FormGlobalError = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n   const { errors } = useFormState()\n   const rootError = errors.root\n   if (!rootError)\n      return null\n\n   return (\n      <p\n         ref={ref}\n         className={ny('text-destructive text-sm font-medium', className)}\n         {...props}\n      >\n         {rootError.message}\n      </p>\n   )\n})\nFormGlobalError.displayName = 'FormGlobalError'\n\nexport {\n   useFormField,\n   Form,\n   FormItem,\n   FormLabel,\n   FormControl,\n   FormDescription,\n   FormMessage,\n   FormGlobalError,\n   FormField,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport * as React from \"react\"\nimport type { ControllerProps, FieldPath, FieldValues } from \"react-hook-form\"\nimport {\n   Controller,\n   FormProvider,\n   useFormContext,\n   useFormState,\n} from \"react-hook-form\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nconst Form = FormProvider\n\ninterface FormFieldContextValue<\n   TFieldValues extends FieldValues = FieldValues,\n   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n   name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n   {} as FormFieldContextValue,\n)\n\nfunction FormField<\n   TFieldValues extends FieldValues = FieldValues,\n   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: ControllerProps<TFieldValues, TName>) {\n   return (\n      <FormFieldContext.Provider value={{ name: props.name }}>\n         <Controller {...props} />\n      </FormFieldContext.Provider>\n   )\n}\n\nfunction useFormField() {\n   const fieldContext = React.useContext(FormFieldContext)\n   const itemContext = React.useContext(FormItemContext)\n   const { getFieldState, formState } = useFormContext()\n\n   const fieldState = getFieldState(fieldContext.name, formState)\n\n   if (!fieldContext)\n      throw new Error(\"useFormField should be used within <FormField>\")\n\n   const { id } = itemContext\n\n   return {\n      id,\n      name: fieldContext.name,\n      formItemId: `${id}-form-item`,\n      formDescriptionId: `${id}-form-item-description`,\n      formMessageId: `${id}-form-item-message`,\n      ...fieldState,\n   }\n}\n\ninterface FormItemContextValue {\n   id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n   {} as FormItemContextValue,\n)\n\nconst FormItem = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const id = React.useId()\n\n   return (\n      <FormItemContext.Provider value={{ id }}>\n         <div ref={ref} className={ny(\"space-y-2\", className)} {...props} />\n      </FormItemContext.Provider>\n   )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n   React.ElementRef<typeof LabelPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n   const { error, formItemId } = useFormField()\n\n   return (\n      <Label\n         ref={ref}\n         className={ny(error && \"text-destructive\", className)}\n         htmlFor={formItemId}\n         {...props}\n      />\n   )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n   React.ElementRef<typeof Slot>,\n   React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n   const { error, formItemId, formDescriptionId, formMessageId } =\n      useFormField()\n\n   return (\n      <Slot\n         ref={ref}\n         id={formItemId}\n         aria-describedby={\n            !error\n               ? `${formDescriptionId}`\n               : `${formDescriptionId} ${formMessageId}`\n         }\n         aria-invalid={!!error}\n         {...props}\n      />\n   )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n   const { formDescriptionId } = useFormField()\n\n   return (\n      <p\n         ref={ref}\n         id={formDescriptionId}\n         className={ny(\"text-muted-foreground text-[0.8rem]\", className)}\n         {...props}\n      />\n   )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n   const { error, formMessageId } = useFormField()\n   const body = error ? String(error?.message) : children\n\n   if (!body) return null\n\n   return (\n      <p\n         ref={ref}\n         id={formMessageId}\n         className={ny(\"text-destructive text-[0.8rem] font-medium\", className)}\n         {...props}\n      >\n         {body}\n      </p>\n   )\n})\nFormMessage.displayName = \"FormMessage\"\n\nconst FormGlobalError = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n   const { errors } = useFormState()\n   const rootError = errors.root\n   if (!rootError) return null\n\n   return (\n      <p\n         ref={ref}\n         className={ny(\"text-destructive text-sm font-medium\", className)}\n         {...props}\n      >\n         {rootError.message}\n      </p>\n   )\n})\nFormGlobalError.displayName = \"FormGlobalError\"\n\nexport {\n   useFormField,\n   Form,\n   FormItem,\n   FormLabel,\n   FormControl,\n   FormDescription,\n   FormMessage,\n   FormGlobalError,\n   FormField,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/gauge-circle-demo.json b/apps/web/public/r/styles/miami/gauge-circle-demo.json
index 598f92b4..cd89a594 100644
--- a/apps/web/public/r/styles/miami/gauge-circle-demo.json
+++ b/apps/web/public/r/styles/miami/gauge-circle-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "gauge-circle-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/gauge-circle-demo.tsx",
-      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport GaugeCircle from '~/registry/miami/ui/gauge-circle'\n\nexport default function GaugeCircleDemo() {\n   const [value, setValue] = useState(0)\n\n   useEffect(() => {\n      const handleIncrement = (prev: number) => {\n         if (prev === 100)\n            return 0\n\n         return prev + 10\n      }\n      setValue(handleIncrement)\n      const interval = setInterval(() => setValue(handleIncrement), 2000)\n      return () => clearInterval(interval)\n   }, [])\n\n   return (\n      <GaugeCircle\n         max={100}\n         min={0}\n         value={value}\n         gaugePrimaryColor=\"rgb(79 70 229)\"\n         gaugeSecondaryColor=\"rgba(0, 0, 0, 0.1)\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/gauge-circle-demo.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport GaugeCircle from \"~/registry/miami/ui/gauge-circle\"\n\nexport default function GaugeCircleDemo() {\n   const [value, setValue] = useState(0)\n\n   useEffect(() => {\n      const handleIncrement = (prev: number) => {\n         if (prev === 100) return 0\n\n         return prev + 10\n      }\n      setValue(handleIncrement)\n      const interval = setInterval(() => setValue(handleIncrement), 2000)\n      return () => clearInterval(interval)\n   }, [])\n\n   return (\n      <GaugeCircle\n         max={100}\n         min={0}\n         value={value}\n         gaugePrimaryColor=\"rgb(79 70 229)\"\n         gaugeSecondaryColor=\"rgba(0, 0, 0, 0.1)\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/gauge-circle.json b/apps/web/public/r/styles/miami/gauge-circle.json
index 321e5be0..7ed9fab3 100644
--- a/apps/web/public/r/styles/miami/gauge-circle.json
+++ b/apps/web/public/r/styles/miami/gauge-circle.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "gauge-circle",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/gauge-circle.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\ninterface Props {\n   max: number\n   value: number\n   min: number\n   gaugePrimaryColor: string\n   gaugeSecondaryColor: string\n   className?: string\n}\n\nexport default function GaugeCircle({\n   max = 100,\n   min = 0,\n   value = 0,\n   gaugePrimaryColor,\n   gaugeSecondaryColor,\n   className,\n}: Props) {\n   const circumference = 2 * Math.PI * 45\n   const percentPx = circumference / 100\n   const currentPercent = ((value - min) / (max - min)) * 100\n\n   return (\n      <div\n         className={ny('relative size-40 text-2xl font-semibold', className)}\n         style={\n            {\n               '--circle-size': '100px',\n               '--circumference': `${circumference}px`,\n               '--percent-to-px': `${percentPx}px`,\n               '--gap-percent': '5',\n               '--offset-factor': '0',\n               '--transition-length': '1s',\n               '--transition-step': '200ms',\n               '--delay': '0s',\n               '--percent-to-deg': '3.6deg',\n               'transform': 'translateZ(0)',\n            } as React.CSSProperties\n         }\n      >\n         <svg\n            fill=\"none\"\n            className=\"size-full\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 100 100\"\n         >\n            {currentPercent <= 90 && currentPercent >= 0 && (\n               <circle\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"45\"\n                  strokeWidth=\"10\"\n                  strokeDashoffset=\"0\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\"opacity-100\"\n                  style={{\n                     stroke: gaugeSecondaryColor,\n                     strokeDasharray: `${(90 - currentPercent) * percentPx}px ${circumference}px`,\n                     transform: `rotate(calc(1turn - 90deg - (5 * 3.6deg * (1 - 0)))) scaleY(-1)`,\n                     transition: 'all 1s ease 0s',\n                     transformOrigin: '50px 50px',\n                  }}\n               />\n            )}\n            <circle\n               cx=\"50\"\n               cy=\"50\"\n               r=\"45\"\n               strokeWidth=\"10\"\n               strokeDashoffset=\"0\"\n               strokeLinecap=\"round\"\n               strokeLinejoin=\"round\"\n               className=\"opacity-100\"\n               style={{\n                  stroke: gaugePrimaryColor,\n                  strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,\n                  transition: '1s ease 0s, stroke 1s ease 0s',\n                  transitionProperty: 'stroke-dasharray,transform',\n                  transform: 'rotate(calc(-90deg + 5 * 0 * 3.6deg))',\n                  transformOrigin: '50px 50px',\n               }}\n            />\n         </svg>\n         <span\n            className=\"animate-in fade-in absolute inset-0 m-auto size-fit\"\n            style={{\n               animationDelay: '0s',\n               transitionDuration: '1s',\n            }}\n         >\n            {Math.round(currentPercent)}\n         </span>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/lib/utils\"\n\ninterface Props {\n   max: number\n   value: number\n   min: number\n   gaugePrimaryColor: string\n   gaugeSecondaryColor: string\n   className?: string\n}\n\nexport default function GaugeCircle({\n   max = 100,\n   min = 0,\n   value = 0,\n   gaugePrimaryColor,\n   gaugeSecondaryColor,\n   className,\n}: Props) {\n   const circumference = 2 * Math.PI * 45\n   const percentPx = circumference / 100\n   const currentPercent = ((value - min) / (max - min)) * 100\n\n   return (\n      <div\n         className={ny(\"relative size-40 text-2xl font-semibold\", className)}\n         style={\n            {\n               \"--circle-size\": \"100px\",\n               \"--circumference\": `${circumference}px`,\n               \"--percent-to-px\": `${percentPx}px`,\n               \"--gap-percent\": \"5\",\n               \"--offset-factor\": \"0\",\n               \"--transition-length\": \"1s\",\n               \"--transition-step\": \"200ms\",\n               \"--delay\": \"0s\",\n               \"--percent-to-deg\": \"3.6deg\",\n               transform: \"translateZ(0)\",\n            } as React.CSSProperties\n         }\n      >\n         <svg\n            fill=\"none\"\n            className=\"size-full\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 100 100\"\n         >\n            {currentPercent <= 90 && currentPercent >= 0 && (\n               <circle\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"45\"\n                  strokeWidth=\"10\"\n                  strokeDashoffset=\"0\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\"opacity-100\"\n                  style={{\n                     stroke: gaugeSecondaryColor,\n                     strokeDasharray: `${(90 - currentPercent) * percentPx}px ${circumference}px`,\n                     transform: `rotate(calc(1turn - 90deg - (5 * 3.6deg * (1 - 0)))) scaleY(-1)`,\n                     transition: \"all 1s ease 0s\",\n                     transformOrigin: \"50px 50px\",\n                  }}\n               />\n            )}\n            <circle\n               cx=\"50\"\n               cy=\"50\"\n               r=\"45\"\n               strokeWidth=\"10\"\n               strokeDashoffset=\"0\"\n               strokeLinecap=\"round\"\n               strokeLinejoin=\"round\"\n               className=\"opacity-100\"\n               style={{\n                  stroke: gaugePrimaryColor,\n                  strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,\n                  transition: \"1s ease 0s, stroke 1s ease 0s\",\n                  transitionProperty: \"stroke-dasharray,transform\",\n                  transform: \"rotate(calc(-90deg + 5 * 0 * 3.6deg))\",\n                  transformOrigin: \"50px 50px\",\n               }}\n            />\n         </svg>\n         <span\n            className=\"animate-in fade-in absolute inset-0 m-auto size-fit\"\n            style={{\n               animationDelay: \"0s\",\n               transitionDuration: \"1s\",\n            }}\n         >\n            {Math.round(currentPercent)}\n         </span>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/globe-demo.json b/apps/web/public/r/styles/miami/globe-demo.json
index 276acced..5ff6a453 100644
--- a/apps/web/public/r/styles/miami/globe-demo.json
+++ b/apps/web/public/r/styles/miami/globe-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "globe-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/globe-demo.tsx",
-      "content": "import Globe from '~/registry/miami/ui/globe'\n\nexport default function GlobeDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-40 pb-40 pt-8 md:pb-60 md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Globe\n         </span>\n         <Globe className=\"top-28\" />\n         <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/globe-demo.tsx",
+      "content": "import Globe from \"~/registry/miami/ui/globe\"\n\nexport default function GlobeDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-40 pb-40 pt-8 md:pb-60 md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Globe\n         </span>\n         <Globe className=\"top-28\" />\n         <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/globe-grid-demo.json b/apps/web/public/r/styles/miami/globe-grid-demo.json
index 22743257..ddef249f 100644
--- a/apps/web/public/r/styles/miami/globe-grid-demo.json
+++ b/apps/web/public/r/styles/miami/globe-grid-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "globe-grid-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/globe-grid-demo.tsx",
-      "content": "import { GlobeGrid } from '~/registry/miami/ui/globe-grid'\n\nexport function GlobeGridDemo() {\n   return (\n      <GlobeGrid />\n   )\n}\n\nexport default GlobeGridDemo\n",
-      "type": "registry:component",
+      "path": "examples/globe-grid-demo.tsx",
+      "content": "import { GlobeGrid } from \"~/registry/miami/ui/globe-grid\"\n\nexport function GlobeGridDemo() {\n   return <GlobeGrid />\n}\n\nexport default GlobeGridDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/globe-grid-full-demo.json b/apps/web/public/r/styles/miami/globe-grid-full-demo.json
index 14d312aa..fd2baa56 100644
--- a/apps/web/public/r/styles/miami/globe-grid-full-demo.json
+++ b/apps/web/public/r/styles/miami/globe-grid-full-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "globe-grid-full-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/globe-grid-full-demo.tsx",
-      "content": "import { GlobeGrid } from '~/registry/miami/ui/globe-grid'\n\nexport function GlobeGridDemo() {\n   return (\n      <GlobeGrid fullGlobe />\n   )\n}\n\nexport default GlobeGridDemo\n",
-      "type": "registry:component",
+      "path": "examples/globe-grid-full-demo.tsx",
+      "content": "import { GlobeGrid } from \"~/registry/miami/ui/globe-grid\"\n\nexport function GlobeGridDemo() {\n   return <GlobeGrid fullGlobe />\n}\n\nexport default GlobeGridDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/globe-grid.json b/apps/web/public/r/styles/miami/globe-grid.json
index 0601b27c..0b1cd3bd 100644
--- a/apps/web/public/r/styles/miami/globe-grid.json
+++ b/apps/web/public/r/styles/miami/globe-grid.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "globe-grid",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [],
   "files": [
     {
       "path": "ui/globe-grid.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface GlobeGridProps {\n   fullGlobe?: boolean\n   className?: string\n}\n\nexport function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {\n   return (\n      <div className={ny('relative flex min-h-[350px] w-full items-center justify-center overflow-hidden', className)}>\n         <section\n            className=\"relative w-full max-w-[600px]\"\n            style={{\n               '--sm-grid-columns': '6',\n               '--md-grid-columns': '6',\n               '--sm-grid-rows': fullGlobe ? '12' : '6',\n               '--md-grid-rows': fullGlobe ? '12' : '6',\n               '--grid-columns': 'var(--sm-grid-columns)',\n               '--grid-rows': 'var(--sm-grid-rows)',\n               'aspectRatio': fullGlobe ? '1/1' : '2/1',\n            } as React.CSSProperties}\n         >\n            <style jsx>\n               {`\n               @media (min-width: 768px) {\n                  section {\n                     --grid-columns: var(--md-grid-columns);\n                     --grid-rows: var(--md-grid-rows);\n                  }\n               }\n            `}\n            </style>\n            <div className=\"absolute left-0 top-0 z-[5] ml-[-0.5px] w-full md:left-1/2 md:top-1/2 md:h-[200%] md:-translate-x-1/2 md:-translate-y-1/2\">\n               <svg\n                  aria-hidden=\"true\"\n                  height=\"100%\"\n                  style={{\n                     transform: fullGlobe\n                        ? 'translateY(0px) scale(1.002)'\n                        : 'translateY(-12.5%) scale(1.002)',\n                  }}\n                  viewBox={fullGlobe ? '-1 -1 802 802' : '-1 -151 802 602'}\n                  width=\"100%\"\n                  className=\"[--guide-color:theme(colors.border/50%)]\"\n               >\n                  <defs>\n                     <clipPath id=\"half-globe-clip\">\n                        <rect x=\"-1\" y=\"-151\" width=\"802\" height=\"551\" />\n                     </clipPath>\n                  </defs>\n\n                  <g\n                     data-testid=\"globe-wireframe\"\n                     clipPath={fullGlobe ? 'none' : 'url(#half-globe-clip)'}\n                  >\n                     <circle cx=\"400\" cy=\"400\" fill=\"var(--ds-background-200)\" r=\"400\" />\n                     <path d=\"M 400 800 A -400 400 0 0 0 400 0\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M 400 800 A -266.667 400 0 0 0 400 0\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M 400 800 A -133.333 400 0 0 0 400 0\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M 400 800 A 0 400 0 0 0 400 0\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M 400 0 A 133.333 400 0 0 0 400 800\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M 400 0 A 266.667 400 0 0 0 400 800\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M 400 0 A 400 400 0 0 0 400 800\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n\n                     <path d=\"M178.892,66.667 h442.217\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M101.858,133.333 h596.285\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M53.59,200 h692.82\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M22.876,266.667 h754.247\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M5.595,333.333 h788.811\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     <path d=\"M0,400 h800\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                     {fullGlobe && (\n                        <>\n                           <path d=\"M5.595,466.667 h788.811\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                           <path d=\"M22.876,533.333 h754.247\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                           <path d=\"M53.59,600 h692.82\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                           <path d=\"M101.858,666.667 h596.285\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                           <path d=\"M178.892,733.333 h442.217\" fill=\"none\" stroke=\"url(#globe-gradient)\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n                        </>\n                     )}\n                  </g>\n\n                  {/* Original animated paths */}\n                  <g id=\"animated-paths\">\n                     {/* First animated path */}\n                     <g id=\"lllldll31\" opacity=\"1\" className=\"[--normal-color:var(--line-color-1)]\">\n                        <path\n                           d=\"M794.405,333.333 h-131.468M662.937,333.333 h-131.468M531.468,333.333 h-131.468M400,333.333 h-131.468M 268.532 333.333 A -133.333 400 0 0 0 266.667 400M266.667,400 h-133.333M133.333,400 h-133.333\"\n                           fill=\"none\"\n                           stroke=\"url(#lllldll31-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-lllldll31\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"lllldll31-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop offset=\"1\" stopColor=\"var(--color)\" stopOpacity=\"0\" />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"794.405;794.405;662.937;531.468;400;268.532;266.667;133.333;0;0;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"333.333;333.333;333.333;333.333;333.333;333.333;400;400;400;400;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;100;100;100;100;100;100;100;100;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Second animated path */}\n                     <g id=\"llullldl34\" opacity=\"1\" className=\"[--normal-color:var(--line-color-2)]\">\n                        <path\n                           d=\"M698.142,133.333 h-99.381M598.762,133.333 h-99.381M 499.381 133.333 A 133.333 400 0 0 0 473.703 66.667M473.703,66.667 h-73.703M400,66.667 h-73.703M326.297,66.667 h-73.703M 252.594 66.667 A -266.667 400 0 0 0 201.238 133.333M201.238,133.333 h-99.381\"\n                           fill=\"none\"\n                           stroke=\"url(#llullldl34-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llullldl34\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llullldl34-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop offset=\"1\" stopColor=\"var(--color)\" stopOpacity=\"0\" />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"698.142;698.142;598.762;499.381;473.703;400;326.297;252.594;201.238;101.858;101.858;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"133.333;133.333;133.333;133.333;66.667;66.667;66.667;66.667;133.333;133.333;133.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;50;50;50;50;50;50;50;50;50;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Third animated path */}\n                     <g id=\"llldlll35\" opacity=\"1\" className=\"[--normal-color:var(--line-color-1)]\">\n                        <path\n                           d=\"M621.108,66.667 h-73.703M547.406,66.667 h-73.703M473.703,66.667 h-73.703M 400 133.333 A 0 400 0 0 0 400 66.667M400,133.333 h-99.381M300.619,133.333 h-99.381M201.238,133.333 h-99.381\"\n                           fill=\"none\"\n                           stroke=\"url(#llldlll35-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llldlll35\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llldlll35-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop offset=\"1\" stopColor=\"var(--color)\" stopOpacity=\"0\" />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"621.108;621.108;547.406;473.703;400;400;300.619;201.238;101.858;101.858;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"66.667;66.667;66.667;66.667;66.667;133.333;133.333;133.333;133.333;133.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Fourth animated path */}\n                     <g id=\"llddllll33\" opacity=\"1\" className=\"[--normal-color:var(--line-color-3)]\">\n                        <path\n                           d=\"M746.41,200 h-115.47M630.94,200 h-115.47M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M 531.468 333.333 A 133.333 400 0 0 0 525.708 266.667M531.468,333.333 h-131.468M400,333.333 h-131.468M268.532,333.333 h-131.468M137.063,333.333 h-131.468\"\n                           fill=\"none\"\n                           stroke=\"url(#llddllll33-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llddllll33\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llddllll33-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop offset=\"1\" stopColor=\"var(--color)\" stopOpacity=\"0\" />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"746.41;746.41;630.94;515.47;525.708;531.468;400;268.532;137.063;5.595;5.595;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"200;200;200;200;266.667;333.333;333.333;333.333;333.333;333.333;333.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;100;100;100;100;100;100;100;100;100;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Fifth animated path */}\n                     <g id=\"lllddlll34\" opacity=\"1\" className=\"[--normal-color:var(--line-color-2)]\">\n                        <path\n                           d=\"M698.142,133.333 h-99.381M598.762,133.333 h-99.381M499.381,133.333 h-99.381M 400 200 A 0 400 0 0 0 400 133.333M 400 266.667 A 0 400 0 0 0 400 200M400,266.667 h-125.708M274.292,266.667 h-125.708M148.584,266.667 h-125.708\"\n                           fill=\"none\"\n                           stroke=\"url(#lllddlll34-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-lllddlll34\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"lllddlll34-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop offset=\"1\" stopColor=\"var(--color)\" stopOpacity=\"0\" />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"698.142;698.142;598.762;499.381;400;400;400;274.292;148.584;22.876;22.876;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"133.333;133.333;133.333;133.333;133.333;200;266.667;266.667;266.667;266.667;266.667;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Sixth animated path */}\n                     <g id=\"llullll32\" opacity=\"1\" className=\"[--normal-color:var(--line-color-3)]\">\n                        <path\n                           d=\"M777.124,266.667 h-125.708M651.416,266.667 h-125.708M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M515.47,200 h-115.47M400,200 h-115.47M284.53,200 h-115.47M169.06,200 h-115.47\"\n                           fill=\"none\"\n                           stroke=\"url(#llullll32-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llullll32\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llullll32-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop offset=\"1\" stopColor=\"var(--color)\" stopOpacity=\"0\" />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"777.124;777.124;651.416;525.708;515.47;400;284.53;169.06;53.59;53.59;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"266.667;266.667;266.667;266.667;200;200;200;200;200;200;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;50;50;50;50;50;50;50;50;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n                  </g>\n\n                  {/* Mirrored paths for full globe */}\n                  {fullGlobe && (\n                     <g\n                        transform=\"translate(0,800) scale(1,-1)\"\n                        className=\"opacity-50\" // Optional: slightly reduce opacity of bottom paths\n                     >\n                        <use href=\"#animated-paths\" />\n                     </g>\n                  )}\n\n                  <defs>\n                     <linearGradient\n                        gradientUnits=\"userSpaceOnUse\"\n                        id=\"globe-gradient\"\n                        x1=\"0\"\n                        x2=\"0\"\n                        y1=\"0\"\n                        y2=\"400\"\n                     >\n                        <stop offset=\"0%\" stopColor=\"var(--guide-color)\" />\n                        <stop offset=\"100%\" stopColor=\"var(--guide-color)\" />\n                     </linearGradient>\n                  </defs>\n               </svg>\n            </div>\n         </section>\n      </div>\n   )\n}\n\nexport default GlobeGrid\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface GlobeGridProps {\n   fullGlobe?: boolean\n   className?: string\n}\n\nexport function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {\n   return (\n      <div\n         className={ny(\n            \"relative flex min-h-[350px] w-full items-center justify-center overflow-hidden\",\n            className,\n         )}\n      >\n         <section\n            className=\"relative w-full max-w-[600px]\"\n            style={\n               {\n                  \"--sm-grid-columns\": \"6\",\n                  \"--md-grid-columns\": \"6\",\n                  \"--sm-grid-rows\": fullGlobe ? \"12\" : \"6\",\n                  \"--md-grid-rows\": fullGlobe ? \"12\" : \"6\",\n                  \"--grid-columns\": \"var(--sm-grid-columns)\",\n                  \"--grid-rows\": \"var(--sm-grid-rows)\",\n                  aspectRatio: fullGlobe ? \"1/1\" : \"2/1\",\n               } as React.CSSProperties\n            }\n         >\n            <style jsx>\n               {`\n               @media (min-width: 768px) {\n                  section {\n                     --grid-columns: var(--md-grid-columns);\n                     --grid-rows: var(--md-grid-rows);\n                  }\n               }\n            `}\n            </style>\n            <div className=\"absolute left-0 top-0 z-[5] ml-[-0.5px] w-full md:left-1/2 md:top-1/2 md:h-[200%] md:-translate-x-1/2 md:-translate-y-1/2\">\n               <svg\n                  aria-hidden=\"true\"\n                  height=\"100%\"\n                  style={{\n                     transform: fullGlobe\n                        ? \"translateY(0px) scale(1.002)\"\n                        : \"translateY(-12.5%) scale(1.002)\",\n                  }}\n                  viewBox={fullGlobe ? \"-1 -1 802 802\" : \"-1 -151 802 602\"}\n                  width=\"100%\"\n                  className=\"[--guide-color:theme(colors.border/50%)]\"\n               >\n                  <defs>\n                     <clipPath id=\"half-globe-clip\">\n                        <rect x=\"-1\" y=\"-151\" width=\"802\" height=\"551\" />\n                     </clipPath>\n                  </defs>\n\n                  <g\n                     data-testid=\"globe-wireframe\"\n                     clipPath={fullGlobe ? \"none\" : \"url(#half-globe-clip)\"}\n                  >\n                     <circle\n                        cx=\"400\"\n                        cy=\"400\"\n                        fill=\"var(--ds-background-200)\"\n                        r=\"400\"\n                     />\n                     <path\n                        d=\"M 400 800 A -400 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 800 A -266.667 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 800 A -133.333 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 800 A 0 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 0 A 133.333 400 0 0 0 400 800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 0 A 266.667 400 0 0 0 400 800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 0 A 400 400 0 0 0 400 800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n\n                     <path\n                        d=\"M178.892,66.667 h442.217\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M101.858,133.333 h596.285\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M53.59,200 h692.82\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M22.876,266.667 h754.247\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M5.595,333.333 h788.811\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M0,400 h800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     {fullGlobe && (\n                        <>\n                           <path\n                              d=\"M5.595,466.667 h788.811\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M22.876,533.333 h754.247\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M53.59,600 h692.82\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M101.858,666.667 h596.285\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M178.892,733.333 h442.217\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                        </>\n                     )}\n                  </g>\n\n                  {/* Original animated paths */}\n                  <g id=\"animated-paths\">\n                     {/* First animated path */}\n                     <g\n                        id=\"lllldll31\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-1)]\"\n                     >\n                        <path\n                           d=\"M794.405,333.333 h-131.468M662.937,333.333 h-131.468M531.468,333.333 h-131.468M400,333.333 h-131.468M 268.532 333.333 A -133.333 400 0 0 0 266.667 400M266.667,400 h-133.333M133.333,400 h-133.333\"\n                           fill=\"none\"\n                           stroke=\"url(#lllldll31-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-lllldll31\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"lllldll31-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"794.405;794.405;662.937;531.468;400;268.532;266.667;133.333;0;0;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"333.333;333.333;333.333;333.333;333.333;333.333;400;400;400;400;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;100;100;100;100;100;100;100;100;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Second animated path */}\n                     <g\n                        id=\"llullldl34\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-2)]\"\n                     >\n                        <path\n                           d=\"M698.142,133.333 h-99.381M598.762,133.333 h-99.381M 499.381 133.333 A 133.333 400 0 0 0 473.703 66.667M473.703,66.667 h-73.703M400,66.667 h-73.703M326.297,66.667 h-73.703M 252.594 66.667 A -266.667 400 0 0 0 201.238 133.333M201.238,133.333 h-99.381\"\n                           fill=\"none\"\n                           stroke=\"url(#llullldl34-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llullldl34\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llullldl34-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"698.142;698.142;598.762;499.381;473.703;400;326.297;252.594;201.238;101.858;101.858;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"133.333;133.333;133.333;133.333;66.667;66.667;66.667;66.667;133.333;133.333;133.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;50;50;50;50;50;50;50;50;50;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Third animated path */}\n                     <g\n                        id=\"llldlll35\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-1)]\"\n                     >\n                        <path\n                           d=\"M621.108,66.667 h-73.703M547.406,66.667 h-73.703M473.703,66.667 h-73.703M 400 133.333 A 0 400 0 0 0 400 66.667M400,133.333 h-99.381M300.619,133.333 h-99.381M201.238,133.333 h-99.381\"\n                           fill=\"none\"\n                           stroke=\"url(#llldlll35-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llldlll35\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llldlll35-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"621.108;621.108;547.406;473.703;400;400;300.619;201.238;101.858;101.858;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"66.667;66.667;66.667;66.667;66.667;133.333;133.333;133.333;133.333;133.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Fourth animated path */}\n                     <g\n                        id=\"llddllll33\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-3)]\"\n                     >\n                        <path\n                           d=\"M746.41,200 h-115.47M630.94,200 h-115.47M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M 531.468 333.333 A 133.333 400 0 0 0 525.708 266.667M531.468,333.333 h-131.468M400,333.333 h-131.468M268.532,333.333 h-131.468M137.063,333.333 h-131.468\"\n                           fill=\"none\"\n                           stroke=\"url(#llddllll33-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llddllll33\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llddllll33-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"746.41;746.41;630.94;515.47;525.708;531.468;400;268.532;137.063;5.595;5.595;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"200;200;200;200;266.667;333.333;333.333;333.333;333.333;333.333;333.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;100;100;100;100;100;100;100;100;100;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Fifth animated path */}\n                     <g\n                        id=\"lllddlll34\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-2)]\"\n                     >\n                        <path\n                           d=\"M698.142,133.333 h-99.381M598.762,133.333 h-99.381M499.381,133.333 h-99.381M 400 200 A 0 400 0 0 0 400 133.333M 400 266.667 A 0 400 0 0 0 400 200M400,266.667 h-125.708M274.292,266.667 h-125.708M148.584,266.667 h-125.708\"\n                           fill=\"none\"\n                           stroke=\"url(#lllddlll34-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-lllddlll34\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"lllddlll34-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"698.142;698.142;598.762;499.381;400;400;400;274.292;148.584;22.876;22.876;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"133.333;133.333;133.333;133.333;133.333;200;266.667;266.667;266.667;266.667;266.667;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Sixth animated path */}\n                     <g\n                        id=\"llullll32\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-3)]\"\n                     >\n                        <path\n                           d=\"M777.124,266.667 h-125.708M651.416,266.667 h-125.708M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M515.47,200 h-115.47M400,200 h-115.47M284.53,200 h-115.47M169.06,200 h-115.47\"\n                           fill=\"none\"\n                           stroke=\"url(#llullll32-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llullll32\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llullll32-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"777.124;777.124;651.416;525.708;515.47;400;284.53;169.06;53.59;53.59;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"266.667;266.667;266.667;266.667;200;200;200;200;200;200;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;50;50;50;50;50;50;50;50;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n                  </g>\n\n                  {/* Mirrored paths for full globe */}\n                  {fullGlobe && (\n                     <g\n                        transform=\"translate(0,800) scale(1,-1)\"\n                        className=\"opacity-50\" // Optional: slightly reduce opacity of bottom paths\n                     >\n                        <use href=\"#animated-paths\" />\n                     </g>\n                  )}\n\n                  <defs>\n                     <linearGradient\n                        gradientUnits=\"userSpaceOnUse\"\n                        id=\"globe-gradient\"\n                        x1=\"0\"\n                        x2=\"0\"\n                        y1=\"0\"\n                        y2=\"400\"\n                     >\n                        <stop offset=\"0%\" stopColor=\"var(--guide-color)\" />\n                        <stop offset=\"100%\" stopColor=\"var(--guide-color)\" />\n                     </linearGradient>\n                  </defs>\n               </svg>\n            </div>\n         </section>\n      </div>\n   )\n}\n\nexport default GlobeGrid\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/globe.json b/apps/web/public/r/styles/miami/globe.json
index 5b498a0f..50abd3e3 100644
--- a/apps/web/public/r/styles/miami/globe.json
+++ b/apps/web/public/r/styles/miami/globe.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "globe",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "cobe",
     "react-spring"
@@ -8,8 +10,8 @@
   "files": [
     {
       "path": "ui/globe.tsx",
-      "content": "'use client'\n\nimport type { COBEOptions } from 'cobe'\nimport createGlobe from 'cobe'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { useSpring } from 'react-spring'\nimport { ny } from '~/lib/utils'\n\nconst GLOBE_CONFIG: COBEOptions = {\n   width: 800,\n   height: 800,\n   onRender: () => {},\n   devicePixelRatio: 2,\n   phi: 0,\n   theta: 0.3,\n   dark: 0,\n   diffuse: 0.4,\n   mapSamples: 16000,\n   mapBrightness: 1.2,\n   baseColor: [1, 1, 1],\n   markerColor: [251 / 255, 100 / 255, 21 / 255],\n   glowColor: [1, 1, 1],\n   markers: [\n      { location: [14.5995, 120.9842], size: 0.03 },\n      { location: [19.076, 72.8777], size: 0.1 },\n      { location: [23.8103, 90.4125], size: 0.05 },\n      { location: [30.0444, 31.2357], size: 0.07 },\n      { location: [39.9042, 116.4074], size: 0.08 },\n      { location: [-23.5505, -46.6333], size: 0.1 },\n      { location: [19.4326, -99.1332], size: 0.1 },\n      { location: [40.7128, -74.006], size: 0.1 },\n      { location: [34.6937, 135.5022], size: 0.05 },\n      { location: [41.0082, 28.9784], size: 0.06 },\n   ],\n}\n\nexport default function Globe({\n   className,\n   config = GLOBE_CONFIG,\n}: {\n   className?: string\n   config?: COBEOptions\n}) {\n   let phi = 0\n   let width = 0\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const pointerInteracting = useRef(null)\n   const pointerInteractionMovement = useRef(0)\n   const [{ r }, api] = useSpring(() => ({\n      r: 0,\n      config: {\n         mass: 1,\n         tension: 280,\n         friction: 40,\n         precision: 0.001,\n      },\n   }))\n\n   const updatePointerInteraction = (value: any) => {\n      pointerInteracting.current = value\n      canvasRef.current!.style.cursor = value ? 'grabbing' : 'grab'\n   }\n\n   const updateMovement = (clientX: any) => {\n      if (pointerInteracting.current !== null) {\n         const delta = clientX - pointerInteracting.current\n         pointerInteractionMovement.current = delta\n         api.start({ r: delta / 200 })\n      }\n   }\n\n   const onRender = useCallback(\n      (state: Record<string, any>) => {\n         if (!pointerInteracting.current)\n            phi += 0.005\n         state.phi = phi + r.get()\n         state.width = width * 2\n         state.height = width * 2\n      },\n      [pointerInteracting, phi, r],\n   )\n\n   const onResize = () => {\n      if (canvasRef.current)\n         width = canvasRef.current.offsetWidth\n   }\n\n   useEffect(() => {\n      window.addEventListener('resize', onResize)\n      onResize()\n\n      const globe = createGlobe(canvasRef.current!, {\n         ...config,\n         width: width * 2,\n         height: width * 2,\n         onRender,\n      })\n\n      setTimeout(() => (canvasRef.current!.style.opacity = '1'))\n      return () => globe.destroy()\n   }, [])\n\n   return (\n      <div\n         className={ny(\n            'absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]',\n            className,\n         )}\n      >\n         <canvas\n            className={ny(\n               'size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]',\n            )}\n            ref={canvasRef}\n            onPointerDown={e =>\n               updatePointerInteraction(e.clientX - pointerInteractionMovement.current)}\n            onPointerUp={() => updatePointerInteraction(null)}\n            onPointerOut={() => updatePointerInteraction(null)}\n            onMouseMove={e => updateMovement(e.clientX)}\n            onTouchMove={e =>\n               e.touches[0] && updateMovement(e.touches[0].clientX)}\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { COBEOptions } from \"cobe\"\nimport createGlobe from \"cobe\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useSpring } from \"react-spring\"\nimport { ny } from \"~/lib/utils\"\n\nconst GLOBE_CONFIG: COBEOptions = {\n   width: 800,\n   height: 800,\n   onRender: () => {},\n   devicePixelRatio: 2,\n   phi: 0,\n   theta: 0.3,\n   dark: 0,\n   diffuse: 0.4,\n   mapSamples: 16000,\n   mapBrightness: 1.2,\n   baseColor: [1, 1, 1],\n   markerColor: [251 / 255, 100 / 255, 21 / 255],\n   glowColor: [1, 1, 1],\n   markers: [\n      { location: [14.5995, 120.9842], size: 0.03 },\n      { location: [19.076, 72.8777], size: 0.1 },\n      { location: [23.8103, 90.4125], size: 0.05 },\n      { location: [30.0444, 31.2357], size: 0.07 },\n      { location: [39.9042, 116.4074], size: 0.08 },\n      { location: [-23.5505, -46.6333], size: 0.1 },\n      { location: [19.4326, -99.1332], size: 0.1 },\n      { location: [40.7128, -74.006], size: 0.1 },\n      { location: [34.6937, 135.5022], size: 0.05 },\n      { location: [41.0082, 28.9784], size: 0.06 },\n   ],\n}\n\nexport default function Globe({\n   className,\n   config = GLOBE_CONFIG,\n}: {\n   className?: string\n   config?: COBEOptions\n}) {\n   let phi = 0\n   let width = 0\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const pointerInteracting = useRef(null)\n   const pointerInteractionMovement = useRef(0)\n   const [{ r }, api] = useSpring(() => ({\n      r: 0,\n      config: {\n         mass: 1,\n         tension: 280,\n         friction: 40,\n         precision: 0.001,\n      },\n   }))\n\n   const updatePointerInteraction = (value: any) => {\n      pointerInteracting.current = value\n      canvasRef.current!.style.cursor = value ? \"grabbing\" : \"grab\"\n   }\n\n   const updateMovement = (clientX: any) => {\n      if (pointerInteracting.current !== null) {\n         const delta = clientX - pointerInteracting.current\n         pointerInteractionMovement.current = delta\n         api.start({ r: delta / 200 })\n      }\n   }\n\n   const onRender = useCallback(\n      (state: Record<string, any>) => {\n         if (!pointerInteracting.current) phi += 0.005\n         state.phi = phi + r.get()\n         state.width = width * 2\n         state.height = width * 2\n      },\n      [pointerInteracting, phi, r],\n   )\n\n   const onResize = () => {\n      if (canvasRef.current) width = canvasRef.current.offsetWidth\n   }\n\n   useEffect(() => {\n      window.addEventListener(\"resize\", onResize)\n      onResize()\n\n      const globe = createGlobe(canvasRef.current!, {\n         ...config,\n         width: width * 2,\n         height: width * 2,\n         onRender,\n      })\n\n      setTimeout(() => (canvasRef.current!.style.opacity = \"1\"))\n      return () => globe.destroy()\n   }, [])\n\n   return (\n      <div\n         className={ny(\n            \"absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]\",\n            className,\n         )}\n      >\n         <canvas\n            className={ny(\n               \"size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]\",\n            )}\n            ref={canvasRef}\n            onPointerDown={(e) =>\n               updatePointerInteraction(\n                  e.clientX - pointerInteractionMovement.current,\n               )\n            }\n            onPointerUp={() => updatePointerInteraction(null)}\n            onPointerOut={() => updatePointerInteraction(null)}\n            onMouseMove={(e) => updateMovement(e.clientX)}\n            onTouchMove={(e) =>\n               e.touches[0] && updateMovement(e.touches[0].clientX)\n            }\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/gradual-spacing-demo.json b/apps/web/public/r/styles/miami/gradual-spacing-demo.json
index c37549bb..f9873af5 100644
--- a/apps/web/public/r/styles/miami/gradual-spacing-demo.json
+++ b/apps/web/public/r/styles/miami/gradual-spacing-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "gradual-spacing-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/gradual-spacing-demo.tsx",
-      "content": "import GradualSpacing from '~/registry/miami/ui/gradual-spacing'\n\nexport default async function GradualSpacingDemo() {\n   return (\n      <GradualSpacing\n         className=\"font-display text-center text-4xl font-bold -tracking-widest  text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         text=\"Gradual Spacing\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/gradual-spacing-demo.tsx",
+      "content": "import GradualSpacing from \"~/registry/miami/ui/gradual-spacing\"\n\nexport default async function GradualSpacingDemo() {\n   return (\n      <GradualSpacing\n         className=\"font-display text-center text-4xl font-bold -tracking-widest  text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         text=\"Gradual Spacing\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/gradual-spacing.json b/apps/web/public/r/styles/miami/gradual-spacing.json
index 1a89bff7..2f3bd96b 100644
--- a/apps/web/public/r/styles/miami/gradual-spacing.json
+++ b/apps/web/public/r/styles/miami/gradual-spacing.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "gradual-spacing",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/gradual-spacing.tsx",
-      "content": "'use client'\n\nimport type { Variants } from 'framer-motion'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface GradualSpacingProps {\n   text: string\n   duration?: number\n   delayMultiple?: number\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function GradualSpacing({\n   text,\n   duration = 0.5,\n   delayMultiple = 0.04,\n   framerProps = {\n      hidden: { opacity: 0, x: -20 },\n      visible: { opacity: 1, x: 0 },\n   },\n   className,\n}: GradualSpacingProps) {\n   return (\n      <div className=\"flex justify-center space-x-1\">\n         <AnimatePresence>\n            {text.split('').map((char, i) => (\n               <motion.h1\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={framerProps}\n                  transition={{ duration, delay: i * delayMultiple }}\n                  className={ny('drop-shadow-sm ', className)}\n               >\n                  {char === ' ' ? <span>&nbsp;</span> : char}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface GradualSpacingProps {\n   text: string\n   duration?: number\n   delayMultiple?: number\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function GradualSpacing({\n   text,\n   duration = 0.5,\n   delayMultiple = 0.04,\n   framerProps = {\n      hidden: { opacity: 0, x: -20 },\n      visible: { opacity: 1, x: 0 },\n   },\n   className,\n}: GradualSpacingProps) {\n   return (\n      <div className=\"flex justify-center space-x-1\">\n         <AnimatePresence>\n            {text.split(\"\").map((char, i) => (\n               <motion.h1\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={framerProps}\n                  transition={{ duration, delay: i * delayMultiple }}\n                  className={ny(\"drop-shadow-sm \", className)}\n               >\n                  {char === \" \" ? <span>&nbsp;</span> : char}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/grid-layout-columns-demo.json b/apps/web/public/r/styles/miami/grid-layout-columns-demo.json
index 9c50ae48..f8cc5828 100644
--- a/apps/web/public/r/styles/miami/grid-layout-columns-demo.json
+++ b/apps/web/public/r/styles/miami/grid-layout-columns-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-layout-columns-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/grid-layout-columns-demo.tsx",
-      "content": "'use client'\n\nimport GridLayout from '~/registry/default/ui/grid-layout'\n\nexport default function GridLayoutColumnsDemo() {\n   return (\n      <div className=\"space-y-8\">\n         <GridLayout\n            columns={8}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">8 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Compact layouts</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            columns={12}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">12 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Traditional grid</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            columns={16}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">16 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Fine-grained control</p>\n               </div>\n            </div>\n         </GridLayout>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/grid-layout-columns-demo.tsx",
+      "content": "\"use client\"\n\nimport GridLayout from \"~/registry/default/ui/grid-layout\"\n\nexport default function GridLayoutColumnsDemo() {\n   return (\n      <div className=\"space-y-8\">\n         <GridLayout\n            columns={8}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">8 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Compact layouts</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            columns={12}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">12 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Traditional grid</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            columns={16}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">16 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Fine-grained control\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/grid-layout-crosshairs-demo.json b/apps/web/public/r/styles/miami/grid-layout-crosshairs-demo.json
index fd62c444..97b2ae97 100644
--- a/apps/web/public/r/styles/miami/grid-layout-crosshairs-demo.json
+++ b/apps/web/public/r/styles/miami/grid-layout-crosshairs-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-layout-crosshairs-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/grid-layout-crosshairs-demo.tsx",
-      "content": "'use client'\n\nimport GridLayout from '~/registry/default/ui/grid-layout'\n\nexport default function GridLayoutCrosshairsDemo() {\n   return (\n      <GridLayout\n         crosshairs={{\n            topLeft: true,\n            topRight: true,\n            bottomLeft: true,\n            bottomRight: true,\n         }}\n         lineVariant=\"none\"\n         className=\"min-h-[350px] p-6\"\n      >\n         <div className=\"flex h-full flex-col items-center justify-center space-y-4\">\n            <div className=\"text-center\">\n               <h3 className=\"text-2xl font-medium\">Corner Markers</h3>\n               <p className=\"text-muted-foreground mt-2\">\n                  Use crosshairs to highlight key areas or create visual anchors\n               </p>\n            </div>\n            <div className=\"grid w-full max-w-xl grid-cols-2 gap-8 pt-8\">\n               <div className=\"bg-card rounded-lg border p-4 text-center\">Top Left</div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">Top Right</div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">Bottom Left</div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">Bottom Right</div>\n            </div>\n         </div>\n      </GridLayout>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/grid-layout-crosshairs-demo.tsx",
+      "content": "\"use client\"\n\nimport GridLayout from \"~/registry/default/ui/grid-layout\"\n\nexport default function GridLayoutCrosshairsDemo() {\n   return (\n      <GridLayout\n         crosshairs={{\n            topLeft: true,\n            topRight: true,\n            bottomLeft: true,\n            bottomRight: true,\n         }}\n         lineVariant=\"none\"\n         className=\"min-h-[350px] p-6\"\n      >\n         <div className=\"flex h-full flex-col items-center justify-center space-y-4\">\n            <div className=\"text-center\">\n               <h3 className=\"text-2xl font-medium\">Corner Markers</h3>\n               <p className=\"text-muted-foreground mt-2\">\n                  Use crosshairs to highlight key areas or create visual anchors\n               </p>\n            </div>\n            <div className=\"grid w-full max-w-xl grid-cols-2 gap-8 pt-8\">\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Top Left\n               </div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Top Right\n               </div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Bottom Left\n               </div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Bottom Right\n               </div>\n            </div>\n         </div>\n      </GridLayout>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/grid-layout-demo.json b/apps/web/public/r/styles/miami/grid-layout-demo.json
index 4a70d02f..ff0b951e 100644
--- a/apps/web/public/r/styles/miami/grid-layout-demo.json
+++ b/apps/web/public/r/styles/miami/grid-layout-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-layout-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/grid-layout-demo.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/default/ui/button'\nimport GridLayout from '~/registry/default/ui/grid-layout'\n\nexport default function GridLayoutDemo() {\n   return (\n      <GridLayout\n         crosshairs={{\n            topLeft: true,\n            bottomRight: true,\n         }}\n         lineVariant=\"center\"\n         className=\"min-h-[350px] p-8\"\n      >\n         <div className=\"space-y-8\">\n            <div>\n               <h2 className=\"text-4xl font-medium tracking-tight\">\n                  Ready to deploy?\n                  {' '}\n                  <span className=\"text-muted-foreground\">\n                     Start building with a free account.\n                  </span>\n               </h2>\n               <p className=\"text-muted-foreground mt-4 text-xl\">\n                  Speak to an expert for your\n                  {' '}\n                  <span className=\"text-blue-500\">Pro</span>\n                  {' '}\n                  or\n                  {' '}\n                  <span className=\"text-purple-500\">Enterprise</span>\n                  {' '}\n                  needs.\n               </p>\n            </div>\n            <div className=\"flex gap-4\">\n               <Button variant=\"default\" size=\"lg\">\n                  Start Deploying\n               </Button>\n               <Button variant=\"outline\" size=\"lg\">\n                  Contact Sales\n               </Button>\n            </div>\n         </div>\n      </GridLayout>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/grid-layout-demo.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/default/ui/button\"\nimport GridLayout from \"~/registry/default/ui/grid-layout\"\n\nexport default function GridLayoutDemo() {\n   return (\n      <GridLayout\n         crosshairs={{\n            topLeft: true,\n            bottomRight: true,\n         }}\n         lineVariant=\"center\"\n         className=\"min-h-[350px] p-8\"\n      >\n         <div className=\"space-y-8\">\n            <div>\n               <h2 className=\"text-4xl font-medium tracking-tight\">\n                  Ready to deploy?{\" \"}\n                  <span className=\"text-muted-foreground\">\n                     Start building with a free account.\n                  </span>\n               </h2>\n               <p className=\"text-muted-foreground mt-4 text-xl\">\n                  Speak to an expert for your{\" \"}\n                  <span className=\"text-blue-500\">Pro</span> or{\" \"}\n                  <span className=\"text-purple-500\">Enterprise</span> needs.\n               </p>\n            </div>\n            <div className=\"flex gap-4\">\n               <Button variant=\"default\" size=\"lg\">\n                  Start Deploying\n               </Button>\n               <Button variant=\"outline\" size=\"lg\">\n                  Contact Sales\n               </Button>\n            </div>\n         </div>\n      </GridLayout>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/grid-layout-variants-demo.json b/apps/web/public/r/styles/miami/grid-layout-variants-demo.json
index 9000cdb6..3e3fe74c 100644
--- a/apps/web/public/r/styles/miami/grid-layout-variants-demo.json
+++ b/apps/web/public/r/styles/miami/grid-layout-variants-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-layout-variants-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "grid-layout"
   ],
   "files": [
     {
-      "path": "example/grid-layout-variants-demo.tsx",
-      "content": "'use client'\n\nimport GridLayout from '~/registry/default/ui/grid-layout'\n\nexport default function GridLayoutVariantsDemo() {\n   return (\n      <div className=\"space-y-8\">\n         <GridLayout\n            lineVariant=\"center\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Center Line</h3>\n                  <p className=\"text-muted-foreground mt-1\">Minimal and focused</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            lineVariant=\"vertical\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Vertical Lines</h3>\n                  <p className=\"text-muted-foreground mt-1\">Column-focused layout</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            lineVariant=\"horizontal\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Horizontal Lines</h3>\n                  <p className=\"text-muted-foreground mt-1\">Row-based organization</p>\n               </div>\n            </div>\n         </GridLayout>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/grid-layout-variants-demo.tsx",
+      "content": "\"use client\"\n\nimport GridLayout from \"~/registry/default/ui/grid-layout\"\n\nexport default function GridLayoutVariantsDemo() {\n   return (\n      <div className=\"space-y-8\">\n         <GridLayout\n            lineVariant=\"center\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Center Line</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Minimal and focused\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            lineVariant=\"vertical\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Vertical Lines</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Column-focused layout\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            lineVariant=\"horizontal\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Horizontal Lines</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Row-based organization\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/grid-layout.json b/apps/web/public/r/styles/miami/grid-layout.json
index b93b5588..513e773a 100644
--- a/apps/web/public/r/styles/miami/grid-layout.json
+++ b/apps/web/public/r/styles/miami/grid-layout.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-layout",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/grid-layout.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface CrosshairConfig {\n   topLeft?: boolean\n   topRight?: boolean\n   bottomLeft?: boolean\n   bottomRight?: boolean\n}\n\ninterface GridLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n   children: React.ReactNode\n   crosshairs?: CrosshairConfig\n   gridLines?: boolean\n   columns?: 8 | 12 | 16\n   lineVariant?: 'all' | 'vertical' | 'horizontal' | 'center' | 'none'\n}\n\nfunction CrosshairIcon({ className }: { className?: string }) {\n   return (\n      <svg\n         width=\"16\"\n         height=\"16\"\n         viewBox=\"0 0 16 16\"\n         fill=\"none\"\n         className={className}\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M8 1V15M1 8H15\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1\"\n            strokeLinecap=\"round\"\n         />\n      </svg>\n   )\n}\n\nexport function GridLayout({\n   children,\n   crosshairs,\n   gridLines = true,\n   columns = 16,\n   lineVariant = 'all',\n   className,\n   ...props\n}: GridLayoutProps) {\n   return (\n      <div\n         className={ny(\n            'relative grid w-full gap-0',\n            gridLines && 'border-grid-line border',\n            columns === 16 && 'grid-cols-grid-16',\n            columns === 12 && 'grid-cols-grid-12',\n            columns === 8 && 'grid-cols-grid-8',\n            className,\n         )}\n         {...props}\n      >\n         {gridLines && (\n            <div className=\"absolute inset-0 z-0\">\n               {/* Vertikale Linien */}\n               {(lineVariant === 'all' || lineVariant === 'vertical' || lineVariant === 'center') && (\n                  <div className=\"absolute inset-0 flex justify-center\">\n                     {lineVariant === 'center'\n                        ? (\n                              <div className=\"border-grid-line h-full w-px border-r\" />\n                           )\n                        : (\n                              <div\n                                 className={ny(\n                                    'grid size-full',\n                                    columns === 16 && 'grid-cols-grid-16',\n                                    columns === 12 && 'grid-cols-grid-12',\n                                    columns === 8 && 'grid-cols-grid-8',\n                                 )}\n                              >\n                                 {Array.from({ length: columns }).map((_, i) => (\n                                    <div\n                                       key={i}\n                                       className={ny(\n                                          'border-grid-line border-r',\n                                          i === 0 && 'border-l',\n                                       )}\n                                    />\n                                 ))}\n                              </div>\n                           )}\n                  </div>\n               )}\n\n               {/* Horizontale Linien */}\n               {(lineVariant === 'all' || lineVariant === 'horizontal') && (\n                  <div className=\"absolute inset-0 grid grid-rows-[repeat(16,1fr)]\">\n                     {Array.from({ length: 17 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className={ny(\n                              'border-grid-line border-t',\n                              i === 16 && 'border-b',\n                           )}\n                        />\n                     ))}\n                  </div>\n               )}\n            </div>\n         )}\n\n         {/* Crosshairs */}\n         {crosshairs?.topLeft && (\n            <CrosshairIcon className=\"text-grid-line absolute -left-2 -top-2\" />\n         )}\n         {crosshairs?.topRight && (\n            <CrosshairIcon className=\"text-grid-line absolute -right-2 -top-2\" />\n         )}\n         {crosshairs?.bottomLeft && (\n            <CrosshairIcon className=\"text-grid-line absolute -bottom-2 -left-2\" />\n         )}\n         {crosshairs?.bottomRight && (\n            <CrosshairIcon className=\"text-grid-line absolute -bottom-2 -right-2\" />\n         )}\n\n         <div className=\"relative z-10 col-span-full\">{children}</div>\n      </div>\n   )\n}\n\nexport default GridLayout\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface CrosshairConfig {\n   topLeft?: boolean\n   topRight?: boolean\n   bottomLeft?: boolean\n   bottomRight?: boolean\n}\n\ninterface GridLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n   children: React.ReactNode\n   crosshairs?: CrosshairConfig\n   gridLines?: boolean\n   columns?: 8 | 12 | 16\n   lineVariant?: \"all\" | \"vertical\" | \"horizontal\" | \"center\" | \"none\"\n}\n\nfunction CrosshairIcon({ className }: { className?: string }) {\n   return (\n      <svg\n         width=\"16\"\n         height=\"16\"\n         viewBox=\"0 0 16 16\"\n         fill=\"none\"\n         className={className}\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M8 1V15M1 8H15\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1\"\n            strokeLinecap=\"round\"\n         />\n      </svg>\n   )\n}\n\nexport function GridLayout({\n   children,\n   crosshairs,\n   gridLines = true,\n   columns = 16,\n   lineVariant = \"all\",\n   className,\n   ...props\n}: GridLayoutProps) {\n   return (\n      <div\n         className={ny(\n            \"relative grid w-full gap-0\",\n            gridLines && \"border-grid-line border\",\n            columns === 16 && \"grid-cols-grid-16\",\n            columns === 12 && \"grid-cols-grid-12\",\n            columns === 8 && \"grid-cols-grid-8\",\n            className,\n         )}\n         {...props}\n      >\n         {gridLines && (\n            <div className=\"absolute inset-0 z-0\">\n               {/* Vertikale Linien */}\n               {(lineVariant === \"all\" ||\n                  lineVariant === \"vertical\" ||\n                  lineVariant === \"center\") && (\n                  <div className=\"absolute inset-0 flex justify-center\">\n                     {lineVariant === \"center\" ? (\n                        <div className=\"border-grid-line h-full w-px border-r\" />\n                     ) : (\n                        <div\n                           className={ny(\n                              \"grid size-full\",\n                              columns === 16 && \"grid-cols-grid-16\",\n                              columns === 12 && \"grid-cols-grid-12\",\n                              columns === 8 && \"grid-cols-grid-8\",\n                           )}\n                        >\n                           {Array.from({ length: columns }).map((_, i) => (\n                              <div\n                                 key={i}\n                                 className={ny(\n                                    \"border-grid-line border-r\",\n                                    i === 0 && \"border-l\",\n                                 )}\n                              />\n                           ))}\n                        </div>\n                     )}\n                  </div>\n               )}\n\n               {/* Horizontale Linien */}\n               {(lineVariant === \"all\" || lineVariant === \"horizontal\") && (\n                  <div className=\"absolute inset-0 grid grid-rows-[repeat(16,1fr)]\">\n                     {Array.from({ length: 17 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className={ny(\n                              \"border-grid-line border-t\",\n                              i === 16 && \"border-b\",\n                           )}\n                        />\n                     ))}\n                  </div>\n               )}\n            </div>\n         )}\n\n         {/* Crosshairs */}\n         {crosshairs?.topLeft && (\n            <CrosshairIcon className=\"text-grid-line absolute -left-2 -top-2\" />\n         )}\n         {crosshairs?.topRight && (\n            <CrosshairIcon className=\"text-grid-line absolute -right-2 -top-2\" />\n         )}\n         {crosshairs?.bottomLeft && (\n            <CrosshairIcon className=\"text-grid-line absolute -bottom-2 -left-2\" />\n         )}\n         {crosshairs?.bottomRight && (\n            <CrosshairIcon className=\"text-grid-line absolute -bottom-2 -right-2\" />\n         )}\n\n         <div className=\"relative z-10 col-span-full\">{children}</div>\n      </div>\n   )\n}\n\nexport default GridLayout\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/grid-pattern-dashed.json b/apps/web/public/r/styles/miami/grid-pattern-dashed.json
index 74129583..d5c0671a 100644
--- a/apps/web/public/r/styles/miami/grid-pattern-dashed.json
+++ b/apps/web/public/r/styles/miami/grid-pattern-dashed.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-pattern-dashed",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/grid-pattern-dashed.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\nimport GridPattern from '~/registry/miami/ui/grid-pattern'\n\nfunction GridPatternDashed() {\n   return (\n      <div className=\"bg-background relative flex size-full items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            width={30}\n            height={30}\n            x={-1}\n            y={-1}\n            strokeDasharray=\"4 2\"\n            className={ny(\n               '[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]',\n            )}\n         />\n      </div>\n   )\n}\n\nexport default GridPatternDashed\n",
-      "type": "registry:component",
+      "path": "examples/grid-pattern-dashed.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\nimport { GridPattern } from \"~/registry/miami/ui/grid-pattern\"\n\nexport default function GridPatternDashed() {\n   return (\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            width={30}\n            height={30}\n            x={-1}\n            y={-1}\n            strokeDasharray={\"4 2\"}\n            className={ny(\n               \"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/grid-pattern-demo.json b/apps/web/public/r/styles/miami/grid-pattern-demo.json
index b3299bb1..920bcd90 100644
--- a/apps/web/public/r/styles/miami/grid-pattern-demo.json
+++ b/apps/web/public/r/styles/miami/grid-pattern-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-pattern-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/grid-pattern-demo.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\nimport GridPattern from '~/registry/miami/ui/grid-pattern'\n\nfunction GridPatternDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl \">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            squares={[\n               [4, 4],\n               [5, 1],\n               [8, 2],\n               [6, 6],\n               [10, 5],\n               [13, 3],\n            ]}\n            className={ny(\n               '[mask-image:radial-gradient(200px_circle_at_center,white,transparent)]',\n               'inset-x-0 inset-y-[-30%] h-[200%] skew-y-12',\n            )}\n         />\n      </div>\n   )\n}\n\nexport default GridPatternDemo\n",
-      "type": "registry:component",
+      "path": "examples/grid-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\nimport { GridPattern } from \"~/registry/miami/ui/grid-pattern\"\n\nexport default function GridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            squares={[\n               [4, 4],\n               [5, 1],\n               [8, 2],\n               [5, 3],\n               [5, 5],\n               [10, 10],\n               [12, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n            ]}\n            className={ny(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n               \"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/grid-pattern-linear-gradient.json b/apps/web/public/r/styles/miami/grid-pattern-linear-gradient.json
index d15f1cfb..b9154f52 100644
--- a/apps/web/public/r/styles/miami/grid-pattern-linear-gradient.json
+++ b/apps/web/public/r/styles/miami/grid-pattern-linear-gradient.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-pattern-linear-gradient",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/grid-pattern-linear-gradient.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\nimport GridPattern from '~/registry/miami/ui/grid-pattern'\n\nfunction GridPatternLinearGradient() {\n   return (\n      <div className=\"bg-background relative flex size-full items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            width={20}\n            height={20}\n            x={-1}\n            y={-1}\n            className={ny(\n               '[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ',\n            )}\n         />\n      </div>\n   )\n}\n\nexport default GridPatternLinearGradient\n",
-      "type": "registry:component",
+      "path": "examples/grid-pattern-linear-gradient.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\nimport { GridPattern } from \"~/registry/miami/ui/grid-pattern\"\n\nexport default function GridPatternLinearGradient() {\n   return (\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            width={20}\n            height={20}\n            x={-1}\n            y={-1}\n            className={ny(\n               \"[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] \",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/grid-pattern.json b/apps/web/public/r/styles/miami/grid-pattern.json
index 1e8db855..be76f7d9 100644
--- a/apps/web/public/r/styles/miami/grid-pattern.json
+++ b/apps/web/public/r/styles/miami/grid-pattern.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "grid-pattern",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/grid-pattern.tsx",
-      "content": "import { useId } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface GridPatternProps {\n   width?: any\n   height?: any\n   x?: any\n   y?: any\n   squares?: Array<[x: number, y: number]>\n   strokeDasharray?: any\n   className?: string\n   [key: string]: any\n}\n\nexport function GridPattern({\n   width = 40,\n   height = 40,\n   x = -1,\n   y = -1,\n   strokeDasharray = 0,\n   squares,\n   className,\n   ...props\n}: GridPatternProps) {\n   const id = useId()\n\n   return (\n      <svg\n         aria-hidden=\"true\"\n         className={ny(\n            'pointer-events-none absolute inset-0 size-full fill-gray-400/30 stroke-gray-400/30',\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <path\n                  d={`M.5 ${height}V.5H${width}`}\n                  fill=\"none\"\n                  strokeDasharray={strokeDasharray}\n               />\n            </pattern>\n         </defs>\n         <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n         {squares && (\n            <svg x={x} y={y} className=\"overflow-visible\">\n               {squares.map(([x, y]) => (\n                  <rect\n                     strokeWidth=\"0\"\n                     key={`${x}-${y}`}\n                     width={width - 1}\n                     height={height - 1}\n                     x={x * width + 1}\n                     y={y * height + 1}\n                  />\n               ))}\n            </svg>\n         )}\n      </svg>\n   )\n}\n\nexport default GridPattern\n",
-      "type": "registry:component",
+      "content": "import { useId } from \"react\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\n\ninterface GridPatternProps extends React.SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   squares?: Array<[x: number, y: number]>\n   strokeDasharray?: string\n   className?: string\n   [key: string]: unknown\n}\n\nexport function GridPattern({\n   width = 40,\n   height = 40,\n   x = -1,\n   y = -1,\n   strokeDasharray = \"0\",\n   squares,\n   className,\n   ...props\n}: GridPatternProps) {\n   const id = useId()\n\n   return (\n      <svg\n         aria-hidden=\"true\"\n         className={ny(\n            \"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30\",\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <path\n                  d={`M.5 ${height}V.5H${width}`}\n                  fill=\"none\"\n                  strokeDasharray={strokeDasharray}\n               />\n            </pattern>\n         </defs>\n         <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill={`url(#${id})`}\n         />\n         {squares && (\n            <svg x={x} y={y} className=\"overflow-visible\">\n               {squares.map(([x, y]) => (\n                  <rect\n                     strokeWidth=\"0\"\n                     key={`${x}-${y}`}\n                     width={width - 1}\n                     height={height - 1}\n                     x={x * width + 1}\n                     y={y * height + 1}\n                  />\n               ))}\n            </svg>\n         )}\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/hero-video-demo.json b/apps/web/public/r/styles/miami/hero-video-demo.json
index b27cad31..54e991c1 100644
--- a/apps/web/public/r/styles/miami/hero-video-demo.json
+++ b/apps/web/public/r/styles/miami/hero-video-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hero-video-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/hero-video-demo.tsx",
-      "content": "import { Button } from '~/components/ui/button'\nimport HeroVideo, { HeroVideoAction } from '~/registry/miami/ui/hero-video'\nimport { MagicCard, MagicContainer } from '~/registry/miami/ui/magic-card'\n\nfunction PlayButton() {\n   return (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 24 24\"\n         fill=\"currentColor\"\n         className=\"dark:text-white\"\n      >\n         <path\n            fillRule=\"evenodd\"\n            d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   )\n}\n\nexport default function HeroVideoDemo() {\n   return (\n      <div className=\"bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Hero Video\n         </span>\n\n         <MagicContainer>\n            <MagicCard className=\"min-h-[400px] [mask:linear-gradient(0deg,transparent_40%,#fff_100%)]\">\n               <HeroVideo\n                  title=\"Nyxb UI Demo\"\n                  image=\"https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200\"\n               >\n                  <HeroVideoAction>\n                     <Button className=\"size-20 rounded-full\" variant=\"outline\">\n                        <PlayButton />\n                     </Button>\n                  </HeroVideoAction>\n                  <video\n                     autoPlay\n                     className=\"rounded-xl dark:border\"\n                     playsInline\n                     src=\"https://cdn.nyxbui.design/globe.mp4\"\n                  />\n               </HeroVideo>\n            </MagicCard>\n         </MagicContainer>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/hero-video-demo.tsx",
+      "content": "import { Button } from \"~/components/ui/button\"\nimport HeroVideo, { HeroVideoAction } from \"~/registry/miami/ui/hero-video\"\nimport { MagicCard, MagicContainer } from \"~/registry/miami/ui/magic-card\"\n\nfunction PlayButton() {\n   return (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 24 24\"\n         fill=\"currentColor\"\n         className=\"dark:text-white\"\n      >\n         <path\n            fillRule=\"evenodd\"\n            d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   )\n}\n\nexport default function HeroVideoDemo() {\n   return (\n      <div className=\"bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Hero Video\n         </span>\n\n         <MagicContainer>\n            <MagicCard className=\"min-h-[400px] [mask:linear-gradient(0deg,transparent_40%,#fff_100%)]\">\n               <HeroVideo\n                  title=\"Nyxb UI Demo\"\n                  image=\"https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200\"\n               >\n                  <HeroVideoAction>\n                     <Button className=\"size-20 rounded-full\" variant=\"outline\">\n                        <PlayButton />\n                     </Button>\n                  </HeroVideoAction>\n                  <video\n                     autoPlay\n                     className=\"rounded-xl dark:border\"\n                     playsInline\n                     src=\"https://cdn.nyxbui.design/globe.mp4\"\n                  />\n               </HeroVideo>\n            </MagicCard>\n         </MagicContainer>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/hero-video-dialog-demo-top-in-bottom-out.json b/apps/web/public/r/styles/miami/hero-video-dialog-demo-top-in-bottom-out.json
index 9ffa2f9b..61fba1d4 100644
--- a/apps/web/public/r/styles/miami/hero-video-dialog-demo-top-in-bottom-out.json
+++ b/apps/web/public/r/styles/miami/hero-video-dialog-demo-top-in-bottom-out.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hero-video-dialog-demo-top-in-bottom-out",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/hero-video-dialog-demo-top-in-bottom-out.tsx",
-      "content": "import HeroVideoDialog from '~/registry/miami/ui/hero-video-dialog'\n\nexport default function HeroVideoDialogDemoTopInBottomOut() {\n   return (\n      <div className=\"relative\">\n         <HeroVideoDialog\n            className=\"block dark:hidden\"\n            animationStyle=\"top-in-bottom-out\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-light.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n         <HeroVideoDialog\n            className=\"hidden dark:block\"\n            animationStyle=\"top-in-bottom-out\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-dark.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/hero-video-dialog-demo-top-in-bottom-out.tsx",
+      "content": "import HeroVideoDialog from \"~/registry/miami/ui/hero-video-dialog\"\n\nexport default function HeroVideoDialogDemoTopInBottomOut() {\n   return (\n      <div className=\"relative\">\n         <HeroVideoDialog\n            className=\"block dark:hidden\"\n            animationStyle=\"top-in-bottom-out\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-light.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n         <HeroVideoDialog\n            className=\"hidden dark:block\"\n            animationStyle=\"top-in-bottom-out\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-dark.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/hero-video-dialog-demo.json b/apps/web/public/r/styles/miami/hero-video-dialog-demo.json
index 315aba9b..c96590c1 100644
--- a/apps/web/public/r/styles/miami/hero-video-dialog-demo.json
+++ b/apps/web/public/r/styles/miami/hero-video-dialog-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hero-video-dialog-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/hero-video-dialog-demo.tsx",
-      "content": "import HeroVideoDialog from '~/registry/miami/ui/hero-video-dialog'\n\nexport default function HeroVideoDialogDemo() {\n   return (\n      <div className=\"relative\">\n         <HeroVideoDialog\n            className=\"block dark:hidden\"\n            animationStyle=\"from-center\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-light.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n         <HeroVideoDialog\n            className=\"hidden dark:block\"\n            animationStyle=\"from-center\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-dark.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/hero-video-dialog-demo.tsx",
+      "content": "import HeroVideoDialog from \"~/registry/miami/ui/hero-video-dialog\"\n\nexport default function HeroVideoDialogDemo() {\n   return (\n      <div className=\"relative\">\n         <HeroVideoDialog\n            className=\"block dark:hidden\"\n            animationStyle=\"from-center\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-light.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n         <HeroVideoDialog\n            className=\"hidden dark:block\"\n            animationStyle=\"from-center\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-dark.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/hero-video-dialog.json b/apps/web/public/r/styles/miami/hero-video-dialog.json
index c93c78b1..70b36c54 100644
--- a/apps/web/public/r/styles/miami/hero-video-dialog.json
+++ b/apps/web/public/r/styles/miami/hero-video-dialog.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hero-video-dialog",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/hero-video-dialog.tsx",
-      "content": "'use client'\n\nimport { useState } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { Play, XIcon } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\ntype AnimationStyle =\n   | 'from-bottom'\n   | 'from-center'\n   | 'from-top'\n   | 'from-left'\n   | 'from-right'\n   | 'fade'\n   | 'top-in-bottom-out'\n   | 'left-in-right-out'\n\ninterface HeroVideoProps {\n   animationStyle?: AnimationStyle\n   videoSrc: string\n   thumbnailSrc: string\n   thumbnailAlt?: string\n   className?: string\n}\n\nconst animationVariants = {\n   'from-bottom': {\n      initial: { y: '100%', opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: '100%', opacity: 0 },\n   },\n   'from-center': {\n      initial: { scale: 0.5, opacity: 0 },\n      animate: { scale: 1, opacity: 1 },\n      exit: { scale: 0.5, opacity: 0 },\n   },\n   'from-top': {\n      initial: { y: '-100%', opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: '-100%', opacity: 0 },\n   },\n   'from-left': {\n      initial: { x: '-100%', opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: '-100%', opacity: 0 },\n   },\n   'from-right': {\n      initial: { x: '100%', opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: '100%', opacity: 0 },\n   },\n   'fade': {\n      initial: { opacity: 0 },\n      animate: { opacity: 1 },\n      exit: { opacity: 0 },\n   },\n   'top-in-bottom-out': {\n      initial: { y: '-100%', opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: '100%', opacity: 0 },\n   },\n   'left-in-right-out': {\n      initial: { x: '-100%', opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: '100%', opacity: 0 },\n   },\n}\n\nexport default function HeroVideoDialog({\n   animationStyle = 'from-center',\n   videoSrc,\n   thumbnailSrc,\n   thumbnailAlt = 'Video thumbnail',\n   className,\n}: HeroVideoProps) {\n   const [isVideoOpen, setIsVideoOpen] = useState(false)\n   const selectedAnimation = animationVariants[animationStyle]\n\n   return (\n      <div className={ny('relative', className)}>\n         <div\n            className=\"group relative cursor-pointer\"\n            onClick={() => setIsVideoOpen(true)}\n         >\n            <img\n               src={thumbnailSrc}\n               alt={thumbnailAlt}\n               width={1920}\n               height={1080}\n               className=\"w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]\"\n            />\n            <div className=\"absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100\">\n               <div className=\"bg-primary/10 flex size-28 items-center justify-center rounded-full backdrop-blur-md\">\n                  <div\n                     className=\"from-primary/30 to-primary relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]\"\n                  >\n                     <Play\n                        className=\"size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105\"\n                        style={{\n                           filter:\n                    'drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))',\n                        }}\n                     />\n                  </div>\n               </div>\n            </div>\n         </div>\n         <AnimatePresence>\n            {isVideoOpen && (\n               <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  onClick={() => setIsVideoOpen(false)}\n                  exit={{ opacity: 0 }}\n                  className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md\"\n               >\n                  <motion.div\n                     {...selectedAnimation}\n                     transition={{ type: 'spring', damping: 30, stiffness: 300 }}\n                     className=\"relative mx-4 aspect-video w-full max-w-4xl md:mx-0\"\n                  >\n                     <motion.button className=\"absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black\">\n                        <XIcon className=\"size-5\" />\n                     </motion.button>\n                     <div className=\"relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white\">\n                        <iframe\n                           src={videoSrc}\n                           className=\"size-full rounded-2xl\"\n                           allowFullScreen\n                           allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                        >\n                        </iframe>\n                     </div>\n                  </motion.div>\n               </motion.div>\n            )}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { Play, XIcon } from \"lucide-react\"\nimport { useState } from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ntype AnimationStyle =\n   | \"from-bottom\"\n   | \"from-center\"\n   | \"from-top\"\n   | \"from-left\"\n   | \"from-right\"\n   | \"fade\"\n   | \"top-in-bottom-out\"\n   | \"left-in-right-out\"\n\ninterface HeroVideoProps {\n   animationStyle?: AnimationStyle\n   videoSrc: string\n   thumbnailSrc: string\n   thumbnailAlt?: string\n   className?: string\n}\n\nconst animationVariants = {\n   \"from-bottom\": {\n      initial: { y: \"100%\", opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: \"100%\", opacity: 0 },\n   },\n   \"from-center\": {\n      initial: { scale: 0.5, opacity: 0 },\n      animate: { scale: 1, opacity: 1 },\n      exit: { scale: 0.5, opacity: 0 },\n   },\n   \"from-top\": {\n      initial: { y: \"-100%\", opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: \"-100%\", opacity: 0 },\n   },\n   \"from-left\": {\n      initial: { x: \"-100%\", opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: \"-100%\", opacity: 0 },\n   },\n   \"from-right\": {\n      initial: { x: \"100%\", opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: \"100%\", opacity: 0 },\n   },\n   fade: {\n      initial: { opacity: 0 },\n      animate: { opacity: 1 },\n      exit: { opacity: 0 },\n   },\n   \"top-in-bottom-out\": {\n      initial: { y: \"-100%\", opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: \"100%\", opacity: 0 },\n   },\n   \"left-in-right-out\": {\n      initial: { x: \"-100%\", opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: \"100%\", opacity: 0 },\n   },\n}\n\nexport default function HeroVideoDialog({\n   animationStyle = \"from-center\",\n   videoSrc,\n   thumbnailSrc,\n   thumbnailAlt = \"Video thumbnail\",\n   className,\n}: HeroVideoProps) {\n   const [isVideoOpen, setIsVideoOpen] = useState(false)\n   const selectedAnimation = animationVariants[animationStyle]\n\n   return (\n      <div className={ny(\"relative\", className)}>\n         <div\n            className=\"group relative cursor-pointer\"\n            onClick={() => setIsVideoOpen(true)}\n         >\n            <img\n               src={thumbnailSrc}\n               alt={thumbnailAlt}\n               width={1920}\n               height={1080}\n               className=\"w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]\"\n            />\n            <div className=\"absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100\">\n               <div className=\"bg-primary/10 flex size-28 items-center justify-center rounded-full backdrop-blur-md\">\n                  <div className=\"from-primary/30 to-primary relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]\">\n                     <Play\n                        className=\"size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105\"\n                        style={{\n                           filter:\n                              \"drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))\",\n                        }}\n                     />\n                  </div>\n               </div>\n            </div>\n         </div>\n         <AnimatePresence>\n            {isVideoOpen && (\n               <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  onClick={() => setIsVideoOpen(false)}\n                  exit={{ opacity: 0 }}\n                  className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md\"\n               >\n                  <motion.div\n                     {...selectedAnimation}\n                     transition={{\n                        type: \"spring\",\n                        damping: 30,\n                        stiffness: 300,\n                     }}\n                     className=\"relative mx-4 aspect-video w-full max-w-4xl md:mx-0\"\n                  >\n                     <motion.button className=\"absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black\">\n                        <XIcon className=\"size-5\" />\n                     </motion.button>\n                     <div className=\"relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white\">\n                        <iframe\n                           src={videoSrc}\n                           className=\"size-full rounded-2xl\"\n                           allowFullScreen\n                           allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                        ></iframe>\n                     </div>\n                  </motion.div>\n               </motion.div>\n            )}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/hero-video-youtube.json b/apps/web/public/r/styles/miami/hero-video-youtube.json
index f3eb175c..7ab3f2f9 100644
--- a/apps/web/public/r/styles/miami/hero-video-youtube.json
+++ b/apps/web/public/r/styles/miami/hero-video-youtube.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hero-video-youtube",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/hero-video-youtube.tsx",
-      "content": "import { Button } from '~/components/ui/button'\nimport HeroVideo, { HeroVideoAction } from '~/registry/miami/ui/hero-video'\nimport { MagicCard, MagicContainer } from '~/registry/miami/ui/magic-card'\n\nfunction PlayButton() {\n   return (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 24 24\"\n         fill=\"currentColor\"\n         className=\"dark:text-white\"\n      >\n         <path\n            fillRule=\"evenodd\"\n            d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   )\n}\n\nexport default function HeroVideoDemo() {\n   return (\n      <div className=\"bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Never gonna give you up\n         </span>\n         {/* Magic Card  */}\n         <MagicContainer className=\"relative\">\n            <MagicCard className=\"min-h-[400px] [mask:linear-gradient(0deg,transparent_20%,#fff_100%)]\">\n               <HeroVideo\n                  title=\"Never gonna give you up\"\n                  image=\"https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024\"\n               >\n                  <HeroVideoAction>\n                     <Button className=\"size-20 rounded-full\" variant=\"outline\">\n                        <PlayButton />\n                     </Button>\n                  </HeroVideoAction>\n                  <iframe\n                     height=\"500\"\n                     className=\"h-[500px] rounded-xl border\"\n                     src=\"https://www.youtube.com/embed/dQw4w9WgXcQ?si=FmFbhzaToJQ9iXN4\"\n                     title=\"YouTube video player\"\n                     allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                  />\n               </HeroVideo>\n            </MagicCard>\n         </MagicContainer>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/hero-video-youtube.tsx",
+      "content": "import { Button } from \"~/components/ui/button\"\nimport HeroVideo, { HeroVideoAction } from \"~/registry/miami/ui/hero-video\"\nimport { MagicCard, MagicContainer } from \"~/registry/miami/ui/magic-card\"\n\nfunction PlayButton() {\n   return (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 24 24\"\n         fill=\"currentColor\"\n         className=\"dark:text-white\"\n      >\n         <path\n            fillRule=\"evenodd\"\n            d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   )\n}\n\nexport default function HeroVideoDemo() {\n   return (\n      <div className=\"bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Never gonna give you up\n         </span>\n         {/* Magic Card  */}\n         <MagicContainer className=\"relative\">\n            <MagicCard className=\"min-h-[400px] [mask:linear-gradient(0deg,transparent_20%,#fff_100%)]\">\n               <HeroVideo\n                  title=\"Never gonna give you up\"\n                  image=\"https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024\"\n               >\n                  <HeroVideoAction>\n                     <Button className=\"size-20 rounded-full\" variant=\"outline\">\n                        <PlayButton />\n                     </Button>\n                  </HeroVideoAction>\n                  <iframe\n                     height=\"500\"\n                     className=\"h-[500px] rounded-xl border\"\n                     src=\"https://www.youtube.com/embed/dQw4w9WgXcQ?si=FmFbhzaToJQ9iXN4\"\n                     title=\"YouTube video player\"\n                     allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                  />\n               </HeroVideo>\n            </MagicCard>\n         </MagicContainer>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/hover-card-demo.json b/apps/web/public/r/styles/miami/hover-card-demo.json
index 9f962a07..aacd1f6c 100644
--- a/apps/web/public/r/styles/miami/hover-card-demo.json
+++ b/apps/web/public/r/styles/miami/hover-card-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hover-card-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "hover-card"
   ],
   "files": [
     {
-      "path": "example/hover-card-demo.tsx",
-      "content": "import { CalendarIcon } from '@radix-ui/react-icons'\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/miami/ui/avatar'\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   HoverCard,\n   HoverCardContent,\n   HoverCardTrigger,\n} from '~/registry/miami/ui/hover-card'\n\nexport default function HoverCardDemo() {\n   return (\n      <HoverCard>\n         <HoverCardTrigger asChild>\n            <Button variant=\"link\">@nextjs</Button>\n         </HoverCardTrigger>\n         <HoverCardContent className=\"w-80\">\n            <div className=\"flex justify-between space-x-4\">\n               <Avatar>\n                  <AvatarImage src=\"https://github.com/vercel.png\" />\n                  <AvatarFallback>VC</AvatarFallback>\n               </Avatar>\n               <div className=\"space-y-1\">\n                  <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n                  <p className=\"text-sm\">\n                     The React Framework – created and maintained by @vercel.\n                  </p>\n                  <div className=\"flex items-center pt-2\">\n                     <CalendarIcon className=\"mr-2 size-4 opacity-70\" />\n                     {' '}\n                     <span className=\"text-muted-foreground text-xs\">\n                        Joined December 2021\n                     </span>\n                  </div>\n               </div>\n            </div>\n         </HoverCardContent>\n      </HoverCard>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"@radix-ui/react-icons\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/miami/ui/avatar\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   HoverCard,\n   HoverCardContent,\n   HoverCardTrigger,\n} from \"~/registry/miami/ui/hover-card\"\n\nexport default function HoverCardDemo() {\n   return (\n      <HoverCard>\n         <HoverCardTrigger asChild>\n            <Button variant=\"link\">@nextjs</Button>\n         </HoverCardTrigger>\n         <HoverCardContent className=\"w-80\">\n            <div className=\"flex justify-between space-x-4\">\n               <Avatar>\n                  <AvatarImage src=\"https://github.com/vercel.png\" />\n                  <AvatarFallback>VC</AvatarFallback>\n               </Avatar>\n               <div className=\"space-y-1\">\n                  <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n                  <p className=\"text-sm\">\n                     The React Framework – created and maintained by @vercel.\n                  </p>\n                  <div className=\"flex items-center pt-2\">\n                     <CalendarIcon className=\"mr-2 size-4 opacity-70\" />{\" \"}\n                     <span className=\"text-muted-foreground text-xs\">\n                        Joined December 2021\n                     </span>\n                  </div>\n               </div>\n            </div>\n         </HoverCardContent>\n      </HoverCard>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/hover-card.json b/apps/web/public/r/styles/miami/hover-card.json
index 3ba33093..8200105f 100644
--- a/apps/web/public/r/styles/miami/hover-card.json
+++ b/apps/web/public/r/styles/miami/hover-card.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hover-card",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-hover-card"
   ],
   "files": [
     {
       "path": "ui/hover-card.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as HoverCardPrimitive from '@radix-ui/react-hover-card'\n\nimport { ny } from '~/lib/utils'\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n   React.ElementRef<typeof HoverCardPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (\n   <HoverCardPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={ny(\n         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none',\n         className,\n      )}\n      {...props}\n   />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n   React.ElementRef<typeof HoverCardPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n   <HoverCardPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={ny(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none\",\n         className,\n      )}\n      {...props}\n   />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/hyper-text-demo.json b/apps/web/public/r/styles/miami/hyper-text-demo.json
index d19344a5..a856a2bf 100644
--- a/apps/web/public/r/styles/miami/hyper-text-demo.json
+++ b/apps/web/public/r/styles/miami/hyper-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hyper-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/hyper-text-demo.tsx",
-      "content": "import HyperText from '~/registry/miami/ui/hyper-text'\n\nexport default function HyperTextDemo() {\n   return (\n      <HyperText\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         text=\"Hyper Text\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/hyper-text-demo.tsx",
+      "content": "import HyperText from \"~/registry/miami/ui/hyper-text\"\n\nexport default function HyperTextDemo() {\n   return (\n      <HyperText\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         text=\"Hyper Text\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/hyper-text.json b/apps/web/public/r/styles/miami/hyper-text.json
index ef635ab2..365a6f6e 100644
--- a/apps/web/public/r/styles/miami/hyper-text.json
+++ b/apps/web/public/r/styles/miami/hyper-text.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "hyper-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/hyper-text.tsx",
-      "content": "'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport type { Variants } from 'framer-motion'\nimport { AnimatePresence, motion } from 'framer-motion'\n\nimport { ny } from '~/lib/utils'\n\ninterface HyperTextProps {\n   text: string\n   duration?: number\n   framerProps?: Variants\n   className?: string\n   animateOnLoad?: boolean\n}\n\nconst alphabets = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')\n\nconst getRandomInt = (max: number) => Math.floor(Math.random() * max)\n\nexport default function HyperText({\n   text,\n   duration = 800,\n   framerProps = {\n      initial: { opacity: 0, y: -10 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 3 },\n   },\n   className,\n   animateOnLoad = true,\n}: HyperTextProps) {\n   const [displayText, setDisplayText] = useState(text.split(''))\n   const [trigger, setTrigger] = useState(false)\n   const interations = useRef(0)\n   const isFirstRender = useRef(true)\n\n   const triggerAnimation = () => {\n      interations.current = 0\n      setTrigger(true)\n   }\n\n   useEffect(() => {\n      const interval = setInterval(\n         () => {\n            if (!animateOnLoad && isFirstRender.current) {\n               clearInterval(interval)\n               isFirstRender.current = false\n               return\n            }\n            if (interations.current < text.length) {\n               setDisplayText(t =>\n                  t.map((l, i) =>\n                     l === ' '\n                        ? l\n                        : i <= interations.current\n                           ? text[i]\n                           : alphabets[getRandomInt(26)],\n                  ),\n               )\n               interations.current = interations.current + 0.1\n            }\n            else {\n               setTrigger(false)\n               clearInterval(interval)\n            }\n         },\n         duration / (text.length * 10),\n      )\n      // Clean up interval on unmount\n      return () => clearInterval(interval)\n   }, [text, duration, trigger, animateOnLoad])\n\n   return (\n      <div\n         className=\"flex scale-100 cursor-default overflow-hidden py-2\"\n         onMouseEnter={triggerAnimation}\n      >\n         <AnimatePresence mode=\"wait\">\n            {displayText.map((letter, i) => (\n               <motion.h1\n                  key={i}\n                  className={ny('font-mono', letter === ' ' ? 'w-3' : '', className)}\n                  {...framerProps}\n               >\n                  {letter.toUpperCase()}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { useEffect, useRef, useState } from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ninterface HyperTextProps {\n   text: string\n   duration?: number\n   framerProps?: Variants\n   className?: string\n   animateOnLoad?: boolean\n}\n\nconst alphabets = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\")\n\nconst getRandomInt = (max: number) => Math.floor(Math.random() * max)\n\nexport default function HyperText({\n   text,\n   duration = 800,\n   framerProps = {\n      initial: { opacity: 0, y: -10 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 3 },\n   },\n   className,\n   animateOnLoad = true,\n}: HyperTextProps) {\n   const [displayText, setDisplayText] = useState(text.split(\"\"))\n   const [trigger, setTrigger] = useState(false)\n   const interations = useRef(0)\n   const isFirstRender = useRef(true)\n\n   const triggerAnimation = () => {\n      interations.current = 0\n      setTrigger(true)\n   }\n\n   useEffect(() => {\n      const interval = setInterval(\n         () => {\n            if (!animateOnLoad && isFirstRender.current) {\n               clearInterval(interval)\n               isFirstRender.current = false\n               return\n            }\n            if (interations.current < text.length) {\n               setDisplayText((t) =>\n                  t.map((l, i) =>\n                     l === \" \"\n                        ? l\n                        : i <= interations.current\n                          ? text[i]\n                          : alphabets[getRandomInt(26)],\n                  ),\n               )\n               interations.current = interations.current + 0.1\n            } else {\n               setTrigger(false)\n               clearInterval(interval)\n            }\n         },\n         duration / (text.length * 10),\n      )\n      // Clean up interval on unmount\n      return () => clearInterval(interval)\n   }, [text, duration, trigger, animateOnLoad])\n\n   return (\n      <div\n         className=\"flex scale-100 cursor-default overflow-hidden py-2\"\n         onMouseEnter={triggerAnimation}\n      >\n         <AnimatePresence mode=\"wait\">\n            {displayText.map((letter, i) => (\n               <motion.h1\n                  key={i}\n                  className={ny(\n                     \"font-mono\",\n                     letter === \" \" ? \"w-3\" : \"\",\n                     className,\n                  )}\n                  {...framerProps}\n               >\n                  {letter.toUpperCase()}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/icon-cloud-demo.json b/apps/web/public/r/styles/miami/icon-cloud-demo.json
index 04a2baad..fa0a9b03 100644
--- a/apps/web/public/r/styles/miami/icon-cloud-demo.json
+++ b/apps/web/public/r/styles/miami/icon-cloud-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "icon-cloud-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/icon-cloud-demo.tsx",
-      "content": "import IconCloud from '~/registry/miami/ui/icon-cloud'\n\nconst slugs = [\n   'typescript',\n   'javascript',\n   'dart',\n   'java',\n   'react',\n   'flutter',\n   'android',\n   'html5',\n   'css3',\n   'nodedotjs',\n   'express',\n   'nextdotjs',\n   'prisma',\n   'amazonaws',\n   'postgresql',\n   'firebase',\n   'nginx',\n   'vercel',\n   'testinglibrary',\n   'jest',\n   'cypress',\n   'docker',\n   'git',\n   'jira',\n   'github',\n   'gitlab',\n   'visualstudiocode',\n   'androidstudio',\n   'sonarqube',\n   'figma',\n]\n\nexport default function IconCloudDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-20 pb-20 pt-8 \">\n         <IconCloud iconSlugs={slugs} />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/icon-cloud-demo.tsx",
+      "content": "import IconCloud from \"~/registry/miami/ui/icon-cloud\"\n\nconst slugs = [\n   \"typescript\",\n   \"javascript\",\n   \"dart\",\n   \"java\",\n   \"react\",\n   \"flutter\",\n   \"android\",\n   \"html5\",\n   \"css3\",\n   \"nodedotjs\",\n   \"express\",\n   \"nextdotjs\",\n   \"prisma\",\n   \"amazonaws\",\n   \"postgresql\",\n   \"firebase\",\n   \"nginx\",\n   \"vercel\",\n   \"testinglibrary\",\n   \"jest\",\n   \"cypress\",\n   \"docker\",\n   \"git\",\n   \"jira\",\n   \"github\",\n   \"gitlab\",\n   \"visualstudiocode\",\n   \"androidstudio\",\n   \"sonarqube\",\n   \"figma\",\n]\n\nexport default function IconCloudDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-20 pb-20 pt-8 \">\n         <IconCloud iconSlugs={slugs} />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/icon-cloud.json b/apps/web/public/r/styles/miami/icon-cloud.json
index ee0b879c..240e0d52 100644
--- a/apps/web/public/r/styles/miami/icon-cloud.json
+++ b/apps/web/public/r/styles/miami/icon-cloud.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "icon-cloud",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "next-themes",
     "react-icon-cloud"
@@ -8,8 +10,8 @@
   "files": [
     {
       "path": "ui/icon-cloud.tsx",
-      "content": "'use client'\n\nimport { useTheme } from 'next-themes'\nimport { useEffect, useMemo, useState } from 'react'\nimport type { ICloud, SimpleIcon } from 'react-icon-cloud'\nimport { Cloud, fetchSimpleIcons, renderSimpleIcon } from 'react-icon-cloud'\n\nexport const cloudProps: Omit<ICloud, 'children'> = {\n   containerProps: {\n      style: {\n         display: 'flex',\n         justifyContent: 'center',\n         alignItems: 'center',\n         width: '100%',\n         paddingTop: 40,\n      },\n   },\n   options: {\n      reverse: true,\n      depth: 1,\n      wheelZoom: false,\n      imageScale: 2,\n      activeCursor: 'default',\n      tooltip: 'native',\n      initial: [0.1, -0.1],\n      clickToFront: 500,\n      tooltipDelay: 0,\n      outlineColour: '#0000',\n      maxSpeed: 0.04,\n      minSpeed: 0.02,\n      // dragControl: false,\n   },\n}\n\nexport function renderCustomIcon(icon: SimpleIcon, theme: string) {\n   const bgHex = theme === 'light' ? '#f3f2ef' : '#080510'\n   const fallbackHex = theme === 'light' ? '#6e6e73' : '#ffffff'\n   const minContrastRatio = theme === 'dark' ? 2 : 1.2\n\n   return renderSimpleIcon({\n      icon,\n      bgHex,\n      fallbackHex,\n      minContrastRatio,\n      size: 42,\n      aProps: {\n         href: undefined,\n         target: undefined,\n         rel: undefined,\n         onClick: (e: any) => e.preventDefault(),\n      },\n   })\n}\n\nexport interface DynamicCloudProps {\n   iconSlugs: string[]\n}\n\ntype IconData = Awaited<ReturnType<typeof fetchSimpleIcons>>\n\nexport default function IconCloud({ iconSlugs }: DynamicCloudProps) {\n   const [data, setData] = useState<IconData | null>(null)\n   const { theme } = useTheme()\n\n   useEffect(() => {\n      fetchSimpleIcons({ slugs: iconSlugs }).then(setData)\n   }, [iconSlugs])\n\n   const renderedIcons = useMemo(() => {\n      if (!data)\n         return null\n\n      return Object.values(data.simpleIcons).map(icon =>\n         renderCustomIcon(icon, theme || 'light'),\n      )\n   }, [data, theme])\n\n   return (\n   // @ts-expect-error is fine\n      <Cloud {...cloudProps}>\n         <>{renderedIcons}</>\n      </Cloud>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport type { ICloud, SimpleIcon } from \"react-icon-cloud\"\nimport { Cloud, fetchSimpleIcons, renderSimpleIcon } from \"react-icon-cloud\"\n\nexport const cloudProps: Omit<ICloud, \"children\"> = {\n   containerProps: {\n      style: {\n         display: \"flex\",\n         justifyContent: \"center\",\n         alignItems: \"center\",\n         width: \"100%\",\n         paddingTop: 40,\n      },\n   },\n   options: {\n      reverse: true,\n      depth: 1,\n      wheelZoom: false,\n      imageScale: 2,\n      activeCursor: \"default\",\n      tooltip: \"native\",\n      initial: [0.1, -0.1],\n      clickToFront: 500,\n      tooltipDelay: 0,\n      outlineColour: \"#0000\",\n      maxSpeed: 0.04,\n      minSpeed: 0.02,\n      // dragControl: false,\n   },\n}\n\nexport function renderCustomIcon(icon: SimpleIcon, theme: string) {\n   const bgHex = theme === \"light\" ? \"#f3f2ef\" : \"#080510\"\n   const fallbackHex = theme === \"light\" ? \"#6e6e73\" : \"#ffffff\"\n   const minContrastRatio = theme === \"dark\" ? 2 : 1.2\n\n   return renderSimpleIcon({\n      icon,\n      bgHex,\n      fallbackHex,\n      minContrastRatio,\n      size: 42,\n      aProps: {\n         href: undefined,\n         target: undefined,\n         rel: undefined,\n         onClick: (e: any) => e.preventDefault(),\n      },\n   })\n}\n\nexport interface DynamicCloudProps {\n   iconSlugs: string[]\n}\n\ntype IconData = Awaited<ReturnType<typeof fetchSimpleIcons>>\n\nexport default function IconCloud({ iconSlugs }: DynamicCloudProps) {\n   const [data, setData] = useState<IconData | null>(null)\n   const { theme } = useTheme()\n\n   useEffect(() => {\n      fetchSimpleIcons({ slugs: iconSlugs }).then(setData)\n   }, [iconSlugs])\n\n   const renderedIcons = useMemo(() => {\n      if (!data) return null\n\n      return Object.values(data.simpleIcons).map((icon) =>\n         renderCustomIcon(icon, theme || \"light\"),\n      )\n   }, [data, theme])\n\n   return (\n      // @ts-expect-error is fine\n      <Cloud {...cloudProps}>\n         <>{renderedIcons}</>\n      </Cloud>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-demo.json b/apps/web/public/r/styles/miami/input-demo.json
index ca65e2c0..b475692e 100644
--- a/apps/web/public/r/styles/miami/input-demo.json
+++ b/apps/web/public/r/styles/miami/input-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input"
   ],
   "files": [
     {
-      "path": "example/input-demo.tsx",
-      "content": "import { Input } from '~/registry/miami/ui/input'\n\nexport default function InputDemo() {\n   return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-demo.tsx",
+      "content": "import { Input } from \"~/registry/miami/ui/input\"\n\nexport default function InputDemo() {\n   return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-disabled.json b/apps/web/public/r/styles/miami/input-disabled.json
index 1887980f..d4a81ea7 100644
--- a/apps/web/public/r/styles/miami/input-disabled.json
+++ b/apps/web/public/r/styles/miami/input-disabled.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input"
   ],
   "files": [
     {
-      "path": "example/input-disabled.tsx",
-      "content": "import { Input } from '~/registry/miami/ui/input'\n\nexport default function InputDisabled() {\n   return <Input disabled type=\"email\" placeholder=\"Email\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-disabled.tsx",
+      "content": "import { Input } from \"~/registry/miami/ui/input\"\n\nexport default function InputDisabled() {\n   return <Input disabled type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-file.json b/apps/web/public/r/styles/miami/input-file.json
index cb0c294f..f9736e87 100644
--- a/apps/web/public/r/styles/miami/input-file.json
+++ b/apps/web/public/r/styles/miami/input-file.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-file",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input"
   ],
   "files": [
     {
-      "path": "example/input-file.tsx",
-      "content": "import { Input } from '~/registry/miami/ui/input'\nimport { Label } from '~/registry/miami/ui/label'\n\nexport default function InputFile() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"picture\">Picture</Label>\n         <Input id=\"picture\" type=\"file\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-file.tsx",
+      "content": "import { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport default function InputFile() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"picture\">Picture</Label>\n         <Input id=\"picture\" type=\"file\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-form.json b/apps/web/public/r/styles/miami/input-form.json
index 6551ccaf..ea4a9f48 100644
--- a/apps/web/public/r/styles/miami/input-form.json
+++ b/apps/web/public/r/styles/miami/input-form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input",
     "button",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/miami/ui/form'\nimport { Input } from '~/registry/miami/ui/input'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst FormSchema = z.object({\n   username: z.string().min(2, {\n      message: 'Username must be at least 2 characters.',\n   }),\n})\n\nexport default function InputForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         username: '',\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"username\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Username</FormLabel>\n                     <FormControl>\n                        <Input placeholder=\"nyxb\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your public display name.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/miami/ui/form\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst FormSchema = z.object({\n   username: z.string().min(2, {\n      message: \"Username must be at least 2 characters.\",\n   }),\n})\n\nexport default function InputForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         username: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"username\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Username</FormLabel>\n                     <FormControl>\n                        <Input placeholder=\"nyxb\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your public display name.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-otp-controlled.json b/apps/web/public/r/styles/miami/input-otp-controlled.json
index b6a203df..bad34221 100644
--- a/apps/web/public/r/styles/miami/input-otp-controlled.json
+++ b/apps/web/public/r/styles/miami/input-otp-controlled.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp-controlled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input-otp"
   ],
   "files": [
     {
-      "path": "example/input-otp-controlled.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from '~/registry/miami/ui/input-otp'\n\nexport default function InputOTPControlled() {\n   const [value, setValue] = React.useState('')\n\n   return (\n      <div className=\"space-y-2\">\n         <InputOTP\n            maxLength={6}\n            value={value}\n            onChange={value => setValue(value)}\n         >\n            <InputOTPGroup>\n               <InputOTPSlot index={0} />\n               <InputOTPSlot index={1} />\n               <InputOTPSlot index={2} />\n               <InputOTPSlot index={3} />\n               <InputOTPSlot index={4} />\n               <InputOTPSlot index={5} />\n            </InputOTPGroup>\n         </InputOTP>\n         <div className=\"text-center text-sm\">\n            {value === ''\n               ? (\n                     <>Enter your one-time password.</>\n                  )\n               : (\n                     <>\n                        You entered:\n                        {value}\n                     </>\n                  )}\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-otp-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from \"~/registry/miami/ui/input-otp\"\n\nexport default function InputOTPControlled() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <div className=\"space-y-2\">\n         <InputOTP\n            maxLength={6}\n            value={value}\n            onChange={(value) => setValue(value)}\n         >\n            <InputOTPGroup>\n               <InputOTPSlot index={0} />\n               <InputOTPSlot index={1} />\n               <InputOTPSlot index={2} />\n               <InputOTPSlot index={3} />\n               <InputOTPSlot index={4} />\n               <InputOTPSlot index={5} />\n            </InputOTPGroup>\n         </InputOTP>\n         <div className=\"text-center text-sm\">\n            {value === \"\" ? (\n               <>Enter your one-time password.</>\n            ) : (\n               <>\n                  You entered:\n                  {value}\n               </>\n            )}\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-otp-demo.json b/apps/web/public/r/styles/miami/input-otp-demo.json
index 9f3e99f2..1f9e5983 100644
--- a/apps/web/public/r/styles/miami/input-otp-demo.json
+++ b/apps/web/public/r/styles/miami/input-otp-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input-otp"
   ],
   "files": [
     {
-      "path": "example/input-otp-demo.tsx",
-      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from '~/registry/miami/ui/input-otp'\n\nexport default function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-otp-demo.tsx",
+      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"~/registry/miami/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-otp-disabled.json b/apps/web/public/r/styles/miami/input-otp-disabled.json
index 0008a175..70594be1 100644
--- a/apps/web/public/r/styles/miami/input-otp-disabled.json
+++ b/apps/web/public/r/styles/miami/input-otp-disabled.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input-otp",
     "form"
   ],
   "files": [
     {
-      "path": "example/input-otp-disabled.tsx",
-      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from '~/registry/default/ui/input-otp'\n\nexport default function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6} disabled>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-otp-disabled.tsx",
+      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"~/registry/default/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6} disabled>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-otp-form.json b/apps/web/public/r/styles/miami/input-otp-form.json
index c8cec5f0..a9188234 100644
--- a/apps/web/public/r/styles/miami/input-otp-form.json
+++ b/apps/web/public/r/styles/miami/input-otp-form.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input-otp",
     "form"
   ],
   "files": [
     {
-      "path": "example/input-otp-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/miami/ui/form'\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from '~/registry/miami/ui/input-otp'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst FormSchema = z.object({\n   pin: z.string().min(6, {\n      message: 'Your one-time password must be 6 characters.',\n   }),\n})\n\nexport default function InputOTPForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         pin: '',\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"pin\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>One-Time Password</FormLabel>\n                     <FormControl>\n                        <InputOTP maxLength={6} {...field}>\n                           <InputOTPGroup>\n                              <InputOTPSlot index={0} />\n                              <InputOTPSlot index={1} />\n                              <InputOTPSlot index={2} />\n                              <InputOTPSlot index={3} />\n                              <InputOTPSlot index={4} />\n                              <InputOTPSlot index={5} />\n                           </InputOTPGroup>\n                        </InputOTP>\n                     </FormControl>\n                     <FormDescription>\n                        Please enter the one-time password sent to your phone.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-otp-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/miami/ui/form\"\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from \"~/registry/miami/ui/input-otp\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst FormSchema = z.object({\n   pin: z.string().min(6, {\n      message: \"Your one-time password must be 6 characters.\",\n   }),\n})\n\nexport default function InputOTPForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         pin: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"pin\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>One-Time Password</FormLabel>\n                     <FormControl>\n                        <InputOTP maxLength={6} {...field}>\n                           <InputOTPGroup>\n                              <InputOTPSlot index={0} />\n                              <InputOTPSlot index={1} />\n                              <InputOTPSlot index={2} />\n                              <InputOTPSlot index={3} />\n                              <InputOTPSlot index={4} />\n                              <InputOTPSlot index={5} />\n                           </InputOTPGroup>\n                        </InputOTP>\n                     </FormControl>\n                     <FormDescription>\n                        Please enter the one-time password sent to your phone.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-otp-pattern.json b/apps/web/public/r/styles/miami/input-otp-pattern.json
index a89132b4..eaf7c86c 100644
--- a/apps/web/public/r/styles/miami/input-otp-pattern.json
+++ b/apps/web/public/r/styles/miami/input-otp-pattern.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp-pattern",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input-otp"
   ],
   "files": [
     {
-      "path": "example/input-otp-pattern.tsx",
-      "content": "import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from '~/registry/miami/ui/input-otp'\n\nexport default function InputOTPPattern() {\n   return (\n      <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS} inputMode=\"text\" spellCheck=\"false\">\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-otp-pattern.tsx",
+      "content": "import { REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from \"~/registry/miami/ui/input-otp\"\n\nexport default function InputOTPPattern() {\n   return (\n      <InputOTP\n         maxLength={6}\n         pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n         inputMode=\"text\"\n         spellCheck=\"false\"\n      >\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-otp-separator.json b/apps/web/public/r/styles/miami/input-otp-separator.json
index c2e0ec79..8cec6d11 100644
--- a/apps/web/public/r/styles/miami/input-otp-separator.json
+++ b/apps/web/public/r/styles/miami/input-otp-separator.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp-separator",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input-otp"
   ],
   "files": [
     {
-      "path": "example/input-otp-separator.tsx",
-      "content": "import React from 'react'\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from '~/registry/miami/ui/input-otp'\n\nexport default function InputOTPWithSeparator() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-otp-separator.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"~/registry/miami/ui/input-otp\"\n\nexport default function InputOTPWithSeparator() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-otp.json b/apps/web/public/r/styles/miami/input-otp.json
index 6b99bd18..67fcbd86 100644
--- a/apps/web/public/r/styles/miami/input-otp.json
+++ b/apps/web/public/r/styles/miami/input-otp.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-otp",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "input-otp"
   ],
   "files": [
     {
       "path": "ui/input-otp.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { DashIcon } from '@radix-ui/react-icons'\nimport { OTPInput, OTPInputContext } from 'input-otp'\n\nimport { ny } from '~/lib/utils'\n\nconst InputOTP = React.forwardRef<\n   React.ElementRef<typeof OTPInput>,\n   React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n   <OTPInput\n      ref={ref}\n      containerClassName={ny(\n         'flex items-center gap-2 has-[:disabled]:opacity-50',\n         containerClassName,\n      )}\n      className={ny('disabled:cursor-not-allowed', className)}\n      {...props}\n   />\n))\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n   React.ElementRef<'div'>,\n   React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n   <div ref={ref} className={ny('flex items-center', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n   React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n   const inputOTPContext = React.useContext(OTPInputContext)\n   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'border-input relative flex size-9 items-center justify-center border-y border-r text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',\n            isActive && 'ring-ring z-10 ring-1',\n            className,\n         )}\n         {...props}\n      >\n         {char}\n         {hasFakeCaret && (\n            <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n               <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n            </div>\n         )}\n      </div>\n   )\n})\nInputOTPSlot.displayName = 'InputOTPSlot'\n\nconst InputOTPSeparator = React.forwardRef<\n   React.ElementRef<'div'>,\n   React.ComponentPropsWithoutRef<'div'>\n>(({ ...props }, ref) => (\n   <div ref={ref} role=\"separator\" {...props}>\n      <DashIcon />\n   </div>\n))\nInputOTPSeparator.displayName = 'InputOTPSeparator'\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { DashIcon } from \"@radix-ui/react-icons\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n   React.ElementRef<typeof OTPInput>,\n   React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n   <OTPInput\n      ref={ref}\n      containerClassName={ny(\n         \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n         containerClassName,\n      )}\n      className={ny(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n   />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n   React.ElementRef<\"div\">,\n   React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n   <div ref={ref} className={ny(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n   React.ElementRef<\"div\">,\n   React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n   const inputOTPContext = React.useContext(OTPInputContext)\n   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"border-input relative flex size-9 items-center justify-center border-y border-r text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n            isActive && \"ring-ring z-10 ring-1\",\n            className,\n         )}\n         {...props}\n      >\n         {char}\n         {hasFakeCaret && (\n            <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n               <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n            </div>\n         )}\n      </div>\n   )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n   React.ElementRef<\"div\">,\n   React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n   <div ref={ref} role=\"separator\" {...props}>\n      <DashIcon />\n   </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-phone-default.json b/apps/web/public/r/styles/miami/input-phone-default.json
index 2e0154d9..f19dcdc9 100644
--- a/apps/web/public/r/styles/miami/input-phone-default.json
+++ b/apps/web/public/r/styles/miami/input-phone-default.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone-default",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "input",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-phone-default.tsx",
-      "content": "import * as React from 'react'\n\nimport { InputPhone } from '~/registry/miami/ui/input-phone'\n\nexport default function InputPhoneDefault() {\n   const [value, setValue] = React.useState('')\n\n   return <InputPhone value={value} onChange={setValue} defaultCountry=\"US\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-phone-default.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"~/registry/miami/ui/input-phone\"\n\nexport default function InputPhoneDefault() {\n   const [value, setValue] = React.useState(\"\")\n\n   return <InputPhone value={value} onChange={setValue} defaultCountry=\"US\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-phone-demo.json b/apps/web/public/r/styles/miami/input-phone-demo.json
index 0aa1aa2c..b1541089 100644
--- a/apps/web/public/r/styles/miami/input-phone-demo.json
+++ b/apps/web/public/r/styles/miami/input-phone-demo.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "input",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-phone-demo.tsx",
-      "content": "import * as React from 'react'\n\nimport { InputPhone } from '~/registry/miami/ui/input-phone'\n\nexport default function InputPhoneDemo() {\n   const [value, setValue] = React.useState('')\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         placeholder=\"Enter a phone number\"\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-phone-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"~/registry/miami/ui/input-phone\"\n\nexport default function InputPhoneDemo() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         placeholder=\"Enter a phone number\"\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-phone-form.json b/apps/web/public/r/styles/miami/input-phone-form.json
index 9ab54589..11e9579b 100644
--- a/apps/web/public/r/styles/miami/input-phone-form.json
+++ b/apps/web/public/r/styles/miami/input-phone-form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "input",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-phone-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { isValidPhoneNumber } from 'react-phone-number-input'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/miami/ui/form'\nimport { InputPhone } from '~/registry/miami/ui/input-phone'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst FormSchema = z.object({\n   phone: z\n      .string()\n      .refine(isValidPhoneNumber, { message: 'Invalid phone number' }),\n})\n\nexport default function InputPhoneForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         phone: '',\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"phone\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Phone Number</FormLabel>\n                     <FormControl>\n                        <InputPhone placeholder=\"Enter a phone number\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        Please enter a valid phone number.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-phone-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { isValidPhoneNumber } from \"react-phone-number-input\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/miami/ui/form\"\nimport { InputPhone } from \"~/registry/miami/ui/input-phone\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst FormSchema = z.object({\n   phone: z\n      .string()\n      .refine(isValidPhoneNumber, { message: \"Invalid phone number\" }),\n})\n\nexport default function InputPhoneForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         phone: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"phone\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Phone Number</FormLabel>\n                     <FormControl>\n                        <InputPhone\n                           placeholder=\"Enter a phone number\"\n                           {...field}\n                        />\n                     </FormControl>\n                     <FormDescription>\n                        Please enter a valid phone number.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-phone-initial.json b/apps/web/public/r/styles/miami/input-phone-initial.json
index 7a66f6fd..bbaebd1d 100644
--- a/apps/web/public/r/styles/miami/input-phone-initial.json
+++ b/apps/web/public/r/styles/miami/input-phone-initial.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone-initial",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "input",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-phone-initial.tsx",
-      "content": "import * as React from 'react'\n\nimport { InputPhone } from '~/registry/miami/ui/input-phone'\n\nexport default function InputPhoneInitial() {\n   const [value, setValue] = React.useState('')\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         initialValueFormat=\"national\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-phone-initial.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"~/registry/miami/ui/input-phone\"\n\nexport default function InputPhoneInitial() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         initialValueFormat=\"national\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-phone-international.json b/apps/web/public/r/styles/miami/input-phone-international.json
index 33de026e..fa3dce29 100644
--- a/apps/web/public/r/styles/miami/input-phone-international.json
+++ b/apps/web/public/r/styles/miami/input-phone-international.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone-international",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "input",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-phone-international.tsx",
-      "content": "import * as React from 'react'\n\nimport { InputPhone } from '~/registry/miami/ui/input-phone'\n\nexport default function InputPhoneInternational() {\n   const [value, setValue] = React.useState('')\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         international\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-phone-international.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"~/registry/miami/ui/input-phone\"\n\nexport default function InputPhoneInternational() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         international\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-phone-national.json b/apps/web/public/r/styles/miami/input-phone-national.json
index 33af0b44..05ae90c5 100644
--- a/apps/web/public/r/styles/miami/input-phone-national.json
+++ b/apps/web/public/r/styles/miami/input-phone-national.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone-national",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button",
     "input",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-phone-national.tsx",
-      "content": "import * as React from 'react'\n\nimport { InputPhone } from '~/registry/miami/ui/input-phone'\n\nexport default function InputPhoneNational() {\n   const [value, setValue] = React.useState('')\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         international={false}\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-phone-national.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"~/registry/miami/ui/input-phone\"\n\nexport default function InputPhoneNational() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         international={false}\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-phone.json b/apps/web/public/r/styles/miami/input-phone.json
index d3b66c8d..f61c1431 100644
--- a/apps/web/public/r/styles/miami/input-phone.json
+++ b/apps/web/public/r/styles/miami/input-phone.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-phone",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "react-phone-number-input",
     "@radix-ui/react-icons"
@@ -14,8 +16,8 @@
   "files": [
     {
       "path": "ui/input-phone.tsx",
-      "content": "import * as React from 'react'\nimport { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons'\nimport * as RPNInput from 'react-phone-number-input'\nimport flags from 'react-phone-number-input/flags'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from '~/registry/miami/ui/command'\nimport type { InputProps } from '~/registry/miami/ui/input'\nimport { Input } from '~/registry/miami/ui/input'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\n\ntype InputPhoneProps = Omit<\n   React.InputHTMLAttributes<HTMLInputElement>,\n  'onChange' | 'value'\n> &\nOmit<RPNInput.Props<typeof RPNInput.default>, 'onChange'> & {\n   onChange?: (value: RPNInput.Value) => void\n}\n\nconst InputPhone: React.ForwardRefExoticComponent<InputPhoneProps>\n   = React.forwardRef<React.ElementRef<typeof RPNInput.default>, InputPhoneProps>(\n      ({ className, onChange, ...props }, ref) => (\n         <RPNInput.default\n            ref={ref}\n            className={ny('flex', className)}\n            flagComponent={FlagComponent}\n            countrySelectComponent={CountrySelect}\n            inputComponent={InputComponent}\n            /**\n             * Handles the onChange event.\n             *\n             * react-phone-number-input might trigger the onChange event as undefined\n             * when a valid phone number is not entered. To prevent this,\n             * the value is coerced to an empty string.\n             *\n             * @param {E164Number | undefined} value - The entered value\n             */\n            onChange={value => onChange?.(value as RPNInput.Value)}\n            {...props}\n         />\n      ),\n   )\nInputPhone.displayName = 'InputPhone'\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n   ({ className, ...props }, ref) => (\n      <Input\n         className={ny('rounded-e-lg rounded-s-none', className)}\n         {...props}\n         ref={ref}\n      />\n   ),\n)\nInputComponent.displayName = 'InputComponent'\n\ninterface CountrySelectOption { label: string, value: RPNInput.Country }\n\ninterface CountrySelectProps {\n   disabled?: boolean\n   value: RPNInput.Country\n   onChange: (value: RPNInput.Country) => void\n   options: CountrySelectOption[]\n}\n\nfunction CountrySelect({\n   disabled,\n   value,\n   onChange,\n   options,\n}: CountrySelectProps) {\n   const handleSelect = React.useCallback(\n      (country: RPNInput.Country) => onChange(country),\n      [onChange],\n   )\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               type=\"button\"\n               variant=\"outline\"\n               className={ny('flex gap-1 rounded-e-none rounded-s-lg px-3')}\n               disabled={disabled}\n            >\n               <FlagComponent country={value} countryName={value} />\n               <CaretSortIcon\n                  className={ny(\n                     '-mr-2 size-4 opacity-50',\n                     disabled ? 'hidden' : 'opacity-100',\n                  )}\n               />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[300px] p-0\">\n            <Command>\n               <CommandList>\n                  <CommandInput placeholder=\"Search country...\" />\n                  <CommandEmpty>No country found.</CommandEmpty>\n                  <CommandGroup>\n                     {options.map(option => (\n                        <CommandItem\n                           className=\"gap-2\"\n                           key={option.value || 'ZZ'}\n                           onSelect={() => handleSelect(option.value)}\n                        >\n                           <FlagComponent\n                              country={option.value}\n                              countryName={option.label}\n                           />\n                           <span className=\"flex-1 text-sm\">{option.label}</span>\n                           {option.value && (\n                              <span className=\"text-foreground/50 text-sm\">\n                                 {`+${RPNInput.getCountryCallingCode(option.value)}`}\n                              </span>\n                           )}\n                           <CheckIcon\n                              className={ny(\n                                 'ml-auto size-4',\n                                 option.value === value ? 'opacity-100' : 'opacity-0',\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n\nfunction FlagComponent({ country, countryName }: RPNInput.FlagProps) {\n   const Flag = flags[country]\n\n   return (\n      <span className=\"bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm\">\n         {Flag && <Flag title={countryName} />}\n      </span>\n   )\n}\nFlagComponent.displayName = 'FlagComponent'\n\nexport { InputPhone }\n",
-      "type": "registry:component",
+      "content": "import { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/miami/ui/command\"\nimport type { InputProps } from \"~/registry/miami/ui/input\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\ntype InputPhoneProps = Omit<\n   React.InputHTMLAttributes<HTMLInputElement>,\n   \"onChange\" | \"value\"\n> &\n   Omit<RPNInput.Props<typeof RPNInput.default>, \"onChange\"> & {\n      onChange?: (value: RPNInput.Value) => void\n   }\n\nconst InputPhone: React.ForwardRefExoticComponent<InputPhoneProps> =\n   React.forwardRef<React.ElementRef<typeof RPNInput.default>, InputPhoneProps>(\n      ({ className, onChange, ...props }, ref) => (\n         <RPNInput.default\n            ref={ref}\n            className={ny(\"flex\", className)}\n            flagComponent={FlagComponent}\n            countrySelectComponent={CountrySelect}\n            inputComponent={InputComponent}\n            /**\n             * Handles the onChange event.\n             *\n             * react-phone-number-input might trigger the onChange event as undefined\n             * when a valid phone number is not entered. To prevent this,\n             * the value is coerced to an empty string.\n             *\n             * @param {E164Number | undefined} value - The entered value\n             */\n            onChange={(value) => onChange?.(value as RPNInput.Value)}\n            {...props}\n         />\n      ),\n   )\nInputPhone.displayName = \"InputPhone\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n   ({ className, ...props }, ref) => (\n      <Input\n         className={ny(\"rounded-e-lg rounded-s-none\", className)}\n         {...props}\n         ref={ref}\n      />\n   ),\n)\nInputComponent.displayName = \"InputComponent\"\n\ninterface CountrySelectOption {\n   label: string\n   value: RPNInput.Country\n}\n\ninterface CountrySelectProps {\n   disabled?: boolean\n   value: RPNInput.Country\n   onChange: (value: RPNInput.Country) => void\n   options: CountrySelectOption[]\n}\n\nfunction CountrySelect({\n   disabled,\n   value,\n   onChange,\n   options,\n}: CountrySelectProps) {\n   const handleSelect = React.useCallback(\n      (country: RPNInput.Country) => onChange(country),\n      [onChange],\n   )\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               type=\"button\"\n               variant=\"outline\"\n               className={ny(\"flex gap-1 rounded-e-none rounded-s-lg px-3\")}\n               disabled={disabled}\n            >\n               <FlagComponent country={value} countryName={value} />\n               <CaretSortIcon\n                  className={ny(\n                     \"-mr-2 size-4 opacity-50\",\n                     disabled ? \"hidden\" : \"opacity-100\",\n                  )}\n               />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[300px] p-0\">\n            <Command>\n               <CommandList>\n                  <CommandInput placeholder=\"Search country...\" />\n                  <CommandEmpty>No country found.</CommandEmpty>\n                  <CommandGroup>\n                     {options.map((option) => (\n                        <CommandItem\n                           className=\"gap-2\"\n                           key={option.value || \"ZZ\"}\n                           onSelect={() => handleSelect(option.value)}\n                        >\n                           <FlagComponent\n                              country={option.value}\n                              countryName={option.label}\n                           />\n                           <span className=\"flex-1 text-sm\">\n                              {option.label}\n                           </span>\n                           {option.value && (\n                              <span className=\"text-foreground/50 text-sm\">\n                                 {`+${RPNInput.getCountryCallingCode(option.value)}`}\n                              </span>\n                           )}\n                           <CheckIcon\n                              className={ny(\n                                 \"ml-auto size-4\",\n                                 option.value === value\n                                    ? \"opacity-100\"\n                                    : \"opacity-0\",\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n\nfunction FlagComponent({ country, countryName }: RPNInput.FlagProps) {\n   const Flag = flags[country]\n\n   return (\n      <span className=\"bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm\">\n         {Flag && <Flag title={countryName} />}\n      </span>\n   )\n}\nFlagComponent.displayName = \"FlagComponent\"\n\nexport { InputPhone }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-with-button.json b/apps/web/public/r/styles/miami/input-with-button.json
index 5d821c1b..0e9c1af1 100644
--- a/apps/web/public/r/styles/miami/input-with-button.json
+++ b/apps/web/public/r/styles/miami/input-with-button.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-with-button",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input",
     "button"
   ],
   "files": [
     {
-      "path": "example/input-with-button.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport { Input } from '~/registry/miami/ui/input'\n\nexport default function InputWithButton() {\n   return (\n      <div className=\"flex w-full max-w-sm items-center space-x-2\">\n         <Input type=\"email\" placeholder=\"Email\" />\n         <Button type=\"submit\">Subscribe</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-with-button.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport { Input } from \"~/registry/miami/ui/input\"\n\nexport default function InputWithButton() {\n   return (\n      <div className=\"flex w-full max-w-sm items-center space-x-2\">\n         <Input type=\"email\" placeholder=\"Email\" />\n         <Button type=\"submit\">Subscribe</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-with-label.json b/apps/web/public/r/styles/miami/input-with-label.json
index 8d6876b6..3dca11b5 100644
--- a/apps/web/public/r/styles/miami/input-with-label.json
+++ b/apps/web/public/r/styles/miami/input-with-label.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-with-label",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input",
     "button",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-with-label.tsx",
-      "content": "import { Input } from '~/registry/miami/ui/input'\nimport { Label } from '~/registry/miami/ui/label'\n\nexport default function InputWithLabel() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"email\">Email</Label>\n         <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-with-label.tsx",
+      "content": "import { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport default function InputWithLabel() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"email\">Email</Label>\n         <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input-with-text.json b/apps/web/public/r/styles/miami/input-with-text.json
index 8e5e275c..f93cb558 100644
--- a/apps/web/public/r/styles/miami/input-with-text.json
+++ b/apps/web/public/r/styles/miami/input-with-text.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input-with-text",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "input",
     "button",
@@ -8,9 +10,9 @@
   ],
   "files": [
     {
-      "path": "example/input-with-text.tsx",
-      "content": "import { Input } from '~/registry/miami/ui/input'\nimport { Label } from '~/registry/miami/ui/label'\n\nexport default function InputWithText() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"email-2\">Email</Label>\n         <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n         <p className=\"text-muted-foreground text-sm\">Enter your email address.</p>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/input-with-text.tsx",
+      "content": "import { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport default function InputWithText() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"email-2\">Email</Label>\n         <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n         <p className=\"text-muted-foreground text-sm\">\n            Enter your email address.\n         </p>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/input.json b/apps/web/public/r/styles/miami/input.json
index 08c76549..967f592f 100644
--- a/apps/web/public/r/styles/miami/input.json
+++ b/apps/web/public/r/styles/miami/input.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "input",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/input.tsx",
-      "content": "import * as React from 'react'\n\nimport { ny } from '~/lib/utils'\n\nexport interface InputProps\n   extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n   ({ className, type, ...props }, ref) => {\n      return (\n         <input\n            type={type}\n            className={ny(\n               'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nInput.displayName = 'Input'\n\nexport { Input }\n",
-      "type": "registry:component",
+      "content": "import * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nexport interface InputProps\n   extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n   ({ className, type, ...props }, ref) => {\n      return (\n         <input\n            type={type}\n            className={ny(\n               \"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/interactive-grid-pattern-demo-2.json b/apps/web/public/r/styles/miami/interactive-grid-pattern-demo-2.json
new file mode 100644
index 00000000..3377c3aa
--- /dev/null
+++ b/apps/web/public/r/styles/miami/interactive-grid-pattern-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "interactive-grid-pattern-demo-2",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/interactive-grid-pattern-demo-2.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\nimport { InteractiveGridPattern } from \"~/registry/miami/ui/interactive-grid-pattern\"\n\nexport default function InteractiveGridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Interactive Grid Pattern\n         </p>\n         <InteractiveGridPattern\n            className={ny(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n            )}\n            width={20}\n            height={20}\n            squares={[80, 80]}\n            squaresClassName=\"hover:fill-blue-500\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/interactive-grid-pattern-demo.json b/apps/web/public/r/styles/miami/interactive-grid-pattern-demo.json
new file mode 100644
index 00000000..17827fdb
--- /dev/null
+++ b/apps/web/public/r/styles/miami/interactive-grid-pattern-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "interactive-grid-pattern-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/interactive-grid-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { ny } from \"~/registry/default/lib/utils\"\nimport { InteractiveGridPattern } from \"~/registry/default/ui/interactive-grid-pattern\"\n\nexport default function InteractiveGridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Interactive Grid Pattern\n         </p>\n         <InteractiveGridPattern\n            className={ny(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n               \"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/interactive-grid-pattern.json b/apps/web/public/r/styles/miami/interactive-grid-pattern.json
new file mode 100644
index 00000000..39f9d461
--- /dev/null
+++ b/apps/web/public/r/styles/miami/interactive-grid-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "interactive-grid-pattern",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/interactive-grid-pattern.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useState } from \"react\"\nimport { ny } from \"~/registry/miami/lib/utils\"\n\n/**\n * InteractiveGridPattern is a component that renders a grid pattern with interactive squares.\n *\n * @param width - The width of each square.\n * @param height - The height of each square.\n * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares.\n * @param className - The class name of the grid.\n * @param squaresClassName - The class name of the squares.\n */\ninterface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   squares?: [number, number] // [horizontal, vertical]\n   className?: string\n   squaresClassName?: string\n}\n\n/**\n * The InteractiveGridPattern component.\n *\n * @see InteractiveGridPatternProps for the props interface.\n * @returns A React component.\n */\nexport function InteractiveGridPattern({\n   width = 40,\n   height = 40,\n   squares = [24, 24],\n   className,\n   squaresClassName,\n   ...props\n}: InteractiveGridPatternProps) {\n   const [horizontal, vertical] = squares\n   const [hoveredSquare, setHoveredSquare] = useState<number | null>(null)\n\n   return (\n      <svg\n         width={width * horizontal}\n         height={height * vertical}\n         className={ny(\n            \"absolute inset-0 h-full w-full border border-gray-400/30\",\n            className,\n         )}\n         {...props}\n      >\n         {Array.from({ length: horizontal * vertical }).map((_, index) => {\n            const x = (index % horizontal) * width\n            const y = Math.floor(index / horizontal) * height\n            return (\n               <rect\n                  key={index}\n                  x={x}\n                  y={y}\n                  width={width}\n                  height={height}\n                  className={ny(\n                     \"stroke-gray-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000\",\n                     hoveredSquare === index\n                        ? \"fill-gray-300/30\"\n                        : \"fill-transparent\",\n                     squaresClassName,\n                  )}\n                  onMouseEnter={() => setHoveredSquare(index)}\n                  onMouseLeave={() => setHoveredSquare(null)}\n               />\n            )\n         })}\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/iphone-15-pro-demo-2.json b/apps/web/public/r/styles/miami/iphone-15-pro-demo-2.json
index 17224e36..d0163b19 100644
--- a/apps/web/public/r/styles/miami/iphone-15-pro-demo-2.json
+++ b/apps/web/public/r/styles/miami/iphone-15-pro-demo-2.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "iphone-15-pro-demo-2",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/iphone-15-pro-demo-2.tsx",
-      "content": "import Iphone15Pro from '~/registry/miami/ui/iphone-15-pro'\n\nexport default function Iphone15ProDemo() {\n   return (\n      <div className=\"relative\">\n         <Iphone15Pro\n            className=\"size-full\"\n            src=\"https://via.placeholder.com/430x880\"\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/iphone-15-pro-demo-2.tsx",
+      "content": "import Iphone15Pro from \"~/registry/miami/ui/iphone-15-pro\"\n\nexport default function Iphone15ProDemo() {\n   return (\n      <div className=\"relative\">\n         <Iphone15Pro\n            className=\"size-full\"\n            src=\"https://via.placeholder.com/430x880\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/iphone-15-pro-demo.json b/apps/web/public/r/styles/miami/iphone-15-pro-demo.json
index b46132ae..e62e4269 100644
--- a/apps/web/public/r/styles/miami/iphone-15-pro-demo.json
+++ b/apps/web/public/r/styles/miami/iphone-15-pro-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "iphone-15-pro-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/iphone-15-pro-demo.tsx",
-      "content": "import Iphone15Pro from '~/registry/miami/ui/iphone-15-pro'\n\nexport default function Iphone15ProDemo() {\n   return (\n      <div className=\"relative\">\n         <Iphone15Pro className=\"size-full\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/iphone-15-pro-demo.tsx",
+      "content": "import Iphone15Pro from \"~/registry/miami/ui/iphone-15-pro\"\n\nexport default function Iphone15ProDemo() {\n   return (\n      <div className=\"relative\">\n         <Iphone15Pro className=\"size-full\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/iphone-15-pro.json b/apps/web/public/r/styles/miami/iphone-15-pro.json
index 80d2934d..15aca473 100644
--- a/apps/web/public/r/styles/miami/iphone-15-pro.json
+++ b/apps/web/public/r/styles/miami/iphone-15-pro.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "iphone-15-pro",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/iphone-15-pro.tsx",
-      "content": "import type { SVGProps } from 'react'\n\nexport interface Iphone15ProProps extends SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   src?: string\n}\n\nexport default function Iphone15Pro({\n   width = 433,\n   height = 882,\n   src,\n   ...props\n}: Iphone15ProProps) {\n   return (\n      <svg\n         width={width}\n         height={height}\n         viewBox={`0 0 ${width} ${height}`}\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z\"\n            className=\"fill-white dark:fill-[#262626]\"\n         />\n         <path\n            opacity=\"0.5\"\n            d=\"M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z\"\n            className=\"fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]\"\n         />\n\n         {src && (\n            <image\n               href={src}\n               x=\"21.25\"\n               y=\"19.25\"\n               width=\"389.5\"\n               height=\"843.5\"\n               preserveAspectRatio=\"xMidYMid slice\"\n               clipPath=\"url(#roundedCorners)\"\n            />\n         )}\n         <path\n            d=\"M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z\"\n            className=\"fill-[#F5F5F5] dark:fill-[#262626]\"\n         />\n         <path\n            d=\"M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z\"\n            className=\"fill-[#F5F5F5] dark:fill-[#262626]\"\n         />\n         <path\n            d=\"M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <defs>\n            <clipPath id=\"roundedCorners\">\n               <rect\n                  x=\"21.25\"\n                  y=\"19.25\"\n                  width=\"389.5\"\n                  height=\"843.5\"\n                  rx=\"55.75\"\n                  ry=\"55.75\"\n               />\n            </clipPath>\n         </defs>\n      </svg>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import type { SVGProps } from \"react\"\n\nexport interface Iphone15ProProps extends SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   src?: string\n}\n\nexport default function Iphone15Pro({\n   width = 433,\n   height = 882,\n   src,\n   ...props\n}: Iphone15ProProps) {\n   return (\n      <svg\n         width={width}\n         height={height}\n         viewBox={`0 0 ${width} ${height}`}\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z\"\n            className=\"fill-white dark:fill-[#262626]\"\n         />\n         <path\n            opacity=\"0.5\"\n            d=\"M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z\"\n            className=\"fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]\"\n         />\n\n         {src && (\n            <image\n               href={src}\n               x=\"21.25\"\n               y=\"19.25\"\n               width=\"389.5\"\n               height=\"843.5\"\n               preserveAspectRatio=\"xMidYMid slice\"\n               clipPath=\"url(#roundedCorners)\"\n            />\n         )}\n         <path\n            d=\"M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z\"\n            className=\"fill-[#F5F5F5] dark:fill-[#262626]\"\n         />\n         <path\n            d=\"M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z\"\n            className=\"fill-[#F5F5F5] dark:fill-[#262626]\"\n         />\n         <path\n            d=\"M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <defs>\n            <clipPath id=\"roundedCorners\">\n               <rect\n                  x=\"21.25\"\n                  y=\"19.25\"\n                  width=\"389.5\"\n                  height=\"843.5\"\n                  rx=\"55.75\"\n                  ry=\"55.75\"\n               />\n            </clipPath>\n         </defs>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/label-demo.json b/apps/web/public/r/styles/miami/label-demo.json
index a9c825fd..af131a3e 100644
--- a/apps/web/public/r/styles/miami/label-demo.json
+++ b/apps/web/public/r/styles/miami/label-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "label-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "label"
   ],
   "files": [
     {
-      "path": "example/label-demo.tsx",
-      "content": "import { Checkbox } from '~/registry/miami/ui/checkbox'\nimport { Label } from '~/registry/miami/ui/label'\n\nexport default function LabelDemo() {\n   return (\n      <div>\n         <div className=\"flex items-center space-x-2\">\n            <Checkbox id=\"terms\" />\n            <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/label-demo.tsx",
+      "content": "import { Checkbox } from \"~/registry/miami/ui/checkbox\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport default function LabelDemo() {\n   return (\n      <div>\n         <div className=\"flex items-center space-x-2\">\n            <Checkbox id=\"terms\" />\n            <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/label.json b/apps/web/public/r/styles/miami/label.json
index b1058c94..d18e2d9a 100644
--- a/apps/web/public/r/styles/miami/label.json
+++ b/apps/web/public/r/styles/miami/label.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "label",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-label"
   ],
   "files": [
     {
       "path": "ui/label.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as LabelPrimitive from '@radix-ui/react-label'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst labelVariants = cva(\n   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n)\n\nconst Label = React.forwardRef<\n   React.ElementRef<typeof LabelPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n   VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n   <LabelPrimitive.Root\n      ref={ref}\n      className={ny(labelVariants(), className)}\n      {...props}\n   />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst labelVariants = cva(\n   \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n)\n\nconst Label = React.forwardRef<\n   React.ElementRef<typeof LabelPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n      VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n   <LabelPrimitive.Root\n      ref={ref}\n      className={ny(labelVariants(), className)}\n      {...props}\n   />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/letter-pullup-demo.json b/apps/web/public/r/styles/miami/letter-pullup-demo.json
index f078797b..35564d8f 100644
--- a/apps/web/public/r/styles/miami/letter-pullup-demo.json
+++ b/apps/web/public/r/styles/miami/letter-pullup-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "letter-pullup-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/letter-pullup-demo.tsx",
-      "content": "import LetterPullup from '~/registry/miami/ui/letter-pullup'\n\nexport default async function LetterPullupDemo() {\n   return <LetterPullup words=\"Staggered Letter Pull Up\" delay={0.05} />\n}\n",
-      "type": "registry:component",
+      "path": "examples/letter-pullup-demo.tsx",
+      "content": "import LetterPullup from \"~/registry/miami/ui/letter-pullup\"\n\nexport default async function LetterPullupDemo() {\n   return <LetterPullup words=\"Staggered Letter Pull Up\" delay={0.05} />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/letter-pullup.json b/apps/web/public/r/styles/miami/letter-pullup.json
index 6a120027..8c08823e 100644
--- a/apps/web/public/r/styles/miami/letter-pullup.json
+++ b/apps/web/public/r/styles/miami/letter-pullup.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "letter-pullup",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/letter-pullup.tsx",
-      "content": "'use client'\n\nimport { motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface LetterPullupProps {\n   className?: string\n   words: string\n   delay?: number\n}\n\nexport default function LetterPullup({\n   className,\n   words,\n   delay,\n}: LetterPullupProps) {\n   const letters = words.split('')\n\n   const pullupVariant = {\n      initial: { y: 100, opacity: 0 },\n      animate: (i: any) => ({\n         y: 0,\n         opacity: 1,\n         transition: {\n            delay: i * (delay || 0.05), // By default, delay each letter's animation by 0.05 seconds\n         },\n      }),\n   }\n\n   return (\n      <div className=\"flex justify-center\">\n         {letters.map((letter, i) => (\n            <motion.h1\n               key={i}\n               variants={pullupVariant}\n               initial=\"initial\"\n               animate=\"animate\"\n               custom={i}\n               className={ny(\n                  'font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-4xl md:leading-[5rem] dark:text-white',\n                  className,\n               )}\n            >\n               {letter === ' ' ? <span>&nbsp;</span> : letter}\n            </motion.h1>\n         ))}\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface LetterPullupProps {\n   className?: string\n   words: string\n   delay?: number\n}\n\nexport default function LetterPullup({\n   className,\n   words,\n   delay,\n}: LetterPullupProps) {\n   const letters = words.split(\"\")\n\n   const pullupVariant = {\n      initial: { y: 100, opacity: 0 },\n      animate: (i: any) => ({\n         y: 0,\n         opacity: 1,\n         transition: {\n            delay: i * (delay || 0.05), // By default, delay each letter's animation by 0.05 seconds\n         },\n      }),\n   }\n\n   return (\n      <div className=\"flex justify-center\">\n         {letters.map((letter, i) => (\n            <motion.h1\n               key={i}\n               variants={pullupVariant}\n               initial=\"initial\"\n               animate=\"animate\"\n               custom={i}\n               className={ny(\n                  \"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-4xl md:leading-[5rem] dark:text-white\",\n                  className,\n               )}\n            >\n               {letter === \" \" ? <span>&nbsp;</span> : letter}\n            </motion.h1>\n         ))}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/line-shadow-text-demo.json b/apps/web/public/r/styles/miami/line-shadow-text-demo.json
new file mode 100644
index 00000000..212a6d66
--- /dev/null
+++ b/apps/web/public/r/styles/miami/line-shadow-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "line-shadow-text-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/line-shadow-text-demo.tsx",
+      "content": "import { useTheme } from \"next-themes\"\nimport { LineShadowText } from \"~/registry/miami/ui/line-shadow-text\"\n\nexport default function LineShadowTextDemo() {\n   const theme = useTheme()\n   const shadowColor = theme.resolvedTheme === \"dark\" ? \"white\" : \"black\"\n   return (\n      <h1 className=\"text-balance text-5xl font-semibold leading-none tracking-tighter sm:text-6xl md:text-7xl lg:text-8xl\">\n         Ship\n         <LineShadowText className=\"italic\" shadowColor={shadowColor}>\n            Fast\n         </LineShadowText>\n      </h1>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/line-shadow-text.json b/apps/web/public/r/styles/miami/line-shadow-text.json
new file mode 100644
index 00000000..f8cbb6c2
--- /dev/null
+++ b/apps/web/public/r/styles/miami/line-shadow-text.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "line-shadow-text",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/line-shadow-text.tsx",
+      "content": "import { type MotionProps, motion } from \"motion/react\"\nimport { ny } from \"~/registry/miami/lib/utils\"\n\ninterface LineShadowTextProps\n   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,\n      MotionProps {\n   shadowColor?: string\n   as?: React.ElementType\n}\n\nexport function LineShadowText({\n   children,\n   shadowColor = \"black\",\n   className,\n   as: Component = \"span\",\n   ...props\n}: LineShadowTextProps) {\n   const MotionComponent = motion.create(Component)\n   const content = typeof children === \"string\" ? children : null\n\n   if (!content) {\n      throw new Error(\"LineShadowText only accepts string content\")\n   }\n\n   return (\n      <MotionComponent\n         style={{ \"--shadow-color\": shadowColor } as React.CSSProperties}\n         className={ny(\n            \"relative z-0 inline-flex\",\n            \"after:absolute after:left-[0.04em] after:top-[0.04em] after:content-[attr(data-text)]\",\n            \"after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]\",\n            \"after:-z-10 after:bg-[length:0.06em_0.06em] after:bg-clip-text after:text-transparent\",\n            \"after:animate-line-shadow\",\n            className,\n         )}\n         data-text={content}\n         {...props}\n      >\n         {content}\n      </MotionComponent>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "line-shadow": "line-shadow 15s linear infinite"
+          },
+          "keyframes": {
+            "line-shadow": {
+              "0%": {
+                "background-position": "0 0"
+              },
+              "100%": {
+                "background-position": "100% -100%"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/login-01.json b/apps/web/public/r/styles/miami/login-01.json
index 26dbae07..80f67fb9 100644
--- a/apps/web/public/r/styles/miami/login-01.json
+++ b/apps/web/public/r/styles/miami/login-01.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "login-01",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A simple login form.",
   "registryDependencies": [
     "button",
@@ -10,16 +12,20 @@
   ],
   "files": [
     {
-      "path": "block/login-01/page.tsx",
-      "content": "import { LoginForm } from '~/registry/miami/block/login-01/components/login-form'\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-screen w-full items-center justify-center px-4\">\n         <LoginForm />\n      </div>\n   )\n}\n",
+      "path": "blocks/login-01/page.tsx",
+      "content": "import { LoginForm } from \"~/registry/miami/blocks/login-01/components/login-form\"\n\nexport default function Page() {\n   return (\n      <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n         <div className=\"w-full max-w-sm\">\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
-      "path": "block/login-01/components/login-form.tsx",
-      "content": "import Link from 'next/link'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport { Input } from '~/registry/miami/ui/input'\nimport { Label } from '~/registry/miami/ui/label'\n\nexport function LoginForm() {\n   return (\n      <Card className=\"mx-auto max-w-sm\">\n         <CardHeader>\n            <CardTitle className=\"text-2xl\">Login</CardTitle>\n            <CardDescription>\n               Enter your email below to login to your account\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <div className=\"grid gap-4\">\n               <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                     id=\"email\"\n                     type=\"email\"\n                     placeholder=\"m@example.com\"\n                     required\n                  />\n               </div>\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center\">\n                     <Label htmlFor=\"password\">Password</Label>\n                     <Link href=\"#\" className=\"ml-auto inline-block text-sm underline\">\n                        Forgot your password?\n                     </Link>\n                  </div>\n                  <Input id=\"password\" type=\"password\" required />\n               </div>\n               <Button type=\"submit\" className=\"w-full\">\n                  Login\n               </Button>\n               <Button variant=\"outline\" className=\"w-full\">\n                  Login with Google\n               </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n               Don&apos;t have an account?\n               {' '}\n               <Link href=\"#\" className=\"underline\">\n                  Sign up\n               </Link>\n            </div>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "path": "blocks/login-01/components/login-form.tsx",
+      "content": "import { ny } from \"~/registry/miami/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n   return (\n      <div className={ny(\"flex flex-col gap-6\", className)} {...props}>\n         <Card>\n            <CardHeader>\n               <CardTitle className=\"text-2xl\">Login</CardTitle>\n               <CardDescription>\n                  Enter your email below to login to your account\n               </CardDescription>\n            </CardHeader>\n            <CardContent>\n               <form>\n                  <div className=\"flex flex-col gap-6\">\n                     <div className=\"grid gap-2\">\n                        <Label htmlFor=\"email\">Email</Label>\n                        <Input\n                           id=\"email\"\n                           type=\"email\"\n                           placeholder=\"m@example.com\"\n                           required\n                        />\n                     </div>\n                     <div className=\"grid gap-2\">\n                        <div className=\"flex items-center\">\n                           <Label htmlFor=\"password\">Password</Label>\n                           <a\n                              href=\"#\"\n                              className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                           >\n                              Forgot your password?\n                           </a>\n                        </div>\n                        <Input id=\"password\" type=\"password\" required />\n                     </div>\n                     <Button type=\"submit\" className=\"w-full\">\n                        Login\n                     </Button>\n                     <Button variant=\"outline\" className=\"w-full\">\n                        Login with Google\n                     </Button>\n                  </div>\n                  <div className=\"mt-4 text-center text-sm\">\n                     Don&apos;t have an account?{\" \"}\n                     <a href=\"#\" className=\"underline underline-offset-4\">\n                        Sign up\n                     </a>\n                  </div>\n               </form>\n            </CardContent>\n         </Card>\n      </div>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "authentication",
+    "login"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/login-02.json b/apps/web/public/r/styles/miami/login-02.json
new file mode 100644
index 00000000..4014a7d1
--- /dev/null
+++ b/apps/web/public/r/styles/miami/login-02.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-02",
+  "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-02/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"~/registry/miami/blocks/login-02/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"grid min-h-svh lg:grid-cols-2\">\n         <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n            <div className=\"flex justify-center gap-2 md:justify-start\">\n               <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n                  <div className=\"flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n                     <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  Acme Inc.\n               </a>\n            </div>\n            <div className=\"flex flex-1 items-center justify-center\">\n               <div className=\"w-full max-w-xs\">\n                  <LoginForm />\n               </div>\n            </div>\n         </div>\n         <div className=\"relative hidden bg-muted lg:block\">\n            <img\n               src=\"/placeholder.svg\"\n               alt=\"Image\"\n               className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-02/components/login-form.tsx",
+      "content": "import { ny } from \"~/registry/miami/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"form\">) {\n   return (\n      <form className={ny(\"flex flex-col gap-6\", className)} {...props}>\n         <div className=\"flex flex-col items-center gap-2 text-center\">\n            <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n            <p className=\"text-balance text-sm text-muted-foreground\">\n               Enter your email below to login to your account\n            </p>\n         </div>\n         <div className=\"grid gap-6\">\n            <div className=\"grid gap-2\">\n               <Label htmlFor=\"email\">Email</Label>\n               <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n               />\n            </div>\n            <div className=\"grid gap-2\">\n               <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                     href=\"#\"\n                     className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n                  >\n                     Forgot your password?\n                  </a>\n               </div>\n               <Input id=\"password\" type=\"password\" required />\n            </div>\n            <Button type=\"submit\" className=\"w-full\">\n               Login\n            </Button>\n            <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n               <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                  Or continue with\n               </span>\n            </div>\n            <Button\n               variant=\"outline\"\n               className=\"w-full h-10 flex items-center justify-center gap-2\"\n            >\n               <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  className=\"h-5 w-5\"\n               >\n                  <path\n                     d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                     fill=\"currentColor\"\n                  />\n               </svg>\n               Login with GitHub\n            </Button>\n         </div>\n         <div className=\"text-center text-sm\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n               Sign up\n            </a>\n         </div>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/login-03.json b/apps/web/public/r/styles/miami/login-03.json
new file mode 100644
index 00000000..b6e1685d
--- /dev/null
+++ b/apps/web/public/r/styles/miami/login-03.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-03",
+  "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-03/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"~/registry/miami/blocks/login-03/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n         <div className=\"flex w-full max-w-sm flex-col gap-6\">\n            <a\n               href=\"#\"\n               className=\"flex items-center gap-2 self-center font-medium\"\n            >\n               <div className=\"flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n               </div>\n               Acme Inc.\n            </a>\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-03/components/login-form.tsx",
+      "content": "import { ny } from \"~/registry/miami/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n   return (\n      <div className={ny(\"flex flex-col gap-6\", className)} {...props}>\n         <Card>\n            <CardHeader className=\"text-center\">\n               <CardTitle className=\"text-xl\">Welcome back</CardTitle>\n               <CardDescription>\n                  Login with your Apple or Google account\n               </CardDescription>\n            </CardHeader>\n            <CardContent>\n               <form>\n                  <div className=\"grid gap-6\">\n                     <div className=\"flex flex-col gap-4\">\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center gap-2\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           Login with Apple\n                        </Button>\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center gap-2\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           Login with Google\n                        </Button>\n                     </div>\n                     <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                        <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                           Or continue with\n                        </span>\n                     </div>\n                     <div className=\"grid gap-6\">\n                        <div className=\"grid gap-2\">\n                           <Label htmlFor=\"email\">Email</Label>\n                           <Input\n                              id=\"email\"\n                              type=\"email\"\n                              placeholder=\"m@example.com\"\n                              required\n                           />\n                        </div>\n                        <div className=\"grid gap-2\">\n                           <div className=\"flex items-center\">\n                              <Label htmlFor=\"password\">Password</Label>\n                              <a\n                                 href=\"#\"\n                                 className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n                              >\n                                 Forgot your password?\n                              </a>\n                           </div>\n                           <Input id=\"password\" type=\"password\" required />\n                        </div>\n                        <Button type=\"submit\" className=\"w-full\">\n                           Login\n                        </Button>\n                     </div>\n                     <div className=\"text-center text-sm\">\n                        Don&apos;t have an account?{\" \"}\n                        <a href=\"#\" className=\"underline underline-offset-4\">\n                           Sign up\n                        </a>\n                     </div>\n                  </div>\n               </form>\n            </CardContent>\n         </Card>\n         <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  \">\n            By clicking continue, you agree to our{\" \"}\n            <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/login-04.json b/apps/web/public/r/styles/miami/login-04.json
new file mode 100644
index 00000000..37c3b5fa
--- /dev/null
+++ b/apps/web/public/r/styles/miami/login-04.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-04",
+  "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
+  "description": "A login page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-04/page.tsx",
+      "content": "import { LoginForm } from \"~/registry/miami/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n         <div className=\"w-full max-w-sm md:max-w-3xl\">\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-04/components/login-form.tsx",
+      "content": "import { ny } from \"~/registry/miami/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Card, CardContent } from \"~/registry/miami/ui/card\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentProps<\"div\">) {\n   return (\n      <div className={ny(\"flex flex-col gap-6\", className)} {...props}>\n         <Card className=\"overflow-hidden\">\n            <CardContent className=\"grid p-0 md:grid-cols-2\">\n               <form className=\"p-6 md:p-8\">\n                  <div className=\"flex flex-col gap-6\">\n                     <div className=\"flex flex-col items-center text-center\">\n                        <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                        <p className=\"text-balance text-muted-foreground\">\n                           Login to your Acme Inc account\n                        </p>\n                     </div>\n                     <div className=\"grid gap-2\">\n                        <Label htmlFor=\"email\">Email</Label>\n                        <Input\n                           id=\"email\"\n                           type=\"email\"\n                           placeholder=\"m@example.com\"\n                           required\n                        />\n                     </div>\n                     <div className=\"grid gap-2\">\n                        <div className=\"flex items-center\">\n                           <Label htmlFor=\"password\">Password</Label>\n                           <a\n                              href=\"#\"\n                              className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                           >\n                              Forgot your password?\n                           </a>\n                        </div>\n                        <Input id=\"password\" type=\"password\" required />\n                     </div>\n                     <Button type=\"submit\" className=\"w-full\">\n                        Login\n                     </Button>\n                     <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                        <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                           Or continue with\n                        </span>\n                     </div>\n                     <div className=\"grid grid-cols-3 gap-4\">\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           <span className=\"sr-only\">Login with Apple</span>\n                        </Button>\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           <span className=\"sr-only\">Login with Google</span>\n                        </Button>\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           <span className=\"sr-only\">Login with Meta</span>\n                        </Button>\n                     </div>\n                     <div className=\"text-center text-sm\">\n                        Don&apos;t have an account?{\" \"}\n                        <a href=\"#\" className=\"underline underline-offset-4\">\n                           Sign up\n                        </a>\n                     </div>\n                  </div>\n               </form>\n               <div className=\"relative hidden bg-muted md:block\">\n                  <img\n                     src=\"/placeholder.svg\"\n                     alt=\"Image\"\n                     className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n                  />\n               </div>\n            </CardContent>\n         </Card>\n         <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary\">\n            By clicking continue, you agree to our{\" \"}\n            <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/login-05.json b/apps/web/public/r/styles/miami/login-05.json
new file mode 100644
index 00000000..93923532
--- /dev/null
+++ b/apps/web/public/r/styles/miami/login-05.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-05",
+  "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"~/registry/miami/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n         <div className=\"w-full max-w-sm\">\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-05/components/login-form.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n   return (\n      <div className={ny(\"flex flex-col gap-6\", className)} {...props}>\n         <form>\n            <div className=\"flex flex-col gap-6\">\n               <div className=\"flex flex-col items-center gap-2\">\n                  <a\n                     href=\"#\"\n                     className=\"flex flex-col items-center gap-2 font-medium\"\n                  >\n                     <div className=\"flex h-8 w-8 items-center justify-center rounded-md\">\n                        <GalleryVerticalEnd className=\"size-6\" />\n                     </div>\n                     <span className=\"sr-only\">Acme Inc.</span>\n                  </a>\n                  <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n                  <div className=\"text-center text-sm\">\n                     Don&apos;t have an account?{\" \"}\n                     <a href=\"#\" className=\"underline underline-offset-4\">\n                        Sign up\n                     </a>\n                  </div>\n               </div>\n               <div className=\"flex flex-col gap-6\">\n                  <div className=\"grid gap-2\">\n                     <Label htmlFor=\"email\">Email</Label>\n                     <Input\n                        id=\"email\"\n                        type=\"email\"\n                        placeholder=\"m@example.com\"\n                        required\n                     />\n                  </div>\n                  <Button type=\"submit\" className=\"w-full\">\n                     Login\n                  </Button>\n               </div>\n               <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                  <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                     Or\n                  </span>\n               </div>\n               <div className=\"grid gap-4 sm:grid-cols-2\">\n                  <Button variant=\"outline\" className=\"w-full\">\n                     <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                     >\n                        <path\n                           d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                           fill=\"currentColor\"\n                        />\n                     </svg>\n                     Continue with Apple\n                  </Button>\n                  <Button variant=\"outline\" className=\"w-full\">\n                     <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                     >\n                        <path\n                           d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                           fill=\"currentColor\"\n                        />\n                     </svg>\n                     Continue with Google\n                  </Button>\n               </div>\n            </div>\n         </form>\n         <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary  \">\n            By clicking continue, you agree to our{\" \"}\n            <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/magic-card-demo.json b/apps/web/public/r/styles/miami/magic-card-demo.json
index 57bb4aed..f83ed23a 100644
--- a/apps/web/public/r/styles/miami/magic-card-demo.json
+++ b/apps/web/public/r/styles/miami/magic-card-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "magic-card-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/magic-card-demo.tsx",
-      "content": "import { MagicCard, MagicContainer } from '~/registry/miami/ui/magic-card'\n\nexport default function MagicCardDemo() {\n   return (\n      <MagicContainer className=\"flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row\">\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Magic\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Card\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Demo\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n      </MagicContainer>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/magic-card-demo.tsx",
+      "content": "import { MagicCard, MagicContainer } from \"~/registry/miami/ui/magic-card\"\n\nexport default function MagicCardDemo() {\n   return (\n      <MagicContainer className=\"flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row\">\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Magic\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Card\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Demo\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n      </MagicContainer>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/magic-card-gradient.json b/apps/web/public/r/styles/miami/magic-card-gradient.json
index f7716e93..66fef511 100644
--- a/apps/web/public/r/styles/miami/magic-card-gradient.json
+++ b/apps/web/public/r/styles/miami/magic-card-gradient.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "magic-card-gradient",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/magic-card-gradient.tsx",
-      "content": "import { MagicCard, MagicContainer } from '~/registry/miami/ui/magic-card'\n\nexport default function MagicCardGradient() {\n   return (\n      <MagicContainer className=\"flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row\">\n         <MagicCard\n            borderWidth={3}\n            className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\"\n         >\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Magic\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Card\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Demo\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n      </MagicContainer>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/magic-card-gradient.tsx",
+      "content": "import { MagicCard, MagicContainer } from \"~/registry/miami/ui/magic-card\"\n\nexport default function MagicCardGradient() {\n   return (\n      <MagicContainer className=\"flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row\">\n         <MagicCard\n            borderWidth={3}\n            className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\"\n         >\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Magic\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Card\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Demo\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n      </MagicContainer>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/magic-card.json b/apps/web/public/r/styles/miami/magic-card.json
index 53297eee..f2bc3aa1 100644
--- a/apps/web/public/r/styles/miami/magic-card.json
+++ b/apps/web/public/r/styles/miami/magic-card.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "magic-card",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/magic-card.tsx",
-      "content": "'use client'\n\nimport type { CSSProperties, ReactElement, ReactNode } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface MousePosition {\n   x: number\n   y: number\n}\n\nfunction useMousePosition(): MousePosition {\n   const [mousePosition, setMousePosition] = useState<MousePosition>({\n      x: 0,\n      y: 0,\n   })\n\n   useEffect(() => {\n      const handleMouseMove = (event: globalThis.MouseEvent) => {\n         setMousePosition({ x: event.clientX, y: event.clientY })\n      }\n\n      window.addEventListener('mousemove', handleMouseMove)\n\n      return () => {\n         window.removeEventListener('mousemove', handleMouseMove)\n      }\n   }, [])\n\n   return mousePosition\n}\n\ninterface MagicContainerProps {\n   children?: ReactNode\n   className?: string\n}\n\nfunction MagicContainer({ children, className }: MagicContainerProps) {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const mousePosition = useMousePosition()\n   const mouse = useRef<{ x: number, y: number }>({ x: 0, y: 0 })\n   const containerSize = useRef<{ w: number, h: number }>({ w: 0, h: 0 })\n   const [boxes, setBoxes] = useState<Array<HTMLElement>>([])\n\n   useEffect(() => {\n      init()\n      containerRef.current\n      && setBoxes(\n         Array.from(containerRef.current.children).map(el => el as HTMLElement),\n      )\n   }, [])\n\n   useEffect(() => {\n      init()\n      window.addEventListener('resize', init)\n\n      return () => {\n         window.removeEventListener('resize', init)\n      }\n   }, [setBoxes])\n\n   useEffect(() => {\n      onMouseMove()\n   }, [mousePosition])\n\n   const init = () => {\n      if (containerRef.current) {\n         containerSize.current.w = containerRef.current.offsetWidth\n         containerSize.current.h = containerRef.current.offsetHeight\n      }\n   }\n\n   const onMouseMove = () => {\n      if (containerRef.current) {\n         const rect = containerRef.current.getBoundingClientRect()\n         const { w, h } = containerSize.current\n         const x = mousePosition.x - rect.left\n         const y = mousePosition.y - rect.top\n         const inside = x < w && x > 0 && y < h && y > 0\n\n         mouse.current.x = x\n         mouse.current.y = y\n         boxes.forEach((box) => {\n            const boxX\n          = -(box.getBoundingClientRect().left - rect.left) + mouse.current.x\n            const boxY\n          = -(box.getBoundingClientRect().top - rect.top) + mouse.current.y\n            box.style.setProperty('--mouse-x', `${boxX}px`)\n            box.style.setProperty('--mouse-y', `${boxY}px`)\n\n            if (inside)\n               box.style.setProperty('--opacity', `1`)\n            else box.style.setProperty('--opacity', `0`)\n         })\n      }\n   }\n\n   return (\n      <div className={ny('size-full', className)} ref={containerRef}>\n         {children}\n      </div>\n   )\n}\n\ninterface MagicCardProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the card\n    */\n   as?: ReactElement\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the card\n    */\n   className?: string\n\n   /**\n    * @default \"\"\n    * @type ReactNode\n    * @description\n    * The children of the card\n    */\n   children?: ReactNode\n\n   /**\n    * @default 600\n    * @type number\n    * @description\n    * The size of the spotlight effect in pixels\n    */\n   size?: number\n\n   /**\n    * @default true\n    * @type boolean\n    * @description\n    * Whether to show the spotlight\n    */\n   spotlight?: boolean\n\n   /**\n    * @default \"rgba(255,255,255,0.03)\"\n    * @type string\n    * @description\n    * The color of the spotlight\n    */\n   spotlightColor?: string\n\n   /**\n    * @default true\n    * @type boolean\n    * @description\n    * Whether to isolate the card which is being hovered\n    */\n   isolated?: boolean\n\n   /**\n    * @default \"rgba(255,255,255,0.03)\"\n    * @type string\n    * @description\n    * The background of the card\n    */\n   background?: string\n\n   [key: string]: any\n}\n\nconst MagicCard: React.FC<MagicCardProps> = ({\n   className,\n   children,\n   size = 600,\n   spotlight = true,\n   borderColor = 'hsl(0 0% 98%)',\n   isolated = true,\n   ...props\n}) => {\n   return (\n      <div\n         style={\n            {\n               '--mask-size': `${size}px`,\n               '--border-color': `${borderColor}`,\n            } as CSSProperties\n         }\n         className={ny(\n            'relative z-0 size-full rounded-2xl p-6',\n            'bg-gray-300 dark:bg-gray-700',\n            'bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--border-color),transparent_100%)]',\n            className,\n         )}\n         {...props}\n      >\n         {children}\n\n         {/* Background */}\n         <div className=\"absolute inset-px -z-20 rounded-2xl bg-white dark:bg-black/95\" />\n      </div>\n   )\n}\n\nexport { MagicCard, MagicContainer }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { CSSProperties, ReactElement, ReactNode } from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface MousePosition {\n   x: number\n   y: number\n}\n\nfunction useMousePosition(): MousePosition {\n   const [mousePosition, setMousePosition] = useState<MousePosition>({\n      x: 0,\n      y: 0,\n   })\n\n   useEffect(() => {\n      const handleMouseMove = (event: globalThis.MouseEvent) => {\n         setMousePosition({ x: event.clientX, y: event.clientY })\n      }\n\n      window.addEventListener(\"mousemove\", handleMouseMove)\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMouseMove)\n      }\n   }, [])\n\n   return mousePosition\n}\n\ninterface MagicContainerProps {\n   children?: ReactNode\n   className?: string\n}\n\nfunction MagicContainer({ children, className }: MagicContainerProps) {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const mousePosition = useMousePosition()\n   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })\n   const containerSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })\n   const [boxes, setBoxes] = useState<Array<HTMLElement>>([])\n\n   useEffect(() => {\n      init()\n      containerRef.current &&\n         setBoxes(\n            Array.from(containerRef.current.children).map(\n               (el) => el as HTMLElement,\n            ),\n         )\n   }, [])\n\n   useEffect(() => {\n      init()\n      window.addEventListener(\"resize\", init)\n\n      return () => {\n         window.removeEventListener(\"resize\", init)\n      }\n   }, [setBoxes])\n\n   useEffect(() => {\n      onMouseMove()\n   }, [mousePosition])\n\n   const init = () => {\n      if (containerRef.current) {\n         containerSize.current.w = containerRef.current.offsetWidth\n         containerSize.current.h = containerRef.current.offsetHeight\n      }\n   }\n\n   const onMouseMove = () => {\n      if (containerRef.current) {\n         const rect = containerRef.current.getBoundingClientRect()\n         const { w, h } = containerSize.current\n         const x = mousePosition.x - rect.left\n         const y = mousePosition.y - rect.top\n         const inside = x < w && x > 0 && y < h && y > 0\n\n         mouse.current.x = x\n         mouse.current.y = y\n         boxes.forEach((box) => {\n            const boxX =\n               -(box.getBoundingClientRect().left - rect.left) + mouse.current.x\n            const boxY =\n               -(box.getBoundingClientRect().top - rect.top) + mouse.current.y\n            box.style.setProperty(\"--mouse-x\", `${boxX}px`)\n            box.style.setProperty(\"--mouse-y\", `${boxY}px`)\n\n            if (inside) box.style.setProperty(\"--opacity\", `1`)\n            else box.style.setProperty(\"--opacity\", `0`)\n         })\n      }\n   }\n\n   return (\n      <div className={ny(\"size-full\", className)} ref={containerRef}>\n         {children}\n      </div>\n   )\n}\n\ninterface MagicCardProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the card\n    */\n   as?: ReactElement\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the card\n    */\n   className?: string\n\n   /**\n    * @default \"\"\n    * @type ReactNode\n    * @description\n    * The children of the card\n    */\n   children?: ReactNode\n\n   /**\n    * @default 600\n    * @type number\n    * @description\n    * The size of the spotlight effect in pixels\n    */\n   size?: number\n\n   /**\n    * @default true\n    * @type boolean\n    * @description\n    * Whether to show the spotlight\n    */\n   spotlight?: boolean\n\n   /**\n    * @default \"rgba(255,255,255,0.03)\"\n    * @type string\n    * @description\n    * The color of the spotlight\n    */\n   spotlightColor?: string\n\n   /**\n    * @default true\n    * @type boolean\n    * @description\n    * Whether to isolate the card which is being hovered\n    */\n   isolated?: boolean\n\n   /**\n    * @default \"rgba(255,255,255,0.03)\"\n    * @type string\n    * @description\n    * The background of the card\n    */\n   background?: string\n\n   [key: string]: any\n}\n\nconst MagicCard: React.FC<MagicCardProps> = ({\n   className,\n   children,\n   size = 600,\n   spotlight = true,\n   borderColor = \"hsl(0 0% 98%)\",\n   isolated = true,\n   ...props\n}) => {\n   return (\n      <div\n         style={\n            {\n               \"--mask-size\": `${size}px`,\n               \"--border-color\": `${borderColor}`,\n            } as CSSProperties\n         }\n         className={ny(\n            \"relative z-0 size-full rounded-2xl p-6\",\n            \"bg-gray-300 dark:bg-gray-700\",\n            \"bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--border-color),transparent_100%)]\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n\n         {/* Background */}\n         <div className=\"absolute inset-px -z-20 rounded-2xl bg-white dark:bg-black/95\" />\n      </div>\n   )\n}\n\nexport { MagicCard, MagicContainer }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/marquee-3d.json b/apps/web/public/r/styles/miami/marquee-3d.json
index 3dfb956a..dfd0d5e7 100644
--- a/apps/web/public/r/styles/miami/marquee-3d.json
+++ b/apps/web/public/r/styles/miami/marquee-3d.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "marquee-3d",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/marquee-3d.tsx",
-      "content": "import Marquee from '~/registry/miami/ui/marquee'\n\nconst logos = [\n   {\n      name: 'Microsoft',\n      img: 'https://picsum.photos/id/1/200/300',\n   },\n   {\n      name: 'Apple',\n      img: 'https://picsum.photos/id/2/200/300',\n   },\n   {\n      name: 'Google',\n      img: 'https://picsum.photos/id/3/200/300',\n   },\n   {\n      name: 'Facebook',\n      img: 'https://picsum.photos/id/4/200/300',\n   },\n   {\n      name: 'LinkedIn',\n      img: 'https://picsum.photos/id/5/200/300',\n   },\n   {\n      name: 'Twitter',\n      img: 'https://picsum.photos/id/6/200/300',\n   },\n]\n\nfunction Marquee3D() {\n   return (\n      <div className=\"bg-background relative flex h-full w-96 flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border px-20 md:shadow-xl\">\n         <div className=\"flex flex-row gap-4 [perspective:300px]\">\n            <Marquee\n               className=\"h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]\"\n               vertical\n               style={{\n                  transform:\n              'translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)',\n               }}\n            >\n               {logos.map((data, idx) => (\n                  <img\n                     key={idx}\n                     src={data.img}\n                     alt={data.name}\n                     className=\"mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300\"\n                  />\n               ))}\n            </Marquee>\n         </div>\n\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default Marquee3D\n",
-      "type": "registry:component",
+      "path": "examples/marquee-3d.tsx",
+      "content": "import Marquee from \"~/registry/miami/ui/marquee\"\n\nconst logos = [\n   {\n      name: \"Microsoft\",\n      img: \"https://picsum.photos/id/1/200/300\",\n   },\n   {\n      name: \"Apple\",\n      img: \"https://picsum.photos/id/2/200/300\",\n   },\n   {\n      name: \"Google\",\n      img: \"https://picsum.photos/id/3/200/300\",\n   },\n   {\n      name: \"Facebook\",\n      img: \"https://picsum.photos/id/4/200/300\",\n   },\n   {\n      name: \"LinkedIn\",\n      img: \"https://picsum.photos/id/5/200/300\",\n   },\n   {\n      name: \"Twitter\",\n      img: \"https://picsum.photos/id/6/200/300\",\n   },\n]\n\nfunction Marquee3D() {\n   return (\n      <div className=\"bg-background relative flex h-full w-96 flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border px-20 md:shadow-xl\">\n         <div className=\"flex flex-row gap-4 [perspective:300px]\">\n            <Marquee\n               className=\"h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]\"\n               vertical\n               style={{\n                  transform:\n                     \"translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)\",\n               }}\n            >\n               {logos.map((data, idx) => (\n                  <img\n                     key={idx}\n                     src={data.img}\n                     alt={data.name}\n                     className=\"mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300\"\n                  />\n               ))}\n            </Marquee>\n         </div>\n\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default Marquee3D\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/marquee-demo-vertical.json b/apps/web/public/r/styles/miami/marquee-demo-vertical.json
index 7dc445d2..8b6998a3 100644
--- a/apps/web/public/r/styles/miami/marquee-demo-vertical.json
+++ b/apps/web/public/r/styles/miami/marquee-demo-vertical.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "marquee-demo-vertical",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/marquee-demo-vertical.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport Marquee from '~/registry/miami/ui/marquee'\n\nconst reviews = [\n   {\n      name: 'Jack',\n      username: '@jack',\n      body: 'I\\'ve never seen anything like this before. It\\'s amazing. I love it.',\n      img: 'https://avatar.vercel.sh/jack',\n   },\n   {\n      name: 'Jill',\n      username: '@jill',\n      body: 'I don\\'t know what to say. I\\'m speechless. This is amazing.',\n      img: 'https://avatar.vercel.sh/jill',\n   },\n   {\n      name: 'John',\n      username: '@john',\n      body: 'I\\'m at a loss for words. This is amazing. I love it.',\n      img: 'https://avatar.vercel.sh/john',\n   },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nfunction ReviewCard({\n   img,\n   name,\n   username,\n   body,\n}: {\n   img: string\n   name: string\n   username: string\n   body: string\n}) {\n   return (\n      <figure\n         className={ny(\n            'relative h-40 w-36 cursor-pointer overflow-hidden rounded-xl border p-4',\n            // light styles\n            'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',\n            // dark styles\n            'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-2\">\n            <img className=\"rounded-full\" width=\"32\" height=\"32\" alt=\"\" src={img} />\n            <div className=\"flex flex-col\">\n               <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {name}\n               </figcaption>\n               <p className=\"text-xs font-medium dark:text-white/40\">{username}</p>\n            </div>\n         </div>\n         <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n      </figure>\n   )\n}\n\nfunction MarqueeDemoVertical() {\n   return (\n      <div className=\"bg-background relative flex h-96 flex-row items-center justify-center overflow-hidden rounded-lg border sm:px-20 md:shadow-xl\">\n         <Marquee pauseOnHover vertical className=\"[--duration:20s]\">\n            {firstRow.map(review => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <Marquee reverse pauseOnHover vertical className=\"[--duration:20s]\">\n            {secondRow.map(review => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeDemoVertical\n",
-      "type": "registry:component",
+      "path": "examples/marquee-demo-vertical.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport Marquee from \"~/registry/miami/ui/marquee\"\n\nconst reviews = [\n   {\n      name: \"Jack\",\n      username: \"@jack\",\n      body: \"I've never seen anything like this before. It's amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jack\",\n   },\n   {\n      name: \"Jill\",\n      username: \"@jill\",\n      body: \"I don't know what to say. I'm speechless. This is amazing.\",\n      img: \"https://avatar.vercel.sh/jill\",\n   },\n   {\n      name: \"John\",\n      username: \"@john\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/john\",\n   },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nfunction ReviewCard({\n   img,\n   name,\n   username,\n   body,\n}: {\n   img: string\n   name: string\n   username: string\n   body: string\n}) {\n   return (\n      <figure\n         className={ny(\n            \"relative h-40 w-36 cursor-pointer overflow-hidden rounded-xl border p-4\",\n            // light styles\n            \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n            // dark styles\n            \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-2\">\n            <img\n               className=\"rounded-full\"\n               width=\"32\"\n               height=\"32\"\n               alt=\"\"\n               src={img}\n            />\n            <div className=\"flex flex-col\">\n               <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {name}\n               </figcaption>\n               <p className=\"text-xs font-medium dark:text-white/40\">\n                  {username}\n               </p>\n            </div>\n         </div>\n         <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n      </figure>\n   )\n}\n\nfunction MarqueeDemoVertical() {\n   return (\n      <div className=\"bg-background relative flex h-96 flex-row items-center justify-center overflow-hidden rounded-lg border sm:px-20 md:shadow-xl\">\n         <Marquee pauseOnHover vertical className=\"[--duration:20s]\">\n            {firstRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <Marquee reverse pauseOnHover vertical className=\"[--duration:20s]\">\n            {secondRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeDemoVertical\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/marquee-demo.json b/apps/web/public/r/styles/miami/marquee-demo.json
index b931e57f..d0071368 100644
--- a/apps/web/public/r/styles/miami/marquee-demo.json
+++ b/apps/web/public/r/styles/miami/marquee-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "marquee-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/marquee-demo.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport Marquee from '~/registry/miami/ui/marquee'\n\nconst reviews = [\n   {\n      name: 'Jack',\n      username: '@jack',\n      body: 'I\\'ve never seen anything like this before. It\\'s amazing. I love it.',\n      img: 'https://avatar.vercel.sh/jack',\n   },\n   {\n      name: 'Jill',\n      username: '@jill',\n      body: 'I don\\'t know what to say. I\\'m speechless. This is amazing.',\n      img: 'https://avatar.vercel.sh/jill',\n   },\n   {\n      name: 'John',\n      username: '@john',\n      body: 'I\\'m at a loss for words. This is amazing. I love it.',\n      img: 'https://avatar.vercel.sh/john',\n   },\n   {\n      name: 'Jane',\n      username: '@jane',\n      body: 'I\\'m at a loss for words. This is amazing. I love it.',\n      img: 'https://avatar.vercel.sh/jane',\n   },\n   {\n      name: 'Jenny',\n      username: '@jenny',\n      body: 'I\\'m at a loss for words. This is amazing. I love it.',\n      img: 'https://avatar.vercel.sh/jenny',\n   },\n   {\n      name: 'James',\n      username: '@james',\n      body: 'I\\'m at a loss for words. This is amazing. I love it.',\n      img: 'https://avatar.vercel.sh/james',\n   },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nfunction ReviewCard({\n   img,\n   name,\n   username,\n   body,\n}: {\n   img: string\n   name: string\n   username: string\n   body: string\n}) {\n   return (\n      <figure\n         className={ny(\n            'relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4',\n            // light styles\n            'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',\n            // dark styles\n            'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-2\">\n            <img className=\"rounded-full\" width=\"32\" height=\"32\" alt=\"\" src={img} />\n            <div className=\"flex flex-col\">\n               <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {name}\n               </figcaption>\n               <p className=\"text-xs font-medium dark:text-white/40\">{username}</p>\n            </div>\n         </div>\n         <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n      </figure>\n   )\n}\n\nfunction MarqueeDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full flex-col items-center justify-center overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n         <Marquee pauseOnHover className=\"[--duration:20s]\">\n            {firstRow.map(review => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <Marquee reverse pauseOnHover className=\"[--duration:20s]\">\n            {secondRow.map(review => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeDemo\n",
-      "type": "registry:component",
+      "path": "examples/marquee-demo.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport Marquee from \"~/registry/miami/ui/marquee\"\n\nconst reviews = [\n   {\n      name: \"Jack\",\n      username: \"@jack\",\n      body: \"I've never seen anything like this before. It's amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jack\",\n   },\n   {\n      name: \"Jill\",\n      username: \"@jill\",\n      body: \"I don't know what to say. I'm speechless. This is amazing.\",\n      img: \"https://avatar.vercel.sh/jill\",\n   },\n   {\n      name: \"John\",\n      username: \"@john\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/john\",\n   },\n   {\n      name: \"Jane\",\n      username: \"@jane\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jane\",\n   },\n   {\n      name: \"Jenny\",\n      username: \"@jenny\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jenny\",\n   },\n   {\n      name: \"James\",\n      username: \"@james\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/james\",\n   },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nfunction ReviewCard({\n   img,\n   name,\n   username,\n   body,\n}: {\n   img: string\n   name: string\n   username: string\n   body: string\n}) {\n   return (\n      <figure\n         className={ny(\n            \"relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4\",\n            // light styles\n            \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n            // dark styles\n            \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-2\">\n            <img\n               className=\"rounded-full\"\n               width=\"32\"\n               height=\"32\"\n               alt=\"\"\n               src={img}\n            />\n            <div className=\"flex flex-col\">\n               <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {name}\n               </figcaption>\n               <p className=\"text-xs font-medium dark:text-white/40\">\n                  {username}\n               </p>\n            </div>\n         </div>\n         <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n      </figure>\n   )\n}\n\nfunction MarqueeDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full flex-col items-center justify-center overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n         <Marquee pauseOnHover className=\"[--duration:20s]\">\n            {firstRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <Marquee reverse pauseOnHover className=\"[--duration:20s]\">\n            {secondRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/marquee-logos.json b/apps/web/public/r/styles/miami/marquee-logos.json
index 07e531c2..ce1e2a92 100644
--- a/apps/web/public/r/styles/miami/marquee-logos.json
+++ b/apps/web/public/r/styles/miami/marquee-logos.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "marquee-logos",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/marquee-logos.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport Marquee from '~/registry/miami/ui/marquee'\n\nconst logos = [\n   {\n      name: 'Microsoft',\n      img: 'https://cdn.simpleicons.org/microsoft/000/fff',\n   },\n   {\n      name: 'Apple',\n      img: 'https://cdn.simpleicons.org/apple/000/fff',\n   },\n   {\n      name: 'Google',\n      img: 'https://cdn.simpleicons.org/google/000/fff',\n   },\n   {\n      name: 'Facebook',\n      img: 'https://cdn.simpleicons.org/facebook/000/fff',\n   },\n   {\n      name: 'LinkedIn',\n      img: 'https://cdn.simpleicons.org/linkedin/000/fff',\n   },\n   {\n      name: 'Twitter',\n      img: 'https://cdn.simpleicons.org/twitter/000/fff',\n   },\n]\n\nfunction Logo({ name, img }: { name: string, img: string }) {\n   return (\n      <div className={ny('size-12 cursor-pointer')}>\n         <img src={img} alt={name} />\n      </div>\n   )\n}\n\nfunction MarqueeLogos() {\n   return (\n      <div className=\"bg-background relative flex size-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n         <Marquee className=\"[--gap:3rem]\">\n            {logos.map((logo, idx) => (\n               <Logo key={idx} {...logo} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeLogos\n",
-      "type": "registry:component",
+      "path": "examples/marquee-logos.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport Marquee from \"~/registry/miami/ui/marquee\"\n\nconst logos = [\n   {\n      name: \"Microsoft\",\n      img: \"https://cdn.simpleicons.org/microsoft/000/fff\",\n   },\n   {\n      name: \"Apple\",\n      img: \"https://cdn.simpleicons.org/apple/000/fff\",\n   },\n   {\n      name: \"Google\",\n      img: \"https://cdn.simpleicons.org/google/000/fff\",\n   },\n   {\n      name: \"Facebook\",\n      img: \"https://cdn.simpleicons.org/facebook/000/fff\",\n   },\n   {\n      name: \"LinkedIn\",\n      img: \"https://cdn.simpleicons.org/linkedin/000/fff\",\n   },\n   {\n      name: \"Twitter\",\n      img: \"https://cdn.simpleicons.org/twitter/000/fff\",\n   },\n]\n\nfunction Logo({ name, img }: { name: string; img: string }) {\n   return (\n      <div className={ny(\"size-12 cursor-pointer\")}>\n         <img src={img} alt={name} />\n      </div>\n   )\n}\n\nfunction MarqueeLogos() {\n   return (\n      <div className=\"bg-background relative flex size-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n         <Marquee className=\"[--gap:3rem]\">\n            {logos.map((logo, idx) => (\n               <Logo key={idx} {...logo} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeLogos\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/marquee.json b/apps/web/public/r/styles/miami/marquee.json
index 7608b3bd..28e061e7 100644
--- a/apps/web/public/r/styles/miami/marquee.json
+++ b/apps/web/public/r/styles/miami/marquee.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "marquee",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/marquee.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\ninterface MarqueeProps {\n   className?: string\n   reverse?: boolean\n   pauseOnHover?: boolean\n   children?: React.ReactNode\n   vertical?: boolean\n   repeat?: number\n   [key: string]: any\n}\n\nexport default function Marquee({\n   className,\n   reverse,\n   pauseOnHover = false,\n   children,\n   vertical = false,\n   repeat = 4,\n   ...props\n}: MarqueeProps) {\n   return (\n      <div\n         {...props}\n         className={ny(\n            'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]',\n            {\n               'flex-row': !vertical,\n               'flex-col': vertical,\n            },\n            className,\n         )}\n      >\n         {Array(repeat)\n            .fill(0)\n            .map((_, i) => (\n               <div\n                  key={i}\n                  className={ny('flex shrink-0 justify-around [gap:var(--gap)]', {\n                     'animate-marquee flex-row': !vertical,\n                     'animate-marquee-vertical flex-col': vertical,\n                     'group-hover:[animation-play-state:paused]': pauseOnHover,\n                     '[animation-direction:reverse]': reverse,\n                  })}\n               >\n                  {children}\n               </div>\n            ))}\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/lib/utils\"\n\ninterface MarqueeProps {\n   className?: string\n   reverse?: boolean\n   pauseOnHover?: boolean\n   children?: React.ReactNode\n   vertical?: boolean\n   repeat?: number\n   [key: string]: any\n}\n\nexport default function Marquee({\n   className,\n   reverse,\n   pauseOnHover = false,\n   children,\n   vertical = false,\n   repeat = 4,\n   ...props\n}: MarqueeProps) {\n   return (\n      <div\n         {...props}\n         className={ny(\n            \"group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]\",\n            {\n               \"flex-row\": !vertical,\n               \"flex-col\": vertical,\n            },\n            className,\n         )}\n      >\n         {Array(repeat)\n            .fill(0)\n            .map((_, i) => (\n               <div\n                  key={i}\n                  className={ny(\n                     \"flex shrink-0 justify-around [gap:var(--gap)]\",\n                     {\n                        \"animate-marquee flex-row\": !vertical,\n                        \"animate-marquee-vertical flex-col\": vertical,\n                        \"group-hover:[animation-play-state:paused]\":\n                           pauseOnHover,\n                        \"[animation-direction:reverse]\": reverse,\n                     },\n                  )}\n               >\n                  {children}\n               </div>\n            ))}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/menubar-demo.json b/apps/web/public/r/styles/miami/menubar-demo.json
index b39b99a3..c23775ad 100644
--- a/apps/web/public/r/styles/miami/menubar-demo.json
+++ b/apps/web/public/r/styles/miami/menubar-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "menubar-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "menubar"
   ],
   "files": [
     {
-      "path": "example/menubar-demo.tsx",
-      "content": "import {\n   Menubar,\n   MenubarCheckboxItem,\n   MenubarContent,\n   MenubarItem,\n   MenubarMenu,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarSeparator,\n   MenubarShortcut,\n   MenubarSub,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarTrigger,\n} from '~/registry/miami/ui/menubar'\n\nexport default function MenubarDemo() {\n   return (\n      <Menubar>\n         <MenubarMenu>\n            <MenubarTrigger>File</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  New Tab\n                  {' '}\n                  <MenubarShortcut>⌘T</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  New Window\n                  {' '}\n                  <MenubarShortcut>⌘N</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled>New Incognito Window</MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Share</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Email link</MenubarItem>\n                     <MenubarItem>Messages</MenubarItem>\n                     <MenubarItem>Notes</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>\n                  Print...\n                  {' '}\n                  <MenubarShortcut>⌘P</MenubarShortcut>\n               </MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Edit</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  Undo\n                  {' '}\n                  <MenubarShortcut>⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  Redo\n                  {' '}\n                  <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Find</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Search the web</MenubarItem>\n                     <MenubarSeparator />\n                     <MenubarItem>Find...</MenubarItem>\n                     <MenubarItem>Find Next</MenubarItem>\n                     <MenubarItem>Find Previous</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>Cut</MenubarItem>\n               <MenubarItem>Copy</MenubarItem>\n               <MenubarItem>Paste</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>View</MenubarTrigger>\n            <MenubarContent>\n               <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n               <MenubarCheckboxItem checked>\n                  Always Show Full URLs\n               </MenubarCheckboxItem>\n               <MenubarSeparator />\n               <MenubarItem inset>\n                  Reload\n                  {' '}\n                  <MenubarShortcut>⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled inset>\n                  Force Reload\n                  {' '}\n                  <MenubarShortcut>⇧⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Hide Sidebar</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Profiles</MenubarTrigger>\n            <MenubarContent>\n               <MenubarRadioGroup value=\"benoit\">\n                  <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n                  <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n                  <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n               </MenubarRadioGroup>\n               <MenubarSeparator />\n               <MenubarItem inset>Edit...</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n      </Menubar>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/menubar-demo.tsx",
+      "content": "import {\n   Menubar,\n   MenubarCheckboxItem,\n   MenubarContent,\n   MenubarItem,\n   MenubarMenu,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarSeparator,\n   MenubarShortcut,\n   MenubarSub,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarTrigger,\n} from \"~/registry/miami/ui/menubar\"\n\nexport default function MenubarDemo() {\n   return (\n      <Menubar>\n         <MenubarMenu>\n            <MenubarTrigger>File</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  New Window <MenubarShortcut>⌘N</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled>New Incognito Window</MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Share</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Email link</MenubarItem>\n                     <MenubarItem>Messages</MenubarItem>\n                     <MenubarItem>Notes</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>\n                  Print... <MenubarShortcut>⌘P</MenubarShortcut>\n               </MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Edit</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Find</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Search the web</MenubarItem>\n                     <MenubarSeparator />\n                     <MenubarItem>Find...</MenubarItem>\n                     <MenubarItem>Find Next</MenubarItem>\n                     <MenubarItem>Find Previous</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>Cut</MenubarItem>\n               <MenubarItem>Copy</MenubarItem>\n               <MenubarItem>Paste</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>View</MenubarTrigger>\n            <MenubarContent>\n               <MenubarCheckboxItem>\n                  Always Show Bookmarks Bar\n               </MenubarCheckboxItem>\n               <MenubarCheckboxItem checked>\n                  Always Show Full URLs\n               </MenubarCheckboxItem>\n               <MenubarSeparator />\n               <MenubarItem inset>\n                  Reload <MenubarShortcut>⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled inset>\n                  Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Hide Sidebar</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Profiles</MenubarTrigger>\n            <MenubarContent>\n               <MenubarRadioGroup value=\"benoit\">\n                  <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n                  <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n                  <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n               </MenubarRadioGroup>\n               <MenubarSeparator />\n               <MenubarItem inset>Edit...</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n      </Menubar>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/menubar.json b/apps/web/public/r/styles/miami/menubar.json
index c7373662..31f6e504 100644
--- a/apps/web/public/r/styles/miami/menubar.json
+++ b/apps/web/public/r/styles/miami/menubar.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "menubar",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-menubar"
   ],
   "files": [
     {
       "path": "ui/menubar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   CheckIcon,\n   ChevronRightIcon,\n   DotFilledIcon,\n} from '@radix-ui/react-icons'\nimport * as MenubarPrimitive from '@radix-ui/react-menubar'\n\nimport { ny } from '~/lib/utils'\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Root\n      ref={ref}\n      className={ny(\n         'bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-sm',\n         className,\n      )}\n      {...props}\n   />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Trigger\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none',\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <MenubarPrimitive.SubTrigger\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n   </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.SubContent\n      ref={ref}\n      className={ny(\n         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n   (\n      { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props },\n      ref,\n   ) => (\n      <MenubarPrimitive.Portal>\n         <MenubarPrimitive.Content\n            ref={ref}\n            align={align}\n            alignOffset={alignOffset}\n            sideOffset={sideOffset}\n            className={ny(\n               'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md',\n               className,\n            )}\n            {...props}\n         />\n      </MenubarPrimitive.Portal>\n   ),\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <MenubarPrimitive.Item\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <MenubarPrimitive.CheckboxItem\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <MenubarPrimitive.ItemIndicator>\n            <CheckIcon className=\"size-4\" />\n         </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <MenubarPrimitive.RadioItem\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <MenubarPrimitive.ItemIndicator>\n            <DotFilledIcon className=\"size-4 fill-current\" />\n         </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <MenubarPrimitive.Label\n      ref={ref}\n      className={ny(\n         'px-2 py-1.5 text-sm font-semibold',\n         inset && 'pl-8',\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Separator\n      ref={ref}\n      className={ny('bg-muted -mx-1 my-1 h-px', className)}\n      {...props}\n   />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nfunction MenubarShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\n            'text-muted-foreground ml-auto text-xs tracking-widest',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nMenubarShortcut.displayname = 'MenubarShortcut'\n\nexport {\n   Menubar,\n   MenubarMenu,\n   MenubarTrigger,\n   MenubarContent,\n   MenubarItem,\n   MenubarSeparator,\n   MenubarLabel,\n   MenubarCheckboxItem,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarPortal,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarGroup,\n   MenubarSub,\n   MenubarShortcut,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport {\n   CheckIcon,\n   ChevronRightIcon,\n   DotFilledIcon,\n} from \"@radix-ui/react-icons\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Root\n      ref={ref}\n      className={ny(\n         \"bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-sm\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Trigger\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <MenubarPrimitive.SubTrigger\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n   </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.SubContent\n      ref={ref}\n      className={ny(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n   (\n      {\n         className,\n         align = \"start\",\n         alignOffset = -4,\n         sideOffset = 8,\n         ...props\n      },\n      ref,\n   ) => (\n      <MenubarPrimitive.Portal>\n         <MenubarPrimitive.Content\n            ref={ref}\n            align={align}\n            alignOffset={alignOffset}\n            sideOffset={sideOffset}\n            className={ny(\n               \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md\",\n               className,\n            )}\n            {...props}\n         />\n      </MenubarPrimitive.Portal>\n   ),\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <MenubarPrimitive.Item\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <MenubarPrimitive.CheckboxItem\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <MenubarPrimitive.ItemIndicator>\n            <CheckIcon className=\"size-4\" />\n         </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <MenubarPrimitive.RadioItem\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <MenubarPrimitive.ItemIndicator>\n            <DotFilledIcon className=\"size-4 fill-current\" />\n         </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <MenubarPrimitive.Label\n      ref={ref}\n      className={ny(\n         \"px-2 py-1.5 text-sm font-semibold\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Separator\n      ref={ref}\n      className={ny(\"bg-muted -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nfunction MenubarShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={ny(\n            \"text-muted-foreground ml-auto text-xs tracking-widest\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n   Menubar,\n   MenubarMenu,\n   MenubarTrigger,\n   MenubarContent,\n   MenubarItem,\n   MenubarSeparator,\n   MenubarLabel,\n   MenubarCheckboxItem,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarPortal,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarGroup,\n   MenubarSub,\n   MenubarShortcut,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/meteors-demo.json b/apps/web/public/r/styles/miami/meteors-demo.json
index 7f8086ff..bdd55f40 100644
--- a/apps/web/public/r/styles/miami/meteors-demo.json
+++ b/apps/web/public/r/styles/miami/meteors-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "meteors-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/meteors-demo.tsx",
-      "content": "import Meteors from '~/registry/miami/ui/meteors'\n\nexport default function MeteorDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <Meteors number={30} />\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Meteors\n         </p>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/meteors-demo.tsx",
+      "content": "import Meteors from \"~/registry/miami/ui/meteors\"\n\nexport default function MeteorDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <Meteors number={30} />\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Meteors\n         </p>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/meteors.json b/apps/web/public/r/styles/miami/meteors.json
index d0cba27f..098ee2f7 100644
--- a/apps/web/public/r/styles/miami/meteors.json
+++ b/apps/web/public/r/styles/miami/meteors.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "meteors",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/meteors.tsx",
-      "content": "'use client'\n\nimport clsx from 'clsx'\nimport { useEffect, useState } from 'react'\n\ninterface MeteorsProps {\n   number?: number\n}\nexport function Meteors({ number = 20 }: MeteorsProps) {\n   const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(\n      [],\n   )\n\n   useEffect(() => {\n      const styles = [...new Array(number)].map(() => ({\n         top: -5,\n         left: `${Math.floor(Math.random() * window.innerWidth)}px`,\n         animationDelay: `${Math.random() * 1 + 0.2}s`,\n         animationDuration: `${Math.floor(Math.random() * 8 + 2)}s`,\n      }))\n      setMeteorStyles(styles)\n   }, [number])\n\n   return (\n      <>\n         {[...meteorStyles].map((style, idx) => (\n            // Meteor Head\n            <span\n               key={idx}\n               className={clsx(\n                  'pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]',\n               )}\n               style={style}\n            >\n               {/* Meteor Tail */}\n               <div className=\"pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent\" />\n            </span>\n         ))}\n      </>\n   )\n}\n\nexport default Meteors\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport clsx from \"clsx\"\nimport { useEffect, useState } from \"react\"\n\ninterface MeteorsProps {\n   number?: number\n}\nexport function Meteors({ number = 20 }: MeteorsProps) {\n   const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(\n      [],\n   )\n\n   useEffect(() => {\n      const styles = [...new Array(number)].map(() => ({\n         top: -5,\n         left: `${Math.floor(Math.random() * window.innerWidth)}px`,\n         animationDelay: `${Math.random() * 1 + 0.2}s`,\n         animationDuration: `${Math.floor(Math.random() * 8 + 2)}s`,\n      }))\n      setMeteorStyles(styles)\n   }, [number])\n\n   return (\n      <>\n         {[...meteorStyles].map((style, idx) => (\n            // Meteor Head\n            <span\n               key={idx}\n               className={clsx(\n                  \"pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]\",\n               )}\n               style={style}\n            >\n               {/* Meteor Tail */}\n               <div className=\"pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent\" />\n            </span>\n         ))}\n      </>\n   )\n}\n\nexport default Meteors\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/mode-toggle-group.json b/apps/web/public/r/styles/miami/mode-toggle-group.json
index 07b1c161..9bacb808 100644
--- a/apps/web/public/r/styles/miami/mode-toggle-group.json
+++ b/apps/web/public/r/styles/miami/mode-toggle-group.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "mode-toggle-group",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/mode-toggle.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { MoonIcon, SunIcon } from '@radix-ui/react-icons'\nimport { useTheme } from 'next-themes'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\n\nexport default function ModeToggle() {\n   const { setTheme } = useTheme()\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n               <SunIcon className=\"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n               <MoonIcon className=\"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n               <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem onClick={() => setTheme('light')}>\n               Light\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme('dark')}>\n               Dark\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme('system')}>\n               System\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "path": "examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport { MoonIcon, SunIcon } from \"@radix-ui/react-icons\"\nimport { useTheme } from \"next-themes\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n   const { setTheme } = useTheme()\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n               <SunIcon className=\"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n               <MoonIcon className=\"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n               <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n               Light\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n               Dark\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n               System\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/mode-toggle.json b/apps/web/public/r/styles/miami/mode-toggle.json
index 937aa43e..8882aa01 100644
--- a/apps/web/public/r/styles/miami/mode-toggle.json
+++ b/apps/web/public/r/styles/miami/mode-toggle.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "mode-toggle",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/mode-toggle.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { MoonIcon, SunIcon } from '@radix-ui/react-icons'\nimport { useTheme } from 'next-themes'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\n\nexport default function ModeToggle() {\n   const { setTheme } = useTheme()\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n               <SunIcon className=\"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n               <MoonIcon className=\"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n               <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem onClick={() => setTheme('light')}>\n               Light\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme('dark')}>\n               Dark\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme('system')}>\n               System\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "path": "examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport { MoonIcon, SunIcon } from \"@radix-ui/react-icons\"\nimport { useTheme } from \"next-themes\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n   const { setTheme } = useTheme()\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n               <SunIcon className=\"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n               <MoonIcon className=\"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n               <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n               Light\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n               Dark\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n               System\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/morphing-text-demo.json b/apps/web/public/r/styles/miami/morphing-text-demo.json
new file mode 100644
index 00000000..17c84452
--- /dev/null
+++ b/apps/web/public/r/styles/miami/morphing-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "morphing-text-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/morphing-text-demo.tsx",
+      "content": "import { MorphingText } from \"~/registry/miami/ui/morphing-text\"\n\nconst texts = [\n   \"Hello\",\n   \"Morphing\",\n   \"Text\",\n   \"Animation\",\n   \"React\",\n   \"Component\",\n   \"Smooth\",\n   \"Transition\",\n   \"Engaging\",\n]\n\nexport default function MorphingTextDemo() {\n   return <MorphingText texts={texts} />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/morphing-text.json b/apps/web/public/r/styles/miami/morphing-text.json
new file mode 100644
index 00000000..08c03ddc
--- /dev/null
+++ b/apps/web/public/r/styles/miami/morphing-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "morphing-text",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/morphing-text.tsx",
+      "content": "\"use client\"\n\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { ny } from \"~/registry/miami/lib/utils\"\n\nconst morphTime = 1.5\nconst cooldownTime = 0.5\n\nconst useMorphingText = (texts: string[]) => {\n   const textIndexRef = useRef(0)\n   const morphRef = useRef(0)\n   const cooldownRef = useRef(0)\n   const timeRef = useRef(new Date())\n\n   const text1Ref = useRef<HTMLSpanElement>(null)\n   const text2Ref = useRef<HTMLSpanElement>(null)\n\n   const setStyles = useCallback(\n      (fraction: number) => {\n         const [current1, current2] = [text1Ref.current, text2Ref.current]\n         if (!current1 || !current2) return\n\n         current2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`\n         current2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`\n\n         const invertedFraction = 1 - fraction\n         current1.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`\n         current1.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`\n\n         current1.textContent = texts[textIndexRef.current % texts.length]\n         current2.textContent = texts[(textIndexRef.current + 1) % texts.length]\n      },\n      [texts],\n   )\n\n   const doMorph = useCallback(() => {\n      morphRef.current -= cooldownRef.current\n      cooldownRef.current = 0\n\n      let fraction = morphRef.current / morphTime\n\n      if (fraction > 1) {\n         cooldownRef.current = cooldownTime\n         fraction = 1\n      }\n\n      setStyles(fraction)\n\n      if (fraction === 1) {\n         textIndexRef.current++\n      }\n   }, [setStyles])\n\n   const doCooldown = useCallback(() => {\n      morphRef.current = 0\n      const [current1, current2] = [text1Ref.current, text2Ref.current]\n      if (current1 && current2) {\n         current2.style.filter = \"none\"\n         current2.style.opacity = \"100%\"\n         current1.style.filter = \"none\"\n         current1.style.opacity = \"0%\"\n      }\n   }, [])\n\n   useEffect(() => {\n      let animationFrameId: number\n\n      const animate = () => {\n         animationFrameId = requestAnimationFrame(animate)\n\n         const newTime = new Date()\n         const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000\n         timeRef.current = newTime\n\n         cooldownRef.current -= dt\n\n         if (cooldownRef.current <= 0) doMorph()\n         else doCooldown()\n      }\n\n      animate()\n      return () => {\n         cancelAnimationFrame(animationFrameId)\n      }\n   }, [doMorph, doCooldown])\n\n   return { text1Ref, text2Ref }\n}\n\ninterface MorphingTextProps {\n   className?: string\n   texts: string[]\n}\n\nconst Texts: React.FC<Pick<MorphingTextProps, \"texts\">> = ({ texts }) => {\n   const { text1Ref, text2Ref } = useMorphingText(texts)\n   return (\n      <>\n         <span\n            className=\"absolute inset-x-0 top-0 m-auto inline-block w-full\"\n            ref={text1Ref}\n         />\n         <span\n            className=\"absolute inset-x-0 top-0 m-auto inline-block w-full\"\n            ref={text2Ref}\n         />\n      </>\n   )\n}\n\nconst SvgFilters: React.FC = () => (\n   <svg\n      id=\"filters\"\n      className=\"fixed h-0 w-0\"\n      preserveAspectRatio=\"xMidYMid slice\"\n   >\n      <defs>\n         <filter id=\"threshold\">\n            <feColorMatrix\n               in=\"SourceGraphic\"\n               type=\"matrix\"\n               values=\"1 0 0 0 0\n                  0 1 0 0 0\n                  0 0 1 0 0\n                  0 0 0 255 -140\"\n            />\n         </filter>\n      </defs>\n   </svg>\n)\n\nexport const MorphingText: React.FC<MorphingTextProps> = ({\n   texts,\n   className,\n}) => (\n   <div\n      className={ny(\n         \"relative mx-auto h-16 w-full max-w-screen-md text-center font-sans text-[40pt] font-bold leading-none [filter:url(#threshold)_blur(0.6px)] md:h-24 lg:text-[6rem]\",\n         className,\n      )}\n   >\n      <Texts texts={texts} />\n      <SvgFilters />\n   </div>\n)\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/multi-select-basic.json b/apps/web/public/r/styles/miami/multi-select-basic.json
index ab5cfc72..a66f454d 100644
--- a/apps/web/public/r/styles/miami/multi-select-basic.json
+++ b/apps/web/public/r/styles/miami/multi-select-basic.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-basic",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-basic.tsx",
-      "content": "'use client'\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from '~/registry/miami/ui/multi-select'\n\nexport default function MultiSelectBasicDemo() {\n   return (\n      <MultiSelect>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-basic.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"~/registry/miami/ui/multi-select\"\n\nexport default function MultiSelectBasicDemo() {\n   return (\n      <MultiSelect>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/multi-select-controllable-search.json b/apps/web/public/r/styles/miami/multi-select-controllable-search.json
index 1daa98bb..f71231bf 100644
--- a/apps/web/public/r/styles/miami/multi-select-controllable-search.json
+++ b/apps/web/public/r/styles/miami/multi-select-controllable-search.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-controllable-search",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-controllable-search.tsx",
-      "content": "'use client'\n\nimport { useRef, useState } from 'react'\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from '~/registry/miami/ui/multi-select'\n\nconst ALL_ITEMS = [\n   { value: 'react', label: 'React', group: 'React' },\n   { value: 'next', label: 'Next.js', group: 'React' },\n   { value: 'remix', label: 'Remix', group: 'React' },\n   { value: 'vue', label: 'Vue', group: 'Vue' },\n   { value: 'nuxt', label: 'Nuxt.js', group: 'Vue' },\n   { value: 'angular', label: 'Angular', group: 'Others' },\n   { value: 'svelte', label: 'Svelte', group: 'Others' },\n]\n\nfunction group(options: Array<(typeof ALL_ITEMS)[number]>): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find(g => g.heading === item.group)\n      if (group)\n         group.children.push(item)\n      else\n         acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword)\n      return group(ALL_ITEMS)\n   await new Promise(resolve => setTimeout(resolve, 500))\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter(item =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n   return group(filtered)\n}\n\nexport default function MultiSelectControllableSearchDemo() {\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword?: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   return (\n      <MultiSelect onSearch={handleSearch}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch />\n            <MultiSelectList>\n               {loading ? null : renderMultiSelectOptions(options)}\n               <MultiSelectEmpty>\n                  {loading ? 'Loading...' : 'No results found'}\n               </MultiSelectEmpty>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-controllable-search.tsx",
+      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from \"~/registry/miami/ui/multi-select\"\n\nconst ALL_ITEMS = [\n   { value: \"react\", label: \"React\", group: \"React\" },\n   { value: \"next\", label: \"Next.js\", group: \"React\" },\n   { value: \"remix\", label: \"Remix\", group: \"React\" },\n   { value: \"vue\", label: \"Vue\", group: \"Vue\" },\n   { value: \"nuxt\", label: \"Nuxt.js\", group: \"Vue\" },\n   { value: \"angular\", label: \"Angular\", group: \"Others\" },\n   { value: \"svelte\", label: \"Svelte\", group: \"Others\" },\n]\n\nfunction group(\n   options: Array<(typeof ALL_ITEMS)[number]>,\n): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find((g) => g.heading === item.group)\n      if (group) group.children.push(item)\n      else acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword) return group(ALL_ITEMS)\n   await new Promise((resolve) => setTimeout(resolve, 500))\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter((item) =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n   return group(filtered)\n}\n\nexport default function MultiSelectControllableSearchDemo() {\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword?: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   return (\n      <MultiSelect onSearch={handleSearch}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch />\n            <MultiSelectList>\n               {loading ? null : renderMultiSelectOptions(options)}\n               <MultiSelectEmpty>\n                  {loading ? \"Loading...\" : \"No results found\"}\n               </MultiSelectEmpty>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/multi-select-filter.json b/apps/web/public/r/styles/miami/multi-select-filter.json
index 3bc15820..4e43afb1 100644
--- a/apps/web/public/r/styles/miami/multi-select-filter.json
+++ b/apps/web/public/r/styles/miami/multi-select-filter.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-filter",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-filter.tsx",
-      "content": "'use client'\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from '~/registry/miami/ui/multi-select'\n\nexport default function MultiSelectFilterDemo() {\n   return (\n      <MultiSelect>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch placeholder=\"Input to search\" />\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n            <MultiSelectEmpty />\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-filter.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"~/registry/miami/ui/multi-select\"\n\nexport default function MultiSelectFilterDemo() {\n   return (\n      <MultiSelect>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch placeholder=\"Input to search\" />\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n            <MultiSelectEmpty />\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/multi-select-form.json b/apps/web/public/r/styles/miami/multi-select-form.json
index 436fc4d0..c4f79277 100644
--- a/apps/web/public/r/styles/miami/multi-select-form.json
+++ b/apps/web/public/r/styles/miami/multi-select-form.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-form.tsx",
-      "content": "'use client'\n\nimport { useRef, useState } from 'react'\nimport Link from 'next/link'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/default/ui/form'\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from '~/registry/default/ui/multi-select'\nimport { toast } from '~/registry/default/ui/use-toast'\n\nconst ALL_ITEMS = [\n   { value: 'react', label: 'React', group: 'React' },\n   { value: 'next', label: 'Next.js', group: 'React' },\n   { value: 'remix', label: 'Remix', group: 'React' },\n   { value: 'vue', label: 'Vue', group: 'Vue' },\n   { value: 'nuxt', label: 'Nuxt.js', group: 'Vue' },\n   { value: 'angular', label: 'Angular', group: 'Others' },\n   { value: 'svelte', label: 'Svelte', group: 'Others' },\n]\n\nfunction group(options: Array<(typeof ALL_ITEMS)[number]>): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find(g => g.heading === item.group)\n      if (group)\n         group.children.push(item)\n      else\n         acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword)\n      return group(ALL_ITEMS)\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter(item =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n\n   if (!filtered.length) {\n      return [\n         {\n            label: keyword,\n            value: keyword,\n         },\n      ]\n   }\n\n   return group(filtered)\n}\n\nconst FormSchema = z.object({\n   frameworks: z.array(z.string(), {\n      required_error: 'Please select at least one framework.',\n   }),\n})\n\nexport default function MultiSelectFormDemo() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   const onSubmit = (data: z.infer<typeof FormSchema>) => {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"frameworks\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Frameworks</FormLabel>\n                     <MultiSelect\n                        onValueChange={field.onChange}\n                        defaultValue={field.value}\n                        onSearch={keyword => handleSearch(keyword ?? '')}\n                     >\n                        <FormControl>\n                           <MultiSelectTrigger className=\"w-96\">\n                              <MultiSelectValue placeholder=\"Select frameworks\" />\n                           </MultiSelectTrigger>\n                        </FormControl>\n                        <MultiSelectContent>\n                           <MultiSelectSearch />\n                           <MultiSelectList>\n                              {loading ? null : renderMultiSelectOptions(options)}\n                              <MultiSelectEmpty>\n                                 {loading ? 'Loading...' : 'No results found'}\n                              </MultiSelectEmpty>\n                           </MultiSelectList>\n                        </MultiSelectContent>\n                     </MultiSelect>\n                     <FormDescription>\n                        You can manage frameworks in\n                        {' '}\n                        <Link href=\"/examples/forms\">framework settings</Link>\n                        .\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport Link from \"next/link\"\nimport { useRef, useState } from \"react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/default/ui/form\"\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from \"~/registry/default/ui/multi-select\"\nimport { toast } from \"~/registry/default/ui/use-toast\"\nimport { Button } from \"~/registry/miami/ui/button\"\n\nconst ALL_ITEMS = [\n   { value: \"react\", label: \"React\", group: \"React\" },\n   { value: \"next\", label: \"Next.js\", group: \"React\" },\n   { value: \"remix\", label: \"Remix\", group: \"React\" },\n   { value: \"vue\", label: \"Vue\", group: \"Vue\" },\n   { value: \"nuxt\", label: \"Nuxt.js\", group: \"Vue\" },\n   { value: \"angular\", label: \"Angular\", group: \"Others\" },\n   { value: \"svelte\", label: \"Svelte\", group: \"Others\" },\n]\n\nfunction group(\n   options: Array<(typeof ALL_ITEMS)[number]>,\n): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find((g) => g.heading === item.group)\n      if (group) group.children.push(item)\n      else acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword) return group(ALL_ITEMS)\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter((item) =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n\n   if (!filtered.length) {\n      return [\n         {\n            label: keyword,\n            value: keyword,\n         },\n      ]\n   }\n\n   return group(filtered)\n}\n\nconst FormSchema = z.object({\n   frameworks: z.array(z.string(), {\n      required_error: \"Please select at least one framework.\",\n   }),\n})\n\nexport default function MultiSelectFormDemo() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   const onSubmit = (data: z.infer<typeof FormSchema>) => {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"frameworks\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Frameworks</FormLabel>\n                     <MultiSelect\n                        onValueChange={field.onChange}\n                        defaultValue={field.value}\n                        onSearch={(keyword) => handleSearch(keyword ?? \"\")}\n                     >\n                        <FormControl>\n                           <MultiSelectTrigger className=\"w-96\">\n                              <MultiSelectValue placeholder=\"Select frameworks\" />\n                           </MultiSelectTrigger>\n                        </FormControl>\n                        <MultiSelectContent>\n                           <MultiSelectSearch />\n                           <MultiSelectList>\n                              {loading\n                                 ? null\n                                 : renderMultiSelectOptions(options)}\n                              <MultiSelectEmpty>\n                                 {loading ? \"Loading...\" : \"No results found\"}\n                              </MultiSelectEmpty>\n                           </MultiSelectList>\n                        </MultiSelectContent>\n                     </MultiSelect>\n                     <FormDescription>\n                        You can manage frameworks in{\" \"}\n                        <Link href=\"/examples/forms\">framework settings</Link>.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/multi-select-input-custom.json b/apps/web/public/r/styles/miami/multi-select-input-custom.json
index 89d6f11c..119fe7b4 100644
--- a/apps/web/public/r/styles/miami/multi-select-input-custom.json
+++ b/apps/web/public/r/styles/miami/multi-select-input-custom.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-input-custom",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-input-custom.tsx",
-      "content": "'use client'\n\nimport { useRef, useState } from 'react'\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from '~/registry/miami/ui/multi-select'\n\nconst ALL_ITEMS = [\n   { value: 'react', label: 'React', group: 'React' },\n   { value: 'next', label: 'Next.js', group: 'React' },\n   { value: 'remix', label: 'Remix', group: 'React' },\n   { value: 'vue', label: 'Vue', group: 'Vue' },\n   { value: 'nuxt', label: 'Nuxt.js', group: 'Vue' },\n   { value: 'angular', label: 'Angular', group: 'Others' },\n   { value: 'svelte', label: 'Svelte', group: 'Others' },\n]\n\nfunction group(options: Array<(typeof ALL_ITEMS)[number]>): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find(g => g.heading === item.group)\n      if (group)\n         group.children.push(item)\n      else\n         acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword)\n      return group(ALL_ITEMS)\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter(item =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n\n   if (!filtered.length) {\n      return [\n         {\n            label: keyword,\n            value: keyword,\n         },\n      ]\n   }\n\n   return group(filtered)\n}\n\nexport default function MultiSelectInputCustomDemo() {\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   return (\n      <MultiSelect onSearch={keyword => handleSearch(keyword ?? '')}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch placeholder=\"input any...\" />\n            <MultiSelectList>\n               {loading ? null : renderMultiSelectOptions(options)}\n               <MultiSelectEmpty>\n                  {loading ? 'Loading...' : 'No results found'}\n               </MultiSelectEmpty>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-input-custom.tsx",
+      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from \"~/registry/miami/ui/multi-select\"\n\nconst ALL_ITEMS = [\n   { value: \"react\", label: \"React\", group: \"React\" },\n   { value: \"next\", label: \"Next.js\", group: \"React\" },\n   { value: \"remix\", label: \"Remix\", group: \"React\" },\n   { value: \"vue\", label: \"Vue\", group: \"Vue\" },\n   { value: \"nuxt\", label: \"Nuxt.js\", group: \"Vue\" },\n   { value: \"angular\", label: \"Angular\", group: \"Others\" },\n   { value: \"svelte\", label: \"Svelte\", group: \"Others\" },\n]\n\nfunction group(\n   options: Array<(typeof ALL_ITEMS)[number]>,\n): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find((g) => g.heading === item.group)\n      if (group) group.children.push(item)\n      else acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword) return group(ALL_ITEMS)\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter((item) =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n\n   if (!filtered.length) {\n      return [\n         {\n            label: keyword,\n            value: keyword,\n         },\n      ]\n   }\n\n   return group(filtered)\n}\n\nexport default function MultiSelectInputCustomDemo() {\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   return (\n      <MultiSelect onSearch={(keyword) => handleSearch(keyword ?? \"\")}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch placeholder=\"input any...\" />\n            <MultiSelectList>\n               {loading ? null : renderMultiSelectOptions(options)}\n               <MultiSelectEmpty>\n                  {loading ? \"Loading...\" : \"No results found\"}\n               </MultiSelectEmpty>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/multi-select-limit-count.json b/apps/web/public/r/styles/miami/multi-select-limit-count.json
index 4e264b47..9ac24303 100644
--- a/apps/web/public/r/styles/miami/multi-select-limit-count.json
+++ b/apps/web/public/r/styles/miami/multi-select-limit-count.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-limit-count",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-limit-count.tsx",
-      "content": "'use client'\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from '~/registry/miami/ui/multi-select'\n\nexport default function MultiSelectLimitCountDemo() {\n   return (\n      <MultiSelect defaultValue={['react', 'next', 'remix']} maxCount={3}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-limit-count.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"~/registry/miami/ui/multi-select\"\n\nexport default function MultiSelectLimitCountDemo() {\n   return (\n      <MultiSelect defaultValue={[\"react\", \"next\", \"remix\"]} maxCount={3}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/multi-select-limit-display-length.json b/apps/web/public/r/styles/miami/multi-select-limit-display-length.json
index 32961500..2b5e8df9 100644
--- a/apps/web/public/r/styles/miami/multi-select-limit-display-length.json
+++ b/apps/web/public/r/styles/miami/multi-select-limit-display-length.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select-limit-display-length",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "multi-select"
   ],
   "files": [
     {
-      "path": "example/multi-select-limit-display-length.tsx",
-      "content": "'use client'\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from '~/registry/miami/ui/multi-select'\n\nexport default function MultiSelectLimitDisplayLengthDemo() {\n   return (\n      <MultiSelect defaultValue={['long', 'react', 'angular', 'vue', 'remix']}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue\n               placeholder=\"Select stack\"\n               maxDisplay={3}\n               maxItemLength={5}\n            />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n                  <MultiSelectItem value=\"long\">VeryVeryLongItem</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/multi-select-limit-display-length.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"~/registry/miami/ui/multi-select\"\n\nexport default function MultiSelectLimitDisplayLengthDemo() {\n   return (\n      <MultiSelect defaultValue={[\"long\", \"react\", \"angular\", \"vue\", \"remix\"]}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue\n               placeholder=\"Select stack\"\n               maxDisplay={3}\n               maxItemLength={5}\n            />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n                  <MultiSelectItem value=\"long\">\n                     VeryVeryLongItem\n                  </MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/multi-select.json b/apps/web/public/r/styles/miami/multi-select.json
index a00b3474..75e004e1 100644
--- a/apps/web/public/r/styles/miami/multi-select.json
+++ b/apps/web/public/r/styles/miami/multi-select.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "multi-select",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/multi-select.tsx",
-      "content": "'use client'\n\nimport React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport type { Primitive } from '@radix-ui/react-primitive'\nimport { useControllableState } from '@radix-ui/react-use-controllable-state'\nimport { Check, ChevronsUpDown, X } from 'lucide-react'\nimport { createPortal } from 'react-dom'\n\nimport { ny } from '~/lib/utils'\nimport { Badge } from '~/registry/miami/ui/badge'\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n} from '~/registry/default/ui/command'\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/registry/default/ui/tooltip'\n\nexport interface MultiSelectOptionItem {\n   value: string\n   label?: React.ReactNode\n}\n\ninterface MultiSelectContextValue {\n   value: string[]\n\n   open: boolean\n\n   onSelect: (value: string, item: MultiSelectOptionItem) => void\n\n   onDeselect: (value: string, item: MultiSelectOptionItem) => void\n\n   onSearch?: (keyword?: string) => void\n\n   filter?: boolean | ((keyword: string, current: string) => boolean)\n\n   disabled?: boolean\n\n   maxCount?: number\n\n   itemCache: Map<string, MultiSelectOptionItem>\n}\n\nconst MultiSelectContext = React.createContext<\n  MultiSelectContextValue | undefined\n>(undefined)\n\nfunction useMultiSelect() {\n   const context = React.useContext(MultiSelectContext)\n\n   if (!context)\n      throw new Error('useMultiSelect must be used within MultiSelectProvider')\n\n   return context\n}\n\ntype MultiSelectProps = React.ComponentPropsWithoutRef<\n  typeof PopoverPrimitive.Root\n> & {\n   value?: string[]\n   onValueChange?: (value: string[], items: MultiSelectOptionItem[]) => void\n   onSelect?: (value: string, item: MultiSelectOptionItem) => void\n   onDeselect?: (value: string, item: MultiSelectOptionItem) => void\n   defaultValue?: string[]\n   onSearch?: (keyword: string | undefined) => void\n   filter?: boolean | ((keyword: string, current: string) => boolean)\n   disabled?: boolean\n   maxCount?: number\n}\n\nconst MultiSelect: React.FC<MultiSelectProps> = ({\n   value: valueProp,\n   onValueChange: onValueChangeProp,\n   onDeselect: onDeselectProp,\n   onSelect: onSelectProp,\n   defaultValue,\n   open: openProp,\n   onOpenChange,\n   defaultOpen,\n   onSearch,\n   filter,\n   disabled,\n   maxCount,\n   ...popoverProps\n}) => {\n   const itemCache = React.useRef(\n      new Map<string, MultiSelectOptionItem>(),\n   ).current\n\n   const handleValueChange = React.useCallback(\n      (state: string[]) => {\n         if (onValueChangeProp) {\n            const items = state.map(value => itemCache.get(value)!)\n\n            onValueChangeProp(state, items)\n         }\n      },\n      [onValueChangeProp],\n   )\n\n   const [value, setValue] = useControllableState({\n      prop: valueProp,\n      defaultProp: defaultValue,\n      onChange: handleValueChange,\n   })\n\n   const [open, setOpen] = useControllableState({\n      prop: openProp,\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n   })\n\n   const handleSelect = React.useCallback(\n      (value: string, item: MultiSelectOptionItem) => {\n         setValue((prev) => {\n            if (prev?.includes(value))\n               return prev\n\n            onSelectProp?.(value, item)\n\n            return prev ? [...prev, value] : [value]\n         })\n      },\n      [onSelectProp, setValue],\n   )\n\n   const handleDeselect = React.useCallback(\n      (value: string, item: MultiSelectOptionItem) => {\n         setValue((prev) => {\n            if (!prev || !prev.includes(value))\n               return prev\n\n            onDeselectProp?.(value, item)\n\n            return prev.filter(v => v !== value)\n         })\n      },\n      [onDeselectProp, setValue],\n   )\n\n   const contextValue = React.useMemo(() => {\n      return {\n         value: value || [],\n         open: open || false,\n         onSearch,\n         filter,\n         disabled,\n         maxCount,\n         onSelect: handleSelect,\n         onDeselect: handleDeselect,\n         itemCache,\n      }\n   }, [\n      value,\n      open,\n      onSearch,\n      filter,\n      disabled,\n      maxCount,\n      handleSelect,\n      handleDeselect,\n   ])\n\n   return (\n      <MultiSelectContext.Provider value={contextValue}>\n         <PopoverPrimitive.Root\n            {...popoverProps}\n            open={open}\n            onOpenChange={setOpen}\n         />\n      </MultiSelectContext.Provider>\n   )\n}\n\nMultiSelect.displayName = 'MultiSelect'\n\ntype MultiSelectTriggerElement = React.ElementRef<typeof Primitive.div>\n\ninterface MultiSelectTriggerProps\n   extends React.ComponentPropsWithoutRef<typeof Primitive.div> {}\n\nfunction PreventClick(e: React.MouseEvent | React.TouchEvent) {\n   e.preventDefault()\n   e.stopPropagation()\n}\n\nconst MultiSelectTrigger = React.forwardRef<\n   MultiSelectTriggerElement,\n   MultiSelectTriggerProps\n>(({ className, children, ...props }, forwardedRef) => {\n   const { disabled } = useMultiSelect()\n\n   return (\n      <PopoverPrimitive.Trigger ref={forwardedRef as any} asChild>\n         <div\n            aria-disabled={disabled}\n            data-disabled={disabled}\n            {...props}\n            className={ny(\n               'border-input ring-offset-background focus:ring-ring flex size-full min-h-10 items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 [&>span]:line-clamp-1',\n               disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text',\n               className,\n            )}\n            onClick={disabled ? PreventClick : props.onClick}\n            onTouchStart={disabled ? PreventClick : props.onTouchStart}\n         >\n            {children}\n            <ChevronsUpDown aria-hidden className=\"size-4 shrink-0 opacity-50\" />\n         </div>\n      </PopoverPrimitive.Trigger>\n   )\n})\n\nMultiSelectTrigger.displayName = 'MultiSelectTrigger'\n\ninterface MultiSelectValueProps\n   extends React.ComponentPropsWithoutRef<typeof Primitive.div> {\n   placeholder?: string\n   maxDisplay?: number\n   maxItemLength?: number\n}\n\nconst MultiSelectValue = React.forwardRef<\n   React.ElementRef<typeof Primitive.div>,\n   MultiSelectValueProps\n>(\n   (\n      { className, placeholder, maxDisplay, maxItemLength, ...props },\n      forwardRef,\n   ) => {\n      const { value, itemCache, onDeselect } = useMultiSelect()\n      const [firstRendered, setFirstRendered] = React.useState(false)\n\n      const renderRemain\n      = maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0\n      const renderItems = renderRemain ? value.slice(0, maxDisplay) : value\n\n      React.useLayoutEffect(() => {\n         setFirstRendered(true)\n      }, [])\n\n      if (!value.length || !firstRendered) {\n         return (\n            <span className=\"text-muted-foreground pointer-events-none\">\n               {placeholder}\n            </span>\n         )\n      }\n\n      return (\n         <TooltipProvider delayDuration={300}>\n            <div\n               className={ny(\n                  'flex flex-1 flex-wrap items-center gap-1.5 overflow-x-hidden',\n                  className,\n               )}\n               {...props}\n               ref={forwardRef}\n            >\n               {renderItems.map((value) => {\n                  const item = itemCache.get(value)\n\n                  const content = item?.label || value\n\n                  const child\n              = maxItemLength\n              && typeof content === 'string'\n              && content.length > maxItemLength\n                 ? `${content.slice(0, maxItemLength)}...`\n                 : content\n\n                  const el = (\n                     <Badge\n                        variant=\"outline\"\n                        key={value}\n                        className=\"group/multi-select-badge cursor-pointer rounded-full pr-1.5\"\n                        onClick={(e) => {\n                           e.preventDefault()\n                           e.stopPropagation()\n                           onDeselect(value, item!)\n                        }}\n                     >\n                        <span>{child}</span>\n                        <X className=\"text-muted-foreground group-hover/multi-select-badge:text-foreground ml-1 size-3\" />\n                     </Badge>\n                  )\n\n                  if (child !== content) {\n                     return (\n                        <Tooltip key={value}>\n                           <TooltipTrigger className=\"inline-flex\">{el}</TooltipTrigger>\n                           <TooltipContent\n                              side=\"bottom\"\n                              align=\"start\"\n                              className=\"z-[51]\"\n                           >\n                              {content}\n                           </TooltipContent>\n                        </Tooltip>\n                     )\n                  }\n\n                  return el\n               })}\n               {renderRemain\n                  ? (\n                        <span className=\"text-muted-foreground py-.5 text-xs leading-4\">\n                           +\n                           {renderRemain}\n                        </span>\n                     )\n                  : null}\n            </div>\n         </TooltipProvider>\n      )\n   },\n)\n\nconst MultiSelectSearch = React.forwardRef<\n   React.ElementRef<typeof CommandInput>,\n   React.ComponentPropsWithoutRef<typeof CommandInput>\n>((props, ref) => {\n   const { onSearch } = useMultiSelect()\n\n   return <CommandInput ref={ref} {...props} onValueChange={onSearch} />\n})\n\nMultiSelectSearch.displayName = 'MultiSelectSearch'\n\nconst MultiSelectList = React.forwardRef<\n   React.ElementRef<typeof CommandList>,\n   React.ComponentPropsWithoutRef<typeof CommandList>\n>(({ className, ...props }, ref) => {\n   return (\n      <CommandList\n         ref={ref}\n         className={ny('max-h-[unset] px-0 py-1', className)}\n         {...props}\n      />\n   )\n})\n\nMultiSelectList.displayName = 'MultiSelectList'\n\ninterface MultiSelectContentProps\n   extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {}\n\nconst MultiSelectContent = React.forwardRef<\n   React.ElementRef<typeof PopoverPrimitive.Content>,\n   MultiSelectContentProps\n>(({ className, children, ...props }, ref) => {\n   const context = useMultiSelect()\n\n   const fragmentRef = React.useRef<DocumentFragment>()\n\n   if (!fragmentRef.current && typeof window !== 'undefined')\n      fragmentRef.current = document.createDocumentFragment()\n\n   if (!context.open) {\n      return fragmentRef.current\n         ? createPortal(<Command>{children}</Command>, fragmentRef.current)\n         : null\n   }\n\n   return (\n      <PopoverPrimitive.Portal forceMount>\n         <PopoverPrimitive.Content\n            ref={ref}\n            align=\"start\"\n            sideOffset={4}\n            collisionPadding={10}\n            className={ny(\n               'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-full rounded-md border p-0 shadow-md outline-none',\n            )}\n            style={\n               {\n                  '--radix-select-content-transform-origin':\n              'var(--radix-popper-transform-origin)',\n                  '--radix-select-content-available-width':\n              'var(--radix-popper-available-width)',\n                  '--radix-select-content-available-height':\n              'var(--radix-popper-available-height)',\n                  '--radix-select-trigger-width': 'var(--radix-popper-anchor-width)',\n                  '--radix-select-trigger-height':\n              'var(--radix-popper-anchor-height)',\n               } as any\n            }\n            {...props}\n         >\n            <Command\n               className={ny(\n                  'max-h-96 w-full min-w-[var(--radix-select-trigger-width)] px-1',\n                  className,\n               )}\n               shouldFilter={!context.onSearch}\n            >\n               {children}\n            </Command>\n         </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n   )\n})\n\ntype MultiSelectItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> &\n   Partial<MultiSelectOptionItem> & {\n      onSelect?: (value: string, item: MultiSelectOptionItem) => void\n      onDeselect?: (value: string, item: MultiSelectOptionItem) => void\n   }\n\nconst MultiSelectItem = React.forwardRef<\n   React.ElementRef<typeof CommandItem>,\n   MultiSelectItemProps\n>(\n   (\n      {\n         value,\n         onSelect: onSelectProp,\n         onDeselect: onDeselectProp,\n         children,\n         label,\n         disabled: disabledProp,\n         className,\n         ...props\n      },\n      forwardedRef,\n   ) => {\n      const {\n         value: contextValue,\n         maxCount,\n         onSelect,\n         onDeselect,\n         itemCache,\n      } = useMultiSelect()\n\n      const item = React.useMemo(() => {\n         return value\n            ? {\n                  value,\n                  label:\n              label || (typeof children === 'string' ? children : undefined),\n               }\n            : undefined\n      }, [value, label, children])\n\n      const selected = Boolean(value && contextValue.includes(value))\n\n      React.useEffect(() => {\n         if (value)\n            itemCache.set(value, item!)\n      }, [selected, value, item])\n\n      const disabled = Boolean(\n         disabledProp || (!selected && maxCount && contextValue.length >= maxCount),\n      )\n\n      const handleClick = () => {\n         if (selected) {\n            onDeselectProp?.(value!, item!)\n            onDeselect(value!, item!)\n         }\n         else {\n            itemCache.set(value!, item!)\n            onSelectProp?.(value!, item!)\n            onSelect(value!, item!)\n         }\n      }\n\n      return (\n         <CommandItem\n            {...props}\n            value={value}\n            className={ny(\n               disabled && 'text-muted-foreground cursor-not-allowed',\n               className,\n            )}\n            disabled={disabled}\n            onSelect={!disabled && value ? handleClick : undefined}\n            ref={forwardedRef}\n         >\n            <span className=\"mr-2 truncate\">\n               {children || label || value}\n            </span>\n            {selected ? <Check className=\"ml-auto size-4 shrink-0\" /> : null}\n         </CommandItem>\n      )\n   },\n)\n\nconst MultiSelectGroup = React.forwardRef<\n   React.ElementRef<typeof CommandGroup>,\n   React.ComponentPropsWithoutRef<typeof CommandGroup>\n>((props, forwardRef) => {\n   return <CommandGroup {...props} ref={forwardRef} />\n})\n\nMultiSelectGroup.displayName = 'MultiSelectGroup'\n\nconst MultiSelectSeparator = React.forwardRef<\n   React.ElementRef<typeof CommandSeparator>,\n   React.ComponentPropsWithoutRef<typeof CommandSeparator>\n>((props, forwardRef) => {\n   return <CommandSeparator {...props} ref={forwardRef} />\n})\n\nMultiSelectSeparator.displayName = 'MultiSelectSeparator'\n\nconst MultiSelectEmpty = React.forwardRef<\n   React.ElementRef<typeof CommandEmpty>,\n   React.ComponentPropsWithoutRef<typeof CommandEmpty>\n>(({ children = 'No Content', ...props }, forwardRef) => {\n   return (\n      <CommandEmpty {...props} ref={forwardRef}>\n         {children}\n      </CommandEmpty>\n   )\n})\n\nMultiSelectEmpty.displayName = 'MultiSelectEmpty'\n\nexport interface MultiSelectOptionSeparator {\n   type: 'separator'\n}\n\nexport interface MultiSelectOptionGroup {\n   heading?: React.ReactNode\n   value?: string\n   children: MultiSelectOption[]\n}\n\nexport type MultiSelectOption =\n   | Pick<\n      MultiSelectItemProps,\n      'value' | 'label' | 'disabled' | 'onSelect' | 'onDeselect'\n   >\n   | MultiSelectOptionSeparator\n   | MultiSelectOptionGroup\n\nfunction renderMultiSelectOptions(list: MultiSelectOption[]) {\n   return list.map((option, index) => {\n      if ('type' in option) {\n         if (option.type === 'separator')\n            return <MultiSelectSeparator key={index} />\n\n         return null\n      }\n\n      if ('children' in option) {\n         return (\n            <MultiSelectGroup\n               key={option.value || index}\n               value={option.value}\n               heading={option.heading}\n            >\n               {renderMultiSelectOptions(option.children)}\n            </MultiSelectGroup>\n         )\n      }\n\n      return (\n         <MultiSelectItem key={option.value} {...option}>\n            {option.label}\n         </MultiSelectItem>\n      )\n   })\n}\n\nexport {\n   MultiSelect,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   MultiSelectSearch,\n   MultiSelectContent,\n   MultiSelectList,\n   MultiSelectItem,\n   MultiSelectGroup,\n   MultiSelectSeparator,\n   MultiSelectEmpty,\n   renderMultiSelectOptions,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport type { Primitive } from \"@radix-ui/react-primitive\"\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\"\nimport { Check, ChevronsUpDown, X } from \"lucide-react\"\nimport React from \"react\"\nimport { createPortal } from \"react-dom\"\n\nimport { ny } from \"~/lib/utils\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n} from \"~/registry/default/ui/command\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/default/ui/tooltip\"\nimport { Badge } from \"~/registry/miami/ui/badge\"\n\nexport interface MultiSelectOptionItem {\n   value: string\n   label?: React.ReactNode\n}\n\ninterface MultiSelectContextValue {\n   value: string[]\n\n   open: boolean\n\n   onSelect: (value: string, item: MultiSelectOptionItem) => void\n\n   onDeselect: (value: string, item: MultiSelectOptionItem) => void\n\n   onSearch?: (keyword?: string) => void\n\n   filter?: boolean | ((keyword: string, current: string) => boolean)\n\n   disabled?: boolean\n\n   maxCount?: number\n\n   itemCache: Map<string, MultiSelectOptionItem>\n}\n\nconst MultiSelectContext = React.createContext<\n   MultiSelectContextValue | undefined\n>(undefined)\n\nfunction useMultiSelect() {\n   const context = React.useContext(MultiSelectContext)\n\n   if (!context)\n      throw new Error(\"useMultiSelect must be used within MultiSelectProvider\")\n\n   return context\n}\n\ntype MultiSelectProps = React.ComponentPropsWithoutRef<\n   typeof PopoverPrimitive.Root\n> & {\n   value?: string[]\n   onValueChange?: (value: string[], items: MultiSelectOptionItem[]) => void\n   onSelect?: (value: string, item: MultiSelectOptionItem) => void\n   onDeselect?: (value: string, item: MultiSelectOptionItem) => void\n   defaultValue?: string[]\n   onSearch?: (keyword: string | undefined) => void\n   filter?: boolean | ((keyword: string, current: string) => boolean)\n   disabled?: boolean\n   maxCount?: number\n}\n\nconst MultiSelect: React.FC<MultiSelectProps> = ({\n   value: valueProp,\n   onValueChange: onValueChangeProp,\n   onDeselect: onDeselectProp,\n   onSelect: onSelectProp,\n   defaultValue,\n   open: openProp,\n   onOpenChange,\n   defaultOpen,\n   onSearch,\n   filter,\n   disabled,\n   maxCount,\n   ...popoverProps\n}) => {\n   const itemCache = React.useRef(\n      new Map<string, MultiSelectOptionItem>(),\n   ).current\n\n   const handleValueChange = React.useCallback(\n      (state: string[]) => {\n         if (onValueChangeProp) {\n            const items = state.map((value) => itemCache.get(value)!)\n\n            onValueChangeProp(state, items)\n         }\n      },\n      [onValueChangeProp, itemCache],\n   )\n\n   const [value, setValue] = useControllableState({\n      prop: valueProp,\n      defaultProp: defaultValue,\n      onChange: handleValueChange,\n   })\n\n   const [open, setOpen] = useControllableState({\n      prop: openProp,\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n   })\n\n   const handleSelect = React.useCallback(\n      (value: string, item: MultiSelectOptionItem) => {\n         setValue((prev) => {\n            if (prev?.includes(value)) return prev\n\n            onSelectProp?.(value, item)\n\n            return prev ? [...prev, value] : [value]\n         })\n      },\n      [onSelectProp, setValue],\n   )\n\n   const handleDeselect = React.useCallback(\n      (value: string, item: MultiSelectOptionItem) => {\n         setValue((prev) => {\n            if (!prev || !prev.includes(value)) return prev\n\n            onDeselectProp?.(value, item)\n\n            return prev.filter((v) => v !== value)\n         })\n      },\n      [onDeselectProp, setValue],\n   )\n\n   const contextValue = React.useMemo(() => {\n      return {\n         value: value || [],\n         open: open || false,\n         onSearch,\n         filter,\n         disabled,\n         maxCount,\n         onSelect: handleSelect,\n         onDeselect: handleDeselect,\n         itemCache,\n      }\n   }, [\n      value,\n      open,\n      onSearch,\n      filter,\n      disabled,\n      maxCount,\n      handleSelect,\n      handleDeselect,\n      itemCache,\n   ])\n\n   return (\n      <MultiSelectContext.Provider value={contextValue}>\n         <PopoverPrimitive.Root\n            {...popoverProps}\n            open={open}\n            onOpenChange={setOpen}\n         />\n      </MultiSelectContext.Provider>\n   )\n}\n\nMultiSelect.displayName = \"MultiSelect\"\n\ntype MultiSelectTriggerElement = React.ElementRef<typeof Primitive.div>\n\ninterface MultiSelectTriggerProps\n   extends React.ComponentPropsWithoutRef<typeof Primitive.div> {}\n\nfunction PreventClick(e: React.MouseEvent | React.TouchEvent) {\n   e.preventDefault()\n   e.stopPropagation()\n}\n\nconst MultiSelectTrigger = React.forwardRef<\n   MultiSelectTriggerElement,\n   MultiSelectTriggerProps\n>(({ className, children, ...props }, forwardedRef) => {\n   const { disabled } = useMultiSelect()\n\n   return (\n      <PopoverPrimitive.Trigger ref={forwardedRef as any} asChild>\n         <div\n            aria-disabled={disabled}\n            data-disabled={disabled}\n            {...props}\n            className={ny(\n               \"border-input ring-offset-background focus:ring-ring flex size-full min-h-10 items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 [&>span]:line-clamp-1\",\n               disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-text\",\n               className,\n            )}\n            onClick={disabled ? PreventClick : props.onClick}\n            onTouchStart={disabled ? PreventClick : props.onTouchStart}\n         >\n            {children}\n            <ChevronsUpDown\n               aria-hidden\n               className=\"size-4 shrink-0 opacity-50\"\n            />\n         </div>\n      </PopoverPrimitive.Trigger>\n   )\n})\n\nMultiSelectTrigger.displayName = \"MultiSelectTrigger\"\n\ninterface MultiSelectValueProps\n   extends React.ComponentPropsWithoutRef<typeof Primitive.div> {\n   placeholder?: string\n   maxDisplay?: number\n   maxItemLength?: number\n}\n\nconst MultiSelectValue = React.forwardRef<\n   React.ElementRef<typeof Primitive.div>,\n   MultiSelectValueProps\n>(\n   (\n      { className, placeholder, maxDisplay, maxItemLength, ...props },\n      forwardRef,\n   ) => {\n      const { value, itemCache, onDeselect } = useMultiSelect()\n      const [firstRendered, setFirstRendered] = React.useState(false)\n\n      const renderRemain =\n         maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0\n      const renderItems = renderRemain ? value.slice(0, maxDisplay) : value\n\n      React.useLayoutEffect(() => {\n         setFirstRendered(true)\n      }, [])\n\n      if (!value.length || !firstRendered) {\n         return (\n            <span className=\"text-muted-foreground pointer-events-none\">\n               {placeholder}\n            </span>\n         )\n      }\n\n      return (\n         <TooltipProvider delayDuration={300}>\n            <div\n               className={ny(\n                  \"flex flex-1 flex-wrap items-center gap-1.5 overflow-x-hidden\",\n                  className,\n               )}\n               {...props}\n               ref={forwardRef}\n            >\n               {renderItems.map((value) => {\n                  const item = itemCache.get(value)\n\n                  const content = item?.label || value\n\n                  const child =\n                     maxItemLength &&\n                     typeof content === \"string\" &&\n                     content.length > maxItemLength\n                        ? `${content.slice(0, maxItemLength)}...`\n                        : content\n\n                  const el = (\n                     <Badge\n                        variant=\"outline\"\n                        key={value}\n                        className=\"group/multi-select-badge cursor-pointer rounded-full pr-1.5\"\n                        onClick={(e) => {\n                           e.preventDefault()\n                           e.stopPropagation()\n                           onDeselect(value, item!)\n                        }}\n                     >\n                        <span>{child}</span>\n                        <X className=\"text-muted-foreground group-hover/multi-select-badge:text-foreground ml-1 size-3\" />\n                     </Badge>\n                  )\n\n                  if (child !== content) {\n                     return (\n                        <Tooltip key={value}>\n                           <TooltipTrigger className=\"inline-flex\">\n                              {el}\n                           </TooltipTrigger>\n                           <TooltipContent\n                              side=\"bottom\"\n                              align=\"start\"\n                              className=\"z-[51]\"\n                           >\n                              {content}\n                           </TooltipContent>\n                        </Tooltip>\n                     )\n                  }\n\n                  return el\n               })}\n               {renderRemain ? (\n                  <span className=\"text-muted-foreground py-.5 text-xs leading-4\">\n                     +{renderRemain}\n                  </span>\n               ) : null}\n            </div>\n         </TooltipProvider>\n      )\n   },\n)\n\nMultiSelectValue.displayName = \"MultiSelectValue\"\n\nconst MultiSelectSearch = React.forwardRef<\n   React.ElementRef<typeof CommandInput>,\n   React.ComponentPropsWithoutRef<typeof CommandInput>\n>((props, ref) => {\n   const { onSearch } = useMultiSelect()\n\n   return <CommandInput ref={ref} {...props} onValueChange={onSearch} />\n})\n\nMultiSelectSearch.displayName = \"MultiSelectSearch\"\n\nconst MultiSelectList = React.forwardRef<\n   React.ElementRef<typeof CommandList>,\n   React.ComponentPropsWithoutRef<typeof CommandList>\n>(({ className, ...props }, ref) => {\n   return (\n      <CommandList\n         ref={ref}\n         className={ny(\"max-h-[unset] px-0 py-1\", className)}\n         {...props}\n      />\n   )\n})\n\nMultiSelectList.displayName = \"MultiSelectList\"\n\ninterface MultiSelectContentProps\n   extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {}\n\nconst MultiSelectContent = React.forwardRef<\n   React.ElementRef<typeof PopoverPrimitive.Content>,\n   MultiSelectContentProps\n>(({ className, children, ...props }, ref) => {\n   const context = useMultiSelect()\n\n   const fragmentRef = React.useRef<DocumentFragment>()\n\n   if (!fragmentRef.current && typeof window !== \"undefined\")\n      fragmentRef.current = document.createDocumentFragment()\n\n   if (!context.open) {\n      return fragmentRef.current\n         ? createPortal(<Command>{children}</Command>, fragmentRef.current)\n         : null\n   }\n\n   return (\n      <PopoverPrimitive.Portal forceMount>\n         <PopoverPrimitive.Content\n            ref={ref}\n            align=\"start\"\n            sideOffset={4}\n            collisionPadding={10}\n            className={ny(\n               \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-full rounded-md border p-0 shadow-md outline-none\",\n            )}\n            style={\n               {\n                  \"--radix-select-content-transform-origin\":\n                     \"var(--radix-popper-transform-origin)\",\n                  \"--radix-select-content-available-width\":\n                     \"var(--radix-popper-available-width)\",\n                  \"--radix-select-content-available-height\":\n                     \"var(--radix-popper-available-height)\",\n                  \"--radix-select-trigger-width\":\n                     \"var(--radix-popper-anchor-width)\",\n                  \"--radix-select-trigger-height\":\n                     \"var(--radix-popper-anchor-height)\",\n               } as any\n            }\n            {...props}\n         >\n            <Command\n               className={ny(\n                  \"max-h-96 w-full min-w-[var(--radix-select-trigger-width)] px-1\",\n                  className,\n               )}\n               shouldFilter={!context.onSearch}\n            >\n               {children}\n            </Command>\n         </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n   )\n})\n\nMultiSelectContent.displayName = \"MultiSelectContent\"\n\ntype MultiSelectItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> &\n   Partial<MultiSelectOptionItem> & {\n      onSelect?: (value: string, item: MultiSelectOptionItem) => void\n      onDeselect?: (value: string, item: MultiSelectOptionItem) => void\n   }\n\nconst MultiSelectItem = React.forwardRef<\n   React.ElementRef<typeof CommandItem>,\n   MultiSelectItemProps\n>(\n   (\n      {\n         value,\n         onSelect: onSelectProp,\n         onDeselect: onDeselectProp,\n         children,\n         label,\n         disabled: disabledProp,\n         className,\n         ...props\n      },\n      forwardedRef,\n   ) => {\n      const {\n         value: contextValue,\n         maxCount,\n         onSelect,\n         onDeselect,\n         itemCache,\n      } = useMultiSelect()\n\n      const item = React.useMemo(() => {\n         return value\n            ? {\n                 value,\n                 label:\n                    label ||\n                    (typeof children === \"string\" ? children : undefined),\n              }\n            : undefined\n      }, [value, label, children])\n\n      const selected = Boolean(value && contextValue.includes(value))\n\n      React.useEffect(() => {\n         if (value) itemCache.set(value, item!)\n      }, [selected, value, item, itemCache])\n\n      const disabled = Boolean(\n         disabledProp ||\n            (!selected && maxCount && contextValue.length >= maxCount),\n      )\n\n      const handleClick = () => {\n         if (selected) {\n            onDeselectProp?.(value!, item!)\n            onDeselect(value!, item!)\n         } else {\n            itemCache.set(value!, item!)\n            onSelectProp?.(value!, item!)\n            onSelect(value!, item!)\n         }\n      }\n\n      return (\n         <CommandItem\n            {...props}\n            value={value}\n            className={ny(\n               disabled && \"text-muted-foreground cursor-not-allowed\",\n               className,\n            )}\n            disabled={disabled}\n            onSelect={!disabled && value ? handleClick : undefined}\n            ref={forwardedRef}\n         >\n            <span className=\"mr-2 truncate\">{children || label || value}</span>\n            {selected ? <Check className=\"ml-auto size-4 shrink-0\" /> : null}\n         </CommandItem>\n      )\n   },\n)\n\nMultiSelectItem.displayName = \"MultiSelectItem\"\n\nconst MultiSelectGroup = React.forwardRef<\n   React.ElementRef<typeof CommandGroup>,\n   React.ComponentPropsWithoutRef<typeof CommandGroup>\n>((props, forwardRef) => {\n   return <CommandGroup {...props} ref={forwardRef} />\n})\n\nMultiSelectGroup.displayName = \"MultiSelectGroup\"\n\nconst MultiSelectSeparator = React.forwardRef<\n   React.ElementRef<typeof CommandSeparator>,\n   React.ComponentPropsWithoutRef<typeof CommandSeparator>\n>((props, forwardRef) => {\n   return <CommandSeparator {...props} ref={forwardRef} />\n})\n\nMultiSelectSeparator.displayName = \"MultiSelectSeparator\"\n\nconst MultiSelectEmpty = React.forwardRef<\n   React.ElementRef<typeof CommandEmpty>,\n   React.ComponentPropsWithoutRef<typeof CommandEmpty>\n>(({ children = \"No Content\", ...props }, forwardRef) => {\n   return (\n      <CommandEmpty {...props} ref={forwardRef}>\n         {children}\n      </CommandEmpty>\n   )\n})\n\nMultiSelectEmpty.displayName = \"MultiSelectEmpty\"\n\nexport interface MultiSelectOptionSeparator {\n   type: \"separator\"\n}\n\nexport interface MultiSelectOptionGroup {\n   heading?: React.ReactNode\n   value?: string\n   children: MultiSelectOption[]\n}\n\nexport type MultiSelectOption =\n   | Pick<\n        MultiSelectItemProps,\n        \"value\" | \"label\" | \"disabled\" | \"onSelect\" | \"onDeselect\"\n     >\n   | MultiSelectOptionSeparator\n   | MultiSelectOptionGroup\n\nfunction renderMultiSelectOptions(list: MultiSelectOption[]) {\n   return list.map((option, index) => {\n      if (\"type\" in option) {\n         if (option.type === \"separator\")\n            return <MultiSelectSeparator key={index} />\n\n         return null\n      }\n\n      if (\"children\" in option) {\n         return (\n            <MultiSelectGroup\n               key={option.value || index}\n               value={option.value}\n               heading={option.heading}\n            >\n               {renderMultiSelectOptions(option.children)}\n            </MultiSelectGroup>\n         )\n      }\n\n      return (\n         <MultiSelectItem key={option.value} {...option}>\n            {option.label}\n         </MultiSelectItem>\n      )\n   })\n}\n\nexport {\n   MultiSelect,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   MultiSelectSearch,\n   MultiSelectContent,\n   MultiSelectList,\n   MultiSelectItem,\n   MultiSelectGroup,\n   MultiSelectSeparator,\n   MultiSelectEmpty,\n   renderMultiSelectOptions,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/navigation-menu-demo.json b/apps/web/public/r/styles/miami/navigation-menu-demo.json
index f171f4cb..0d92c548 100644
--- a/apps/web/public/r/styles/miami/navigation-menu-demo.json
+++ b/apps/web/public/r/styles/miami/navigation-menu-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "navigation-menu-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "navigation-menu"
   ],
   "files": [
     {
-      "path": "example/navigation-menu-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport Link from 'next/link'\n\nimport { ny } from '~/lib/utils'\nimport { Icons } from '~/components/icons'\nimport {\n   NavigationMenu,\n   NavigationMenuContent,\n   NavigationMenuItem,\n   NavigationMenuLink,\n   NavigationMenuList,\n   NavigationMenuTrigger,\n   navigationMenuTriggerStyle,\n} from '~/registry/miami/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n   {\n      title: 'Alert Dialog',\n      href: '/docs/primitives/alert-dialog',\n      description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n   },\n   {\n      title: 'Hover Card',\n      href: '/docs/primitives/hover-card',\n      description:\n      'For sighted users to preview content available behind a link.',\n   },\n   {\n      title: 'Progress',\n      href: '/docs/primitives/progress',\n      description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n   },\n   {\n      title: 'Scroll-area',\n      href: '/docs/primitives/scroll-area',\n      description: 'Visually or semantically separates content.',\n   },\n   {\n      title: 'Tabs',\n      href: '/docs/primitives/tabs',\n      description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n   },\n   {\n      title: 'Tooltip',\n      href: '/docs/primitives/tooltip',\n      description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n   },\n]\n\nexport default function NavigationMenuDemo() {\n   return (\n      <NavigationMenu>\n         <NavigationMenuList>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                     <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                           <a\n                              className=\"from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md\"\n                              href=\"/\"\n                           >\n                              <Icons.logo className=\"size-6\" />\n                              <div className=\"mb-2 mt-4 text-lg font-medium\">nyxb/ui</div>\n                              <p className=\"text-muted-foreground text-sm leading-tight\">\n                                 Beautifully designed components built with Radix UI and\n                                 Tailwind CSS.\n                              </p>\n                           </a>\n                        </NavigationMenuLink>\n                     </li>\n                     <ListItem href=\"/docs\" title=\"Introduction\">\n                        Re-usable components built using Radix UI and Tailwind CSS.\n                     </ListItem>\n                     <ListItem href=\"/docs/installation\" title=\"Installation\">\n                        How to install dependencies and structure your app.\n                     </ListItem>\n                     <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                        Styles for headings, paragraphs, lists...etc\n                     </ListItem>\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                     {components.map(component => (\n                        <ListItem\n                           key={component.title}\n                           title={component.title}\n                           href={component.href}\n                        >\n                           {component.description}\n                        </ListItem>\n                     ))}\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <Link href=\"/docs\" legacyBehavior passHref>\n                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n                     Documentation\n                  </NavigationMenuLink>\n               </Link>\n            </NavigationMenuItem>\n         </NavigationMenuList>\n      </NavigationMenu>\n   )\n}\n\nconst ListItem = React.forwardRef<\n   React.ElementRef<'a'>,\n   React.ComponentPropsWithoutRef<'a'>\n>(({ className, title, children, ...props }, ref) => {\n   return (\n      <li>\n         <NavigationMenuLink asChild>\n            <a\n               ref={ref}\n               className={ny(\n                  'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors',\n                  className,\n               )}\n               {...props}\n            >\n               <div className=\"text-sm font-medium leading-none\">{title}</div>\n               <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n                  {children}\n               </p>\n            </a>\n         </NavigationMenuLink>\n      </li>\n   )\n})\nListItem.displayName = 'ListItem'\n",
-      "type": "registry:component",
+      "path": "examples/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport * as React from \"react\"\n\nimport { Icons } from \"~/components/icons\"\nimport { ny } from \"~/lib/utils\"\nimport {\n   NavigationMenu,\n   NavigationMenuContent,\n   NavigationMenuItem,\n   NavigationMenuLink,\n   NavigationMenuList,\n   NavigationMenuTrigger,\n   navigationMenuTriggerStyle,\n} from \"~/registry/miami/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n   {\n      title: \"Alert Dialog\",\n      href: \"/docs/primitives/alert-dialog\",\n      description:\n         \"A modal dialog that interrupts the user with important content and expects a response.\",\n   },\n   {\n      title: \"Hover Card\",\n      href: \"/docs/primitives/hover-card\",\n      description:\n         \"For sighted users to preview content available behind a link.\",\n   },\n   {\n      title: \"Progress\",\n      href: \"/docs/primitives/progress\",\n      description:\n         \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n   },\n   {\n      title: \"Scroll-area\",\n      href: \"/docs/primitives/scroll-area\",\n      description: \"Visually or semantically separates content.\",\n   },\n   {\n      title: \"Tabs\",\n      href: \"/docs/primitives/tabs\",\n      description:\n         \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n   },\n   {\n      title: \"Tooltip\",\n      href: \"/docs/primitives/tooltip\",\n      description:\n         \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n   },\n]\n\nexport default function NavigationMenuDemo() {\n   return (\n      <NavigationMenu>\n         <NavigationMenuList>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                     <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                           <a\n                              className=\"from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md\"\n                              href=\"/\"\n                           >\n                              <Icons.logo className=\"size-6\" />\n                              <div className=\"mb-2 mt-4 text-lg font-medium\">\n                                 nyxb/ui\n                              </div>\n                              <p className=\"text-muted-foreground text-sm leading-tight\">\n                                 Beautifully designed components built with\n                                 Radix UI and Tailwind CSS.\n                              </p>\n                           </a>\n                        </NavigationMenuLink>\n                     </li>\n                     <ListItem href=\"/docs\" title=\"Introduction\">\n                        Re-usable components built using Radix UI and Tailwind\n                        CSS.\n                     </ListItem>\n                     <ListItem href=\"/docs/installation\" title=\"Installation\">\n                        How to install dependencies and structure your app.\n                     </ListItem>\n                     <ListItem\n                        href=\"/docs/primitives/typography\"\n                        title=\"Typography\"\n                     >\n                        Styles for headings, paragraphs, lists...etc\n                     </ListItem>\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                     {components.map((component) => (\n                        <ListItem\n                           key={component.title}\n                           title={component.title}\n                           href={component.href}\n                        >\n                           {component.description}\n                        </ListItem>\n                     ))}\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <Link href=\"/docs\" legacyBehavior passHref>\n                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n                     Documentation\n                  </NavigationMenuLink>\n               </Link>\n            </NavigationMenuItem>\n         </NavigationMenuList>\n      </NavigationMenu>\n   )\n}\n\nconst ListItem = React.forwardRef<\n   React.ElementRef<\"a\">,\n   React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n   return (\n      <li>\n         <NavigationMenuLink asChild>\n            <a\n               ref={ref}\n               className={ny(\n                  \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors\",\n                  className,\n               )}\n               {...props}\n            >\n               <div className=\"text-sm font-medium leading-none\">{title}</div>\n               <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n                  {children}\n               </p>\n            </a>\n         </NavigationMenuLink>\n      </li>\n   )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/navigation-menu.json b/apps/web/public/r/styles/miami/navigation-menu.json
index 5a26081c..0d96aac5 100644
--- a/apps/web/public/r/styles/miami/navigation-menu.json
+++ b/apps/web/public/r/styles/miami/navigation-menu.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "navigation-menu",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-navigation-menu"
   ],
   "files": [
     {
       "path": "ui/navigation-menu.tsx",
-      "content": "import * as React from 'react'\nimport { ChevronDownIcon } from '@radix-ui/react-icons'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport { cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst NavigationMenu = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <NavigationMenuPrimitive.Root\n      ref={ref}\n      className={ny(\n         'relative z-10 flex max-w-max flex-1 items-center justify-center',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <NavigationMenuViewport />\n   </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.List\n      ref={ref}\n      className={ny(\n         'group flex flex-1 list-none items-center justify-center space-x-1',\n         className,\n      )}\n      {...props}\n   />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n   'group inline-flex h-9 w-max items-center justify-center text-foreground/60 rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <NavigationMenuPrimitive.Trigger\n      ref={ref}\n      className={ny(navigationMenuTriggerStyle(), 'group', className)}\n      {...props}\n   >\n      {children}\n      {' '}\n      <ChevronDownIcon\n         className=\"relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n         aria-hidden=\"true\"\n      />\n   </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.Content\n      ref={ref}\n      className={ny(\n         'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto ',\n         className,\n      )}\n      {...props}\n   />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n   <div className={ny('absolute left-0 top-full flex justify-center')}>\n      <NavigationMenuPrimitive.Viewport\n         className={ny(\n            'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',\n            className,\n         )}\n         ref={ref}\n         {...props}\n      />\n   </div>\n))\nNavigationMenuViewport.displayName\n  = NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.Indicator\n      ref={ref}\n      className={ny(\n         'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',\n         className,\n      )}\n      {...props}\n   >\n      <div className=\"bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md\" />\n   </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName\n  = NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n   navigationMenuTriggerStyle,\n   NavigationMenu,\n   NavigationMenuList,\n   NavigationMenuItem,\n   NavigationMenuContent,\n   NavigationMenuTrigger,\n   NavigationMenuLink,\n   NavigationMenuIndicator,\n   NavigationMenuViewport,\n}\n",
-      "type": "registry:component",
+      "content": "import { ChevronDownIcon } from \"@radix-ui/react-icons\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <NavigationMenuPrimitive.Root\n      ref={ref}\n      className={ny(\n         \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <NavigationMenuViewport />\n   </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.List\n      ref={ref}\n      className={ny(\n         \"group flex flex-1 list-none items-center justify-center space-x-1\",\n         className,\n      )}\n      {...props}\n   />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n   \"group inline-flex h-9 w-max items-center justify-center text-foreground/60 rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50\",\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <NavigationMenuPrimitive.Trigger\n      ref={ref}\n      className={ny(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n   >\n      {children}{\" \"}\n      <ChevronDownIcon\n         className=\"relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n         aria-hidden=\"true\"\n      />\n   </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.Content\n      ref={ref}\n      className={ny(\n         \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto \",\n         className,\n      )}\n      {...props}\n   />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n   <div className={ny(\"absolute left-0 top-full flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n         className={ny(\n            \"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]\",\n            className,\n         )}\n         ref={ref}\n         {...props}\n      />\n   </div>\n))\nNavigationMenuViewport.displayName =\n   NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.Indicator\n      ref={ref}\n      className={ny(\n         \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n         className,\n      )}\n      {...props}\n   >\n      <div className=\"bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md\" />\n   </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n   NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n   navigationMenuTriggerStyle,\n   NavigationMenu,\n   NavigationMenuList,\n   NavigationMenuItem,\n   NavigationMenuContent,\n   NavigationMenuTrigger,\n   NavigationMenuLink,\n   NavigationMenuIndicator,\n   NavigationMenuViewport,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/neon-gradient-card-demo.json b/apps/web/public/r/styles/miami/neon-gradient-card-demo.json
index 9d3b6974..d7fdd7ec 100644
--- a/apps/web/public/r/styles/miami/neon-gradient-card-demo.json
+++ b/apps/web/public/r/styles/miami/neon-gradient-card-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "neon-gradient-card-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/neon-gradient-card-demo.tsx",
-      "content": "import { NeonGradientCard } from '~/registry/miami/ui/neon-gradient-card'\n\nexport default function NeonGradientCardDemo() {\n   return (\n      <NeonGradientCard className=\"max-w-sm items-center justify-center text-center\">\n         <span className=\"pointer-events-none z-10 h-full whitespace-pre-wrap bg-gradient-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-6xl font-bold leading-none tracking-tighter text-transparent dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]\">\n            Neon Gradient Card\n         </span>\n      </NeonGradientCard>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/neon-gradient-card-demo.tsx",
+      "content": "import { NeonGradientCard } from \"~/registry/miami/ui/neon-gradient-card\"\n\nexport default function NeonGradientCardDemo() {\n   return (\n      <NeonGradientCard className=\"max-w-sm items-center justify-center text-center\">\n         <span className=\"pointer-events-none z-10 h-full whitespace-pre-wrap bg-gradient-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-6xl font-bold leading-none tracking-tighter text-transparent dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]\">\n            Neon Gradient Card\n         </span>\n      </NeonGradientCard>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/neon-gradient-card.json b/apps/web/public/r/styles/miami/neon-gradient-card.json
index 077e7799..def6fc91 100644
--- a/apps/web/public/r/styles/miami/neon-gradient-card.json
+++ b/apps/web/public/r/styles/miami/neon-gradient-card.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "neon-gradient-card",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/neon-gradient-card.tsx",
-      "content": "'use client'\n\nimport type {\n   CSSProperties,\n   ReactElement,\n   ReactNode,\n} from 'react'\nimport {\n   useEffect,\n   useRef,\n   useState,\n} from 'react'\n\nimport { ny } from '~/lib/utils'\n\ninterface NeonColorsProps {\n   firstColor: string\n   secondColor: string\n}\n\ninterface NeonGradientCardProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the card\n    */\n   as?: ReactElement\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the card\n    */\n   className?: string\n\n   /**\n    * @default \"\"\n    * @type ReactNode\n    * @description\n    * The children of the card\n    */\n   children?: ReactNode\n\n   /**\n    * @default 5\n    * @type number\n    * @description\n    * The size of the border in pixels\n    */\n   borderSize?: number\n\n   /**\n    * @default 20\n    * @type number\n    * @description\n    * The size of the radius in pixels\n    */\n   borderRadius?: number\n\n   /**\n    * @default \"{ firstColor: '#ff00aa', secondColor: '#00FFF1' }\"\n    * @type string\n    * @description\n    * The colors of the neon gradient\n    */\n   neonColors?: NeonColorsProps\n\n   [key: string]: any\n}\n\nconst NeonGradientCard: React.FC<NeonGradientCardProps> = ({\n   className,\n   children,\n   borderSize = 2,\n   borderRadius = 20,\n   neonColors = {\n      firstColor: '#ff00aa',\n      secondColor: '#00FFF1',\n   },\n   ...props\n}) => {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n   useEffect(() => {\n      const updateDimensions = () => {\n         if (containerRef.current) {\n            const { offsetWidth, offsetHeight } = containerRef.current\n            setDimensions({ width: offsetWidth, height: offsetHeight })\n         }\n      }\n\n      updateDimensions()\n      window.addEventListener('resize', updateDimensions)\n\n      return () => {\n         window.removeEventListener('resize', updateDimensions)\n      }\n   }, [])\n\n   useEffect(() => {\n      if (containerRef.current) {\n         const { offsetWidth, offsetHeight } = containerRef.current\n         setDimensions({ width: offsetWidth, height: offsetHeight })\n      }\n   }, [children])\n\n   return (\n      <div\n         ref={containerRef}\n         style={\n            {\n               '--border-size': `${borderSize}px`,\n               '--border-radius': `${borderRadius}px`,\n               '--neon-first-color': neonColors.firstColor,\n               '--neon-second-color': neonColors.secondColor,\n               '--card-width': `${dimensions.width}px`,\n               '--card-height': `${dimensions.height}px`,\n               '--card-content-radius': `${borderRadius - borderSize}px`,\n               '--pseudo-element-background-image': `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,\n               '--pseudo-element-width': `${dimensions.width + borderSize * 2}px`,\n               '--pseudo-element-height': `${dimensions.height + borderSize * 2}px`,\n               '--after-blur': `${dimensions.width / 3}px`,\n            } as CSSProperties\n         }\n         className={ny(\n            'relative z-10 size-full rounded-[var(--border-radius)]',\n            className,\n         )}\n         {...props}\n      >\n         <div\n            className={ny(\n               'relative size-full min-h-[inherit] rounded-[var(--card-content-radius)] bg-gray-100 p-6',\n               'before:absolute before:-left-[var(--border-size)] before:-top-[var(--border-size)] before:-z-10 before:block',\n               'before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-[\\'\\']',\n               'before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-[length:100%_200%]',\n               'before:animate-background-position-spin',\n               'after:absolute after:-left-[var(--border-size)] after:-top-[var(--border-size)] after:-z-10 after:block',\n               'after:h-[var(--pseudo-element-height)] after:w-[var(--pseudo-element-width)] after:rounded-[var(--border-radius)] after:blur-[var(--after-blur)] after:content-[\\'\\']',\n               'after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80',\n               'after:animate-background-position-spin',\n               'dark:bg-neutral-900',\n            )}\n         >\n            {children}\n         </div>\n      </div>\n   )\n}\n\nexport { NeonGradientCard }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { CSSProperties, ReactElement, ReactNode } from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ninterface NeonColorsProps {\n   firstColor: string\n   secondColor: string\n}\n\ninterface NeonGradientCardProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the card\n    */\n   as?: ReactElement\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the card\n    */\n   className?: string\n\n   /**\n    * @default \"\"\n    * @type ReactNode\n    * @description\n    * The children of the card\n    */\n   children?: ReactNode\n\n   /**\n    * @default 5\n    * @type number\n    * @description\n    * The size of the border in pixels\n    */\n   borderSize?: number\n\n   /**\n    * @default 20\n    * @type number\n    * @description\n    * The size of the radius in pixels\n    */\n   borderRadius?: number\n\n   /**\n    * @default \"{ firstColor: '#ff00aa', secondColor: '#00FFF1' }\"\n    * @type string\n    * @description\n    * The colors of the neon gradient\n    */\n   neonColors?: NeonColorsProps\n\n   [key: string]: any\n}\n\nconst NeonGradientCard: React.FC<NeonGradientCardProps> = ({\n   className,\n   children,\n   borderSize = 2,\n   borderRadius = 20,\n   neonColors = {\n      firstColor: \"#ff00aa\",\n      secondColor: \"#00FFF1\",\n   },\n   ...props\n}) => {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n   useEffect(() => {\n      const updateDimensions = () => {\n         if (containerRef.current) {\n            const { offsetWidth, offsetHeight } = containerRef.current\n            setDimensions({ width: offsetWidth, height: offsetHeight })\n         }\n      }\n\n      updateDimensions()\n      window.addEventListener(\"resize\", updateDimensions)\n\n      return () => {\n         window.removeEventListener(\"resize\", updateDimensions)\n      }\n   }, [])\n\n   useEffect(() => {\n      if (containerRef.current) {\n         const { offsetWidth, offsetHeight } = containerRef.current\n         setDimensions({ width: offsetWidth, height: offsetHeight })\n      }\n   }, [children])\n\n   return (\n      <div\n         ref={containerRef}\n         style={\n            {\n               \"--border-size\": `${borderSize}px`,\n               \"--border-radius\": `${borderRadius}px`,\n               \"--neon-first-color\": neonColors.firstColor,\n               \"--neon-second-color\": neonColors.secondColor,\n               \"--card-width\": `${dimensions.width}px`,\n               \"--card-height\": `${dimensions.height}px`,\n               \"--card-content-radius\": `${borderRadius - borderSize}px`,\n               \"--pseudo-element-background-image\": `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,\n               \"--pseudo-element-width\": `${dimensions.width + borderSize * 2}px`,\n               \"--pseudo-element-height\": `${dimensions.height + borderSize * 2}px`,\n               \"--after-blur\": `${dimensions.width / 3}px`,\n            } as CSSProperties\n         }\n         className={ny(\n            \"relative z-10 size-full rounded-[var(--border-radius)]\",\n            className,\n         )}\n         {...props}\n      >\n         <div\n            className={ny(\n               \"relative size-full min-h-[inherit] rounded-[var(--card-content-radius)] bg-gray-100 p-6\",\n               \"before:absolute before:-left-[var(--border-size)] before:-top-[var(--border-size)] before:-z-10 before:block\",\n               \"before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-['']\",\n               \"before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-[length:100%_200%]\",\n               \"before:animate-background-position-spin\",\n               \"after:absolute after:-left-[var(--border-size)] after:-top-[var(--border-size)] after:-z-10 after:block\",\n               \"after:h-[var(--pseudo-element-height)] after:w-[var(--pseudo-element-width)] after:rounded-[var(--border-radius)] after:blur-[var(--after-blur)] after:content-['']\",\n               \"after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80\",\n               \"after:animate-background-position-spin\",\n               \"dark:bg-neutral-900\",\n            )}\n         >\n            {children}\n         </div>\n      </div>\n   )\n}\n\nexport { NeonGradientCard }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/number-ticker-demo.json b/apps/web/public/r/styles/miami/number-ticker-demo.json
index f0e39bd8..79a0c3d3 100644
--- a/apps/web/public/r/styles/miami/number-ticker-demo.json
+++ b/apps/web/public/r/styles/miami/number-ticker-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "number-ticker-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/number-ticker-demo.tsx",
-      "content": "import NumberTicker from '~/registry/miami/ui/number-ticker'\n\nfunction NumberTickerDemo() {\n   return (\n      <p className=\"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white\">\n         <NumberTicker value={100} />\n      </p>\n   )\n}\n\nexport default NumberTickerDemo\n",
-      "type": "registry:component",
+      "path": "examples/number-ticker-demo.tsx",
+      "content": "import NumberTicker from \"~/registry/miami/ui/number-ticker\"\n\nfunction NumberTickerDemo() {\n   return (\n      <p className=\"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white\">\n         <NumberTicker value={100} />\n      </p>\n   )\n}\n\nexport default NumberTickerDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/number-ticker.json b/apps/web/public/r/styles/miami/number-ticker.json
index a4bc7dd6..9b47515a 100644
--- a/apps/web/public/r/styles/miami/number-ticker.json
+++ b/apps/web/public/r/styles/miami/number-ticker.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "number-ticker",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/number-ticker.tsx",
-      "content": "'use client'\n\nimport { useInView, useMotionValue, useSpring } from 'framer-motion'\nimport { useEffect, useRef } from 'react'\nimport { ny } from '~/lib/utils'\n\nexport default function NumberTicker({\n   value,\n   direction = 'up',\n   delay = 0,\n   className,\n}: {\n   value: number\n   direction?: 'up' | 'down'\n   className?: string\n   delay?: number // delay in s\n}) {\n   const ref = useRef<HTMLSpanElement>(null)\n   const motionValue = useMotionValue(direction === 'down' ? value : 0)\n   const springValue = useSpring(motionValue, {\n      damping: 60,\n      stiffness: 100,\n   })\n   const isInView = useInView(ref, { once: true, margin: '0px' })\n\n   useEffect(() => {\n      isInView\n      && setTimeout(() => {\n         motionValue.set(direction === 'down' ? 0 : value)\n      }, delay * 1000)\n   }, [motionValue, isInView, delay, value, direction])\n\n   useEffect(\n      () =>\n         springValue.on('change', (latest) => {\n            if (ref.current) {\n               ref.current.textContent = Intl.NumberFormat('en-US').format(\n                  Math.round(latest),\n               )\n            }\n         }),\n      [springValue],\n   )\n\n   return (\n      <span\n         className={ny(\n            'inline-block tabular-nums tracking-wider text-black dark:text-white',\n            className,\n         )}\n         ref={ref}\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { useInView, useMotionValue, useSpring } from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\nexport default function NumberTicker({\n   value,\n   direction = \"up\",\n   delay = 0,\n   className,\n}: {\n   value: number\n   direction?: \"up\" | \"down\"\n   className?: string\n   delay?: number // delay in s\n}) {\n   const ref = useRef<HTMLSpanElement>(null)\n   const motionValue = useMotionValue(direction === \"down\" ? value : 0)\n   const springValue = useSpring(motionValue, {\n      damping: 60,\n      stiffness: 100,\n   })\n   const isInView = useInView(ref, { once: true, margin: \"0px\" })\n\n   useEffect(() => {\n      isInView &&\n         setTimeout(() => {\n            motionValue.set(direction === \"down\" ? 0 : value)\n         }, delay * 1000)\n   }, [motionValue, isInView, delay, value, direction])\n\n   useEffect(\n      () =>\n         springValue.on(\"change\", (latest) => {\n            if (ref.current) {\n               ref.current.textContent = Intl.NumberFormat(\"en-US\").format(\n                  Math.round(latest),\n               )\n            }\n         }),\n      [springValue],\n   )\n\n   return (\n      <span\n         className={ny(\n            \"inline-block tabular-nums tracking-wider text-black dark:text-white\",\n            className,\n         )}\n         ref={ref}\n      />\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/nyx-toc-demo.json b/apps/web/public/r/styles/miami/nyx-toc-demo.json
index 343b8e79..ef2bcd8f 100644
--- a/apps/web/public/r/styles/miami/nyx-toc-demo.json
+++ b/apps/web/public/r/styles/miami/nyx-toc-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "nyx-toc-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/nyx-toc-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { NyxTOCItems } from '~/registry/miami/ui/nyx-toc'\n\nconst demoItems = [\n   {\n      title: 'Introduction',\n      url: '#introduction',\n      depth: 1,\n   },\n   {\n      title: 'Getting Started',\n      url: '#getting-started',\n      depth: 2,\n   },\n   {\n      title: 'Installation',\n      url: '#installation',\n      depth: 3,\n   },\n   {\n      title: 'Basic Usage',\n      url: '#basic-usage',\n      depth: 3,\n   },\n   {\n      title: 'Advanced Features',\n      url: '#advanced-features',\n      depth: 2,\n   },\n   {\n      title: 'API Reference',\n      url: '#api-reference',\n      depth: 2,\n   },\n]\n\nexport default function NyxTOCDemo() {\n   return (\n      <div className=\"flex gap-10\">\n         <div className=\"flex-1\">\n            <NyxTOCItems\n               items={demoItems}\n               label=\"On This Page\"\n            />\n         </div>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/nyx-toc-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { NyxTOCItems } from \"~/registry/miami/ui/nyx-toc\"\n\nconst demoItems = [\n   {\n      title: \"Introduction\",\n      url: \"#introduction\",\n      depth: 1,\n   },\n   {\n      title: \"Getting Started\",\n      url: \"#getting-started\",\n      depth: 2,\n   },\n   {\n      title: \"Installation\",\n      url: \"#installation\",\n      depth: 3,\n   },\n   {\n      title: \"Basic Usage\",\n      url: \"#basic-usage\",\n      depth: 3,\n   },\n   {\n      title: \"Advanced Features\",\n      url: \"#advanced-features\",\n      depth: 2,\n   },\n   {\n      title: \"API Reference\",\n      url: \"#api-reference\",\n      depth: 2,\n   },\n]\n\nexport default function NyxTOCDemo() {\n   return (\n      <div className=\"flex gap-10\">\n         <div className=\"flex-1\">\n            <NyxTOCItems items={demoItems} label=\"On This Page\" />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/nyx-toc-popover-demo.json b/apps/web/public/r/styles/miami/nyx-toc-popover-demo.json
index dbdcd5ae..8a5682cf 100644
--- a/apps/web/public/r/styles/miami/nyx-toc-popover-demo.json
+++ b/apps/web/public/r/styles/miami/nyx-toc-popover-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "nyx-toc-popover-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/nyx-toc-popover-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { NyxTOCItems, TocPopover, TocPopoverContent, TocPopoverTrigger } from '~/registry/miami/ui/nyx-toc'\n\nexport default function NyxTOCPopoverDemo() {\n   // Example TOC items\n   const items = [\n      { title: 'Introduction', url: '#introduction', depth: 1 },\n      { title: 'Getting Started', url: '#getting-started', depth: 2 },\n      { title: 'Installation', url: '#installation', depth: 2 },\n      { title: 'Basic Usage', url: '#basic-usage', depth: 3 },\n      { title: 'Advanced Features', url: '#advanced-features', depth: 2 },\n      { title: 'Configuration', url: '#configuration', depth: 3 },\n      { title: 'Customization', url: '#customization', depth: 2 },\n   ]\n\n   return (\n      <div className=\"flex h-[300px] w-full items-start justify-center p-6\">\n         <TocPopover>\n            <TocPopoverTrigger items={items} className=\"hover:bg-accent rounded-md border\" />\n            <TocPopoverContent>\n               <NyxTOCItems\n                  items={items}\n                  isMenu\n                  label=\"On This Page\"\n               />\n            </TocPopoverContent>\n         </TocPopover>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/nyx-toc-popover-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n   NyxTOCItems,\n   TocPopover,\n   TocPopoverContent,\n   TocPopoverTrigger,\n} from \"~/registry/miami/ui/nyx-toc\"\n\nexport default function NyxTOCPopoverDemo() {\n   // Example TOC items\n   const items = [\n      { title: \"Introduction\", url: \"#introduction\", depth: 1 },\n      { title: \"Getting Started\", url: \"#getting-started\", depth: 2 },\n      { title: \"Installation\", url: \"#installation\", depth: 2 },\n      { title: \"Basic Usage\", url: \"#basic-usage\", depth: 3 },\n      { title: \"Advanced Features\", url: \"#advanced-features\", depth: 2 },\n      { title: \"Configuration\", url: \"#configuration\", depth: 3 },\n      { title: \"Customization\", url: \"#customization\", depth: 2 },\n   ]\n\n   return (\n      <div className=\"flex h-[300px] w-full items-start justify-center p-6\">\n         <TocPopover>\n            <TocPopoverTrigger\n               items={items}\n               className=\"hover:bg-accent rounded-md border\"\n            />\n            <TocPopoverContent>\n               <NyxTOCItems items={items} isMenu label=\"On This Page\" />\n            </TocPopoverContent>\n         </TocPopover>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/nyx-toc.json b/apps/web/public/r/styles/miami/nyx-toc.json
index 9a5cbbb0..a39b8e78 100644
--- a/apps/web/public/r/styles/miami/nyx-toc.json
+++ b/apps/web/public/r/styles/miami/nyx-toc.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "nyx-toc",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-icons",
     "@radix-ui/react-popover",
@@ -13,19 +15,19 @@
   "files": [
     {
       "path": "ui/nyx-toc.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport type { AnchorHTMLAttributes, HTMLAttributes, ReactNode, RefObject } from 'react'\nimport { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react'\nimport type { PopoverContentProps, PopoverTriggerProps } from '@radix-ui/react-popover'\nimport { AlignLeft, ChevronRight } from 'lucide-react'\nimport scrollIntoView from 'scroll-into-view-if-needed'\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport { Popover, PopoverContent, PopoverTrigger } from '~/registry/miami/ui/popover'\nimport { ny } from '~/lib/utils'\nimport { useAnchorObserver } from '~/hooks/use-anchor-observer'\nimport { useOnChange } from '~/hooks/use-on-change'\n\n// #region Types\nexport interface TOCItemType {\n   title: ReactNode\n   url: string\n   depth: number\n}\n\nexport type TableOfContents = TOCItemType[]\nexport type TOCThumb = [top: number, height: number]\n\nexport interface TOCProps {\n   header?: ReactNode\n   footer?: ReactNode\n   children: ReactNode\n}\n\nexport interface PageStyles {\n   tocNav?: string\n   toc?: string\n   page?: string\n   article?: string\n}\n\nexport interface TOCItemProps\n   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {\n   href: string\n\n   onActiveChange?: (v: boolean) => void\n}\n\n// #region Components\nconst ScrollArea = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={ny('overflow-hidden', className)}\n      {...props}\n   >\n      {children}\n      <ScrollAreaPrimitive.Corner />\n      <ScrollBar orientation=\"vertical\" />\n   </ScrollAreaPrimitive.Root>\n))\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollViewport = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Viewport>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={ny('size-full rounded-[inherit]', className)}\n      {...props}\n   >\n      {children}\n   </ScrollAreaPrimitive.Viewport>\n))\n\nScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName\n\nconst ScrollBar = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Scrollbar>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n   <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      orientation={orientation}\n      className={ny(\n         'data-[state=hidden]:animate-fd-fade-out flex select-none',\n         orientation === 'vertical' && 'h-full w-1.5',\n         orientation === 'horizontal' && 'h-1.5 flex-col',\n         className,\n      )}\n      {...props}\n   >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-fd-border relative flex-1 rounded-full\" />\n   </ScrollAreaPrimitive.Scrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName\n\nexport { ScrollArea, ScrollBar, ScrollViewport }\n\n// #region Contexts\nconst ActiveAnchorContext = createContext<string[]>([])\nconst ScrollContext = createContext<RefObject<HTMLElement | null>>({ current: null })\nconst StylesContext = createContext<PageStyles>({\n   tocNav: 'xl:hidden',\n   toc: 'max-xl:hidden',\n})\n\n// #region Hooks\nfunction useActiveAnchor(): string | undefined {\n   return useContext(ActiveAnchorContext).at(-1)\n}\n\nfunction useActiveAnchors(): string[] {\n   return useContext(ActiveAnchorContext)\n}\n\nfunction usePageStyles() {\n   return useContext(StylesContext)\n}\n\n// #region Utility Functions\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b))\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   return a !== b\n}\n\nfunction mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\n   return (value) => {\n      refs.forEach((ref) => {\n         if (typeof ref === 'function')\n            ref(value)\n         else if (ref !== null && typeof ref === 'object')\n            (ref as React.MutableRefObject<T | null>).current = value\n      })\n   }\n}\n\nfunction getItemOffset(depth: number): number {\n   if (depth <= 2)\n      return 14\n   if (depth === 3)\n      return 26\n   return 36\n}\n\nfunction getLineOffset(depth: number): number {\n   return depth >= 3 ? 10 : 0\n}\n\n// #region Components\nexport function ScrollProvider({\n   containerRef,\n   children,\n}: {\n   containerRef: RefObject<HTMLElement | null>\n   children?: ReactNode\n}): React.ReactElement {\n   return (\n      <ScrollContext.Provider value={containerRef}>\n         {children}\n      </ScrollContext.Provider>\n   )\n}\n\nexport function AnchorProvider({\n   toc,\n   single = true,\n   children,\n}: {\n   toc: TableOfContents\n   single?: boolean\n   children?: ReactNode\n}): React.ReactElement {\n   const headings = useMemo(() => {\n      return toc.map(item => item.url.split('#')[1])\n   }, [toc])\n\n   return (\n      <ActiveAnchorContext.Provider value={useAnchorObserver(headings, single)}>\n         {children}\n      </ActiveAnchorContext.Provider>\n   )\n}\n\nexport const TOCItem = forwardRef<HTMLAnchorElement, TOCItemProps>(\n   ({ onActiveChange, ...props }, ref) => {\n      const containerRef = useContext(ScrollContext)\n      const anchors = useActiveAnchors()\n      const anchorRef = useRef<HTMLAnchorElement>(null)\n      const mergedRef = mergeRefs(anchorRef, ref)\n\n      const isActive = anchors.includes(props.href.slice(1))\n\n      useOnChange(isActive, (v) => {\n         const element = anchorRef.current\n         if (!element)\n            return\n\n         if (v && containerRef.current) {\n            scrollIntoView(element, {\n               behavior: 'smooth',\n               block: 'center',\n               inline: 'center',\n               scrollMode: 'always',\n               boundary: containerRef.current,\n            })\n         }\n\n         onActiveChange?.(v)\n      })\n\n      return (\n         <a ref={mergedRef} data-active={isActive} {...props}>\n            {props.children}\n         </a>\n      )\n   },\n)\n\nTOCItem.displayName = 'TOCItem'\n\nexport function TocThumb({\n   containerRef,\n   ...props\n}: HTMLAttributes<HTMLDivElement> & {\n   containerRef: RefObject<HTMLElement | null>\n}): ReactNode {\n   const active = useActiveAnchors()\n   const thumbRef = useRef<HTMLDivElement>(null)\n   const activeRef = useRef(active)\n   activeRef.current = active\n\n   function calc(container: HTMLElement, active: string[]): TOCThumb {\n      if (active.length === 0 || container.clientHeight === 0)\n         return [0, 0]\n\n      let upper = Number.MAX_VALUE\n      let lower = 0\n\n      for (const item of active) {\n         const element = container.querySelector<HTMLElement>(`a[href=\"#${item}\"]`)\n         if (!element)\n            continue\n\n         const styles = getComputedStyle(element)\n         upper = Math.min(upper, element.offsetTop + Number.parseFloat(styles.paddingTop))\n         lower = Math.max(\n            lower,\n            element.offsetTop\n            + element.clientHeight\n            - Number.parseFloat(styles.paddingBottom),\n         )\n      }\n\n      return [upper, lower - upper]\n   }\n\n   function update(element: HTMLElement, info: TOCThumb): void {\n      element.style.setProperty('--nyx-top', `${info[0]}px`)\n      element.style.setProperty('--nyx-height', `${info[1]}px`)\n   }\n\n   useEffect(() => {\n      if (!containerRef.current)\n         return\n      const container = containerRef.current\n\n      const onResize = (): void => {\n         if (!thumbRef.current)\n            return\n         update(thumbRef.current, calc(container, activeRef.current))\n      }\n\n      onResize()\n      const observer = new ResizeObserver(onResize)\n      observer.observe(container)\n\n      return () => {\n         observer.disconnect()\n      }\n   }, [containerRef])\n\n   useOnChange(active, () => {\n      if (!containerRef.current || !thumbRef.current)\n         return\n\n      update(thumbRef.current, calc(containerRef.current, active))\n   })\n\n   return <div ref={thumbRef} role=\"none\" {...props} />\n}\n\nexport function TocItemsEmpty() {\n   return (\n      <div className=\"bg-card text-muted-foreground rounded-lg border p-3 text-xs\">\n         No headings found\n      </div>\n   )\n}\n\nexport function Toc(props: HTMLAttributes<HTMLDivElement>) {\n   const { toc } = usePageStyles()\n\n   return (\n      <div\n         id=\"nyx-toc\"\n         {...props}\n         className={ny(\n            'top-nyx-layout-top sticky h-[var(--nyx-toc-height)] pb-2 pt-12',\n            toc,\n            props.className,\n         )}\n         style={{\n            ...props.style,\n            '--nyx-toc-height': 'calc(100dvh - var(--nyx-banner-height) - var(--nyx-nav-height))',\n         } as any}\n      >\n         <div className=\"flex h-full w-[var(--nyx-width)] max-w-full flex-col gap-3 pe-4\">\n            {props.children}\n         </div>\n      </div>\n   )\n}\n\n// Main Component\nexport function NyxTOCItems({\n   items,\n   isMenu = false,\n   label,\n}: {\n   items: TOCItemType[]\n   isMenu?: boolean\n   label?: ReactNode\n}) {\n   const viewRef = useRef<HTMLDivElement>(null)\n   const containerRef = useRef<HTMLDivElement>(null)\n\n   const [svg, setSvg] = useState<{\n      path: string\n      width: number\n      height: number\n   }>()\n\n   useEffect(() => {\n      if (!containerRef.current)\n         return\n      const container = containerRef.current\n\n      function onResize(): void {\n         if (container.clientHeight === 0)\n            return\n         let w = 0\n         let h = 0\n         const d: string[] = []\n         for (let i = 0; i < items.length; i++) {\n            const element: HTMLElement | null = container.querySelector(\n               `a[href=\"#${items[i].url.slice(1)}\"]`,\n            )\n            if (!element)\n               continue\n\n            const styles = getComputedStyle(element)\n            const offset = getLineOffset(items[i].depth) + 1\n            const top = element.offsetTop + Number.parseFloat(styles.paddingTop)\n            const bottom = element.offsetTop + element.clientHeight - Number.parseFloat(styles.paddingBottom)\n\n            w = Math.max(offset, w)\n            h = Math.max(h, bottom)\n\n            d.push(`${i === 0 ? 'M' : 'L'}${offset} ${top}`)\n            d.push(`L${offset} ${bottom}`)\n         }\n\n         setSvg({\n            path: d.join(' '),\n            width: w + 1,\n            height: h,\n         })\n      }\n\n      const observer = new ResizeObserver(onResize)\n      onResize()\n      observer.observe(container)\n      return () => observer.disconnect()\n   }, [items])\n\n   if (items.length === 0)\n      return <TocItemsEmpty />\n\n   return (\n      <>\n         {label && (\n            <h3 className=\"text-muted-foreground -ms-0.5 inline-flex items-center gap-1.5 text-sm\">\n               <AlignLeft className=\"size-4\" />\n               {label}\n            </h3>\n         )}\n         <ScrollArea className={ny('flex flex-col', isMenu && '-ms-3')}>\n            <ScrollViewport className=\"relative min-h-0\" ref={viewRef}>\n               {svg\n                  ? (\n                        <div\n                           className=\"absolute start-0 top-0 rtl:-scale-x-100\"\n                           style={{\n                              width: svg.width,\n                              height: svg.height,\n                              maskImage: `url(\"data:image/svg+xml,${\n                             // Inline SVG\n                             encodeURIComponent(\n                               `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ${svg.width} ${svg.height}\"><path d=\"${svg.path}\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" /></svg>`,\n                             )\n                           }\")`,\n                           }}\n                        >\n                           <TocThumb\n                              containerRef={containerRef}\n                              className=\"bg-primary mt-[var(--nyx-top)] h-[var(--nyx-height)] transition-all\"\n                           />\n                        </div>\n                     )\n                  : null}\n               <ScrollProvider containerRef={viewRef}>\n                  <div className=\"flex flex-col\" ref={containerRef}>\n                     {items.map((item, i) => (\n                        <LocalTOCItem\n                           key={item.url}\n                           item={item}\n                           upper={items[i - 1]?.depth}\n                           lower={items[i + 1]?.depth}\n                        />\n                     ))}\n                  </div>\n               </ScrollProvider>\n            </ScrollViewport>\n         </ScrollArea>\n      </>\n   )\n}\n\n// Popover Components\nexport const TocPopover = Popover\n\nexport function TocPopoverTrigger({\n   items,\n   ...props\n}: PopoverTriggerProps & { items: TOCItemType[] }) {\n   const active = useActiveAnchor()\n   const current = useMemo(() => {\n      return items.find(item => active === item.url.slice(1))?.title\n   }, [items, active])\n\n   return (\n      <PopoverTrigger\n         {...props}\n         className={ny(\n            'inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start',\n            props.className,\n         )}\n      >\n         <AlignLeft className=\"size-4 shrink-0\" />\n         Table of Contents\n         {current && (\n            <>\n               <ChevronRight className=\"text-muted-foreground -mx-1.5 size-4 shrink-0\" />\n               <span className=\"text-muted-foreground truncate\">{current}</span>\n            </>\n         )}\n      </PopoverTrigger>\n   )\n}\n\nexport function TocPopoverContent(props: PopoverContentProps) {\n   return (\n      <PopoverContent\n         hideWhenDetached\n         alignOffset={16}\n         align=\"start\"\n         side=\"bottom\"\n         data-toc-popover=\"\"\n         {...props}\n         className={ny(\n            'flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3',\n            props.className,\n         )}\n      >\n         {props.children}\n      </PopoverContent>\n   )\n}\n\nfunction LocalTOCItem({\n   item,\n   upper = item.depth,\n   lower = item.depth,\n}: {\n   item: TOCItemType\n   upper?: number\n   lower?: number\n}) {\n   const offset = getLineOffset(item.depth)\n   const upperOffset = getLineOffset(upper)\n   const lowerOffset = getLineOffset(lower)\n\n   return (\n      <TOCItem\n         href={item.url}\n         style={{\n            paddingInlineStart: getItemOffset(item.depth),\n         }}\n         className=\"prose text-muted-foreground data-[active=true]:text-primary relative py-1.5 text-sm transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0\"\n      >\n         {offset !== upperOffset\n            ? (\n                  <svg\n                     xmlns=\"http://www.w3.org/2000/svg\"\n                     viewBox=\"0 0 16 16\"\n                     className=\"absolute -top-1.5 start-0 size-4 rtl:-scale-x-100\"\n                  >\n                     <line\n                        x1={upperOffset}\n                        y1=\"0\"\n                        x2={offset}\n                        y2=\"12\"\n                        className=\"stroke-foreground/10\"\n                        strokeWidth=\"1\"\n                     />\n                  </svg>\n               )\n            : null}\n         <div\n            className={ny(\n               'bg-foreground/10 absolute inset-y-0 w-px',\n               offset !== upperOffset && 'top-1.5',\n               offset !== lowerOffset && 'bottom-1.5',\n            )}\n            style={{\n               insetInlineStart: offset,\n            }}\n         />\n         {item.title}\n      </TOCItem>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type {\n   PopoverContentProps,\n   PopoverTriggerProps,\n} from \"@radix-ui/react-popover\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport { AlignLeft, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\nimport type {\n   AnchorHTMLAttributes,\n   HTMLAttributes,\n   ReactNode,\n   RefObject,\n} from \"react\"\nimport {\n   createContext,\n   forwardRef,\n   useContext,\n   useEffect,\n   useMemo,\n   useRef,\n   useState,\n} from \"react\"\nimport scrollIntoView from \"scroll-into-view-if-needed\"\nimport { useAnchorObserver } from \"~/hooks/use-anchor-observer\"\nimport { useOnChange } from \"~/hooks/use-on-change\"\nimport { ny } from \"~/lib/utils\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\n// #region Types\nexport interface TOCItemType {\n   title: ReactNode\n   url: string\n   depth: number\n}\n\nexport type TableOfContents = TOCItemType[]\nexport type TOCThumb = [top: number, height: number]\n\nexport interface TOCProps {\n   header?: ReactNode\n   footer?: ReactNode\n   children: ReactNode\n}\n\nexport interface PageStyles {\n   tocNav?: string\n   toc?: string\n   page?: string\n   article?: string\n}\n\nexport interface TOCItemProps\n   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> {\n   href: string\n\n   onActiveChange?: (v: boolean) => void\n}\n\n// #region Components\nconst ScrollArea = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={ny(\"overflow-hidden\", className)}\n      {...props}\n   >\n      {children}\n      <ScrollAreaPrimitive.Corner />\n      <ScrollBar orientation=\"vertical\" />\n   </ScrollAreaPrimitive.Root>\n))\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollViewport = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Viewport>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={ny(\"size-full rounded-[inherit]\", className)}\n      {...props}\n   >\n      {children}\n   </ScrollAreaPrimitive.Viewport>\n))\n\nScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName\n\nconst ScrollBar = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Scrollbar>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n   <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      orientation={orientation}\n      className={ny(\n         \"data-[state=hidden]:animate-fd-fade-out flex select-none\",\n         orientation === \"vertical\" && \"h-full w-1.5\",\n         orientation === \"horizontal\" && \"h-1.5 flex-col\",\n         className,\n      )}\n      {...props}\n   >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-fd-border relative flex-1 rounded-full\" />\n   </ScrollAreaPrimitive.Scrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName\n\nexport { ScrollArea, ScrollBar, ScrollViewport }\n\n// #region Contexts\nconst ActiveAnchorContext = createContext<string[]>([])\nconst ScrollContext = createContext<RefObject<HTMLElement | null>>({\n   current: null,\n})\nconst StylesContext = createContext<PageStyles>({\n   tocNav: \"xl:hidden\",\n   toc: \"max-xl:hidden\",\n})\n\n// #region Hooks\nfunction useActiveAnchor(): string | undefined {\n   return useContext(ActiveAnchorContext).at(-1)\n}\n\nfunction useActiveAnchors(): string[] {\n   return useContext(ActiveAnchorContext)\n}\n\nfunction usePageStyles() {\n   return useContext(StylesContext)\n}\n\n// #region Utility Functions\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b))\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   return a !== b\n}\n\nfunction mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\n   return (value) => {\n      refs.forEach((ref) => {\n         if (typeof ref === \"function\") ref(value)\n         else if (ref !== null && typeof ref === \"object\")\n            (ref as React.MutableRefObject<T | null>).current = value\n      })\n   }\n}\n\nfunction getItemOffset(depth: number): number {\n   if (depth <= 2) return 14\n   if (depth === 3) return 26\n   return 36\n}\n\nfunction getLineOffset(depth: number): number {\n   return depth >= 3 ? 10 : 0\n}\n\n// #region Components\nexport function ScrollProvider({\n   containerRef,\n   children,\n}: {\n   containerRef: RefObject<HTMLElement | null>\n   children?: ReactNode\n}): React.ReactElement {\n   return (\n      <ScrollContext.Provider value={containerRef}>\n         {children}\n      </ScrollContext.Provider>\n   )\n}\n\nexport function AnchorProvider({\n   toc,\n   single = true,\n   children,\n}: {\n   toc: TableOfContents\n   single?: boolean\n   children?: ReactNode\n}): React.ReactElement {\n   const headings = useMemo(() => {\n      return toc.map((item) => item.url.split(\"#\")[1])\n   }, [toc])\n\n   return (\n      <ActiveAnchorContext.Provider value={useAnchorObserver(headings, single)}>\n         {children}\n      </ActiveAnchorContext.Provider>\n   )\n}\n\nexport const TOCItem = forwardRef<HTMLAnchorElement, TOCItemProps>(\n   ({ onActiveChange, ...props }, ref) => {\n      const containerRef = useContext(ScrollContext)\n      const anchors = useActiveAnchors()\n      const anchorRef = useRef<HTMLAnchorElement>(null)\n      const mergedRef = mergeRefs(anchorRef, ref)\n\n      const isActive = anchors.includes(props.href.slice(1))\n\n      useOnChange(isActive, (v) => {\n         const element = anchorRef.current\n         if (!element) return\n\n         if (v && containerRef.current) {\n            scrollIntoView(element, {\n               behavior: \"smooth\",\n               block: \"center\",\n               inline: \"center\",\n               scrollMode: \"always\",\n               boundary: containerRef.current,\n            })\n         }\n\n         onActiveChange?.(v)\n      })\n\n      return (\n         <a ref={mergedRef} data-active={isActive} {...props}>\n            {props.children}\n         </a>\n      )\n   },\n)\n\nTOCItem.displayName = \"TOCItem\"\n\nexport function TocThumb({\n   containerRef,\n   ...props\n}: HTMLAttributes<HTMLDivElement> & {\n   containerRef: RefObject<HTMLElement | null>\n}): ReactNode {\n   const active = useActiveAnchors()\n   const thumbRef = useRef<HTMLDivElement>(null)\n   const activeRef = useRef(active)\n   activeRef.current = active\n\n   function calc(container: HTMLElement, active: string[]): TOCThumb {\n      if (active.length === 0 || container.clientHeight === 0) return [0, 0]\n\n      let upper = Number.MAX_VALUE\n      let lower = 0\n\n      for (const item of active) {\n         const element = container.querySelector<HTMLElement>(\n            `a[href=\"#${item}\"]`,\n         )\n         if (!element) continue\n\n         const styles = getComputedStyle(element)\n         upper = Math.min(\n            upper,\n            element.offsetTop + Number.parseFloat(styles.paddingTop),\n         )\n         lower = Math.max(\n            lower,\n            element.offsetTop +\n               element.clientHeight -\n               Number.parseFloat(styles.paddingBottom),\n         )\n      }\n\n      return [upper, lower - upper]\n   }\n\n   function update(element: HTMLElement, info: TOCThumb): void {\n      element.style.setProperty(\"--nyx-top\", `${info[0]}px`)\n      element.style.setProperty(\"--nyx-height\", `${info[1]}px`)\n   }\n\n   useEffect(() => {\n      if (!containerRef.current) return\n      const container = containerRef.current\n\n      const onResize = (): void => {\n         if (!thumbRef.current) return\n         update(thumbRef.current, calc(container, activeRef.current))\n      }\n\n      onResize()\n      const observer = new ResizeObserver(onResize)\n      observer.observe(container)\n\n      return () => {\n         observer.disconnect()\n      }\n   }, [containerRef])\n\n   useOnChange(active, () => {\n      if (!containerRef.current || !thumbRef.current) return\n\n      update(thumbRef.current, calc(containerRef.current, active))\n   })\n\n   return <div ref={thumbRef} role=\"none\" {...props} />\n}\n\nexport function TocItemsEmpty() {\n   return (\n      <div className=\"bg-card text-muted-foreground rounded-lg border p-3 text-xs\">\n         No headings found\n      </div>\n   )\n}\n\nexport function Toc(props: HTMLAttributes<HTMLDivElement>) {\n   const { toc } = usePageStyles()\n\n   return (\n      <div\n         id=\"nyx-toc\"\n         {...props}\n         className={ny(\n            \"top-nyx-layout-top sticky h-[var(--nyx-toc-height)] pb-2 pt-12\",\n            toc,\n            props.className,\n         )}\n         style={\n            {\n               ...props.style,\n               \"--nyx-toc-height\":\n                  \"calc(100dvh - var(--nyx-banner-height) - var(--nyx-nav-height))\",\n            } as any\n         }\n      >\n         <div className=\"flex h-full w-[var(--nyx-width)] max-w-full flex-col gap-3 pe-4\">\n            {props.children}\n         </div>\n      </div>\n   )\n}\n\n// Main Component\nexport function NyxTOCItems({\n   items,\n   isMenu = false,\n   label,\n}: {\n   items: TOCItemType[]\n   isMenu?: boolean\n   label?: ReactNode\n}) {\n   const viewRef = useRef<HTMLDivElement>(null)\n   const containerRef = useRef<HTMLDivElement>(null)\n\n   const [svg, setSvg] = useState<{\n      path: string\n      width: number\n      height: number\n   }>()\n\n   useEffect(() => {\n      if (!containerRef.current) return\n      const container = containerRef.current\n\n      function onResize(): void {\n         if (container.clientHeight === 0) return\n         let w = 0\n         let h = 0\n         const d: string[] = []\n         for (let i = 0; i < items.length; i++) {\n            const element: HTMLElement | null = container.querySelector(\n               `a[href=\"#${items[i].url.slice(1)}\"]`,\n            )\n            if (!element) continue\n\n            const styles = getComputedStyle(element)\n            const offset = getLineOffset(items[i].depth) + 1\n            const top = element.offsetTop + Number.parseFloat(styles.paddingTop)\n            const bottom =\n               element.offsetTop +\n               element.clientHeight -\n               Number.parseFloat(styles.paddingBottom)\n\n            w = Math.max(offset, w)\n            h = Math.max(h, bottom)\n\n            d.push(`${i === 0 ? \"M\" : \"L\"}${offset} ${top}`)\n            d.push(`L${offset} ${bottom}`)\n         }\n\n         setSvg({\n            path: d.join(\" \"),\n            width: w + 1,\n            height: h,\n         })\n      }\n\n      const observer = new ResizeObserver(onResize)\n      onResize()\n      observer.observe(container)\n      return () => observer.disconnect()\n   }, [items])\n\n   if (items.length === 0) return <TocItemsEmpty />\n\n   return (\n      <>\n         {label && (\n            <h3 className=\"text-muted-foreground -ms-0.5 inline-flex items-center gap-1.5 text-sm\">\n               <AlignLeft className=\"size-4\" />\n               {label}\n            </h3>\n         )}\n         <ScrollArea className={ny(\"flex flex-col\", isMenu && \"-ms-3\")}>\n            <ScrollViewport className=\"relative min-h-0\" ref={viewRef}>\n               {svg ? (\n                  <div\n                     className=\"absolute start-0 top-0 rtl:-scale-x-100\"\n                     style={{\n                        width: svg.width,\n                        height: svg.height,\n                        maskImage: `url(\"data:image/svg+xml,${\n                           // Inline SVG\n                           encodeURIComponent(\n                              `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ${svg.width} ${svg.height}\"><path d=\"${svg.path}\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" /></svg>`,\n                           )\n                        }\")`,\n                     }}\n                  >\n                     <TocThumb\n                        containerRef={containerRef}\n                        className=\"bg-primary mt-[var(--nyx-top)] h-[var(--nyx-height)] transition-all\"\n                     />\n                  </div>\n               ) : null}\n               <ScrollProvider containerRef={viewRef}>\n                  <div className=\"flex flex-col\" ref={containerRef}>\n                     {items.map((item, i) => (\n                        <LocalTOCItem\n                           key={item.url}\n                           item={item}\n                           upper={items[i - 1]?.depth}\n                           lower={items[i + 1]?.depth}\n                        />\n                     ))}\n                  </div>\n               </ScrollProvider>\n            </ScrollViewport>\n         </ScrollArea>\n      </>\n   )\n}\n\n// Popover Components\nexport const TocPopover = Popover\n\nexport function TocPopoverTrigger({\n   items,\n   ...props\n}: PopoverTriggerProps & { items: TOCItemType[] }) {\n   const active = useActiveAnchor()\n   const current = useMemo(() => {\n      return items.find((item) => active === item.url.slice(1))?.title\n   }, [items, active])\n\n   return (\n      <PopoverTrigger\n         {...props}\n         className={ny(\n            \"inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start\",\n            props.className,\n         )}\n      >\n         <AlignLeft className=\"size-4 shrink-0\" />\n         Table of Contents\n         {current && (\n            <>\n               <ChevronRight className=\"text-muted-foreground -mx-1.5 size-4 shrink-0\" />\n               <span className=\"text-muted-foreground truncate\">{current}</span>\n            </>\n         )}\n      </PopoverTrigger>\n   )\n}\n\nexport function TocPopoverContent(props: PopoverContentProps) {\n   return (\n      <PopoverContent\n         hideWhenDetached\n         alignOffset={16}\n         align=\"start\"\n         side=\"bottom\"\n         data-toc-popover=\"\"\n         {...props}\n         className={ny(\n            \"flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3\",\n            props.className,\n         )}\n      >\n         {props.children}\n      </PopoverContent>\n   )\n}\n\nfunction LocalTOCItem({\n   item,\n   upper = item.depth,\n   lower = item.depth,\n}: {\n   item: TOCItemType\n   upper?: number\n   lower?: number\n}) {\n   const offset = getLineOffset(item.depth)\n   const upperOffset = getLineOffset(upper)\n   const lowerOffset = getLineOffset(lower)\n\n   return (\n      <TOCItem\n         href={item.url}\n         style={{\n            paddingInlineStart: getItemOffset(item.depth),\n         }}\n         className=\"prose text-muted-foreground data-[active=true]:text-primary relative py-1.5 text-sm transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0\"\n      >\n         {offset !== upperOffset ? (\n            <svg\n               xmlns=\"http://www.w3.org/2000/svg\"\n               viewBox=\"0 0 16 16\"\n               className=\"absolute -top-1.5 start-0 size-4 rtl:-scale-x-100\"\n            >\n               <line\n                  x1={upperOffset}\n                  y1=\"0\"\n                  x2={offset}\n                  y2=\"12\"\n                  className=\"stroke-foreground/10\"\n                  strokeWidth=\"1\"\n               />\n            </svg>\n         ) : null}\n         <div\n            className={ny(\n               \"bg-foreground/10 absolute inset-y-0 w-px\",\n               offset !== upperOffset && \"top-1.5\",\n               offset !== lowerOffset && \"bottom-1.5\",\n            )}\n            style={{\n               insetInlineStart: offset,\n            }}\n         />\n         {item.title}\n      </TOCItem>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     },
     {
       "path": "hooks/use-anchor-observer.ts",
-      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\n\n/**\n * Find the active heading of page\n *\n * It selects the top heading by default, and the last item when reached the bottom of page.\n *\n * @param watch - An array of element ids to watch\n * @param single - only one active item at most\n * @returns Active anchor\n */\nexport function useAnchorObserver(watch: string[], single: boolean): string[] {\n   const [activeAnchor, setActiveAnchor] = useState<string[]>([])\n\n   useEffect(() => {\n      let visible: string[] = []\n      const observer = new IntersectionObserver(\n         (entries) => {\n            for (const entry of entries) {\n               if (entry.isIntersecting && !visible.includes(entry.target.id)) {\n                  visible = [...visible, entry.target.id]\n               }\n               else if (\n                  !entry.isIntersecting\n                  && visible.includes(entry.target.id)\n               ) {\n                  visible = visible.filter(v => v !== entry.target.id)\n               }\n            }\n\n            if (visible.length > 0)\n               setActiveAnchor(visible)\n         },\n         {\n            rootMargin: single ? '-80px 0% -70% 0%' : `-20px 0% -40% 0%`,\n            threshold: 1,\n         },\n      )\n\n      function onScroll(): void {\n         const element = document.scrollingElement\n         if (!element)\n            return\n\n         if (element.scrollTop === 0 && single) {\n            setActiveAnchor(watch.slice(0, 1))\n         }\n         else if (\n            element.scrollTop + element.clientHeight\n            >= element.scrollHeight - 6\n         ) {\n            setActiveAnchor((active) => {\n               return active.length > 0 && !single\n                  ? watch.slice(watch.indexOf(active[0]))\n                  : watch.slice(-1)\n            })\n         }\n      }\n\n      for (const heading of watch) {\n         const element = document.getElementById(heading)\n\n         if (element)\n            observer.observe(element)\n      }\n\n      onScroll()\n      window.addEventListener('scroll', onScroll)\n      return () => {\n         window.removeEventListener('scroll', onScroll)\n         observer.disconnect()\n      }\n   }, [single, watch])\n\n   return single ? activeAnchor.slice(0, 1) : activeAnchor\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\n/**\n * Find the active heading of page\n *\n * It selects the top heading by default, and the last item when reached the bottom of page.\n *\n * @param watch - An array of element ids to watch\n * @param single - only one active item at most\n * @returns Active anchor\n */\nexport function useAnchorObserver(watch: string[], single: boolean): string[] {\n   const [activeAnchor, setActiveAnchor] = useState<string[]>([])\n\n   useEffect(() => {\n      let visible: string[] = []\n      const observer = new IntersectionObserver(\n         (entries) => {\n            for (const entry of entries) {\n               if (entry.isIntersecting && !visible.includes(entry.target.id)) {\n                  visible = [...visible, entry.target.id]\n               } else if (\n                  !entry.isIntersecting &&\n                  visible.includes(entry.target.id)\n               ) {\n                  visible = visible.filter((v) => v !== entry.target.id)\n               }\n            }\n\n            if (visible.length > 0) setActiveAnchor(visible)\n         },\n         {\n            rootMargin: single ? \"-80px 0% -70% 0%\" : `-20px 0% -40% 0%`,\n            threshold: 1,\n         },\n      )\n\n      function onScroll(): void {\n         const element = document.scrollingElement\n         if (!element) return\n\n         if (element.scrollTop === 0 && single) {\n            setActiveAnchor(watch.slice(0, 1))\n         } else if (\n            element.scrollTop + element.clientHeight >=\n            element.scrollHeight - 6\n         ) {\n            setActiveAnchor((active) => {\n               return active.length > 0 && !single\n                  ? watch.slice(watch.indexOf(active[0]))\n                  : watch.slice(-1)\n            })\n         }\n      }\n\n      for (const heading of watch) {\n         const element = document.getElementById(heading)\n\n         if (element) observer.observe(element)\n      }\n\n      onScroll()\n      window.addEventListener(\"scroll\", onScroll)\n      return () => {\n         window.removeEventListener(\"scroll\", onScroll)\n         observer.disconnect()\n      }\n   }, [single, watch])\n\n   return single ? activeAnchor.slice(0, 1) : activeAnchor\n}\n",
       "type": "registry:hook",
       "target": ""
     },
     {
       "path": "hooks/use-on-change.ts",
-      "content": "'use client'\n\nimport { useState } from 'react'\n\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b)) {\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   }\n\n   return a !== b\n}\n\n/**\n * @param value - state to watch\n * @param onChange - when the state changed\n * @param isUpdated - a function that determines if the state is updated\n */\nexport function useOnChange<T>(\n   value: T,\n   onChange: (current: T, previous: T) => void,\n   isUpdated: (prev: T, current: T) => boolean = isDifferent,\n): void {\n   const [prev, setPrev] = useState<T>(value)\n\n   if (isUpdated(prev, value)) {\n      onChange(value, prev)\n      setPrev(value)\n   }\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b)) {\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   }\n\n   return a !== b\n}\n\n/**\n * @param value - state to watch\n * @param onChange - when the state changed\n * @param isUpdated - a function that determines if the state is updated\n */\nexport function useOnChange<T>(\n   value: T,\n   onChange: (current: T, previous: T) => void,\n   isUpdated: (prev: T, current: T) => boolean = isDifferent,\n): void {\n   const [prev, setPrev] = useState<T>(value)\n\n   if (isUpdated(prev, value)) {\n      onChange(value, prev)\n      setPrev(value)\n   }\n}\n",
       "type": "registry:hook",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/orbiting-circles-demo.json b/apps/web/public/r/styles/miami/orbiting-circles-demo.json
index 392c53a5..38382a88 100644
--- a/apps/web/public/r/styles/miami/orbiting-circles-demo.json
+++ b/apps/web/public/r/styles/miami/orbiting-circles-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "orbiting-circles-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/orbiting-circles-demo.tsx",
-      "content": "import OrbitingCircles from '~/registry/miami/ui/orbiting-circles'\n\nexport default function OrbitingCirclesDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Circles\n         </span>\n\n         {/* Inner Circles */}\n         <OrbitingCircles\n            className=\"size-[30px] border-none bg-transparent\"\n            duration={20}\n            delay={20}\n            radius={80}\n         >\n            <Icons.whatsapp />\n         </OrbitingCircles>\n         <OrbitingCircles\n            className=\"size-[30px] border-none bg-transparent\"\n            duration={20}\n            delay={10}\n            radius={80}\n         >\n            <Icons.notion />\n         </OrbitingCircles>\n\n         {/* Outer Circles (reverse) */}\n         <OrbitingCircles\n            className=\"size-[50px] border-none bg-transparent\"\n            radius={190}\n            duration={20}\n            reverse\n         >\n            <Icons.googleDrive />\n         </OrbitingCircles>\n         <OrbitingCircles\n            className=\"size-[50px] border-none bg-transparent\"\n            radius={190}\n            duration={20}\n            delay={20}\n            reverse\n         >\n            <Icons.gitHub />\n         </OrbitingCircles>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: () => (\n      <svg width=\"100\" height=\"100\" viewBox=\"0 0 438.549 438.549\">\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         />\n      </svg>\n   ),\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n}\n",
-      "type": "registry:component",
+      "path": "examples/orbiting-circles-demo.tsx",
+      "content": "import OrbitingCircles from \"~/registry/miami/ui/orbiting-circles\"\n\nexport default function OrbitingCirclesDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Circles\n         </span>\n\n         {/* Inner Circles */}\n         <OrbitingCircles\n            className=\"size-[30px] border-none bg-transparent\"\n            duration={20}\n            delay={20}\n            radius={80}\n         >\n            <Icons.whatsapp />\n         </OrbitingCircles>\n         <OrbitingCircles\n            className=\"size-[30px] border-none bg-transparent\"\n            duration={20}\n            delay={10}\n            radius={80}\n         >\n            <Icons.notion />\n         </OrbitingCircles>\n\n         {/* Outer Circles (reverse) */}\n         <OrbitingCircles\n            className=\"size-[50px] border-none bg-transparent\"\n            radius={190}\n            duration={20}\n            reverse\n         >\n            <Icons.googleDrive />\n         </OrbitingCircles>\n         <OrbitingCircles\n            className=\"size-[50px] border-none bg-transparent\"\n            radius={190}\n            duration={20}\n            delay={20}\n            reverse\n         >\n            <Icons.gitHub />\n         </OrbitingCircles>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: () => (\n      <svg width=\"100\" height=\"100\" viewBox=\"0 0 438.549 438.549\">\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         />\n      </svg>\n   ),\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/orbiting-circles.json b/apps/web/public/r/styles/miami/orbiting-circles.json
index a1ae4882..1af78066 100644
--- a/apps/web/public/r/styles/miami/orbiting-circles.json
+++ b/apps/web/public/r/styles/miami/orbiting-circles.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "orbiting-circles",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/orbiting-circles.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\nexport default function OrbitingCircles({\n   className,\n   children,\n   reverse,\n   duration = 20,\n   delay = 10,\n   radius = 50,\n   path = true,\n}: {\n   className?: string\n   children?: React.ReactNode\n   reverse?: boolean\n   duration?: number\n   delay?: number\n   radius?: number\n   path?: boolean\n}) {\n   return (\n      <>\n         {path && (\n            <svg\n               xmlns=\"http://www.w3.org/2000/svg\"\n               version=\"1.1\"\n               className=\"pointer-events-none absolute inset-0 size-full\"\n            >\n               <circle\n                  className=\"stroke-black/10 stroke-1 dark:stroke-white/10\"\n                  cx=\"50%\"\n                  cy=\"50%\"\n                  r={radius}\n                  fill=\"none\"\n                  strokeDasharray=\"4 4\"\n               />\n            </svg>\n         )}\n\n         <div\n            style={\n               {\n                  '--duration': duration,\n                  '--radius': radius,\n                  '--delay': -delay,\n               } as React.CSSProperties\n            }\n            className={ny(\n               'animate-orbit absolute flex size-full transform-gpu items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10',\n               { '[animation-direction:reverse]': reverse },\n               className,\n            )}\n         >\n            {children}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/lib/utils\"\n\nexport default function OrbitingCircles({\n   className,\n   children,\n   reverse,\n   duration = 20,\n   delay = 10,\n   radius = 50,\n   path = true,\n}: {\n   className?: string\n   children?: React.ReactNode\n   reverse?: boolean\n   duration?: number\n   delay?: number\n   radius?: number\n   path?: boolean\n}) {\n   return (\n      <>\n         {path && (\n            <svg\n               xmlns=\"http://www.w3.org/2000/svg\"\n               version=\"1.1\"\n               className=\"pointer-events-none absolute inset-0 size-full\"\n            >\n               <circle\n                  className=\"stroke-black/10 stroke-1 dark:stroke-white/10\"\n                  cx=\"50%\"\n                  cy=\"50%\"\n                  r={radius}\n                  fill=\"none\"\n                  strokeDasharray=\"4 4\"\n               />\n            </svg>\n         )}\n\n         <div\n            style={\n               {\n                  \"--duration\": duration,\n                  \"--radius\": radius,\n                  \"--delay\": -delay,\n               } as React.CSSProperties\n            }\n            className={ny(\n               \"animate-orbit absolute flex size-full transform-gpu items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10\",\n               { \"[animation-direction:reverse]\": reverse },\n               className,\n            )}\n         >\n            {children}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/pagination-demo.json b/apps/web/public/r/styles/miami/pagination-demo.json
index 8e673fc0..93ad0f16 100644
--- a/apps/web/public/r/styles/miami/pagination-demo.json
+++ b/apps/web/public/r/styles/miami/pagination-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "pagination-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "pagination"
   ],
   "files": [
     {
-      "path": "example/pagination-demo.tsx",
-      "content": "import {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n} from '~/registry/miami/ui/pagination'\n\nexport default function PaginationDemo() {\n   return (\n      <Pagination>\n         <PaginationContent>\n            <PaginationItem>\n               <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\" isActive>\n                  2\n               </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationNext href=\"#\" />\n            </PaginationItem>\n         </PaginationContent>\n      </Pagination>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/pagination-demo.tsx",
+      "content": "import {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n} from \"~/registry/miami/ui/pagination\"\n\nexport default function PaginationDemo() {\n   return (\n      <Pagination>\n         <PaginationContent>\n            <PaginationItem>\n               <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\" isActive>\n                  2\n               </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationNext href=\"#\" />\n            </PaginationItem>\n         </PaginationContent>\n      </Pagination>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/pagination.json b/apps/web/public/r/styles/miami/pagination.json
index 6ef4faa4..bff43459 100644
--- a/apps/web/public/r/styles/miami/pagination.json
+++ b/apps/web/public/r/styles/miami/pagination.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "pagination",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
       "path": "ui/pagination.tsx",
-      "content": "import * as React from 'react'\nimport {\n   ChevronLeftIcon,\n   ChevronRightIcon,\n   DotsHorizontalIcon,\n} from '@radix-ui/react-icons'\n\nimport { ny } from '~/lib/utils'\nimport type { ButtonProps } from '~/registry/miami/ui/button'\nimport { buttonVariants } from '~/registry/miami/ui/button'\n\nfunction Pagination({ className, ...props }: React.ComponentProps<'nav'>) {\n   return (\n      <nav\n         role=\"navigation\"\n         aria-label=\"pagination\"\n         className={ny('mx-auto flex w-full justify-center', className)}\n         {...props}\n      />\n   )\n}\nPagination.displayName = 'Pagination'\n\nconst PaginationContent = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<'ul'>\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      className={ny('flex flex-row items-center gap-1', className)}\n      {...props}\n   />\n))\nPaginationContent.displayName = 'PaginationContent'\n\nconst PaginationItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<'li'>\n>(({ className, ...props }, ref) => (\n   <li ref={ref} className={ny('', className)} {...props} />\n))\nPaginationItem.displayName = 'PaginationItem'\n\ntype PaginationLinkProps = {\n   isActive?: boolean\n} & Pick<ButtonProps, 'size'> &\nReact.ComponentProps<'a'>\n\nfunction PaginationLink({\n   className,\n   isActive,\n   size = 'icon',\n   ...props\n}: PaginationLinkProps) {\n   return (\n      <a\n         aria-current={isActive ? 'page' : undefined}\n         className={ny(\n            buttonVariants({\n               variant: isActive ? 'outline' : 'ghost',\n               size,\n            }),\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nPaginationLink.displayName = 'PaginationLink'\n\nfunction PaginationPrevious({\n   className,\n   ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n   return (\n      <PaginationLink\n         aria-label=\"Go to previous page\"\n         size=\"default\"\n         className={ny('gap-1 pl-2.5', className)}\n         {...props}\n      >\n         <ChevronLeftIcon className=\"size-4\" />\n         <span>Previous</span>\n      </PaginationLink>\n   )\n}\nPaginationPrevious.displayName = 'PaginationPrevious'\n\nfunction PaginationNext({\n   className,\n   ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n   return (\n      <PaginationLink\n         aria-label=\"Go to next page\"\n         size=\"default\"\n         className={ny('gap-1 pr-2.5', className)}\n         {...props}\n      >\n         <span>Next</span>\n         <ChevronRightIcon className=\"size-4\" />\n      </PaginationLink>\n   )\n}\nPaginationNext.displayName = 'PaginationNext'\n\nfunction PaginationEllipsis({\n   className,\n   ...props\n}: React.ComponentProps<'span'>) {\n   return (\n      <span\n         aria-hidden\n         className={ny('flex size-9 items-center justify-center', className)}\n         {...props}\n      >\n         <DotsHorizontalIcon className=\"size-4\" />\n         <span className=\"sr-only\">More pages</span>\n      </span>\n   )\n}\nPaginationEllipsis.displayName = 'PaginationEllipsis'\n\nexport {\n   Pagination,\n   PaginationContent,\n   PaginationLink,\n   PaginationItem,\n   PaginationPrevious,\n   PaginationNext,\n   PaginationEllipsis,\n}\n",
-      "type": "registry:component",
+      "content": "import {\n   ChevronLeftIcon,\n   ChevronRightIcon,\n   DotsHorizontalIcon,\n} from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport type { ButtonProps } from \"~/registry/miami/ui/button\"\nimport { buttonVariants } from \"~/registry/miami/ui/button\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n   return (\n      <nav\n         role=\"navigation\"\n         aria-label=\"pagination\"\n         className={ny(\"mx-auto flex w-full justify-center\", className)}\n         {...props}\n      />\n   )\n}\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      className={ny(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n   />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n   <li ref={ref} className={ny(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n   isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n   React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n   className,\n   isActive,\n   size = \"icon\",\n   ...props\n}: PaginationLinkProps) {\n   return (\n      <a\n         aria-current={isActive ? \"page\" : undefined}\n         className={ny(\n            buttonVariants({\n               variant: isActive ? \"outline\" : \"ghost\",\n               size,\n            }),\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nPaginationLink.displayName = \"PaginationLink\"\n\nfunction PaginationPrevious({\n   className,\n   ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n   return (\n      <PaginationLink\n         aria-label=\"Go to previous page\"\n         size=\"default\"\n         className={ny(\"gap-1 pl-2.5\", className)}\n         {...props}\n      >\n         <ChevronLeftIcon className=\"size-4\" />\n         <span>Previous</span>\n      </PaginationLink>\n   )\n}\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nfunction PaginationNext({\n   className,\n   ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n   return (\n      <PaginationLink\n         aria-label=\"Go to next page\"\n         size=\"default\"\n         className={ny(\"gap-1 pr-2.5\", className)}\n         {...props}\n      >\n         <span>Next</span>\n         <ChevronRightIcon className=\"size-4\" />\n      </PaginationLink>\n   )\n}\nPaginationNext.displayName = \"PaginationNext\"\n\nfunction PaginationEllipsis({\n   className,\n   ...props\n}: React.ComponentProps<\"span\">) {\n   return (\n      <span\n         aria-hidden\n         className={ny(\"flex size-9 items-center justify-center\", className)}\n         {...props}\n      >\n         <DotsHorizontalIcon className=\"size-4\" />\n         <span className=\"sr-only\">More pages</span>\n      </span>\n   )\n}\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n   Pagination,\n   PaginationContent,\n   PaginationLink,\n   PaginationItem,\n   PaginationPrevious,\n   PaginationNext,\n   PaginationEllipsis,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/particles-demo.json b/apps/web/public/r/styles/miami/particles-demo.json
index 4c8fc315..f22fdc0b 100644
--- a/apps/web/public/r/styles/miami/particles-demo.json
+++ b/apps/web/public/r/styles/miami/particles-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "particles-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/particles-demo.tsx",
-      "content": "'use client'\n\nimport { useTheme } from 'next-themes'\nimport { useEffect, useState } from 'react'\nimport Particles from '~/registry/miami/ui/particles'\n\nfunction ParticlesDemo() {\n   const { theme } = useTheme()\n   const [color, setColor] = useState('#ffffff')\n\n   useEffect(() => {\n      setColor(theme === 'dark' ? '#ffffff' : '#000000')\n   }, [theme])\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Particles\n         </span>\n         <Particles\n            className=\"absolute inset-0\"\n            quantity={100}\n            ease={80}\n            color={color}\n            refresh\n         />\n      </div>\n   )\n}\n\nexport default ParticlesDemo\n",
-      "type": "registry:component",
+      "path": "examples/particles-demo.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { useEffect, useState } from \"react\"\nimport Particles from \"~/registry/miami/ui/particles\"\n\nfunction ParticlesDemo() {\n   const { theme } = useTheme()\n   const [color, setColor] = useState(\"#ffffff\")\n\n   useEffect(() => {\n      setColor(theme === \"dark\" ? \"#ffffff\" : \"#000000\")\n   }, [theme])\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Particles\n         </span>\n         <Particles\n            className=\"absolute inset-0\"\n            quantity={100}\n            ease={80}\n            color={color}\n            refresh\n         />\n      </div>\n   )\n}\n\nexport default ParticlesDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/particles.json b/apps/web/public/r/styles/miami/particles.json
index 45ab9936..2ed20029 100644
--- a/apps/web/public/r/styles/miami/particles.json
+++ b/apps/web/public/r/styles/miami/particles.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "particles",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/particles.tsx",
-      "content": "'use client'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\ninterface MousePosition {\n   x: number\n   y: number\n}\n\nfunction MousePosition(): MousePosition {\n   const [mousePosition, setMousePosition] = useState<MousePosition>({\n      x: 0,\n      y: 0,\n   })\n\n   useEffect(() => {\n      const handleMouseMove = (event: MouseEvent) => {\n         setMousePosition({ x: event.clientX, y: event.clientY })\n      }\n\n      window.addEventListener('mousemove', handleMouseMove)\n\n      return () => {\n         window.removeEventListener('mousemove', handleMouseMove)\n      }\n   }, [])\n\n   return mousePosition\n}\n\ninterface ParticlesProps {\n   className?: string\n   quantity?: number\n   staticity?: number\n   ease?: number\n   size?: number\n   refresh?: boolean\n   color?: string\n   vx?: number\n   vy?: number\n}\nfunction hexToRgb(hex: string): number[] {\n   hex = hex.replace('#', '')\n\n   // Unterstützung für dreistellige Hex-Farbcodes\n   if (hex.length === 3) {\n      hex = hex\n         .split('')\n         .map(char => char + char)\n         .join('')\n   }\n\n   const hexInt = Number.parseInt(hex, 16)\n   const red = (hexInt >> 16) & 255\n   const green = (hexInt >> 8) & 255\n   const blue = hexInt & 255\n   return [red, green, blue]\n}\n\nconst Particles: React.FC<ParticlesProps> = ({\n   className = '',\n   quantity = 100,\n   staticity = 50,\n   ease = 50,\n   size = 0.4,\n   refresh = false,\n   color = '#ffffff',\n   vx = 0,\n   vy = 0,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const canvasContainerRef = useRef<HTMLDivElement>(null)\n   const context = useRef<CanvasRenderingContext2D | null>(null)\n   const circles = useRef<any[]>([])\n   const mousePosition = MousePosition()\n   const mouse = useRef<{ x: number, y: number }>({ x: 0, y: 0 })\n   const canvasSize = useRef<{ w: number, h: number }>({ w: 0, h: 0 })\n   const dpr = typeof window !== 'undefined' ? window.devicePixelRatio : 1\n\n   useEffect(() => {\n      if (canvasRef.current)\n         context.current = canvasRef.current.getContext('2d')\n\n      initCanvas()\n      animate()\n      window.addEventListener('resize', initCanvas)\n\n      return () => {\n         window.removeEventListener('resize', initCanvas)\n      }\n   }, [color])\n\n   useEffect(() => {\n      onMouseMove()\n   }, [mousePosition.x, mousePosition.y])\n\n   useEffect(() => {\n      initCanvas()\n   }, [refresh])\n\n   const initCanvas = () => {\n      resizeCanvas()\n      drawParticles()\n   }\n\n   const onMouseMove = () => {\n      if (canvasRef.current) {\n         const rect = canvasRef.current.getBoundingClientRect()\n         const { w, h } = canvasSize.current\n         const x = mousePosition.x - rect.left - w / 2\n         const y = mousePosition.y - rect.top - h / 2\n         const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2\n         if (inside) {\n            mouse.current.x = x\n            mouse.current.y = y\n         }\n      }\n   }\n\n   interface Circle {\n      x: number\n      y: number\n      translateX: number\n      translateY: number\n      size: number\n      alpha: number\n      targetAlpha: number\n      dx: number\n      dy: number\n      magnetism: number\n   }\n\n   const resizeCanvas = () => {\n      if (canvasContainerRef.current && canvasRef.current && context.current) {\n         circles.current.length = 0\n         canvasSize.current.w = canvasContainerRef.current.offsetWidth\n         canvasSize.current.h = canvasContainerRef.current.offsetHeight\n         canvasRef.current.width = canvasSize.current.w * dpr\n         canvasRef.current.height = canvasSize.current.h * dpr\n         canvasRef.current.style.width = `${canvasSize.current.w}px`\n         canvasRef.current.style.height = `${canvasSize.current.h}px`\n         context.current.scale(dpr, dpr)\n      }\n   }\n\n   const circleParams = (): Circle => {\n      const x = Math.floor(Math.random() * canvasSize.current.w)\n      const y = Math.floor(Math.random() * canvasSize.current.h)\n      const translateX = 0\n      const translateY = 0\n      const pSize = Math.floor(Math.random() * 2) + size\n      const alpha = 0\n      const targetAlpha = Number.parseFloat(\n         (Math.random() * 0.6 + 0.1).toFixed(1),\n      )\n      const dx = (Math.random() - 0.5) * 0.1\n      const dy = (Math.random() - 0.5) * 0.1\n      const magnetism = 0.1 + Math.random() * 4\n      return {\n         x,\n         y,\n         translateX,\n         translateY,\n         size: pSize,\n         alpha,\n         targetAlpha,\n         dx,\n         dy,\n         magnetism,\n      }\n   }\n\n   const rgb = hexToRgb(color)\n\n   const drawCircle = (circle: Circle, update = false) => {\n      if (context.current) {\n         const { x, y, translateX, translateY, size, alpha } = circle\n         context.current.translate(translateX, translateY)\n         context.current.beginPath()\n         context.current.arc(x, y, size, 0, 2 * Math.PI)\n         context.current.fillStyle = `rgba(${rgb.join(', ')}, ${alpha})`\n         context.current.fill()\n         context.current.setTransform(dpr, 0, 0, dpr, 0, 0)\n\n         if (!update)\n            circles.current.push(circle)\n      }\n   }\n\n   const clearContext = () => {\n      if (context.current) {\n         context.current.clearRect(\n            0,\n            0,\n            canvasSize.current.w,\n            canvasSize.current.h,\n         )\n      }\n   }\n\n   const drawParticles = () => {\n      clearContext()\n      const particleCount = quantity\n      for (let i = 0; i < particleCount; i++) {\n         const circle = circleParams()\n         drawCircle(circle)\n      }\n   }\n\n   const remapValue = (\n      value: number,\n      start1: number,\n      end1: number,\n      start2: number,\n      end2: number,\n   ): number => {\n      const remapped\n      = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2\n      return remapped > 0 ? remapped : 0\n   }\n\n   const animate = () => {\n      clearContext()\n      circles.current.forEach((circle: Circle, i: number) => {\n      // Handle the alpha value\n         const edge = [\n            circle.x + circle.translateX - circle.size, // distance from left edge\n            canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge\n            circle.y + circle.translateY - circle.size, // distance from top edge\n            canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge\n         ]\n         const closestEdge = edge.reduce((a, b) => Math.min(a, b))\n         const remapClosestEdge = Number.parseFloat(\n            remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),\n         )\n         if (remapClosestEdge > 1) {\n            circle.alpha += 0.02\n            if (circle.alpha > circle.targetAlpha)\n               circle.alpha = circle.targetAlpha\n         }\n         else {\n            circle.alpha = circle.targetAlpha * remapClosestEdge\n         }\n         circle.x += circle.dx + vx\n         circle.y += circle.dy + vy\n         circle.translateX\n        += (mouse.current.x / (staticity / circle.magnetism) - circle.translateX)\n        / ease\n         circle.translateY\n        += (mouse.current.y / (staticity / circle.magnetism) - circle.translateY)\n        / ease\n\n         drawCircle(circle, true)\n\n         // circle gets out of the canvas\n         if (\n            circle.x < -circle.size\n            || circle.x > canvasSize.current.w + circle.size\n            || circle.y < -circle.size\n            || circle.y > canvasSize.current.h + circle.size\n         ) {\n            // remove the circle from the array\n            circles.current.splice(i, 1)\n            // create a new circle\n            const newCircle = circleParams()\n            drawCircle(newCircle)\n            // update the circle position\n         }\n      })\n      window.requestAnimationFrame(animate)\n   }\n\n   return (\n      <div className={className} ref={canvasContainerRef} aria-hidden=\"true\">\n         <canvas ref={canvasRef} className=\"size-full\" />\n      </div>\n   )\n}\n\nexport default Particles\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\n\ninterface MousePosition {\n   x: number\n   y: number\n}\n\nfunction MousePosition(): MousePosition {\n   const [mousePosition, setMousePosition] = useState<MousePosition>({\n      x: 0,\n      y: 0,\n   })\n\n   useEffect(() => {\n      const handleMouseMove = (event: MouseEvent) => {\n         setMousePosition({ x: event.clientX, y: event.clientY })\n      }\n\n      window.addEventListener(\"mousemove\", handleMouseMove)\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMouseMove)\n      }\n   }, [])\n\n   return mousePosition\n}\n\ninterface ParticlesProps {\n   className?: string\n   quantity?: number\n   staticity?: number\n   ease?: number\n   size?: number\n   refresh?: boolean\n   color?: string\n   vx?: number\n   vy?: number\n}\nfunction hexToRgb(hex: string): number[] {\n   hex = hex.replace(\"#\", \"\")\n\n   // Unterstützung für dreistellige Hex-Farbcodes\n   if (hex.length === 3) {\n      hex = hex\n         .split(\"\")\n         .map((char) => char + char)\n         .join(\"\")\n   }\n\n   const hexInt = Number.parseInt(hex, 16)\n   const red = (hexInt >> 16) & 255\n   const green = (hexInt >> 8) & 255\n   const blue = hexInt & 255\n   return [red, green, blue]\n}\n\nconst Particles: React.FC<ParticlesProps> = ({\n   className = \"\",\n   quantity = 100,\n   staticity = 50,\n   ease = 50,\n   size = 0.4,\n   refresh = false,\n   color = \"#ffffff\",\n   vx = 0,\n   vy = 0,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const canvasContainerRef = useRef<HTMLDivElement>(null)\n   const context = useRef<CanvasRenderingContext2D | null>(null)\n   const circles = useRef<any[]>([])\n   const mousePosition = MousePosition()\n   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })\n   const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })\n   const dpr = typeof window !== \"undefined\" ? window.devicePixelRatio : 1\n\n   useEffect(() => {\n      if (canvasRef.current)\n         context.current = canvasRef.current.getContext(\"2d\")\n\n      initCanvas()\n      animate()\n      window.addEventListener(\"resize\", initCanvas)\n\n      return () => {\n         window.removeEventListener(\"resize\", initCanvas)\n      }\n   }, [color])\n\n   useEffect(() => {\n      onMouseMove()\n   }, [mousePosition.x, mousePosition.y])\n\n   useEffect(() => {\n      initCanvas()\n   }, [refresh])\n\n   const initCanvas = () => {\n      resizeCanvas()\n      drawParticles()\n   }\n\n   const onMouseMove = () => {\n      if (canvasRef.current) {\n         const rect = canvasRef.current.getBoundingClientRect()\n         const { w, h } = canvasSize.current\n         const x = mousePosition.x - rect.left - w / 2\n         const y = mousePosition.y - rect.top - h / 2\n         const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2\n         if (inside) {\n            mouse.current.x = x\n            mouse.current.y = y\n         }\n      }\n   }\n\n   interface Circle {\n      x: number\n      y: number\n      translateX: number\n      translateY: number\n      size: number\n      alpha: number\n      targetAlpha: number\n      dx: number\n      dy: number\n      magnetism: number\n   }\n\n   const resizeCanvas = () => {\n      if (canvasContainerRef.current && canvasRef.current && context.current) {\n         circles.current.length = 0\n         canvasSize.current.w = canvasContainerRef.current.offsetWidth\n         canvasSize.current.h = canvasContainerRef.current.offsetHeight\n         canvasRef.current.width = canvasSize.current.w * dpr\n         canvasRef.current.height = canvasSize.current.h * dpr\n         canvasRef.current.style.width = `${canvasSize.current.w}px`\n         canvasRef.current.style.height = `${canvasSize.current.h}px`\n         context.current.scale(dpr, dpr)\n      }\n   }\n\n   const circleParams = (): Circle => {\n      const x = Math.floor(Math.random() * canvasSize.current.w)\n      const y = Math.floor(Math.random() * canvasSize.current.h)\n      const translateX = 0\n      const translateY = 0\n      const pSize = Math.floor(Math.random() * 2) + size\n      const alpha = 0\n      const targetAlpha = Number.parseFloat(\n         (Math.random() * 0.6 + 0.1).toFixed(1),\n      )\n      const dx = (Math.random() - 0.5) * 0.1\n      const dy = (Math.random() - 0.5) * 0.1\n      const magnetism = 0.1 + Math.random() * 4\n      return {\n         x,\n         y,\n         translateX,\n         translateY,\n         size: pSize,\n         alpha,\n         targetAlpha,\n         dx,\n         dy,\n         magnetism,\n      }\n   }\n\n   const rgb = hexToRgb(color)\n\n   const drawCircle = (circle: Circle, update = false) => {\n      if (context.current) {\n         const { x, y, translateX, translateY, size, alpha } = circle\n         context.current.translate(translateX, translateY)\n         context.current.beginPath()\n         context.current.arc(x, y, size, 0, 2 * Math.PI)\n         context.current.fillStyle = `rgba(${rgb.join(\", \")}, ${alpha})`\n         context.current.fill()\n         context.current.setTransform(dpr, 0, 0, dpr, 0, 0)\n\n         if (!update) circles.current.push(circle)\n      }\n   }\n\n   const clearContext = () => {\n      if (context.current) {\n         context.current.clearRect(\n            0,\n            0,\n            canvasSize.current.w,\n            canvasSize.current.h,\n         )\n      }\n   }\n\n   const drawParticles = () => {\n      clearContext()\n      const particleCount = quantity\n      for (let i = 0; i < particleCount; i++) {\n         const circle = circleParams()\n         drawCircle(circle)\n      }\n   }\n\n   const remapValue = (\n      value: number,\n      start1: number,\n      end1: number,\n      start2: number,\n      end2: number,\n   ): number => {\n      const remapped =\n         ((value - start1) * (end2 - start2)) / (end1 - start1) + start2\n      return remapped > 0 ? remapped : 0\n   }\n\n   const animate = () => {\n      clearContext()\n      circles.current.forEach((circle: Circle, i: number) => {\n         // Handle the alpha value\n         const edge = [\n            circle.x + circle.translateX - circle.size, // distance from left edge\n            canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge\n            circle.y + circle.translateY - circle.size, // distance from top edge\n            canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge\n         ]\n         const closestEdge = edge.reduce((a, b) => Math.min(a, b))\n         const remapClosestEdge = Number.parseFloat(\n            remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),\n         )\n         if (remapClosestEdge > 1) {\n            circle.alpha += 0.02\n            if (circle.alpha > circle.targetAlpha)\n               circle.alpha = circle.targetAlpha\n         } else {\n            circle.alpha = circle.targetAlpha * remapClosestEdge\n         }\n         circle.x += circle.dx + vx\n         circle.y += circle.dy + vy\n         circle.translateX +=\n            (mouse.current.x / (staticity / circle.magnetism) -\n               circle.translateX) /\n            ease\n         circle.translateY +=\n            (mouse.current.y / (staticity / circle.magnetism) -\n               circle.translateY) /\n            ease\n\n         drawCircle(circle, true)\n\n         // circle gets out of the canvas\n         if (\n            circle.x < -circle.size ||\n            circle.x > canvasSize.current.w + circle.size ||\n            circle.y < -circle.size ||\n            circle.y > canvasSize.current.h + circle.size\n         ) {\n            // remove the circle from the array\n            circles.current.splice(i, 1)\n            // create a new circle\n            const newCircle = circleParams()\n            drawCircle(newCircle)\n            // update the circle position\n         }\n      })\n      window.requestAnimationFrame(animate)\n   }\n\n   return (\n      <div className={className} ref={canvasContainerRef} aria-hidden=\"true\">\n         <canvas ref={canvasRef} className=\"size-full\" />\n      </div>\n   )\n}\n\nexport default Particles\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/popover-demo.json b/apps/web/public/r/styles/miami/popover-demo.json
index 5cffb4d1..ed9e3cb4 100644
--- a/apps/web/public/r/styles/miami/popover-demo.json
+++ b/apps/web/public/r/styles/miami/popover-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "popover-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "popover"
   ],
   "files": [
     {
-      "path": "example/popover-demo.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport { Input } from '~/registry/miami/ui/input'\nimport { Label } from '~/registry/miami/ui/label'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\n\nexport default function PopoverDemo() {\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button variant=\"outline\">Open popover</Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-80\">\n            <div className=\"grid gap-4\">\n               <div className=\"space-y-2\">\n                  <h4 className=\"font-medium leading-none\">Dimensions</h4>\n                  <p className=\"text-muted-foreground text-sm\">\n                     Set the dimensions for the layer.\n                  </p>\n               </div>\n               <div className=\"grid gap-2\">\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"width\">Width</Label>\n                     <Input\n                        id=\"width\"\n                        defaultValue=\"100%\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxWidth\">Max. width</Label>\n                     <Input\n                        id=\"maxWidth\"\n                        defaultValue=\"300px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"height\">Height</Label>\n                     <Input\n                        id=\"height\"\n                        defaultValue=\"25px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxHeight\">Max. height</Label>\n                     <Input\n                        id=\"maxHeight\"\n                        defaultValue=\"none\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n               </div>\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/popover-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\nexport default function PopoverDemo() {\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button variant=\"outline\">Open popover</Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-80\">\n            <div className=\"grid gap-4\">\n               <div className=\"space-y-2\">\n                  <h4 className=\"font-medium leading-none\">Dimensions</h4>\n                  <p className=\"text-muted-foreground text-sm\">\n                     Set the dimensions for the layer.\n                  </p>\n               </div>\n               <div className=\"grid gap-2\">\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"width\">Width</Label>\n                     <Input\n                        id=\"width\"\n                        defaultValue=\"100%\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxWidth\">Max. width</Label>\n                     <Input\n                        id=\"maxWidth\"\n                        defaultValue=\"300px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"height\">Height</Label>\n                     <Input\n                        id=\"height\"\n                        defaultValue=\"25px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxHeight\">Max. height</Label>\n                     <Input\n                        id=\"maxHeight\"\n                        defaultValue=\"none\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n               </div>\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/popover.json b/apps/web/public/r/styles/miami/popover.json
index fa7478a2..9878f5e5 100644
--- a/apps/web/public/r/styles/miami/popover.json
+++ b/apps/web/public/r/styles/miami/popover.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "popover",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-popover"
   ],
   "files": [
     {
       "path": "ui/popover.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\n\nimport { ny } from '~/lib/utils'\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor // Neues Element hinzugefügt\n\nconst PopoverContent = React.forwardRef<\n   React.ElementRef<typeof PopoverPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (\n   <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n         ref={ref}\n         align={align}\n         sideOffset={sideOffset}\n         className={ny(\n            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',\n            className,\n         )}\n         {...props}\n      />\n   </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } // Geänderter Export\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor // Neues Element hinzugefügt\n\nconst PopoverContent = React.forwardRef<\n   React.ElementRef<typeof PopoverPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n   <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n         ref={ref}\n         align={align}\n         sideOffset={sideOffset}\n         className={ny(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none\",\n            className,\n         )}\n         {...props}\n      />\n   </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } // Geänderter Export\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/progress-demo.json b/apps/web/public/r/styles/miami/progress-demo.json
index ef6e6420..ffc7eaea 100644
--- a/apps/web/public/r/styles/miami/progress-demo.json
+++ b/apps/web/public/r/styles/miami/progress-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "progress-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "progress"
   ],
   "files": [
     {
-      "path": "example/progress-demo.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Progress } from '~/registry/miami/ui/progress'\n\nexport default function ProgressDemo() {\n   const [progress, setProgress] = React.useState(13)\n\n   React.useEffect(() => {\n      const timer = setTimeout(() => setProgress(66), 500)\n      return () => clearTimeout(timer)\n   }, [])\n\n   return <Progress value={progress} className=\"w-3/5\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"~/registry/miami/ui/progress\"\n\nexport default function ProgressDemo() {\n   const [progress, setProgress] = React.useState(13)\n\n   React.useEffect(() => {\n      const timer = setTimeout(() => setProgress(66), 500)\n      return () => clearTimeout(timer)\n   }, [])\n\n   return <Progress value={progress} className=\"w-3/5\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/progress.json b/apps/web/public/r/styles/miami/progress.json
index c9219440..e5755679 100644
--- a/apps/web/public/r/styles/miami/progress.json
+++ b/apps/web/public/r/styles/miami/progress.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "progress",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-progress"
   ],
   "files": [
     {
       "path": "ui/progress.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as ProgressPrimitive from '@radix-ui/react-progress'\n\nimport { ny } from '~/lib/utils'\n\nconst Progress = React.forwardRef<\n   React.ElementRef<typeof ProgressPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <ProgressPrimitive.Root\n      ref={ref}\n      className={ny(\n         'bg-secondary relative h-4 w-full overflow-hidden rounded-full',\n         className,\n      )}\n      {...props}\n   >\n      <ProgressPrimitive.Indicator\n         className=\"bg-primary size-full flex-1 transition-all\"\n         style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}\n      />\n   </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Progress = React.forwardRef<\n   React.ElementRef<typeof ProgressPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <ProgressPrimitive.Root\n      ref={ref}\n      className={ny(\n         \"bg-secondary relative h-4 w-full overflow-hidden rounded-full\",\n         className,\n      )}\n      {...props}\n   >\n      <ProgressPrimitive.Indicator\n         className=\"bg-primary size-full flex-1 transition-all\"\n         style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}\n      />\n   </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/pulsating-button-demo.json b/apps/web/public/r/styles/miami/pulsating-button-demo.json
index 6d773ebf..b5e75987 100644
--- a/apps/web/public/r/styles/miami/pulsating-button-demo.json
+++ b/apps/web/public/r/styles/miami/pulsating-button-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "pulsating-button-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/pulsating-button-demo.tsx",
-      "content": "import { PulsatingButton } from '~/registry/default/ui/pulsating-button'\n\nfunction PulsatingButtonDemo() {\n   return (\n      <PulsatingButton\n         text=\"Join Affiliate Program\"\n         pulseColor=\"150, 0, 255\"\n         backgroundColor=\"#9945FF\"\n         textColor=\"#ffffff\"\n         animationDuration=\"1.5s\"\n         buttonWidth=\"200px\"\n         buttonHeight=\"50px\"\n      />\n   )\n}\n\nexport default PulsatingButtonDemo\n",
-      "type": "registry:component",
+      "path": "examples/pulsating-button-demo.tsx",
+      "content": "import { PulsatingButton } from \"~/registry/default/ui/pulsating-button\"\n\nfunction PulsatingButtonDemo() {\n   return (\n      <PulsatingButton\n         text=\"Join Affiliate Program\"\n         pulseColor=\"150, 0, 255\"\n         backgroundColor=\"#9945FF\"\n         textColor=\"#ffffff\"\n         animationDuration=\"1.5s\"\n         buttonWidth=\"200px\"\n         buttonHeight=\"50px\"\n      />\n   )\n}\n\nexport default PulsatingButtonDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/pulsating-button.json b/apps/web/public/r/styles/miami/pulsating-button.json
index e8c12edb..d11fa334 100644
--- a/apps/web/public/r/styles/miami/pulsating-button.json
+++ b/apps/web/public/r/styles/miami/pulsating-button.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "pulsating-button",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/pulsating-button.tsx",
-      "content": "'use client'\n\nimport React from 'react'\n\ninterface PulsatingButtonProps {\n   text: string\n   pulseColor: string\n   backgroundColor: string\n   textColor: string\n   animationDuration: string\n   buttonWidth: string\n   buttonHeight: string\n}\n\nexport const PulsatingButton: React.FC<PulsatingButtonProps> = ({\n   text,\n   pulseColor,\n   backgroundColor,\n   textColor,\n   animationDuration,\n   buttonWidth,\n   buttonHeight,\n}) => {\n   const pulseKeyframes = {\n      '--tw-pulse-color': pulseColor,\n      'animation': `pulse ${animationDuration} linear infinite`,\n   }\n\n   return (\n      <div\n         className=\"flex items-center justify-center\"\n      >\n         <button\n            className=\"relative block flex cursor-pointer items-center justify-center text-center\"\n            style={{\n               color: textColor,\n               backgroundColor,\n               width: buttonWidth,\n               height: buttonHeight,\n               borderRadius: '12px',\n               ...pulseKeyframes,\n            }}\n         >\n            <div>{text}</div>\n            <style jsx>\n               {`\n          @keyframes pulse {\n            0% {\n              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);\n            }\n            50% {\n              box-shadow: 0 0 0 8px rgba(var(--tw-pulse-color), 0.5);\n            }\n            100% {\n              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);\n            }\n          }\n          button::before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            height: 100%;\n            border-radius: 20px;\n            background: inherit;\n            animation: inherit;\n            transform: translate(-50%, -50%);\n            z-index: -1;\n          }\n        `}\n            </style>\n         </button>\n      </div>\n   )\n}\n\nexport default PulsatingButton\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type React from \"react\"\n\ninterface PulsatingButtonProps {\n   text: string\n   pulseColor: string\n   backgroundColor: string\n   textColor: string\n   animationDuration: string\n   buttonWidth: string\n   buttonHeight: string\n}\n\nexport const PulsatingButton: React.FC<PulsatingButtonProps> = ({\n   text,\n   pulseColor,\n   backgroundColor,\n   textColor,\n   animationDuration,\n   buttonWidth,\n   buttonHeight,\n}) => {\n   const pulseKeyframes = {\n      \"--tw-pulse-color\": pulseColor,\n      animation: `pulse ${animationDuration} linear infinite`,\n   }\n\n   return (\n      <div className=\"flex items-center justify-center\">\n         <button\n            className=\"relative block flex cursor-pointer items-center justify-center text-center\"\n            style={{\n               color: textColor,\n               backgroundColor,\n               width: buttonWidth,\n               height: buttonHeight,\n               borderRadius: \"12px\",\n               ...pulseKeyframes,\n            }}\n         >\n            <div>{text}</div>\n            <style jsx>\n               {`\n          @keyframes pulse {\n            0% {\n              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);\n            }\n            50% {\n              box-shadow: 0 0 0 8px rgba(var(--tw-pulse-color), 0.5);\n            }\n            100% {\n              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);\n            }\n          }\n          button::before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            height: 100%;\n            border-radius: 20px;\n            background: inherit;\n            animation: inherit;\n            transform: translate(-50%, -50%);\n            z-index: -1;\n          }\n        `}\n            </style>\n         </button>\n      </div>\n   )\n}\n\nexport default PulsatingButton\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/radio-group-demo.json b/apps/web/public/r/styles/miami/radio-group-demo.json
index 50c61f94..2e2f40c2 100644
--- a/apps/web/public/r/styles/miami/radio-group-demo.json
+++ b/apps/web/public/r/styles/miami/radio-group-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "radio-group-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "radio-group"
   ],
   "files": [
     {
-      "path": "example/radio-group-demo.tsx",
-      "content": "import { Label } from '~/registry/miami/ui/label'\nimport { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'\n\nexport default function RadioGroupDemo() {\n   return (\n      <RadioGroup defaultValue=\"comfortable\">\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"default\" id=\"r1\" />\n            <Label htmlFor=\"r1\">Default</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n            <Label htmlFor=\"r2\">Comfortable</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"compact\" id=\"r3\" />\n            <Label htmlFor=\"r3\">Compact</Label>\n         </div>\n      </RadioGroup>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/radio-group-demo.tsx",
+      "content": "import { Label } from \"~/registry/miami/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"~/registry/miami/ui/radio-group\"\n\nexport default function RadioGroupDemo() {\n   return (\n      <RadioGroup defaultValue=\"comfortable\">\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"default\" id=\"r1\" />\n            <Label htmlFor=\"r1\">Default</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n            <Label htmlFor=\"r2\">Comfortable</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"compact\" id=\"r3\" />\n            <Label htmlFor=\"r3\">Compact</Label>\n         </div>\n      </RadioGroup>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/radio-group-form.json b/apps/web/public/r/styles/miami/radio-group-form.json
index b703a442..0c923a42 100644
--- a/apps/web/public/r/styles/miami/radio-group-form.json
+++ b/apps/web/public/r/styles/miami/radio-group-form.json
@@ -1,15 +1,17 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "radio-group-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "radio-group",
     "form"
   ],
   "files": [
     {
-      "path": "example/radio-group-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/miami/ui/form'\nimport { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst FormSchema = z.object({\n   type: z.enum(['all', 'mentions', 'none'], {\n      required_error: 'You need to select a notification type.',\n   }),\n})\n\nexport default function RadioGroupForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"type\"\n               render={({ field }) => (\n                  <FormItem className=\"space-y-3\">\n                     <FormLabel>Notify me about...</FormLabel>\n                     <FormControl>\n                        <RadioGroup\n                           onValueChange={field.onChange}\n                           defaultValue={field.value}\n                           className=\"flex flex-col space-y-1\"\n                        >\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"all\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 All new messages\n                              </FormLabel>\n                           </FormItem>\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"mentions\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 Direct messages and mentions\n                              </FormLabel>\n                           </FormItem>\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"none\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">Nothing</FormLabel>\n                           </FormItem>\n                        </RadioGroup>\n                     </FormControl>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/radio-group-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/miami/ui/form\"\nimport { RadioGroup, RadioGroupItem } from \"~/registry/miami/ui/radio-group\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst FormSchema = z.object({\n   type: z.enum([\"all\", \"mentions\", \"none\"], {\n      required_error: \"You need to select a notification type.\",\n   }),\n})\n\nexport default function RadioGroupForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"type\"\n               render={({ field }) => (\n                  <FormItem className=\"space-y-3\">\n                     <FormLabel>Notify me about...</FormLabel>\n                     <FormControl>\n                        <RadioGroup\n                           onValueChange={field.onChange}\n                           defaultValue={field.value}\n                           className=\"flex flex-col space-y-1\"\n                        >\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"all\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 All new messages\n                              </FormLabel>\n                           </FormItem>\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"mentions\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 Direct messages and mentions\n                              </FormLabel>\n                           </FormItem>\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"none\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 Nothing\n                              </FormLabel>\n                           </FormItem>\n                        </RadioGroup>\n                     </FormControl>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/radio-group.json b/apps/web/public/r/styles/miami/radio-group.json
index 7a08165a..015ecc24 100644
--- a/apps/web/public/r/styles/miami/radio-group.json
+++ b/apps/web/public/r/styles/miami/radio-group.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "radio-group",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-radio-group"
   ],
   "files": [
     {
       "path": "ui/radio-group.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { CheckIcon } from '@radix-ui/react-icons'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\n\nimport { ny } from '~/lib/utils'\n\nconst RadioGroup = React.forwardRef<\n   React.ElementRef<typeof RadioGroupPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n   return (\n      <RadioGroupPrimitive.Root\n         className={ny('grid gap-2', className)}\n         {...props}\n         ref={ref}\n      />\n   )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n   React.ElementRef<typeof RadioGroupPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n   return (\n      <RadioGroupPrimitive.Item\n         ref={ref}\n         className={ny(\n            'border-primary text-primary focus-visible:ring-ring aspect-square size-4 shrink-0 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',\n            className,\n         )}\n         {...props}\n      >\n         <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n            <CheckIcon className=\"fill-primary size-3.5\" />\n         </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n   )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { CheckIcon } from \"@radix-ui/react-icons\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n   React.ElementRef<typeof RadioGroupPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n   return (\n      <RadioGroupPrimitive.Root\n         className={ny(\"grid gap-2\", className)}\n         {...props}\n         ref={ref}\n      />\n   )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n   React.ElementRef<typeof RadioGroupPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n   return (\n      <RadioGroupPrimitive.Item\n         ref={ref}\n         className={ny(\n            \"border-primary text-primary focus-visible:ring-ring aspect-square size-4 shrink-0 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50\",\n            className,\n         )}\n         {...props}\n      >\n         <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n            <CheckIcon className=\"fill-primary size-3.5\" />\n         </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n   )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/rainbow-button-demo.json b/apps/web/public/r/styles/miami/rainbow-button-demo.json
index a2cedcd4..4f8f9c5f 100644
--- a/apps/web/public/r/styles/miami/rainbow-button-demo.json
+++ b/apps/web/public/r/styles/miami/rainbow-button-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "rainbow-button-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/rainbow-button-demo.tsx",
-      "content": "import { RainbowButton } from '~/registry/miami/ui/rainbow-button'\n\nexport default function RainbowButtonDemo() {\n   return <RainbowButton>Get Unlimited Access</RainbowButton>\n}\n",
-      "type": "registry:component",
+      "path": "examples/rainbow-button-demo.tsx",
+      "content": "import { RainbowButton } from \"~/registry/miami/ui/rainbow-button\"\n\nexport default function RainbowButtonDemo() {\n   return <RainbowButton>Get Unlimited Access</RainbowButton>\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/rainbow-button.json b/apps/web/public/r/styles/miami/rainbow-button.json
index 4a61d156..80a21bbc 100644
--- a/apps/web/public/r/styles/miami/rainbow-button.json
+++ b/apps/web/public/r/styles/miami/rainbow-button.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "rainbow-button",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/rainbow-button.tsx",
-      "content": "import React from 'react'\n\nimport { ny } from '~/lib/utils'\n\ninterface RainbowButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport function RainbowButton({ children, ...props }: RainbowButtonProps) {\n   return (\n      <button\n         className={ny(\n            'focus-visible:ring-ring animate-rainbow text-primary-foreground group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',\n\n            // before styles\n            'before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]',\n\n            // light mode colors\n            'bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',\n\n            // dark mode colors\n            ' dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',\n         )}\n         {...props}\n      >\n         {children}\n      </button>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import type React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ninterface RainbowButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport function RainbowButton({ children, ...props }: RainbowButtonProps) {\n   return (\n      <button\n         className={ny(\n            \"focus-visible:ring-ring animate-rainbow text-primary-foreground group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50\",\n\n            // before styles\n            \"before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]\",\n\n            // light mode colors\n            \"bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]\",\n\n            // dark mode colors\n            \" dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]\",\n         )}\n         {...props}\n      >\n         {children}\n      </button>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/resizable-demo-with-handle.json b/apps/web/public/r/styles/miami/resizable-demo-with-handle.json
index 45b556fb..413b6dec 100644
--- a/apps/web/public/r/styles/miami/resizable-demo-with-handle.json
+++ b/apps/web/public/r/styles/miami/resizable-demo-with-handle.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "resizable-demo-with-handle",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "resizable"
   ],
   "files": [
     {
-      "path": "example/resizable-demo-with-handle.tsx",
-      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from '~/registry/miami/ui/resizable'\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={50}>\n            <div className=\"flex h-[200px] items-center justify-center p-6\">\n               <span className=\"font-semibold\">One</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={50}>\n            <ResizablePanelGroup direction=\"vertical\">\n               <ResizablePanel defaultSize={25}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Two</span>\n                  </div>\n               </ResizablePanel>\n               <ResizableHandle withHandle />\n               <ResizablePanel defaultSize={75}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Three</span>\n                  </div>\n               </ResizablePanel>\n            </ResizablePanelGroup>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/resizable-demo-with-handle.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"~/registry/miami/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={50}>\n            <div className=\"flex h-[200px] items-center justify-center p-6\">\n               <span className=\"font-semibold\">One</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={50}>\n            <ResizablePanelGroup direction=\"vertical\">\n               <ResizablePanel defaultSize={25}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Two</span>\n                  </div>\n               </ResizablePanel>\n               <ResizableHandle withHandle />\n               <ResizablePanel defaultSize={75}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Three</span>\n                  </div>\n               </ResizablePanel>\n            </ResizablePanelGroup>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/resizable-demo.json b/apps/web/public/r/styles/miami/resizable-demo.json
index 1773bea7..5b275739 100644
--- a/apps/web/public/r/styles/miami/resizable-demo.json
+++ b/apps/web/public/r/styles/miami/resizable-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "resizable-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "resizable"
   ],
   "files": [
     {
-      "path": "example/resizable-demo.tsx",
-      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from '~/registry/miami/ui/resizable'\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={50}>\n            <div className=\"flex h-[200px] items-center justify-center p-6\">\n               <span className=\"font-semibold\">One</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle />\n         <ResizablePanel defaultSize={50}>\n            <ResizablePanelGroup direction=\"vertical\">\n               <ResizablePanel defaultSize={25}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Two</span>\n                  </div>\n               </ResizablePanel>\n               <ResizableHandle />\n               <ResizablePanel defaultSize={75}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Three</span>\n                  </div>\n               </ResizablePanel>\n            </ResizablePanelGroup>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/resizable-demo.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"~/registry/miami/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={50}>\n            <div className=\"flex h-[200px] items-center justify-center p-6\">\n               <span className=\"font-semibold\">One</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle />\n         <ResizablePanel defaultSize={50}>\n            <ResizablePanelGroup direction=\"vertical\">\n               <ResizablePanel defaultSize={25}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Two</span>\n                  </div>\n               </ResizablePanel>\n               <ResizableHandle />\n               <ResizablePanel defaultSize={75}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Three</span>\n                  </div>\n               </ResizablePanel>\n            </ResizablePanelGroup>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/resizable-handle.json b/apps/web/public/r/styles/miami/resizable-handle.json
index 4a0b42a7..a7522b74 100644
--- a/apps/web/public/r/styles/miami/resizable-handle.json
+++ b/apps/web/public/r/styles/miami/resizable-handle.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "resizable-handle",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "resizable"
   ],
   "files": [
     {
-      "path": "example/resizable-handle.tsx",
-      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from '~/registry/miami/ui/resizable'\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"min-h-[200px] max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Sidebar</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/resizable-handle.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"~/registry/miami/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"min-h-[200px] max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Sidebar</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/resizable-vertical.json b/apps/web/public/r/styles/miami/resizable-vertical.json
index 3179c143..83d10da9 100644
--- a/apps/web/public/r/styles/miami/resizable-vertical.json
+++ b/apps/web/public/r/styles/miami/resizable-vertical.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "resizable-vertical",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "resizable"
   ],
   "files": [
     {
-      "path": "example/resizable-vertical.tsx",
-      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from '~/registry/miami/ui/resizable'\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"vertical\"\n         className=\"min-h-[200px] max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Header</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/resizable-vertical.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"~/registry/miami/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"vertical\"\n         className=\"min-h-[200px] max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Header</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/resizable.json b/apps/web/public/r/styles/miami/resizable.json
index ab66a489..148dcf5f 100644
--- a/apps/web/public/r/styles/miami/resizable.json
+++ b/apps/web/public/r/styles/miami/resizable.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "resizable",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "react-resizable-panels"
   ],
   "files": [
     {
       "path": "ui/resizable.tsx",
-      "content": "'use client'\n\nimport { DragHandleDots2Icon } from '@radix-ui/react-icons'\nimport * as ResizablePrimitive from 'react-resizable-panels'\n\nimport { ny } from '~/lib/utils'\n\nfunction ResizablePanelGroup({\n   className,\n   ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n   return (\n      <ResizablePrimitive.PanelGroup\n         className={ny(\n            'flex size-full data-[panel-group-direction=vertical]:flex-col',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nfunction ResizableHandle({\n   withHandle,\n   className,\n   ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n   withHandle?: boolean\n}) {\n   return (\n      <ResizablePrimitive.PanelResizeHandle\n         className={ny(\n            'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',\n            className,\n         )}\n         {...props}\n      >\n         {withHandle && (\n            <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border\">\n               <DragHandleDots2Icon className=\"size-2.5\" />\n            </div>\n         )}\n      </ResizablePrimitive.PanelResizeHandle>\n   )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { DragHandleDots2Icon } from \"@radix-ui/react-icons\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { ny } from \"~/lib/utils\"\n\nfunction ResizablePanelGroup({\n   className,\n   ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n   return (\n      <ResizablePrimitive.PanelGroup\n         className={ny(\n            \"flex size-full data-[panel-group-direction=vertical]:flex-col\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nfunction ResizableHandle({\n   withHandle,\n   className,\n   ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n   withHandle?: boolean\n}) {\n   return (\n      <ResizablePrimitive.PanelResizeHandle\n         className={ny(\n            \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n            className,\n         )}\n         {...props}\n      >\n         {withHandle && (\n            <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border\">\n               <DragHandleDots2Icon className=\"size-2.5\" />\n            </div>\n         )}\n      </ResizablePrimitive.PanelResizeHandle>\n   )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/retro-grid-demo.json b/apps/web/public/r/styles/miami/retro-grid-demo.json
index ec6c3395..37feb1f7 100644
--- a/apps/web/public/r/styles/miami/retro-grid-demo.json
+++ b/apps/web/public/r/styles/miami/retro-grid-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "retro-grid-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/retro-grid-demo.tsx",
-      "content": "'use client'\n\nimport RetroGrid from '~/registry/miami/ui/retro-grid'\n\nfunction RetroGridDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <span className=\"pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent\">\n            Retro Grid\n         </span>\n\n         <RetroGrid />\n      </div>\n   )\n}\n\nexport default RetroGridDemo\n",
-      "type": "registry:component",
+      "path": "examples/retro-grid-demo.tsx",
+      "content": "\"use client\"\n\nimport { RetroGrid } from \"~/registry/miami/ui/retro-grid\"\n\nexport default function RetroGridDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <span className=\"pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent\">\n            Retro Grid\n         </span>\n\n         <RetroGrid />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/retro-grid.json b/apps/web/public/r/styles/miami/retro-grid.json
index 52ee2db3..81c15ecb 100644
--- a/apps/web/public/r/styles/miami/retro-grid.json
+++ b/apps/web/public/r/styles/miami/retro-grid.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "retro-grid",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/retro-grid.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\nexport default function RetroGrid({ className }: { className?: string }) {\n   return (\n      <div\n         className={ny(\n            'pointer-events-none absolute size-full overflow-hidden opacity-50 [perspective:200px]',\n            className,\n         )}\n      >\n         {/* Grid */}\n         <div className=\"absolute inset-0 [transform:rotateX(35deg)]\">\n            <div\n               className={ny(\n                  'animate-grid',\n\n                  '[background-repeat:repeat] [background-size:60px_60px] [height:300vh] [inset:0%_0px] [margin-left:-50%] [transform-origin:100%_0_0] [width:600vw]',\n\n                  // Light Styles\n                  '[background-image:linear-gradient(to_right,rgba(0,0,0,0.3)_1px,transparent_0),linear-gradient(to_bottom,rgba(0,0,0,0.3)_1px,transparent_0)]',\n\n                  // Dark styles\n                  'dark:[background-image:linear-gradient(to_right,rgba(255,255,255,0.2)_1px,transparent_0),linear-gradient(to_bottom,rgba(255,255,255,0.2)_1px,transparent_0)]',\n               )}\n            />\n         </div>\n\n         {/* Background Gradient */}\n         <div className=\"absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/registry/miami/lib/utils\"\n\ninterface RetroGridProps extends React.HTMLAttributes<HTMLDivElement> {\n   /**\n    * Additional CSS classes to apply to the grid container\n    */\n   className?: string\n   /**\n    * Rotation angle of the grid in degrees\n    * @default 65\n    */\n   angle?: number\n   /**\n    * Grid cell size in pixels\n    * @default 60\n    */\n   cellSize?: number\n   /**\n    * Grid opacity value between 0 and 1\n    * @default 0.5\n    */\n   opacity?: number\n   /**\n    * Grid line color in light mode\n    * @default \"gray\"\n    */\n   lightLineColor?: string\n   /**\n    * Grid line color in dark mode\n    * @default \"gray\"\n    */\n   darkLineColor?: string\n}\n\nexport function RetroGrid({\n   className,\n   angle = 65,\n   cellSize = 60,\n   opacity = 0.5,\n   lightLineColor = \"gray\",\n   darkLineColor = \"gray\",\n   ...props\n}: RetroGridProps) {\n   const gridStyles = {\n      \"--grid-angle\": `${angle}deg`,\n      \"--cell-size\": `${cellSize}px`,\n      \"--opacity\": opacity,\n      \"--light-line\": lightLineColor,\n      \"--dark-line\": darkLineColor,\n   } as React.CSSProperties\n\n   return (\n      <div\n         className={ny(\n            \"pointer-events-none absolute size-full overflow-hidden [perspective:200px]\",\n            `opacity-[var(--opacity)]`,\n            className,\n         )}\n         style={gridStyles}\n         {...props}\n      >\n         <div className=\"absolute inset-0 [transform:rotateX(var(--grid-angle))]\">\n            <div className=\"animate-grid [background-image:linear-gradient(to_right,var(--light-line)_1px,transparent_0),linear-gradient(to_bottom,var(--light-line)_1px,transparent_0)] [background-repeat:repeat] [background-size:var(--cell-size)_var(--cell-size)] [height:300vh] [inset:0%_0px] [margin-left:-200%] [transform-origin:100%_0_0] [width:600vw] dark:[background-image:linear-gradient(to_right,var(--dark-line)_1px,transparent_0),linear-gradient(to_bottom,var(--dark-line)_1px,transparent_0)]\" />\n         </div>\n\n         <div className=\"absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black\" />\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/ripple-button-demo.json b/apps/web/public/r/styles/miami/ripple-button-demo.json
new file mode 100644
index 00000000..59c1e743
--- /dev/null
+++ b/apps/web/public/r/styles/miami/ripple-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "ripple-button-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/ripple-button-demo.tsx",
+      "content": "import { RippleButton } from \"~/registry/miami/ui/ripple-button\"\n\nexport default function RippleButtonDemo() {\n   return <RippleButton rippleColor=\"#ADD8E6\">Click me</RippleButton>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/ripple-button.json b/apps/web/public/r/styles/miami/ripple-button.json
new file mode 100644
index 00000000..2c9ae70b
--- /dev/null
+++ b/apps/web/public/r/styles/miami/ripple-button.json
@@ -0,0 +1,39 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "ripple-button",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/ripple-button.tsx",
+      "content": "\"use client\"\n\nimport React, { type MouseEvent, useEffect, useState } from \"react\"\nimport { ny } from \"~/registry/miami/lib/utils\"\n\ninterface RippleButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n   rippleColor?: string\n   duration?: string\n}\n\nexport const RippleButton = React.forwardRef<\n   HTMLButtonElement,\n   RippleButtonProps\n>(\n   (\n      {\n         className,\n         children,\n         rippleColor = \"#ffffff\",\n         duration = \"600ms\",\n         onClick,\n         ...props\n      },\n      ref,\n   ) => {\n      const [buttonRipples, setButtonRipples] = useState<\n         Array<{ x: number; y: number; size: number; key: number }>\n      >([])\n\n      const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n         createRipple(event)\n         onClick?.(event)\n      }\n\n      const createRipple = (event: MouseEvent<HTMLButtonElement>) => {\n         const button = event.currentTarget\n         const rect = button.getBoundingClientRect()\n         const size = Math.max(rect.width, rect.height)\n         const x = event.clientX - rect.left - size / 2\n         const y = event.clientY - rect.top - size / 2\n\n         const newRipple = { x, y, size, key: Date.now() }\n         setButtonRipples((prevRipples) => [...prevRipples, newRipple])\n      }\n\n      useEffect(() => {\n         if (buttonRipples.length > 0) {\n            const lastRipple = buttonRipples[buttonRipples.length - 1]\n            const timeout = setTimeout(() => {\n               setButtonRipples((prevRipples) =>\n                  prevRipples.filter((ripple) => ripple.key !== lastRipple.key),\n               )\n            }, Number.parseInt(duration))\n            return () => clearTimeout(timeout)\n         }\n      }, [buttonRipples, duration])\n\n      return (\n         <button\n            className={ny(\n               \"relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 bg-background px-4 py-2 text-center text-primary\",\n               className,\n            )}\n            onClick={handleClick}\n            ref={ref}\n            {...props}\n         >\n            <div className=\"relative z-10\">{children}</div>\n            <span className=\"pointer-events-none absolute inset-0\">\n               {buttonRipples.map((ripple) => (\n                  <span\n                     className=\"absolute animate-rippling rounded-full bg-background opacity-30\"\n                     key={ripple.key}\n                     style={{\n                        width: `${ripple.size}px`,\n                        height: `${ripple.size}px`,\n                        top: `${ripple.y}px`,\n                        left: `${ripple.x}px`,\n                        backgroundColor: rippleColor,\n                        transform: `scale(0)`,\n                     }}\n                  />\n               ))}\n            </span>\n         </button>\n      )\n   },\n)\n\nRippleButton.displayName = \"RippleButton\"\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "rippling": "rippling var(--duration) ease-out"
+          },
+          "keyframes": {
+            "rippling": {
+              "0%": {
+                "opacity": "1"
+              },
+              "100%": {
+                "transform": "scale(2)",
+                "opacity": "0"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/ripple-demo.json b/apps/web/public/r/styles/miami/ripple-demo.json
index 33c17f44..5d0fbd65 100644
--- a/apps/web/public/r/styles/miami/ripple-demo.json
+++ b/apps/web/public/r/styles/miami/ripple-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "ripple-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/ripple-demo.tsx",
-      "content": "import Ripple from '~/registry/miami/ui/ripple'\n\nfunction RippleDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white\">\n            Ripple\n         </p>\n         <Ripple />\n      </div>\n   )\n}\n\nexport default RippleDemo\n",
-      "type": "registry:component",
+      "path": "examples/ripple-demo.tsx",
+      "content": "import { Ripple } from \"~/registry/miami/ui/ripple\"\n\nexport default function RippleDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white\">\n            Ripple\n         </p>\n         <Ripple />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/ripple.json b/apps/web/public/r/styles/miami/ripple.json
index 1cb38523..e4558f96 100644
--- a/apps/web/public/r/styles/miami/ripple.json
+++ b/apps/web/public/r/styles/miami/ripple.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "ripple",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/ripple.tsx",
-      "content": "import type { CSSProperties } from 'react'\nimport React from 'react'\n\n// Modify these\nconst MAIN_CIRCLE_SIZE = 210\nconst MAIN_CIRCLE_OPACITY = 0.24\nconst NUM_CIRCLES = 8\n\nconst Ripple = React.memo(() => {\n   return (\n      <div className=\"absolute left-1/2 top-1/2 size-full overflow-visible\">\n         {Array.from({ length: NUM_CIRCLES }, (_, i) => (\n            <div\n               key={i}\n               className=\"animate-ripple absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-neutral-400\"\n               style={\n                  {\n                     width: MAIN_CIRCLE_SIZE + i * 70,\n                     height: MAIN_CIRCLE_SIZE + i * 70,\n                     opacity: MAIN_CIRCLE_OPACITY - i * 0.03,\n                     animationDelay: `${i * 0.06}s`,\n                  } as CSSProperties\n               }\n            >\n            </div>\n         ))}\n      </div>\n   )\n})\n\nRipple.displayName = 'Ripple'\n\nexport default Ripple\n",
-      "type": "registry:component",
+      "content": "import React, { type ComponentPropsWithoutRef, type CSSProperties } from \"react\"\n\nimport { ny } from \"~/registry/miami/lib/utils\"\n\ninterface RippleProps extends ComponentPropsWithoutRef<\"div\"> {\n   mainCircleSize?: number\n   mainCircleOpacity?: number\n   numCircles?: number\n}\n\nexport const Ripple = React.memo(function Ripple({\n   mainCircleSize = 210,\n   mainCircleOpacity = 0.24,\n   numCircles = 8,\n   className,\n   ...props\n}: RippleProps) {\n   return (\n      <div\n         className={ny(\n            \"pointer-events-none absolute inset-0 select-none [mask-image:linear-gradient(to_bottom,white,transparent)]\",\n            className,\n         )}\n         {...props}\n      >\n         {Array.from({ length: numCircles }, (_, i) => {\n            const size = mainCircleSize + i * 70\n            const opacity = mainCircleOpacity - i * 0.03\n            const animationDelay = `${i * 0.06}s`\n            const borderStyle = i === numCircles - 1 ? \"dashed\" : \"solid\"\n            const borderOpacity = 5 + i * 5\n\n            return (\n               <div\n                  key={i}\n                  className={`[--i: absolute animate-ripple rounded-full border bg-foreground/25 shadow-xl${i}]`}\n                  style={\n                     {\n                        width: `${size}px`,\n                        height: `${size}px`,\n                        opacity,\n                        animationDelay,\n                        borderStyle,\n                        borderWidth: \"1px\",\n                        borderColor: `hsl(var(--foreground), ${borderOpacity / 100})`,\n                        top: \"50%\",\n                        left: \"50%\",\n                        transform: \"translate(-50%, -50%) scale(1)\",\n                     } as CSSProperties\n                  }\n               />\n            )\n         })}\n      </div>\n   )\n})\n\nRipple.displayName = \"Ripple\"\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/safari-demo-2.json b/apps/web/public/r/styles/miami/safari-demo-2.json
index 8192dce2..4b12cd1d 100644
--- a/apps/web/public/r/styles/miami/safari-demo-2.json
+++ b/apps/web/public/r/styles/miami/safari-demo-2.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "safari-demo-2",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/safari-demo-2.tsx",
-      "content": "import Safari from '~/registry/miami/ui/safari'\n\nexport default function SafariDemo() {\n   return (\n      <div className=\"relative\">\n         <Safari\n            url=\"nyxbui.design\"\n            className=\"size-full\"\n            src=\"https://via.placeholder.com/1200x750\"\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/safari-demo-2.tsx",
+      "content": "import Safari from \"~/registry/miami/ui/safari\"\n\nexport default function SafariDemo() {\n   return (\n      <div className=\"relative\">\n         <Safari\n            url=\"nyxbui.design\"\n            className=\"size-full\"\n            src=\"https://via.placeholder.com/1200x750\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/safari-demo.json b/apps/web/public/r/styles/miami/safari-demo.json
index ab6693cc..a1bfdad6 100644
--- a/apps/web/public/r/styles/miami/safari-demo.json
+++ b/apps/web/public/r/styles/miami/safari-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "safari-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/safari-demo.tsx",
-      "content": "import Safari from '~/registry/miami/ui/safari'\n\nexport default function SafariDemo() {\n   return (\n      <div className=\"relative\">\n         <Safari url=\"nyxbui.design\" className=\"size-full\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/safari-demo.tsx",
+      "content": "import Safari from \"~/registry/miami/ui/safari\"\n\nexport default function SafariDemo() {\n   return (\n      <div className=\"relative\">\n         <Safari url=\"nyxbui.design\" className=\"size-full\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/safari.json b/apps/web/public/r/styles/miami/safari.json
index 60fecdba..d0b43a0b 100644
--- a/apps/web/public/r/styles/miami/safari.json
+++ b/apps/web/public/r/styles/miami/safari.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "safari",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/safari.tsx",
-      "content": "import type { SVGProps } from 'react'\n\nexport interface SafariProps extends SVGProps<SVGSVGElement> {\n   url?: string\n   src?: string\n   width?: number\n   height?: number\n}\n\nexport default function Safari({\n   src,\n   url,\n   width = 1203,\n   height = 753,\n   ...props\n}: SafariProps) {\n   return (\n      <svg\n         width={width}\n         height={height}\n         viewBox={`0 0 ${width} ${height}`}\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <g clipPath=\"url(#path0)\">\n            <path\n               d=\"M0 52H1202V741C1202 747.627 1196.63 753 1190 753H12C5.37258 753 0 747.627 0 741V52Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               fillRule=\"evenodd\"\n               clipRule=\"evenodd\"\n               d=\"M0 12C0 5.37258 5.37258 0 12 0H1190C1196.63 0 1202 5.37258 1202 12V52H0L0 12Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               fillRule=\"evenodd\"\n               clipRule=\"evenodd\"\n               d=\"M1.06738 12C1.06738 5.92487 5.99225 1 12.0674 1H1189.93C1196.01 1 1200.93 5.92487 1200.93 12V51H1.06738V12Z\"\n               className=\"fill-white dark:fill-[#262626]\"\n            />\n            <circle\n               cx=\"27\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <circle\n               cx=\"47\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <circle\n               cx=\"67\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               d=\"M286 17C286 13.6863 288.686 11 292 11H946C949.314 11 952 13.6863 952 17V35C952 38.3137 949.314 41 946 41H292C288.686 41 286 38.3137 286 35V17Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M566.269 32.0852H572.426C573.277 32.0852 573.696 31.6663 573.696 30.7395V25.9851C573.696 25.1472 573.353 24.7219 572.642 24.6521V23.0842C572.642 20.6721 571.036 19.5105 569.348 19.5105C567.659 19.5105 566.053 20.6721 566.053 23.0842V24.6711C565.393 24.7727 565 25.1917 565 25.9851V30.7395C565 31.6663 565.418 32.0852 566.269 32.0852ZM567.272 22.97C567.272 21.491 568.211 20.6785 569.348 20.6785C570.478 20.6785 571.423 21.491 571.423 22.97V24.6394L567.272 24.6458V22.97Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <text\n                  x=\"580\"\n                  y=\"30\"\n                  fill=\"#A3A3A3\"\n                  fontSize=\"12\"\n                  fontFamily=\"Arial, sans-serif\"\n               >\n                  {url}\n               </text>\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M265.5 33.8984C265.641 33.8984 265.852 33.8516 266.047 33.7422C270.547 31.2969 272.109 30.1641 272.109 27.3203V21.4219C272.109 20.4844 271.742 20.1484 270.961 19.8125C270.094 19.4453 267.18 18.4297 266.328 18.1406C266.07 18.0547 265.766 18 265.5 18C265.234 18 264.93 18.0703 264.672 18.1406C263.82 18.3828 260.906 19.4531 260.039 19.8125C259.258 20.1406 258.891 20.4844 258.891 21.4219V27.3203C258.891 30.1641 260.461 31.2812 264.945 33.7422C265.148 33.8516 265.359 33.8984 265.5 33.8984ZM265.922 19.5781C266.945 19.9766 269.172 20.7656 270.344 21.1875C270.562 21.2656 270.617 21.3828 270.617 21.6641V27.0234C270.617 29.3125 269.469 29.9375 265.945 32.0625C265.727 32.1875 265.617 32.2344 265.508 32.2344V19.4844C265.617 19.4844 265.734 19.5156 265.922 19.5781Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M936.273 24.9766C936.5 24.9766 936.68 24.9062 936.82 24.7578L940.023 21.5312C940.195 21.3594 940.273 21.1719 940.273 20.9531C940.273 20.7422 940.188 20.5391 940.023 20.3828L936.82 17.125C936.68 16.9688 936.5 16.8906 936.273 16.8906C935.852 16.8906 935.516 17.2422 935.516 17.6719C935.516 17.8828 935.594 18.0547 935.727 18.2031L937.594 20.0312C937.227 19.9766 936.852 19.9453 936.477 19.9453C932.609 19.9453 929.516 23.0391 929.516 26.9141C929.516 30.7891 932.633 33.9062 936.5 33.9062C940.375 33.9062 943.484 30.7891 943.484 26.9141C943.484 26.4453 943.156 26.1094 942.688 26.1094C942.234 26.1094 941.93 26.4453 941.93 26.9141C941.93 29.9297 939.516 32.3516 936.5 32.3516C933.492 32.3516 931.07 29.9297 931.07 26.9141C931.07 23.875 933.469 21.4688 936.477 21.4688C936.984 21.4688 937.453 21.5078 937.867 21.5781L935.734 23.6875C935.594 23.8281 935.516 24 935.516 24.2109C935.516 24.6406 935.852 24.9766 936.273 24.9766Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1134 33.0156C1134.49 33.0156 1134.89 32.6094 1134.89 32.1484V27.2578H1139.66C1140.13 27.2578 1140.54 26.8594 1140.54 26.3672C1140.54 25.8828 1140.13 25.4766 1139.66 25.4766H1134.89V20.5859C1134.89 20.1172 1134.49 19.7188 1134 19.7188C1133.52 19.7188 1133.11 20.1172 1133.11 20.5859V25.4766H1128.34C1127.88 25.4766 1127.46 25.8828 1127.46 26.3672C1127.46 26.8594 1127.88 27.2578 1128.34 27.2578H1133.11V32.1484C1133.11 32.6094 1133.52 33.0156 1134 33.0156Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1161.8 31.0703H1163.23V32.375C1163.23 34.0547 1164.12 34.9219 1165.81 34.9219H1174.2C1175.89 34.9219 1176.77 34.0547 1176.77 32.3828V24.0469C1176.77 22.375 1175.89 21.5 1174.2 21.5H1172.77V20.2578C1172.77 18.5859 1171.88 17.7109 1170.19 17.7109H1161.8C1160.1 17.7109 1159.23 18.5781 1159.23 20.2578V28.5234C1159.23 30.1953 1160.1 31.0703 1161.8 31.0703ZM1161.9 29.5078C1161.18 29.5078 1160.78 29.1328 1160.78 28.3828V20.3984C1160.78 19.6406 1161.18 19.2656 1161.9 19.2656H1170.09C1170.8 19.2656 1171.2 19.6406 1171.2 20.3984V21.5H1165.81C1164.12 21.5 1163.23 22.375 1163.23 24.0469V29.5078H1161.9ZM1165.91 33.3672C1165.19 33.3672 1164.8 32.9922 1164.8 32.2422V24.1875C1164.8 23.4297 1165.19 23.0625 1165.91 23.0625H1174.1C1174.81 23.0625 1175.21 23.4297 1175.21 24.1875V32.2422C1175.21 32.9922 1174.81 33.3672 1174.1 33.3672H1165.91Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1099.51 28.4141C1099.91 28.4141 1100.24 28.0859 1100.24 27.6953V19.8359L1100.18 18.6797L1100.66 19.25L1101.75 20.4141C1101.88 20.5547 1102.06 20.625 1102.24 20.625C1102.6 20.625 1102.9 20.3672 1102.9 20C1102.9 19.8047 1102.82 19.6641 1102.69 19.5312L1100.06 17.0078C1099.88 16.8203 1099.7 16.7578 1099.51 16.7578C1099.32 16.7578 1099.14 16.8203 1098.95 17.0078L1096.33 19.5312C1096.2 19.6641 1096.12 19.8047 1096.12 20C1096.12 20.3672 1096.41 20.625 1096.77 20.625C1096.95 20.625 1097.14 20.5547 1097.27 20.4141L1098.35 19.25L1098.84 18.6719L1098.78 19.8359V27.6953C1098.78 28.0859 1099.11 28.4141 1099.51 28.4141ZM1095 34.6562H1104C1105.7 34.6562 1106.57 33.7812 1106.57 32.1094V24.4297C1106.57 22.7578 1105.7 21.8828 1104 21.8828H1101.89V23.4375H1103.9C1104.61 23.4375 1105.02 23.8125 1105.02 24.5625V31.9688C1105.02 32.7188 1104.61 33.0938 1103.9 33.0938H1095.1C1094.38 33.0938 1093.98 32.7188 1093.98 31.9688V24.5625C1093.98 23.8125 1094.38 23.4375 1095.1 23.4375H1097.13V21.8828H1095C1093.31 21.8828 1092.43 22.75 1092.43 24.4297V32.1094C1092.43 33.7812 1093.31 34.6562 1095 34.6562Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M99.5703 33.6016H112.938C114.633 33.6016 115.516 32.7266 115.516 31.0547V21.5469C115.516 19.875 114.633 19 112.938 19H99.5703C97.8828 19 97 19.8672 97 21.5469V31.0547C97 32.7266 97.8828 33.6016 99.5703 33.6016ZM99.6719 32.0469C98.9531 32.0469 98.5547 31.6719 98.5547 30.9141V21.6875C98.5547 20.9297 98.9531 20.5547 99.6719 20.5547H103.234V32.0469H99.6719ZM112.836 20.5547C113.555 20.5547 113.953 20.9297 113.953 21.6875V30.9141C113.953 31.6719 113.555 32.0469 112.836 32.0469H104.711V20.5547H112.836ZM101.703 23.4141C101.984 23.4141 102.219 23.1719 102.219 22.9062C102.219 22.6406 101.984 22.4062 101.703 22.4062H100.102C99.8203 22.4062 99.5859 22.6406 99.5859 22.9062C99.5859 23.1719 99.8203 23.4141 100.102 23.4141H101.703ZM101.703 25.5156C101.984 25.5156 102.219 25.2812 102.219 25.0078C102.219 24.7422 101.984 24.5078 101.703 24.5078H100.102C99.8203 24.5078 99.5859 24.7422 99.5859 25.0078C99.5859 25.2812 99.8203 25.5156 100.102 25.5156H101.703ZM101.703 27.6094C101.984 27.6094 102.219 27.3828 102.219 27.1094C102.219 26.8438 101.984 26.6172 101.703 26.6172H100.102C99.8203 26.6172 99.5859 26.8438 99.5859 27.1094C99.5859 27.3828 99.8203 27.6094 100.102 27.6094H101.703Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M143.914 32.5938C144.094 32.7656 144.312 32.8594 144.562 32.8594C145.086 32.8594 145.492 32.4531 145.492 31.9375C145.492 31.6797 145.391 31.4453 145.211 31.2656L139.742 25.9219L145.211 20.5938C145.391 20.4141 145.492 20.1719 145.492 19.9219C145.492 19.4062 145.086 19 144.562 19C144.312 19 144.094 19.0938 143.922 19.2656L137.844 25.2031C137.625 25.4062 137.516 25.6562 137.516 25.9297C137.516 26.2031 137.625 26.4375 137.836 26.6484L143.914 32.5938Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M168.422 32.8594C168.68 32.8594 168.891 32.7656 169.07 32.5938L175.148 26.6562C175.359 26.4375 175.469 26.2109 175.469 25.9297C175.469 25.6562 175.367 25.4141 175.148 25.2109L169.07 19.2656C168.891 19.0938 168.68 19 168.422 19C167.898 19 167.492 19.4062 167.492 19.9219C167.492 20.1719 167.602 20.4141 167.773 20.5938L173.25 25.9375L167.773 31.2656C167.594 31.4531 167.492 31.6797 167.492 31.9375C167.492 32.4531 167.898 32.8594 168.422 32.8594Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <image\n               href={src}\n               width=\"1200\"\n               height=\"700\"\n               x=\"1\"\n               y=\"52\"\n               preserveAspectRatio=\"xMidYMid slice\"\n               clipPath=\"url(#roundedBottom)\"\n            />\n         </g>\n         <defs>\n            <clipPath id=\"path0\">\n               <rect width={width} height={height} fill=\"white\" />\n            </clipPath>\n            <clipPath id=\"roundedBottom\">\n               <path\n                  d=\"M1 52H1201V741C1201 747.075 1196.08 752 1190 752H12C5.92486 752 1 747.075 1 741V52Z\"\n                  fill=\"white\"\n               />\n            </clipPath>\n         </defs>\n      </svg>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import type { SVGProps } from \"react\"\n\nexport interface SafariProps extends SVGProps<SVGSVGElement> {\n   url?: string\n   src?: string\n   width?: number\n   height?: number\n}\n\nexport default function Safari({\n   src,\n   url,\n   width = 1203,\n   height = 753,\n   ...props\n}: SafariProps) {\n   return (\n      <svg\n         width={width}\n         height={height}\n         viewBox={`0 0 ${width} ${height}`}\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <g clipPath=\"url(#path0)\">\n            <path\n               d=\"M0 52H1202V741C1202 747.627 1196.63 753 1190 753H12C5.37258 753 0 747.627 0 741V52Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               fillRule=\"evenodd\"\n               clipRule=\"evenodd\"\n               d=\"M0 12C0 5.37258 5.37258 0 12 0H1190C1196.63 0 1202 5.37258 1202 12V52H0L0 12Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               fillRule=\"evenodd\"\n               clipRule=\"evenodd\"\n               d=\"M1.06738 12C1.06738 5.92487 5.99225 1 12.0674 1H1189.93C1196.01 1 1200.93 5.92487 1200.93 12V51H1.06738V12Z\"\n               className=\"fill-white dark:fill-[#262626]\"\n            />\n            <circle\n               cx=\"27\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <circle\n               cx=\"47\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <circle\n               cx=\"67\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               d=\"M286 17C286 13.6863 288.686 11 292 11H946C949.314 11 952 13.6863 952 17V35C952 38.3137 949.314 41 946 41H292C288.686 41 286 38.3137 286 35V17Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M566.269 32.0852H572.426C573.277 32.0852 573.696 31.6663 573.696 30.7395V25.9851C573.696 25.1472 573.353 24.7219 572.642 24.6521V23.0842C572.642 20.6721 571.036 19.5105 569.348 19.5105C567.659 19.5105 566.053 20.6721 566.053 23.0842V24.6711C565.393 24.7727 565 25.1917 565 25.9851V30.7395C565 31.6663 565.418 32.0852 566.269 32.0852ZM567.272 22.97C567.272 21.491 568.211 20.6785 569.348 20.6785C570.478 20.6785 571.423 21.491 571.423 22.97V24.6394L567.272 24.6458V22.97Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <text\n                  x=\"580\"\n                  y=\"30\"\n                  fill=\"#A3A3A3\"\n                  fontSize=\"12\"\n                  fontFamily=\"Arial, sans-serif\"\n               >\n                  {url}\n               </text>\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M265.5 33.8984C265.641 33.8984 265.852 33.8516 266.047 33.7422C270.547 31.2969 272.109 30.1641 272.109 27.3203V21.4219C272.109 20.4844 271.742 20.1484 270.961 19.8125C270.094 19.4453 267.18 18.4297 266.328 18.1406C266.07 18.0547 265.766 18 265.5 18C265.234 18 264.93 18.0703 264.672 18.1406C263.82 18.3828 260.906 19.4531 260.039 19.8125C259.258 20.1406 258.891 20.4844 258.891 21.4219V27.3203C258.891 30.1641 260.461 31.2812 264.945 33.7422C265.148 33.8516 265.359 33.8984 265.5 33.8984ZM265.922 19.5781C266.945 19.9766 269.172 20.7656 270.344 21.1875C270.562 21.2656 270.617 21.3828 270.617 21.6641V27.0234C270.617 29.3125 269.469 29.9375 265.945 32.0625C265.727 32.1875 265.617 32.2344 265.508 32.2344V19.4844C265.617 19.4844 265.734 19.5156 265.922 19.5781Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M936.273 24.9766C936.5 24.9766 936.68 24.9062 936.82 24.7578L940.023 21.5312C940.195 21.3594 940.273 21.1719 940.273 20.9531C940.273 20.7422 940.188 20.5391 940.023 20.3828L936.82 17.125C936.68 16.9688 936.5 16.8906 936.273 16.8906C935.852 16.8906 935.516 17.2422 935.516 17.6719C935.516 17.8828 935.594 18.0547 935.727 18.2031L937.594 20.0312C937.227 19.9766 936.852 19.9453 936.477 19.9453C932.609 19.9453 929.516 23.0391 929.516 26.9141C929.516 30.7891 932.633 33.9062 936.5 33.9062C940.375 33.9062 943.484 30.7891 943.484 26.9141C943.484 26.4453 943.156 26.1094 942.688 26.1094C942.234 26.1094 941.93 26.4453 941.93 26.9141C941.93 29.9297 939.516 32.3516 936.5 32.3516C933.492 32.3516 931.07 29.9297 931.07 26.9141C931.07 23.875 933.469 21.4688 936.477 21.4688C936.984 21.4688 937.453 21.5078 937.867 21.5781L935.734 23.6875C935.594 23.8281 935.516 24 935.516 24.2109C935.516 24.6406 935.852 24.9766 936.273 24.9766Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1134 33.0156C1134.49 33.0156 1134.89 32.6094 1134.89 32.1484V27.2578H1139.66C1140.13 27.2578 1140.54 26.8594 1140.54 26.3672C1140.54 25.8828 1140.13 25.4766 1139.66 25.4766H1134.89V20.5859C1134.89 20.1172 1134.49 19.7188 1134 19.7188C1133.52 19.7188 1133.11 20.1172 1133.11 20.5859V25.4766H1128.34C1127.88 25.4766 1127.46 25.8828 1127.46 26.3672C1127.46 26.8594 1127.88 27.2578 1128.34 27.2578H1133.11V32.1484C1133.11 32.6094 1133.52 33.0156 1134 33.0156Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1161.8 31.0703H1163.23V32.375C1163.23 34.0547 1164.12 34.9219 1165.81 34.9219H1174.2C1175.89 34.9219 1176.77 34.0547 1176.77 32.3828V24.0469C1176.77 22.375 1175.89 21.5 1174.2 21.5H1172.77V20.2578C1172.77 18.5859 1171.88 17.7109 1170.19 17.7109H1161.8C1160.1 17.7109 1159.23 18.5781 1159.23 20.2578V28.5234C1159.23 30.1953 1160.1 31.0703 1161.8 31.0703ZM1161.9 29.5078C1161.18 29.5078 1160.78 29.1328 1160.78 28.3828V20.3984C1160.78 19.6406 1161.18 19.2656 1161.9 19.2656H1170.09C1170.8 19.2656 1171.2 19.6406 1171.2 20.3984V21.5H1165.81C1164.12 21.5 1163.23 22.375 1163.23 24.0469V29.5078H1161.9ZM1165.91 33.3672C1165.19 33.3672 1164.8 32.9922 1164.8 32.2422V24.1875C1164.8 23.4297 1165.19 23.0625 1165.91 23.0625H1174.1C1174.81 23.0625 1175.21 23.4297 1175.21 24.1875V32.2422C1175.21 32.9922 1174.81 33.3672 1174.1 33.3672H1165.91Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1099.51 28.4141C1099.91 28.4141 1100.24 28.0859 1100.24 27.6953V19.8359L1100.18 18.6797L1100.66 19.25L1101.75 20.4141C1101.88 20.5547 1102.06 20.625 1102.24 20.625C1102.6 20.625 1102.9 20.3672 1102.9 20C1102.9 19.8047 1102.82 19.6641 1102.69 19.5312L1100.06 17.0078C1099.88 16.8203 1099.7 16.7578 1099.51 16.7578C1099.32 16.7578 1099.14 16.8203 1098.95 17.0078L1096.33 19.5312C1096.2 19.6641 1096.12 19.8047 1096.12 20C1096.12 20.3672 1096.41 20.625 1096.77 20.625C1096.95 20.625 1097.14 20.5547 1097.27 20.4141L1098.35 19.25L1098.84 18.6719L1098.78 19.8359V27.6953C1098.78 28.0859 1099.11 28.4141 1099.51 28.4141ZM1095 34.6562H1104C1105.7 34.6562 1106.57 33.7812 1106.57 32.1094V24.4297C1106.57 22.7578 1105.7 21.8828 1104 21.8828H1101.89V23.4375H1103.9C1104.61 23.4375 1105.02 23.8125 1105.02 24.5625V31.9688C1105.02 32.7188 1104.61 33.0938 1103.9 33.0938H1095.1C1094.38 33.0938 1093.98 32.7188 1093.98 31.9688V24.5625C1093.98 23.8125 1094.38 23.4375 1095.1 23.4375H1097.13V21.8828H1095C1093.31 21.8828 1092.43 22.75 1092.43 24.4297V32.1094C1092.43 33.7812 1093.31 34.6562 1095 34.6562Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M99.5703 33.6016H112.938C114.633 33.6016 115.516 32.7266 115.516 31.0547V21.5469C115.516 19.875 114.633 19 112.938 19H99.5703C97.8828 19 97 19.8672 97 21.5469V31.0547C97 32.7266 97.8828 33.6016 99.5703 33.6016ZM99.6719 32.0469C98.9531 32.0469 98.5547 31.6719 98.5547 30.9141V21.6875C98.5547 20.9297 98.9531 20.5547 99.6719 20.5547H103.234V32.0469H99.6719ZM112.836 20.5547C113.555 20.5547 113.953 20.9297 113.953 21.6875V30.9141C113.953 31.6719 113.555 32.0469 112.836 32.0469H104.711V20.5547H112.836ZM101.703 23.4141C101.984 23.4141 102.219 23.1719 102.219 22.9062C102.219 22.6406 101.984 22.4062 101.703 22.4062H100.102C99.8203 22.4062 99.5859 22.6406 99.5859 22.9062C99.5859 23.1719 99.8203 23.4141 100.102 23.4141H101.703ZM101.703 25.5156C101.984 25.5156 102.219 25.2812 102.219 25.0078C102.219 24.7422 101.984 24.5078 101.703 24.5078H100.102C99.8203 24.5078 99.5859 24.7422 99.5859 25.0078C99.5859 25.2812 99.8203 25.5156 100.102 25.5156H101.703ZM101.703 27.6094C101.984 27.6094 102.219 27.3828 102.219 27.1094C102.219 26.8438 101.984 26.6172 101.703 26.6172H100.102C99.8203 26.6172 99.5859 26.8438 99.5859 27.1094C99.5859 27.3828 99.8203 27.6094 100.102 27.6094H101.703Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M143.914 32.5938C144.094 32.7656 144.312 32.8594 144.562 32.8594C145.086 32.8594 145.492 32.4531 145.492 31.9375C145.492 31.6797 145.391 31.4453 145.211 31.2656L139.742 25.9219L145.211 20.5938C145.391 20.4141 145.492 20.1719 145.492 19.9219C145.492 19.4062 145.086 19 144.562 19C144.312 19 144.094 19.0938 143.922 19.2656L137.844 25.2031C137.625 25.4062 137.516 25.6562 137.516 25.9297C137.516 26.2031 137.625 26.4375 137.836 26.6484L143.914 32.5938Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M168.422 32.8594C168.68 32.8594 168.891 32.7656 169.07 32.5938L175.148 26.6562C175.359 26.4375 175.469 26.2109 175.469 25.9297C175.469 25.6562 175.367 25.4141 175.148 25.2109L169.07 19.2656C168.891 19.0938 168.68 19 168.422 19C167.898 19 167.492 19.4062 167.492 19.9219C167.492 20.1719 167.602 20.4141 167.773 20.5938L173.25 25.9375L167.773 31.2656C167.594 31.4531 167.492 31.6797 167.492 31.9375C167.492 32.4531 167.898 32.8594 168.422 32.8594Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <image\n               href={src}\n               width=\"1200\"\n               height=\"700\"\n               x=\"1\"\n               y=\"52\"\n               preserveAspectRatio=\"xMidYMid slice\"\n               clipPath=\"url(#roundedBottom)\"\n            />\n         </g>\n         <defs>\n            <clipPath id=\"path0\">\n               <rect width={width} height={height} fill=\"white\" />\n            </clipPath>\n            <clipPath id=\"roundedBottom\">\n               <path\n                  d=\"M1 52H1201V741C1201 747.075 1196.08 752 1190 752H12C5.92486 752 1 747.075 1 741V52Z\"\n                  fill=\"white\"\n               />\n            </clipPath>\n         </defs>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/scratch-to-reveal-demo.json b/apps/web/public/r/styles/miami/scratch-to-reveal-demo.json
index 8f201f62..11960a3e 100644
--- a/apps/web/public/r/styles/miami/scratch-to-reveal-demo.json
+++ b/apps/web/public/r/styles/miami/scratch-to-reveal-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scratch-to-reveal-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/scratch-to-reveal-demo.tsx",
-      "content": "import React from 'react'\nimport ScratchToReveal from '~/registry/miami/ui/scratch-to-reveal'\n\nfunction ScratchToRevealDemo() {\n   const handleComplete = () => {\n      // Do Something\n   }\n\n   return (\n      <div>\n         <ScratchToReveal\n            width={250}\n            height={250}\n            minScratchPercentage={70}\n            className=\"flex items-center justify-center overflow-hidden rounded-2xl border-2 bg-gray-100\"\n            onComplete={handleComplete}\n         >\n            <p className=\"text-9xl\">😎</p>\n         </ScratchToReveal>\n      </div>\n   )\n}\n\nexport default ScratchToRevealDemo\n",
-      "type": "registry:component",
+      "path": "examples/scratch-to-reveal-demo.tsx",
+      "content": "import React from \"react\"\nimport ScratchToReveal from \"~/registry/miami/ui/scratch-to-reveal\"\n\nfunction ScratchToRevealDemo() {\n   const handleComplete = () => {\n      // Do Something\n   }\n\n   return (\n      <div>\n         <ScratchToReveal\n            width={250}\n            height={250}\n            minScratchPercentage={70}\n            className=\"flex items-center justify-center overflow-hidden rounded-2xl border-2 bg-gray-100\"\n            onComplete={handleComplete}\n         >\n            <p className=\"text-9xl\">😎</p>\n         </ScratchToReveal>\n      </div>\n   )\n}\n\nexport default ScratchToRevealDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/scratch-to-reveal.json b/apps/web/public/r/styles/miami/scratch-to-reveal.json
index 86507851..24a9807f 100644
--- a/apps/web/public/r/styles/miami/scratch-to-reveal.json
+++ b/apps/web/public/r/styles/miami/scratch-to-reveal.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scratch-to-reveal",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/scratch-to-reveal.tsx",
-      "content": "'use client'\nimport React, { useEffect, useRef, useState } from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface ScratchToRevealProps {\n   children: React.ReactNode\n   width: number\n   height: number\n   minScratchPercentage?: number // Minimum percentage of scratched area to be considered as completed (Value between 0 and 100)\n   className?: string\n   onComplete?: () => void\n}\n\nconst ScratchToReveal: React.FC<ScratchToRevealProps> = ({\n   width,\n   height,\n   minScratchPercentage = 50,\n   onComplete,\n   children,\n   className,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const [isScratching, setIsScratching] = useState(false)\n   const [isComplete, setIsComplete] = useState(false) // New state to track completion\n\n   const controls = useAnimation()\n\n   useEffect(() => {\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext('2d')\n      if (canvas && ctx) {\n         ctx.fillStyle = '#ccc'\n         ctx.fillRect(0, 0, canvas.width, canvas.height)\n         // Optionally add a background image or gradient\n         const gradient = ctx.createLinearGradient(\n            0,\n            0,\n            canvas.width,\n            canvas.height,\n         )\n         gradient.addColorStop(0, '#A97CF8')\n         gradient.addColorStop(0.5, '#F38CB8')\n         gradient.addColorStop(1, '#FDCC92')\n         ctx.fillStyle = gradient\n         ctx.fillRect(0, 0, canvas.width, canvas.height)\n      }\n   }, [])\n\n   useEffect(() => {\n      const handleDocumentMouseMove = (event: MouseEvent) => {\n         if (!isScratching)\n            return\n         scratch(event.clientX, event.clientY)\n      }\n\n      const handleDocumentTouchMove = (event: TouchEvent) => {\n         if (!isScratching)\n            return\n         const touch = event.touches[0]\n         scratch(touch.clientX, touch.clientY)\n      }\n\n      const handleDocumentMouseUp = () => {\n         setIsScratching(false)\n         checkCompletion()\n      }\n\n      const handleDocumentTouchEnd = () => {\n         setIsScratching(false)\n         checkCompletion()\n      }\n\n      document.addEventListener('mousedown', handleDocumentMouseMove)\n      document.addEventListener('mousemove', handleDocumentMouseMove)\n      document.addEventListener('touchstart', handleDocumentTouchMove)\n      document.addEventListener('touchmove', handleDocumentTouchMove)\n      document.addEventListener('mouseup', handleDocumentMouseUp)\n      document.addEventListener('touchend', handleDocumentTouchEnd)\n      document.addEventListener('touchcancel', handleDocumentTouchEnd)\n\n      return () => {\n         document.removeEventListener('mousedown', handleDocumentMouseMove)\n         document.removeEventListener('mousemove', handleDocumentMouseMove)\n         document.removeEventListener('touchstart', handleDocumentTouchMove)\n         document.removeEventListener('touchmove', handleDocumentTouchMove)\n         document.removeEventListener('mouseup', handleDocumentMouseUp)\n         document.removeEventListener('touchend', handleDocumentTouchEnd)\n         document.removeEventListener('touchcancel', handleDocumentTouchEnd)\n      }\n   }, [isScratching])\n\n   const handleMouseDown = () => setIsScratching(true)\n\n   const handleTouchStart = () => setIsScratching(true)\n\n   const scratch = (clientX: number, clientY: number) => {\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext('2d')\n      if (canvas && ctx) {\n         const rect = canvas.getBoundingClientRect()\n         const x = clientX - rect.left + 16 // offset to position the scratched circle with cursor\n         const y = clientY - rect.top + 16\n         ctx.globalCompositeOperation = 'destination-out'\n         ctx.beginPath()\n         ctx.arc(x, y, 30, 0, Math.PI * 2)\n         ctx.fill()\n      }\n   }\n\n   const checkCompletion = () => {\n      if (isComplete)\n         return // Check if already completed\n\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext('2d')\n      if (canvas && ctx) {\n         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n         const pixels = imageData.data\n         const totalPixels = pixels.length / 4\n         let clearPixels = 0\n\n         for (let i = 3; i < pixels.length; i += 4) {\n            if (pixels[i] === 0)\n               clearPixels++\n         }\n\n         const percentage = (clearPixels / totalPixels) * 100\n\n         if (percentage >= minScratchPercentage) {\n            setIsComplete(true) // Set complete flag\n            ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvas to reveal everything\n            startAnimation()\n            if (onComplete)\n               onComplete()\n         }\n      }\n   }\n\n   const startAnimation = () => {\n      controls.start({\n         scale: [1, 1.5, 1],\n         rotate: [0, 10, -10, 10, -10, 0],\n         transition: { duration: 0.5 },\n      })\n   }\n\n   return (\n      <motion.div\n         className={ny('relative select-none', className)}\n         style={{\n            width,\n            height,\n            cursor:\n          'url(\\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+\\'), auto',\n         }}\n         animate={controls}\n      >\n         <canvas\n            ref={canvasRef}\n            width={width}\n            height={height}\n            className=\"absolute left-0 top-0\"\n            onMouseDown={handleMouseDown}\n            onTouchStart={handleTouchStart}\n         >\n         </canvas>\n         {children}\n      </motion.div>\n   )\n}\n\nexport default ScratchToReveal\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport { motion, useAnimation } from \"framer-motion\"\nimport type React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface ScratchToRevealProps {\n   children: React.ReactNode\n   width: number\n   height: number\n   minScratchPercentage?: number // Minimum percentage of scratched area to be considered as completed (Value between 0 and 100)\n   className?: string\n   onComplete?: () => void\n}\n\nconst ScratchToReveal: React.FC<ScratchToRevealProps> = ({\n   width,\n   height,\n   minScratchPercentage = 50,\n   onComplete,\n   children,\n   className,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const [isScratching, setIsScratching] = useState(false)\n   const [isComplete, setIsComplete] = useState(false) // New state to track completion\n\n   const controls = useAnimation()\n\n   useEffect(() => {\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext(\"2d\")\n      if (canvas && ctx) {\n         ctx.fillStyle = \"#ccc\"\n         ctx.fillRect(0, 0, canvas.width, canvas.height)\n         // Optionally add a background image or gradient\n         const gradient = ctx.createLinearGradient(\n            0,\n            0,\n            canvas.width,\n            canvas.height,\n         )\n         gradient.addColorStop(0, \"#A97CF8\")\n         gradient.addColorStop(0.5, \"#F38CB8\")\n         gradient.addColorStop(1, \"#FDCC92\")\n         ctx.fillStyle = gradient\n         ctx.fillRect(0, 0, canvas.width, canvas.height)\n      }\n   }, [])\n\n   useEffect(() => {\n      const handleDocumentMouseMove = (event: MouseEvent) => {\n         if (!isScratching) return\n         scratch(event.clientX, event.clientY)\n      }\n\n      const handleDocumentTouchMove = (event: TouchEvent) => {\n         if (!isScratching) return\n         const touch = event.touches[0]\n         scratch(touch.clientX, touch.clientY)\n      }\n\n      const handleDocumentMouseUp = () => {\n         setIsScratching(false)\n         checkCompletion()\n      }\n\n      const handleDocumentTouchEnd = () => {\n         setIsScratching(false)\n         checkCompletion()\n      }\n\n      document.addEventListener(\"mousedown\", handleDocumentMouseMove)\n      document.addEventListener(\"mousemove\", handleDocumentMouseMove)\n      document.addEventListener(\"touchstart\", handleDocumentTouchMove)\n      document.addEventListener(\"touchmove\", handleDocumentTouchMove)\n      document.addEventListener(\"mouseup\", handleDocumentMouseUp)\n      document.addEventListener(\"touchend\", handleDocumentTouchEnd)\n      document.addEventListener(\"touchcancel\", handleDocumentTouchEnd)\n\n      return () => {\n         document.removeEventListener(\"mousedown\", handleDocumentMouseMove)\n         document.removeEventListener(\"mousemove\", handleDocumentMouseMove)\n         document.removeEventListener(\"touchstart\", handleDocumentTouchMove)\n         document.removeEventListener(\"touchmove\", handleDocumentTouchMove)\n         document.removeEventListener(\"mouseup\", handleDocumentMouseUp)\n         document.removeEventListener(\"touchend\", handleDocumentTouchEnd)\n         document.removeEventListener(\"touchcancel\", handleDocumentTouchEnd)\n      }\n   }, [isScratching])\n\n   const handleMouseDown = () => setIsScratching(true)\n\n   const handleTouchStart = () => setIsScratching(true)\n\n   const scratch = (clientX: number, clientY: number) => {\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext(\"2d\")\n      if (canvas && ctx) {\n         const rect = canvas.getBoundingClientRect()\n         const x = clientX - rect.left + 16 // offset to position the scratched circle with cursor\n         const y = clientY - rect.top + 16\n         ctx.globalCompositeOperation = \"destination-out\"\n         ctx.beginPath()\n         ctx.arc(x, y, 30, 0, Math.PI * 2)\n         ctx.fill()\n      }\n   }\n\n   const checkCompletion = () => {\n      if (isComplete) return // Check if already completed\n\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext(\"2d\")\n      if (canvas && ctx) {\n         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n         const pixels = imageData.data\n         const totalPixels = pixels.length / 4\n         let clearPixels = 0\n\n         for (let i = 3; i < pixels.length; i += 4) {\n            if (pixels[i] === 0) clearPixels++\n         }\n\n         const percentage = (clearPixels / totalPixels) * 100\n\n         if (percentage >= minScratchPercentage) {\n            setIsComplete(true) // Set complete flag\n            ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvas to reveal everything\n            startAnimation()\n            if (onComplete) onComplete()\n         }\n      }\n   }\n\n   const startAnimation = () => {\n      controls.start({\n         scale: [1, 1.5, 1],\n         rotate: [0, 10, -10, 10, -10, 0],\n         transition: { duration: 0.5 },\n      })\n   }\n\n   return (\n      <motion.div\n         className={ny(\"relative select-none\", className)}\n         style={{\n            width,\n            height,\n            cursor:\n               \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto\",\n         }}\n         animate={controls}\n      >\n         <canvas\n            ref={canvasRef}\n            width={width}\n            height={height}\n            className=\"absolute left-0 top-0\"\n            onMouseDown={handleMouseDown}\n            onTouchStart={handleTouchStart}\n         ></canvas>\n         {children}\n      </motion.div>\n   )\n}\n\nexport default ScratchToReveal\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/script-copy-btn-demo.json b/apps/web/public/r/styles/miami/script-copy-btn-demo.json
new file mode 100644
index 00000000..15ad6d51
--- /dev/null
+++ b/apps/web/public/r/styles/miami/script-copy-btn-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "script-copy-btn-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/script-copy-btn-demo.tsx",
+      "content": "import { ScriptCopyBtn } from \"~/registry/miami/ui/script-copy-btn\"\n\nexport default function ScriptCopyBtnDemo() {\n   const customCommandMap = {\n      npm: \"npm run nyxb add button\",\n      yarn: \"yarn nyxb add button\",\n      pnpm: \"pnpm dlx nyxb@latest add button\",\n      bun: \"bun x nyxb@latest add button\",\n   }\n   return (\n      <ScriptCopyBtn\n         showMultiplePackageOptions={true}\n         codeLanguage=\"shell\"\n         lightTheme=\"nord\"\n         darkTheme=\"vitesse-dark\"\n         commandMap={customCommandMap}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/script-copy-btn.json b/apps/web/public/r/styles/miami/script-copy-btn.json
new file mode 100644
index 00000000..022a0ced
--- /dev/null
+++ b/apps/web/public/r/styles/miami/script-copy-btn.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "script-copy-btn",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion",
+    "shiki",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "ui/script-copy-btn.tsx",
+      "content": "\"use client\"\n\nimport { Check, Copy } from \"lucide-react\"\nimport { motion } from \"motion/react\"\nimport { useTheme } from \"next-themes\"\nimport { type HTMLAttributes, useEffect, useState } from \"react\"\nimport { ny } from \"~/registry/miami/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\n\ninterface ScriptCopyBtnProps extends HTMLAttributes<HTMLDivElement> {\n   showMultiplePackageOptions?: boolean\n   codeLanguage: string\n   lightTheme: string\n   darkTheme: string\n   commandMap: Record<string, string>\n   className?: string\n}\n\nexport function ScriptCopyBtn({\n   showMultiplePackageOptions = true,\n   codeLanguage,\n   lightTheme,\n   darkTheme,\n   commandMap,\n   className,\n}: ScriptCopyBtnProps) {\n   const packageManagers = Object.keys(commandMap)\n   const [packageManager, setPackageManager] = useState(packageManagers[0])\n   const [copied, setCopied] = useState(false)\n   const [highlightedCode, setHighlightedCode] = useState(\"\")\n   const { theme } = useTheme()\n   const command = commandMap[packageManager]\n\n   useEffect(() => {\n      async function loadHighlightedCode() {\n         try {\n            const { codeToHtml } = await import(\"shiki\")\n            const highlighted = await codeToHtml(command, {\n               lang: codeLanguage,\n               themes: {\n                  light: lightTheme,\n                  dark: darkTheme,\n               },\n               defaultColor: theme === \"dark\" ? \"dark\" : \"light\",\n            })\n            setHighlightedCode(highlighted)\n         } catch (error) {\n            console.error(\"Error highlighting code:\", error)\n            setHighlightedCode(`<pre>${command}</pre>`)\n         }\n      }\n\n      loadHighlightedCode()\n   }, [command, theme, codeLanguage, lightTheme, darkTheme])\n\n   const copyToClipboard = () => {\n      navigator.clipboard.writeText(command)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n   }\n\n   return (\n      <div\n         className={ny(\n            \"mx-auto flex max-w-md items-center justify-center\",\n            className,\n         )}\n      >\n         <div className=\"w-full space-y-2\">\n            <div className=\"mb-2 flex items-center justify-between\">\n               {showMultiplePackageOptions && (\n                  <div className=\"relative\">\n                     <div className=\"inline-flex overflow-hidden rounded-md border border-border text-xs\">\n                        {packageManagers.map((pm, index) => (\n                           <div key={pm} className=\"flex items-center\">\n                              {index > 0 && (\n                                 <div\n                                    className=\"h-4 w-px bg-border\"\n                                    aria-hidden=\"true\"\n                                 />\n                              )}\n                              <Button\n                                 variant=\"ghost\"\n                                 size=\"sm\"\n                                 className={`relative rounded-none bg-background px-2 py-1 hover:bg-background ${\n                                    packageManager === pm\n                                       ? \"text-primary\"\n                                       : \"text-muted-foreground\"\n                                 }`}\n                                 onClick={() => setPackageManager(pm)}\n                              >\n                                 {pm}\n                                 {packageManager === pm && (\n                                    <motion.div\n                                       className=\"absolute inset-x-0 bottom-[1px] mx-auto h-0.5 w-[90%] bg-primary\"\n                                       layoutId=\"activeTab\"\n                                       initial={false}\n                                       transition={{\n                                          type: \"spring\",\n                                          stiffness: 500,\n                                          damping: 30,\n                                       }}\n                                    />\n                                 )}\n                              </Button>\n                           </div>\n                        ))}\n                     </div>\n                  </div>\n               )}\n            </div>\n            <div className=\"relative flex items-center\">\n               <div className=\"min-w-[300px] grow font-mono\">\n                  {highlightedCode ? (\n                     <div\n                        className={`[&>pre]:overflow-x-auto [&>pre]:rounded-md [&>pre]:p-2 [&>pre]:px-4 [&>pre]:font-mono ${\n                           theme === \"dark\" ? \"dark\" : \"light\"\n                        }`}\n                        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n                     />\n                  ) : (\n                     <pre className=\"rounded-md border border-border bg-white p-2 px-4 font-mono dark:bg-black\">\n                        {command}\n                     </pre>\n                  )}\n               </div>\n               <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  className=\"relative ml-2 rounded-md\"\n                  onClick={copyToClipboard}\n                  aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n               >\n                  <span className=\"sr-only\">{copied ? \"Copied\" : \"Copy\"}</span>\n                  <Copy\n                     className={`h-4 w-4 transition-all duration-300 ${\n                        copied ? \"scale-0\" : \"scale-100\"\n                     }`}\n                  />\n                  <Check\n                     className={`absolute inset-0 m-auto h-4 w-4 transition-all duration-300 ${\n                        copied ? \"scale-100\" : \"scale-0\"\n                     }`}\n                  />\n               </Button>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/scroll-area-demo.json b/apps/web/public/r/styles/miami/scroll-area-demo.json
index fe2d4a3e..b1984752 100644
--- a/apps/web/public/r/styles/miami/scroll-area-demo.json
+++ b/apps/web/public/r/styles/miami/scroll-area-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-area-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "scroll-area"
   ],
   "files": [
     {
-      "path": "example/scroll-area-demo.tsx",
-      "content": "import * as React from 'react'\n\nimport { ScrollArea } from '~/registry/miami/ui/scroll-area'\nimport { Separator } from '~/registry/miami/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n   (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n\nexport default function ScrollAreaDemo() {\n   return (\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n         <div className=\"p-4\">\n            <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n            {tags.map(tag => (\n               <>\n                  <div key={tag} className=\"text-sm\">\n                     {tag}\n                  </div>\n                  <Separator className=\"my-2\" />\n               </>\n            ))}\n         </div>\n      </ScrollArea>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"~/registry/miami/ui/scroll-area\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n   (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n\nexport default function ScrollAreaDemo() {\n   return (\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n         <div className=\"p-4\">\n            <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n            {tags.map((tag) => (\n               <>\n                  <div key={tag} className=\"text-sm\">\n                     {tag}\n                  </div>\n                  <Separator className=\"my-2\" />\n               </>\n            ))}\n         </div>\n      </ScrollArea>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/scroll-area-horizontal-demo.json b/apps/web/public/r/styles/miami/scroll-area-horizontal-demo.json
index e7908fd7..8a8e7bfc 100644
--- a/apps/web/public/r/styles/miami/scroll-area-horizontal-demo.json
+++ b/apps/web/public/r/styles/miami/scroll-area-horizontal-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-area-horizontal-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "scroll-area"
   ],
   "files": [
     {
-      "path": "example/scroll-area-horizontal-demo.tsx",
-      "content": "import * as React from 'react'\nimport Image from 'next/image'\n\nimport { ScrollArea, ScrollBar } from '~/registry/miami/ui/scroll-area'\n\nexport interface Artwork {\n   artist: string\n   art: string\n}\n\nexport const works: Artwork[] = [\n   {\n      artist: 'Ornella Binni',\n      art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n   },\n   {\n      artist: 'Tom Byrom',\n      art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n   },\n   {\n      artist: 'Vladimir Malyavko',\n      art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n   },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n   return (\n      <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n         <div className=\"flex w-max space-x-4 p-4\">\n            {works.map(artwork => (\n               <figure key={artwork.artist} className=\"shrink-0\">\n                  <div className=\"overflow-hidden rounded-md\">\n                     <Image\n                        src={artwork.art}\n                        alt={`Photo by ${artwork.artist}`}\n                        className=\"aspect-[3/4] size-fit object-cover\"\n                        width={300}\n                        height={400}\n                     />\n                  </div>\n                  <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                     Photo by\n                     {' '}\n                     <span className=\"text-foreground font-semibold\">\n                        {artwork.artist}\n                     </span>\n                  </figcaption>\n               </figure>\n            ))}\n         </div>\n         <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/scroll-area-horizontal-demo.tsx",
+      "content": "import Image from \"next/image\"\nimport * as React from \"react\"\n\nimport { ScrollArea, ScrollBar } from \"~/registry/miami/ui/scroll-area\"\n\nexport interface Artwork {\n   artist: string\n   art: string\n}\n\nexport const works: Artwork[] = [\n   {\n      artist: \"Ornella Binni\",\n      art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n   },\n   {\n      artist: \"Tom Byrom\",\n      art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n   },\n   {\n      artist: \"Vladimir Malyavko\",\n      art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n   },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n   return (\n      <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n         <div className=\"flex w-max space-x-4 p-4\">\n            {works.map((artwork) => (\n               <figure key={artwork.artist} className=\"shrink-0\">\n                  <div className=\"overflow-hidden rounded-md\">\n                     <Image\n                        src={artwork.art}\n                        alt={`Photo by ${artwork.artist}`}\n                        className=\"aspect-[3/4] size-fit object-cover\"\n                        width={300}\n                        height={400}\n                     />\n                  </div>\n                  <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                     Photo by{\" \"}\n                     <span className=\"text-foreground font-semibold\">\n                        {artwork.artist}\n                     </span>\n                  </figcaption>\n               </figure>\n            ))}\n         </div>\n         <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/scroll-area.json b/apps/web/public/r/styles/miami/scroll-area.json
index 029fa7dd..25dc8051 100644
--- a/apps/web/public/r/styles/miami/scroll-area.json
+++ b/apps/web/public/r/styles/miami/scroll-area.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-area",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-scroll-area"
   ],
   "files": [
     {
       "path": "ui/scroll-area.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\n\nimport { ny } from '~/lib/utils'\n\nconst ScrollArea = React.forwardRef<\n   React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={ny('relative overflow-hidden', className)}\n      {...props}\n   >\n      <ScrollAreaPrimitive.Viewport className=\"size-full rounded-[inherit]\">\n         {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n   </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n   <ScrollAreaPrimitive.ScrollAreaScrollbar\n      ref={ref}\n      orientation={orientation}\n      className={ny(\n         'flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n         && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n         && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         className,\n      )}\n      {...props}\n   >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-border relative flex-1 rounded-full\" />\n   </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n   React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={ny(\"relative overflow-hidden\", className)}\n      {...props}\n   >\n      <ScrollAreaPrimitive.Viewport className=\"size-full rounded-[inherit]\">\n         {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n   </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n   React.ComponentPropsWithoutRef<\n      typeof ScrollAreaPrimitive.ScrollAreaScrollbar\n   >\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n   <ScrollAreaPrimitive.ScrollAreaScrollbar\n      ref={ref}\n      orientation={orientation}\n      className={ny(\n         \"flex touch-none select-none transition-colors\",\n         orientation === \"vertical\" &&\n            \"h-full w-2.5 border-l border-l-transparent p-px\",\n         orientation === \"horizontal\" &&\n            \"h-2.5 flex-col border-t border-t-transparent p-px\",\n         className,\n      )}\n      {...props}\n   >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-border relative flex-1 rounded-full\" />\n   </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/scroll-based-velocity-demo.json b/apps/web/public/r/styles/miami/scroll-based-velocity-demo.json
index 25b33a97..c5535f97 100644
--- a/apps/web/public/r/styles/miami/scroll-based-velocity-demo.json
+++ b/apps/web/public/r/styles/miami/scroll-based-velocity-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-based-velocity-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/scroll-based-velocity-demo.tsx",
-      "content": "import { VelocityScroll } from '~/registry/miami/ui/scroll-based-velocity'\n\nexport default function ScrollBasedVelocityDemo() {\n   return (\n      <VelocityScroll\n         text=\"Velocity Scroll\"\n         default_velocity={5}\n         className=\"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/scroll-based-velocity-demo.tsx",
+      "content": "import { VelocityScroll } from \"~/registry/miami/ui/scroll-based-velocity\"\n\nexport default function ScrollBasedVelocityDemo() {\n   return (\n      <VelocityScroll\n         text=\"Velocity Scroll\"\n         default_velocity={5}\n         className=\"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/scroll-based-velocity.json b/apps/web/public/r/styles/miami/scroll-based-velocity.json
index 714beeb9..2704169f 100644
--- a/apps/web/public/r/styles/miami/scroll-based-velocity.json
+++ b/apps/web/public/r/styles/miami/scroll-based-velocity.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-based-velocity",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/scroll-based-velocity.tsx",
-      "content": "'use client'\n\nimport { wrap } from '@motionone/utils'\nimport {\n   motion,\n   useAnimationFrame,\n   useMotionValue,\n   useScroll,\n   useSpring,\n   useTransform,\n   useVelocity,\n} from 'framer-motion'\nimport React, { useEffect, useRef, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface VelocityScrollProps {\n   text: string\n   default_velocity?: number\n   className?: string\n}\n\ninterface ParallaxProps {\n   children: string\n   baseVelocity: number\n   className?: string\n}\n\nexport function VelocityScroll({\n   text,\n   default_velocity = 5,\n   className,\n}: VelocityScrollProps) {\n   function ParallaxText({\n      children,\n      baseVelocity = 100,\n      className,\n   }: ParallaxProps) {\n      const baseX = useMotionValue(0)\n      const { scrollY } = useScroll()\n      const scrollVelocity = useVelocity(scrollY)\n      const smoothVelocity = useSpring(scrollVelocity, {\n         damping: 50,\n         stiffness: 400,\n      })\n\n      const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {\n         clamp: false,\n      })\n\n      const [repetitions, setRepetitions] = useState(1)\n      const containerRef = useRef<HTMLDivElement>(null)\n      const textRef = useRef<HTMLSpanElement>(null)\n\n      useEffect(() => {\n         const calculateRepetitions = () => {\n            if (containerRef.current && textRef.current) {\n               const containerWidth = containerRef.current.offsetWidth\n               const textWidth = textRef.current.offsetWidth\n               const newRepetitions = Math.ceil(containerWidth / textWidth) + 2\n               setRepetitions(newRepetitions)\n            }\n         }\n\n         calculateRepetitions()\n\n         window.addEventListener('resize', calculateRepetitions)\n         return () => window.removeEventListener('resize', calculateRepetitions)\n      }, [children])\n\n      const x = useTransform(baseX, v => `${wrap(-100 / repetitions, 0, v)}%`)\n\n      const directionFactor = React.useRef<number>(1)\n      useAnimationFrame((t, delta) => {\n         let moveBy = directionFactor.current * baseVelocity * (delta / 1000)\n\n         if (velocityFactor.get() < 0)\n            directionFactor.current = -1\n         else if (velocityFactor.get() > 0)\n            directionFactor.current = 1\n\n         moveBy += directionFactor.current * moveBy * velocityFactor.get()\n\n         baseX.set(baseX.get() + moveBy)\n      })\n\n      return (\n         <div\n            className=\"w-full overflow-hidden whitespace-nowrap\"\n            ref={containerRef}\n         >\n            <motion.div className={ny('inline-block', className)} style={{ x }}>\n               {Array.from({ length: repetitions }).map((_, i) => (\n                  <span key={i} ref={i === 0 ? textRef : null}>\n                     {children}\n                     {' '}\n                  </span>\n               ))}\n            </motion.div>\n         </div>\n      )\n   }\n\n   return (\n      <section className=\"relative w-full\">\n         <ParallaxText baseVelocity={default_velocity} className={className}>\n            {text}\n         </ParallaxText>\n         <ParallaxText baseVelocity={-default_velocity} className={className}>\n            {text}\n         </ParallaxText>\n      </section>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { wrap } from \"@motionone/utils\"\nimport {\n   motion,\n   useAnimationFrame,\n   useMotionValue,\n   useScroll,\n   useSpring,\n   useTransform,\n   useVelocity,\n} from \"framer-motion\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface VelocityScrollProps {\n   text: string\n   default_velocity?: number\n   className?: string\n}\n\ninterface ParallaxProps {\n   children: string\n   baseVelocity: number\n   className?: string\n}\n\nexport function VelocityScroll({\n   text,\n   default_velocity = 5,\n   className,\n}: VelocityScrollProps) {\n   function ParallaxText({\n      children,\n      baseVelocity = 100,\n      className,\n   }: ParallaxProps) {\n      const baseX = useMotionValue(0)\n      const { scrollY } = useScroll()\n      const scrollVelocity = useVelocity(scrollY)\n      const smoothVelocity = useSpring(scrollVelocity, {\n         damping: 50,\n         stiffness: 400,\n      })\n\n      const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {\n         clamp: false,\n      })\n\n      const [repetitions, setRepetitions] = useState(1)\n      const containerRef = useRef<HTMLDivElement>(null)\n      const textRef = useRef<HTMLSpanElement>(null)\n\n      useEffect(() => {\n         const calculateRepetitions = () => {\n            if (containerRef.current && textRef.current) {\n               const containerWidth = containerRef.current.offsetWidth\n               const textWidth = textRef.current.offsetWidth\n               const newRepetitions = Math.ceil(containerWidth / textWidth) + 2\n               setRepetitions(newRepetitions)\n            }\n         }\n\n         calculateRepetitions()\n\n         window.addEventListener(\"resize\", calculateRepetitions)\n         return () => window.removeEventListener(\"resize\", calculateRepetitions)\n      }, [children])\n\n      const x = useTransform(baseX, (v) => `${wrap(-100 / repetitions, 0, v)}%`)\n\n      const directionFactor = React.useRef<number>(1)\n      useAnimationFrame((t, delta) => {\n         let moveBy = directionFactor.current * baseVelocity * (delta / 1000)\n\n         if (velocityFactor.get() < 0) directionFactor.current = -1\n         else if (velocityFactor.get() > 0) directionFactor.current = 1\n\n         moveBy += directionFactor.current * moveBy * velocityFactor.get()\n\n         baseX.set(baseX.get() + moveBy)\n      })\n\n      return (\n         <div\n            className=\"w-full overflow-hidden whitespace-nowrap\"\n            ref={containerRef}\n         >\n            <motion.div className={ny(\"inline-block\", className)} style={{ x }}>\n               {Array.from({ length: repetitions }).map((_, i) => (\n                  <span key={i} ref={i === 0 ? textRef : null}>\n                     {children}{\" \"}\n                  </span>\n               ))}\n            </motion.div>\n         </div>\n      )\n   }\n\n   return (\n      <section className=\"relative w-full\">\n         <ParallaxText baseVelocity={default_velocity} className={className}>\n            {text}\n         </ParallaxText>\n         <ParallaxText baseVelocity={-default_velocity} className={className}>\n            {text}\n         </ParallaxText>\n      </section>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/scroll-progress-demo.json b/apps/web/public/r/styles/miami/scroll-progress-demo.json
index 29486ece..9eb6648a 100644
--- a/apps/web/public/r/styles/miami/scroll-progress-demo.json
+++ b/apps/web/public/r/styles/miami/scroll-progress-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-progress-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/scroll-progress-demo.tsx",
-      "content": "import ScrollProgress from '~/registry/miami/ui/scroll-progress'\n\nconst dummyContent = Array.from({ length: 10 }, (_, i) => (\n   <p key={i}>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam\n      lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra\n      nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget\n      libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut\n      porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies\n      a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n   </p>\n))\n\nfunction ScrollProgressDemo() {\n   return (\n      <div>\n         <ScrollProgress className=\"top-[65px]\" />\n         <strong>Note: The scroll progress is shown below the navbar of the page.</strong>\n         {dummyContent}\n      </div>\n   )\n}\n\nexport default ScrollProgressDemo\n",
-      "type": "registry:component",
+      "path": "examples/scroll-progress-demo.tsx",
+      "content": "import ScrollProgress from \"~/registry/miami/ui/scroll-progress\"\n\nconst dummyContent = Array.from({ length: 10 }, (_, i) => (\n   <p key={i}>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam\n      lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra\n      nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam\n      eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue\n      enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu\n      vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur\n      adipiscing elit.\n   </p>\n))\n\nfunction ScrollProgressDemo() {\n   return (\n      <div>\n         <ScrollProgress className=\"top-[65px]\" />\n         <strong>\n            Note: The scroll progress is shown below the navbar of the page.\n         </strong>\n         {dummyContent}\n      </div>\n   )\n}\n\nexport default ScrollProgressDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/scroll-progress.json b/apps/web/public/r/styles/miami/scroll-progress.json
index f44f124e..f16be29a 100644
--- a/apps/web/public/r/styles/miami/scroll-progress.json
+++ b/apps/web/public/r/styles/miami/scroll-progress.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "scroll-progress",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/scroll-progress.tsx",
-      "content": "import { motion, useScroll, useSpring } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface ScrollProgressProps {\n   className?: string\n}\n\nexport default function ScrollProgress({\n   className,\n}: ScrollProgressProps) {\n   const { scrollYProgress } = useScroll()\n\n   const scaleX = useSpring(scrollYProgress, {\n      stiffness: 200,\n      damping: 50,\n      restDelta: 0.001,\n   })\n\n   return (\n      <motion.div\n         className={ny('fixed inset-x-0 top-0 z-[1000] h-1 origin-left bg-gradient-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]', className)}\n         style={{\n            scaleX,\n         }}\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "content": "import { motion, useScroll, useSpring } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface ScrollProgressProps {\n   className?: string\n}\n\nexport default function ScrollProgress({ className }: ScrollProgressProps) {\n   const { scrollYProgress } = useScroll()\n\n   const scaleX = useSpring(scrollYProgress, {\n      stiffness: 200,\n      damping: 50,\n      restDelta: 0.001,\n   })\n\n   return (\n      <motion.div\n         className={ny(\n            \"fixed inset-x-0 top-0 z-[1000] h-1 origin-left bg-gradient-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]\",\n            className,\n         )}\n         style={{\n            scaleX,\n         }}\n      />\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/select-demo.json b/apps/web/public/r/styles/miami/select-demo.json
index 32bc85c5..587b6605 100644
--- a/apps/web/public/r/styles/miami/select-demo.json
+++ b/apps/web/public/r/styles/miami/select-demo.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "select-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "select"
   ],
   "files": [
     {
-      "path": "example/select-demo.tsx",
-      "content": "import * as React from 'react'\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/miami/ui/select'\n\nexport default function SelectDemo() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[180px]\">\n            <SelectValue placeholder=\"Select a fruit\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>Fruits</SelectLabel>\n               <SelectItem value=\"apple\">Apple</SelectItem>\n               <SelectItem value=\"banana\">Banana</SelectItem>\n               <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n               <SelectItem value=\"grapes\">Grapes</SelectItem>\n               <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
+      "path": "examples/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/miami/ui/select\"\n\nexport default function SelectDemo() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[180px]\">\n            <SelectValue placeholder=\"Select a fruit\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>Fruits</SelectLabel>\n               <SelectItem value=\"apple\">Apple</SelectItem>\n               <SelectItem value=\"banana\">Banana</SelectItem>\n               <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n               <SelectItem value=\"grapes\">Grapes</SelectItem>\n               <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/select-form.json b/apps/web/public/r/styles/miami/select-form.json
index adecf256..8c1749b6 100644
--- a/apps/web/public/r/styles/miami/select-form.json
+++ b/apps/web/public/r/styles/miami/select-form.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "select-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "select"
   ],
   "files": [
     {
-      "path": "example/select-form.tsx",
-      "content": "'use client'\n\nimport Link from 'next/link'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/miami/ui/form'\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/miami/ui/select'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst FormSchema = z.object({\n   email: z\n      .string({\n         required_error: 'Please select an email to display.',\n      })\n      .email(),\n})\n\nexport default function SelectForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"email\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Email</FormLabel>\n                     <Select onValueChange={field.onChange} defaultValue={field.value}>\n                        <FormControl>\n                           <SelectTrigger>\n                              <SelectValue placeholder=\"Select a verified email to display\" />\n                           </SelectTrigger>\n                        </FormControl>\n                        <SelectContent>\n                           <SelectItem value=\"m@example.com\">m@example.com</SelectItem>\n                           <SelectItem value=\"m@google.com\">m@google.com</SelectItem>\n                           <SelectItem value=\"m@support.com\">m@support.com</SelectItem>\n                        </SelectContent>\n                     </Select>\n                     <FormDescription>\n                        You can manage email addresses in your\n                        {' '}\n                        <Link href=\"/examples/forms\">email settings</Link>\n                        .\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "path": "examples/select-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport Link from \"next/link\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/miami/ui/form\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/miami/ui/select\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst FormSchema = z.object({\n   email: z\n      .string({\n         required_error: \"Please select an email to display.\",\n      })\n      .email(),\n})\n\nexport default function SelectForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"email\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Email</FormLabel>\n                     <Select\n                        onValueChange={field.onChange}\n                        defaultValue={field.value}\n                     >\n                        <FormControl>\n                           <SelectTrigger>\n                              <SelectValue placeholder=\"Select a verified email to display\" />\n                           </SelectTrigger>\n                        </FormControl>\n                        <SelectContent>\n                           <SelectItem value=\"m@example.com\">\n                              m@example.com\n                           </SelectItem>\n                           <SelectItem value=\"m@google.com\">\n                              m@google.com\n                           </SelectItem>\n                           <SelectItem value=\"m@support.com\">\n                              m@support.com\n                           </SelectItem>\n                        </SelectContent>\n                     </Select>\n                     <FormDescription>\n                        You can manage email addresses in your{\" \"}\n                        <Link href=\"/examples/forms\">email settings</Link>.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/select-scrollable.json b/apps/web/public/r/styles/miami/select-scrollable.json
index 1306cf8f..384d8133 100644
--- a/apps/web/public/r/styles/miami/select-scrollable.json
+++ b/apps/web/public/r/styles/miami/select-scrollable.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "select-scrollable",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "select"
   ],
   "files": [
     {
-      "path": "example/select-scrollable.tsx",
-      "content": "import * as React from 'react'\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from '~/registry/miami/ui/select'\n\nexport default function SelectScrollable() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[280px]\">\n            <SelectValue placeholder=\"Select a timezone\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>North America</SelectLabel>\n               <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n               <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n               <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n               <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n               <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n               <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Europe & Africa</SelectLabel>\n               <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n               <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n               <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n               <SelectItem value=\"west\">\n                  Western European Summer Time (WEST)\n               </SelectItem>\n               <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n               <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Asia</SelectLabel>\n               <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n               <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n               <SelectItem value=\"cst_china\">China Standard Time (CST)</SelectItem>\n               <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n               <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n               <SelectItem value=\"ist_indonesia\">\n                  Indonesia Central Standard Time (WITA)\n               </SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Australia & Pacific</SelectLabel>\n               <SelectItem value=\"awst\">\n                  Australian Western Standard Time (AWST)\n               </SelectItem>\n               <SelectItem value=\"acst\">\n                  Australian Central Standard Time (ACST)\n               </SelectItem>\n               <SelectItem value=\"aest\">\n                  Australian Eastern Standard Time (AEST)\n               </SelectItem>\n               <SelectItem value=\"nzst\">New Zealand Standard Time (NZST)</SelectItem>\n               <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>South America</SelectLabel>\n               <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n               <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n               <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n               <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
+      "path": "examples/select-scrollable.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/miami/ui/select\"\n\nexport default function SelectScrollable() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[280px]\">\n            <SelectValue placeholder=\"Select a timezone\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>North America</SelectLabel>\n               <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n               <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n               <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n               <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n               <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n               <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Europe & Africa</SelectLabel>\n               <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n               <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n               <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n               <SelectItem value=\"west\">\n                  Western European Summer Time (WEST)\n               </SelectItem>\n               <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n               <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Asia</SelectLabel>\n               <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n               <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n               <SelectItem value=\"cst_china\">\n                  China Standard Time (CST)\n               </SelectItem>\n               <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n               <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n               <SelectItem value=\"ist_indonesia\">\n                  Indonesia Central Standard Time (WITA)\n               </SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Australia & Pacific</SelectLabel>\n               <SelectItem value=\"awst\">\n                  Australian Western Standard Time (AWST)\n               </SelectItem>\n               <SelectItem value=\"acst\">\n                  Australian Central Standard Time (ACST)\n               </SelectItem>\n               <SelectItem value=\"aest\">\n                  Australian Eastern Standard Time (AEST)\n               </SelectItem>\n               <SelectItem value=\"nzst\">\n                  New Zealand Standard Time (NZST)\n               </SelectItem>\n               <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>South America</SelectLabel>\n               <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n               <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n               <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n               <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/select.json b/apps/web/public/r/styles/miami/select.json
index 3cc5d647..12f79438 100644
--- a/apps/web/public/r/styles/miami/select.json
+++ b/apps/web/public/r/styles/miami/select.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "select",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-select"
   ],
   "files": [
     {
       "path": "ui/select.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   CaretSortIcon,\n   CheckIcon,\n   ChevronDownIcon,\n   ChevronUpIcon,\n} from '@radix-ui/react-icons'\nimport * as SelectPrimitive from '@radix-ui/react-select'\n\nimport { ny } from '~/lib/utils'\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <SelectPrimitive.Trigger\n      ref={ref}\n      className={ny(\n         'border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-left text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left',\n         className,\n      )}\n      onPointerDown={(e) => {\n         if (e.pointerType === 'touch')\n            e.preventDefault()\n      }}\n      {...props}\n   >\n      {children}\n      <SelectPrimitive.Icon asChild>\n         <CaretSortIcon className=\"size-4 shrink-0 opacity-50\" />\n      </SelectPrimitive.Icon>\n   </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.ScrollUpButton\n      ref={ref}\n      className={ny(\n         'flex cursor-default items-center justify-center py-1',\n         className,\n      )}\n      {...props}\n   >\n      <ChevronUpIcon />\n   </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.ScrollDownButton\n      ref={ref}\n      className={ny(\n         'flex cursor-default items-center justify-center py-1',\n         className,\n      )}\n      {...props}\n   >\n      <ChevronDownIcon />\n   </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName\n  = SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n   <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n         ref={ref}\n         className={ny(\n            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',\n            position === 'popper'\n            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n            className,\n         )}\n         position={position}\n         {...props}\n      >\n         <SelectScrollUpButton />\n         <SelectPrimitive.Viewport\n            className={ny(\n               'p-1',\n               position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',\n            )}\n         >\n            {children}\n         </SelectPrimitive.Viewport>\n         <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n   </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.Label\n      ref={ref}\n      className={ny('px-2 py-1.5 text-sm font-semibold', className)}\n      {...props}\n   />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n   <SelectPrimitive.Item\n      ref={ref}\n      className={ny(\n         'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n         <SelectPrimitive.ItemIndicator>\n            <CheckIcon className=\"size-4\" />\n         </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n   </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.Separator\n      ref={ref}\n      className={ny('bg-muted -mx-1 my-1 h-px', className)}\n      {...props}\n   />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n   Select,\n   SelectGroup,\n   SelectValue,\n   SelectTrigger,\n   SelectContent,\n   SelectLabel,\n   SelectItem,\n   SelectSeparator,\n   SelectScrollUpButton,\n   SelectScrollDownButton,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport {\n   CaretSortIcon,\n   CheckIcon,\n   ChevronDownIcon,\n   ChevronUpIcon,\n} from \"@radix-ui/react-icons\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <SelectPrimitive.Trigger\n      ref={ref}\n      className={ny(\n         \"border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-left text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left\",\n         className,\n      )}\n      onPointerDown={(e) => {\n         if (e.pointerType === \"touch\") e.preventDefault()\n      }}\n      {...props}\n   >\n      {children}\n      <SelectPrimitive.Icon asChild>\n         <CaretSortIcon className=\"size-4 shrink-0 opacity-50\" />\n      </SelectPrimitive.Icon>\n   </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.ScrollUpButton\n      ref={ref}\n      className={ny(\n         \"flex cursor-default items-center justify-center py-1\",\n         className,\n      )}\n      {...props}\n   >\n      <ChevronUpIcon />\n   </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.ScrollDownButton\n      ref={ref}\n      className={ny(\n         \"flex cursor-default items-center justify-center py-1\",\n         className,\n      )}\n      {...props}\n   >\n      <ChevronDownIcon />\n   </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n   SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n   <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n         ref={ref}\n         className={ny(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md\",\n            position === \"popper\" &&\n               \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n            className,\n         )}\n         position={position}\n         {...props}\n      >\n         <SelectScrollUpButton />\n         <SelectPrimitive.Viewport\n            className={ny(\n               \"p-1\",\n               position === \"popper\" &&\n                  \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n            )}\n         >\n            {children}\n         </SelectPrimitive.Viewport>\n         <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n   </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.Label\n      ref={ref}\n      className={ny(\"px-2 py-1.5 text-sm font-semibold\", className)}\n      {...props}\n   />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n   <SelectPrimitive.Item\n      ref={ref}\n      className={ny(\n         \"focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n         <SelectPrimitive.ItemIndicator>\n            <CheckIcon className=\"size-4\" />\n         </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n   </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.Separator\n      ref={ref}\n      className={ny(\"bg-muted -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n   Select,\n   SelectGroup,\n   SelectValue,\n   SelectTrigger,\n   SelectContent,\n   SelectLabel,\n   SelectItem,\n   SelectSeparator,\n   SelectScrollUpButton,\n   SelectScrollDownButton,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/separate-away-demo.json b/apps/web/public/r/styles/miami/separate-away-demo.json
index 1d0360ae..8088b6eb 100644
--- a/apps/web/public/r/styles/miami/separate-away-demo.json
+++ b/apps/web/public/r/styles/miami/separate-away-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "separate-away-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/separate-away-demo.tsx",
-      "content": "import { SeparateAway } from '~/registry/miami/ui/separate-away'\n\nexport default async function SeparateAwayDemo() {\n   return (\n      <SeparateAway\n         upper_text=\"Separate\"\n         lower_text=\"Away\"\n         duration={1.5}\n         hidden_opacity={0}\n         visible_opacity={1}\n         className=\"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/separate-away-demo.tsx",
+      "content": "import { SeparateAway } from \"~/registry/miami/ui/separate-away\"\n\nexport default async function SeparateAwayDemo() {\n   return (\n      <SeparateAway\n         upper_text=\"Separate\"\n         lower_text=\"Away\"\n         duration={1.5}\n         hidden_opacity={0}\n         visible_opacity={1}\n         className=\"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/separate-away.json b/apps/web/public/r/styles/miami/separate-away.json
index e6824739..6c12480e 100644
--- a/apps/web/public/r/styles/miami/separate-away.json
+++ b/apps/web/public/r/styles/miami/separate-away.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "separate-away",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/separate-away.tsx",
-      "content": "'use client'\n\nimport { motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface SeparateAwayProps {\n   upper_text: string\n   lower_text: string\n   duration?: number\n   hidden_opacity?: number\n   visible_opacity?: number\n   className?: string\n}\n\nexport function SeparateAway({\n   upper_text,\n   lower_text,\n   duration = 1.5,\n   hidden_opacity = 0,\n   visible_opacity = 1,\n   className,\n}: SeparateAwayProps) {\n   const separate = {\n      hidden: { opacity: hidden_opacity, y: 0 },\n      visible: (custom: number) => ({\n         opacity: visible_opacity,\n         y: custom * 5,\n         transition: { duration },\n      }),\n   }\n\n   return (\n      <div>\n         <motion.h1\n            custom={-1}\n            variants={separate}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className={ny(className)}\n         >\n            {upper_text}\n         </motion.h1>\n         <motion.h1\n            custom={1}\n            variants={separate}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className={ny(className)}\n         >\n            {lower_text}\n         </motion.h1>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface SeparateAwayProps {\n   upper_text: string\n   lower_text: string\n   duration?: number\n   hidden_opacity?: number\n   visible_opacity?: number\n   className?: string\n}\n\nexport function SeparateAway({\n   upper_text,\n   lower_text,\n   duration = 1.5,\n   hidden_opacity = 0,\n   visible_opacity = 1,\n   className,\n}: SeparateAwayProps) {\n   const separate = {\n      hidden: { opacity: hidden_opacity, y: 0 },\n      visible: (custom: number) => ({\n         opacity: visible_opacity,\n         y: custom * 5,\n         transition: { duration },\n      }),\n   }\n\n   return (\n      <div>\n         <motion.h1\n            custom={-1}\n            variants={separate}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className={ny(className)}\n         >\n            {upper_text}\n         </motion.h1>\n         <motion.h1\n            custom={1}\n            variants={separate}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className={ny(className)}\n         >\n            {lower_text}\n         </motion.h1>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/separator-demo.json b/apps/web/public/r/styles/miami/separator-demo.json
index 415edb89..98d0e78c 100644
--- a/apps/web/public/r/styles/miami/separator-demo.json
+++ b/apps/web/public/r/styles/miami/separator-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "separator-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/separator-demo.tsx",
-      "content": "import { Separator } from '~/registry/miami/ui/separator'\n\nexport default function SeparatorDemo() {\n   return (\n      <div>\n         <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n            <p className=\"text-muted-foreground text-sm\">\n               An open-source UI component library.\n            </p>\n         </div>\n         <Separator className=\"my-4\" />\n         <div className=\"flex h-5 items-center space-x-4 text-sm\">\n            <div>Blog</div>\n            <Separator orientation=\"vertical\" />\n            <div>Docs</div>\n            <Separator orientation=\"vertical\" />\n            <div>Source</div>\n         </div>\n      </div>\n   )\n}\n",
+      "path": "examples/separator-demo.tsx",
+      "content": "import { Separator } from \"~/registry/miami/ui/separator\"\n\nexport default function SeparatorDemo() {\n   return (\n      <div>\n         <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-medium leading-none\">\n               Radix Primitives\n            </h4>\n            <p className=\"text-muted-foreground text-sm\">\n               An open-source UI component library.\n            </p>\n         </div>\n         <Separator className=\"my-4\" />\n         <div className=\"flex h-5 items-center space-x-4 text-sm\">\n            <div>Blog</div>\n            <Separator orientation=\"vertical\" />\n            <div>Docs</div>\n            <Separator orientation=\"vertical\" />\n            <div>Source</div>\n         </div>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/separator.json b/apps/web/public/r/styles/miami/separator.json
index 0e66875c..f6056637 100644
--- a/apps/web/public/r/styles/miami/separator.json
+++ b/apps/web/public/r/styles/miami/separator.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "separator",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-separator"
   ],
   "files": [
     {
       "path": "ui/separator.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\n\nimport { ny } from '~/lib/utils'\n\nconst Separator = React.forwardRef<\n   React.ElementRef<typeof SeparatorPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n   (\n      { className, orientation = 'horizontal', decorative = true, ...props },\n      ref,\n   ) => (\n      <SeparatorPrimitive.Root\n         ref={ref}\n         decorative={decorative}\n         orientation={orientation}\n         className={ny(\n            'bg-border shrink-0',\n            orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n            className,\n         )}\n         {...props}\n      />\n   ),\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Separator = React.forwardRef<\n   React.ElementRef<typeof SeparatorPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n   (\n      { className, orientation = \"horizontal\", decorative = true, ...props },\n      ref,\n   ) => (\n      <SeparatorPrimitive.Root\n         ref={ref}\n         decorative={decorative}\n         orientation={orientation}\n         className={ny(\n            \"shrink-0 bg-border\",\n            orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n            className,\n         )}\n         {...props}\n      />\n   ),\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/sheet-demo.json b/apps/web/public/r/styles/miami/sheet-demo.json
index 5f9ce565..b5ea2c0b 100644
--- a/apps/web/public/r/styles/miami/sheet-demo.json
+++ b/apps/web/public/r/styles/miami/sheet-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sheet-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/sheet-demo.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport { Input } from '~/registry/miami/ui/input'\nimport { Label } from '~/registry/miami/ui/label'\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from '~/registry/miami/ui/sheet'\n\nexport default function SheetDemo() {\n   return (\n      <Sheet>\n         <SheetTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </SheetTrigger>\n         <SheetContent>\n            <SheetHeader>\n               <SheetTitle>Edit profile</SheetTitle>\n               <SheetDescription>\n                  Make changes to your profile here. Click save when you're done.\n               </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n               </div>\n            </div>\n            <SheetFooter>\n               <SheetClose asChild>\n                  <Button type=\"submit\">Save changes</Button>\n               </SheetClose>\n            </SheetFooter>\n         </SheetContent>\n      </Sheet>\n   )\n}\n",
+      "path": "examples/sheet-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from \"~/registry/miami/ui/sheet\"\n\nexport default function SheetDemo() {\n   return (\n      <Sheet>\n         <SheetTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </SheetTrigger>\n         <SheetContent>\n            <SheetHeader>\n               <SheetTitle>Edit profile</SheetTitle>\n               <SheetDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"@peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <SheetFooter>\n               <SheetClose asChild>\n                  <Button type=\"submit\">Save changes</Button>\n               </SheetClose>\n            </SheetFooter>\n         </SheetContent>\n      </Sheet>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/sheet-side.json b/apps/web/public/r/styles/miami/sheet-side.json
index 77529524..a3bcfeed 100644
--- a/apps/web/public/r/styles/miami/sheet-side.json
+++ b/apps/web/public/r/styles/miami/sheet-side.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sheet-side",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/sheet-side.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport { Input } from '~/registry/miami/ui/input'\nimport { Label } from '~/registry/miami/ui/label'\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from '~/registry/miami/ui/sheet'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n   return (\n      <div className=\"grid grid-cols-2 gap-2\">\n         {SHEET_SIDES.map(side => (\n            <Sheet key={side}>\n               <SheetTrigger asChild>\n                  <Button variant=\"outline\">{side}</Button>\n               </SheetTrigger>\n               <SheetContent side={side}>\n                  <SheetHeader>\n                     <SheetTitle>Edit profile</SheetTitle>\n                     <SheetDescription>\n                        Make changes to your profile here. Click save when you're done.\n                     </SheetDescription>\n                  </SheetHeader>\n                  <div className=\"grid gap-4 py-4\">\n                     <div className=\"grid grid-cols-4 items-center gap-4\">\n                        <Label htmlFor=\"name\" className=\"text-right\">\n                           Name\n                        </Label>\n                        <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n                     </div>\n                     <div className=\"grid grid-cols-4 items-center gap-4\">\n                        <Label htmlFor=\"username\" className=\"text-right\">\n                           Username\n                        </Label>\n                        <Input id=\"username\" value=\"~peduarte\" className=\"col-span-3\" />\n                     </div>\n                  </div>\n                  <SheetFooter>\n                     <SheetClose asChild>\n                        <Button type=\"submit\">Save changes</Button>\n                     </SheetClose>\n                  </SheetFooter>\n               </SheetContent>\n            </Sheet>\n         ))}\n      </div>\n   )\n}\n",
+      "path": "examples/sheet-side.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from \"~/registry/miami/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n   return (\n      <div className=\"grid grid-cols-2 gap-2\">\n         {SHEET_SIDES.map((side) => (\n            <Sheet key={side}>\n               <SheetTrigger asChild>\n                  <Button variant=\"outline\">{side}</Button>\n               </SheetTrigger>\n               <SheetContent side={side}>\n                  <SheetHeader>\n                     <SheetTitle>Edit profile</SheetTitle>\n                     <SheetDescription>\n                        Make changes to your profile here. Click save when\n                        you're done.\n                     </SheetDescription>\n                  </SheetHeader>\n                  <div className=\"grid gap-4 py-4\">\n                     <div className=\"grid grid-cols-4 items-center gap-4\">\n                        <Label htmlFor=\"name\" className=\"text-right\">\n                           Name\n                        </Label>\n                        <Input\n                           id=\"name\"\n                           value=\"Pedro Duarte\"\n                           className=\"col-span-3\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-4 items-center gap-4\">\n                        <Label htmlFor=\"username\" className=\"text-right\">\n                           Username\n                        </Label>\n                        <Input\n                           id=\"username\"\n                           value=\"~peduarte\"\n                           className=\"col-span-3\"\n                        />\n                     </div>\n                  </div>\n                  <SheetFooter>\n                     <SheetClose asChild>\n                        <Button type=\"submit\">Save changes</Button>\n                     </SheetClose>\n                  </SheetFooter>\n               </SheetContent>\n            </Sheet>\n         ))}\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/sheet.json b/apps/web/public/r/styles/miami/sheet.json
index 966a4712..03bf6391 100644
--- a/apps/web/public/r/styles/miami/sheet.json
+++ b/apps/web/public/r/styles/miami/sheet.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sheet",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/sheet.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as SheetPrimitive from '@radix-ui/react-dialog'\nimport { Cross2Icon } from '@radix-ui/react-icons'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Overlay\n      className={ny(\n         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',\n         className,\n      )}\n      {...props}\n      ref={ref}\n   />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',\n   {\n      variants: {\n         side: {\n            top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n            bottom:\n          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n            left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n            right:\n          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n         },\n      },\n      defaultVariants: {\n         side: 'right',\n      },\n   },\n)\n\ninterface SheetContentProps\n   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n   VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Content>,\n   SheetContentProps\n>(({ side = 'right', className, children, ...props }, ref) => (\n   <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n         ref={ref}\n         className={ny(sheetVariants({ side }), className)}\n         {...props}\n      >\n         <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n            <Cross2Icon className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n         </SheetPrimitive.Close>\n         {children}\n      </SheetPrimitive.Content>\n   </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nfunction SheetHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            'flex flex-col space-y-2 text-center sm:text-start',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nSheetHeader.displayName = 'SheetHeader'\n\nfunction SheetFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nSheetFooter.displayName = 'SheetFooter'\n\nconst SheetTitle = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Title\n      ref={ref}\n      className={ny('text-foreground text-lg font-semibold', className)}\n      {...props}\n   />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Description\n      ref={ref}\n      className={ny('text-muted-foreground text-sm', className)}\n      {...props}\n   />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n   Sheet,\n   SheetPortal,\n   SheetOverlay,\n   SheetTrigger,\n   SheetClose,\n   SheetContent,\n   SheetHeader,\n   SheetFooter,\n   SheetTitle,\n   SheetDescription,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Overlay\n      className={ny(\n         \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80\",\n         className,\n      )}\n      {...props}\n      ref={ref}\n   />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n   \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\n   {\n      variants: {\n         side: {\n            top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n            bottom:\n               \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n            left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n            right: \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n         },\n      },\n      defaultVariants: {\n         side: \"right\",\n      },\n   },\n)\n\ninterface SheetContentProps\n   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n      VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Content>,\n   SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n   <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n         ref={ref}\n         className={ny(sheetVariants({ side }), className)}\n         {...props}\n      >\n         <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n            <Cross2Icon className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n         </SheetPrimitive.Close>\n         {children}\n      </SheetPrimitive.Content>\n   </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nfunction SheetHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            \"flex flex-col space-y-2 text-center sm:text-start\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nSheetHeader.displayName = \"SheetHeader\"\n\nfunction SheetFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Title\n      ref={ref}\n      className={ny(\"text-foreground text-lg font-semibold\", className)}\n      {...props}\n   />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Description\n      ref={ref}\n      className={ny(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n   Sheet,\n   SheetPortal,\n   SheetOverlay,\n   SheetTrigger,\n   SheetClose,\n   SheetContent,\n   SheetHeader,\n   SheetFooter,\n   SheetTitle,\n   SheetDescription,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/shimmer-button-demo.json b/apps/web/public/r/styles/miami/shimmer-button-demo.json
index 65275b48..c344261c 100644
--- a/apps/web/public/r/styles/miami/shimmer-button-demo.json
+++ b/apps/web/public/r/styles/miami/shimmer-button-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shimmer-button-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/shimmer-button-demo.tsx",
-      "content": "import ShimmerButton from '~/registry/miami/ui/shimmer-button'\n\nexport default function ShimmerButtonDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <ShimmerButton className=\"shadow-2xl\">\n            <span className=\"whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10\">\n               Shimmer Button\n            </span>\n         </ShimmerButton>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/shimmer-button-demo.tsx",
+      "content": "import ShimmerButton from \"~/registry/miami/ui/shimmer-button\"\n\nexport default function ShimmerButtonDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <ShimmerButton className=\"shadow-2xl\">\n            <span className=\"whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10\">\n               Shimmer Button\n            </span>\n         </ShimmerButton>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/shimmer-button.json b/apps/web/public/r/styles/miami/shimmer-button.json
index 9511c4b0..2213c2d7 100644
--- a/apps/web/public/r/styles/miami/shimmer-button.json
+++ b/apps/web/public/r/styles/miami/shimmer-button.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shimmer-button",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/shimmer-button.tsx",
-      "content": "import type { CSSProperties } from 'react'\nimport React from 'react'\nimport { ny } from '~/lib/utils'\n\nexport interface ShimmerButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n   shimmerColor?: string\n   shimmerSize?: string\n   borderRadius?: string\n   shimmerDuration?: string\n   background?: string\n   className?: string\n   children?: React.ReactNode\n}\n\nconst ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(\n   (\n      {\n         shimmerColor = '#ffffff',\n         shimmerSize = '0.05em',\n         shimmerDuration = '3s',\n         borderRadius = '100px',\n         background = 'rgba(0, 0, 0, 1)',\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      return (\n         <button\n            type=\"button\"\n            style={\n               {\n                  '--spread': '90deg',\n                  '--shimmer-color': shimmerColor,\n                  '--radius': borderRadius,\n                  '--speed': shimmerDuration,\n                  '--cut': shimmerSize,\n                  '--bg': background,\n               } as CSSProperties\n            }\n            className={ny(\n               'group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black',\n               'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px',\n               className,\n            )}\n            ref={ref}\n            {...props}\n         >\n            {/* spark container */}\n            <div\n               className={ny(\n                  '-z-30 blur-[2px]',\n                  'absolute inset-0 overflow-visible [container-type:size]',\n               )}\n            >\n               {/* spark */}\n               <div className=\"animate-slide absolute inset-0 h-[100cqh] [aspect-ratio:1] [border-radius:0] [mask:none]\">\n                  {/* spark before */}\n                  <div className=\"animate-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]\" />\n               </div>\n            </div>\n            {children}\n\n            {/* Highlight */}\n            <div\n               className={ny(\n                  'insert-0 absolute size-full',\n\n                  'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',\n\n                  // transition\n                  'transform-gpu transition-all duration-300 ease-in-out',\n\n                  // on hover\n                  'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',\n\n                  // on click\n                  'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]',\n               )}\n            />\n\n            {/* backdrop */}\n            <div\n               className={ny(\n                  'absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]',\n               )}\n            />\n         </button>\n      )\n   },\n)\n\nShimmerButton.displayName = 'ShimmerButton'\n\nexport default ShimmerButton\n",
-      "type": "registry:component",
+      "content": "import type { CSSProperties } from \"react\"\nimport React from \"react\"\nimport { ny } from \"~/lib/utils\"\n\nexport interface ShimmerButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n   shimmerColor?: string\n   shimmerSize?: string\n   borderRadius?: string\n   shimmerDuration?: string\n   background?: string\n   className?: string\n   children?: React.ReactNode\n}\n\nconst ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(\n   (\n      {\n         shimmerColor = \"#ffffff\",\n         shimmerSize = \"0.05em\",\n         shimmerDuration = \"3s\",\n         borderRadius = \"100px\",\n         background = \"rgba(0, 0, 0, 1)\",\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      return (\n         <button\n            type=\"button\"\n            style={\n               {\n                  \"--spread\": \"90deg\",\n                  \"--shimmer-color\": shimmerColor,\n                  \"--radius\": borderRadius,\n                  \"--speed\": shimmerDuration,\n                  \"--cut\": shimmerSize,\n                  \"--bg\": background,\n               } as CSSProperties\n            }\n            className={ny(\n               \"group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black\",\n               \"transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         >\n            {/* spark container */}\n            <div\n               className={ny(\n                  \"-z-30 blur-[2px]\",\n                  \"absolute inset-0 overflow-visible [container-type:size]\",\n               )}\n            >\n               {/* spark */}\n               <div className=\"animate-slide absolute inset-0 h-[100cqh] [aspect-ratio:1] [border-radius:0] [mask:none]\">\n                  {/* spark before */}\n                  <div className=\"animate-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]\" />\n               </div>\n            </div>\n            {children}\n\n            {/* Highlight */}\n            <div\n               className={ny(\n                  \"insert-0 absolute size-full\",\n\n                  \"rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]\",\n\n                  // transition\n                  \"transform-gpu transition-all duration-300 ease-in-out\",\n\n                  // on hover\n                  \"group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]\",\n\n                  // on click\n                  \"group-active:shadow-[inset_0_-10px_10px_#ffffff3f]\",\n               )}\n            />\n\n            {/* backdrop */}\n            <div\n               className={ny(\n                  \"absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]\",\n               )}\n            />\n         </button>\n      )\n   },\n)\n\nShimmerButton.displayName = \"ShimmerButton\"\n\nexport default ShimmerButton\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/shine-border-demo-2.json b/apps/web/public/r/styles/miami/shine-border-demo-2.json
index e55809f3..302de4aa 100644
--- a/apps/web/public/r/styles/miami/shine-border-demo-2.json
+++ b/apps/web/public/r/styles/miami/shine-border-demo-2.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shine-border-demo-2",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/shine-border-demo-2.tsx",
-      "content": "import ShineBorder from '~/registry/miami/ui/shine-border'\n\nexport default function ShineBorderDemo() {\n   return (\n      <ShineBorder className=\"text-center text-2xl font-bold capitalize\">\n         Shine Border\n      </ShineBorder>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/shine-border-demo-2.tsx",
+      "content": "import ShineBorder from \"~/registry/miami/ui/shine-border\"\n\nexport default function ShineBorderDemo() {\n   return (\n      <ShineBorder className=\"text-center text-2xl font-bold capitalize\">\n         Shine Border\n      </ShineBorder>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/shine-border-demo.json b/apps/web/public/r/styles/miami/shine-border-demo.json
index 07254f3e..eb0a49db 100644
--- a/apps/web/public/r/styles/miami/shine-border-demo.json
+++ b/apps/web/public/r/styles/miami/shine-border-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shine-border-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/shine-border-demo.tsx",
-      "content": "import ShineBorder from '~/registry/miami/ui/shine-border'\n\nexport default function ShineBorderDemo() {\n   return (\n      <ShineBorder\n         className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\"\n         color={['#A07CFE', '#FE8FB5', '#FFBE7B']}\n      >\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Shine Border\n         </span>\n      </ShineBorder>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/shine-border-demo.tsx",
+      "content": "import ShineBorder from \"~/registry/miami/ui/shine-border\"\n\nexport default function ShineBorderDemo() {\n   return (\n      <ShineBorder\n         className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\"\n         color={[\"#A07CFE\", \"#FE8FB5\", \"#FFBE7B\"]}\n      >\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Shine Border\n         </span>\n      </ShineBorder>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/shine-border.json b/apps/web/public/r/styles/miami/shine-border.json
index 3a35453c..186adb59 100644
--- a/apps/web/public/r/styles/miami/shine-border.json
+++ b/apps/web/public/r/styles/miami/shine-border.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shine-border",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/shine-border.tsx",
-      "content": "'use client'\n\nimport { ny } from '~/lib/utils'\n\ntype TColorProp = string | string[]\n\ninterface ShineBorderProps {\n   borderRadius?: number\n   borderWidth?: number\n   duration?: number\n   color?: TColorProp\n   className?: string\n   children: React.ReactNode\n}\n\n/**\n * @name Shine Border\n * @description It is an animated background border effect component with easy to use and configurable props.\n * @param borderRadius defines the radius of the border.\n * @param borderWidth defines the width of the border.\n * @param duration defines the animation duration to be applied on the shining border\n * @param color a string or string array to define border color.\n * @param className defines the class name to be applied to the component\n * @param children contains react node elements.\n */\nexport default function ShineBorder({\n   borderRadius = 8,\n   borderWidth = 1,\n   duration = 14,\n   color = '#000000',\n   className,\n   children,\n}: ShineBorderProps) {\n   return (\n      <div\n         style={\n            {\n               '--border-radius': `${borderRadius}px`,\n            } as React.CSSProperties\n         }\n         className={ny(\n            'relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white',\n            className,\n         )}\n      >\n         <div\n            style={\n               {\n                  '--border-width': `${borderWidth}px`,\n                  '--border-radius': `${borderRadius}px`,\n                  '--duration': `${duration}s`,\n                  '--mask-linear-gradient': `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,\n                  '--background-radial-gradient': `radial-gradient(transparent,transparent, ${Array.isArray(color) ? color.join(',') : color},transparent,transparent)`,\n               } as React.CSSProperties\n            }\n            className={`before:bg-shine-size motion-safe:before:animate-shine before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[\"\"] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient]`}\n         >\n         </div>\n         {children}\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { ny } from \"~/lib/utils\"\n\ntype TColorProp = string | string[]\n\ninterface ShineBorderProps {\n   borderRadius?: number\n   borderWidth?: number\n   duration?: number\n   color?: TColorProp\n   className?: string\n   children: React.ReactNode\n}\n\n/**\n * @name Shine Border\n * @description It is an animated background border effect component with easy to use and configurable props.\n * @param borderRadius defines the radius of the border.\n * @param borderWidth defines the width of the border.\n * @param duration defines the animation duration to be applied on the shining border\n * @param color a string or string array to define border color.\n * @param className defines the class name to be applied to the component\n * @param children contains react node elements.\n */\nexport default function ShineBorder({\n   borderRadius = 8,\n   borderWidth = 1,\n   duration = 14,\n   color = \"#000000\",\n   className,\n   children,\n}: ShineBorderProps) {\n   return (\n      <div\n         style={\n            {\n               \"--border-radius\": `${borderRadius}px`,\n            } as React.CSSProperties\n         }\n         className={ny(\n            \"relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white\",\n            className,\n         )}\n      >\n         <div\n            style={\n               {\n                  \"--border-width\": `${borderWidth}px`,\n                  \"--border-radius\": `${borderRadius}px`,\n                  \"--duration\": `${duration}s`,\n                  \"--mask-linear-gradient\": `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,\n                  \"--background-radial-gradient\": `radial-gradient(transparent,transparent, ${Array.isArray(color) ? color.join(\",\") : color},transparent,transparent)`,\n               } as React.CSSProperties\n            }\n            className={`before:bg-shine-size motion-safe:before:animate-shine before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[\"\"] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient]`}\n         ></div>\n         {children}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/shiny-button-demo.json b/apps/web/public/r/styles/miami/shiny-button-demo.json
index 91d48536..0d4b8a27 100644
--- a/apps/web/public/r/styles/miami/shiny-button-demo.json
+++ b/apps/web/public/r/styles/miami/shiny-button-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shiny-button-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/shiny-button-demo.tsx",
-      "content": "import ShinyButton from '~/registry/miami/ui/shiny-button'\n\nexport default function ShinyButtonDemo() {\n   return <ShinyButton text=\"Shiny Button\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/shiny-button-demo.tsx",
+      "content": "import ShinyButton from \"~/registry/miami/ui/shiny-button\"\n\nexport default function ShinyButtonDemo() {\n   return <ShinyButton text=\"Shiny Button\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/shiny-button.json b/apps/web/public/r/styles/miami/shiny-button.json
index 0d426011..ed04db55 100644
--- a/apps/web/public/r/styles/miami/shiny-button.json
+++ b/apps/web/public/r/styles/miami/shiny-button.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "shiny-button",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/shiny-button.tsx",
-      "content": "'use client'\nimport { type AnimationProps, motion } from 'framer-motion'\n\nconst animationProps = {\n   initial: { '--x': '100%', 'scale': 0.8 },\n   animate: { '--x': '-100%', 'scale': 1 },\n   whileTap: { scale: 0.95 },\n   transition: {\n      repeat: Infinity,\n      repeatType: 'loop',\n      repeatDelay: 1,\n      type: 'spring',\n      stiffness: 20,\n      damping: 15,\n      mass: 2,\n      scale: {\n         type: 'spring',\n         stiffness: 200,\n         damping: 5,\n         mass: 0.5,\n      },\n   },\n} as AnimationProps\n\nfunction ShinyButton({ text = 'shiny-button' }) {\n   return (\n      <motion.button\n         {...animationProps}\n         className=\"relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]\"\n      >\n         <span\n            className=\"relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]\"\n            style={{\n               maskImage:\n            'linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))',\n            }}\n         >\n            {text}\n         </span>\n         <span\n            style={{\n               mask: 'linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))',\n               maskComposite: 'exclude',\n            }}\n            className=\"absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px\"\n         >\n         </span>\n      </motion.button>\n   )\n}\n\nexport default ShinyButton\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport { type AnimationProps, motion } from \"framer-motion\"\n\nconst animationProps = {\n   initial: { \"--x\": \"100%\", scale: 0.8 },\n   animate: { \"--x\": \"-100%\", scale: 1 },\n   whileTap: { scale: 0.95 },\n   transition: {\n      repeat: Number.POSITIVE_INFINITY,\n      repeatType: \"loop\",\n      repeatDelay: 1,\n      type: \"spring\",\n      stiffness: 20,\n      damping: 15,\n      mass: 2,\n      scale: {\n         type: \"spring\",\n         stiffness: 200,\n         damping: 5,\n         mass: 0.5,\n      },\n   },\n} as AnimationProps\n\nfunction ShinyButton({ text = \"shiny-button\" }) {\n   return (\n      <motion.button\n         {...animationProps}\n         className=\"relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]\"\n      >\n         <span\n            className=\"relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]\"\n            style={{\n               maskImage:\n                  \"linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))\",\n            }}\n         >\n            {text}\n         </span>\n         <span\n            style={{\n               mask: \"linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))\",\n               maskComposite: \"exclude\",\n            }}\n            className=\"absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px\"\n         ></span>\n      </motion.button>\n   )\n}\n\nexport default ShinyButton\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/sidebar-01.json b/apps/web/public/r/styles/miami/sidebar-01.json
index 52616a10..9e4e9804 100644
--- a/apps/web/public/r/styles/miami/sidebar-01.json
+++ b/apps/web/public/r/styles/miami/sidebar-01.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-01",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A simple sidebar with navigation grouped by section.",
   "registryDependencies": [
     "sidebar",
@@ -11,28 +13,32 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-01/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-01/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-01/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\n\nimport { SearchForm } from '~/registry/miami/block/sidebar-01/components/search-form'\nimport { VersionSwitcher } from '~/registry/miami/block/sidebar-01/components/version-switcher'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <VersionSwitcher\n               versions={data.versions}\n               defaultVersion={data.versions[0]}\n            />\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent>\n            {/* We create a SidebarGroup for each parent. */}\n            {data.navMain.map(item => (\n               <SidebarGroup key={item.title}>\n                  <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {item.items.map(item => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton asChild isActive={item.isActive}>\n                                 <a href={item.url}>{item.title}</a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            ))}\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import type * as React from \"react\"\n\nimport { SearchForm } from \"~/registry/miami/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"~/registry/miami/blocks/sidebar-01/components/version-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <VersionSwitcher\n               versions={data.versions}\n               defaultVersion={data.versions[0]}\n            />\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent>\n            {/* We create a SidebarGroup for each parent. */}\n            {data.navMain.map((item) => (\n               <SidebarGroup key={item.title}>\n                  <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {item.items.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 asChild\n                                 isActive={item.isActive}\n                              >\n                                 <a href={item.url}>{item.title}</a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            ))}\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-01/components/search-form.tsx",
-      "content": "import { Search } from 'lucide-react'\n\nimport { Label } from '~/registry/miami/ui/label'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from '~/registry/miami/ui/sidebar'\n\nexport function SearchForm({ ...props }: React.ComponentProps<'form'>) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
+      "path": "blocks/sidebar-01/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"~/registry/miami/ui/label\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-01/components/version-switcher.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function VersionSwitcher({\n   versions,\n   defaultVersion,\n}: {\n   versions: string[]\n   defaultVersion: string\n}) {\n   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                        <GalleryVerticalEnd className=\"size-4\" />\n                     </div>\n                     <div className=\"flex flex-col gap-0.5 leading-none\">\n                        <span className=\"font-semibold\">Documentation</span>\n                        <span className=\"\">\n                           v\n                           {selectedVersion}\n                        </span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n               >\n                  {versions.map(version => (\n                     <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                     >\n                        v\n                        {version}\n                        {' '}\n                        {version === selectedVersion && <Check className=\"ml-auto\" />}\n                     </DropdownMenuItem>\n                  ))}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-01/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function VersionSwitcher({\n   versions,\n   defaultVersion,\n}: {\n   versions: string[]\n   defaultVersion: string\n}) {\n   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <GalleryVerticalEnd className=\"size-4\" />\n                     </div>\n                     <div className=\"flex flex-col gap-0.5 leading-none\">\n                        <span className=\"font-semibold\">Documentation</span>\n                        <span className=\"\">v{selectedVersion}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n               >\n                  {versions.map((version) => (\n                     <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                     >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                           <Check className=\"ml-auto\" />\n                        )}\n                     </DropdownMenuItem>\n                  ))}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-02.json b/apps/web/public/r/styles/miami/sidebar-02.json
index 62bb92ec..6493ad85 100644
--- a/apps/web/public/r/styles/miami/sidebar-02.json
+++ b/apps/web/public/r/styles/miami/sidebar-02.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-02",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar with collapsible sections.",
   "registryDependencies": [
     "sidebar",
@@ -11,28 +13,32 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-02/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-02/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-02/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { ChevronRight } from 'lucide-react'\n\nimport { SearchForm } from '~/registry/miami/block/sidebar-02/components/search-form'\nimport { VersionSwitcher } from '~/registry/miami/block/sidebar-02/components/version-switcher'\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/miami/ui/collapsible'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Community',\n         url: '#',\n         items: [\n            {\n               title: 'Contribution Guide',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <VersionSwitcher\n               versions={data.versions}\n               defaultVersion={data.versions[0]}\n            />\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent className=\"gap-0\">\n            {/* We create a collapsible SidebarGroup for each parent. */}\n            {data.navMain.map(item => (\n               <Collapsible\n                  key={item.title}\n                  title={item.title}\n                  defaultOpen\n                  className=\"group/collapsible\"\n               >\n                  <SidebarGroup>\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n                     >\n                        <CollapsibleTrigger>\n                           {item.title}\n                           {' '}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {item.items.map(item => (\n                                 <SidebarMenuItem key={item.title}>\n                                    <SidebarMenuButton asChild isActive={item.isActive}>\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </SidebarGroup>\n               </Collapsible>\n            ))}\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { SearchForm } from \"~/registry/miami/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"~/registry/miami/blocks/sidebar-02/components/version-switcher\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <VersionSwitcher\n               versions={data.versions}\n               defaultVersion={data.versions[0]}\n            />\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent className=\"gap-0\">\n            {/* We create a collapsible SidebarGroup for each parent. */}\n            {data.navMain.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  title={item.title}\n                  defaultOpen\n                  className=\"group/collapsible\"\n               >\n                  <SidebarGroup>\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {item.title}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {item.items.map((item) => (\n                                 <SidebarMenuItem key={item.title}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={item.isActive}\n                                    >\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </SidebarGroup>\n               </Collapsible>\n            ))}\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-02/components/search-form.tsx",
-      "content": "import { Search } from 'lucide-react'\n\nimport { Label } from '~/registry/miami/ui/label'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from '~/registry/miami/ui/sidebar'\n\nexport function SearchForm({ ...props }: React.ComponentProps<'form'>) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
+      "path": "blocks/sidebar-02/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"~/registry/miami/ui/label\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-02/components/version-switcher.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function VersionSwitcher({\n   versions,\n   defaultVersion,\n}: {\n   versions: string[]\n   defaultVersion: string\n}) {\n   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                        <GalleryVerticalEnd className=\"size-4\" />\n                     </div>\n                     <div className=\"flex flex-col gap-0.5 leading-none\">\n                        <span className=\"font-semibold\">Documentation</span>\n                        <span className=\"\">\n                           v\n                           {selectedVersion}\n                        </span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n               >\n                  {versions.map(version => (\n                     <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                     >\n                        v\n                        {version}\n                        {' '}\n                        {version === selectedVersion && <Check className=\"ml-auto\" />}\n                     </DropdownMenuItem>\n                  ))}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-02/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function VersionSwitcher({\n   versions,\n   defaultVersion,\n}: {\n   versions: string[]\n   defaultVersion: string\n}) {\n   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <GalleryVerticalEnd className=\"size-4\" />\n                     </div>\n                     <div className=\"flex flex-col gap-0.5 leading-none\">\n                        <span className=\"font-semibold\">Documentation</span>\n                        <span className=\"\">v{selectedVersion}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n               >\n                  {versions.map((version) => (\n                     <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                     >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                           <Check className=\"ml-auto\" />\n                        )}\n                     </DropdownMenuItem>\n                  ))}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-03.json b/apps/web/public/r/styles/miami/sidebar-03.json
index dd213584..690a851e 100644
--- a/apps/web/public/r/styles/miami/sidebar-03.json
+++ b/apps/web/public/r/styles/miami/sidebar-03.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-03",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar with submenus.",
   "registryDependencies": [
     "sidebar",
@@ -8,16 +10,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-03/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n               <div className=\"flex items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-03/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n               <div className=\"flex items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-03/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { GalleryVerticalEnd } from 'lucide-react'\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Community',\n         url: '#',\n         items: [\n            {\n               title: 'Contribution Guide',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu>\n                  {data.navMain.map(item => (\n                     <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild>\n                           <a href={item.url} className=\"font-medium\">\n                              {item.title}\n                           </a>\n                        </SidebarMenuButton>\n                        {item.items?.length\n                           ? (\n                                 <SidebarMenuSub>\n                                    {item.items.map(item => (\n                                       <SidebarMenuSubItem key={item.title}>\n                                          <SidebarMenuSubButton asChild isActive={item.isActive}>\n                                             <a href={item.url}>{item.title}</a>\n                                          </SidebarMenuSubButton>\n                                       </SidebarMenuSubItem>\n                                    ))}\n                                 </SidebarMenuSub>\n                              )\n                           : null}\n                     </SidebarMenuItem>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-03/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu>\n                  {data.navMain.map((item) => (\n                     <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild>\n                           <a href={item.url} className=\"font-medium\">\n                              {item.title}\n                           </a>\n                        </SidebarMenuButton>\n                        {item.items?.length ? (\n                           <SidebarMenuSub>\n                              {item.items.map((item) => (\n                                 <SidebarMenuSubItem key={item.title}>\n                                    <SidebarMenuSubButton\n                                       asChild\n                                       isActive={item.isActive}\n                                    >\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        ) : null}\n                     </SidebarMenuItem>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-04.json b/apps/web/public/r/styles/miami/sidebar-04.json
index e24ddea7..f19fc8b9 100644
--- a/apps/web/public/r/styles/miami/sidebar-04.json
+++ b/apps/web/public/r/styles/miami/sidebar-04.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-04",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A floating sidebar with submenus.",
   "registryDependencies": [
     "sidebar",
@@ -9,16 +11,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-04/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               '--sidebar-width': '19rem',\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-04/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"19rem\",\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-04/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { GalleryVerticalEnd } from 'lucide-react'\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Community',\n         url: '#',\n         items: [\n            {\n               title: 'Contribution Guide',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar variant=\"floating\" {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu className=\"gap-2\">\n                  {data.navMain.map(item => (\n                     <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild>\n                           <a href={item.url} className=\"font-medium\">\n                              {item.title}\n                           </a>\n                        </SidebarMenuButton>\n                        {item.items?.length\n                           ? (\n                                 <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                                    {item.items.map(item => (\n                                       <SidebarMenuSubItem key={item.title}>\n                                          <SidebarMenuSubButton asChild isActive={item.isActive}>\n                                             <a href={item.url}>{item.title}</a>\n                                          </SidebarMenuSubButton>\n                                       </SidebarMenuSubItem>\n                                    ))}\n                                 </SidebarMenuSub>\n                              )\n                           : null}\n                     </SidebarMenuItem>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-04/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar variant=\"floating\" {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu className=\"gap-2\">\n                  {data.navMain.map((item) => (\n                     <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild>\n                           <a href={item.url} className=\"font-medium\">\n                              {item.title}\n                           </a>\n                        </SidebarMenuButton>\n                        {item.items?.length ? (\n                           <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                              {item.items.map((item) => (\n                                 <SidebarMenuSubItem key={item.title}>\n                                    <SidebarMenuSubButton\n                                       asChild\n                                       isActive={item.isActive}\n                                    >\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        ) : null}\n                     </SidebarMenuItem>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-05.json b/apps/web/public/r/styles/miami/sidebar-05.json
index 217112c7..ed845495 100644
--- a/apps/web/public/r/styles/miami/sidebar-05.json
+++ b/apps/web/public/r/styles/miami/sidebar-05.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-05",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar with collapsible submenus.",
   "registryDependencies": [
     "sidebar",
@@ -11,22 +13,26 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-05/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-05/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-05/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-react'\n\nimport { SearchForm } from '~/registry/miami/block/sidebar-05/components/search-form'\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/miami/ui/collapsible'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Community',\n         url: '#',\n         items: [\n            {\n               title: 'Contribution Guide',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu>\n                  {data.navMain.map((item, index) => (\n                     <Collapsible\n                        key={item.title}\n                        defaultOpen={index === 1}\n                        className=\"group/collapsible\"\n                     >\n                        <SidebarMenuItem>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuButton>\n                                 {item.title}\n                                 {' '}\n                                 <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                                 <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                              </SidebarMenuButton>\n                           </CollapsibleTrigger>\n                           {item.items?.length\n                              ? (\n                                    <CollapsibleContent>\n                                       <SidebarMenuSub>\n                                          {item.items.map(item => (\n                                             <SidebarMenuSubItem key={item.title}>\n                                                <SidebarMenuSubButton\n                                                   asChild\n                                                   isActive={item.isActive}\n                                                >\n                                                   <a href={item.url}>{item.title}</a>\n                                                </SidebarMenuSubButton>\n                                             </SidebarMenuSubItem>\n                                          ))}\n                                       </SidebarMenuSub>\n                                    </CollapsibleContent>\n                                 )\n                              : null}\n                        </SidebarMenuItem>\n                     </Collapsible>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { SearchForm } from \"~/registry/miami/blocks/sidebar-05/components/search-form\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu>\n                  {data.navMain.map((item, index) => (\n                     <Collapsible\n                        key={item.title}\n                        defaultOpen={index === 1}\n                        className=\"group/collapsible\"\n                     >\n                        <SidebarMenuItem>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuButton>\n                                 {item.title}{\" \"}\n                                 <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                                 <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                              </SidebarMenuButton>\n                           </CollapsibleTrigger>\n                           {item.items?.length ? (\n                              <CollapsibleContent>\n                                 <SidebarMenuSub>\n                                    {item.items.map((item) => (\n                                       <SidebarMenuSubItem key={item.title}>\n                                          <SidebarMenuSubButton\n                                             asChild\n                                             isActive={item.isActive}\n                                          >\n                                             <a href={item.url}>{item.title}</a>\n                                          </SidebarMenuSubButton>\n                                       </SidebarMenuSubItem>\n                                    ))}\n                                 </SidebarMenuSub>\n                              </CollapsibleContent>\n                           ) : null}\n                        </SidebarMenuItem>\n                     </Collapsible>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-05/components/search-form.tsx",
-      "content": "import { Search } from 'lucide-react'\n\nimport { Label } from '~/registry/miami/ui/label'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from '~/registry/miami/ui/sidebar'\n\nexport function SearchForm({ ...props }: React.ComponentProps<'form'>) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
+      "path": "blocks/sidebar-05/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"~/registry/miami/ui/label\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-06.json b/apps/web/public/r/styles/miami/sidebar-06.json
index c65c2482..4e36b347 100644
--- a/apps/web/public/r/styles/miami/sidebar-06.json
+++ b/apps/web/public/r/styles/miami/sidebar-06.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-06",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar with submenus as dropdowns.",
   "registryDependencies": [
     "sidebar",
@@ -11,28 +13,32 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-06/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-06/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-06/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { GalleryVerticalEnd } from 'lucide-react'\n\nimport { NavMain } from '~/registry/miami/block/sidebar-06/components/nav-main'\nimport { SidebarOptInForm } from '~/registry/miami/block/sidebar-06/components/sidebar-opt-in-form'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n         </SidebarContent>\n         <SidebarFooter>\n            <div className=\"p-1\">\n               <SidebarOptInForm />\n            </div>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"~/registry/miami/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"~/registry/miami/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n         </SidebarContent>\n         <SidebarFooter>\n            <div className=\"p-1\">\n               <SidebarOptInForm />\n            </div>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-06/components/nav-main.tsx",
-      "content": "'use client'\n\nimport { type LucideIcon, MoreHorizontal } from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarGroup,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup>\n         <SidebarMenu>\n            {items.map(item => (\n               <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                           {item.title}\n                           {' '}\n                           <MoreHorizontal className=\"ml-auto\" />\n                        </SidebarMenuButton>\n                     </DropdownMenuTrigger>\n                     {item.items?.length\n                        ? (\n                              <DropdownMenuContent\n                                 side={isMobile ? 'bottom' : 'right'}\n                                 align={isMobile ? 'end' : 'start'}\n                                 className=\"min-w-56 rounded-lg\"\n                              >\n                                 {item.items.map(item => (\n                                    <DropdownMenuItem asChild key={item.title}>\n                                       <a href={item.url}>{item.title}</a>\n                                    </DropdownMenuItem>\n                                 ))}\n                              </DropdownMenuContent>\n                           )\n                        : null}\n                  </SidebarMenuItem>\n               </DropdownMenu>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-06/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon, MoreHorizontal } from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup>\n         <SidebarMenu>\n            {items.map((item) => (\n               <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                           {item.title} <MoreHorizontal className=\"ml-auto\" />\n                        </SidebarMenuButton>\n                     </DropdownMenuTrigger>\n                     {item.items?.length ? (\n                        <DropdownMenuContent\n                           side={isMobile ? \"bottom\" : \"right\"}\n                           align={isMobile ? \"end\" : \"start\"}\n                           className=\"min-w-56 rounded-lg\"\n                        >\n                           {item.items.map((item) => (\n                              <DropdownMenuItem asChild key={item.title}>\n                                 <a href={item.url}>{item.title}</a>\n                              </DropdownMenuItem>\n                           ))}\n                        </DropdownMenuContent>\n                     ) : null}\n                  </SidebarMenuItem>\n               </DropdownMenu>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport { SidebarInput } from '~/registry/miami/ui/sidebar'\n\nexport function SidebarOptInForm() {\n   return (\n      <Card className=\"shadow-none\">\n         <form>\n            <CardHeader className=\"p-4 pb-0\">\n               <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n               <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n               </CardDescription>\n            </CardHeader>\n            <CardContent className=\"grid gap-2.5 p-4\">\n               <SidebarInput type=\"email\" placeholder=\"Email\" />\n               <Button\n                  className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\"\n                  size=\"sm\"\n               >\n                  Subscribe\n               </Button>\n            </CardContent>\n         </form>\n      </Card>\n   )\n}\n",
+      "path": "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport { SidebarInput } from \"~/registry/miami/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n   return (\n      <Card className=\"shadow-none\">\n         <form>\n            <CardHeader className=\"p-4 pb-0\">\n               <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n               </CardTitle>\n               <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n               </CardDescription>\n            </CardHeader>\n            <CardContent className=\"grid gap-2.5 p-4\">\n               <SidebarInput type=\"email\" placeholder=\"Email\" />\n               <Button\n                  className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n                  size=\"sm\"\n               >\n                  Subscribe\n               </Button>\n            </CardContent>\n         </form>\n      </Card>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-07.json b/apps/web/public/r/styles/miami/sidebar-07.json
index e35201f6..d8785581 100644
--- a/apps/web/public/r/styles/miami/sidebar-07.json
+++ b/apps/web/public/r/styles/miami/sidebar-07.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-07",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar that collapses to icons.",
   "registryDependencies": [
     "sidebar",
@@ -12,40 +14,44 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-07/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-07/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-07/components/app-sidebar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   AudioWaveform,\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   GalleryVerticalEnd,\n   Map,\n   PieChart,\n   Settings2,\n   SquareTerminal,\n} from 'lucide-react'\n\nimport { NavMain } from '~/registry/miami/block/sidebar-07/components/nav-main'\nimport { NavProjects } from '~/registry/miami/block/sidebar-07/components/nav-projects'\nimport { NavUser } from '~/registry/miami/block/sidebar-07/components/nav-user'\nimport { TeamSwitcher } from '~/registry/miami/block/sidebar-07/components/team-switcher'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarRail,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   user: {\n      name: 'shadcn',\n      email: 'm@example.com',\n      avatar: '/avatars/nyxb.jpg',\n   },\n   teams: [\n      {\n         name: 'Acme Inc',\n         logo: GalleryVerticalEnd,\n         plan: 'Enterprise',\n      },\n      {\n         name: 'Acme Corp.',\n         logo: AudioWaveform,\n         plan: 'Startup',\n      },\n      {\n         name: 'Evil Corp.',\n         logo: Command,\n         plan: 'Free',\n      },\n   ],\n   navMain: [\n      {\n         title: 'Playground',\n         url: '#',\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: 'Sales & Marketing',\n         url: '#',\n         icon: PieChart,\n      },\n      {\n         name: 'Travel',\n         url: '#',\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar collapsible=\"icon\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-07/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   GalleryVerticalEnd,\n   Map,\n   PieChart,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"~/registry/miami/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"~/registry/miami/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"~/registry/miami/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"~/registry/miami/blocks/sidebar-07/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarRail,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: GalleryVerticalEnd,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar collapsible=\"icon\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-07/components/nav-main.tsx",
-      "content": "'use client'\n\nimport { ChevronRight, type LucideIcon } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/miami/ui/collapsible'\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map(item => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n               >\n                  <SidebarMenuItem>\n                     <CollapsibleTrigger asChild>\n                        <SidebarMenuButton tooltip={item.title}>\n                           {item.icon && <item.icon />}\n                           <span>{item.title}</span>\n                           <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                     </CollapsibleTrigger>\n                     <CollapsibleContent>\n                        <SidebarMenuSub>\n                           {item.items?.map(subItem => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                 <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                       <span>{subItem.title}</span>\n                                    </a>\n                                 </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                           ))}\n                        </SidebarMenuSub>\n                     </CollapsibleContent>\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-07/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n               >\n                  <SidebarMenuItem>\n                     <CollapsibleTrigger asChild>\n                        <SidebarMenuButton tooltip={item.title}>\n                           {item.icon && <item.icon />}\n                           <span>{item.title}</span>\n                           <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                     </CollapsibleTrigger>\n                     <CollapsibleContent>\n                        <SidebarMenuSub>\n                           {item.items?.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                 <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                       <span>{subItem.title}</span>\n                                    </a>\n                                 </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                           ))}\n                        </SidebarMenuSub>\n                     </CollapsibleContent>\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-07/components/nav-projects.tsx",
-      "content": "'use client'\n\nimport {\n   Folder,\n   Forward,\n   type LucideIcon,\n   MoreHorizontal,\n   Trash2,\n} from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map(item => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48 rounded-lg\"\n                        side={isMobile ? 'bottom' : 'right'}\n                        align={isMobile ? 'end' : 'start'}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Forward className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-07/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   Forward,\n   type LucideIcon,\n   MoreHorizontal,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Forward className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-07/components/nav-user.tsx",
-      "content": "'use client'\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from 'lucide-react'\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/miami/ui/avatar'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"size-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"size-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                           <span className=\"truncate text-xs\">{user.email}</span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-07/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/miami/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-07/components/team-switcher.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronsUpDown, Plus } from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/miami/ui/sidebar'\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                        <activeTeam.logo className=\"size-4\" />\n                     </div>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {activeTeam.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘\n                           {index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"text-muted-foreground font-medium\">Add team</div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-07/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-4\" />\n                     </div>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {activeTeam.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                           {activeTeam.plan}\n                        </span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-08.json b/apps/web/public/r/styles/miami/sidebar-08.json
index db526f02..bd3d1202 100644
--- a/apps/web/public/r/styles/miami/sidebar-08.json
+++ b/apps/web/public/r/styles/miami/sidebar-08.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-08",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "An inset sidebar with secondary navigation.",
   "registryDependencies": [
     "sidebar",
@@ -12,40 +14,44 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-08/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2\">\n               <div className=\"flex items-center gap-2 px-4\">\n                  <SidebarTrigger className=\"-ml-1\" />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-08/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2\">\n               <div className=\"flex items-center gap-2 px-4\">\n                  <SidebarTrigger className=\"-ml-1\" />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-08/components/app-sidebar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Send,\n   Settings2,\n   SquareTerminal,\n} from 'lucide-react'\n\nimport { NavMain } from '~/registry/miami/block/sidebar-08/components/nav-main'\nimport { NavProjects } from '~/registry/miami/block/sidebar-08/components/nav-projects'\nimport { NavSecondary } from '~/registry/miami/block/sidebar-08/components/nav-secondary'\nimport { NavUser } from '~/registry/miami/block/sidebar-08/components/nav-user'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/miami/ui/sidebar'\n\nconst data = {\n   user: {\n      name: 'shadcn',\n      email: 'm@example.com',\n      avatar: '/avatars/nyxb.jpg',\n   },\n   navMain: [\n      {\n         title: 'Playground',\n         url: '#',\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: 'Support',\n         url: '#',\n         icon: LifeBuoy,\n      },\n      {\n         title: 'Feedback',\n         url: '#',\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: 'Design Engineering',\n         url: '#',\n         icon: Frame,\n      },\n      {\n         name: 'Sales & Marketing',\n         url: '#',\n         icon: PieChart,\n      },\n      {\n         name: 'Travel',\n         url: '#',\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar variant=\"inset\" {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                           <Command className=\"size-4\" />\n                        </div>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">Acme Inc</span>\n                           <span className=\"truncate text-xs\">Enterprise</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-08/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Send,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"~/registry/miami/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"~/registry/miami/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"~/registry/miami/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"~/registry/miami/blocks/sidebar-08/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: \"Support\",\n         url: \"#\",\n         icon: LifeBuoy,\n      },\n      {\n         title: \"Feedback\",\n         url: \"#\",\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: \"Design Engineering\",\n         url: \"#\",\n         icon: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar variant=\"inset\" {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <Command className=\"size-4\" />\n                        </div>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              Acme Inc\n                           </span>\n                           <span className=\"truncate text-xs\">Enterprise</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-main.tsx",
-      "content": "'use client'\n\nimport { ChevronRight, type LucideIcon } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/miami/ui/collapsible'\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map(item => (\n               <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.items?.length\n                        ? (\n                              <>\n                                 <CollapsibleTrigger asChild>\n                                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                       <ChevronRight />\n                                       <span className=\"sr-only\">Toggle</span>\n                                    </SidebarMenuAction>\n                                 </CollapsibleTrigger>\n                                 <CollapsibleContent>\n                                    <SidebarMenuSub>\n                                       {item.items?.map(subItem => (\n                                          <SidebarMenuSubItem key={subItem.title}>\n                                             <SidebarMenuSubButton asChild>\n                                                <a href={subItem.url}>\n                                                   <span>{subItem.title}</span>\n                                                </a>\n                                             </SidebarMenuSubButton>\n                                          </SidebarMenuSubItem>\n                                       ))}\n                                    </SidebarMenuSub>\n                                 </CollapsibleContent>\n                              </>\n                           )\n                        : null}\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-08/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n               >\n                  <SidebarMenuItem>\n                     <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.items?.length ? (\n                        <>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                 <ChevronRight />\n                                 <span className=\"sr-only\">Toggle</span>\n                              </SidebarMenuAction>\n                           </CollapsibleTrigger>\n                           <CollapsibleContent>\n                              <SidebarMenuSub>\n                                 {item.items?.map((subItem) => (\n                                    <SidebarMenuSubItem key={subItem.title}>\n                                       <SidebarMenuSubButton asChild>\n                                          <a href={subItem.url}>\n                                             <span>{subItem.title}</span>\n                                          </a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           </CollapsibleContent>\n                        </>\n                     ) : null}\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-projects.tsx",
-      "content": "'use client'\n\nimport {\n   Folder,\n   type LucideIcon,\n   MoreHorizontal,\n   Share,\n   Trash2,\n} from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map(item => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? 'bottom' : 'right'}\n                        align={isMobile ? 'end' : 'start'}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Share className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-08/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   type LucideIcon,\n   MoreHorizontal,\n   Share,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Share className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-secondary.tsx",
-      "content": "import * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map(item => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-08/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-user.tsx",
-      "content": "'use client'\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from 'lucide-react'\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/miami/ui/avatar'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"size-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"size-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                           <span className=\"truncate text-xs\">{user.email}</span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-08/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/miami/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-09.json b/apps/web/public/r/styles/miami/sidebar-09.json
index f4242eae..e2680eb5 100644
--- a/apps/web/public/r/styles/miami/sidebar-09.json
+++ b/apps/web/public/r/styles/miami/sidebar-09.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-09",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "Collapsible nested sidebars.",
   "registryDependencies": [
     "sidebar",
@@ -13,22 +15,26 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-09/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               '--sidebar-width': '350px',\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Inbox</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-09/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"350px\",\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Inbox</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-09/components/app-sidebar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-react'\n\nimport { NavUser } from '~/registry/miami/block/sidebar-09/components/nav-user'\nimport { Label } from '~/registry/miami/ui/label'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/miami/ui/sidebar'\nimport { Switch } from '~/registry/miami/ui/switch'\n\n// This is sample data\nconst data = {\n   user: {\n      name: 'shadcn',\n      email: 'm@example.com',\n      avatar: '/avatars/nyxb.jpg',\n   },\n   navMain: [\n      {\n         title: 'Inbox',\n         url: '#',\n         icon: Inbox,\n         isActive: true,\n      },\n      {\n         title: 'Drafts',\n         url: '#',\n         icon: File,\n         isActive: false,\n      },\n      {\n         title: 'Sent',\n         url: '#',\n         icon: Send,\n         isActive: false,\n      },\n      {\n         title: 'Junk',\n         url: '#',\n         icon: ArchiveX,\n         isActive: false,\n      },\n      {\n         title: 'Trash',\n         url: '#',\n         icon: Trash2,\n         isActive: false,\n      },\n   ],\n   mails: [\n      {\n         name: 'William Smith',\n         email: 'williamsmith@example.com',\n         subject: 'Meeting Tomorrow',\n         date: '09:34 AM',\n         teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n      },\n      {\n         name: 'Alice Smith',\n         email: 'alicesmith@example.com',\n         subject: 'Re: Project Update',\n         date: 'Yesterday',\n         teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n      },\n      {\n         name: 'Bob Johnson',\n         email: 'bobjohnson@example.com',\n         subject: 'Weekend Plans',\n         date: '2 days ago',\n         teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n      },\n      {\n         name: 'Emily Davis',\n         email: 'emilydavis@example.com',\n         subject: 'Re: Question about Budget',\n         date: '2 days ago',\n         teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n      },\n      {\n         name: 'Michael Wilson',\n         email: 'michaelwilson@example.com',\n         subject: 'Important Announcement',\n         date: '1 week ago',\n         teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n      },\n      {\n         name: 'Sarah Brown',\n         email: 'sarahbrown@example.com',\n         subject: 'Re: Feedback on Proposal',\n         date: '1 week ago',\n         teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n      },\n      {\n         name: 'David Lee',\n         email: 'davidlee@example.com',\n         subject: 'New Project Idea',\n         date: '1 week ago',\n         teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n      },\n      {\n         name: 'Olivia Wilson',\n         email: 'oliviawilson@example.com',\n         subject: 'Vacation Plans',\n         date: '1 week ago',\n         teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n      },\n      {\n         name: 'James Martin',\n         email: 'jamesmartin@example.com',\n         subject: 'Re: Conference Registration',\n         date: '1 week ago',\n         teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n      },\n      {\n         name: 'Sophia White',\n         email: 'sophiawhite@example.com',\n         subject: 'Team Dinner',\n         date: '1 week ago',\n         teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   // Note: I'm using state to show active item.\n   // IRL you should use the url/router.\n   const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n   const [mails, setMails] = React.useState(data.mails)\n   const { setOpen } = useSidebar()\n\n   return (\n      <Sidebar\n         collapsible=\"icon\"\n         className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n         {...props}\n      >\n         {/* This is the first sidebar */}\n         {/* We disable collapsible and adjust width to icon. */}\n         {/* This will make the sidebar appear as icons. */}\n         <Sidebar\n            collapsible=\"none\"\n            className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n         >\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                        <a href=\"#\">\n                           <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">Acme Inc</span>\n                              <span className=\"truncate text-xs\">Enterprise</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent className=\"px-1.5 md:px-0\">\n                     <SidebarMenu>\n                        {data.navMain.map(item => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 tooltip={{\n                                    children: item.title,\n                                    hidden: false,\n                                 }}\n                                 onClick={() => {\n                                    setActiveItem(item)\n                                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                                    setMails(\n                                       mail.slice(\n                                          0,\n                                          Math.max(5, Math.floor(Math.random() * 10) + 1),\n                                       ),\n                                    )\n                                    setOpen(true)\n                                 }}\n                                 isActive={activeItem.title === item.title}\n                                 className=\"px-2.5 md:px-2\"\n                              >\n                                 <item.icon />\n                                 <span>{item.title}</span>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <NavUser user={data.user} />\n            </SidebarFooter>\n         </Sidebar>\n\n         {/* This is the second sidebar */}\n         {/* We disable collapsible and let it fill remaining space */}\n         <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n            <SidebarHeader className=\"gap-3.5 border-b p-4\">\n               <div className=\"flex w-full items-center justify-between\">\n                  <div className=\"text-foreground text-base font-medium\">\n                     {activeItem.title}\n                  </div>\n                  <Label className=\"flex items-center gap-2 text-sm\">\n                     <span>Unreads</span>\n                     <Switch className=\"shadow-none\" />\n                  </Label>\n               </div>\n               <SidebarInput placeholder=\"Type to search...\" />\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup className=\"px-0\">\n                  <SidebarGroupContent>\n                     {mails.map(mail => (\n                        <a\n                           href=\"#\"\n                           key={mail.email}\n                           className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0\"\n                        >\n                           <div className=\"flex w-full items-center gap-2\">\n                              <span>{mail.name}</span>\n                              {' '}\n                              <span className=\"ml-auto text-xs\">{mail.date}</span>\n                           </div>\n                           <span className=\"font-medium\">{mail.subject}</span>\n                           <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                              {mail.teaser}\n                           </span>\n                        </a>\n                     ))}\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-09/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { NavUser } from \"~/registry/miami/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"~/registry/miami/ui/label\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\nimport { Switch } from \"~/registry/miami/ui/switch\"\n\n// This is sample data\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         isActive: true,\n      },\n      {\n         title: \"Drafts\",\n         url: \"#\",\n         icon: File,\n         isActive: false,\n      },\n      {\n         title: \"Sent\",\n         url: \"#\",\n         icon: Send,\n         isActive: false,\n      },\n      {\n         title: \"Junk\",\n         url: \"#\",\n         icon: ArchiveX,\n         isActive: false,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n         isActive: false,\n      },\n   ],\n   mails: [\n      {\n         name: \"William Smith\",\n         email: \"williamsmith@example.com\",\n         subject: \"Meeting Tomorrow\",\n         date: \"09:34 AM\",\n         teaser:\n            \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n      },\n      {\n         name: \"Alice Smith\",\n         email: \"alicesmith@example.com\",\n         subject: \"Re: Project Update\",\n         date: \"Yesterday\",\n         teaser:\n            \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n      },\n      {\n         name: \"Bob Johnson\",\n         email: \"bobjohnson@example.com\",\n         subject: \"Weekend Plans\",\n         date: \"2 days ago\",\n         teaser:\n            \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n      },\n      {\n         name: \"Emily Davis\",\n         email: \"emilydavis@example.com\",\n         subject: \"Re: Question about Budget\",\n         date: \"2 days ago\",\n         teaser:\n            \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n      },\n      {\n         name: \"Michael Wilson\",\n         email: \"michaelwilson@example.com\",\n         subject: \"Important Announcement\",\n         date: \"1 week ago\",\n         teaser:\n            \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n      },\n      {\n         name: \"Sarah Brown\",\n         email: \"sarahbrown@example.com\",\n         subject: \"Re: Feedback on Proposal\",\n         date: \"1 week ago\",\n         teaser:\n            \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n      },\n      {\n         name: \"David Lee\",\n         email: \"davidlee@example.com\",\n         subject: \"New Project Idea\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n      },\n      {\n         name: \"Olivia Wilson\",\n         email: \"oliviawilson@example.com\",\n         subject: \"Vacation Plans\",\n         date: \"1 week ago\",\n         teaser:\n            \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n      },\n      {\n         name: \"James Martin\",\n         email: \"jamesmartin@example.com\",\n         subject: \"Re: Conference Registration\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n      },\n      {\n         name: \"Sophia White\",\n         email: \"sophiawhite@example.com\",\n         subject: \"Team Dinner\",\n         date: \"1 week ago\",\n         teaser:\n            \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   // Note: I'm using state to show active item.\n   // IRL you should use the url/router.\n   const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n   const [mails, setMails] = React.useState(data.mails)\n   const { setOpen } = useSidebar()\n\n   return (\n      <Sidebar\n         collapsible=\"icon\"\n         className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n         {...props}\n      >\n         {/* This is the first sidebar */}\n         {/* We disable collapsible and adjust width to icon. */}\n         {/* This will make the sidebar appear as icons. */}\n         <Sidebar\n            collapsible=\"none\"\n            className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n         >\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton\n                        size=\"lg\"\n                        asChild\n                        className=\"md:h-8 md:p-0\"\n                     >\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">\n                                 Acme Inc\n                              </span>\n                              <span className=\"truncate text-xs\">\n                                 Enterprise\n                              </span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent className=\"px-1.5 md:px-0\">\n                     <SidebarMenu>\n                        {data.navMain.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 tooltip={{\n                                    children: item.title,\n                                    hidden: false,\n                                 }}\n                                 onClick={() => {\n                                    setActiveItem(item)\n                                    const mail = data.mails.sort(\n                                       () => Math.random() - 0.5,\n                                    )\n                                    setMails(\n                                       mail.slice(\n                                          0,\n                                          Math.max(\n                                             5,\n                                             Math.floor(Math.random() * 10) + 1,\n                                          ),\n                                       ),\n                                    )\n                                    setOpen(true)\n                                 }}\n                                 isActive={activeItem.title === item.title}\n                                 className=\"px-2.5 md:px-2\"\n                              >\n                                 <item.icon />\n                                 <span>{item.title}</span>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <NavUser user={data.user} />\n            </SidebarFooter>\n         </Sidebar>\n\n         {/* This is the second sidebar */}\n         {/* We disable collapsible and let it fill remaining space */}\n         <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n            <SidebarHeader className=\"gap-3.5 border-b p-4\">\n               <div className=\"flex w-full items-center justify-between\">\n                  <div className=\"text-base font-medium text-foreground\">\n                     {activeItem.title}\n                  </div>\n                  <Label className=\"flex items-center gap-2 text-sm\">\n                     <span>Unreads</span>\n                     <Switch className=\"shadow-none\" />\n                  </Label>\n               </div>\n               <SidebarInput placeholder=\"Type to search...\" />\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup className=\"px-0\">\n                  <SidebarGroupContent>\n                     {mails.map((mail) => (\n                        <a\n                           href=\"#\"\n                           key={mail.email}\n                           className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                        >\n                           <div className=\"flex w-full items-center gap-2\">\n                              <span>{mail.name}</span>{\" \"}\n                              <span className=\"ml-auto text-xs\">\n                                 {mail.date}\n                              </span>\n                           </div>\n                           <span className=\"font-medium\">{mail.subject}</span>\n                           <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                              {mail.teaser}\n                           </span>\n                        </a>\n                     ))}\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-09/components/nav-user.tsx",
-      "content": "'use client'\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from 'lucide-react'\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/miami/ui/avatar'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n                  >\n                     <Avatar className=\"size-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"size-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                           <span className=\"truncate text-xs\">{user.email}</span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-09/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/miami/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-10.json b/apps/web/public/r/styles/miami/sidebar-10.json
index 5e1597c3..5855a50f 100644
--- a/apps/web/public/r/styles/miami/sidebar-10.json
+++ b/apps/web/public/r/styles/miami/sidebar-10.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-10",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar in a popover.",
   "registryDependencies": [
     "sidebar",
@@ -12,52 +14,56 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-10/components/app-sidebar'\nimport { NavActions } from '~/registry/miami/block/sidebar-10/components/nav-actions'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-14 shrink-0 items-center gap-2\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n               <div className=\"ml-auto px-3\">\n                  <NavActions />\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n               <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n               <div className=\"bg-muted/50 mx-auto size-full max-w-3xl rounded-xl\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"~/registry/miami/blocks/sidebar-10/components/nav-actions\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-14 shrink-0 items-center gap-2\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n               <div className=\"ml-auto px-3\">\n                  <NavActions />\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-10/components/app-sidebar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   AudioWaveform,\n   Blocks,\n   Calendar,\n   Command,\n   Home,\n   Inbox,\n   MessageCircleQuestion,\n   Search,\n   Settings2,\n   Sparkles,\n   Trash2,\n} from 'lucide-react'\n\nimport { NavFavorites } from '~/registry/miami/block/sidebar-10/components/nav-favorites'\nimport { NavMain } from '~/registry/miami/block/sidebar-10/components/nav-main'\nimport { NavSecondary } from '~/registry/miami/block/sidebar-10/components/nav-secondary'\nimport { NavWorkspaces } from '~/registry/miami/block/sidebar-10/components/nav-workspaces'\nimport { TeamSwitcher } from '~/registry/miami/block/sidebar-10/components/team-switcher'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarHeader,\n   SidebarRail,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: 'Acme Inc',\n         logo: Command,\n         plan: 'Enterprise',\n      },\n      {\n         name: 'Acme Corp.',\n         logo: AudioWaveform,\n         plan: 'Startup',\n      },\n      {\n         name: 'Evil Corp.',\n         logo: Command,\n         plan: 'Free',\n      },\n   ],\n   navMain: [\n      {\n         title: 'Search',\n         url: '#',\n         icon: Search,\n      },\n      {\n         title: 'Ask AI',\n         url: '#',\n         icon: Sparkles,\n      },\n      {\n         title: 'Home',\n         url: '#',\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: 'Inbox',\n         url: '#',\n         icon: Inbox,\n         badge: '10',\n      },\n   ],\n   navSecondary: [\n      {\n         title: 'Calendar',\n         url: '#',\n         icon: Calendar,\n      },\n      {\n         title: 'Settings',\n         url: '#',\n         icon: Settings2,\n      },\n      {\n         title: 'Templates',\n         url: '#',\n         icon: Blocks,\n      },\n      {\n         title: 'Trash',\n         url: '#',\n         icon: Trash2,\n      },\n      {\n         title: 'Help',\n         url: '#',\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: 'Project Management & Task Tracking',\n         url: '#',\n         emoji: '📊',\n      },\n      {\n         name: 'Family Recipe Collection & Meal Planning',\n         url: '#',\n         emoji: '🍳',\n      },\n      {\n         name: 'Fitness Tracker & Workout Routines',\n         url: '#',\n         emoji: '💪',\n      },\n      {\n         name: 'Book Notes & Reading List',\n         url: '#',\n         emoji: '📚',\n      },\n      {\n         name: 'Sustainable Gardening Tips & Plant Care',\n         url: '#',\n         emoji: '🌱',\n      },\n      {\n         name: 'Language Learning Progress & Resources',\n         url: '#',\n         emoji: '🗣️',\n      },\n      {\n         name: 'Home Renovation Ideas & Budget Tracker',\n         url: '#',\n         emoji: '🏠',\n      },\n      {\n         name: 'Personal Finance & Investment Portfolio',\n         url: '#',\n         emoji: '💰',\n      },\n      {\n         name: 'Movie & TV Show Watchlist with Reviews',\n         url: '#',\n         emoji: '🎬',\n      },\n      {\n         name: 'Daily Habit Tracker & Goal Setting',\n         url: '#',\n         emoji: '✅',\n      },\n   ],\n   workspaces: [\n      {\n         name: 'Personal Life Management',\n         emoji: '🏠',\n         pages: [\n            {\n               name: 'Daily Journal & Reflection',\n               url: '#',\n               emoji: '📔',\n            },\n            {\n               name: 'Health & Wellness Tracker',\n               url: '#',\n               emoji: '🍏',\n            },\n            {\n               name: 'Personal Growth & Learning Goals',\n               url: '#',\n               emoji: '🌟',\n            },\n         ],\n      },\n      {\n         name: 'Professional Development',\n         emoji: '💼',\n         pages: [\n            {\n               name: 'Career Objectives & Milestones',\n               url: '#',\n               emoji: '🎯',\n            },\n            {\n               name: 'Skill Acquisition & Training Log',\n               url: '#',\n               emoji: '🧠',\n            },\n            {\n               name: 'Networking Contacts & Events',\n               url: '#',\n               emoji: '🤝',\n            },\n         ],\n      },\n      {\n         name: 'Creative Projects',\n         emoji: '🎨',\n         pages: [\n            {\n               name: 'Writing Ideas & Story Outlines',\n               url: '#',\n               emoji: '✍️',\n            },\n            {\n               name: 'Art & Design Portfolio',\n               url: '#',\n               emoji: '🖼️',\n            },\n            {\n               name: 'Music Composition & Practice Log',\n               url: '#',\n               emoji: '🎵',\n            },\n         ],\n      },\n      {\n         name: 'Home Management',\n         emoji: '🏡',\n         pages: [\n            {\n               name: 'Household Budget & Expense Tracking',\n               url: '#',\n               emoji: '💰',\n            },\n            {\n               name: 'Home Maintenance Schedule & Tasks',\n               url: '#',\n               emoji: '🔧',\n            },\n            {\n               name: 'Family Calendar & Event Planning',\n               url: '#',\n               emoji: '📅',\n            },\n         ],\n      },\n      {\n         name: 'Travel & Adventure',\n         emoji: '🧳',\n         pages: [\n            {\n               name: 'Trip Planning & Itineraries',\n               url: '#',\n               emoji: '🗺️',\n            },\n            {\n               name: 'Travel Bucket List & Inspiration',\n               url: '#',\n               emoji: '🌎',\n            },\n            {\n               name: 'Travel Journal & Photo Gallery',\n               url: '#',\n               emoji: '📸',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   Blocks,\n   Calendar,\n   Command,\n   Home,\n   Inbox,\n   MessageCircleQuestion,\n   Search,\n   Settings2,\n   Sparkles,\n   Trash2,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavFavorites } from \"~/registry/miami/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"~/registry/miami/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"~/registry/miami/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"~/registry/miami/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"~/registry/miami/blocks/sidebar-10/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarHeader,\n   SidebarRail,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: Calendar,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-actions.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   ArrowDown,\n   ArrowUp,\n   Bell,\n   Copy,\n   CornerUpLeft,\n   CornerUpRight,\n   FileText,\n   GalleryVerticalEnd,\n   LineChart,\n   Link,\n   MoreHorizontal,\n   Settings2,\n   Star,\n   Trash,\n   Trash2,\n} from 'lucide-react'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from '~/registry/miami/ui/popover'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/miami/ui/sidebar'\n\nconst data = [\n   [\n      {\n         label: 'Customize Page',\n         icon: Settings2,\n      },\n      {\n         label: 'Turn into wiki',\n         icon: FileText,\n      },\n   ],\n   [\n      {\n         label: 'Copy Link',\n         icon: Link,\n      },\n      {\n         label: 'Duplicate',\n         icon: Copy,\n      },\n      {\n         label: 'Move to',\n         icon: CornerUpRight,\n      },\n      {\n         label: 'Move to Trash',\n         icon: Trash2,\n      },\n   ],\n   [\n      {\n         label: 'Undo',\n         icon: CornerUpLeft,\n      },\n      {\n         label: 'View analytics',\n         icon: LineChart,\n      },\n      {\n         label: 'Version History',\n         icon: GalleryVerticalEnd,\n      },\n      {\n         label: 'Show delete pages',\n         icon: Trash,\n      },\n      {\n         label: 'Notifications',\n         icon: Bell,\n      },\n   ],\n   [\n      {\n         label: 'Import',\n         icon: ArrowUp,\n      },\n      {\n         label: 'Export',\n         icon: ArrowDown,\n      },\n   ],\n]\n\nexport function NavActions() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      setIsOpen(true)\n   }, [])\n\n   return (\n      <div className=\"flex items-center gap-2 text-sm\">\n         <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n            Edit Oct 08\n         </div>\n         <Button variant=\"ghost\" size=\"icon\" className=\"size-7\">\n            <Star />\n         </Button>\n         <Popover open={isOpen} onOpenChange={setIsOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"data-[state=open]:bg-accent size-7\"\n               >\n                  <MoreHorizontal />\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent\n               className=\"w-56 overflow-hidden rounded-lg p-0\"\n               align=\"end\"\n            >\n               <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n                  <SidebarContent>\n                     {data.map((group, index) => (\n                        <SidebarGroup key={index} className=\"border-b last:border-none\">\n                           <SidebarGroupContent className=\"gap-0\">\n                              <SidebarMenu>\n                                 {group.map((item, index) => (\n                                    <SidebarMenuItem key={index}>\n                                       <SidebarMenuButton>\n                                          <item.icon />\n                                          {' '}\n                                          <span>{item.label}</span>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </SidebarGroup>\n                     ))}\n                  </SidebarContent>\n               </Sidebar>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/nav-actions.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowDown,\n   ArrowUp,\n   Bell,\n   Copy,\n   CornerUpLeft,\n   CornerUpRight,\n   FileText,\n   GalleryVerticalEnd,\n   LineChart,\n   Link,\n   MoreHorizontal,\n   Settings2,\n   Star,\n   Trash,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nconst data = [\n   [\n      {\n         label: \"Customize Page\",\n         icon: Settings2,\n      },\n      {\n         label: \"Turn into wiki\",\n         icon: FileText,\n      },\n   ],\n   [\n      {\n         label: \"Copy Link\",\n         icon: Link,\n      },\n      {\n         label: \"Duplicate\",\n         icon: Copy,\n      },\n      {\n         label: \"Move to\",\n         icon: CornerUpRight,\n      },\n      {\n         label: \"Move to Trash\",\n         icon: Trash2,\n      },\n   ],\n   [\n      {\n         label: \"Undo\",\n         icon: CornerUpLeft,\n      },\n      {\n         label: \"View analytics\",\n         icon: LineChart,\n      },\n      {\n         label: \"Version History\",\n         icon: GalleryVerticalEnd,\n      },\n      {\n         label: \"Show delete pages\",\n         icon: Trash,\n      },\n      {\n         label: \"Notifications\",\n         icon: Bell,\n      },\n   ],\n   [\n      {\n         label: \"Import\",\n         icon: ArrowUp,\n      },\n      {\n         label: \"Export\",\n         icon: ArrowDown,\n      },\n   ],\n]\n\nexport function NavActions() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      setIsOpen(true)\n   }, [])\n\n   return (\n      <div className=\"flex items-center gap-2 text-sm\">\n         <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n            Edit Oct 08\n         </div>\n         <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n            <Star />\n         </Button>\n         <Popover open={isOpen} onOpenChange={setIsOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-7 w-7 data-[state=open]:bg-accent\"\n               >\n                  <MoreHorizontal />\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent\n               className=\"w-56 overflow-hidden rounded-lg p-0\"\n               align=\"end\"\n            >\n               <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n                  <SidebarContent>\n                     {data.map((group, index) => (\n                        <SidebarGroup\n                           key={index}\n                           className=\"border-b last:border-none\"\n                        >\n                           <SidebarGroupContent className=\"gap-0\">\n                              <SidebarMenu>\n                                 {group.map((item, index) => (\n                                    <SidebarMenuItem key={index}>\n                                       <SidebarMenuButton>\n                                          <item.icon />{\" \"}\n                                          <span>{item.label}</span>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </SidebarGroup>\n                     ))}\n                  </SidebarContent>\n               </Sidebar>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-favorites.tsx",
-      "content": "'use client'\n\nimport {\n   ArrowUpRight,\n   Link,\n   MoreHorizontal,\n   StarOff,\n   Trash2,\n} from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map(item => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? 'bottom' : 'right'}\n                        align={isMobile ? 'end' : 'start'}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowUpRight,\n   Link,\n   MoreHorizontal,\n   StarOff,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-main.tsx",
-      "content": "'use client'\n\nimport type { LucideIcon } from 'lucide-react'\n\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map(item => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport type { LucideIcon } from \"lucide-react\"\n\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-secondary.tsx",
-      "content": "import React from 'react'\nimport type { LucideIcon } from 'lucide-react'\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map(item => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-workspaces.tsx",
-      "content": "import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/miami/ui/collapsible'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map(workspace => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map(page => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-10/components/team-switcher.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronDown, Plus } from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘\n                           {index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"text-muted-foreground font-medium\">Add team</div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-10/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-11.json b/apps/web/public/r/styles/miami/sidebar-11.json
index 1c3326ed..f696c69e 100644
--- a/apps/web/public/r/styles/miami/sidebar-11.json
+++ b/apps/web/public/r/styles/miami/sidebar-11.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-11",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar with a collapsible file tree.",
   "registryDependencies": [
     "sidebar",
@@ -10,16 +12,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-11/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>button.tsx</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-11/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>button.tsx</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-11/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { ChevronRight, File, Folder } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/miami/ui/collapsible'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarRail,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   changes: [\n      {\n         file: 'README.md',\n         state: 'M',\n      },\n      {\n         file: 'api/hello/route.ts',\n         state: 'U',\n      },\n      {\n         file: 'app/layout.tsx',\n         state: 'M',\n      },\n   ],\n   tree: [\n      [\n         'app',\n         [\n            'api',\n            ['hello', ['route.ts']],\n            'page.tsx',\n            'layout.tsx',\n            ['blog', ['page.tsx']],\n         ],\n      ],\n      [\n         'components',\n         ['ui', 'button.tsx', 'card.tsx'],\n         'header.tsx',\n         'footer.tsx',\n      ],\n      ['lib', ['util.ts']],\n      ['public', 'favicon.ico', 'vercel.svg'],\n      '.eslintrc.json',\n      '.gitignore',\n      'next.config.js',\n      'tailwind.config.js',\n      'package.json',\n      'README.md',\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Changes</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.changes.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                           <SidebarMenuButton>\n                              <File />\n                              {item.file}\n                           </SidebarMenuButton>\n                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n            <SidebarGroup>\n               <SidebarGroupLabel>Files</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.tree.map((item, index) => (\n                        <Tree key={index} item={item} />\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n   const [name, ...items] = Array.isArray(item) ? item : [item]\n\n   if (!items.length) {\n      return (\n         <SidebarMenuButton\n            isActive={name === 'button.tsx'}\n            className=\"data-[active=true]:bg-transparent\"\n         >\n            <File />\n            {name}\n         </SidebarMenuButton>\n      )\n   }\n\n   return (\n      <SidebarMenuItem>\n         <Collapsible\n            className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n            defaultOpen={name === 'components' || name === 'ui'}\n         >\n            <CollapsibleTrigger asChild>\n               <SidebarMenuButton>\n                  <ChevronRight className=\"transition-transform\" />\n                  <Folder />\n                  {name}\n               </SidebarMenuButton>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n               <SidebarMenuSub>\n                  {items.map((subItem, index) => (\n                     <Tree key={index} item={subItem} />\n                  ))}\n               </SidebarMenuSub>\n            </CollapsibleContent>\n         </Collapsible>\n      </SidebarMenuItem>\n   )\n}\n",
+      "path": "blocks/sidebar-11/components/app-sidebar.tsx",
+      "content": "import { ChevronRight, File, Folder } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarRail,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   changes: [\n      {\n         file: \"README.md\",\n         state: \"M\",\n      },\n      {\n         file: \"api/hello/route.ts\",\n         state: \"U\",\n      },\n      {\n         file: \"app/layout.tsx\",\n         state: \"M\",\n      },\n   ],\n   tree: [\n      [\n         \"app\",\n         [\n            \"api\",\n            [\"hello\", [\"route.ts\"]],\n            \"page.tsx\",\n            \"layout.tsx\",\n            [\"blog\", [\"page.tsx\"]],\n         ],\n      ],\n      [\n         \"components\",\n         [\"ui\", \"button.tsx\", \"card.tsx\"],\n         \"header.tsx\",\n         \"footer.tsx\",\n      ],\n      [\"lib\", [\"util.ts\"]],\n      [\"public\", \"favicon.ico\", \"vercel.svg\"],\n      \".eslintrc.json\",\n      \".gitignore\",\n      \"next.config.js\",\n      \"tailwind.config.js\",\n      \"package.json\",\n      \"README.md\",\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Changes</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.changes.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                           <SidebarMenuButton>\n                              <File />\n                              {item.file}\n                           </SidebarMenuButton>\n                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n            <SidebarGroup>\n               <SidebarGroupLabel>Files</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.tree.map((item, index) => (\n                        <Tree key={index} item={item} />\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n   const [name, ...items] = Array.isArray(item) ? item : [item]\n\n   if (!items.length) {\n      return (\n         <SidebarMenuButton\n            isActive={name === \"button.tsx\"}\n            className=\"data-[active=true]:bg-transparent\"\n         >\n            <File />\n            {name}\n         </SidebarMenuButton>\n      )\n   }\n\n   return (\n      <SidebarMenuItem>\n         <Collapsible\n            className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n            defaultOpen={name === \"components\" || name === \"ui\"}\n         >\n            <CollapsibleTrigger asChild>\n               <SidebarMenuButton>\n                  <ChevronRight className=\"transition-transform\" />\n                  <Folder />\n                  {name}\n               </SidebarMenuButton>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n               <SidebarMenuSub>\n                  {items.map((subItem, index) => (\n                     <Tree key={index} item={subItem} />\n                  ))}\n               </SidebarMenuSub>\n            </CollapsibleContent>\n         </Collapsible>\n      </SidebarMenuItem>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-12.json b/apps/web/public/r/styles/miami/sidebar-12.json
index 9fead7aa..be3af90b 100644
--- a/apps/web/public/r/styles/miami/sidebar-12.json
+++ b/apps/web/public/r/styles/miami/sidebar-12.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-12",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar with a calendar.",
   "registryDependencies": [
     "sidebar",
@@ -13,34 +15,38 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-12/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>October 2024</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n                  {Array.from({ length: 20 }).map((_, i) => (\n                     <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n                  ))}\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-12/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>October 2024</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n                  {Array.from({ length: 20 }).map((_, i) => (\n                     <div\n                        key={i}\n                        className=\"aspect-square rounded-xl bg-muted/50\"\n                     />\n                  ))}\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-12/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\nimport { Plus } from 'lucide-react'\n\nimport { Calendars } from '~/registry/miami/block/sidebar-12/components/calendars'\nimport { DatePicker } from '~/registry/miami/block/sidebar-12/components/date-picker'\nimport { NavUser } from '~/registry/miami/block/sidebar-12/components/nav-user'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n   SidebarSeparator,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   user: {\n      name: 'shadcn',\n      email: 'm@example.com',\n      avatar: '/avatars/nyxb.jpg',\n   },\n   calendars: [\n      {\n         name: 'My Calendars',\n         items: ['Personal', 'Work', 'Family'],\n      },\n      {\n         name: 'Favorites',\n         items: ['Holidays', 'Birthdays'],\n      },\n      {\n         name: 'Other',\n         items: ['Travel', 'Reminders', 'Deadlines'],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "import { Plus } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { Calendars } from \"~/registry/miami/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"~/registry/miami/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"~/registry/miami/blocks/sidebar-12/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n   SidebarSeparator,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-12/components/calendars.tsx",
-      "content": "import * as React from 'react'\nimport { Check, ChevronRight } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/miami/ui/collapsible'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarSeparator,\n} from '~/registry/miami/ui/sidebar'\n\nexport function Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}\n                           {' '}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n",
+      "path": "blocks/sidebar-12/components/calendars.tsx",
+      "content": "import { Check, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarSeparator,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-12/components/date-picker.tsx",
-      "content": "import { Calendar } from '~/registry/miami/ui/calendar'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n} from '~/registry/miami/ui/sidebar'\n\nexport function DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-12/components/date-picker.tsx",
+      "content": "import { Calendar } from \"~/registry/miami/ui/calendar\"\nimport { SidebarGroup, SidebarGroupContent } from \"~/registry/miami/ui/sidebar\"\n\nexport function DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-12/components/nav-user.tsx",
-      "content": "'use client'\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from 'lucide-react'\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/miami/ui/avatar'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"size-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"size-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                           <span className=\"truncate text-xs\">{user.email}</span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-12/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/miami/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-13.json b/apps/web/public/r/styles/miami/sidebar-13.json
index 6b3ccf48..e60fe0bc 100644
--- a/apps/web/public/r/styles/miami/sidebar-13.json
+++ b/apps/web/public/r/styles/miami/sidebar-13.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-13",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar in a dialog.",
   "registryDependencies": [
     "sidebar",
@@ -10,16 +12,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-13/page.tsx",
-      "content": "import { SettingsDialog } from '~/registry/miami/block/sidebar-13/components/settings-dialog'\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-svh items-center justify-center\">\n         <SettingsDialog />\n      </div>\n   )\n}\n",
+      "path": "blocks/sidebar-13/page.tsx",
+      "content": "import { SettingsDialog } from \"~/registry/miami/blocks/sidebar-13/components/settings-dialog\"\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-svh items-center justify-center\">\n         <SettingsDialog />\n      </div>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-13/components/settings-dialog.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   Bell,\n   Check,\n   Globe,\n   Home,\n   Keyboard,\n   Link,\n   Lock,\n   Menu,\n   MessageCircle,\n   Paintbrush,\n   Settings,\n   Video,\n} from 'lucide-react'\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogTitle,\n   DialogTrigger,\n} from '~/registry/miami/ui/dialog'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from '~/registry/miami/ui/sidebar'\n\nconst data = {\n   nav: [\n      { name: 'Notifications', icon: Bell },\n      { name: 'Navigation', icon: Menu },\n      { name: 'Home', icon: Home },\n      { name: 'Appearance', icon: Paintbrush },\n      { name: 'Messages & media', icon: MessageCircle },\n      { name: 'Language & region', icon: Globe },\n      { name: 'Accessibility', icon: Keyboard },\n      { name: 'Mark as read', icon: Check },\n      { name: 'Audio & video', icon: Video },\n      { name: 'Connected accounts', icon: Link },\n      { name: 'Privacy & visibility', icon: Lock },\n      { name: 'Advanced', icon: Settings },\n   ],\n}\n\nexport function SettingsDialog() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <Dialog open={open} onOpenChange={setOpen}>\n         <DialogTrigger asChild>\n            <Button size=\"sm\">Open Dialog</Button>\n         </DialogTrigger>\n         <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n            <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n            <DialogDescription className=\"sr-only\">\n               Customize your settings here.\n            </DialogDescription>\n            <SidebarProvider className=\"items-start\">\n               <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n                  <SidebarContent>\n                     <SidebarGroup>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {data.nav.map(item => (\n                                 <SidebarMenuItem key={item.name}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={item.name === 'Messages & media'}\n                                    >\n                                       <a href=\"#\">\n                                          <item.icon />\n                                          <span>{item.name}</span>\n                                       </a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </SidebarGroup>\n                  </SidebarContent>\n               </Sidebar>\n               <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n                  <header className=\"flex h-16 shrink-0 items-center gap-2 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                        <Breadcrumb>\n                           <BreadcrumbList>\n                              <BreadcrumbItem className=\"hidden md:block\">\n                                 <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                              </BreadcrumbItem>\n                              <BreadcrumbSeparator className=\"hidden md:block\" />\n                              <BreadcrumbItem>\n                                 <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                              </BreadcrumbItem>\n                           </BreadcrumbList>\n                        </Breadcrumb>\n                     </div>\n                  </header>\n                  <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n                     {Array.from({ length: 10 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                        />\n                     ))}\n                  </div>\n               </main>\n            </SidebarProvider>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "path": "blocks/sidebar-13/components/settings-dialog.tsx",
+      "content": "\"use client\"\n\nimport {\n   Bell,\n   Check,\n   Globe,\n   Home,\n   Keyboard,\n   Link,\n   Lock,\n   Menu,\n   MessageCircle,\n   Paintbrush,\n   Settings,\n   Video,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogTitle,\n   DialogTrigger,\n} from \"~/registry/miami/ui/dialog\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/miami/ui/sidebar\"\n\nconst data = {\n   nav: [\n      { name: \"Notifications\", icon: Bell },\n      { name: \"Navigation\", icon: Menu },\n      { name: \"Home\", icon: Home },\n      { name: \"Appearance\", icon: Paintbrush },\n      { name: \"Messages & media\", icon: MessageCircle },\n      { name: \"Language & region\", icon: Globe },\n      { name: \"Accessibility\", icon: Keyboard },\n      { name: \"Mark as read\", icon: Check },\n      { name: \"Audio & video\", icon: Video },\n      { name: \"Connected accounts\", icon: Link },\n      { name: \"Privacy & visibility\", icon: Lock },\n      { name: \"Advanced\", icon: Settings },\n   ],\n}\n\nexport function SettingsDialog() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <Dialog open={open} onOpenChange={setOpen}>\n         <DialogTrigger asChild>\n            <Button size=\"sm\">Open Dialog</Button>\n         </DialogTrigger>\n         <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n            <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n            <DialogDescription className=\"sr-only\">\n               Customize your settings here.\n            </DialogDescription>\n            <SidebarProvider className=\"items-start\">\n               <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n                  <SidebarContent>\n                     <SidebarGroup>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {data.nav.map((item) => (\n                                 <SidebarMenuItem key={item.name}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={\n                                          item.name === \"Messages & media\"\n                                       }\n                                    >\n                                       <a href=\"#\">\n                                          <item.icon />\n                                          <span>{item.name}</span>\n                                       </a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </SidebarGroup>\n                  </SidebarContent>\n               </Sidebar>\n               <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n                  <header className=\"flex h-16 shrink-0 items-center gap-2 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                        <Breadcrumb>\n                           <BreadcrumbList>\n                              <BreadcrumbItem className=\"hidden md:block\">\n                                 <BreadcrumbLink href=\"#\">\n                                    Settings\n                                 </BreadcrumbLink>\n                              </BreadcrumbItem>\n                              <BreadcrumbSeparator className=\"hidden md:block\" />\n                              <BreadcrumbItem>\n                                 <BreadcrumbPage>\n                                    Messages & media\n                                 </BreadcrumbPage>\n                              </BreadcrumbItem>\n                           </BreadcrumbList>\n                        </Breadcrumb>\n                     </div>\n                  </header>\n                  <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n                     {Array.from({ length: 10 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                        />\n                     ))}\n                  </div>\n               </main>\n            </SidebarProvider>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-14.json b/apps/web/public/r/styles/miami/sidebar-14.json
index ac5ef4e6..03c2b5df 100644
--- a/apps/web/public/r/styles/miami/sidebar-14.json
+++ b/apps/web/public/r/styles/miami/sidebar-14.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-14",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A sidebar on the right.",
   "registryDependencies": [
     "sidebar",
@@ -8,16 +10,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from '~/registry/miami/block/sidebar-14/components/app-sidebar'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from '~/registry/miami/ui/breadcrumb'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n               <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n         </SidebarInset>\n         <AppSidebar side=\"right\" />\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-14/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n               <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n         <AppSidebar side=\"right\" />\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-14/components/app-sidebar.tsx",
-      "content": "import * as React from 'react'\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: 'Getting Started',\n         url: '#',\n         items: [\n            {\n               title: 'Installation',\n               url: '#',\n            },\n            {\n               title: 'Project Structure',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Building Your Application',\n         url: '#',\n         items: [\n            {\n               title: 'Routing',\n               url: '#',\n            },\n            {\n               title: 'Data Fetching',\n               url: '#',\n               isActive: true,\n            },\n            {\n               title: 'Rendering',\n               url: '#',\n            },\n            {\n               title: 'Caching',\n               url: '#',\n            },\n            {\n               title: 'Styling',\n               url: '#',\n            },\n            {\n               title: 'Optimizing',\n               url: '#',\n            },\n            {\n               title: 'Configuring',\n               url: '#',\n            },\n            {\n               title: 'Testing',\n               url: '#',\n            },\n            {\n               title: 'Authentication',\n               url: '#',\n            },\n            {\n               title: 'Deploying',\n               url: '#',\n            },\n            {\n               title: 'Upgrading',\n               url: '#',\n            },\n            {\n               title: 'Examples',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'API Reference',\n         url: '#',\n         items: [\n            {\n               title: 'Components',\n               url: '#',\n            },\n            {\n               title: 'File Conventions',\n               url: '#',\n            },\n            {\n               title: 'Functions',\n               url: '#',\n            },\n            {\n               title: 'next.config.js Options',\n               url: '#',\n            },\n            {\n               title: 'CLI',\n               url: '#',\n            },\n            {\n               title: 'Edge Runtime',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Architecture',\n         url: '#',\n         items: [\n            {\n               title: 'Accessibility',\n               url: '#',\n            },\n            {\n               title: 'Fast Refresh',\n               url: '#',\n            },\n            {\n               title: 'Next.js Compiler',\n               url: '#',\n            },\n            {\n               title: 'Supported Browsers',\n               url: '#',\n            },\n            {\n               title: 'Turbopack',\n               url: '#',\n            },\n         ],\n      },\n      {\n         title: 'Community',\n         url: '#',\n         items: [\n            {\n               title: 'Contribution Guide',\n               url: '#',\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.navMain.map(item => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length\n                              ? (\n                                    <SidebarMenuSub>\n                                       {item.items.map(item => (\n                                          <SidebarMenuSubItem key={item.title}>\n                                             <SidebarMenuSubButton\n                                                asChild\n                                                isActive={item.isActive}\n                                             >\n                                                <a href={item.url}>{item.title}</a>\n                                             </SidebarMenuSubButton>\n                                          </SidebarMenuSubItem>\n                                       ))}\n                                    </SidebarMenuSub>\n                                 )\n                              : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-14/components/app-sidebar.tsx",
+      "content": "import type * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-15.json b/apps/web/public/r/styles/miami/sidebar-15.json
index 6bdae1fb..ce848ace 100644
--- a/apps/web/public/r/styles/miami/sidebar-15.json
+++ b/apps/web/public/r/styles/miami/sidebar-15.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar-15",
   "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
   "description": "A left and right sidebar.",
   "registryDependencies": [
     "sidebar",
@@ -14,70 +16,74 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from '~/registry/miami/block/sidebar-15/components/sidebar-left'\nimport { SidebarRight } from '~/registry/miami/block/sidebar-15/components/sidebar-right'\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from '~/registry/miami/ui/breadcrumb'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from '~/registry/miami/ui/sidebar'\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarLeft />\n         <SidebarInset>\n            <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n               <div className=\"bg-muted/50 mx-auto h-screen w-full max-w-3xl rounded-xl\" />\n            </div>\n         </SidebarInset>\n         <SidebarRight />\n      </SidebarProvider>\n   )\n}\n",
+      "path": "blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"~/registry/miami/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"~/registry/miami/blocks/sidebar-15/components/sidebar-right\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarLeft />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n         <SidebarRight />\n      </SidebarProvider>\n   )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-15/components/calendars.tsx",
-      "content": "import * as React from 'react'\nimport { Check, ChevronRight } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/miami/ui/collapsible'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarSeparator,\n} from '~/registry/miami/ui/sidebar'\n\nexport function Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}\n                           {' '}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/calendars.tsx",
+      "content": "import { Check, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarSeparator,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/date-picker.tsx",
-      "content": "import { Calendar } from '~/registry/miami/ui/calendar'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n} from '~/registry/miami/ui/sidebar'\n\nexport function DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/date-picker.tsx",
+      "content": "import { Calendar } from \"~/registry/miami/ui/calendar\"\nimport { SidebarGroup, SidebarGroupContent } from \"~/registry/miami/ui/sidebar\"\n\nexport function DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-favorites.tsx",
-      "content": "'use client'\n\nimport {\n   ArrowUpRight,\n   Link,\n   MoreHorizontal,\n   StarOff,\n   Trash2,\n} from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map(item => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? 'bottom' : 'right'}\n                        align={isMobile ? 'end' : 'start'}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowUpRight,\n   Link,\n   MoreHorizontal,\n   StarOff,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-main.tsx",
-      "content": "'use client'\n\nimport type { LucideIcon } from 'lucide-react'\n\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map(item => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport type { LucideIcon } from \"lucide-react\"\n\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-secondary.tsx",
-      "content": "import React from 'react'\nimport type { LucideIcon } from 'lucide-react'\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map(item => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-user.tsx",
-      "content": "'use client'\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from 'lucide-react'\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from '~/registry/miami/ui/avatar'\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"size-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"size-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={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-semibold\">{user.name}</span>\n                           <span className=\"truncate text-xs\">{user.email}</span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/miami/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-workspaces.tsx",
-      "content": "import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react'\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from '~/registry/miami/ui/collapsible'\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map(workspace => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map(page => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/sidebar-left.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n   AudioWaveform,\n   Blocks,\n   Calendar,\n   Command,\n   Home,\n   Inbox,\n   MessageCircleQuestion,\n   Search,\n   Settings2,\n   Sparkles,\n   Trash2,\n} from 'lucide-react'\n\nimport { NavFavorites } from '~/registry/miami/block/sidebar-15/components/nav-favorites'\nimport { NavMain } from '~/registry/miami/block/sidebar-15/components/nav-main'\nimport { NavSecondary } from '~/registry/miami/block/sidebar-15/components/nav-secondary'\nimport { NavWorkspaces } from '~/registry/miami/block/sidebar-15/components/nav-workspaces'\nimport { TeamSwitcher } from '~/registry/miami/block/sidebar-15/components/team-switcher'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarHeader,\n   SidebarRail,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: 'Acme Inc',\n         logo: Command,\n         plan: 'Enterprise',\n      },\n      {\n         name: 'Acme Corp.',\n         logo: AudioWaveform,\n         plan: 'Startup',\n      },\n      {\n         name: 'Evil Corp.',\n         logo: Command,\n         plan: 'Free',\n      },\n   ],\n   navMain: [\n      {\n         title: 'Search',\n         url: '#',\n         icon: Search,\n      },\n      {\n         title: 'Ask AI',\n         url: '#',\n         icon: Sparkles,\n      },\n      {\n         title: 'Home',\n         url: '#',\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: 'Inbox',\n         url: '#',\n         icon: Inbox,\n         badge: '10',\n      },\n   ],\n   navSecondary: [\n      {\n         title: 'Calendar',\n         url: '#',\n         icon: Calendar,\n      },\n      {\n         title: 'Settings',\n         url: '#',\n         icon: Settings2,\n      },\n      {\n         title: 'Templates',\n         url: '#',\n         icon: Blocks,\n      },\n      {\n         title: 'Trash',\n         url: '#',\n         icon: Trash2,\n      },\n      {\n         title: 'Help',\n         url: '#',\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: 'Project Management & Task Tracking',\n         url: '#',\n         emoji: '📊',\n      },\n      {\n         name: 'Family Recipe Collection & Meal Planning',\n         url: '#',\n         emoji: '🍳',\n      },\n      {\n         name: 'Fitness Tracker & Workout Routines',\n         url: '#',\n         emoji: '💪',\n      },\n      {\n         name: 'Book Notes & Reading List',\n         url: '#',\n         emoji: '📚',\n      },\n      {\n         name: 'Sustainable Gardening Tips & Plant Care',\n         url: '#',\n         emoji: '🌱',\n      },\n      {\n         name: 'Language Learning Progress & Resources',\n         url: '#',\n         emoji: '🗣️',\n      },\n      {\n         name: 'Home Renovation Ideas & Budget Tracker',\n         url: '#',\n         emoji: '🏠',\n      },\n      {\n         name: 'Personal Finance & Investment Portfolio',\n         url: '#',\n         emoji: '💰',\n      },\n      {\n         name: 'Movie & TV Show Watchlist with Reviews',\n         url: '#',\n         emoji: '🎬',\n      },\n      {\n         name: 'Daily Habit Tracker & Goal Setting',\n         url: '#',\n         emoji: '✅',\n      },\n   ],\n   workspaces: [\n      {\n         name: 'Personal Life Management',\n         emoji: '🏠',\n         pages: [\n            {\n               name: 'Daily Journal & Reflection',\n               url: '#',\n               emoji: '📔',\n            },\n            {\n               name: 'Health & Wellness Tracker',\n               url: '#',\n               emoji: '🍏',\n            },\n            {\n               name: 'Personal Growth & Learning Goals',\n               url: '#',\n               emoji: '🌟',\n            },\n         ],\n      },\n      {\n         name: 'Professional Development',\n         emoji: '💼',\n         pages: [\n            {\n               name: 'Career Objectives & Milestones',\n               url: '#',\n               emoji: '🎯',\n            },\n            {\n               name: 'Skill Acquisition & Training Log',\n               url: '#',\n               emoji: '🧠',\n            },\n            {\n               name: 'Networking Contacts & Events',\n               url: '#',\n               emoji: '🤝',\n            },\n         ],\n      },\n      {\n         name: 'Creative Projects',\n         emoji: '🎨',\n         pages: [\n            {\n               name: 'Writing Ideas & Story Outlines',\n               url: '#',\n               emoji: '✍️',\n            },\n            {\n               name: 'Art & Design Portfolio',\n               url: '#',\n               emoji: '🖼️',\n            },\n            {\n               name: 'Music Composition & Practice Log',\n               url: '#',\n               emoji: '🎵',\n            },\n         ],\n      },\n      {\n         name: 'Home Management',\n         emoji: '🏡',\n         pages: [\n            {\n               name: 'Household Budget & Expense Tracking',\n               url: '#',\n               emoji: '💰',\n            },\n            {\n               name: 'Home Maintenance Schedule & Tasks',\n               url: '#',\n               emoji: '🔧',\n            },\n            {\n               name: 'Family Calendar & Event Planning',\n               url: '#',\n               emoji: '📅',\n            },\n         ],\n      },\n      {\n         name: 'Travel & Adventure',\n         emoji: '🧳',\n         pages: [\n            {\n               name: 'Trip Planning & Itineraries',\n               url: '#',\n               emoji: '🗺️',\n            },\n            {\n               name: 'Travel Bucket List & Inspiration',\n               url: '#',\n               emoji: '🌎',\n            },\n            {\n               name: 'Travel Journal & Photo Gallery',\n               url: '#',\n               emoji: '📸',\n            },\n         ],\n      },\n   ],\n}\n\nexport function SidebarLeft({\n   ...props\n}: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/sidebar-left.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   Blocks,\n   Calendar,\n   Command,\n   Home,\n   Inbox,\n   MessageCircleQuestion,\n   Search,\n   Settings2,\n   Sparkles,\n   Trash2,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavFavorites } from \"~/registry/miami/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"~/registry/miami/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"~/registry/miami/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"~/registry/miami/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"~/registry/miami/blocks/sidebar-15/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarHeader,\n   SidebarRail,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: Calendar,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function SidebarLeft({\n   ...props\n}: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/sidebar-right.tsx",
-      "content": "import * as React from 'react'\nimport { Plus } from 'lucide-react'\n\nimport { Calendars } from '~/registry/miami/block/sidebar-15/components/calendars'\nimport { DatePicker } from '~/registry/miami/block/sidebar-15/components/date-picker'\nimport { NavUser } from '~/registry/miami/block/sidebar-15/components/nav-user'\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n   SidebarSeparator,\n} from '~/registry/miami/ui/sidebar'\n\n// This is sample data.\nconst data = {\n   user: {\n      name: 'shadcn',\n      email: 'm@example.com',\n      avatar: '/avatars/nyxb.jpg',\n   },\n   calendars: [\n      {\n         name: 'My Calendars',\n         items: ['Personal', 'Work', 'Family'],\n      },\n      {\n         name: 'Favorites',\n         items: ['Holidays', 'Birthdays'],\n      },\n      {\n         name: 'Other',\n         items: ['Travel', 'Reminders', 'Deadlines'],\n      },\n   ],\n}\n\nexport function SidebarRight({\n   ...props\n}: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         collapsible=\"none\"\n         className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n         {...props}\n      >\n         <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "import { Plus } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { Calendars } from \"~/registry/miami/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"~/registry/miami/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"~/registry/miami/blocks/sidebar-15/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n   SidebarSeparator,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport function SidebarRight({\n   ...props\n}: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         collapsible=\"none\"\n         className=\"sticky hidden lg:flex top-0 h-svh border-l\"\n         {...props}\n      >\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     },
     {
-      "path": "block/sidebar-15/components/team-switcher.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronDown, Plus } from 'lucide-react'\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from '~/registry/miami/ui/dropdown-menu'\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from '~/registry/miami/ui/sidebar'\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘\n                           {index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"text-muted-foreground font-medium\">Add team</div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "path": "blocks/sidebar-15/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
       "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-16.json b/apps/web/public/r/styles/miami/sidebar-16.json
new file mode 100644
index 00000000..fd4db9e4
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-16.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-16",
+  "type": "registry:block",
+  "author": "nyxbui (https://nyxbui.design)",
+  "description": "A sidebar with a sticky site header.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-16/page.tsx",
+      "content": "import { AppSidebar } from \"~/registry/miami/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"~/registry/miami/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"~/registry/miami/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <div className=\"[--header-height:calc(theme(spacing.14))]\">\n         <SidebarProvider className=\"flex flex-col\">\n            <SiteHeader />\n            <div className=\"flex flex-1\">\n               <AppSidebar />\n               <SidebarInset>\n                  <div className=\"flex flex-1 flex-col gap-4 p-4\">\n                     <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                        <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                        <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                        <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                     </div>\n                     <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n                  </div>\n               </SidebarInset>\n            </div>\n         </SidebarProvider>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-16/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Send,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"~/registry/miami/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"~/registry/miami/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"~/registry/miami/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"~/registry/miami/blocks/sidebar-16/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: \"Support\",\n         url: \"#\",\n         icon: LifeBuoy,\n      },\n      {\n         title: \"Feedback\",\n         url: \"#\",\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: \"Design Engineering\",\n         url: \"#\",\n         icon: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         className=\"top-[--header-height] !h-[calc(100svh-var(--header-height))]\"\n         {...props}\n      >\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <Command className=\"size-4\" />\n                        </div>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              Acme Inc\n                           </span>\n                           <span className=\"truncate text-xs\">Enterprise</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n               >\n                  <SidebarMenuItem>\n                     <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.items?.length ? (\n                        <>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                 <ChevronRight />\n                                 <span className=\"sr-only\">Toggle</span>\n                              </SidebarMenuAction>\n                           </CollapsibleTrigger>\n                           <CollapsibleContent>\n                              <SidebarMenuSub>\n                                 {item.items?.map((subItem) => (\n                                    <SidebarMenuSubItem key={subItem.title}>\n                                       <SidebarMenuSubButton asChild>\n                                          <a href={subItem.url}>\n                                             <span>{subItem.title}</span>\n                                          </a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           </CollapsibleContent>\n                        </>\n                     ) : null}\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   type LucideIcon,\n   MoreHorizontal,\n   Share,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Share className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/miami/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"~/registry/miami/ui/label\"\nimport { SidebarInput } from \"~/registry/miami/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <div className=\"relative\">\n            <Label htmlFor=\"search\" className=\"sr-only\">\n               Search\n            </Label>\n            <SidebarInput\n               id=\"search\"\n               placeholder=\"Type to search...\"\n               className=\"h-8 pl-7\"\n            />\n            <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n         </div>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/site-header.tsx",
+      "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"~/registry/miami/blocks/sidebar-16/components/search-form\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport { useSidebar } from \"~/registry/miami/ui/sidebar\"\n\nexport function SiteHeader() {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <header className=\"fle sticky top-0 z-50 w-full items-center border-b bg-background\">\n         <div className=\"flex h-[--header-height] w-full items-center gap-2 px-4\">\n            <Button\n               className=\"h-8 w-8\"\n               variant=\"ghost\"\n               size=\"icon\"\n               onClick={toggleSidebar}\n            >\n               <SidebarIcon />\n            </Button>\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb className=\"hidden sm:block\">\n               <BreadcrumbList>\n                  <BreadcrumbItem>\n                     <BreadcrumbLink href=\"#\">\n                        Building Your Application\n                     </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator />\n                  <BreadcrumbItem>\n                     <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                  </BreadcrumbItem>\n               </BreadcrumbList>\n            </Breadcrumb>\n            <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n         </div>\n      </header>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-controlled.json b/apps/web/public/r/styles/miami/sidebar-controlled.json
new file mode 100644
index 00000000..553f894b
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-controlled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-controlled",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-controlled.tsx",
+      "content": "\"use client\"\n\nimport {\n   Frame,\n   LifeBuoy,\n   Map,\n   PanelLeftClose,\n   PanelLeftOpen,\n   PieChart,\n   Send,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/miami/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n   },\n]\n\nexport default function AppSidebar() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <SidebarProvider open={open} onOpenChange={setOpen}>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton asChild>\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center h-12 px-4 justify-between\">\n               <Button\n                  onClick={() => setOpen((open) => !open)}\n                  size=\"sm\"\n                  variant=\"ghost\"\n               >\n                  {open ? <PanelLeftClose /> : <PanelLeftOpen />}\n                  <span>{open ? \"Close\" : \"Open\"} Sidebar</span>\n               </Button>\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-demo.json b/apps/web/public/r/styles/miami/sidebar-demo.json
new file mode 100644
index 00000000..acfd7c77
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-demo",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Calendar, Home, Inbox, Search, Settings } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\n// Menu items.\nconst items = [\n   {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n   },\n   {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n   },\n   {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n   },\n   {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n   },\n   {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings,\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Application</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {items.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton asChild>\n                                 <a href={item.url}>\n                                    <item.icon />\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center justify-between px-4 h-12\">\n               <SidebarTrigger />\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-footer.json b/apps/web/public/r/styles/miami/sidebar-footer.json
new file mode 100644
index 00000000..f30150ff
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-footer.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-footer",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-footer.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, ChevronUp, User2 } from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader />\n            <SidebarContent />\n            <SidebarFooter>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                              Username\n                              <ChevronUp className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           side=\"top\"\n                           className=\"w-[--radix-popper-anchor-width]\"\n                        >\n                           <DropdownMenuItem>\n                              <span>Account</span>\n                           </DropdownMenuItem>\n                           <DropdownMenuItem>\n                              <span>Billing</span>\n                           </DropdownMenuItem>\n                           <DropdownMenuItem>\n                              <span>Sign out</span>\n                           </DropdownMenuItem>\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarFooter>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center justify-between px-4 h-12\">\n               <SidebarTrigger />\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-group-action.json b/apps/web/public/r/styles/miami/sidebar-group-action.json
new file mode 100644
index 00000000..ecb94c28
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-group-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-group-action",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-action.tsx",
+      "content": "\"use client\"\n\nimport {\n   ChevronDown,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Plus,\n   Send,\n} from \"lucide-react\"\nimport { Toaster, toast } from \"sonner\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupAction,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Toaster\n            position=\"bottom-left\"\n            toastOptions={{\n               className: \"ml-[160px]\",\n            }}\n         />\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupAction\n                     title=\"Add Project\"\n                     onClick={() => toast(\"You clicked the group action!\")}\n                  >\n                     <Plus /> <span className=\"sr-only\">Add Project</span>\n                  </SidebarGroupAction>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton asChild>\n                              <a href=\"#\">\n                                 <Frame />\n                                 <span>Design Engineering</span>\n                              </a>\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton asChild>\n                              <a href=\"#\">\n                                 <PieChart />\n                                 <span>Sales & Marketing</span>\n                              </a>\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton asChild>\n                              <a href=\"#\">\n                                 <Map />\n                                 <span>Travel</span>\n                              </a>\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-group-collapsible.json b/apps/web/public/r/styles/miami/sidebar-group-collapsible.json
new file mode 100644
index 00000000..217ecb8d
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-group-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-group-collapsible",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <Collapsible defaultOpen className=\"group/collapsible\">\n                  <SidebarGroup>\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           Help\n                           <ChevronDown className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              <SidebarMenuItem>\n                                 <SidebarMenuButton>\n                                    <LifeBuoy />\n                                    Support\n                                 </SidebarMenuButton>\n                              </SidebarMenuItem>\n                              <SidebarMenuItem>\n                                 <SidebarMenuButton>\n                                    <Send />\n                                    Feedback\n                                 </SidebarMenuButton>\n                              </SidebarMenuItem>\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </SidebarGroup>\n               </Collapsible>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-group.json b/apps/web/public/r/styles/miami/sidebar-group.json
new file mode 100644
index 00000000..f318fbfc
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-group.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-group",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-group.tsx",
+      "content": "\"use client\"\n\nimport { LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Help</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton>\n                              <LifeBuoy />\n                              Support\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton>\n                              <Send />\n                              Feedback\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-header.json b/apps/web/public/r/styles/miami/sidebar-header.json
new file mode 100644
index 00000000..8771004c
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-header.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-header",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-header.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown } from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   Sidebar,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                              Select Workspace\n                              <ChevronDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent className=\"w-[--radix-popper-anchor-width]\">\n                           <DropdownMenuItem>\n                              <span>Acme Inc</span>\n                           </DropdownMenuItem>\n                           <DropdownMenuItem>\n                              <span>Acme Corp.</span>\n                           </DropdownMenuItem>\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center justify-between px-4 h-12\">\n               <SidebarTrigger />\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-menu-action.json b/apps/web/public/r/styles/miami/sidebar-menu-action.json
new file mode 100644
index 00000000..47c63f9a
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-menu-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-action",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-action.tsx",
+      "content": "\"use client\"\n\nimport {\n   Frame,\n   LifeBuoy,\n   Map,\n   MoreHorizontal,\n   PieChart,\n   Send,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/miami/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project, index) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton\n                                 asChild\n                                 className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                              >\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              <DropdownMenu>\n                                 <DropdownMenuTrigger asChild>\n                                    <SidebarMenuAction>\n                                       <MoreHorizontal />\n                                       <span className=\"sr-only\">More</span>\n                                    </SidebarMenuAction>\n                                 </DropdownMenuTrigger>\n                                 <DropdownMenuContent\n                                    side=\"right\"\n                                    align=\"start\"\n                                 >\n                                    <DropdownMenuItem>\n                                       <span>Edit Project</span>\n                                    </DropdownMenuItem>\n                                    <DropdownMenuItem>\n                                       <span>Delete Project</span>\n                                    </DropdownMenuItem>\n                                 </DropdownMenuContent>\n                              </DropdownMenu>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-menu-badge.json b/apps/web/public/r/styles/miami/sidebar-menu-badge.json
new file mode 100644
index 00000000..2c3ff43f
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-menu-badge.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-badge",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-badge.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/miami/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n      badge: \"24\",\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n      badge: \"12\",\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n      badge: \"3\",\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n      badge: \"21\",\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n      badge: \"8\",\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton\n                                 asChild\n                                 className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                              >\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              <SidebarMenuBadge>\n                                 {project.badge}\n                              </SidebarMenuBadge>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-menu-collapsible.json b/apps/web/public/r/styles/miami/sidebar-menu-collapsible.json
new file mode 100644
index 00000000..90f3fa8d
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-menu-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-collapsible",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n} from \"~/registry/miami/ui/sidebar\"\n\nconst items = [\n   {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Installation\",\n            url: \"#\",\n         },\n         {\n            title: \"Project Structure\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Routing\",\n            url: \"#\",\n         },\n         {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n         },\n         {\n            title: \"Rendering\",\n            url: \"#\",\n         },\n         {\n            title: \"Caching\",\n            url: \"#\",\n         },\n         {\n            title: \"Styling\",\n            url: \"#\",\n         },\n         {\n            title: \"Optimizing\",\n            url: \"#\",\n         },\n         {\n            title: \"Configuring\",\n            url: \"#\",\n         },\n         {\n            title: \"Testing\",\n            url: \"#\",\n         },\n         {\n            title: \"Authentication\",\n            url: \"#\",\n         },\n         {\n            title: \"Deploying\",\n            url: \"#\",\n         },\n         {\n            title: \"Upgrading\",\n            url: \"#\",\n         },\n         {\n            title: \"Examples\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Components\",\n            url: \"#\",\n         },\n         {\n            title: \"File Conventions\",\n            url: \"#\",\n         },\n         {\n            title: \"Functions\",\n            url: \"#\",\n         },\n         {\n            title: \"next.config.js Options\",\n            url: \"#\",\n         },\n         {\n            title: \"CLI\",\n            url: \"#\",\n         },\n         {\n            title: \"Edge Runtime\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Accessibility\",\n            url: \"#\",\n         },\n         {\n            title: \"Fast Refresh\",\n            url: \"#\",\n         },\n         {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n         },\n         {\n            title: \"Supported Browsers\",\n            url: \"#\",\n         },\n         {\n            title: \"Turbopack\",\n            url: \"#\",\n         },\n      ],\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {items.map((item, index) => (\n                           <Collapsible\n                              key={index}\n                              className=\"group/collapsible\"\n                              defaultOpen={index === 0}\n                           >\n                              <SidebarMenuItem>\n                                 <CollapsibleTrigger asChild>\n                                    <SidebarMenuButton>\n                                       <span>{item.title}</span>\n                                       <ChevronRight className=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                                    </SidebarMenuButton>\n                                 </CollapsibleTrigger>\n                                 <CollapsibleContent>\n                                    <SidebarMenuSub>\n                                       {item.items.map((subItem, subIndex) => (\n                                          <SidebarMenuSubItem key={subIndex}>\n                                             <SidebarMenuSubButton asChild>\n                                                <a href={subItem.url}>\n                                                   <span>{subItem.title}</span>\n                                                </a>\n                                             </SidebarMenuSubButton>\n                                          </SidebarMenuSubItem>\n                                       ))}\n                                    </SidebarMenuSub>\n                                 </CollapsibleContent>\n                              </SidebarMenuItem>\n                           </Collapsible>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-menu-sub.json b/apps/web/public/r/styles/miami/sidebar-menu-sub.json
new file mode 100644
index 00000000..0ab9ade0
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-menu-sub.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-sub",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-sub.tsx",
+      "content": "\"use client\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n} from \"~/registry/miami/ui/sidebar\"\n\nconst items = [\n   {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Installation\",\n            url: \"#\",\n         },\n         {\n            title: \"Project Structure\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Routing\",\n            url: \"#\",\n         },\n         {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n         },\n         {\n            title: \"Rendering\",\n            url: \"#\",\n         },\n         {\n            title: \"Caching\",\n            url: \"#\",\n         },\n         {\n            title: \"Styling\",\n            url: \"#\",\n         },\n         {\n            title: \"Optimizing\",\n            url: \"#\",\n         },\n         {\n            title: \"Configuring\",\n            url: \"#\",\n         },\n         {\n            title: \"Testing\",\n            url: \"#\",\n         },\n         {\n            title: \"Authentication\",\n            url: \"#\",\n         },\n         {\n            title: \"Deploying\",\n            url: \"#\",\n         },\n         {\n            title: \"Upgrading\",\n            url: \"#\",\n         },\n         {\n            title: \"Examples\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Components\",\n            url: \"#\",\n         },\n         {\n            title: \"File Conventions\",\n            url: \"#\",\n         },\n         {\n            title: \"Functions\",\n            url: \"#\",\n         },\n         {\n            title: \"next.config.js Options\",\n            url: \"#\",\n         },\n         {\n            title: \"CLI\",\n            url: \"#\",\n         },\n         {\n            title: \"Edge Runtime\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Accessibility\",\n            url: \"#\",\n         },\n         {\n            title: \"Fast Refresh\",\n            url: \"#\",\n         },\n         {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n         },\n         {\n            title: \"Supported Browsers\",\n            url: \"#\",\n         },\n         {\n            title: \"Turbopack\",\n            url: \"#\",\n         },\n      ],\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {items.map((item, index) => (\n                           <SidebarMenuItem key={index}>\n                              <SidebarMenuButton asChild>\n                                 <a href={item.url}>\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              <SidebarMenuSub>\n                                 {item.items.map((subItem, subIndex) => (\n                                    <SidebarMenuSubItem key={subIndex}>\n                                       <SidebarMenuSubButton asChild>\n                                          <a href={subItem.url}>\n                                             <span>{subItem.title}</span>\n                                          </a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-menu.json b/apps/web/public/r/styles/miami/sidebar-menu.json
new file mode 100644
index 00000000..8276cf5a
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-menu.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/registry/miami/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton asChild>\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar-rsc.json b/apps/web/public/r/styles/miami/sidebar-rsc.json
new file mode 100644
index 00000000..f7888eeb
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sidebar-rsc.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-rsc",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-rsc.tsx",
+      "content": "import { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSkeleton,\n   SidebarProvider,\n} from \"~/registry/miami/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n      badge: \"24\",\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n      badge: \"12\",\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n      badge: \"3\",\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n      badge: \"21\",\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n      badge: \"8\",\n   },\n]\n\n// Dummy fetch function\nasync function fetchProjects() {\n   await new Promise((resolve) => setTimeout(resolve, 3000))\n   return projects\n}\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <React.Suspense fallback={<NavProjectsSkeleton />}>\n                        <NavProjects />\n                     </React.Suspense>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n\nfunction NavProjectsSkeleton() {\n   return (\n      <SidebarMenu>\n         {Array.from({ length: 5 }).map((_, index) => (\n            <SidebarMenuItem key={index}>\n               <SidebarMenuSkeleton showIcon />\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n\nasync function NavProjects() {\n   const projects = await fetchProjects()\n\n   return (\n      <SidebarMenu>\n         {projects.map((project) => (\n            <SidebarMenuItem key={project.name}>\n               <SidebarMenuButton asChild>\n                  <a href={project.url}>\n                     <project.icon />\n                     <span>{project.name}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/sidebar.json b/apps/web/public/r/styles/miami/sidebar.json
index 95a594c9..2947769e 100644
--- a/apps/web/public/r/styles/miami/sidebar.json
+++ b/apps/web/public/r/styles/miami/sidebar.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sidebar",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-slot",
     "class-variance-authority",
@@ -18,8 +20,8 @@
   "files": [
     {
       "path": "ui/sidebar.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\nimport { PanelLeft } from 'lucide-react'\n\nimport { useIsMobile } from '~/registry/miami/hooks/use-mobile'\nimport { ny } from '~/registry/miami/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport { Input } from '~/registry/miami/ui/input'\nimport { Separator } from '~/registry/miami/ui/separator'\nimport { Sheet, SheetContent } from '~/registry/miami/ui/sheet'\nimport { Skeleton } from '~/registry/miami/ui/skeleton'\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/registry/miami/ui/tooltip'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar:state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\ninterface SidebarContext {\n   state: 'expanded' | 'collapsed'\n   open: boolean\n   setOpen: (open: boolean) => void\n   openMobile: boolean\n   setOpenMobile: (open: boolean) => void\n   isMobile: boolean\n   toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n   const context = React.useContext(SidebarContext)\n   if (!context) {\n      throw new Error('useSidebar must be used within a Sidebar.')\n   }\n\n   return context\n}\n\nconst SidebarProvider = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'> & {\n      defaultOpen?: boolean\n      open?: boolean\n      onOpenChange?: (open: boolean) => void\n   }\n>(\n         (\n            {\n               defaultOpen = true,\n               open: openProp,\n               onOpenChange: setOpenProp,\n               className,\n               style,\n               children,\n               ...props\n            },\n            ref,\n         ) => {\n            const isMobile = useIsMobile()\n            const [openMobile, setOpenMobile] = React.useState(false)\n\n            // This is the internal state of the sidebar.\n            // We use openProp and setOpenProp for control from outside the component.\n            const [_open, _setOpen] = React.useState(defaultOpen)\n            const open = openProp ?? _open\n            const setOpen = React.useCallback(\n               (value: boolean | ((value: boolean) => boolean)) => {\n                  if (setOpenProp) {\n                     return setOpenProp?.(\n                        typeof value === 'function' ? value(open) : value,\n                     )\n                  }\n\n                  _setOpen(value)\n\n                  // This sets the cookie to keep the sidebar state.\n                  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n               },\n               [setOpenProp, open],\n            )\n\n            // Helper to toggle the sidebar.\n            const toggleSidebar = React.useCallback(() => {\n               return isMobile\n                  ? setOpenMobile(open => !open)\n                  : setOpen(open => !open)\n            }, [isMobile, setOpen, setOpenMobile])\n\n            // Adds a keyboard shortcut to toggle the sidebar.\n            React.useEffect(() => {\n               const handleKeyDown = (event: KeyboardEvent) => {\n                  if (\n                     event.key === SIDEBAR_KEYBOARD_SHORTCUT\n                     && (event.metaKey || event.ctrlKey)\n                  ) {\n                     event.preventDefault()\n                     toggleSidebar()\n                  }\n               }\n\n               window.addEventListener('keydown', handleKeyDown)\n               return () => window.removeEventListener('keydown', handleKeyDown)\n            }, [toggleSidebar])\n\n            // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n            // This makes it easier to style the sidebar with Tailwind classes.\n            const state = open ? 'expanded' : 'collapsed'\n\n            const contextValue = React.useMemo<SidebarContext>(\n               () => ({\n                  state,\n                  open,\n                  setOpen,\n                  isMobile,\n                  openMobile,\n                  setOpenMobile,\n                  toggleSidebar,\n               }),\n               [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n            )\n\n            return (\n               <SidebarContext.Provider value={contextValue}>\n                  <TooltipProvider delayDuration={0}>\n                     <div\n                        style={\n                           {\n                              '--sidebar-width': SIDEBAR_WIDTH,\n                              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n                              ...style,\n                           } as React.CSSProperties\n                        }\n                        className={ny(\n                           'group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',\n                           className,\n                        )}\n                        ref={ref}\n                        {...props}\n                     >\n                        {children}\n                     </div>\n                  </TooltipProvider>\n               </SidebarContext.Provider>\n            )\n         },\n         )\nSidebarProvider.displayName = 'SidebarProvider'\n\nconst Sidebar = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'> & {\n      side?: 'left' | 'right'\n      variant?: 'sidebar' | 'floating' | 'inset'\n      collapsible?: 'offcanvas' | 'icon' | 'none'\n   }\n>(\n   (\n      {\n         side = 'left',\n         variant = 'sidebar',\n         collapsible = 'offcanvas',\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n      if (collapsible === 'none') {\n         return (\n            <div\n               className={ny(\n                  'bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col',\n                  className,\n               )}\n               ref={ref}\n               {...props}\n            >\n               {children}\n            </div>\n         )\n      }\n\n      if (isMobile) {\n         return (\n            <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n               <SheetContent\n                  data-sidebar=\"sidebar\"\n                  data-mobile=\"true\"\n                  className=\"bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden\"\n                  style={\n                     {\n                        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n                     } as React.CSSProperties\n                  }\n                  side={side}\n               >\n                  <div className=\"flex size-full flex-col\">{children}</div>\n               </SheetContent>\n            </Sheet>\n         )\n      }\n\n      return (\n         <div\n            ref={ref}\n            className=\"group peer hidden md:block\"\n            data-state={state}\n            data-collapsible={state === 'collapsed' ? collapsible : ''}\n            data-variant={variant}\n            data-side={side}\n         >\n            {/* This is what handles the sidebar gap on desktop */}\n            <div\n               className={ny(\n                  'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',\n                  'group-data-[collapsible=offcanvas]:w-0',\n                  'group-data-[side=right]:rotate-180',\n                  variant === 'floating' || variant === 'inset'\n                     ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n                     : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n               )}\n            />\n            <div\n               className={ny(\n                  'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',\n                  side === 'left'\n                     ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n                     : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n                  // Adjust the padding for floating and inset variants.\n                  variant === 'floating' || variant === 'inset'\n                     ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n                     : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n                  className,\n               )}\n               {...props}\n            >\n               <div\n                  data-sidebar=\"sidebar\"\n                  className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow\"\n               >\n                  {children}\n               </div>\n            </div>\n         </div>\n      )\n   },\n)\nSidebar.displayName = 'Sidebar'\n\nconst SidebarTrigger = React.forwardRef<\n   React.ElementRef<typeof Button>,\n   React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <Button\n         ref={ref}\n         data-sidebar=\"trigger\"\n         variant=\"ghost\"\n         size=\"icon\"\n         className={ny('size-7', className)}\n         onClick={(event) => {\n            onClick?.(event)\n            toggleSidebar()\n         }}\n         {...props}\n      >\n         <PanelLeft />\n         <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n   )\n})\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<'button'>\n>(({ className, ...props }, ref) => {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <button\n         ref={ref}\n         data-sidebar=\"rail\"\n         aria-label=\"Toggle Sidebar\"\n         tabIndex={-1}\n         onClick={toggleSidebar}\n         title=\"Toggle Sidebar\"\n         className={ny(\n            'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n            '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n            '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n            'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',\n            '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n            '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'main'>\n>(({ className, ...props }, ref) => {\n   return (\n      <main\n         ref={ref}\n         className={ny(\n            'bg-background relative flex min-h-svh flex-1 flex-col',\n            'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = React.forwardRef<\n   React.ElementRef<typeof Input>,\n   React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n   return (\n      <Input\n         ref={ref}\n         data-sidebar=\"input\"\n         className={ny(\n            'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'>\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"header\"\n         className={ny('flex flex-col gap-2 p-2', className)}\n         {...props}\n      />\n   )\n})\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'>\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"footer\"\n         className={ny('flex flex-col gap-2 p-2', className)}\n         {...props}\n      />\n   )\n})\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = React.forwardRef<\n   React.ElementRef<typeof Separator>,\n   React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n   return (\n      <Separator\n         ref={ref}\n         data-sidebar=\"separator\"\n         className={ny('bg-sidebar-border mx-2 w-auto', className)}\n         {...props}\n      />\n   )\n})\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'>\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"content\"\n         className={ny(\n            'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'>\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"group\"\n         className={ny('relative flex w-full min-w-0 flex-col p-2', className)}\n         {...props}\n      />\n   )\n})\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = React.forwardRef<\n   HTMLDivElement,\n  React.ComponentProps<'div'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : 'div'\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"group-label\"\n         className={ny(\n            'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n            'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = React.forwardRef<\n   HTMLButtonElement,\n  React.ComponentProps<'button'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : 'button'\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"group-action\"\n         className={ny(\n            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n            // Increases the hit area of the button on mobile.\n            'after:absolute after:-inset-2 after:md:hidden',\n            'group-data-[collapsible=icon]:hidden',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={ny('w-full text-sm', className)}\n      {...props}\n   />\n))\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<'ul'>\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={ny('flex w-full min-w-0 flex-col gap-1', className)}\n      {...props}\n   />\n))\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<'li'>\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={ny('group/menu-item relative', className)}\n      {...props}\n   />\n))\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n   'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n   {\n      variants: {\n         variant: {\n            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n            outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n         },\n         size: {\n            default: 'h-8 text-sm',\n            sm: 'h-7 text-xs',\n            lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n         size: 'default',\n      },\n   },\n)\n\nconst SidebarMenuButton = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<'button'> & {\n      asChild?: boolean\n      isActive?: boolean\n      tooltip?: string | React.ComponentProps<typeof TooltipContent>\n   } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n   (\n      {\n         asChild = false,\n         isActive = false,\n         variant = 'default',\n         size = 'default',\n         tooltip,\n         className,\n         ...props\n      },\n      ref,\n   ) => {\n      const Comp = asChild ? Slot : 'button'\n      const { isMobile, state } = useSidebar()\n\n      const button = (\n         <Comp\n            ref={ref}\n            data-sidebar=\"menu-button\"\n            data-size={size}\n            data-active={isActive}\n            className={ny(sidebarMenuButtonVariants({ variant, size }), className)}\n            {...props}\n         />\n      )\n\n      if (!tooltip) {\n         return button\n      }\n\n      if (typeof tooltip === 'string') {\n         tooltip = {\n            children: tooltip,\n         }\n      }\n\n      return (\n         <Tooltip>\n            <TooltipTrigger asChild>{button}</TooltipTrigger>\n            <TooltipContent\n               side=\"right\"\n               align=\"center\"\n               hidden={state !== 'collapsed' || isMobile}\n               {...tooltip}\n            />\n         </Tooltip>\n      )\n   },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<'button'> & {\n      asChild?: boolean\n      showOnHover?: boolean\n   }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : 'button'\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"menu-action\"\n         className={ny(\n            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n            // Increases the hit area of the button on mobile.\n            'after:absolute after:-inset-2 after:md:hidden',\n            'peer-data-[size=sm]/menu-button:top-1',\n            'peer-data-[size=default]/menu-button:top-1.5',\n            'peer-data-[size=lg]/menu-button:top-2.5',\n            'group-data-[collapsible=icon]:hidden',\n            showOnHover\n            && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={ny(\n         'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',\n         'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n         'peer-data-[size=sm]/menu-button:top-1',\n         'peer-data-[size=default]/menu-button:top-1.5',\n         'peer-data-[size=lg]/menu-button:top-2.5',\n         'group-data-[collapsible=icon]:hidden',\n         className,\n      )}\n      {...props}\n   />\n))\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<'div'> & {\n      showIcon?: boolean\n   }\n>(({ className, showIcon = false, ...props }, ref) => {\n   // Random width between 50 to 90%.\n   const width = React.useMemo(() => {\n      return `${Math.floor(Math.random() * 40) + 50}%`\n   }, [])\n\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"menu-skeleton\"\n         className={ny('flex h-8 items-center gap-2 rounded-md px-2', className)}\n         {...props}\n      >\n         {showIcon && (\n            <Skeleton\n               className=\"size-4 rounded-md\"\n               data-sidebar=\"menu-skeleton-icon\"\n            />\n         )}\n         <Skeleton\n            className=\"h-4 max-w-[--skeleton-width] flex-1\"\n            data-sidebar=\"menu-skeleton-text\"\n            style={\n               {\n                  '--skeleton-width': width,\n               } as React.CSSProperties\n            }\n         />\n      </div>\n   )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<'ul'>\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={ny(\n         'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n         'group-data-[collapsible=icon]:hidden',\n         className,\n      )}\n      {...props}\n   />\n))\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<'li'>\n>(({ ...props }, ref) => <li ref={ref} {...props} />)\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = React.forwardRef<\n   HTMLAnchorElement,\n   React.ComponentProps<'a'> & {\n      asChild?: boolean\n      size?: 'sm' | 'md'\n      isActive?: boolean\n   }\n>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {\n   const Comp = asChild ? Slot : 'a'\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"menu-sub-button\"\n         data-size={size}\n         data-active={isActive}\n         className={ny(\n            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n            'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n            size === 'sm' && 'text-xs',\n            size === 'md' && 'text-sm',\n            'group-data-[collapsible=icon]:hidden',\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupAction,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSkeleton,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport { PanelLeft } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { useIsMobile } from \"~/registry/miami/hooks/use-mobile\"\nimport { ny } from \"~/registry/miami/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport { Sheet, SheetContent } from \"~/registry/miami/ui/sheet\"\nimport { Skeleton } from \"~/registry/miami/ui/skeleton\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/miami/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar:state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ninterface SidebarContext {\n   state: \"expanded\" | \"collapsed\"\n   open: boolean\n   setOpen: (open: boolean) => void\n   openMobile: boolean\n   setOpenMobile: (open: boolean) => void\n   isMobile: boolean\n   toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n   const context = React.useContext(SidebarContext)\n   if (!context) {\n      throw new Error(\"useSidebar must be used within a Sidebar.\")\n   }\n\n   return context\n}\n\nconst SidebarProvider = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      defaultOpen?: boolean\n      open?: boolean\n      onOpenChange?: (open: boolean) => void\n   }\n>(\n   (\n      {\n         defaultOpen = true,\n         open: openProp,\n         onOpenChange: setOpenProp,\n         className,\n         style,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const isMobile = useIsMobile()\n      const [openMobile, setOpenMobile] = React.useState(false)\n\n      // This is the internal state of the sidebar.\n      // We use openProp and setOpenProp for control from outside the component.\n      const [_open, _setOpen] = React.useState(defaultOpen)\n      const open = openProp ?? _open\n      const setOpen = React.useCallback(\n         (value: boolean | ((value: boolean) => boolean)) => {\n            if (setOpenProp) {\n               return setOpenProp?.(\n                  typeof value === \"function\" ? value(open) : value,\n               )\n            }\n\n            _setOpen(value)\n\n            // This sets the cookie to keep the sidebar state.\n            document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n         },\n         [setOpenProp, open],\n      )\n\n      // Helper to toggle the sidebar.\n      const toggleSidebar = React.useCallback(() => {\n         return isMobile\n            ? setOpenMobile((open) => !open)\n            : setOpen((open) => !open)\n      }, [isMobile, setOpen, setOpenMobile])\n\n      // Adds a keyboard shortcut to toggle the sidebar.\n      React.useEffect(() => {\n         const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n               event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n               (event.metaKey || event.ctrlKey)\n            ) {\n               event.preventDefault()\n               toggleSidebar()\n            }\n         }\n\n         window.addEventListener(\"keydown\", handleKeyDown)\n         return () => window.removeEventListener(\"keydown\", handleKeyDown)\n      }, [toggleSidebar])\n\n      // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n      // This makes it easier to style the sidebar with Tailwind classes.\n      const state = open ? \"expanded\" : \"collapsed\"\n\n      const contextValue = React.useMemo<SidebarContext>(\n         () => ({\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n         }),\n         [\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n         ],\n      )\n\n      return (\n         <SidebarContext.Provider value={contextValue}>\n            <TooltipProvider delayDuration={0}>\n               <div\n                  style={\n                     {\n                        \"--sidebar-width\": SIDEBAR_WIDTH,\n                        \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n                        ...style,\n                     } as React.CSSProperties\n                  }\n                  className={ny(\n                     \"group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full\",\n                     className,\n                  )}\n                  ref={ref}\n                  {...props}\n               >\n                  {children}\n               </div>\n            </TooltipProvider>\n         </SidebarContext.Provider>\n      )\n   },\n)\nSidebarProvider.displayName = \"SidebarProvider\"\n\nconst Sidebar = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      side?: \"left\" | \"right\"\n      variant?: \"sidebar\" | \"floating\" | \"inset\"\n      collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n   }\n>(\n   (\n      {\n         side = \"left\",\n         variant = \"sidebar\",\n         collapsible = \"offcanvas\",\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n      if (collapsible === \"none\") {\n         return (\n            <div\n               className={ny(\n                  \"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col\",\n                  className,\n               )}\n               ref={ref}\n               {...props}\n            >\n               {children}\n            </div>\n         )\n      }\n\n      if (isMobile) {\n         return (\n            <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n               <SheetContent\n                  data-sidebar=\"sidebar\"\n                  data-mobile=\"true\"\n                  className=\"bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden\"\n                  style={\n                     {\n                        \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n                     } as React.CSSProperties\n                  }\n                  side={side}\n               >\n                  <div className=\"flex size-full flex-col\">{children}</div>\n               </SheetContent>\n            </Sheet>\n         )\n      }\n\n      return (\n         <div\n            ref={ref}\n            className=\"group peer hidden md:block\"\n            data-state={state}\n            data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n            data-variant={variant}\n            data-side={side}\n         >\n            {/* This is what handles the sidebar gap on desktop */}\n            <div\n               className={ny(\n                  \"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear\",\n                  \"group-data-[collapsible=offcanvas]:w-0\",\n                  \"group-data-[side=right]:rotate-180\",\n                  variant === \"floating\" || variant === \"inset\"\n                     ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n                     : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\",\n               )}\n            />\n            <div\n               className={ny(\n                  \"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex\",\n                  side === \"left\"\n                     ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n                     : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n                  // Adjust the padding for floating and inset variants.\n                  variant === \"floating\" || variant === \"inset\"\n                     ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n                     : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n                  className,\n               )}\n               {...props}\n            >\n               <div\n                  data-sidebar=\"sidebar\"\n                  className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow\"\n               >\n                  {children}\n               </div>\n            </div>\n         </div>\n      )\n   },\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarTrigger = React.forwardRef<\n   React.ElementRef<typeof Button>,\n   React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <Button\n         ref={ref}\n         data-sidebar=\"trigger\"\n         variant=\"ghost\"\n         size=\"icon\"\n         className={ny(\"size-7\", className)}\n         onClick={(event) => {\n            onClick?.(event)\n            toggleSidebar()\n         }}\n         {...props}\n      >\n         <PanelLeft />\n         <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n   )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst SidebarRail = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <button\n         ref={ref}\n         data-sidebar=\"rail\"\n         aria-label=\"Toggle Sidebar\"\n         tabIndex={-1}\n         onClick={toggleSidebar}\n         title=\"Toggle Sidebar\"\n         className={ny(\n            \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n            \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n            \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n            \"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n            \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n            \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarRail.displayName = \"SidebarRail\"\n\nconst SidebarInset = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"main\">\n>(({ className, ...props }, ref) => {\n   return (\n      <main\n         ref={ref}\n         className={ny(\n            \"bg-background relative flex min-h-svh flex-1 flex-col\",\n            \"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarInset.displayName = \"SidebarInset\"\n\nconst SidebarInput = React.forwardRef<\n   React.ElementRef<typeof Input>,\n   React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n   return (\n      <Input\n         ref={ref}\n         data-sidebar=\"input\"\n         className={ny(\n            \"bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarInput.displayName = \"SidebarInput\"\n\nconst SidebarHeader = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"header\"\n         className={ny(\"flex flex-col gap-2 p-2\", className)}\n         {...props}\n      />\n   )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\nconst SidebarFooter = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"footer\"\n         className={ny(\"flex flex-col gap-2 p-2\", className)}\n         {...props}\n      />\n   )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarSeparator = React.forwardRef<\n   React.ElementRef<typeof Separator>,\n   React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n   return (\n      <Separator\n         ref={ref}\n         data-sidebar=\"separator\"\n         className={ny(\"bg-sidebar-border mx-2 w-auto\", className)}\n         {...props}\n      />\n   )\n})\nSidebarSeparator.displayName = \"SidebarSeparator\"\n\nconst SidebarContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"content\"\n         className={ny(\n            \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\nconst SidebarGroup = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"group\"\n         className={ny(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n         {...props}\n      />\n   )\n})\nSidebarGroup.displayName = \"SidebarGroup\"\n\nconst SidebarGroupLabel = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"div\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"group-label\"\n         className={ny(\n            \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n            \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\"\n\nconst SidebarGroupAction = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"button\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"group-action\"\n         className={ny(\n            \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n            // Increases the hit area of the button on mobile.\n            \"after:absolute after:-inset-2 after:md:hidden\",\n            \"group-data-[collapsible=icon]:hidden\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarGroupAction.displayName = \"SidebarGroupAction\"\n\nconst SidebarGroupContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={ny(\"w-full text-sm\", className)}\n      {...props}\n   />\n))\nSidebarGroupContent.displayName = \"SidebarGroupContent\"\n\nconst SidebarMenu = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={ny(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n   />\n))\nSidebarMenu.displayName = \"SidebarMenu\"\n\nconst SidebarMenuItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={ny(\"group/menu-item relative\", className)}\n      {...props}\n   />\n))\nSidebarMenuItem.displayName = \"SidebarMenuItem\"\n\nconst sidebarMenuButtonVariants = cva(\n   \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n   {\n      variants: {\n         variant: {\n            default:\n               \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n            outline:\n               \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n         },\n         size: {\n            default: \"h-8 text-sm\",\n            sm: \"h-7 text-xs\",\n            lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n         size: \"default\",\n      },\n   },\n)\n\nconst SidebarMenuButton = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\"> & {\n      asChild?: boolean\n      isActive?: boolean\n      tooltip?: string | React.ComponentProps<typeof TooltipContent>\n   } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n   (\n      {\n         asChild = false,\n         isActive = false,\n         variant = \"default\",\n         size = \"default\",\n         tooltip,\n         className,\n         ...props\n      },\n      ref,\n   ) => {\n      const Comp = asChild ? Slot : \"button\"\n      const { isMobile, state } = useSidebar()\n\n      const button = (\n         <Comp\n            ref={ref}\n            data-sidebar=\"menu-button\"\n            data-size={size}\n            data-active={isActive}\n            className={ny(\n               sidebarMenuButtonVariants({ variant, size }),\n               className,\n            )}\n            {...props}\n         />\n      )\n\n      if (!tooltip) {\n         return button\n      }\n\n      if (typeof tooltip === \"string\") {\n         tooltip = {\n            children: tooltip,\n         }\n      }\n\n      return (\n         <Tooltip>\n            <TooltipTrigger asChild>{button}</TooltipTrigger>\n            <TooltipContent\n               side=\"right\"\n               align=\"center\"\n               hidden={state !== \"collapsed\" || isMobile}\n               {...tooltip}\n            />\n         </Tooltip>\n      )\n   },\n)\nSidebarMenuButton.displayName = \"SidebarMenuButton\"\n\nconst SidebarMenuAction = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\"> & {\n      asChild?: boolean\n      showOnHover?: boolean\n   }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"button\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"menu-action\"\n         className={ny(\n            \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n            // Increases the hit area of the button on mobile.\n            \"after:absolute after:-inset-2 after:md:hidden\",\n            \"peer-data-[size=sm]/menu-button:top-1\",\n            \"peer-data-[size=default]/menu-button:top-1.5\",\n            \"peer-data-[size=lg]/menu-button:top-2.5\",\n            \"group-data-[collapsible=icon]:hidden\",\n            showOnHover &&\n               \"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarMenuAction.displayName = \"SidebarMenuAction\"\n\nconst SidebarMenuBadge = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={ny(\n         \"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums\",\n         \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n         \"peer-data-[size=sm]/menu-button:top-1\",\n         \"peer-data-[size=default]/menu-button:top-1.5\",\n         \"peer-data-[size=lg]/menu-button:top-2.5\",\n         \"group-data-[collapsible=icon]:hidden\",\n         className,\n      )}\n      {...props}\n   />\n))\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\"\n\nconst SidebarMenuSkeleton = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      showIcon?: boolean\n   }\n>(({ className, showIcon = false, ...props }, ref) => {\n   // Random width between 50 to 90%.\n   const width = React.useMemo(() => {\n      return `${Math.floor(Math.random() * 40) + 50}%`\n   }, [])\n\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"menu-skeleton\"\n         className={ny(\n            \"flex h-8 items-center gap-2 rounded-md px-2\",\n            className,\n         )}\n         {...props}\n      >\n         {showIcon && (\n            <Skeleton\n               className=\"size-4 rounded-md\"\n               data-sidebar=\"menu-skeleton-icon\"\n            />\n         )}\n         <Skeleton\n            className=\"h-4 max-w-[--skeleton-width] flex-1\"\n            data-sidebar=\"menu-skeleton-text\"\n            style={\n               {\n                  \"--skeleton-width\": width,\n               } as React.CSSProperties\n            }\n         />\n      </div>\n   )\n})\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\n\nconst SidebarMenuSub = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={ny(\n         \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n         \"group-data-[collapsible=icon]:hidden\",\n         className,\n      )}\n      {...props}\n   />\n))\nSidebarMenuSub.displayName = \"SidebarMenuSub\"\n\nconst SidebarMenuSubItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<\"li\">\n>(({ ...props }, ref) => <li ref={ref} {...props} />)\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\"\n\nconst SidebarMenuSubButton = React.forwardRef<\n   HTMLAnchorElement,\n   React.ComponentProps<\"a\"> & {\n      asChild?: boolean\n      size?: \"sm\" | \"md\"\n      isActive?: boolean\n   }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"a\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"menu-sub-button\"\n         data-size={size}\n         data-active={isActive}\n         className={ny(\n            \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n            \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n            size === \"sm\" && \"text-xs\",\n            size === \"md\" && \"text-sm\",\n            \"group-data-[collapsible=icon]:hidden\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\"\n\nexport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupAction,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSkeleton,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/sink.json b/apps/web/public/r/styles/miami/sink.json
new file mode 100644
index 00000000..1cc802ba
--- /dev/null
+++ b/apps/web/public/r/styles/miami/sink.json
@@ -0,0 +1,452 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sink",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "accordion",
+    "alert",
+    "alert-dialog",
+    "aspect-ratio",
+    "avatar",
+    "badge",
+    "breadcrumb",
+    "button",
+    "calendar",
+    "card",
+    "carousel",
+    "chart",
+    "checkbox",
+    "collapsible",
+    "command",
+    "context-menu",
+    "dialog",
+    "drawer",
+    "dropdown-menu",
+    "hover-card",
+    "input",
+    "input-otp",
+    "label",
+    "menubar",
+    "navigation-menu",
+    "pagination",
+    "popover",
+    "progress",
+    "radio-group",
+    "resizable",
+    "scroll-area",
+    "select",
+    "separator",
+    "sheet",
+    "sidebar",
+    "skeleton",
+    "slider",
+    "sonner",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "toast",
+    "toggle",
+    "toggle-group",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "internal/sink/page.tsx",
+      "content": "import { AccordionDemo } from \"~/registry/miami/internal/sink/components/accordion-demo\"\nimport { AlertDemo } from \"~/registry/miami/internal/sink/components/alert-demo\"\nimport { AlertDialogDemo } from \"~/registry/miami/internal/sink/components/alert-dialog-demo\"\nimport { AppSidebar } from \"~/registry/miami/internal/sink/components/app-sidebar\"\nimport { AspectRatioDemo } from \"~/registry/miami/internal/sink/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"~/registry/miami/internal/sink/components/avatar-demo\"\nimport { BadgeDemo } from \"~/registry/miami/internal/sink/components/badge-demo\"\nimport { BadgeDestructive } from \"~/registry/miami/internal/sink/components/badge-destructive\"\nimport { BadgeOutline } from \"~/registry/miami/internal/sink/components/badge-outline\"\nimport { BadgeSecondary } from \"~/registry/miami/internal/sink/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"~/registry/miami/internal/sink/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"~/registry/miami/internal/sink/components/button-demo\"\nimport { ButtonDestructive } from \"~/registry/miami/internal/sink/components/button-destructive\"\nimport { ButtonGhost } from \"~/registry/miami/internal/sink/components/button-ghost\"\nimport { ButtonLink } from \"~/registry/miami/internal/sink/components/button-link\"\nimport { ButtonLoading } from \"~/registry/miami/internal/sink/components/button-loading\"\nimport { ButtonOutline } from \"~/registry/miami/internal/sink/components/button-outline\"\nimport { ButtonSecondary } from \"~/registry/miami/internal/sink/components/button-secondary\"\nimport { ButtonWithIcon } from \"~/registry/miami/internal/sink/components/button-with-icon\"\nimport { CalendarDemo } from \"~/registry/miami/internal/sink/components/calendar-demo\"\nimport { CardDemo } from \"~/registry/miami/internal/sink/components/card-demo\"\nimport { CarouselDemo } from \"~/registry/miami/internal/sink/components/carousel-demo\"\nimport { CheckboxDemo } from \"~/registry/miami/internal/sink/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"~/registry/miami/internal/sink/components/collapsible-demo\"\nimport { ComboboxDemo } from \"~/registry/miami/internal/sink/components/combobox-demo\"\nimport { CommandDemo } from \"~/registry/miami/internal/sink/components/command-demo\"\nimport { ComponentWrapper } from \"~/registry/miami/internal/sink/components/component-wrapper\"\nimport { ContextMenuDemo } from \"~/registry/miami/internal/sink/components/context-menu-demo\"\nimport { DatePickerDemo } from \"~/registry/miami/internal/sink/components/date-picker-demo\"\nimport { DialogDemo } from \"~/registry/miami/internal/sink/components/dialog-demo\"\nimport { DrawerDemo } from \"~/registry/miami/internal/sink/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"~/registry/miami/internal/sink/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"~/registry/miami/internal/sink/components/hover-card-demo\"\nimport { InputDemo } from \"~/registry/miami/internal/sink/components/input-demo\"\nimport { InputOTPDemo } from \"~/registry/miami/internal/sink/components/input-otp-demo\"\nimport { LabelDemo } from \"~/registry/miami/internal/sink/components/label-demo\"\nimport { MenubarDemo } from \"~/registry/miami/internal/sink/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"~/registry/miami/internal/sink/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"~/registry/miami/internal/sink/components/pagination-demo\"\nimport { PopoverDemo } from \"~/registry/miami/internal/sink/components/popover-demo\"\nimport { ProgressDemo } from \"~/registry/miami/internal/sink/components/progress-demo\"\nimport { RadioGroupDemo } from \"~/registry/miami/internal/sink/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"~/registry/miami/internal/sink/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"~/registry/miami/internal/sink/components/scroll-area-demo\"\nimport { SelectDemo } from \"~/registry/miami/internal/sink/components/select-demo\"\nimport { SeparatorDemo } from \"~/registry/miami/internal/sink/components/separator-demo\"\nimport { SheetDemo } from \"~/registry/miami/internal/sink/components/sheet-demo\"\nimport { SkeletonDemo } from \"~/registry/miami/internal/sink/components/skeleton-demo\"\nimport { SliderDemo } from \"~/registry/miami/internal/sink/components/slider-demo\"\nimport { SonnerDemo } from \"~/registry/miami/internal/sink/components/sonner-demo\"\nimport { SwitchDemo } from \"~/registry/miami/internal/sink/components/switch-demo\"\nimport { TableDemo } from \"~/registry/miami/internal/sink/components/table-demo\"\nimport { TabsDemo } from \"~/registry/miami/internal/sink/components/tabs-demo\"\nimport { TextareaDemo } from \"~/registry/miami/internal/sink/components/textarea-demo\"\nimport { ToastDemo } from \"~/registry/miami/internal/sink/components/toast-demo\"\nimport { ToggleDemo } from \"~/registry/miami/internal/sink/components/toggle-demo\"\nimport { ToggleDisabled } from \"~/registry/miami/internal/sink/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"~/registry/miami/internal/sink/components/toggle-group-demo\"\nimport { ToggleOutline } from \"~/registry/miami/internal/sink/components/toggle-outline\"\nimport { ToggleWithText } from \"~/registry/miami/internal/sink/components/toggle-with-text\"\nimport { TooltipDemo } from \"~/registry/miami/internal/sink/components/tooltip-demo\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport default function SinkPage() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n                  <ComponentWrapper name=\"Accordion\">\n                     <AccordionDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Alert\">\n                     <AlertDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"AlertDialog\">\n                     <AlertDialogDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"AspectRatio\">\n                     <AspectRatioDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Avatar\">\n                     <AvatarDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Badge\">\n                     <BadgeDemo />\n                     <BadgeDestructive />\n                     <BadgeOutline />\n                     <BadgeSecondary />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Breadcrumb\">\n                     <BreadcrumbDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Button\">\n                     <div className=\"flex items-center gap-2\">\n                        <ButtonDemo />\n                        <ButtonDestructive />\n                        <ButtonGhost />\n                        <ButtonLink />\n                     </div>\n                     <div className=\"flex items-center gap-2\">\n                        <ButtonLoading />\n                        <ButtonOutline />\n                        <ButtonSecondary />\n                     </div>\n                     <div className=\"flex items-center gap-2\">\n                        <ButtonWithIcon />\n                     </div>\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Calendar\">\n                     <CalendarDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Card\">\n                     <CardDemo className=\"w-full\" />\n                  </ComponentWrapper>\n                  <ComponentWrapper\n                     name=\"Carousel\"\n                     className=\"[&_.max-w-xs]:max-w-[70%]\"\n                  >\n                     <CarouselDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Checkbox\">\n                     <CheckboxDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Collapsible\">\n                     <CollapsibleDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Combobox\">\n                     <ComboboxDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper\n                     name=\"Command\"\n                     className=\"[&_[cmdk-root]]:md:min-w-max\"\n                  >\n                     <CommandDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"ContextMenu\">\n                     <ContextMenuDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"DatePicker\">\n                     <DatePickerDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Dialog\">\n                     <DialogDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Drawer\">\n                     <DrawerDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"DropdownMenu\">\n                     <DropdownMenuDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"HoverCard\">\n                     <HoverCardDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Input\">\n                     <InputDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"InputOTP\">\n                     <InputOTPDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Label\">\n                     <LabelDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Menubar\">\n                     <MenubarDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper\n                     name=\"NavigationMenu\"\n                     className=\"col-span-2\"\n                  >\n                     <NavigationMenuDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Pagination\">\n                     <PaginationDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Popover\">\n                     <PopoverDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Progress\">\n                     <ProgressDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"RadioGroup\">\n                     <RadioGroupDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Resizable\" className=\"col-span-2\">\n                     <ResizableHandleDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"ScrollArea\">\n                     <ScrollAreaDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Select\">\n                     <SelectDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Separator\">\n                     <SeparatorDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Sheet\">\n                     <SheetDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Skeleton\">\n                     <SkeletonDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Slider\">\n                     <SliderDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Sonner\">\n                     <SonnerDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Switch\">\n                     <SwitchDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Table\" className=\"col-span-2\">\n                     <TableDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Tabs\">\n                     <TabsDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Textarea\">\n                     <TextareaDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Toast\">\n                     <ToastDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Toggle\">\n                     <div className=\"flex items-center gap-2\">\n                        <ToggleDemo />\n                        <ToggleDisabled />\n                        <ToggleOutline />\n                        <ToggleWithText />\n                     </div>\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"ToggleGroup\">\n                     <ToggleGroupDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Tooltip\">\n                     <TooltipDemo />\n                  </ComponentWrapper>\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/sink/page.tsx"
+    },
+    {
+      "path": "internal/sink/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   GalleryVerticalEnd,\n   Map,\n   PieChart,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"~/registry/miami/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"~/registry/miami/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"~/registry/miami/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"~/registry/miami/blocks/sidebar-07/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarRail,\n} from \"~/registry/miami/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: GalleryVerticalEnd,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar collapsible=\"icon\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/component-wrapper.tsx",
+      "content": "import { ny } from \"~/registry/miami/lib/utils\"\n\nexport function ComponentWrapper({\n   className,\n   name,\n   children,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & { name: string }) {\n   return (\n      <div\n         className={ny(\"flex w-full flex-col rounded-lg border\", className)}\n         {...props}\n      >\n         <div className=\"border-b px-4 py-3\">\n            <div className=\"text-sm font-medium\">{name}</div>\n         </div>\n         <div className=\"flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full\">\n            {children}\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n               >\n                  <SidebarMenuItem>\n                     <CollapsibleTrigger asChild>\n                        <SidebarMenuButton tooltip={item.title}>\n                           {item.icon && <item.icon />}\n                           <span>{item.title}</span>\n                           <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                     </CollapsibleTrigger>\n                     <CollapsibleContent>\n                        <SidebarMenuSub>\n                           {item.items?.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                 <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                       <span>{subItem.title}</span>\n                                    </a>\n                                 </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                           ))}\n                        </SidebarMenuSub>\n                     </CollapsibleContent>\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   Forward,\n   type LucideIcon,\n   MoreHorizontal,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Forward className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/miami/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"~/registry/miami/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-4\" />\n                     </div>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {activeTeam.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                           {activeTeam.plan}\n                        </span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/accordion-demo.tsx",
+      "content": "import {\n   Accordion,\n   AccordionContent,\n   AccordionItem,\n   AccordionTrigger,\n} from \"~/registry/miami/ui/accordion\"\n\nexport function AccordionDemo() {\n   return (\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n         <AccordionItem value=\"item-1\">\n            <AccordionTrigger>Is it accessible?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It adheres to the WAI-ARIA design pattern.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-2\">\n            <AccordionTrigger>Is it styled?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It comes with default styles that matches the other\n               components&apos; aesthetic.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-3\">\n            <AccordionTrigger>Is it animated?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It's animated by default, but you can disable it if you\n               prefer.\n            </AccordionContent>\n         </AccordionItem>\n      </Accordion>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport { Alert, AlertDescription, AlertTitle } from \"~/registry/miami/ui/alert\"\n\nexport function AlertDemo() {\n   return (\n      <Alert>\n         <Terminal className=\"h-4 w-4\" />\n         <AlertTitle>Heads up!</AlertTitle>\n         <AlertDescription>\n            You can add components to your app using the cli.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-dialog-demo.tsx",
+      "content": "import {\n   AlertDialog,\n   AlertDialogAction,\n   AlertDialogCancel,\n   AlertDialogContent,\n   AlertDialogDescription,\n   AlertDialogFooter,\n   AlertDialogHeader,\n   AlertDialogTitle,\n   AlertDialogTrigger,\n} from \"~/registry/miami/ui/alert-dialog\"\nimport { Button } from \"~/registry/miami/ui/button\"\n\nexport function AlertDialogDemo() {\n   return (\n      <AlertDialog>\n         <AlertDialogTrigger asChild>\n            <Button variant=\"outline\">Show Dialog</Button>\n         </AlertDialogTrigger>\n         <AlertDialogContent>\n            <AlertDialogHeader>\n               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n               <AlertDialogDescription>\n                  This action cannot be undone. This will permanently delete\n                  your account and remove your data from our servers.\n               </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n               <AlertDialogCancel>Cancel</AlertDialogCancel>\n               <AlertDialogAction>Continue</AlertDialogAction>\n            </AlertDialogFooter>\n         </AlertDialogContent>\n      </AlertDialog>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"~/registry/miami/ui/aspect-ratio\"\n\nexport function AspectRatioDemo() {\n   return (\n      <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n         <Image\n            src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n            alt=\"Photo by Drew Beamer\"\n            fill\n            className=\"h-full w-full rounded-md object-cover\"\n         />\n      </AspectRatio>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/avatar-demo.tsx",
+      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"~/registry/miami/ui/avatar\"\n\nexport function AvatarDemo() {\n   return (\n      <Avatar>\n         <AvatarImage src=\"https://github.com/nyxb.png\" alt=\"@nyxb\" />\n         <AvatarFallback>CN</AvatarFallback>\n      </Avatar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-demo.tsx",
+      "content": "import { Badge } from \"~/registry/miami/ui/badge\"\n\nexport function BadgeDemo() {\n   return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/breadcrumb-demo.tsx",
+      "content": "import {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/registry/miami/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                     <span className=\"sr-only\">Toggle menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/docs/components\">\n                  Components\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\n\nexport function ButtonDemo() {\n   return <Button>Button</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"~/registry/miami/ui/calendar\"\n\nexport function CalendarDemo() {\n   const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n   return (\n      <Calendar\n         mode=\"single\"\n         selected={date}\n         onSelect={setDate}\n         className=\"rounded-md border shadow\"\n      />\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport { Switch } from \"~/registry/miami/ui/switch\"\n\nconst notifications = [\n   {\n      title: \"Your call has been confirmed.\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"You have a new message!\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"Your subscription is expiring soon!\",\n      description: \"2 hours ago\",\n   },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport function CardDemo({ className, ...props }: CardProps) {\n   return (\n      <Card className={ny(\"w-[380px]\", className)} {...props}>\n         <CardHeader>\n            <CardTitle>Notifications</CardTitle>\n            <CardDescription>You have 3 unread messages.</CardDescription>\n         </CardHeader>\n         <CardContent className=\"grid gap-4\">\n            <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n               <BellRing />\n               <div className=\"flex-1 space-y-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                     Push Notifications\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                     Send notifications to device.\n                  </p>\n               </div>\n               <Switch />\n            </div>\n            <div>\n               {notifications.map((notification, index) => (\n                  <div\n                     key={index}\n                     className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n                  >\n                     <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n                     <div className=\"space-y-1\">\n                        <p className=\"text-sm font-medium leading-none\">\n                           {notification.title}\n                        </p>\n                        <p className=\"text-sm text-muted-foreground\">\n                           {notification.description}\n                        </p>\n                     </div>\n                  </div>\n               ))}\n            </div>\n         </CardContent>\n         <CardFooter>\n            <Button className=\"w-full\">\n               <Check /> Mark all as read\n            </Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"~/registry/miami/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"~/registry/miami/ui/carousel\"\n\nexport function CarouselDemo() {\n   return (\n      <Carousel className=\"w-full max-w-xs\">\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"~/registry/miami/ui/checkbox\"\n\nexport function CheckboxDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms\" />\n         <label\n            htmlFor=\"terms\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/registry/miami/ui/collapsible\"\n\nexport function CollapsibleDemo() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   return (\n      <Collapsible\n         open={isOpen}\n         onOpenChange={setIsOpen}\n         className=\"w-[350px] space-y-2\"\n      >\n         <div className=\"flex items-center justify-between space-x-4 px-4\">\n            <h4 className=\"text-sm font-semibold\">\n               @peduarte starred 3 repositories\n            </h4>\n            <CollapsibleTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <ChevronsUpDown className=\"h-4 w-4\" />\n                  <span className=\"sr-only\">Toggle</span>\n               </Button>\n            </CollapsibleTrigger>\n         </div>\n         <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n            @radix-ui/primitives\n         </div>\n         <CollapsibleContent className=\"space-y-2\">\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @radix-ui/colors\n            </div>\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @stitches/react\n            </div>\n         </CollapsibleContent>\n      </Collapsible>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"~/registry/miami/ui/command\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\nconst frameworks = [\n   {\n      value: \"next.js\",\n      label: \"Next.js\",\n   },\n   {\n      value: \"sveltekit\",\n      label: \"SvelteKit\",\n   },\n   {\n      value: \"nuxt.js\",\n      label: \"Nuxt.js\",\n   },\n   {\n      value: \"remix\",\n      label: \"Remix\",\n   },\n   {\n      value: \"astro\",\n      label: \"Astro\",\n   },\n]\n\nexport function ComboboxDemo() {\n   const [open, setOpen] = React.useState(false)\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <Popover open={open} onOpenChange={setOpen}>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               role=\"combobox\"\n               aria-expanded={open}\n               className=\"w-[200px] justify-between\"\n            >\n               {value\n                  ? frameworks.find((framework) => framework.value === value)\n                       ?.label\n                  : \"Select framework...\"}\n               <ChevronsUpDown className=\"opacity-50\" />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[200px] p-0\">\n            <Command>\n               <CommandInput\n                  placeholder=\"Search framework...\"\n                  className=\"h-9\"\n               />\n               <CommandList>\n                  <CommandEmpty>No framework found.</CommandEmpty>\n                  <CommandGroup>\n                     {frameworks.map((framework) => (\n                        <CommandItem\n                           key={framework.value}\n                           value={framework.value}\n                           onSelect={(currentValue) => {\n                              setValue(\n                                 currentValue === value ? \"\" : currentValue,\n                              )\n                              setOpen(false)\n                           }}\n                        >\n                           {framework.label}\n                           <Check\n                              className={ny(\n                                 \"ml-auto\",\n                                 value === framework.value\n                                    ? \"opacity-100\"\n                                    : \"opacity-0\",\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/command-demo.tsx",
+      "content": "import {\n   Calculator,\n   Calendar,\n   CreditCard,\n   Settings,\n   Smile,\n   User,\n} from \"lucide-react\"\n\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from \"~/registry/miami/ui/command\"\n\nexport function CommandDemo() {\n   return (\n      <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n         <CommandInput placeholder=\"Type a command or search...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Suggestions\">\n               <CommandItem>\n                  <Calendar />\n                  <span>Calendar</span>\n               </CommandItem>\n               <CommandItem>\n                  <Smile />\n                  <span>Search Emoji</span>\n               </CommandItem>\n               <CommandItem disabled>\n                  <Calculator />\n                  <span>Calculator</span>\n               </CommandItem>\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup heading=\"Settings\">\n               <CommandItem>\n                  <User />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <CreditCard />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <Settings />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n               </CommandItem>\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/context-menu-demo.tsx",
+      "content": "import {\n   ContextMenu,\n   ContextMenuCheckboxItem,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuLabel,\n   ContextMenuRadioGroup,\n   ContextMenuRadioItem,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuTrigger,\n} from \"~/registry/miami/ui/context-menu\"\n\nexport function ContextMenuDemo() {\n   return (\n      <ContextMenu>\n         <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n            Right click here\n         </ContextMenuTrigger>\n         <ContextMenuContent className=\"w-64\">\n            <ContextMenuItem inset>\n               Back\n               <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset disabled>\n               Forward\n               <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset>\n               Reload\n               <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSub>\n               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n               <ContextMenuSubContent className=\"w-48\">\n                  <ContextMenuItem>\n                     Save Page As...\n                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n                  </ContextMenuItem>\n                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                  <ContextMenuItem>Name Window...</ContextMenuItem>\n                  <ContextMenuSeparator />\n                  <ContextMenuItem>Developer Tools</ContextMenuItem>\n               </ContextMenuSubContent>\n            </ContextMenuSub>\n            <ContextMenuSeparator />\n            <ContextMenuCheckboxItem checked>\n               Show Bookmarks Bar\n               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuSeparator />\n            <ContextMenuRadioGroup value=\"pedro\">\n               <ContextMenuLabel inset>People</ContextMenuLabel>\n               <ContextMenuSeparator />\n               <ContextMenuRadioItem value=\"pedro\">\n                  Pedro Duarte\n               </ContextMenuRadioItem>\n               <ContextMenuRadioItem value=\"colm\">\n                  Colm Tuite\n               </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n         </ContextMenuContent>\n      </ContextMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Calendar } from \"~/registry/miami/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\nexport function DatePickerDemo() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant={\"outline\"}\n               className={ny(\n                  \"w-[240px] justify-start text-left font-normal\",\n                  !date && \"text-muted-foreground\",\n               )}\n            >\n               <CalendarIcon />\n               {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n               mode=\"single\"\n               selected={date}\n               onSelect={setDate}\n               initialFocus\n            />\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dialog-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"~/registry/miami/ui/dialog\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport function DialogDemo() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-[425px]\">\n            <DialogHeader>\n               <DialogTitle>Edit profile</DialogTitle>\n               <DialogDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"@peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <DialogFooter>\n               <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport { Minus, Plus } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"~/registry/miami/ui/drawer\"\n\nconst data = [\n   {\n      goal: 400,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 239,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 349,\n   },\n]\n\nexport function DrawerDemo() {\n   const [goal, setGoal] = React.useState(350)\n\n   function onClick(adjustment: number) {\n      setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n   }\n\n   return (\n      <Drawer>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Open Drawer</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mx-auto w-full max-w-sm\">\n               <DrawerHeader>\n                  <DrawerTitle>Move Goal</DrawerTitle>\n                  <DrawerDescription>\n                     Set your daily activity goal.\n                  </DrawerDescription>\n               </DrawerHeader>\n               <div className=\"p-4 pb-0\">\n                  <div className=\"flex items-center justify-center space-x-2\">\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"h-8 w-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(-10)}\n                        disabled={goal <= 200}\n                     >\n                        <Minus />\n                        <span className=\"sr-only\">Decrease</span>\n                     </Button>\n                     <div className=\"flex-1 text-center\">\n                        <div className=\"text-7xl font-bold tracking-tighter\">\n                           {goal}\n                        </div>\n                        <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                           Calories/day\n                        </div>\n                     </div>\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"h-8 w-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(10)}\n                        disabled={goal >= 400}\n                     >\n                        <Plus />\n                        <span className=\"sr-only\">Increase</span>\n                     </Button>\n                  </div>\n                  <div className=\"mt-3 h-[120px]\">\n                     <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data}>\n                           <Bar\n                              dataKey=\"goal\"\n                              style={\n                                 {\n                                    fill: \"hsl(var(--foreground))\",\n                                    opacity: 0.9,\n                                 } as React.CSSProperties\n                              }\n                           />\n                        </BarChart>\n                     </ResponsiveContainer>\n                  </div>\n               </div>\n               <DrawerFooter>\n                  <Button>Submit</Button>\n                  <DrawerClose asChild>\n                     <Button variant=\"outline\">Cancel</Button>\n                  </DrawerClose>\n               </DrawerFooter>\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuPortal,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from \"~/registry/miami/ui/dropdown-menu\"\n\nexport function DropdownMenuDemo() {\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  Profile\n                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Billing\n                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Settings\n                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Keyboard shortcuts\n                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>Team</DropdownMenuItem>\n               <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                     <DropdownMenuSubContent>\n                        <DropdownMenuItem>Email</DropdownMenuItem>\n                        <DropdownMenuItem>Message</DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>More...</DropdownMenuItem>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n               </DropdownMenuSub>\n               <DropdownMenuItem>\n                  New Team\n                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               Log out\n               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/registry/miami/ui/avatar\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   HoverCard,\n   HoverCardContent,\n   HoverCardTrigger,\n} from \"~/registry/miami/ui/hover-card\"\n\nexport function HoverCardDemo() {\n   return (\n      <HoverCard>\n         <HoverCardTrigger asChild>\n            <Button variant=\"link\">@nextjs</Button>\n         </HoverCardTrigger>\n         <HoverCardContent className=\"w-80\">\n            <div className=\"flex justify-between space-x-4\">\n               <Avatar>\n                  <AvatarImage src=\"https://github.com/vercel.png\" />\n                  <AvatarFallback>VC</AvatarFallback>\n               </Avatar>\n               <div className=\"space-y-1\">\n                  <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n                  <p className=\"text-sm\">\n                     The React Framework – created and maintained by @vercel.\n                  </p>\n                  <div className=\"flex items-center pt-2\">\n                     <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n                     <span className=\"text-xs text-muted-foreground\">\n                        Joined December 2021\n                     </span>\n                  </div>\n               </div>\n            </div>\n         </HoverCardContent>\n      </HoverCard>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-demo.tsx",
+      "content": "import { Input } from \"~/registry/miami/ui/input\"\n\nexport function InputDemo() {\n   return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-otp-demo.tsx",
+      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"~/registry/miami/ui/input-otp\"\n\nexport function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/label-demo.tsx",
+      "content": "import { Checkbox } from \"~/registry/miami/ui/checkbox\"\nimport { Label } from \"~/registry/miami/ui/label\"\n\nexport function LabelDemo() {\n   return (\n      <div>\n         <div className=\"flex items-center space-x-2\">\n            <Checkbox id=\"terms\" />\n            <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/menubar-demo.tsx",
+      "content": "import {\n   Menubar,\n   MenubarCheckboxItem,\n   MenubarContent,\n   MenubarItem,\n   MenubarMenu,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarSeparator,\n   MenubarShortcut,\n   MenubarSub,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarTrigger,\n} from \"~/registry/miami/ui/menubar\"\n\nexport function MenubarDemo() {\n   return (\n      <Menubar>\n         <MenubarMenu>\n            <MenubarTrigger>File</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  New Window <MenubarShortcut>⌘N</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled>New Incognito Window</MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Share</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Email link</MenubarItem>\n                     <MenubarItem>Messages</MenubarItem>\n                     <MenubarItem>Notes</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>\n                  Print... <MenubarShortcut>⌘P</MenubarShortcut>\n               </MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Edit</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Find</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Search the web</MenubarItem>\n                     <MenubarSeparator />\n                     <MenubarItem>Find...</MenubarItem>\n                     <MenubarItem>Find Next</MenubarItem>\n                     <MenubarItem>Find Previous</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>Cut</MenubarItem>\n               <MenubarItem>Copy</MenubarItem>\n               <MenubarItem>Paste</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>View</MenubarTrigger>\n            <MenubarContent>\n               <MenubarCheckboxItem>\n                  Always Show Bookmarks Bar\n               </MenubarCheckboxItem>\n               <MenubarCheckboxItem checked>\n                  Always Show Full URLs\n               </MenubarCheckboxItem>\n               <MenubarSeparator />\n               <MenubarItem inset>\n                  Reload <MenubarShortcut>⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled inset>\n                  Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Hide Sidebar</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Profiles</MenubarTrigger>\n            <MenubarContent>\n               <MenubarRadioGroup value=\"benoit\">\n                  <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n                  <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n                  <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n               </MenubarRadioGroup>\n               <MenubarSeparator />\n               <MenubarItem inset>Edit...</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n      </Menubar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport {\n   NavigationMenu,\n   NavigationMenuContent,\n   NavigationMenuItem,\n   NavigationMenuLink,\n   NavigationMenuList,\n   NavigationMenuTrigger,\n   navigationMenuTriggerStyle,\n} from \"~/registry/miami/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n   {\n      title: \"Alert Dialog\",\n      href: \"/docs/primitives/alert-dialog\",\n      description:\n         \"A modal dialog that interrupts the user with important content and expects a response.\",\n   },\n   {\n      title: \"Hover Card\",\n      href: \"/docs/primitives/hover-card\",\n      description:\n         \"For sighted users to preview content available behind a link.\",\n   },\n   {\n      title: \"Progress\",\n      href: \"/docs/primitives/progress\",\n      description:\n         \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n   },\n   {\n      title: \"Scroll-area\",\n      href: \"/docs/primitives/scroll-area\",\n      description: \"Visually or semantically separates content.\",\n   },\n   {\n      title: \"Tabs\",\n      href: \"/docs/primitives/tabs\",\n      description:\n         \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n   },\n   {\n      title: \"Tooltip\",\n      href: \"/docs/primitives/tooltip\",\n      description:\n         \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n   },\n]\n\nexport function NavigationMenuDemo() {\n   return (\n      <NavigationMenu>\n         <NavigationMenuList>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                     <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                           <a\n                              className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                              href=\"/\"\n                           >\n                              <div className=\"mb-2 mt-4 text-lg font-medium\">\n                                 nyxb/ui\n                              </div>\n                              <p className=\"text-sm leading-tight text-muted-foreground\">\n                                 Beautifully designed components built with\n                                 Radix UI and Tailwind CSS.\n                              </p>\n                           </a>\n                        </NavigationMenuLink>\n                     </li>\n                     <ListItem href=\"/docs\" title=\"Introduction\">\n                        Re-usable components built using Radix UI and Tailwind\n                        CSS.\n                     </ListItem>\n                     <ListItem href=\"/docs/installation\" title=\"Installation\">\n                        How to install dependencies and structure your app.\n                     </ListItem>\n                     <ListItem\n                        href=\"/docs/primitives/typography\"\n                        title=\"Typography\"\n                     >\n                        Styles for headings, paragraphs, lists...etc\n                     </ListItem>\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                     {components.map((component) => (\n                        <ListItem\n                           key={component.title}\n                           title={component.title}\n                           href={component.href}\n                        >\n                           {component.description}\n                        </ListItem>\n                     ))}\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <Link href=\"/docs\" legacyBehavior passHref>\n                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n                     Documentation\n                  </NavigationMenuLink>\n               </Link>\n            </NavigationMenuItem>\n         </NavigationMenuList>\n      </NavigationMenu>\n   )\n}\n\nconst ListItem = React.forwardRef<\n   React.ElementRef<\"a\">,\n   React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n   return (\n      <li>\n         <NavigationMenuLink asChild>\n            <a\n               ref={ref}\n               className={ny(\n                  \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n                  className,\n               )}\n               {...props}\n            >\n               <div className=\"text-sm font-medium leading-none\">{title}</div>\n               <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                  {children}\n               </p>\n            </a>\n         </NavigationMenuLink>\n      </li>\n   )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/pagination-demo.tsx",
+      "content": "import {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n} from \"~/registry/miami/ui/pagination\"\n\nexport function PaginationDemo() {\n   return (\n      <Pagination>\n         <PaginationContent>\n            <PaginationItem>\n               <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\" isActive>\n                  2\n               </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationNext href=\"#\" />\n            </PaginationItem>\n         </PaginationContent>\n      </Pagination>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/popover-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/registry/miami/ui/popover\"\n\nexport function PopoverDemo() {\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button variant=\"outline\">Open popover</Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-80\">\n            <div className=\"grid gap-4\">\n               <div className=\"space-y-2\">\n                  <h4 className=\"font-medium leading-none\">Dimensions</h4>\n                  <p className=\"text-sm text-muted-foreground\">\n                     Set the dimensions for the layer.\n                  </p>\n               </div>\n               <div className=\"grid gap-2\">\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"width\">Width</Label>\n                     <Input\n                        id=\"width\"\n                        defaultValue=\"100%\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxWidth\">Max. width</Label>\n                     <Input\n                        id=\"maxWidth\"\n                        defaultValue=\"300px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"height\">Height</Label>\n                     <Input\n                        id=\"height\"\n                        defaultValue=\"25px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxHeight\">Max. height</Label>\n                     <Input\n                        id=\"maxHeight\"\n                        defaultValue=\"none\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n               </div>\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"~/registry/miami/ui/progress\"\n\nexport function ProgressDemo() {\n   const [progress, setProgress] = React.useState(13)\n\n   React.useEffect(() => {\n      const timer = setTimeout(() => setProgress(66), 500)\n      return () => clearTimeout(timer)\n   }, [])\n\n   return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/radio-group-demo.tsx",
+      "content": "import { Label } from \"~/registry/miami/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"~/registry/miami/ui/radio-group\"\n\nexport function RadioGroupDemo() {\n   return (\n      <RadioGroup defaultValue=\"comfortable\">\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"default\" id=\"r1\" />\n            <Label htmlFor=\"r1\">Default</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n            <Label htmlFor=\"r2\">Comfortable</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"compact\" id=\"r3\" />\n            <Label htmlFor=\"r3\">Compact</Label>\n         </div>\n      </RadioGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/resizable-handle.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"~/registry/miami/ui/resizable\"\n\nexport function ResizableHandleDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Sidebar</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"~/registry/miami/ui/scroll-area\"\nimport { Separator } from \"~/registry/miami/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n   (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n\nexport function ScrollAreaDemo() {\n   return (\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n         <div className=\"p-4\">\n            <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n            {tags.map((tag) => (\n               <React.Fragment key={tag}>\n                  <div className=\"text-sm\">{tag}</div>\n                  <Separator className=\"my-2\" />\n               </React.Fragment>\n            ))}\n         </div>\n      </ScrollArea>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from \"~/registry/miami/ui/select\"\n\nexport function SelectDemo() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[180px]\">\n            <SelectValue placeholder=\"Select a fruit\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>Fruits</SelectLabel>\n               <SelectItem value=\"apple\">Apple</SelectItem>\n               <SelectItem value=\"banana\">Banana</SelectItem>\n               <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n               <SelectItem value=\"grapes\">Grapes</SelectItem>\n               <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/separator-demo.tsx",
+      "content": "import { Separator } from \"~/registry/miami/ui/separator\"\n\nexport function SeparatorDemo() {\n   return (\n      <div>\n         <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-medium leading-none\">\n               Radix Primitives\n            </h4>\n            <p className=\"text-sm text-muted-foreground\">\n               An open-source UI component library.\n            </p>\n         </div>\n         <Separator className=\"my-4\" />\n         <div className=\"flex h-5 items-center space-x-4 text-sm\">\n            <div>Blog</div>\n            <Separator orientation=\"vertical\" />\n            <div>Docs</div>\n            <Separator orientation=\"vertical\" />\n            <div>Source</div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sheet-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from \"~/registry/miami/ui/sheet\"\n\nexport function SheetDemo() {\n   return (\n      <Sheet>\n         <SheetTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </SheetTrigger>\n         <SheetContent>\n            <SheetHeader>\n               <SheetTitle>Edit profile</SheetTitle>\n               <SheetDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"@peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <SheetFooter>\n               <SheetClose asChild>\n                  <Button type=\"submit\">Save changes</Button>\n               </SheetClose>\n            </SheetFooter>\n         </SheetContent>\n      </Sheet>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"~/registry/miami/ui/skeleton\"\n\nexport function SkeletonDemo() {\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <Skeleton className=\"h-12 w-12 rounded-full\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/slider-demo.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/miami/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny(\"w-[60%]\", className)}\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\n\nexport function SonnerDemo() {\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() =>\n            toast(\"Event has been created\", {\n               description: \"Sunday, December 03, 2023 at 9:00 AM\",\n               action: {\n                  label: \"Undo\",\n                  onClick: () => console.log(\"Undo\"),\n               },\n            })\n         }\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/switch-demo.tsx",
+      "content": "import { Label } from \"~/registry/miami/ui/label\"\nimport { Switch } from \"~/registry/miami/ui/switch\"\n\nexport function SwitchDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Switch id=\"airplane-mode\" />\n         <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/table-demo.tsx",
+      "content": "import {\n   Table,\n   TableBody,\n   TableCaption,\n   TableCell,\n   TableFooter,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from \"~/registry/miami/ui/table\"\n\nconst invoices = [\n   {\n      invoice: \"INV001\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$250.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV002\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$150.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV003\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$350.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV004\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$450.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV005\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$550.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV006\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$200.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV007\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$300.00\",\n      paymentMethod: \"Credit Card\",\n   },\n]\n\nexport function TableDemo() {\n   return (\n      <Table>\n         <TableCaption>A list of your recent invoices.</TableCaption>\n         <TableHeader>\n            <TableRow>\n               <TableHead className=\"w-[100px]\">Invoice</TableHead>\n               <TableHead>Status</TableHead>\n               <TableHead>Method</TableHead>\n               <TableHead className=\"text-right\">Amount</TableHead>\n            </TableRow>\n         </TableHeader>\n         <TableBody>\n            {invoices.map((invoice) => (\n               <TableRow key={invoice.invoice}>\n                  <TableCell className=\"font-medium\">\n                     {invoice.invoice}\n                  </TableCell>\n                  <TableCell>{invoice.paymentStatus}</TableCell>\n                  <TableCell>{invoice.paymentMethod}</TableCell>\n                  <TableCell className=\"text-right\">\n                     {invoice.totalAmount}\n                  </TableCell>\n               </TableRow>\n            ))}\n         </TableBody>\n         <TableFooter>\n            <TableRow>\n               <TableCell colSpan={3}>Total</TableCell>\n               <TableCell className=\"text-right\">$2,500.00</TableCell>\n            </TableRow>\n         </TableFooter>\n      </Table>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tabs-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\nimport {\n   Tabs,\n   TabsContent,\n   TabsList,\n   TabsTrigger,\n} from \"~/registry/miami/ui/tabs\"\n\nexport function TabsDemo() {\n   return (\n      <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n         <TabsList className=\"grid w-full grid-cols-2\">\n            <TabsTrigger value=\"account\">Account</TabsTrigger>\n            <TabsTrigger value=\"password\">Password</TabsTrigger>\n         </TabsList>\n         <TabsContent value=\"account\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Account</CardTitle>\n                  <CardDescription>\n                     Make changes to your account here. Click save when you're\n                     done.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"username\">Username</Label>\n                     <Input id=\"username\" defaultValue=\"@peduarte\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save changes</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n         <TabsContent value=\"password\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Password</CardTitle>\n                  <CardDescription>\n                     Change your password here. After saving, you'll be logged\n                     out.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"current\">Current password</Label>\n                     <Input id=\"current\" type=\"password\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"new\">New password</Label>\n                     <Input id=\"new\" type=\"password\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save password</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n      </Tabs>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/textarea-demo.tsx",
+      "content": "import { Textarea } from \"~/registry/miami/ui/textarea\"\n\nexport function TextareaDemo() {\n   return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"~/registry/miami/hooks/use-toast\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { ToastAction } from \"~/registry/miami/ui/toast\"\n\nexport function ToastDemo() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Scheduled: Catch up \",\n               description: \"Friday, February 10, 2023 at 5:57 PM\",\n               action: (\n                  <ToastAction altText=\"Goto schedule to undo\">\n                     Undo\n                  </ToastAction>\n               ),\n            })\n         }}\n      >\n         Add to calendar\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/miami/ui/toggle\"\n\nexport function ToggleDemo() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <Bold className=\"h-4 w-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"~/registry/miami/ui/toggle-group\"\n\nexport function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"h-4 w-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"h-4 w-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <Underline className=\"h-4 w-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tooltip-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/miami/ui/tooltip\"\n\nexport function TooltipDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-destructive.tsx",
+      "content": "import { Badge } from \"~/registry/miami/ui/badge\"\n\nexport function BadgeDestructive() {\n   return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-outline.tsx",
+      "content": "import { Badge } from \"~/registry/miami/ui/badge\"\n\nexport function BadgeOutline() {\n   return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-secondary.tsx",
+      "content": "import { Badge } from \"~/registry/miami/ui/badge\"\n\nexport function BadgeSecondary() {\n   return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-destructive.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\n\nexport function ButtonDestructive() {\n   return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-ghost.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\n\nexport function ButtonGhost() {\n   return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-link.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\n\nexport function ButtonLink() {\n   return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\n\nexport function ButtonLoading() {\n   return (\n      <Button disabled>\n         <Loader2 className=\"animate-spin\" />\n         Please wait\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-outline.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\n\nexport function ButtonOutline() {\n   return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-secondary.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\n\nexport function ButtonSecondary() {\n   return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-with-icon.tsx",
+      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\n\nexport function ButtonWithIcon() {\n   return (\n      <Button>\n         <MailOpen /> Login with Email\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/miami/ui/toggle\"\n\nexport function ToggleDisabled() {\n   return (\n      <Toggle aria-label=\"Toggle italic\" disabled>\n         <Underline className=\"h-4 w-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/miami/ui/toggle\"\n\nexport function ToggleOutline() {\n   return (\n      <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n         <Italic />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/miami/ui/toggle\"\n\nexport function ToggleWithText() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <Italic />\n         Italic\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/skeleton-card.json b/apps/web/public/r/styles/miami/skeleton-card.json
index 480e2dbd..6f0947e9 100644
--- a/apps/web/public/r/styles/miami/skeleton-card.json
+++ b/apps/web/public/r/styles/miami/skeleton-card.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "skeleton-card",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/skeleton-card.tsx",
-      "content": "import { Skeleton } from '~/registry/miami/ui/skeleton'\n\nexport default function SkeletonCard() {\n   return (\n      <div className=\"flex flex-col space-y-3\">\n         <Skeleton className=\"h-[125px] w-[250px] rounded-xl\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
+      "path": "examples/skeleton-card.tsx",
+      "content": "import { Skeleton } from \"~/registry/miami/ui/skeleton\"\n\nexport default function SkeletonCard() {\n   return (\n      <div className=\"flex flex-col space-y-3\">\n         <Skeleton className=\"h-[125px] w-[250px] rounded-xl\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/skeleton-demo.json b/apps/web/public/r/styles/miami/skeleton-demo.json
index f5fbba3f..a5257a7a 100644
--- a/apps/web/public/r/styles/miami/skeleton-demo.json
+++ b/apps/web/public/r/styles/miami/skeleton-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "skeleton-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/skeleton-demo.tsx",
-      "content": "import { Skeleton } from '~/registry/miami/ui/skeleton'\n\nexport default function SkeletonDemo() {\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <Skeleton className=\"size-12 rounded-full\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
+      "path": "examples/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"~/registry/miami/ui/skeleton\"\n\nexport default function SkeletonDemo() {\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <Skeleton className=\"size-12 rounded-full\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/skeleton.json b/apps/web/public/r/styles/miami/skeleton.json
index 4f990e67..b15f4b77 100644
--- a/apps/web/public/r/styles/miami/skeleton.json
+++ b/apps/web/public/r/styles/miami/skeleton.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "skeleton",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/skeleton.tsx",
-      "content": "import { ny } from '~/lib/utils'\n\nfunction Skeleton({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny('bg-primary/10 animate-pulse rounded-md', className)}\n         {...props}\n      />\n   )\n}\n\nexport { Skeleton }\n",
-      "type": "registry:component",
+      "content": "import { ny } from \"~/lib/utils\"\n\nfunction Skeleton({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\"bg-primary/10 animate-pulse rounded-md\", className)}\n         {...props}\n      />\n   )\n}\n\nexport { Skeleton }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/slider-demo.json b/apps/web/public/r/styles/miami/slider-demo.json
index 480ad46e..c7937502 100644
--- a/apps/web/public/r/styles/miami/slider-demo.json
+++ b/apps/web/public/r/styles/miami/slider-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-demo.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/miami/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDemo({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny('w-3/5', className)}\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-demo.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/miami/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDemo({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/slider-disabled.json b/apps/web/public/r/styles/miami/slider-disabled.json
index 97343fb4..96509c78 100644
--- a/apps/web/public/r/styles/miami/slider-disabled.json
+++ b/apps/web/public/r/styles/miami/slider-disabled.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-disabled.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/miami/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDisabled({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny('w-3/5', className)}\n         disabled\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-disabled.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/miami/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDisabled({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         disabled\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/slider-format-label-side.json b/apps/web/public/r/styles/miami/slider-format-label-side.json
index ce1aea29..73d01961 100644
--- a/apps/web/public/r/styles/miami/slider-format-label-side.json
+++ b/apps/web/public/r/styles/miami/slider-format-label-side.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-format-label-side",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-format-label-side.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/miami/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderFormatLabelSide({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny('w-3/5', className)}\n         formatLabel={value => `${value} points`}\n         formatLabelSide=\"left\"\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-format-label-side.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/miami/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderFormatLabelSide({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         formatLabel={(value) => `${value} points`}\n         formatLabelSide=\"left\"\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/slider-format-label.json b/apps/web/public/r/styles/miami/slider-format-label.json
index 4b00123e..cf3cb6f1 100644
--- a/apps/web/public/r/styles/miami/slider-format-label.json
+++ b/apps/web/public/r/styles/miami/slider-format-label.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-format-label",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-format-label.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/miami/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderFormatLabel({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny('w-3/5', className)}\n         formatLabel={value => `${value} points`}\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-format-label.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/miami/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderFormatLabel({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         formatLabel={(value) => `${value} points`}\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/slider-inverted.json b/apps/web/public/r/styles/miami/slider-inverted.json
index 4a2f75d0..282b4c78 100644
--- a/apps/web/public/r/styles/miami/slider-inverted.json
+++ b/apps/web/public/r/styles/miami/slider-inverted.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-inverted",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-inverted.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/miami/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderInverted({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny('w-3/5', className)}\n         inverted\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-inverted.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/miami/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderInverted({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         inverted\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/slider-range.json b/apps/web/public/r/styles/miami/slider-range.json
index 32188c71..77e8e6d6 100644
--- a/apps/web/public/r/styles/miami/slider-range.json
+++ b/apps/web/public/r/styles/miami/slider-range.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-range",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-range.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/miami/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderRange({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[25, 75]}\n         max={100}\n         step={1}\n         className={ny('w-3/5', className)}\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-range.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/miami/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderRange({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[25, 75]}\n         max={100}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/slider-tick-marks-full.json b/apps/web/public/r/styles/miami/slider-tick-marks-full.json
index 0dd6aebf..781baf3d 100644
--- a/apps/web/public/r/styles/miami/slider-tick-marks-full.json
+++ b/apps/web/public/r/styles/miami/slider-tick-marks-full.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-tick-marks-full",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-tick-marks-full.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/miami/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderTickMarksFull({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny('w-3/5', className)}\n         showSteps=\"full\"\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-tick-marks-full.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/miami/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderTickMarksFull({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         showSteps=\"full\"\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/slider-tick-marks-half.json b/apps/web/public/r/styles/miami/slider-tick-marks-half.json
index 9a756dac..54b49dcf 100644
--- a/apps/web/public/r/styles/miami/slider-tick-marks-half.json
+++ b/apps/web/public/r/styles/miami/slider-tick-marks-half.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-tick-marks-half",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-tick-marks-half.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/miami/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderTickMarksHalf({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny('w-3/5', className)}\n         showSteps=\"half\"\n         {...props}\n      />\n   )\n}\n",
+      "path": "examples/slider-tick-marks-half.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Slider } from \"~/registry/miami/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderTickMarksHalf({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={ny(\"w-3/5\", className)}\n         showSteps=\"half\"\n         {...props}\n      />\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/slider-vertical.json b/apps/web/public/r/styles/miami/slider-vertical.json
index 01786f9b..baede00c 100644
--- a/apps/web/public/r/styles/miami/slider-vertical.json
+++ b/apps/web/public/r/styles/miami/slider-vertical.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider-vertical",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/slider-vertical.tsx",
-      "content": "import { Slider } from '~/registry/miami/ui/slider'\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderVertical({ className, ...props }: SliderProps) {\n   return (\n      <>\n         {/* Vertical slider needs its parent container to define the height */}\n         <div className=\"h-64\">\n            <Slider\n               defaultValue={[50]}\n               max={100}\n               step={1}\n               orientation=\"vertical\"\n               className={className}\n               {...props}\n            />\n         </div>\n      </>\n   )\n}\n",
+      "path": "examples/slider-vertical.tsx",
+      "content": "import { Slider } from \"~/registry/miami/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderVertical({ className, ...props }: SliderProps) {\n   return (\n      <>\n         {/* Vertical slider needs its parent container to define the height */}\n         <div className=\"h-64\">\n            <Slider\n               defaultValue={[50]}\n               max={100}\n               step={1}\n               orientation=\"vertical\"\n               className={className}\n               {...props}\n            />\n         </div>\n      </>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/slider.json b/apps/web/public/r/styles/miami/slider.json
index 14e17d88..97648dac 100644
--- a/apps/web/public/r/styles/miami/slider.json
+++ b/apps/web/public/r/styles/miami/slider.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "slider",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-slider"
   ],
   "files": [
     {
       "path": "ui/slider.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { ny } from '~/lib/utils'\n\ninterface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n   showSteps?: 'none' | 'half' | 'full'\n   formatLabel?: (value: number) => string\n   formatLabelSide?: string\n}\n\nconst Slider = React.forwardRef<\n   React.ElementRef<typeof SliderPrimitive.Root>,\n   SliderProps\n>(({ className, showSteps = 'none', formatLabel, formatLabelSide = 'top', ...props }, ref) => {\n   const { min = 0, max = 100, step = 1, orientation = 'horizontal', value, defaultValue, onValueChange } = props\n   const [hoveredThumbIndex, setHoveredThumbIndex] = React.useState<boolean>(false)\n   const numberOfSteps = Math.floor((max - min) / step)\n   const stepLines = Array.from({ length: numberOfSteps }, (_, index) => index * step + min)\n\n   const initialValue = Array.isArray(value) ? value : (Array.isArray(defaultValue) ? defaultValue : [min, max])\n   const [localValues, setLocalValues] = React.useState<number[]>(initialValue)\n\n   React.useEffect(() => {\n      if (!isEqual(value, localValues))\n         setLocalValues(Array.isArray(value) ? value : (Array.isArray(defaultValue) ? defaultValue : [min, max]))\n   }, [min, max, value])\n\n   const handleValueChange = (newValues: number[]) => {\n      setLocalValues(newValues)\n      if (onValueChange)\n         onValueChange(newValues)\n   }\n\n   function isEqual(array1: number[] | undefined, array2: number[] | undefined) {\n      array1 = array1 ?? []\n      array2 = array2 ?? []\n\n      if (array1.length !== array2.length)\n         return false\n\n      for (let i = 0; i < array1.length; i++) {\n         if (array1[i] !== array2[i])\n            return false\n      }\n\n      return true\n   }\n\n   return (\n      <SliderPrimitive.Root\n         ref={ref}\n         className={ny(\n            'relative flex cursor-pointer touch-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n            orientation === 'horizontal' ? 'w-full items-center' : 'h-full justify-center',\n            className,\n         )}\n         min={min}\n         max={max}\n         step={step}\n         value={localValues}\n         onValueChange={value => handleValueChange(value)}\n         {...props}\n         onFocus={() => setHoveredThumbIndex(true)}\n         onBlur={() => setHoveredThumbIndex(false)}\n      >\n         <SliderPrimitive.Track className={ny(\n            'bg-primary/20 relative grow overflow-hidden rounded-full',\n            orientation === 'horizontal' ? 'h-1.5 w-full' : 'h-full w-1.5',\n         )}\n         >\n            <SliderPrimitive.Range className={ny(\n               'bg-primary absolute',\n               orientation === 'horizontal' ? 'h-full' : 'w-full',\n            )}\n            />\n            {showSteps !== undefined && showSteps !== 'none' && stepLines.map((value, index) => {\n               if (value === min || value === max)\n                  return null\n\n               const positionPercentage = ((value - min) / (max - min)) * 100\n               const adjustedPosition = 50 + (positionPercentage - 50) * 0.96\n               return (\n                  <div\n                     key={index}\n                     className={ny(\n                        { 'w-0.5 h-2': orientation !== 'vertical', 'w-2 h-0.5': orientation === 'vertical' },\n                        'bg-muted-foreground absolute',\n                        {\n                           'left-1': orientation === 'vertical' && showSteps === 'half',\n                           'top-1': orientation !== 'vertical' && showSteps === 'half',\n                           'left-0': orientation === 'vertical' && showSteps === 'full',\n                           'top-0': orientation !== 'vertical' && showSteps === 'full',\n                           '-translate-x-1/2': orientation !== 'vertical',\n                           '-translate-y-1/2': orientation === 'vertical',\n                        },\n                     )}\n                     style={{\n                        [orientation === 'vertical' ? 'bottom' : 'left']: `${adjustedPosition}%`,\n                     }}\n                  />\n               )\n            })}\n\n         </SliderPrimitive.Track>\n         {localValues.map((numberStep, index) => (\n            <SliderPrimitive.Thumb\n               key={index}\n               className={ny(\n                  'border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1',\n               )}\n            >\n               {hoveredThumbIndex && formatLabel && (\n                  <div\n                     className={ny(\n                        { 'bottom-8 left-1/2 -translate-x-1/2': formatLabelSide === 'top' },\n                        { 'top-8 left-1/2 -translate-x-1/2': formatLabelSide === 'bottom' },\n                        { 'right-8 -translate-y-1/4': formatLabelSide === 'left' },\n                        { 'left-8 -translate-y-1/4': formatLabelSide === 'right' },\n                        'bg-popover text-popover-foreground absolute z-30 w-max items-center justify-items-center rounded-md border px-2 py-1 text-center shadow-sm',\n                     )}\n                  >\n                     {formatLabel(numberStep)}\n                  </div>\n               )}\n            </SliderPrimitive.Thumb>\n         ))}\n      </SliderPrimitive.Root>\n   )\n})\n\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ninterface SliderProps\n   extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n   showSteps?: \"none\" | \"half\" | \"full\"\n   formatLabel?: (value: number) => string\n   formatLabelSide?: string\n}\n\nconst Slider = React.forwardRef<\n   React.ElementRef<typeof SliderPrimitive.Root>,\n   SliderProps\n>(\n   (\n      {\n         className,\n         showSteps = \"none\",\n         formatLabel,\n         formatLabelSide = \"top\",\n         ...props\n      },\n      ref,\n   ) => {\n      const {\n         min = 0,\n         max = 100,\n         step = 1,\n         orientation = \"horizontal\",\n         value,\n         defaultValue,\n         onValueChange,\n      } = props\n      const [hoveredThumbIndex, setHoveredThumbIndex] =\n         React.useState<boolean>(false)\n      const numberOfSteps = Math.floor((max - min) / step)\n      const stepLines = Array.from(\n         { length: numberOfSteps },\n         (_, index) => index * step + min,\n      )\n\n      const initialValue = Array.isArray(value)\n         ? value\n         : Array.isArray(defaultValue)\n           ? defaultValue\n           : [min, max]\n      const [localValues, setLocalValues] =\n         React.useState<number[]>(initialValue)\n\n      React.useEffect(() => {\n         if (!isEqual(value, localValues))\n            setLocalValues(\n               Array.isArray(value)\n                  ? value\n                  : Array.isArray(defaultValue)\n                    ? defaultValue\n                    : [min, max],\n            )\n      }, [min, max, value])\n\n      const handleValueChange = (newValues: number[]) => {\n         setLocalValues(newValues)\n         if (onValueChange) onValueChange(newValues)\n      }\n\n      function isEqual(\n         array1: number[] | undefined,\n         array2: number[] | undefined,\n      ) {\n         array1 = array1 ?? []\n         array2 = array2 ?? []\n\n         if (array1.length !== array2.length) return false\n\n         for (let i = 0; i < array1.length; i++) {\n            if (array1[i] !== array2[i]) return false\n         }\n\n         return true\n      }\n\n      return (\n         <SliderPrimitive.Root\n            ref={ref}\n            className={ny(\n               \"relative flex cursor-pointer touch-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n               orientation === \"horizontal\"\n                  ? \"w-full items-center\"\n                  : \"h-full justify-center\",\n               className,\n            )}\n            min={min}\n            max={max}\n            step={step}\n            value={localValues}\n            onValueChange={(value) => handleValueChange(value)}\n            {...props}\n            onFocus={() => setHoveredThumbIndex(true)}\n            onBlur={() => setHoveredThumbIndex(false)}\n         >\n            <SliderPrimitive.Track\n               className={ny(\n                  \"bg-primary/20 relative grow overflow-hidden rounded-full\",\n                  orientation === \"horizontal\"\n                     ? \"h-1.5 w-full\"\n                     : \"h-full w-1.5\",\n               )}\n            >\n               <SliderPrimitive.Range\n                  className={ny(\n                     \"bg-primary absolute\",\n                     orientation === \"horizontal\" ? \"h-full\" : \"w-full\",\n                  )}\n               />\n               {showSteps !== undefined &&\n                  showSteps !== \"none\" &&\n                  stepLines.map((value, index) => {\n                     if (value === min || value === max) return null\n\n                     const positionPercentage =\n                        ((value - min) / (max - min)) * 100\n                     const adjustedPosition =\n                        50 + (positionPercentage - 50) * 0.96\n                     return (\n                        <div\n                           key={index}\n                           className={ny(\n                              {\n                                 \"w-0.5 h-2\": orientation !== \"vertical\",\n                                 \"w-2 h-0.5\": orientation === \"vertical\",\n                              },\n                              \"bg-muted-foreground absolute\",\n                              {\n                                 \"left-1\":\n                                    orientation === \"vertical\" &&\n                                    showSteps === \"half\",\n                                 \"top-1\":\n                                    orientation !== \"vertical\" &&\n                                    showSteps === \"half\",\n                                 \"left-0\":\n                                    orientation === \"vertical\" &&\n                                    showSteps === \"full\",\n                                 \"top-0\":\n                                    orientation !== \"vertical\" &&\n                                    showSteps === \"full\",\n                                 \"-translate-x-1/2\": orientation !== \"vertical\",\n                                 \"-translate-y-1/2\": orientation === \"vertical\",\n                              },\n                           )}\n                           style={{\n                              [orientation === \"vertical\" ? \"bottom\" : \"left\"]:\n                                 `${adjustedPosition}%`,\n                           }}\n                        />\n                     )\n                  })}\n            </SliderPrimitive.Track>\n            {localValues.map((numberStep, index) => (\n               <SliderPrimitive.Thumb\n                  key={index}\n                  className={ny(\n                     \"border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1\",\n                  )}\n               >\n                  {hoveredThumbIndex && formatLabel && (\n                     <div\n                        className={ny(\n                           {\n                              \"bottom-8 left-1/2 -translate-x-1/2\":\n                                 formatLabelSide === \"top\",\n                           },\n                           {\n                              \"top-8 left-1/2 -translate-x-1/2\":\n                                 formatLabelSide === \"bottom\",\n                           },\n                           {\n                              \"right-8 -translate-y-1/4\":\n                                 formatLabelSide === \"left\",\n                           },\n                           {\n                              \"left-8 -translate-y-1/4\":\n                                 formatLabelSide === \"right\",\n                           },\n                           \"bg-popover text-popover-foreground absolute z-30 w-max items-center justify-items-center rounded-md border px-2 py-1 text-center shadow-sm\",\n                        )}\n                     >\n                        {formatLabel(numberStep)}\n                     </div>\n                  )}\n               </SliderPrimitive.Thumb>\n            ))}\n         </SliderPrimitive.Root>\n      )\n   },\n)\n\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/sonner-demo.json b/apps/web/public/r/styles/miami/sonner-demo.json
index 3e57cac6..9096fd6d 100644
--- a/apps/web/public/r/styles/miami/sonner-demo.json
+++ b/apps/web/public/r/styles/miami/sonner-demo.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sonner-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "sonner"
   ],
   "files": [
     {
-      "path": "example/sonner-demo.tsx",
-      "content": "import { toast } from 'sonner'\n\nimport { Button } from '~/registry/miami/ui/button'\n\nexport default function SonnerDemo() {\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() =>\n            toast('Event has been created', {\n               description: 'Sunday, December 03, 2023 at 9:00 AM',\n               action: {\n                  label: 'Undo',\n\n                  // eslint-disable-next-line no-console\n                  onClick: () => console.log('Undo'),\n               },\n            })}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "path": "examples/sonner-demo.tsx",
+      "content": "import { toast } from \"sonner\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\n\nexport default function SonnerDemo() {\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() =>\n            toast(\"Event has been created\", {\n               description: \"Sunday, December 03, 2023 at 9:00 AM\",\n               action: {\n                  label: \"Undo\",\n\n                  // eslint-disable-next-line no-console\n                  onClick: () => console.log(\"Undo\"),\n               },\n            })\n         }\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/sonner.json b/apps/web/public/r/styles/miami/sonner.json
index dd0dd78e..e2a20b59 100644
--- a/apps/web/public/r/styles/miami/sonner.json
+++ b/apps/web/public/r/styles/miami/sonner.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sonner",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "sonner",
     "next-themes"
@@ -8,8 +10,8 @@
   "files": [
     {
       "path": "ui/sonner.tsx",
-      "content": "'use client'\n\nimport { useTheme } from 'next-themes'\nimport { Toaster as Sonner } from 'sonner'\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>\n\nfunction Toaster({ ...props }: ToasterProps) {\n   const { theme = 'system' } = useTheme()\n\n   return (\n      <Sonner\n         theme={theme as ToasterProps['theme']}\n         className=\"toaster group\"\n         toastOptions={{\n            classNames: {\n               toast:\n            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n               description: 'group-[.toast]:text-muted-foreground',\n               actionButton:\n            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n               cancelButton:\n            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n            },\n         }}\n         {...props}\n      />\n   )\n}\n\nexport { Toaster }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner } from \"sonner\"\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>\n\nfunction Toaster({ ...props }: ToasterProps) {\n   const { theme = \"system\" } = useTheme()\n\n   return (\n      <Sonner\n         theme={theme as ToasterProps[\"theme\"]}\n         className=\"toaster group\"\n         toastOptions={{\n            classNames: {\n               toast: \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n               description: \"group-[.toast]:text-muted-foreground\",\n               actionButton:\n                  \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n               cancelButton:\n                  \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n            },\n         }}\n         {...props}\n      />\n   )\n}\n\nexport { Toaster }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/sparkles-text-demo.json b/apps/web/public/r/styles/miami/sparkles-text-demo.json
index 13a98345..a4d7e173 100644
--- a/apps/web/public/r/styles/miami/sparkles-text-demo.json
+++ b/apps/web/public/r/styles/miami/sparkles-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sparkles-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/sparkles-text-demo.tsx",
-      "content": "import SparklesText from '~/registry/miami/ui/sparkles-text'\n\nexport default async function SparklesTextDemo() {\n   return <SparklesText text=\"Nyxb UI\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/sparkles-text-demo.tsx",
+      "content": "import SparklesText from \"~/registry/miami/ui/sparkles-text\"\n\nexport default async function SparklesTextDemo() {\n   return <SparklesText text=\"Nyxb UI\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/sparkles-text.json b/apps/web/public/r/styles/miami/sparkles-text.json
index cc3ea82e..06a43e8b 100644
--- a/apps/web/public/r/styles/miami/sparkles-text.json
+++ b/apps/web/public/r/styles/miami/sparkles-text.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "sparkles-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/sparkles-text.tsx",
-      "content": "'use client'\n\nimport { motion } from 'framer-motion'\nimport type { CSSProperties, ReactElement } from 'react'\nimport { useEffect, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface Sparkle {\n   id: string\n   x: string\n   y: string\n   color: string\n   delay: number\n   scale: number\n   lifespan: number\n}\n\ninterface SparklesTextProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the text\n    */\n   as?: ReactElement\n\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the text\n    */\n   className?: string\n\n   /**\n    * @required\n    * @type string\n    * @description\n    * The text to be displayed\n    */\n   text: string\n\n   /**\n    * @default 10\n    * @type number\n    * @description\n    * The count of sparkles\n    */\n   sparklesCount?: number\n\n   /**\n    * @default \"{first: '#A07CFE', second: '#FE8FB5'}\"\n    * @type string\n    * @description\n    * The colors of the sparkles\n    */\n   colors?: {\n      first: string\n      second: string\n   }\n}\n\nconst SparklesText: React.FC<SparklesTextProps> = ({\n   text,\n   colors = { first: '#A07CFE', second: '#FE8FB5' },\n   className,\n   sparklesCount = 10,\n   ...props\n}) => {\n   const [sparkles, setSparkles] = useState<Sparkle[]>([])\n\n   useEffect(() => {\n      const generateStar = (): Sparkle => {\n         const starX = `${Math.random() * 100}%`\n         const starY = `${Math.random() * 100}%`\n         const color = Math.random() > 0.5 ? colors.first : colors.second\n         const delay = Math.random() * 2\n         const scale = Math.random() * 1 + 0.3\n         const lifespan = Math.random() * 10 + 5\n         const id = `${starX}-${starY}-${Date.now()}`\n         return { id, x: starX, y: starY, color, delay, scale, lifespan }\n      }\n\n      const initializeStars = () => {\n         const newSparkles = Array.from({ length: sparklesCount }, generateStar)\n         setSparkles(newSparkles)\n      }\n\n      const updateStars = () => {\n         setSparkles(currentSparkles =>\n            currentSparkles.map((star) => {\n               if (star.lifespan <= 0)\n                  return generateStar()\n               else return { ...star, lifespan: star.lifespan - 0.1 }\n            }),\n         )\n      }\n\n      initializeStars()\n      const interval = setInterval(updateStars, 100)\n\n      return () => clearInterval(interval)\n   }, [colors.first, colors.second])\n\n   return (\n      <div\n         className={ny('text-6xl font-bold', className)}\n         {...props}\n         style={\n            {\n               '--sparkles-first-color': `${colors.first}`,\n               '--sparkles-second-color': `${colors.second}`,\n            } as CSSProperties\n         }\n      >\n         <span className=\"relative inline-block\">\n            {sparkles.map(sparkle => (\n               <Sparkle key={sparkle.id} {...sparkle} />\n            ))}\n            <strong className=\"bg-gradient-to-r from-[var(--sparkles-first-color)] to-[var(--sparkles-second-color)] bg-clip-text text-transparent\">\n               {text}\n            </strong>\n         </span>\n      </div>\n   )\n}\n\nconst Sparkle: React.FC<Sparkle> = ({ id, x, y, color, delay, scale }) => {\n   return (\n      <motion.svg\n         key={id}\n         className=\"pointer-events-none absolute z-20\"\n         initial={{ opacity: 0, left: x, top: y }}\n         animate={{\n            opacity: [0, 1, 0],\n            scale: [0, scale, 0],\n            rotate: [75, 120, 150],\n         }}\n         transition={{ duration: 0.8, repeat: Infinity, delay }}\n         width=\"21\"\n         height=\"21\"\n         viewBox=\"0 0 21 21\"\n      >\n         <path\n            d=\"M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z\"\n            fill={color}\n         />\n      </motion.svg>\n   )\n}\n\nexport default SparklesText\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport type { CSSProperties, ReactElement } from \"react\"\nimport { useEffect, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface Sparkle {\n   id: string\n   x: string\n   y: string\n   color: string\n   delay: number\n   scale: number\n   lifespan: number\n}\n\ninterface SparklesTextProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the text\n    */\n   as?: ReactElement\n\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the text\n    */\n   className?: string\n\n   /**\n    * @required\n    * @type string\n    * @description\n    * The text to be displayed\n    */\n   text: string\n\n   /**\n    * @default 10\n    * @type number\n    * @description\n    * The count of sparkles\n    */\n   sparklesCount?: number\n\n   /**\n    * @default \"{first: '#A07CFE', second: '#FE8FB5'}\"\n    * @type string\n    * @description\n    * The colors of the sparkles\n    */\n   colors?: {\n      first: string\n      second: string\n   }\n}\n\nconst SparklesText: React.FC<SparklesTextProps> = ({\n   text,\n   colors = { first: \"#A07CFE\", second: \"#FE8FB5\" },\n   className,\n   sparklesCount = 10,\n   ...props\n}) => {\n   const [sparkles, setSparkles] = useState<Sparkle[]>([])\n\n   useEffect(() => {\n      const generateStar = (): Sparkle => {\n         const starX = `${Math.random() * 100}%`\n         const starY = `${Math.random() * 100}%`\n         const color = Math.random() > 0.5 ? colors.first : colors.second\n         const delay = Math.random() * 2\n         const scale = Math.random() * 1 + 0.3\n         const lifespan = Math.random() * 10 + 5\n         const id = `${starX}-${starY}-${Date.now()}`\n         return { id, x: starX, y: starY, color, delay, scale, lifespan }\n      }\n\n      const initializeStars = () => {\n         const newSparkles = Array.from({ length: sparklesCount }, generateStar)\n         setSparkles(newSparkles)\n      }\n\n      const updateStars = () => {\n         setSparkles((currentSparkles) =>\n            currentSparkles.map((star) => {\n               if (star.lifespan <= 0) return generateStar()\n               else return { ...star, lifespan: star.lifespan - 0.1 }\n            }),\n         )\n      }\n\n      initializeStars()\n      const interval = setInterval(updateStars, 100)\n\n      return () => clearInterval(interval)\n   }, [colors.first, colors.second])\n\n   return (\n      <div\n         className={ny(\"text-6xl font-bold\", className)}\n         {...props}\n         style={\n            {\n               \"--sparkles-first-color\": `${colors.first}`,\n               \"--sparkles-second-color\": `${colors.second}`,\n            } as CSSProperties\n         }\n      >\n         <span className=\"relative inline-block\">\n            {sparkles.map((sparkle) => (\n               <Sparkle key={sparkle.id} {...sparkle} />\n            ))}\n            <strong className=\"bg-gradient-to-r from-[var(--sparkles-first-color)] to-[var(--sparkles-second-color)] bg-clip-text text-transparent\">\n               {text}\n            </strong>\n         </span>\n      </div>\n   )\n}\n\nconst Sparkle: React.FC<Sparkle> = ({ id, x, y, color, delay, scale }) => {\n   return (\n      <motion.svg\n         key={id}\n         className=\"pointer-events-none absolute z-20\"\n         initial={{ opacity: 0, left: x, top: y }}\n         animate={{\n            opacity: [0, 1, 0],\n            scale: [0, scale, 0],\n            rotate: [75, 120, 150],\n         }}\n         transition={{ duration: 0.8, repeat: Number.POSITIVE_INFINITY, delay }}\n         width=\"21\"\n         height=\"21\"\n         viewBox=\"0 0 21 21\"\n      >\n         <path\n            d=\"M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z\"\n            fill={color}\n         />\n      </motion.svg>\n   )\n}\n\nexport default SparklesText\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/star-rating-colored.json b/apps/web/public/r/styles/miami/star-rating-colored.json
index dae3b7fc..e523a706 100644
--- a/apps/web/public/r/styles/miami/star-rating-colored.json
+++ b/apps/web/public/r/styles/miami/star-rating-colored.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "star-rating-colored",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/star-rating-colored.tsx",
-      "content": "import * as React from 'react'\nimport { StarRating } from '~/registry/miami/ui/star-rating'\n\nexport default function StarRatingColored() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} iconProps={{ className: 'fill-yellow-500 stroke-yellow-500' }} />\n}\n",
-      "type": "registry:component",
+      "path": "examples/star-rating-colored.tsx",
+      "content": "import * as React from \"react\"\nimport { StarRating } from \"~/registry/miami/ui/star-rating\"\n\nexport default function StarRatingColored() {\n   const [value, setValue] = React.useState<number>(3)\n   return (\n      <StarRating\n         value={value}\n         setValue={setValue}\n         iconProps={{ className: \"fill-yellow-500 stroke-yellow-500\" }}\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/star-rating-demo.json b/apps/web/public/r/styles/miami/star-rating-demo.json
index 0796ba09..5ee043f3 100644
--- a/apps/web/public/r/styles/miami/star-rating-demo.json
+++ b/apps/web/public/r/styles/miami/star-rating-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "star-rating-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/star-rating-demo.tsx",
-      "content": "import * as React from 'react'\nimport { StarRating } from '~/registry/miami/ui/star-rating'\n\nexport default function StarRatingDemo() {\n   const [value, setValue] = React.useState<number>(3)\n   return (<StarRating value={value} setValue={setValue} />)\n}\n",
-      "type": "registry:component",
+      "path": "examples/star-rating-demo.tsx",
+      "content": "import * as React from \"react\"\nimport { StarRating } from \"~/registry/miami/ui/star-rating\"\n\nexport default function StarRatingDemo() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/star-rating-icon.json b/apps/web/public/r/styles/miami/star-rating-icon.json
index bc3aeae2..6df01545 100644
--- a/apps/web/public/r/styles/miami/star-rating-icon.json
+++ b/apps/web/public/r/styles/miami/star-rating-icon.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "star-rating-icon",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/star-rating-icon.tsx",
-      "content": "import * as React from 'react'\nimport { Heart } from 'lucide-react'\nimport { StarRating } from '~/registry/miami/ui/star-rating'\n\nexport default function StarRatingIcon() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} icon={Heart} />\n}\n",
-      "type": "registry:component",
+      "path": "examples/star-rating-icon.tsx",
+      "content": "import { Heart } from \"lucide-react\"\nimport * as React from \"react\"\nimport { StarRating } from \"~/registry/miami/ui/star-rating\"\n\nexport default function StarRatingIcon() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} icon={Heart} />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/star-rating.json b/apps/web/public/r/styles/miami/star-rating.json
index 9bd06632..d7d6191d 100644
--- a/apps/web/public/r/styles/miami/star-rating.json
+++ b/apps/web/public/r/styles/miami/star-rating.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "star-rating",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "lucide-react"
   ],
   "files": [
     {
       "path": "ui/star-rating.tsx",
-      "content": "import type { Dispatch, SetStateAction } from 'react'\nimport React from 'react'\nimport type { LucideIcon, LucideProps } from 'lucide-react'\nimport { StarIcon } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\n\ninterface StarWrapperProps {\n   value?: number\n   setValue?: Dispatch<SetStateAction<number>>\n   numStars?: number\n   icon?: LucideIcon\n   disabled?: boolean\n   wrapperProps?: React.HTMLAttributes<HTMLDivElement>\n   iconProps?: LucideProps\n   showcase?: boolean\n}\n\nfunction StarRating({\n   numStars = 5,\n   icon,\n   setValue,\n   value,\n   disabled,\n   showcase,\n   iconProps = {},\n   wrapperProps = {},\n}: StarWrapperProps) {\n   const { className: wrapperClassName, ...restWrapperProps } = wrapperProps\n   const { className: iconClassName, ...restIconProps } = iconProps\n   const IconComponent = icon\n\n   return (\n      <div className={ny('flex items-center gap-1', wrapperClassName)} {...restWrapperProps}>\n         {Array.from({ length: numStars }, (_, i) => {\n            const isRated = i < value!\n            const styledIconProps: LucideProps = {\n               onMouseEnter: () => !showcase && !disabled && setValue!(i + 1),\n               className: ny('fill-primary stroke-primary size-5', {\n                  'opacity-50 pointer-events-none': disabled,\n                  'transition-transform duration-300 hover:scale-110': !disabled && !showcase,\n                  '!fill-muted !stroke-muted': !isRated,\n               }, iconClassName),\n               ...restIconProps,\n            }\n            return (\n               <div key={i}>\n                  {IconComponent\n                     ? (\n                           <IconComponent {...styledIconProps} />\n                        )\n                     : (\n                           <StarIcon {...styledIconProps} />\n                        )}\n               </div>\n            )\n         })}\n      </div>\n   )\n}\n\nexport { StarRating }\n",
-      "type": "registry:component",
+      "content": "import type { LucideIcon, LucideProps } from \"lucide-react\"\nimport { StarIcon } from \"lucide-react\"\nimport type { Dispatch, SetStateAction } from \"react\"\nimport type React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ninterface StarWrapperProps {\n   value?: number\n   setValue?: Dispatch<SetStateAction<number>>\n   numStars?: number\n   icon?: LucideIcon\n   disabled?: boolean\n   wrapperProps?: React.HTMLAttributes<HTMLDivElement>\n   iconProps?: LucideProps\n   showcase?: boolean\n}\n\nfunction StarRating({\n   numStars = 5,\n   icon,\n   setValue,\n   value,\n   disabled,\n   showcase,\n   iconProps = {},\n   wrapperProps = {},\n}: StarWrapperProps) {\n   const { className: wrapperClassName, ...restWrapperProps } = wrapperProps\n   const { className: iconClassName, ...restIconProps } = iconProps\n   const IconComponent = icon\n\n   return (\n      <div\n         className={ny(\"flex items-center gap-1\", wrapperClassName)}\n         {...restWrapperProps}\n      >\n         {Array.from({ length: numStars }, (_, i) => {\n            const isRated = i < value!\n            const styledIconProps: LucideProps = {\n               onMouseEnter: () => !showcase && !disabled && setValue!(i + 1),\n               className: ny(\n                  \"fill-primary stroke-primary size-5\",\n                  {\n                     \"opacity-50 pointer-events-none\": disabled,\n                     \"transition-transform duration-300 hover:scale-110\":\n                        !disabled && !showcase,\n                     \"!fill-muted !stroke-muted\": !isRated,\n                  },\n                  iconClassName,\n               ),\n               ...restIconProps,\n            }\n            return (\n               <div key={i}>\n                  {IconComponent ? (\n                     <IconComponent {...styledIconProps} />\n                  ) : (\n                     <StarIcon {...styledIconProps} />\n                  )}\n               </div>\n            )\n         })}\n      </div>\n   )\n}\n\nexport { StarRating }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-clickable-steps.json b/apps/web/public/r/styles/miami/stepper-clickable-steps.json
index d2466b44..e4e330de 100644
--- a/apps/web/public/r/styles/miami/stepper-clickable-steps.json
+++ b/apps/web/public/r/styles/miami/stepper-clickable-steps.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-clickable-steps",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-clickable-steps.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/miami/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/miami/ui/stepper'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            initialStep={0}\n            steps={steps}\n            onClickStep={(step, setStep) => {\n               toast({\n                  title: 'Step clicked',\n                  description:\n              'This event is executed globally for all steps. If you want to have an event for a specific step, use the `onClickStep` prop of the independent step.',\n               })\n               setStep(step)\n            }}\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-clickable-steps.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport type { StepItem } from \"~/registry/miami/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            initialStep={0}\n            steps={steps}\n            onClickStep={(step, setStep) => {\n               toast({\n                  title: \"Step clicked\",\n                  description:\n                     \"This event is executed globally for all steps. If you want to have an event for a specific step, use the `onClickStep` prop of the independent step.\",\n               })\n               setStep(step)\n            }}\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-custom-icons.json b/apps/web/public/r/styles/miami/stepper-custom-icons.json
index b1344185..18cd14ce 100644
--- a/apps/web/public/r/styles/miami/stepper-custom-icons.json
+++ b/apps/web/public/r/styles/miami/stepper-custom-icons.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-custom-icons",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-custom-icons.tsx",
-      "content": "import { Building, Star, User } from 'lucide-react'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/miami/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/miami/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1', icon: User },\n   { label: 'Step 2', icon: Building },\n   { label: 'Step 3', icon: Star },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-custom-icons.tsx",
+      "content": "import { Building, Star, User } from \"lucide-react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport type { StepItem } from \"~/registry/miami/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\", icon: User },\n   { label: \"Step 2\", icon: Building },\n   { label: \"Step 3\", icon: Star },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-custom-styles.json b/apps/web/public/r/styles/miami/stepper-custom-styles.json
index da042be9..4474f408 100644
--- a/apps/web/public/r/styles/miami/stepper-custom-styles.json
+++ b/apps/web/public/r/styles/miami/stepper-custom-styles.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-custom-styles",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-custom-styles.tsx",
-      "content": "import { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/miami/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/miami/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            initialStep={0}\n            steps={steps}\n            styles={{\n               'step-button-container': ny(\n                  'rounded-none text-purple-700',\n                  'data-[current=true]:border-purple-500 data-[current=true]:bg-purple-50',\n                  'data-[active=true]:border-purple-500 data-[active=true]:bg-purple-500',\n               ),\n               'horizontal-step':\n            'data-[completed=true]:[&:not(:last-child)]:after:bg-purple-500',\n            }}\n            variables={{\n               '--step-icon-size': '60px',\n               '--step-gap': '20px',\n            }}\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-custom-styles.tsx",
+      "content": "import { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport type { StepItem } from \"~/registry/miami/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            initialStep={0}\n            steps={steps}\n            styles={{\n               \"step-button-container\": ny(\n                  \"rounded-none text-purple-700\",\n                  \"data-[current=true]:border-purple-500 data-[current=true]:bg-purple-50\",\n                  \"data-[active=true]:border-purple-500 data-[active=true]:bg-purple-500\",\n               ),\n               \"horizontal-step\":\n                  \"data-[completed=true]:[&:not(:last-child)]:after:bg-purple-500\",\n            }}\n            variables={{\n               \"--step-icon-size\": \"60px\",\n               \"--step-gap\": \"20px\",\n            }}\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-demo.json b/apps/web/public/r/styles/miami/stepper-demo.json
index 27db87bb..c50b5a62 100644
--- a/apps/web/public/r/styles/miami/stepper-demo.json
+++ b/apps/web/public/r/styles/miami/stepper-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-demo.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/miami/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/miami/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport type { StepItem } from \"~/registry/miami/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-description.json b/apps/web/public/r/styles/miami/stepper-description.json
index 1512a7aa..6de300ac 100644
--- a/apps/web/public/r/styles/miami/stepper-description.json
+++ b/apps/web/public/r/styles/miami/stepper-description.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-description",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-description.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/miami/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/miami/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1', description: 'Description 1' },\n   { label: 'Step 2', description: 'Description 2' },\n   { label: 'Step 3', description: 'Description 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-description.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport type { StepItem } from \"~/registry/miami/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\", description: \"Description 1\" },\n   { label: \"Step 2\", description: \"Description 2\" },\n   { label: \"Step 3\", description: \"Description 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-footer-inside.json b/apps/web/public/r/styles/miami/stepper-footer-inside.json
index aaa81b52..a3092a95 100644
--- a/apps/web/public/r/styles/miami/stepper-footer-inside.json
+++ b/apps/web/public/r/styles/miami/stepper-footer-inside.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-footer-inside",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-footer-inside.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/miami/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/miami/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper orientation=\"vertical\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                     <StepButtons />\n                  </Step>\n               )\n            })}\n            <FinalStep />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction StepButtons() {\n   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep }\n    = useStepper()\n   return (\n      <div className=\"mb-4 flex w-full gap-2\">\n         <Button\n            disabled={isDisabledStep}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"secondary\"\n         >\n            Prev\n         </Button>\n         <Button size=\"sm\" onClick={nextStep}>\n            {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n         </Button>\n      </div>\n   )\n}\n\nfunction FinalStep() {\n   const { hasCompletedAllSteps, resetSteps } = useStepper()\n\n   if (!hasCompletedAllSteps)\n      return null\n\n   return (\n      <>\n         <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n            <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n         </div>\n         <div className=\"flex w-full justify-end gap-2\">\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-footer-inside.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport type { StepItem } from \"~/registry/miami/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper orientation=\"vertical\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                     <StepButtons />\n                  </Step>\n               )\n            })}\n            <FinalStep />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction StepButtons() {\n   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =\n      useStepper()\n   return (\n      <div className=\"mb-4 flex w-full gap-2\">\n         <Button\n            disabled={isDisabledStep}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"secondary\"\n         >\n            Prev\n         </Button>\n         <Button size=\"sm\" onClick={nextStep}>\n            {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n         </Button>\n      </div>\n   )\n}\n\nfunction FinalStep() {\n   const { hasCompletedAllSteps, resetSteps } = useStepper()\n\n   if (!hasCompletedAllSteps) return null\n\n   return (\n      <>\n         <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n            <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n         </div>\n         <div className=\"flex w-full justify-end gap-2\">\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-form.json b/apps/web/public/r/styles/miami/stepper-form.json
index 2267fb06..bc4ec656 100644
--- a/apps/web/public/r/styles/miami/stepper-form.json
+++ b/apps/web/public/r/styles/miami/stepper-form.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport * as z from 'zod'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/miami/ui/form'\nimport { Input } from '~/registry/miami/ui/input'\nimport { Step, Stepper, useStepper } from '~/registry/miami/ui/stepper'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst steps = [\n   { label: 'Step 1', description: 'Description 1' },\n   { label: 'Step 2', description: 'Description 2' },\n]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper variant=\"circle-alt\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               if (index === 0) {\n                  return (\n                     <Step key={stepProps.label} {...stepProps}>\n                        <FirstStepForm />\n                     </Step>\n                  )\n               }\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <SecondStepForm />\n                  </Step>\n               )\n            })}\n            <MyStepperFooter />\n         </Stepper>\n      </div>\n   )\n}\n\nconst FirstFormSchema = z.object({\n   username: z.string().min(2, {\n      message: 'Username must be at least 2 characters.',\n   }),\n})\n\nfunction FirstStepForm() {\n   const { nextStep } = useStepper()\n\n   const form = useForm<z.infer<typeof FirstFormSchema>>({\n      resolver: zodResolver(FirstFormSchema),\n      defaultValues: {\n         username: '',\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FirstFormSchema>) {\n      nextStep()\n      toast({\n         title: 'First step submitted!',\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"username\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Username</FormLabel>\n                     <FormControl>\n                        <Input placeholder=\"nyxb\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your public display name.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <StepperFormActions />\n         </form>\n      </Form>\n   )\n}\n\nconst SecondFormSchema = z.object({\n   password: z.string().min(8, {\n      message: 'Password must be at least 8 characters.',\n   }),\n})\n\nfunction SecondStepForm() {\n   const { nextStep } = useStepper()\n\n   const form = useForm<z.infer<typeof SecondFormSchema>>({\n      resolver: zodResolver(SecondFormSchema),\n      defaultValues: {\n         password: '',\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof SecondFormSchema>) {\n      nextStep()\n      toast({\n         title: 'Second step submitted!',\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"password\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Password</FormLabel>\n                     <FormControl>\n                        <Input type=\"password\" {...field} />\n                     </FormControl>\n                     <FormDescription>This is your private password.</FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <StepperFormActions />\n         </form>\n      </Form>\n   )\n}\n\nfunction StepperFormActions() {\n   const {\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n\n   return (\n      <div className=\"flex w-full justify-end gap-2\">\n         {hasCompletedAllSteps\n            ? (\n                  <Button size=\"sm\" onClick={resetSteps}>\n                     Reset\n                  </Button>\n               )\n            : (\n                  <>\n                     <Button\n                        disabled={isDisabledStep}\n                        onClick={prevStep}\n                        size=\"sm\"\n                        variant=\"secondary\"\n                     >\n                        Prev\n                     </Button>\n                     <Button size=\"sm\">\n                        {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                     </Button>\n                  </>\n               )}\n      </div>\n   )\n}\n\nfunction MyStepperFooter() {\n   const { activeStep, resetSteps, steps } = useStepper()\n\n   if (activeStep !== steps.length)\n      return null\n\n   return (\n      <div className=\"flex items-center justify-end gap-2\">\n         <Button onClick={resetSteps}>Reset Stepper with Form</Button>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport * as z from \"zod\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/miami/ui/form\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst steps = [\n   { label: \"Step 1\", description: \"Description 1\" },\n   { label: \"Step 2\", description: \"Description 2\" },\n]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper variant=\"circle-alt\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               if (index === 0) {\n                  return (\n                     <Step key={stepProps.label} {...stepProps}>\n                        <FirstStepForm />\n                     </Step>\n                  )\n               }\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <SecondStepForm />\n                  </Step>\n               )\n            })}\n            <MyStepperFooter />\n         </Stepper>\n      </div>\n   )\n}\n\nconst FirstFormSchema = z.object({\n   username: z.string().min(2, {\n      message: \"Username must be at least 2 characters.\",\n   }),\n})\n\nfunction FirstStepForm() {\n   const { nextStep } = useStepper()\n\n   const form = useForm<z.infer<typeof FirstFormSchema>>({\n      resolver: zodResolver(FirstFormSchema),\n      defaultValues: {\n         username: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FirstFormSchema>) {\n      nextStep()\n      toast({\n         title: \"First step submitted!\",\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"username\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Username</FormLabel>\n                     <FormControl>\n                        <Input placeholder=\"nyxb\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your public display name.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <StepperFormActions />\n         </form>\n      </Form>\n   )\n}\n\nconst SecondFormSchema = z.object({\n   password: z.string().min(8, {\n      message: \"Password must be at least 8 characters.\",\n   }),\n})\n\nfunction SecondStepForm() {\n   const { nextStep } = useStepper()\n\n   const form = useForm<z.infer<typeof SecondFormSchema>>({\n      resolver: zodResolver(SecondFormSchema),\n      defaultValues: {\n         password: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof SecondFormSchema>) {\n      nextStep()\n      toast({\n         title: \"Second step submitted!\",\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"password\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Password</FormLabel>\n                     <FormControl>\n                        <Input type=\"password\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your private password.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <StepperFormActions />\n         </form>\n      </Form>\n   )\n}\n\nfunction StepperFormActions() {\n   const {\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n\n   return (\n      <div className=\"flex w-full justify-end gap-2\">\n         {hasCompletedAllSteps ? (\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         ) : (\n            <>\n               <Button\n                  disabled={isDisabledStep}\n                  onClick={prevStep}\n                  size=\"sm\"\n                  variant=\"secondary\"\n               >\n                  Prev\n               </Button>\n               <Button size=\"sm\">\n                  {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n               </Button>\n            </>\n         )}\n      </div>\n   )\n}\n\nfunction MyStepperFooter() {\n   const { activeStep, resetSteps, steps } = useStepper()\n\n   if (activeStep !== steps.length) return null\n\n   return (\n      <div className=\"flex items-center justify-end gap-2\">\n         <Button onClick={resetSteps}>Reset Stepper with Form</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-optional-steps.json b/apps/web/public/r/styles/miami/stepper-optional-steps.json
index b56fda0f..ac0357b4 100644
--- a/apps/web/public/r/styles/miami/stepper-optional-steps.json
+++ b/apps/web/public/r/styles/miami/stepper-optional-steps.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-optional-steps",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-optional-steps.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/miami/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/miami/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2', optional: true },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-optional-steps.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport type { StepItem } from \"~/registry/miami/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\", optional: true },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-orientation.json b/apps/web/public/r/styles/miami/stepper-orientation.json
index 176a63c4..a25a8b14 100644
--- a/apps/web/public/r/styles/miami/stepper-orientation.json
+++ b/apps/web/public/r/styles/miami/stepper-orientation.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-orientation",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-orientation.tsx",
-      "content": "import * as React from 'react'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport { Label } from '~/registry/miami/ui/label'\nimport { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'\nimport type {\n   StepItem,\n   StepperProps,\n} from '~/registry/miami/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/miami/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [orientation, setOrientation]\n    = React.useState<StepperProps['orientation']>('vertical')\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={orientation}\n            onValueChange={value =>\n               setOrientation(value as StepperProps['orientation'])}\n         >\n            <Label\n               htmlFor=\"horizontal\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"horizontal\"\n                  id=\"horizontal\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">Horizontal</h2>\n            </Label>\n            <Label\n               htmlFor=\"vertical\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"vertical\" id=\"vertical\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">Vertical</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper orientation={orientation} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Label } from \"~/registry/miami/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"~/registry/miami/ui/radio-group\"\nimport type { StepItem, StepperProps } from \"~/registry/miami/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [orientation, setOrientation] =\n      React.useState<StepperProps[\"orientation\"]>(\"vertical\")\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={orientation}\n            onValueChange={(value) =>\n               setOrientation(value as StepperProps[\"orientation\"])\n            }\n         >\n            <Label\n               htmlFor=\"horizontal\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"horizontal\"\n                  id=\"horizontal\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">Horizontal</h2>\n            </Label>\n            <Label\n               htmlFor=\"vertical\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"vertical\"\n                  id=\"vertical\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">Vertical</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper orientation={orientation} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-scroll-tracking.json b/apps/web/public/r/styles/miami/stepper-scroll-tracking.json
index 18297223..61af3168 100644
--- a/apps/web/public/r/styles/miami/stepper-scroll-tracking.json
+++ b/apps/web/public/r/styles/miami/stepper-scroll-tracking.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-scroll-tracking",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-scroll-tracking.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/miami/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/miami/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n   { label: 'Step 4' },\n   { label: 'Step 5' },\n   { label: 'Step 6' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            orientation=\"vertical\"\n            initialStep={0}\n            steps={steps}\n            scrollTracking\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                     <StepButtons />\n                  </Step>\n               )\n            })}\n            <FinalStep />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction StepButtons() {\n   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep }\n    = useStepper()\n   return (\n      <div className=\"mb-4 flex w-full gap-2\">\n         <Button\n            disabled={isDisabledStep}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"secondary\"\n         >\n            Prev\n         </Button>\n         <Button size=\"sm\" onClick={nextStep}>\n            {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n         </Button>\n      </div>\n   )\n}\n\nfunction FinalStep() {\n   const { hasCompletedAllSteps, resetSteps } = useStepper()\n\n   if (!hasCompletedAllSteps)\n      return null\n\n   return (\n      <>\n         <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n            <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n         </div>\n         <div className=\"flex w-full justify-end gap-2\">\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-scroll-tracking.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport type { StepItem } from \"~/registry/miami/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n   { label: \"Step 4\" },\n   { label: \"Step 5\" },\n   { label: \"Step 6\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            orientation=\"vertical\"\n            initialStep={0}\n            steps={steps}\n            scrollTracking\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                     <StepButtons />\n                  </Step>\n               )\n            })}\n            <FinalStep />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction StepButtons() {\n   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =\n      useStepper()\n   return (\n      <div className=\"mb-4 flex w-full gap-2\">\n         <Button\n            disabled={isDisabledStep}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"secondary\"\n         >\n            Prev\n         </Button>\n         <Button size=\"sm\" onClick={nextStep}>\n            {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n         </Button>\n      </div>\n   )\n}\n\nfunction FinalStep() {\n   const { hasCompletedAllSteps, resetSteps } = useStepper()\n\n   if (!hasCompletedAllSteps) return null\n\n   return (\n      <>\n         <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n            <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n         </div>\n         <div className=\"flex w-full justify-end gap-2\">\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-sizes.json b/apps/web/public/r/styles/miami/stepper-sizes.json
index a1f4f0bb..49465ea1 100644
--- a/apps/web/public/r/styles/miami/stepper-sizes.json
+++ b/apps/web/public/r/styles/miami/stepper-sizes.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-sizes",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-sizes.tsx",
-      "content": "import * as React from 'react'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport { Label } from '~/registry/miami/ui/label'\nimport { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'\nimport type {\n   StepItem,\n   StepperProps,\n} from '~/registry/miami/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/miami/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [size, setSize] = React.useState<StepperProps['size']>('md')\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={size}\n            onValueChange={value => setSize(value as StepperProps['size'])}\n         >\n            <Label\n               htmlFor=\"sm\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"sm\" id=\"sm\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">sm</h2>\n            </Label>\n            <Label\n               htmlFor=\"md\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"md\" id=\"md\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">md</h2>\n            </Label>\n            <Label\n               htmlFor=\"lg\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"lg\" id=\"lg\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">lg</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper size={size} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-sizes.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Label } from \"~/registry/miami/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"~/registry/miami/ui/radio-group\"\nimport type { StepItem, StepperProps } from \"~/registry/miami/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [size, setSize] = React.useState<StepperProps[\"size\"]>(\"md\")\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={size}\n            onValueChange={(value) => setSize(value as StepperProps[\"size\"])}\n         >\n            <Label\n               htmlFor=\"sm\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"sm\" id=\"sm\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">sm</h2>\n            </Label>\n            <Label\n               htmlFor=\"md\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"md\" id=\"md\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">md</h2>\n            </Label>\n            <Label\n               htmlFor=\"lg\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"lg\" id=\"lg\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">lg</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper size={size} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-state.json b/apps/web/public/r/styles/miami/stepper-state.json
index abe9bbb4..cf299ea2 100644
--- a/apps/web/public/r/styles/miami/stepper-state.json
+++ b/apps/web/public/r/styles/miami/stepper-state.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-state",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-state.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport type {\n   StepItem,\n} from '~/registry/miami/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/miami/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper state=\"error\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isError,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button disabled={isError} size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-state.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport type { StepItem } from \"~/registry/miami/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper state=\"error\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isError,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button disabled={isError} size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper-variants.json b/apps/web/public/r/styles/miami/stepper-variants.json
index d5ff4962..494afe3e 100644
--- a/apps/web/public/r/styles/miami/stepper-variants.json
+++ b/apps/web/public/r/styles/miami/stepper-variants.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper-variants",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "stepper"
   ],
   "files": [
     {
-      "path": "example/stepper-variants.tsx",
-      "content": "import * as React from 'react'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport { Label } from '~/registry/miami/ui/label'\nimport { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'\nimport type {\n\n   StepItem,\n   StepperProps,\n} from '~/registry/miami/ui/stepper'\nimport {\n   Step,\n   Stepper,\n   useStepper,\n} from '~/registry/miami/ui/stepper'\n\nconst steps = [\n   { label: 'Step 1' },\n   { label: 'Step 2' },\n   { label: 'Step 3' },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [variant, setVariant]\n    = React.useState<StepperProps['variant']>('circle')\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={variant}\n            onValueChange={value => setVariant(value as StepperProps['variant'])}\n         >\n            <Label\n               htmlFor=\"circle\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"circle\" id=\"circle\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">circle</h2>\n            </Label>\n            <Label\n               htmlFor=\"circle-alt\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"circle-alt\"\n                  id=\"circle-alt\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">circle-alt</h2>\n            </Label>\n            <Label\n               htmlFor=\"line\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"line\" id=\"line\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">line</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper variant={variant} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps\n               ? (\n                     <Button size=\"sm\" onClick={resetSteps}>\n                        Reset\n                     </Button>\n                  )\n               : (\n                     <>\n                        <Button\n                           disabled={isDisabledStep}\n                           onClick={prevStep}\n                           size=\"sm\"\n                           variant=\"secondary\"\n                        >\n                           Prev\n                        </Button>\n                        <Button size=\"sm\" onClick={nextStep}>\n                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}\n                        </Button>\n                     </>\n                  )}\n         </div>\n      </>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/stepper-variants.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { Label } from \"~/registry/miami/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"~/registry/miami/ui/radio-group\"\nimport type { StepItem, StepperProps } from \"~/registry/miami/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"~/registry/miami/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [variant, setVariant] =\n      React.useState<StepperProps[\"variant\"]>(\"circle\")\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={variant}\n            onValueChange={(value) =>\n               setVariant(value as StepperProps[\"variant\"])\n            }\n         >\n            <Label\n               htmlFor=\"circle\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"circle\" id=\"circle\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">circle</h2>\n            </Label>\n            <Label\n               htmlFor=\"circle-alt\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"circle-alt\"\n                  id=\"circle-alt\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">circle-alt</h2>\n            </Label>\n            <Label\n               htmlFor=\"line\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"line\" id=\"line\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">line</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper variant={variant} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/stepper.json b/apps/web/public/r/styles/miami/stepper.json
index d5a41fe4..5c658343 100644
--- a/apps/web/public/r/styles/miami/stepper.json
+++ b/apps/web/public/r/styles/miami/stepper.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "stepper",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "lucide-react"
   ],
@@ -10,8 +12,8 @@
   "files": [
     {
       "path": "ui/stepper.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { CheckIcon, Loader2, X } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Collapsible,\n   CollapsibleContent,\n} from '~/registry/miami/ui/collapsible'\n\n// <---------- CONTEXT ---------->\n\ninterface StepperContextValue extends StepperProps {\n   clickable?: boolean\n   isError?: boolean\n   isLoading?: boolean\n   isVertical?: boolean\n   stepCount?: number\n   expandVerticalSteps?: boolean\n   activeStep: number\n   initialStep: number\n}\n\nconst StepperContext = React.createContext<\n   StepperContextValue & {\n      nextStep: () => void\n      prevStep: () => void\n      resetSteps: () => void\n      setStep: (step: number) => void\n   }\n>({\n            steps: [],\n            activeStep: 0,\n            initialStep: 0,\n            nextStep: () => {},\n            prevStep: () => {},\n            resetSteps: () => {},\n            setStep: () => {},\n         })\n\ninterface StepperContextProviderProps {\n   value: Omit<StepperContextValue, 'activeStep'>\n   children: React.ReactNode\n}\n\nfunction StepperProvider({ value, children }: StepperContextProviderProps) {\n   const isError = value.state === 'error'\n   const isLoading = value.state === 'loading'\n\n   const [activeStep, setActiveStep] = React.useState(value.initialStep)\n\n   const nextStep = () => {\n      setActiveStep(prev => prev + 1)\n   }\n\n   const prevStep = () => {\n      setActiveStep(prev => prev - 1)\n   }\n\n   const resetSteps = () => {\n      setActiveStep(value.initialStep)\n   }\n\n   const setStep = (step: number) => {\n      setActiveStep(step)\n   }\n\n   return (\n      <StepperContext.Provider\n         value={{\n            ...value,\n            isError,\n            isLoading,\n            activeStep,\n            nextStep,\n            prevStep,\n            resetSteps,\n            setStep,\n         }}\n      >\n         {children}\n      </StepperContext.Provider>\n   )\n}\n\n// <---------- HOOKS ---------->\n\nfunction usePrevious<T>(value: T): T | undefined {\n   const ref = React.useRef<T>()\n\n   React.useEffect(() => {\n      ref.current = value\n   }, [value])\n\n   return ref.current\n}\n\nfunction useStepper() {\n   const context = React.useContext(StepperContext)\n\n   if (context === undefined)\n      throw new Error('useStepper must be used within a StepperProvider')\n\n   const { children, className, ...rest } = context\n\n   const isLastStep = context.activeStep === context.steps.length - 1\n   const hasCompletedAllSteps = context.activeStep === context.steps.length\n\n   const previousActiveStep = usePrevious(context.activeStep)\n\n   const currentStep = context.steps[context.activeStep]\n   const isOptionalStep = !!currentStep?.optional\n\n   const isDisabledStep = context.activeStep === 0\n\n   return {\n      ...rest,\n      isLastStep,\n      hasCompletedAllSteps,\n      isOptionalStep,\n      isDisabledStep,\n      currentStep,\n      previousActiveStep,\n   }\n}\n\nfunction useMediaQuery(query: string) {\n   const [value, setValue] = React.useState(false)\n\n   React.useEffect(() => {\n      function onChange(event: MediaQueryListEvent) {\n         setValue(event.matches)\n      }\n\n      const result = matchMedia(query)\n      result.addEventListener('change', onChange)\n      setValue(result.matches)\n\n      return () => result.removeEventListener('change', onChange)\n   }, [query])\n\n   return value\n}\n\n// <---------- STEPS ---------->\n\ninterface StepItem {\n   id?: string\n   label?: string\n   description?: string\n   icon?: IconType\n   optional?: boolean\n}\n\ninterface StepOptions {\n   orientation?: 'vertical' | 'horizontal'\n   state?: 'loading' | 'error'\n   responsive?: boolean\n   checkIcon?: IconType\n   errorIcon?: IconType\n   onClickStep?: (step: number, setStep: (step: number) => void) => void\n   mobileBreakpoint?: string\n   variant?: 'circle' | 'circle-alt' | 'line'\n   expandVerticalSteps?: boolean\n   size?: 'sm' | 'md' | 'lg'\n   styles?: {\n      /** Styles for the main container */\n      'main-container'?: string\n      /** Styles for the horizontal step */\n      'horizontal-step'?: string\n      /** Styles for the horizontal step container (button and labels) */\n      'horizontal-step-container'?: string\n      /** Styles for the vertical step */\n      'vertical-step'?: string\n      /** Styles for the vertical step container (button and labels) */\n      'vertical-step-container'?: string\n      /** Styles for the vertical step content */\n      'vertical-step-content'?: string\n      /** Styles for the step button container */\n      'step-button-container'?: string\n      /** Styles for the label and description container */\n      'step-label-container'?: string\n      /** Styles for the step label */\n      'step-label'?: string\n      /** Styles for the step description */\n      'step-description'?: string\n   }\n   variables?: {\n      '--step-icon-size'?: string\n      '--step-gap'?: string\n   }\n   scrollTracking?: boolean\n}\ninterface StepperProps extends StepOptions {\n   children?: React.ReactNode\n   className?: string\n   initialStep: number\n   steps: StepItem[]\n}\n\nconst VARIABLE_SIZES = {\n   sm: '32px',\n   md: '36px',\n   lg: '40px',\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n   (props, ref: React.Ref<HTMLDivElement>) => {\n      const {\n         className,\n         children,\n         orientation: orientationProp,\n         state,\n         responsive,\n         checkIcon,\n         errorIcon,\n         onClickStep,\n         mobileBreakpoint,\n         expandVerticalSteps = false,\n         initialStep = 0,\n         size,\n         steps,\n         variant,\n         styles,\n         variables,\n         scrollTracking = false,\n         ...rest\n      } = props\n\n      const childArr = React.Children.toArray(children)\n\n      const items = [] as React.ReactElement[]\n\n      const footer = childArr.map((child, _index) => {\n         if (!React.isValidElement(child))\n            throw new Error('Stepper children must be valid React elements.')\n\n         if (child.type === Step) {\n            items.push(child)\n            return null\n         }\n\n         return child\n      })\n\n      const stepCount = items.length\n\n      const isMobile = useMediaQuery(\n      `(max-width: ${mobileBreakpoint || '768px'})`,\n      )\n\n      const clickable = !!onClickStep\n\n      const orientation = isMobile && responsive ? 'vertical' : orientationProp\n\n      const isVertical = orientation === 'vertical'\n\n      return (\n         <StepperProvider\n            value={{\n               initialStep,\n               orientation,\n               state,\n               size,\n               responsive,\n               checkIcon,\n               errorIcon,\n               onClickStep,\n               clickable,\n               stepCount,\n               isVertical,\n               variant: variant || 'circle',\n               expandVerticalSteps,\n               steps,\n               scrollTracking,\n               styles,\n            }}\n         >\n            <div\n               ref={ref}\n               className={ny(\n                  'stepper__main-container',\n                  'flex w-full flex-wrap',\n                  stepCount === 1 ? 'justify-end' : 'justify-between',\n                  orientation === 'vertical' ? 'flex-col' : 'flex-row',\n                  variant === 'line' && orientation === 'horizontal' && 'gap-4',\n                  className,\n                  styles?.['main-container'],\n               )}\n               style={\n                  {\n                     '--step-icon-size':\n                variables?.['--step-icon-size']\n                || `${VARIABLE_SIZES[size || 'md']}`,\n                     '--step-gap': variables?.['--step-gap'] || '8px',\n                  } as React.CSSProperties\n               }\n               {...rest}\n            >\n               <VerticalContent>{items}</VerticalContent>\n            </div>\n            {orientation === 'horizontal' && (\n               <HorizontalContent>{items}</HorizontalContent>\n            )}\n            {footer}\n         </StepperProvider>\n      )\n   },\n)\n\nStepper.defaultProps = {\n   size: 'md',\n   orientation: 'horizontal',\n   responsive: true,\n}\n\nfunction VerticalContent({ children }: { children: React.ReactNode }) {\n   const { activeStep } = useStepper()\n\n   const childArr = React.Children.toArray(children)\n   const stepCount = childArr.length\n\n   return (\n      <>\n         {React.Children.map(children, (child, i) => {\n            const isCompletedStep\n          = (React.isValidElement(child)\n          && (child.props as any).isCompletedStep)\n          ?? i < activeStep\n            const isLastStep = i === stepCount - 1\n            const isCurrentStep = i === activeStep\n\n            const stepProps = {\n               index: i,\n               isCompletedStep,\n               isCurrentStep,\n               isLastStep,\n            }\n\n            if (React.isValidElement(child))\n               return React.cloneElement(child, stepProps)\n\n            return null\n         })}\n      </>\n   )\n}\n\nfunction HorizontalContent({ children }: { children: React.ReactNode }) {\n   const { activeStep } = useStepper()\n   const childArr = React.Children.toArray(children)\n\n   if (activeStep > childArr.length)\n      return null\n\n   return (\n      <>\n         {React.Children.map(childArr[activeStep], (node) => {\n            if (!React.isValidElement(node))\n               return null\n\n            return React.Children.map(node.props.children, childNode => childNode)\n         })}\n      </>\n   )\n}\n\n// <---------- STEP ---------->\n\ninterface StepProps extends React.HTMLAttributes<HTMLLIElement> {\n   label?: string | React.ReactNode\n   description?: string\n   icon?: IconType\n   state?: 'loading' | 'error'\n   checkIcon?: IconType\n   errorIcon?: IconType\n   isCompletedStep?: boolean\n   isKeepError?: boolean\n   onClickStep?: (step: number, setStep: (step: number) => void) => void\n}\n\ninterface StepSharedProps extends StepProps {\n   isLastStep?: boolean\n   isCurrentStep?: boolean\n   index?: number\n   hasVisited: boolean | undefined\n   isError?: boolean\n   isLoading?: boolean\n}\n\n// Props which shouldn't be passed to to the Step component from the user\ninterface StepInternalConfig {\n   index: number\n   isCompletedStep?: boolean\n   isCurrentStep?: boolean\n   isLastStep?: boolean\n}\n\ninterface FullStepProps extends StepProps, StepInternalConfig {}\n\nconst Step = React.forwardRef<HTMLLIElement, StepProps>(\n   (props, ref: React.Ref<any>) => {\n      const {\n         children,\n         description,\n         icon,\n         state,\n         checkIcon,\n         errorIcon,\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         isLastStep,\n         isKeepError,\n         label,\n         onClickStep,\n      } = props as FullStepProps\n\n      const { isVertical, isError, isLoading, clickable } = useStepper()\n\n      const hasVisited = isCurrentStep || isCompletedStep\n\n      const sharedProps = {\n         isLastStep,\n         isCompletedStep,\n         isCurrentStep,\n         index,\n         isError,\n         isLoading,\n         clickable,\n         label,\n         description,\n         hasVisited,\n         icon,\n         isKeepError,\n         checkIcon,\n         state,\n         errorIcon,\n         onClickStep,\n      }\n\n      const renderStep = () => {\n         switch (isVertical) {\n            case true:\n               return (\n                  <VerticalStep ref={ref} {...sharedProps}>\n                     {children}\n                  </VerticalStep>\n               )\n            default:\n               return <HorizontalStep ref={ref} {...sharedProps} />\n         }\n      }\n\n      return renderStep()\n   },\n)\n\n// <---------- VERTICAL STEP ---------->\n\ntype VerticalStepProps = StepSharedProps & {\n   children?: React.ReactNode\n}\n\nconst verticalStepVariants = cva(\n   [\n      'flex flex-col relative transition-all duration-200',\n      'data-[completed=true]:[&:not(:last-child)]:after:bg-primary',\n      'data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive',\n   ],\n   {\n      variants: {\n         variant: {\n            circle: ny(\n               '[&:not(:last-child)]:gap-[var(--step-gap)] [&:not(:last-child)]:pb-[var(--step-gap)]',\n               '[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:w-[2px] [&:not(:last-child)]:after:content-[\\'\\']',\n               '[&:not(:last-child)]:after:inset-x-[calc(var(--step-icon-size)/2)]',\n               '[&:not(:last-child)]:after:absolute',\n               '[&:not(:last-child)]:after:top-[calc(var(--step-icon-size)+var(--step-gap))]',\n               '[&:not(:last-child)]:after:bottom-[var(--step-gap)]',\n               '[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200',\n            ),\n            line: 'flex-1 border-t-0 mb-4',\n         },\n      },\n   },\n)\n\nconst VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(\n   (props, ref) => {\n      const {\n         children,\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         label,\n         description,\n         icon,\n         hasVisited,\n         state,\n         checkIcon: checkIconProp,\n         errorIcon: errorIconProp,\n         onClickStep,\n      } = props\n\n      const {\n         checkIcon: checkIconContext,\n         errorIcon: errorIconContext,\n         isError,\n         isLoading,\n         variant,\n         onClickStep: onClickStepGeneral,\n         clickable,\n         expandVerticalSteps,\n         styles,\n         scrollTracking,\n         orientation,\n         steps,\n         setStep,\n         isLastStep: isLastStepCurrentStep,\n         previousActiveStep,\n      } = useStepper()\n\n      const opacity = hasVisited ? 1 : 0.8\n      const localIsLoading = isLoading || state === 'loading'\n      const localIsError = isError || state === 'error'\n\n      const isLastStep = index === steps.length - 1\n\n      const active\n      = variant === 'line' ? isCompletedStep || isCurrentStep : isCompletedStep\n      const checkIcon = checkIconProp || checkIconContext\n      const errorIcon = errorIconProp || errorIconContext\n\n      const renderChildren = () => {\n         if (!expandVerticalSteps) {\n            return (\n               <Collapsible open={isCurrentStep}>\n                  <CollapsibleContent\n                     ref={(node) => {\n                        if (\n                        // If the step is the first step and the previous step\n                        // was the last step or if the step is not the first step\n                        // This prevents initial scrolling when the stepper\n                        // is located anywhere other than the top of the view.\n                           scrollTracking\n                           && ((index === 0\n                           && previousActiveStep\n                           && previousActiveStep === steps.length)\n                           || (index && index > 0))\n                        ) {\n                           node?.scrollIntoView({\n                              behavior: 'smooth',\n                              block: 'center',\n                           })\n                        }\n                     }}\n                     className=\"data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden\"\n                  >\n                     {children}\n                  </CollapsibleContent>\n               </Collapsible>\n            )\n         }\n         return children\n      }\n\n      return (\n         <div\n            ref={ref}\n            className={ny(\n               'stepper__vertical-step',\n               verticalStepVariants({\n                  variant: variant?.includes('circle') ? 'circle' : 'line',\n               }),\n               isLastStepCurrentStep && 'gap-[var(--step-gap)]',\n               styles?.['vertical-step'],\n            )}\n            data-optional={steps[index || 0]?.optional}\n            data-completed={isCompletedStep}\n            data-active={active}\n            data-clickable={clickable || !!onClickStep}\n            data-invalid={localIsError}\n            onClick={() => {\n               if (onClickStep)\n                  onClickStep(index || 0, setStep)\n               else\n                  onClickStepGeneral?.(index || 0, setStep)\n            }}\n         >\n            <div\n               data-vertical\n               data-active={active}\n               className={ny(\n                  'stepper__vertical-step-container',\n                  'flex items-center',\n                  variant === 'line'\n                  && 'data-[active=true]:border-primary border-s-[3px] py-2 ps-3',\n                  styles?.['vertical-step-container'],\n               )}\n            >\n               <StepButtonContainer\n                  {...{ isLoading: localIsLoading, isError: localIsError, ...props }}\n               >\n                  <StepIcon\n                     {...{\n                        index,\n                        isError: localIsError,\n                        isLoading: localIsLoading,\n                        isCurrentStep,\n                        isCompletedStep,\n                     }}\n                     icon={icon}\n                     checkIcon={checkIcon}\n                     errorIcon={errorIcon}\n                  />\n               </StepButtonContainer>\n               <StepLabel\n                  label={label}\n                  description={description}\n                  {...{ isCurrentStep, opacity }}\n               />\n            </div>\n            <div\n               className={ny(\n                  'stepper__vertical-step-content',\n                  !isLastStep && 'min-h-4',\n                  variant !== 'line' && 'ps-[--step-icon-size]',\n                  variant === 'line' && orientation === 'vertical' && 'min-h-0',\n                  styles?.['vertical-step-content'],\n               )}\n            >\n               {renderChildren()}\n            </div>\n         </div>\n      )\n   },\n)\n\n// <---------- HORIZONTAL STEP ---------->\n\nconst HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(\n   (props, ref) => {\n      const {\n         isError,\n         isLoading,\n         onClickStep,\n         variant,\n         clickable,\n         checkIcon: checkIconContext,\n         errorIcon: errorIconContext,\n         styles,\n         steps,\n         setStep,\n      } = useStepper()\n\n      const {\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         hasVisited,\n         icon,\n         label,\n         description,\n         isKeepError,\n         state,\n         checkIcon: checkIconProp,\n         errorIcon: errorIconProp,\n      } = props\n\n      const localIsLoading = isLoading || state === 'loading'\n      const localIsError = isError || state === 'error'\n\n      const opacity = hasVisited ? 1 : 0.8\n\n      const active\n      = variant === 'line' ? isCompletedStep || isCurrentStep : isCompletedStep\n\n      const checkIcon = checkIconProp || checkIconContext\n      const errorIcon = errorIconProp || errorIconContext\n\n      return (\n         <div\n            aria-disabled={!hasVisited}\n            className={ny(\n               'stepper__horizontal-step',\n               'relative flex items-center transition-all duration-200',\n               '[&:not(:last-child)]:flex-1',\n               '[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200',\n               '[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:content-[\\'\\']',\n               'data-[completed=true]:[&:not(:last-child)]:after:bg-primary',\n               'data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive',\n               variant === 'circle-alt'\n               && 'flex-1 flex-col justify-start [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:-order-1 [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]',\n               variant === 'circle'\n               && '[&:not(:last-child)]:after:me-[var(--step-gap)] [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:flex-1',\n               variant === 'line'\n               && 'data-[active=true]:border-primary flex-1 flex-col border-t-[3px]',\n               styles?.['horizontal-step'],\n            )}\n            data-optional={steps[index || 0]?.optional}\n            data-completed={isCompletedStep}\n            data-active={active}\n            data-invalid={localIsError}\n            data-clickable={clickable}\n            onClick={() => onClickStep?.(index || 0, setStep)}\n            ref={ref}\n         >\n            <div\n               className={ny(\n                  'stepper__horizontal-step-container',\n                  'flex items-center',\n                  variant === 'circle-alt' && 'flex-col justify-center gap-1',\n                  variant === 'line' && 'w-full',\n                  styles?.['horizontal-step-container'],\n               )}\n            >\n               <StepButtonContainer\n                  {...{ ...props, isError: localIsError, isLoading: localIsLoading }}\n               >\n                  <StepIcon\n                     {...{\n                        index,\n                        isCompletedStep,\n                        isCurrentStep,\n                        isError: localIsError,\n                        isKeepError,\n                        isLoading: localIsLoading,\n                     }}\n                     icon={icon}\n                     checkIcon={checkIcon}\n                     errorIcon={errorIcon}\n                  />\n               </StepButtonContainer>\n               <StepLabel\n                  label={label}\n                  description={description}\n                  {...{ isCurrentStep, opacity }}\n               />\n            </div>\n         </div>\n      )\n   },\n)\n\n// <---------- STEP BUTTON CONTAINER ---------->\n\ntype StepButtonContainerProps = StepSharedProps & {\n   children?: React.ReactNode\n}\n\nfunction StepButtonContainer({\n   isCurrentStep,\n   isCompletedStep,\n   children,\n   isError,\n   isLoading: isLoadingProp,\n   onClickStep,\n}: StepButtonContainerProps) {\n   const {\n      clickable,\n      isLoading: isLoadingContext,\n      variant,\n      styles,\n   } = useStepper()\n\n   const currentStepClickable = clickable || !!onClickStep\n\n   const isLoading = isLoadingProp || isLoadingContext\n\n   if (variant === 'line')\n      return null\n\n   return (\n      <Button\n         variant=\"ghost\"\n         tabIndex={currentStepClickable ? 0 : -1}\n         className={ny(\n            'stepper__step-button-container',\n            'pointer-events-none rounded-full p-0',\n            'size-[var(--step-icon-size)]',\n            'flex items-center justify-center rounded-full border-2',\n            'data-[clickable=true]:pointer-events-auto',\n            'data-[active=true]:bg-primary data-[active=true]:border-primary data-[active=true]:text-primary-foreground',\n            'data-[current=true]:border-primary data-[current=true]:bg-secondary',\n            'data-[invalid=true]:bg-destructive data-[invalid=true]:border-destructive data-[invalid=true]:text-destructive-foreground',\n            styles?.['step-button-container'],\n         )}\n         aria-current={isCurrentStep ? 'step' : undefined}\n         data-current={isCurrentStep}\n         data-invalid={isError && (isCurrentStep || isCompletedStep)}\n         data-active={isCompletedStep}\n         data-clickable={currentStepClickable}\n         data-loading={isLoading && (isCurrentStep || isCompletedStep)}\n      >\n         {children}\n      </Button>\n   )\n}\n\n// <---------- STEP ICON ---------->\n\ntype IconType = LucideIcon | React.ComponentType<any> | undefined\n\nconst iconVariants = cva('', {\n   variants: {\n      size: {\n         sm: 'size-4',\n         md: 'size-4',\n         lg: 'size-5',\n      },\n   },\n   defaultVariants: {\n      size: 'md',\n   },\n})\n\ninterface StepIconProps {\n   isCompletedStep?: boolean\n   isCurrentStep?: boolean\n   isError?: boolean\n   isLoading?: boolean\n   isKeepError?: boolean\n   icon?: IconType\n   index?: number\n   checkIcon?: IconType\n   errorIcon?: IconType\n}\n\nconst StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(\n   (props, ref) => {\n      const { size } = useStepper()\n\n      const {\n         isCompletedStep,\n         isCurrentStep,\n         isError,\n         isLoading,\n         isKeepError,\n         icon: CustomIcon,\n         index,\n         checkIcon: CustomCheckIcon,\n         errorIcon: CustomErrorIcon,\n      } = props\n\n      const Icon = React.useMemo(\n         () => (CustomIcon || null),\n         [CustomIcon],\n      )\n\n      const ErrorIcon = React.useMemo(\n         () => (CustomErrorIcon || null),\n         [CustomErrorIcon],\n      )\n\n      const Check = React.useMemo(\n         () => (CustomCheckIcon || CheckIcon),\n         [CustomCheckIcon],\n      )\n\n      return React.useMemo(() => {\n         if (isCompletedStep) {\n            if (isError && isKeepError) {\n               return (\n                  <div key=\"icon\">\n                     <X className={ny(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            return (\n               <div key=\"check-icon\">\n                  <Check className={ny(iconVariants({ size }))} />\n               </div>\n            )\n         }\n         if (isCurrentStep) {\n            if (isError && ErrorIcon) {\n               return (\n                  <div key=\"error-icon\">\n                     <ErrorIcon className={ny(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            if (isError) {\n               return (\n                  <div key=\"icon\">\n                     <X className={ny(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            if (isLoading) {\n               return (\n                  <Loader2 className={ny(iconVariants({ size }), 'animate-spin')} />\n               )\n            }\n         }\n         if (Icon) {\n            return (\n               <div key=\"step-icon\">\n                  <Icon className={ny(iconVariants({ size }))} />\n               </div>\n            )\n         }\n         return (\n            <span\n               ref={ref}\n               key=\"label\"\n               className={ny('text-md text-center font-medium')}\n            >\n               {(index || 0) + 1}\n            </span>\n         )\n      }, [\n         isCompletedStep,\n         isCurrentStep,\n         isError,\n         isLoading,\n         Icon,\n         index,\n         Check,\n         ErrorIcon,\n         isKeepError,\n         ref,\n         size,\n      ])\n   },\n)\n\n// <---------- STEP LABEL ---------->\n\ninterface StepLabelProps {\n   isCurrentStep?: boolean\n   opacity: number\n   label?: string | React.ReactNode\n   description?: string | null\n}\n\nconst labelVariants = cva('', {\n   variants: {\n      size: {\n         sm: 'text-sm',\n         md: 'text-sm',\n         lg: 'text-base',\n      },\n   },\n   defaultVariants: {\n      size: 'md',\n   },\n})\n\nconst descriptionVariants = cva('', {\n   variants: {\n      size: {\n         sm: 'text-xs',\n         md: 'text-xs',\n         lg: 'text-sm',\n      },\n   },\n   defaultVariants: {\n      size: 'md',\n   },\n})\n\nfunction StepLabel({\n   isCurrentStep,\n   opacity,\n   label,\n   description,\n}: StepLabelProps) {\n   const { variant, styles, size, orientation } = useStepper()\n   const shouldRender = !!label || !!description\n\n   return shouldRender\n      ? (\n            <div\n               aria-current={isCurrentStep ? 'step' : undefined}\n               className={ny(\n                  'stepper__step-label-container',\n                  'flex flex-col',\n                  variant !== 'line' ? 'ms-2' : orientation === 'horizontal' && 'my-2',\n                  variant === 'circle-alt' && 'text-center',\n                  variant === 'circle-alt' && orientation === 'horizontal' && 'ms-0',\n                  variant === 'circle-alt' && orientation === 'vertical' && 'text-start',\n                  styles?.['step-label-container'],\n               )}\n               style={{\n                  opacity,\n               }}\n            >\n               {!!label && (\n                  <span\n                     className={ny(\n                        'stepper__step-label',\n                        labelVariants({ size }),\n                        styles?.['step-label'],\n                     )}\n                  >\n                     {label}\n                  </span>\n               )}\n               {!!description && (\n                  <span\n                     className={ny(\n                        'stepper__step-description',\n                        'text-muted-foreground',\n                        descriptionVariants({ size }),\n                        styles?.['step-description'],\n                     )}\n                  >\n                     {description}\n                  </span>\n               )}\n            </div>\n         )\n      : null\n}\n\nexport { Stepper, Step, useStepper }\nexport type { StepProps, StepperProps, StepItem }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { cva } from \"class-variance-authority\"\nimport type { LucideIcon } from \"lucide-react\"\nimport { CheckIcon, Loader2, X } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n} from \"~/registry/miami/ui/collapsible\"\n\n// <---------- CONTEXT ---------->\n\ninterface StepperContextValue extends StepperProps {\n   clickable?: boolean\n   isError?: boolean\n   isLoading?: boolean\n   isVertical?: boolean\n   stepCount?: number\n   expandVerticalSteps?: boolean\n   activeStep: number\n   initialStep: number\n}\n\nconst StepperContext = React.createContext<\n   StepperContextValue & {\n      nextStep: () => void\n      prevStep: () => void\n      resetSteps: () => void\n      setStep: (step: number) => void\n   }\n>({\n   steps: [],\n   activeStep: 0,\n   initialStep: 0,\n   nextStep: () => {},\n   prevStep: () => {},\n   resetSteps: () => {},\n   setStep: () => {},\n})\n\ninterface StepperContextProviderProps {\n   value: Omit<StepperContextValue, \"activeStep\">\n   children: React.ReactNode\n}\n\nfunction StepperProvider({ value, children }: StepperContextProviderProps) {\n   const isError = value.state === \"error\"\n   const isLoading = value.state === \"loading\"\n\n   const [activeStep, setActiveStep] = React.useState(value.initialStep)\n\n   const nextStep = () => {\n      setActiveStep((prev) => prev + 1)\n   }\n\n   const prevStep = () => {\n      setActiveStep((prev) => prev - 1)\n   }\n\n   const resetSteps = () => {\n      setActiveStep(value.initialStep)\n   }\n\n   const setStep = (step: number) => {\n      setActiveStep(step)\n   }\n\n   return (\n      <StepperContext.Provider\n         value={{\n            ...value,\n            isError,\n            isLoading,\n            activeStep,\n            nextStep,\n            prevStep,\n            resetSteps,\n            setStep,\n         }}\n      >\n         {children}\n      </StepperContext.Provider>\n   )\n}\n\n// <---------- HOOKS ---------->\n\nfunction usePrevious<T>(value: T): T | undefined {\n   const ref = React.useRef<T>()\n\n   React.useEffect(() => {\n      ref.current = value\n   }, [value])\n\n   return ref.current\n}\n\nfunction useStepper() {\n   const context = React.useContext(StepperContext)\n\n   if (context === undefined)\n      throw new Error(\"useStepper must be used within a StepperProvider\")\n\n   const { children, className, ...rest } = context\n\n   const isLastStep = context.activeStep === context.steps.length - 1\n   const hasCompletedAllSteps = context.activeStep === context.steps.length\n\n   const previousActiveStep = usePrevious(context.activeStep)\n\n   const currentStep = context.steps[context.activeStep]\n   const isOptionalStep = !!currentStep?.optional\n\n   const isDisabledStep = context.activeStep === 0\n\n   return {\n      ...rest,\n      isLastStep,\n      hasCompletedAllSteps,\n      isOptionalStep,\n      isDisabledStep,\n      currentStep,\n      previousActiveStep,\n   }\n}\n\nfunction useMediaQuery(query: string) {\n   const [value, setValue] = React.useState(false)\n\n   React.useEffect(() => {\n      function onChange(event: MediaQueryListEvent) {\n         setValue(event.matches)\n      }\n\n      const result = matchMedia(query)\n      result.addEventListener(\"change\", onChange)\n      setValue(result.matches)\n\n      return () => result.removeEventListener(\"change\", onChange)\n   }, [query])\n\n   return value\n}\n\n// <---------- STEPS ---------->\n\ninterface StepItem {\n   id?: string\n   label?: string\n   description?: string\n   icon?: IconType\n   optional?: boolean\n}\n\ninterface StepOptions {\n   orientation?: \"vertical\" | \"horizontal\"\n   state?: \"loading\" | \"error\"\n   responsive?: boolean\n   checkIcon?: IconType\n   errorIcon?: IconType\n   onClickStep?: (step: number, setStep: (step: number) => void) => void\n   mobileBreakpoint?: string\n   variant?: \"circle\" | \"circle-alt\" | \"line\"\n   expandVerticalSteps?: boolean\n   size?: \"sm\" | \"md\" | \"lg\"\n   styles?: {\n      /** Styles for the main container */\n      \"main-container\"?: string\n      /** Styles for the horizontal step */\n      \"horizontal-step\"?: string\n      /** Styles for the horizontal step container (button and labels) */\n      \"horizontal-step-container\"?: string\n      /** Styles for the vertical step */\n      \"vertical-step\"?: string\n      /** Styles for the vertical step container (button and labels) */\n      \"vertical-step-container\"?: string\n      /** Styles for the vertical step content */\n      \"vertical-step-content\"?: string\n      /** Styles for the step button container */\n      \"step-button-container\"?: string\n      /** Styles for the label and description container */\n      \"step-label-container\"?: string\n      /** Styles for the step label */\n      \"step-label\"?: string\n      /** Styles for the step description */\n      \"step-description\"?: string\n   }\n   variables?: {\n      \"--step-icon-size\"?: string\n      \"--step-gap\"?: string\n   }\n   scrollTracking?: boolean\n}\ninterface StepperProps extends StepOptions {\n   children?: React.ReactNode\n   className?: string\n   initialStep: number\n   steps: StepItem[]\n}\n\nconst VARIABLE_SIZES = {\n   sm: \"32px\",\n   md: \"36px\",\n   lg: \"40px\",\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n   (props, ref: React.Ref<HTMLDivElement>) => {\n      const {\n         className,\n         children,\n         orientation: orientationProp,\n         state,\n         responsive,\n         checkIcon,\n         errorIcon,\n         onClickStep,\n         mobileBreakpoint,\n         expandVerticalSteps = false,\n         initialStep = 0,\n         size,\n         steps,\n         variant,\n         styles,\n         variables,\n         scrollTracking = false,\n         ...rest\n      } = props\n\n      const childArr = React.Children.toArray(children)\n\n      const items = [] as React.ReactElement[]\n\n      const footer = childArr.map((child, _index) => {\n         if (!React.isValidElement(child))\n            throw new Error(\"Stepper children must be valid React elements.\")\n\n         if (child.type === Step) {\n            items.push(child)\n            return null\n         }\n\n         return child\n      })\n\n      const stepCount = items.length\n\n      const isMobile = useMediaQuery(\n         `(max-width: ${mobileBreakpoint || \"768px\"})`,\n      )\n\n      const clickable = !!onClickStep\n\n      const orientation = isMobile && responsive ? \"vertical\" : orientationProp\n\n      const isVertical = orientation === \"vertical\"\n\n      return (\n         <StepperProvider\n            value={{\n               initialStep,\n               orientation,\n               state,\n               size,\n               responsive,\n               checkIcon,\n               errorIcon,\n               onClickStep,\n               clickable,\n               stepCount,\n               isVertical,\n               variant: variant || \"circle\",\n               expandVerticalSteps,\n               steps,\n               scrollTracking,\n               styles,\n            }}\n         >\n            <div\n               ref={ref}\n               className={ny(\n                  \"stepper__main-container\",\n                  \"flex w-full flex-wrap\",\n                  stepCount === 1 ? \"justify-end\" : \"justify-between\",\n                  orientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n                  variant === \"line\" && orientation === \"horizontal\" && \"gap-4\",\n                  className,\n                  styles?.[\"main-container\"],\n               )}\n               style={\n                  {\n                     \"--step-icon-size\":\n                        variables?.[\"--step-icon-size\"] ||\n                        `${VARIABLE_SIZES[size || \"md\"]}`,\n                     \"--step-gap\": variables?.[\"--step-gap\"] || \"8px\",\n                  } as React.CSSProperties\n               }\n               {...rest}\n            >\n               <VerticalContent>{items}</VerticalContent>\n            </div>\n            {orientation === \"horizontal\" && (\n               <HorizontalContent>{items}</HorizontalContent>\n            )}\n            {footer}\n         </StepperProvider>\n      )\n   },\n)\n\nStepper.defaultProps = {\n   size: \"md\",\n   orientation: \"horizontal\",\n   responsive: true,\n}\n\nfunction VerticalContent({ children }: { children: React.ReactNode }) {\n   const { activeStep } = useStepper()\n\n   const childArr = React.Children.toArray(children)\n   const stepCount = childArr.length\n\n   return (\n      <>\n         {React.Children.map(children, (child, i) => {\n            const isCompletedStep =\n               (React.isValidElement(child) &&\n                  (child.props as any).isCompletedStep) ??\n               i < activeStep\n            const isLastStep = i === stepCount - 1\n            const isCurrentStep = i === activeStep\n\n            const stepProps = {\n               index: i,\n               isCompletedStep,\n               isCurrentStep,\n               isLastStep,\n            }\n\n            if (React.isValidElement(child))\n               return React.cloneElement(child, stepProps)\n\n            return null\n         })}\n      </>\n   )\n}\n\nfunction HorizontalContent({ children }: { children: React.ReactNode }) {\n   const { activeStep } = useStepper()\n   const childArr = React.Children.toArray(children)\n\n   if (activeStep > childArr.length) return null\n\n   return (\n      <>\n         {React.Children.map(childArr[activeStep], (node) => {\n            if (!React.isValidElement(node)) return null\n\n            return React.Children.map(\n               node.props.children,\n               (childNode) => childNode,\n            )\n         })}\n      </>\n   )\n}\n\n// <---------- STEP ---------->\n\ninterface StepProps extends React.HTMLAttributes<HTMLLIElement> {\n   label?: string | React.ReactNode\n   description?: string\n   icon?: IconType\n   state?: \"loading\" | \"error\"\n   checkIcon?: IconType\n   errorIcon?: IconType\n   isCompletedStep?: boolean\n   isKeepError?: boolean\n   onClickStep?: (step: number, setStep: (step: number) => void) => void\n}\n\ninterface StepSharedProps extends StepProps {\n   isLastStep?: boolean\n   isCurrentStep?: boolean\n   index?: number\n   hasVisited: boolean | undefined\n   isError?: boolean\n   isLoading?: boolean\n}\n\n// Props which shouldn't be passed to to the Step component from the user\ninterface StepInternalConfig {\n   index: number\n   isCompletedStep?: boolean\n   isCurrentStep?: boolean\n   isLastStep?: boolean\n}\n\ninterface FullStepProps extends StepProps, StepInternalConfig {}\n\nconst Step = React.forwardRef<HTMLLIElement, StepProps>(\n   (props, ref: React.Ref<any>) => {\n      const {\n         children,\n         description,\n         icon,\n         state,\n         checkIcon,\n         errorIcon,\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         isLastStep,\n         isKeepError,\n         label,\n         onClickStep,\n      } = props as FullStepProps\n\n      const { isVertical, isError, isLoading, clickable } = useStepper()\n\n      const hasVisited = isCurrentStep || isCompletedStep\n\n      const sharedProps = {\n         isLastStep,\n         isCompletedStep,\n         isCurrentStep,\n         index,\n         isError,\n         isLoading,\n         clickable,\n         label,\n         description,\n         hasVisited,\n         icon,\n         isKeepError,\n         checkIcon,\n         state,\n         errorIcon,\n         onClickStep,\n      }\n\n      const renderStep = () => {\n         switch (isVertical) {\n            case true:\n               return (\n                  <VerticalStep ref={ref} {...sharedProps}>\n                     {children}\n                  </VerticalStep>\n               )\n            default:\n               return <HorizontalStep ref={ref} {...sharedProps} />\n         }\n      }\n\n      return renderStep()\n   },\n)\n\n// <---------- VERTICAL STEP ---------->\n\ntype VerticalStepProps = StepSharedProps & {\n   children?: React.ReactNode\n}\n\nconst verticalStepVariants = cva(\n   [\n      \"flex flex-col relative transition-all duration-200\",\n      \"data-[completed=true]:[&:not(:last-child)]:after:bg-primary\",\n      \"data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive\",\n   ],\n   {\n      variants: {\n         variant: {\n            circle: ny(\n               \"[&:not(:last-child)]:gap-[var(--step-gap)] [&:not(:last-child)]:pb-[var(--step-gap)]\",\n               \"[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:w-[2px] [&:not(:last-child)]:after:content-['']\",\n               \"[&:not(:last-child)]:after:inset-x-[calc(var(--step-icon-size)/2)]\",\n               \"[&:not(:last-child)]:after:absolute\",\n               \"[&:not(:last-child)]:after:top-[calc(var(--step-icon-size)+var(--step-gap))]\",\n               \"[&:not(:last-child)]:after:bottom-[var(--step-gap)]\",\n               \"[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200\",\n            ),\n            line: \"flex-1 border-t-0 mb-4\",\n         },\n      },\n   },\n)\n\nconst VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(\n   (props, ref) => {\n      const {\n         children,\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         label,\n         description,\n         icon,\n         hasVisited,\n         state,\n         checkIcon: checkIconProp,\n         errorIcon: errorIconProp,\n         onClickStep,\n      } = props\n\n      const {\n         checkIcon: checkIconContext,\n         errorIcon: errorIconContext,\n         isError,\n         isLoading,\n         variant,\n         onClickStep: onClickStepGeneral,\n         clickable,\n         expandVerticalSteps,\n         styles,\n         scrollTracking,\n         orientation,\n         steps,\n         setStep,\n         isLastStep: isLastStepCurrentStep,\n         previousActiveStep,\n      } = useStepper()\n\n      const opacity = hasVisited ? 1 : 0.8\n      const localIsLoading = isLoading || state === \"loading\"\n      const localIsError = isError || state === \"error\"\n\n      const isLastStep = index === steps.length - 1\n\n      const active =\n         variant === \"line\" ? isCompletedStep || isCurrentStep : isCompletedStep\n      const checkIcon = checkIconProp || checkIconContext\n      const errorIcon = errorIconProp || errorIconContext\n\n      const renderChildren = () => {\n         if (!expandVerticalSteps) {\n            return (\n               <Collapsible open={isCurrentStep}>\n                  <CollapsibleContent\n                     ref={(node) => {\n                        if (\n                           // If the step is the first step and the previous step\n                           // was the last step or if the step is not the first step\n                           // This prevents initial scrolling when the stepper\n                           // is located anywhere other than the top of the view.\n                           scrollTracking &&\n                           ((index === 0 &&\n                              previousActiveStep &&\n                              previousActiveStep === steps.length) ||\n                              (index && index > 0))\n                        ) {\n                           node?.scrollIntoView({\n                              behavior: \"smooth\",\n                              block: \"center\",\n                           })\n                        }\n                     }}\n                     className=\"data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden\"\n                  >\n                     {children}\n                  </CollapsibleContent>\n               </Collapsible>\n            )\n         }\n         return children\n      }\n\n      return (\n         <div\n            ref={ref}\n            className={ny(\n               \"stepper__vertical-step\",\n               verticalStepVariants({\n                  variant: variant?.includes(\"circle\") ? \"circle\" : \"line\",\n               }),\n               isLastStepCurrentStep && \"gap-[var(--step-gap)]\",\n               styles?.[\"vertical-step\"],\n            )}\n            data-optional={steps[index || 0]?.optional}\n            data-completed={isCompletedStep}\n            data-active={active}\n            data-clickable={clickable || !!onClickStep}\n            data-invalid={localIsError}\n            onClick={() => {\n               if (onClickStep) onClickStep(index || 0, setStep)\n               else onClickStepGeneral?.(index || 0, setStep)\n            }}\n         >\n            <div\n               data-vertical\n               data-active={active}\n               className={ny(\n                  \"stepper__vertical-step-container\",\n                  \"flex items-center\",\n                  variant === \"line\" &&\n                     \"data-[active=true]:border-primary border-s-[3px] py-2 ps-3\",\n                  styles?.[\"vertical-step-container\"],\n               )}\n            >\n               <StepButtonContainer\n                  {...{\n                     isLoading: localIsLoading,\n                     isError: localIsError,\n                     ...props,\n                  }}\n               >\n                  <StepIcon\n                     {...{\n                        index,\n                        isError: localIsError,\n                        isLoading: localIsLoading,\n                        isCurrentStep,\n                        isCompletedStep,\n                     }}\n                     icon={icon}\n                     checkIcon={checkIcon}\n                     errorIcon={errorIcon}\n                  />\n               </StepButtonContainer>\n               <StepLabel\n                  label={label}\n                  description={description}\n                  {...{ isCurrentStep, opacity }}\n               />\n            </div>\n            <div\n               className={ny(\n                  \"stepper__vertical-step-content\",\n                  !isLastStep && \"min-h-4\",\n                  variant !== \"line\" && \"ps-[--step-icon-size]\",\n                  variant === \"line\" && orientation === \"vertical\" && \"min-h-0\",\n                  styles?.[\"vertical-step-content\"],\n               )}\n            >\n               {renderChildren()}\n            </div>\n         </div>\n      )\n   },\n)\n\n// <---------- HORIZONTAL STEP ---------->\n\nconst HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(\n   (props, ref) => {\n      const {\n         isError,\n         isLoading,\n         onClickStep,\n         variant,\n         clickable,\n         checkIcon: checkIconContext,\n         errorIcon: errorIconContext,\n         styles,\n         steps,\n         setStep,\n      } = useStepper()\n\n      const {\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         hasVisited,\n         icon,\n         label,\n         description,\n         isKeepError,\n         state,\n         checkIcon: checkIconProp,\n         errorIcon: errorIconProp,\n      } = props\n\n      const localIsLoading = isLoading || state === \"loading\"\n      const localIsError = isError || state === \"error\"\n\n      const opacity = hasVisited ? 1 : 0.8\n\n      const active =\n         variant === \"line\" ? isCompletedStep || isCurrentStep : isCompletedStep\n\n      const checkIcon = checkIconProp || checkIconContext\n      const errorIcon = errorIconProp || errorIconContext\n\n      return (\n         <div\n            aria-disabled={!hasVisited}\n            className={ny(\n               \"stepper__horizontal-step\",\n               \"relative flex items-center transition-all duration-200\",\n               \"[&:not(:last-child)]:flex-1\",\n               \"[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200\",\n               \"[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:content-['']\",\n               \"data-[completed=true]:[&:not(:last-child)]:after:bg-primary\",\n               \"data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive\",\n               variant === \"circle-alt\" &&\n                  \"flex-1 flex-col justify-start [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:-order-1 [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]\",\n               variant === \"circle\" &&\n                  \"[&:not(:last-child)]:after:me-[var(--step-gap)] [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:flex-1\",\n               variant === \"line\" &&\n                  \"data-[active=true]:border-primary flex-1 flex-col border-t-[3px]\",\n               styles?.[\"horizontal-step\"],\n            )}\n            data-optional={steps[index || 0]?.optional}\n            data-completed={isCompletedStep}\n            data-active={active}\n            data-invalid={localIsError}\n            data-clickable={clickable}\n            onClick={() => onClickStep?.(index || 0, setStep)}\n            ref={ref}\n         >\n            <div\n               className={ny(\n                  \"stepper__horizontal-step-container\",\n                  \"flex items-center\",\n                  variant === \"circle-alt\" && \"flex-col justify-center gap-1\",\n                  variant === \"line\" && \"w-full\",\n                  styles?.[\"horizontal-step-container\"],\n               )}\n            >\n               <StepButtonContainer\n                  {...{\n                     ...props,\n                     isError: localIsError,\n                     isLoading: localIsLoading,\n                  }}\n               >\n                  <StepIcon\n                     {...{\n                        index,\n                        isCompletedStep,\n                        isCurrentStep,\n                        isError: localIsError,\n                        isKeepError,\n                        isLoading: localIsLoading,\n                     }}\n                     icon={icon}\n                     checkIcon={checkIcon}\n                     errorIcon={errorIcon}\n                  />\n               </StepButtonContainer>\n               <StepLabel\n                  label={label}\n                  description={description}\n                  {...{ isCurrentStep, opacity }}\n               />\n            </div>\n         </div>\n      )\n   },\n)\n\n// <---------- STEP BUTTON CONTAINER ---------->\n\ntype StepButtonContainerProps = StepSharedProps & {\n   children?: React.ReactNode\n}\n\nfunction StepButtonContainer({\n   isCurrentStep,\n   isCompletedStep,\n   children,\n   isError,\n   isLoading: isLoadingProp,\n   onClickStep,\n}: StepButtonContainerProps) {\n   const {\n      clickable,\n      isLoading: isLoadingContext,\n      variant,\n      styles,\n   } = useStepper()\n\n   const currentStepClickable = clickable || !!onClickStep\n\n   const isLoading = isLoadingProp || isLoadingContext\n\n   if (variant === \"line\") return null\n\n   return (\n      <Button\n         variant=\"ghost\"\n         tabIndex={currentStepClickable ? 0 : -1}\n         className={ny(\n            \"stepper__step-button-container\",\n            \"pointer-events-none rounded-full p-0\",\n            \"size-[var(--step-icon-size)]\",\n            \"flex items-center justify-center rounded-full border-2\",\n            \"data-[clickable=true]:pointer-events-auto\",\n            \"data-[active=true]:bg-primary data-[active=true]:border-primary data-[active=true]:text-primary-foreground\",\n            \"data-[current=true]:border-primary data-[current=true]:bg-secondary\",\n            \"data-[invalid=true]:bg-destructive data-[invalid=true]:border-destructive data-[invalid=true]:text-destructive-foreground\",\n            styles?.[\"step-button-container\"],\n         )}\n         aria-current={isCurrentStep ? \"step\" : undefined}\n         data-current={isCurrentStep}\n         data-invalid={isError && (isCurrentStep || isCompletedStep)}\n         data-active={isCompletedStep}\n         data-clickable={currentStepClickable}\n         data-loading={isLoading && (isCurrentStep || isCompletedStep)}\n      >\n         {children}\n      </Button>\n   )\n}\n\n// <---------- STEP ICON ---------->\n\ntype IconType = LucideIcon | React.ComponentType<any> | undefined\n\nconst iconVariants = cva(\"\", {\n   variants: {\n      size: {\n         sm: \"size-4\",\n         md: \"size-4\",\n         lg: \"size-5\",\n      },\n   },\n   defaultVariants: {\n      size: \"md\",\n   },\n})\n\ninterface StepIconProps {\n   isCompletedStep?: boolean\n   isCurrentStep?: boolean\n   isError?: boolean\n   isLoading?: boolean\n   isKeepError?: boolean\n   icon?: IconType\n   index?: number\n   checkIcon?: IconType\n   errorIcon?: IconType\n}\n\nconst StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(\n   (props, ref) => {\n      const { size } = useStepper()\n\n      const {\n         isCompletedStep,\n         isCurrentStep,\n         isError,\n         isLoading,\n         isKeepError,\n         icon: CustomIcon,\n         index,\n         checkIcon: CustomCheckIcon,\n         errorIcon: CustomErrorIcon,\n      } = props\n\n      const Icon = React.useMemo(() => CustomIcon || null, [CustomIcon])\n\n      const ErrorIcon = React.useMemo(\n         () => CustomErrorIcon || null,\n         [CustomErrorIcon],\n      )\n\n      const Check = React.useMemo(\n         () => CustomCheckIcon || CheckIcon,\n         [CustomCheckIcon],\n      )\n\n      return React.useMemo(() => {\n         if (isCompletedStep) {\n            if (isError && isKeepError) {\n               return (\n                  <div key=\"icon\">\n                     <X className={ny(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            return (\n               <div key=\"check-icon\">\n                  <Check className={ny(iconVariants({ size }))} />\n               </div>\n            )\n         }\n         if (isCurrentStep) {\n            if (isError && ErrorIcon) {\n               return (\n                  <div key=\"error-icon\">\n                     <ErrorIcon className={ny(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            if (isError) {\n               return (\n                  <div key=\"icon\">\n                     <X className={ny(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            if (isLoading) {\n               return (\n                  <Loader2\n                     className={ny(iconVariants({ size }), \"animate-spin\")}\n                  />\n               )\n            }\n         }\n         if (Icon) {\n            return (\n               <div key=\"step-icon\">\n                  <Icon className={ny(iconVariants({ size }))} />\n               </div>\n            )\n         }\n         return (\n            <span\n               ref={ref}\n               key=\"label\"\n               className={ny(\"text-md text-center font-medium\")}\n            >\n               {(index || 0) + 1}\n            </span>\n         )\n      }, [\n         isCompletedStep,\n         isCurrentStep,\n         isError,\n         isLoading,\n         Icon,\n         index,\n         Check,\n         ErrorIcon,\n         isKeepError,\n         ref,\n         size,\n      ])\n   },\n)\n\n// <---------- STEP LABEL ---------->\n\ninterface StepLabelProps {\n   isCurrentStep?: boolean\n   opacity: number\n   label?: string | React.ReactNode\n   description?: string | null\n}\n\nconst labelVariants = cva(\"\", {\n   variants: {\n      size: {\n         sm: \"text-sm\",\n         md: \"text-sm\",\n         lg: \"text-base\",\n      },\n   },\n   defaultVariants: {\n      size: \"md\",\n   },\n})\n\nconst descriptionVariants = cva(\"\", {\n   variants: {\n      size: {\n         sm: \"text-xs\",\n         md: \"text-xs\",\n         lg: \"text-sm\",\n      },\n   },\n   defaultVariants: {\n      size: \"md\",\n   },\n})\n\nfunction StepLabel({\n   isCurrentStep,\n   opacity,\n   label,\n   description,\n}: StepLabelProps) {\n   const { variant, styles, size, orientation } = useStepper()\n   const shouldRender = !!label || !!description\n\n   return shouldRender ? (\n      <div\n         aria-current={isCurrentStep ? \"step\" : undefined}\n         className={ny(\n            \"stepper__step-label-container\",\n            \"flex flex-col\",\n            variant !== \"line\"\n               ? \"ms-2\"\n               : orientation === \"horizontal\" && \"my-2\",\n            variant === \"circle-alt\" && \"text-center\",\n            variant === \"circle-alt\" && orientation === \"horizontal\" && \"ms-0\",\n            variant === \"circle-alt\" &&\n               orientation === \"vertical\" &&\n               \"text-start\",\n            styles?.[\"step-label-container\"],\n         )}\n         style={{\n            opacity,\n         }}\n      >\n         {!!label && (\n            <span\n               className={ny(\n                  \"stepper__step-label\",\n                  labelVariants({ size }),\n                  styles?.[\"step-label\"],\n               )}\n            >\n               {label}\n            </span>\n         )}\n         {!!description && (\n            <span\n               className={ny(\n                  \"stepper__step-description\",\n                  \"text-muted-foreground\",\n                  descriptionVariants({ size }),\n                  styles?.[\"step-description\"],\n               )}\n            >\n               {description}\n            </span>\n         )}\n      </div>\n   ) : null\n}\n\nexport { Stepper, Step, useStepper }\nexport type { StepProps, StepperProps, StepItem }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/switch-demo.json b/apps/web/public/r/styles/miami/switch-demo.json
index 0a3cdfcf..95667790 100644
--- a/apps/web/public/r/styles/miami/switch-demo.json
+++ b/apps/web/public/r/styles/miami/switch-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "switch-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/switch-demo.tsx",
-      "content": "import { Label } from '~/registry/miami/ui/label'\nimport { Switch } from '~/registry/miami/ui/switch'\n\nexport default function SwitchDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Switch id=\"airplane-mode\" />\n         <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n      </div>\n   )\n}\n",
+      "path": "examples/switch-demo.tsx",
+      "content": "import { Label } from \"~/registry/miami/ui/label\"\nimport { Switch } from \"~/registry/miami/ui/switch\"\n\nexport default function SwitchDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Switch id=\"airplane-mode\" />\n         <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/switch-form.json b/apps/web/public/r/styles/miami/switch-form.json
index 27f32caa..d92ed677 100644
--- a/apps/web/public/r/styles/miami/switch-form.json
+++ b/apps/web/public/r/styles/miami/switch-form.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "switch-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/switch-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n} from '~/registry/miami/ui/form'\nimport { Switch } from '~/registry/miami/ui/switch'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst FormSchema = z.object({\n   marketing_emails: z.boolean().default(false).optional(),\n   security_emails: z.boolean(),\n})\n\nexport default function SwitchForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         security_emails: true,\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full space-y-6\">\n            <div>\n               <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n               <div className=\"space-y-4\">\n                  <FormField\n                     control={form.control}\n                     name=\"marketing_emails\"\n                     render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                           <div className=\"space-y-0.5\">\n                              <FormLabel>Marketing emails</FormLabel>\n                              <FormDescription>\n                                 Receive emails about new products, features, and more.\n                              </FormDescription>\n                           </div>\n                           <FormControl>\n                              <Switch\n                                 checked={field.value}\n                                 onCheckedChange={field.onChange}\n                              />\n                           </FormControl>\n                        </FormItem>\n                     )}\n                  />\n                  <FormField\n                     control={form.control}\n                     name=\"security_emails\"\n                     render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                           <div className=\"space-y-0.5\">\n                              <FormLabel>Security emails</FormLabel>\n                              <FormDescription>\n                                 Receive emails about your account security.\n                              </FormDescription>\n                           </div>\n                           <FormControl>\n                              <Switch\n                                 checked={field.value}\n                                 onCheckedChange={field.onChange}\n                                 disabled\n                                 aria-readonly\n                              />\n                           </FormControl>\n                        </FormItem>\n                     )}\n                  />\n               </div>\n            </div>\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "path": "examples/switch-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n} from \"~/registry/miami/ui/form\"\nimport { Switch } from \"~/registry/miami/ui/switch\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst FormSchema = z.object({\n   marketing_emails: z.boolean().default(false).optional(),\n   security_emails: z.boolean(),\n})\n\nexport default function SwitchForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         security_emails: true,\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-full space-y-6\"\n         >\n            <div>\n               <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n               <div className=\"space-y-4\">\n                  <FormField\n                     control={form.control}\n                     name=\"marketing_emails\"\n                     render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                           <div className=\"space-y-0.5\">\n                              <FormLabel>Marketing emails</FormLabel>\n                              <FormDescription>\n                                 Receive emails about new products, features,\n                                 and more.\n                              </FormDescription>\n                           </div>\n                           <FormControl>\n                              <Switch\n                                 checked={field.value}\n                                 onCheckedChange={field.onChange}\n                              />\n                           </FormControl>\n                        </FormItem>\n                     )}\n                  />\n                  <FormField\n                     control={form.control}\n                     name=\"security_emails\"\n                     render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                           <div className=\"space-y-0.5\">\n                              <FormLabel>Security emails</FormLabel>\n                              <FormDescription>\n                                 Receive emails about your account security.\n                              </FormDescription>\n                           </div>\n                           <FormControl>\n                              <Switch\n                                 checked={field.value}\n                                 onCheckedChange={field.onChange}\n                                 disabled\n                                 aria-readonly\n                              />\n                           </FormControl>\n                        </FormItem>\n                     )}\n                  />\n               </div>\n            </div>\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/switch.json b/apps/web/public/r/styles/miami/switch.json
index f4f41565..c2781413 100644
--- a/apps/web/public/r/styles/miami/switch.json
+++ b/apps/web/public/r/styles/miami/switch.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "switch",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-switch"
   ],
   "files": [
     {
       "path": "ui/switch.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitives from '@radix-ui/react-switch'\n\nimport { ny } from '~/lib/utils'\n\nconst Switch = React.forwardRef<\n   React.ElementRef<typeof SwitchPrimitives.Root>,\n   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n   <SwitchPrimitives.Root\n      className={ny(\n         'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n         className,\n      )}\n      {...props}\n      ref={ref}\n   >\n      <SwitchPrimitives.Thumb\n         className={ny(\n            'bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',\n         )}\n      />\n   </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Switch = React.forwardRef<\n   React.ElementRef<typeof SwitchPrimitives.Root>,\n   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n   <SwitchPrimitives.Root\n      className={ny(\n         \"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n         className,\n      )}\n      {...props}\n      ref={ref}\n   >\n      <SwitchPrimitives.Thumb\n         className={ny(\n            \"bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\",\n         )}\n      />\n   </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/table-demo.json b/apps/web/public/r/styles/miami/table-demo.json
index 26a57de5..856f7601 100644
--- a/apps/web/public/r/styles/miami/table-demo.json
+++ b/apps/web/public/r/styles/miami/table-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "table-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/table-demo.tsx",
-      "content": "import {\n   Table,\n   TableBody,\n   TableCaption,\n   TableCell,\n   TableFooter,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from '~/registry/miami/ui/table'\n\nconst invoices = [\n   {\n      invoice: 'INV001',\n      paymentStatus: 'Paid',\n      totalAmount: '$250.00',\n      paymentMethod: 'Credit Card',\n   },\n   {\n      invoice: 'INV002',\n      paymentStatus: 'Pending',\n      totalAmount: '$150.00',\n      paymentMethod: 'PayPal',\n   },\n   {\n      invoice: 'INV003',\n      paymentStatus: 'Unpaid',\n      totalAmount: '$350.00',\n      paymentMethod: 'Bank Transfer',\n   },\n   {\n      invoice: 'INV004',\n      paymentStatus: 'Paid',\n      totalAmount: '$450.00',\n      paymentMethod: 'Credit Card',\n   },\n   {\n      invoice: 'INV005',\n      paymentStatus: 'Paid',\n      totalAmount: '$550.00',\n      paymentMethod: 'PayPal',\n   },\n   {\n      invoice: 'INV006',\n      paymentStatus: 'Pending',\n      totalAmount: '$200.00',\n      paymentMethod: 'Bank Transfer',\n   },\n   {\n      invoice: 'INV007',\n      paymentStatus: 'Unpaid',\n      totalAmount: '$300.00',\n      paymentMethod: 'Credit Card',\n   },\n]\n\nexport default function TableDemo() {\n   return (\n      <Table>\n         <TableCaption>A list of your recent invoices.</TableCaption>\n         <TableHeader>\n            <TableRow>\n               <TableHead className=\"w-[100px]\">Invoice</TableHead>\n               <TableHead>Status</TableHead>\n               <TableHead>Method</TableHead>\n               <TableHead className=\"text-right\">Amount</TableHead>\n            </TableRow>\n         </TableHeader>\n         <TableBody>\n            {invoices.map(invoice => (\n               <TableRow key={invoice.invoice}>\n                  <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n                  <TableCell>{invoice.paymentStatus}</TableCell>\n                  <TableCell>{invoice.paymentMethod}</TableCell>\n                  <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n               </TableRow>\n            ))}\n         </TableBody>\n         <TableFooter>\n            <TableRow>\n               <TableCell colSpan={3}>Total</TableCell>\n               <TableCell className=\"text-right\">$2,500.00</TableCell>\n            </TableRow>\n         </TableFooter>\n      </Table>\n   )\n}\n",
+      "path": "examples/table-demo.tsx",
+      "content": "import {\n   Table,\n   TableBody,\n   TableCaption,\n   TableCell,\n   TableFooter,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from \"~/registry/miami/ui/table\"\n\nconst invoices = [\n   {\n      invoice: \"INV001\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$250.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV002\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$150.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV003\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$350.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV004\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$450.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV005\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$550.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV006\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$200.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV007\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$300.00\",\n      paymentMethod: \"Credit Card\",\n   },\n]\n\nexport default function TableDemo() {\n   return (\n      <Table>\n         <TableCaption>A list of your recent invoices.</TableCaption>\n         <TableHeader>\n            <TableRow>\n               <TableHead className=\"w-[100px]\">Invoice</TableHead>\n               <TableHead>Status</TableHead>\n               <TableHead>Method</TableHead>\n               <TableHead className=\"text-right\">Amount</TableHead>\n            </TableRow>\n         </TableHeader>\n         <TableBody>\n            {invoices.map((invoice) => (\n               <TableRow key={invoice.invoice}>\n                  <TableCell className=\"font-medium\">\n                     {invoice.invoice}\n                  </TableCell>\n                  <TableCell>{invoice.paymentStatus}</TableCell>\n                  <TableCell>{invoice.paymentMethod}</TableCell>\n                  <TableCell className=\"text-right\">\n                     {invoice.totalAmount}\n                  </TableCell>\n               </TableRow>\n            ))}\n         </TableBody>\n         <TableFooter>\n            <TableRow>\n               <TableCell colSpan={3}>Total</TableCell>\n               <TableCell className=\"text-right\">$2,500.00</TableCell>\n            </TableRow>\n         </TableFooter>\n      </Table>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/table.json b/apps/web/public/r/styles/miami/table.json
index 937a0133..12a4f9e8 100644
--- a/apps/web/public/r/styles/miami/table.json
+++ b/apps/web/public/r/styles/miami/table.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "table",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/table.tsx",
-      "content": "import * as React from 'react'\n\nimport { ny } from '~/lib/utils'\n\nconst Table = React.forwardRef<\n   HTMLTableElement,\n   React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n   <div className=\"relative w-full overflow-auto\">\n      <table\n         ref={ref}\n         className={ny('w-full caption-bottom text-sm', className)}\n         {...props}\n      />\n   </div>\n))\nTable.displayName = 'Table'\n\nconst TableHeader = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <thead ref={ref} className={ny('[&_tr]:border-b', className)} {...props} />\n))\nTableHeader.displayName = 'TableHeader'\n\nconst TableBody = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <tbody\n      ref={ref}\n      className={ny('[&_tr:last-child]:border-0', className)}\n      {...props}\n   />\n))\nTableBody.displayName = 'TableBody'\n\nconst TableFooter = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <tfoot\n      ref={ref}\n      className={ny(\n         'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',\n         className,\n      )}\n      {...props}\n   />\n))\nTableFooter.displayName = 'TableFooter'\n\nconst TableRow = React.forwardRef<\n   HTMLTableRowElement,\n   React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n   <tr\n      ref={ref}\n      className={ny(\n         'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',\n         className,\n      )}\n      {...props}\n   />\n))\nTableRow.displayName = 'TableRow'\n\nconst TableHead = React.forwardRef<\n   HTMLTableCellElement,\n   React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n   <th\n      ref={ref}\n      className={ny(\n         'text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n         className,\n      )}\n      {...props}\n   />\n))\nTableHead.displayName = 'TableHead'\n\nconst TableCell = React.forwardRef<\n   HTMLTableCellElement,\n   React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n   <td\n      ref={ref}\n      className={ny(\n         'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n         className,\n      )}\n      {...props}\n   />\n))\nTableCell.displayName = 'TableCell'\n\nconst TableCaption = React.forwardRef<\n   HTMLTableCaptionElement,\n   React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n   <caption\n      ref={ref}\n      className={ny('text-muted-foreground mt-4 text-sm', className)}\n      {...props}\n   />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport {\n   Table,\n   TableHeader,\n   TableBody,\n   TableFooter,\n   TableHead,\n   TableRow,\n   TableCell,\n   TableCaption,\n}\n",
-      "type": "registry:component",
+      "content": "import * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Table = React.forwardRef<\n   HTMLTableElement,\n   React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n   <div className=\"relative w-full overflow-auto\">\n      <table\n         ref={ref}\n         className={ny(\"w-full caption-bottom text-sm\", className)}\n         {...props}\n      />\n   </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <thead ref={ref} className={ny(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <tbody\n      ref={ref}\n      className={ny(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n   />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <tfoot\n      ref={ref}\n      className={ny(\n         \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n   HTMLTableRowElement,\n   React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n   <tr\n      ref={ref}\n      className={ny(\n         \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n   HTMLTableCellElement,\n   React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n   <th\n      ref={ref}\n      className={ny(\n         \"text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n   HTMLTableCellElement,\n   React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n   <td\n      ref={ref}\n      className={ny(\n         \"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n   HTMLTableCaptionElement,\n   React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n   <caption\n      ref={ref}\n      className={ny(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n   />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n   Table,\n   TableHeader,\n   TableBody,\n   TableFooter,\n   TableHead,\n   TableRow,\n   TableCell,\n   TableCaption,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/tabs-demo.json b/apps/web/public/r/styles/miami/tabs-demo.json
index 40f432e7..4dcae9bd 100644
--- a/apps/web/public/r/styles/miami/tabs-demo.json
+++ b/apps/web/public/r/styles/miami/tabs-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tabs-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tabs-demo.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport { Input } from '~/registry/miami/ui/input'\nimport { Label } from '~/registry/miami/ui/label'\nimport {\n   Tabs,\n   TabsContent,\n   TabsList,\n   TabsTrigger,\n} from '~/registry/miami/ui/tabs'\n\nexport default function TabsDemo() {\n   return (\n      <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n         <TabsList className=\"grid w-full grid-cols-2\">\n            <TabsTrigger value=\"account\">Account</TabsTrigger>\n            <TabsTrigger value=\"password\">Password</TabsTrigger>\n         </TabsList>\n         <TabsContent value=\"account\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Account</CardTitle>\n                  <CardDescription>\n                     Make changes to your account here. Click save when you're done.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"username\">Username</Label>\n                     <Input id=\"username\" defaultValue=\"~peduarte\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save changes</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n         <TabsContent value=\"password\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Password</CardTitle>\n                  <CardDescription>\n                     Change your password here. After saving, you'll be logged out.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"current\">Current password</Label>\n                     <Input id=\"current\" type=\"password\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"new\">New password</Label>\n                     <Input id=\"new\" type=\"password\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save password</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n      </Tabs>\n   )\n}\n",
+      "path": "examples/tabs-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { Label } from \"~/registry/miami/ui/label\"\nimport {\n   Tabs,\n   TabsContent,\n   TabsList,\n   TabsTrigger,\n} from \"~/registry/miami/ui/tabs\"\n\nexport default function TabsDemo() {\n   return (\n      <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n         <TabsList className=\"grid w-full grid-cols-2\">\n            <TabsTrigger value=\"account\">Account</TabsTrigger>\n            <TabsTrigger value=\"password\">Password</TabsTrigger>\n         </TabsList>\n         <TabsContent value=\"account\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Account</CardTitle>\n                  <CardDescription>\n                     Make changes to your account here. Click save when you're\n                     done.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"username\">Username</Label>\n                     <Input id=\"username\" defaultValue=\"~peduarte\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save changes</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n         <TabsContent value=\"password\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Password</CardTitle>\n                  <CardDescription>\n                     Change your password here. After saving, you'll be logged\n                     out.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"current\">Current password</Label>\n                     <Input id=\"current\" type=\"password\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"new\">New password</Label>\n                     <Input id=\"new\" type=\"password\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save password</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n      </Tabs>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/tabs.json b/apps/web/public/r/styles/miami/tabs.json
index d357c99a..113d380f 100644
--- a/apps/web/public/r/styles/miami/tabs.json
+++ b/apps/web/public/r/styles/miami/tabs.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tabs",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-tabs"
   ],
   "files": [
     {
       "path": "ui/tabs.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\n\nimport { ny } from '~/lib/utils'\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.List\n      ref={ref}\n      className={ny(\n         'bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1',\n         className,\n      )}\n      {...props}\n   />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.Trigger\n      ref={ref}\n      className={ny(\n         'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow',\n         className,\n      )}\n      {...props}\n   />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.Content\n      ref={ref}\n      className={ny(\n         'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n         className,\n      )}\n      {...props}\n   />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.List\n      ref={ref}\n      className={ny(\n         \"bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1\",\n         className,\n      )}\n      {...props}\n   />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.Trigger\n      ref={ref}\n      className={ny(\n         \"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow\",\n         className,\n      )}\n      {...props}\n   />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.Content\n      ref={ref}\n      className={ny(\n         \"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n         className,\n      )}\n      {...props}\n   />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/terminal-demo.json b/apps/web/public/r/styles/miami/terminal-demo.json
new file mode 100644
index 00000000..f3493495
--- /dev/null
+++ b/apps/web/public/r/styles/miami/terminal-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "terminal-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/terminal-demo.tsx",
+      "content": "import {\n   AnimatedSpan,\n   Terminal,\n   TypingAnimation,\n} from \"~/registry/miami/ui/terminal\"\n\nexport default function TerminalDemo() {\n   return (\n      <Terminal>\n         <TypingAnimation>&gt; pnpm dlx nyxb@latest init</TypingAnimation>\n\n         <AnimatedSpan delay={1500} className=\"text-green-500\">\n            <span>✔ Preflight checks.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={2000} className=\"text-green-500\">\n            <span>✔ Verifying framework. Found Next.js.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={2500} className=\"text-green-500\">\n            <span>✔ Validating Tailwind CSS.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={3000} className=\"text-green-500\">\n            <span>✔ Validating import alias.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={3500} className=\"text-green-500\">\n            <span>✔ Writing components.json.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={4000} className=\"text-green-500\">\n            <span>✔ Checking registry.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={4500} className=\"text-green-500\">\n            <span>✔ Updating tailwind.config.ts</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={5000} className=\"text-green-500\">\n            <span>✔ Updating app/globals.css</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={5500} className=\"text-green-500\">\n            <span>✔ Installing dependencies.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={6000} className=\"text-blue-500\">\n            <span>ℹ Updated 1 file:</span>\n            <span className=\"pl-2\">- lib/utils.ts</span>\n         </AnimatedSpan>\n\n         <TypingAnimation delay={6500} className=\"text-muted-foreground\">\n            Success! Project initialization completed.\n         </TypingAnimation>\n\n         <TypingAnimation delay={7000} className=\"text-muted-foreground\">\n            You may now add components.\n         </TypingAnimation>\n      </Terminal>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/terminal.json b/apps/web/public/r/styles/miami/terminal.json
new file mode 100644
index 00000000..9d2f04e0
--- /dev/null
+++ b/apps/web/public/r/styles/miami/terminal.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "terminal",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/terminal.tsx",
+      "content": "\"use client\"\n\nimport { type MotionProps, motion } from \"motion/react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface AnimatedSpanProps extends MotionProps {\n   children: React.ReactNode\n   delay?: number\n   className?: string\n}\n\nexport const AnimatedSpan = ({\n   children,\n   delay = 0,\n   className,\n   ...props\n}: AnimatedSpanProps) => (\n   <motion.div\n      initial={{ opacity: 0, y: -5 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.3, delay: delay / 1000 }}\n      className={ny(\"grid text-sm font-normal tracking-tight\", className)}\n      {...props}\n   >\n      {children}\n   </motion.div>\n)\n\ninterface TypingAnimationProps extends MotionProps {\n   children: string\n   className?: string\n   duration?: number\n   delay?: number\n   as?: React.ElementType\n}\n\nexport const TypingAnimation = ({\n   children,\n   className,\n   duration = 60,\n   delay = 0,\n   as: Component = \"span\",\n   ...props\n}: TypingAnimationProps) => {\n   if (typeof children !== \"string\") {\n      throw new Error(\"TypingAnimation: children must be a string. Received:\")\n   }\n\n   const MotionComponent = motion.create(Component, {\n      forwardMotionProps: true,\n   })\n\n   const [displayedText, setDisplayedText] = useState<string>(\"\")\n   const [started, setStarted] = useState(false)\n   const elementRef = useRef<HTMLElement | null>(null)\n\n   useEffect(() => {\n      const startTimeout = setTimeout(() => {\n         setStarted(true)\n      }, delay)\n      return () => clearTimeout(startTimeout)\n   }, [delay])\n\n   useEffect(() => {\n      if (!started) return\n\n      let i = 0\n      const typingEffect = setInterval(() => {\n         if (i < children.length) {\n            setDisplayedText(children.substring(0, i + 1))\n            i++\n         } else {\n            clearInterval(typingEffect)\n         }\n      }, duration)\n\n      return () => {\n         clearInterval(typingEffect)\n      }\n   }, [children, duration, started])\n\n   return (\n      <MotionComponent\n         ref={elementRef}\n         className={ny(\"text-sm font-normal tracking-tight\", className)}\n         {...props}\n      >\n         {displayedText}\n      </MotionComponent>\n   )\n}\n\ninterface TerminalProps {\n   children: React.ReactNode\n   className?: string\n}\n\nexport const Terminal = ({ children, className }: TerminalProps) => {\n   return (\n      <div\n         className={ny(\n            \"z-0 h-full max-h-[400px] w-full max-w-lg rounded-xl border border-border bg-background\",\n            className,\n         )}\n      >\n         <div className=\"flex flex-col gap-y-2 border-b border-border p-4\">\n            <div className=\"flex flex-row gap-x-2\">\n               <div className=\"h-2 w-2 rounded-full bg-red-500\"></div>\n               <div className=\"h-2 w-2 rounded-full bg-yellow-500\"></div>\n               <div className=\"h-2 w-2 rounded-full bg-green-500\"></div>\n            </div>\n         </div>\n         <pre className=\"p-4\">\n            <code className=\"grid gap-y-1 overflow-auto\">{children}</code>\n         </pre>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/text-animate-demo-2.json b/apps/web/public/r/styles/miami/text-animate-demo-2.json
new file mode 100644
index 00000000..4fc0f716
--- /dev/null
+++ b/apps/web/public/r/styles/miami/text-animate-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-2",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-2.tsx",
+      "content": "import { TextAnimate } from \"~/registry/miami/ui/text-animate\"\n\nexport default function TextAnimateDemo2() {\n   return (\n      <TextAnimate animation=\"blurIn\" as=\"h1\">\n         Blur in text\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/text-animate-demo-3.json b/apps/web/public/r/styles/miami/text-animate-demo-3.json
new file mode 100644
index 00000000..668408da
--- /dev/null
+++ b/apps/web/public/r/styles/miami/text-animate-demo-3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-3",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-3.tsx",
+      "content": "import { TextAnimate } from \"~/registry/miami/ui/text-animate\"\n\nexport default function TextAnimateDemo3() {\n   return (\n      <TextAnimate animation=\"slideUp\" by=\"word\">\n         Slide up by word\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/text-animate-demo-4.json b/apps/web/public/r/styles/miami/text-animate-demo-4.json
new file mode 100644
index 00000000..fbcf632c
--- /dev/null
+++ b/apps/web/public/r/styles/miami/text-animate-demo-4.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-4",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-4.tsx",
+      "content": "import { TextAnimate } from \"~/registry/miami/ui/text-animate\"\n\nexport default function TextAnimateDemo4() {\n   return (\n      <TextAnimate animation=\"scaleUp\" by=\"text\">\n         Scale up by text\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/text-animate-demo-5.json b/apps/web/public/r/styles/miami/text-animate-demo-5.json
new file mode 100644
index 00000000..6a20011c
--- /dev/null
+++ b/apps/web/public/r/styles/miami/text-animate-demo-5.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-5",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-5.tsx",
+      "content": "import { TextAnimate } from \"~/registry/miami/ui/text-animate\"\n\nexport default function TextAnimateDemo5() {\n   return (\n      <TextAnimate animation=\"fadeIn\" by=\"line\" as=\"p\">\n         {`Fade in by line as paragraph\\n\\nFade in by line as paragraph\\n\\nFade in by line as paragraph`}\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/text-animate-demo-6.json b/apps/web/public/r/styles/miami/text-animate-demo-6.json
new file mode 100644
index 00000000..38b95f40
--- /dev/null
+++ b/apps/web/public/r/styles/miami/text-animate-demo-6.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-6",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-6.tsx",
+      "content": "import { TextAnimate } from \"~/registry/miami/ui/text-animate\"\n\nexport default function TextAnimateDemo6() {\n   return (\n      <TextAnimate animation=\"slideLeft\" by=\"character\">\n         Slide left by character\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/text-animate-demo.json b/apps/web/public/r/styles/miami/text-animate-demo.json
new file mode 100644
index 00000000..7149907d
--- /dev/null
+++ b/apps/web/public/r/styles/miami/text-animate-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo.tsx",
+      "content": "import { TextAnimate } from \"~/registry/miami/ui/text-animate\"\n\nexport default function TextAnimateDemo() {\n   return (\n      <TextAnimate animation=\"blurInUp\" by=\"character\">\n         Blur in by character\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/text-animate.json b/apps/web/public/r/styles/miami/text-animate.json
new file mode 100644
index 00000000..8e3f27d9
--- /dev/null
+++ b/apps/web/public/r/styles/miami/text-animate.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/text-animate.tsx",
+      "content": "\"use client\"\n\nimport {\n   AnimatePresence,\n   type MotionProps,\n   type Variants,\n   motion,\n} from \"motion/react\"\nimport type { ElementType } from \"react\"\nimport { ny } from \"~/registry/miami/lib/utils\"\n\ntype AnimationType = \"text\" | \"word\" | \"character\" | \"line\"\ntype AnimationVariant =\n   | \"fadeIn\"\n   | \"blurIn\"\n   | \"blurInUp\"\n   | \"blurInDown\"\n   | \"slideUp\"\n   | \"slideDown\"\n   | \"slideLeft\"\n   | \"slideRight\"\n   | \"scaleUp\"\n   | \"scaleDown\"\n\ninterface TextAnimateProps extends MotionProps {\n   /**\n    * The text content to animate\n    */\n   children: string\n   /**\n    * The class name to be applied to the component\n    */\n   className?: string\n   /**\n    * The class name to be applied to each segment\n    */\n   segmentClassName?: string\n   /**\n    * The delay before the animation starts\n    */\n   delay?: number\n   /**\n    * The duration of the animation\n    */\n   duration?: number\n   /**\n    * Custom motion variants for the animation\n    */\n   variants?: Variants\n   /**\n    * The element type to render\n    */\n   as?: ElementType\n   /**\n    * How to split the text (\"text\", \"word\", \"character\")\n    */\n   by?: AnimationType\n   /**\n    * Whether to start animation when component enters viewport\n    */\n   startOnView?: boolean\n   /**\n    * Whether to animate only once\n    */\n   once?: boolean\n   /**\n    * The animation preset to use\n    */\n   animation?: AnimationVariant\n}\n\nconst staggerTimings: Record<AnimationType, number> = {\n   text: 0.06,\n   word: 0.05,\n   character: 0.03,\n   line: 0.06,\n}\n\nconst defaultContainerVariants = {\n   hidden: { opacity: 1 },\n   show: {\n      opacity: 1,\n      transition: {\n         staggerChildren: 0.05,\n      },\n   },\n   exit: {\n      opacity: 0,\n      transition: {\n         staggerChildren: 0.05,\n         staggerDirection: -1,\n      },\n   },\n}\n\nconst defaultItemVariants: Variants = {\n   hidden: { opacity: 0 },\n   show: {\n      opacity: 1,\n   },\n   exit: {\n      opacity: 0,\n   },\n}\n\nconst defaultItemAnimationVariants: Record<\n   AnimationVariant,\n   { container: Variants; item: Variants }\n> = {\n   fadeIn: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, y: 20 },\n         show: (delay: number) => ({\n            opacity: 1,\n            y: 0,\n            transition: {\n               delay,\n               duration: 0.3,\n            },\n         }),\n         exit: {\n            opacity: 0,\n            y: 20,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   blurIn: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, filter: \"blur(10px)\" },\n         show: (i: number) => ({\n            opacity: 1,\n            filter: \"blur(0px)\",\n            transition: {\n               delay: i * 0.1,\n               duration: 0.3,\n            },\n         }),\n         exit: {\n            opacity: 0,\n            filter: \"blur(10px)\",\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   blurInUp: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, filter: \"blur(10px)\", y: 20 },\n         show: (delay: number) => ({\n            opacity: 1,\n            filter: \"blur(0px)\",\n            y: 0,\n            transition: {\n               y: { duration: 0.3 },\n               opacity: { duration: 0.4 },\n               filter: { duration: 0.3 },\n            },\n         }),\n         exit: {\n            opacity: 0,\n            filter: \"blur(10px)\",\n            y: 20,\n            transition: {\n               y: { duration: 0.3 },\n               opacity: { duration: 0.4 },\n               filter: { duration: 0.3 },\n            },\n         },\n      },\n   },\n   blurInDown: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, filter: \"blur(10px)\", y: -20 },\n         show: (delay: number) => ({\n            opacity: 1,\n            filter: \"blur(0px)\",\n            y: 0,\n            transition: {\n               y: { duration: 0.3 },\n               opacity: { duration: 0.4 },\n               filter: { duration: 0.3 },\n            },\n         }),\n      },\n   },\n   slideUp: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { y: 20, opacity: 0 },\n         show: (delay: number) => ({\n            y: 0,\n            opacity: 1,\n            transition: {\n               delay,\n               duration: 0.3,\n            },\n         }),\n         exit: {\n            y: -20,\n            opacity: 0,\n            transition: {\n               duration: 0.3,\n            },\n         },\n      },\n   },\n   slideDown: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { y: -20, opacity: 0 },\n         show: {\n            y: 0,\n            opacity: 1,\n            transition: { duration: 0.3 },\n         },\n         exit: {\n            y: 20,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   slideLeft: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { x: 20, opacity: 0 },\n         show: {\n            x: 0,\n            opacity: 1,\n            transition: { duration: 0.3 },\n         },\n         exit: {\n            x: -20,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   slideRight: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { x: -20, opacity: 0 },\n         show: {\n            x: 0,\n            opacity: 1,\n            transition: { duration: 0.3 },\n         },\n         exit: {\n            x: 20,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   scaleUp: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { scale: 0.5, opacity: 0 },\n         show: {\n            scale: 1,\n            opacity: 1,\n            transition: {\n               duration: 0.3,\n               scale: {\n                  type: \"spring\",\n                  damping: 15,\n                  stiffness: 300,\n               },\n            },\n         },\n         exit: {\n            scale: 0.5,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   scaleDown: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { scale: 1.5, opacity: 0 },\n         show: (delay: number) => ({\n            scale: 1,\n            opacity: 1,\n            transition: {\n               delay,\n               duration: 0.3,\n               scale: {\n                  type: \"spring\",\n                  damping: 15,\n                  stiffness: 300,\n               },\n            },\n         }),\n         exit: {\n            scale: 1.5,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n}\n\nexport function TextAnimate({\n   children,\n   delay = 0,\n   duration = 0.3,\n   variants,\n   className,\n   segmentClassName,\n   as: Component = \"p\",\n   startOnView = true,\n   once = false,\n   by = \"word\",\n   animation = \"fadeIn\",\n   ...props\n}: TextAnimateProps) {\n   const MotionComponent = motion.create(Component)\n\n   // Use provided variants or default variants based on animation type\n   const finalVariants = animation\n      ? {\n           container: {\n              ...defaultItemAnimationVariants[animation].container,\n              show: {\n                 ...defaultItemAnimationVariants[animation].container.show,\n                 transition: {\n                    staggerChildren: staggerTimings[by],\n                 },\n              },\n              exit: {\n                 ...defaultItemAnimationVariants[animation].container.exit,\n                 transition: {\n                    staggerChildren: staggerTimings[by],\n                    staggerDirection: -1,\n                 },\n              },\n           },\n           item: defaultItemAnimationVariants[animation].item,\n        }\n      : { container: defaultContainerVariants, item: defaultItemVariants }\n\n   let segments: string[] = []\n   switch (by) {\n      case \"word\":\n         segments = children.split(/(\\s+)/)\n         break\n      case \"character\":\n         segments = children.split(\"\")\n         break\n      case \"line\":\n         segments = children.split(\"\\n\")\n         break\n      case \"text\":\n      default:\n         segments = [children]\n         break\n   }\n\n   return (\n      <AnimatePresence mode=\"popLayout\">\n         <MotionComponent\n            variants={finalVariants.container}\n            initial=\"hidden\"\n            whileInView={startOnView ? \"show\" : undefined}\n            animate={startOnView ? undefined : \"show\"}\n            exit=\"exit\"\n            className={ny(\"whitespace-pre-wrap\", className)}\n            {...props}\n         >\n            {segments.map((segment, i) => (\n               <motion.span\n                  key={`${by}-${segment}-${i}`}\n                  variants={finalVariants.item}\n                  custom={i * staggerTimings[by]}\n                  className={ny(\n                     by === \"line\" ? \"block\" : \"inline-block whitespace-pre\",\n                     segmentClassName,\n                  )}\n               >\n                  {segment}\n               </motion.span>\n            ))}\n         </MotionComponent>\n      </AnimatePresence>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/text-reveal-demo.json b/apps/web/public/r/styles/miami/text-reveal-demo.json
index 1da9a54d..b52356b6 100644
--- a/apps/web/public/r/styles/miami/text-reveal-demo.json
+++ b/apps/web/public/r/styles/miami/text-reveal-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "text-reveal-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/text-reveal-demo.tsx",
-      "content": "import TextReveal from '~/registry/miami/ui/text-reveal'\n\nexport default async function TextRevealDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center rounded-lg border bg-white dark:bg-black\">\n         <TextReveal text=\"Nyxb UI will change the way you design.\" />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/text-reveal-demo.tsx",
+      "content": "import TextReveal from \"~/registry/miami/ui/text-reveal\"\n\nexport default async function TextRevealDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center rounded-lg border bg-white dark:bg-black\">\n         <TextReveal text=\"Nyxb UI will change the way you design.\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/text-reveal.json b/apps/web/public/r/styles/miami/text-reveal.json
index 6a1e0032..1ced3967 100644
--- a/apps/web/public/r/styles/miami/text-reveal.json
+++ b/apps/web/public/r/styles/miami/text-reveal.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "text-reveal",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/text-reveal.tsx",
-      "content": "'use client'\n\nimport { motion, useScroll, useTransform } from 'framer-motion'\nimport type { FC, ReactNode } from 'react'\nimport { useRef } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface TextRevealByWordProps {\n   text: string\n   className?: string\n}\n\nexport const TextRevealByWord: FC<TextRevealByWordProps> = ({\n   text,\n   className,\n}) => {\n   const targetRef = useRef<HTMLDivElement | null>(null)\n\n   const { scrollYProgress } = useScroll({\n      target: targetRef,\n   })\n   const words = text.split(' ')\n\n   return (\n      <div ref={targetRef} className={ny('relative z-0 h-[200vh]', className)}>\n         <div className=\"sticky top-0 mx-auto flex h-1/2 max-w-4xl items-center bg-transparent px-4 py-20\">\n            <p\n               ref={targetRef}\n               className=\"flex flex-wrap p-5 text-2xl font-bold text-black/20 md:p-8 md:text-3xl lg:p-10 lg:text-4xl xl:text-5xl dark:text-white/20\"\n            >\n               {words.map((word, i) => {\n                  const start = i / words.length\n                  const end = start + 1 / words.length\n                  return (\n                     <Word key={i} progress={scrollYProgress} range={[start, end]}>\n                        {word}\n                     </Word>\n                  )\n               })}\n            </p>\n         </div>\n      </div>\n   )\n}\n\ninterface WordProps {\n   children: ReactNode\n   progress: any\n   range: [number, number]\n}\n\nconst Word: FC<WordProps> = ({ children, progress, range }) => {\n   const opacity = useTransform(progress, range, [0, 1])\n   return (\n      <span className=\"xl:lg-3 relative mx-1 lg:mx-2.5\">\n         <span className=\"absolute opacity-30\">{children}</span>\n         <motion.span style={{ opacity }} className=\"text-black dark:text-white\">\n            {children}\n         </motion.span>\n      </span>\n   )\n}\n\nexport default TextRevealByWord\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { motion, useScroll, useTransform } from \"framer-motion\"\nimport type { FC, ReactNode } from \"react\"\nimport { useRef } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface TextRevealByWordProps {\n   text: string\n   className?: string\n}\n\nexport const TextRevealByWord: FC<TextRevealByWordProps> = ({\n   text,\n   className,\n}) => {\n   const targetRef = useRef<HTMLDivElement | null>(null)\n\n   const { scrollYProgress } = useScroll({\n      target: targetRef,\n   })\n   const words = text.split(\" \")\n\n   return (\n      <div ref={targetRef} className={ny(\"relative z-0 h-[200vh]\", className)}>\n         <div className=\"sticky top-0 mx-auto flex h-1/2 max-w-4xl items-center bg-transparent px-4 py-20\">\n            <p\n               ref={targetRef}\n               className=\"flex flex-wrap p-5 text-2xl font-bold text-black/20 md:p-8 md:text-3xl lg:p-10 lg:text-4xl xl:text-5xl dark:text-white/20\"\n            >\n               {words.map((word, i) => {\n                  const start = i / words.length\n                  const end = start + 1 / words.length\n                  return (\n                     <Word\n                        key={i}\n                        progress={scrollYProgress}\n                        range={[start, end]}\n                     >\n                        {word}\n                     </Word>\n                  )\n               })}\n            </p>\n         </div>\n      </div>\n   )\n}\n\ninterface WordProps {\n   children: ReactNode\n   progress: any\n   range: [number, number]\n}\n\nconst Word: FC<WordProps> = ({ children, progress, range }) => {\n   const opacity = useTransform(progress, range, [0, 1])\n   return (\n      <span className=\"xl:lg-3 relative mx-1 lg:mx-2.5\">\n         <span className=\"absolute opacity-30\">{children}</span>\n         <motion.span\n            style={{ opacity }}\n            className=\"text-black dark:text-white\"\n         >\n            {children}\n         </motion.span>\n      </span>\n   )\n}\n\nexport default TextRevealByWord\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/textarea-demo.json b/apps/web/public/r/styles/miami/textarea-demo.json
index f589e8a3..bae9cfac 100644
--- a/apps/web/public/r/styles/miami/textarea-demo.json
+++ b/apps/web/public/r/styles/miami/textarea-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/textarea-demo.tsx",
-      "content": "import { Textarea } from '~/registry/miami/ui/textarea'\n\nexport default function TextareaDemo() {\n   return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "path": "examples/textarea-demo.tsx",
+      "content": "import { Textarea } from \"~/registry/miami/ui/textarea\"\n\nexport default function TextareaDemo() {\n   return <Textarea placeholder=\"Type your message here.\" />\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/textarea-disabled.json b/apps/web/public/r/styles/miami/textarea-disabled.json
index a5293bd1..747a1e5a 100644
--- a/apps/web/public/r/styles/miami/textarea-disabled.json
+++ b/apps/web/public/r/styles/miami/textarea-disabled.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/textarea-disabled.tsx",
-      "content": "import { Textarea } from '~/registry/miami/ui/textarea'\n\nexport default function TextareaDisabled() {\n   return <Textarea placeholder=\"Type your message here.\" disabled />\n}\n",
+      "path": "examples/textarea-disabled.tsx",
+      "content": "import { Textarea } from \"~/registry/miami/ui/textarea\"\n\nexport default function TextareaDisabled() {\n   return <Textarea placeholder=\"Type your message here.\" disabled />\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/textarea-form.json b/apps/web/public/r/styles/miami/textarea-form.json
index d7e4b014..a6d6cf0c 100644
--- a/apps/web/public/r/styles/miami/textarea-form.json
+++ b/apps/web/public/r/styles/miami/textarea-form.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea-form",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/textarea-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from '~/registry/miami/ui/form'\nimport { Textarea } from '~/registry/miami/ui/textarea'\nimport { toast } from '~/registry/miami/ui/use-toast'\n\nconst FormSchema = z.object({\n   bio: z\n      .string()\n      .min(10, {\n         message: 'Bio must be at least 10 characters.',\n      })\n      .max(160, {\n         message: 'Bio must not be longer than 30 characters.',\n      }),\n})\n\nexport default function TextareaForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: 'You submitted the following values:',\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"bio\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Bio</FormLabel>\n                     <FormControl>\n                        <Textarea\n                           placeholder=\"Tell us a little bit about yourself\"\n                           className=\"resize-none\"\n                           {...field}\n                        />\n                     </FormControl>\n                     <FormDescription>\n                        You can\n                        {' '}\n                        <span>@mention</span>\n                        {' '}\n                        other users and organizations.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "path": "examples/textarea-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"~/registry/miami/ui/form\"\nimport { Textarea } from \"~/registry/miami/ui/textarea\"\nimport { toast } from \"~/registry/miami/ui/use-toast\"\n\nconst FormSchema = z.object({\n   bio: z\n      .string()\n      .min(10, {\n         message: \"Bio must be at least 10 characters.\",\n      })\n      .max(160, {\n         message: \"Bio must not be longer than 30 characters.\",\n      }),\n})\n\nexport default function TextareaForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"bio\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Bio</FormLabel>\n                     <FormControl>\n                        <Textarea\n                           placeholder=\"Tell us a little bit about yourself\"\n                           className=\"resize-none\"\n                           {...field}\n                        />\n                     </FormControl>\n                     <FormDescription>\n                        You can <span>@mention</span> other users and\n                        organizations.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/textarea-with-button.json b/apps/web/public/r/styles/miami/textarea-with-button.json
index 510a0da8..7d1b45f0 100644
--- a/apps/web/public/r/styles/miami/textarea-with-button.json
+++ b/apps/web/public/r/styles/miami/textarea-with-button.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea-with-button",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/textarea-with-button.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport { Textarea } from '~/registry/miami/ui/textarea'\n\nexport default function TextareaWithButton() {\n   return (\n      <div className=\"grid w-full gap-2\">\n         <Textarea placeholder=\"Type your message here.\" />\n         <Button>Send message</Button>\n      </div>\n   )\n}\n",
+      "path": "examples/textarea-with-button.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport { Textarea } from \"~/registry/miami/ui/textarea\"\n\nexport default function TextareaWithButton() {\n   return (\n      <div className=\"grid w-full gap-2\">\n         <Textarea placeholder=\"Type your message here.\" />\n         <Button>Send message</Button>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/textarea-with-label.json b/apps/web/public/r/styles/miami/textarea-with-label.json
index 689649c7..08004218 100644
--- a/apps/web/public/r/styles/miami/textarea-with-label.json
+++ b/apps/web/public/r/styles/miami/textarea-with-label.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea-with-label",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/textarea-with-label.tsx",
-      "content": "import { Label } from '~/registry/miami/ui/label'\nimport { Textarea } from '~/registry/miami/ui/textarea'\n\nexport default function TextareaWithLabel() {\n   return (\n      <div className=\"grid w-full gap-1.5\">\n         <Label htmlFor=\"message\">Your message</Label>\n         <Textarea placeholder=\"Type your message here.\" id=\"message\" />\n      </div>\n   )\n}\n",
+      "path": "examples/textarea-with-label.tsx",
+      "content": "import { Label } from \"~/registry/miami/ui/label\"\nimport { Textarea } from \"~/registry/miami/ui/textarea\"\n\nexport default function TextareaWithLabel() {\n   return (\n      <div className=\"grid w-full gap-1.5\">\n         <Label htmlFor=\"message\">Your message</Label>\n         <Textarea placeholder=\"Type your message here.\" id=\"message\" />\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/textarea-with-text.json b/apps/web/public/r/styles/miami/textarea-with-text.json
index 0d3c5445..5b4730e6 100644
--- a/apps/web/public/r/styles/miami/textarea-with-text.json
+++ b/apps/web/public/r/styles/miami/textarea-with-text.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea-with-text",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/textarea-with-text.tsx",
-      "content": "import { Label } from '~/registry/miami/ui/label'\nimport { Textarea } from '~/registry/miami/ui/textarea'\n\nexport default function TextareaWithText() {\n   return (\n      <div className=\"grid w-full gap-1.5\">\n         <Label htmlFor=\"message-2\">Your Message</Label>\n         <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n         <p className=\"text-muted-foreground text-sm\">\n            Your message will be copied to the support team.\n         </p>\n      </div>\n   )\n}\n",
+      "path": "examples/textarea-with-text.tsx",
+      "content": "import { Label } from \"~/registry/miami/ui/label\"\nimport { Textarea } from \"~/registry/miami/ui/textarea\"\n\nexport default function TextareaWithText() {\n   return (\n      <div className=\"grid w-full gap-1.5\">\n         <Label htmlFor=\"message-2\">Your Message</Label>\n         <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n         <p className=\"text-muted-foreground text-sm\">\n            Your message will be copied to the support team.\n         </p>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/textarea.json b/apps/web/public/r/styles/miami/textarea.json
index 896db439..c90fa6e3 100644
--- a/apps/web/public/r/styles/miami/textarea.json
+++ b/apps/web/public/r/styles/miami/textarea.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "textarea",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/textarea.tsx",
-      "content": "import * as React from 'react'\n\nimport { ny } from '~/lib/utils'\n\nexport interface TextareaProps\n   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n   ({ className, ...props }, ref) => {\n      return (\n         <textarea\n            className={ny(\n               'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nTextarea.displayName = 'Textarea'\n\nexport { Textarea }\n",
-      "type": "registry:component",
+      "content": "import * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nexport interface TextareaProps\n   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n   ({ className, ...props }, ref) => {\n      return (\n         <textarea\n            className={ny(\n               \"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/theme-daylight.json b/apps/web/public/r/styles/miami/theme-daylight.json
index a6f4f110..e1d36769 100644
--- a/apps/web/public/r/styles/miami/theme-daylight.json
+++ b/apps/web/public/r/styles/miami/theme-daylight.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "theme-daylight",
   "type": "registry:theme",
+  "author": "nyxbui (https://nyxbui.design)",
   "cssVars": {
     "light": {
       "background": "36 39% 88%",
diff --git a/apps/web/public/r/styles/miami/theme-emerald.json b/apps/web/public/r/styles/miami/theme-emerald.json
index daae3354..873e81aa 100644
--- a/apps/web/public/r/styles/miami/theme-emerald.json
+++ b/apps/web/public/r/styles/miami/theme-emerald.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "theme-emerald",
   "type": "registry:theme",
+  "author": "nyxbui (https://nyxbui.design)",
   "cssVars": {
     "light": {
       "background": "0 0% 100%",
diff --git a/apps/web/public/r/styles/miami/theme-midnight.json b/apps/web/public/r/styles/miami/theme-midnight.json
index af39a8a0..389550d9 100644
--- a/apps/web/public/r/styles/miami/theme-midnight.json
+++ b/apps/web/public/r/styles/miami/theme-midnight.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "theme-midnight",
   "type": "registry:theme",
+  "author": "nyxbui (https://nyxbui.design)",
   "cssVars": {
     "light": {
       "background": "240 5% 6%",
diff --git a/apps/web/public/r/styles/miami/timeline-alternate.json b/apps/web/public/r/styles/miami/timeline-alternate.json
index 5b72a97a..329c1659 100644
--- a/apps/web/public/r/styles/miami/timeline-alternate.json
+++ b/apps/web/public/r/styles/miami/timeline-alternate.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "timeline-alternate",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "timeline"
   ],
   "files": [
     {
-      "path": "example/timeline-alternate.tsx",
-      "content": "import React from 'react'\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from '~/registry/miami/ui/timeline'\n\nexport default function TimelineAlternate() {\n   return (\n      <Timeline positions=\"center\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software project\n               thoroughly. This involves defining the project scope, setting clear\n               objectives, and identifying the target audience. Additionally,\n               creating a timeline and allocating resources appropriately will\n               contribute to a successful development process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that outlines\n               the structure, user interface, and functionality of your application.\n               Consider user experience (UX) principles, wireframing, and prototyping\n               to ensure an intuitive and visually appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual code.\n               Choose a programming language and framework that aligns with your\n               project requirements. Follow best practices, such as modular and\n               reusable code, to enhance maintainability and scalability. Regularly\n               test your code to identify and fix any bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and reliability of\n               your software. Implement different testing methodologies, including\n               unit testing, integration testing, and user acceptance testing. This\n               helps identify and rectify any issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to deploy\n               it. Consider the deployment environment, whether it's on-premises or\n               in the cloud. Ensure proper documentation and provide clear\n               instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading>Done!</TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/timeline-alternate.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"~/registry/miami/ui/timeline\"\n\nexport default function TimelineAlternate() {\n   return (\n      <Timeline positions=\"center\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading>Done!</TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/timeline-demo.json b/apps/web/public/r/styles/miami/timeline-demo.json
index d2cf7e9c..59db6162 100644
--- a/apps/web/public/r/styles/miami/timeline-demo.json
+++ b/apps/web/public/r/styles/miami/timeline-demo.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "timeline-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "timeline"
   ],
   "files": [
     {
-      "path": "example/timeline-demo.tsx",
-      "content": "import React from 'react'\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from '~/registry/miami/ui/timeline'\n\nexport default function TimelineDemo() {\n   return (\n      <Timeline>\n         <TimelineItem status=\"done\">\n            <TimelineHeading>Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Before diving into coding, it is crucial to plan your software project\n               thoroughly. This involves defining the project scope, setting clear\n               objectives, and identifying the target audience. Additionally,\n               creating a timeline and allocating resources appropriately will\n               contribute to a successful development process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that outlines\n               the structure, user interface, and functionality of your application.\n               Consider user experience (UX) principles, wireframing, and prototyping\n               to ensure an intuitive and visually appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading>Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent>\n               The coding phase involves translating your design into actual code.\n               Choose a programming language and framework that aligns with your\n               project requirements. Follow best practices, such as modular and\n               reusable code, to enhance maintainability and scalability. Regularly\n               test your code to identify and fix any bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and reliability of\n               your software. Implement different testing methodologies, including\n               unit testing, integration testing, and user acceptance testing. This\n               helps identify and rectify any issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Once your software has passed rigorous testing, it's time to deploy\n               it. Consider the deployment environment, whether it's on-premises or\n               in the cloud. Ensure proper documentation and provide clear\n               instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Done!</TimelineHeading>\n            <TimelineDot />\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/timeline-demo.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"~/registry/miami/ui/timeline\"\n\nexport default function TimelineDemo() {\n   return (\n      <Timeline>\n         <TimelineItem status=\"done\">\n            <TimelineHeading>Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading>Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent>\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Done!</TimelineHeading>\n            <TimelineDot />\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/timeline-labels.json b/apps/web/public/r/styles/miami/timeline-labels.json
index 18e8683a..a97a330c 100644
--- a/apps/web/public/r/styles/miami/timeline-labels.json
+++ b/apps/web/public/r/styles/miami/timeline-labels.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "timeline-labels",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "timeline"
   ],
   "files": [
     {
-      "path": "example/timeline-labels.tsx",
-      "content": "import React from 'react'\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from '~/registry/miami/ui/timeline'\n\nexport default function TimelineAlternate() {\n   return (\n      <Timeline positions=\"center\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Done (05/04/2024)\n            </TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software project\n               thoroughly. This involves defining the project scope, setting clear\n               objectives, and identifying the target audience. Additionally,\n               creating a timeline and allocating resources appropriately will\n               contribute to a successful development process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Failed (05/04/2024)\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that outlines\n               the structure, user interface, and functionality of your application.\n               Consider user experience (UX) principles, wireframing, and prototyping\n               to ensure an intuitive and visually appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Current step\n            </TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual code.\n               Choose a programming language and framework that aligns with your\n               project requirements. Follow best practices, such as modular and\n               reusable code, to enhance maintainability and scalability. Regularly\n               test your code to identify and fix any bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Next step\n            </TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and reliability of\n               your software. Implement different testing methodologies, including\n               unit testing, integration testing, and user acceptance testing. This\n               helps identify and rectify any issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Deadline (05/10/2024)\n            </TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to deploy\n               it. Consider the deployment environment, whether it's on-premises or\n               in the cloud. Ensure proper documentation and provide clear\n               instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading>Done!</TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Here everything ends\n            </TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/timeline-labels.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"~/registry/miami/ui/timeline\"\n\nexport default function TimelineAlternate() {\n   return (\n      <Timeline positions=\"center\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Done (05/04/2024)\n            </TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Failed (05/04/2024)\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Current step\n            </TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Next step\n            </TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Deadline (05/10/2024)\n            </TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading>Done!</TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Here everything ends\n            </TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/timeline-right.json b/apps/web/public/r/styles/miami/timeline-right.json
index 2a7b42f2..3ef3112e 100644
--- a/apps/web/public/r/styles/miami/timeline-right.json
+++ b/apps/web/public/r/styles/miami/timeline-right.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "timeline-right",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "timeline"
   ],
   "files": [
     {
-      "path": "example/timeline-right.tsx",
-      "content": "import React from 'react'\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from '~/registry/miami/ui/timeline'\n\nexport default function TimelineRight() {\n   return (\n      <Timeline positions=\"right\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software project\n               thoroughly. This involves defining the project scope, setting clear\n               objectives, and identifying the target audience. Additionally,\n               creating a timeline and allocating resources appropriately will\n               contribute to a successful development process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Designing your software involves creating a blueprint that outlines\n               the structure, user interface, and functionality of your application.\n               Consider user experience (UX) principles, wireframing, and prototyping\n               to ensure an intuitive and visually appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual code.\n               Choose a programming language and framework that aligns with your\n               project requirements. Follow best practices, such as modular and\n               reusable code, to enhance maintainability and scalability. Regularly\n               test your code to identify and fix any bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Thorough testing is essential to ensure the quality and reliability of\n               your software. Implement different testing methodologies, including\n               unit testing, integration testing, and user acceptance testing. This\n               helps identify and rectify any issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to deploy\n               it. Consider the deployment environment, whether it's on-premises or\n               in the cloud. Ensure proper documentation and provide clear\n               instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading side=\"left\">Done!</TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/timeline-right.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"~/registry/miami/ui/timeline\"\n\nexport default function TimelineRight() {\n   return (\n      <Timeline positions=\"right\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading side=\"left\">Done!</TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/timeline.json b/apps/web/public/r/styles/miami/timeline.json
index 73d37d2b..0ecf4b76 100644
--- a/apps/web/public/r/styles/miami/timeline.json
+++ b/apps/web/public/r/styles/miami/timeline.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "timeline",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "lucide-react"
   ],
   "files": [
     {
       "path": "ui/timeline.tsx",
-      "content": "import React from 'react'\nimport { CheckIcon, Cross1Icon } from '@radix-ui/react-icons'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst timelineVariants = cva('grid', {\n   variants: {\n      positions: {\n         left: '[&>li]:grid-cols-[0_min-content_1fr]',\n         right: '[&>li]:grid-cols-[1fr_min-content]',\n         center: '[&>li]:grid-cols-[1fr_min-content_1fr]',\n      },\n   },\n   defaultVariants: {\n      positions: 'left',\n   },\n})\n\ninterface TimelineProps\n   extends React.HTMLAttributes<HTMLUListElement>,\n   VariantProps<typeof timelineVariants> {}\n\nconst Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(\n   ({ children, className, positions, ...props }, ref) => {\n      return (\n         <ul\n            className={ny(timelineVariants({ positions }), className)}\n            ref={ref}\n            {...props}\n         >\n            {children}\n         </ul>\n      )\n   },\n)\nTimeline.displayName = 'Timeline'\n\nconst timelineItemVariants = cva('grid items-center gap-x-2', {\n   variants: {\n      status: {\n         done: 'text-primary',\n         default: 'text-muted-foreground',\n      },\n   },\n   defaultVariants: {\n      status: 'default',\n   },\n})\n\ninterface TimelineItemProps\n   extends React.HTMLAttributes<HTMLLIElement>,\n   VariantProps<typeof timelineItemVariants> {}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n   ({ className, status, ...props }, ref) => (\n      <li\n         className={ny(timelineItemVariants({ status }), className)}\n         ref={ref}\n         {...props}\n      />\n   ),\n)\nTimelineItem.displayName = 'TimelineItem'\n\nconst timelineDotVariants = cva(\n   'col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current',\n   {\n      variants: {\n         status: {\n            default: '[&>*]:hidden',\n            current:\n          '[&>*:not(.radix-circle)]:hidden [&>.radix-circle]:bg-current [&>.radix-circle]:fill-current',\n            done: 'bg-primary [&>*:not(.radix-check)]:hidden [&>.radix-check]:text-background',\n            error:\n          'border-destructive bg-destructive [&>*:not(.radix-cross)]:hidden [&>.radix-cross]:text-background',\n            custom: '[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block',\n         },\n      },\n      defaultVariants: {\n         status: 'default',\n      },\n   },\n)\n\ninterface TimelineDotProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n   VariantProps<typeof timelineDotVariants> {\n   customIcon?: React.ReactNode\n}\n\nconst TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(\n   ({ className, status, customIcon, ...props }, ref) => (\n      <div\n         role=\"status\"\n         className={ny('timeline-dot', timelineDotVariants({ status }), className)}\n         ref={ref}\n         {...props}\n      >\n         <div className=\"radix-circle size-2.5 rounded-full\" />\n         <CheckIcon className=\"radix-check size-3\" />\n         <Cross1Icon className=\"radix-cross size-2.5\" />\n         {customIcon}\n      </div>\n   ),\n)\nTimelineDot.displayName = 'TimelineDot'\n\nconst timelineContentVariants = cva(\n   'row-start-2 row-end-2 pb-8 text-muted-foreground',\n   {\n      variants: {\n         side: {\n            right: 'col-start-3 col-end-4 mr-auto text-left',\n            left: 'col-start-1 col-end-2 ml-auto text-right',\n         },\n      },\n      defaultVariants: {\n         side: 'right',\n      },\n   },\n)\n\ninterface TimelineConentProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n   VariantProps<typeof timelineContentVariants> {}\n\nconst TimelineContent = React.forwardRef<HTMLDivElement, TimelineConentProps>(\n   ({ className, side, ...props }, ref) => (\n      <div\n         className={ny(timelineContentVariants({ side }), className)}\n         ref={ref}\n         {...props}\n      />\n   ),\n)\nTimelineContent.displayName = 'TimelineContent'\n\nconst timelineHeadingVariants = cva(\n   'row-start-1 row-end-1 line-clamp-1 max-w-full truncate',\n   {\n      variants: {\n         side: {\n            right: 'col-start-3 col-end-4 mr-auto text-left',\n            left: 'col-start-1 col-end-2 ml-auto text-right',\n         },\n         variant: {\n            primary: 'text-base font-medium text-primary',\n            secondary: 'text-sm font-light text-muted-foreground',\n         },\n      },\n      defaultVariants: {\n         side: 'right',\n         variant: 'primary',\n      },\n   },\n)\n\ninterface TimelineHeadingProps\n   extends React.HTMLAttributes<HTMLParagraphElement>,\n   VariantProps<typeof timelineHeadingVariants> {}\n\nconst TimelineHeading = React.forwardRef<\n   HTMLParagraphElement,\n   TimelineHeadingProps\n>(({ className, side, variant, ...props }, ref) => (\n   <p\n      role=\"heading\"\n      aria-level={variant === 'primary' ? 2 : 3}\n      className={ny(timelineHeadingVariants({ side, variant }), className)}\n      ref={ref}\n      {...props}\n   />\n))\nTimelineHeading.displayName = 'TimelineHeading'\n\ninterface TimelineLineProps extends React.HTMLAttributes<HTMLHRElement> {\n   done?: boolean\n}\n\nconst TimelineLine = React.forwardRef<HTMLHRElement, TimelineLineProps>(\n   ({ className, done = false, ...props }, ref) => {\n      return (\n         <hr\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            className={ny(\n               'col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full',\n               done ? 'bg-primary' : 'bg-muted',\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nTimelineLine.displayName = 'TimelineLine'\n\nexport {\n   Timeline,\n   TimelineDot,\n   TimelineItem,\n   TimelineContent,\n   TimelineHeading,\n   TimelineLine,\n}\n",
-      "type": "registry:component",
+      "content": "import { CheckIcon, Cross1Icon } from \"@radix-ui/react-icons\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst timelineVariants = cva(\"grid\", {\n   variants: {\n      positions: {\n         left: \"[&>li]:grid-cols-[0_min-content_1fr]\",\n         right: \"[&>li]:grid-cols-[1fr_min-content]\",\n         center: \"[&>li]:grid-cols-[1fr_min-content_1fr]\",\n      },\n   },\n   defaultVariants: {\n      positions: \"left\",\n   },\n})\n\ninterface TimelineProps\n   extends React.HTMLAttributes<HTMLUListElement>,\n      VariantProps<typeof timelineVariants> {}\n\nconst Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(\n   ({ children, className, positions, ...props }, ref) => {\n      return (\n         <ul\n            className={ny(timelineVariants({ positions }), className)}\n            ref={ref}\n            {...props}\n         >\n            {children}\n         </ul>\n      )\n   },\n)\nTimeline.displayName = \"Timeline\"\n\nconst timelineItemVariants = cva(\"grid items-center gap-x-2\", {\n   variants: {\n      status: {\n         done: \"text-primary\",\n         default: \"text-muted-foreground\",\n      },\n   },\n   defaultVariants: {\n      status: \"default\",\n   },\n})\n\ninterface TimelineItemProps\n   extends React.HTMLAttributes<HTMLLIElement>,\n      VariantProps<typeof timelineItemVariants> {}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n   ({ className, status, ...props }, ref) => (\n      <li\n         className={ny(timelineItemVariants({ status }), className)}\n         ref={ref}\n         {...props}\n      />\n   ),\n)\nTimelineItem.displayName = \"TimelineItem\"\n\nconst timelineDotVariants = cva(\n   \"col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current\",\n   {\n      variants: {\n         status: {\n            default: \"[&>*]:hidden\",\n            current:\n               \"[&>*:not(.radix-circle)]:hidden [&>.radix-circle]:bg-current [&>.radix-circle]:fill-current\",\n            done: \"bg-primary [&>*:not(.radix-check)]:hidden [&>.radix-check]:text-background\",\n            error: \"border-destructive bg-destructive [&>*:not(.radix-cross)]:hidden [&>.radix-cross]:text-background\",\n            custom: \"[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block\",\n         },\n      },\n      defaultVariants: {\n         status: \"default\",\n      },\n   },\n)\n\ninterface TimelineDotProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof timelineDotVariants> {\n   customIcon?: React.ReactNode\n}\n\nconst TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(\n   ({ className, status, customIcon, ...props }, ref) => (\n      <div\n         role=\"status\"\n         className={ny(\n            \"timeline-dot\",\n            timelineDotVariants({ status }),\n            className,\n         )}\n         ref={ref}\n         {...props}\n      >\n         <div className=\"radix-circle size-2.5 rounded-full\" />\n         <CheckIcon className=\"radix-check size-3\" />\n         <Cross1Icon className=\"radix-cross size-2.5\" />\n         {customIcon}\n      </div>\n   ),\n)\nTimelineDot.displayName = \"TimelineDot\"\n\nconst timelineContentVariants = cva(\n   \"row-start-2 row-end-2 pb-8 text-muted-foreground\",\n   {\n      variants: {\n         side: {\n            right: \"col-start-3 col-end-4 mr-auto text-left\",\n            left: \"col-start-1 col-end-2 ml-auto text-right\",\n         },\n      },\n      defaultVariants: {\n         side: \"right\",\n      },\n   },\n)\n\ninterface TimelineConentProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof timelineContentVariants> {}\n\nconst TimelineContent = React.forwardRef<HTMLDivElement, TimelineConentProps>(\n   ({ className, side, ...props }, ref) => (\n      <div\n         className={ny(timelineContentVariants({ side }), className)}\n         ref={ref}\n         {...props}\n      />\n   ),\n)\nTimelineContent.displayName = \"TimelineContent\"\n\nconst timelineHeadingVariants = cva(\n   \"row-start-1 row-end-1 line-clamp-1 max-w-full truncate\",\n   {\n      variants: {\n         side: {\n            right: \"col-start-3 col-end-4 mr-auto text-left\",\n            left: \"col-start-1 col-end-2 ml-auto text-right\",\n         },\n         variant: {\n            primary: \"text-base font-medium text-primary\",\n            secondary: \"text-sm font-light text-muted-foreground\",\n         },\n      },\n      defaultVariants: {\n         side: \"right\",\n         variant: \"primary\",\n      },\n   },\n)\n\ninterface TimelineHeadingProps\n   extends React.HTMLAttributes<HTMLParagraphElement>,\n      VariantProps<typeof timelineHeadingVariants> {}\n\nconst TimelineHeading = React.forwardRef<\n   HTMLParagraphElement,\n   TimelineHeadingProps\n>(({ className, side, variant, ...props }, ref) => (\n   <p\n      role=\"heading\"\n      aria-level={variant === \"primary\" ? 2 : 3}\n      className={ny(timelineHeadingVariants({ side, variant }), className)}\n      ref={ref}\n      {...props}\n   />\n))\nTimelineHeading.displayName = \"TimelineHeading\"\n\ninterface TimelineLineProps extends React.HTMLAttributes<HTMLHRElement> {\n   done?: boolean\n}\n\nconst TimelineLine = React.forwardRef<HTMLHRElement, TimelineLineProps>(\n   ({ className, done = false, ...props }, ref) => {\n      return (\n         <hr\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            className={ny(\n               \"col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full\",\n               done ? \"bg-primary\" : \"bg-muted\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nTimelineLine.displayName = \"TimelineLine\"\n\nexport {\n   Timeline,\n   TimelineDot,\n   TimelineItem,\n   TimelineContent,\n   TimelineHeading,\n   TimelineLine,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/toast-demo.json b/apps/web/public/r/styles/miami/toast-demo.json
index d63a9410..9fd6c037 100644
--- a/apps/web/public/r/styles/miami/toast-demo.json
+++ b/apps/web/public/r/styles/miami/toast-demo.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toast-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "toast"
   ],
   "files": [
     {
-      "path": "example/toast-demo.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport { ToastAction } from '~/registry/miami/ui/toast'\nimport { useToast } from '~/registry/miami/ui/use-toast'\n\nexport default function ToastDemo() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: 'Scheduled: Catch up ',\n               description: 'Friday, February 10, 2023 at 5:57 PM',\n               action: (\n                  <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n               ),\n            })\n         }}\n      >\n         Add to calendar\n      </Button>\n   )\n}\n",
+      "path": "examples/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { ToastAction } from \"~/registry/miami/ui/toast\"\nimport { useToast } from \"~/registry/miami/ui/use-toast\"\n\nexport default function ToastDemo() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Scheduled: Catch up \",\n               description: \"Friday, February 10, 2023 at 5:57 PM\",\n               action: (\n                  <ToastAction altText=\"Goto schedule to undo\">\n                     Undo\n                  </ToastAction>\n               ),\n            })\n         }}\n      >\n         Add to calendar\n      </Button>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toast-destructive.json b/apps/web/public/r/styles/miami/toast-destructive.json
index cf848124..856f5d91 100644
--- a/apps/web/public/r/styles/miami/toast-destructive.json
+++ b/apps/web/public/r/styles/miami/toast-destructive.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toast-destructive",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "toast"
   ],
   "files": [
     {
-      "path": "example/toast-destructive.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport { ToastAction } from '~/registry/miami/ui/toast'\nimport { useToast } from '~/registry/miami/ui/use-toast'\n\nexport default function ToastDestructive() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               variant: 'destructive',\n               title: 'Uh oh! Something went wrong.',\n               description: 'There was a problem with your request.',\n               action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "path": "examples/toast-destructive.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { ToastAction } from \"~/registry/miami/ui/toast\"\nimport { useToast } from \"~/registry/miami/ui/use-toast\"\n\nexport default function ToastDestructive() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               variant: \"destructive\",\n               title: \"Uh oh! Something went wrong.\",\n               description: \"There was a problem with your request.\",\n               action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toast-simple.json b/apps/web/public/r/styles/miami/toast-simple.json
index 9524f6f2..703e3ecf 100644
--- a/apps/web/public/r/styles/miami/toast-simple.json
+++ b/apps/web/public/r/styles/miami/toast-simple.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toast-simple",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "toast"
   ],
   "files": [
     {
-      "path": "example/toast-simple.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport { useToast } from '~/registry/miami/ui/use-toast'\n\nexport default function ToastSimple() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               description: 'Your message has been sent.',\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "path": "examples/toast-simple.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { useToast } from \"~/registry/miami/ui/use-toast\"\n\nexport default function ToastSimple() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               description: \"Your message has been sent.\",\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toast-with-action.json b/apps/web/public/r/styles/miami/toast-with-action.json
index 8f7d34e3..b41f6339 100644
--- a/apps/web/public/r/styles/miami/toast-with-action.json
+++ b/apps/web/public/r/styles/miami/toast-with-action.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toast-with-action",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "toast"
   ],
   "files": [
     {
-      "path": "example/toast-with-action.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport { ToastAction } from '~/registry/miami/ui/toast'\nimport { useToast } from '~/registry/miami/ui/use-toast'\n\nexport default function ToastWithAction() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: 'Uh oh! Something went wrong.',\n               description: 'There was a problem with your request.',\n               action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "path": "examples/toast-with-action.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { ToastAction } from \"~/registry/miami/ui/toast\"\nimport { useToast } from \"~/registry/miami/ui/use-toast\"\n\nexport default function ToastWithAction() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Uh oh! Something went wrong.\",\n               description: \"There was a problem with your request.\",\n               action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toast-with-title.json b/apps/web/public/r/styles/miami/toast-with-title.json
index 11044ff4..cece58cd 100644
--- a/apps/web/public/r/styles/miami/toast-with-title.json
+++ b/apps/web/public/r/styles/miami/toast-with-title.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toast-with-title",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "registryDependencies": [
     "toast"
   ],
   "files": [
     {
-      "path": "example/toast-with-title.tsx",
-      "content": "'use client'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport { useToast } from '~/registry/miami/ui/use-toast'\n\nexport default function ToastWithTitle() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: 'Uh oh! Something went wrong.',\n               description: 'There was a problem with your request.',\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "path": "examples/toast-with-title.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport { useToast } from \"~/registry/miami/ui/use-toast\"\n\nexport default function ToastWithTitle() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Uh oh! Something went wrong.\",\n               description: \"There was a problem with your request.\",\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toast.json b/apps/web/public/r/styles/miami/toast.json
index a43215c2..0ffee7fd 100644
--- a/apps/web/public/r/styles/miami/toast.json
+++ b/apps/web/public/r/styles/miami/toast.json
@@ -1,25 +1,27 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toast",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-toast"
   ],
   "files": [
     {
       "path": "ui/toast.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Cross2Icon } from '@radix-ui/react-icons'\nimport * as ToastPrimitives from '@radix-ui/react-toast'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Viewport>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Viewport\n      ref={ref}\n      className={ny(\n         'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',\n         className,\n      )}\n      {...props}\n   />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n   'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n   {\n      variants: {\n         variant: {\n            default: 'border bg-background text-foreground',\n            destructive:\n          'destructive group border-destructive bg-destructive text-destructive-foreground',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n      },\n   },\n)\n\nconst Toast = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Root>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n   VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n   return (\n      <ToastPrimitives.Root\n         ref={ref}\n         className={ny(toastVariants({ variant }), className)}\n         {...props}\n      />\n   )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Action>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Action\n      ref={ref}\n      className={ny(\n         'hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-1 disabled:pointer-events-none disabled:opacity-50',\n         className,\n      )}\n      {...props}\n   />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Close>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Close\n      ref={ref}\n      className={ny(\n         'text-foreground/50 hover:text-foreground absolute right-1 top-1 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',\n         className,\n      )}\n      toast-close=\"\"\n      {...props}\n   >\n      <Cross2Icon className=\"size-4\" />\n   </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Title>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Title\n      ref={ref}\n      className={ny('text-sm font-semibold [&+div]:text-xs', className)}\n      {...props}\n   />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Description>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Description\n      ref={ref}\n      className={ny('text-sm opacity-90', className)}\n      {...props}\n   />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n   type ToastProps,\n   type ToastActionElement,\n   ToastProvider,\n   ToastViewport,\n   Toast,\n   ToastTitle,\n   ToastDescription,\n   ToastClose,\n   ToastAction,\n}\n",
+      "content": "\"use client\"\n\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Viewport>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Viewport\n      ref={ref}\n      className={ny(\n         \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n         className,\n      )}\n      {...props}\n   />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n   \"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n   {\n      variants: {\n         variant: {\n            default: \"border bg-background text-foreground\",\n            destructive:\n               \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nconst Toast = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Root>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n      VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n   return (\n      <ToastPrimitives.Root\n         ref={ref}\n         className={ny(toastVariants({ variant }), className)}\n         {...props}\n      />\n   )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Action>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Action\n      ref={ref}\n      className={ny(\n         \"hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-1 disabled:pointer-events-none disabled:opacity-50\",\n         className,\n      )}\n      {...props}\n   />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Close>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Close\n      ref={ref}\n      className={ny(\n         \"text-foreground/50 hover:text-foreground absolute right-1 top-1 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\n         className,\n      )}\n      toast-close=\"\"\n      {...props}\n   >\n      <Cross2Icon className=\"size-4\" />\n   </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Title>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Title\n      ref={ref}\n      className={ny(\"text-sm font-semibold [&+div]:text-xs\", className)}\n      {...props}\n   />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Description>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Description\n      ref={ref}\n      className={ny(\"text-sm opacity-90\", className)}\n      {...props}\n   />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n   type ToastProps,\n   type ToastActionElement,\n   ToastProvider,\n   ToastViewport,\n   Toast,\n   ToastTitle,\n   ToastDescription,\n   ToastClose,\n   ToastAction,\n}\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "hooks/use-toast.ts",
-      "content": "'use client'\n\n// Inspired by react-hot-toast library\nimport * as React from 'react'\n\nimport type {\n   ToastActionElement,\n   ToastProps,\n} from '~/registry/miami/ui/toast'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n   id: string\n   title?: React.ReactNode\n   description?: React.ReactNode\n   action?: ToastActionElement\n}\n\nconst actionTypes = {\n   ADD_TOAST: 'ADD_TOAST',\n   UPDATE_TOAST: 'UPDATE_TOAST',\n   DISMISS_TOAST: 'DISMISS_TOAST',\n   REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n   count = (count + 1) % Number.MAX_SAFE_INTEGER\n   return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n   | {\n      type: ActionType['ADD_TOAST']\n      toast: ToasterToast\n   }\n   | {\n      type: ActionType['UPDATE_TOAST']\n      toast: Partial<ToasterToast>\n   }\n   | {\n      type: ActionType['DISMISS_TOAST']\n      toastId?: ToasterToast['id']\n   }\n   | {\n      type: ActionType['REMOVE_TOAST']\n      toastId?: ToasterToast['id']\n   }\n\ninterface State {\n   toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n   if (toastTimeouts.has(toastId)) {\n      return\n   }\n\n   const timeout = setTimeout(() => {\n      toastTimeouts.delete(toastId)\n      dispatch({\n         type: 'REMOVE_TOAST',\n         toastId,\n      })\n   }, TOAST_REMOVE_DELAY)\n\n   toastTimeouts.set(toastId, timeout)\n}\n\nexport function reducer(state: State, action: Action): State {\n   switch (action.type) {\n      case 'ADD_TOAST':\n         return {\n            ...state,\n            toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n         }\n\n      case 'UPDATE_TOAST':\n         return {\n            ...state,\n            toasts: state.toasts.map(t =>\n               t.id === action.toast.id ? { ...t, ...action.toast } : t,\n            ),\n         }\n\n      case 'DISMISS_TOAST': {\n         const { toastId } = action\n\n         // ! Side effects ! - This could be extracted into a dismissToast() action,\n         // but I'll keep it here for simplicity\n         if (toastId) {\n            addToRemoveQueue(toastId)\n         }\n         else {\n            state.toasts.forEach((toast) => {\n               addToRemoveQueue(toast.id)\n            })\n         }\n\n         return {\n            ...state,\n            toasts: state.toasts.map(t =>\n               t.id === toastId || toastId === undefined\n                  ? {\n                        ...t,\n                        open: false,\n                     }\n                  : t,\n            ),\n         }\n      }\n      case 'REMOVE_TOAST':\n         if (action.toastId === undefined) {\n            return {\n               ...state,\n               toasts: [],\n            }\n         }\n         return {\n            ...state,\n            toasts: state.toasts.filter(t => t.id !== action.toastId),\n         }\n   }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n   memoryState = reducer(memoryState, action)\n   listeners.forEach((listener) => {\n      listener(memoryState)\n   })\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast({ ...props }: Toast) {\n   const id = genId()\n\n   const update = (props: ToasterToast) =>\n      dispatch({\n         type: 'UPDATE_TOAST',\n         toast: { ...props, id },\n      })\n   const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })\n\n   dispatch({\n      type: 'ADD_TOAST',\n      toast: {\n         ...props,\n         id,\n         open: true,\n         onOpenChange: (open) => {\n            if (!open)\n               dismiss()\n         },\n      },\n   })\n\n   return {\n      id,\n      dismiss,\n      update,\n   }\n}\n\nfunction useToast() {\n   const [state, setState] = React.useState<State>(memoryState)\n\n   React.useEffect(() => {\n      listeners.push(setState)\n      return () => {\n         const index = listeners.indexOf(setState)\n         if (index > -1) {\n            listeners.splice(index, 1)\n         }\n      }\n   }, [state])\n\n   return {\n      ...state,\n      toast,\n      dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),\n   }\n}\n\nexport { useToast, toast }\n",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type { ToastActionElement, ToastProps } from \"~/registry/miami/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n   id: string\n   title?: React.ReactNode\n   description?: React.ReactNode\n   action?: ToastActionElement\n}\n\nconst actionTypes = {\n   ADD_TOAST: \"ADD_TOAST\",\n   UPDATE_TOAST: \"UPDATE_TOAST\",\n   DISMISS_TOAST: \"DISMISS_TOAST\",\n   REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n   count = (count + 1) % Number.MAX_SAFE_INTEGER\n   return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n   | {\n        type: ActionType[\"ADD_TOAST\"]\n        toast: ToasterToast\n     }\n   | {\n        type: ActionType[\"UPDATE_TOAST\"]\n        toast: Partial<ToasterToast>\n     }\n   | {\n        type: ActionType[\"DISMISS_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n   | {\n        type: ActionType[\"REMOVE_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n\ninterface State {\n   toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n   if (toastTimeouts.has(toastId)) {\n      return\n   }\n\n   const timeout = setTimeout(() => {\n      toastTimeouts.delete(toastId)\n      dispatch({\n         type: \"REMOVE_TOAST\",\n         toastId,\n      })\n   }, TOAST_REMOVE_DELAY)\n\n   toastTimeouts.set(toastId, timeout)\n}\n\nexport function reducer(state: State, action: Action): State {\n   switch (action.type) {\n      case \"ADD_TOAST\":\n         return {\n            ...state,\n            toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n         }\n\n      case \"UPDATE_TOAST\":\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === action.toast.id ? { ...t, ...action.toast } : t,\n            ),\n         }\n\n      case \"DISMISS_TOAST\": {\n         const { toastId } = action\n\n         // ! Side effects ! - This could be extracted into a dismissToast() action,\n         // but I'll keep it here for simplicity\n         if (toastId) {\n            addToRemoveQueue(toastId)\n         } else {\n            state.toasts.forEach((toast) => {\n               addToRemoveQueue(toast.id)\n            })\n         }\n\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === toastId || toastId === undefined\n                  ? {\n                       ...t,\n                       open: false,\n                    }\n                  : t,\n            ),\n         }\n      }\n      case \"REMOVE_TOAST\":\n         if (action.toastId === undefined) {\n            return {\n               ...state,\n               toasts: [],\n            }\n         }\n         return {\n            ...state,\n            toasts: state.toasts.filter((t) => t.id !== action.toastId),\n         }\n   }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n   memoryState = reducer(memoryState, action)\n   listeners.forEach((listener) => {\n      listener(memoryState)\n   })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n   const id = genId()\n\n   const update = (props: ToasterToast) =>\n      dispatch({\n         type: \"UPDATE_TOAST\",\n         toast: { ...props, id },\n      })\n   const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n   dispatch({\n      type: \"ADD_TOAST\",\n      toast: {\n         ...props,\n         id,\n         open: true,\n         onOpenChange: (open) => {\n            if (!open) dismiss()\n         },\n      },\n   })\n\n   return {\n      id,\n      dismiss,\n      update,\n   }\n}\n\nfunction useToast() {\n   const [state, setState] = React.useState<State>(memoryState)\n\n   React.useEffect(() => {\n      listeners.push(setState)\n      return () => {\n         const index = listeners.indexOf(setState)\n         if (index > -1) {\n            listeners.splice(index, 1)\n         }\n      }\n   }, [state])\n\n   return {\n      ...state,\n      toast,\n      dismiss: (toastId?: string) =>\n         dispatch({ type: \"DISMISS_TOAST\", toastId }),\n   }\n}\n\nexport { useToast, toast }\n",
       "type": "registry:hook",
       "target": ""
     },
     {
       "path": "ui/toaster.tsx",
-      "content": "'use client'\n\nimport {\n   Toast,\n   ToastClose,\n   ToastDescription,\n   ToastProvider,\n   ToastTitle,\n   ToastViewport,\n} from '~/registry/miami/ui/toast'\nimport { useToast } from '~/registry/miami/ui/use-toast'\n\nexport function Toaster() {\n   const { toasts } = useToast()\n\n   return (\n      <ToastProvider>\n         {toasts.map(({ id, title, description, action, ...props }) => {\n            return (\n               <Toast key={id} {...props}>\n                  <div className=\"grid gap-1\">\n                     {title && <ToastTitle>{title}</ToastTitle>}\n                     {description && (\n                        <ToastDescription>{description}</ToastDescription>\n                     )}\n                  </div>\n                  {action}\n                  <ToastClose />\n               </Toast>\n            )\n         })}\n         <ToastViewport />\n      </ToastProvider>\n   )\n}\n",
+      "content": "\"use client\"\n\nimport {\n   Toast,\n   ToastClose,\n   ToastDescription,\n   ToastProvider,\n   ToastTitle,\n   ToastViewport,\n} from \"~/registry/miami/ui/toast\"\nimport { useToast } from \"~/registry/miami/ui/use-toast\"\n\nexport function Toaster() {\n   const { toasts } = useToast()\n\n   return (\n      <ToastProvider>\n         {toasts.map(({ id, title, description, action, ...props }) => {\n            return (\n               <Toast key={id} {...props}>\n                  <div className=\"grid gap-1\">\n                     {title && <ToastTitle>{title}</ToastTitle>}\n                     {description && (\n                        <ToastDescription>{description}</ToastDescription>\n                     )}\n                  </div>\n                  {action}\n                  <ToastClose />\n               </Toast>\n            )\n         })}\n         <ToastViewport />\n      </ToastProvider>\n   )\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toc-active.json b/apps/web/public/r/styles/miami/toc-active.json
index 5ae02f67..74a8e5ac 100644
--- a/apps/web/public/r/styles/miami/toc-active.json
+++ b/apps/web/public/r/styles/miami/toc-active.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toc-active",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toc-active.tsx",
-      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from '~/registry/miami/ui/toc'\n\nexport default function TOCActive() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Active Item Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem indent>\n            <TableOfContentsLink isActive href=\"#second-section\">\n               Second Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/toc-active.tsx",
+      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from \"~/registry/miami/ui/toc\"\n\nexport default function TOCActive() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>\n            Active Item Table of Contents\n         </TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem indent>\n            <TableOfContentsLink isActive href=\"#second-section\">\n               Second Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/toc-demo.json b/apps/web/public/r/styles/miami/toc-demo.json
index 70bb40b6..49df6e41 100644
--- a/apps/web/public/r/styles/miami/toc-demo.json
+++ b/apps/web/public/r/styles/miami/toc-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toc-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toc-demo.tsx",
-      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from '~/registry/miami/ui/toc'\n\nexport default function TOCDemo() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#second-section\">\n               Second Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/toc-demo.tsx",
+      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from \"~/registry/miami/ui/toc\"\n\nexport default function TOCDemo() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#second-section\">\n               Second Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/toc-nested.json b/apps/web/public/r/styles/miami/toc-nested.json
index 7e0b3382..4852af26 100644
--- a/apps/web/public/r/styles/miami/toc-nested.json
+++ b/apps/web/public/r/styles/miami/toc-nested.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toc-nested",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toc-nested.tsx",
-      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from '~/registry/miami/ui/toc'\n\nexport default function TOCDNested() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Nested Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section-nested\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem indent>\n            <TableOfContentsList>\n               <TableOfContentsLink href=\"#first-nested-section-nested\">\n                  First Nested Section\n               </TableOfContentsLink>\n               <TableOfContentsItem indent>\n                  <TableOfContentsLink href=\"#second-nested-section-nested\">\n                     Second Nested Section\n                  </TableOfContentsLink>\n               </TableOfContentsItem>\n            </TableOfContentsList>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section-nested\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/toc-nested.tsx",
+      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from \"~/registry/miami/ui/toc\"\n\nexport default function TOCDNested() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Nested Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section-nested\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem indent>\n            <TableOfContentsList>\n               <TableOfContentsLink href=\"#first-nested-section-nested\">\n                  First Nested Section\n               </TableOfContentsLink>\n               <TableOfContentsItem indent>\n                  <TableOfContentsLink href=\"#second-nested-section-nested\">\n                     Second Nested Section\n                  </TableOfContentsLink>\n               </TableOfContentsItem>\n            </TableOfContentsList>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section-nested\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/toc.json b/apps/web/public/r/styles/miami/toc.json
index 775d226e..c95496d9 100644
--- a/apps/web/public/r/styles/miami/toc.json
+++ b/apps/web/public/r/styles/miami/toc.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toc",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/toc.tsx",
-      "content": "import * as React from 'react'\n\nimport { ny } from '~/lib/utils'\n\ninterface TableOfContentsListProps\n   extends React.ComponentPropsWithoutRef<'ul'> {\n   indent?: boolean\n}\n\nconst TableOfContentsList = React.forwardRef<\n   React.ElementRef<'ul'>,\n   TableOfContentsListProps\n>(({ className, indent, ...props }, ref) => (\n   <ul\n      ref={ref}\n      className={ny('m-0 list-none', indent && 'pl-4', className)}\n      {...props}\n   />\n))\nTableOfContentsList.displayName = 'TableOfContentsList'\n\ninterface TableOfContentsTitleProps\n   extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst TableOfContentsTitle = React.forwardRef<\n   React.ElementRef<'li'>,\n   TableOfContentsTitleProps\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={ny('mb-2 text-sm font-medium', className)}\n      {...props}\n   />\n))\nTableOfContentsTitle.displayName = 'TableOfContentsTitle'\n\ninterface TableOfContentsItemProps\n   extends React.ComponentPropsWithoutRef<'li'> {\n   indent?: boolean\n}\n\nconst TableOfContentsItem = React.forwardRef<\n   React.ElementRef<'li'>,\n   TableOfContentsItemProps\n>(({ className, indent, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={ny('mt-0 pt-2', indent && 'ml-4', className)}\n      {...props}\n   />\n))\nTableOfContentsItem.displayName = 'TableOfContentsItem'\n\ninterface TableOfContentsLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n   isActive?: boolean\n}\n\nconst TableOfContentsLink = React.forwardRef<\n   React.ElementRef<'a'>,\n   TableOfContentsLinkProps\n>(({ className, isActive, ...props }, ref) => (\n   <a\n      ref={ref}\n      className={ny(\n         'text-foreground hover:text-primary text-sm font-medium transition-colors',\n         isActive ? 'text-foreground font-medium' : 'text-muted-foreground',\n         className,\n      )}\n      {...props}\n   />\n))\nTableOfContentsLink.displayName = 'TableOfContentsLink'\n\nexport {\n   TableOfContentsList,\n   TableOfContentsTitle,\n   TableOfContentsItem,\n   TableOfContentsLink,\n}\n",
-      "type": "registry:component",
+      "content": "import * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\ninterface TableOfContentsListProps\n   extends React.ComponentPropsWithoutRef<\"ul\"> {\n   indent?: boolean\n}\n\nconst TableOfContentsList = React.forwardRef<\n   React.ElementRef<\"ul\">,\n   TableOfContentsListProps\n>(({ className, indent, ...props }, ref) => (\n   <ul\n      ref={ref}\n      className={ny(\"m-0 list-none\", indent && \"pl-4\", className)}\n      {...props}\n   />\n))\nTableOfContentsList.displayName = \"TableOfContentsList\"\n\ninterface TableOfContentsTitleProps\n   extends React.ComponentPropsWithoutRef<\"li\"> {}\n\nconst TableOfContentsTitle = React.forwardRef<\n   React.ElementRef<\"li\">,\n   TableOfContentsTitleProps\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={ny(\"mb-2 text-sm font-medium\", className)}\n      {...props}\n   />\n))\nTableOfContentsTitle.displayName = \"TableOfContentsTitle\"\n\ninterface TableOfContentsItemProps\n   extends React.ComponentPropsWithoutRef<\"li\"> {\n   indent?: boolean\n}\n\nconst TableOfContentsItem = React.forwardRef<\n   React.ElementRef<\"li\">,\n   TableOfContentsItemProps\n>(({ className, indent, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={ny(\"mt-0 pt-2\", indent && \"ml-4\", className)}\n      {...props}\n   />\n))\nTableOfContentsItem.displayName = \"TableOfContentsItem\"\n\ninterface TableOfContentsLinkProps extends React.ComponentPropsWithoutRef<\"a\"> {\n   isActive?: boolean\n}\n\nconst TableOfContentsLink = React.forwardRef<\n   React.ElementRef<\"a\">,\n   TableOfContentsLinkProps\n>(({ className, isActive, ...props }, ref) => (\n   <a\n      ref={ref}\n      className={ny(\n         \"text-foreground hover:text-primary text-sm font-medium transition-colors\",\n         isActive ? \"text-foreground font-medium\" : \"text-muted-foreground\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableOfContentsLink.displayName = \"TableOfContentsLink\"\n\nexport {\n   TableOfContentsList,\n   TableOfContentsTitle,\n   TableOfContentsItem,\n   TableOfContentsLink,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/toggle-demo.json b/apps/web/public/r/styles/miami/toggle-demo.json
index 35d461c8..cf13cc59 100644
--- a/apps/web/public/r/styles/miami/toggle-demo.json
+++ b/apps/web/public/r/styles/miami/toggle-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-demo.tsx",
-      "content": "import { FontBoldIcon } from '@radix-ui/react-icons'\n\nimport { Toggle } from '~/registry/miami/ui/toggle'\n\nexport default function ToggleDemo() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <FontBoldIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "path": "examples/toggle-demo.tsx",
+      "content": "import { FontBoldIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"~/registry/miami/ui/toggle\"\n\nexport default function ToggleDemo() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <FontBoldIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toggle-disabled.json b/apps/web/public/r/styles/miami/toggle-disabled.json
index 748c539a..e2930e67 100644
--- a/apps/web/public/r/styles/miami/toggle-disabled.json
+++ b/apps/web/public/r/styles/miami/toggle-disabled.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-disabled.tsx",
-      "content": "import { UnderlineIcon } from '@radix-ui/react-icons'\n\nimport { Toggle } from '~/registry/miami/ui/toggle'\n\nexport default function ToggleDisabled() {\n   return (\n      <Toggle aria-label=\"Toggle italic\" disabled>\n         <UnderlineIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "path": "examples/toggle-disabled.tsx",
+      "content": "import { UnderlineIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"~/registry/miami/ui/toggle\"\n\nexport default function ToggleDisabled() {\n   return (\n      <Toggle aria-label=\"Toggle italic\" disabled>\n         <UnderlineIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toggle-group-demo.json b/apps/web/public/r/styles/miami/toggle-group-demo.json
index 780f4a3b..8d0bbcb7 100644
--- a/apps/web/public/r/styles/miami/toggle-group-demo.json
+++ b/apps/web/public/r/styles/miami/toggle-group-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-group-demo.tsx",
-      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from '@radix-ui/react-icons'\n\nimport { ToggleGroup, ToggleGroupItem } from '~/registry/miami/ui/toggle-group'\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "path": "examples/toggle-group-demo.tsx",
+      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"~/registry/miami/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toggle-group-disabled.json b/apps/web/public/r/styles/miami/toggle-group-disabled.json
index 2c67d0f5..2e7040ad 100644
--- a/apps/web/public/r/styles/miami/toggle-group-disabled.json
+++ b/apps/web/public/r/styles/miami/toggle-group-disabled.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group-disabled",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-group-disabled.tsx",
-      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from '@radix-ui/react-icons'\n\nimport { ToggleGroup, ToggleGroupItem } from '~/registry/miami/ui/toggle-group'\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\" disabled>\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "path": "examples/toggle-group-disabled.tsx",
+      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"~/registry/miami/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\" disabled>\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toggle-group-lg.json b/apps/web/public/r/styles/miami/toggle-group-lg.json
index 07d19fb0..a4a81dac 100644
--- a/apps/web/public/r/styles/miami/toggle-group-lg.json
+++ b/apps/web/public/r/styles/miami/toggle-group-lg.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group-lg",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-group-lg.tsx",
-      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from '@radix-ui/react-icons'\n\nimport { ToggleGroup, ToggleGroupItem } from '~/registry/miami/ui/toggle-group'\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\" size=\"lg\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "path": "examples/toggle-group-lg.tsx",
+      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"~/registry/miami/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\" size=\"lg\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toggle-group-outline.json b/apps/web/public/r/styles/miami/toggle-group-outline.json
index c0d86909..0ac7e044 100644
--- a/apps/web/public/r/styles/miami/toggle-group-outline.json
+++ b/apps/web/public/r/styles/miami/toggle-group-outline.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group-outline",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-group-outline.tsx",
-      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from '@radix-ui/react-icons'\n\nimport { ToggleGroup, ToggleGroupItem } from '~/registry/miami/ui/toggle-group'\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\" variant=\"outline\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "path": "examples/toggle-group-outline.tsx",
+      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"~/registry/miami/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\" variant=\"outline\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toggle-group-single.json b/apps/web/public/r/styles/miami/toggle-group-single.json
index cc693888..10de3344 100644
--- a/apps/web/public/r/styles/miami/toggle-group-single.json
+++ b/apps/web/public/r/styles/miami/toggle-group-single.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group-single",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-group-single.tsx",
-      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from '@radix-ui/react-icons'\n\nimport { ToggleGroup, ToggleGroupItem } from '~/registry/miami/ui/toggle-group'\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"single\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "path": "examples/toggle-group-single.tsx",
+      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"~/registry/miami/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"single\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toggle-group-sm.json b/apps/web/public/r/styles/miami/toggle-group-sm.json
index ecea53ff..eb938584 100644
--- a/apps/web/public/r/styles/miami/toggle-group-sm.json
+++ b/apps/web/public/r/styles/miami/toggle-group-sm.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group-sm",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-group-sm.tsx",
-      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from '@radix-ui/react-icons'\n\nimport { ToggleGroup, ToggleGroupItem } from '~/registry/miami/ui/toggle-group'\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"single\" size=\"sm\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "path": "examples/toggle-group-sm.tsx",
+      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"~/registry/miami/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"single\" size=\"sm\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toggle-group.json b/apps/web/public/r/styles/miami/toggle-group.json
index 5056e9f9..b939a3b2 100644
--- a/apps/web/public/r/styles/miami/toggle-group.json
+++ b/apps/web/public/r/styles/miami/toggle-group.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-group",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-toggle-group"
   ],
@@ -10,8 +12,8 @@
   "files": [
     {
       "path": "ui/toggle-group.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport type { VariantProps } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\nimport { toggleVariants } from '~/registry/miami/ui/toggle'\n\nconst ToggleGroupContext = React.createContext<\n   VariantProps<typeof toggleVariants>\n>({\n   size: 'default',\n   variant: 'default',\n})\n\nconst ToggleGroup = React.forwardRef<\n   React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n   VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n   <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={ny('flex items-center justify-center gap-1', className)}\n      {...props}\n   >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n         {children}\n      </ToggleGroupContext.Provider>\n   </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n   React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n   VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n   const context = React.useContext(ToggleGroupContext)\n\n   return (\n      <ToggleGroupPrimitive.Item\n         ref={ref}\n         className={ny(\n            toggleVariants({\n               variant: context.variant || variant,\n               size: context.size || size,\n            }),\n            className,\n         )}\n         {...props}\n      >\n         {children}\n      </ToggleGroupPrimitive.Item>\n   )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\nimport { toggleVariants } from \"~/registry/miami/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n   VariantProps<typeof toggleVariants>\n>({\n   size: \"default\",\n   variant: \"default\",\n})\n\nconst ToggleGroup = React.forwardRef<\n   React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n      VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n   <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={ny(\"flex items-center justify-center gap-1\", className)}\n      {...props}\n   >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n         {children}\n      </ToggleGroupContext.Provider>\n   </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n   React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n      VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n   const context = React.useContext(ToggleGroupContext)\n\n   return (\n      <ToggleGroupPrimitive.Item\n         ref={ref}\n         className={ny(\n            toggleVariants({\n               variant: context.variant || variant,\n               size: context.size || size,\n            }),\n            className,\n         )}\n         {...props}\n      >\n         {children}\n      </ToggleGroupPrimitive.Item>\n   )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/toggle-lg.json b/apps/web/public/r/styles/miami/toggle-lg.json
index 506b6664..8a6e81d7 100644
--- a/apps/web/public/r/styles/miami/toggle-lg.json
+++ b/apps/web/public/r/styles/miami/toggle-lg.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-lg",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-lg.tsx",
-      "content": "import { FontItalicIcon } from '@radix-ui/react-icons'\n\nimport { Toggle } from '~/registry/miami/ui/toggle'\n\nexport default function ToggleLg() {\n   return (\n      <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n         <FontItalicIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "path": "examples/toggle-lg.tsx",
+      "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"~/registry/miami/ui/toggle\"\n\nexport default function ToggleLg() {\n   return (\n      <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n         <FontItalicIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toggle-outline.json b/apps/web/public/r/styles/miami/toggle-outline.json
index a9d151f4..7d483ad5 100644
--- a/apps/web/public/r/styles/miami/toggle-outline.json
+++ b/apps/web/public/r/styles/miami/toggle-outline.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-outline",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-outline.tsx",
-      "content": "import { FontItalicIcon } from '@radix-ui/react-icons'\n\nimport { Toggle } from '~/registry/miami/ui/toggle'\n\nexport default function ToggleOutline() {\n   return (\n      <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n         <FontItalicIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "path": "examples/toggle-outline.tsx",
+      "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"~/registry/miami/ui/toggle\"\n\nexport default function ToggleOutline() {\n   return (\n      <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n         <FontItalicIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toggle-sm.json b/apps/web/public/r/styles/miami/toggle-sm.json
index fb8f769d..16b70c38 100644
--- a/apps/web/public/r/styles/miami/toggle-sm.json
+++ b/apps/web/public/r/styles/miami/toggle-sm.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-sm",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-sm.tsx",
-      "content": "import { FontItalicIcon } from '@radix-ui/react-icons'\n\nimport { Toggle } from '~/registry/miami/ui/toggle'\n\nexport default function ToggleSm() {\n   return (\n      <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n         <FontItalicIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "path": "examples/toggle-sm.tsx",
+      "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"~/registry/miami/ui/toggle\"\n\nexport default function ToggleSm() {\n   return (\n      <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n         <FontItalicIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toggle-with-text.json b/apps/web/public/r/styles/miami/toggle-with-text.json
index 44dd6f99..59221f8e 100644
--- a/apps/web/public/r/styles/miami/toggle-with-text.json
+++ b/apps/web/public/r/styles/miami/toggle-with-text.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle-with-text",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/toggle-with-text.tsx",
-      "content": "import { FontItalicIcon } from '@radix-ui/react-icons'\n\nimport { Toggle } from '~/registry/miami/ui/toggle'\n\nexport default function ToggleWithText() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <FontItalicIcon className=\"mr-2 size-4\" />\n         Italic\n      </Toggle>\n   )\n}\n",
+      "path": "examples/toggle-with-text.tsx",
+      "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"~/registry/miami/ui/toggle\"\n\nexport default function ToggleWithText() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <FontItalicIcon className=\"mr-2 size-4\" />\n         Italic\n      </Toggle>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/toggle.json b/apps/web/public/r/styles/miami/toggle.json
index ae6fa07d..d3cf7281 100644
--- a/apps/web/public/r/styles/miami/toggle.json
+++ b/apps/web/public/r/styles/miami/toggle.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "toggle",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-toggle"
   ],
   "files": [
     {
       "path": "ui/toggle.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as TogglePrimitive from '@radix-ui/react-toggle'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst toggleVariants = cva(\n   'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n   {\n      variants: {\n         variant: {\n            default: 'bg-transparent',\n            outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n         },\n         size: {\n            default: 'h-9 px-3',\n            sm: 'h-8 px-2',\n            lg: 'h-10 px-3',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n         size: 'default',\n      },\n   },\n)\n\nconst Toggle = React.forwardRef<\n   React.ElementRef<typeof TogglePrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n   VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n   <TogglePrimitive.Root\n      ref={ref}\n      className={ny(toggleVariants({ variant, size, className }))}\n      {...props}\n   />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst toggleVariants = cva(\n   \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-transparent\",\n            outline:\n               \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n         },\n         size: {\n            default: \"h-9 px-3\",\n            sm: \"h-8 px-2\",\n            lg: \"h-10 px-3\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n         size: \"default\",\n      },\n   },\n)\n\nconst Toggle = React.forwardRef<\n   React.ElementRef<typeof TogglePrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n      VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n   <TogglePrimitive.Root\n      ref={ref}\n      className={ny(toggleVariants({ variant, size, className }))}\n      {...props}\n   />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/tooltip-demo.json b/apps/web/public/r/styles/miami/tooltip-demo.json
index 40b1ddcd..9cb31d0d 100644
--- a/apps/web/public/r/styles/miami/tooltip-demo.json
+++ b/apps/web/public/r/styles/miami/tooltip-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tooltip-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tooltip-demo.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport {\n   Tooltip,\n   TooltipArrow,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/registry/miami/ui/tooltip'\n\nexport default function TooltipDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Add to library</p>\n               <TooltipArrow />\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "path": "examples/tooltip-demo.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Tooltip,\n   TooltipArrow,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/miami/ui/tooltip\"\n\nexport default function TooltipDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Add to library</p>\n               <TooltipArrow />\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/tooltip-outline.json b/apps/web/public/r/styles/miami/tooltip-outline.json
index e1c83066..86a531bd 100644
--- a/apps/web/public/r/styles/miami/tooltip-outline.json
+++ b/apps/web/public/r/styles/miami/tooltip-outline.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tooltip-outline",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tooltip-outline.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/registry/miami/ui/tooltip'\n\nexport default function TooltipOutline() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent variant=\"outline\">\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "path": "examples/tooltip-outline.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/miami/ui/tooltip\"\n\nexport default function TooltipOutline() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent variant=\"outline\">\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/tooltip-secondary.json b/apps/web/public/r/styles/miami/tooltip-secondary.json
index 98c12d97..837e6891 100644
--- a/apps/web/public/r/styles/miami/tooltip-secondary.json
+++ b/apps/web/public/r/styles/miami/tooltip-secondary.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tooltip-secondary",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tooltip-secondary.tsx",
-      "content": "import { Button } from '~/registry/miami/ui/button'\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/registry/miami/ui/tooltip'\n\nexport default function TooltipSecondary() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent variant=\"secondary\">\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "path": "examples/tooltip-secondary.tsx",
+      "content": "import { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/miami/ui/tooltip\"\n\nexport default function TooltipSecondary() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent variant=\"secondary\">\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/tooltip-with-toggle-demo.json b/apps/web/public/r/styles/miami/tooltip-with-toggle-demo.json
index 249deed4..75faf6ee 100644
--- a/apps/web/public/r/styles/miami/tooltip-with-toggle-demo.json
+++ b/apps/web/public/r/styles/miami/tooltip-with-toggle-demo.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tooltip-with-toggle-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tooltip-with-toggle-demo.tsx",
-      "content": "import { Heart } from 'lucide-react'\n\nimport { Toggle } from '~/registry/miami/ui/toggle'\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from '~/registry/miami/ui/tooltip'\n\nexport default function TooltipWithToggleDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger>\n               <Toggle variant=\"outline\" aria-label=\"Toggle Heart\">\n                  <Heart className=\"size-4\" />\n               </Toggle>\n            </TooltipTrigger>\n            <TooltipContent><p>Heart</p></TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "path": "examples/tooltip-with-toggle-demo.tsx",
+      "content": "import { Heart } from \"lucide-react\"\n\nimport { Toggle } from \"~/registry/miami/ui/toggle\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"~/registry/miami/ui/tooltip\"\n\nexport default function TooltipWithToggleDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger>\n               <Toggle variant=\"outline\" aria-label=\"Toggle Heart\">\n                  <Heart className=\"size-4\" />\n               </Toggle>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Heart</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/tooltip.json b/apps/web/public/r/styles/miami/tooltip.json
index f2405db9..6d3e8485 100644
--- a/apps/web/public/r/styles/miami/tooltip.json
+++ b/apps/web/public/r/styles/miami/tooltip.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tooltip",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-tooltip"
   ],
   "files": [
     {
       "path": "ui/tooltip.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { ny } from '~/lib/utils'\n\nconst tooltipVariants = cva(\n   'z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n   {\n      variants: {\n         variant: {\n            default: 'bg-primary text-primary-foreground',\n            outline: 'border bg-popover text-popover-foreground shadow-md',\n            secondary: 'bg-secondary text-secondary-foreground',\n         },\n      },\n      defaultVariants: {\n         variant: 'default',\n      },\n   },\n)\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipArrow = TooltipPrimitive.TooltipArrow\n\nexport interface TooltipProps\n   extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n   VariantProps<typeof tooltipVariants> {};\n\nconst TooltipContent = React.forwardRef<\n   React.ElementRef<typeof TooltipPrimitive.Content>,\n   TooltipProps\n>(({ className, variant, sideOffset = 4, ...props }, ref) => (\n   <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={ny(tooltipVariants({ variant, className }))}\n      {...props}\n   />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipArrow, TooltipContent, TooltipProvider }\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { ny } from \"~/lib/utils\"\n\nconst tooltipVariants = cva(\n   \"z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-primary text-primary-foreground\",\n            outline: \"border bg-popover text-popover-foreground shadow-md\",\n            secondary: \"bg-secondary text-secondary-foreground\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipArrow = TooltipPrimitive.TooltipArrow\n\nexport interface TooltipProps\n   extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n      VariantProps<typeof tooltipVariants> {}\n\nconst TooltipContent = React.forwardRef<\n   React.ElementRef<typeof TooltipPrimitive.Content>,\n   TooltipProps\n>(({ className, variant, sideOffset = 4, ...props }, ref) => (\n   <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={ny(tooltipVariants({ variant, className }))}\n      {...props}\n   />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport {\n   Tooltip,\n   TooltipTrigger,\n   TooltipArrow,\n   TooltipContent,\n   TooltipProvider,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/tour-demo.json b/apps/web/public/r/styles/miami/tour-demo.json
index 9ac60679..e64af38b 100644
--- a/apps/web/public/r/styles/miami/tour-demo.json
+++ b/apps/web/public/r/styles/miami/tour-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tour-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tour-demo.tsx",
-      "content": "import * as React from 'react'\n\nimport { Button } from '~/registry/miami/ui/button'\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from '~/registry/miami/ui/card'\nimport { Input } from '~/registry/miami/ui/input'\nimport { TourFactory } from '~/registry/miami/ui/tour'\n\nconst tour = TourFactory([\n   'buttonOne',\n   'buttonTwo',\n   'missingButton',\n   'buttonFour',\n   'emailInput',\n])\n\nfunction TourDisplay(props: {\n   children: React.ReactNode\n   title?: string\n   description?: string\n}) {\n   const ctx = tour.useContext()\n   return (\n      <Card className=\"w-[350px]\">\n         <CardHeader>\n            <CardTitle>{props.title}</CardTitle>\n            <CardDescription>{props.description}</CardDescription>\n         </CardHeader>\n         <CardContent>{props.children}</CardContent>\n         <CardFooter>\n            {ctx.current < ctx.nodes.size\n               ? (\n                     <div className=\"flex w-full justify-between\">\n                        <Button variant=\"outline\" onClick={ctx.close}>\n                           Close\n                        </Button>\n                        <div>\n                           <Button onClick={ctx.previous}>Previous</Button>\n                           <Button onClick={ctx.next}>Next</Button>\n                        </div>\n                     </div>\n                  )\n               : (\n                     <div className=\"flex w-full justify-end\">\n                        <Button onClick={ctx.previous}>Previous</Button>\n                        <Button className=\"bg-green-800\" onClick={ctx.close}>\n                           Finish\n                        </Button>\n                     </div>\n                  )}\n         </CardFooter>\n      </Card>\n   )\n}\n\nfunction TourApplication() {\n   const ctx = tour.useContext()\n   return (\n      <div className=\"flex h-96 w-full items-center justify-center\">\n         <div className=\"absolute bottom-2 left-2 flex gap-2\">\n            <tour.TourFocus\n               name=\"buttonOne\"\n               tourRender={(\n                  <TourDisplay title=\"Create Incident\">\n                     <h1>This button creates an incident</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               )}\n            >\n               <Button>Create Incident</Button>\n            </tour.TourFocus>\n            <tour.TourFocus\n               name=\"buttonFour\"\n               tourRender={(\n                  <TourDisplay title=\"Update Incident\">\n                     <h1>This button pushes your updates</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               )}\n            >\n               <Button>Update Incident</Button>\n            </tour.TourFocus>\n         </div>\n         <div className=\"absolute right-2 top-12 flex gap-2\">\n            <tour.TourFocus\n               name=\"buttonTwo\"\n               tourRender={(\n                  <TourDisplay title=\"Resolve Incident\">\n                     <h1>This button Resolves the Incident</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               )}\n            >\n               <Button>Resolve Incident</Button>\n            </tour.TourFocus>\n         </div>\n         <div>\n            <tour.TourFocus\n               name=\"emailInput\"\n               tourRender={(\n                  <TourDisplay title=\"Email Input\">\n                     <h1>This is where you put incident info</h1>\n                     <p>helpful text about this input</p>\n                  </TourDisplay>\n               )}\n            >\n               <Input type=\"email\" placeholder=\"Email\" />\n            </tour.TourFocus>\n         </div>\n         <div className=\"absolute bottom-2 right-2\">\n            <Button onClick={ctx.open}>Open Tour</Button>\n         </div>\n      </div>\n   )\n}\n\nexport default function TourDemo() {\n   return (\n      <tour.TourProvider>\n         <TourApplication />\n      </tour.TourProvider>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/tour-demo.tsx",
+      "content": "import type * as React from \"react\"\n\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport { Input } from \"~/registry/miami/ui/input\"\nimport { TourFactory } from \"~/registry/miami/ui/tour\"\n\nconst tour = TourFactory([\n   \"buttonOne\",\n   \"buttonTwo\",\n   \"missingButton\",\n   \"buttonFour\",\n   \"emailInput\",\n])\n\nfunction TourDisplay(props: {\n   children: React.ReactNode\n   title?: string\n   description?: string\n}) {\n   const ctx = tour.useContext()\n   return (\n      <Card className=\"w-[350px]\">\n         <CardHeader>\n            <CardTitle>{props.title}</CardTitle>\n            <CardDescription>{props.description}</CardDescription>\n         </CardHeader>\n         <CardContent>{props.children}</CardContent>\n         <CardFooter>\n            {ctx.current < ctx.nodes.size ? (\n               <div className=\"flex w-full justify-between\">\n                  <Button variant=\"outline\" onClick={ctx.close}>\n                     Close\n                  </Button>\n                  <div>\n                     <Button onClick={ctx.previous}>Previous</Button>\n                     <Button onClick={ctx.next}>Next</Button>\n                  </div>\n               </div>\n            ) : (\n               <div className=\"flex w-full justify-end\">\n                  <Button onClick={ctx.previous}>Previous</Button>\n                  <Button className=\"bg-green-800\" onClick={ctx.close}>\n                     Finish\n                  </Button>\n               </div>\n            )}\n         </CardFooter>\n      </Card>\n   )\n}\n\nfunction TourApplication() {\n   const ctx = tour.useContext()\n   return (\n      <div className=\"flex h-96 w-full items-center justify-center\">\n         <div className=\"absolute bottom-2 left-2 flex gap-2\">\n            <tour.TourFocus\n               name=\"buttonOne\"\n               tourRender={\n                  <TourDisplay title=\"Create Incident\">\n                     <h1>This button creates an incident</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               }\n            >\n               <Button>Create Incident</Button>\n            </tour.TourFocus>\n            <tour.TourFocus\n               name=\"buttonFour\"\n               tourRender={\n                  <TourDisplay title=\"Update Incident\">\n                     <h1>This button pushes your updates</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               }\n            >\n               <Button>Update Incident</Button>\n            </tour.TourFocus>\n         </div>\n         <div className=\"absolute right-2 top-12 flex gap-2\">\n            <tour.TourFocus\n               name=\"buttonTwo\"\n               tourRender={\n                  <TourDisplay title=\"Resolve Incident\">\n                     <h1>This button Resolves the Incident</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               }\n            >\n               <Button>Resolve Incident</Button>\n            </tour.TourFocus>\n         </div>\n         <div>\n            <tour.TourFocus\n               name=\"emailInput\"\n               tourRender={\n                  <TourDisplay title=\"Email Input\">\n                     <h1>This is where you put incident info</h1>\n                     <p>helpful text about this input</p>\n                  </TourDisplay>\n               }\n            >\n               <Input type=\"email\" placeholder=\"Email\" />\n            </tour.TourFocus>\n         </div>\n         <div className=\"absolute bottom-2 right-2\">\n            <Button onClick={ctx.open}>Open Tour</Button>\n         </div>\n      </div>\n   )\n}\n\nexport default function TourDemo() {\n   return (\n      <tour.TourProvider>\n         <TourApplication />\n      </tour.TourProvider>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/tour.json b/apps/web/public/r/styles/miami/tour.json
index d0da9eee..6255a24f 100644
--- a/apps/web/public/r/styles/miami/tour.json
+++ b/apps/web/public/r/styles/miami/tour.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tour",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/tour.tsx",
-      "content": "'use client'\nimport React, {\n   createContext,\n   useContext,\n   useEffect,\n   useMemo,\n   useRef,\n   useState,\n} from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { ny } from '~/lib/utils'\n\nexport interface TourContext<T extends string> {\n   nodes: Map<\n      string,\n      {\n         ref: HTMLElement\n         render: React.ReactNode\n         name: T\n      }\n   >\n   show: boolean\n   current: number\n   next: () => void\n   previous: () => void\n   close: () => void\n   open: () => void\n}\n\nexport interface TourProps {\n   children?: React.ReactNode\n}\n\nexport interface TourFocusProps<T extends string> {\n   children: React.ReactNode\n   tourRender: React.ReactNode\n   name: T\n}\n\nexport function TourFactory<T extends string>(order: T[]) {\n   const tourContext = createContext<TourContext<T>>({\n      nodes: new Map(),\n      show: false,\n      current: 0,\n      next: () => {\n         console.log('empty')\n      },\n      previous: () => {\n         console.log('empty')\n      },\n      close: () => {\n         console.log('empty')\n      },\n      open: () => {\n         console.log('empty')\n      },\n   })\n\n   function TourPortal() {\n      const ctx = useContext(tourContext)\n\n      const ref = useRef<HTMLDivElement>(null)\n      const [, forceUpdate] = React.useState({})\n\n      const currentElement = useMemo(\n         () => ctx.nodes.get(order[ctx.current] ?? ''),\n         [ctx],\n      )\n\n      useEffect(() => {\n         const handleResize = () => {\n            forceUpdate({})\n         }\n\n         window.addEventListener('resize', handleResize)\n         window.addEventListener('scroll', handleResize)\n\n         return () => {\n            window.removeEventListener('resize', handleResize)\n            window.removeEventListener('scroll', handleResize)\n         }\n      }, [])\n\n      useEffect(() => {\n         if (ctx.show) {\n            forceUpdate({})\n         }\n      }, [ctx.show])\n\n      if (!currentElement) {\n         return <></>\n      }\n\n      const currentElementRect = currentElement.ref.getBoundingClientRect()\n\n      const height = ref.current?.getBoundingClientRect().height ?? 0\n      const width = ref.current?.getBoundingClientRect().width ?? 0\n\n      const closest = (): React.CSSProperties => {\n         const isCloseToTop = currentElementRect.top < height\n         const isCloseToLeft = currentElementRect.left < width\n         const isCloseToRight\n         = currentElementRect.right > window.innerWidth - width\n\n         if (isCloseToLeft) {\n            return {\n               left: currentElementRect.x + currentElementRect.width,\n               top:\n             currentElementRect.y - height / 2 + currentElementRect.height / 2,\n            }\n         }\n\n         if (isCloseToRight) {\n            return {\n               left: currentElementRect.x - width,\n               top:\n             currentElementRect.y - height / 2 + currentElementRect.height / 2,\n            }\n         }\n\n         if (isCloseToTop) {\n            return {\n               left: currentElementRect.x - width / 2 + currentElementRect.width / 2,\n               top: currentElementRect.y + currentElementRect.height,\n            }\n         }\n\n         return {\n            left: currentElementRect.x - width / 2 + currentElementRect.width / 2,\n            top: currentElementRect.y - height,\n         }\n      }\n\n      return createPortal(\n         <div\n            id=\"tour\"\n            className={ny(\n               'pointer-events-auto fixed left-0 top-0 h-screen w-screen transition-none',\n               !ctx.show ? 'invisible' : 'visible',\n            )}\n         >\n            <div\n               ref={ref}\n               className={ny(\n             `absolute z-50 transition-all duration-500 ease-in-out`,\n               )}\n               style={{\n                  ...closest(),\n               }}\n            >\n               {currentElement.render}\n            </div>\n            <div\n               className=\"absolute z-40 h-screen w-screen overflow-hidden opacity-80 shadow-[0_0_0_100vw_rgba(0,0,0,.99)] transition-all duration-500 ease-in-out\"\n               style={{\n                  height: currentElementRect.height,\n                  width: currentElementRect.width,\n                  left: currentElementRect.x,\n                  top: currentElementRect.y,\n               }}\n            />\n         </div>,\n         document.body,\n      )\n   }\n\n   return {\n      TourProvider: function TourProvider(props: TourProps) {\n         const nodes = useRef<TourContext<T>['nodes']>(new Map())\n\n         const [show, setShow] = useState(false)\n         const [current, setCurrent] = useState(0)\n\n         const getNextIndex = (currIndex: number, nextDiff: number): number => {\n            const lookAheadIndex = currIndex + nextDiff\n            if (lookAheadIndex >= order.length || lookAheadIndex < 0) {\n               return currIndex\n            }\n            if (!nodes.current.has(order[lookAheadIndex])) {\n               return getNextIndex(lookAheadIndex, nextDiff)\n            }\n            return lookAheadIndex\n         }\n\n         return (\n            <tourContext.Provider\n               value={{\n                  nodes: nodes.current,\n                  current,\n                  show,\n                  next: () => {\n                     setCurrent(state =>\n                        Math.min(getNextIndex(state, 1), order.length - 1),\n                     )\n                  },\n                  previous: () => {\n                     setCurrent(state => Math.max(getNextIndex(state, -1), 0))\n                  },\n                  close: () => {\n                     setShow(false)\n                  },\n                  open: () => {\n                     setShow(true)\n                  },\n               }}\n            >\n               <TourPortal />\n               {props.children}\n            </tourContext.Provider>\n         )\n      },\n      context: tourContext,\n      useContext: () => useContext(tourContext),\n      TourFocus: function TourFocus(props: TourFocusProps<T>) {\n         const ctx = useContext(tourContext)\n         return (\n            <div\n               ref={(divRef) => {\n                  if (divRef && !ctx.nodes.has(props.name)) {\n                     ctx.nodes.set(props.name, {\n                        ref: divRef,\n                        render: props.tourRender,\n                        name: props.name,\n                     })\n                  }\n               }}\n            >\n               {props.children}\n            </div>\n         )\n      },\n   }\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport React, {\n   createContext,\n   useContext,\n   useEffect,\n   useMemo,\n   useRef,\n   useState,\n} from \"react\"\nimport { createPortal } from \"react-dom\"\n\nimport { ny } from \"~/lib/utils\"\n\nexport interface TourContext<T extends string> {\n   nodes: Map<\n      string,\n      {\n         ref: HTMLElement\n         render: React.ReactNode\n         name: T\n      }\n   >\n   show: boolean\n   current: number\n   next: () => void\n   previous: () => void\n   close: () => void\n   open: () => void\n}\n\nexport interface TourProps {\n   children?: React.ReactNode\n}\n\nexport interface TourFocusProps<T extends string> {\n   children: React.ReactNode\n   tourRender: React.ReactNode\n   name: T\n}\n\nexport function TourFactory<T extends string>(order: T[]) {\n   const tourContext = createContext<TourContext<T>>({\n      nodes: new Map(),\n      show: false,\n      current: 0,\n      next: () => {\n         console.log(\"empty\")\n      },\n      previous: () => {\n         console.log(\"empty\")\n      },\n      close: () => {\n         console.log(\"empty\")\n      },\n      open: () => {\n         console.log(\"empty\")\n      },\n   })\n\n   function TourPortal() {\n      const ctx = useContext(tourContext)\n\n      const ref = useRef<HTMLDivElement>(null)\n      const [, forceUpdate] = React.useState({})\n\n      const currentElement = useMemo(\n         () => ctx.nodes.get(order[ctx.current] ?? \"\"),\n         [ctx],\n      )\n\n      useEffect(() => {\n         const handleResize = () => {\n            forceUpdate({})\n         }\n\n         window.addEventListener(\"resize\", handleResize)\n         window.addEventListener(\"scroll\", handleResize)\n\n         return () => {\n            window.removeEventListener(\"resize\", handleResize)\n            window.removeEventListener(\"scroll\", handleResize)\n         }\n      }, [])\n\n      useEffect(() => {\n         if (ctx.show) {\n            forceUpdate({})\n         }\n      }, [ctx.show])\n\n      if (!currentElement) {\n         return <></>\n      }\n\n      const currentElementRect = currentElement.ref.getBoundingClientRect()\n\n      const height = ref.current?.getBoundingClientRect().height ?? 0\n      const width = ref.current?.getBoundingClientRect().width ?? 0\n\n      const closest = (): React.CSSProperties => {\n         const isCloseToTop = currentElementRect.top < height\n         const isCloseToLeft = currentElementRect.left < width\n         const isCloseToRight =\n            currentElementRect.right > window.innerWidth - width\n\n         if (isCloseToLeft) {\n            return {\n               left: currentElementRect.x + currentElementRect.width,\n               top:\n                  currentElementRect.y -\n                  height / 2 +\n                  currentElementRect.height / 2,\n            }\n         }\n\n         if (isCloseToRight) {\n            return {\n               left: currentElementRect.x - width,\n               top:\n                  currentElementRect.y -\n                  height / 2 +\n                  currentElementRect.height / 2,\n            }\n         }\n\n         if (isCloseToTop) {\n            return {\n               left:\n                  currentElementRect.x -\n                  width / 2 +\n                  currentElementRect.width / 2,\n               top: currentElementRect.y + currentElementRect.height,\n            }\n         }\n\n         return {\n            left:\n               currentElementRect.x - width / 2 + currentElementRect.width / 2,\n            top: currentElementRect.y - height,\n         }\n      }\n\n      return createPortal(\n         <div\n            id=\"tour\"\n            className={ny(\n               \"pointer-events-auto fixed left-0 top-0 h-screen w-screen transition-none\",\n               !ctx.show ? \"invisible\" : \"visible\",\n            )}\n         >\n            <div\n               ref={ref}\n               className={ny(\n                  `absolute z-50 transition-all duration-500 ease-in-out`,\n               )}\n               style={{\n                  ...closest(),\n               }}\n            >\n               {currentElement.render}\n            </div>\n            <div\n               className=\"absolute z-40 h-screen w-screen overflow-hidden opacity-80 shadow-[0_0_0_100vw_rgba(0,0,0,.99)] transition-all duration-500 ease-in-out\"\n               style={{\n                  height: currentElementRect.height,\n                  width: currentElementRect.width,\n                  left: currentElementRect.x,\n                  top: currentElementRect.y,\n               }}\n            />\n         </div>,\n         document.body,\n      )\n   }\n\n   return {\n      TourProvider: function TourProvider(props: TourProps) {\n         const nodes = useRef<TourContext<T>[\"nodes\"]>(new Map())\n\n         const [show, setShow] = useState(false)\n         const [current, setCurrent] = useState(0)\n\n         const getNextIndex = (currIndex: number, nextDiff: number): number => {\n            const lookAheadIndex = currIndex + nextDiff\n            if (lookAheadIndex >= order.length || lookAheadIndex < 0) {\n               return currIndex\n            }\n            if (!nodes.current.has(order[lookAheadIndex])) {\n               return getNextIndex(lookAheadIndex, nextDiff)\n            }\n            return lookAheadIndex\n         }\n\n         return (\n            <tourContext.Provider\n               value={{\n                  nodes: nodes.current,\n                  current,\n                  show,\n                  next: () => {\n                     setCurrent((state) =>\n                        Math.min(getNextIndex(state, 1), order.length - 1),\n                     )\n                  },\n                  previous: () => {\n                     setCurrent((state) => Math.max(getNextIndex(state, -1), 0))\n                  },\n                  close: () => {\n                     setShow(false)\n                  },\n                  open: () => {\n                     setShow(true)\n                  },\n               }}\n            >\n               <TourPortal />\n               {props.children}\n            </tourContext.Provider>\n         )\n      },\n      context: tourContext,\n      useContext: () => useContext(tourContext),\n      TourFocus: function TourFocus(props: TourFocusProps<T>) {\n         const ctx = useContext(tourContext)\n         return (\n            <div\n               ref={(divRef) => {\n                  if (divRef && !ctx.nodes.has(props.name)) {\n                     ctx.nodes.set(props.name, {\n                        ref: divRef,\n                        render: props.tourRender,\n                        name: props.name,\n                     })\n                  }\n               }}\n            >\n               {props.children}\n            </div>\n         )\n      },\n   }\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/tweet-card-demo.json b/apps/web/public/r/styles/miami/tweet-card-demo.json
index 98f9a4bc..fcfc2a3d 100644
--- a/apps/web/public/r/styles/miami/tweet-card-demo.json
+++ b/apps/web/public/r/styles/miami/tweet-card-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tweet-card-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tweet-card-demo.tsx",
-      "content": "import ClientTweetCard from '~/registry/miami/ui/client-tweet-card'\n\n/**\n * <TweetCard /> (Server Side Only)\n * <ClientTweetCard /> (Client Side Only)\n */\nexport default async function TweetDemo() {\n   return <ClientTweetCard id=\"1845116507438620801\" className=\"shadow-2xl\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/tweet-card-demo.tsx",
+      "content": "import ClientTweetCard from \"~/registry/miami/ui/client-tweet-card\"\n\n/**\n * <TweetCard /> (Server Side Only)\n * <ClientTweetCard /> (Client Side Only)\n */\nexport default async function TweetDemo() {\n   return <ClientTweetCard id=\"1845116507438620801\" className=\"shadow-2xl\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/tweet-card-images.json b/apps/web/public/r/styles/miami/tweet-card-images.json
index cf100471..37f8796a 100644
--- a/apps/web/public/r/styles/miami/tweet-card-images.json
+++ b/apps/web/public/r/styles/miami/tweet-card-images.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tweet-card-images",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tweet-card-images.tsx",
-      "content": "import ClientTweetCard from '~/registry/miami/ui/client-tweet-card'\n\nexport default async function TweetImages() {\n   return <ClientTweetCard id=\"1803717292087296479\" className=\"shadow-2xl\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/tweet-card-images.tsx",
+      "content": "import ClientTweetCard from \"~/registry/miami/ui/client-tweet-card\"\n\nexport default async function TweetImages() {\n   return <ClientTweetCard id=\"1803717292087296479\" className=\"shadow-2xl\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/tweet-card-meta-preview.json b/apps/web/public/r/styles/miami/tweet-card-meta-preview.json
index 4d3ceeef..40dfbfd7 100644
--- a/apps/web/public/r/styles/miami/tweet-card-meta-preview.json
+++ b/apps/web/public/r/styles/miami/tweet-card-meta-preview.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tweet-card-meta-preview",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/tweet-card-meta-preview.tsx",
-      "content": "import ClientTweetCard from '~/registry/miami/ui/client-tweet-card'\n\nexport default async function TweetMetaPreview() {\n   return <ClientTweetCard id=\"1671108134591504385\" className=\"shadow-2xl\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/tweet-card-meta-preview.tsx",
+      "content": "import ClientTweetCard from \"~/registry/miami/ui/client-tweet-card\"\n\nexport default async function TweetMetaPreview() {\n   return <ClientTweetCard id=\"1671108134591504385\" className=\"shadow-2xl\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/tweet-card.json b/apps/web/public/r/styles/miami/tweet-card.json
index 56905706..2c986351 100644
--- a/apps/web/public/r/styles/miami/tweet-card.json
+++ b/apps/web/public/r/styles/miami/tweet-card.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "tweet-card",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "react-tweet"
   ],
   "files": [
     {
       "path": "ui/tweet-card.tsx",
-      "content": "import { Suspense } from 'react'\nimport {\n   type EnrichedTweet,\n   type TweetProps,\n   type TwitterComponents,\n   enrichTweet,\n} from 'react-tweet'\nimport { type Tweet, getTweet } from 'react-tweet/api'\nimport { ny } from '~/lib/utils'\n\ninterface TwitterIconProps {\n   className?: string\n   [key: string]: any\n}\nfunction Twitter({ className, ...props }: TwitterIconProps) {\n   return (\n      <svg\n         stroke=\"currentColor\"\n         fill=\"currentColor\"\n         strokeWidth=\"0\"\n         viewBox=\"0 0 24 24\"\n         height=\"1em\"\n         width=\"1em\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         className={className}\n         {...props}\n      >\n         <g>\n            <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n            <path d=\"M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z\"></path>\n         </g>\n      </svg>\n   )\n}\n\nfunction Verified({ className, ...props }: TwitterIconProps) {\n   return (\n      <svg\n         aria-label=\"Verified Account\"\n         viewBox=\"0 0 24 24\"\n         className={className}\n         {...props}\n      >\n         <g fill=\"currentColor\">\n            <path d=\"M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z\" />\n         </g>\n      </svg>\n   )\n}\n\nexport function truncate(str: string | null, length: number) {\n   if (!str || str.length <= length)\n      return str\n   return `${str.slice(0, length - 3)}...`\n}\n\nfunction Skeleton({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny('bg-primary/10 animate-pulse rounded-md', className)}\n         {...props}\n      />\n   )\n}\n\nexport function TweetSkeleton({\n   className,\n   ...props\n}: {\n   className?: string\n   [key: string]: any\n}) {\n   return (\n      <div\n         className={ny(\n            'flex size-full max-h-max min-w-72 flex-col gap-2 rounded-lg border p-4',\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"flex flex-row gap-2\">\n            <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n            <Skeleton className=\"h-10 w-full\" />\n         </div>\n         <Skeleton className=\"h-20 w-full\" />\n      </div>\n   )\n}\n\nexport function TweetNotFound({\n   className,\n   ...props\n}: {\n   className?: string\n   [key: string]: any\n}) {\n   return (\n      <div\n         className={ny(\n            'flex size-full flex-col items-center justify-center gap-2 rounded-lg border p-4',\n            className,\n         )}\n         {...props}\n      >\n         <h3>Tweet not found</h3>\n      </div>\n   )\n}\n\nexport function TweetHeader({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"flex flex-row justify-between tracking-tight\">\n         <div className=\"flex items-center space-x-2\">\n            <a href={tweet.user.url} target=\"_blank\" rel=\"noreferrer\">\n               <img\n                  title={`Profile picture of ${tweet.user.name}`}\n                  alt={tweet.user.screen_name}\n                  height={48}\n                  width={48}\n                  src={tweet.user.profile_image_url_https}\n                  className=\"overflow-hidden rounded-full border border-transparent\"\n               />\n            </a>\n            <div>\n               <a\n                  href={tweet.user.url}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"flex items-center whitespace-nowrap font-semibold\"\n               >\n                  {truncate(tweet.user.name, 20)}\n                  {tweet.user.verified\n                  || (tweet.user.is_blue_verified && (\n                     <Verified className=\"ml-1 inline size-4 text-blue-500\" />\n                  ))}\n               </a>\n               <div className=\"flex items-center space-x-1\">\n                  <a\n                     href={tweet.user.url}\n                     target=\"_blank\"\n                     rel=\"noreferrer\"\n                     className=\"text-sm text-gray-500 transition-all duration-75\"\n                  >\n                     @\n                     {truncate(tweet.user.screen_name, 16)}\n                  </a>\n               </div>\n            </div>\n         </div>\n         <a href={tweet.url} target=\"_blank\" rel=\"noreferrer\">\n            <span className=\"sr-only\">Link to tweet</span>\n            <Twitter className=\"size-5 items-start text-[#3BA9EE] transition-all ease-in-out hover:scale-105\" />\n         </a>\n      </div>\n   )\n}\n\nexport function TweetBody({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"break-words leading-normal tracking-tighter\">\n         {tweet.entities.map((entity, idx) => {\n            switch (entity.type) {\n               case 'url':\n               case 'symbol':\n               case 'hashtag':\n               case 'mention':\n                  return (\n                     <a\n                        key={idx}\n                        href={entity.href}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"text-sm font-normal text-gray-500\"\n                     >\n                        <span>{entity.text}</span>\n                     </a>\n                  )\n               case 'text':\n                  return (\n                     <span\n                        key={idx}\n                        className=\"text-sm font-normal\"\n                        dangerouslySetInnerHTML={{ __html: entity.text }}\n                     />\n                  )\n            }\n         })}\n      </div>\n   )\n}\n\nexport function TweetMedia({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"flex flex-1 items-center justify-center\">\n         {tweet.video && (\n            <video\n               poster={tweet.video.poster}\n               autoPlay\n               loop\n               muted\n               playsInline\n               className=\"rounded-xl border shadow-sm\"\n            >\n               <source src={tweet.video.variants[0].src} type=\"video/mp4\" />\n               Your browser does not support the video tag.\n            </video>\n         )}\n         {tweet.photos && (\n            <div className=\"relative flex transform-gpu snap-x snap-mandatory gap-4 overflow-x-auto\">\n               <div className=\"shrink-0 snap-center sm:w-2\" />\n               {tweet.photos.map(photo => (\n                  <img\n                     key={photo.url}\n                     src={photo.url}\n                     title={`Photo by ${tweet.user.name}`}\n                     alt={tweet.text}\n                     className=\"h-64 w-5/6 shrink-0 snap-center snap-always rounded-xl border object-cover shadow-sm\"\n                  />\n               ))}\n               <div className=\"shrink-0 snap-center sm:w-2\" />\n            </div>\n         )}\n         {!tweet.video\n         && !tweet.photos\n         // @ts-expect-error is fine\n         && tweet?.card?.binding_values?.thumbnail_image_large?.image_value.url && (\n            <img\n               src={\n                  // @ts-expect-error is fine\n                  tweet.card.binding_values.thumbnail_image_large.image_value.url\n               }\n               className=\"h-64 rounded-xl border object-cover shadow-sm\"\n            />\n         )}\n      </div>\n   )\n}\n\nexport function MagicTweet({\n   tweet,\n   components,\n   className,\n   ...props\n}: {\n   tweet: Tweet\n   components?: TwitterComponents\n   className?: string\n}) {\n   const enrichedTweet = enrichTweet(tweet)\n   return (\n      <div\n         className={ny(\n            'relative flex size-full max-w-lg flex-col gap-2 overflow-hidden rounded-lg border p-4 backdrop-blur-md',\n            className,\n         )}\n         {...props}\n      >\n         <TweetHeader tweet={enrichedTweet} />\n         <TweetBody tweet={enrichedTweet} />\n         <TweetMedia tweet={enrichedTweet} />\n      </div>\n   )\n}\n\n/**\n * TweetCard (Server Side Only)\n */\nexport async function TweetCard({\n   id,\n   components,\n   fallback = <TweetSkeleton />,\n   onError,\n   ...props\n}: TweetProps & {\n   className?: string\n}) {\n   const tweet = id\n      ? await getTweet(id).catch((err) => {\n         if (onError)\n            onError(err)\n         else console.error(err)\n      })\n      : undefined\n\n   if (!tweet) {\n      const NotFound = components?.TweetNotFound || TweetNotFound\n      return <NotFound {...props} />\n   }\n\n   return (\n      <Suspense fallback={fallback}>\n         <MagicTweet tweet={tweet} {...props} />\n      </Suspense>\n   )\n}\n\nexport default TweetCard\n",
-      "type": "registry:component",
+      "content": "import { Suspense } from \"react\"\nimport {\n   type EnrichedTweet,\n   type TweetProps,\n   type TwitterComponents,\n   enrichTweet,\n} from \"react-tweet\"\nimport { type Tweet, getTweet } from \"react-tweet/api\"\nimport { ny } from \"~/lib/utils\"\n\ninterface TwitterIconProps {\n   className?: string\n   [key: string]: any\n}\nfunction Twitter({ className, ...props }: TwitterIconProps) {\n   return (\n      <svg\n         stroke=\"currentColor\"\n         fill=\"currentColor\"\n         strokeWidth=\"0\"\n         viewBox=\"0 0 24 24\"\n         height=\"1em\"\n         width=\"1em\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         className={className}\n         {...props}\n      >\n         <g>\n            <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n            <path d=\"M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z\"></path>\n         </g>\n      </svg>\n   )\n}\n\nfunction Verified({ className, ...props }: TwitterIconProps) {\n   return (\n      <svg\n         aria-label=\"Verified Account\"\n         viewBox=\"0 0 24 24\"\n         className={className}\n         {...props}\n      >\n         <g fill=\"currentColor\">\n            <path d=\"M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z\" />\n         </g>\n      </svg>\n   )\n}\n\nexport function truncate(str: string | null, length: number) {\n   if (!str || str.length <= length) return str\n   return `${str.slice(0, length - 3)}...`\n}\n\nfunction Skeleton({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={ny(\"bg-primary/10 animate-pulse rounded-md\", className)}\n         {...props}\n      />\n   )\n}\n\nexport function TweetSkeleton({\n   className,\n   ...props\n}: {\n   className?: string\n   [key: string]: any\n}) {\n   return (\n      <div\n         className={ny(\n            \"flex size-full max-h-max min-w-72 flex-col gap-2 rounded-lg border p-4\",\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"flex flex-row gap-2\">\n            <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n            <Skeleton className=\"h-10 w-full\" />\n         </div>\n         <Skeleton className=\"h-20 w-full\" />\n      </div>\n   )\n}\n\nexport function TweetNotFound({\n   className,\n   ...props\n}: {\n   className?: string\n   [key: string]: any\n}) {\n   return (\n      <div\n         className={ny(\n            \"flex size-full flex-col items-center justify-center gap-2 rounded-lg border p-4\",\n            className,\n         )}\n         {...props}\n      >\n         <h3>Tweet not found</h3>\n      </div>\n   )\n}\n\nexport function TweetHeader({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"flex flex-row justify-between tracking-tight\">\n         <div className=\"flex items-center space-x-2\">\n            <a href={tweet.user.url} target=\"_blank\" rel=\"noreferrer\">\n               <img\n                  title={`Profile picture of ${tweet.user.name}`}\n                  alt={tweet.user.screen_name}\n                  height={48}\n                  width={48}\n                  src={tweet.user.profile_image_url_https}\n                  className=\"overflow-hidden rounded-full border border-transparent\"\n               />\n            </a>\n            <div>\n               <a\n                  href={tweet.user.url}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"flex items-center whitespace-nowrap font-semibold\"\n               >\n                  {truncate(tweet.user.name, 20)}\n                  {tweet.user.verified ||\n                     (tweet.user.is_blue_verified && (\n                        <Verified className=\"ml-1 inline size-4 text-blue-500\" />\n                     ))}\n               </a>\n               <div className=\"flex items-center space-x-1\">\n                  <a\n                     href={tweet.user.url}\n                     target=\"_blank\"\n                     rel=\"noreferrer\"\n                     className=\"text-sm text-gray-500 transition-all duration-75\"\n                  >\n                     @{truncate(tweet.user.screen_name, 16)}\n                  </a>\n               </div>\n            </div>\n         </div>\n         <a href={tweet.url} target=\"_blank\" rel=\"noreferrer\">\n            <span className=\"sr-only\">Link to tweet</span>\n            <Twitter className=\"size-5 items-start text-[#3BA9EE] transition-all ease-in-out hover:scale-105\" />\n         </a>\n      </div>\n   )\n}\n\nexport function TweetBody({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"break-words leading-normal tracking-tighter\">\n         {tweet.entities.map((entity, idx) => {\n            switch (entity.type) {\n               case \"url\":\n               case \"symbol\":\n               case \"hashtag\":\n               case \"mention\":\n                  return (\n                     <a\n                        key={idx}\n                        href={entity.href}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"text-sm font-normal text-gray-500\"\n                     >\n                        <span>{entity.text}</span>\n                     </a>\n                  )\n               case \"text\":\n                  return (\n                     <span\n                        key={idx}\n                        className=\"text-sm font-normal\"\n                        dangerouslySetInnerHTML={{ __html: entity.text }}\n                     />\n                  )\n            }\n         })}\n      </div>\n   )\n}\n\nexport function TweetMedia({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"flex flex-1 items-center justify-center\">\n         {tweet.video && (\n            <video\n               poster={tweet.video.poster}\n               autoPlay\n               loop\n               muted\n               playsInline\n               className=\"rounded-xl border shadow-sm\"\n            >\n               <source src={tweet.video.variants[0].src} type=\"video/mp4\" />\n               Your browser does not support the video tag.\n            </video>\n         )}\n         {tweet.photos && (\n            <div className=\"relative flex transform-gpu snap-x snap-mandatory gap-4 overflow-x-auto\">\n               <div className=\"shrink-0 snap-center sm:w-2\" />\n               {tweet.photos.map((photo) => (\n                  <img\n                     key={photo.url}\n                     src={photo.url}\n                     title={`Photo by ${tweet.user.name}`}\n                     alt={tweet.text}\n                     className=\"h-64 w-5/6 shrink-0 snap-center snap-always rounded-xl border object-cover shadow-sm\"\n                  />\n               ))}\n               <div className=\"shrink-0 snap-center sm:w-2\" />\n            </div>\n         )}\n         {!tweet.video &&\n            !tweet.photos &&\n            // @ts-expect-error is fine\n            tweet?.card?.binding_values?.thumbnail_image_large?.image_value\n               .url && (\n               <img\n                  src={\n                     // @ts-expect-error is fine\n                     tweet.card.binding_values.thumbnail_image_large.image_value\n                        .url\n                  }\n                  className=\"h-64 rounded-xl border object-cover shadow-sm\"\n               />\n            )}\n      </div>\n   )\n}\n\nexport function MagicTweet({\n   tweet,\n   components,\n   className,\n   ...props\n}: {\n   tweet: Tweet\n   components?: TwitterComponents\n   className?: string\n}) {\n   const enrichedTweet = enrichTweet(tweet)\n   return (\n      <div\n         className={ny(\n            \"relative flex size-full max-w-lg flex-col gap-2 overflow-hidden rounded-lg border p-4 backdrop-blur-md\",\n            className,\n         )}\n         {...props}\n      >\n         <TweetHeader tweet={enrichedTweet} />\n         <TweetBody tweet={enrichedTweet} />\n         <TweetMedia tweet={enrichedTweet} />\n      </div>\n   )\n}\n\n/**\n * TweetCard (Server Side Only)\n */\nexport async function TweetCard({\n   id,\n   components,\n   fallback = <TweetSkeleton />,\n   onError,\n   ...props\n}: TweetProps & {\n   className?: string\n}) {\n   const tweet = id\n      ? await getTweet(id).catch((err) => {\n           if (onError) onError(err)\n           else console.error(err)\n        })\n      : undefined\n\n   if (!tweet) {\n      const NotFound = components?.TweetNotFound || TweetNotFound\n      return <NotFound {...props} />\n   }\n\n   return (\n      <Suspense fallback={fallback}>\n         <MagicTweet tweet={tweet} {...props} />\n      </Suspense>\n   )\n}\n\nexport default TweetCard\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/typing-animation-demo.json b/apps/web/public/r/styles/miami/typing-animation-demo.json
index c9c68591..8896203b 100644
--- a/apps/web/public/r/styles/miami/typing-animation-demo.json
+++ b/apps/web/public/r/styles/miami/typing-animation-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typing-animation-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typing-animation-demo.tsx",
-      "content": "import TypingAnimation from '~/registry/miami/ui/typing-animation'\n\nexport default async function TextRevealDemo() {\n   return (\n      <TypingAnimation\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         text=\"Typing Animation\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/typing-animation-demo.tsx",
+      "content": "import TypingAnimation from \"~/registry/miami/ui/typing-animation\"\n\nexport default async function TextRevealDemo() {\n   return (\n      <TypingAnimation\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         text=\"Typing Animation\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/typing-animation.json b/apps/web/public/r/styles/miami/typing-animation.json
index cd0a4c6c..c5c439a9 100644
--- a/apps/web/public/r/styles/miami/typing-animation.json
+++ b/apps/web/public/r/styles/miami/typing-animation.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typing-animation",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "ui/typing-animation.tsx",
-      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface TypingAnimationProps {\n   text: string\n   duration?: number\n   className?: string\n}\n\nexport default function TypingAnimation({\n   text,\n   duration = 200,\n   className,\n}: TypingAnimationProps) {\n   const [displayedText, setDisplayedText] = useState<string>('')\n   const [i, setI] = useState<number>(0)\n\n   useEffect(() => {\n      const typingEffect = setInterval(() => {\n         if (i < text.length) {\n            setDisplayedText(text.substring(0, i + 1))\n            setI(i + 1)\n         }\n         else {\n            clearInterval(typingEffect)\n         }\n      }, duration)\n\n      return () => {\n         clearInterval(typingEffect)\n      }\n   }, [duration, i])\n\n   return (\n      <h1\n         className={ny(\n            'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',\n            className,\n         )}\n      >\n         {displayedText || text}\n      </h1>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface TypingAnimationProps {\n   text: string\n   duration?: number\n   className?: string\n}\n\nexport default function TypingAnimation({\n   text,\n   duration = 200,\n   className,\n}: TypingAnimationProps) {\n   const [displayedText, setDisplayedText] = useState<string>(\"\")\n   const [i, setI] = useState<number>(0)\n\n   useEffect(() => {\n      const typingEffect = setInterval(() => {\n         if (i < text.length) {\n            setDisplayedText(text.substring(0, i + 1))\n            setI(i + 1)\n         } else {\n            clearInterval(typingEffect)\n         }\n      }, duration)\n\n      return () => {\n         clearInterval(typingEffect)\n      }\n   }, [duration, i])\n\n   return (\n      <h1\n         className={ny(\n            \"font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm\",\n            className,\n         )}\n      >\n         {displayedText || text}\n      </h1>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/typography-blockquote.json b/apps/web/public/r/styles/miami/typography-blockquote.json
index fbe7256f..aa800618 100644
--- a/apps/web/public/r/styles/miami/typography-blockquote.json
+++ b/apps/web/public/r/styles/miami/typography-blockquote.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-blockquote",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-blockquote.tsx",
-      "content": "export default function TypographyBlockquote() {\n   return (\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n         \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n         they should pay for the privilege.\"\n      </blockquote>\n   )\n}\n",
+      "path": "examples/typography-blockquote.tsx",
+      "content": "export default function TypographyBlockquote() {\n   return (\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n         \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n         that they should pay for the privilege.\"\n      </blockquote>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-demo.json b/apps/web/public/r/styles/miami/typography-demo.json
index 13973e19..1ac8901d 100644
--- a/apps/web/public/r/styles/miami/typography-demo.json
+++ b/apps/web/public/r/styles/miami/typography-demo.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-demo.tsx",
-      "content": "export default function TypographyDemo() {\n   return (\n      <div>\n         <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n            The Joke Tax Chronicles\n         </h1>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            Once upon a time, in a far-off land, there was a very lazy king who\n            spent all day lounging on his throne. One day, his advisors came to him\n            with a problem: the kingdom was running out of money.\n         </p>\n         <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n            The King's Plan\n         </h2>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king thought long and hard, and finally came up with\n            {' '}\n            <a\n               href=\"#\"\n               className=\"text-primary font-medium underline underline-offset-4\"\n            >\n               a brilliant plan\n            </a>\n            : he would tax the jokes in the kingdom.\n         </p>\n         <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n            \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n            that they should pay for the privilege.\"\n         </blockquote>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            The Joke Tax\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king's subjects were not amused. They grumbled and complained, but\n            the king was firm:\n         </p>\n         <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n            <li>1st level of puns: 5 gold coins</li>\n            <li>2nd level of jokes: 10 gold coins</li>\n            <li>3rd level of one-liners : 20 gold coins</li>\n         </ul>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            As a result, people stopped telling jokes, and the kingdom fell into a\n            gloom. But there was one person who refused to let the king's\n            foolishness get him down: a court jester named Jokester.\n         </p>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            Jokester's Revolt\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            Jokester began sneaking into the castle in the middle of the night and\n            leaving jokes all over the place: under the king's pillow, in his soup,\n            even in the royal toilet. The king was furious, but he couldn't seem to\n            stop Jokester.\n         </p>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            And then, one day, the people of the kingdom discovered that the jokes\n            left by Jokester were so funny that they couldn't help but laugh. And\n            once they started laughing, they couldn't stop.\n         </p>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            The People's Rebellion\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The people of the kingdom, feeling uplifted by the laughter, started to\n            tell jokes and puns again, and soon the entire kingdom was in on the\n            joke.\n         </p>\n         <div className=\"my-6 w-full overflow-y-auto\">\n            <table className=\"w-full\">\n               <thead>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        King's Treasury\n                     </th>\n                     <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        People's happiness\n                     </th>\n                  </tr>\n               </thead>\n               <tbody>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Empty\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Overflowing\n                     </td>\n                  </tr>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Modest\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Satisfied\n                     </td>\n                  </tr>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Full\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Ecstatic\n                     </td>\n                  </tr>\n               </tbody>\n            </table>\n         </div>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king, seeing how much happier his subjects were, realized the error\n            of his ways and repealed the joke tax. Jokester was declared a hero, and\n            the kingdom lived happily ever after.\n         </p>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The moral of the story is: never underestimate the power of a good laugh\n            and always be careful of bad ideas.\n         </p>\n      </div>\n   )\n}\n",
+      "path": "examples/typography-demo.tsx",
+      "content": "export default function TypographyDemo() {\n   return (\n      <div>\n         <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n            The Joke Tax Chronicles\n         </h1>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            Once upon a time, in a far-off land, there was a very lazy king who\n            spent all day lounging on his throne. One day, his advisors came to\n            him with a problem: the kingdom was running out of money.\n         </p>\n         <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n            The King's Plan\n         </h2>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king thought long and hard, and finally came up with{\" \"}\n            <a\n               href=\"#\"\n               className=\"text-primary font-medium underline underline-offset-4\"\n            >\n               a brilliant plan\n            </a>\n            : he would tax the jokes in the kingdom.\n         </p>\n         <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n            \"After all,\" he said, \"everyone enjoys a good joke, so it's only\n            fair that they should pay for the privilege.\"\n         </blockquote>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            The Joke Tax\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king's subjects were not amused. They grumbled and complained,\n            but the king was firm:\n         </p>\n         <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n            <li>1st level of puns: 5 gold coins</li>\n            <li>2nd level of jokes: 10 gold coins</li>\n            <li>3rd level of one-liners : 20 gold coins</li>\n         </ul>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            As a result, people stopped telling jokes, and the kingdom fell into\n            a gloom. But there was one person who refused to let the king's\n            foolishness get him down: a court jester named Jokester.\n         </p>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            Jokester's Revolt\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            Jokester began sneaking into the castle in the middle of the night\n            and leaving jokes all over the place: under the king's pillow, in\n            his soup, even in the royal toilet. The king was furious, but he\n            couldn't seem to stop Jokester.\n         </p>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            And then, one day, the people of the kingdom discovered that the\n            jokes left by Jokester were so funny that they couldn't help but\n            laugh. And once they started laughing, they couldn't stop.\n         </p>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            The People's Rebellion\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The people of the kingdom, feeling uplifted by the laughter, started\n            to tell jokes and puns again, and soon the entire kingdom was in on\n            the joke.\n         </p>\n         <div className=\"my-6 w-full overflow-y-auto\">\n            <table className=\"w-full\">\n               <thead>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        King's Treasury\n                     </th>\n                     <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        People's happiness\n                     </th>\n                  </tr>\n               </thead>\n               <tbody>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Empty\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Overflowing\n                     </td>\n                  </tr>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Modest\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Satisfied\n                     </td>\n                  </tr>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Full\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Ecstatic\n                     </td>\n                  </tr>\n               </tbody>\n            </table>\n         </div>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king, seeing how much happier his subjects were, realized the\n            error of his ways and repealed the joke tax. Jokester was declared a\n            hero, and the kingdom lived happily ever after.\n         </p>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The moral of the story is: never underestimate the power of a good\n            laugh and always be careful of bad ideas.\n         </p>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-h1.json b/apps/web/public/r/styles/miami/typography-h1.json
index 7a14cfe9..40255cc4 100644
--- a/apps/web/public/r/styles/miami/typography-h1.json
+++ b/apps/web/public/r/styles/miami/typography-h1.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-h1",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-h1.tsx",
+      "path": "examples/typography-h1.tsx",
       "content": "export default function TypographyH1() {\n   return (\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n         Taxing Laughter: The Joke Tax Chronicles\n      </h1>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-h2.json b/apps/web/public/r/styles/miami/typography-h2.json
index 618f3931..ffeecfb9 100644
--- a/apps/web/public/r/styles/miami/typography-h2.json
+++ b/apps/web/public/r/styles/miami/typography-h2.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-h2",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-h2.tsx",
+      "path": "examples/typography-h2.tsx",
       "content": "export default function TypographyH2() {\n   return (\n      <h2 className=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\">\n         The People of the Kingdom\n      </h2>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-h3.json b/apps/web/public/r/styles/miami/typography-h3.json
index 5fb0d455..d00804e2 100644
--- a/apps/web/public/r/styles/miami/typography-h3.json
+++ b/apps/web/public/r/styles/miami/typography-h3.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-h3",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-h3.tsx",
+      "path": "examples/typography-h3.tsx",
       "content": "export default function TypographyH3() {\n   return (\n      <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n         The Joke Tax\n      </h3>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-h4.json b/apps/web/public/r/styles/miami/typography-h4.json
index 0b5eea62..f50f9141 100644
--- a/apps/web/public/r/styles/miami/typography-h4.json
+++ b/apps/web/public/r/styles/miami/typography-h4.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-h4",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-h4.tsx",
+      "path": "examples/typography-h4.tsx",
       "content": "export default function TypographyH4() {\n   return (\n      <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n         People stopped telling jokes\n      </h4>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-inline-code.json b/apps/web/public/r/styles/miami/typography-inline-code.json
index 28429f92..bf130c73 100644
--- a/apps/web/public/r/styles/miami/typography-inline-code.json
+++ b/apps/web/public/r/styles/miami/typography-inline-code.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-inline-code",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-inline-code.tsx",
+      "path": "examples/typography-inline-code.tsx",
       "content": "export default function TypographyInlineCode() {\n   return (\n      <code className=\"bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n         @radix-ui/react-alert-dialog\n      </code>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-large.json b/apps/web/public/r/styles/miami/typography-large.json
index b08ab56b..28fd1848 100644
--- a/apps/web/public/r/styles/miami/typography-large.json
+++ b/apps/web/public/r/styles/miami/typography-large.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-large",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-large.tsx",
+      "path": "examples/typography-large.tsx",
       "content": "export default function TypographyLarge() {\n   return <div className=\"text-lg font-semibold\">Are you absolutely sure?</div>\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-lead.json b/apps/web/public/r/styles/miami/typography-lead.json
index 93490110..1667e485 100644
--- a/apps/web/public/r/styles/miami/typography-lead.json
+++ b/apps/web/public/r/styles/miami/typography-lead.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-lead",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-lead.tsx",
-      "content": "export default function TypographyLead() {\n   return (\n      <p className=\"text-muted-foreground text-xl\">\n         A modal dialog that interrupts the user with important content and expects\n         a response.\n      </p>\n   )\n}\n",
+      "path": "examples/typography-lead.tsx",
+      "content": "export default function TypographyLead() {\n   return (\n      <p className=\"text-muted-foreground text-xl\">\n         A modal dialog that interrupts the user with important content and\n         expects a response.\n      </p>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-list.json b/apps/web/public/r/styles/miami/typography-list.json
index 576319fe..92e98431 100644
--- a/apps/web/public/r/styles/miami/typography-list.json
+++ b/apps/web/public/r/styles/miami/typography-list.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-list",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-list.tsx",
+      "path": "examples/typography-list.tsx",
       "content": "export default function TypographyList() {\n   return (\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n         <li>1st level of puns: 5 gold coins</li>\n         <li>2nd level of jokes: 10 gold coins</li>\n         <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-muted.json b/apps/web/public/r/styles/miami/typography-muted.json
index 326df2b1..9aee9a25 100644
--- a/apps/web/public/r/styles/miami/typography-muted.json
+++ b/apps/web/public/r/styles/miami/typography-muted.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-muted",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-muted.tsx",
+      "path": "examples/typography-muted.tsx",
       "content": "export default function TypographyMuted() {\n   return (\n      <p className=\"text-muted-foreground text-sm\">Enter your email address.</p>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-p.json b/apps/web/public/r/styles/miami/typography-p.json
index 60029aa5..5694382f 100644
--- a/apps/web/public/r/styles/miami/typography-p.json
+++ b/apps/web/public/r/styles/miami/typography-p.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-p",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-p.tsx",
-      "content": "export default function TypographyP() {\n   return (\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n         The king, seeing how much happier his subjects were, realized the error of\n         his ways and repealed the joke tax.\n      </p>\n   )\n}\n",
+      "path": "examples/typography-p.tsx",
+      "content": "export default function TypographyP() {\n   return (\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n         The king, seeing how much happier his subjects were, realized the error\n         of his ways and repealed the joke tax.\n      </p>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-small.json b/apps/web/public/r/styles/miami/typography-small.json
index 72d927d9..07807fca 100644
--- a/apps/web/public/r/styles/miami/typography-small.json
+++ b/apps/web/public/r/styles/miami/typography-small.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-small",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-small.tsx",
+      "path": "examples/typography-small.tsx",
       "content": "export default function TypographySmall() {\n   return (\n      <small className=\"text-sm font-medium leading-none\">Email address</small>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/typography-table.json b/apps/web/public/r/styles/miami/typography-table.json
index c35a0c9f..a9499bab 100644
--- a/apps/web/public/r/styles/miami/typography-table.json
+++ b/apps/web/public/r/styles/miami/typography-table.json
@@ -1,12 +1,14 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "typography-table",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/typography-table.tsx",
+      "path": "examples/typography-table.tsx",
       "content": "export default function TypographyTable() {\n   return (\n      <div className=\"my-6 w-full overflow-y-auto\">\n         <table className=\"w-full\">\n            <thead>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     King's Treasury\n                  </th>\n                  <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     People's happiness\n                  </th>\n               </tr>\n            </thead>\n            <tbody>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Empty\n                  </td>\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Overflowing\n                  </td>\n               </tr>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Modest\n                  </td>\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Satisfied\n                  </td>\n               </tr>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Full\n                  </td>\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Ecstatic\n                  </td>\n               </tr>\n            </tbody>\n         </table>\n      </div>\n   )\n}\n",
       "type": "registry:example",
       "target": ""
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/use-anchor-observer.json b/apps/web/public/r/styles/miami/use-anchor-observer.json
index 3f408022..e0155b0e 100644
--- a/apps/web/public/r/styles/miami/use-anchor-observer.json
+++ b/apps/web/public/r/styles/miami/use-anchor-observer.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "use-anchor-observer",
   "type": "registry:hook",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "hooks/use-anchor-observer.ts",
-      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\n\n/**\n * Find the active heading of page\n *\n * It selects the top heading by default, and the last item when reached the bottom of page.\n *\n * @param watch - An array of element ids to watch\n * @param single - only one active item at most\n * @returns Active anchor\n */\nexport function useAnchorObserver(watch: string[], single: boolean): string[] {\n   const [activeAnchor, setActiveAnchor] = useState<string[]>([])\n\n   useEffect(() => {\n      let visible: string[] = []\n      const observer = new IntersectionObserver(\n         (entries) => {\n            for (const entry of entries) {\n               if (entry.isIntersecting && !visible.includes(entry.target.id)) {\n                  visible = [...visible, entry.target.id]\n               }\n               else if (\n                  !entry.isIntersecting\n                  && visible.includes(entry.target.id)\n               ) {\n                  visible = visible.filter(v => v !== entry.target.id)\n               }\n            }\n\n            if (visible.length > 0)\n               setActiveAnchor(visible)\n         },\n         {\n            rootMargin: single ? '-80px 0% -70% 0%' : `-20px 0% -40% 0%`,\n            threshold: 1,\n         },\n      )\n\n      function onScroll(): void {\n         const element = document.scrollingElement\n         if (!element)\n            return\n\n         if (element.scrollTop === 0 && single) {\n            setActiveAnchor(watch.slice(0, 1))\n         }\n         else if (\n            element.scrollTop + element.clientHeight\n            >= element.scrollHeight - 6\n         ) {\n            setActiveAnchor((active) => {\n               return active.length > 0 && !single\n                  ? watch.slice(watch.indexOf(active[0]))\n                  : watch.slice(-1)\n            })\n         }\n      }\n\n      for (const heading of watch) {\n         const element = document.getElementById(heading)\n\n         if (element)\n            observer.observe(element)\n      }\n\n      onScroll()\n      window.addEventListener('scroll', onScroll)\n      return () => {\n         window.removeEventListener('scroll', onScroll)\n         observer.disconnect()\n      }\n   }, [single, watch])\n\n   return single ? activeAnchor.slice(0, 1) : activeAnchor\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\n/**\n * Find the active heading of page\n *\n * It selects the top heading by default, and the last item when reached the bottom of page.\n *\n * @param watch - An array of element ids to watch\n * @param single - only one active item at most\n * @returns Active anchor\n */\nexport function useAnchorObserver(watch: string[], single: boolean): string[] {\n   const [activeAnchor, setActiveAnchor] = useState<string[]>([])\n\n   useEffect(() => {\n      let visible: string[] = []\n      const observer = new IntersectionObserver(\n         (entries) => {\n            for (const entry of entries) {\n               if (entry.isIntersecting && !visible.includes(entry.target.id)) {\n                  visible = [...visible, entry.target.id]\n               } else if (\n                  !entry.isIntersecting &&\n                  visible.includes(entry.target.id)\n               ) {\n                  visible = visible.filter((v) => v !== entry.target.id)\n               }\n            }\n\n            if (visible.length > 0) setActiveAnchor(visible)\n         },\n         {\n            rootMargin: single ? \"-80px 0% -70% 0%\" : `-20px 0% -40% 0%`,\n            threshold: 1,\n         },\n      )\n\n      function onScroll(): void {\n         const element = document.scrollingElement\n         if (!element) return\n\n         if (element.scrollTop === 0 && single) {\n            setActiveAnchor(watch.slice(0, 1))\n         } else if (\n            element.scrollTop + element.clientHeight >=\n            element.scrollHeight - 6\n         ) {\n            setActiveAnchor((active) => {\n               return active.length > 0 && !single\n                  ? watch.slice(watch.indexOf(active[0]))\n                  : watch.slice(-1)\n            })\n         }\n      }\n\n      for (const heading of watch) {\n         const element = document.getElementById(heading)\n\n         if (element) observer.observe(element)\n      }\n\n      onScroll()\n      window.addEventListener(\"scroll\", onScroll)\n      return () => {\n         window.removeEventListener(\"scroll\", onScroll)\n         observer.disconnect()\n      }\n   }, [single, watch])\n\n   return single ? activeAnchor.slice(0, 1) : activeAnchor\n}\n",
       "type": "registry:hook",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/use-mobile.json b/apps/web/public/r/styles/miami/use-mobile.json
index 9fae205b..c4dc65aa 100644
--- a/apps/web/public/r/styles/miami/use-mobile.json
+++ b/apps/web/public/r/styles/miami/use-mobile.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "use-mobile",
   "type": "registry:hook",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "hooks/use-mobile.tsx",
-      "content": "import * as React from 'react'\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n   React.useEffect(() => {\n      const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n      const onChange = () => {\n         setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n      }\n      mql.addEventListener('change', onChange)\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n      return () => mql.removeEventListener('change', onChange)\n   }, [])\n\n   return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n      undefined,\n   )\n\n   React.useEffect(() => {\n      const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n      const onChange = () => {\n         setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n      }\n      mql.addEventListener(\"change\", onChange)\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n      return () => mql.removeEventListener(\"change\", onChange)\n   }, [])\n\n   return !!isMobile\n}\n",
       "type": "registry:hook",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/use-on-change.json b/apps/web/public/r/styles/miami/use-on-change.json
index 3bcc8945..77b1487f 100644
--- a/apps/web/public/r/styles/miami/use-on-change.json
+++ b/apps/web/public/r/styles/miami/use-on-change.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "use-on-change",
   "type": "registry:hook",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "hooks/use-on-change.ts",
-      "content": "'use client'\n\nimport { useState } from 'react'\n\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b)) {\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   }\n\n   return a !== b\n}\n\n/**\n * @param value - state to watch\n * @param onChange - when the state changed\n * @param isUpdated - a function that determines if the state is updated\n */\nexport function useOnChange<T>(\n   value: T,\n   onChange: (current: T, previous: T) => void,\n   isUpdated: (prev: T, current: T) => boolean = isDifferent,\n): void {\n   const [prev, setPrev] = useState<T>(value)\n\n   if (isUpdated(prev, value)) {\n      onChange(value, prev)\n      setPrev(value)\n   }\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b)) {\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   }\n\n   return a !== b\n}\n\n/**\n * @param value - state to watch\n * @param onChange - when the state changed\n * @param isUpdated - a function that determines if the state is updated\n */\nexport function useOnChange<T>(\n   value: T,\n   onChange: (current: T, previous: T) => void,\n   isUpdated: (prev: T, current: T) => boolean = isDifferent,\n): void {\n   const [prev, setPrev] = useState<T>(value)\n\n   if (isUpdated(prev, value)) {\n      onChange(value, prev)\n      setPrev(value)\n   }\n}\n",
       "type": "registry:hook",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/use-toast.json b/apps/web/public/r/styles/miami/use-toast.json
index 72b78cde..29723d40 100644
--- a/apps/web/public/r/styles/miami/use-toast.json
+++ b/apps/web/public/r/styles/miami/use-toast.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "use-toast",
   "type": "registry:hook",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
       "path": "hooks/use-toast.ts",
-      "content": "'use client'\n\n// Inspired by react-hot-toast library\nimport * as React from 'react'\n\nimport type {\n   ToastActionElement,\n   ToastProps,\n} from '~/registry/miami/ui/toast'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n   id: string\n   title?: React.ReactNode\n   description?: React.ReactNode\n   action?: ToastActionElement\n}\n\nconst actionTypes = {\n   ADD_TOAST: 'ADD_TOAST',\n   UPDATE_TOAST: 'UPDATE_TOAST',\n   DISMISS_TOAST: 'DISMISS_TOAST',\n   REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n   count = (count + 1) % Number.MAX_SAFE_INTEGER\n   return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n   | {\n      type: ActionType['ADD_TOAST']\n      toast: ToasterToast\n   }\n   | {\n      type: ActionType['UPDATE_TOAST']\n      toast: Partial<ToasterToast>\n   }\n   | {\n      type: ActionType['DISMISS_TOAST']\n      toastId?: ToasterToast['id']\n   }\n   | {\n      type: ActionType['REMOVE_TOAST']\n      toastId?: ToasterToast['id']\n   }\n\ninterface State {\n   toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n   if (toastTimeouts.has(toastId)) {\n      return\n   }\n\n   const timeout = setTimeout(() => {\n      toastTimeouts.delete(toastId)\n      dispatch({\n         type: 'REMOVE_TOAST',\n         toastId,\n      })\n   }, TOAST_REMOVE_DELAY)\n\n   toastTimeouts.set(toastId, timeout)\n}\n\nexport function reducer(state: State, action: Action): State {\n   switch (action.type) {\n      case 'ADD_TOAST':\n         return {\n            ...state,\n            toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n         }\n\n      case 'UPDATE_TOAST':\n         return {\n            ...state,\n            toasts: state.toasts.map(t =>\n               t.id === action.toast.id ? { ...t, ...action.toast } : t,\n            ),\n         }\n\n      case 'DISMISS_TOAST': {\n         const { toastId } = action\n\n         // ! Side effects ! - This could be extracted into a dismissToast() action,\n         // but I'll keep it here for simplicity\n         if (toastId) {\n            addToRemoveQueue(toastId)\n         }\n         else {\n            state.toasts.forEach((toast) => {\n               addToRemoveQueue(toast.id)\n            })\n         }\n\n         return {\n            ...state,\n            toasts: state.toasts.map(t =>\n               t.id === toastId || toastId === undefined\n                  ? {\n                        ...t,\n                        open: false,\n                     }\n                  : t,\n            ),\n         }\n      }\n      case 'REMOVE_TOAST':\n         if (action.toastId === undefined) {\n            return {\n               ...state,\n               toasts: [],\n            }\n         }\n         return {\n            ...state,\n            toasts: state.toasts.filter(t => t.id !== action.toastId),\n         }\n   }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n   memoryState = reducer(memoryState, action)\n   listeners.forEach((listener) => {\n      listener(memoryState)\n   })\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast({ ...props }: Toast) {\n   const id = genId()\n\n   const update = (props: ToasterToast) =>\n      dispatch({\n         type: 'UPDATE_TOAST',\n         toast: { ...props, id },\n      })\n   const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })\n\n   dispatch({\n      type: 'ADD_TOAST',\n      toast: {\n         ...props,\n         id,\n         open: true,\n         onOpenChange: (open) => {\n            if (!open)\n               dismiss()\n         },\n      },\n   })\n\n   return {\n      id,\n      dismiss,\n      update,\n   }\n}\n\nfunction useToast() {\n   const [state, setState] = React.useState<State>(memoryState)\n\n   React.useEffect(() => {\n      listeners.push(setState)\n      return () => {\n         const index = listeners.indexOf(setState)\n         if (index > -1) {\n            listeners.splice(index, 1)\n         }\n      }\n   }, [state])\n\n   return {\n      ...state,\n      toast,\n      dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),\n   }\n}\n\nexport { useToast, toast }\n",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type { ToastActionElement, ToastProps } from \"~/registry/miami/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n   id: string\n   title?: React.ReactNode\n   description?: React.ReactNode\n   action?: ToastActionElement\n}\n\nconst actionTypes = {\n   ADD_TOAST: \"ADD_TOAST\",\n   UPDATE_TOAST: \"UPDATE_TOAST\",\n   DISMISS_TOAST: \"DISMISS_TOAST\",\n   REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n   count = (count + 1) % Number.MAX_SAFE_INTEGER\n   return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n   | {\n        type: ActionType[\"ADD_TOAST\"]\n        toast: ToasterToast\n     }\n   | {\n        type: ActionType[\"UPDATE_TOAST\"]\n        toast: Partial<ToasterToast>\n     }\n   | {\n        type: ActionType[\"DISMISS_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n   | {\n        type: ActionType[\"REMOVE_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n\ninterface State {\n   toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n   if (toastTimeouts.has(toastId)) {\n      return\n   }\n\n   const timeout = setTimeout(() => {\n      toastTimeouts.delete(toastId)\n      dispatch({\n         type: \"REMOVE_TOAST\",\n         toastId,\n      })\n   }, TOAST_REMOVE_DELAY)\n\n   toastTimeouts.set(toastId, timeout)\n}\n\nexport function reducer(state: State, action: Action): State {\n   switch (action.type) {\n      case \"ADD_TOAST\":\n         return {\n            ...state,\n            toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n         }\n\n      case \"UPDATE_TOAST\":\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === action.toast.id ? { ...t, ...action.toast } : t,\n            ),\n         }\n\n      case \"DISMISS_TOAST\": {\n         const { toastId } = action\n\n         // ! Side effects ! - This could be extracted into a dismissToast() action,\n         // but I'll keep it here for simplicity\n         if (toastId) {\n            addToRemoveQueue(toastId)\n         } else {\n            state.toasts.forEach((toast) => {\n               addToRemoveQueue(toast.id)\n            })\n         }\n\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === toastId || toastId === undefined\n                  ? {\n                       ...t,\n                       open: false,\n                    }\n                  : t,\n            ),\n         }\n      }\n      case \"REMOVE_TOAST\":\n         if (action.toastId === undefined) {\n            return {\n               ...state,\n               toasts: [],\n            }\n         }\n         return {\n            ...state,\n            toasts: state.toasts.filter((t) => t.id !== action.toastId),\n         }\n   }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n   memoryState = reducer(memoryState, action)\n   listeners.forEach((listener) => {\n      listener(memoryState)\n   })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n   const id = genId()\n\n   const update = (props: ToasterToast) =>\n      dispatch({\n         type: \"UPDATE_TOAST\",\n         toast: { ...props, id },\n      })\n   const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n   dispatch({\n      type: \"ADD_TOAST\",\n      toast: {\n         ...props,\n         id,\n         open: true,\n         onOpenChange: (open) => {\n            if (!open) dismiss()\n         },\n      },\n   })\n\n   return {\n      id,\n      dismiss,\n      update,\n   }\n}\n\nfunction useToast() {\n   const [state, setState] = React.useState<State>(memoryState)\n\n   React.useEffect(() => {\n      listeners.push(setState)\n      return () => {\n         const index = listeners.indexOf(setState)\n         if (index > -1) {\n            listeners.splice(index, 1)\n         }\n      }\n   }, [state])\n\n   return {\n      ...state,\n      toast,\n      dismiss: (toastId?: string) =>\n         dispatch({ type: \"DISMISS_TOAST\", toastId }),\n   }\n}\n\nexport { useToast, toast }\n",
       "type": "registry:hook",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/utils.json b/apps/web/public/r/styles/miami/utils.json
index 97968d71..fc7c37ea 100644
--- a/apps/web/public/r/styles/miami/utils.json
+++ b/apps/web/public/r/styles/miami/utils.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "utils",
   "type": "registry:lib",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "clsx",
     "tailwind-merge"
@@ -8,7 +10,7 @@
   "files": [
     {
       "path": "lib/utils.ts",
-      "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function ny(...inputs: ClassValue[]) {\n   return twMerge(clsx(inputs))\n}\n",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function ny(...inputs: ClassValue[]) {\n   return twMerge(clsx(inputs))\n}\n",
       "type": "registry:lib",
       "target": ""
     }
diff --git a/apps/web/public/r/styles/miami/v0-login-01.json b/apps/web/public/r/styles/miami/v0-login-01.json
new file mode 100644
index 00000000..118864ab
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-login-01.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-login-01",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "internal/login-01.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"~/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/components/ui/card\"\nimport { Input } from \"~/components/ui/input\"\nimport { Label } from \"~/components/ui/label\"\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-screen w-full items-center justify-center px-4\">\n         <Card className=\"mx-auto max-w-sm\">\n            <CardHeader>\n               <CardTitle className=\"text-2xl\">Login</CardTitle>\n               <CardDescription>\n                  Enter your email below to login to your account\n               </CardDescription>\n            </CardHeader>\n            <CardContent>\n               <div className=\"grid gap-4\">\n                  <div className=\"grid gap-2\">\n                     <Label htmlFor=\"email\">Email</Label>\n                     <Input\n                        id=\"email\"\n                        type=\"email\"\n                        placeholder=\"m@example.com\"\n                        required\n                     />\n                  </div>\n                  <div className=\"grid gap-2\">\n                     <div className=\"flex items-center\">\n                        <Label htmlFor=\"password\">Password</Label>\n                        <Link\n                           href=\"#\"\n                           className=\"ml-auto inline-block text-sm underline\"\n                        >\n                           Forgot your password?\n                        </Link>\n                     </div>\n                     <Input id=\"password\" type=\"password\" required />\n                  </div>\n                  <Button type=\"submit\" className=\"w-full\">\n                     Login\n                  </Button>\n                  <Button variant=\"outline\" className=\"w-full\">\n                     Login with Google\n                  </Button>\n               </div>\n               <div className=\"mt-4 text-center text-sm\">\n                  Don&apos;t have an account?{\" \"}\n                  <Link href=\"#\" className=\"underline\">\n                     Sign up\n                  </Link>\n               </div>\n            </CardContent>\n         </Card>\n      </div>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-01.json b/apps/web/public/r/styles/miami/v0-sidebar-01.json
new file mode 100644
index 00000000..f394bb63
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-01.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-01",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-01.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Label } from \"~/components/ui/label\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   const [selectedVersion, setSelectedVersion] = React.useState(\n      data.versions[0],\n   )\n\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                                 <GalleryVerticalEnd className=\"size-4\" />\n                              </div>\n                              <div className=\"flex flex-col gap-0.5 leading-none\">\n                                 <span className=\"font-semibold\">\n                                    Documentation\n                                 </span>\n                                 <span className=\"\">v{selectedVersion}</span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                           align=\"start\"\n                        >\n                           {data.versions.map((version) => (\n                              <DropdownMenuItem\n                                 key={version}\n                                 onSelect={() => setSelectedVersion(version)}\n                              >\n                                 v{version}{\" \"}\n                                 {version === selectedVersion && (\n                                    <Check className=\"ml-auto\" />\n                                 )}\n                              </DropdownMenuItem>\n                           ))}\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n               <form>\n                  <SidebarGroup className=\"py-0\">\n                     <SidebarGroupContent className=\"relative\">\n                        <Label htmlFor=\"search\" className=\"sr-only\">\n                           Search\n                        </Label>\n                        <SidebarInput\n                           id=\"search\"\n                           placeholder=\"Search the docs...\"\n                           className=\"pl-8\"\n                        />\n                        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               </form>\n            </SidebarHeader>\n            <SidebarContent>\n               {/* We create a SidebarGroup for each parent. */}\n               {data.navMain.map((item) => (\n                  <SidebarGroup key={item.title}>\n                     <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n                     <SidebarGroupContent>\n                        <SidebarMenu>\n                           {item.items.map((item) => (\n                              <SidebarMenuItem key={item.title}>\n                                 <SidebarMenuButton\n                                    asChild\n                                    isActive={item.isActive}\n                                 >\n                                    <a href={item.url}>{item.title}</a>\n                                 </SidebarMenuButton>\n                              </SidebarMenuItem>\n                           ))}\n                        </SidebarMenu>\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               ))}\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": "components/sidebar-01.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-02.json b/apps/web/public/r/styles/miami/v0-sidebar-02.json
new file mode 100644
index 00000000..13151fb8
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-02.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-02",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-02.tsx",
+      "content": "\"use client\"\n\nimport {\n   Check,\n   ChevronRight,\n   ChevronsUpDown,\n   GalleryVerticalEnd,\n   Search,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Label } from \"~/components/ui/label\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   const [selectedVersion, setSelectedVersion] = React.useState(\n      data.versions[0],\n   )\n\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                                 <GalleryVerticalEnd className=\"size-4\" />\n                              </div>\n                              <div className=\"flex flex-col gap-0.5 leading-none\">\n                                 <span className=\"font-semibold\">\n                                    Documentation\n                                 </span>\n                                 <span className=\"\">v{selectedVersion}</span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                           align=\"start\"\n                        >\n                           {data.versions.map((version) => (\n                              <DropdownMenuItem\n                                 key={version}\n                                 onSelect={() => setSelectedVersion(version)}\n                              >\n                                 v{version}{\" \"}\n                                 {version === selectedVersion && (\n                                    <Check className=\"ml-auto\" />\n                                 )}\n                              </DropdownMenuItem>\n                           ))}\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n               <form>\n                  <SidebarGroup className=\"py-0\">\n                     <SidebarGroupContent className=\"relative\">\n                        <Label htmlFor=\"search\" className=\"sr-only\">\n                           Search\n                        </Label>\n                        <SidebarInput\n                           id=\"search\"\n                           placeholder=\"Search the docs...\"\n                           className=\"pl-8\"\n                        />\n                        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               </form>\n            </SidebarHeader>\n            <SidebarContent className=\"gap-0\">\n               {/* We create a collapsible SidebarGroup for each parent. */}\n               {data.navMain.map((item) => (\n                  <Collapsible\n                     key={item.title}\n                     title={item.title}\n                     defaultOpen\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroup>\n                        <SidebarGroupLabel\n                           asChild\n                           className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                        >\n                           <CollapsibleTrigger>\n                              {item.title}{\" \"}\n                              <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                           </CollapsibleTrigger>\n                        </SidebarGroupLabel>\n                        <CollapsibleContent>\n                           <SidebarGroupContent>\n                              <SidebarMenu>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuItem key={item.title}>\n                                       <SidebarMenuButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </CollapsibleContent>\n                     </SidebarGroup>\n                  </Collapsible>\n               ))}\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-03.json b/apps/web/public/r/styles/miami/v0-sidebar-03.json
new file mode 100644
index 00000000..654792f5
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-03.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-03",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-03.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Label } from \"~/components/ui/label\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n               <div className=\"flex items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-04.json b/apps/web/public/r/styles/miami/v0-sidebar-04.json
new file mode 100644
index 00000000..ddfee841
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-04.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-04",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-04.tsx",
+      "content": "\"use client\"\n\nimport { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"19rem\",\n            } as React.CSSProperties\n         }\n      >\n         <Sidebar variant=\"floating\">\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu className=\"gap-2\">\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-05.json b/apps/web/public/r/styles/miami/v0-sidebar-05.json
new file mode 100644
index 00000000..f13cfe8a
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-05.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-05",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-05.tsx",
+      "content": "import { GalleryVerticalEnd, Minus, Plus, Search } from \"lucide-react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport { Label } from \"~/components/ui/label\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n               <form>\n                  <SidebarGroup className=\"py-0\">\n                     <SidebarGroupContent className=\"relative\">\n                        <Label htmlFor=\"search\" className=\"sr-only\">\n                           Search\n                        </Label>\n                        <SidebarInput\n                           id=\"search\"\n                           placeholder=\"Search the docs...\"\n                           className=\"pl-8\"\n                        />\n                        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               </form>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu>\n                     {data.navMain.map((item, index) => (\n                        <Collapsible\n                           key={item.title}\n                           defaultOpen={index === 1}\n                           className=\"group/collapsible\"\n                        >\n                           <SidebarMenuItem>\n                              <CollapsibleTrigger asChild>\n                                 <SidebarMenuButton>\n                                    {item.title}{\" \"}\n                                    <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                                    <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                                 </SidebarMenuButton>\n                              </CollapsibleTrigger>\n                              {item.items?.length ? (\n                                 <CollapsibleContent>\n                                    <SidebarMenuSub>\n                                       {item.items.map((item) => (\n                                          <SidebarMenuSubItem key={item.title}>\n                                             <SidebarMenuSubButton\n                                                asChild\n                                                isActive={item.isActive}\n                                             >\n                                                <a href={item.url}>\n                                                   {item.title}\n                                                </a>\n                                             </SidebarMenuSubButton>\n                                          </SidebarMenuSubItem>\n                                       ))}\n                                    </SidebarMenuSub>\n                                 </CollapsibleContent>\n                              ) : null}\n                           </SidebarMenuItem>\n                        </Collapsible>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-06.json b/apps/web/public/r/styles/miami/v0-sidebar-06.json
new file mode 100644
index 00000000..c18f6c83
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-06.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-06",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-06.tsx",
+      "content": "\"use client\"\n\nimport { GalleryVerticalEnd, MoreHorizontal } from \"lucide-react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport { Button } from \"~/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"~/components/ui/card\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n   useSidebar,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <DropdownMenu key={item.title}>\n                           <SidebarMenuItem>\n                              <DropdownMenuTrigger asChild>\n                                 <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                                    {item.title}{\" \"}\n                                    <MoreHorizontal className=\"ml-auto\" />\n                                 </SidebarMenuButton>\n                              </DropdownMenuTrigger>\n                              {item.items?.length ? (\n                                 <DropdownMenuContent\n                                    side=\"bottom\"\n                                    align=\"end\"\n                                    className=\"min-w-56 rounded-lg\"\n                                 >\n                                    {item.items.map((item) => (\n                                       <DropdownMenuItem\n                                          asChild\n                                          key={item.title}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </DropdownMenuItem>\n                                    ))}\n                                 </DropdownMenuContent>\n                              ) : null}\n                           </SidebarMenuItem>\n                        </DropdownMenu>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <div className=\"p-1\">\n                  <Card className=\"shadow-none\">\n                     <form>\n                        <CardHeader className=\"p-4 pb-0\">\n                           <CardTitle className=\"text-sm\">\n                              Subscribe to our newsletter\n                           </CardTitle>\n                           <CardDescription>\n                              Opt-in to receive updates and news about the\n                              sidebar.\n                           </CardDescription>\n                        </CardHeader>\n                        <CardContent className=\"grid gap-2.5 p-4\">\n                           <SidebarInput type=\"email\" placeholder=\"Email\" />\n                           <Button\n                              className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n                              size=\"sm\"\n                           >\n                              Subscribe\n                           </Button>\n                        </CardContent>\n                     </form>\n                  </Card>\n               </div>\n            </SidebarFooter>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-07.json b/apps/web/public/r/styles/miami/v0-sidebar-07.json
new file mode 100644
index 00000000..5e40fc49
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-07.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-07",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-07.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   BadgeCheck,\n   Bell,\n   BookOpen,\n   Bot,\n   ChevronRight,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   Folder,\n   Forward,\n   Frame,\n   GalleryVerticalEnd,\n   LogOut,\n   Map,\n   MoreHorizontal,\n   PieChart,\n   Plus,\n   Settings2,\n   Sparkles,\n   SquareTerminal,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: GalleryVerticalEnd,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport default function Page() {\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 asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                                 <activeTeam.logo className=\"size-4\" />\n                              </div>\n                              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                 <span className=\"truncate font-semibold\">\n                                    {activeTeam.name}\n                                 </span>\n                                 <span className=\"truncate text-xs\">\n                                    {activeTeam.plan}\n                                 </span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                           align=\"start\"\n                           side=\"bottom\"\n                           sideOffset={4}\n                        >\n                           <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                              Teams\n                           </DropdownMenuLabel>\n                           {data.teams.map((team, index) => (\n                              <DropdownMenuItem\n                                 key={team.name}\n                                 onClick={() => setActiveTeam(team)}\n                                 className=\"gap-2 p-2\"\n                              >\n                                 <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                                    <team.logo className=\"size-4 shrink-0\" />\n                                 </div>\n                                 {team.name}\n                                 <DropdownMenuShortcut>\n                                    ⌘{index + 1}\n                                 </DropdownMenuShortcut>\n                              </DropdownMenuItem>\n                           ))}\n                           <DropdownMenuSeparator />\n                           <DropdownMenuItem className=\"gap-2 p-2\">\n                              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                                 <Plus className=\"size-4\" />\n                              </div>\n                              <div className=\"font-medium text-muted-foreground\">\n                                 Add team\n                              </div>\n                           </DropdownMenuItem>\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                           asChild\n                           defaultOpen={item.isActive}\n                           className=\"group/collapsible\"\n                        >\n                           <SidebarMenuItem>\n                              <CollapsibleTrigger asChild>\n                                 <SidebarMenuButton tooltip={item.title}>\n                                    {item.icon && <item.icon />}\n                                    <span>{item.title}</span>\n                                    <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                                 </SidebarMenuButton>\n                              </CollapsibleTrigger>\n                              <CollapsibleContent>\n                                 <SidebarMenuSub>\n                                    {item.items?.map((subItem) => (\n                                       <SidebarMenuSubItem key={subItem.title}>\n                                          <SidebarMenuSubButton asChild>\n                                             <a href={subItem.url}>\n                                                <span>{subItem.title}</span>\n                                             </a>\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 asChild>\n                              <a href={item.url}>\n                                 <item.icon />\n                                 <span>{item.name}</span>\n                              </a>\n                           </SidebarMenuButton>\n                           <DropdownMenu>\n                              <DropdownMenuTrigger asChild>\n                                 <SidebarMenuAction showOnHover>\n                                    <MoreHorizontal />\n                                    <span className=\"sr-only\">More</span>\n                                 </SidebarMenuAction>\n                              </DropdownMenuTrigger>\n                              <DropdownMenuContent\n                                 className=\"w-48 rounded-lg\"\n                                 side=\"bottom\"\n                                 align=\"end\"\n                              >\n                                 <DropdownMenuItem>\n                                    <Folder className=\"text-muted-foreground\" />\n                                    <span>View Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuItem>\n                                    <Forward className=\"text-muted-foreground\" />\n                                    <span>Share Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuSeparator />\n                                 <DropdownMenuItem>\n                                    <Trash2 className=\"text-muted-foreground\" />\n                                    <span>Delete Project</span>\n                                 </DropdownMenuItem>\n                              </DropdownMenuContent>\n                           </DropdownMenu>\n                        </SidebarMenuItem>\n                     ))}\n                     <SidebarMenuItem>\n                        <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                           <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                           <span>More</span>\n                        </SidebarMenuButton>\n                     </SidebarMenuItem>\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <Avatar className=\"h-8 w-8 rounded-lg\">\n                                 <AvatarImage\n                                    src={data.user.avatar}\n                                    alt={data.user.name}\n                                 />\n                                 <AvatarFallback className=\"rounded-lg\">\n                                    CN\n                                 </AvatarFallback>\n                              </Avatar>\n                              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                 <span className=\"truncate font-semibold\">\n                                    {data.user.name}\n                                 </span>\n                                 <span className=\"truncate text-xs\">\n                                    {data.user.email}\n                                 </span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto size-4\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                           side=\"bottom\"\n                           align=\"end\"\n                           sideOffset={4}\n                        >\n                           <DropdownMenuLabel className=\"p-0 font-normal\">\n                              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                                 <Avatar className=\"h-8 w-8 rounded-lg\">\n                                    <AvatarImage\n                                       src={data.user.avatar}\n                                       alt={data.user.name}\n                                    />\n                                    <AvatarFallback className=\"rounded-lg\">\n                                       CN\n                                    </AvatarFallback>\n                                 </Avatar>\n                                 <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                    <span className=\"truncate font-semibold\">\n                                       {data.user.name}\n                                    </span>\n                                    <span className=\"truncate text-xs\">\n                                       {data.user.email}\n                                    </span>\n                                 </div>\n                              </div>\n                           </DropdownMenuLabel>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <Sparkles />\n                                 Upgrade to Pro\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <BadgeCheck />\n                                 Account\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <CreditCard />\n                                 Billing\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <Bell />\n                                 Notifications\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuItem>\n                              <LogOut />\n                              Log out\n                           </DropdownMenuItem>\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 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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-08.json b/apps/web/public/r/styles/miami/v0-sidebar-08.json
new file mode 100644
index 00000000..34fc772d
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-08.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-08",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-08.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   BookOpen,\n   Bot,\n   ChevronRight,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   Folder,\n   Frame,\n   LifeBuoy,\n   LogOut,\n   Map,\n   MoreHorizontal,\n   PieChart,\n   Send,\n   Settings2,\n   Share,\n   Sparkles,\n   SquareTerminal,\n   Trash2,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: \"Support\",\n         url: \"#\",\n         icon: LifeBuoy,\n      },\n      {\n         title: \"Feedback\",\n         url: \"#\",\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: \"Design Engineering\",\n         url: \"#\",\n         icon: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <Sidebar variant=\"inset\">\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">\n                                 Acme Inc\n                              </span>\n                              <span className=\"truncate text-xs\">\n                                 Enterprise\n                              </span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\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                           asChild\n                           defaultOpen={item.isActive}\n                        >\n                           <SidebarMenuItem>\n                              <SidebarMenuButton asChild tooltip={item.title}>\n                                 <a href={item.url}>\n                                    <item.icon />\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              {item.items?.length ? (\n                                 <>\n                                    <CollapsibleTrigger asChild>\n                                       <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                          <ChevronRight />\n                                          <span className=\"sr-only\">\n                                             Toggle\n                                          </span>\n                                       </SidebarMenuAction>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent>\n                                       <SidebarMenuSub>\n                                          {item.items?.map((subItem) => (\n                                             <SidebarMenuSubItem\n                                                key={subItem.title}\n                                             >\n                                                <SidebarMenuSubButton asChild>\n                                                   <a href={subItem.url}>\n                                                      <span>\n                                                         {subItem.title}\n                                                      </span>\n                                                   </a>\n                                                </SidebarMenuSubButton>\n                                             </SidebarMenuSubItem>\n                                          ))}\n                                       </SidebarMenuSub>\n                                    </CollapsibleContent>\n                                 </>\n                              ) : null}\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 asChild>\n                              <a href={item.url}>\n                                 <item.icon />\n                                 <span>{item.name}</span>\n                              </a>\n                           </SidebarMenuButton>\n                           <DropdownMenu>\n                              <DropdownMenuTrigger asChild>\n                                 <SidebarMenuAction showOnHover>\n                                    <MoreHorizontal />\n                                    <span className=\"sr-only\">More</span>\n                                 </SidebarMenuAction>\n                              </DropdownMenuTrigger>\n                              <DropdownMenuContent\n                                 className=\"w-48\"\n                                 side=\"bottom\"\n                                 align=\"end\"\n                              >\n                                 <DropdownMenuItem>\n                                    <Folder className=\"text-muted-foreground\" />\n                                    <span>View Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuItem>\n                                    <Share className=\"text-muted-foreground\" />\n                                    <span>Share Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuSeparator />\n                                 <DropdownMenuItem>\n                                    <Trash2 className=\"text-muted-foreground\" />\n                                    <span>Delete Project</span>\n                                 </DropdownMenuItem>\n                              </DropdownMenuContent>\n                           </DropdownMenu>\n                        </SidebarMenuItem>\n                     ))}\n                     <SidebarMenuItem>\n                        <SidebarMenuButton>\n                           <MoreHorizontal />\n                           <span>More</span>\n                        </SidebarMenuButton>\n                     </SidebarMenuItem>\n                  </SidebarMenu>\n               </SidebarGroup>\n               <SidebarGroup className=\"mt-auto\">\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {data.navSecondary.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton asChild size=\"sm\">\n                                 <a href={item.url}>\n                                    <item.icon />\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <Avatar className=\"h-8 w-8 rounded-lg\">\n                                 <AvatarImage\n                                    src={data.user.avatar}\n                                    alt={data.user.name}\n                                 />\n                                 <AvatarFallback className=\"rounded-lg\">\n                                    CN\n                                 </AvatarFallback>\n                              </Avatar>\n                              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                 <span className=\"truncate font-semibold\">\n                                    {data.user.name}\n                                 </span>\n                                 <span className=\"truncate text-xs\">\n                                    {data.user.email}\n                                 </span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto size-4\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                           side=\"bottom\"\n                           align=\"end\"\n                           sideOffset={4}\n                        >\n                           <DropdownMenuLabel className=\"p-0 font-normal\">\n                              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                                 <Avatar className=\"h-8 w-8 rounded-lg\">\n                                    <AvatarImage\n                                       src={data.user.avatar}\n                                       alt={data.user.name}\n                                    />\n                                    <AvatarFallback className=\"rounded-lg\">\n                                       CN\n                                    </AvatarFallback>\n                                 </Avatar>\n                                 <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                    <span className=\"truncate font-semibold\">\n                                       {data.user.name}\n                                    </span>\n                                    <span className=\"truncate text-xs\">\n                                       {data.user.email}\n                                    </span>\n                                 </div>\n                              </div>\n                           </DropdownMenuLabel>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <Sparkles />\n                                 Upgrade to Pro\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <BadgeCheck />\n                                 Account\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <CreditCard />\n                                 Billing\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <Bell />\n                                 Notifications\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuItem>\n                              <LogOut />\n                              Log out\n                           </DropdownMenuItem>\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarFooter>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2\">\n               <div className=\"flex items-center gap-2 px-4\">\n                  <SidebarTrigger className=\"-ml-1\" />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-09.json b/apps/web/public/r/styles/miami/v0-sidebar-09.json
new file mode 100644
index 00000000..f0dba08e
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-09.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-09",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-09.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArchiveX,\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   File,\n   Inbox,\n   LogOut,\n   Send,\n   Sparkles,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Label } from \"~/components/ui/label\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n   useSidebar,\n} from \"~/components/ui/sidebar\"\nimport { Switch } from \"~/components/ui/switch\"\n\n// This is sample data\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         isActive: true,\n      },\n      {\n         title: \"Drafts\",\n         url: \"#\",\n         icon: File,\n         isActive: false,\n      },\n      {\n         title: \"Sent\",\n         url: \"#\",\n         icon: Send,\n         isActive: false,\n      },\n      {\n         title: \"Junk\",\n         url: \"#\",\n         icon: ArchiveX,\n         isActive: false,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n         isActive: false,\n      },\n   ],\n   mails: [\n      {\n         name: \"William Smith\",\n         email: \"williamsmith@example.com\",\n         subject: \"Meeting Tomorrow\",\n         date: \"09:34 AM\",\n         teaser:\n            \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n      },\n      {\n         name: \"Alice Smith\",\n         email: \"alicesmith@example.com\",\n         subject: \"Re: Project Update\",\n         date: \"Yesterday\",\n         teaser:\n            \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n      },\n      {\n         name: \"Bob Johnson\",\n         email: \"bobjohnson@example.com\",\n         subject: \"Weekend Plans\",\n         date: \"2 days ago\",\n         teaser:\n            \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n      },\n      {\n         name: \"Emily Davis\",\n         email: \"emilydavis@example.com\",\n         subject: \"Re: Question about Budget\",\n         date: \"2 days ago\",\n         teaser:\n            \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n      },\n      {\n         name: \"Michael Wilson\",\n         email: \"michaelwilson@example.com\",\n         subject: \"Important Announcement\",\n         date: \"1 week ago\",\n         teaser:\n            \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n      },\n      {\n         name: \"Sarah Brown\",\n         email: \"sarahbrown@example.com\",\n         subject: \"Re: Feedback on Proposal\",\n         date: \"1 week ago\",\n         teaser:\n            \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n      },\n      {\n         name: \"David Lee\",\n         email: \"davidlee@example.com\",\n         subject: \"New Project Idea\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n      },\n      {\n         name: \"Olivia Wilson\",\n         email: \"oliviawilson@example.com\",\n         subject: \"Vacation Plans\",\n         date: \"1 week ago\",\n         teaser:\n            \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n      },\n      {\n         name: \"James Martin\",\n         email: \"jamesmartin@example.com\",\n         subject: \"Re: Conference Registration\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n      },\n      {\n         name: \"Sophia White\",\n         email: \"sophiawhite@example.com\",\n         subject: \"Team Dinner\",\n         date: \"1 week ago\",\n         teaser:\n            \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"350px\",\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Inbox</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   // Note: I'm using state to show active item.\n   // IRL you should use the url/router.\n   const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n   const [mails, setMails] = React.useState(data.mails)\n   const { setOpen } = useSidebar()\n\n   return (\n      <Sidebar\n         collapsible=\"icon\"\n         className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n         {...props}\n      >\n         {/* This is the first sidebar */}\n         {/* We disable collapsible and adjust width to icon. */}\n         {/* This will make the sidebar appear as icons. */}\n         <Sidebar\n            collapsible=\"none\"\n            className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n         >\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton\n                        size=\"lg\"\n                        asChild\n                        className=\"md:h-8 md:p-0\"\n                     >\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">\n                                 Acme Inc\n                              </span>\n                              <span className=\"truncate text-xs\">\n                                 Enterprise\n                              </span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent className=\"px-1.5 md:px-0\">\n                     <SidebarMenu>\n                        {data.navMain.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 tooltip={{\n                                    children: item.title,\n                                    hidden: false,\n                                 }}\n                                 onClick={() => {\n                                    setActiveItem(item)\n                                    const mail = data.mails.sort(\n                                       () => Math.random() - 0.5,\n                                    )\n                                    setMails(\n                                       mail.slice(\n                                          0,\n                                          Math.max(\n                                             5,\n                                             Math.floor(Math.random() * 10) + 1,\n                                          ),\n                                       ),\n                                    )\n                                    setOpen(true)\n                                 }}\n                                 isActive={activeItem.title === item.title}\n                                 className=\"px-2.5 md:px-2\"\n                              >\n                                 <item.icon />\n                                 <span>{item.title}</span>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <NavUser user={data.user} />\n            </SidebarFooter>\n         </Sidebar>\n\n         {/* This is the second sidebar */}\n         {/* We disable collapsible and let it fill remaining space */}\n         <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n            <SidebarHeader className=\"gap-3.5 border-b p-4\">\n               <div className=\"flex w-full items-center justify-between\">\n                  <div className=\"text-base font-medium text-foreground\">\n                     {activeItem.title}\n                  </div>\n                  <Label className=\"flex items-center gap-2 text-sm\">\n                     <span>Unreads</span>\n                     <Switch className=\"shadow-none\" />\n                  </Label>\n               </div>\n               <SidebarInput placeholder=\"Type to search...\" />\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup className=\"px-0\">\n                  <SidebarGroupContent>\n                     {mails.map((mail) => (\n                        <a\n                           href=\"#\"\n                           key={mail.email}\n                           className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                        >\n                           <div className=\"flex w-full items-center gap-2\">\n                              <span>{mail.name}</span>{\" \"}\n                              <span className=\"ml-auto text-xs\">\n                                 {mail.date}\n                              </span>\n                           </div>\n                           <span className=\"font-medium\">{mail.subject}</span>\n                           <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                              {mail.teaser}\n                           </span>\n                        </a>\n                     ))}\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </Sidebar>\n   )\n}\n\nfunction NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-10.json b/apps/web/public/r/styles/miami/v0-sidebar-10.json
new file mode 100644
index 00000000..bfe9af7e
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-10.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-10",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-10.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowDown,\n   ArrowUp,\n   ArrowUpRight,\n   AudioWaveform,\n   Bell,\n   Blocks,\n   Calendar,\n   ChevronDown,\n   ChevronRight,\n   Command,\n   Copy,\n   CornerUpLeft,\n   CornerUpRight,\n   FileText,\n   GalleryVerticalEnd,\n   Home,\n   Inbox,\n   LineChart,\n   Link,\n   type LucideIcon,\n   MessageCircleQuestion,\n   MoreHorizontal,\n   Plus,\n   Search,\n   Settings2,\n   Sparkles,\n   Star,\n   StarOff,\n   Trash,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"~/components/ui/breadcrumb\"\nimport { Button } from \"~/components/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"~/components/ui/popover\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n   useSidebar,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: Calendar,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n   actions: [\n      [\n         {\n            label: \"Customize Page\",\n            icon: Settings2,\n         },\n         {\n            label: \"Turn into wiki\",\n            icon: FileText,\n         },\n      ],\n      [\n         {\n            label: \"Copy Link\",\n            icon: Link,\n         },\n         {\n            label: \"Duplicate\",\n            icon: Copy,\n         },\n         {\n            label: \"Move to\",\n            icon: CornerUpRight,\n         },\n         {\n            label: \"Move to Trash\",\n            icon: Trash2,\n         },\n      ],\n      [\n         {\n            label: \"Undo\",\n            icon: CornerUpLeft,\n         },\n         {\n            label: \"View analytics\",\n            icon: LineChart,\n         },\n         {\n            label: \"Version History\",\n            icon: GalleryVerticalEnd,\n         },\n         {\n            label: \"Show delete pages\",\n            icon: Trash,\n         },\n         {\n            label: \"Notifications\",\n            icon: Bell,\n         },\n      ],\n      [\n         {\n            label: \"Import\",\n            icon: ArrowUp,\n         },\n         {\n            label: \"Export\",\n            icon: ArrowDown,\n         },\n      ],\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-14 shrink-0 items-center gap-2\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n               <div className=\"ml-auto px-3\">\n                  <NavActions actions={data.actions} />\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction NavActions({\n   actions,\n}: {\n   actions: {\n      label: string\n      icon: LucideIcon\n   }[][]\n}) {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      setIsOpen(true)\n   }, [])\n\n   return (\n      <div className=\"flex items-center gap-2 text-sm\">\n         <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n            Edit Oct 08\n         </div>\n         <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n            <Star />\n         </Button>\n         <Popover open={isOpen} onOpenChange={setIsOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-7 w-7 data-[state=open]:bg-accent\"\n               >\n                  <MoreHorizontal />\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent\n               className=\"w-56 overflow-hidden rounded-lg p-0\"\n               align=\"end\"\n            >\n               <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n                  <SidebarContent>\n                     {actions.map((group, index) => (\n                        <SidebarGroup\n                           key={index}\n                           className=\"border-b last:border-none\"\n                        >\n                           <SidebarGroupContent className=\"gap-0\">\n                              <SidebarMenu>\n                                 {group.map((item, index) => (\n                                    <SidebarMenuItem key={index}>\n                                       <SidebarMenuButton>\n                                          <item.icon />{\" \"}\n                                          <span>{item.label}</span>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </SidebarGroup>\n                     ))}\n                  </SidebarContent>\n               </Sidebar>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n\nfunction NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n\nfunction NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n\nfunction NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-11.json b/apps/web/public/r/styles/miami/v0-sidebar-11.json
new file mode 100644
index 00000000..403ca7e6
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-11.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-11",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-11.tsx",
+      "content": "import { ChevronRight, File, Folder } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   changes: [\n      {\n         file: \"README.md\",\n         state: \"M\",\n      },\n      {\n         file: \"api/hello/route.ts\",\n         state: \"U\",\n      },\n      {\n         file: \"app/layout.tsx\",\n         state: \"M\",\n      },\n   ],\n   tree: [\n      [\n         \"app\",\n         [\n            \"api\",\n            [\"hello\", [\"route.ts\"]],\n            \"page.tsx\",\n            \"layout.tsx\",\n            [\"blog\", [\"page.tsx\"]],\n         ],\n      ],\n      [\n         \"components\",\n         [\"ui\", \"button.tsx\", \"card.tsx\"],\n         \"header.tsx\",\n         \"footer.tsx\",\n      ],\n      [\"lib\", [\"util.ts\"]],\n      [\"public\", \"favicon.ico\", \"vercel.svg\"],\n      \".eslintrc.json\",\n      \".gitignore\",\n      \"next.config.js\",\n      \"tailwind.config.js\",\n      \"package.json\",\n      \"README.md\",\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>button.tsx</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Changes</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.changes.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                           <SidebarMenuButton>\n                              <File />\n                              {item.file}\n                           </SidebarMenuButton>\n                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n            <SidebarGroup>\n               <SidebarGroupLabel>Files</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.tree.map((item, index) => (\n                        <Tree key={index} item={item} />\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n   const [name, ...items] = Array.isArray(item) ? item : [item]\n\n   if (!items.length) {\n      return (\n         <SidebarMenuButton\n            isActive={name === \"button.tsx\"}\n            className=\"data-[active=true]:bg-transparent\"\n         >\n            <File />\n            {name}\n         </SidebarMenuButton>\n      )\n   }\n\n   return (\n      <SidebarMenuItem>\n         <Collapsible\n            className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n            defaultOpen={name === \"components\" || name === \"ui\"}\n         >\n            <CollapsibleTrigger asChild>\n               <SidebarMenuButton>\n                  <ChevronRight className=\"transition-transform\" />\n                  <Folder />\n                  {name}\n               </SidebarMenuButton>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n               <SidebarMenuSub>\n                  {items.map((subItem, index) => (\n                     <Tree key={index} item={subItem} />\n                  ))}\n               </SidebarMenuSub>\n            </CollapsibleContent>\n         </Collapsible>\n      </SidebarMenuItem>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-12.json b/apps/web/public/r/styles/miami/v0-sidebar-12.json
new file mode 100644
index 00000000..d8057a8b
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-12.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-12",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-12.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   Check,\n   ChevronRight,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Plus,\n   Sparkles,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"~/components/ui/breadcrumb\"\nimport { Calendar } from \"~/components/ui/calendar\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n} from \"~/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>October 2024</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n                  {Array.from({ length: 20 }).map((_, i) => (\n                     <div\n                        key={i}\n                        className=\"aspect-square rounded-xl bg-muted/50\"\n                     />\n                  ))}\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n\nfunction DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-13.json b/apps/web/public/r/styles/miami/v0-sidebar-13.json
new file mode 100644
index 00000000..62a48b6b
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-13.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-13",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-13.tsx",
+      "content": "\"use client\"\n\nimport {\n   Bell,\n   Check,\n   Globe,\n   Home,\n   Keyboard,\n   Link,\n   Lock,\n   Menu,\n   MessageCircle,\n   Paintbrush,\n   Settings,\n   Video,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport { Button } from \"~/components/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogTitle,\n   DialogTrigger,\n} from \"~/components/ui/dialog\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"~/components/ui/sidebar\"\nconst data = {\n   nav: [\n      { name: \"Notifications\", icon: Bell },\n      { name: \"Navigation\", icon: Menu },\n      { name: \"Home\", icon: Home },\n      { name: \"Appearance\", icon: Paintbrush },\n      { name: \"Messages & media\", icon: MessageCircle },\n      { name: \"Language & region\", icon: Globe },\n      { name: \"Accessibility\", icon: Keyboard },\n      { name: \"Mark as read\", icon: Check },\n      { name: \"Audio & video\", icon: Video },\n      { name: \"Connected accounts\", icon: Link },\n      { name: \"Privacy & visibility\", icon: Lock },\n      { name: \"Advanced\", icon: Settings },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-svh items-center justify-center\">\n         <SettingsDialog />\n      </div>\n   )\n}\n\nfunction SettingsDialog() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <Dialog open={open} onOpenChange={setOpen}>\n         <DialogTrigger asChild>\n            <Button size=\"sm\">Open Dialog</Button>\n         </DialogTrigger>\n         <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n            <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n            <DialogDescription className=\"sr-only\">\n               Customize your settings here.\n            </DialogDescription>\n            <SidebarProvider className=\"items-start\">\n               <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n                  <SidebarContent>\n                     <SidebarGroup>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {data.nav.map((item) => (\n                                 <SidebarMenuItem key={item.name}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={\n                                          item.name === \"Messages & media\"\n                                       }\n                                    >\n                                       <a href=\"#\">\n                                          <item.icon />\n                                          <span>{item.name}</span>\n                                       </a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </SidebarGroup>\n                  </SidebarContent>\n               </Sidebar>\n               <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n                  <header className=\"flex h-16 shrink-0 items-center gap-2 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                        <Breadcrumb>\n                           <BreadcrumbList>\n                              <BreadcrumbItem className=\"hidden md:block\">\n                                 <BreadcrumbLink href=\"#\">\n                                    Settings\n                                 </BreadcrumbLink>\n                              </BreadcrumbItem>\n                              <BreadcrumbSeparator className=\"hidden md:block\" />\n                              <BreadcrumbItem>\n                                 <BreadcrumbPage>\n                                    Messages & media\n                                 </BreadcrumbPage>\n                              </BreadcrumbItem>\n                           </BreadcrumbList>\n                        </Breadcrumb>\n                     </div>\n                  </header>\n                  <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n                     {Array.from({ length: 10 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                        />\n                     ))}\n                  </div>\n               </main>\n            </SidebarProvider>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-14.json b/apps/web/public/r/styles/miami/v0-sidebar-14.json
new file mode 100644
index 00000000..5a9358a0
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-14.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-14",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-14.tsx",
+      "content": "import type * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"~/components/ui/breadcrumb\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n               <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n         <AppSidebar side=\"right\" />\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/v0-sidebar-15.json b/apps/web/public/r/styles/miami/v0-sidebar-15.json
new file mode 100644
index 00000000..bf20b4b1
--- /dev/null
+++ b/apps/web/public/r/styles/miami/v0-sidebar-15.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-15",
+  "type": "registry:internal",
+  "author": "nyxbui (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-15.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowUpRight,\n   AudioWaveform,\n   BadgeCheck,\n   Bell,\n   Blocks,\n   CalendarIcon,\n   Check,\n   ChevronDown,\n   ChevronRight,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   Home,\n   Inbox,\n   Link,\n   LogOut,\n   type LucideIcon,\n   MessageCircleQuestion,\n   MoreHorizontal,\n   Plus,\n   Search,\n   Settings2,\n   Sparkles,\n   StarOff,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"~/components/ui/breadcrumb\"\nimport { Calendar } from \"~/components/ui/calendar\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"~/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"~/components/ui/dropdown-menu\"\nimport { Separator } from \"~/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n} from \"~/components/ui/sidebar\"\n// This is sample data.\nconst sidebarLeftData = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: CalendarIcon,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n}\n\n// This is sample data.\nconst sidebarRightData = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarLeft />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n         <SidebarRight />\n      </SidebarProvider>\n   )\n}\n\nfunction SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={sidebarLeftData.teams} />\n            <NavMain items={sidebarLeftData.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={sidebarLeftData.favorites} />\n            <NavWorkspaces workspaces={sidebarLeftData.workspaces} />\n            <NavSecondary\n               items={sidebarLeftData.navSecondary}\n               className=\"mt-auto\"\n            />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         collapsible=\"none\"\n         className=\"sticky hidden lg:flex top-0 h-svh border-l\"\n         {...props}\n      >\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={sidebarRightData.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={sidebarRightData.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n\nfunction Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n\nfunction DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n\nfunction NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n\nfunction NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n\nfunction NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/video-modal-demo.json b/apps/web/public/r/styles/miami/video-modal-demo.json
index fd89bbf6..6368248a 100644
--- a/apps/web/public/r/styles/miami/video-modal-demo.json
+++ b/apps/web/public/r/styles/miami/video-modal-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "video-modal-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/video-modal-demo.tsx",
-      "content": "import { PlayIcon } from '@radix-ui/react-icons'\nimport {\n   VideoModal,\n   VideoModalContent,\n   VideoModalDescription,\n   VideoModalTitle,\n   VideoModalTrigger,\n   VideoModalVideo,\n   VideoPlayButton,\n   VideoPlayer,\n   VideoPreview,\n} from '~/registry/miami/ui/video-modal'\nimport { Button } from '~/registry/miami/ui/button'\n\nfunction VideoModalDemo() {\n   return (\n      <div className=\"relative justify-center\">\n         <VideoModal>\n            <VideoModalTrigger>\n               <Button>Open modal</Button>\n            </VideoModalTrigger>\n            <VideoModalContent>\n               <VideoModalTitle>Modal Video Demo</VideoModalTitle>\n               <VideoModalDescription>\n                  Your subtitle or description here\n               </VideoModalDescription>\n               <VideoModalVideo>\n                  <VideoPlayer>\n                     <VideoPreview>\n                        <img\n                           src=\"https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200\"\n                           alt=\"Video preview\"\n                        />\n                     </VideoPreview>\n                     <VideoPlayButton>\n                        <button className=\"absolute inset-0 m-auto flex size-32 items-center justify-center rounded-full border border-white border-white/10 bg-white/50 transition duration-300 hover:bg-white/75\">\n                           <PlayIcon className=\"size-20 stroke-1 text-white\" />\n                        </button>\n                     </VideoPlayButton>\n                     <iframe\n                        className=\"size-full\"\n                        src=\"https://cdn.magicui.design/globe.mp4\"\n                        allow=\"accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;\"\n                        allowFullScreen\n                     />\n                  </VideoPlayer>\n               </VideoModalVideo>\n            </VideoModalContent>\n         </VideoModal>\n      </div>\n   )\n}\n\nexport default VideoModalDemo\n",
-      "type": "registry:component",
+      "path": "examples/video-modal-demo.tsx",
+      "content": "import { PlayIcon } from \"@radix-ui/react-icons\"\nimport { Button } from \"~/registry/miami/ui/button\"\nimport {\n   VideoModal,\n   VideoModalContent,\n   VideoModalDescription,\n   VideoModalTitle,\n   VideoModalTrigger,\n   VideoModalVideo,\n   VideoPlayButton,\n   VideoPlayer,\n   VideoPreview,\n} from \"~/registry/miami/ui/video-modal\"\n\nfunction VideoModalDemo() {\n   return (\n      <div className=\"relative justify-center\">\n         <VideoModal>\n            <VideoModalTrigger>\n               <Button>Open modal</Button>\n            </VideoModalTrigger>\n            <VideoModalContent>\n               <VideoModalTitle>Modal Video Demo</VideoModalTitle>\n               <VideoModalDescription>\n                  Your subtitle or description here\n               </VideoModalDescription>\n               <VideoModalVideo>\n                  <VideoPlayer>\n                     <VideoPreview>\n                        <img\n                           src=\"https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200\"\n                           alt=\"Video preview\"\n                        />\n                     </VideoPreview>\n                     <VideoPlayButton>\n                        <button className=\"absolute inset-0 m-auto flex size-32 items-center justify-center rounded-full border border-white border-white/10 bg-white/50 transition duration-300 hover:bg-white/75\">\n                           <PlayIcon className=\"size-20 stroke-1 text-white\" />\n                        </button>\n                     </VideoPlayButton>\n                     <iframe\n                        className=\"size-full\"\n                        src=\"https://cdn.magicui.design/globe.mp4\"\n                        allow=\"accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;\"\n                        allowFullScreen\n                     />\n                  </VideoPlayer>\n               </VideoModalVideo>\n            </VideoModalContent>\n         </VideoModal>\n      </div>\n   )\n}\n\nexport default VideoModalDemo\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/video-modal.json b/apps/web/public/r/styles/miami/video-modal.json
index c4ab3e8e..757f5b53 100644
--- a/apps/web/public/r/styles/miami/video-modal.json
+++ b/apps/web/public/r/styles/miami/video-modal.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "video-modal",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/video-modal.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { ny } from '~/lib/utils'\n\nconst VideoModal = DialogPrimitive.Root\n\nconst VideoModalTrigger = DialogPrimitive.Trigger\n\nconst VideoModalPortal = DialogPrimitive.Portal\n\nconst VideoModalClose = DialogPrimitive.Close\n\nconst VideoModalOverlay = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Overlay\n      ref={ref}\n      className={ny(\n         'data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in fixed inset-0 z-50 backdrop-blur-xl',\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst VideoModalContent = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <VideoModalPortal>\n      <VideoModalOverlay />\n      <DialogPrimitive.Content\n         ref={ref}\n         className={ny(\n            'fixed left-1/2 top-1/2 z-50 flex h-screen w-screen -translate-x-1/2 -translate-y-1/2 items-center justify-center p-3',\n            'data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] transition-all',\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"relative mx-auto flex size-full items-center justify-center rounded-2xl border border-gray-950/[.1] bg-gray-50/[.2] dark:border-gray-50/[.1] dark:bg-gray-950/[.5]\">\n            {/* Mobile close button */}\n            <CloseIcon isMobile />\n\n            <div className=\"flex h-4/5 w-full max-w-5xl gap-6\">\n               {/* Desktop close button */}\n               <CloseIcon />\n               <div className=\"flex w-full flex-col max-lg:p-4 max-lg:text-center\">\n                  {children}\n               </div>\n            </div>\n         </div>\n      </DialogPrimitive.Content>\n   </VideoModalPortal>\n))\n\nVideoModalContent.displayName = DialogPrimitive.Content.displayName\n\nconst VideoModalTitle = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Title\n      ref={ref}\n      className={ny(\n         'mb-4 text-4xl font-bold text-gray-950 dark:text-gray-50',\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalTitle.displayName = DialogPrimitive.Title.displayName\n\nconst VideoModalDescription = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Description\n      ref={ref}\n      className={ny(\n         'mb-6 text-xl text-gray-950/80 dark:text-gray-50/70',\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalDescription.displayName = DialogPrimitive.Description.displayName\n\nconst VideoPreview = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         'absolute inset-0 z-10 transition-opacity duration-500 group-[.playing]:pointer-events-none group-[.playing]:opacity-0',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoPreview.displayName = 'VideoPreview'\n\nconst VideoPlayButton = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         'absolute inset-0 z-20 flex items-center justify-center transition-opacity duration-300 group-[.playing]:pointer-events-none group-[.playing]:opacity-0',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoPlayButton.displayName = 'VideoPlayButton'\n\nconst VideoPlayer = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n   const [isPlaying, setIsPlaying] = React.useState(false)\n\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            'group relative aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover dark:border-gray-50/[.1]',\n            isPlaying && 'playing',\n            className,\n         )}\n         onClick={() => setIsPlaying(true)}\n         {...props}\n      >\n         {children}\n      </div>\n   )\n})\nVideoPlayer.displayName = 'VideoPlayer'\n\nconst VideoModalVideo = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         'aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover shadow-xl dark:border-gray-50/[.1]',\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoModalVideo.displayName = 'VideoModalVideo'\n\nconst CloseIcon = React.forwardRef<\n   React.ElementRef<typeof VideoModalClose>,\n   React.ComponentPropsWithoutRef<typeof VideoModalClose> & {\n      isMobile?: boolean\n   }\n>(({ className, isMobile = false, ...props }, ref) => (\n   <VideoModalClose\n      ref={ref}\n      className={ny(\n         'rounded-full border border-gray-950/[.1] bg-gray-950/[.01] p-2 transition duration-300 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',\n         isMobile\n            ? 'absolute right-4 top-4 lg:hidden'\n            : 'hidden self-start lg:block',\n         className,\n      )}\n      {...props}\n   >\n      <svg\n         fill=\"none\"\n         height=\"12\"\n         viewBox=\"0 0 12 12\"\n         width=\"12\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M1 1L11 11M11 1L1 11\"\n            className=\"stroke-current\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.5\"\n         >\n         </path>\n      </svg>\n      <span className=\"sr-only\">Close</span>\n   </VideoModalClose>\n))\n\nCloseIcon.displayName = 'CloseIcon'\n\nexport {\n   VideoModal,\n   VideoModalTrigger,\n   VideoModalContent,\n   VideoModalTitle,\n   VideoModalDescription,\n   VideoModalVideo,\n   VideoPreview,\n   VideoPlayButton,\n   VideoPlayer,\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport * as React from \"react\"\nimport { ny } from \"~/lib/utils\"\n\nconst VideoModal = DialogPrimitive.Root\n\nconst VideoModalTrigger = DialogPrimitive.Trigger\n\nconst VideoModalPortal = DialogPrimitive.Portal\n\nconst VideoModalClose = DialogPrimitive.Close\n\nconst VideoModalOverlay = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Overlay\n      ref={ref}\n      className={ny(\n         \"data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in fixed inset-0 z-50 backdrop-blur-xl\",\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst VideoModalContent = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <VideoModalPortal>\n      <VideoModalOverlay />\n      <DialogPrimitive.Content\n         ref={ref}\n         className={ny(\n            \"fixed left-1/2 top-1/2 z-50 flex h-screen w-screen -translate-x-1/2 -translate-y-1/2 items-center justify-center p-3\",\n            \"data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] transition-all\",\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"relative mx-auto flex size-full items-center justify-center rounded-2xl border border-gray-950/[.1] bg-gray-50/[.2] dark:border-gray-50/[.1] dark:bg-gray-950/[.5]\">\n            {/* Mobile close button */}\n            <CloseIcon isMobile />\n\n            <div className=\"flex h-4/5 w-full max-w-5xl gap-6\">\n               {/* Desktop close button */}\n               <CloseIcon />\n               <div className=\"flex w-full flex-col max-lg:p-4 max-lg:text-center\">\n                  {children}\n               </div>\n            </div>\n         </div>\n      </DialogPrimitive.Content>\n   </VideoModalPortal>\n))\n\nVideoModalContent.displayName = DialogPrimitive.Content.displayName\n\nconst VideoModalTitle = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Title\n      ref={ref}\n      className={ny(\n         \"mb-4 text-4xl font-bold text-gray-950 dark:text-gray-50\",\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalTitle.displayName = DialogPrimitive.Title.displayName\n\nconst VideoModalDescription = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Description\n      ref={ref}\n      className={ny(\n         \"mb-6 text-xl text-gray-950/80 dark:text-gray-50/70\",\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalDescription.displayName = DialogPrimitive.Description.displayName\n\nconst VideoPreview = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         \"absolute inset-0 z-10 transition-opacity duration-500 group-[.playing]:pointer-events-none group-[.playing]:opacity-0\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoPreview.displayName = \"VideoPreview\"\n\nconst VideoPlayButton = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         \"absolute inset-0 z-20 flex items-center justify-center transition-opacity duration-300 group-[.playing]:pointer-events-none group-[.playing]:opacity-0\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoPlayButton.displayName = \"VideoPlayButton\"\n\nconst VideoPlayer = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n   const [isPlaying, setIsPlaying] = React.useState(false)\n\n   return (\n      <div\n         ref={ref}\n         className={ny(\n            \"group relative aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover dark:border-gray-50/[.1]\",\n            isPlaying && \"playing\",\n            className,\n         )}\n         onClick={() => setIsPlaying(true)}\n         {...props}\n      >\n         {children}\n      </div>\n   )\n})\nVideoPlayer.displayName = \"VideoPlayer\"\n\nconst VideoModalVideo = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={ny(\n         \"aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover shadow-xl dark:border-gray-50/[.1]\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoModalVideo.displayName = \"VideoModalVideo\"\n\nconst CloseIcon = React.forwardRef<\n   React.ElementRef<typeof VideoModalClose>,\n   React.ComponentPropsWithoutRef<typeof VideoModalClose> & {\n      isMobile?: boolean\n   }\n>(({ className, isMobile = false, ...props }, ref) => (\n   <VideoModalClose\n      ref={ref}\n      className={ny(\n         \"rounded-full border border-gray-950/[.1] bg-gray-950/[.01] p-2 transition duration-300 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n         isMobile\n            ? \"absolute right-4 top-4 lg:hidden\"\n            : \"hidden self-start lg:block\",\n         className,\n      )}\n      {...props}\n   >\n      <svg\n         fill=\"none\"\n         height=\"12\"\n         viewBox=\"0 0 12 12\"\n         width=\"12\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M1 1L11 11M11 1L1 11\"\n            className=\"stroke-current\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.5\"\n         ></path>\n      </svg>\n      <span className=\"sr-only\">Close</span>\n   </VideoModalClose>\n))\n\nCloseIcon.displayName = \"CloseIcon\"\n\nexport {\n   VideoModal,\n   VideoModalTrigger,\n   VideoModalContent,\n   VideoModalTitle,\n   VideoModalDescription,\n   VideoModalVideo,\n   VideoPreview,\n   VideoPlayButton,\n   VideoPlayer,\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ],
diff --git a/apps/web/public/r/styles/miami/warp-background-demo.json b/apps/web/public/r/styles/miami/warp-background-demo.json
new file mode 100644
index 00000000..40a5aafb
--- /dev/null
+++ b/apps/web/public/r/styles/miami/warp-background-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "warp-background-demo",
+  "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/warp-background-demo.tsx",
+      "content": "import {\n   Card,\n   CardContent,\n   CardDescription,\n   CardTitle,\n} from \"~/registry/miami/ui/card\"\nimport { WarpBackground } from \"~/registry/miami/ui/warp-background\"\n\nexport default function ExampleComponentDemo() {\n   return (\n      <WarpBackground>\n         <Card className=\"w-80\">\n            <CardContent className=\"flex flex-col gap-2 p-4\">\n               <CardTitle>Congratulations on Your Promotion!</CardTitle>\n               <CardDescription>\n                  Your hard work and dedication have paid off. We&apos;re\n                  thrilled to see you take this next step in your career. Keep\n                  up the fantastic work!\n               </CardDescription>\n            </CardContent>\n         </Card>\n      </WarpBackground>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/warp-background.json b/apps/web/public/r/styles/miami/warp-background.json
new file mode 100644
index 00000000..77e3bca3
--- /dev/null
+++ b/apps/web/public/r/styles/miami/warp-background.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "warp-background",
+  "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/warp-background.tsx",
+      "content": "import { motion } from \"motion/react\"\nimport type React from \"react\"\nimport { type HTMLAttributes, useCallback, useMemo } from \"react\"\nimport { ny } from \"~/registry/miami/lib/utils\"\n\ninterface WarpBackgroundProps extends HTMLAttributes<HTMLDivElement> {\n   children: React.ReactNode\n   perspective?: number\n   beamsPerSide?: number\n   beamSize?: number\n   beamDelayMax?: number\n   beamDelayMin?: number\n   beamDuration?: number\n   gridColor?: string\n}\n\nconst Beam = ({\n   width,\n   x,\n   delay,\n   duration,\n}: {\n   width: string | number\n   x: string | number\n   delay: number\n   duration: number\n}) => {\n   const hue = Math.floor(Math.random() * 360)\n   const ar = Math.floor(Math.random() * 10) + 1\n\n   return (\n      <motion.div\n         style={\n            {\n               \"--x\": `${x}`,\n               \"--width\": `${width}`,\n               \"--aspect-ratio\": `${ar}`,\n               \"--background\": `linear-gradient(hsl(${hue} 80% 60%), transparent)`,\n            } as React.CSSProperties\n         }\n         className={`absolute left-[var(--x)] top-0 [aspect-ratio:1/var(--aspect-ratio)] [background:var(--background)] [width:var(--width)]`}\n         initial={{ y: \"100cqmax\", x: \"-50%\" }}\n         animate={{ y: \"-100%\", x: \"-50%\" }}\n         transition={{\n            duration,\n            delay,\n            repeat: Number.POSITIVE_INFINITY,\n            ease: \"linear\",\n         }}\n      />\n   )\n}\n\nexport const WarpBackground: React.FC<WarpBackgroundProps> = ({\n   children,\n   perspective = 100,\n   className,\n   beamsPerSide = 3,\n   beamSize = 5,\n   beamDelayMax = 3,\n   beamDelayMin = 0,\n   beamDuration = 3,\n   gridColor = \"hsl(var(--border))\",\n   ...props\n}) => {\n   const generateBeams = useCallback(() => {\n      const beams = []\n      const cellsPerSide = Math.floor(100 / beamSize)\n      const step = cellsPerSide / beamsPerSide\n\n      for (let i = 0; i < beamsPerSide; i++) {\n         const x = Math.floor(i * step)\n         const delay =\n            Math.random() * (beamDelayMax - beamDelayMin) + beamDelayMin\n         beams.push({ x, delay })\n      }\n      return beams\n   }, [beamsPerSide, beamSize, beamDelayMax, beamDelayMin])\n\n   const topBeams = useMemo(() => generateBeams(), [generateBeams])\n   const rightBeams = useMemo(() => generateBeams(), [generateBeams])\n   const bottomBeams = useMemo(() => generateBeams(), [generateBeams])\n   const leftBeams = useMemo(() => generateBeams(), [generateBeams])\n\n   return (\n      <div className={ny(\"relative rounded border p-20\", className)} {...props}>\n         <div\n            style={\n               {\n                  \"--perspective\": `${perspective}px`,\n                  \"--grid-color\": gridColor,\n                  \"--beam-size\": `${beamSize}%`,\n               } as React.CSSProperties\n            }\n            className={\n               \"pointer-events-none absolute left-0 top-0 size-full overflow-hidden [clip-path:inset(0)] [container-type:size] [perspective:var(--perspective)] [transform-style:preserve-3d]\"\n            }\n         >\n            {/* top side */}\n            <div className=\"absolute [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]\">\n               {topBeams.map((beam, index) => (\n                  <Beam\n                     key={`top-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n            {/* bottom side */}\n            <div className=\"absolute top-full [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]\">\n               {bottomBeams.map((beam, index) => (\n                  <Beam\n                     key={`bottom-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n            {/* left side */}\n            <div className=\"absolute left-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:0%_0%] [transform:rotate(90deg)_rotateX(-90deg)] [width:100cqh]\">\n               {leftBeams.map((beam, index) => (\n                  <Beam\n                     key={`left-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n            {/* right side */}\n            <div className=\"absolute right-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [width:100cqh] [transform-origin:100%_0%] [transform:rotate(-90deg)_rotateX(-90deg)]\">\n               {rightBeams.map((beam, index) => (\n                  <Beam\n                     key={`right-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n         </div>\n         <div className=\"relative\">{children}</div>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/r/styles/miami/wavy-dot-pattern-demo.json b/apps/web/public/r/styles/miami/wavy-dot-pattern-demo.json
index b2004a30..e08ba029 100644
--- a/apps/web/public/r/styles/miami/wavy-dot-pattern-demo.json
+++ b/apps/web/public/r/styles/miami/wavy-dot-pattern-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "wavy-dot-pattern-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/wavy-dot-pattern-demo.tsx",
-      "content": "import WavyDotPattern from '~/registry/miami/ui/wavy-dot-pattern'\n\nexport default function WavyDotPatternDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl \">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-4xl font-semibold tracking-tighter text-black dark:text-white\">\n            Wavy Dot Pattern\n         </p>\n\n         <WavyDotPattern\n            gridWidth={30}\n            gridHeight={15}\n            dotWidth={8}\n            dotHeight={8}\n         />\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/wavy-dot-pattern-demo.tsx",
+      "content": "import WavyDotPattern from \"~/registry/miami/ui/wavy-dot-pattern\"\n\nexport default function WavyDotPatternDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl \">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-4xl font-semibold tracking-tighter text-black dark:text-white\">\n            Wavy Dot Pattern\n         </p>\n\n         <WavyDotPattern\n            gridWidth={30}\n            gridHeight={15}\n            dotWidth={8}\n            dotHeight={8}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/wavy-dot-pattern.json b/apps/web/public/r/styles/miami/wavy-dot-pattern.json
index 70ce969a..b67ba1de 100644
--- a/apps/web/public/r/styles/miami/wavy-dot-pattern.json
+++ b/apps/web/public/r/styles/miami/wavy-dot-pattern.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "wavy-dot-pattern",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "react-anime"
   ],
   "files": [
     {
       "path": "ui/wavy-dot-pattern.tsx",
-      "content": "'use client'\nimport { useState } from 'react'\nimport { anime } from 'react-anime'\nimport { ny } from '~/lib/utils'\n\ninterface WavyDotPatternProps {\n   className?: string\n   gridWidth?: number\n   gridHeight?: number\n   dotWidth?: number\n   dotHeight?: number\n}\n\nexport function WavyDotPattern({\n   className,\n   gridWidth,\n   gridHeight,\n   dotWidth,\n   dotHeight,\n}: WavyDotPatternProps) {\n   const [dotClickDisabled, setDotClickDisabled] = useState<boolean>(false)\n\n   const handleDotClick = (e: any, width: number, height: number) => {\n      setDotClickDisabled(true)\n\n      anime({\n         targets: '.dot-point',\n         scale: [\n            { value: 1.35, easing: 'easeOutSine', duration: 250 },\n            { value: 1, easing: 'easeInOutQuad', duration: 500 },\n         ],\n         translateY: [\n            { value: -15, easing: 'easeOutSine', duration: 250 },\n            { value: 1, easing: 'easeInOutQuad', duration: 500 },\n         ],\n         opacity: [\n            { value: 0.7, easing: 'easeOutSine', duration: 250 },\n            { value: 0.35, easing: 'easeInOutQuad', duration: 500 },\n         ],\n         delay: anime.stagger(100, {\n            grid: [width, height],\n            from: e.target.dataset.index,\n         }),\n      })\n\n      setTimeout(() => setDotClickDisabled(false), 2000)\n   }\n\n   const GRID_WIDTH = gridWidth || 30\n   const GRID_HEIGHT = gridHeight || 30\n\n   const DOT_WIDTH = dotWidth ? `w-[${dotWidth}px]` : 'w-[8px]'\n   const DOT_HEIGHT = dotHeight ? `h-[${dotHeight}px]` : 'h-[8px]'\n\n   let index = 0\n\n   const dots = []\n\n   for (let i = 0; i < GRID_WIDTH; i++) {\n      for (let j = 0; j < GRID_HEIGHT; j++) {\n         dots.push(\n            <button\n               className=\"rounded-[8px] p-[0.8rem]\"\n               type=\"button\"\n               onClick={e => handleDotClick(e, GRID_WIDTH, GRID_HEIGHT)}\n               data-index={index}\n               key={`${i}-${j}`}\n               disabled={dotClickDisabled}\n            >\n               <div\n                  className={ny(\n                     'dot-point',\n                     'rounded-xl bg-gradient-to-r from-[#d9cab3] to-black opacity-35 hover:from-black hover:to-black hover:opacity-100',\n                     DOT_WIDTH,\n                     DOT_HEIGHT,\n                  )}\n                  data-index={index}\n               />\n            </button>,\n         )\n         index++\n      }\n   }\n\n   return (\n      <div\n         style={{ gridTemplateColumns: `repeat(${GRID_WIDTH}, 1fr)` }}\n         className={ny('max-w-3/4 absolute z-0 grid', className)}\n      >\n         {dots.map(dot => dot)}\n      </div>\n   )\n}\n\nexport default WavyDotPattern\n",
-      "type": "registry:component",
+      "content": "\"use client\"\nimport { useState } from \"react\"\nimport { anime } from \"react-anime\"\nimport { ny } from \"~/lib/utils\"\n\ninterface WavyDotPatternProps {\n   className?: string\n   gridWidth?: number\n   gridHeight?: number\n   dotWidth?: number\n   dotHeight?: number\n}\n\nexport function WavyDotPattern({\n   className,\n   gridWidth,\n   gridHeight,\n   dotWidth,\n   dotHeight,\n}: WavyDotPatternProps) {\n   const [dotClickDisabled, setDotClickDisabled] = useState<boolean>(false)\n\n   const handleDotClick = (e: any, width: number, height: number) => {\n      setDotClickDisabled(true)\n\n      anime({\n         targets: \".dot-point\",\n         scale: [\n            { value: 1.35, easing: \"easeOutSine\", duration: 250 },\n            { value: 1, easing: \"easeInOutQuad\", duration: 500 },\n         ],\n         translateY: [\n            { value: -15, easing: \"easeOutSine\", duration: 250 },\n            { value: 1, easing: \"easeInOutQuad\", duration: 500 },\n         ],\n         opacity: [\n            { value: 0.7, easing: \"easeOutSine\", duration: 250 },\n            { value: 0.35, easing: \"easeInOutQuad\", duration: 500 },\n         ],\n         delay: anime.stagger(100, {\n            grid: [width, height],\n            from: e.target.dataset.index,\n         }),\n      })\n\n      setTimeout(() => setDotClickDisabled(false), 2000)\n   }\n\n   const GRID_WIDTH = gridWidth || 30\n   const GRID_HEIGHT = gridHeight || 30\n\n   const DOT_WIDTH = dotWidth ? `w-[${dotWidth}px]` : \"w-[8px]\"\n   const DOT_HEIGHT = dotHeight ? `h-[${dotHeight}px]` : \"h-[8px]\"\n\n   let index = 0\n\n   const dots = []\n\n   for (let i = 0; i < GRID_WIDTH; i++) {\n      for (let j = 0; j < GRID_HEIGHT; j++) {\n         dots.push(\n            <button\n               className=\"rounded-[8px] p-[0.8rem]\"\n               type=\"button\"\n               onClick={(e) => handleDotClick(e, GRID_WIDTH, GRID_HEIGHT)}\n               data-index={index}\n               key={`${i}-${j}`}\n               disabled={dotClickDisabled}\n            >\n               <div\n                  className={ny(\n                     \"dot-point\",\n                     \"rounded-xl bg-gradient-to-r from-[#d9cab3] to-black opacity-35 hover:from-black hover:to-black hover:opacity-100\",\n                     DOT_WIDTH,\n                     DOT_HEIGHT,\n                  )}\n                  data-index={index}\n               />\n            </button>,\n         )\n         index++\n      }\n   }\n\n   return (\n      <div\n         style={{ gridTemplateColumns: `repeat(${GRID_WIDTH}, 1fr)` }}\n         className={ny(\"max-w-3/4 absolute z-0 grid\", className)}\n      >\n         {dots.map((dot) => dot)}\n      </div>\n   )\n}\n\nexport default WavyDotPattern\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/wavy-text-demo.json b/apps/web/public/r/styles/miami/wavy-text-demo.json
index 47418aac..bb172f98 100644
--- a/apps/web/public/r/styles/miami/wavy-text-demo.json
+++ b/apps/web/public/r/styles/miami/wavy-text-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "wavy-text-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/wavy-text-demo.tsx",
-      "content": "import WavyText from '~/registry/miami/ui/wavy-text'\n\nexport default function WavyTextDemo() {\n   return (\n      <WavyText\n         word=\"Wavy Text\"\n         className=\"text-4xl font-bold text-black dark:text-white\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/wavy-text-demo.tsx",
+      "content": "import WavyText from \"~/registry/miami/ui/wavy-text\"\n\nexport default function WavyTextDemo() {\n   return (\n      <WavyText\n         word=\"Wavy Text\"\n         className=\"text-4xl font-bold text-black dark:text-white\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/wavy-text.json b/apps/web/public/r/styles/miami/wavy-text.json
index 53bf7a83..dcbea63b 100644
--- a/apps/web/public/r/styles/miami/wavy-text.json
+++ b/apps/web/public/r/styles/miami/wavy-text.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "wavy-text",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/wavy-text.tsx",
-      "content": "'use client'\n\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { useMemo } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface WavyTextProps {\n   word: string\n   className?: string\n   variant?: {\n      hidden: { y: number }\n      visible: { y: number }\n   }\n   duration?: number\n   delay?: number\n}\nfunction WavyText({\n   word,\n   className,\n   variant,\n   duration = 0.5,\n   delay = 0.05,\n}: WavyTextProps) {\n   const defaultVariants = {\n      hidden: { y: 10 },\n      visible: { y: -10 },\n   }\n   const combinedVariants = variant || defaultVariants\n   const characters = useMemo(() => word.split(''), [word])\n   return (\n      <div className=\"flex justify-center space-x-2 overflow-hidden p-3\">\n         <AnimatePresence>\n            {characters.map((char, i) => (\n               <motion.h1\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={combinedVariants}\n                  transition={{\n                     yoyo: Infinity,\n                     duration,\n                     delay: i * delay,\n                  }}\n                  className={ny(\n                     className,\n                     'font-display text-center text-4xl font-bold tracking-[-0.15em] md:text-7xl',\n                  )}\n               >\n                  {char}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n\nexport default WavyText\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { useMemo } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface WavyTextProps {\n   word: string\n   className?: string\n   variant?: {\n      hidden: { y: number }\n      visible: { y: number }\n   }\n   duration?: number\n   delay?: number\n}\nfunction WavyText({\n   word,\n   className,\n   variant,\n   duration = 0.5,\n   delay = 0.05,\n}: WavyTextProps) {\n   const defaultVariants = {\n      hidden: { y: 10 },\n      visible: { y: -10 },\n   }\n   const combinedVariants = variant || defaultVariants\n   const characters = useMemo(() => word.split(\"\"), [word])\n   return (\n      <div className=\"flex justify-center space-x-2 overflow-hidden p-3\">\n         <AnimatePresence>\n            {characters.map((char, i) => (\n               <motion.h1\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={combinedVariants}\n                  transition={{\n                     yoyo: Number.POSITIVE_INFINITY,\n                     duration,\n                     delay: i * delay,\n                  }}\n                  className={ny(\n                     className,\n                     \"font-display text-center text-4xl font-bold tracking-[-0.15em] md:text-7xl\",\n                  )}\n               >\n                  {char}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n\nexport default WavyText\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/word-fade-in-demo.json b/apps/web/public/r/styles/miami/word-fade-in-demo.json
index 197e7201..619a620d 100644
--- a/apps/web/public/r/styles/miami/word-fade-in-demo.json
+++ b/apps/web/public/r/styles/miami/word-fade-in-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "word-fade-in-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/word-fade-in-demo.tsx",
-      "content": "import WordFadeIn from '~/registry/miami/ui/word-fade-in'\n\nexport default async function WordFadeInDemo() {\n   return <WordFadeIn words=\"Word Fade In\" />\n}\n",
-      "type": "registry:component",
+      "path": "examples/word-fade-in-demo.tsx",
+      "content": "import WordFadeIn from \"~/registry/miami/ui/word-fade-in\"\n\nexport default async function WordFadeInDemo() {\n   return <WordFadeIn words=\"Word Fade In\" />\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/word-fade-in.json b/apps/web/public/r/styles/miami/word-fade-in.json
index 25452f57..4d364bb2 100644
--- a/apps/web/public/r/styles/miami/word-fade-in.json
+++ b/apps/web/public/r/styles/miami/word-fade-in.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "word-fade-in",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/word-fade-in.tsx",
-      "content": "'use client'\n\nimport type { Variants } from 'framer-motion'\nimport { motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface WordFadeInProps {\n   words: string\n   className?: string\n   delay?: number\n   variants?: Variants\n}\n\nexport default function WordFadeIn({\n   words,\n   delay = 0.15,\n   variants = {\n      hidden: { opacity: 0 },\n      visible: (i: any) => ({\n         y: 0,\n         opacity: 1,\n         transition: { delay: i * delay },\n      }),\n   },\n   className,\n}: WordFadeInProps) {\n   const _words = words.split(' ')\n\n   return (\n      <motion.h1\n         variants={variants}\n         initial=\"hidden\"\n         animate=\"visible\"\n         className={ny(\n            'font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white',\n            className,\n         )}\n      >\n         {_words.map((word, i) => (\n            <motion.span key={word} variants={variants} custom={i}>\n               {word}\n               {' '}\n            </motion.span>\n         ))}\n      </motion.h1>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface WordFadeInProps {\n   words: string\n   className?: string\n   delay?: number\n   variants?: Variants\n}\n\nexport default function WordFadeIn({\n   words,\n   delay = 0.15,\n   variants = {\n      hidden: { opacity: 0 },\n      visible: (i: any) => ({\n         y: 0,\n         opacity: 1,\n         transition: { delay: i * delay },\n      }),\n   },\n   className,\n}: WordFadeInProps) {\n   const _words = words.split(\" \")\n\n   return (\n      <motion.h1\n         variants={variants}\n         initial=\"hidden\"\n         animate=\"visible\"\n         className={ny(\n            \"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white\",\n            className,\n         )}\n      >\n         {_words.map((word, i) => (\n            <motion.span key={word} variants={variants} custom={i}>\n               {word}{\" \"}\n            </motion.span>\n         ))}\n      </motion.h1>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/word-pull-up-demo.json b/apps/web/public/r/styles/miami/word-pull-up-demo.json
index 687ea713..362df7c5 100644
--- a/apps/web/public/r/styles/miami/word-pull-up-demo.json
+++ b/apps/web/public/r/styles/miami/word-pull-up-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "word-pull-up-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/word-pull-up-demo.tsx",
-      "content": "import WordPullUp from '~/registry/miami/ui/word-pull-up'\n\nexport default async function WordPullUpDemo() {\n   return (\n      <WordPullUp\n         className=\"text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         words=\"Word Pull Up\"\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/word-pull-up-demo.tsx",
+      "content": "import WordPullUp from \"~/registry/miami/ui/word-pull-up\"\n\nexport default async function WordPullUpDemo() {\n   return (\n      <WordPullUp\n         className=\"text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         words=\"Word Pull Up\"\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/word-pull-up.json b/apps/web/public/r/styles/miami/word-pull-up.json
index 7592c770..09d6198c 100644
--- a/apps/web/public/r/styles/miami/word-pull-up.json
+++ b/apps/web/public/r/styles/miami/word-pull-up.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "word-pull-up",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/word-pull-up.tsx",
-      "content": "'use client'\n\nimport type { Variants } from 'framer-motion'\nimport { motion } from 'framer-motion'\nimport { ny } from '~/lib/utils'\n\ninterface WordPullUpProps {\n   words: string\n   delayMultiple?: number\n   wrapperFramerProps?: Variants\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function WordPullUp({\n   words,\n   wrapperFramerProps = {\n      hidden: { opacity: 0 },\n      show: {\n         opacity: 1,\n         transition: {\n            staggerChildren: 0.2,\n         },\n      },\n   },\n   framerProps = {\n      hidden: { y: 20, opacity: 0 },\n      show: { y: 0, opacity: 1 },\n   },\n   className,\n}: WordPullUpProps) {\n   return (\n      <motion.h1\n         variants={wrapperFramerProps}\n         initial=\"hidden\"\n         animate=\"show\"\n         className={ny(\n            'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',\n            className,\n         )}\n      >\n         {words.split(' ').map((word, i) => (\n            <motion.span\n               key={i}\n               variants={framerProps}\n               style={{ display: 'inline-block', paddingRight: '8px' }}\n            >\n               {word === '' ? <span>&nbsp;</span> : word}\n            </motion.span>\n         ))}\n      </motion.h1>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { motion } from \"framer-motion\"\nimport { ny } from \"~/lib/utils\"\n\ninterface WordPullUpProps {\n   words: string\n   delayMultiple?: number\n   wrapperFramerProps?: Variants\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function WordPullUp({\n   words,\n   wrapperFramerProps = {\n      hidden: { opacity: 0 },\n      show: {\n         opacity: 1,\n         transition: {\n            staggerChildren: 0.2,\n         },\n      },\n   },\n   framerProps = {\n      hidden: { y: 20, opacity: 0 },\n      show: { y: 0, opacity: 1 },\n   },\n   className,\n}: WordPullUpProps) {\n   return (\n      <motion.h1\n         variants={wrapperFramerProps}\n         initial=\"hidden\"\n         animate=\"show\"\n         className={ny(\n            \"font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm\",\n            className,\n         )}\n      >\n         {words.split(\" \").map((word, i) => (\n            <motion.span\n               key={i}\n               variants={framerProps}\n               style={{ display: \"inline-block\", paddingRight: \"8px\" }}\n            >\n               {word === \"\" ? <span>&nbsp;</span> : word}\n            </motion.span>\n         ))}\n      </motion.h1>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/word-rotate-demo.json b/apps/web/public/r/styles/miami/word-rotate-demo.json
index d5046d4d..5e992ef9 100644
--- a/apps/web/public/r/styles/miami/word-rotate-demo.json
+++ b/apps/web/public/r/styles/miami/word-rotate-demo.json
@@ -1,11 +1,13 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "word-rotate-demo",
   "type": "registry:example",
+  "author": "nyxbui (https://nyxbui.design)",
   "files": [
     {
-      "path": "example/word-rotate-demo.tsx",
-      "content": "import WordRotate from '~/registry/miami/ui/word-rotate'\n\nexport default async function WordRotateDemo() {\n   return (\n      <WordRotate\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         words={['Word', 'Rotate']}\n      />\n   )\n}\n",
-      "type": "registry:component",
+      "path": "examples/word-rotate-demo.tsx",
+      "content": "import WordRotate from \"~/registry/miami/ui/word-rotate\"\n\nexport default async function WordRotateDemo() {\n   return (\n      <WordRotate\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         words={[\"Word\", \"Rotate\"]}\n      />\n   )\n}\n",
+      "type": "registry:example",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/styles/miami/word-rotate.json b/apps/web/public/r/styles/miami/word-rotate.json
index 60c06f3b..110c5ebe 100644
--- a/apps/web/public/r/styles/miami/word-rotate.json
+++ b/apps/web/public/r/styles/miami/word-rotate.json
@@ -1,14 +1,16 @@
 {
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
   "name": "word-rotate",
   "type": "registry:ui",
+  "author": "nyxbui (https://nyxbui.design)",
   "dependencies": [
     "framer-motion"
   ],
   "files": [
     {
       "path": "ui/word-rotate.tsx",
-      "content": "'use client'\n\nimport type { HTMLMotionProps } from 'framer-motion'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { useEffect, useState } from 'react'\nimport { ny } from '~/lib/utils'\n\ninterface WordRotateProps {\n   words: string[]\n   duration?: number\n   framerProps?: HTMLMotionProps<'h1'>\n   className?: string\n}\n\nexport default function WordRotate({\n   words,\n   duration = 2500,\n   framerProps = {\n      initial: { opacity: 0, y: -50 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 50 },\n      transition: { duration: 0.25, ease: 'easeOut' },\n   },\n   className,\n}: WordRotateProps) {\n   const [index, setIndex] = useState(0)\n\n   useEffect(() => {\n      const interval = setInterval(() => {\n         setIndex(prevIndex => (prevIndex + 1) % words.length)\n      }, duration)\n\n      // Clean up interval on unmount\n      return () => clearInterval(interval)\n   }, [words, duration])\n\n   return (\n      <div className=\"overflow-hidden py-2\">\n         <AnimatePresence mode=\"wait\">\n            <motion.h1\n               key={words[index]}\n               className={ny(className)}\n               {...framerProps}\n            >\n               {words[index]}\n            </motion.h1>\n         </AnimatePresence>\n      </div>\n   )\n}\n",
-      "type": "registry:component",
+      "content": "\"use client\"\n\nimport type { HTMLMotionProps } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { useEffect, useState } from \"react\"\nimport { ny } from \"~/lib/utils\"\n\ninterface WordRotateProps {\n   words: string[]\n   duration?: number\n   framerProps?: HTMLMotionProps<\"h1\">\n   className?: string\n}\n\nexport default function WordRotate({\n   words,\n   duration = 2500,\n   framerProps = {\n      initial: { opacity: 0, y: -50 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 50 },\n      transition: { duration: 0.25, ease: \"easeOut\" },\n   },\n   className,\n}: WordRotateProps) {\n   const [index, setIndex] = useState(0)\n\n   useEffect(() => {\n      const interval = setInterval(() => {\n         setIndex((prevIndex) => (prevIndex + 1) % words.length)\n      }, duration)\n\n      // Clean up interval on unmount\n      return () => clearInterval(interval)\n   }, [words, duration])\n\n   return (\n      <div className=\"overflow-hidden py-2\">\n         <AnimatePresence mode=\"wait\">\n            <motion.h1\n               key={words[index]}\n               className={ny(className)}\n               {...framerProps}\n            >\n               {words[index]}\n            </motion.h1>\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
       "target": ""
     }
   ]
diff --git a/apps/web/public/r/themes/amber.json b/apps/web/public/r/themes/amber.json
deleted file mode 100644
index b93a7b17..00000000
--- a/apps/web/public/r/themes/amber.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "amber",
-  "label": "Amber",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "20.9 91.7% 14.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "20.9 91.7% 14.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "20.9 91.7% 14.1%",
-      "primary": "21.7 77.8% 26.5%",
-      "primary-foreground": "48 100% 96.1%",
-      "secondary": "48 96.5% 88.8%",
-      "secondary-foreground": "21.7 77.8% 26.5%",
-      "muted": "48 96.5% 88.8%",
-      "muted-foreground": "37.7 92.1% 50.2%",
-      "accent": "48 96.5% 88.8%",
-      "accent-foreground": "21.7 77.8% 26.5%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "48 100% 96.1%",
-      "border": "48 96.6% 76.7%",
-      "input": "48 96.6% 76.7%",
-      "ring": "20.9 91.7% 14.1%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "20.9 91.7% 14.1%",
-      "foreground": "48 100% 96.1%",
-      "card": "20.9 91.7% 14.1%",
-      "card-foreground": "48 100% 96.1%",
-      "popover": "20.9 91.7% 14.1%",
-      "popover-foreground": "48 100% 96.1%",
-      "primary": "48 100% 96.1%",
-      "primary-foreground": "21.7 77.8% 26.5%",
-      "secondary": "22.7 82.5% 31.4%",
-      "secondary-foreground": "48 100% 96.1%",
-      "muted": "22.7 82.5% 31.4%",
-      "muted-foreground": "43.3 96.4% 56.3%",
-      "accent": "22.7 82.5% 31.4%",
-      "accent-foreground": "48 100% 96.1%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "48 100% 96.1%",
-      "border": "22.7 82.5% 31.4%",
-      "input": "22.7 82.5% 31.4%",
-      "ring": "45.9 96.7% 64.5%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/blue.json b/apps/web/public/r/themes/blue.json
deleted file mode 100644
index 5852510b..00000000
--- a/apps/web/public/r/themes/blue.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "blue",
-  "label": "Blue",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "226.2 57% 21%",
-      "card": "0 0% 100%",
-      "card-foreground": "226.2 57% 21%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "226.2 57% 21%",
-      "primary": "224.4 64.3% 32.9%",
-      "primary-foreground": "213.8 100% 96.9%",
-      "secondary": "214.3 94.6% 92.7%",
-      "secondary-foreground": "224.4 64.3% 32.9%",
-      "muted": "214.3 94.6% 92.7%",
-      "muted-foreground": "217.2 91.2% 59.8%",
-      "accent": "214.3 94.6% 92.7%",
-      "accent-foreground": "224.4 64.3% 32.9%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "213.8 100% 96.9%",
-      "border": "213.3 96.9% 87.3%",
-      "input": "213.3 96.9% 87.3%",
-      "ring": "226.2 57% 21%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "226.2 57% 21%",
-      "foreground": "213.8 100% 96.9%",
-      "card": "226.2 57% 21%",
-      "card-foreground": "213.8 100% 96.9%",
-      "popover": "226.2 57% 21%",
-      "popover-foreground": "213.8 100% 96.9%",
-      "primary": "213.8 100% 96.9%",
-      "primary-foreground": "224.4 64.3% 32.9%",
-      "secondary": "225.9 70.7% 40.2%",
-      "secondary-foreground": "213.8 100% 96.9%",
-      "muted": "225.9 70.7% 40.2%",
-      "muted-foreground": "213.1 93.9% 67.8%",
-      "accent": "225.9 70.7% 40.2%",
-      "accent-foreground": "213.8 100% 96.9%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "213.8 100% 96.9%",
-      "border": "225.9 70.7% 40.2%",
-      "input": "225.9 70.7% 40.2%",
-      "ring": "211.7 96.4% 78.4%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/cyan.json b/apps/web/public/r/themes/cyan.json
deleted file mode 100644
index 97172eb9..00000000
--- a/apps/web/public/r/themes/cyan.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "cyan",
-  "label": "Cyan",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "197 78.9% 14.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "197 78.9% 14.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "197 78.9% 14.9%",
-      "primary": "196.4 63.6% 23.7%",
-      "primary-foreground": "183.2 100% 96.3%",
-      "secondary": "185.1 95.9% 90.4%",
-      "secondary-foreground": "196.4 63.6% 23.7%",
-      "muted": "185.1 95.9% 90.4%",
-      "muted-foreground": "188.7 94.5% 42.7%",
-      "accent": "185.1 95.9% 90.4%",
-      "accent-foreground": "196.4 63.6% 23.7%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "183.2 100% 96.3%",
-      "border": "186.2 93.5% 81.8%",
-      "input": "186.2 93.5% 81.8%",
-      "ring": "197 78.9% 14.9%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "197 78.9% 14.9%",
-      "foreground": "183.2 100% 96.3%",
-      "card": "197 78.9% 14.9%",
-      "card-foreground": "183.2 100% 96.3%",
-      "popover": "197 78.9% 14.9%",
-      "popover-foreground": "183.2 100% 96.3%",
-      "primary": "183.2 100% 96.3%",
-      "primary-foreground": "196.4 63.6% 23.7%",
-      "secondary": "194.4 69.6% 27.1%",
-      "secondary-foreground": "183.2 100% 96.3%",
-      "muted": "194.4 69.6% 27.1%",
-      "muted-foreground": "187.9 85.7% 53.3%",
-      "accent": "194.4 69.6% 27.1%",
-      "accent-foreground": "183.2 100% 96.3%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "183.2 100% 96.3%",
-      "border": "194.4 69.6% 27.1%",
-      "input": "194.4 69.6% 27.1%",
-      "ring": "187 92.4% 69%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/emerald.json b/apps/web/public/r/themes/emerald.json
deleted file mode 100644
index 725ce4eb..00000000
--- a/apps/web/public/r/themes/emerald.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "emerald",
-  "label": "Emerald",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "165.7 91.3% 9%",
-      "card": "0 0% 100%",
-      "card-foreground": "165.7 91.3% 9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "165.7 91.3% 9%",
-      "primary": "164.2 85.7% 16.5%",
-      "primary-foreground": "151.8 81% 95.9%",
-      "secondary": "149.3 80.4% 90%",
-      "secondary-foreground": "164.2 85.7% 16.5%",
-      "muted": "149.3 80.4% 90%",
-      "muted-foreground": "160.1 84.1% 39.4%",
-      "accent": "149.3 80.4% 90%",
-      "accent-foreground": "164.2 85.7% 16.5%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "151.8 81% 95.9%",
-      "border": "152.4 76% 80.4%",
-      "input": "152.4 76% 80.4%",
-      "ring": "165.7 91.3% 9%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "165.7 91.3% 9%",
-      "foreground": "151.8 81% 95.9%",
-      "card": "165.7 91.3% 9%",
-      "card-foreground": "151.8 81% 95.9%",
-      "popover": "165.7 91.3% 9%",
-      "popover-foreground": "151.8 81% 95.9%",
-      "primary": "151.8 81% 95.9%",
-      "primary-foreground": "164.2 85.7% 16.5%",
-      "secondary": "163.1 88.1% 19.8%",
-      "secondary-foreground": "151.8 81% 95.9%",
-      "muted": "163.1 88.1% 19.8%",
-      "muted-foreground": "158.1 64.4% 51.6%",
-      "accent": "163.1 88.1% 19.8%",
-      "accent-foreground": "151.8 81% 95.9%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "151.8 81% 95.9%",
-      "border": "163.1 88.1% 19.8%",
-      "input": "163.1 88.1% 19.8%",
-      "ring": "156.2 71.6% 66.9%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/fuchsia.json b/apps/web/public/r/themes/fuchsia.json
deleted file mode 100644
index 508103d4..00000000
--- a/apps/web/public/r/themes/fuchsia.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "fuchsia",
-  "label": "Fuchsia",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "296.8 90.2% 16.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "296.8 90.2% 16.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "296.8 90.2% 16.1%",
-      "primary": "296.7 63.6% 28%",
-      "primary-foreground": "289.1 100% 97.8%",
-      "secondary": "287 100% 95.5%",
-      "secondary-foreground": "296.7 63.6% 28%",
-      "muted": "287 100% 95.5%",
-      "muted-foreground": "292.2 84.1% 60.6%",
-      "accent": "287 100% 95.5%",
-      "accent-foreground": "296.7 63.6% 28%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "289.1 100% 97.8%",
-      "border": "288.3 95.8% 90.6%",
-      "input": "288.3 95.8% 90.6%",
-      "ring": "296.8 90.2% 16.1%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "296.8 90.2% 16.1%",
-      "foreground": "289.1 100% 97.8%",
-      "card": "296.8 90.2% 16.1%",
-      "card-foreground": "289.1 100% 97.8%",
-      "popover": "296.8 90.2% 16.1%",
-      "popover-foreground": "289.1 100% 97.8%",
-      "primary": "289.1 100% 97.8%",
-      "primary-foreground": "296.7 63.6% 28%",
-      "secondary": "295.4 70.2% 32.9%",
-      "secondary-foreground": "289.1 100% 97.8%",
-      "muted": "295.4 70.2% 32.9%",
-      "muted-foreground": "292 91.4% 72.5%",
-      "accent": "295.4 70.2% 32.9%",
-      "accent-foreground": "289.1 100% 97.8%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "289.1 100% 97.8%",
-      "border": "295.4 70.2% 32.9%",
-      "input": "295.4 70.2% 32.9%",
-      "ring": "291.1 93.1% 82.9%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/green.json b/apps/web/public/r/themes/green.json
deleted file mode 100644
index 141d2a39..00000000
--- a/apps/web/public/r/themes/green.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "green",
-  "label": "Green",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "144.9 80.4% 10%",
-      "card": "0 0% 100%",
-      "card-foreground": "144.9 80.4% 10%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "144.9 80.4% 10%",
-      "primary": "143.8 61.2% 20.2%",
-      "primary-foreground": "138.5 76.5% 96.7%",
-      "secondary": "140.6 84.2% 92.5%",
-      "secondary-foreground": "143.8 61.2% 20.2%",
-      "muted": "140.6 84.2% 92.5%",
-      "muted-foreground": "142.1 70.6% 45.3%",
-      "accent": "140.6 84.2% 92.5%",
-      "accent-foreground": "143.8 61.2% 20.2%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "138.5 76.5% 96.7%",
-      "border": "141 78.9% 85.1%",
-      "input": "141 78.9% 85.1%",
-      "ring": "144.9 80.4% 10%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "144.9 80.4% 10%",
-      "foreground": "138.5 76.5% 96.7%",
-      "card": "144.9 80.4% 10%",
-      "card-foreground": "138.5 76.5% 96.7%",
-      "popover": "144.9 80.4% 10%",
-      "popover-foreground": "138.5 76.5% 96.7%",
-      "primary": "138.5 76.5% 96.7%",
-      "primary-foreground": "143.8 61.2% 20.2%",
-      "secondary": "142.8 64.2% 24.1%",
-      "secondary-foreground": "138.5 76.5% 96.7%",
-      "muted": "142.8 64.2% 24.1%",
-      "muted-foreground": "141.9 69.2% 58%",
-      "accent": "142.8 64.2% 24.1%",
-      "accent-foreground": "138.5 76.5% 96.7%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "138.5 76.5% 96.7%",
-      "border": "142.8 64.2% 24.1%",
-      "input": "142.8 64.2% 24.1%",
-      "ring": "141.7 76.6% 73.1%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/indigo.json b/apps/web/public/r/themes/indigo.json
deleted file mode 100644
index 30e5aaad..00000000
--- a/apps/web/public/r/themes/indigo.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "indigo",
-  "label": "Indigo",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "243.8 47.1% 20%",
-      "card": "0 0% 100%",
-      "card-foreground": "243.8 47.1% 20%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "243.8 47.1% 20%",
-      "primary": "242.2 47.4% 34.3%",
-      "primary-foreground": "225.9 100% 96.7%",
-      "secondary": "226.5 100% 93.9%",
-      "secondary-foreground": "242.2 47.4% 34.3%",
-      "muted": "226.5 100% 93.9%",
-      "muted-foreground": "238.7 83.5% 66.7%",
-      "accent": "226.5 100% 93.9%",
-      "accent-foreground": "242.2 47.4% 34.3%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "225.9 100% 96.7%",
-      "border": "228 96.5% 88.8%",
-      "input": "228 96.5% 88.8%",
-      "ring": "243.8 47.1% 20%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "243.8 47.1% 20%",
-      "foreground": "225.9 100% 96.7%",
-      "card": "243.8 47.1% 20%",
-      "card-foreground": "225.9 100% 96.7%",
-      "popover": "243.8 47.1% 20%",
-      "popover-foreground": "225.9 100% 96.7%",
-      "primary": "225.9 100% 96.7%",
-      "primary-foreground": "242.2 47.4% 34.3%",
-      "secondary": "243.7 54.5% 41.4%",
-      "secondary-foreground": "225.9 100% 96.7%",
-      "muted": "243.7 54.5% 41.4%",
-      "muted-foreground": "234.5 89.5% 73.9%",
-      "accent": "243.7 54.5% 41.4%",
-      "accent-foreground": "225.9 100% 96.7%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "225.9 100% 96.7%",
-      "border": "243.7 54.5% 41.4%",
-      "input": "243.7 54.5% 41.4%",
-      "ring": "229.7 93.5% 81.8%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/lime.json b/apps/web/public/r/themes/lime.json
deleted file mode 100644
index e308aec7..00000000
--- a/apps/web/public/r/themes/lime.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "lime",
-  "label": "Lime",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "89.3 80.4% 10%",
-      "card": "0 0% 100%",
-      "card-foreground": "89.3 80.4% 10%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "89.3 80.4% 10%",
-      "primary": "87.6 61.2% 20.2%",
-      "primary-foreground": "78.3 92% 95.1%",
-      "secondary": "79.6 89.1% 89.2%",
-      "secondary-foreground": "87.6 61.2% 20.2%",
-      "muted": "79.6 89.1% 89.2%",
-      "muted-foreground": "83.7 80.5% 44.3%",
-      "accent": "79.6 89.1% 89.2%",
-      "accent-foreground": "87.6 61.2% 20.2%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "78.3 92% 95.1%",
-      "border": "80.9 88.5% 79.6%",
-      "input": "80.9 88.5% 79.6%",
-      "ring": "89.3 80.4% 10%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "89.3 80.4% 10%",
-      "foreground": "78.3 92% 95.1%",
-      "card": "89.3 80.4% 10%",
-      "card-foreground": "78.3 92% 95.1%",
-      "popover": "89.3 80.4% 10%",
-      "popover-foreground": "78.3 92% 95.1%",
-      "primary": "78.3 92% 95.1%",
-      "primary-foreground": "87.6 61.2% 20.2%",
-      "secondary": "86.3 69% 22.7%",
-      "secondary-foreground": "78.3 92% 95.1%",
-      "muted": "86.3 69% 22.7%",
-      "muted-foreground": "82.7 78% 55.5%",
-      "accent": "86.3 69% 22.7%",
-      "accent-foreground": "78.3 92% 95.1%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "78.3 92% 95.1%",
-      "border": "86.3 69% 22.7%",
-      "input": "86.3 69% 22.7%",
-      "ring": "82 84.5% 67.1%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/orange.json b/apps/web/public/r/themes/orange.json
deleted file mode 100644
index 94ec87a3..00000000
--- a/apps/web/public/r/themes/orange.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "orange",
-  "label": "Orange",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "13 81.1% 14.5%",
-      "card": "0 0% 100%",
-      "card-foreground": "13 81.1% 14.5%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "13 81.1% 14.5%",
-      "primary": "15.3 74.6% 27.8%",
-      "primary-foreground": "33.3 100% 96.5%",
-      "secondary": "34.3 100% 91.8%",
-      "secondary-foreground": "15.3 74.6% 27.8%",
-      "muted": "34.3 100% 91.8%",
-      "muted-foreground": "24.6 95% 53.1%",
-      "accent": "34.3 100% 91.8%",
-      "accent-foreground": "15.3 74.6% 27.8%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "33.3 100% 96.5%",
-      "border": "32.1 97.7% 83.1%",
-      "input": "32.1 97.7% 83.1%",
-      "ring": "13 81.1% 14.5%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "13 81.1% 14.5%",
-      "foreground": "33.3 100% 96.5%",
-      "card": "13 81.1% 14.5%",
-      "card-foreground": "33.3 100% 96.5%",
-      "popover": "13 81.1% 14.5%",
-      "popover-foreground": "33.3 100% 96.5%",
-      "primary": "33.3 100% 96.5%",
-      "primary-foreground": "15.3 74.6% 27.8%",
-      "secondary": "15 79.1% 33.7%",
-      "secondary-foreground": "33.3 100% 96.5%",
-      "muted": "15 79.1% 33.7%",
-      "muted-foreground": "27 96% 61%",
-      "accent": "15 79.1% 33.7%",
-      "accent-foreground": "33.3 100% 96.5%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "33.3 100% 96.5%",
-      "border": "15 79.1% 33.7%",
-      "input": "15 79.1% 33.7%",
-      "ring": "30.7 97.2% 72.4%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/pink.json b/apps/web/public/r/themes/pink.json
deleted file mode 100644
index fa258130..00000000
--- a/apps/web/public/r/themes/pink.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "pink",
-  "label": "Pink",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "336.2 83.9% 17.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "336.2 83.9% 17.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "336.2 83.9% 17.1%",
-      "primary": "335.9 69% 30.4%",
-      "primary-foreground": "327.3 73.3% 97.1%",
-      "secondary": "325.7 77.8% 94.7%",
-      "secondary-foreground": "335.9 69% 30.4%",
-      "muted": "325.7 77.8% 94.7%",
-      "muted-foreground": "330.4 81.2% 60.4%",
-      "accent": "325.7 77.8% 94.7%",
-      "accent-foreground": "335.9 69% 30.4%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "327.3 73.3% 97.1%",
-      "border": "325.9 84.6% 89.8%",
-      "input": "325.9 84.6% 89.8%",
-      "ring": "336.2 83.9% 17.1%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "336.2 83.9% 17.1%",
-      "foreground": "327.3 73.3% 97.1%",
-      "card": "336.2 83.9% 17.1%",
-      "card-foreground": "327.3 73.3% 97.1%",
-      "popover": "336.2 83.9% 17.1%",
-      "popover-foreground": "327.3 73.3% 97.1%",
-      "primary": "327.3 73.3% 97.1%",
-      "primary-foreground": "335.9 69% 30.4%",
-      "secondary": "335.8 74.4% 35.3%",
-      "secondary-foreground": "327.3 73.3% 97.1%",
-      "muted": "335.8 74.4% 35.3%",
-      "muted-foreground": "328.6 85.5% 70.2%",
-      "accent": "335.8 74.4% 35.3%",
-      "accent-foreground": "327.3 73.3% 97.1%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "327.3 73.3% 97.1%",
-      "border": "335.8 74.4% 35.3%",
-      "input": "335.8 74.4% 35.3%",
-      "ring": "327.4 87.1% 81.8%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/purple.json b/apps/web/public/r/themes/purple.json
deleted file mode 100644
index 84c76827..00000000
--- a/apps/web/public/r/themes/purple.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "purple",
-  "label": "Purple",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "273.5 86.9% 21%",
-      "card": "0 0% 100%",
-      "card-foreground": "273.5 86.9% 21%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "273.5 86.9% 21%",
-      "primary": "273.6 65.6% 32%",
-      "primary-foreground": "270 100% 98%",
-      "secondary": "268.7 100% 95.5%",
-      "secondary-foreground": "273.6 65.6% 32%",
-      "muted": "268.7 100% 95.5%",
-      "muted-foreground": "270.7 91% 65.1%",
-      "accent": "268.7 100% 95.5%",
-      "accent-foreground": "273.6 65.6% 32%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "270 100% 98%",
-      "border": "268.6 100% 91.8%",
-      "input": "268.6 100% 91.8%",
-      "ring": "273.5 86.9% 21%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "273.5 86.9% 21%",
-      "foreground": "270 100% 98%",
-      "card": "273.5 86.9% 21%",
-      "card-foreground": "270 100% 98%",
-      "popover": "273.5 86.9% 21%",
-      "popover-foreground": "270 100% 98%",
-      "primary": "270 100% 98%",
-      "primary-foreground": "273.6 65.6% 32%",
-      "secondary": "272.9 67.2% 39.4%",
-      "secondary-foreground": "270 100% 98%",
-      "muted": "272.9 67.2% 39.4%",
-      "muted-foreground": "270 95.2% 75.3%",
-      "accent": "272.9 67.2% 39.4%",
-      "accent-foreground": "270 100% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "270 100% 98%",
-      "border": "272.9 67.2% 39.4%",
-      "input": "272.9 67.2% 39.4%",
-      "ring": "269.2 97.4% 85.1%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/red.json b/apps/web/public/r/themes/red.json
deleted file mode 100644
index 8b39eab6..00000000
--- a/apps/web/public/r/themes/red.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "red",
-  "label": "Red",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "0 74.7% 15.5%",
-      "card": "0 0% 100%",
-      "card-foreground": "0 74.7% 15.5%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "0 74.7% 15.5%",
-      "primary": "0 62.8% 30.6%",
-      "primary-foreground": "0 85.7% 97.3%",
-      "secondary": "0 93.3% 94.1%",
-      "secondary-foreground": "0 62.8% 30.6%",
-      "muted": "0 93.3% 94.1%",
-      "muted-foreground": "0 84.2% 60.2%",
-      "accent": "0 93.3% 94.1%",
-      "accent-foreground": "0 62.8% 30.6%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "border": "0 96.3% 89.4%",
-      "input": "0 96.3% 89.4%",
-      "ring": "0 74.7% 15.5%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "0 74.7% 15.5%",
-      "foreground": "0 85.7% 97.3%",
-      "card": "0 74.7% 15.5%",
-      "card-foreground": "0 85.7% 97.3%",
-      "popover": "0 74.7% 15.5%",
-      "popover-foreground": "0 85.7% 97.3%",
-      "primary": "0 85.7% 97.3%",
-      "primary-foreground": "0 62.8% 30.6%",
-      "secondary": "0 70% 35.3%",
-      "secondary-foreground": "0 85.7% 97.3%",
-      "muted": "0 70% 35.3%",
-      "muted-foreground": "0 90.6% 70.8%",
-      "accent": "0 70% 35.3%",
-      "accent-foreground": "0 85.7% 97.3%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "border": "0 70% 35.3%",
-      "input": "0 70% 35.3%",
-      "ring": "0 93.5% 81.8%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/rose.json b/apps/web/public/r/themes/rose.json
deleted file mode 100644
index e5c124e1..00000000
--- a/apps/web/public/r/themes/rose.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "rose",
-  "label": "Rose",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "343.1 87.7% 15.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "343.1 87.7% 15.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "343.1 87.7% 15.9%",
-      "primary": "341.5 75.5% 30.4%",
-      "primary-foreground": "355.7 100% 97.3%",
-      "secondary": "355.6 100% 94.7%",
-      "secondary-foreground": "341.5 75.5% 30.4%",
-      "muted": "355.6 100% 94.7%",
-      "muted-foreground": "349.7 89.2% 60.2%",
-      "accent": "355.6 100% 94.7%",
-      "accent-foreground": "341.5 75.5% 30.4%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "355.7 100% 97.3%",
-      "border": "352.7 96.1% 90%",
-      "input": "352.7 96.1% 90%",
-      "ring": "343.1 87.7% 15.9%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "343.1 87.7% 15.9%",
-      "foreground": "355.7 100% 97.3%",
-      "card": "343.1 87.7% 15.9%",
-      "card-foreground": "355.7 100% 97.3%",
-      "popover": "343.1 87.7% 15.9%",
-      "popover-foreground": "355.7 100% 97.3%",
-      "primary": "355.7 100% 97.3%",
-      "primary-foreground": "341.5 75.5% 30.4%",
-      "secondary": "343.4 79.7% 34.7%",
-      "secondary-foreground": "355.7 100% 97.3%",
-      "muted": "343.4 79.7% 34.7%",
-      "muted-foreground": "351.3 94.5% 71.4%",
-      "accent": "343.4 79.7% 34.7%",
-      "accent-foreground": "355.7 100% 97.3%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "355.7 100% 97.3%",
-      "border": "343.4 79.7% 34.7%",
-      "input": "343.4 79.7% 34.7%",
-      "ring": "352.6 95.7% 81.8%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/sky.json b/apps/web/public/r/themes/sky.json
deleted file mode 100644
index 86aacb8f..00000000
--- a/apps/web/public/r/themes/sky.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "sky",
-  "label": "Sky",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "204 80.2% 15.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "204 80.2% 15.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "204 80.2% 15.9%",
-      "primary": "202 80.3% 23.9%",
-      "primary-foreground": "204 100% 97.1%",
-      "secondary": "204 93.8% 93.7%",
-      "secondary-foreground": "202 80.3% 23.9%",
-      "muted": "204 93.8% 93.7%",
-      "muted-foreground": "198.6 88.7% 48.4%",
-      "accent": "204 93.8% 93.7%",
-      "accent-foreground": "202 80.3% 23.9%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "204 100% 97.1%",
-      "border": "200.6 94.4% 86.1%",
-      "input": "200.6 94.4% 86.1%",
-      "ring": "204 80.2% 15.9%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "204 80.2% 15.9%",
-      "foreground": "204 100% 97.1%",
-      "card": "204 80.2% 15.9%",
-      "card-foreground": "204 100% 97.1%",
-      "popover": "204 80.2% 15.9%",
-      "popover-foreground": "204 100% 97.1%",
-      "primary": "204 100% 97.1%",
-      "primary-foreground": "202 80.3% 23.9%",
-      "secondary": "201 90% 27.5%",
-      "secondary-foreground": "204 100% 97.1%",
-      "muted": "201 90% 27.5%",
-      "muted-foreground": "198.4 93.2% 59.6%",
-      "accent": "201 90% 27.5%",
-      "accent-foreground": "204 100% 97.1%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "204 100% 97.1%",
-      "border": "201 90% 27.5%",
-      "input": "201 90% 27.5%",
-      "ring": "199.4 95.5% 73.9%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/teal.json b/apps/web/public/r/themes/teal.json
deleted file mode 100644
index 793fd1d9..00000000
--- a/apps/web/public/r/themes/teal.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "teal",
-  "label": "Teal",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "178.6 84.3% 10%",
-      "card": "0 0% 100%",
-      "card-foreground": "178.6 84.3% 10%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "178.6 84.3% 10%",
-      "primary": "175.9 60.8% 19%",
-      "primary-foreground": "166.2 76.5% 96.7%",
-      "secondary": "167.2 85.5% 89.2%",
-      "secondary-foreground": "175.9 60.8% 19%",
-      "muted": "167.2 85.5% 89.2%",
-      "muted-foreground": "173.4 80.4% 40%",
-      "accent": "167.2 85.5% 89.2%",
-      "accent-foreground": "175.9 60.8% 19%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "166.2 76.5% 96.7%",
-      "border": "168.4 83.8% 78.2%",
-      "input": "168.4 83.8% 78.2%",
-      "ring": "178.6 84.3% 10%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "178.6 84.3% 10%",
-      "foreground": "166.2 76.5% 96.7%",
-      "card": "178.6 84.3% 10%",
-      "card-foreground": "166.2 76.5% 96.7%",
-      "popover": "178.6 84.3% 10%",
-      "popover-foreground": "166.2 76.5% 96.7%",
-      "primary": "166.2 76.5% 96.7%",
-      "primary-foreground": "175.9 60.8% 19%",
-      "secondary": "176.1 69.4% 21.8%",
-      "secondary-foreground": "166.2 76.5% 96.7%",
-      "muted": "176.1 69.4% 21.8%",
-      "muted-foreground": "172.5 66% 50.4%",
-      "accent": "176.1 69.4% 21.8%",
-      "accent-foreground": "166.2 76.5% 96.7%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "166.2 76.5% 96.7%",
-      "border": "176.1 69.4% 21.8%",
-      "input": "176.1 69.4% 21.8%",
-      "ring": "170.6 76.9% 64.3%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/violet.json b/apps/web/public/r/themes/violet.json
deleted file mode 100644
index 41776418..00000000
--- a/apps/web/public/r/themes/violet.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "violet",
-  "label": "Violet",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "261.2 72.6% 22.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "261.2 72.6% 22.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "261.2 72.6% 22.9%",
-      "primary": "263.5 67.4% 34.9%",
-      "primary-foreground": "250 100% 97.6%",
-      "secondary": "251.4 91.3% 95.5%",
-      "secondary-foreground": "263.5 67.4% 34.9%",
-      "muted": "251.4 91.3% 95.5%",
-      "muted-foreground": "258.3 89.5% 66.3%",
-      "accent": "251.4 91.3% 95.5%",
-      "accent-foreground": "263.5 67.4% 34.9%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "250 100% 97.6%",
-      "border": "250.5 95.2% 91.8%",
-      "input": "250.5 95.2% 91.8%",
-      "ring": "261.2 72.6% 22.9%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "261.2 72.6% 22.9%",
-      "foreground": "250 100% 97.6%",
-      "card": "261.2 72.6% 22.9%",
-      "card-foreground": "250 100% 97.6%",
-      "popover": "261.2 72.6% 22.9%",
-      "popover-foreground": "250 100% 97.6%",
-      "primary": "250 100% 97.6%",
-      "primary-foreground": "263.5 67.4% 34.9%",
-      "secondary": "263.4 69.3% 42.2%",
-      "secondary-foreground": "250 100% 97.6%",
-      "muted": "263.4 69.3% 42.2%",
-      "muted-foreground": "255.1 91.7% 76.3%",
-      "accent": "263.4 69.3% 42.2%",
-      "accent-foreground": "250 100% 97.6%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "250 100% 97.6%",
-      "border": "263.4 69.3% 42.2%",
-      "input": "263.4 69.3% 42.2%",
-      "ring": "252.5 94.7% 85.1%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/r/themes/yellow.json b/apps/web/public/r/themes/yellow.json
deleted file mode 100644
index 5a78b52b..00000000
--- a/apps/web/public/r/themes/yellow.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "yellow",
-  "label": "Yellow",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "26 83.3% 14.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "26 83.3% 14.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "26 83.3% 14.1%",
-      "primary": "28.4 72.5% 25.7%",
-      "primary-foreground": "54.5 91.7% 95.3%",
-      "secondary": "54.9 96.7% 88%",
-      "secondary-foreground": "28.4 72.5% 25.7%",
-      "muted": "54.9 96.7% 88%",
-      "muted-foreground": "45.4 93.4% 47.5%",
-      "accent": "54.9 96.7% 88%",
-      "accent-foreground": "28.4 72.5% 25.7%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "54.5 91.7% 95.3%",
-      "border": "52.8 98.3% 76.9%",
-      "input": "52.8 98.3% 76.9%",
-      "ring": "26 83.3% 14.1%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "26 83.3% 14.1%",
-      "foreground": "54.5 91.7% 95.3%",
-      "card": "26 83.3% 14.1%",
-      "card-foreground": "54.5 91.7% 95.3%",
-      "popover": "26 83.3% 14.1%",
-      "popover-foreground": "54.5 91.7% 95.3%",
-      "primary": "54.5 91.7% 95.3%",
-      "primary-foreground": "28.4 72.5% 25.7%",
-      "secondary": "31.8 81% 28.8%",
-      "secondary-foreground": "54.5 91.7% 95.3%",
-      "muted": "31.8 81% 28.8%",
-      "muted-foreground": "47.9 95.8% 53.1%",
-      "accent": "31.8 81% 28.8%",
-      "accent-foreground": "54.5 91.7% 95.3%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "54.5 91.7% 95.3%",
-      "border": "31.8 81% 28.8%",
-      "input": "31.8 81% 28.8%",
-      "ring": "50.4 97.8% 63.5%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/web/public/schema/registry-item.json b/apps/web/public/schema/registry-item.json
new file mode 100644
index 00000000..8d4fd3e2
--- /dev/null
+++ b/apps/web/public/schema/registry-item.json
@@ -0,0 +1,149 @@
+{
+  "$schema": "https://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string"
+    },
+    "type": {
+      "type": "string",
+      "enum": [
+        "registry:lib",
+        "registry:block",
+        "registry:component",
+        "registry:ui",
+        "registry:hook",
+        "registry:theme",
+        "registry:page",
+        "registry:file"
+      ]
+    },
+    "description": {
+      "type": "string"
+    },
+    "title": {
+      "type": "string"
+    },
+    "author": {
+      "type": "string"
+    },
+    "dependencies": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "devDependencies": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "registryDependencies": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "files": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "path": {
+            "type": "string"
+          },
+          "content": {
+            "type": "string"
+          },
+          "type": {
+            "type": "string",
+            "enum": [
+              "registry:lib",
+              "registry:block",
+              "registry:component",
+              "registry:ui",
+              "registry:hook",
+              "registry:theme",
+              "registry:page",
+              "registry:file"
+            ]
+          },
+          "target": {
+            "type": "string"
+          }
+        },
+        "if": {
+          "properties": {
+            "type": {
+              "enum": ["registry:file", "registry:page"]
+            }
+          }
+        },
+        "then": {
+          "required": ["path", "type", "target"]
+        },
+        "else": {
+          "required": ["path", "type"]
+        }
+      }
+    },
+    "tailwind": {
+      "type": "object",
+      "properties": {
+        "config": {
+          "type": "object",
+          "properties": {
+            "content": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "theme": {
+              "type": "object",
+              "additionalProperties": true
+            },
+            "plugins": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      }
+    },
+    "cssVars": {
+      "type": "object",
+      "properties": {
+        "light": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "dark": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "meta": {
+      "type": "object",
+      "additionalProperties": true
+    },
+    "docs": {
+      "type": "string"
+    },
+    "categories": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    }
+  },
+  "required": ["name", "type"]
+}
diff --git a/apps/web/public/schema/registry.json b/apps/web/public/schema/registry.json
new file mode 100644
index 00000000..c6f9dfc5
--- /dev/null
+++ b/apps/web/public/schema/registry.json
@@ -0,0 +1,22 @@
+{
+   "$schema": "https://json-schema.org/draft-07/schema#",
+   "description": "A nyxb registry of components, hooks, pages, etc.",
+   "type": "object",
+   "properties": {
+      "name": {
+         "type": "string"
+      },
+      "homepage": {
+         "type": "string"
+      },
+      "items": {
+         "type": "array",
+         "items": {
+            "$ref": "https://nyxbui.design/schema/registry-item.json"
+         }
+      }
+   },
+   "required": ["name", "homepage", "items"],
+   "uniqueItems": true,
+   "minItems": 1
+}
diff --git a/apps/web/public/v0/colors/gray.json b/apps/web/public/v0/colors/gray.json
new file mode 100644
index 00000000..9cba353e
--- /dev/null
+++ b/apps/web/public/v0/colors/gray.json
@@ -0,0 +1,102 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "gray-950",
+      "card": "white",
+      "card-foreground": "gray-950",
+      "popover": "white",
+      "popover-foreground": "gray-950",
+      "primary": "gray-900",
+      "primary-foreground": "gray-50",
+      "secondary": "gray-100",
+      "secondary-foreground": "gray-900",
+      "muted": "gray-100",
+      "muted-foreground": "gray-500",
+      "accent": "gray-100",
+      "accent-foreground": "gray-900",
+      "destructive": "red-500",
+      "destructive-foreground": "gray-50",
+      "border": "gray-200",
+      "input": "gray-200",
+      "ring": "gray-950"
+    },
+    "dark": {
+      "background": "gray-950",
+      "foreground": "gray-50",
+      "card": "gray-950",
+      "card-foreground": "gray-50",
+      "popover": "gray-950",
+      "popover-foreground": "gray-50",
+      "primary": "gray-50",
+      "primary-foreground": "gray-900",
+      "secondary": "gray-800",
+      "secondary-foreground": "gray-50",
+      "muted": "gray-800",
+      "muted-foreground": "gray-400",
+      "accent": "gray-800",
+      "accent-foreground": "gray-50",
+      "destructive": "red-900",
+      "destructive-foreground": "gray-50",
+      "border": "gray-800",
+      "input": "gray-800",
+      "ring": "gray-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "224 71.4% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "224 71.4% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "224 71.4% 4.1%",
+      "primary": "220.9 39.3% 11%",
+      "primary-foreground": "210 20% 98%",
+      "secondary": "220 14.3% 95.9%",
+      "secondary-foreground": "220.9 39.3% 11%",
+      "muted": "220 14.3% 95.9%",
+      "muted-foreground": "220 8.9% 46.1%",
+      "accent": "220 14.3% 95.9%",
+      "accent-foreground": "220.9 39.3% 11%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "220 13% 91%",
+      "input": "220 13% 91%",
+      "ring": "224 71.4% 4.1%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "224 71.4% 4.1%",
+      "foreground": "210 20% 98%",
+      "card": "224 71.4% 4.1%",
+      "card-foreground": "210 20% 98%",
+      "popover": "224 71.4% 4.1%",
+      "popover-foreground": "210 20% 98%",
+      "primary": "210 20% 98%",
+      "primary-foreground": "220.9 39.3% 11%",
+      "secondary": "215 27.9% 16.9%",
+      "secondary-foreground": "210 20% 98%",
+      "muted": "215 27.9% 16.9%",
+      "muted-foreground": "217.9 10.6% 64.9%",
+      "accent": "215 27.9% 16.9%",
+      "accent-foreground": "210 20% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "215 27.9% 16.9%",
+      "input": "215 27.9% 16.9%",
+      "ring": "216 12.2% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n    --ring: 224 71.4% 4.1%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --ring: 216 12.2% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/colors/index.json b/apps/web/public/v0/colors/index.json
new file mode 100644
index 00000000..c06c452a
--- /dev/null
+++ b/apps/web/public/v0/colors/index.json
@@ -0,0 +1,2243 @@
+{
+  "inherit": "inherit",
+  "current": "currentColor",
+  "transparent": "transparent",
+  "black": {
+    "hex": "#000000",
+    "rgb": "rgb(0,0,0)",
+    "hsl": "hsl(0,0%,0%)",
+    "oklch": "oklch(0.00,0.00,0)",
+    "rgbChannel": "0 0 0",
+    "hslChannel": "0 0% 0%"
+  },
+  "white": {
+    "hex": "#ffffff",
+    "rgb": "rgb(255,255,255)",
+    "hsl": "hsl(0,0%,100%)",
+    "oklch": "oklch(1.00,0.00,0)",
+    "rgbChannel": "255 255 255",
+    "hslChannel": "0 0% 100%"
+  },
+  "slate": [
+    {
+      "scale": 50,
+      "hex": "#f8fafc",
+      "rgb": "rgb(248,250,252)",
+      "hsl": "hsl(210,40%,98%)",
+      "oklch": "oklch(0.98,0.00,248)",
+      "rgbChannel": "248 250 252",
+      "hslChannel": "210 40% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f1f5f9",
+      "rgb": "rgb(241,245,249)",
+      "hsl": "hsl(210,40%,96.1%)",
+      "oklch": "oklch(0.97,0.01,248)",
+      "rgbChannel": "241 245 249",
+      "hslChannel": "210 40% 96.1%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e2e8f0",
+      "rgb": "rgb(226,232,240)",
+      "hsl": "hsl(214.3,31.8%,91.4%)",
+      "oklch": "oklch(0.93,0.01,256)",
+      "rgbChannel": "226 232 240",
+      "hslChannel": "214.3 31.8% 91.4%"
+    },
+    {
+      "scale": 300,
+      "hex": "#cbd5e1",
+      "rgb": "rgb(203,213,225)",
+      "hsl": "hsl(212.7,26.8%,83.9%)",
+      "oklch": "oklch(0.87,0.02,253)",
+      "rgbChannel": "203 213 225",
+      "hslChannel": "212.7 26.8% 83.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#94a3b8",
+      "rgb": "rgb(148,163,184)",
+      "hsl": "hsl(215,20.2%,65.1%)",
+      "oklch": "oklch(0.71,0.04,257)",
+      "rgbChannel": "148 163 184",
+      "hslChannel": "215 20.2% 65.1%"
+    },
+    {
+      "scale": 500,
+      "hex": "#64748b",
+      "rgb": "rgb(100,116,139)",
+      "hsl": "hsl(215.4,16.3%,46.9%)",
+      "oklch": "oklch(0.55,0.04,257)",
+      "rgbChannel": "100 116 139",
+      "hslChannel": "215.4 16.3% 46.9%"
+    },
+    {
+      "scale": 600,
+      "hex": "#475569",
+      "rgb": "rgb(71,85,105)",
+      "hsl": "hsl(215.3,19.3%,34.5%)",
+      "oklch": "oklch(0.45,0.04,257)",
+      "rgbChannel": "71 85 105",
+      "hslChannel": "215.3 19.3% 34.5%"
+    },
+    {
+      "scale": 700,
+      "hex": "#334155",
+      "rgb": "rgb(51,65,85)",
+      "hsl": "hsl(215.3,25%,26.7%)",
+      "oklch": "oklch(0.37,0.04,257)",
+      "rgbChannel": "51 65 85",
+      "hslChannel": "215.3 25% 26.7%"
+    },
+    {
+      "scale": 800,
+      "hex": "#1e293b",
+      "rgb": "rgb(30,41,59)",
+      "hsl": "hsl(217.2,32.6%,17.5%)",
+      "oklch": "oklch(0.28,0.04,260)",
+      "rgbChannel": "30 41 59",
+      "hslChannel": "217.2 32.6% 17.5%"
+    },
+    {
+      "scale": 900,
+      "hex": "#0f172a",
+      "rgb": "rgb(15,23,42)",
+      "hsl": "hsl(222.2,47.4%,11.2%)",
+      "oklch": "oklch(0.21,0.04,266)",
+      "rgbChannel": "15 23 42",
+      "hslChannel": "222.2 47.4% 11.2%"
+    },
+    {
+      "scale": 950,
+      "hex": "#020617",
+      "rgb": "rgb(2,6,23)",
+      "hsl": "hsl(222.2,84%,4.9%)",
+      "oklch": "oklch(0.13,0.04,265)",
+      "rgbChannel": "2 6 23",
+      "hslChannel": "222.2 84% 4.9%"
+    }
+  ],
+  "gray": [
+    {
+      "scale": 50,
+      "hex": "#f9fafb",
+      "rgb": "rgb(249,250,251)",
+      "hsl": "hsl(210,20%,98%)",
+      "oklch": "oklch(0.98,0.00,248)",
+      "rgbChannel": "249 250 251",
+      "hslChannel": "210 20% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f3f4f6",
+      "rgb": "rgb(243,244,246)",
+      "hsl": "hsl(220,14.3%,95.9%)",
+      "oklch": "oklch(0.97,0.00,265)",
+      "rgbChannel": "243 244 246",
+      "hslChannel": "220 14.3% 95.9%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e5e7eb",
+      "rgb": "rgb(229,231,235)",
+      "hsl": "hsl(220,13%,91%)",
+      "oklch": "oklch(0.93,0.01,265)",
+      "rgbChannel": "229 231 235",
+      "hslChannel": "220 13% 91%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d1d5db",
+      "rgb": "rgb(209,213,219)",
+      "hsl": "hsl(216,12.2%,83.9%)",
+      "oklch": "oklch(0.87,0.01,258)",
+      "rgbChannel": "209 213 219",
+      "hslChannel": "216 12.2% 83.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#9ca3af",
+      "rgb": "rgb(156,163,175)",
+      "hsl": "hsl(217.9,10.6%,64.9%)",
+      "oklch": "oklch(0.71,0.02,261)",
+      "rgbChannel": "156 163 175",
+      "hslChannel": "217.9 10.6% 64.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#6b7280",
+      "rgb": "rgb(107,114,128)",
+      "hsl": "hsl(220,8.9%,46.1%)",
+      "oklch": "oklch(0.55,0.02,264)",
+      "rgbChannel": "107 114 128",
+      "hslChannel": "220 8.9% 46.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#4b5563",
+      "rgb": "rgb(75,85,99)",
+      "hsl": "hsl(215,13.8%,34.1%)",
+      "oklch": "oklch(0.45,0.03,257)",
+      "rgbChannel": "75 85 99",
+      "hslChannel": "215 13.8% 34.1%"
+    },
+    {
+      "scale": 700,
+      "hex": "#374151",
+      "rgb": "rgb(55,65,81)",
+      "hsl": "hsl(216.9,19.1%,26.7%)",
+      "oklch": "oklch(0.37,0.03,260)",
+      "rgbChannel": "55 65 81",
+      "hslChannel": "216.9 19.1% 26.7%"
+    },
+    {
+      "scale": 800,
+      "hex": "#1f2937",
+      "rgb": "rgb(31,41,55)",
+      "hsl": "hsl(215,27.9%,16.9%)",
+      "oklch": "oklch(0.28,0.03,257)",
+      "rgbChannel": "31 41 55",
+      "hslChannel": "215 27.9% 16.9%"
+    },
+    {
+      "scale": 900,
+      "hex": "#111827",
+      "rgb": "rgb(17,24,39)",
+      "hsl": "hsl(220.9,39.3%,11%)",
+      "oklch": "oklch(0.21,0.03,265)",
+      "rgbChannel": "17 24 39",
+      "hslChannel": "220.9 39.3% 11%"
+    },
+    {
+      "scale": 950,
+      "hex": "#030712",
+      "rgb": "rgb(3,7,18)",
+      "hsl": "hsl(224,71.4%,4.1%)",
+      "oklch": "oklch(0.13,0.03,262)",
+      "rgbChannel": "3 7 18",
+      "hslChannel": "224 71.4% 4.1%"
+    }
+  ],
+  "zinc": [
+    {
+      "scale": 50,
+      "hex": "#fafafa",
+      "rgb": "rgb(250,250,250)",
+      "hsl": "hsl(0,0%,98%)",
+      "oklch": "oklch(0.99,0.00,0)",
+      "rgbChannel": "250 250 250",
+      "hslChannel": "0 0% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f4f4f5",
+      "rgb": "rgb(244,244,245)",
+      "hsl": "hsl(240,4.8%,95.9%)",
+      "oklch": "oklch(0.97,0.00,286)",
+      "rgbChannel": "244 244 245",
+      "hslChannel": "240 4.8% 95.9%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e4e4e7",
+      "rgb": "rgb(228,228,231)",
+      "hsl": "hsl(240,5.9%,90%)",
+      "oklch": "oklch(0.92,0.00,286)",
+      "rgbChannel": "228 228 231",
+      "hslChannel": "240 5.9% 90%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d4d4d8",
+      "rgb": "rgb(212,212,216)",
+      "hsl": "hsl(240,4.9%,83.9%)",
+      "oklch": "oklch(0.87,0.01,286)",
+      "rgbChannel": "212 212 216",
+      "hslChannel": "240 4.9% 83.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a1a1aa",
+      "rgb": "rgb(161,161,170)",
+      "hsl": "hsl(240,5%,64.9%)",
+      "oklch": "oklch(0.71,0.01,286)",
+      "rgbChannel": "161 161 170",
+      "hslChannel": "240 5% 64.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#71717a",
+      "rgb": "rgb(113,113,122)",
+      "hsl": "hsl(240,3.8%,46.1%)",
+      "oklch": "oklch(0.55,0.01,286)",
+      "rgbChannel": "113 113 122",
+      "hslChannel": "240 3.8% 46.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#52525b",
+      "rgb": "rgb(82,82,91)",
+      "hsl": "hsl(240,5.2%,33.9%)",
+      "oklch": "oklch(0.44,0.01,286)",
+      "rgbChannel": "82 82 91",
+      "hslChannel": "240 5.2% 33.9%"
+    },
+    {
+      "scale": 700,
+      "hex": "#3f3f46",
+      "rgb": "rgb(63,63,70)",
+      "hsl": "hsl(240,5.3%,26.1%)",
+      "oklch": "oklch(0.37,0.01,286)",
+      "rgbChannel": "63 63 70",
+      "hslChannel": "240 5.3% 26.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#27272a",
+      "rgb": "rgb(39,39,42)",
+      "hsl": "hsl(240,3.7%,15.9%)",
+      "oklch": "oklch(0.27,0.01,286)",
+      "rgbChannel": "39 39 42",
+      "hslChannel": "240 3.7% 15.9%"
+    },
+    {
+      "scale": 900,
+      "hex": "#18181b",
+      "rgb": "rgb(24,24,27)",
+      "hsl": "hsl(240,5.9%,10%)",
+      "oklch": "oklch(0.21,0.01,286)",
+      "rgbChannel": "24 24 27",
+      "hslChannel": "240 5.9% 10%"
+    },
+    {
+      "scale": 950,
+      "hex": "#09090b",
+      "rgb": "rgb(9,9,11)",
+      "hsl": "hsl(240,10%,3.9%)",
+      "oklch": "oklch(0.14,0.00,286)",
+      "rgbChannel": "9 9 11",
+      "hslChannel": "240 10% 3.9%"
+    }
+  ],
+  "neutral": [
+    {
+      "scale": 50,
+      "hex": "#fafafa",
+      "rgb": "rgb(250,250,250)",
+      "hsl": "hsl(0,0%,98%)",
+      "oklch": "oklch(0.99,0.00,0)",
+      "rgbChannel": "250 250 250",
+      "hslChannel": "0 0% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f5f5f5",
+      "rgb": "rgb(245,245,245)",
+      "hsl": "hsl(0,0%,96.1%)",
+      "oklch": "oklch(0.97,0.00,0)",
+      "rgbChannel": "245 245 245",
+      "hslChannel": "0 0% 96.1%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e5e5e5",
+      "rgb": "rgb(229,229,229)",
+      "hsl": "hsl(0,0%,89.8%)",
+      "oklch": "oklch(0.92,0.00,0)",
+      "rgbChannel": "229 229 229",
+      "hslChannel": "0 0% 89.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d4d4d4",
+      "rgb": "rgb(212,212,212)",
+      "hsl": "hsl(0,0%,83.1%)",
+      "oklch": "oklch(0.87,0.00,0)",
+      "rgbChannel": "212 212 212",
+      "hslChannel": "0 0% 83.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a3a3a3",
+      "rgb": "rgb(163,163,163)",
+      "hsl": "hsl(0,0%,63.9%)",
+      "oklch": "oklch(0.72,0.00,0)",
+      "rgbChannel": "163 163 163",
+      "hslChannel": "0 0% 63.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#737373",
+      "rgb": "rgb(115,115,115)",
+      "hsl": "hsl(0,0%,45.1%)",
+      "oklch": "oklch(0.56,0.00,0)",
+      "rgbChannel": "115 115 115",
+      "hslChannel": "0 0% 45.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#525252",
+      "rgb": "rgb(82,82,82)",
+      "hsl": "hsl(0,0%,32.2%)",
+      "oklch": "oklch(0.44,0.00,0)",
+      "rgbChannel": "82 82 82",
+      "hslChannel": "0 0% 32.2%"
+    },
+    {
+      "scale": 700,
+      "hex": "#404040",
+      "rgb": "rgb(64,64,64)",
+      "hsl": "hsl(0,0%,25.1%)",
+      "oklch": "oklch(0.37,0.00,0)",
+      "rgbChannel": "64 64 64",
+      "hslChannel": "0 0% 25.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#262626",
+      "rgb": "rgb(38,38,38)",
+      "hsl": "hsl(0,0%,14.9%)",
+      "oklch": "oklch(0.27,0.00,0)",
+      "rgbChannel": "38 38 38",
+      "hslChannel": "0 0% 14.9%"
+    },
+    {
+      "scale": 900,
+      "hex": "#171717",
+      "rgb": "rgb(23,23,23)",
+      "hsl": "hsl(0,0%,9%)",
+      "oklch": "oklch(0.20,0.00,0)",
+      "rgbChannel": "23 23 23",
+      "hslChannel": "0 0% 9%"
+    },
+    {
+      "scale": 950,
+      "hex": "#0a0a0a",
+      "rgb": "rgb(10,10,10)",
+      "hsl": "hsl(0,0%,3.9%)",
+      "oklch": "oklch(0.14,0.00,0)",
+      "rgbChannel": "10 10 10",
+      "hslChannel": "0 0% 3.9%"
+    }
+  ],
+  "stone": [
+    {
+      "scale": 50,
+      "hex": "#fafaf9",
+      "rgb": "rgb(250,250,249)",
+      "hsl": "hsl(60,9.1%,97.8%)",
+      "oklch": "oklch(0.98,0.00,106)",
+      "rgbChannel": "250 250 249",
+      "hslChannel": "60 9.1% 97.8%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f5f5f4",
+      "rgb": "rgb(245,245,244)",
+      "hsl": "hsl(60,4.8%,95.9%)",
+      "oklch": "oklch(0.97,0.00,106)",
+      "rgbChannel": "245 245 244",
+      "hslChannel": "60 4.8% 95.9%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e7e5e4",
+      "rgb": "rgb(231,229,228)",
+      "hsl": "hsl(20,5.9%,90%)",
+      "oklch": "oklch(0.92,0.00,49)",
+      "rgbChannel": "231 229 228",
+      "hslChannel": "20 5.9% 90%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d6d3d1",
+      "rgb": "rgb(214,211,209)",
+      "hsl": "hsl(24,5.7%,82.9%)",
+      "oklch": "oklch(0.87,0.00,56)",
+      "rgbChannel": "214 211 209",
+      "hslChannel": "24 5.7% 82.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a8a29e",
+      "rgb": "rgb(168,162,158)",
+      "hsl": "hsl(24,5.4%,63.9%)",
+      "oklch": "oklch(0.72,0.01,56)",
+      "rgbChannel": "168 162 158",
+      "hslChannel": "24 5.4% 63.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#78716c",
+      "rgb": "rgb(120,113,108)",
+      "hsl": "hsl(25,5.3%,44.7%)",
+      "oklch": "oklch(0.55,0.01,58)",
+      "rgbChannel": "120 113 108",
+      "hslChannel": "25 5.3% 44.7%"
+    },
+    {
+      "scale": 600,
+      "hex": "#57534e",
+      "rgb": "rgb(87,83,78)",
+      "hsl": "hsl(33.3,5.5%,32.4%)",
+      "oklch": "oklch(0.44,0.01,74)",
+      "rgbChannel": "87 83 78",
+      "hslChannel": "33.3 5.5% 32.4%"
+    },
+    {
+      "scale": 700,
+      "hex": "#44403c",
+      "rgb": "rgb(68,64,60)",
+      "hsl": "hsl(30,6.3%,25.1%)",
+      "oklch": "oklch(0.37,0.01,68)",
+      "rgbChannel": "68 64 60",
+      "hslChannel": "30 6.3% 25.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#292524",
+      "rgb": "rgb(41,37,36)",
+      "hsl": "hsl(12,6.5%,15.1%)",
+      "oklch": "oklch(0.27,0.01,34)",
+      "rgbChannel": "41 37 36",
+      "hslChannel": "12 6.5% 15.1%"
+    },
+    {
+      "scale": 900,
+      "hex": "#1c1917",
+      "rgb": "rgb(28,25,23)",
+      "hsl": "hsl(24,9.8%,10%)",
+      "oklch": "oklch(0.22,0.01,56)",
+      "rgbChannel": "28 25 23",
+      "hslChannel": "24 9.8% 10%"
+    },
+    {
+      "scale": 950,
+      "hex": "#0c0a09",
+      "rgb": "rgb(12,10,9)",
+      "hsl": "hsl(20,14.3%,4.1%)",
+      "oklch": "oklch(0.15,0.00,49)",
+      "rgbChannel": "12 10 9",
+      "hslChannel": "20 14.3% 4.1%"
+    }
+  ],
+  "red": [
+    {
+      "scale": 50,
+      "hex": "#fef2f2",
+      "rgb": "rgb(254,242,242)",
+      "hsl": "hsl(0,85.7%,97.3%)",
+      "oklch": "oklch(0.97,0.01,17)",
+      "rgbChannel": "254 242 242",
+      "hslChannel": "0 85.7% 97.3%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fee2e2",
+      "rgb": "rgb(254,226,226)",
+      "hsl": "hsl(0,93.3%,94.1%)",
+      "oklch": "oklch(0.94,0.03,18)",
+      "rgbChannel": "254 226 226",
+      "hslChannel": "0 93.3% 94.1%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fecaca",
+      "rgb": "rgb(254,202,202)",
+      "hsl": "hsl(0,96.3%,89.4%)",
+      "oklch": "oklch(0.88,0.06,18)",
+      "rgbChannel": "254 202 202",
+      "hslChannel": "0 96.3% 89.4%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fca5a5",
+      "rgb": "rgb(252,165,165)",
+      "hsl": "hsl(0,93.5%,81.8%)",
+      "oklch": "oklch(0.81,0.10,20)",
+      "rgbChannel": "252 165 165",
+      "hslChannel": "0 93.5% 81.8%"
+    },
+    {
+      "scale": 400,
+      "hex": "#f87171",
+      "rgb": "rgb(248,113,113)",
+      "hsl": "hsl(0,90.6%,70.8%)",
+      "oklch": "oklch(0.71,0.17,22)",
+      "rgbChannel": "248 113 113",
+      "hslChannel": "0 90.6% 70.8%"
+    },
+    {
+      "scale": 500,
+      "hex": "#ef4444",
+      "rgb": "rgb(239,68,68)",
+      "hsl": "hsl(0,84.2%,60.2%)",
+      "oklch": "oklch(0.64,0.21,25)",
+      "rgbChannel": "239 68 68",
+      "hslChannel": "0 84.2% 60.2%"
+    },
+    {
+      "scale": 600,
+      "hex": "#dc2626",
+      "rgb": "rgb(220,38,38)",
+      "hsl": "hsl(0,72.2%,50.6%)",
+      "oklch": "oklch(0.58,0.22,27)",
+      "rgbChannel": "220 38 38",
+      "hslChannel": "0 72.2% 50.6%"
+    },
+    {
+      "scale": 700,
+      "hex": "#b91c1c",
+      "rgb": "rgb(185,28,28)",
+      "hsl": "hsl(0,73.7%,41.8%)",
+      "oklch": "oklch(0.51,0.19,28)",
+      "rgbChannel": "185 28 28",
+      "hslChannel": "0 73.7% 41.8%"
+    },
+    {
+      "scale": 800,
+      "hex": "#991b1b",
+      "rgb": "rgb(153,27,27)",
+      "hsl": "hsl(0,70%,35.3%)",
+      "oklch": "oklch(0.44,0.16,27)",
+      "rgbChannel": "153 27 27",
+      "hslChannel": "0 70% 35.3%"
+    },
+    {
+      "scale": 900,
+      "hex": "#7f1d1d",
+      "rgb": "rgb(127,29,29)",
+      "hsl": "hsl(0,62.8%,30.6%)",
+      "oklch": "oklch(0.40,0.13,26)",
+      "rgbChannel": "127 29 29",
+      "hslChannel": "0 62.8% 30.6%"
+    },
+    {
+      "scale": 950,
+      "hex": "#450a0a",
+      "rgb": "rgb(69,10,10)",
+      "hsl": "hsl(0,74.7%,15.5%)",
+      "oklch": "oklch(0.26,0.09,26)",
+      "rgbChannel": "69 10 10",
+      "hslChannel": "0 74.7% 15.5%"
+    }
+  ],
+  "orange": [
+    {
+      "scale": 50,
+      "hex": "#fff7ed",
+      "rgb": "rgb(255,247,237)",
+      "hsl": "hsl(33.3,100%,96.5%)",
+      "oklch": "oklch(0.98,0.02,74)",
+      "rgbChannel": "255 247 237",
+      "hslChannel": "33.3 100% 96.5%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ffedd5",
+      "rgb": "rgb(255,237,213)",
+      "hsl": "hsl(34.3,100%,91.8%)",
+      "oklch": "oklch(0.95,0.04,75)",
+      "rgbChannel": "255 237 213",
+      "hslChannel": "34.3 100% 91.8%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fed7aa",
+      "rgb": "rgb(254,215,170)",
+      "hsl": "hsl(32.1,97.7%,83.1%)",
+      "oklch": "oklch(0.90,0.07,71)",
+      "rgbChannel": "254 215 170",
+      "hslChannel": "32.1 97.7% 83.1%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fdba74",
+      "rgb": "rgb(253,186,116)",
+      "hsl": "hsl(30.7,97.2%,72.4%)",
+      "oklch": "oklch(0.84,0.12,66)",
+      "rgbChannel": "253 186 116",
+      "hslChannel": "30.7 97.2% 72.4%"
+    },
+    {
+      "scale": 400,
+      "hex": "#fb923c",
+      "rgb": "rgb(251,146,60)",
+      "hsl": "hsl(27,96%,61%)",
+      "oklch": "oklch(0.76,0.16,56)",
+      "rgbChannel": "251 146 60",
+      "hslChannel": "27 96% 61%"
+    },
+    {
+      "scale": 500,
+      "hex": "#f97316",
+      "rgb": "rgb(249,115,22)",
+      "hsl": "hsl(24.6,95%,53.1%)",
+      "oklch": "oklch(0.70,0.19,48)",
+      "rgbChannel": "249 115 22",
+      "hslChannel": "24.6 95% 53.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#ea580c",
+      "rgb": "rgb(234,88,12)",
+      "hsl": "hsl(20.5,90.2%,48.2%)",
+      "oklch": "oklch(0.65,0.19,41)",
+      "rgbChannel": "234 88 12",
+      "hslChannel": "20.5 90.2% 48.2%"
+    },
+    {
+      "scale": 700,
+      "hex": "#c2410c",
+      "rgb": "rgb(194,65,12)",
+      "hsl": "hsl(17.5,88.3%,40.4%)",
+      "oklch": "oklch(0.55,0.17,38)",
+      "rgbChannel": "194 65 12",
+      "hslChannel": "17.5 88.3% 40.4%"
+    },
+    {
+      "scale": 800,
+      "hex": "#9a3412",
+      "rgb": "rgb(154,52,18)",
+      "hsl": "hsl(15,79.1%,33.7%)",
+      "oklch": "oklch(0.47,0.14,37)",
+      "rgbChannel": "154 52 18",
+      "hslChannel": "15 79.1% 33.7%"
+    },
+    {
+      "scale": 900,
+      "hex": "#7c2d12",
+      "rgb": "rgb(124,45,18)",
+      "hsl": "hsl(15.3,74.6%,27.8%)",
+      "oklch": "oklch(0.41,0.12,38)",
+      "rgbChannel": "124 45 18",
+      "hslChannel": "15.3 74.6% 27.8%"
+    },
+    {
+      "scale": 950,
+      "hex": "#431407",
+      "rgb": "rgb(67,20,7)",
+      "hsl": "hsl(13,81.1%,14.5%)",
+      "oklch": "oklch(0.27,0.08,36)",
+      "rgbChannel": "67 20 7",
+      "hslChannel": "13 81.1% 14.5%"
+    }
+  ],
+  "amber": [
+    {
+      "scale": 50,
+      "hex": "#fffbeb",
+      "rgb": "rgb(255,251,235)",
+      "hsl": "hsl(48,100%,96.1%)",
+      "oklch": "oklch(0.99,0.02,95)",
+      "rgbChannel": "255 251 235",
+      "hslChannel": "48 100% 96.1%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fef3c7",
+      "rgb": "rgb(254,243,199)",
+      "hsl": "hsl(48,96.5%,88.8%)",
+      "oklch": "oklch(0.96,0.06,96)",
+      "rgbChannel": "254 243 199",
+      "hslChannel": "48 96.5% 88.8%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fde68a",
+      "rgb": "rgb(253,230,138)",
+      "hsl": "hsl(48,96.6%,76.7%)",
+      "oklch": "oklch(0.92,0.12,96)",
+      "rgbChannel": "253 230 138",
+      "hslChannel": "48 96.6% 76.7%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fcd34d",
+      "rgb": "rgb(252,211,77)",
+      "hsl": "hsl(45.9,96.7%,64.5%)",
+      "oklch": "oklch(0.88,0.15,92)",
+      "rgbChannel": "252 211 77",
+      "hslChannel": "45.9 96.7% 64.5%"
+    },
+    {
+      "scale": 400,
+      "hex": "#fbbf24",
+      "rgb": "rgb(251,191,36)",
+      "hsl": "hsl(43.3,96.4%,56.3%)",
+      "oklch": "oklch(0.84,0.16,84)",
+      "rgbChannel": "251 191 36",
+      "hslChannel": "43.3 96.4% 56.3%"
+    },
+    {
+      "scale": 500,
+      "hex": "#f59e0b",
+      "rgb": "rgb(245,158,11)",
+      "hsl": "hsl(37.7,92.1%,50.2%)",
+      "oklch": "oklch(0.77,0.16,70)",
+      "rgbChannel": "245 158 11",
+      "hslChannel": "37.7 92.1% 50.2%"
+    },
+    {
+      "scale": 600,
+      "hex": "#d97706",
+      "rgb": "rgb(217,119,6)",
+      "hsl": "hsl(32.1,94.6%,43.7%)",
+      "oklch": "oklch(0.67,0.16,58)",
+      "rgbChannel": "217 119 6",
+      "hslChannel": "32.1 94.6% 43.7%"
+    },
+    {
+      "scale": 700,
+      "hex": "#b45309",
+      "rgb": "rgb(180,83,9)",
+      "hsl": "hsl(26,90.5%,37.1%)",
+      "oklch": "oklch(0.56,0.15,49)",
+      "rgbChannel": "180 83 9",
+      "hslChannel": "26 90.5% 37.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#92400e",
+      "rgb": "rgb(146,64,14)",
+      "hsl": "hsl(22.7,82.5%,31.4%)",
+      "oklch": "oklch(0.47,0.12,46)",
+      "rgbChannel": "146 64 14",
+      "hslChannel": "22.7 82.5% 31.4%"
+    },
+    {
+      "scale": 900,
+      "hex": "#78350f",
+      "rgb": "rgb(120,53,15)",
+      "hsl": "hsl(21.7,77.8%,26.5%)",
+      "oklch": "oklch(0.41,0.11,46)",
+      "rgbChannel": "120 53 15",
+      "hslChannel": "21.7 77.8% 26.5%"
+    },
+    {
+      "scale": 950,
+      "hex": "#451a03",
+      "rgb": "rgb(69,26,3)",
+      "hsl": "hsl(20.9,91.7%,14.1%)",
+      "oklch": "oklch(0.28,0.07,46)",
+      "rgbChannel": "69 26 3",
+      "hslChannel": "20.9 91.7% 14.1%"
+    }
+  ],
+  "yellow": [
+    {
+      "scale": 50,
+      "hex": "#fefce8",
+      "rgb": "rgb(254,252,232)",
+      "hsl": "hsl(54.5,91.7%,95.3%)",
+      "oklch": "oklch(0.99,0.03,102)",
+      "rgbChannel": "254 252 232",
+      "hslChannel": "54.5 91.7% 95.3%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fef9c3",
+      "rgb": "rgb(254,249,195)",
+      "hsl": "hsl(54.9,96.7%,88%)",
+      "oklch": "oklch(0.97,0.07,103)",
+      "rgbChannel": "254 249 195",
+      "hslChannel": "54.9 96.7% 88%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fef08a",
+      "rgb": "rgb(254,240,138)",
+      "hsl": "hsl(52.8,98.3%,76.9%)",
+      "oklch": "oklch(0.95,0.12,102)",
+      "rgbChannel": "254 240 138",
+      "hslChannel": "52.8 98.3% 76.9%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fde047",
+      "rgb": "rgb(253,224,71)",
+      "hsl": "hsl(50.4,97.8%,63.5%)",
+      "oklch": "oklch(0.91,0.17,98)",
+      "rgbChannel": "253 224 71",
+      "hslChannel": "50.4 97.8% 63.5%"
+    },
+    {
+      "scale": 400,
+      "hex": "#facc15",
+      "rgb": "rgb(250,204,21)",
+      "hsl": "hsl(47.9,95.8%,53.1%)",
+      "oklch": "oklch(0.86,0.17,92)",
+      "rgbChannel": "250 204 21",
+      "hslChannel": "47.9 95.8% 53.1%"
+    },
+    {
+      "scale": 500,
+      "hex": "#eab308",
+      "rgb": "rgb(234,179,8)",
+      "hsl": "hsl(45.4,93.4%,47.5%)",
+      "oklch": "oklch(0.80,0.16,86)",
+      "rgbChannel": "234 179 8",
+      "hslChannel": "45.4 93.4% 47.5%"
+    },
+    {
+      "scale": 600,
+      "hex": "#ca8a04",
+      "rgb": "rgb(202,138,4)",
+      "hsl": "hsl(40.6,96.1%,40.4%)",
+      "oklch": "oklch(0.68,0.14,76)",
+      "rgbChannel": "202 138 4",
+      "hslChannel": "40.6 96.1% 40.4%"
+    },
+    {
+      "scale": 700,
+      "hex": "#a16207",
+      "rgb": "rgb(161,98,7)",
+      "hsl": "hsl(35.5,91.7%,32.9%)",
+      "oklch": "oklch(0.55,0.12,66)",
+      "rgbChannel": "161 98 7",
+      "hslChannel": "35.5 91.7% 32.9%"
+    },
+    {
+      "scale": 800,
+      "hex": "#854d0e",
+      "rgb": "rgb(133,77,14)",
+      "hsl": "hsl(31.8,81%,28.8%)",
+      "oklch": "oklch(0.48,0.10,62)",
+      "rgbChannel": "133 77 14",
+      "hslChannel": "31.8 81% 28.8%"
+    },
+    {
+      "scale": 900,
+      "hex": "#713f12",
+      "rgb": "rgb(113,63,18)",
+      "hsl": "hsl(28.4,72.5%,25.7%)",
+      "oklch": "oklch(0.42,0.09,58)",
+      "rgbChannel": "113 63 18",
+      "hslChannel": "28.4 72.5% 25.7%"
+    },
+    {
+      "scale": 950,
+      "hex": "#422006",
+      "rgb": "rgb(66,32,6)",
+      "hsl": "hsl(26,83.3%,14.1%)",
+      "oklch": "oklch(0.29,0.06,54)",
+      "rgbChannel": "66 32 6",
+      "hslChannel": "26 83.3% 14.1%"
+    }
+  ],
+  "lime": [
+    {
+      "scale": 50,
+      "hex": "#f7fee7",
+      "rgb": "rgb(247,254,231)",
+      "hsl": "hsl(78.3,92%,95.1%)",
+      "oklch": "oklch(0.99,0.03,121)",
+      "rgbChannel": "247 254 231",
+      "hslChannel": "78.3 92% 95.1%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ecfccb",
+      "rgb": "rgb(236,252,203)",
+      "hsl": "hsl(79.6,89.1%,89.2%)",
+      "oklch": "oklch(0.97,0.07,122)",
+      "rgbChannel": "236 252 203",
+      "hslChannel": "79.6 89.1% 89.2%"
+    },
+    {
+      "scale": 200,
+      "hex": "#d9f99d",
+      "rgb": "rgb(217,249,157)",
+      "hsl": "hsl(80.9,88.5%,79.6%)",
+      "oklch": "oklch(0.94,0.12,124)",
+      "rgbChannel": "217 249 157",
+      "hslChannel": "80.9 88.5% 79.6%"
+    },
+    {
+      "scale": 300,
+      "hex": "#bef264",
+      "rgb": "rgb(190,242,100)",
+      "hsl": "hsl(82,84.5%,67.1%)",
+      "oklch": "oklch(0.90,0.18,127)",
+      "rgbChannel": "190 242 100",
+      "hslChannel": "82 84.5% 67.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a3e635",
+      "rgb": "rgb(163,230,53)",
+      "hsl": "hsl(82.7,78%,55.5%)",
+      "oklch": "oklch(0.85,0.21,129)",
+      "rgbChannel": "163 230 53",
+      "hslChannel": "82.7 78% 55.5%"
+    },
+    {
+      "scale": 500,
+      "hex": "#84cc16",
+      "rgb": "rgb(132,204,22)",
+      "hsl": "hsl(83.7,80.5%,44.3%)",
+      "oklch": "oklch(0.77,0.20,131)",
+      "rgbChannel": "132 204 22",
+      "hslChannel": "83.7 80.5% 44.3%"
+    },
+    {
+      "scale": 600,
+      "hex": "#65a30d",
+      "rgb": "rgb(101,163,13)",
+      "hsl": "hsl(84.8,85.2%,34.5%)",
+      "oklch": "oklch(0.65,0.18,132)",
+      "rgbChannel": "101 163 13",
+      "hslChannel": "84.8 85.2% 34.5%"
+    },
+    {
+      "scale": 700,
+      "hex": "#4d7c0f",
+      "rgb": "rgb(77,124,15)",
+      "hsl": "hsl(85.9,78.4%,27.3%)",
+      "oklch": "oklch(0.53,0.14,132)",
+      "rgbChannel": "77 124 15",
+      "hslChannel": "85.9 78.4% 27.3%"
+    },
+    {
+      "scale": 800,
+      "hex": "#3f6212",
+      "rgb": "rgb(63,98,18)",
+      "hsl": "hsl(86.3,69%,22.7%)",
+      "oklch": "oklch(0.45,0.11,131)",
+      "rgbChannel": "63 98 18",
+      "hslChannel": "86.3 69% 22.7%"
+    },
+    {
+      "scale": 900,
+      "hex": "#365314",
+      "rgb": "rgb(54,83,20)",
+      "hsl": "hsl(87.6,61.2%,20.2%)",
+      "oklch": "oklch(0.41,0.10,131)",
+      "rgbChannel": "54 83 20",
+      "hslChannel": "87.6 61.2% 20.2%"
+    },
+    {
+      "scale": 950,
+      "hex": "#1a2e05",
+      "rgb": "rgb(26,46,5)",
+      "hsl": "hsl(89.3,80.4%,10%)",
+      "oklch": "oklch(0.27,0.07,132)",
+      "rgbChannel": "26 46 5",
+      "hslChannel": "89.3 80.4% 10%"
+    }
+  ],
+  "green": [
+    {
+      "scale": 50,
+      "hex": "#f0fdf4",
+      "rgb": "rgb(240,253,244)",
+      "hsl": "hsl(138.5,76.5%,96.7%)",
+      "oklch": "oklch(0.98,0.02,156)",
+      "rgbChannel": "240 253 244",
+      "hslChannel": "138.5 76.5% 96.7%"
+    },
+    {
+      "scale": 100,
+      "hex": "#dcfce7",
+      "rgb": "rgb(220,252,231)",
+      "hsl": "hsl(140.6,84.2%,92.5%)",
+      "oklch": "oklch(0.96,0.04,157)",
+      "rgbChannel": "220 252 231",
+      "hslChannel": "140.6 84.2% 92.5%"
+    },
+    {
+      "scale": 200,
+      "hex": "#bbf7d0",
+      "rgb": "rgb(187,247,208)",
+      "hsl": "hsl(141,78.9%,85.1%)",
+      "oklch": "oklch(0.93,0.08,156)",
+      "rgbChannel": "187 247 208",
+      "hslChannel": "141 78.9% 85.1%"
+    },
+    {
+      "scale": 300,
+      "hex": "#86efac",
+      "rgb": "rgb(134,239,172)",
+      "hsl": "hsl(141.7,76.6%,73.1%)",
+      "oklch": "oklch(0.87,0.14,154)",
+      "rgbChannel": "134 239 172",
+      "hslChannel": "141.7 76.6% 73.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#4ade80",
+      "rgb": "rgb(74,222,128)",
+      "hsl": "hsl(141.9,69.2%,58%)",
+      "oklch": "oklch(0.80,0.18,152)",
+      "rgbChannel": "74 222 128",
+      "hslChannel": "141.9 69.2% 58%"
+    },
+    {
+      "scale": 500,
+      "hex": "#22c55e",
+      "rgb": "rgb(34,197,94)",
+      "hsl": "hsl(142.1,70.6%,45.3%)",
+      "oklch": "oklch(0.72,0.19,150)",
+      "rgbChannel": "34 197 94",
+      "hslChannel": "142.1 70.6% 45.3%"
+    },
+    {
+      "scale": 600,
+      "hex": "#16a34a",
+      "rgb": "rgb(22,163,74)",
+      "hsl": "hsl(142.1,76.2%,36.3%)",
+      "oklch": "oklch(0.63,0.17,149)",
+      "rgbChannel": "22 163 74",
+      "hslChannel": "142.1 76.2% 36.3%"
+    },
+    {
+      "scale": 700,
+      "hex": "#15803d",
+      "rgb": "rgb(21,128,61)",
+      "hsl": "hsl(142.4,71.8%,29.2%)",
+      "oklch": "oklch(0.53,0.14,150)",
+      "rgbChannel": "21 128 61",
+      "hslChannel": "142.4 71.8% 29.2%"
+    },
+    {
+      "scale": 800,
+      "hex": "#166534",
+      "rgb": "rgb(22,101,52)",
+      "hsl": "hsl(142.8,64.2%,24.1%)",
+      "oklch": "oklch(0.45,0.11,151)",
+      "rgbChannel": "22 101 52",
+      "hslChannel": "142.8 64.2% 24.1%"
+    },
+    {
+      "scale": 900,
+      "hex": "#14532d",
+      "rgb": "rgb(20,83,45)",
+      "hsl": "hsl(143.8,61.2%,20.2%)",
+      "oklch": "oklch(0.39,0.09,153)",
+      "rgbChannel": "20 83 45",
+      "hslChannel": "143.8 61.2% 20.2%"
+    },
+    {
+      "scale": 950,
+      "hex": "#052e16",
+      "rgb": "rgb(5,46,22)",
+      "hsl": "hsl(144.9,80.4%,10%)",
+      "oklch": "oklch(0.27,0.06,153)",
+      "rgbChannel": "5 46 22",
+      "hslChannel": "144.9 80.4% 10%"
+    }
+  ],
+  "emerald": [
+    {
+      "scale": 50,
+      "hex": "#ecfdf5",
+      "rgb": "rgb(236,253,245)",
+      "hsl": "hsl(151.8,81%,95.9%)",
+      "oklch": "oklch(0.98,0.02,166)",
+      "rgbChannel": "236 253 245",
+      "hslChannel": "151.8 81% 95.9%"
+    },
+    {
+      "scale": 100,
+      "hex": "#d1fae5",
+      "rgb": "rgb(209,250,229)",
+      "hsl": "hsl(149.3,80.4%,90%)",
+      "oklch": "oklch(0.95,0.05,163)",
+      "rgbChannel": "209 250 229",
+      "hslChannel": "149.3 80.4% 90%"
+    },
+    {
+      "scale": 200,
+      "hex": "#a7f3d0",
+      "rgb": "rgb(167,243,208)",
+      "hsl": "hsl(152.4,76%,80.4%)",
+      "oklch": "oklch(0.90,0.09,164)",
+      "rgbChannel": "167 243 208",
+      "hslChannel": "152.4 76% 80.4%"
+    },
+    {
+      "scale": 300,
+      "hex": "#6ee7b7",
+      "rgb": "rgb(110,231,183)",
+      "hsl": "hsl(156.2,71.6%,66.9%)",
+      "oklch": "oklch(0.85,0.13,165)",
+      "rgbChannel": "110 231 183",
+      "hslChannel": "156.2 71.6% 66.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#34d399",
+      "rgb": "rgb(52,211,153)",
+      "hsl": "hsl(158.1,64.4%,51.6%)",
+      "oklch": "oklch(0.77,0.15,163)",
+      "rgbChannel": "52 211 153",
+      "hslChannel": "158.1 64.4% 51.6%"
+    },
+    {
+      "scale": 500,
+      "hex": "#10b981",
+      "rgb": "rgb(16,185,129)",
+      "hsl": "hsl(160.1,84.1%,39.4%)",
+      "oklch": "oklch(0.70,0.15,162)",
+      "rgbChannel": "16 185 129",
+      "hslChannel": "160.1 84.1% 39.4%"
+    },
+    {
+      "scale": 600,
+      "hex": "#059669",
+      "rgb": "rgb(5,150,105)",
+      "hsl": "hsl(161.4,93.5%,30.4%)",
+      "oklch": "oklch(0.60,0.13,163)",
+      "rgbChannel": "5 150 105",
+      "hslChannel": "161.4 93.5% 30.4%"
+    },
+    {
+      "scale": 700,
+      "hex": "#047857",
+      "rgb": "rgb(4,120,87)",
+      "hsl": "hsl(162.9,93.5%,24.3%)",
+      "oklch": "oklch(0.51,0.10,166)",
+      "rgbChannel": "4 120 87",
+      "hslChannel": "162.9 93.5% 24.3%"
+    },
+    {
+      "scale": 800,
+      "hex": "#065f46",
+      "rgb": "rgb(6,95,70)",
+      "hsl": "hsl(163.1,88.1%,19.8%)",
+      "oklch": "oklch(0.43,0.09,167)",
+      "rgbChannel": "6 95 70",
+      "hslChannel": "163.1 88.1% 19.8%"
+    },
+    {
+      "scale": 900,
+      "hex": "#064e3b",
+      "rgb": "rgb(6,78,59)",
+      "hsl": "hsl(164.2,85.7%,16.5%)",
+      "oklch": "oklch(0.38,0.07,169)",
+      "rgbChannel": "6 78 59",
+      "hslChannel": "164.2 85.7% 16.5%"
+    },
+    {
+      "scale": 950,
+      "hex": "#022c22",
+      "rgb": "rgb(2,44,34)",
+      "hsl": "hsl(165.7,91.3%,9%)",
+      "oklch": "oklch(0.26,0.05,173)",
+      "rgbChannel": "2 44 34",
+      "hslChannel": "165.7 91.3% 9%"
+    }
+  ],
+  "teal": [
+    {
+      "scale": 50,
+      "hex": "#f0fdfa",
+      "rgb": "rgb(240,253,250)",
+      "hsl": "hsl(166.2,76.5%,96.7%)",
+      "oklch": "oklch(0.98,0.01,181)",
+      "rgbChannel": "240 253 250",
+      "hslChannel": "166.2 76.5% 96.7%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ccfbf1",
+      "rgb": "rgb(204,251,241)",
+      "hsl": "hsl(167.2,85.5%,89.2%)",
+      "oklch": "oklch(0.95,0.05,181)",
+      "rgbChannel": "204 251 241",
+      "hslChannel": "167.2 85.5% 89.2%"
+    },
+    {
+      "scale": 200,
+      "hex": "#99f6e4",
+      "rgb": "rgb(153,246,228)",
+      "hsl": "hsl(168.4,83.8%,78.2%)",
+      "oklch": "oklch(0.91,0.09,180)",
+      "rgbChannel": "153 246 228",
+      "hslChannel": "168.4 83.8% 78.2%"
+    },
+    {
+      "scale": 300,
+      "hex": "#5eead4",
+      "rgb": "rgb(94,234,212)",
+      "hsl": "hsl(170.6,76.9%,64.3%)",
+      "oklch": "oklch(0.85,0.13,181)",
+      "rgbChannel": "94 234 212",
+      "hslChannel": "170.6 76.9% 64.3%"
+    },
+    {
+      "scale": 400,
+      "hex": "#2dd4bf",
+      "rgb": "rgb(45,212,191)",
+      "hsl": "hsl(172.5,66%,50.4%)",
+      "oklch": "oklch(0.78,0.13,182)",
+      "rgbChannel": "45 212 191",
+      "hslChannel": "172.5 66% 50.4%"
+    },
+    {
+      "scale": 500,
+      "hex": "#14b8a6",
+      "rgb": "rgb(20,184,166)",
+      "hsl": "hsl(173.4,80.4%,40%)",
+      "oklch": "oklch(0.70,0.12,183)",
+      "rgbChannel": "20 184 166",
+      "hslChannel": "173.4 80.4% 40%"
+    },
+    {
+      "scale": 600,
+      "hex": "#0d9488",
+      "rgb": "rgb(13,148,136)",
+      "hsl": "hsl(174.7,83.9%,31.6%)",
+      "oklch": "oklch(0.60,0.10,185)",
+      "rgbChannel": "13 148 136",
+      "hslChannel": "174.7 83.9% 31.6%"
+    },
+    {
+      "scale": 700,
+      "hex": "#0f766e",
+      "rgb": "rgb(15,118,110)",
+      "hsl": "hsl(175.3,77.4%,26.1%)",
+      "oklch": "oklch(0.51,0.09,186)",
+      "rgbChannel": "15 118 110",
+      "hslChannel": "175.3 77.4% 26.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#115e59",
+      "rgb": "rgb(17,94,89)",
+      "hsl": "hsl(176.1,69.4%,21.8%)",
+      "oklch": "oklch(0.44,0.07,188)",
+      "rgbChannel": "17 94 89",
+      "hslChannel": "176.1 69.4% 21.8%"
+    },
+    {
+      "scale": 900,
+      "hex": "#134e4a",
+      "rgb": "rgb(19,78,74)",
+      "hsl": "hsl(175.9,60.8%,19%)",
+      "oklch": "oklch(0.39,0.06,188)",
+      "rgbChannel": "19 78 74",
+      "hslChannel": "175.9 60.8% 19%"
+    },
+    {
+      "scale": 950,
+      "hex": "#042f2e",
+      "rgb": "rgb(4,47,46)",
+      "hsl": "hsl(178.6,84.3%,10%)",
+      "oklch": "oklch(0.28,0.04,193)",
+      "rgbChannel": "4 47 46",
+      "hslChannel": "178.6 84.3% 10%"
+    }
+  ],
+  "cyan": [
+    {
+      "scale": 50,
+      "hex": "#ecfeff",
+      "rgb": "rgb(236,254,255)",
+      "hsl": "hsl(183.2,100%,96.3%)",
+      "oklch": "oklch(0.98,0.02,201)",
+      "rgbChannel": "236 254 255",
+      "hslChannel": "183.2 100% 96.3%"
+    },
+    {
+      "scale": 100,
+      "hex": "#cffafe",
+      "rgb": "rgb(207,250,254)",
+      "hsl": "hsl(185.1,95.9%,90.4%)",
+      "oklch": "oklch(0.96,0.04,203)",
+      "rgbChannel": "207 250 254",
+      "hslChannel": "185.1 95.9% 90.4%"
+    },
+    {
+      "scale": 200,
+      "hex": "#a5f3fc",
+      "rgb": "rgb(165,243,252)",
+      "hsl": "hsl(186.2,93.5%,81.8%)",
+      "oklch": "oklch(0.92,0.08,205)",
+      "rgbChannel": "165 243 252",
+      "hslChannel": "186.2 93.5% 81.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#67e8f9",
+      "rgb": "rgb(103,232,249)",
+      "hsl": "hsl(187,92.4%,69%)",
+      "oklch": "oklch(0.87,0.12,207)",
+      "rgbChannel": "103 232 249",
+      "hslChannel": "187 92.4% 69%"
+    },
+    {
+      "scale": 400,
+      "hex": "#22d3ee",
+      "rgb": "rgb(34,211,238)",
+      "hsl": "hsl(187.9,85.7%,53.3%)",
+      "oklch": "oklch(0.80,0.13,212)",
+      "rgbChannel": "34 211 238",
+      "hslChannel": "187.9 85.7% 53.3%"
+    },
+    {
+      "scale": 500,
+      "hex": "#06b6d4",
+      "rgb": "rgb(6,182,212)",
+      "hsl": "hsl(188.7,94.5%,42.7%)",
+      "oklch": "oklch(0.71,0.13,215)",
+      "rgbChannel": "6 182 212",
+      "hslChannel": "188.7 94.5% 42.7%"
+    },
+    {
+      "scale": 600,
+      "hex": "#0891b2",
+      "rgb": "rgb(8,145,178)",
+      "hsl": "hsl(191.6,91.4%,36.5%)",
+      "oklch": "oklch(0.61,0.11,222)",
+      "rgbChannel": "8 145 178",
+      "hslChannel": "191.6 91.4% 36.5%"
+    },
+    {
+      "scale": 700,
+      "hex": "#0e7490",
+      "rgb": "rgb(14,116,144)",
+      "hsl": "hsl(192.9,82.3%,31%)",
+      "oklch": "oklch(0.52,0.09,223)",
+      "rgbChannel": "14 116 144",
+      "hslChannel": "192.9 82.3% 31%"
+    },
+    {
+      "scale": 800,
+      "hex": "#155e75",
+      "rgb": "rgb(21,94,117)",
+      "hsl": "hsl(194.4,69.6%,27.1%)",
+      "oklch": "oklch(0.45,0.08,224)",
+      "rgbChannel": "21 94 117",
+      "hslChannel": "194.4 69.6% 27.1%"
+    },
+    {
+      "scale": 900,
+      "hex": "#164e63",
+      "rgb": "rgb(22,78,99)",
+      "hsl": "hsl(196.4,63.6%,23.7%)",
+      "oklch": "oklch(0.40,0.07,227)",
+      "rgbChannel": "22 78 99",
+      "hslChannel": "196.4 63.6% 23.7%"
+    },
+    {
+      "scale": 950,
+      "hex": "#083344",
+      "rgb": "rgb(8,51,68)",
+      "hsl": "hsl(197,78.9%,14.9%)",
+      "oklch": "oklch(0.30,0.05,230)",
+      "rgbChannel": "8 51 68",
+      "hslChannel": "197 78.9% 14.9%"
+    }
+  ],
+  "sky": [
+    {
+      "scale": 50,
+      "hex": "#f0f9ff",
+      "rgb": "rgb(240,249,255)",
+      "hsl": "hsl(204,100%,97.1%)",
+      "oklch": "oklch(0.98,0.01,237)",
+      "rgbChannel": "240 249 255",
+      "hslChannel": "204 100% 97.1%"
+    },
+    {
+      "scale": 100,
+      "hex": "#e0f2fe",
+      "rgb": "rgb(224,242,254)",
+      "hsl": "hsl(204,93.8%,93.7%)",
+      "oklch": "oklch(0.95,0.03,237)",
+      "rgbChannel": "224 242 254",
+      "hslChannel": "204 93.8% 93.7%"
+    },
+    {
+      "scale": 200,
+      "hex": "#bae6fd",
+      "rgb": "rgb(186,230,253)",
+      "hsl": "hsl(200.6,94.4%,86.1%)",
+      "oklch": "oklch(0.90,0.06,231)",
+      "rgbChannel": "186 230 253",
+      "hslChannel": "200.6 94.4% 86.1%"
+    },
+    {
+      "scale": 300,
+      "hex": "#7dd3fc",
+      "rgb": "rgb(125,211,252)",
+      "hsl": "hsl(199.4,95.5%,73.9%)",
+      "oklch": "oklch(0.83,0.10,230)",
+      "rgbChannel": "125 211 252",
+      "hslChannel": "199.4 95.5% 73.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#38bdf8",
+      "rgb": "rgb(56,189,248)",
+      "hsl": "hsl(198.4,93.2%,59.6%)",
+      "oklch": "oklch(0.75,0.14,233)",
+      "rgbChannel": "56 189 248",
+      "hslChannel": "198.4 93.2% 59.6%"
+    },
+    {
+      "scale": 500,
+      "hex": "#0ea5e9",
+      "rgb": "rgb(14,165,233)",
+      "hsl": "hsl(198.6,88.7%,48.4%)",
+      "oklch": "oklch(0.68,0.15,237)",
+      "rgbChannel": "14 165 233",
+      "hslChannel": "198.6 88.7% 48.4%"
+    },
+    {
+      "scale": 600,
+      "hex": "#0284c7",
+      "rgb": "rgb(2,132,199)",
+      "hsl": "hsl(200.4,98%,39.4%)",
+      "oklch": "oklch(0.59,0.14,242)",
+      "rgbChannel": "2 132 199",
+      "hslChannel": "200.4 98% 39.4%"
+    },
+    {
+      "scale": 700,
+      "hex": "#0369a1",
+      "rgb": "rgb(3,105,161)",
+      "hsl": "hsl(201.3,96.3%,32.2%)",
+      "oklch": "oklch(0.50,0.12,243)",
+      "rgbChannel": "3 105 161",
+      "hslChannel": "201.3 96.3% 32.2%"
+    },
+    {
+      "scale": 800,
+      "hex": "#075985",
+      "rgb": "rgb(7,89,133)",
+      "hsl": "hsl(201,90%,27.5%)",
+      "oklch": "oklch(0.44,0.10,241)",
+      "rgbChannel": "7 89 133",
+      "hslChannel": "201 90% 27.5%"
+    },
+    {
+      "scale": 900,
+      "hex": "#0c4a6e",
+      "rgb": "rgb(12,74,110)",
+      "hsl": "hsl(202,80.3%,23.9%)",
+      "oklch": "oklch(0.39,0.08,241)",
+      "rgbChannel": "12 74 110",
+      "hslChannel": "202 80.3% 23.9%"
+    },
+    {
+      "scale": 950,
+      "hex": "#082f49",
+      "rgb": "rgb(8,47,73)",
+      "hsl": "hsl(204,80.2%,15.9%)",
+      "oklch": "oklch(0.29,0.06,243)",
+      "rgbChannel": "8 47 73",
+      "hslChannel": "204 80.2% 15.9%"
+    }
+  ],
+  "blue": [
+    {
+      "scale": 50,
+      "hex": "#eff6ff",
+      "rgb": "rgb(239,246,255)",
+      "hsl": "hsl(213.8,100%,96.9%)",
+      "oklch": "oklch(0.97,0.01,255)",
+      "rgbChannel": "239 246 255",
+      "hslChannel": "213.8 100% 96.9%"
+    },
+    {
+      "scale": 100,
+      "hex": "#dbeafe",
+      "rgb": "rgb(219,234,254)",
+      "hsl": "hsl(214.3,94.6%,92.7%)",
+      "oklch": "oklch(0.93,0.03,256)",
+      "rgbChannel": "219 234 254",
+      "hslChannel": "214.3 94.6% 92.7%"
+    },
+    {
+      "scale": 200,
+      "hex": "#bfdbfe",
+      "rgb": "rgb(191,219,254)",
+      "hsl": "hsl(213.3,96.9%,87.3%)",
+      "oklch": "oklch(0.88,0.06,254)",
+      "rgbChannel": "191 219 254",
+      "hslChannel": "213.3 96.9% 87.3%"
+    },
+    {
+      "scale": 300,
+      "hex": "#93c5fd",
+      "rgb": "rgb(147,197,253)",
+      "hsl": "hsl(211.7,96.4%,78.4%)",
+      "oklch": "oklch(0.81,0.10,252)",
+      "rgbChannel": "147 197 253",
+      "hslChannel": "211.7 96.4% 78.4%"
+    },
+    {
+      "scale": 400,
+      "hex": "#60a5fa",
+      "rgb": "rgb(96,165,250)",
+      "hsl": "hsl(213.1,93.9%,67.8%)",
+      "oklch": "oklch(0.71,0.14,255)",
+      "rgbChannel": "96 165 250",
+      "hslChannel": "213.1 93.9% 67.8%"
+    },
+    {
+      "scale": 500,
+      "hex": "#3b82f6",
+      "rgb": "rgb(59,130,246)",
+      "hsl": "hsl(217.2,91.2%,59.8%)",
+      "oklch": "oklch(0.62,0.19,260)",
+      "rgbChannel": "59 130 246",
+      "hslChannel": "217.2 91.2% 59.8%"
+    },
+    {
+      "scale": 600,
+      "hex": "#2563eb",
+      "rgb": "rgb(37,99,235)",
+      "hsl": "hsl(221.2,83.2%,53.3%)",
+      "oklch": "oklch(0.55,0.22,263)",
+      "rgbChannel": "37 99 235",
+      "hslChannel": "221.2 83.2% 53.3%"
+    },
+    {
+      "scale": 700,
+      "hex": "#1d4ed8",
+      "rgb": "rgb(29,78,216)",
+      "hsl": "hsl(224.3,76.3%,48%)",
+      "oklch": "oklch(0.49,0.22,264)",
+      "rgbChannel": "29 78 216",
+      "hslChannel": "224.3 76.3% 48%"
+    },
+    {
+      "scale": 800,
+      "hex": "#1e40af",
+      "rgb": "rgb(30,64,175)",
+      "hsl": "hsl(225.9,70.7%,40.2%)",
+      "oklch": "oklch(0.42,0.18,266)",
+      "rgbChannel": "30 64 175",
+      "hslChannel": "225.9 70.7% 40.2%"
+    },
+    {
+      "scale": 900,
+      "hex": "#1e3a8a",
+      "rgb": "rgb(30,58,138)",
+      "hsl": "hsl(224.4,64.3%,32.9%)",
+      "oklch": "oklch(0.38,0.14,266)",
+      "rgbChannel": "30 58 138",
+      "hslChannel": "224.4 64.3% 32.9%"
+    },
+    {
+      "scale": 950,
+      "hex": "#172554",
+      "rgb": "rgb(23,37,84)",
+      "hsl": "hsl(226.2,57%,21%)",
+      "oklch": "oklch(0.28,0.09,268)",
+      "rgbChannel": "23 37 84",
+      "hslChannel": "226.2 57% 21%"
+    }
+  ],
+  "indigo": [
+    {
+      "scale": 50,
+      "hex": "#eef2ff",
+      "rgb": "rgb(238,242,255)",
+      "hsl": "hsl(225.9,100%,96.7%)",
+      "oklch": "oklch(0.96,0.02,272)",
+      "rgbChannel": "238 242 255",
+      "hslChannel": "225.9 100% 96.7%"
+    },
+    {
+      "scale": 100,
+      "hex": "#e0e7ff",
+      "rgb": "rgb(224,231,255)",
+      "hsl": "hsl(226.5,100%,93.9%)",
+      "oklch": "oklch(0.93,0.03,273)",
+      "rgbChannel": "224 231 255",
+      "hslChannel": "226.5 100% 93.9%"
+    },
+    {
+      "scale": 200,
+      "hex": "#c7d2fe",
+      "rgb": "rgb(199,210,254)",
+      "hsl": "hsl(228,96.5%,88.8%)",
+      "oklch": "oklch(0.87,0.06,274)",
+      "rgbChannel": "199 210 254",
+      "hslChannel": "228 96.5% 88.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#a5b4fc",
+      "rgb": "rgb(165,180,252)",
+      "hsl": "hsl(229.7,93.5%,81.8%)",
+      "oklch": "oklch(0.79,0.10,275)",
+      "rgbChannel": "165 180 252",
+      "hslChannel": "229.7 93.5% 81.8%"
+    },
+    {
+      "scale": 400,
+      "hex": "#818cf8",
+      "rgb": "rgb(129,140,248)",
+      "hsl": "hsl(234.5,89.5%,73.9%)",
+      "oklch": "oklch(0.68,0.16,277)",
+      "rgbChannel": "129 140 248",
+      "hslChannel": "234.5 89.5% 73.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#6366f1",
+      "rgb": "rgb(99,102,241)",
+      "hsl": "hsl(238.7,83.5%,66.7%)",
+      "oklch": "oklch(0.59,0.20,277)",
+      "rgbChannel": "99 102 241",
+      "hslChannel": "238.7 83.5% 66.7%"
+    },
+    {
+      "scale": 600,
+      "hex": "#4f46e5",
+      "rgb": "rgb(79,70,229)",
+      "hsl": "hsl(243.4,75.4%,58.6%)",
+      "oklch": "oklch(0.51,0.23,277)",
+      "rgbChannel": "79 70 229",
+      "hslChannel": "243.4 75.4% 58.6%"
+    },
+    {
+      "scale": 700,
+      "hex": "#4338ca",
+      "rgb": "rgb(67,56,202)",
+      "hsl": "hsl(244.5,57.9%,50.6%)",
+      "oklch": "oklch(0.46,0.21,277)",
+      "rgbChannel": "67 56 202",
+      "hslChannel": "244.5 57.9% 50.6%"
+    },
+    {
+      "scale": 800,
+      "hex": "#3730a3",
+      "rgb": "rgb(55,48,163)",
+      "hsl": "hsl(243.7,54.5%,41.4%)",
+      "oklch": "oklch(0.40,0.18,277)",
+      "rgbChannel": "55 48 163",
+      "hslChannel": "243.7 54.5% 41.4%"
+    },
+    {
+      "scale": 900,
+      "hex": "#312e81",
+      "rgb": "rgb(49,46,129)",
+      "hsl": "hsl(242.2,47.4%,34.3%)",
+      "oklch": "oklch(0.36,0.14,279)",
+      "rgbChannel": "49 46 129",
+      "hslChannel": "242.2 47.4% 34.3%"
+    },
+    {
+      "scale": 950,
+      "hex": "#1e1b4b",
+      "rgb": "rgb(30,27,75)",
+      "hsl": "hsl(243.8,47.1%,20%)",
+      "oklch": "oklch(0.26,0.09,281)",
+      "rgbChannel": "30 27 75",
+      "hslChannel": "243.8 47.1% 20%"
+    }
+  ],
+  "violet": [
+    {
+      "scale": 50,
+      "hex": "#f5f3ff",
+      "rgb": "rgb(245,243,255)",
+      "hsl": "hsl(250,100%,97.6%)",
+      "oklch": "oklch(0.97,0.02,294)",
+      "rgbChannel": "245 243 255",
+      "hslChannel": "250 100% 97.6%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ede9fe",
+      "rgb": "rgb(237,233,254)",
+      "hsl": "hsl(251.4,91.3%,95.5%)",
+      "oklch": "oklch(0.94,0.03,295)",
+      "rgbChannel": "237 233 254",
+      "hslChannel": "251.4 91.3% 95.5%"
+    },
+    {
+      "scale": 200,
+      "hex": "#ddd6fe",
+      "rgb": "rgb(221,214,254)",
+      "hsl": "hsl(250.5,95.2%,91.8%)",
+      "oklch": "oklch(0.89,0.05,293)",
+      "rgbChannel": "221 214 254",
+      "hslChannel": "250.5 95.2% 91.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#c4b5fd",
+      "rgb": "rgb(196,181,253)",
+      "hsl": "hsl(252.5,94.7%,85.1%)",
+      "oklch": "oklch(0.81,0.10,294)",
+      "rgbChannel": "196 181 253",
+      "hslChannel": "252.5 94.7% 85.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a78bfa",
+      "rgb": "rgb(167,139,250)",
+      "hsl": "hsl(255.1,91.7%,76.3%)",
+      "oklch": "oklch(0.71,0.16,294)",
+      "rgbChannel": "167 139 250",
+      "hslChannel": "255.1 91.7% 76.3%"
+    },
+    {
+      "scale": 500,
+      "hex": "#8b5cf6",
+      "rgb": "rgb(139,92,246)",
+      "hsl": "hsl(258.3,89.5%,66.3%)",
+      "oklch": "oklch(0.61,0.22,293)",
+      "rgbChannel": "139 92 246",
+      "hslChannel": "258.3 89.5% 66.3%"
+    },
+    {
+      "scale": 600,
+      "hex": "#7c3aed",
+      "rgb": "rgb(124,58,237)",
+      "hsl": "hsl(262.1,83.3%,57.8%)",
+      "oklch": "oklch(0.54,0.25,293)",
+      "rgbChannel": "124 58 237",
+      "hslChannel": "262.1 83.3% 57.8%"
+    },
+    {
+      "scale": 700,
+      "hex": "#6d28d9",
+      "rgb": "rgb(109,40,217)",
+      "hsl": "hsl(263.4,70%,50.4%)",
+      "oklch": "oklch(0.49,0.24,293)",
+      "rgbChannel": "109 40 217",
+      "hslChannel": "263.4 70% 50.4%"
+    },
+    {
+      "scale": 800,
+      "hex": "#5b21b6",
+      "rgb": "rgb(91,33,182)",
+      "hsl": "hsl(263.4,69.3%,42.2%)",
+      "oklch": "oklch(0.43,0.21,293)",
+      "rgbChannel": "91 33 182",
+      "hslChannel": "263.4 69.3% 42.2%"
+    },
+    {
+      "scale": 900,
+      "hex": "#4c1d95",
+      "rgb": "rgb(76,29,149)",
+      "hsl": "hsl(263.5,67.4%,34.9%)",
+      "oklch": "oklch(0.38,0.18,294)",
+      "rgbChannel": "76 29 149",
+      "hslChannel": "263.5 67.4% 34.9%"
+    },
+    {
+      "scale": 950,
+      "hex": "#1e1b4b",
+      "rgb": "rgb(46,16,101)",
+      "hsl": "hsl(261.2,72.6%,22.9%)",
+      "oklch": "oklch(0.28,0.14,291)",
+      "rgbChannel": "46 16 101",
+      "hslChannel": "261.2 72.6% 22.9%"
+    }
+  ],
+  "purple": [
+    {
+      "scale": 50,
+      "hex": "#faf5ff",
+      "rgb": "rgb(250,245,255)",
+      "hsl": "hsl(270,100%,98%)",
+      "oklch": "oklch(0.98,0.01,308)",
+      "rgbChannel": "250 245 255",
+      "hslChannel": "270 100% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f3e8ff",
+      "rgb": "rgb(243,232,255)",
+      "hsl": "hsl(268.7,100%,95.5%)",
+      "oklch": "oklch(0.95,0.03,307)",
+      "rgbChannel": "243 232 255",
+      "hslChannel": "268.7 100% 95.5%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e9d5ff",
+      "rgb": "rgb(233,213,255)",
+      "hsl": "hsl(268.6,100%,91.8%)",
+      "oklch": "oklch(0.90,0.06,307)",
+      "rgbChannel": "233 213 255",
+      "hslChannel": "268.6 100% 91.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d8b4fe",
+      "rgb": "rgb(216,180,254)",
+      "hsl": "hsl(269.2,97.4%,85.1%)",
+      "oklch": "oklch(0.83,0.11,306)",
+      "rgbChannel": "216 180 254",
+      "hslChannel": "269.2 97.4% 85.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#c084fc",
+      "rgb": "rgb(192,132,252)",
+      "hsl": "hsl(270,95.2%,75.3%)",
+      "oklch": "oklch(0.72,0.18,306)",
+      "rgbChannel": "192 132 252",
+      "hslChannel": "270 95.2% 75.3%"
+    },
+    {
+      "scale": 500,
+      "hex": "#a855f7",
+      "rgb": "rgb(168,85,247)",
+      "hsl": "hsl(270.7,91%,65.1%)",
+      "oklch": "oklch(0.63,0.23,304)",
+      "rgbChannel": "168 85 247",
+      "hslChannel": "270.7 91% 65.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#9333ea",
+      "rgb": "rgb(147,51,234)",
+      "hsl": "hsl(271.5,81.3%,55.9%)",
+      "oklch": "oklch(0.56,0.25,302)",
+      "rgbChannel": "147 51 234",
+      "hslChannel": "271.5 81.3% 55.9%"
+    },
+    {
+      "scale": 700,
+      "hex": "#7e22ce",
+      "rgb": "rgb(126,34,206)",
+      "hsl": "hsl(272.1,71.7%,47.1%)",
+      "oklch": "oklch(0.50,0.24,302)",
+      "rgbChannel": "126 34 206",
+      "hslChannel": "272.1 71.7% 47.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#6b21a8",
+      "rgb": "rgb(107,33,168)",
+      "hsl": "hsl(272.9,67.2%,39.4%)",
+      "oklch": "oklch(0.44,0.20,304)",
+      "rgbChannel": "107 33 168",
+      "hslChannel": "272.9 67.2% 39.4%"
+    },
+    {
+      "scale": 900,
+      "hex": "#581c87",
+      "rgb": "rgb(88,28,135)",
+      "hsl": "hsl(273.6,65.6%,32%)",
+      "oklch": "oklch(0.38,0.17,305)",
+      "rgbChannel": "88 28 135",
+      "hslChannel": "273.6 65.6% 32%"
+    },
+    {
+      "scale": 950,
+      "hex": "#3b0764",
+      "rgb": "rgb(59,7,100)",
+      "hsl": "hsl(273.5,86.9%,21%)",
+      "oklch": "oklch(0.29,0.14,303)",
+      "rgbChannel": "59 7 100",
+      "hslChannel": "273.5 86.9% 21%"
+    }
+  ],
+  "fuchsia": [
+    {
+      "scale": 50,
+      "hex": "#fdf4ff",
+      "rgb": "rgb(253,244,255)",
+      "hsl": "hsl(289.1,100%,97.8%)",
+      "oklch": "oklch(0.98,0.02,320)",
+      "rgbChannel": "253 244 255",
+      "hslChannel": "289.1 100% 97.8%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fae8ff",
+      "rgb": "rgb(250,232,255)",
+      "hsl": "hsl(287,100%,95.5%)",
+      "oklch": "oklch(0.95,0.04,319)",
+      "rgbChannel": "250 232 255",
+      "hslChannel": "287 100% 95.5%"
+    },
+    {
+      "scale": 200,
+      "hex": "#f5d0fe",
+      "rgb": "rgb(245,208,254)",
+      "hsl": "hsl(288.3,95.8%,90.6%)",
+      "oklch": "oklch(0.90,0.07,320)",
+      "rgbChannel": "245 208 254",
+      "hslChannel": "288.3 95.8% 90.6%"
+    },
+    {
+      "scale": 300,
+      "hex": "#f0abfc",
+      "rgb": "rgb(240,171,252)",
+      "hsl": "hsl(291.1,93.1%,82.9%)",
+      "oklch": "oklch(0.83,0.13,321)",
+      "rgbChannel": "240 171 252",
+      "hslChannel": "291.1 93.1% 82.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#e879f9",
+      "rgb": "rgb(232,121,249)",
+      "hsl": "hsl(292,91.4%,72.5%)",
+      "oklch": "oklch(0.75,0.21,322)",
+      "rgbChannel": "232 121 249",
+      "hslChannel": "292 91.4% 72.5%"
+    },
+    {
+      "scale": 500,
+      "hex": "#d946ef",
+      "rgb": "rgb(217,70,239)",
+      "hsl": "hsl(292.2,84.1%,60.6%)",
+      "oklch": "oklch(0.67,0.26,322)",
+      "rgbChannel": "217 70 239",
+      "hslChannel": "292.2 84.1% 60.6%"
+    },
+    {
+      "scale": 600,
+      "hex": "#c026d3",
+      "rgb": "rgb(192,38,211)",
+      "hsl": "hsl(293.4,69.5%,48.8%)",
+      "oklch": "oklch(0.59,0.26,323)",
+      "rgbChannel": "192 38 211",
+      "hslChannel": "293.4 69.5% 48.8%"
+    },
+    {
+      "scale": 700,
+      "hex": "#a21caf",
+      "rgb": "rgb(162,28,175)",
+      "hsl": "hsl(294.7,72.4%,39.8%)",
+      "oklch": "oklch(0.52,0.23,324)",
+      "rgbChannel": "162 28 175",
+      "hslChannel": "294.7 72.4% 39.8%"
+    },
+    {
+      "scale": 800,
+      "hex": "#86198f",
+      "rgb": "rgb(134,25,143)",
+      "hsl": "hsl(295.4,70.2%,32.9%)",
+      "oklch": "oklch(0.45,0.19,325)",
+      "rgbChannel": "134 25 143",
+      "hslChannel": "295.4 70.2% 32.9%"
+    },
+    {
+      "scale": 900,
+      "hex": "#701a75",
+      "rgb": "rgb(112,26,117)",
+      "hsl": "hsl(296.7,63.6%,28%)",
+      "oklch": "oklch(0.40,0.16,326)",
+      "rgbChannel": "112 26 117",
+      "hslChannel": "296.7 63.6% 28%"
+    },
+    {
+      "scale": 950,
+      "hex": "#4a044e",
+      "rgb": "rgb(74,4,78)",
+      "hsl": "hsl(296.8,90.2%,16.1%)",
+      "oklch": "oklch(0.29,0.13,326)",
+      "rgbChannel": "74 4 78",
+      "hslChannel": "296.8 90.2% 16.1%"
+    }
+  ],
+  "pink": [
+    {
+      "scale": 50,
+      "hex": "#fdf2f8",
+      "rgb": "rgb(253,242,248)",
+      "hsl": "hsl(327.3,73.3%,97.1%)",
+      "oklch": "oklch(0.97,0.01,343)",
+      "rgbChannel": "253 242 248",
+      "hslChannel": "327.3 73.3% 97.1%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fce7f3",
+      "rgb": "rgb(252,231,243)",
+      "hsl": "hsl(325.7,77.8%,94.7%)",
+      "oklch": "oklch(0.95,0.03,342)",
+      "rgbChannel": "252 231 243",
+      "hslChannel": "325.7 77.8% 94.7%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fbcfe8",
+      "rgb": "rgb(251,207,232)",
+      "hsl": "hsl(325.9,84.6%,89.8%)",
+      "oklch": "oklch(0.90,0.06,343)",
+      "rgbChannel": "251 207 232",
+      "hslChannel": "325.9 84.6% 89.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#f9a8d4",
+      "rgb": "rgb(249,168,212)",
+      "hsl": "hsl(327.4,87.1%,81.8%)",
+      "oklch": "oklch(0.82,0.11,346)",
+      "rgbChannel": "249 168 212",
+      "hslChannel": "327.4 87.1% 81.8%"
+    },
+    {
+      "scale": 400,
+      "hex": "#f472b6",
+      "rgb": "rgb(244,114,182)",
+      "hsl": "hsl(328.6,85.5%,70.2%)",
+      "oklch": "oklch(0.73,0.18,350)",
+      "rgbChannel": "244 114 182",
+      "hslChannel": "328.6 85.5% 70.2%"
+    },
+    {
+      "scale": 500,
+      "hex": "#ec4899",
+      "rgb": "rgb(236,72,153)",
+      "hsl": "hsl(330.4,81.2%,60.4%)",
+      "oklch": "oklch(0.66,0.21,354)",
+      "rgbChannel": "236 72 153",
+      "hslChannel": "330.4 81.2% 60.4%"
+    },
+    {
+      "scale": 600,
+      "hex": "#db2777",
+      "rgb": "rgb(219,39,119)",
+      "hsl": "hsl(333.3,71.4%,50.6%)",
+      "oklch": "oklch(0.59,0.22,1)",
+      "rgbChannel": "219 39 119",
+      "hslChannel": "333.3 71.4% 50.6%"
+    },
+    {
+      "scale": 700,
+      "hex": "#be185d",
+      "rgb": "rgb(190,24,93)",
+      "hsl": "hsl(335.1,77.6%,42%)",
+      "oklch": "oklch(0.52,0.20,4)",
+      "rgbChannel": "190 24 93",
+      "hslChannel": "335.1 77.6% 42%"
+    },
+    {
+      "scale": 800,
+      "hex": "#9d174d",
+      "rgb": "rgb(157,23,77)",
+      "hsl": "hsl(335.8,74.4%,35.3%)",
+      "oklch": "oklch(0.46,0.17,4)",
+      "rgbChannel": "157 23 77",
+      "hslChannel": "335.8 74.4% 35.3%"
+    },
+    {
+      "scale": 900,
+      "hex": "#831843",
+      "rgb": "rgb(131,24,67)",
+      "hsl": "hsl(335.9,69%,30.4%)",
+      "oklch": "oklch(0.41,0.14,2)",
+      "rgbChannel": "131 24 67",
+      "hslChannel": "335.9 69% 30.4%"
+    },
+    {
+      "scale": 950,
+      "hex": "#500724",
+      "rgb": "rgb(80,7,36)",
+      "hsl": "hsl(336.2,83.9%,17.1%)",
+      "oklch": "oklch(0.28,0.10,4)",
+      "rgbChannel": "80 7 36",
+      "hslChannel": "336.2 83.9% 17.1%"
+    }
+  ],
+  "rose": [
+    {
+      "scale": 50,
+      "hex": "#fff1f2",
+      "rgb": "rgb(255,241,242)",
+      "hsl": "hsl(355.7,100%,97.3%)",
+      "oklch": "oklch(0.97,0.02,12)",
+      "rgbChannel": "255 241 242",
+      "hslChannel": "355.7 100% 97.3%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ffe4e6",
+      "rgb": "rgb(255,228,230)",
+      "hsl": "hsl(355.6,100%,94.7%)",
+      "oklch": "oklch(0.94,0.03,13)",
+      "rgbChannel": "255 228 230",
+      "hslChannel": "355.6 100% 94.7%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fecdd3",
+      "rgb": "rgb(254,205,211)",
+      "hsl": "hsl(352.7,96.1%,90%)",
+      "oklch": "oklch(0.89,0.06,10)",
+      "rgbChannel": "254 205 211",
+      "hslChannel": "352.7 96.1% 90%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fda4af",
+      "rgb": "rgb(253,164,175)",
+      "hsl": "hsl(352.6,95.7%,81.8%)",
+      "oklch": "oklch(0.81,0.11,12)",
+      "rgbChannel": "253 164 175",
+      "hslChannel": "352.6 95.7% 81.8%"
+    },
+    {
+      "scale": 400,
+      "hex": "#fb7185",
+      "rgb": "rgb(251,113,133)",
+      "hsl": "hsl(351.3,94.5%,71.4%)",
+      "oklch": "oklch(0.72,0.17,13)",
+      "rgbChannel": "251 113 133",
+      "hslChannel": "351.3 94.5% 71.4%"
+    },
+    {
+      "scale": 500,
+      "hex": "#f43f5e",
+      "rgb": "rgb(244,63,94)",
+      "hsl": "hsl(349.7,89.2%,60.2%)",
+      "oklch": "oklch(0.65,0.22,16)",
+      "rgbChannel": "244 63 94",
+      "hslChannel": "349.7 89.2% 60.2%"
+    },
+    {
+      "scale": 600,
+      "hex": "#e11d48",
+      "rgb": "rgb(225,29,72)",
+      "hsl": "hsl(346.8,77.2%,49.8%)",
+      "oklch": "oklch(0.59,0.22,18)",
+      "rgbChannel": "225 29 72",
+      "hslChannel": "346.8 77.2% 49.8%"
+    },
+    {
+      "scale": 700,
+      "hex": "#be123c",
+      "rgb": "rgb(190,18,60)",
+      "hsl": "hsl(345.3,82.7%,40.8%)",
+      "oklch": "oklch(0.51,0.20,17)",
+      "rgbChannel": "190 18 60",
+      "hslChannel": "345.3 82.7% 40.8%"
+    },
+    {
+      "scale": 800,
+      "hex": "#9f1239",
+      "rgb": "rgb(159,18,57)",
+      "hsl": "hsl(343.4,79.7%,34.7%)",
+      "oklch": "oklch(0.45,0.17,14)",
+      "rgbChannel": "159 18 57",
+      "hslChannel": "343.4 79.7% 34.7%"
+    },
+    {
+      "scale": 900,
+      "hex": "#881337",
+      "rgb": "rgb(136,19,55)",
+      "hsl": "hsl(341.5,75.5%,30.4%)",
+      "oklch": "oklch(0.41,0.15,10)",
+      "rgbChannel": "136 19 55",
+      "hslChannel": "341.5 75.5% 30.4%"
+    },
+    {
+      "scale": 950,
+      "hex": "#4c0519",
+      "rgb": "rgb(76,5,25)",
+      "hsl": "hsl(343.1,87.7%,15.9%)",
+      "oklch": "oklch(0.27,0.10,12)",
+      "rgbChannel": "76 5 25",
+      "hslChannel": "343.1 87.7% 15.9%"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/colors/neutral.json b/apps/web/public/v0/colors/neutral.json
new file mode 100644
index 00000000..71688eaf
--- /dev/null
+++ b/apps/web/public/v0/colors/neutral.json
@@ -0,0 +1,102 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "neutral-950",
+      "card": "white",
+      "card-foreground": "neutral-950",
+      "popover": "white",
+      "popover-foreground": "neutral-950",
+      "primary": "neutral-900",
+      "primary-foreground": "neutral-50",
+      "secondary": "neutral-100",
+      "secondary-foreground": "neutral-900",
+      "muted": "neutral-100",
+      "muted-foreground": "neutral-500",
+      "accent": "neutral-100",
+      "accent-foreground": "neutral-900",
+      "destructive": "red-500",
+      "destructive-foreground": "neutral-50",
+      "border": "neutral-200",
+      "input": "neutral-200",
+      "ring": "neutral-950"
+    },
+    "dark": {
+      "background": "neutral-950",
+      "foreground": "neutral-50",
+      "card": "neutral-950",
+      "card-foreground": "neutral-50",
+      "popover": "neutral-950",
+      "popover-foreground": "neutral-50",
+      "primary": "neutral-50",
+      "primary-foreground": "neutral-900",
+      "secondary": "neutral-800",
+      "secondary-foreground": "neutral-50",
+      "muted": "neutral-800",
+      "muted-foreground": "neutral-400",
+      "accent": "neutral-800",
+      "accent-foreground": "neutral-50",
+      "destructive": "red-900",
+      "destructive-foreground": "neutral-50",
+      "border": "neutral-800",
+      "input": "neutral-800",
+      "ring": "neutral-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "0 0% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "0 0% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "0 0% 3.9%",
+      "primary": "0 0% 9%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "0 0% 96.1%",
+      "secondary-foreground": "0 0% 9%",
+      "muted": "0 0% 96.1%",
+      "muted-foreground": "0 0% 45.1%",
+      "accent": "0 0% 96.1%",
+      "accent-foreground": "0 0% 9%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 89.8%",
+      "input": "0 0% 89.8%",
+      "ring": "0 0% 3.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "0 0% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "0 0% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "0 0% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "0 0% 9%",
+      "secondary": "0 0% 14.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "0 0% 14.9%",
+      "muted-foreground": "0 0% 63.9%",
+      "accent": "0 0% 14.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 14.9%",
+      "input": "0 0% 14.9%",
+      "ring": "0 0% 83.1%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n    --ring: 0 0% 3.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n    --ring: 0 0% 83.1%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
\ No newline at end of file
diff --git a/apps/web/public/r/colors/slate.json b/apps/web/public/v0/colors/slate.json
similarity index 100%
rename from apps/web/public/r/colors/slate.json
rename to apps/web/public/v0/colors/slate.json
diff --git a/apps/web/public/v0/colors/stone.json b/apps/web/public/v0/colors/stone.json
new file mode 100644
index 00000000..4a793b87
--- /dev/null
+++ b/apps/web/public/v0/colors/stone.json
@@ -0,0 +1,102 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "stone-950",
+      "card": "white",
+      "card-foreground": "stone-950",
+      "popover": "white",
+      "popover-foreground": "stone-950",
+      "primary": "stone-900",
+      "primary-foreground": "stone-50",
+      "secondary": "stone-100",
+      "secondary-foreground": "stone-900",
+      "muted": "stone-100",
+      "muted-foreground": "stone-500",
+      "accent": "stone-100",
+      "accent-foreground": "stone-900",
+      "destructive": "red-500",
+      "destructive-foreground": "stone-50",
+      "border": "stone-200",
+      "input": "stone-200",
+      "ring": "stone-950"
+    },
+    "dark": {
+      "background": "stone-950",
+      "foreground": "stone-50",
+      "card": "stone-950",
+      "card-foreground": "stone-50",
+      "popover": "stone-950",
+      "popover-foreground": "stone-50",
+      "primary": "stone-50",
+      "primary-foreground": "stone-900",
+      "secondary": "stone-800",
+      "secondary-foreground": "stone-50",
+      "muted": "stone-800",
+      "muted-foreground": "stone-400",
+      "accent": "stone-800",
+      "accent-foreground": "stone-50",
+      "destructive": "red-900",
+      "destructive-foreground": "stone-50",
+      "border": "stone-800",
+      "input": "stone-800",
+      "ring": "stone-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "20 14.3% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "20 14.3% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "20 14.3% 4.1%",
+      "primary": "24 9.8% 10%",
+      "primary-foreground": "60 9.1% 97.8%",
+      "secondary": "60 4.8% 95.9%",
+      "secondary-foreground": "24 9.8% 10%",
+      "muted": "60 4.8% 95.9%",
+      "muted-foreground": "25 5.3% 44.7%",
+      "accent": "60 4.8% 95.9%",
+      "accent-foreground": "24 9.8% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "20 5.9% 90%",
+      "input": "20 5.9% 90%",
+      "ring": "20 14.3% 4.1%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "20 14.3% 4.1%",
+      "foreground": "60 9.1% 97.8%",
+      "card": "20 14.3% 4.1%",
+      "card-foreground": "60 9.1% 97.8%",
+      "popover": "20 14.3% 4.1%",
+      "popover-foreground": "60 9.1% 97.8%",
+      "primary": "60 9.1% 97.8%",
+      "primary-foreground": "24 9.8% 10%",
+      "secondary": "12 6.5% 15.1%",
+      "secondary-foreground": "60 9.1% 97.8%",
+      "muted": "12 6.5% 15.1%",
+      "muted-foreground": "24 5.4% 63.9%",
+      "accent": "12 6.5% 15.1%",
+      "accent-foreground": "60 9.1% 97.8%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "12 6.5% 15.1%",
+      "input": "12 6.5% 15.1%",
+      "ring": "24 5.7% 82.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n    --ring: 20 14.3% 4.1%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n    --ring: 24 5.7% 82.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/colors/zinc.json b/apps/web/public/v0/colors/zinc.json
new file mode 100644
index 00000000..c2f6a18e
--- /dev/null
+++ b/apps/web/public/v0/colors/zinc.json
@@ -0,0 +1,102 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "zinc-950",
+      "card": "white",
+      "card-foreground": "zinc-950",
+      "popover": "white",
+      "popover-foreground": "zinc-950",
+      "primary": "zinc-900",
+      "primary-foreground": "zinc-50",
+      "secondary": "zinc-100",
+      "secondary-foreground": "zinc-900",
+      "muted": "zinc-100",
+      "muted-foreground": "zinc-500",
+      "accent": "zinc-100",
+      "accent-foreground": "zinc-900",
+      "destructive": "red-500",
+      "destructive-foreground": "zinc-50",
+      "border": "zinc-200",
+      "input": "zinc-200",
+      "ring": "zinc-950"
+    },
+    "dark": {
+      "background": "zinc-950",
+      "foreground": "zinc-50",
+      "card": "zinc-950",
+      "card-foreground": "zinc-50",
+      "popover": "zinc-950",
+      "popover-foreground": "zinc-50",
+      "primary": "zinc-50",
+      "primary-foreground": "zinc-900",
+      "secondary": "zinc-800",
+      "secondary-foreground": "zinc-50",
+      "muted": "zinc-800",
+      "muted-foreground": "zinc-400",
+      "accent": "zinc-800",
+      "accent-foreground": "zinc-50",
+      "destructive": "red-900",
+      "destructive-foreground": "zinc-50",
+      "border": "zinc-800",
+      "input": "zinc-800",
+      "ring": "zinc-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "240 5.9% 10%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 46.1%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "240 10% 3.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "240 5.9% 10%",
+      "secondary": "240 3.7% 15.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "240 4.9% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n    --ring: 240 10% 3.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n    --ring: 240 4.9% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/icons/index.json b/apps/web/public/v0/icons/index.json
new file mode 100644
index 00000000..bf65dca4
--- /dev/null
+++ b/apps/web/public/v0/icons/index.json
@@ -0,0 +1,150 @@
+{
+  "AlertCircle": {
+    "lucide": "AlertCircle",
+    "radix": "ExclamationTriangleIcon"
+  },
+  "ArrowLeft": {
+    "lucide": "ArrowLeft",
+    "radix": "ArrowLeftIcon"
+  },
+  "ArrowRight": {
+    "lucide": "ArrowRight",
+    "radix": "ArrowRightIcon"
+  },
+  "ArrowUpDown": {
+    "lucide": "ArrowUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "BellRing": {
+    "lucide": "BellRing",
+    "radix": "BellIcon"
+  },
+  "Bold": {
+    "lucide": "Bold",
+    "radix": "FontBoldIcon"
+  },
+  "Calculator": {
+    "lucide": "Calculator",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "Calendar": {
+    "lucide": "Calendar",
+    "radix": "CalendarIcon"
+  },
+  "Check": {
+    "lucide": "Check",
+    "radix": "CheckIcon"
+  },
+  "ChevronDown": {
+    "lucide": "ChevronDown",
+    "radix": "ChevronDownIcon"
+  },
+  "ChevronLeft": {
+    "lucide": "ChevronLeft",
+    "radix": "ChevronLeftIcon"
+  },
+  "ChevronRight": {
+    "lucide": "ChevronRight",
+    "radix": "ChevronRightIcon"
+  },
+  "ChevronUp": {
+    "lucide": "ChevronUp",
+    "radix": "ChevronUpIcon"
+  },
+  "ChevronsUpDown": {
+    "lucide": "ChevronsUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "Circle": {
+    "lucide": "Circle",
+    "radix": "DotFilledIcon"
+  },
+  "Copy": {
+    "lucide": "Copy",
+    "radix": "CopyIcon"
+  },
+  "CreditCard": {
+    "lucide": "CreditCard",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "GripVertical": {
+    "lucide": "GripVertical",
+    "radix": "DragHandleDots2Icon"
+  },
+  "Italic": {
+    "lucide": "Italic",
+    "radix": "FontItalicIcon"
+  },
+  "Loader2": {
+    "lucide": "Loader2",
+    "radix": "ReloadIcon"
+  },
+  "Mail": {
+    "lucide": "Mail",
+    "radix": "EnvelopeClosedIcon"
+  },
+  "MailOpen": {
+    "lucide": "MailOpen",
+    "radix": "EnvelopeOpenIcon"
+  },
+  "Minus": {
+    "lucide": "Minus",
+    "radix": "MinusIcon"
+  },
+  "Moon": {
+    "lucide": "Moon",
+    "radix": "MoonIcon"
+  },
+  "MoreHorizontal": {
+    "lucide": "MoreHorizontal",
+    "radix": "DotsHorizontalIcon"
+  },
+  "PanelLeft": {
+    "lucide": "PanelLeft",
+    "radix": "ViewVerticalIcon"
+  },
+  "Plus": {
+    "lucide": "Plus",
+    "radix": "PlusIcon"
+  },
+  "Search": {
+    "lucide": "Search",
+    "radix": "MagnifyingGlassIcon"
+  },
+  "Send": {
+    "lucide": "Send",
+    "radix": "PaperPlaneIcon"
+  },
+  "Settings": {
+    "lucide": "Settings",
+    "radix": "GearIcon"
+  },
+  "Slash": {
+    "lucide": "Slash",
+    "radix": "SlashIcon"
+  },
+  "Smile": {
+    "lucide": "Smile",
+    "radix": "FaceIcon"
+  },
+  "Sun": {
+    "lucide": "Sun",
+    "radix": "SunIcon"
+  },
+  "Terminal": {
+    "lucide": "Terminal",
+    "radix": "RocketIcon"
+  },
+  "Underline": {
+    "lucide": "Underline",
+    "radix": "UnderlineIcon"
+  },
+  "User": {
+    "lucide": "User",
+    "radix": "PersonIcon"
+  },
+  "X": {
+    "lucide": "X",
+    "radix": "Cross2Icon"
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/accordion-demo.json b/apps/web/public/v0/styles/default/accordion-demo.json
new file mode 100644
index 00000000..3110af9c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/accordion-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "accordion-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "accordion"
+  ],
+  "files": [
+    {
+      "path": "examples/accordion-demo.tsx",
+      "content": "import {\n   Accordion,\n   AccordionContent,\n   AccordionItem,\n   AccordionTrigger,\n} from \"@/components/ui/accordion\"\n\nexport default function AccordionDemo() {\n   return (\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n         <AccordionItem value=\"item-1\">\n            <AccordionTrigger>Is it accessible?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It adheres to the WAI-ARIA design pattern.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-2\">\n            <AccordionTrigger>Is it styled?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It comes with default styles that matches the other\n               components&apos; aesthetic.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-3\">\n            <AccordionTrigger>Is it animated?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It&apos;s animated by default, but you can disable it if you\n               prefer.\n            </AccordionContent>\n         </AccordionItem>\n      </Accordion>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/accordion.json b/apps/web/public/v0/styles/default/accordion.json
new file mode 100644
index 00000000..775bb717
--- /dev/null
+++ b/apps/web/public/v0/styles/default/accordion.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "accordion",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-accordion"
+  ],
+  "files": [
+    {
+      "path": "ui/accordion.tsx",
+      "content": "\"use client\"\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n   <AccordionPrimitive.Item\n      ref={ref}\n      className={cn(\"border-b\", className)}\n      {...props}\n   />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n         ref={ref}\n         className={cn(\n            \"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n         <ChevronDown className=\"size-4 shrink-0 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n   </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <AccordionPrimitive.Content\n      ref={ref}\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all\"\n      {...props}\n   >\n      <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n   </AccordionPrimitive.Content>\n))\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "keyframes": {
+            "accordion-down": {
+              "from": {
+                "height": "0"
+              },
+              "to": {
+                "height": "var(--radix-accordion-content-height)"
+              }
+            },
+            "accordion-up": {
+              "from": {
+                "height": "var(--radix-accordion-content-height)"
+              },
+              "to": {
+                "height": "0"
+              }
+            }
+          },
+          "animation": {
+            "accordion-down": "accordion-down 0.2s ease-out",
+            "accordion-up": "accordion-up 0.2s ease-out"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/alert-demo.json b/apps/web/public/v0/styles/default/alert-demo.json
new file mode 100644
index 00000000..1cb8f181
--- /dev/null
+++ b/apps/web/public/v0/styles/default/alert-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "alert-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n   Alert,\n   AlertDescription,\n   AlertTitle,\n} from \"@/components/ui/alert\"\n\nexport default function AlertDemo() {\n   return (\n      <Alert>\n         <Terminal className=\"size-4\" />\n         <AlertTitle>Heads up!</AlertTitle>\n         <AlertDescription>\n            You can add components to your app using the cli.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/alert-destructive.json b/apps/web/public/v0/styles/default/alert-destructive.json
new file mode 100644
index 00000000..28d0e676
--- /dev/null
+++ b/apps/web/public/v0/styles/default/alert-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "alert-destructive",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-destructive.tsx",
+      "content": "import { AlertCircle } from \"lucide-react\"\n\nimport {\n   Alert,\n   AlertDescription,\n   AlertTitle,\n} from \"@/components/ui/alert\"\n\nexport default function AlertDestructive() {\n   return (\n      <Alert variant=\"destructive\">\n         <AlertCircle className=\"size-4\" />\n         <AlertTitle>Error</AlertTitle>\n         <AlertDescription>\n            Your session has expired. Please log in again.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/alert-dialog-demo.json b/apps/web/public/v0/styles/default/alert-dialog-demo.json
new file mode 100644
index 00000000..f4cdf3fc
--- /dev/null
+++ b/apps/web/public/v0/styles/default/alert-dialog-demo.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "alert-dialog-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "alert-dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-dialog-demo.tsx",
+      "content": "import {\n   AlertDialog,\n   AlertDialogAction,\n   AlertDialogCancel,\n   AlertDialogContent,\n   AlertDialogDescription,\n   AlertDialogFooter,\n   AlertDialogHeader,\n   AlertDialogTitle,\n   AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function AlertDialogDemo() {\n   return (\n      <AlertDialog>\n         <AlertDialogTrigger asChild>\n            <Button variant=\"outline\">Show Dialog</Button>\n         </AlertDialogTrigger>\n         <AlertDialogContent>\n            <AlertDialogHeader>\n               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n               <AlertDialogDescription>\n                  This action cannot be undone. This will permanently delete\n                  your account and remove your data from our servers.\n               </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n               <AlertDialogCancel>Cancel</AlertDialogCancel>\n               <AlertDialogAction>Continue</AlertDialogAction>\n            </AlertDialogFooter>\n         </AlertDialogContent>\n      </AlertDialog>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/alert-dialog.json b/apps/web/public/v0/styles/default/alert-dialog.json
new file mode 100644
index 00000000..8443d83b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/alert-dialog.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "alert-dialog",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-alert-dialog"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/alert-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Overlay\n      className={cn(\n         \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80\",\n         className,\n      )}\n      {...props}\n      ref={ref}\n   />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n         ref={ref}\n         className={cn(\n            \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg\",\n            className,\n         )}\n         {...props}\n      />\n   </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nfunction AlertDialogHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\n            \"flex flex-col space-y-2 text-center sm:text-left\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nfunction AlertDialogFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Title\n      ref={ref}\n      className={cn(\"text-lg font-semibold\", className)}\n      {...props}\n   />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Description\n      ref={ref}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nAlertDialogDescription.displayName =\n   AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Action>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &\n      VariantProps<typeof buttonVariants>\n>(({ className, variant, size, ...props }, ref) => (\n   <AlertDialogPrimitive.Action\n      ref={ref}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n   />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &\n      VariantProps<typeof buttonVariants>\n>(({ className, variant = \"outline\", size, ...props }, ref) => (\n   <AlertDialogPrimitive.Cancel\n      ref={ref}\n      className={cn(\n         buttonVariants({ variant, size }),\n         \"mt-2 sm:mt-0\",\n         className,\n      )}\n      {...props}\n   />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n   AlertDialog,\n   AlertDialogPortal,\n   AlertDialogOverlay,\n   AlertDialogTrigger,\n   AlertDialogContent,\n   AlertDialogHeader,\n   AlertDialogFooter,\n   AlertDialogTitle,\n   AlertDialogDescription,\n   AlertDialogAction,\n   AlertDialogCancel,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/alert.json b/apps/web/public/v0/styles/default/alert.json
new file mode 100644
index 00000000..6f0ab6c8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/alert.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "alert",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/alert.tsx",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n   \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-background text-foreground\",\n            destructive:\n               \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nconst Alert = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n   <div\n      ref={ref}\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n   />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n   <h5\n      ref={ref}\n      className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n      {...props}\n   />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n      {...props}\n   />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-beam-bidirectional.json b/apps/web/public/v0/styles/default/animated-beam-bidirectional.json
new file mode 100644
index 00000000..9bf47cbc
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-beam-bidirectional.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-beam-bidirectional",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-beam-bidirectional.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedBeam } from \"@/components/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.user />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.openai />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n            startYOffset={10}\n            endYOffset={10}\n            curvature={-20}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n            startYOffset={-10}\n            endYOffset={-10}\n            curvature={20}\n            reverse\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   openai: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-beam-demo.json b/apps/web/public/v0/styles/default/animated-beam-demo.json
new file mode 100644
index 00000000..2a62d061
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-beam-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-beam-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-beam-demo.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedBeam } from \"@/components/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n            </div>\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div2Ref}>\n                  <Icons.notion />\n               </Circle>\n               <Circle ref={div4Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n               <Circle ref={div6Ref}>\n                  <Icons.zapier />\n               </Circle>\n            </div>\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div7Ref}>\n                  <Icons.messenger />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div4Ref}\n            curvature={-75}\n            endYOffset={-10}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div4Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div4Ref}\n            curvature={75}\n            endYOffset={10}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div4Ref}\n            curvature={-75}\n            endYOffset={-10}\n            reverse\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div4Ref}\n            reverse\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div7Ref}\n            toRef={div4Ref}\n            curvature={75}\n            endYOffset={10}\n            reverse\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g\n                     id=\"Personal\"\n                     transform=\"translate(277.000000, 309.000000)\"\n                  >\n                     <g\n                        id=\"Docs-icon\"\n                        transform=\"translate(174.000000, 91.000000)\"\n                     >\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              ></polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-beam-multiple-inputs.json b/apps/web/public/v0/styles/default/animated-beam-multiple-inputs.json
new file mode 100644
index 00000000..19323773
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-beam-multiple-inputs.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-beam-multiple-inputs",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-beam-multiple-inputs.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedBeam } from \"@/components/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"border-border z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamMultipleInputDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-row items-stretch justify-between gap-10\">\n            <div className=\"flex flex-col justify-center gap-2\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div4Ref}>\n                  <Icons.messenger />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.notion />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div6Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div7Ref}>\n                  <Icons.user />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div4Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div7Ref}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g\n                     id=\"Personal\"\n                     transform=\"translate(277.000000, 309.000000)\"\n                  >\n                     <g\n                        id=\"Docs-icon\"\n                        transform=\"translate(174.000000, 91.000000)\"\n                     >\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              ></polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-beam-multiple-outputs.json b/apps/web/public/v0/styles/default/animated-beam-multiple-outputs.json
new file mode 100644
index 00000000..24d661c0
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-beam-multiple-outputs.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-beam-multiple-outputs",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-beam-multiple-outputs.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedBeam } from \"@/components/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamMultipleOutputDemo({\n   className,\n}: {\n   className?: string\n}) {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className={cn(\n            \"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\",\n            className,\n         )}\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-row items-stretch justify-between gap-10\">\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div7Ref}>\n                  <Icons.user />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div6Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center gap-2\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div4Ref}>\n                  <Icons.messenger />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.notion />\n               </Circle>\n            </div>\n         </div>\n\n         {/* AnimatedBeams */}\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div4Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div7Ref}\n            duration={3}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g\n                     id=\"Personal\"\n                     transform=\"translate(277.000000, 309.000000)\"\n                  >\n                     <g\n                        id=\"Docs-icon\"\n                        transform=\"translate(174.000000, 91.000000)\"\n                     >\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              ></polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-beam-unidirectional.json b/apps/web/public/v0/styles/default/animated-beam-unidirectional.json
new file mode 100644
index 00000000..9ea5b6a6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-beam-unidirectional.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-beam-unidirectional",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-beam-unidirectional.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedBeam } from \"@/components/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.user />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.openai />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            duration={3}\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   openai: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-beam.json b/apps/web/public/v0/styles/default/animated-beam.json
new file mode 100644
index 00000000..54a2710a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-beam.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-beam",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/animated-beam.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport type { RefObject } from \"react\"\nimport { useEffect, useId, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface AnimatedBeamProps {\n   className?: string\n   containerRef: RefObject<HTMLElement> // Container ref\n   fromRef: RefObject<HTMLElement>\n   toRef: RefObject<HTMLElement>\n   curvature?: number\n   reverse?: boolean\n   pathColor?: string\n   pathWidth?: number\n   pathOpacity?: number\n   gradientStartColor?: string\n   gradientStopColor?: string\n   delay?: number\n   duration?: number\n   startXOffset?: number\n   startYOffset?: number\n   endXOffset?: number\n   endYOffset?: number\n}\n\nexport const AnimatedBeam: React.FC<AnimatedBeamProps> = ({\n   className,\n   containerRef,\n   fromRef,\n   toRef,\n   curvature = 0,\n   reverse = false, // Include the reverse prop\n   duration = Math.random() * 3 + 4,\n   delay = 0,\n   pathColor = \"gray\",\n   pathWidth = 2,\n   pathOpacity = 0.2,\n   gradientStartColor = \"#ffaa40\",\n   gradientStopColor = \"#9c40ff\",\n   startXOffset = 0,\n   startYOffset = 0,\n   endXOffset = 0,\n   endYOffset = 0,\n}) => {\n   const id = useId()\n   const [pathD, setPathD] = useState(\"\")\n   const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 })\n\n   // Calculate the gradient coordinates based on the reverse prop\n   const gradientCoordinates = reverse\n      ? {\n           x1: [\"90%\", \"-10%\"],\n           x2: [\"100%\", \"0%\"],\n           y1: [\"0%\", \"0%\"],\n           y2: [\"0%\", \"0%\"],\n        }\n      : {\n           x1: [\"10%\", \"110%\"],\n           x2: [\"0%\", \"100%\"],\n           y1: [\"0%\", \"0%\"],\n           y2: [\"0%\", \"0%\"],\n        }\n\n   useEffect(() => {\n      const updatePath = () => {\n         if (containerRef.current && fromRef.current && toRef.current) {\n            const containerRect = containerRef.current.getBoundingClientRect()\n            const rectA = fromRef.current.getBoundingClientRect()\n            const rectB = toRef.current.getBoundingClientRect()\n\n            const svgWidth = containerRect.width\n            const svgHeight = containerRect.height\n            setSvgDimensions({ width: svgWidth, height: svgHeight })\n\n            const startX =\n               rectA.left - containerRect.left + rectA.width / 2 + startXOffset\n            const startY =\n               rectA.top - containerRect.top + rectA.height / 2 + startYOffset\n            const endX =\n               rectB.left - containerRect.left + rectB.width / 2 + endXOffset\n            const endY =\n               rectB.top - containerRect.top + rectB.height / 2 + endYOffset\n\n            const controlY = startY - curvature\n            const d = `M ${startX},${startY} Q ${\n               (startX + endX) / 2\n            },${controlY} ${endX},${endY}`\n            setPathD(d)\n         }\n      }\n\n      // Initialize ResizeObserver\n      const resizeObserver = new ResizeObserver((entries) => {\n         // For all entries, recalculate the path\n         for (const entry of entries) updatePath()\n      })\n\n      // Observe the container element\n      if (containerRef.current) resizeObserver.observe(containerRef.current)\n\n      // Call the updatePath initially to set the initial path\n      updatePath()\n\n      // Clean up the observer on component unmount\n      return () => {\n         resizeObserver.disconnect()\n      }\n   }, [\n      containerRef,\n      fromRef,\n      toRef,\n      curvature,\n      startXOffset,\n      startYOffset,\n      endXOffset,\n      endYOffset,\n   ])\n\n   return (\n      <svg\n         fill=\"none\"\n         width={svgDimensions.width}\n         height={svgDimensions.height}\n         xmlns=\"http://www.w3.org/2000/svg\"\n         className={cn(\n            \"pointer-events-none absolute left-0 top-0 transform-gpu stroke-2\",\n            className,\n         )}\n         viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}\n      >\n         <path\n            d={pathD}\n            stroke={pathColor}\n            strokeWidth={pathWidth}\n            strokeOpacity={pathOpacity}\n            strokeLinecap=\"round\"\n         />\n         <path\n            d={pathD}\n            strokeWidth={pathWidth}\n            stroke={`url(#${id})`}\n            strokeOpacity=\"1\"\n            strokeLinecap=\"round\"\n         />\n         <defs>\n            <motion.linearGradient\n               className=\"transform-gpu\"\n               id={id}\n               gradientUnits=\"userSpaceOnUse\"\n               initial={{\n                  x1: \"0%\",\n                  x2: \"0%\",\n                  y1: \"0%\",\n                  y2: \"0%\",\n               }}\n               animate={{\n                  x1: gradientCoordinates.x1,\n                  x2: gradientCoordinates.x2,\n                  y1: gradientCoordinates.y1,\n                  y2: gradientCoordinates.y2,\n               }}\n               transition={{\n                  delay,\n                  duration,\n                  ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo\n                  repeat: Number.POSITIVE_INFINITY,\n                  repeatDelay: 0,\n               }}\n            >\n               <stop stopColor={gradientStartColor} stopOpacity=\"0\"></stop>\n               <stop stopColor={gradientStartColor}></stop>\n               <stop offset=\"32.5%\" stopColor={gradientStopColor}></stop>\n               <stop\n                  offset=\"100%\"\n                  stopColor={gradientStopColor}\n                  stopOpacity=\"0\"\n               ></stop>\n            </motion.linearGradient>\n         </defs>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-circular-progress-bar-demo.json b/apps/web/public/v0/styles/default/animated-circular-progress-bar-demo.json
new file mode 100644
index 00000000..e8a502ee
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-circular-progress-bar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-circular-progress-bar-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-circular-progress-bar-demo.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport AnimatedCircularProgressBar from \"@/components/ui/animated-circular-progress-bar\"\n\nexport default function AnimatedCircularProgressBarDemo() {\n   const [value, setValue] = useState(0)\n\n   useEffect(() => {\n      const handleIncrement = (prev: number) => {\n         if (prev === 100) {\n            return 0\n         }\n         return prev + 10\n      }\n      setValue(handleIncrement)\n      const interval = setInterval(() => setValue(handleIncrement), 2000)\n      return () => clearInterval(interval)\n   }, [])\n\n   return (\n      <AnimatedCircularProgressBar\n         max={100}\n         min={0}\n         value={value}\n         gaugePrimaryColor=\"rgb(79 70 229)\"\n         gaugeSecondaryColor=\"rgba(0, 0, 0, 0.1)\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-circular-progress-bar.json b/apps/web/public/v0/styles/default/animated-circular-progress-bar.json
new file mode 100644
index 00000000..44c83d2b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-circular-progress-bar.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-circular-progress-bar",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/animated-circular-progress-bar.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\ninterface Props {\n   max: number\n   value: number\n   min: number\n   gaugePrimaryColor: string\n   gaugeSecondaryColor: string\n   className?: string\n}\n\nexport default function AnimatedCircularProgressBar({\n   max = 100,\n   min = 0,\n   value = 0,\n   gaugePrimaryColor,\n   gaugeSecondaryColor,\n   className,\n}: Props) {\n   const circumference = 2 * Math.PI * 45\n   const percentPx = circumference / 100\n   const currentPercent = Math.round(((value - min) / (max - min)) * 100)\n\n   return (\n      <div\n         className={cn(\"relative size-40 text-2xl font-semibold\", className)}\n         style={\n            {\n               \"--circle-size\": \"100px\",\n               \"--circumference\": circumference,\n               \"--percent-to-px\": `${percentPx}px`,\n               \"--gap-percent\": \"5\",\n               \"--offset-factor\": \"0\",\n               \"--transition-length\": \"1s\",\n               \"--transition-step\": \"200ms\",\n               \"--delay\": \"0s\",\n               \"--percent-to-deg\": \"3.6deg\",\n               transform: \"translateZ(0)\",\n            } as React.CSSProperties\n         }\n      >\n         <svg\n            fill=\"none\"\n            className=\"size-full\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 100 100\"\n         >\n            {currentPercent <= 90 && currentPercent >= 0 && (\n               <circle\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"45\"\n                  strokeWidth=\"10\"\n                  strokeDashoffset=\"0\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\" opacity-100\"\n                  style={\n                     {\n                        stroke: gaugeSecondaryColor,\n                        \"--stroke-percent\": 90 - currentPercent,\n                        \"--offset-factor-secondary\":\n                           \"calc(1 - var(--offset-factor))\",\n                        strokeDasharray:\n                           \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n                        transform:\n                           \"rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)\",\n                        transition:\n                           \"all var(--transition-length) ease var(--delay)\",\n                        transformOrigin:\n                           \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n                     } as React.CSSProperties\n                  }\n               />\n            )}\n            <circle\n               cx=\"50\"\n               cy=\"50\"\n               r=\"45\"\n               strokeWidth=\"10\"\n               strokeDashoffset=\"0\"\n               strokeLinecap=\"round\"\n               strokeLinejoin=\"round\"\n               className=\"opacity-100\"\n               style={\n                  {\n                     stroke: gaugePrimaryColor,\n                     \"--stroke-percent\": currentPercent,\n                     strokeDasharray:\n                        \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n                     transition:\n                        \"var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)\",\n                     transitionProperty: \"stroke-dasharray,transform\",\n                     transform:\n                        \"rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))\",\n                     transformOrigin:\n                        \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n                  } as React.CSSProperties\n               }\n            />\n         </svg>\n         <span\n            data-current-value={currentPercent}\n            className=\"animate-in fade-in absolute inset-0 m-auto size-fit delay-[var(--delay)] duration-[var(--transition-length)] ease-linear\"\n         >\n            {currentPercent}\n         </span>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-feature-card-1.json b/apps/web/public/v0/styles/default/animated-feature-card-1.json
new file mode 100644
index 00000000..77248ac9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-feature-card-1.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-1",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-1.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\n\nexport default function FeatureCard1() {\n   const variant1 = {\n      initial: {\n         scale: 0.87,\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n      whileHover: {\n         scale: 0.8,\n         boxShadow:\n            \"rgba(245,40,145,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: -27,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n      whileHover: {\n         y: -55,\n         scale: 0.87,\n         boxShadow:\n            \"rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         y: -25,\n         opacity: 0,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n      whileHover: {\n         y: -45,\n         opacity: 1,\n         scale: 1,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"easeInOut\",\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 p-10\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"z-[1] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"z-[2] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jane\"\n                           alt=\"jane\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant3}\n                     className=\"absolute bottom-0 z-[3] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jill\"\n                           alt=\"jill\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Notifications</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Instantly get notified about events\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-feature-card-10.json b/apps/web/public/v0/styles/default/animated-feature-card-10.json
new file mode 100644
index 00000000..4850064f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-feature-card-10.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-10",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-10.tsx",
+      "content": "\"use client\"\n\nimport {\n   AnimatePresence,\n   cubicBezier,\n   motion,\n   useAnimation,\n   useInView,\n} from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\n\nconst cardImage = [\n   {\n      id: 1,\n      title: \"Tom\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/tom\",\n   },\n   {\n      id: 2,\n      title: \"Chris\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/chris\",\n   },\n   {\n      id: 3,\n      title: \"PJ\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/pj\",\n   },\n   {\n      id: 4,\n      title: \"Scott\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/scott\",\n   },\n   {\n      id: 5,\n      title: \"Yehuda\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/yehuda\",\n   },\n   {\n      id: 6,\n      title: \"Ezra\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/ezra\",\n   },\n   {\n      id: 7,\n      title: \"Ivey\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/ivey\",\n   },\n   {\n      id: 8,\n      title: \"Evan\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/evan\",\n   },\n   {\n      id: 9,\n      title: \"Van\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/van\",\n   },\n]\n\nexport default function FeatureCard10() {\n   const containerRef = useRef(null)\n   const inView = useInView(containerRef, { amount: 0.25 })\n   const controls = useAnimation()\n\n   useEffect(() => {\n      if (inView) controls.start(\"visible\")\n      else controls.start(\"hidden\")\n   }, [inView, controls])\n\n   return (\n      <div className=\"flex h-full transform-gpu flex-col items-center justify-between gap-5 rounded-lg border border-neutral-200 bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] xl:flex-row dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <div className=\"flex w-full flex-col items-start justify-between gap-y-10 p-10 xl:h-full xl:w-1/2\">\n            <h2 className=\"text-3xl font-semibold\">\n               Nyxb UI let's you build amazing websites with all your friends.\n            </h2>\n            <a\n               href=\"#\"\n               className=\"text-base font-normal text-gray-500 underline-offset-4 transition-all hover:underline\"\n            >\n               Check out our showcase\n            </a>\n         </div>\n         <div className=\"relative w-full overflow-hidden xl:w-1/2\">\n            <div className=\"pointer-events-none absolute inset-x-0 top-0 z-10 h-1/3 bg-gradient-to-b from-white dark:from-black\"></div>\n            <div\n               ref={containerRef}\n               className=\"relative -right-[50px] -top-[100px] grid max-h-[450px] grid-cols-3 gap-5 [transform:rotate(-15deg)translateZ(10px);]\"\n            >\n               <AnimatePresence>\n                  {cardImage.map((card, index) => (\n                     <motion.div\n                        variants={{\n                           hidden: { opacity: 0, scale: 0.96, y: 25 },\n                           visible: { opacity: 1, scale: 1, y: 0 },\n                        }}\n                        initial=\"hidden\"\n                        animate={controls}\n                        exit={{\n                           opacity: 0,\n                           scale: 0,\n                           transition: {\n                              duration: 0.1,\n                              ease: cubicBezier(0.22, 1, 0.36, 1),\n                           },\n                        }}\n                        transition={{\n                           duration: 0.2,\n                           ease: cubicBezier(0.22, 1, 0.36, 1),\n                           delay: index * 0.04,\n                        }}\n                        key={card.id}\n                        className=\"flex flex-col items-center gap-y-2 rounded-md border bg-white/5 p-5\"\n                     >\n                        <img\n                           src={card.image}\n                           alt={card.title}\n                           className=\"size-20 rounded-full object-cover\"\n                        />\n                        <p className=\"text-sm dark:text-neutral-200/50\">\n                           {card.title}\n                        </p>\n                        <a\n                           href={card.link}\n                           className=\"rounded-md border border-neutral-700/50 bg-neutral-600 p-2 py-0.5 text-white shadow-xl drop-shadow-lg hover:bg-neutral-500 dark:border-neutral-400/20 dark:bg-gray-500\"\n                        >\n                           Website\n                        </a>\n                     </motion.div>\n                  ))}\n               </AnimatePresence>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-feature-card-2.json b/apps/web/public/v0/styles/default/animated-feature-card-2.json
new file mode 100644
index 00000000..3da4b66f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-feature-card-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-2.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\nimport { Clock, Download, MessageCircle, Star } from \"lucide-react\"\n\nconst texts = [\n   {\n      id: 1,\n      header: \"New Feature Release.\",\n      subheader: \"Experience our app's latest features now.\",\n      icon: <Star />,\n   },\n   {\n      id: 2,\n      header: \"App Update Available.\",\n      subheader:\n         \"A new update is available for download. Get the latest version!\",\n      icon: <Download />,\n   },\n   {\n      id: 3,\n      header: \"Scheduled Maintenance.\",\n      subheader:\n         \"Our app will be temporarily unavailable due to scheduled maintenance.\",\n      icon: <Clock />,\n   },\n   {\n      id: 4,\n      header: \"Feedback Appreciated.\",\n      subheader:\n         \"We'd love to hear your thoughts on our app. Share your feedback!\",\n      icon: <MessageCircle />,\n   },\n]\n\nexport default function FeatureCard2() {\n   const itemVariants = {\n      initial: (index: number) => ({\n         y: 0,\n         scale: index === 3 ? 0.85 : 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      }),\n      whileHover: (index: number) => ({\n         y: -110,\n         opacity: 1,\n         scale: index === 0 ? 0.85 : index === 3 ? 1 : 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      }),\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl\">\n               <motion.div className=\"flex h-[310px] w-full cursor-pointer flex-col gap-y-5 overflow-hidden rounded-t-md p-5\">\n                  {texts.map((text, index) => (\n                     <motion.div\n                        key={text.id}\n                        className=\"w-full origin-right rounded-md  border border-slate-300/50 p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                        custom={index}\n                        variants={itemVariants}\n                     >\n                        <div className=\"flex flex-row gap-2\">\n                           {text.icon}\n                           <p className=\"text-black dark:text-white\">\n                              {text.header}\n                           </p>\n                        </div>\n                        <p className=\"text-gray-400 dark:text-gray-400\">\n                           {text.subheader}\n                        </p>\n                     </motion.div>\n                  ))}\n               </motion.div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Notifications</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Instantly get notified about events\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-feature-card-3.json b/apps/web/public/v0/styles/default/animated-feature-card-3.json
new file mode 100644
index 00000000..db0b1b51
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-feature-card-3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-3",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-3.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard3() {\n   const variant1 = {\n      initial: {\n         y: 4,\n         scale: 0.5,\n         opacity: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -2,\n         opacity: 1,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: -2,\n         opacity: 1,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 8,\n         opacity: 1,\n         scale: 1.05,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <motion.div className=\"flex size-full cursor-pointer flex-col items-center justify-center gap-y-2 overflow-hidden rounded-t-xl p-8\">\n               <motion.p\n                  variants={variant1}\n                  className=\"w-fit rounded-full border px-2 text-[15px]\"\n               >\n                  Make it Pop ✨\n               </motion.p>\n               <motion.div\n                  variants={variant2}\n                  className=\"flex max-w-[300px] items-start gap-x-2 rounded-lg border border-neutral-300 border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n               >\n                  <div className=\"flex size-6 shrink-0 rounded-full bg-blue-500\">\n                     <img\n                        className=\"size-full rounded-full object-cover\"\n                        src=\"https://avatar.vercel.sh/jane\"\n                        alt=\"jane\"\n                     />\n                  </div>\n                  <div>\n                     <h3 className=\"text-base font-semibold\">Josh</h3>\n                     <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n                     </p>\n                  </div>\n               </motion.div>\n            </motion.div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">AI Co-Pilot</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Use AI to make your writing stand out\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-feature-card-4.json b/apps/web/public/v0/styles/default/animated-feature-card-4.json
new file mode 100644
index 00000000..a51a2ff9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-feature-card-4.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-4",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-4.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard4() {\n   const variant1 = {\n      initial: {\n         x: 35,\n         y: 5,\n         scale: 0.8,\n         rotate: -3,\n         zIndex: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 0,\n         y: 0,\n         scale: 1,\n         rotate: 0,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         scale: 1.1,\n         zIndex: 2,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         scale: 1,\n         boxShadow:\n            \"rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         x: -35,\n         y: 5,\n         scale: 0.8,\n         rotate: 3,\n         zIndex: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 0,\n         y: 0,\n         scale: 1,\n         rotate: 0,\n         boxShadow:\n            \"rgba(245,40,145,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl bg-transparent p-10\">\n               <motion.div className=\"flex h-[230px] w-full items-center justify-between gap-x-4\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"z-[3] flex h-fit w-full  flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/christina\"\n                           alt=\"christina\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant3}\n                     className=\"z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/joshua\"\n                           alt=\"joshua\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n               </motion.div>\n            </div>\n\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Social</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Write once, share with your friends\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-feature-card-5.json b/apps/web/public/v0/styles/default/animated-feature-card-5.json
new file mode 100644
index 00000000..f7a32881
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-feature-card-5.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-5",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-5.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard5() {\n   const variant1 = {\n      initial: {\n         viewBox: \"0 -950 366 1408\",\n         filter: \"saturate(0.3)\",\n         opacity: 0.5,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         viewBox: \"0 -60 366 310\",\n         filter: \"saturate(1)\",\n         opacity: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"relative flex size-full cursor-pointer items-center justify-center overflow-hidden rounded-t-xl bg-transparent p-10\">\n               <div className=\"relative h-[150px] w-full cursor-pointer overflow-hidden rounded-xl border border-slate-200/50 bg-white dark:border-neutral-700/50 dark:bg-neutral-900\">\n                  <motion.p\n                     variants={variant2}\n                     className=\"absolute left-5 top-5 w-fit text-[15px]\"\n                  >\n                     +245%\n                  </motion.p>\n                  <motion.svg\n                     variants={variant1}\n                     xmlns=\"http://www.w3.org/2000/svg\"\n                     fill=\"none\"\n                     preserveAspectRatio=\"none\"\n                     className=\"absolute inset-0 size-full\"\n                     viewBox=\"0 -950 366 1408\"\n                  >\n                     <path\n                        fill=\"url(#a)\"\n                        d=\"M0 193c109.5 0 260.5-52.5 366-192.5v907H0V193Z\"\n                     />\n                     <defs>\n                        <linearGradient\n                           id=\"a\"\n                           x1={183}\n                           x2={183}\n                           y1={0.5}\n                           y2={262}\n                           gradientUnits=\"userSpaceOnUse\"\n                        >\n                           <stop stopColor=\"#22c55e\" />\n                           <stop offset={1} stopColor=\"#15803d\" />\n                        </linearGradient>\n                     </defs>\n                  </motion.svg>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Growth</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Invest and watch your money grow\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-feature-card-6.json b/apps/web/public/v0/styles/default/animated-feature-card-6.json
new file mode 100644
index 00000000..e96792cd
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-feature-card-6.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-6",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-6.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard6() {\n   const variant1 = {\n      initial: {\n         y: 0,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 25,\n         x: 10,\n         scale: 1,\n         rotate: -2,\n         boxShadow:\n            \"rgba(39,127,245,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 0,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -25,\n         x: -10,\n         scale: 1,\n         rotate: 3,\n         boxShadow:\n            \"rgba(39,245,76,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex h-[300px] w-full items-center justify-center rounded-t-xl bg-transparent \">\n               <div className=\"relative flex cursor-pointer flex-col items-center justify-center gap-y-2 p-14\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"dark:bg-neutral-980 z-[3] flex size-full items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"absolute bottom-14 z-[2] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Share</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Share results with your friends\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-feature-card-7.json b/apps/web/public/v0/styles/default/animated-feature-card-7.json
new file mode 100644
index 00000000..17c2ab00
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-feature-card-7.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-7",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-7.tsx",
+      "content": "\"use client\"\n\nimport { motion, useAnimation, useInView } from \"framer-motion\"\nimport {\n   BarChart,\n   File,\n   Globe,\n   HeartHandshake,\n   Rss,\n   Shield,\n} from \"lucide-react\"\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport Marquee from \"@/components/ui/marquee\"\n\nconst tiles = [\n   {\n      icon: <HeartHandshake className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Globe className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <File className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-green-500 via-teal-500 to-emerald-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Shield className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Rss className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <BarChart className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-gray-600 via-gray-500 to-gray-400 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n]\n\nfunction shuffleArray(array: any[]) {\n   let currentIndex = array.length\n   let randomIndex\n   // While there remain elements to shuffle.\n   while (currentIndex !== 0) {\n      // Pick a remaining element.\n      randomIndex = Math.floor(Math.random() * currentIndex)\n      currentIndex--\n      // And swap it with the current element.\n      ;[array[currentIndex], array[randomIndex]] = [\n         array[randomIndex],\n         array[currentIndex],\n      ]\n   }\n   return array\n}\n\nfunction Card(card: { icon: JSX.Element; bg: JSX.Element }) {\n   const id = useId()\n   const controls = useAnimation()\n   const ref = useRef(null)\n   const inView = useInView(ref, { once: true })\n\n   useEffect(() => {\n      if (inView) {\n         controls.start({\n            opacity: 1,\n            transition: {\n               delay: Math.random() * 2,\n               ease: \"easeOut\",\n               duration: 1,\n            },\n         })\n      }\n   }, [controls, inView])\n\n   return (\n      <motion.div\n         key={id}\n         ref={ref}\n         initial={{ opacity: 0 }}\n         animate={controls}\n         className={cn(\n            \"relative size-20 cursor-pointer overflow-hidden rounded-2xl border p-4\",\n            // light styles\n            \"bg-white\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         {card.icon}\n         {card.bg}\n      </motion.div>\n   )\n}\n\nexport default function FeatureCard7() {\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n   const [randomTiles1] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles2] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles3] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles4] = useState(() => shuffleArray([...tiles]))\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"group relative flex h-[300px] w-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl p-4\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 px-10\">\n                  <Marquee\n                     reverse\n                     className=\"-delay-[200ms] [--duration:20s]\"\n                     repeat={4}\n                  >\n                     {randomTiles1.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee reverse className=\"[--duration:30s]\" repeat={4}>\n                     {randomTiles2.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee\n                     reverse\n                     className=\"-delay-[200ms] [--duration:20s]\"\n                     repeat={4}\n                  >\n                     {randomTiles3.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee reverse className=\"[--duration:30s]\" repeat={4}>\n                     {randomTiles4.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n                  <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Integrations</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Integrate with all your favourite apps\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-feature-card-8.json b/apps/web/public/v0/styles/default/animated-feature-card-8.json
new file mode 100644
index 00000000..130d3269
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-feature-card-8.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-8",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-8.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard8() {\n   const variant1 = {\n      initial: {\n         y: 0,\n         scale: 0.97,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -45,\n         scale: 1,\n         boxShadow:\n            \"rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 30,\n         opacity: 0,\n         scale: 0.97,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 10,\n         opacity: 1,\n         scale: 1,\n         boxShadow:\n            \"rgba(245,40,145,0.05) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         x: 30,\n         y: 20,\n         opacity: 0,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 5,\n         y: 5,\n         opacity: 1,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex size-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl bg-transparent\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 px-10 py-20\">\n                  <motion.div\n                     variants={variant1}\n                     className=\" relative flex items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-6 rounded-full bg-blue-500\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/joshua\"\n                           alt=\"joshua\"\n                        />\n                     </div>\n                     <div className=\"w-[calc(100%-3rem)]\">\n                        <h3 className=\"text-base font-semibold\">Mary</h3>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                           I think the design can be improved\n                        </p>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\" absolute inset-10 -bottom-14 z-[3] m-auto flex h-fit items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"w-8 \">\n                        <div className=\"size-6 rounded-full bg-blue-500\">\n                           <img\n                              className=\"size-full rounded-full object-cover\"\n                              src=\"https://avatar.vercel.sh/christina\"\n                              alt=\"christina\"\n                           />\n                        </div>\n                     </div>\n                     <div className=\"w-[calc(100%-3rem)]\">\n                        <h3 className=\"text-base font-semibold\">Joshua</h3>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                           On it ✅\n                        </p>\n                     </div>\n                     <motion.p\n                        variants={variant3}\n                        className=\"highlighted absolute -bottom-2 right-2 w-fit rounded-full border bg-cyan-500 px-2 py-0.5 text-xs text-white\"\n                     >\n                        sent\n                     </motion.p>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Reply</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Reply to other creators in app\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-feature-card-9.json b/apps/web/public/v0/styles/default/animated-feature-card-9.json
new file mode 100644
index 00000000..1f389fc5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-feature-card-9.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-9",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-9.tsx",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport type { ReactElement } from \"react\"\nimport React, { useEffect, useMemo, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const AnimatedList = React.memo(\n   ({\n      className,\n      children,\n      delay = 1000,\n   }: {\n      className?: string\n      children: React.ReactNode\n      delay?: number\n   }) => {\n      const [index, setIndex] = useState(0)\n      const childrenArray = React.Children.toArray(children)\n\n      useEffect(() => {\n         const interval = setInterval(() => {\n            setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n         }, delay)\n\n         return () => clearInterval(interval)\n      }, [childrenArray.length, delay])\n\n      const itemsToShow = useMemo(\n         () => childrenArray.slice(0, index + 1).reverse(),\n         [index, childrenArray],\n      )\n\n      return (\n         <div className={`flex flex-col items-center gap-4 ${className}`}>\n            <AnimatePresence>\n               {itemsToShow.map((item) => (\n                  <AnimatedListItem key={(item as ReactElement).key}>\n                     {item}\n                  </AnimatedListItem>\n               ))}\n            </AnimatePresence>\n         </div>\n      )\n   },\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n   const animations = {\n      initial: { scale: 0, opacity: 0 },\n      animate: { scale: 1, opacity: 1, originY: 0 },\n      exit: { scale: 0, opacity: 0 },\n      transition: { type: \"spring\", stiffness: 350, damping: 40 },\n   }\n\n   return (\n      <motion.div {...animations} layout className=\"mx-auto w-full\">\n         {children}\n      </motion.div>\n   )\n}\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: \"Payment received\",\n      description: \"Nyxb UI\",\n      time: \"15m ago\",\n\n      icon: \"💸\",\n      color: \"#00C9A7\",\n   },\n   {\n      name: \"User signed up\",\n      description: \"Nyxb UI\",\n      time: \"10m ago\",\n      icon: \"👤\",\n      color: \"#FFB800\",\n   },\n   {\n      name: \"New message\",\n      description: \"Nyxb UI\",\n      time: \"5m ago\",\n      icon: \"💬\",\n      color: \"#FF3D71\",\n   },\n   {\n      name: \"New event\",\n      description: \"Nyxb UI\",\n      time: \"2m ago\",\n      icon: \"🗞️\",\n      color: \"#1E86FF\",\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={cn(\n            \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-lg p-4\",\n            // animation styles\n            \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nexport default function FeatureCard9() {\n   return (\n      <div className=\"relative flex size-full max-h-[500px] min-h-[500px] max-w-lg transform-gpu flex-col justify-between overflow-hidden rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <div className=\"flex items-center justify-center overflow-hidden\">\n            <AnimatedList>\n               {notifications.map((item, idx) => (\n                  <Notification {...item} key={idx} />\n               ))}\n            </AnimatedList>\n         </div>\n         <div className=\"flex flex-col items-start gap-y-1 border-t p-4 dark:border-neutral-800\">\n            <h2 className=\"text-xl font-semibold\">Notifications</h2>\n            <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n               Get realtime notifications for events you subscribe too\n            </p>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-gradient-text-demo.json b/apps/web/public/v0/styles/default/animated-gradient-text-demo.json
new file mode 100644
index 00000000..9303a85f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-gradient-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-gradient-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-gradient-text-demo.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport AnimatedGradientText from \"@/components/ui/animated-gradient-text\"\n\nexport default async function AnimatedGradientTextDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <AnimatedGradientText>\n            🎉 <hr className=\"mx-2 h-4 w-px shrink-0 bg-gray-300\" />{\" \"}\n            <span\n               className={cn(\n                  `animate-gradient inline bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,\n               )}\n            >\n               Introducing Nyxb UI\n            </span>\n            <ChevronRight className=\"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n         </AnimatedGradientText>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-gradient-text.json b/apps/web/public/v0/styles/default/animated-gradient-text.json
new file mode 100644
index 00000000..f92274a0
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-gradient-text.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-gradient-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/animated-gradient-text.tsx",
+      "content": "import type { ReactNode } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport default function AnimatedGradientText({\n   children,\n   className,\n}: {\n   children: ReactNode\n   className?: string\n}) {\n   return (\n      <div\n         className={cn(\n            \"group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40\",\n            className,\n         )}\n      >\n         <div className=\"animate-gradient absolute inset-0 block size-full bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-px ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]\" />\n\n         {children}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "gradient": "gradient 8s linear infinite"
+          },
+          "keyframes": {
+            "gradient": {
+              "to": {
+                "backgroundPosition": "var(--bg-size) 0"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-grid-pattern-demo.json b/apps/web/public/v0/styles/default/animated-grid-pattern-demo.json
new file mode 100644
index 00000000..411f6d69
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-grid-pattern-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-grid-pattern-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-grid-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { GridPattern } from \"@/components/ui/grid-pattern\"\n\nexport default function GridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            squares={[\n               [4, 4],\n               [5, 1],\n               [8, 2],\n               [5, 3],\n               [5, 5],\n               [10, 10],\n               [12, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n            ]}\n            className={cn(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n               \"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-grid-pattern.json b/apps/web/public/v0/styles/default/animated-grid-pattern.json
new file mode 100644
index 00000000..0b26cd37
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-grid-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-grid-pattern",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/animated-grid-pattern.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"motion/react\"\nimport {\n   type ComponentPropsWithoutRef,\n   useEffect,\n   useId,\n   useRef,\n   useState,\n} from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface AnimatedGridPatternProps\n   extends ComponentPropsWithoutRef<\"svg\"> {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   strokeDasharray?: any\n   numSquares?: number\n   maxOpacity?: number\n   duration?: number\n   repeatDelay?: number\n}\n\nexport function AnimatedGridPattern({\n   width = 40,\n   height = 40,\n   x = -1,\n   y = -1,\n   strokeDasharray = 0,\n   numSquares = 50,\n   className,\n   maxOpacity = 0.5,\n   duration = 4,\n   repeatDelay = 0.5,\n   ...props\n}: AnimatedGridPatternProps) {\n   const id = useId()\n   const containerRef = useRef(null)\n   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n   const [squares, setSquares] = useState(() => generateSquares(numSquares))\n\n   function getPos() {\n      return [\n         Math.floor((Math.random() * dimensions.width) / width),\n         Math.floor((Math.random() * dimensions.height) / height),\n      ]\n   }\n\n   // Adjust the generateSquares function to return objects with an id, x, and y\n   function generateSquares(count: number) {\n      return Array.from({ length: count }, (_, i) => ({\n         id: i,\n         pos: getPos(),\n      }))\n   }\n\n   // Function to update a single square's position\n   const updateSquarePosition = (id: number) => {\n      setSquares((currentSquares) =>\n         currentSquares.map((sq) =>\n            sq.id === id\n               ? {\n                    ...sq,\n                    pos: getPos(),\n                 }\n               : sq,\n         ),\n      )\n   }\n\n   // Update squares to animate in\n   useEffect(() => {\n      if (dimensions.width && dimensions.height) {\n         setSquares(generateSquares(numSquares))\n      }\n   }, [dimensions, numSquares])\n\n   // Resize observer to update container dimensions\n   useEffect(() => {\n      const resizeObserver = new ResizeObserver((entries) => {\n         for (const entry of entries) {\n            setDimensions({\n               width: entry.contentRect.width,\n               height: entry.contentRect.height,\n            })\n         }\n      })\n\n      if (containerRef.current) {\n         resizeObserver.observe(containerRef.current)\n      }\n\n      return () => {\n         if (containerRef.current) {\n            resizeObserver.unobserve(containerRef.current)\n         }\n      }\n   }, [containerRef])\n\n   return (\n      <svg\n         ref={containerRef}\n         aria-hidden=\"true\"\n         className={cn(\n            \"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30\",\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <path\n                  d={`M.5 ${height}V.5H${width}`}\n                  fill=\"none\"\n                  strokeDasharray={strokeDasharray}\n               />\n            </pattern>\n         </defs>\n         <rect width=\"100%\" height=\"100%\" fill={`url(#${id})`} />\n         <svg x={x} y={y} className=\"overflow-visible\">\n            {squares.map(({ pos: [x, y], id }, index) => (\n               <motion.rect\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: maxOpacity }}\n                  transition={{\n                     duration,\n                     repeat: 1,\n                     delay: index * 0.1,\n                     repeatType: \"reverse\",\n                  }}\n                  onAnimationComplete={() => updateSquarePosition(id)}\n                  key={`${x}-${y}-${index}`}\n                  width={width - 1}\n                  height={height - 1}\n                  x={x * width + 1}\n                  y={y * height + 1}\n                  fill=\"currentColor\"\n                  strokeWidth=\"0\"\n               />\n            ))}\n         </svg>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-list-demo.json b/apps/web/public/v0/styles/default/animated-list-demo.json
new file mode 100644
index 00000000..ad020890
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-list-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-list-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-list-demo.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedList } from \"@/components/ui/animated-list\"\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: \"Payment received\",\n      description: \"Nyxb UI\",\n      time: \"15m ago\",\n\n      icon: \"💸\",\n      color: \"#00C9A7\",\n   },\n   {\n      name: \"User signed up\",\n      description: \"Nyxb UI\",\n      time: \"10m ago\",\n      icon: \"👤\",\n      color: \"#FFB800\",\n   },\n   {\n      name: \"New message\",\n      description: \"Nyxb UI\",\n      time: \"5m ago\",\n      icon: \"💬\",\n      color: \"#FF3D71\",\n   },\n   {\n      name: \"New event\",\n      description: \"Nyxb UI\",\n      time: \"2m ago\",\n      icon: \"🗞️\",\n      color: \"#1E86FF\",\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={cn(\n            \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4\",\n            // animation styles\n            \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nexport default function AnimatedListDemo() {\n   return (\n      <div className=\"bg-background relative flex max-h-[400px] min-h-[400px] w-full max-w-lg flex-col overflow-hidden rounded-lg border p-6 shadow-lg\">\n         <AnimatedList>\n            {notifications.map((item, idx) => (\n               <Notification {...item} key={idx} />\n            ))}\n         </AnimatedList>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-list.json b/apps/web/public/v0/styles/default/animated-list.json
new file mode 100644
index 00000000..020ba218
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-list.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-list",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/animated-list.tsx",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport type { ReactElement } from \"react\"\nimport React, { useEffect, useMemo, useState } from \"react\"\n\nexport const AnimatedList = React.memo(\n   ({\n      className,\n      children,\n      delay = 1000,\n   }: {\n      className?: string\n      children: React.ReactNode\n      delay?: number\n   }) => {\n      const [index, setIndex] = useState(0)\n      const childrenArray = React.Children.toArray(children)\n\n      useEffect(() => {\n         const interval = setInterval(() => {\n            setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n         }, delay)\n\n         return () => clearInterval(interval)\n      }, [childrenArray.length, delay])\n\n      const itemsToShow = useMemo(\n         () => childrenArray.slice(0, index + 1).reverse(),\n         [index, childrenArray],\n      )\n\n      return (\n         <div className={`flex flex-col items-center gap-4 ${className}`}>\n            <AnimatePresence>\n               {itemsToShow.map((item) => (\n                  <AnimatedListItem key={(item as ReactElement).key}>\n                     {item}\n                  </AnimatedListItem>\n               ))}\n            </AnimatePresence>\n         </div>\n      )\n   },\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n   const animations = {\n      initial: { scale: 0, opacity: 0 },\n      animate: { scale: 1, opacity: 1, originY: 0 },\n      exit: { scale: 0, opacity: 0 },\n      transition: { type: \"spring\", stiffness: 350, damping: 40 },\n   }\n\n   return (\n      <motion.div {...animations} layout className=\"mx-auto w-full\">\n         {children}\n      </motion.div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-shiny-text-demo.json b/apps/web/public/v0/styles/default/animated-shiny-text-demo.json
new file mode 100644
index 00000000..3da08e43
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-shiny-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-shiny-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-shiny-text-demo.tsx",
+      "content": "import { ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport { cn } from \"@/lib/utils\"\nimport AnimatedShinyText from \"@/components/ui/animated-shiny-text\"\n\nexport default async function AnimatedShinyTextDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <div\n            className={cn(\n               \"group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800\",\n            )}\n         >\n            <AnimatedShinyText className=\"inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400\">\n               <span>✨ Introducing Nyxb UI</span>\n               <ArrowRightIcon className=\"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n            </AnimatedShinyText>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-shiny-text.json b/apps/web/public/v0/styles/default/animated-shiny-text.json
new file mode 100644
index 00000000..902c7b33
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-shiny-text.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-shiny-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/animated-shiny-text.tsx",
+      "content": "import type { CSSProperties, FC, ReactNode } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface AnimatedShinyTextProps {\n   children: ReactNode\n   className?: string\n   shimmerWidth?: number\n}\n\nconst AnimatedShinyText: FC<AnimatedShinyTextProps> = ({\n   children,\n   className,\n   shimmerWidth = 100,\n}) => {\n   return (\n      <p\n         style={\n            {\n               \"--shimmer-width\": `${shimmerWidth}px`,\n            } as CSSProperties\n         }\n         className={cn(\n            \"mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50 \",\n\n            // Shimmer effect\n            \"animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]\",\n\n            // Shimmer gradient\n            \"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80\",\n\n            className,\n         )}\n      >\n         {children}\n      </p>\n   )\n}\n\nexport default AnimatedShinyText\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "shiny-text": "shiny-text 8s infinite"
+          },
+          "keyframes": {
+            "shiny-text": {
+              "0%, 90%, 100%": {
+                "background-position": "calc(-100% - var(--shiny-width)) 0"
+              },
+              "30%, 60%": {
+                "background-position": "calc(100% + var(--shiny-width)) 0"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-subscribe-button-demo.json b/apps/web/public/v0/styles/default/animated-subscribe-button-demo.json
new file mode 100644
index 00000000..801a55db
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-subscribe-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-subscribe-button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-subscribe-button-demo.tsx",
+      "content": "import { CheckIcon, ChevronRightIcon } from \"lucide-react\"\nimport { AnimatedSubscribeButton } from \"@/components/ui/animated-subscribe-button\"\n\nexport default function AnimatedSubscribeButtonDemo() {\n   return (\n      <AnimatedSubscribeButton\n         buttonColor=\"#000000\"\n         buttonTextColor=\"#ffffff\"\n         subscribeStatus={false}\n         initialText={\n            <span className=\"group inline-flex items-center\">\n               Subscribe{\" \"}\n               <ChevronRightIcon className=\"ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1\" />\n            </span>\n         }\n         changeText={\n            <span className=\"group inline-flex items-center\">\n               <CheckIcon className=\"mr-2 size-4\" />\n               Subscribed{\" \"}\n            </span>\n         }\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/animated-subscribe-button.json b/apps/web/public/v0/styles/default/animated-subscribe-button.json
new file mode 100644
index 00000000..08483c98
--- /dev/null
+++ b/apps/web/public/v0/styles/default/animated-subscribe-button.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-subscribe-button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/animated-subscribe-button.tsx",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport type React from \"react\"\nimport { useState } from \"react\"\n\ninterface AnimatedSubscribeButtonProps {\n   buttonColor: string\n   buttonTextColor?: string\n   subscribeStatus: boolean\n   initialText: React.ReactElement | string\n   changeText: React.ReactElement | string\n}\n\nexport const AnimatedSubscribeButton: React.FC<\n   AnimatedSubscribeButtonProps\n> = ({\n   buttonColor,\n   subscribeStatus,\n   buttonTextColor,\n   changeText,\n   initialText,\n}) => {\n   const [isSubscribed, setIsSubscribed] = useState<boolean>(subscribeStatus)\n\n   return (\n      <AnimatePresence mode=\"wait\">\n         {isSubscribed ? (\n            <motion.button\n               className=\"relative flex h-[46px] w-[200px] items-center justify-center overflow-hidden rounded-md bg-white p-[10px] outline outline-1 outline-black\"\n               onClick={() => setIsSubscribed(false)}\n               initial={{ opacity: 0 }}\n               animate={{ opacity: 1 }}\n               exit={{ opacity: 0 }}\n            >\n               <motion.span\n                  key=\"action\"\n                  className=\"relative block size-full font-semibold\"\n                  initial={{ y: -50 }}\n                  animate={{ y: 0 }}\n                  style={{ color: buttonColor }}\n               >\n                  {changeText}\n               </motion.span>\n            </motion.button>\n         ) : (\n            <motion.button\n               className=\"relative flex w-[200px] cursor-pointer items-center justify-center rounded-md border-none p-[10px]\"\n               style={{ backgroundColor: buttonColor, color: buttonTextColor }}\n               onClick={() => setIsSubscribed(true)}\n               initial={{ opacity: 0 }}\n               animate={{ opacity: 1 }}\n               exit={{ opacity: 0 }}\n            >\n               <motion.span\n                  key=\"reaction\"\n                  className=\"relative block font-semibold\"\n                  initial={{ x: 0 }}\n                  exit={{ x: 50, transition: { duration: 0.1 } }}\n               >\n                  {initialText}\n               </motion.span>\n            </motion.button>\n         )}\n      </AnimatePresence>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/aspect-ratio-demo.json b/apps/web/public/v0/styles/default/aspect-ratio-demo.json
new file mode 100644
index 00000000..4b86047b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/aspect-ratio-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "aspect-ratio-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "examples/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n   return (\n      <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n         <Image\n            src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n            alt=\"Photo by Drew Beamer\"\n            fill\n            className=\"rounded-md object-cover\"\n         />\n      </AspectRatio>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/aspect-ratio.json b/apps/web/public/v0/styles/default/aspect-ratio.json
new file mode 100644
index 00000000..6dc321c9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/aspect-ratio.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "ui/aspect-ratio.tsx",
+      "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/aurora-text-demo.json b/apps/web/public/v0/styles/default/aurora-text-demo.json
new file mode 100644
index 00000000..bf2a1497
--- /dev/null
+++ b/apps/web/public/v0/styles/default/aurora-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "aurora-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/aurora-text-demo.tsx",
+      "content": "import { AuroraText } from \"@/components/ui/aurora-text\"\n\nexport default function AuroraTextDemo() {\n   return (\n      <h1 className=\"text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl\">\n         Ship <AuroraText>beautiful</AuroraText>\n      </h1>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/aurora-text.json b/apps/web/public/v0/styles/default/aurora-text.json
new file mode 100644
index 00000000..425c81c5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/aurora-text.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "aurora-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/aurora-text.tsx",
+      "content": "import { type MotionProps, motion } from \"motion/react\"\nimport type React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface AuroraTextProps\n   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps> {\n   className?: string\n   children: React.ReactNode\n   as?: React.ElementType\n}\n\nexport function AuroraText({\n   className,\n   children,\n   as: Component = \"span\",\n   ...props\n}: AuroraTextProps) {\n   const MotionComponent = motion.create(Component)\n\n   return (\n      <MotionComponent\n         className={cn(\"relative inline-flex overflow-hidden\", className)}\n         {...props}\n      >\n         {children}\n         <span className=\"pointer-events-none absolute inset-0 mix-blend-lighten dark:mix-blend-darken\">\n            <span className=\"pointer-events-none absolute -top-1/2 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-1_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-1))] mix-blend-overlay blur-[1rem]\"></span>\n            <span className=\"pointer-events-none absolute right-0 top-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-2_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-2))] mix-blend-overlay blur-[1rem]\"></span>\n            <span className=\"pointer-events-none absolute bottom-0 left-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-3_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-3))] mix-blend-overlay blur-[1rem]\"></span>\n            <span className=\"pointer-events-none absolute -bottom-1/2 right-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-4_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-4))] mix-blend-overlay blur-[1rem]\"></span>\n         </span>\n      </MotionComponent>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "keyframes": {
+            "aurora-border": {
+              "0%, 100%": {
+                "borderRadius": "37% 29% 27% 27% / 28% 25% 41% 37%"
+              },
+              "25%": {
+                "borderRadius": "47% 29% 39% 49% / 61% 19% 66% 26%"
+              },
+              "50%": {
+                "borderRadius": "57% 23% 47% 72% / 63% 17% 66% 33%"
+              },
+              "75%": {
+                "borderRadius": "28% 49% 29% 100% / 93% 20% 64% 25%"
+              }
+            },
+            "aurora-1": {
+              "0%, 100%": {
+                "top": "0",
+                "right": "0"
+              },
+              "50%": {
+                "top": "50%",
+                "right": "25%"
+              },
+              "75%": {
+                "top": "25%",
+                "right": "50%"
+              }
+            },
+            "aurora-2": {
+              "0%, 100%": {
+                "top": "0",
+                "left": "0"
+              },
+              "60%": {
+                "top": "75%",
+                "left": "25%"
+              },
+              "85%": {
+                "top": "50%",
+                "left": "50%"
+              }
+            },
+            "aurora-3": {
+              "0%, 100%": {
+                "bottom": "0",
+                "left": "0"
+              },
+              "40%": {
+                "bottom": "50%",
+                "left": "25%"
+              },
+              "65%": {
+                "bottom": "25%",
+                "left": "50%"
+              }
+            },
+            "aurora-4": {
+              "0%, 100%": {
+                "bottom": "0",
+                "right": "0"
+              },
+              "50%": {
+                "bottom": "25%",
+                "right": "40%"
+              },
+              "90%": {
+                "bottom": "50%",
+                "right": "25%"
+              }
+            }
+          },
+          "animation": {
+            "aurora-border": "aurora-border 10s ease-in-out infinite",
+            "aurora-1": "aurora-1 15s ease-in-out infinite",
+            "aurora-2": "aurora-2 15s ease-in-out infinite",
+            "aurora-3": "aurora-3 15s ease-in-out infinite",
+            "aurora-4": "aurora-4 15s ease-in-out infinite"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/avatar-circles-demo.json b/apps/web/public/v0/styles/default/avatar-circles-demo.json
new file mode 100644
index 00000000..f9577877
--- /dev/null
+++ b/apps/web/public/v0/styles/default/avatar-circles-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "avatar-circles-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/avatar-circles-demo.tsx",
+      "content": "import AvatarCircles from \"@/components/ui/avatar-circles\"\n\nconst avatarUrls = [\n   \"https://avatars.githubusercontent.com/u/98586665\",\n   \"https://avatars.githubusercontent.com/u/20110627\",\n   \"https://avatars.githubusercontent.com/u/106103625\",\n   \"https://avatars.githubusercontent.com/u/59228569\",\n]\n\nexport default async function AvatarCirclesDemo() {\n   return <AvatarCircles numPeople={99} avatarUrls={avatarUrls} />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/avatar-circles.json b/apps/web/public/v0/styles/default/avatar-circles.json
new file mode 100644
index 00000000..6a3c18c1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/avatar-circles.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "avatar-circles",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/avatar-circles.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface AvatarCirclesProps {\n   className?: string\n   numPeople?: number\n   avatarUrls: string[]\n}\n\nfunction AvatarCircles({\n   numPeople,\n   className,\n   avatarUrls,\n}: AvatarCirclesProps) {\n   return (\n      <div\n         className={cn(\"z-10 flex -space-x-4 rtl:space-x-reverse\", className)}\n      >\n         {avatarUrls.map((url, index) => (\n            <img\n               key={index}\n               className=\"size-10 rounded-full border-2 border-white dark:border-gray-800\"\n               src={url}\n               width={40}\n               height={40}\n               alt={`Avatar ${index + 1}`}\n            />\n         ))}\n         <a\n            className=\"flex size-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black\"\n            href=\"\"\n         >\n            +{numPeople}\n         </a>\n      </div>\n   )\n}\n\nexport default AvatarCircles\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/avatar-demo.json b/apps/web/public/v0/styles/default/avatar-demo.json
new file mode 100644
index 00000000..f2ca3e9f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/avatar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "avatar-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "examples/avatar-demo.tsx",
+      "content": "import {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from \"@/components/ui/avatar\"\n\nexport default function AvatarDemo() {\n   return (\n      <Avatar>\n         <AvatarImage src=\"https://github.com/nyxb.png\" alt=\"@nyxb\" />\n         <AvatarFallback>NY</AvatarFallback>\n      </Avatar>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/avatar.json b/apps/web/public/v0/styles/default/avatar.json
new file mode 100644
index 00000000..d0bcb629
--- /dev/null
+++ b/apps/web/public/v0/styles/default/avatar.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "avatar",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-avatar"
+  ],
+  "files": [
+    {
+      "path": "ui/avatar.tsx",
+      "content": "\"use client\"\n\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Avatar = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Root\n      ref={ref}\n      className={cn(\n         \"relative flex size-10 shrink-0 overflow-hidden rounded-full\",\n         className,\n      )}\n      {...props}\n   />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Image>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"aspect-square size-full\", className)}\n      {...props}\n   />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Fallback>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Fallback\n      ref={ref}\n      className={cn(\n         \"bg-muted flex size-full items-center justify-center rounded-full\",\n         className,\n      )}\n      {...props}\n   />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/badge-demo.json b/apps/web/public/v0/styles/default/badge-demo.json
new file mode 100644
index 00000000..2a02192d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/badge-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "badge-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-demo.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport default function BadgeDemo() {\n   return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/badge-destructive.json b/apps/web/public/v0/styles/default/badge-destructive.json
new file mode 100644
index 00000000..d0a32dd5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/badge-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "badge-destructive",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport default function BadgeDestructive() {\n   return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/badge-outline.json b/apps/web/public/v0/styles/default/badge-outline.json
new file mode 100644
index 00000000..2094e503
--- /dev/null
+++ b/apps/web/public/v0/styles/default/badge-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "badge-outline",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-outline.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport default function BadgeOutline() {\n   return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/badge-secondary.json b/apps/web/public/v0/styles/default/badge-secondary.json
new file mode 100644
index 00000000..6f94b824
--- /dev/null
+++ b/apps/web/public/v0/styles/default/badge-secondary.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "badge-secondary",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport default function BadgeSecondary() {\n   return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/badge.json b/apps/web/public/v0/styles/default/badge.json
new file mode 100644
index 00000000..b1e6891d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/badge.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "badge",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/badge.tsx",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\"\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n   \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n   {\n      variants: {\n         variant: {\n            default:\n               \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n            secondary:\n               \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n            destructive:\n               \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n            outline: \"text-foreground\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nexport interface BadgeProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n   return (\n      <div className={cn(badgeVariants({ variant }), className)} {...props} />\n   )\n}\n\nexport { Badge, badgeVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/bento-demo-vertical.json b/apps/web/public/v0/styles/default/bento-demo-vertical.json
new file mode 100644
index 00000000..f188e635
--- /dev/null
+++ b/apps/web/public/v0/styles/default/bento-demo-vertical.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "bento-demo-vertical",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/bento-demo-vertical.tsx",
+      "content": "import {\n   BellIcon,\n   CalendarIcon,\n   FileTextIcon,\n   GlobeIcon,\n   InputIcon,\n} from \"@radix-ui/react-icons\"\nimport { BentoCard, BentoGrid } from \"@/components/ui/bento-grid\"\n\nconst features = [\n   {\n      Icon: FileTextIcon,\n      name: \"Save your files\",\n      description: \"We automatically save your files as you type.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3\",\n   },\n   {\n      Icon: InputIcon,\n      name: \"Full text search\",\n      description: \"Search through all your files in one place.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3\",\n   },\n   {\n      Icon: GlobeIcon,\n      name: \"Multilingual\",\n      description: \"Supports 100+ languages and counting.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4\",\n   },\n   {\n      Icon: CalendarIcon,\n      name: \"Calendar\",\n      description: \"Use the calendar to filter your files by date.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2\",\n   },\n   {\n      Icon: BellIcon,\n      name: \"Notifications\",\n      description:\n         \"Get notified when someone shares a file or mentions you in a comment.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4\",\n   },\n]\n\nexport default async function BentoDemo() {\n   return (\n      <BentoGrid className=\"lg:grid-rows-3\">\n         {features.map((feature) => (\n            <BentoCard key={feature.name} {...feature} />\n         ))}\n      </BentoGrid>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/bento-demo.json b/apps/web/public/v0/styles/default/bento-demo.json
new file mode 100644
index 00000000..6888821a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/bento-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "bento-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/bento-demo.tsx",
+      "content": "import { CalendarIcon, FileTextIcon, InputIcon } from \"@radix-ui/react-icons\"\nimport { Share2Icon } from \"lucide-react\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport { cn } from \"@/lib/utils\"\nimport AnimatedBeamMultipleOutputDemo from \"~/registry/default/examples/animated-beam-multiple-outputs\"\nimport { BentoCard, BentoGrid } from \"@/components/ui/bento-grid\"\nimport Marquee from \"@/components/ui/marquee\"\n\nconst files = [\n   {\n      name: \"bitcoin.pdf\",\n      body: \"Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.\",\n   },\n   {\n      name: \"finances.xlsx\",\n      body: \"A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.\",\n   },\n   {\n      name: \"logo.svg\",\n      body: \"Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.\",\n   },\n   {\n      name: \"keys.gpg\",\n      body: \"GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.\",\n   },\n   {\n      name: \"seed.txt\",\n      body: \"A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.\",\n   },\n]\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: \"Payment received\",\n      description: \"Nyxb UI\",\n      time: \"15m ago\",\n\n      icon: \"💸\",\n      color: \"#00C9A7\",\n   },\n   {\n      name: \"User signed up\",\n      description: \"Nyxb UI\",\n      time: \"10m ago\",\n      icon: \"👤\",\n      color: \"#FFB800\",\n   },\n   {\n      name: \"New message\",\n      description: \"Nyxb UI\",\n      time: \"5m ago\",\n      icon: \"💬\",\n      color: \"#FF3D71\",\n   },\n   {\n      name: \"New event\",\n      description: \"Nyxb UI\",\n      time: \"2m ago\",\n      icon: \"🗞️\",\n      color: \"#1E86FF\",\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={cn(\n            \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4\",\n            // animation styles\n            \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nconst features = [\n   {\n      Icon: FileTextIcon,\n      name: \"Save your files\",\n      description: \"We automatically save your files as you type.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      className: \"col-span-3 lg:col-span-1\",\n      background: (\n         <Marquee\n            pauseOnHover\n            className=\"absolute top-10 [--duration:20s] [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] \"\n         >\n            {files.map((f, idx) => (\n               <figure\n                  key={idx}\n                  className={cn(\n                     \"relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4\",\n                     \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n                     \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n                     \"transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none\",\n                  )}\n               >\n                  <div className=\"flex flex-row items-center gap-2\">\n                     <div className=\"flex flex-col\">\n                        <figcaption className=\"text-sm font-medium dark:text-white \">\n                           {f.name}\n                        </figcaption>\n                     </div>\n                  </div>\n                  <blockquote className=\"mt-2 text-xs\">{f.body}</blockquote>\n               </figure>\n            ))}\n         </Marquee>\n      ),\n   },\n   {\n      Icon: InputIcon,\n      name: \"Full text search\",\n      description: \"Search through all your files in one place.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      className: \"col-span-3 lg:col-span-2\",\n      background: (\n         <Command className=\"absolute right-10 top-10 w-[70%] origin-top translate-x-0 border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:-translate-x-10\">\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n               <CommandEmpty>No results found.</CommandEmpty>\n               <CommandGroup heading=\"Suggestions\">\n                  <CommandItem>screenshot.png</CommandItem>\n                  <CommandItem>bitcoin.pdf</CommandItem>\n                  <CommandItem>finances.xlsx</CommandItem>\n                  <CommandItem>logo.svg</CommandItem>\n                  <CommandItem>keys.gpg</CommandItem>\n                  <CommandItem>seed.txt</CommandItem>\n               </CommandGroup>\n            </CommandList>\n         </Command>\n      ),\n   },\n   {\n      Icon: Share2Icon,\n      name: \"Integrations\",\n      description: \"Supports 100+ integrations and counting.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      className: \"col-span-3 lg:col-span-2\",\n      background: (\n         <AnimatedBeamMultipleOutputDemo className=\"absolute right-2 top-4 h-[300px] w-[600px] border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105\" />\n      ),\n   },\n   {\n      Icon: CalendarIcon,\n      name: \"Calendar\",\n      description: \"Use the calendar to filter your files by date.\",\n      className: \"col-span-3 lg:col-span-1\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: (\n         <Calendar\n            mode=\"single\"\n            selected={new Date(2022, 4, 11, 0, 0, 0)}\n            className=\"absolute right-0 top-10 origin-top rounded-md border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:scale-105\"\n         />\n      ),\n   },\n]\n\nexport default function BentoDemo() {\n   return (\n      <BentoGrid>\n         {features.map((feature, idx) => (\n            <BentoCard key={idx} {...feature} />\n         ))}\n      </BentoGrid>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/bento-grid.json b/apps/web/public/v0/styles/default/bento-grid.json
new file mode 100644
index 00000000..db0068ad
--- /dev/null
+++ b/apps/web/public/v0/styles/default/bento-grid.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "bento-grid",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-icons"
+  ],
+  "files": [
+    {
+      "path": "ui/bento-grid.tsx",
+      "content": "import { ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport type { ReactNode } from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nfunction BentoGrid({\n   children,\n   className,\n}: {\n   children: ReactNode\n   className?: string\n}) {\n   return (\n      <div\n         className={cn(\n            \"grid w-full auto-rows-[22rem] grid-cols-3 gap-4\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n}\n\nfunction BentoCard({\n   name,\n   className,\n   background,\n   Icon,\n   description,\n   href,\n   cta,\n}: {\n   name: string\n   className: string\n   background: ReactNode\n   Icon: any\n   description: string\n   href: string\n   cta: string\n}) {\n   return (\n      <div\n         key={name}\n         className={cn(\n            \"group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n            className,\n         )}\n      >\n         <div>{background}</div>\n         <div className=\"pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10\">\n            <Icon className=\"size-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75\" />\n            <h3 className=\"text-xl font-semibold text-neutral-700 dark:text-neutral-300\">\n               {name}\n            </h3>\n            <p className=\"max-w-lg text-neutral-400\">{description}</p>\n         </div>\n\n         <div\n            className={cn(\n               \"pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100\",\n            )}\n         >\n            <Button\n               variant=\"ghost\"\n               asChild\n               size=\"sm\"\n               className=\"pointer-events-auto\"\n            >\n               <a href={href}>\n                  {cta}\n                  <ArrowRightIcon className=\"ml-2 size-4\" />\n               </a>\n            </Button>\n         </div>\n         <div className=\"pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10\" />\n      </div>\n   )\n}\n\nexport { BentoCard, BentoGrid }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/blur-fade-demo.json b/apps/web/public/v0/styles/default/blur-fade-demo.json
new file mode 100644
index 00000000..21add133
--- /dev/null
+++ b/apps/web/public/v0/styles/default/blur-fade-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "blur-fade-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/blur-fade-demo.tsx",
+      "content": "import BlurFade from \"@/components/ui/blur-fade\"\n\nconst images = Array.from({ length: 9 }, (_, i) => {\n   const isLandscape = i % 2 === 0\n   const width = isLandscape ? 800 : 600\n   const height = isLandscape ? 600 : 800\n   return `https://picsum.photos/seed/${i + 1}/${width}/${height}`\n})\n\nexport default function BlurFadeDemo() {\n   return (\n      <section id=\"photos\">\n         <div className=\"columns-2 gap-4 sm:columns-3\">\n            {images.map((imageUrl, idx) => (\n               <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>\n                  <img\n                     className=\"mb-4 size-full rounded-lg object-contain\"\n                     src={imageUrl}\n                     alt={`Random stock image ${idx + 1}`}\n                  />\n               </BlurFade>\n            ))}\n         </div>\n      </section>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/blur-fade-text-demo.json b/apps/web/public/v0/styles/default/blur-fade-text-demo.json
new file mode 100644
index 00000000..deb31529
--- /dev/null
+++ b/apps/web/public/v0/styles/default/blur-fade-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "blur-fade-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/blur-fade-text-demo.tsx",
+      "content": "import BlurFade from \"@/components/ui/blur-fade\"\n\nexport default function BlurFadeTextDemo() {\n   return (\n      <section id=\"header\">\n         <BlurFade delay={0.25} inView>\n            <h2 className=\"text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none\">\n               Hello World 👋\n            </h2>\n         </BlurFade>\n         <BlurFade delay={0.25 * 2} inView>\n            <span className=\"text-pretty text-xl tracking-tighter sm:text-3xl xl:text-4xl/none\">\n               Nice to meet you\n            </span>\n         </BlurFade>\n      </section>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/blur-fade.json b/apps/web/public/v0/styles/default/blur-fade.json
new file mode 100644
index 00000000..0f158a51
--- /dev/null
+++ b/apps/web/public/v0/styles/default/blur-fade.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "blur-fade",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/blur-fade.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion, useInView } from \"framer-motion\"\nimport { useRef } from \"react\"\n\ninterface BlurFadeProps {\n   children: React.ReactNode\n   className?: string\n   variant?: {\n      hidden: { y: number }\n      visible: { y: number }\n   }\n   duration?: number\n   delay?: number\n   yOffset?: number\n   inView?: boolean\n   inViewMargin?: `${number}px`\n   blur?: string\n}\n\nexport default function BlurFade({\n   children,\n   className,\n   variant,\n   duration = 0.4,\n   delay = 0,\n   yOffset = 6,\n   inView = false,\n   inViewMargin = \"-50px\",\n   blur = \"6px\",\n}: BlurFadeProps) {\n   const ref = useRef(null)\n   const inViewResult = useInView(ref, { once: true, margin: inViewMargin })\n   const isInView = !inView || inViewResult\n   const defaultVariants: Variants = {\n      hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },\n      visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },\n   }\n   const combinedVariants = variant || defaultVariants\n   return (\n      <AnimatePresence>\n         <motion.div\n            ref={ref}\n            initial=\"hidden\"\n            animate={isInView ? \"visible\" : \"hidden\"}\n            exit=\"hidden\"\n            variants={combinedVariants}\n            transition={{\n               delay: 0.04 + delay,\n               duration,\n               ease: \"easeOut\",\n            }}\n            className={className}\n         >\n            {children}\n         </motion.div>\n      </AnimatePresence>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/blur-in-demo.json b/apps/web/public/v0/styles/default/blur-in-demo.json
new file mode 100644
index 00000000..c57bd480
--- /dev/null
+++ b/apps/web/public/v0/styles/default/blur-in-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "blur-in-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/blur-in-demo.tsx",
+      "content": "import BlurIn from \"@/components/ui/blur-in\"\n\nfunction BlurInDemo() {\n   return (\n      <BlurIn\n         word=\"Blur In\"\n         className=\"text-4xl font-bold text-black dark:text-white\"\n      />\n   )\n}\nexport default BlurInDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/blur-in.json b/apps/web/public/v0/styles/default/blur-in.json
new file mode 100644
index 00000000..72209ed5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/blur-in.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "blur-in",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/blur-in.tsx",
+      "content": "\"use client\"\nimport { motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface BlurIntProps {\n   word: string\n   className?: string\n   variant?: {\n      hidden: { filter: string; opacity: number }\n      visible: { filter: string; opacity: number }\n   }\n   duration?: number\n}\nfunction BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {\n   const defaultVariants = {\n      hidden: { filter: \"blur(10px)\", opacity: 0 },\n      visible: { filter: \"blur(0px)\", opacity: 1 },\n   }\n   const combinedVariants = variant || defaultVariants\n\n   return (\n      <motion.h1\n         initial=\"hidden\"\n         animate=\"visible\"\n         transition={{ duration }}\n         variants={combinedVariants}\n         className={cn(\n            className,\n            \"font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]\",\n         )}\n      >\n         {word}\n      </motion.h1>\n   )\n}\n\nexport default BlurIn\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/border-beam-demo.json b/apps/web/public/v0/styles/default/border-beam-demo.json
new file mode 100644
index 00000000..b604162c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/border-beam-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "border-beam-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/border-beam-demo.tsx",
+      "content": "import { BorderBeam } from \"@/components/ui/border-beam\"\n\nexport default function BorderBeamDemo() {\n   return (\n      <div className=\"relative rounded-xl\">\n         <img\n            src=\"/dashboard-dark.png\"\n            alt=\"Hero Image\"\n            className=\"hidden w-[700px] rounded-[inherit] border object-contain shadow-lg dark:block\"\n         />\n         <img\n            src=\"/dashboard-light.png\"\n            alt=\"Hero Image\"\n            className=\"block w-[700px] rounded-[inherit] border object-contain shadow-lg dark:hidden\"\n         />\n\n         <BorderBeam size={250} duration={12} delay={9} />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/border-beam.json b/apps/web/public/v0/styles/default/border-beam.json
new file mode 100644
index 00000000..8a2000bd
--- /dev/null
+++ b/apps/web/public/v0/styles/default/border-beam.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "border-beam",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/border-beam.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\ninterface BorderBeamProps {\n   className?: string\n   size?: number\n   duration?: number\n   borderWidth?: number\n   anchor?: number\n   colorFrom?: string\n   colorTo?: string\n   delay?: number\n}\n\nexport function BorderBeam({\n   className,\n   size = 200,\n   duration = 15,\n   anchor = 90,\n   borderWidth = 1.5,\n   colorFrom = \"#ffaa40\",\n   colorTo = \"#9c40ff\",\n   delay = 0,\n}: BorderBeamProps) {\n   return (\n      <div\n         style={\n            {\n               \"--size\": size,\n               \"--duration\": duration,\n               \"--anchor\": anchor,\n               \"--border-width\": borderWidth,\n               \"--color-from\": colorFrom,\n               \"--color-to\": colorTo,\n               \"--delay\": `-${delay}s`,\n            } as React.CSSProperties\n         }\n         className={cn(\n            \"pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]\",\n\n            // mask styles\n            \"![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]\",\n\n            // pseudo styles\n            \"after:animate-border-beam after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]\",\n            className,\n         )}\n      />\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "border-beam": "border-beam calc(var(--duration)*1s) infinite linear"
+          },
+          "keyframes": {
+            "border-beam": {
+              "100%": {
+                "offset-distance": "100%"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/box-reveal-demo.json b/apps/web/public/v0/styles/default/box-reveal-demo.json
new file mode 100644
index 00000000..2511fef1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/box-reveal-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "box-reveal-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/box-reveal-demo.tsx",
+      "content": "import BoxReveal from \"@/components/ui/box-reveal\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default async function BoxRevealDemo() {\n   return (\n      <div className=\"size-full max-w-lg items-center justify-center overflow-hidden pt-8\">\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <p className=\"text-[3.5rem] font-semibold\">\n               Nyxb UI\n               <span className=\"text-[#5046e6]\">.</span>\n            </p>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <h2 className=\"mt-[.5rem] text-[1rem]\">\n               UI library for{\" \"}\n               <span className=\"text-[#5046e6]\">Design Engineers</span>\n            </h2>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <div className=\"mt-6\">\n               <p>\n                  -&gt; 20+ free and open-source animated components built with\n                  <span className=\"font-semibold text-[#5046e6]\"> React</span>,\n                  <span className=\"font-semibold text-[#5046e6]\">\n                     {\" \"}\n                     Typescript\n                  </span>\n                  ,\n                  <span className=\"font-semibold text-[#5046e6]\">\n                     {\" \"}\n                     Tailwind CSS\n                  </span>\n                  , and\n                  <span className=\"font-semibold text-[#5046e6]\">\n                     {\" \"}\n                     Framer Motion\n                  </span>\n                  . <br />\n                  -&gt; 100% open-source, and customizable. <br />\n               </p>\n            </div>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <Button className=\"mt-[1.6rem] bg-[#5046e6]\">Explore</Button>\n         </BoxReveal>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/box-reveal.json b/apps/web/public/v0/styles/default/box-reveal.json
new file mode 100644
index 00000000..bc7a1e50
--- /dev/null
+++ b/apps/web/public/v0/styles/default/box-reveal.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "box-reveal",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/box-reveal.tsx",
+      "content": "\"use client\"\n\nimport { motion, useAnimation, useInView } from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\n\ninterface BoxRevealProps {\n   children: JSX.Element\n   width?: \"fit-content\" | \"100%\"\n   boxColor?: string\n   duration?: number\n}\n\nexport function BoxReveal({\n   children,\n   width = \"fit-content\",\n   boxColor,\n   duration,\n}: BoxRevealProps) {\n   const mainControls = useAnimation()\n   const slideControls = useAnimation()\n\n   const ref = useRef(null)\n   const isInView = useInView(ref, { once: true })\n\n   useEffect(() => {\n      if (isInView) {\n         slideControls.start(\"visible\")\n         mainControls.start(\"visible\")\n      } else {\n         slideControls.start(\"hidden\")\n         mainControls.start(\"hidden\")\n      }\n   }, [isInView, mainControls, slideControls])\n\n   return (\n      <div\n         ref={ref}\n         style={{ position: \"relative\", width, overflow: \"hidden\" }}\n      >\n         <motion.div\n            variants={{\n               hidden: { opacity: 0, y: 75 },\n               visible: { opacity: 1, y: 0 },\n            }}\n            initial=\"hidden\"\n            animate={mainControls}\n            transition={{ duration: duration || 0.5, delay: 0.25 }}\n         >\n            {children}\n         </motion.div>\n\n         <motion.div\n            variants={{\n               hidden: { left: 0 },\n               visible: { left: \"100%\" },\n            }}\n            initial=\"hidden\"\n            animate={slideControls}\n            transition={{ duration: duration || 0.5, ease: \"easeIn\" }}\n            style={{\n               position: \"absolute\",\n               top: 4,\n               bottom: 4,\n               left: 0,\n               right: 0,\n               zIndex: 20,\n               background: boxColor || \"#5046e6\",\n            }}\n         />\n      </div>\n   )\n}\n\nexport default BoxReveal\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/breadcrumb-demo.json b/apps/web/public/v0/styles/default/breadcrumb-demo.json
new file mode 100644
index 00000000..b78ccf61
--- /dev/null
+++ b/apps/web/public/v0/styles/default/breadcrumb-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-demo.tsx",
+      "content": "import {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function BreadcrumbDemo() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     <BreadcrumbEllipsis className=\"size-4\" />\n                     <span className=\"sr-only\">Toggle menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/docs/components\">\n                  Components\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/breadcrumb-dropdown.json b/apps/web/public/v0/styles/default/breadcrumb-dropdown.json
new file mode 100644
index 00000000..1adba69e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/breadcrumb-dropdown.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb-dropdown",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-dropdown.tsx",
+      "content": "import { ChevronDown, Slash } from \"lucide-react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <Slash />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     Components\n                     <ChevronDown className=\"size-4\" />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <Slash />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/breadcrumb-ellipsis.json b/apps/web/public/v0/styles/default/breadcrumb-ellipsis.json
new file mode 100644
index 00000000..25f9e6a2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/breadcrumb-ellipsis.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb-ellipsis",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-ellipsis.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\n\nexport default function BreadcrumbCollapsed() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink asChild>\n                  <Link href=\"/\">Home</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbEllipsis />\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink asChild>\n                  <Link href=\"/docs/components\">Components</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/breadcrumb-link.json b/apps/web/public/v0/styles/default/breadcrumb-link.json
new file mode 100644
index 00000000..15411e72
--- /dev/null
+++ b/apps/web/public/v0/styles/default/breadcrumb-link.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb-link",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-link.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink>\n                  <Link href=\"/\">Home</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink>\n                  <Link href=\"/components\">Components</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/breadcrumb-responsive.json b/apps/web/public/v0/styles/default/breadcrumb-responsive.json
new file mode 100644
index 00000000..88630d2d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/breadcrumb-responsive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb-responsive",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-responsive.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"@/components/ui/drawer\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nconst items = [\n   { href: \"#\", label: \"Home\" },\n   { href: \"#\", label: \"Documentation\" },\n   { href: \"#\", label: \"Building Your Application\" },\n   { href: \"#\", label: \"Data Fetching\" },\n   { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href={items[0].href}>\n                  {items[0].label}\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            {items.length > ITEMS_TO_DISPLAY ? (\n               <>\n                  <BreadcrumbItem>\n                     {isDesktop ? (\n                        <DropdownMenu open={open} onOpenChange={setOpen}>\n                           <DropdownMenuTrigger\n                              className=\"flex items-center gap-1\"\n                              aria-label=\"Toggle menu\"\n                           >\n                              <BreadcrumbEllipsis className=\"size-4\" />\n                           </DropdownMenuTrigger>\n                           <DropdownMenuContent align=\"start\">\n                              {items.slice(1, -2).map((item, index) => (\n                                 <DropdownMenuItem key={index}>\n                                    <Link href={item.href ? item.href : \"#\"}>\n                                       {item.label}\n                                    </Link>\n                                 </DropdownMenuItem>\n                              ))}\n                           </DropdownMenuContent>\n                        </DropdownMenu>\n                     ) : (\n                        <Drawer open={open} onOpenChange={setOpen}>\n                           <DrawerTrigger aria-label=\"Toggle Menu\">\n                              <BreadcrumbEllipsis className=\"size-4\" />\n                           </DrawerTrigger>\n                           <DrawerContent>\n                              <DrawerHeader className=\"text-left\">\n                                 <DrawerTitle>Navigate to</DrawerTitle>\n                                 <DrawerDescription>\n                                    Select a page to navigate to.\n                                 </DrawerDescription>\n                              </DrawerHeader>\n                              <div className=\"grid gap-1 px-4\">\n                                 {items.slice(1, -2).map((item, index) => (\n                                    <Link\n                                       key={index}\n                                       href={item.href ? item.href : \"#\"}\n                                       className=\"py-1 text-sm\"\n                                    >\n                                       {item.label}\n                                    </Link>\n                                 ))}\n                              </div>\n                              <DrawerFooter className=\"pt-4\">\n                                 <DrawerClose asChild>\n                                    <Button variant=\"outline\">Close</Button>\n                                 </DrawerClose>\n                              </DrawerFooter>\n                           </DrawerContent>\n                        </Drawer>\n                     )}\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator />\n               </>\n            ) : null}\n            {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n               <BreadcrumbItem key={index}>\n                  {item.href ? (\n                     <>\n                        <BreadcrumbLink\n                           asChild\n                           className=\"max-w-20 truncate md:max-w-none\"\n                        >\n                           <Link href={item.href}>{item.label}</Link>\n                        </BreadcrumbLink>\n                        <BreadcrumbSeparator />\n                     </>\n                  ) : (\n                     <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                        {item.label}\n                     </BreadcrumbPage>\n                  )}\n               </BreadcrumbItem>\n            ))}\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/breadcrumb-separator.json b/apps/web/public/v0/styles/default/breadcrumb-separator.json
new file mode 100644
index 00000000..27b68365
--- /dev/null
+++ b/apps/web/public/v0/styles/default/breadcrumb-separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb-separator",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-separator.tsx",
+      "content": "import { Slash } from \"lucide-react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <Slash />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <Slash />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/breadcrumb.json b/apps/web/public/v0/styles/default/breadcrumb.json
new file mode 100644
index 00000000..047fd28f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/breadcrumb.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "ui/breadcrumb.tsx",
+      "content": "import { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n   HTMLElement,\n   React.ComponentPropsWithoutRef<\"nav\"> & {\n      separator?: React.ReactNode\n   }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n   HTMLOListElement,\n   React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n   <ol\n      ref={ref}\n      className={cn(\n         \"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5\",\n         className,\n      )}\n      {...props}\n   />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n   />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n   HTMLAnchorElement,\n   React.ComponentPropsWithoutRef<\"a\"> & {\n      asChild?: boolean\n   }\n>(({ asChild, className, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"a\"\n\n   return (\n      <Comp\n         ref={ref}\n         className={cn(\"hover:text-foreground transition-colors\", className)}\n         {...props}\n      />\n   )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n   HTMLSpanElement,\n   React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n   <span\n      ref={ref}\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n   />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nfunction BreadcrumbSeparator({\n   children,\n   className,\n   ...props\n}: React.ComponentProps<\"li\">) {\n   return (\n      <li\n         role=\"presentation\"\n         aria-hidden=\"true\"\n         className={cn(\"[&>svg]:size-3.5\", className)}\n         {...props}\n      >\n         {children ?? <ChevronRight />}\n      </li>\n   )\n}\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nfunction BreadcrumbEllipsis({\n   className,\n   ...props\n}: React.ComponentProps<\"span\">) {\n   return (\n      <span\n         role=\"presentation\"\n         aria-hidden=\"true\"\n         className={cn(\"flex size-9 items-center justify-center\", className)}\n         {...props}\n      >\n         <MoreHorizontal className=\"size-4\" />\n         <span className=\"sr-only\">More</span>\n      </span>\n   )\n}\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\n\nexport {\n   Breadcrumb,\n   BreadcrumbList,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n   BreadcrumbEllipsis,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/button-as-child.json b/apps/web/public/v0/styles/default/button-as-child.json
new file mode 100644
index 00000000..6551c387
--- /dev/null
+++ b/apps/web/public/v0/styles/default/button-as-child.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-as-child",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-as-child.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ButtonAsChild() {\n   return (\n      <Button asChild>\n         <Link href=\"/login\">Login</Link>\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/button-demo.json b/apps/web/public/v0/styles/default/button-demo.json
new file mode 100644
index 00000000..15422025
--- /dev/null
+++ b/apps/web/public/v0/styles/default/button-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonDemo() {\n   return <Button>Button</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/button-destructive.json b/apps/web/public/v0/styles/default/button-destructive.json
new file mode 100644
index 00000000..06033468
--- /dev/null
+++ b/apps/web/public/v0/styles/default/button-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-destructive",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-destructive.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonDestructive() {\n   return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/button-ghost.json b/apps/web/public/v0/styles/default/button-ghost.json
new file mode 100644
index 00000000..9ea010c9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/button-ghost.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-ghost",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-ghost.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonGhost() {\n   return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/button-icon.json b/apps/web/public/v0/styles/default/button-icon.json
new file mode 100644
index 00000000..ba37f9d0
--- /dev/null
+++ b/apps/web/public/v0/styles/default/button-icon.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-icon",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-icon.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ButtonIcon() {\n   return (\n      <Button variant=\"outline\" size=\"icon\">\n         <ChevronRight className=\"size-4\" />\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/button-link.json b/apps/web/public/v0/styles/default/button-link.json
new file mode 100644
index 00000000..994d30ac
--- /dev/null
+++ b/apps/web/public/v0/styles/default/button-link.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-link",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-link.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonLink() {\n   return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/button-loading.json b/apps/web/public/v0/styles/default/button-loading.json
new file mode 100644
index 00000000..69767eaa
--- /dev/null
+++ b/apps/web/public/v0/styles/default/button-loading.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-loading",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ButtonLoading() {\n   return (\n      <Button disabled>\n         <Loader2 className=\"mr-2 size-4 animate-spin\" />\n         Please wait\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/button-outline.json b/apps/web/public/v0/styles/default/button-outline.json
new file mode 100644
index 00000000..94705886
--- /dev/null
+++ b/apps/web/public/v0/styles/default/button-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-outline",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-outline.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonOutline() {\n   return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/button-secondary.json b/apps/web/public/v0/styles/default/button-secondary.json
new file mode 100644
index 00000000..9fb1a2d5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/button-secondary.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-secondary",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-secondary.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonSecondary() {\n   return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/button-with-icon.json b/apps/web/public/v0/styles/default/button-with-icon.json
new file mode 100644
index 00000000..74f3758e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/button-with-icon.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-with-icon",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-with-icon.tsx",
+      "content": "import { Mail } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ButtonWithIcon() {\n   return (\n      <Button>\n         <Mail className=\"mr-2 size-4\" /> Login with Email\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/button.json b/apps/web/public/v0/styles/default/button.json
new file mode 100644
index 00000000..f90437b8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/button.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "ui/button.tsx",
+      "content": "import { Slot } from \"@radix-ui/react-slot\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n   \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n            destructive:\n               \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n            outline:\n               \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n            secondary:\n               \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n            ghost: \"hover:bg-accent hover:text-accent-foreground\",\n            link: \"text-primary underline-offset-4 hover:underline\",\n         },\n         size: {\n            default: \"h-10 px-4 py-2\",\n            sm: \"h-9 rounded-md px-3\",\n            lg: \"h-11 rounded-md px-8\",\n            icon: \"h-10 w-10\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n         size: \"default\",\n      },\n   },\n)\n\nexport interface ButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n      VariantProps<typeof buttonVariants> {\n   asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n   ({ className, variant, size, asChild = false, ...props }, ref) => {\n      const Comp = asChild ? Slot : \"button\"\n      return (\n         <Comp\n            className={cn(buttonVariants({ variant, size, className }))}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/calendar-demo.json b/apps/web/public/v0/styles/default/calendar-demo.json
new file mode 100644
index 00000000..22bd0bd6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/calendar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "calendar-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "examples/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/components/ui/calendar\"\n\nexport default function CalendarDemo() {\n   const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n   return (\n      <Calendar\n         mode=\"single\"\n         selected={date}\n         onSelect={setDate}\n         className=\"rounded-md border\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/calendar-form.json b/apps/web/public/v0/styles/default/calendar-form.json
new file mode 100644
index 00000000..bca38d74
--- /dev/null
+++ b/apps/web/public/v0/styles/default/calendar-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "calendar-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/calendar-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   dob: z.date({\n      required_error: \"A date of birth is required.\",\n   }),\n})\n\nexport default function CalendarForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"dob\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Date of birth</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 className={cn(\n                                    \"w-[240px] pl-3 text-left font-normal\",\n                                    !field.value && \"text-muted-foreground\",\n                                 )}\n                              >\n                                 {field.value ? (\n                                    format(field.value, \"PPP\")\n                                 ) : (\n                                    <span>Pick a date</span>\n                                 )}\n                                 <CalendarIcon className=\"ml-auto size-4 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                           <Calendar\n                              mode=\"single\"\n                              selected={field.value}\n                              onSelect={field.onChange}\n                              disabled={(date) =>\n                                 date > new Date() ||\n                                 date < new Date(\"1900-01-01\")\n                              }\n                              initialFocus\n                           />\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        Your date of birth is used to calculate your age.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/calendar.json b/apps/web/public/v0/styles/default/calendar.json
new file mode 100644
index 00000000..87c6894e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/calendar.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "calendar",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "react-day-picker@8.10.1",
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/calendar.tsx",
+      "content": "\"use client\"\n\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport type * as React from \"react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n   className,\n   classNames,\n   showOutsideDays = true,\n   ...props\n}: CalendarProps) {\n   return (\n      <DayPicker\n         showOutsideDays={showOutsideDays}\n         className={cn(\"p-3\", className)}\n         classNames={{\n            months:\n               \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n            month: \"space-y-4\",\n            caption: \"flex justify-center pt-1 relative items-center\",\n            caption_label: \"text-sm font-medium\",\n            nav: \"space-x-1 flex items-center\",\n            nav_button: cn(\n               buttonVariants({ variant: \"outline\" }),\n               \"size-7 bg-transparent p-0 opacity-50 hover:opacity-100\",\n            ),\n            nav_button_previous: \"absolute left-1\",\n            nav_button_next: \"absolute right-1\",\n            table: \"w-full border-collapse space-y-1\",\n            head_row: \"flex\",\n            head_cell:\n               \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n            row: \"flex w-full mt-2\",\n            cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n            day: cn(\n               buttonVariants({ variant: \"ghost\" }),\n               \"size-9 p-0 font-normal aria-selected:opacity-100\",\n            ),\n            day_range_end: \"day-range-end\",\n            day_selected:\n               \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n            day_today: \"bg-accent text-accent-foreground\",\n            day_outside:\n               \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n            day_disabled: \"text-muted-foreground opacity-50\",\n            day_range_middle:\n               \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n            day_hidden: \"invisible\",\n            ...classNames,\n         }}\n         components={{\n            IconLeft: ({ ...props }) => <ChevronLeft className=\"size-4\" />,\n            IconRight: ({ ...props }) => <ChevronRight className=\"size-4\" />,\n         }}\n         {...props}\n      />\n   )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/card-demo.json b/apps/web/public/v0/styles/default/card-demo.json
new file mode 100644
index 00000000..5800ef06
--- /dev/null
+++ b/apps/web/public/v0/styles/default/card-demo.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "card-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "button",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "examples/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Switch } from \"@/components/ui/switch\"\n\nconst notifications = [\n   {\n      title: \"Your call has been confirmed.\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"You have a new message!\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"Your subscription is expiring soon!\",\n      description: \"2 hours ago\",\n   },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n   return (\n      <Card className={cn(\"w-[380px]\", className)} {...props}>\n         <CardHeader>\n            <CardTitle>Notifications</CardTitle>\n            <CardDescription>You have 3 unread messages.</CardDescription>\n         </CardHeader>\n         <CardContent className=\"grid gap-4\">\n            <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n               <BellRing />\n               <div className=\"flex-1 space-y-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                     Push Notifications\n                  </p>\n                  <p className=\"text-muted-foreground text-sm\">\n                     Send notifications to device.\n                  </p>\n               </div>\n               <Switch />\n            </div>\n            <div>\n               {notifications.map((notification, index) => (\n                  <div\n                     key={index}\n                     className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n                  >\n                     <span className=\"flex size-2 translate-y-1 rounded-full bg-sky-500\" />\n                     <div className=\"space-y-1\">\n                        <p className=\"text-sm font-medium leading-none\">\n                           {notification.title}\n                        </p>\n                        <p className=\"text-muted-foreground text-sm\">\n                           {notification.description}\n                        </p>\n                     </div>\n                  </div>\n               ))}\n            </div>\n         </CardContent>\n         <CardFooter>\n            <Button className=\"w-full\">\n               <Check className=\"mr-2 size-4\" /> Mark all as read\n            </Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/card-with-form.json b/apps/web/public/v0/styles/default/card-with-form.json
new file mode 100644
index 00000000..7279ee37
--- /dev/null
+++ b/apps/web/public/v0/styles/default/card-with-form.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "card-with-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/card-with-form.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function CardWithForm() {\n   return (\n      <Card className=\"w-[350px]\">\n         <CardHeader>\n            <CardTitle>Create project</CardTitle>\n            <CardDescription>\n               Deploy your new project in one-click.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <form>\n               <div className=\"grid w-full items-center gap-4\">\n                  <div className=\"flex flex-col space-y-1.5\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" placeholder=\"Name of your project\" />\n                  </div>\n                  <div className=\"flex flex-col space-y-1.5\">\n                     <Label htmlFor=\"framework\">Framework</Label>\n                     <Select>\n                        <SelectTrigger id=\"framework\">\n                           <SelectValue placeholder=\"Select\" />\n                        </SelectTrigger>\n                        <SelectContent position=\"popper\">\n                           <SelectItem value=\"next\">Next.js</SelectItem>\n                           <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                           <SelectItem value=\"astro\">Astro</SelectItem>\n                           <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                        </SelectContent>\n                     </Select>\n                  </div>\n               </div>\n            </form>\n         </CardContent>\n         <CardFooter className=\"flex justify-between\">\n            <Button variant=\"outline\">Cancel</Button>\n            <Button>Deploy</Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/card.json b/apps/web/public/v0/styles/default/card.json
new file mode 100644
index 00000000..4f760ae5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/card.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "card",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/card.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\n         \"bg-card text-card-foreground rounded-lg border shadow-sm\",\n         className,\n      )}\n      {...props}\n   />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n      {...props}\n   />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n   <h3\n      ref={ref}\n      className={cn(\n         \"text-2xl font-semibold leading-none tracking-tight\",\n         className,\n      )}\n      {...props}\n   />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n   <p\n      ref={ref}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\"flex items-center p-6 pt-0\", className)}\n      {...props}\n   />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/carousel-api.json b/apps/web/public/v0/styles/default/carousel-api.json
new file mode 100644
index 00000000..4d6e66d9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/carousel-api.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-api",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-api.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   type CarouselApi,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n   const [api, setApi] = React.useState<CarouselApi>()\n   const [current, setCurrent] = React.useState(0)\n   const [count, setCount] = React.useState(0)\n\n   React.useEffect(() => {\n      if (!api) return\n\n      setCount(api.scrollSnapList().length)\n      setCurrent(api.selectedScrollSnap() + 1)\n\n      api.on(\"select\", () => {\n         setCurrent(api.selectedScrollSnap() + 1)\n      })\n   }, [api])\n\n   return (\n      <div>\n         <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n            <CarouselContent>\n               {Array.from({ length: 5 }).map((_, index) => (\n                  <CarouselItem key={index}>\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </CarouselItem>\n               ))}\n            </CarouselContent>\n            <CarouselPrevious />\n            <CarouselNext />\n         </Carousel>\n         <div className=\"text-muted-foreground py-2 text-center text-sm\">\n            Slide {current} of\n            {count}\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/carousel-demo.json b/apps/web/public/v0/styles/default/carousel-demo.json
new file mode 100644
index 00000000..7eec4a8f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/carousel-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselDemo() {\n   return (\n      <Carousel className=\"w-full max-w-xs\">\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/carousel-dots.json b/apps/web/public/v0/styles/default/carousel-dots.json
new file mode 100644
index 00000000..b58bd092
--- /dev/null
+++ b/apps/web/public/v0/styles/default/carousel-dots.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-dots",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-dots.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselDots,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselDotsDemo() {\n   return (\n      <Carousel\n         opts={{\n            align: \"start\",\n         }}\n         className=\"w-full max-w-sm\"\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselDots />\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/carousel-orientation.json b/apps/web/public/v0/styles/default/carousel-orientation.json
new file mode 100644
index 00000000..ffbf2900
--- /dev/null
+++ b/apps/web/public/v0/styles/default/carousel-orientation.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-orientation",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselOrientation() {\n   return (\n      <Carousel\n         opts={{\n            align: \"start\",\n         }}\n         orientation=\"vertical\"\n         className=\"w-full max-w-xs\"\n      >\n         <CarouselContent className=\"-mt-1 h-[200px]\">\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/carousel-plugin.json b/apps/web/public/v0/styles/default/carousel-plugin.json
new file mode 100644
index 00000000..f6fcce73
--- /dev/null
+++ b/apps/web/public/v0/styles/default/carousel-plugin.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-plugin",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-plugin.tsx",
+      "content": "import Autoplay from \"embla-carousel-autoplay\"\nimport * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselPlugin() {\n   const plugin = React.useRef(\n      Autoplay({ delay: 2000, stopOnInteraction: true }),\n   )\n\n   return (\n      <Carousel\n         plugins={[plugin.current]}\n         className=\"w-full max-w-xs\"\n         onMouseEnter={plugin.current.stop}\n         onMouseLeave={plugin.current.reset}\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/carousel-size.json b/apps/web/public/v0/styles/default/carousel-size.json
new file mode 100644
index 00000000..842a1f4b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/carousel-size.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-size",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-size.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselSize() {\n   return (\n      <Carousel\n         opts={{\n            align: \"start\",\n         }}\n         className=\"w-full max-w-sm\"\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/carousel-spacing.json b/apps/web/public/v0/styles/default/carousel-spacing.json
new file mode 100644
index 00000000..985f17fa
--- /dev/null
+++ b/apps/web/public/v0/styles/default/carousel-spacing.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-spacing",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-spacing.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselSpacing() {\n   return (\n      <Carousel className=\"w-full max-w-sm\">\n         <CarouselContent className=\"-ml-1\">\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem\n                  key={index}\n                  className=\"pl-1 md:basis-1/2 lg:basis-1/3\"\n               >\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-2xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/carousel.json b/apps/web/public/v0/styles/default/carousel.json
new file mode 100644
index 00000000..6c6b6714
--- /dev/null
+++ b/apps/web/public/v0/styles/default/carousel.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "embla-carousel-react"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/carousel.tsx",
+      "content": "\"use client\"\n\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport useEmblaCarousel, {\n   type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ninterface CarouselProps {\n   opts?: CarouselOptions\n   plugins?: CarouselPlugin\n   setApi?: (api: CarouselApi) => void\n   orientation?: \"horizontal\" | \"vertical\"\n   dotsPosition?: \"top\" | \"bottom\" | \"left\" | \"right\"\n}\n\ntype CarouselContextProps = {\n   carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n   api: ReturnType<typeof useEmblaCarousel>[1]\n   scrollPrev: () => void\n   scrollNext: () => void\n   scrollTo: (index: number) => void\n   canScrollPrev: boolean\n   canScrollNext: boolean\n   totalSlides: number\n   currentIndex: number\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n   const context = React.useContext(CarouselContext)\n\n   if (!context)\n      throw new Error(\"useCarousel must be used within a <Carousel />\")\n\n   return context\n}\n\nconst Carousel = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n   (\n      {\n         opts,\n         plugins,\n         setApi,\n         orientation = \"horizontal\",\n         dotsPosition = \"bottom\",\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const [carouselRef, api] = useEmblaCarousel(\n         {\n            ...opts,\n            axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n         },\n         plugins,\n      )\n      const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n      const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n      const [currentIndex, setCurrentIndex] = React.useState(0)\n      const [totalSlides, setTotalSlides] = React.useState(0)\n\n      const onSelect = React.useCallback((api: CarouselApi) => {\n         if (!api) return\n\n         setCanScrollPrev(api.canScrollPrev())\n         setCanScrollNext(api.canScrollNext())\n         setCurrentIndex(api.selectedScrollSnap())\n         setTotalSlides(api.scrollSnapList().length)\n      }, [])\n\n      const scrollTo = React.useCallback(\n         (index: number) => {\n            api?.scrollTo(index)\n         },\n         [api],\n      )\n\n      const scrollPrev = React.useCallback(() => {\n         api?.scrollPrev()\n      }, [api])\n\n      const scrollNext = React.useCallback(() => {\n         api?.scrollNext()\n      }, [api])\n\n      const handleKeyDown = React.useCallback(\n         (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === \"ArrowLeft\") {\n               event.preventDefault()\n               scrollPrev()\n            } else if (event.key === \"ArrowRight\") {\n               event.preventDefault()\n               scrollNext()\n            }\n         },\n         [scrollPrev, scrollNext],\n      )\n\n      React.useEffect(() => {\n         if (!api || !setApi) return\n\n         setApi(api)\n      }, [api, setApi])\n\n      React.useEffect(() => {\n         if (!api) return\n\n         onSelect(api)\n         api.on(\"reInit\", onSelect)\n         api.on(\"select\", onSelect)\n\n         return () => {\n            api?.off(\"select\", onSelect)\n         }\n      }, [api, onSelect])\n\n      let effectiveDotsPosition = dotsPosition\n      if (\n         orientation === \"horizontal\" &&\n         (dotsPosition === \"left\" || dotsPosition === \"right\")\n      ) {\n         console.warn(\n            `Invalid dotsPosition \"${dotsPosition}\" for horizontal orientation, defaulting to \"bottom\".`,\n         )\n         effectiveDotsPosition = \"bottom\"\n      } else if (\n         orientation === \"vertical\" &&\n         (dotsPosition === \"top\" || dotsPosition === \"bottom\")\n      ) {\n         console.warn(\n            `Invalid dotsPosition \"${dotsPosition}\" for vertical orientation, defaulting to \"left\".`,\n         )\n         effectiveDotsPosition = \"left\"\n      }\n\n      return (\n         <CarouselContext.Provider\n            value={{\n               carouselRef,\n               api,\n               opts,\n               orientation:\n                  orientation ||\n                  (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n               dotsPosition: effectiveDotsPosition,\n               scrollPrev,\n               scrollNext,\n               scrollTo,\n               canScrollPrev,\n               canScrollNext,\n               totalSlides,\n               currentIndex,\n            }}\n         >\n            <div\n               ref={ref}\n               onKeyDownCapture={handleKeyDown}\n               className={cn(\"relative\", className)}\n               role=\"region\"\n               aria-roledescription=\"carousel\"\n               {...props}\n            >\n               {children}\n            </div>\n         </CarouselContext.Provider>\n      )\n   },\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { carouselRef, orientation } = useCarousel()\n\n   return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n         <div\n            ref={ref}\n            className={cn(\n               \"flex\",\n               orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n               className,\n            )}\n            {...props}\n         />\n      </div>\n   )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { orientation } = useCarousel()\n\n   return (\n      <div\n         ref={ref}\n         role=\"group\"\n         aria-roledescription=\"slide\"\n         className={cn(\n            \"min-w-0 shrink-0 grow-0 basis-full\",\n            orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n   const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n   return (\n      <Button\n         ref={ref}\n         variant={variant}\n         size={size}\n         className={cn(\n            \"absolute  size-8 rounded-full\",\n            orientation === \"horizontal\"\n               ? \"-left-12 top-1/2 -translate-y-1/2\"\n               : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n            className,\n         )}\n         disabled={!canScrollPrev}\n         onClick={scrollPrev}\n         {...props}\n      >\n         <ArrowLeft className=\"size-4\" />\n         <span className=\"sr-only\">Previous slide</span>\n      </Button>\n   )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n   const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n   return (\n      <Button\n         ref={ref}\n         variant={variant}\n         size={size}\n         className={cn(\n            \"absolute size-8 rounded-full\",\n            orientation === \"horizontal\"\n               ? \"-right-12 top-1/2 -translate-y-1/2\"\n               : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n            className,\n         )}\n         disabled={!canScrollNext}\n         onClick={scrollNext}\n         {...props}\n      >\n         <ArrowRight className=\"size-4\" />\n         <span className=\"sr-only\">Next slide</span>\n      </Button>\n   )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nconst dotsContainerVariants = cva(\"absolute flex justify-center\", {\n   variants: {\n      orientation: {\n         horizontal: \"inset-x-0 flex-row\",\n         vertical: \"inset-y-0 flex-col\",\n      },\n      size: {\n         default: \"p-4\",\n         sm: \"p-4\",\n         md: \"p-1\",\n         lg: \"p-0\",\n      },\n      position: {\n         top: \"-top-10\",\n         right: \"-right-10\",\n         bottom: \"-bottom-10\",\n         left: \"-left-10\",\n      },\n      gap: {\n         default: \"gap-2\",\n         sm: \"gap-2\",\n         md: \"gap-4\",\n         lg: \"gap-6\",\n      },\n   },\n   defaultVariants: {\n      orientation: \"horizontal\",\n      size: \"default\",\n      position: \"bottom\",\n      gap: \"default\",\n   },\n})\n\nconst dotsVariants = cva(\n   \"rounded-full ring-1 ring-muted ring-offset-1 ring-offset-background transition-all duration-300\",\n   {\n      variants: {\n         size: {\n            default: \"size-3\",\n            sm: \"size-3\",\n            md: \"size-4\",\n            lg: \"size-6\",\n         },\n      },\n      defaultVariants: {\n         size: \"default\",\n      },\n   },\n)\n\ninterface CarouselDotsProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof dotsContainerVariants>,\n      VariantProps<typeof dotsVariants> {}\n\nconst CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(\n   ({ className, size, gap, ...props }, ref) => {\n      const { orientation, dotsPosition, totalSlides, currentIndex, scrollTo } =\n         useCarousel()\n\n      if (totalSlides <= 1) return null\n\n      return (\n         <div\n            ref={ref}\n            role=\"tablist\"\n            className={cn(\n               dotsContainerVariants({\n                  orientation,\n                  size,\n                  position: dotsPosition,\n                  gap,\n               }),\n               className,\n            )}\n            {...props}\n         >\n            {Array.from({ length: totalSlides }).map((_, index) => (\n               <button\n                  key={index}\n                  role=\"tab\"\n                  aria-selected={currentIndex === index}\n                  aria-label={`Go to slide ${index + 1}`}\n                  onClick={() => scrollTo(index)}\n                  className={cn(\n                     dotsVariants({ size }),\n                     currentIndex === index ? \"bg-card-foreground\" : \"bg-muted\",\n                  )}\n               />\n            ))}\n         </div>\n      )\n   },\n)\nCarouselDots.displayName = \"CarouselDots\"\n\nexport {\n   type CarouselApi,\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselPrevious,\n   CarouselNext,\n   CarouselDots,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-area-axes.json b/apps/web/public/v0/styles/default/chart-area-axes.json
new file mode 100644
index 00000000..e5a85487
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-area-axes.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-axes",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-axes.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Axes</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: -20,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <YAxis\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickCount={3}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-area-default.json b/apps/web/public/v0/styles/default/chart-area-default.json
new file mode 100644
index 00000000..c1f3b38a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-area-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-default",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-area-gradient.json b/apps/web/public/v0/styles/default/chart-area-gradient.json
new file mode 100644
index 00000000..30197085
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-area-gradient.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-gradient",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-gradient.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Gradient</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <defs>\n                     <linearGradient\n                        id=\"fillDesktop\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                     <linearGradient\n                        id=\"fillMobile\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                  </defs>\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"url(#fillMobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"url(#fillDesktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-area-icons.json b/apps/web/public/v0/styles/default/chart-area-icons.json
new file mode 100644
index 00000000..4ccafb30
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-area-icons.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-icons",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-icons.tsx",
+      "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n      icon: TrendingDown,\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n      icon: TrendingUp,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Icons</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-area-interactive.json b/apps/web/public/v0/styles/default/chart-area-interactive.json
new file mode 100644
index 00000000..7e5cae63
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-area-interactive.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-interactive",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\nconst chartData = [\n   { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n   { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n   { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n   { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n   { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n   { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n   { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n   { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n   { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n   { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n   { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n   { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n   { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n   { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n   { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n   { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n   { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n   { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n   { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n   { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n   { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n   { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n   { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n   { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n   { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n   { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n   { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n   { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n   { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n   { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n   { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n   { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n   { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n   { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n   { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n   { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n   { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n   { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n   { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n   { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n   { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n   { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n   { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n   { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n   { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n   { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n   { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n   { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n   { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n   { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n   { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n   { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n   { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n   { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n   { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n   { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n   { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n   { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n   { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n   { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n   { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n   { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n   { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n   { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n   { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n   { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n   { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n   { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n   { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n   { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n   { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n   { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n   { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n   { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n   { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n   { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n   { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n   { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n   { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n   { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n   { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n   { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n   { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n   { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n   { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n   { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n   { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n   { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n   { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n   const filteredData = chartData.filter((item) => {\n      const date = new Date(item.date)\n      const referenceDate = new Date(\"2024-06-30\")\n      let daysToSubtract = 90\n      if (timeRange === \"30d\") {\n         daysToSubtract = 30\n      } else if (timeRange === \"7d\") {\n         daysToSubtract = 7\n      }\n      const startDate = new Date(referenceDate)\n      startDate.setDate(startDate.getDate() - daysToSubtract)\n      return date >= startDate\n   })\n\n   return (\n      <Card>\n         <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n            <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n               <CardTitle>Area Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <Select value={timeRange} onValueChange={setTimeRange}>\n               <SelectTrigger\n                  className=\"w-[160px] rounded-lg sm:ml-auto\"\n                  aria-label=\"Select a value\"\n               >\n                  <SelectValue placeholder=\"Last 3 months\" />\n               </SelectTrigger>\n               <SelectContent className=\"rounded-xl\">\n                  <SelectItem value=\"90d\" className=\"rounded-lg\">\n                     Last 3 months\n                  </SelectItem>\n                  <SelectItem value=\"30d\" className=\"rounded-lg\">\n                     Last 30 days\n                  </SelectItem>\n                  <SelectItem value=\"7d\" className=\"rounded-lg\">\n                     Last 7 days\n                  </SelectItem>\n               </SelectContent>\n            </Select>\n         </CardHeader>\n         <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <AreaChart data={filteredData}>\n                  <defs>\n                     <linearGradient\n                        id=\"fillDesktop\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                     <linearGradient\n                        id=\"fillMobile\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                  </defs>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString(\"en-US\", {\n                           month: \"short\",\n                           day: \"numeric\",\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    month: \"short\",\n                                    day: \"numeric\",\n                                 },\n                              )\n                           }}\n                           indicator=\"dot\"\n                        />\n                     }\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"url(#fillMobile)\"\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"url(#fillDesktop)\"\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-area-legend.json b/apps/web/public/v0/styles/default/chart-area-legend.json
new file mode 100644
index 00000000..8b414de5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-area-legend.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-legend",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Legend</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-area-linear.json b/apps/web/public/v0/styles/default/chart-area-linear.json
new file mode 100644
index 00000000..c1221475
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-area-linear.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-linear",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Linear</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"linear\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-area-stacked-expand.json b/apps/web/public/v0/styles/default/chart-area-stacked-expand.json
new file mode 100644
index 00000000..dc0e283c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-area-stacked-expand.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-stacked-expand",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-stacked-expand.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n   { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n   { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n   { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n   { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n   { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-3))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                     top: 12,\n                  }}\n                  stackOffset=\"expand\"\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"other\"\n                     type=\"natural\"\n                     fill=\"var(--color-other)\"\n                     fillOpacity={0.1}\n                     stroke=\"var(--color-other)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-area-stacked.json b/apps/web/public/v0/styles/default/chart-area-stacked.json
new file mode 100644
index 00000000..3108442d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-area-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-stacked",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Stacked</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-area-step.json b/apps/web/public/v0/styles/default/chart-area-step.json
new file mode 100644
index 00000000..87226d24
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-area-step.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-step",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-step.tsx",
+      "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n      icon: Activity,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Step</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"step\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-bar-active.json b/apps/web/public/v0/styles/default/chart-bar-active.json
new file mode 100644
index 00000000..cfa9d9bc
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-bar-active.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-active",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Active</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"browser\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) =>\n                        chartConfig[value as keyof typeof chartConfig]?.label\n                     }\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"visitors\"\n                     strokeWidth={2}\n                     radius={8}\n                     activeIndex={2}\n                     activeBar={({ ...props }) => {\n                        return (\n                           <Rectangle\n                              {...props}\n                              fillOpacity={0.8}\n                              stroke={props.payload.fill}\n                              strokeDasharray={4}\n                              strokeDashoffset={4}\n                           />\n                        )\n                     }}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-bar-default.json b/apps/web/public/v0/styles/default/chart-bar-default.json
new file mode 100644
index 00000000..6a306b62
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-bar-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-default",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     radius={8}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-bar-horizontal.json b/apps/web/public/v0/styles/default/chart-bar-horizontal.json
new file mode 100644
index 00000000..b538be43
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-bar-horizontal.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-horizontal",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-horizontal.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Horizontal</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     left: -20,\n                  }}\n               >\n                  <XAxis type=\"number\" dataKey=\"desktop\" hide />\n                  <YAxis\n                     dataKey=\"month\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     radius={5}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-bar-interactive.json b/apps/web/public/v0/styles/default/chart-bar-interactive.json
new file mode 100644
index 00000000..2e78214b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-bar-interactive.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-interactive",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n   { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n   { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n   { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n   { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n   { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n   { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n   { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n   { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n   { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n   { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n   { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n   { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n   { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n   { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n   { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n   { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n   { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n   { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n   { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n   { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n   { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n   { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n   { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n   { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n   { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n   { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n   { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n   { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n   { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n   { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n   { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n   { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n   { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n   { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n   { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n   { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n   { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n   { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n   { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n   { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n   { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n   { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n   { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n   { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n   { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n   { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n   { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n   { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n   { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n   { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n   { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n   { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n   { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n   { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n   { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n   { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n   { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n   { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n   { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n   { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n   { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n   { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n   { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n   { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n   { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n   { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n   { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n   { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n   { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n   { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n   { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n   { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n   { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n   { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n   { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n   { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n   { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n   { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n   { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n   { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n   { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n   { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n   { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n   { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n   { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n   { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n   { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n   { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   views: {\n      label: \"Page Views\",\n   },\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [activeChart, setActiveChart] =\n      React.useState<keyof typeof chartConfig>(\"desktop\")\n\n   const total = React.useMemo(\n      () => ({\n         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n      }),\n      [],\n   )\n\n   return (\n      <Card>\n         <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n            <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n               <CardTitle>Bar Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <div className=\"flex\">\n               {[\"desktop\", \"mobile\"].map((key) => {\n                  const chart = key as keyof typeof chartConfig\n                  return (\n                     <button\n                        key={chart}\n                        data-active={activeChart === chart}\n                        className=\"relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                        onClick={() => setActiveChart(chart)}\n                     >\n                        <span className=\"text-xs text-muted-foreground\">\n                           {chartConfig[chart].label}\n                        </span>\n                        <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                           {total[key as keyof typeof total].toLocaleString()}\n                        </span>\n                     </button>\n                  )\n               })}\n            </div>\n         </CardHeader>\n         <CardContent className=\"px-2 sm:p-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString(\"en-US\", {\n                           month: \"short\",\n                           day: \"numeric\",\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           className=\"w-[150px]\"\n                           nameKey=\"views\"\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    month: \"short\",\n                                    day: \"numeric\",\n                                    year: \"numeric\",\n                                 },\n                              )\n                           }}\n                        />\n                     }\n                  />\n                  <Bar\n                     dataKey={activeChart}\n                     fill={`var(--color-${activeChart})`}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-bar-label-custom.json b/apps/web/public/v0/styles/default/chart-bar-label-custom.json
new file mode 100644
index 00000000..5f16df21
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-bar-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-label-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   label: {\n      color: \"hsl(var(--background))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     right: 16,\n                  }}\n               >\n                  <CartesianGrid horizontal={false} />\n                  <YAxis\n                     dataKey=\"month\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                     hide\n                  />\n                  <XAxis dataKey=\"desktop\" type=\"number\" hide />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     layout=\"vertical\"\n                     fill=\"var(--color-desktop)\"\n                     radius={4}\n                  >\n                     <LabelList\n                        dataKey=\"month\"\n                        position=\"insideLeft\"\n                        offset={8}\n                        className=\"fill-[--color-label]\"\n                        fontSize={12}\n                     />\n                     <LabelList\n                        dataKey=\"desktop\"\n                        position=\"right\"\n                        offset={8}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-bar-label.json b/apps/web/public/v0/styles/default/chart-bar-label.json
new file mode 100644
index 00000000..e32c3fc1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-bar-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-label",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 20,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-bar-mixed.json b/apps/web/public/v0/styles/default/chart-bar-mixed.json
new file mode 100644
index 00000000..8a62868d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-bar-mixed.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-mixed",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-mixed.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Mixed</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     left: 0,\n                  }}\n               >\n                  <YAxis\n                     dataKey=\"browser\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) =>\n                        chartConfig[value as keyof typeof chartConfig]?.label\n                     }\n                  />\n                  <XAxis dataKey=\"visitors\" type=\"number\" hide />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-bar-multiple.json b/apps/web/public/v0/styles/default/chart-bar-multiple.json
new file mode 100644
index 00000000..b916712d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-bar-multiple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-multiple",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Multiple</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dashed\" />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     radius={4}\n                  />\n                  <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-bar-negative.json b/apps/web/public/v0/styles/default/chart-bar-negative.json
new file mode 100644
index 00000000..cf04f4e5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-bar-negative.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-negative",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-negative.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", visitors: 186 },\n   { month: \"February\", visitors: 205 },\n   { month: \"March\", visitors: -207 },\n   { month: \"April\", visitors: 173 },\n   { month: \"May\", visitors: -209 },\n   { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Negative</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel hideIndicator />}\n                  />\n                  <Bar dataKey=\"visitors\">\n                     <LabelList\n                        position=\"top\"\n                        dataKey=\"month\"\n                        fillOpacity={1}\n                     />\n                     {chartData.map((item) => (\n                        <Cell\n                           key={item.month}\n                           fill={\n                              item.visitors > 0\n                                 ? \"hsl(var(--chart-1))\"\n                                 : \"hsl(var(--chart-2))\"\n                           }\n                        />\n                     ))}\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-bar-stacked.json b/apps/web/public/v0/styles/default/chart-bar-stacked.json
new file mode 100644
index 00000000..d091cb16
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-bar-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-stacked",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <ChartLegend content={<ChartLegendContent />} />\n                  <Bar\n                     dataKey=\"desktop\"\n                     stackId=\"a\"\n                     fill=\"var(--color-desktop)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"mobile\"\n                     stackId=\"a\"\n                     fill=\"var(--color-mobile)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-line-default.json b/apps/web/public/v0/styles/default/chart-line-default.json
new file mode 100644
index 00000000..f9a20a87
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-line-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-default",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-line-dots-colors.json b/apps/web/public/v0/styles/default/chart-line-dots-colors.json
new file mode 100644
index 00000000..32d5b204
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-line-dots-colors.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-dots-colors",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-dots-colors.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Dots Colors</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 24,\n                     left: 24,\n                     right: 24,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           nameKey=\"visitors\"\n                           hideLabel\n                        />\n                     }\n                  />\n                  <Line\n                     dataKey=\"visitors\"\n                     type=\"natural\"\n                     stroke=\"var(--color-visitors)\"\n                     strokeWidth={2}\n                     dot={({ payload, ...props }) => {\n                        return (\n                           <Dot\n                              key={payload.browser}\n                              r={5}\n                              cx={props.cx}\n                              cy={props.cy}\n                              fill={payload.fill}\n                              stroke={payload.fill}\n                           />\n                        )\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-line-dots-custom.json b/apps/web/public/v0/styles/default/chart-line-dots-custom.json
new file mode 100644
index 00000000..1e21b18d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-line-dots-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-dots-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-dots-custom.tsx",
+      "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Custom Dots</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={({ cx, cy, payload }) => {\n                        const r = 24\n                        return (\n                           <GitCommitVertical\n                              key={payload.month}\n                              x={cx - r / 2}\n                              y={cy - r / 2}\n                              width={r}\n                              height={r}\n                              fill=\"hsl(var(--background))\"\n                              stroke=\"var(--color-desktop)\"\n                           />\n                        )\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-line-dots.json b/apps/web/public/v0/styles/default/chart-line-dots.json
new file mode 100644
index 00000000..1eebe7ee
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-line-dots.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-dots",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Dots</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: \"var(--color-desktop)\",\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-line-interactive.json b/apps/web/public/v0/styles/default/chart-line-interactive.json
new file mode 100644
index 00000000..de5affbd
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-line-interactive.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-interactive",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n   { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n   { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n   { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n   { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n   { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n   { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n   { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n   { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n   { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n   { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n   { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n   { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n   { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n   { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n   { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n   { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n   { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n   { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n   { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n   { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n   { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n   { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n   { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n   { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n   { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n   { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n   { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n   { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n   { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n   { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n   { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n   { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n   { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n   { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n   { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n   { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n   { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n   { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n   { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n   { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n   { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n   { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n   { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n   { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n   { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n   { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n   { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n   { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n   { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n   { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n   { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n   { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n   { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n   { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n   { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n   { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n   { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n   { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n   { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n   { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n   { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n   { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n   { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n   { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n   { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n   { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n   { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n   { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n   { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n   { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n   { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n   { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n   { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n   { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n   { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n   { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n   { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n   { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n   { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n   { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n   { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n   { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n   { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n   { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n   { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n   { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n   { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n   { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   views: {\n      label: \"Page Views\",\n   },\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [activeChart, setActiveChart] =\n      React.useState<keyof typeof chartConfig>(\"desktop\")\n\n   const total = React.useMemo(\n      () => ({\n         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n      }),\n      [],\n   )\n\n   return (\n      <Card>\n         <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n            <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n               <CardTitle>Line Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <div className=\"flex\">\n               {[\"desktop\", \"mobile\"].map((key) => {\n                  const chart = key as keyof typeof chartConfig\n                  return (\n                     <button\n                        key={chart}\n                        data-active={activeChart === chart}\n                        className=\"flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                        onClick={() => setActiveChart(chart)}\n                     >\n                        <span className=\"text-xs text-muted-foreground\">\n                           {chartConfig[chart].label}\n                        </span>\n                        <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                           {total[key as keyof typeof total].toLocaleString()}\n                        </span>\n                     </button>\n                  )\n               })}\n            </div>\n         </CardHeader>\n         <CardContent className=\"px-2 sm:p-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString(\"en-US\", {\n                           month: \"short\",\n                           day: \"numeric\",\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           className=\"w-[150px]\"\n                           nameKey=\"views\"\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    month: \"short\",\n                                    day: \"numeric\",\n                                    year: \"numeric\",\n                                 },\n                              )\n                           }}\n                        />\n                     }\n                  />\n                  <Line\n                     dataKey={activeChart}\n                     type=\"monotone\"\n                     stroke={`var(--color-${activeChart})`}\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-line-label-custom.json b/apps/web/public/v0/styles/default/chart-line-label-custom.json
new file mode 100644
index 00000000..8f286c36
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-line-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-label-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 24,\n                     left: 24,\n                     right: 24,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           nameKey=\"visitors\"\n                           hideLabel\n                        />\n                     }\n                  />\n                  <Line\n                     dataKey=\"visitors\"\n                     type=\"natural\"\n                     stroke=\"var(--color-visitors)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: \"var(--color-visitors)\",\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  >\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                        dataKey=\"browser\"\n                        formatter={(value: keyof typeof chartConfig) =>\n                           chartConfig[value]?.label\n                        }\n                     />\n                  </Line>\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-line-label.json b/apps/web/public/v0/styles/default/chart-line-label.json
new file mode 100644
index 00000000..efdb52e3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-line-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-label",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 20,\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: \"var(--color-desktop)\",\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  >\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Line>\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-line-linear.json b/apps/web/public/v0/styles/default/chart-line-linear.json
new file mode 100644
index 00000000..5238bf8f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-line-linear.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-linear",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Linear</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"linear\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-line-multiple.json b/apps/web/public/v0/styles/default/chart-line-multiple.json
new file mode 100644
index 00000000..b6cd9ea7
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-line-multiple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-multiple",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Multiple</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"monotone\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n                  <Line\n                     dataKey=\"mobile\"\n                     type=\"monotone\"\n                     stroke=\"var(--color-mobile)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     Showing total visitors for the last 6 months\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-line-step.json b/apps/web/public/v0/styles/default/chart-line-step.json
new file mode 100644
index 00000000..029c0371
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-line-step.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-step",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-step.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Step</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"step\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-pie-donut-active.json b/apps/web/public/v0/styles/default/chart-pie-donut-active.json
new file mode 100644
index 00000000..bcb8a660
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-pie-donut-active.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-donut-active",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-donut-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut Active</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                     activeIndex={0}\n                     activeShape={({\n                        outerRadius = 0,\n                        ...props\n                     }: PieSectorDataItem) => (\n                        <Sector {...props} outerRadius={outerRadius + 10} />\n                     )}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-pie-donut-text.json b/apps/web/public/v0/styles/default/chart-pie-donut-text.json
new file mode 100644
index 00000000..05b4ce12
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-pie-donut-text.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-donut-text",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-donut-text.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const totalVisitors = React.useMemo(() => {\n      return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n   }, [])\n\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut with Text</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-3xl font-bold\"\n                                    >\n                                       {totalVisitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-pie-donut.json b/apps/web/public/v0/styles/default/chart-pie-donut.json
new file mode 100644
index 00000000..8f98f1e4
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-pie-donut.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-donut",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-donut.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-pie-interactive.json b/apps/web/public/v0/styles/default/chart-pie-interactive.json
new file mode 100644
index 00000000..210d2ef4
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-pie-interactive.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-interactive",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartStyle,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\nconst desktopData = [\n   { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n   { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n   { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n   { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n   { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   desktop: {\n      label: \"Desktop\",\n   },\n   mobile: {\n      label: \"Mobile\",\n   },\n   january: {\n      label: \"January\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   february: {\n      label: \"February\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   march: {\n      label: \"March\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   april: {\n      label: \"April\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   may: {\n      label: \"May\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const id = \"pie-interactive\"\n   const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n   const activeIndex = React.useMemo(\n      () => desktopData.findIndex((item) => item.month === activeMonth),\n      [activeMonth],\n   )\n   const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n   return (\n      <Card data-chart={id} className=\"flex flex-col\">\n         <ChartStyle id={id} config={chartConfig} />\n         <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n            <div className=\"grid gap-1\">\n               <CardTitle>Pie Chart - Interactive</CardTitle>\n               <CardDescription>January - June 2024</CardDescription>\n            </div>\n            <Select value={activeMonth} onValueChange={setActiveMonth}>\n               <SelectTrigger\n                  className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n                  aria-label=\"Select a value\"\n               >\n                  <SelectValue placeholder=\"Select month\" />\n               </SelectTrigger>\n               <SelectContent align=\"end\" className=\"rounded-xl\">\n                  {months.map((key) => {\n                     const config = chartConfig[key as keyof typeof chartConfig]\n\n                     if (!config) {\n                        return null\n                     }\n\n                     return (\n                        <SelectItem\n                           key={key}\n                           value={key}\n                           className=\"rounded-lg [&_span]:flex\"\n                        >\n                           <div className=\"flex items-center gap-2 text-xs\">\n                              <span\n                                 className=\"flex h-3 w-3 shrink-0 rounded-sm\"\n                                 style={{\n                                    backgroundColor: `var(--color-${key})`,\n                                 }}\n                              />\n                              {config?.label}\n                           </div>\n                        </SelectItem>\n                     )\n                  })}\n               </SelectContent>\n            </Select>\n         </CardHeader>\n         <CardContent className=\"flex flex-1 justify-center pb-0\">\n            <ChartContainer\n               id={id}\n               config={chartConfig}\n               className=\"mx-auto aspect-square w-full max-w-[300px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={desktopData}\n                     dataKey=\"desktop\"\n                     nameKey=\"month\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                     activeIndex={activeIndex}\n                     activeShape={({\n                        outerRadius = 0,\n                        ...props\n                     }: PieSectorDataItem) => (\n                        <g>\n                           <Sector {...props} outerRadius={outerRadius + 10} />\n                           <Sector\n                              {...props}\n                              outerRadius={outerRadius + 25}\n                              innerRadius={outerRadius + 12}\n                           />\n                        </g>\n                     )}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-3xl font-bold\"\n                                    >\n                                       {desktopData[\n                                          activeIndex\n                                       ].desktop.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-pie-label-custom.json b/apps/web/public/v0/styles/default/chart-pie-label-custom.json
new file mode 100644
index 00000000..12fd0181
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-pie-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-label-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] px-0\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent nameKey=\"visitors\" hideLabel />\n                     }\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     labelLine={false}\n                     label={({ payload, ...props }) => {\n                        return (\n                           <text\n                              cx={props.cx}\n                              cy={props.cy}\n                              x={props.x}\n                              y={props.y}\n                              textAnchor={props.textAnchor}\n                              dominantBaseline={props.dominantBaseline}\n                              fill=\"hsla(var(--foreground))\"\n                           >\n                              {payload.visitors}\n                           </text>\n                        )\n                     }}\n                     nameKey=\"browser\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-pie-label-list.json b/apps/web/public/v0/styles/default/chart-pie-label-list.json
new file mode 100644
index 00000000..f9ca392b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-pie-label-list.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-label-list",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-label-list.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Label List</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent nameKey=\"visitors\" hideLabel />\n                     }\n                  />\n                  <Pie data={chartData} dataKey=\"visitors\">\n                     <LabelList\n                        dataKey=\"browser\"\n                        className=\"fill-background\"\n                        stroke=\"none\"\n                        fontSize={12}\n                        formatter={(value: keyof typeof chartConfig) =>\n                           chartConfig[value]?.label\n                        }\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-pie-label.json b/apps/web/public/v0/styles/default/chart-pie-label.json
new file mode 100644
index 00000000..68f807e5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-pie-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-label",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground\"\n            >\n               <PieChart>\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     label\n                     nameKey=\"browser\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-pie-legend.json b/apps/web/public/v0/styles/default/chart-pie-legend.json
new file mode 100644
index 00000000..107d6dc1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-pie-legend.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-legend",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-legend.tsx",
+      "content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Legend</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[300px]\"\n            >\n               <PieChart>\n                  <Pie data={chartData} dataKey=\"visitors\" />\n                  <ChartLegend\n                     content={<ChartLegendContent nameKey=\"browser\" />}\n                     className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-pie-separator-none.json b/apps/web/public/v0/styles/default/chart-pie-separator-none.json
new file mode 100644
index 00000000..5f07f12f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-pie-separator-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-separator-none",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-separator-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Separator None</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     stroke=\"0\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-pie-simple.json b/apps/web/public/v0/styles/default/chart-pie-simple.json
new file mode 100644
index 00000000..3fcea030
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-pie-simple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-simple",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-pie-stacked.json b/apps/web/public/v0/styles/default/chart-pie-stacked.json
new file mode 100644
index 00000000..6dac30b9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-pie-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-stacked",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst desktopData = [\n   { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n   { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n   { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n   { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n   { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n   { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n   { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n   { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n   { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n   { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   desktop: {\n      label: \"Desktop\",\n   },\n   mobile: {\n      label: \"Mobile\",\n   },\n   january: {\n      label: \"January\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   february: {\n      label: \"February\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   march: {\n      label: \"March\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   april: {\n      label: \"April\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   may: {\n      label: \"May\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Stacked</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           labelKey=\"visitors\"\n                           nameKey=\"month\"\n                           indicator=\"line\"\n                           labelFormatter={(_, payload) => {\n                              return chartConfig[\n                                 payload?.[0]\n                                    .dataKey as keyof typeof chartConfig\n                              ].label\n                           }}\n                        />\n                     }\n                  />\n                  <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n                  <Pie\n                     data={mobileData}\n                     dataKey=\"mobile\"\n                     innerRadius={70}\n                     outerRadius={90}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-default.json b/apps/web/public/v0/styles/default/chart-radar-default.json
new file mode 100644
index 00000000..c61ad43d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-default",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-dots.json b/apps/web/public/v0/styles/default/chart-radar-dots.json
new file mode 100644
index 00000000..c9b5f5a9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-dots.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-dots",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center\">\n            <CardTitle>Radar Chart - Dots</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-grid-circle-fill.json b/apps/web/public/v0/styles/default/chart-radar-grid-circle-fill.json
new file mode 100644
index 00000000..3ee7faaf
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-grid-circle-fill.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-grid-circle-fill",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-circle-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 285 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 203 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <PolarGrid\n                     className=\"fill-[--color-desktop] opacity-20\"\n                     gridType=\"circle\"\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.5}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-grid-circle-no-lines.json b/apps/web/public/v0/styles/default/chart-radar-grid-circle-no-lines.json
new file mode 100644
index 00000000..94bbf514
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-grid-circle-no-lines.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-grid-circle-no-lines",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-circle-no-lines.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 203 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid gridType=\"circle\" radialLines={false} />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-grid-circle.json b/apps/web/public/v0/styles/default/chart-radar-grid-circle.json
new file mode 100644
index 00000000..b31b1a77
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-grid-circle.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-grid-circle",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-circle.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid gridType=\"circle\" />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-grid-custom.json b/apps/web/public/v0/styles/default/chart-radar-grid-custom.json
new file mode 100644
index 00000000..8e441013
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-grid-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-grid-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Custom</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid\n                     radialLines={false}\n                     polarRadius={[90]}\n                     strokeWidth={1}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-grid-fill.json b/apps/web/public/v0/styles/default/chart-radar-grid-fill.json
new file mode 100644
index 00000000..ca2abbf0
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-grid-fill.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-grid-fill",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 285 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 203 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Filled</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.5}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-grid-none.json b/apps/web/public/v0/styles/default/chart-radar-grid-none.json
new file mode 100644
index 00000000..586dd9b5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-grid-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-grid-none",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid None</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-icons.json b/apps/web/public/v0/styles/default/chart-radar-icons.json
new file mode 100644
index 00000000..14934ee3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-icons.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-icons",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-icons.tsx",
+      "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n      icon: ArrowDownFromLine,\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n      icon: ArrowUpFromLine,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Icons</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: -40,\n                     bottom: -10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <ChartLegend\n                     className=\"mt-8\"\n                     content={<ChartLegendContent />}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-label-custom.json b/apps/web/public/v0/styles/default/chart-radar-label-custom.json
new file mode 100644
index 00000000..745e97e0
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-label-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Custom Label</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: 10,\n                     right: 10,\n                     bottom: 10,\n                     left: 10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis\n                     dataKey=\"month\"\n                     tick={({ x, y, textAnchor, value, index, ...props }) => {\n                        const data = chartData[index]\n\n                        return (\n                           <text\n                              x={x}\n                              y={index === 0 ? y - 10 : y}\n                              textAnchor={textAnchor}\n                              fontSize={13}\n                              fontWeight={500}\n                              {...props}\n                           >\n                              <tspan>{data.desktop}</tspan>\n                              <tspan className=\"fill-muted-foreground\">/</tspan>\n                              <tspan>{data.mobile}</tspan>\n                              <tspan\n                                 x={x}\n                                 dy={\"1rem\"}\n                                 fontSize={12}\n                                 className=\"fill-muted-foreground\"\n                              >\n                                 {data.month}\n                              </tspan>\n                           </text>\n                        )\n                     }}\n                  />\n\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-legend.json b/apps/web/public/v0/styles/default/chart-radar-legend.json
new file mode 100644
index 00000000..37f0e831
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-legend.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-legend",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Legend</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: -40,\n                     bottom: -10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <ChartLegend\n                     className=\"mt-8\"\n                     content={<ChartLegendContent />}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-lines-only.json b/apps/web/public/v0/styles/default/chart-radar-lines-only.json
new file mode 100644
index 00000000..15228008
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-lines-only.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-lines-only",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-lines-only.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 160 },\n   { month: \"February\", desktop: 185, mobile: 170 },\n   { month: \"March\", desktop: 207, mobile: 180 },\n   { month: \"April\", desktop: 173, mobile: 160 },\n   { month: \"May\", desktop: 160, mobile: 190 },\n   { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Lines Only</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid radialLines={false} />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0}\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                  />\n                  <Radar\n                     dataKey=\"mobile\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0}\n                     stroke=\"var(--color-mobile)\"\n                     strokeWidth={2}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-multiple.json b/apps/web/public/v0/styles/default/chart-radar-multiple.json
new file mode 100644
index 00000000..edfe0e5f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-multiple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-multiple",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Multiple</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radar-radius.json b/apps/web/public/v0/styles/default/chart-radar-radius.json
new file mode 100644
index 00000000..59b80809
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radar-radius.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-radius",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-radius.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n   PolarAngleAxis,\n   PolarGrid,\n   PolarRadiusAxis,\n   Radar,\n   RadarChart,\n} from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Radius Axis</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           labelKey=\"month\"\n                        />\n                     }\n                  />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <PolarRadiusAxis\n                     angle={60}\n                     stroke=\"hsla(var(--foreground))\"\n                     orientation=\"middle\"\n                     axisLine={false}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radial-grid.json b/apps/web/public/v0/styles/default/chart-radial-grid.json
new file mode 100644
index 00000000..e6417b55
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radial-grid.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radial-grid",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-grid.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Grid</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  innerRadius={30}\n                  outerRadius={100}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent hideLabel nameKey=\"browser\" />\n                     }\n                  />\n                  <PolarGrid gridType=\"circle\" />\n                  <RadialBar dataKey=\"visitors\" />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radial-label.json b/apps/web/public/v0/styles/default/chart-radial-label.json
new file mode 100644
index 00000000..9a4325a6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radial-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radial-label",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  startAngle={-90}\n                  endAngle={380}\n                  innerRadius={30}\n                  outerRadius={110}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent hideLabel nameKey=\"browser\" />\n                     }\n                  />\n                  <RadialBar dataKey=\"visitors\" background>\n                     <LabelList\n                        position=\"insideStart\"\n                        dataKey=\"browser\"\n                        className=\"fill-white capitalize mix-blend-luminosity\"\n                        fontSize={11}\n                     />\n                  </RadialBar>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radial-shape.json b/apps/web/public/v0/styles/default/chart-radial-shape.json
new file mode 100644
index 00000000..0b33a01e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radial-shape.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radial-shape",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-shape.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n   Label,\n   PolarGrid,\n   PolarRadiusAxis,\n   RadialBar,\n   RadialBarChart,\n} from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { type ChartConfig, ChartContainer } from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Shape</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  endAngle={100}\n                  innerRadius={80}\n                  outerRadius={140}\n               >\n                  <PolarGrid\n                     gridType=\"circle\"\n                     radialLines={false}\n                     stroke=\"none\"\n                     className=\"first:fill-muted last:fill-background\"\n                     polarRadius={[86, 74]}\n                  />\n                  <RadialBar dataKey=\"visitors\" background />\n                  <PolarRadiusAxis\n                     tick={false}\n                     tickLine={false}\n                     axisLine={false}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-4xl font-bold\"\n                                    >\n                                       {chartData[0].visitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radial-simple.json b/apps/web/public/v0/styles/default/chart-radial-simple.json
new file mode 100644
index 00000000..7ba4d2bb
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radial-simple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radial-simple",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  innerRadius={30}\n                  outerRadius={110}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent hideLabel nameKey=\"browser\" />\n                     }\n                  />\n                  <RadialBar dataKey=\"visitors\" background />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radial-stacked.json b/apps/web/public/v0/styles/default/chart-radial-stacked.json
new file mode 100644
index 00000000..e6eee194
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radial-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radial-stacked",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Stacked</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex flex-1 items-center pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square w-full max-w-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  endAngle={180}\n                  innerRadius={80}\n                  outerRadius={130}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarRadiusAxis\n                     tick={false}\n                     tickLine={false}\n                     axisLine={false}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) - 16}\n                                       className=\"fill-foreground text-2xl font-bold\"\n                                    >\n                                       {totalVisitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 4}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n                  <RadialBar\n                     dataKey=\"desktop\"\n                     stackId=\"a\"\n                     cornerRadius={5}\n                     fill=\"var(--color-desktop)\"\n                     className=\"stroke-transparent stroke-2\"\n                  />\n                  <RadialBar\n                     dataKey=\"mobile\"\n                     fill=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                     cornerRadius={5}\n                     className=\"stroke-transparent stroke-2\"\n                  />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-radial-text.json b/apps/web/public/v0/styles/default/chart-radial-text.json
new file mode 100644
index 00000000..eec9ece1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-radial-text.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radial-text",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-text.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n   Label,\n   PolarGrid,\n   PolarRadiusAxis,\n   RadialBar,\n   RadialBarChart,\n} from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { type ChartConfig, ChartContainer } from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Text</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  startAngle={0}\n                  endAngle={250}\n                  innerRadius={80}\n                  outerRadius={110}\n               >\n                  <PolarGrid\n                     gridType=\"circle\"\n                     radialLines={false}\n                     stroke=\"none\"\n                     className=\"first:fill-muted last:fill-background\"\n                     polarRadius={[86, 74]}\n                  />\n                  <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n                  <PolarRadiusAxis\n                     tick={false}\n                     tickLine={false}\n                     axisLine={false}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-4xl font-bold\"\n                                    >\n                                       {chartData[0].visitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-tooltip-advanced.json b/apps/web/public/v0/styles/default/chart-tooltip-advanced.json
new file mode 100644
index 00000000..6d901df4
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-tooltip-advanced.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-advanced",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-advanced.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Advanced</CardTitle>\n            <CardDescription>\n               Tooltip with custom formatter and total.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           hideLabel\n                           className=\"w-[180px]\"\n                           formatter={(value, name, item, index) => (\n                              <>\n                                 <div\n                                    className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n                                    style={\n                                       {\n                                          \"--color-bg\": `var(--color-${name})`,\n                                       } as React.CSSProperties\n                                    }\n                                 />\n                                 {chartConfig[name as keyof typeof chartConfig]\n                                    ?.label || name}\n                                 <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                                    {value}\n                                    <span className=\"font-normal text-muted-foreground\">\n                                       kcal\n                                    </span>\n                                 </div>\n                                 {/* Add this after the last item */}\n                                 {index === 1 && (\n                                    <div className=\"mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground\">\n                                       Total\n                                       <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                                          {item.payload.running +\n                                             item.payload.swimming}\n                                          <span className=\"font-normal text-muted-foreground\">\n                                             kcal\n                                          </span>\n                                       </div>\n                                    </div>\n                                 )}\n                              </>\n                           )}\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-tooltip-default.json b/apps/web/public/v0/styles/default/chart-tooltip-default.json
new file mode 100644
index 00000000..543d98be
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-tooltip-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-default",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-default.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Default</CardTitle>\n            <CardDescription>\n               Default tooltip with ChartTooltipContent.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-tooltip-formatter.json b/apps/web/public/v0/styles/default/chart-tooltip-formatter.json
new file mode 100644
index 00000000..ad04ef01
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-tooltip-formatter.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-formatter",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Formatter</CardTitle>\n            <CardDescription>Tooltip with custom formatter .</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           hideLabel\n                           formatter={(value, name) => (\n                              <div className=\"flex min-w-[130px] items-center text-xs text-muted-foreground\">\n                                 {chartConfig[name as keyof typeof chartConfig]\n                                    ?.label || name}\n                                 <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                                    {value}\n                                    <span className=\"font-normal text-muted-foreground\">\n                                       kcal\n                                    </span>\n                                 </div>\n                              </div>\n                           )}\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-tooltip-icons.json b/apps/web/public/v0/styles/default/chart-tooltip-icons.json
new file mode 100644
index 00000000..d34f98e1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-tooltip-icons.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-icons",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-icons.tsx",
+      "content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n      icon: Footprints,\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n      icon: Waves,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Icons</CardTitle>\n            <CardDescription>Tooltip with icons.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideLabel />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-tooltip-indicator-line.json b/apps/web/public/v0/styles/default/chart-tooltip-indicator-line.json
new file mode 100644
index 00000000..f7f2ad6b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-tooltip-indicator-line.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-indicator-line",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-indicator-line.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Line Indicator</CardTitle>\n            <CardDescription>Tooltip with line indicator.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-tooltip-indicator-none.json b/apps/web/public/v0/styles/default/chart-tooltip-indicator-none.json
new file mode 100644
index 00000000..f6f5bb5f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-tooltip-indicator-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-indicator-none",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-indicator-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - No Indicator</CardTitle>\n            <CardDescription>Tooltip with no indicator.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideIndicator />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-tooltip-label-custom.json b/apps/web/public/v0/styles/default/chart-tooltip-label-custom.json
new file mode 100644
index 00000000..3d501e80
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-tooltip-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-label-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   activities: {\n      label: \"Activities\",\n   },\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Custom label</CardTitle>\n            <CardDescription>\n               Tooltip with custom label from chartConfig.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           labelKey=\"activities\"\n                           indicator=\"line\"\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-tooltip-label-formatter.json b/apps/web/public/v0/styles/default/chart-tooltip-label-formatter.json
new file mode 100644
index 00000000..6045c9f3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-tooltip-label-formatter.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-label-formatter",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-label-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Label Formatter</CardTitle>\n            <CardDescription>Tooltip with label formatter.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    day: \"numeric\",\n                                    month: \"long\",\n                                    year: \"numeric\",\n                                 },\n                              )\n                           }}\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart-tooltip-label-none.json b/apps/web/public/v0/styles/default/chart-tooltip-label-none.json
new file mode 100644
index 00000000..3c6a7f69
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart-tooltip-label-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-label-none",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-label-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - No Label</CardTitle>\n            <CardDescription>Tooltip with no label.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideIndicator hideLabel />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/chart.json b/apps/web/public/v0/styles/default/chart.json
new file mode 100644
index 00000000..2217a7e0
--- /dev/null
+++ b/apps/web/public/v0/styles/default/chart.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "recharts",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "card"
+  ],
+  "files": [
+    {
+      "path": "ui/chart.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n   [k in string]: {\n      label?: React.ReactNode\n      icon?: React.ComponentType\n   } & (\n      | { color?: string; theme?: never }\n      | { color?: never; theme: Record<keyof typeof THEMES, string> }\n   )\n}\n\ninterface ChartContextProps {\n   config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n   const context = React.useContext(ChartContext)\n\n   if (!context) {\n      throw new Error(\"useChart must be used within a <ChartContainer />\")\n   }\n\n   return context\n}\n\nconst ChartContainer = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      config: ChartConfig\n      children: React.ComponentProps<\n         typeof RechartsPrimitive.ResponsiveContainer\n      >[\"children\"]\n   }\n>(({ id, className, children, config, ...props }, ref) => {\n   const uniqueId = React.useId()\n   const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n   return (\n      <ChartContext.Provider value={{ config }}>\n         <div\n            data-chart={chartId}\n            ref={ref}\n            className={cn(\n               \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n               className,\n            )}\n            {...props}\n         >\n            <ChartStyle id={chartId} config={config} />\n            <RechartsPrimitive.ResponsiveContainer>\n               {children}\n            </RechartsPrimitive.ResponsiveContainer>\n         </div>\n      </ChartContext.Provider>\n   )\n})\nChartContainer.displayName = \"Chart\"\n\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n   const colorConfig = Object.entries(config).filter(\n      ([_, config]) => config.theme || config.color,\n   )\n\n   if (!colorConfig.length) {\n      return null\n   }\n\n   return (\n      <style\n         dangerouslySetInnerHTML={{\n            __html: Object.entries(THEMES).map(\n               ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n   .map(([key, itemConfig]) => {\n      const color =\n         itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n         itemConfig.color\n      return color ? `  --color-${key}: ${color};` : null\n   })\n   .join(\"\\n\")}\n}\n`,\n            ),\n         }}\n      />\n   )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n      React.ComponentProps<\"div\"> & {\n         hideLabel?: boolean\n         hideIndicator?: boolean\n         indicator?: \"line\" | \"dot\" | \"dashed\"\n         nameKey?: string\n         labelKey?: string\n      }\n>(\n   (\n      {\n         active,\n         payload,\n         className,\n         indicator = \"dot\",\n         hideLabel = false,\n         hideIndicator = false,\n         label,\n         labelFormatter,\n         labelClassName,\n         formatter,\n         color,\n         nameKey,\n         labelKey,\n      },\n      ref,\n   ) => {\n      const { config } = useChart()\n\n      const tooltipLabel = React.useMemo(() => {\n         if (hideLabel || !payload?.length) {\n            return null\n         }\n\n         const [item] = payload\n         const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n         const itemConfig = getPayloadConfigFromPayload(config, item, key)\n         const value =\n            !labelKey && typeof label === \"string\"\n               ? config[label as keyof typeof config]?.label || label\n               : itemConfig?.label\n\n         if (labelFormatter) {\n            return (\n               <div className={cn(\"font-medium\", labelClassName)}>\n                  {labelFormatter(value, payload)}\n               </div>\n            )\n         }\n\n         if (!value) {\n            return null\n         }\n\n         return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n      }, [\n         label,\n         labelFormatter,\n         payload,\n         hideLabel,\n         labelClassName,\n         config,\n         labelKey,\n      ])\n\n      if (!active || !payload?.length) {\n         return null\n      }\n\n      const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n      return (\n         <div\n            ref={ref}\n            className={cn(\n               \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n               className,\n            )}\n         >\n            {!nestLabel ? tooltipLabel : null}\n            <div className=\"grid gap-1.5\">\n               {payload.map((item, index) => {\n                  const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n                  const itemConfig = getPayloadConfigFromPayload(\n                     config,\n                     item,\n                     key,\n                  )\n                  const indicatorColor =\n                     color || item.payload.fill || item.color\n\n                  return (\n                     <div\n                        key={item.dataKey}\n                        className={cn(\n                           \"[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5\",\n                           indicator === \"dot\" && \"items-center\",\n                        )}\n                     >\n                        {formatter && item.value && item.name ? (\n                           formatter(\n                              item.value,\n                              item.name,\n                              item,\n                              index,\n                              item.payload,\n                           )\n                        ) : (\n                           <>\n                              {itemConfig?.icon ? (\n                                 <itemConfig.icon />\n                              ) : (\n                                 !hideIndicator && (\n                                    <div\n                                       className={cn(\n                                          \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                                          {\n                                             \"h-2.5 w-2.5\": indicator === \"dot\",\n                                             \"w-1\": indicator === \"line\",\n                                             \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                                indicator === \"dashed\",\n                                             \"my-0.5\":\n                                                nestLabel &&\n                                                indicator === \"dashed\",\n                                          },\n                                       )}\n                                       style={\n                                          {\n                                             \"--color-bg\": indicatorColor,\n                                             \"--color-border\": indicatorColor,\n                                          } as React.CSSProperties\n                                       }\n                                    />\n                                 )\n                              )}\n                              <div\n                                 className={cn(\n                                    \"flex flex-1 justify-between leading-none\",\n                                    nestLabel ? \"items-end\" : \"items-center\",\n                                 )}\n                              >\n                                 <div className=\"grid gap-1.5\">\n                                    {nestLabel ? tooltipLabel : null}\n                                    <span className=\"text-muted-foreground\">\n                                       {itemConfig?.label || item.name}\n                                    </span>\n                                 </div>\n                                 {item.value !== undefined && (\n                                    <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                                       {item.value.toLocaleString()}\n                                    </span>\n                                 )}\n                              </div>\n                           </>\n                        )}\n                     </div>\n                  )\n               })}\n            </div>\n         </div>\n      )\n   },\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> &\n      Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n         hideIcon?: boolean\n         nameKey?: string\n      }\n>(\n   (\n      {\n         className,\n         hideIcon = false,\n         payload,\n         verticalAlign = \"bottom\",\n         nameKey,\n      },\n      ref,\n   ) => {\n      const { config } = useChart()\n\n      if (!payload?.length) {\n         return null\n      }\n\n      return (\n         <div\n            ref={ref}\n            className={cn(\n               \"flex items-center justify-center gap-4\",\n               verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n               className,\n            )}\n         >\n            {payload.map((item) => {\n               const key = `${nameKey || item.dataKey || \"value\"}`\n               const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n               return (\n                  <div\n                     key={item.value}\n                     className={cn(\n                        \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3\",\n                     )}\n                  >\n                     {itemConfig?.icon && !hideIcon ? (\n                        <itemConfig.icon />\n                     ) : (\n                        <div\n                           className=\"size-2 shrink-0 rounded-[2px]\"\n                           style={{\n                              backgroundColor: item.color,\n                           }}\n                        />\n                     )}\n                     {itemConfig?.label}\n                  </div>\n               )\n            })}\n         </div>\n      )\n   },\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n   config: ChartConfig,\n   payload: unknown,\n   key: string,\n) {\n   if (typeof payload !== \"object\" || payload === null) {\n      return undefined\n   }\n\n   const payloadPayload =\n      \"payload\" in payload &&\n      typeof payload.payload === \"object\" &&\n      payload.payload !== null\n         ? payload.payload\n         : undefined\n\n   let configLabelKey: string = key\n\n   if (\n      key in payload &&\n      typeof payload[key as keyof typeof payload] === \"string\"\n   ) {\n      configLabelKey = payload[key as keyof typeof payload] as string\n   } else if (\n      payloadPayload &&\n      key in payloadPayload &&\n      typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n   ) {\n      configLabelKey = payloadPayload[\n         key as keyof typeof payloadPayload\n      ] as string\n   }\n\n   return configLabelKey in config\n      ? config[configLabelKey]\n      : config[key as keyof typeof config]\n}\n\nexport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n   ChartLegend,\n   ChartLegendContent,\n   ChartStyle,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/checkbox-demo.json b/apps/web/public/v0/styles/default/checkbox-demo.json
new file mode 100644
index 00000000..95979764
--- /dev/null
+++ b/apps/web/public/v0/styles/default/checkbox-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "checkbox-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/components/ui/checkbox\"\n\nexport default function CheckboxDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms\" />\n         <label\n            htmlFor=\"terms\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/checkbox-disabled.json b/apps/web/public/v0/styles/default/checkbox-disabled.json
new file mode 100644
index 00000000..1079c9dd
--- /dev/null
+++ b/apps/web/public/v0/styles/default/checkbox-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "checkbox-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-disabled.tsx",
+      "content": "import { Checkbox } from \"@/components/ui/checkbox\"\n\nexport default function CheckboxDisabled() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms2\" disabled />\n         <label\n            htmlFor=\"terms2\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/checkbox-form-multiple.json b/apps/web/public/v0/styles/default/checkbox-form-multiple.json
new file mode 100644
index 00000000..ef4c1620
--- /dev/null
+++ b/apps/web/public/v0/styles/default/checkbox-form-multiple.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "checkbox-form-multiple",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-form-multiple.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst items = [\n   {\n      id: \"recents\",\n      label: \"Recents\",\n   },\n   {\n      id: \"home\",\n      label: \"Home\",\n   },\n   {\n      id: \"applications\",\n      label: \"Applications\",\n   },\n   {\n      id: \"desktop\",\n      label: \"Desktop\",\n   },\n   {\n      id: \"downloads\",\n      label: \"Downloads\",\n   },\n   {\n      id: \"documents\",\n      label: \"Documents\",\n   },\n] as const\n\nconst FormSchema = z.object({\n   items: z.array(z.string()).refine((value) => value.some((item) => item), {\n      message: \"You have to select at least one item.\",\n   }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         items: [\"recents\", \"home\"],\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"items\"\n               render={() => (\n                  <FormItem>\n                     <div className=\"mb-4\">\n                        <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                        <FormDescription>\n                           Select the items you want to display in the sidebar.\n                        </FormDescription>\n                     </div>\n                     {items.map((item) => (\n                        <FormField\n                           key={item.id}\n                           control={form.control}\n                           name=\"items\"\n                           render={({ field }) => {\n                              return (\n                                 <FormItem\n                                    key={item.id}\n                                    className=\"flex flex-row items-start space-x-3 space-y-0\"\n                                 >\n                                    <FormControl>\n                                       <Checkbox\n                                          checked={field.value?.includes(\n                                             item.id,\n                                          )}\n                                          onCheckedChange={(checked) => {\n                                             return checked\n                                                ? field.onChange([\n                                                     ...field.value,\n                                                     item.id,\n                                                  ])\n                                                : field.onChange(\n                                                     field.value?.filter(\n                                                        (value) =>\n                                                           value !== item.id,\n                                                     ),\n                                                  )\n                                          }}\n                                       />\n                                    </FormControl>\n                                    <FormLabel className=\"font-normal\">\n                                       {item.label}\n                                    </FormLabel>\n                                 </FormItem>\n                              )\n                           }}\n                        />\n                     ))}\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/checkbox-form-single.json b/apps/web/public/v0/styles/default/checkbox-form-single.json
new file mode 100644
index 00000000..af1abf1c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/checkbox-form-single.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "checkbox-form-single",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-form-single.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport Link from \"next/link\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n} from \"@/components/ui/form\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   mobile: z.boolean().default(false).optional(),\n})\n\nexport default function CheckboxReactHookFormSingle() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         mobile: true,\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"mobile\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4\">\n                     <FormControl>\n                        <Checkbox\n                           checked={field.value}\n                           onCheckedChange={field.onChange}\n                        />\n                     </FormControl>\n                     <div className=\"space-y-1 leading-none\">\n                        <FormLabel>\n                           Use different settings for my mobile devices\n                        </FormLabel>\n                        <FormDescription>\n                           You can manage your mobile notifications in the{\" \"}\n                           <Link href=\"/examples/forms\">mobile settings</Link>{\" \"}\n                           page.\n                        </FormDescription>\n                     </div>\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/checkbox-with-text.json b/apps/web/public/v0/styles/default/checkbox-with-text.json
new file mode 100644
index 00000000..3209f281
--- /dev/null
+++ b/apps/web/public/v0/styles/default/checkbox-with-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "checkbox-with-text",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-with-text.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/components/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n   return (\n      <div className=\"items-top flex space-x-2\">\n         <Checkbox id=\"terms1\" />\n         <div className=\"grid gap-1.5 leading-none\">\n            <label\n               htmlFor=\"terms1\"\n               className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n            >\n               Accept terms and conditions\n            </label>\n            <p className=\"text-muted-foreground text-sm\">\n               You agree to our Terms of Service and Privacy Policy.\n            </p>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/checkbox.json b/apps/web/public/v0/styles/default/checkbox.json
new file mode 100644
index 00000000..f5bcc9e0
--- /dev/null
+++ b/apps/web/public/v0/styles/default/checkbox.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "checkbox",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-checkbox"
+  ],
+  "files": [
+    {
+      "path": "ui/checkbox.tsx",
+      "content": "\"use client\"\n\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n   React.ElementRef<typeof CheckboxPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n         \"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <CheckboxPrimitive.Indicator\n         className={cn(\"flex items-center justify-center text-current\")}\n      >\n         <Check className=\"size-4\" />\n      </CheckboxPrimitive.Indicator>\n   </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/client-tweet-card.json b/apps/web/public/v0/styles/default/client-tweet-card.json
new file mode 100644
index 00000000..6e892b26
--- /dev/null
+++ b/apps/web/public/v0/styles/default/client-tweet-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "client-tweet-card",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "react-tweet"
+  ],
+  "files": [
+    {
+      "path": "ui/client-tweet-card.tsx",
+      "content": "\"use client\"\n\nimport type { TweetProps } from \"react-tweet\"\nimport { useTweet } from \"react-tweet\"\nimport {\n   MagicTweet,\n   TweetNotFound,\n   TweetSkeleton,\n} from \"@/components/ui/tweet-card\"\n\nfunction ClientTweetCard({\n   id,\n   apiUrl,\n   fallback = <TweetSkeleton />,\n   components,\n   fetchOptions,\n   onError,\n   ...props\n}: TweetProps & { className?: string }) {\n   const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions)\n\n   if (isLoading) return fallback\n   if (error || !data) {\n      const NotFound = components?.TweetNotFound || TweetNotFound\n      return <NotFound error={onError ? onError(error) : error} />\n   }\n\n   return <MagicTweet tweet={data} components={components} {...props} />\n}\n\nexport default ClientTweetCard\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/collapsible-demo.json b/apps/web/public/v0/styles/default/collapsible-demo.json
new file mode 100644
index 00000000..e4cf52e8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/collapsible-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "collapsible-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "examples/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   return (\n      <Collapsible\n         open={isOpen}\n         onOpenChange={setIsOpen}\n         className=\"w-[350px] space-y-2\"\n      >\n         <div className=\"flex items-center justify-between space-x-4 px-4\">\n            <h4 className=\"text-sm font-semibold\">\n               @peduarte starred 3 repositories\n            </h4>\n            <CollapsibleTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n                  <ChevronsUpDown className=\"size-4\" />\n                  <span className=\"sr-only\">Toggle</span>\n               </Button>\n            </CollapsibleTrigger>\n         </div>\n         <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n            @radix-ui/primitives\n         </div>\n         <CollapsibleContent className=\"space-y-2\">\n            <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n               @radix-ui/colors\n            </div>\n            <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n               @stitches/react\n            </div>\n         </CollapsibleContent>\n      </Collapsible>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/collapsible.json b/apps/web/public/v0/styles/default/collapsible.json
new file mode 100644
index 00000000..9bbe7f98
--- /dev/null
+++ b/apps/web/public/v0/styles/default/collapsible.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "collapsible",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-collapsible"
+  ],
+  "files": [
+    {
+      "path": "ui/collapsible.tsx",
+      "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/combobox-demo.json b/apps/web/public/v0/styles/default/combobox-demo.json
new file mode 100644
index 00000000..ed5f60d2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/combobox-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "combobox-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nconst frameworks = [\n   {\n      value: \"next.js\",\n      label: \"Next.js\",\n   },\n   {\n      value: \"sveltekit\",\n      label: \"SvelteKit\",\n   },\n   {\n      value: \"nuxt.js\",\n      label: \"Nuxt.js\",\n   },\n   {\n      value: \"remix\",\n      label: \"Remix\",\n   },\n   {\n      value: \"astro\",\n      label: \"Astro\",\n   },\n]\n\nexport default function ComboboxDemo() {\n   const [open, setOpen] = React.useState(false)\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <Popover open={open} onOpenChange={setOpen}>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               role=\"combobox\"\n               aria-expanded={open}\n               className=\"w-[200px] justify-between\"\n            >\n               {value\n                  ? frameworks.find((framework) => framework.value === value)\n                       ?.label\n                  : \"Select framework...\"}\n               <ChevronsUpDown className=\"opacity-50\" />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[200px] p-0\">\n            <Command>\n               <CommandInput placeholder=\"Search framework...\" />\n               <CommandList>\n                  <CommandEmpty>No framework found.</CommandEmpty>\n                  <CommandGroup>\n                     {frameworks.map((framework) => (\n                        <CommandItem\n                           key={framework.value}\n                           value={framework.value}\n                           onSelect={(currentValue) => {\n                              setValue(\n                                 currentValue === value ? \"\" : currentValue,\n                              )\n                              setOpen(false)\n                           }}\n                        >\n                           {framework.label}\n                           <Check\n                              className={cn(\n                                 \"ml-auto\",\n                                 value === framework.value\n                                    ? \"opacity-100\"\n                                    : \"opacity-0\",\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/combobox-dropdown-menu.json b/apps/web/public/v0/styles/default/combobox-dropdown-menu.json
new file mode 100644
index 00000000..7e8399e5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/combobox-dropdown-menu.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "combobox-dropdown-menu",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "command",
+    "dropdown-menu",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport { Calendar, MoreHorizontal, Tags, Trash, User } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nconst labels = [\n   \"feature\",\n   \"bug\",\n   \"enhancement\",\n   \"documentation\",\n   \"design\",\n   \"question\",\n   \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n   const [label, setLabel] = React.useState(\"feature\")\n   const [open, setOpen] = React.useState(false)\n\n   return (\n      <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n         <p className=\"text-sm font-medium leading-none\">\n            <span className=\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\">\n               {label}\n            </span>\n            <span className=\"text-muted-foreground\">Create a new project</span>\n         </p>\n         <DropdownMenu open={open} onOpenChange={setOpen}>\n            <DropdownMenuTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <MoreHorizontal />\n               </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n               <DropdownMenuLabel>Actions</DropdownMenuLabel>\n               <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                     <User />\n                     Assign to...\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                     <Calendar />\n                     Set due date...\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuSub>\n                     <DropdownMenuSubTrigger>\n                        <Tags />\n                        Apply label\n                     </DropdownMenuSubTrigger>\n                     <DropdownMenuSubContent className=\"p-0\">\n                        <Command>\n                           <CommandInput\n                              placeholder=\"Filter label...\"\n                              autoFocus\n                           />\n                           <CommandList>\n                              <CommandEmpty>No label found.</CommandEmpty>\n                              <CommandGroup>\n                                 {labels.map((label) => (\n                                    <CommandItem\n                                       key={label}\n                                       value={label}\n                                       onSelect={(value) => {\n                                          setLabel(value)\n                                          setOpen(false)\n                                       }}\n                                    >\n                                       {label}\n                                    </CommandItem>\n                                 ))}\n                              </CommandGroup>\n                           </CommandList>\n                        </Command>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"text-red-600\">\n                     <Trash />\n                     Delete\n                     <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n               </DropdownMenuGroup>\n            </DropdownMenuContent>\n         </DropdownMenu>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/combobox-form.json b/apps/web/public/v0/styles/default/combobox-form.json
new file mode 100644
index 00000000..90167228
--- /dev/null
+++ b/apps/web/public/v0/styles/default/combobox-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "combobox-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "command",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/hooks/use-toast\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nconst languages = [\n   { label: \"English\", value: \"en\" },\n   { label: \"French\", value: \"fr\" },\n   { label: \"German\", value: \"de\" },\n   { label: \"Spanish\", value: \"es\" },\n   { label: \"Portuguese\", value: \"pt\" },\n   { label: \"Russian\", value: \"ru\" },\n   { label: \"Japanese\", value: \"ja\" },\n   { label: \"Korean\", value: \"ko\" },\n   { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n   language: z.string({\n      required_error: \"Please select a language.\",\n   }),\n})\n\nexport default function ComboboxForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"language\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Language</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 role=\"combobox\"\n                                 className={cn(\n                                    \"w-[200px] justify-between\",\n                                    !field.value && \"text-muted-foreground\",\n                                 )}\n                              >\n                                 {field.value\n                                    ? languages.find(\n                                         (language) =>\n                                            language.value === field.value,\n                                      )?.label\n                                    : \"Select language\"}\n                                 <ChevronsUpDown className=\"ml-2 size-4 shrink-0 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-[200px] p-0\">\n                           <Command>\n                              <CommandInput placeholder=\"Search language...\" />\n                              <CommandList>\n                                 <CommandEmpty>No language found.</CommandEmpty>\n                                 <CommandGroup>\n                                    {languages.map((language) => (\n                                       <CommandItem\n                                          value={language.label}\n                                          key={language.value}\n                                          onSelect={() => {\n                                             form.setValue(\n                                                \"language\",\n                                                language.value,\n                                             )\n                                          }}\n                                       >\n                                          {language.label}\n                                          <Check\n                                             className={cn(\n                                                \"ml-auto\",\n                                                language.value === field.value\n                                                   ? \"opacity-100\"\n                                                   : \"opacity-0\",\n                                             )}\n                                          />\n                                       </CommandItem>\n                                    ))}\n                                 </CommandGroup>\n                              </CommandList>\n                           </Command>\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        This is the language that will be used in the dashboard.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/combobox-popover.json b/apps/web/public/v0/styles/default/combobox-popover.json
new file mode 100644
index 00000000..5b78993f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/combobox-popover.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "combobox-popover",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "combobox",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-popover.tsx",
+      "content": "\"use client\"\n\nimport type { LucideIcon } from \"lucide-react\"\nimport {\n   ArrowUpCircle,\n   CheckCircle2,\n   Circle,\n   HelpCircle,\n   XCircle,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\ninterface Status {\n   value: string\n   label: string\n   icon: LucideIcon\n}\n\nconst statuses: Status[] = [\n   {\n      value: \"backlog\",\n      label: \"Backlog\",\n      icon: HelpCircle,\n   },\n   {\n      value: \"todo\",\n      label: \"Todo\",\n      icon: Circle,\n   },\n   {\n      value: \"in progress\",\n      label: \"In Progress\",\n      icon: ArrowUpCircle,\n   },\n   {\n      value: \"done\",\n      label: \"Done\",\n      icon: CheckCircle2,\n   },\n   {\n      value: \"canceled\",\n      label: \"Canceled\",\n      icon: XCircle,\n   },\n]\n\nexport default function ComboboxPopover() {\n   const [open, setOpen] = React.useState(false)\n   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n      null,\n   )\n\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <p className=\"text-muted-foreground text-sm\">Status</p>\n         <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"w-[150px] justify-start\"\n               >\n                  {selectedStatus ? (\n                     <>\n                        <selectedStatus.icon className=\"mr-2 size-4 shrink-0\" />\n                        {selectedStatus.label}\n                     </>\n                  ) : (\n                     <>+ Set status</>\n                  )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n               <Command>\n                  <CommandInput placeholder=\"Change status...\" />\n                  <CommandList>\n                     <CommandEmpty>No results found.</CommandEmpty>\n                     <CommandGroup>\n                        {statuses.map((status) => (\n                           <CommandItem\n                              key={status.value}\n                              value={status.value}\n                              onSelect={(value) => {\n                                 setSelectedStatus(\n                                    statuses.find(\n                                       (priority) => priority.value === value,\n                                    ) || null,\n                                 )\n                                 setOpen(false)\n                              }}\n                           >\n                              <status.icon\n                                 className={cn(\n                                    \"mr-2 size-4\",\n                                    status.value === selectedStatus?.value\n                                       ? \"opacity-100\"\n                                       : \"opacity-40\",\n                                 )}\n                              />\n                              <span>{status.label}</span>\n                           </CommandItem>\n                        ))}\n                     </CommandGroup>\n                  </CommandList>\n               </Command>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/combobox-responsive.json b/apps/web/public/v0/styles/default/combobox-responsive.json
new file mode 100644
index 00000000..c5681f23
--- /dev/null
+++ b/apps/web/public/v0/styles/default/combobox-responsive.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "combobox-responsive",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "combobox",
+    "popover",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport {\n   Drawer,\n   DrawerContent,\n   DrawerTrigger,\n} from \"@/components/ui/drawer\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\ninterface Status {\n   value: string\n   label: string\n}\n\nconst statuses: Status[] = [\n   {\n      value: \"backlog\",\n      label: \"Backlog\",\n   },\n   {\n      value: \"todo\",\n      label: \"Todo\",\n   },\n   {\n      value: \"in progress\",\n      label: \"In Progress\",\n   },\n   {\n      value: \"done\",\n      label: \"Done\",\n   },\n   {\n      value: \"canceled\",\n      label: \"Canceled\",\n   },\n]\n\nexport default function ComboBoxResponsive() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n      null,\n   )\n\n   if (isDesktop) {\n      return (\n         <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n               <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n                  {selectedStatus ? (\n                     <>{selectedStatus.label}</>\n                  ) : (\n                     <>+ Set status</>\n                  )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n               <StatusList\n                  setOpen={setOpen}\n                  setSelectedStatus={setSelectedStatus}\n               />\n            </PopoverContent>\n         </Popover>\n      )\n   }\n\n   return (\n      <Drawer open={open} onOpenChange={setOpen}>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n               {selectedStatus ? (\n                  <>{selectedStatus.label}</>\n               ) : (\n                  <>+ Set status</>\n               )}\n            </Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mt-4 border-t\">\n               <StatusList\n                  setOpen={setOpen}\n                  setSelectedStatus={setSelectedStatus}\n               />\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n\nfunction StatusList({\n   setOpen,\n   setSelectedStatus,\n}: {\n   setOpen: (open: boolean) => void\n   setSelectedStatus: (status: Status | null) => void\n}) {\n   return (\n      <Command>\n         <CommandInput placeholder=\"Filter status...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n               {statuses.map((status) => (\n                  <CommandItem\n                     key={status.value}\n                     value={status.value}\n                     onSelect={(value) => {\n                        setSelectedStatus(\n                           statuses.find(\n                              (priority) => priority.value === value,\n                           ) || null,\n                        )\n                        setOpen(false)\n                     }}\n                  >\n                     {status.label}\n                  </CommandItem>\n               ))}\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/command-demo.json b/apps/web/public/v0/styles/default/command-demo.json
new file mode 100644
index 00000000..1de4afae
--- /dev/null
+++ b/apps/web/public/v0/styles/default/command-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "command-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "examples/command-demo.tsx",
+      "content": "import {\n   Calculator,\n   Calendar,\n   CreditCard,\n   Settings,\n   Smile,\n   User,\n} from \"lucide-react\"\n\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from \"@/components/ui/command\"\n\nexport default function CommandDemo() {\n   return (\n      <Command className=\"rounded-lg border shadow-md\">\n         <CommandInput placeholder=\"Type a command or search...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Suggestions\">\n               <CommandItem>\n                  <Calendar className=\"mr-2 size-4\" />\n                  <span>Calendar</span>\n               </CommandItem>\n               <CommandItem>\n                  <Smile className=\"mr-2 size-4\" />\n                  <span>Search Emoji</span>\n               </CommandItem>\n               <CommandItem>\n                  <Calculator className=\"mr-2 size-4\" />\n                  <span>Calculator</span>\n               </CommandItem>\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup heading=\"Settings\">\n               <CommandItem>\n                  <User className=\"mr-2 size-4\" />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <CreditCard className=\"mr-2 size-4\" />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <Settings className=\"mr-2 size-4\" />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n               </CommandItem>\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/command-dialog.json b/apps/web/public/v0/styles/default/command-dialog.json
new file mode 100644
index 00000000..78ad8227
--- /dev/null
+++ b/apps/web/public/v0/styles/default/command-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "command-dialog",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "command",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/command-dialog.tsx",
+      "content": "\"use client\"\n\nimport {\n   Calculator,\n   Calendar,\n   CreditCard,\n   Settings,\n   Smile,\n   User,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   CommandDialog,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from \"@/components/ui/command\"\n\nexport default function CommandDialogDemo() {\n   const [open, setOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      const down = (e: KeyboardEvent) => {\n         if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n            e.preventDefault()\n            setOpen((open) => !open)\n         }\n      }\n\n      document.addEventListener(\"keydown\", down)\n      return () => document.removeEventListener(\"keydown\", down)\n   }, [])\n\n   return (\n      <>\n         <p className=\"text-muted-foreground text-sm\">\n            Press{\" \"}\n            <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100\">\n               <span className=\"text-xs\">⌘</span>J\n            </kbd>\n         </p>\n         <CommandDialog open={open} onOpenChange={setOpen}>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n               <CommandEmpty>No results found.</CommandEmpty>\n               <CommandGroup heading=\"Suggestions\">\n                  <CommandItem>\n                     <Calendar className=\"mr-2 size-4\" />\n                     <span>Calendar</span>\n                  </CommandItem>\n                  <CommandItem>\n                     <Smile className=\"mr-2 size-4\" />\n                     <span>Search Emoji</span>\n                  </CommandItem>\n                  <CommandItem>\n                     <Calculator className=\"mr-2 size-4\" />\n                     <span>Calculator</span>\n                  </CommandItem>\n               </CommandGroup>\n               <CommandSeparator />\n               <CommandGroup heading=\"Settings\">\n                  <CommandItem>\n                     <User className=\"mr-2 size-4\" />\n                     <span>Profile</span>\n                     <CommandShortcut>⌘P</CommandShortcut>\n                  </CommandItem>\n                  <CommandItem>\n                     <CreditCard className=\"mr-2 size-4\" />\n                     <span>Billing</span>\n                     <CommandShortcut>⌘B</CommandShortcut>\n                  </CommandItem>\n                  <CommandItem>\n                     <Settings className=\"mr-2 size-4\" />\n                     <span>Settings</span>\n                     <CommandShortcut>⌘S</CommandShortcut>\n                  </CommandItem>\n               </CommandGroup>\n            </CommandList>\n         </CommandDialog>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/command.json b/apps/web/public/v0/styles/default/command.json
new file mode 100644
index 00000000..ac8b9658
--- /dev/null
+++ b/apps/web/public/v0/styles/default/command.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "command",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "cmdk@1.0.0"
+  ],
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/command.tsx",
+      "content": "\"use client\"\n\nimport type { DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/components/ui/dialog\"\n\nconst Command = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive\n      ref={ref}\n      className={cn(\n         \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md\",\n         className,\n      )}\n      {...props}\n   />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nfunction CommandDialog({ children, ...props }: DialogProps) {\n   return (\n      <Dialog {...props}>\n         <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n            <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5\">\n               {children}\n            </Command>\n         </DialogContent>\n      </Dialog>\n   )\n}\n\nconst CommandInput = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Input>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n   <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n         ref={ref}\n         className={cn(\n            \"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n            className,\n         )}\n         {...props}\n      />\n   </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.List\n      ref={ref}\n      className={cn(\n         \"max-h-[300px] overflow-y-auto overflow-x-hidden\",\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Empty>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n   <CommandPrimitive.Empty\n      ref={ref}\n      className=\"py-6 text-center text-sm\"\n      {...props}\n   />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Group>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Group\n      ref={ref}\n      className={cn(\n         \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Separator\n      ref={ref}\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n   />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Item\n      ref={ref}\n      className={cn(\n         \"data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nfunction CommandShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={cn(\n            \"text-muted-foreground ml-auto text-xs tracking-widest\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n   Command,\n   CommandDialog,\n   CommandInput,\n   CommandList,\n   CommandEmpty,\n   CommandGroup,\n   CommandItem,\n   CommandShortcut,\n   CommandSeparator,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/confetti-basic-cannon.json b/apps/web/public/v0/styles/default/confetti-basic-cannon.json
new file mode 100644
index 00000000..5897e9cf
--- /dev/null
+++ b/apps/web/public/v0/styles/default/confetti-basic-cannon.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-basic-cannon",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-basic-cannon.tsx",
+      "content": "import { ConfettiButton } from \"@/components/ui/confetti\"\n\nexport default function ConfettiButtonDemo() {\n   return (\n      <div className=\"relative\">\n         <ConfettiButton>Confetti 🎉</ConfettiButton>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/confetti-custom-shapes.json b/apps/web/public/v0/styles/default/confetti-custom-shapes.json
new file mode 100644
index 00000000..04caee2e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/confetti-custom-shapes.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-custom-shapes",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-custom-shapes.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ConfettiCustomShapes() {\n   const handleClick = () => {\n      const scalar = 2\n      const triangle = confetti.shapeFromPath({\n         path: \"M0 10 L5 0 L10 10z\",\n      })\n      const square = confetti.shapeFromPath({\n         path: \"M0 0 L10 0 L10 10 L0 10 Z\",\n      })\n      const coin = confetti.shapeFromPath({\n         path: \"M5 0 A5 5 0 1 0 5 10 A5 5 0 1 0 5 0 Z\",\n      })\n      const tree = confetti.shapeFromPath({\n         path: \"M5 0 L10 10 L0 10 Z\",\n      })\n\n      const defaults = {\n         spread: 360,\n         ticks: 60,\n         gravity: 0,\n         decay: 0.96,\n         startVelocity: 20,\n         shapes: [triangle, square, coin, tree],\n         scalar,\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 30,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 5,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: [\"circle\"],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative flex items-center justify-center\">\n         <Button onClick={handleClick}>Trigger Shapes</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/confetti-demo.json b/apps/web/public/v0/styles/default/confetti-demo.json
new file mode 100644
index 00000000..5233c7e8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/confetti-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-demo.tsx",
+      "content": "\"use client\"\n\nimport { useRef } from \"react\"\n\nimport type { ConfettiRef } from \"@/components/ui/confetti\"\nimport Confetti from \"@/components/ui/confetti\"\n\nexport default function ConfettiDemo() {\n   const confettiRef = useRef<ConfettiRef>(null)\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Confetti\n         </span>\n\n         <Confetti\n            ref={confettiRef}\n            className=\"absolute left-0 top-0 z-0 size-full\"\n            onMouseEnter={() => {\n               confettiRef.current?.fire({})\n            }}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/confetti-emoji.json b/apps/web/public/v0/styles/default/confetti-emoji.json
new file mode 100644
index 00000000..bd9f53bf
--- /dev/null
+++ b/apps/web/public/v0/styles/default/confetti-emoji.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-emoji",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-emoji.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ConfettiEmoji() {\n   const handleClick = () => {\n      const scalar = 2\n      const unicorn = confetti.shapeFromText({ text: \"🦄\", scalar })\n\n      const defaults = {\n         spread: 360,\n         ticks: 60,\n         gravity: 0,\n         decay: 0.96,\n         startVelocity: 20,\n         shapes: [unicorn],\n         scalar,\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 30,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 5,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: [\"circle\"],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative justify-center\">\n         <Button onClick={handleClick}>Trigger Emoji</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/confetti-fireworks.json b/apps/web/public/v0/styles/default/confetti-fireworks.json
new file mode 100644
index 00000000..727bf94d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/confetti-fireworks.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-fireworks",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-fireworks.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ConfettiFireworks() {\n   const handleClick = () => {\n      const duration = 5 * 1000\n      const animationEnd = Date.now() + duration\n      const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }\n\n      const randomInRange = (min: number, max: number) =>\n         Math.random() * (max - min) + min\n\n      const interval = window.setInterval(() => {\n         const timeLeft = animationEnd - Date.now()\n\n         if (timeLeft <= 0) return clearInterval(interval)\n\n         const particleCount = 50 * (timeLeft / duration)\n         confetti({\n            ...defaults,\n            particleCount,\n            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },\n         })\n         confetti({\n            ...defaults,\n            particleCount,\n            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },\n         })\n      }, 250)\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Fireworks</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/confetti-hover.json b/apps/web/public/v0/styles/default/confetti-hover.json
new file mode 100644
index 00000000..6fdbe8a5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/confetti-hover.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-hover",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-hover.tsx",
+      "content": "\"use client\"\n\nimport { useRef } from \"react\"\nimport type { ConfettiRef } from \"@/components/ui/confetti\"\nimport Confetti from \"@/components/ui/confetti\"\n\nexport default function ConfettiBasicCannon() {\n   const confettiRef = useRef<ConfettiRef>(null)\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full max-w-lg flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Confetti\n         </span>\n\n         <Confetti\n            ref={confettiRef}\n            className=\"absolute left-0 top-0 z-0 size-full\"\n            onMouseEnter={() => {\n               confettiRef.current?.fire({})\n            }}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/confetti-random-direction.json b/apps/web/public/v0/styles/default/confetti-random-direction.json
new file mode 100644
index 00000000..1dcac6ee
--- /dev/null
+++ b/apps/web/public/v0/styles/default/confetti-random-direction.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-random-direction",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-random-direction.tsx",
+      "content": "import { ConfettiButton } from \"@/components/ui/confetti\"\n\nexport default function ConfettiButtonDemo() {\n   return (\n      <div className=\"relative\">\n         <ConfettiButton\n            options={{\n               get angle() {\n                  return Math.random() * 360\n               },\n            }}\n         >\n            Random Confetti 🎉\n         </ConfettiButton>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/confetti-side-cannons.json b/apps/web/public/v0/styles/default/confetti-side-cannons.json
new file mode 100644
index 00000000..5f9d32f9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/confetti-side-cannons.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-side-cannons",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-side-cannons.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ConfettiSideCannons() {\n   const handleClick = () => {\n      const end = Date.now() + 3 * 1000 // 3 seconds\n      const colors = [\"#a786ff\", \"#fd8bbc\", \"#eca184\", \"#f8deb1\"]\n\n      const frame = () => {\n         if (Date.now() > end) return\n\n         confetti({\n            particleCount: 2,\n            angle: 60,\n            spread: 55,\n            startVelocity: 60,\n            origin: { x: 0, y: 0.5 },\n            colors,\n         })\n         confetti({\n            particleCount: 2,\n            angle: 120,\n            spread: 55,\n            startVelocity: 60,\n            origin: { x: 1, y: 0.5 },\n            colors,\n         })\n\n         requestAnimationFrame(frame)\n      }\n\n      frame()\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Side Cannons</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/confetti-stars.json b/apps/web/public/v0/styles/default/confetti-stars.json
new file mode 100644
index 00000000..29bab1b7
--- /dev/null
+++ b/apps/web/public/v0/styles/default/confetti-stars.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-stars",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-stars.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ConfettiStars() {\n   const handleClick = () => {\n      const defaults = {\n         spread: 360,\n         ticks: 50,\n         gravity: 0,\n         decay: 0.94,\n         startVelocity: 30,\n         colors: [\"#FFE400\", \"#FFBD00\", \"#E89400\", \"#FFCA6C\", \"#FDFFB8\"],\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 40,\n            scalar: 1.2,\n            shapes: [\"star\"],\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 10,\n            scalar: 0.75,\n            shapes: [\"circle\"],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Stars</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/confetti.json b/apps/web/public/v0/styles/default/confetti.json
new file mode 100644
index 00000000..c529a80b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/confetti.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "canvas-confetti",
+    "@types/canvas-confetti"
+  ],
+  "files": [
+    {
+      "path": "ui/confetti.tsx",
+      "content": "\"use client\"\nimport confetti from \"canvas-confetti\"\nimport type { ReactNode } from \"react\"\nimport type React from \"react\"\nimport {\n   createContext,\n   forwardRef,\n   useCallback,\n   useEffect,\n   useImperativeHandle,\n   useMemo,\n   useRef,\n} from \"react\"\n\nimport type {\n   GlobalOptions as ConfettiGlobalOptions,\n   CreateTypes as ConfettiInstance,\n   Options as ConfettiOptions,\n} from \"canvas-confetti\"\nimport { Button } from \"@/components/ui/button\"\nimport type { ButtonProps } from \"@/components/ui/button\"\n\ninterface Api {\n   fire: (options?: ConfettiOptions) => void\n}\n\ntype Props = React.ComponentPropsWithRef<\"canvas\"> & {\n   options?: ConfettiOptions\n   globalOptions?: ConfettiGlobalOptions\n   manualstart?: boolean\n   children?: ReactNode\n}\n\nexport type ConfettiRef = Api | null\n\nconst ConfettiContext = createContext<Api>({} as Api)\n\nconst Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {\n   const {\n      options,\n      globalOptions = { resize: true, useWorker: true },\n      manualstart = false,\n      children,\n      ...rest\n   } = props\n   const instanceRef = useRef<ConfettiInstance | null>(null) // confetti instance\n\n   const canvasRef = useCallback(\n      // https://react.dev/reference/react-dom/components/common#ref-callback\n      // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs\n      (node: HTMLCanvasElement) => {\n         if (node !== null) {\n            // <canvas> is mounted => create the confetti instance\n            if (instanceRef.current) return // if not already created\n            instanceRef.current = confetti.create(node, {\n               ...globalOptions,\n               resize: true,\n            })\n         } else {\n            // <canvas> is unmounted => reset and destroy instanceRef\n            if (instanceRef.current) {\n               instanceRef.current.reset()\n               instanceRef.current = null\n            }\n         }\n      },\n      [globalOptions],\n   )\n\n   // `fire` is a function that calls the instance() with `opts` merged with `options`\n   const fire = useCallback(\n      (opts = {}) => instanceRef.current?.({ ...options, ...opts }),\n      [options],\n   )\n\n   const api = useMemo(\n      () => ({\n         fire,\n      }),\n      [fire],\n   )\n\n   useImperativeHandle(ref, () => api, [api])\n\n   useEffect(() => {\n      if (!manualstart) fire()\n   }, [manualstart, fire])\n\n   return (\n      <ConfettiContext.Provider value={api}>\n         <canvas ref={canvasRef} {...rest} />\n         {children}\n      </ConfettiContext.Provider>\n   )\n})\n\ninterface ConfettiButtonProps extends ButtonProps {\n   options?: ConfettiOptions &\n      ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }\n   children?: React.ReactNode\n}\n\nfunction ConfettiButton({ options, children, ...props }: ConfettiButtonProps) {\n   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      const rect = event.currentTarget.getBoundingClientRect()\n      const x = rect.left + rect.width / 2\n      const y = rect.top + rect.height / 2\n      confetti({\n         ...options,\n         origin: {\n            x: x / window.innerWidth,\n            y: y / window.innerHeight,\n         },\n      })\n   }\n\n   return (\n      <Button onClick={handleClick} {...props}>\n         {children}\n      </Button>\n   )\n}\n\nexport { Confetti, ConfettiButton }\n\nexport default Confetti\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/context-menu-demo.json b/apps/web/public/v0/styles/default/context-menu-demo.json
new file mode 100644
index 00000000..509177c1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/context-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "context-menu-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "context-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/context-menu-demo.tsx",
+      "content": "import {\n   ContextMenu,\n   ContextMenuCheckboxItem,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuLabel,\n   ContextMenuRadioGroup,\n   ContextMenuRadioItem,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuTrigger,\n} from \"@/components/ui/context-menu\"\n\nexport default function ContextMenuDemo() {\n   return (\n      <ContextMenu>\n         <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n            Right click here\n         </ContextMenuTrigger>\n         <ContextMenuContent className=\"w-64\">\n            <ContextMenuItem inset>\n               Back\n               <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset disabled>\n               Forward\n               <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset>\n               Reload\n               <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSub>\n               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n               <ContextMenuSubContent className=\"w-48\">\n                  <ContextMenuItem>\n                     Save Page As...\n                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n                  </ContextMenuItem>\n                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                  <ContextMenuItem>Name Window...</ContextMenuItem>\n                  <ContextMenuSeparator />\n                  <ContextMenuItem>Developer Tools</ContextMenuItem>\n               </ContextMenuSubContent>\n            </ContextMenuSub>\n            <ContextMenuSeparator />\n            <ContextMenuCheckboxItem checked>\n               Show Bookmarks Bar\n               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuSeparator />\n            <ContextMenuRadioGroup value=\"pedro\">\n               <ContextMenuLabel inset>People</ContextMenuLabel>\n               <ContextMenuSeparator />\n               <ContextMenuRadioItem value=\"pedro\">\n                  Pedro Duarte\n               </ContextMenuRadioItem>\n               <ContextMenuRadioItem value=\"colm\">\n                  Colm Tuite\n               </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n         </ContextMenuContent>\n      </ContextMenu>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/context-menu.json b/apps/web/public/v0/styles/default/context-menu.json
new file mode 100644
index 00000000..8826d982
--- /dev/null
+++ b/apps/web/public/v0/styles/default/context-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "context-menu",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-context-menu"
+  ],
+  "files": [
+    {
+      "path": "ui/context-menu.tsx",
+      "content": "\"use client\"\n\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <ContextMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n   </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.SubContent\n      ref={ref}\n      className={cn(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md\",\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n         ref={ref}\n         className={cn(\n            \"bg-popover text-popover-foreground animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md\",\n            className,\n         )}\n         {...props}\n      />\n   </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <ContextMenuPrimitive.Item\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <ContextMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <ContextMenuPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n   ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <ContextMenuPrimitive.RadioItem\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <ContextMenuPrimitive.ItemIndicator>\n            <Circle className=\"size-2 fill-current\" />\n         </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <ContextMenuPrimitive.Label\n      ref={ref}\n      className={cn(\n         \"text-foreground px-2 py-1.5 text-sm font-semibold\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.Separator\n      ref={ref}\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nfunction ContextMenuShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={cn(\n            \"text-muted-foreground ml-auto text-xs tracking-widest\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n   ContextMenu,\n   ContextMenuTrigger,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuCheckboxItem,\n   ContextMenuRadioItem,\n   ContextMenuLabel,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuGroup,\n   ContextMenuPortal,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuRadioGroup,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/cool-mode-custom.json b/apps/web/public/v0/styles/default/cool-mode-custom.json
new file mode 100644
index 00000000..f65249eb
--- /dev/null
+++ b/apps/web/public/v0/styles/default/cool-mode-custom.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "cool-mode-custom",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/cool-mode-custom.tsx",
+      "content": "import React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { CoolMode } from \"@/components/ui/cool-mode\"\n\nexport default function CoolModeCustom() {\n   return (\n      <div className=\"relative justify-center\">\n         <CoolMode\n            options={{\n               particle:\n                  \"https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg\",\n            }}\n         >\n            <Button>Click Me!</Button>\n         </CoolMode>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/cool-mode-demo.json b/apps/web/public/v0/styles/default/cool-mode-demo.json
new file mode 100644
index 00000000..0f3b1374
--- /dev/null
+++ b/apps/web/public/v0/styles/default/cool-mode-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "cool-mode-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/cool-mode-demo.tsx",
+      "content": "import React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { CoolMode } from \"@/components/ui/cool-mode\"\n\nexport default function CoolModeDemo() {\n   return (\n      <div className=\"relative justify-center\">\n         <CoolMode>\n            <Button>Click Me!</Button>\n         </CoolMode>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/cool-mode.json b/apps/web/public/v0/styles/default/cool-mode.json
new file mode 100644
index 00000000..8e1d74d5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/cool-mode.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "cool-mode",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/cool-mode.tsx",
+      "content": "\"use client\"\nimport type { ReactNode } from \"react\"\nimport React, { useEffect, useRef } from \"react\"\n\nexport interface BaseParticle {\n   element: HTMLElement | SVGSVGElement\n   left: number\n   size: number\n   top: number\n}\n\nexport interface BaseParticleOptions {\n   particle?: string\n   size?: number\n}\n\nexport interface CoolParticle extends BaseParticle {\n   direction: number\n   speedHorz: number\n   speedUp: number\n   spinSpeed: number\n   spinVal: number\n}\n\nexport interface CoolParticleOptions extends BaseParticleOptions {\n   particleCount?: number\n   speedHorz?: number\n   speedUp?: number\n}\n\nfunction getContainer() {\n   const id = \"_coolMode_effect\"\n   const existingContainer = document.getElementById(id)\n\n   if (existingContainer) return existingContainer\n\n   const container = document.createElement(\"div\")\n   container.setAttribute(\"id\", id)\n   container.setAttribute(\n      \"style\",\n      \"overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647\",\n   )\n\n   document.body.appendChild(container)\n\n   return container\n}\n\nlet instanceCounter = 0\n\nfunction applyParticleEffect(\n   element: HTMLElement,\n   options?: CoolParticleOptions,\n): () => void {\n   instanceCounter++\n\n   const defaultParticle = \"circle\"\n   const particleType = options?.particle || defaultParticle\n   const sizes = [15, 20, 25, 35, 45]\n   const limit = 45\n\n   let particles: CoolParticle[] = []\n   let autoAddParticle = false\n   let mouseX = 0\n   let mouseY = 0\n\n   const container = getContainer()\n\n   function generateParticle() {\n      const size =\n         options?.size || sizes[Math.floor(Math.random() * sizes.length)]\n      const speedHorz = options?.speedHorz || Math.random() * 10\n      const speedUp = options?.speedUp || Math.random() * 25\n      const spinVal = Math.random() * 360\n      const spinSpeed = Math.random() * 35 * (Math.random() <= 0.5 ? -1 : 1)\n      const top = mouseY - size / 2\n      const left = mouseX - size / 2\n      const direction = Math.random() <= 0.5 ? -1 : 1\n\n      const particle = document.createElement(\"div\")\n\n      if (particleType === \"circle\") {\n         const svgNS = \"http://www.w3.org/2000/svg\"\n         const circleSVG = document.createElementNS(svgNS, \"svg\")\n         const circle = document.createElementNS(svgNS, \"circle\")\n         circle.setAttributeNS(null, \"cx\", (size / 2).toString())\n         circle.setAttributeNS(null, \"cy\", (size / 2).toString())\n         circle.setAttributeNS(null, \"r\", (size / 2).toString())\n         circle.setAttributeNS(\n            null,\n            \"fill\",\n            `hsl(${Math.random() * 360}, 70%, 50%)`,\n         )\n\n         circleSVG.appendChild(circle)\n         circleSVG.setAttribute(\"width\", size.toString())\n         circleSVG.setAttribute(\"height\", size.toString())\n\n         particle.appendChild(circleSVG)\n      } else {\n         particle.innerHTML = `<img src=\"${particleType}\" width=\"${size}\" height=\"${size}\" style=\"border-radius: 50%\">`\n      }\n\n      particle.style.position = \"absolute\"\n      particle.style.transform = `translate3d(${left}px, ${top}px, 0px) rotate(${spinVal}deg)`\n\n      container.appendChild(particle)\n\n      particles.push({\n         direction,\n         element: particle,\n         left,\n         size,\n         speedHorz,\n         speedUp,\n         spinSpeed,\n         spinVal,\n         top,\n      })\n   }\n\n   function refreshParticles() {\n      particles.forEach((p) => {\n         p.left = p.left - p.speedHorz * p.direction\n         p.top = p.top - p.speedUp\n         p.speedUp = Math.min(p.size, p.speedUp - 1)\n         p.spinVal = p.spinVal + p.spinSpeed\n\n         if (\n            p.top >=\n            Math.max(window.innerHeight, document.body.clientHeight) + p.size\n         ) {\n            particles = particles.filter((o) => o !== p)\n            p.element.remove()\n         }\n\n         p.element.setAttribute(\n            \"style\",\n            [\n               \"position:absolute\",\n               \"will-change:transform\",\n               `top:${p.top}px`,\n               `left:${p.left}px`,\n               `transform:rotate(${p.spinVal}deg)`,\n            ].join(\";\"),\n         )\n      })\n   }\n\n   let animationFrame: number | undefined\n\n   let lastParticleTimestamp = 0\n   const particleGenerationDelay = 30\n\n   function loop() {\n      const currentTime = performance.now()\n      if (\n         autoAddParticle &&\n         particles.length < limit &&\n         currentTime - lastParticleTimestamp > particleGenerationDelay\n      ) {\n         generateParticle()\n         lastParticleTimestamp = currentTime\n      }\n\n      refreshParticles()\n      animationFrame = requestAnimationFrame(loop)\n   }\n\n   loop()\n\n   const isTouchInteraction = \"ontouchstart\" in window\n\n   const tap = isTouchInteraction ? \"touchstart\" : \"mousedown\"\n   const tapEnd = isTouchInteraction ? \"touchend\" : \"mouseup\"\n   const move = isTouchInteraction ? \"touchmove\" : \"mousemove\"\n\n   const updateMousePosition = (e: MouseEvent | TouchEvent) => {\n      if (\"touches\" in e) {\n         mouseX = e.touches?.[0].clientX\n         mouseY = e.touches?.[0].clientY\n      } else {\n         mouseX = e.clientX\n         mouseY = e.clientY\n      }\n   }\n\n   const tapHandler = (e: MouseEvent | TouchEvent) => {\n      updateMousePosition(e)\n      autoAddParticle = true\n   }\n\n   const disableAutoAddParticle = () => {\n      autoAddParticle = false\n   }\n\n   element.addEventListener(move, updateMousePosition, { passive: true })\n   element.addEventListener(tap, tapHandler, { passive: true })\n   element.addEventListener(tapEnd, disableAutoAddParticle, { passive: true })\n   element.addEventListener(\"mouseleave\", disableAutoAddParticle, {\n      passive: true,\n   })\n\n   return () => {\n      element.removeEventListener(move, updateMousePosition)\n      element.removeEventListener(tap, tapHandler)\n      element.removeEventListener(tapEnd, disableAutoAddParticle)\n      element.removeEventListener(\"mouseleave\", disableAutoAddParticle)\n\n      const interval = setInterval(() => {\n         if (animationFrame && particles.length === 0) {\n            cancelAnimationFrame(animationFrame)\n            clearInterval(interval)\n\n            if (--instanceCounter === 0) container.remove()\n         }\n      }, 500)\n   }\n}\n\ninterface CoolModeProps {\n   children: ReactNode\n   options?: CoolParticleOptions\n}\n\nexport const CoolMode: React.FC<CoolModeProps> = ({ children, options }) => {\n   const ref = useRef<HTMLElement>(null)\n\n   useEffect(() => {\n      if (ref.current) return applyParticleEffect(ref.current, options)\n   }, [options])\n\n   return React.cloneElement(children as React.ReactElement, { ref })\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/data-table-demo.json b/apps/web/public/v0/styles/default/data-table-demo.json
new file mode 100644
index 00000000..d2b73768
--- /dev/null
+++ b/apps/web/public/v0/styles/default/data-table-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "data-table-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "data-table"
+  ],
+  "files": [
+    {
+      "path": "examples/data-table-demo.tsx",
+      "content": "\"use client\"\n\nimport type {\n   ColumnDef,\n   ColumnFiltersState,\n   SortingState,\n   VisibilityState,\n} from \"@tanstack/react-table\"\nimport {\n   flexRender,\n   getCoreRowModel,\n   getFilteredRowModel,\n   getPaginationRowModel,\n   getSortedRowModel,\n   useReactTable,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n   DropdownMenu,\n   DropdownMenuCheckboxItem,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n   Table,\n   TableBody,\n   TableCell,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from \"@/components/ui/table\"\n\nconst data: Payment[] = [\n   {\n      id: \"m5gr84i9\",\n      amount: 316,\n      status: \"success\",\n      email: \"ken99@yahoo.com\",\n   },\n   {\n      id: \"3u1reuv4\",\n      amount: 242,\n      status: \"success\",\n      email: \"Abe45@gmail.com\",\n   },\n   {\n      id: \"derv1ws0\",\n      amount: 837,\n      status: \"processing\",\n      email: \"Monserrat44@gmail.com\",\n   },\n   {\n      id: \"5kma53ae\",\n      amount: 874,\n      status: \"success\",\n      email: \"Silas22@gmail.com\",\n   },\n   {\n      id: \"bhqecj4p\",\n      amount: 721,\n      status: \"failed\",\n      email: \"carmella@hotmail.com\",\n   },\n]\n\nexport interface Payment {\n   id: string\n   amount: number\n   status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n   email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n   {\n      id: \"select\",\n      header: ({ table }) => (\n         <Checkbox\n            checked={\n               table.getIsAllPageRowsSelected() ||\n               (table.getIsSomePageRowsSelected() && \"indeterminate\")\n            }\n            onCheckedChange={(value) =>\n               table.toggleAllPageRowsSelected(!!value)\n            }\n            aria-label=\"Select all\"\n         />\n      ),\n      cell: ({ row }) => (\n         <Checkbox\n            checked={row.getIsSelected()}\n            onCheckedChange={(value) => row.toggleSelected(!!value)}\n            aria-label=\"Select row\"\n         />\n      ),\n      enableSorting: false,\n      enableHiding: false,\n   },\n   {\n      accessorKey: \"status\",\n      header: \"Status\",\n      cell: ({ row }) => (\n         <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n      ),\n   },\n   {\n      accessorKey: \"email\",\n      header: ({ column }) => {\n         return (\n            <Button\n               variant=\"ghost\"\n               onClick={() =>\n                  column.toggleSorting(column.getIsSorted() === \"asc\")\n               }\n            >\n               Email\n               <ArrowUpDown className=\"ml-2 size-4\" />\n            </Button>\n         )\n      },\n      cell: ({ row }) => (\n         <div className=\"lowercase\">{row.getValue(\"email\")}</div>\n      ),\n   },\n   {\n      accessorKey: \"amount\",\n      header: () => <div className=\"text-right\">Amount</div>,\n      cell: ({ row }) => {\n         const amount = Number.parseFloat(row.getValue(\"amount\"))\n\n         // Format the amount as a dollar amount\n         const formatted = new Intl.NumberFormat(\"en-US\", {\n            style: \"currency\",\n            currency: \"USD\",\n         }).format(amount)\n\n         return <div className=\"text-right font-medium\">{formatted}</div>\n      },\n   },\n   {\n      id: \"actions\",\n      enableHiding: false,\n      cell: ({ row }) => {\n         const payment = row.original\n\n         return (\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" className=\"size-8 p-0\">\n                     <span className=\"sr-only\">Open menu</span>\n                     <MoreHorizontal className=\"size-4\" />\n                  </Button>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                  <DropdownMenuItem\n                     onClick={() => navigator.clipboard.writeText(payment.id)}\n                  >\n                     Copy payment ID\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>View customer</DropdownMenuItem>\n                  <DropdownMenuItem>View payment details</DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         )\n      },\n   },\n]\n\nexport default function DataTableDemo() {\n   const [sorting, setSorting] = React.useState<SortingState>([])\n   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n      [],\n   )\n   const [columnVisibility, setColumnVisibility] =\n      React.useState<VisibilityState>({})\n   const [rowSelection, setRowSelection] = React.useState({})\n\n   const table = useReactTable({\n      data,\n      columns,\n      onSortingChange: setSorting,\n      onColumnFiltersChange: setColumnFilters,\n      getCoreRowModel: getCoreRowModel(),\n      getPaginationRowModel: getPaginationRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      onColumnVisibilityChange: setColumnVisibility,\n      onRowSelectionChange: setRowSelection,\n      state: {\n         sorting,\n         columnFilters,\n         columnVisibility,\n         rowSelection,\n      },\n   })\n\n   return (\n      <div className=\"w-full\">\n         <div className=\"flex items-center py-4\">\n            <Input\n               placeholder=\"Filter emails...\"\n               value={\n                  (table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"\n               }\n               onChange={(event) =>\n                  table.getColumn(\"email\")?.setFilterValue(event.target.value)\n               }\n               className=\"max-w-sm\"\n            />\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" className=\"ml-auto\">\n                     Columns <ChevronDown className=\"ml-2 size-4\" />\n                  </Button>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent align=\"end\">\n                  {table\n                     .getAllColumns()\n                     .filter((column) => column.getCanHide())\n                     .map((column) => {\n                        return (\n                           <DropdownMenuCheckboxItem\n                              key={column.id}\n                              className=\"capitalize\"\n                              checked={column.getIsVisible()}\n                              onCheckedChange={(value) =>\n                                 column.toggleVisibility(!!value)\n                              }\n                           >\n                              {column.id}\n                           </DropdownMenuCheckboxItem>\n                        )\n                     })}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </div>\n         <div className=\"rounded-md border\">\n            <Table>\n               <TableHeader>\n                  {table.getHeaderGroups().map((headerGroup) => (\n                     <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                           return (\n                              <TableHead key={header.id}>\n                                 {header.isPlaceholder\n                                    ? null\n                                    : flexRender(\n                                         header.column.columnDef.header,\n                                         header.getContext(),\n                                      )}\n                              </TableHead>\n                           )\n                        })}\n                     </TableRow>\n                  ))}\n               </TableHeader>\n               <TableBody>\n                  {table.getRowModel().rows?.length ? (\n                     table.getRowModel().rows.map((row) => (\n                        <TableRow\n                           key={row.id}\n                           data-state={row.getIsSelected() && \"selected\"}\n                        >\n                           {row.getVisibleCells().map((cell) => (\n                              <TableCell key={cell.id}>\n                                 {flexRender(\n                                    cell.column.columnDef.cell,\n                                    cell.getContext(),\n                                 )}\n                              </TableCell>\n                           ))}\n                        </TableRow>\n                     ))\n                  ) : (\n                     <TableRow>\n                        <TableCell\n                           colSpan={columns.length}\n                           className=\"h-24 text-center\"\n                        >\n                           No results.\n                        </TableCell>\n                     </TableRow>\n                  )}\n               </TableBody>\n            </Table>\n         </div>\n         <div className=\"flex items-center justify-end space-x-2 py-4\">\n            <div className=\"text-muted-foreground flex-1 text-sm\">\n               {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n               {table.getFilteredRowModel().rows.length} row(s) selected.\n            </div>\n            <div className=\"space-x-2\">\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n               >\n                  Previous\n               </Button>\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n               >\n                  Next\n               </Button>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/date-picker-demo.json b/apps/web/public/v0/styles/default/date-picker-demo.json
new file mode 100644
index 00000000..b9cb7aa9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/date-picker-demo.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "date-picker-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport { format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport default function DatePickerDemo() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               className={cn(\n                  \"w-[280px] justify-start text-left font-normal\",\n                  !date && \"text-muted-foreground\",\n               )}\n            >\n               <CalendarIcon className=\"mr-2 size-4\" />\n               {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-auto p-0\">\n            <Calendar\n               mode=\"single\"\n               selected={date}\n               onSelect={setDate}\n               initialFocus\n            />\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/date-picker-form.json b/apps/web/public/v0/styles/default/date-picker-form.json
new file mode 100644
index 00000000..9ae8f605
--- /dev/null
+++ b/apps/web/public/v0/styles/default/date-picker-form.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "date-picker-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   dob: z.date({\n      required_error: \"A date of birth is required.\",\n   }),\n})\n\nexport default function DatePickerForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"dob\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Date of birth</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 className={cn(\n                                    \"w-[240px] pl-3 text-left font-normal\",\n                                    !field.value && \"text-muted-foreground\",\n                                 )}\n                              >\n                                 {field.value ? (\n                                    format(field.value, \"PPP\")\n                                 ) : (\n                                    <span>Pick a date</span>\n                                 )}\n                                 <CalendarIcon className=\"ml-auto size-4 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                           <Calendar\n                              mode=\"single\"\n                              selected={field.value}\n                              onSelect={field.onChange}\n                              disabled={(date) =>\n                                 date > new Date() ||\n                                 date < new Date(\"1900-01-01\")\n                              }\n                              initialFocus\n                           />\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        Your date of birth is used to calculate your age.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/date-picker-with-presets.json b/apps/web/public/v0/styles/default/date-picker-with-presets.json
new file mode 100644
index 00000000..ddbc0781
--- /dev/null
+++ b/apps/web/public/v0/styles/default/date-picker-with-presets.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "date-picker-with-presets",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-with-presets.tsx",
+      "content": "\"use client\"\n\nimport { addDays, format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function DatePickerWithPresets() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               className={cn(\n                  \"w-[280px] justify-start text-left font-normal\",\n                  !date && \"text-muted-foreground\",\n               )}\n            >\n               <CalendarIcon className=\"mr-2 size-4\" />\n               {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"flex w-auto flex-col space-y-2 p-2\">\n            <Select\n               onValueChange={(value) =>\n                  setDate(addDays(new Date(), Number.parseInt(value)))\n               }\n            >\n               <SelectTrigger>\n                  <SelectValue placeholder=\"Select\" />\n               </SelectTrigger>\n               <SelectContent position=\"popper\">\n                  <SelectItem value=\"0\">Today</SelectItem>\n                  <SelectItem value=\"1\">Tomorrow</SelectItem>\n                  <SelectItem value=\"3\">In 3 days</SelectItem>\n                  <SelectItem value=\"7\">In a week</SelectItem>\n               </SelectContent>\n            </Select>\n            <div className=\"rounded-md border\">\n               <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/date-picker-with-range.json b/apps/web/public/v0/styles/default/date-picker-with-range.json
new file mode 100644
index 00000000..b0f2a65f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/date-picker-with-range.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "date-picker-with-range",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-with-range.tsx",
+      "content": "\"use client\"\n\nimport { addDays, format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\nimport * as React from \"react\"\nimport type { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport default function DatePickerWithRange({\n   className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n   const [date, setDate] = React.useState<DateRange | undefined>({\n      from: new Date(2022, 0, 20),\n      to: addDays(new Date(2022, 0, 20), 20),\n   })\n\n   return (\n      <div className={cn(\"grid gap-2\", className)}>\n         <Popover>\n            <PopoverTrigger asChild>\n               <Button\n                  id=\"date\"\n                  variant=\"outline\"\n                  className={cn(\n                     \"w-[300px] justify-start text-left font-normal\",\n                     !date && \"text-muted-foreground\",\n                  )}\n               >\n                  <CalendarIcon className=\"mr-2 size-4\" />\n                  {date?.from ? (\n                     date.to ? (\n                        <>\n                           {format(date.from, \"LLL dd, y\")} -{\" \"}\n                           {format(date.to, \"LLL dd, y\")}\n                        </>\n                     ) : (\n                        format(date.from, \"LLL dd, y\")\n                     )\n                  ) : (\n                     <span>Pick a date</span>\n                  )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto p-0\" align=\"start\">\n               <Calendar\n                  initialFocus\n                  mode=\"range\"\n                  defaultMonth={date?.from}\n                  selected={date}\n                  onSelect={setDate}\n                  numberOfMonths={2}\n               />\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dialog-close-button.json b/apps/web/public/v0/styles/default/dialog-close-button.json
new file mode 100644
index 00000000..abcd90cd
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dialog-close-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dialog-close-button",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/dialog-close-button.tsx",
+      "content": "import { Copy } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Dialog,\n   DialogClose,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function DialogCloseButton() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Share</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-md\">\n            <DialogHeader>\n               <DialogTitle>Share link</DialogTitle>\n               <DialogDescription>\n                  Anyone who has this link will be able to view this.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"flex items-center space-x-2\">\n               <div className=\"grid flex-1 gap-2\">\n                  <Label htmlFor=\"link\" className=\"sr-only\">\n                     Link\n                  </Label>\n                  <Input\n                     id=\"link\"\n                     defaultValue=\"https://nyxbui.design/docs/installation\"\n                     readOnly\n                  />\n               </div>\n               <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n                  <span className=\"sr-only\">Copy</span>\n                  <Copy className=\"size-4\" />\n               </Button>\n            </div>\n            <DialogFooter className=\"sm:justify-start\">\n               <DialogClose asChild>\n                  <Button type=\"button\" variant=\"secondary\">\n                     Close\n                  </Button>\n               </DialogClose>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dialog-demo.json b/apps/web/public/v0/styles/default/dialog-demo.json
new file mode 100644
index 00000000..69a8835a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dialog-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dialog-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/dialog-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function DialogDemo() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-[425px]\">\n            <DialogHeader>\n               <DialogTitle>Edit profile</DialogTitle>\n               <DialogDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     defaultValue=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     defaultValue=\"~peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <DialogFooter>\n               <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dialog.json b/apps/web/public/v0/styles/default/dialog.json
new file mode 100644
index 00000000..62364153
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dialog.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dialog",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/dialog.tsx",
+      "content": "\"use client\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Overlay\n      ref={ref}\n      className={cn(\n         \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80\",\n         className,\n      )}\n      {...props}\n   />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n         ref={ref}\n         className={cn(\n            \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n         <DialogPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n         </DialogPrimitive.Close>\n      </DialogPrimitive.Content>\n   </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nfunction DialogHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\n            \"flex flex-col space-y-1.5 text-center sm:text-left\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nDialogHeader.displayName = \"DialogHeader\"\n\nfunction DialogFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Title\n      ref={ref}\n      className={cn(\n         \"text-lg font-semibold leading-none tracking-tight\",\n         className,\n      )}\n      {...props}\n   />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Description\n      ref={ref}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n   Dialog,\n   DialogPortal,\n   DialogOverlay,\n   DialogClose,\n   DialogTrigger,\n   DialogContent,\n   DialogHeader,\n   DialogFooter,\n   DialogTitle,\n   DialogDescription,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dock-demo-2.json b/apps/web/public/v0/styles/default/dock-demo-2.json
new file mode 100644
index 00000000..bb7e932e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dock-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dock-demo-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/dock-demo-2.tsx",
+      "content": "import type React from \"react\"\n\nimport { Dock, DockIcon } from \"@/components/ui/dock\"\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nexport default function DockDemo() {\n   return (\n      <div className=\"relative\">\n         <Dock direction=\"middle\">\n            <DockIcon>\n               <Icons.gitHub className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.googleDrive className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.notion className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.whatsapp className=\"size-6\" />\n            </DockIcon>\n         </Dock>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         ></path>\n      </svg>\n   ),\n   notion: (props: IconProps) => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#fff\"\n         />\n         <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000\"\n         />\n      </svg>\n   ),\n   googleDrive: (props: IconProps) => (\n      <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: (props: IconProps) => (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 175.216 175.552\"\n         {...props}\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            fill=\"#b3b3b3\"\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            filter=\"url(#a)\"\n         />\n         <path\n            fill=\"#fff\"\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n         />\n         <path\n            fill=\"url(#linearGradient1780)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n         />\n         <path\n            fill=\"url(#b)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n         />\n         <path\n            fill=\"#fff\"\n            fillRule=\"evenodd\"\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dock-demo-3.json b/apps/web/public/v0/styles/default/dock-demo-3.json
new file mode 100644
index 00000000..0f6d024f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dock-demo-3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dock-demo-3",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/dock-demo-3.tsx",
+      "content": "import type React from \"react\"\n\nimport { Dock, DockIcon } from \"@/components/ui/dock\"\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nexport default function DockDemo() {\n   return (\n      <div className=\"relative\">\n         <Dock magnification={60} distance={100}>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.gitHub className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.googleDrive className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.notion className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.whatsapp className=\"size-full\" />\n            </DockIcon>\n         </Dock>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         ></path>\n      </svg>\n   ),\n   notion: (props: IconProps) => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#fff\"\n         />\n         <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000\"\n         />\n      </svg>\n   ),\n   googleDrive: (props: IconProps) => (\n      <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: (props: IconProps) => (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 175.216 175.552\"\n         {...props}\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            fill=\"#b3b3b3\"\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            filter=\"url(#a)\"\n         />\n         <path\n            fill=\"#fff\"\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n         />\n         <path\n            fill=\"url(#linearGradient1780)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n         />\n         <path\n            fill=\"url(#b)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n         />\n         <path\n            fill=\"#fff\"\n            fillRule=\"evenodd\"\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dock-demo.json b/apps/web/public/v0/styles/default/dock-demo.json
new file mode 100644
index 00000000..6eb0789c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dock-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dock-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/dock-demo.tsx",
+      "content": "import { CalendarIcon, HomeIcon, MailIcon, PencilIcon } from \"lucide-react\"\nimport Link from \"next/link\"\nimport type React from \"react\"\n\nimport { ModeToggle } from \"@/components/mode-toggle\"\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport { cn } from \"@/lib/utils\"\nimport { Dock, DockIcon } from \"@/components/ui/dock\"\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nconst Icons = {\n   calendar: (props: IconProps) => <CalendarIcon {...props} />,\n   email: (props: IconProps) => <MailIcon {...props} />,\n   linkedin: (props: IconProps) => (\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <title>LinkedIn</title>\n         <path\n            fill=\"currentColor\"\n            d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\n         />\n      </svg>\n   ),\n   x: (props: IconProps) => (\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <title>X</title>\n         <path\n            fill=\"currentColor\"\n            d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\n         />\n      </svg>\n   ),\n   youtube: (props: IconProps) => (\n      <svg\n         width=\"32px\"\n         height=\"32px\"\n         viewBox=\"0 0 32 32\"\n         fill=\"currentColor\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <title>youtube</title>\n         <path d=\"M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z\" />\n      </svg>\n   ),\n   github: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         ></path>\n      </svg>\n   ),\n}\n\nconst DATA = {\n   navbar: [\n      { href: \"#\", icon: HomeIcon, label: \"Home\" },\n      { href: \"#\", icon: PencilIcon, label: \"Blog\" },\n   ],\n   contact: {\n      social: {\n         GitHub: {\n            name: \"GitHub\",\n            url: \"#\",\n            icon: Icons.github,\n         },\n         LinkedIn: {\n            name: \"LinkedIn\",\n            url: \"#\",\n            icon: Icons.linkedin,\n         },\n         X: {\n            name: \"X\",\n            url: \"#\",\n            icon: Icons.x,\n         },\n         email: {\n            name: \"Send Email\",\n            url: \"#\",\n            icon: Icons.email,\n         },\n      },\n   },\n}\n\nexport default function DockDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Dock\n         </span>\n         <TooltipProvider>\n            <Dock direction=\"middle\">\n               {DATA.navbar.map((item) => (\n                  <DockIcon key={item.label}>\n                     <Tooltip>\n                        <TooltipTrigger asChild>\n                           <Link\n                              href={item.href}\n                              aria-label={item.label}\n                              className={cn(\n                                 buttonVariants({\n                                    variant: \"ghost\",\n                                    size: \"icon\",\n                                 }),\n                                 \"size-12 rounded-full\",\n                              )}\n                           >\n                              <item.icon className=\"size-4\" />\n                           </Link>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                           <p>{item.label}</p>\n                        </TooltipContent>\n                     </Tooltip>\n                  </DockIcon>\n               ))}\n               <Separator orientation=\"vertical\" className=\"h-full\" />\n               {Object.entries(DATA.contact.social).map(([name, social]) => (\n                  <DockIcon key={name}>\n                     <Tooltip>\n                        <TooltipTrigger asChild>\n                           <Link\n                              href={social.url}\n                              aria-label={social.name}\n                              className={cn(\n                                 buttonVariants({\n                                    variant: \"ghost\",\n                                    size: \"icon\",\n                                 }),\n                                 \"size-12 rounded-full\",\n                              )}\n                           >\n                              <social.icon className=\"size-4\" />\n                           </Link>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                           <p>{name}</p>\n                        </TooltipContent>\n                     </Tooltip>\n                  </DockIcon>\n               ))}\n               <Separator orientation=\"vertical\" className=\"h-full py-2\" />\n               <DockIcon>\n                  <Tooltip>\n                     <TooltipTrigger asChild>\n                        <ModeToggle className=\"rounded-full\" />\n                     </TooltipTrigger>\n                     <TooltipContent>\n                        <p>Theme</p>\n                     </TooltipContent>\n                  </Tooltip>\n               </DockIcon>\n            </Dock>\n         </TooltipProvider>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dock.json b/apps/web/public/v0/styles/default/dock.json
new file mode 100644
index 00000000..2bc98025
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dock.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dock",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/dock.tsx",
+      "content": "\"use client\"\n\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport { motion, useMotionValue, useSpring, useTransform } from \"framer-motion\"\nimport type { PropsWithChildren } from \"react\"\nimport React, { useRef } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface DockProps extends VariantProps<typeof dockVariants> {\n   className?: string\n   magnification?: number\n   distance?: number\n   direction?: \"top\" | \"middle\" | \"bottom\"\n   children: React.ReactNode\n}\n\nconst DEFAULT_MAGNIFICATION = 60\nconst DEFAULT_DISTANCE = 140\n\nconst dockVariants = cva(\n   \"supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md\",\n)\n\nconst Dock = React.forwardRef<HTMLDivElement, DockProps>(\n   (\n      {\n         className,\n         children,\n         magnification = DEFAULT_MAGNIFICATION,\n         distance = DEFAULT_DISTANCE,\n         direction = \"bottom\",\n         ...props\n      },\n      ref,\n   ) => {\n      const mouseX = useMotionValue(Number.POSITIVE_INFINITY)\n\n      const renderChildren = () => {\n         return React.Children.map(children, (child) => {\n            if (React.isValidElement(child) && child.type === DockIcon) {\n               return React.cloneElement(child, {\n                  ...child.props,\n                  mouseX,\n                  magnification,\n                  distance,\n               })\n            }\n            return child\n         })\n      }\n\n      return (\n         <motion.div\n            ref={ref}\n            onMouseMove={(e) => mouseX.set(e.pageX)}\n            onMouseLeave={() => mouseX.set(Number.POSITIVE_INFINITY)}\n            {...props}\n            className={cn(dockVariants({ className }), {\n               \"items-start\": direction === \"top\",\n               \"items-center\": direction === \"middle\",\n               \"items-end\": direction === \"bottom\",\n            })}\n         >\n            {renderChildren()}\n         </motion.div>\n      )\n   },\n)\n\nDock.displayName = \"Dock\"\n\nexport interface DockIconProps {\n   size?: number\n   magnification?: number\n   distance?: number\n   mouseX?: any\n   className?: string\n   children?: React.ReactNode\n   props?: PropsWithChildren\n}\n\nfunction DockIcon({\n   size,\n   magnification = DEFAULT_MAGNIFICATION,\n   distance = DEFAULT_DISTANCE,\n   mouseX,\n   className,\n   children,\n   ...props\n}: DockIconProps) {\n   const ref = useRef<HTMLDivElement>(null)\n\n   const distanceCalc = useTransform(mouseX, (val: number) => {\n      const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 }\n\n      return val - bounds.x - bounds.width / 2\n   })\n\n   const widthSync = useTransform(\n      distanceCalc,\n      [-distance, 0, distance],\n      [40, magnification, 40],\n   )\n\n   const width = useSpring(widthSync, {\n      mass: 0.1,\n      stiffness: 150,\n      damping: 12,\n   })\n\n   return (\n      <motion.div\n         ref={ref}\n         style={{ width }}\n         className={cn(\n            \"flex aspect-square cursor-pointer items-center justify-center rounded-full\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n      </motion.div>\n   )\n}\n\nDockIcon.displayName = \"DockIcon\"\n\nexport { Dock, DockIcon, dockVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dot-pattern-demo.json b/apps/web/public/v0/styles/default/dot-pattern-demo.json
new file mode 100644
index 00000000..a0de8597
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dot-pattern-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dot-pattern-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/dot-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { DotPattern } from \"@/components/ui/dot-pattern\"\n\nexport default function DotPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Dot Pattern\n         </p>\n         <DotPattern\n            className={cn(\n               \"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dot-pattern-linear-gradient.json b/apps/web/public/v0/styles/default/dot-pattern-linear-gradient.json
new file mode 100644
index 00000000..bff121c5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dot-pattern-linear-gradient.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dot-pattern-linear-gradient",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/dot-pattern-linear-gradient.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { DotPattern } from \"@/components/ui/dot-pattern\"\n\nexport default function DotPatternLinearGradient() {\n   return (\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Dot Pattern\n         </p>\n         <DotPattern\n            width={20}\n            height={20}\n            cx={1}\n            cy={1}\n            cr={1}\n            className={cn(\n               \"[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] \",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dot-pattern.json b/apps/web/public/v0/styles/default/dot-pattern.json
new file mode 100644
index 00000000..5cac37b2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dot-pattern.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dot-pattern",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/dot-pattern.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface DotPatternProps extends React.SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   cx?: number\n   cy?: number\n   cr?: number\n   className?: string\n   [key: string]: unknown\n}\nexport function DotPattern({\n   width = 16,\n   height = 16,\n   x = 0,\n   y = 0,\n   cx = 1,\n   cy = 1,\n   cr = 1,\n   className,\n   ...props\n}: DotPatternProps) {\n   const id = useId()\n\n   return (\n      <svg\n         aria-hidden=\"true\"\n         className={cn(\n            \"pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80\",\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               patternContentUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <circle id=\"pattern-circle\" cx={cx} cy={cy} r={cr} />\n            </pattern>\n         </defs>\n         <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill={`url(#${id})`}\n         />\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/drawer-demo.json b/apps/web/public/v0/styles/default/drawer-demo.json
new file mode 100644
index 00000000..5d3bdf48
--- /dev/null
+++ b/apps/web/public/v0/styles/default/drawer-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "drawer-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "examples/drawer-demo.tsx",
+      "content": "import { Minus, Plus } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"@/components/ui/drawer\"\n\nconst data = [\n   {\n      goal: 400,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 239,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 349,\n   },\n]\n\nexport default function DrawerDemo() {\n   const [goal, setGoal] = React.useState(350)\n\n   function onClick(adjustment: number) {\n      setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n   }\n\n   return (\n      <Drawer>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Open Drawer</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mx-auto w-full max-w-sm\">\n               <DrawerHeader>\n                  <DrawerTitle>Move Goal</DrawerTitle>\n                  <DrawerDescription>\n                     Set your daily activity goal.\n                  </DrawerDescription>\n               </DrawerHeader>\n               <div className=\"p-4 pb-0\">\n                  <div className=\"flex items-center justify-center space-x-2\">\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"size-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(-10)}\n                        disabled={goal <= 200}\n                     >\n                        <Minus className=\"size-4\" />\n                        <span className=\"sr-only\">Decrease</span>\n                     </Button>\n                     <div className=\"flex-1 text-center\">\n                        <div className=\"text-7xl font-bold tracking-tighter\">\n                           {goal}\n                        </div>\n                        <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                           Calories/day\n                        </div>\n                     </div>\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"size-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(10)}\n                        disabled={goal >= 400}\n                     >\n                        <Plus className=\"size-4\" />\n                        <span className=\"sr-only\">Increase</span>\n                     </Button>\n                  </div>\n                  <div className=\"mt-3 h-[120px]\">\n                     <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data}>\n                           <Bar\n                              dataKey=\"goal\"\n                              style={\n                                 {\n                                    fill: \"hsl(var(--foreground))\",\n                                    opacity: 0.9,\n                                 } as React.CSSProperties\n                              }\n                           />\n                        </BarChart>\n                     </ResponsiveContainer>\n                  </div>\n               </div>\n               <DrawerFooter>\n                  <Button>Submit</Button>\n                  <DrawerClose asChild>\n                     <Button variant=\"outline\">Cancel</Button>\n                  </DrawerClose>\n               </DrawerFooter>\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/drawer-dialog.json b/apps/web/public/v0/styles/default/drawer-dialog.json
new file mode 100644
index 00000000..4d1a0e45
--- /dev/null
+++ b/apps/web/public/v0/styles/default/drawer-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "drawer-dialog",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "drawer",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/drawer-dialog.tsx",
+      "content": "import * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"@/components/ui/drawer\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function DrawerDialogDemo() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n   if (isDesktop) {\n      return (\n         <Dialog open={open} onOpenChange={setOpen}>\n            <DialogTrigger asChild>\n               <Button variant=\"outline\">Edit Profile</Button>\n            </DialogTrigger>\n            <DialogContent className=\"sm:max-w-[425px]\">\n               <DialogHeader>\n                  <DialogTitle>Edit profile</DialogTitle>\n                  <DialogDescription>\n                     Make changes to your profile here. Click save when you're\n                     done.\n                  </DialogDescription>\n               </DialogHeader>\n               <ProfileForm />\n            </DialogContent>\n         </Dialog>\n      )\n   }\n\n   return (\n      <Drawer open={open} onOpenChange={setOpen}>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <DrawerHeader className=\"text-left\">\n               <DrawerTitle>Edit profile</DrawerTitle>\n               <DrawerDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </DrawerDescription>\n            </DrawerHeader>\n            <ProfileForm className=\"px-4\" />\n            <DrawerFooter className=\"pt-2\">\n               <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n               </DrawerClose>\n            </DrawerFooter>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n   return (\n      <form className={cn(\"grid items-start gap-4\", className)}>\n         <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input type=\"email\" id=\"email\" defaultValue=\"nyxb@example.com\" />\n         </div>\n         <div className=\"grid gap-2\">\n            <Label htmlFor=\"username\">Username</Label>\n            <Input id=\"username\" defaultValue=\"~nyxb\" />\n         </div>\n         <Button type=\"submit\">Save changes</Button>\n      </form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/drawer.json b/apps/web/public/v0/styles/default/drawer.json
new file mode 100644
index 00000000..b8d08db3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/drawer.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "drawer",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "vaul",
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/drawer.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Drawer({\n   shouldScaleBackground = true,\n   ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n   return (\n      <DrawerPrimitive.Root\n         shouldScaleBackground={shouldScaleBackground}\n         {...props}\n      />\n   )\n}\nDrawer.displayName = \"Drawer\"\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Overlay\n      ref={ref}\n      className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n      {...props}\n   />\n))\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\n\nconst DrawerContent = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n         ref={ref}\n         className={cn(\n            \"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border\",\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"bg-muted mx-auto mt-4 h-2 w-[100px] cursor-grab rounded-full active:cursor-grabbing\" />\n         {children}\n      </DrawerPrimitive.Content>\n   </DrawerPortal>\n))\nDrawerContent.displayName = \"DrawerContent\"\n\nfunction DrawerHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n         {...props}\n      />\n   )\n}\nDrawerHeader.displayName = \"DrawerHeader\"\n\nfunction DrawerFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n         {...props}\n      />\n   )\n}\nDrawerFooter.displayName = \"DrawerFooter\"\n\nconst DrawerTitle = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Title\n      ref={ref}\n      className={cn(\n         \"text-lg font-semibold leading-none tracking-tight\",\n         className,\n      )}\n      {...props}\n   />\n))\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\n\nconst DrawerDescription = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Description\n      ref={ref}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\n\nexport {\n   Drawer,\n   DrawerPortal,\n   DrawerOverlay,\n   DrawerTrigger,\n   DrawerClose,\n   DrawerContent,\n   DrawerHeader,\n   DrawerFooter,\n   DrawerTitle,\n   DrawerDescription,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dropdown-menu-checkboxes.json b/apps/web/public/v0/styles/default/dropdown-menu-checkboxes.json
new file mode 100644
index 00000000..6420a0a1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dropdown-menu-checkboxes.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dropdown-menu-checkboxes",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "dropdown-menu",
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-checkboxes.tsx",
+      "content": "\"use client\"\n\nimport type { DropdownMenuCheckboxItemProps } from \"@radix-ui/react-dropdown-menu\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuCheckboxItem,\n   DropdownMenuContent,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\ntype Checked = DropdownMenuCheckboxItemProps[\"checked\"]\n\nexport default function DropdownMenuCheckboxes() {\n   const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)\n   const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)\n   const [showPanel, setShowPanel] = React.useState<Checked>(false)\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuCheckboxItem\n               checked={showStatusBar}\n               onCheckedChange={setShowStatusBar}\n            >\n               Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n               checked={showActivityBar}\n               onCheckedChange={setShowActivityBar}\n               disabled\n            >\n               Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n               checked={showPanel}\n               onCheckedChange={setShowPanel}\n            >\n               Panel\n            </DropdownMenuCheckboxItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dropdown-menu-demo.json b/apps/web/public/v0/styles/default/dropdown-menu-demo.json
new file mode 100644
index 00000000..aaf4b0ef
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dropdown-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dropdown-menu-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-demo.tsx",
+      "content": "import {\n   Cloud,\n   CreditCard,\n   Github,\n   Keyboard,\n   LifeBuoy,\n   LogOut,\n   Mail,\n   MessageSquare,\n   Plus,\n   PlusCircle,\n   Settings,\n   User,\n   UserPlus,\n   Users,\n} from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuPortal,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function DropdownMenuDemo() {\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  <User />\n                  <span>Profile</span>\n                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  <CreditCard />\n                  <span>Billing</span>\n                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  <Settings />\n                  <span>Settings</span>\n                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  <Keyboard />\n                  <span>Keyboard shortcuts</span>\n                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  <Users />\n                  <span>Team</span>\n               </DropdownMenuItem>\n               <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                     <UserPlus />\n                     <span>Invite users</span>\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                     <DropdownMenuSubContent>\n                        <DropdownMenuItem>\n                           <Mail />\n                           <span>Email</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <MessageSquare />\n                           <span>Message</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <PlusCircle />\n                           <span>More...</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n               </DropdownMenuSub>\n               <DropdownMenuItem>\n                  <Plus />\n                  <span>New Team</span>\n                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               <Github />\n               <span>GitHub</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n               <LifeBuoy />\n               <span>Support</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>\n               <Cloud />\n               <span>API</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               <LogOut />\n               <span>Log out</span>\n               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dropdown-menu-radio-group.json b/apps/web/public/v0/styles/default/dropdown-menu-radio-group.json
new file mode 100644
index 00000000..c6fafa01
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dropdown-menu-radio-group.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dropdown-menu-radio-group",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "dropdown-menu",
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuLabel,\n   DropdownMenuRadioGroup,\n   DropdownMenuRadioItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function DropdownMenuRadioGroupDemo() {\n   const [position, setPosition] = React.useState(\"bottom\")\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuRadioGroup\n               value={position}\n               onValueChange={setPosition}\n            >\n               <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n               <DropdownMenuRadioItem value=\"bottom\">\n                  Bottom\n               </DropdownMenuRadioItem>\n               <DropdownMenuRadioItem value=\"right\">\n                  Right\n               </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/dropdown-menu.json b/apps/web/public/v0/styles/default/dropdown-menu.json
new file mode 100644
index 00000000..1e67c43d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/dropdown-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dropdown-menu",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "ui/dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n   </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n   DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      className={cn(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg\",\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuSubContent.displayName =\n   DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n   <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n         ref={ref}\n         sideOffset={sideOffset}\n         className={cn(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md\",\n            className,\n         )}\n         {...props}\n      />\n   </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <DropdownMenuPrimitive.Item\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <DropdownMenuPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n   DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <DropdownMenuPrimitive.ItemIndicator>\n            <Circle className=\"size-2 fill-current\" />\n         </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <DropdownMenuPrimitive.Label\n      ref={ref}\n      className={cn(\n         \"px-2 py-1.5 text-sm font-semibold\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <DropdownMenuPrimitive.Separator\n      ref={ref}\n      className={cn(\"bg-muted -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nfunction DropdownMenuShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n         {...props}\n      />\n   )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n   DropdownMenu,\n   DropdownMenuTrigger,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuCheckboxItem,\n   DropdownMenuRadioItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuGroup,\n   DropdownMenuPortal,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuRadioGroup,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/fade-text-demo.json b/apps/web/public/v0/styles/default/fade-text-demo.json
new file mode 100644
index 00000000..4f77908b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/fade-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "fade-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/fade-text-demo.tsx",
+      "content": "import { FadeText } from \"@/components/ui/fade-text\"\n\nexport default async function FadeTextDemo() {\n   return (\n      <div className=\"flex flex-col space-y-8 text-center\">\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"up\"\n            framerProps={{\n               show: { transition: { delay: 0.2 } },\n            }}\n            text=\"Fade Up\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"right\"\n            framerProps={{\n               show: { transition: { delay: 0.4 } },\n            }}\n            text=\"Fade Right\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"down\"\n            framerProps={{\n               show: { transition: { delay: 0.6 } },\n            }}\n            text=\"Fade Down\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"left\"\n            framerProps={{\n               show: { transition: { delay: 0.8 } },\n            }}\n            text=\"Fade Left\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/fade-text.json b/apps/web/public/v0/styles/default/fade-text.json
new file mode 100644
index 00000000..ba304d50
--- /dev/null
+++ b/apps/web/public/v0/styles/default/fade-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "fade-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/fade-text.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { motion } from \"framer-motion\"\nimport { useMemo } from \"react\"\n\ninterface FadeTextProps {\n   className?: string\n   direction?: \"up\" | \"down\" | \"left\" | \"right\"\n   framerProps?: Variants\n   text: string\n}\n\nexport function FadeText({\n   direction = \"up\",\n   className,\n   framerProps = {\n      hidden: { opacity: 0 },\n      show: { opacity: 1, transition: { type: \"spring\" } },\n   },\n   text,\n}: FadeTextProps) {\n   const directionOffset = useMemo(() => {\n      const map = { up: 10, down: -10, left: -10, right: 10 }\n      return map[direction]\n   }, [direction])\n\n   const axis = direction === \"up\" || direction === \"down\" ? \"y\" : \"x\"\n\n   const FADE_ANIMATION_VARIANTS = useMemo(() => {\n      const { hidden, show, ...rest } = framerProps as {\n         [name: string]: { [name: string]: number; opacity: number }\n      }\n\n      return {\n         ...rest,\n         hidden: {\n            ...(hidden ?? {}),\n            opacity: hidden?.opacity ?? 0,\n            [axis]: hidden?.[axis] ?? directionOffset,\n         },\n         show: {\n            ...(show ?? {}),\n            opacity: show?.opacity ?? 1,\n            [axis]: show?.[axis] ?? 0,\n         },\n      }\n   }, [directionOffset, axis, framerProps])\n\n   return (\n      <motion.div\n         initial=\"hidden\"\n         animate=\"show\"\n         viewport={{ once: true }}\n         variants={FADE_ANIMATION_VARIANTS}\n      >\n         <motion.span className={className}>{text}</motion.span>\n      </motion.div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/file-tree-demo.json b/apps/web/public/v0/styles/default/file-tree-demo.json
new file mode 100644
index 00000000..741e6e46
--- /dev/null
+++ b/apps/web/public/v0/styles/default/file-tree-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "file-tree-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/file-tree-demo.tsx",
+      "content": "import { File, Folder, Tree } from \"@/components/ui/file-tree\"\n\nexport default function FileTreeDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[300px] w-1/2 flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <Tree\n            className=\"bg-background overflow-hidden rounded-md p-2\"\n            initialSelectedId=\"7\"\n            initialExpandedItems={[\n               \"1\",\n               \"2\",\n               \"3\",\n               \"4\",\n               \"5\",\n               \"6\",\n               \"7\",\n               \"8\",\n               \"9\",\n               \"10\",\n               \"11\",\n            ]}\n            elements={ELEMENTS}\n         >\n            <Folder element=\"src\" value=\"1\">\n               <Folder value=\"2\" element=\"app\">\n                  <File value=\"3\">\n                     <p>layout.tsx</p>\n                  </File>\n                  <File value=\"4\">\n                     <p>page.tsx</p>\n                  </File>\n               </Folder>\n               <Folder value=\"5\" element=\"components\">\n                  <Folder value=\"6\" element=\"ui\">\n                     <File value=\"7\">\n                        <p>button.tsx</p>\n                     </File>\n                  </Folder>\n                  <File value=\"8\">\n                     <p>header.tsx</p>\n                  </File>\n                  <File value=\"9\">\n                     <p>footer.tsx</p>\n                  </File>\n               </Folder>\n               <Folder value=\"10\" element=\"lib\">\n                  <File value=\"11\">\n                     <p>utils.ts</p>\n                  </File>\n               </Folder>\n            </Folder>\n         </Tree>\n      </div>\n   )\n}\n\nconst ELEMENTS = [\n   {\n      id: \"1\",\n      isSelectable: true,\n      name: \"src\",\n      children: [\n         {\n            id: \"2\",\n            isSelectable: true,\n            name: \"app\",\n            children: [\n               {\n                  id: \"3\",\n                  isSelectable: true,\n                  name: \"layout.tsx\",\n               },\n               {\n                  id: \"4\",\n                  isSelectable: true,\n                  name: \"page.tsx\",\n               },\n            ],\n         },\n         {\n            id: \"5\",\n            isSelectable: true,\n            name: \"components\",\n            children: [\n               {\n                  id: \"6\",\n                  isSelectable: true,\n                  name: \"header.tsx\",\n               },\n               {\n                  id: \"7\",\n                  isSelectable: true,\n                  name: \"footer.tsx\",\n               },\n            ],\n         },\n         {\n            id: \"8\",\n            isSelectable: true,\n            name: \"lib\",\n            children: [\n               {\n                  id: \"9\",\n                  isSelectable: true,\n                  name: \"utils.ts\",\n               },\n            ],\n         },\n      ],\n   },\n]\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/file-tree.json b/apps/web/public/v0/styles/default/file-tree.json
new file mode 100644
index 00000000..85f7de40
--- /dev/null
+++ b/apps/web/public/v0/styles/default/file-tree.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "file-tree",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/file-tree.tsx",
+      "content": "\"use client\"\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\"\nimport type React from \"react\"\nimport {\n   createContext,\n   forwardRef,\n   useCallback,\n   useContext,\n   useEffect,\n   useState,\n} from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\ninterface TreeViewElement {\n   id: string\n   name: string\n   isSelectable?: boolean\n   children?: TreeViewElement[]\n}\n\ninterface TreeContextProps {\n   selectedId: string | undefined\n   expandedItems: string[] | undefined\n   indicator: boolean\n   handleExpand: (id: string) => void\n   selectItem: (id: string) => void\n   setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>\n   openIcon?: React.ReactNode\n   closeIcon?: React.ReactNode\n   direction: \"rtl\" | \"ltr\"\n}\n\nconst TreeContext = createContext<TreeContextProps | null>(null)\n\nfunction useTree() {\n   const context = useContext(TreeContext)\n   if (!context) {\n      throw new Error(\"useTree must be used within a TreeProvider\")\n   }\n   return context\n}\n\ninterface TreeViewComponentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\ntype Direction = \"rtl\" | \"ltr\" | undefined\n\ntype TreeViewProps = {\n   initialSelectedId?: string\n   indicator?: boolean\n   elements?: TreeViewElement[]\n   initialExpandedItems?: string[]\n   openIcon?: React.ReactNode\n   closeIcon?: React.ReactNode\n} & TreeViewComponentProps\n\nconst Tree = forwardRef<HTMLDivElement, TreeViewProps>(\n   (\n      {\n         className,\n         elements,\n         initialSelectedId,\n         initialExpandedItems,\n         children,\n         indicator = true,\n         openIcon,\n         closeIcon,\n         dir,\n         ...props\n      },\n      ref,\n   ) => {\n      const [selectedId, setSelectedId] = useState<string | undefined>(\n         initialSelectedId,\n      )\n      const [expandedItems, setExpandedItems] = useState<string[] | undefined>(\n         initialExpandedItems,\n      )\n\n      const selectItem = useCallback((id: string) => {\n         setSelectedId(id)\n      }, [])\n\n      const handleExpand = useCallback((id: string) => {\n         setExpandedItems((prev) => {\n            if (prev?.includes(id)) {\n               return prev.filter((item) => item !== id)\n            }\n            return [...(prev ?? []), id]\n         })\n      }, [])\n\n      const expandSpecificTargetedElements = useCallback(\n         (elements?: TreeViewElement[], selectId?: string) => {\n            if (!elements || !selectId) return\n            const findParent = (\n               currentElement: TreeViewElement,\n               currentPath: string[] = [],\n            ) => {\n               const isSelectable = currentElement.isSelectable ?? true\n               const newPath = [...currentPath, currentElement.id]\n               if (currentElement.id === selectId) {\n                  if (isSelectable) {\n                     setExpandedItems((prev) => [...(prev ?? []), ...newPath])\n                  } else {\n                     if (newPath.includes(currentElement.id)) {\n                        newPath.pop()\n                        setExpandedItems((prev) => [\n                           ...(prev ?? []),\n                           ...newPath,\n                        ])\n                     }\n                  }\n                  return\n               }\n               if (\n                  isSelectable &&\n                  currentElement.children &&\n                  currentElement.children.length > 0\n               ) {\n                  currentElement.children.forEach((child) => {\n                     findParent(child, newPath)\n                  })\n               }\n            }\n            elements.forEach((element) => {\n               findParent(element)\n            })\n         },\n         [],\n      )\n\n      useEffect(() => {\n         if (initialSelectedId) {\n            expandSpecificTargetedElements(elements, initialSelectedId)\n         }\n      }, [initialSelectedId, elements])\n\n      const direction = dir === \"rtl\" ? \"rtl\" : \"ltr\"\n\n      return (\n         <TreeContext.Provider\n            value={{\n               selectedId,\n               expandedItems,\n               handleExpand,\n               selectItem,\n               setExpandedItems,\n               indicator,\n               openIcon,\n               closeIcon,\n               direction,\n            }}\n         >\n            <div className={cn(\"size-full\", className)}>\n               <ScrollArea\n                  ref={ref}\n                  className=\"relative h-full px-2\"\n                  dir={dir as Direction}\n               >\n                  <AccordionPrimitive.Root\n                     {...props}\n                     type=\"multiple\"\n                     defaultValue={expandedItems}\n                     value={expandedItems}\n                     className=\"flex flex-col gap-1\"\n                     onValueChange={(value) =>\n                        setExpandedItems((prev) => [...(prev ?? []), value[0]])\n                     }\n                     dir={dir as Direction}\n                  >\n                     {children}\n                  </AccordionPrimitive.Root>\n               </ScrollArea>\n            </div>\n         </TreeContext.Provider>\n      )\n   },\n)\n\nTree.displayName = \"Tree\"\n\nconst TreeIndicator = forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { direction } = useTree()\n\n   return (\n      <div\n         dir={direction}\n         ref={ref}\n         className={cn(\n            \"bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\n\nTreeIndicator.displayName = \"TreeIndicator\"\n\ninterface FolderComponentProps\n   extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {}\n\ntype FolderProps = {\n   expandedItems?: string[]\n   element: string\n   isSelectable?: boolean\n   isSelect?: boolean\n} & FolderComponentProps\n\nconst Folder = forwardRef<\n   HTMLDivElement,\n   FolderProps & React.HTMLAttributes<HTMLDivElement>\n>(\n   (\n      {\n         className,\n         element,\n         value,\n         isSelectable = true,\n         isSelect,\n         children,\n         ...props\n      },\n      _ref,\n   ) => {\n      const {\n         direction,\n         handleExpand,\n         expandedItems,\n         indicator,\n         setExpandedItems,\n         openIcon,\n         closeIcon,\n      } = useTree()\n\n      return (\n         <AccordionPrimitive.Item\n            {...props}\n            value={value}\n            className=\"relative h-full overflow-hidden \"\n         >\n            <AccordionPrimitive.Trigger\n               className={cn(\n                  `flex items-center gap-1 rounded-md text-sm`,\n                  className,\n                  {\n                     \"bg-muted rounded-md\": isSelect && isSelectable,\n                     \"cursor-pointer\": isSelectable,\n                     \"cursor-not-allowed opacity-50\": !isSelectable,\n                  },\n               )}\n               disabled={!isSelectable}\n               onClick={() => handleExpand(value)}\n            >\n               {expandedItems?.includes(value)\n                  ? (openIcon ?? <FolderOpenIcon className=\"size-4\" />)\n                  : (closeIcon ?? <FolderIcon className=\"size-4\" />)}\n               <span>{element}</span>\n            </AccordionPrimitive.Trigger>\n            <AccordionPrimitive.Content className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative h-full overflow-hidden text-sm\">\n               {element && indicator && <TreeIndicator aria-hidden=\"true\" />}\n               <AccordionPrimitive.Root\n                  dir={direction}\n                  type=\"multiple\"\n                  className=\"ml-5 flex flex-col gap-1 py-1 rtl:mr-5 \"\n                  defaultValue={expandedItems}\n                  value={expandedItems}\n                  onValueChange={(value) => {\n                     setExpandedItems?.((prev) => [...(prev ?? []), value[0]])\n                  }}\n               >\n                  {children}\n               </AccordionPrimitive.Root>\n            </AccordionPrimitive.Content>\n         </AccordionPrimitive.Item>\n      )\n   },\n)\n\nFolder.displayName = \"Folder\"\n\nconst File = forwardRef<\n   HTMLButtonElement,\n   {\n      value: string\n      handleSelect?: (id: string) => void\n      isSelectable?: boolean\n      isSelect?: boolean\n      fileIcon?: React.ReactNode\n   } & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(\n   (\n      {\n         value,\n         className,\n         handleSelect,\n         isSelectable = true,\n         isSelect,\n         fileIcon,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const { direction, selectedId, selectItem } = useTree()\n      const isSelected = isSelect ?? selectedId === value\n      return (\n         <AccordionPrimitive.Item value={value} className=\"relative\">\n            <AccordionPrimitive.Trigger\n               ref={ref}\n               {...props}\n               dir={direction}\n               disabled={!isSelectable}\n               aria-label=\"File\"\n               className={cn(\n                  \"flex cursor-pointer items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out  rtl:pl-1 rtl:pr-0\",\n                  {\n                     \"bg-muted\": isSelected && isSelectable,\n                  },\n                  isSelectable\n                     ? \"cursor-pointer\"\n                     : \"cursor-not-allowed opacity-50\",\n                  className,\n               )}\n               onClick={() => selectItem(value)}\n            >\n               {fileIcon ?? <FileIcon className=\"size-4\" />}\n               {children}\n            </AccordionPrimitive.Trigger>\n         </AccordionPrimitive.Item>\n      )\n   },\n)\n\nFile.displayName = \"File\"\n\nconst CollapseButton = forwardRef<\n   HTMLButtonElement,\n   {\n      elements: TreeViewElement[]\n      expandAll?: boolean\n   } & React.HTMLAttributes<HTMLButtonElement>\n>(({ className, elements, expandAll = false, children, ...props }, ref) => {\n   const { expandedItems, setExpandedItems } = useTree()\n\n   const expendAllTree = useCallback((elements: TreeViewElement[]) => {\n      const expandTree = (element: TreeViewElement) => {\n         const isSelectable = element.isSelectable ?? true\n         if (isSelectable && element.children && element.children.length > 0) {\n            setExpandedItems?.((prev) => [...(prev ?? []), element.id])\n            element.children.forEach(expandTree)\n         }\n      }\n\n      elements.forEach(expandTree)\n   }, [])\n\n   const closeAll = useCallback(() => {\n      setExpandedItems?.([])\n   }, [])\n\n   useEffect(() => {\n      // eslint-disable-next-line no-console\n      console.log(expandAll)\n      if (expandAll) {\n         expendAllTree(elements)\n      }\n   }, [expandAll])\n\n   return (\n      <Button\n         variant=\"ghost\"\n         className=\"absolute bottom-1 right-2 h-8 w-fit p-1\"\n         onClick={\n            expandedItems && expandedItems.length > 0\n               ? closeAll\n               : () => expendAllTree(elements)\n         }\n         ref={ref}\n         {...props}\n      >\n         {children}\n         <span className=\"sr-only\">Toggle</span>\n      </Button>\n   )\n})\n\nCollapseButton.displayName = \"CollapseButton\"\n\nexport { CollapseButton, File, Folder, Tree, type TreeViewElement }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/flickering-grid-demo.json b/apps/web/public/v0/styles/default/flickering-grid-demo.json
new file mode 100644
index 00000000..b797cfd7
--- /dev/null
+++ b/apps/web/public/v0/styles/default/flickering-grid-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "flickering-grid-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/flickering-grid-demo.tsx",
+      "content": "import { FlickeringGrid } from \"@/components/ui/flickering-grid\"\n\nexport default function FlickeringGridDemo() {\n   return (\n      <div className=\"relative h-[500px] w-full overflow-hidden rounded-lg border bg-background\">\n         <FlickeringGrid\n            className=\"absolute inset-0 z-0 size-full\"\n            squareSize={4}\n            gridGap={6}\n            color=\"#6B7280\"\n            maxOpacity={0.5}\n            flickerChance={0.1}\n            height={800}\n            width={800}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/flickering-grid-rounded-demo.json b/apps/web/public/v0/styles/default/flickering-grid-rounded-demo.json
new file mode 100644
index 00000000..269b269a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/flickering-grid-rounded-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "flickering-grid-rounded-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/flickering-grid-rounded-demo.tsx",
+      "content": "import { FlickeringGrid } from \"@/components/ui/flickering-grid\"\n\nexport default function FlickeringGridRoundedDemo() {\n   return (\n      <div className=\"relative size-[600px] w-full overflow-hidden rounded-lg border bg-background\">\n         <FlickeringGrid\n            className=\"relative inset-0 z-0 [mask-image:radial-gradient(450px_circle_at_center,white,transparent)]\"\n            squareSize={4}\n            gridGap={6}\n            color=\"#60A5FA\"\n            maxOpacity={0.5}\n            flickerChance={0.1}\n            height={800}\n            width={800}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/flickering-grid.json b/apps/web/public/v0/styles/default/flickering-grid.json
new file mode 100644
index 00000000..a190ee81
--- /dev/null
+++ b/apps/web/public/v0/styles/default/flickering-grid.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "flickering-grid",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/flickering-grid.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {\n   squareSize?: number\n   gridGap?: number\n   flickerChance?: number\n   color?: string\n   width?: number\n   height?: number\n   className?: string\n   maxOpacity?: number\n}\n\nexport const FlickeringGrid: React.FC<FlickeringGridProps> = ({\n   squareSize = 4,\n   gridGap = 6,\n   flickerChance = 0.3,\n   color = \"rgb(0, 0, 0)\",\n   width,\n   height,\n   className,\n   maxOpacity = 0.3,\n   ...props\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const containerRef = useRef<HTMLDivElement>(null)\n   const [isInView, setIsInView] = useState(false)\n   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 })\n\n   const memoizedColor = useMemo(() => {\n      const toRGBA = (color: string) => {\n         if (typeof window === \"undefined\") {\n            return `rgba(0, 0, 0,`\n         }\n         const canvas = document.createElement(\"canvas\")\n         canvas.width = canvas.height = 1\n         const ctx = canvas.getContext(\"2d\")\n         if (!ctx) return \"rgba(255, 0, 0,\"\n         ctx.fillStyle = color\n         ctx.fillRect(0, 0, 1, 1)\n         const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)\n         return `rgba(${r}, ${g}, ${b},`\n      }\n      return toRGBA(color)\n   }, [color])\n\n   const setupCanvas = useCallback(\n      (canvas: HTMLCanvasElement, width: number, height: number) => {\n         const dpr = window.devicePixelRatio || 1\n         canvas.width = width * dpr\n         canvas.height = height * dpr\n         canvas.style.width = `${width}px`\n         canvas.style.height = `${height}px`\n         const cols = Math.floor(width / (squareSize + gridGap))\n         const rows = Math.floor(height / (squareSize + gridGap))\n\n         const squares = new Float32Array(cols * rows)\n         for (let i = 0; i < squares.length; i++) {\n            squares[i] = Math.random() * maxOpacity\n         }\n\n         return { cols, rows, squares, dpr }\n      },\n      [squareSize, gridGap, maxOpacity],\n   )\n\n   const updateSquares = useCallback(\n      (squares: Float32Array, deltaTime: number) => {\n         for (let i = 0; i < squares.length; i++) {\n            if (Math.random() < flickerChance * deltaTime) {\n               squares[i] = Math.random() * maxOpacity\n            }\n         }\n      },\n      [flickerChance, maxOpacity],\n   )\n\n   const drawGrid = useCallback(\n      (\n         ctx: CanvasRenderingContext2D,\n         width: number,\n         height: number,\n         cols: number,\n         rows: number,\n         squares: Float32Array,\n         dpr: number,\n      ) => {\n         ctx.clearRect(0, 0, width, height)\n         ctx.fillStyle = \"transparent\"\n         ctx.fillRect(0, 0, width, height)\n\n         for (let i = 0; i < cols; i++) {\n            for (let j = 0; j < rows; j++) {\n               const opacity = squares[i * rows + j]\n               ctx.fillStyle = `${memoizedColor}${opacity})`\n               ctx.fillRect(\n                  i * (squareSize + gridGap) * dpr,\n                  j * (squareSize + gridGap) * dpr,\n                  squareSize * dpr,\n                  squareSize * dpr,\n               )\n            }\n         }\n      },\n      [memoizedColor, squareSize, gridGap],\n   )\n\n   useEffect(() => {\n      const canvas = canvasRef.current\n      const container = containerRef.current\n      if (!canvas || !container) return\n\n      const ctx = canvas.getContext(\"2d\")\n      if (!ctx) return\n\n      let animationFrameId: number\n      let gridParams: ReturnType<typeof setupCanvas>\n\n      const updateCanvasSize = () => {\n         const newWidth = width || container.clientWidth\n         const newHeight = height || container.clientHeight\n         setCanvasSize({ width: newWidth, height: newHeight })\n         gridParams = setupCanvas(canvas, newWidth, newHeight)\n      }\n\n      updateCanvasSize()\n\n      let lastTime = 0\n      const animate = (time: number) => {\n         if (!isInView) return\n\n         const deltaTime = (time - lastTime) / 1000\n         lastTime = time\n\n         updateSquares(gridParams.squares, deltaTime)\n         drawGrid(\n            ctx,\n            canvas.width,\n            canvas.height,\n            gridParams.cols,\n            gridParams.rows,\n            gridParams.squares,\n            gridParams.dpr,\n         )\n         animationFrameId = requestAnimationFrame(animate)\n      }\n\n      const resizeObserver = new ResizeObserver(() => {\n         updateCanvasSize()\n      })\n\n      resizeObserver.observe(container)\n\n      const intersectionObserver = new IntersectionObserver(\n         ([entry]) => {\n            setIsInView(entry.isIntersecting)\n         },\n         { threshold: 0 },\n      )\n\n      intersectionObserver.observe(canvas)\n\n      if (isInView) {\n         animationFrameId = requestAnimationFrame(animate)\n      }\n\n      return () => {\n         cancelAnimationFrame(animationFrameId)\n         resizeObserver.disconnect()\n         intersectionObserver.disconnect()\n      }\n   }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])\n\n   return (\n      <div\n         ref={containerRef}\n         className={cn(`h-full w-full ${className}`)}\n         {...props}\n      >\n         <canvas\n            ref={canvasRef}\n            className=\"pointer-events-none\"\n            style={{\n               width: canvasSize.width,\n               height: canvasSize.height,\n            }}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/flip-text-demo.json b/apps/web/public/v0/styles/default/flip-text-demo.json
new file mode 100644
index 00000000..7fc58305
--- /dev/null
+++ b/apps/web/public/v0/styles/default/flip-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "flip-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/flip-text-demo.tsx",
+      "content": "import FlipText from \"@/components/ui/flip-text\"\n\nexport default async function FlipTextDemo() {\n   return (\n      <FlipText\n         className=\"text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         word=\"Flip Text\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/flip-text.json b/apps/web/public/v0/styles/default/flip-text.json
new file mode 100644
index 00000000..202ef321
--- /dev/null
+++ b/apps/web/public/v0/styles/default/flip-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "flip-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/flip-text.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface SlightFlipProps {\n   word: string\n   duration?: number\n   delayMultiple?: number\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function SlightFlip({\n   word,\n   duration = 0.5,\n   delayMultiple = 0.08,\n   framerProps = {\n      hidden: { rotateX: -90, opacity: 0 },\n      visible: { rotateX: 0, opacity: 1 },\n   },\n   className,\n}: SlightFlipProps) {\n   return (\n      <div className=\"flex justify-center space-x-2\">\n         <AnimatePresence mode=\"wait\">\n            {word.split(\"\").map((char, i) => (\n               <motion.span\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={framerProps}\n                  transition={{ duration, delay: i * delayMultiple }}\n                  className={cn(\"origin-center drop-shadow-sm\", className)}\n               >\n                  {char}\n               </motion.span>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/form.json b/apps/web/public/v0/styles/default/form.json
new file mode 100644
index 00000000..400ee086
--- /dev/null
+++ b/apps/web/public/v0/styles/default/form.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "form",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-label",
+    "@radix-ui/react-slot",
+    "@hookform/resolvers",
+    "zod",
+    "react-hook-form"
+  ],
+  "registryDependencies": [
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "ui/form.tsx",
+      "content": "\"use client\"\n\nimport type * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport * as React from \"react\"\nimport type { ControllerProps, FieldPath, FieldValues } from \"react-hook-form\"\nimport {\n   Controller,\n   FormProvider,\n   useFormContext,\n   useFormState,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/components/ui/label\"\n\nconst Form = FormProvider\n\ninterface FormFieldContextValue<\n   TFieldValues extends FieldValues = FieldValues,\n   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n   name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n   {} as FormFieldContextValue,\n)\n\nfunction FormField<\n   TFieldValues extends FieldValues = FieldValues,\n   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: ControllerProps<TFieldValues, TName>) {\n   return (\n      <FormFieldContext.Provider value={{ name: props.name }}>\n         <Controller {...props} />\n      </FormFieldContext.Provider>\n   )\n}\n\nfunction useFormField() {\n   const fieldContext = React.useContext(FormFieldContext)\n   const itemContext = React.useContext(FormItemContext)\n   const { getFieldState, formState } = useFormContext()\n\n   const fieldState = getFieldState(fieldContext.name, formState)\n\n   if (!fieldContext)\n      throw new Error(\"useFormField should be used within <FormField>\")\n\n   const { id } = itemContext\n\n   return {\n      id,\n      name: fieldContext.name,\n      formItemId: `${id}-form-item`,\n      formDescriptionId: `${id}-form-item-description`,\n      formMessageId: `${id}-form-item-message`,\n      ...fieldState,\n   }\n}\n\ninterface FormItemContextValue {\n   id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n   {} as FormItemContextValue,\n)\n\nconst FormItem = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const id = React.useId()\n\n   return (\n      <FormItemContext.Provider value={{ id }}>\n         <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n      </FormItemContext.Provider>\n   )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n   React.ElementRef<typeof LabelPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n   const { error, formItemId } = useFormField()\n\n   return (\n      <Label\n         ref={ref}\n         className={cn(error && \"text-destructive\", className)}\n         htmlFor={formItemId}\n         {...props}\n      />\n   )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n   React.ElementRef<typeof Slot>,\n   React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n   const { error, formItemId, formDescriptionId, formMessageId } =\n      useFormField()\n\n   return (\n      <Slot\n         ref={ref}\n         id={formItemId}\n         aria-describedby={\n            !error\n               ? `${formDescriptionId}`\n               : `${formDescriptionId} ${formMessageId}`\n         }\n         aria-invalid={!!error}\n         {...props}\n      />\n   )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n   const { formDescriptionId } = useFormField()\n\n   return (\n      <p\n         ref={ref}\n         id={formDescriptionId}\n         className={cn(\"text-muted-foreground text-sm\", className)}\n         {...props}\n      />\n   )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n   const { error, formMessageId } = useFormField()\n   const body = error ? String(error?.message) : children\n\n   if (!body) return null\n\n   return (\n      <p\n         ref={ref}\n         id={formMessageId}\n         className={cn(\"text-destructive text-sm font-medium\", className)}\n         {...props}\n      >\n         {body}\n      </p>\n   )\n})\nFormMessage.displayName = \"FormMessage\"\n\nconst FormGlobalError = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n   const { errors } = useFormState()\n   const rootError = errors.root\n   if (!rootError) return null\n\n   return (\n      <p\n         ref={ref}\n         className={cn(\"text-destructive text-sm font-medium\", className)}\n         {...props}\n      >\n         {rootError.message}\n      </p>\n   )\n})\nFormGlobalError.displayName = \"FormGlobalError\"\n\nexport {\n   useFormField,\n   Form,\n   FormItem,\n   FormLabel,\n   FormControl,\n   FormDescription,\n   FormMessage,\n   FormGlobalError,\n   FormField,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/gauge-circle-demo.json b/apps/web/public/v0/styles/default/gauge-circle-demo.json
new file mode 100644
index 00000000..61a68803
--- /dev/null
+++ b/apps/web/public/v0/styles/default/gauge-circle-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "gauge-circle-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/gauge-circle-demo.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport GaugeCircle from \"@/components/ui/gauge-circle\"\n\nexport default function GaugeCircleDemo() {\n   const [value, setValue] = useState(0)\n\n   useEffect(() => {\n      const handleIncrement = (prev: number) => {\n         if (prev === 100) return 0\n\n         return prev + 10\n      }\n      setValue(handleIncrement)\n      const interval = setInterval(() => setValue(handleIncrement), 2000)\n      return () => clearInterval(interval)\n   }, [])\n\n   return (\n      <GaugeCircle\n         max={100}\n         min={0}\n         value={value}\n         gaugePrimaryColor=\"rgb(79 70 229)\"\n         gaugeSecondaryColor=\"rgba(0, 0, 0, 0.1)\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/gauge-circle.json b/apps/web/public/v0/styles/default/gauge-circle.json
new file mode 100644
index 00000000..9d8fc832
--- /dev/null
+++ b/apps/web/public/v0/styles/default/gauge-circle.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "gauge-circle",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/gauge-circle.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\ninterface Props {\n   max: number\n   value: number\n   min: number\n   gaugePrimaryColor: string\n   gaugeSecondaryColor: string\n   className?: string\n}\n\nexport default function GaugeCircle({\n   max = 100,\n   min = 0,\n   value = 0,\n   gaugePrimaryColor,\n   gaugeSecondaryColor,\n   className,\n}: Props) {\n   const circumference = 2 * Math.PI * 45\n   const percentPx = circumference / 100\n   const currentPercent = ((value - min) / (max - min)) * 100\n\n   return (\n      <div\n         className={cn(\"relative size-40 text-2xl font-semibold\", className)}\n         style={\n            {\n               \"--circle-size\": \"100px\",\n               \"--circumference\": `${circumference}px`,\n               \"--percent-to-px\": `${percentPx}px`,\n               \"--gap-percent\": \"5\",\n               \"--offset-factor\": \"0\",\n               \"--transition-length\": \"1s\",\n               \"--transition-step\": \"200ms\",\n               \"--delay\": \"0s\",\n               \"--percent-to-deg\": \"3.6deg\",\n               transform: \"translateZ(0)\",\n            } as React.CSSProperties\n         }\n      >\n         <svg\n            fill=\"none\"\n            className=\"size-full\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 100 100\"\n         >\n            {currentPercent <= 90 && currentPercent >= 0 && (\n               <circle\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"45\"\n                  strokeWidth=\"10\"\n                  strokeDashoffset=\"0\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\"opacity-100\"\n                  style={{\n                     stroke: gaugeSecondaryColor,\n                     strokeDasharray: `${(90 - currentPercent) * percentPx}px ${circumference}px`,\n                     transform: `rotate(calc(1turn - 90deg - (5 * 3.6deg * (1 - 0)))) scaleY(-1)`,\n                     transition: \"all 1s ease 0s\",\n                     transformOrigin: \"50px 50px\",\n                  }}\n               />\n            )}\n            <circle\n               cx=\"50\"\n               cy=\"50\"\n               r=\"45\"\n               strokeWidth=\"10\"\n               strokeDashoffset=\"0\"\n               strokeLinecap=\"round\"\n               strokeLinejoin=\"round\"\n               className=\"opacity-100\"\n               style={{\n                  stroke: gaugePrimaryColor,\n                  strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,\n                  transition: \"1s ease 0s, stroke 1s ease 0s\",\n                  transitionProperty: \"stroke-dasharray,transform\",\n                  transform: \"rotate(calc(-90deg + 5 * 0 * 3.6deg))\",\n                  transformOrigin: \"50px 50px\",\n               }}\n            />\n         </svg>\n         <span\n            className=\"animate-in fade-in absolute inset-0 m-auto size-fit\"\n            style={{\n               animationDelay: \"0s\",\n               transitionDuration: \"1s\",\n            }}\n         >\n            {Math.round(currentPercent)}\n         </span>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/globe-demo.json b/apps/web/public/v0/styles/default/globe-demo.json
new file mode 100644
index 00000000..e3629dee
--- /dev/null
+++ b/apps/web/public/v0/styles/default/globe-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "globe-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/globe-demo.tsx",
+      "content": "import Globe from \"@/components/ui/globe\"\n\nexport default function GlobeDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-40 pb-40 pt-8 md:pb-60 md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Globe\n         </span>\n         <Globe className=\"top-28\" />\n         <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/globe-grid-demo.json b/apps/web/public/v0/styles/default/globe-grid-demo.json
new file mode 100644
index 00000000..8c062236
--- /dev/null
+++ b/apps/web/public/v0/styles/default/globe-grid-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "globe-grid-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/globe-grid-demo.tsx",
+      "content": "import { GlobeGrid } from \"@/components/ui/globe-grid\"\n\nexport function GlobeGridDemo() {\n   return <GlobeGrid />\n}\n\nexport default GlobeGridDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/globe-grid-full-demo.json b/apps/web/public/v0/styles/default/globe-grid-full-demo.json
new file mode 100644
index 00000000..628b596f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/globe-grid-full-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "globe-grid-full-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/globe-grid-full-demo.tsx",
+      "content": "import { GlobeGrid } from \"@/components/ui/globe-grid\"\n\nexport function GlobeGridDemo() {\n   return <GlobeGrid fullGlobe />\n}\n\nexport default GlobeGridDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/globe-grid.json b/apps/web/public/v0/styles/default/globe-grid.json
new file mode 100644
index 00000000..22e97057
--- /dev/null
+++ b/apps/web/public/v0/styles/default/globe-grid.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "globe-grid",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [],
+  "files": [
+    {
+      "path": "ui/globe-grid.tsx",
+      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface GlobeGridProps {\n   fullGlobe?: boolean\n   className?: string\n}\n\nexport function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {\n   return (\n      <div\n         className={cn(\n            \"relative flex min-h-[350px] w-full items-center justify-center overflow-hidden\",\n            className,\n         )}\n      >\n         <section\n            className=\"relative w-full max-w-[600px]\"\n            style={\n               {\n                  \"--sm-grid-columns\": \"6\",\n                  \"--md-grid-columns\": \"6\",\n                  \"--sm-grid-rows\": fullGlobe ? \"12\" : \"6\",\n                  \"--md-grid-rows\": fullGlobe ? \"12\" : \"6\",\n                  \"--grid-columns\": \"var(--sm-grid-columns)\",\n                  \"--grid-rows\": \"var(--sm-grid-rows)\",\n                  aspectRatio: fullGlobe ? \"1/1\" : \"2/1\",\n               } as React.CSSProperties\n            }\n         >\n            <style jsx>\n               {`\n               @media (min-width: 768px) {\n                  section {\n                     --grid-columns: var(--md-grid-columns);\n                     --grid-rows: var(--md-grid-rows);\n                  }\n               }\n            `}\n            </style>\n            <div className=\"absolute left-0 top-0 z-[5] ml-[-0.5px] w-full md:left-1/2 md:top-1/2 md:h-[200%] md:-translate-x-1/2 md:-translate-y-1/2\">\n               <svg\n                  aria-hidden=\"true\"\n                  height=\"100%\"\n                  style={{\n                     transform: fullGlobe\n                        ? \"translateY(0px) scale(1.002)\"\n                        : \"translateY(-12.5%) scale(1.002)\",\n                  }}\n                  viewBox={fullGlobe ? \"-1 -1 802 802\" : \"-1 -151 802 602\"}\n                  width=\"100%\"\n                  className=\"[--guide-color:theme(colors.border/50%)]\"\n               >\n                  <defs>\n                     <clipPath id=\"half-globe-clip\">\n                        <rect x=\"-1\" y=\"-151\" width=\"802\" height=\"551\" />\n                     </clipPath>\n                  </defs>\n\n                  <g\n                     data-testid=\"globe-wireframe\"\n                     clipPath={fullGlobe ? \"none\" : \"url(#half-globe-clip)\"}\n                  >\n                     <circle\n                        cx=\"400\"\n                        cy=\"400\"\n                        fill=\"var(--ds-background-200)\"\n                        r=\"400\"\n                     />\n                     <path\n                        d=\"M 400 800 A -400 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 800 A -266.667 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 800 A -133.333 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 800 A 0 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 0 A 133.333 400 0 0 0 400 800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 0 A 266.667 400 0 0 0 400 800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 0 A 400 400 0 0 0 400 800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n\n                     <path\n                        d=\"M178.892,66.667 h442.217\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M101.858,133.333 h596.285\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M53.59,200 h692.82\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M22.876,266.667 h754.247\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M5.595,333.333 h788.811\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M0,400 h800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     {fullGlobe && (\n                        <>\n                           <path\n                              d=\"M5.595,466.667 h788.811\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M22.876,533.333 h754.247\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M53.59,600 h692.82\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M101.858,666.667 h596.285\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M178.892,733.333 h442.217\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                        </>\n                     )}\n                  </g>\n\n                  {/* Original animated paths */}\n                  <g id=\"animated-paths\">\n                     {/* First animated path */}\n                     <g\n                        id=\"lllldll31\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-1)]\"\n                     >\n                        <path\n                           d=\"M794.405,333.333 h-131.468M662.937,333.333 h-131.468M531.468,333.333 h-131.468M400,333.333 h-131.468M 268.532 333.333 A -133.333 400 0 0 0 266.667 400M266.667,400 h-133.333M133.333,400 h-133.333\"\n                           fill=\"none\"\n                           stroke=\"url(#lllldll31-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-lllldll31\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"lllldll31-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"794.405;794.405;662.937;531.468;400;268.532;266.667;133.333;0;0;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"333.333;333.333;333.333;333.333;333.333;333.333;400;400;400;400;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;100;100;100;100;100;100;100;100;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Second animated path */}\n                     <g\n                        id=\"llullldl34\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-2)]\"\n                     >\n                        <path\n                           d=\"M698.142,133.333 h-99.381M598.762,133.333 h-99.381M 499.381 133.333 A 133.333 400 0 0 0 473.703 66.667M473.703,66.667 h-73.703M400,66.667 h-73.703M326.297,66.667 h-73.703M 252.594 66.667 A -266.667 400 0 0 0 201.238 133.333M201.238,133.333 h-99.381\"\n                           fill=\"none\"\n                           stroke=\"url(#llullldl34-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llullldl34\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llullldl34-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"698.142;698.142;598.762;499.381;473.703;400;326.297;252.594;201.238;101.858;101.858;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"133.333;133.333;133.333;133.333;66.667;66.667;66.667;66.667;133.333;133.333;133.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;50;50;50;50;50;50;50;50;50;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Third animated path */}\n                     <g\n                        id=\"llldlll35\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-1)]\"\n                     >\n                        <path\n                           d=\"M621.108,66.667 h-73.703M547.406,66.667 h-73.703M473.703,66.667 h-73.703M 400 133.333 A 0 400 0 0 0 400 66.667M400,133.333 h-99.381M300.619,133.333 h-99.381M201.238,133.333 h-99.381\"\n                           fill=\"none\"\n                           stroke=\"url(#llldlll35-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llldlll35\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llldlll35-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"621.108;621.108;547.406;473.703;400;400;300.619;201.238;101.858;101.858;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"66.667;66.667;66.667;66.667;66.667;133.333;133.333;133.333;133.333;133.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Fourth animated path */}\n                     <g\n                        id=\"llddllll33\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-3)]\"\n                     >\n                        <path\n                           d=\"M746.41,200 h-115.47M630.94,200 h-115.47M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M 531.468 333.333 A 133.333 400 0 0 0 525.708 266.667M531.468,333.333 h-131.468M400,333.333 h-131.468M268.532,333.333 h-131.468M137.063,333.333 h-131.468\"\n                           fill=\"none\"\n                           stroke=\"url(#llddllll33-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llddllll33\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llddllll33-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"746.41;746.41;630.94;515.47;525.708;531.468;400;268.532;137.063;5.595;5.595;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"200;200;200;200;266.667;333.333;333.333;333.333;333.333;333.333;333.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;100;100;100;100;100;100;100;100;100;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Fifth animated path */}\n                     <g\n                        id=\"lllddlll34\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-2)]\"\n                     >\n                        <path\n                           d=\"M698.142,133.333 h-99.381M598.762,133.333 h-99.381M499.381,133.333 h-99.381M 400 200 A 0 400 0 0 0 400 133.333M 400 266.667 A 0 400 0 0 0 400 200M400,266.667 h-125.708M274.292,266.667 h-125.708M148.584,266.667 h-125.708\"\n                           fill=\"none\"\n                           stroke=\"url(#lllddlll34-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-lllddlll34\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"lllddlll34-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"698.142;698.142;598.762;499.381;400;400;400;274.292;148.584;22.876;22.876;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"133.333;133.333;133.333;133.333;133.333;200;266.667;266.667;266.667;266.667;266.667;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Sixth animated path */}\n                     <g\n                        id=\"llullll32\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-3)]\"\n                     >\n                        <path\n                           d=\"M777.124,266.667 h-125.708M651.416,266.667 h-125.708M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M515.47,200 h-115.47M400,200 h-115.47M284.53,200 h-115.47M169.06,200 h-115.47\"\n                           fill=\"none\"\n                           stroke=\"url(#llullll32-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llullll32\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llullll32-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"777.124;777.124;651.416;525.708;515.47;400;284.53;169.06;53.59;53.59;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"266.667;266.667;266.667;266.667;200;200;200;200;200;200;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;50;50;50;50;50;50;50;50;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n                  </g>\n\n                  {/* Mirrored paths for full globe */}\n                  {fullGlobe && (\n                     <g\n                        transform=\"translate(0,800) scale(1,-1)\"\n                        className=\"opacity-50\" // Optional: slightly reduce opacity of bottom paths\n                     >\n                        <use href=\"#animated-paths\" />\n                     </g>\n                  )}\n\n                  <defs>\n                     <linearGradient\n                        gradientUnits=\"userSpaceOnUse\"\n                        id=\"globe-gradient\"\n                        x1=\"0\"\n                        x2=\"0\"\n                        y1=\"0\"\n                        y2=\"400\"\n                     >\n                        <stop offset=\"0%\" stopColor=\"var(--guide-color)\" />\n                        <stop offset=\"100%\" stopColor=\"var(--guide-color)\" />\n                     </linearGradient>\n                  </defs>\n               </svg>\n            </div>\n         </section>\n      </div>\n   )\n}\n\nexport default GlobeGrid\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "gridTemplateColumns": {
+            "grid-md": "repeat(var(--md-grid-columns), 1fr)",
+            "grid-sm": "repeat(var(--sm-grid-columns), 1fr)"
+          },
+          "gridTemplateRows": {
+            "grid-md": "repeat(var(--md-grid-rows), 1fr)",
+            "grid-sm": "repeat(var(--sm-grid-rows), 1fr)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "--guide-color": "rgba(255, 255, 255, 0.1)",
+      "--ds-background-200": "rgba(0, 0, 0, 0.5)",
+      "--line-color-1": "hsl(267, 100%, 64%)",
+      "--line-color-2": "hsl(272.1, 71.7%, 47.1%)",
+      "--line-color-3": "hsl(155, 89%, 51%)"
+    },
+    "dark": {
+      "--guide-color": "rgba(255, 255, 255, 0.15)",
+      "--ds-background-200": "rgba(0, 0, 0, 0.7)",
+      "--line-color-1": "hsl(267, 100%, 64%)",
+      "--line-color-2": "hsl(272.1, 71.7%, 47.1%)",
+      "--line-color-3": "hsl(155, 89%, 51%)"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/globe.json b/apps/web/public/v0/styles/default/globe.json
new file mode 100644
index 00000000..6f1336f9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/globe.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "globe",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "cobe",
+    "react-spring"
+  ],
+  "files": [
+    {
+      "path": "ui/globe.tsx",
+      "content": "\"use client\"\n\nimport type { COBEOptions } from \"cobe\"\nimport createGlobe from \"cobe\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useSpring } from \"react-spring\"\nimport { cn } from \"@/lib/utils\"\n\nconst GLOBE_CONFIG: COBEOptions = {\n   width: 800,\n   height: 800,\n   onRender: () => {},\n   devicePixelRatio: 2,\n   phi: 0,\n   theta: 0.3,\n   dark: 0,\n   diffuse: 0.4,\n   mapSamples: 16000,\n   mapBrightness: 1.2,\n   baseColor: [1, 1, 1],\n   markerColor: [251 / 255, 100 / 255, 21 / 255],\n   glowColor: [1, 1, 1],\n   markers: [\n      { location: [14.5995, 120.9842], size: 0.03 },\n      { location: [19.076, 72.8777], size: 0.1 },\n      { location: [23.8103, 90.4125], size: 0.05 },\n      { location: [30.0444, 31.2357], size: 0.07 },\n      { location: [39.9042, 116.4074], size: 0.08 },\n      { location: [-23.5505, -46.6333], size: 0.1 },\n      { location: [19.4326, -99.1332], size: 0.1 },\n      { location: [40.7128, -74.006], size: 0.1 },\n      { location: [34.6937, 135.5022], size: 0.05 },\n      { location: [41.0082, 28.9784], size: 0.06 },\n   ],\n}\n\nexport default function Globe({\n   className,\n   config = GLOBE_CONFIG,\n}: {\n   className?: string\n   config?: COBEOptions\n}) {\n   let phi = 0\n   let width = 0\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const pointerInteracting = useRef(null)\n   const pointerInteractionMovement = useRef(0)\n   const [{ r }, api] = useSpring(() => ({\n      r: 0,\n      config: {\n         mass: 1,\n         tension: 280,\n         friction: 40,\n         precision: 0.001,\n      },\n   }))\n\n   const updatePointerInteraction = (value: any) => {\n      pointerInteracting.current = value\n      canvasRef.current!.style.cursor = value ? \"grabbing\" : \"grab\"\n   }\n\n   const updateMovement = (clientX: any) => {\n      if (pointerInteracting.current !== null) {\n         const delta = clientX - pointerInteracting.current\n         pointerInteractionMovement.current = delta\n         api.start({ r: delta / 200 })\n      }\n   }\n\n   const onRender = useCallback(\n      (state: Record<string, any>) => {\n         if (!pointerInteracting.current) phi += 0.005\n         state.phi = phi + r.get()\n         state.width = width * 2\n         state.height = width * 2\n      },\n      [pointerInteracting, phi, r],\n   )\n\n   const onResize = () => {\n      if (canvasRef.current) width = canvasRef.current.offsetWidth\n   }\n\n   useEffect(() => {\n      window.addEventListener(\"resize\", onResize)\n      onResize()\n\n      const globe = createGlobe(canvasRef.current!, {\n         ...config,\n         width: width * 2,\n         height: width * 2,\n         onRender,\n      })\n\n      setTimeout(() => (canvasRef.current!.style.opacity = \"1\"))\n      return () => globe.destroy()\n   }, [])\n\n   return (\n      <div\n         className={cn(\n            \"absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]\",\n            className,\n         )}\n      >\n         <canvas\n            className={cn(\n               \"size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]\",\n            )}\n            ref={canvasRef}\n            onPointerDown={(e) =>\n               updatePointerInteraction(\n                  e.clientX - pointerInteractionMovement.current,\n               )\n            }\n            onPointerUp={() => updatePointerInteraction(null)}\n            onPointerOut={() => updatePointerInteraction(null)}\n            onMouseMove={(e) => updateMovement(e.clientX)}\n            onTouchMove={(e) =>\n               e.touches[0] && updateMovement(e.touches[0].clientX)\n            }\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/gradual-spacing-demo.json b/apps/web/public/v0/styles/default/gradual-spacing-demo.json
new file mode 100644
index 00000000..7c8ef959
--- /dev/null
+++ b/apps/web/public/v0/styles/default/gradual-spacing-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "gradual-spacing-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/gradual-spacing-demo.tsx",
+      "content": "import GradualSpacing from \"@/components/ui/gradual-spacing\"\n\nexport default async function GradualSpacingDemo() {\n   return (\n      <GradualSpacing\n         className=\"font-display text-center text-4xl font-bold -tracking-widest  text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         text=\"Gradual Spacing\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/gradual-spacing.json b/apps/web/public/v0/styles/default/gradual-spacing.json
new file mode 100644
index 00000000..a9245a35
--- /dev/null
+++ b/apps/web/public/v0/styles/default/gradual-spacing.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "gradual-spacing",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/gradual-spacing.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface GradualSpacingProps {\n   text: string\n   duration?: number\n   delayMultiple?: number\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function GradualSpacing({\n   text,\n   duration = 0.5,\n   delayMultiple = 0.04,\n   framerProps = {\n      hidden: { opacity: 0, x: -20 },\n      visible: { opacity: 1, x: 0 },\n   },\n   className,\n}: GradualSpacingProps) {\n   return (\n      <div className=\"flex justify-center space-x-1\">\n         <AnimatePresence>\n            {text.split(\"\").map((char, i) => (\n               <motion.h1\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={framerProps}\n                  transition={{ duration, delay: i * delayMultiple }}\n                  className={cn(\"drop-shadow-sm \", className)}\n               >\n                  {char === \" \" ? <span>&nbsp;</span> : char}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/grid-layout-columns-demo.json b/apps/web/public/v0/styles/default/grid-layout-columns-demo.json
new file mode 100644
index 00000000..1eac9364
--- /dev/null
+++ b/apps/web/public/v0/styles/default/grid-layout-columns-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-layout-columns-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/grid-layout-columns-demo.tsx",
+      "content": "\"use client\"\n\nimport GridLayout from \"@/components/ui/grid-layout\"\n\nexport default function GridLayoutColumnsDemo() {\n   return (\n      <div className=\"space-y-8\">\n         <GridLayout\n            columns={8}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">8 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Compact layouts</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            columns={12}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">12 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Traditional grid</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            columns={16}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">16 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Fine-grained control\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/grid-layout-crosshairs-demo.json b/apps/web/public/v0/styles/default/grid-layout-crosshairs-demo.json
new file mode 100644
index 00000000..0f1deb38
--- /dev/null
+++ b/apps/web/public/v0/styles/default/grid-layout-crosshairs-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-layout-crosshairs-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/grid-layout-crosshairs-demo.tsx",
+      "content": "\"use client\"\n\nimport GridLayout from \"@/components/ui/grid-layout\"\n\nexport default function GridLayoutCrosshairsDemo() {\n   return (\n      <GridLayout\n         crosshairs={{\n            topLeft: true,\n            topRight: true,\n            bottomLeft: true,\n            bottomRight: true,\n         }}\n         lineVariant=\"none\"\n         className=\"min-h-[350px] p-6\"\n      >\n         <div className=\"flex h-full flex-col items-center justify-center space-y-4\">\n            <div className=\"text-center\">\n               <h3 className=\"text-2xl font-medium\">Corner Markers</h3>\n               <p className=\"text-muted-foreground mt-2\">\n                  Use crosshairs to highlight key areas or create visual anchors\n               </p>\n            </div>\n            <div className=\"grid w-full max-w-xl grid-cols-2 gap-8 pt-8\">\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Top Left\n               </div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Top Right\n               </div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Bottom Left\n               </div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Bottom Right\n               </div>\n            </div>\n         </div>\n      </GridLayout>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/grid-layout-demo.json b/apps/web/public/v0/styles/default/grid-layout-demo.json
new file mode 100644
index 00000000..ee88839d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/grid-layout-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-layout-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/grid-layout-demo.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport GridLayout from \"@/components/ui/grid-layout\"\n\nexport default function GridLayoutDemo() {\n   return (\n      <GridLayout\n         crosshairs={{\n            topLeft: true,\n            bottomRight: true,\n         }}\n         lineVariant=\"center\"\n         className=\"min-h-[350px] p-8\"\n      >\n         <div className=\"space-y-8\">\n            <div>\n               <h2 className=\"text-4xl font-medium tracking-tight\">\n                  Ready to deploy?{\" \"}\n                  <span className=\"text-muted-foreground\">\n                     Start building with a free account.\n                  </span>\n               </h2>\n               <p className=\"text-muted-foreground mt-4 text-xl\">\n                  Speak to an expert for your{\" \"}\n                  <span className=\"text-blue-500\">Pro</span> or{\" \"}\n                  <span className=\"text-purple-500\">Enterprise</span> needs.\n               </p>\n            </div>\n            <div className=\"flex gap-4\">\n               <Button variant=\"default\" size=\"lg\">\n                  Start Deploying\n               </Button>\n               <Button variant=\"outline\" size=\"lg\">\n                  Contact Sales\n               </Button>\n            </div>\n         </div>\n      </GridLayout>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/grid-layout-variants-demo.json b/apps/web/public/v0/styles/default/grid-layout-variants-demo.json
new file mode 100644
index 00000000..80495e94
--- /dev/null
+++ b/apps/web/public/v0/styles/default/grid-layout-variants-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-layout-variants-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "grid-layout"
+  ],
+  "files": [
+    {
+      "path": "examples/grid-layout-variants-demo.tsx",
+      "content": "\"use client\"\n\nimport GridLayout from \"@/components/ui/grid-layout\"\n\nexport default function GridLayoutVariantsDemo() {\n   return (\n      <div className=\"space-y-8\">\n         <GridLayout\n            lineVariant=\"center\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Center Line</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Minimal and focused\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            lineVariant=\"vertical\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Vertical Lines</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Column-focused layout\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            lineVariant=\"horizontal\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Horizontal Lines</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Row-based organization\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/grid-layout.json b/apps/web/public/v0/styles/default/grid-layout.json
new file mode 100644
index 00000000..6dac152d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/grid-layout.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-layout",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/grid-layout.tsx",
+      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface CrosshairConfig {\n   topLeft?: boolean\n   topRight?: boolean\n   bottomLeft?: boolean\n   bottomRight?: boolean\n}\n\ninterface GridLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n   children: React.ReactNode\n   crosshairs?: CrosshairConfig\n   gridLines?: boolean\n   columns?: 8 | 12 | 16\n   lineVariant?: \"all\" | \"vertical\" | \"horizontal\" | \"center\" | \"none\"\n}\n\nfunction CrosshairIcon({ className }: { className?: string }) {\n   return (\n      <svg\n         width=\"16\"\n         height=\"16\"\n         viewBox=\"0 0 16 16\"\n         fill=\"none\"\n         className={className}\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M8 1V15M1 8H15\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1\"\n            strokeLinecap=\"round\"\n         />\n      </svg>\n   )\n}\n\nexport function GridLayout({\n   children,\n   crosshairs,\n   gridLines = true,\n   columns = 16,\n   lineVariant = \"all\",\n   className,\n   ...props\n}: GridLayoutProps) {\n   return (\n      <div\n         className={cn(\n            \"relative grid w-full gap-0\",\n            gridLines && \"border-grid-line border\",\n            columns === 16 && \"grid-cols-grid-16\",\n            columns === 12 && \"grid-cols-grid-12\",\n            columns === 8 && \"grid-cols-grid-8\",\n            className,\n         )}\n         {...props}\n      >\n         {gridLines && (\n            <div className=\"absolute inset-0 z-0\">\n               {/* Vertikale Linien */}\n               {(lineVariant === \"all\" ||\n                  lineVariant === \"vertical\" ||\n                  lineVariant === \"center\") && (\n                  <div className=\"absolute inset-0 flex justify-center\">\n                     {lineVariant === \"center\" ? (\n                        <div className=\"border-grid-line h-full w-px border-r\" />\n                     ) : (\n                        <div\n                           className={cn(\n                              \"grid size-full\",\n                              columns === 16 && \"grid-cols-grid-16\",\n                              columns === 12 && \"grid-cols-grid-12\",\n                              columns === 8 && \"grid-cols-grid-8\",\n                           )}\n                        >\n                           {Array.from({ length: columns }).map((_, i) => (\n                              <div\n                                 key={i}\n                                 className={cn(\n                                    \"border-grid-line border-r\",\n                                    i === 0 && \"border-l\",\n                                 )}\n                              />\n                           ))}\n                        </div>\n                     )}\n                  </div>\n               )}\n\n               {/* Horizontale Linien */}\n               {(lineVariant === \"all\" || lineVariant === \"horizontal\") && (\n                  <div className=\"absolute inset-0 grid grid-rows-[repeat(16,1fr)]\">\n                     {Array.from({ length: 17 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className={cn(\n                              \"border-grid-line border-t\",\n                              i === 16 && \"border-b\",\n                           )}\n                        />\n                     ))}\n                  </div>\n               )}\n            </div>\n         )}\n\n         {/* Crosshairs */}\n         {crosshairs?.topLeft && (\n            <CrosshairIcon className=\"text-grid-line absolute -left-2 -top-2\" />\n         )}\n         {crosshairs?.topRight && (\n            <CrosshairIcon className=\"text-grid-line absolute -right-2 -top-2\" />\n         )}\n         {crosshairs?.bottomLeft && (\n            <CrosshairIcon className=\"text-grid-line absolute -bottom-2 -left-2\" />\n         )}\n         {crosshairs?.bottomRight && (\n            <CrosshairIcon className=\"text-grid-line absolute -bottom-2 -right-2\" />\n         )}\n\n         <div className=\"relative z-10 col-span-full\">{children}</div>\n      </div>\n   )\n}\n\nexport default GridLayout\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderColor": {
+            "grid-line": "hsl(var(--border) / var(--grid-line-opacity))"
+          },
+          "gridTemplateColumns": {
+            "grid-16": "repeat(16, minmax(0, 1fr))",
+            "grid-12": "repeat(12, minmax(0, 1fr))",
+            "grid-8": "repeat(8, minmax(0, 1fr))"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "--grid-line-opacity": "0.5"
+    },
+    "dark": {
+      "--grid-line-opacity": "0.5"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/grid-pattern-dashed.json b/apps/web/public/v0/styles/default/grid-pattern-dashed.json
new file mode 100644
index 00000000..79692a49
--- /dev/null
+++ b/apps/web/public/v0/styles/default/grid-pattern-dashed.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-pattern-dashed",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/grid-pattern-dashed.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { GridPattern } from \"@/components/ui/grid-pattern\"\n\nexport default function GridPatternDashed() {\n   return (\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            width={30}\n            height={30}\n            x={-1}\n            y={-1}\n            strokeDasharray={\"4 2\"}\n            className={cn(\n               \"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/grid-pattern-demo.json b/apps/web/public/v0/styles/default/grid-pattern-demo.json
new file mode 100644
index 00000000..3a9ba409
--- /dev/null
+++ b/apps/web/public/v0/styles/default/grid-pattern-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-pattern-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/grid-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { GridPattern } from \"@/components/ui/grid-pattern\"\n\nexport default function GridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            squares={[\n               [4, 4],\n               [5, 1],\n               [8, 2],\n               [5, 3],\n               [5, 5],\n               [10, 10],\n               [12, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n            ]}\n            className={cn(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n               \"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/grid-pattern-linear-gradient.json b/apps/web/public/v0/styles/default/grid-pattern-linear-gradient.json
new file mode 100644
index 00000000..491d0b4b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/grid-pattern-linear-gradient.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-pattern-linear-gradient",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/grid-pattern-linear-gradient.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { GridPattern } from \"@/components/ui/grid-pattern\"\n\nexport default function GridPatternLinearGradient() {\n   return (\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            width={20}\n            height={20}\n            x={-1}\n            y={-1}\n            className={cn(\n               \"[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] \",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/grid-pattern.json b/apps/web/public/v0/styles/default/grid-pattern.json
new file mode 100644
index 00000000..040afe04
--- /dev/null
+++ b/apps/web/public/v0/styles/default/grid-pattern.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-pattern",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/grid-pattern.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface GridPatternProps extends React.SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   squares?: Array<[x: number, y: number]>\n   strokeDasharray?: string\n   className?: string\n   [key: string]: unknown\n}\n\nexport function GridPattern({\n   width = 40,\n   height = 40,\n   x = -1,\n   y = -1,\n   strokeDasharray = \"0\",\n   squares,\n   className,\n   ...props\n}: GridPatternProps) {\n   const id = useId()\n\n   return (\n      <svg\n         aria-hidden=\"true\"\n         className={cn(\n            \"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30\",\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <path\n                  d={`M.5 ${height}V.5H${width}`}\n                  fill=\"none\"\n                  strokeDasharray={strokeDasharray}\n               />\n            </pattern>\n         </defs>\n         <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill={`url(#${id})`}\n         />\n         {squares && (\n            <svg x={x} y={y} className=\"overflow-visible\">\n               {squares.map(([x, y]) => (\n                  <rect\n                     strokeWidth=\"0\"\n                     key={`${x}-${y}`}\n                     width={width - 1}\n                     height={height - 1}\n                     x={x * width + 1}\n                     y={y * height + 1}\n                  />\n               ))}\n            </svg>\n         )}\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/hero-video-demo.json b/apps/web/public/v0/styles/default/hero-video-demo.json
new file mode 100644
index 00000000..f80046f0
--- /dev/null
+++ b/apps/web/public/v0/styles/default/hero-video-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hero-video-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/hero-video-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport HeroVideo, { HeroVideoAction } from \"@/components/ui/hero-video\"\nimport { MagicCard, MagicContainer } from \"@/components/ui/magic-card\"\n\nfunction PlayButton() {\n   return (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 24 24\"\n         fill=\"currentColor\"\n         className=\"dark:text-white\"\n      >\n         <path\n            fillRule=\"evenodd\"\n            d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   )\n}\n\nexport default function HeroVideoDemo() {\n   return (\n      <div className=\"bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Hero Video\n         </span>\n\n         <MagicContainer>\n            <MagicCard className=\"min-h-[400px] [mask:linear-gradient(0deg,transparent_40%,#fff_100%)]\">\n               <HeroVideo\n                  title=\"Nyxb UI Demo\"\n                  image=\"https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200\"\n               >\n                  <HeroVideoAction>\n                     <Button className=\"size-20 rounded-full\" variant=\"outline\">\n                        <PlayButton />\n                     </Button>\n                  </HeroVideoAction>\n                  <video\n                     autoPlay\n                     className=\"rounded-xl dark:border\"\n                     playsInline\n                     src=\"https://cdn.nyxbui.design/globe.mp4\"\n                  />\n               </HeroVideo>\n            </MagicCard>\n         </MagicContainer>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/hero-video-dialog-demo-top-in-bottom-out.json b/apps/web/public/v0/styles/default/hero-video-dialog-demo-top-in-bottom-out.json
new file mode 100644
index 00000000..6455df2d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/hero-video-dialog-demo-top-in-bottom-out.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hero-video-dialog-demo-top-in-bottom-out",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/hero-video-dialog-demo-top-in-bottom-out.tsx",
+      "content": "import HeroVideoDialog from \"@/components/ui/hero-video-dialog\"\n\nexport default function HeroVideoDialogDemoTopInBottomOut() {\n   return (\n      <div className=\"relative\">\n         <HeroVideoDialog\n            className=\"block dark:hidden\"\n            animationStyle=\"top-in-bottom-out\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-light.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n         <HeroVideoDialog\n            className=\"hidden dark:block\"\n            animationStyle=\"top-in-bottom-out\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-dark.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/hero-video-dialog-demo.json b/apps/web/public/v0/styles/default/hero-video-dialog-demo.json
new file mode 100644
index 00000000..5d092b95
--- /dev/null
+++ b/apps/web/public/v0/styles/default/hero-video-dialog-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hero-video-dialog-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/hero-video-dialog-demo.tsx",
+      "content": "import HeroVideoDialog from \"@/components/ui/hero-video-dialog\"\n\nexport default function HeroVideoDialogDemo() {\n   return (\n      <div className=\"relative\">\n         <HeroVideoDialog\n            className=\"block dark:hidden\"\n            animationStyle=\"from-center\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-light.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n         <HeroVideoDialog\n            className=\"hidden dark:block\"\n            animationStyle=\"from-center\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-dark.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/hero-video-dialog.json b/apps/web/public/v0/styles/default/hero-video-dialog.json
new file mode 100644
index 00000000..b1e1ed8d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/hero-video-dialog.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hero-video-dialog",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/hero-video-dialog.tsx",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { Play, XIcon } from \"lucide-react\"\nimport { useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype AnimationStyle =\n   | \"from-bottom\"\n   | \"from-center\"\n   | \"from-top\"\n   | \"from-left\"\n   | \"from-right\"\n   | \"fade\"\n   | \"top-in-bottom-out\"\n   | \"left-in-right-out\"\n\ninterface HeroVideoProps {\n   animationStyle?: AnimationStyle\n   videoSrc: string\n   thumbnailSrc: string\n   thumbnailAlt?: string\n   className?: string\n}\n\nconst animationVariants = {\n   \"from-bottom\": {\n      initial: { y: \"100%\", opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: \"100%\", opacity: 0 },\n   },\n   \"from-center\": {\n      initial: { scale: 0.5, opacity: 0 },\n      animate: { scale: 1, opacity: 1 },\n      exit: { scale: 0.5, opacity: 0 },\n   },\n   \"from-top\": {\n      initial: { y: \"-100%\", opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: \"-100%\", opacity: 0 },\n   },\n   \"from-left\": {\n      initial: { x: \"-100%\", opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: \"-100%\", opacity: 0 },\n   },\n   \"from-right\": {\n      initial: { x: \"100%\", opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: \"100%\", opacity: 0 },\n   },\n   fade: {\n      initial: { opacity: 0 },\n      animate: { opacity: 1 },\n      exit: { opacity: 0 },\n   },\n   \"top-in-bottom-out\": {\n      initial: { y: \"-100%\", opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: \"100%\", opacity: 0 },\n   },\n   \"left-in-right-out\": {\n      initial: { x: \"-100%\", opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: \"100%\", opacity: 0 },\n   },\n}\n\nexport default function HeroVideoDialog({\n   animationStyle = \"from-center\",\n   videoSrc,\n   thumbnailSrc,\n   thumbnailAlt = \"Video thumbnail\",\n   className,\n}: HeroVideoProps) {\n   const [isVideoOpen, setIsVideoOpen] = useState(false)\n   const selectedAnimation = animationVariants[animationStyle]\n\n   return (\n      <div className={cn(\"relative\", className)}>\n         <div\n            className=\"group relative cursor-pointer\"\n            onClick={() => setIsVideoOpen(true)}\n         >\n            <img\n               src={thumbnailSrc}\n               alt={thumbnailAlt}\n               width={1920}\n               height={1080}\n               className=\"w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]\"\n            />\n            <div className=\"absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100\">\n               <div className=\"bg-primary/10 flex size-28 items-center justify-center rounded-full backdrop-blur-md\">\n                  <div className=\"from-primary/30 to-primary relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]\">\n                     <Play\n                        className=\"size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105\"\n                        style={{\n                           filter:\n                              \"drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))\",\n                        }}\n                     />\n                  </div>\n               </div>\n            </div>\n         </div>\n         <AnimatePresence>\n            {isVideoOpen && (\n               <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  onClick={() => setIsVideoOpen(false)}\n                  exit={{ opacity: 0 }}\n                  className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md\"\n               >\n                  <motion.div\n                     {...selectedAnimation}\n                     transition={{\n                        type: \"spring\",\n                        damping: 30,\n                        stiffness: 300,\n                     }}\n                     className=\"relative mx-4 aspect-video w-full max-w-4xl md:mx-0\"\n                  >\n                     <motion.button className=\"absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black\">\n                        <XIcon className=\"size-5\" />\n                     </motion.button>\n                     <div className=\"relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white\">\n                        <iframe\n                           src={videoSrc}\n                           className=\"size-full rounded-2xl\"\n                           allowFullScreen\n                           allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                        ></iframe>\n                     </div>\n                  </motion.div>\n               </motion.div>\n            )}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/hero-video-youtube.json b/apps/web/public/v0/styles/default/hero-video-youtube.json
new file mode 100644
index 00000000..967515df
--- /dev/null
+++ b/apps/web/public/v0/styles/default/hero-video-youtube.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hero-video-youtube",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/hero-video-youtube.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport HeroVideo, { HeroVideoAction } from \"@/components/ui/hero-video\"\nimport { MagicCard, MagicContainer } from \"@/components/ui/magic-card\"\n\nfunction PlayButton() {\n   return (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 24 24\"\n         fill=\"currentColor\"\n         className=\"dark:text-white\"\n      >\n         <path\n            fillRule=\"evenodd\"\n            d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   )\n}\n\nexport default function HeroVideoDemo() {\n   return (\n      <div className=\"bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Never gonna give you up\n         </span>\n         {/* Magic Card  */}\n         <MagicContainer className=\"relative\">\n            <MagicCard className=\"min-h-[400px] [mask:linear-gradient(0deg,transparent_20%,#fff_100%)]\">\n               <HeroVideo\n                  title=\"Never gonna give you up\"\n                  image=\"https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024\"\n               >\n                  <HeroVideoAction>\n                     <Button className=\"size-20 rounded-full\" variant=\"outline\">\n                        <PlayButton />\n                     </Button>\n                  </HeroVideoAction>\n                  <iframe\n                     height=\"500\"\n                     className=\"h-[500px] rounded-xl border\"\n                     src=\"https://www.youtube.com/embed/dQw4w9WgXcQ?si=FmFbhzaToJQ9iXN4\"\n                     title=\"YouTube video player\"\n                     allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                  />\n               </HeroVideo>\n            </MagicCard>\n         </MagicContainer>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/hover-card-demo.json b/apps/web/public/v0/styles/default/hover-card-demo.json
new file mode 100644
index 00000000..ae208c7f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/hover-card-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hover-card-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "hover-card"
+  ],
+  "files": [
+    {
+      "path": "examples/hover-card-demo.tsx",
+      "content": "import { CalendarDays } from \"lucide-react\"\n\nimport {\n   Avatar,\n   AvatarFallback,\n   AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   HoverCard,\n   HoverCardContent,\n   HoverCardTrigger,\n} from \"@/components/ui/hover-card\"\n\nexport default function HoverCardDemo() {\n   return (\n      <HoverCard>\n         <HoverCardTrigger asChild>\n            <Button variant=\"link\">@nextjs</Button>\n         </HoverCardTrigger>\n         <HoverCardContent className=\"w-80\">\n            <div className=\"flex justify-between space-x-4\">\n               <Avatar>\n                  <AvatarImage src=\"https://github.com/vercel.png\" />\n                  <AvatarFallback>VC</AvatarFallback>\n               </Avatar>\n               <div className=\"space-y-1\">\n                  <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n                  <p className=\"text-sm\">\n                     The React Framework – created and maintained by @vercel.\n                  </p>\n                  <div className=\"flex items-center pt-2\">\n                     <CalendarDays className=\"mr-2 size-4 opacity-70\" />{\" \"}\n                     <span className=\"text-muted-foreground text-xs\">\n                        Joined December 2021\n                     </span>\n                  </div>\n               </div>\n            </div>\n         </HoverCardContent>\n      </HoverCard>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/hover-card.json b/apps/web/public/v0/styles/default/hover-card.json
new file mode 100644
index 00000000..e0783c09
--- /dev/null
+++ b/apps/web/public/v0/styles/default/hover-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hover-card",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-hover-card"
+  ],
+  "files": [
+    {
+      "path": "ui/hover-card.tsx",
+      "content": "\"use client\"\n\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n   React.ElementRef<typeof HoverCardPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n   <HoverCardPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none\",\n         className,\n      )}\n      {...props}\n   />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/hyper-text-demo.json b/apps/web/public/v0/styles/default/hyper-text-demo.json
new file mode 100644
index 00000000..d9675697
--- /dev/null
+++ b/apps/web/public/v0/styles/default/hyper-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hyper-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/hyper-text-demo.tsx",
+      "content": "import HyperText from \"@/components/ui/hyper-text\"\n\nexport default function HyperTextDemo() {\n   return (\n      <HyperText\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         text=\"Hyper Text\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/hyper-text.json b/apps/web/public/v0/styles/default/hyper-text.json
new file mode 100644
index 00000000..92903e97
--- /dev/null
+++ b/apps/web/public/v0/styles/default/hyper-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hyper-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/hyper-text.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { useEffect, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface HyperTextProps {\n   text: string\n   duration?: number\n   framerProps?: Variants\n   className?: string\n   animateOnLoad?: boolean\n}\n\nconst alphabets = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\")\n\nconst getRandomInt = (max: number) => Math.floor(Math.random() * max)\n\nexport default function HyperText({\n   text,\n   duration = 800,\n   framerProps = {\n      initial: { opacity: 0, y: -10 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 3 },\n   },\n   className,\n   animateOnLoad = true,\n}: HyperTextProps) {\n   const [displayText, setDisplayText] = useState(text.split(\"\"))\n   const [trigger, setTrigger] = useState(false)\n   const interations = useRef(0)\n   const isFirstRender = useRef(true)\n\n   const triggerAnimation = () => {\n      interations.current = 0\n      setTrigger(true)\n   }\n\n   useEffect(() => {\n      const interval = setInterval(\n         () => {\n            if (!animateOnLoad && isFirstRender.current) {\n               clearInterval(interval)\n               isFirstRender.current = false\n               return\n            }\n            if (interations.current < text.length) {\n               setDisplayText((t) =>\n                  t.map((l, i) =>\n                     l === \" \"\n                        ? l\n                        : i <= interations.current\n                          ? text[i]\n                          : alphabets[getRandomInt(26)],\n                  ),\n               )\n               interations.current = interations.current + 0.1\n            } else {\n               setTrigger(false)\n               clearInterval(interval)\n            }\n         },\n         duration / (text.length * 10),\n      )\n      // Clean up interval on unmount\n      return () => clearInterval(interval)\n   }, [text, duration, trigger, animateOnLoad])\n\n   return (\n      <div\n         className=\"flex scale-100 cursor-default overflow-hidden py-2\"\n         onMouseEnter={triggerAnimation}\n      >\n         <AnimatePresence mode=\"wait\">\n            {displayText.map((letter, i) => (\n               <motion.h1\n                  key={i}\n                  className={cn(\n                     \"font-mono\",\n                     letter === \" \" ? \"w-3\" : \"\",\n                     className,\n                  )}\n                  {...framerProps}\n               >\n                  {letter.toUpperCase()}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/icon-cloud-demo.json b/apps/web/public/v0/styles/default/icon-cloud-demo.json
new file mode 100644
index 00000000..45947477
--- /dev/null
+++ b/apps/web/public/v0/styles/default/icon-cloud-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "icon-cloud-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/icon-cloud-demo.tsx",
+      "content": "import IconCloud from \"@/components/ui/icon-cloud\"\n\nconst slugs = [\n   \"typescript\",\n   \"javascript\",\n   \"dart\",\n   \"java\",\n   \"react\",\n   \"flutter\",\n   \"android\",\n   \"html5\",\n   \"css3\",\n   \"nodedotjs\",\n   \"express\",\n   \"nextdotjs\",\n   \"prisma\",\n   \"amazonaws\",\n   \"postgresql\",\n   \"firebase\",\n   \"nginx\",\n   \"vercel\",\n   \"testinglibrary\",\n   \"jest\",\n   \"cypress\",\n   \"docker\",\n   \"git\",\n   \"jira\",\n   \"github\",\n   \"gitlab\",\n   \"visualstudiocode\",\n   \"androidstudio\",\n   \"sonarqube\",\n   \"figma\",\n]\n\nexport default function IconCloudDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-20 pb-20 pt-8 \">\n         <IconCloud iconSlugs={slugs} />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/icon-cloud.json b/apps/web/public/v0/styles/default/icon-cloud.json
new file mode 100644
index 00000000..8e60a5d5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/icon-cloud.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "icon-cloud",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "next-themes",
+    "react-icon-cloud"
+  ],
+  "files": [
+    {
+      "path": "ui/icon-cloud.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport type { ICloud, SimpleIcon } from \"react-icon-cloud\"\nimport { Cloud, fetchSimpleIcons, renderSimpleIcon } from \"react-icon-cloud\"\n\nexport const cloudProps: Omit<ICloud, \"children\"> = {\n   containerProps: {\n      style: {\n         display: \"flex\",\n         justifyContent: \"center\",\n         alignItems: \"center\",\n         width: \"100%\",\n         paddingTop: 40,\n      },\n   },\n   options: {\n      reverse: true,\n      depth: 1,\n      wheelZoom: false,\n      imageScale: 2,\n      activeCursor: \"default\",\n      tooltip: \"native\",\n      initial: [0.1, -0.1],\n      clickToFront: 500,\n      tooltipDelay: 0,\n      outlineColour: \"#0000\",\n      maxSpeed: 0.04,\n      minSpeed: 0.02,\n      // dragControl: false,\n   },\n}\n\nexport function renderCustomIcon(icon: SimpleIcon, theme: string) {\n   const bgHex = theme === \"light\" ? \"#f3f2ef\" : \"#080510\"\n   const fallbackHex = theme === \"light\" ? \"#6e6e73\" : \"#ffffff\"\n   const minContrastRatio = theme === \"dark\" ? 2 : 1.2\n\n   return renderSimpleIcon({\n      icon,\n      bgHex,\n      fallbackHex,\n      minContrastRatio,\n      size: 42,\n      aProps: {\n         href: undefined,\n         target: undefined,\n         rel: undefined,\n         onClick: (e: any) => e.preventDefault(),\n      },\n   })\n}\n\nexport interface DynamicCloudProps {\n   iconSlugs: string[]\n}\n\ntype IconData = Awaited<ReturnType<typeof fetchSimpleIcons>>\n\nexport default function IconCloud({ iconSlugs }: DynamicCloudProps) {\n   const [data, setData] = useState<IconData | null>(null)\n   const { theme } = useTheme()\n\n   useEffect(() => {\n      fetchSimpleIcons({ slugs: iconSlugs }).then(setData)\n   }, [iconSlugs])\n\n   const renderedIcons = useMemo(() => {\n      if (!data) return null\n\n      return Object.values(data.simpleIcons).map((icon) =>\n         renderCustomIcon(icon, theme || \"light\"),\n      )\n   }, [data, theme])\n\n   return (\n      // @ts-expect-error is fine\n      <Cloud {...cloudProps}>\n         <>{renderedIcons}</>\n      </Cloud>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/index.json b/apps/web/public/v0/styles/default/index.json
new file mode 100644
index 00000000..d13e4c82
--- /dev/null
+++ b/apps/web/public/v0/styles/default/index.json
@@ -0,0 +1,21 @@
+{
+  "name": "default",
+  "type": "registry:style",
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require(\"tailwindcss-animate\")"
+      ]
+    }
+  },
+  "cssVars": {},
+  "files": []
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-demo.json b/apps/web/public/v0/styles/default/input-demo.json
new file mode 100644
index 00000000..d34d7c53
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-demo.tsx",
+      "content": "import { Input } from \"@/components/ui/input\"\n\nexport default function InputDemo() {\n   return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-disabled.json b/apps/web/public/v0/styles/default/input-disabled.json
new file mode 100644
index 00000000..4577925f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-disabled.tsx",
+      "content": "import { Input } from \"@/components/ui/input\"\n\nexport default function InputDisabled() {\n   return <Input disabled type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-file.json b/apps/web/public/v0/styles/default/input-file.json
new file mode 100644
index 00000000..00604ef4
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-file.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-file",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-file.tsx",
+      "content": "import { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function InputFile() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"picture\">Picture</Label>\n         <Input id=\"picture\" type=\"file\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-form.json b/apps/web/public/v0/styles/default/input-form.json
new file mode 100644
index 00000000..2002a100
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport { Input } from \"@/components/ui/input\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   username: z.string().min(2, {\n      message: \"Username must be at least 2 characters.\",\n   }),\n})\n\nexport default function InputForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         username: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"username\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Username</FormLabel>\n                     <FormControl>\n                        <Input placeholder=\"nyxb\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your public display name.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-otp-controlled.json b/apps/web/public/v0/styles/default/input-otp-controlled.json
new file mode 100644
index 00000000..de0f75c6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-otp-controlled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp-controlled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport default function InputOTPControlled() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <div className=\"space-y-2\">\n         <InputOTP\n            maxLength={6}\n            value={value}\n            onChange={(value) => setValue(value)}\n         >\n            <InputOTPGroup>\n               <InputOTPSlot index={0} />\n               <InputOTPSlot index={1} />\n               <InputOTPSlot index={2} />\n               <InputOTPSlot index={3} />\n               <InputOTPSlot index={4} />\n               <InputOTPSlot index={5} />\n            </InputOTPGroup>\n         </InputOTP>\n         <div className=\"text-center text-sm\">\n            {value === \"\" ? (\n               <>Enter your one-time password.</>\n            ) : (\n               <>\n                  You entered:\n                  {value}\n               </>\n            )}\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-otp-demo.json b/apps/web/public/v0/styles/default/input-otp-demo.json
new file mode 100644
index 00000000..ce90635f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-otp-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-demo.tsx",
+      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-otp-disabled.json b/apps/web/public/v0/styles/default/input-otp-disabled.json
new file mode 100644
index 00000000..f4857929
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-otp-disabled.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input-otp",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-disabled.tsx",
+      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6} disabled>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-otp-form.json b/apps/web/public/v0/styles/default/input-otp-form.json
new file mode 100644
index 00000000..ef6a4bf4
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-otp-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input-otp",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   pin: z.string().min(6, {\n      message: \"Your one-time password must be 6 characters.\",\n   }),\n})\n\nexport default function InputOTPForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         pin: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"pin\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>One-Time Password</FormLabel>\n                     <FormControl>\n                        <InputOTP maxLength={6} {...field}>\n                           <InputOTPGroup>\n                              <InputOTPSlot index={0} />\n                              <InputOTPSlot index={1} />\n                              <InputOTPSlot index={2} />\n                              <InputOTPSlot index={3} />\n                              <InputOTPSlot index={4} />\n                              <InputOTPSlot index={5} />\n                           </InputOTPGroup>\n                        </InputOTP>\n                     </FormControl>\n                     <FormDescription>\n                        Please enter the one-time password sent to your phone.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-otp-pattern.json b/apps/web/public/v0/styles/default/input-otp-pattern.json
new file mode 100644
index 00000000..d50c37e3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-otp-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp-pattern",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-pattern.tsx",
+      "content": "import { REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport default function InputOTPPattern() {\n   return (\n      <InputOTP\n         maxLength={6}\n         pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n         inputMode=\"text\"\n         spellCheck=\"false\"\n      >\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-otp-separator.json b/apps/web/public/v0/styles/default/input-otp-separator.json
new file mode 100644
index 00000000..e5329152
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-otp-separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp-separator",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-separator.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport default function InputOTPWithSeparator() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-otp.json b/apps/web/public/v0/styles/default/input-otp.json
new file mode 100644
index 00000000..82307495
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-otp.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "ui/input-otp.tsx",
+      "content": "\"use client\"\n\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Dot } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n   React.ElementRef<typeof OTPInput>,\n   React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n   <OTPInput\n      ref={ref}\n      containerClassName={cn(\n         \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n         containerClassName,\n      )}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n   />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n   React.ElementRef<\"div\">,\n   React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n   <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n   React.ElementRef<\"div\">,\n   React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n   const inputOTPContext = React.useContext(OTPInputContext)\n   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n            isActive && \"ring-ring ring-offset-background z-10 ring-2\",\n            className,\n         )}\n         {...props}\n      >\n         {char}\n         {hasFakeCaret && (\n            <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n               <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n            </div>\n         )}\n      </div>\n   )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n   React.ElementRef<\"div\">,\n   React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n   <div ref={ref} role=\"separator\" {...props}>\n      <Dot />\n   </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-phone-default.json b/apps/web/public/v0/styles/default/input-phone-default.json
new file mode 100644
index 00000000..3c6e5923
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-phone-default.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone-default",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/input-phone-default.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"@/components/ui/input-phone\"\n\nexport default function InputPhoneDefault() {\n   const [value, setValue] = React.useState(\"\")\n\n   return <InputPhone value={value} onChange={setValue} defaultCountry=\"US\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-phone-demo.json b/apps/web/public/v0/styles/default/input-phone-demo.json
new file mode 100644
index 00000000..44025f4a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-phone-demo.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/input-phone-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"@/components/ui/input-phone\"\n\nexport default function InputPhoneDemo() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         placeholder=\"Enter a phone number\"\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-phone-form.json b/apps/web/public/v0/styles/default/input-phone-form.json
new file mode 100644
index 00000000..2ce57d10
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-phone-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/input-phone-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { isValidPhoneNumber } from \"react-phone-number-input\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport { InputPhone } from \"@/components/ui/input-phone\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   phone: z\n      .string()\n      .refine(isValidPhoneNumber, { message: \"Invalid phone number\" }),\n})\n\nexport default function InputPhoneForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         phone: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"phone\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Phone Number</FormLabel>\n                     <FormControl>\n                        <InputPhone\n                           placeholder=\"Enter a phone number\"\n                           {...field}\n                        />\n                     </FormControl>\n                     <FormDescription>\n                        Please enter a valid phone number.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-phone-initial.json b/apps/web/public/v0/styles/default/input-phone-initial.json
new file mode 100644
index 00000000..f2ef1193
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-phone-initial.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone-initial",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/input-phone-initial.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"@/components/ui/input-phone\"\n\nexport default function InputPhoneInitial() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         initialValueFormat=\"national\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-phone-international.json b/apps/web/public/v0/styles/default/input-phone-international.json
new file mode 100644
index 00000000..3d00e5dd
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-phone-international.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone-international",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/input-phone-international.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"@/components/ui/input-phone\"\n\nexport default function InputPhoneInternational() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         international\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-phone-national.json b/apps/web/public/v0/styles/default/input-phone-national.json
new file mode 100644
index 00000000..c69cf91e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-phone-national.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone-national",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/input-phone-national.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"@/components/ui/input-phone\"\n\nexport default function InputPhoneNational() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         international={false}\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-phone.json b/apps/web/public/v0/styles/default/input-phone.json
new file mode 100644
index 00000000..5569930d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-phone.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "react-phone-number-input",
+    "@radix-ui/react-icons"
+  ],
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover",
+    "command"
+  ],
+  "files": [
+    {
+      "path": "ui/input-phone.tsx",
+      "content": "import { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport type { InputProps } from \"@/components/ui/input\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\ntype InputPhoneProps = Omit<\n   React.InputHTMLAttributes<HTMLInputElement>,\n   \"onChange\" | \"value\"\n> &\n   Omit<RPNInput.Props<typeof RPNInput.default>, \"onChange\"> & {\n      onChange?: (value: RPNInput.Value) => void\n   }\n\nconst InputPhone: React.ForwardRefExoticComponent<InputPhoneProps> =\n   React.forwardRef<React.ElementRef<typeof RPNInput.default>, InputPhoneProps>(\n      ({ className, onChange, ...props }, ref) => (\n         <RPNInput.default\n            ref={ref}\n            className={cn(\"flex\", className)}\n            flagComponent={FlagComponent}\n            countrySelectComponent={CountrySelect}\n            inputComponent={InputComponent}\n            /**\n             * Handles the onChange event.\n             *\n             * react-phone-number-input might trigger the onChange event as undefined\n             * when a valid phone number is not entered. To prevent this,\n             * the value is coerced to an empty string.\n             *\n             * @param {E164Number | undefined} value - The entered value\n             */\n            onChange={(value) => onChange?.(value as RPNInput.Value)}\n            {...props}\n         />\n      ),\n   )\nInputPhone.displayName = \"InputPhone\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n   ({ className, ...props }, ref) => (\n      <Input\n         className={cn(\"rounded-e-lg rounded-s-none\", className)}\n         {...props}\n         ref={ref}\n      />\n   ),\n)\nInputComponent.displayName = \"InputComponent\"\n\ninterface CountrySelectOption {\n   label: string\n   value: RPNInput.Country\n}\n\ninterface CountrySelectProps {\n   disabled?: boolean\n   value: RPNInput.Country\n   onChange: (value: RPNInput.Country) => void\n   options: CountrySelectOption[]\n}\n\nfunction CountrySelect({\n   disabled,\n   value,\n   onChange,\n   options,\n}: CountrySelectProps) {\n   const handleSelect = React.useCallback(\n      (country: RPNInput.Country) => onChange(country),\n      [onChange],\n   )\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               type=\"button\"\n               variant=\"outline\"\n               className={cn(\"flex gap-1 rounded-e-none rounded-s-lg px-3\")}\n               disabled={disabled}\n            >\n               <FlagComponent country={value} countryName={value} />\n               <CaretSortIcon\n                  className={cn(\n                     \"-mr-2 size-4 opacity-50\",\n                     disabled ? \"hidden\" : \"opacity-100\",\n                  )}\n               />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[300px] p-0\">\n            <Command>\n               <CommandList>\n                  <CommandInput placeholder=\"Search country...\" />\n                  <CommandEmpty>No country found.</CommandEmpty>\n                  <CommandGroup>\n                     {options.map((option) => (\n                        <CommandItem\n                           className=\"gap-2\"\n                           key={option.value || \"ZZ\"}\n                           onSelect={() => handleSelect(option.value)}\n                        >\n                           <FlagComponent\n                              country={option.value}\n                              countryName={option.label}\n                           />\n                           <span className=\"flex-1 text-sm\">\n                              {option.label}\n                           </span>\n                           {option.value && (\n                              <span className=\"text-foreground/50 text-sm\">\n                                 {`+${RPNInput.getCountryCallingCode(option.value)}`}\n                              </span>\n                           )}\n                           <CheckIcon\n                              className={cn(\n                                 \"ml-auto size-4\",\n                                 option.value === value\n                                    ? \"opacity-100\"\n                                    : \"opacity-0\",\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n\nfunction FlagComponent({ country, countryName }: RPNInput.FlagProps) {\n   const Flag = flags[country]\n\n   return (\n      <span className=\"bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm\">\n         {Flag && <Flag title={countryName} />}\n      </span>\n   )\n}\nFlagComponent.displayName = \"FlagComponent\"\n\nexport { InputPhone }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-with-button.json b/apps/web/public/v0/styles/default/input-with-button.json
new file mode 100644
index 00000000..2ce81465
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-with-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-with-button",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-button.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\n\nexport default function InputWithButton() {\n   return (\n      <div className=\"flex w-full max-w-sm items-center space-x-2\">\n         <Input type=\"email\" placeholder=\"Email\" />\n         <Button type=\"submit\">Subscribe</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-with-label.json b/apps/web/public/v0/styles/default/input-with-label.json
new file mode 100644
index 00000000..d34d2be3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-with-label.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-with-label",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-label.tsx",
+      "content": "import { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function InputWithLabel() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"email\">Email</Label>\n         <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input-with-text.json b/apps/web/public/v0/styles/default/input-with-text.json
new file mode 100644
index 00000000..0bebbecf
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input-with-text.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-with-text",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-text.tsx",
+      "content": "import { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function InputWithText() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"email-2\">Email</Label>\n         <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n         <p className=\"text-muted-foreground text-sm\">\n            Enter your email address.\n         </p>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/input.json b/apps/web/public/v0/styles/default/input.json
new file mode 100644
index 00000000..6b1aa401
--- /dev/null
+++ b/apps/web/public/v0/styles/default/input.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/input.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n   extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n   ({ className, type, ...props }, ref) => {\n      return (\n         <input\n            type={type}\n            className={cn(\n               \"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/interactive-grid-pattern-demo-2.json b/apps/web/public/v0/styles/default/interactive-grid-pattern-demo-2.json
new file mode 100644
index 00000000..34aaaf39
--- /dev/null
+++ b/apps/web/public/v0/styles/default/interactive-grid-pattern-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "interactive-grid-pattern-demo-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/interactive-grid-pattern-demo-2.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { InteractiveGridPattern } from \"@/components/ui/interactive-grid-pattern\"\n\nexport default function InteractiveGridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Interactive Grid Pattern\n         </p>\n         <InteractiveGridPattern\n            className={cn(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n            )}\n            width={20}\n            height={20}\n            squares={[80, 80]}\n            squaresClassName=\"hover:fill-blue-500\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/interactive-grid-pattern-demo.json b/apps/web/public/v0/styles/default/interactive-grid-pattern-demo.json
new file mode 100644
index 00000000..6e7cc782
--- /dev/null
+++ b/apps/web/public/v0/styles/default/interactive-grid-pattern-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "interactive-grid-pattern-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/interactive-grid-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { InteractiveGridPattern } from \"@/components/ui/interactive-grid-pattern\"\n\nexport default function InteractiveGridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Interactive Grid Pattern\n         </p>\n         <InteractiveGridPattern\n            className={cn(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n               \"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/interactive-grid-pattern.json b/apps/web/public/v0/styles/default/interactive-grid-pattern.json
new file mode 100644
index 00000000..1b1c1fa9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/interactive-grid-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "interactive-grid-pattern",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/interactive-grid-pattern.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * InteractiveGridPattern is a component that renders a grid pattern with interactive squares.\n *\n * @param width - The width of each square.\n * @param height - The height of each square.\n * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares.\n * @param className - The class name of the grid.\n * @param squaresClassName - The class name of the squares.\n */\ninterface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   squares?: [number, number] // [horizontal, vertical]\n   className?: string\n   squaresClassName?: string\n}\n\n/**\n * The InteractiveGridPattern component.\n *\n * @see InteractiveGridPatternProps for the props interface.\n * @returns A React component.\n */\nexport function InteractiveGridPattern({\n   width = 40,\n   height = 40,\n   squares = [24, 24],\n   className,\n   squaresClassName,\n   ...props\n}: InteractiveGridPatternProps) {\n   const [horizontal, vertical] = squares\n   const [hoveredSquare, setHoveredSquare] = useState<number | null>(null)\n\n   return (\n      <svg\n         width={width * horizontal}\n         height={height * vertical}\n         className={cn(\n            \"absolute inset-0 h-full w-full border border-gray-400/30\",\n            className,\n         )}\n         {...props}\n      >\n         {Array.from({ length: horizontal * vertical }).map((_, index) => {\n            const x = (index % horizontal) * width\n            const y = Math.floor(index / horizontal) * height\n            return (\n               <rect\n                  key={index}\n                  x={x}\n                  y={y}\n                  width={width}\n                  height={height}\n                  className={cn(\n                     \"stroke-gray-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000\",\n                     hoveredSquare === index\n                        ? \"fill-gray-300/30\"\n                        : \"fill-transparent\",\n                     squaresClassName,\n                  )}\n                  onMouseEnter={() => setHoveredSquare(index)}\n                  onMouseLeave={() => setHoveredSquare(null)}\n               />\n            )\n         })}\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/iphone-15-pro-demo-2.json b/apps/web/public/v0/styles/default/iphone-15-pro-demo-2.json
new file mode 100644
index 00000000..995bf87c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/iphone-15-pro-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "iphone-15-pro-demo-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/iphone-15-pro-demo-2.tsx",
+      "content": "import Iphone15Pro from \"@/components/ui/iphone-15-pro\"\n\nexport default function Iphone15ProDemo() {\n   return (\n      <div className=\"relative\">\n         <Iphone15Pro\n            className=\"size-full\"\n            src=\"https://via.placeholder.com/430x880\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/iphone-15-pro-demo.json b/apps/web/public/v0/styles/default/iphone-15-pro-demo.json
new file mode 100644
index 00000000..226a9902
--- /dev/null
+++ b/apps/web/public/v0/styles/default/iphone-15-pro-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "iphone-15-pro-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/iphone-15-pro-demo.tsx",
+      "content": "import Iphone15Pro from \"@/components/ui/iphone-15-pro\"\n\nexport default function Iphone15ProDemo() {\n   return (\n      <div className=\"relative\">\n         <Iphone15Pro className=\"size-full\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/iphone-15-pro.json b/apps/web/public/v0/styles/default/iphone-15-pro.json
new file mode 100644
index 00000000..8361eba6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/iphone-15-pro.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "iphone-15-pro",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/iphone-15-pro.tsx",
+      "content": "import type { SVGProps } from \"react\"\n\nexport interface Iphone15ProProps extends SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   src?: string\n}\n\nexport default function Iphone15Pro({\n   width = 433,\n   height = 882,\n   src,\n   ...props\n}: Iphone15ProProps) {\n   return (\n      <svg\n         width={width}\n         height={height}\n         viewBox={`0 0 ${width} ${height}`}\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z\"\n            className=\"fill-white dark:fill-[#262626]\"\n         />\n         <path\n            opacity=\"0.5\"\n            d=\"M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z\"\n            className=\"fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]\"\n         />\n\n         {src && (\n            <image\n               href={src}\n               x=\"21.25\"\n               y=\"19.25\"\n               width=\"389.5\"\n               height=\"843.5\"\n               preserveAspectRatio=\"xMidYMid slice\"\n               clipPath=\"url(#roundedCorners)\"\n            />\n         )}\n         <path\n            d=\"M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z\"\n            className=\"fill-[#F5F5F5] dark:fill-[#262626]\"\n         />\n         <path\n            d=\"M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z\"\n            className=\"fill-[#F5F5F5] dark:fill-[#262626]\"\n         />\n         <path\n            d=\"M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <defs>\n            <clipPath id=\"roundedCorners\">\n               <rect\n                  x=\"21.25\"\n                  y=\"19.25\"\n                  width=\"389.5\"\n                  height=\"843.5\"\n                  rx=\"55.75\"\n                  ry=\"55.75\"\n               />\n            </clipPath>\n         </defs>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/label-demo.json b/apps/web/public/v0/styles/default/label-demo.json
new file mode 100644
index 00000000..e5b9979d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/label-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "label-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/components/ui/checkbox\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function LabelDemo() {\n   return (\n      <div>\n         <div className=\"flex items-center space-x-2\">\n            <Checkbox id=\"terms\" />\n            <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/label.json b/apps/web/public/v0/styles/default/label.json
new file mode 100644
index 00000000..f2f3186e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/label.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "label",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-label"
+  ],
+  "files": [
+    {
+      "path": "ui/label.tsx",
+      "content": "\"use client\"\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst labelVariants = cva(\n   \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n)\n\nconst Label = React.forwardRef<\n   React.ElementRef<typeof LabelPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n      VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n   <LabelPrimitive.Root\n      ref={ref}\n      className={cn(labelVariants(), className)}\n      {...props}\n   />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/letter-pullup-demo.json b/apps/web/public/v0/styles/default/letter-pullup-demo.json
new file mode 100644
index 00000000..2be7c78c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/letter-pullup-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "letter-pullup-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/letter-pullup-demo.tsx",
+      "content": "import LetterPullup from \"@/components/ui/letter-pullup\"\n\nexport default async function LetterPullupDemo() {\n   return <LetterPullup words=\"Staggered Letter Pull Up\" delay={0.05} />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/letter-pullup.json b/apps/web/public/v0/styles/default/letter-pullup.json
new file mode 100644
index 00000000..16dedc7f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/letter-pullup.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "letter-pullup",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/letter-pullup.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface LetterPullupProps {\n   className?: string\n   words: string\n   delay?: number\n}\n\nexport default function LetterPullup({\n   className,\n   words,\n   delay,\n}: LetterPullupProps) {\n   const letters = words.split(\"\")\n\n   const pullupVariant = {\n      initial: { y: 100, opacity: 0 },\n      animate: (i: any) => ({\n         y: 0,\n         opacity: 1,\n         transition: {\n            delay: i * (delay || 0.05), // By default, delay each letter's animation by 0.05 seconds\n         },\n      }),\n   }\n\n   return (\n      <div className=\"flex justify-center\">\n         {letters.map((letter, i) => (\n            <motion.h1\n               key={i}\n               variants={pullupVariant}\n               initial=\"initial\"\n               animate=\"animate\"\n               custom={i}\n               className={cn(\n                  \"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-4xl md:leading-[5rem] dark:text-white\",\n                  className,\n               )}\n            >\n               {letter === \" \" ? <span>&nbsp;</span> : letter}\n            </motion.h1>\n         ))}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/line-shadow-text-demo.json b/apps/web/public/v0/styles/default/line-shadow-text-demo.json
new file mode 100644
index 00000000..bf91ed54
--- /dev/null
+++ b/apps/web/public/v0/styles/default/line-shadow-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "line-shadow-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/line-shadow-text-demo.tsx",
+      "content": "import { useTheme } from \"next-themes\"\nimport { LineShadowText } from \"@/components/ui/line-shadow-text\"\n\nexport default function LineShadowTextDemo() {\n   const theme = useTheme()\n   const shadowColor = theme.resolvedTheme === \"dark\" ? \"white\" : \"black\"\n   return (\n      <h1 className=\"text-balance text-5xl font-semibold leading-none tracking-tighter sm:text-6xl md:text-7xl lg:text-8xl\">\n         Ship\n         <LineShadowText className=\"italic\" shadowColor={shadowColor}>\n            Fast\n         </LineShadowText>\n      </h1>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/line-shadow-text.json b/apps/web/public/v0/styles/default/line-shadow-text.json
new file mode 100644
index 00000000..a017b17d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/line-shadow-text.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "line-shadow-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/line-shadow-text.tsx",
+      "content": "import { type MotionProps, motion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface LineShadowTextProps\n   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,\n      MotionProps {\n   shadowColor?: string\n   as?: React.ElementType\n}\n\nexport function LineShadowText({\n   children,\n   shadowColor = \"black\",\n   className,\n   as: Component = \"span\",\n   ...props\n}: LineShadowTextProps) {\n   const MotionComponent = motion.create(Component)\n   const content = typeof children === \"string\" ? children : null\n\n   if (!content) {\n      throw new Error(\"LineShadowText only accepts string content\")\n   }\n\n   return (\n      <MotionComponent\n         style={{ \"--shadow-color\": shadowColor } as React.CSSProperties}\n         className={cn(\n            \"relative z-0 inline-flex\",\n            \"after:absolute after:left-[0.04em] after:top-[0.04em] after:content-[attr(data-text)]\",\n            \"after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]\",\n            \"after:-z-10 after:bg-[length:0.06em_0.06em] after:bg-clip-text after:text-transparent\",\n            \"after:animate-line-shadow\",\n            className,\n         )}\n         data-text={content}\n         {...props}\n      >\n         {content}\n      </MotionComponent>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "line-shadow": "line-shadow 15s linear infinite"
+          },
+          "keyframes": {
+            "line-shadow": {
+              "0%": {
+                "background-position": "0 0"
+              },
+              "100%": {
+                "background-position": "100% -100%"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/login-01.json b/apps/web/public/v0/styles/default/login-01.json
new file mode 100644
index 00000000..0d274b5b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/login-01.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-01",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A simple login form.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-01/page.tsx",
+      "content": "import { LoginForm } from \"@/components/login-form\"\n\nexport default function Page() {\n   return (\n      <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n         <div className=\"w-full max-w-sm\">\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-01/components/login-form.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n   return (\n      <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n         <Card>\n            <CardHeader>\n               <CardTitle className=\"text-2xl\">Login</CardTitle>\n               <CardDescription>\n                  Enter your email below to login to your account\n               </CardDescription>\n            </CardHeader>\n            <CardContent>\n               <form>\n                  <div className=\"flex flex-col gap-6\">\n                     <div className=\"grid gap-2\">\n                        <Label htmlFor=\"email\">Email</Label>\n                        <Input\n                           id=\"email\"\n                           type=\"email\"\n                           placeholder=\"m@example.com\"\n                           required\n                        />\n                     </div>\n                     <div className=\"grid gap-2\">\n                        <div className=\"flex items-center\">\n                           <Label htmlFor=\"password\">Password</Label>\n                           <a\n                              href=\"#\"\n                              className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                           >\n                              Forgot your password?\n                           </a>\n                        </div>\n                        <Input id=\"password\" type=\"password\" required />\n                     </div>\n                     <Button type=\"submit\" className=\"w-full\">\n                        Login\n                     </Button>\n                     <Button variant=\"outline\" className=\"w-full\">\n                        Login with Google\n                     </Button>\n                  </div>\n                  <div className=\"mt-4 text-center text-sm\">\n                     Don&apos;t have an account?{\" \"}\n                     <a href=\"#\" className=\"underline underline-offset-4\">\n                        Sign up\n                     </a>\n                  </div>\n               </form>\n            </CardContent>\n         </Card>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/login-02.json b/apps/web/public/v0/styles/default/login-02.json
new file mode 100644
index 00000000..e47e716e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/login-02.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-02",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-02/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"grid min-h-svh lg:grid-cols-2\">\n         <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n            <div className=\"flex justify-center gap-2 md:justify-start\">\n               <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n                  <div className=\"flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n                     <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  Acme Inc.\n               </a>\n            </div>\n            <div className=\"flex flex-1 items-center justify-center\">\n               <div className=\"w-full max-w-xs\">\n                  <LoginForm />\n               </div>\n            </div>\n         </div>\n         <div className=\"relative hidden bg-muted lg:block\">\n            <img\n               src=\"/placeholder.svg\"\n               alt=\"Image\"\n               className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-02/components/login-form.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"form\">) {\n   return (\n      <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n         <div className=\"flex flex-col items-center gap-2 text-center\">\n            <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n            <p className=\"text-balance text-sm text-muted-foreground\">\n               Enter your email below to login to your account\n            </p>\n         </div>\n         <div className=\"grid gap-6\">\n            <div className=\"grid gap-2\">\n               <Label htmlFor=\"email\">Email</Label>\n               <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n               />\n            </div>\n            <div className=\"grid gap-2\">\n               <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                     href=\"#\"\n                     className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n                  >\n                     Forgot your password?\n                  </a>\n               </div>\n               <Input id=\"password\" type=\"password\" required />\n            </div>\n            <Button type=\"submit\" className=\"w-full\">\n               Login\n            </Button>\n            <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n               <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                  Or continue with\n               </span>\n            </div>\n            <Button\n               variant=\"outline\"\n               className=\"w-full h-10 flex items-center justify-center gap-2\"\n            >\n               <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  className=\"h-5 w-5\"\n               >\n                  <path\n                     d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                     fill=\"currentColor\"\n                  />\n               </svg>\n               Login with GitHub\n            </Button>\n         </div>\n         <div className=\"text-center text-sm\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n               Sign up\n            </a>\n         </div>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/login-03.json b/apps/web/public/v0/styles/default/login-03.json
new file mode 100644
index 00000000..34454eaa
--- /dev/null
+++ b/apps/web/public/v0/styles/default/login-03.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-03",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-03/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n         <div className=\"flex w-full max-w-sm flex-col gap-6\">\n            <a\n               href=\"#\"\n               className=\"flex items-center gap-2 self-center font-medium\"\n            >\n               <div className=\"flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n               </div>\n               Acme Inc.\n            </a>\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-03/components/login-form.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n   return (\n      <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n         <Card>\n            <CardHeader className=\"text-center\">\n               <CardTitle className=\"text-xl\">Welcome back</CardTitle>\n               <CardDescription>\n                  Login with your Apple or Google account\n               </CardDescription>\n            </CardHeader>\n            <CardContent>\n               <form>\n                  <div className=\"grid gap-6\">\n                     <div className=\"flex flex-col gap-4\">\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center gap-2\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           Login with Apple\n                        </Button>\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center gap-2\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           Login with Google\n                        </Button>\n                     </div>\n                     <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                        <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                           Or continue with\n                        </span>\n                     </div>\n                     <div className=\"grid gap-6\">\n                        <div className=\"grid gap-2\">\n                           <Label htmlFor=\"email\">Email</Label>\n                           <Input\n                              id=\"email\"\n                              type=\"email\"\n                              placeholder=\"m@example.com\"\n                              required\n                           />\n                        </div>\n                        <div className=\"grid gap-2\">\n                           <div className=\"flex items-center\">\n                              <Label htmlFor=\"password\">Password</Label>\n                              <a\n                                 href=\"#\"\n                                 className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n                              >\n                                 Forgot your password?\n                              </a>\n                           </div>\n                           <Input id=\"password\" type=\"password\" required />\n                        </div>\n                        <Button type=\"submit\" className=\"w-full\">\n                           Login\n                        </Button>\n                     </div>\n                     <div className=\"text-center text-sm\">\n                        Don&apos;t have an account?{\" \"}\n                        <a href=\"#\" className=\"underline underline-offset-4\">\n                           Sign up\n                        </a>\n                     </div>\n                  </div>\n               </form>\n            </CardContent>\n         </Card>\n         <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  \">\n            By clicking continue, you agree to our{\" \"}\n            <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/login-04.json b/apps/web/public/v0/styles/default/login-04.json
new file mode 100644
index 00000000..7705a000
--- /dev/null
+++ b/apps/web/public/v0/styles/default/login-04.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-04",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A login page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-04/page.tsx",
+      "content": "import { LoginForm } from \"@/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n         <div className=\"w-full max-w-sm md:max-w-3xl\">\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-04/components/login-form.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentProps<\"div\">) {\n   return (\n      <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n         <Card className=\"overflow-hidden\">\n            <CardContent className=\"grid p-0 md:grid-cols-2\">\n               <form className=\"p-6 md:p-8\">\n                  <div className=\"flex flex-col gap-6\">\n                     <div className=\"flex flex-col items-center text-center\">\n                        <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                        <p className=\"text-balance text-muted-foreground\">\n                           Login to your Acme Inc account\n                        </p>\n                     </div>\n                     <div className=\"grid gap-2\">\n                        <Label htmlFor=\"email\">Email</Label>\n                        <Input\n                           id=\"email\"\n                           type=\"email\"\n                           placeholder=\"m@example.com\"\n                           required\n                        />\n                     </div>\n                     <div className=\"grid gap-2\">\n                        <div className=\"flex items-center\">\n                           <Label htmlFor=\"password\">Password</Label>\n                           <a\n                              href=\"#\"\n                              className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                           >\n                              Forgot your password?\n                           </a>\n                        </div>\n                        <Input id=\"password\" type=\"password\" required />\n                     </div>\n                     <Button type=\"submit\" className=\"w-full\">\n                        Login\n                     </Button>\n                     <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                        <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                           Or continue with\n                        </span>\n                     </div>\n                     <div className=\"grid grid-cols-3 gap-4\">\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           <span className=\"sr-only\">Login with Apple</span>\n                        </Button>\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           <span className=\"sr-only\">Login with Google</span>\n                        </Button>\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           <span className=\"sr-only\">Login with Meta</span>\n                        </Button>\n                     </div>\n                     <div className=\"text-center text-sm\">\n                        Don&apos;t have an account?{\" \"}\n                        <a href=\"#\" className=\"underline underline-offset-4\">\n                           Sign up\n                        </a>\n                     </div>\n                  </div>\n               </form>\n               <div className=\"relative hidden bg-muted md:block\">\n                  <img\n                     src=\"/placeholder.svg\"\n                     alt=\"Image\"\n                     className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n                  />\n               </div>\n            </CardContent>\n         </Card>\n         <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary\">\n            By clicking continue, you agree to our{\" \"}\n            <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/login-05.json b/apps/web/public/v0/styles/default/login-05.json
new file mode 100644
index 00000000..de56f5ff
--- /dev/null
+++ b/apps/web/public/v0/styles/default/login-05.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-05",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n         <div className=\"w-full max-w-sm\">\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-05/components/login-form.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n   return (\n      <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n         <form>\n            <div className=\"flex flex-col gap-6\">\n               <div className=\"flex flex-col items-center gap-2\">\n                  <a\n                     href=\"#\"\n                     className=\"flex flex-col items-center gap-2 font-medium\"\n                  >\n                     <div className=\"flex h-8 w-8 items-center justify-center rounded-md\">\n                        <GalleryVerticalEnd className=\"size-6\" />\n                     </div>\n                     <span className=\"sr-only\">Acme Inc.</span>\n                  </a>\n                  <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n                  <div className=\"text-center text-sm\">\n                     Don&apos;t have an account?{\" \"}\n                     <a href=\"#\" className=\"underline underline-offset-4\">\n                        Sign up\n                     </a>\n                  </div>\n               </div>\n               <div className=\"flex flex-col gap-6\">\n                  <div className=\"grid gap-2\">\n                     <Label htmlFor=\"email\">Email</Label>\n                     <Input\n                        id=\"email\"\n                        type=\"email\"\n                        placeholder=\"m@example.com\"\n                        required\n                     />\n                  </div>\n                  <Button type=\"submit\" className=\"w-full\">\n                     Login\n                  </Button>\n               </div>\n               <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                  <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                     Or\n                  </span>\n               </div>\n               <div className=\"grid gap-4 sm:grid-cols-2\">\n                  <Button variant=\"outline\" className=\"w-full\">\n                     <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                     >\n                        <path\n                           d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                           fill=\"currentColor\"\n                        />\n                     </svg>\n                     Continue with Apple\n                  </Button>\n                  <Button variant=\"outline\" className=\"w-full\">\n                     <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                     >\n                        <path\n                           d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                           fill=\"currentColor\"\n                        />\n                     </svg>\n                     Continue with Google\n                  </Button>\n               </div>\n            </div>\n         </form>\n         <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary  \">\n            By clicking continue, you agree to our{\" \"}\n            <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/magic-card-demo.json b/apps/web/public/v0/styles/default/magic-card-demo.json
new file mode 100644
index 00000000..2256a0f2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/magic-card-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "magic-card-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/magic-card-demo.tsx",
+      "content": "import { MagicCard, MagicContainer } from \"@/components/ui/magic-card\"\n\nexport default function MagicCardDemo() {\n   return (\n      <MagicContainer className=\"flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row\">\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Magic\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Card\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Demo\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n      </MagicContainer>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/magic-card-gradient.json b/apps/web/public/v0/styles/default/magic-card-gradient.json
new file mode 100644
index 00000000..8a204604
--- /dev/null
+++ b/apps/web/public/v0/styles/default/magic-card-gradient.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "magic-card-gradient",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/magic-card-gradient.tsx",
+      "content": "import { MagicCard, MagicContainer } from \"@/components/ui/magic-card\"\n\nexport default function MagicCardGradient() {\n   return (\n      <MagicContainer className=\"flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row\">\n         <MagicCard\n            borderWidth={3}\n            className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\"\n         >\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Magic\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Card\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Demo\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n      </MagicContainer>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/magic-card.json b/apps/web/public/v0/styles/default/magic-card.json
new file mode 100644
index 00000000..781d9b38
--- /dev/null
+++ b/apps/web/public/v0/styles/default/magic-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "magic-card",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/magic-card.tsx",
+      "content": "\"use client\"\n\nimport type { CSSProperties, ReactElement, ReactNode } from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface MousePosition {\n   x: number\n   y: number\n}\n\nfunction useMousePosition(): MousePosition {\n   const [mousePosition, setMousePosition] = useState<MousePosition>({\n      x: 0,\n      y: 0,\n   })\n\n   useEffect(() => {\n      const handleMouseMove = (event: globalThis.MouseEvent) => {\n         setMousePosition({ x: event.clientX, y: event.clientY })\n      }\n\n      window.addEventListener(\"mousemove\", handleMouseMove)\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMouseMove)\n      }\n   }, [])\n\n   return mousePosition\n}\n\ninterface MagicContainerProps {\n   children?: ReactNode\n   className?: string\n}\n\nfunction MagicContainer({ children, className }: MagicContainerProps) {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const mousePosition = useMousePosition()\n   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })\n   const containerSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })\n   const [boxes, setBoxes] = useState<Array<HTMLElement>>([])\n\n   useEffect(() => {\n      init()\n      containerRef.current &&\n         setBoxes(\n            Array.from(containerRef.current.children).map(\n               (el) => el as HTMLElement,\n            ),\n         )\n   }, [])\n\n   useEffect(() => {\n      init()\n      window.addEventListener(\"resize\", init)\n\n      return () => {\n         window.removeEventListener(\"resize\", init)\n      }\n   }, [setBoxes])\n\n   useEffect(() => {\n      onMouseMove()\n   }, [mousePosition])\n\n   const init = () => {\n      if (containerRef.current) {\n         containerSize.current.w = containerRef.current.offsetWidth\n         containerSize.current.h = containerRef.current.offsetHeight\n      }\n   }\n\n   const onMouseMove = () => {\n      if (containerRef.current) {\n         const rect = containerRef.current.getBoundingClientRect()\n         const { w, h } = containerSize.current\n         const x = mousePosition.x - rect.left\n         const y = mousePosition.y - rect.top\n         const inside = x < w && x > 0 && y < h && y > 0\n\n         mouse.current.x = x\n         mouse.current.y = y\n         boxes.forEach((box) => {\n            const boxX =\n               -(box.getBoundingClientRect().left - rect.left) + mouse.current.x\n            const boxY =\n               -(box.getBoundingClientRect().top - rect.top) + mouse.current.y\n            box.style.setProperty(\"--mouse-x\", `${boxX}px`)\n            box.style.setProperty(\"--mouse-y\", `${boxY}px`)\n\n            if (inside) box.style.setProperty(\"--opacity\", `1`)\n            else box.style.setProperty(\"--opacity\", `0`)\n         })\n      }\n   }\n\n   return (\n      <div className={cn(\"size-full\", className)} ref={containerRef}>\n         {children}\n      </div>\n   )\n}\n\ninterface MagicCardProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the card\n    */\n   as?: ReactElement\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the card\n    */\n   className?: string\n\n   /**\n    * @default \"\"\n    * @type ReactNode\n    * @description\n    * The children of the card\n    */\n   children?: ReactNode\n\n   /**\n    * @default 600\n    * @type number\n    * @description\n    * The size of the spotlight effect in pixels\n    */\n   size?: number\n\n   /**\n    * @default true\n    * @type boolean\n    * @description\n    * Whether to show the spotlight\n    */\n   spotlight?: boolean\n\n   /**\n    * @default \"rgba(255,255,255,0.03)\"\n    * @type string\n    * @description\n    * The color of the spotlight\n    */\n   spotlightColor?: string\n\n   /**\n    * @default true\n    * @type boolean\n    * @description\n    * Whether to isolate the card which is being hovered\n    */\n   isolated?: boolean\n\n   /**\n    * @default \"rgba(255,255,255,0.03)\"\n    * @type string\n    * @description\n    * The background of the card\n    */\n   background?: string\n\n   [key: string]: any\n}\n\nconst MagicCard: React.FC<MagicCardProps> = ({\n   className,\n   children,\n   size = 600,\n   spotlight = true,\n   borderColor = \"hsl(0 0% 98%)\",\n   isolated = true,\n   ...props\n}) => {\n   return (\n      <div\n         style={\n            {\n               \"--mask-size\": `${size}px`,\n               \"--border-color\": `${borderColor}`,\n            } as CSSProperties\n         }\n         className={cn(\n            \"relative z-0 size-full rounded-2xl p-6\",\n            \"bg-gray-300 dark:bg-gray-700\",\n            \"bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--border-color),transparent_100%)]\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n\n         {/* Background */}\n         <div className=\"absolute inset-px -z-20 rounded-2xl bg-white dark:bg-black/95\" />\n      </div>\n   )\n}\n\nexport { MagicCard, MagicContainer }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/marquee-3d.json b/apps/web/public/v0/styles/default/marquee-3d.json
new file mode 100644
index 00000000..42c468ed
--- /dev/null
+++ b/apps/web/public/v0/styles/default/marquee-3d.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "marquee-3d",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/marquee-3d.tsx",
+      "content": "import Marquee from \"@/components/ui/marquee\"\n\nconst logos = [\n   {\n      name: \"Microsoft\",\n      img: \"https://picsum.photos/id/1/200/300\",\n   },\n   {\n      name: \"Apple\",\n      img: \"https://picsum.photos/id/2/200/300\",\n   },\n   {\n      name: \"Google\",\n      img: \"https://picsum.photos/id/3/200/300\",\n   },\n   {\n      name: \"Facebook\",\n      img: \"https://picsum.photos/id/4/200/300\",\n   },\n   {\n      name: \"LinkedIn\",\n      img: \"https://picsum.photos/id/5/200/300\",\n   },\n   {\n      name: \"Twitter\",\n      img: \"https://picsum.photos/id/6/200/300\",\n   },\n]\n\nfunction Marquee3D() {\n   return (\n      <div className=\"bg-background relative flex h-full w-96 flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border px-20 md:shadow-xl\">\n         <div className=\"flex flex-row gap-4 [perspective:300px]\">\n            <Marquee\n               className=\"h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]\"\n               vertical\n               style={{\n                  transform:\n                     \"translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)\",\n               }}\n            >\n               {logos.map((data, idx) => (\n                  <img\n                     key={idx}\n                     src={data.img}\n                     alt={data.name}\n                     className=\"mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300\"\n                  />\n               ))}\n            </Marquee>\n         </div>\n\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default Marquee3D\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/marquee-demo-vertical.json b/apps/web/public/v0/styles/default/marquee-demo-vertical.json
new file mode 100644
index 00000000..60d22718
--- /dev/null
+++ b/apps/web/public/v0/styles/default/marquee-demo-vertical.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "marquee-demo-vertical",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/marquee-demo-vertical.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport Marquee from \"@/components/ui/marquee\"\n\nconst reviews = [\n   {\n      name: \"Jack\",\n      username: \"@jack\",\n      body: \"I've never seen anything like this before. It's amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jack\",\n   },\n   {\n      name: \"Jill\",\n      username: \"@jill\",\n      body: \"I don't know what to say. I'm speechless. This is amazing.\",\n      img: \"https://avatar.vercel.sh/jill\",\n   },\n   {\n      name: \"John\",\n      username: \"@john\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/john\",\n   },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nfunction ReviewCard({\n   img,\n   name,\n   username,\n   body,\n}: {\n   img: string\n   name: string\n   username: string\n   body: string\n}) {\n   return (\n      <figure\n         className={cn(\n            \"relative h-40 w-36 cursor-pointer overflow-hidden rounded-xl border p-4\",\n            // light styles\n            \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n            // dark styles\n            \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-2\">\n            <img\n               className=\"rounded-full\"\n               width=\"32\"\n               height=\"32\"\n               alt=\"\"\n               src={img}\n            />\n            <div className=\"flex flex-col\">\n               <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {name}\n               </figcaption>\n               <p className=\"text-xs font-medium dark:text-white/40\">\n                  {username}\n               </p>\n            </div>\n         </div>\n         <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n      </figure>\n   )\n}\n\nfunction MarqueeDemoVertical() {\n   return (\n      <div className=\"bg-background relative flex h-96 flex-row items-center justify-center overflow-hidden rounded-lg border sm:px-20 md:shadow-xl\">\n         <Marquee pauseOnHover vertical className=\"[--duration:20s]\">\n            {firstRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <Marquee reverse pauseOnHover vertical className=\"[--duration:20s]\">\n            {secondRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeDemoVertical\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/marquee-demo.json b/apps/web/public/v0/styles/default/marquee-demo.json
new file mode 100644
index 00000000..7e0bf88e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/marquee-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "marquee-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/marquee-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport Marquee from \"@/components/ui/marquee\"\n\nconst reviews = [\n   {\n      name: \"Jack\",\n      username: \"@jack\",\n      body: \"I've never seen anything like this before. It's amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jack\",\n   },\n   {\n      name: \"Jill\",\n      username: \"@jill\",\n      body: \"I don't know what to say. I'm speechless. This is amazing.\",\n      img: \"https://avatar.vercel.sh/jill\",\n   },\n   {\n      name: \"John\",\n      username: \"@john\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/john\",\n   },\n   {\n      name: \"Jane\",\n      username: \"@jane\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jane\",\n   },\n   {\n      name: \"Jenny\",\n      username: \"@jenny\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jenny\",\n   },\n   {\n      name: \"James\",\n      username: \"@james\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/james\",\n   },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nfunction ReviewCard({\n   img,\n   name,\n   username,\n   body,\n}: {\n   img: string\n   name: string\n   username: string\n   body: string\n}) {\n   return (\n      <figure\n         className={cn(\n            \"relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4\",\n            // light styles\n            \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n            // dark styles\n            \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-2\">\n            <img\n               className=\"rounded-full\"\n               width=\"32\"\n               height=\"32\"\n               alt=\"\"\n               src={img}\n            />\n            <div className=\"flex flex-col\">\n               <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {name}\n               </figcaption>\n               <p className=\"text-xs font-medium dark:text-white/40\">\n                  {username}\n               </p>\n            </div>\n         </div>\n         <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n      </figure>\n   )\n}\n\nfunction MarqueeDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full flex-col items-center justify-center overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n         <Marquee pauseOnHover className=\"[--duration:20s]\">\n            {firstRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <Marquee reverse pauseOnHover className=\"[--duration:20s]\">\n            {secondRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/marquee-logos.json b/apps/web/public/v0/styles/default/marquee-logos.json
new file mode 100644
index 00000000..84dc6d2e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/marquee-logos.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "marquee-logos",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/marquee-logos.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport Marquee from \"@/components/ui/marquee\"\n\nconst logos = [\n   {\n      name: \"Microsoft\",\n      img: \"https://cdn.simpleicons.org/microsoft/000/fff\",\n   },\n   {\n      name: \"Apple\",\n      img: \"https://cdn.simpleicons.org/apple/000/fff\",\n   },\n   {\n      name: \"Google\",\n      img: \"https://cdn.simpleicons.org/google/000/fff\",\n   },\n   {\n      name: \"Facebook\",\n      img: \"https://cdn.simpleicons.org/facebook/000/fff\",\n   },\n   {\n      name: \"LinkedIn\",\n      img: \"https://cdn.simpleicons.org/linkedin/000/fff\",\n   },\n   {\n      name: \"Twitter\",\n      img: \"https://cdn.simpleicons.org/twitter/000/fff\",\n   },\n]\n\nfunction Logo({ name, img }: { name: string; img: string }) {\n   return (\n      <div className={cn(\"size-12 cursor-pointer\")}>\n         <img src={img} alt={name} />\n      </div>\n   )\n}\n\nfunction MarqueeLogos() {\n   return (\n      <div className=\"bg-background relative flex size-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n         <Marquee className=\"[--gap:3rem]\">\n            {logos.map((logo, idx) => (\n               <Logo key={idx} {...logo} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeLogos\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/marquee.json b/apps/web/public/v0/styles/default/marquee.json
new file mode 100644
index 00000000..8cbb8167
--- /dev/null
+++ b/apps/web/public/v0/styles/default/marquee.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "marquee",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/marquee.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\ninterface MarqueeProps {\n   className?: string\n   reverse?: boolean\n   pauseOnHover?: boolean\n   children?: React.ReactNode\n   vertical?: boolean\n   repeat?: number\n   [key: string]: any\n}\n\nexport default function Marquee({\n   className,\n   reverse,\n   pauseOnHover = false,\n   children,\n   vertical = false,\n   repeat = 4,\n   ...props\n}: MarqueeProps) {\n   return (\n      <div\n         {...props}\n         className={cn(\n            \"group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]\",\n            {\n               \"flex-row\": !vertical,\n               \"flex-col\": vertical,\n            },\n            className,\n         )}\n      >\n         {Array(repeat)\n            .fill(0)\n            .map((_, i) => (\n               <div\n                  key={i}\n                  className={cn(\n                     \"flex shrink-0 justify-around [gap:var(--gap)]\",\n                     {\n                        \"animate-marquee flex-row\": !vertical,\n                        \"animate-marquee-vertical flex-col\": vertical,\n                        \"group-hover:[animation-play-state:paused]\":\n                           pauseOnHover,\n                        \"[animation-direction:reverse]\": reverse,\n                     },\n                  )}\n               >\n                  {children}\n               </div>\n            ))}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "keyframes": {
+            "marquee": {
+              "from": {
+                "transform": "translateX(0)"
+              },
+              "to": {
+                "transform": "translateX(calc(-100% - var(--gap)))"
+              }
+            },
+            "marquee-vertical": {
+              "from": {
+                "transform": "translateY(0)"
+              },
+              "to": {
+                "transform": "translateY(calc(-100% - var(--gap)))"
+              }
+            }
+          },
+          "animation": {
+            "marquee": "marquee var(--duration) infinite linear",
+            "marquee-vertical": "marquee-vertical var(--duration) linear infinite"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/menubar-demo.json b/apps/web/public/v0/styles/default/menubar-demo.json
new file mode 100644
index 00000000..03cf1ae7
--- /dev/null
+++ b/apps/web/public/v0/styles/default/menubar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "menubar-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "menubar"
+  ],
+  "files": [
+    {
+      "path": "examples/menubar-demo.tsx",
+      "content": "import {\n   Menubar,\n   MenubarCheckboxItem,\n   MenubarContent,\n   MenubarItem,\n   MenubarMenu,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarSeparator,\n   MenubarShortcut,\n   MenubarSub,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarTrigger,\n} from \"@/components/ui/menubar\"\n\nexport default function MenubarDemo() {\n   return (\n      <Menubar>\n         <MenubarMenu>\n            <MenubarTrigger>File</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  New Window <MenubarShortcut>⌘N</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled>New Incognito Window</MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Share</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Email link</MenubarItem>\n                     <MenubarItem>Messages</MenubarItem>\n                     <MenubarItem>Notes</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>\n                  Print... <MenubarShortcut>⌘P</MenubarShortcut>\n               </MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Edit</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Find</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Search the web</MenubarItem>\n                     <MenubarSeparator />\n                     <MenubarItem>Find...</MenubarItem>\n                     <MenubarItem>Find Next</MenubarItem>\n                     <MenubarItem>Find Previous</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>Cut</MenubarItem>\n               <MenubarItem>Copy</MenubarItem>\n               <MenubarItem>Paste</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>View</MenubarTrigger>\n            <MenubarContent>\n               <MenubarCheckboxItem>\n                  Always Show Bookmarks Bar\n               </MenubarCheckboxItem>\n               <MenubarCheckboxItem checked>\n                  Always Show Full URLs\n               </MenubarCheckboxItem>\n               <MenubarSeparator />\n               <MenubarItem inset>\n                  Reload <MenubarShortcut>⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled inset>\n                  Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Hide Sidebar</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Profiles</MenubarTrigger>\n            <MenubarContent>\n               <MenubarRadioGroup value=\"benoit\">\n                  <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n                  <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n                  <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n               </MenubarRadioGroup>\n               <MenubarSeparator />\n               <MenubarItem inset>Edit...</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n      </Menubar>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/menubar.json b/apps/web/public/v0/styles/default/menubar.json
new file mode 100644
index 00000000..b35ed3df
--- /dev/null
+++ b/apps/web/public/v0/styles/default/menubar.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "menubar",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-menubar"
+  ],
+  "files": [
+    {
+      "path": "ui/menubar.tsx",
+      "content": "\"use client\"\n\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Root\n      ref={ref}\n      className={cn(\n         \"bg-background flex h-10 items-center space-x-1 rounded-md border p-1\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Trigger\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <MenubarPrimitive.SubTrigger\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n   </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.SubContent\n      ref={ref}\n      className={cn(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n   (\n      {\n         className,\n         align = \"start\",\n         alignOffset = -4,\n         sideOffset = 8,\n         ...props\n      },\n      ref,\n   ) => (\n      <MenubarPrimitive.Portal>\n         <MenubarPrimitive.Content\n            ref={ref}\n            align={align}\n            alignOffset={alignOffset}\n            sideOffset={sideOffset}\n            className={cn(\n               \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md\",\n               className,\n            )}\n            {...props}\n         />\n      </MenubarPrimitive.Portal>\n   ),\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <MenubarPrimitive.Item\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <MenubarPrimitive.CheckboxItem\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <MenubarPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <MenubarPrimitive.RadioItem\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <MenubarPrimitive.ItemIndicator>\n            <Circle className=\"size-2 fill-current\" />\n         </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <MenubarPrimitive.Label\n      ref={ref}\n      className={cn(\n         \"px-2 py-1.5 text-sm font-semibold\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Separator\n      ref={ref}\n      className={cn(\"bg-muted -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nfunction MenubarShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={cn(\n            \"text-muted-foreground ml-auto text-xs tracking-widest\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n   Menubar,\n   MenubarMenu,\n   MenubarTrigger,\n   MenubarContent,\n   MenubarItem,\n   MenubarSeparator,\n   MenubarLabel,\n   MenubarCheckboxItem,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarPortal,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarGroup,\n   MenubarSub,\n   MenubarShortcut,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/meteors-demo.json b/apps/web/public/v0/styles/default/meteors-demo.json
new file mode 100644
index 00000000..7cbb0c6a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/meteors-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "meteors-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/meteors-demo.tsx",
+      "content": "import Meteors from \"@/components/ui/meteors\"\n\nexport default function MeteorDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <Meteors number={30} />\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Meteors\n         </p>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/meteors.json b/apps/web/public/v0/styles/default/meteors.json
new file mode 100644
index 00000000..631c434a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/meteors.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "meteors",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/meteors.tsx",
+      "content": "\"use client\"\n\nimport clsx from \"clsx\"\nimport { useEffect, useState } from \"react\"\n\ninterface MeteorsProps {\n   number?: number\n}\nexport function Meteors({ number = 20 }: MeteorsProps) {\n   const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(\n      [],\n   )\n\n   useEffect(() => {\n      const styles = [...new Array(number)].map(() => ({\n         top: -5,\n         left: `${Math.floor(Math.random() * window.innerWidth)}px`,\n         animationDelay: `${Math.random() * 1 + 0.2}s`,\n         animationDuration: `${Math.floor(Math.random() * 8 + 2)}s`,\n      }))\n      setMeteorStyles(styles)\n   }, [number])\n\n   return (\n      <>\n         {[...meteorStyles].map((style, idx) => (\n            // Meteor Head\n            <span\n               key={idx}\n               className={clsx(\n                  \"pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]\",\n               )}\n               style={style}\n            >\n               {/* Meteor Tail */}\n               <div className=\"pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent\" />\n            </span>\n         ))}\n      </>\n   )\n}\n\nexport default Meteors\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/mode-toggle-group.json b/apps/web/public/v0/styles/default/mode-toggle-group.json
new file mode 100644
index 00000000..49447cb3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/mode-toggle-group.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "mode-toggle-group",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n   const { setTheme } = useTheme()\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n               <Sun className=\"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n               <Moon className=\"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n               <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n               Light\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n               Dark\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n               System\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/mode-toggle.json b/apps/web/public/v0/styles/default/mode-toggle.json
new file mode 100644
index 00000000..51803604
--- /dev/null
+++ b/apps/web/public/v0/styles/default/mode-toggle.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "mode-toggle",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n   const { setTheme } = useTheme()\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n               <Sun className=\"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n               <Moon className=\"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n               <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n               Light\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n               Dark\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n               System\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/morphing-text-demo.json b/apps/web/public/v0/styles/default/morphing-text-demo.json
new file mode 100644
index 00000000..4a992f1c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/morphing-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "morphing-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/morphing-text-demo.tsx",
+      "content": "import { MorphingText } from \"@/components/ui/morphing-text\"\n\nconst texts = [\n   \"Hello\",\n   \"Morphing\",\n   \"Text\",\n   \"Animation\",\n   \"React\",\n   \"Component\",\n   \"Smooth\",\n   \"Transition\",\n   \"Engaging\",\n]\n\nexport default function MorphingTextDemo() {\n   return <MorphingText texts={texts} />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/morphing-text.json b/apps/web/public/v0/styles/default/morphing-text.json
new file mode 100644
index 00000000..ed427b6c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/morphing-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "morphing-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/morphing-text.tsx",
+      "content": "\"use client\"\n\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nconst morphTime = 1.5\nconst cooldownTime = 0.5\n\nconst useMorphingText = (texts: string[]) => {\n   const textIndexRef = useRef(0)\n   const morphRef = useRef(0)\n   const cooldownRef = useRef(0)\n   const timeRef = useRef(new Date())\n\n   const text1Ref = useRef<HTMLSpanElement>(null)\n   const text2Ref = useRef<HTMLSpanElement>(null)\n\n   const setStyles = useCallback(\n      (fraction: number) => {\n         const [current1, current2] = [text1Ref.current, text2Ref.current]\n         if (!current1 || !current2) return\n\n         current2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`\n         current2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`\n\n         const invertedFraction = 1 - fraction\n         current1.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`\n         current1.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`\n\n         current1.textContent = texts[textIndexRef.current % texts.length]\n         current2.textContent = texts[(textIndexRef.current + 1) % texts.length]\n      },\n      [texts],\n   )\n\n   const doMorph = useCallback(() => {\n      morphRef.current -= cooldownRef.current\n      cooldownRef.current = 0\n\n      let fraction = morphRef.current / morphTime\n\n      if (fraction > 1) {\n         cooldownRef.current = cooldownTime\n         fraction = 1\n      }\n\n      setStyles(fraction)\n\n      if (fraction === 1) {\n         textIndexRef.current++\n      }\n   }, [setStyles])\n\n   const doCooldown = useCallback(() => {\n      morphRef.current = 0\n      const [current1, current2] = [text1Ref.current, text2Ref.current]\n      if (current1 && current2) {\n         current2.style.filter = \"none\"\n         current2.style.opacity = \"100%\"\n         current1.style.filter = \"none\"\n         current1.style.opacity = \"0%\"\n      }\n   }, [])\n\n   useEffect(() => {\n      let animationFrameId: number\n\n      const animate = () => {\n         animationFrameId = requestAnimationFrame(animate)\n\n         const newTime = new Date()\n         const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000\n         timeRef.current = newTime\n\n         cooldownRef.current -= dt\n\n         if (cooldownRef.current <= 0) doMorph()\n         else doCooldown()\n      }\n\n      animate()\n      return () => {\n         cancelAnimationFrame(animationFrameId)\n      }\n   }, [doMorph, doCooldown])\n\n   return { text1Ref, text2Ref }\n}\n\ninterface MorphingTextProps {\n   className?: string\n   texts: string[]\n}\n\nconst Texts: React.FC<Pick<MorphingTextProps, \"texts\">> = ({ texts }) => {\n   const { text1Ref, text2Ref } = useMorphingText(texts)\n   return (\n      <>\n         <span\n            className=\"absolute inset-x-0 top-0 m-auto inline-block w-full\"\n            ref={text1Ref}\n         />\n         <span\n            className=\"absolute inset-x-0 top-0 m-auto inline-block w-full\"\n            ref={text2Ref}\n         />\n      </>\n   )\n}\n\nconst SvgFilters: React.FC = () => (\n   <svg\n      id=\"filters\"\n      className=\"fixed h-0 w-0\"\n      preserveAspectRatio=\"xMidYMid slice\"\n   >\n      <defs>\n         <filter id=\"threshold\">\n            <feColorMatrix\n               in=\"SourceGraphic\"\n               type=\"matrix\"\n               values=\"1 0 0 0 0\n                  0 1 0 0 0\n                  0 0 1 0 0\n                  0 0 0 255 -140\"\n            />\n         </filter>\n      </defs>\n   </svg>\n)\n\nexport const MorphingText: React.FC<MorphingTextProps> = ({\n   texts,\n   className,\n}) => (\n   <div\n      className={cn(\n         \"relative mx-auto h-16 w-full max-w-screen-md text-center font-sans text-[40pt] font-bold leading-none [filter:url(#threshold)_blur(0.6px)] md:h-24 lg:text-[6rem]\",\n         className,\n      )}\n   >\n      <Texts texts={texts} />\n      <SvgFilters />\n   </div>\n)\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/multi-select-basic.json b/apps/web/public/v0/styles/default/multi-select-basic.json
new file mode 100644
index 00000000..bad4778d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/multi-select-basic.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-basic",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-basic.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"@/components/ui/multi-select\"\n\nexport default function MultiSelectBasicDemo() {\n   return (\n      <MultiSelect>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/multi-select-controllable-search.json b/apps/web/public/v0/styles/default/multi-select-controllable-search.json
new file mode 100644
index 00000000..76753f69
--- /dev/null
+++ b/apps/web/public/v0/styles/default/multi-select-controllable-search.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-controllable-search",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-controllable-search.tsx",
+      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from \"@/components/ui/multi-select\"\n\nconst ALL_ITEMS = [\n   { value: \"react\", label: \"React\", group: \"React\" },\n   { value: \"next\", label: \"Next.js\", group: \"React\" },\n   { value: \"remix\", label: \"Remix\", group: \"React\" },\n   { value: \"vue\", label: \"Vue\", group: \"Vue\" },\n   { value: \"nuxt\", label: \"Nuxt.js\", group: \"Vue\" },\n   { value: \"angular\", label: \"Angular\", group: \"Others\" },\n   { value: \"svelte\", label: \"Svelte\", group: \"Others\" },\n]\n\nfunction group(\n   options: Array<(typeof ALL_ITEMS)[number]>,\n): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find((g) => g.heading === item.group)\n      if (group) group.children.push(item)\n      else acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword) return group(ALL_ITEMS)\n   await new Promise((resolve) => setTimeout(resolve, 500))\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter((item) =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n   return group(filtered)\n}\n\nexport default function MultiSelectControllableSearchDemo() {\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword?: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   return (\n      <MultiSelect onSearch={handleSearch}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch />\n            <MultiSelectList>\n               {loading ? null : renderMultiSelectOptions(options)}\n               <MultiSelectEmpty>\n                  {loading ? \"Loading...\" : \"No results found\"}\n               </MultiSelectEmpty>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/multi-select-filter.json b/apps/web/public/v0/styles/default/multi-select-filter.json
new file mode 100644
index 00000000..cf4906c3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/multi-select-filter.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-filter",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-filter.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"@/components/ui/multi-select\"\n\nexport default function MultiSelectFilterDemo() {\n   return (\n      <MultiSelect>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch placeholder=\"Input to search\" />\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n            <MultiSelectEmpty />\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/multi-select-form.json b/apps/web/public/v0/styles/default/multi-select-form.json
new file mode 100644
index 00000000..66126651
--- /dev/null
+++ b/apps/web/public/v0/styles/default/multi-select-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport Link from \"next/link\"\nimport { useRef, useState } from \"react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from \"@/components/ui/multi-select\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst ALL_ITEMS = [\n   { value: \"react\", label: \"React\", group: \"React\" },\n   { value: \"next\", label: \"Next.js\", group: \"React\" },\n   { value: \"remix\", label: \"Remix\", group: \"React\" },\n   { value: \"vue\", label: \"Vue\", group: \"Vue\" },\n   { value: \"nuxt\", label: \"Nuxt.js\", group: \"Vue\" },\n   { value: \"angular\", label: \"Angular\", group: \"Others\" },\n   { value: \"svelte\", label: \"Svelte\", group: \"Others\" },\n]\n\nfunction group(\n   options: Array<(typeof ALL_ITEMS)[number]>,\n): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find((g) => g.heading === item.group)\n      if (group) group.children.push(item)\n      else acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword) return group(ALL_ITEMS)\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter((item) =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n\n   if (!filtered.length) {\n      return [\n         {\n            label: keyword,\n            value: keyword,\n         },\n      ]\n   }\n\n   return group(filtered)\n}\n\nconst FormSchema = z.object({\n   frameworks: z.array(z.string(), {\n      required_error: \"Please select at least one framework.\",\n   }),\n})\n\nexport default function MultiSelectFormDemo() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   const onSubmit = (data: z.infer<typeof FormSchema>) => {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"frameworks\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Frameworks</FormLabel>\n                     <MultiSelect\n                        onValueChange={field.onChange}\n                        defaultValue={field.value}\n                        onSearch={(keyword) => handleSearch(keyword ?? \"\")}\n                     >\n                        <FormControl>\n                           <MultiSelectTrigger className=\"w-96\">\n                              <MultiSelectValue placeholder=\"Select frameworks\" />\n                           </MultiSelectTrigger>\n                        </FormControl>\n                        <MultiSelectContent>\n                           <MultiSelectSearch />\n                           <MultiSelectList>\n                              {loading\n                                 ? null\n                                 : renderMultiSelectOptions(options)}\n                              <MultiSelectEmpty>\n                                 {loading ? \"Loading...\" : \"No results found\"}\n                              </MultiSelectEmpty>\n                           </MultiSelectList>\n                        </MultiSelectContent>\n                     </MultiSelect>\n                     <FormDescription>\n                        You can manage frameworks in{\" \"}\n                        <Link href=\"/examples/forms\">framework settings</Link>.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/multi-select-input-custom.json b/apps/web/public/v0/styles/default/multi-select-input-custom.json
new file mode 100644
index 00000000..84792ca8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/multi-select-input-custom.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-input-custom",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-input-custom.tsx",
+      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from \"@/components/ui/multi-select\"\n\nconst ALL_ITEMS = [\n   { value: \"react\", label: \"React\", group: \"React\" },\n   { value: \"next\", label: \"Next.js\", group: \"React\" },\n   { value: \"remix\", label: \"Remix\", group: \"React\" },\n   { value: \"vue\", label: \"Vue\", group: \"Vue\" },\n   { value: \"nuxt\", label: \"Nuxt.js\", group: \"Vue\" },\n   { value: \"angular\", label: \"Angular\", group: \"Others\" },\n   { value: \"svelte\", label: \"Svelte\", group: \"Others\" },\n]\n\nfunction group(\n   options: Array<(typeof ALL_ITEMS)[number]>,\n): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find((g) => g.heading === item.group)\n      if (group) group.children.push(item)\n      else acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword) return group(ALL_ITEMS)\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter((item) =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n\n   if (!filtered.length) {\n      return [\n         {\n            label: keyword,\n            value: keyword,\n         },\n      ]\n   }\n\n   return group(filtered)\n}\n\nexport default function MultiSelectInputCustomDemo() {\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   return (\n      <MultiSelect onSearch={(keyword) => handleSearch(keyword ?? \"\")}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch placeholder=\"input any...\" />\n            <MultiSelectList>\n               {loading ? null : renderMultiSelectOptions(options)}\n               <MultiSelectEmpty>\n                  {loading ? \"Loading...\" : \"No results found\"}\n               </MultiSelectEmpty>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/multi-select-limit-count.json b/apps/web/public/v0/styles/default/multi-select-limit-count.json
new file mode 100644
index 00000000..d3726ce8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/multi-select-limit-count.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-limit-count",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-limit-count.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"@/components/ui/multi-select\"\n\nexport default function MultiSelectLimitCountDemo() {\n   return (\n      <MultiSelect defaultValue={[\"react\", \"next\", \"remix\"]} maxCount={3}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/multi-select-limit-display-length.json b/apps/web/public/v0/styles/default/multi-select-limit-display-length.json
new file mode 100644
index 00000000..0831e8e8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/multi-select-limit-display-length.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-limit-display-length",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-limit-display-length.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"@/components/ui/multi-select\"\n\nexport default function MultiSelectLimitDisplayLengthDemo() {\n   return (\n      <MultiSelect defaultValue={[\"long\", \"react\", \"angular\", \"vue\", \"remix\"]}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue\n               placeholder=\"Select stack\"\n               maxDisplay={3}\n               maxItemLength={5}\n            />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n                  <MultiSelectItem value=\"long\">\n                     VeryVeryLongItem\n                  </MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/multi-select.json b/apps/web/public/v0/styles/default/multi-select.json
new file mode 100644
index 00000000..9ae5f8c2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/multi-select.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/multi-select.tsx",
+      "content": "\"use client\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport type { Primitive } from \"@radix-ui/react-primitive\"\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\"\nimport { Check, ChevronsUpDown, X } from \"lucide-react\"\nimport React from \"react\"\nimport { createPortal } from \"react-dom\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n} from \"@/components/ui/command\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nexport interface MultiSelectOptionItem {\n   value: string\n   label?: React.ReactNode\n}\n\ninterface MultiSelectContextValue {\n   value: string[]\n\n   open: boolean\n\n   onSelect: (value: string, item: MultiSelectOptionItem) => void\n\n   onDeselect: (value: string, item: MultiSelectOptionItem) => void\n\n   onSearch?: (keyword?: string | undefined) => void\n\n   filter?: boolean | ((keyword: string, current: string) => boolean)\n\n   disabled?: boolean\n\n   maxCount?: number\n\n   itemCache: Map<string, MultiSelectOptionItem>\n}\n\nconst MultiSelectContext = React.createContext<\n   MultiSelectContextValue | undefined\n>(undefined)\n\nfunction useMultiSelect() {\n   const context = React.useContext(MultiSelectContext)\n\n   if (!context)\n      throw new Error(\"useMultiSelect must be used within MultiSelectProvider\")\n\n   return context\n}\n\ntype MultiSelectProps = React.ComponentPropsWithoutRef<\n   typeof PopoverPrimitive.Root\n> & {\n   value?: string[]\n   onValueChange?: (value: string[], items: MultiSelectOptionItem[]) => void\n   onSelect?: (value: string, item: MultiSelectOptionItem) => void\n   onDeselect?: (value: string, item: MultiSelectOptionItem) => void\n   defaultValue?: string[]\n   onSearch?: (keyword?: string | undefined) => void\n   filter?: boolean | ((keyword: string, current: string) => boolean)\n   disabled?: boolean\n   maxCount?: number\n}\n\nconst MultiSelect: React.FC<MultiSelectProps> = ({\n   value: valueProp,\n   onValueChange: onValueChangeProp,\n   onDeselect: onDeselectProp,\n   onSelect: onSelectProp,\n   defaultValue,\n   open: openProp,\n   onOpenChange,\n   defaultOpen,\n   onSearch,\n   filter,\n   disabled,\n   maxCount,\n   ...popoverProps\n}) => {\n   const itemCache = React.useRef(\n      new Map<string, MultiSelectOptionItem>(),\n   ).current\n\n   const handleValueChange = React.useCallback(\n      (state: string[]) => {\n         if (onValueChangeProp) {\n            const items = state.map((value) => itemCache.get(value)!)\n\n            onValueChangeProp(state, items)\n         }\n      },\n      [onValueChangeProp, itemCache],\n   )\n\n   const [value, setValue] = useControllableState({\n      prop: valueProp,\n      defaultProp: defaultValue,\n      onChange: handleValueChange,\n   })\n\n   const [open, setOpen] = useControllableState({\n      prop: openProp,\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n   })\n\n   const handleSelect = React.useCallback(\n      (value: string, item: MultiSelectOptionItem) => {\n         setValue((prev) => {\n            if (prev?.includes(value)) return prev\n\n            onSelectProp?.(value, item)\n\n            return prev ? [...prev, value] : [value]\n         })\n      },\n      [onSelectProp, setValue],\n   )\n\n   const handleDeselect = React.useCallback(\n      (value: string, item: MultiSelectOptionItem) => {\n         setValue((prev) => {\n            if (!prev || !prev.includes(value)) return prev\n\n            onDeselectProp?.(value, item)\n\n            return prev.filter((v) => v !== value)\n         })\n      },\n      [onDeselectProp, setValue],\n   )\n\n   const contextValue = React.useMemo(() => {\n      return {\n         value: value || [],\n         open: open || false,\n         onSearch,\n         filter,\n         disabled,\n         maxCount,\n         onSelect: handleSelect,\n         onDeselect: handleDeselect,\n         itemCache,\n      }\n   }, [\n      value,\n      open,\n      onSearch,\n      filter,\n      disabled,\n      maxCount,\n      handleSelect,\n      handleDeselect,\n      itemCache,\n   ])\n\n   return (\n      <MultiSelectContext.Provider value={contextValue}>\n         <PopoverPrimitive.Root\n            {...popoverProps}\n            open={open}\n            onOpenChange={setOpen}\n         />\n      </MultiSelectContext.Provider>\n   )\n}\n\nMultiSelect.displayName = \"MultiSelect\"\n\ntype MultiSelectTriggerElement = React.ElementRef<typeof Primitive.div>\n\ninterface MultiSelectTriggerProps\n   extends React.ComponentPropsWithoutRef<typeof Primitive.div> {}\n\nfunction PreventClick(e: React.MouseEvent | React.TouchEvent) {\n   e.preventDefault()\n   e.stopPropagation()\n}\n\nconst MultiSelectTrigger = React.forwardRef<\n   MultiSelectTriggerElement,\n   MultiSelectTriggerProps\n>(({ className, children, ...props }, forwardedRef) => {\n   const { disabled } = useMultiSelect()\n\n   return (\n      <PopoverPrimitive.Trigger ref={forwardedRef as any} asChild>\n         <div\n            aria-disabled={disabled}\n            data-disabled={disabled}\n            {...props}\n            className={cn(\n               \"border-input ring-offset-background focus:ring-ring flex size-full min-h-10 items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 [&>span]:line-clamp-1\",\n               disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-text\",\n               className,\n            )}\n            onClick={disabled ? PreventClick : props.onClick}\n            onTouchStart={disabled ? PreventClick : props.onTouchStart}\n         >\n            {children}\n            <ChevronsUpDown\n               aria-hidden\n               className=\"size-4 shrink-0 opacity-50\"\n            />\n         </div>\n      </PopoverPrimitive.Trigger>\n   )\n})\n\nMultiSelectTrigger.displayName = \"MultiSelectTrigger\"\n\ninterface MultiSelectValueProps\n   extends React.ComponentPropsWithoutRef<typeof Primitive.div> {\n   placeholder?: string\n   maxDisplay?: number\n   maxItemLength?: number\n}\n\nconst MultiSelectValue = React.forwardRef<\n   React.ElementRef<typeof Primitive.div>,\n   MultiSelectValueProps\n>(\n   (\n      { className, placeholder, maxDisplay, maxItemLength, ...props },\n      forwardRef,\n   ) => {\n      const { value, itemCache, onDeselect } = useMultiSelect()\n      const [firstRendered, setFirstRendered] = React.useState(false)\n\n      const renderRemain =\n         maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0\n      const renderItems = renderRemain ? value.slice(0, maxDisplay) : value\n\n      React.useLayoutEffect(() => {\n         setFirstRendered(true)\n      }, [])\n\n      if (!value.length || !firstRendered) {\n         return (\n            <span className=\"text-muted-foreground pointer-events-none\">\n               {placeholder}\n            </span>\n         )\n      }\n\n      return (\n         <TooltipProvider delayDuration={300}>\n            <div\n               className={cn(\n                  \"flex flex-1 flex-wrap items-center gap-1.5 overflow-x-hidden\",\n                  className,\n               )}\n               {...props}\n               ref={forwardRef}\n            >\n               {renderItems.map((value) => {\n                  const item = itemCache.get(value)\n\n                  const content = item?.label || value\n\n                  const child =\n                     maxItemLength &&\n                     typeof content === \"string\" &&\n                     content.length > maxItemLength\n                        ? `${content.slice(0, maxItemLength)}...`\n                        : content\n\n                  const el = (\n                     <Badge\n                        variant=\"outline\"\n                        key={value}\n                        className=\"group/multi-select-badge cursor-pointer rounded-full pr-1.5\"\n                        onClick={(e) => {\n                           e.preventDefault()\n                           e.stopPropagation()\n                           onDeselect(value, item!)\n                        }}\n                     >\n                        <span>{child}</span>\n                        <X className=\"text-muted-foreground group-hover/multi-select-badge:text-foreground ml-1 size-3\" />\n                     </Badge>\n                  )\n\n                  if (child !== content) {\n                     return (\n                        <Tooltip key={value}>\n                           <TooltipTrigger className=\"inline-flex\">\n                              {el}\n                           </TooltipTrigger>\n                           <TooltipContent\n                              side=\"bottom\"\n                              align=\"start\"\n                              className=\"z-[51]\"\n                           >\n                              {content}\n                           </TooltipContent>\n                        </Tooltip>\n                     )\n                  }\n\n                  return el\n               })}\n               {renderRemain ? (\n                  <span className=\"text-muted-foreground py-.5 text-xs leading-4\">\n                     +{renderRemain}\n                  </span>\n               ) : null}\n            </div>\n         </TooltipProvider>\n      )\n   },\n)\n\nMultiSelectValue.displayName = \"MultiSelectValue\"\n\nconst MultiSelectSearch = React.forwardRef<\n   React.ElementRef<typeof CommandInput>,\n   React.ComponentPropsWithoutRef<typeof CommandInput>\n>((props, ref) => {\n   const { onSearch } = useMultiSelect()\n\n   return <CommandInput ref={ref} {...props} onValueChange={onSearch} />\n})\n\nMultiSelectSearch.displayName = \"MultiSelectSearch\"\n\nconst MultiSelectList = React.forwardRef<\n   React.ElementRef<typeof CommandList>,\n   React.ComponentPropsWithoutRef<typeof CommandList>\n>(({ className, ...props }, ref) => {\n   return (\n      <CommandList\n         ref={ref}\n         className={cn(\"max-h-[unset] px-0 py-1\", className)}\n         {...props}\n      />\n   )\n})\n\nMultiSelectList.displayName = \"MultiSelectList\"\n\ninterface MultiSelectContentProps\n   extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {}\n\nconst MultiSelectContent = React.forwardRef<\n   React.ElementRef<typeof PopoverPrimitive.Content>,\n   MultiSelectContentProps\n>(({ className, children, ...props }, ref) => {\n   const context = useMultiSelect()\n\n   const fragmentRef = React.useRef<DocumentFragment>()\n\n   if (!fragmentRef.current && typeof window !== \"undefined\")\n      fragmentRef.current = document.createDocumentFragment()\n\n   if (!context.open) {\n      return fragmentRef.current\n         ? createPortal(<Command>{children}</Command>, fragmentRef.current)\n         : null\n   }\n\n   return (\n      <PopoverPrimitive.Portal forceMount>\n         <PopoverPrimitive.Content\n            ref={ref}\n            align=\"start\"\n            sideOffset={4}\n            collisionPadding={10}\n            className={cn(\n               \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-full rounded-md border p-0 shadow-md outline-none\",\n            )}\n            style={\n               {\n                  \"--radix-select-content-transform-origin\":\n                     \"var(--radix-popper-transform-origin)\",\n                  \"--radix-select-content-available-width\":\n                     \"var(--radix-popper-available-width)\",\n                  \"--radix-select-content-available-height\":\n                     \"var(--radix-popper-available-height)\",\n                  \"--radix-select-trigger-width\":\n                     \"var(--radix-popper-anchor-width)\",\n                  \"--radix-select-trigger-height\":\n                     \"var(--radix-popper-anchor-height)\",\n               } as any\n            }\n            {...props}\n         >\n            <Command\n               className={cn(\n                  \"max-h-96 w-full min-w-[var(--radix-select-trigger-width)] px-1\",\n                  className,\n               )}\n               shouldFilter={!context.onSearch}\n            >\n               {children}\n            </Command>\n         </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n   )\n})\n\nMultiSelectContent.displayName = \"MultiSelectContent\"\n\ntype MultiSelectItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> &\n   Partial<MultiSelectOptionItem> & {\n      onSelect?: (value: string, item: MultiSelectOptionItem) => void\n      onDeselect?: (value: string, item: MultiSelectOptionItem) => void\n   }\n\nconst MultiSelectItem = React.forwardRef<\n   React.ElementRef<typeof CommandItem>,\n   MultiSelectItemProps\n>(\n   (\n      {\n         value,\n         onSelect: onSelectProp,\n         onDeselect: onDeselectProp,\n         children,\n         label,\n         disabled: disabledProp,\n         className,\n         ...props\n      },\n      forwardedRef,\n   ) => {\n      const {\n         value: contextValue,\n         maxCount,\n         onSelect,\n         onDeselect,\n         itemCache,\n      } = useMultiSelect()\n\n      const item = React.useMemo(() => {\n         return value\n            ? {\n                 value,\n                 label:\n                    label ||\n                    (typeof children === \"string\" ? children : undefined),\n              }\n            : undefined\n      }, [value, label, children])\n\n      const selected = Boolean(value && contextValue.includes(value))\n\n      React.useEffect(() => {\n         if (value) itemCache.set(value, item!)\n      }, [selected, value, item, itemCache])\n\n      const disabled = Boolean(\n         disabledProp ||\n            (!selected && maxCount && contextValue.length >= maxCount),\n      )\n\n      const handleClick = () => {\n         if (selected) {\n            onDeselectProp?.(value!, item!)\n            onDeselect(value!, item!)\n         } else {\n            itemCache.set(value!, item!)\n            onSelectProp?.(value!, item!)\n            onSelect(value!, item!)\n         }\n      }\n\n      return (\n         <CommandItem\n            {...props}\n            value={value}\n            className={cn(\n               disabled && \"text-muted-foreground cursor-not-allowed\",\n               className,\n            )}\n            disabled={disabled}\n            onSelect={!disabled && value ? handleClick : undefined}\n            ref={forwardedRef}\n         >\n            <span className=\"mr-2 truncate\">{children || label || value}</span>\n            {selected ? <Check className=\"ml-auto size-4 shrink-0\" /> : null}\n         </CommandItem>\n      )\n   },\n)\n\nMultiSelectItem.displayName = \"MultiSelectItem\"\n\nconst MultiSelectGroup = React.forwardRef<\n   React.ElementRef<typeof CommandGroup>,\n   React.ComponentPropsWithoutRef<typeof CommandGroup>\n>((props, forwardRef) => {\n   return <CommandGroup {...props} ref={forwardRef} />\n})\n\nMultiSelectGroup.displayName = \"MultiSelectGroup\"\n\nconst MultiSelectSeparator = React.forwardRef<\n   React.ElementRef<typeof CommandSeparator>,\n   React.ComponentPropsWithoutRef<typeof CommandSeparator>\n>((props, forwardRef) => {\n   return <CommandSeparator {...props} ref={forwardRef} />\n})\n\nMultiSelectSeparator.displayName = \"MultiSelectSeparator\"\n\nconst MultiSelectEmpty = React.forwardRef<\n   React.ElementRef<typeof CommandEmpty>,\n   React.ComponentPropsWithoutRef<typeof CommandEmpty>\n>(({ children = \"No Content\", ...props }, forwardRef) => {\n   return (\n      <CommandEmpty {...props} ref={forwardRef}>\n         {children}\n      </CommandEmpty>\n   )\n})\n\nMultiSelectEmpty.displayName = \"MultiSelectEmpty\"\n\nexport interface MultiSelectOptionSeparator {\n   type: \"separator\"\n}\n\nexport interface MultiSelectOptionGroup {\n   heading?: React.ReactNode\n   value?: string\n   children: MultiSelectOption[]\n}\n\nexport type MultiSelectOption =\n   | Pick<\n        MultiSelectItemProps,\n        \"value\" | \"label\" | \"disabled\" | \"onSelect\" | \"onDeselect\"\n     >\n   | MultiSelectOptionSeparator\n   | MultiSelectOptionGroup\n\nfunction renderMultiSelectOptions(list: MultiSelectOption[]) {\n   return list.map((option, index) => {\n      if (\"type\" in option) {\n         if (option.type === \"separator\")\n            return <MultiSelectSeparator key={index} />\n\n         return null\n      }\n\n      if (\"children\" in option) {\n         return (\n            <MultiSelectGroup\n               key={option.value || index}\n               value={option.value}\n               heading={option.heading}\n            >\n               {renderMultiSelectOptions(option.children)}\n            </MultiSelectGroup>\n         )\n      }\n\n      return (\n         <MultiSelectItem key={option.value} {...option}>\n            {option.label}\n         </MultiSelectItem>\n      )\n   })\n}\n\nexport {\n   MultiSelect,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   MultiSelectSearch,\n   MultiSelectContent,\n   MultiSelectList,\n   MultiSelectItem,\n   MultiSelectGroup,\n   MultiSelectSeparator,\n   MultiSelectEmpty,\n   renderMultiSelectOptions,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/navigation-menu-demo.json b/apps/web/public/v0/styles/default/navigation-menu-demo.json
new file mode 100644
index 00000000..140a484d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/navigation-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "navigation-menu-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport * as React from \"react\"\n\nimport { Icons } from \"@/components/icons\"\nimport { cn } from \"@/lib/utils\"\nimport {\n   NavigationMenu,\n   NavigationMenuContent,\n   NavigationMenuItem,\n   NavigationMenuLink,\n   NavigationMenuList,\n   NavigationMenuTrigger,\n   navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n   {\n      title: \"Alert Dialog\",\n      href: \"/docs/primitives/alert-dialog\",\n      description:\n         \"A modal dialog that interrupts the user with important content and expects a response.\",\n   },\n   {\n      title: \"Hover Card\",\n      href: \"/docs/primitives/hover-card\",\n      description:\n         \"For sighted users to preview content available behind a link.\",\n   },\n   {\n      title: \"Progress\",\n      href: \"/docs/primitives/progress\",\n      description:\n         \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n   },\n   {\n      title: \"Scroll-area\",\n      href: \"/docs/primitives/scroll-area\",\n      description: \"Visually or semantically separates content.\",\n   },\n   {\n      title: \"Tabs\",\n      href: \"/docs/primitives/tabs\",\n      description:\n         \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n   },\n   {\n      title: \"Tooltip\",\n      href: \"/docs/primitives/tooltip\",\n      description:\n         \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n   },\n]\n\nexport default function NavigationMenuDemo() {\n   return (\n      <NavigationMenu>\n         <NavigationMenuList>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                     <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                           <a\n                              className=\"from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md\"\n                              href=\"/\"\n                           >\n                              <Icons.logo className=\"size-6\" />\n                              <div className=\"mb-2 mt-4 text-lg font-medium\">\n                                 nyxb/ui\n                              </div>\n                              <p className=\"text-muted-foreground text-sm leading-tight\">\n                                 Beautifully designed components that you can\n                                 copy and paste into your apps. Accessible.\n                                 Customizable. Open Source.\n                              </p>\n                           </a>\n                        </NavigationMenuLink>\n                     </li>\n                     <ListItem href=\"/docs\" title=\"Introduction\">\n                        Re-usable components built using Radix UI and Tailwind\n                        CSS.\n                     </ListItem>\n                     <ListItem href=\"/docs/installation\" title=\"Installation\">\n                        How to install dependencies and structure your app.\n                     </ListItem>\n                     <ListItem\n                        href=\"/docs/primitives/typography\"\n                        title=\"Typography\"\n                     >\n                        Styles for headings, paragraphs, lists...etc\n                     </ListItem>\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                     {components.map((component) => (\n                        <ListItem\n                           key={component.title}\n                           title={component.title}\n                           href={component.href}\n                        >\n                           {component.description}\n                        </ListItem>\n                     ))}\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <Link href=\"/docs\" legacyBehavior passHref>\n                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n                     Documentation\n                  </NavigationMenuLink>\n               </Link>\n            </NavigationMenuItem>\n         </NavigationMenuList>\n      </NavigationMenu>\n   )\n}\n\nconst ListItem = React.forwardRef<\n   React.ElementRef<\"a\">,\n   React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n   return (\n      <li>\n         <NavigationMenuLink asChild>\n            <a\n               ref={ref}\n               className={cn(\n                  \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors\",\n                  className,\n               )}\n               {...props}\n            >\n               <div className=\"text-sm font-medium leading-none\">{title}</div>\n               <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n                  {children}\n               </p>\n            </a>\n         </NavigationMenuLink>\n      </li>\n   )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/navigation-menu.json b/apps/web/public/v0/styles/default/navigation-menu.json
new file mode 100644
index 00000000..f689896c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/navigation-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "navigation-menu",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "ui/navigation-menu.tsx",
+      "content": "import * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <NavigationMenuPrimitive.Root\n      ref={ref}\n      className={cn(\n         \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <NavigationMenuViewport />\n   </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.List\n      ref={ref}\n      className={cn(\n         \"group flex flex-1 list-none items-center justify-center space-x-1\",\n         className,\n      )}\n      {...props}\n   />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n   \"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50\",\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <NavigationMenuPrimitive.Trigger\n      ref={ref}\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n   >\n      {children}{\" \"}\n      <ChevronDown\n         className=\"relative top-px ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180\"\n         aria-hidden=\"true\"\n      />\n   </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.Content\n      ref={ref}\n      className={cn(\n         \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto \",\n         className,\n      )}\n      {...props}\n   />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n   <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n         className={cn(\n            \"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]\",\n            className,\n         )}\n         ref={ref}\n         {...props}\n      />\n   </div>\n))\nNavigationMenuViewport.displayName =\n   NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.Indicator\n      ref={ref}\n      className={cn(\n         \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n         className,\n      )}\n      {...props}\n   >\n      <div className=\"bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md\" />\n   </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n   NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n   navigationMenuTriggerStyle,\n   NavigationMenu,\n   NavigationMenuList,\n   NavigationMenuItem,\n   NavigationMenuContent,\n   NavigationMenuTrigger,\n   NavigationMenuLink,\n   NavigationMenuIndicator,\n   NavigationMenuViewport,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/neon-gradient-card-demo.json b/apps/web/public/v0/styles/default/neon-gradient-card-demo.json
new file mode 100644
index 00000000..ca4dfd7e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/neon-gradient-card-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "neon-gradient-card-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/neon-gradient-card-demo.tsx",
+      "content": "import { NeonGradientCard } from \"@/components/ui/neon-gradient-card\"\n\nexport default function NeonGradientCardDemo() {\n   return (\n      <NeonGradientCard className=\"max-w-sm items-center justify-center text-center\">\n         <span className=\"pointer-events-none z-10 h-full whitespace-pre-wrap bg-gradient-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-6xl font-bold leading-none tracking-tighter text-transparent dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]\">\n            Neon Gradient Card\n         </span>\n      </NeonGradientCard>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/neon-gradient-card.json b/apps/web/public/v0/styles/default/neon-gradient-card.json
new file mode 100644
index 00000000..54f4ca78
--- /dev/null
+++ b/apps/web/public/v0/styles/default/neon-gradient-card.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "neon-gradient-card",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/neon-gradient-card.tsx",
+      "content": "\"use client\"\n\nimport type { CSSProperties, ReactElement, ReactNode } from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface NeonColorsProps {\n   firstColor: string\n   secondColor: string\n}\n\ninterface NeonGradientCardProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the card\n    */\n   as?: ReactElement\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the card\n    */\n   className?: string\n\n   /**\n    * @default \"\"\n    * @type ReactNode\n    * @description\n    * The children of the card\n    */\n   children?: ReactNode\n\n   /**\n    * @default 5\n    * @type number\n    * @description\n    * The size of the border in pixels\n    */\n   borderSize?: number\n\n   /**\n    * @default 20\n    * @type number\n    * @description\n    * The size of the radius in pixels\n    */\n   borderRadius?: number\n\n   /**\n    * @default \"{ firstColor: '#ff00aa', secondColor: '#00FFF1' }\"\n    * @type string\n    * @description\n    * The colors of the neon gradient\n    */\n   neonColors?: NeonColorsProps\n\n   [key: string]: any\n}\n\nconst NeonGradientCard: React.FC<NeonGradientCardProps> = ({\n   className,\n   children,\n   borderSize = 2,\n   borderRadius = 20,\n   neonColors = {\n      firstColor: \"#ff00aa\",\n      secondColor: \"#00FFF1\",\n   },\n   ...props\n}) => {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n   useEffect(() => {\n      const updateDimensions = () => {\n         if (containerRef.current) {\n            const { offsetWidth, offsetHeight } = containerRef.current\n            setDimensions({ width: offsetWidth, height: offsetHeight })\n         }\n      }\n\n      updateDimensions()\n      window.addEventListener(\"resize\", updateDimensions)\n\n      return () => {\n         window.removeEventListener(\"resize\", updateDimensions)\n      }\n   }, [])\n\n   useEffect(() => {\n      if (containerRef.current) {\n         const { offsetWidth, offsetHeight } = containerRef.current\n         setDimensions({ width: offsetWidth, height: offsetHeight })\n      }\n   }, [children])\n\n   return (\n      <div\n         ref={containerRef}\n         style={\n            {\n               \"--border-size\": `${borderSize}px`,\n               \"--border-radius\": `${borderRadius}px`,\n               \"--neon-first-color\": neonColors.firstColor,\n               \"--neon-second-color\": neonColors.secondColor,\n               \"--card-width\": `${dimensions.width}px`,\n               \"--card-height\": `${dimensions.height}px`,\n               \"--card-content-radius\": `${borderRadius - borderSize}px`,\n               \"--pseudo-element-background-image\": `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,\n               \"--pseudo-element-width\": `${dimensions.width + borderSize * 2}px`,\n               \"--pseudo-element-height\": `${dimensions.height + borderSize * 2}px`,\n               \"--after-blur\": `${dimensions.width / 3}px`,\n            } as CSSProperties\n         }\n         className={cn(\n            \"relative z-10 size-full rounded-[var(--border-radius)]\",\n            className,\n         )}\n         {...props}\n      >\n         <div\n            className={cn(\n               \"relative size-full min-h-[inherit] rounded-[var(--card-content-radius)] bg-gray-100 p-6\",\n               \"before:absolute before:-left-[var(--border-size)] before:-top-[var(--border-size)] before:-z-10 before:block\",\n               \"before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-['']\",\n               \"before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-[length:100%_200%]\",\n               \"before:animate-background-position-spin\",\n               \"after:absolute after:-left-[var(--border-size)] after:-top-[var(--border-size)] after:-z-10 after:block\",\n               \"after:h-[var(--pseudo-element-height)] after:w-[var(--pseudo-element-width)] after:rounded-[var(--border-radius)] after:blur-[var(--after-blur)] after:content-['']\",\n               \"after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80\",\n               \"after:animate-background-position-spin\",\n               \"dark:bg-neutral-900\",\n            )}\n         >\n            {children}\n         </div>\n      </div>\n   )\n}\n\nexport { NeonGradientCard }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "background-position-spin": "background-position-spin 3000ms infinite alternate"
+          },
+          "keyframes": {
+            "background-position-spin": {
+              "0%": {
+                "backgroundPosition": "top center"
+              },
+              "100%": {
+                "backgroundPosition": "bottom center"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/number-ticker-demo.json b/apps/web/public/v0/styles/default/number-ticker-demo.json
new file mode 100644
index 00000000..9f74879c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/number-ticker-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "number-ticker-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/number-ticker-demo.tsx",
+      "content": "import NumberTicker from \"@/components/ui/number-ticker\"\n\nfunction NumberTickerDemo() {\n   return (\n      <p className=\"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white\">\n         <NumberTicker value={100} />\n      </p>\n   )\n}\n\nexport default NumberTickerDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/number-ticker.json b/apps/web/public/v0/styles/default/number-ticker.json
new file mode 100644
index 00000000..349a0d9a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/number-ticker.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "number-ticker",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/number-ticker.tsx",
+      "content": "\"use client\"\n\nimport { useInView, useMotionValue, useSpring } from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport default function NumberTicker({\n   value,\n   direction = \"up\",\n   delay = 0,\n   className,\n}: {\n   value: number\n   direction?: \"up\" | \"down\"\n   className?: string\n   delay?: number // delay in s\n}) {\n   const ref = useRef<HTMLSpanElement>(null)\n   const motionValue = useMotionValue(direction === \"down\" ? value : 0)\n   const springValue = useSpring(motionValue, {\n      damping: 60,\n      stiffness: 100,\n   })\n   const isInView = useInView(ref, { once: true, margin: \"0px\" })\n\n   useEffect(() => {\n      isInView &&\n         setTimeout(() => {\n            motionValue.set(direction === \"down\" ? 0 : value)\n         }, delay * 1000)\n   }, [motionValue, isInView, delay, value, direction])\n\n   useEffect(\n      () =>\n         springValue.on(\"change\", (latest) => {\n            if (ref.current) {\n               ref.current.textContent = Intl.NumberFormat(\"en-US\").format(\n                  Math.round(latest),\n               )\n            }\n         }),\n      [springValue],\n   )\n\n   return (\n      <span\n         className={cn(\n            \"inline-block tabular-nums tracking-wider text-black dark:text-white\",\n            className,\n         )}\n         ref={ref}\n      />\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/nyx-toc-demo.json b/apps/web/public/v0/styles/default/nyx-toc-demo.json
new file mode 100644
index 00000000..050d25b6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/nyx-toc-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "nyx-toc-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/nyx-toc-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { NyxTOCItems } from \"@/components/ui/nyx-toc\"\n\nconst demoItems = [\n   {\n      title: \"Introduction\",\n      url: \"#introduction\",\n      depth: 1,\n   },\n   {\n      title: \"Getting Started\",\n      url: \"#getting-started\",\n      depth: 2,\n   },\n   {\n      title: \"Installation\",\n      url: \"#installation\",\n      depth: 3,\n   },\n   {\n      title: \"Basic Usage\",\n      url: \"#basic-usage\",\n      depth: 3,\n   },\n   {\n      title: \"Advanced Features\",\n      url: \"#advanced-features\",\n      depth: 2,\n   },\n   {\n      title: \"API Reference\",\n      url: \"#api-reference\",\n      depth: 2,\n   },\n]\n\nexport default function NyxTOCDemo() {\n   return (\n      <div className=\"flex gap-10\">\n         <div className=\"flex-1\">\n            <NyxTOCItems items={demoItems} label=\"On This Page\" />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/nyx-toc-popover-demo.json b/apps/web/public/v0/styles/default/nyx-toc-popover-demo.json
new file mode 100644
index 00000000..f816ff1e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/nyx-toc-popover-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "nyx-toc-popover-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/nyx-toc-popover-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n   NyxTOCItems,\n   TocPopover,\n   TocPopoverContent,\n   TocPopoverTrigger,\n} from \"@/components/ui/nyx-toc\"\n\nexport default function NyxTOCPopoverDemo() {\n   // Example TOC items\n   const items = [\n      { title: \"Introduction\", url: \"#introduction\", depth: 1 },\n      { title: \"Getting Started\", url: \"#getting-started\", depth: 2 },\n      { title: \"Installation\", url: \"#installation\", depth: 2 },\n      { title: \"Basic Usage\", url: \"#basic-usage\", depth: 3 },\n      { title: \"Advanced Features\", url: \"#advanced-features\", depth: 2 },\n      { title: \"Configuration\", url: \"#configuration\", depth: 3 },\n      { title: \"Customization\", url: \"#customization\", depth: 2 },\n   ]\n\n   return (\n      <div className=\"flex h-[300px] w-full items-start justify-center p-6\">\n         <TocPopover>\n            <TocPopoverTrigger\n               items={items}\n               className=\"hover:bg-accent rounded-md border\"\n            />\n            <TocPopoverContent>\n               <NyxTOCItems items={items} isMenu label=\"On This Page\" />\n            </TocPopoverContent>\n         </TocPopover>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/nyx-toc.json b/apps/web/public/v0/styles/default/nyx-toc.json
new file mode 100644
index 00000000..99b2b001
--- /dev/null
+++ b/apps/web/public/v0/styles/default/nyx-toc.json
@@ -0,0 +1,59 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "nyx-toc",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-icons",
+    "@radix-ui/react-popover",
+    "@radix-ui/react-scroll-area",
+    "scroll-into-view-if-needed"
+  ],
+  "registryDependencies": [
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "ui/nyx-toc.tsx",
+      "content": "\"use client\"\n\nimport type {\n   PopoverContentProps,\n   PopoverTriggerProps,\n} from \"@radix-ui/react-popover\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport { AlignLeft, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\nimport type {\n   AnchorHTMLAttributes,\n   HTMLAttributes,\n   ReactNode,\n   RefObject,\n} from \"react\"\nimport {\n   createContext,\n   forwardRef,\n   useContext,\n   useEffect,\n   useMemo,\n   useRef,\n   useState,\n} from \"react\"\nimport scrollIntoView from \"scroll-into-view-if-needed\"\nimport { useAnchorObserver } from \"@/hooks/use-anchor-observer\"\nimport { useOnChange } from \"@/hooks/use-on-change\"\nimport { cn } from \"@/lib/utils\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\n// #region Types\nexport interface TOCItemType {\n   title: ReactNode\n   url: string\n   depth: number\n}\n\nexport type TableOfContents = TOCItemType[]\nexport type TOCThumb = [top: number, height: number]\n\nexport interface TOCProps {\n   header?: ReactNode\n   footer?: ReactNode\n   children: ReactNode\n}\n\nexport interface PageStyles {\n   tocNav?: string\n   toc?: string\n   page?: string\n   article?: string\n}\n\nexport interface TOCItemProps\n   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> {\n   href: string\n\n   onActiveChange?: (v: boolean) => void\n}\n\n// #region Components\nconst ScrollArea = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={cn(\"overflow-hidden\", className)}\n      {...props}\n   >\n      {children}\n      <ScrollAreaPrimitive.Corner />\n      <ScrollBar orientation=\"vertical\" />\n   </ScrollAreaPrimitive.Root>\n))\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollViewport = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Viewport>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={cn(\"size-full rounded-[inherit]\", className)}\n      {...props}\n   >\n      {children}\n   </ScrollAreaPrimitive.Viewport>\n))\n\nScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName\n\nconst ScrollBar = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Scrollbar>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n   <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      orientation={orientation}\n      className={cn(\n         \"data-[state=hidden]:animate-fd-fade-out flex select-none\",\n         orientation === \"vertical\" && \"h-full w-1.5\",\n         orientation === \"horizontal\" && \"h-1.5 flex-col\",\n         className,\n      )}\n      {...props}\n   >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-fd-border relative flex-1 rounded-full\" />\n   </ScrollAreaPrimitive.Scrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName\n\nexport { ScrollArea, ScrollBar, ScrollViewport }\n\n// #region Contexts\nconst ActiveAnchorContext = createContext<string[]>([])\nconst ScrollContext = createContext<RefObject<HTMLElement | null>>({\n   current: null,\n})\nconst StylesContext = createContext<PageStyles>({\n   tocNav: \"xl:hidden\",\n   toc: \"max-xl:hidden\",\n})\n\n// #region Hooks\nfunction useActiveAnchor(): string | undefined {\n   return useContext(ActiveAnchorContext).at(-1)\n}\n\nfunction useActiveAnchors(): string[] {\n   return useContext(ActiveAnchorContext)\n}\n\nfunction usePageStyles() {\n   return useContext(StylesContext)\n}\n\n// #region Utility Functions\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b))\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   return a !== b\n}\n\nfunction mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\n   return (value) => {\n      refs.forEach((ref) => {\n         if (typeof ref === \"function\") ref(value)\n         else if (ref !== null && typeof ref === \"object\")\n            (ref as React.MutableRefObject<T | null>).current = value\n      })\n   }\n}\n\nfunction getItemOffset(depth: number): number {\n   if (depth <= 2) return 14\n   if (depth === 3) return 26\n   return 36\n}\n\nfunction getLineOffset(depth: number): number {\n   return depth >= 3 ? 10 : 0\n}\n\n// #region Components\nexport function ScrollProvider({\n   containerRef,\n   children,\n}: {\n   containerRef: RefObject<HTMLElement | null>\n   children?: ReactNode\n}): React.ReactElement {\n   return (\n      <ScrollContext.Provider value={containerRef}>\n         {children}\n      </ScrollContext.Provider>\n   )\n}\n\nexport function AnchorProvider({\n   toc,\n   single = true,\n   children,\n}: {\n   toc: TableOfContents\n   single?: boolean\n   children?: ReactNode\n}): React.ReactElement {\n   const headings = useMemo(() => {\n      return toc.map((item) => item.url.split(\"#\")[1])\n   }, [toc])\n\n   return (\n      <ActiveAnchorContext.Provider value={useAnchorObserver(headings, single)}>\n         {children}\n      </ActiveAnchorContext.Provider>\n   )\n}\n\nexport const TOCItem = forwardRef<HTMLAnchorElement, TOCItemProps>(\n   ({ onActiveChange, ...props }, ref) => {\n      const containerRef = useContext(ScrollContext)\n      const anchors = useActiveAnchors()\n      const anchorRef = useRef<HTMLAnchorElement>(null)\n      const mergedRef = mergeRefs(anchorRef, ref)\n\n      const isActive = anchors.includes(props.href.slice(1))\n\n      useOnChange(isActive, (v) => {\n         const element = anchorRef.current\n         if (!element) return\n\n         if (v && containerRef.current) {\n            scrollIntoView(element, {\n               behavior: \"smooth\",\n               block: \"center\",\n               inline: \"center\",\n               scrollMode: \"always\",\n               boundary: containerRef.current,\n            })\n         }\n\n         onActiveChange?.(v)\n      })\n\n      return (\n         <a ref={mergedRef} data-active={isActive} {...props}>\n            {props.children}\n         </a>\n      )\n   },\n)\n\nTOCItem.displayName = \"TOCItem\"\n\nexport function TocThumb({\n   containerRef,\n   ...props\n}: HTMLAttributes<HTMLDivElement> & {\n   containerRef: RefObject<HTMLElement | null>\n}): ReactNode {\n   const active = useActiveAnchors()\n   const thumbRef = useRef<HTMLDivElement>(null)\n   const activeRef = useRef(active)\n   activeRef.current = active\n\n   function calc(container: HTMLElement, active: string[]): TOCThumb {\n      if (active.length === 0 || container.clientHeight === 0) return [0, 0]\n\n      let upper = Number.MAX_VALUE\n      let lower = 0\n\n      for (const item of active) {\n         const element = container.querySelector<HTMLElement>(\n            `a[href=\"#${item}\"]`,\n         )\n         if (!element) continue\n\n         const styles = getComputedStyle(element)\n         upper = Math.min(\n            upper,\n            element.offsetTop + Number.parseFloat(styles.paddingTop),\n         )\n         lower = Math.max(\n            lower,\n            element.offsetTop +\n               element.clientHeight -\n               Number.parseFloat(styles.paddingBottom),\n         )\n      }\n\n      return [upper, lower - upper]\n   }\n\n   function update(element: HTMLElement, info: TOCThumb): void {\n      element.style.setProperty(\"--nyx-top\", `${info[0]}px`)\n      element.style.setProperty(\"--nyx-height\", `${info[1]}px`)\n   }\n\n   useEffect(() => {\n      if (!containerRef.current) return\n      const container = containerRef.current\n\n      const onResize = (): void => {\n         if (!thumbRef.current) return\n         update(thumbRef.current, calc(container, activeRef.current))\n      }\n\n      onResize()\n      const observer = new ResizeObserver(onResize)\n      observer.observe(container)\n\n      return () => {\n         observer.disconnect()\n      }\n   }, [containerRef])\n\n   useOnChange(active, () => {\n      if (!containerRef.current || !thumbRef.current) return\n\n      update(thumbRef.current, calc(containerRef.current, active))\n   })\n\n   return <div ref={thumbRef} role=\"none\" {...props} />\n}\n\nexport function TocItemsEmpty() {\n   return (\n      <div className=\"bg-card text-muted-foreground rounded-lg border p-3 text-xs\">\n         No headings found\n      </div>\n   )\n}\n\nexport function Toc(props: HTMLAttributes<HTMLDivElement>) {\n   const { toc } = usePageStyles()\n\n   return (\n      <div\n         id=\"nyx-toc\"\n         {...props}\n         className={cn(\n            \"top-nyx-layout-top sticky h-[var(--nyx-toc-height)] pb-2 pt-12\",\n            toc,\n            props.className,\n         )}\n         style={\n            {\n               ...props.style,\n               \"--nyx-toc-height\":\n                  \"calc(100dvh - var(--nyx-banner-height) - var(--nyx-nav-height))\",\n            } as any\n         }\n      >\n         <div className=\"flex h-full w-[var(--nyx-width)] max-w-full flex-col gap-3 pe-4\">\n            {props.children}\n         </div>\n      </div>\n   )\n}\n\n// Main Component\nexport function NyxTOCItems({\n   items,\n   isMenu = false,\n   label,\n}: {\n   items: TOCItemType[]\n   isMenu?: boolean\n   label?: ReactNode\n}) {\n   const viewRef = useRef<HTMLDivElement>(null)\n   const containerRef = useRef<HTMLDivElement>(null)\n\n   const [svg, setSvg] = useState<{\n      path: string\n      width: number\n      height: number\n   }>()\n\n   useEffect(() => {\n      if (!containerRef.current) return\n      const container = containerRef.current\n\n      function onResize(): void {\n         if (container.clientHeight === 0) return\n         let w = 0\n         let h = 0\n         const d: string[] = []\n         for (let i = 0; i < items.length; i++) {\n            const element: HTMLElement | null = container.querySelector(\n               `a[href=\"#${items[i].url.slice(1)}\"]`,\n            )\n            if (!element) continue\n\n            const styles = getComputedStyle(element)\n            const offset = getLineOffset(items[i].depth) + 1\n            const top = element.offsetTop + Number.parseFloat(styles.paddingTop)\n            const bottom =\n               element.offsetTop +\n               element.clientHeight -\n               Number.parseFloat(styles.paddingBottom)\n\n            w = Math.max(offset, w)\n            h = Math.max(h, bottom)\n\n            d.push(`${i === 0 ? \"M\" : \"L\"}${offset} ${top}`)\n            d.push(`L${offset} ${bottom}`)\n         }\n\n         setSvg({\n            path: d.join(\" \"),\n            width: w + 1,\n            height: h,\n         })\n      }\n\n      const observer = new ResizeObserver(onResize)\n      onResize()\n      observer.observe(container)\n      return () => observer.disconnect()\n   }, [items])\n\n   if (items.length === 0) return <TocItemsEmpty />\n\n   return (\n      <>\n         {label && (\n            <h3 className=\"text-muted-foreground -ms-0.5 inline-flex items-center gap-1.5 text-sm\">\n               <AlignLeft className=\"size-4\" />\n               {label}\n            </h3>\n         )}\n         <ScrollArea className={cn(\"flex flex-col\", isMenu && \"-ms-3\")}>\n            <ScrollViewport className=\"relative min-h-0\" ref={viewRef}>\n               {svg ? (\n                  <div\n                     className=\"absolute start-0 top-0 rtl:-scale-x-100\"\n                     style={{\n                        width: svg.width,\n                        height: svg.height,\n                        maskImage: `url(\"data:image/svg+xml,${\n                           // Inline SVG\n                           encodeURIComponent(\n                              `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ${svg.width} ${svg.height}\"><path d=\"${svg.path}\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" /></svg>`,\n                           )\n                        }\")`,\n                     }}\n                  >\n                     <TocThumb\n                        containerRef={containerRef}\n                        className=\"bg-primary mt-[var(--nyx-top)] h-[var(--nyx-height)] transition-all\"\n                     />\n                  </div>\n               ) : null}\n               <ScrollProvider containerRef={viewRef}>\n                  <div className=\"flex flex-col\" ref={containerRef}>\n                     {items.map((item, i) => (\n                        <LocalTOCItem\n                           key={item.url}\n                           item={item}\n                           upper={items[i - 1]?.depth}\n                           lower={items[i + 1]?.depth}\n                        />\n                     ))}\n                  </div>\n               </ScrollProvider>\n            </ScrollViewport>\n         </ScrollArea>\n      </>\n   )\n}\n\n// Popover Components\nexport const TocPopover = Popover\n\nexport function TocPopoverTrigger({\n   items,\n   ...props\n}: PopoverTriggerProps & { items: TOCItemType[] }) {\n   const active = useActiveAnchor()\n   const current = useMemo(() => {\n      return items.find((item) => active === item.url.slice(1))?.title\n   }, [items, active])\n\n   return (\n      <PopoverTrigger\n         {...props}\n         className={cn(\n            \"inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start\",\n            props.className,\n         )}\n      >\n         <AlignLeft className=\"size-4 shrink-0\" />\n         Table of Contents\n         {current && (\n            <>\n               <ChevronRight className=\"text-muted-foreground -mx-1.5 size-4 shrink-0\" />\n               <span className=\"text-muted-foreground truncate\">{current}</span>\n            </>\n         )}\n      </PopoverTrigger>\n   )\n}\n\nexport function TocPopoverContent(props: PopoverContentProps) {\n   return (\n      <PopoverContent\n         hideWhenDetached\n         alignOffset={16}\n         align=\"start\"\n         side=\"bottom\"\n         data-toc-popover=\"\"\n         {...props}\n         className={cn(\n            \"flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3\",\n            props.className,\n         )}\n      >\n         {props.children}\n      </PopoverContent>\n   )\n}\n\nfunction LocalTOCItem({\n   item,\n   upper = item.depth,\n   lower = item.depth,\n}: {\n   item: TOCItemType\n   upper?: number\n   lower?: number\n}) {\n   const offset = getLineOffset(item.depth)\n   const upperOffset = getLineOffset(upper)\n   const lowerOffset = getLineOffset(lower)\n\n   return (\n      <TOCItem\n         href={item.url}\n         style={{\n            paddingInlineStart: getItemOffset(item.depth),\n         }}\n         className=\"prose text-muted-foreground data-[active=true]:text-primary relative py-1.5 text-sm transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0\"\n      >\n         {offset !== upperOffset ? (\n            <svg\n               xmlns=\"http://www.w3.org/2000/svg\"\n               viewBox=\"0 0 16 16\"\n               className=\"absolute -top-1.5 start-0 size-4 rtl:-scale-x-100\"\n            >\n               <line\n                  x1={upperOffset}\n                  y1=\"0\"\n                  x2={offset}\n                  y2=\"12\"\n                  className=\"stroke-foreground/10\"\n                  strokeWidth=\"1\"\n               />\n            </svg>\n         ) : null}\n         <div\n            className={cn(\n               \"bg-foreground/10 absolute inset-y-0 w-px\",\n               offset !== upperOffset && \"top-1.5\",\n               offset !== lowerOffset && \"bottom-1.5\",\n            )}\n            style={{\n               insetInlineStart: offset,\n            }}\n         />\n         {item.title}\n      </TOCItem>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "hooks/use-anchor-observer.ts",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\n/**\n * Find the active heading of page\n *\n * It selects the top heading by default, and the last item when reached the bottom of page.\n *\n * @param watch - An array of element ids to watch\n * @param single - only one active item at most\n * @returns Active anchor\n */\nexport function useAnchorObserver(watch: string[], single: boolean): string[] {\n   const [activeAnchor, setActiveAnchor] = useState<string[]>([])\n\n   useEffect(() => {\n      let visible: string[] = []\n      const observer = new IntersectionObserver(\n         (entries) => {\n            for (const entry of entries) {\n               if (entry.isIntersecting && !visible.includes(entry.target.id)) {\n                  visible = [...visible, entry.target.id]\n               } else if (\n                  !entry.isIntersecting &&\n                  visible.includes(entry.target.id)\n               ) {\n                  visible = visible.filter((v) => v !== entry.target.id)\n               }\n            }\n\n            if (visible.length > 0) setActiveAnchor(visible)\n         },\n         {\n            rootMargin: single ? \"-80px 0% -70% 0%\" : `-20px 0% -40% 0%`,\n            threshold: 1,\n         },\n      )\n\n      function onScroll(): void {\n         const element = document.scrollingElement\n         if (!element) return\n\n         if (element.scrollTop === 0 && single) {\n            setActiveAnchor(watch.slice(0, 1))\n         } else if (\n            element.scrollTop + element.clientHeight >=\n            element.scrollHeight - 6\n         ) {\n            setActiveAnchor((active) => {\n               return active.length > 0 && !single\n                  ? watch.slice(watch.indexOf(active[0]))\n                  : watch.slice(-1)\n            })\n         }\n      }\n\n      for (const heading of watch) {\n         const element = document.getElementById(heading)\n\n         if (element) observer.observe(element)\n      }\n\n      onScroll()\n      window.addEventListener(\"scroll\", onScroll)\n      return () => {\n         window.removeEventListener(\"scroll\", onScroll)\n         observer.disconnect()\n      }\n   }, [single, watch])\n\n   return single ? activeAnchor.slice(0, 1) : activeAnchor\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    },
+    {
+      "path": "hooks/use-on-change.ts",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b)) {\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   }\n\n   return a !== b\n}\n\n/**\n * @param value - state to watch\n * @param onChange - when the state changed\n * @param isUpdated - a function that determines if the state is updated\n */\nexport function useOnChange<T>(\n   value: T,\n   onChange: (current: T, previous: T) => void,\n   isUpdated: (prev: T, current: T) => boolean = isDifferent,\n): void {\n   const [prev, setPrev] = useState<T>(value)\n\n   if (isUpdated(prev, value)) {\n      onChange(value, prev)\n      setPrev(value)\n   }\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "nyx-fade-out": "nyx-fade-out 0.2s ease-out"
+          },
+          "keyframes": {
+            "nyx-fade-out": {
+              "0%": {
+                "opacity": "1"
+              },
+              "100%": {
+                "opacity": "0"
+              }
+            }
+          }
+        },
+        "spacing": {
+          "nyx-layout-top": "calc(var(--nyx-banner-height) + var(--nyx-nav-height))"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/orbiting-circles-demo.json b/apps/web/public/v0/styles/default/orbiting-circles-demo.json
new file mode 100644
index 00000000..6a1c3da2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/orbiting-circles-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "orbiting-circles-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/orbiting-circles-demo.tsx",
+      "content": "import OrbitingCircles from \"@/components/ui/orbiting-circles\"\n\nexport default function OrbitingCirclesDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Circles\n         </span>\n\n         {/* Inner Circles */}\n         <OrbitingCircles\n            className=\"size-[30px] border-none bg-transparent\"\n            duration={20}\n            delay={20}\n            radius={80}\n         >\n            <Icons.whatsapp />\n         </OrbitingCircles>\n         <OrbitingCircles\n            className=\"size-[30px] border-none bg-transparent\"\n            duration={20}\n            delay={10}\n            radius={80}\n         >\n            <Icons.notion />\n         </OrbitingCircles>\n\n         {/* Outer Circles (reverse) */}\n         <OrbitingCircles\n            className=\"size-[50px] border-none bg-transparent\"\n            radius={190}\n            duration={20}\n            reverse\n         >\n            <Icons.googleDrive />\n         </OrbitingCircles>\n         <OrbitingCircles\n            className=\"size-[50px] border-none bg-transparent\"\n            radius={190}\n            duration={20}\n            delay={20}\n            reverse\n         >\n            <Icons.gitHub />\n         </OrbitingCircles>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: () => (\n      <svg width=\"100\" height=\"100\" viewBox=\"0 0 438.549 438.549\">\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         />\n      </svg>\n   ),\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/orbiting-circles.json b/apps/web/public/v0/styles/default/orbiting-circles.json
new file mode 100644
index 00000000..6157d9e7
--- /dev/null
+++ b/apps/web/public/v0/styles/default/orbiting-circles.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "orbiting-circles",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/orbiting-circles.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nexport default function OrbitingCircles({\n   className,\n   children,\n   reverse,\n   duration = 20,\n   delay = 10,\n   radius = 50,\n   path = true,\n}: {\n   className?: string\n   children?: React.ReactNode\n   reverse?: boolean\n   duration?: number\n   delay?: number\n   radius?: number\n   path?: boolean\n}) {\n   return (\n      <>\n         {path && (\n            <svg\n               xmlns=\"http://www.w3.org/2000/svg\"\n               version=\"1.1\"\n               className=\"pointer-events-none absolute inset-0 size-full\"\n            >\n               <circle\n                  className=\"stroke-black/10 stroke-1 dark:stroke-white/10\"\n                  cx=\"50%\"\n                  cy=\"50%\"\n                  r={radius}\n                  fill=\"none\"\n                  strokeDasharray=\"4 4\"\n               />\n            </svg>\n         )}\n\n         <div\n            style={\n               {\n                  \"--duration\": duration,\n                  \"--radius\": radius,\n                  \"--delay\": -delay,\n               } as React.CSSProperties\n            }\n            className={cn(\n               \"animate-orbit absolute flex size-full transform-gpu items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10\",\n               { \"[animation-direction:reverse]\": reverse },\n               className,\n            )}\n         >\n            {children}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "orbit": "orbit calc(var(--duration)*1s) linear infinite"
+          },
+          "keyframes": {
+            "orbit": {
+              "0%": {
+                "transform": "rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)"
+              },
+              "100%": {
+                "transform": "rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/pagination-demo.json b/apps/web/public/v0/styles/default/pagination-demo.json
new file mode 100644
index 00000000..b22bc37a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/pagination-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "pagination-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "pagination"
+  ],
+  "files": [
+    {
+      "path": "examples/pagination-demo.tsx",
+      "content": "import {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n} from \"@/components/ui/pagination\"\n\nexport default function PaginationDemo() {\n   return (\n      <Pagination>\n         <PaginationContent>\n            <PaginationItem>\n               <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\" isActive>\n                  2\n               </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationNext href=\"#\" />\n            </PaginationItem>\n         </PaginationContent>\n      </Pagination>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/pagination.json b/apps/web/public/v0/styles/default/pagination.json
new file mode 100644
index 00000000..6e449b89
--- /dev/null
+++ b/apps/web/public/v0/styles/default/pagination.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "pagination",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/pagination.tsx",
+      "content": "import { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { ButtonProps } from \"@/components/ui/button\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n   return (\n      <nav\n         role=\"navigation\"\n         aria-label=\"pagination\"\n         className={cn(\"mx-auto flex w-full justify-center\", className)}\n         {...props}\n      />\n   )\n}\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n   />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n   <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n   isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n   React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n   className,\n   isActive,\n   size = \"icon\",\n   ...props\n}: PaginationLinkProps) {\n   return (\n      <a\n         aria-current={isActive ? \"page\" : undefined}\n         className={cn(\n            buttonVariants({\n               variant: isActive ? \"outline\" : \"ghost\",\n               size,\n            }),\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nPaginationLink.displayName = \"PaginationLink\"\n\nfunction PaginationPrevious({\n   className,\n   ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n   return (\n      <PaginationLink\n         aria-label=\"Go to previous page\"\n         size=\"default\"\n         className={cn(\"gap-1 pl-2.5\", className)}\n         {...props}\n      >\n         <ChevronLeft className=\"size-4\" />\n         <span>Previous</span>\n      </PaginationLink>\n   )\n}\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nfunction PaginationNext({\n   className,\n   ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n   return (\n      <PaginationLink\n         aria-label=\"Go to next page\"\n         size=\"default\"\n         className={cn(\"gap-1 pr-2.5\", className)}\n         {...props}\n      >\n         <span>Next</span>\n         <ChevronRight className=\"size-4\" />\n      </PaginationLink>\n   )\n}\nPaginationNext.displayName = \"PaginationNext\"\n\nfunction PaginationEllipsis({\n   className,\n   ...props\n}: React.ComponentProps<\"span\">) {\n   return (\n      <span\n         aria-hidden\n         className={cn(\"flex size-9 items-center justify-center\", className)}\n         {...props}\n      >\n         <MoreHorizontal className=\"size-4\" />\n         <span className=\"sr-only\">More pages</span>\n      </span>\n   )\n}\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/particles-demo.json b/apps/web/public/v0/styles/default/particles-demo.json
new file mode 100644
index 00000000..06bef83b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/particles-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "particles-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/particles-demo.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { useEffect, useState } from \"react\"\nimport Particles from \"@/components/ui/particles\"\n\nfunction ParticlesDemo() {\n   const { theme } = useTheme()\n   const [color, setColor] = useState(\"#ffffff\")\n\n   useEffect(() => {\n      setColor(theme === \"dark\" ? \"#ffffff\" : \"#000000\")\n   }, [theme])\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Particles\n         </span>\n         <Particles\n            className=\"absolute inset-0\"\n            quantity={100}\n            ease={80}\n            color={color}\n            refresh\n         />\n      </div>\n   )\n}\n\nexport default ParticlesDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/particles.json b/apps/web/public/v0/styles/default/particles.json
new file mode 100644
index 00000000..7eab124e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/particles.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "particles",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/particles.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\n\ninterface MousePosition {\n   x: number\n   y: number\n}\n\nfunction MousePosition(): MousePosition {\n   const [mousePosition, setMousePosition] = useState<MousePosition>({\n      x: 0,\n      y: 0,\n   })\n\n   useEffect(() => {\n      const handleMouseMove = (event: MouseEvent) => {\n         setMousePosition({ x: event.clientX, y: event.clientY })\n      }\n\n      window.addEventListener(\"mousemove\", handleMouseMove)\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMouseMove)\n      }\n   }, [])\n\n   return mousePosition\n}\n\ninterface ParticlesProps {\n   className?: string\n   quantity?: number\n   staticity?: number\n   ease?: number\n   size?: number\n   refresh?: boolean\n   color?: string\n   vx?: number\n   vy?: number\n}\nfunction hexToRgb(hex: string): number[] {\n   hex = hex.replace(\"#\", \"\")\n\n   // Unterstützung für dreistellige Hex-Farbcodes\n   if (hex.length === 3) {\n      hex = hex\n         .split(\"\")\n         .map((char) => char + char)\n         .join(\"\")\n   }\n\n   const hexInt = Number.parseInt(hex, 16)\n   const red = (hexInt >> 16) & 255\n   const green = (hexInt >> 8) & 255\n   const blue = hexInt & 255\n   return [red, green, blue]\n}\n\nconst Particles: React.FC<ParticlesProps> = ({\n   className = \"\",\n   quantity = 100,\n   staticity = 50,\n   ease = 50,\n   size = 0.4,\n   refresh = false,\n   color = \"#ffffff\",\n   vx = 0,\n   vy = 0,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const canvasContainerRef = useRef<HTMLDivElement>(null)\n   const context = useRef<CanvasRenderingContext2D | null>(null)\n   const circles = useRef<any[]>([])\n   const mousePosition = MousePosition()\n   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })\n   const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })\n   const dpr = typeof window !== \"undefined\" ? window.devicePixelRatio : 1\n\n   useEffect(() => {\n      if (canvasRef.current)\n         context.current = canvasRef.current.getContext(\"2d\")\n\n      initCanvas()\n      animate()\n      window.addEventListener(\"resize\", initCanvas)\n\n      return () => {\n         window.removeEventListener(\"resize\", initCanvas)\n      }\n   }, [color])\n\n   useEffect(() => {\n      onMouseMove()\n   }, [mousePosition.x, mousePosition.y])\n\n   useEffect(() => {\n      initCanvas()\n   }, [refresh])\n\n   const initCanvas = () => {\n      resizeCanvas()\n      drawParticles()\n   }\n\n   const onMouseMove = () => {\n      if (canvasRef.current) {\n         const rect = canvasRef.current.getBoundingClientRect()\n         const { w, h } = canvasSize.current\n         const x = mousePosition.x - rect.left - w / 2\n         const y = mousePosition.y - rect.top - h / 2\n         const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2\n         if (inside) {\n            mouse.current.x = x\n            mouse.current.y = y\n         }\n      }\n   }\n\n   interface Circle {\n      x: number\n      y: number\n      translateX: number\n      translateY: number\n      size: number\n      alpha: number\n      targetAlpha: number\n      dx: number\n      dy: number\n      magnetism: number\n   }\n\n   const resizeCanvas = () => {\n      if (canvasContainerRef.current && canvasRef.current && context.current) {\n         circles.current.length = 0\n         canvasSize.current.w = canvasContainerRef.current.offsetWidth\n         canvasSize.current.h = canvasContainerRef.current.offsetHeight\n         canvasRef.current.width = canvasSize.current.w * dpr\n         canvasRef.current.height = canvasSize.current.h * dpr\n         canvasRef.current.style.width = `${canvasSize.current.w}px`\n         canvasRef.current.style.height = `${canvasSize.current.h}px`\n         context.current.scale(dpr, dpr)\n      }\n   }\n\n   const circleParams = (): Circle => {\n      const x = Math.floor(Math.random() * canvasSize.current.w)\n      const y = Math.floor(Math.random() * canvasSize.current.h)\n      const translateX = 0\n      const translateY = 0\n      const pSize = Math.floor(Math.random() * 2) + size\n      const alpha = 0\n      const targetAlpha = Number.parseFloat(\n         (Math.random() * 0.6 + 0.1).toFixed(1),\n      )\n      const dx = (Math.random() - 0.5) * 0.1\n      const dy = (Math.random() - 0.5) * 0.1\n      const magnetism = 0.1 + Math.random() * 4\n      return {\n         x,\n         y,\n         translateX,\n         translateY,\n         size: pSize,\n         alpha,\n         targetAlpha,\n         dx,\n         dy,\n         magnetism,\n      }\n   }\n\n   const rgb = hexToRgb(color)\n\n   const drawCircle = (circle: Circle, update = false) => {\n      if (context.current) {\n         const { x, y, translateX, translateY, size, alpha } = circle\n         context.current.translate(translateX, translateY)\n         context.current.beginPath()\n         context.current.arc(x, y, size, 0, 2 * Math.PI)\n         context.current.fillStyle = `rgba(${rgb.join(\", \")}, ${alpha})`\n         context.current.fill()\n         context.current.setTransform(dpr, 0, 0, dpr, 0, 0)\n\n         if (!update) circles.current.push(circle)\n      }\n   }\n\n   const clearContext = () => {\n      if (context.current) {\n         context.current.clearRect(\n            0,\n            0,\n            canvasSize.current.w,\n            canvasSize.current.h,\n         )\n      }\n   }\n\n   const drawParticles = () => {\n      clearContext()\n      const particleCount = quantity\n      for (let i = 0; i < particleCount; i++) {\n         const circle = circleParams()\n         drawCircle(circle)\n      }\n   }\n\n   const remapValue = (\n      value: number,\n      start1: number,\n      end1: number,\n      start2: number,\n      end2: number,\n   ): number => {\n      const remapped =\n         ((value - start1) * (end2 - start2)) / (end1 - start1) + start2\n      return remapped > 0 ? remapped : 0\n   }\n\n   const animate = () => {\n      clearContext()\n      circles.current.forEach((circle: Circle, i: number) => {\n         // Handle the alpha value\n         const edge = [\n            circle.x + circle.translateX - circle.size, // distance from left edge\n            canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge\n            circle.y + circle.translateY - circle.size, // distance from top edge\n            canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge\n         ]\n         const closestEdge = edge.reduce((a, b) => Math.min(a, b))\n         const remapClosestEdge = Number.parseFloat(\n            remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),\n         )\n         if (remapClosestEdge > 1) {\n            circle.alpha += 0.02\n            if (circle.alpha > circle.targetAlpha)\n               circle.alpha = circle.targetAlpha\n         } else {\n            circle.alpha = circle.targetAlpha * remapClosestEdge\n         }\n         circle.x += circle.dx + vx\n         circle.y += circle.dy + vy\n         circle.translateX +=\n            (mouse.current.x / (staticity / circle.magnetism) -\n               circle.translateX) /\n            ease\n         circle.translateY +=\n            (mouse.current.y / (staticity / circle.magnetism) -\n               circle.translateY) /\n            ease\n\n         drawCircle(circle, true)\n\n         // circle gets out of the canvas\n         if (\n            circle.x < -circle.size ||\n            circle.x > canvasSize.current.w + circle.size ||\n            circle.y < -circle.size ||\n            circle.y > canvasSize.current.h + circle.size\n         ) {\n            // remove the circle from the array\n            circles.current.splice(i, 1)\n            // create a new circle\n            const newCircle = circleParams()\n            drawCircle(newCircle)\n            // update the circle position\n         }\n      })\n      window.requestAnimationFrame(animate)\n   }\n\n   return (\n      <div className={className} ref={canvasContainerRef} aria-hidden=\"true\">\n         <canvas ref={canvasRef} className=\"size-full\" />\n      </div>\n   )\n}\n\nexport default Particles\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/popover-demo.json b/apps/web/public/v0/styles/default/popover-demo.json
new file mode 100644
index 00000000..0adae0eb
--- /dev/null
+++ b/apps/web/public/v0/styles/default/popover-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "popover-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/popover-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport default function PopoverDemo() {\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button variant=\"outline\">Open popover</Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-80\">\n            <div className=\"grid gap-4\">\n               <div className=\"space-y-2\">\n                  <h4 className=\"font-medium leading-none\">Dimensions</h4>\n                  <p className=\"text-muted-foreground text-sm\">\n                     Set the dimensions for the layer.\n                  </p>\n               </div>\n               <div className=\"grid gap-2\">\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"width\">Width</Label>\n                     <Input\n                        id=\"width\"\n                        defaultValue=\"100%\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxWidth\">Max. width</Label>\n                     <Input\n                        id=\"maxWidth\"\n                        defaultValue=\"300px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"height\">Height</Label>\n                     <Input\n                        id=\"height\"\n                        defaultValue=\"25px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxHeight\">Max. height</Label>\n                     <Input\n                        id=\"maxHeight\"\n                        defaultValue=\"none\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n               </div>\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/popover.json b/apps/web/public/v0/styles/default/popover.json
new file mode 100644
index 00000000..f405f94a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/popover.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "popover",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-popover"
+  ],
+  "files": [
+    {
+      "path": "ui/popover.tsx",
+      "content": "\"use client\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor // Neues Element hinzugefügt\n\nconst PopoverContent = React.forwardRef<\n   React.ElementRef<typeof PopoverPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n   <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n         ref={ref}\n         align={align}\n         sideOffset={sideOffset}\n         className={cn(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none\",\n            className,\n         )}\n         {...props}\n      />\n   </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } // Geänderter Export\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/progress-demo.json b/apps/web/public/v0/styles/default/progress-demo.json
new file mode 100644
index 00000000..97a2fedb
--- /dev/null
+++ b/apps/web/public/v0/styles/default/progress-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "progress-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "progress"
+  ],
+  "files": [
+    {
+      "path": "examples/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/components/ui/progress\"\n\nexport default function ProgressDemo() {\n   const [progress, setProgress] = React.useState(13)\n\n   React.useEffect(() => {\n      const timer = setTimeout(() => setProgress(66), 500)\n      return () => clearTimeout(timer)\n   }, [])\n\n   return <Progress value={progress} className=\"w-3/5\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/progress.json b/apps/web/public/v0/styles/default/progress.json
new file mode 100644
index 00000000..11ce6e06
--- /dev/null
+++ b/apps/web/public/v0/styles/default/progress.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "progress",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-progress"
+  ],
+  "files": [
+    {
+      "path": "ui/progress.tsx",
+      "content": "\"use client\"\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Progress = React.forwardRef<\n   React.ElementRef<typeof ProgressPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <ProgressPrimitive.Root\n      ref={ref}\n      className={cn(\n         \"bg-secondary relative h-4 w-full overflow-hidden rounded-full\",\n         className,\n      )}\n      {...props}\n   >\n      <ProgressPrimitive.Indicator\n         className=\"bg-primary size-full flex-1 transition-all\"\n         style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}\n      />\n   </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/pulsating-button-demo.json b/apps/web/public/v0/styles/default/pulsating-button-demo.json
new file mode 100644
index 00000000..057b6783
--- /dev/null
+++ b/apps/web/public/v0/styles/default/pulsating-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "pulsating-button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/pulsating-button-demo.tsx",
+      "content": "import { PulsatingButton } from \"@/components/ui/pulsating-button\"\n\nfunction PulsatingButtonDemo() {\n   return (\n      <PulsatingButton\n         text=\"Join Affiliate Program\"\n         pulseColor=\"150, 0, 255\"\n         backgroundColor=\"#9945FF\"\n         textColor=\"#ffffff\"\n         animationDuration=\"1.5s\"\n         buttonWidth=\"200px\"\n         buttonHeight=\"50px\"\n      />\n   )\n}\n\nexport default PulsatingButtonDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/pulsating-button.json b/apps/web/public/v0/styles/default/pulsating-button.json
new file mode 100644
index 00000000..57ff3f84
--- /dev/null
+++ b/apps/web/public/v0/styles/default/pulsating-button.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "pulsating-button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/pulsating-button.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\n\ninterface PulsatingButtonProps {\n   text: string\n   pulseColor: string\n   backgroundColor: string\n   textColor: string\n   animationDuration: string\n   buttonWidth: string\n   buttonHeight: string\n}\n\nexport const PulsatingButton: React.FC<PulsatingButtonProps> = ({\n   text,\n   pulseColor,\n   backgroundColor,\n   textColor,\n   animationDuration,\n   buttonWidth,\n   buttonHeight,\n}) => {\n   const pulseKeyframes = {\n      \"--tw-pulse-color\": pulseColor,\n      animation: `pulse ${animationDuration} linear infinite`,\n   }\n\n   return (\n      <div className=\"flex items-center justify-center\">\n         <button\n            className=\"relative block flex cursor-pointer items-center justify-center text-center\"\n            style={{\n               color: textColor,\n               backgroundColor,\n               width: buttonWidth,\n               height: buttonHeight,\n               borderRadius: \"12px\",\n               ...pulseKeyframes,\n            }}\n         >\n            <div>{text}</div>\n            <style jsx>\n               {`\n          @keyframes pulse {\n            0% {\n              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);\n            }\n            50% {\n              box-shadow: 0 0 0 8px rgba(var(--tw-pulse-color), 0.5);\n            }\n            100% {\n              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);\n            }\n          }\n          button::before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            height: 100%;\n            border-radius: 20px;\n            background: inherit;\n            animation: inherit;\n            transform: translate(-50%, -50%);\n            z-index: -1;\n          }\n        `}\n            </style>\n         </button>\n      </div>\n   )\n}\n\nexport default PulsatingButton\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "pulse": "pulse var(--duration) ease-out infinite"
+          },
+          "keyframes": {
+            "pulse": {
+              "0%, 100%": {
+                "boxShadow": "0 0 0 0 var(--pulse-color)"
+              },
+              "50%": {
+                "boxShadow": "0 0 0 8px var(--pulse-color)"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/radio-group-demo.json b/apps/web/public/v0/styles/default/radio-group-demo.json
new file mode 100644
index 00000000..55771a3d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/radio-group-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "radio-group-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "examples/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\n\nexport default function RadioGroupDemo() {\n   return (\n      <RadioGroup defaultValue=\"comfortable\">\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"default\" id=\"r1\" />\n            <Label htmlFor=\"r1\">Default</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n            <Label htmlFor=\"r2\">Comfortable</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"compact\" id=\"r3\" />\n            <Label htmlFor=\"r3\">Compact</Label>\n         </div>\n      </RadioGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/radio-group-form.json b/apps/web/public/v0/styles/default/radio-group-form.json
new file mode 100644
index 00000000..36ee4c69
--- /dev/null
+++ b/apps/web/public/v0/styles/default/radio-group-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "radio-group-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "radio-group",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/radio-group-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   type: z.enum([\"all\", \"mentions\", \"none\"], {\n      required_error: \"You need to select a notification type.\",\n   }),\n})\n\nexport default function RadioGroupForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"type\"\n               render={({ field }) => (\n                  <FormItem className=\"space-y-3\">\n                     <FormLabel>Notify me about...</FormLabel>\n                     <FormControl>\n                        <RadioGroup\n                           onValueChange={field.onChange}\n                           defaultValue={field.value}\n                           className=\"flex flex-col space-y-1\"\n                        >\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"all\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 All new messages\n                              </FormLabel>\n                           </FormItem>\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"mentions\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 Direct messages and mentions\n                              </FormLabel>\n                           </FormItem>\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"none\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 Nothing\n                              </FormLabel>\n                           </FormItem>\n                        </RadioGroup>\n                     </FormControl>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/radio-group.json b/apps/web/public/v0/styles/default/radio-group.json
new file mode 100644
index 00000000..1972222b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/radio-group.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "radio-group",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-radio-group"
+  ],
+  "files": [
+    {
+      "path": "ui/radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n   React.ElementRef<typeof RadioGroupPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n   return (\n      <RadioGroupPrimitive.Root\n         className={cn(\"grid gap-2\", className)}\n         {...props}\n         ref={ref}\n      />\n   )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n   React.ElementRef<typeof RadioGroupPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n   return (\n      <RadioGroupPrimitive.Item\n         ref={ref}\n         className={cn(\n            \"border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n            className,\n         )}\n         {...props}\n      >\n         <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n            <Circle className=\"size-2.5 fill-current text-current\" />\n         </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n   )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/rainbow-button-demo.json b/apps/web/public/v0/styles/default/rainbow-button-demo.json
new file mode 100644
index 00000000..c78f4b36
--- /dev/null
+++ b/apps/web/public/v0/styles/default/rainbow-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "rainbow-button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/rainbow-button-demo.tsx",
+      "content": "import { RainbowButton } from \"@/components/ui/rainbow-button\"\n\nexport default function RainbowButtonDemo() {\n   return <RainbowButton>Get Unlimited Access</RainbowButton>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/rainbow-button.json b/apps/web/public/v0/styles/default/rainbow-button.json
new file mode 100644
index 00000000..257e3c48
--- /dev/null
+++ b/apps/web/public/v0/styles/default/rainbow-button.json
@@ -0,0 +1,58 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "rainbow-button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/rainbow-button.tsx",
+      "content": "import type React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface RainbowButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport function RainbowButton({ children, ...props }: RainbowButtonProps) {\n   return (\n      <button\n         className={cn(\n            \"focus-visible:ring-ring animate-rainbow text-primary-foreground group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50\",\n\n            // before styles\n            \"before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]\",\n\n            // light mode colors\n            \"bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]\",\n\n            // dark mode colors\n            \" dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]\",\n         )}\n         {...props}\n      >\n         {children}\n      </button>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "color-1": "hsl(var(--color-1))",
+            "color-2": "hsl(var(--color-2))",
+            "color-3": "hsl(var(--color-3))",
+            "color-4": "hsl(var(--color-4))",
+            "color-5": "hsl(var(--color-5))"
+          },
+          "animation": {
+            "rainbow": "rainbow var(--speed, 2s) infinite linear"
+          },
+          "keyframes": {
+            "rainbow": {
+              "0%": {
+                "background-position": "0%"
+              },
+              "100%": {
+                "background-position": "200%"
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "--color-1": "0 100% 63%",
+      "--color-2": "270 100% 63%",
+      "--color-3": "210 100% 63%",
+      "--color-4": "195 100% 63%",
+      "--color-5": "90 100% 63%"
+    },
+    "dark": {
+      "--color-1": "0 100% 63%",
+      "--color-2": "270 100% 63%",
+      "--color-3": "210 100% 63%",
+      "--color-4": "195 100% 63%",
+      "--color-5": "90 100% 63%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/resizable-demo-with-handle.json b/apps/web/public/v0/styles/default/resizable-demo-with-handle.json
new file mode 100644
index 00000000..f76fe356
--- /dev/null
+++ b/apps/web/public/v0/styles/default/resizable-demo-with-handle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "resizable-demo-with-handle",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-demo-with-handle.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"@/components/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={50}>\n            <div className=\"flex h-[200px] items-center justify-center p-6\">\n               <span className=\"font-semibold\">One</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={50}>\n            <ResizablePanelGroup direction=\"vertical\">\n               <ResizablePanel defaultSize={25}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Two</span>\n                  </div>\n               </ResizablePanel>\n               <ResizableHandle withHandle />\n               <ResizablePanel defaultSize={75}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Three</span>\n                  </div>\n               </ResizablePanel>\n            </ResizablePanelGroup>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/resizable-demo.json b/apps/web/public/v0/styles/default/resizable-demo.json
new file mode 100644
index 00000000..ff479247
--- /dev/null
+++ b/apps/web/public/v0/styles/default/resizable-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "resizable-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-demo.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"@/components/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={50}>\n            <div className=\"flex h-[200px] items-center justify-center p-6\">\n               <span className=\"font-semibold\">One</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle />\n         <ResizablePanel defaultSize={50}>\n            <ResizablePanelGroup direction=\"vertical\">\n               <ResizablePanel defaultSize={25}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Two</span>\n                  </div>\n               </ResizablePanel>\n               <ResizableHandle />\n               <ResizablePanel defaultSize={75}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Three</span>\n                  </div>\n               </ResizablePanel>\n            </ResizablePanelGroup>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/resizable-handle.json b/apps/web/public/v0/styles/default/resizable-handle.json
new file mode 100644
index 00000000..d51c5fc0
--- /dev/null
+++ b/apps/web/public/v0/styles/default/resizable-handle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "resizable-handle",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-handle.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"@/components/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"min-h-[200px] max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Sidebar</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/resizable-vertical.json b/apps/web/public/v0/styles/default/resizable-vertical.json
new file mode 100644
index 00000000..ecc4dee9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/resizable-vertical.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "resizable-vertical",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-vertical.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"@/components/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"vertical\"\n         className=\"min-h-[200px] max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Header</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/resizable.json b/apps/web/public/v0/styles/default/resizable.json
new file mode 100644
index 00000000..228b0109
--- /dev/null
+++ b/apps/web/public/v0/styles/default/resizable.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "resizable",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "react-resizable-panels"
+  ],
+  "files": [
+    {
+      "path": "ui/resizable.tsx",
+      "content": "\"use client\"\n\nimport { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n   className,\n   ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n   return (\n      <ResizablePrimitive.PanelGroup\n         className={cn(\n            \"flex size-full data-[panel-group-direction=vertical]:flex-col\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nfunction ResizableHandle({\n   withHandle,\n   className,\n   ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n   withHandle?: boolean\n}) {\n   return (\n      <ResizablePrimitive.PanelResizeHandle\n         className={cn(\n            \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n            className,\n         )}\n         {...props}\n      >\n         {withHandle && (\n            <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border\">\n               <GripVertical className=\"size-2.5\" />\n            </div>\n         )}\n      </ResizablePrimitive.PanelResizeHandle>\n   )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/retro-grid-demo.json b/apps/web/public/v0/styles/default/retro-grid-demo.json
new file mode 100644
index 00000000..ef66bab8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/retro-grid-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "retro-grid-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/retro-grid-demo.tsx",
+      "content": "\"use client\"\n\nimport { RetroGrid } from \"@/components/ui/retro-grid\"\n\nexport default function RetroGridDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <span className=\"pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent\">\n            Retro Grid\n         </span>\n\n         <RetroGrid />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/retro-grid.json b/apps/web/public/v0/styles/default/retro-grid.json
new file mode 100644
index 00000000..e6454053
--- /dev/null
+++ b/apps/web/public/v0/styles/default/retro-grid.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "retro-grid",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/retro-grid.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\ninterface RetroGridProps extends React.HTMLAttributes<HTMLDivElement> {\n   /**\n    * Additional CSS classes to apply to the grid container\n    */\n   className?: string\n   /**\n    * Rotation angle of the grid in degrees\n    * @default 65\n    */\n   angle?: number\n   /**\n    * Grid cell size in pixels\n    * @default 60\n    */\n   cellSize?: number\n   /**\n    * Grid opacity value between 0 and 1\n    * @default 0.5\n    */\n   opacity?: number\n   /**\n    * Grid line color in light mode\n    * @default \"gray\"\n    */\n   lightLineColor?: string\n   /**\n    * Grid line color in dark mode\n    * @default \"gray\"\n    */\n   darkLineColor?: string\n}\n\nexport function RetroGrid({\n   className,\n   angle = 65,\n   cellSize = 60,\n   opacity = 0.5,\n   lightLineColor = \"gray\",\n   darkLineColor = \"gray\",\n   ...props\n}: RetroGridProps) {\n   const gridStyles = {\n      \"--grid-angle\": `${angle}deg`,\n      \"--cell-size\": `${cellSize}px`,\n      \"--opacity\": opacity,\n      \"--light-line\": lightLineColor,\n      \"--dark-line\": darkLineColor,\n   } as React.CSSProperties\n\n   return (\n      <div\n         className={cn(\n            \"pointer-events-none absolute size-full overflow-hidden [perspective:200px]\",\n            `opacity-[var(--opacity)]`,\n            className,\n         )}\n         style={gridStyles}\n         {...props}\n      >\n         <div className=\"absolute inset-0 [transform:rotateX(var(--grid-angle))]\">\n            <div className=\"animate-grid [background-image:linear-gradient(to_right,var(--light-line)_1px,transparent_0),linear-gradient(to_bottom,var(--light-line)_1px,transparent_0)] [background-repeat:repeat] [background-size:var(--cell-size)_var(--cell-size)] [height:300vh] [inset:0%_0px] [margin-left:-200%] [transform-origin:100%_0_0] [width:600vw] dark:[background-image:linear-gradient(to_right,var(--dark-line)_1px,transparent_0),linear-gradient(to_bottom,var(--dark-line)_1px,transparent_0)]\" />\n         </div>\n\n         <div className=\"absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black\" />\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "grid": "grid 15s linear infinite"
+          },
+          "keyframes": {
+            "grid": {
+              "0%": {
+                "transform": "translateY(-50%)"
+              },
+              "100%": {
+                "transform": "translateY(0)"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/ripple-button-demo.json b/apps/web/public/v0/styles/default/ripple-button-demo.json
new file mode 100644
index 00000000..e45b9b0d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/ripple-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "ripple-button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/ripple-button-demo.tsx",
+      "content": "import { RippleButton } from \"@/components/ui/ripple-button\"\n\nexport default function RippleButtonDemo() {\n   return <RippleButton rippleColor=\"#ADD8E6\">Click me</RippleButton>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/ripple-button.json b/apps/web/public/v0/styles/default/ripple-button.json
new file mode 100644
index 00000000..a623b6d5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/ripple-button.json
@@ -0,0 +1,39 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "ripple-button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/ripple-button.tsx",
+      "content": "\"use client\"\n\nimport React, { type MouseEvent, useEffect, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface RippleButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n   rippleColor?: string\n   duration?: string\n}\n\nexport const RippleButton = React.forwardRef<\n   HTMLButtonElement,\n   RippleButtonProps\n>(\n   (\n      {\n         className,\n         children,\n         rippleColor = \"#ffffff\",\n         duration = \"600ms\",\n         onClick,\n         ...props\n      },\n      ref,\n   ) => {\n      const [buttonRipples, setButtonRipples] = useState<\n         Array<{ x: number; y: number; size: number; key: number }>\n      >([])\n\n      const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n         createRipple(event)\n         onClick?.(event)\n      }\n\n      const createRipple = (event: MouseEvent<HTMLButtonElement>) => {\n         const button = event.currentTarget\n         const rect = button.getBoundingClientRect()\n         const size = Math.max(rect.width, rect.height)\n         const x = event.clientX - rect.left - size / 2\n         const y = event.clientY - rect.top - size / 2\n\n         const newRipple = { x, y, size, key: Date.now() }\n         setButtonRipples((prevRipples) => [...prevRipples, newRipple])\n      }\n\n      useEffect(() => {\n         if (buttonRipples.length > 0) {\n            const lastRipple = buttonRipples[buttonRipples.length - 1]\n            const timeout = setTimeout(() => {\n               setButtonRipples((prevRipples) =>\n                  prevRipples.filter((ripple) => ripple.key !== lastRipple.key),\n               )\n            }, Number.parseInt(duration))\n            return () => clearTimeout(timeout)\n         }\n      }, [buttonRipples, duration])\n\n      return (\n         <button\n            className={cn(\n               \"relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 bg-background px-4 py-2 text-center text-primary\",\n               className,\n            )}\n            onClick={handleClick}\n            ref={ref}\n            {...props}\n         >\n            <div className=\"relative z-10\">{children}</div>\n            <span className=\"pointer-events-none absolute inset-0\">\n               {buttonRipples.map((ripple) => (\n                  <span\n                     className=\"absolute animate-rippling rounded-full bg-background opacity-30\"\n                     key={ripple.key}\n                     style={{\n                        width: `${ripple.size}px`,\n                        height: `${ripple.size}px`,\n                        top: `${ripple.y}px`,\n                        left: `${ripple.x}px`,\n                        backgroundColor: rippleColor,\n                        transform: `scale(0)`,\n                     }}\n                  />\n               ))}\n            </span>\n         </button>\n      )\n   },\n)\n\nRippleButton.displayName = \"RippleButton\"\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "rippling": "rippling var(--duration) ease-out"
+          },
+          "keyframes": {
+            "rippling": {
+              "0%": {
+                "opacity": "1"
+              },
+              "100%": {
+                "transform": "scale(2)",
+                "opacity": "0"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/ripple-demo.json b/apps/web/public/v0/styles/default/ripple-demo.json
new file mode 100644
index 00000000..481d384f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/ripple-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "ripple-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/ripple-demo.tsx",
+      "content": "import { Ripple } from \"@/components/ui/ripple\"\n\nexport default function RippleDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white\">\n            Ripple\n         </p>\n         <Ripple />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/ripple.json b/apps/web/public/v0/styles/default/ripple.json
new file mode 100644
index 00000000..a9cd3f7b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/ripple.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "ripple",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/ripple.tsx",
+      "content": "import React, { type ComponentPropsWithoutRef, type CSSProperties } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface RippleProps extends ComponentPropsWithoutRef<\"div\"> {\n   mainCircleSize?: number\n   mainCircleOpacity?: number\n   numCircles?: number\n}\n\nexport const Ripple = React.memo(function Ripple({\n   mainCircleSize = 210,\n   mainCircleOpacity = 0.24,\n   numCircles = 8,\n   className,\n   ...props\n}: RippleProps) {\n   return (\n      <div\n         className={cn(\n            \"pointer-events-none absolute inset-0 select-none [mask-image:linear-gradient(to_bottom,white,transparent)]\",\n            className,\n         )}\n         {...props}\n      >\n         {Array.from({ length: numCircles }, (_, i) => {\n            const size = mainCircleSize + i * 70\n            const opacity = mainCircleOpacity - i * 0.03\n            const animationDelay = `${i * 0.06}s`\n            const borderStyle = i === numCircles - 1 ? \"dashed\" : \"solid\"\n            const borderOpacity = 5 + i * 5\n\n            return (\n               <div\n                  key={i}\n                  className={`[--i: absolute animate-ripple rounded-full border bg-foreground/25 shadow-xl${i}]`}\n                  style={\n                     {\n                        width: `${size}px`,\n                        height: `${size}px`,\n                        opacity,\n                        animationDelay,\n                        borderStyle,\n                        borderWidth: \"1px\",\n                        borderColor: `hsl(var(--foreground), ${borderOpacity / 100})`,\n                        top: \"50%\",\n                        left: \"50%\",\n                        transform: \"translate(-50%, -50%) scale(1)\",\n                     } as CSSProperties\n                  }\n               />\n            )\n         })}\n      </div>\n   )\n})\n\nRipple.displayName = \"Ripple\"\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "ripple": "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite"
+          },
+          "keyframes": {
+            "ripple": {
+              "0%, 100%": {
+                "transform": "translate(-50%, -50%) scale(1)"
+              },
+              "50%": {
+                "transform": "translate(-50%, -50%) scale(0.9)"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/safari-demo-2.json b/apps/web/public/v0/styles/default/safari-demo-2.json
new file mode 100644
index 00000000..bad9a436
--- /dev/null
+++ b/apps/web/public/v0/styles/default/safari-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "safari-demo-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/safari-demo-2.tsx",
+      "content": "import Safari from \"@/components/ui/safari\"\n\nexport default function SafariDemo() {\n   return (\n      <div className=\"relative\">\n         <Safari\n            url=\"nyxbui.design\"\n            className=\"size-full\"\n            src=\"https://via.placeholder.com/1200x750\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/safari-demo.json b/apps/web/public/v0/styles/default/safari-demo.json
new file mode 100644
index 00000000..a698e6ad
--- /dev/null
+++ b/apps/web/public/v0/styles/default/safari-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "safari-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/safari-demo.tsx",
+      "content": "import Safari from \"@/components/ui/safari\"\n\nexport default function SafariDemo() {\n   return (\n      <div className=\"relative\">\n         <Safari url=\"nyxbui.design\" className=\"size-full\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/safari.json b/apps/web/public/v0/styles/default/safari.json
new file mode 100644
index 00000000..866011a6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/safari.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "safari",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/safari.tsx",
+      "content": "import type { SVGProps } from \"react\"\n\nexport interface SafariProps extends SVGProps<SVGSVGElement> {\n   url?: string\n   src?: string\n   width?: number\n   height?: number\n}\n\nexport default function Safari({\n   src,\n   url,\n   width = 1203,\n   height = 753,\n   ...props\n}: SafariProps) {\n   return (\n      <svg\n         width={width}\n         height={height}\n         viewBox={`0 0 ${width} ${height}`}\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <g clipPath=\"url(#path0)\">\n            <path\n               d=\"M0 52H1202V741C1202 747.627 1196.63 753 1190 753H12C5.37258 753 0 747.627 0 741V52Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               fillRule=\"evenodd\"\n               clipRule=\"evenodd\"\n               d=\"M0 12C0 5.37258 5.37258 0 12 0H1190C1196.63 0 1202 5.37258 1202 12V52H0L0 12Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               fillRule=\"evenodd\"\n               clipRule=\"evenodd\"\n               d=\"M1.06738 12C1.06738 5.92487 5.99225 1 12.0674 1H1189.93C1196.01 1 1200.93 5.92487 1200.93 12V51H1.06738V12Z\"\n               className=\"fill-white dark:fill-[#262626]\"\n            />\n            <circle\n               cx=\"27\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <circle\n               cx=\"47\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <circle\n               cx=\"67\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               d=\"M286 17C286 13.6863 288.686 11 292 11H946C949.314 11 952 13.6863 952 17V35C952 38.3137 949.314 41 946 41H292C288.686 41 286 38.3137 286 35V17Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M566.269 32.0852H572.426C573.277 32.0852 573.696 31.6663 573.696 30.7395V25.9851C573.696 25.1472 573.353 24.7219 572.642 24.6521V23.0842C572.642 20.6721 571.036 19.5105 569.348 19.5105C567.659 19.5105 566.053 20.6721 566.053 23.0842V24.6711C565.393 24.7727 565 25.1917 565 25.9851V30.7395C565 31.6663 565.418 32.0852 566.269 32.0852ZM567.272 22.97C567.272 21.491 568.211 20.6785 569.348 20.6785C570.478 20.6785 571.423 21.491 571.423 22.97V24.6394L567.272 24.6458V22.97Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <text\n                  x=\"580\"\n                  y=\"30\"\n                  fill=\"#A3A3A3\"\n                  fontSize=\"12\"\n                  fontFamily=\"Arial, sans-serif\"\n               >\n                  {url}\n               </text>\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M265.5 33.8984C265.641 33.8984 265.852 33.8516 266.047 33.7422C270.547 31.2969 272.109 30.1641 272.109 27.3203V21.4219C272.109 20.4844 271.742 20.1484 270.961 19.8125C270.094 19.4453 267.18 18.4297 266.328 18.1406C266.07 18.0547 265.766 18 265.5 18C265.234 18 264.93 18.0703 264.672 18.1406C263.82 18.3828 260.906 19.4531 260.039 19.8125C259.258 20.1406 258.891 20.4844 258.891 21.4219V27.3203C258.891 30.1641 260.461 31.2812 264.945 33.7422C265.148 33.8516 265.359 33.8984 265.5 33.8984ZM265.922 19.5781C266.945 19.9766 269.172 20.7656 270.344 21.1875C270.562 21.2656 270.617 21.3828 270.617 21.6641V27.0234C270.617 29.3125 269.469 29.9375 265.945 32.0625C265.727 32.1875 265.617 32.2344 265.508 32.2344V19.4844C265.617 19.4844 265.734 19.5156 265.922 19.5781Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M936.273 24.9766C936.5 24.9766 936.68 24.9062 936.82 24.7578L940.023 21.5312C940.195 21.3594 940.273 21.1719 940.273 20.9531C940.273 20.7422 940.188 20.5391 940.023 20.3828L936.82 17.125C936.68 16.9688 936.5 16.8906 936.273 16.8906C935.852 16.8906 935.516 17.2422 935.516 17.6719C935.516 17.8828 935.594 18.0547 935.727 18.2031L937.594 20.0312C937.227 19.9766 936.852 19.9453 936.477 19.9453C932.609 19.9453 929.516 23.0391 929.516 26.9141C929.516 30.7891 932.633 33.9062 936.5 33.9062C940.375 33.9062 943.484 30.7891 943.484 26.9141C943.484 26.4453 943.156 26.1094 942.688 26.1094C942.234 26.1094 941.93 26.4453 941.93 26.9141C941.93 29.9297 939.516 32.3516 936.5 32.3516C933.492 32.3516 931.07 29.9297 931.07 26.9141C931.07 23.875 933.469 21.4688 936.477 21.4688C936.984 21.4688 937.453 21.5078 937.867 21.5781L935.734 23.6875C935.594 23.8281 935.516 24 935.516 24.2109C935.516 24.6406 935.852 24.9766 936.273 24.9766Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1134 33.0156C1134.49 33.0156 1134.89 32.6094 1134.89 32.1484V27.2578H1139.66C1140.13 27.2578 1140.54 26.8594 1140.54 26.3672C1140.54 25.8828 1140.13 25.4766 1139.66 25.4766H1134.89V20.5859C1134.89 20.1172 1134.49 19.7188 1134 19.7188C1133.52 19.7188 1133.11 20.1172 1133.11 20.5859V25.4766H1128.34C1127.88 25.4766 1127.46 25.8828 1127.46 26.3672C1127.46 26.8594 1127.88 27.2578 1128.34 27.2578H1133.11V32.1484C1133.11 32.6094 1133.52 33.0156 1134 33.0156Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1161.8 31.0703H1163.23V32.375C1163.23 34.0547 1164.12 34.9219 1165.81 34.9219H1174.2C1175.89 34.9219 1176.77 34.0547 1176.77 32.3828V24.0469C1176.77 22.375 1175.89 21.5 1174.2 21.5H1172.77V20.2578C1172.77 18.5859 1171.88 17.7109 1170.19 17.7109H1161.8C1160.1 17.7109 1159.23 18.5781 1159.23 20.2578V28.5234C1159.23 30.1953 1160.1 31.0703 1161.8 31.0703ZM1161.9 29.5078C1161.18 29.5078 1160.78 29.1328 1160.78 28.3828V20.3984C1160.78 19.6406 1161.18 19.2656 1161.9 19.2656H1170.09C1170.8 19.2656 1171.2 19.6406 1171.2 20.3984V21.5H1165.81C1164.12 21.5 1163.23 22.375 1163.23 24.0469V29.5078H1161.9ZM1165.91 33.3672C1165.19 33.3672 1164.8 32.9922 1164.8 32.2422V24.1875C1164.8 23.4297 1165.19 23.0625 1165.91 23.0625H1174.1C1174.81 23.0625 1175.21 23.4297 1175.21 24.1875V32.2422C1175.21 32.9922 1174.81 33.3672 1174.1 33.3672H1165.91Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1099.51 28.4141C1099.91 28.4141 1100.24 28.0859 1100.24 27.6953V19.8359L1100.18 18.6797L1100.66 19.25L1101.75 20.4141C1101.88 20.5547 1102.06 20.625 1102.24 20.625C1102.6 20.625 1102.9 20.3672 1102.9 20C1102.9 19.8047 1102.82 19.6641 1102.69 19.5312L1100.06 17.0078C1099.88 16.8203 1099.7 16.7578 1099.51 16.7578C1099.32 16.7578 1099.14 16.8203 1098.95 17.0078L1096.33 19.5312C1096.2 19.6641 1096.12 19.8047 1096.12 20C1096.12 20.3672 1096.41 20.625 1096.77 20.625C1096.95 20.625 1097.14 20.5547 1097.27 20.4141L1098.35 19.25L1098.84 18.6719L1098.78 19.8359V27.6953C1098.78 28.0859 1099.11 28.4141 1099.51 28.4141ZM1095 34.6562H1104C1105.7 34.6562 1106.57 33.7812 1106.57 32.1094V24.4297C1106.57 22.7578 1105.7 21.8828 1104 21.8828H1101.89V23.4375H1103.9C1104.61 23.4375 1105.02 23.8125 1105.02 24.5625V31.9688C1105.02 32.7188 1104.61 33.0938 1103.9 33.0938H1095.1C1094.38 33.0938 1093.98 32.7188 1093.98 31.9688V24.5625C1093.98 23.8125 1094.38 23.4375 1095.1 23.4375H1097.13V21.8828H1095C1093.31 21.8828 1092.43 22.75 1092.43 24.4297V32.1094C1092.43 33.7812 1093.31 34.6562 1095 34.6562Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M99.5703 33.6016H112.938C114.633 33.6016 115.516 32.7266 115.516 31.0547V21.5469C115.516 19.875 114.633 19 112.938 19H99.5703C97.8828 19 97 19.8672 97 21.5469V31.0547C97 32.7266 97.8828 33.6016 99.5703 33.6016ZM99.6719 32.0469C98.9531 32.0469 98.5547 31.6719 98.5547 30.9141V21.6875C98.5547 20.9297 98.9531 20.5547 99.6719 20.5547H103.234V32.0469H99.6719ZM112.836 20.5547C113.555 20.5547 113.953 20.9297 113.953 21.6875V30.9141C113.953 31.6719 113.555 32.0469 112.836 32.0469H104.711V20.5547H112.836ZM101.703 23.4141C101.984 23.4141 102.219 23.1719 102.219 22.9062C102.219 22.6406 101.984 22.4062 101.703 22.4062H100.102C99.8203 22.4062 99.5859 22.6406 99.5859 22.9062C99.5859 23.1719 99.8203 23.4141 100.102 23.4141H101.703ZM101.703 25.5156C101.984 25.5156 102.219 25.2812 102.219 25.0078C102.219 24.7422 101.984 24.5078 101.703 24.5078H100.102C99.8203 24.5078 99.5859 24.7422 99.5859 25.0078C99.5859 25.2812 99.8203 25.5156 100.102 25.5156H101.703ZM101.703 27.6094C101.984 27.6094 102.219 27.3828 102.219 27.1094C102.219 26.8438 101.984 26.6172 101.703 26.6172H100.102C99.8203 26.6172 99.5859 26.8438 99.5859 27.1094C99.5859 27.3828 99.8203 27.6094 100.102 27.6094H101.703Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M143.914 32.5938C144.094 32.7656 144.312 32.8594 144.562 32.8594C145.086 32.8594 145.492 32.4531 145.492 31.9375C145.492 31.6797 145.391 31.4453 145.211 31.2656L139.742 25.9219L145.211 20.5938C145.391 20.4141 145.492 20.1719 145.492 19.9219C145.492 19.4062 145.086 19 144.562 19C144.312 19 144.094 19.0938 143.922 19.2656L137.844 25.2031C137.625 25.4062 137.516 25.6562 137.516 25.9297C137.516 26.2031 137.625 26.4375 137.836 26.6484L143.914 32.5938Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M168.422 32.8594C168.68 32.8594 168.891 32.7656 169.07 32.5938L175.148 26.6562C175.359 26.4375 175.469 26.2109 175.469 25.9297C175.469 25.6562 175.367 25.4141 175.148 25.2109L169.07 19.2656C168.891 19.0938 168.68 19 168.422 19C167.898 19 167.492 19.4062 167.492 19.9219C167.492 20.1719 167.602 20.4141 167.773 20.5938L173.25 25.9375L167.773 31.2656C167.594 31.4531 167.492 31.6797 167.492 31.9375C167.492 32.4531 167.898 32.8594 168.422 32.8594Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <image\n               href={src}\n               width=\"1200\"\n               height=\"700\"\n               x=\"1\"\n               y=\"52\"\n               preserveAspectRatio=\"xMidYMid slice\"\n               clipPath=\"url(#roundedBottom)\"\n            />\n         </g>\n         <defs>\n            <clipPath id=\"path0\">\n               <rect width={width} height={height} fill=\"white\" />\n            </clipPath>\n            <clipPath id=\"roundedBottom\">\n               <path\n                  d=\"M1 52H1201V741C1201 747.075 1196.08 752 1190 752H12C5.92486 752 1 747.075 1 741V52Z\"\n                  fill=\"white\"\n               />\n            </clipPath>\n         </defs>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/scratch-to-reveal-demo.json b/apps/web/public/v0/styles/default/scratch-to-reveal-demo.json
new file mode 100644
index 00000000..03b25564
--- /dev/null
+++ b/apps/web/public/v0/styles/default/scratch-to-reveal-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scratch-to-reveal-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/scratch-to-reveal-demo.tsx",
+      "content": "import React from \"react\"\nimport ScratchToReveal from \"@/components/ui/scratch-to-reveal\"\n\nfunction ScratchToRevealDemo() {\n   const handleComplete = () => {\n      // Do Something\n   }\n\n   return (\n      <div>\n         <ScratchToReveal\n            width={250}\n            height={250}\n            minScratchPercentage={70}\n            className=\"flex items-center justify-center overflow-hidden rounded-2xl border-2 bg-gray-100\"\n            onComplete={handleComplete}\n         >\n            <p className=\"text-9xl\">😎</p>\n         </ScratchToReveal>\n      </div>\n   )\n}\n\nexport default ScratchToRevealDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/scratch-to-reveal.json b/apps/web/public/v0/styles/default/scratch-to-reveal.json
new file mode 100644
index 00000000..7ad2f0bf
--- /dev/null
+++ b/apps/web/public/v0/styles/default/scratch-to-reveal.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scratch-to-reveal",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/scratch-to-reveal.tsx",
+      "content": "\"use client\"\nimport { motion, useAnimation } from \"framer-motion\"\nimport type React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface ScratchToRevealProps {\n   children: React.ReactNode\n   width: number\n   height: number\n   minScratchPercentage?: number // Minimum percentage of scratched area to be considered as completed (Value between 0 and 100)\n   className?: string\n   onComplete?: () => void\n}\n\nconst ScratchToReveal: React.FC<ScratchToRevealProps> = ({\n   width,\n   height,\n   minScratchPercentage = 50,\n   onComplete,\n   children,\n   className,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const [isScratching, setIsScratching] = useState(false)\n   const [isComplete, setIsComplete] = useState(false) // New state to track completion\n\n   const controls = useAnimation()\n\n   useEffect(() => {\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext(\"2d\")\n      if (canvas && ctx) {\n         ctx.fillStyle = \"#ccc\"\n         ctx.fillRect(0, 0, canvas.width, canvas.height)\n         // Optionally add a background image or gradient\n         const gradient = ctx.createLinearGradient(\n            0,\n            0,\n            canvas.width,\n            canvas.height,\n         )\n         gradient.addColorStop(0, \"#A97CF8\")\n         gradient.addColorStop(0.5, \"#F38CB8\")\n         gradient.addColorStop(1, \"#FDCC92\")\n         ctx.fillStyle = gradient\n         ctx.fillRect(0, 0, canvas.width, canvas.height)\n      }\n   }, [])\n\n   useEffect(() => {\n      const handleDocumentMouseMove = (event: MouseEvent) => {\n         if (!isScratching) return\n         scratch(event.clientX, event.clientY)\n      }\n\n      const handleDocumentTouchMove = (event: TouchEvent) => {\n         if (!isScratching) return\n         const touch = event.touches[0]\n         scratch(touch.clientX, touch.clientY)\n      }\n\n      const handleDocumentMouseUp = () => {\n         setIsScratching(false)\n         checkCompletion()\n      }\n\n      const handleDocumentTouchEnd = () => {\n         setIsScratching(false)\n         checkCompletion()\n      }\n\n      document.addEventListener(\"mousedown\", handleDocumentMouseMove)\n      document.addEventListener(\"mousemove\", handleDocumentMouseMove)\n      document.addEventListener(\"touchstart\", handleDocumentTouchMove)\n      document.addEventListener(\"touchmove\", handleDocumentTouchMove)\n      document.addEventListener(\"mouseup\", handleDocumentMouseUp)\n      document.addEventListener(\"touchend\", handleDocumentTouchEnd)\n      document.addEventListener(\"touchcancel\", handleDocumentTouchEnd)\n\n      return () => {\n         document.removeEventListener(\"mousedown\", handleDocumentMouseMove)\n         document.removeEventListener(\"mousemove\", handleDocumentMouseMove)\n         document.removeEventListener(\"touchstart\", handleDocumentTouchMove)\n         document.removeEventListener(\"touchmove\", handleDocumentTouchMove)\n         document.removeEventListener(\"mouseup\", handleDocumentMouseUp)\n         document.removeEventListener(\"touchend\", handleDocumentTouchEnd)\n         document.removeEventListener(\"touchcancel\", handleDocumentTouchEnd)\n      }\n   }, [isScratching])\n\n   const handleMouseDown = () => setIsScratching(true)\n\n   const handleTouchStart = () => setIsScratching(true)\n\n   const scratch = (clientX: number, clientY: number) => {\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext(\"2d\")\n      if (canvas && ctx) {\n         const rect = canvas.getBoundingClientRect()\n         const x = clientX - rect.left + 16 // offset to position the scratched circle with cursor\n         const y = clientY - rect.top + 16\n         ctx.globalCompositeOperation = \"destination-out\"\n         ctx.beginPath()\n         ctx.arc(x, y, 30, 0, Math.PI * 2)\n         ctx.fill()\n      }\n   }\n\n   const checkCompletion = () => {\n      if (isComplete) return // Check if already completed\n\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext(\"2d\")\n      if (canvas && ctx) {\n         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n         const pixels = imageData.data\n         const totalPixels = pixels.length / 4\n         let clearPixels = 0\n\n         for (let i = 3; i < pixels.length; i += 4) {\n            if (pixels[i] === 0) clearPixels++\n         }\n\n         const percentage = (clearPixels / totalPixels) * 100\n\n         if (percentage >= minScratchPercentage) {\n            setIsComplete(true) // Set complete flag\n            ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvas to reveal everything\n            startAnimation()\n            if (onComplete) onComplete()\n         }\n      }\n   }\n\n   const startAnimation = () => {\n      controls.start({\n         scale: [1, 1.5, 1],\n         rotate: [0, 10, -10, 10, -10, 0],\n         transition: { duration: 0.5 },\n      })\n   }\n\n   return (\n      <motion.div\n         className={cn(\"relative select-none\", className)}\n         style={{\n            width,\n            height,\n            cursor:\n               \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto\",\n         }}\n         animate={controls}\n      >\n         <canvas\n            ref={canvasRef}\n            width={width}\n            height={height}\n            className=\"absolute left-0 top-0\"\n            onMouseDown={handleMouseDown}\n            onTouchStart={handleTouchStart}\n         ></canvas>\n         {children}\n      </motion.div>\n   )\n}\n\nexport default ScratchToReveal\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/script-copy-btn-demo.json b/apps/web/public/v0/styles/default/script-copy-btn-demo.json
new file mode 100644
index 00000000..cabdbf0a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/script-copy-btn-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "script-copy-btn-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/script-copy-btn-demo.tsx",
+      "content": "import { ScriptCopyBtn } from \"@/components/ui/script-copy-btn\"\n\nexport default function ScriptCopyBtnDemo() {\n   const customCommandMap = {\n      npm: \"npm run nyxb add button\",\n      yarn: \"yarn nyxb add button\",\n      pnpm: \"pnpm dlx nyxb@latest add button\",\n      bun: \"bun x nyxb@latest add button\",\n   }\n   return (\n      <ScriptCopyBtn\n         showMultiplePackageOptions={true}\n         codeLanguage=\"shell\"\n         lightTheme=\"nord\"\n         darkTheme=\"vitesse-dark\"\n         commandMap={customCommandMap}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/script-copy-btn.json b/apps/web/public/v0/styles/default/script-copy-btn.json
new file mode 100644
index 00000000..f1bf5ff9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/script-copy-btn.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "script-copy-btn",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion",
+    "shiki",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "ui/script-copy-btn.tsx",
+      "content": "\"use client\"\n\nimport { Check, Copy } from \"lucide-react\"\nimport { motion } from \"motion/react\"\nimport { useTheme } from \"next-themes\"\nimport { type HTMLAttributes, useEffect, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ninterface ScriptCopyBtnProps extends HTMLAttributes<HTMLDivElement> {\n   showMultiplePackageOptions?: boolean\n   codeLanguage: string\n   lightTheme: string\n   darkTheme: string\n   commandMap: Record<string, string>\n   className?: string\n}\n\nexport function ScriptCopyBtn({\n   showMultiplePackageOptions = true,\n   codeLanguage,\n   lightTheme,\n   darkTheme,\n   commandMap,\n   className,\n}: ScriptCopyBtnProps) {\n   const packageManagers = Object.keys(commandMap)\n   const [packageManager, setPackageManager] = useState(packageManagers[0])\n   const [copied, setCopied] = useState(false)\n   const [highlightedCode, setHighlightedCode] = useState(\"\")\n   const { theme } = useTheme()\n   const command = commandMap[packageManager]\n\n   useEffect(() => {\n      async function loadHighlightedCode() {\n         try {\n            const { codeToHtml } = await import(\"shiki\")\n            const highlighted = await codeToHtml(command, {\n               lang: codeLanguage,\n               themes: {\n                  light: lightTheme,\n                  dark: darkTheme,\n               },\n               defaultColor: theme === \"dark\" ? \"dark\" : \"light\",\n            })\n            setHighlightedCode(highlighted)\n         } catch (error) {\n            console.error(\"Error highlighting code:\", error)\n            setHighlightedCode(`<pre>${command}</pre>`)\n         }\n      }\n\n      loadHighlightedCode()\n   }, [command, theme, codeLanguage, lightTheme, darkTheme])\n\n   const copyToClipboard = () => {\n      navigator.clipboard.writeText(command)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n   }\n\n   return (\n      <div\n         className={cn(\n            \"mx-auto flex max-w-md items-center justify-center\",\n            className,\n         )}\n      >\n         <div className=\"w-full space-y-2\">\n            <div className=\"mb-2 flex items-center justify-between\">\n               {showMultiplePackageOptions && (\n                  <div className=\"relative\">\n                     <div className=\"inline-flex overflow-hidden rounded-md border border-border text-xs\">\n                        {packageManagers.map((pm, index) => (\n                           <div key={pm} className=\"flex items-center\">\n                              {index > 0 && (\n                                 <div\n                                    className=\"h-4 w-px bg-border\"\n                                    aria-hidden=\"true\"\n                                 />\n                              )}\n                              <Button\n                                 variant=\"ghost\"\n                                 size=\"sm\"\n                                 className={`relative rounded-none bg-background px-2 py-1 hover:bg-background ${\n                                    packageManager === pm\n                                       ? \"text-primary\"\n                                       : \"text-muted-foreground\"\n                                 }`}\n                                 onClick={() => setPackageManager(pm)}\n                              >\n                                 {pm}\n                                 {packageManager === pm && (\n                                    <motion.div\n                                       className=\"absolute inset-x-0 bottom-[1px] mx-auto h-0.5 w-[90%] bg-primary\"\n                                       layoutId=\"activeTab\"\n                                       initial={false}\n                                       transition={{\n                                          type: \"spring\",\n                                          stiffness: 500,\n                                          damping: 30,\n                                       }}\n                                    />\n                                 )}\n                              </Button>\n                           </div>\n                        ))}\n                     </div>\n                  </div>\n               )}\n            </div>\n            <div className=\"relative flex items-center\">\n               <div className=\"min-w-[300px] grow font-mono\">\n                  {highlightedCode ? (\n                     <div\n                        className={`[&>pre]:overflow-x-auto [&>pre]:rounded-md [&>pre]:p-2 [&>pre]:px-4 [&>pre]:font-mono ${\n                           theme === \"dark\" ? \"dark\" : \"light\"\n                        }`}\n                        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n                     />\n                  ) : (\n                     <pre className=\"rounded-md border border-border bg-white p-2 px-4 font-mono dark:bg-black\">\n                        {command}\n                     </pre>\n                  )}\n               </div>\n               <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  className=\"relative ml-2 rounded-md\"\n                  onClick={copyToClipboard}\n                  aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n               >\n                  <span className=\"sr-only\">{copied ? \"Copied\" : \"Copy\"}</span>\n                  <Copy\n                     className={`h-4 w-4 transition-all duration-300 ${\n                        copied ? \"scale-0\" : \"scale-100\"\n                     }`}\n                  />\n                  <Check\n                     className={`absolute inset-0 m-auto h-4 w-4 transition-all duration-300 ${\n                        copied ? \"scale-100\" : \"scale-0\"\n                     }`}\n                  />\n               </Button>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/scroll-area-demo.json b/apps/web/public/v0/styles/default/scroll-area-demo.json
new file mode 100644
index 00000000..61ad8ec6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/scroll-area-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-area-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "examples/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n   (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n\nexport default function ScrollAreaDemo() {\n   return (\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n         <div className=\"p-4\">\n            <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n            {tags.map((tag) => (\n               <>\n                  <div key={tag} className=\"text-sm\">\n                     {tag}\n                  </div>\n                  <Separator className=\"my-2\" />\n               </>\n            ))}\n         </div>\n      </ScrollArea>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/scroll-area-horizontal-demo.json b/apps/web/public/v0/styles/default/scroll-area-horizontal-demo.json
new file mode 100644
index 00000000..0d81727d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/scroll-area-horizontal-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-area-horizontal-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "examples/scroll-area-horizontal-demo.tsx",
+      "content": "import Image from \"next/image\"\nimport * as React from \"react\"\n\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\"\n\nexport interface Artwork {\n   artist: string\n   art: string\n}\n\nexport const works: Artwork[] = [\n   {\n      artist: \"Ornella Binni\",\n      art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n   },\n   {\n      artist: \"Tom Byrom\",\n      art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n   },\n   {\n      artist: \"Vladimir Malyavko\",\n      art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n   },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n   return (\n      <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n         <div className=\"flex w-max space-x-4 p-4\">\n            {works.map((artwork) => (\n               <figure key={artwork.artist} className=\"shrink-0\">\n                  <div className=\"overflow-hidden rounded-md\">\n                     <Image\n                        src={artwork.art}\n                        alt={`Photo by ${artwork.artist}`}\n                        className=\"aspect-[3/4] size-fit object-cover\"\n                        width={300}\n                        height={400}\n                     />\n                  </div>\n                  <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                     Photo by{\" \"}\n                     <span className=\"text-foreground font-semibold\">\n                        {artwork.artist}\n                     </span>\n                  </figcaption>\n               </figure>\n            ))}\n         </div>\n         <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/scroll-area.json b/apps/web/public/v0/styles/default/scroll-area.json
new file mode 100644
index 00000000..a1c4e4e7
--- /dev/null
+++ b/apps/web/public/v0/styles/default/scroll-area.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-area",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-scroll-area"
+  ],
+  "files": [
+    {
+      "path": "ui/scroll-area.tsx",
+      "content": "\"use client\"\n\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n   React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={cn(\"relative overflow-hidden\", className)}\n      {...props}\n   >\n      <ScrollAreaPrimitive.Viewport className=\"size-full rounded-[inherit]\">\n         {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n   </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n   React.ComponentPropsWithoutRef<\n      typeof ScrollAreaPrimitive.ScrollAreaScrollbar\n   >\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n   <ScrollAreaPrimitive.ScrollAreaScrollbar\n      ref={ref}\n      orientation={orientation}\n      className={cn(\n         \"flex touch-none select-none transition-colors\",\n         orientation === \"vertical\" &&\n            \"h-full w-2.5 border-l border-l-transparent p-px\",\n         orientation === \"horizontal\" &&\n            \"h-2.5 flex-col border-t border-t-transparent p-px\",\n         className,\n      )}\n      {...props}\n   >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-border relative flex-1 rounded-full\" />\n   </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/scroll-based-velocity-demo.json b/apps/web/public/v0/styles/default/scroll-based-velocity-demo.json
new file mode 100644
index 00000000..4aa3898f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/scroll-based-velocity-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-based-velocity-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/scroll-based-velocity-demo.tsx",
+      "content": "import { VelocityScroll } from \"@/components/ui/scroll-based-velocity\"\n\nexport default function ScrollBasedVelocityDemo() {\n   return (\n      <VelocityScroll\n         text=\"Velocity Scroll\"\n         default_velocity={5}\n         className=\"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/scroll-based-velocity.json b/apps/web/public/v0/styles/default/scroll-based-velocity.json
new file mode 100644
index 00000000..8be950ff
--- /dev/null
+++ b/apps/web/public/v0/styles/default/scroll-based-velocity.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-based-velocity",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/scroll-based-velocity.tsx",
+      "content": "\"use client\"\n\nimport { wrap } from \"@motionone/utils\"\nimport {\n   motion,\n   useAnimationFrame,\n   useMotionValue,\n   useScroll,\n   useSpring,\n   useTransform,\n   useVelocity,\n} from \"framer-motion\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface VelocityScrollProps {\n   text: string\n   default_velocity?: number\n   className?: string\n}\n\ninterface ParallaxProps {\n   children: string\n   baseVelocity: number\n   className?: string\n}\n\nexport function VelocityScroll({\n   text,\n   default_velocity = 5,\n   className,\n}: VelocityScrollProps) {\n   function ParallaxText({\n      children,\n      baseVelocity = 100,\n      className,\n   }: ParallaxProps) {\n      const baseX = useMotionValue(0)\n      const { scrollY } = useScroll()\n      const scrollVelocity = useVelocity(scrollY)\n      const smoothVelocity = useSpring(scrollVelocity, {\n         damping: 50,\n         stiffness: 400,\n      })\n\n      const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {\n         clamp: false,\n      })\n\n      const [repetitions, setRepetitions] = useState(1)\n      const containerRef = useRef<HTMLDivElement>(null)\n      const textRef = useRef<HTMLSpanElement>(null)\n\n      useEffect(() => {\n         const calculateRepetitions = () => {\n            if (containerRef.current && textRef.current) {\n               const containerWidth = containerRef.current.offsetWidth\n               const textWidth = textRef.current.offsetWidth\n               const newRepetitions = Math.ceil(containerWidth / textWidth) + 2\n               setRepetitions(newRepetitions)\n            }\n         }\n\n         calculateRepetitions()\n\n         window.addEventListener(\"resize\", calculateRepetitions)\n         return () => window.removeEventListener(\"resize\", calculateRepetitions)\n      }, [children])\n\n      const x = useTransform(baseX, (v) => `${wrap(-100 / repetitions, 0, v)}%`)\n\n      const directionFactor = React.useRef<number>(1)\n      useAnimationFrame((t, delta) => {\n         let moveBy = directionFactor.current * baseVelocity * (delta / 1000)\n\n         if (velocityFactor.get() < 0) directionFactor.current = -1\n         else if (velocityFactor.get() > 0) directionFactor.current = 1\n\n         moveBy += directionFactor.current * moveBy * velocityFactor.get()\n\n         baseX.set(baseX.get() + moveBy)\n      })\n\n      return (\n         <div\n            className=\"w-full overflow-hidden whitespace-nowrap\"\n            ref={containerRef}\n         >\n            <motion.div className={cn(\"inline-block\", className)} style={{ x }}>\n               {Array.from({ length: repetitions }).map((_, i) => (\n                  <span key={i} ref={i === 0 ? textRef : null}>\n                     {children}{\" \"}\n                  </span>\n               ))}\n            </motion.div>\n         </div>\n      )\n   }\n\n   return (\n      <section className=\"relative w-full\">\n         <ParallaxText baseVelocity={default_velocity} className={className}>\n            {text}\n         </ParallaxText>\n         <ParallaxText baseVelocity={-default_velocity} className={className}>\n            {text}\n         </ParallaxText>\n      </section>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/scroll-progress-demo.json b/apps/web/public/v0/styles/default/scroll-progress-demo.json
new file mode 100644
index 00000000..c628ecc5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/scroll-progress-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-progress-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/scroll-progress-demo.tsx",
+      "content": "import ScrollProgress from \"@/components/ui/scroll-progress\"\n\nconst dummyContent = Array.from({ length: 10 }, (_, i) => (\n   <p key={i}>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam\n      lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra\n      nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam\n      eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue\n      enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu\n      vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur\n      adipiscing elit.\n   </p>\n))\n\nfunction ScrollProgressDemo() {\n   return (\n      <div>\n         <ScrollProgress className=\"top-[65px]\" />\n         <strong>\n            Note: The scroll progress is shown below the navbar of the page.\n         </strong>\n         {dummyContent}\n      </div>\n   )\n}\n\nexport default ScrollProgressDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/scroll-progress.json b/apps/web/public/v0/styles/default/scroll-progress.json
new file mode 100644
index 00000000..4d35e070
--- /dev/null
+++ b/apps/web/public/v0/styles/default/scroll-progress.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-progress",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/scroll-progress.tsx",
+      "content": "import { motion, useScroll, useSpring } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface ScrollProgressProps {\n   className?: string\n}\n\nexport default function ScrollProgress({ className }: ScrollProgressProps) {\n   const { scrollYProgress } = useScroll()\n\n   const scaleX = useSpring(scrollYProgress, {\n      stiffness: 200,\n      damping: 50,\n      restDelta: 0.001,\n   })\n\n   return (\n      <motion.div\n         className={cn(\n            \"fixed inset-x-0 top-0 z-[1000] h-1 origin-left bg-gradient-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]\",\n            className,\n         )}\n         style={{\n            scaleX,\n         }}\n      />\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/select-demo.json b/apps/web/public/v0/styles/default/select-demo.json
new file mode 100644
index 00000000..9edbba5a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/select-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "select-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function SelectDemo() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[180px]\">\n            <SelectValue placeholder=\"Select a fruit\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>Fruits</SelectLabel>\n               <SelectItem value=\"apple\">Apple</SelectItem>\n               <SelectItem value=\"banana\">Banana</SelectItem>\n               <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n               <SelectItem value=\"grapes\">Grapes</SelectItem>\n               <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/select-form.json b/apps/web/public/v0/styles/default/select-form.json
new file mode 100644
index 00000000..27bc2ae8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/select-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "select-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport Link from \"next/link\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   email: z\n      .string({\n         required_error: \"Please select an email to display.\",\n      })\n      .email(),\n})\n\nexport default function SelectForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"email\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Email</FormLabel>\n                     <Select\n                        onValueChange={field.onChange}\n                        defaultValue={field.value}\n                     >\n                        <FormControl>\n                           <SelectTrigger>\n                              <SelectValue placeholder=\"Select a verified email to display\" />\n                           </SelectTrigger>\n                        </FormControl>\n                        <SelectContent>\n                           <SelectItem value=\"m@example.com\">\n                              m@example.com\n                           </SelectItem>\n                           <SelectItem value=\"m@google.com\">\n                              m@google.com\n                           </SelectItem>\n                           <SelectItem value=\"m@support.com\">\n                              m@support.com\n                           </SelectItem>\n                        </SelectContent>\n                     </Select>\n                     <FormDescription>\n                        You can manage email addresses in your{\" \"}\n                        <Link href=\"/examples/forms\">email settings</Link>.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/select-scrollable.json b/apps/web/public/v0/styles/default/select-scrollable.json
new file mode 100644
index 00000000..4b53e369
--- /dev/null
+++ b/apps/web/public/v0/styles/default/select-scrollable.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "select-scrollable",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-scrollable.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function SelectScrollable() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[280px]\">\n            <SelectValue placeholder=\"Select a timezone\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>North America</SelectLabel>\n               <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n               <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n               <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n               <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n               <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n               <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Europe & Africa</SelectLabel>\n               <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n               <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n               <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n               <SelectItem value=\"west\">\n                  Western European Summer Time (WEST)\n               </SelectItem>\n               <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n               <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Asia</SelectLabel>\n               <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n               <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n               <SelectItem value=\"cst_china\">\n                  China Standard Time (CST)\n               </SelectItem>\n               <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n               <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n               <SelectItem value=\"ist_indonesia\">\n                  Indonesia Central Standard Time (WITA)\n               </SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Australia & Pacific</SelectLabel>\n               <SelectItem value=\"awst\">\n                  Australian Western Standard Time (AWST)\n               </SelectItem>\n               <SelectItem value=\"acst\">\n                  Australian Central Standard Time (ACST)\n               </SelectItem>\n               <SelectItem value=\"aest\">\n                  Australian Eastern Standard Time (AEST)\n               </SelectItem>\n               <SelectItem value=\"nzst\">\n                  New Zealand Standard Time (NZST)\n               </SelectItem>\n               <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>South America</SelectLabel>\n               <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n               <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n               <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n               <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/select.json b/apps/web/public/v0/styles/default/select.json
new file mode 100644
index 00000000..218d75ad
--- /dev/null
+++ b/apps/web/public/v0/styles/default/select.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "select",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-select"
+  ],
+  "files": [
+    {
+      "path": "ui/select.tsx",
+      "content": "\"use client\"\n\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <SelectPrimitive.Trigger\n      ref={ref}\n      className={cn(\n         \"border-input bg-background ring-offset-background placeholder:data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-left text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n         className,\n      )}\n      onPointerDown={(e) => {\n         if (e.pointerType === \"touch\") e.preventDefault()\n      }}\n      {...props}\n   >\n      {children}\n      <SelectPrimitive.Icon asChild>\n         <ChevronDown className=\"size-4 shrink-0 opacity-50\" />\n      </SelectPrimitive.Icon>\n   </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.ScrollUpButton\n      ref={ref}\n      className={cn(\n         \"flex cursor-default items-center justify-center py-1\",\n         className,\n      )}\n      {...props}\n   >\n      <ChevronUp className=\"size-4\" />\n   </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.ScrollDownButton\n      ref={ref}\n      className={cn(\n         \"flex cursor-default items-center justify-center py-1\",\n         className,\n      )}\n      {...props}\n   >\n      <ChevronDown className=\"size-4\" />\n   </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n   SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n   <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n         ref={ref}\n         className={cn(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md\",\n            position === \"popper\" &&\n               \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n            className,\n         )}\n         position={position}\n         {...props}\n      >\n         <SelectScrollUpButton />\n         <SelectPrimitive.Viewport\n            className={cn(\n               \"p-1\",\n               position === \"popper\" &&\n                  \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n            )}\n         >\n            {children}\n         </SelectPrimitive.Viewport>\n         <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n   </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.Label\n      ref={ref}\n      className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\n      {...props}\n   />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n   <SelectPrimitive.Item\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <SelectPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </SelectPrimitive.ItemIndicator>\n      </span>\n\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n   </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.Separator\n      ref={ref}\n      className={cn(\"bg-muted -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n   Select,\n   SelectGroup,\n   SelectValue,\n   SelectTrigger,\n   SelectContent,\n   SelectLabel,\n   SelectItem,\n   SelectSeparator,\n   SelectScrollUpButton,\n   SelectScrollDownButton,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/separate-away-demo.json b/apps/web/public/v0/styles/default/separate-away-demo.json
new file mode 100644
index 00000000..f3e342a0
--- /dev/null
+++ b/apps/web/public/v0/styles/default/separate-away-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "separate-away-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/separate-away-demo.tsx",
+      "content": "import { SeparateAway } from \"@/components/ui/separate-away\"\n\nexport default async function SeparateAwayDemo() {\n   return (\n      <SeparateAway\n         upper_text=\"Separate\"\n         lower_text=\"Away\"\n         duration={1.5}\n         hidden_opacity={0}\n         visible_opacity={1}\n         className=\"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/separate-away.json b/apps/web/public/v0/styles/default/separate-away.json
new file mode 100644
index 00000000..1c630d88
--- /dev/null
+++ b/apps/web/public/v0/styles/default/separate-away.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "separate-away",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/separate-away.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface SeparateAwayProps {\n   upper_text: string\n   lower_text: string\n   duration?: number\n   hidden_opacity?: number\n   visible_opacity?: number\n   className?: string\n}\n\nexport function SeparateAway({\n   upper_text,\n   lower_text,\n   duration = 1.5,\n   hidden_opacity = 0,\n   visible_opacity = 1,\n   className,\n}: SeparateAwayProps) {\n   const separate = {\n      hidden: { opacity: hidden_opacity, y: 0 },\n      visible: (custom: number) => ({\n         opacity: visible_opacity,\n         y: custom * 5,\n         transition: { duration },\n      }),\n   }\n\n   return (\n      <div>\n         <motion.h1\n            custom={-1}\n            variants={separate}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className={cn(className)}\n         >\n            {upper_text}\n         </motion.h1>\n         <motion.h1\n            custom={1}\n            variants={separate}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className={cn(className)}\n         >\n            {lower_text}\n         </motion.h1>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/separator-demo.json b/apps/web/public/v0/styles/default/separator-demo.json
new file mode 100644
index 00000000..ae3dc1af
--- /dev/null
+++ b/apps/web/public/v0/styles/default/separator-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "separator-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/separator-demo.tsx",
+      "content": "import { Separator } from \"@/components/ui/separator\"\n\nexport default function SeparatorDemo() {\n   return (\n      <div>\n         <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-medium leading-none\">\n               Radix Primitives\n            </h4>\n            <p className=\"text-muted-foreground text-sm\">\n               An open-source UI component library.\n            </p>\n         </div>\n         <Separator className=\"my-4\" />\n         <div className=\"flex h-5 items-center space-x-4 text-sm\">\n            <div>Blog</div>\n            <Separator orientation=\"vertical\" />\n            <div>Docs</div>\n            <Separator orientation=\"vertical\" />\n            <div>Source</div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/separator.json b/apps/web/public/v0/styles/default/separator.json
new file mode 100644
index 00000000..f8e7d15c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "separator",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-separator"
+  ],
+  "files": [
+    {
+      "path": "ui/separator.tsx",
+      "content": "\"use client\"\n\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n   React.ElementRef<typeof SeparatorPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n   (\n      { className, orientation = \"horizontal\", decorative = true, ...props },\n      ref,\n   ) => (\n      <SeparatorPrimitive.Root\n         ref={ref}\n         decorative={decorative}\n         orientation={orientation}\n         className={cn(\n            \"shrink-0 bg-border\",\n            orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n            className,\n         )}\n         {...props}\n      />\n   ),\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sheet-demo.json b/apps/web/public/v0/styles/default/sheet-demo.json
new file mode 100644
index 00000000..55f04087
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sheet-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sheet-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/sheet-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from \"@/components/ui/sheet\"\n\nexport default function SheetDemo() {\n   return (\n      <Sheet>\n         <SheetTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </SheetTrigger>\n         <SheetContent>\n            <SheetHeader>\n               <SheetTitle>Edit profile</SheetTitle>\n               <SheetDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"~peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <SheetFooter>\n               <SheetClose asChild>\n                  <Button type=\"submit\">Save changes</Button>\n               </SheetClose>\n            </SheetFooter>\n         </SheetContent>\n      </Sheet>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sheet-side.json b/apps/web/public/v0/styles/default/sheet-side.json
new file mode 100644
index 00000000..3a324fb3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sheet-side.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sheet-side",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/sheet-side.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from \"@/components/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n   return (\n      <div className=\"grid grid-cols-2 gap-2\">\n         {SHEET_SIDES.map((side) => (\n            <Sheet key={side}>\n               <SheetTrigger asChild>\n                  <Button variant=\"outline\">{side}</Button>\n               </SheetTrigger>\n               <SheetContent side={side}>\n                  <SheetHeader>\n                     <SheetTitle>Edit profile</SheetTitle>\n                     <SheetDescription>\n                        Make changes to your profile here. Click save when\n                        you're done.\n                     </SheetDescription>\n                  </SheetHeader>\n                  <div className=\"grid gap-4 py-4\">\n                     <div className=\"grid grid-cols-4 items-center gap-4\">\n                        <Label htmlFor=\"name\" className=\"text-right\">\n                           Name\n                        </Label>\n                        <Input\n                           id=\"name\"\n                           value=\"Pedro Duarte\"\n                           className=\"col-span-3\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-4 items-center gap-4\">\n                        <Label htmlFor=\"username\" className=\"text-right\">\n                           Username\n                        </Label>\n                        <Input\n                           id=\"username\"\n                           value=\"~peduarte\"\n                           className=\"col-span-3\"\n                        />\n                     </div>\n                  </div>\n                  <SheetFooter>\n                     <SheetClose asChild>\n                        <Button type=\"submit\">Save changes</Button>\n                     </SheetClose>\n                  </SheetFooter>\n               </SheetContent>\n            </Sheet>\n         ))}\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sheet.json b/apps/web/public/v0/styles/default/sheet.json
new file mode 100644
index 00000000..07e38a5a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sheet.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sheet",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/sheet.tsx",
+      "content": "\"use client\"\n\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Overlay\n      className={cn(\n         \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80\",\n         className,\n      )}\n      {...props}\n      ref={ref}\n   />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n   \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n   {\n      variants: {\n         side: {\n            top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n            bottom:\n               \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n            left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n            right: \"inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n         },\n      },\n      defaultVariants: {\n         side: \"right\",\n      },\n   },\n)\n\ninterface SheetContentProps\n   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n      VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Content>,\n   SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n   <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n         ref={ref}\n         className={cn(sheetVariants({ side }), className)}\n         {...props}\n      >\n         {children}\n         <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n         </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n   </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nfunction SheetHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\n            \"flex flex-col space-y-2 text-center sm:text-start\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nSheetHeader.displayName = \"SheetHeader\"\n\nfunction SheetFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Title\n      ref={ref}\n      className={cn(\"text-foreground text-lg font-semibold\", className)}\n      {...props}\n   />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Description\n      ref={ref}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n   Sheet,\n   SheetPortal,\n   SheetOverlay,\n   SheetTrigger,\n   SheetClose,\n   SheetContent,\n   SheetHeader,\n   SheetFooter,\n   SheetTitle,\n   SheetDescription,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/shimmer-button-demo.json b/apps/web/public/v0/styles/default/shimmer-button-demo.json
new file mode 100644
index 00000000..c869dcb8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/shimmer-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shimmer-button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/shimmer-button-demo.tsx",
+      "content": "import ShimmerButton from \"@/components/ui/shimmer-button\"\n\nexport default function ShimmerButtonDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <ShimmerButton className=\"shadow-2xl\">\n            <span className=\"whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10\">\n               Shimmer Button\n            </span>\n         </ShimmerButton>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/shimmer-button.json b/apps/web/public/v0/styles/default/shimmer-button.json
new file mode 100644
index 00000000..f21c3f79
--- /dev/null
+++ b/apps/web/public/v0/styles/default/shimmer-button.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shimmer-button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/shimmer-button.tsx",
+      "content": "import type { CSSProperties } from \"react\"\nimport React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ShimmerButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n   shimmerColor?: string\n   shimmerSize?: string\n   borderRadius?: string\n   shimmerDuration?: string\n   background?: string\n   className?: string\n   children?: React.ReactNode\n}\n\nconst ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(\n   (\n      {\n         shimmerColor = \"#ffffff\",\n         shimmerSize = \"0.05em\",\n         shimmerDuration = \"3s\",\n         borderRadius = \"100px\",\n         background = \"rgba(0, 0, 0, 1)\",\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      return (\n         <button\n            type=\"button\"\n            style={\n               {\n                  \"--spread\": \"90deg\",\n                  \"--shimmer-color\": shimmerColor,\n                  \"--radius\": borderRadius,\n                  \"--speed\": shimmerDuration,\n                  \"--cut\": shimmerSize,\n                  \"--bg\": background,\n               } as CSSProperties\n            }\n            className={cn(\n               \"group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black\",\n               \"transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         >\n            {/* spark container */}\n            <div\n               className={cn(\n                  \"-z-30 blur-[2px]\",\n                  \"absolute inset-0 overflow-visible [container-type:size]\",\n               )}\n            >\n               {/* spark */}\n               <div className=\"animate-slide absolute inset-0 h-[100cqh] [aspect-ratio:1] [border-radius:0] [mask:none]\">\n                  {/* spark before */}\n                  <div className=\"animate-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]\" />\n               </div>\n            </div>\n            {children}\n\n            {/* Highlight */}\n            <div\n               className={cn(\n                  \"insert-0 absolute size-full\",\n\n                  \"rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]\",\n\n                  // transition\n                  \"transform-gpu transition-all duration-300 ease-in-out\",\n\n                  // on hover\n                  \"group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]\",\n\n                  // on click\n                  \"group-active:shadow-[inset_0_-10px_10px_#ffffff3f]\",\n               )}\n            />\n\n            {/* backdrop */}\n            <div\n               className={cn(\n                  \"absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]\",\n               )}\n            />\n         </button>\n      )\n   },\n)\n\nShimmerButton.displayName = \"ShimmerButton\"\n\nexport default ShimmerButton\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "shimmer-slide": "shimmer-slide var(--speed) ease-in-out infinite alternate",
+            "spin-around": "spin-around calc(var(--speed) * 2) infinite linear"
+          },
+          "keyframes": {
+            "shimmer-slide": {
+              "to": {
+                "transform": "translate(calc(100cqw - 100%), 0)"
+              }
+            },
+            "spin-around": {
+              "0%": {
+                "transform": "translateZ(0) rotate(0)"
+              },
+              "15%, 35%": {
+                "transform": "translateZ(0) rotate(90deg)"
+              },
+              "65%, 85%": {
+                "transform": "translateZ(0) rotate(270deg)"
+              },
+              "100%": {
+                "transform": "translateZ(0) rotate(360deg)"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/shine-border-demo-2.json b/apps/web/public/v0/styles/default/shine-border-demo-2.json
new file mode 100644
index 00000000..f1469fd6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/shine-border-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shine-border-demo-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/shine-border-demo-2.tsx",
+      "content": "import ShineBorder from \"@/components/ui/shine-border\"\n\nexport default function ShineBorderDemo() {\n   return (\n      <ShineBorder className=\"text-center text-2xl font-bold capitalize\">\n         Shine Border\n      </ShineBorder>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/shine-border-demo.json b/apps/web/public/v0/styles/default/shine-border-demo.json
new file mode 100644
index 00000000..f17ae1fb
--- /dev/null
+++ b/apps/web/public/v0/styles/default/shine-border-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shine-border-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/shine-border-demo.tsx",
+      "content": "import ShineBorder from \"@/components/ui/shine-border\"\n\nexport default function ShineBorderDemo() {\n   return (\n      <ShineBorder\n         className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\"\n         color={[\"#A07CFE\", \"#FE8FB5\", \"#FFBE7B\"]}\n      >\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Shine Border\n         </span>\n      </ShineBorder>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/shine-border.json b/apps/web/public/v0/styles/default/shine-border.json
new file mode 100644
index 00000000..9d563789
--- /dev/null
+++ b/apps/web/public/v0/styles/default/shine-border.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shine-border",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/shine-border.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype TColorProp = string | string[]\n\ninterface ShineBorderProps {\n   borderRadius?: number\n   borderWidth?: number\n   duration?: number\n   color?: TColorProp\n   className?: string\n   children: React.ReactNode\n}\n\n/**\n * @name Shine Border\n * @description It is an animated background border effect component with easy to use and configurable props.\n * @param borderRadius defines the radius of the border.\n * @param borderWidth defines the width of the border.\n * @param duration defines the animation duration to be applied on the shining border\n * @param color a string or string array to define border color.\n * @param className defines the class name to be applied to the component\n * @param children contains react node elements.\n */\nexport default function ShineBorder({\n   borderRadius = 8,\n   borderWidth = 1,\n   duration = 14,\n   color = \"#000000\",\n   className,\n   children,\n}: ShineBorderProps) {\n   return (\n      <div\n         style={\n            {\n               \"--border-radius\": `${borderRadius}px`,\n            } as React.CSSProperties\n         }\n         className={cn(\n            \"relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white\",\n            className,\n         )}\n      >\n         <div\n            style={\n               {\n                  \"--border-width\": `${borderWidth}px`,\n                  \"--border-radius\": `${borderRadius}px`,\n                  \"--duration\": `${duration}s`,\n                  \"--mask-linear-gradient\": `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,\n                  \"--background-radial-gradient\": `radial-gradient(transparent,transparent, ${Array.isArray(color) ? color.join(\",\") : color},transparent,transparent)`,\n               } as React.CSSProperties\n            }\n            className={`before:bg-shine-size motion-safe:before:animate-shine before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[\"\"] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient]`}\n         ></div>\n         {children}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "shine": "shine var(--duration) infinite linear"
+          },
+          "keyframes": {
+            "shine": {
+              "0%": {
+                "background-position": "0% 0%"
+              },
+              "50%": {
+                "background-position": "100% 100%"
+              },
+              "to": {
+                "background-position": "0% 0%"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/shiny-button-demo.json b/apps/web/public/v0/styles/default/shiny-button-demo.json
new file mode 100644
index 00000000..d3660222
--- /dev/null
+++ b/apps/web/public/v0/styles/default/shiny-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shiny-button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/shiny-button-demo.tsx",
+      "content": "import ShinyButton from \"@/components/ui/shiny-button\"\n\nexport default function ShinyButtonDemo() {\n   return <ShinyButton text=\"Shiny Button\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/shiny-button.json b/apps/web/public/v0/styles/default/shiny-button.json
new file mode 100644
index 00000000..54ce26fb
--- /dev/null
+++ b/apps/web/public/v0/styles/default/shiny-button.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shiny-button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/shiny-button.tsx",
+      "content": "\"use client\"\nimport { type AnimationProps, motion } from \"framer-motion\"\n\nconst animationProps = {\n   initial: { \"--x\": \"100%\", scale: 0.8 },\n   animate: { \"--x\": \"-100%\", scale: 1 },\n   whileTap: { scale: 0.95 },\n   transition: {\n      repeat: Number.POSITIVE_INFINITY,\n      repeatType: \"loop\",\n      repeatDelay: 1,\n      type: \"spring\",\n      stiffness: 20,\n      damping: 15,\n      mass: 2,\n      scale: {\n         type: \"spring\",\n         stiffness: 200,\n         damping: 5,\n         mass: 0.5,\n      },\n   },\n} as AnimationProps\n\nfunction ShinyButton({ text = \"shiny-button\" }) {\n   return (\n      <motion.button\n         {...animationProps}\n         className=\"relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]\"\n      >\n         <span\n            className=\"relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]\"\n            style={{\n               maskImage:\n                  \"linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))\",\n            }}\n         >\n            {text}\n         </span>\n         <span\n            style={{\n               mask: \"linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))\",\n               maskComposite: \"exclude\",\n            }}\n            className=\"absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px\"\n         ></span>\n      </motion.button>\n   )\n}\n\nexport default ShinyButton\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-01.json b/apps/web/public/v0/styles/default/sidebar-01.json
new file mode 100644
index 00000000..f98783ec
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-01.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-01",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A simple sidebar with navigation grouped by section.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import type * as React from \"react\"\n\nimport { SearchForm } from \"@/components/search-form\"\nimport { VersionSwitcher } from \"@/components/version-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <VersionSwitcher\n               versions={data.versions}\n               defaultVersion={data.versions[0]}\n            />\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent>\n            {/* We create a SidebarGroup for each parent. */}\n            {data.navMain.map((item) => (\n               <SidebarGroup key={item.title}>\n                  <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {item.items.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 asChild\n                                 isActive={item.isActive}\n                              >\n                                 <a href={item.url}>{item.title}</a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            ))}\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-01/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/components/ui/label\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from \"@/components/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-01/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function VersionSwitcher({\n   versions,\n   defaultVersion,\n}: {\n   versions: string[]\n   defaultVersion: string\n}) {\n   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <GalleryVerticalEnd className=\"size-4\" />\n                     </div>\n                     <div className=\"flex flex-col gap-0.5 leading-none\">\n                        <span className=\"font-semibold\">Documentation</span>\n                        <span className=\"\">v{selectedVersion}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n               >\n                  {versions.map((version) => (\n                     <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                     >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                           <Check className=\"ml-auto\" />\n                        )}\n                     </DropdownMenuItem>\n                  ))}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-02.json b/apps/web/public/v0/styles/default/sidebar-02.json
new file mode 100644
index 00000000..ecb9e3e8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-02.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-02",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with collapsible sections.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { SearchForm } from \"@/components/search-form\"\nimport { VersionSwitcher } from \"@/components/version-switcher\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <VersionSwitcher\n               versions={data.versions}\n               defaultVersion={data.versions[0]}\n            />\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent className=\"gap-0\">\n            {/* We create a collapsible SidebarGroup for each parent. */}\n            {data.navMain.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  title={item.title}\n                  defaultOpen\n                  className=\"group/collapsible\"\n               >\n                  <SidebarGroup>\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {item.title}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {item.items.map((item) => (\n                                 <SidebarMenuItem key={item.title}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={item.isActive}\n                                    >\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </SidebarGroup>\n               </Collapsible>\n            ))}\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-02/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/components/ui/label\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from \"@/components/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-02/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function VersionSwitcher({\n   versions,\n   defaultVersion,\n}: {\n   versions: string[]\n   defaultVersion: string\n}) {\n   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <GalleryVerticalEnd className=\"size-4\" />\n                     </div>\n                     <div className=\"flex flex-col gap-0.5 leading-none\">\n                        <span className=\"font-semibold\">Documentation</span>\n                        <span className=\"\">v{selectedVersion}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n               >\n                  {versions.map((version) => (\n                     <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                     >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                           <Check className=\"ml-auto\" />\n                        )}\n                     </DropdownMenuItem>\n                  ))}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-03.json b/apps/web/public/v0/styles/default/sidebar-03.json
new file mode 100644
index 00000000..f1466a74
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-03.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-03",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n               <div className=\"flex items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-03/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu>\n                  {data.navMain.map((item) => (\n                     <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild>\n                           <a href={item.url} className=\"font-medium\">\n                              {item.title}\n                           </a>\n                        </SidebarMenuButton>\n                        {item.items?.length ? (\n                           <SidebarMenuSub>\n                              {item.items.map((item) => (\n                                 <SidebarMenuSubItem key={item.title}>\n                                    <SidebarMenuSubButton\n                                       asChild\n                                       isActive={item.isActive}\n                                    >\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        ) : null}\n                     </SidebarMenuItem>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-04.json b/apps/web/public/v0/styles/default/sidebar-04.json
new file mode 100644
index 00000000..c7d5cb72
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-04.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-04",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A floating sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"19rem\",\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-04/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar variant=\"floating\" {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu className=\"gap-2\">\n                  {data.navMain.map((item) => (\n                     <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild>\n                           <a href={item.url} className=\"font-medium\">\n                              {item.title}\n                           </a>\n                        </SidebarMenuButton>\n                        {item.items?.length ? (\n                           <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                              {item.items.map((item) => (\n                                 <SidebarMenuSubItem key={item.title}>\n                                    <SidebarMenuSubButton\n                                       asChild\n                                       isActive={item.isActive}\n                                    >\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        ) : null}\n                     </SidebarMenuItem>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-05.json b/apps/web/public/v0/styles/default/sidebar-05.json
new file mode 100644
index 00000000..371b0e66
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-05.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-05",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with collapsible submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { SearchForm } from \"@/components/search-form\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu>\n                  {data.navMain.map((item, index) => (\n                     <Collapsible\n                        key={item.title}\n                        defaultOpen={index === 1}\n                        className=\"group/collapsible\"\n                     >\n                        <SidebarMenuItem>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuButton>\n                                 {item.title}{\" \"}\n                                 <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                                 <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                              </SidebarMenuButton>\n                           </CollapsibleTrigger>\n                           {item.items?.length ? (\n                              <CollapsibleContent>\n                                 <SidebarMenuSub>\n                                    {item.items.map((item) => (\n                                       <SidebarMenuSubItem key={item.title}>\n                                          <SidebarMenuSubButton\n                                             asChild\n                                             isActive={item.isActive}\n                                          >\n                                             <a href={item.url}>{item.title}</a>\n                                          </SidebarMenuSubButton>\n                                       </SidebarMenuSubItem>\n                                    ))}\n                                 </SidebarMenuSub>\n                              </CollapsibleContent>\n                           ) : null}\n                        </SidebarMenuItem>\n                     </Collapsible>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-05/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/components/ui/label\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from \"@/components/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-06.json b/apps/web/public/v0/styles/default/sidebar-06.json
new file mode 100644
index 00000000..1cafaa58
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-06.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-06",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with submenus as dropdowns.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"@/components/nav-main\"\nimport { SidebarOptInForm } from \"@/components/sidebar-opt-in-form\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n         </SidebarContent>\n         <SidebarFooter>\n            <div className=\"p-1\">\n               <SidebarOptInForm />\n            </div>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-06/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon, MoreHorizontal } from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup>\n         <SidebarMenu>\n            {items.map((item) => (\n               <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                           {item.title} <MoreHorizontal className=\"ml-auto\" />\n                        </SidebarMenuButton>\n                     </DropdownMenuTrigger>\n                     {item.items?.length ? (\n                        <DropdownMenuContent\n                           side={isMobile ? \"bottom\" : \"right\"}\n                           align={isMobile ? \"end\" : \"start\"}\n                           className=\"min-w-56 rounded-lg\"\n                        >\n                           {item.items.map((item) => (\n                              <DropdownMenuItem asChild key={item.title}>\n                                 <a href={item.url}>{item.title}</a>\n                              </DropdownMenuItem>\n                           ))}\n                        </DropdownMenuContent>\n                     ) : null}\n                  </SidebarMenuItem>\n               </DropdownMenu>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { SidebarInput } from \"@/components/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n   return (\n      <Card className=\"shadow-none\">\n         <form>\n            <CardHeader className=\"p-4 pb-0\">\n               <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n               </CardTitle>\n               <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n               </CardDescription>\n            </CardHeader>\n            <CardContent className=\"grid gap-2.5 p-4\">\n               <SidebarInput type=\"email\" placeholder=\"Email\" />\n               <Button\n                  className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n                  size=\"sm\"\n               >\n                  Subscribe\n               </Button>\n            </CardContent>\n         </form>\n      </Card>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-07.json b/apps/web/public/v0/styles/default/sidebar-07.json
new file mode 100644
index 00000000..f60bb5d2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-07.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-07",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar that collapses to icons.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-07/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   GalleryVerticalEnd,\n   Map,\n   PieChart,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"@/components/nav-main\"\nimport { NavProjects } from \"@/components/nav-projects\"\nimport { NavUser } from \"@/components/nav-user\"\nimport { TeamSwitcher } from \"@/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: GalleryVerticalEnd,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar collapsible=\"icon\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n               >\n                  <SidebarMenuItem>\n                     <CollapsibleTrigger asChild>\n                        <SidebarMenuButton tooltip={item.title}>\n                           {item.icon && <item.icon />}\n                           <span>{item.title}</span>\n                           <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                     </CollapsibleTrigger>\n                     <CollapsibleContent>\n                        <SidebarMenuSub>\n                           {item.items?.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                 <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                       <span>{subItem.title}</span>\n                                    </a>\n                                 </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                           ))}\n                        </SidebarMenuSub>\n                     </CollapsibleContent>\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   Forward,\n   type LucideIcon,\n   MoreHorizontal,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Forward className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-4\" />\n                     </div>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {activeTeam.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                           {activeTeam.plan}\n                        </span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-08.json b/apps/web/public/v0/styles/default/sidebar-08.json
new file mode 100644
index 00000000..1949e851
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-08.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-08",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "An inset sidebar with secondary navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2\">\n               <div className=\"flex items-center gap-2 px-4\">\n                  <SidebarTrigger className=\"-ml-1\" />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-08/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Send,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"@/components/nav-main\"\nimport { NavProjects } from \"@/components/nav-projects\"\nimport { NavSecondary } from \"@/components/nav-secondary\"\nimport { NavUser } from \"@/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: \"Support\",\n         url: \"#\",\n         icon: LifeBuoy,\n      },\n      {\n         title: \"Feedback\",\n         url: \"#\",\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: \"Design Engineering\",\n         url: \"#\",\n         icon: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar variant=\"inset\" {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <Command className=\"size-4\" />\n                        </div>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              Acme Inc\n                           </span>\n                           <span className=\"truncate text-xs\">Enterprise</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n               >\n                  <SidebarMenuItem>\n                     <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.items?.length ? (\n                        <>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                 <ChevronRight />\n                                 <span className=\"sr-only\">Toggle</span>\n                              </SidebarMenuAction>\n                           </CollapsibleTrigger>\n                           <CollapsibleContent>\n                              <SidebarMenuSub>\n                                 {item.items?.map((subItem) => (\n                                    <SidebarMenuSubItem key={subItem.title}>\n                                       <SidebarMenuSubButton asChild>\n                                          <a href={subItem.url}>\n                                             <span>{subItem.title}</span>\n                                          </a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           </CollapsibleContent>\n                        </>\n                     ) : null}\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   type LucideIcon,\n   MoreHorizontal,\n   Share,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Share className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-09.json b/apps/web/public/v0/styles/default/sidebar-09.json
new file mode 100644
index 00000000..3c1a0f90
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-09.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-09",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "Collapsible nested sidebars.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"350px\",\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Inbox</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-09/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/components/nav-user\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\nimport { Switch } from \"@/components/ui/switch\"\n\n// This is sample data\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         isActive: true,\n      },\n      {\n         title: \"Drafts\",\n         url: \"#\",\n         icon: File,\n         isActive: false,\n      },\n      {\n         title: \"Sent\",\n         url: \"#\",\n         icon: Send,\n         isActive: false,\n      },\n      {\n         title: \"Junk\",\n         url: \"#\",\n         icon: ArchiveX,\n         isActive: false,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n         isActive: false,\n      },\n   ],\n   mails: [\n      {\n         name: \"William Smith\",\n         email: \"williamsmith@example.com\",\n         subject: \"Meeting Tomorrow\",\n         date: \"09:34 AM\",\n         teaser:\n            \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n      },\n      {\n         name: \"Alice Smith\",\n         email: \"alicesmith@example.com\",\n         subject: \"Re: Project Update\",\n         date: \"Yesterday\",\n         teaser:\n            \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n      },\n      {\n         name: \"Bob Johnson\",\n         email: \"bobjohnson@example.com\",\n         subject: \"Weekend Plans\",\n         date: \"2 days ago\",\n         teaser:\n            \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n      },\n      {\n         name: \"Emily Davis\",\n         email: \"emilydavis@example.com\",\n         subject: \"Re: Question about Budget\",\n         date: \"2 days ago\",\n         teaser:\n            \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n      },\n      {\n         name: \"Michael Wilson\",\n         email: \"michaelwilson@example.com\",\n         subject: \"Important Announcement\",\n         date: \"1 week ago\",\n         teaser:\n            \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n      },\n      {\n         name: \"Sarah Brown\",\n         email: \"sarahbrown@example.com\",\n         subject: \"Re: Feedback on Proposal\",\n         date: \"1 week ago\",\n         teaser:\n            \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n      },\n      {\n         name: \"David Lee\",\n         email: \"davidlee@example.com\",\n         subject: \"New Project Idea\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n      },\n      {\n         name: \"Olivia Wilson\",\n         email: \"oliviawilson@example.com\",\n         subject: \"Vacation Plans\",\n         date: \"1 week ago\",\n         teaser:\n            \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n      },\n      {\n         name: \"James Martin\",\n         email: \"jamesmartin@example.com\",\n         subject: \"Re: Conference Registration\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n      },\n      {\n         name: \"Sophia White\",\n         email: \"sophiawhite@example.com\",\n         subject: \"Team Dinner\",\n         date: \"1 week ago\",\n         teaser:\n            \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   // Note: I'm using state to show active item.\n   // IRL you should use the url/router.\n   const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n   const [mails, setMails] = React.useState(data.mails)\n   const { setOpen } = useSidebar()\n\n   return (\n      <Sidebar\n         collapsible=\"icon\"\n         className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n         {...props}\n      >\n         {/* This is the first sidebar */}\n         {/* We disable collapsible and adjust width to icon. */}\n         {/* This will make the sidebar appear as icons. */}\n         <Sidebar\n            collapsible=\"none\"\n            className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n         >\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton\n                        size=\"lg\"\n                        asChild\n                        className=\"md:h-8 md:p-0\"\n                     >\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">\n                                 Acme Inc\n                              </span>\n                              <span className=\"truncate text-xs\">\n                                 Enterprise\n                              </span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent className=\"px-1.5 md:px-0\">\n                     <SidebarMenu>\n                        {data.navMain.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 tooltip={{\n                                    children: item.title,\n                                    hidden: false,\n                                 }}\n                                 onClick={() => {\n                                    setActiveItem(item)\n                                    const mail = data.mails.sort(\n                                       () => Math.random() - 0.5,\n                                    )\n                                    setMails(\n                                       mail.slice(\n                                          0,\n                                          Math.max(\n                                             5,\n                                             Math.floor(Math.random() * 10) + 1,\n                                          ),\n                                       ),\n                                    )\n                                    setOpen(true)\n                                 }}\n                                 isActive={activeItem.title === item.title}\n                                 className=\"px-2.5 md:px-2\"\n                              >\n                                 <item.icon />\n                                 <span>{item.title}</span>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <NavUser user={data.user} />\n            </SidebarFooter>\n         </Sidebar>\n\n         {/* This is the second sidebar */}\n         {/* We disable collapsible and let it fill remaining space */}\n         <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n            <SidebarHeader className=\"gap-3.5 border-b p-4\">\n               <div className=\"flex w-full items-center justify-between\">\n                  <div className=\"text-base font-medium text-foreground\">\n                     {activeItem.title}\n                  </div>\n                  <Label className=\"flex items-center gap-2 text-sm\">\n                     <span>Unreads</span>\n                     <Switch className=\"shadow-none\" />\n                  </Label>\n               </div>\n               <SidebarInput placeholder=\"Type to search...\" />\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup className=\"px-0\">\n                  <SidebarGroupContent>\n                     {mails.map((mail) => (\n                        <a\n                           href=\"#\"\n                           key={mail.email}\n                           className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                        >\n                           <div className=\"flex w-full items-center gap-2\">\n                              <span>{mail.name}</span>{\" \"}\n                              <span className=\"ml-auto text-xs\">\n                                 {mail.date}\n                              </span>\n                           </div>\n                           <span className=\"font-medium\">{mail.subject}</span>\n                           <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                              {mail.teaser}\n                           </span>\n                        </a>\n                     ))}\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-09/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-10.json b/apps/web/public/v0/styles/default/sidebar-10.json
new file mode 100644
index 00000000..b2a82c48
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-10.json
@@ -0,0 +1,69 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-10",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar in a popover.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport { NavActions } from \"@/components/nav-actions\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-14 shrink-0 items-center gap-2\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n               <div className=\"ml-auto px-3\">\n                  <NavActions />\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-10/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   Blocks,\n   Calendar,\n   Command,\n   Home,\n   Inbox,\n   MessageCircleQuestion,\n   Search,\n   Settings2,\n   Sparkles,\n   Trash2,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavFavorites } from \"@/components/nav-favorites\"\nimport { NavMain } from \"@/components/nav-main\"\nimport { NavSecondary } from \"@/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarHeader,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: Calendar,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-actions.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowDown,\n   ArrowUp,\n   Bell,\n   Copy,\n   CornerUpLeft,\n   CornerUpRight,\n   FileText,\n   GalleryVerticalEnd,\n   LineChart,\n   Link,\n   MoreHorizontal,\n   Settings2,\n   Star,\n   Trash,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nconst data = [\n   [\n      {\n         label: \"Customize Page\",\n         icon: Settings2,\n      },\n      {\n         label: \"Turn into wiki\",\n         icon: FileText,\n      },\n   ],\n   [\n      {\n         label: \"Copy Link\",\n         icon: Link,\n      },\n      {\n         label: \"Duplicate\",\n         icon: Copy,\n      },\n      {\n         label: \"Move to\",\n         icon: CornerUpRight,\n      },\n      {\n         label: \"Move to Trash\",\n         icon: Trash2,\n      },\n   ],\n   [\n      {\n         label: \"Undo\",\n         icon: CornerUpLeft,\n      },\n      {\n         label: \"View analytics\",\n         icon: LineChart,\n      },\n      {\n         label: \"Version History\",\n         icon: GalleryVerticalEnd,\n      },\n      {\n         label: \"Show delete pages\",\n         icon: Trash,\n      },\n      {\n         label: \"Notifications\",\n         icon: Bell,\n      },\n   ],\n   [\n      {\n         label: \"Import\",\n         icon: ArrowUp,\n      },\n      {\n         label: \"Export\",\n         icon: ArrowDown,\n      },\n   ],\n]\n\nexport function NavActions() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      setIsOpen(true)\n   }, [])\n\n   return (\n      <div className=\"flex items-center gap-2 text-sm\">\n         <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n            Edit Oct 08\n         </div>\n         <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n            <Star />\n         </Button>\n         <Popover open={isOpen} onOpenChange={setIsOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-7 w-7 data-[state=open]:bg-accent\"\n               >\n                  <MoreHorizontal />\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent\n               className=\"w-56 overflow-hidden rounded-lg p-0\"\n               align=\"end\"\n            >\n               <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n                  <SidebarContent>\n                     {data.map((group, index) => (\n                        <SidebarGroup\n                           key={index}\n                           className=\"border-b last:border-none\"\n                        >\n                           <SidebarGroupContent className=\"gap-0\">\n                              <SidebarMenu>\n                                 {group.map((item, index) => (\n                                    <SidebarMenuItem key={index}>\n                                       <SidebarMenuButton>\n                                          <item.icon />{\" \"}\n                                          <span>{item.label}</span>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </SidebarGroup>\n                     ))}\n                  </SidebarContent>\n               </Sidebar>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowUpRight,\n   Link,\n   MoreHorizontal,\n   StarOff,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport type { LucideIcon } from \"lucide-react\"\n\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-11.json b/apps/web/public/v0/styles/default/sidebar-11.json
new file mode 100644
index 00000000..fc97d889
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-11.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-11",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with a collapsible file tree.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>button.tsx</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-11/components/app-sidebar.tsx",
+      "content": "import { ChevronRight, File, Folder } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   changes: [\n      {\n         file: \"README.md\",\n         state: \"M\",\n      },\n      {\n         file: \"api/hello/route.ts\",\n         state: \"U\",\n      },\n      {\n         file: \"app/layout.tsx\",\n         state: \"M\",\n      },\n   ],\n   tree: [\n      [\n         \"app\",\n         [\n            \"api\",\n            [\"hello\", [\"route.ts\"]],\n            \"page.tsx\",\n            \"layout.tsx\",\n            [\"blog\", [\"page.tsx\"]],\n         ],\n      ],\n      [\n         \"components\",\n         [\"ui\", \"button.tsx\", \"card.tsx\"],\n         \"header.tsx\",\n         \"footer.tsx\",\n      ],\n      [\"lib\", [\"util.ts\"]],\n      [\"public\", \"favicon.ico\", \"vercel.svg\"],\n      \".eslintrc.json\",\n      \".gitignore\",\n      \"next.config.js\",\n      \"tailwind.config.js\",\n      \"package.json\",\n      \"README.md\",\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Changes</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.changes.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                           <SidebarMenuButton>\n                              <File />\n                              {item.file}\n                           </SidebarMenuButton>\n                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n            <SidebarGroup>\n               <SidebarGroupLabel>Files</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.tree.map((item, index) => (\n                        <Tree key={index} item={item} />\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n   const [name, ...items] = Array.isArray(item) ? item : [item]\n\n   if (!items.length) {\n      return (\n         <SidebarMenuButton\n            isActive={name === \"button.tsx\"}\n            className=\"data-[active=true]:bg-transparent\"\n         >\n            <File />\n            {name}\n         </SidebarMenuButton>\n      )\n   }\n\n   return (\n      <SidebarMenuItem>\n         <Collapsible\n            className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n            defaultOpen={name === \"components\" || name === \"ui\"}\n         >\n            <CollapsibleTrigger asChild>\n               <SidebarMenuButton>\n                  <ChevronRight className=\"transition-transform\" />\n                  <Folder />\n                  {name}\n               </SidebarMenuButton>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n               <SidebarMenuSub>\n                  {items.map((subItem, index) => (\n                     <Tree key={index} item={subItem} />\n                  ))}\n               </SidebarMenuSub>\n            </CollapsibleContent>\n         </Collapsible>\n      </SidebarMenuItem>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-12.json b/apps/web/public/v0/styles/default/sidebar-12.json
new file mode 100644
index 00000000..922a84ec
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-12.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-12",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with a calendar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>October 2024</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n                  {Array.from({ length: 20 }).map((_, i) => (\n                     <div\n                        key={i}\n                        className=\"aspect-square rounded-xl bg-muted/50\"\n                     />\n                  ))}\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "import { Plus } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { Calendars } from \"@/components/calendars\"\nimport { DatePicker } from \"@/components/date-picker\"\nimport { NavUser } from \"@/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n   SidebarSeparator,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/calendars.tsx",
+      "content": "import { Check, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarSeparator,\n} from \"@/components/ui/sidebar\"\n\nexport function Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/components/ui/calendar\"\nimport { SidebarGroup, SidebarGroupContent } from \"@/components/ui/sidebar\"\n\nexport function DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-13.json b/apps/web/public/v0/styles/default/sidebar-13.json
new file mode 100644
index 00000000..370eda35
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-13.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-13",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar in a dialog.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-13/page.tsx",
+      "content": "import { SettingsDialog } from \"@/components/settings-dialog\"\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-svh items-center justify-center\">\n         <SettingsDialog />\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-13/components/settings-dialog.tsx",
+      "content": "\"use client\"\n\nimport {\n   Bell,\n   Check,\n   Globe,\n   Home,\n   Keyboard,\n   Link,\n   Lock,\n   Menu,\n   MessageCircle,\n   Paintbrush,\n   Settings,\n   Video,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogTitle,\n   DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst data = {\n   nav: [\n      { name: \"Notifications\", icon: Bell },\n      { name: \"Navigation\", icon: Menu },\n      { name: \"Home\", icon: Home },\n      { name: \"Appearance\", icon: Paintbrush },\n      { name: \"Messages & media\", icon: MessageCircle },\n      { name: \"Language & region\", icon: Globe },\n      { name: \"Accessibility\", icon: Keyboard },\n      { name: \"Mark as read\", icon: Check },\n      { name: \"Audio & video\", icon: Video },\n      { name: \"Connected accounts\", icon: Link },\n      { name: \"Privacy & visibility\", icon: Lock },\n      { name: \"Advanced\", icon: Settings },\n   ],\n}\n\nexport function SettingsDialog() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <Dialog open={open} onOpenChange={setOpen}>\n         <DialogTrigger asChild>\n            <Button size=\"sm\">Open Dialog</Button>\n         </DialogTrigger>\n         <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n            <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n            <DialogDescription className=\"sr-only\">\n               Customize your settings here.\n            </DialogDescription>\n            <SidebarProvider className=\"items-start\">\n               <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n                  <SidebarContent>\n                     <SidebarGroup>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {data.nav.map((item) => (\n                                 <SidebarMenuItem key={item.name}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={\n                                          item.name === \"Messages & media\"\n                                       }\n                                    >\n                                       <a href=\"#\">\n                                          <item.icon />\n                                          <span>{item.name}</span>\n                                       </a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </SidebarGroup>\n                  </SidebarContent>\n               </Sidebar>\n               <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n                  <header className=\"flex h-16 shrink-0 items-center gap-2 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                        <Breadcrumb>\n                           <BreadcrumbList>\n                              <BreadcrumbItem className=\"hidden md:block\">\n                                 <BreadcrumbLink href=\"#\">\n                                    Settings\n                                 </BreadcrumbLink>\n                              </BreadcrumbItem>\n                              <BreadcrumbSeparator className=\"hidden md:block\" />\n                              <BreadcrumbItem>\n                                 <BreadcrumbPage>\n                                    Messages & media\n                                 </BreadcrumbPage>\n                              </BreadcrumbItem>\n                           </BreadcrumbList>\n                        </Breadcrumb>\n                     </div>\n                  </header>\n                  <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n                     {Array.from({ length: 10 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                        />\n                     ))}\n                  </div>\n               </main>\n            </SidebarProvider>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-14.json b/apps/web/public/v0/styles/default/sidebar-14.json
new file mode 100644
index 00000000..4786b476
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-14.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-14",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar on the right.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n               <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n         <AppSidebar side=\"right\" />\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-14/components/app-sidebar.tsx",
+      "content": "import type * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-15.json b/apps/web/public/v0/styles/default/sidebar-15.json
new file mode 100644
index 00000000..b876cdc8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-15.json
@@ -0,0 +1,89 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-15",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A left and right sidebar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"@/components/sidebar-left\"\nimport { SidebarRight } from \"@/components/sidebar-right\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarLeft />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n         <SidebarRight />\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-15/components/calendars.tsx",
+      "content": "import { Check, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarSeparator,\n} from \"@/components/ui/sidebar\"\n\nexport function Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/components/ui/calendar\"\nimport { SidebarGroup, SidebarGroupContent } from \"@/components/ui/sidebar\"\n\nexport function DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowUpRight,\n   Link,\n   MoreHorizontal,\n   StarOff,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport type { LucideIcon } from \"lucide-react\"\n\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/sidebar-left.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   Blocks,\n   Calendar,\n   Command,\n   Home,\n   Inbox,\n   MessageCircleQuestion,\n   Search,\n   Settings2,\n   Sparkles,\n   Trash2,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavFavorites } from \"@/components/nav-favorites\"\nimport { NavMain } from \"@/components/nav-main\"\nimport { NavSecondary } from \"@/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarHeader,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: Calendar,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function SidebarLeft({\n   ...props\n}: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "import { Plus } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { Calendars } from \"@/components/calendars\"\nimport { DatePicker } from \"@/components/date-picker\"\nimport { NavUser } from \"@/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n   SidebarSeparator,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport function SidebarRight({\n   ...props\n}: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         collapsible=\"none\"\n         className=\"sticky hidden lg:flex top-0 h-svh border-l\"\n         {...props}\n      >\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-16.json b/apps/web/public/v0/styles/default/sidebar-16.json
new file mode 100644
index 00000000..fa8e001c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-16.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-16",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with a sticky site header.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-16/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport { SiteHeader } from \"@/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <div className=\"[--header-height:calc(theme(spacing.14))]\">\n         <SidebarProvider className=\"flex flex-col\">\n            <SiteHeader />\n            <div className=\"flex flex-1\">\n               <AppSidebar />\n               <SidebarInset>\n                  <div className=\"flex flex-1 flex-col gap-4 p-4\">\n                     <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                        <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                        <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                        <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                     </div>\n                     <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n                  </div>\n               </SidebarInset>\n            </div>\n         </SidebarProvider>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-16/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Send,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"@/components/nav-main\"\nimport { NavProjects } from \"@/components/nav-projects\"\nimport { NavSecondary } from \"@/components/nav-secondary\"\nimport { NavUser } from \"@/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: \"Support\",\n         url: \"#\",\n         icon: LifeBuoy,\n      },\n      {\n         title: \"Feedback\",\n         url: \"#\",\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: \"Design Engineering\",\n         url: \"#\",\n         icon: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         className=\"top-[--header-height] !h-[calc(100svh-var(--header-height))]\"\n         {...props}\n      >\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <Command className=\"size-4\" />\n                        </div>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              Acme Inc\n                           </span>\n                           <span className=\"truncate text-xs\">Enterprise</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n               >\n                  <SidebarMenuItem>\n                     <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.items?.length ? (\n                        <>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                 <ChevronRight />\n                                 <span className=\"sr-only\">Toggle</span>\n                              </SidebarMenuAction>\n                           </CollapsibleTrigger>\n                           <CollapsibleContent>\n                              <SidebarMenuSub>\n                                 {item.items?.map((subItem) => (\n                                    <SidebarMenuSubItem key={subItem.title}>\n                                       <SidebarMenuSubButton asChild>\n                                          <a href={subItem.url}>\n                                             <span>{subItem.title}</span>\n                                          </a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           </CollapsibleContent>\n                        </>\n                     ) : null}\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   type LucideIcon,\n   MoreHorizontal,\n   Share,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Share className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/components/ui/label\"\nimport { SidebarInput } from \"@/components/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <div className=\"relative\">\n            <Label htmlFor=\"search\" className=\"sr-only\">\n               Search\n            </Label>\n            <SidebarInput\n               id=\"search\"\n               placeholder=\"Type to search...\"\n               className=\"h-8 pl-7\"\n            />\n            <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n         </div>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/site-header.tsx",
+      "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/components/search-form\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { useSidebar } from \"@/components/ui/sidebar\"\n\nexport function SiteHeader() {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <header className=\"fle sticky top-0 z-50 w-full items-center border-b bg-background\">\n         <div className=\"flex h-[--header-height] w-full items-center gap-2 px-4\">\n            <Button\n               className=\"h-8 w-8\"\n               variant=\"ghost\"\n               size=\"icon\"\n               onClick={toggleSidebar}\n            >\n               <SidebarIcon />\n            </Button>\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb className=\"hidden sm:block\">\n               <BreadcrumbList>\n                  <BreadcrumbItem>\n                     <BreadcrumbLink href=\"#\">\n                        Building Your Application\n                     </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator />\n                  <BreadcrumbItem>\n                     <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                  </BreadcrumbItem>\n               </BreadcrumbList>\n            </Breadcrumb>\n            <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n         </div>\n      </header>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-controlled.json b/apps/web/public/v0/styles/default/sidebar-controlled.json
new file mode 100644
index 00000000..28cc2210
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-controlled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-controlled",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-controlled.tsx",
+      "content": "\"use client\"\n\nimport {\n   Frame,\n   LifeBuoy,\n   Map,\n   PanelLeftClose,\n   PanelLeftOpen,\n   PieChart,\n   Send,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n   },\n]\n\nexport default function AppSidebar() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <SidebarProvider open={open} onOpenChange={setOpen}>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton asChild>\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center h-12 px-4 justify-between\">\n               <Button\n                  onClick={() => setOpen((open) => !open)}\n                  size=\"sm\"\n                  variant=\"ghost\"\n               >\n                  {open ? <PanelLeftClose /> : <PanelLeftOpen />}\n                  <span>{open ? \"Close\" : \"Open\"} Sidebar</span>\n               </Button>\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-demo.json b/apps/web/public/v0/styles/default/sidebar-demo.json
new file mode 100644
index 00000000..72220702
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-demo",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Calendar, Home, Inbox, Search, Settings } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\n// Menu items.\nconst items = [\n   {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n   },\n   {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n   },\n   {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n   },\n   {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n   },\n   {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings,\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Application</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {items.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton asChild>\n                                 <a href={item.url}>\n                                    <item.icon />\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center justify-between px-4 h-12\">\n               <SidebarTrigger />\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-footer.json b/apps/web/public/v0/styles/default/sidebar-footer.json
new file mode 100644
index 00000000..856de17b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-footer.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-footer",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-footer.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, ChevronUp, User2 } from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader />\n            <SidebarContent />\n            <SidebarFooter>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                              Username\n                              <ChevronUp className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           side=\"top\"\n                           className=\"w-[--radix-popper-anchor-width]\"\n                        >\n                           <DropdownMenuItem>\n                              <span>Account</span>\n                           </DropdownMenuItem>\n                           <DropdownMenuItem>\n                              <span>Billing</span>\n                           </DropdownMenuItem>\n                           <DropdownMenuItem>\n                              <span>Sign out</span>\n                           </DropdownMenuItem>\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarFooter>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center justify-between px-4 h-12\">\n               <SidebarTrigger />\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-group-action.json b/apps/web/public/v0/styles/default/sidebar-group-action.json
new file mode 100644
index 00000000..515b2c1b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-group-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-group-action",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-action.tsx",
+      "content": "\"use client\"\n\nimport {\n   ChevronDown,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Plus,\n   Send,\n} from \"lucide-react\"\nimport { Toaster, toast } from \"sonner\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupAction,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Toaster\n            position=\"bottom-left\"\n            toastOptions={{\n               className: \"ml-[160px]\",\n            }}\n         />\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupAction\n                     title=\"Add Project\"\n                     onClick={() => toast(\"You clicked the group action!\")}\n                  >\n                     <Plus /> <span className=\"sr-only\">Add Project</span>\n                  </SidebarGroupAction>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton asChild>\n                              <a href=\"#\">\n                                 <Frame />\n                                 <span>Design Engineering</span>\n                              </a>\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton asChild>\n                              <a href=\"#\">\n                                 <PieChart />\n                                 <span>Sales & Marketing</span>\n                              </a>\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton asChild>\n                              <a href=\"#\">\n                                 <Map />\n                                 <span>Travel</span>\n                              </a>\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-group-collapsible.json b/apps/web/public/v0/styles/default/sidebar-group-collapsible.json
new file mode 100644
index 00000000..6ace61e2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-group-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-group-collapsible",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <Collapsible defaultOpen className=\"group/collapsible\">\n                  <SidebarGroup>\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           Help\n                           <ChevronDown className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              <SidebarMenuItem>\n                                 <SidebarMenuButton>\n                                    <LifeBuoy />\n                                    Support\n                                 </SidebarMenuButton>\n                              </SidebarMenuItem>\n                              <SidebarMenuItem>\n                                 <SidebarMenuButton>\n                                    <Send />\n                                    Feedback\n                                 </SidebarMenuButton>\n                              </SidebarMenuItem>\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </SidebarGroup>\n               </Collapsible>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-group.json b/apps/web/public/v0/styles/default/sidebar-group.json
new file mode 100644
index 00000000..79a51d47
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-group.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-group",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-group.tsx",
+      "content": "\"use client\"\n\nimport { LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Help</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton>\n                              <LifeBuoy />\n                              Support\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton>\n                              <Send />\n                              Feedback\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-header.json b/apps/web/public/v0/styles/default/sidebar-header.json
new file mode 100644
index 00000000..53f8fcdd
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-header.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-header",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-header.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown } from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   Sidebar,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                              Select Workspace\n                              <ChevronDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent className=\"w-[--radix-popper-anchor-width]\">\n                           <DropdownMenuItem>\n                              <span>Acme Inc</span>\n                           </DropdownMenuItem>\n                           <DropdownMenuItem>\n                              <span>Acme Corp.</span>\n                           </DropdownMenuItem>\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center justify-between px-4 h-12\">\n               <SidebarTrigger />\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-menu-action.json b/apps/web/public/v0/styles/default/sidebar-menu-action.json
new file mode 100644
index 00000000..48eea6b7
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-menu-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-action",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-action.tsx",
+      "content": "\"use client\"\n\nimport {\n   Frame,\n   LifeBuoy,\n   Map,\n   MoreHorizontal,\n   PieChart,\n   Send,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project, index) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton\n                                 asChild\n                                 className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                              >\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              <DropdownMenu>\n                                 <DropdownMenuTrigger asChild>\n                                    <SidebarMenuAction>\n                                       <MoreHorizontal />\n                                       <span className=\"sr-only\">More</span>\n                                    </SidebarMenuAction>\n                                 </DropdownMenuTrigger>\n                                 <DropdownMenuContent\n                                    side=\"right\"\n                                    align=\"start\"\n                                 >\n                                    <DropdownMenuItem>\n                                       <span>Edit Project</span>\n                                    </DropdownMenuItem>\n                                    <DropdownMenuItem>\n                                       <span>Delete Project</span>\n                                    </DropdownMenuItem>\n                                 </DropdownMenuContent>\n                              </DropdownMenu>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-menu-badge.json b/apps/web/public/v0/styles/default/sidebar-menu-badge.json
new file mode 100644
index 00000000..ca30b387
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-menu-badge.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-badge",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-badge.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n      badge: \"24\",\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n      badge: \"12\",\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n      badge: \"3\",\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n      badge: \"21\",\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n      badge: \"8\",\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton\n                                 asChild\n                                 className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                              >\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              <SidebarMenuBadge>\n                                 {project.badge}\n                              </SidebarMenuBadge>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-menu-collapsible.json b/apps/web/public/v0/styles/default/sidebar-menu-collapsible.json
new file mode 100644
index 00000000..b41fa0a6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-menu-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-collapsible",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst items = [\n   {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Installation\",\n            url: \"#\",\n         },\n         {\n            title: \"Project Structure\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Routing\",\n            url: \"#\",\n         },\n         {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n         },\n         {\n            title: \"Rendering\",\n            url: \"#\",\n         },\n         {\n            title: \"Caching\",\n            url: \"#\",\n         },\n         {\n            title: \"Styling\",\n            url: \"#\",\n         },\n         {\n            title: \"Optimizing\",\n            url: \"#\",\n         },\n         {\n            title: \"Configuring\",\n            url: \"#\",\n         },\n         {\n            title: \"Testing\",\n            url: \"#\",\n         },\n         {\n            title: \"Authentication\",\n            url: \"#\",\n         },\n         {\n            title: \"Deploying\",\n            url: \"#\",\n         },\n         {\n            title: \"Upgrading\",\n            url: \"#\",\n         },\n         {\n            title: \"Examples\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Components\",\n            url: \"#\",\n         },\n         {\n            title: \"File Conventions\",\n            url: \"#\",\n         },\n         {\n            title: \"Functions\",\n            url: \"#\",\n         },\n         {\n            title: \"next.config.js Options\",\n            url: \"#\",\n         },\n         {\n            title: \"CLI\",\n            url: \"#\",\n         },\n         {\n            title: \"Edge Runtime\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Accessibility\",\n            url: \"#\",\n         },\n         {\n            title: \"Fast Refresh\",\n            url: \"#\",\n         },\n         {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n         },\n         {\n            title: \"Supported Browsers\",\n            url: \"#\",\n         },\n         {\n            title: \"Turbopack\",\n            url: \"#\",\n         },\n      ],\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {items.map((item, index) => (\n                           <Collapsible\n                              key={index}\n                              className=\"group/collapsible\"\n                              defaultOpen={index === 0}\n                           >\n                              <SidebarMenuItem>\n                                 <CollapsibleTrigger asChild>\n                                    <SidebarMenuButton>\n                                       <span>{item.title}</span>\n                                       <ChevronRight className=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                                    </SidebarMenuButton>\n                                 </CollapsibleTrigger>\n                                 <CollapsibleContent>\n                                    <SidebarMenuSub>\n                                       {item.items.map((subItem, subIndex) => (\n                                          <SidebarMenuSubItem key={subIndex}>\n                                             <SidebarMenuSubButton asChild>\n                                                <a href={subItem.url}>\n                                                   <span>{subItem.title}</span>\n                                                </a>\n                                             </SidebarMenuSubButton>\n                                          </SidebarMenuSubItem>\n                                       ))}\n                                    </SidebarMenuSub>\n                                 </CollapsibleContent>\n                              </SidebarMenuItem>\n                           </Collapsible>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-menu-sub.json b/apps/web/public/v0/styles/default/sidebar-menu-sub.json
new file mode 100644
index 00000000..11856096
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-menu-sub.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-sub",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-sub.tsx",
+      "content": "\"use client\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst items = [\n   {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Installation\",\n            url: \"#\",\n         },\n         {\n            title: \"Project Structure\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Routing\",\n            url: \"#\",\n         },\n         {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n         },\n         {\n            title: \"Rendering\",\n            url: \"#\",\n         },\n         {\n            title: \"Caching\",\n            url: \"#\",\n         },\n         {\n            title: \"Styling\",\n            url: \"#\",\n         },\n         {\n            title: \"Optimizing\",\n            url: \"#\",\n         },\n         {\n            title: \"Configuring\",\n            url: \"#\",\n         },\n         {\n            title: \"Testing\",\n            url: \"#\",\n         },\n         {\n            title: \"Authentication\",\n            url: \"#\",\n         },\n         {\n            title: \"Deploying\",\n            url: \"#\",\n         },\n         {\n            title: \"Upgrading\",\n            url: \"#\",\n         },\n         {\n            title: \"Examples\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Components\",\n            url: \"#\",\n         },\n         {\n            title: \"File Conventions\",\n            url: \"#\",\n         },\n         {\n            title: \"Functions\",\n            url: \"#\",\n         },\n         {\n            title: \"next.config.js Options\",\n            url: \"#\",\n         },\n         {\n            title: \"CLI\",\n            url: \"#\",\n         },\n         {\n            title: \"Edge Runtime\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Accessibility\",\n            url: \"#\",\n         },\n         {\n            title: \"Fast Refresh\",\n            url: \"#\",\n         },\n         {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n         },\n         {\n            title: \"Supported Browsers\",\n            url: \"#\",\n         },\n         {\n            title: \"Turbopack\",\n            url: \"#\",\n         },\n      ],\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {items.map((item, index) => (\n                           <SidebarMenuItem key={index}>\n                              <SidebarMenuButton asChild>\n                                 <a href={item.url}>\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              <SidebarMenuSub>\n                                 {item.items.map((subItem, subIndex) => (\n                                    <SidebarMenuSubItem key={subIndex}>\n                                       <SidebarMenuSubButton asChild>\n                                          <a href={subItem.url}>\n                                             <span>{subItem.title}</span>\n                                          </a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-menu.json b/apps/web/public/v0/styles/default/sidebar-menu.json
new file mode 100644
index 00000000..3c576fdf
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-menu.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton asChild>\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar-rsc.json b/apps/web/public/v0/styles/default/sidebar-rsc.json
new file mode 100644
index 00000000..b3c385fc
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar-rsc.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-rsc",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-rsc.tsx",
+      "content": "import { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSkeleton,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n      badge: \"24\",\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n      badge: \"12\",\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n      badge: \"3\",\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n      badge: \"21\",\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n      badge: \"8\",\n   },\n]\n\n// Dummy fetch function\nasync function fetchProjects() {\n   await new Promise((resolve) => setTimeout(resolve, 3000))\n   return projects\n}\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <React.Suspense fallback={<NavProjectsSkeleton />}>\n                        <NavProjects />\n                     </React.Suspense>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n\nfunction NavProjectsSkeleton() {\n   return (\n      <SidebarMenu>\n         {Array.from({ length: 5 }).map((_, index) => (\n            <SidebarMenuItem key={index}>\n               <SidebarMenuSkeleton showIcon />\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n\nasync function NavProjects() {\n   const projects = await fetchProjects()\n\n   return (\n      <SidebarMenu>\n         {projects.map((project) => (\n            <SidebarMenuItem key={project.name}>\n               <SidebarMenuButton asChild>\n                  <a href={project.url}>\n                     <project.icon />\n                     <span>{project.name}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sidebar.json b/apps/web/public/v0/styles/default/sidebar.json
new file mode 100644
index 00000000..8fa1b016
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sidebar.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-slot",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "separator",
+    "sheet",
+    "tooltip",
+    "input",
+    "use-mobile",
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "ui/sidebar.tsx",
+      "content": "\"use client\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport { PanelLeft } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { useIsMobile } from \"@/hooks/use-mobile\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Sheet, SheetContent } from \"@/components/ui/sheet\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar:state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ninterface SidebarContext {\n   state: \"expanded\" | \"collapsed\"\n   open: boolean\n   setOpen: (open: boolean) => void\n   openMobile: boolean\n   setOpenMobile: (open: boolean) => void\n   isMobile: boolean\n   toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n   const context = React.useContext(SidebarContext)\n   if (!context) {\n      throw new Error(\"useSidebar must be used within a Sidebar.\")\n   }\n\n   return context\n}\n\nconst SidebarProvider = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      defaultOpen?: boolean\n      open?: boolean\n      onOpenChange?: (open: boolean) => void\n   }\n>(\n   (\n      {\n         defaultOpen = true,\n         open: openProp,\n         onOpenChange: setOpenProp,\n         className,\n         style,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const isMobile = useIsMobile()\n      const [openMobile, setOpenMobile] = React.useState(false)\n\n      // This is the internal state of the sidebar.\n      // We use openProp and setOpenProp for control from outside the component.\n      const [_open, _setOpen] = React.useState(defaultOpen)\n      const open = openProp ?? _open\n      const setOpen = React.useCallback(\n         (value: boolean | ((value: boolean) => boolean)) => {\n            if (setOpenProp) {\n               return setOpenProp?.(\n                  typeof value === \"function\" ? value(open) : value,\n               )\n            }\n\n            _setOpen(value)\n\n            // This sets the cookie to keep the sidebar state.\n            document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n         },\n         [setOpenProp, open],\n      )\n\n      // Helper to toggle the sidebar.\n      const toggleSidebar = React.useCallback(() => {\n         return isMobile\n            ? setOpenMobile((open) => !open)\n            : setOpen((open) => !open)\n      }, [isMobile, setOpen, setOpenMobile])\n\n      // Adds a keyboard shortcut to toggle the sidebar.\n      React.useEffect(() => {\n         const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n               event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n               (event.metaKey || event.ctrlKey)\n            ) {\n               event.preventDefault()\n               toggleSidebar()\n            }\n         }\n\n         window.addEventListener(\"keydown\", handleKeyDown)\n         return () => window.removeEventListener(\"keydown\", handleKeyDown)\n      }, [toggleSidebar])\n\n      // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n      // This makes it easier to style the sidebar with Tailwind classes.\n      const state = open ? \"expanded\" : \"collapsed\"\n\n      const contextValue = React.useMemo<SidebarContext>(\n         () => ({\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n         }),\n         [\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n         ],\n      )\n\n      return (\n         <SidebarContext.Provider value={contextValue}>\n            <TooltipProvider delayDuration={0}>\n               <div\n                  style={\n                     {\n                        \"--sidebar-width\": SIDEBAR_WIDTH,\n                        \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n                        ...style,\n                     } as React.CSSProperties\n                  }\n                  className={cn(\n                     \"group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full\",\n                     className,\n                  )}\n                  ref={ref}\n                  {...props}\n               >\n                  {children}\n               </div>\n            </TooltipProvider>\n         </SidebarContext.Provider>\n      )\n   },\n)\nSidebarProvider.displayName = \"SidebarProvider\"\n\nconst Sidebar = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      side?: \"left\" | \"right\"\n      variant?: \"sidebar\" | \"floating\" | \"inset\"\n      collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n   }\n>(\n   (\n      {\n         side = \"left\",\n         variant = \"sidebar\",\n         collapsible = \"offcanvas\",\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n      if (collapsible === \"none\") {\n         return (\n            <div\n               className={cn(\n                  \"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col\",\n                  className,\n               )}\n               ref={ref}\n               {...props}\n            >\n               {children}\n            </div>\n         )\n      }\n\n      if (isMobile) {\n         return (\n            <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n               <SheetContent\n                  data-sidebar=\"sidebar\"\n                  data-mobile=\"true\"\n                  className=\"bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden\"\n                  style={\n                     {\n                        \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n                     } as React.CSSProperties\n                  }\n                  side={side}\n               >\n                  <div className=\"flex size-full flex-col\">{children}</div>\n               </SheetContent>\n            </Sheet>\n         )\n      }\n\n      return (\n         <div\n            ref={ref}\n            className=\"group peer hidden md:block\"\n            data-state={state}\n            data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n            data-variant={variant}\n            data-side={side}\n         >\n            {/* This is what handles the sidebar gap on desktop */}\n            <div\n               className={cn(\n                  \"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear\",\n                  \"group-data-[collapsible=offcanvas]:w-0\",\n                  \"group-data-[side=right]:rotate-180\",\n                  variant === \"floating\" || variant === \"inset\"\n                     ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n                     : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\",\n               )}\n            />\n            <div\n               className={cn(\n                  \"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex\",\n                  side === \"left\"\n                     ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n                     : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n                  // Adjust the padding for floating and inset variants.\n                  variant === \"floating\" || variant === \"inset\"\n                     ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n                     : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n                  className,\n               )}\n               {...props}\n            >\n               <div\n                  data-sidebar=\"sidebar\"\n                  className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow\"\n               >\n                  {children}\n               </div>\n            </div>\n         </div>\n      )\n   },\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarTrigger = React.forwardRef<\n   React.ElementRef<typeof Button>,\n   React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <Button\n         ref={ref}\n         data-sidebar=\"trigger\"\n         variant=\"ghost\"\n         size=\"icon\"\n         className={cn(\"size-7\", className)}\n         onClick={(event) => {\n            onClick?.(event)\n            toggleSidebar()\n         }}\n         {...props}\n      >\n         <PanelLeft />\n         <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n   )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst SidebarRail = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <button\n         ref={ref}\n         data-sidebar=\"rail\"\n         aria-label=\"Toggle Sidebar\"\n         tabIndex={-1}\n         onClick={toggleSidebar}\n         title=\"Toggle Sidebar\"\n         className={cn(\n            \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n            \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n            \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n            \"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n            \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n            \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarRail.displayName = \"SidebarRail\"\n\nconst SidebarInset = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"main\">\n>(({ className, ...props }, ref) => {\n   return (\n      <main\n         ref={ref}\n         className={cn(\n            \"bg-background relative flex min-h-svh flex-1 flex-col\",\n            \"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarInset.displayName = \"SidebarInset\"\n\nconst SidebarInput = React.forwardRef<\n   React.ElementRef<typeof Input>,\n   React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n   return (\n      <Input\n         ref={ref}\n         data-sidebar=\"input\"\n         className={cn(\n            \"bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarInput.displayName = \"SidebarInput\"\n\nconst SidebarHeader = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"header\"\n         className={cn(\"flex flex-col gap-2 p-2\", className)}\n         {...props}\n      />\n   )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\nconst SidebarFooter = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"footer\"\n         className={cn(\"flex flex-col gap-2 p-2\", className)}\n         {...props}\n      />\n   )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarSeparator = React.forwardRef<\n   React.ElementRef<typeof Separator>,\n   React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n   return (\n      <Separator\n         ref={ref}\n         data-sidebar=\"separator\"\n         className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n         {...props}\n      />\n   )\n})\nSidebarSeparator.displayName = \"SidebarSeparator\"\n\nconst SidebarContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"content\"\n         className={cn(\n            \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\nconst SidebarGroup = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"group\"\n         className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n         {...props}\n      />\n   )\n})\nSidebarGroup.displayName = \"SidebarGroup\"\n\nconst SidebarGroupLabel = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"div\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"group-label\"\n         className={cn(\n            \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n            \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\"\n\nconst SidebarGroupAction = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"button\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"group-action\"\n         className={cn(\n            \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n            // Increases the hit area of the button on mobile.\n            \"after:absolute after:-inset-2 after:md:hidden\",\n            \"group-data-[collapsible=icon]:hidden\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarGroupAction.displayName = \"SidebarGroupAction\"\n\nconst SidebarGroupContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n   />\n))\nSidebarGroupContent.displayName = \"SidebarGroupContent\"\n\nconst SidebarMenu = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n   />\n))\nSidebarMenu.displayName = \"SidebarMenu\"\n\nconst SidebarMenuItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n   />\n))\nSidebarMenuItem.displayName = \"SidebarMenuItem\"\n\nconst sidebarMenuButtonVariants = cva(\n   \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n   {\n      variants: {\n         variant: {\n            default:\n               \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n            outline:\n               \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n         },\n         size: {\n            default: \"h-8 text-sm\",\n            sm: \"h-7 text-xs\",\n            lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n         size: \"default\",\n      },\n   },\n)\n\nconst SidebarMenuButton = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\"> & {\n      asChild?: boolean\n      isActive?: boolean\n      tooltip?: string | React.ComponentProps<typeof TooltipContent>\n   } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n   (\n      {\n         asChild = false,\n         isActive = false,\n         variant = \"default\",\n         size = \"default\",\n         tooltip,\n         className,\n         ...props\n      },\n      ref,\n   ) => {\n      const Comp = asChild ? Slot : \"button\"\n      const { isMobile, state } = useSidebar()\n\n      const button = (\n         <Comp\n            ref={ref}\n            data-sidebar=\"menu-button\"\n            data-size={size}\n            data-active={isActive}\n            className={cn(\n               sidebarMenuButtonVariants({ variant, size }),\n               className,\n            )}\n            {...props}\n         />\n      )\n\n      if (!tooltip) {\n         return button\n      }\n\n      if (typeof tooltip === \"string\") {\n         tooltip = {\n            children: tooltip,\n         }\n      }\n\n      return (\n         <Tooltip>\n            <TooltipTrigger asChild>{button}</TooltipTrigger>\n            <TooltipContent\n               side=\"right\"\n               align=\"center\"\n               hidden={state !== \"collapsed\" || isMobile}\n               {...tooltip}\n            />\n         </Tooltip>\n      )\n   },\n)\nSidebarMenuButton.displayName = \"SidebarMenuButton\"\n\nconst SidebarMenuAction = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\"> & {\n      asChild?: boolean\n      showOnHover?: boolean\n   }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"button\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"menu-action\"\n         className={cn(\n            \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n            // Increases the hit area of the button on mobile.\n            \"after:absolute after:-inset-2 after:md:hidden\",\n            \"peer-data-[size=sm]/menu-button:top-1\",\n            \"peer-data-[size=default]/menu-button:top-1.5\",\n            \"peer-data-[size=lg]/menu-button:top-2.5\",\n            \"group-data-[collapsible=icon]:hidden\",\n            showOnHover &&\n               \"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarMenuAction.displayName = \"SidebarMenuAction\"\n\nconst SidebarMenuBadge = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n         \"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums\",\n         \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n         \"peer-data-[size=sm]/menu-button:top-1\",\n         \"peer-data-[size=default]/menu-button:top-1.5\",\n         \"peer-data-[size=lg]/menu-button:top-2.5\",\n         \"group-data-[collapsible=icon]:hidden\",\n         className,\n      )}\n      {...props}\n   />\n))\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\"\n\nconst SidebarMenuSkeleton = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      showIcon?: boolean\n   }\n>(({ className, showIcon = false, ...props }, ref) => {\n   // Random width between 50 to 90%.\n   const width = React.useMemo(() => {\n      return `${Math.floor(Math.random() * 40) + 50}%`\n   }, [])\n\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"menu-skeleton\"\n         className={cn(\n            \"flex h-8 items-center gap-2 rounded-md px-2\",\n            className,\n         )}\n         {...props}\n      >\n         {showIcon && (\n            <Skeleton\n               className=\"size-4 rounded-md\"\n               data-sidebar=\"menu-skeleton-icon\"\n            />\n         )}\n         <Skeleton\n            className=\"h-4 max-w-[--skeleton-width] flex-1\"\n            data-sidebar=\"menu-skeleton-text\"\n            style={\n               {\n                  \"--skeleton-width\": width,\n               } as React.CSSProperties\n            }\n         />\n      </div>\n   )\n})\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\n\nconst SidebarMenuSub = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n         \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n         \"group-data-[collapsible=icon]:hidden\",\n         className,\n      )}\n      {...props}\n   />\n))\nSidebarMenuSub.displayName = \"SidebarMenuSub\"\n\nconst SidebarMenuSubItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<\"li\">\n>(({ ...props }, ref) => <li ref={ref} {...props} />)\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\"\n\nconst SidebarMenuSubButton = React.forwardRef<\n   HTMLAnchorElement,\n   React.ComponentProps<\"a\"> & {\n      asChild?: boolean\n      size?: \"sm\" | \"md\"\n      isActive?: boolean\n   }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"a\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"menu-sub-button\"\n         data-size={size}\n         data-active={isActive}\n         className={cn(\n            \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n            \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n            size === \"sm\" && \"text-xs\",\n            size === \"md\" && \"text-sm\",\n            \"group-data-[collapsible=icon]:hidden\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\"\n\nexport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupAction,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSkeleton,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "sidebar": {
+              "DEFAULT": "hsl(var(--sidebar-background))",
+              "foreground": "hsl(var(--sidebar-foreground))",
+              "primary": "hsl(var(--sidebar-primary))",
+              "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+              "accent": "hsl(var(--sidebar-accent))",
+              "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+              "border": "hsl(var(--sidebar-border))",
+              "ring": "hsl(var(--sidebar-ring))"
+            }
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "sidebar-background": "0 0% 98%",
+      "sidebar-foreground": "240 5.3% 26.1%",
+      "sidebar-primary": "240 5.9% 10%",
+      "sidebar-primary-foreground": "0 0% 98%",
+      "sidebar-accent": "240 4.8% 95.9%",
+      "sidebar-accent-foreground": "240 5.9% 10%",
+      "sidebar-border": "220 13% 91%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    },
+    "dark": {
+      "sidebar-background": "240 5.9% 10%",
+      "sidebar-foreground": "240 4.8% 95.9%",
+      "sidebar-primary": "224.3 76.3% 48%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "240 3.7% 15.9%",
+      "sidebar-accent-foreground": "240 4.8% 95.9%",
+      "sidebar-border": "240 3.7% 15.9%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sink.json b/apps/web/public/v0/styles/default/sink.json
new file mode 100644
index 00000000..13e26fcf
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sink.json
@@ -0,0 +1,452 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sink",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "accordion",
+    "alert",
+    "alert-dialog",
+    "aspect-ratio",
+    "avatar",
+    "badge",
+    "breadcrumb",
+    "button",
+    "calendar",
+    "card",
+    "carousel",
+    "chart",
+    "checkbox",
+    "collapsible",
+    "command",
+    "context-menu",
+    "dialog",
+    "drawer",
+    "dropdown-menu",
+    "hover-card",
+    "input",
+    "input-otp",
+    "label",
+    "menubar",
+    "navigation-menu",
+    "pagination",
+    "popover",
+    "progress",
+    "radio-group",
+    "resizable",
+    "scroll-area",
+    "select",
+    "separator",
+    "sheet",
+    "sidebar",
+    "skeleton",
+    "slider",
+    "sonner",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "toast",
+    "toggle",
+    "toggle-group",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "internal/sink/page.tsx",
+      "content": "import { AccordionDemo } from \"@/components/accordion-demo\"\nimport { AlertDemo } from \"@/components/alert-demo\"\nimport { AlertDialogDemo } from \"@/components/alert-dialog-demo\"\nimport { AppSidebar } from \"@/components/app-sidebar\"\nimport { AspectRatioDemo } from \"@/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"@/components/avatar-demo\"\nimport { BadgeDemo } from \"@/components/badge-demo\"\nimport { BadgeDestructive } from \"@/components/badge-destructive\"\nimport { BadgeOutline } from \"@/components/badge-outline\"\nimport { BadgeSecondary } from \"@/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"@/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"@/components/button-demo\"\nimport { ButtonDestructive } from \"@/components/button-destructive\"\nimport { ButtonGhost } from \"@/components/button-ghost\"\nimport { ButtonLink } from \"@/components/button-link\"\nimport { ButtonLoading } from \"@/components/button-loading\"\nimport { ButtonOutline } from \"@/components/button-outline\"\nimport { ButtonSecondary } from \"@/components/button-secondary\"\nimport { ButtonWithIcon } from \"@/components/button-with-icon\"\nimport { CalendarDemo } from \"@/components/calendar-demo\"\nimport { CardDemo } from \"@/components/card-demo\"\nimport { CarouselDemo } from \"@/components/carousel-demo\"\nimport { CheckboxDemo } from \"@/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"@/components/collapsible-demo\"\nimport { ComboboxDemo } from \"@/components/combobox-demo\"\nimport { CommandDemo } from \"@/components/command-demo\"\nimport { ComponentWrapper } from \"@/components/component-wrapper\"\nimport { ContextMenuDemo } from \"@/components/context-menu-demo\"\nimport { DatePickerDemo } from \"@/components/date-picker-demo\"\nimport { DialogDemo } from \"@/components/dialog-demo\"\nimport { DrawerDemo } from \"@/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"@/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"@/components/hover-card-demo\"\nimport { InputDemo } from \"@/components/input-demo\"\nimport { InputOTPDemo } from \"@/components/input-otp-demo\"\nimport { LabelDemo } from \"@/components/label-demo\"\nimport { MenubarDemo } from \"@/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"@/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"@/components/pagination-demo\"\nimport { PopoverDemo } from \"@/components/popover-demo\"\nimport { ProgressDemo } from \"@/components/progress-demo\"\nimport { RadioGroupDemo } from \"@/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"@/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"@/components/scroll-area-demo\"\nimport { SelectDemo } from \"@/components/select-demo\"\nimport { SeparatorDemo } from \"@/components/separator-demo\"\nimport { SheetDemo } from \"@/components/sheet-demo\"\nimport { SkeletonDemo } from \"@/components/skeleton-demo\"\nimport { SliderDemo } from \"@/components/slider-demo\"\nimport { SonnerDemo } from \"@/components/sonner-demo\"\nimport { SwitchDemo } from \"@/components/switch-demo\"\nimport { TableDemo } from \"@/components/table-demo\"\nimport { TabsDemo } from \"@/components/tabs-demo\"\nimport { TextareaDemo } from \"@/components/textarea-demo\"\nimport { ToastDemo } from \"@/components/toast-demo\"\nimport { ToggleDemo } from \"@/components/toggle-demo\"\nimport { ToggleDisabled } from \"@/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"@/components/toggle-group-demo\"\nimport { ToggleOutline } from \"@/components/toggle-outline\"\nimport { ToggleWithText } from \"@/components/toggle-with-text\"\nimport { TooltipDemo } from \"@/components/tooltip-demo\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function SinkPage() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n                  <ComponentWrapper name=\"Accordion\">\n                     <AccordionDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Alert\">\n                     <AlertDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"AlertDialog\">\n                     <AlertDialogDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"AspectRatio\">\n                     <AspectRatioDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Avatar\">\n                     <AvatarDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Badge\">\n                     <BadgeDemo />\n                     <BadgeDestructive />\n                     <BadgeOutline />\n                     <BadgeSecondary />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Breadcrumb\">\n                     <BreadcrumbDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Button\">\n                     <div className=\"flex items-center gap-2\">\n                        <ButtonDemo />\n                        <ButtonDestructive />\n                        <ButtonGhost />\n                        <ButtonLink />\n                     </div>\n                     <div className=\"flex items-center gap-2\">\n                        <ButtonLoading />\n                        <ButtonOutline />\n                        <ButtonSecondary />\n                     </div>\n                     <div className=\"flex items-center gap-2\">\n                        <ButtonWithIcon />\n                     </div>\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Calendar\">\n                     <CalendarDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Card\">\n                     <CardDemo className=\"w-full\" />\n                  </ComponentWrapper>\n                  <ComponentWrapper\n                     name=\"Carousel\"\n                     className=\"[&_.max-w-xs]:max-w-[70%]\"\n                  >\n                     <CarouselDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Checkbox\">\n                     <CheckboxDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Collapsible\">\n                     <CollapsibleDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Combobox\">\n                     <ComboboxDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper\n                     name=\"Command\"\n                     className=\"[&_[cmdk-root]]:md:min-w-max\"\n                  >\n                     <CommandDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"ContextMenu\">\n                     <ContextMenuDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"DatePicker\">\n                     <DatePickerDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Dialog\">\n                     <DialogDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Drawer\">\n                     <DrawerDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"DropdownMenu\">\n                     <DropdownMenuDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"HoverCard\">\n                     <HoverCardDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Input\">\n                     <InputDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"InputOTP\">\n                     <InputOTPDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Label\">\n                     <LabelDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Menubar\">\n                     <MenubarDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper\n                     name=\"NavigationMenu\"\n                     className=\"col-span-2\"\n                  >\n                     <NavigationMenuDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Pagination\">\n                     <PaginationDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Popover\">\n                     <PopoverDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Progress\">\n                     <ProgressDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"RadioGroup\">\n                     <RadioGroupDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Resizable\" className=\"col-span-2\">\n                     <ResizableHandleDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"ScrollArea\">\n                     <ScrollAreaDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Select\">\n                     <SelectDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Separator\">\n                     <SeparatorDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Sheet\">\n                     <SheetDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Skeleton\">\n                     <SkeletonDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Slider\">\n                     <SliderDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Sonner\">\n                     <SonnerDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Switch\">\n                     <SwitchDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Table\" className=\"col-span-2\">\n                     <TableDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Tabs\">\n                     <TabsDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Textarea\">\n                     <TextareaDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Toast\">\n                     <ToastDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Toggle\">\n                     <div className=\"flex items-center gap-2\">\n                        <ToggleDemo />\n                        <ToggleDisabled />\n                        <ToggleOutline />\n                        <ToggleWithText />\n                     </div>\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"ToggleGroup\">\n                     <ToggleGroupDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Tooltip\">\n                     <TooltipDemo />\n                  </ComponentWrapper>\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/sink/page.tsx"
+    },
+    {
+      "path": "internal/sink/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   GalleryVerticalEnd,\n   Map,\n   PieChart,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"@/components/nav-main\"\nimport { NavProjects } from \"@/components/nav-projects\"\nimport { NavUser } from \"@/components/nav-user\"\nimport { TeamSwitcher } from \"@/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: GalleryVerticalEnd,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar collapsible=\"icon\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/component-wrapper.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nexport function ComponentWrapper({\n   className,\n   name,\n   children,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & { name: string }) {\n   return (\n      <div\n         className={cn(\"flex w-full flex-col rounded-lg border\", className)}\n         {...props}\n      >\n         <div className=\"border-b px-4 py-3\">\n            <div className=\"text-sm font-medium\">{name}</div>\n         </div>\n         <div className=\"flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full\">\n            {children}\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n               >\n                  <SidebarMenuItem>\n                     <CollapsibleTrigger asChild>\n                        <SidebarMenuButton tooltip={item.title}>\n                           {item.icon && <item.icon />}\n                           <span>{item.title}</span>\n                           <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                     </CollapsibleTrigger>\n                     <CollapsibleContent>\n                        <SidebarMenuSub>\n                           {item.items?.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                 <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                       <span>{subItem.title}</span>\n                                    </a>\n                                 </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                           ))}\n                        </SidebarMenuSub>\n                     </CollapsibleContent>\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   Forward,\n   type LucideIcon,\n   MoreHorizontal,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Forward className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-4\" />\n                     </div>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {activeTeam.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                           {activeTeam.plan}\n                        </span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/accordion-demo.tsx",
+      "content": "import {\n   Accordion,\n   AccordionContent,\n   AccordionItem,\n   AccordionTrigger,\n} from \"@/components/ui/accordion\"\n\nexport function AccordionDemo() {\n   return (\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n         <AccordionItem value=\"item-1\">\n            <AccordionTrigger>Is it accessible?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It adheres to the WAI-ARIA design pattern.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-2\">\n            <AccordionTrigger>Is it styled?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It comes with default styles that matches the other\n               components&apos; aesthetic.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-3\">\n            <AccordionTrigger>Is it animated?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It's animated by default, but you can disable it if you\n               prefer.\n            </AccordionContent>\n         </AccordionItem>\n      </Accordion>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\n\nexport function AlertDemo() {\n   return (\n      <Alert>\n         <Terminal className=\"h-4 w-4\" />\n         <AlertTitle>Heads up!</AlertTitle>\n         <AlertDescription>\n            You can add components to your app using the cli.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-dialog-demo.tsx",
+      "content": "import {\n   AlertDialog,\n   AlertDialogAction,\n   AlertDialogCancel,\n   AlertDialogContent,\n   AlertDialogDescription,\n   AlertDialogFooter,\n   AlertDialogHeader,\n   AlertDialogTitle,\n   AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\"\nimport { Button } from \"@/components/ui/button\"\n\nexport function AlertDialogDemo() {\n   return (\n      <AlertDialog>\n         <AlertDialogTrigger asChild>\n            <Button variant=\"outline\">Show Dialog</Button>\n         </AlertDialogTrigger>\n         <AlertDialogContent>\n            <AlertDialogHeader>\n               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n               <AlertDialogDescription>\n                  This action cannot be undone. This will permanently delete\n                  your account and remove your data from our servers.\n               </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n               <AlertDialogCancel>Cancel</AlertDialogCancel>\n               <AlertDialogAction>Continue</AlertDialogAction>\n            </AlertDialogFooter>\n         </AlertDialogContent>\n      </AlertDialog>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\"\n\nexport function AspectRatioDemo() {\n   return (\n      <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n         <Image\n            src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n            alt=\"Photo by Drew Beamer\"\n            fill\n            className=\"h-full w-full rounded-md object-cover\"\n         />\n      </AspectRatio>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/avatar-demo.tsx",
+      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\n\nexport function AvatarDemo() {\n   return (\n      <Avatar>\n         <AvatarImage src=\"https://github.com/nyxb.png\" alt=\"@nyxb\" />\n         <AvatarFallback>CN</AvatarFallback>\n      </Avatar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-demo.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport function BadgeDemo() {\n   return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/breadcrumb-demo.tsx",
+      "content": "import {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                     <span className=\"sr-only\">Toggle menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/docs/components\">\n                  Components\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport function ButtonDemo() {\n   return <Button>Button</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/components/ui/calendar\"\n\nexport function CalendarDemo() {\n   const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n   return (\n      <Calendar\n         mode=\"single\"\n         selected={date}\n         onSelect={setDate}\n         className=\"rounded-md border shadow\"\n      />\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Switch } from \"@/components/ui/switch\"\n\nconst notifications = [\n   {\n      title: \"Your call has been confirmed.\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"You have a new message!\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"Your subscription is expiring soon!\",\n      description: \"2 hours ago\",\n   },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport function CardDemo({ className, ...props }: CardProps) {\n   return (\n      <Card className={cn(\"w-[380px]\", className)} {...props}>\n         <CardHeader>\n            <CardTitle>Notifications</CardTitle>\n            <CardDescription>You have 3 unread messages.</CardDescription>\n         </CardHeader>\n         <CardContent className=\"grid gap-4\">\n            <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n               <BellRing />\n               <div className=\"flex-1 space-y-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                     Push Notifications\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                     Send notifications to device.\n                  </p>\n               </div>\n               <Switch />\n            </div>\n            <div>\n               {notifications.map((notification, index) => (\n                  <div\n                     key={index}\n                     className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n                  >\n                     <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n                     <div className=\"space-y-1\">\n                        <p className=\"text-sm font-medium leading-none\">\n                           {notification.title}\n                        </p>\n                        <p className=\"text-sm text-muted-foreground\">\n                           {notification.description}\n                        </p>\n                     </div>\n                  </div>\n               ))}\n            </div>\n         </CardContent>\n         <CardFooter>\n            <Button className=\"w-full\">\n               <Check /> Mark all as read\n            </Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport function CarouselDemo() {\n   return (\n      <Carousel className=\"w-full max-w-xs\">\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/components/ui/checkbox\"\n\nexport function CheckboxDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms\" />\n         <label\n            htmlFor=\"terms\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\n\nexport function CollapsibleDemo() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   return (\n      <Collapsible\n         open={isOpen}\n         onOpenChange={setIsOpen}\n         className=\"w-[350px] space-y-2\"\n      >\n         <div className=\"flex items-center justify-between space-x-4 px-4\">\n            <h4 className=\"text-sm font-semibold\">\n               @peduarte starred 3 repositories\n            </h4>\n            <CollapsibleTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <ChevronsUpDown className=\"h-4 w-4\" />\n                  <span className=\"sr-only\">Toggle</span>\n               </Button>\n            </CollapsibleTrigger>\n         </div>\n         <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n            @radix-ui/primitives\n         </div>\n         <CollapsibleContent className=\"space-y-2\">\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @radix-ui/colors\n            </div>\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @stitches/react\n            </div>\n         </CollapsibleContent>\n      </Collapsible>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nconst frameworks = [\n   {\n      value: \"next.js\",\n      label: \"Next.js\",\n   },\n   {\n      value: \"sveltekit\",\n      label: \"SvelteKit\",\n   },\n   {\n      value: \"nuxt.js\",\n      label: \"Nuxt.js\",\n   },\n   {\n      value: \"remix\",\n      label: \"Remix\",\n   },\n   {\n      value: \"astro\",\n      label: \"Astro\",\n   },\n]\n\nexport function ComboboxDemo() {\n   const [open, setOpen] = React.useState(false)\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <Popover open={open} onOpenChange={setOpen}>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               role=\"combobox\"\n               aria-expanded={open}\n               className=\"w-[200px] justify-between\"\n            >\n               {value\n                  ? frameworks.find((framework) => framework.value === value)\n                       ?.label\n                  : \"Select framework...\"}\n               <ChevronsUpDown className=\"opacity-50\" />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[200px] p-0\">\n            <Command>\n               <CommandInput\n                  placeholder=\"Search framework...\"\n                  className=\"h-9\"\n               />\n               <CommandList>\n                  <CommandEmpty>No framework found.</CommandEmpty>\n                  <CommandGroup>\n                     {frameworks.map((framework) => (\n                        <CommandItem\n                           key={framework.value}\n                           value={framework.value}\n                           onSelect={(currentValue) => {\n                              setValue(\n                                 currentValue === value ? \"\" : currentValue,\n                              )\n                              setOpen(false)\n                           }}\n                        >\n                           {framework.label}\n                           <Check\n                              className={cn(\n                                 \"ml-auto\",\n                                 value === framework.value\n                                    ? \"opacity-100\"\n                                    : \"opacity-0\",\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/command-demo.tsx",
+      "content": "import {\n   Calculator,\n   Calendar,\n   CreditCard,\n   Settings,\n   Smile,\n   User,\n} from \"lucide-react\"\n\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from \"@/components/ui/command\"\n\nexport function CommandDemo() {\n   return (\n      <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n         <CommandInput placeholder=\"Type a command or search...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Suggestions\">\n               <CommandItem>\n                  <Calendar />\n                  <span>Calendar</span>\n               </CommandItem>\n               <CommandItem>\n                  <Smile />\n                  <span>Search Emoji</span>\n               </CommandItem>\n               <CommandItem disabled>\n                  <Calculator />\n                  <span>Calculator</span>\n               </CommandItem>\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup heading=\"Settings\">\n               <CommandItem>\n                  <User />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <CreditCard />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <Settings />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n               </CommandItem>\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/context-menu-demo.tsx",
+      "content": "import {\n   ContextMenu,\n   ContextMenuCheckboxItem,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuLabel,\n   ContextMenuRadioGroup,\n   ContextMenuRadioItem,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuTrigger,\n} from \"@/components/ui/context-menu\"\n\nexport function ContextMenuDemo() {\n   return (\n      <ContextMenu>\n         <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n            Right click here\n         </ContextMenuTrigger>\n         <ContextMenuContent className=\"w-64\">\n            <ContextMenuItem inset>\n               Back\n               <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset disabled>\n               Forward\n               <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset>\n               Reload\n               <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSub>\n               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n               <ContextMenuSubContent className=\"w-48\">\n                  <ContextMenuItem>\n                     Save Page As...\n                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n                  </ContextMenuItem>\n                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                  <ContextMenuItem>Name Window...</ContextMenuItem>\n                  <ContextMenuSeparator />\n                  <ContextMenuItem>Developer Tools</ContextMenuItem>\n               </ContextMenuSubContent>\n            </ContextMenuSub>\n            <ContextMenuSeparator />\n            <ContextMenuCheckboxItem checked>\n               Show Bookmarks Bar\n               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuSeparator />\n            <ContextMenuRadioGroup value=\"pedro\">\n               <ContextMenuLabel inset>People</ContextMenuLabel>\n               <ContextMenuSeparator />\n               <ContextMenuRadioItem value=\"pedro\">\n                  Pedro Duarte\n               </ContextMenuRadioItem>\n               <ContextMenuRadioItem value=\"colm\">\n                  Colm Tuite\n               </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n         </ContextMenuContent>\n      </ContextMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport function DatePickerDemo() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant={\"outline\"}\n               className={cn(\n                  \"w-[240px] justify-start text-left font-normal\",\n                  !date && \"text-muted-foreground\",\n               )}\n            >\n               <CalendarIcon />\n               {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n               mode=\"single\"\n               selected={date}\n               onSelect={setDate}\n               initialFocus\n            />\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dialog-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function DialogDemo() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-[425px]\">\n            <DialogHeader>\n               <DialogTitle>Edit profile</DialogTitle>\n               <DialogDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"@peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <DialogFooter>\n               <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport { Minus, Plus } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"@/components/ui/drawer\"\n\nconst data = [\n   {\n      goal: 400,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 239,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 349,\n   },\n]\n\nexport function DrawerDemo() {\n   const [goal, setGoal] = React.useState(350)\n\n   function onClick(adjustment: number) {\n      setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n   }\n\n   return (\n      <Drawer>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Open Drawer</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mx-auto w-full max-w-sm\">\n               <DrawerHeader>\n                  <DrawerTitle>Move Goal</DrawerTitle>\n                  <DrawerDescription>\n                     Set your daily activity goal.\n                  </DrawerDescription>\n               </DrawerHeader>\n               <div className=\"p-4 pb-0\">\n                  <div className=\"flex items-center justify-center space-x-2\">\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"h-8 w-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(-10)}\n                        disabled={goal <= 200}\n                     >\n                        <Minus />\n                        <span className=\"sr-only\">Decrease</span>\n                     </Button>\n                     <div className=\"flex-1 text-center\">\n                        <div className=\"text-7xl font-bold tracking-tighter\">\n                           {goal}\n                        </div>\n                        <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                           Calories/day\n                        </div>\n                     </div>\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"h-8 w-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(10)}\n                        disabled={goal >= 400}\n                     >\n                        <Plus />\n                        <span className=\"sr-only\">Increase</span>\n                     </Button>\n                  </div>\n                  <div className=\"mt-3 h-[120px]\">\n                     <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data}>\n                           <Bar\n                              dataKey=\"goal\"\n                              style={\n                                 {\n                                    fill: \"hsl(var(--foreground))\",\n                                    opacity: 0.9,\n                                 } as React.CSSProperties\n                              }\n                           />\n                        </BarChart>\n                     </ResponsiveContainer>\n                  </div>\n               </div>\n               <DrawerFooter>\n                  <Button>Submit</Button>\n                  <DrawerClose asChild>\n                     <Button variant=\"outline\">Cancel</Button>\n                  </DrawerClose>\n               </DrawerFooter>\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuPortal,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport function DropdownMenuDemo() {\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  Profile\n                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Billing\n                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Settings\n                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Keyboard shortcuts\n                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>Team</DropdownMenuItem>\n               <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                     <DropdownMenuSubContent>\n                        <DropdownMenuItem>Email</DropdownMenuItem>\n                        <DropdownMenuItem>Message</DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>More...</DropdownMenuItem>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n               </DropdownMenuSub>\n               <DropdownMenuItem>\n                  New Team\n                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               Log out\n               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   HoverCard,\n   HoverCardContent,\n   HoverCardTrigger,\n} from \"@/components/ui/hover-card\"\n\nexport function HoverCardDemo() {\n   return (\n      <HoverCard>\n         <HoverCardTrigger asChild>\n            <Button variant=\"link\">@nextjs</Button>\n         </HoverCardTrigger>\n         <HoverCardContent className=\"w-80\">\n            <div className=\"flex justify-between space-x-4\">\n               <Avatar>\n                  <AvatarImage src=\"https://github.com/vercel.png\" />\n                  <AvatarFallback>VC</AvatarFallback>\n               </Avatar>\n               <div className=\"space-y-1\">\n                  <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n                  <p className=\"text-sm\">\n                     The React Framework – created and maintained by @vercel.\n                  </p>\n                  <div className=\"flex items-center pt-2\">\n                     <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n                     <span className=\"text-xs text-muted-foreground\">\n                        Joined December 2021\n                     </span>\n                  </div>\n               </div>\n            </div>\n         </HoverCardContent>\n      </HoverCard>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-demo.tsx",
+      "content": "import { Input } from \"@/components/ui/input\"\n\nexport function InputDemo() {\n   return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-otp-demo.tsx",
+      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/components/ui/checkbox\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function LabelDemo() {\n   return (\n      <div>\n         <div className=\"flex items-center space-x-2\">\n            <Checkbox id=\"terms\" />\n            <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/menubar-demo.tsx",
+      "content": "import {\n   Menubar,\n   MenubarCheckboxItem,\n   MenubarContent,\n   MenubarItem,\n   MenubarMenu,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarSeparator,\n   MenubarShortcut,\n   MenubarSub,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarTrigger,\n} from \"@/components/ui/menubar\"\n\nexport function MenubarDemo() {\n   return (\n      <Menubar>\n         <MenubarMenu>\n            <MenubarTrigger>File</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  New Window <MenubarShortcut>⌘N</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled>New Incognito Window</MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Share</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Email link</MenubarItem>\n                     <MenubarItem>Messages</MenubarItem>\n                     <MenubarItem>Notes</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>\n                  Print... <MenubarShortcut>⌘P</MenubarShortcut>\n               </MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Edit</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Find</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Search the web</MenubarItem>\n                     <MenubarSeparator />\n                     <MenubarItem>Find...</MenubarItem>\n                     <MenubarItem>Find Next</MenubarItem>\n                     <MenubarItem>Find Previous</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>Cut</MenubarItem>\n               <MenubarItem>Copy</MenubarItem>\n               <MenubarItem>Paste</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>View</MenubarTrigger>\n            <MenubarContent>\n               <MenubarCheckboxItem>\n                  Always Show Bookmarks Bar\n               </MenubarCheckboxItem>\n               <MenubarCheckboxItem checked>\n                  Always Show Full URLs\n               </MenubarCheckboxItem>\n               <MenubarSeparator />\n               <MenubarItem inset>\n                  Reload <MenubarShortcut>⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled inset>\n                  Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Hide Sidebar</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Profiles</MenubarTrigger>\n            <MenubarContent>\n               <MenubarRadioGroup value=\"benoit\">\n                  <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n                  <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n                  <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n               </MenubarRadioGroup>\n               <MenubarSeparator />\n               <MenubarItem inset>Edit...</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n      </Menubar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n   NavigationMenu,\n   NavigationMenuContent,\n   NavigationMenuItem,\n   NavigationMenuLink,\n   NavigationMenuList,\n   NavigationMenuTrigger,\n   navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n   {\n      title: \"Alert Dialog\",\n      href: \"/docs/primitives/alert-dialog\",\n      description:\n         \"A modal dialog that interrupts the user with important content and expects a response.\",\n   },\n   {\n      title: \"Hover Card\",\n      href: \"/docs/primitives/hover-card\",\n      description:\n         \"For sighted users to preview content available behind a link.\",\n   },\n   {\n      title: \"Progress\",\n      href: \"/docs/primitives/progress\",\n      description:\n         \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n   },\n   {\n      title: \"Scroll-area\",\n      href: \"/docs/primitives/scroll-area\",\n      description: \"Visually or semantically separates content.\",\n   },\n   {\n      title: \"Tabs\",\n      href: \"/docs/primitives/tabs\",\n      description:\n         \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n   },\n   {\n      title: \"Tooltip\",\n      href: \"/docs/primitives/tooltip\",\n      description:\n         \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n   },\n]\n\nexport function NavigationMenuDemo() {\n   return (\n      <NavigationMenu>\n         <NavigationMenuList>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                     <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                           <a\n                              className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                              href=\"/\"\n                           >\n                              <div className=\"mb-2 mt-4 text-lg font-medium\">\n                                 nyxb/ui\n                              </div>\n                              <p className=\"text-sm leading-tight text-muted-foreground\">\n                                 Beautifully designed components built with\n                                 Radix UI and Tailwind CSS.\n                              </p>\n                           </a>\n                        </NavigationMenuLink>\n                     </li>\n                     <ListItem href=\"/docs\" title=\"Introduction\">\n                        Re-usable components built using Radix UI and Tailwind\n                        CSS.\n                     </ListItem>\n                     <ListItem href=\"/docs/installation\" title=\"Installation\">\n                        How to install dependencies and structure your app.\n                     </ListItem>\n                     <ListItem\n                        href=\"/docs/primitives/typography\"\n                        title=\"Typography\"\n                     >\n                        Styles for headings, paragraphs, lists...etc\n                     </ListItem>\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                     {components.map((component) => (\n                        <ListItem\n                           key={component.title}\n                           title={component.title}\n                           href={component.href}\n                        >\n                           {component.description}\n                        </ListItem>\n                     ))}\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <Link href=\"/docs\" legacyBehavior passHref>\n                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n                     Documentation\n                  </NavigationMenuLink>\n               </Link>\n            </NavigationMenuItem>\n         </NavigationMenuList>\n      </NavigationMenu>\n   )\n}\n\nconst ListItem = React.forwardRef<\n   React.ElementRef<\"a\">,\n   React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n   return (\n      <li>\n         <NavigationMenuLink asChild>\n            <a\n               ref={ref}\n               className={cn(\n                  \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n                  className,\n               )}\n               {...props}\n            >\n               <div className=\"text-sm font-medium leading-none\">{title}</div>\n               <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                  {children}\n               </p>\n            </a>\n         </NavigationMenuLink>\n      </li>\n   )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/pagination-demo.tsx",
+      "content": "import {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n} from \"@/components/ui/pagination\"\n\nexport function PaginationDemo() {\n   return (\n      <Pagination>\n         <PaginationContent>\n            <PaginationItem>\n               <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\" isActive>\n                  2\n               </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationNext href=\"#\" />\n            </PaginationItem>\n         </PaginationContent>\n      </Pagination>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/popover-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport function PopoverDemo() {\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button variant=\"outline\">Open popover</Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-80\">\n            <div className=\"grid gap-4\">\n               <div className=\"space-y-2\">\n                  <h4 className=\"font-medium leading-none\">Dimensions</h4>\n                  <p className=\"text-sm text-muted-foreground\">\n                     Set the dimensions for the layer.\n                  </p>\n               </div>\n               <div className=\"grid gap-2\">\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"width\">Width</Label>\n                     <Input\n                        id=\"width\"\n                        defaultValue=\"100%\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxWidth\">Max. width</Label>\n                     <Input\n                        id=\"maxWidth\"\n                        defaultValue=\"300px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"height\">Height</Label>\n                     <Input\n                        id=\"height\"\n                        defaultValue=\"25px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxHeight\">Max. height</Label>\n                     <Input\n                        id=\"maxHeight\"\n                        defaultValue=\"none\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n               </div>\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/components/ui/progress\"\n\nexport function ProgressDemo() {\n   const [progress, setProgress] = React.useState(13)\n\n   React.useEffect(() => {\n      const timer = setTimeout(() => setProgress(66), 500)\n      return () => clearTimeout(timer)\n   }, [])\n\n   return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\n\nexport function RadioGroupDemo() {\n   return (\n      <RadioGroup defaultValue=\"comfortable\">\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"default\" id=\"r1\" />\n            <Label htmlFor=\"r1\">Default</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n            <Label htmlFor=\"r2\">Comfortable</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"compact\" id=\"r3\" />\n            <Label htmlFor=\"r3\">Compact</Label>\n         </div>\n      </RadioGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/resizable-handle.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"@/components/ui/resizable\"\n\nexport function ResizableHandleDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Sidebar</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n   (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n\nexport function ScrollAreaDemo() {\n   return (\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n         <div className=\"p-4\">\n            <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n            {tags.map((tag) => (\n               <React.Fragment key={tag}>\n                  <div className=\"text-sm\">{tag}</div>\n                  <Separator className=\"my-2\" />\n               </React.Fragment>\n            ))}\n         </div>\n      </ScrollArea>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\n\nexport function SelectDemo() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[180px]\">\n            <SelectValue placeholder=\"Select a fruit\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>Fruits</SelectLabel>\n               <SelectItem value=\"apple\">Apple</SelectItem>\n               <SelectItem value=\"banana\">Banana</SelectItem>\n               <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n               <SelectItem value=\"grapes\">Grapes</SelectItem>\n               <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/separator-demo.tsx",
+      "content": "import { Separator } from \"@/components/ui/separator\"\n\nexport function SeparatorDemo() {\n   return (\n      <div>\n         <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-medium leading-none\">\n               Radix Primitives\n            </h4>\n            <p className=\"text-sm text-muted-foreground\">\n               An open-source UI component library.\n            </p>\n         </div>\n         <Separator className=\"my-4\" />\n         <div className=\"flex h-5 items-center space-x-4 text-sm\">\n            <div>Blog</div>\n            <Separator orientation=\"vertical\" />\n            <div>Docs</div>\n            <Separator orientation=\"vertical\" />\n            <div>Source</div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sheet-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from \"@/components/ui/sheet\"\n\nexport function SheetDemo() {\n   return (\n      <Sheet>\n         <SheetTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </SheetTrigger>\n         <SheetContent>\n            <SheetHeader>\n               <SheetTitle>Edit profile</SheetTitle>\n               <SheetDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"@peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <SheetFooter>\n               <SheetClose asChild>\n                  <Button type=\"submit\">Save changes</Button>\n               </SheetClose>\n            </SheetFooter>\n         </SheetContent>\n      </Sheet>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonDemo() {\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <Skeleton className=\"h-12 w-12 rounded-full\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={cn(\"w-[60%]\", className)}\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport function SonnerDemo() {\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() =>\n            toast(\"Event has been created\", {\n               description: \"Sunday, December 03, 2023 at 9:00 AM\",\n               action: {\n                  label: \"Undo\",\n                  onClick: () => console.log(\"Undo\"),\n               },\n            })\n         }\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/switch-demo.tsx",
+      "content": "import { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\n\nexport function SwitchDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Switch id=\"airplane-mode\" />\n         <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/table-demo.tsx",
+      "content": "import {\n   Table,\n   TableBody,\n   TableCaption,\n   TableCell,\n   TableFooter,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from \"@/components/ui/table\"\n\nconst invoices = [\n   {\n      invoice: \"INV001\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$250.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV002\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$150.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV003\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$350.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV004\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$450.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV005\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$550.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV006\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$200.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV007\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$300.00\",\n      paymentMethod: \"Credit Card\",\n   },\n]\n\nexport function TableDemo() {\n   return (\n      <Table>\n         <TableCaption>A list of your recent invoices.</TableCaption>\n         <TableHeader>\n            <TableRow>\n               <TableHead className=\"w-[100px]\">Invoice</TableHead>\n               <TableHead>Status</TableHead>\n               <TableHead>Method</TableHead>\n               <TableHead className=\"text-right\">Amount</TableHead>\n            </TableRow>\n         </TableHeader>\n         <TableBody>\n            {invoices.map((invoice) => (\n               <TableRow key={invoice.invoice}>\n                  <TableCell className=\"font-medium\">\n                     {invoice.invoice}\n                  </TableCell>\n                  <TableCell>{invoice.paymentStatus}</TableCell>\n                  <TableCell>{invoice.paymentMethod}</TableCell>\n                  <TableCell className=\"text-right\">\n                     {invoice.totalAmount}\n                  </TableCell>\n               </TableRow>\n            ))}\n         </TableBody>\n         <TableFooter>\n            <TableRow>\n               <TableCell colSpan={3}>Total</TableCell>\n               <TableCell className=\"text-right\">$2,500.00</TableCell>\n            </TableRow>\n         </TableFooter>\n      </Table>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tabs-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Tabs,\n   TabsContent,\n   TabsList,\n   TabsTrigger,\n} from \"@/components/ui/tabs\"\n\nexport function TabsDemo() {\n   return (\n      <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n         <TabsList className=\"grid w-full grid-cols-2\">\n            <TabsTrigger value=\"account\">Account</TabsTrigger>\n            <TabsTrigger value=\"password\">Password</TabsTrigger>\n         </TabsList>\n         <TabsContent value=\"account\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Account</CardTitle>\n                  <CardDescription>\n                     Make changes to your account here. Click save when you're\n                     done.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"username\">Username</Label>\n                     <Input id=\"username\" defaultValue=\"@peduarte\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save changes</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n         <TabsContent value=\"password\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Password</CardTitle>\n                  <CardDescription>\n                     Change your password here. After saving, you'll be logged\n                     out.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"current\">Current password</Label>\n                     <Input id=\"current\" type=\"password\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"new\">New password</Label>\n                     <Input id=\"new\" type=\"password\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save password</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n      </Tabs>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/components/ui/textarea\"\n\nexport function TextareaDemo() {\n   return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/hooks/use-toast\"\nimport { Button } from \"@/components/ui/button\"\nimport { ToastAction } from \"@/components/ui/toast\"\n\nexport function ToastDemo() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Scheduled: Catch up \",\n               description: \"Friday, February 10, 2023 at 5:57 PM\",\n               action: (\n                  <ToastAction altText=\"Goto schedule to undo\">\n                     Undo\n                  </ToastAction>\n               ),\n            })\n         }}\n      >\n         Add to calendar\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleDemo() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <Bold className=\"h-4 w-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\n\nexport function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"h-4 w-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"h-4 w-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <Underline className=\"h-4 w-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nexport function TooltipDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport function BadgeDestructive() {\n   return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-outline.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport function BadgeOutline() {\n   return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport function BadgeSecondary() {\n   return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-destructive.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport function ButtonDestructive() {\n   return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-ghost.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport function ButtonGhost() {\n   return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-link.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport function ButtonLink() {\n   return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport function ButtonLoading() {\n   return (\n      <Button disabled>\n         <Loader2 className=\"animate-spin\" />\n         Please wait\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-outline.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport function ButtonOutline() {\n   return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-secondary.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport function ButtonSecondary() {\n   return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-with-icon.tsx",
+      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport function ButtonWithIcon() {\n   return (\n      <Button>\n         <MailOpen /> Login with Email\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleDisabled() {\n   return (\n      <Toggle aria-label=\"Toggle italic\" disabled>\n         <Underline className=\"h-4 w-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleOutline() {\n   return (\n      <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n         <Italic />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleWithText() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <Italic />\n         Italic\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/skeleton-card.json b/apps/web/public/v0/styles/default/skeleton-card.json
new file mode 100644
index 00000000..1724ed27
--- /dev/null
+++ b/apps/web/public/v0/styles/default/skeleton-card.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "skeleton-card",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/skeleton-card.tsx",
+      "content": "import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport default function SkeletonCard() {\n   return (\n      <div className=\"flex flex-col space-y-3\">\n         <Skeleton className=\"h-[125px] w-[250px] rounded-xl\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/skeleton-demo.json b/apps/web/public/v0/styles/default/skeleton-demo.json
new file mode 100644
index 00000000..2c32ccfe
--- /dev/null
+++ b/apps/web/public/v0/styles/default/skeleton-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "skeleton-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport default function SkeletonDemo() {\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <Skeleton className=\"size-12 rounded-full\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/skeleton.json b/apps/web/public/v0/styles/default/skeleton.json
new file mode 100644
index 00000000..47d2a8f6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/skeleton.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "skeleton",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/skeleton.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\"bg-muted animate-pulse rounded-md\", className)}\n         {...props}\n      />\n   )\n}\n\nexport { Skeleton }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/slider-demo.json b/apps/web/public/v0/styles/default/slider-demo.json
new file mode 100644
index 00000000..c347569a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/slider-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDemo({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/slider-disabled.json b/apps/web/public/v0/styles/default/slider-disabled.json
new file mode 100644
index 00000000..2c6551c3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/slider-disabled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-disabled.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDisabled({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         disabled\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/slider-format-label-side.json b/apps/web/public/v0/styles/default/slider-format-label-side.json
new file mode 100644
index 00000000..3a65b895
--- /dev/null
+++ b/apps/web/public/v0/styles/default/slider-format-label-side.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-format-label-side",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-format-label-side.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderFormatLabelSide({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         formatLabel={(value) => `${value} points`}\n         formatLabelSide=\"left\"\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/slider-format-label.json b/apps/web/public/v0/styles/default/slider-format-label.json
new file mode 100644
index 00000000..3e57df11
--- /dev/null
+++ b/apps/web/public/v0/styles/default/slider-format-label.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-format-label",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-format-label.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderFormatLabel({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         formatLabel={(value) => `${value} points`}\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/slider-inverted.json b/apps/web/public/v0/styles/default/slider-inverted.json
new file mode 100644
index 00000000..2f76cdd1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/slider-inverted.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-inverted",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-inverted.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderInverted({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         inverted\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/slider-range.json b/apps/web/public/v0/styles/default/slider-range.json
new file mode 100644
index 00000000..86055e4e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/slider-range.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-range",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-range.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderRange({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[25, 75]}\n         max={100}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/slider-tick-marks-full.json b/apps/web/public/v0/styles/default/slider-tick-marks-full.json
new file mode 100644
index 00000000..87efafd3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/slider-tick-marks-full.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-tick-marks-full",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-tick-marks-full.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderTickMarksFull({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         showSteps=\"full\"\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/slider-tick-marks-half.json b/apps/web/public/v0/styles/default/slider-tick-marks-half.json
new file mode 100644
index 00000000..3eeff8fd
--- /dev/null
+++ b/apps/web/public/v0/styles/default/slider-tick-marks-half.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-tick-marks-half",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-tick-marks-half.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderTickMarksHalf({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         showSteps=\"half\"\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/slider-vertical.json b/apps/web/public/v0/styles/default/slider-vertical.json
new file mode 100644
index 00000000..1b8190bc
--- /dev/null
+++ b/apps/web/public/v0/styles/default/slider-vertical.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-vertical",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-vertical.tsx",
+      "content": "import { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderVertical({ className, ...props }: SliderProps) {\n   return (\n      <>\n         {/* Vertical slider needs its parent container to define the height */}\n         <div className=\"h-64\">\n            <Slider\n               defaultValue={[50]}\n               max={100}\n               step={1}\n               orientation=\"vertical\"\n               className={className}\n               {...props}\n            />\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/slider.json b/apps/web/public/v0/styles/default/slider.json
new file mode 100644
index 00000000..4f60bef2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/slider.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-slider"
+  ],
+  "files": [
+    {
+      "path": "ui/slider.tsx",
+      "content": "\"use client\"\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface SliderProps\n   extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n   showSteps?: \"none\" | \"half\" | \"full\"\n   formatLabel?: (value: number) => string\n   formatLabelSide?: string\n}\n\nconst Slider = React.forwardRef<\n   React.ElementRef<typeof SliderPrimitive.Root>,\n   SliderProps\n>(\n   (\n      {\n         className,\n         showSteps = \"none\",\n         formatLabel,\n         formatLabelSide = \"top\",\n         ...props\n      },\n      ref,\n   ) => {\n      const {\n         min = 0,\n         max = 100,\n         step = 1,\n         orientation = \"horizontal\",\n         value,\n         defaultValue,\n         onValueChange,\n      } = props\n      const [hoveredThumbIndex, setHoveredThumbIndex] =\n         React.useState<boolean>(false)\n      const numberOfSteps = Math.floor((max - min) / step)\n      const stepLines = Array.from(\n         { length: numberOfSteps },\n         (_, index) => index * step + min,\n      )\n\n      const initialValue = Array.isArray(value)\n         ? value\n         : Array.isArray(defaultValue)\n           ? defaultValue\n           : [min, max]\n      const [localValues, setLocalValues] =\n         React.useState<number[]>(initialValue)\n\n      React.useEffect(() => {\n         if (!isEqual(value, localValues))\n            setLocalValues(\n               Array.isArray(value)\n                  ? value\n                  : Array.isArray(defaultValue)\n                    ? defaultValue\n                    : [min, max],\n            )\n      }, [min, max, value])\n\n      const handleValueChange = (newValues: number[]) => {\n         setLocalValues(newValues)\n         if (onValueChange) onValueChange(newValues)\n      }\n\n      function isEqual(\n         array1: number[] | undefined,\n         array2: number[] | undefined,\n      ) {\n         array1 = array1 ?? []\n         array2 = array2 ?? []\n\n         if (array1.length !== array2.length) return false\n\n         for (let i = 0; i < array1.length; i++) {\n            if (array1[i] !== array2[i]) return false\n         }\n\n         return true\n      }\n\n      return (\n         <SliderPrimitive.Root\n            ref={ref}\n            className={cn(\n               \"relative flex cursor-pointer touch-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n               orientation === \"horizontal\"\n                  ? \"w-full items-center\"\n                  : \"h-full justify-center\",\n               className,\n            )}\n            min={min}\n            max={max}\n            step={step}\n            value={localValues}\n            onValueChange={(value) => handleValueChange(value)}\n            {...props}\n            onFocus={() => setHoveredThumbIndex(true)}\n            onBlur={() => setHoveredThumbIndex(false)}\n         >\n            <SliderPrimitive.Track\n               className={cn(\n                  \"bg-primary/20 relative grow overflow-hidden rounded-full\",\n                  orientation === \"horizontal\"\n                     ? \"h-1.5 w-full\"\n                     : \"h-full w-1.5\",\n               )}\n            >\n               <SliderPrimitive.Range\n                  className={cn(\n                     \"bg-primary absolute\",\n                     orientation === \"horizontal\" ? \"h-full\" : \"w-full\",\n                  )}\n               />\n               {showSteps !== undefined &&\n                  showSteps !== \"none\" &&\n                  stepLines.map((value, index) => {\n                     if (value === min || value === max) return null\n\n                     const positionPercentage =\n                        ((value - min) / (max - min)) * 100\n                     const adjustedPosition =\n                        50 + (positionPercentage - 50) * 0.96\n                     return (\n                        <div\n                           key={index}\n                           className={cn(\n                              {\n                                 \"w-0.5 h-2\": orientation !== \"vertical\",\n                                 \"w-2 h-0.5\": orientation === \"vertical\",\n                              },\n                              \"bg-muted-foreground absolute\",\n                              {\n                                 \"left-1\":\n                                    orientation === \"vertical\" &&\n                                    showSteps === \"half\",\n                                 \"top-1\":\n                                    orientation !== \"vertical\" &&\n                                    showSteps === \"half\",\n                                 \"left-0\":\n                                    orientation === \"vertical\" &&\n                                    showSteps === \"full\",\n                                 \"top-0\":\n                                    orientation !== \"vertical\" &&\n                                    showSteps === \"full\",\n                                 \"-translate-x-1/2\": orientation !== \"vertical\",\n                                 \"-translate-y-1/2\": orientation === \"vertical\",\n                              },\n                           )}\n                           style={{\n                              [orientation === \"vertical\" ? \"bottom\" : \"left\"]:\n                                 `${adjustedPosition}%`,\n                           }}\n                        />\n                     )\n                  })}\n            </SliderPrimitive.Track>\n            {localValues.map((numberStep, index) => (\n               <SliderPrimitive.Thumb\n                  key={index}\n                  className={cn(\n                     \"border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1\",\n                  )}\n               >\n                  {hoveredThumbIndex && formatLabel && (\n                     <div\n                        className={cn(\n                           {\n                              \"bottom-8 left-1/2 -translate-x-1/2\":\n                                 formatLabelSide === \"top\",\n                           },\n                           {\n                              \"top-8 left-1/2 -translate-x-1/2\":\n                                 formatLabelSide === \"bottom\",\n                           },\n                           {\n                              \"right-8 -translate-y-1/4\":\n                                 formatLabelSide === \"left\",\n                           },\n                           {\n                              \"left-8 -translate-y-1/4\":\n                                 formatLabelSide === \"right\",\n                           },\n                           \"bg-popover text-popover-foreground absolute z-30 w-max items-center justify-items-center rounded-md border px-2 py-1 text-center shadow-sm\",\n                        )}\n                     >\n                        {formatLabel(numberStep)}\n                     </div>\n                  )}\n               </SliderPrimitive.Thumb>\n            ))}\n         </SliderPrimitive.Root>\n      )\n   },\n)\n\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sonner-demo.json b/apps/web/public/v0/styles/default/sonner-demo.json
new file mode 100644
index 00000000..62e4d6f4
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sonner-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sonner-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "examples/sonner-demo.tsx",
+      "content": "import { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function SonnerDemo() {\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() =>\n            toast(\"Event has been created\", {\n               description: \"Sunday, December 03, 2023 at 9:00 AM\",\n               action: {\n                  label: \"Undo\",\n\n                  // eslint-disable-next-line no-console\n                  onClick: () => console.log(\"Undo\"),\n               },\n            })\n         }\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sonner.json b/apps/web/public/v0/styles/default/sonner.json
new file mode 100644
index 00000000..2f1a7f57
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sonner.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sonner",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "sonner",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "ui/sonner.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner } from \"sonner\"\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>\n\nfunction Toaster({ ...props }: ToasterProps) {\n   const { theme = \"system\" } = useTheme()\n\n   return (\n      <Sonner\n         theme={theme as ToasterProps[\"theme\"]}\n         className=\"toaster group\"\n         toastOptions={{\n            classNames: {\n               toast: \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n               description: \"group-[.toast]:text-muted-foreground\",\n               actionButton:\n                  \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n               cancelButton:\n                  \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n            },\n         }}\n         {...props}\n      />\n   )\n}\n\nexport { Toaster }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sparkles-text-demo.json b/apps/web/public/v0/styles/default/sparkles-text-demo.json
new file mode 100644
index 00000000..95d5a1dd
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sparkles-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sparkles-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/sparkles-text-demo.tsx",
+      "content": "import SparklesText from \"@/components/ui/sparkles-text\"\n\nexport default async function SparklesTextDemo() {\n   return <SparklesText text=\"Nyxb UI\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/sparkles-text.json b/apps/web/public/v0/styles/default/sparkles-text.json
new file mode 100644
index 00000000..644906d4
--- /dev/null
+++ b/apps/web/public/v0/styles/default/sparkles-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sparkles-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/sparkles-text.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport type { CSSProperties, ReactElement } from \"react\"\nimport { useEffect, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface Sparkle {\n   id: string\n   x: string\n   y: string\n   color: string\n   delay: number\n   scale: number\n   lifespan: number\n}\n\ninterface SparklesTextProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the text\n    */\n   as?: ReactElement\n\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the text\n    */\n   className?: string\n\n   /**\n    * @required\n    * @type string\n    * @description\n    * The text to be displayed\n    */\n   text: string\n\n   /**\n    * @default 10\n    * @type number\n    * @description\n    * The count of sparkles\n    */\n   sparklesCount?: number\n\n   /**\n    * @default \"{first: '#A07CFE', second: '#FE8FB5'}\"\n    * @type string\n    * @description\n    * The colors of the sparkles\n    */\n   colors?: {\n      first: string\n      second: string\n   }\n}\n\nconst SparklesText: React.FC<SparklesTextProps> = ({\n   text,\n   colors = { first: \"#A07CFE\", second: \"#FE8FB5\" },\n   className,\n   sparklesCount = 10,\n   ...props\n}) => {\n   const [sparkles, setSparkles] = useState<Sparkle[]>([])\n\n   useEffect(() => {\n      const generateStar = (): Sparkle => {\n         const starX = `${Math.random() * 100}%`\n         const starY = `${Math.random() * 100}%`\n         const color = Math.random() > 0.5 ? colors.first : colors.second\n         const delay = Math.random() * 2\n         const scale = Math.random() * 1 + 0.3\n         const lifespan = Math.random() * 10 + 5\n         const id = `${starX}-${starY}-${Date.now()}`\n         return { id, x: starX, y: starY, color, delay, scale, lifespan }\n      }\n\n      const initializeStars = () => {\n         const newSparkles = Array.from({ length: sparklesCount }, generateStar)\n         setSparkles(newSparkles)\n      }\n\n      const updateStars = () => {\n         setSparkles((currentSparkles) =>\n            currentSparkles.map((star) => {\n               if (star.lifespan <= 0) return generateStar()\n               else return { ...star, lifespan: star.lifespan - 0.1 }\n            }),\n         )\n      }\n\n      initializeStars()\n      const interval = setInterval(updateStars, 100)\n\n      return () => clearInterval(interval)\n   }, [colors.first, colors.second])\n\n   return (\n      <div\n         className={cn(\"text-6xl font-bold\", className)}\n         {...props}\n         style={\n            {\n               \"--sparkles-first-color\": `${colors.first}`,\n               \"--sparkles-second-color\": `${colors.second}`,\n            } as CSSProperties\n         }\n      >\n         <span className=\"relative inline-block\">\n            {sparkles.map((sparkle) => (\n               <Sparkle key={sparkle.id} {...sparkle} />\n            ))}\n            <strong className=\"bg-gradient-to-r from-[var(--sparkles-first-color)] to-[var(--sparkles-second-color)] bg-clip-text text-transparent\">\n               {text}\n            </strong>\n         </span>\n      </div>\n   )\n}\n\nconst Sparkle: React.FC<Sparkle> = ({ id, x, y, color, delay, scale }) => {\n   return (\n      <motion.svg\n         key={id}\n         className=\"pointer-events-none absolute z-20\"\n         initial={{ opacity: 0, left: x, top: y }}\n         animate={{\n            opacity: [0, 1, 0],\n            scale: [0, scale, 0],\n            rotate: [75, 120, 150],\n         }}\n         transition={{ duration: 0.8, repeat: Number.POSITIVE_INFINITY, delay }}\n         width=\"21\"\n         height=\"21\"\n         viewBox=\"0 0 21 21\"\n      >\n         <path\n            d=\"M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z\"\n            fill={color}\n         />\n      </motion.svg>\n   )\n}\n\nexport default SparklesText\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/star-rating-colored.json b/apps/web/public/v0/styles/default/star-rating-colored.json
new file mode 100644
index 00000000..586043ac
--- /dev/null
+++ b/apps/web/public/v0/styles/default/star-rating-colored.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "star-rating-colored",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/star-rating-colored.tsx",
+      "content": "import * as React from \"react\"\nimport { StarRating } from \"@/components/ui/star-rating\"\n\nexport default function StarRatingColored() {\n   const [value, setValue] = React.useState<number>(3)\n   return (\n      <StarRating\n         value={value}\n         setValue={setValue}\n         iconProps={{ className: \"fill-yellow-500 stroke-yellow-500\" }}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/star-rating-demo.json b/apps/web/public/v0/styles/default/star-rating-demo.json
new file mode 100644
index 00000000..2eb36a7f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/star-rating-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "star-rating-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/star-rating-demo.tsx",
+      "content": "import * as React from \"react\"\nimport { StarRating } from \"@/components/ui/star-rating\"\n\nexport default function StarRatingDemo() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/star-rating-icon.json b/apps/web/public/v0/styles/default/star-rating-icon.json
new file mode 100644
index 00000000..b827cd51
--- /dev/null
+++ b/apps/web/public/v0/styles/default/star-rating-icon.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "star-rating-icon",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/star-rating-icon.tsx",
+      "content": "import { Heart } from \"lucide-react\"\nimport * as React from \"react\"\nimport { StarRating } from \"@/components/ui/star-rating\"\n\nexport default function StarRatingIcon() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} icon={Heart} />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/star-rating.json b/apps/web/public/v0/styles/default/star-rating.json
new file mode 100644
index 00000000..56d8e6c2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/star-rating.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "star-rating",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "files": [
+    {
+      "path": "ui/star-rating.tsx",
+      "content": "import type { LucideIcon, LucideProps } from \"lucide-react\"\nimport { StarIcon } from \"lucide-react\"\nimport type { Dispatch, SetStateAction } from \"react\"\nimport type React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface StarWrapperProps {\n   value?: number\n   setValue?: Dispatch<SetStateAction<number>>\n   numStars?: number\n   icon?: LucideIcon\n   disabled?: boolean\n   wrapperProps?: React.HTMLAttributes<HTMLDivElement>\n   iconProps?: LucideProps\n   showcase?: boolean\n}\n\nfunction StarRating({\n   numStars = 5,\n   icon,\n   setValue,\n   value,\n   disabled,\n   showcase,\n   iconProps = {},\n   wrapperProps = {},\n}: StarWrapperProps) {\n   const { className: wrapperClassName, ...restWrapperProps } = wrapperProps\n   const { className: iconClassName, ...restIconProps } = iconProps\n   const IconComponent = icon\n\n   return (\n      <div\n         className={cn(\"flex items-center gap-1\", wrapperClassName)}\n         {...restWrapperProps}\n      >\n         {Array.from({ length: numStars }, (_, i) => {\n            const isRated = i < value!\n            const styledIconProps: LucideProps = {\n               onMouseEnter: () => !showcase && !disabled && setValue!(i + 1),\n               className: cn(\n                  \"fill-primary stroke-primary size-6\",\n                  {\n                     \"opacity-50 pointer-events-none\": disabled,\n                     \"transition-transform duration-300 hover:scale-110\":\n                        !disabled && !showcase,\n                     \"!fill-muted !stroke-muted\": !isRated,\n                  },\n                  iconClassName,\n               ),\n               ...restIconProps,\n            }\n            return (\n               <div key={i}>\n                  {IconComponent ? (\n                     <IconComponent {...styledIconProps} />\n                  ) : (\n                     <StarIcon {...styledIconProps} />\n                  )}\n               </div>\n            )\n         })}\n      </div>\n   )\n}\n\nexport { StarRating }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-clickable-steps.json b/apps/web/public/v0/styles/default/stepper-clickable-steps.json
new file mode 100644
index 00000000..de63638a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-clickable-steps.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-clickable-steps",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-clickable-steps.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            initialStep={0}\n            steps={steps}\n            onClickStep={(step, setStep) => {\n               toast({\n                  title: \"Step clicked\",\n                  description:\n                     \"This event is executed globally for all steps. If you want to have an event for a specific step, use the `onClickStep` prop of the independent step.\",\n               })\n               setStep(step)\n            }}\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-custom-icons.json b/apps/web/public/v0/styles/default/stepper-custom-icons.json
new file mode 100644
index 00000000..70d361ac
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-custom-icons.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-custom-icons",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-custom-icons.tsx",
+      "content": "import { Building, Star, User } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\", icon: User },\n   { label: \"Step 2\", icon: Building },\n   { label: \"Step 3\", icon: Star },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-custom-styles.json b/apps/web/public/v0/styles/default/stepper-custom-styles.json
new file mode 100644
index 00000000..afc70a88
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-custom-styles.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-custom-styles",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-custom-styles.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            initialStep={0}\n            steps={steps}\n            styles={{\n               \"step-button-container\": cn(\n                  \"rounded-none text-purple-700\",\n                  \"data-[current=true]:border-purple-500 data-[current=true]:bg-purple-50\",\n                  \"data-[active=true]:border-purple-500 data-[active=true]:bg-purple-500\",\n               ),\n               \"horizontal-step\":\n                  \"data-[completed=true]:[&:not(:last-child)]:after:bg-purple-500\",\n            }}\n            variables={{\n               \"--step-icon-size\": \"60px\",\n               \"--step-gap\": \"20px\",\n            }}\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-demo.json b/apps/web/public/v0/styles/default/stepper-demo.json
new file mode 100644
index 00000000..468c9208
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-description.json b/apps/web/public/v0/styles/default/stepper-description.json
new file mode 100644
index 00000000..1a0550e2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-description.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-description",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-description.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\", description: \"Description 1\" },\n   { label: \"Step 2\", description: \"Description 2\" },\n   { label: \"Step 3\", description: \"Description 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-footer-inside.json b/apps/web/public/v0/styles/default/stepper-footer-inside.json
new file mode 100644
index 00000000..ecfb1bb9
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-footer-inside.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-footer-inside",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-footer-inside.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper orientation=\"vertical\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                     <StepButtons />\n                  </Step>\n               )\n            })}\n            <FinalStep />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction StepButtons() {\n   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =\n      useStepper()\n   return (\n      <div className=\"mb-4 flex w-full gap-2\">\n         <Button\n            disabled={isDisabledStep}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"secondary\"\n         >\n            Prev\n         </Button>\n         <Button size=\"sm\" onClick={nextStep}>\n            {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n         </Button>\n      </div>\n   )\n}\n\nfunction FinalStep() {\n   const { hasCompletedAllSteps, resetSteps } = useStepper()\n\n   if (!hasCompletedAllSteps) return null\n\n   return (\n      <>\n         <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n            <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n         </div>\n         <div className=\"flex w-full justify-end gap-2\">\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-form.json b/apps/web/public/v0/styles/default/stepper-form.json
new file mode 100644
index 00000000..da1bef98
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport { Input } from \"@/components/ui/input\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst steps = [\n   { label: \"Step 1\", description: \"Description 1\" },\n   { label: \"Step 2\", description: \"Description 2\" },\n]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper variant=\"circle-alt\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               if (index === 0) {\n                  return (\n                     <Step key={stepProps.label} {...stepProps}>\n                        <FirstStepForm />\n                     </Step>\n                  )\n               }\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <SecondStepForm />\n                  </Step>\n               )\n            })}\n            <MyStepperFooter />\n         </Stepper>\n      </div>\n   )\n}\n\nconst FirstFormSchema = z.object({\n   username: z.string().min(2, {\n      message: \"Username must be at least 2 characters.\",\n   }),\n})\n\nfunction FirstStepForm() {\n   const { nextStep } = useStepper()\n\n   const form = useForm<z.infer<typeof FirstFormSchema>>({\n      resolver: zodResolver(FirstFormSchema),\n      defaultValues: {\n         username: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FirstFormSchema>) {\n      nextStep()\n      toast({\n         title: \"First step submitted!\",\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"username\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Username</FormLabel>\n                     <FormControl>\n                        <Input placeholder=\"nyxb\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your public display name.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <StepperFormActions />\n         </form>\n      </Form>\n   )\n}\n\nconst SecondFormSchema = z.object({\n   password: z.string().min(8, {\n      message: \"Password must be at least 8 characters.\",\n   }),\n})\n\nfunction SecondStepForm() {\n   const { nextStep } = useStepper()\n\n   const form = useForm<z.infer<typeof SecondFormSchema>>({\n      resolver: zodResolver(SecondFormSchema),\n      defaultValues: {\n         password: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof SecondFormSchema>) {\n      nextStep()\n      toast({\n         title: \"Second step submitted!\",\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"password\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Password</FormLabel>\n                     <FormControl>\n                        <Input type=\"password\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your private password.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <StepperFormActions />\n         </form>\n      </Form>\n   )\n}\n\nfunction StepperFormActions() {\n   const {\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n\n   return (\n      <div className=\"flex w-full justify-end gap-2\">\n         {hasCompletedAllSteps ? (\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         ) : (\n            <>\n               <Button\n                  disabled={isDisabledStep}\n                  onClick={prevStep}\n                  size=\"sm\"\n                  variant=\"secondary\"\n               >\n                  Prev\n               </Button>\n               <Button size=\"sm\">\n                  {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n               </Button>\n            </>\n         )}\n      </div>\n   )\n}\n\nfunction MyStepperFooter() {\n   const { activeStep, resetSteps, steps } = useStepper()\n\n   if (activeStep !== steps.length) return null\n\n   return (\n      <div className=\"flex items-center justify-end gap-2\">\n         <Button onClick={resetSteps}>Reset Stepper with Form</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-optional-steps.json b/apps/web/public/v0/styles/default/stepper-optional-steps.json
new file mode 100644
index 00000000..aa2a0a4e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-optional-steps.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-optional-steps",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-optional-steps.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\", optional: true },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-orientation.json b/apps/web/public/v0/styles/default/stepper-orientation.json
new file mode 100644
index 00000000..a3cec086
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-orientation.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-orientation",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport type { StepItem, StepperProps } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperOrientation() {\n   const [orientation, setOrientation] =\n      React.useState<StepperProps[\"orientation\"]>(\"vertical\")\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={orientation}\n            onValueChange={(value) =>\n               setOrientation(value as StepperProps[\"orientation\"])\n            }\n         >\n            <Label\n               htmlFor=\"horizontal\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"horizontal\"\n                  id=\"horizontal\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">Horizontal</h2>\n            </Label>\n            <Label\n               htmlFor=\"vertical\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"vertical\"\n                  id=\"vertical\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">Vertical</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper orientation={orientation} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-scroll-tracking.json b/apps/web/public/v0/styles/default/stepper-scroll-tracking.json
new file mode 100644
index 00000000..d1994e27
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-scroll-tracking.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-scroll-tracking",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-scroll-tracking.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n   { label: \"Step 4\" },\n   { label: \"Step 5\" },\n   { label: \"Step 6\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            orientation=\"vertical\"\n            initialStep={0}\n            steps={steps}\n            scrollTracking\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                     <StepButtons />\n                  </Step>\n               )\n            })}\n            <FinalStep />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction StepButtons() {\n   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =\n      useStepper()\n   return (\n      <div className=\"mb-4 flex w-full gap-2\">\n         <Button\n            disabled={isDisabledStep}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"secondary\"\n         >\n            Prev\n         </Button>\n         <Button size=\"sm\" onClick={nextStep}>\n            {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n         </Button>\n      </div>\n   )\n}\n\nfunction FinalStep() {\n   const { hasCompletedAllSteps, resetSteps } = useStepper()\n\n   if (!hasCompletedAllSteps) return null\n\n   return (\n      <>\n         <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n            <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n         </div>\n         <div className=\"flex w-full justify-end gap-2\">\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-sizes.json b/apps/web/public/v0/styles/default/stepper-sizes.json
new file mode 100644
index 00000000..d2d90f41
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-sizes.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-sizes",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-sizes.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport type { StepItem, StepperProps } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [size, setSize] = React.useState<StepperProps[\"size\"]>(\"md\")\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={size}\n            onValueChange={(value) => setSize(value as StepperProps[\"size\"])}\n         >\n            <Label\n               htmlFor=\"sm\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"sm\" id=\"sm\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">sm</h2>\n            </Label>\n            <Label\n               htmlFor=\"md\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"md\" id=\"md\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">md</h2>\n            </Label>\n            <Label\n               htmlFor=\"lg\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"lg\" id=\"lg\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">lg</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper size={size} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-state.json b/apps/web/public/v0/styles/default/stepper-state.json
new file mode 100644
index 00000000..fbe86cdb
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-state.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-state",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-state.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper state=\"error\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isError,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button disabled={isError} size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper-variants.json b/apps/web/public/v0/styles/default/stepper-variants.json
new file mode 100644
index 00000000..277ff1a8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper-variants.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-variants",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-variants.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport type { StepItem, StepperProps } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [variant, setVariant] =\n      React.useState<StepperProps[\"variant\"]>(\"circle\")\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={variant}\n            onValueChange={(value) =>\n               setVariant(value as StepperProps[\"variant\"])\n            }\n         >\n            <Label\n               htmlFor=\"circle\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"circle\" id=\"circle\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">circle</h2>\n            </Label>\n            <Label\n               htmlFor=\"circle-alt\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"circle-alt\"\n                  id=\"circle-alt\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">circle-alt</h2>\n            </Label>\n            <Label\n               htmlFor=\"line\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"line\" id=\"line\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">line</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper variant={variant} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/stepper.json b/apps/web/public/v0/styles/default/stepper.json
new file mode 100644
index 00000000..00f261ab
--- /dev/null
+++ b/apps/web/public/v0/styles/default/stepper.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "ui/stepper.tsx",
+      "content": "\"use client\"\n\nimport { cva } from \"class-variance-authority\"\nimport type { LucideIcon } from \"lucide-react\"\nimport { CheckIcon, Loader2, X } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n} from \"@/components/ui/collapsible\"\n\n// <---------- CONTEXT ---------->\n\ninterface StepperContextValue extends StepperProps {\n   clickable?: boolean\n   isError?: boolean\n   isLoading?: boolean\n   isVertical?: boolean\n   stepCount?: number\n   expandVerticalSteps?: boolean\n   activeStep: number\n   initialStep: number\n}\n\nconst StepperContext = React.createContext<\n   StepperContextValue & {\n      nextStep: () => void\n      prevStep: () => void\n      resetSteps: () => void\n      setStep: (step: number) => void\n   }\n>({\n   steps: [],\n   activeStep: 0,\n   initialStep: 0,\n   nextStep: () => {},\n   prevStep: () => {},\n   resetSteps: () => {},\n   setStep: () => {},\n})\n\ninterface StepperContextProviderProps {\n   value: Omit<StepperContextValue, \"activeStep\">\n   children: React.ReactNode\n}\n\nfunction StepperProvider({ value, children }: StepperContextProviderProps) {\n   const isError = value.state === \"error\"\n   const isLoading = value.state === \"loading\"\n\n   const [activeStep, setActiveStep] = React.useState(value.initialStep)\n\n   const nextStep = () => {\n      setActiveStep((prev) => prev + 1)\n   }\n\n   const prevStep = () => {\n      setActiveStep((prev) => prev - 1)\n   }\n\n   const resetSteps = () => {\n      setActiveStep(value.initialStep)\n   }\n\n   const setStep = (step: number) => {\n      setActiveStep(step)\n   }\n\n   return (\n      <StepperContext.Provider\n         value={{\n            ...value,\n            isError,\n            isLoading,\n            activeStep,\n            nextStep,\n            prevStep,\n            resetSteps,\n            setStep,\n         }}\n      >\n         {children}\n      </StepperContext.Provider>\n   )\n}\n\n// <---------- HOOKS ---------->\n\nfunction usePrevious<T>(value: T): T | undefined {\n   const ref = React.useRef<T>()\n\n   React.useEffect(() => {\n      ref.current = value\n   }, [value])\n\n   return ref.current\n}\n\nfunction useStepper() {\n   const context = React.useContext(StepperContext)\n\n   if (context === undefined)\n      throw new Error(\"useStepper must be used within a StepperProvider\")\n\n   const { children, className, ...rest } = context\n\n   const isLastStep = context.activeStep === context.steps.length - 1\n   const hasCompletedAllSteps = context.activeStep === context.steps.length\n\n   const previousActiveStep = usePrevious(context.activeStep)\n\n   const currentStep = context.steps[context.activeStep]\n   const isOptionalStep = !!currentStep?.optional\n\n   const isDisabledStep = context.activeStep === 0\n\n   return {\n      ...rest,\n      isLastStep,\n      hasCompletedAllSteps,\n      isOptionalStep,\n      isDisabledStep,\n      currentStep,\n      previousActiveStep,\n   }\n}\n\nfunction useMediaQuery(query: string) {\n   const [value, setValue] = React.useState(false)\n\n   React.useEffect(() => {\n      function onChange(event: MediaQueryListEvent) {\n         setValue(event.matches)\n      }\n\n      const result = matchMedia(query)\n      result.addEventListener(\"change\", onChange)\n      setValue(result.matches)\n\n      return () => result.removeEventListener(\"change\", onChange)\n   }, [query])\n\n   return value\n}\n\n// <---------- STEPS ---------->\n\ninterface StepItem {\n   id?: string\n   label?: string\n   description?: string\n   icon?: IconType\n   optional?: boolean\n}\n\ninterface StepOptions {\n   orientation?: \"vertical\" | \"horizontal\"\n   state?: \"loading\" | \"error\"\n   responsive?: boolean\n   checkIcon?: IconType\n   errorIcon?: IconType\n   onClickStep?: (step: number, setStep: (step: number) => void) => void\n   mobileBreakpoint?: string\n   variant?: \"circle\" | \"circle-alt\" | \"line\"\n   expandVerticalSteps?: boolean\n   size?: \"sm\" | \"md\" | \"lg\"\n   styles?: {\n      /** Styles for the main container */\n      \"main-container\"?: string\n      /** Styles for the horizontal step */\n      \"horizontal-step\"?: string\n      /** Styles for the horizontal step container (button and labels) */\n      \"horizontal-step-container\"?: string\n      /** Styles for the vertical step */\n      \"vertical-step\"?: string\n      /** Styles for the vertical step container (button and labels) */\n      \"vertical-step-container\"?: string\n      /** Styles for the vertical step content */\n      \"vertical-step-content\"?: string\n      /** Styles for the step button container */\n      \"step-button-container\"?: string\n      /** Styles for the label and description container */\n      \"step-label-container\"?: string\n      /** Styles for the step label */\n      \"step-label\"?: string\n      /** Styles for the step description */\n      \"step-description\"?: string\n   }\n   variables?: {\n      \"--step-icon-size\"?: string\n      \"--step-gap\"?: string\n   }\n   scrollTracking?: boolean\n}\ninterface StepperProps extends StepOptions {\n   children?: React.ReactNode\n   className?: string\n   initialStep: number\n   steps: StepItem[]\n}\n\nconst VARIABLE_SIZES = {\n   sm: \"36px\",\n   md: \"40px\",\n   lg: \"44px\",\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n   (props, ref: React.Ref<HTMLDivElement>) => {\n      const {\n         className,\n         children,\n         orientation: orientationProp,\n         state,\n         responsive,\n         checkIcon,\n         errorIcon,\n         onClickStep,\n         mobileBreakpoint,\n         expandVerticalSteps = false,\n         initialStep = 0,\n         size,\n         steps,\n         variant,\n         styles,\n         variables,\n         scrollTracking = false,\n         ...rest\n      } = props\n\n      const childArr = React.Children.toArray(children)\n\n      const items = [] as React.ReactElement[]\n\n      const footer = childArr.map((child, _index) => {\n         if (!React.isValidElement(child))\n            throw new Error(\"Stepper children must be valid React elements.\")\n\n         if (child.type === Step) {\n            items.push(child)\n            return null\n         }\n\n         return child\n      })\n\n      const stepCount = items.length\n\n      const isMobile = useMediaQuery(\n         `(max-width: ${mobileBreakpoint || \"768px\"})`,\n      )\n\n      const clickable = !!onClickStep\n\n      const orientation = isMobile && responsive ? \"vertical\" : orientationProp\n\n      const isVertical = orientation === \"vertical\"\n\n      return (\n         <StepperProvider\n            value={{\n               initialStep,\n               orientation,\n               state,\n               size,\n               responsive,\n               checkIcon,\n               errorIcon,\n               onClickStep,\n               clickable,\n               stepCount,\n               isVertical,\n               variant: variant || \"circle\",\n               expandVerticalSteps,\n               steps,\n               scrollTracking,\n               styles,\n            }}\n         >\n            <div\n               ref={ref}\n               className={cn(\n                  \"stepper__main-container\",\n                  \"flex w-full flex-wrap\",\n                  stepCount === 1 ? \"justify-end\" : \"justify-between\",\n                  orientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n                  variant === \"line\" && orientation === \"horizontal\" && \"gap-4\",\n                  className,\n                  styles?.[\"main-container\"],\n               )}\n               style={\n                  {\n                     \"--step-icon-size\":\n                        variables?.[\"--step-icon-size\"] ||\n                        `${VARIABLE_SIZES[size || \"md\"]}`,\n                     \"--step-gap\": variables?.[\"--step-gap\"] || \"8px\",\n                  } as React.CSSProperties\n               }\n               {...rest}\n            >\n               <VerticalContent>{items}</VerticalContent>\n            </div>\n            {orientation === \"horizontal\" && (\n               <HorizontalContent>{items}</HorizontalContent>\n            )}\n            {footer}\n         </StepperProvider>\n      )\n   },\n)\n\nStepper.defaultProps = {\n   size: \"md\",\n   orientation: \"horizontal\",\n   responsive: true,\n}\n\nfunction VerticalContent({ children }: { children: React.ReactNode }) {\n   const { activeStep } = useStepper()\n\n   const childArr = React.Children.toArray(children)\n   const stepCount = childArr.length\n\n   return (\n      <>\n         {React.Children.map(children, (child, i) => {\n            const isCompletedStep =\n               (React.isValidElement(child) &&\n                  (child.props as any).isCompletedStep) ??\n               i < activeStep\n            const isLastStep = i === stepCount - 1\n            const isCurrentStep = i === activeStep\n\n            const stepProps = {\n               index: i,\n               isCompletedStep,\n               isCurrentStep,\n               isLastStep,\n            }\n\n            if (React.isValidElement(child))\n               return React.cloneElement(child, stepProps)\n\n            return null\n         })}\n      </>\n   )\n}\n\nfunction HorizontalContent({ children }: { children: React.ReactNode }) {\n   const { activeStep } = useStepper()\n   const childArr = React.Children.toArray(children)\n\n   if (activeStep > childArr.length) return null\n\n   return (\n      <>\n         {React.Children.map(childArr[activeStep], (node) => {\n            if (!React.isValidElement(node)) return null\n\n            return React.Children.map(\n               node.props.children,\n               (childNode) => childNode,\n            )\n         })}\n      </>\n   )\n}\n\n// <---------- STEP ---------->\n\ninterface StepProps extends React.HTMLAttributes<HTMLLIElement> {\n   label?: string | React.ReactNode\n   description?: string\n   icon?: IconType\n   state?: \"loading\" | \"error\"\n   checkIcon?: IconType\n   errorIcon?: IconType\n   isCompletedStep?: boolean\n   isKeepError?: boolean\n   onClickStep?: (step: number, setStep: (step: number) => void) => void\n}\n\ninterface StepSharedProps extends StepProps {\n   isLastStep?: boolean\n   isCurrentStep?: boolean\n   index?: number\n   hasVisited: boolean | undefined\n   isError?: boolean\n   isLoading?: boolean\n}\n\n// Props which shouldn't be passed to to the Step component from the user\ninterface StepInternalConfig {\n   index: number\n   isCompletedStep?: boolean\n   isCurrentStep?: boolean\n   isLastStep?: boolean\n}\n\ninterface FullStepProps extends StepProps, StepInternalConfig {}\n\nconst Step = React.forwardRef<HTMLLIElement, StepProps>(\n   (props, ref: React.Ref<any>) => {\n      const {\n         children,\n         description,\n         icon,\n         state,\n         checkIcon,\n         errorIcon,\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         isLastStep,\n         isKeepError,\n         label,\n         onClickStep,\n      } = props as FullStepProps\n\n      const { isVertical, isError, isLoading, clickable } = useStepper()\n\n      const hasVisited = isCurrentStep || isCompletedStep\n\n      const sharedProps = {\n         isLastStep,\n         isCompletedStep,\n         isCurrentStep,\n         index,\n         isError,\n         isLoading,\n         clickable,\n         label,\n         description,\n         hasVisited,\n         icon,\n         isKeepError,\n         checkIcon,\n         state,\n         errorIcon,\n         onClickStep,\n      }\n\n      const renderStep = () => {\n         switch (isVertical) {\n            case true:\n               return (\n                  <VerticalStep ref={ref} {...sharedProps}>\n                     {children}\n                  </VerticalStep>\n               )\n            default:\n               return <HorizontalStep ref={ref} {...sharedProps} />\n         }\n      }\n\n      return renderStep()\n   },\n)\n\n// <---------- VERTICAL STEP ---------->\n\ntype VerticalStepProps = StepSharedProps & {\n   children?: React.ReactNode\n}\n\nconst verticalStepVariants = cva(\n   [\n      \"flex flex-col relative transition-all duration-200\",\n      \"data-[completed=true]:[&:not(:last-child)]:after:bg-primary\",\n      \"data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive\",\n   ],\n   {\n      variants: {\n         variant: {\n            circle: cn(\n               \"[&:not(:last-child)]:gap-[var(--step-gap)] [&:not(:last-child)]:pb-[var(--step-gap)]\",\n               \"[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:w-[2px] [&:not(:last-child)]:after:content-['']\",\n               \"[&:not(:last-child)]:after:inset-x-[calc(var(--step-icon-size)/2)]\",\n               \"[&:not(:last-child)]:after:absolute\",\n               \"[&:not(:last-child)]:after:top-[calc(var(--step-icon-size)+var(--step-gap))]\",\n               \"[&:not(:last-child)]:after:bottom-[var(--step-gap)]\",\n               \"[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200\",\n            ),\n            line: \"flex-1 border-t-0 mb-4\",\n         },\n      },\n   },\n)\n\nconst VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(\n   (props, ref) => {\n      const {\n         children,\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         label,\n         description,\n         icon,\n         hasVisited,\n         state,\n         checkIcon: checkIconProp,\n         errorIcon: errorIconProp,\n         onClickStep,\n      } = props\n\n      const {\n         checkIcon: checkIconContext,\n         errorIcon: errorIconContext,\n         isError,\n         isLoading,\n         variant,\n         onClickStep: onClickStepGeneral,\n         clickable,\n         expandVerticalSteps,\n         styles,\n         scrollTracking,\n         orientation,\n         steps,\n         setStep,\n         isLastStep: isLastStepCurrentStep,\n         previousActiveStep,\n      } = useStepper()\n\n      const opacity = hasVisited ? 1 : 0.8\n      const localIsLoading = isLoading || state === \"loading\"\n      const localIsError = isError || state === \"error\"\n\n      const isLastStep = index === steps.length - 1\n\n      const active =\n         variant === \"line\" ? isCompletedStep || isCurrentStep : isCompletedStep\n      const checkIcon = checkIconProp || checkIconContext\n      const errorIcon = errorIconProp || errorIconContext\n\n      const renderChildren = () => {\n         if (!expandVerticalSteps) {\n            return (\n               <Collapsible open={isCurrentStep}>\n                  <CollapsibleContent\n                     ref={(node) => {\n                        if (\n                           // If the step is the first step and the previous step\n                           // was the last step or if the step is not the first step\n                           // This prevents initial scrolling when the stepper\n                           // is located anywhere other than the top of the view.\n                           scrollTracking &&\n                           ((index === 0 &&\n                              previousActiveStep &&\n                              previousActiveStep === steps.length) ||\n                              (index && index > 0))\n                        ) {\n                           node?.scrollIntoView({\n                              behavior: \"smooth\",\n                              block: \"center\",\n                           })\n                        }\n                     }}\n                     className=\"data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden\"\n                  >\n                     {children}\n                  </CollapsibleContent>\n               </Collapsible>\n            )\n         }\n         return children\n      }\n\n      return (\n         <div\n            ref={ref}\n            className={cn(\n               \"stepper__vertical-step\",\n               verticalStepVariants({\n                  variant: variant?.includes(\"circle\") ? \"circle\" : \"line\",\n               }),\n               isLastStepCurrentStep && \"gap-[var(--step-gap)]\",\n               styles?.[\"vertical-step\"],\n            )}\n            data-optional={steps[index || 0]?.optional}\n            data-completed={isCompletedStep}\n            data-active={active}\n            data-clickable={clickable || !!onClickStep}\n            data-invalid={localIsError}\n            onClick={() => {\n               if (onClickStep) onClickStep(index || 0, setStep)\n               else onClickStepGeneral?.(index || 0, setStep)\n            }}\n         >\n            <div\n               data-vertical\n               data-active={active}\n               className={cn(\n                  \"stepper__vertical-step-container\",\n                  \"flex items-center\",\n                  variant === \"line\" &&\n                     \"data-[active=true]:border-primary border-s-[3px] py-2 ps-3\",\n                  styles?.[\"vertical-step-container\"],\n               )}\n            >\n               <StepButtonContainer\n                  {...{\n                     isLoading: localIsLoading,\n                     isError: localIsError,\n                     ...props,\n                  }}\n               >\n                  <StepIcon\n                     {...{\n                        index,\n                        isError: localIsError,\n                        isLoading: localIsLoading,\n                        isCurrentStep,\n                        isCompletedStep,\n                     }}\n                     icon={icon}\n                     checkIcon={checkIcon}\n                     errorIcon={errorIcon}\n                  />\n               </StepButtonContainer>\n               <StepLabel\n                  label={label}\n                  description={description}\n                  {...{ isCurrentStep, opacity }}\n               />\n            </div>\n            <div\n               className={cn(\n                  \"stepper__vertical-step-content\",\n                  !isLastStep && \"min-h-4\",\n                  variant !== \"line\" && \"ps-[--step-icon-size]\",\n                  variant === \"line\" && orientation === \"vertical\" && \"min-h-0\",\n                  styles?.[\"vertical-step-content\"],\n               )}\n            >\n               {renderChildren()}\n            </div>\n         </div>\n      )\n   },\n)\n\n// <---------- HORIZONTAL STEP ---------->\n\nconst HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(\n   (props, ref) => {\n      const {\n         isError,\n         isLoading,\n         onClickStep,\n         variant,\n         clickable,\n         checkIcon: checkIconContext,\n         errorIcon: errorIconContext,\n         styles,\n         steps,\n         setStep,\n      } = useStepper()\n\n      const {\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         hasVisited,\n         icon,\n         label,\n         description,\n         isKeepError,\n         state,\n         checkIcon: checkIconProp,\n         errorIcon: errorIconProp,\n      } = props\n\n      const localIsLoading = isLoading || state === \"loading\"\n      const localIsError = isError || state === \"error\"\n\n      const opacity = hasVisited ? 1 : 0.8\n\n      const active =\n         variant === \"line\" ? isCompletedStep || isCurrentStep : isCompletedStep\n\n      const checkIcon = checkIconProp || checkIconContext\n      const errorIcon = errorIconProp || errorIconContext\n\n      return (\n         <div\n            aria-disabled={!hasVisited}\n            className={cn(\n               \"stepper__horizontal-step\",\n               \"relative flex items-center transition-all duration-200\",\n               \"[&:not(:last-child)]:flex-1\",\n               \"[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200\",\n               \"[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:content-['']\",\n               \"data-[completed=true]:[&:not(:last-child)]:after:bg-primary\",\n               \"data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive\",\n               variant === \"circle-alt\" &&\n                  \"flex-1 flex-col justify-start [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:-order-1 [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]\",\n               variant === \"circle\" &&\n                  \"[&:not(:last-child)]:after:me-[var(--step-gap)] [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:flex-1\",\n               variant === \"line\" &&\n                  \"data-[active=true]:border-primary flex-1 flex-col border-t-[3px]\",\n               styles?.[\"horizontal-step\"],\n            )}\n            data-optional={steps[index || 0]?.optional}\n            data-completed={isCompletedStep}\n            data-active={active}\n            data-invalid={localIsError}\n            data-clickable={clickable}\n            onClick={() => onClickStep?.(index || 0, setStep)}\n            ref={ref}\n         >\n            <div\n               className={cn(\n                  \"stepper__horizontal-step-container\",\n                  \"flex items-center\",\n                  variant === \"circle-alt\" && \"flex-col justify-center gap-1\",\n                  variant === \"line\" && \"w-full\",\n                  styles?.[\"horizontal-step-container\"],\n               )}\n            >\n               <StepButtonContainer\n                  {...{\n                     ...props,\n                     isError: localIsError,\n                     isLoading: localIsLoading,\n                  }}\n               >\n                  <StepIcon\n                     {...{\n                        index,\n                        isCompletedStep,\n                        isCurrentStep,\n                        isError: localIsError,\n                        isKeepError,\n                        isLoading: localIsLoading,\n                     }}\n                     icon={icon}\n                     checkIcon={checkIcon}\n                     errorIcon={errorIcon}\n                  />\n               </StepButtonContainer>\n               <StepLabel\n                  label={label}\n                  description={description}\n                  {...{ isCurrentStep, opacity }}\n               />\n            </div>\n         </div>\n      )\n   },\n)\n\n// <---------- STEP BUTTON CONTAINER ---------->\n\ntype StepButtonContainerProps = StepSharedProps & {\n   children?: React.ReactNode\n}\n\nfunction StepButtonContainer({\n   isCurrentStep,\n   isCompletedStep,\n   children,\n   isError,\n   isLoading: isLoadingProp,\n   onClickStep,\n}: StepButtonContainerProps) {\n   const {\n      clickable,\n      isLoading: isLoadingContext,\n      variant,\n      styles,\n   } = useStepper()\n\n   const currentStepClickable = clickable || !!onClickStep\n\n   const isLoading = isLoadingProp || isLoadingContext\n\n   if (variant === \"line\") return null\n\n   return (\n      <Button\n         variant=\"ghost\"\n         tabIndex={currentStepClickable ? 0 : -1}\n         className={cn(\n            \"stepper__step-button-container\",\n            \"pointer-events-none rounded-full p-0\",\n            \"size-[var(--step-icon-size)]\",\n            \"flex items-center justify-center rounded-full border-2\",\n            \"data-[clickable=true]:pointer-events-auto\",\n            \"data-[active=true]:bg-primary data-[active=true]:border-primary data-[active=true]:text-primary-foreground\",\n            \"data-[current=true]:border-primary data-[current=true]:bg-secondary\",\n            \"data-[invalid=true]:bg-destructive data-[invalid=true]:border-destructive data-[invalid=true]:text-destructive-foreground\",\n            styles?.[\"step-button-container\"],\n         )}\n         aria-current={isCurrentStep ? \"step\" : undefined}\n         data-current={isCurrentStep}\n         data-invalid={isError && (isCurrentStep || isCompletedStep)}\n         data-active={isCompletedStep}\n         data-clickable={currentStepClickable}\n         data-loading={isLoading && (isCurrentStep || isCompletedStep)}\n      >\n         {children}\n      </Button>\n   )\n}\n\n// <---------- STEP ICON ---------->\n\ntype IconType = LucideIcon | React.ComponentType<any> | undefined\n\nconst iconVariants = cva(\"\", {\n   variants: {\n      size: {\n         sm: \"size-4\",\n         md: \"size-4\",\n         lg: \"size-5\",\n      },\n   },\n   defaultVariants: {\n      size: \"md\",\n   },\n})\n\ninterface StepIconProps {\n   isCompletedStep?: boolean\n   isCurrentStep?: boolean\n   isError?: boolean\n   isLoading?: boolean\n   isKeepError?: boolean\n   icon?: IconType\n   index?: number\n   checkIcon?: IconType\n   errorIcon?: IconType\n}\n\nconst StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(\n   (props, ref) => {\n      const { size } = useStepper()\n\n      const {\n         isCompletedStep,\n         isCurrentStep,\n         isError,\n         isLoading,\n         isKeepError,\n         icon: CustomIcon,\n         index,\n         checkIcon: CustomCheckIcon,\n         errorIcon: CustomErrorIcon,\n      } = props\n\n      const Icon = React.useMemo(() => CustomIcon || null, [CustomIcon])\n\n      const ErrorIcon = React.useMemo(\n         () => CustomErrorIcon || null,\n         [CustomErrorIcon],\n      )\n\n      const Check = React.useMemo(\n         () => CustomCheckIcon || CheckIcon,\n         [CustomCheckIcon],\n      )\n\n      return React.useMemo(() => {\n         if (isCompletedStep) {\n            if (isError && isKeepError) {\n               return (\n                  <div key=\"icon\">\n                     <X className={cn(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            return (\n               <div key=\"check-icon\">\n                  <Check className={cn(iconVariants({ size }))} />\n               </div>\n            )\n         }\n         if (isCurrentStep) {\n            if (isError && ErrorIcon) {\n               return (\n                  <div key=\"error-icon\">\n                     <ErrorIcon className={cn(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            if (isError) {\n               return (\n                  <div key=\"icon\">\n                     <X className={cn(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            if (isLoading) {\n               return (\n                  <Loader2\n                     className={cn(iconVariants({ size }), \"animate-spin\")}\n                  />\n               )\n            }\n         }\n         if (Icon) {\n            return (\n               <div key=\"step-icon\">\n                  <Icon className={cn(iconVariants({ size }))} />\n               </div>\n            )\n         }\n         return (\n            <span\n               ref={ref}\n               key=\"label\"\n               className={cn(\"text-md text-center font-medium\")}\n            >\n               {(index || 0) + 1}\n            </span>\n         )\n      }, [\n         isCompletedStep,\n         isCurrentStep,\n         isError,\n         isLoading,\n         Icon,\n         index,\n         Check,\n         ErrorIcon,\n         isKeepError,\n         ref,\n         size,\n      ])\n   },\n)\n\n// <---------- STEP LABEL ---------->\n\ninterface StepLabelProps {\n   isCurrentStep?: boolean\n   opacity: number\n   label?: string | React.ReactNode\n   description?: string | null\n}\n\nconst labelVariants = cva(\"\", {\n   variants: {\n      size: {\n         sm: \"text-sm\",\n         md: \"text-sm\",\n         lg: \"text-base\",\n      },\n   },\n   defaultVariants: {\n      size: \"md\",\n   },\n})\n\nconst descriptionVariants = cva(\"\", {\n   variants: {\n      size: {\n         sm: \"text-xs\",\n         md: \"text-xs\",\n         lg: \"text-sm\",\n      },\n   },\n   defaultVariants: {\n      size: \"md\",\n   },\n})\n\nfunction StepLabel({\n   isCurrentStep,\n   opacity,\n   label,\n   description,\n}: StepLabelProps) {\n   const { variant, styles, size, orientation } = useStepper()\n   const shouldRender = !!label || !!description\n\n   return shouldRender ? (\n      <div\n         aria-current={isCurrentStep ? \"step\" : undefined}\n         className={cn(\n            \"stepper__step-label-container\",\n            \"flex flex-col\",\n            variant !== \"line\"\n               ? \"ms-2\"\n               : orientation === \"horizontal\" && \"my-2\",\n            variant === \"circle-alt\" && \"text-center\",\n            variant === \"circle-alt\" && orientation === \"horizontal\" && \"ms-0\",\n            variant === \"circle-alt\" &&\n               orientation === \"vertical\" &&\n               \"text-start\",\n            styles?.[\"step-label-container\"],\n         )}\n         style={{\n            opacity,\n         }}\n      >\n         {!!label && (\n            <span\n               className={cn(\n                  \"stepper__step-label\",\n                  labelVariants({ size }),\n                  styles?.[\"step-label\"],\n               )}\n            >\n               {label}\n            </span>\n         )}\n         {!!description && (\n            <span\n               className={cn(\n                  \"stepper__step-description\",\n                  \"text-muted-foreground\",\n                  descriptionVariants({ size }),\n                  styles?.[\"step-description\"],\n               )}\n            >\n               {description}\n            </span>\n         )}\n      </div>\n   ) : null\n}\n\nexport { Stepper, Step, useStepper }\nexport type { StepProps, StepperProps, StepItem }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/switch-demo.json b/apps/web/public/v0/styles/default/switch-demo.json
new file mode 100644
index 00000000..ec14e915
--- /dev/null
+++ b/apps/web/public/v0/styles/default/switch-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "switch-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/switch-demo.tsx",
+      "content": "import { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\n\nexport default function SwitchDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Switch id=\"airplane-mode\" />\n         <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/switch-form.json b/apps/web/public/v0/styles/default/switch-form.json
new file mode 100644
index 00000000..f8dd48ed
--- /dev/null
+++ b/apps/web/public/v0/styles/default/switch-form.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "switch-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/switch-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n} from \"@/components/ui/form\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   marketing_emails: z.boolean().default(false).optional(),\n   security_emails: z.boolean(),\n})\n\nexport default function SwitchForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         security_emails: true,\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-full space-y-6\"\n         >\n            <div>\n               <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n               <div className=\"space-y-4\">\n                  <FormField\n                     control={form.control}\n                     name=\"marketing_emails\"\n                     render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n                           <div className=\"space-y-0.5\">\n                              <FormLabel className=\"text-base\">\n                                 Marketing emails\n                              </FormLabel>\n                              <FormDescription>\n                                 Receive emails about new products, features,\n                                 and more.\n                              </FormDescription>\n                           </div>\n                           <FormControl>\n                              <Switch\n                                 checked={field.value}\n                                 onCheckedChange={field.onChange}\n                              />\n                           </FormControl>\n                        </FormItem>\n                     )}\n                  />\n                  <FormField\n                     control={form.control}\n                     name=\"security_emails\"\n                     render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n                           <div className=\"space-y-0.5\">\n                              <FormLabel className=\"text-base\">\n                                 Security emails\n                              </FormLabel>\n                              <FormDescription>\n                                 Receive emails about your account security.\n                              </FormDescription>\n                           </div>\n                           <FormControl>\n                              <Switch\n                                 checked={field.value}\n                                 onCheckedChange={field.onChange}\n                                 disabled\n                                 aria-readonly\n                              />\n                           </FormControl>\n                        </FormItem>\n                     )}\n                  />\n               </div>\n            </div>\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/switch.json b/apps/web/public/v0/styles/default/switch.json
new file mode 100644
index 00000000..ae12bae4
--- /dev/null
+++ b/apps/web/public/v0/styles/default/switch.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "switch",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-switch"
+  ],
+  "files": [
+    {
+      "path": "ui/switch.tsx",
+      "content": "\"use client\"\n\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Switch = React.forwardRef<\n   React.ElementRef<typeof SwitchPrimitives.Root>,\n   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n   <SwitchPrimitives.Root\n      className={cn(\n         \"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n         className,\n      )}\n      {...props}\n      ref={ref}\n   >\n      <SwitchPrimitives.Thumb\n         className={cn(\n            \"bg-background pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\",\n         )}\n      />\n   </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/table-demo.json b/apps/web/public/v0/styles/default/table-demo.json
new file mode 100644
index 00000000..edfd9eae
--- /dev/null
+++ b/apps/web/public/v0/styles/default/table-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "table-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/table-demo.tsx",
+      "content": "import {\n   Table,\n   TableBody,\n   TableCaption,\n   TableCell,\n   TableFooter,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from \"@/components/ui/table\"\n\nconst invoices = [\n   {\n      invoice: \"INV001\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$250.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV002\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$150.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV003\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$350.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV004\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$450.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV005\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$550.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV006\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$200.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV007\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$300.00\",\n      paymentMethod: \"Credit Card\",\n   },\n]\n\nexport default function TableDemo() {\n   return (\n      <Table>\n         <TableCaption>A list of your recent invoices.</TableCaption>\n         <TableHeader>\n            <TableRow>\n               <TableHead className=\"w-[100px]\">Invoice</TableHead>\n               <TableHead>Status</TableHead>\n               <TableHead>Method</TableHead>\n               <TableHead className=\"text-right\">Amount</TableHead>\n            </TableRow>\n         </TableHeader>\n         <TableBody>\n            {invoices.map((invoice) => (\n               <TableRow key={invoice.invoice}>\n                  <TableCell className=\"font-medium\">\n                     {invoice.invoice}\n                  </TableCell>\n                  <TableCell>{invoice.paymentStatus}</TableCell>\n                  <TableCell>{invoice.paymentMethod}</TableCell>\n                  <TableCell className=\"text-right\">\n                     {invoice.totalAmount}\n                  </TableCell>\n               </TableRow>\n            ))}\n         </TableBody>\n         <TableFooter>\n            <TableRow>\n               <TableCell colSpan={3}>Total</TableCell>\n               <TableCell className=\"text-right\">$2,500.00</TableCell>\n            </TableRow>\n         </TableFooter>\n      </Table>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/table.json b/apps/web/public/v0/styles/default/table.json
new file mode 100644
index 00000000..dc83024d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/table.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "table",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/table.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n   HTMLTableElement,\n   React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n   <div className=\"relative w-full overflow-auto\">\n      <table\n         ref={ref}\n         className={cn(\"w-full caption-bottom text-sm\", className)}\n         {...props}\n      />\n   </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <tbody\n      ref={ref}\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n   />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <tfoot\n      ref={ref}\n      className={cn(\n         \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n   HTMLTableRowElement,\n   React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n   <tr\n      ref={ref}\n      className={cn(\n         \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n   HTMLTableCellElement,\n   React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n   <th\n      ref={ref}\n      className={cn(\n         \"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n   HTMLTableCellElement,\n   React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n   <td\n      ref={ref}\n      className={cn(\n         \"p-4 align-middle [&:has([role=checkbox])]:pr-0\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n   HTMLTableCaptionElement,\n   React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n   <caption\n      ref={ref}\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n   />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n   Table,\n   TableHeader,\n   TableBody,\n   TableFooter,\n   TableHead,\n   TableRow,\n   TableCell,\n   TableCaption,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tabs-demo.json b/apps/web/public/v0/styles/default/tabs-demo.json
new file mode 100644
index 00000000..3cc0d9ae
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tabs-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tabs-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tabs-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Tabs,\n   TabsContent,\n   TabsList,\n   TabsTrigger,\n} from \"@/components/ui/tabs\"\n\nexport default function TabsDemo() {\n   return (\n      <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n         <TabsList className=\"grid w-full grid-cols-2\">\n            <TabsTrigger value=\"account\">Account</TabsTrigger>\n            <TabsTrigger value=\"password\">Password</TabsTrigger>\n         </TabsList>\n         <TabsContent value=\"account\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Account</CardTitle>\n                  <CardDescription>\n                     Make changes to your account here. Click save when you're\n                     done.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"username\">Username</Label>\n                     <Input id=\"username\" defaultValue=\"~peduarte\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save changes</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n         <TabsContent value=\"password\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Password</CardTitle>\n                  <CardDescription>\n                     Change your password here. After saving, you'll be logged\n                     out.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"current\">Current password</Label>\n                     <Input id=\"current\" type=\"password\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"new\">New password</Label>\n                     <Input id=\"new\" type=\"password\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save password</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n      </Tabs>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tabs.json b/apps/web/public/v0/styles/default/tabs.json
new file mode 100644
index 00000000..f9033b5d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tabs.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tabs",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-tabs"
+  ],
+  "files": [
+    {
+      "path": "ui/tabs.tsx",
+      "content": "\"use client\"\n\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n         \"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1\",\n         className,\n      )}\n      {...props}\n   />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n         \"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm\",\n         className,\n      )}\n      {...props}\n   />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n         \"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n         className,\n      )}\n      {...props}\n   />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/terminal-demo.json b/apps/web/public/v0/styles/default/terminal-demo.json
new file mode 100644
index 00000000..f6bad101
--- /dev/null
+++ b/apps/web/public/v0/styles/default/terminal-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "terminal-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/terminal-demo.tsx",
+      "content": "import {\n   AnimatedSpan,\n   Terminal,\n   TypingAnimation,\n} from \"@/components/ui/terminal\"\n\nexport default function TerminalDemo() {\n   return (\n      <Terminal>\n         <TypingAnimation>&gt; pnpm dlx nyxb@latest init</TypingAnimation>\n\n         <AnimatedSpan delay={1500} className=\"text-green-500\">\n            <span>✔ Preflight checks.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={2000} className=\"text-green-500\">\n            <span>✔ Verifying framework. Found Next.js.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={2500} className=\"text-green-500\">\n            <span>✔ Validating Tailwind CSS.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={3000} className=\"text-green-500\">\n            <span>✔ Validating import alias.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={3500} className=\"text-green-500\">\n            <span>✔ Writing components.json.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={4000} className=\"text-green-500\">\n            <span>✔ Checking registry.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={4500} className=\"text-green-500\">\n            <span>✔ Updating tailwind.config.ts</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={5000} className=\"text-green-500\">\n            <span>✔ Updating app/globals.css</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={5500} className=\"text-green-500\">\n            <span>✔ Installing dependencies.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={6000} className=\"text-blue-500\">\n            <span>ℹ Updated 1 file:</span>\n            <span className=\"pl-2\">- lib/utils.ts</span>\n         </AnimatedSpan>\n\n         <TypingAnimation delay={6500} className=\"text-muted-foreground\">\n            Success! Project initialization completed.\n         </TypingAnimation>\n\n         <TypingAnimation delay={7000} className=\"text-muted-foreground\">\n            You may now add components.\n         </TypingAnimation>\n      </Terminal>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/terminal.json b/apps/web/public/v0/styles/default/terminal.json
new file mode 100644
index 00000000..f7ac52a5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/terminal.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "terminal",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/terminal.tsx",
+      "content": "\"use client\"\n\nimport { type MotionProps, motion } from \"motion/react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface AnimatedSpanProps extends MotionProps {\n   children: React.ReactNode\n   delay?: number\n   className?: string\n}\n\nexport const AnimatedSpan = ({\n   children,\n   delay = 0,\n   className,\n   ...props\n}: AnimatedSpanProps) => (\n   <motion.div\n      initial={{ opacity: 0, y: -5 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.3, delay: delay / 1000 }}\n      className={cn(\"grid text-sm font-normal tracking-tight\", className)}\n      {...props}\n   >\n      {children}\n   </motion.div>\n)\n\ninterface TypingAnimationProps extends MotionProps {\n   children: string\n   className?: string\n   duration?: number\n   delay?: number\n   as?: React.ElementType\n}\n\nexport const TypingAnimation = ({\n   children,\n   className,\n   duration = 60,\n   delay = 0,\n   as: Component = \"span\",\n   ...props\n}: TypingAnimationProps) => {\n   if (typeof children !== \"string\") {\n      throw new Error(\"TypingAnimation: children must be a string. Received:\")\n   }\n\n   const MotionComponent = motion.create(Component, {\n      forwardMotionProps: true,\n   })\n\n   const [displayedText, setDisplayedText] = useState<string>(\"\")\n   const [started, setStarted] = useState(false)\n   const elementRef = useRef<HTMLElement | null>(null)\n\n   useEffect(() => {\n      const startTimeout = setTimeout(() => {\n         setStarted(true)\n      }, delay)\n      return () => clearTimeout(startTimeout)\n   }, [delay])\n\n   useEffect(() => {\n      if (!started) return\n\n      let i = 0\n      const typingEffect = setInterval(() => {\n         if (i < children.length) {\n            setDisplayedText(children.substring(0, i + 1))\n            i++\n         } else {\n            clearInterval(typingEffect)\n         }\n      }, duration)\n\n      return () => {\n         clearInterval(typingEffect)\n      }\n   }, [children, duration, started])\n\n   return (\n      <MotionComponent\n         ref={elementRef}\n         className={cn(\"text-sm font-normal tracking-tight\", className)}\n         {...props}\n      >\n         {displayedText}\n      </MotionComponent>\n   )\n}\n\ninterface TerminalProps {\n   children: React.ReactNode\n   className?: string\n}\n\nexport const Terminal = ({ children, className }: TerminalProps) => {\n   return (\n      <div\n         className={cn(\n            \"z-0 h-full max-h-[400px] w-full max-w-lg rounded-xl border border-border bg-background\",\n            className,\n         )}\n      >\n         <div className=\"flex flex-col gap-y-2 border-b border-border p-4\">\n            <div className=\"flex flex-row gap-x-2\">\n               <div className=\"h-2 w-2 rounded-full bg-red-500\"></div>\n               <div className=\"h-2 w-2 rounded-full bg-yellow-500\"></div>\n               <div className=\"h-2 w-2 rounded-full bg-green-500\"></div>\n            </div>\n         </div>\n         <pre className=\"p-4\">\n            <code className=\"grid gap-y-1 overflow-auto\">{children}</code>\n         </pre>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/text-animate-demo-2.json b/apps/web/public/v0/styles/default/text-animate-demo-2.json
new file mode 100644
index 00000000..bc02ff8e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/text-animate-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-2.tsx",
+      "content": "import { TextAnimate } from \"@/components/ui/text-animate\"\n\nexport default function TextAnimateDemo2() {\n   return (\n      <TextAnimate animation=\"blurIn\" as=\"h1\">\n         Blur in text\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/text-animate-demo-3.json b/apps/web/public/v0/styles/default/text-animate-demo-3.json
new file mode 100644
index 00000000..2a610f4d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/text-animate-demo-3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-3",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-3.tsx",
+      "content": "import { TextAnimate } from \"@/components/ui/text-animate\"\n\nexport default function TextAnimateDemo3() {\n   return (\n      <TextAnimate animation=\"slideUp\" by=\"word\">\n         Slide up by word\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/text-animate-demo-4.json b/apps/web/public/v0/styles/default/text-animate-demo-4.json
new file mode 100644
index 00000000..0acf5bdb
--- /dev/null
+++ b/apps/web/public/v0/styles/default/text-animate-demo-4.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-4",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-4.tsx",
+      "content": "import { TextAnimate } from \"@/components/ui/text-animate\"\n\nexport default function TextAnimateDemo4() {\n   return (\n      <TextAnimate animation=\"scaleUp\" by=\"text\">\n         Scale up by text\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/text-animate-demo-5.json b/apps/web/public/v0/styles/default/text-animate-demo-5.json
new file mode 100644
index 00000000..b5a9e15b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/text-animate-demo-5.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-5",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-5.tsx",
+      "content": "import { TextAnimate } from \"@/components/ui/text-animate\"\n\nexport default function TextAnimateDemo5() {\n   return (\n      <TextAnimate animation=\"fadeIn\" by=\"line\" as=\"p\">\n         {`Fade in by line as paragraph\\n\\nFade in by line as paragraph\\n\\nFade in by line as paragraph`}\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/text-animate-demo-6.json b/apps/web/public/v0/styles/default/text-animate-demo-6.json
new file mode 100644
index 00000000..42234590
--- /dev/null
+++ b/apps/web/public/v0/styles/default/text-animate-demo-6.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-6",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-6.tsx",
+      "content": "import { TextAnimate } from \"@/components/ui/text-animate\"\n\nexport default function TextAnimateDemo6() {\n   return (\n      <TextAnimate animation=\"slideLeft\" by=\"character\">\n         Slide left by character\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/text-animate-demo.json b/apps/web/public/v0/styles/default/text-animate-demo.json
new file mode 100644
index 00000000..e9f39065
--- /dev/null
+++ b/apps/web/public/v0/styles/default/text-animate-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo.tsx",
+      "content": "import { TextAnimate } from \"@/components/ui/text-animate\"\n\nexport default function TextAnimateDemo() {\n   return (\n      <TextAnimate animation=\"blurInUp\" by=\"character\">\n         Blur in by character\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/text-animate.json b/apps/web/public/v0/styles/default/text-animate.json
new file mode 100644
index 00000000..452646c1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/text-animate.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/text-animate.tsx",
+      "content": "\"use client\"\n\nimport {\n   AnimatePresence,\n   type MotionProps,\n   type Variants,\n   motion,\n} from \"motion/react\"\nimport type { ElementType } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype AnimationType = \"text\" | \"word\" | \"character\" | \"line\"\ntype AnimationVariant =\n   | \"fadeIn\"\n   | \"blurIn\"\n   | \"blurInUp\"\n   | \"blurInDown\"\n   | \"slideUp\"\n   | \"slideDown\"\n   | \"slideLeft\"\n   | \"slideRight\"\n   | \"scaleUp\"\n   | \"scaleDown\"\n\ninterface TextAnimateProps extends MotionProps {\n   /**\n    * The text content to animate\n    */\n   children: string\n   /**\n    * The class name to be applied to the component\n    */\n   className?: string\n   /**\n    * The class name to be applied to each segment\n    */\n   segmentClassName?: string\n   /**\n    * The delay before the animation starts\n    */\n   delay?: number\n   /**\n    * The duration of the animation\n    */\n   duration?: number\n   /**\n    * Custom motion variants for the animation\n    */\n   variants?: Variants\n   /**\n    * The element type to render\n    */\n   as?: ElementType\n   /**\n    * How to split the text (\"text\", \"word\", \"character\")\n    */\n   by?: AnimationType\n   /**\n    * Whether to start animation when component enters viewport\n    */\n   startOnView?: boolean\n   /**\n    * Whether to animate only once\n    */\n   once?: boolean\n   /**\n    * The animation preset to use\n    */\n   animation?: AnimationVariant\n}\n\nconst staggerTimings: Record<AnimationType, number> = {\n   text: 0.06,\n   word: 0.05,\n   character: 0.03,\n   line: 0.06,\n}\n\nconst defaultContainerVariants = {\n   hidden: { opacity: 1 },\n   show: {\n      opacity: 1,\n      transition: {\n         staggerChildren: 0.05,\n      },\n   },\n   exit: {\n      opacity: 0,\n      transition: {\n         staggerChildren: 0.05,\n         staggerDirection: -1,\n      },\n   },\n}\n\nconst defaultItemVariants: Variants = {\n   hidden: { opacity: 0 },\n   show: {\n      opacity: 1,\n   },\n   exit: {\n      opacity: 0,\n   },\n}\n\nconst defaultItemAnimationVariants: Record<\n   AnimationVariant,\n   { container: Variants; item: Variants }\n> = {\n   fadeIn: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, y: 20 },\n         show: (delay: number) => ({\n            opacity: 1,\n            y: 0,\n            transition: {\n               delay,\n               duration: 0.3,\n            },\n         }),\n         exit: {\n            opacity: 0,\n            y: 20,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   blurIn: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, filter: \"blur(10px)\" },\n         show: (i: number) => ({\n            opacity: 1,\n            filter: \"blur(0px)\",\n            transition: {\n               delay: i * 0.1,\n               duration: 0.3,\n            },\n         }),\n         exit: {\n            opacity: 0,\n            filter: \"blur(10px)\",\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   blurInUp: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, filter: \"blur(10px)\", y: 20 },\n         show: (delay: number) => ({\n            opacity: 1,\n            filter: \"blur(0px)\",\n            y: 0,\n            transition: {\n               y: { duration: 0.3 },\n               opacity: { duration: 0.4 },\n               filter: { duration: 0.3 },\n            },\n         }),\n         exit: {\n            opacity: 0,\n            filter: \"blur(10px)\",\n            y: 20,\n            transition: {\n               y: { duration: 0.3 },\n               opacity: { duration: 0.4 },\n               filter: { duration: 0.3 },\n            },\n         },\n      },\n   },\n   blurInDown: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, filter: \"blur(10px)\", y: -20 },\n         show: (delay: number) => ({\n            opacity: 1,\n            filter: \"blur(0px)\",\n            y: 0,\n            transition: {\n               y: { duration: 0.3 },\n               opacity: { duration: 0.4 },\n               filter: { duration: 0.3 },\n            },\n         }),\n      },\n   },\n   slideUp: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { y: 20, opacity: 0 },\n         show: (delay: number) => ({\n            y: 0,\n            opacity: 1,\n            transition: {\n               delay,\n               duration: 0.3,\n            },\n         }),\n         exit: {\n            y: -20,\n            opacity: 0,\n            transition: {\n               duration: 0.3,\n            },\n         },\n      },\n   },\n   slideDown: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { y: -20, opacity: 0 },\n         show: {\n            y: 0,\n            opacity: 1,\n            transition: { duration: 0.3 },\n         },\n         exit: {\n            y: 20,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   slideLeft: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { x: 20, opacity: 0 },\n         show: {\n            x: 0,\n            opacity: 1,\n            transition: { duration: 0.3 },\n         },\n         exit: {\n            x: -20,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   slideRight: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { x: -20, opacity: 0 },\n         show: {\n            x: 0,\n            opacity: 1,\n            transition: { duration: 0.3 },\n         },\n         exit: {\n            x: 20,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   scaleUp: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { scale: 0.5, opacity: 0 },\n         show: {\n            scale: 1,\n            opacity: 1,\n            transition: {\n               duration: 0.3,\n               scale: {\n                  type: \"spring\",\n                  damping: 15,\n                  stiffness: 300,\n               },\n            },\n         },\n         exit: {\n            scale: 0.5,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   scaleDown: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { scale: 1.5, opacity: 0 },\n         show: (delay: number) => ({\n            scale: 1,\n            opacity: 1,\n            transition: {\n               delay,\n               duration: 0.3,\n               scale: {\n                  type: \"spring\",\n                  damping: 15,\n                  stiffness: 300,\n               },\n            },\n         }),\n         exit: {\n            scale: 1.5,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n}\n\nexport function TextAnimate({\n   children,\n   delay = 0,\n   duration = 0.3,\n   variants,\n   className,\n   segmentClassName,\n   as: Component = \"p\",\n   startOnView = true,\n   once = false,\n   by = \"word\",\n   animation = \"fadeIn\",\n   ...props\n}: TextAnimateProps) {\n   const MotionComponent = motion.create(Component)\n\n   // Use provided variants or default variants based on animation type\n   const finalVariants = animation\n      ? {\n           container: {\n              ...defaultItemAnimationVariants[animation].container,\n              show: {\n                 ...defaultItemAnimationVariants[animation].container.show,\n                 transition: {\n                    staggerChildren: staggerTimings[by],\n                 },\n              },\n              exit: {\n                 ...defaultItemAnimationVariants[animation].container.exit,\n                 transition: {\n                    staggerChildren: staggerTimings[by],\n                    staggerDirection: -1,\n                 },\n              },\n           },\n           item: defaultItemAnimationVariants[animation].item,\n        }\n      : { container: defaultContainerVariants, item: defaultItemVariants }\n\n   let segments: string[] = []\n   switch (by) {\n      case \"word\":\n         segments = children.split(/(\\s+)/)\n         break\n      case \"character\":\n         segments = children.split(\"\")\n         break\n      case \"line\":\n         segments = children.split(\"\\n\")\n         break\n      case \"text\":\n      default:\n         segments = [children]\n         break\n   }\n\n   return (\n      <AnimatePresence mode=\"popLayout\">\n         <MotionComponent\n            variants={finalVariants.container}\n            initial=\"hidden\"\n            whileInView={startOnView ? \"show\" : undefined}\n            animate={startOnView ? undefined : \"show\"}\n            exit=\"exit\"\n            className={cn(\"whitespace-pre-wrap\", className)}\n            {...props}\n         >\n            {segments.map((segment, i) => (\n               <motion.span\n                  key={`${by}-${segment}-${i}`}\n                  variants={finalVariants.item}\n                  custom={i * staggerTimings[by]}\n                  className={cn(\n                     by === \"line\" ? \"block\" : \"inline-block whitespace-pre\",\n                     segmentClassName,\n                  )}\n               >\n                  {segment}\n               </motion.span>\n            ))}\n         </MotionComponent>\n      </AnimatePresence>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/text-reveal-demo.json b/apps/web/public/v0/styles/default/text-reveal-demo.json
new file mode 100644
index 00000000..8dd5b932
--- /dev/null
+++ b/apps/web/public/v0/styles/default/text-reveal-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-reveal-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-reveal-demo.tsx",
+      "content": "import TextReveal from \"@/components/ui/text-reveal\"\n\nexport default async function TextRevealDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center rounded-lg border bg-white dark:bg-black\">\n         <TextReveal text=\"Nyxb UI will change the way you design.\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/text-reveal.json b/apps/web/public/v0/styles/default/text-reveal.json
new file mode 100644
index 00000000..af95ca6f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/text-reveal.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-reveal",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/text-reveal.tsx",
+      "content": "\"use client\"\n\nimport { motion, useScroll, useTransform } from \"framer-motion\"\nimport type { FC, ReactNode } from \"react\"\nimport { useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TextRevealByWordProps {\n   text: string\n   className?: string\n}\n\nexport const TextRevealByWord: FC<TextRevealByWordProps> = ({\n   text,\n   className,\n}) => {\n   const targetRef = useRef<HTMLDivElement | null>(null)\n\n   const { scrollYProgress } = useScroll({\n      target: targetRef,\n   })\n   const words = text.split(\" \")\n\n   return (\n      <div ref={targetRef} className={cn(\"relative z-0 h-[200vh]\", className)}>\n         <div className=\"sticky top-0 mx-auto flex h-1/2 max-w-4xl items-center bg-transparent px-4 py-20\">\n            <p\n               ref={targetRef}\n               className=\"flex flex-wrap p-5 text-2xl font-bold text-black/20 md:p-8 md:text-3xl lg:p-10 lg:text-4xl xl:text-5xl dark:text-white/20\"\n            >\n               {words.map((word, i) => {\n                  const start = i / words.length\n                  const end = start + 1 / words.length\n                  return (\n                     <Word\n                        key={i}\n                        progress={scrollYProgress}\n                        range={[start, end]}\n                     >\n                        {word}\n                     </Word>\n                  )\n               })}\n            </p>\n         </div>\n      </div>\n   )\n}\n\ninterface WordProps {\n   children: ReactNode\n   progress: any\n   range: [number, number]\n}\n\nconst Word: FC<WordProps> = ({ children, progress, range }) => {\n   const opacity = useTransform(progress, range, [0, 1])\n   return (\n      <span className=\"xl:lg-3 relative mx-1 lg:mx-2.5\">\n         <span className=\"absolute opacity-30\">{children}</span>\n         <motion.span\n            style={{ opacity }}\n            className=\"text-black dark:text-white\"\n         >\n            {children}\n         </motion.span>\n      </span>\n   )\n}\n\nexport default TextRevealByWord\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/textarea-demo.json b/apps/web/public/v0/styles/default/textarea-demo.json
new file mode 100644
index 00000000..9f903f07
--- /dev/null
+++ b/apps/web/public/v0/styles/default/textarea-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/components/ui/textarea\"\n\nexport default function TextareaDemo() {\n   return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/textarea-disabled.json b/apps/web/public/v0/styles/default/textarea-disabled.json
new file mode 100644
index 00000000..1e548255
--- /dev/null
+++ b/apps/web/public/v0/styles/default/textarea-disabled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/textarea-disabled.tsx",
+      "content": "import { Textarea } from \"@/components/ui/textarea\"\n\nexport default function TextareaDisabled() {\n   return <Textarea placeholder=\"Type your message here.\" disabled />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/textarea-form.json b/apps/web/public/v0/styles/default/textarea-form.json
new file mode 100644
index 00000000..9e1e44af
--- /dev/null
+++ b/apps/web/public/v0/styles/default/textarea-form.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/textarea-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   bio: z\n      .string()\n      .min(10, {\n         message: \"Bio must be at least 10 characters.\",\n      })\n      .max(160, {\n         message: \"Bio must not be longer than 30 characters.\",\n      }),\n})\n\nexport default function TextareaForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"bio\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Bio</FormLabel>\n                     <FormControl>\n                        <Textarea\n                           placeholder=\"Tell us a little bit about yourself\"\n                           className=\"resize-none\"\n                           {...field}\n                        />\n                     </FormControl>\n                     <FormDescription>\n                        You can <span>~mention</span> other users and\n                        organizations.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/textarea-with-button.json b/apps/web/public/v0/styles/default/textarea-with-button.json
new file mode 100644
index 00000000..e2eb76f2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/textarea-with-button.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea-with-button",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/textarea-with-button.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport default function TextareaWithButton() {\n   return (\n      <div className=\"grid w-full gap-2\">\n         <Textarea placeholder=\"Type your message here.\" />\n         <Button>Send message</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/textarea-with-label.json b/apps/web/public/v0/styles/default/textarea-with-label.json
new file mode 100644
index 00000000..6f08f518
--- /dev/null
+++ b/apps/web/public/v0/styles/default/textarea-with-label.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea-with-label",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/textarea-with-label.tsx",
+      "content": "import { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport default function TextareaWithLabel() {\n   return (\n      <div className=\"grid w-full gap-1.5\">\n         <Label htmlFor=\"message\">Your message</Label>\n         <Textarea placeholder=\"Type your message here.\" id=\"message\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/textarea-with-text.json b/apps/web/public/v0/styles/default/textarea-with-text.json
new file mode 100644
index 00000000..8cdc7f04
--- /dev/null
+++ b/apps/web/public/v0/styles/default/textarea-with-text.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea-with-text",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/textarea-with-text.tsx",
+      "content": "import { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport default function TextareaWithText() {\n   return (\n      <div className=\"grid w-full gap-1.5\">\n         <Label htmlFor=\"message-2\">Your Message</Label>\n         <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n         <p className=\"text-muted-foreground text-sm\">\n            Your message will be copied to the support team.\n         </p>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/textarea.json b/apps/web/public/v0/styles/default/textarea.json
new file mode 100644
index 00000000..a19c6724
--- /dev/null
+++ b/apps/web/public/v0/styles/default/textarea.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/textarea.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n   ({ className, ...props }, ref) => {\n      return (\n         <textarea\n            className={cn(\n               \"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/theme-daylight.json b/apps/web/public/v0/styles/default/theme-daylight.json
new file mode 100644
index 00000000..ed53ff99
--- /dev/null
+++ b/apps/web/public/v0/styles/default/theme-daylight.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "theme-daylight",
+  "type": "registry:theme",
+  "author": "nyxb (https://nyxbui.design)",
+  "cssVars": {
+    "light": {
+      "background": "36 39% 88%",
+      "foreground": "36 45% 15%",
+      "primary": "36 45% 70%",
+      "primary-foreground": "36 45% 11%",
+      "secondary": "40 35% 77%",
+      "secondary-foreground": "36 45% 25%",
+      "accent": "36 64% 57%",
+      "accent-foreground": "36 72% 17%",
+      "destructive": "0 84% 37%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "36 33% 75%",
+      "muted-foreground": "36 45% 25%",
+      "card": "36 46% 82%",
+      "card-foreground": "36 45% 20%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "border": "36 45% 60%",
+      "input": "36 45% 60%",
+      "ring": "36 45% 30%",
+      "chart-1": "25 34% 28%",
+      "chart-2": "26 36% 34%",
+      "chart-3": "28 40% 40%",
+      "chart-4": "31 41% 48%",
+      "chart-5": "35 43% 53%"
+    },
+    "dark": {
+      "background": "36 39% 88%",
+      "foreground": "36 45% 15%",
+      "primary": "36 45% 70%",
+      "primary-foreground": "36 45% 11%",
+      "secondary": "40 35% 77%",
+      "secondary-foreground": "36 45% 25%",
+      "accent": "36 64% 57%",
+      "accent-foreground": "36 72% 17%",
+      "destructive": "0 84% 37%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "36 33% 75%",
+      "muted-foreground": "36 45% 25%",
+      "card": "36 46% 82%",
+      "card-foreground": "36 45% 20%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "border": "36 45% 60%",
+      "input": "36 45% 60%",
+      "ring": "36 45% 30%",
+      "chart-1": "25 34% 28%",
+      "chart-2": "26 36% 34%",
+      "chart-3": "28 40% 40%",
+      "chart-4": "31 41% 48%",
+      "chart-5": "35 43% 53%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/theme-emerald.json b/apps/web/public/v0/styles/default/theme-emerald.json
new file mode 100644
index 00000000..19fab7be
--- /dev/null
+++ b/apps/web/public/v0/styles/default/theme-emerald.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "theme-emerald",
+  "type": "registry:theme",
+  "author": "nyxb (https://nyxbui.design)",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "142 86% 28%",
+      "primary-foreground": "356 29% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 45%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 72% 51%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "142 86% 28%",
+      "chart-1": "139 65% 20%",
+      "chart-2": "140 74% 44%",
+      "chart-3": "142 88% 28%",
+      "chart-4": "137 55% 15%",
+      "chart-5": "141 40% 9%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "142 86% 28%",
+      "primary-foreground": "356 29% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 72% 51%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "142 86% 28%",
+      "chart-1": "142 88% 28%",
+      "chart-2": "139 65% 20%",
+      "chart-3": "140 74% 24%",
+      "chart-4": "137 55% 15%",
+      "chart-5": "141 40% 9%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/theme-midnight.json b/apps/web/public/v0/styles/default/theme-midnight.json
new file mode 100644
index 00000000..36638300
--- /dev/null
+++ b/apps/web/public/v0/styles/default/theme-midnight.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "theme-midnight",
+  "type": "registry:theme",
+  "author": "nyxb (https://nyxbui.design)",
+  "cssVars": {
+    "light": {
+      "background": "240 5% 6%",
+      "foreground": "60 5% 90%",
+      "primary": "240 0% 90%",
+      "primary-foreground": "60 0% 0%",
+      "secondary": "240 4% 15%",
+      "secondary-foreground": "60 5% 85%",
+      "accent": "240 0% 13%",
+      "accent-foreground": "60 0% 100%",
+      "destructive": "0 60% 50%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "240 5% 25%",
+      "muted-foreground": "60 5% 85%",
+      "card": "240 4% 10%",
+      "card-foreground": "60 5% 90%",
+      "popover": "240 5% 15%",
+      "popover-foreground": "60 5% 85%",
+      "border": "240 6% 20%",
+      "input": "240 6% 20%",
+      "ring": "240 5% 90%",
+      "chart-1": "359 2% 90%",
+      "chart-2": "240 1% 74%",
+      "chart-3": "240 1% 58%",
+      "chart-4": "240 1% 42%",
+      "chart-5": "240 2% 26%"
+    },
+    "dark": {
+      "background": "240 5% 6%",
+      "foreground": "60 5% 90%",
+      "primary": "240 0% 90%",
+      "primary-foreground": "60 0% 0%",
+      "secondary": "240 4% 15%",
+      "secondary-foreground": "60 5% 85%",
+      "accent": "240 0% 13%",
+      "accent-foreground": "60 0% 100%",
+      "destructive": "0 60% 50%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "240 5% 25%",
+      "muted-foreground": "60 5% 85%",
+      "card": "240 4% 10%",
+      "card-foreground": "60 5% 90%",
+      "popover": "240 5% 15%",
+      "popover-foreground": "60 5% 85%",
+      "border": "240 6% 20%",
+      "input": "240 6% 20%",
+      "ring": "240 5% 90%",
+      "chart-1": "359 2% 90%",
+      "chart-2": "240 1% 74%",
+      "chart-3": "240 1% 58%",
+      "chart-4": "240 1% 42%",
+      "chart-5": "240 2% 26%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/timeline-alternate.json b/apps/web/public/v0/styles/default/timeline-alternate.json
new file mode 100644
index 00000000..f8057736
--- /dev/null
+++ b/apps/web/public/v0/styles/default/timeline-alternate.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "timeline-alternate",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "timeline"
+  ],
+  "files": [
+    {
+      "path": "examples/timeline-alternate.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"@/components/ui/timeline\"\n\nexport default function TimelineAlternate() {\n   return (\n      <Timeline positions=\"center\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading>Done!</TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/timeline-demo.json b/apps/web/public/v0/styles/default/timeline-demo.json
new file mode 100644
index 00000000..271fa30f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/timeline-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "timeline-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "timeline"
+  ],
+  "files": [
+    {
+      "path": "examples/timeline-demo.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"@/components/ui/timeline\"\n\nexport default function TimelineDemo() {\n   return (\n      <Timeline>\n         <TimelineItem status=\"done\">\n            <TimelineHeading>Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading>Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent>\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Done!</TimelineHeading>\n            <TimelineDot />\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/timeline-labels.json b/apps/web/public/v0/styles/default/timeline-labels.json
new file mode 100644
index 00000000..a9e7432a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/timeline-labels.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "timeline-labels",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "timeline"
+  ],
+  "files": [
+    {
+      "path": "examples/timeline-labels.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"@/components/ui/timeline\"\n\nexport default function TimelineAlternate() {\n   return (\n      <Timeline positions=\"center\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Done (05/04/2024)\n            </TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Failed (05/04/2024)\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Current step\n            </TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Next step\n            </TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Deadline (05/10/2024)\n            </TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading>Done!</TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Here everything ends\n            </TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/timeline-right.json b/apps/web/public/v0/styles/default/timeline-right.json
new file mode 100644
index 00000000..c247edd1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/timeline-right.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "timeline-right",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "timeline"
+  ],
+  "files": [
+    {
+      "path": "examples/timeline-right.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"@/components/ui/timeline\"\n\nexport default function TimelineRight() {\n   return (\n      <Timeline positions=\"right\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading side=\"left\">Done!</TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/timeline.json b/apps/web/public/v0/styles/default/timeline.json
new file mode 100644
index 00000000..fbb69a11
--- /dev/null
+++ b/apps/web/public/v0/styles/default/timeline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "timeline",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "files": [
+    {
+      "path": "ui/timeline.tsx",
+      "content": "import type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport { Check, Circle, X } from \"lucide-react\"\nimport React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst timelineVariants = cva(\"grid\", {\n   variants: {\n      positions: {\n         left: \"[&>li]:grid-cols-[0_min-content_1fr]\",\n         right: \"[&>li]:grid-cols-[1fr_min-content]\",\n         center: \"[&>li]:grid-cols-[1fr_min-content_1fr]\",\n      },\n   },\n   defaultVariants: {\n      positions: \"left\",\n   },\n})\n\ninterface TimelineProps\n   extends React.HTMLAttributes<HTMLUListElement>,\n      VariantProps<typeof timelineVariants> {}\n\nconst Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(\n   ({ children, className, positions, ...props }, ref) => {\n      return (\n         <ul\n            className={cn(timelineVariants({ positions }), className)}\n            ref={ref}\n            {...props}\n         >\n            {children}\n         </ul>\n      )\n   },\n)\nTimeline.displayName = \"Timeline\"\n\nconst timelineItemVariants = cva(\"grid items-center gap-x-2\", {\n   variants: {\n      status: {\n         done: \"text-primary\",\n         default: \"text-muted-foreground\",\n      },\n   },\n   defaultVariants: {\n      status: \"default\",\n   },\n})\n\ninterface TimelineItemProps\n   extends React.HTMLAttributes<HTMLLIElement>,\n      VariantProps<typeof timelineItemVariants> {}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n   ({ className, status, ...props }, ref) => (\n      <li\n         className={cn(timelineItemVariants({ status }), className)}\n         ref={ref}\n         {...props}\n      />\n   ),\n)\nTimelineItem.displayName = \"TimelineItem\"\n\nconst timelineDotVariants = cva(\n   \"col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current\",\n   {\n      variants: {\n         status: {\n            default: \"[&>*]:hidden\",\n            current:\n               \"[&>*:not(.lucide-circle)]:hidden [&>.lucide-circle]:fill-current [&>.lucide-circle]:text-current\",\n            done: \"bg-primary [&>*:not(.lucide-check)]:hidden [&>.lucide-check]:text-background\",\n            error: \"border-destructive bg-destructive [&>*:not(.lucide-x)]:hidden [&>.lucide-x]:text-background\",\n            custom: \"[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block\",\n         },\n      },\n      defaultVariants: {\n         status: \"default\",\n      },\n   },\n)\n\ninterface TimelineDotProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof timelineDotVariants> {\n   customIcon?: React.ReactNode\n}\n\nconst TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(\n   ({ className, status, customIcon, ...props }, ref) => (\n      <div\n         role=\"status\"\n         className={cn(\n            \"timeline-dot\",\n            timelineDotVariants({ status }),\n            className,\n         )}\n         ref={ref}\n         {...props}\n      >\n         <Circle className=\"size-2.5\" />\n         <Check className=\"size-3\" />\n         <X className=\"size-3\" />\n         {customIcon}\n      </div>\n   ),\n)\nTimelineDot.displayName = \"TimelineDot\"\n\nconst timelineContentVariants = cva(\n   \"row-start-2 row-end-2 pb-8 text-muted-foreground\",\n   {\n      variants: {\n         side: {\n            right: \"col-start-3 col-end-4 mr-auto text-left\",\n            left: \"col-start-1 col-end-2 ml-auto text-right\",\n         },\n      },\n      defaultVariants: {\n         side: \"right\",\n      },\n   },\n)\n\ninterface TimelineContentProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof timelineContentVariants> {}\n\nconst TimelineContent = React.forwardRef<HTMLDivElement, TimelineContentProps>(\n   ({ className, side, ...props }, ref) => (\n      <div\n         className={cn(timelineContentVariants({ side }), className)}\n         ref={ref}\n         {...props}\n      />\n   ),\n)\nTimelineContent.displayName = \"TimelineContent\"\n\nconst timelineHeadingVariants = cva(\n   \"row-start-1 row-end-1 line-clamp-1 max-w-full truncate\",\n   {\n      variants: {\n         side: {\n            right: \"col-start-3 col-end-4 mr-auto text-left\",\n            left: \"col-start-1 col-end-2 ml-auto text-right\",\n         },\n         variant: {\n            primary: \"text-base font-medium text-primary\",\n            secondary: \"text-sm font-light text-muted-foreground\",\n         },\n      },\n      defaultVariants: {\n         side: \"right\",\n         variant: \"primary\",\n      },\n   },\n)\n\ninterface TimelineHeadingProps\n   extends React.HTMLAttributes<HTMLParagraphElement>,\n      VariantProps<typeof timelineHeadingVariants> {}\n\nconst TimelineHeading = React.forwardRef<\n   HTMLParagraphElement,\n   TimelineHeadingProps\n>(({ className, side, variant, ...props }, ref) => (\n   <p\n      role=\"heading\"\n      aria-level={variant === \"primary\" ? 2 : 3}\n      className={cn(timelineHeadingVariants({ side, variant }), className)}\n      ref={ref}\n      {...props}\n   />\n))\nTimelineHeading.displayName = \"TimelineHeading\"\n\ninterface TimelineLineProps extends React.HTMLAttributes<HTMLHRElement> {\n   done?: boolean\n}\n\nconst TimelineLine = React.forwardRef<HTMLHRElement, TimelineLineProps>(\n   ({ className, done = false, ...props }, ref) => {\n      return (\n         <hr\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            className={cn(\n               \"col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full\",\n               done ? \"bg-primary\" : \"bg-muted\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nTimelineLine.displayName = \"TimelineLine\"\n\nexport {\n   Timeline,\n   TimelineDot,\n   TimelineItem,\n   TimelineContent,\n   TimelineHeading,\n   TimelineLine,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toast-demo.json b/apps/web/public/v0/styles/default/toast-demo.json
new file mode 100644
index 00000000..f14324d1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toast-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toast-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ToastAction } from \"@/components/ui/toast\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nexport default function ToastDemo() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Scheduled: Catch up \",\n               description: \"Friday, February 10, 2023 at 5:57 PM\",\n               action: (\n                  <ToastAction altText=\"Goto schedule to undo\">\n                     Undo\n                  </ToastAction>\n               ),\n            })\n         }}\n      >\n         Add to calendar\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toast-destructive.json b/apps/web/public/v0/styles/default/toast-destructive.json
new file mode 100644
index 00000000..a42564ae
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toast-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toast-destructive",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-destructive.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ToastAction } from \"@/components/ui/toast\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nexport default function ToastDestructive() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               variant: \"destructive\",\n               title: \"Uh oh! Something went wrong.\",\n               description: \"There was a problem with your request.\",\n               action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toast-simple.json b/apps/web/public/v0/styles/default/toast-simple.json
new file mode 100644
index 00000000..a790cf6a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toast-simple.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toast-simple",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-simple.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nexport default function ToastSimple() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               description: \"Your message has been sent.\",\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toast-with-action.json b/apps/web/public/v0/styles/default/toast-with-action.json
new file mode 100644
index 00000000..f8fa28e7
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toast-with-action.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toast-with-action",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-with-action.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ToastAction } from \"@/components/ui/toast\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nexport default function ToastWithAction() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Uh oh! Something went wrong.\",\n               description: \"There was a problem with your request.\",\n               action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toast-with-title.json b/apps/web/public/v0/styles/default/toast-with-title.json
new file mode 100644
index 00000000..05376c55
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toast-with-title.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toast-with-title",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-with-title.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nexport default function ToastWithTitle() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Uh oh! Something went wrong.\",\n               description: \"There was a problem with your request.\",\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toast.json b/apps/web/public/v0/styles/default/toast.json
new file mode 100644
index 00000000..8bc8734c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toast.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toast",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-toast"
+  ],
+  "files": [
+    {
+      "path": "ui/toast.tsx",
+      "content": "\"use client\"\n\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Viewport>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Viewport\n      ref={ref}\n      className={cn(\n         \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n         className,\n      )}\n      {...props}\n   />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n   \"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n   {\n      variants: {\n         variant: {\n            default: \"border bg-background text-foreground\",\n            destructive:\n               \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nconst Toast = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Root>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n      VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n   return (\n      <ToastPrimitives.Root\n         ref={ref}\n         className={cn(toastVariants({ variant }), className)}\n         {...props}\n      />\n   )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Action>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Action\n      ref={ref}\n      className={cn(\n         \"ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n         className,\n      )}\n      {...props}\n   />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Close>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Close\n      ref={ref}\n      className={cn(\n         \"text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\n         className,\n      )}\n      toast-close=\"\"\n      {...props}\n   >\n      <X className=\"size-4\" />\n   </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Title>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Title\n      ref={ref}\n      className={cn(\"text-sm font-semibold\", className)}\n      {...props}\n   />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Description>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Description\n      ref={ref}\n      className={cn(\"text-sm opacity-90\", className)}\n      {...props}\n   />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n   type ToastProps,\n   type ToastActionElement,\n   ToastProvider,\n   ToastViewport,\n   Toast,\n   ToastTitle,\n   ToastDescription,\n   ToastClose,\n   ToastAction,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "hooks/use-toast.ts",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type { ToastActionElement, ToastProps } from \"@/components/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n   id: string\n   title?: React.ReactNode\n   description?: React.ReactNode\n   action?: ToastActionElement\n}\n\nconst actionTypes = {\n   ADD_TOAST: \"ADD_TOAST\",\n   UPDATE_TOAST: \"UPDATE_TOAST\",\n   DISMISS_TOAST: \"DISMISS_TOAST\",\n   REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n   count = (count + 1) % Number.MAX_SAFE_INTEGER\n   return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n   | {\n        type: ActionType[\"ADD_TOAST\"]\n        toast: ToasterToast\n     }\n   | {\n        type: ActionType[\"UPDATE_TOAST\"]\n        toast: Partial<ToasterToast>\n     }\n   | {\n        type: ActionType[\"DISMISS_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n   | {\n        type: ActionType[\"REMOVE_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n\ninterface State {\n   toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n   if (toastTimeouts.has(toastId)) {\n      return\n   }\n\n   const timeout = setTimeout(() => {\n      toastTimeouts.delete(toastId)\n      dispatch({\n         type: \"REMOVE_TOAST\",\n         toastId,\n      })\n   }, TOAST_REMOVE_DELAY)\n\n   toastTimeouts.set(toastId, timeout)\n}\n\nexport function reducer(state: State, action: Action): State {\n   switch (action.type) {\n      case \"ADD_TOAST\":\n         return {\n            ...state,\n            toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n         }\n\n      case \"UPDATE_TOAST\":\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === action.toast.id ? { ...t, ...action.toast } : t,\n            ),\n         }\n\n      case \"DISMISS_TOAST\": {\n         const { toastId } = action\n\n         // ! Side effects ! - This could be extracted into a dismissToast() action,\n         // but I'll keep it here for simplicity\n         if (toastId) {\n            addToRemoveQueue(toastId)\n         } else {\n            state.toasts.forEach((toast) => {\n               addToRemoveQueue(toast.id)\n            })\n         }\n\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === toastId || toastId === undefined\n                  ? {\n                       ...t,\n                       open: false,\n                    }\n                  : t,\n            ),\n         }\n      }\n      case \"REMOVE_TOAST\":\n         if (action.toastId === undefined) {\n            return {\n               ...state,\n               toasts: [],\n            }\n         }\n         return {\n            ...state,\n            toasts: state.toasts.filter((t) => t.id !== action.toastId),\n         }\n   }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n   memoryState = reducer(memoryState, action)\n   listeners.forEach((listener) => {\n      listener(memoryState)\n   })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n   const id = genId()\n\n   const update = (props: ToasterToast) =>\n      dispatch({\n         type: \"UPDATE_TOAST\",\n         toast: { ...props, id },\n      })\n   const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n   dispatch({\n      type: \"ADD_TOAST\",\n      toast: {\n         ...props,\n         id,\n         open: true,\n         onOpenChange: (open) => {\n            if (!open) dismiss()\n         },\n      },\n   })\n\n   return {\n      id,\n      dismiss,\n      update,\n   }\n}\n\nfunction useToast() {\n   const [state, setState] = React.useState<State>(memoryState)\n\n   React.useEffect(() => {\n      listeners.push(setState)\n      return () => {\n         const index = listeners.indexOf(setState)\n         if (index > -1) {\n            listeners.splice(index, 1)\n         }\n      }\n   }, [state])\n\n   return {\n      ...state,\n      toast,\n      dismiss: (toastId?: string) =>\n         dispatch({ type: \"DISMISS_TOAST\", toastId }),\n   }\n}\n\nexport { useToast, toast }\n",
+      "type": "registry:hook",
+      "target": ""
+    },
+    {
+      "path": "ui/toaster.tsx",
+      "content": "\"use client\"\n\nimport {\n   Toast,\n   ToastClose,\n   ToastDescription,\n   ToastProvider,\n   ToastTitle,\n   ToastViewport,\n} from \"@/components/ui/toast\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nexport function Toaster() {\n   const { toasts } = useToast()\n\n   return (\n      <ToastProvider>\n         {toasts.map(({ id, title, description, action, ...props }) => {\n            return (\n               <Toast key={id} {...props}>\n                  <div className=\"grid gap-1\">\n                     {title && <ToastTitle>{title}</ToastTitle>}\n                     {description && (\n                        <ToastDescription>{description}</ToastDescription>\n                     )}\n                  </div>\n                  {action}\n                  <ToastClose />\n               </Toast>\n            )\n         })}\n         <ToastViewport />\n      </ToastProvider>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toc-active.json b/apps/web/public/v0/styles/default/toc-active.json
new file mode 100644
index 00000000..01d83cb3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toc-active.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toc-active",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toc-active.tsx",
+      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from \"@/components/ui/toc\"\n\nexport default function TOCActive() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>\n            Active Item Table of Contents\n         </TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem indent>\n            <TableOfContentsLink isActive href=\"#second-section\">\n               Second Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toc-demo.json b/apps/web/public/v0/styles/default/toc-demo.json
new file mode 100644
index 00000000..05f22154
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toc-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toc-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toc-demo.tsx",
+      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from \"@/components/ui/toc\"\n\nexport default function TOCDemo() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#second-section\">\n               Second Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toc-nested.json b/apps/web/public/v0/styles/default/toc-nested.json
new file mode 100644
index 00000000..b241db01
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toc-nested.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toc-nested",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toc-nested.tsx",
+      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from \"@/components/ui/toc\"\n\nexport default function TOCDNested() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Nested Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section-nested\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem indent>\n            <TableOfContentsList>\n               <TableOfContentsLink href=\"#first-nested-section-nested\">\n                  First Nested Section\n               </TableOfContentsLink>\n               <TableOfContentsItem indent>\n                  <TableOfContentsLink href=\"#second-nested-section-nested\">\n                     Second Nested Section\n                  </TableOfContentsLink>\n               </TableOfContentsItem>\n            </TableOfContentsList>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section-nested\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toc.json b/apps/web/public/v0/styles/default/toc.json
new file mode 100644
index 00000000..f867d1a2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toc.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toc",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/toc.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface TableOfContentsListProps\n   extends React.ComponentPropsWithoutRef<\"ul\"> {\n   indent?: boolean\n}\n\nconst TableOfContentsList = React.forwardRef<\n   React.ElementRef<\"ul\">,\n   TableOfContentsListProps\n>(({ className, indent, ...props }, ref) => (\n   <ul\n      ref={ref}\n      className={cn(\"m-0 list-none\", indent && \"pl-4\", className)}\n      {...props}\n   />\n))\nTableOfContentsList.displayName = \"TableOfContentsList\"\n\ninterface TableOfContentsTitleProps\n   extends React.ComponentPropsWithoutRef<\"li\"> {}\n\nconst TableOfContentsTitle = React.forwardRef<\n   React.ElementRef<\"li\">,\n   TableOfContentsTitleProps\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={cn(\"mb-2 text-sm font-medium\", className)}\n      {...props}\n   />\n))\nTableOfContentsTitle.displayName = \"TableOfContentsTitle\"\n\ninterface TableOfContentsItemProps\n   extends React.ComponentPropsWithoutRef<\"li\"> {\n   indent?: boolean\n}\n\nconst TableOfContentsItem = React.forwardRef<\n   React.ElementRef<\"li\">,\n   TableOfContentsItemProps\n>(({ className, indent, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={cn(\"mt-0 pt-2\", indent && \"ml-4\", className)}\n      {...props}\n   />\n))\nTableOfContentsItem.displayName = \"TableOfContentsItem\"\n\ninterface TableOfContentsLinkProps extends React.ComponentPropsWithoutRef<\"a\"> {\n   isActive?: boolean\n}\n\nconst TableOfContentsLink = React.forwardRef<\n   React.ElementRef<\"a\">,\n   TableOfContentsLinkProps\n>(({ className, isActive, ...props }, ref) => (\n   <a\n      ref={ref}\n      className={cn(\n         \"text-foreground hover:text-primary text-sm font-medium transition-colors\",\n         isActive ? \"text-foreground font-medium\" : \"text-muted-foreground\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableOfContentsLink.displayName = \"TableOfContentsLink\"\n\nexport {\n   TableOfContentsList,\n   TableOfContentsTitle,\n   TableOfContentsItem,\n   TableOfContentsLink,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-demo.json b/apps/web/public/v0/styles/default/toggle-demo.json
new file mode 100644
index 00000000..d458c9cd
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport default function ToggleDemo() {\n   return (\n      <Toggle aria-label=\"Toggle bold\">\n         <Bold className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-disabled.json b/apps/web/public/v0/styles/default/toggle-disabled.json
new file mode 100644
index 00000000..d9078f20
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-disabled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport default function ToggleDisabled() {\n   return (\n      <Toggle aria-label=\"Toggle underline\" disabled>\n         <Underline className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-group-demo.json b/apps/web/public/v0/styles/default/toggle-group-demo.json
new file mode 100644
index 00000000..008d44e3
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-group-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-group-disabled.json b/apps/web/public/v0/styles/default/toggle-group-disabled.json
new file mode 100644
index 00000000..18007cf4
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-group-disabled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-group-disabled.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup disabled type=\"single\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-group-lg.json b/apps/web/public/v0/styles/default/toggle-group-lg.json
new file mode 100644
index 00000000..4334d90d
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-group-lg.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group-lg",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-group-lg.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup size=\"lg\" type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-group-outline.json b/apps/web/public/v0/styles/default/toggle-group-outline.json
new file mode 100644
index 00000000..a8b7ab15
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-group-outline.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group-outline",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-group-outline.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup variant=\"outline\" type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-group-single.json b/apps/web/public/v0/styles/default/toggle-group-single.json
new file mode 100644
index 00000000..659d6184
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-group-single.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group-single",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-group-single.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"single\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-group-sm.json b/apps/web/public/v0/styles/default/toggle-group-sm.json
new file mode 100644
index 00000000..ccf58c49
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-group-sm.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group-sm",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-group-sm.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n   ToggleGroup,\n   ToggleGroupItem,\n} from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup size=\"sm\" type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n            <Underline className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-group.json b/apps/web/public/v0/styles/default/toggle-group.json
new file mode 100644
index 00000000..12f868b6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-group.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-toggle-group"
+  ],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle-group.tsx",
+      "content": "\"use client\"\n\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/components/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n   VariantProps<typeof toggleVariants>\n>({\n   size: \"default\",\n   variant: \"default\",\n})\n\nconst ToggleGroup = React.forwardRef<\n   React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n      VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n   <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={cn(\"flex items-center justify-center gap-1\", className)}\n      {...props}\n   >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n         {children}\n      </ToggleGroupContext.Provider>\n   </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n   React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n      VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n   const context = React.useContext(ToggleGroupContext)\n\n   return (\n      <ToggleGroupPrimitive.Item\n         ref={ref}\n         className={cn(\n            toggleVariants({\n               variant: context.variant || variant,\n               size: context.size || size,\n            }),\n            className,\n         )}\n         {...props}\n      >\n         {children}\n      </ToggleGroupPrimitive.Item>\n   )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-lg.json b/apps/web/public/v0/styles/default/toggle-lg.json
new file mode 100644
index 00000000..e567c664
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-lg.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-lg",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-lg.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport default function ToggleLg() {\n   return (\n      <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n         <Italic className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-outline.json b/apps/web/public/v0/styles/default/toggle-outline.json
new file mode 100644
index 00000000..4423d31a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-outline.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-outline",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport default function ToggleOutline() {\n   return (\n      <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n         <Italic className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-sm.json b/apps/web/public/v0/styles/default/toggle-sm.json
new file mode 100644
index 00000000..b55697bc
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-sm.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-sm",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-sm.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport default function ToggleSm() {\n   return (\n      <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n         <Italic className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle-with-text.json b/apps/web/public/v0/styles/default/toggle-with-text.json
new file mode 100644
index 00000000..13110ffa
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle-with-text.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-with-text",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport default function ToggleWithText() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <Italic className=\"mr-2 size-4\" />\n         Italic\n      </Toggle>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/toggle.json b/apps/web/public/v0/styles/default/toggle.json
new file mode 100644
index 00000000..98be502e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/toggle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-toggle"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle.tsx",
+      "content": "\"use client\"\n\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n   \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-transparent\",\n            outline:\n               \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n         },\n         size: {\n            default: \"h-10 px-3\",\n            sm: \"h-9 px-2.5\",\n            lg: \"h-11 px-5\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n         size: \"default\",\n      },\n   },\n)\n\nconst Toggle = React.forwardRef<\n   React.ElementRef<typeof TogglePrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n      VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n   <TogglePrimitive.Root\n      ref={ref}\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n   />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tooltip-demo.json b/apps/web/public/v0/styles/default/tooltip-demo.json
new file mode 100644
index 00000000..b5d9d907
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tooltip-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tooltip-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Tooltip,\n   TooltipArrow,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nexport default function TooltipDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Add to library</p>\n               <TooltipArrow />\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tooltip-outline.json b/apps/web/public/v0/styles/default/tooltip-outline.json
new file mode 100644
index 00000000..28b3afc8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tooltip-outline.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tooltip-outline",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tooltip-outline.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nexport default function TooltipOutline() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent variant=\"outline\">\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tooltip-secondary.json b/apps/web/public/v0/styles/default/tooltip-secondary.json
new file mode 100644
index 00000000..a9ee95be
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tooltip-secondary.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tooltip-secondary",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tooltip-secondary.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nexport default function TooltipSecondary() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent variant=\"secondary\">\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tooltip-with-toggle-demo.json b/apps/web/public/v0/styles/default/tooltip-with-toggle-demo.json
new file mode 100644
index 00000000..151ca3c2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tooltip-with-toggle-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tooltip-with-toggle-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tooltip-with-toggle-demo.tsx",
+      "content": "import { Heart } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nexport default function TooltipWithToggleDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger>\n               <Toggle variant=\"outline\" aria-label=\"Toggle love\">\n                  <Heart className=\"size-4\" />\n               </Toggle>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Heart</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tooltip.json b/apps/web/public/v0/styles/default/tooltip.json
new file mode 100644
index 00000000..77fd8f16
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tooltip.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tooltip",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-tooltip"
+  ],
+  "files": [
+    {
+      "path": "ui/tooltip.tsx",
+      "content": "\"use client\"\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst tooltipVariants = cva(\n   \"z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-primary text-primary-foreground\",\n            outline: \"border bg-popover text-popover-foreground shadow-md\",\n            secondary: \"bg-secondary text-secondary-foreground\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipArrow = TooltipPrimitive.TooltipArrow\n\nexport interface TooltipProps\n   extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n      VariantProps<typeof tooltipVariants> {}\n\nconst TooltipContent = React.forwardRef<\n   React.ElementRef<typeof TooltipPrimitive.Content>,\n   TooltipProps\n>(({ className, variant, sideOffset = 4, ...props }, ref) => (\n   <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(tooltipVariants({ variant, className }))}\n      {...props}\n   />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport {\n   Tooltip,\n   TooltipTrigger,\n   TooltipArrow,\n   TooltipContent,\n   TooltipProvider,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tour-demo.json b/apps/web/public/v0/styles/default/tour-demo.json
new file mode 100644
index 00000000..ee0b7c61
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tour-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tour-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tour-demo.tsx",
+      "content": "import type * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { TourFactory } from \"@/components/ui/tour\"\n\nconst tour = TourFactory([\n   \"buttonOne\",\n   \"buttonTwo\",\n   \"missingButton\",\n   \"buttonFour\",\n   \"emailInput\",\n])\n\nfunction TourDisplay(props: {\n   children: React.ReactNode\n   title?: string\n   description?: string\n}) {\n   const ctx = tour.useContext()\n   return (\n      <Card className=\"w-[350px]\">\n         <CardHeader>\n            <CardTitle>{props.title}</CardTitle>\n            <CardDescription>{props.description}</CardDescription>\n         </CardHeader>\n         <CardContent>{props.children}</CardContent>\n         <CardFooter>\n            {ctx.current < ctx.nodes.size ? (\n               <div className=\"flex w-full justify-between\">\n                  <Button variant=\"outline\" onClick={ctx.close}>\n                     Close\n                  </Button>\n                  <div>\n                     <Button onClick={ctx.previous}>Previous</Button>\n                     <Button onClick={ctx.next}>Next</Button>\n                  </div>\n               </div>\n            ) : (\n               <div className=\"flex w-full justify-end\">\n                  <Button onClick={ctx.previous}>Previous</Button>\n                  <Button className=\"bg-green-800\" onClick={ctx.close}>\n                     Finish\n                  </Button>\n               </div>\n            )}\n         </CardFooter>\n      </Card>\n   )\n}\n\nfunction TourApplication() {\n   const ctx = tour.useContext()\n   return (\n      <div className=\"flex h-96 w-full items-center justify-center\">\n         <div className=\"absolute bottom-2 left-2 flex gap-2\">\n            <tour.TourFocus\n               name=\"buttonOne\"\n               tourRender={\n                  <TourDisplay title=\"Create Incident\">\n                     <h1>This button creates an incident</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               }\n            >\n               <Button>Create Incident</Button>\n            </tour.TourFocus>\n            <tour.TourFocus\n               name=\"buttonFour\"\n               tourRender={\n                  <TourDisplay title=\"Update Incident\">\n                     <h1>This button pushes your updates</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               }\n            >\n               <Button>Update Incident</Button>\n            </tour.TourFocus>\n         </div>\n         <div className=\"absolute right-2 top-12 flex gap-2\">\n            <tour.TourFocus\n               name=\"buttonTwo\"\n               tourRender={\n                  <TourDisplay title=\"Resolve Incident\">\n                     <h1>This button Resolves the Incident</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               }\n            >\n               <Button>Resolve Incident</Button>\n            </tour.TourFocus>\n         </div>\n         <div>\n            <tour.TourFocus\n               name=\"emailInput\"\n               tourRender={\n                  <TourDisplay title=\"Email Input\">\n                     <h1>This is where you put incident info</h1>\n                     <p>helpful text about this input</p>\n                  </TourDisplay>\n               }\n            >\n               <Input type=\"email\" placeholder=\"Email\" />\n            </tour.TourFocus>\n         </div>\n         <div className=\"absolute bottom-2 right-2\">\n            <Button onClick={ctx.open}>Open Tour</Button>\n         </div>\n      </div>\n   )\n}\n\nexport default function TourDemo() {\n   return (\n      <tour.TourProvider>\n         <TourApplication />\n      </tour.TourProvider>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tour.json b/apps/web/public/v0/styles/default/tour.json
new file mode 100644
index 00000000..568bc3c5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tour.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tour",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/tour.tsx",
+      "content": "\"use client\"\nimport React, {\n   createContext,\n   useContext,\n   useEffect,\n   useMemo,\n   useRef,\n   useState,\n} from \"react\"\nimport { createPortal } from \"react-dom\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TourContext<T extends string> {\n   nodes: Map<\n      string,\n      {\n         ref: HTMLElement\n         render: React.ReactNode\n         name: T\n      }\n   >\n   show: boolean\n   current: number\n   next: () => void\n   previous: () => void\n   close: () => void\n   open: () => void\n}\n\nexport interface TourProps {\n   children?: React.ReactNode\n}\n\nexport interface TourFocusProps<T extends string> {\n   children: React.ReactNode\n   tourRender: React.ReactNode\n   name: T\n}\n\nexport function TourFactory<T extends string>(order: T[]) {\n   const tourContext = createContext<TourContext<T>>({\n      nodes: new Map(),\n      show: false,\n      current: 0,\n      next: () => {\n         console.log(\"empty\")\n      },\n      previous: () => {\n         console.log(\"empty\")\n      },\n      close: () => {\n         console.log(\"empty\")\n      },\n      open: () => {\n         console.log(\"empty\")\n      },\n   })\n\n   function TourPortal() {\n      const ctx = useContext(tourContext)\n\n      const ref = useRef<HTMLDivElement>(null)\n      const [, forceUpdate] = React.useState({})\n\n      const currentElement = useMemo(\n         () => ctx.nodes.get(order[ctx.current] ?? \"\"),\n         [ctx],\n      )\n\n      useEffect(() => {\n         const handleResize = () => {\n            forceUpdate({})\n         }\n\n         window.addEventListener(\"resize\", handleResize)\n         window.addEventListener(\"scroll\", handleResize)\n\n         return () => {\n            window.removeEventListener(\"resize\", handleResize)\n            window.removeEventListener(\"scroll\", handleResize)\n         }\n      }, [])\n\n      useEffect(() => {\n         if (ctx.show) {\n            forceUpdate({})\n         }\n      }, [ctx.show])\n\n      if (!currentElement) {\n         return <></>\n      }\n\n      const currentElementRect = currentElement.ref.getBoundingClientRect()\n\n      const height = ref.current?.getBoundingClientRect().height ?? 0\n      const width = ref.current?.getBoundingClientRect().width ?? 0\n\n      const closest = (): React.CSSProperties => {\n         const isCloseToTop = currentElementRect.top < height\n         const isCloseToLeft = currentElementRect.left < width\n         const isCloseToRight =\n            currentElementRect.right > window.innerWidth - width\n\n         if (isCloseToLeft) {\n            return {\n               left: currentElementRect.x + currentElementRect.width,\n               top:\n                  currentElementRect.y -\n                  height / 2 +\n                  currentElementRect.height / 2,\n            }\n         }\n\n         if (isCloseToRight) {\n            return {\n               left: currentElementRect.x - width,\n               top:\n                  currentElementRect.y -\n                  height / 2 +\n                  currentElementRect.height / 2,\n            }\n         }\n\n         if (isCloseToTop) {\n            return {\n               left:\n                  currentElementRect.x -\n                  width / 2 +\n                  currentElementRect.width / 2,\n               top: currentElementRect.y + currentElementRect.height,\n            }\n         }\n\n         return {\n            left:\n               currentElementRect.x - width / 2 + currentElementRect.width / 2,\n            top: currentElementRect.y - height,\n         }\n      }\n\n      return createPortal(\n         <div\n            id=\"tour\"\n            className={cn(\n               \"pointer-events-auto fixed left-0 top-0 h-screen w-screen transition-none\",\n               !ctx.show ? \"invisible\" : \"visible\",\n            )}\n         >\n            <div\n               ref={ref}\n               className={cn(\n                  `absolute z-50 transition-all duration-500 ease-in-out`,\n               )}\n               style={{\n                  ...closest(),\n               }}\n            >\n               {currentElement.render}\n            </div>\n            <div\n               className=\"absolute z-40 h-screen w-screen overflow-hidden opacity-80 shadow-[0_0_0_100vw_rgba(0,0,0,.99)] transition-all duration-500 ease-in-out\"\n               style={{\n                  height: currentElementRect.height,\n                  width: currentElementRect.width,\n                  left: currentElementRect.x,\n                  top: currentElementRect.y,\n               }}\n            />\n         </div>,\n         document.body,\n      )\n   }\n\n   return {\n      TourProvider: function TourProvider(props: TourProps) {\n         const nodes = useRef<TourContext<T>[\"nodes\"]>(new Map())\n\n         const [show, setShow] = useState(false)\n         const [current, setCurrent] = useState(0)\n\n         const getNextIndex = (currIndex: number, nextDiff: number): number => {\n            const lookAheadIndex = currIndex + nextDiff\n            if (lookAheadIndex >= order.length || lookAheadIndex < 0) {\n               return currIndex\n            }\n            if (!nodes.current.has(order[lookAheadIndex])) {\n               return getNextIndex(lookAheadIndex, nextDiff)\n            }\n            return lookAheadIndex\n         }\n\n         return (\n            <tourContext.Provider\n               value={{\n                  nodes: nodes.current,\n                  current,\n                  show,\n                  next: () => {\n                     setCurrent((state) =>\n                        Math.min(getNextIndex(state, 1), order.length - 1),\n                     )\n                  },\n                  previous: () => {\n                     setCurrent((state) => Math.max(getNextIndex(state, -1), 0))\n                  },\n                  close: () => {\n                     setShow(false)\n                  },\n                  open: () => {\n                     setShow(true)\n                  },\n               }}\n            >\n               <TourPortal />\n               {props.children}\n            </tourContext.Provider>\n         )\n      },\n      context: tourContext,\n      useContext: () => useContext(tourContext),\n      TourFocus: function TourFocus(props: TourFocusProps<T>) {\n         const ctx = useContext(tourContext)\n         return (\n            <div\n               ref={(divRef) => {\n                  if (divRef && !ctx.nodes.has(props.name)) {\n                     ctx.nodes.set(props.name, {\n                        ref: divRef,\n                        render: props.tourRender,\n                        name: props.name,\n                     })\n                  }\n               }}\n            >\n               {props.children}\n            </div>\n         )\n      },\n   }\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tweet-card-demo.json b/apps/web/public/v0/styles/default/tweet-card-demo.json
new file mode 100644
index 00000000..02083e6c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tweet-card-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tweet-card-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tweet-card-demo.tsx",
+      "content": "import ClientTweetCard from \"@/components/ui/client-tweet-card\"\n\n/**\n * <TweetCard /> (Server Side Only)\n * <ClientTweetCard /> (Client Side Only)\n */\nexport default async function TweetDemo() {\n   return <ClientTweetCard id=\"1703861725534011484\" className=\"shadow-2xl\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tweet-card-images.json b/apps/web/public/v0/styles/default/tweet-card-images.json
new file mode 100644
index 00000000..ba98fbaf
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tweet-card-images.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tweet-card-images",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tweet-card-images.tsx",
+      "content": "import ClientTweetCard from \"@/components/ui/client-tweet-card\"\n\nexport default async function TweetImages() {\n   return <ClientTweetCard id=\"1803717292087296479\" className=\"shadow-2xl\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tweet-card-meta-preview.json b/apps/web/public/v0/styles/default/tweet-card-meta-preview.json
new file mode 100644
index 00000000..dd21ef1b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tweet-card-meta-preview.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tweet-card-meta-preview",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tweet-card-meta-preview.tsx",
+      "content": "import ClientTweetCard from \"@/components/ui/client-tweet-card\"\n\nexport default async function TweetMetaPreview() {\n   return <ClientTweetCard id=\"1671108134591504385\" className=\"shadow-2xl\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/tweet-card.json b/apps/web/public/v0/styles/default/tweet-card.json
new file mode 100644
index 00000000..b97fb401
--- /dev/null
+++ b/apps/web/public/v0/styles/default/tweet-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tweet-card",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "react-tweet"
+  ],
+  "files": [
+    {
+      "path": "ui/tweet-card.tsx",
+      "content": "import { Suspense } from \"react\"\nimport {\n   type EnrichedTweet,\n   type TweetProps,\n   type TwitterComponents,\n   enrichTweet,\n} from \"react-tweet\"\nimport { type Tweet, getTweet } from \"react-tweet/api\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TwitterIconProps {\n   className?: string\n   [key: string]: any\n}\nfunction Twitter({ className, ...props }: TwitterIconProps) {\n   return (\n      <svg\n         stroke=\"currentColor\"\n         fill=\"currentColor\"\n         strokeWidth=\"0\"\n         viewBox=\"0 0 24 24\"\n         height=\"1em\"\n         width=\"1em\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         className={className}\n         {...props}\n      >\n         <g>\n            <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n            <path d=\"M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z\"></path>\n         </g>\n      </svg>\n   )\n}\n\nfunction Verified({ className, ...props }: TwitterIconProps) {\n   return (\n      <svg\n         aria-label=\"Verified Account\"\n         viewBox=\"0 0 24 24\"\n         className={className}\n         {...props}\n      >\n         <g fill=\"currentColor\">\n            <path d=\"M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z\" />\n         </g>\n      </svg>\n   )\n}\n\nexport function truncate(str: string | null, length: number) {\n   if (!str || str.length <= length) return str\n   return `${str.slice(0, length - 3)}...`\n}\n\nfunction Skeleton({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\"bg-primary/10 animate-pulse rounded-md\", className)}\n         {...props}\n      />\n   )\n}\n\nexport function TweetSkeleton({\n   className,\n   ...props\n}: {\n   className?: string\n   [key: string]: any\n}) {\n   return (\n      <div\n         className={cn(\n            \"flex size-full max-h-max min-w-72 flex-col gap-2 rounded-lg border p-4\",\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"flex flex-row gap-2\">\n            <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n            <Skeleton className=\"h-10 w-full\" />\n         </div>\n         <Skeleton className=\"h-20 w-full\" />\n      </div>\n   )\n}\n\nexport function TweetNotFound({\n   className,\n   ...props\n}: {\n   className?: string\n   [key: string]: any\n}) {\n   return (\n      <div\n         className={cn(\n            \"flex size-full flex-col items-center justify-center gap-2 rounded-lg border p-4\",\n            className,\n         )}\n         {...props}\n      >\n         <h3>Tweet not found</h3>\n      </div>\n   )\n}\n\nexport function TweetHeader({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"flex flex-row justify-between tracking-tight\">\n         <div className=\"flex items-center space-x-2\">\n            <a href={tweet.user.url} target=\"_blank\" rel=\"noreferrer\">\n               <img\n                  title={`Profile picture of ${tweet.user.name}`}\n                  alt={tweet.user.screen_name}\n                  height={48}\n                  width={48}\n                  src={tweet.user.profile_image_url_https}\n                  className=\"overflow-hidden rounded-full border border-transparent\"\n               />\n            </a>\n            <div>\n               <a\n                  href={tweet.user.url}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"flex items-center whitespace-nowrap font-semibold\"\n               >\n                  {truncate(tweet.user.name, 20)}\n                  {tweet.user.verified ||\n                     (tweet.user.is_blue_verified && (\n                        <Verified className=\"ml-1 inline size-4 text-blue-500\" />\n                     ))}\n               </a>\n               <div className=\"flex items-center space-x-1\">\n                  <a\n                     href={tweet.user.url}\n                     target=\"_blank\"\n                     rel=\"noreferrer\"\n                     className=\"text-sm text-gray-500 transition-all duration-75\"\n                  >\n                     @{truncate(tweet.user.screen_name, 16)}\n                  </a>\n               </div>\n            </div>\n         </div>\n         <a href={tweet.url} target=\"_blank\" rel=\"noreferrer\">\n            <span className=\"sr-only\">Link to tweet</span>\n            <Twitter className=\"size-5 items-start text-[#3BA9EE] transition-all ease-in-out hover:scale-105\" />\n         </a>\n      </div>\n   )\n}\n\nexport function TweetBody({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"break-words leading-normal tracking-tighter\">\n         {tweet.entities.map((entity, idx) => {\n            switch (entity.type) {\n               case \"url\":\n               case \"symbol\":\n               case \"hashtag\":\n               case \"mention\":\n                  return (\n                     <a\n                        key={idx}\n                        href={entity.href}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"text-sm font-normal text-gray-500\"\n                     >\n                        <span>{entity.text}</span>\n                     </a>\n                  )\n               case \"text\":\n                  return (\n                     <span\n                        key={idx}\n                        className=\"text-sm font-normal\"\n                        dangerouslySetInnerHTML={{ __html: entity.text }}\n                     />\n                  )\n            }\n         })}\n      </div>\n   )\n}\n\nexport function TweetMedia({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"flex flex-1 items-center justify-center\">\n         {tweet.video && (\n            <video\n               poster={tweet.video.poster}\n               autoPlay\n               loop\n               muted\n               playsInline\n               className=\"rounded-xl border shadow-sm\"\n            >\n               <source src={tweet.video.variants[0].src} type=\"video/mp4\" />\n               Your browser does not support the video tag.\n            </video>\n         )}\n         {tweet.photos && (\n            <div className=\"relative flex transform-gpu snap-x snap-mandatory gap-4 overflow-x-auto\">\n               <div className=\"shrink-0 snap-center sm:w-2\" />\n               {tweet.photos.map((photo) => (\n                  <img\n                     key={photo.url}\n                     src={photo.url}\n                     title={`Photo by ${tweet.user.name}`}\n                     alt={tweet.text}\n                     className=\"h-64 w-5/6 shrink-0 snap-center snap-always rounded-xl border object-cover shadow-sm\"\n                  />\n               ))}\n               <div className=\"shrink-0 snap-center sm:w-2\" />\n            </div>\n         )}\n         {!tweet.video &&\n            !tweet.photos &&\n            // @ts-expect-error is fine\n            tweet?.card?.binding_values?.thumbnail_image_large?.image_value\n               .url && (\n               <img\n                  src={\n                     // @ts-expect-error is fine\n                     tweet.card.binding_values.thumbnail_image_large.image_value\n                        .url\n                  }\n                  className=\"h-64 rounded-xl border object-cover shadow-sm\"\n               />\n            )}\n      </div>\n   )\n}\n\nexport function MagicTweet({\n   tweet,\n   components,\n   className,\n   ...props\n}: {\n   tweet: Tweet\n   components?: TwitterComponents\n   className?: string\n}) {\n   const enrichedTweet = enrichTweet(tweet)\n   return (\n      <div\n         className={cn(\n            \"relative flex size-full max-w-lg flex-col gap-2 overflow-hidden rounded-lg border p-4 backdrop-blur-md\",\n            className,\n         )}\n         {...props}\n      >\n         <TweetHeader tweet={enrichedTweet} />\n         <TweetBody tweet={enrichedTweet} />\n         <TweetMedia tweet={enrichedTweet} />\n      </div>\n   )\n}\n\n/**\n * TweetCard (Server Side Only)\n */\nexport async function TweetCard({\n   id,\n   components,\n   fallback = <TweetSkeleton />,\n   onError,\n   ...props\n}: TweetProps & {\n   className?: string\n}) {\n   const tweet = id\n      ? await getTweet(id).catch((err) => {\n           if (onError) onError(err)\n           else console.error(err)\n        })\n      : undefined\n\n   if (!tweet) {\n      const NotFound = components?.TweetNotFound || TweetNotFound\n      return <NotFound {...props} />\n   }\n\n   return (\n      <Suspense fallback={fallback}>\n         <MagicTweet tweet={tweet} {...props} />\n      </Suspense>\n   )\n}\n\nexport default TweetCard\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typing-animation-demo.json b/apps/web/public/v0/styles/default/typing-animation-demo.json
new file mode 100644
index 00000000..fb39e8d1
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typing-animation-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typing-animation-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typing-animation-demo.tsx",
+      "content": "import TypingAnimation from \"@/components/ui/typing-animation\"\n\nexport default async function TextRevealDemo() {\n   return (\n      <TypingAnimation\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         text=\"Typing Animation\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typing-animation.json b/apps/web/public/v0/styles/default/typing-animation.json
new file mode 100644
index 00000000..04a97032
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typing-animation.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typing-animation",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/typing-animation.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TypingAnimationProps {\n   text: string\n   duration?: number\n   className?: string\n}\n\nexport default function TypingAnimation({\n   text,\n   duration = 200,\n   className,\n}: TypingAnimationProps) {\n   const [displayedText, setDisplayedText] = useState<string>(\"\")\n   const [i, setI] = useState<number>(0)\n\n   useEffect(() => {\n      const typingEffect = setInterval(() => {\n         if (i < text.length) {\n            setDisplayedText(text.substring(0, i + 1))\n            setI(i + 1)\n         } else {\n            clearInterval(typingEffect)\n         }\n      }, duration)\n\n      return () => {\n         clearInterval(typingEffect)\n      }\n   }, [duration, i])\n\n   return (\n      <h1\n         className={cn(\n            \"font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm\",\n            className,\n         )}\n      >\n         {displayedText || text}\n      </h1>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-blockquote.json b/apps/web/public/v0/styles/default/typography-blockquote.json
new file mode 100644
index 00000000..f84c06f4
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-blockquote.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-blockquote",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-blockquote.tsx",
+      "content": "export default function TypographyBlockquote() {\n   return (\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n         \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n         that they should pay for the privilege.\"\n      </blockquote>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-demo.json b/apps/web/public/v0/styles/default/typography-demo.json
new file mode 100644
index 00000000..f444d0cf
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-demo.tsx",
+      "content": "export default function TypographyDemo() {\n   return (\n      <div>\n         <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n            The Joke Tax Chronicles\n         </h1>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            Once upon a time, in a far-off land, there was a very lazy king who\n            spent all day lounging on his throne. One day, his advisors came to\n            him with a problem: the kingdom was running out of money.\n         </p>\n         <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n            The King's Plan\n         </h2>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king thought long and hard, and finally came up with{\" \"}\n            <a\n               href=\"#\"\n               className=\"text-primary font-medium underline underline-offset-4\"\n            >\n               a brilliant plan\n            </a>\n            : he would tax the jokes in the kingdom.\n         </p>\n         <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n            \"After all,\" he said, \"everyone enjoys a good joke, so it's only\n            fair that they should pay for the privilege.\"\n         </blockquote>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            The Joke Tax\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king's subjects were not amused. They grumbled and complained,\n            but the king was firm:\n         </p>\n         <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n            <li>1st level of puns: 5 gold coins</li>\n            <li>2nd level of jokes: 10 gold coins</li>\n            <li>3rd level of one-liners : 20 gold coins</li>\n         </ul>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            As a result, people stopped telling jokes, and the kingdom fell into\n            a gloom. But there was one person who refused to let the king's\n            foolishness get him down: a court jester named Jokester.\n         </p>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            Jokester's Revolt\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            Jokester began sneaking into the castle in the middle of the night\n            and leaving jokes all over the place: under the king's pillow, in\n            his soup, even in the royal toilet. The king was furious, but he\n            couldn't seem to stop Jokester.\n         </p>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            And then, one day, the people of the kingdom discovered that the\n            jokes left by Jokester were so funny that they couldn't help but\n            laugh. And once they started laughing, they couldn't stop.\n         </p>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            The People's Rebellion\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The people of the kingdom, feeling uplifted by the laughter, started\n            to tell jokes and puns again, and soon the entire kingdom was in on\n            the joke.\n         </p>\n         <div className=\"my-6 w-full overflow-y-auto\">\n            <table className=\"w-full\">\n               <thead>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        King's Treasury\n                     </th>\n                     <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        People's happiness\n                     </th>\n                  </tr>\n               </thead>\n               <tbody>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Empty\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Overflowing\n                     </td>\n                  </tr>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Modest\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Satisfied\n                     </td>\n                  </tr>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Full\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Ecstatic\n                     </td>\n                  </tr>\n               </tbody>\n            </table>\n         </div>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king, seeing how much happier his subjects were, realized the\n            error of his ways and repealed the joke tax. Jokester was declared a\n            hero, and the kingdom lived happily ever after.\n         </p>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The moral of the story is: never underestimate the power of a good\n            laugh and always be careful of bad ideas.\n         </p>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-h1.json b/apps/web/public/v0/styles/default/typography-h1.json
new file mode 100644
index 00000000..bd85e102
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-h1.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-h1",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-h1.tsx",
+      "content": "export default function TypographyH1() {\n   return (\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n         Taxing Laughter: The Joke Tax Chronicles\n      </h1>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-h2.json b/apps/web/public/v0/styles/default/typography-h2.json
new file mode 100644
index 00000000..a75fd310
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-h2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-h2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-h2.tsx",
+      "content": "export default function TypographyH2() {\n   return (\n      <h2 className=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\">\n         The People of the Kingdom\n      </h2>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-h3.json b/apps/web/public/v0/styles/default/typography-h3.json
new file mode 100644
index 00000000..20b46497
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-h3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-h3",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-h3.tsx",
+      "content": "export default function TypographyH3() {\n   return (\n      <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n         The Joke Tax\n      </h3>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-h4.json b/apps/web/public/v0/styles/default/typography-h4.json
new file mode 100644
index 00000000..e302b44f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-h4.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-h4",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-h4.tsx",
+      "content": "export default function TypographyH4() {\n   return (\n      <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n         People stopped telling jokes\n      </h4>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-inline-code.json b/apps/web/public/v0/styles/default/typography-inline-code.json
new file mode 100644
index 00000000..4c603b53
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-inline-code.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-inline-code",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-inline-code.tsx",
+      "content": "export default function TypographyInlineCode() {\n   return (\n      <code className=\"bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n         @radix-ui/react-alert-dialog\n      </code>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-large.json b/apps/web/public/v0/styles/default/typography-large.json
new file mode 100644
index 00000000..0e98f954
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-large.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-large",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-large.tsx",
+      "content": "export default function TypographyLarge() {\n   return <div className=\"text-lg font-semibold\">Are you absolutely sure?</div>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-lead.json b/apps/web/public/v0/styles/default/typography-lead.json
new file mode 100644
index 00000000..0be38b38
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-lead.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-lead",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-lead.tsx",
+      "content": "export default function TypographyLead() {\n   return (\n      <p className=\"text-muted-foreground text-xl\">\n         A modal dialog that interrupts the user with important content and\n         expects a response.\n      </p>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-list.json b/apps/web/public/v0/styles/default/typography-list.json
new file mode 100644
index 00000000..f89a2027
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-list.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-list",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-list.tsx",
+      "content": "export default function TypographyList() {\n   return (\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n         <li>1st level of puns: 5 gold coins</li>\n         <li>2nd level of jokes: 10 gold coins</li>\n         <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-muted.json b/apps/web/public/v0/styles/default/typography-muted.json
new file mode 100644
index 00000000..4ecc1c20
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-muted.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-muted",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-muted.tsx",
+      "content": "export default function TypographyMuted() {\n   return (\n      <p className=\"text-muted-foreground text-sm\">Enter your email address.</p>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-p.json b/apps/web/public/v0/styles/default/typography-p.json
new file mode 100644
index 00000000..c880a19a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-p.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-p",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-p.tsx",
+      "content": "export default function TypographyP() {\n   return (\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n         The king, seeing how much happier his subjects were, realized the error\n         of his ways and repealed the joke tax.\n      </p>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-small.json b/apps/web/public/v0/styles/default/typography-small.json
new file mode 100644
index 00000000..69f5ceac
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-small.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-small",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-small.tsx",
+      "content": "export default function TypographySmall() {\n   return (\n      <small className=\"text-sm font-medium leading-none\">Email address</small>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/typography-table.json b/apps/web/public/v0/styles/default/typography-table.json
new file mode 100644
index 00000000..75ec428c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/typography-table.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-table",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-table.tsx",
+      "content": "export default function TypographyTable() {\n   return (\n      <div className=\"my-6 w-full overflow-y-auto\">\n         <table className=\"w-full\">\n            <thead>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     King's Treasury\n                  </th>\n                  <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     People's happiness\n                  </th>\n               </tr>\n            </thead>\n            <tbody>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Empty\n                  </td>\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Overflowing\n                  </td>\n               </tr>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Modest\n                  </td>\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Satisfied\n                  </td>\n               </tr>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Full\n                  </td>\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Ecstatic\n                  </td>\n               </tr>\n            </tbody>\n         </table>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/use-anchor-observer.json b/apps/web/public/v0/styles/default/use-anchor-observer.json
new file mode 100644
index 00000000..e563ef68
--- /dev/null
+++ b/apps/web/public/v0/styles/default/use-anchor-observer.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "use-anchor-observer",
+  "type": "registry:hook",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "hooks/use-anchor-observer.ts",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\n/**\n * Find the active heading of page\n *\n * It selects the top heading by default, and the last item when reached the bottom of page.\n *\n * @param watch - An array of element ids to watch\n * @param single - only one active item at most\n * @returns Active anchor\n */\nexport function useAnchorObserver(watch: string[], single: boolean): string[] {\n   const [activeAnchor, setActiveAnchor] = useState<string[]>([])\n\n   useEffect(() => {\n      let visible: string[] = []\n      const observer = new IntersectionObserver(\n         (entries) => {\n            for (const entry of entries) {\n               if (entry.isIntersecting && !visible.includes(entry.target.id)) {\n                  visible = [...visible, entry.target.id]\n               } else if (\n                  !entry.isIntersecting &&\n                  visible.includes(entry.target.id)\n               ) {\n                  visible = visible.filter((v) => v !== entry.target.id)\n               }\n            }\n\n            if (visible.length > 0) setActiveAnchor(visible)\n         },\n         {\n            rootMargin: single ? \"-80px 0% -70% 0%\" : `-20px 0% -40% 0%`,\n            threshold: 1,\n         },\n      )\n\n      function onScroll(): void {\n         const element = document.scrollingElement\n         if (!element) return\n\n         if (element.scrollTop === 0 && single) {\n            setActiveAnchor(watch.slice(0, 1))\n         } else if (\n            element.scrollTop + element.clientHeight >=\n            element.scrollHeight - 6\n         ) {\n            setActiveAnchor((active) => {\n               return active.length > 0 && !single\n                  ? watch.slice(watch.indexOf(active[0]))\n                  : watch.slice(-1)\n            })\n         }\n      }\n\n      for (const heading of watch) {\n         const element = document.getElementById(heading)\n\n         if (element) observer.observe(element)\n      }\n\n      onScroll()\n      window.addEventListener(\"scroll\", onScroll)\n      return () => {\n         window.removeEventListener(\"scroll\", onScroll)\n         observer.disconnect()\n      }\n   }, [single, watch])\n\n   return single ? activeAnchor.slice(0, 1) : activeAnchor\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/use-mobile.json b/apps/web/public/v0/styles/default/use-mobile.json
new file mode 100644
index 00000000..ed3b4aca
--- /dev/null
+++ b/apps/web/public/v0/styles/default/use-mobile.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "use-mobile",
+  "type": "registry:hook",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "hooks/use-mobile.tsx",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n      undefined,\n   )\n\n   React.useEffect(() => {\n      const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n      const onChange = () => {\n         setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n      }\n      mql.addEventListener(\"change\", onChange)\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n      return () => mql.removeEventListener(\"change\", onChange)\n   }, [])\n\n   return !!isMobile\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/use-on-change.json b/apps/web/public/v0/styles/default/use-on-change.json
new file mode 100644
index 00000000..92150176
--- /dev/null
+++ b/apps/web/public/v0/styles/default/use-on-change.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "use-on-change",
+  "type": "registry:hook",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "hooks/use-on-change.ts",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b)) {\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   }\n\n   return a !== b\n}\n\n/**\n * @param value - state to watch\n * @param onChange - when the state changed\n * @param isUpdated - a function that determines if the state is updated\n */\nexport function useOnChange<T>(\n   value: T,\n   onChange: (current: T, previous: T) => void,\n   isUpdated: (prev: T, current: T) => boolean = isDifferent,\n): void {\n   const [prev, setPrev] = useState<T>(value)\n\n   if (isUpdated(prev, value)) {\n      onChange(value, prev)\n      setPrev(value)\n   }\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/use-toast.json b/apps/web/public/v0/styles/default/use-toast.json
new file mode 100644
index 00000000..91f17d0b
--- /dev/null
+++ b/apps/web/public/v0/styles/default/use-toast.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "use-toast",
+  "type": "registry:hook",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "hooks/use-toast.ts",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type { ToastActionElement, ToastProps } from \"@/components/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n   id: string\n   title?: React.ReactNode\n   description?: React.ReactNode\n   action?: ToastActionElement\n}\n\nconst actionTypes = {\n   ADD_TOAST: \"ADD_TOAST\",\n   UPDATE_TOAST: \"UPDATE_TOAST\",\n   DISMISS_TOAST: \"DISMISS_TOAST\",\n   REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n   count = (count + 1) % Number.MAX_SAFE_INTEGER\n   return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n   | {\n        type: ActionType[\"ADD_TOAST\"]\n        toast: ToasterToast\n     }\n   | {\n        type: ActionType[\"UPDATE_TOAST\"]\n        toast: Partial<ToasterToast>\n     }\n   | {\n        type: ActionType[\"DISMISS_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n   | {\n        type: ActionType[\"REMOVE_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n\ninterface State {\n   toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n   if (toastTimeouts.has(toastId)) {\n      return\n   }\n\n   const timeout = setTimeout(() => {\n      toastTimeouts.delete(toastId)\n      dispatch({\n         type: \"REMOVE_TOAST\",\n         toastId,\n      })\n   }, TOAST_REMOVE_DELAY)\n\n   toastTimeouts.set(toastId, timeout)\n}\n\nexport function reducer(state: State, action: Action): State {\n   switch (action.type) {\n      case \"ADD_TOAST\":\n         return {\n            ...state,\n            toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n         }\n\n      case \"UPDATE_TOAST\":\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === action.toast.id ? { ...t, ...action.toast } : t,\n            ),\n         }\n\n      case \"DISMISS_TOAST\": {\n         const { toastId } = action\n\n         // ! Side effects ! - This could be extracted into a dismissToast() action,\n         // but I'll keep it here for simplicity\n         if (toastId) {\n            addToRemoveQueue(toastId)\n         } else {\n            state.toasts.forEach((toast) => {\n               addToRemoveQueue(toast.id)\n            })\n         }\n\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === toastId || toastId === undefined\n                  ? {\n                       ...t,\n                       open: false,\n                    }\n                  : t,\n            ),\n         }\n      }\n      case \"REMOVE_TOAST\":\n         if (action.toastId === undefined) {\n            return {\n               ...state,\n               toasts: [],\n            }\n         }\n         return {\n            ...state,\n            toasts: state.toasts.filter((t) => t.id !== action.toastId),\n         }\n   }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n   memoryState = reducer(memoryState, action)\n   listeners.forEach((listener) => {\n      listener(memoryState)\n   })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n   const id = genId()\n\n   const update = (props: ToasterToast) =>\n      dispatch({\n         type: \"UPDATE_TOAST\",\n         toast: { ...props, id },\n      })\n   const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n   dispatch({\n      type: \"ADD_TOAST\",\n      toast: {\n         ...props,\n         id,\n         open: true,\n         onOpenChange: (open) => {\n            if (!open) dismiss()\n         },\n      },\n   })\n\n   return {\n      id,\n      dismiss,\n      update,\n   }\n}\n\nfunction useToast() {\n   const [state, setState] = React.useState<State>(memoryState)\n\n   React.useEffect(() => {\n      listeners.push(setState)\n      return () => {\n         const index = listeners.indexOf(setState)\n         if (index > -1) {\n            listeners.splice(index, 1)\n         }\n      }\n   }, [state])\n\n   return {\n      ...state,\n      toast,\n      dismiss: (toastId?: string) =>\n         dispatch({ type: \"DISMISS_TOAST\", toastId }),\n   }\n}\n\nexport { useToast, toast }\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/utils.json b/apps/web/public/v0/styles/default/utils.json
new file mode 100644
index 00000000..b33a63de
--- /dev/null
+++ b/apps/web/public/v0/styles/default/utils.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "utils",
+  "type": "registry:lib",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n   return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-login-01.json b/apps/web/public/v0/styles/default/v0-login-01.json
new file mode 100644
index 00000000..14fbcab2
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-login-01.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-login-01",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "internal/login-01.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-screen w-full items-center justify-center px-4\">\n         <Card className=\"mx-auto max-w-sm\">\n            <CardHeader>\n               <CardTitle className=\"text-2xl\">Login</CardTitle>\n               <CardDescription>\n                  Enter your email below to login to your account\n               </CardDescription>\n            </CardHeader>\n            <CardContent>\n               <div className=\"grid gap-4\">\n                  <div className=\"grid gap-2\">\n                     <Label htmlFor=\"email\">Email</Label>\n                     <Input\n                        id=\"email\"\n                        type=\"email\"\n                        placeholder=\"m@example.com\"\n                        required\n                     />\n                  </div>\n                  <div className=\"grid gap-2\">\n                     <div className=\"flex items-center\">\n                        <Label htmlFor=\"password\">Password</Label>\n                        <Link\n                           href=\"#\"\n                           className=\"ml-auto inline-block text-sm underline\"\n                        >\n                           Forgot your password?\n                        </Link>\n                     </div>\n                     <Input id=\"password\" type=\"password\" required />\n                  </div>\n                  <Button type=\"submit\" className=\"w-full\">\n                     Login\n                  </Button>\n                  <Button variant=\"outline\" className=\"w-full\">\n                     Login with Google\n                  </Button>\n               </div>\n               <div className=\"mt-4 text-center text-sm\">\n                  Don&apos;t have an account?{\" \"}\n                  <Link href=\"#\" className=\"underline\">\n                     Sign up\n                  </Link>\n               </div>\n            </CardContent>\n         </Card>\n      </div>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-01.json b/apps/web/public/v0/styles/default/v0-sidebar-01.json
new file mode 100644
index 00000000..50602e3e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-01.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-01",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-01.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   const [selectedVersion, setSelectedVersion] = React.useState(\n      data.versions[0],\n   )\n\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                                 <GalleryVerticalEnd className=\"size-4\" />\n                              </div>\n                              <div className=\"flex flex-col gap-0.5 leading-none\">\n                                 <span className=\"font-semibold\">\n                                    Documentation\n                                 </span>\n                                 <span className=\"\">v{selectedVersion}</span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                           align=\"start\"\n                        >\n                           {data.versions.map((version) => (\n                              <DropdownMenuItem\n                                 key={version}\n                                 onSelect={() => setSelectedVersion(version)}\n                              >\n                                 v{version}{\" \"}\n                                 {version === selectedVersion && (\n                                    <Check className=\"ml-auto\" />\n                                 )}\n                              </DropdownMenuItem>\n                           ))}\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n               <form>\n                  <SidebarGroup className=\"py-0\">\n                     <SidebarGroupContent className=\"relative\">\n                        <Label htmlFor=\"search\" className=\"sr-only\">\n                           Search\n                        </Label>\n                        <SidebarInput\n                           id=\"search\"\n                           placeholder=\"Search the docs...\"\n                           className=\"pl-8\"\n                        />\n                        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               </form>\n            </SidebarHeader>\n            <SidebarContent>\n               {/* We create a SidebarGroup for each parent. */}\n               {data.navMain.map((item) => (\n                  <SidebarGroup key={item.title}>\n                     <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n                     <SidebarGroupContent>\n                        <SidebarMenu>\n                           {item.items.map((item) => (\n                              <SidebarMenuItem key={item.title}>\n                                 <SidebarMenuButton\n                                    asChild\n                                    isActive={item.isActive}\n                                 >\n                                    <a href={item.url}>{item.title}</a>\n                                 </SidebarMenuButton>\n                              </SidebarMenuItem>\n                           ))}\n                        </SidebarMenu>\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               ))}\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": "components/sidebar-01.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-02.json b/apps/web/public/v0/styles/default/v0-sidebar-02.json
new file mode 100644
index 00000000..a603c922
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-02.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-02",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-02.tsx",
+      "content": "\"use client\"\n\nimport {\n   Check,\n   ChevronRight,\n   ChevronsUpDown,\n   GalleryVerticalEnd,\n   Search,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   const [selectedVersion, setSelectedVersion] = React.useState(\n      data.versions[0],\n   )\n\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                                 <GalleryVerticalEnd className=\"size-4\" />\n                              </div>\n                              <div className=\"flex flex-col gap-0.5 leading-none\">\n                                 <span className=\"font-semibold\">\n                                    Documentation\n                                 </span>\n                                 <span className=\"\">v{selectedVersion}</span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                           align=\"start\"\n                        >\n                           {data.versions.map((version) => (\n                              <DropdownMenuItem\n                                 key={version}\n                                 onSelect={() => setSelectedVersion(version)}\n                              >\n                                 v{version}{\" \"}\n                                 {version === selectedVersion && (\n                                    <Check className=\"ml-auto\" />\n                                 )}\n                              </DropdownMenuItem>\n                           ))}\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n               <form>\n                  <SidebarGroup className=\"py-0\">\n                     <SidebarGroupContent className=\"relative\">\n                        <Label htmlFor=\"search\" className=\"sr-only\">\n                           Search\n                        </Label>\n                        <SidebarInput\n                           id=\"search\"\n                           placeholder=\"Search the docs...\"\n                           className=\"pl-8\"\n                        />\n                        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               </form>\n            </SidebarHeader>\n            <SidebarContent className=\"gap-0\">\n               {/* We create a collapsible SidebarGroup for each parent. */}\n               {data.navMain.map((item) => (\n                  <Collapsible\n                     key={item.title}\n                     title={item.title}\n                     defaultOpen\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroup>\n                        <SidebarGroupLabel\n                           asChild\n                           className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                        >\n                           <CollapsibleTrigger>\n                              {item.title}{\" \"}\n                              <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                           </CollapsibleTrigger>\n                        </SidebarGroupLabel>\n                        <CollapsibleContent>\n                           <SidebarGroupContent>\n                              <SidebarMenu>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuItem key={item.title}>\n                                       <SidebarMenuButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </CollapsibleContent>\n                     </SidebarGroup>\n                  </Collapsible>\n               ))}\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-03.json b/apps/web/public/v0/styles/default/v0-sidebar-03.json
new file mode 100644
index 00000000..83221c58
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-03.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-03",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-03.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n               <div className=\"flex items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-04.json b/apps/web/public/v0/styles/default/v0-sidebar-04.json
new file mode 100644
index 00000000..0338f141
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-04.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-04",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-04.tsx",
+      "content": "\"use client\"\n\nimport { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"19rem\",\n            } as React.CSSProperties\n         }\n      >\n         <Sidebar variant=\"floating\">\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu className=\"gap-2\">\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-05.json b/apps/web/public/v0/styles/default/v0-sidebar-05.json
new file mode 100644
index 00000000..e27f898c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-05.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-05",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-05.tsx",
+      "content": "import { GalleryVerticalEnd, Minus, Plus, Search } from \"lucide-react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n               <form>\n                  <SidebarGroup className=\"py-0\">\n                     <SidebarGroupContent className=\"relative\">\n                        <Label htmlFor=\"search\" className=\"sr-only\">\n                           Search\n                        </Label>\n                        <SidebarInput\n                           id=\"search\"\n                           placeholder=\"Search the docs...\"\n                           className=\"pl-8\"\n                        />\n                        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               </form>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu>\n                     {data.navMain.map((item, index) => (\n                        <Collapsible\n                           key={item.title}\n                           defaultOpen={index === 1}\n                           className=\"group/collapsible\"\n                        >\n                           <SidebarMenuItem>\n                              <CollapsibleTrigger asChild>\n                                 <SidebarMenuButton>\n                                    {item.title}{\" \"}\n                                    <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                                    <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                                 </SidebarMenuButton>\n                              </CollapsibleTrigger>\n                              {item.items?.length ? (\n                                 <CollapsibleContent>\n                                    <SidebarMenuSub>\n                                       {item.items.map((item) => (\n                                          <SidebarMenuSubItem key={item.title}>\n                                             <SidebarMenuSubButton\n                                                asChild\n                                                isActive={item.isActive}\n                                             >\n                                                <a href={item.url}>\n                                                   {item.title}\n                                                </a>\n                                             </SidebarMenuSubButton>\n                                          </SidebarMenuSubItem>\n                                       ))}\n                                    </SidebarMenuSub>\n                                 </CollapsibleContent>\n                              ) : null}\n                           </SidebarMenuItem>\n                        </Collapsible>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-06.json b/apps/web/public/v0/styles/default/v0-sidebar-06.json
new file mode 100644
index 00000000..ab7fea49
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-06.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-06",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-06.tsx",
+      "content": "\"use client\"\n\nimport { GalleryVerticalEnd, MoreHorizontal } from \"lucide-react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <DropdownMenu key={item.title}>\n                           <SidebarMenuItem>\n                              <DropdownMenuTrigger asChild>\n                                 <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                                    {item.title}{\" \"}\n                                    <MoreHorizontal className=\"ml-auto\" />\n                                 </SidebarMenuButton>\n                              </DropdownMenuTrigger>\n                              {item.items?.length ? (\n                                 <DropdownMenuContent\n                                    side=\"bottom\"\n                                    align=\"end\"\n                                    className=\"min-w-56 rounded-lg\"\n                                 >\n                                    {item.items.map((item) => (\n                                       <DropdownMenuItem\n                                          asChild\n                                          key={item.title}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </DropdownMenuItem>\n                                    ))}\n                                 </DropdownMenuContent>\n                              ) : null}\n                           </SidebarMenuItem>\n                        </DropdownMenu>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <div className=\"p-1\">\n                  <Card className=\"shadow-none\">\n                     <form>\n                        <CardHeader className=\"p-4 pb-0\">\n                           <CardTitle className=\"text-sm\">\n                              Subscribe to our newsletter\n                           </CardTitle>\n                           <CardDescription>\n                              Opt-in to receive updates and news about the\n                              sidebar.\n                           </CardDescription>\n                        </CardHeader>\n                        <CardContent className=\"grid gap-2.5 p-4\">\n                           <SidebarInput type=\"email\" placeholder=\"Email\" />\n                           <Button\n                              className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n                              size=\"sm\"\n                           >\n                              Subscribe\n                           </Button>\n                        </CardContent>\n                     </form>\n                  </Card>\n               </div>\n            </SidebarFooter>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-07.json b/apps/web/public/v0/styles/default/v0-sidebar-07.json
new file mode 100644
index 00000000..c7c97a66
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-07.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-07",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-07.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   BadgeCheck,\n   Bell,\n   BookOpen,\n   Bot,\n   ChevronRight,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   Folder,\n   Forward,\n   Frame,\n   GalleryVerticalEnd,\n   LogOut,\n   Map,\n   MoreHorizontal,\n   PieChart,\n   Plus,\n   Settings2,\n   Sparkles,\n   SquareTerminal,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: GalleryVerticalEnd,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport default function Page() {\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 asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                                 <activeTeam.logo className=\"size-4\" />\n                              </div>\n                              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                 <span className=\"truncate font-semibold\">\n                                    {activeTeam.name}\n                                 </span>\n                                 <span className=\"truncate text-xs\">\n                                    {activeTeam.plan}\n                                 </span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                           align=\"start\"\n                           side=\"bottom\"\n                           sideOffset={4}\n                        >\n                           <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                              Teams\n                           </DropdownMenuLabel>\n                           {data.teams.map((team, index) => (\n                              <DropdownMenuItem\n                                 key={team.name}\n                                 onClick={() => setActiveTeam(team)}\n                                 className=\"gap-2 p-2\"\n                              >\n                                 <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                                    <team.logo className=\"size-4 shrink-0\" />\n                                 </div>\n                                 {team.name}\n                                 <DropdownMenuShortcut>\n                                    ⌘{index + 1}\n                                 </DropdownMenuShortcut>\n                              </DropdownMenuItem>\n                           ))}\n                           <DropdownMenuSeparator />\n                           <DropdownMenuItem className=\"gap-2 p-2\">\n                              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                                 <Plus className=\"size-4\" />\n                              </div>\n                              <div className=\"font-medium text-muted-foreground\">\n                                 Add team\n                              </div>\n                           </DropdownMenuItem>\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                           asChild\n                           defaultOpen={item.isActive}\n                           className=\"group/collapsible\"\n                        >\n                           <SidebarMenuItem>\n                              <CollapsibleTrigger asChild>\n                                 <SidebarMenuButton tooltip={item.title}>\n                                    {item.icon && <item.icon />}\n                                    <span>{item.title}</span>\n                                    <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                                 </SidebarMenuButton>\n                              </CollapsibleTrigger>\n                              <CollapsibleContent>\n                                 <SidebarMenuSub>\n                                    {item.items?.map((subItem) => (\n                                       <SidebarMenuSubItem key={subItem.title}>\n                                          <SidebarMenuSubButton asChild>\n                                             <a href={subItem.url}>\n                                                <span>{subItem.title}</span>\n                                             </a>\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 asChild>\n                              <a href={item.url}>\n                                 <item.icon />\n                                 <span>{item.name}</span>\n                              </a>\n                           </SidebarMenuButton>\n                           <DropdownMenu>\n                              <DropdownMenuTrigger asChild>\n                                 <SidebarMenuAction showOnHover>\n                                    <MoreHorizontal />\n                                    <span className=\"sr-only\">More</span>\n                                 </SidebarMenuAction>\n                              </DropdownMenuTrigger>\n                              <DropdownMenuContent\n                                 className=\"w-48 rounded-lg\"\n                                 side=\"bottom\"\n                                 align=\"end\"\n                              >\n                                 <DropdownMenuItem>\n                                    <Folder className=\"text-muted-foreground\" />\n                                    <span>View Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuItem>\n                                    <Forward className=\"text-muted-foreground\" />\n                                    <span>Share Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuSeparator />\n                                 <DropdownMenuItem>\n                                    <Trash2 className=\"text-muted-foreground\" />\n                                    <span>Delete Project</span>\n                                 </DropdownMenuItem>\n                              </DropdownMenuContent>\n                           </DropdownMenu>\n                        </SidebarMenuItem>\n                     ))}\n                     <SidebarMenuItem>\n                        <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                           <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                           <span>More</span>\n                        </SidebarMenuButton>\n                     </SidebarMenuItem>\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <Avatar className=\"h-8 w-8 rounded-lg\">\n                                 <AvatarImage\n                                    src={data.user.avatar}\n                                    alt={data.user.name}\n                                 />\n                                 <AvatarFallback className=\"rounded-lg\">\n                                    CN\n                                 </AvatarFallback>\n                              </Avatar>\n                              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                 <span className=\"truncate font-semibold\">\n                                    {data.user.name}\n                                 </span>\n                                 <span className=\"truncate text-xs\">\n                                    {data.user.email}\n                                 </span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto size-4\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                           side=\"bottom\"\n                           align=\"end\"\n                           sideOffset={4}\n                        >\n                           <DropdownMenuLabel className=\"p-0 font-normal\">\n                              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                                 <Avatar className=\"h-8 w-8 rounded-lg\">\n                                    <AvatarImage\n                                       src={data.user.avatar}\n                                       alt={data.user.name}\n                                    />\n                                    <AvatarFallback className=\"rounded-lg\">\n                                       CN\n                                    </AvatarFallback>\n                                 </Avatar>\n                                 <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                    <span className=\"truncate font-semibold\">\n                                       {data.user.name}\n                                    </span>\n                                    <span className=\"truncate text-xs\">\n                                       {data.user.email}\n                                    </span>\n                                 </div>\n                              </div>\n                           </DropdownMenuLabel>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <Sparkles />\n                                 Upgrade to Pro\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <BadgeCheck />\n                                 Account\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <CreditCard />\n                                 Billing\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <Bell />\n                                 Notifications\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuItem>\n                              <LogOut />\n                              Log out\n                           </DropdownMenuItem>\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 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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-08.json b/apps/web/public/v0/styles/default/v0-sidebar-08.json
new file mode 100644
index 00000000..77d5431f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-08.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-08",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-08.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   BookOpen,\n   Bot,\n   ChevronRight,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   Folder,\n   Frame,\n   LifeBuoy,\n   LogOut,\n   Map,\n   MoreHorizontal,\n   PieChart,\n   Send,\n   Settings2,\n   Share,\n   Sparkles,\n   SquareTerminal,\n   Trash2,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: \"Support\",\n         url: \"#\",\n         icon: LifeBuoy,\n      },\n      {\n         title: \"Feedback\",\n         url: \"#\",\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: \"Design Engineering\",\n         url: \"#\",\n         icon: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <Sidebar variant=\"inset\">\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">\n                                 Acme Inc\n                              </span>\n                              <span className=\"truncate text-xs\">\n                                 Enterprise\n                              </span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\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                           asChild\n                           defaultOpen={item.isActive}\n                        >\n                           <SidebarMenuItem>\n                              <SidebarMenuButton asChild tooltip={item.title}>\n                                 <a href={item.url}>\n                                    <item.icon />\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              {item.items?.length ? (\n                                 <>\n                                    <CollapsibleTrigger asChild>\n                                       <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                          <ChevronRight />\n                                          <span className=\"sr-only\">\n                                             Toggle\n                                          </span>\n                                       </SidebarMenuAction>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent>\n                                       <SidebarMenuSub>\n                                          {item.items?.map((subItem) => (\n                                             <SidebarMenuSubItem\n                                                key={subItem.title}\n                                             >\n                                                <SidebarMenuSubButton asChild>\n                                                   <a href={subItem.url}>\n                                                      <span>\n                                                         {subItem.title}\n                                                      </span>\n                                                   </a>\n                                                </SidebarMenuSubButton>\n                                             </SidebarMenuSubItem>\n                                          ))}\n                                       </SidebarMenuSub>\n                                    </CollapsibleContent>\n                                 </>\n                              ) : null}\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 asChild>\n                              <a href={item.url}>\n                                 <item.icon />\n                                 <span>{item.name}</span>\n                              </a>\n                           </SidebarMenuButton>\n                           <DropdownMenu>\n                              <DropdownMenuTrigger asChild>\n                                 <SidebarMenuAction showOnHover>\n                                    <MoreHorizontal />\n                                    <span className=\"sr-only\">More</span>\n                                 </SidebarMenuAction>\n                              </DropdownMenuTrigger>\n                              <DropdownMenuContent\n                                 className=\"w-48\"\n                                 side=\"bottom\"\n                                 align=\"end\"\n                              >\n                                 <DropdownMenuItem>\n                                    <Folder className=\"text-muted-foreground\" />\n                                    <span>View Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuItem>\n                                    <Share className=\"text-muted-foreground\" />\n                                    <span>Share Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuSeparator />\n                                 <DropdownMenuItem>\n                                    <Trash2 className=\"text-muted-foreground\" />\n                                    <span>Delete Project</span>\n                                 </DropdownMenuItem>\n                              </DropdownMenuContent>\n                           </DropdownMenu>\n                        </SidebarMenuItem>\n                     ))}\n                     <SidebarMenuItem>\n                        <SidebarMenuButton>\n                           <MoreHorizontal />\n                           <span>More</span>\n                        </SidebarMenuButton>\n                     </SidebarMenuItem>\n                  </SidebarMenu>\n               </SidebarGroup>\n               <SidebarGroup className=\"mt-auto\">\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {data.navSecondary.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton asChild size=\"sm\">\n                                 <a href={item.url}>\n                                    <item.icon />\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <Avatar className=\"h-8 w-8 rounded-lg\">\n                                 <AvatarImage\n                                    src={data.user.avatar}\n                                    alt={data.user.name}\n                                 />\n                                 <AvatarFallback className=\"rounded-lg\">\n                                    CN\n                                 </AvatarFallback>\n                              </Avatar>\n                              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                 <span className=\"truncate font-semibold\">\n                                    {data.user.name}\n                                 </span>\n                                 <span className=\"truncate text-xs\">\n                                    {data.user.email}\n                                 </span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto size-4\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                           side=\"bottom\"\n                           align=\"end\"\n                           sideOffset={4}\n                        >\n                           <DropdownMenuLabel className=\"p-0 font-normal\">\n                              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                                 <Avatar className=\"h-8 w-8 rounded-lg\">\n                                    <AvatarImage\n                                       src={data.user.avatar}\n                                       alt={data.user.name}\n                                    />\n                                    <AvatarFallback className=\"rounded-lg\">\n                                       CN\n                                    </AvatarFallback>\n                                 </Avatar>\n                                 <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                    <span className=\"truncate font-semibold\">\n                                       {data.user.name}\n                                    </span>\n                                    <span className=\"truncate text-xs\">\n                                       {data.user.email}\n                                    </span>\n                                 </div>\n                              </div>\n                           </DropdownMenuLabel>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <Sparkles />\n                                 Upgrade to Pro\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <BadgeCheck />\n                                 Account\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <CreditCard />\n                                 Billing\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <Bell />\n                                 Notifications\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuItem>\n                              <LogOut />\n                              Log out\n                           </DropdownMenuItem>\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarFooter>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2\">\n               <div className=\"flex items-center gap-2 px-4\">\n                  <SidebarTrigger className=\"-ml-1\" />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-09.json b/apps/web/public/v0/styles/default/v0-sidebar-09.json
new file mode 100644
index 00000000..95742249
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-09.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-09",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-09.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArchiveX,\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   File,\n   Inbox,\n   LogOut,\n   Send,\n   Sparkles,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\nimport { Switch } from \"@/components/ui/switch\"\n\n// This is sample data\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         isActive: true,\n      },\n      {\n         title: \"Drafts\",\n         url: \"#\",\n         icon: File,\n         isActive: false,\n      },\n      {\n         title: \"Sent\",\n         url: \"#\",\n         icon: Send,\n         isActive: false,\n      },\n      {\n         title: \"Junk\",\n         url: \"#\",\n         icon: ArchiveX,\n         isActive: false,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n         isActive: false,\n      },\n   ],\n   mails: [\n      {\n         name: \"William Smith\",\n         email: \"williamsmith@example.com\",\n         subject: \"Meeting Tomorrow\",\n         date: \"09:34 AM\",\n         teaser:\n            \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n      },\n      {\n         name: \"Alice Smith\",\n         email: \"alicesmith@example.com\",\n         subject: \"Re: Project Update\",\n         date: \"Yesterday\",\n         teaser:\n            \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n      },\n      {\n         name: \"Bob Johnson\",\n         email: \"bobjohnson@example.com\",\n         subject: \"Weekend Plans\",\n         date: \"2 days ago\",\n         teaser:\n            \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n      },\n      {\n         name: \"Emily Davis\",\n         email: \"emilydavis@example.com\",\n         subject: \"Re: Question about Budget\",\n         date: \"2 days ago\",\n         teaser:\n            \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n      },\n      {\n         name: \"Michael Wilson\",\n         email: \"michaelwilson@example.com\",\n         subject: \"Important Announcement\",\n         date: \"1 week ago\",\n         teaser:\n            \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n      },\n      {\n         name: \"Sarah Brown\",\n         email: \"sarahbrown@example.com\",\n         subject: \"Re: Feedback on Proposal\",\n         date: \"1 week ago\",\n         teaser:\n            \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n      },\n      {\n         name: \"David Lee\",\n         email: \"davidlee@example.com\",\n         subject: \"New Project Idea\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n      },\n      {\n         name: \"Olivia Wilson\",\n         email: \"oliviawilson@example.com\",\n         subject: \"Vacation Plans\",\n         date: \"1 week ago\",\n         teaser:\n            \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n      },\n      {\n         name: \"James Martin\",\n         email: \"jamesmartin@example.com\",\n         subject: \"Re: Conference Registration\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n      },\n      {\n         name: \"Sophia White\",\n         email: \"sophiawhite@example.com\",\n         subject: \"Team Dinner\",\n         date: \"1 week ago\",\n         teaser:\n            \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"350px\",\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Inbox</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   // Note: I'm using state to show active item.\n   // IRL you should use the url/router.\n   const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n   const [mails, setMails] = React.useState(data.mails)\n   const { setOpen } = useSidebar()\n\n   return (\n      <Sidebar\n         collapsible=\"icon\"\n         className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n         {...props}\n      >\n         {/* This is the first sidebar */}\n         {/* We disable collapsible and adjust width to icon. */}\n         {/* This will make the sidebar appear as icons. */}\n         <Sidebar\n            collapsible=\"none\"\n            className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n         >\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton\n                        size=\"lg\"\n                        asChild\n                        className=\"md:h-8 md:p-0\"\n                     >\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">\n                                 Acme Inc\n                              </span>\n                              <span className=\"truncate text-xs\">\n                                 Enterprise\n                              </span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent className=\"px-1.5 md:px-0\">\n                     <SidebarMenu>\n                        {data.navMain.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 tooltip={{\n                                    children: item.title,\n                                    hidden: false,\n                                 }}\n                                 onClick={() => {\n                                    setActiveItem(item)\n                                    const mail = data.mails.sort(\n                                       () => Math.random() - 0.5,\n                                    )\n                                    setMails(\n                                       mail.slice(\n                                          0,\n                                          Math.max(\n                                             5,\n                                             Math.floor(Math.random() * 10) + 1,\n                                          ),\n                                       ),\n                                    )\n                                    setOpen(true)\n                                 }}\n                                 isActive={activeItem.title === item.title}\n                                 className=\"px-2.5 md:px-2\"\n                              >\n                                 <item.icon />\n                                 <span>{item.title}</span>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <NavUser user={data.user} />\n            </SidebarFooter>\n         </Sidebar>\n\n         {/* This is the second sidebar */}\n         {/* We disable collapsible and let it fill remaining space */}\n         <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n            <SidebarHeader className=\"gap-3.5 border-b p-4\">\n               <div className=\"flex w-full items-center justify-between\">\n                  <div className=\"text-base font-medium text-foreground\">\n                     {activeItem.title}\n                  </div>\n                  <Label className=\"flex items-center gap-2 text-sm\">\n                     <span>Unreads</span>\n                     <Switch className=\"shadow-none\" />\n                  </Label>\n               </div>\n               <SidebarInput placeholder=\"Type to search...\" />\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup className=\"px-0\">\n                  <SidebarGroupContent>\n                     {mails.map((mail) => (\n                        <a\n                           href=\"#\"\n                           key={mail.email}\n                           className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                        >\n                           <div className=\"flex w-full items-center gap-2\">\n                              <span>{mail.name}</span>{\" \"}\n                              <span className=\"ml-auto text-xs\">\n                                 {mail.date}\n                              </span>\n                           </div>\n                           <span className=\"font-medium\">{mail.subject}</span>\n                           <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                              {mail.teaser}\n                           </span>\n                        </a>\n                     ))}\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </Sidebar>\n   )\n}\n\nfunction NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-10.json b/apps/web/public/v0/styles/default/v0-sidebar-10.json
new file mode 100644
index 00000000..eff17477
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-10.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-10",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-10.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowDown,\n   ArrowUp,\n   ArrowUpRight,\n   AudioWaveform,\n   Bell,\n   Blocks,\n   Calendar,\n   ChevronDown,\n   ChevronRight,\n   Command,\n   Copy,\n   CornerUpLeft,\n   CornerUpRight,\n   FileText,\n   GalleryVerticalEnd,\n   Home,\n   Inbox,\n   LineChart,\n   Link,\n   type LucideIcon,\n   MessageCircleQuestion,\n   MoreHorizontal,\n   Plus,\n   Search,\n   Settings2,\n   Sparkles,\n   Star,\n   StarOff,\n   Trash,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: Calendar,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n   actions: [\n      [\n         {\n            label: \"Customize Page\",\n            icon: Settings2,\n         },\n         {\n            label: \"Turn into wiki\",\n            icon: FileText,\n         },\n      ],\n      [\n         {\n            label: \"Copy Link\",\n            icon: Link,\n         },\n         {\n            label: \"Duplicate\",\n            icon: Copy,\n         },\n         {\n            label: \"Move to\",\n            icon: CornerUpRight,\n         },\n         {\n            label: \"Move to Trash\",\n            icon: Trash2,\n         },\n      ],\n      [\n         {\n            label: \"Undo\",\n            icon: CornerUpLeft,\n         },\n         {\n            label: \"View analytics\",\n            icon: LineChart,\n         },\n         {\n            label: \"Version History\",\n            icon: GalleryVerticalEnd,\n         },\n         {\n            label: \"Show delete pages\",\n            icon: Trash,\n         },\n         {\n            label: \"Notifications\",\n            icon: Bell,\n         },\n      ],\n      [\n         {\n            label: \"Import\",\n            icon: ArrowUp,\n         },\n         {\n            label: \"Export\",\n            icon: ArrowDown,\n         },\n      ],\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-14 shrink-0 items-center gap-2\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n               <div className=\"ml-auto px-3\">\n                  <NavActions actions={data.actions} />\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction NavActions({\n   actions,\n}: {\n   actions: {\n      label: string\n      icon: LucideIcon\n   }[][]\n}) {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      setIsOpen(true)\n   }, [])\n\n   return (\n      <div className=\"flex items-center gap-2 text-sm\">\n         <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n            Edit Oct 08\n         </div>\n         <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n            <Star />\n         </Button>\n         <Popover open={isOpen} onOpenChange={setIsOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-7 w-7 data-[state=open]:bg-accent\"\n               >\n                  <MoreHorizontal />\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent\n               className=\"w-56 overflow-hidden rounded-lg p-0\"\n               align=\"end\"\n            >\n               <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n                  <SidebarContent>\n                     {actions.map((group, index) => (\n                        <SidebarGroup\n                           key={index}\n                           className=\"border-b last:border-none\"\n                        >\n                           <SidebarGroupContent className=\"gap-0\">\n                              <SidebarMenu>\n                                 {group.map((item, index) => (\n                                    <SidebarMenuItem key={index}>\n                                       <SidebarMenuButton>\n                                          <item.icon />{\" \"}\n                                          <span>{item.label}</span>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </SidebarGroup>\n                     ))}\n                  </SidebarContent>\n               </Sidebar>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n\nfunction NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n\nfunction NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n\nfunction NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-11.json b/apps/web/public/v0/styles/default/v0-sidebar-11.json
new file mode 100644
index 00000000..67e26a07
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-11.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-11",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-11.tsx",
+      "content": "import { ChevronRight, File, Folder } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   changes: [\n      {\n         file: \"README.md\",\n         state: \"M\",\n      },\n      {\n         file: \"api/hello/route.ts\",\n         state: \"U\",\n      },\n      {\n         file: \"app/layout.tsx\",\n         state: \"M\",\n      },\n   ],\n   tree: [\n      [\n         \"app\",\n         [\n            \"api\",\n            [\"hello\", [\"route.ts\"]],\n            \"page.tsx\",\n            \"layout.tsx\",\n            [\"blog\", [\"page.tsx\"]],\n         ],\n      ],\n      [\n         \"components\",\n         [\"ui\", \"button.tsx\", \"card.tsx\"],\n         \"header.tsx\",\n         \"footer.tsx\",\n      ],\n      [\"lib\", [\"util.ts\"]],\n      [\"public\", \"favicon.ico\", \"vercel.svg\"],\n      \".eslintrc.json\",\n      \".gitignore\",\n      \"next.config.js\",\n      \"tailwind.config.js\",\n      \"package.json\",\n      \"README.md\",\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>button.tsx</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Changes</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.changes.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                           <SidebarMenuButton>\n                              <File />\n                              {item.file}\n                           </SidebarMenuButton>\n                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n            <SidebarGroup>\n               <SidebarGroupLabel>Files</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.tree.map((item, index) => (\n                        <Tree key={index} item={item} />\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n   const [name, ...items] = Array.isArray(item) ? item : [item]\n\n   if (!items.length) {\n      return (\n         <SidebarMenuButton\n            isActive={name === \"button.tsx\"}\n            className=\"data-[active=true]:bg-transparent\"\n         >\n            <File />\n            {name}\n         </SidebarMenuButton>\n      )\n   }\n\n   return (\n      <SidebarMenuItem>\n         <Collapsible\n            className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n            defaultOpen={name === \"components\" || name === \"ui\"}\n         >\n            <CollapsibleTrigger asChild>\n               <SidebarMenuButton>\n                  <ChevronRight className=\"transition-transform\" />\n                  <Folder />\n                  {name}\n               </SidebarMenuButton>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n               <SidebarMenuSub>\n                  {items.map((subItem, index) => (\n                     <Tree key={index} item={subItem} />\n                  ))}\n               </SidebarMenuSub>\n            </CollapsibleContent>\n         </Collapsible>\n      </SidebarMenuItem>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-12.json b/apps/web/public/v0/styles/default/v0-sidebar-12.json
new file mode 100644
index 00000000..43653d1f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-12.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-12",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-12.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   Check,\n   ChevronRight,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Plus,\n   Sparkles,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>October 2024</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n                  {Array.from({ length: 20 }).map((_, i) => (\n                     <div\n                        key={i}\n                        className=\"aspect-square rounded-xl bg-muted/50\"\n                     />\n                  ))}\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n\nfunction DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-13.json b/apps/web/public/v0/styles/default/v0-sidebar-13.json
new file mode 100644
index 00000000..1908925c
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-13.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-13",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-13.tsx",
+      "content": "\"use client\"\n\nimport {\n   Bell,\n   Check,\n   Globe,\n   Home,\n   Keyboard,\n   Link,\n   Lock,\n   Menu,\n   MessageCircle,\n   Paintbrush,\n   Settings,\n   Video,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogTitle,\n   DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\nconst data = {\n   nav: [\n      { name: \"Notifications\", icon: Bell },\n      { name: \"Navigation\", icon: Menu },\n      { name: \"Home\", icon: Home },\n      { name: \"Appearance\", icon: Paintbrush },\n      { name: \"Messages & media\", icon: MessageCircle },\n      { name: \"Language & region\", icon: Globe },\n      { name: \"Accessibility\", icon: Keyboard },\n      { name: \"Mark as read\", icon: Check },\n      { name: \"Audio & video\", icon: Video },\n      { name: \"Connected accounts\", icon: Link },\n      { name: \"Privacy & visibility\", icon: Lock },\n      { name: \"Advanced\", icon: Settings },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-svh items-center justify-center\">\n         <SettingsDialog />\n      </div>\n   )\n}\n\nfunction SettingsDialog() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <Dialog open={open} onOpenChange={setOpen}>\n         <DialogTrigger asChild>\n            <Button size=\"sm\">Open Dialog</Button>\n         </DialogTrigger>\n         <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n            <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n            <DialogDescription className=\"sr-only\">\n               Customize your settings here.\n            </DialogDescription>\n            <SidebarProvider className=\"items-start\">\n               <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n                  <SidebarContent>\n                     <SidebarGroup>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {data.nav.map((item) => (\n                                 <SidebarMenuItem key={item.name}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={\n                                          item.name === \"Messages & media\"\n                                       }\n                                    >\n                                       <a href=\"#\">\n                                          <item.icon />\n                                          <span>{item.name}</span>\n                                       </a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </SidebarGroup>\n                  </SidebarContent>\n               </Sidebar>\n               <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n                  <header className=\"flex h-16 shrink-0 items-center gap-2 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                        <Breadcrumb>\n                           <BreadcrumbList>\n                              <BreadcrumbItem className=\"hidden md:block\">\n                                 <BreadcrumbLink href=\"#\">\n                                    Settings\n                                 </BreadcrumbLink>\n                              </BreadcrumbItem>\n                              <BreadcrumbSeparator className=\"hidden md:block\" />\n                              <BreadcrumbItem>\n                                 <BreadcrumbPage>\n                                    Messages & media\n                                 </BreadcrumbPage>\n                              </BreadcrumbItem>\n                           </BreadcrumbList>\n                        </Breadcrumb>\n                     </div>\n                  </header>\n                  <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n                     {Array.from({ length: 10 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                        />\n                     ))}\n                  </div>\n               </main>\n            </SidebarProvider>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-14.json b/apps/web/public/v0/styles/default/v0-sidebar-14.json
new file mode 100644
index 00000000..0eeb51f4
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-14.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-14",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-14.tsx",
+      "content": "import type * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n               <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n         <AppSidebar side=\"right\" />\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/v0-sidebar-15.json b/apps/web/public/v0/styles/default/v0-sidebar-15.json
new file mode 100644
index 00000000..c14933d6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/v0-sidebar-15.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-15",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-15.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowUpRight,\n   AudioWaveform,\n   BadgeCheck,\n   Bell,\n   Blocks,\n   CalendarIcon,\n   Check,\n   ChevronDown,\n   ChevronRight,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   Home,\n   Inbox,\n   Link,\n   LogOut,\n   type LucideIcon,\n   MessageCircleQuestion,\n   MoreHorizontal,\n   Plus,\n   Search,\n   Settings2,\n   Sparkles,\n   StarOff,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst sidebarLeftData = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: CalendarIcon,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n}\n\n// This is sample data.\nconst sidebarRightData = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarLeft />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n         <SidebarRight />\n      </SidebarProvider>\n   )\n}\n\nfunction SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={sidebarLeftData.teams} />\n            <NavMain items={sidebarLeftData.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={sidebarLeftData.favorites} />\n            <NavWorkspaces workspaces={sidebarLeftData.workspaces} />\n            <NavSecondary\n               items={sidebarLeftData.navSecondary}\n               className=\"mt-auto\"\n            />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         collapsible=\"none\"\n         className=\"sticky hidden lg:flex top-0 h-svh border-l\"\n         {...props}\n      >\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={sidebarRightData.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={sidebarRightData.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n\nfunction Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n\nfunction DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n\nfunction NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n\nfunction NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n\nfunction NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/video-modal-demo.json b/apps/web/public/v0/styles/default/video-modal-demo.json
new file mode 100644
index 00000000..7bed2d25
--- /dev/null
+++ b/apps/web/public/v0/styles/default/video-modal-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "video-modal-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/video-modal-demo.tsx",
+      "content": "import { PlayCircle } from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   VideoModal,\n   VideoModalContent,\n   VideoModalDescription,\n   VideoModalTitle,\n   VideoModalTrigger,\n   VideoModalVideo,\n   VideoPlayButton,\n   VideoPlayer,\n   VideoPreview,\n} from \"@/components/ui/video-modal\"\n\nfunction VideoModalDemo() {\n   return (\n      <div className=\"relative justify-center\">\n         <VideoModal>\n            <VideoModalTrigger>\n               <Button>Open modal</Button>\n            </VideoModalTrigger>\n            <VideoModalContent>\n               <VideoModalTitle>Modal Video Demo</VideoModalTitle>\n               <VideoModalDescription>\n                  Your subtitle or description here\n               </VideoModalDescription>\n               <VideoModalVideo>\n                  <VideoPlayer>\n                     <VideoPreview>\n                        <img\n                           src=\"https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200\"\n                           alt=\"Video preview\"\n                        />\n                     </VideoPreview>\n                     <VideoPlayButton>\n                        <button className=\"absolute inset-0 m-auto flex size-32 items-center justify-center rounded-full border border-white border-white/10 bg-white/50 transition duration-300 hover:bg-white/75\">\n                           <PlayCircle className=\"size-20 stroke-1 text-white\" />\n                        </button>\n                     </VideoPlayButton>\n                     <iframe\n                        className=\"size-full\"\n                        src=\"https://cdn.magicui.design/globe.mp4\"\n                        allow=\"accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;\"\n                        allowFullScreen\n                     />\n                  </VideoPlayer>\n               </VideoModalVideo>\n            </VideoModalContent>\n         </VideoModal>\n      </div>\n   )\n}\n\nexport default VideoModalDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/video-modal.json b/apps/web/public/v0/styles/default/video-modal.json
new file mode 100644
index 00000000..052fdc0a
--- /dev/null
+++ b/apps/web/public/v0/styles/default/video-modal.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "video-modal",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/video-modal.tsx",
+      "content": "\"use client\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nconst VideoModal = DialogPrimitive.Root\n\nconst VideoModalTrigger = DialogPrimitive.Trigger\n\nconst VideoModalPortal = DialogPrimitive.Portal\n\nconst VideoModalClose = DialogPrimitive.Close\n\nconst VideoModalOverlay = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Overlay\n      ref={ref}\n      className={cn(\n         \"data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in fixed inset-0 z-50 backdrop-blur-xl\",\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst VideoModalContent = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <VideoModalPortal>\n      <VideoModalOverlay />\n      <DialogPrimitive.Content\n         ref={ref}\n         className={cn(\n            \"fixed left-1/2 top-1/2 z-50 flex h-screen w-screen -translate-x-1/2 -translate-y-1/2 items-center justify-center p-3\",\n            \"data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] transition-all\",\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"relative mx-auto flex size-full items-center justify-center rounded-2xl border border-gray-950/[.1] bg-gray-50/[.2] dark:border-gray-50/[.1] dark:bg-gray-950/[.5]\">\n            {/* Mobile close button */}\n            <CloseIcon isMobile />\n\n            <div className=\"flex h-4/5 w-full max-w-5xl gap-6\">\n               {/* Desktop close button */}\n               <CloseIcon />\n               <div className=\"flex w-full flex-col max-lg:p-4 max-lg:text-center\">\n                  {children}\n               </div>\n            </div>\n         </div>\n      </DialogPrimitive.Content>\n   </VideoModalPortal>\n))\n\nVideoModalContent.displayName = DialogPrimitive.Content.displayName\n\nconst VideoModalTitle = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Title\n      ref={ref}\n      className={cn(\n         \"mb-4 text-4xl font-bold text-gray-950 dark:text-gray-50\",\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalTitle.displayName = DialogPrimitive.Title.displayName\n\nconst VideoModalDescription = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Description\n      ref={ref}\n      className={cn(\n         \"mb-6 text-xl text-gray-950/80 dark:text-gray-50/70\",\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalDescription.displayName = DialogPrimitive.Description.displayName\n\nconst VideoPreview = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\n         \"absolute inset-0 z-10 transition-opacity duration-500 group-[.playing]:pointer-events-none group-[.playing]:opacity-0\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoPreview.displayName = \"VideoPreview\"\n\nconst VideoPlayButton = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\n         \"absolute inset-0 z-20 flex items-center justify-center transition-opacity duration-300 group-[.playing]:pointer-events-none group-[.playing]:opacity-0\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoPlayButton.displayName = \"VideoPlayButton\"\n\nconst VideoPlayer = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n   const [isPlaying, setIsPlaying] = React.useState(false)\n\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"group relative aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover dark:border-gray-50/[.1]\",\n            isPlaying && \"playing\",\n            className,\n         )}\n         onClick={() => setIsPlaying(true)}\n         {...props}\n      >\n         {children}\n      </div>\n   )\n})\nVideoPlayer.displayName = \"VideoPlayer\"\n\nconst VideoModalVideo = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\n         \"aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover shadow-xl dark:border-gray-50/[.1]\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoModalVideo.displayName = \"VideoModalVideo\"\n\nconst CloseIcon = React.forwardRef<\n   React.ElementRef<typeof VideoModalClose>,\n   React.ComponentPropsWithoutRef<typeof VideoModalClose> & {\n      isMobile?: boolean\n   }\n>(({ className, isMobile = false, ...props }, ref) => (\n   <VideoModalClose\n      ref={ref}\n      className={cn(\n         \"rounded-full border border-gray-950/[.1] bg-gray-950/[.01] p-2 transition duration-300 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n         isMobile\n            ? \"absolute right-4 top-4 lg:hidden\"\n            : \"hidden self-start lg:block\",\n         className,\n      )}\n      {...props}\n   >\n      <svg\n         fill=\"none\"\n         height=\"12\"\n         viewBox=\"0 0 12 12\"\n         width=\"12\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M1 1L11 11M11 1L1 11\"\n            className=\"stroke-current\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.5\"\n         ></path>\n      </svg>\n      <span className=\"sr-only\">Close</span>\n   </VideoModalClose>\n))\n\nCloseIcon.displayName = \"CloseIcon\"\n\nexport {\n   VideoModal,\n   VideoModalTrigger,\n   VideoModalContent,\n   VideoModalTitle,\n   VideoModalDescription,\n   VideoModalVideo,\n   VideoPreview,\n   VideoPlayButton,\n   VideoPlayer,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "modal-fade-in": "modal-fade-in 500ms ease-out",
+            "modal-fade-out": "modal-fade-out 500ms ease-in"
+          },
+          "keyframes": {
+            "modal-fade-in": {
+              "0%": {
+                "opacity": "0"
+              },
+              "100%": {
+                "opacity": "1"
+              }
+            },
+            "modal-fade-out": {
+              "0%": {
+                "opacity": "1"
+              },
+              "100%": {
+                "opacity": "0"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/warp-background-demo.json b/apps/web/public/v0/styles/default/warp-background-demo.json
new file mode 100644
index 00000000..091224c8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/warp-background-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "warp-background-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/warp-background-demo.tsx",
+      "content": "import {\n   Card,\n   CardContent,\n   CardDescription,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { WarpBackground } from \"@/components/ui/warp-background\"\n\nexport default function ExampleComponentDemo() {\n   return (\n      <WarpBackground>\n         <Card className=\"w-80\">\n            <CardContent className=\"flex flex-col gap-2 p-4\">\n               <CardTitle>Congratulations on Your Promotion!</CardTitle>\n               <CardDescription>\n                  Your hard work and dedication have paid off. We&apos;re\n                  thrilled to see you take this next step in your career. Keep\n                  up the fantastic work!\n               </CardDescription>\n            </CardContent>\n         </Card>\n      </WarpBackground>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/warp-background.json b/apps/web/public/v0/styles/default/warp-background.json
new file mode 100644
index 00000000..abc8cac5
--- /dev/null
+++ b/apps/web/public/v0/styles/default/warp-background.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "warp-background",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/warp-background.tsx",
+      "content": "import { motion } from \"motion/react\"\nimport type React from \"react\"\nimport { type HTMLAttributes, useCallback, useMemo } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface WarpBackgroundProps extends HTMLAttributes<HTMLDivElement> {\n   children: React.ReactNode\n   perspective?: number\n   beamsPerSide?: number\n   beamSize?: number\n   beamDelayMax?: number\n   beamDelayMin?: number\n   beamDuration?: number\n   gridColor?: string\n}\n\nconst Beam = ({\n   width,\n   x,\n   delay,\n   duration,\n}: {\n   width: string | number\n   x: string | number\n   delay: number\n   duration: number\n}) => {\n   const hue = Math.floor(Math.random() * 360)\n   const ar = Math.floor(Math.random() * 10) + 1\n\n   return (\n      <motion.div\n         style={\n            {\n               \"--x\": `${x}`,\n               \"--width\": `${width}`,\n               \"--aspect-ratio\": `${ar}`,\n               \"--background\": `linear-gradient(hsl(${hue} 80% 60%), transparent)`,\n            } as React.CSSProperties\n         }\n         className={`absolute left-[var(--x)] top-0 [aspect-ratio:1/var(--aspect-ratio)] [background:var(--background)] [width:var(--width)]`}\n         initial={{ y: \"100cqmax\", x: \"-50%\" }}\n         animate={{ y: \"-100%\", x: \"-50%\" }}\n         transition={{\n            duration,\n            delay,\n            repeat: Number.POSITIVE_INFINITY,\n            ease: \"linear\",\n         }}\n      />\n   )\n}\n\nexport const WarpBackground: React.FC<WarpBackgroundProps> = ({\n   children,\n   perspective = 100,\n   className,\n   beamsPerSide = 3,\n   beamSize = 5,\n   beamDelayMax = 3,\n   beamDelayMin = 0,\n   beamDuration = 3,\n   gridColor = \"hsl(var(--border))\",\n   ...props\n}) => {\n   const generateBeams = useCallback(() => {\n      const beams = []\n      const cellsPerSide = Math.floor(100 / beamSize)\n      const step = cellsPerSide / beamsPerSide\n\n      for (let i = 0; i < beamsPerSide; i++) {\n         const x = Math.floor(i * step)\n         const delay =\n            Math.random() * (beamDelayMax - beamDelayMin) + beamDelayMin\n         beams.push({ x, delay })\n      }\n      return beams\n   }, [beamsPerSide, beamSize, beamDelayMax, beamDelayMin])\n\n   const topBeams = useMemo(() => generateBeams(), [generateBeams])\n   const rightBeams = useMemo(() => generateBeams(), [generateBeams])\n   const bottomBeams = useMemo(() => generateBeams(), [generateBeams])\n   const leftBeams = useMemo(() => generateBeams(), [generateBeams])\n\n   return (\n      <div className={cn(\"relative rounded border p-20\", className)} {...props}>\n         <div\n            style={\n               {\n                  \"--perspective\": `${perspective}px`,\n                  \"--grid-color\": gridColor,\n                  \"--beam-size\": `${beamSize}%`,\n               } as React.CSSProperties\n            }\n            className={\n               \"pointer-events-none absolute left-0 top-0 size-full overflow-hidden [clip-path:inset(0)] [container-type:size] [perspective:var(--perspective)] [transform-style:preserve-3d]\"\n            }\n         >\n            {/* top side */}\n            <div className=\"absolute [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]\">\n               {topBeams.map((beam, index) => (\n                  <Beam\n                     key={`top-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n            {/* bottom side */}\n            <div className=\"absolute top-full [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]\">\n               {bottomBeams.map((beam, index) => (\n                  <Beam\n                     key={`bottom-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n            {/* left side */}\n            <div className=\"absolute left-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:0%_0%] [transform:rotate(90deg)_rotateX(-90deg)] [width:100cqh]\">\n               {leftBeams.map((beam, index) => (\n                  <Beam\n                     key={`left-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n            {/* right side */}\n            <div className=\"absolute right-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [width:100cqh] [transform-origin:100%_0%] [transform:rotate(-90deg)_rotateX(-90deg)]\">\n               {rightBeams.map((beam, index) => (\n                  <Beam\n                     key={`right-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n         </div>\n         <div className=\"relative\">{children}</div>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/wavy-dot-pattern-demo.json b/apps/web/public/v0/styles/default/wavy-dot-pattern-demo.json
new file mode 100644
index 00000000..719ac89e
--- /dev/null
+++ b/apps/web/public/v0/styles/default/wavy-dot-pattern-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "wavy-dot-pattern-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/wavy-dot-pattern-demo.tsx",
+      "content": "import WavyDotPattern from \"@/components/ui/wavy-dot-pattern\"\n\nexport default function WavyDotPatternDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl \">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-4xl font-semibold tracking-tighter text-black dark:text-white\">\n            Wavy Dot Pattern\n         </p>\n\n         <WavyDotPattern\n            gridWidth={30}\n            gridHeight={15}\n            dotWidth={8}\n            dotHeight={8}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/wavy-dot-pattern.json b/apps/web/public/v0/styles/default/wavy-dot-pattern.json
new file mode 100644
index 00000000..ae7058d8
--- /dev/null
+++ b/apps/web/public/v0/styles/default/wavy-dot-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "wavy-dot-pattern",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "react-anime"
+  ],
+  "files": [
+    {
+      "path": "ui/wavy-dot-pattern.tsx",
+      "content": "\"use client\"\nimport { useState } from \"react\"\nimport { anime } from \"react-anime\"\nimport { cn } from \"@/lib/utils\"\n\ninterface WavyDotPatternProps {\n   className?: string\n   gridWidth?: number\n   gridHeight?: number\n   dotWidth?: number\n   dotHeight?: number\n}\n\nexport function WavyDotPattern({\n   className,\n   gridWidth,\n   gridHeight,\n   dotWidth,\n   dotHeight,\n}: WavyDotPatternProps) {\n   const [dotClickDisabled, setDotClickDisabled] = useState<boolean>(false)\n\n   const handleDotClick = (e: any, width: number, height: number) => {\n      setDotClickDisabled(true)\n\n      anime({\n         targets: \".dot-point\",\n         scale: [\n            { value: 1.35, easing: \"easeOutSine\", duration: 250 },\n            { value: 1, easing: \"easeInOutQuad\", duration: 500 },\n         ],\n         translateY: [\n            { value: -15, easing: \"easeOutSine\", duration: 250 },\n            { value: 1, easing: \"easeInOutQuad\", duration: 500 },\n         ],\n         opacity: [\n            { value: 0.7, easing: \"easeOutSine\", duration: 250 },\n            { value: 0.35, easing: \"easeInOutQuad\", duration: 500 },\n         ],\n         delay: anime.stagger(100, {\n            grid: [width, height],\n            from: e.target.dataset.index,\n         }),\n      })\n\n      setTimeout(() => setDotClickDisabled(false), 2000)\n   }\n\n   const GRID_WIDTH = gridWidth || 30\n   const GRID_HEIGHT = gridHeight || 30\n\n   const DOT_WIDTH = dotWidth ? `w-[${dotWidth}px]` : \"w-[8px]\"\n   const DOT_HEIGHT = dotHeight ? `h-[${dotHeight}px]` : \"h-[8px]\"\n\n   let index = 0\n\n   const dots = []\n\n   for (let i = 0; i < GRID_WIDTH; i++) {\n      for (let j = 0; j < GRID_HEIGHT; j++) {\n         dots.push(\n            <button\n               className=\"rounded-[8px] p-[0.8rem]\"\n               type=\"button\"\n               onClick={(e) => handleDotClick(e, GRID_WIDTH, GRID_HEIGHT)}\n               data-index={index}\n               key={`${i}-${j}`}\n               disabled={dotClickDisabled}\n            >\n               <div\n                  className={cn(\n                     \"dot-point\",\n                     \"rounded-xl bg-gradient-to-r from-[#d9cab3] to-black opacity-35 hover:from-black hover:to-black hover:opacity-100\",\n                     DOT_WIDTH,\n                     DOT_HEIGHT,\n                  )}\n                  data-index={index}\n               />\n            </button>,\n         )\n         index++\n      }\n   }\n\n   return (\n      <div\n         style={{ gridTemplateColumns: `repeat(${GRID_WIDTH}, 1fr)` }}\n         className={cn(\"max-w-3/4 absolute z-0 grid\", className)}\n      >\n         {dots.map((dot) => dot)}\n      </div>\n   )\n}\n\nexport default WavyDotPattern\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/wavy-text-demo.json b/apps/web/public/v0/styles/default/wavy-text-demo.json
new file mode 100644
index 00000000..83657c8f
--- /dev/null
+++ b/apps/web/public/v0/styles/default/wavy-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "wavy-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/wavy-text-demo.tsx",
+      "content": "import WavyText from \"@/components/ui/wavy-text\"\n\nexport default function WavyTextDemo() {\n   return (\n      <WavyText\n         word=\"Wavy Text\"\n         className=\"text-4xl font-bold text-black dark:text-white\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/wavy-text.json b/apps/web/public/v0/styles/default/wavy-text.json
new file mode 100644
index 00000000..7ce16642
--- /dev/null
+++ b/apps/web/public/v0/styles/default/wavy-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "wavy-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/wavy-text.tsx",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { useMemo } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface WavyTextProps {\n   word: string\n   className?: string\n   variant?: {\n      hidden: { y: number }\n      visible: { y: number }\n   }\n   duration?: number\n   delay?: number\n}\nfunction WavyText({\n   word,\n   className,\n   variant,\n   duration = 0.5,\n   delay = 0.05,\n}: WavyTextProps) {\n   const defaultVariants = {\n      hidden: { y: 10 },\n      visible: { y: -10 },\n   }\n   const combinedVariants = variant || defaultVariants\n   const characters = useMemo(() => word.split(\"\"), [word])\n   return (\n      <div className=\"flex justify-center space-x-2 overflow-hidden p-3\">\n         <AnimatePresence>\n            {characters.map((char, i) => (\n               <motion.h1\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={combinedVariants}\n                  transition={{\n                     yoyo: Number.POSITIVE_INFINITY,\n                     duration,\n                     delay: i * delay,\n                  }}\n                  className={cn(\n                     className,\n                     \"font-display text-center text-4xl font-bold tracking-[-0.15em] md:text-7xl\",\n                  )}\n               >\n                  {char}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n\nexport default WavyText\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/word-fade-in-demo.json b/apps/web/public/v0/styles/default/word-fade-in-demo.json
new file mode 100644
index 00000000..1b5294ef
--- /dev/null
+++ b/apps/web/public/v0/styles/default/word-fade-in-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "word-fade-in-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/word-fade-in-demo.tsx",
+      "content": "import WordFadeIn from \"@/components/ui/word-fade-in\"\n\nexport default async function WordFadeInDemo() {\n   return <WordFadeIn words=\"Word Fade In\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/word-fade-in.json b/apps/web/public/v0/styles/default/word-fade-in.json
new file mode 100644
index 00000000..38971e33
--- /dev/null
+++ b/apps/web/public/v0/styles/default/word-fade-in.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "word-fade-in",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/word-fade-in.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface WordFadeInProps {\n   words: string\n   className?: string\n   delay?: number\n   variants?: Variants\n}\n\nexport default function WordFadeIn({\n   words,\n   delay = 0.15,\n   variants = {\n      hidden: { opacity: 0 },\n      visible: (i: any) => ({\n         y: 0,\n         opacity: 1,\n         transition: { delay: i * delay },\n      }),\n   },\n   className,\n}: WordFadeInProps) {\n   const _words = words.split(\" \")\n\n   return (\n      <motion.h1\n         variants={variants}\n         initial=\"hidden\"\n         animate=\"visible\"\n         className={cn(\n            \"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white\",\n            className,\n         )}\n      >\n         {_words.map((word, i) => (\n            <motion.span key={word} variants={variants} custom={i}>\n               {word}{\" \"}\n            </motion.span>\n         ))}\n      </motion.h1>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/word-pull-up-demo.json b/apps/web/public/v0/styles/default/word-pull-up-demo.json
new file mode 100644
index 00000000..6f4de408
--- /dev/null
+++ b/apps/web/public/v0/styles/default/word-pull-up-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "word-pull-up-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/word-pull-up-demo.tsx",
+      "content": "import WordPullUp from \"@/components/ui/word-pull-up\"\n\nexport default async function WordPullUpDemo() {\n   return (\n      <WordPullUp\n         className=\"text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         words=\"Word Pull Up\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/word-pull-up.json b/apps/web/public/v0/styles/default/word-pull-up.json
new file mode 100644
index 00000000..bc2b69c6
--- /dev/null
+++ b/apps/web/public/v0/styles/default/word-pull-up.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "word-pull-up",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/word-pull-up.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface WordPullUpProps {\n   words: string\n   delayMultiple?: number\n   wrapperFramerProps?: Variants\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function WordPullUp({\n   words,\n   wrapperFramerProps = {\n      hidden: { opacity: 0 },\n      show: {\n         opacity: 1,\n         transition: {\n            staggerChildren: 0.2,\n         },\n      },\n   },\n   framerProps = {\n      hidden: { y: 20, opacity: 0 },\n      show: { y: 0, opacity: 1 },\n   },\n   className,\n}: WordPullUpProps) {\n   return (\n      <motion.h1\n         variants={wrapperFramerProps}\n         initial=\"hidden\"\n         animate=\"show\"\n         className={cn(\n            \"font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm\",\n            className,\n         )}\n      >\n         {words.split(\" \").map((word, i) => (\n            <motion.span\n               key={i}\n               variants={framerProps}\n               style={{ display: \"inline-block\", paddingRight: \"8px\" }}\n            >\n               {word === \"\" ? <span>&nbsp;</span> : word}\n            </motion.span>\n         ))}\n      </motion.h1>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/word-rotate-demo.json b/apps/web/public/v0/styles/default/word-rotate-demo.json
new file mode 100644
index 00000000..12f83dff
--- /dev/null
+++ b/apps/web/public/v0/styles/default/word-rotate-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "word-rotate-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/word-rotate-demo.tsx",
+      "content": "import WordRotate from \"@/components/ui/word-rotate\"\n\nexport default async function WordRotateDemo() {\n   return (\n      <WordRotate\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         words={[\"Word\", \"Rotate\"]}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/default/word-rotate.json b/apps/web/public/v0/styles/default/word-rotate.json
new file mode 100644
index 00000000..730c8470
--- /dev/null
+++ b/apps/web/public/v0/styles/default/word-rotate.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "word-rotate",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/word-rotate.tsx",
+      "content": "\"use client\"\n\nimport type { HTMLMotionProps } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { useEffect, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface WordRotateProps {\n   words: string[]\n   duration?: number\n   framerProps?: HTMLMotionProps<\"h1\">\n   className?: string\n}\n\nexport default function WordRotate({\n   words,\n   duration = 2500,\n   framerProps = {\n      initial: { opacity: 0, y: -50 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 50 },\n      transition: { duration: 0.25, ease: \"easeOut\" },\n   },\n   className,\n}: WordRotateProps) {\n   const [index, setIndex] = useState(0)\n\n   useEffect(() => {\n      const interval = setInterval(() => {\n         setIndex((prevIndex) => (prevIndex + 1) % words.length)\n      }, duration)\n\n      // Clean up interval on unmount\n      return () => clearInterval(interval)\n   }, [words, duration])\n\n   return (\n      <div className=\"overflow-hidden py-2\">\n         <AnimatePresence mode=\"wait\">\n            <motion.h1\n               key={words[index]}\n               className={cn(className)}\n               {...framerProps}\n            >\n               {words[index]}\n            </motion.h1>\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/index.json b/apps/web/public/v0/styles/index.json
new file mode 100644
index 00000000..957af3d4
--- /dev/null
+++ b/apps/web/public/v0/styles/index.json
@@ -0,0 +1,10 @@
+[
+  {
+    "name": "miami",
+    "label": "Miami"
+  },
+  {
+    "name": "default",
+    "label": "Default"
+  }
+]
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/accordion-demo.json b/apps/web/public/v0/styles/miami/accordion-demo.json
new file mode 100644
index 00000000..68a49033
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/accordion-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "accordion-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "accordion"
+  ],
+  "files": [
+    {
+      "path": "examples/accordion-demo.tsx",
+      "content": "import {\n   Accordion,\n   AccordionContent,\n   AccordionItem,\n   AccordionTrigger,\n} from \"@/components/ui/accordion\"\n\nexport default function AccordionDemo() {\n   return (\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n         <AccordionItem value=\"item-1\">\n            <AccordionTrigger>Is it accessible?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It adheres to the WAI-ARIA design pattern.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-2\">\n            <AccordionTrigger>Is it styled?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It comes with default styles that matches the other\n               components&apos; aesthetic.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-3\">\n            <AccordionTrigger>Is it animated?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It's animated by default, but you can disable it if you\n               prefer.\n            </AccordionContent>\n         </AccordionItem>\n      </Accordion>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/accordion.json b/apps/web/public/v0/styles/miami/accordion.json
new file mode 100644
index 00000000..5922bb3f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/accordion.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "accordion",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-accordion"
+  ],
+  "files": [
+    {
+      "path": "ui/accordion.tsx",
+      "content": "\"use client\"\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n   <AccordionPrimitive.Item\n      ref={ref}\n      className={cn(\"border-b\", className)}\n      {...props}\n   />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n         ref={ref}\n         className={cn(\n            \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n         <ChevronDownIcon className=\"text-muted-foreground size-4 shrink-0 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n   </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n   React.ElementRef<typeof AccordionPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <AccordionPrimitive.Content\n      ref={ref}\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n      {...props}\n   >\n      <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n   </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "keyframes": {
+            "accordion-down": {
+              "from": {
+                "height": "0"
+              },
+              "to": {
+                "height": "var(--radix-accordion-content-height)"
+              }
+            },
+            "accordion-up": {
+              "from": {
+                "height": "var(--radix-accordion-content-height)"
+              },
+              "to": {
+                "height": "0"
+              }
+            }
+          },
+          "animation": {
+            "accordion-down": "accordion-down 0.2s ease-out",
+            "accordion-up": "accordion-up 0.2s ease-out"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/alert-demo.json b/apps/web/public/v0/styles/miami/alert-demo.json
new file mode 100644
index 00000000..f4e92fbf
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/alert-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "alert-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-demo.tsx",
+      "content": "import { RocketIcon } from \"@radix-ui/react-icons\"\n\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\n\nexport default function AlertDemo() {\n   return (\n      <Alert>\n         <RocketIcon className=\"size-4\" />\n         <AlertTitle>Heads up!</AlertTitle>\n         <AlertDescription>\n            You can add components to your app using the cli.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/alert-destructive.json b/apps/web/public/v0/styles/miami/alert-destructive.json
new file mode 100644
index 00000000..ae705236
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/alert-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "alert-destructive",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-destructive.tsx",
+      "content": "import { ExclamationTriangleIcon } from \"@radix-ui/react-icons\"\n\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\n\nexport default function AlertDestructive() {\n   return (\n      <Alert variant=\"destructive\">\n         <ExclamationTriangleIcon className=\"size-4\" />\n         <AlertTitle>Error</AlertTitle>\n         <AlertDescription>\n            Your session has expired. Please log in again.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/alert-dialog-demo.json b/apps/web/public/v0/styles/miami/alert-dialog-demo.json
new file mode 100644
index 00000000..f4cdf3fc
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/alert-dialog-demo.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "alert-dialog-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "alert-dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-dialog-demo.tsx",
+      "content": "import {\n   AlertDialog,\n   AlertDialogAction,\n   AlertDialogCancel,\n   AlertDialogContent,\n   AlertDialogDescription,\n   AlertDialogFooter,\n   AlertDialogHeader,\n   AlertDialogTitle,\n   AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function AlertDialogDemo() {\n   return (\n      <AlertDialog>\n         <AlertDialogTrigger asChild>\n            <Button variant=\"outline\">Show Dialog</Button>\n         </AlertDialogTrigger>\n         <AlertDialogContent>\n            <AlertDialogHeader>\n               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n               <AlertDialogDescription>\n                  This action cannot be undone. This will permanently delete\n                  your account and remove your data from our servers.\n               </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n               <AlertDialogCancel>Cancel</AlertDialogCancel>\n               <AlertDialogAction>Continue</AlertDialogAction>\n            </AlertDialogFooter>\n         </AlertDialogContent>\n      </AlertDialog>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/alert-dialog.json b/apps/web/public/v0/styles/miami/alert-dialog.json
new file mode 100644
index 00000000..2a2909d0
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/alert-dialog.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "alert-dialog",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-alert-dialog"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/alert-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Overlay\n      className={cn(\n         \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80\",\n         className,\n      )}\n      {...props}\n      ref={ref}\n   />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n         ref={ref}\n         className={cn(\n            \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg\",\n            className,\n         )}\n         {...props}\n      />\n   </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nfunction AlertDialogHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\n            \"flex flex-col space-y-2 text-center sm:text-left\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nfunction AlertDialogFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Title\n      ref={ref}\n      className={cn(\"text-lg font-semibold\", className)}\n      {...props}\n   />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <AlertDialogPrimitive.Description\n      ref={ref}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nAlertDialogDescription.displayName =\n   AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Action>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &\n      VariantProps<typeof buttonVariants>\n>(({ className, variant, size, ...props }, ref) => (\n   <AlertDialogPrimitive.Action\n      ref={ref}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n   />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &\n      VariantProps<typeof buttonVariants>\n>(({ className, variant = \"outline\", size, ...props }, ref) => (\n   <AlertDialogPrimitive.Cancel\n      ref={ref}\n      className={cn(\n         buttonVariants({ variant, size }),\n         \"mt-2 sm:mt-0\",\n         className,\n      )}\n      {...props}\n   />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n   AlertDialog,\n   AlertDialogPortal,\n   AlertDialogOverlay,\n   AlertDialogTrigger,\n   AlertDialogContent,\n   AlertDialogHeader,\n   AlertDialogFooter,\n   AlertDialogTitle,\n   AlertDialogDescription,\n   AlertDialogAction,\n   AlertDialogCancel,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/alert.json b/apps/web/public/v0/styles/miami/alert.json
new file mode 100644
index 00000000..235ce079
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/alert.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "alert",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/alert.tsx",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n   \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-background text-foreground\",\n            destructive:\n               \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nconst Alert = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n   <div\n      ref={ref}\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n   />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n   <h5\n      ref={ref}\n      className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n      {...props}\n   />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n      {...props}\n   />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-beam-bidirectional.json b/apps/web/public/v0/styles/miami/animated-beam-bidirectional.json
new file mode 100644
index 00000000..9bf47cbc
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-beam-bidirectional.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-beam-bidirectional",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-beam-bidirectional.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedBeam } from \"@/components/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.user />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.openai />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n            startYOffset={10}\n            endYOffset={10}\n            curvature={-20}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n            startYOffset={-10}\n            endYOffset={-10}\n            curvature={20}\n            reverse\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   openai: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-beam-demo.json b/apps/web/public/v0/styles/miami/animated-beam-demo.json
new file mode 100644
index 00000000..2a62d061
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-beam-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-beam-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-beam-demo.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedBeam } from \"@/components/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n            </div>\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div2Ref}>\n                  <Icons.notion />\n               </Circle>\n               <Circle ref={div4Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n               <Circle ref={div6Ref}>\n                  <Icons.zapier />\n               </Circle>\n            </div>\n            <div className=\"flex flex-row items-center justify-between\">\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div7Ref}>\n                  <Icons.messenger />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div4Ref}\n            curvature={-75}\n            endYOffset={-10}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div4Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div4Ref}\n            curvature={75}\n            endYOffset={10}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div4Ref}\n            curvature={-75}\n            endYOffset={-10}\n            reverse\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div4Ref}\n            reverse\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div7Ref}\n            toRef={div4Ref}\n            curvature={75}\n            endYOffset={10}\n            reverse\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g\n                     id=\"Personal\"\n                     transform=\"translate(277.000000, 309.000000)\"\n                  >\n                     <g\n                        id=\"Docs-icon\"\n                        transform=\"translate(174.000000, 91.000000)\"\n                     >\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              ></polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-beam-multiple-inputs.json b/apps/web/public/v0/styles/miami/animated-beam-multiple-inputs.json
new file mode 100644
index 00000000..19323773
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-beam-multiple-inputs.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-beam-multiple-inputs",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-beam-multiple-inputs.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedBeam } from \"@/components/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"border-border z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamMultipleInputDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-row items-stretch justify-between gap-10\">\n            <div className=\"flex flex-col justify-center gap-2\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div4Ref}>\n                  <Icons.messenger />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.notion />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div6Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div7Ref}>\n                  <Icons.user />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div4Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div6Ref}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div7Ref}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g\n                     id=\"Personal\"\n                     transform=\"translate(277.000000, 309.000000)\"\n                  >\n                     <g\n                        id=\"Docs-icon\"\n                        transform=\"translate(174.000000, 91.000000)\"\n                     >\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              ></polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-beam-multiple-outputs.json b/apps/web/public/v0/styles/miami/animated-beam-multiple-outputs.json
new file mode 100644
index 00000000..24d661c0
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-beam-multiple-outputs.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-beam-multiple-outputs",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-beam-multiple-outputs.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedBeam } from \"@/components/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamMultipleOutputDemo({\n   className,\n}: {\n   className?: string\n}) {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n   const div3Ref = useRef<HTMLDivElement>(null)\n   const div4Ref = useRef<HTMLDivElement>(null)\n   const div5Ref = useRef<HTMLDivElement>(null)\n   const div6Ref = useRef<HTMLDivElement>(null)\n   const div7Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className={cn(\n            \"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\",\n            className,\n         )}\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-row items-stretch justify-between gap-10\">\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div7Ref}>\n                  <Icons.user />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center\">\n               <Circle ref={div6Ref} className=\"size-16\">\n                  <Icons.openai />\n               </Circle>\n            </div>\n            <div className=\"flex flex-col justify-center gap-2\">\n               <Circle ref={div1Ref}>\n                  <Icons.googleDrive />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.googleDocs />\n               </Circle>\n               <Circle ref={div3Ref}>\n                  <Icons.whatsapp />\n               </Circle>\n               <Circle ref={div4Ref}>\n                  <Icons.messenger />\n               </Circle>\n               <Circle ref={div5Ref}>\n                  <Icons.notion />\n               </Circle>\n            </div>\n         </div>\n\n         {/* AnimatedBeams */}\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div2Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div3Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div4Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div5Ref}\n            toRef={div6Ref}\n            duration={3}\n         />\n         <AnimatedBeam\n            containerRef={containerRef}\n            fromRef={div6Ref}\n            toRef={div7Ref}\n            duration={3}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   googleDocs: () => (\n      <svg\n         width=\"47px\"\n         height=\"65px\"\n         viewBox=\"0 0 47 65\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-1\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-3\"\n            />\n            <linearGradient\n               x1=\"50.0053945%\"\n               y1=\"8.58610612%\"\n               x2=\"50.0053945%\"\n               y2=\"100.013939%\"\n               id=\"linearGradient-5\"\n            >\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.2\" offset=\"0%\" />\n               <stop stopColor=\"#1A237E\" stopOpacity=\"0.02\" offset=\"100%\" />\n            </linearGradient>\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-6\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-8\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-10\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-12\"\n            />\n            <path\n               d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n               id=\"path-14\"\n            />\n            <radialGradient\n               cx=\"3.16804688%\"\n               cy=\"2.71744318%\"\n               fx=\"3.16804688%\"\n               fy=\"2.71744318%\"\n               r=\"161.248516%\"\n               gradientTransform=\"translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)\"\n               id=\"radialGradient-16\"\n            >\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0.1\" offset=\"0%\" />\n               <stop stopColor=\"#FFFFFF\" stopOpacity=\"0\" offset=\"100%\" />\n            </radialGradient>\n         </defs>\n         <g\n            id=\"Page-1\"\n            stroke=\"none\"\n            strokeWidth=\"1\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n         >\n            <g transform=\"translate(-451.000000, -463.000000)\">\n               <g id=\"Hero\" transform=\"translate(0.000000, 63.000000)\">\n                  <g\n                     id=\"Personal\"\n                     transform=\"translate(277.000000, 309.000000)\"\n                  >\n                     <g\n                        id=\"Docs-icon\"\n                        transform=\"translate(174.000000, 91.000000)\"\n                     >\n                        <g id=\"Group\">\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-2\" fill=\"white\">\n                                 <use xlinkHref=\"#path-1\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z\"\n                                 id=\"Path\"\n                                 fill=\"#4285F4\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-2)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-4\" fill=\"white\">\n                                 <use xlinkHref=\"#path-3\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <polygon\n                                 id=\"Path\"\n                                 fill=\"url(#linearGradient-5)\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-4)\"\n                                 points=\"30.6638281 16.4309659 47 32.8582386 47 17.7272727\"\n                              ></polygon>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-7\" fill=\"white\">\n                                 <use xlinkHref=\"#path-6\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z\"\n                                 id=\"Shape\"\n                                 fill=\"#F1F1F1\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-7)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-9\" fill=\"white\">\n                                 <use xlinkHref=\"#path-8\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <g id=\"Group\" mask=\"url(#mask-9)\">\n                                 <g transform=\"translate(26.437500, -2.954545)\">\n                                    <path\n                                       d=\"M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z\"\n                                       id=\"Path\"\n                                       fill=\"#A1C2FA\"\n                                       fillRule=\"nonzero\"\n                                    />\n                                 </g>\n                              </g>\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-11\" fill=\"white\">\n                                 <use xlinkHref=\"#path-10\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#FFFFFF\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-11)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-13\" fill=\"white\">\n                                 <use xlinkHref=\"#path-12\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.2\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-13)\"\n                              />\n                           </g>\n                           <g id=\"Clipped\">\n                              <mask id=\"mask-15\" fill=\"white\">\n                                 <use xlinkHref=\"#path-14\" />\n                              </mask>\n                              <g id=\"SVGID_1_\" />\n                              <path\n                                 d=\"M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z\"\n                                 id=\"Path\"\n                                 fillOpacity=\"0.1\"\n                                 fill=\"#1A237E\"\n                                 fillRule=\"nonzero\"\n                                 mask=\"url(#mask-15)\"\n                              />\n                           </g>\n                        </g>\n                        <path\n                           d=\"M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z\"\n                           id=\"Path\"\n                           fill=\"url(#radialGradient-16)\"\n                           fillRule=\"nonzero\"\n                        />\n                     </g>\n                  </g>\n               </g>\n            </g>\n         </g>\n      </svg>\n   ),\n   zapier: () => (\n      <svg\n         width=\"105\"\n         height=\"28\"\n         viewBox=\"0 0 244 66\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M175.035 15.7391H163.75V54.7833H175.035V15.7391Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z\"\n            fill=\"#201515\"\n         />\n         <path\n            d=\"M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z\"\n            fill=\"#201515\"\n         />\n         <path d=\"M39.0441 45.2253H0V54.789H39.0441V45.2253Z\" fill=\"#FF4F00\" />\n      </svg>\n   ),\n   messenger: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 48 48\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <radialGradient\n            id=\"8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1\"\n            cx=\"11.087\"\n            cy=\"7.022\"\n            r=\"47.612\"\n            gradientTransform=\"matrix(1 0 0 -1 0 50)\"\n            gradientUnits=\"userSpaceOnUse\"\n         >\n            <stop offset=\"0\" stopColor=\"#1292ff\"></stop>\n            <stop offset=\".079\" stopColor=\"#2982ff\"></stop>\n            <stop offset=\".23\" stopColor=\"#4e69ff\"></stop>\n            <stop offset=\".351\" stopColor=\"#6559ff\"></stop>\n            <stop offset=\".428\" stopColor=\"#6d53ff\"></stop>\n            <stop offset=\".754\" stopColor=\"#df47aa\"></stop>\n            <stop offset=\".946\" stopColor=\"#ff6257\"></stop>\n         </radialGradient>\n         <path\n            fill=\"url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)\"\n            d=\"M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z\"\n         />\n         <path\n            d=\"M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z\"\n            opacity=\".05\"\n         />\n         <path\n            d=\"M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z\"\n            opacity=\".07\"\n         />\n         <path\n            fill=\"#ffffff\"\n            d=\"M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z\"\n         />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-beam-unidirectional.json b/apps/web/public/v0/styles/miami/animated-beam-unidirectional.json
new file mode 100644
index 00000000..9ea5b6a6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-beam-unidirectional.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-beam-unidirectional",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-beam-unidirectional.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { forwardRef, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedBeam } from \"@/components/ui/animated-beam\"\n\nconst Circle = forwardRef<\n   HTMLDivElement,\n   { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n})\n\nexport default function AnimatedBeamDemo() {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const div1Ref = useRef<HTMLDivElement>(null)\n   const div2Ref = useRef<HTMLDivElement>(null)\n\n   return (\n      <div\n         className=\"bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl\"\n         ref={containerRef}\n      >\n         <div className=\"flex size-full flex-col items-stretch justify-between gap-10\">\n            <div className=\"flex flex-row justify-between\">\n               <Circle ref={div1Ref}>\n                  <Icons.user />\n               </Circle>\n               <Circle ref={div2Ref}>\n                  <Icons.openai />\n               </Circle>\n            </div>\n         </div>\n\n         <AnimatedBeam\n            duration={3}\n            containerRef={containerRef}\n            fromRef={div1Ref}\n            toRef={div2Ref}\n         />\n      </div>\n   )\n}\n\nconst Icons = {\n   openai: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   user: () => (\n      <svg\n         width=\"24\"\n         height=\"24\"\n         viewBox=\"0 0 24 24\"\n         fill=\"none\"\n         stroke=\"#000000\"\n         strokeWidth=\"2\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n         <circle cx=\"12\" cy=\"7\" r=\"4\" />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-beam.json b/apps/web/public/v0/styles/miami/animated-beam.json
new file mode 100644
index 00000000..54a2710a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-beam.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-beam",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/animated-beam.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport type { RefObject } from \"react\"\nimport { useEffect, useId, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface AnimatedBeamProps {\n   className?: string\n   containerRef: RefObject<HTMLElement> // Container ref\n   fromRef: RefObject<HTMLElement>\n   toRef: RefObject<HTMLElement>\n   curvature?: number\n   reverse?: boolean\n   pathColor?: string\n   pathWidth?: number\n   pathOpacity?: number\n   gradientStartColor?: string\n   gradientStopColor?: string\n   delay?: number\n   duration?: number\n   startXOffset?: number\n   startYOffset?: number\n   endXOffset?: number\n   endYOffset?: number\n}\n\nexport const AnimatedBeam: React.FC<AnimatedBeamProps> = ({\n   className,\n   containerRef,\n   fromRef,\n   toRef,\n   curvature = 0,\n   reverse = false, // Include the reverse prop\n   duration = Math.random() * 3 + 4,\n   delay = 0,\n   pathColor = \"gray\",\n   pathWidth = 2,\n   pathOpacity = 0.2,\n   gradientStartColor = \"#ffaa40\",\n   gradientStopColor = \"#9c40ff\",\n   startXOffset = 0,\n   startYOffset = 0,\n   endXOffset = 0,\n   endYOffset = 0,\n}) => {\n   const id = useId()\n   const [pathD, setPathD] = useState(\"\")\n   const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 })\n\n   // Calculate the gradient coordinates based on the reverse prop\n   const gradientCoordinates = reverse\n      ? {\n           x1: [\"90%\", \"-10%\"],\n           x2: [\"100%\", \"0%\"],\n           y1: [\"0%\", \"0%\"],\n           y2: [\"0%\", \"0%\"],\n        }\n      : {\n           x1: [\"10%\", \"110%\"],\n           x2: [\"0%\", \"100%\"],\n           y1: [\"0%\", \"0%\"],\n           y2: [\"0%\", \"0%\"],\n        }\n\n   useEffect(() => {\n      const updatePath = () => {\n         if (containerRef.current && fromRef.current && toRef.current) {\n            const containerRect = containerRef.current.getBoundingClientRect()\n            const rectA = fromRef.current.getBoundingClientRect()\n            const rectB = toRef.current.getBoundingClientRect()\n\n            const svgWidth = containerRect.width\n            const svgHeight = containerRect.height\n            setSvgDimensions({ width: svgWidth, height: svgHeight })\n\n            const startX =\n               rectA.left - containerRect.left + rectA.width / 2 + startXOffset\n            const startY =\n               rectA.top - containerRect.top + rectA.height / 2 + startYOffset\n            const endX =\n               rectB.left - containerRect.left + rectB.width / 2 + endXOffset\n            const endY =\n               rectB.top - containerRect.top + rectB.height / 2 + endYOffset\n\n            const controlY = startY - curvature\n            const d = `M ${startX},${startY} Q ${\n               (startX + endX) / 2\n            },${controlY} ${endX},${endY}`\n            setPathD(d)\n         }\n      }\n\n      // Initialize ResizeObserver\n      const resizeObserver = new ResizeObserver((entries) => {\n         // For all entries, recalculate the path\n         for (const entry of entries) updatePath()\n      })\n\n      // Observe the container element\n      if (containerRef.current) resizeObserver.observe(containerRef.current)\n\n      // Call the updatePath initially to set the initial path\n      updatePath()\n\n      // Clean up the observer on component unmount\n      return () => {\n         resizeObserver.disconnect()\n      }\n   }, [\n      containerRef,\n      fromRef,\n      toRef,\n      curvature,\n      startXOffset,\n      startYOffset,\n      endXOffset,\n      endYOffset,\n   ])\n\n   return (\n      <svg\n         fill=\"none\"\n         width={svgDimensions.width}\n         height={svgDimensions.height}\n         xmlns=\"http://www.w3.org/2000/svg\"\n         className={cn(\n            \"pointer-events-none absolute left-0 top-0 transform-gpu stroke-2\",\n            className,\n         )}\n         viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}\n      >\n         <path\n            d={pathD}\n            stroke={pathColor}\n            strokeWidth={pathWidth}\n            strokeOpacity={pathOpacity}\n            strokeLinecap=\"round\"\n         />\n         <path\n            d={pathD}\n            strokeWidth={pathWidth}\n            stroke={`url(#${id})`}\n            strokeOpacity=\"1\"\n            strokeLinecap=\"round\"\n         />\n         <defs>\n            <motion.linearGradient\n               className=\"transform-gpu\"\n               id={id}\n               gradientUnits=\"userSpaceOnUse\"\n               initial={{\n                  x1: \"0%\",\n                  x2: \"0%\",\n                  y1: \"0%\",\n                  y2: \"0%\",\n               }}\n               animate={{\n                  x1: gradientCoordinates.x1,\n                  x2: gradientCoordinates.x2,\n                  y1: gradientCoordinates.y1,\n                  y2: gradientCoordinates.y2,\n               }}\n               transition={{\n                  delay,\n                  duration,\n                  ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo\n                  repeat: Number.POSITIVE_INFINITY,\n                  repeatDelay: 0,\n               }}\n            >\n               <stop stopColor={gradientStartColor} stopOpacity=\"0\"></stop>\n               <stop stopColor={gradientStartColor}></stop>\n               <stop offset=\"32.5%\" stopColor={gradientStopColor}></stop>\n               <stop\n                  offset=\"100%\"\n                  stopColor={gradientStopColor}\n                  stopOpacity=\"0\"\n               ></stop>\n            </motion.linearGradient>\n         </defs>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-circular-progress-bar-demo.json b/apps/web/public/v0/styles/miami/animated-circular-progress-bar-demo.json
new file mode 100644
index 00000000..e8a502ee
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-circular-progress-bar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-circular-progress-bar-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-circular-progress-bar-demo.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport AnimatedCircularProgressBar from \"@/components/ui/animated-circular-progress-bar\"\n\nexport default function AnimatedCircularProgressBarDemo() {\n   const [value, setValue] = useState(0)\n\n   useEffect(() => {\n      const handleIncrement = (prev: number) => {\n         if (prev === 100) {\n            return 0\n         }\n         return prev + 10\n      }\n      setValue(handleIncrement)\n      const interval = setInterval(() => setValue(handleIncrement), 2000)\n      return () => clearInterval(interval)\n   }, [])\n\n   return (\n      <AnimatedCircularProgressBar\n         max={100}\n         min={0}\n         value={value}\n         gaugePrimaryColor=\"rgb(79 70 229)\"\n         gaugeSecondaryColor=\"rgba(0, 0, 0, 0.1)\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-circular-progress-bar.json b/apps/web/public/v0/styles/miami/animated-circular-progress-bar.json
new file mode 100644
index 00000000..44c83d2b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-circular-progress-bar.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-circular-progress-bar",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/animated-circular-progress-bar.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\ninterface Props {\n   max: number\n   value: number\n   min: number\n   gaugePrimaryColor: string\n   gaugeSecondaryColor: string\n   className?: string\n}\n\nexport default function AnimatedCircularProgressBar({\n   max = 100,\n   min = 0,\n   value = 0,\n   gaugePrimaryColor,\n   gaugeSecondaryColor,\n   className,\n}: Props) {\n   const circumference = 2 * Math.PI * 45\n   const percentPx = circumference / 100\n   const currentPercent = Math.round(((value - min) / (max - min)) * 100)\n\n   return (\n      <div\n         className={cn(\"relative size-40 text-2xl font-semibold\", className)}\n         style={\n            {\n               \"--circle-size\": \"100px\",\n               \"--circumference\": circumference,\n               \"--percent-to-px\": `${percentPx}px`,\n               \"--gap-percent\": \"5\",\n               \"--offset-factor\": \"0\",\n               \"--transition-length\": \"1s\",\n               \"--transition-step\": \"200ms\",\n               \"--delay\": \"0s\",\n               \"--percent-to-deg\": \"3.6deg\",\n               transform: \"translateZ(0)\",\n            } as React.CSSProperties\n         }\n      >\n         <svg\n            fill=\"none\"\n            className=\"size-full\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 100 100\"\n         >\n            {currentPercent <= 90 && currentPercent >= 0 && (\n               <circle\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"45\"\n                  strokeWidth=\"10\"\n                  strokeDashoffset=\"0\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\" opacity-100\"\n                  style={\n                     {\n                        stroke: gaugeSecondaryColor,\n                        \"--stroke-percent\": 90 - currentPercent,\n                        \"--offset-factor-secondary\":\n                           \"calc(1 - var(--offset-factor))\",\n                        strokeDasharray:\n                           \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n                        transform:\n                           \"rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)\",\n                        transition:\n                           \"all var(--transition-length) ease var(--delay)\",\n                        transformOrigin:\n                           \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n                     } as React.CSSProperties\n                  }\n               />\n            )}\n            <circle\n               cx=\"50\"\n               cy=\"50\"\n               r=\"45\"\n               strokeWidth=\"10\"\n               strokeDashoffset=\"0\"\n               strokeLinecap=\"round\"\n               strokeLinejoin=\"round\"\n               className=\"opacity-100\"\n               style={\n                  {\n                     stroke: gaugePrimaryColor,\n                     \"--stroke-percent\": currentPercent,\n                     strokeDasharray:\n                        \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n                     transition:\n                        \"var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)\",\n                     transitionProperty: \"stroke-dasharray,transform\",\n                     transform:\n                        \"rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))\",\n                     transformOrigin:\n                        \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n                  } as React.CSSProperties\n               }\n            />\n         </svg>\n         <span\n            data-current-value={currentPercent}\n            className=\"animate-in fade-in absolute inset-0 m-auto size-fit delay-[var(--delay)] duration-[var(--transition-length)] ease-linear\"\n         >\n            {currentPercent}\n         </span>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-feature-card-1.json b/apps/web/public/v0/styles/miami/animated-feature-card-1.json
new file mode 100644
index 00000000..77248ac9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-feature-card-1.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-1",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-1.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\n\nexport default function FeatureCard1() {\n   const variant1 = {\n      initial: {\n         scale: 0.87,\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n      whileHover: {\n         scale: 0.8,\n         boxShadow:\n            \"rgba(245,40,145,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: -27,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n      whileHover: {\n         y: -55,\n         scale: 0.87,\n         boxShadow:\n            \"rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         y: -25,\n         opacity: 0,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"linear\",\n         },\n      },\n      whileHover: {\n         y: -45,\n         opacity: 1,\n         scale: 1,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: \"easeInOut\",\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 p-10\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"z-[1] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"z-[2] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jane\"\n                           alt=\"jane\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant3}\n                     className=\"absolute bottom-0 z-[3] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jill\"\n                           alt=\"jill\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Notifications</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Instantly get notified about events\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-feature-card-10.json b/apps/web/public/v0/styles/miami/animated-feature-card-10.json
new file mode 100644
index 00000000..4850064f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-feature-card-10.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-10",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-10.tsx",
+      "content": "\"use client\"\n\nimport {\n   AnimatePresence,\n   cubicBezier,\n   motion,\n   useAnimation,\n   useInView,\n} from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\n\nconst cardImage = [\n   {\n      id: 1,\n      title: \"Tom\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/tom\",\n   },\n   {\n      id: 2,\n      title: \"Chris\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/chris\",\n   },\n   {\n      id: 3,\n      title: \"PJ\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/pj\",\n   },\n   {\n      id: 4,\n      title: \"Scott\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/scott\",\n   },\n   {\n      id: 5,\n      title: \"Yehuda\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/yehuda\",\n   },\n   {\n      id: 6,\n      title: \"Ezra\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/ezra\",\n   },\n   {\n      id: 7,\n      title: \"Ivey\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/ivey\",\n   },\n   {\n      id: 8,\n      title: \"Evan\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/evan\",\n   },\n   {\n      id: 9,\n      title: \"Van\",\n      link: \"#\",\n      image: \"https://avatar.vercel.sh/van\",\n   },\n]\n\nexport default function FeatureCard10() {\n   const containerRef = useRef(null)\n   const inView = useInView(containerRef, { amount: 0.25 })\n   const controls = useAnimation()\n\n   useEffect(() => {\n      if (inView) controls.start(\"visible\")\n      else controls.start(\"hidden\")\n   }, [inView, controls])\n\n   return (\n      <div className=\"flex h-full transform-gpu flex-col items-center justify-between gap-5 rounded-lg border border-neutral-200 bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] xl:flex-row dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <div className=\"flex w-full flex-col items-start justify-between gap-y-10 p-10 xl:h-full xl:w-1/2\">\n            <h2 className=\"text-3xl font-semibold\">\n               Nyxb UI let's you build amazing websites with all your friends.\n            </h2>\n            <a\n               href=\"#\"\n               className=\"text-base font-normal text-gray-500 underline-offset-4 transition-all hover:underline\"\n            >\n               Check out our showcase\n            </a>\n         </div>\n         <div className=\"relative w-full overflow-hidden xl:w-1/2\">\n            <div className=\"pointer-events-none absolute inset-x-0 top-0 z-10 h-1/3 bg-gradient-to-b from-white dark:from-black\"></div>\n            <div\n               ref={containerRef}\n               className=\"relative -right-[50px] -top-[100px] grid max-h-[450px] grid-cols-3 gap-5 [transform:rotate(-15deg)translateZ(10px);]\"\n            >\n               <AnimatePresence>\n                  {cardImage.map((card, index) => (\n                     <motion.div\n                        variants={{\n                           hidden: { opacity: 0, scale: 0.96, y: 25 },\n                           visible: { opacity: 1, scale: 1, y: 0 },\n                        }}\n                        initial=\"hidden\"\n                        animate={controls}\n                        exit={{\n                           opacity: 0,\n                           scale: 0,\n                           transition: {\n                              duration: 0.1,\n                              ease: cubicBezier(0.22, 1, 0.36, 1),\n                           },\n                        }}\n                        transition={{\n                           duration: 0.2,\n                           ease: cubicBezier(0.22, 1, 0.36, 1),\n                           delay: index * 0.04,\n                        }}\n                        key={card.id}\n                        className=\"flex flex-col items-center gap-y-2 rounded-md border bg-white/5 p-5\"\n                     >\n                        <img\n                           src={card.image}\n                           alt={card.title}\n                           className=\"size-20 rounded-full object-cover\"\n                        />\n                        <p className=\"text-sm dark:text-neutral-200/50\">\n                           {card.title}\n                        </p>\n                        <a\n                           href={card.link}\n                           className=\"rounded-md border border-neutral-700/50 bg-neutral-600 p-2 py-0.5 text-white shadow-xl drop-shadow-lg hover:bg-neutral-500 dark:border-neutral-400/20 dark:bg-gray-500\"\n                        >\n                           Website\n                        </a>\n                     </motion.div>\n                  ))}\n               </AnimatePresence>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-feature-card-2.json b/apps/web/public/v0/styles/miami/animated-feature-card-2.json
new file mode 100644
index 00000000..3da4b66f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-feature-card-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-2.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\nimport { Clock, Download, MessageCircle, Star } from \"lucide-react\"\n\nconst texts = [\n   {\n      id: 1,\n      header: \"New Feature Release.\",\n      subheader: \"Experience our app's latest features now.\",\n      icon: <Star />,\n   },\n   {\n      id: 2,\n      header: \"App Update Available.\",\n      subheader:\n         \"A new update is available for download. Get the latest version!\",\n      icon: <Download />,\n   },\n   {\n      id: 3,\n      header: \"Scheduled Maintenance.\",\n      subheader:\n         \"Our app will be temporarily unavailable due to scheduled maintenance.\",\n      icon: <Clock />,\n   },\n   {\n      id: 4,\n      header: \"Feedback Appreciated.\",\n      subheader:\n         \"We'd love to hear your thoughts on our app. Share your feedback!\",\n      icon: <MessageCircle />,\n   },\n]\n\nexport default function FeatureCard2() {\n   const itemVariants = {\n      initial: (index: number) => ({\n         y: 0,\n         scale: index === 3 ? 0.85 : 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      }),\n      whileHover: (index: number) => ({\n         y: -110,\n         opacity: 1,\n         scale: index === 0 ? 0.85 : index === 3 ? 1 : 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      }),\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl\">\n               <motion.div className=\"flex h-[310px] w-full cursor-pointer flex-col gap-y-5 overflow-hidden rounded-t-md p-5\">\n                  {texts.map((text, index) => (\n                     <motion.div\n                        key={text.id}\n                        className=\"w-full origin-right rounded-md  border border-slate-300/50 p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                        custom={index}\n                        variants={itemVariants}\n                     >\n                        <div className=\"flex flex-row gap-2\">\n                           {text.icon}\n                           <p className=\"text-black dark:text-white\">\n                              {text.header}\n                           </p>\n                        </div>\n                        <p className=\"text-gray-400 dark:text-gray-400\">\n                           {text.subheader}\n                        </p>\n                     </motion.div>\n                  ))}\n               </motion.div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Notifications</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Instantly get notified about events\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-feature-card-3.json b/apps/web/public/v0/styles/miami/animated-feature-card-3.json
new file mode 100644
index 00000000..db0b1b51
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-feature-card-3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-3",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-3.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard3() {\n   const variant1 = {\n      initial: {\n         y: 4,\n         scale: 0.5,\n         opacity: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -2,\n         opacity: 1,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: -2,\n         opacity: 1,\n         scale: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 8,\n         opacity: 1,\n         scale: 1.05,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col justify-between\"\n         >\n            <motion.div className=\"flex size-full cursor-pointer flex-col items-center justify-center gap-y-2 overflow-hidden rounded-t-xl p-8\">\n               <motion.p\n                  variants={variant1}\n                  className=\"w-fit rounded-full border px-2 text-[15px]\"\n               >\n                  Make it Pop ✨\n               </motion.p>\n               <motion.div\n                  variants={variant2}\n                  className=\"flex max-w-[300px] items-start gap-x-2 rounded-lg border border-neutral-300 border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n               >\n                  <div className=\"flex size-6 shrink-0 rounded-full bg-blue-500\">\n                     <img\n                        className=\"size-full rounded-full object-cover\"\n                        src=\"https://avatar.vercel.sh/jane\"\n                        alt=\"jane\"\n                     />\n                  </div>\n                  <div>\n                     <h3 className=\"text-base font-semibold\">Josh</h3>\n                     <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n                     </p>\n                  </div>\n               </motion.div>\n            </motion.div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">AI Co-Pilot</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Use AI to make your writing stand out\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-feature-card-4.json b/apps/web/public/v0/styles/miami/animated-feature-card-4.json
new file mode 100644
index 00000000..a51a2ff9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-feature-card-4.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-4",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-4.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard4() {\n   const variant1 = {\n      initial: {\n         x: 35,\n         y: 5,\n         scale: 0.8,\n         rotate: -3,\n         zIndex: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 0,\n         y: 0,\n         scale: 1,\n         rotate: 0,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         scale: 1.1,\n         zIndex: 2,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         scale: 1,\n         boxShadow:\n            \"rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         x: -35,\n         y: 5,\n         scale: 0.8,\n         rotate: 3,\n         zIndex: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 0,\n         y: 0,\n         scale: 1,\n         rotate: 0,\n         boxShadow:\n            \"rgba(245,40,145,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.1,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex size-full items-center justify-center rounded-t-xl bg-transparent p-10\">\n               <motion.div className=\"flex h-[230px] w-full items-center justify-between gap-x-4\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"z-[3] flex h-fit w-full  flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/christina\"\n                           alt=\"christina\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant3}\n                     className=\"z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/joshua\"\n                           alt=\"joshua\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-700/50\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-400/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-300/80\"></div>\n                        <div className=\"h-2 w-10 rounded-full bg-neutral-600/80\"></div>\n                     </div>\n                  </motion.div>\n               </motion.div>\n            </div>\n\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Social</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Write once, share with your friends\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-feature-card-5.json b/apps/web/public/v0/styles/miami/animated-feature-card-5.json
new file mode 100644
index 00000000..f7a32881
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-feature-card-5.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-5",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-5.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard5() {\n   const variant1 = {\n      initial: {\n         viewBox: \"0 -950 366 1408\",\n         filter: \"saturate(0.3)\",\n         opacity: 0.5,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         viewBox: \"0 -60 366 310\",\n         filter: \"saturate(1)\",\n         opacity: 1,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 0,\n         transition: {\n            delay: 0.05,\n            duration: 0.3,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"relative flex size-full cursor-pointer items-center justify-center overflow-hidden rounded-t-xl bg-transparent p-10\">\n               <div className=\"relative h-[150px] w-full cursor-pointer overflow-hidden rounded-xl border border-slate-200/50 bg-white dark:border-neutral-700/50 dark:bg-neutral-900\">\n                  <motion.p\n                     variants={variant2}\n                     className=\"absolute left-5 top-5 w-fit text-[15px]\"\n                  >\n                     +245%\n                  </motion.p>\n                  <motion.svg\n                     variants={variant1}\n                     xmlns=\"http://www.w3.org/2000/svg\"\n                     fill=\"none\"\n                     preserveAspectRatio=\"none\"\n                     className=\"absolute inset-0 size-full\"\n                     viewBox=\"0 -950 366 1408\"\n                  >\n                     <path\n                        fill=\"url(#a)\"\n                        d=\"M0 193c109.5 0 260.5-52.5 366-192.5v907H0V193Z\"\n                     />\n                     <defs>\n                        <linearGradient\n                           id=\"a\"\n                           x1={183}\n                           x2={183}\n                           y1={0.5}\n                           y2={262}\n                           gradientUnits=\"userSpaceOnUse\"\n                        >\n                           <stop stopColor=\"#22c55e\" />\n                           <stop offset={1} stopColor=\"#15803d\" />\n                        </linearGradient>\n                     </defs>\n                  </motion.svg>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Growth</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Invest and watch your money grow\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-feature-card-6.json b/apps/web/public/v0/styles/miami/animated-feature-card-6.json
new file mode 100644
index 00000000..e96792cd
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-feature-card-6.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-6",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-6.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard6() {\n   const variant1 = {\n      initial: {\n         y: 0,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 25,\n         x: 10,\n         scale: 1,\n         rotate: -2,\n         boxShadow:\n            \"rgba(39,127,245,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 0,\n         scale: 0.95,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -25,\n         x: -10,\n         scale: 1,\n         rotate: 3,\n         boxShadow:\n            \"rgba(39,245,76,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex h-[300px] w-full items-center justify-center rounded-t-xl bg-transparent \">\n               <div className=\"relative flex cursor-pointer flex-col items-center justify-center gap-y-2 p-14\">\n                  <motion.div\n                     variants={variant1}\n                     className=\"dark:bg-neutral-980 z-[3] flex size-full items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\"absolute bottom-14 z-[2] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-8 rounded-full bg-pink-300\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/jack\"\n                           alt=\"jack\"\n                        />\n                     </div>\n                     <div className=\"flex flex-col gap-y-2\">\n                        <div className=\"h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-20 rounded-full bg-slate-400/50\"></div>\n                        <div className=\"h-2 w-48 rounded-full bg-slate-400/50\"></div>\n                     </div>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Share</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Share results with your friends\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-feature-card-7.json b/apps/web/public/v0/styles/miami/animated-feature-card-7.json
new file mode 100644
index 00000000..17c2ab00
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-feature-card-7.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-7",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-7.tsx",
+      "content": "\"use client\"\n\nimport { motion, useAnimation, useInView } from \"framer-motion\"\nimport {\n   BarChart,\n   File,\n   Globe,\n   HeartHandshake,\n   Rss,\n   Shield,\n} from \"lucide-react\"\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport Marquee from \"@/components/ui/marquee\"\n\nconst tiles = [\n   {\n      icon: <HeartHandshake className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Globe className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <File className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-green-500 via-teal-500 to-emerald-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Shield className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <Rss className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n   {\n      icon: <BarChart className=\"size-full\" />,\n      bg: (\n         <div className=\"pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-gray-600 via-gray-500 to-gray-400 opacity-70 blur-[20px]\"></div>\n      ),\n   },\n]\n\nfunction shuffleArray(array: any[]) {\n   let currentIndex = array.length\n   let randomIndex\n   // While there remain elements to shuffle.\n   while (currentIndex !== 0) {\n      // Pick a remaining element.\n      randomIndex = Math.floor(Math.random() * currentIndex)\n      currentIndex--\n      // And swap it with the current element.\n      ;[array[currentIndex], array[randomIndex]] = [\n         array[randomIndex],\n         array[currentIndex],\n      ]\n   }\n   return array\n}\n\nfunction Card(card: { icon: JSX.Element; bg: JSX.Element }) {\n   const id = useId()\n   const controls = useAnimation()\n   const ref = useRef(null)\n   const inView = useInView(ref, { once: true })\n\n   useEffect(() => {\n      if (inView) {\n         controls.start({\n            opacity: 1,\n            transition: {\n               delay: Math.random() * 2,\n               ease: \"easeOut\",\n               duration: 1,\n            },\n         })\n      }\n   }, [controls, inView])\n\n   return (\n      <motion.div\n         key={id}\n         ref={ref}\n         initial={{ opacity: 0 }}\n         animate={controls}\n         className={cn(\n            \"relative size-20 cursor-pointer overflow-hidden rounded-2xl border p-4\",\n            // light styles\n            \"bg-white\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         {card.icon}\n         {card.bg}\n      </motion.div>\n   )\n}\n\nexport default function FeatureCard7() {\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n   const [randomTiles1] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles2] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles3] = useState(() => shuffleArray([...tiles]))\n   const [randomTiles4] = useState(() => shuffleArray([...tiles]))\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"group relative flex h-[300px] w-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl p-4\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 px-10\">\n                  <Marquee\n                     reverse\n                     className=\"-delay-[200ms] [--duration:20s]\"\n                     repeat={4}\n                  >\n                     {randomTiles1.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee reverse className=\"[--duration:30s]\" repeat={4}>\n                     {randomTiles2.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee\n                     reverse\n                     className=\"-delay-[200ms] [--duration:20s]\"\n                     repeat={4}\n                  >\n                     {randomTiles3.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <Marquee reverse className=\"[--duration:30s]\" repeat={4}>\n                     {randomTiles4.map((review, idx) => (\n                        <Card key={idx} {...review} />\n                     ))}\n                  </Marquee>\n                  <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n                  <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Integrations</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Integrate with all your favourite apps\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-feature-card-8.json b/apps/web/public/v0/styles/miami/animated-feature-card-8.json
new file mode 100644
index 00000000..130d3269
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-feature-card-8.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-8",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-8.tsx",
+      "content": "\"use client\"\n\nimport { cubicBezier, motion } from \"framer-motion\"\n\nexport default function FeatureCard8() {\n   const variant1 = {\n      initial: {\n         y: 0,\n         scale: 0.97,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: -45,\n         scale: 1,\n         boxShadow:\n            \"rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant2 = {\n      initial: {\n         y: 30,\n         opacity: 0,\n         scale: 0.97,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         y: 10,\n         opacity: 1,\n         scale: 1,\n         boxShadow:\n            \"rgba(245,40,145,0.05) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n   const variant3 = {\n      initial: {\n         x: 30,\n         y: 20,\n         opacity: 0,\n         transition: {\n            delay: 0,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n      whileHover: {\n         x: 5,\n         y: 5,\n         opacity: 1,\n         boxShadow:\n            \"rgba(39,245,76,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px\",\n         transition: {\n            delay: 0.05,\n            duration: 0.2,\n            ease: cubicBezier(0.22, 1, 0.36, 1),\n         },\n      },\n   }\n\n   const containerVariants = {\n      initial: {},\n      whileHover: {\n         transition: {\n            staggerChildren: 0.1,\n         },\n      },\n   }\n\n   return (\n      <div className=\"relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <motion.div\n            variants={containerVariants}\n            initial=\"initial\"\n            whileHover=\"whileHover\"\n            className=\"flex size-full cursor-pointer flex-col items-start justify-between\"\n         >\n            <div className=\"flex size-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl bg-transparent\">\n               <div className=\"relative flex flex-col items-center justify-center gap-y-2 px-10 py-20\">\n                  <motion.div\n                     variants={variant1}\n                     className=\" relative flex items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"size-6 rounded-full bg-blue-500\">\n                        <img\n                           className=\"size-full rounded-full object-cover\"\n                           src=\"https://avatar.vercel.sh/joshua\"\n                           alt=\"joshua\"\n                        />\n                     </div>\n                     <div className=\"w-[calc(100%-3rem)]\">\n                        <h3 className=\"text-base font-semibold\">Mary</h3>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                           I think the design can be improved\n                        </p>\n                     </div>\n                  </motion.div>\n                  <motion.div\n                     variants={variant2}\n                     className=\" absolute inset-10 -bottom-14 z-[3] m-auto flex h-fit items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900\"\n                  >\n                     <div className=\"w-8 \">\n                        <div className=\"size-6 rounded-full bg-blue-500\">\n                           <img\n                              className=\"size-full rounded-full object-cover\"\n                              src=\"https://avatar.vercel.sh/christina\"\n                              alt=\"christina\"\n                           />\n                        </div>\n                     </div>\n                     <div className=\"w-[calc(100%-3rem)]\">\n                        <h3 className=\"text-base font-semibold\">Joshua</h3>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                           On it ✅\n                        </p>\n                     </div>\n                     <motion.p\n                        variants={variant3}\n                        className=\"highlighted absolute -bottom-2 right-2 w-fit rounded-full border bg-cyan-500 px-2 py-0.5 text-xs text-white\"\n                     >\n                        sent\n                     </motion.p>\n                  </motion.div>\n               </div>\n            </div>\n            <div className=\"flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800\">\n               <h2 className=\"text-xl font-semibold\">Reply</h2>\n               <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n                  Reply to other creators in app\n               </p>\n            </div>\n         </motion.div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-feature-card-9.json b/apps/web/public/v0/styles/miami/animated-feature-card-9.json
new file mode 100644
index 00000000..1f389fc5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-feature-card-9.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-feature-card-9",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-feature-card-9.tsx",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport type { ReactElement } from \"react\"\nimport React, { useEffect, useMemo, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const AnimatedList = React.memo(\n   ({\n      className,\n      children,\n      delay = 1000,\n   }: {\n      className?: string\n      children: React.ReactNode\n      delay?: number\n   }) => {\n      const [index, setIndex] = useState(0)\n      const childrenArray = React.Children.toArray(children)\n\n      useEffect(() => {\n         const interval = setInterval(() => {\n            setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n         }, delay)\n\n         return () => clearInterval(interval)\n      }, [childrenArray.length, delay])\n\n      const itemsToShow = useMemo(\n         () => childrenArray.slice(0, index + 1).reverse(),\n         [index, childrenArray],\n      )\n\n      return (\n         <div className={`flex flex-col items-center gap-4 ${className}`}>\n            <AnimatePresence>\n               {itemsToShow.map((item) => (\n                  <AnimatedListItem key={(item as ReactElement).key}>\n                     {item}\n                  </AnimatedListItem>\n               ))}\n            </AnimatePresence>\n         </div>\n      )\n   },\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n   const animations = {\n      initial: { scale: 0, opacity: 0 },\n      animate: { scale: 1, opacity: 1, originY: 0 },\n      exit: { scale: 0, opacity: 0 },\n      transition: { type: \"spring\", stiffness: 350, damping: 40 },\n   }\n\n   return (\n      <motion.div {...animations} layout className=\"mx-auto w-full\">\n         {children}\n      </motion.div>\n   )\n}\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: \"Payment received\",\n      description: \"Nyxb UI\",\n      time: \"15m ago\",\n\n      icon: \"💸\",\n      color: \"#00C9A7\",\n   },\n   {\n      name: \"User signed up\",\n      description: \"Nyxb UI\",\n      time: \"10m ago\",\n      icon: \"👤\",\n      color: \"#FFB800\",\n   },\n   {\n      name: \"New message\",\n      description: \"Nyxb UI\",\n      time: \"5m ago\",\n      icon: \"💬\",\n      color: \"#FF3D71\",\n   },\n   {\n      name: \"New event\",\n      description: \"Nyxb UI\",\n      time: \"2m ago\",\n      icon: \"🗞️\",\n      color: \"#1E86FF\",\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={cn(\n            \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-lg p-4\",\n            // animation styles\n            \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nexport default function FeatureCard9() {\n   return (\n      <div className=\"relative flex size-full max-h-[500px] min-h-[500px] max-w-lg transform-gpu flex-col justify-between overflow-hidden rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\">\n         <div className=\"flex items-center justify-center overflow-hidden\">\n            <AnimatedList>\n               {notifications.map((item, idx) => (\n                  <Notification {...item} key={idx} />\n               ))}\n            </AnimatedList>\n         </div>\n         <div className=\"flex flex-col items-start gap-y-1 border-t p-4 dark:border-neutral-800\">\n            <h2 className=\"text-xl font-semibold\">Notifications</h2>\n            <p className=\"text-base font-normal text-neutral-500 dark:text-neutral-400\">\n               Get realtime notifications for events you subscribe too\n            </p>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-gradient-text-demo.json b/apps/web/public/v0/styles/miami/animated-gradient-text-demo.json
new file mode 100644
index 00000000..9303a85f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-gradient-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-gradient-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-gradient-text-demo.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport AnimatedGradientText from \"@/components/ui/animated-gradient-text\"\n\nexport default async function AnimatedGradientTextDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <AnimatedGradientText>\n            🎉 <hr className=\"mx-2 h-4 w-px shrink-0 bg-gray-300\" />{\" \"}\n            <span\n               className={cn(\n                  `animate-gradient inline bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,\n               )}\n            >\n               Introducing Nyxb UI\n            </span>\n            <ChevronRight className=\"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n         </AnimatedGradientText>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-gradient-text.json b/apps/web/public/v0/styles/miami/animated-gradient-text.json
new file mode 100644
index 00000000..f92274a0
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-gradient-text.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-gradient-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/animated-gradient-text.tsx",
+      "content": "import type { ReactNode } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport default function AnimatedGradientText({\n   children,\n   className,\n}: {\n   children: ReactNode\n   className?: string\n}) {\n   return (\n      <div\n         className={cn(\n            \"group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40\",\n            className,\n         )}\n      >\n         <div className=\"animate-gradient absolute inset-0 block size-full bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-px ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]\" />\n\n         {children}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "gradient": "gradient 8s linear infinite"
+          },
+          "keyframes": {
+            "gradient": {
+              "to": {
+                "backgroundPosition": "var(--bg-size) 0"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-grid-pattern-demo.json b/apps/web/public/v0/styles/miami/animated-grid-pattern-demo.json
new file mode 100644
index 00000000..411f6d69
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-grid-pattern-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-grid-pattern-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-grid-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { GridPattern } from \"@/components/ui/grid-pattern\"\n\nexport default function GridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            squares={[\n               [4, 4],\n               [5, 1],\n               [8, 2],\n               [5, 3],\n               [5, 5],\n               [10, 10],\n               [12, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n            ]}\n            className={cn(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n               \"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-grid-pattern.json b/apps/web/public/v0/styles/miami/animated-grid-pattern.json
new file mode 100644
index 00000000..0b26cd37
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-grid-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-grid-pattern",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/animated-grid-pattern.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"motion/react\"\nimport {\n   type ComponentPropsWithoutRef,\n   useEffect,\n   useId,\n   useRef,\n   useState,\n} from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface AnimatedGridPatternProps\n   extends ComponentPropsWithoutRef<\"svg\"> {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   strokeDasharray?: any\n   numSquares?: number\n   maxOpacity?: number\n   duration?: number\n   repeatDelay?: number\n}\n\nexport function AnimatedGridPattern({\n   width = 40,\n   height = 40,\n   x = -1,\n   y = -1,\n   strokeDasharray = 0,\n   numSquares = 50,\n   className,\n   maxOpacity = 0.5,\n   duration = 4,\n   repeatDelay = 0.5,\n   ...props\n}: AnimatedGridPatternProps) {\n   const id = useId()\n   const containerRef = useRef(null)\n   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n   const [squares, setSquares] = useState(() => generateSquares(numSquares))\n\n   function getPos() {\n      return [\n         Math.floor((Math.random() * dimensions.width) / width),\n         Math.floor((Math.random() * dimensions.height) / height),\n      ]\n   }\n\n   // Adjust the generateSquares function to return objects with an id, x, and y\n   function generateSquares(count: number) {\n      return Array.from({ length: count }, (_, i) => ({\n         id: i,\n         pos: getPos(),\n      }))\n   }\n\n   // Function to update a single square's position\n   const updateSquarePosition = (id: number) => {\n      setSquares((currentSquares) =>\n         currentSquares.map((sq) =>\n            sq.id === id\n               ? {\n                    ...sq,\n                    pos: getPos(),\n                 }\n               : sq,\n         ),\n      )\n   }\n\n   // Update squares to animate in\n   useEffect(() => {\n      if (dimensions.width && dimensions.height) {\n         setSquares(generateSquares(numSquares))\n      }\n   }, [dimensions, numSquares])\n\n   // Resize observer to update container dimensions\n   useEffect(() => {\n      const resizeObserver = new ResizeObserver((entries) => {\n         for (const entry of entries) {\n            setDimensions({\n               width: entry.contentRect.width,\n               height: entry.contentRect.height,\n            })\n         }\n      })\n\n      if (containerRef.current) {\n         resizeObserver.observe(containerRef.current)\n      }\n\n      return () => {\n         if (containerRef.current) {\n            resizeObserver.unobserve(containerRef.current)\n         }\n      }\n   }, [containerRef])\n\n   return (\n      <svg\n         ref={containerRef}\n         aria-hidden=\"true\"\n         className={cn(\n            \"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30\",\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <path\n                  d={`M.5 ${height}V.5H${width}`}\n                  fill=\"none\"\n                  strokeDasharray={strokeDasharray}\n               />\n            </pattern>\n         </defs>\n         <rect width=\"100%\" height=\"100%\" fill={`url(#${id})`} />\n         <svg x={x} y={y} className=\"overflow-visible\">\n            {squares.map(({ pos: [x, y], id }, index) => (\n               <motion.rect\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: maxOpacity }}\n                  transition={{\n                     duration,\n                     repeat: 1,\n                     delay: index * 0.1,\n                     repeatType: \"reverse\",\n                  }}\n                  onAnimationComplete={() => updateSquarePosition(id)}\n                  key={`${x}-${y}-${index}`}\n                  width={width - 1}\n                  height={height - 1}\n                  x={x * width + 1}\n                  y={y * height + 1}\n                  fill=\"currentColor\"\n                  strokeWidth=\"0\"\n               />\n            ))}\n         </svg>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-list-demo.json b/apps/web/public/v0/styles/miami/animated-list-demo.json
new file mode 100644
index 00000000..ad020890
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-list-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-list-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-list-demo.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedList } from \"@/components/ui/animated-list\"\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: \"Payment received\",\n      description: \"Nyxb UI\",\n      time: \"15m ago\",\n\n      icon: \"💸\",\n      color: \"#00C9A7\",\n   },\n   {\n      name: \"User signed up\",\n      description: \"Nyxb UI\",\n      time: \"10m ago\",\n      icon: \"👤\",\n      color: \"#FFB800\",\n   },\n   {\n      name: \"New message\",\n      description: \"Nyxb UI\",\n      time: \"5m ago\",\n      icon: \"💬\",\n      color: \"#FF3D71\",\n   },\n   {\n      name: \"New event\",\n      description: \"Nyxb UI\",\n      time: \"2m ago\",\n      icon: \"🗞️\",\n      color: \"#1E86FF\",\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={cn(\n            \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4\",\n            // animation styles\n            \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nexport default function AnimatedListDemo() {\n   return (\n      <div className=\"bg-background relative flex max-h-[400px] min-h-[400px] w-full max-w-lg flex-col overflow-hidden rounded-lg border p-6 shadow-lg\">\n         <AnimatedList>\n            {notifications.map((item, idx) => (\n               <Notification {...item} key={idx} />\n            ))}\n         </AnimatedList>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-list.json b/apps/web/public/v0/styles/miami/animated-list.json
new file mode 100644
index 00000000..020ba218
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-list.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-list",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/animated-list.tsx",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport type { ReactElement } from \"react\"\nimport React, { useEffect, useMemo, useState } from \"react\"\n\nexport const AnimatedList = React.memo(\n   ({\n      className,\n      children,\n      delay = 1000,\n   }: {\n      className?: string\n      children: React.ReactNode\n      delay?: number\n   }) => {\n      const [index, setIndex] = useState(0)\n      const childrenArray = React.Children.toArray(children)\n\n      useEffect(() => {\n         const interval = setInterval(() => {\n            setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n         }, delay)\n\n         return () => clearInterval(interval)\n      }, [childrenArray.length, delay])\n\n      const itemsToShow = useMemo(\n         () => childrenArray.slice(0, index + 1).reverse(),\n         [index, childrenArray],\n      )\n\n      return (\n         <div className={`flex flex-col items-center gap-4 ${className}`}>\n            <AnimatePresence>\n               {itemsToShow.map((item) => (\n                  <AnimatedListItem key={(item as ReactElement).key}>\n                     {item}\n                  </AnimatedListItem>\n               ))}\n            </AnimatePresence>\n         </div>\n      )\n   },\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n   const animations = {\n      initial: { scale: 0, opacity: 0 },\n      animate: { scale: 1, opacity: 1, originY: 0 },\n      exit: { scale: 0, opacity: 0 },\n      transition: { type: \"spring\", stiffness: 350, damping: 40 },\n   }\n\n   return (\n      <motion.div {...animations} layout className=\"mx-auto w-full\">\n         {children}\n      </motion.div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-shiny-text-demo.json b/apps/web/public/v0/styles/miami/animated-shiny-text-demo.json
new file mode 100644
index 00000000..3da08e43
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-shiny-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-shiny-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-shiny-text-demo.tsx",
+      "content": "import { ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport { cn } from \"@/lib/utils\"\nimport AnimatedShinyText from \"@/components/ui/animated-shiny-text\"\n\nexport default async function AnimatedShinyTextDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <div\n            className={cn(\n               \"group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800\",\n            )}\n         >\n            <AnimatedShinyText className=\"inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400\">\n               <span>✨ Introducing Nyxb UI</span>\n               <ArrowRightIcon className=\"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n            </AnimatedShinyText>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-shiny-text.json b/apps/web/public/v0/styles/miami/animated-shiny-text.json
new file mode 100644
index 00000000..902c7b33
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-shiny-text.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-shiny-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/animated-shiny-text.tsx",
+      "content": "import type { CSSProperties, FC, ReactNode } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface AnimatedShinyTextProps {\n   children: ReactNode\n   className?: string\n   shimmerWidth?: number\n}\n\nconst AnimatedShinyText: FC<AnimatedShinyTextProps> = ({\n   children,\n   className,\n   shimmerWidth = 100,\n}) => {\n   return (\n      <p\n         style={\n            {\n               \"--shimmer-width\": `${shimmerWidth}px`,\n            } as CSSProperties\n         }\n         className={cn(\n            \"mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50 \",\n\n            // Shimmer effect\n            \"animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]\",\n\n            // Shimmer gradient\n            \"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80\",\n\n            className,\n         )}\n      >\n         {children}\n      </p>\n   )\n}\n\nexport default AnimatedShinyText\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "shiny-text": "shiny-text 8s infinite"
+          },
+          "keyframes": {
+            "shiny-text": {
+              "0%, 90%, 100%": {
+                "background-position": "calc(-100% - var(--shiny-width)) 0"
+              },
+              "30%, 60%": {
+                "background-position": "calc(100% + var(--shiny-width)) 0"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-subscribe-button-demo.json b/apps/web/public/v0/styles/miami/animated-subscribe-button-demo.json
new file mode 100644
index 00000000..801a55db
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-subscribe-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-subscribe-button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/animated-subscribe-button-demo.tsx",
+      "content": "import { CheckIcon, ChevronRightIcon } from \"lucide-react\"\nimport { AnimatedSubscribeButton } from \"@/components/ui/animated-subscribe-button\"\n\nexport default function AnimatedSubscribeButtonDemo() {\n   return (\n      <AnimatedSubscribeButton\n         buttonColor=\"#000000\"\n         buttonTextColor=\"#ffffff\"\n         subscribeStatus={false}\n         initialText={\n            <span className=\"group inline-flex items-center\">\n               Subscribe{\" \"}\n               <ChevronRightIcon className=\"ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1\" />\n            </span>\n         }\n         changeText={\n            <span className=\"group inline-flex items-center\">\n               <CheckIcon className=\"mr-2 size-4\" />\n               Subscribed{\" \"}\n            </span>\n         }\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/animated-subscribe-button.json b/apps/web/public/v0/styles/miami/animated-subscribe-button.json
new file mode 100644
index 00000000..08483c98
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/animated-subscribe-button.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "animated-subscribe-button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/animated-subscribe-button.tsx",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport type React from \"react\"\nimport { useState } from \"react\"\n\ninterface AnimatedSubscribeButtonProps {\n   buttonColor: string\n   buttonTextColor?: string\n   subscribeStatus: boolean\n   initialText: React.ReactElement | string\n   changeText: React.ReactElement | string\n}\n\nexport const AnimatedSubscribeButton: React.FC<\n   AnimatedSubscribeButtonProps\n> = ({\n   buttonColor,\n   subscribeStatus,\n   buttonTextColor,\n   changeText,\n   initialText,\n}) => {\n   const [isSubscribed, setIsSubscribed] = useState<boolean>(subscribeStatus)\n\n   return (\n      <AnimatePresence mode=\"wait\">\n         {isSubscribed ? (\n            <motion.button\n               className=\"relative flex h-[46px] w-[200px] items-center justify-center overflow-hidden rounded-md bg-white p-[10px] outline outline-1 outline-black\"\n               onClick={() => setIsSubscribed(false)}\n               initial={{ opacity: 0 }}\n               animate={{ opacity: 1 }}\n               exit={{ opacity: 0 }}\n            >\n               <motion.span\n                  key=\"action\"\n                  className=\"relative block size-full font-semibold\"\n                  initial={{ y: -50 }}\n                  animate={{ y: 0 }}\n                  style={{ color: buttonColor }}\n               >\n                  {changeText}\n               </motion.span>\n            </motion.button>\n         ) : (\n            <motion.button\n               className=\"relative flex w-[200px] cursor-pointer items-center justify-center rounded-md border-none p-[10px]\"\n               style={{ backgroundColor: buttonColor, color: buttonTextColor }}\n               onClick={() => setIsSubscribed(true)}\n               initial={{ opacity: 0 }}\n               animate={{ opacity: 1 }}\n               exit={{ opacity: 0 }}\n            >\n               <motion.span\n                  key=\"reaction\"\n                  className=\"relative block font-semibold\"\n                  initial={{ x: 0 }}\n                  exit={{ x: 50, transition: { duration: 0.1 } }}\n               >\n                  {initialText}\n               </motion.span>\n            </motion.button>\n         )}\n      </AnimatePresence>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/aspect-ratio-demo.json b/apps/web/public/v0/styles/miami/aspect-ratio-demo.json
new file mode 100644
index 00000000..4b86047b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/aspect-ratio-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "aspect-ratio-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "examples/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n   return (\n      <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n         <Image\n            src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n            alt=\"Photo by Drew Beamer\"\n            fill\n            className=\"rounded-md object-cover\"\n         />\n      </AspectRatio>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/aspect-ratio.json b/apps/web/public/v0/styles/miami/aspect-ratio.json
new file mode 100644
index 00000000..6dc321c9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/aspect-ratio.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "ui/aspect-ratio.tsx",
+      "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/aurora-text-demo.json b/apps/web/public/v0/styles/miami/aurora-text-demo.json
new file mode 100644
index 00000000..bf2a1497
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/aurora-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "aurora-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/aurora-text-demo.tsx",
+      "content": "import { AuroraText } from \"@/components/ui/aurora-text\"\n\nexport default function AuroraTextDemo() {\n   return (\n      <h1 className=\"text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl\">\n         Ship <AuroraText>beautiful</AuroraText>\n      </h1>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/aurora-text.json b/apps/web/public/v0/styles/miami/aurora-text.json
new file mode 100644
index 00000000..425c81c5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/aurora-text.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "aurora-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/aurora-text.tsx",
+      "content": "import { type MotionProps, motion } from \"motion/react\"\nimport type React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface AuroraTextProps\n   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps> {\n   className?: string\n   children: React.ReactNode\n   as?: React.ElementType\n}\n\nexport function AuroraText({\n   className,\n   children,\n   as: Component = \"span\",\n   ...props\n}: AuroraTextProps) {\n   const MotionComponent = motion.create(Component)\n\n   return (\n      <MotionComponent\n         className={cn(\"relative inline-flex overflow-hidden\", className)}\n         {...props}\n      >\n         {children}\n         <span className=\"pointer-events-none absolute inset-0 mix-blend-lighten dark:mix-blend-darken\">\n            <span className=\"pointer-events-none absolute -top-1/2 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-1_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-1))] mix-blend-overlay blur-[1rem]\"></span>\n            <span className=\"pointer-events-none absolute right-0 top-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-2_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-2))] mix-blend-overlay blur-[1rem]\"></span>\n            <span className=\"pointer-events-none absolute bottom-0 left-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-3_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-3))] mix-blend-overlay blur-[1rem]\"></span>\n            <span className=\"pointer-events-none absolute -bottom-1/2 right-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-4_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-4))] mix-blend-overlay blur-[1rem]\"></span>\n         </span>\n      </MotionComponent>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "keyframes": {
+            "aurora-border": {
+              "0%, 100%": {
+                "borderRadius": "37% 29% 27% 27% / 28% 25% 41% 37%"
+              },
+              "25%": {
+                "borderRadius": "47% 29% 39% 49% / 61% 19% 66% 26%"
+              },
+              "50%": {
+                "borderRadius": "57% 23% 47% 72% / 63% 17% 66% 33%"
+              },
+              "75%": {
+                "borderRadius": "28% 49% 29% 100% / 93% 20% 64% 25%"
+              }
+            },
+            "aurora-1": {
+              "0%, 100%": {
+                "top": "0",
+                "right": "0"
+              },
+              "50%": {
+                "top": "50%",
+                "right": "25%"
+              },
+              "75%": {
+                "top": "25%",
+                "right": "50%"
+              }
+            },
+            "aurora-2": {
+              "0%, 100%": {
+                "top": "0",
+                "left": "0"
+              },
+              "60%": {
+                "top": "75%",
+                "left": "25%"
+              },
+              "85%": {
+                "top": "50%",
+                "left": "50%"
+              }
+            },
+            "aurora-3": {
+              "0%, 100%": {
+                "bottom": "0",
+                "left": "0"
+              },
+              "40%": {
+                "bottom": "50%",
+                "left": "25%"
+              },
+              "65%": {
+                "bottom": "25%",
+                "left": "50%"
+              }
+            },
+            "aurora-4": {
+              "0%, 100%": {
+                "bottom": "0",
+                "right": "0"
+              },
+              "50%": {
+                "bottom": "25%",
+                "right": "40%"
+              },
+              "90%": {
+                "bottom": "50%",
+                "right": "25%"
+              }
+            }
+          },
+          "animation": {
+            "aurora-border": "aurora-border 10s ease-in-out infinite",
+            "aurora-1": "aurora-1 15s ease-in-out infinite",
+            "aurora-2": "aurora-2 15s ease-in-out infinite",
+            "aurora-3": "aurora-3 15s ease-in-out infinite",
+            "aurora-4": "aurora-4 15s ease-in-out infinite"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/avatar-circles-demo.json b/apps/web/public/v0/styles/miami/avatar-circles-demo.json
new file mode 100644
index 00000000..f9577877
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/avatar-circles-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "avatar-circles-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/avatar-circles-demo.tsx",
+      "content": "import AvatarCircles from \"@/components/ui/avatar-circles\"\n\nconst avatarUrls = [\n   \"https://avatars.githubusercontent.com/u/98586665\",\n   \"https://avatars.githubusercontent.com/u/20110627\",\n   \"https://avatars.githubusercontent.com/u/106103625\",\n   \"https://avatars.githubusercontent.com/u/59228569\",\n]\n\nexport default async function AvatarCirclesDemo() {\n   return <AvatarCircles numPeople={99} avatarUrls={avatarUrls} />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/avatar-circles.json b/apps/web/public/v0/styles/miami/avatar-circles.json
new file mode 100644
index 00000000..6a3c18c1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/avatar-circles.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "avatar-circles",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/avatar-circles.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface AvatarCirclesProps {\n   className?: string\n   numPeople?: number\n   avatarUrls: string[]\n}\n\nfunction AvatarCircles({\n   numPeople,\n   className,\n   avatarUrls,\n}: AvatarCirclesProps) {\n   return (\n      <div\n         className={cn(\"z-10 flex -space-x-4 rtl:space-x-reverse\", className)}\n      >\n         {avatarUrls.map((url, index) => (\n            <img\n               key={index}\n               className=\"size-10 rounded-full border-2 border-white dark:border-gray-800\"\n               src={url}\n               width={40}\n               height={40}\n               alt={`Avatar ${index + 1}`}\n            />\n         ))}\n         <a\n            className=\"flex size-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black\"\n            href=\"\"\n         >\n            +{numPeople}\n         </a>\n      </div>\n   )\n}\n\nexport default AvatarCircles\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/avatar-demo.json b/apps/web/public/v0/styles/miami/avatar-demo.json
new file mode 100644
index 00000000..b04be465
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/avatar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "avatar-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "examples/avatar-demo.tsx",
+      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\n\nexport default function AvatarDemo() {\n   return (\n      <Avatar>\n         <AvatarImage src=\"https://github.com/nyxb.png\" alt=\"@nyxb\" />\n         <AvatarFallback>NY</AvatarFallback>\n      </Avatar>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/avatar.json b/apps/web/public/v0/styles/miami/avatar.json
new file mode 100644
index 00000000..d0bcb629
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/avatar.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "avatar",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-avatar"
+  ],
+  "files": [
+    {
+      "path": "ui/avatar.tsx",
+      "content": "\"use client\"\n\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Avatar = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Root\n      ref={ref}\n      className={cn(\n         \"relative flex size-10 shrink-0 overflow-hidden rounded-full\",\n         className,\n      )}\n      {...props}\n   />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Image>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"aspect-square size-full\", className)}\n      {...props}\n   />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n   React.ElementRef<typeof AvatarPrimitive.Fallback>,\n   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n   <AvatarPrimitive.Fallback\n      ref={ref}\n      className={cn(\n         \"bg-muted flex size-full items-center justify-center rounded-full\",\n         className,\n      )}\n      {...props}\n   />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/badge-demo.json b/apps/web/public/v0/styles/miami/badge-demo.json
new file mode 100644
index 00000000..2a02192d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/badge-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "badge-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-demo.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport default function BadgeDemo() {\n   return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/badge-destructive.json b/apps/web/public/v0/styles/miami/badge-destructive.json
new file mode 100644
index 00000000..d0a32dd5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/badge-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "badge-destructive",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport default function BadgeDestructive() {\n   return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/badge-outline.json b/apps/web/public/v0/styles/miami/badge-outline.json
new file mode 100644
index 00000000..2094e503
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/badge-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "badge-outline",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-outline.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport default function BadgeOutline() {\n   return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/badge-secondary.json b/apps/web/public/v0/styles/miami/badge-secondary.json
new file mode 100644
index 00000000..6f94b824
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/badge-secondary.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "badge-secondary",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport default function BadgeSecondary() {\n   return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/badge.json b/apps/web/public/v0/styles/miami/badge.json
new file mode 100644
index 00000000..41d57a5c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/badge.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "badge",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/badge.tsx",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\"\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n   \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n   {\n      variants: {\n         variant: {\n            default:\n               \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n            secondary:\n               \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n            destructive:\n               \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n            outline: \"text-foreground\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nexport interface BadgeProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n   return (\n      <div className={cn(badgeVariants({ variant }), className)} {...props} />\n   )\n}\n\nexport { Badge, badgeVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/bento-demo-vertical.json b/apps/web/public/v0/styles/miami/bento-demo-vertical.json
new file mode 100644
index 00000000..f188e635
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/bento-demo-vertical.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "bento-demo-vertical",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/bento-demo-vertical.tsx",
+      "content": "import {\n   BellIcon,\n   CalendarIcon,\n   FileTextIcon,\n   GlobeIcon,\n   InputIcon,\n} from \"@radix-ui/react-icons\"\nimport { BentoCard, BentoGrid } from \"@/components/ui/bento-grid\"\n\nconst features = [\n   {\n      Icon: FileTextIcon,\n      name: \"Save your files\",\n      description: \"We automatically save your files as you type.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3\",\n   },\n   {\n      Icon: InputIcon,\n      name: \"Full text search\",\n      description: \"Search through all your files in one place.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3\",\n   },\n   {\n      Icon: GlobeIcon,\n      name: \"Multilingual\",\n      description: \"Supports 100+ languages and counting.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4\",\n   },\n   {\n      Icon: CalendarIcon,\n      name: \"Calendar\",\n      description: \"Use the calendar to filter your files by date.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2\",\n   },\n   {\n      Icon: BellIcon,\n      name: \"Notifications\",\n      description:\n         \"Get notified when someone shares a file or mentions you in a comment.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: <img className=\"absolute -right-20 -top-20 opacity-60\" />,\n      className: \"lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4\",\n   },\n]\n\nexport default async function BentoDemo() {\n   return (\n      <BentoGrid className=\"lg:grid-rows-3\">\n         {features.map((feature) => (\n            <BentoCard key={feature.name} {...feature} />\n         ))}\n      </BentoGrid>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/bento-demo.json b/apps/web/public/v0/styles/miami/bento-demo.json
new file mode 100644
index 00000000..6560b462
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/bento-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "bento-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/bento-demo.tsx",
+      "content": "import { CalendarIcon, FileTextIcon, InputIcon } from \"@radix-ui/react-icons\"\nimport { Share2Icon } from \"lucide-react\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport { cn } from \"@/lib/utils\"\nimport AnimatedBeamMultipleOutputDemo from \"~/registry/miami/examples/animated-beam-multiple-outputs\"\nimport { BentoCard, BentoGrid } from \"@/components/ui/bento-grid\"\nimport Marquee from \"@/components/ui/marquee\"\n\nconst files = [\n   {\n      name: \"bitcoin.pdf\",\n      body: \"Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.\",\n   },\n   {\n      name: \"finances.xlsx\",\n      body: \"A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.\",\n   },\n   {\n      name: \"logo.svg\",\n      body: \"Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.\",\n   },\n   {\n      name: \"keys.gpg\",\n      body: \"GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.\",\n   },\n   {\n      name: \"seed.txt\",\n      body: \"A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.\",\n   },\n]\n\ninterface Item {\n   name: string\n   description: string\n   icon: string\n   color: string\n   time: string\n}\n\nlet notifications = [\n   {\n      name: \"Payment received\",\n      description: \"Nyxb UI\",\n      time: \"15m ago\",\n\n      icon: \"💸\",\n      color: \"#00C9A7\",\n   },\n   {\n      name: \"User signed up\",\n      description: \"Nyxb UI\",\n      time: \"10m ago\",\n      icon: \"👤\",\n      color: \"#FFB800\",\n   },\n   {\n      name: \"New message\",\n      description: \"Nyxb UI\",\n      time: \"5m ago\",\n      icon: \"💬\",\n      color: \"#FF3D71\",\n   },\n   {\n      name: \"New event\",\n      description: \"Nyxb UI\",\n      time: \"2m ago\",\n      icon: \"🗞️\",\n      color: \"#1E86FF\",\n   },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nfunction Notification({ name, description, icon, color, time }: Item) {\n   return (\n      <figure\n         className={cn(\n            \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4\",\n            // animation styles\n            \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-3\">\n            <div\n               className=\"flex size-10 items-center justify-center rounded-2xl\"\n               style={{\n                  backgroundColor: color,\n               }}\n            >\n               <span className=\"text-lg\">{icon}</span>\n            </div>\n            <div className=\"flex flex-col overflow-hidden\">\n               <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n                  <span className=\"text-sm sm:text-lg\">{name}</span>\n                  <span className=\"mx-1\">·</span>\n                  <span className=\"text-xs text-gray-500\">{time}</span>\n               </figcaption>\n               <p className=\"text-sm font-normal dark:text-white/60\">\n                  {description}\n               </p>\n            </div>\n         </div>\n      </figure>\n   )\n}\n\nconst features = [\n   {\n      Icon: FileTextIcon,\n      name: \"Save your files\",\n      description: \"We automatically save your files as you type.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      className: \"col-span-3 lg:col-span-1\",\n      background: (\n         <Marquee\n            pauseOnHover\n            className=\"absolute top-10 [--duration:20s] [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] \"\n         >\n            {files.map((f, idx) => (\n               <figure\n                  key={idx}\n                  className={cn(\n                     \"relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4\",\n                     \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n                     \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n                     \"transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none\",\n                  )}\n               >\n                  <div className=\"flex flex-row items-center gap-2\">\n                     <div className=\"flex flex-col\">\n                        <figcaption className=\"text-sm font-medium dark:text-white \">\n                           {f.name}\n                        </figcaption>\n                     </div>\n                  </div>\n                  <blockquote className=\"mt-2 text-xs\">{f.body}</blockquote>\n               </figure>\n            ))}\n         </Marquee>\n      ),\n   },\n   {\n      Icon: InputIcon,\n      name: \"Full text search\",\n      description: \"Search through all your files in one place.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      className: \"col-span-3 lg:col-span-2\",\n      background: (\n         <Command className=\"absolute right-10 top-10 w-[70%] origin-top translate-x-0 border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:-translate-x-10\">\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n               <CommandEmpty>No results found.</CommandEmpty>\n               <CommandGroup heading=\"Suggestions\">\n                  <CommandItem>screenshot.png</CommandItem>\n                  <CommandItem>bitcoin.pdf</CommandItem>\n                  <CommandItem>finances.xlsx</CommandItem>\n                  <CommandItem>logo.svg</CommandItem>\n                  <CommandItem>keys.gpg</CommandItem>\n                  <CommandItem>seed.txt</CommandItem>\n               </CommandGroup>\n            </CommandList>\n         </Command>\n      ),\n   },\n   {\n      Icon: Share2Icon,\n      name: \"Integrations\",\n      description: \"Supports 100+ integrations and counting.\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      className: \"col-span-3 lg:col-span-2\",\n      background: (\n         <AnimatedBeamMultipleOutputDemo className=\"absolute right-2 top-4 h-[300px] w-[600px] border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105\" />\n      ),\n   },\n   {\n      Icon: CalendarIcon,\n      name: \"Calendar\",\n      description: \"Use the calendar to filter your files by date.\",\n      className: \"col-span-3 lg:col-span-1\",\n      href: \"/docs\",\n      cta: \"Learn more\",\n      background: (\n         <Calendar\n            mode=\"single\"\n            selected={new Date(2022, 4, 11, 0, 0, 0)}\n            className=\"absolute right-0 top-10 origin-top rounded-md border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:scale-105\"\n         />\n      ),\n   },\n]\n\nexport default function BentoDemo() {\n   return (\n      <BentoGrid>\n         {features.map((feature, idx) => (\n            <BentoCard key={idx} {...feature} />\n         ))}\n      </BentoGrid>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/bento-grid.json b/apps/web/public/v0/styles/miami/bento-grid.json
new file mode 100644
index 00000000..db0068ad
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/bento-grid.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "bento-grid",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-icons"
+  ],
+  "files": [
+    {
+      "path": "ui/bento-grid.tsx",
+      "content": "import { ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport type { ReactNode } from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nfunction BentoGrid({\n   children,\n   className,\n}: {\n   children: ReactNode\n   className?: string\n}) {\n   return (\n      <div\n         className={cn(\n            \"grid w-full auto-rows-[22rem] grid-cols-3 gap-4\",\n            className,\n         )}\n      >\n         {children}\n      </div>\n   )\n}\n\nfunction BentoCard({\n   name,\n   className,\n   background,\n   Icon,\n   description,\n   href,\n   cta,\n}: {\n   name: string\n   className: string\n   background: ReactNode\n   Icon: any\n   description: string\n   href: string\n   cta: string\n}) {\n   return (\n      <div\n         key={name}\n         className={cn(\n            \"group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl\",\n            // light styles\n            \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n            // dark styles\n            \"transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n            className,\n         )}\n      >\n         <div>{background}</div>\n         <div className=\"pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10\">\n            <Icon className=\"size-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75\" />\n            <h3 className=\"text-xl font-semibold text-neutral-700 dark:text-neutral-300\">\n               {name}\n            </h3>\n            <p className=\"max-w-lg text-neutral-400\">{description}</p>\n         </div>\n\n         <div\n            className={cn(\n               \"pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100\",\n            )}\n         >\n            <Button\n               variant=\"ghost\"\n               asChild\n               size=\"sm\"\n               className=\"pointer-events-auto\"\n            >\n               <a href={href}>\n                  {cta}\n                  <ArrowRightIcon className=\"ml-2 size-4\" />\n               </a>\n            </Button>\n         </div>\n         <div className=\"pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10\" />\n      </div>\n   )\n}\n\nexport { BentoCard, BentoGrid }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/blur-fade-demo.json b/apps/web/public/v0/styles/miami/blur-fade-demo.json
new file mode 100644
index 00000000..21add133
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/blur-fade-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "blur-fade-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/blur-fade-demo.tsx",
+      "content": "import BlurFade from \"@/components/ui/blur-fade\"\n\nconst images = Array.from({ length: 9 }, (_, i) => {\n   const isLandscape = i % 2 === 0\n   const width = isLandscape ? 800 : 600\n   const height = isLandscape ? 600 : 800\n   return `https://picsum.photos/seed/${i + 1}/${width}/${height}`\n})\n\nexport default function BlurFadeDemo() {\n   return (\n      <section id=\"photos\">\n         <div className=\"columns-2 gap-4 sm:columns-3\">\n            {images.map((imageUrl, idx) => (\n               <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>\n                  <img\n                     className=\"mb-4 size-full rounded-lg object-contain\"\n                     src={imageUrl}\n                     alt={`Random stock image ${idx + 1}`}\n                  />\n               </BlurFade>\n            ))}\n         </div>\n      </section>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/blur-fade-text-demo.json b/apps/web/public/v0/styles/miami/blur-fade-text-demo.json
new file mode 100644
index 00000000..deb31529
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/blur-fade-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "blur-fade-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/blur-fade-text-demo.tsx",
+      "content": "import BlurFade from \"@/components/ui/blur-fade\"\n\nexport default function BlurFadeTextDemo() {\n   return (\n      <section id=\"header\">\n         <BlurFade delay={0.25} inView>\n            <h2 className=\"text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none\">\n               Hello World 👋\n            </h2>\n         </BlurFade>\n         <BlurFade delay={0.25 * 2} inView>\n            <span className=\"text-pretty text-xl tracking-tighter sm:text-3xl xl:text-4xl/none\">\n               Nice to meet you\n            </span>\n         </BlurFade>\n      </section>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/blur-fade.json b/apps/web/public/v0/styles/miami/blur-fade.json
new file mode 100644
index 00000000..0f158a51
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/blur-fade.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "blur-fade",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/blur-fade.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion, useInView } from \"framer-motion\"\nimport { useRef } from \"react\"\n\ninterface BlurFadeProps {\n   children: React.ReactNode\n   className?: string\n   variant?: {\n      hidden: { y: number }\n      visible: { y: number }\n   }\n   duration?: number\n   delay?: number\n   yOffset?: number\n   inView?: boolean\n   inViewMargin?: `${number}px`\n   blur?: string\n}\n\nexport default function BlurFade({\n   children,\n   className,\n   variant,\n   duration = 0.4,\n   delay = 0,\n   yOffset = 6,\n   inView = false,\n   inViewMargin = \"-50px\",\n   blur = \"6px\",\n}: BlurFadeProps) {\n   const ref = useRef(null)\n   const inViewResult = useInView(ref, { once: true, margin: inViewMargin })\n   const isInView = !inView || inViewResult\n   const defaultVariants: Variants = {\n      hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },\n      visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },\n   }\n   const combinedVariants = variant || defaultVariants\n   return (\n      <AnimatePresence>\n         <motion.div\n            ref={ref}\n            initial=\"hidden\"\n            animate={isInView ? \"visible\" : \"hidden\"}\n            exit=\"hidden\"\n            variants={combinedVariants}\n            transition={{\n               delay: 0.04 + delay,\n               duration,\n               ease: \"easeOut\",\n            }}\n            className={className}\n         >\n            {children}\n         </motion.div>\n      </AnimatePresence>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/blur-in-demo.json b/apps/web/public/v0/styles/miami/blur-in-demo.json
new file mode 100644
index 00000000..c57bd480
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/blur-in-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "blur-in-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/blur-in-demo.tsx",
+      "content": "import BlurIn from \"@/components/ui/blur-in\"\n\nfunction BlurInDemo() {\n   return (\n      <BlurIn\n         word=\"Blur In\"\n         className=\"text-4xl font-bold text-black dark:text-white\"\n      />\n   )\n}\nexport default BlurInDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/blur-in.json b/apps/web/public/v0/styles/miami/blur-in.json
new file mode 100644
index 00000000..72209ed5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/blur-in.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "blur-in",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/blur-in.tsx",
+      "content": "\"use client\"\nimport { motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface BlurIntProps {\n   word: string\n   className?: string\n   variant?: {\n      hidden: { filter: string; opacity: number }\n      visible: { filter: string; opacity: number }\n   }\n   duration?: number\n}\nfunction BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {\n   const defaultVariants = {\n      hidden: { filter: \"blur(10px)\", opacity: 0 },\n      visible: { filter: \"blur(0px)\", opacity: 1 },\n   }\n   const combinedVariants = variant || defaultVariants\n\n   return (\n      <motion.h1\n         initial=\"hidden\"\n         animate=\"visible\"\n         transition={{ duration }}\n         variants={combinedVariants}\n         className={cn(\n            className,\n            \"font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]\",\n         )}\n      >\n         {word}\n      </motion.h1>\n   )\n}\n\nexport default BlurIn\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/border-beam-demo.json b/apps/web/public/v0/styles/miami/border-beam-demo.json
new file mode 100644
index 00000000..b604162c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/border-beam-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "border-beam-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/border-beam-demo.tsx",
+      "content": "import { BorderBeam } from \"@/components/ui/border-beam\"\n\nexport default function BorderBeamDemo() {\n   return (\n      <div className=\"relative rounded-xl\">\n         <img\n            src=\"/dashboard-dark.png\"\n            alt=\"Hero Image\"\n            className=\"hidden w-[700px] rounded-[inherit] border object-contain shadow-lg dark:block\"\n         />\n         <img\n            src=\"/dashboard-light.png\"\n            alt=\"Hero Image\"\n            className=\"block w-[700px] rounded-[inherit] border object-contain shadow-lg dark:hidden\"\n         />\n\n         <BorderBeam size={250} duration={12} delay={9} />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/border-beam.json b/apps/web/public/v0/styles/miami/border-beam.json
new file mode 100644
index 00000000..8a2000bd
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/border-beam.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "border-beam",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/border-beam.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\ninterface BorderBeamProps {\n   className?: string\n   size?: number\n   duration?: number\n   borderWidth?: number\n   anchor?: number\n   colorFrom?: string\n   colorTo?: string\n   delay?: number\n}\n\nexport function BorderBeam({\n   className,\n   size = 200,\n   duration = 15,\n   anchor = 90,\n   borderWidth = 1.5,\n   colorFrom = \"#ffaa40\",\n   colorTo = \"#9c40ff\",\n   delay = 0,\n}: BorderBeamProps) {\n   return (\n      <div\n         style={\n            {\n               \"--size\": size,\n               \"--duration\": duration,\n               \"--anchor\": anchor,\n               \"--border-width\": borderWidth,\n               \"--color-from\": colorFrom,\n               \"--color-to\": colorTo,\n               \"--delay\": `-${delay}s`,\n            } as React.CSSProperties\n         }\n         className={cn(\n            \"pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]\",\n\n            // mask styles\n            \"![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]\",\n\n            // pseudo styles\n            \"after:animate-border-beam after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]\",\n            className,\n         )}\n      />\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "border-beam": "border-beam calc(var(--duration)*1s) infinite linear"
+          },
+          "keyframes": {
+            "border-beam": {
+              "100%": {
+                "offset-distance": "100%"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/box-reveal-demo.json b/apps/web/public/v0/styles/miami/box-reveal-demo.json
new file mode 100644
index 00000000..2511fef1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/box-reveal-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "box-reveal-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/box-reveal-demo.tsx",
+      "content": "import BoxReveal from \"@/components/ui/box-reveal\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default async function BoxRevealDemo() {\n   return (\n      <div className=\"size-full max-w-lg items-center justify-center overflow-hidden pt-8\">\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <p className=\"text-[3.5rem] font-semibold\">\n               Nyxb UI\n               <span className=\"text-[#5046e6]\">.</span>\n            </p>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <h2 className=\"mt-[.5rem] text-[1rem]\">\n               UI library for{\" \"}\n               <span className=\"text-[#5046e6]\">Design Engineers</span>\n            </h2>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <div className=\"mt-6\">\n               <p>\n                  -&gt; 20+ free and open-source animated components built with\n                  <span className=\"font-semibold text-[#5046e6]\"> React</span>,\n                  <span className=\"font-semibold text-[#5046e6]\">\n                     {\" \"}\n                     Typescript\n                  </span>\n                  ,\n                  <span className=\"font-semibold text-[#5046e6]\">\n                     {\" \"}\n                     Tailwind CSS\n                  </span>\n                  , and\n                  <span className=\"font-semibold text-[#5046e6]\">\n                     {\" \"}\n                     Framer Motion\n                  </span>\n                  . <br />\n                  -&gt; 100% open-source, and customizable. <br />\n               </p>\n            </div>\n         </BoxReveal>\n\n         <BoxReveal boxColor=\"#5046e6\" duration={0.5}>\n            <Button className=\"mt-[1.6rem] bg-[#5046e6]\">Explore</Button>\n         </BoxReveal>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/box-reveal.json b/apps/web/public/v0/styles/miami/box-reveal.json
new file mode 100644
index 00000000..bc7a1e50
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/box-reveal.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "box-reveal",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/box-reveal.tsx",
+      "content": "\"use client\"\n\nimport { motion, useAnimation, useInView } from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\n\ninterface BoxRevealProps {\n   children: JSX.Element\n   width?: \"fit-content\" | \"100%\"\n   boxColor?: string\n   duration?: number\n}\n\nexport function BoxReveal({\n   children,\n   width = \"fit-content\",\n   boxColor,\n   duration,\n}: BoxRevealProps) {\n   const mainControls = useAnimation()\n   const slideControls = useAnimation()\n\n   const ref = useRef(null)\n   const isInView = useInView(ref, { once: true })\n\n   useEffect(() => {\n      if (isInView) {\n         slideControls.start(\"visible\")\n         mainControls.start(\"visible\")\n      } else {\n         slideControls.start(\"hidden\")\n         mainControls.start(\"hidden\")\n      }\n   }, [isInView, mainControls, slideControls])\n\n   return (\n      <div\n         ref={ref}\n         style={{ position: \"relative\", width, overflow: \"hidden\" }}\n      >\n         <motion.div\n            variants={{\n               hidden: { opacity: 0, y: 75 },\n               visible: { opacity: 1, y: 0 },\n            }}\n            initial=\"hidden\"\n            animate={mainControls}\n            transition={{ duration: duration || 0.5, delay: 0.25 }}\n         >\n            {children}\n         </motion.div>\n\n         <motion.div\n            variants={{\n               hidden: { left: 0 },\n               visible: { left: \"100%\" },\n            }}\n            initial=\"hidden\"\n            animate={slideControls}\n            transition={{ duration: duration || 0.5, ease: \"easeIn\" }}\n            style={{\n               position: \"absolute\",\n               top: 4,\n               bottom: 4,\n               left: 0,\n               right: 0,\n               zIndex: 20,\n               background: boxColor || \"#5046e6\",\n            }}\n         />\n      </div>\n   )\n}\n\nexport default BoxReveal\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/breadcrumb-demo.json b/apps/web/public/v0/styles/miami/breadcrumb-demo.json
new file mode 100644
index 00000000..b78ccf61
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/breadcrumb-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-demo.tsx",
+      "content": "import {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function BreadcrumbDemo() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     <BreadcrumbEllipsis className=\"size-4\" />\n                     <span className=\"sr-only\">Toggle menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/docs/components\">\n                  Components\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/breadcrumb-dropdown.json b/apps/web/public/v0/styles/miami/breadcrumb-dropdown.json
new file mode 100644
index 00000000..e13b37d8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/breadcrumb-dropdown.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb-dropdown",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-dropdown.tsx",
+      "content": "import { ChevronDownIcon, SlashIcon } from \"@radix-ui/react-icons\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <SlashIcon />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     Components\n                     <ChevronDownIcon />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <SlashIcon />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/breadcrumb-ellipsis.json b/apps/web/public/v0/styles/miami/breadcrumb-ellipsis.json
new file mode 100644
index 00000000..25f9e6a2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/breadcrumb-ellipsis.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb-ellipsis",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-ellipsis.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\n\nexport default function BreadcrumbCollapsed() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink asChild>\n                  <Link href=\"/\">Home</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbEllipsis />\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink asChild>\n                  <Link href=\"/docs/components\">Components</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/breadcrumb-link.json b/apps/web/public/v0/styles/miami/breadcrumb-link.json
new file mode 100644
index 00000000..15411e72
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/breadcrumb-link.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb-link",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-link.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink>\n                  <Link href=\"/\">Home</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink>\n                  <Link href=\"/components\">Components</Link>\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/breadcrumb-responsive.json b/apps/web/public/v0/styles/miami/breadcrumb-responsive.json
new file mode 100644
index 00000000..88630d2d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/breadcrumb-responsive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb-responsive",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-responsive.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"@/components/ui/drawer\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nconst items = [\n   { href: \"#\", label: \"Home\" },\n   { href: \"#\", label: \"Documentation\" },\n   { href: \"#\", label: \"Building Your Application\" },\n   { href: \"#\", label: \"Data Fetching\" },\n   { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href={items[0].href}>\n                  {items[0].label}\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            {items.length > ITEMS_TO_DISPLAY ? (\n               <>\n                  <BreadcrumbItem>\n                     {isDesktop ? (\n                        <DropdownMenu open={open} onOpenChange={setOpen}>\n                           <DropdownMenuTrigger\n                              className=\"flex items-center gap-1\"\n                              aria-label=\"Toggle menu\"\n                           >\n                              <BreadcrumbEllipsis className=\"size-4\" />\n                           </DropdownMenuTrigger>\n                           <DropdownMenuContent align=\"start\">\n                              {items.slice(1, -2).map((item, index) => (\n                                 <DropdownMenuItem key={index}>\n                                    <Link href={item.href ? item.href : \"#\"}>\n                                       {item.label}\n                                    </Link>\n                                 </DropdownMenuItem>\n                              ))}\n                           </DropdownMenuContent>\n                        </DropdownMenu>\n                     ) : (\n                        <Drawer open={open} onOpenChange={setOpen}>\n                           <DrawerTrigger aria-label=\"Toggle Menu\">\n                              <BreadcrumbEllipsis className=\"size-4\" />\n                           </DrawerTrigger>\n                           <DrawerContent>\n                              <DrawerHeader className=\"text-left\">\n                                 <DrawerTitle>Navigate to</DrawerTitle>\n                                 <DrawerDescription>\n                                    Select a page to navigate to.\n                                 </DrawerDescription>\n                              </DrawerHeader>\n                              <div className=\"grid gap-1 px-4\">\n                                 {items.slice(1, -2).map((item, index) => (\n                                    <Link\n                                       key={index}\n                                       href={item.href ? item.href : \"#\"}\n                                       className=\"py-1 text-sm\"\n                                    >\n                                       {item.label}\n                                    </Link>\n                                 ))}\n                              </div>\n                              <DrawerFooter className=\"pt-4\">\n                                 <DrawerClose asChild>\n                                    <Button variant=\"outline\">Close</Button>\n                                 </DrawerClose>\n                              </DrawerFooter>\n                           </DrawerContent>\n                        </Drawer>\n                     )}\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator />\n               </>\n            ) : null}\n            {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n               <BreadcrumbItem key={index}>\n                  {item.href ? (\n                     <>\n                        <BreadcrumbLink\n                           asChild\n                           className=\"max-w-20 truncate md:max-w-none\"\n                        >\n                           <Link href={item.href}>{item.label}</Link>\n                        </BreadcrumbLink>\n                        <BreadcrumbSeparator />\n                     </>\n                  ) : (\n                     <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                        {item.label}\n                     </BreadcrumbPage>\n                  )}\n               </BreadcrumbItem>\n            ))}\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/breadcrumb-separator.json b/apps/web/public/v0/styles/miami/breadcrumb-separator.json
new file mode 100644
index 00000000..2d523bd3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/breadcrumb-separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb-separator",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-separator.tsx",
+      "content": "import { SlashIcon } from \"@radix-ui/react-icons\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <SlashIcon />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator>\n               <SlashIcon />\n            </BreadcrumbSeparator>\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/breadcrumb.json b/apps/web/public/v0/styles/miami/breadcrumb.json
new file mode 100644
index 00000000..52008162
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/breadcrumb.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "breadcrumb",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "ui/breadcrumb.tsx",
+      "content": "import { ChevronRightIcon, DotsHorizontalIcon } from \"@radix-ui/react-icons\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n   HTMLElement,\n   React.ComponentPropsWithoutRef<\"nav\"> & {\n      separator?: React.ReactNode\n   }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n   HTMLOListElement,\n   React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n   <ol\n      ref={ref}\n      className={cn(\n         \"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5\",\n         className,\n      )}\n      {...props}\n   />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n   />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n   HTMLAnchorElement,\n   React.ComponentPropsWithoutRef<\"a\"> & {\n      asChild?: boolean\n   }\n>(({ asChild, className, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"a\"\n\n   return (\n      <Comp\n         ref={ref}\n         className={cn(\"hover:text-foreground transition-colors\", className)}\n         {...props}\n      />\n   )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n   HTMLSpanElement,\n   React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n   <span\n      ref={ref}\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n   />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nfunction BreadcrumbSeparator({\n   children,\n   className,\n   ...props\n}: React.ComponentProps<\"li\">) {\n   return (\n      <li\n         role=\"presentation\"\n         aria-hidden=\"true\"\n         className={cn(\"[&>svg]:size-3.5\", className)}\n         {...props}\n      >\n         {children ?? <ChevronRightIcon />}\n      </li>\n   )\n}\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nfunction BreadcrumbEllipsis({\n   className,\n   ...props\n}: React.ComponentProps<\"span\">) {\n   return (\n      <span\n         role=\"presentation\"\n         aria-hidden=\"true\"\n         className={cn(\"flex size-9 items-center justify-center\", className)}\n         {...props}\n      >\n         <DotsHorizontalIcon className=\"size-4\" />\n         <span className=\"sr-only\">More</span>\n      </span>\n   )\n}\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\n\nexport {\n   Breadcrumb,\n   BreadcrumbList,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n   BreadcrumbEllipsis,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/button-as-child.json b/apps/web/public/v0/styles/miami/button-as-child.json
new file mode 100644
index 00000000..6551c387
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/button-as-child.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-as-child",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-as-child.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ButtonAsChild() {\n   return (\n      <Button asChild>\n         <Link href=\"/login\">Login</Link>\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/button-demo.json b/apps/web/public/v0/styles/miami/button-demo.json
new file mode 100644
index 00000000..15422025
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/button-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonDemo() {\n   return <Button>Button</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/button-destructive.json b/apps/web/public/v0/styles/miami/button-destructive.json
new file mode 100644
index 00000000..06033468
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/button-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-destructive",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-destructive.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonDestructive() {\n   return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/button-ghost.json b/apps/web/public/v0/styles/miami/button-ghost.json
new file mode 100644
index 00000000..9ea010c9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/button-ghost.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-ghost",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-ghost.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonGhost() {\n   return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/button-icon.json b/apps/web/public/v0/styles/miami/button-icon.json
new file mode 100644
index 00000000..61f771c8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/button-icon.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-icon",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-icon.tsx",
+      "content": "import { ChevronRightIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ButtonIcon() {\n   return (\n      <Button variant=\"outline\" size=\"icon\">\n         <ChevronRightIcon className=\"size-4\" />\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/button-link.json b/apps/web/public/v0/styles/miami/button-link.json
new file mode 100644
index 00000000..994d30ac
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/button-link.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-link",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-link.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonLink() {\n   return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/button-loading.json b/apps/web/public/v0/styles/miami/button-loading.json
new file mode 100644
index 00000000..2b698717
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/button-loading.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-loading",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-loading.tsx",
+      "content": "import { ReloadIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ButtonLoading() {\n   return (\n      <Button disabled>\n         <ReloadIcon className=\"mr-2 size-4 animate-spin\" />\n         Please wait\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/button-outline.json b/apps/web/public/v0/styles/miami/button-outline.json
new file mode 100644
index 00000000..94705886
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/button-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-outline",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-outline.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonOutline() {\n   return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/button-secondary.json b/apps/web/public/v0/styles/miami/button-secondary.json
new file mode 100644
index 00000000..9fb1a2d5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/button-secondary.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-secondary",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-secondary.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonSecondary() {\n   return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/button-with-icon.json b/apps/web/public/v0/styles/miami/button-with-icon.json
new file mode 100644
index 00000000..e14bc46d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/button-with-icon.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button-with-icon",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-with-icon.tsx",
+      "content": "import { EnvelopeOpenIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ButtonWithIcon() {\n   return (\n      <Button>\n         <EnvelopeOpenIcon className=\"mr-2 size-4\" /> Login with Email\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/button.json b/apps/web/public/v0/styles/miami/button.json
new file mode 100644
index 00000000..6d5e84f5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/button.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "ui/button.tsx",
+      "content": "import { Slot } from \"@radix-ui/react-slot\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n   \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n   {\n      variants: {\n         variant: {\n            default:\n               \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n            destructive:\n               \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n            outline:\n               \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n            secondary:\n               \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n            ghost: \"hover:bg-accent hover:text-accent-foreground\",\n            link: \"text-primary underline-offset-4 hover:underline\",\n         },\n         size: {\n            default: \"h-9 px-4 py-2\",\n            sm: \"h-8 rounded-md px-3 text-xs\",\n            lg: \"h-10 rounded-md px-8\",\n            icon: \"h-9 w-9\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n         size: \"default\",\n      },\n   },\n)\n\nexport interface ButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n      VariantProps<typeof buttonVariants> {\n   asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n   ({ className, variant, size, asChild = false, ...props }, ref) => {\n      const Comp = asChild ? Slot : \"button\"\n      return (\n         <Comp\n            className={cn(buttonVariants({ variant, size, className }))}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/calendar-demo.json b/apps/web/public/v0/styles/miami/calendar-demo.json
new file mode 100644
index 00000000..a03b8d1e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/calendar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "calendar-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "examples/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/components/ui/calendar\"\n\nexport default function CalendarDemo() {\n   const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n   return (\n      <Calendar\n         mode=\"single\"\n         selected={date}\n         onSelect={setDate}\n         className=\"rounded-md border shadow\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/calendar-form.json b/apps/web/public/v0/styles/miami/calendar-form.json
new file mode 100644
index 00000000..b9c85978
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/calendar-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "calendar-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/calendar-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { format } from \"date-fns\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   dob: z.date({\n      required_error: \"A date of birth is required.\",\n   }),\n})\n\nexport default function CalendarForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"dob\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Date of birth</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 className={cn(\n                                    \"w-[240px] pl-3 text-left font-normal\",\n                                    !field.value && \"text-muted-foreground\",\n                                 )}\n                              >\n                                 {field.value ? (\n                                    format(field.value, \"PPP\")\n                                 ) : (\n                                    <span>Pick a date</span>\n                                 )}\n                                 <CalendarIcon className=\"ml-auto size-4 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                           <Calendar\n                              mode=\"single\"\n                              selected={field.value}\n                              onSelect={field.onChange}\n                              disabled={(date) =>\n                                 date > new Date() ||\n                                 date < new Date(\"1900-01-01\")\n                              }\n                              initialFocus\n                           />\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        Your date of birth is used to calculate your age.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/calendar.json b/apps/web/public/v0/styles/miami/calendar.json
new file mode 100644
index 00000000..771ca91e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/calendar.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "calendar",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "react-day-picker@8.10.1",
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/calendar.tsx",
+      "content": "\"use client\"\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport type * as React from \"react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n   className,\n   classNames,\n   showOutsideDays = true,\n   ...props\n}: CalendarProps) {\n   return (\n      <DayPicker\n         showOutsideDays={showOutsideDays}\n         className={cn(\"p-3\", className)}\n         classNames={{\n            months:\n               \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n            month: \"space-y-4\",\n            caption: \"flex justify-center pt-1 relative items-center\",\n            caption_label: \"text-sm font-medium\",\n            nav: \"space-x-1 flex items-center\",\n            nav_button: cn(\n               buttonVariants({ variant: \"outline\" }),\n               \"size-7 bg-transparent p-0 opacity-50 hover:opacity-100\",\n            ),\n            nav_button_previous: \"absolute left-1\",\n            nav_button_next: \"absolute right-1\",\n            table: \"w-full border-collapse space-y-1\",\n            head_row: \"flex\",\n            head_cell:\n               \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n            row: \"flex w-full mt-2\",\n            cell: cn(\n               \"[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n               props.mode === \"range\"\n                  ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n                  : \"[&:has([aria-selected])]:rounded-md\",\n            ),\n            day: cn(\n               buttonVariants({ variant: \"ghost\" }),\n               \"size-8 p-0 font-normal aria-selected:opacity-100\",\n            ),\n            day_range_start: \"day-range-start\",\n            day_range_end: \"day-range-end\",\n            day_selected:\n               \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n            day_today: \"bg-accent text-accent-foreground\",\n            day_outside:\n               \"day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n            day_disabled: \"text-muted-foreground opacity-50\",\n            day_range_middle:\n               \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n            day_hidden: \"invisible\",\n            ...classNames,\n         }}\n         components={{\n            IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"size-4\" />,\n            IconRight: ({ ...props }) => (\n               <ChevronRightIcon className=\"size-4\" />\n            ),\n         }}\n         {...props}\n      />\n   )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/card-demo.json b/apps/web/public/v0/styles/miami/card-demo.json
new file mode 100644
index 00000000..59264daf
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/card-demo.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "card-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "button",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "examples/card-demo.tsx",
+      "content": "import { BellIcon, CheckIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Switch } from \"@/components/ui/switch\"\n\nconst notifications = [\n   {\n      title: \"Your call has been confirmed.\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"You have a new message!\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"Your subscription is expiring soon!\",\n      description: \"2 hours ago\",\n   },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n   return (\n      <Card className={cn(\"w-[380px]\", className)} {...props}>\n         <CardHeader>\n            <CardTitle>Notifications</CardTitle>\n            <CardDescription>You have 3 unread messages.</CardDescription>\n         </CardHeader>\n         <CardContent className=\"grid gap-4\">\n            <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n               <BellIcon />\n               <div className=\"flex-1 space-y-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                     Push Notifications\n                  </p>\n                  <p className=\"text-muted-foreground text-sm\">\n                     Send notifications to device.\n                  </p>\n               </div>\n               <Switch />\n            </div>\n            <div>\n               {notifications.map((notification, index) => (\n                  <div\n                     key={index}\n                     className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n                  >\n                     <span className=\"flex size-2 translate-y-1 rounded-full bg-sky-500\" />\n                     <div className=\"space-y-1\">\n                        <p className=\"text-sm font-medium leading-none\">\n                           {notification.title}\n                        </p>\n                        <p className=\"text-muted-foreground text-sm\">\n                           {notification.description}\n                        </p>\n                     </div>\n                  </div>\n               ))}\n            </div>\n         </CardContent>\n         <CardFooter>\n            <Button className=\"w-full\">\n               <CheckIcon className=\"mr-2 size-4\" /> Mark all as read\n            </Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/card-with-form.json b/apps/web/public/v0/styles/miami/card-with-form.json
new file mode 100644
index 00000000..7279ee37
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/card-with-form.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "card-with-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/card-with-form.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function CardWithForm() {\n   return (\n      <Card className=\"w-[350px]\">\n         <CardHeader>\n            <CardTitle>Create project</CardTitle>\n            <CardDescription>\n               Deploy your new project in one-click.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <form>\n               <div className=\"grid w-full items-center gap-4\">\n                  <div className=\"flex flex-col space-y-1.5\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" placeholder=\"Name of your project\" />\n                  </div>\n                  <div className=\"flex flex-col space-y-1.5\">\n                     <Label htmlFor=\"framework\">Framework</Label>\n                     <Select>\n                        <SelectTrigger id=\"framework\">\n                           <SelectValue placeholder=\"Select\" />\n                        </SelectTrigger>\n                        <SelectContent position=\"popper\">\n                           <SelectItem value=\"next\">Next.js</SelectItem>\n                           <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                           <SelectItem value=\"astro\">Astro</SelectItem>\n                           <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                        </SelectContent>\n                     </Select>\n                  </div>\n               </div>\n            </form>\n         </CardContent>\n         <CardFooter className=\"flex justify-between\">\n            <Button variant=\"outline\">Cancel</Button>\n            <Button>Deploy</Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/card.json b/apps/web/public/v0/styles/miami/card.json
new file mode 100644
index 00000000..2e989aac
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/card.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "card",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/card.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\n         \"bg-card text-card-foreground rounded-xl border shadow\",\n         className,\n      )}\n      {...props}\n   />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n      {...props}\n   />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n   <h3\n      ref={ref}\n      className={cn(\"font-semibold leading-none tracking-tight\", className)}\n      {...props}\n   />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n   <p\n      ref={ref}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\"flex items-center p-6 pt-0\", className)}\n      {...props}\n   />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/carousel-api.json b/apps/web/public/v0/styles/miami/carousel-api.json
new file mode 100644
index 00000000..4d6e66d9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/carousel-api.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-api",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-api.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   type CarouselApi,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n   const [api, setApi] = React.useState<CarouselApi>()\n   const [current, setCurrent] = React.useState(0)\n   const [count, setCount] = React.useState(0)\n\n   React.useEffect(() => {\n      if (!api) return\n\n      setCount(api.scrollSnapList().length)\n      setCurrent(api.selectedScrollSnap() + 1)\n\n      api.on(\"select\", () => {\n         setCurrent(api.selectedScrollSnap() + 1)\n      })\n   }, [api])\n\n   return (\n      <div>\n         <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n            <CarouselContent>\n               {Array.from({ length: 5 }).map((_, index) => (\n                  <CarouselItem key={index}>\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </CarouselItem>\n               ))}\n            </CarouselContent>\n            <CarouselPrevious />\n            <CarouselNext />\n         </Carousel>\n         <div className=\"text-muted-foreground py-2 text-center text-sm\">\n            Slide {current} of\n            {count}\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/carousel-demo.json b/apps/web/public/v0/styles/miami/carousel-demo.json
new file mode 100644
index 00000000..7eec4a8f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/carousel-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselDemo() {\n   return (\n      <Carousel className=\"w-full max-w-xs\">\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/carousel-dots.json b/apps/web/public/v0/styles/miami/carousel-dots.json
new file mode 100644
index 00000000..e2b3c5eb
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/carousel-dots.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-dots",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-dots.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselDots,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselSize() {\n   return (\n      <Carousel\n         opts={{\n            align: \"start\",\n         }}\n         className=\"w-full max-w-sm\"\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselDots />\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/carousel-orientation.json b/apps/web/public/v0/styles/miami/carousel-orientation.json
new file mode 100644
index 00000000..ffbf2900
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/carousel-orientation.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-orientation",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselOrientation() {\n   return (\n      <Carousel\n         opts={{\n            align: \"start\",\n         }}\n         orientation=\"vertical\"\n         className=\"w-full max-w-xs\"\n      >\n         <CarouselContent className=\"-mt-1 h-[200px]\">\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/carousel-plugin.json b/apps/web/public/v0/styles/miami/carousel-plugin.json
new file mode 100644
index 00000000..f6fcce73
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/carousel-plugin.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-plugin",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-plugin.tsx",
+      "content": "import Autoplay from \"embla-carousel-autoplay\"\nimport * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselPlugin() {\n   const plugin = React.useRef(\n      Autoplay({ delay: 2000, stopOnInteraction: true }),\n   )\n\n   return (\n      <Carousel\n         plugins={[plugin.current]}\n         className=\"w-full max-w-xs\"\n         onMouseEnter={plugin.current.stop}\n         onMouseLeave={plugin.current.reset}\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/carousel-size.json b/apps/web/public/v0/styles/miami/carousel-size.json
new file mode 100644
index 00000000..842a1f4b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/carousel-size.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-size",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-size.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselSize() {\n   return (\n      <Carousel\n         opts={{\n            align: \"start\",\n         }}\n         className=\"w-full max-w-sm\"\n      >\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-3xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/carousel-spacing.json b/apps/web/public/v0/styles/miami/carousel-spacing.json
new file mode 100644
index 00000000..985f17fa
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/carousel-spacing.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel-spacing",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-spacing.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselSpacing() {\n   return (\n      <Carousel className=\"w-full max-w-sm\">\n         <CarouselContent className=\"-ml-1\">\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem\n                  key={index}\n                  className=\"pl-1 md:basis-1/2 lg:basis-1/3\"\n               >\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-2xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/carousel.json b/apps/web/public/v0/styles/miami/carousel.json
new file mode 100644
index 00000000..b5d157a9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/carousel.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "carousel",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "embla-carousel-react"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/carousel.tsx",
+      "content": "\"use client\"\n\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport useEmblaCarousel, {\n   type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ninterface CarouselProps {\n   opts?: CarouselOptions\n   plugins?: CarouselPlugin\n   setApi?: (api: CarouselApi) => void\n   orientation?: \"horizontal\" | \"vertical\"\n   dotsPosition?: \"top\" | \"bottom\" | \"left\" | \"right\"\n}\n\ntype CarouselContextProps = {\n   carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n   api: ReturnType<typeof useEmblaCarousel>[1]\n   scrollPrev: () => void\n   scrollNext: () => void\n   scrollTo: (index: number) => void\n   canScrollPrev: boolean\n   canScrollNext: boolean\n   totalSlides: number\n   currentIndex: number\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n   const context = React.useContext(CarouselContext)\n\n   if (!context)\n      throw new Error(\"useCarousel must be used within a <Carousel />\")\n\n   return context\n}\n\nconst Carousel = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n   (\n      {\n         opts,\n         plugins,\n         setApi,\n         orientation = \"horizontal\",\n         dotsPosition = \"bottom\",\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const [carouselRef, api] = useEmblaCarousel(\n         {\n            ...opts,\n            axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n         },\n         plugins,\n      )\n      const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n      const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n      const [currentIndex, setCurrentIndex] = React.useState(0)\n      const [totalSlides, setTotalSlides] = React.useState(0)\n\n      const onSelect = React.useCallback((api: CarouselApi) => {\n         if (!api) return\n\n         setCanScrollPrev(api.canScrollPrev())\n         setCanScrollNext(api.canScrollNext())\n         setCurrentIndex(api.selectedScrollSnap())\n         setTotalSlides(api.scrollSnapList().length)\n      }, [])\n\n      const scrollTo = React.useCallback(\n         (index: number) => {\n            api?.scrollTo(index)\n         },\n         [api],\n      )\n\n      const scrollPrev = React.useCallback(() => {\n         api?.scrollPrev()\n      }, [api])\n\n      const scrollNext = React.useCallback(() => {\n         api?.scrollNext()\n      }, [api])\n\n      const handleKeyDown = React.useCallback(\n         (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === \"ArrowLeft\") {\n               event.preventDefault()\n               scrollPrev()\n            } else if (event.key === \"ArrowRight\") {\n               event.preventDefault()\n               scrollNext()\n            }\n         },\n         [scrollPrev, scrollNext],\n      )\n\n      React.useEffect(() => {\n         if (!api || !setApi) return\n\n         setApi(api)\n      }, [api, setApi])\n\n      React.useEffect(() => {\n         if (!api) return\n\n         onSelect(api)\n         api.on(\"reInit\", onSelect)\n         api.on(\"select\", onSelect)\n\n         return () => {\n            api?.off(\"select\", onSelect)\n         }\n      }, [api, onSelect])\n\n      let effectiveDotsPosition = dotsPosition\n      if (\n         orientation === \"horizontal\" &&\n         (dotsPosition === \"left\" || dotsPosition === \"right\")\n      ) {\n         console.warn(\n            `Invalid dotsPosition \"${dotsPosition}\" for horizontal orientation, defaulting to \"bottom\".`,\n         )\n         effectiveDotsPosition = \"bottom\"\n      } else if (\n         orientation === \"vertical\" &&\n         (dotsPosition === \"top\" || dotsPosition === \"bottom\")\n      ) {\n         console.warn(\n            `Invalid dotsPosition \"${dotsPosition}\" for vertical orientation, defaulting to \"left\".`,\n         )\n         effectiveDotsPosition = \"left\"\n      }\n\n      return (\n         <CarouselContext.Provider\n            value={{\n               carouselRef,\n               api,\n               opts,\n               orientation:\n                  orientation ||\n                  (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n               dotsPosition: effectiveDotsPosition,\n               scrollPrev,\n               scrollNext,\n               scrollTo,\n               canScrollPrev,\n               canScrollNext,\n               totalSlides,\n               currentIndex,\n            }}\n         >\n            <div\n               ref={ref}\n               onKeyDownCapture={handleKeyDown}\n               className={cn(\"relative\", className)}\n               role=\"region\"\n               aria-roledescription=\"carousel\"\n               {...props}\n            >\n               {children}\n            </div>\n         </CarouselContext.Provider>\n      )\n   },\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { carouselRef, orientation } = useCarousel()\n\n   return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n         <div\n            ref={ref}\n            className={cn(\n               \"flex\",\n               orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n               className,\n            )}\n            {...props}\n         />\n      </div>\n   )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { orientation } = useCarousel()\n\n   return (\n      <div\n         ref={ref}\n         role=\"group\"\n         aria-roledescription=\"slide\"\n         className={cn(\n            \"min-w-0 shrink-0 grow-0 basis-full\",\n            orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n   const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n   return (\n      <Button\n         ref={ref}\n         variant={variant}\n         size={size}\n         className={cn(\n            \"absolute  size-8 rounded-full\",\n            orientation === \"horizontal\"\n               ? \"-left-12 top-1/2 -translate-y-1/2\"\n               : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n            className,\n         )}\n         disabled={!canScrollPrev}\n         onClick={scrollPrev}\n         {...props}\n      >\n         <ArrowLeftIcon className=\"size-4\" />\n         <span className=\"sr-only\">Previous slide</span>\n      </Button>\n   )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n   const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n   return (\n      <Button\n         ref={ref}\n         variant={variant}\n         size={size}\n         className={cn(\n            \"absolute size-8 rounded-full\",\n            orientation === \"horizontal\"\n               ? \"-right-12 top-1/2 -translate-y-1/2\"\n               : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n            className,\n         )}\n         disabled={!canScrollNext}\n         onClick={scrollNext}\n         {...props}\n      >\n         <ArrowRightIcon className=\"size-4\" />\n         <span className=\"sr-only\">Next slide</span>\n      </Button>\n   )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nconst dotsContainerVariants = cva(\"absolute flex justify-center\", {\n   variants: {\n      orientation: {\n         horizontal: \"inset-x-0 flex-row\",\n         vertical: \"inset-y-0 flex-col\",\n      },\n      size: {\n         default: \"p-4\",\n         sm: \"p-4\",\n         md: \"p-1\",\n         lg: \"p-0\",\n      },\n      position: {\n         top: \"-top-10\",\n         right: \"-right-10\",\n         bottom: \"-bottom-10\",\n         left: \"-left-10\",\n      },\n      gap: {\n         default: \"gap-2\",\n         sm: \"gap-2\",\n         md: \"gap-4\",\n         lg: \"gap-6\",\n      },\n   },\n   defaultVariants: {\n      orientation: \"horizontal\",\n      size: \"default\",\n      position: \"bottom\",\n      gap: \"default\",\n   },\n})\n\nconst dotsVariants = cva(\n   \"rounded-full ring-1 ring-muted ring-offset-1 ring-offset-background transition-all duration-300\",\n   {\n      variants: {\n         size: {\n            default: \"size-3\",\n            sm: \"size-3\",\n            md: \"size-4\",\n            lg: \"size-6\",\n         },\n      },\n      defaultVariants: {\n         size: \"default\",\n      },\n   },\n)\n\ninterface CarouselDotsProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof dotsContainerVariants>,\n      VariantProps<typeof dotsVariants> {}\n\nconst CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(\n   ({ className, size, gap, ...props }, ref) => {\n      const { orientation, dotsPosition, totalSlides, currentIndex, scrollTo } =\n         useCarousel()\n\n      if (totalSlides <= 1) return null\n\n      return (\n         <div\n            ref={ref}\n            role=\"tablist\"\n            className={cn(\n               dotsContainerVariants({\n                  orientation,\n                  size,\n                  position: dotsPosition,\n                  gap,\n               }),\n               className,\n            )}\n            {...props}\n         >\n            {Array.from({ length: totalSlides }).map((_, index) => (\n               <button\n                  key={index}\n                  role=\"tab\"\n                  aria-selected={currentIndex === index}\n                  aria-label={`Go to slide ${index + 1}`}\n                  onClick={() => scrollTo(index)}\n                  className={cn(\n                     dotsVariants({ size }),\n                     currentIndex === index ? \"bg-card-foreground\" : \"bg-muted\",\n                  )}\n               />\n            ))}\n         </div>\n      )\n   },\n)\nCarouselDots.displayName = \"CarouselDots\"\n\nexport {\n   type CarouselApi,\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselPrevious,\n   CarouselNext,\n   CarouselDots,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-area-axes.json b/apps/web/public/v0/styles/miami/chart-area-axes.json
new file mode 100644
index 00000000..e5a85487
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-area-axes.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-axes",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-axes.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Axes</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: -20,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <YAxis\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickCount={3}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-area-default.json b/apps/web/public/v0/styles/miami/chart-area-default.json
new file mode 100644
index 00000000..c1f3b38a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-area-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-default",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-area-gradient.json b/apps/web/public/v0/styles/miami/chart-area-gradient.json
new file mode 100644
index 00000000..30197085
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-area-gradient.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-gradient",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-gradient.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Gradient</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <defs>\n                     <linearGradient\n                        id=\"fillDesktop\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                     <linearGradient\n                        id=\"fillMobile\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                  </defs>\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"url(#fillMobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"url(#fillDesktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-area-icons.json b/apps/web/public/v0/styles/miami/chart-area-icons.json
new file mode 100644
index 00000000..4ccafb30
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-area-icons.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-icons",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-icons.tsx",
+      "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n      icon: TrendingDown,\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n      icon: TrendingUp,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Icons</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-area-interactive.json b/apps/web/public/v0/styles/miami/chart-area-interactive.json
new file mode 100644
index 00000000..7e5cae63
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-area-interactive.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-interactive",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\nconst chartData = [\n   { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n   { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n   { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n   { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n   { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n   { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n   { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n   { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n   { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n   { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n   { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n   { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n   { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n   { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n   { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n   { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n   { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n   { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n   { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n   { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n   { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n   { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n   { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n   { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n   { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n   { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n   { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n   { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n   { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n   { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n   { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n   { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n   { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n   { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n   { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n   { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n   { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n   { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n   { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n   { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n   { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n   { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n   { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n   { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n   { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n   { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n   { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n   { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n   { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n   { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n   { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n   { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n   { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n   { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n   { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n   { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n   { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n   { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n   { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n   { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n   { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n   { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n   { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n   { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n   { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n   { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n   { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n   { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n   { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n   { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n   { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n   { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n   { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n   { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n   { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n   { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n   { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n   { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n   { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n   { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n   { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n   { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n   { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n   { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n   { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n   { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n   { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n   { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n   { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n   const filteredData = chartData.filter((item) => {\n      const date = new Date(item.date)\n      const referenceDate = new Date(\"2024-06-30\")\n      let daysToSubtract = 90\n      if (timeRange === \"30d\") {\n         daysToSubtract = 30\n      } else if (timeRange === \"7d\") {\n         daysToSubtract = 7\n      }\n      const startDate = new Date(referenceDate)\n      startDate.setDate(startDate.getDate() - daysToSubtract)\n      return date >= startDate\n   })\n\n   return (\n      <Card>\n         <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n            <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n               <CardTitle>Area Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <Select value={timeRange} onValueChange={setTimeRange}>\n               <SelectTrigger\n                  className=\"w-[160px] rounded-lg sm:ml-auto\"\n                  aria-label=\"Select a value\"\n               >\n                  <SelectValue placeholder=\"Last 3 months\" />\n               </SelectTrigger>\n               <SelectContent className=\"rounded-xl\">\n                  <SelectItem value=\"90d\" className=\"rounded-lg\">\n                     Last 3 months\n                  </SelectItem>\n                  <SelectItem value=\"30d\" className=\"rounded-lg\">\n                     Last 30 days\n                  </SelectItem>\n                  <SelectItem value=\"7d\" className=\"rounded-lg\">\n                     Last 7 days\n                  </SelectItem>\n               </SelectContent>\n            </Select>\n         </CardHeader>\n         <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <AreaChart data={filteredData}>\n                  <defs>\n                     <linearGradient\n                        id=\"fillDesktop\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-desktop)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                     <linearGradient\n                        id=\"fillMobile\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                     >\n                        <stop\n                           offset=\"5%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.8}\n                        />\n                        <stop\n                           offset=\"95%\"\n                           stopColor=\"var(--color-mobile)\"\n                           stopOpacity={0.1}\n                        />\n                     </linearGradient>\n                  </defs>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString(\"en-US\", {\n                           month: \"short\",\n                           day: \"numeric\",\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    month: \"short\",\n                                    day: \"numeric\",\n                                 },\n                              )\n                           }}\n                           indicator=\"dot\"\n                        />\n                     }\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"url(#fillMobile)\"\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"url(#fillDesktop)\"\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-area-legend.json b/apps/web/public/v0/styles/miami/chart-area-legend.json
new file mode 100644
index 00000000..8b414de5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-area-legend.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-legend",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Legend</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n                  <ChartLegend content={<ChartLegendContent />} />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-area-linear.json b/apps/web/public/v0/styles/miami/chart-area-linear.json
new file mode 100644
index 00000000..c1221475
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-area-linear.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-linear",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Linear</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"linear\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-area-stacked-expand.json b/apps/web/public/v0/styles/miami/chart-area-stacked-expand.json
new file mode 100644
index 00000000..dc0e283c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-area-stacked-expand.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-stacked-expand",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-stacked-expand.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n   { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n   { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n   { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n   { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n   { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-3))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                     top: 12,\n                  }}\n                  stackOffset=\"expand\"\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Area\n                     dataKey=\"other\"\n                     type=\"natural\"\n                     fill=\"var(--color-other)\"\n                     fillOpacity={0.1}\n                     stroke=\"var(--color-other)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-area-stacked.json b/apps/web/public/v0/styles/miami/chart-area-stacked.json
new file mode 100644
index 00000000..3108442d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-area-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-stacked",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Stacked</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                     dataKey=\"mobile\"\n                     type=\"natural\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                     stackId=\"a\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-area-step.json b/apps/web/public/v0/styles/miami/chart-area-step.json
new file mode 100644
index 00000000..87226d24
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-area-step.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-area-step",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-step.tsx",
+      "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n      icon: Activity,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Area Chart - Step</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Area\n                     dataKey=\"desktop\"\n                     type=\"step\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.4}\n                     stroke=\"var(--color-desktop)\"\n                  />\n               </AreaChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     January - June 2024\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-bar-active.json b/apps/web/public/v0/styles/miami/chart-bar-active.json
new file mode 100644
index 00000000..cfa9d9bc
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-bar-active.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-active",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Active</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"browser\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) =>\n                        chartConfig[value as keyof typeof chartConfig]?.label\n                     }\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"visitors\"\n                     strokeWidth={2}\n                     radius={8}\n                     activeIndex={2}\n                     activeBar={({ ...props }) => {\n                        return (\n                           <Rectangle\n                              {...props}\n                              fillOpacity={0.8}\n                              stroke={props.payload.fill}\n                              strokeDasharray={4}\n                              strokeDashoffset={4}\n                           />\n                        )\n                     }}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-bar-default.json b/apps/web/public/v0/styles/miami/chart-bar-default.json
new file mode 100644
index 00000000..6a306b62
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-bar-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-default",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     radius={8}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-bar-horizontal.json b/apps/web/public/v0/styles/miami/chart-bar-horizontal.json
new file mode 100644
index 00000000..b538be43
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-bar-horizontal.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-horizontal",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-horizontal.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Horizontal</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     left: -20,\n                  }}\n               >\n                  <XAxis type=\"number\" dataKey=\"desktop\" hide />\n                  <YAxis\n                     dataKey=\"month\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     radius={5}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-bar-interactive.json b/apps/web/public/v0/styles/miami/chart-bar-interactive.json
new file mode 100644
index 00000000..2e78214b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-bar-interactive.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-interactive",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n   { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n   { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n   { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n   { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n   { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n   { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n   { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n   { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n   { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n   { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n   { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n   { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n   { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n   { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n   { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n   { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n   { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n   { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n   { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n   { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n   { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n   { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n   { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n   { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n   { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n   { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n   { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n   { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n   { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n   { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n   { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n   { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n   { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n   { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n   { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n   { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n   { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n   { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n   { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n   { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n   { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n   { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n   { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n   { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n   { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n   { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n   { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n   { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n   { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n   { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n   { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n   { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n   { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n   { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n   { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n   { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n   { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n   { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n   { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n   { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n   { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n   { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n   { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n   { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n   { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n   { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n   { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n   { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n   { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n   { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n   { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n   { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n   { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n   { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n   { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n   { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n   { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n   { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n   { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n   { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n   { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n   { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n   { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n   { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n   { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n   { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n   { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n   { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   views: {\n      label: \"Page Views\",\n   },\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [activeChart, setActiveChart] =\n      React.useState<keyof typeof chartConfig>(\"desktop\")\n\n   const total = React.useMemo(\n      () => ({\n         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n      }),\n      [],\n   )\n\n   return (\n      <Card>\n         <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n            <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n               <CardTitle>Bar Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <div className=\"flex\">\n               {[\"desktop\", \"mobile\"].map((key) => {\n                  const chart = key as keyof typeof chartConfig\n                  return (\n                     <button\n                        key={chart}\n                        data-active={activeChart === chart}\n                        className=\"relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                        onClick={() => setActiveChart(chart)}\n                     >\n                        <span className=\"text-xs text-muted-foreground\">\n                           {chartConfig[chart].label}\n                        </span>\n                        <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                           {total[key as keyof typeof total].toLocaleString()}\n                        </span>\n                     </button>\n                  )\n               })}\n            </div>\n         </CardHeader>\n         <CardContent className=\"px-2 sm:p-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString(\"en-US\", {\n                           month: \"short\",\n                           day: \"numeric\",\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           className=\"w-[150px]\"\n                           nameKey=\"views\"\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    month: \"short\",\n                                    day: \"numeric\",\n                                    year: \"numeric\",\n                                 },\n                              )\n                           }}\n                        />\n                     }\n                  />\n                  <Bar\n                     dataKey={activeChart}\n                     fill={`var(--color-${activeChart})`}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-bar-label-custom.json b/apps/web/public/v0/styles/miami/chart-bar-label-custom.json
new file mode 100644
index 00000000..5f16df21
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-bar-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-label-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   label: {\n      color: \"hsl(var(--background))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     right: 16,\n                  }}\n               >\n                  <CartesianGrid horizontal={false} />\n                  <YAxis\n                     dataKey=\"month\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                     hide\n                  />\n                  <XAxis dataKey=\"desktop\" type=\"number\" hide />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     layout=\"vertical\"\n                     fill=\"var(--color-desktop)\"\n                     radius={4}\n                  >\n                     <LabelList\n                        dataKey=\"month\"\n                        position=\"insideLeft\"\n                        offset={8}\n                        className=\"fill-[--color-label]\"\n                        fontSize={12}\n                     />\n                     <LabelList\n                        dataKey=\"desktop\"\n                        position=\"right\"\n                        offset={8}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-bar-label.json b/apps/web/public/v0/styles/miami/chart-bar-label.json
new file mode 100644
index 00000000..e32c3fc1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-bar-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-label",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 20,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-bar-mixed.json b/apps/web/public/v0/styles/miami/chart-bar-mixed.json
new file mode 100644
index 00000000..8a62868d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-bar-mixed.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-mixed",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-mixed.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Mixed</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart\n                  accessibilityLayer\n                  data={chartData}\n                  layout=\"vertical\"\n                  margin={{\n                     left: 0,\n                  }}\n               >\n                  <YAxis\n                     dataKey=\"browser\"\n                     type=\"category\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) =>\n                        chartConfig[value as keyof typeof chartConfig]?.label\n                     }\n                  />\n                  <XAxis dataKey=\"visitors\" type=\"number\" hide />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-bar-multiple.json b/apps/web/public/v0/styles/miami/chart-bar-multiple.json
new file mode 100644
index 00000000..b916712d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-bar-multiple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-multiple",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Multiple</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"dashed\" />}\n                  />\n                  <Bar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     radius={4}\n                  />\n                  <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-bar-negative.json b/apps/web/public/v0/styles/miami/chart-bar-negative.json
new file mode 100644
index 00000000..cf04f4e5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-bar-negative.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-negative",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-negative.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", visitors: 186 },\n   { month: \"February\", visitors: 205 },\n   { month: \"March\", visitors: -207 },\n   { month: \"April\", visitors: 173 },\n   { month: \"May\", visitors: -209 },\n   { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Negative</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel hideIndicator />}\n                  />\n                  <Bar dataKey=\"visitors\">\n                     <LabelList\n                        position=\"top\"\n                        dataKey=\"month\"\n                        fillOpacity={1}\n                     />\n                     {chartData.map((item) => (\n                        <Cell\n                           key={item.month}\n                           fill={\n                              item.visitors > 0\n                                 ? \"hsl(var(--chart-1))\"\n                                 : \"hsl(var(--chart-2))\"\n                           }\n                        />\n                     ))}\n                  </Bar>\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-bar-stacked.json b/apps/web/public/v0/styles/miami/chart-bar-stacked.json
new file mode 100644
index 00000000..d091cb16
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-bar-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-bar-stacked",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <ChartLegend content={<ChartLegendContent />} />\n                  <Bar\n                     dataKey=\"desktop\"\n                     stackId=\"a\"\n                     fill=\"var(--color-desktop)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"mobile\"\n                     stackId=\"a\"\n                     fill=\"var(--color-mobile)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-line-default.json b/apps/web/public/v0/styles/miami/chart-line-default.json
new file mode 100644
index 00000000..f9a20a87
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-line-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-default",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-line-dots-colors.json b/apps/web/public/v0/styles/miami/chart-line-dots-colors.json
new file mode 100644
index 00000000..32d5b204
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-line-dots-colors.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-dots-colors",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-dots-colors.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Dots Colors</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 24,\n                     left: 24,\n                     right: 24,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           nameKey=\"visitors\"\n                           hideLabel\n                        />\n                     }\n                  />\n                  <Line\n                     dataKey=\"visitors\"\n                     type=\"natural\"\n                     stroke=\"var(--color-visitors)\"\n                     strokeWidth={2}\n                     dot={({ payload, ...props }) => {\n                        return (\n                           <Dot\n                              key={payload.browser}\n                              r={5}\n                              cx={props.cx}\n                              cy={props.cy}\n                              fill={payload.fill}\n                              stroke={payload.fill}\n                           />\n                        )\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-line-dots-custom.json b/apps/web/public/v0/styles/miami/chart-line-dots-custom.json
new file mode 100644
index 00000000..1e21b18d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-line-dots-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-dots-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-dots-custom.tsx",
+      "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Custom Dots</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={({ cx, cy, payload }) => {\n                        const r = 24\n                        return (\n                           <GitCommitVertical\n                              key={payload.month}\n                              x={cx - r / 2}\n                              y={cy - r / 2}\n                              width={r}\n                              height={r}\n                              fill=\"hsl(var(--background))\"\n                              stroke=\"var(--color-desktop)\"\n                           />\n                        )\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-line-dots.json b/apps/web/public/v0/styles/miami/chart-line-dots.json
new file mode 100644
index 00000000..1eebe7ee
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-line-dots.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-dots",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Dots</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: \"var(--color-desktop)\",\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-line-interactive.json b/apps/web/public/v0/styles/miami/chart-line-interactive.json
new file mode 100644
index 00000000..de5affbd
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-line-interactive.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-interactive",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n   { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n   { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n   { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n   { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n   { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n   { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n   { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n   { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n   { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n   { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n   { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n   { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n   { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n   { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n   { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n   { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n   { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n   { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n   { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n   { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n   { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n   { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n   { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n   { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n   { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n   { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n   { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n   { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n   { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n   { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n   { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n   { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n   { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n   { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n   { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n   { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n   { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n   { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n   { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n   { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n   { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n   { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n   { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n   { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n   { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n   { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n   { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n   { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n   { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n   { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n   { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n   { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n   { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n   { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n   { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n   { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n   { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n   { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n   { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n   { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n   { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n   { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n   { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n   { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n   { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n   { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n   { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n   { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n   { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n   { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n   { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n   { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n   { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n   { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n   { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n   { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n   { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n   { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n   { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n   { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n   { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n   { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n   { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n   { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n   { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n   { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n   { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n   { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n   { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n   views: {\n      label: \"Page Views\",\n   },\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const [activeChart, setActiveChart] =\n      React.useState<keyof typeof chartConfig>(\"desktop\")\n\n   const total = React.useMemo(\n      () => ({\n         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n      }),\n      [],\n   )\n\n   return (\n      <Card>\n         <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n            <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n               <CardTitle>Line Chart - Interactive</CardTitle>\n               <CardDescription>\n                  Showing total visitors for the last 3 months\n               </CardDescription>\n            </div>\n            <div className=\"flex\">\n               {[\"desktop\", \"mobile\"].map((key) => {\n                  const chart = key as keyof typeof chartConfig\n                  return (\n                     <button\n                        key={chart}\n                        data-active={activeChart === chart}\n                        className=\"flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                        onClick={() => setActiveChart(chart)}\n                     >\n                        <span className=\"text-xs text-muted-foreground\">\n                           {chartConfig[chart].label}\n                        </span>\n                        <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                           {total[key as keyof typeof total].toLocaleString()}\n                        </span>\n                     </button>\n                  )\n               })}\n            </div>\n         </CardHeader>\n         <CardContent className=\"px-2 sm:p-6\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"aspect-auto h-[250px] w-full\"\n            >\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     minTickGap={32}\n                     tickFormatter={(value) => {\n                        const date = new Date(value)\n                        return date.toLocaleDateString(\"en-US\", {\n                           month: \"short\",\n                           day: \"numeric\",\n                        })\n                     }}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           className=\"w-[150px]\"\n                           nameKey=\"views\"\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    month: \"short\",\n                                    day: \"numeric\",\n                                    year: \"numeric\",\n                                 },\n                              )\n                           }}\n                        />\n                     }\n                  />\n                  <Line\n                     dataKey={activeChart}\n                     type=\"monotone\"\n                     stroke={`var(--color-${activeChart})`}\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-line-label-custom.json b/apps/web/public/v0/styles/miami/chart-line-label-custom.json
new file mode 100644
index 00000000..8f286c36
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-line-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-label-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 24,\n                     left: 24,\n                     right: 24,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           nameKey=\"visitors\"\n                           hideLabel\n                        />\n                     }\n                  />\n                  <Line\n                     dataKey=\"visitors\"\n                     type=\"natural\"\n                     stroke=\"var(--color-visitors)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: \"var(--color-visitors)\",\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  >\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                        dataKey=\"browser\"\n                        formatter={(value: keyof typeof chartConfig) =>\n                           chartConfig[value]?.label\n                        }\n                     />\n                  </Line>\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-line-label.json b/apps/web/public/v0/styles/miami/chart-line-label.json
new file mode 100644
index 00000000..efdb52e3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-line-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-label",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     top: 20,\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"natural\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={{\n                        fill: \"var(--color-desktop)\",\n                     }}\n                     activeDot={{\n                        r: 6,\n                     }}\n                  >\n                     <LabelList\n                        position=\"top\"\n                        offset={12}\n                        className=\"fill-foreground\"\n                        fontSize={12}\n                     />\n                  </Line>\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-line-linear.json b/apps/web/public/v0/styles/miami/chart-line-linear.json
new file mode 100644
index 00000000..5238bf8f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-line-linear.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-linear",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Linear</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"linear\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-line-multiple.json b/apps/web/public/v0/styles/miami/chart-line-multiple.json
new file mode 100644
index 00000000..b6cd9ea7
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-line-multiple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-multiple",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Multiple</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"monotone\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n                  <Line\n                     dataKey=\"mobile\"\n                     type=\"monotone\"\n                     stroke=\"var(--color-mobile)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter>\n            <div className=\"flex w-full items-start gap-2 text-sm\">\n               <div className=\"grid gap-2\">\n                  <div className=\"flex items-center gap-2 font-medium leading-none\">\n                     Trending up by 5.2% this month{\" \"}\n                     <TrendingUp className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                     Showing total visitors for the last 6 months\n                  </div>\n               </div>\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-line-step.json b/apps/web/public/v0/styles/miami/chart-line-step.json
new file mode 100644
index 00000000..029c0371
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-line-step.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-line-step",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-step.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 73 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Line Chart - Step</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <LineChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                     left: 12,\n                     right: 12,\n                  }}\n               >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                     dataKey=\"month\"\n                     tickLine={false}\n                     axisLine={false}\n                     tickMargin={8}\n                     tickFormatter={(value) => value.slice(0, 3)}\n                  />\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Line\n                     dataKey=\"desktop\"\n                     type=\"step\"\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                     dot={false}\n                  />\n               </LineChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n            <div className=\"flex gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-pie-donut-active.json b/apps/web/public/v0/styles/miami/chart-pie-donut-active.json
new file mode 100644
index 00000000..bcb8a660
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-pie-donut-active.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-donut-active",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-donut-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut Active</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                     activeIndex={0}\n                     activeShape={({\n                        outerRadius = 0,\n                        ...props\n                     }: PieSectorDataItem) => (\n                        <Sector {...props} outerRadius={outerRadius + 10} />\n                     )}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-pie-donut-text.json b/apps/web/public/v0/styles/miami/chart-pie-donut-text.json
new file mode 100644
index 00000000..05b4ce12
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-pie-donut-text.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-donut-text",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-donut-text.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const totalVisitors = React.useMemo(() => {\n      return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n   }, [])\n\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut with Text</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-3xl font-bold\"\n                                    >\n                                       {totalVisitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-pie-donut.json b/apps/web/public/v0/styles/miami/chart-pie-donut.json
new file mode 100644
index 00000000..8f98f1e4
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-pie-donut.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-donut",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-donut.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Donut</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     innerRadius={60}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-pie-interactive.json b/apps/web/public/v0/styles/miami/chart-pie-interactive.json
new file mode 100644
index 00000000..210d2ef4
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-pie-interactive.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-interactive",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartStyle,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\nconst desktopData = [\n   { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n   { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n   { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n   { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n   { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   desktop: {\n      label: \"Desktop\",\n   },\n   mobile: {\n      label: \"Mobile\",\n   },\n   january: {\n      label: \"January\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   february: {\n      label: \"February\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   march: {\n      label: \"March\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   april: {\n      label: \"April\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   may: {\n      label: \"May\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const id = \"pie-interactive\"\n   const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n   const activeIndex = React.useMemo(\n      () => desktopData.findIndex((item) => item.month === activeMonth),\n      [activeMonth],\n   )\n   const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n   return (\n      <Card data-chart={id} className=\"flex flex-col\">\n         <ChartStyle id={id} config={chartConfig} />\n         <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n            <div className=\"grid gap-1\">\n               <CardTitle>Pie Chart - Interactive</CardTitle>\n               <CardDescription>January - June 2024</CardDescription>\n            </div>\n            <Select value={activeMonth} onValueChange={setActiveMonth}>\n               <SelectTrigger\n                  className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n                  aria-label=\"Select a value\"\n               >\n                  <SelectValue placeholder=\"Select month\" />\n               </SelectTrigger>\n               <SelectContent align=\"end\" className=\"rounded-xl\">\n                  {months.map((key) => {\n                     const config = chartConfig[key as keyof typeof chartConfig]\n\n                     if (!config) {\n                        return null\n                     }\n\n                     return (\n                        <SelectItem\n                           key={key}\n                           value={key}\n                           className=\"rounded-lg [&_span]:flex\"\n                        >\n                           <div className=\"flex items-center gap-2 text-xs\">\n                              <span\n                                 className=\"flex h-3 w-3 shrink-0 rounded-sm\"\n                                 style={{\n                                    backgroundColor: `var(--color-${key})`,\n                                 }}\n                              />\n                              {config?.label}\n                           </div>\n                        </SelectItem>\n                     )\n                  })}\n               </SelectContent>\n            </Select>\n         </CardHeader>\n         <CardContent className=\"flex flex-1 justify-center pb-0\">\n            <ChartContainer\n               id={id}\n               config={chartConfig}\n               className=\"mx-auto aspect-square w-full max-w-[300px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={desktopData}\n                     dataKey=\"desktop\"\n                     nameKey=\"month\"\n                     innerRadius={60}\n                     strokeWidth={5}\n                     activeIndex={activeIndex}\n                     activeShape={({\n                        outerRadius = 0,\n                        ...props\n                     }: PieSectorDataItem) => (\n                        <g>\n                           <Sector {...props} outerRadius={outerRadius + 10} />\n                           <Sector\n                              {...props}\n                              outerRadius={outerRadius + 25}\n                              innerRadius={outerRadius + 12}\n                           />\n                        </g>\n                     )}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-3xl font-bold\"\n                                    >\n                                       {desktopData[\n                                          activeIndex\n                                       ].desktop.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-pie-label-custom.json b/apps/web/public/v0/styles/miami/chart-pie-label-custom.json
new file mode 100644
index 00000000..12fd0181
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-pie-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-label-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Custom Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] px-0\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent nameKey=\"visitors\" hideLabel />\n                     }\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     labelLine={false}\n                     label={({ payload, ...props }) => {\n                        return (\n                           <text\n                              cx={props.cx}\n                              cy={props.cy}\n                              x={props.x}\n                              y={props.y}\n                              textAnchor={props.textAnchor}\n                              dominantBaseline={props.dominantBaseline}\n                              fill=\"hsla(var(--foreground))\"\n                           >\n                              {payload.visitors}\n                           </text>\n                        )\n                     }}\n                     nameKey=\"browser\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-pie-label-list.json b/apps/web/public/v0/styles/miami/chart-pie-label-list.json
new file mode 100644
index 00000000..f9ca392b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-pie-label-list.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-label-list",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-label-list.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Label List</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent nameKey=\"visitors\" hideLabel />\n                     }\n                  />\n                  <Pie data={chartData} dataKey=\"visitors\">\n                     <LabelList\n                        dataKey=\"browser\"\n                        className=\"fill-background\"\n                        stroke=\"none\"\n                        fontSize={12}\n                        formatter={(value: keyof typeof chartConfig) =>\n                           chartConfig[value]?.label\n                        }\n                     />\n                  </Pie>\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-pie-label.json b/apps/web/public/v0/styles/miami/chart-pie-label.json
new file mode 100644
index 00000000..68f807e5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-pie-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-label",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground\"\n            >\n               <PieChart>\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     label\n                     nameKey=\"browser\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-pie-legend.json b/apps/web/public/v0/styles/miami/chart-pie-legend.json
new file mode 100644
index 00000000..107d6dc1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-pie-legend.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-legend",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-legend.tsx",
+      "content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Legend</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[300px]\"\n            >\n               <PieChart>\n                  <Pie data={chartData} dataKey=\"visitors\" />\n                  <ChartLegend\n                     content={<ChartLegendContent nameKey=\"browser\" />}\n                     className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-pie-separator-none.json b/apps/web/public/v0/styles/miami/chart-pie-separator-none.json
new file mode 100644
index 00000000..5f07f12f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-pie-separator-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-separator-none",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-separator-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Separator None</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie\n                     data={chartData}\n                     dataKey=\"visitors\"\n                     nameKey=\"browser\"\n                     stroke=\"0\"\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-pie-simple.json b/apps/web/public/v0/styles/miami/chart-pie-simple.json
new file mode 100644
index 00000000..3fcea030
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-pie-simple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-simple",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-pie-stacked.json b/apps/web/public/v0/styles/miami/chart-pie-stacked.json
new file mode 100644
index 00000000..6dac30b9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-pie-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-pie-stacked",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst desktopData = [\n   { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n   { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n   { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n   { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n   { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n   { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n   { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n   { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n   { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n   { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   desktop: {\n      label: \"Desktop\",\n   },\n   mobile: {\n      label: \"Mobile\",\n   },\n   january: {\n      label: \"January\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   february: {\n      label: \"February\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   march: {\n      label: \"March\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   april: {\n      label: \"April\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   may: {\n      label: \"May\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Pie Chart - Stacked</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <PieChart>\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           labelKey=\"visitors\"\n                           nameKey=\"month\"\n                           indicator=\"line\"\n                           labelFormatter={(_, payload) => {\n                              return chartConfig[\n                                 payload?.[0]\n                                    .dataKey as keyof typeof chartConfig\n                              ].label\n                           }}\n                        />\n                     }\n                  />\n                  <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n                  <Pie\n                     data={mobileData}\n                     dataKey=\"mobile\"\n                     innerRadius={70}\n                     outerRadius={90}\n                  />\n               </PieChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-default.json b/apps/web/public/v0/styles/miami/chart-radar-default.json
new file mode 100644
index 00000000..c61ad43d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-default",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-dots.json b/apps/web/public/v0/styles/miami/chart-radar-dots.json
new file mode 100644
index 00000000..c9b5f5a9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-dots.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-dots",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center\">\n            <CardTitle>Radar Chart - Dots</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-grid-circle-fill.json b/apps/web/public/v0/styles/miami/chart-radar-grid-circle-fill.json
new file mode 100644
index 00000000..3ee7faaf
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-grid-circle-fill.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-grid-circle-fill",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-circle-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 285 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 203 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent />}\n                  />\n                  <PolarGrid\n                     className=\"fill-[--color-desktop] opacity-20\"\n                     gridType=\"circle\"\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.5}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-grid-circle-no-lines.json b/apps/web/public/v0/styles/miami/chart-radar-grid-circle-no-lines.json
new file mode 100644
index 00000000..94bbf514
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-grid-circle-no-lines.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-grid-circle-no-lines",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-circle-no-lines.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 203 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid gridType=\"circle\" radialLines={false} />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-grid-circle.json b/apps/web/public/v0/styles/miami/chart-radar-grid-circle.json
new file mode 100644
index 00000000..b31b1a77
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-grid-circle.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-grid-circle",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-circle.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Circle</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid gridType=\"circle\" />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-grid-custom.json b/apps/web/public/v0/styles/miami/chart-radar-grid-custom.json
new file mode 100644
index 00000000..8e441013
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-grid-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-grid-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Custom</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid\n                     radialLines={false}\n                     polarRadius={[90]}\n                     strokeWidth={1}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-grid-fill.json b/apps/web/public/v0/styles/miami/chart-radar-grid-fill.json
new file mode 100644
index 00000000..ca2abbf0
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-grid-fill.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-grid-fill",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 285 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 203 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid Filled</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.5}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-grid-none.json b/apps/web/public/v0/styles/miami/chart-radar-grid-none.json
new file mode 100644
index 00000000..586dd9b5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-grid-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-grid-none",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186 },\n   { month: \"February\", desktop: 305 },\n   { month: \"March\", desktop: 237 },\n   { month: \"April\", desktop: 273 },\n   { month: \"May\", desktop: 209 },\n   { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Grid None</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                     dot={{\n                        r: 4,\n                        fillOpacity: 1,\n                     }}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-icons.json b/apps/web/public/v0/styles/miami/chart-radar-icons.json
new file mode 100644
index 00000000..14934ee3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-icons.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-icons",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-icons.tsx",
+      "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n      icon: ArrowDownFromLine,\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n      icon: ArrowUpFromLine,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Icons</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: -40,\n                     bottom: -10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <ChartLegend\n                     className=\"mt-8\"\n                     content={<ChartLegendContent />}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-label-custom.json b/apps/web/public/v0/styles/miami/chart-radar-label-custom.json
new file mode 100644
index 00000000..745e97e0
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-label-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Custom Label</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: 10,\n                     right: 10,\n                     bottom: 10,\n                     left: 10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis\n                     dataKey=\"month\"\n                     tick={({ x, y, textAnchor, value, index, ...props }) => {\n                        const data = chartData[index]\n\n                        return (\n                           <text\n                              x={x}\n                              y={index === 0 ? y - 10 : y}\n                              textAnchor={textAnchor}\n                              fontSize={13}\n                              fontWeight={500}\n                              {...props}\n                           >\n                              <tspan>{data.desktop}</tspan>\n                              <tspan className=\"fill-muted-foreground\">/</tspan>\n                              <tspan>{data.mobile}</tspan>\n                              <tspan\n                                 x={x}\n                                 dy={\"1rem\"}\n                                 fontSize={12}\n                                 className=\"fill-muted-foreground\"\n                              >\n                                 {data.month}\n                              </tspan>\n                           </text>\n                        )\n                     }}\n                  />\n\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-legend.json b/apps/web/public/v0/styles/miami/chart-radar-legend.json
new file mode 100644
index 00000000..37f0e831
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-legend.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-legend",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartLegend,\n   ChartLegendContent,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Legend</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart\n                  data={chartData}\n                  margin={{\n                     top: -40,\n                     bottom: -10,\n                  }}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <ChartLegend\n                     className=\"mt-8\"\n                     content={<ChartLegendContent />}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-lines-only.json b/apps/web/public/v0/styles/miami/chart-radar-lines-only.json
new file mode 100644
index 00000000..15228008
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-lines-only.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-lines-only",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-lines-only.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 160 },\n   { month: \"February\", desktop: 185, mobile: 170 },\n   { month: \"March\", desktop: 207, mobile: 180 },\n   { month: \"April\", desktop: 173, mobile: 160 },\n   { month: \"May\", desktop: 160, mobile: 190 },\n   { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Lines Only</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid radialLines={false} />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0}\n                     stroke=\"var(--color-desktop)\"\n                     strokeWidth={2}\n                  />\n                  <Radar\n                     dataKey=\"mobile\"\n                     fill=\"var(--color-mobile)\"\n                     fillOpacity={0}\n                     stroke=\"var(--color-mobile)\"\n                     strokeWidth={2}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-multiple.json b/apps/web/public/v0/styles/miami/chart-radar-multiple.json
new file mode 100644
index 00000000..edfe0e5f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-multiple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-multiple",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Multiple</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                  />\n                  <PolarAngleAxis dataKey=\"month\" />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radar-radius.json b/apps/web/public/v0/styles/miami/chart-radar-radius.json
new file mode 100644
index 00000000..59b80809
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radar-radius.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radar-radius",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-radius.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n   PolarAngleAxis,\n   PolarGrid,\n   PolarRadiusAxis,\n   Radar,\n   RadarChart,\n} from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { month: \"January\", desktop: 186, mobile: 80 },\n   { month: \"February\", desktop: 305, mobile: 200 },\n   { month: \"March\", desktop: 237, mobile: 120 },\n   { month: \"April\", desktop: 73, mobile: 190 },\n   { month: \"May\", desktop: 209, mobile: 130 },\n   { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader className=\"items-center pb-4\">\n            <CardTitle>Radar Chart - Radius Axis</CardTitle>\n            <CardDescription>\n               Showing total visitors for the last 6 months\n            </CardDescription>\n         </CardHeader>\n         <CardContent className=\"pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadarChart data={chartData}>\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent\n                           indicator=\"line\"\n                           labelKey=\"month\"\n                        />\n                     }\n                  />\n                  <PolarGrid />\n                  <Radar\n                     dataKey=\"desktop\"\n                     fill=\"var(--color-desktop)\"\n                     fillOpacity={0.6}\n                  />\n                  <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n                  <PolarRadiusAxis\n                     angle={60}\n                     stroke=\"hsla(var(--foreground))\"\n                     orientation=\"middle\"\n                     axisLine={false}\n                  />\n               </RadarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n               January - June 2024\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radial-grid.json b/apps/web/public/v0/styles/miami/chart-radial-grid.json
new file mode 100644
index 00000000..e6417b55
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radial-grid.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radial-grid",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-grid.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Grid</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  innerRadius={30}\n                  outerRadius={100}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent hideLabel nameKey=\"browser\" />\n                     }\n                  />\n                  <PolarGrid gridType=\"circle\" />\n                  <RadialBar dataKey=\"visitors\" />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radial-label.json b/apps/web/public/v0/styles/miami/chart-radial-label.json
new file mode 100644
index 00000000..9a4325a6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radial-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radial-label",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Label</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  startAngle={-90}\n                  endAngle={380}\n                  innerRadius={30}\n                  outerRadius={110}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent hideLabel nameKey=\"browser\" />\n                     }\n                  />\n                  <RadialBar dataKey=\"visitors\" background>\n                     <LabelList\n                        position=\"insideStart\"\n                        dataKey=\"browser\"\n                        className=\"fill-white capitalize mix-blend-luminosity\"\n                        fontSize={11}\n                     />\n                  </RadialBar>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radial-shape.json b/apps/web/public/v0/styles/miami/chart-radial-shape.json
new file mode 100644
index 00000000..0b33a01e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radial-shape.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radial-shape",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-shape.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n   Label,\n   PolarGrid,\n   PolarRadiusAxis,\n   RadialBar,\n   RadialBarChart,\n} from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { type ChartConfig, ChartContainer } from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Shape</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  endAngle={100}\n                  innerRadius={80}\n                  outerRadius={140}\n               >\n                  <PolarGrid\n                     gridType=\"circle\"\n                     radialLines={false}\n                     stroke=\"none\"\n                     className=\"first:fill-muted last:fill-background\"\n                     polarRadius={[86, 74]}\n                  />\n                  <RadialBar dataKey=\"visitors\" background />\n                  <PolarRadiusAxis\n                     tick={false}\n                     tickLine={false}\n                     axisLine={false}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-4xl font-bold\"\n                                    >\n                                       {chartData[0].visitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radial-simple.json b/apps/web/public/v0/styles/miami/chart-radial-simple.json
new file mode 100644
index 00000000..7ba4d2bb
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radial-simple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radial-simple",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n   { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n   { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n   { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   chrome: {\n      label: \"Chrome\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n   firefox: {\n      label: \"Firefox\",\n      color: \"hsl(var(--chart-3))\",\n   },\n   edge: {\n      label: \"Edge\",\n      color: \"hsl(var(--chart-4))\",\n   },\n   other: {\n      label: \"Other\",\n      color: \"hsl(var(--chart-5))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  innerRadius={30}\n                  outerRadius={110}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={\n                        <ChartTooltipContent hideLabel nameKey=\"browser\" />\n                     }\n                  />\n                  <RadialBar dataKey=\"visitors\" background />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radial-stacked.json b/apps/web/public/v0/styles/miami/chart-radial-stacked.json
new file mode 100644
index 00000000..e6eee194
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radial-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radial-stacked",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n   desktop: {\n      label: \"Desktop\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   mobile: {\n      label: \"Mobile\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Stacked</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex flex-1 items-center pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square w-full max-w-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  endAngle={180}\n                  innerRadius={80}\n                  outerRadius={130}\n               >\n                  <ChartTooltip\n                     cursor={false}\n                     content={<ChartTooltipContent hideLabel />}\n                  />\n                  <PolarRadiusAxis\n                     tick={false}\n                     tickLine={false}\n                     axisLine={false}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) - 16}\n                                       className=\"fill-foreground text-2xl font-bold\"\n                                    >\n                                       {totalVisitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 4}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n                  <RadialBar\n                     dataKey=\"desktop\"\n                     stackId=\"a\"\n                     cornerRadius={5}\n                     fill=\"var(--color-desktop)\"\n                     className=\"stroke-transparent stroke-2\"\n                  />\n                  <RadialBar\n                     dataKey=\"mobile\"\n                     fill=\"var(--color-mobile)\"\n                     stackId=\"a\"\n                     cornerRadius={5}\n                     className=\"stroke-transparent stroke-2\"\n                  />\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-radial-text.json b/apps/web/public/v0/styles/miami/chart-radial-text.json
new file mode 100644
index 00000000..eec9ece1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-radial-text.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-radial-text",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-text.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n   Label,\n   PolarGrid,\n   PolarRadiusAxis,\n   RadialBar,\n   RadialBarChart,\n} from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { type ChartConfig, ChartContainer } from \"@/components/ui/chart\"\nconst chartData = [\n   { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n   visitors: {\n      label: \"Visitors\",\n   },\n   safari: {\n      label: \"Safari\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card className=\"flex flex-col\">\n         <CardHeader className=\"items-center pb-0\">\n            <CardTitle>Radial Chart - Text</CardTitle>\n            <CardDescription>January - June 2024</CardDescription>\n         </CardHeader>\n         <CardContent className=\"flex-1 pb-0\">\n            <ChartContainer\n               config={chartConfig}\n               className=\"mx-auto aspect-square max-h-[250px]\"\n            >\n               <RadialBarChart\n                  data={chartData}\n                  startAngle={0}\n                  endAngle={250}\n                  innerRadius={80}\n                  outerRadius={110}\n               >\n                  <PolarGrid\n                     gridType=\"circle\"\n                     radialLines={false}\n                     stroke=\"none\"\n                     className=\"first:fill-muted last:fill-background\"\n                     polarRadius={[86, 74]}\n                  />\n                  <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n                  <PolarRadiusAxis\n                     tick={false}\n                     tickLine={false}\n                     axisLine={false}\n                  >\n                     <Label\n                        content={({ viewBox }) => {\n                           if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                              return (\n                                 <text\n                                    x={viewBox.cx}\n                                    y={viewBox.cy}\n                                    textAnchor=\"middle\"\n                                    dominantBaseline=\"middle\"\n                                 >\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={viewBox.cy}\n                                       className=\"fill-foreground text-4xl font-bold\"\n                                    >\n                                       {chartData[0].visitors.toLocaleString()}\n                                    </tspan>\n                                    <tspan\n                                       x={viewBox.cx}\n                                       y={(viewBox.cy || 0) + 24}\n                                       className=\"fill-muted-foreground\"\n                                    >\n                                       Visitors\n                                    </tspan>\n                                 </text>\n                              )\n                           }\n                        }}\n                     />\n                  </PolarRadiusAxis>\n               </RadialBarChart>\n            </ChartContainer>\n         </CardContent>\n         <CardFooter className=\"flex-col gap-2 text-sm\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n               Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"leading-none text-muted-foreground\">\n               Showing total visitors for the last 6 months\n            </div>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-tooltip-advanced.json b/apps/web/public/v0/styles/miami/chart-tooltip-advanced.json
new file mode 100644
index 00000000..6d901df4
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-tooltip-advanced.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-advanced",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-advanced.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Advanced</CardTitle>\n            <CardDescription>\n               Tooltip with custom formatter and total.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           hideLabel\n                           className=\"w-[180px]\"\n                           formatter={(value, name, item, index) => (\n                              <>\n                                 <div\n                                    className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n                                    style={\n                                       {\n                                          \"--color-bg\": `var(--color-${name})`,\n                                       } as React.CSSProperties\n                                    }\n                                 />\n                                 {chartConfig[name as keyof typeof chartConfig]\n                                    ?.label || name}\n                                 <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                                    {value}\n                                    <span className=\"font-normal text-muted-foreground\">\n                                       kcal\n                                    </span>\n                                 </div>\n                                 {/* Add this after the last item */}\n                                 {index === 1 && (\n                                    <div className=\"mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground\">\n                                       Total\n                                       <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                                          {item.payload.running +\n                                             item.payload.swimming}\n                                          <span className=\"font-normal text-muted-foreground\">\n                                             kcal\n                                          </span>\n                                       </div>\n                                    </div>\n                                 )}\n                              </>\n                           )}\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-tooltip-default.json b/apps/web/public/v0/styles/miami/chart-tooltip-default.json
new file mode 100644
index 00000000..543d98be
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-tooltip-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-default",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-default.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Default</CardTitle>\n            <CardDescription>\n               Default tooltip with ChartTooltipContent.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-tooltip-formatter.json b/apps/web/public/v0/styles/miami/chart-tooltip-formatter.json
new file mode 100644
index 00000000..ad04ef01
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-tooltip-formatter.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-formatter",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Formatter</CardTitle>\n            <CardDescription>Tooltip with custom formatter .</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           hideLabel\n                           formatter={(value, name) => (\n                              <div className=\"flex min-w-[130px] items-center text-xs text-muted-foreground\">\n                                 {chartConfig[name as keyof typeof chartConfig]\n                                    ?.label || name}\n                                 <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                                    {value}\n                                    <span className=\"font-normal text-muted-foreground\">\n                                       kcal\n                                    </span>\n                                 </div>\n                              </div>\n                           )}\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-tooltip-icons.json b/apps/web/public/v0/styles/miami/chart-tooltip-icons.json
new file mode 100644
index 00000000..d34f98e1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-tooltip-icons.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-icons",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-icons.tsx",
+      "content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n      icon: Footprints,\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n      icon: Waves,\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Icons</CardTitle>\n            <CardDescription>Tooltip with icons.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideLabel />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-tooltip-indicator-line.json b/apps/web/public/v0/styles/miami/chart-tooltip-indicator-line.json
new file mode 100644
index 00000000..f7f2ad6b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-tooltip-indicator-line.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-indicator-line",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-indicator-line.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Line Indicator</CardTitle>\n            <CardDescription>Tooltip with line indicator.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent indicator=\"line\" />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-tooltip-indicator-none.json b/apps/web/public/v0/styles/miami/chart-tooltip-indicator-none.json
new file mode 100644
index 00000000..f6f5bb5f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-tooltip-indicator-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-indicator-none",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-indicator-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - No Indicator</CardTitle>\n            <CardDescription>Tooltip with no indicator.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideIndicator />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-tooltip-label-custom.json b/apps/web/public/v0/styles/miami/chart-tooltip-label-custom.json
new file mode 100644
index 00000000..3d501e80
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-tooltip-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-label-custom",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   activities: {\n      label: \"Activities\",\n   },\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Custom label</CardTitle>\n            <CardDescription>\n               Tooltip with custom label from chartConfig.\n            </CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           labelKey=\"activities\"\n                           indicator=\"line\"\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-tooltip-label-formatter.json b/apps/web/public/v0/styles/miami/chart-tooltip-label-formatter.json
new file mode 100644
index 00000000..6045c9f3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-tooltip-label-formatter.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-label-formatter",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-label-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - Label Formatter</CardTitle>\n            <CardDescription>Tooltip with label formatter.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={\n                        <ChartTooltipContent\n                           labelFormatter={(value) => {\n                              return new Date(value).toLocaleDateString(\n                                 \"en-US\",\n                                 {\n                                    day: \"numeric\",\n                                    month: \"long\",\n                                    year: \"numeric\",\n                                 },\n                              )\n                           }}\n                        />\n                     }\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart-tooltip-label-none.json b/apps/web/public/v0/styles/miami/chart-tooltip-label-none.json
new file mode 100644
index 00000000..3c6a7f69
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart-tooltip-label-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart-tooltip-label-none",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-label-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   type ChartConfig,\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n   { date: \"2024-07-15\", running: 450, swimming: 300 },\n   { date: \"2024-07-16\", running: 380, swimming: 420 },\n   { date: \"2024-07-17\", running: 520, swimming: 120 },\n   { date: \"2024-07-18\", running: 140, swimming: 550 },\n   { date: \"2024-07-19\", running: 600, swimming: 350 },\n   { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n   running: {\n      label: \"Running\",\n      color: \"hsl(var(--chart-1))\",\n   },\n   swimming: {\n      label: \"Swimming\",\n      color: \"hsl(var(--chart-2))\",\n   },\n} satisfies ChartConfig\n\nexport default function Component() {\n   return (\n      <Card>\n         <CardHeader>\n            <CardTitle>Tooltip - No Label</CardTitle>\n            <CardDescription>Tooltip with no label.</CardDescription>\n         </CardHeader>\n         <CardContent>\n            <ChartContainer config={chartConfig}>\n               <BarChart accessibilityLayer data={chartData}>\n                  <XAxis\n                     dataKey=\"date\"\n                     tickLine={false}\n                     tickMargin={10}\n                     axisLine={false}\n                     tickFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                           weekday: \"short\",\n                        })\n                     }}\n                  />\n                  <Bar\n                     dataKey=\"running\"\n                     stackId=\"a\"\n                     fill=\"var(--color-running)\"\n                     radius={[0, 0, 4, 4]}\n                  />\n                  <Bar\n                     dataKey=\"swimming\"\n                     stackId=\"a\"\n                     fill=\"var(--color-swimming)\"\n                     radius={[4, 4, 0, 0]}\n                  />\n                  <ChartTooltip\n                     content={<ChartTooltipContent hideIndicator hideLabel />}\n                     cursor={false}\n                     defaultIndex={1}\n                  />\n               </BarChart>\n            </ChartContainer>\n         </CardContent>\n      </Card>\n   )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/chart.json b/apps/web/public/v0/styles/miami/chart.json
new file mode 100644
index 00000000..2217a7e0
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/chart.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "chart",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "recharts",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "card"
+  ],
+  "files": [
+    {
+      "path": "ui/chart.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n   [k in string]: {\n      label?: React.ReactNode\n      icon?: React.ComponentType\n   } & (\n      | { color?: string; theme?: never }\n      | { color?: never; theme: Record<keyof typeof THEMES, string> }\n   )\n}\n\ninterface ChartContextProps {\n   config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n   const context = React.useContext(ChartContext)\n\n   if (!context) {\n      throw new Error(\"useChart must be used within a <ChartContainer />\")\n   }\n\n   return context\n}\n\nconst ChartContainer = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      config: ChartConfig\n      children: React.ComponentProps<\n         typeof RechartsPrimitive.ResponsiveContainer\n      >[\"children\"]\n   }\n>(({ id, className, children, config, ...props }, ref) => {\n   const uniqueId = React.useId()\n   const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n   return (\n      <ChartContext.Provider value={{ config }}>\n         <div\n            data-chart={chartId}\n            ref={ref}\n            className={cn(\n               \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n               className,\n            )}\n            {...props}\n         >\n            <ChartStyle id={chartId} config={config} />\n            <RechartsPrimitive.ResponsiveContainer>\n               {children}\n            </RechartsPrimitive.ResponsiveContainer>\n         </div>\n      </ChartContext.Provider>\n   )\n})\nChartContainer.displayName = \"Chart\"\n\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n   const colorConfig = Object.entries(config).filter(\n      ([_, config]) => config.theme || config.color,\n   )\n\n   if (!colorConfig.length) {\n      return null\n   }\n\n   return (\n      <style\n         dangerouslySetInnerHTML={{\n            __html: Object.entries(THEMES).map(\n               ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n   .map(([key, itemConfig]) => {\n      const color =\n         itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n         itemConfig.color\n      return color ? `  --color-${key}: ${color};` : null\n   })\n   .join(\"\\n\")}\n}\n`,\n            ),\n         }}\n      />\n   )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n      React.ComponentProps<\"div\"> & {\n         hideLabel?: boolean\n         hideIndicator?: boolean\n         indicator?: \"line\" | \"dot\" | \"dashed\"\n         nameKey?: string\n         labelKey?: string\n      }\n>(\n   (\n      {\n         active,\n         payload,\n         className,\n         indicator = \"dot\",\n         hideLabel = false,\n         hideIndicator = false,\n         label,\n         labelFormatter,\n         labelClassName,\n         formatter,\n         color,\n         nameKey,\n         labelKey,\n      },\n      ref,\n   ) => {\n      const { config } = useChart()\n\n      const tooltipLabel = React.useMemo(() => {\n         if (hideLabel || !payload?.length) {\n            return null\n         }\n\n         const [item] = payload\n         const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n         const itemConfig = getPayloadConfigFromPayload(config, item, key)\n         const value =\n            !labelKey && typeof label === \"string\"\n               ? config[label as keyof typeof config]?.label || label\n               : itemConfig?.label\n\n         if (labelFormatter) {\n            return (\n               <div className={cn(\"font-medium\", labelClassName)}>\n                  {labelFormatter(value, payload)}\n               </div>\n            )\n         }\n\n         if (!value) {\n            return null\n         }\n\n         return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n      }, [\n         label,\n         labelFormatter,\n         payload,\n         hideLabel,\n         labelClassName,\n         config,\n         labelKey,\n      ])\n\n      if (!active || !payload?.length) {\n         return null\n      }\n\n      const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n      return (\n         <div\n            ref={ref}\n            className={cn(\n               \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n               className,\n            )}\n         >\n            {!nestLabel ? tooltipLabel : null}\n            <div className=\"grid gap-1.5\">\n               {payload.map((item, index) => {\n                  const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n                  const itemConfig = getPayloadConfigFromPayload(\n                     config,\n                     item,\n                     key,\n                  )\n                  const indicatorColor =\n                     color || item.payload.fill || item.color\n\n                  return (\n                     <div\n                        key={item.dataKey}\n                        className={cn(\n                           \"[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5\",\n                           indicator === \"dot\" && \"items-center\",\n                        )}\n                     >\n                        {formatter && item.value && item.name ? (\n                           formatter(\n                              item.value,\n                              item.name,\n                              item,\n                              index,\n                              item.payload,\n                           )\n                        ) : (\n                           <>\n                              {itemConfig?.icon ? (\n                                 <itemConfig.icon />\n                              ) : (\n                                 !hideIndicator && (\n                                    <div\n                                       className={cn(\n                                          \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                                          {\n                                             \"h-2.5 w-2.5\": indicator === \"dot\",\n                                             \"w-1\": indicator === \"line\",\n                                             \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                                indicator === \"dashed\",\n                                             \"my-0.5\":\n                                                nestLabel &&\n                                                indicator === \"dashed\",\n                                          },\n                                       )}\n                                       style={\n                                          {\n                                             \"--color-bg\": indicatorColor,\n                                             \"--color-border\": indicatorColor,\n                                          } as React.CSSProperties\n                                       }\n                                    />\n                                 )\n                              )}\n                              <div\n                                 className={cn(\n                                    \"flex flex-1 justify-between leading-none\",\n                                    nestLabel ? \"items-end\" : \"items-center\",\n                                 )}\n                              >\n                                 <div className=\"grid gap-1.5\">\n                                    {nestLabel ? tooltipLabel : null}\n                                    <span className=\"text-muted-foreground\">\n                                       {itemConfig?.label || item.name}\n                                    </span>\n                                 </div>\n                                 {item.value !== undefined && (\n                                    <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                                       {item.value.toLocaleString()}\n                                    </span>\n                                 )}\n                              </div>\n                           </>\n                        )}\n                     </div>\n                  )\n               })}\n            </div>\n         </div>\n      )\n   },\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> &\n      Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n         hideIcon?: boolean\n         nameKey?: string\n      }\n>(\n   (\n      {\n         className,\n         hideIcon = false,\n         payload,\n         verticalAlign = \"bottom\",\n         nameKey,\n      },\n      ref,\n   ) => {\n      const { config } = useChart()\n\n      if (!payload?.length) {\n         return null\n      }\n\n      return (\n         <div\n            ref={ref}\n            className={cn(\n               \"flex items-center justify-center gap-4\",\n               verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n               className,\n            )}\n         >\n            {payload.map((item) => {\n               const key = `${nameKey || item.dataKey || \"value\"}`\n               const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n               return (\n                  <div\n                     key={item.value}\n                     className={cn(\n                        \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3\",\n                     )}\n                  >\n                     {itemConfig?.icon && !hideIcon ? (\n                        <itemConfig.icon />\n                     ) : (\n                        <div\n                           className=\"size-2 shrink-0 rounded-[2px]\"\n                           style={{\n                              backgroundColor: item.color,\n                           }}\n                        />\n                     )}\n                     {itemConfig?.label}\n                  </div>\n               )\n            })}\n         </div>\n      )\n   },\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n   config: ChartConfig,\n   payload: unknown,\n   key: string,\n) {\n   if (typeof payload !== \"object\" || payload === null) {\n      return undefined\n   }\n\n   const payloadPayload =\n      \"payload\" in payload &&\n      typeof payload.payload === \"object\" &&\n      payload.payload !== null\n         ? payload.payload\n         : undefined\n\n   let configLabelKey: string = key\n\n   if (\n      key in payload &&\n      typeof payload[key as keyof typeof payload] === \"string\"\n   ) {\n      configLabelKey = payload[key as keyof typeof payload] as string\n   } else if (\n      payloadPayload &&\n      key in payloadPayload &&\n      typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n   ) {\n      configLabelKey = payloadPayload[\n         key as keyof typeof payloadPayload\n      ] as string\n   }\n\n   return configLabelKey in config\n      ? config[configLabelKey]\n      : config[key as keyof typeof config]\n}\n\nexport {\n   ChartContainer,\n   ChartTooltip,\n   ChartTooltipContent,\n   ChartLegend,\n   ChartLegendContent,\n   ChartStyle,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/checkbox-demo.json b/apps/web/public/v0/styles/miami/checkbox-demo.json
new file mode 100644
index 00000000..95979764
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/checkbox-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "checkbox-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/components/ui/checkbox\"\n\nexport default function CheckboxDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms\" />\n         <label\n            htmlFor=\"terms\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/checkbox-disabled.json b/apps/web/public/v0/styles/miami/checkbox-disabled.json
new file mode 100644
index 00000000..1079c9dd
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/checkbox-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "checkbox-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-disabled.tsx",
+      "content": "import { Checkbox } from \"@/components/ui/checkbox\"\n\nexport default function CheckboxDisabled() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms2\" disabled />\n         <label\n            htmlFor=\"terms2\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/checkbox-form-multiple.json b/apps/web/public/v0/styles/miami/checkbox-form-multiple.json
new file mode 100644
index 00000000..47ab6bf7
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/checkbox-form-multiple.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "checkbox-form-multiple",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-form-multiple.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst items = [\n   {\n      id: \"recents\",\n      label: \"Recents\",\n   },\n   {\n      id: \"home\",\n      label: \"Home\",\n   },\n   {\n      id: \"applications\",\n      label: \"Applications\",\n   },\n   {\n      id: \"desktop\",\n      label: \"Desktop\",\n   },\n   {\n      id: \"downloads\",\n      label: \"Downloads\",\n   },\n   {\n      id: \"documents\",\n      label: \"Documents\",\n   },\n] as const\n\nconst FormSchema = z.object({\n   items: z.array(z.string()).refine((value) => value.some((item) => item), {\n      message: \"You have to select at least one item.\",\n   }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         items: [\"recents\", \"home\"],\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"items\"\n               render={() => (\n                  <FormItem>\n                     <div className=\"mb-4\">\n                        <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                        <FormDescription>\n                           Select the items you want to display in the sidebar.\n                        </FormDescription>\n                     </div>\n                     {items.map((item) => (\n                        <FormField\n                           key={item.id}\n                           control={form.control}\n                           name=\"items\"\n                           render={({ field }) => {\n                              return (\n                                 <FormItem\n                                    key={item.id}\n                                    className=\"flex flex-row items-start space-x-3 space-y-0\"\n                                 >\n                                    <FormControl>\n                                       <Checkbox\n                                          checked={field.value?.includes(\n                                             item.id,\n                                          )}\n                                          onCheckedChange={(checked) => {\n                                             return checked\n                                                ? field.onChange([\n                                                     ...field.value,\n                                                     item.id,\n                                                  ])\n                                                : field.onChange(\n                                                     field.value?.filter(\n                                                        (value) =>\n                                                           value !== item.id,\n                                                     ),\n                                                  )\n                                          }}\n                                       />\n                                    </FormControl>\n                                    <FormLabel className=\"text-sm font-normal\">\n                                       {item.label}\n                                    </FormLabel>\n                                 </FormItem>\n                              )\n                           }}\n                        />\n                     ))}\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/checkbox-form-single.json b/apps/web/public/v0/styles/miami/checkbox-form-single.json
new file mode 100644
index 00000000..2d5cb27f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/checkbox-form-single.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "checkbox-form-single",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-form-single.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport Link from \"next/link\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n} from \"@/components/ui/form\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   mobile: z.boolean().default(false).optional(),\n})\n\nexport default function CheckboxReactHookFormSingle() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         mobile: true,\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"mobile\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow\">\n                     <FormControl>\n                        <Checkbox\n                           checked={field.value}\n                           onCheckedChange={field.onChange}\n                        />\n                     </FormControl>\n                     <div className=\"space-y-1 leading-none\">\n                        <FormLabel>\n                           Use different settings for my mobile devices\n                        </FormLabel>\n                        <FormDescription>\n                           You can manage your mobile notifications in the{\" \"}\n                           <Link href=\"/examples/forms\">mobile settings</Link>{\" \"}\n                           page.\n                        </FormDescription>\n                     </div>\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/checkbox-with-text.json b/apps/web/public/v0/styles/miami/checkbox-with-text.json
new file mode 100644
index 00000000..3209f281
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/checkbox-with-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "checkbox-with-text",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-with-text.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/components/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n   return (\n      <div className=\"items-top flex space-x-2\">\n         <Checkbox id=\"terms1\" />\n         <div className=\"grid gap-1.5 leading-none\">\n            <label\n               htmlFor=\"terms1\"\n               className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n            >\n               Accept terms and conditions\n            </label>\n            <p className=\"text-muted-foreground text-sm\">\n               You agree to our Terms of Service and Privacy Policy.\n            </p>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/checkbox.json b/apps/web/public/v0/styles/miami/checkbox.json
new file mode 100644
index 00000000..c006062f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/checkbox.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "checkbox",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-checkbox"
+  ],
+  "files": [
+    {
+      "path": "ui/checkbox.tsx",
+      "content": "\"use client\"\n\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { CheckIcon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n   React.ElementRef<typeof CheckboxPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n         \"border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <CheckboxPrimitive.Indicator\n         className={cn(\"flex items-center justify-center text-current\")}\n      >\n         <CheckIcon className=\"size-4\" />\n      </CheckboxPrimitive.Indicator>\n   </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/client-tweet-card.json b/apps/web/public/v0/styles/miami/client-tweet-card.json
new file mode 100644
index 00000000..6e892b26
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/client-tweet-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "client-tweet-card",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "react-tweet"
+  ],
+  "files": [
+    {
+      "path": "ui/client-tweet-card.tsx",
+      "content": "\"use client\"\n\nimport type { TweetProps } from \"react-tweet\"\nimport { useTweet } from \"react-tweet\"\nimport {\n   MagicTweet,\n   TweetNotFound,\n   TweetSkeleton,\n} from \"@/components/ui/tweet-card\"\n\nfunction ClientTweetCard({\n   id,\n   apiUrl,\n   fallback = <TweetSkeleton />,\n   components,\n   fetchOptions,\n   onError,\n   ...props\n}: TweetProps & { className?: string }) {\n   const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions)\n\n   if (isLoading) return fallback\n   if (error || !data) {\n      const NotFound = components?.TweetNotFound || TweetNotFound\n      return <NotFound error={onError ? onError(error) : error} />\n   }\n\n   return <MagicTweet tweet={data} components={components} {...props} />\n}\n\nexport default ClientTweetCard\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/collapsible-demo.json b/apps/web/public/v0/styles/miami/collapsible-demo.json
new file mode 100644
index 00000000..685e4c78
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/collapsible-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "collapsible-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "examples/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport { CaretSortIcon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   return (\n      <Collapsible\n         open={isOpen}\n         onOpenChange={setIsOpen}\n         className=\"w-[350px] space-y-2\"\n      >\n         <div className=\"flex items-center justify-between space-x-4 px-4\">\n            <h4 className=\"text-sm font-semibold\">\n               @peduarte starred 3 repositories\n            </h4>\n            <CollapsibleTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <CaretSortIcon className=\"size-4\" />\n                  <span className=\"sr-only\">Toggle</span>\n               </Button>\n            </CollapsibleTrigger>\n         </div>\n         <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n            @radix-ui/primitives\n         </div>\n         <CollapsibleContent className=\"space-y-2\">\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @radix-ui/colors\n            </div>\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @stitches/react\n            </div>\n         </CollapsibleContent>\n      </Collapsible>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/collapsible.json b/apps/web/public/v0/styles/miami/collapsible.json
new file mode 100644
index 00000000..9bbe7f98
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/collapsible.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "collapsible",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-collapsible"
+  ],
+  "files": [
+    {
+      "path": "ui/collapsible.tsx",
+      "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/combobox-demo.json b/apps/web/public/v0/styles/miami/combobox-demo.json
new file mode 100644
index 00000000..5aa4d432
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/combobox-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "combobox-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nconst frameworks = [\n   {\n      value: \"next.js\",\n      label: \"Next.js\",\n   },\n   {\n      value: \"sveltekit\",\n      label: \"SvelteKit\",\n   },\n   {\n      value: \"nuxt.js\",\n      label: \"Nuxt.js\",\n   },\n   {\n      value: \"remix\",\n      label: \"Remix\",\n   },\n   {\n      value: \"astro\",\n      label: \"Astro\",\n   },\n]\n\nexport default function ComboboxDemo() {\n   const [open, setOpen] = React.useState(false)\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <Popover open={open} onOpenChange={setOpen}>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               role=\"combobox\"\n               aria-expanded={open}\n               className=\"w-[200px] justify-between\"\n            >\n               {value\n                  ? frameworks.find((framework) => framework.value === value)\n                       ?.label\n                  : \"Select framework...\"}\n               <ChevronsUpDown className=\"opacity-50\" />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[200px] p-0\">\n            <Command>\n               <CommandInput\n                  placeholder=\"Search framework...\"\n                  className=\"h-9\"\n               />\n               <CommandList>\n                  <CommandEmpty>No framework found.</CommandEmpty>\n                  <CommandGroup>\n                     {frameworks.map((framework) => (\n                        <CommandItem\n                           key={framework.value}\n                           value={framework.value}\n                           onSelect={(currentValue) => {\n                              setValue(\n                                 currentValue === value ? \"\" : currentValue,\n                              )\n                              setOpen(false)\n                           }}\n                        >\n                           {framework.label}\n                           <Check\n                              className={cn(\n                                 \"ml-auto\",\n                                 value === framework.value\n                                    ? \"opacity-100\"\n                                    : \"opacity-0\",\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/combobox-dropdown-menu.json b/apps/web/public/v0/styles/miami/combobox-dropdown-menu.json
new file mode 100644
index 00000000..7bfe733c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/combobox-dropdown-menu.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "combobox-dropdown-menu",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "command",
+    "dropdown-menu",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport { MoreHorizontal } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nconst labels = [\n   \"feature\",\n   \"bug\",\n   \"enhancement\",\n   \"documentation\",\n   \"design\",\n   \"question\",\n   \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n   const [label, setLabel] = React.useState(\"feature\")\n   const [open, setOpen] = React.useState(false)\n\n   return (\n      <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n         <p className=\"text-sm font-medium leading-none\">\n            <span className=\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\">\n               {label}\n            </span>\n            <span className=\"text-muted-foreground\">Create a new project</span>\n         </p>\n         <DropdownMenu open={open} onOpenChange={setOpen}>\n            <DropdownMenuTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <MoreHorizontal />\n               </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n               <DropdownMenuLabel>Actions</DropdownMenuLabel>\n               <DropdownMenuGroup>\n                  <DropdownMenuItem>Assign to...</DropdownMenuItem>\n                  <DropdownMenuItem>Set due date...</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuSub>\n                     <DropdownMenuSubTrigger>\n                        Apply label\n                     </DropdownMenuSubTrigger>\n                     <DropdownMenuSubContent className=\"p-0\">\n                        <Command>\n                           <CommandInput\n                              placeholder=\"Filter label...\"\n                              autoFocus\n                              className=\"h-9\"\n                           />\n                           <CommandList>\n                              <CommandEmpty>No label found.</CommandEmpty>\n                              <CommandGroup>\n                                 {labels.map((label) => (\n                                    <CommandItem\n                                       key={label}\n                                       value={label}\n                                       onSelect={(value) => {\n                                          setLabel(value)\n                                          setOpen(false)\n                                       }}\n                                    >\n                                       {label}\n                                    </CommandItem>\n                                 ))}\n                              </CommandGroup>\n                           </CommandList>\n                        </Command>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"text-red-600\">\n                     Delete\n                     <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n               </DropdownMenuGroup>\n            </DropdownMenuContent>\n         </DropdownMenu>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/combobox-form.json b/apps/web/public/v0/styles/miami/combobox-form.json
new file mode 100644
index 00000000..8aecb101
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/combobox-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "combobox-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "command",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/hooks/use-toast\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nconst languages = [\n   { label: \"English\", value: \"en\" },\n   { label: \"French\", value: \"fr\" },\n   { label: \"German\", value: \"de\" },\n   { label: \"Spanish\", value: \"es\" },\n   { label: \"Portuguese\", value: \"pt\" },\n   { label: \"Russian\", value: \"ru\" },\n   { label: \"Japanese\", value: \"ja\" },\n   { label: \"Korean\", value: \"ko\" },\n   { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n   language: z.string({\n      required_error: \"Please select a language.\",\n   }),\n})\n\nexport default function ComboboxForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"language\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Language</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 role=\"combobox\"\n                                 className={cn(\n                                    \"w-[200px] justify-between\",\n                                    !field.value && \"text-muted-foreground\",\n                                 )}\n                              >\n                                 {field.value\n                                    ? languages.find(\n                                         (language) =>\n                                            language.value === field.value,\n                                      )?.label\n                                    : \"Select language\"}\n                                 <ChevronsUpDown className=\"opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-[200px] p-0\">\n                           <Command>\n                              <CommandInput\n                                 placeholder=\"Search framework...\"\n                                 className=\"h-9\"\n                              />\n                              <CommandList>\n                                 <CommandEmpty>\n                                    No framework found.\n                                 </CommandEmpty>\n                                 <CommandGroup>\n                                    {languages.map((language) => (\n                                       <CommandItem\n                                          value={language.label}\n                                          key={language.value}\n                                          onSelect={() => {\n                                             form.setValue(\n                                                \"language\",\n                                                language.value,\n                                             )\n                                          }}\n                                       >\n                                          {language.label}\n                                          <Check\n                                             className={cn(\n                                                \"ml-auto\",\n                                                language.value === field.value\n                                                   ? \"opacity-100\"\n                                                   : \"opacity-0\",\n                                             )}\n                                          />\n                                       </CommandItem>\n                                    ))}\n                                 </CommandGroup>\n                              </CommandList>\n                           </Command>\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        This is the language that will be used in the dashboard.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/combobox-popover.json b/apps/web/public/v0/styles/miami/combobox-popover.json
new file mode 100644
index 00000000..a83839df
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/combobox-popover.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "combobox-popover",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "combobox",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\ninterface Status {\n   value: string\n   label: string\n}\n\nconst statuses: Status[] = [\n   {\n      value: \"backlog\",\n      label: \"Backlog\",\n   },\n   {\n      value: \"todo\",\n      label: \"Todo\",\n   },\n   {\n      value: \"in progress\",\n      label: \"In Progress\",\n   },\n   {\n      value: \"done\",\n      label: \"Done\",\n   },\n   {\n      value: \"canceled\",\n      label: \"Canceled\",\n   },\n]\n\nexport default function ComboboxPopover() {\n   const [open, setOpen] = React.useState(false)\n   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n      null,\n   )\n\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <p className=\"text-muted-foreground text-sm\">Status</p>\n         <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n               <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n                  {selectedStatus ? (\n                     <>{selectedStatus.label}</>\n                  ) : (\n                     <>+ Set status</>\n                  )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n               <Command>\n                  <CommandInput placeholder=\"Change status...\" />\n                  <CommandList>\n                     <CommandEmpty>No results found.</CommandEmpty>\n                     <CommandGroup>\n                        {statuses.map((status) => (\n                           <CommandItem\n                              key={status.value}\n                              value={status.value}\n                              onSelect={(value) => {\n                                 setSelectedStatus(\n                                    statuses.find(\n                                       (priority) => priority.value === value,\n                                    ) || null,\n                                 )\n                                 setOpen(false)\n                              }}\n                           >\n                              {status.label}\n                           </CommandItem>\n                        ))}\n                     </CommandGroup>\n                  </CommandList>\n               </Command>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/combobox-responsive.json b/apps/web/public/v0/styles/miami/combobox-responsive.json
new file mode 100644
index 00000000..c5681f23
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/combobox-responsive.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "combobox-responsive",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "combobox",
+    "popover",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport {\n   Drawer,\n   DrawerContent,\n   DrawerTrigger,\n} from \"@/components/ui/drawer\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\ninterface Status {\n   value: string\n   label: string\n}\n\nconst statuses: Status[] = [\n   {\n      value: \"backlog\",\n      label: \"Backlog\",\n   },\n   {\n      value: \"todo\",\n      label: \"Todo\",\n   },\n   {\n      value: \"in progress\",\n      label: \"In Progress\",\n   },\n   {\n      value: \"done\",\n      label: \"Done\",\n   },\n   {\n      value: \"canceled\",\n      label: \"Canceled\",\n   },\n]\n\nexport default function ComboBoxResponsive() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n      null,\n   )\n\n   if (isDesktop) {\n      return (\n         <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n               <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n                  {selectedStatus ? (\n                     <>{selectedStatus.label}</>\n                  ) : (\n                     <>+ Set status</>\n                  )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n               <StatusList\n                  setOpen={setOpen}\n                  setSelectedStatus={setSelectedStatus}\n               />\n            </PopoverContent>\n         </Popover>\n      )\n   }\n\n   return (\n      <Drawer open={open} onOpenChange={setOpen}>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n               {selectedStatus ? (\n                  <>{selectedStatus.label}</>\n               ) : (\n                  <>+ Set status</>\n               )}\n            </Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mt-4 border-t\">\n               <StatusList\n                  setOpen={setOpen}\n                  setSelectedStatus={setSelectedStatus}\n               />\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n\nfunction StatusList({\n   setOpen,\n   setSelectedStatus,\n}: {\n   setOpen: (open: boolean) => void\n   setSelectedStatus: (status: Status | null) => void\n}) {\n   return (\n      <Command>\n         <CommandInput placeholder=\"Filter status...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n               {statuses.map((status) => (\n                  <CommandItem\n                     key={status.value}\n                     value={status.value}\n                     onSelect={(value) => {\n                        setSelectedStatus(\n                           statuses.find(\n                              (priority) => priority.value === value,\n                           ) || null,\n                        )\n                        setOpen(false)\n                     }}\n                  >\n                     {status.label}\n                  </CommandItem>\n               ))}\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/command-demo.json b/apps/web/public/v0/styles/miami/command-demo.json
new file mode 100644
index 00000000..f3ae30f8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/command-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "command-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "examples/command-demo.tsx",
+      "content": "import {\n   CalendarIcon,\n   EnvelopeClosedIcon,\n   FaceIcon,\n   GearIcon,\n   PersonIcon,\n   RocketIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from \"@/components/ui/command\"\n\nexport default function CommandDemo() {\n   return (\n      <Command className=\"rounded-lg border shadow-md\">\n         <CommandInput placeholder=\"Type a command or search...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Suggestions\">\n               <CommandItem>\n                  <CalendarIcon className=\"mr-2 size-4\" />\n                  <span>Calendar</span>\n               </CommandItem>\n               <CommandItem>\n                  <FaceIcon className=\"mr-2 size-4\" />\n                  <span>Search Emoji</span>\n               </CommandItem>\n               <CommandItem>\n                  <RocketIcon className=\"mr-2 size-4\" />\n                  <span>Launch</span>\n               </CommandItem>\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup heading=\"Settings\">\n               <CommandItem>\n                  <PersonIcon className=\"mr-2 size-4\" />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <EnvelopeClosedIcon className=\"mr-2 size-4\" />\n                  <span>Mail</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <GearIcon className=\"mr-2 size-4\" />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n               </CommandItem>\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/command-dialog.json b/apps/web/public/v0/styles/miami/command-dialog.json
new file mode 100644
index 00000000..63a8e398
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/command-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "command-dialog",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "command",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/command-dialog.tsx",
+      "content": "\"use client\"\n\nimport {\n   CalendarIcon,\n   EnvelopeClosedIcon,\n   FaceIcon,\n   GearIcon,\n   PersonIcon,\n   RocketIcon,\n} from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport {\n   CommandDialog,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from \"@/components/ui/command\"\n\nexport default function CommandDialogDemo() {\n   const [open, setOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      const down = (e: KeyboardEvent) => {\n         if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n            e.preventDefault()\n            setOpen((open) => !open)\n         }\n      }\n\n      document.addEventListener(\"keydown\", down)\n      return () => document.removeEventListener(\"keydown\", down)\n   }, [])\n\n   return (\n      <>\n         <p className=\"text-muted-foreground text-sm\">\n            Press{\" \"}\n            <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100\">\n               <span className=\"text-xs\">⌘</span>J\n            </kbd>\n         </p>\n         <CommandDialog open={open} onOpenChange={setOpen}>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n               <CommandEmpty>No results found.</CommandEmpty>\n               <CommandGroup heading=\"Suggestions\">\n                  <CommandItem>\n                     <CalendarIcon className=\"mr-2 size-4\" />\n                     <span>Calendar</span>\n                  </CommandItem>\n                  <CommandItem>\n                     <FaceIcon className=\"mr-2 size-4\" />\n                     <span>Search Emoji</span>\n                  </CommandItem>\n                  <CommandItem>\n                     <RocketIcon className=\"mr-2 size-4\" />\n                     <span>Launch</span>\n                  </CommandItem>\n               </CommandGroup>\n               <CommandSeparator />\n               <CommandGroup heading=\"Settings\">\n                  <CommandItem>\n                     <PersonIcon className=\"mr-2 size-4\" />\n                     <span>Profile</span>\n                     <CommandShortcut>⌘P</CommandShortcut>\n                  </CommandItem>\n                  <CommandItem>\n                     <EnvelopeClosedIcon className=\"mr-2 size-4\" />\n                     <span>Mail</span>\n                     <CommandShortcut>⌘B</CommandShortcut>\n                  </CommandItem>\n                  <CommandItem>\n                     <GearIcon className=\"mr-2 size-4\" />\n                     <span>Settings</span>\n                     <CommandShortcut>⌘S</CommandShortcut>\n                  </CommandItem>\n               </CommandGroup>\n            </CommandList>\n         </CommandDialog>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/command.json b/apps/web/public/v0/styles/miami/command.json
new file mode 100644
index 00000000..558fe375
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/command.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "command",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "cmdk@1.0.0"
+  ],
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/command.tsx",
+      "content": "\"use client\"\n\nimport type { DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/components/ui/dialog\"\n\nconst Command = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive\n      ref={ref}\n      className={cn(\n         \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md\",\n         className,\n      )}\n      {...props}\n   />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nfunction CommandDialog({ children, ...props }: DialogProps) {\n   return (\n      <Dialog {...props}>\n         <DialogContent className=\"overflow-hidden p-0\">\n            <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5\">\n               {children}\n            </Command>\n         </DialogContent>\n      </Dialog>\n   )\n}\n\nconst CommandInput = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Input>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n   <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n         ref={ref}\n         className={cn(\n            \"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n            className,\n         )}\n         {...props}\n      />\n   </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.List\n      ref={ref}\n      className={cn(\n         \"max-h-[300px] overflow-y-auto overflow-x-hidden\",\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Empty>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n   <CommandPrimitive.Empty\n      ref={ref}\n      className=\"py-6 text-center text-sm\"\n      {...props}\n   />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Group>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Group\n      ref={ref}\n      className={cn(\n         \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Separator\n      ref={ref}\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n   />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n   React.ElementRef<typeof CommandPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n   <CommandPrimitive.Item\n      ref={ref}\n      className={cn(\n         \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n         className,\n      )}\n      {...props}\n   />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nfunction CommandShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={cn(\n            \"text-muted-foreground ml-auto text-xs tracking-widest\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n   Command,\n   CommandDialog,\n   CommandInput,\n   CommandList,\n   CommandEmpty,\n   CommandGroup,\n   CommandItem,\n   CommandShortcut,\n   CommandSeparator,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/confetti-basic-cannon.json b/apps/web/public/v0/styles/miami/confetti-basic-cannon.json
new file mode 100644
index 00000000..5897e9cf
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/confetti-basic-cannon.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-basic-cannon",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-basic-cannon.tsx",
+      "content": "import { ConfettiButton } from \"@/components/ui/confetti\"\n\nexport default function ConfettiButtonDemo() {\n   return (\n      <div className=\"relative\">\n         <ConfettiButton>Confetti 🎉</ConfettiButton>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/confetti-custom-shapes.json b/apps/web/public/v0/styles/miami/confetti-custom-shapes.json
new file mode 100644
index 00000000..04caee2e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/confetti-custom-shapes.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-custom-shapes",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-custom-shapes.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ConfettiCustomShapes() {\n   const handleClick = () => {\n      const scalar = 2\n      const triangle = confetti.shapeFromPath({\n         path: \"M0 10 L5 0 L10 10z\",\n      })\n      const square = confetti.shapeFromPath({\n         path: \"M0 0 L10 0 L10 10 L0 10 Z\",\n      })\n      const coin = confetti.shapeFromPath({\n         path: \"M5 0 A5 5 0 1 0 5 10 A5 5 0 1 0 5 0 Z\",\n      })\n      const tree = confetti.shapeFromPath({\n         path: \"M5 0 L10 10 L0 10 Z\",\n      })\n\n      const defaults = {\n         spread: 360,\n         ticks: 60,\n         gravity: 0,\n         decay: 0.96,\n         startVelocity: 20,\n         shapes: [triangle, square, coin, tree],\n         scalar,\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 30,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 5,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: [\"circle\"],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative flex items-center justify-center\">\n         <Button onClick={handleClick}>Trigger Shapes</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/confetti-demo.json b/apps/web/public/v0/styles/miami/confetti-demo.json
new file mode 100644
index 00000000..5233c7e8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/confetti-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-demo.tsx",
+      "content": "\"use client\"\n\nimport { useRef } from \"react\"\n\nimport type { ConfettiRef } from \"@/components/ui/confetti\"\nimport Confetti from \"@/components/ui/confetti\"\n\nexport default function ConfettiDemo() {\n   const confettiRef = useRef<ConfettiRef>(null)\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Confetti\n         </span>\n\n         <Confetti\n            ref={confettiRef}\n            className=\"absolute left-0 top-0 z-0 size-full\"\n            onMouseEnter={() => {\n               confettiRef.current?.fire({})\n            }}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/confetti-emoji.json b/apps/web/public/v0/styles/miami/confetti-emoji.json
new file mode 100644
index 00000000..bd9f53bf
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/confetti-emoji.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-emoji",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-emoji.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ConfettiEmoji() {\n   const handleClick = () => {\n      const scalar = 2\n      const unicorn = confetti.shapeFromText({ text: \"🦄\", scalar })\n\n      const defaults = {\n         spread: 360,\n         ticks: 60,\n         gravity: 0,\n         decay: 0.96,\n         startVelocity: 20,\n         shapes: [unicorn],\n         scalar,\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 30,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 5,\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: [\"circle\"],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative justify-center\">\n         <Button onClick={handleClick}>Trigger Emoji</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/confetti-fireworks.json b/apps/web/public/v0/styles/miami/confetti-fireworks.json
new file mode 100644
index 00000000..727bf94d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/confetti-fireworks.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-fireworks",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-fireworks.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ConfettiFireworks() {\n   const handleClick = () => {\n      const duration = 5 * 1000\n      const animationEnd = Date.now() + duration\n      const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }\n\n      const randomInRange = (min: number, max: number) =>\n         Math.random() * (max - min) + min\n\n      const interval = window.setInterval(() => {\n         const timeLeft = animationEnd - Date.now()\n\n         if (timeLeft <= 0) return clearInterval(interval)\n\n         const particleCount = 50 * (timeLeft / duration)\n         confetti({\n            ...defaults,\n            particleCount,\n            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },\n         })\n         confetti({\n            ...defaults,\n            particleCount,\n            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },\n         })\n      }, 250)\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Fireworks</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/confetti-hover.json b/apps/web/public/v0/styles/miami/confetti-hover.json
new file mode 100644
index 00000000..6fdbe8a5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/confetti-hover.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-hover",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-hover.tsx",
+      "content": "\"use client\"\n\nimport { useRef } from \"react\"\nimport type { ConfettiRef } from \"@/components/ui/confetti\"\nimport Confetti from \"@/components/ui/confetti\"\n\nexport default function ConfettiBasicCannon() {\n   const confettiRef = useRef<ConfettiRef>(null)\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full max-w-lg flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Confetti\n         </span>\n\n         <Confetti\n            ref={confettiRef}\n            className=\"absolute left-0 top-0 z-0 size-full\"\n            onMouseEnter={() => {\n               confettiRef.current?.fire({})\n            }}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/confetti-random-direction.json b/apps/web/public/v0/styles/miami/confetti-random-direction.json
new file mode 100644
index 00000000..1dcac6ee
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/confetti-random-direction.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-random-direction",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-random-direction.tsx",
+      "content": "import { ConfettiButton } from \"@/components/ui/confetti\"\n\nexport default function ConfettiButtonDemo() {\n   return (\n      <div className=\"relative\">\n         <ConfettiButton\n            options={{\n               get angle() {\n                  return Math.random() * 360\n               },\n            }}\n         >\n            Random Confetti 🎉\n         </ConfettiButton>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/confetti-side-cannons.json b/apps/web/public/v0/styles/miami/confetti-side-cannons.json
new file mode 100644
index 00000000..5f9d32f9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/confetti-side-cannons.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-side-cannons",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-side-cannons.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ConfettiSideCannons() {\n   const handleClick = () => {\n      const end = Date.now() + 3 * 1000 // 3 seconds\n      const colors = [\"#a786ff\", \"#fd8bbc\", \"#eca184\", \"#f8deb1\"]\n\n      const frame = () => {\n         if (Date.now() > end) return\n\n         confetti({\n            particleCount: 2,\n            angle: 60,\n            spread: 55,\n            startVelocity: 60,\n            origin: { x: 0, y: 0.5 },\n            colors,\n         })\n         confetti({\n            particleCount: 2,\n            angle: 120,\n            spread: 55,\n            startVelocity: 60,\n            origin: { x: 1, y: 0.5 },\n            colors,\n         })\n\n         requestAnimationFrame(frame)\n      }\n\n      frame()\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Side Cannons</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/confetti-stars.json b/apps/web/public/v0/styles/miami/confetti-stars.json
new file mode 100644
index 00000000..29bab1b7
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/confetti-stars.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti-stars",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/confetti-stars.tsx",
+      "content": "import confetti from \"canvas-confetti\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ConfettiStars() {\n   const handleClick = () => {\n      const defaults = {\n         spread: 360,\n         ticks: 50,\n         gravity: 0,\n         decay: 0.94,\n         startVelocity: 30,\n         colors: [\"#FFE400\", \"#FFBD00\", \"#E89400\", \"#FFCA6C\", \"#FDFFB8\"],\n      }\n\n      const shoot = () => {\n         confetti({\n            ...defaults,\n            particleCount: 40,\n            scalar: 1.2,\n            shapes: [\"star\"],\n         })\n\n         confetti({\n            ...defaults,\n            particleCount: 10,\n            scalar: 0.75,\n            shapes: [\"circle\"],\n         })\n      }\n\n      setTimeout(shoot, 0)\n      setTimeout(shoot, 100)\n      setTimeout(shoot, 200)\n   }\n\n   return (\n      <div className=\"relative\">\n         <Button onClick={handleClick}>Trigger Stars</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/confetti.json b/apps/web/public/v0/styles/miami/confetti.json
new file mode 100644
index 00000000..c529a80b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/confetti.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "confetti",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "canvas-confetti",
+    "@types/canvas-confetti"
+  ],
+  "files": [
+    {
+      "path": "ui/confetti.tsx",
+      "content": "\"use client\"\nimport confetti from \"canvas-confetti\"\nimport type { ReactNode } from \"react\"\nimport type React from \"react\"\nimport {\n   createContext,\n   forwardRef,\n   useCallback,\n   useEffect,\n   useImperativeHandle,\n   useMemo,\n   useRef,\n} from \"react\"\n\nimport type {\n   GlobalOptions as ConfettiGlobalOptions,\n   CreateTypes as ConfettiInstance,\n   Options as ConfettiOptions,\n} from \"canvas-confetti\"\nimport { Button } from \"@/components/ui/button\"\nimport type { ButtonProps } from \"@/components/ui/button\"\n\ninterface Api {\n   fire: (options?: ConfettiOptions) => void\n}\n\ntype Props = React.ComponentPropsWithRef<\"canvas\"> & {\n   options?: ConfettiOptions\n   globalOptions?: ConfettiGlobalOptions\n   manualstart?: boolean\n   children?: ReactNode\n}\n\nexport type ConfettiRef = Api | null\n\nconst ConfettiContext = createContext<Api>({} as Api)\n\nconst Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {\n   const {\n      options,\n      globalOptions = { resize: true, useWorker: true },\n      manualstart = false,\n      children,\n      ...rest\n   } = props\n   const instanceRef = useRef<ConfettiInstance | null>(null) // confetti instance\n\n   const canvasRef = useCallback(\n      // https://react.dev/reference/react-dom/components/common#ref-callback\n      // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs\n      (node: HTMLCanvasElement) => {\n         if (node !== null) {\n            // <canvas> is mounted => create the confetti instance\n            if (instanceRef.current) return // if not already created\n            instanceRef.current = confetti.create(node, {\n               ...globalOptions,\n               resize: true,\n            })\n         } else {\n            // <canvas> is unmounted => reset and destroy instanceRef\n            if (instanceRef.current) {\n               instanceRef.current.reset()\n               instanceRef.current = null\n            }\n         }\n      },\n      [globalOptions],\n   )\n\n   // `fire` is a function that calls the instance() with `opts` merged with `options`\n   const fire = useCallback(\n      (opts = {}) => instanceRef.current?.({ ...options, ...opts }),\n      [options],\n   )\n\n   const api = useMemo(\n      () => ({\n         fire,\n      }),\n      [fire],\n   )\n\n   useImperativeHandle(ref, () => api, [api])\n\n   useEffect(() => {\n      if (!manualstart) fire()\n   }, [manualstart, fire])\n\n   return (\n      <ConfettiContext.Provider value={api}>\n         <canvas ref={canvasRef} {...rest} />\n         {children}\n      </ConfettiContext.Provider>\n   )\n})\n\ninterface ConfettiButtonProps extends ButtonProps {\n   options?: ConfettiOptions &\n      ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }\n   children?: React.ReactNode\n}\n\nfunction ConfettiButton({ options, children, ...props }: ConfettiButtonProps) {\n   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      const rect = event.currentTarget.getBoundingClientRect()\n      const x = rect.left + rect.width / 2\n      const y = rect.top + rect.height / 2\n      confetti({\n         ...options,\n         origin: {\n            x: x / window.innerWidth,\n            y: y / window.innerHeight,\n         },\n      })\n   }\n\n   return (\n      <Button onClick={handleClick} {...props}>\n         {children}\n      </Button>\n   )\n}\n\nexport { Confetti, ConfettiButton }\n\nexport default Confetti\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/context-menu-demo.json b/apps/web/public/v0/styles/miami/context-menu-demo.json
new file mode 100644
index 00000000..509177c1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/context-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "context-menu-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "context-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/context-menu-demo.tsx",
+      "content": "import {\n   ContextMenu,\n   ContextMenuCheckboxItem,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuLabel,\n   ContextMenuRadioGroup,\n   ContextMenuRadioItem,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuTrigger,\n} from \"@/components/ui/context-menu\"\n\nexport default function ContextMenuDemo() {\n   return (\n      <ContextMenu>\n         <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n            Right click here\n         </ContextMenuTrigger>\n         <ContextMenuContent className=\"w-64\">\n            <ContextMenuItem inset>\n               Back\n               <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset disabled>\n               Forward\n               <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset>\n               Reload\n               <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSub>\n               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n               <ContextMenuSubContent className=\"w-48\">\n                  <ContextMenuItem>\n                     Save Page As...\n                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n                  </ContextMenuItem>\n                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                  <ContextMenuItem>Name Window...</ContextMenuItem>\n                  <ContextMenuSeparator />\n                  <ContextMenuItem>Developer Tools</ContextMenuItem>\n               </ContextMenuSubContent>\n            </ContextMenuSub>\n            <ContextMenuSeparator />\n            <ContextMenuCheckboxItem checked>\n               Show Bookmarks Bar\n               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuSeparator />\n            <ContextMenuRadioGroup value=\"pedro\">\n               <ContextMenuLabel inset>People</ContextMenuLabel>\n               <ContextMenuSeparator />\n               <ContextMenuRadioItem value=\"pedro\">\n                  Pedro Duarte\n               </ContextMenuRadioItem>\n               <ContextMenuRadioItem value=\"colm\">\n                  Colm Tuite\n               </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n         </ContextMenuContent>\n      </ContextMenu>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/context-menu.json b/apps/web/public/v0/styles/miami/context-menu.json
new file mode 100644
index 00000000..fd2fc0a9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/context-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "context-menu",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-context-menu"
+  ],
+  "files": [
+    {
+      "path": "ui/context-menu.tsx",
+      "content": "\"use client\"\n\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport {\n   CheckIcon,\n   ChevronRightIcon,\n   DotFilledIcon,\n} from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <ContextMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n   </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.SubContent\n      ref={ref}\n      className={cn(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg\",\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n         ref={ref}\n         className={cn(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md\",\n            className,\n         )}\n         {...props}\n      />\n   </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <ContextMenuPrimitive.Item\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <ContextMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <ContextMenuPrimitive.ItemIndicator>\n            <CheckIcon className=\"size-4\" />\n         </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n   ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <ContextMenuPrimitive.RadioItem\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <ContextMenuPrimitive.ItemIndicator>\n            <DotFilledIcon className=\"size-4 fill-current\" />\n         </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <ContextMenuPrimitive.Label\n      ref={ref}\n      className={cn(\n         \"text-foreground px-2 py-1.5 text-sm font-semibold\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n   React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <ContextMenuPrimitive.Separator\n      ref={ref}\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nfunction ContextMenuShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={cn(\n            \"text-muted-foreground ml-auto text-xs tracking-widest\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n   ContextMenu,\n   ContextMenuTrigger,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuCheckboxItem,\n   ContextMenuRadioItem,\n   ContextMenuLabel,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuGroup,\n   ContextMenuPortal,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuRadioGroup,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/cool-mode-custom.json b/apps/web/public/v0/styles/miami/cool-mode-custom.json
new file mode 100644
index 00000000..f65249eb
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/cool-mode-custom.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "cool-mode-custom",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/cool-mode-custom.tsx",
+      "content": "import React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { CoolMode } from \"@/components/ui/cool-mode\"\n\nexport default function CoolModeCustom() {\n   return (\n      <div className=\"relative justify-center\">\n         <CoolMode\n            options={{\n               particle:\n                  \"https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg\",\n            }}\n         >\n            <Button>Click Me!</Button>\n         </CoolMode>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/cool-mode-demo.json b/apps/web/public/v0/styles/miami/cool-mode-demo.json
new file mode 100644
index 00000000..0f3b1374
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/cool-mode-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "cool-mode-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/cool-mode-demo.tsx",
+      "content": "import React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { CoolMode } from \"@/components/ui/cool-mode\"\n\nexport default function CoolModeDemo() {\n   return (\n      <div className=\"relative justify-center\">\n         <CoolMode>\n            <Button>Click Me!</Button>\n         </CoolMode>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/cool-mode.json b/apps/web/public/v0/styles/miami/cool-mode.json
new file mode 100644
index 00000000..8e1d74d5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/cool-mode.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "cool-mode",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/cool-mode.tsx",
+      "content": "\"use client\"\nimport type { ReactNode } from \"react\"\nimport React, { useEffect, useRef } from \"react\"\n\nexport interface BaseParticle {\n   element: HTMLElement | SVGSVGElement\n   left: number\n   size: number\n   top: number\n}\n\nexport interface BaseParticleOptions {\n   particle?: string\n   size?: number\n}\n\nexport interface CoolParticle extends BaseParticle {\n   direction: number\n   speedHorz: number\n   speedUp: number\n   spinSpeed: number\n   spinVal: number\n}\n\nexport interface CoolParticleOptions extends BaseParticleOptions {\n   particleCount?: number\n   speedHorz?: number\n   speedUp?: number\n}\n\nfunction getContainer() {\n   const id = \"_coolMode_effect\"\n   const existingContainer = document.getElementById(id)\n\n   if (existingContainer) return existingContainer\n\n   const container = document.createElement(\"div\")\n   container.setAttribute(\"id\", id)\n   container.setAttribute(\n      \"style\",\n      \"overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647\",\n   )\n\n   document.body.appendChild(container)\n\n   return container\n}\n\nlet instanceCounter = 0\n\nfunction applyParticleEffect(\n   element: HTMLElement,\n   options?: CoolParticleOptions,\n): () => void {\n   instanceCounter++\n\n   const defaultParticle = \"circle\"\n   const particleType = options?.particle || defaultParticle\n   const sizes = [15, 20, 25, 35, 45]\n   const limit = 45\n\n   let particles: CoolParticle[] = []\n   let autoAddParticle = false\n   let mouseX = 0\n   let mouseY = 0\n\n   const container = getContainer()\n\n   function generateParticle() {\n      const size =\n         options?.size || sizes[Math.floor(Math.random() * sizes.length)]\n      const speedHorz = options?.speedHorz || Math.random() * 10\n      const speedUp = options?.speedUp || Math.random() * 25\n      const spinVal = Math.random() * 360\n      const spinSpeed = Math.random() * 35 * (Math.random() <= 0.5 ? -1 : 1)\n      const top = mouseY - size / 2\n      const left = mouseX - size / 2\n      const direction = Math.random() <= 0.5 ? -1 : 1\n\n      const particle = document.createElement(\"div\")\n\n      if (particleType === \"circle\") {\n         const svgNS = \"http://www.w3.org/2000/svg\"\n         const circleSVG = document.createElementNS(svgNS, \"svg\")\n         const circle = document.createElementNS(svgNS, \"circle\")\n         circle.setAttributeNS(null, \"cx\", (size / 2).toString())\n         circle.setAttributeNS(null, \"cy\", (size / 2).toString())\n         circle.setAttributeNS(null, \"r\", (size / 2).toString())\n         circle.setAttributeNS(\n            null,\n            \"fill\",\n            `hsl(${Math.random() * 360}, 70%, 50%)`,\n         )\n\n         circleSVG.appendChild(circle)\n         circleSVG.setAttribute(\"width\", size.toString())\n         circleSVG.setAttribute(\"height\", size.toString())\n\n         particle.appendChild(circleSVG)\n      } else {\n         particle.innerHTML = `<img src=\"${particleType}\" width=\"${size}\" height=\"${size}\" style=\"border-radius: 50%\">`\n      }\n\n      particle.style.position = \"absolute\"\n      particle.style.transform = `translate3d(${left}px, ${top}px, 0px) rotate(${spinVal}deg)`\n\n      container.appendChild(particle)\n\n      particles.push({\n         direction,\n         element: particle,\n         left,\n         size,\n         speedHorz,\n         speedUp,\n         spinSpeed,\n         spinVal,\n         top,\n      })\n   }\n\n   function refreshParticles() {\n      particles.forEach((p) => {\n         p.left = p.left - p.speedHorz * p.direction\n         p.top = p.top - p.speedUp\n         p.speedUp = Math.min(p.size, p.speedUp - 1)\n         p.spinVal = p.spinVal + p.spinSpeed\n\n         if (\n            p.top >=\n            Math.max(window.innerHeight, document.body.clientHeight) + p.size\n         ) {\n            particles = particles.filter((o) => o !== p)\n            p.element.remove()\n         }\n\n         p.element.setAttribute(\n            \"style\",\n            [\n               \"position:absolute\",\n               \"will-change:transform\",\n               `top:${p.top}px`,\n               `left:${p.left}px`,\n               `transform:rotate(${p.spinVal}deg)`,\n            ].join(\";\"),\n         )\n      })\n   }\n\n   let animationFrame: number | undefined\n\n   let lastParticleTimestamp = 0\n   const particleGenerationDelay = 30\n\n   function loop() {\n      const currentTime = performance.now()\n      if (\n         autoAddParticle &&\n         particles.length < limit &&\n         currentTime - lastParticleTimestamp > particleGenerationDelay\n      ) {\n         generateParticle()\n         lastParticleTimestamp = currentTime\n      }\n\n      refreshParticles()\n      animationFrame = requestAnimationFrame(loop)\n   }\n\n   loop()\n\n   const isTouchInteraction = \"ontouchstart\" in window\n\n   const tap = isTouchInteraction ? \"touchstart\" : \"mousedown\"\n   const tapEnd = isTouchInteraction ? \"touchend\" : \"mouseup\"\n   const move = isTouchInteraction ? \"touchmove\" : \"mousemove\"\n\n   const updateMousePosition = (e: MouseEvent | TouchEvent) => {\n      if (\"touches\" in e) {\n         mouseX = e.touches?.[0].clientX\n         mouseY = e.touches?.[0].clientY\n      } else {\n         mouseX = e.clientX\n         mouseY = e.clientY\n      }\n   }\n\n   const tapHandler = (e: MouseEvent | TouchEvent) => {\n      updateMousePosition(e)\n      autoAddParticle = true\n   }\n\n   const disableAutoAddParticle = () => {\n      autoAddParticle = false\n   }\n\n   element.addEventListener(move, updateMousePosition, { passive: true })\n   element.addEventListener(tap, tapHandler, { passive: true })\n   element.addEventListener(tapEnd, disableAutoAddParticle, { passive: true })\n   element.addEventListener(\"mouseleave\", disableAutoAddParticle, {\n      passive: true,\n   })\n\n   return () => {\n      element.removeEventListener(move, updateMousePosition)\n      element.removeEventListener(tap, tapHandler)\n      element.removeEventListener(tapEnd, disableAutoAddParticle)\n      element.removeEventListener(\"mouseleave\", disableAutoAddParticle)\n\n      const interval = setInterval(() => {\n         if (animationFrame && particles.length === 0) {\n            cancelAnimationFrame(animationFrame)\n            clearInterval(interval)\n\n            if (--instanceCounter === 0) container.remove()\n         }\n      }, 500)\n   }\n}\n\ninterface CoolModeProps {\n   children: ReactNode\n   options?: CoolParticleOptions\n}\n\nexport const CoolMode: React.FC<CoolModeProps> = ({ children, options }) => {\n   const ref = useRef<HTMLElement>(null)\n\n   useEffect(() => {\n      if (ref.current) return applyParticleEffect(ref.current, options)\n   }, [options])\n\n   return React.cloneElement(children as React.ReactElement, { ref })\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/data-table-demo.json b/apps/web/public/v0/styles/miami/data-table-demo.json
new file mode 100644
index 00000000..f84c20a7
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/data-table-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "data-table-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "data-table"
+  ],
+  "files": [
+    {
+      "path": "examples/data-table-demo.tsx",
+      "content": "\"use client\"\n\nimport {\n   CaretSortIcon,\n   ChevronDownIcon,\n   DotsHorizontalIcon,\n} from \"@radix-ui/react-icons\"\nimport type {\n   ColumnDef,\n   ColumnFiltersState,\n   SortingState,\n   VisibilityState,\n} from \"@tanstack/react-table\"\nimport {\n   flexRender,\n   getCoreRowModel,\n   getFilteredRowModel,\n   getPaginationRowModel,\n   getSortedRowModel,\n   useReactTable,\n} from \"@tanstack/react-table\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n   DropdownMenu,\n   DropdownMenuCheckboxItem,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n   Table,\n   TableBody,\n   TableCell,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from \"@/components/ui/table\"\n\nconst data: Payment[] = [\n   {\n      id: \"m5gr84i9\",\n      amount: 316,\n      status: \"success\",\n      email: \"ken99@yahoo.com\",\n   },\n   {\n      id: \"3u1reuv4\",\n      amount: 242,\n      status: \"success\",\n      email: \"Abe45@gmail.com\",\n   },\n   {\n      id: \"derv1ws0\",\n      amount: 837,\n      status: \"processing\",\n      email: \"Monserrat44@gmail.com\",\n   },\n   {\n      id: \"5kma53ae\",\n      amount: 874,\n      status: \"success\",\n      email: \"Silas22@gmail.com\",\n   },\n   {\n      id: \"bhqecj4p\",\n      amount: 721,\n      status: \"failed\",\n      email: \"carmella@hotmail.com\",\n   },\n]\n\nexport interface Payment {\n   id: string\n   amount: number\n   status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n   email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n   {\n      id: \"select\",\n      header: ({ table }) => (\n         <Checkbox\n            checked={\n               table.getIsAllPageRowsSelected() ||\n               (table.getIsSomePageRowsSelected() && \"indeterminate\")\n            }\n            onCheckedChange={(value) =>\n               table.toggleAllPageRowsSelected(!!value)\n            }\n            aria-label=\"Select all\"\n         />\n      ),\n      cell: ({ row }) => (\n         <Checkbox\n            checked={row.getIsSelected()}\n            onCheckedChange={(value) => row.toggleSelected(!!value)}\n            aria-label=\"Select row\"\n         />\n      ),\n      enableSorting: false,\n      enableHiding: false,\n   },\n   {\n      accessorKey: \"status\",\n      header: \"Status\",\n      cell: ({ row }) => (\n         <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n      ),\n   },\n   {\n      accessorKey: \"email\",\n      header: ({ column }) => {\n         return (\n            <Button\n               variant=\"ghost\"\n               onClick={() =>\n                  column.toggleSorting(column.getIsSorted() === \"asc\")\n               }\n            >\n               Email\n               <CaretSortIcon className=\"ml-2 size-4\" />\n            </Button>\n         )\n      },\n      cell: ({ row }) => (\n         <div className=\"lowercase\">{row.getValue(\"email\")}</div>\n      ),\n   },\n   {\n      accessorKey: \"amount\",\n      header: () => <div className=\"text-right\">Amount</div>,\n      cell: ({ row }) => {\n         const amount = Number.parseFloat(row.getValue(\"amount\"))\n\n         // Format the amount as a dollar amount\n         const formatted = new Intl.NumberFormat(\"en-US\", {\n            style: \"currency\",\n            currency: \"USD\",\n         }).format(amount)\n\n         return <div className=\"text-right font-medium\">{formatted}</div>\n      },\n   },\n   {\n      id: \"actions\",\n      enableHiding: false,\n      cell: ({ row }) => {\n         const payment = row.original\n\n         return (\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" className=\"size-8 p-0\">\n                     <span className=\"sr-only\">Open menu</span>\n                     <DotsHorizontalIcon className=\"size-4\" />\n                  </Button>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                  <DropdownMenuItem\n                     onClick={() => navigator.clipboard.writeText(payment.id)}\n                  >\n                     Copy payment ID\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>View customer</DropdownMenuItem>\n                  <DropdownMenuItem>View payment details</DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         )\n      },\n   },\n]\n\nexport default function DataTableDemo() {\n   const [sorting, setSorting] = React.useState<SortingState>([])\n   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n      [],\n   )\n   const [columnVisibility, setColumnVisibility] =\n      React.useState<VisibilityState>({})\n   const [rowSelection, setRowSelection] = React.useState({})\n\n   const table = useReactTable({\n      data,\n      columns,\n      onSortingChange: setSorting,\n      onColumnFiltersChange: setColumnFilters,\n      getCoreRowModel: getCoreRowModel(),\n      getPaginationRowModel: getPaginationRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      onColumnVisibilityChange: setColumnVisibility,\n      onRowSelectionChange: setRowSelection,\n      state: {\n         sorting,\n         columnFilters,\n         columnVisibility,\n         rowSelection,\n      },\n   })\n\n   return (\n      <div className=\"w-full\">\n         <div className=\"flex items-center py-4\">\n            <Input\n               placeholder=\"Filter emails...\"\n               value={\n                  (table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"\n               }\n               onChange={(event) =>\n                  table.getColumn(\"email\")?.setFilterValue(event.target.value)\n               }\n               className=\"max-w-sm\"\n            />\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" className=\"ml-auto\">\n                     Columns <ChevronDownIcon className=\"ml-2 size-4\" />\n                  </Button>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent align=\"end\">\n                  {table\n                     .getAllColumns()\n                     .filter((column) => column.getCanHide())\n                     .map((column) => {\n                        return (\n                           <DropdownMenuCheckboxItem\n                              key={column.id}\n                              className=\"capitalize\"\n                              checked={column.getIsVisible()}\n                              onCheckedChange={(value) =>\n                                 column.toggleVisibility(!!value)\n                              }\n                           >\n                              {column.id}\n                           </DropdownMenuCheckboxItem>\n                        )\n                     })}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </div>\n         <div className=\"rounded-md border\">\n            <Table>\n               <TableHeader>\n                  {table.getHeaderGroups().map((headerGroup) => (\n                     <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                           return (\n                              <TableHead key={header.id}>\n                                 {header.isPlaceholder\n                                    ? null\n                                    : flexRender(\n                                         header.column.columnDef.header,\n                                         header.getContext(),\n                                      )}\n                              </TableHead>\n                           )\n                        })}\n                     </TableRow>\n                  ))}\n               </TableHeader>\n               <TableBody>\n                  {table.getRowModel().rows?.length ? (\n                     table.getRowModel().rows.map((row) => (\n                        <TableRow\n                           key={row.id}\n                           data-state={row.getIsSelected() && \"selected\"}\n                        >\n                           {row.getVisibleCells().map((cell) => (\n                              <TableCell key={cell.id}>\n                                 {flexRender(\n                                    cell.column.columnDef.cell,\n                                    cell.getContext(),\n                                 )}\n                              </TableCell>\n                           ))}\n                        </TableRow>\n                     ))\n                  ) : (\n                     <TableRow>\n                        <TableCell\n                           colSpan={columns.length}\n                           className=\"h-24 text-center\"\n                        >\n                           No results.\n                        </TableCell>\n                     </TableRow>\n                  )}\n               </TableBody>\n            </Table>\n         </div>\n         <div className=\"flex items-center justify-end space-x-2 py-4\">\n            <div className=\"text-muted-foreground flex-1 text-sm\">\n               {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n               {table.getFilteredRowModel().rows.length} row(s) selected.\n            </div>\n            <div className=\"space-x-2\">\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n               >\n                  Previous\n               </Button>\n               <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n               >\n                  Next\n               </Button>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/date-picker-demo.json b/apps/web/public/v0/styles/miami/date-picker-demo.json
new file mode 100644
index 00000000..3607b9f9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/date-picker-demo.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "date-picker-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { format } from \"date-fns\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport default function DatePickerDemo() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               className={cn(\n                  \"w-[240px] justify-start text-left font-normal\",\n                  !date && \"text-muted-foreground\",\n               )}\n            >\n               <CalendarIcon className=\"mr-2 size-4\" />\n               {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n               mode=\"single\"\n               selected={date}\n               onSelect={setDate}\n               initialFocus\n            />\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/date-picker-form.json b/apps/web/public/v0/styles/miami/date-picker-form.json
new file mode 100644
index 00000000..1c5565d8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/date-picker-form.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "date-picker-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { format } from \"date-fns\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   dob: z.date({\n      required_error: \"A date of birth is required.\",\n   }),\n})\n\nexport default function DatePickerForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <FormField\n               control={form.control}\n               name=\"dob\"\n               render={({ field }) => (\n                  <FormItem className=\"flex flex-col\">\n                     <FormLabel>Date of birth</FormLabel>\n                     <Popover>\n                        <PopoverTrigger asChild>\n                           <FormControl>\n                              <Button\n                                 variant=\"outline\"\n                                 className={cn(\n                                    \"w-[240px] pl-3 text-left font-normal\",\n                                    !field.value && \"text-muted-foreground\",\n                                 )}\n                              >\n                                 {field.value ? (\n                                    format(field.value, \"PPP\")\n                                 ) : (\n                                    <span>Pick a date</span>\n                                 )}\n                                 <CalendarIcon className=\"ml-auto size-4 opacity-50\" />\n                              </Button>\n                           </FormControl>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                           <Calendar\n                              mode=\"single\"\n                              selected={field.value}\n                              onSelect={field.onChange}\n                              disabled={(date) =>\n                                 date > new Date() ||\n                                 date < new Date(\"1900-01-01\")\n                              }\n                              initialFocus\n                           />\n                        </PopoverContent>\n                     </Popover>\n                     <FormDescription>\n                        Your date of birth is used to calculate your age.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/date-picker-with-presets.json b/apps/web/public/v0/styles/miami/date-picker-with-presets.json
new file mode 100644
index 00000000..2e9a87b8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/date-picker-with-presets.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "date-picker-with-presets",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-with-presets.tsx",
+      "content": "\"use client\"\n\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { addDays, format } from \"date-fns\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function DatePickerWithPresets() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               className={cn(\n                  \"w-[240px] justify-start text-left font-normal\",\n                  !date && \"text-muted-foreground\",\n               )}\n            >\n               <CalendarIcon className=\"mr-2 size-4\" />\n               {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent\n            align=\"start\"\n            className=\"flex w-auto flex-col space-y-2 p-2\"\n         >\n            <Select\n               onValueChange={(value) =>\n                  setDate(addDays(new Date(), Number.parseInt(value)))\n               }\n            >\n               <SelectTrigger>\n                  <SelectValue placeholder=\"Select\" />\n               </SelectTrigger>\n               <SelectContent position=\"popper\">\n                  <SelectItem value=\"0\">Today</SelectItem>\n                  <SelectItem value=\"1\">Tomorrow</SelectItem>\n                  <SelectItem value=\"3\">In 3 days</SelectItem>\n                  <SelectItem value=\"7\">In a week</SelectItem>\n               </SelectContent>\n            </Select>\n            <div className=\"rounded-md border\">\n               <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/date-picker-with-range.json b/apps/web/public/v0/styles/miami/date-picker-with-range.json
new file mode 100644
index 00000000..18268108
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/date-picker-with-range.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "date-picker-with-range",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-with-range.tsx",
+      "content": "\"use client\"\n\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { addDays, format } from \"date-fns\"\nimport * as React from \"react\"\nimport type { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport default function DatePickerWithRange({\n   className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n   const [date, setDate] = React.useState<DateRange | undefined>({\n      from: new Date(2022, 0, 20),\n      to: addDays(new Date(2022, 0, 20), 20),\n   })\n\n   return (\n      <div className={cn(\"grid gap-2\", className)}>\n         <Popover>\n            <PopoverTrigger asChild>\n               <Button\n                  id=\"date\"\n                  variant=\"outline\"\n                  className={cn(\n                     \"w-[300px] justify-start text-left font-normal\",\n                     !date && \"text-muted-foreground\",\n                  )}\n               >\n                  <CalendarIcon className=\"mr-2 size-4\" />\n                  {date?.from ? (\n                     date.to ? (\n                        <>\n                           {format(date.from, \"LLL dd, y\")} -{\" \"}\n                           {format(date.to, \"LLL dd, y\")}\n                        </>\n                     ) : (\n                        format(date.from, \"LLL dd, y\")\n                     )\n                  ) : (\n                     <span>Pick a date</span>\n                  )}\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto p-0\" align=\"start\">\n               <Calendar\n                  initialFocus\n                  mode=\"range\"\n                  defaultMonth={date?.from}\n                  selected={date}\n                  onSelect={setDate}\n                  numberOfMonths={2}\n               />\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dialog-close-button.json b/apps/web/public/v0/styles/miami/dialog-close-button.json
new file mode 100644
index 00000000..329cbb78
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dialog-close-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dialog-close-button",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/dialog-close-button.tsx",
+      "content": "import { CopyIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Dialog,\n   DialogClose,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function DialogCloseButton() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Share</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-md\">\n            <DialogHeader>\n               <DialogTitle>Share link</DialogTitle>\n               <DialogDescription>\n                  Anyone who has this link will be able to view this.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"flex items-center space-x-2\">\n               <div className=\"grid flex-1 gap-2\">\n                  <Label htmlFor=\"link\" className=\"sr-only\">\n                     Link\n                  </Label>\n                  <Input\n                     id=\"link\"\n                     defaultValue=\"https://nyxbui.design/docs/installation\"\n                     readOnly\n                  />\n               </div>\n               <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n                  <span className=\"sr-only\">Copy</span>\n                  <CopyIcon className=\"size-4\" />\n               </Button>\n            </div>\n            <DialogFooter className=\"sm:justify-start\">\n               <DialogClose asChild>\n                  <Button type=\"button\" variant=\"secondary\">\n                     Close\n                  </Button>\n               </DialogClose>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dialog-demo.json b/apps/web/public/v0/styles/miami/dialog-demo.json
new file mode 100644
index 00000000..cb862a5b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dialog-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dialog-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/dialog-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function DialogDemo() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-[425px]\">\n            <DialogHeader>\n               <DialogTitle>Edit profile</DialogTitle>\n               <DialogDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"~peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <DialogFooter>\n               <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dialog.json b/apps/web/public/v0/styles/miami/dialog.json
new file mode 100644
index 00000000..baabedcc
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dialog.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dialog",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/dialog.tsx",
+      "content": "\"use client\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Overlay\n      ref={ref}\n      className={cn(\n         \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80\",\n         className,\n      )}\n      {...props}\n   />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n         ref={ref}\n         className={cn(\n            \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n         <DialogPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n            <Cross2Icon className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n         </DialogPrimitive.Close>\n      </DialogPrimitive.Content>\n   </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nfunction DialogHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\n            \"flex flex-col space-y-1.5 text-center sm:text-left\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nDialogHeader.displayName = \"DialogHeader\"\n\nfunction DialogFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Title\n      ref={ref}\n      className={cn(\n         \"text-lg font-semibold leading-none tracking-tight\",\n         className,\n      )}\n      {...props}\n   />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Description\n      ref={ref}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n   Dialog,\n   DialogPortal,\n   DialogOverlay,\n   DialogTrigger,\n   DialogClose,\n   DialogContent,\n   DialogHeader,\n   DialogFooter,\n   DialogTitle,\n   DialogDescription,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dock-demo-2.json b/apps/web/public/v0/styles/miami/dock-demo-2.json
new file mode 100644
index 00000000..bb7e932e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dock-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dock-demo-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/dock-demo-2.tsx",
+      "content": "import type React from \"react\"\n\nimport { Dock, DockIcon } from \"@/components/ui/dock\"\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nexport default function DockDemo() {\n   return (\n      <div className=\"relative\">\n         <Dock direction=\"middle\">\n            <DockIcon>\n               <Icons.gitHub className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.googleDrive className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.notion className=\"size-6\" />\n            </DockIcon>\n            <DockIcon>\n               <Icons.whatsapp className=\"size-6\" />\n            </DockIcon>\n         </Dock>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         ></path>\n      </svg>\n   ),\n   notion: (props: IconProps) => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#fff\"\n         />\n         <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000\"\n         />\n      </svg>\n   ),\n   googleDrive: (props: IconProps) => (\n      <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: (props: IconProps) => (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 175.216 175.552\"\n         {...props}\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            fill=\"#b3b3b3\"\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            filter=\"url(#a)\"\n         />\n         <path\n            fill=\"#fff\"\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n         />\n         <path\n            fill=\"url(#linearGradient1780)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n         />\n         <path\n            fill=\"url(#b)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n         />\n         <path\n            fill=\"#fff\"\n            fillRule=\"evenodd\"\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dock-demo-3.json b/apps/web/public/v0/styles/miami/dock-demo-3.json
new file mode 100644
index 00000000..0f6d024f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dock-demo-3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dock-demo-3",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/dock-demo-3.tsx",
+      "content": "import type React from \"react\"\n\nimport { Dock, DockIcon } from \"@/components/ui/dock\"\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nexport default function DockDemo() {\n   return (\n      <div className=\"relative\">\n         <Dock magnification={60} distance={100}>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.gitHub className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.googleDrive className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.notion className=\"size-full\" />\n            </DockIcon>\n            <DockIcon className=\"bg-black/10 p-3 dark:bg-white/10\">\n               <Icons.whatsapp className=\"size-full\" />\n            </DockIcon>\n         </Dock>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         ></path>\n      </svg>\n   ),\n   notion: (props: IconProps) => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#fff\"\n         />\n         <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000\"\n         />\n      </svg>\n   ),\n   googleDrive: (props: IconProps) => (\n      <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: (props: IconProps) => (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 175.216 175.552\"\n         {...props}\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            fill=\"#b3b3b3\"\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            filter=\"url(#a)\"\n         />\n         <path\n            fill=\"#fff\"\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n         />\n         <path\n            fill=\"url(#linearGradient1780)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n         />\n         <path\n            fill=\"url(#b)\"\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n         />\n         <path\n            fill=\"#fff\"\n            fillRule=\"evenodd\"\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dock-demo.json b/apps/web/public/v0/styles/miami/dock-demo.json
new file mode 100644
index 00000000..6eb0789c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dock-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dock-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/dock-demo.tsx",
+      "content": "import { CalendarIcon, HomeIcon, MailIcon, PencilIcon } from \"lucide-react\"\nimport Link from \"next/link\"\nimport type React from \"react\"\n\nimport { ModeToggle } from \"@/components/mode-toggle\"\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport { cn } from \"@/lib/utils\"\nimport { Dock, DockIcon } from \"@/components/ui/dock\"\n\nexport type IconProps = React.HTMLAttributes<SVGElement>\n\nconst Icons = {\n   calendar: (props: IconProps) => <CalendarIcon {...props} />,\n   email: (props: IconProps) => <MailIcon {...props} />,\n   linkedin: (props: IconProps) => (\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <title>LinkedIn</title>\n         <path\n            fill=\"currentColor\"\n            d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\n         />\n      </svg>\n   ),\n   x: (props: IconProps) => (\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n         <title>X</title>\n         <path\n            fill=\"currentColor\"\n            d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\n         />\n      </svg>\n   ),\n   youtube: (props: IconProps) => (\n      <svg\n         width=\"32px\"\n         height=\"32px\"\n         viewBox=\"0 0 32 32\"\n         fill=\"currentColor\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <title>youtube</title>\n         <path d=\"M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z\" />\n      </svg>\n   ),\n   github: (props: IconProps) => (\n      <svg viewBox=\"0 0 438.549 438.549\" {...props}>\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         ></path>\n      </svg>\n   ),\n}\n\nconst DATA = {\n   navbar: [\n      { href: \"#\", icon: HomeIcon, label: \"Home\" },\n      { href: \"#\", icon: PencilIcon, label: \"Blog\" },\n   ],\n   contact: {\n      social: {\n         GitHub: {\n            name: \"GitHub\",\n            url: \"#\",\n            icon: Icons.github,\n         },\n         LinkedIn: {\n            name: \"LinkedIn\",\n            url: \"#\",\n            icon: Icons.linkedin,\n         },\n         X: {\n            name: \"X\",\n            url: \"#\",\n            icon: Icons.x,\n         },\n         email: {\n            name: \"Send Email\",\n            url: \"#\",\n            icon: Icons.email,\n         },\n      },\n   },\n}\n\nexport default function DockDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Dock\n         </span>\n         <TooltipProvider>\n            <Dock direction=\"middle\">\n               {DATA.navbar.map((item) => (\n                  <DockIcon key={item.label}>\n                     <Tooltip>\n                        <TooltipTrigger asChild>\n                           <Link\n                              href={item.href}\n                              aria-label={item.label}\n                              className={cn(\n                                 buttonVariants({\n                                    variant: \"ghost\",\n                                    size: \"icon\",\n                                 }),\n                                 \"size-12 rounded-full\",\n                              )}\n                           >\n                              <item.icon className=\"size-4\" />\n                           </Link>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                           <p>{item.label}</p>\n                        </TooltipContent>\n                     </Tooltip>\n                  </DockIcon>\n               ))}\n               <Separator orientation=\"vertical\" className=\"h-full\" />\n               {Object.entries(DATA.contact.social).map(([name, social]) => (\n                  <DockIcon key={name}>\n                     <Tooltip>\n                        <TooltipTrigger asChild>\n                           <Link\n                              href={social.url}\n                              aria-label={social.name}\n                              className={cn(\n                                 buttonVariants({\n                                    variant: \"ghost\",\n                                    size: \"icon\",\n                                 }),\n                                 \"size-12 rounded-full\",\n                              )}\n                           >\n                              <social.icon className=\"size-4\" />\n                           </Link>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                           <p>{name}</p>\n                        </TooltipContent>\n                     </Tooltip>\n                  </DockIcon>\n               ))}\n               <Separator orientation=\"vertical\" className=\"h-full py-2\" />\n               <DockIcon>\n                  <Tooltip>\n                     <TooltipTrigger asChild>\n                        <ModeToggle className=\"rounded-full\" />\n                     </TooltipTrigger>\n                     <TooltipContent>\n                        <p>Theme</p>\n                     </TooltipContent>\n                  </Tooltip>\n               </DockIcon>\n            </Dock>\n         </TooltipProvider>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dock.json b/apps/web/public/v0/styles/miami/dock.json
new file mode 100644
index 00000000..2bc98025
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dock.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dock",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/dock.tsx",
+      "content": "\"use client\"\n\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport { motion, useMotionValue, useSpring, useTransform } from \"framer-motion\"\nimport type { PropsWithChildren } from \"react\"\nimport React, { useRef } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface DockProps extends VariantProps<typeof dockVariants> {\n   className?: string\n   magnification?: number\n   distance?: number\n   direction?: \"top\" | \"middle\" | \"bottom\"\n   children: React.ReactNode\n}\n\nconst DEFAULT_MAGNIFICATION = 60\nconst DEFAULT_DISTANCE = 140\n\nconst dockVariants = cva(\n   \"supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md\",\n)\n\nconst Dock = React.forwardRef<HTMLDivElement, DockProps>(\n   (\n      {\n         className,\n         children,\n         magnification = DEFAULT_MAGNIFICATION,\n         distance = DEFAULT_DISTANCE,\n         direction = \"bottom\",\n         ...props\n      },\n      ref,\n   ) => {\n      const mouseX = useMotionValue(Number.POSITIVE_INFINITY)\n\n      const renderChildren = () => {\n         return React.Children.map(children, (child) => {\n            if (React.isValidElement(child) && child.type === DockIcon) {\n               return React.cloneElement(child, {\n                  ...child.props,\n                  mouseX,\n                  magnification,\n                  distance,\n               })\n            }\n            return child\n         })\n      }\n\n      return (\n         <motion.div\n            ref={ref}\n            onMouseMove={(e) => mouseX.set(e.pageX)}\n            onMouseLeave={() => mouseX.set(Number.POSITIVE_INFINITY)}\n            {...props}\n            className={cn(dockVariants({ className }), {\n               \"items-start\": direction === \"top\",\n               \"items-center\": direction === \"middle\",\n               \"items-end\": direction === \"bottom\",\n            })}\n         >\n            {renderChildren()}\n         </motion.div>\n      )\n   },\n)\n\nDock.displayName = \"Dock\"\n\nexport interface DockIconProps {\n   size?: number\n   magnification?: number\n   distance?: number\n   mouseX?: any\n   className?: string\n   children?: React.ReactNode\n   props?: PropsWithChildren\n}\n\nfunction DockIcon({\n   size,\n   magnification = DEFAULT_MAGNIFICATION,\n   distance = DEFAULT_DISTANCE,\n   mouseX,\n   className,\n   children,\n   ...props\n}: DockIconProps) {\n   const ref = useRef<HTMLDivElement>(null)\n\n   const distanceCalc = useTransform(mouseX, (val: number) => {\n      const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 }\n\n      return val - bounds.x - bounds.width / 2\n   })\n\n   const widthSync = useTransform(\n      distanceCalc,\n      [-distance, 0, distance],\n      [40, magnification, 40],\n   )\n\n   const width = useSpring(widthSync, {\n      mass: 0.1,\n      stiffness: 150,\n      damping: 12,\n   })\n\n   return (\n      <motion.div\n         ref={ref}\n         style={{ width }}\n         className={cn(\n            \"flex aspect-square cursor-pointer items-center justify-center rounded-full\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n      </motion.div>\n   )\n}\n\nDockIcon.displayName = \"DockIcon\"\n\nexport { Dock, DockIcon, dockVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dot-pattern-demo.json b/apps/web/public/v0/styles/miami/dot-pattern-demo.json
new file mode 100644
index 00000000..a0de8597
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dot-pattern-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dot-pattern-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/dot-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { DotPattern } from \"@/components/ui/dot-pattern\"\n\nexport default function DotPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Dot Pattern\n         </p>\n         <DotPattern\n            className={cn(\n               \"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dot-pattern-linear-gradient.json b/apps/web/public/v0/styles/miami/dot-pattern-linear-gradient.json
new file mode 100644
index 00000000..bff121c5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dot-pattern-linear-gradient.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dot-pattern-linear-gradient",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/dot-pattern-linear-gradient.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { DotPattern } from \"@/components/ui/dot-pattern\"\n\nexport default function DotPatternLinearGradient() {\n   return (\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Dot Pattern\n         </p>\n         <DotPattern\n            width={20}\n            height={20}\n            cx={1}\n            cy={1}\n            cr={1}\n            className={cn(\n               \"[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] \",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dot-pattern.json b/apps/web/public/v0/styles/miami/dot-pattern.json
new file mode 100644
index 00000000..5cac37b2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dot-pattern.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dot-pattern",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/dot-pattern.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface DotPatternProps extends React.SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   cx?: number\n   cy?: number\n   cr?: number\n   className?: string\n   [key: string]: unknown\n}\nexport function DotPattern({\n   width = 16,\n   height = 16,\n   x = 0,\n   y = 0,\n   cx = 1,\n   cy = 1,\n   cr = 1,\n   className,\n   ...props\n}: DotPatternProps) {\n   const id = useId()\n\n   return (\n      <svg\n         aria-hidden=\"true\"\n         className={cn(\n            \"pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80\",\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               patternContentUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <circle id=\"pattern-circle\" cx={cx} cy={cy} r={cr} />\n            </pattern>\n         </defs>\n         <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill={`url(#${id})`}\n         />\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/drawer-demo.json b/apps/web/public/v0/styles/miami/drawer-demo.json
new file mode 100644
index 00000000..e99b56e1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/drawer-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "drawer-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "examples/drawer-demo.tsx",
+      "content": "import { MinusIcon, PlusIcon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"@/components/ui/drawer\"\n\nconst data = [\n   {\n      goal: 400,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 239,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 349,\n   },\n]\n\nexport default function DrawerDemo() {\n   const [goal, setGoal] = React.useState(350)\n\n   function onClick(adjustment: number) {\n      setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n   }\n\n   return (\n      <Drawer>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Open Drawer</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mx-auto w-full max-w-sm\">\n               <DrawerHeader>\n                  <DrawerTitle>Move Goal</DrawerTitle>\n                  <DrawerDescription>\n                     Set your daily activity goal.\n                  </DrawerDescription>\n               </DrawerHeader>\n               <div className=\"p-4 pb-0\">\n                  <div className=\"flex items-center justify-center space-x-2\">\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"size-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(-10)}\n                        disabled={goal <= 200}\n                     >\n                        <MinusIcon className=\"size-4\" />\n                        <span className=\"sr-only\">Decrease</span>\n                     </Button>\n                     <div className=\"flex-1 text-center\">\n                        <div className=\"text-7xl font-bold tracking-tighter\">\n                           {goal}\n                        </div>\n                        <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                           Calories/day\n                        </div>\n                     </div>\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"size-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(10)}\n                        disabled={goal >= 400}\n                     >\n                        <PlusIcon className=\"size-4\" />\n                        <span className=\"sr-only\">Increase</span>\n                     </Button>\n                  </div>\n                  <div className=\"mt-3 h-[120px]\">\n                     <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data}>\n                           <Bar\n                              dataKey=\"goal\"\n                              style={\n                                 {\n                                    fill: \"hsl(var(--foreground))\",\n                                    opacity: 0.9,\n                                 } as React.CSSProperties\n                              }\n                           />\n                        </BarChart>\n                     </ResponsiveContainer>\n                  </div>\n               </div>\n               <DrawerFooter>\n                  <Button>Submit</Button>\n                  <DrawerClose asChild>\n                     <Button variant=\"outline\">Cancel</Button>\n                  </DrawerClose>\n               </DrawerFooter>\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/drawer-dialog.json b/apps/web/public/v0/styles/miami/drawer-dialog.json
new file mode 100644
index 00000000..4d1a0e45
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/drawer-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "drawer-dialog",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "drawer",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/drawer-dialog.tsx",
+      "content": "import * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"@/components/ui/drawer\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function DrawerDialogDemo() {\n   const [open, setOpen] = React.useState(false)\n   const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n   if (isDesktop) {\n      return (\n         <Dialog open={open} onOpenChange={setOpen}>\n            <DialogTrigger asChild>\n               <Button variant=\"outline\">Edit Profile</Button>\n            </DialogTrigger>\n            <DialogContent className=\"sm:max-w-[425px]\">\n               <DialogHeader>\n                  <DialogTitle>Edit profile</DialogTitle>\n                  <DialogDescription>\n                     Make changes to your profile here. Click save when you're\n                     done.\n                  </DialogDescription>\n               </DialogHeader>\n               <ProfileForm />\n            </DialogContent>\n         </Dialog>\n      )\n   }\n\n   return (\n      <Drawer open={open} onOpenChange={setOpen}>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <DrawerHeader className=\"text-left\">\n               <DrawerTitle>Edit profile</DrawerTitle>\n               <DrawerDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </DrawerDescription>\n            </DrawerHeader>\n            <ProfileForm className=\"px-4\" />\n            <DrawerFooter className=\"pt-2\">\n               <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n               </DrawerClose>\n            </DrawerFooter>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n   return (\n      <form className={cn(\"grid items-start gap-4\", className)}>\n         <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input type=\"email\" id=\"email\" defaultValue=\"nyxb@example.com\" />\n         </div>\n         <div className=\"grid gap-2\">\n            <Label htmlFor=\"username\">Username</Label>\n            <Input id=\"username\" defaultValue=\"~nyxb\" />\n         </div>\n         <Button type=\"submit\">Save changes</Button>\n      </form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/drawer.json b/apps/web/public/v0/styles/miami/drawer.json
new file mode 100644
index 00000000..b8d08db3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/drawer.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "drawer",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "vaul",
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/drawer.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Drawer({\n   shouldScaleBackground = true,\n   ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n   return (\n      <DrawerPrimitive.Root\n         shouldScaleBackground={shouldScaleBackground}\n         {...props}\n      />\n   )\n}\nDrawer.displayName = \"Drawer\"\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Overlay\n      ref={ref}\n      className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n      {...props}\n   />\n))\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\n\nconst DrawerContent = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n         ref={ref}\n         className={cn(\n            \"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border\",\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"bg-muted mx-auto mt-4 h-2 w-[100px] cursor-grab rounded-full active:cursor-grabbing\" />\n         {children}\n      </DrawerPrimitive.Content>\n   </DrawerPortal>\n))\nDrawerContent.displayName = \"DrawerContent\"\n\nfunction DrawerHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n         {...props}\n      />\n   )\n}\nDrawerHeader.displayName = \"DrawerHeader\"\n\nfunction DrawerFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n         {...props}\n      />\n   )\n}\nDrawerFooter.displayName = \"DrawerFooter\"\n\nconst DrawerTitle = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Title\n      ref={ref}\n      className={cn(\n         \"text-lg font-semibold leading-none tracking-tight\",\n         className,\n      )}\n      {...props}\n   />\n))\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\n\nconst DrawerDescription = React.forwardRef<\n   React.ElementRef<typeof DrawerPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DrawerPrimitive.Description\n      ref={ref}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\n\nexport {\n   Drawer,\n   DrawerPortal,\n   DrawerOverlay,\n   DrawerTrigger,\n   DrawerClose,\n   DrawerContent,\n   DrawerHeader,\n   DrawerFooter,\n   DrawerTitle,\n   DrawerDescription,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dropdown-menu-checkboxes.json b/apps/web/public/v0/styles/miami/dropdown-menu-checkboxes.json
new file mode 100644
index 00000000..6420a0a1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dropdown-menu-checkboxes.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dropdown-menu-checkboxes",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "dropdown-menu",
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-checkboxes.tsx",
+      "content": "\"use client\"\n\nimport type { DropdownMenuCheckboxItemProps } from \"@radix-ui/react-dropdown-menu\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuCheckboxItem,\n   DropdownMenuContent,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\ntype Checked = DropdownMenuCheckboxItemProps[\"checked\"]\n\nexport default function DropdownMenuCheckboxes() {\n   const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)\n   const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)\n   const [showPanel, setShowPanel] = React.useState<Checked>(false)\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuCheckboxItem\n               checked={showStatusBar}\n               onCheckedChange={setShowStatusBar}\n            >\n               Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n               checked={showActivityBar}\n               onCheckedChange={setShowActivityBar}\n               disabled\n            >\n               Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n               checked={showPanel}\n               onCheckedChange={setShowPanel}\n            >\n               Panel\n            </DropdownMenuCheckboxItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dropdown-menu-demo.json b/apps/web/public/v0/styles/miami/dropdown-menu-demo.json
new file mode 100644
index 00000000..e3c4e5ac
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dropdown-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dropdown-menu-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuPortal,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function DropdownMenuDemo() {\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  Profile\n                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Billing\n                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Settings\n                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Keyboard shortcuts\n                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>Team</DropdownMenuItem>\n               <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                     <DropdownMenuSubContent>\n                        <DropdownMenuItem>Email</DropdownMenuItem>\n                        <DropdownMenuItem>Message</DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>More...</DropdownMenuItem>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n               </DropdownMenuSub>\n               <DropdownMenuItem>\n                  New Team\n                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               Log out\n               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dropdown-menu-radio-group.json b/apps/web/public/v0/styles/miami/dropdown-menu-radio-group.json
new file mode 100644
index 00000000..c6fafa01
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dropdown-menu-radio-group.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dropdown-menu-radio-group",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "dropdown-menu",
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuLabel,\n   DropdownMenuRadioGroup,\n   DropdownMenuRadioItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function DropdownMenuRadioGroupDemo() {\n   const [position, setPosition] = React.useState(\"bottom\")\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuRadioGroup\n               value={position}\n               onValueChange={setPosition}\n            >\n               <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n               <DropdownMenuRadioItem value=\"bottom\">\n                  Bottom\n               </DropdownMenuRadioItem>\n               <DropdownMenuRadioItem value=\"right\">\n                  Right\n               </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/dropdown-menu.json b/apps/web/public/v0/styles/miami/dropdown-menu.json
new file mode 100644
index 00000000..1e67c43d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/dropdown-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "dropdown-menu",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "ui/dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n   </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n   DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      className={cn(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg\",\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuSubContent.displayName =\n   DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n   <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n         ref={ref}\n         sideOffset={sideOffset}\n         className={cn(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md\",\n            className,\n         )}\n         {...props}\n      />\n   </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <DropdownMenuPrimitive.Item\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <DropdownMenuPrimitive.ItemIndicator>\n            <Check className=\"size-4\" />\n         </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n   DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <DropdownMenuPrimitive.ItemIndicator>\n            <Circle className=\"size-2 fill-current\" />\n         </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <DropdownMenuPrimitive.Label\n      ref={ref}\n      className={cn(\n         \"px-2 py-1.5 text-sm font-semibold\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <DropdownMenuPrimitive.Separator\n      ref={ref}\n      className={cn(\"bg-muted -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nfunction DropdownMenuShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n         {...props}\n      />\n   )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n   DropdownMenu,\n   DropdownMenuTrigger,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuCheckboxItem,\n   DropdownMenuRadioItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuGroup,\n   DropdownMenuPortal,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuRadioGroup,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/fade-text-demo.json b/apps/web/public/v0/styles/miami/fade-text-demo.json
new file mode 100644
index 00000000..4f77908b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/fade-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "fade-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/fade-text-demo.tsx",
+      "content": "import { FadeText } from \"@/components/ui/fade-text\"\n\nexport default async function FadeTextDemo() {\n   return (\n      <div className=\"flex flex-col space-y-8 text-center\">\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"up\"\n            framerProps={{\n               show: { transition: { delay: 0.2 } },\n            }}\n            text=\"Fade Up\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"right\"\n            framerProps={{\n               show: { transition: { delay: 0.4 } },\n            }}\n            text=\"Fade Right\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"down\"\n            framerProps={{\n               show: { transition: { delay: 0.6 } },\n            }}\n            text=\"Fade Down\"\n         />\n         <FadeText\n            className=\"text-4xl font-bold text-black dark:text-white\"\n            direction=\"left\"\n            framerProps={{\n               show: { transition: { delay: 0.8 } },\n            }}\n            text=\"Fade Left\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/fade-text.json b/apps/web/public/v0/styles/miami/fade-text.json
new file mode 100644
index 00000000..ba304d50
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/fade-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "fade-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/fade-text.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { motion } from \"framer-motion\"\nimport { useMemo } from \"react\"\n\ninterface FadeTextProps {\n   className?: string\n   direction?: \"up\" | \"down\" | \"left\" | \"right\"\n   framerProps?: Variants\n   text: string\n}\n\nexport function FadeText({\n   direction = \"up\",\n   className,\n   framerProps = {\n      hidden: { opacity: 0 },\n      show: { opacity: 1, transition: { type: \"spring\" } },\n   },\n   text,\n}: FadeTextProps) {\n   const directionOffset = useMemo(() => {\n      const map = { up: 10, down: -10, left: -10, right: 10 }\n      return map[direction]\n   }, [direction])\n\n   const axis = direction === \"up\" || direction === \"down\" ? \"y\" : \"x\"\n\n   const FADE_ANIMATION_VARIANTS = useMemo(() => {\n      const { hidden, show, ...rest } = framerProps as {\n         [name: string]: { [name: string]: number; opacity: number }\n      }\n\n      return {\n         ...rest,\n         hidden: {\n            ...(hidden ?? {}),\n            opacity: hidden?.opacity ?? 0,\n            [axis]: hidden?.[axis] ?? directionOffset,\n         },\n         show: {\n            ...(show ?? {}),\n            opacity: show?.opacity ?? 1,\n            [axis]: show?.[axis] ?? 0,\n         },\n      }\n   }, [directionOffset, axis, framerProps])\n\n   return (\n      <motion.div\n         initial=\"hidden\"\n         animate=\"show\"\n         viewport={{ once: true }}\n         variants={FADE_ANIMATION_VARIANTS}\n      >\n         <motion.span className={className}>{text}</motion.span>\n      </motion.div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/file-tree-demo.json b/apps/web/public/v0/styles/miami/file-tree-demo.json
new file mode 100644
index 00000000..741e6e46
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/file-tree-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "file-tree-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/file-tree-demo.tsx",
+      "content": "import { File, Folder, Tree } from \"@/components/ui/file-tree\"\n\nexport default function FileTreeDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[300px] w-1/2 flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <Tree\n            className=\"bg-background overflow-hidden rounded-md p-2\"\n            initialSelectedId=\"7\"\n            initialExpandedItems={[\n               \"1\",\n               \"2\",\n               \"3\",\n               \"4\",\n               \"5\",\n               \"6\",\n               \"7\",\n               \"8\",\n               \"9\",\n               \"10\",\n               \"11\",\n            ]}\n            elements={ELEMENTS}\n         >\n            <Folder element=\"src\" value=\"1\">\n               <Folder value=\"2\" element=\"app\">\n                  <File value=\"3\">\n                     <p>layout.tsx</p>\n                  </File>\n                  <File value=\"4\">\n                     <p>page.tsx</p>\n                  </File>\n               </Folder>\n               <Folder value=\"5\" element=\"components\">\n                  <Folder value=\"6\" element=\"ui\">\n                     <File value=\"7\">\n                        <p>button.tsx</p>\n                     </File>\n                  </Folder>\n                  <File value=\"8\">\n                     <p>header.tsx</p>\n                  </File>\n                  <File value=\"9\">\n                     <p>footer.tsx</p>\n                  </File>\n               </Folder>\n               <Folder value=\"10\" element=\"lib\">\n                  <File value=\"11\">\n                     <p>utils.ts</p>\n                  </File>\n               </Folder>\n            </Folder>\n         </Tree>\n      </div>\n   )\n}\n\nconst ELEMENTS = [\n   {\n      id: \"1\",\n      isSelectable: true,\n      name: \"src\",\n      children: [\n         {\n            id: \"2\",\n            isSelectable: true,\n            name: \"app\",\n            children: [\n               {\n                  id: \"3\",\n                  isSelectable: true,\n                  name: \"layout.tsx\",\n               },\n               {\n                  id: \"4\",\n                  isSelectable: true,\n                  name: \"page.tsx\",\n               },\n            ],\n         },\n         {\n            id: \"5\",\n            isSelectable: true,\n            name: \"components\",\n            children: [\n               {\n                  id: \"6\",\n                  isSelectable: true,\n                  name: \"header.tsx\",\n               },\n               {\n                  id: \"7\",\n                  isSelectable: true,\n                  name: \"footer.tsx\",\n               },\n            ],\n         },\n         {\n            id: \"8\",\n            isSelectable: true,\n            name: \"lib\",\n            children: [\n               {\n                  id: \"9\",\n                  isSelectable: true,\n                  name: \"utils.ts\",\n               },\n            ],\n         },\n      ],\n   },\n]\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/file-tree.json b/apps/web/public/v0/styles/miami/file-tree.json
new file mode 100644
index 00000000..85f7de40
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/file-tree.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "file-tree",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/file-tree.tsx",
+      "content": "\"use client\"\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\"\nimport type React from \"react\"\nimport {\n   createContext,\n   forwardRef,\n   useCallback,\n   useContext,\n   useEffect,\n   useState,\n} from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\ninterface TreeViewElement {\n   id: string\n   name: string\n   isSelectable?: boolean\n   children?: TreeViewElement[]\n}\n\ninterface TreeContextProps {\n   selectedId: string | undefined\n   expandedItems: string[] | undefined\n   indicator: boolean\n   handleExpand: (id: string) => void\n   selectItem: (id: string) => void\n   setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>\n   openIcon?: React.ReactNode\n   closeIcon?: React.ReactNode\n   direction: \"rtl\" | \"ltr\"\n}\n\nconst TreeContext = createContext<TreeContextProps | null>(null)\n\nfunction useTree() {\n   const context = useContext(TreeContext)\n   if (!context) {\n      throw new Error(\"useTree must be used within a TreeProvider\")\n   }\n   return context\n}\n\ninterface TreeViewComponentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\ntype Direction = \"rtl\" | \"ltr\" | undefined\n\ntype TreeViewProps = {\n   initialSelectedId?: string\n   indicator?: boolean\n   elements?: TreeViewElement[]\n   initialExpandedItems?: string[]\n   openIcon?: React.ReactNode\n   closeIcon?: React.ReactNode\n} & TreeViewComponentProps\n\nconst Tree = forwardRef<HTMLDivElement, TreeViewProps>(\n   (\n      {\n         className,\n         elements,\n         initialSelectedId,\n         initialExpandedItems,\n         children,\n         indicator = true,\n         openIcon,\n         closeIcon,\n         dir,\n         ...props\n      },\n      ref,\n   ) => {\n      const [selectedId, setSelectedId] = useState<string | undefined>(\n         initialSelectedId,\n      )\n      const [expandedItems, setExpandedItems] = useState<string[] | undefined>(\n         initialExpandedItems,\n      )\n\n      const selectItem = useCallback((id: string) => {\n         setSelectedId(id)\n      }, [])\n\n      const handleExpand = useCallback((id: string) => {\n         setExpandedItems((prev) => {\n            if (prev?.includes(id)) {\n               return prev.filter((item) => item !== id)\n            }\n            return [...(prev ?? []), id]\n         })\n      }, [])\n\n      const expandSpecificTargetedElements = useCallback(\n         (elements?: TreeViewElement[], selectId?: string) => {\n            if (!elements || !selectId) return\n            const findParent = (\n               currentElement: TreeViewElement,\n               currentPath: string[] = [],\n            ) => {\n               const isSelectable = currentElement.isSelectable ?? true\n               const newPath = [...currentPath, currentElement.id]\n               if (currentElement.id === selectId) {\n                  if (isSelectable) {\n                     setExpandedItems((prev) => [...(prev ?? []), ...newPath])\n                  } else {\n                     if (newPath.includes(currentElement.id)) {\n                        newPath.pop()\n                        setExpandedItems((prev) => [\n                           ...(prev ?? []),\n                           ...newPath,\n                        ])\n                     }\n                  }\n                  return\n               }\n               if (\n                  isSelectable &&\n                  currentElement.children &&\n                  currentElement.children.length > 0\n               ) {\n                  currentElement.children.forEach((child) => {\n                     findParent(child, newPath)\n                  })\n               }\n            }\n            elements.forEach((element) => {\n               findParent(element)\n            })\n         },\n         [],\n      )\n\n      useEffect(() => {\n         if (initialSelectedId) {\n            expandSpecificTargetedElements(elements, initialSelectedId)\n         }\n      }, [initialSelectedId, elements])\n\n      const direction = dir === \"rtl\" ? \"rtl\" : \"ltr\"\n\n      return (\n         <TreeContext.Provider\n            value={{\n               selectedId,\n               expandedItems,\n               handleExpand,\n               selectItem,\n               setExpandedItems,\n               indicator,\n               openIcon,\n               closeIcon,\n               direction,\n            }}\n         >\n            <div className={cn(\"size-full\", className)}>\n               <ScrollArea\n                  ref={ref}\n                  className=\"relative h-full px-2\"\n                  dir={dir as Direction}\n               >\n                  <AccordionPrimitive.Root\n                     {...props}\n                     type=\"multiple\"\n                     defaultValue={expandedItems}\n                     value={expandedItems}\n                     className=\"flex flex-col gap-1\"\n                     onValueChange={(value) =>\n                        setExpandedItems((prev) => [...(prev ?? []), value[0]])\n                     }\n                     dir={dir as Direction}\n                  >\n                     {children}\n                  </AccordionPrimitive.Root>\n               </ScrollArea>\n            </div>\n         </TreeContext.Provider>\n      )\n   },\n)\n\nTree.displayName = \"Tree\"\n\nconst TreeIndicator = forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const { direction } = useTree()\n\n   return (\n      <div\n         dir={direction}\n         ref={ref}\n         className={cn(\n            \"bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\n\nTreeIndicator.displayName = \"TreeIndicator\"\n\ninterface FolderComponentProps\n   extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {}\n\ntype FolderProps = {\n   expandedItems?: string[]\n   element: string\n   isSelectable?: boolean\n   isSelect?: boolean\n} & FolderComponentProps\n\nconst Folder = forwardRef<\n   HTMLDivElement,\n   FolderProps & React.HTMLAttributes<HTMLDivElement>\n>(\n   (\n      {\n         className,\n         element,\n         value,\n         isSelectable = true,\n         isSelect,\n         children,\n         ...props\n      },\n      _ref,\n   ) => {\n      const {\n         direction,\n         handleExpand,\n         expandedItems,\n         indicator,\n         setExpandedItems,\n         openIcon,\n         closeIcon,\n      } = useTree()\n\n      return (\n         <AccordionPrimitive.Item\n            {...props}\n            value={value}\n            className=\"relative h-full overflow-hidden \"\n         >\n            <AccordionPrimitive.Trigger\n               className={cn(\n                  `flex items-center gap-1 rounded-md text-sm`,\n                  className,\n                  {\n                     \"bg-muted rounded-md\": isSelect && isSelectable,\n                     \"cursor-pointer\": isSelectable,\n                     \"cursor-not-allowed opacity-50\": !isSelectable,\n                  },\n               )}\n               disabled={!isSelectable}\n               onClick={() => handleExpand(value)}\n            >\n               {expandedItems?.includes(value)\n                  ? (openIcon ?? <FolderOpenIcon className=\"size-4\" />)\n                  : (closeIcon ?? <FolderIcon className=\"size-4\" />)}\n               <span>{element}</span>\n            </AccordionPrimitive.Trigger>\n            <AccordionPrimitive.Content className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative h-full overflow-hidden text-sm\">\n               {element && indicator && <TreeIndicator aria-hidden=\"true\" />}\n               <AccordionPrimitive.Root\n                  dir={direction}\n                  type=\"multiple\"\n                  className=\"ml-5 flex flex-col gap-1 py-1 rtl:mr-5 \"\n                  defaultValue={expandedItems}\n                  value={expandedItems}\n                  onValueChange={(value) => {\n                     setExpandedItems?.((prev) => [...(prev ?? []), value[0]])\n                  }}\n               >\n                  {children}\n               </AccordionPrimitive.Root>\n            </AccordionPrimitive.Content>\n         </AccordionPrimitive.Item>\n      )\n   },\n)\n\nFolder.displayName = \"Folder\"\n\nconst File = forwardRef<\n   HTMLButtonElement,\n   {\n      value: string\n      handleSelect?: (id: string) => void\n      isSelectable?: boolean\n      isSelect?: boolean\n      fileIcon?: React.ReactNode\n   } & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(\n   (\n      {\n         value,\n         className,\n         handleSelect,\n         isSelectable = true,\n         isSelect,\n         fileIcon,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const { direction, selectedId, selectItem } = useTree()\n      const isSelected = isSelect ?? selectedId === value\n      return (\n         <AccordionPrimitive.Item value={value} className=\"relative\">\n            <AccordionPrimitive.Trigger\n               ref={ref}\n               {...props}\n               dir={direction}\n               disabled={!isSelectable}\n               aria-label=\"File\"\n               className={cn(\n                  \"flex cursor-pointer items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out  rtl:pl-1 rtl:pr-0\",\n                  {\n                     \"bg-muted\": isSelected && isSelectable,\n                  },\n                  isSelectable\n                     ? \"cursor-pointer\"\n                     : \"cursor-not-allowed opacity-50\",\n                  className,\n               )}\n               onClick={() => selectItem(value)}\n            >\n               {fileIcon ?? <FileIcon className=\"size-4\" />}\n               {children}\n            </AccordionPrimitive.Trigger>\n         </AccordionPrimitive.Item>\n      )\n   },\n)\n\nFile.displayName = \"File\"\n\nconst CollapseButton = forwardRef<\n   HTMLButtonElement,\n   {\n      elements: TreeViewElement[]\n      expandAll?: boolean\n   } & React.HTMLAttributes<HTMLButtonElement>\n>(({ className, elements, expandAll = false, children, ...props }, ref) => {\n   const { expandedItems, setExpandedItems } = useTree()\n\n   const expendAllTree = useCallback((elements: TreeViewElement[]) => {\n      const expandTree = (element: TreeViewElement) => {\n         const isSelectable = element.isSelectable ?? true\n         if (isSelectable && element.children && element.children.length > 0) {\n            setExpandedItems?.((prev) => [...(prev ?? []), element.id])\n            element.children.forEach(expandTree)\n         }\n      }\n\n      elements.forEach(expandTree)\n   }, [])\n\n   const closeAll = useCallback(() => {\n      setExpandedItems?.([])\n   }, [])\n\n   useEffect(() => {\n      // eslint-disable-next-line no-console\n      console.log(expandAll)\n      if (expandAll) {\n         expendAllTree(elements)\n      }\n   }, [expandAll])\n\n   return (\n      <Button\n         variant=\"ghost\"\n         className=\"absolute bottom-1 right-2 h-8 w-fit p-1\"\n         onClick={\n            expandedItems && expandedItems.length > 0\n               ? closeAll\n               : () => expendAllTree(elements)\n         }\n         ref={ref}\n         {...props}\n      >\n         {children}\n         <span className=\"sr-only\">Toggle</span>\n      </Button>\n   )\n})\n\nCollapseButton.displayName = \"CollapseButton\"\n\nexport { CollapseButton, File, Folder, Tree, type TreeViewElement }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/flickering-grid-demo.json b/apps/web/public/v0/styles/miami/flickering-grid-demo.json
new file mode 100644
index 00000000..b797cfd7
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/flickering-grid-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "flickering-grid-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/flickering-grid-demo.tsx",
+      "content": "import { FlickeringGrid } from \"@/components/ui/flickering-grid\"\n\nexport default function FlickeringGridDemo() {\n   return (\n      <div className=\"relative h-[500px] w-full overflow-hidden rounded-lg border bg-background\">\n         <FlickeringGrid\n            className=\"absolute inset-0 z-0 size-full\"\n            squareSize={4}\n            gridGap={6}\n            color=\"#6B7280\"\n            maxOpacity={0.5}\n            flickerChance={0.1}\n            height={800}\n            width={800}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/flickering-grid-rounded-demo.json b/apps/web/public/v0/styles/miami/flickering-grid-rounded-demo.json
new file mode 100644
index 00000000..269b269a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/flickering-grid-rounded-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "flickering-grid-rounded-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/flickering-grid-rounded-demo.tsx",
+      "content": "import { FlickeringGrid } from \"@/components/ui/flickering-grid\"\n\nexport default function FlickeringGridRoundedDemo() {\n   return (\n      <div className=\"relative size-[600px] w-full overflow-hidden rounded-lg border bg-background\">\n         <FlickeringGrid\n            className=\"relative inset-0 z-0 [mask-image:radial-gradient(450px_circle_at_center,white,transparent)]\"\n            squareSize={4}\n            gridGap={6}\n            color=\"#60A5FA\"\n            maxOpacity={0.5}\n            flickerChance={0.1}\n            height={800}\n            width={800}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/flickering-grid.json b/apps/web/public/v0/styles/miami/flickering-grid.json
new file mode 100644
index 00000000..a190ee81
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/flickering-grid.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "flickering-grid",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/flickering-grid.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {\n   squareSize?: number\n   gridGap?: number\n   flickerChance?: number\n   color?: string\n   width?: number\n   height?: number\n   className?: string\n   maxOpacity?: number\n}\n\nexport const FlickeringGrid: React.FC<FlickeringGridProps> = ({\n   squareSize = 4,\n   gridGap = 6,\n   flickerChance = 0.3,\n   color = \"rgb(0, 0, 0)\",\n   width,\n   height,\n   className,\n   maxOpacity = 0.3,\n   ...props\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const containerRef = useRef<HTMLDivElement>(null)\n   const [isInView, setIsInView] = useState(false)\n   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 })\n\n   const memoizedColor = useMemo(() => {\n      const toRGBA = (color: string) => {\n         if (typeof window === \"undefined\") {\n            return `rgba(0, 0, 0,`\n         }\n         const canvas = document.createElement(\"canvas\")\n         canvas.width = canvas.height = 1\n         const ctx = canvas.getContext(\"2d\")\n         if (!ctx) return \"rgba(255, 0, 0,\"\n         ctx.fillStyle = color\n         ctx.fillRect(0, 0, 1, 1)\n         const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)\n         return `rgba(${r}, ${g}, ${b},`\n      }\n      return toRGBA(color)\n   }, [color])\n\n   const setupCanvas = useCallback(\n      (canvas: HTMLCanvasElement, width: number, height: number) => {\n         const dpr = window.devicePixelRatio || 1\n         canvas.width = width * dpr\n         canvas.height = height * dpr\n         canvas.style.width = `${width}px`\n         canvas.style.height = `${height}px`\n         const cols = Math.floor(width / (squareSize + gridGap))\n         const rows = Math.floor(height / (squareSize + gridGap))\n\n         const squares = new Float32Array(cols * rows)\n         for (let i = 0; i < squares.length; i++) {\n            squares[i] = Math.random() * maxOpacity\n         }\n\n         return { cols, rows, squares, dpr }\n      },\n      [squareSize, gridGap, maxOpacity],\n   )\n\n   const updateSquares = useCallback(\n      (squares: Float32Array, deltaTime: number) => {\n         for (let i = 0; i < squares.length; i++) {\n            if (Math.random() < flickerChance * deltaTime) {\n               squares[i] = Math.random() * maxOpacity\n            }\n         }\n      },\n      [flickerChance, maxOpacity],\n   )\n\n   const drawGrid = useCallback(\n      (\n         ctx: CanvasRenderingContext2D,\n         width: number,\n         height: number,\n         cols: number,\n         rows: number,\n         squares: Float32Array,\n         dpr: number,\n      ) => {\n         ctx.clearRect(0, 0, width, height)\n         ctx.fillStyle = \"transparent\"\n         ctx.fillRect(0, 0, width, height)\n\n         for (let i = 0; i < cols; i++) {\n            for (let j = 0; j < rows; j++) {\n               const opacity = squares[i * rows + j]\n               ctx.fillStyle = `${memoizedColor}${opacity})`\n               ctx.fillRect(\n                  i * (squareSize + gridGap) * dpr,\n                  j * (squareSize + gridGap) * dpr,\n                  squareSize * dpr,\n                  squareSize * dpr,\n               )\n            }\n         }\n      },\n      [memoizedColor, squareSize, gridGap],\n   )\n\n   useEffect(() => {\n      const canvas = canvasRef.current\n      const container = containerRef.current\n      if (!canvas || !container) return\n\n      const ctx = canvas.getContext(\"2d\")\n      if (!ctx) return\n\n      let animationFrameId: number\n      let gridParams: ReturnType<typeof setupCanvas>\n\n      const updateCanvasSize = () => {\n         const newWidth = width || container.clientWidth\n         const newHeight = height || container.clientHeight\n         setCanvasSize({ width: newWidth, height: newHeight })\n         gridParams = setupCanvas(canvas, newWidth, newHeight)\n      }\n\n      updateCanvasSize()\n\n      let lastTime = 0\n      const animate = (time: number) => {\n         if (!isInView) return\n\n         const deltaTime = (time - lastTime) / 1000\n         lastTime = time\n\n         updateSquares(gridParams.squares, deltaTime)\n         drawGrid(\n            ctx,\n            canvas.width,\n            canvas.height,\n            gridParams.cols,\n            gridParams.rows,\n            gridParams.squares,\n            gridParams.dpr,\n         )\n         animationFrameId = requestAnimationFrame(animate)\n      }\n\n      const resizeObserver = new ResizeObserver(() => {\n         updateCanvasSize()\n      })\n\n      resizeObserver.observe(container)\n\n      const intersectionObserver = new IntersectionObserver(\n         ([entry]) => {\n            setIsInView(entry.isIntersecting)\n         },\n         { threshold: 0 },\n      )\n\n      intersectionObserver.observe(canvas)\n\n      if (isInView) {\n         animationFrameId = requestAnimationFrame(animate)\n      }\n\n      return () => {\n         cancelAnimationFrame(animationFrameId)\n         resizeObserver.disconnect()\n         intersectionObserver.disconnect()\n      }\n   }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])\n\n   return (\n      <div\n         ref={containerRef}\n         className={cn(`h-full w-full ${className}`)}\n         {...props}\n      >\n         <canvas\n            ref={canvasRef}\n            className=\"pointer-events-none\"\n            style={{\n               width: canvasSize.width,\n               height: canvasSize.height,\n            }}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/flip-text-demo.json b/apps/web/public/v0/styles/miami/flip-text-demo.json
new file mode 100644
index 00000000..7fc58305
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/flip-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "flip-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/flip-text-demo.tsx",
+      "content": "import FlipText from \"@/components/ui/flip-text\"\n\nexport default async function FlipTextDemo() {\n   return (\n      <FlipText\n         className=\"text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         word=\"Flip Text\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/flip-text.json b/apps/web/public/v0/styles/miami/flip-text.json
new file mode 100644
index 00000000..202ef321
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/flip-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "flip-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/flip-text.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface SlightFlipProps {\n   word: string\n   duration?: number\n   delayMultiple?: number\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function SlightFlip({\n   word,\n   duration = 0.5,\n   delayMultiple = 0.08,\n   framerProps = {\n      hidden: { rotateX: -90, opacity: 0 },\n      visible: { rotateX: 0, opacity: 1 },\n   },\n   className,\n}: SlightFlipProps) {\n   return (\n      <div className=\"flex justify-center space-x-2\">\n         <AnimatePresence mode=\"wait\">\n            {word.split(\"\").map((char, i) => (\n               <motion.span\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={framerProps}\n                  transition={{ duration, delay: i * delayMultiple }}\n                  className={cn(\"origin-center drop-shadow-sm\", className)}\n               >\n                  {char}\n               </motion.span>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/form.json b/apps/web/public/v0/styles/miami/form.json
new file mode 100644
index 00000000..d3acc8d1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/form.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "form",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-label",
+    "@radix-ui/react-slot",
+    "@hookform/resolvers",
+    "zod",
+    "react-hook-form"
+  ],
+  "registryDependencies": [
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "ui/form.tsx",
+      "content": "\"use client\"\n\nimport type * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport * as React from \"react\"\nimport type { ControllerProps, FieldPath, FieldValues } from \"react-hook-form\"\nimport {\n   Controller,\n   FormProvider,\n   useFormContext,\n   useFormState,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/components/ui/label\"\n\nconst Form = FormProvider\n\ninterface FormFieldContextValue<\n   TFieldValues extends FieldValues = FieldValues,\n   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n   name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n   {} as FormFieldContextValue,\n)\n\nfunction FormField<\n   TFieldValues extends FieldValues = FieldValues,\n   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: ControllerProps<TFieldValues, TName>) {\n   return (\n      <FormFieldContext.Provider value={{ name: props.name }}>\n         <Controller {...props} />\n      </FormFieldContext.Provider>\n   )\n}\n\nfunction useFormField() {\n   const fieldContext = React.useContext(FormFieldContext)\n   const itemContext = React.useContext(FormItemContext)\n   const { getFieldState, formState } = useFormContext()\n\n   const fieldState = getFieldState(fieldContext.name, formState)\n\n   if (!fieldContext)\n      throw new Error(\"useFormField should be used within <FormField>\")\n\n   const { id } = itemContext\n\n   return {\n      id,\n      name: fieldContext.name,\n      formItemId: `${id}-form-item`,\n      formDescriptionId: `${id}-form-item-description`,\n      formMessageId: `${id}-form-item-message`,\n      ...fieldState,\n   }\n}\n\ninterface FormItemContextValue {\n   id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n   {} as FormItemContextValue,\n)\n\nconst FormItem = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n   const id = React.useId()\n\n   return (\n      <FormItemContext.Provider value={{ id }}>\n         <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n      </FormItemContext.Provider>\n   )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n   React.ElementRef<typeof LabelPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n   const { error, formItemId } = useFormField()\n\n   return (\n      <Label\n         ref={ref}\n         className={cn(error && \"text-destructive\", className)}\n         htmlFor={formItemId}\n         {...props}\n      />\n   )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n   React.ElementRef<typeof Slot>,\n   React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n   const { error, formItemId, formDescriptionId, formMessageId } =\n      useFormField()\n\n   return (\n      <Slot\n         ref={ref}\n         id={formItemId}\n         aria-describedby={\n            !error\n               ? `${formDescriptionId}`\n               : `${formDescriptionId} ${formMessageId}`\n         }\n         aria-invalid={!!error}\n         {...props}\n      />\n   )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n   const { formDescriptionId } = useFormField()\n\n   return (\n      <p\n         ref={ref}\n         id={formDescriptionId}\n         className={cn(\"text-muted-foreground text-[0.8rem]\", className)}\n         {...props}\n      />\n   )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n   const { error, formMessageId } = useFormField()\n   const body = error ? String(error?.message) : children\n\n   if (!body) return null\n\n   return (\n      <p\n         ref={ref}\n         id={formMessageId}\n         className={cn(\"text-destructive text-[0.8rem] font-medium\", className)}\n         {...props}\n      >\n         {body}\n      </p>\n   )\n})\nFormMessage.displayName = \"FormMessage\"\n\nconst FormGlobalError = React.forwardRef<\n   HTMLParagraphElement,\n   React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n   const { errors } = useFormState()\n   const rootError = errors.root\n   if (!rootError) return null\n\n   return (\n      <p\n         ref={ref}\n         className={cn(\"text-destructive text-sm font-medium\", className)}\n         {...props}\n      >\n         {rootError.message}\n      </p>\n   )\n})\nFormGlobalError.displayName = \"FormGlobalError\"\n\nexport {\n   useFormField,\n   Form,\n   FormItem,\n   FormLabel,\n   FormControl,\n   FormDescription,\n   FormMessage,\n   FormGlobalError,\n   FormField,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/gauge-circle-demo.json b/apps/web/public/v0/styles/miami/gauge-circle-demo.json
new file mode 100644
index 00000000..61a68803
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/gauge-circle-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "gauge-circle-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/gauge-circle-demo.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport GaugeCircle from \"@/components/ui/gauge-circle\"\n\nexport default function GaugeCircleDemo() {\n   const [value, setValue] = useState(0)\n\n   useEffect(() => {\n      const handleIncrement = (prev: number) => {\n         if (prev === 100) return 0\n\n         return prev + 10\n      }\n      setValue(handleIncrement)\n      const interval = setInterval(() => setValue(handleIncrement), 2000)\n      return () => clearInterval(interval)\n   }, [])\n\n   return (\n      <GaugeCircle\n         max={100}\n         min={0}\n         value={value}\n         gaugePrimaryColor=\"rgb(79 70 229)\"\n         gaugeSecondaryColor=\"rgba(0, 0, 0, 0.1)\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/gauge-circle.json b/apps/web/public/v0/styles/miami/gauge-circle.json
new file mode 100644
index 00000000..9d8fc832
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/gauge-circle.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "gauge-circle",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/gauge-circle.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\ninterface Props {\n   max: number\n   value: number\n   min: number\n   gaugePrimaryColor: string\n   gaugeSecondaryColor: string\n   className?: string\n}\n\nexport default function GaugeCircle({\n   max = 100,\n   min = 0,\n   value = 0,\n   gaugePrimaryColor,\n   gaugeSecondaryColor,\n   className,\n}: Props) {\n   const circumference = 2 * Math.PI * 45\n   const percentPx = circumference / 100\n   const currentPercent = ((value - min) / (max - min)) * 100\n\n   return (\n      <div\n         className={cn(\"relative size-40 text-2xl font-semibold\", className)}\n         style={\n            {\n               \"--circle-size\": \"100px\",\n               \"--circumference\": `${circumference}px`,\n               \"--percent-to-px\": `${percentPx}px`,\n               \"--gap-percent\": \"5\",\n               \"--offset-factor\": \"0\",\n               \"--transition-length\": \"1s\",\n               \"--transition-step\": \"200ms\",\n               \"--delay\": \"0s\",\n               \"--percent-to-deg\": \"3.6deg\",\n               transform: \"translateZ(0)\",\n            } as React.CSSProperties\n         }\n      >\n         <svg\n            fill=\"none\"\n            className=\"size-full\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 100 100\"\n         >\n            {currentPercent <= 90 && currentPercent >= 0 && (\n               <circle\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"45\"\n                  strokeWidth=\"10\"\n                  strokeDashoffset=\"0\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\"opacity-100\"\n                  style={{\n                     stroke: gaugeSecondaryColor,\n                     strokeDasharray: `${(90 - currentPercent) * percentPx}px ${circumference}px`,\n                     transform: `rotate(calc(1turn - 90deg - (5 * 3.6deg * (1 - 0)))) scaleY(-1)`,\n                     transition: \"all 1s ease 0s\",\n                     transformOrigin: \"50px 50px\",\n                  }}\n               />\n            )}\n            <circle\n               cx=\"50\"\n               cy=\"50\"\n               r=\"45\"\n               strokeWidth=\"10\"\n               strokeDashoffset=\"0\"\n               strokeLinecap=\"round\"\n               strokeLinejoin=\"round\"\n               className=\"opacity-100\"\n               style={{\n                  stroke: gaugePrimaryColor,\n                  strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,\n                  transition: \"1s ease 0s, stroke 1s ease 0s\",\n                  transitionProperty: \"stroke-dasharray,transform\",\n                  transform: \"rotate(calc(-90deg + 5 * 0 * 3.6deg))\",\n                  transformOrigin: \"50px 50px\",\n               }}\n            />\n         </svg>\n         <span\n            className=\"animate-in fade-in absolute inset-0 m-auto size-fit\"\n            style={{\n               animationDelay: \"0s\",\n               transitionDuration: \"1s\",\n            }}\n         >\n            {Math.round(currentPercent)}\n         </span>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/globe-demo.json b/apps/web/public/v0/styles/miami/globe-demo.json
new file mode 100644
index 00000000..e3629dee
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/globe-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "globe-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/globe-demo.tsx",
+      "content": "import Globe from \"@/components/ui/globe\"\n\nexport default function GlobeDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-40 pb-40 pt-8 md:pb-60 md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Globe\n         </span>\n         <Globe className=\"top-28\" />\n         <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/globe-grid-demo.json b/apps/web/public/v0/styles/miami/globe-grid-demo.json
new file mode 100644
index 00000000..8c062236
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/globe-grid-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "globe-grid-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/globe-grid-demo.tsx",
+      "content": "import { GlobeGrid } from \"@/components/ui/globe-grid\"\n\nexport function GlobeGridDemo() {\n   return <GlobeGrid />\n}\n\nexport default GlobeGridDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/globe-grid-full-demo.json b/apps/web/public/v0/styles/miami/globe-grid-full-demo.json
new file mode 100644
index 00000000..628b596f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/globe-grid-full-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "globe-grid-full-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/globe-grid-full-demo.tsx",
+      "content": "import { GlobeGrid } from \"@/components/ui/globe-grid\"\n\nexport function GlobeGridDemo() {\n   return <GlobeGrid fullGlobe />\n}\n\nexport default GlobeGridDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/globe-grid.json b/apps/web/public/v0/styles/miami/globe-grid.json
new file mode 100644
index 00000000..22e97057
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/globe-grid.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "globe-grid",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [],
+  "files": [
+    {
+      "path": "ui/globe-grid.tsx",
+      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface GlobeGridProps {\n   fullGlobe?: boolean\n   className?: string\n}\n\nexport function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {\n   return (\n      <div\n         className={cn(\n            \"relative flex min-h-[350px] w-full items-center justify-center overflow-hidden\",\n            className,\n         )}\n      >\n         <section\n            className=\"relative w-full max-w-[600px]\"\n            style={\n               {\n                  \"--sm-grid-columns\": \"6\",\n                  \"--md-grid-columns\": \"6\",\n                  \"--sm-grid-rows\": fullGlobe ? \"12\" : \"6\",\n                  \"--md-grid-rows\": fullGlobe ? \"12\" : \"6\",\n                  \"--grid-columns\": \"var(--sm-grid-columns)\",\n                  \"--grid-rows\": \"var(--sm-grid-rows)\",\n                  aspectRatio: fullGlobe ? \"1/1\" : \"2/1\",\n               } as React.CSSProperties\n            }\n         >\n            <style jsx>\n               {`\n               @media (min-width: 768px) {\n                  section {\n                     --grid-columns: var(--md-grid-columns);\n                     --grid-rows: var(--md-grid-rows);\n                  }\n               }\n            `}\n            </style>\n            <div className=\"absolute left-0 top-0 z-[5] ml-[-0.5px] w-full md:left-1/2 md:top-1/2 md:h-[200%] md:-translate-x-1/2 md:-translate-y-1/2\">\n               <svg\n                  aria-hidden=\"true\"\n                  height=\"100%\"\n                  style={{\n                     transform: fullGlobe\n                        ? \"translateY(0px) scale(1.002)\"\n                        : \"translateY(-12.5%) scale(1.002)\",\n                  }}\n                  viewBox={fullGlobe ? \"-1 -1 802 802\" : \"-1 -151 802 602\"}\n                  width=\"100%\"\n                  className=\"[--guide-color:theme(colors.border/50%)]\"\n               >\n                  <defs>\n                     <clipPath id=\"half-globe-clip\">\n                        <rect x=\"-1\" y=\"-151\" width=\"802\" height=\"551\" />\n                     </clipPath>\n                  </defs>\n\n                  <g\n                     data-testid=\"globe-wireframe\"\n                     clipPath={fullGlobe ? \"none\" : \"url(#half-globe-clip)\"}\n                  >\n                     <circle\n                        cx=\"400\"\n                        cy=\"400\"\n                        fill=\"var(--ds-background-200)\"\n                        r=\"400\"\n                     />\n                     <path\n                        d=\"M 400 800 A -400 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 800 A -266.667 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 800 A -133.333 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 800 A 0 400 0 0 0 400 0\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 0 A 133.333 400 0 0 0 400 800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 0 A 266.667 400 0 0 0 400 800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M 400 0 A 400 400 0 0 0 400 800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n\n                     <path\n                        d=\"M178.892,66.667 h442.217\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M101.858,133.333 h596.285\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M53.59,200 h692.82\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M22.876,266.667 h754.247\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M5.595,333.333 h788.811\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     <path\n                        d=\"M0,400 h800\"\n                        fill=\"none\"\n                        stroke=\"url(#globe-gradient)\"\n                        strokeWidth=\"1\"\n                        vectorEffect=\"non-scaling-stroke\"\n                     />\n                     {fullGlobe && (\n                        <>\n                           <path\n                              d=\"M5.595,466.667 h788.811\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M22.876,533.333 h754.247\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M53.59,600 h692.82\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M101.858,666.667 h596.285\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                           <path\n                              d=\"M178.892,733.333 h442.217\"\n                              fill=\"none\"\n                              stroke=\"url(#globe-gradient)\"\n                              strokeWidth=\"1\"\n                              vectorEffect=\"non-scaling-stroke\"\n                           />\n                        </>\n                     )}\n                  </g>\n\n                  {/* Original animated paths */}\n                  <g id=\"animated-paths\">\n                     {/* First animated path */}\n                     <g\n                        id=\"lllldll31\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-1)]\"\n                     >\n                        <path\n                           d=\"M794.405,333.333 h-131.468M662.937,333.333 h-131.468M531.468,333.333 h-131.468M400,333.333 h-131.468M 268.532 333.333 A -133.333 400 0 0 0 266.667 400M266.667,400 h-133.333M133.333,400 h-133.333\"\n                           fill=\"none\"\n                           stroke=\"url(#lllldll31-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-lllldll31\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"lllldll31-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"794.405;794.405;662.937;531.468;400;268.532;266.667;133.333;0;0;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"333.333;333.333;333.333;333.333;333.333;333.333;400;400;400;400;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-lllldll31\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;100;100;100;100;100;100;100;100;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Second animated path */}\n                     <g\n                        id=\"llullldl34\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-2)]\"\n                     >\n                        <path\n                           d=\"M698.142,133.333 h-99.381M598.762,133.333 h-99.381M 499.381 133.333 A 133.333 400 0 0 0 473.703 66.667M473.703,66.667 h-73.703M400,66.667 h-73.703M326.297,66.667 h-73.703M 252.594 66.667 A -266.667 400 0 0 0 201.238 133.333M201.238,133.333 h-99.381\"\n                           fill=\"none\"\n                           stroke=\"url(#llullldl34-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llullldl34\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llullldl34-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"698.142;698.142;598.762;499.381;473.703;400;326.297;252.594;201.238;101.858;101.858;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"133.333;133.333;133.333;133.333;66.667;66.667;66.667;66.667;133.333;133.333;133.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llullldl34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;50;50;50;50;50;50;50;50;50;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Third animated path */}\n                     <g\n                        id=\"llldlll35\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-1)]\"\n                     >\n                        <path\n                           d=\"M621.108,66.667 h-73.703M547.406,66.667 h-73.703M473.703,66.667 h-73.703M 400 133.333 A 0 400 0 0 0 400 66.667M400,133.333 h-99.381M300.619,133.333 h-99.381M201.238,133.333 h-99.381\"\n                           fill=\"none\"\n                           stroke=\"url(#llldlll35-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llldlll35\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llldlll35-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"621.108;621.108;547.406;473.703;400;400;300.619;201.238;101.858;101.858;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"66.667;66.667;66.667;66.667;66.667;133.333;133.333;133.333;133.333;133.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llldlll35\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Fourth animated path */}\n                     <g\n                        id=\"llddllll33\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-3)]\"\n                     >\n                        <path\n                           d=\"M746.41,200 h-115.47M630.94,200 h-115.47M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M 531.468 333.333 A 133.333 400 0 0 0 525.708 266.667M531.468,333.333 h-131.468M400,333.333 h-131.468M268.532,333.333 h-131.468M137.063,333.333 h-131.468\"\n                           fill=\"none\"\n                           stroke=\"url(#llddllll33-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llddllll33\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llddllll33-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"746.41;746.41;630.94;515.47;525.708;531.468;400;268.532;137.063;5.595;5.595;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"200;200;200;200;266.667;333.333;333.333;333.333;333.333;333.333;333.333;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llddllll33\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;100;100;100;100;100;100;100;100;100;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Fifth animated path */}\n                     <g\n                        id=\"lllddlll34\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-2)]\"\n                     >\n                        <path\n                           d=\"M698.142,133.333 h-99.381M598.762,133.333 h-99.381M499.381,133.333 h-99.381M 400 200 A 0 400 0 0 0 400 133.333M 400 266.667 A 0 400 0 0 0 400 200M400,266.667 h-125.708M274.292,266.667 h-125.708M148.584,266.667 h-125.708\"\n                           fill=\"none\"\n                           stroke=\"url(#lllddlll34-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-lllddlll34\"\n                              keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"lllddlll34-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"698.142;698.142;598.762;499.381;400;400;400;274.292;148.584;22.876;22.876;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"133.333;133.333;133.333;133.333;133.333;200;266.667;266.667;266.667;266.667;266.667;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-lllddlll34\"\n                                 keyTimes=\"0;0.082;0.164;0.245;0.327;0.409;0.491;0.573;0.655;0.736;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;66.667;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n\n                     {/* Sixth animated path */}\n                     <g\n                        id=\"llullll32\"\n                        opacity=\"1\"\n                        className=\"[--normal-color:var(--line-color-3)]\"\n                     >\n                        <path\n                           d=\"M777.124,266.667 h-125.708M651.416,266.667 h-125.708M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M515.47,200 h-115.47M400,200 h-115.47M284.53,200 h-115.47M169.06,200 h-115.47\"\n                           fill=\"none\"\n                           stroke=\"url(#llullll32-gradient)\"\n                           strokeLinecap=\"round\"\n                           strokeWidth=\"2\"\n                           vectorEffect=\"non-scaling-stroke\"\n                        >\n                           <animate\n                              attributeName=\"opacity\"\n                              dur=\"5.5s\"\n                              id=\"opacity-llullll32\"\n                              keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                              repeatCount=\"indefinite\"\n                              values=\"0;1;1;1;1;1;1;1;1;0;0\"\n                           />\n                        </path>\n                        <defs>\n                           <radialGradient\n                              className=\"[--color:var(--normal-color)]\"\n                              cx=\"100\"\n                              cy=\"100\"\n                              gradientUnits=\"userSpaceOnUse\"\n                              id=\"llullll32-gradient\"\n                              r=\"0\"\n                           >\n                              <stop offset=\"0\" stopColor=\"var(--color)\" />\n                              <stop offset=\"0.4\" stopColor=\"var(--color)\" />\n                              <stop\n                                 offset=\"1\"\n                                 stopColor=\"var(--color)\"\n                                 stopOpacity=\"0\"\n                              />\n                              <animate\n                                 attributeName=\"cx\"\n                                 dur=\"5.5s\"\n                                 id=\"cx-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"777.124;777.124;651.416;525.708;515.47;400;284.53;169.06;53.59;53.59;0\"\n                              />\n                              <animate\n                                 attributeName=\"cy\"\n                                 dur=\"5.5s\"\n                                 id=\"cy-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"266.667;266.667;266.667;266.667;200;200;200;200;200;200;0\"\n                              />\n                              <animate\n                                 attributeName=\"r\"\n                                 dur=\"5.5s\"\n                                 id=\"r-llullll32\"\n                                 keyTimes=\"0;0.091;0.182;0.273;0.364;0.455;0.545;0.636;0.727;0.818;1\"\n                                 repeatCount=\"indefinite\"\n                                 values=\"0;50;50;50;50;50;50;50;50;0;0\"\n                              />\n                           </radialGradient>\n                        </defs>\n                     </g>\n                  </g>\n\n                  {/* Mirrored paths for full globe */}\n                  {fullGlobe && (\n                     <g\n                        transform=\"translate(0,800) scale(1,-1)\"\n                        className=\"opacity-50\" // Optional: slightly reduce opacity of bottom paths\n                     >\n                        <use href=\"#animated-paths\" />\n                     </g>\n                  )}\n\n                  <defs>\n                     <linearGradient\n                        gradientUnits=\"userSpaceOnUse\"\n                        id=\"globe-gradient\"\n                        x1=\"0\"\n                        x2=\"0\"\n                        y1=\"0\"\n                        y2=\"400\"\n                     >\n                        <stop offset=\"0%\" stopColor=\"var(--guide-color)\" />\n                        <stop offset=\"100%\" stopColor=\"var(--guide-color)\" />\n                     </linearGradient>\n                  </defs>\n               </svg>\n            </div>\n         </section>\n      </div>\n   )\n}\n\nexport default GlobeGrid\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "gridTemplateColumns": {
+            "grid-md": "repeat(var(--md-grid-columns), 1fr)",
+            "grid-sm": "repeat(var(--sm-grid-columns), 1fr)"
+          },
+          "gridTemplateRows": {
+            "grid-md": "repeat(var(--md-grid-rows), 1fr)",
+            "grid-sm": "repeat(var(--sm-grid-rows), 1fr)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "--guide-color": "rgba(255, 255, 255, 0.1)",
+      "--ds-background-200": "rgba(0, 0, 0, 0.5)",
+      "--line-color-1": "hsl(267, 100%, 64%)",
+      "--line-color-2": "hsl(272.1, 71.7%, 47.1%)",
+      "--line-color-3": "hsl(155, 89%, 51%)"
+    },
+    "dark": {
+      "--guide-color": "rgba(255, 255, 255, 0.15)",
+      "--ds-background-200": "rgba(0, 0, 0, 0.7)",
+      "--line-color-1": "hsl(267, 100%, 64%)",
+      "--line-color-2": "hsl(272.1, 71.7%, 47.1%)",
+      "--line-color-3": "hsl(155, 89%, 51%)"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/globe.json b/apps/web/public/v0/styles/miami/globe.json
new file mode 100644
index 00000000..6f1336f9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/globe.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "globe",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "cobe",
+    "react-spring"
+  ],
+  "files": [
+    {
+      "path": "ui/globe.tsx",
+      "content": "\"use client\"\n\nimport type { COBEOptions } from \"cobe\"\nimport createGlobe from \"cobe\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useSpring } from \"react-spring\"\nimport { cn } from \"@/lib/utils\"\n\nconst GLOBE_CONFIG: COBEOptions = {\n   width: 800,\n   height: 800,\n   onRender: () => {},\n   devicePixelRatio: 2,\n   phi: 0,\n   theta: 0.3,\n   dark: 0,\n   diffuse: 0.4,\n   mapSamples: 16000,\n   mapBrightness: 1.2,\n   baseColor: [1, 1, 1],\n   markerColor: [251 / 255, 100 / 255, 21 / 255],\n   glowColor: [1, 1, 1],\n   markers: [\n      { location: [14.5995, 120.9842], size: 0.03 },\n      { location: [19.076, 72.8777], size: 0.1 },\n      { location: [23.8103, 90.4125], size: 0.05 },\n      { location: [30.0444, 31.2357], size: 0.07 },\n      { location: [39.9042, 116.4074], size: 0.08 },\n      { location: [-23.5505, -46.6333], size: 0.1 },\n      { location: [19.4326, -99.1332], size: 0.1 },\n      { location: [40.7128, -74.006], size: 0.1 },\n      { location: [34.6937, 135.5022], size: 0.05 },\n      { location: [41.0082, 28.9784], size: 0.06 },\n   ],\n}\n\nexport default function Globe({\n   className,\n   config = GLOBE_CONFIG,\n}: {\n   className?: string\n   config?: COBEOptions\n}) {\n   let phi = 0\n   let width = 0\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const pointerInteracting = useRef(null)\n   const pointerInteractionMovement = useRef(0)\n   const [{ r }, api] = useSpring(() => ({\n      r: 0,\n      config: {\n         mass: 1,\n         tension: 280,\n         friction: 40,\n         precision: 0.001,\n      },\n   }))\n\n   const updatePointerInteraction = (value: any) => {\n      pointerInteracting.current = value\n      canvasRef.current!.style.cursor = value ? \"grabbing\" : \"grab\"\n   }\n\n   const updateMovement = (clientX: any) => {\n      if (pointerInteracting.current !== null) {\n         const delta = clientX - pointerInteracting.current\n         pointerInteractionMovement.current = delta\n         api.start({ r: delta / 200 })\n      }\n   }\n\n   const onRender = useCallback(\n      (state: Record<string, any>) => {\n         if (!pointerInteracting.current) phi += 0.005\n         state.phi = phi + r.get()\n         state.width = width * 2\n         state.height = width * 2\n      },\n      [pointerInteracting, phi, r],\n   )\n\n   const onResize = () => {\n      if (canvasRef.current) width = canvasRef.current.offsetWidth\n   }\n\n   useEffect(() => {\n      window.addEventListener(\"resize\", onResize)\n      onResize()\n\n      const globe = createGlobe(canvasRef.current!, {\n         ...config,\n         width: width * 2,\n         height: width * 2,\n         onRender,\n      })\n\n      setTimeout(() => (canvasRef.current!.style.opacity = \"1\"))\n      return () => globe.destroy()\n   }, [])\n\n   return (\n      <div\n         className={cn(\n            \"absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]\",\n            className,\n         )}\n      >\n         <canvas\n            className={cn(\n               \"size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]\",\n            )}\n            ref={canvasRef}\n            onPointerDown={(e) =>\n               updatePointerInteraction(\n                  e.clientX - pointerInteractionMovement.current,\n               )\n            }\n            onPointerUp={() => updatePointerInteraction(null)}\n            onPointerOut={() => updatePointerInteraction(null)}\n            onMouseMove={(e) => updateMovement(e.clientX)}\n            onTouchMove={(e) =>\n               e.touches[0] && updateMovement(e.touches[0].clientX)\n            }\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/gradual-spacing-demo.json b/apps/web/public/v0/styles/miami/gradual-spacing-demo.json
new file mode 100644
index 00000000..7c8ef959
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/gradual-spacing-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "gradual-spacing-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/gradual-spacing-demo.tsx",
+      "content": "import GradualSpacing from \"@/components/ui/gradual-spacing\"\n\nexport default async function GradualSpacingDemo() {\n   return (\n      <GradualSpacing\n         className=\"font-display text-center text-4xl font-bold -tracking-widest  text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         text=\"Gradual Spacing\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/gradual-spacing.json b/apps/web/public/v0/styles/miami/gradual-spacing.json
new file mode 100644
index 00000000..a9245a35
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/gradual-spacing.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "gradual-spacing",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/gradual-spacing.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface GradualSpacingProps {\n   text: string\n   duration?: number\n   delayMultiple?: number\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function GradualSpacing({\n   text,\n   duration = 0.5,\n   delayMultiple = 0.04,\n   framerProps = {\n      hidden: { opacity: 0, x: -20 },\n      visible: { opacity: 1, x: 0 },\n   },\n   className,\n}: GradualSpacingProps) {\n   return (\n      <div className=\"flex justify-center space-x-1\">\n         <AnimatePresence>\n            {text.split(\"\").map((char, i) => (\n               <motion.h1\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={framerProps}\n                  transition={{ duration, delay: i * delayMultiple }}\n                  className={cn(\"drop-shadow-sm \", className)}\n               >\n                  {char === \" \" ? <span>&nbsp;</span> : char}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/grid-layout-columns-demo.json b/apps/web/public/v0/styles/miami/grid-layout-columns-demo.json
new file mode 100644
index 00000000..1eac9364
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/grid-layout-columns-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-layout-columns-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/grid-layout-columns-demo.tsx",
+      "content": "\"use client\"\n\nimport GridLayout from \"@/components/ui/grid-layout\"\n\nexport default function GridLayoutColumnsDemo() {\n   return (\n      <div className=\"space-y-8\">\n         <GridLayout\n            columns={8}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">8 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Compact layouts</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            columns={12}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">12 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">Traditional grid</p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            columns={16}\n            className=\"min-h-[150px] p-4\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">16 Columns</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Fine-grained control\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/grid-layout-crosshairs-demo.json b/apps/web/public/v0/styles/miami/grid-layout-crosshairs-demo.json
new file mode 100644
index 00000000..0f1deb38
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/grid-layout-crosshairs-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-layout-crosshairs-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/grid-layout-crosshairs-demo.tsx",
+      "content": "\"use client\"\n\nimport GridLayout from \"@/components/ui/grid-layout\"\n\nexport default function GridLayoutCrosshairsDemo() {\n   return (\n      <GridLayout\n         crosshairs={{\n            topLeft: true,\n            topRight: true,\n            bottomLeft: true,\n            bottomRight: true,\n         }}\n         lineVariant=\"none\"\n         className=\"min-h-[350px] p-6\"\n      >\n         <div className=\"flex h-full flex-col items-center justify-center space-y-4\">\n            <div className=\"text-center\">\n               <h3 className=\"text-2xl font-medium\">Corner Markers</h3>\n               <p className=\"text-muted-foreground mt-2\">\n                  Use crosshairs to highlight key areas or create visual anchors\n               </p>\n            </div>\n            <div className=\"grid w-full max-w-xl grid-cols-2 gap-8 pt-8\">\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Top Left\n               </div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Top Right\n               </div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Bottom Left\n               </div>\n               <div className=\"bg-card rounded-lg border p-4 text-center\">\n                  Bottom Right\n               </div>\n            </div>\n         </div>\n      </GridLayout>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/grid-layout-demo.json b/apps/web/public/v0/styles/miami/grid-layout-demo.json
new file mode 100644
index 00000000..ee88839d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/grid-layout-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-layout-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/grid-layout-demo.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport GridLayout from \"@/components/ui/grid-layout\"\n\nexport default function GridLayoutDemo() {\n   return (\n      <GridLayout\n         crosshairs={{\n            topLeft: true,\n            bottomRight: true,\n         }}\n         lineVariant=\"center\"\n         className=\"min-h-[350px] p-8\"\n      >\n         <div className=\"space-y-8\">\n            <div>\n               <h2 className=\"text-4xl font-medium tracking-tight\">\n                  Ready to deploy?{\" \"}\n                  <span className=\"text-muted-foreground\">\n                     Start building with a free account.\n                  </span>\n               </h2>\n               <p className=\"text-muted-foreground mt-4 text-xl\">\n                  Speak to an expert for your{\" \"}\n                  <span className=\"text-blue-500\">Pro</span> or{\" \"}\n                  <span className=\"text-purple-500\">Enterprise</span> needs.\n               </p>\n            </div>\n            <div className=\"flex gap-4\">\n               <Button variant=\"default\" size=\"lg\">\n                  Start Deploying\n               </Button>\n               <Button variant=\"outline\" size=\"lg\">\n                  Contact Sales\n               </Button>\n            </div>\n         </div>\n      </GridLayout>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/grid-layout-variants-demo.json b/apps/web/public/v0/styles/miami/grid-layout-variants-demo.json
new file mode 100644
index 00000000..80495e94
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/grid-layout-variants-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-layout-variants-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "grid-layout"
+  ],
+  "files": [
+    {
+      "path": "examples/grid-layout-variants-demo.tsx",
+      "content": "\"use client\"\n\nimport GridLayout from \"@/components/ui/grid-layout\"\n\nexport default function GridLayoutVariantsDemo() {\n   return (\n      <div className=\"space-y-8\">\n         <GridLayout\n            lineVariant=\"center\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Center Line</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Minimal and focused\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            lineVariant=\"vertical\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Vertical Lines</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Column-focused layout\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n\n         <GridLayout\n            lineVariant=\"horizontal\"\n            className=\"min-h-[150px]\"\n            crosshairs={{\n               topLeft: true,\n               bottomRight: true,\n            }}\n         >\n            <div className=\"flex h-full items-center justify-center\">\n               <div className=\"text-center\">\n                  <h3 className=\"text-xl font-medium\">Horizontal Lines</h3>\n                  <p className=\"text-muted-foreground mt-1\">\n                     Row-based organization\n                  </p>\n               </div>\n            </div>\n         </GridLayout>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/grid-layout.json b/apps/web/public/v0/styles/miami/grid-layout.json
new file mode 100644
index 00000000..6dac152d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/grid-layout.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-layout",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/grid-layout.tsx",
+      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface CrosshairConfig {\n   topLeft?: boolean\n   topRight?: boolean\n   bottomLeft?: boolean\n   bottomRight?: boolean\n}\n\ninterface GridLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n   children: React.ReactNode\n   crosshairs?: CrosshairConfig\n   gridLines?: boolean\n   columns?: 8 | 12 | 16\n   lineVariant?: \"all\" | \"vertical\" | \"horizontal\" | \"center\" | \"none\"\n}\n\nfunction CrosshairIcon({ className }: { className?: string }) {\n   return (\n      <svg\n         width=\"16\"\n         height=\"16\"\n         viewBox=\"0 0 16 16\"\n         fill=\"none\"\n         className={className}\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M8 1V15M1 8H15\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1\"\n            strokeLinecap=\"round\"\n         />\n      </svg>\n   )\n}\n\nexport function GridLayout({\n   children,\n   crosshairs,\n   gridLines = true,\n   columns = 16,\n   lineVariant = \"all\",\n   className,\n   ...props\n}: GridLayoutProps) {\n   return (\n      <div\n         className={cn(\n            \"relative grid w-full gap-0\",\n            gridLines && \"border-grid-line border\",\n            columns === 16 && \"grid-cols-grid-16\",\n            columns === 12 && \"grid-cols-grid-12\",\n            columns === 8 && \"grid-cols-grid-8\",\n            className,\n         )}\n         {...props}\n      >\n         {gridLines && (\n            <div className=\"absolute inset-0 z-0\">\n               {/* Vertikale Linien */}\n               {(lineVariant === \"all\" ||\n                  lineVariant === \"vertical\" ||\n                  lineVariant === \"center\") && (\n                  <div className=\"absolute inset-0 flex justify-center\">\n                     {lineVariant === \"center\" ? (\n                        <div className=\"border-grid-line h-full w-px border-r\" />\n                     ) : (\n                        <div\n                           className={cn(\n                              \"grid size-full\",\n                              columns === 16 && \"grid-cols-grid-16\",\n                              columns === 12 && \"grid-cols-grid-12\",\n                              columns === 8 && \"grid-cols-grid-8\",\n                           )}\n                        >\n                           {Array.from({ length: columns }).map((_, i) => (\n                              <div\n                                 key={i}\n                                 className={cn(\n                                    \"border-grid-line border-r\",\n                                    i === 0 && \"border-l\",\n                                 )}\n                              />\n                           ))}\n                        </div>\n                     )}\n                  </div>\n               )}\n\n               {/* Horizontale Linien */}\n               {(lineVariant === \"all\" || lineVariant === \"horizontal\") && (\n                  <div className=\"absolute inset-0 grid grid-rows-[repeat(16,1fr)]\">\n                     {Array.from({ length: 17 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className={cn(\n                              \"border-grid-line border-t\",\n                              i === 16 && \"border-b\",\n                           )}\n                        />\n                     ))}\n                  </div>\n               )}\n            </div>\n         )}\n\n         {/* Crosshairs */}\n         {crosshairs?.topLeft && (\n            <CrosshairIcon className=\"text-grid-line absolute -left-2 -top-2\" />\n         )}\n         {crosshairs?.topRight && (\n            <CrosshairIcon className=\"text-grid-line absolute -right-2 -top-2\" />\n         )}\n         {crosshairs?.bottomLeft && (\n            <CrosshairIcon className=\"text-grid-line absolute -bottom-2 -left-2\" />\n         )}\n         {crosshairs?.bottomRight && (\n            <CrosshairIcon className=\"text-grid-line absolute -bottom-2 -right-2\" />\n         )}\n\n         <div className=\"relative z-10 col-span-full\">{children}</div>\n      </div>\n   )\n}\n\nexport default GridLayout\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderColor": {
+            "grid-line": "hsl(var(--border) / var(--grid-line-opacity))"
+          },
+          "gridTemplateColumns": {
+            "grid-16": "repeat(16, minmax(0, 1fr))",
+            "grid-12": "repeat(12, minmax(0, 1fr))",
+            "grid-8": "repeat(8, minmax(0, 1fr))"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "--grid-line-opacity": "0.5"
+    },
+    "dark": {
+      "--grid-line-opacity": "0.5"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/grid-pattern-dashed.json b/apps/web/public/v0/styles/miami/grid-pattern-dashed.json
new file mode 100644
index 00000000..79692a49
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/grid-pattern-dashed.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-pattern-dashed",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/grid-pattern-dashed.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { GridPattern } from \"@/components/ui/grid-pattern\"\n\nexport default function GridPatternDashed() {\n   return (\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            width={30}\n            height={30}\n            x={-1}\n            y={-1}\n            strokeDasharray={\"4 2\"}\n            className={cn(\n               \"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/grid-pattern-demo.json b/apps/web/public/v0/styles/miami/grid-pattern-demo.json
new file mode 100644
index 00000000..3a9ba409
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/grid-pattern-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-pattern-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/grid-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { GridPattern } from \"@/components/ui/grid-pattern\"\n\nexport default function GridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            squares={[\n               [4, 4],\n               [5, 1],\n               [8, 2],\n               [5, 3],\n               [5, 5],\n               [10, 10],\n               [12, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n               [10, 15],\n               [15, 10],\n            ]}\n            className={cn(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n               \"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/grid-pattern-linear-gradient.json b/apps/web/public/v0/styles/miami/grid-pattern-linear-gradient.json
new file mode 100644
index 00000000..491d0b4b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/grid-pattern-linear-gradient.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-pattern-linear-gradient",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/grid-pattern-linear-gradient.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { GridPattern } from \"@/components/ui/grid-pattern\"\n\nexport default function GridPatternLinearGradient() {\n   return (\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Grid Pattern\n         </p>\n         <GridPattern\n            width={20}\n            height={20}\n            x={-1}\n            y={-1}\n            className={cn(\n               \"[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] \",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/grid-pattern.json b/apps/web/public/v0/styles/miami/grid-pattern.json
new file mode 100644
index 00000000..040afe04
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/grid-pattern.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "grid-pattern",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/grid-pattern.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface GridPatternProps extends React.SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   x?: number\n   y?: number\n   squares?: Array<[x: number, y: number]>\n   strokeDasharray?: string\n   className?: string\n   [key: string]: unknown\n}\n\nexport function GridPattern({\n   width = 40,\n   height = 40,\n   x = -1,\n   y = -1,\n   strokeDasharray = \"0\",\n   squares,\n   className,\n   ...props\n}: GridPatternProps) {\n   const id = useId()\n\n   return (\n      <svg\n         aria-hidden=\"true\"\n         className={cn(\n            \"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30\",\n            className,\n         )}\n         {...props}\n      >\n         <defs>\n            <pattern\n               id={id}\n               width={width}\n               height={height}\n               patternUnits=\"userSpaceOnUse\"\n               x={x}\n               y={y}\n            >\n               <path\n                  d={`M.5 ${height}V.5H${width}`}\n                  fill=\"none\"\n                  strokeDasharray={strokeDasharray}\n               />\n            </pattern>\n         </defs>\n         <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill={`url(#${id})`}\n         />\n         {squares && (\n            <svg x={x} y={y} className=\"overflow-visible\">\n               {squares.map(([x, y]) => (\n                  <rect\n                     strokeWidth=\"0\"\n                     key={`${x}-${y}`}\n                     width={width - 1}\n                     height={height - 1}\n                     x={x * width + 1}\n                     y={y * height + 1}\n                  />\n               ))}\n            </svg>\n         )}\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/hero-video-demo.json b/apps/web/public/v0/styles/miami/hero-video-demo.json
new file mode 100644
index 00000000..f80046f0
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/hero-video-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hero-video-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/hero-video-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport HeroVideo, { HeroVideoAction } from \"@/components/ui/hero-video\"\nimport { MagicCard, MagicContainer } from \"@/components/ui/magic-card\"\n\nfunction PlayButton() {\n   return (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 24 24\"\n         fill=\"currentColor\"\n         className=\"dark:text-white\"\n      >\n         <path\n            fillRule=\"evenodd\"\n            d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   )\n}\n\nexport default function HeroVideoDemo() {\n   return (\n      <div className=\"bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Hero Video\n         </span>\n\n         <MagicContainer>\n            <MagicCard className=\"min-h-[400px] [mask:linear-gradient(0deg,transparent_40%,#fff_100%)]\">\n               <HeroVideo\n                  title=\"Nyxb UI Demo\"\n                  image=\"https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200\"\n               >\n                  <HeroVideoAction>\n                     <Button className=\"size-20 rounded-full\" variant=\"outline\">\n                        <PlayButton />\n                     </Button>\n                  </HeroVideoAction>\n                  <video\n                     autoPlay\n                     className=\"rounded-xl dark:border\"\n                     playsInline\n                     src=\"https://cdn.nyxbui.design/globe.mp4\"\n                  />\n               </HeroVideo>\n            </MagicCard>\n         </MagicContainer>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/hero-video-dialog-demo-top-in-bottom-out.json b/apps/web/public/v0/styles/miami/hero-video-dialog-demo-top-in-bottom-out.json
new file mode 100644
index 00000000..6455df2d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/hero-video-dialog-demo-top-in-bottom-out.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hero-video-dialog-demo-top-in-bottom-out",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/hero-video-dialog-demo-top-in-bottom-out.tsx",
+      "content": "import HeroVideoDialog from \"@/components/ui/hero-video-dialog\"\n\nexport default function HeroVideoDialogDemoTopInBottomOut() {\n   return (\n      <div className=\"relative\">\n         <HeroVideoDialog\n            className=\"block dark:hidden\"\n            animationStyle=\"top-in-bottom-out\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-light.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n         <HeroVideoDialog\n            className=\"hidden dark:block\"\n            animationStyle=\"top-in-bottom-out\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-dark.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/hero-video-dialog-demo.json b/apps/web/public/v0/styles/miami/hero-video-dialog-demo.json
new file mode 100644
index 00000000..5d092b95
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/hero-video-dialog-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hero-video-dialog-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/hero-video-dialog-demo.tsx",
+      "content": "import HeroVideoDialog from \"@/components/ui/hero-video-dialog\"\n\nexport default function HeroVideoDialogDemo() {\n   return (\n      <div className=\"relative\">\n         <HeroVideoDialog\n            className=\"block dark:hidden\"\n            animationStyle=\"from-center\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-light.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n         <HeroVideoDialog\n            className=\"hidden dark:block\"\n            animationStyle=\"from-center\"\n            videoSrc=\"https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR\"\n            thumbnailSrc=\"https://startup-nyxbui.vercel.app/hero-dark.png\"\n            thumbnailAlt=\"Hero Video\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/hero-video-dialog.json b/apps/web/public/v0/styles/miami/hero-video-dialog.json
new file mode 100644
index 00000000..b1e1ed8d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/hero-video-dialog.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hero-video-dialog",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/hero-video-dialog.tsx",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { Play, XIcon } from \"lucide-react\"\nimport { useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype AnimationStyle =\n   | \"from-bottom\"\n   | \"from-center\"\n   | \"from-top\"\n   | \"from-left\"\n   | \"from-right\"\n   | \"fade\"\n   | \"top-in-bottom-out\"\n   | \"left-in-right-out\"\n\ninterface HeroVideoProps {\n   animationStyle?: AnimationStyle\n   videoSrc: string\n   thumbnailSrc: string\n   thumbnailAlt?: string\n   className?: string\n}\n\nconst animationVariants = {\n   \"from-bottom\": {\n      initial: { y: \"100%\", opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: \"100%\", opacity: 0 },\n   },\n   \"from-center\": {\n      initial: { scale: 0.5, opacity: 0 },\n      animate: { scale: 1, opacity: 1 },\n      exit: { scale: 0.5, opacity: 0 },\n   },\n   \"from-top\": {\n      initial: { y: \"-100%\", opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: \"-100%\", opacity: 0 },\n   },\n   \"from-left\": {\n      initial: { x: \"-100%\", opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: \"-100%\", opacity: 0 },\n   },\n   \"from-right\": {\n      initial: { x: \"100%\", opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: \"100%\", opacity: 0 },\n   },\n   fade: {\n      initial: { opacity: 0 },\n      animate: { opacity: 1 },\n      exit: { opacity: 0 },\n   },\n   \"top-in-bottom-out\": {\n      initial: { y: \"-100%\", opacity: 0 },\n      animate: { y: 0, opacity: 1 },\n      exit: { y: \"100%\", opacity: 0 },\n   },\n   \"left-in-right-out\": {\n      initial: { x: \"-100%\", opacity: 0 },\n      animate: { x: 0, opacity: 1 },\n      exit: { x: \"100%\", opacity: 0 },\n   },\n}\n\nexport default function HeroVideoDialog({\n   animationStyle = \"from-center\",\n   videoSrc,\n   thumbnailSrc,\n   thumbnailAlt = \"Video thumbnail\",\n   className,\n}: HeroVideoProps) {\n   const [isVideoOpen, setIsVideoOpen] = useState(false)\n   const selectedAnimation = animationVariants[animationStyle]\n\n   return (\n      <div className={cn(\"relative\", className)}>\n         <div\n            className=\"group relative cursor-pointer\"\n            onClick={() => setIsVideoOpen(true)}\n         >\n            <img\n               src={thumbnailSrc}\n               alt={thumbnailAlt}\n               width={1920}\n               height={1080}\n               className=\"w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]\"\n            />\n            <div className=\"absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100\">\n               <div className=\"bg-primary/10 flex size-28 items-center justify-center rounded-full backdrop-blur-md\">\n                  <div className=\"from-primary/30 to-primary relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]\">\n                     <Play\n                        className=\"size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105\"\n                        style={{\n                           filter:\n                              \"drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))\",\n                        }}\n                     />\n                  </div>\n               </div>\n            </div>\n         </div>\n         <AnimatePresence>\n            {isVideoOpen && (\n               <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  onClick={() => setIsVideoOpen(false)}\n                  exit={{ opacity: 0 }}\n                  className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md\"\n               >\n                  <motion.div\n                     {...selectedAnimation}\n                     transition={{\n                        type: \"spring\",\n                        damping: 30,\n                        stiffness: 300,\n                     }}\n                     className=\"relative mx-4 aspect-video w-full max-w-4xl md:mx-0\"\n                  >\n                     <motion.button className=\"absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black\">\n                        <XIcon className=\"size-5\" />\n                     </motion.button>\n                     <div className=\"relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white\">\n                        <iframe\n                           src={videoSrc}\n                           className=\"size-full rounded-2xl\"\n                           allowFullScreen\n                           allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                        ></iframe>\n                     </div>\n                  </motion.div>\n               </motion.div>\n            )}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/hero-video-youtube.json b/apps/web/public/v0/styles/miami/hero-video-youtube.json
new file mode 100644
index 00000000..967515df
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/hero-video-youtube.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hero-video-youtube",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/hero-video-youtube.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport HeroVideo, { HeroVideoAction } from \"@/components/ui/hero-video\"\nimport { MagicCard, MagicContainer } from \"@/components/ui/magic-card\"\n\nfunction PlayButton() {\n   return (\n      <svg\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 24 24\"\n         fill=\"currentColor\"\n         className=\"dark:text-white\"\n      >\n         <path\n            fillRule=\"evenodd\"\n            d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   )\n}\n\nexport default function HeroVideoDemo() {\n   return (\n      <div className=\"bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Never gonna give you up\n         </span>\n         {/* Magic Card  */}\n         <MagicContainer className=\"relative\">\n            <MagicCard className=\"min-h-[400px] [mask:linear-gradient(0deg,transparent_20%,#fff_100%)]\">\n               <HeroVideo\n                  title=\"Never gonna give you up\"\n                  image=\"https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024\"\n               >\n                  <HeroVideoAction>\n                     <Button className=\"size-20 rounded-full\" variant=\"outline\">\n                        <PlayButton />\n                     </Button>\n                  </HeroVideoAction>\n                  <iframe\n                     height=\"500\"\n                     className=\"h-[500px] rounded-xl border\"\n                     src=\"https://www.youtube.com/embed/dQw4w9WgXcQ?si=FmFbhzaToJQ9iXN4\"\n                     title=\"YouTube video player\"\n                     allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                  />\n               </HeroVideo>\n            </MagicCard>\n         </MagicContainer>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/hover-card-demo.json b/apps/web/public/v0/styles/miami/hover-card-demo.json
new file mode 100644
index 00000000..89ca2f2f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/hover-card-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hover-card-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "hover-card"
+  ],
+  "files": [
+    {
+      "path": "examples/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"@radix-ui/react-icons\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   HoverCard,\n   HoverCardContent,\n   HoverCardTrigger,\n} from \"@/components/ui/hover-card\"\n\nexport default function HoverCardDemo() {\n   return (\n      <HoverCard>\n         <HoverCardTrigger asChild>\n            <Button variant=\"link\">@nextjs</Button>\n         </HoverCardTrigger>\n         <HoverCardContent className=\"w-80\">\n            <div className=\"flex justify-between space-x-4\">\n               <Avatar>\n                  <AvatarImage src=\"https://github.com/vercel.png\" />\n                  <AvatarFallback>VC</AvatarFallback>\n               </Avatar>\n               <div className=\"space-y-1\">\n                  <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n                  <p className=\"text-sm\">\n                     The React Framework – created and maintained by @vercel.\n                  </p>\n                  <div className=\"flex items-center pt-2\">\n                     <CalendarIcon className=\"mr-2 size-4 opacity-70\" />{\" \"}\n                     <span className=\"text-muted-foreground text-xs\">\n                        Joined December 2021\n                     </span>\n                  </div>\n               </div>\n            </div>\n         </HoverCardContent>\n      </HoverCard>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/hover-card.json b/apps/web/public/v0/styles/miami/hover-card.json
new file mode 100644
index 00000000..e0783c09
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/hover-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hover-card",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-hover-card"
+  ],
+  "files": [
+    {
+      "path": "ui/hover-card.tsx",
+      "content": "\"use client\"\n\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n   React.ElementRef<typeof HoverCardPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n   <HoverCardPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none\",\n         className,\n      )}\n      {...props}\n   />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/hyper-text-demo.json b/apps/web/public/v0/styles/miami/hyper-text-demo.json
new file mode 100644
index 00000000..d9675697
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/hyper-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hyper-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/hyper-text-demo.tsx",
+      "content": "import HyperText from \"@/components/ui/hyper-text\"\n\nexport default function HyperTextDemo() {\n   return (\n      <HyperText\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         text=\"Hyper Text\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/hyper-text.json b/apps/web/public/v0/styles/miami/hyper-text.json
new file mode 100644
index 00000000..92903e97
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/hyper-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "hyper-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/hyper-text.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { useEffect, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface HyperTextProps {\n   text: string\n   duration?: number\n   framerProps?: Variants\n   className?: string\n   animateOnLoad?: boolean\n}\n\nconst alphabets = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\")\n\nconst getRandomInt = (max: number) => Math.floor(Math.random() * max)\n\nexport default function HyperText({\n   text,\n   duration = 800,\n   framerProps = {\n      initial: { opacity: 0, y: -10 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 3 },\n   },\n   className,\n   animateOnLoad = true,\n}: HyperTextProps) {\n   const [displayText, setDisplayText] = useState(text.split(\"\"))\n   const [trigger, setTrigger] = useState(false)\n   const interations = useRef(0)\n   const isFirstRender = useRef(true)\n\n   const triggerAnimation = () => {\n      interations.current = 0\n      setTrigger(true)\n   }\n\n   useEffect(() => {\n      const interval = setInterval(\n         () => {\n            if (!animateOnLoad && isFirstRender.current) {\n               clearInterval(interval)\n               isFirstRender.current = false\n               return\n            }\n            if (interations.current < text.length) {\n               setDisplayText((t) =>\n                  t.map((l, i) =>\n                     l === \" \"\n                        ? l\n                        : i <= interations.current\n                          ? text[i]\n                          : alphabets[getRandomInt(26)],\n                  ),\n               )\n               interations.current = interations.current + 0.1\n            } else {\n               setTrigger(false)\n               clearInterval(interval)\n            }\n         },\n         duration / (text.length * 10),\n      )\n      // Clean up interval on unmount\n      return () => clearInterval(interval)\n   }, [text, duration, trigger, animateOnLoad])\n\n   return (\n      <div\n         className=\"flex scale-100 cursor-default overflow-hidden py-2\"\n         onMouseEnter={triggerAnimation}\n      >\n         <AnimatePresence mode=\"wait\">\n            {displayText.map((letter, i) => (\n               <motion.h1\n                  key={i}\n                  className={cn(\n                     \"font-mono\",\n                     letter === \" \" ? \"w-3\" : \"\",\n                     className,\n                  )}\n                  {...framerProps}\n               >\n                  {letter.toUpperCase()}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/icon-cloud-demo.json b/apps/web/public/v0/styles/miami/icon-cloud-demo.json
new file mode 100644
index 00000000..45947477
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/icon-cloud-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "icon-cloud-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/icon-cloud-demo.tsx",
+      "content": "import IconCloud from \"@/components/ui/icon-cloud\"\n\nconst slugs = [\n   \"typescript\",\n   \"javascript\",\n   \"dart\",\n   \"java\",\n   \"react\",\n   \"flutter\",\n   \"android\",\n   \"html5\",\n   \"css3\",\n   \"nodedotjs\",\n   \"express\",\n   \"nextdotjs\",\n   \"prisma\",\n   \"amazonaws\",\n   \"postgresql\",\n   \"firebase\",\n   \"nginx\",\n   \"vercel\",\n   \"testinglibrary\",\n   \"jest\",\n   \"cypress\",\n   \"docker\",\n   \"git\",\n   \"jira\",\n   \"github\",\n   \"gitlab\",\n   \"visualstudiocode\",\n   \"androidstudio\",\n   \"sonarqube\",\n   \"figma\",\n]\n\nexport default function IconCloudDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-20 pb-20 pt-8 \">\n         <IconCloud iconSlugs={slugs} />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/icon-cloud.json b/apps/web/public/v0/styles/miami/icon-cloud.json
new file mode 100644
index 00000000..8e60a5d5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/icon-cloud.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "icon-cloud",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "next-themes",
+    "react-icon-cloud"
+  ],
+  "files": [
+    {
+      "path": "ui/icon-cloud.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport type { ICloud, SimpleIcon } from \"react-icon-cloud\"\nimport { Cloud, fetchSimpleIcons, renderSimpleIcon } from \"react-icon-cloud\"\n\nexport const cloudProps: Omit<ICloud, \"children\"> = {\n   containerProps: {\n      style: {\n         display: \"flex\",\n         justifyContent: \"center\",\n         alignItems: \"center\",\n         width: \"100%\",\n         paddingTop: 40,\n      },\n   },\n   options: {\n      reverse: true,\n      depth: 1,\n      wheelZoom: false,\n      imageScale: 2,\n      activeCursor: \"default\",\n      tooltip: \"native\",\n      initial: [0.1, -0.1],\n      clickToFront: 500,\n      tooltipDelay: 0,\n      outlineColour: \"#0000\",\n      maxSpeed: 0.04,\n      minSpeed: 0.02,\n      // dragControl: false,\n   },\n}\n\nexport function renderCustomIcon(icon: SimpleIcon, theme: string) {\n   const bgHex = theme === \"light\" ? \"#f3f2ef\" : \"#080510\"\n   const fallbackHex = theme === \"light\" ? \"#6e6e73\" : \"#ffffff\"\n   const minContrastRatio = theme === \"dark\" ? 2 : 1.2\n\n   return renderSimpleIcon({\n      icon,\n      bgHex,\n      fallbackHex,\n      minContrastRatio,\n      size: 42,\n      aProps: {\n         href: undefined,\n         target: undefined,\n         rel: undefined,\n         onClick: (e: any) => e.preventDefault(),\n      },\n   })\n}\n\nexport interface DynamicCloudProps {\n   iconSlugs: string[]\n}\n\ntype IconData = Awaited<ReturnType<typeof fetchSimpleIcons>>\n\nexport default function IconCloud({ iconSlugs }: DynamicCloudProps) {\n   const [data, setData] = useState<IconData | null>(null)\n   const { theme } = useTheme()\n\n   useEffect(() => {\n      fetchSimpleIcons({ slugs: iconSlugs }).then(setData)\n   }, [iconSlugs])\n\n   const renderedIcons = useMemo(() => {\n      if (!data) return null\n\n      return Object.values(data.simpleIcons).map((icon) =>\n         renderCustomIcon(icon, theme || \"light\"),\n      )\n   }, [data, theme])\n\n   return (\n      // @ts-expect-error is fine\n      <Cloud {...cloudProps}>\n         <>{renderedIcons}</>\n      </Cloud>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/index.json b/apps/web/public/v0/styles/miami/index.json
new file mode 100644
index 00000000..7cc17216
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/index.json
@@ -0,0 +1,21 @@
+{
+  "name": "miami",
+  "type": "registry:style",
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require(\"tailwindcss-animate\")"
+      ]
+    }
+  },
+  "cssVars": {},
+  "files": []
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-demo.json b/apps/web/public/v0/styles/miami/input-demo.json
new file mode 100644
index 00000000..d34d7c53
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-demo.tsx",
+      "content": "import { Input } from \"@/components/ui/input\"\n\nexport default function InputDemo() {\n   return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-disabled.json b/apps/web/public/v0/styles/miami/input-disabled.json
new file mode 100644
index 00000000..4577925f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-disabled.tsx",
+      "content": "import { Input } from \"@/components/ui/input\"\n\nexport default function InputDisabled() {\n   return <Input disabled type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-file.json b/apps/web/public/v0/styles/miami/input-file.json
new file mode 100644
index 00000000..00604ef4
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-file.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-file",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-file.tsx",
+      "content": "import { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function InputFile() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"picture\">Picture</Label>\n         <Input id=\"picture\" type=\"file\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-form.json b/apps/web/public/v0/styles/miami/input-form.json
new file mode 100644
index 00000000..2002a100
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport { Input } from \"@/components/ui/input\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   username: z.string().min(2, {\n      message: \"Username must be at least 2 characters.\",\n   }),\n})\n\nexport default function InputForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         username: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"username\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Username</FormLabel>\n                     <FormControl>\n                        <Input placeholder=\"nyxb\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your public display name.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-otp-controlled.json b/apps/web/public/v0/styles/miami/input-otp-controlled.json
new file mode 100644
index 00000000..de0f75c6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-otp-controlled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp-controlled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport default function InputOTPControlled() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <div className=\"space-y-2\">\n         <InputOTP\n            maxLength={6}\n            value={value}\n            onChange={(value) => setValue(value)}\n         >\n            <InputOTPGroup>\n               <InputOTPSlot index={0} />\n               <InputOTPSlot index={1} />\n               <InputOTPSlot index={2} />\n               <InputOTPSlot index={3} />\n               <InputOTPSlot index={4} />\n               <InputOTPSlot index={5} />\n            </InputOTPGroup>\n         </InputOTP>\n         <div className=\"text-center text-sm\">\n            {value === \"\" ? (\n               <>Enter your one-time password.</>\n            ) : (\n               <>\n                  You entered:\n                  {value}\n               </>\n            )}\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-otp-demo.json b/apps/web/public/v0/styles/miami/input-otp-demo.json
new file mode 100644
index 00000000..ce90635f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-otp-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-demo.tsx",
+      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-otp-disabled.json b/apps/web/public/v0/styles/miami/input-otp-disabled.json
new file mode 100644
index 00000000..f4857929
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-otp-disabled.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input-otp",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-disabled.tsx",
+      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6} disabled>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-otp-form.json b/apps/web/public/v0/styles/miami/input-otp-form.json
new file mode 100644
index 00000000..ef6a4bf4
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-otp-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input-otp",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   pin: z.string().min(6, {\n      message: \"Your one-time password must be 6 characters.\",\n   }),\n})\n\nexport default function InputOTPForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         pin: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"pin\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>One-Time Password</FormLabel>\n                     <FormControl>\n                        <InputOTP maxLength={6} {...field}>\n                           <InputOTPGroup>\n                              <InputOTPSlot index={0} />\n                              <InputOTPSlot index={1} />\n                              <InputOTPSlot index={2} />\n                              <InputOTPSlot index={3} />\n                              <InputOTPSlot index={4} />\n                              <InputOTPSlot index={5} />\n                           </InputOTPGroup>\n                        </InputOTP>\n                     </FormControl>\n                     <FormDescription>\n                        Please enter the one-time password sent to your phone.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-otp-pattern.json b/apps/web/public/v0/styles/miami/input-otp-pattern.json
new file mode 100644
index 00000000..d50c37e3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-otp-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp-pattern",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-pattern.tsx",
+      "content": "import { REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport default function InputOTPPattern() {\n   return (\n      <InputOTP\n         maxLength={6}\n         pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n         inputMode=\"text\"\n         spellCheck=\"false\"\n      >\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-otp-separator.json b/apps/web/public/v0/styles/miami/input-otp-separator.json
new file mode 100644
index 00000000..e5329152
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-otp-separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp-separator",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-separator.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport default function InputOTPWithSeparator() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-otp.json b/apps/web/public/v0/styles/miami/input-otp.json
new file mode 100644
index 00000000..dfb81488
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-otp.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-otp",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "ui/input-otp.tsx",
+      "content": "\"use client\"\n\nimport { DashIcon } from \"@radix-ui/react-icons\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n   React.ElementRef<typeof OTPInput>,\n   React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n   <OTPInput\n      ref={ref}\n      containerClassName={cn(\n         \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n         containerClassName,\n      )}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n   />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n   React.ElementRef<\"div\">,\n   React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n   <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n   React.ElementRef<\"div\">,\n   React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n   const inputOTPContext = React.useContext(OTPInputContext)\n   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"border-input relative flex size-9 items-center justify-center border-y border-r text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n            isActive && \"ring-ring z-10 ring-1\",\n            className,\n         )}\n         {...props}\n      >\n         {char}\n         {hasFakeCaret && (\n            <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n               <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n            </div>\n         )}\n      </div>\n   )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n   React.ElementRef<\"div\">,\n   React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n   <div ref={ref} role=\"separator\" {...props}>\n      <DashIcon />\n   </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-phone-default.json b/apps/web/public/v0/styles/miami/input-phone-default.json
new file mode 100644
index 00000000..3c6e5923
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-phone-default.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone-default",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/input-phone-default.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"@/components/ui/input-phone\"\n\nexport default function InputPhoneDefault() {\n   const [value, setValue] = React.useState(\"\")\n\n   return <InputPhone value={value} onChange={setValue} defaultCountry=\"US\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-phone-demo.json b/apps/web/public/v0/styles/miami/input-phone-demo.json
new file mode 100644
index 00000000..44025f4a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-phone-demo.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/input-phone-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"@/components/ui/input-phone\"\n\nexport default function InputPhoneDemo() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         placeholder=\"Enter a phone number\"\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-phone-form.json b/apps/web/public/v0/styles/miami/input-phone-form.json
new file mode 100644
index 00000000..2ce57d10
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-phone-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/input-phone-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { isValidPhoneNumber } from \"react-phone-number-input\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport { InputPhone } from \"@/components/ui/input-phone\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   phone: z\n      .string()\n      .refine(isValidPhoneNumber, { message: \"Invalid phone number\" }),\n})\n\nexport default function InputPhoneForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         phone: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"phone\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Phone Number</FormLabel>\n                     <FormControl>\n                        <InputPhone\n                           placeholder=\"Enter a phone number\"\n                           {...field}\n                        />\n                     </FormControl>\n                     <FormDescription>\n                        Please enter a valid phone number.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-phone-initial.json b/apps/web/public/v0/styles/miami/input-phone-initial.json
new file mode 100644
index 00000000..f2ef1193
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-phone-initial.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone-initial",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/input-phone-initial.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"@/components/ui/input-phone\"\n\nexport default function InputPhoneInitial() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         initialValueFormat=\"national\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-phone-international.json b/apps/web/public/v0/styles/miami/input-phone-international.json
new file mode 100644
index 00000000..3d00e5dd
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-phone-international.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone-international",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/input-phone-international.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"@/components/ui/input-phone\"\n\nexport default function InputPhoneInternational() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         international\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-phone-national.json b/apps/web/public/v0/styles/miami/input-phone-national.json
new file mode 100644
index 00000000..c69cf91e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-phone-national.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone-national",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/input-phone-national.tsx",
+      "content": "import * as React from \"react\"\n\nimport { InputPhone } from \"@/components/ui/input-phone\"\n\nexport default function InputPhoneNational() {\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <InputPhone\n         value={value}\n         onChange={setValue}\n         international={false}\n         defaultCountry=\"US\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-phone.json b/apps/web/public/v0/styles/miami/input-phone.json
new file mode 100644
index 00000000..5569930d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-phone.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-phone",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "react-phone-number-input",
+    "@radix-ui/react-icons"
+  ],
+  "registryDependencies": [
+    "button",
+    "input",
+    "popover",
+    "command"
+  ],
+  "files": [
+    {
+      "path": "ui/input-phone.tsx",
+      "content": "import { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport type { InputProps } from \"@/components/ui/input\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\ntype InputPhoneProps = Omit<\n   React.InputHTMLAttributes<HTMLInputElement>,\n   \"onChange\" | \"value\"\n> &\n   Omit<RPNInput.Props<typeof RPNInput.default>, \"onChange\"> & {\n      onChange?: (value: RPNInput.Value) => void\n   }\n\nconst InputPhone: React.ForwardRefExoticComponent<InputPhoneProps> =\n   React.forwardRef<React.ElementRef<typeof RPNInput.default>, InputPhoneProps>(\n      ({ className, onChange, ...props }, ref) => (\n         <RPNInput.default\n            ref={ref}\n            className={cn(\"flex\", className)}\n            flagComponent={FlagComponent}\n            countrySelectComponent={CountrySelect}\n            inputComponent={InputComponent}\n            /**\n             * Handles the onChange event.\n             *\n             * react-phone-number-input might trigger the onChange event as undefined\n             * when a valid phone number is not entered. To prevent this,\n             * the value is coerced to an empty string.\n             *\n             * @param {E164Number | undefined} value - The entered value\n             */\n            onChange={(value) => onChange?.(value as RPNInput.Value)}\n            {...props}\n         />\n      ),\n   )\nInputPhone.displayName = \"InputPhone\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n   ({ className, ...props }, ref) => (\n      <Input\n         className={cn(\"rounded-e-lg rounded-s-none\", className)}\n         {...props}\n         ref={ref}\n      />\n   ),\n)\nInputComponent.displayName = \"InputComponent\"\n\ninterface CountrySelectOption {\n   label: string\n   value: RPNInput.Country\n}\n\ninterface CountrySelectProps {\n   disabled?: boolean\n   value: RPNInput.Country\n   onChange: (value: RPNInput.Country) => void\n   options: CountrySelectOption[]\n}\n\nfunction CountrySelect({\n   disabled,\n   value,\n   onChange,\n   options,\n}: CountrySelectProps) {\n   const handleSelect = React.useCallback(\n      (country: RPNInput.Country) => onChange(country),\n      [onChange],\n   )\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               type=\"button\"\n               variant=\"outline\"\n               className={cn(\"flex gap-1 rounded-e-none rounded-s-lg px-3\")}\n               disabled={disabled}\n            >\n               <FlagComponent country={value} countryName={value} />\n               <CaretSortIcon\n                  className={cn(\n                     \"-mr-2 size-4 opacity-50\",\n                     disabled ? \"hidden\" : \"opacity-100\",\n                  )}\n               />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[300px] p-0\">\n            <Command>\n               <CommandList>\n                  <CommandInput placeholder=\"Search country...\" />\n                  <CommandEmpty>No country found.</CommandEmpty>\n                  <CommandGroup>\n                     {options.map((option) => (\n                        <CommandItem\n                           className=\"gap-2\"\n                           key={option.value || \"ZZ\"}\n                           onSelect={() => handleSelect(option.value)}\n                        >\n                           <FlagComponent\n                              country={option.value}\n                              countryName={option.label}\n                           />\n                           <span className=\"flex-1 text-sm\">\n                              {option.label}\n                           </span>\n                           {option.value && (\n                              <span className=\"text-foreground/50 text-sm\">\n                                 {`+${RPNInput.getCountryCallingCode(option.value)}`}\n                              </span>\n                           )}\n                           <CheckIcon\n                              className={cn(\n                                 \"ml-auto size-4\",\n                                 option.value === value\n                                    ? \"opacity-100\"\n                                    : \"opacity-0\",\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n\nfunction FlagComponent({ country, countryName }: RPNInput.FlagProps) {\n   const Flag = flags[country]\n\n   return (\n      <span className=\"bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm\">\n         {Flag && <Flag title={countryName} />}\n      </span>\n   )\n}\nFlagComponent.displayName = \"FlagComponent\"\n\nexport { InputPhone }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-with-button.json b/apps/web/public/v0/styles/miami/input-with-button.json
new file mode 100644
index 00000000..2ce81465
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-with-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-with-button",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-button.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\n\nexport default function InputWithButton() {\n   return (\n      <div className=\"flex w-full max-w-sm items-center space-x-2\">\n         <Input type=\"email\" placeholder=\"Email\" />\n         <Button type=\"submit\">Subscribe</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-with-label.json b/apps/web/public/v0/styles/miami/input-with-label.json
new file mode 100644
index 00000000..d34d2be3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-with-label.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-with-label",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-label.tsx",
+      "content": "import { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function InputWithLabel() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"email\">Email</Label>\n         <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input-with-text.json b/apps/web/public/v0/styles/miami/input-with-text.json
new file mode 100644
index 00000000..0bebbecf
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input-with-text.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input-with-text",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-text.tsx",
+      "content": "import { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function InputWithText() {\n   return (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n         <Label htmlFor=\"email-2\">Email</Label>\n         <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n         <p className=\"text-muted-foreground text-sm\">\n            Enter your email address.\n         </p>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/input.json b/apps/web/public/v0/styles/miami/input.json
new file mode 100644
index 00000000..c915793e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/input.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "input",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/input.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n   extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n   ({ className, type, ...props }, ref) => {\n      return (\n         <input\n            type={type}\n            className={cn(\n               \"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/interactive-grid-pattern-demo-2.json b/apps/web/public/v0/styles/miami/interactive-grid-pattern-demo-2.json
new file mode 100644
index 00000000..34aaaf39
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/interactive-grid-pattern-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "interactive-grid-pattern-demo-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/interactive-grid-pattern-demo-2.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { InteractiveGridPattern } from \"@/components/ui/interactive-grid-pattern\"\n\nexport default function InteractiveGridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Interactive Grid Pattern\n         </p>\n         <InteractiveGridPattern\n            className={cn(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n            )}\n            width={20}\n            height={20}\n            squares={[80, 80]}\n            squaresClassName=\"hover:fill-blue-500\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/interactive-grid-pattern-demo.json b/apps/web/public/v0/styles/miami/interactive-grid-pattern-demo.json
new file mode 100644
index 00000000..6e7cc782
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/interactive-grid-pattern-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "interactive-grid-pattern-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/interactive-grid-pattern-demo.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { InteractiveGridPattern } from \"@/components/ui/interactive-grid-pattern\"\n\nexport default function InteractiveGridPatternDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Interactive Grid Pattern\n         </p>\n         <InteractiveGridPattern\n            className={cn(\n               \"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]\",\n               \"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12\",\n            )}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/interactive-grid-pattern.json b/apps/web/public/v0/styles/miami/interactive-grid-pattern.json
new file mode 100644
index 00000000..1b1c1fa9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/interactive-grid-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "interactive-grid-pattern",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/interactive-grid-pattern.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * InteractiveGridPattern is a component that renders a grid pattern with interactive squares.\n *\n * @param width - The width of each square.\n * @param height - The height of each square.\n * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares.\n * @param className - The class name of the grid.\n * @param squaresClassName - The class name of the squares.\n */\ninterface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   squares?: [number, number] // [horizontal, vertical]\n   className?: string\n   squaresClassName?: string\n}\n\n/**\n * The InteractiveGridPattern component.\n *\n * @see InteractiveGridPatternProps for the props interface.\n * @returns A React component.\n */\nexport function InteractiveGridPattern({\n   width = 40,\n   height = 40,\n   squares = [24, 24],\n   className,\n   squaresClassName,\n   ...props\n}: InteractiveGridPatternProps) {\n   const [horizontal, vertical] = squares\n   const [hoveredSquare, setHoveredSquare] = useState<number | null>(null)\n\n   return (\n      <svg\n         width={width * horizontal}\n         height={height * vertical}\n         className={cn(\n            \"absolute inset-0 h-full w-full border border-gray-400/30\",\n            className,\n         )}\n         {...props}\n      >\n         {Array.from({ length: horizontal * vertical }).map((_, index) => {\n            const x = (index % horizontal) * width\n            const y = Math.floor(index / horizontal) * height\n            return (\n               <rect\n                  key={index}\n                  x={x}\n                  y={y}\n                  width={width}\n                  height={height}\n                  className={cn(\n                     \"stroke-gray-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000\",\n                     hoveredSquare === index\n                        ? \"fill-gray-300/30\"\n                        : \"fill-transparent\",\n                     squaresClassName,\n                  )}\n                  onMouseEnter={() => setHoveredSquare(index)}\n                  onMouseLeave={() => setHoveredSquare(null)}\n               />\n            )\n         })}\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/iphone-15-pro-demo-2.json b/apps/web/public/v0/styles/miami/iphone-15-pro-demo-2.json
new file mode 100644
index 00000000..995bf87c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/iphone-15-pro-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "iphone-15-pro-demo-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/iphone-15-pro-demo-2.tsx",
+      "content": "import Iphone15Pro from \"@/components/ui/iphone-15-pro\"\n\nexport default function Iphone15ProDemo() {\n   return (\n      <div className=\"relative\">\n         <Iphone15Pro\n            className=\"size-full\"\n            src=\"https://via.placeholder.com/430x880\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/iphone-15-pro-demo.json b/apps/web/public/v0/styles/miami/iphone-15-pro-demo.json
new file mode 100644
index 00000000..226a9902
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/iphone-15-pro-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "iphone-15-pro-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/iphone-15-pro-demo.tsx",
+      "content": "import Iphone15Pro from \"@/components/ui/iphone-15-pro\"\n\nexport default function Iphone15ProDemo() {\n   return (\n      <div className=\"relative\">\n         <Iphone15Pro className=\"size-full\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/iphone-15-pro.json b/apps/web/public/v0/styles/miami/iphone-15-pro.json
new file mode 100644
index 00000000..8361eba6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/iphone-15-pro.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "iphone-15-pro",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/iphone-15-pro.tsx",
+      "content": "import type { SVGProps } from \"react\"\n\nexport interface Iphone15ProProps extends SVGProps<SVGSVGElement> {\n   width?: number\n   height?: number\n   src?: string\n}\n\nexport default function Iphone15Pro({\n   width = 433,\n   height = 882,\n   src,\n   ...props\n}: Iphone15ProProps) {\n   return (\n      <svg\n         width={width}\n         height={height}\n         viewBox={`0 0 ${width} ${height}`}\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <path\n            d=\"M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z\"\n            className=\"fill-white dark:fill-[#262626]\"\n         />\n         <path\n            opacity=\"0.5\"\n            d=\"M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <path\n            d=\"M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z\"\n            className=\"fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]\"\n         />\n\n         {src && (\n            <image\n               href={src}\n               x=\"21.25\"\n               y=\"19.25\"\n               width=\"389.5\"\n               height=\"843.5\"\n               preserveAspectRatio=\"xMidYMid slice\"\n               clipPath=\"url(#roundedCorners)\"\n            />\n         )}\n         <path\n            d=\"M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z\"\n            className=\"fill-[#F5F5F5] dark:fill-[#262626]\"\n         />\n         <path\n            d=\"M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z\"\n            className=\"fill-[#F5F5F5] dark:fill-[#262626]\"\n         />\n         <path\n            d=\"M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z\"\n            className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n         />\n         <defs>\n            <clipPath id=\"roundedCorners\">\n               <rect\n                  x=\"21.25\"\n                  y=\"19.25\"\n                  width=\"389.5\"\n                  height=\"843.5\"\n                  rx=\"55.75\"\n                  ry=\"55.75\"\n               />\n            </clipPath>\n         </defs>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/label-demo.json b/apps/web/public/v0/styles/miami/label-demo.json
new file mode 100644
index 00000000..e5b9979d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/label-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "label-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/components/ui/checkbox\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function LabelDemo() {\n   return (\n      <div>\n         <div className=\"flex items-center space-x-2\">\n            <Checkbox id=\"terms\" />\n            <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/label.json b/apps/web/public/v0/styles/miami/label.json
new file mode 100644
index 00000000..f2f3186e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/label.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "label",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-label"
+  ],
+  "files": [
+    {
+      "path": "ui/label.tsx",
+      "content": "\"use client\"\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst labelVariants = cva(\n   \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n)\n\nconst Label = React.forwardRef<\n   React.ElementRef<typeof LabelPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n      VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n   <LabelPrimitive.Root\n      ref={ref}\n      className={cn(labelVariants(), className)}\n      {...props}\n   />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/letter-pullup-demo.json b/apps/web/public/v0/styles/miami/letter-pullup-demo.json
new file mode 100644
index 00000000..2be7c78c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/letter-pullup-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "letter-pullup-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/letter-pullup-demo.tsx",
+      "content": "import LetterPullup from \"@/components/ui/letter-pullup\"\n\nexport default async function LetterPullupDemo() {\n   return <LetterPullup words=\"Staggered Letter Pull Up\" delay={0.05} />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/letter-pullup.json b/apps/web/public/v0/styles/miami/letter-pullup.json
new file mode 100644
index 00000000..16dedc7f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/letter-pullup.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "letter-pullup",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/letter-pullup.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface LetterPullupProps {\n   className?: string\n   words: string\n   delay?: number\n}\n\nexport default function LetterPullup({\n   className,\n   words,\n   delay,\n}: LetterPullupProps) {\n   const letters = words.split(\"\")\n\n   const pullupVariant = {\n      initial: { y: 100, opacity: 0 },\n      animate: (i: any) => ({\n         y: 0,\n         opacity: 1,\n         transition: {\n            delay: i * (delay || 0.05), // By default, delay each letter's animation by 0.05 seconds\n         },\n      }),\n   }\n\n   return (\n      <div className=\"flex justify-center\">\n         {letters.map((letter, i) => (\n            <motion.h1\n               key={i}\n               variants={pullupVariant}\n               initial=\"initial\"\n               animate=\"animate\"\n               custom={i}\n               className={cn(\n                  \"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-4xl md:leading-[5rem] dark:text-white\",\n                  className,\n               )}\n            >\n               {letter === \" \" ? <span>&nbsp;</span> : letter}\n            </motion.h1>\n         ))}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/line-shadow-text-demo.json b/apps/web/public/v0/styles/miami/line-shadow-text-demo.json
new file mode 100644
index 00000000..bf91ed54
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/line-shadow-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "line-shadow-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/line-shadow-text-demo.tsx",
+      "content": "import { useTheme } from \"next-themes\"\nimport { LineShadowText } from \"@/components/ui/line-shadow-text\"\n\nexport default function LineShadowTextDemo() {\n   const theme = useTheme()\n   const shadowColor = theme.resolvedTheme === \"dark\" ? \"white\" : \"black\"\n   return (\n      <h1 className=\"text-balance text-5xl font-semibold leading-none tracking-tighter sm:text-6xl md:text-7xl lg:text-8xl\">\n         Ship\n         <LineShadowText className=\"italic\" shadowColor={shadowColor}>\n            Fast\n         </LineShadowText>\n      </h1>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/line-shadow-text.json b/apps/web/public/v0/styles/miami/line-shadow-text.json
new file mode 100644
index 00000000..a017b17d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/line-shadow-text.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "line-shadow-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/line-shadow-text.tsx",
+      "content": "import { type MotionProps, motion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface LineShadowTextProps\n   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,\n      MotionProps {\n   shadowColor?: string\n   as?: React.ElementType\n}\n\nexport function LineShadowText({\n   children,\n   shadowColor = \"black\",\n   className,\n   as: Component = \"span\",\n   ...props\n}: LineShadowTextProps) {\n   const MotionComponent = motion.create(Component)\n   const content = typeof children === \"string\" ? children : null\n\n   if (!content) {\n      throw new Error(\"LineShadowText only accepts string content\")\n   }\n\n   return (\n      <MotionComponent\n         style={{ \"--shadow-color\": shadowColor } as React.CSSProperties}\n         className={cn(\n            \"relative z-0 inline-flex\",\n            \"after:absolute after:left-[0.04em] after:top-[0.04em] after:content-[attr(data-text)]\",\n            \"after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]\",\n            \"after:-z-10 after:bg-[length:0.06em_0.06em] after:bg-clip-text after:text-transparent\",\n            \"after:animate-line-shadow\",\n            className,\n         )}\n         data-text={content}\n         {...props}\n      >\n         {content}\n      </MotionComponent>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "line-shadow": "line-shadow 15s linear infinite"
+          },
+          "keyframes": {
+            "line-shadow": {
+              "0%": {
+                "background-position": "0 0"
+              },
+              "100%": {
+                "background-position": "100% -100%"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/login-01.json b/apps/web/public/v0/styles/miami/login-01.json
new file mode 100644
index 00000000..0d274b5b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/login-01.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-01",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A simple login form.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-01/page.tsx",
+      "content": "import { LoginForm } from \"@/components/login-form\"\n\nexport default function Page() {\n   return (\n      <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n         <div className=\"w-full max-w-sm\">\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-01/components/login-form.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n   return (\n      <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n         <Card>\n            <CardHeader>\n               <CardTitle className=\"text-2xl\">Login</CardTitle>\n               <CardDescription>\n                  Enter your email below to login to your account\n               </CardDescription>\n            </CardHeader>\n            <CardContent>\n               <form>\n                  <div className=\"flex flex-col gap-6\">\n                     <div className=\"grid gap-2\">\n                        <Label htmlFor=\"email\">Email</Label>\n                        <Input\n                           id=\"email\"\n                           type=\"email\"\n                           placeholder=\"m@example.com\"\n                           required\n                        />\n                     </div>\n                     <div className=\"grid gap-2\">\n                        <div className=\"flex items-center\">\n                           <Label htmlFor=\"password\">Password</Label>\n                           <a\n                              href=\"#\"\n                              className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                           >\n                              Forgot your password?\n                           </a>\n                        </div>\n                        <Input id=\"password\" type=\"password\" required />\n                     </div>\n                     <Button type=\"submit\" className=\"w-full\">\n                        Login\n                     </Button>\n                     <Button variant=\"outline\" className=\"w-full\">\n                        Login with Google\n                     </Button>\n                  </div>\n                  <div className=\"mt-4 text-center text-sm\">\n                     Don&apos;t have an account?{\" \"}\n                     <a href=\"#\" className=\"underline underline-offset-4\">\n                        Sign up\n                     </a>\n                  </div>\n               </form>\n            </CardContent>\n         </Card>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/login-02.json b/apps/web/public/v0/styles/miami/login-02.json
new file mode 100644
index 00000000..e47e716e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/login-02.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-02",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-02/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"grid min-h-svh lg:grid-cols-2\">\n         <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n            <div className=\"flex justify-center gap-2 md:justify-start\">\n               <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n                  <div className=\"flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n                     <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  Acme Inc.\n               </a>\n            </div>\n            <div className=\"flex flex-1 items-center justify-center\">\n               <div className=\"w-full max-w-xs\">\n                  <LoginForm />\n               </div>\n            </div>\n         </div>\n         <div className=\"relative hidden bg-muted lg:block\">\n            <img\n               src=\"/placeholder.svg\"\n               alt=\"Image\"\n               className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-02/components/login-form.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"form\">) {\n   return (\n      <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n         <div className=\"flex flex-col items-center gap-2 text-center\">\n            <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n            <p className=\"text-balance text-sm text-muted-foreground\">\n               Enter your email below to login to your account\n            </p>\n         </div>\n         <div className=\"grid gap-6\">\n            <div className=\"grid gap-2\">\n               <Label htmlFor=\"email\">Email</Label>\n               <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n               />\n            </div>\n            <div className=\"grid gap-2\">\n               <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                     href=\"#\"\n                     className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n                  >\n                     Forgot your password?\n                  </a>\n               </div>\n               <Input id=\"password\" type=\"password\" required />\n            </div>\n            <Button type=\"submit\" className=\"w-full\">\n               Login\n            </Button>\n            <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n               <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                  Or continue with\n               </span>\n            </div>\n            <Button\n               variant=\"outline\"\n               className=\"w-full h-10 flex items-center justify-center gap-2\"\n            >\n               <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  className=\"h-5 w-5\"\n               >\n                  <path\n                     d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                     fill=\"currentColor\"\n                  />\n               </svg>\n               Login with GitHub\n            </Button>\n         </div>\n         <div className=\"text-center text-sm\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n               Sign up\n            </a>\n         </div>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/login-03.json b/apps/web/public/v0/styles/miami/login-03.json
new file mode 100644
index 00000000..34454eaa
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/login-03.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-03",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-03/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n         <div className=\"flex w-full max-w-sm flex-col gap-6\">\n            <a\n               href=\"#\"\n               className=\"flex items-center gap-2 self-center font-medium\"\n            >\n               <div className=\"flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n               </div>\n               Acme Inc.\n            </a>\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-03/components/login-form.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n   return (\n      <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n         <Card>\n            <CardHeader className=\"text-center\">\n               <CardTitle className=\"text-xl\">Welcome back</CardTitle>\n               <CardDescription>\n                  Login with your Apple or Google account\n               </CardDescription>\n            </CardHeader>\n            <CardContent>\n               <form>\n                  <div className=\"grid gap-6\">\n                     <div className=\"flex flex-col gap-4\">\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center gap-2\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           Login with Apple\n                        </Button>\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center gap-2\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           Login with Google\n                        </Button>\n                     </div>\n                     <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                        <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                           Or continue with\n                        </span>\n                     </div>\n                     <div className=\"grid gap-6\">\n                        <div className=\"grid gap-2\">\n                           <Label htmlFor=\"email\">Email</Label>\n                           <Input\n                              id=\"email\"\n                              type=\"email\"\n                              placeholder=\"m@example.com\"\n                              required\n                           />\n                        </div>\n                        <div className=\"grid gap-2\">\n                           <div className=\"flex items-center\">\n                              <Label htmlFor=\"password\">Password</Label>\n                              <a\n                                 href=\"#\"\n                                 className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n                              >\n                                 Forgot your password?\n                              </a>\n                           </div>\n                           <Input id=\"password\" type=\"password\" required />\n                        </div>\n                        <Button type=\"submit\" className=\"w-full\">\n                           Login\n                        </Button>\n                     </div>\n                     <div className=\"text-center text-sm\">\n                        Don&apos;t have an account?{\" \"}\n                        <a href=\"#\" className=\"underline underline-offset-4\">\n                           Sign up\n                        </a>\n                     </div>\n                  </div>\n               </form>\n            </CardContent>\n         </Card>\n         <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  \">\n            By clicking continue, you agree to our{\" \"}\n            <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/login-04.json b/apps/web/public/v0/styles/miami/login-04.json
new file mode 100644
index 00000000..7705a000
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/login-04.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-04",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A login page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-04/page.tsx",
+      "content": "import { LoginForm } from \"@/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n         <div className=\"w-full max-w-sm md:max-w-3xl\">\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-04/components/login-form.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentProps<\"div\">) {\n   return (\n      <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n         <Card className=\"overflow-hidden\">\n            <CardContent className=\"grid p-0 md:grid-cols-2\">\n               <form className=\"p-6 md:p-8\">\n                  <div className=\"flex flex-col gap-6\">\n                     <div className=\"flex flex-col items-center text-center\">\n                        <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                        <p className=\"text-balance text-muted-foreground\">\n                           Login to your Acme Inc account\n                        </p>\n                     </div>\n                     <div className=\"grid gap-2\">\n                        <Label htmlFor=\"email\">Email</Label>\n                        <Input\n                           id=\"email\"\n                           type=\"email\"\n                           placeholder=\"m@example.com\"\n                           required\n                        />\n                     </div>\n                     <div className=\"grid gap-2\">\n                        <div className=\"flex items-center\">\n                           <Label htmlFor=\"password\">Password</Label>\n                           <a\n                              href=\"#\"\n                              className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                           >\n                              Forgot your password?\n                           </a>\n                        </div>\n                        <Input id=\"password\" type=\"password\" required />\n                     </div>\n                     <Button type=\"submit\" className=\"w-full\">\n                        Login\n                     </Button>\n                     <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                        <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                           Or continue with\n                        </span>\n                     </div>\n                     <div className=\"grid grid-cols-3 gap-4\">\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           <span className=\"sr-only\">Login with Apple</span>\n                        </Button>\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           <span className=\"sr-only\">Login with Google</span>\n                        </Button>\n                        <Button\n                           variant=\"outline\"\n                           className=\"w-full h-10 flex items-center justify-center\"\n                        >\n                           <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              className=\"h-5 w-5\"\n                           >\n                              <path\n                                 d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                                 fill=\"currentColor\"\n                              />\n                           </svg>\n                           <span className=\"sr-only\">Login with Meta</span>\n                        </Button>\n                     </div>\n                     <div className=\"text-center text-sm\">\n                        Don&apos;t have an account?{\" \"}\n                        <a href=\"#\" className=\"underline underline-offset-4\">\n                           Sign up\n                        </a>\n                     </div>\n                  </div>\n               </form>\n               <div className=\"relative hidden bg-muted md:block\">\n                  <img\n                     src=\"/placeholder.svg\"\n                     alt=\"Image\"\n                     className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n                  />\n               </div>\n            </CardContent>\n         </Card>\n         <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary\">\n            By clicking continue, you agree to our{\" \"}\n            <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/login-05.json b/apps/web/public/v0/styles/miami/login-05.json
new file mode 100644
index 00000000..de56f5ff
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/login-05.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "login-05",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/components/login-form\"\n\nexport default function LoginPage() {\n   return (\n      <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n         <div className=\"w-full max-w-sm\">\n            <LoginForm />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-05/components/login-form.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function LoginForm({\n   className,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n   return (\n      <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n         <form>\n            <div className=\"flex flex-col gap-6\">\n               <div className=\"flex flex-col items-center gap-2\">\n                  <a\n                     href=\"#\"\n                     className=\"flex flex-col items-center gap-2 font-medium\"\n                  >\n                     <div className=\"flex h-8 w-8 items-center justify-center rounded-md\">\n                        <GalleryVerticalEnd className=\"size-6\" />\n                     </div>\n                     <span className=\"sr-only\">Acme Inc.</span>\n                  </a>\n                  <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n                  <div className=\"text-center text-sm\">\n                     Don&apos;t have an account?{\" \"}\n                     <a href=\"#\" className=\"underline underline-offset-4\">\n                        Sign up\n                     </a>\n                  </div>\n               </div>\n               <div className=\"flex flex-col gap-6\">\n                  <div className=\"grid gap-2\">\n                     <Label htmlFor=\"email\">Email</Label>\n                     <Input\n                        id=\"email\"\n                        type=\"email\"\n                        placeholder=\"m@example.com\"\n                        required\n                     />\n                  </div>\n                  <Button type=\"submit\" className=\"w-full\">\n                     Login\n                  </Button>\n               </div>\n               <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                  <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                     Or\n                  </span>\n               </div>\n               <div className=\"grid gap-4 sm:grid-cols-2\">\n                  <Button variant=\"outline\" className=\"w-full\">\n                     <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                     >\n                        <path\n                           d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                           fill=\"currentColor\"\n                        />\n                     </svg>\n                     Continue with Apple\n                  </Button>\n                  <Button variant=\"outline\" className=\"w-full\">\n                     <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                     >\n                        <path\n                           d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                           fill=\"currentColor\"\n                        />\n                     </svg>\n                     Continue with Google\n                  </Button>\n               </div>\n            </div>\n         </form>\n         <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary  \">\n            By clicking continue, you agree to our{\" \"}\n            <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/magic-card-demo.json b/apps/web/public/v0/styles/miami/magic-card-demo.json
new file mode 100644
index 00000000..2256a0f2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/magic-card-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "magic-card-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/magic-card-demo.tsx",
+      "content": "import { MagicCard, MagicContainer } from \"@/components/ui/magic-card\"\n\nexport default function MagicCardDemo() {\n   return (\n      <MagicContainer className=\"flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row\">\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Magic\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Card\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Demo\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n      </MagicContainer>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/magic-card-gradient.json b/apps/web/public/v0/styles/miami/magic-card-gradient.json
new file mode 100644
index 00000000..8a204604
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/magic-card-gradient.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "magic-card-gradient",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/magic-card-gradient.tsx",
+      "content": "import { MagicCard, MagicContainer } from \"@/components/ui/magic-card\"\n\nexport default function MagicCardGradient() {\n   return (\n      <MagicContainer className=\"flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row\">\n         <MagicCard\n            borderWidth={3}\n            className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\"\n         >\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Magic\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Card\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n         <MagicCard className=\"flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl\">\n            <p className=\"z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200\">\n               Demo\n            </p>\n            <div className=\"pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\" />\n         </MagicCard>\n      </MagicContainer>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/magic-card.json b/apps/web/public/v0/styles/miami/magic-card.json
new file mode 100644
index 00000000..781d9b38
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/magic-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "magic-card",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/magic-card.tsx",
+      "content": "\"use client\"\n\nimport type { CSSProperties, ReactElement, ReactNode } from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface MousePosition {\n   x: number\n   y: number\n}\n\nfunction useMousePosition(): MousePosition {\n   const [mousePosition, setMousePosition] = useState<MousePosition>({\n      x: 0,\n      y: 0,\n   })\n\n   useEffect(() => {\n      const handleMouseMove = (event: globalThis.MouseEvent) => {\n         setMousePosition({ x: event.clientX, y: event.clientY })\n      }\n\n      window.addEventListener(\"mousemove\", handleMouseMove)\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMouseMove)\n      }\n   }, [])\n\n   return mousePosition\n}\n\ninterface MagicContainerProps {\n   children?: ReactNode\n   className?: string\n}\n\nfunction MagicContainer({ children, className }: MagicContainerProps) {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const mousePosition = useMousePosition()\n   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })\n   const containerSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })\n   const [boxes, setBoxes] = useState<Array<HTMLElement>>([])\n\n   useEffect(() => {\n      init()\n      containerRef.current &&\n         setBoxes(\n            Array.from(containerRef.current.children).map(\n               (el) => el as HTMLElement,\n            ),\n         )\n   }, [])\n\n   useEffect(() => {\n      init()\n      window.addEventListener(\"resize\", init)\n\n      return () => {\n         window.removeEventListener(\"resize\", init)\n      }\n   }, [setBoxes])\n\n   useEffect(() => {\n      onMouseMove()\n   }, [mousePosition])\n\n   const init = () => {\n      if (containerRef.current) {\n         containerSize.current.w = containerRef.current.offsetWidth\n         containerSize.current.h = containerRef.current.offsetHeight\n      }\n   }\n\n   const onMouseMove = () => {\n      if (containerRef.current) {\n         const rect = containerRef.current.getBoundingClientRect()\n         const { w, h } = containerSize.current\n         const x = mousePosition.x - rect.left\n         const y = mousePosition.y - rect.top\n         const inside = x < w && x > 0 && y < h && y > 0\n\n         mouse.current.x = x\n         mouse.current.y = y\n         boxes.forEach((box) => {\n            const boxX =\n               -(box.getBoundingClientRect().left - rect.left) + mouse.current.x\n            const boxY =\n               -(box.getBoundingClientRect().top - rect.top) + mouse.current.y\n            box.style.setProperty(\"--mouse-x\", `${boxX}px`)\n            box.style.setProperty(\"--mouse-y\", `${boxY}px`)\n\n            if (inside) box.style.setProperty(\"--opacity\", `1`)\n            else box.style.setProperty(\"--opacity\", `0`)\n         })\n      }\n   }\n\n   return (\n      <div className={cn(\"size-full\", className)} ref={containerRef}>\n         {children}\n      </div>\n   )\n}\n\ninterface MagicCardProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the card\n    */\n   as?: ReactElement\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the card\n    */\n   className?: string\n\n   /**\n    * @default \"\"\n    * @type ReactNode\n    * @description\n    * The children of the card\n    */\n   children?: ReactNode\n\n   /**\n    * @default 600\n    * @type number\n    * @description\n    * The size of the spotlight effect in pixels\n    */\n   size?: number\n\n   /**\n    * @default true\n    * @type boolean\n    * @description\n    * Whether to show the spotlight\n    */\n   spotlight?: boolean\n\n   /**\n    * @default \"rgba(255,255,255,0.03)\"\n    * @type string\n    * @description\n    * The color of the spotlight\n    */\n   spotlightColor?: string\n\n   /**\n    * @default true\n    * @type boolean\n    * @description\n    * Whether to isolate the card which is being hovered\n    */\n   isolated?: boolean\n\n   /**\n    * @default \"rgba(255,255,255,0.03)\"\n    * @type string\n    * @description\n    * The background of the card\n    */\n   background?: string\n\n   [key: string]: any\n}\n\nconst MagicCard: React.FC<MagicCardProps> = ({\n   className,\n   children,\n   size = 600,\n   spotlight = true,\n   borderColor = \"hsl(0 0% 98%)\",\n   isolated = true,\n   ...props\n}) => {\n   return (\n      <div\n         style={\n            {\n               \"--mask-size\": `${size}px`,\n               \"--border-color\": `${borderColor}`,\n            } as CSSProperties\n         }\n         className={cn(\n            \"relative z-0 size-full rounded-2xl p-6\",\n            \"bg-gray-300 dark:bg-gray-700\",\n            \"bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--border-color),transparent_100%)]\",\n            className,\n         )}\n         {...props}\n      >\n         {children}\n\n         {/* Background */}\n         <div className=\"absolute inset-px -z-20 rounded-2xl bg-white dark:bg-black/95\" />\n      </div>\n   )\n}\n\nexport { MagicCard, MagicContainer }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/marquee-3d.json b/apps/web/public/v0/styles/miami/marquee-3d.json
new file mode 100644
index 00000000..42c468ed
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/marquee-3d.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "marquee-3d",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/marquee-3d.tsx",
+      "content": "import Marquee from \"@/components/ui/marquee\"\n\nconst logos = [\n   {\n      name: \"Microsoft\",\n      img: \"https://picsum.photos/id/1/200/300\",\n   },\n   {\n      name: \"Apple\",\n      img: \"https://picsum.photos/id/2/200/300\",\n   },\n   {\n      name: \"Google\",\n      img: \"https://picsum.photos/id/3/200/300\",\n   },\n   {\n      name: \"Facebook\",\n      img: \"https://picsum.photos/id/4/200/300\",\n   },\n   {\n      name: \"LinkedIn\",\n      img: \"https://picsum.photos/id/5/200/300\",\n   },\n   {\n      name: \"Twitter\",\n      img: \"https://picsum.photos/id/6/200/300\",\n   },\n]\n\nfunction Marquee3D() {\n   return (\n      <div className=\"bg-background relative flex h-full w-96 flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border px-20 md:shadow-xl\">\n         <div className=\"flex flex-row gap-4 [perspective:300px]\">\n            <Marquee\n               className=\"h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]\"\n               vertical\n               style={{\n                  transform:\n                     \"translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)\",\n               }}\n            >\n               {logos.map((data, idx) => (\n                  <img\n                     key={idx}\n                     src={data.img}\n                     alt={data.name}\n                     className=\"mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300\"\n                  />\n               ))}\n            </Marquee>\n         </div>\n\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default Marquee3D\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/marquee-demo-vertical.json b/apps/web/public/v0/styles/miami/marquee-demo-vertical.json
new file mode 100644
index 00000000..60d22718
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/marquee-demo-vertical.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "marquee-demo-vertical",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/marquee-demo-vertical.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport Marquee from \"@/components/ui/marquee\"\n\nconst reviews = [\n   {\n      name: \"Jack\",\n      username: \"@jack\",\n      body: \"I've never seen anything like this before. It's amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jack\",\n   },\n   {\n      name: \"Jill\",\n      username: \"@jill\",\n      body: \"I don't know what to say. I'm speechless. This is amazing.\",\n      img: \"https://avatar.vercel.sh/jill\",\n   },\n   {\n      name: \"John\",\n      username: \"@john\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/john\",\n   },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nfunction ReviewCard({\n   img,\n   name,\n   username,\n   body,\n}: {\n   img: string\n   name: string\n   username: string\n   body: string\n}) {\n   return (\n      <figure\n         className={cn(\n            \"relative h-40 w-36 cursor-pointer overflow-hidden rounded-xl border p-4\",\n            // light styles\n            \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n            // dark styles\n            \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-2\">\n            <img\n               className=\"rounded-full\"\n               width=\"32\"\n               height=\"32\"\n               alt=\"\"\n               src={img}\n            />\n            <div className=\"flex flex-col\">\n               <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {name}\n               </figcaption>\n               <p className=\"text-xs font-medium dark:text-white/40\">\n                  {username}\n               </p>\n            </div>\n         </div>\n         <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n      </figure>\n   )\n}\n\nfunction MarqueeDemoVertical() {\n   return (\n      <div className=\"bg-background relative flex h-96 flex-row items-center justify-center overflow-hidden rounded-lg border sm:px-20 md:shadow-xl\">\n         <Marquee pauseOnHover vertical className=\"[--duration:20s]\">\n            {firstRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <Marquee reverse pauseOnHover vertical className=\"[--duration:20s]\">\n            {secondRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeDemoVertical\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/marquee-demo.json b/apps/web/public/v0/styles/miami/marquee-demo.json
new file mode 100644
index 00000000..7e0bf88e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/marquee-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "marquee-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/marquee-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport Marquee from \"@/components/ui/marquee\"\n\nconst reviews = [\n   {\n      name: \"Jack\",\n      username: \"@jack\",\n      body: \"I've never seen anything like this before. It's amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jack\",\n   },\n   {\n      name: \"Jill\",\n      username: \"@jill\",\n      body: \"I don't know what to say. I'm speechless. This is amazing.\",\n      img: \"https://avatar.vercel.sh/jill\",\n   },\n   {\n      name: \"John\",\n      username: \"@john\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/john\",\n   },\n   {\n      name: \"Jane\",\n      username: \"@jane\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jane\",\n   },\n   {\n      name: \"Jenny\",\n      username: \"@jenny\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/jenny\",\n   },\n   {\n      name: \"James\",\n      username: \"@james\",\n      body: \"I'm at a loss for words. This is amazing. I love it.\",\n      img: \"https://avatar.vercel.sh/james\",\n   },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nfunction ReviewCard({\n   img,\n   name,\n   username,\n   body,\n}: {\n   img: string\n   name: string\n   username: string\n   body: string\n}) {\n   return (\n      <figure\n         className={cn(\n            \"relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4\",\n            // light styles\n            \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n            // dark styles\n            \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n         )}\n      >\n         <div className=\"flex flex-row items-center gap-2\">\n            <img\n               className=\"rounded-full\"\n               width=\"32\"\n               height=\"32\"\n               alt=\"\"\n               src={img}\n            />\n            <div className=\"flex flex-col\">\n               <figcaption className=\"text-sm font-medium dark:text-white\">\n                  {name}\n               </figcaption>\n               <p className=\"text-xs font-medium dark:text-white/40\">\n                  {username}\n               </p>\n            </div>\n         </div>\n         <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n      </figure>\n   )\n}\n\nfunction MarqueeDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full flex-col items-center justify-center overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n         <Marquee pauseOnHover className=\"[--duration:20s]\">\n            {firstRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <Marquee reverse pauseOnHover className=\"[--duration:20s]\">\n            {secondRow.map((review) => (\n               <ReviewCard key={review.username} {...review} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/marquee-logos.json b/apps/web/public/v0/styles/miami/marquee-logos.json
new file mode 100644
index 00000000..84dc6d2e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/marquee-logos.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "marquee-logos",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/marquee-logos.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport Marquee from \"@/components/ui/marquee\"\n\nconst logos = [\n   {\n      name: \"Microsoft\",\n      img: \"https://cdn.simpleicons.org/microsoft/000/fff\",\n   },\n   {\n      name: \"Apple\",\n      img: \"https://cdn.simpleicons.org/apple/000/fff\",\n   },\n   {\n      name: \"Google\",\n      img: \"https://cdn.simpleicons.org/google/000/fff\",\n   },\n   {\n      name: \"Facebook\",\n      img: \"https://cdn.simpleicons.org/facebook/000/fff\",\n   },\n   {\n      name: \"LinkedIn\",\n      img: \"https://cdn.simpleicons.org/linkedin/000/fff\",\n   },\n   {\n      name: \"Twitter\",\n      img: \"https://cdn.simpleicons.org/twitter/000/fff\",\n   },\n]\n\nfunction Logo({ name, img }: { name: string; img: string }) {\n   return (\n      <div className={cn(\"size-12 cursor-pointer\")}>\n         <img src={img} alt={name} />\n      </div>\n   )\n}\n\nfunction MarqueeLogos() {\n   return (\n      <div className=\"bg-background relative flex size-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n         <Marquee className=\"[--gap:3rem]\">\n            {logos.map((logo, idx) => (\n               <Logo key={idx} {...logo} />\n            ))}\n         </Marquee>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n         <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n      </div>\n   )\n}\n\nexport default MarqueeLogos\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/marquee.json b/apps/web/public/v0/styles/miami/marquee.json
new file mode 100644
index 00000000..8cbb8167
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/marquee.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "marquee",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/marquee.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\ninterface MarqueeProps {\n   className?: string\n   reverse?: boolean\n   pauseOnHover?: boolean\n   children?: React.ReactNode\n   vertical?: boolean\n   repeat?: number\n   [key: string]: any\n}\n\nexport default function Marquee({\n   className,\n   reverse,\n   pauseOnHover = false,\n   children,\n   vertical = false,\n   repeat = 4,\n   ...props\n}: MarqueeProps) {\n   return (\n      <div\n         {...props}\n         className={cn(\n            \"group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]\",\n            {\n               \"flex-row\": !vertical,\n               \"flex-col\": vertical,\n            },\n            className,\n         )}\n      >\n         {Array(repeat)\n            .fill(0)\n            .map((_, i) => (\n               <div\n                  key={i}\n                  className={cn(\n                     \"flex shrink-0 justify-around [gap:var(--gap)]\",\n                     {\n                        \"animate-marquee flex-row\": !vertical,\n                        \"animate-marquee-vertical flex-col\": vertical,\n                        \"group-hover:[animation-play-state:paused]\":\n                           pauseOnHover,\n                        \"[animation-direction:reverse]\": reverse,\n                     },\n                  )}\n               >\n                  {children}\n               </div>\n            ))}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "keyframes": {
+            "marquee": {
+              "from": {
+                "transform": "translateX(0)"
+              },
+              "to": {
+                "transform": "translateX(calc(-100% - var(--gap)))"
+              }
+            },
+            "marquee-vertical": {
+              "from": {
+                "transform": "translateY(0)"
+              },
+              "to": {
+                "transform": "translateY(calc(-100% - var(--gap)))"
+              }
+            }
+          },
+          "animation": {
+            "marquee": "marquee var(--duration) infinite linear",
+            "marquee-vertical": "marquee-vertical var(--duration) linear infinite"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/menubar-demo.json b/apps/web/public/v0/styles/miami/menubar-demo.json
new file mode 100644
index 00000000..03cf1ae7
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/menubar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "menubar-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "menubar"
+  ],
+  "files": [
+    {
+      "path": "examples/menubar-demo.tsx",
+      "content": "import {\n   Menubar,\n   MenubarCheckboxItem,\n   MenubarContent,\n   MenubarItem,\n   MenubarMenu,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarSeparator,\n   MenubarShortcut,\n   MenubarSub,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarTrigger,\n} from \"@/components/ui/menubar\"\n\nexport default function MenubarDemo() {\n   return (\n      <Menubar>\n         <MenubarMenu>\n            <MenubarTrigger>File</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  New Window <MenubarShortcut>⌘N</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled>New Incognito Window</MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Share</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Email link</MenubarItem>\n                     <MenubarItem>Messages</MenubarItem>\n                     <MenubarItem>Notes</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>\n                  Print... <MenubarShortcut>⌘P</MenubarShortcut>\n               </MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Edit</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Find</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Search the web</MenubarItem>\n                     <MenubarSeparator />\n                     <MenubarItem>Find...</MenubarItem>\n                     <MenubarItem>Find Next</MenubarItem>\n                     <MenubarItem>Find Previous</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>Cut</MenubarItem>\n               <MenubarItem>Copy</MenubarItem>\n               <MenubarItem>Paste</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>View</MenubarTrigger>\n            <MenubarContent>\n               <MenubarCheckboxItem>\n                  Always Show Bookmarks Bar\n               </MenubarCheckboxItem>\n               <MenubarCheckboxItem checked>\n                  Always Show Full URLs\n               </MenubarCheckboxItem>\n               <MenubarSeparator />\n               <MenubarItem inset>\n                  Reload <MenubarShortcut>⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled inset>\n                  Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Hide Sidebar</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Profiles</MenubarTrigger>\n            <MenubarContent>\n               <MenubarRadioGroup value=\"benoit\">\n                  <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n                  <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n                  <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n               </MenubarRadioGroup>\n               <MenubarSeparator />\n               <MenubarItem inset>Edit...</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n      </Menubar>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/menubar.json b/apps/web/public/v0/styles/miami/menubar.json
new file mode 100644
index 00000000..54718cf5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/menubar.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "menubar",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-menubar"
+  ],
+  "files": [
+    {
+      "path": "ui/menubar.tsx",
+      "content": "\"use client\"\n\nimport {\n   CheckIcon,\n   ChevronRightIcon,\n   DotFilledIcon,\n} from \"@radix-ui/react-icons\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Root\n      ref={ref}\n      className={cn(\n         \"bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-sm\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Trigger\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n      inset?: boolean\n   }\n>(({ className, inset, children, ...props }, ref) => (\n   <MenubarPrimitive.SubTrigger\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n   </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.SubContent>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.SubContent\n      ref={ref}\n      className={cn(\n         \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n   (\n      {\n         className,\n         align = \"start\",\n         alignOffset = -4,\n         sideOffset = 8,\n         ...props\n      },\n      ref,\n   ) => (\n      <MenubarPrimitive.Portal>\n         <MenubarPrimitive.Content\n            ref={ref}\n            align={align}\n            alignOffset={alignOffset}\n            sideOffset={sideOffset}\n            className={cn(\n               \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md\",\n               className,\n            )}\n            {...props}\n         />\n      </MenubarPrimitive.Portal>\n   ),\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <MenubarPrimitive.Item\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n   <MenubarPrimitive.CheckboxItem\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      checked={checked}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <MenubarPrimitive.ItemIndicator>\n            <CheckIcon className=\"size-4\" />\n         </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n   <MenubarPrimitive.RadioItem\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n         <MenubarPrimitive.ItemIndicator>\n            <DotFilledIcon className=\"size-4 fill-current\" />\n         </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n   </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n      inset?: boolean\n   }\n>(({ className, inset, ...props }, ref) => (\n   <MenubarPrimitive.Label\n      ref={ref}\n      className={cn(\n         \"px-2 py-1.5 text-sm font-semibold\",\n         inset && \"pl-8\",\n         className,\n      )}\n      {...props}\n   />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n   React.ElementRef<typeof MenubarPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <MenubarPrimitive.Separator\n      ref={ref}\n      className={cn(\"bg-muted -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nfunction MenubarShortcut({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n   return (\n      <span\n         className={cn(\n            \"text-muted-foreground ml-auto text-xs tracking-widest\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n   Menubar,\n   MenubarMenu,\n   MenubarTrigger,\n   MenubarContent,\n   MenubarItem,\n   MenubarSeparator,\n   MenubarLabel,\n   MenubarCheckboxItem,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarPortal,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarGroup,\n   MenubarSub,\n   MenubarShortcut,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/meteors-demo.json b/apps/web/public/v0/styles/miami/meteors-demo.json
new file mode 100644
index 00000000..7cbb0c6a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/meteors-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "meteors-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/meteors-demo.tsx",
+      "content": "import Meteors from \"@/components/ui/meteors\"\n\nexport default function MeteorDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl\">\n         <Meteors number={30} />\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white\">\n            Meteors\n         </p>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/meteors.json b/apps/web/public/v0/styles/miami/meteors.json
new file mode 100644
index 00000000..631c434a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/meteors.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "meteors",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/meteors.tsx",
+      "content": "\"use client\"\n\nimport clsx from \"clsx\"\nimport { useEffect, useState } from \"react\"\n\ninterface MeteorsProps {\n   number?: number\n}\nexport function Meteors({ number = 20 }: MeteorsProps) {\n   const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(\n      [],\n   )\n\n   useEffect(() => {\n      const styles = [...new Array(number)].map(() => ({\n         top: -5,\n         left: `${Math.floor(Math.random() * window.innerWidth)}px`,\n         animationDelay: `${Math.random() * 1 + 0.2}s`,\n         animationDuration: `${Math.floor(Math.random() * 8 + 2)}s`,\n      }))\n      setMeteorStyles(styles)\n   }, [number])\n\n   return (\n      <>\n         {[...meteorStyles].map((style, idx) => (\n            // Meteor Head\n            <span\n               key={idx}\n               className={clsx(\n                  \"pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]\",\n               )}\n               style={style}\n            >\n               {/* Meteor Tail */}\n               <div className=\"pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent\" />\n            </span>\n         ))}\n      </>\n   )\n}\n\nexport default Meteors\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/mode-toggle-group.json b/apps/web/public/v0/styles/miami/mode-toggle-group.json
new file mode 100644
index 00000000..06d6a0e2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/mode-toggle-group.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "mode-toggle-group",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport { MoonIcon, SunIcon } from \"@radix-ui/react-icons\"\nimport { useTheme } from \"next-themes\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n   const { setTheme } = useTheme()\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n               <SunIcon className=\"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n               <MoonIcon className=\"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n               <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n               Light\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n               Dark\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n               System\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/mode-toggle.json b/apps/web/public/v0/styles/miami/mode-toggle.json
new file mode 100644
index 00000000..0dbb6c2b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/mode-toggle.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "mode-toggle",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport { MoonIcon, SunIcon } from \"@radix-ui/react-icons\"\nimport { useTheme } from \"next-themes\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n   const { setTheme } = useTheme()\n\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n               <SunIcon className=\"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n               <MoonIcon className=\"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n               <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n               Light\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n               Dark\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n               System\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/morphing-text-demo.json b/apps/web/public/v0/styles/miami/morphing-text-demo.json
new file mode 100644
index 00000000..4a992f1c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/morphing-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "morphing-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/morphing-text-demo.tsx",
+      "content": "import { MorphingText } from \"@/components/ui/morphing-text\"\n\nconst texts = [\n   \"Hello\",\n   \"Morphing\",\n   \"Text\",\n   \"Animation\",\n   \"React\",\n   \"Component\",\n   \"Smooth\",\n   \"Transition\",\n   \"Engaging\",\n]\n\nexport default function MorphingTextDemo() {\n   return <MorphingText texts={texts} />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/morphing-text.json b/apps/web/public/v0/styles/miami/morphing-text.json
new file mode 100644
index 00000000..ed427b6c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/morphing-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "morphing-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/morphing-text.tsx",
+      "content": "\"use client\"\n\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nconst morphTime = 1.5\nconst cooldownTime = 0.5\n\nconst useMorphingText = (texts: string[]) => {\n   const textIndexRef = useRef(0)\n   const morphRef = useRef(0)\n   const cooldownRef = useRef(0)\n   const timeRef = useRef(new Date())\n\n   const text1Ref = useRef<HTMLSpanElement>(null)\n   const text2Ref = useRef<HTMLSpanElement>(null)\n\n   const setStyles = useCallback(\n      (fraction: number) => {\n         const [current1, current2] = [text1Ref.current, text2Ref.current]\n         if (!current1 || !current2) return\n\n         current2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`\n         current2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`\n\n         const invertedFraction = 1 - fraction\n         current1.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`\n         current1.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`\n\n         current1.textContent = texts[textIndexRef.current % texts.length]\n         current2.textContent = texts[(textIndexRef.current + 1) % texts.length]\n      },\n      [texts],\n   )\n\n   const doMorph = useCallback(() => {\n      morphRef.current -= cooldownRef.current\n      cooldownRef.current = 0\n\n      let fraction = morphRef.current / morphTime\n\n      if (fraction > 1) {\n         cooldownRef.current = cooldownTime\n         fraction = 1\n      }\n\n      setStyles(fraction)\n\n      if (fraction === 1) {\n         textIndexRef.current++\n      }\n   }, [setStyles])\n\n   const doCooldown = useCallback(() => {\n      morphRef.current = 0\n      const [current1, current2] = [text1Ref.current, text2Ref.current]\n      if (current1 && current2) {\n         current2.style.filter = \"none\"\n         current2.style.opacity = \"100%\"\n         current1.style.filter = \"none\"\n         current1.style.opacity = \"0%\"\n      }\n   }, [])\n\n   useEffect(() => {\n      let animationFrameId: number\n\n      const animate = () => {\n         animationFrameId = requestAnimationFrame(animate)\n\n         const newTime = new Date()\n         const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000\n         timeRef.current = newTime\n\n         cooldownRef.current -= dt\n\n         if (cooldownRef.current <= 0) doMorph()\n         else doCooldown()\n      }\n\n      animate()\n      return () => {\n         cancelAnimationFrame(animationFrameId)\n      }\n   }, [doMorph, doCooldown])\n\n   return { text1Ref, text2Ref }\n}\n\ninterface MorphingTextProps {\n   className?: string\n   texts: string[]\n}\n\nconst Texts: React.FC<Pick<MorphingTextProps, \"texts\">> = ({ texts }) => {\n   const { text1Ref, text2Ref } = useMorphingText(texts)\n   return (\n      <>\n         <span\n            className=\"absolute inset-x-0 top-0 m-auto inline-block w-full\"\n            ref={text1Ref}\n         />\n         <span\n            className=\"absolute inset-x-0 top-0 m-auto inline-block w-full\"\n            ref={text2Ref}\n         />\n      </>\n   )\n}\n\nconst SvgFilters: React.FC = () => (\n   <svg\n      id=\"filters\"\n      className=\"fixed h-0 w-0\"\n      preserveAspectRatio=\"xMidYMid slice\"\n   >\n      <defs>\n         <filter id=\"threshold\">\n            <feColorMatrix\n               in=\"SourceGraphic\"\n               type=\"matrix\"\n               values=\"1 0 0 0 0\n                  0 1 0 0 0\n                  0 0 1 0 0\n                  0 0 0 255 -140\"\n            />\n         </filter>\n      </defs>\n   </svg>\n)\n\nexport const MorphingText: React.FC<MorphingTextProps> = ({\n   texts,\n   className,\n}) => (\n   <div\n      className={cn(\n         \"relative mx-auto h-16 w-full max-w-screen-md text-center font-sans text-[40pt] font-bold leading-none [filter:url(#threshold)_blur(0.6px)] md:h-24 lg:text-[6rem]\",\n         className,\n      )}\n   >\n      <Texts texts={texts} />\n      <SvgFilters />\n   </div>\n)\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/multi-select-basic.json b/apps/web/public/v0/styles/miami/multi-select-basic.json
new file mode 100644
index 00000000..bad4778d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/multi-select-basic.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-basic",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-basic.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"@/components/ui/multi-select\"\n\nexport default function MultiSelectBasicDemo() {\n   return (\n      <MultiSelect>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/multi-select-controllable-search.json b/apps/web/public/v0/styles/miami/multi-select-controllable-search.json
new file mode 100644
index 00000000..76753f69
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/multi-select-controllable-search.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-controllable-search",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-controllable-search.tsx",
+      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from \"@/components/ui/multi-select\"\n\nconst ALL_ITEMS = [\n   { value: \"react\", label: \"React\", group: \"React\" },\n   { value: \"next\", label: \"Next.js\", group: \"React\" },\n   { value: \"remix\", label: \"Remix\", group: \"React\" },\n   { value: \"vue\", label: \"Vue\", group: \"Vue\" },\n   { value: \"nuxt\", label: \"Nuxt.js\", group: \"Vue\" },\n   { value: \"angular\", label: \"Angular\", group: \"Others\" },\n   { value: \"svelte\", label: \"Svelte\", group: \"Others\" },\n]\n\nfunction group(\n   options: Array<(typeof ALL_ITEMS)[number]>,\n): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find((g) => g.heading === item.group)\n      if (group) group.children.push(item)\n      else acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword) return group(ALL_ITEMS)\n   await new Promise((resolve) => setTimeout(resolve, 500))\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter((item) =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n   return group(filtered)\n}\n\nexport default function MultiSelectControllableSearchDemo() {\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword?: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   return (\n      <MultiSelect onSearch={handleSearch}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch />\n            <MultiSelectList>\n               {loading ? null : renderMultiSelectOptions(options)}\n               <MultiSelectEmpty>\n                  {loading ? \"Loading...\" : \"No results found\"}\n               </MultiSelectEmpty>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/multi-select-filter.json b/apps/web/public/v0/styles/miami/multi-select-filter.json
new file mode 100644
index 00000000..cf4906c3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/multi-select-filter.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-filter",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-filter.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"@/components/ui/multi-select\"\n\nexport default function MultiSelectFilterDemo() {\n   return (\n      <MultiSelect>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch placeholder=\"Input to search\" />\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n            <MultiSelectEmpty />\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/multi-select-form.json b/apps/web/public/v0/styles/miami/multi-select-form.json
new file mode 100644
index 00000000..ead3488b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/multi-select-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport Link from \"next/link\"\nimport { useRef, useState } from \"react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from \"@/components/ui/multi-select\"\nimport { toast } from \"@/components/ui/use-toast\"\nimport { Button } from \"@/components/ui/button\"\n\nconst ALL_ITEMS = [\n   { value: \"react\", label: \"React\", group: \"React\" },\n   { value: \"next\", label: \"Next.js\", group: \"React\" },\n   { value: \"remix\", label: \"Remix\", group: \"React\" },\n   { value: \"vue\", label: \"Vue\", group: \"Vue\" },\n   { value: \"nuxt\", label: \"Nuxt.js\", group: \"Vue\" },\n   { value: \"angular\", label: \"Angular\", group: \"Others\" },\n   { value: \"svelte\", label: \"Svelte\", group: \"Others\" },\n]\n\nfunction group(\n   options: Array<(typeof ALL_ITEMS)[number]>,\n): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find((g) => g.heading === item.group)\n      if (group) group.children.push(item)\n      else acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword) return group(ALL_ITEMS)\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter((item) =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n\n   if (!filtered.length) {\n      return [\n         {\n            label: keyword,\n            value: keyword,\n         },\n      ]\n   }\n\n   return group(filtered)\n}\n\nconst FormSchema = z.object({\n   frameworks: z.array(z.string(), {\n      required_error: \"Please select at least one framework.\",\n   }),\n})\n\nexport default function MultiSelectFormDemo() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   const onSubmit = (data: z.infer<typeof FormSchema>) => {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"frameworks\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Frameworks</FormLabel>\n                     <MultiSelect\n                        onValueChange={field.onChange}\n                        defaultValue={field.value}\n                        onSearch={(keyword) => handleSearch(keyword ?? \"\")}\n                     >\n                        <FormControl>\n                           <MultiSelectTrigger className=\"w-96\">\n                              <MultiSelectValue placeholder=\"Select frameworks\" />\n                           </MultiSelectTrigger>\n                        </FormControl>\n                        <MultiSelectContent>\n                           <MultiSelectSearch />\n                           <MultiSelectList>\n                              {loading\n                                 ? null\n                                 : renderMultiSelectOptions(options)}\n                              <MultiSelectEmpty>\n                                 {loading ? \"Loading...\" : \"No results found\"}\n                              </MultiSelectEmpty>\n                           </MultiSelectList>\n                        </MultiSelectContent>\n                     </MultiSelect>\n                     <FormDescription>\n                        You can manage frameworks in{\" \"}\n                        <Link href=\"/examples/forms\">framework settings</Link>.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/multi-select-input-custom.json b/apps/web/public/v0/styles/miami/multi-select-input-custom.json
new file mode 100644
index 00000000..84792ca8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/multi-select-input-custom.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-input-custom",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-input-custom.tsx",
+      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectEmpty,\n   MultiSelectList,\n   type MultiSelectOption,\n   type MultiSelectOptionGroup,\n   MultiSelectSearch,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   renderMultiSelectOptions,\n} from \"@/components/ui/multi-select\"\n\nconst ALL_ITEMS = [\n   { value: \"react\", label: \"React\", group: \"React\" },\n   { value: \"next\", label: \"Next.js\", group: \"React\" },\n   { value: \"remix\", label: \"Remix\", group: \"React\" },\n   { value: \"vue\", label: \"Vue\", group: \"Vue\" },\n   { value: \"nuxt\", label: \"Nuxt.js\", group: \"Vue\" },\n   { value: \"angular\", label: \"Angular\", group: \"Others\" },\n   { value: \"svelte\", label: \"Svelte\", group: \"Others\" },\n]\n\nfunction group(\n   options: Array<(typeof ALL_ITEMS)[number]>,\n): MultiSelectOptionGroup[] {\n   return options.reduce((acc, item) => {\n      const group = acc.find((g) => g.heading === item.group)\n      if (group) group.children.push(item)\n      else acc.push({ heading: item.group, children: [item] })\n\n      return acc\n   }, [] as MultiSelectOptionGroup[])\n}\n\nasync function search(keyword?: string) {\n   if (!keyword) return group(ALL_ITEMS)\n   const lowerKeyword = keyword.toLowerCase()\n   const filtered = ALL_ITEMS.filter((item) =>\n      item.label.toLowerCase().includes(lowerKeyword),\n   )\n\n   if (!filtered.length) {\n      return [\n         {\n            label: keyword,\n            value: keyword,\n         },\n      ]\n   }\n\n   return group(filtered)\n}\n\nexport default function MultiSelectInputCustomDemo() {\n   const [loading, setLoading] = useState(false)\n   const [options, setOptions] = useState<MultiSelectOption[]>(() =>\n      group(ALL_ITEMS),\n   )\n\n   const indexRef = useRef(0)\n\n   const handleSearch = async (keyword: string) => {\n      const index = ++indexRef.current\n      setLoading(true)\n      const newOptions = await search(keyword)\n      if (indexRef.current === index) {\n         setOptions(newOptions)\n         setLoading(false)\n      }\n   }\n\n   return (\n      <MultiSelect onSearch={(keyword) => handleSearch(keyword ?? \"\")}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectSearch placeholder=\"input any...\" />\n            <MultiSelectList>\n               {loading ? null : renderMultiSelectOptions(options)}\n               <MultiSelectEmpty>\n                  {loading ? \"Loading...\" : \"No results found\"}\n               </MultiSelectEmpty>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/multi-select-limit-count.json b/apps/web/public/v0/styles/miami/multi-select-limit-count.json
new file mode 100644
index 00000000..d3726ce8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/multi-select-limit-count.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-limit-count",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-limit-count.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"@/components/ui/multi-select\"\n\nexport default function MultiSelectLimitCountDemo() {\n   return (\n      <MultiSelect defaultValue={[\"react\", \"next\", \"remix\"]} maxCount={3}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue placeholder=\"Select stack\" />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/multi-select-limit-display-length.json b/apps/web/public/v0/styles/miami/multi-select-limit-display-length.json
new file mode 100644
index 00000000..0831e8e8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/multi-select-limit-display-length.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select-limit-display-length",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "multi-select"
+  ],
+  "files": [
+    {
+      "path": "examples/multi-select-limit-display-length.tsx",
+      "content": "\"use client\"\n\nimport {\n   MultiSelect,\n   MultiSelectContent,\n   MultiSelectGroup,\n   MultiSelectItem,\n   MultiSelectList,\n   MultiSelectTrigger,\n   MultiSelectValue,\n} from \"@/components/ui/multi-select\"\n\nexport default function MultiSelectLimitDisplayLengthDemo() {\n   return (\n      <MultiSelect defaultValue={[\"long\", \"react\", \"angular\", \"vue\", \"remix\"]}>\n         <MultiSelectTrigger className=\"w-96\">\n            <MultiSelectValue\n               placeholder=\"Select stack\"\n               maxDisplay={3}\n               maxItemLength={5}\n            />\n         </MultiSelectTrigger>\n         <MultiSelectContent>\n            <MultiSelectList>\n               <MultiSelectGroup heading=\"React\">\n                  <MultiSelectItem value=\"react\">React</MultiSelectItem>\n                  <MultiSelectItem value=\"next\">Next.js</MultiSelectItem>\n                  <MultiSelectItem value=\"remix\">Remix</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Vue\">\n                  <MultiSelectItem value=\"vue\">Vue</MultiSelectItem>\n                  <MultiSelectItem value=\"nuxt\">Nuxt</MultiSelectItem>\n               </MultiSelectGroup>\n               <MultiSelectGroup heading=\"Others\">\n                  <MultiSelectItem value=\"angular\">Angular</MultiSelectItem>\n                  <MultiSelectItem value=\"svelte\">Svelte</MultiSelectItem>\n                  <MultiSelectItem value=\"long\">\n                     VeryVeryLongItem\n                  </MultiSelectItem>\n               </MultiSelectGroup>\n            </MultiSelectList>\n         </MultiSelectContent>\n      </MultiSelect>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/multi-select.json b/apps/web/public/v0/styles/miami/multi-select.json
new file mode 100644
index 00000000..6fc4e1a8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/multi-select.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "multi-select",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/multi-select.tsx",
+      "content": "\"use client\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport type { Primitive } from \"@radix-ui/react-primitive\"\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\"\nimport { Check, ChevronsUpDown, X } from \"lucide-react\"\nimport React from \"react\"\nimport { createPortal } from \"react-dom\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n} from \"@/components/ui/command\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport { Badge } from \"@/components/ui/badge\"\n\nexport interface MultiSelectOptionItem {\n   value: string\n   label?: React.ReactNode\n}\n\ninterface MultiSelectContextValue {\n   value: string[]\n\n   open: boolean\n\n   onSelect: (value: string, item: MultiSelectOptionItem) => void\n\n   onDeselect: (value: string, item: MultiSelectOptionItem) => void\n\n   onSearch?: (keyword?: string) => void\n\n   filter?: boolean | ((keyword: string, current: string) => boolean)\n\n   disabled?: boolean\n\n   maxCount?: number\n\n   itemCache: Map<string, MultiSelectOptionItem>\n}\n\nconst MultiSelectContext = React.createContext<\n   MultiSelectContextValue | undefined\n>(undefined)\n\nfunction useMultiSelect() {\n   const context = React.useContext(MultiSelectContext)\n\n   if (!context)\n      throw new Error(\"useMultiSelect must be used within MultiSelectProvider\")\n\n   return context\n}\n\ntype MultiSelectProps = React.ComponentPropsWithoutRef<\n   typeof PopoverPrimitive.Root\n> & {\n   value?: string[]\n   onValueChange?: (value: string[], items: MultiSelectOptionItem[]) => void\n   onSelect?: (value: string, item: MultiSelectOptionItem) => void\n   onDeselect?: (value: string, item: MultiSelectOptionItem) => void\n   defaultValue?: string[]\n   onSearch?: (keyword: string | undefined) => void\n   filter?: boolean | ((keyword: string, current: string) => boolean)\n   disabled?: boolean\n   maxCount?: number\n}\n\nconst MultiSelect: React.FC<MultiSelectProps> = ({\n   value: valueProp,\n   onValueChange: onValueChangeProp,\n   onDeselect: onDeselectProp,\n   onSelect: onSelectProp,\n   defaultValue,\n   open: openProp,\n   onOpenChange,\n   defaultOpen,\n   onSearch,\n   filter,\n   disabled,\n   maxCount,\n   ...popoverProps\n}) => {\n   const itemCache = React.useRef(\n      new Map<string, MultiSelectOptionItem>(),\n   ).current\n\n   const handleValueChange = React.useCallback(\n      (state: string[]) => {\n         if (onValueChangeProp) {\n            const items = state.map((value) => itemCache.get(value)!)\n\n            onValueChangeProp(state, items)\n         }\n      },\n      [onValueChangeProp, itemCache],\n   )\n\n   const [value, setValue] = useControllableState({\n      prop: valueProp,\n      defaultProp: defaultValue,\n      onChange: handleValueChange,\n   })\n\n   const [open, setOpen] = useControllableState({\n      prop: openProp,\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n   })\n\n   const handleSelect = React.useCallback(\n      (value: string, item: MultiSelectOptionItem) => {\n         setValue((prev) => {\n            if (prev?.includes(value)) return prev\n\n            onSelectProp?.(value, item)\n\n            return prev ? [...prev, value] : [value]\n         })\n      },\n      [onSelectProp, setValue],\n   )\n\n   const handleDeselect = React.useCallback(\n      (value: string, item: MultiSelectOptionItem) => {\n         setValue((prev) => {\n            if (!prev || !prev.includes(value)) return prev\n\n            onDeselectProp?.(value, item)\n\n            return prev.filter((v) => v !== value)\n         })\n      },\n      [onDeselectProp, setValue],\n   )\n\n   const contextValue = React.useMemo(() => {\n      return {\n         value: value || [],\n         open: open || false,\n         onSearch,\n         filter,\n         disabled,\n         maxCount,\n         onSelect: handleSelect,\n         onDeselect: handleDeselect,\n         itemCache,\n      }\n   }, [\n      value,\n      open,\n      onSearch,\n      filter,\n      disabled,\n      maxCount,\n      handleSelect,\n      handleDeselect,\n      itemCache,\n   ])\n\n   return (\n      <MultiSelectContext.Provider value={contextValue}>\n         <PopoverPrimitive.Root\n            {...popoverProps}\n            open={open}\n            onOpenChange={setOpen}\n         />\n      </MultiSelectContext.Provider>\n   )\n}\n\nMultiSelect.displayName = \"MultiSelect\"\n\ntype MultiSelectTriggerElement = React.ElementRef<typeof Primitive.div>\n\ninterface MultiSelectTriggerProps\n   extends React.ComponentPropsWithoutRef<typeof Primitive.div> {}\n\nfunction PreventClick(e: React.MouseEvent | React.TouchEvent) {\n   e.preventDefault()\n   e.stopPropagation()\n}\n\nconst MultiSelectTrigger = React.forwardRef<\n   MultiSelectTriggerElement,\n   MultiSelectTriggerProps\n>(({ className, children, ...props }, forwardedRef) => {\n   const { disabled } = useMultiSelect()\n\n   return (\n      <PopoverPrimitive.Trigger ref={forwardedRef as any} asChild>\n         <div\n            aria-disabled={disabled}\n            data-disabled={disabled}\n            {...props}\n            className={cn(\n               \"border-input ring-offset-background focus:ring-ring flex size-full min-h-10 items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 [&>span]:line-clamp-1\",\n               disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-text\",\n               className,\n            )}\n            onClick={disabled ? PreventClick : props.onClick}\n            onTouchStart={disabled ? PreventClick : props.onTouchStart}\n         >\n            {children}\n            <ChevronsUpDown\n               aria-hidden\n               className=\"size-4 shrink-0 opacity-50\"\n            />\n         </div>\n      </PopoverPrimitive.Trigger>\n   )\n})\n\nMultiSelectTrigger.displayName = \"MultiSelectTrigger\"\n\ninterface MultiSelectValueProps\n   extends React.ComponentPropsWithoutRef<typeof Primitive.div> {\n   placeholder?: string\n   maxDisplay?: number\n   maxItemLength?: number\n}\n\nconst MultiSelectValue = React.forwardRef<\n   React.ElementRef<typeof Primitive.div>,\n   MultiSelectValueProps\n>(\n   (\n      { className, placeholder, maxDisplay, maxItemLength, ...props },\n      forwardRef,\n   ) => {\n      const { value, itemCache, onDeselect } = useMultiSelect()\n      const [firstRendered, setFirstRendered] = React.useState(false)\n\n      const renderRemain =\n         maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0\n      const renderItems = renderRemain ? value.slice(0, maxDisplay) : value\n\n      React.useLayoutEffect(() => {\n         setFirstRendered(true)\n      }, [])\n\n      if (!value.length || !firstRendered) {\n         return (\n            <span className=\"text-muted-foreground pointer-events-none\">\n               {placeholder}\n            </span>\n         )\n      }\n\n      return (\n         <TooltipProvider delayDuration={300}>\n            <div\n               className={cn(\n                  \"flex flex-1 flex-wrap items-center gap-1.5 overflow-x-hidden\",\n                  className,\n               )}\n               {...props}\n               ref={forwardRef}\n            >\n               {renderItems.map((value) => {\n                  const item = itemCache.get(value)\n\n                  const content = item?.label || value\n\n                  const child =\n                     maxItemLength &&\n                     typeof content === \"string\" &&\n                     content.length > maxItemLength\n                        ? `${content.slice(0, maxItemLength)}...`\n                        : content\n\n                  const el = (\n                     <Badge\n                        variant=\"outline\"\n                        key={value}\n                        className=\"group/multi-select-badge cursor-pointer rounded-full pr-1.5\"\n                        onClick={(e) => {\n                           e.preventDefault()\n                           e.stopPropagation()\n                           onDeselect(value, item!)\n                        }}\n                     >\n                        <span>{child}</span>\n                        <X className=\"text-muted-foreground group-hover/multi-select-badge:text-foreground ml-1 size-3\" />\n                     </Badge>\n                  )\n\n                  if (child !== content) {\n                     return (\n                        <Tooltip key={value}>\n                           <TooltipTrigger className=\"inline-flex\">\n                              {el}\n                           </TooltipTrigger>\n                           <TooltipContent\n                              side=\"bottom\"\n                              align=\"start\"\n                              className=\"z-[51]\"\n                           >\n                              {content}\n                           </TooltipContent>\n                        </Tooltip>\n                     )\n                  }\n\n                  return el\n               })}\n               {renderRemain ? (\n                  <span className=\"text-muted-foreground py-.5 text-xs leading-4\">\n                     +{renderRemain}\n                  </span>\n               ) : null}\n            </div>\n         </TooltipProvider>\n      )\n   },\n)\n\nMultiSelectValue.displayName = \"MultiSelectValue\"\n\nconst MultiSelectSearch = React.forwardRef<\n   React.ElementRef<typeof CommandInput>,\n   React.ComponentPropsWithoutRef<typeof CommandInput>\n>((props, ref) => {\n   const { onSearch } = useMultiSelect()\n\n   return <CommandInput ref={ref} {...props} onValueChange={onSearch} />\n})\n\nMultiSelectSearch.displayName = \"MultiSelectSearch\"\n\nconst MultiSelectList = React.forwardRef<\n   React.ElementRef<typeof CommandList>,\n   React.ComponentPropsWithoutRef<typeof CommandList>\n>(({ className, ...props }, ref) => {\n   return (\n      <CommandList\n         ref={ref}\n         className={cn(\"max-h-[unset] px-0 py-1\", className)}\n         {...props}\n      />\n   )\n})\n\nMultiSelectList.displayName = \"MultiSelectList\"\n\ninterface MultiSelectContentProps\n   extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {}\n\nconst MultiSelectContent = React.forwardRef<\n   React.ElementRef<typeof PopoverPrimitive.Content>,\n   MultiSelectContentProps\n>(({ className, children, ...props }, ref) => {\n   const context = useMultiSelect()\n\n   const fragmentRef = React.useRef<DocumentFragment>()\n\n   if (!fragmentRef.current && typeof window !== \"undefined\")\n      fragmentRef.current = document.createDocumentFragment()\n\n   if (!context.open) {\n      return fragmentRef.current\n         ? createPortal(<Command>{children}</Command>, fragmentRef.current)\n         : null\n   }\n\n   return (\n      <PopoverPrimitive.Portal forceMount>\n         <PopoverPrimitive.Content\n            ref={ref}\n            align=\"start\"\n            sideOffset={4}\n            collisionPadding={10}\n            className={cn(\n               \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-full rounded-md border p-0 shadow-md outline-none\",\n            )}\n            style={\n               {\n                  \"--radix-select-content-transform-origin\":\n                     \"var(--radix-popper-transform-origin)\",\n                  \"--radix-select-content-available-width\":\n                     \"var(--radix-popper-available-width)\",\n                  \"--radix-select-content-available-height\":\n                     \"var(--radix-popper-available-height)\",\n                  \"--radix-select-trigger-width\":\n                     \"var(--radix-popper-anchor-width)\",\n                  \"--radix-select-trigger-height\":\n                     \"var(--radix-popper-anchor-height)\",\n               } as any\n            }\n            {...props}\n         >\n            <Command\n               className={cn(\n                  \"max-h-96 w-full min-w-[var(--radix-select-trigger-width)] px-1\",\n                  className,\n               )}\n               shouldFilter={!context.onSearch}\n            >\n               {children}\n            </Command>\n         </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n   )\n})\n\nMultiSelectContent.displayName = \"MultiSelectContent\"\n\ntype MultiSelectItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> &\n   Partial<MultiSelectOptionItem> & {\n      onSelect?: (value: string, item: MultiSelectOptionItem) => void\n      onDeselect?: (value: string, item: MultiSelectOptionItem) => void\n   }\n\nconst MultiSelectItem = React.forwardRef<\n   React.ElementRef<typeof CommandItem>,\n   MultiSelectItemProps\n>(\n   (\n      {\n         value,\n         onSelect: onSelectProp,\n         onDeselect: onDeselectProp,\n         children,\n         label,\n         disabled: disabledProp,\n         className,\n         ...props\n      },\n      forwardedRef,\n   ) => {\n      const {\n         value: contextValue,\n         maxCount,\n         onSelect,\n         onDeselect,\n         itemCache,\n      } = useMultiSelect()\n\n      const item = React.useMemo(() => {\n         return value\n            ? {\n                 value,\n                 label:\n                    label ||\n                    (typeof children === \"string\" ? children : undefined),\n              }\n            : undefined\n      }, [value, label, children])\n\n      const selected = Boolean(value && contextValue.includes(value))\n\n      React.useEffect(() => {\n         if (value) itemCache.set(value, item!)\n      }, [selected, value, item, itemCache])\n\n      const disabled = Boolean(\n         disabledProp ||\n            (!selected && maxCount && contextValue.length >= maxCount),\n      )\n\n      const handleClick = () => {\n         if (selected) {\n            onDeselectProp?.(value!, item!)\n            onDeselect(value!, item!)\n         } else {\n            itemCache.set(value!, item!)\n            onSelectProp?.(value!, item!)\n            onSelect(value!, item!)\n         }\n      }\n\n      return (\n         <CommandItem\n            {...props}\n            value={value}\n            className={cn(\n               disabled && \"text-muted-foreground cursor-not-allowed\",\n               className,\n            )}\n            disabled={disabled}\n            onSelect={!disabled && value ? handleClick : undefined}\n            ref={forwardedRef}\n         >\n            <span className=\"mr-2 truncate\">{children || label || value}</span>\n            {selected ? <Check className=\"ml-auto size-4 shrink-0\" /> : null}\n         </CommandItem>\n      )\n   },\n)\n\nMultiSelectItem.displayName = \"MultiSelectItem\"\n\nconst MultiSelectGroup = React.forwardRef<\n   React.ElementRef<typeof CommandGroup>,\n   React.ComponentPropsWithoutRef<typeof CommandGroup>\n>((props, forwardRef) => {\n   return <CommandGroup {...props} ref={forwardRef} />\n})\n\nMultiSelectGroup.displayName = \"MultiSelectGroup\"\n\nconst MultiSelectSeparator = React.forwardRef<\n   React.ElementRef<typeof CommandSeparator>,\n   React.ComponentPropsWithoutRef<typeof CommandSeparator>\n>((props, forwardRef) => {\n   return <CommandSeparator {...props} ref={forwardRef} />\n})\n\nMultiSelectSeparator.displayName = \"MultiSelectSeparator\"\n\nconst MultiSelectEmpty = React.forwardRef<\n   React.ElementRef<typeof CommandEmpty>,\n   React.ComponentPropsWithoutRef<typeof CommandEmpty>\n>(({ children = \"No Content\", ...props }, forwardRef) => {\n   return (\n      <CommandEmpty {...props} ref={forwardRef}>\n         {children}\n      </CommandEmpty>\n   )\n})\n\nMultiSelectEmpty.displayName = \"MultiSelectEmpty\"\n\nexport interface MultiSelectOptionSeparator {\n   type: \"separator\"\n}\n\nexport interface MultiSelectOptionGroup {\n   heading?: React.ReactNode\n   value?: string\n   children: MultiSelectOption[]\n}\n\nexport type MultiSelectOption =\n   | Pick<\n        MultiSelectItemProps,\n        \"value\" | \"label\" | \"disabled\" | \"onSelect\" | \"onDeselect\"\n     >\n   | MultiSelectOptionSeparator\n   | MultiSelectOptionGroup\n\nfunction renderMultiSelectOptions(list: MultiSelectOption[]) {\n   return list.map((option, index) => {\n      if (\"type\" in option) {\n         if (option.type === \"separator\")\n            return <MultiSelectSeparator key={index} />\n\n         return null\n      }\n\n      if (\"children\" in option) {\n         return (\n            <MultiSelectGroup\n               key={option.value || index}\n               value={option.value}\n               heading={option.heading}\n            >\n               {renderMultiSelectOptions(option.children)}\n            </MultiSelectGroup>\n         )\n      }\n\n      return (\n         <MultiSelectItem key={option.value} {...option}>\n            {option.label}\n         </MultiSelectItem>\n      )\n   })\n}\n\nexport {\n   MultiSelect,\n   MultiSelectTrigger,\n   MultiSelectValue,\n   MultiSelectSearch,\n   MultiSelectContent,\n   MultiSelectList,\n   MultiSelectItem,\n   MultiSelectGroup,\n   MultiSelectSeparator,\n   MultiSelectEmpty,\n   renderMultiSelectOptions,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/navigation-menu-demo.json b/apps/web/public/v0/styles/miami/navigation-menu-demo.json
new file mode 100644
index 00000000..7d584aae
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/navigation-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "navigation-menu-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport * as React from \"react\"\n\nimport { Icons } from \"@/components/icons\"\nimport { cn } from \"@/lib/utils\"\nimport {\n   NavigationMenu,\n   NavigationMenuContent,\n   NavigationMenuItem,\n   NavigationMenuLink,\n   NavigationMenuList,\n   NavigationMenuTrigger,\n   navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n   {\n      title: \"Alert Dialog\",\n      href: \"/docs/primitives/alert-dialog\",\n      description:\n         \"A modal dialog that interrupts the user with important content and expects a response.\",\n   },\n   {\n      title: \"Hover Card\",\n      href: \"/docs/primitives/hover-card\",\n      description:\n         \"For sighted users to preview content available behind a link.\",\n   },\n   {\n      title: \"Progress\",\n      href: \"/docs/primitives/progress\",\n      description:\n         \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n   },\n   {\n      title: \"Scroll-area\",\n      href: \"/docs/primitives/scroll-area\",\n      description: \"Visually or semantically separates content.\",\n   },\n   {\n      title: \"Tabs\",\n      href: \"/docs/primitives/tabs\",\n      description:\n         \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n   },\n   {\n      title: \"Tooltip\",\n      href: \"/docs/primitives/tooltip\",\n      description:\n         \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n   },\n]\n\nexport default function NavigationMenuDemo() {\n   return (\n      <NavigationMenu>\n         <NavigationMenuList>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                     <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                           <a\n                              className=\"from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md\"\n                              href=\"/\"\n                           >\n                              <Icons.logo className=\"size-6\" />\n                              <div className=\"mb-2 mt-4 text-lg font-medium\">\n                                 nyxb/ui\n                              </div>\n                              <p className=\"text-muted-foreground text-sm leading-tight\">\n                                 Beautifully designed components built with\n                                 Radix UI and Tailwind CSS.\n                              </p>\n                           </a>\n                        </NavigationMenuLink>\n                     </li>\n                     <ListItem href=\"/docs\" title=\"Introduction\">\n                        Re-usable components built using Radix UI and Tailwind\n                        CSS.\n                     </ListItem>\n                     <ListItem href=\"/docs/installation\" title=\"Installation\">\n                        How to install dependencies and structure your app.\n                     </ListItem>\n                     <ListItem\n                        href=\"/docs/primitives/typography\"\n                        title=\"Typography\"\n                     >\n                        Styles for headings, paragraphs, lists...etc\n                     </ListItem>\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                     {components.map((component) => (\n                        <ListItem\n                           key={component.title}\n                           title={component.title}\n                           href={component.href}\n                        >\n                           {component.description}\n                        </ListItem>\n                     ))}\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <Link href=\"/docs\" legacyBehavior passHref>\n                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n                     Documentation\n                  </NavigationMenuLink>\n               </Link>\n            </NavigationMenuItem>\n         </NavigationMenuList>\n      </NavigationMenu>\n   )\n}\n\nconst ListItem = React.forwardRef<\n   React.ElementRef<\"a\">,\n   React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n   return (\n      <li>\n         <NavigationMenuLink asChild>\n            <a\n               ref={ref}\n               className={cn(\n                  \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors\",\n                  className,\n               )}\n               {...props}\n            >\n               <div className=\"text-sm font-medium leading-none\">{title}</div>\n               <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n                  {children}\n               </p>\n            </a>\n         </NavigationMenuLink>\n      </li>\n   )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/navigation-menu.json b/apps/web/public/v0/styles/miami/navigation-menu.json
new file mode 100644
index 00000000..5331b0c9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/navigation-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "navigation-menu",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "ui/navigation-menu.tsx",
+      "content": "import { ChevronDownIcon } from \"@radix-ui/react-icons\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <NavigationMenuPrimitive.Root\n      ref={ref}\n      className={cn(\n         \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n      <NavigationMenuViewport />\n   </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.List\n      ref={ref}\n      className={cn(\n         \"group flex flex-1 list-none items-center justify-center space-x-1\",\n         className,\n      )}\n      {...props}\n   />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n   \"group inline-flex h-9 w-max items-center justify-center text-foreground/60 rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50\",\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <NavigationMenuPrimitive.Trigger\n      ref={ref}\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n   >\n      {children}{\" \"}\n      <ChevronDownIcon\n         className=\"relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n         aria-hidden=\"true\"\n      />\n   </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.Content\n      ref={ref}\n      className={cn(\n         \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto \",\n         className,\n      )}\n      {...props}\n   />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n   <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n         className={cn(\n            \"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]\",\n            className,\n         )}\n         ref={ref}\n         {...props}\n      />\n   </div>\n))\nNavigationMenuViewport.displayName =\n   NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n   <NavigationMenuPrimitive.Indicator\n      ref={ref}\n      className={cn(\n         \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n         className,\n      )}\n      {...props}\n   >\n      <div className=\"bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md\" />\n   </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n   NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n   navigationMenuTriggerStyle,\n   NavigationMenu,\n   NavigationMenuList,\n   NavigationMenuItem,\n   NavigationMenuContent,\n   NavigationMenuTrigger,\n   NavigationMenuLink,\n   NavigationMenuIndicator,\n   NavigationMenuViewport,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/neon-gradient-card-demo.json b/apps/web/public/v0/styles/miami/neon-gradient-card-demo.json
new file mode 100644
index 00000000..ca4dfd7e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/neon-gradient-card-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "neon-gradient-card-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/neon-gradient-card-demo.tsx",
+      "content": "import { NeonGradientCard } from \"@/components/ui/neon-gradient-card\"\n\nexport default function NeonGradientCardDemo() {\n   return (\n      <NeonGradientCard className=\"max-w-sm items-center justify-center text-center\">\n         <span className=\"pointer-events-none z-10 h-full whitespace-pre-wrap bg-gradient-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-6xl font-bold leading-none tracking-tighter text-transparent dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]\">\n            Neon Gradient Card\n         </span>\n      </NeonGradientCard>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/neon-gradient-card.json b/apps/web/public/v0/styles/miami/neon-gradient-card.json
new file mode 100644
index 00000000..54f4ca78
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/neon-gradient-card.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "neon-gradient-card",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/neon-gradient-card.tsx",
+      "content": "\"use client\"\n\nimport type { CSSProperties, ReactElement, ReactNode } from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface NeonColorsProps {\n   firstColor: string\n   secondColor: string\n}\n\ninterface NeonGradientCardProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the card\n    */\n   as?: ReactElement\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the card\n    */\n   className?: string\n\n   /**\n    * @default \"\"\n    * @type ReactNode\n    * @description\n    * The children of the card\n    */\n   children?: ReactNode\n\n   /**\n    * @default 5\n    * @type number\n    * @description\n    * The size of the border in pixels\n    */\n   borderSize?: number\n\n   /**\n    * @default 20\n    * @type number\n    * @description\n    * The size of the radius in pixels\n    */\n   borderRadius?: number\n\n   /**\n    * @default \"{ firstColor: '#ff00aa', secondColor: '#00FFF1' }\"\n    * @type string\n    * @description\n    * The colors of the neon gradient\n    */\n   neonColors?: NeonColorsProps\n\n   [key: string]: any\n}\n\nconst NeonGradientCard: React.FC<NeonGradientCardProps> = ({\n   className,\n   children,\n   borderSize = 2,\n   borderRadius = 20,\n   neonColors = {\n      firstColor: \"#ff00aa\",\n      secondColor: \"#00FFF1\",\n   },\n   ...props\n}) => {\n   const containerRef = useRef<HTMLDivElement>(null)\n   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n   useEffect(() => {\n      const updateDimensions = () => {\n         if (containerRef.current) {\n            const { offsetWidth, offsetHeight } = containerRef.current\n            setDimensions({ width: offsetWidth, height: offsetHeight })\n         }\n      }\n\n      updateDimensions()\n      window.addEventListener(\"resize\", updateDimensions)\n\n      return () => {\n         window.removeEventListener(\"resize\", updateDimensions)\n      }\n   }, [])\n\n   useEffect(() => {\n      if (containerRef.current) {\n         const { offsetWidth, offsetHeight } = containerRef.current\n         setDimensions({ width: offsetWidth, height: offsetHeight })\n      }\n   }, [children])\n\n   return (\n      <div\n         ref={containerRef}\n         style={\n            {\n               \"--border-size\": `${borderSize}px`,\n               \"--border-radius\": `${borderRadius}px`,\n               \"--neon-first-color\": neonColors.firstColor,\n               \"--neon-second-color\": neonColors.secondColor,\n               \"--card-width\": `${dimensions.width}px`,\n               \"--card-height\": `${dimensions.height}px`,\n               \"--card-content-radius\": `${borderRadius - borderSize}px`,\n               \"--pseudo-element-background-image\": `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,\n               \"--pseudo-element-width\": `${dimensions.width + borderSize * 2}px`,\n               \"--pseudo-element-height\": `${dimensions.height + borderSize * 2}px`,\n               \"--after-blur\": `${dimensions.width / 3}px`,\n            } as CSSProperties\n         }\n         className={cn(\n            \"relative z-10 size-full rounded-[var(--border-radius)]\",\n            className,\n         )}\n         {...props}\n      >\n         <div\n            className={cn(\n               \"relative size-full min-h-[inherit] rounded-[var(--card-content-radius)] bg-gray-100 p-6\",\n               \"before:absolute before:-left-[var(--border-size)] before:-top-[var(--border-size)] before:-z-10 before:block\",\n               \"before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-['']\",\n               \"before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-[length:100%_200%]\",\n               \"before:animate-background-position-spin\",\n               \"after:absolute after:-left-[var(--border-size)] after:-top-[var(--border-size)] after:-z-10 after:block\",\n               \"after:h-[var(--pseudo-element-height)] after:w-[var(--pseudo-element-width)] after:rounded-[var(--border-radius)] after:blur-[var(--after-blur)] after:content-['']\",\n               \"after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80\",\n               \"after:animate-background-position-spin\",\n               \"dark:bg-neutral-900\",\n            )}\n         >\n            {children}\n         </div>\n      </div>\n   )\n}\n\nexport { NeonGradientCard }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "background-position-spin": "background-position-spin 3000ms infinite alternate"
+          },
+          "keyframes": {
+            "background-position-spin": {
+              "0%": {
+                "backgroundPosition": "top center"
+              },
+              "100%": {
+                "backgroundPosition": "bottom center"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/number-ticker-demo.json b/apps/web/public/v0/styles/miami/number-ticker-demo.json
new file mode 100644
index 00000000..9f74879c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/number-ticker-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "number-ticker-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/number-ticker-demo.tsx",
+      "content": "import NumberTicker from \"@/components/ui/number-ticker\"\n\nfunction NumberTickerDemo() {\n   return (\n      <p className=\"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white\">\n         <NumberTicker value={100} />\n      </p>\n   )\n}\n\nexport default NumberTickerDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/number-ticker.json b/apps/web/public/v0/styles/miami/number-ticker.json
new file mode 100644
index 00000000..349a0d9a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/number-ticker.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "number-ticker",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/number-ticker.tsx",
+      "content": "\"use client\"\n\nimport { useInView, useMotionValue, useSpring } from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport default function NumberTicker({\n   value,\n   direction = \"up\",\n   delay = 0,\n   className,\n}: {\n   value: number\n   direction?: \"up\" | \"down\"\n   className?: string\n   delay?: number // delay in s\n}) {\n   const ref = useRef<HTMLSpanElement>(null)\n   const motionValue = useMotionValue(direction === \"down\" ? value : 0)\n   const springValue = useSpring(motionValue, {\n      damping: 60,\n      stiffness: 100,\n   })\n   const isInView = useInView(ref, { once: true, margin: \"0px\" })\n\n   useEffect(() => {\n      isInView &&\n         setTimeout(() => {\n            motionValue.set(direction === \"down\" ? 0 : value)\n         }, delay * 1000)\n   }, [motionValue, isInView, delay, value, direction])\n\n   useEffect(\n      () =>\n         springValue.on(\"change\", (latest) => {\n            if (ref.current) {\n               ref.current.textContent = Intl.NumberFormat(\"en-US\").format(\n                  Math.round(latest),\n               )\n            }\n         }),\n      [springValue],\n   )\n\n   return (\n      <span\n         className={cn(\n            \"inline-block tabular-nums tracking-wider text-black dark:text-white\",\n            className,\n         )}\n         ref={ref}\n      />\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/nyx-toc-demo.json b/apps/web/public/v0/styles/miami/nyx-toc-demo.json
new file mode 100644
index 00000000..050d25b6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/nyx-toc-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "nyx-toc-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/nyx-toc-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { NyxTOCItems } from \"@/components/ui/nyx-toc\"\n\nconst demoItems = [\n   {\n      title: \"Introduction\",\n      url: \"#introduction\",\n      depth: 1,\n   },\n   {\n      title: \"Getting Started\",\n      url: \"#getting-started\",\n      depth: 2,\n   },\n   {\n      title: \"Installation\",\n      url: \"#installation\",\n      depth: 3,\n   },\n   {\n      title: \"Basic Usage\",\n      url: \"#basic-usage\",\n      depth: 3,\n   },\n   {\n      title: \"Advanced Features\",\n      url: \"#advanced-features\",\n      depth: 2,\n   },\n   {\n      title: \"API Reference\",\n      url: \"#api-reference\",\n      depth: 2,\n   },\n]\n\nexport default function NyxTOCDemo() {\n   return (\n      <div className=\"flex gap-10\">\n         <div className=\"flex-1\">\n            <NyxTOCItems items={demoItems} label=\"On This Page\" />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/nyx-toc-popover-demo.json b/apps/web/public/v0/styles/miami/nyx-toc-popover-demo.json
new file mode 100644
index 00000000..f816ff1e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/nyx-toc-popover-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "nyx-toc-popover-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/nyx-toc-popover-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n   NyxTOCItems,\n   TocPopover,\n   TocPopoverContent,\n   TocPopoverTrigger,\n} from \"@/components/ui/nyx-toc\"\n\nexport default function NyxTOCPopoverDemo() {\n   // Example TOC items\n   const items = [\n      { title: \"Introduction\", url: \"#introduction\", depth: 1 },\n      { title: \"Getting Started\", url: \"#getting-started\", depth: 2 },\n      { title: \"Installation\", url: \"#installation\", depth: 2 },\n      { title: \"Basic Usage\", url: \"#basic-usage\", depth: 3 },\n      { title: \"Advanced Features\", url: \"#advanced-features\", depth: 2 },\n      { title: \"Configuration\", url: \"#configuration\", depth: 3 },\n      { title: \"Customization\", url: \"#customization\", depth: 2 },\n   ]\n\n   return (\n      <div className=\"flex h-[300px] w-full items-start justify-center p-6\">\n         <TocPopover>\n            <TocPopoverTrigger\n               items={items}\n               className=\"hover:bg-accent rounded-md border\"\n            />\n            <TocPopoverContent>\n               <NyxTOCItems items={items} isMenu label=\"On This Page\" />\n            </TocPopoverContent>\n         </TocPopover>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/nyx-toc.json b/apps/web/public/v0/styles/miami/nyx-toc.json
new file mode 100644
index 00000000..99b2b001
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/nyx-toc.json
@@ -0,0 +1,59 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "nyx-toc",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-icons",
+    "@radix-ui/react-popover",
+    "@radix-ui/react-scroll-area",
+    "scroll-into-view-if-needed"
+  ],
+  "registryDependencies": [
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "ui/nyx-toc.tsx",
+      "content": "\"use client\"\n\nimport type {\n   PopoverContentProps,\n   PopoverTriggerProps,\n} from \"@radix-ui/react-popover\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport { AlignLeft, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\nimport type {\n   AnchorHTMLAttributes,\n   HTMLAttributes,\n   ReactNode,\n   RefObject,\n} from \"react\"\nimport {\n   createContext,\n   forwardRef,\n   useContext,\n   useEffect,\n   useMemo,\n   useRef,\n   useState,\n} from \"react\"\nimport scrollIntoView from \"scroll-into-view-if-needed\"\nimport { useAnchorObserver } from \"@/hooks/use-anchor-observer\"\nimport { useOnChange } from \"@/hooks/use-on-change\"\nimport { cn } from \"@/lib/utils\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\n// #region Types\nexport interface TOCItemType {\n   title: ReactNode\n   url: string\n   depth: number\n}\n\nexport type TableOfContents = TOCItemType[]\nexport type TOCThumb = [top: number, height: number]\n\nexport interface TOCProps {\n   header?: ReactNode\n   footer?: ReactNode\n   children: ReactNode\n}\n\nexport interface PageStyles {\n   tocNav?: string\n   toc?: string\n   page?: string\n   article?: string\n}\n\nexport interface TOCItemProps\n   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> {\n   href: string\n\n   onActiveChange?: (v: boolean) => void\n}\n\n// #region Components\nconst ScrollArea = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={cn(\"overflow-hidden\", className)}\n      {...props}\n   >\n      {children}\n      <ScrollAreaPrimitive.Corner />\n      <ScrollBar orientation=\"vertical\" />\n   </ScrollAreaPrimitive.Root>\n))\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollViewport = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Viewport>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={cn(\"size-full rounded-[inherit]\", className)}\n      {...props}\n   >\n      {children}\n   </ScrollAreaPrimitive.Viewport>\n))\n\nScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName\n\nconst ScrollBar = React.forwardRef<\n   React.ComponentRef<typeof ScrollAreaPrimitive.Scrollbar>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n   <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      orientation={orientation}\n      className={cn(\n         \"data-[state=hidden]:animate-fd-fade-out flex select-none\",\n         orientation === \"vertical\" && \"h-full w-1.5\",\n         orientation === \"horizontal\" && \"h-1.5 flex-col\",\n         className,\n      )}\n      {...props}\n   >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-fd-border relative flex-1 rounded-full\" />\n   </ScrollAreaPrimitive.Scrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName\n\nexport { ScrollArea, ScrollBar, ScrollViewport }\n\n// #region Contexts\nconst ActiveAnchorContext = createContext<string[]>([])\nconst ScrollContext = createContext<RefObject<HTMLElement | null>>({\n   current: null,\n})\nconst StylesContext = createContext<PageStyles>({\n   tocNav: \"xl:hidden\",\n   toc: \"max-xl:hidden\",\n})\n\n// #region Hooks\nfunction useActiveAnchor(): string | undefined {\n   return useContext(ActiveAnchorContext).at(-1)\n}\n\nfunction useActiveAnchors(): string[] {\n   return useContext(ActiveAnchorContext)\n}\n\nfunction usePageStyles() {\n   return useContext(StylesContext)\n}\n\n// #region Utility Functions\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b))\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   return a !== b\n}\n\nfunction mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\n   return (value) => {\n      refs.forEach((ref) => {\n         if (typeof ref === \"function\") ref(value)\n         else if (ref !== null && typeof ref === \"object\")\n            (ref as React.MutableRefObject<T | null>).current = value\n      })\n   }\n}\n\nfunction getItemOffset(depth: number): number {\n   if (depth <= 2) return 14\n   if (depth === 3) return 26\n   return 36\n}\n\nfunction getLineOffset(depth: number): number {\n   return depth >= 3 ? 10 : 0\n}\n\n// #region Components\nexport function ScrollProvider({\n   containerRef,\n   children,\n}: {\n   containerRef: RefObject<HTMLElement | null>\n   children?: ReactNode\n}): React.ReactElement {\n   return (\n      <ScrollContext.Provider value={containerRef}>\n         {children}\n      </ScrollContext.Provider>\n   )\n}\n\nexport function AnchorProvider({\n   toc,\n   single = true,\n   children,\n}: {\n   toc: TableOfContents\n   single?: boolean\n   children?: ReactNode\n}): React.ReactElement {\n   const headings = useMemo(() => {\n      return toc.map((item) => item.url.split(\"#\")[1])\n   }, [toc])\n\n   return (\n      <ActiveAnchorContext.Provider value={useAnchorObserver(headings, single)}>\n         {children}\n      </ActiveAnchorContext.Provider>\n   )\n}\n\nexport const TOCItem = forwardRef<HTMLAnchorElement, TOCItemProps>(\n   ({ onActiveChange, ...props }, ref) => {\n      const containerRef = useContext(ScrollContext)\n      const anchors = useActiveAnchors()\n      const anchorRef = useRef<HTMLAnchorElement>(null)\n      const mergedRef = mergeRefs(anchorRef, ref)\n\n      const isActive = anchors.includes(props.href.slice(1))\n\n      useOnChange(isActive, (v) => {\n         const element = anchorRef.current\n         if (!element) return\n\n         if (v && containerRef.current) {\n            scrollIntoView(element, {\n               behavior: \"smooth\",\n               block: \"center\",\n               inline: \"center\",\n               scrollMode: \"always\",\n               boundary: containerRef.current,\n            })\n         }\n\n         onActiveChange?.(v)\n      })\n\n      return (\n         <a ref={mergedRef} data-active={isActive} {...props}>\n            {props.children}\n         </a>\n      )\n   },\n)\n\nTOCItem.displayName = \"TOCItem\"\n\nexport function TocThumb({\n   containerRef,\n   ...props\n}: HTMLAttributes<HTMLDivElement> & {\n   containerRef: RefObject<HTMLElement | null>\n}): ReactNode {\n   const active = useActiveAnchors()\n   const thumbRef = useRef<HTMLDivElement>(null)\n   const activeRef = useRef(active)\n   activeRef.current = active\n\n   function calc(container: HTMLElement, active: string[]): TOCThumb {\n      if (active.length === 0 || container.clientHeight === 0) return [0, 0]\n\n      let upper = Number.MAX_VALUE\n      let lower = 0\n\n      for (const item of active) {\n         const element = container.querySelector<HTMLElement>(\n            `a[href=\"#${item}\"]`,\n         )\n         if (!element) continue\n\n         const styles = getComputedStyle(element)\n         upper = Math.min(\n            upper,\n            element.offsetTop + Number.parseFloat(styles.paddingTop),\n         )\n         lower = Math.max(\n            lower,\n            element.offsetTop +\n               element.clientHeight -\n               Number.parseFloat(styles.paddingBottom),\n         )\n      }\n\n      return [upper, lower - upper]\n   }\n\n   function update(element: HTMLElement, info: TOCThumb): void {\n      element.style.setProperty(\"--nyx-top\", `${info[0]}px`)\n      element.style.setProperty(\"--nyx-height\", `${info[1]}px`)\n   }\n\n   useEffect(() => {\n      if (!containerRef.current) return\n      const container = containerRef.current\n\n      const onResize = (): void => {\n         if (!thumbRef.current) return\n         update(thumbRef.current, calc(container, activeRef.current))\n      }\n\n      onResize()\n      const observer = new ResizeObserver(onResize)\n      observer.observe(container)\n\n      return () => {\n         observer.disconnect()\n      }\n   }, [containerRef])\n\n   useOnChange(active, () => {\n      if (!containerRef.current || !thumbRef.current) return\n\n      update(thumbRef.current, calc(containerRef.current, active))\n   })\n\n   return <div ref={thumbRef} role=\"none\" {...props} />\n}\n\nexport function TocItemsEmpty() {\n   return (\n      <div className=\"bg-card text-muted-foreground rounded-lg border p-3 text-xs\">\n         No headings found\n      </div>\n   )\n}\n\nexport function Toc(props: HTMLAttributes<HTMLDivElement>) {\n   const { toc } = usePageStyles()\n\n   return (\n      <div\n         id=\"nyx-toc\"\n         {...props}\n         className={cn(\n            \"top-nyx-layout-top sticky h-[var(--nyx-toc-height)] pb-2 pt-12\",\n            toc,\n            props.className,\n         )}\n         style={\n            {\n               ...props.style,\n               \"--nyx-toc-height\":\n                  \"calc(100dvh - var(--nyx-banner-height) - var(--nyx-nav-height))\",\n            } as any\n         }\n      >\n         <div className=\"flex h-full w-[var(--nyx-width)] max-w-full flex-col gap-3 pe-4\">\n            {props.children}\n         </div>\n      </div>\n   )\n}\n\n// Main Component\nexport function NyxTOCItems({\n   items,\n   isMenu = false,\n   label,\n}: {\n   items: TOCItemType[]\n   isMenu?: boolean\n   label?: ReactNode\n}) {\n   const viewRef = useRef<HTMLDivElement>(null)\n   const containerRef = useRef<HTMLDivElement>(null)\n\n   const [svg, setSvg] = useState<{\n      path: string\n      width: number\n      height: number\n   }>()\n\n   useEffect(() => {\n      if (!containerRef.current) return\n      const container = containerRef.current\n\n      function onResize(): void {\n         if (container.clientHeight === 0) return\n         let w = 0\n         let h = 0\n         const d: string[] = []\n         for (let i = 0; i < items.length; i++) {\n            const element: HTMLElement | null = container.querySelector(\n               `a[href=\"#${items[i].url.slice(1)}\"]`,\n            )\n            if (!element) continue\n\n            const styles = getComputedStyle(element)\n            const offset = getLineOffset(items[i].depth) + 1\n            const top = element.offsetTop + Number.parseFloat(styles.paddingTop)\n            const bottom =\n               element.offsetTop +\n               element.clientHeight -\n               Number.parseFloat(styles.paddingBottom)\n\n            w = Math.max(offset, w)\n            h = Math.max(h, bottom)\n\n            d.push(`${i === 0 ? \"M\" : \"L\"}${offset} ${top}`)\n            d.push(`L${offset} ${bottom}`)\n         }\n\n         setSvg({\n            path: d.join(\" \"),\n            width: w + 1,\n            height: h,\n         })\n      }\n\n      const observer = new ResizeObserver(onResize)\n      onResize()\n      observer.observe(container)\n      return () => observer.disconnect()\n   }, [items])\n\n   if (items.length === 0) return <TocItemsEmpty />\n\n   return (\n      <>\n         {label && (\n            <h3 className=\"text-muted-foreground -ms-0.5 inline-flex items-center gap-1.5 text-sm\">\n               <AlignLeft className=\"size-4\" />\n               {label}\n            </h3>\n         )}\n         <ScrollArea className={cn(\"flex flex-col\", isMenu && \"-ms-3\")}>\n            <ScrollViewport className=\"relative min-h-0\" ref={viewRef}>\n               {svg ? (\n                  <div\n                     className=\"absolute start-0 top-0 rtl:-scale-x-100\"\n                     style={{\n                        width: svg.width,\n                        height: svg.height,\n                        maskImage: `url(\"data:image/svg+xml,${\n                           // Inline SVG\n                           encodeURIComponent(\n                              `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ${svg.width} ${svg.height}\"><path d=\"${svg.path}\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" /></svg>`,\n                           )\n                        }\")`,\n                     }}\n                  >\n                     <TocThumb\n                        containerRef={containerRef}\n                        className=\"bg-primary mt-[var(--nyx-top)] h-[var(--nyx-height)] transition-all\"\n                     />\n                  </div>\n               ) : null}\n               <ScrollProvider containerRef={viewRef}>\n                  <div className=\"flex flex-col\" ref={containerRef}>\n                     {items.map((item, i) => (\n                        <LocalTOCItem\n                           key={item.url}\n                           item={item}\n                           upper={items[i - 1]?.depth}\n                           lower={items[i + 1]?.depth}\n                        />\n                     ))}\n                  </div>\n               </ScrollProvider>\n            </ScrollViewport>\n         </ScrollArea>\n      </>\n   )\n}\n\n// Popover Components\nexport const TocPopover = Popover\n\nexport function TocPopoverTrigger({\n   items,\n   ...props\n}: PopoverTriggerProps & { items: TOCItemType[] }) {\n   const active = useActiveAnchor()\n   const current = useMemo(() => {\n      return items.find((item) => active === item.url.slice(1))?.title\n   }, [items, active])\n\n   return (\n      <PopoverTrigger\n         {...props}\n         className={cn(\n            \"inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start\",\n            props.className,\n         )}\n      >\n         <AlignLeft className=\"size-4 shrink-0\" />\n         Table of Contents\n         {current && (\n            <>\n               <ChevronRight className=\"text-muted-foreground -mx-1.5 size-4 shrink-0\" />\n               <span className=\"text-muted-foreground truncate\">{current}</span>\n            </>\n         )}\n      </PopoverTrigger>\n   )\n}\n\nexport function TocPopoverContent(props: PopoverContentProps) {\n   return (\n      <PopoverContent\n         hideWhenDetached\n         alignOffset={16}\n         align=\"start\"\n         side=\"bottom\"\n         data-toc-popover=\"\"\n         {...props}\n         className={cn(\n            \"flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3\",\n            props.className,\n         )}\n      >\n         {props.children}\n      </PopoverContent>\n   )\n}\n\nfunction LocalTOCItem({\n   item,\n   upper = item.depth,\n   lower = item.depth,\n}: {\n   item: TOCItemType\n   upper?: number\n   lower?: number\n}) {\n   const offset = getLineOffset(item.depth)\n   const upperOffset = getLineOffset(upper)\n   const lowerOffset = getLineOffset(lower)\n\n   return (\n      <TOCItem\n         href={item.url}\n         style={{\n            paddingInlineStart: getItemOffset(item.depth),\n         }}\n         className=\"prose text-muted-foreground data-[active=true]:text-primary relative py-1.5 text-sm transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0\"\n      >\n         {offset !== upperOffset ? (\n            <svg\n               xmlns=\"http://www.w3.org/2000/svg\"\n               viewBox=\"0 0 16 16\"\n               className=\"absolute -top-1.5 start-0 size-4 rtl:-scale-x-100\"\n            >\n               <line\n                  x1={upperOffset}\n                  y1=\"0\"\n                  x2={offset}\n                  y2=\"12\"\n                  className=\"stroke-foreground/10\"\n                  strokeWidth=\"1\"\n               />\n            </svg>\n         ) : null}\n         <div\n            className={cn(\n               \"bg-foreground/10 absolute inset-y-0 w-px\",\n               offset !== upperOffset && \"top-1.5\",\n               offset !== lowerOffset && \"bottom-1.5\",\n            )}\n            style={{\n               insetInlineStart: offset,\n            }}\n         />\n         {item.title}\n      </TOCItem>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "hooks/use-anchor-observer.ts",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\n/**\n * Find the active heading of page\n *\n * It selects the top heading by default, and the last item when reached the bottom of page.\n *\n * @param watch - An array of element ids to watch\n * @param single - only one active item at most\n * @returns Active anchor\n */\nexport function useAnchorObserver(watch: string[], single: boolean): string[] {\n   const [activeAnchor, setActiveAnchor] = useState<string[]>([])\n\n   useEffect(() => {\n      let visible: string[] = []\n      const observer = new IntersectionObserver(\n         (entries) => {\n            for (const entry of entries) {\n               if (entry.isIntersecting && !visible.includes(entry.target.id)) {\n                  visible = [...visible, entry.target.id]\n               } else if (\n                  !entry.isIntersecting &&\n                  visible.includes(entry.target.id)\n               ) {\n                  visible = visible.filter((v) => v !== entry.target.id)\n               }\n            }\n\n            if (visible.length > 0) setActiveAnchor(visible)\n         },\n         {\n            rootMargin: single ? \"-80px 0% -70% 0%\" : `-20px 0% -40% 0%`,\n            threshold: 1,\n         },\n      )\n\n      function onScroll(): void {\n         const element = document.scrollingElement\n         if (!element) return\n\n         if (element.scrollTop === 0 && single) {\n            setActiveAnchor(watch.slice(0, 1))\n         } else if (\n            element.scrollTop + element.clientHeight >=\n            element.scrollHeight - 6\n         ) {\n            setActiveAnchor((active) => {\n               return active.length > 0 && !single\n                  ? watch.slice(watch.indexOf(active[0]))\n                  : watch.slice(-1)\n            })\n         }\n      }\n\n      for (const heading of watch) {\n         const element = document.getElementById(heading)\n\n         if (element) observer.observe(element)\n      }\n\n      onScroll()\n      window.addEventListener(\"scroll\", onScroll)\n      return () => {\n         window.removeEventListener(\"scroll\", onScroll)\n         observer.disconnect()\n      }\n   }, [single, watch])\n\n   return single ? activeAnchor.slice(0, 1) : activeAnchor\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    },
+    {
+      "path": "hooks/use-on-change.ts",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b)) {\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   }\n\n   return a !== b\n}\n\n/**\n * @param value - state to watch\n * @param onChange - when the state changed\n * @param isUpdated - a function that determines if the state is updated\n */\nexport function useOnChange<T>(\n   value: T,\n   onChange: (current: T, previous: T) => void,\n   isUpdated: (prev: T, current: T) => boolean = isDifferent,\n): void {\n   const [prev, setPrev] = useState<T>(value)\n\n   if (isUpdated(prev, value)) {\n      onChange(value, prev)\n      setPrev(value)\n   }\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "nyx-fade-out": "nyx-fade-out 0.2s ease-out"
+          },
+          "keyframes": {
+            "nyx-fade-out": {
+              "0%": {
+                "opacity": "1"
+              },
+              "100%": {
+                "opacity": "0"
+              }
+            }
+          }
+        },
+        "spacing": {
+          "nyx-layout-top": "calc(var(--nyx-banner-height) + var(--nyx-nav-height))"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/orbiting-circles-demo.json b/apps/web/public/v0/styles/miami/orbiting-circles-demo.json
new file mode 100644
index 00000000..6a1c3da2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/orbiting-circles-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "orbiting-circles-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/orbiting-circles-demo.tsx",
+      "content": "import OrbitingCircles from \"@/components/ui/orbiting-circles\"\n\nexport default function OrbitingCirclesDemo() {\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Circles\n         </span>\n\n         {/* Inner Circles */}\n         <OrbitingCircles\n            className=\"size-[30px] border-none bg-transparent\"\n            duration={20}\n            delay={20}\n            radius={80}\n         >\n            <Icons.whatsapp />\n         </OrbitingCircles>\n         <OrbitingCircles\n            className=\"size-[30px] border-none bg-transparent\"\n            duration={20}\n            delay={10}\n            radius={80}\n         >\n            <Icons.notion />\n         </OrbitingCircles>\n\n         {/* Outer Circles (reverse) */}\n         <OrbitingCircles\n            className=\"size-[50px] border-none bg-transparent\"\n            radius={190}\n            duration={20}\n            reverse\n         >\n            <Icons.googleDrive />\n         </OrbitingCircles>\n         <OrbitingCircles\n            className=\"size-[50px] border-none bg-transparent\"\n            radius={190}\n            duration={20}\n            delay={20}\n            reverse\n         >\n            <Icons.gitHub />\n         </OrbitingCircles>\n      </div>\n   )\n}\n\nconst Icons = {\n   gitHub: () => (\n      <svg width=\"100\" height=\"100\" viewBox=\"0 0 438.549 438.549\">\n         <path\n            fill=\"currentColor\"\n            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n         />\n      </svg>\n   ),\n   notion: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 100 100\"\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z\"\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n         />\n      </svg>\n   ),\n   openai: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 24 24\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n      </svg>\n   ),\n   googleDrive: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 87.3 78\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n            fill=\"#0066da\"\n         />\n         <path\n            d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n            fill=\"#00ac47\"\n         />\n         <path\n            d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n            fill=\"#ea4335\"\n         />\n         <path\n            d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n            fill=\"#00832d\"\n         />\n         <path\n            d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n            fill=\"#2684fc\"\n         />\n         <path\n            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n            fill=\"#ffba00\"\n         />\n      </svg>\n   ),\n   whatsapp: () => (\n      <svg\n         width=\"100\"\n         height=\"100\"\n         viewBox=\"0 0 175.216 175.552\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <defs>\n            <linearGradient\n               id=\"b\"\n               x1=\"85.915\"\n               x2=\"86.535\"\n               y1=\"32.567\"\n               y2=\"137.092\"\n               gradientUnits=\"userSpaceOnUse\"\n            >\n               <stop offset=\"0\" stopColor=\"#57d163\" />\n               <stop offset=\"1\" stopColor=\"#23b33a\" />\n            </linearGradient>\n            <filter\n               id=\"a\"\n               width=\"1.115\"\n               height=\"1.114\"\n               x=\"-.057\"\n               y=\"-.057\"\n               colorInterpolationFilters=\"sRGB\"\n            >\n               <feGaussianBlur stdDeviation=\"3.531\" />\n            </filter>\n         </defs>\n         <path\n            d=\"m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0\"\n            fill=\"#b3b3b3\"\n            filter=\"url(#a)\"\n         />\n         <path\n            d=\"m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z\"\n            fill=\"#ffffff\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z\"\n            fill=\"url(#linearGradient1780)\"\n         />\n         <path\n            d=\"M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z\"\n            fill=\"url(#b)\"\n         />\n         <path\n            d=\"M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n         />\n      </svg>\n   ),\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/orbiting-circles.json b/apps/web/public/v0/styles/miami/orbiting-circles.json
new file mode 100644
index 00000000..6157d9e7
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/orbiting-circles.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "orbiting-circles",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/orbiting-circles.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nexport default function OrbitingCircles({\n   className,\n   children,\n   reverse,\n   duration = 20,\n   delay = 10,\n   radius = 50,\n   path = true,\n}: {\n   className?: string\n   children?: React.ReactNode\n   reverse?: boolean\n   duration?: number\n   delay?: number\n   radius?: number\n   path?: boolean\n}) {\n   return (\n      <>\n         {path && (\n            <svg\n               xmlns=\"http://www.w3.org/2000/svg\"\n               version=\"1.1\"\n               className=\"pointer-events-none absolute inset-0 size-full\"\n            >\n               <circle\n                  className=\"stroke-black/10 stroke-1 dark:stroke-white/10\"\n                  cx=\"50%\"\n                  cy=\"50%\"\n                  r={radius}\n                  fill=\"none\"\n                  strokeDasharray=\"4 4\"\n               />\n            </svg>\n         )}\n\n         <div\n            style={\n               {\n                  \"--duration\": duration,\n                  \"--radius\": radius,\n                  \"--delay\": -delay,\n               } as React.CSSProperties\n            }\n            className={cn(\n               \"animate-orbit absolute flex size-full transform-gpu items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10\",\n               { \"[animation-direction:reverse]\": reverse },\n               className,\n            )}\n         >\n            {children}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "orbit": "orbit calc(var(--duration)*1s) linear infinite"
+          },
+          "keyframes": {
+            "orbit": {
+              "0%": {
+                "transform": "rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)"
+              },
+              "100%": {
+                "transform": "rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/pagination-demo.json b/apps/web/public/v0/styles/miami/pagination-demo.json
new file mode 100644
index 00000000..b22bc37a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/pagination-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "pagination-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "pagination"
+  ],
+  "files": [
+    {
+      "path": "examples/pagination-demo.tsx",
+      "content": "import {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n} from \"@/components/ui/pagination\"\n\nexport default function PaginationDemo() {\n   return (\n      <Pagination>\n         <PaginationContent>\n            <PaginationItem>\n               <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\" isActive>\n                  2\n               </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationNext href=\"#\" />\n            </PaginationItem>\n         </PaginationContent>\n      </Pagination>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/pagination.json b/apps/web/public/v0/styles/miami/pagination.json
new file mode 100644
index 00000000..6a1a868c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/pagination.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "pagination",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/pagination.tsx",
+      "content": "import {\n   ChevronLeftIcon,\n   ChevronRightIcon,\n   DotsHorizontalIcon,\n} from \"@radix-ui/react-icons\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { ButtonProps } from \"@/components/ui/button\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n   return (\n      <nav\n         role=\"navigation\"\n         aria-label=\"pagination\"\n         className={cn(\"mx-auto flex w-full justify-center\", className)}\n         {...props}\n      />\n   )\n}\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n   />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n   <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n   isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n   React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n   className,\n   isActive,\n   size = \"icon\",\n   ...props\n}: PaginationLinkProps) {\n   return (\n      <a\n         aria-current={isActive ? \"page\" : undefined}\n         className={cn(\n            buttonVariants({\n               variant: isActive ? \"outline\" : \"ghost\",\n               size,\n            }),\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nPaginationLink.displayName = \"PaginationLink\"\n\nfunction PaginationPrevious({\n   className,\n   ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n   return (\n      <PaginationLink\n         aria-label=\"Go to previous page\"\n         size=\"default\"\n         className={cn(\"gap-1 pl-2.5\", className)}\n         {...props}\n      >\n         <ChevronLeftIcon className=\"size-4\" />\n         <span>Previous</span>\n      </PaginationLink>\n   )\n}\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nfunction PaginationNext({\n   className,\n   ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n   return (\n      <PaginationLink\n         aria-label=\"Go to next page\"\n         size=\"default\"\n         className={cn(\"gap-1 pr-2.5\", className)}\n         {...props}\n      >\n         <span>Next</span>\n         <ChevronRightIcon className=\"size-4\" />\n      </PaginationLink>\n   )\n}\nPaginationNext.displayName = \"PaginationNext\"\n\nfunction PaginationEllipsis({\n   className,\n   ...props\n}: React.ComponentProps<\"span\">) {\n   return (\n      <span\n         aria-hidden\n         className={cn(\"flex size-9 items-center justify-center\", className)}\n         {...props}\n      >\n         <DotsHorizontalIcon className=\"size-4\" />\n         <span className=\"sr-only\">More pages</span>\n      </span>\n   )\n}\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n   Pagination,\n   PaginationContent,\n   PaginationLink,\n   PaginationItem,\n   PaginationPrevious,\n   PaginationNext,\n   PaginationEllipsis,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/particles-demo.json b/apps/web/public/v0/styles/miami/particles-demo.json
new file mode 100644
index 00000000..06bef83b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/particles-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "particles-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/particles-demo.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { useEffect, useState } from \"react\"\nimport Particles from \"@/components/ui/particles\"\n\nfunction ParticlesDemo() {\n   const { theme } = useTheme()\n   const [color, setColor] = useState(\"#ffffff\")\n\n   useEffect(() => {\n      setColor(theme === \"dark\" ? \"#ffffff\" : \"#000000\")\n   }, [theme])\n\n   return (\n      <div className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\">\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Particles\n         </span>\n         <Particles\n            className=\"absolute inset-0\"\n            quantity={100}\n            ease={80}\n            color={color}\n            refresh\n         />\n      </div>\n   )\n}\n\nexport default ParticlesDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/particles.json b/apps/web/public/v0/styles/miami/particles.json
new file mode 100644
index 00000000..7eab124e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/particles.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "particles",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/particles.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\n\ninterface MousePosition {\n   x: number\n   y: number\n}\n\nfunction MousePosition(): MousePosition {\n   const [mousePosition, setMousePosition] = useState<MousePosition>({\n      x: 0,\n      y: 0,\n   })\n\n   useEffect(() => {\n      const handleMouseMove = (event: MouseEvent) => {\n         setMousePosition({ x: event.clientX, y: event.clientY })\n      }\n\n      window.addEventListener(\"mousemove\", handleMouseMove)\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMouseMove)\n      }\n   }, [])\n\n   return mousePosition\n}\n\ninterface ParticlesProps {\n   className?: string\n   quantity?: number\n   staticity?: number\n   ease?: number\n   size?: number\n   refresh?: boolean\n   color?: string\n   vx?: number\n   vy?: number\n}\nfunction hexToRgb(hex: string): number[] {\n   hex = hex.replace(\"#\", \"\")\n\n   // Unterstützung für dreistellige Hex-Farbcodes\n   if (hex.length === 3) {\n      hex = hex\n         .split(\"\")\n         .map((char) => char + char)\n         .join(\"\")\n   }\n\n   const hexInt = Number.parseInt(hex, 16)\n   const red = (hexInt >> 16) & 255\n   const green = (hexInt >> 8) & 255\n   const blue = hexInt & 255\n   return [red, green, blue]\n}\n\nconst Particles: React.FC<ParticlesProps> = ({\n   className = \"\",\n   quantity = 100,\n   staticity = 50,\n   ease = 50,\n   size = 0.4,\n   refresh = false,\n   color = \"#ffffff\",\n   vx = 0,\n   vy = 0,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const canvasContainerRef = useRef<HTMLDivElement>(null)\n   const context = useRef<CanvasRenderingContext2D | null>(null)\n   const circles = useRef<any[]>([])\n   const mousePosition = MousePosition()\n   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })\n   const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })\n   const dpr = typeof window !== \"undefined\" ? window.devicePixelRatio : 1\n\n   useEffect(() => {\n      if (canvasRef.current)\n         context.current = canvasRef.current.getContext(\"2d\")\n\n      initCanvas()\n      animate()\n      window.addEventListener(\"resize\", initCanvas)\n\n      return () => {\n         window.removeEventListener(\"resize\", initCanvas)\n      }\n   }, [color])\n\n   useEffect(() => {\n      onMouseMove()\n   }, [mousePosition.x, mousePosition.y])\n\n   useEffect(() => {\n      initCanvas()\n   }, [refresh])\n\n   const initCanvas = () => {\n      resizeCanvas()\n      drawParticles()\n   }\n\n   const onMouseMove = () => {\n      if (canvasRef.current) {\n         const rect = canvasRef.current.getBoundingClientRect()\n         const { w, h } = canvasSize.current\n         const x = mousePosition.x - rect.left - w / 2\n         const y = mousePosition.y - rect.top - h / 2\n         const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2\n         if (inside) {\n            mouse.current.x = x\n            mouse.current.y = y\n         }\n      }\n   }\n\n   interface Circle {\n      x: number\n      y: number\n      translateX: number\n      translateY: number\n      size: number\n      alpha: number\n      targetAlpha: number\n      dx: number\n      dy: number\n      magnetism: number\n   }\n\n   const resizeCanvas = () => {\n      if (canvasContainerRef.current && canvasRef.current && context.current) {\n         circles.current.length = 0\n         canvasSize.current.w = canvasContainerRef.current.offsetWidth\n         canvasSize.current.h = canvasContainerRef.current.offsetHeight\n         canvasRef.current.width = canvasSize.current.w * dpr\n         canvasRef.current.height = canvasSize.current.h * dpr\n         canvasRef.current.style.width = `${canvasSize.current.w}px`\n         canvasRef.current.style.height = `${canvasSize.current.h}px`\n         context.current.scale(dpr, dpr)\n      }\n   }\n\n   const circleParams = (): Circle => {\n      const x = Math.floor(Math.random() * canvasSize.current.w)\n      const y = Math.floor(Math.random() * canvasSize.current.h)\n      const translateX = 0\n      const translateY = 0\n      const pSize = Math.floor(Math.random() * 2) + size\n      const alpha = 0\n      const targetAlpha = Number.parseFloat(\n         (Math.random() * 0.6 + 0.1).toFixed(1),\n      )\n      const dx = (Math.random() - 0.5) * 0.1\n      const dy = (Math.random() - 0.5) * 0.1\n      const magnetism = 0.1 + Math.random() * 4\n      return {\n         x,\n         y,\n         translateX,\n         translateY,\n         size: pSize,\n         alpha,\n         targetAlpha,\n         dx,\n         dy,\n         magnetism,\n      }\n   }\n\n   const rgb = hexToRgb(color)\n\n   const drawCircle = (circle: Circle, update = false) => {\n      if (context.current) {\n         const { x, y, translateX, translateY, size, alpha } = circle\n         context.current.translate(translateX, translateY)\n         context.current.beginPath()\n         context.current.arc(x, y, size, 0, 2 * Math.PI)\n         context.current.fillStyle = `rgba(${rgb.join(\", \")}, ${alpha})`\n         context.current.fill()\n         context.current.setTransform(dpr, 0, 0, dpr, 0, 0)\n\n         if (!update) circles.current.push(circle)\n      }\n   }\n\n   const clearContext = () => {\n      if (context.current) {\n         context.current.clearRect(\n            0,\n            0,\n            canvasSize.current.w,\n            canvasSize.current.h,\n         )\n      }\n   }\n\n   const drawParticles = () => {\n      clearContext()\n      const particleCount = quantity\n      for (let i = 0; i < particleCount; i++) {\n         const circle = circleParams()\n         drawCircle(circle)\n      }\n   }\n\n   const remapValue = (\n      value: number,\n      start1: number,\n      end1: number,\n      start2: number,\n      end2: number,\n   ): number => {\n      const remapped =\n         ((value - start1) * (end2 - start2)) / (end1 - start1) + start2\n      return remapped > 0 ? remapped : 0\n   }\n\n   const animate = () => {\n      clearContext()\n      circles.current.forEach((circle: Circle, i: number) => {\n         // Handle the alpha value\n         const edge = [\n            circle.x + circle.translateX - circle.size, // distance from left edge\n            canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge\n            circle.y + circle.translateY - circle.size, // distance from top edge\n            canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge\n         ]\n         const closestEdge = edge.reduce((a, b) => Math.min(a, b))\n         const remapClosestEdge = Number.parseFloat(\n            remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),\n         )\n         if (remapClosestEdge > 1) {\n            circle.alpha += 0.02\n            if (circle.alpha > circle.targetAlpha)\n               circle.alpha = circle.targetAlpha\n         } else {\n            circle.alpha = circle.targetAlpha * remapClosestEdge\n         }\n         circle.x += circle.dx + vx\n         circle.y += circle.dy + vy\n         circle.translateX +=\n            (mouse.current.x / (staticity / circle.magnetism) -\n               circle.translateX) /\n            ease\n         circle.translateY +=\n            (mouse.current.y / (staticity / circle.magnetism) -\n               circle.translateY) /\n            ease\n\n         drawCircle(circle, true)\n\n         // circle gets out of the canvas\n         if (\n            circle.x < -circle.size ||\n            circle.x > canvasSize.current.w + circle.size ||\n            circle.y < -circle.size ||\n            circle.y > canvasSize.current.h + circle.size\n         ) {\n            // remove the circle from the array\n            circles.current.splice(i, 1)\n            // create a new circle\n            const newCircle = circleParams()\n            drawCircle(newCircle)\n            // update the circle position\n         }\n      })\n      window.requestAnimationFrame(animate)\n   }\n\n   return (\n      <div className={className} ref={canvasContainerRef} aria-hidden=\"true\">\n         <canvas ref={canvasRef} className=\"size-full\" />\n      </div>\n   )\n}\n\nexport default Particles\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/popover-demo.json b/apps/web/public/v0/styles/miami/popover-demo.json
new file mode 100644
index 00000000..0adae0eb
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/popover-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "popover-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/popover-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport default function PopoverDemo() {\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button variant=\"outline\">Open popover</Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-80\">\n            <div className=\"grid gap-4\">\n               <div className=\"space-y-2\">\n                  <h4 className=\"font-medium leading-none\">Dimensions</h4>\n                  <p className=\"text-muted-foreground text-sm\">\n                     Set the dimensions for the layer.\n                  </p>\n               </div>\n               <div className=\"grid gap-2\">\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"width\">Width</Label>\n                     <Input\n                        id=\"width\"\n                        defaultValue=\"100%\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxWidth\">Max. width</Label>\n                     <Input\n                        id=\"maxWidth\"\n                        defaultValue=\"300px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"height\">Height</Label>\n                     <Input\n                        id=\"height\"\n                        defaultValue=\"25px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxHeight\">Max. height</Label>\n                     <Input\n                        id=\"maxHeight\"\n                        defaultValue=\"none\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n               </div>\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/popover.json b/apps/web/public/v0/styles/miami/popover.json
new file mode 100644
index 00000000..f405f94a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/popover.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "popover",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-popover"
+  ],
+  "files": [
+    {
+      "path": "ui/popover.tsx",
+      "content": "\"use client\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor // Neues Element hinzugefügt\n\nconst PopoverContent = React.forwardRef<\n   React.ElementRef<typeof PopoverPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n   <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n         ref={ref}\n         align={align}\n         sideOffset={sideOffset}\n         className={cn(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none\",\n            className,\n         )}\n         {...props}\n      />\n   </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } // Geänderter Export\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/progress-demo.json b/apps/web/public/v0/styles/miami/progress-demo.json
new file mode 100644
index 00000000..97a2fedb
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/progress-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "progress-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "progress"
+  ],
+  "files": [
+    {
+      "path": "examples/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/components/ui/progress\"\n\nexport default function ProgressDemo() {\n   const [progress, setProgress] = React.useState(13)\n\n   React.useEffect(() => {\n      const timer = setTimeout(() => setProgress(66), 500)\n      return () => clearTimeout(timer)\n   }, [])\n\n   return <Progress value={progress} className=\"w-3/5\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/progress.json b/apps/web/public/v0/styles/miami/progress.json
new file mode 100644
index 00000000..11ce6e06
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/progress.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "progress",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-progress"
+  ],
+  "files": [
+    {
+      "path": "ui/progress.tsx",
+      "content": "\"use client\"\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Progress = React.forwardRef<\n   React.ElementRef<typeof ProgressPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, ...props }, ref) => (\n   <ProgressPrimitive.Root\n      ref={ref}\n      className={cn(\n         \"bg-secondary relative h-4 w-full overflow-hidden rounded-full\",\n         className,\n      )}\n      {...props}\n   >\n      <ProgressPrimitive.Indicator\n         className=\"bg-primary size-full flex-1 transition-all\"\n         style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}\n      />\n   </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/pulsating-button-demo.json b/apps/web/public/v0/styles/miami/pulsating-button-demo.json
new file mode 100644
index 00000000..057b6783
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/pulsating-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "pulsating-button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/pulsating-button-demo.tsx",
+      "content": "import { PulsatingButton } from \"@/components/ui/pulsating-button\"\n\nfunction PulsatingButtonDemo() {\n   return (\n      <PulsatingButton\n         text=\"Join Affiliate Program\"\n         pulseColor=\"150, 0, 255\"\n         backgroundColor=\"#9945FF\"\n         textColor=\"#ffffff\"\n         animationDuration=\"1.5s\"\n         buttonWidth=\"200px\"\n         buttonHeight=\"50px\"\n      />\n   )\n}\n\nexport default PulsatingButtonDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/pulsating-button.json b/apps/web/public/v0/styles/miami/pulsating-button.json
new file mode 100644
index 00000000..57ff3f84
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/pulsating-button.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "pulsating-button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/pulsating-button.tsx",
+      "content": "\"use client\"\n\nimport type React from \"react\"\n\ninterface PulsatingButtonProps {\n   text: string\n   pulseColor: string\n   backgroundColor: string\n   textColor: string\n   animationDuration: string\n   buttonWidth: string\n   buttonHeight: string\n}\n\nexport const PulsatingButton: React.FC<PulsatingButtonProps> = ({\n   text,\n   pulseColor,\n   backgroundColor,\n   textColor,\n   animationDuration,\n   buttonWidth,\n   buttonHeight,\n}) => {\n   const pulseKeyframes = {\n      \"--tw-pulse-color\": pulseColor,\n      animation: `pulse ${animationDuration} linear infinite`,\n   }\n\n   return (\n      <div className=\"flex items-center justify-center\">\n         <button\n            className=\"relative block flex cursor-pointer items-center justify-center text-center\"\n            style={{\n               color: textColor,\n               backgroundColor,\n               width: buttonWidth,\n               height: buttonHeight,\n               borderRadius: \"12px\",\n               ...pulseKeyframes,\n            }}\n         >\n            <div>{text}</div>\n            <style jsx>\n               {`\n          @keyframes pulse {\n            0% {\n              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);\n            }\n            50% {\n              box-shadow: 0 0 0 8px rgba(var(--tw-pulse-color), 0.5);\n            }\n            100% {\n              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);\n            }\n          }\n          button::before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            height: 100%;\n            border-radius: 20px;\n            background: inherit;\n            animation: inherit;\n            transform: translate(-50%, -50%);\n            z-index: -1;\n          }\n        `}\n            </style>\n         </button>\n      </div>\n   )\n}\n\nexport default PulsatingButton\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "pulse": "pulse var(--duration) ease-out infinite"
+          },
+          "keyframes": {
+            "pulse": {
+              "0%, 100%": {
+                "boxShadow": "0 0 0 0 var(--pulse-color)"
+              },
+              "50%": {
+                "boxShadow": "0 0 0 8px var(--pulse-color)"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/radio-group-demo.json b/apps/web/public/v0/styles/miami/radio-group-demo.json
new file mode 100644
index 00000000..55771a3d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/radio-group-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "radio-group-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "examples/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\n\nexport default function RadioGroupDemo() {\n   return (\n      <RadioGroup defaultValue=\"comfortable\">\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"default\" id=\"r1\" />\n            <Label htmlFor=\"r1\">Default</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n            <Label htmlFor=\"r2\">Comfortable</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"compact\" id=\"r3\" />\n            <Label htmlFor=\"r3\">Compact</Label>\n         </div>\n      </RadioGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/radio-group-form.json b/apps/web/public/v0/styles/miami/radio-group-form.json
new file mode 100644
index 00000000..36ee4c69
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/radio-group-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "radio-group-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "radio-group",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/radio-group-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   type: z.enum([\"all\", \"mentions\", \"none\"], {\n      required_error: \"You need to select a notification type.\",\n   }),\n})\n\nexport default function RadioGroupForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"type\"\n               render={({ field }) => (\n                  <FormItem className=\"space-y-3\">\n                     <FormLabel>Notify me about...</FormLabel>\n                     <FormControl>\n                        <RadioGroup\n                           onValueChange={field.onChange}\n                           defaultValue={field.value}\n                           className=\"flex flex-col space-y-1\"\n                        >\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"all\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 All new messages\n                              </FormLabel>\n                           </FormItem>\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"mentions\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 Direct messages and mentions\n                              </FormLabel>\n                           </FormItem>\n                           <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                              <FormControl>\n                                 <RadioGroupItem value=\"none\" />\n                              </FormControl>\n                              <FormLabel className=\"font-normal\">\n                                 Nothing\n                              </FormLabel>\n                           </FormItem>\n                        </RadioGroup>\n                     </FormControl>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/radio-group.json b/apps/web/public/v0/styles/miami/radio-group.json
new file mode 100644
index 00000000..23741d7a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/radio-group.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "radio-group",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-radio-group"
+  ],
+  "files": [
+    {
+      "path": "ui/radio-group.tsx",
+      "content": "\"use client\"\n\nimport { CheckIcon } from \"@radix-ui/react-icons\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n   React.ElementRef<typeof RadioGroupPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n   return (\n      <RadioGroupPrimitive.Root\n         className={cn(\"grid gap-2\", className)}\n         {...props}\n         ref={ref}\n      />\n   )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n   React.ElementRef<typeof RadioGroupPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n   return (\n      <RadioGroupPrimitive.Item\n         ref={ref}\n         className={cn(\n            \"border-primary text-primary focus-visible:ring-ring aspect-square size-4 shrink-0 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50\",\n            className,\n         )}\n         {...props}\n      >\n         <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n            <CheckIcon className=\"fill-primary size-3.5\" />\n         </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n   )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/rainbow-button-demo.json b/apps/web/public/v0/styles/miami/rainbow-button-demo.json
new file mode 100644
index 00000000..c78f4b36
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/rainbow-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "rainbow-button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/rainbow-button-demo.tsx",
+      "content": "import { RainbowButton } from \"@/components/ui/rainbow-button\"\n\nexport default function RainbowButtonDemo() {\n   return <RainbowButton>Get Unlimited Access</RainbowButton>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/rainbow-button.json b/apps/web/public/v0/styles/miami/rainbow-button.json
new file mode 100644
index 00000000..257e3c48
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/rainbow-button.json
@@ -0,0 +1,58 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "rainbow-button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/rainbow-button.tsx",
+      "content": "import type React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface RainbowButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport function RainbowButton({ children, ...props }: RainbowButtonProps) {\n   return (\n      <button\n         className={cn(\n            \"focus-visible:ring-ring animate-rainbow text-primary-foreground group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50\",\n\n            // before styles\n            \"before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]\",\n\n            // light mode colors\n            \"bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]\",\n\n            // dark mode colors\n            \" dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]\",\n         )}\n         {...props}\n      >\n         {children}\n      </button>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "color-1": "hsl(var(--color-1))",
+            "color-2": "hsl(var(--color-2))",
+            "color-3": "hsl(var(--color-3))",
+            "color-4": "hsl(var(--color-4))",
+            "color-5": "hsl(var(--color-5))"
+          },
+          "animation": {
+            "rainbow": "rainbow var(--speed, 2s) infinite linear"
+          },
+          "keyframes": {
+            "rainbow": {
+              "0%": {
+                "background-position": "0%"
+              },
+              "100%": {
+                "background-position": "200%"
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "--color-1": "0 100% 63%",
+      "--color-2": "270 100% 63%",
+      "--color-3": "210 100% 63%",
+      "--color-4": "195 100% 63%",
+      "--color-5": "90 100% 63%"
+    },
+    "dark": {
+      "--color-1": "0 100% 63%",
+      "--color-2": "270 100% 63%",
+      "--color-3": "210 100% 63%",
+      "--color-4": "195 100% 63%",
+      "--color-5": "90 100% 63%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/resizable-demo-with-handle.json b/apps/web/public/v0/styles/miami/resizable-demo-with-handle.json
new file mode 100644
index 00000000..f76fe356
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/resizable-demo-with-handle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "resizable-demo-with-handle",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-demo-with-handle.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"@/components/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={50}>\n            <div className=\"flex h-[200px] items-center justify-center p-6\">\n               <span className=\"font-semibold\">One</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={50}>\n            <ResizablePanelGroup direction=\"vertical\">\n               <ResizablePanel defaultSize={25}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Two</span>\n                  </div>\n               </ResizablePanel>\n               <ResizableHandle withHandle />\n               <ResizablePanel defaultSize={75}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Three</span>\n                  </div>\n               </ResizablePanel>\n            </ResizablePanelGroup>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/resizable-demo.json b/apps/web/public/v0/styles/miami/resizable-demo.json
new file mode 100644
index 00000000..ff479247
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/resizable-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "resizable-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-demo.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"@/components/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={50}>\n            <div className=\"flex h-[200px] items-center justify-center p-6\">\n               <span className=\"font-semibold\">One</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle />\n         <ResizablePanel defaultSize={50}>\n            <ResizablePanelGroup direction=\"vertical\">\n               <ResizablePanel defaultSize={25}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Two</span>\n                  </div>\n               </ResizablePanel>\n               <ResizableHandle />\n               <ResizablePanel defaultSize={75}>\n                  <div className=\"flex h-full items-center justify-center p-6\">\n                     <span className=\"font-semibold\">Three</span>\n                  </div>\n               </ResizablePanel>\n            </ResizablePanelGroup>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/resizable-handle.json b/apps/web/public/v0/styles/miami/resizable-handle.json
new file mode 100644
index 00000000..d51c5fc0
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/resizable-handle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "resizable-handle",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-handle.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"@/components/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"min-h-[200px] max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Sidebar</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/resizable-vertical.json b/apps/web/public/v0/styles/miami/resizable-vertical.json
new file mode 100644
index 00000000..ecc4dee9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/resizable-vertical.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "resizable-vertical",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-vertical.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"@/components/ui/resizable\"\n\nexport default function ResizableDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"vertical\"\n         className=\"min-h-[200px] max-w-md rounded-lg border\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Header</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/resizable.json b/apps/web/public/v0/styles/miami/resizable.json
new file mode 100644
index 00000000..d7157881
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/resizable.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "resizable",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "react-resizable-panels"
+  ],
+  "files": [
+    {
+      "path": "ui/resizable.tsx",
+      "content": "\"use client\"\n\nimport { DragHandleDots2Icon } from \"@radix-ui/react-icons\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n   className,\n   ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n   return (\n      <ResizablePrimitive.PanelGroup\n         className={cn(\n            \"flex size-full data-[panel-group-direction=vertical]:flex-col\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nfunction ResizableHandle({\n   withHandle,\n   className,\n   ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n   withHandle?: boolean\n}) {\n   return (\n      <ResizablePrimitive.PanelResizeHandle\n         className={cn(\n            \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n            className,\n         )}\n         {...props}\n      >\n         {withHandle && (\n            <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border\">\n               <DragHandleDots2Icon className=\"size-2.5\" />\n            </div>\n         )}\n      </ResizablePrimitive.PanelResizeHandle>\n   )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/retro-grid-demo.json b/apps/web/public/v0/styles/miami/retro-grid-demo.json
new file mode 100644
index 00000000..ef66bab8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/retro-grid-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "retro-grid-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/retro-grid-demo.tsx",
+      "content": "\"use client\"\n\nimport { RetroGrid } from \"@/components/ui/retro-grid\"\n\nexport default function RetroGridDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <span className=\"pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent\">\n            Retro Grid\n         </span>\n\n         <RetroGrid />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/retro-grid.json b/apps/web/public/v0/styles/miami/retro-grid.json
new file mode 100644
index 00000000..e6454053
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/retro-grid.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "retro-grid",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/retro-grid.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\ninterface RetroGridProps extends React.HTMLAttributes<HTMLDivElement> {\n   /**\n    * Additional CSS classes to apply to the grid container\n    */\n   className?: string\n   /**\n    * Rotation angle of the grid in degrees\n    * @default 65\n    */\n   angle?: number\n   /**\n    * Grid cell size in pixels\n    * @default 60\n    */\n   cellSize?: number\n   /**\n    * Grid opacity value between 0 and 1\n    * @default 0.5\n    */\n   opacity?: number\n   /**\n    * Grid line color in light mode\n    * @default \"gray\"\n    */\n   lightLineColor?: string\n   /**\n    * Grid line color in dark mode\n    * @default \"gray\"\n    */\n   darkLineColor?: string\n}\n\nexport function RetroGrid({\n   className,\n   angle = 65,\n   cellSize = 60,\n   opacity = 0.5,\n   lightLineColor = \"gray\",\n   darkLineColor = \"gray\",\n   ...props\n}: RetroGridProps) {\n   const gridStyles = {\n      \"--grid-angle\": `${angle}deg`,\n      \"--cell-size\": `${cellSize}px`,\n      \"--opacity\": opacity,\n      \"--light-line\": lightLineColor,\n      \"--dark-line\": darkLineColor,\n   } as React.CSSProperties\n\n   return (\n      <div\n         className={cn(\n            \"pointer-events-none absolute size-full overflow-hidden [perspective:200px]\",\n            `opacity-[var(--opacity)]`,\n            className,\n         )}\n         style={gridStyles}\n         {...props}\n      >\n         <div className=\"absolute inset-0 [transform:rotateX(var(--grid-angle))]\">\n            <div className=\"animate-grid [background-image:linear-gradient(to_right,var(--light-line)_1px,transparent_0),linear-gradient(to_bottom,var(--light-line)_1px,transparent_0)] [background-repeat:repeat] [background-size:var(--cell-size)_var(--cell-size)] [height:300vh] [inset:0%_0px] [margin-left:-200%] [transform-origin:100%_0_0] [width:600vw] dark:[background-image:linear-gradient(to_right,var(--dark-line)_1px,transparent_0),linear-gradient(to_bottom,var(--dark-line)_1px,transparent_0)]\" />\n         </div>\n\n         <div className=\"absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black\" />\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "grid": "grid 15s linear infinite"
+          },
+          "keyframes": {
+            "grid": {
+              "0%": {
+                "transform": "translateY(-50%)"
+              },
+              "100%": {
+                "transform": "translateY(0)"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/ripple-button-demo.json b/apps/web/public/v0/styles/miami/ripple-button-demo.json
new file mode 100644
index 00000000..e45b9b0d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/ripple-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "ripple-button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/ripple-button-demo.tsx",
+      "content": "import { RippleButton } from \"@/components/ui/ripple-button\"\n\nexport default function RippleButtonDemo() {\n   return <RippleButton rippleColor=\"#ADD8E6\">Click me</RippleButton>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/ripple-button.json b/apps/web/public/v0/styles/miami/ripple-button.json
new file mode 100644
index 00000000..a623b6d5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/ripple-button.json
@@ -0,0 +1,39 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "ripple-button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/ripple-button.tsx",
+      "content": "\"use client\"\n\nimport React, { type MouseEvent, useEffect, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface RippleButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n   rippleColor?: string\n   duration?: string\n}\n\nexport const RippleButton = React.forwardRef<\n   HTMLButtonElement,\n   RippleButtonProps\n>(\n   (\n      {\n         className,\n         children,\n         rippleColor = \"#ffffff\",\n         duration = \"600ms\",\n         onClick,\n         ...props\n      },\n      ref,\n   ) => {\n      const [buttonRipples, setButtonRipples] = useState<\n         Array<{ x: number; y: number; size: number; key: number }>\n      >([])\n\n      const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n         createRipple(event)\n         onClick?.(event)\n      }\n\n      const createRipple = (event: MouseEvent<HTMLButtonElement>) => {\n         const button = event.currentTarget\n         const rect = button.getBoundingClientRect()\n         const size = Math.max(rect.width, rect.height)\n         const x = event.clientX - rect.left - size / 2\n         const y = event.clientY - rect.top - size / 2\n\n         const newRipple = { x, y, size, key: Date.now() }\n         setButtonRipples((prevRipples) => [...prevRipples, newRipple])\n      }\n\n      useEffect(() => {\n         if (buttonRipples.length > 0) {\n            const lastRipple = buttonRipples[buttonRipples.length - 1]\n            const timeout = setTimeout(() => {\n               setButtonRipples((prevRipples) =>\n                  prevRipples.filter((ripple) => ripple.key !== lastRipple.key),\n               )\n            }, Number.parseInt(duration))\n            return () => clearTimeout(timeout)\n         }\n      }, [buttonRipples, duration])\n\n      return (\n         <button\n            className={cn(\n               \"relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 bg-background px-4 py-2 text-center text-primary\",\n               className,\n            )}\n            onClick={handleClick}\n            ref={ref}\n            {...props}\n         >\n            <div className=\"relative z-10\">{children}</div>\n            <span className=\"pointer-events-none absolute inset-0\">\n               {buttonRipples.map((ripple) => (\n                  <span\n                     className=\"absolute animate-rippling rounded-full bg-background opacity-30\"\n                     key={ripple.key}\n                     style={{\n                        width: `${ripple.size}px`,\n                        height: `${ripple.size}px`,\n                        top: `${ripple.y}px`,\n                        left: `${ripple.x}px`,\n                        backgroundColor: rippleColor,\n                        transform: `scale(0)`,\n                     }}\n                  />\n               ))}\n            </span>\n         </button>\n      )\n   },\n)\n\nRippleButton.displayName = \"RippleButton\"\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "rippling": "rippling var(--duration) ease-out"
+          },
+          "keyframes": {
+            "rippling": {
+              "0%": {
+                "opacity": "1"
+              },
+              "100%": {
+                "transform": "scale(2)",
+                "opacity": "0"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/ripple-demo.json b/apps/web/public/v0/styles/miami/ripple-demo.json
new file mode 100644
index 00000000..481d384f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/ripple-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "ripple-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/ripple-demo.tsx",
+      "content": "import { Ripple } from \"@/components/ui/ripple\"\n\nexport default function RippleDemo() {\n   return (\n      <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white\">\n            Ripple\n         </p>\n         <Ripple />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/ripple.json b/apps/web/public/v0/styles/miami/ripple.json
new file mode 100644
index 00000000..a9cd3f7b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/ripple.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "ripple",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/ripple.tsx",
+      "content": "import React, { type ComponentPropsWithoutRef, type CSSProperties } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface RippleProps extends ComponentPropsWithoutRef<\"div\"> {\n   mainCircleSize?: number\n   mainCircleOpacity?: number\n   numCircles?: number\n}\n\nexport const Ripple = React.memo(function Ripple({\n   mainCircleSize = 210,\n   mainCircleOpacity = 0.24,\n   numCircles = 8,\n   className,\n   ...props\n}: RippleProps) {\n   return (\n      <div\n         className={cn(\n            \"pointer-events-none absolute inset-0 select-none [mask-image:linear-gradient(to_bottom,white,transparent)]\",\n            className,\n         )}\n         {...props}\n      >\n         {Array.from({ length: numCircles }, (_, i) => {\n            const size = mainCircleSize + i * 70\n            const opacity = mainCircleOpacity - i * 0.03\n            const animationDelay = `${i * 0.06}s`\n            const borderStyle = i === numCircles - 1 ? \"dashed\" : \"solid\"\n            const borderOpacity = 5 + i * 5\n\n            return (\n               <div\n                  key={i}\n                  className={`[--i: absolute animate-ripple rounded-full border bg-foreground/25 shadow-xl${i}]`}\n                  style={\n                     {\n                        width: `${size}px`,\n                        height: `${size}px`,\n                        opacity,\n                        animationDelay,\n                        borderStyle,\n                        borderWidth: \"1px\",\n                        borderColor: `hsl(var(--foreground), ${borderOpacity / 100})`,\n                        top: \"50%\",\n                        left: \"50%\",\n                        transform: \"translate(-50%, -50%) scale(1)\",\n                     } as CSSProperties\n                  }\n               />\n            )\n         })}\n      </div>\n   )\n})\n\nRipple.displayName = \"Ripple\"\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "ripple": "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite"
+          },
+          "keyframes": {
+            "ripple": {
+              "0%, 100%": {
+                "transform": "translate(-50%, -50%) scale(1)"
+              },
+              "50%": {
+                "transform": "translate(-50%, -50%) scale(0.9)"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/safari-demo-2.json b/apps/web/public/v0/styles/miami/safari-demo-2.json
new file mode 100644
index 00000000..bad9a436
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/safari-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "safari-demo-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/safari-demo-2.tsx",
+      "content": "import Safari from \"@/components/ui/safari\"\n\nexport default function SafariDemo() {\n   return (\n      <div className=\"relative\">\n         <Safari\n            url=\"nyxbui.design\"\n            className=\"size-full\"\n            src=\"https://via.placeholder.com/1200x750\"\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/safari-demo.json b/apps/web/public/v0/styles/miami/safari-demo.json
new file mode 100644
index 00000000..a698e6ad
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/safari-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "safari-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/safari-demo.tsx",
+      "content": "import Safari from \"@/components/ui/safari\"\n\nexport default function SafariDemo() {\n   return (\n      <div className=\"relative\">\n         <Safari url=\"nyxbui.design\" className=\"size-full\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/safari.json b/apps/web/public/v0/styles/miami/safari.json
new file mode 100644
index 00000000..866011a6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/safari.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "safari",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/safari.tsx",
+      "content": "import type { SVGProps } from \"react\"\n\nexport interface SafariProps extends SVGProps<SVGSVGElement> {\n   url?: string\n   src?: string\n   width?: number\n   height?: number\n}\n\nexport default function Safari({\n   src,\n   url,\n   width = 1203,\n   height = 753,\n   ...props\n}: SafariProps) {\n   return (\n      <svg\n         width={width}\n         height={height}\n         viewBox={`0 0 ${width} ${height}`}\n         fill=\"none\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         {...props}\n      >\n         <g clipPath=\"url(#path0)\">\n            <path\n               d=\"M0 52H1202V741C1202 747.627 1196.63 753 1190 753H12C5.37258 753 0 747.627 0 741V52Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               fillRule=\"evenodd\"\n               clipRule=\"evenodd\"\n               d=\"M0 12C0 5.37258 5.37258 0 12 0H1190C1196.63 0 1202 5.37258 1202 12V52H0L0 12Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               fillRule=\"evenodd\"\n               clipRule=\"evenodd\"\n               d=\"M1.06738 12C1.06738 5.92487 5.99225 1 12.0674 1H1189.93C1196.01 1 1200.93 5.92487 1200.93 12V51H1.06738V12Z\"\n               className=\"fill-white dark:fill-[#262626]\"\n            />\n            <circle\n               cx=\"27\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <circle\n               cx=\"47\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <circle\n               cx=\"67\"\n               cy=\"25\"\n               r=\"6\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <path\n               d=\"M286 17C286 13.6863 288.686 11 292 11H946C949.314 11 952 13.6863 952 17V35C952 38.3137 949.314 41 946 41H292C288.686 41 286 38.3137 286 35V17Z\"\n               className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n            />\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M566.269 32.0852H572.426C573.277 32.0852 573.696 31.6663 573.696 30.7395V25.9851C573.696 25.1472 573.353 24.7219 572.642 24.6521V23.0842C572.642 20.6721 571.036 19.5105 569.348 19.5105C567.659 19.5105 566.053 20.6721 566.053 23.0842V24.6711C565.393 24.7727 565 25.1917 565 25.9851V30.7395C565 31.6663 565.418 32.0852 566.269 32.0852ZM567.272 22.97C567.272 21.491 568.211 20.6785 569.348 20.6785C570.478 20.6785 571.423 21.491 571.423 22.97V24.6394L567.272 24.6458V22.97Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <text\n                  x=\"580\"\n                  y=\"30\"\n                  fill=\"#A3A3A3\"\n                  fontSize=\"12\"\n                  fontFamily=\"Arial, sans-serif\"\n               >\n                  {url}\n               </text>\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M265.5 33.8984C265.641 33.8984 265.852 33.8516 266.047 33.7422C270.547 31.2969 272.109 30.1641 272.109 27.3203V21.4219C272.109 20.4844 271.742 20.1484 270.961 19.8125C270.094 19.4453 267.18 18.4297 266.328 18.1406C266.07 18.0547 265.766 18 265.5 18C265.234 18 264.93 18.0703 264.672 18.1406C263.82 18.3828 260.906 19.4531 260.039 19.8125C259.258 20.1406 258.891 20.4844 258.891 21.4219V27.3203C258.891 30.1641 260.461 31.2812 264.945 33.7422C265.148 33.8516 265.359 33.8984 265.5 33.8984ZM265.922 19.5781C266.945 19.9766 269.172 20.7656 270.344 21.1875C270.562 21.2656 270.617 21.3828 270.617 21.6641V27.0234C270.617 29.3125 269.469 29.9375 265.945 32.0625C265.727 32.1875 265.617 32.2344 265.508 32.2344V19.4844C265.617 19.4844 265.734 19.5156 265.922 19.5781Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M936.273 24.9766C936.5 24.9766 936.68 24.9062 936.82 24.7578L940.023 21.5312C940.195 21.3594 940.273 21.1719 940.273 20.9531C940.273 20.7422 940.188 20.5391 940.023 20.3828L936.82 17.125C936.68 16.9688 936.5 16.8906 936.273 16.8906C935.852 16.8906 935.516 17.2422 935.516 17.6719C935.516 17.8828 935.594 18.0547 935.727 18.2031L937.594 20.0312C937.227 19.9766 936.852 19.9453 936.477 19.9453C932.609 19.9453 929.516 23.0391 929.516 26.9141C929.516 30.7891 932.633 33.9062 936.5 33.9062C940.375 33.9062 943.484 30.7891 943.484 26.9141C943.484 26.4453 943.156 26.1094 942.688 26.1094C942.234 26.1094 941.93 26.4453 941.93 26.9141C941.93 29.9297 939.516 32.3516 936.5 32.3516C933.492 32.3516 931.07 29.9297 931.07 26.9141C931.07 23.875 933.469 21.4688 936.477 21.4688C936.984 21.4688 937.453 21.5078 937.867 21.5781L935.734 23.6875C935.594 23.8281 935.516 24 935.516 24.2109C935.516 24.6406 935.852 24.9766 936.273 24.9766Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1134 33.0156C1134.49 33.0156 1134.89 32.6094 1134.89 32.1484V27.2578H1139.66C1140.13 27.2578 1140.54 26.8594 1140.54 26.3672C1140.54 25.8828 1140.13 25.4766 1139.66 25.4766H1134.89V20.5859C1134.89 20.1172 1134.49 19.7188 1134 19.7188C1133.52 19.7188 1133.11 20.1172 1133.11 20.5859V25.4766H1128.34C1127.88 25.4766 1127.46 25.8828 1127.46 26.3672C1127.46 26.8594 1127.88 27.2578 1128.34 27.2578H1133.11V32.1484C1133.11 32.6094 1133.52 33.0156 1134 33.0156Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1161.8 31.0703H1163.23V32.375C1163.23 34.0547 1164.12 34.9219 1165.81 34.9219H1174.2C1175.89 34.9219 1176.77 34.0547 1176.77 32.3828V24.0469C1176.77 22.375 1175.89 21.5 1174.2 21.5H1172.77V20.2578C1172.77 18.5859 1171.88 17.7109 1170.19 17.7109H1161.8C1160.1 17.7109 1159.23 18.5781 1159.23 20.2578V28.5234C1159.23 30.1953 1160.1 31.0703 1161.8 31.0703ZM1161.9 29.5078C1161.18 29.5078 1160.78 29.1328 1160.78 28.3828V20.3984C1160.78 19.6406 1161.18 19.2656 1161.9 19.2656H1170.09C1170.8 19.2656 1171.2 19.6406 1171.2 20.3984V21.5H1165.81C1164.12 21.5 1163.23 22.375 1163.23 24.0469V29.5078H1161.9ZM1165.91 33.3672C1165.19 33.3672 1164.8 32.9922 1164.8 32.2422V24.1875C1164.8 23.4297 1165.19 23.0625 1165.91 23.0625H1174.1C1174.81 23.0625 1175.21 23.4297 1175.21 24.1875V32.2422C1175.21 32.9922 1174.81 33.3672 1174.1 33.3672H1165.91Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M1099.51 28.4141C1099.91 28.4141 1100.24 28.0859 1100.24 27.6953V19.8359L1100.18 18.6797L1100.66 19.25L1101.75 20.4141C1101.88 20.5547 1102.06 20.625 1102.24 20.625C1102.6 20.625 1102.9 20.3672 1102.9 20C1102.9 19.8047 1102.82 19.6641 1102.69 19.5312L1100.06 17.0078C1099.88 16.8203 1099.7 16.7578 1099.51 16.7578C1099.32 16.7578 1099.14 16.8203 1098.95 17.0078L1096.33 19.5312C1096.2 19.6641 1096.12 19.8047 1096.12 20C1096.12 20.3672 1096.41 20.625 1096.77 20.625C1096.95 20.625 1097.14 20.5547 1097.27 20.4141L1098.35 19.25L1098.84 18.6719L1098.78 19.8359V27.6953C1098.78 28.0859 1099.11 28.4141 1099.51 28.4141ZM1095 34.6562H1104C1105.7 34.6562 1106.57 33.7812 1106.57 32.1094V24.4297C1106.57 22.7578 1105.7 21.8828 1104 21.8828H1101.89V23.4375H1103.9C1104.61 23.4375 1105.02 23.8125 1105.02 24.5625V31.9688C1105.02 32.7188 1104.61 33.0938 1103.9 33.0938H1095.1C1094.38 33.0938 1093.98 32.7188 1093.98 31.9688V24.5625C1093.98 23.8125 1094.38 23.4375 1095.1 23.4375H1097.13V21.8828H1095C1093.31 21.8828 1092.43 22.75 1092.43 24.4297V32.1094C1092.43 33.7812 1093.31 34.6562 1095 34.6562Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M99.5703 33.6016H112.938C114.633 33.6016 115.516 32.7266 115.516 31.0547V21.5469C115.516 19.875 114.633 19 112.938 19H99.5703C97.8828 19 97 19.8672 97 21.5469V31.0547C97 32.7266 97.8828 33.6016 99.5703 33.6016ZM99.6719 32.0469C98.9531 32.0469 98.5547 31.6719 98.5547 30.9141V21.6875C98.5547 20.9297 98.9531 20.5547 99.6719 20.5547H103.234V32.0469H99.6719ZM112.836 20.5547C113.555 20.5547 113.953 20.9297 113.953 21.6875V30.9141C113.953 31.6719 113.555 32.0469 112.836 32.0469H104.711V20.5547H112.836ZM101.703 23.4141C101.984 23.4141 102.219 23.1719 102.219 22.9062C102.219 22.6406 101.984 22.4062 101.703 22.4062H100.102C99.8203 22.4062 99.5859 22.6406 99.5859 22.9062C99.5859 23.1719 99.8203 23.4141 100.102 23.4141H101.703ZM101.703 25.5156C101.984 25.5156 102.219 25.2812 102.219 25.0078C102.219 24.7422 101.984 24.5078 101.703 24.5078H100.102C99.8203 24.5078 99.5859 24.7422 99.5859 25.0078C99.5859 25.2812 99.8203 25.5156 100.102 25.5156H101.703ZM101.703 27.6094C101.984 27.6094 102.219 27.3828 102.219 27.1094C102.219 26.8438 101.984 26.6172 101.703 26.6172H100.102C99.8203 26.6172 99.5859 26.8438 99.5859 27.1094C99.5859 27.3828 99.8203 27.6094 100.102 27.6094H101.703Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M143.914 32.5938C144.094 32.7656 144.312 32.8594 144.562 32.8594C145.086 32.8594 145.492 32.4531 145.492 31.9375C145.492 31.6797 145.391 31.4453 145.211 31.2656L139.742 25.9219L145.211 20.5938C145.391 20.4141 145.492 20.1719 145.492 19.9219C145.492 19.4062 145.086 19 144.562 19C144.312 19 144.094 19.0938 143.922 19.2656L137.844 25.2031C137.625 25.4062 137.516 25.6562 137.516 25.9297C137.516 26.2031 137.625 26.4375 137.836 26.6484L143.914 32.5938Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <g className=\"mix-blend-luminosity\">\n               <path\n                  d=\"M168.422 32.8594C168.68 32.8594 168.891 32.7656 169.07 32.5938L175.148 26.6562C175.359 26.4375 175.469 26.2109 175.469 25.9297C175.469 25.6562 175.367 25.4141 175.148 25.2109L169.07 19.2656C168.891 19.0938 168.68 19 168.422 19C167.898 19 167.492 19.4062 167.492 19.9219C167.492 20.1719 167.602 20.4141 167.773 20.5938L173.25 25.9375L167.773 31.2656C167.594 31.4531 167.492 31.6797 167.492 31.9375C167.492 32.4531 167.898 32.8594 168.422 32.8594Z\"\n                  fill=\"#A3A3A3\"\n               />\n            </g>\n            <image\n               href={src}\n               width=\"1200\"\n               height=\"700\"\n               x=\"1\"\n               y=\"52\"\n               preserveAspectRatio=\"xMidYMid slice\"\n               clipPath=\"url(#roundedBottom)\"\n            />\n         </g>\n         <defs>\n            <clipPath id=\"path0\">\n               <rect width={width} height={height} fill=\"white\" />\n            </clipPath>\n            <clipPath id=\"roundedBottom\">\n               <path\n                  d=\"M1 52H1201V741C1201 747.075 1196.08 752 1190 752H12C5.92486 752 1 747.075 1 741V52Z\"\n                  fill=\"white\"\n               />\n            </clipPath>\n         </defs>\n      </svg>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/scratch-to-reveal-demo.json b/apps/web/public/v0/styles/miami/scratch-to-reveal-demo.json
new file mode 100644
index 00000000..03b25564
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/scratch-to-reveal-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scratch-to-reveal-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/scratch-to-reveal-demo.tsx",
+      "content": "import React from \"react\"\nimport ScratchToReveal from \"@/components/ui/scratch-to-reveal\"\n\nfunction ScratchToRevealDemo() {\n   const handleComplete = () => {\n      // Do Something\n   }\n\n   return (\n      <div>\n         <ScratchToReveal\n            width={250}\n            height={250}\n            minScratchPercentage={70}\n            className=\"flex items-center justify-center overflow-hidden rounded-2xl border-2 bg-gray-100\"\n            onComplete={handleComplete}\n         >\n            <p className=\"text-9xl\">😎</p>\n         </ScratchToReveal>\n      </div>\n   )\n}\n\nexport default ScratchToRevealDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/scratch-to-reveal.json b/apps/web/public/v0/styles/miami/scratch-to-reveal.json
new file mode 100644
index 00000000..7ad2f0bf
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/scratch-to-reveal.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scratch-to-reveal",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/scratch-to-reveal.tsx",
+      "content": "\"use client\"\nimport { motion, useAnimation } from \"framer-motion\"\nimport type React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface ScratchToRevealProps {\n   children: React.ReactNode\n   width: number\n   height: number\n   minScratchPercentage?: number // Minimum percentage of scratched area to be considered as completed (Value between 0 and 100)\n   className?: string\n   onComplete?: () => void\n}\n\nconst ScratchToReveal: React.FC<ScratchToRevealProps> = ({\n   width,\n   height,\n   minScratchPercentage = 50,\n   onComplete,\n   children,\n   className,\n}) => {\n   const canvasRef = useRef<HTMLCanvasElement>(null)\n   const [isScratching, setIsScratching] = useState(false)\n   const [isComplete, setIsComplete] = useState(false) // New state to track completion\n\n   const controls = useAnimation()\n\n   useEffect(() => {\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext(\"2d\")\n      if (canvas && ctx) {\n         ctx.fillStyle = \"#ccc\"\n         ctx.fillRect(0, 0, canvas.width, canvas.height)\n         // Optionally add a background image or gradient\n         const gradient = ctx.createLinearGradient(\n            0,\n            0,\n            canvas.width,\n            canvas.height,\n         )\n         gradient.addColorStop(0, \"#A97CF8\")\n         gradient.addColorStop(0.5, \"#F38CB8\")\n         gradient.addColorStop(1, \"#FDCC92\")\n         ctx.fillStyle = gradient\n         ctx.fillRect(0, 0, canvas.width, canvas.height)\n      }\n   }, [])\n\n   useEffect(() => {\n      const handleDocumentMouseMove = (event: MouseEvent) => {\n         if (!isScratching) return\n         scratch(event.clientX, event.clientY)\n      }\n\n      const handleDocumentTouchMove = (event: TouchEvent) => {\n         if (!isScratching) return\n         const touch = event.touches[0]\n         scratch(touch.clientX, touch.clientY)\n      }\n\n      const handleDocumentMouseUp = () => {\n         setIsScratching(false)\n         checkCompletion()\n      }\n\n      const handleDocumentTouchEnd = () => {\n         setIsScratching(false)\n         checkCompletion()\n      }\n\n      document.addEventListener(\"mousedown\", handleDocumentMouseMove)\n      document.addEventListener(\"mousemove\", handleDocumentMouseMove)\n      document.addEventListener(\"touchstart\", handleDocumentTouchMove)\n      document.addEventListener(\"touchmove\", handleDocumentTouchMove)\n      document.addEventListener(\"mouseup\", handleDocumentMouseUp)\n      document.addEventListener(\"touchend\", handleDocumentTouchEnd)\n      document.addEventListener(\"touchcancel\", handleDocumentTouchEnd)\n\n      return () => {\n         document.removeEventListener(\"mousedown\", handleDocumentMouseMove)\n         document.removeEventListener(\"mousemove\", handleDocumentMouseMove)\n         document.removeEventListener(\"touchstart\", handleDocumentTouchMove)\n         document.removeEventListener(\"touchmove\", handleDocumentTouchMove)\n         document.removeEventListener(\"mouseup\", handleDocumentMouseUp)\n         document.removeEventListener(\"touchend\", handleDocumentTouchEnd)\n         document.removeEventListener(\"touchcancel\", handleDocumentTouchEnd)\n      }\n   }, [isScratching])\n\n   const handleMouseDown = () => setIsScratching(true)\n\n   const handleTouchStart = () => setIsScratching(true)\n\n   const scratch = (clientX: number, clientY: number) => {\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext(\"2d\")\n      if (canvas && ctx) {\n         const rect = canvas.getBoundingClientRect()\n         const x = clientX - rect.left + 16 // offset to position the scratched circle with cursor\n         const y = clientY - rect.top + 16\n         ctx.globalCompositeOperation = \"destination-out\"\n         ctx.beginPath()\n         ctx.arc(x, y, 30, 0, Math.PI * 2)\n         ctx.fill()\n      }\n   }\n\n   const checkCompletion = () => {\n      if (isComplete) return // Check if already completed\n\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext(\"2d\")\n      if (canvas && ctx) {\n         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n         const pixels = imageData.data\n         const totalPixels = pixels.length / 4\n         let clearPixels = 0\n\n         for (let i = 3; i < pixels.length; i += 4) {\n            if (pixels[i] === 0) clearPixels++\n         }\n\n         const percentage = (clearPixels / totalPixels) * 100\n\n         if (percentage >= minScratchPercentage) {\n            setIsComplete(true) // Set complete flag\n            ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvas to reveal everything\n            startAnimation()\n            if (onComplete) onComplete()\n         }\n      }\n   }\n\n   const startAnimation = () => {\n      controls.start({\n         scale: [1, 1.5, 1],\n         rotate: [0, 10, -10, 10, -10, 0],\n         transition: { duration: 0.5 },\n      })\n   }\n\n   return (\n      <motion.div\n         className={cn(\"relative select-none\", className)}\n         style={{\n            width,\n            height,\n            cursor:\n               \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto\",\n         }}\n         animate={controls}\n      >\n         <canvas\n            ref={canvasRef}\n            width={width}\n            height={height}\n            className=\"absolute left-0 top-0\"\n            onMouseDown={handleMouseDown}\n            onTouchStart={handleTouchStart}\n         ></canvas>\n         {children}\n      </motion.div>\n   )\n}\n\nexport default ScratchToReveal\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/script-copy-btn-demo.json b/apps/web/public/v0/styles/miami/script-copy-btn-demo.json
new file mode 100644
index 00000000..cabdbf0a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/script-copy-btn-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "script-copy-btn-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/script-copy-btn-demo.tsx",
+      "content": "import { ScriptCopyBtn } from \"@/components/ui/script-copy-btn\"\n\nexport default function ScriptCopyBtnDemo() {\n   const customCommandMap = {\n      npm: \"npm run nyxb add button\",\n      yarn: \"yarn nyxb add button\",\n      pnpm: \"pnpm dlx nyxb@latest add button\",\n      bun: \"bun x nyxb@latest add button\",\n   }\n   return (\n      <ScriptCopyBtn\n         showMultiplePackageOptions={true}\n         codeLanguage=\"shell\"\n         lightTheme=\"nord\"\n         darkTheme=\"vitesse-dark\"\n         commandMap={customCommandMap}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/script-copy-btn.json b/apps/web/public/v0/styles/miami/script-copy-btn.json
new file mode 100644
index 00000000..f1bf5ff9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/script-copy-btn.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "script-copy-btn",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion",
+    "shiki",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "ui/script-copy-btn.tsx",
+      "content": "\"use client\"\n\nimport { Check, Copy } from \"lucide-react\"\nimport { motion } from \"motion/react\"\nimport { useTheme } from \"next-themes\"\nimport { type HTMLAttributes, useEffect, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ninterface ScriptCopyBtnProps extends HTMLAttributes<HTMLDivElement> {\n   showMultiplePackageOptions?: boolean\n   codeLanguage: string\n   lightTheme: string\n   darkTheme: string\n   commandMap: Record<string, string>\n   className?: string\n}\n\nexport function ScriptCopyBtn({\n   showMultiplePackageOptions = true,\n   codeLanguage,\n   lightTheme,\n   darkTheme,\n   commandMap,\n   className,\n}: ScriptCopyBtnProps) {\n   const packageManagers = Object.keys(commandMap)\n   const [packageManager, setPackageManager] = useState(packageManagers[0])\n   const [copied, setCopied] = useState(false)\n   const [highlightedCode, setHighlightedCode] = useState(\"\")\n   const { theme } = useTheme()\n   const command = commandMap[packageManager]\n\n   useEffect(() => {\n      async function loadHighlightedCode() {\n         try {\n            const { codeToHtml } = await import(\"shiki\")\n            const highlighted = await codeToHtml(command, {\n               lang: codeLanguage,\n               themes: {\n                  light: lightTheme,\n                  dark: darkTheme,\n               },\n               defaultColor: theme === \"dark\" ? \"dark\" : \"light\",\n            })\n            setHighlightedCode(highlighted)\n         } catch (error) {\n            console.error(\"Error highlighting code:\", error)\n            setHighlightedCode(`<pre>${command}</pre>`)\n         }\n      }\n\n      loadHighlightedCode()\n   }, [command, theme, codeLanguage, lightTheme, darkTheme])\n\n   const copyToClipboard = () => {\n      navigator.clipboard.writeText(command)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n   }\n\n   return (\n      <div\n         className={cn(\n            \"mx-auto flex max-w-md items-center justify-center\",\n            className,\n         )}\n      >\n         <div className=\"w-full space-y-2\">\n            <div className=\"mb-2 flex items-center justify-between\">\n               {showMultiplePackageOptions && (\n                  <div className=\"relative\">\n                     <div className=\"inline-flex overflow-hidden rounded-md border border-border text-xs\">\n                        {packageManagers.map((pm, index) => (\n                           <div key={pm} className=\"flex items-center\">\n                              {index > 0 && (\n                                 <div\n                                    className=\"h-4 w-px bg-border\"\n                                    aria-hidden=\"true\"\n                                 />\n                              )}\n                              <Button\n                                 variant=\"ghost\"\n                                 size=\"sm\"\n                                 className={`relative rounded-none bg-background px-2 py-1 hover:bg-background ${\n                                    packageManager === pm\n                                       ? \"text-primary\"\n                                       : \"text-muted-foreground\"\n                                 }`}\n                                 onClick={() => setPackageManager(pm)}\n                              >\n                                 {pm}\n                                 {packageManager === pm && (\n                                    <motion.div\n                                       className=\"absolute inset-x-0 bottom-[1px] mx-auto h-0.5 w-[90%] bg-primary\"\n                                       layoutId=\"activeTab\"\n                                       initial={false}\n                                       transition={{\n                                          type: \"spring\",\n                                          stiffness: 500,\n                                          damping: 30,\n                                       }}\n                                    />\n                                 )}\n                              </Button>\n                           </div>\n                        ))}\n                     </div>\n                  </div>\n               )}\n            </div>\n            <div className=\"relative flex items-center\">\n               <div className=\"min-w-[300px] grow font-mono\">\n                  {highlightedCode ? (\n                     <div\n                        className={`[&>pre]:overflow-x-auto [&>pre]:rounded-md [&>pre]:p-2 [&>pre]:px-4 [&>pre]:font-mono ${\n                           theme === \"dark\" ? \"dark\" : \"light\"\n                        }`}\n                        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n                     />\n                  ) : (\n                     <pre className=\"rounded-md border border-border bg-white p-2 px-4 font-mono dark:bg-black\">\n                        {command}\n                     </pre>\n                  )}\n               </div>\n               <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  className=\"relative ml-2 rounded-md\"\n                  onClick={copyToClipboard}\n                  aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n               >\n                  <span className=\"sr-only\">{copied ? \"Copied\" : \"Copy\"}</span>\n                  <Copy\n                     className={`h-4 w-4 transition-all duration-300 ${\n                        copied ? \"scale-0\" : \"scale-100\"\n                     }`}\n                  />\n                  <Check\n                     className={`absolute inset-0 m-auto h-4 w-4 transition-all duration-300 ${\n                        copied ? \"scale-100\" : \"scale-0\"\n                     }`}\n                  />\n               </Button>\n            </div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/scroll-area-demo.json b/apps/web/public/v0/styles/miami/scroll-area-demo.json
new file mode 100644
index 00000000..61ad8ec6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/scroll-area-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-area-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "examples/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n   (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n\nexport default function ScrollAreaDemo() {\n   return (\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n         <div className=\"p-4\">\n            <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n            {tags.map((tag) => (\n               <>\n                  <div key={tag} className=\"text-sm\">\n                     {tag}\n                  </div>\n                  <Separator className=\"my-2\" />\n               </>\n            ))}\n         </div>\n      </ScrollArea>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/scroll-area-horizontal-demo.json b/apps/web/public/v0/styles/miami/scroll-area-horizontal-demo.json
new file mode 100644
index 00000000..0d81727d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/scroll-area-horizontal-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-area-horizontal-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "examples/scroll-area-horizontal-demo.tsx",
+      "content": "import Image from \"next/image\"\nimport * as React from \"react\"\n\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\"\n\nexport interface Artwork {\n   artist: string\n   art: string\n}\n\nexport const works: Artwork[] = [\n   {\n      artist: \"Ornella Binni\",\n      art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n   },\n   {\n      artist: \"Tom Byrom\",\n      art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n   },\n   {\n      artist: \"Vladimir Malyavko\",\n      art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n   },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n   return (\n      <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n         <div className=\"flex w-max space-x-4 p-4\">\n            {works.map((artwork) => (\n               <figure key={artwork.artist} className=\"shrink-0\">\n                  <div className=\"overflow-hidden rounded-md\">\n                     <Image\n                        src={artwork.art}\n                        alt={`Photo by ${artwork.artist}`}\n                        className=\"aspect-[3/4] size-fit object-cover\"\n                        width={300}\n                        height={400}\n                     />\n                  </div>\n                  <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                     Photo by{\" \"}\n                     <span className=\"text-foreground font-semibold\">\n                        {artwork.artist}\n                     </span>\n                  </figcaption>\n               </figure>\n            ))}\n         </div>\n         <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/scroll-area.json b/apps/web/public/v0/styles/miami/scroll-area.json
new file mode 100644
index 00000000..a1c4e4e7
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/scroll-area.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-area",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-scroll-area"
+  ],
+  "files": [
+    {
+      "path": "ui/scroll-area.tsx",
+      "content": "\"use client\"\n\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n   React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n   <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={cn(\"relative overflow-hidden\", className)}\n      {...props}\n   >\n      <ScrollAreaPrimitive.Viewport className=\"size-full rounded-[inherit]\">\n         {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n   </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n   React.ComponentPropsWithoutRef<\n      typeof ScrollAreaPrimitive.ScrollAreaScrollbar\n   >\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n   <ScrollAreaPrimitive.ScrollAreaScrollbar\n      ref={ref}\n      orientation={orientation}\n      className={cn(\n         \"flex touch-none select-none transition-colors\",\n         orientation === \"vertical\" &&\n            \"h-full w-2.5 border-l border-l-transparent p-px\",\n         orientation === \"horizontal\" &&\n            \"h-2.5 flex-col border-t border-t-transparent p-px\",\n         className,\n      )}\n      {...props}\n   >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-border relative flex-1 rounded-full\" />\n   </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/scroll-based-velocity-demo.json b/apps/web/public/v0/styles/miami/scroll-based-velocity-demo.json
new file mode 100644
index 00000000..4aa3898f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/scroll-based-velocity-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-based-velocity-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/scroll-based-velocity-demo.tsx",
+      "content": "import { VelocityScroll } from \"@/components/ui/scroll-based-velocity\"\n\nexport default function ScrollBasedVelocityDemo() {\n   return (\n      <VelocityScroll\n         text=\"Velocity Scroll\"\n         default_velocity={5}\n         className=\"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/scroll-based-velocity.json b/apps/web/public/v0/styles/miami/scroll-based-velocity.json
new file mode 100644
index 00000000..8be950ff
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/scroll-based-velocity.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-based-velocity",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/scroll-based-velocity.tsx",
+      "content": "\"use client\"\n\nimport { wrap } from \"@motionone/utils\"\nimport {\n   motion,\n   useAnimationFrame,\n   useMotionValue,\n   useScroll,\n   useSpring,\n   useTransform,\n   useVelocity,\n} from \"framer-motion\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface VelocityScrollProps {\n   text: string\n   default_velocity?: number\n   className?: string\n}\n\ninterface ParallaxProps {\n   children: string\n   baseVelocity: number\n   className?: string\n}\n\nexport function VelocityScroll({\n   text,\n   default_velocity = 5,\n   className,\n}: VelocityScrollProps) {\n   function ParallaxText({\n      children,\n      baseVelocity = 100,\n      className,\n   }: ParallaxProps) {\n      const baseX = useMotionValue(0)\n      const { scrollY } = useScroll()\n      const scrollVelocity = useVelocity(scrollY)\n      const smoothVelocity = useSpring(scrollVelocity, {\n         damping: 50,\n         stiffness: 400,\n      })\n\n      const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {\n         clamp: false,\n      })\n\n      const [repetitions, setRepetitions] = useState(1)\n      const containerRef = useRef<HTMLDivElement>(null)\n      const textRef = useRef<HTMLSpanElement>(null)\n\n      useEffect(() => {\n         const calculateRepetitions = () => {\n            if (containerRef.current && textRef.current) {\n               const containerWidth = containerRef.current.offsetWidth\n               const textWidth = textRef.current.offsetWidth\n               const newRepetitions = Math.ceil(containerWidth / textWidth) + 2\n               setRepetitions(newRepetitions)\n            }\n         }\n\n         calculateRepetitions()\n\n         window.addEventListener(\"resize\", calculateRepetitions)\n         return () => window.removeEventListener(\"resize\", calculateRepetitions)\n      }, [children])\n\n      const x = useTransform(baseX, (v) => `${wrap(-100 / repetitions, 0, v)}%`)\n\n      const directionFactor = React.useRef<number>(1)\n      useAnimationFrame((t, delta) => {\n         let moveBy = directionFactor.current * baseVelocity * (delta / 1000)\n\n         if (velocityFactor.get() < 0) directionFactor.current = -1\n         else if (velocityFactor.get() > 0) directionFactor.current = 1\n\n         moveBy += directionFactor.current * moveBy * velocityFactor.get()\n\n         baseX.set(baseX.get() + moveBy)\n      })\n\n      return (\n         <div\n            className=\"w-full overflow-hidden whitespace-nowrap\"\n            ref={containerRef}\n         >\n            <motion.div className={cn(\"inline-block\", className)} style={{ x }}>\n               {Array.from({ length: repetitions }).map((_, i) => (\n                  <span key={i} ref={i === 0 ? textRef : null}>\n                     {children}{\" \"}\n                  </span>\n               ))}\n            </motion.div>\n         </div>\n      )\n   }\n\n   return (\n      <section className=\"relative w-full\">\n         <ParallaxText baseVelocity={default_velocity} className={className}>\n            {text}\n         </ParallaxText>\n         <ParallaxText baseVelocity={-default_velocity} className={className}>\n            {text}\n         </ParallaxText>\n      </section>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/scroll-progress-demo.json b/apps/web/public/v0/styles/miami/scroll-progress-demo.json
new file mode 100644
index 00000000..c628ecc5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/scroll-progress-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-progress-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/scroll-progress-demo.tsx",
+      "content": "import ScrollProgress from \"@/components/ui/scroll-progress\"\n\nconst dummyContent = Array.from({ length: 10 }, (_, i) => (\n   <p key={i}>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam\n      lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra\n      nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam\n      eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue\n      enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu\n      vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur\n      adipiscing elit.\n   </p>\n))\n\nfunction ScrollProgressDemo() {\n   return (\n      <div>\n         <ScrollProgress className=\"top-[65px]\" />\n         <strong>\n            Note: The scroll progress is shown below the navbar of the page.\n         </strong>\n         {dummyContent}\n      </div>\n   )\n}\n\nexport default ScrollProgressDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/scroll-progress.json b/apps/web/public/v0/styles/miami/scroll-progress.json
new file mode 100644
index 00000000..4d35e070
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/scroll-progress.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "scroll-progress",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/scroll-progress.tsx",
+      "content": "import { motion, useScroll, useSpring } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface ScrollProgressProps {\n   className?: string\n}\n\nexport default function ScrollProgress({ className }: ScrollProgressProps) {\n   const { scrollYProgress } = useScroll()\n\n   const scaleX = useSpring(scrollYProgress, {\n      stiffness: 200,\n      damping: 50,\n      restDelta: 0.001,\n   })\n\n   return (\n      <motion.div\n         className={cn(\n            \"fixed inset-x-0 top-0 z-[1000] h-1 origin-left bg-gradient-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]\",\n            className,\n         )}\n         style={{\n            scaleX,\n         }}\n      />\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/select-demo.json b/apps/web/public/v0/styles/miami/select-demo.json
new file mode 100644
index 00000000..9edbba5a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/select-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "select-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function SelectDemo() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[180px]\">\n            <SelectValue placeholder=\"Select a fruit\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>Fruits</SelectLabel>\n               <SelectItem value=\"apple\">Apple</SelectItem>\n               <SelectItem value=\"banana\">Banana</SelectItem>\n               <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n               <SelectItem value=\"grapes\">Grapes</SelectItem>\n               <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/select-form.json b/apps/web/public/v0/styles/miami/select-form.json
new file mode 100644
index 00000000..27bc2ae8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/select-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "select-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport Link from \"next/link\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport {\n   Select,\n   SelectContent,\n   SelectItem,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   email: z\n      .string({\n         required_error: \"Please select an email to display.\",\n      })\n      .email(),\n})\n\nexport default function SelectForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"email\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Email</FormLabel>\n                     <Select\n                        onValueChange={field.onChange}\n                        defaultValue={field.value}\n                     >\n                        <FormControl>\n                           <SelectTrigger>\n                              <SelectValue placeholder=\"Select a verified email to display\" />\n                           </SelectTrigger>\n                        </FormControl>\n                        <SelectContent>\n                           <SelectItem value=\"m@example.com\">\n                              m@example.com\n                           </SelectItem>\n                           <SelectItem value=\"m@google.com\">\n                              m@google.com\n                           </SelectItem>\n                           <SelectItem value=\"m@support.com\">\n                              m@support.com\n                           </SelectItem>\n                        </SelectContent>\n                     </Select>\n                     <FormDescription>\n                        You can manage email addresses in your{\" \"}\n                        <Link href=\"/examples/forms\">email settings</Link>.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/select-scrollable.json b/apps/web/public/v0/styles/miami/select-scrollable.json
new file mode 100644
index 00000000..4b53e369
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/select-scrollable.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "select-scrollable",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-scrollable.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function SelectScrollable() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[280px]\">\n            <SelectValue placeholder=\"Select a timezone\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>North America</SelectLabel>\n               <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n               <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n               <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n               <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n               <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n               <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Europe & Africa</SelectLabel>\n               <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n               <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n               <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n               <SelectItem value=\"west\">\n                  Western European Summer Time (WEST)\n               </SelectItem>\n               <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n               <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Asia</SelectLabel>\n               <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n               <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n               <SelectItem value=\"cst_china\">\n                  China Standard Time (CST)\n               </SelectItem>\n               <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n               <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n               <SelectItem value=\"ist_indonesia\">\n                  Indonesia Central Standard Time (WITA)\n               </SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>Australia & Pacific</SelectLabel>\n               <SelectItem value=\"awst\">\n                  Australian Western Standard Time (AWST)\n               </SelectItem>\n               <SelectItem value=\"acst\">\n                  Australian Central Standard Time (ACST)\n               </SelectItem>\n               <SelectItem value=\"aest\">\n                  Australian Eastern Standard Time (AEST)\n               </SelectItem>\n               <SelectItem value=\"nzst\">\n                  New Zealand Standard Time (NZST)\n               </SelectItem>\n               <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n            </SelectGroup>\n            <SelectGroup>\n               <SelectLabel>South America</SelectLabel>\n               <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n               <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n               <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n               <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/select.json b/apps/web/public/v0/styles/miami/select.json
new file mode 100644
index 00000000..b8d86b81
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/select.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "select",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-select"
+  ],
+  "files": [
+    {
+      "path": "ui/select.tsx",
+      "content": "\"use client\"\n\nimport {\n   CaretSortIcon,\n   CheckIcon,\n   ChevronDownIcon,\n   ChevronUpIcon,\n} from \"@radix-ui/react-icons\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n   <SelectPrimitive.Trigger\n      ref={ref}\n      className={cn(\n         \"border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-left text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left\",\n         className,\n      )}\n      onPointerDown={(e) => {\n         if (e.pointerType === \"touch\") e.preventDefault()\n      }}\n      {...props}\n   >\n      {children}\n      <SelectPrimitive.Icon asChild>\n         <CaretSortIcon className=\"size-4 shrink-0 opacity-50\" />\n      </SelectPrimitive.Icon>\n   </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.ScrollUpButton\n      ref={ref}\n      className={cn(\n         \"flex cursor-default items-center justify-center py-1\",\n         className,\n      )}\n      {...props}\n   >\n      <ChevronUpIcon />\n   </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.ScrollDownButton\n      ref={ref}\n      className={cn(\n         \"flex cursor-default items-center justify-center py-1\",\n         className,\n      )}\n      {...props}\n   >\n      <ChevronDownIcon />\n   </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n   SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n   <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n         ref={ref}\n         className={cn(\n            \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md\",\n            position === \"popper\" &&\n               \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n            className,\n         )}\n         position={position}\n         {...props}\n      >\n         <SelectScrollUpButton />\n         <SelectPrimitive.Viewport\n            className={cn(\n               \"p-1\",\n               position === \"popper\" &&\n                  \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n            )}\n         >\n            {children}\n         </SelectPrimitive.Viewport>\n         <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n   </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Label>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.Label\n      ref={ref}\n      className={cn(\"px-2 py-1.5 text-sm font-semibold\", className)}\n      {...props}\n   />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n   <SelectPrimitive.Item\n      ref={ref}\n      className={cn(\n         \"focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n         className,\n      )}\n      {...props}\n   >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n         <SelectPrimitive.ItemIndicator>\n            <CheckIcon className=\"size-4\" />\n         </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n   </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n   React.ElementRef<typeof SelectPrimitive.Separator>,\n   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n   <SelectPrimitive.Separator\n      ref={ref}\n      className={cn(\"bg-muted -mx-1 my-1 h-px\", className)}\n      {...props}\n   />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n   Select,\n   SelectGroup,\n   SelectValue,\n   SelectTrigger,\n   SelectContent,\n   SelectLabel,\n   SelectItem,\n   SelectSeparator,\n   SelectScrollUpButton,\n   SelectScrollDownButton,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/separate-away-demo.json b/apps/web/public/v0/styles/miami/separate-away-demo.json
new file mode 100644
index 00000000..f3e342a0
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/separate-away-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "separate-away-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/separate-away-demo.tsx",
+      "content": "import { SeparateAway } from \"@/components/ui/separate-away\"\n\nexport default async function SeparateAwayDemo() {\n   return (\n      <SeparateAway\n         upper_text=\"Separate\"\n         lower_text=\"Away\"\n         duration={1.5}\n         hidden_opacity={0}\n         visible_opacity={1}\n         className=\"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/separate-away.json b/apps/web/public/v0/styles/miami/separate-away.json
new file mode 100644
index 00000000..1c630d88
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/separate-away.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "separate-away",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/separate-away.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface SeparateAwayProps {\n   upper_text: string\n   lower_text: string\n   duration?: number\n   hidden_opacity?: number\n   visible_opacity?: number\n   className?: string\n}\n\nexport function SeparateAway({\n   upper_text,\n   lower_text,\n   duration = 1.5,\n   hidden_opacity = 0,\n   visible_opacity = 1,\n   className,\n}: SeparateAwayProps) {\n   const separate = {\n      hidden: { opacity: hidden_opacity, y: 0 },\n      visible: (custom: number) => ({\n         opacity: visible_opacity,\n         y: custom * 5,\n         transition: { duration },\n      }),\n   }\n\n   return (\n      <div>\n         <motion.h1\n            custom={-1}\n            variants={separate}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className={cn(className)}\n         >\n            {upper_text}\n         </motion.h1>\n         <motion.h1\n            custom={1}\n            variants={separate}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className={cn(className)}\n         >\n            {lower_text}\n         </motion.h1>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/separator-demo.json b/apps/web/public/v0/styles/miami/separator-demo.json
new file mode 100644
index 00000000..ae3dc1af
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/separator-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "separator-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/separator-demo.tsx",
+      "content": "import { Separator } from \"@/components/ui/separator\"\n\nexport default function SeparatorDemo() {\n   return (\n      <div>\n         <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-medium leading-none\">\n               Radix Primitives\n            </h4>\n            <p className=\"text-muted-foreground text-sm\">\n               An open-source UI component library.\n            </p>\n         </div>\n         <Separator className=\"my-4\" />\n         <div className=\"flex h-5 items-center space-x-4 text-sm\">\n            <div>Blog</div>\n            <Separator orientation=\"vertical\" />\n            <div>Docs</div>\n            <Separator orientation=\"vertical\" />\n            <div>Source</div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/separator.json b/apps/web/public/v0/styles/miami/separator.json
new file mode 100644
index 00000000..f8e7d15c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "separator",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-separator"
+  ],
+  "files": [
+    {
+      "path": "ui/separator.tsx",
+      "content": "\"use client\"\n\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n   React.ElementRef<typeof SeparatorPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n   (\n      { className, orientation = \"horizontal\", decorative = true, ...props },\n      ref,\n   ) => (\n      <SeparatorPrimitive.Root\n         ref={ref}\n         decorative={decorative}\n         orientation={orientation}\n         className={cn(\n            \"shrink-0 bg-border\",\n            orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n            className,\n         )}\n         {...props}\n      />\n   ),\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sheet-demo.json b/apps/web/public/v0/styles/miami/sheet-demo.json
new file mode 100644
index 00000000..dd608fdb
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sheet-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sheet-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/sheet-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from \"@/components/ui/sheet\"\n\nexport default function SheetDemo() {\n   return (\n      <Sheet>\n         <SheetTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </SheetTrigger>\n         <SheetContent>\n            <SheetHeader>\n               <SheetTitle>Edit profile</SheetTitle>\n               <SheetDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"@peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <SheetFooter>\n               <SheetClose asChild>\n                  <Button type=\"submit\">Save changes</Button>\n               </SheetClose>\n            </SheetFooter>\n         </SheetContent>\n      </Sheet>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sheet-side.json b/apps/web/public/v0/styles/miami/sheet-side.json
new file mode 100644
index 00000000..3a324fb3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sheet-side.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sheet-side",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/sheet-side.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from \"@/components/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n   return (\n      <div className=\"grid grid-cols-2 gap-2\">\n         {SHEET_SIDES.map((side) => (\n            <Sheet key={side}>\n               <SheetTrigger asChild>\n                  <Button variant=\"outline\">{side}</Button>\n               </SheetTrigger>\n               <SheetContent side={side}>\n                  <SheetHeader>\n                     <SheetTitle>Edit profile</SheetTitle>\n                     <SheetDescription>\n                        Make changes to your profile here. Click save when\n                        you're done.\n                     </SheetDescription>\n                  </SheetHeader>\n                  <div className=\"grid gap-4 py-4\">\n                     <div className=\"grid grid-cols-4 items-center gap-4\">\n                        <Label htmlFor=\"name\" className=\"text-right\">\n                           Name\n                        </Label>\n                        <Input\n                           id=\"name\"\n                           value=\"Pedro Duarte\"\n                           className=\"col-span-3\"\n                        />\n                     </div>\n                     <div className=\"grid grid-cols-4 items-center gap-4\">\n                        <Label htmlFor=\"username\" className=\"text-right\">\n                           Username\n                        </Label>\n                        <Input\n                           id=\"username\"\n                           value=\"~peduarte\"\n                           className=\"col-span-3\"\n                        />\n                     </div>\n                  </div>\n                  <SheetFooter>\n                     <SheetClose asChild>\n                        <Button type=\"submit\">Save changes</Button>\n                     </SheetClose>\n                  </SheetFooter>\n               </SheetContent>\n            </Sheet>\n         ))}\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sheet.json b/apps/web/public/v0/styles/miami/sheet.json
new file mode 100644
index 00000000..5bc63a2b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sheet.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sheet",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/sheet.tsx",
+      "content": "\"use client\"\n\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Overlay\n      className={cn(\n         \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80\",\n         className,\n      )}\n      {...props}\n      ref={ref}\n   />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n   \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\n   {\n      variants: {\n         side: {\n            top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n            bottom:\n               \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n            left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n            right: \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n         },\n      },\n      defaultVariants: {\n         side: \"right\",\n      },\n   },\n)\n\ninterface SheetContentProps\n   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n      VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Content>,\n   SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n   <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n         ref={ref}\n         className={cn(sheetVariants({ side }), className)}\n         {...props}\n      >\n         <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n            <Cross2Icon className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n         </SheetPrimitive.Close>\n         {children}\n      </SheetPrimitive.Content>\n   </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nfunction SheetHeader({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\n            \"flex flex-col space-y-2 text-center sm:text-start\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nSheetHeader.displayName = \"SheetHeader\"\n\nfunction SheetFooter({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n}\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Title\n      ref={ref}\n      className={cn(\"text-foreground text-lg font-semibold\", className)}\n      {...props}\n   />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n   React.ElementRef<typeof SheetPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <SheetPrimitive.Description\n      ref={ref}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n   />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n   Sheet,\n   SheetPortal,\n   SheetOverlay,\n   SheetTrigger,\n   SheetClose,\n   SheetContent,\n   SheetHeader,\n   SheetFooter,\n   SheetTitle,\n   SheetDescription,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/shimmer-button-demo.json b/apps/web/public/v0/styles/miami/shimmer-button-demo.json
new file mode 100644
index 00000000..c869dcb8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/shimmer-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shimmer-button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/shimmer-button-demo.tsx",
+      "content": "import ShimmerButton from \"@/components/ui/shimmer-button\"\n\nexport default function ShimmerButtonDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center\">\n         <ShimmerButton className=\"shadow-2xl\">\n            <span className=\"whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10\">\n               Shimmer Button\n            </span>\n         </ShimmerButton>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/shimmer-button.json b/apps/web/public/v0/styles/miami/shimmer-button.json
new file mode 100644
index 00000000..f21c3f79
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/shimmer-button.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shimmer-button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/shimmer-button.tsx",
+      "content": "import type { CSSProperties } from \"react\"\nimport React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ShimmerButtonProps\n   extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n   shimmerColor?: string\n   shimmerSize?: string\n   borderRadius?: string\n   shimmerDuration?: string\n   background?: string\n   className?: string\n   children?: React.ReactNode\n}\n\nconst ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(\n   (\n      {\n         shimmerColor = \"#ffffff\",\n         shimmerSize = \"0.05em\",\n         shimmerDuration = \"3s\",\n         borderRadius = \"100px\",\n         background = \"rgba(0, 0, 0, 1)\",\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      return (\n         <button\n            type=\"button\"\n            style={\n               {\n                  \"--spread\": \"90deg\",\n                  \"--shimmer-color\": shimmerColor,\n                  \"--radius\": borderRadius,\n                  \"--speed\": shimmerDuration,\n                  \"--cut\": shimmerSize,\n                  \"--bg\": background,\n               } as CSSProperties\n            }\n            className={cn(\n               \"group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black\",\n               \"transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         >\n            {/* spark container */}\n            <div\n               className={cn(\n                  \"-z-30 blur-[2px]\",\n                  \"absolute inset-0 overflow-visible [container-type:size]\",\n               )}\n            >\n               {/* spark */}\n               <div className=\"animate-slide absolute inset-0 h-[100cqh] [aspect-ratio:1] [border-radius:0] [mask:none]\">\n                  {/* spark before */}\n                  <div className=\"animate-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]\" />\n               </div>\n            </div>\n            {children}\n\n            {/* Highlight */}\n            <div\n               className={cn(\n                  \"insert-0 absolute size-full\",\n\n                  \"rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]\",\n\n                  // transition\n                  \"transform-gpu transition-all duration-300 ease-in-out\",\n\n                  // on hover\n                  \"group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]\",\n\n                  // on click\n                  \"group-active:shadow-[inset_0_-10px_10px_#ffffff3f]\",\n               )}\n            />\n\n            {/* backdrop */}\n            <div\n               className={cn(\n                  \"absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]\",\n               )}\n            />\n         </button>\n      )\n   },\n)\n\nShimmerButton.displayName = \"ShimmerButton\"\n\nexport default ShimmerButton\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "shimmer-slide": "shimmer-slide var(--speed) ease-in-out infinite alternate",
+            "spin-around": "spin-around calc(var(--speed) * 2) infinite linear"
+          },
+          "keyframes": {
+            "shimmer-slide": {
+              "to": {
+                "transform": "translate(calc(100cqw - 100%), 0)"
+              }
+            },
+            "spin-around": {
+              "0%": {
+                "transform": "translateZ(0) rotate(0)"
+              },
+              "15%, 35%": {
+                "transform": "translateZ(0) rotate(90deg)"
+              },
+              "65%, 85%": {
+                "transform": "translateZ(0) rotate(270deg)"
+              },
+              "100%": {
+                "transform": "translateZ(0) rotate(360deg)"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/shine-border-demo-2.json b/apps/web/public/v0/styles/miami/shine-border-demo-2.json
new file mode 100644
index 00000000..f1469fd6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/shine-border-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shine-border-demo-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/shine-border-demo-2.tsx",
+      "content": "import ShineBorder from \"@/components/ui/shine-border\"\n\nexport default function ShineBorderDemo() {\n   return (\n      <ShineBorder className=\"text-center text-2xl font-bold capitalize\">\n         Shine Border\n      </ShineBorder>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/shine-border-demo.json b/apps/web/public/v0/styles/miami/shine-border-demo.json
new file mode 100644
index 00000000..f17ae1fb
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/shine-border-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shine-border-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/shine-border-demo.tsx",
+      "content": "import ShineBorder from \"@/components/ui/shine-border\"\n\nexport default function ShineBorderDemo() {\n   return (\n      <ShineBorder\n         className=\"bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl\"\n         color={[\"#A07CFE\", \"#FE8FB5\", \"#FFBE7B\"]}\n      >\n         <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n            Shine Border\n         </span>\n      </ShineBorder>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/shine-border.json b/apps/web/public/v0/styles/miami/shine-border.json
new file mode 100644
index 00000000..9d563789
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/shine-border.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shine-border",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/shine-border.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype TColorProp = string | string[]\n\ninterface ShineBorderProps {\n   borderRadius?: number\n   borderWidth?: number\n   duration?: number\n   color?: TColorProp\n   className?: string\n   children: React.ReactNode\n}\n\n/**\n * @name Shine Border\n * @description It is an animated background border effect component with easy to use and configurable props.\n * @param borderRadius defines the radius of the border.\n * @param borderWidth defines the width of the border.\n * @param duration defines the animation duration to be applied on the shining border\n * @param color a string or string array to define border color.\n * @param className defines the class name to be applied to the component\n * @param children contains react node elements.\n */\nexport default function ShineBorder({\n   borderRadius = 8,\n   borderWidth = 1,\n   duration = 14,\n   color = \"#000000\",\n   className,\n   children,\n}: ShineBorderProps) {\n   return (\n      <div\n         style={\n            {\n               \"--border-radius\": `${borderRadius}px`,\n            } as React.CSSProperties\n         }\n         className={cn(\n            \"relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white\",\n            className,\n         )}\n      >\n         <div\n            style={\n               {\n                  \"--border-width\": `${borderWidth}px`,\n                  \"--border-radius\": `${borderRadius}px`,\n                  \"--duration\": `${duration}s`,\n                  \"--mask-linear-gradient\": `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,\n                  \"--background-radial-gradient\": `radial-gradient(transparent,transparent, ${Array.isArray(color) ? color.join(\",\") : color},transparent,transparent)`,\n               } as React.CSSProperties\n            }\n            className={`before:bg-shine-size motion-safe:before:animate-shine before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[\"\"] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient]`}\n         ></div>\n         {children}\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "shine": "shine var(--duration) infinite linear"
+          },
+          "keyframes": {
+            "shine": {
+              "0%": {
+                "background-position": "0% 0%"
+              },
+              "50%": {
+                "background-position": "100% 100%"
+              },
+              "to": {
+                "background-position": "0% 0%"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/shiny-button-demo.json b/apps/web/public/v0/styles/miami/shiny-button-demo.json
new file mode 100644
index 00000000..d3660222
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/shiny-button-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shiny-button-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/shiny-button-demo.tsx",
+      "content": "import ShinyButton from \"@/components/ui/shiny-button\"\n\nexport default function ShinyButtonDemo() {\n   return <ShinyButton text=\"Shiny Button\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/shiny-button.json b/apps/web/public/v0/styles/miami/shiny-button.json
new file mode 100644
index 00000000..54ce26fb
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/shiny-button.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "shiny-button",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/shiny-button.tsx",
+      "content": "\"use client\"\nimport { type AnimationProps, motion } from \"framer-motion\"\n\nconst animationProps = {\n   initial: { \"--x\": \"100%\", scale: 0.8 },\n   animate: { \"--x\": \"-100%\", scale: 1 },\n   whileTap: { scale: 0.95 },\n   transition: {\n      repeat: Number.POSITIVE_INFINITY,\n      repeatType: \"loop\",\n      repeatDelay: 1,\n      type: \"spring\",\n      stiffness: 20,\n      damping: 15,\n      mass: 2,\n      scale: {\n         type: \"spring\",\n         stiffness: 200,\n         damping: 5,\n         mass: 0.5,\n      },\n   },\n} as AnimationProps\n\nfunction ShinyButton({ text = \"shiny-button\" }) {\n   return (\n      <motion.button\n         {...animationProps}\n         className=\"relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]\"\n      >\n         <span\n            className=\"relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]\"\n            style={{\n               maskImage:\n                  \"linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))\",\n            }}\n         >\n            {text}\n         </span>\n         <span\n            style={{\n               mask: \"linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))\",\n               maskComposite: \"exclude\",\n            }}\n            className=\"absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px\"\n         ></span>\n      </motion.button>\n   )\n}\n\nexport default ShinyButton\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-01.json b/apps/web/public/v0/styles/miami/sidebar-01.json
new file mode 100644
index 00000000..f98783ec
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-01.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-01",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A simple sidebar with navigation grouped by section.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import type * as React from \"react\"\n\nimport { SearchForm } from \"@/components/search-form\"\nimport { VersionSwitcher } from \"@/components/version-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <VersionSwitcher\n               versions={data.versions}\n               defaultVersion={data.versions[0]}\n            />\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent>\n            {/* We create a SidebarGroup for each parent. */}\n            {data.navMain.map((item) => (\n               <SidebarGroup key={item.title}>\n                  <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {item.items.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 asChild\n                                 isActive={item.isActive}\n                              >\n                                 <a href={item.url}>{item.title}</a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            ))}\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-01/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/components/ui/label\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from \"@/components/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-01/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function VersionSwitcher({\n   versions,\n   defaultVersion,\n}: {\n   versions: string[]\n   defaultVersion: string\n}) {\n   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <GalleryVerticalEnd className=\"size-4\" />\n                     </div>\n                     <div className=\"flex flex-col gap-0.5 leading-none\">\n                        <span className=\"font-semibold\">Documentation</span>\n                        <span className=\"\">v{selectedVersion}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n               >\n                  {versions.map((version) => (\n                     <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                     >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                           <Check className=\"ml-auto\" />\n                        )}\n                     </DropdownMenuItem>\n                  ))}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-02.json b/apps/web/public/v0/styles/miami/sidebar-02.json
new file mode 100644
index 00000000..ecb9e3e8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-02.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-02",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with collapsible sections.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { SearchForm } from \"@/components/search-form\"\nimport { VersionSwitcher } from \"@/components/version-switcher\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <VersionSwitcher\n               versions={data.versions}\n               defaultVersion={data.versions[0]}\n            />\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent className=\"gap-0\">\n            {/* We create a collapsible SidebarGroup for each parent. */}\n            {data.navMain.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  title={item.title}\n                  defaultOpen\n                  className=\"group/collapsible\"\n               >\n                  <SidebarGroup>\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {item.title}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {item.items.map((item) => (\n                                 <SidebarMenuItem key={item.title}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={item.isActive}\n                                    >\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </SidebarGroup>\n               </Collapsible>\n            ))}\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-02/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/components/ui/label\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from \"@/components/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-02/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function VersionSwitcher({\n   versions,\n   defaultVersion,\n}: {\n   versions: string[]\n   defaultVersion: string\n}) {\n   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <GalleryVerticalEnd className=\"size-4\" />\n                     </div>\n                     <div className=\"flex flex-col gap-0.5 leading-none\">\n                        <span className=\"font-semibold\">Documentation</span>\n                        <span className=\"\">v{selectedVersion}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n               >\n                  {versions.map((version) => (\n                     <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                     >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                           <Check className=\"ml-auto\" />\n                        )}\n                     </DropdownMenuItem>\n                  ))}\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-03.json b/apps/web/public/v0/styles/miami/sidebar-03.json
new file mode 100644
index 00000000..f1466a74
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-03.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-03",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n               <div className=\"flex items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-03/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu>\n                  {data.navMain.map((item) => (\n                     <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild>\n                           <a href={item.url} className=\"font-medium\">\n                              {item.title}\n                           </a>\n                        </SidebarMenuButton>\n                        {item.items?.length ? (\n                           <SidebarMenuSub>\n                              {item.items.map((item) => (\n                                 <SidebarMenuSubItem key={item.title}>\n                                    <SidebarMenuSubButton\n                                       asChild\n                                       isActive={item.isActive}\n                                    >\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        ) : null}\n                     </SidebarMenuItem>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-04.json b/apps/web/public/v0/styles/miami/sidebar-04.json
new file mode 100644
index 00000000..c7d5cb72
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-04.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-04",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A floating sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"19rem\",\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-04/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar variant=\"floating\" {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu className=\"gap-2\">\n                  {data.navMain.map((item) => (\n                     <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild>\n                           <a href={item.url} className=\"font-medium\">\n                              {item.title}\n                           </a>\n                        </SidebarMenuButton>\n                        {item.items?.length ? (\n                           <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                              {item.items.map((item) => (\n                                 <SidebarMenuSubItem key={item.title}>\n                                    <SidebarMenuSubButton\n                                       asChild\n                                       isActive={item.isActive}\n                                    >\n                                       <a href={item.url}>{item.title}</a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        ) : null}\n                     </SidebarMenuItem>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-05.json b/apps/web/public/v0/styles/miami/sidebar-05.json
new file mode 100644
index 00000000..371b0e66
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-05.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-05",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with collapsible submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { SearchForm } from \"@/components/search-form\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n            <SearchForm />\n         </SidebarHeader>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarMenu>\n                  {data.navMain.map((item, index) => (\n                     <Collapsible\n                        key={item.title}\n                        defaultOpen={index === 1}\n                        className=\"group/collapsible\"\n                     >\n                        <SidebarMenuItem>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuButton>\n                                 {item.title}{\" \"}\n                                 <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                                 <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                              </SidebarMenuButton>\n                           </CollapsibleTrigger>\n                           {item.items?.length ? (\n                              <CollapsibleContent>\n                                 <SidebarMenuSub>\n                                    {item.items.map((item) => (\n                                       <SidebarMenuSubItem key={item.title}>\n                                          <SidebarMenuSubButton\n                                             asChild\n                                             isActive={item.isActive}\n                                          >\n                                             <a href={item.url}>{item.title}</a>\n                                          </SidebarMenuSubButton>\n                                       </SidebarMenuSubItem>\n                                    ))}\n                                 </SidebarMenuSub>\n                              </CollapsibleContent>\n                           ) : null}\n                        </SidebarMenuItem>\n                     </Collapsible>\n                  ))}\n               </SidebarMenu>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-05/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/components/ui/label\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarInput,\n} from \"@/components/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <SidebarGroup className=\"py-0\">\n            <SidebarGroupContent className=\"relative\">\n               <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n               </Label>\n               <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n               />\n               <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n         </SidebarGroup>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-06.json b/apps/web/public/v0/styles/miami/sidebar-06.json
new file mode 100644
index 00000000..1cafaa58
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-06.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-06",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with submenus as dropdowns.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"@/components/nav-main\"\nimport { SidebarOptInForm } from \"@/components/sidebar-opt-in-form\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <GalleryVerticalEnd className=\"size-4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-0.5 leading-none\">\n                           <span className=\"font-semibold\">Documentation</span>\n                           <span className=\"\">v1.0.0</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n         </SidebarContent>\n         <SidebarFooter>\n            <div className=\"p-1\">\n               <SidebarOptInForm />\n            </div>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-06/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon, MoreHorizontal } from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup>\n         <SidebarMenu>\n            {items.map((item) => (\n               <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                           {item.title} <MoreHorizontal className=\"ml-auto\" />\n                        </SidebarMenuButton>\n                     </DropdownMenuTrigger>\n                     {item.items?.length ? (\n                        <DropdownMenuContent\n                           side={isMobile ? \"bottom\" : \"right\"}\n                           align={isMobile ? \"end\" : \"start\"}\n                           className=\"min-w-56 rounded-lg\"\n                        >\n                           {item.items.map((item) => (\n                              <DropdownMenuItem asChild key={item.title}>\n                                 <a href={item.url}>{item.title}</a>\n                              </DropdownMenuItem>\n                           ))}\n                        </DropdownMenuContent>\n                     ) : null}\n                  </SidebarMenuItem>\n               </DropdownMenu>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { SidebarInput } from \"@/components/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n   return (\n      <Card className=\"shadow-none\">\n         <form>\n            <CardHeader className=\"p-4 pb-0\">\n               <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n               </CardTitle>\n               <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n               </CardDescription>\n            </CardHeader>\n            <CardContent className=\"grid gap-2.5 p-4\">\n               <SidebarInput type=\"email\" placeholder=\"Email\" />\n               <Button\n                  className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n                  size=\"sm\"\n               >\n                  Subscribe\n               </Button>\n            </CardContent>\n         </form>\n      </Card>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-07.json b/apps/web/public/v0/styles/miami/sidebar-07.json
new file mode 100644
index 00000000..f60bb5d2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-07.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-07",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar that collapses to icons.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-07/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   GalleryVerticalEnd,\n   Map,\n   PieChart,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"@/components/nav-main\"\nimport { NavProjects } from \"@/components/nav-projects\"\nimport { NavUser } from \"@/components/nav-user\"\nimport { TeamSwitcher } from \"@/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: GalleryVerticalEnd,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar collapsible=\"icon\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n               >\n                  <SidebarMenuItem>\n                     <CollapsibleTrigger asChild>\n                        <SidebarMenuButton tooltip={item.title}>\n                           {item.icon && <item.icon />}\n                           <span>{item.title}</span>\n                           <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                     </CollapsibleTrigger>\n                     <CollapsibleContent>\n                        <SidebarMenuSub>\n                           {item.items?.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                 <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                       <span>{subItem.title}</span>\n                                    </a>\n                                 </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                           ))}\n                        </SidebarMenuSub>\n                     </CollapsibleContent>\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   Forward,\n   type LucideIcon,\n   MoreHorizontal,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Forward className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-4\" />\n                     </div>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {activeTeam.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                           {activeTeam.plan}\n                        </span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-08.json b/apps/web/public/v0/styles/miami/sidebar-08.json
new file mode 100644
index 00000000..1949e851
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-08.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-08",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "An inset sidebar with secondary navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2\">\n               <div className=\"flex items-center gap-2 px-4\">\n                  <SidebarTrigger className=\"-ml-1\" />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-08/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Send,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"@/components/nav-main\"\nimport { NavProjects } from \"@/components/nav-projects\"\nimport { NavSecondary } from \"@/components/nav-secondary\"\nimport { NavUser } from \"@/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: \"Support\",\n         url: \"#\",\n         icon: LifeBuoy,\n      },\n      {\n         title: \"Feedback\",\n         url: \"#\",\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: \"Design Engineering\",\n         url: \"#\",\n         icon: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar variant=\"inset\" {...props}>\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <Command className=\"size-4\" />\n                        </div>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              Acme Inc\n                           </span>\n                           <span className=\"truncate text-xs\">Enterprise</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n               >\n                  <SidebarMenuItem>\n                     <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.items?.length ? (\n                        <>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                 <ChevronRight />\n                                 <span className=\"sr-only\">Toggle</span>\n                              </SidebarMenuAction>\n                           </CollapsibleTrigger>\n                           <CollapsibleContent>\n                              <SidebarMenuSub>\n                                 {item.items?.map((subItem) => (\n                                    <SidebarMenuSubItem key={subItem.title}>\n                                       <SidebarMenuSubButton asChild>\n                                          <a href={subItem.url}>\n                                             <span>{subItem.title}</span>\n                                          </a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           </CollapsibleContent>\n                        </>\n                     ) : null}\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   type LucideIcon,\n   MoreHorizontal,\n   Share,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Share className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-09.json b/apps/web/public/v0/styles/miami/sidebar-09.json
new file mode 100644
index 00000000..3c1a0f90
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-09.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-09",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "Collapsible nested sidebars.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"350px\",\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Inbox</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-09/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/components/nav-user\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\nimport { Switch } from \"@/components/ui/switch\"\n\n// This is sample data\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         isActive: true,\n      },\n      {\n         title: \"Drafts\",\n         url: \"#\",\n         icon: File,\n         isActive: false,\n      },\n      {\n         title: \"Sent\",\n         url: \"#\",\n         icon: Send,\n         isActive: false,\n      },\n      {\n         title: \"Junk\",\n         url: \"#\",\n         icon: ArchiveX,\n         isActive: false,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n         isActive: false,\n      },\n   ],\n   mails: [\n      {\n         name: \"William Smith\",\n         email: \"williamsmith@example.com\",\n         subject: \"Meeting Tomorrow\",\n         date: \"09:34 AM\",\n         teaser:\n            \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n      },\n      {\n         name: \"Alice Smith\",\n         email: \"alicesmith@example.com\",\n         subject: \"Re: Project Update\",\n         date: \"Yesterday\",\n         teaser:\n            \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n      },\n      {\n         name: \"Bob Johnson\",\n         email: \"bobjohnson@example.com\",\n         subject: \"Weekend Plans\",\n         date: \"2 days ago\",\n         teaser:\n            \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n      },\n      {\n         name: \"Emily Davis\",\n         email: \"emilydavis@example.com\",\n         subject: \"Re: Question about Budget\",\n         date: \"2 days ago\",\n         teaser:\n            \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n      },\n      {\n         name: \"Michael Wilson\",\n         email: \"michaelwilson@example.com\",\n         subject: \"Important Announcement\",\n         date: \"1 week ago\",\n         teaser:\n            \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n      },\n      {\n         name: \"Sarah Brown\",\n         email: \"sarahbrown@example.com\",\n         subject: \"Re: Feedback on Proposal\",\n         date: \"1 week ago\",\n         teaser:\n            \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n      },\n      {\n         name: \"David Lee\",\n         email: \"davidlee@example.com\",\n         subject: \"New Project Idea\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n      },\n      {\n         name: \"Olivia Wilson\",\n         email: \"oliviawilson@example.com\",\n         subject: \"Vacation Plans\",\n         date: \"1 week ago\",\n         teaser:\n            \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n      },\n      {\n         name: \"James Martin\",\n         email: \"jamesmartin@example.com\",\n         subject: \"Re: Conference Registration\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n      },\n      {\n         name: \"Sophia White\",\n         email: \"sophiawhite@example.com\",\n         subject: \"Team Dinner\",\n         date: \"1 week ago\",\n         teaser:\n            \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   // Note: I'm using state to show active item.\n   // IRL you should use the url/router.\n   const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n   const [mails, setMails] = React.useState(data.mails)\n   const { setOpen } = useSidebar()\n\n   return (\n      <Sidebar\n         collapsible=\"icon\"\n         className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n         {...props}\n      >\n         {/* This is the first sidebar */}\n         {/* We disable collapsible and adjust width to icon. */}\n         {/* This will make the sidebar appear as icons. */}\n         <Sidebar\n            collapsible=\"none\"\n            className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n         >\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton\n                        size=\"lg\"\n                        asChild\n                        className=\"md:h-8 md:p-0\"\n                     >\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">\n                                 Acme Inc\n                              </span>\n                              <span className=\"truncate text-xs\">\n                                 Enterprise\n                              </span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent className=\"px-1.5 md:px-0\">\n                     <SidebarMenu>\n                        {data.navMain.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 tooltip={{\n                                    children: item.title,\n                                    hidden: false,\n                                 }}\n                                 onClick={() => {\n                                    setActiveItem(item)\n                                    const mail = data.mails.sort(\n                                       () => Math.random() - 0.5,\n                                    )\n                                    setMails(\n                                       mail.slice(\n                                          0,\n                                          Math.max(\n                                             5,\n                                             Math.floor(Math.random() * 10) + 1,\n                                          ),\n                                       ),\n                                    )\n                                    setOpen(true)\n                                 }}\n                                 isActive={activeItem.title === item.title}\n                                 className=\"px-2.5 md:px-2\"\n                              >\n                                 <item.icon />\n                                 <span>{item.title}</span>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <NavUser user={data.user} />\n            </SidebarFooter>\n         </Sidebar>\n\n         {/* This is the second sidebar */}\n         {/* We disable collapsible and let it fill remaining space */}\n         <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n            <SidebarHeader className=\"gap-3.5 border-b p-4\">\n               <div className=\"flex w-full items-center justify-between\">\n                  <div className=\"text-base font-medium text-foreground\">\n                     {activeItem.title}\n                  </div>\n                  <Label className=\"flex items-center gap-2 text-sm\">\n                     <span>Unreads</span>\n                     <Switch className=\"shadow-none\" />\n                  </Label>\n               </div>\n               <SidebarInput placeholder=\"Type to search...\" />\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup className=\"px-0\">\n                  <SidebarGroupContent>\n                     {mails.map((mail) => (\n                        <a\n                           href=\"#\"\n                           key={mail.email}\n                           className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                        >\n                           <div className=\"flex w-full items-center gap-2\">\n                              <span>{mail.name}</span>{\" \"}\n                              <span className=\"ml-auto text-xs\">\n                                 {mail.date}\n                              </span>\n                           </div>\n                           <span className=\"font-medium\">{mail.subject}</span>\n                           <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                              {mail.teaser}\n                           </span>\n                        </a>\n                     ))}\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-09/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-10.json b/apps/web/public/v0/styles/miami/sidebar-10.json
new file mode 100644
index 00000000..b2a82c48
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-10.json
@@ -0,0 +1,69 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-10",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar in a popover.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport { NavActions } from \"@/components/nav-actions\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-14 shrink-0 items-center gap-2\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n               <div className=\"ml-auto px-3\">\n                  <NavActions />\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-10/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   Blocks,\n   Calendar,\n   Command,\n   Home,\n   Inbox,\n   MessageCircleQuestion,\n   Search,\n   Settings2,\n   Sparkles,\n   Trash2,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavFavorites } from \"@/components/nav-favorites\"\nimport { NavMain } from \"@/components/nav-main\"\nimport { NavSecondary } from \"@/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarHeader,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: Calendar,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-actions.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowDown,\n   ArrowUp,\n   Bell,\n   Copy,\n   CornerUpLeft,\n   CornerUpRight,\n   FileText,\n   GalleryVerticalEnd,\n   LineChart,\n   Link,\n   MoreHorizontal,\n   Settings2,\n   Star,\n   Trash,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nconst data = [\n   [\n      {\n         label: \"Customize Page\",\n         icon: Settings2,\n      },\n      {\n         label: \"Turn into wiki\",\n         icon: FileText,\n      },\n   ],\n   [\n      {\n         label: \"Copy Link\",\n         icon: Link,\n      },\n      {\n         label: \"Duplicate\",\n         icon: Copy,\n      },\n      {\n         label: \"Move to\",\n         icon: CornerUpRight,\n      },\n      {\n         label: \"Move to Trash\",\n         icon: Trash2,\n      },\n   ],\n   [\n      {\n         label: \"Undo\",\n         icon: CornerUpLeft,\n      },\n      {\n         label: \"View analytics\",\n         icon: LineChart,\n      },\n      {\n         label: \"Version History\",\n         icon: GalleryVerticalEnd,\n      },\n      {\n         label: \"Show delete pages\",\n         icon: Trash,\n      },\n      {\n         label: \"Notifications\",\n         icon: Bell,\n      },\n   ],\n   [\n      {\n         label: \"Import\",\n         icon: ArrowUp,\n      },\n      {\n         label: \"Export\",\n         icon: ArrowDown,\n      },\n   ],\n]\n\nexport function NavActions() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      setIsOpen(true)\n   }, [])\n\n   return (\n      <div className=\"flex items-center gap-2 text-sm\">\n         <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n            Edit Oct 08\n         </div>\n         <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n            <Star />\n         </Button>\n         <Popover open={isOpen} onOpenChange={setIsOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-7 w-7 data-[state=open]:bg-accent\"\n               >\n                  <MoreHorizontal />\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent\n               className=\"w-56 overflow-hidden rounded-lg p-0\"\n               align=\"end\"\n            >\n               <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n                  <SidebarContent>\n                     {data.map((group, index) => (\n                        <SidebarGroup\n                           key={index}\n                           className=\"border-b last:border-none\"\n                        >\n                           <SidebarGroupContent className=\"gap-0\">\n                              <SidebarMenu>\n                                 {group.map((item, index) => (\n                                    <SidebarMenuItem key={index}>\n                                       <SidebarMenuButton>\n                                          <item.icon />{\" \"}\n                                          <span>{item.label}</span>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </SidebarGroup>\n                     ))}\n                  </SidebarContent>\n               </Sidebar>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowUpRight,\n   Link,\n   MoreHorizontal,\n   StarOff,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport type { LucideIcon } from \"lucide-react\"\n\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-11.json b/apps/web/public/v0/styles/miami/sidebar-11.json
new file mode 100644
index 00000000..fc97d889
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-11.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-11",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with a collapsible file tree.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>button.tsx</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-11/components/app-sidebar.tsx",
+      "content": "import { ChevronRight, File, Folder } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   changes: [\n      {\n         file: \"README.md\",\n         state: \"M\",\n      },\n      {\n         file: \"api/hello/route.ts\",\n         state: \"U\",\n      },\n      {\n         file: \"app/layout.tsx\",\n         state: \"M\",\n      },\n   ],\n   tree: [\n      [\n         \"app\",\n         [\n            \"api\",\n            [\"hello\", [\"route.ts\"]],\n            \"page.tsx\",\n            \"layout.tsx\",\n            [\"blog\", [\"page.tsx\"]],\n         ],\n      ],\n      [\n         \"components\",\n         [\"ui\", \"button.tsx\", \"card.tsx\"],\n         \"header.tsx\",\n         \"footer.tsx\",\n      ],\n      [\"lib\", [\"util.ts\"]],\n      [\"public\", \"favicon.ico\", \"vercel.svg\"],\n      \".eslintrc.json\",\n      \".gitignore\",\n      \"next.config.js\",\n      \"tailwind.config.js\",\n      \"package.json\",\n      \"README.md\",\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Changes</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.changes.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                           <SidebarMenuButton>\n                              <File />\n                              {item.file}\n                           </SidebarMenuButton>\n                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n            <SidebarGroup>\n               <SidebarGroupLabel>Files</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.tree.map((item, index) => (\n                        <Tree key={index} item={item} />\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n   const [name, ...items] = Array.isArray(item) ? item : [item]\n\n   if (!items.length) {\n      return (\n         <SidebarMenuButton\n            isActive={name === \"button.tsx\"}\n            className=\"data-[active=true]:bg-transparent\"\n         >\n            <File />\n            {name}\n         </SidebarMenuButton>\n      )\n   }\n\n   return (\n      <SidebarMenuItem>\n         <Collapsible\n            className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n            defaultOpen={name === \"components\" || name === \"ui\"}\n         >\n            <CollapsibleTrigger asChild>\n               <SidebarMenuButton>\n                  <ChevronRight className=\"transition-transform\" />\n                  <Folder />\n                  {name}\n               </SidebarMenuButton>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n               <SidebarMenuSub>\n                  {items.map((subItem, index) => (\n                     <Tree key={index} item={subItem} />\n                  ))}\n               </SidebarMenuSub>\n            </CollapsibleContent>\n         </Collapsible>\n      </SidebarMenuItem>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-12.json b/apps/web/public/v0/styles/miami/sidebar-12.json
new file mode 100644
index 00000000..922a84ec
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-12.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-12",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with a calendar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>October 2024</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n                  {Array.from({ length: 20 }).map((_, i) => (\n                     <div\n                        key={i}\n                        className=\"aspect-square rounded-xl bg-muted/50\"\n                     />\n                  ))}\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "import { Plus } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { Calendars } from \"@/components/calendars\"\nimport { DatePicker } from \"@/components/date-picker\"\nimport { NavUser } from \"@/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n   SidebarSeparator,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/calendars.tsx",
+      "content": "import { Check, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarSeparator,\n} from \"@/components/ui/sidebar\"\n\nexport function Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/components/ui/calendar\"\nimport { SidebarGroup, SidebarGroupContent } from \"@/components/ui/sidebar\"\n\nexport function DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-13.json b/apps/web/public/v0/styles/miami/sidebar-13.json
new file mode 100644
index 00000000..370eda35
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-13.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-13",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar in a dialog.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-13/page.tsx",
+      "content": "import { SettingsDialog } from \"@/components/settings-dialog\"\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-svh items-center justify-center\">\n         <SettingsDialog />\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-13/components/settings-dialog.tsx",
+      "content": "\"use client\"\n\nimport {\n   Bell,\n   Check,\n   Globe,\n   Home,\n   Keyboard,\n   Link,\n   Lock,\n   Menu,\n   MessageCircle,\n   Paintbrush,\n   Settings,\n   Video,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogTitle,\n   DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst data = {\n   nav: [\n      { name: \"Notifications\", icon: Bell },\n      { name: \"Navigation\", icon: Menu },\n      { name: \"Home\", icon: Home },\n      { name: \"Appearance\", icon: Paintbrush },\n      { name: \"Messages & media\", icon: MessageCircle },\n      { name: \"Language & region\", icon: Globe },\n      { name: \"Accessibility\", icon: Keyboard },\n      { name: \"Mark as read\", icon: Check },\n      { name: \"Audio & video\", icon: Video },\n      { name: \"Connected accounts\", icon: Link },\n      { name: \"Privacy & visibility\", icon: Lock },\n      { name: \"Advanced\", icon: Settings },\n   ],\n}\n\nexport function SettingsDialog() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <Dialog open={open} onOpenChange={setOpen}>\n         <DialogTrigger asChild>\n            <Button size=\"sm\">Open Dialog</Button>\n         </DialogTrigger>\n         <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n            <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n            <DialogDescription className=\"sr-only\">\n               Customize your settings here.\n            </DialogDescription>\n            <SidebarProvider className=\"items-start\">\n               <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n                  <SidebarContent>\n                     <SidebarGroup>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {data.nav.map((item) => (\n                                 <SidebarMenuItem key={item.name}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={\n                                          item.name === \"Messages & media\"\n                                       }\n                                    >\n                                       <a href=\"#\">\n                                          <item.icon />\n                                          <span>{item.name}</span>\n                                       </a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </SidebarGroup>\n                  </SidebarContent>\n               </Sidebar>\n               <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n                  <header className=\"flex h-16 shrink-0 items-center gap-2 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                        <Breadcrumb>\n                           <BreadcrumbList>\n                              <BreadcrumbItem className=\"hidden md:block\">\n                                 <BreadcrumbLink href=\"#\">\n                                    Settings\n                                 </BreadcrumbLink>\n                              </BreadcrumbItem>\n                              <BreadcrumbSeparator className=\"hidden md:block\" />\n                              <BreadcrumbItem>\n                                 <BreadcrumbPage>\n                                    Messages & media\n                                 </BreadcrumbPage>\n                              </BreadcrumbItem>\n                           </BreadcrumbList>\n                        </Breadcrumb>\n                     </div>\n                  </header>\n                  <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n                     {Array.from({ length: 10 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                        />\n                     ))}\n                  </div>\n               </main>\n            </SidebarProvider>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-14.json b/apps/web/public/v0/styles/miami/sidebar-14.json
new file mode 100644
index 00000000..4786b476
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-14.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-14",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar on the right.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n               <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n         <AppSidebar side=\"right\" />\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-14/components/app-sidebar.tsx",
+      "content": "import type * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-15.json b/apps/web/public/v0/styles/miami/sidebar-15.json
new file mode 100644
index 00000000..b876cdc8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-15.json
@@ -0,0 +1,89 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-15",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A left and right sidebar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"@/components/sidebar-left\"\nimport { SidebarRight } from \"@/components/sidebar-right\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarLeft />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n         <SidebarRight />\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-15/components/calendars.tsx",
+      "content": "import { Check, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarSeparator,\n} from \"@/components/ui/sidebar\"\n\nexport function Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/components/ui/calendar\"\nimport { SidebarGroup, SidebarGroupContent } from \"@/components/ui/sidebar\"\n\nexport function DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowUpRight,\n   Link,\n   MoreHorizontal,\n   StarOff,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport type { LucideIcon } from \"lucide-react\"\n\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/sidebar-left.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   Blocks,\n   Calendar,\n   Command,\n   Home,\n   Inbox,\n   MessageCircleQuestion,\n   Search,\n   Settings2,\n   Sparkles,\n   Trash2,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavFavorites } from \"@/components/nav-favorites\"\nimport { NavMain } from \"@/components/nav-main\"\nimport { NavSecondary } from \"@/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarHeader,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: Calendar,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n}\n\nexport function SidebarLeft({\n   ...props\n}: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "import { Plus } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { Calendars } from \"@/components/calendars\"\nimport { DatePicker } from \"@/components/date-picker\"\nimport { NavUser } from \"@/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarRail,\n   SidebarSeparator,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport function SidebarRight({\n   ...props\n}: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         collapsible=\"none\"\n         className=\"sticky hidden lg:flex top-0 h-svh border-l\"\n         {...props}\n      >\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-16.json b/apps/web/public/v0/styles/miami/sidebar-16.json
new file mode 100644
index 00000000..fa8e001c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-16.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-16",
+  "type": "registry:block",
+  "author": "nyxb (https://nyxbui.design)",
+  "description": "A sidebar with a sticky site header.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-16/page.tsx",
+      "content": "import { AppSidebar } from \"@/components/app-sidebar\"\nimport { SiteHeader } from \"@/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n   return (\n      <div className=\"[--header-height:calc(theme(spacing.14))]\">\n         <SidebarProvider className=\"flex flex-col\">\n            <SiteHeader />\n            <div className=\"flex flex-1\">\n               <AppSidebar />\n               <SidebarInset>\n                  <div className=\"flex flex-1 flex-col gap-4 p-4\">\n                     <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                        <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                        <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                        <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                     </div>\n                     <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n                  </div>\n               </SidebarInset>\n            </div>\n         </SidebarProvider>\n      </div>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-16/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Send,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"@/components/nav-main\"\nimport { NavProjects } from \"@/components/nav-projects\"\nimport { NavSecondary } from \"@/components/nav-secondary\"\nimport { NavUser } from \"@/components/nav-user\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: \"Support\",\n         url: \"#\",\n         icon: LifeBuoy,\n      },\n      {\n         title: \"Feedback\",\n         url: \"#\",\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: \"Design Engineering\",\n         url: \"#\",\n         icon: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         className=\"top-[--header-height] !h-[calc(100svh-var(--header-height))]\"\n         {...props}\n      >\n         <SidebarHeader>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton size=\"lg\" asChild>\n                     <a href=\"#\">\n                        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                           <Command className=\"size-4\" />\n                        </div>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              Acme Inc\n                           </span>\n                           <span className=\"truncate text-xs\">Enterprise</span>\n                        </div>\n                     </a>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n               >\n                  <SidebarMenuItem>\n                     <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.items?.length ? (\n                        <>\n                           <CollapsibleTrigger asChild>\n                              <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                 <ChevronRight />\n                                 <span className=\"sr-only\">Toggle</span>\n                              </SidebarMenuAction>\n                           </CollapsibleTrigger>\n                           <CollapsibleContent>\n                              <SidebarMenuSub>\n                                 {item.items?.map((subItem) => (\n                                    <SidebarMenuSubItem key={subItem.title}>\n                                       <SidebarMenuSubButton asChild>\n                                          <a href={subItem.url}>\n                                             <span>{subItem.title}</span>\n                                          </a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           </CollapsibleContent>\n                        </>\n                     ) : null}\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   type LucideIcon,\n   MoreHorizontal,\n   Share,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Share className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-secondary.tsx",
+      "content": "import type { LucideIcon } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/components/ui/label\"\nimport { SidebarInput } from \"@/components/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n   return (\n      <form {...props}>\n         <div className=\"relative\">\n            <Label htmlFor=\"search\" className=\"sr-only\">\n               Search\n            </Label>\n            <SidebarInput\n               id=\"search\"\n               placeholder=\"Type to search...\"\n               className=\"h-8 pl-7\"\n            />\n            <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n         </div>\n      </form>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/site-header.tsx",
+      "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/components/search-form\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { useSidebar } from \"@/components/ui/sidebar\"\n\nexport function SiteHeader() {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <header className=\"fle sticky top-0 z-50 w-full items-center border-b bg-background\">\n         <div className=\"flex h-[--header-height] w-full items-center gap-2 px-4\">\n            <Button\n               className=\"h-8 w-8\"\n               variant=\"ghost\"\n               size=\"icon\"\n               onClick={toggleSidebar}\n            >\n               <SidebarIcon />\n            </Button>\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb className=\"hidden sm:block\">\n               <BreadcrumbList>\n                  <BreadcrumbItem>\n                     <BreadcrumbLink href=\"#\">\n                        Building Your Application\n                     </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator />\n                  <BreadcrumbItem>\n                     <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                  </BreadcrumbItem>\n               </BreadcrumbList>\n            </Breadcrumb>\n            <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n         </div>\n      </header>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-controlled.json b/apps/web/public/v0/styles/miami/sidebar-controlled.json
new file mode 100644
index 00000000..28cc2210
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-controlled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-controlled",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-controlled.tsx",
+      "content": "\"use client\"\n\nimport {\n   Frame,\n   LifeBuoy,\n   Map,\n   PanelLeftClose,\n   PanelLeftOpen,\n   PieChart,\n   Send,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n   },\n]\n\nexport default function AppSidebar() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <SidebarProvider open={open} onOpenChange={setOpen}>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton asChild>\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center h-12 px-4 justify-between\">\n               <Button\n                  onClick={() => setOpen((open) => !open)}\n                  size=\"sm\"\n                  variant=\"ghost\"\n               >\n                  {open ? <PanelLeftClose /> : <PanelLeftOpen />}\n                  <span>{open ? \"Close\" : \"Open\"} Sidebar</span>\n               </Button>\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-demo.json b/apps/web/public/v0/styles/miami/sidebar-demo.json
new file mode 100644
index 00000000..72220702
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-demo",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Calendar, Home, Inbox, Search, Settings } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\n// Menu items.\nconst items = [\n   {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n   },\n   {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n   },\n   {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n   },\n   {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n   },\n   {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings,\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Application</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {items.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton asChild>\n                                 <a href={item.url}>\n                                    <item.icon />\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center justify-between px-4 h-12\">\n               <SidebarTrigger />\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-footer.json b/apps/web/public/v0/styles/miami/sidebar-footer.json
new file mode 100644
index 00000000..856de17b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-footer.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-footer",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-footer.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, ChevronUp, User2 } from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader />\n            <SidebarContent />\n            <SidebarFooter>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                              Username\n                              <ChevronUp className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           side=\"top\"\n                           className=\"w-[--radix-popper-anchor-width]\"\n                        >\n                           <DropdownMenuItem>\n                              <span>Account</span>\n                           </DropdownMenuItem>\n                           <DropdownMenuItem>\n                              <span>Billing</span>\n                           </DropdownMenuItem>\n                           <DropdownMenuItem>\n                              <span>Sign out</span>\n                           </DropdownMenuItem>\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarFooter>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center justify-between px-4 h-12\">\n               <SidebarTrigger />\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-group-action.json b/apps/web/public/v0/styles/miami/sidebar-group-action.json
new file mode 100644
index 00000000..515b2c1b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-group-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-group-action",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-action.tsx",
+      "content": "\"use client\"\n\nimport {\n   ChevronDown,\n   Frame,\n   LifeBuoy,\n   Map,\n   PieChart,\n   Plus,\n   Send,\n} from \"lucide-react\"\nimport { Toaster, toast } from \"sonner\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupAction,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Toaster\n            position=\"bottom-left\"\n            toastOptions={{\n               className: \"ml-[160px]\",\n            }}\n         />\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupAction\n                     title=\"Add Project\"\n                     onClick={() => toast(\"You clicked the group action!\")}\n                  >\n                     <Plus /> <span className=\"sr-only\">Add Project</span>\n                  </SidebarGroupAction>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton asChild>\n                              <a href=\"#\">\n                                 <Frame />\n                                 <span>Design Engineering</span>\n                              </a>\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton asChild>\n                              <a href=\"#\">\n                                 <PieChart />\n                                 <span>Sales & Marketing</span>\n                              </a>\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton asChild>\n                              <a href=\"#\">\n                                 <Map />\n                                 <span>Travel</span>\n                              </a>\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-group-collapsible.json b/apps/web/public/v0/styles/miami/sidebar-group-collapsible.json
new file mode 100644
index 00000000..6ace61e2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-group-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-group-collapsible",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <Collapsible defaultOpen className=\"group/collapsible\">\n                  <SidebarGroup>\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           Help\n                           <ChevronDown className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              <SidebarMenuItem>\n                                 <SidebarMenuButton>\n                                    <LifeBuoy />\n                                    Support\n                                 </SidebarMenuButton>\n                              </SidebarMenuItem>\n                              <SidebarMenuItem>\n                                 <SidebarMenuButton>\n                                    <Send />\n                                    Feedback\n                                 </SidebarMenuButton>\n                              </SidebarMenuItem>\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </SidebarGroup>\n               </Collapsible>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-group.json b/apps/web/public/v0/styles/miami/sidebar-group.json
new file mode 100644
index 00000000..79a51d47
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-group.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-group",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-group.tsx",
+      "content": "\"use client\"\n\nimport { LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Help</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton>\n                              <LifeBuoy />\n                              Support\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                        <SidebarMenuItem>\n                           <SidebarMenuButton>\n                              <Send />\n                              Feedback\n                           </SidebarMenuButton>\n                        </SidebarMenuItem>\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-header.json b/apps/web/public/v0/styles/miami/sidebar-header.json
new file mode 100644
index 00000000..53f8fcdd
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-header.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-header",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-header.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown } from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   Sidebar,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                              Select Workspace\n                              <ChevronDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent className=\"w-[--radix-popper-anchor-width]\">\n                           <DropdownMenuItem>\n                              <span>Acme Inc</span>\n                           </DropdownMenuItem>\n                           <DropdownMenuItem>\n                              <span>Acme Corp.</span>\n                           </DropdownMenuItem>\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex items-center justify-between px-4 h-12\">\n               <SidebarTrigger />\n            </header>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-menu-action.json b/apps/web/public/v0/styles/miami/sidebar-menu-action.json
new file mode 100644
index 00000000..48eea6b7
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-menu-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-action",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-action.tsx",
+      "content": "\"use client\"\n\nimport {\n   Frame,\n   LifeBuoy,\n   Map,\n   MoreHorizontal,\n   PieChart,\n   Send,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project, index) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton\n                                 asChild\n                                 className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                              >\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              <DropdownMenu>\n                                 <DropdownMenuTrigger asChild>\n                                    <SidebarMenuAction>\n                                       <MoreHorizontal />\n                                       <span className=\"sr-only\">More</span>\n                                    </SidebarMenuAction>\n                                 </DropdownMenuTrigger>\n                                 <DropdownMenuContent\n                                    side=\"right\"\n                                    align=\"start\"\n                                 >\n                                    <DropdownMenuItem>\n                                       <span>Edit Project</span>\n                                    </DropdownMenuItem>\n                                    <DropdownMenuItem>\n                                       <span>Delete Project</span>\n                                    </DropdownMenuItem>\n                                 </DropdownMenuContent>\n                              </DropdownMenu>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-menu-badge.json b/apps/web/public/v0/styles/miami/sidebar-menu-badge.json
new file mode 100644
index 00000000..ca30b387
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-menu-badge.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-badge",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-badge.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n      badge: \"24\",\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n      badge: \"12\",\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n      badge: \"3\",\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n      badge: \"21\",\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n      badge: \"8\",\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton\n                                 asChild\n                                 className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                              >\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              <SidebarMenuBadge>\n                                 {project.badge}\n                              </SidebarMenuBadge>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-menu-collapsible.json b/apps/web/public/v0/styles/miami/sidebar-menu-collapsible.json
new file mode 100644
index 00000000..b41fa0a6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-menu-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-collapsible",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst items = [\n   {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Installation\",\n            url: \"#\",\n         },\n         {\n            title: \"Project Structure\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Routing\",\n            url: \"#\",\n         },\n         {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n         },\n         {\n            title: \"Rendering\",\n            url: \"#\",\n         },\n         {\n            title: \"Caching\",\n            url: \"#\",\n         },\n         {\n            title: \"Styling\",\n            url: \"#\",\n         },\n         {\n            title: \"Optimizing\",\n            url: \"#\",\n         },\n         {\n            title: \"Configuring\",\n            url: \"#\",\n         },\n         {\n            title: \"Testing\",\n            url: \"#\",\n         },\n         {\n            title: \"Authentication\",\n            url: \"#\",\n         },\n         {\n            title: \"Deploying\",\n            url: \"#\",\n         },\n         {\n            title: \"Upgrading\",\n            url: \"#\",\n         },\n         {\n            title: \"Examples\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Components\",\n            url: \"#\",\n         },\n         {\n            title: \"File Conventions\",\n            url: \"#\",\n         },\n         {\n            title: \"Functions\",\n            url: \"#\",\n         },\n         {\n            title: \"next.config.js Options\",\n            url: \"#\",\n         },\n         {\n            title: \"CLI\",\n            url: \"#\",\n         },\n         {\n            title: \"Edge Runtime\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Accessibility\",\n            url: \"#\",\n         },\n         {\n            title: \"Fast Refresh\",\n            url: \"#\",\n         },\n         {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n         },\n         {\n            title: \"Supported Browsers\",\n            url: \"#\",\n         },\n         {\n            title: \"Turbopack\",\n            url: \"#\",\n         },\n      ],\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {items.map((item, index) => (\n                           <Collapsible\n                              key={index}\n                              className=\"group/collapsible\"\n                              defaultOpen={index === 0}\n                           >\n                              <SidebarMenuItem>\n                                 <CollapsibleTrigger asChild>\n                                    <SidebarMenuButton>\n                                       <span>{item.title}</span>\n                                       <ChevronRight className=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                                    </SidebarMenuButton>\n                                 </CollapsibleTrigger>\n                                 <CollapsibleContent>\n                                    <SidebarMenuSub>\n                                       {item.items.map((subItem, subIndex) => (\n                                          <SidebarMenuSubItem key={subIndex}>\n                                             <SidebarMenuSubButton asChild>\n                                                <a href={subItem.url}>\n                                                   <span>{subItem.title}</span>\n                                                </a>\n                                             </SidebarMenuSubButton>\n                                          </SidebarMenuSubItem>\n                                       ))}\n                                    </SidebarMenuSub>\n                                 </CollapsibleContent>\n                              </SidebarMenuItem>\n                           </Collapsible>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-menu-sub.json b/apps/web/public/v0/styles/miami/sidebar-menu-sub.json
new file mode 100644
index 00000000..11856096
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-menu-sub.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu-sub",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-sub.tsx",
+      "content": "\"use client\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst items = [\n   {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Installation\",\n            url: \"#\",\n         },\n         {\n            title: \"Project Structure\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Routing\",\n            url: \"#\",\n         },\n         {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n         },\n         {\n            title: \"Rendering\",\n            url: \"#\",\n         },\n         {\n            title: \"Caching\",\n            url: \"#\",\n         },\n         {\n            title: \"Styling\",\n            url: \"#\",\n         },\n         {\n            title: \"Optimizing\",\n            url: \"#\",\n         },\n         {\n            title: \"Configuring\",\n            url: \"#\",\n         },\n         {\n            title: \"Testing\",\n            url: \"#\",\n         },\n         {\n            title: \"Authentication\",\n            url: \"#\",\n         },\n         {\n            title: \"Deploying\",\n            url: \"#\",\n         },\n         {\n            title: \"Upgrading\",\n            url: \"#\",\n         },\n         {\n            title: \"Examples\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Components\",\n            url: \"#\",\n         },\n         {\n            title: \"File Conventions\",\n            url: \"#\",\n         },\n         {\n            title: \"Functions\",\n            url: \"#\",\n         },\n         {\n            title: \"next.config.js Options\",\n            url: \"#\",\n         },\n         {\n            title: \"CLI\",\n            url: \"#\",\n         },\n         {\n            title: \"Edge Runtime\",\n            url: \"#\",\n         },\n      ],\n   },\n   {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n         {\n            title: \"Accessibility\",\n            url: \"#\",\n         },\n         {\n            title: \"Fast Refresh\",\n            url: \"#\",\n         },\n         {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n         },\n         {\n            title: \"Supported Browsers\",\n            url: \"#\",\n         },\n         {\n            title: \"Turbopack\",\n            url: \"#\",\n         },\n      ],\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {items.map((item, index) => (\n                           <SidebarMenuItem key={index}>\n                              <SidebarMenuButton asChild>\n                                 <a href={item.url}>\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              <SidebarMenuSub>\n                                 {item.items.map((subItem, subIndex) => (\n                                    <SidebarMenuSubItem key={subIndex}>\n                                       <SidebarMenuSubButton asChild>\n                                          <a href={subItem.url}>\n                                             <span>{subItem.title}</span>\n                                          </a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-menu.json b/apps/web/public/v0/styles/miami/sidebar-menu.json
new file mode 100644
index 00000000..3c576fdf
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-menu.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-menu",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n   },\n]\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {projects.map((project) => (\n                           <SidebarMenuItem key={project.name}>\n                              <SidebarMenuButton asChild>\n                                 <a href={project.url}>\n                                    <project.icon />\n                                    <span>{project.name}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar-rsc.json b/apps/web/public/v0/styles/miami/sidebar-rsc.json
new file mode 100644
index 00000000..b3c385fc
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar-rsc.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar-rsc",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "internal/sidebar-rsc.tsx",
+      "content": "import { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSkeleton,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst projects = [\n   {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n      badge: \"24\",\n   },\n   {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n      badge: \"12\",\n   },\n   {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n      badge: \"3\",\n   },\n   {\n      name: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n      badge: \"21\",\n   },\n   {\n      name: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n      badge: \"8\",\n   },\n]\n\n// Dummy fetch function\nasync function fetchProjects() {\n   await new Promise((resolve) => setTimeout(resolve, 3000))\n   return projects\n}\n\nexport default function AppSidebar() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                     <React.Suspense fallback={<NavProjectsSkeleton />}>\n                        <NavProjects />\n                     </React.Suspense>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </SidebarProvider>\n   )\n}\n\nfunction NavProjectsSkeleton() {\n   return (\n      <SidebarMenu>\n         {Array.from({ length: 5 }).map((_, index) => (\n            <SidebarMenuItem key={index}>\n               <SidebarMenuSkeleton showIcon />\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n\nasync function NavProjects() {\n   const projects = await fetchProjects()\n\n   return (\n      <SidebarMenu>\n         {projects.map((project) => (\n            <SidebarMenuItem key={project.name}>\n               <SidebarMenuButton asChild>\n                  <a href={project.url}>\n                     <project.icon />\n                     <span>{project.name}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sidebar.json b/apps/web/public/v0/styles/miami/sidebar.json
new file mode 100644
index 00000000..8fa1b016
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sidebar.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sidebar",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-slot",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "separator",
+    "sheet",
+    "tooltip",
+    "input",
+    "use-mobile",
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "ui/sidebar.tsx",
+      "content": "\"use client\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport { PanelLeft } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { useIsMobile } from \"@/hooks/use-mobile\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Sheet, SheetContent } from \"@/components/ui/sheet\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar:state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ninterface SidebarContext {\n   state: \"expanded\" | \"collapsed\"\n   open: boolean\n   setOpen: (open: boolean) => void\n   openMobile: boolean\n   setOpenMobile: (open: boolean) => void\n   isMobile: boolean\n   toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n   const context = React.useContext(SidebarContext)\n   if (!context) {\n      throw new Error(\"useSidebar must be used within a Sidebar.\")\n   }\n\n   return context\n}\n\nconst SidebarProvider = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      defaultOpen?: boolean\n      open?: boolean\n      onOpenChange?: (open: boolean) => void\n   }\n>(\n   (\n      {\n         defaultOpen = true,\n         open: openProp,\n         onOpenChange: setOpenProp,\n         className,\n         style,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const isMobile = useIsMobile()\n      const [openMobile, setOpenMobile] = React.useState(false)\n\n      // This is the internal state of the sidebar.\n      // We use openProp and setOpenProp for control from outside the component.\n      const [_open, _setOpen] = React.useState(defaultOpen)\n      const open = openProp ?? _open\n      const setOpen = React.useCallback(\n         (value: boolean | ((value: boolean) => boolean)) => {\n            if (setOpenProp) {\n               return setOpenProp?.(\n                  typeof value === \"function\" ? value(open) : value,\n               )\n            }\n\n            _setOpen(value)\n\n            // This sets the cookie to keep the sidebar state.\n            document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n         },\n         [setOpenProp, open],\n      )\n\n      // Helper to toggle the sidebar.\n      const toggleSidebar = React.useCallback(() => {\n         return isMobile\n            ? setOpenMobile((open) => !open)\n            : setOpen((open) => !open)\n      }, [isMobile, setOpen, setOpenMobile])\n\n      // Adds a keyboard shortcut to toggle the sidebar.\n      React.useEffect(() => {\n         const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n               event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n               (event.metaKey || event.ctrlKey)\n            ) {\n               event.preventDefault()\n               toggleSidebar()\n            }\n         }\n\n         window.addEventListener(\"keydown\", handleKeyDown)\n         return () => window.removeEventListener(\"keydown\", handleKeyDown)\n      }, [toggleSidebar])\n\n      // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n      // This makes it easier to style the sidebar with Tailwind classes.\n      const state = open ? \"expanded\" : \"collapsed\"\n\n      const contextValue = React.useMemo<SidebarContext>(\n         () => ({\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n         }),\n         [\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n         ],\n      )\n\n      return (\n         <SidebarContext.Provider value={contextValue}>\n            <TooltipProvider delayDuration={0}>\n               <div\n                  style={\n                     {\n                        \"--sidebar-width\": SIDEBAR_WIDTH,\n                        \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n                        ...style,\n                     } as React.CSSProperties\n                  }\n                  className={cn(\n                     \"group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full\",\n                     className,\n                  )}\n                  ref={ref}\n                  {...props}\n               >\n                  {children}\n               </div>\n            </TooltipProvider>\n         </SidebarContext.Provider>\n      )\n   },\n)\nSidebarProvider.displayName = \"SidebarProvider\"\n\nconst Sidebar = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      side?: \"left\" | \"right\"\n      variant?: \"sidebar\" | \"floating\" | \"inset\"\n      collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n   }\n>(\n   (\n      {\n         side = \"left\",\n         variant = \"sidebar\",\n         collapsible = \"offcanvas\",\n         className,\n         children,\n         ...props\n      },\n      ref,\n   ) => {\n      const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n      if (collapsible === \"none\") {\n         return (\n            <div\n               className={cn(\n                  \"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col\",\n                  className,\n               )}\n               ref={ref}\n               {...props}\n            >\n               {children}\n            </div>\n         )\n      }\n\n      if (isMobile) {\n         return (\n            <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n               <SheetContent\n                  data-sidebar=\"sidebar\"\n                  data-mobile=\"true\"\n                  className=\"bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden\"\n                  style={\n                     {\n                        \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n                     } as React.CSSProperties\n                  }\n                  side={side}\n               >\n                  <div className=\"flex size-full flex-col\">{children}</div>\n               </SheetContent>\n            </Sheet>\n         )\n      }\n\n      return (\n         <div\n            ref={ref}\n            className=\"group peer hidden md:block\"\n            data-state={state}\n            data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n            data-variant={variant}\n            data-side={side}\n         >\n            {/* This is what handles the sidebar gap on desktop */}\n            <div\n               className={cn(\n                  \"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear\",\n                  \"group-data-[collapsible=offcanvas]:w-0\",\n                  \"group-data-[side=right]:rotate-180\",\n                  variant === \"floating\" || variant === \"inset\"\n                     ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n                     : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\",\n               )}\n            />\n            <div\n               className={cn(\n                  \"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex\",\n                  side === \"left\"\n                     ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n                     : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n                  // Adjust the padding for floating and inset variants.\n                  variant === \"floating\" || variant === \"inset\"\n                     ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n                     : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n                  className,\n               )}\n               {...props}\n            >\n               <div\n                  data-sidebar=\"sidebar\"\n                  className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow\"\n               >\n                  {children}\n               </div>\n            </div>\n         </div>\n      )\n   },\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarTrigger = React.forwardRef<\n   React.ElementRef<typeof Button>,\n   React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <Button\n         ref={ref}\n         data-sidebar=\"trigger\"\n         variant=\"ghost\"\n         size=\"icon\"\n         className={cn(\"size-7\", className)}\n         onClick={(event) => {\n            onClick?.(event)\n            toggleSidebar()\n         }}\n         {...props}\n      >\n         <PanelLeft />\n         <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n   )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst SidebarRail = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n   const { toggleSidebar } = useSidebar()\n\n   return (\n      <button\n         ref={ref}\n         data-sidebar=\"rail\"\n         aria-label=\"Toggle Sidebar\"\n         tabIndex={-1}\n         onClick={toggleSidebar}\n         title=\"Toggle Sidebar\"\n         className={cn(\n            \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n            \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n            \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n            \"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n            \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n            \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarRail.displayName = \"SidebarRail\"\n\nconst SidebarInset = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"main\">\n>(({ className, ...props }, ref) => {\n   return (\n      <main\n         ref={ref}\n         className={cn(\n            \"bg-background relative flex min-h-svh flex-1 flex-col\",\n            \"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarInset.displayName = \"SidebarInset\"\n\nconst SidebarInput = React.forwardRef<\n   React.ElementRef<typeof Input>,\n   React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n   return (\n      <Input\n         ref={ref}\n         data-sidebar=\"input\"\n         className={cn(\n            \"bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarInput.displayName = \"SidebarInput\"\n\nconst SidebarHeader = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"header\"\n         className={cn(\"flex flex-col gap-2 p-2\", className)}\n         {...props}\n      />\n   )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\nconst SidebarFooter = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"footer\"\n         className={cn(\"flex flex-col gap-2 p-2\", className)}\n         {...props}\n      />\n   )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarSeparator = React.forwardRef<\n   React.ElementRef<typeof Separator>,\n   React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n   return (\n      <Separator\n         ref={ref}\n         data-sidebar=\"separator\"\n         className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n         {...props}\n      />\n   )\n})\nSidebarSeparator.displayName = \"SidebarSeparator\"\n\nconst SidebarContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"content\"\n         className={cn(\n            \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\nconst SidebarGroup = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"group\"\n         className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n         {...props}\n      />\n   )\n})\nSidebarGroup.displayName = \"SidebarGroup\"\n\nconst SidebarGroupLabel = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"div\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"group-label\"\n         className={cn(\n            \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n            \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\"\n\nconst SidebarGroupAction = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"button\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"group-action\"\n         className={cn(\n            \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n            // Increases the hit area of the button on mobile.\n            \"after:absolute after:-inset-2 after:md:hidden\",\n            \"group-data-[collapsible=icon]:hidden\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarGroupAction.displayName = \"SidebarGroupAction\"\n\nconst SidebarGroupContent = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n   />\n))\nSidebarGroupContent.displayName = \"SidebarGroupContent\"\n\nconst SidebarMenu = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n   />\n))\nSidebarMenu.displayName = \"SidebarMenu\"\n\nconst SidebarMenuItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n   />\n))\nSidebarMenuItem.displayName = \"SidebarMenuItem\"\n\nconst sidebarMenuButtonVariants = cva(\n   \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n   {\n      variants: {\n         variant: {\n            default:\n               \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n            outline:\n               \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n         },\n         size: {\n            default: \"h-8 text-sm\",\n            sm: \"h-7 text-xs\",\n            lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n         size: \"default\",\n      },\n   },\n)\n\nconst SidebarMenuButton = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\"> & {\n      asChild?: boolean\n      isActive?: boolean\n      tooltip?: string | React.ComponentProps<typeof TooltipContent>\n   } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n   (\n      {\n         asChild = false,\n         isActive = false,\n         variant = \"default\",\n         size = \"default\",\n         tooltip,\n         className,\n         ...props\n      },\n      ref,\n   ) => {\n      const Comp = asChild ? Slot : \"button\"\n      const { isMobile, state } = useSidebar()\n\n      const button = (\n         <Comp\n            ref={ref}\n            data-sidebar=\"menu-button\"\n            data-size={size}\n            data-active={isActive}\n            className={cn(\n               sidebarMenuButtonVariants({ variant, size }),\n               className,\n            )}\n            {...props}\n         />\n      )\n\n      if (!tooltip) {\n         return button\n      }\n\n      if (typeof tooltip === \"string\") {\n         tooltip = {\n            children: tooltip,\n         }\n      }\n\n      return (\n         <Tooltip>\n            <TooltipTrigger asChild>{button}</TooltipTrigger>\n            <TooltipContent\n               side=\"right\"\n               align=\"center\"\n               hidden={state !== \"collapsed\" || isMobile}\n               {...tooltip}\n            />\n         </Tooltip>\n      )\n   },\n)\nSidebarMenuButton.displayName = \"SidebarMenuButton\"\n\nconst SidebarMenuAction = React.forwardRef<\n   HTMLButtonElement,\n   React.ComponentProps<\"button\"> & {\n      asChild?: boolean\n      showOnHover?: boolean\n   }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"button\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"menu-action\"\n         className={cn(\n            \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n            // Increases the hit area of the button on mobile.\n            \"after:absolute after:-inset-2 after:md:hidden\",\n            \"peer-data-[size=sm]/menu-button:top-1\",\n            \"peer-data-[size=default]/menu-button:top-1.5\",\n            \"peer-data-[size=lg]/menu-button:top-2.5\",\n            \"group-data-[collapsible=icon]:hidden\",\n            showOnHover &&\n               \"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarMenuAction.displayName = \"SidebarMenuAction\"\n\nconst SidebarMenuBadge = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n   <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n         \"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums\",\n         \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n         \"peer-data-[size=sm]/menu-button:top-1\",\n         \"peer-data-[size=default]/menu-button:top-1.5\",\n         \"peer-data-[size=lg]/menu-button:top-2.5\",\n         \"group-data-[collapsible=icon]:hidden\",\n         className,\n      )}\n      {...props}\n   />\n))\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\"\n\nconst SidebarMenuSkeleton = React.forwardRef<\n   HTMLDivElement,\n   React.ComponentProps<\"div\"> & {\n      showIcon?: boolean\n   }\n>(({ className, showIcon = false, ...props }, ref) => {\n   // Random width between 50 to 90%.\n   const width = React.useMemo(() => {\n      return `${Math.floor(Math.random() * 40) + 50}%`\n   }, [])\n\n   return (\n      <div\n         ref={ref}\n         data-sidebar=\"menu-skeleton\"\n         className={cn(\n            \"flex h-8 items-center gap-2 rounded-md px-2\",\n            className,\n         )}\n         {...props}\n      >\n         {showIcon && (\n            <Skeleton\n               className=\"size-4 rounded-md\"\n               data-sidebar=\"menu-skeleton-icon\"\n            />\n         )}\n         <Skeleton\n            className=\"h-4 max-w-[--skeleton-width] flex-1\"\n            data-sidebar=\"menu-skeleton-text\"\n            style={\n               {\n                  \"--skeleton-width\": width,\n               } as React.CSSProperties\n            }\n         />\n      </div>\n   )\n})\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\n\nconst SidebarMenuSub = React.forwardRef<\n   HTMLUListElement,\n   React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n   <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n         \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n         \"group-data-[collapsible=icon]:hidden\",\n         className,\n      )}\n      {...props}\n   />\n))\nSidebarMenuSub.displayName = \"SidebarMenuSub\"\n\nconst SidebarMenuSubItem = React.forwardRef<\n   HTMLLIElement,\n   React.ComponentProps<\"li\">\n>(({ ...props }, ref) => <li ref={ref} {...props} />)\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\"\n\nconst SidebarMenuSubButton = React.forwardRef<\n   HTMLAnchorElement,\n   React.ComponentProps<\"a\"> & {\n      asChild?: boolean\n      size?: \"sm\" | \"md\"\n      isActive?: boolean\n   }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n   const Comp = asChild ? Slot : \"a\"\n\n   return (\n      <Comp\n         ref={ref}\n         data-sidebar=\"menu-sub-button\"\n         data-size={size}\n         data-active={isActive}\n         className={cn(\n            \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n            \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n            size === \"sm\" && \"text-xs\",\n            size === \"md\" && \"text-sm\",\n            \"group-data-[collapsible=icon]:hidden\",\n            className,\n         )}\n         {...props}\n      />\n   )\n})\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\"\n\nexport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupAction,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSkeleton,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "sidebar": {
+              "DEFAULT": "hsl(var(--sidebar-background))",
+              "foreground": "hsl(var(--sidebar-foreground))",
+              "primary": "hsl(var(--sidebar-primary))",
+              "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+              "accent": "hsl(var(--sidebar-accent))",
+              "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+              "border": "hsl(var(--sidebar-border))",
+              "ring": "hsl(var(--sidebar-ring))"
+            }
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "sidebar-background": "0 0% 98%",
+      "sidebar-foreground": "240 5.3% 26.1%",
+      "sidebar-primary": "240 5.9% 10%",
+      "sidebar-primary-foreground": "0 0% 98%",
+      "sidebar-accent": "240 4.8% 95.9%",
+      "sidebar-accent-foreground": "240 5.9% 10%",
+      "sidebar-border": "220 13% 91%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    },
+    "dark": {
+      "sidebar-background": "240 5.9% 10%",
+      "sidebar-foreground": "240 4.8% 95.9%",
+      "sidebar-primary": "224.3 76.3% 48%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "240 3.7% 15.9%",
+      "sidebar-accent-foreground": "240 4.8% 95.9%",
+      "sidebar-border": "240 3.7% 15.9%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sink.json b/apps/web/public/v0/styles/miami/sink.json
new file mode 100644
index 00000000..13e26fcf
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sink.json
@@ -0,0 +1,452 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sink",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "accordion",
+    "alert",
+    "alert-dialog",
+    "aspect-ratio",
+    "avatar",
+    "badge",
+    "breadcrumb",
+    "button",
+    "calendar",
+    "card",
+    "carousel",
+    "chart",
+    "checkbox",
+    "collapsible",
+    "command",
+    "context-menu",
+    "dialog",
+    "drawer",
+    "dropdown-menu",
+    "hover-card",
+    "input",
+    "input-otp",
+    "label",
+    "menubar",
+    "navigation-menu",
+    "pagination",
+    "popover",
+    "progress",
+    "radio-group",
+    "resizable",
+    "scroll-area",
+    "select",
+    "separator",
+    "sheet",
+    "sidebar",
+    "skeleton",
+    "slider",
+    "sonner",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "toast",
+    "toggle",
+    "toggle-group",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "internal/sink/page.tsx",
+      "content": "import { AccordionDemo } from \"@/components/accordion-demo\"\nimport { AlertDemo } from \"@/components/alert-demo\"\nimport { AlertDialogDemo } from \"@/components/alert-dialog-demo\"\nimport { AppSidebar } from \"@/components/app-sidebar\"\nimport { AspectRatioDemo } from \"@/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"@/components/avatar-demo\"\nimport { BadgeDemo } from \"@/components/badge-demo\"\nimport { BadgeDestructive } from \"@/components/badge-destructive\"\nimport { BadgeOutline } from \"@/components/badge-outline\"\nimport { BadgeSecondary } from \"@/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"@/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"@/components/button-demo\"\nimport { ButtonDestructive } from \"@/components/button-destructive\"\nimport { ButtonGhost } from \"@/components/button-ghost\"\nimport { ButtonLink } from \"@/components/button-link\"\nimport { ButtonLoading } from \"@/components/button-loading\"\nimport { ButtonOutline } from \"@/components/button-outline\"\nimport { ButtonSecondary } from \"@/components/button-secondary\"\nimport { ButtonWithIcon } from \"@/components/button-with-icon\"\nimport { CalendarDemo } from \"@/components/calendar-demo\"\nimport { CardDemo } from \"@/components/card-demo\"\nimport { CarouselDemo } from \"@/components/carousel-demo\"\nimport { CheckboxDemo } from \"@/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"@/components/collapsible-demo\"\nimport { ComboboxDemo } from \"@/components/combobox-demo\"\nimport { CommandDemo } from \"@/components/command-demo\"\nimport { ComponentWrapper } from \"@/components/component-wrapper\"\nimport { ContextMenuDemo } from \"@/components/context-menu-demo\"\nimport { DatePickerDemo } from \"@/components/date-picker-demo\"\nimport { DialogDemo } from \"@/components/dialog-demo\"\nimport { DrawerDemo } from \"@/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"@/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"@/components/hover-card-demo\"\nimport { InputDemo } from \"@/components/input-demo\"\nimport { InputOTPDemo } from \"@/components/input-otp-demo\"\nimport { LabelDemo } from \"@/components/label-demo\"\nimport { MenubarDemo } from \"@/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"@/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"@/components/pagination-demo\"\nimport { PopoverDemo } from \"@/components/popover-demo\"\nimport { ProgressDemo } from \"@/components/progress-demo\"\nimport { RadioGroupDemo } from \"@/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"@/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"@/components/scroll-area-demo\"\nimport { SelectDemo } from \"@/components/select-demo\"\nimport { SeparatorDemo } from \"@/components/separator-demo\"\nimport { SheetDemo } from \"@/components/sheet-demo\"\nimport { SkeletonDemo } from \"@/components/skeleton-demo\"\nimport { SliderDemo } from \"@/components/slider-demo\"\nimport { SonnerDemo } from \"@/components/sonner-demo\"\nimport { SwitchDemo } from \"@/components/switch-demo\"\nimport { TableDemo } from \"@/components/table-demo\"\nimport { TabsDemo } from \"@/components/tabs-demo\"\nimport { TextareaDemo } from \"@/components/textarea-demo\"\nimport { ToastDemo } from \"@/components/toast-demo\"\nimport { ToggleDemo } from \"@/components/toggle-demo\"\nimport { ToggleDisabled } from \"@/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"@/components/toggle-group-demo\"\nimport { ToggleOutline } from \"@/components/toggle-outline\"\nimport { ToggleWithText } from \"@/components/toggle-with-text\"\nimport { TooltipDemo } from \"@/components/tooltip-demo\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   SidebarInset,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nexport default function SinkPage() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n                  <ComponentWrapper name=\"Accordion\">\n                     <AccordionDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Alert\">\n                     <AlertDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"AlertDialog\">\n                     <AlertDialogDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"AspectRatio\">\n                     <AspectRatioDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Avatar\">\n                     <AvatarDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Badge\">\n                     <BadgeDemo />\n                     <BadgeDestructive />\n                     <BadgeOutline />\n                     <BadgeSecondary />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Breadcrumb\">\n                     <BreadcrumbDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Button\">\n                     <div className=\"flex items-center gap-2\">\n                        <ButtonDemo />\n                        <ButtonDestructive />\n                        <ButtonGhost />\n                        <ButtonLink />\n                     </div>\n                     <div className=\"flex items-center gap-2\">\n                        <ButtonLoading />\n                        <ButtonOutline />\n                        <ButtonSecondary />\n                     </div>\n                     <div className=\"flex items-center gap-2\">\n                        <ButtonWithIcon />\n                     </div>\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Calendar\">\n                     <CalendarDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Card\">\n                     <CardDemo className=\"w-full\" />\n                  </ComponentWrapper>\n                  <ComponentWrapper\n                     name=\"Carousel\"\n                     className=\"[&_.max-w-xs]:max-w-[70%]\"\n                  >\n                     <CarouselDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Checkbox\">\n                     <CheckboxDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Collapsible\">\n                     <CollapsibleDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Combobox\">\n                     <ComboboxDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper\n                     name=\"Command\"\n                     className=\"[&_[cmdk-root]]:md:min-w-max\"\n                  >\n                     <CommandDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"ContextMenu\">\n                     <ContextMenuDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"DatePicker\">\n                     <DatePickerDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Dialog\">\n                     <DialogDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Drawer\">\n                     <DrawerDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"DropdownMenu\">\n                     <DropdownMenuDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"HoverCard\">\n                     <HoverCardDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Input\">\n                     <InputDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"InputOTP\">\n                     <InputOTPDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Label\">\n                     <LabelDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Menubar\">\n                     <MenubarDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper\n                     name=\"NavigationMenu\"\n                     className=\"col-span-2\"\n                  >\n                     <NavigationMenuDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Pagination\">\n                     <PaginationDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Popover\">\n                     <PopoverDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Progress\">\n                     <ProgressDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"RadioGroup\">\n                     <RadioGroupDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Resizable\" className=\"col-span-2\">\n                     <ResizableHandleDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"ScrollArea\">\n                     <ScrollAreaDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Select\">\n                     <SelectDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Separator\">\n                     <SeparatorDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Sheet\">\n                     <SheetDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Skeleton\">\n                     <SkeletonDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Slider\">\n                     <SliderDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Sonner\">\n                     <SonnerDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Switch\">\n                     <SwitchDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Table\" className=\"col-span-2\">\n                     <TableDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Tabs\">\n                     <TabsDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Textarea\">\n                     <TextareaDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Toast\">\n                     <ToastDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Toggle\">\n                     <div className=\"flex items-center gap-2\">\n                        <ToggleDemo />\n                        <ToggleDisabled />\n                        <ToggleOutline />\n                        <ToggleWithText />\n                     </div>\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"ToggleGroup\">\n                     <ToggleGroupDemo />\n                  </ComponentWrapper>\n                  <ComponentWrapper name=\"Tooltip\">\n                     <TooltipDemo />\n                  </ComponentWrapper>\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:page",
+      "target": "app/sink/page.tsx"
+    },
+    {
+      "path": "internal/sink/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   BookOpen,\n   Bot,\n   Command,\n   Frame,\n   GalleryVerticalEnd,\n   Map,\n   PieChart,\n   Settings2,\n   SquareTerminal,\n} from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { NavMain } from \"@/components/nav-main\"\nimport { NavProjects } from \"@/components/nav-projects\"\nimport { NavUser } from \"@/components/nav-user\"\nimport { TeamSwitcher } from \"@/components/team-switcher\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarHeader,\n   SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: GalleryVerticalEnd,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar collapsible=\"icon\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavMain items={data.navMain} />\n            <NavProjects projects={data.projects} />\n         </SidebarContent>\n         <SidebarFooter>\n            <NavUser user={data.user} />\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/component-wrapper.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nexport function ComponentWrapper({\n   className,\n   name,\n   children,\n   ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & { name: string }) {\n   return (\n      <div\n         className={cn(\"flex w-full flex-col rounded-lg border\", className)}\n         {...props}\n      >\n         <div className=\"border-b px-4 py-3\">\n            <div className=\"text-sm font-medium\">{name}</div>\n         </div>\n         <div className=\"flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full\">\n            {children}\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon?: LucideIcon\n      isActive?: boolean\n      items?: {\n         title: string\n         url: string\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Platform</SidebarGroupLabel>\n         <SidebarMenu>\n            {items.map((item) => (\n               <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n               >\n                  <SidebarMenuItem>\n                     <CollapsibleTrigger asChild>\n                        <SidebarMenuButton tooltip={item.title}>\n                           {item.icon && <item.icon />}\n                           <span>{item.title}</span>\n                           <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                     </CollapsibleTrigger>\n                     <CollapsibleContent>\n                        <SidebarMenuSub>\n                           {item.items?.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                 <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                       <span>{subItem.title}</span>\n                                    </a>\n                                 </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                           ))}\n                        </SidebarMenuSub>\n                     </CollapsibleContent>\n                  </SidebarMenuItem>\n               </Collapsible>\n            ))}\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n   Folder,\n   Forward,\n   type LucideIcon,\n   MoreHorizontal,\n   Trash2,\n} from \"lucide-react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavProjects({\n   projects,\n}: {\n   projects: {\n      name: string\n      url: string\n      icon: LucideIcon\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Projects</SidebarGroupLabel>\n         <SidebarMenu>\n            {projects.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-48 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <Folder className=\"text-muted-foreground\" />\n                           <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <Forward className=\"text-muted-foreground\" />\n                           <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete Project</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Sparkles,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\nexport function TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-4\" />\n                     </div>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {activeTeam.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                           {activeTeam.plan}\n                        </span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/accordion-demo.tsx",
+      "content": "import {\n   Accordion,\n   AccordionContent,\n   AccordionItem,\n   AccordionTrigger,\n} from \"@/components/ui/accordion\"\n\nexport function AccordionDemo() {\n   return (\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n         <AccordionItem value=\"item-1\">\n            <AccordionTrigger>Is it accessible?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It adheres to the WAI-ARIA design pattern.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-2\">\n            <AccordionTrigger>Is it styled?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It comes with default styles that matches the other\n               components&apos; aesthetic.\n            </AccordionContent>\n         </AccordionItem>\n         <AccordionItem value=\"item-3\">\n            <AccordionTrigger>Is it animated?</AccordionTrigger>\n            <AccordionContent>\n               Yes. It's animated by default, but you can disable it if you\n               prefer.\n            </AccordionContent>\n         </AccordionItem>\n      </Accordion>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\n\nexport function AlertDemo() {\n   return (\n      <Alert>\n         <Terminal className=\"h-4 w-4\" />\n         <AlertTitle>Heads up!</AlertTitle>\n         <AlertDescription>\n            You can add components to your app using the cli.\n         </AlertDescription>\n      </Alert>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-dialog-demo.tsx",
+      "content": "import {\n   AlertDialog,\n   AlertDialogAction,\n   AlertDialogCancel,\n   AlertDialogContent,\n   AlertDialogDescription,\n   AlertDialogFooter,\n   AlertDialogHeader,\n   AlertDialogTitle,\n   AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\"\nimport { Button } from \"@/components/ui/button\"\n\nexport function AlertDialogDemo() {\n   return (\n      <AlertDialog>\n         <AlertDialogTrigger asChild>\n            <Button variant=\"outline\">Show Dialog</Button>\n         </AlertDialogTrigger>\n         <AlertDialogContent>\n            <AlertDialogHeader>\n               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n               <AlertDialogDescription>\n                  This action cannot be undone. This will permanently delete\n                  your account and remove your data from our servers.\n               </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n               <AlertDialogCancel>Cancel</AlertDialogCancel>\n               <AlertDialogAction>Continue</AlertDialogAction>\n            </AlertDialogFooter>\n         </AlertDialogContent>\n      </AlertDialog>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\"\n\nexport function AspectRatioDemo() {\n   return (\n      <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n         <Image\n            src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n            alt=\"Photo by Drew Beamer\"\n            fill\n            className=\"h-full w-full rounded-md object-cover\"\n         />\n      </AspectRatio>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/avatar-demo.tsx",
+      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\n\nexport function AvatarDemo() {\n   return (\n      <Avatar>\n         <AvatarImage src=\"https://github.com/nyxb.png\" alt=\"@nyxb\" />\n         <AvatarFallback>CN</AvatarFallback>\n      </Avatar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-demo.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport function BadgeDemo() {\n   return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/breadcrumb-demo.tsx",
+      "content": "import {\n   Breadcrumb,\n   BreadcrumbEllipsis,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n   return (\n      <Breadcrumb>\n         <BreadcrumbList>\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <DropdownMenu>\n                  <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                     <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                     <span className=\"sr-only\">Toggle menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                     <DropdownMenuItem>Documentation</DropdownMenuItem>\n                     <DropdownMenuItem>Themes</DropdownMenuItem>\n                     <DropdownMenuItem>GitHub</DropdownMenuItem>\n                  </DropdownMenuContent>\n               </DropdownMenu>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbLink href=\"/docs/components\">\n                  Components\n               </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n            </BreadcrumbItem>\n         </BreadcrumbList>\n      </Breadcrumb>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport function ButtonDemo() {\n   return <Button>Button</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/components/ui/calendar\"\n\nexport function CalendarDemo() {\n   const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n   return (\n      <Calendar\n         mode=\"single\"\n         selected={date}\n         onSelect={setDate}\n         className=\"rounded-md border shadow\"\n      />\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Switch } from \"@/components/ui/switch\"\n\nconst notifications = [\n   {\n      title: \"Your call has been confirmed.\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"You have a new message!\",\n      description: \"1 hour ago\",\n   },\n   {\n      title: \"Your subscription is expiring soon!\",\n      description: \"2 hours ago\",\n   },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport function CardDemo({ className, ...props }: CardProps) {\n   return (\n      <Card className={cn(\"w-[380px]\", className)} {...props}>\n         <CardHeader>\n            <CardTitle>Notifications</CardTitle>\n            <CardDescription>You have 3 unread messages.</CardDescription>\n         </CardHeader>\n         <CardContent className=\"grid gap-4\">\n            <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n               <BellRing />\n               <div className=\"flex-1 space-y-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                     Push Notifications\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                     Send notifications to device.\n                  </p>\n               </div>\n               <Switch />\n            </div>\n            <div>\n               {notifications.map((notification, index) => (\n                  <div\n                     key={index}\n                     className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n                  >\n                     <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n                     <div className=\"space-y-1\">\n                        <p className=\"text-sm font-medium leading-none\">\n                           {notification.title}\n                        </p>\n                        <p className=\"text-sm text-muted-foreground\">\n                           {notification.description}\n                        </p>\n                     </div>\n                  </div>\n               ))}\n            </div>\n         </CardContent>\n         <CardFooter>\n            <Button className=\"w-full\">\n               <Check /> Mark all as read\n            </Button>\n         </CardFooter>\n      </Card>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n   Carousel,\n   CarouselContent,\n   CarouselItem,\n   CarouselNext,\n   CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport function CarouselDemo() {\n   return (\n      <Carousel className=\"w-full max-w-xs\">\n         <CarouselContent>\n            {Array.from({ length: 5 }).map((_, index) => (\n               <CarouselItem key={index}>\n                  <div className=\"p-1\">\n                     <Card>\n                        <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                           <span className=\"text-4xl font-semibold\">\n                              {index + 1}\n                           </span>\n                        </CardContent>\n                     </Card>\n                  </div>\n               </CarouselItem>\n            ))}\n         </CarouselContent>\n         <CarouselPrevious />\n         <CarouselNext />\n      </Carousel>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/components/ui/checkbox\"\n\nexport function CheckboxDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Checkbox id=\"terms\" />\n         <label\n            htmlFor=\"terms\"\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n         >\n            Accept terms and conditions\n         </label>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport { ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\n\nexport function CollapsibleDemo() {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   return (\n      <Collapsible\n         open={isOpen}\n         onOpenChange={setIsOpen}\n         className=\"w-[350px] space-y-2\"\n      >\n         <div className=\"flex items-center justify-between space-x-4 px-4\">\n            <h4 className=\"text-sm font-semibold\">\n               @peduarte starred 3 repositories\n            </h4>\n            <CollapsibleTrigger asChild>\n               <Button variant=\"ghost\" size=\"sm\">\n                  <ChevronsUpDown className=\"h-4 w-4\" />\n                  <span className=\"sr-only\">Toggle</span>\n               </Button>\n            </CollapsibleTrigger>\n         </div>\n         <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n            @radix-ui/primitives\n         </div>\n         <CollapsibleContent className=\"space-y-2\">\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @radix-ui/colors\n            </div>\n            <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n               @stitches/react\n            </div>\n         </CollapsibleContent>\n      </Collapsible>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n} from \"@/components/ui/command\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nconst frameworks = [\n   {\n      value: \"next.js\",\n      label: \"Next.js\",\n   },\n   {\n      value: \"sveltekit\",\n      label: \"SvelteKit\",\n   },\n   {\n      value: \"nuxt.js\",\n      label: \"Nuxt.js\",\n   },\n   {\n      value: \"remix\",\n      label: \"Remix\",\n   },\n   {\n      value: \"astro\",\n      label: \"Astro\",\n   },\n]\n\nexport function ComboboxDemo() {\n   const [open, setOpen] = React.useState(false)\n   const [value, setValue] = React.useState(\"\")\n\n   return (\n      <Popover open={open} onOpenChange={setOpen}>\n         <PopoverTrigger asChild>\n            <Button\n               variant=\"outline\"\n               role=\"combobox\"\n               aria-expanded={open}\n               className=\"w-[200px] justify-between\"\n            >\n               {value\n                  ? frameworks.find((framework) => framework.value === value)\n                       ?.label\n                  : \"Select framework...\"}\n               <ChevronsUpDown className=\"opacity-50\" />\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-[200px] p-0\">\n            <Command>\n               <CommandInput\n                  placeholder=\"Search framework...\"\n                  className=\"h-9\"\n               />\n               <CommandList>\n                  <CommandEmpty>No framework found.</CommandEmpty>\n                  <CommandGroup>\n                     {frameworks.map((framework) => (\n                        <CommandItem\n                           key={framework.value}\n                           value={framework.value}\n                           onSelect={(currentValue) => {\n                              setValue(\n                                 currentValue === value ? \"\" : currentValue,\n                              )\n                              setOpen(false)\n                           }}\n                        >\n                           {framework.label}\n                           <Check\n                              className={cn(\n                                 \"ml-auto\",\n                                 value === framework.value\n                                    ? \"opacity-100\"\n                                    : \"opacity-0\",\n                              )}\n                           />\n                        </CommandItem>\n                     ))}\n                  </CommandGroup>\n               </CommandList>\n            </Command>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/command-demo.tsx",
+      "content": "import {\n   Calculator,\n   Calendar,\n   CreditCard,\n   Settings,\n   Smile,\n   User,\n} from \"lucide-react\"\n\nimport {\n   Command,\n   CommandEmpty,\n   CommandGroup,\n   CommandInput,\n   CommandItem,\n   CommandList,\n   CommandSeparator,\n   CommandShortcut,\n} from \"@/components/ui/command\"\n\nexport function CommandDemo() {\n   return (\n      <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n         <CommandInput placeholder=\"Type a command or search...\" />\n         <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Suggestions\">\n               <CommandItem>\n                  <Calendar />\n                  <span>Calendar</span>\n               </CommandItem>\n               <CommandItem>\n                  <Smile />\n                  <span>Search Emoji</span>\n               </CommandItem>\n               <CommandItem disabled>\n                  <Calculator />\n                  <span>Calculator</span>\n               </CommandItem>\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup heading=\"Settings\">\n               <CommandItem>\n                  <User />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <CreditCard />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n               </CommandItem>\n               <CommandItem>\n                  <Settings />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n               </CommandItem>\n            </CommandGroup>\n         </CommandList>\n      </Command>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/context-menu-demo.tsx",
+      "content": "import {\n   ContextMenu,\n   ContextMenuCheckboxItem,\n   ContextMenuContent,\n   ContextMenuItem,\n   ContextMenuLabel,\n   ContextMenuRadioGroup,\n   ContextMenuRadioItem,\n   ContextMenuSeparator,\n   ContextMenuShortcut,\n   ContextMenuSub,\n   ContextMenuSubContent,\n   ContextMenuSubTrigger,\n   ContextMenuTrigger,\n} from \"@/components/ui/context-menu\"\n\nexport function ContextMenuDemo() {\n   return (\n      <ContextMenu>\n         <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n            Right click here\n         </ContextMenuTrigger>\n         <ContextMenuContent className=\"w-64\">\n            <ContextMenuItem inset>\n               Back\n               <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset disabled>\n               Forward\n               <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem inset>\n               Reload\n               <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSub>\n               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n               <ContextMenuSubContent className=\"w-48\">\n                  <ContextMenuItem>\n                     Save Page As...\n                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n                  </ContextMenuItem>\n                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                  <ContextMenuItem>Name Window...</ContextMenuItem>\n                  <ContextMenuSeparator />\n                  <ContextMenuItem>Developer Tools</ContextMenuItem>\n               </ContextMenuSubContent>\n            </ContextMenuSub>\n            <ContextMenuSeparator />\n            <ContextMenuCheckboxItem checked>\n               Show Bookmarks Bar\n               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuSeparator />\n            <ContextMenuRadioGroup value=\"pedro\">\n               <ContextMenuLabel inset>People</ContextMenuLabel>\n               <ContextMenuSeparator />\n               <ContextMenuRadioItem value=\"pedro\">\n                  Pedro Duarte\n               </ContextMenuRadioItem>\n               <ContextMenuRadioItem value=\"colm\">\n                  Colm Tuite\n               </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n         </ContextMenuContent>\n      </ContextMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport function DatePickerDemo() {\n   const [date, setDate] = React.useState<Date>()\n\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button\n               variant={\"outline\"}\n               className={cn(\n                  \"w-[240px] justify-start text-left font-normal\",\n                  !date && \"text-muted-foreground\",\n               )}\n            >\n               <CalendarIcon />\n               {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n               mode=\"single\"\n               selected={date}\n               onSelect={setDate}\n               initialFocus\n            />\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dialog-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogFooter,\n   DialogHeader,\n   DialogTitle,\n   DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function DialogDemo() {\n   return (\n      <Dialog>\n         <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n         </DialogTrigger>\n         <DialogContent className=\"sm:max-w-[425px]\">\n            <DialogHeader>\n               <DialogTitle>Edit profile</DialogTitle>\n               <DialogDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </DialogDescription>\n            </DialogHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"@peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <DialogFooter>\n               <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport { Minus, Plus } from \"lucide-react\"\nimport * as React from \"react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Drawer,\n   DrawerClose,\n   DrawerContent,\n   DrawerDescription,\n   DrawerFooter,\n   DrawerHeader,\n   DrawerTitle,\n   DrawerTrigger,\n} from \"@/components/ui/drawer\"\n\nconst data = [\n   {\n      goal: 400,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 239,\n   },\n   {\n      goal: 300,\n   },\n   {\n      goal: 200,\n   },\n   {\n      goal: 278,\n   },\n   {\n      goal: 189,\n   },\n   {\n      goal: 349,\n   },\n]\n\nexport function DrawerDemo() {\n   const [goal, setGoal] = React.useState(350)\n\n   function onClick(adjustment: number) {\n      setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n   }\n\n   return (\n      <Drawer>\n         <DrawerTrigger asChild>\n            <Button variant=\"outline\">Open Drawer</Button>\n         </DrawerTrigger>\n         <DrawerContent>\n            <div className=\"mx-auto w-full max-w-sm\">\n               <DrawerHeader>\n                  <DrawerTitle>Move Goal</DrawerTitle>\n                  <DrawerDescription>\n                     Set your daily activity goal.\n                  </DrawerDescription>\n               </DrawerHeader>\n               <div className=\"p-4 pb-0\">\n                  <div className=\"flex items-center justify-center space-x-2\">\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"h-8 w-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(-10)}\n                        disabled={goal <= 200}\n                     >\n                        <Minus />\n                        <span className=\"sr-only\">Decrease</span>\n                     </Button>\n                     <div className=\"flex-1 text-center\">\n                        <div className=\"text-7xl font-bold tracking-tighter\">\n                           {goal}\n                        </div>\n                        <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                           Calories/day\n                        </div>\n                     </div>\n                     <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"h-8 w-8 shrink-0 rounded-full\"\n                        onClick={() => onClick(10)}\n                        disabled={goal >= 400}\n                     >\n                        <Plus />\n                        <span className=\"sr-only\">Increase</span>\n                     </Button>\n                  </div>\n                  <div className=\"mt-3 h-[120px]\">\n                     <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data}>\n                           <Bar\n                              dataKey=\"goal\"\n                              style={\n                                 {\n                                    fill: \"hsl(var(--foreground))\",\n                                    opacity: 0.9,\n                                 } as React.CSSProperties\n                              }\n                           />\n                        </BarChart>\n                     </ResponsiveContainer>\n                  </div>\n               </div>\n               <DrawerFooter>\n                  <Button>Submit</Button>\n                  <DrawerClose asChild>\n                     <Button variant=\"outline\">Cancel</Button>\n                  </DrawerClose>\n               </DrawerFooter>\n            </div>\n         </DrawerContent>\n      </Drawer>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuPortal,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuSub,\n   DropdownMenuSubContent,\n   DropdownMenuSubTrigger,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport function DropdownMenuDemo() {\n   return (\n      <DropdownMenu>\n         <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </DropdownMenuTrigger>\n         <DropdownMenuContent className=\"w-56\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>\n                  Profile\n                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Billing\n                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Settings\n                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n               </DropdownMenuItem>\n               <DropdownMenuItem>\n                  Keyboard shortcuts\n                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n               <DropdownMenuItem>Team</DropdownMenuItem>\n               <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                     <DropdownMenuSubContent>\n                        <DropdownMenuItem>Email</DropdownMenuItem>\n                        <DropdownMenuItem>Message</DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>More...</DropdownMenuItem>\n                     </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n               </DropdownMenuSub>\n               <DropdownMenuItem>\n                  New Team\n                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n               </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n               Log out\n               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n         </DropdownMenuContent>\n      </DropdownMenu>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   HoverCard,\n   HoverCardContent,\n   HoverCardTrigger,\n} from \"@/components/ui/hover-card\"\n\nexport function HoverCardDemo() {\n   return (\n      <HoverCard>\n         <HoverCardTrigger asChild>\n            <Button variant=\"link\">@nextjs</Button>\n         </HoverCardTrigger>\n         <HoverCardContent className=\"w-80\">\n            <div className=\"flex justify-between space-x-4\">\n               <Avatar>\n                  <AvatarImage src=\"https://github.com/vercel.png\" />\n                  <AvatarFallback>VC</AvatarFallback>\n               </Avatar>\n               <div className=\"space-y-1\">\n                  <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n                  <p className=\"text-sm\">\n                     The React Framework – created and maintained by @vercel.\n                  </p>\n                  <div className=\"flex items-center pt-2\">\n                     <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n                     <span className=\"text-xs text-muted-foreground\">\n                        Joined December 2021\n                     </span>\n                  </div>\n               </div>\n            </div>\n         </HoverCardContent>\n      </HoverCard>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-demo.tsx",
+      "content": "import { Input } from \"@/components/ui/input\"\n\nexport function InputDemo() {\n   return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-otp-demo.tsx",
+      "content": "import {\n   InputOTP,\n   InputOTPGroup,\n   InputOTPSeparator,\n   InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport function InputOTPDemo() {\n   return (\n      <InputOTP maxLength={6}>\n         <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n         </InputOTPGroup>\n         <InputOTPSeparator />\n         <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n         </InputOTPGroup>\n      </InputOTP>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/components/ui/checkbox\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function LabelDemo() {\n   return (\n      <div>\n         <div className=\"flex items-center space-x-2\">\n            <Checkbox id=\"terms\" />\n            <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/menubar-demo.tsx",
+      "content": "import {\n   Menubar,\n   MenubarCheckboxItem,\n   MenubarContent,\n   MenubarItem,\n   MenubarMenu,\n   MenubarRadioGroup,\n   MenubarRadioItem,\n   MenubarSeparator,\n   MenubarShortcut,\n   MenubarSub,\n   MenubarSubContent,\n   MenubarSubTrigger,\n   MenubarTrigger,\n} from \"@/components/ui/menubar\"\n\nexport function MenubarDemo() {\n   return (\n      <Menubar>\n         <MenubarMenu>\n            <MenubarTrigger>File</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  New Window <MenubarShortcut>⌘N</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled>New Incognito Window</MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Share</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Email link</MenubarItem>\n                     <MenubarItem>Messages</MenubarItem>\n                     <MenubarItem>Notes</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>\n                  Print... <MenubarShortcut>⌘P</MenubarShortcut>\n               </MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Edit</MenubarTrigger>\n            <MenubarContent>\n               <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarSub>\n                  <MenubarSubTrigger>Find</MenubarSubTrigger>\n                  <MenubarSubContent>\n                     <MenubarItem>Search the web</MenubarItem>\n                     <MenubarSeparator />\n                     <MenubarItem>Find...</MenubarItem>\n                     <MenubarItem>Find Next</MenubarItem>\n                     <MenubarItem>Find Previous</MenubarItem>\n                  </MenubarSubContent>\n               </MenubarSub>\n               <MenubarSeparator />\n               <MenubarItem>Cut</MenubarItem>\n               <MenubarItem>Copy</MenubarItem>\n               <MenubarItem>Paste</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>View</MenubarTrigger>\n            <MenubarContent>\n               <MenubarCheckboxItem>\n                  Always Show Bookmarks Bar\n               </MenubarCheckboxItem>\n               <MenubarCheckboxItem checked>\n                  Always Show Full URLs\n               </MenubarCheckboxItem>\n               <MenubarSeparator />\n               <MenubarItem inset>\n                  Reload <MenubarShortcut>⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarItem disabled inset>\n                  Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n               </MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Hide Sidebar</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n         <MenubarMenu>\n            <MenubarTrigger>Profiles</MenubarTrigger>\n            <MenubarContent>\n               <MenubarRadioGroup value=\"benoit\">\n                  <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n                  <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n                  <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n               </MenubarRadioGroup>\n               <MenubarSeparator />\n               <MenubarItem inset>Edit...</MenubarItem>\n               <MenubarSeparator />\n               <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarContent>\n         </MenubarMenu>\n      </Menubar>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n   NavigationMenu,\n   NavigationMenuContent,\n   NavigationMenuItem,\n   NavigationMenuLink,\n   NavigationMenuList,\n   NavigationMenuTrigger,\n   navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n   {\n      title: \"Alert Dialog\",\n      href: \"/docs/primitives/alert-dialog\",\n      description:\n         \"A modal dialog that interrupts the user with important content and expects a response.\",\n   },\n   {\n      title: \"Hover Card\",\n      href: \"/docs/primitives/hover-card\",\n      description:\n         \"For sighted users to preview content available behind a link.\",\n   },\n   {\n      title: \"Progress\",\n      href: \"/docs/primitives/progress\",\n      description:\n         \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n   },\n   {\n      title: \"Scroll-area\",\n      href: \"/docs/primitives/scroll-area\",\n      description: \"Visually or semantically separates content.\",\n   },\n   {\n      title: \"Tabs\",\n      href: \"/docs/primitives/tabs\",\n      description:\n         \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n   },\n   {\n      title: \"Tooltip\",\n      href: \"/docs/primitives/tooltip\",\n      description:\n         \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n   },\n]\n\nexport function NavigationMenuDemo() {\n   return (\n      <NavigationMenu>\n         <NavigationMenuList>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                     <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                           <a\n                              className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                              href=\"/\"\n                           >\n                              <div className=\"mb-2 mt-4 text-lg font-medium\">\n                                 nyxb/ui\n                              </div>\n                              <p className=\"text-sm leading-tight text-muted-foreground\">\n                                 Beautifully designed components built with\n                                 Radix UI and Tailwind CSS.\n                              </p>\n                           </a>\n                        </NavigationMenuLink>\n                     </li>\n                     <ListItem href=\"/docs\" title=\"Introduction\">\n                        Re-usable components built using Radix UI and Tailwind\n                        CSS.\n                     </ListItem>\n                     <ListItem href=\"/docs/installation\" title=\"Installation\">\n                        How to install dependencies and structure your app.\n                     </ListItem>\n                     <ListItem\n                        href=\"/docs/primitives/typography\"\n                        title=\"Typography\"\n                     >\n                        Styles for headings, paragraphs, lists...etc\n                     </ListItem>\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n               <NavigationMenuContent>\n                  <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                     {components.map((component) => (\n                        <ListItem\n                           key={component.title}\n                           title={component.title}\n                           href={component.href}\n                        >\n                           {component.description}\n                        </ListItem>\n                     ))}\n                  </ul>\n               </NavigationMenuContent>\n            </NavigationMenuItem>\n            <NavigationMenuItem>\n               <Link href=\"/docs\" legacyBehavior passHref>\n                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n                     Documentation\n                  </NavigationMenuLink>\n               </Link>\n            </NavigationMenuItem>\n         </NavigationMenuList>\n      </NavigationMenu>\n   )\n}\n\nconst ListItem = React.forwardRef<\n   React.ElementRef<\"a\">,\n   React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n   return (\n      <li>\n         <NavigationMenuLink asChild>\n            <a\n               ref={ref}\n               className={cn(\n                  \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n                  className,\n               )}\n               {...props}\n            >\n               <div className=\"text-sm font-medium leading-none\">{title}</div>\n               <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                  {children}\n               </p>\n            </a>\n         </NavigationMenuLink>\n      </li>\n   )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/pagination-demo.tsx",
+      "content": "import {\n   Pagination,\n   PaginationContent,\n   PaginationEllipsis,\n   PaginationItem,\n   PaginationLink,\n   PaginationNext,\n   PaginationPrevious,\n} from \"@/components/ui/pagination\"\n\nexport function PaginationDemo() {\n   return (\n      <Pagination>\n         <PaginationContent>\n            <PaginationItem>\n               <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\" isActive>\n                  2\n               </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n               <PaginationNext href=\"#\" />\n            </PaginationItem>\n         </PaginationContent>\n      </Pagination>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/popover-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport function PopoverDemo() {\n   return (\n      <Popover>\n         <PopoverTrigger asChild>\n            <Button variant=\"outline\">Open popover</Button>\n         </PopoverTrigger>\n         <PopoverContent className=\"w-80\">\n            <div className=\"grid gap-4\">\n               <div className=\"space-y-2\">\n                  <h4 className=\"font-medium leading-none\">Dimensions</h4>\n                  <p className=\"text-sm text-muted-foreground\">\n                     Set the dimensions for the layer.\n                  </p>\n               </div>\n               <div className=\"grid gap-2\">\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"width\">Width</Label>\n                     <Input\n                        id=\"width\"\n                        defaultValue=\"100%\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxWidth\">Max. width</Label>\n                     <Input\n                        id=\"maxWidth\"\n                        defaultValue=\"300px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"height\">Height</Label>\n                     <Input\n                        id=\"height\"\n                        defaultValue=\"25px\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n                  <div className=\"grid grid-cols-3 items-center gap-4\">\n                     <Label htmlFor=\"maxHeight\">Max. height</Label>\n                     <Input\n                        id=\"maxHeight\"\n                        defaultValue=\"none\"\n                        className=\"col-span-2 h-8\"\n                     />\n                  </div>\n               </div>\n            </div>\n         </PopoverContent>\n      </Popover>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/components/ui/progress\"\n\nexport function ProgressDemo() {\n   const [progress, setProgress] = React.useState(13)\n\n   React.useEffect(() => {\n      const timer = setTimeout(() => setProgress(66), 500)\n      return () => clearTimeout(timer)\n   }, [])\n\n   return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\n\nexport function RadioGroupDemo() {\n   return (\n      <RadioGroup defaultValue=\"comfortable\">\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"default\" id=\"r1\" />\n            <Label htmlFor=\"r1\">Default</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n            <Label htmlFor=\"r2\">Comfortable</Label>\n         </div>\n         <div className=\"flex items-center space-x-2\">\n            <RadioGroupItem value=\"compact\" id=\"r3\" />\n            <Label htmlFor=\"r3\">Compact</Label>\n         </div>\n      </RadioGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/resizable-handle.tsx",
+      "content": "import {\n   ResizableHandle,\n   ResizablePanel,\n   ResizablePanelGroup,\n} from \"@/components/ui/resizable\"\n\nexport function ResizableHandleDemo() {\n   return (\n      <ResizablePanelGroup\n         direction=\"horizontal\"\n         className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n      >\n         <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Sidebar</span>\n            </div>\n         </ResizablePanel>\n         <ResizableHandle withHandle />\n         <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n               <span className=\"font-semibold\">Content</span>\n            </div>\n         </ResizablePanel>\n      </ResizablePanelGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n   (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n\nexport function ScrollAreaDemo() {\n   return (\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n         <div className=\"p-4\">\n            <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n            {tags.map((tag) => (\n               <React.Fragment key={tag}>\n                  <div className=\"text-sm\">{tag}</div>\n                  <Separator className=\"my-2\" />\n               </React.Fragment>\n            ))}\n         </div>\n      </ScrollArea>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n   Select,\n   SelectContent,\n   SelectGroup,\n   SelectItem,\n   SelectLabel,\n   SelectTrigger,\n   SelectValue,\n} from \"@/components/ui/select\"\n\nexport function SelectDemo() {\n   return (\n      <Select>\n         <SelectTrigger className=\"w-[180px]\">\n            <SelectValue placeholder=\"Select a fruit\" />\n         </SelectTrigger>\n         <SelectContent>\n            <SelectGroup>\n               <SelectLabel>Fruits</SelectLabel>\n               <SelectItem value=\"apple\">Apple</SelectItem>\n               <SelectItem value=\"banana\">Banana</SelectItem>\n               <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n               <SelectItem value=\"grapes\">Grapes</SelectItem>\n               <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n         </SelectContent>\n      </Select>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/separator-demo.tsx",
+      "content": "import { Separator } from \"@/components/ui/separator\"\n\nexport function SeparatorDemo() {\n   return (\n      <div>\n         <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-medium leading-none\">\n               Radix Primitives\n            </h4>\n            <p className=\"text-sm text-muted-foreground\">\n               An open-source UI component library.\n            </p>\n         </div>\n         <Separator className=\"my-4\" />\n         <div className=\"flex h-5 items-center space-x-4 text-sm\">\n            <div>Blog</div>\n            <Separator orientation=\"vertical\" />\n            <div>Docs</div>\n            <Separator orientation=\"vertical\" />\n            <div>Source</div>\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sheet-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Sheet,\n   SheetClose,\n   SheetContent,\n   SheetDescription,\n   SheetFooter,\n   SheetHeader,\n   SheetTitle,\n   SheetTrigger,\n} from \"@/components/ui/sheet\"\n\nexport function SheetDemo() {\n   return (\n      <Sheet>\n         <SheetTrigger asChild>\n            <Button variant=\"outline\">Open</Button>\n         </SheetTrigger>\n         <SheetContent>\n            <SheetHeader>\n               <SheetTitle>Edit profile</SheetTitle>\n               <SheetDescription>\n                  Make changes to your profile here. Click save when you're\n                  done.\n               </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"name\" className=\"text-right\">\n                     Name\n                  </Label>\n                  <Input\n                     id=\"name\"\n                     value=\"Pedro Duarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n               <div className=\"grid grid-cols-4 items-center gap-4\">\n                  <Label htmlFor=\"username\" className=\"text-right\">\n                     Username\n                  </Label>\n                  <Input\n                     id=\"username\"\n                     value=\"@peduarte\"\n                     className=\"col-span-3\"\n                  />\n               </div>\n            </div>\n            <SheetFooter>\n               <SheetClose asChild>\n                  <Button type=\"submit\">Save changes</Button>\n               </SheetClose>\n            </SheetFooter>\n         </SheetContent>\n      </Sheet>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonDemo() {\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <Skeleton className=\"h-12 w-12 rounded-full\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={cn(\"w-[60%]\", className)}\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport function SonnerDemo() {\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() =>\n            toast(\"Event has been created\", {\n               description: \"Sunday, December 03, 2023 at 9:00 AM\",\n               action: {\n                  label: \"Undo\",\n                  onClick: () => console.log(\"Undo\"),\n               },\n            })\n         }\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/switch-demo.tsx",
+      "content": "import { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\n\nexport function SwitchDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Switch id=\"airplane-mode\" />\n         <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n      </div>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/table-demo.tsx",
+      "content": "import {\n   Table,\n   TableBody,\n   TableCaption,\n   TableCell,\n   TableFooter,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from \"@/components/ui/table\"\n\nconst invoices = [\n   {\n      invoice: \"INV001\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$250.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV002\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$150.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV003\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$350.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV004\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$450.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV005\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$550.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV006\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$200.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV007\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$300.00\",\n      paymentMethod: \"Credit Card\",\n   },\n]\n\nexport function TableDemo() {\n   return (\n      <Table>\n         <TableCaption>A list of your recent invoices.</TableCaption>\n         <TableHeader>\n            <TableRow>\n               <TableHead className=\"w-[100px]\">Invoice</TableHead>\n               <TableHead>Status</TableHead>\n               <TableHead>Method</TableHead>\n               <TableHead className=\"text-right\">Amount</TableHead>\n            </TableRow>\n         </TableHeader>\n         <TableBody>\n            {invoices.map((invoice) => (\n               <TableRow key={invoice.invoice}>\n                  <TableCell className=\"font-medium\">\n                     {invoice.invoice}\n                  </TableCell>\n                  <TableCell>{invoice.paymentStatus}</TableCell>\n                  <TableCell>{invoice.paymentMethod}</TableCell>\n                  <TableCell className=\"text-right\">\n                     {invoice.totalAmount}\n                  </TableCell>\n               </TableRow>\n            ))}\n         </TableBody>\n         <TableFooter>\n            <TableRow>\n               <TableCell colSpan={3}>Total</TableCell>\n               <TableCell className=\"text-right\">$2,500.00</TableCell>\n            </TableRow>\n         </TableFooter>\n      </Table>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tabs-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Tabs,\n   TabsContent,\n   TabsList,\n   TabsTrigger,\n} from \"@/components/ui/tabs\"\n\nexport function TabsDemo() {\n   return (\n      <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n         <TabsList className=\"grid w-full grid-cols-2\">\n            <TabsTrigger value=\"account\">Account</TabsTrigger>\n            <TabsTrigger value=\"password\">Password</TabsTrigger>\n         </TabsList>\n         <TabsContent value=\"account\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Account</CardTitle>\n                  <CardDescription>\n                     Make changes to your account here. Click save when you're\n                     done.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"username\">Username</Label>\n                     <Input id=\"username\" defaultValue=\"@peduarte\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save changes</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n         <TabsContent value=\"password\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Password</CardTitle>\n                  <CardDescription>\n                     Change your password here. After saving, you'll be logged\n                     out.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"current\">Current password</Label>\n                     <Input id=\"current\" type=\"password\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"new\">New password</Label>\n                     <Input id=\"new\" type=\"password\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save password</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n      </Tabs>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/components/ui/textarea\"\n\nexport function TextareaDemo() {\n   return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/hooks/use-toast\"\nimport { Button } from \"@/components/ui/button\"\nimport { ToastAction } from \"@/components/ui/toast\"\n\nexport function ToastDemo() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Scheduled: Catch up \",\n               description: \"Friday, February 10, 2023 at 5:57 PM\",\n               action: (\n                  <ToastAction altText=\"Goto schedule to undo\">\n                     Undo\n                  </ToastAction>\n               ),\n            })\n         }}\n      >\n         Add to calendar\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleDemo() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <Bold className=\"h-4 w-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\n\nexport function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <Bold className=\"h-4 w-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <Italic className=\"h-4 w-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <Underline className=\"h-4 w-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nexport function TooltipDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport function BadgeDestructive() {\n   return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-outline.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport function BadgeOutline() {\n   return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/components/ui/badge\"\n\nexport function BadgeSecondary() {\n   return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-destructive.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport function ButtonDestructive() {\n   return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-ghost.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport function ButtonGhost() {\n   return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-link.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport function ButtonLink() {\n   return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport function ButtonLoading() {\n   return (\n      <Button disabled>\n         <Loader2 className=\"animate-spin\" />\n         Please wait\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-outline.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport function ButtonOutline() {\n   return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-secondary.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\n\nexport function ButtonSecondary() {\n   return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-with-icon.tsx",
+      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport function ButtonWithIcon() {\n   return (\n      <Button>\n         <MailOpen /> Login with Email\n      </Button>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleDisabled() {\n   return (\n      <Toggle aria-label=\"Toggle italic\" disabled>\n         <Underline className=\"h-4 w-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleOutline() {\n   return (\n      <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n         <Italic />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleWithText() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <Italic />\n         Italic\n      </Toggle>\n   )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/skeleton-card.json b/apps/web/public/v0/styles/miami/skeleton-card.json
new file mode 100644
index 00000000..1724ed27
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/skeleton-card.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "skeleton-card",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/skeleton-card.tsx",
+      "content": "import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport default function SkeletonCard() {\n   return (\n      <div className=\"flex flex-col space-y-3\">\n         <Skeleton className=\"h-[125px] w-[250px] rounded-xl\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/skeleton-demo.json b/apps/web/public/v0/styles/miami/skeleton-demo.json
new file mode 100644
index 00000000..2c32ccfe
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/skeleton-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "skeleton-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport default function SkeletonDemo() {\n   return (\n      <div className=\"flex items-center space-x-4\">\n         <Skeleton className=\"size-12 rounded-full\" />\n         <div className=\"space-y-2\">\n            <Skeleton className=\"h-4 w-[250px]\" />\n            <Skeleton className=\"h-4 w-[200px]\" />\n         </div>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/skeleton.json b/apps/web/public/v0/styles/miami/skeleton.json
new file mode 100644
index 00000000..f76e81e5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/skeleton.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "skeleton",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/skeleton.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\"bg-primary/10 animate-pulse rounded-md\", className)}\n         {...props}\n      />\n   )\n}\n\nexport { Skeleton }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/slider-demo.json b/apps/web/public/v0/styles/miami/slider-demo.json
new file mode 100644
index 00000000..c347569a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/slider-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDemo({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/slider-disabled.json b/apps/web/public/v0/styles/miami/slider-disabled.json
new file mode 100644
index 00000000..2c6551c3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/slider-disabled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-disabled.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDisabled({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         disabled\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/slider-format-label-side.json b/apps/web/public/v0/styles/miami/slider-format-label-side.json
new file mode 100644
index 00000000..3a65b895
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/slider-format-label-side.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-format-label-side",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-format-label-side.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderFormatLabelSide({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         formatLabel={(value) => `${value} points`}\n         formatLabelSide=\"left\"\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/slider-format-label.json b/apps/web/public/v0/styles/miami/slider-format-label.json
new file mode 100644
index 00000000..3e57df11
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/slider-format-label.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-format-label",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-format-label.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderFormatLabel({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         formatLabel={(value) => `${value} points`}\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/slider-inverted.json b/apps/web/public/v0/styles/miami/slider-inverted.json
new file mode 100644
index 00000000..2f76cdd1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/slider-inverted.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-inverted",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-inverted.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderInverted({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[50]}\n         max={100}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         inverted\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/slider-range.json b/apps/web/public/v0/styles/miami/slider-range.json
new file mode 100644
index 00000000..86055e4e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/slider-range.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-range",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-range.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderRange({ className, ...props }: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[25, 75]}\n         max={100}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/slider-tick-marks-full.json b/apps/web/public/v0/styles/miami/slider-tick-marks-full.json
new file mode 100644
index 00000000..87efafd3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/slider-tick-marks-full.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-tick-marks-full",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-tick-marks-full.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderTickMarksFull({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         showSteps=\"full\"\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/slider-tick-marks-half.json b/apps/web/public/v0/styles/miami/slider-tick-marks-half.json
new file mode 100644
index 00000000..3eeff8fd
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/slider-tick-marks-half.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-tick-marks-half",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-tick-marks-half.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderTickMarksHalf({\n   className,\n   ...props\n}: SliderProps) {\n   return (\n      <Slider\n         defaultValue={[2]}\n         max={5}\n         step={1}\n         className={cn(\"w-3/5\", className)}\n         showSteps=\"half\"\n         {...props}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/slider-vertical.json b/apps/web/public/v0/styles/miami/slider-vertical.json
new file mode 100644
index 00000000..1b8190bc
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/slider-vertical.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider-vertical",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/slider-vertical.tsx",
+      "content": "import { Slider } from \"@/components/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderVertical({ className, ...props }: SliderProps) {\n   return (\n      <>\n         {/* Vertical slider needs its parent container to define the height */}\n         <div className=\"h-64\">\n            <Slider\n               defaultValue={[50]}\n               max={100}\n               step={1}\n               orientation=\"vertical\"\n               className={className}\n               {...props}\n            />\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/slider.json b/apps/web/public/v0/styles/miami/slider.json
new file mode 100644
index 00000000..4f60bef2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/slider.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "slider",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-slider"
+  ],
+  "files": [
+    {
+      "path": "ui/slider.tsx",
+      "content": "\"use client\"\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface SliderProps\n   extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n   showSteps?: \"none\" | \"half\" | \"full\"\n   formatLabel?: (value: number) => string\n   formatLabelSide?: string\n}\n\nconst Slider = React.forwardRef<\n   React.ElementRef<typeof SliderPrimitive.Root>,\n   SliderProps\n>(\n   (\n      {\n         className,\n         showSteps = \"none\",\n         formatLabel,\n         formatLabelSide = \"top\",\n         ...props\n      },\n      ref,\n   ) => {\n      const {\n         min = 0,\n         max = 100,\n         step = 1,\n         orientation = \"horizontal\",\n         value,\n         defaultValue,\n         onValueChange,\n      } = props\n      const [hoveredThumbIndex, setHoveredThumbIndex] =\n         React.useState<boolean>(false)\n      const numberOfSteps = Math.floor((max - min) / step)\n      const stepLines = Array.from(\n         { length: numberOfSteps },\n         (_, index) => index * step + min,\n      )\n\n      const initialValue = Array.isArray(value)\n         ? value\n         : Array.isArray(defaultValue)\n           ? defaultValue\n           : [min, max]\n      const [localValues, setLocalValues] =\n         React.useState<number[]>(initialValue)\n\n      React.useEffect(() => {\n         if (!isEqual(value, localValues))\n            setLocalValues(\n               Array.isArray(value)\n                  ? value\n                  : Array.isArray(defaultValue)\n                    ? defaultValue\n                    : [min, max],\n            )\n      }, [min, max, value])\n\n      const handleValueChange = (newValues: number[]) => {\n         setLocalValues(newValues)\n         if (onValueChange) onValueChange(newValues)\n      }\n\n      function isEqual(\n         array1: number[] | undefined,\n         array2: number[] | undefined,\n      ) {\n         array1 = array1 ?? []\n         array2 = array2 ?? []\n\n         if (array1.length !== array2.length) return false\n\n         for (let i = 0; i < array1.length; i++) {\n            if (array1[i] !== array2[i]) return false\n         }\n\n         return true\n      }\n\n      return (\n         <SliderPrimitive.Root\n            ref={ref}\n            className={cn(\n               \"relative flex cursor-pointer touch-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n               orientation === \"horizontal\"\n                  ? \"w-full items-center\"\n                  : \"h-full justify-center\",\n               className,\n            )}\n            min={min}\n            max={max}\n            step={step}\n            value={localValues}\n            onValueChange={(value) => handleValueChange(value)}\n            {...props}\n            onFocus={() => setHoveredThumbIndex(true)}\n            onBlur={() => setHoveredThumbIndex(false)}\n         >\n            <SliderPrimitive.Track\n               className={cn(\n                  \"bg-primary/20 relative grow overflow-hidden rounded-full\",\n                  orientation === \"horizontal\"\n                     ? \"h-1.5 w-full\"\n                     : \"h-full w-1.5\",\n               )}\n            >\n               <SliderPrimitive.Range\n                  className={cn(\n                     \"bg-primary absolute\",\n                     orientation === \"horizontal\" ? \"h-full\" : \"w-full\",\n                  )}\n               />\n               {showSteps !== undefined &&\n                  showSteps !== \"none\" &&\n                  stepLines.map((value, index) => {\n                     if (value === min || value === max) return null\n\n                     const positionPercentage =\n                        ((value - min) / (max - min)) * 100\n                     const adjustedPosition =\n                        50 + (positionPercentage - 50) * 0.96\n                     return (\n                        <div\n                           key={index}\n                           className={cn(\n                              {\n                                 \"w-0.5 h-2\": orientation !== \"vertical\",\n                                 \"w-2 h-0.5\": orientation === \"vertical\",\n                              },\n                              \"bg-muted-foreground absolute\",\n                              {\n                                 \"left-1\":\n                                    orientation === \"vertical\" &&\n                                    showSteps === \"half\",\n                                 \"top-1\":\n                                    orientation !== \"vertical\" &&\n                                    showSteps === \"half\",\n                                 \"left-0\":\n                                    orientation === \"vertical\" &&\n                                    showSteps === \"full\",\n                                 \"top-0\":\n                                    orientation !== \"vertical\" &&\n                                    showSteps === \"full\",\n                                 \"-translate-x-1/2\": orientation !== \"vertical\",\n                                 \"-translate-y-1/2\": orientation === \"vertical\",\n                              },\n                           )}\n                           style={{\n                              [orientation === \"vertical\" ? \"bottom\" : \"left\"]:\n                                 `${adjustedPosition}%`,\n                           }}\n                        />\n                     )\n                  })}\n            </SliderPrimitive.Track>\n            {localValues.map((numberStep, index) => (\n               <SliderPrimitive.Thumb\n                  key={index}\n                  className={cn(\n                     \"border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1\",\n                  )}\n               >\n                  {hoveredThumbIndex && formatLabel && (\n                     <div\n                        className={cn(\n                           {\n                              \"bottom-8 left-1/2 -translate-x-1/2\":\n                                 formatLabelSide === \"top\",\n                           },\n                           {\n                              \"top-8 left-1/2 -translate-x-1/2\":\n                                 formatLabelSide === \"bottom\",\n                           },\n                           {\n                              \"right-8 -translate-y-1/4\":\n                                 formatLabelSide === \"left\",\n                           },\n                           {\n                              \"left-8 -translate-y-1/4\":\n                                 formatLabelSide === \"right\",\n                           },\n                           \"bg-popover text-popover-foreground absolute z-30 w-max items-center justify-items-center rounded-md border px-2 py-1 text-center shadow-sm\",\n                        )}\n                     >\n                        {formatLabel(numberStep)}\n                     </div>\n                  )}\n               </SliderPrimitive.Thumb>\n            ))}\n         </SliderPrimitive.Root>\n      )\n   },\n)\n\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sonner-demo.json b/apps/web/public/v0/styles/miami/sonner-demo.json
new file mode 100644
index 00000000..62e4d6f4
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sonner-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sonner-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "examples/sonner-demo.tsx",
+      "content": "import { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function SonnerDemo() {\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() =>\n            toast(\"Event has been created\", {\n               description: \"Sunday, December 03, 2023 at 9:00 AM\",\n               action: {\n                  label: \"Undo\",\n\n                  // eslint-disable-next-line no-console\n                  onClick: () => console.log(\"Undo\"),\n               },\n            })\n         }\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sonner.json b/apps/web/public/v0/styles/miami/sonner.json
new file mode 100644
index 00000000..2f1a7f57
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sonner.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sonner",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "sonner",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "ui/sonner.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner } from \"sonner\"\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>\n\nfunction Toaster({ ...props }: ToasterProps) {\n   const { theme = \"system\" } = useTheme()\n\n   return (\n      <Sonner\n         theme={theme as ToasterProps[\"theme\"]}\n         className=\"toaster group\"\n         toastOptions={{\n            classNames: {\n               toast: \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n               description: \"group-[.toast]:text-muted-foreground\",\n               actionButton:\n                  \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n               cancelButton:\n                  \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n            },\n         }}\n         {...props}\n      />\n   )\n}\n\nexport { Toaster }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sparkles-text-demo.json b/apps/web/public/v0/styles/miami/sparkles-text-demo.json
new file mode 100644
index 00000000..95d5a1dd
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sparkles-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sparkles-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/sparkles-text-demo.tsx",
+      "content": "import SparklesText from \"@/components/ui/sparkles-text\"\n\nexport default async function SparklesTextDemo() {\n   return <SparklesText text=\"Nyxb UI\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/sparkles-text.json b/apps/web/public/v0/styles/miami/sparkles-text.json
new file mode 100644
index 00000000..644906d4
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/sparkles-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "sparkles-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/sparkles-text.tsx",
+      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\nimport type { CSSProperties, ReactElement } from \"react\"\nimport { useEffect, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface Sparkle {\n   id: string\n   x: string\n   y: string\n   color: string\n   delay: number\n   scale: number\n   lifespan: number\n}\n\ninterface SparklesTextProps {\n   /**\n    * @default <div />\n    * @type ReactElement\n    * @description\n    * The component to be rendered as the text\n    */\n   as?: ReactElement\n\n   /**\n    * @default \"\"\n    * @type string\n    * @description\n    * The className of the text\n    */\n   className?: string\n\n   /**\n    * @required\n    * @type string\n    * @description\n    * The text to be displayed\n    */\n   text: string\n\n   /**\n    * @default 10\n    * @type number\n    * @description\n    * The count of sparkles\n    */\n   sparklesCount?: number\n\n   /**\n    * @default \"{first: '#A07CFE', second: '#FE8FB5'}\"\n    * @type string\n    * @description\n    * The colors of the sparkles\n    */\n   colors?: {\n      first: string\n      second: string\n   }\n}\n\nconst SparklesText: React.FC<SparklesTextProps> = ({\n   text,\n   colors = { first: \"#A07CFE\", second: \"#FE8FB5\" },\n   className,\n   sparklesCount = 10,\n   ...props\n}) => {\n   const [sparkles, setSparkles] = useState<Sparkle[]>([])\n\n   useEffect(() => {\n      const generateStar = (): Sparkle => {\n         const starX = `${Math.random() * 100}%`\n         const starY = `${Math.random() * 100}%`\n         const color = Math.random() > 0.5 ? colors.first : colors.second\n         const delay = Math.random() * 2\n         const scale = Math.random() * 1 + 0.3\n         const lifespan = Math.random() * 10 + 5\n         const id = `${starX}-${starY}-${Date.now()}`\n         return { id, x: starX, y: starY, color, delay, scale, lifespan }\n      }\n\n      const initializeStars = () => {\n         const newSparkles = Array.from({ length: sparklesCount }, generateStar)\n         setSparkles(newSparkles)\n      }\n\n      const updateStars = () => {\n         setSparkles((currentSparkles) =>\n            currentSparkles.map((star) => {\n               if (star.lifespan <= 0) return generateStar()\n               else return { ...star, lifespan: star.lifespan - 0.1 }\n            }),\n         )\n      }\n\n      initializeStars()\n      const interval = setInterval(updateStars, 100)\n\n      return () => clearInterval(interval)\n   }, [colors.first, colors.second])\n\n   return (\n      <div\n         className={cn(\"text-6xl font-bold\", className)}\n         {...props}\n         style={\n            {\n               \"--sparkles-first-color\": `${colors.first}`,\n               \"--sparkles-second-color\": `${colors.second}`,\n            } as CSSProperties\n         }\n      >\n         <span className=\"relative inline-block\">\n            {sparkles.map((sparkle) => (\n               <Sparkle key={sparkle.id} {...sparkle} />\n            ))}\n            <strong className=\"bg-gradient-to-r from-[var(--sparkles-first-color)] to-[var(--sparkles-second-color)] bg-clip-text text-transparent\">\n               {text}\n            </strong>\n         </span>\n      </div>\n   )\n}\n\nconst Sparkle: React.FC<Sparkle> = ({ id, x, y, color, delay, scale }) => {\n   return (\n      <motion.svg\n         key={id}\n         className=\"pointer-events-none absolute z-20\"\n         initial={{ opacity: 0, left: x, top: y }}\n         animate={{\n            opacity: [0, 1, 0],\n            scale: [0, scale, 0],\n            rotate: [75, 120, 150],\n         }}\n         transition={{ duration: 0.8, repeat: Number.POSITIVE_INFINITY, delay }}\n         width=\"21\"\n         height=\"21\"\n         viewBox=\"0 0 21 21\"\n      >\n         <path\n            d=\"M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z\"\n            fill={color}\n         />\n      </motion.svg>\n   )\n}\n\nexport default SparklesText\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/star-rating-colored.json b/apps/web/public/v0/styles/miami/star-rating-colored.json
new file mode 100644
index 00000000..586043ac
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/star-rating-colored.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "star-rating-colored",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/star-rating-colored.tsx",
+      "content": "import * as React from \"react\"\nimport { StarRating } from \"@/components/ui/star-rating\"\n\nexport default function StarRatingColored() {\n   const [value, setValue] = React.useState<number>(3)\n   return (\n      <StarRating\n         value={value}\n         setValue={setValue}\n         iconProps={{ className: \"fill-yellow-500 stroke-yellow-500\" }}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/star-rating-demo.json b/apps/web/public/v0/styles/miami/star-rating-demo.json
new file mode 100644
index 00000000..2eb36a7f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/star-rating-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "star-rating-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/star-rating-demo.tsx",
+      "content": "import * as React from \"react\"\nimport { StarRating } from \"@/components/ui/star-rating\"\n\nexport default function StarRatingDemo() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/star-rating-icon.json b/apps/web/public/v0/styles/miami/star-rating-icon.json
new file mode 100644
index 00000000..b827cd51
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/star-rating-icon.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "star-rating-icon",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/star-rating-icon.tsx",
+      "content": "import { Heart } from \"lucide-react\"\nimport * as React from \"react\"\nimport { StarRating } from \"@/components/ui/star-rating\"\n\nexport default function StarRatingIcon() {\n   const [value, setValue] = React.useState<number>(3)\n   return <StarRating value={value} setValue={setValue} icon={Heart} />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/star-rating.json b/apps/web/public/v0/styles/miami/star-rating.json
new file mode 100644
index 00000000..287a0152
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/star-rating.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "star-rating",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "files": [
+    {
+      "path": "ui/star-rating.tsx",
+      "content": "import type { LucideIcon, LucideProps } from \"lucide-react\"\nimport { StarIcon } from \"lucide-react\"\nimport type { Dispatch, SetStateAction } from \"react\"\nimport type React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface StarWrapperProps {\n   value?: number\n   setValue?: Dispatch<SetStateAction<number>>\n   numStars?: number\n   icon?: LucideIcon\n   disabled?: boolean\n   wrapperProps?: React.HTMLAttributes<HTMLDivElement>\n   iconProps?: LucideProps\n   showcase?: boolean\n}\n\nfunction StarRating({\n   numStars = 5,\n   icon,\n   setValue,\n   value,\n   disabled,\n   showcase,\n   iconProps = {},\n   wrapperProps = {},\n}: StarWrapperProps) {\n   const { className: wrapperClassName, ...restWrapperProps } = wrapperProps\n   const { className: iconClassName, ...restIconProps } = iconProps\n   const IconComponent = icon\n\n   return (\n      <div\n         className={cn(\"flex items-center gap-1\", wrapperClassName)}\n         {...restWrapperProps}\n      >\n         {Array.from({ length: numStars }, (_, i) => {\n            const isRated = i < value!\n            const styledIconProps: LucideProps = {\n               onMouseEnter: () => !showcase && !disabled && setValue!(i + 1),\n               className: cn(\n                  \"fill-primary stroke-primary size-5\",\n                  {\n                     \"opacity-50 pointer-events-none\": disabled,\n                     \"transition-transform duration-300 hover:scale-110\":\n                        !disabled && !showcase,\n                     \"!fill-muted !stroke-muted\": !isRated,\n                  },\n                  iconClassName,\n               ),\n               ...restIconProps,\n            }\n            return (\n               <div key={i}>\n                  {IconComponent ? (\n                     <IconComponent {...styledIconProps} />\n                  ) : (\n                     <StarIcon {...styledIconProps} />\n                  )}\n               </div>\n            )\n         })}\n      </div>\n   )\n}\n\nexport { StarRating }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-clickable-steps.json b/apps/web/public/v0/styles/miami/stepper-clickable-steps.json
new file mode 100644
index 00000000..de63638a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-clickable-steps.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-clickable-steps",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-clickable-steps.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            initialStep={0}\n            steps={steps}\n            onClickStep={(step, setStep) => {\n               toast({\n                  title: \"Step clicked\",\n                  description:\n                     \"This event is executed globally for all steps. If you want to have an event for a specific step, use the `onClickStep` prop of the independent step.\",\n               })\n               setStep(step)\n            }}\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-custom-icons.json b/apps/web/public/v0/styles/miami/stepper-custom-icons.json
new file mode 100644
index 00000000..70d361ac
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-custom-icons.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-custom-icons",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-custom-icons.tsx",
+      "content": "import { Building, Star, User } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\", icon: User },\n   { label: \"Step 2\", icon: Building },\n   { label: \"Step 3\", icon: Star },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-custom-styles.json b/apps/web/public/v0/styles/miami/stepper-custom-styles.json
new file mode 100644
index 00000000..afc70a88
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-custom-styles.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-custom-styles",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-custom-styles.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            initialStep={0}\n            steps={steps}\n            styles={{\n               \"step-button-container\": cn(\n                  \"rounded-none text-purple-700\",\n                  \"data-[current=true]:border-purple-500 data-[current=true]:bg-purple-50\",\n                  \"data-[active=true]:border-purple-500 data-[active=true]:bg-purple-500\",\n               ),\n               \"horizontal-step\":\n                  \"data-[completed=true]:[&:not(:last-child)]:after:bg-purple-500\",\n            }}\n            variables={{\n               \"--step-icon-size\": \"60px\",\n               \"--step-gap\": \"20px\",\n            }}\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-demo.json b/apps/web/public/v0/styles/miami/stepper-demo.json
new file mode 100644
index 00000000..468c9208
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-description.json b/apps/web/public/v0/styles/miami/stepper-description.json
new file mode 100644
index 00000000..1a0550e2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-description.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-description",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-description.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\", description: \"Description 1\" },\n   { label: \"Step 2\", description: \"Description 2\" },\n   { label: \"Step 3\", description: \"Description 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isDisabledStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-footer-inside.json b/apps/web/public/v0/styles/miami/stepper-footer-inside.json
new file mode 100644
index 00000000..ecfb1bb9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-footer-inside.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-footer-inside",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-footer-inside.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper orientation=\"vertical\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                     <StepButtons />\n                  </Step>\n               )\n            })}\n            <FinalStep />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction StepButtons() {\n   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =\n      useStepper()\n   return (\n      <div className=\"mb-4 flex w-full gap-2\">\n         <Button\n            disabled={isDisabledStep}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"secondary\"\n         >\n            Prev\n         </Button>\n         <Button size=\"sm\" onClick={nextStep}>\n            {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n         </Button>\n      </div>\n   )\n}\n\nfunction FinalStep() {\n   const { hasCompletedAllSteps, resetSteps } = useStepper()\n\n   if (!hasCompletedAllSteps) return null\n\n   return (\n      <>\n         <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n            <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n         </div>\n         <div className=\"flex w-full justify-end gap-2\">\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-form.json b/apps/web/public/v0/styles/miami/stepper-form.json
new file mode 100644
index 00000000..da1bef98
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport { Input } from \"@/components/ui/input\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst steps = [\n   { label: \"Step 1\", description: \"Description 1\" },\n   { label: \"Step 2\", description: \"Description 2\" },\n]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper variant=\"circle-alt\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               if (index === 0) {\n                  return (\n                     <Step key={stepProps.label} {...stepProps}>\n                        <FirstStepForm />\n                     </Step>\n                  )\n               }\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <SecondStepForm />\n                  </Step>\n               )\n            })}\n            <MyStepperFooter />\n         </Stepper>\n      </div>\n   )\n}\n\nconst FirstFormSchema = z.object({\n   username: z.string().min(2, {\n      message: \"Username must be at least 2 characters.\",\n   }),\n})\n\nfunction FirstStepForm() {\n   const { nextStep } = useStepper()\n\n   const form = useForm<z.infer<typeof FirstFormSchema>>({\n      resolver: zodResolver(FirstFormSchema),\n      defaultValues: {\n         username: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FirstFormSchema>) {\n      nextStep()\n      toast({\n         title: \"First step submitted!\",\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"username\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Username</FormLabel>\n                     <FormControl>\n                        <Input placeholder=\"nyxb\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your public display name.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <StepperFormActions />\n         </form>\n      </Form>\n   )\n}\n\nconst SecondFormSchema = z.object({\n   password: z.string().min(8, {\n      message: \"Password must be at least 8 characters.\",\n   }),\n})\n\nfunction SecondStepForm() {\n   const { nextStep } = useStepper()\n\n   const form = useForm<z.infer<typeof SecondFormSchema>>({\n      resolver: zodResolver(SecondFormSchema),\n      defaultValues: {\n         password: \"\",\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof SecondFormSchema>) {\n      nextStep()\n      toast({\n         title: \"Second step submitted!\",\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n            <FormField\n               control={form.control}\n               name=\"password\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Password</FormLabel>\n                     <FormControl>\n                        <Input type=\"password\" {...field} />\n                     </FormControl>\n                     <FormDescription>\n                        This is your private password.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <StepperFormActions />\n         </form>\n      </Form>\n   )\n}\n\nfunction StepperFormActions() {\n   const {\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n\n   return (\n      <div className=\"flex w-full justify-end gap-2\">\n         {hasCompletedAllSteps ? (\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         ) : (\n            <>\n               <Button\n                  disabled={isDisabledStep}\n                  onClick={prevStep}\n                  size=\"sm\"\n                  variant=\"secondary\"\n               >\n                  Prev\n               </Button>\n               <Button size=\"sm\">\n                  {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n               </Button>\n            </>\n         )}\n      </div>\n   )\n}\n\nfunction MyStepperFooter() {\n   const { activeStep, resetSteps, steps } = useStepper()\n\n   if (activeStep !== steps.length) return null\n\n   return (\n      <div className=\"flex items-center justify-end gap-2\">\n         <Button onClick={resetSteps}>Reset Stepper with Form</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-optional-steps.json b/apps/web/public/v0/styles/miami/stepper-optional-steps.json
new file mode 100644
index 00000000..aa2a0a4e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-optional-steps.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-optional-steps",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-optional-steps.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\", optional: true },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-orientation.json b/apps/web/public/v0/styles/miami/stepper-orientation.json
new file mode 100644
index 00000000..a6dd0dd6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-orientation.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-orientation",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport type { StepItem, StepperProps } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [orientation, setOrientation] =\n      React.useState<StepperProps[\"orientation\"]>(\"vertical\")\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={orientation}\n            onValueChange={(value) =>\n               setOrientation(value as StepperProps[\"orientation\"])\n            }\n         >\n            <Label\n               htmlFor=\"horizontal\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"horizontal\"\n                  id=\"horizontal\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">Horizontal</h2>\n            </Label>\n            <Label\n               htmlFor=\"vertical\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"vertical\"\n                  id=\"vertical\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">Vertical</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper orientation={orientation} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-scroll-tracking.json b/apps/web/public/v0/styles/miami/stepper-scroll-tracking.json
new file mode 100644
index 00000000..d1994e27
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-scroll-tracking.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-scroll-tracking",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-scroll-tracking.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n   { label: \"Step 4\" },\n   { label: \"Step 5\" },\n   { label: \"Step 6\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper\n            orientation=\"vertical\"\n            initialStep={0}\n            steps={steps}\n            scrollTracking\n         >\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                     <StepButtons />\n                  </Step>\n               )\n            })}\n            <FinalStep />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction StepButtons() {\n   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =\n      useStepper()\n   return (\n      <div className=\"mb-4 flex w-full gap-2\">\n         <Button\n            disabled={isDisabledStep}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"secondary\"\n         >\n            Prev\n         </Button>\n         <Button size=\"sm\" onClick={nextStep}>\n            {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n         </Button>\n      </div>\n   )\n}\n\nfunction FinalStep() {\n   const { hasCompletedAllSteps, resetSteps } = useStepper()\n\n   if (!hasCompletedAllSteps) return null\n\n   return (\n      <>\n         <div className=\"bg-secondary text-primary flex h-40 items-center justify-center rounded-md border\">\n            <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n         </div>\n         <div className=\"flex w-full justify-end gap-2\">\n            <Button size=\"sm\" onClick={resetSteps}>\n               Reset\n            </Button>\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-sizes.json b/apps/web/public/v0/styles/miami/stepper-sizes.json
new file mode 100644
index 00000000..d2d90f41
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-sizes.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-sizes",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-sizes.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport type { StepItem, StepperProps } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [size, setSize] = React.useState<StepperProps[\"size\"]>(\"md\")\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={size}\n            onValueChange={(value) => setSize(value as StepperProps[\"size\"])}\n         >\n            <Label\n               htmlFor=\"sm\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"sm\" id=\"sm\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">sm</h2>\n            </Label>\n            <Label\n               htmlFor=\"md\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"md\" id=\"md\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">md</h2>\n            </Label>\n            <Label\n               htmlFor=\"lg\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"lg\" id=\"lg\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">lg</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper size={size} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-state.json b/apps/web/public/v0/styles/miami/stepper-state.json
new file mode 100644
index 00000000..fbe86cdb
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-state.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-state",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-state.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport type { StepItem } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <Stepper state=\"error\" initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n      isError,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button disabled={isError} size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper-variants.json b/apps/web/public/v0/styles/miami/stepper-variants.json
new file mode 100644
index 00000000..277ff1a8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper-variants.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper-variants",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "examples/stepper-variants.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport type { StepItem, StepperProps } from \"@/components/ui/stepper\"\nimport { Step, Stepper, useStepper } from \"@/components/ui/stepper\"\n\nconst steps = [\n   { label: \"Step 1\" },\n   { label: \"Step 2\" },\n   { label: \"Step 3\" },\n] satisfies StepItem[]\n\nexport default function StepperDemo() {\n   const [variant, setVariant] =\n      React.useState<StepperProps[\"variant\"]>(\"circle\")\n\n   return (\n      <div className=\"flex w-full flex-col gap-4\">\n         <RadioGroup\n            className=\"mb-2 flex\"\n            value={variant}\n            onValueChange={(value) =>\n               setVariant(value as StepperProps[\"variant\"])\n            }\n         >\n            <Label\n               htmlFor=\"circle\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"circle\" id=\"circle\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">circle</h2>\n            </Label>\n            <Label\n               htmlFor=\"circle-alt\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem\n                  value=\"circle-alt\"\n                  id=\"circle-alt\"\n                  className=\"sr-only\"\n               />\n               <h2 className=\"font-medium\">circle-alt</h2>\n            </Label>\n            <Label\n               htmlFor=\"line\"\n               className=\"bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1\"\n            >\n               <RadioGroupItem value=\"line\" id=\"line\" className=\"sr-only\" />\n               <h2 className=\"font-medium\">line</h2>\n            </Label>\n         </RadioGroup>\n         <Stepper variant={variant} initialStep={0} steps={steps}>\n            {steps.map((stepProps, index) => {\n               return (\n                  <Step key={stepProps.label} {...stepProps}>\n                     <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n                        <h1 className=\"text-xl\">\n                           Step\n                           {index + 1}\n                        </h1>\n                     </div>\n                  </Step>\n               )\n            })}\n            <Footer />\n         </Stepper>\n      </div>\n   )\n}\n\nfunction Footer() {\n   const {\n      nextStep,\n      prevStep,\n      resetSteps,\n      isDisabledStep,\n      hasCompletedAllSteps,\n      isLastStep,\n      isOptionalStep,\n   } = useStepper()\n   return (\n      <>\n         {hasCompletedAllSteps && (\n            <div className=\"bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border\">\n               <h1 className=\"text-xl\">Woohoo! All steps completed! 🎉</h1>\n            </div>\n         )}\n         <div className=\"flex w-full justify-end gap-2\">\n            {hasCompletedAllSteps ? (\n               <Button size=\"sm\" onClick={resetSteps}>\n                  Reset\n               </Button>\n            ) : (\n               <>\n                  <Button\n                     disabled={isDisabledStep}\n                     onClick={prevStep}\n                     size=\"sm\"\n                     variant=\"secondary\"\n                  >\n                     Prev\n                  </Button>\n                  <Button size=\"sm\" onClick={nextStep}>\n                     {isLastStep ? \"Finish\" : isOptionalStep ? \"Skip\" : \"Next\"}\n                  </Button>\n               </>\n            )}\n         </div>\n      </>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/stepper.json b/apps/web/public/v0/styles/miami/stepper.json
new file mode 100644
index 00000000..d7230101
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/stepper.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "stepper",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "ui/stepper.tsx",
+      "content": "\"use client\"\n\nimport { cva } from \"class-variance-authority\"\nimport type { LucideIcon } from \"lucide-react\"\nimport { CheckIcon, Loader2, X } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n} from \"@/components/ui/collapsible\"\n\n// <---------- CONTEXT ---------->\n\ninterface StepperContextValue extends StepperProps {\n   clickable?: boolean\n   isError?: boolean\n   isLoading?: boolean\n   isVertical?: boolean\n   stepCount?: number\n   expandVerticalSteps?: boolean\n   activeStep: number\n   initialStep: number\n}\n\nconst StepperContext = React.createContext<\n   StepperContextValue & {\n      nextStep: () => void\n      prevStep: () => void\n      resetSteps: () => void\n      setStep: (step: number) => void\n   }\n>({\n   steps: [],\n   activeStep: 0,\n   initialStep: 0,\n   nextStep: () => {},\n   prevStep: () => {},\n   resetSteps: () => {},\n   setStep: () => {},\n})\n\ninterface StepperContextProviderProps {\n   value: Omit<StepperContextValue, \"activeStep\">\n   children: React.ReactNode\n}\n\nfunction StepperProvider({ value, children }: StepperContextProviderProps) {\n   const isError = value.state === \"error\"\n   const isLoading = value.state === \"loading\"\n\n   const [activeStep, setActiveStep] = React.useState(value.initialStep)\n\n   const nextStep = () => {\n      setActiveStep((prev) => prev + 1)\n   }\n\n   const prevStep = () => {\n      setActiveStep((prev) => prev - 1)\n   }\n\n   const resetSteps = () => {\n      setActiveStep(value.initialStep)\n   }\n\n   const setStep = (step: number) => {\n      setActiveStep(step)\n   }\n\n   return (\n      <StepperContext.Provider\n         value={{\n            ...value,\n            isError,\n            isLoading,\n            activeStep,\n            nextStep,\n            prevStep,\n            resetSteps,\n            setStep,\n         }}\n      >\n         {children}\n      </StepperContext.Provider>\n   )\n}\n\n// <---------- HOOKS ---------->\n\nfunction usePrevious<T>(value: T): T | undefined {\n   const ref = React.useRef<T>()\n\n   React.useEffect(() => {\n      ref.current = value\n   }, [value])\n\n   return ref.current\n}\n\nfunction useStepper() {\n   const context = React.useContext(StepperContext)\n\n   if (context === undefined)\n      throw new Error(\"useStepper must be used within a StepperProvider\")\n\n   const { children, className, ...rest } = context\n\n   const isLastStep = context.activeStep === context.steps.length - 1\n   const hasCompletedAllSteps = context.activeStep === context.steps.length\n\n   const previousActiveStep = usePrevious(context.activeStep)\n\n   const currentStep = context.steps[context.activeStep]\n   const isOptionalStep = !!currentStep?.optional\n\n   const isDisabledStep = context.activeStep === 0\n\n   return {\n      ...rest,\n      isLastStep,\n      hasCompletedAllSteps,\n      isOptionalStep,\n      isDisabledStep,\n      currentStep,\n      previousActiveStep,\n   }\n}\n\nfunction useMediaQuery(query: string) {\n   const [value, setValue] = React.useState(false)\n\n   React.useEffect(() => {\n      function onChange(event: MediaQueryListEvent) {\n         setValue(event.matches)\n      }\n\n      const result = matchMedia(query)\n      result.addEventListener(\"change\", onChange)\n      setValue(result.matches)\n\n      return () => result.removeEventListener(\"change\", onChange)\n   }, [query])\n\n   return value\n}\n\n// <---------- STEPS ---------->\n\ninterface StepItem {\n   id?: string\n   label?: string\n   description?: string\n   icon?: IconType\n   optional?: boolean\n}\n\ninterface StepOptions {\n   orientation?: \"vertical\" | \"horizontal\"\n   state?: \"loading\" | \"error\"\n   responsive?: boolean\n   checkIcon?: IconType\n   errorIcon?: IconType\n   onClickStep?: (step: number, setStep: (step: number) => void) => void\n   mobileBreakpoint?: string\n   variant?: \"circle\" | \"circle-alt\" | \"line\"\n   expandVerticalSteps?: boolean\n   size?: \"sm\" | \"md\" | \"lg\"\n   styles?: {\n      /** Styles for the main container */\n      \"main-container\"?: string\n      /** Styles for the horizontal step */\n      \"horizontal-step\"?: string\n      /** Styles for the horizontal step container (button and labels) */\n      \"horizontal-step-container\"?: string\n      /** Styles for the vertical step */\n      \"vertical-step\"?: string\n      /** Styles for the vertical step container (button and labels) */\n      \"vertical-step-container\"?: string\n      /** Styles for the vertical step content */\n      \"vertical-step-content\"?: string\n      /** Styles for the step button container */\n      \"step-button-container\"?: string\n      /** Styles for the label and description container */\n      \"step-label-container\"?: string\n      /** Styles for the step label */\n      \"step-label\"?: string\n      /** Styles for the step description */\n      \"step-description\"?: string\n   }\n   variables?: {\n      \"--step-icon-size\"?: string\n      \"--step-gap\"?: string\n   }\n   scrollTracking?: boolean\n}\ninterface StepperProps extends StepOptions {\n   children?: React.ReactNode\n   className?: string\n   initialStep: number\n   steps: StepItem[]\n}\n\nconst VARIABLE_SIZES = {\n   sm: \"32px\",\n   md: \"36px\",\n   lg: \"40px\",\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n   (props, ref: React.Ref<HTMLDivElement>) => {\n      const {\n         className,\n         children,\n         orientation: orientationProp,\n         state,\n         responsive,\n         checkIcon,\n         errorIcon,\n         onClickStep,\n         mobileBreakpoint,\n         expandVerticalSteps = false,\n         initialStep = 0,\n         size,\n         steps,\n         variant,\n         styles,\n         variables,\n         scrollTracking = false,\n         ...rest\n      } = props\n\n      const childArr = React.Children.toArray(children)\n\n      const items = [] as React.ReactElement[]\n\n      const footer = childArr.map((child, _index) => {\n         if (!React.isValidElement(child))\n            throw new Error(\"Stepper children must be valid React elements.\")\n\n         if (child.type === Step) {\n            items.push(child)\n            return null\n         }\n\n         return child\n      })\n\n      const stepCount = items.length\n\n      const isMobile = useMediaQuery(\n         `(max-width: ${mobileBreakpoint || \"768px\"})`,\n      )\n\n      const clickable = !!onClickStep\n\n      const orientation = isMobile && responsive ? \"vertical\" : orientationProp\n\n      const isVertical = orientation === \"vertical\"\n\n      return (\n         <StepperProvider\n            value={{\n               initialStep,\n               orientation,\n               state,\n               size,\n               responsive,\n               checkIcon,\n               errorIcon,\n               onClickStep,\n               clickable,\n               stepCount,\n               isVertical,\n               variant: variant || \"circle\",\n               expandVerticalSteps,\n               steps,\n               scrollTracking,\n               styles,\n            }}\n         >\n            <div\n               ref={ref}\n               className={cn(\n                  \"stepper__main-container\",\n                  \"flex w-full flex-wrap\",\n                  stepCount === 1 ? \"justify-end\" : \"justify-between\",\n                  orientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n                  variant === \"line\" && orientation === \"horizontal\" && \"gap-4\",\n                  className,\n                  styles?.[\"main-container\"],\n               )}\n               style={\n                  {\n                     \"--step-icon-size\":\n                        variables?.[\"--step-icon-size\"] ||\n                        `${VARIABLE_SIZES[size || \"md\"]}`,\n                     \"--step-gap\": variables?.[\"--step-gap\"] || \"8px\",\n                  } as React.CSSProperties\n               }\n               {...rest}\n            >\n               <VerticalContent>{items}</VerticalContent>\n            </div>\n            {orientation === \"horizontal\" && (\n               <HorizontalContent>{items}</HorizontalContent>\n            )}\n            {footer}\n         </StepperProvider>\n      )\n   },\n)\n\nStepper.defaultProps = {\n   size: \"md\",\n   orientation: \"horizontal\",\n   responsive: true,\n}\n\nfunction VerticalContent({ children }: { children: React.ReactNode }) {\n   const { activeStep } = useStepper()\n\n   const childArr = React.Children.toArray(children)\n   const stepCount = childArr.length\n\n   return (\n      <>\n         {React.Children.map(children, (child, i) => {\n            const isCompletedStep =\n               (React.isValidElement(child) &&\n                  (child.props as any).isCompletedStep) ??\n               i < activeStep\n            const isLastStep = i === stepCount - 1\n            const isCurrentStep = i === activeStep\n\n            const stepProps = {\n               index: i,\n               isCompletedStep,\n               isCurrentStep,\n               isLastStep,\n            }\n\n            if (React.isValidElement(child))\n               return React.cloneElement(child, stepProps)\n\n            return null\n         })}\n      </>\n   )\n}\n\nfunction HorizontalContent({ children }: { children: React.ReactNode }) {\n   const { activeStep } = useStepper()\n   const childArr = React.Children.toArray(children)\n\n   if (activeStep > childArr.length) return null\n\n   return (\n      <>\n         {React.Children.map(childArr[activeStep], (node) => {\n            if (!React.isValidElement(node)) return null\n\n            return React.Children.map(\n               node.props.children,\n               (childNode) => childNode,\n            )\n         })}\n      </>\n   )\n}\n\n// <---------- STEP ---------->\n\ninterface StepProps extends React.HTMLAttributes<HTMLLIElement> {\n   label?: string | React.ReactNode\n   description?: string\n   icon?: IconType\n   state?: \"loading\" | \"error\"\n   checkIcon?: IconType\n   errorIcon?: IconType\n   isCompletedStep?: boolean\n   isKeepError?: boolean\n   onClickStep?: (step: number, setStep: (step: number) => void) => void\n}\n\ninterface StepSharedProps extends StepProps {\n   isLastStep?: boolean\n   isCurrentStep?: boolean\n   index?: number\n   hasVisited: boolean | undefined\n   isError?: boolean\n   isLoading?: boolean\n}\n\n// Props which shouldn't be passed to to the Step component from the user\ninterface StepInternalConfig {\n   index: number\n   isCompletedStep?: boolean\n   isCurrentStep?: boolean\n   isLastStep?: boolean\n}\n\ninterface FullStepProps extends StepProps, StepInternalConfig {}\n\nconst Step = React.forwardRef<HTMLLIElement, StepProps>(\n   (props, ref: React.Ref<any>) => {\n      const {\n         children,\n         description,\n         icon,\n         state,\n         checkIcon,\n         errorIcon,\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         isLastStep,\n         isKeepError,\n         label,\n         onClickStep,\n      } = props as FullStepProps\n\n      const { isVertical, isError, isLoading, clickable } = useStepper()\n\n      const hasVisited = isCurrentStep || isCompletedStep\n\n      const sharedProps = {\n         isLastStep,\n         isCompletedStep,\n         isCurrentStep,\n         index,\n         isError,\n         isLoading,\n         clickable,\n         label,\n         description,\n         hasVisited,\n         icon,\n         isKeepError,\n         checkIcon,\n         state,\n         errorIcon,\n         onClickStep,\n      }\n\n      const renderStep = () => {\n         switch (isVertical) {\n            case true:\n               return (\n                  <VerticalStep ref={ref} {...sharedProps}>\n                     {children}\n                  </VerticalStep>\n               )\n            default:\n               return <HorizontalStep ref={ref} {...sharedProps} />\n         }\n      }\n\n      return renderStep()\n   },\n)\n\n// <---------- VERTICAL STEP ---------->\n\ntype VerticalStepProps = StepSharedProps & {\n   children?: React.ReactNode\n}\n\nconst verticalStepVariants = cva(\n   [\n      \"flex flex-col relative transition-all duration-200\",\n      \"data-[completed=true]:[&:not(:last-child)]:after:bg-primary\",\n      \"data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive\",\n   ],\n   {\n      variants: {\n         variant: {\n            circle: cn(\n               \"[&:not(:last-child)]:gap-[var(--step-gap)] [&:not(:last-child)]:pb-[var(--step-gap)]\",\n               \"[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:w-[2px] [&:not(:last-child)]:after:content-['']\",\n               \"[&:not(:last-child)]:after:inset-x-[calc(var(--step-icon-size)/2)]\",\n               \"[&:not(:last-child)]:after:absolute\",\n               \"[&:not(:last-child)]:after:top-[calc(var(--step-icon-size)+var(--step-gap))]\",\n               \"[&:not(:last-child)]:after:bottom-[var(--step-gap)]\",\n               \"[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200\",\n            ),\n            line: \"flex-1 border-t-0 mb-4\",\n         },\n      },\n   },\n)\n\nconst VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(\n   (props, ref) => {\n      const {\n         children,\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         label,\n         description,\n         icon,\n         hasVisited,\n         state,\n         checkIcon: checkIconProp,\n         errorIcon: errorIconProp,\n         onClickStep,\n      } = props\n\n      const {\n         checkIcon: checkIconContext,\n         errorIcon: errorIconContext,\n         isError,\n         isLoading,\n         variant,\n         onClickStep: onClickStepGeneral,\n         clickable,\n         expandVerticalSteps,\n         styles,\n         scrollTracking,\n         orientation,\n         steps,\n         setStep,\n         isLastStep: isLastStepCurrentStep,\n         previousActiveStep,\n      } = useStepper()\n\n      const opacity = hasVisited ? 1 : 0.8\n      const localIsLoading = isLoading || state === \"loading\"\n      const localIsError = isError || state === \"error\"\n\n      const isLastStep = index === steps.length - 1\n\n      const active =\n         variant === \"line\" ? isCompletedStep || isCurrentStep : isCompletedStep\n      const checkIcon = checkIconProp || checkIconContext\n      const errorIcon = errorIconProp || errorIconContext\n\n      const renderChildren = () => {\n         if (!expandVerticalSteps) {\n            return (\n               <Collapsible open={isCurrentStep}>\n                  <CollapsibleContent\n                     ref={(node) => {\n                        if (\n                           // If the step is the first step and the previous step\n                           // was the last step or if the step is not the first step\n                           // This prevents initial scrolling when the stepper\n                           // is located anywhere other than the top of the view.\n                           scrollTracking &&\n                           ((index === 0 &&\n                              previousActiveStep &&\n                              previousActiveStep === steps.length) ||\n                              (index && index > 0))\n                        ) {\n                           node?.scrollIntoView({\n                              behavior: \"smooth\",\n                              block: \"center\",\n                           })\n                        }\n                     }}\n                     className=\"data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden\"\n                  >\n                     {children}\n                  </CollapsibleContent>\n               </Collapsible>\n            )\n         }\n         return children\n      }\n\n      return (\n         <div\n            ref={ref}\n            className={cn(\n               \"stepper__vertical-step\",\n               verticalStepVariants({\n                  variant: variant?.includes(\"circle\") ? \"circle\" : \"line\",\n               }),\n               isLastStepCurrentStep && \"gap-[var(--step-gap)]\",\n               styles?.[\"vertical-step\"],\n            )}\n            data-optional={steps[index || 0]?.optional}\n            data-completed={isCompletedStep}\n            data-active={active}\n            data-clickable={clickable || !!onClickStep}\n            data-invalid={localIsError}\n            onClick={() => {\n               if (onClickStep) onClickStep(index || 0, setStep)\n               else onClickStepGeneral?.(index || 0, setStep)\n            }}\n         >\n            <div\n               data-vertical\n               data-active={active}\n               className={cn(\n                  \"stepper__vertical-step-container\",\n                  \"flex items-center\",\n                  variant === \"line\" &&\n                     \"data-[active=true]:border-primary border-s-[3px] py-2 ps-3\",\n                  styles?.[\"vertical-step-container\"],\n               )}\n            >\n               <StepButtonContainer\n                  {...{\n                     isLoading: localIsLoading,\n                     isError: localIsError,\n                     ...props,\n                  }}\n               >\n                  <StepIcon\n                     {...{\n                        index,\n                        isError: localIsError,\n                        isLoading: localIsLoading,\n                        isCurrentStep,\n                        isCompletedStep,\n                     }}\n                     icon={icon}\n                     checkIcon={checkIcon}\n                     errorIcon={errorIcon}\n                  />\n               </StepButtonContainer>\n               <StepLabel\n                  label={label}\n                  description={description}\n                  {...{ isCurrentStep, opacity }}\n               />\n            </div>\n            <div\n               className={cn(\n                  \"stepper__vertical-step-content\",\n                  !isLastStep && \"min-h-4\",\n                  variant !== \"line\" && \"ps-[--step-icon-size]\",\n                  variant === \"line\" && orientation === \"vertical\" && \"min-h-0\",\n                  styles?.[\"vertical-step-content\"],\n               )}\n            >\n               {renderChildren()}\n            </div>\n         </div>\n      )\n   },\n)\n\n// <---------- HORIZONTAL STEP ---------->\n\nconst HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(\n   (props, ref) => {\n      const {\n         isError,\n         isLoading,\n         onClickStep,\n         variant,\n         clickable,\n         checkIcon: checkIconContext,\n         errorIcon: errorIconContext,\n         styles,\n         steps,\n         setStep,\n      } = useStepper()\n\n      const {\n         index,\n         isCompletedStep,\n         isCurrentStep,\n         hasVisited,\n         icon,\n         label,\n         description,\n         isKeepError,\n         state,\n         checkIcon: checkIconProp,\n         errorIcon: errorIconProp,\n      } = props\n\n      const localIsLoading = isLoading || state === \"loading\"\n      const localIsError = isError || state === \"error\"\n\n      const opacity = hasVisited ? 1 : 0.8\n\n      const active =\n         variant === \"line\" ? isCompletedStep || isCurrentStep : isCompletedStep\n\n      const checkIcon = checkIconProp || checkIconContext\n      const errorIcon = errorIconProp || errorIconContext\n\n      return (\n         <div\n            aria-disabled={!hasVisited}\n            className={cn(\n               \"stepper__horizontal-step\",\n               \"relative flex items-center transition-all duration-200\",\n               \"[&:not(:last-child)]:flex-1\",\n               \"[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200\",\n               \"[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:content-['']\",\n               \"data-[completed=true]:[&:not(:last-child)]:after:bg-primary\",\n               \"data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive\",\n               variant === \"circle-alt\" &&\n                  \"flex-1 flex-col justify-start [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:-order-1 [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]\",\n               variant === \"circle\" &&\n                  \"[&:not(:last-child)]:after:me-[var(--step-gap)] [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:flex-1\",\n               variant === \"line\" &&\n                  \"data-[active=true]:border-primary flex-1 flex-col border-t-[3px]\",\n               styles?.[\"horizontal-step\"],\n            )}\n            data-optional={steps[index || 0]?.optional}\n            data-completed={isCompletedStep}\n            data-active={active}\n            data-invalid={localIsError}\n            data-clickable={clickable}\n            onClick={() => onClickStep?.(index || 0, setStep)}\n            ref={ref}\n         >\n            <div\n               className={cn(\n                  \"stepper__horizontal-step-container\",\n                  \"flex items-center\",\n                  variant === \"circle-alt\" && \"flex-col justify-center gap-1\",\n                  variant === \"line\" && \"w-full\",\n                  styles?.[\"horizontal-step-container\"],\n               )}\n            >\n               <StepButtonContainer\n                  {...{\n                     ...props,\n                     isError: localIsError,\n                     isLoading: localIsLoading,\n                  }}\n               >\n                  <StepIcon\n                     {...{\n                        index,\n                        isCompletedStep,\n                        isCurrentStep,\n                        isError: localIsError,\n                        isKeepError,\n                        isLoading: localIsLoading,\n                     }}\n                     icon={icon}\n                     checkIcon={checkIcon}\n                     errorIcon={errorIcon}\n                  />\n               </StepButtonContainer>\n               <StepLabel\n                  label={label}\n                  description={description}\n                  {...{ isCurrentStep, opacity }}\n               />\n            </div>\n         </div>\n      )\n   },\n)\n\n// <---------- STEP BUTTON CONTAINER ---------->\n\ntype StepButtonContainerProps = StepSharedProps & {\n   children?: React.ReactNode\n}\n\nfunction StepButtonContainer({\n   isCurrentStep,\n   isCompletedStep,\n   children,\n   isError,\n   isLoading: isLoadingProp,\n   onClickStep,\n}: StepButtonContainerProps) {\n   const {\n      clickable,\n      isLoading: isLoadingContext,\n      variant,\n      styles,\n   } = useStepper()\n\n   const currentStepClickable = clickable || !!onClickStep\n\n   const isLoading = isLoadingProp || isLoadingContext\n\n   if (variant === \"line\") return null\n\n   return (\n      <Button\n         variant=\"ghost\"\n         tabIndex={currentStepClickable ? 0 : -1}\n         className={cn(\n            \"stepper__step-button-container\",\n            \"pointer-events-none rounded-full p-0\",\n            \"size-[var(--step-icon-size)]\",\n            \"flex items-center justify-center rounded-full border-2\",\n            \"data-[clickable=true]:pointer-events-auto\",\n            \"data-[active=true]:bg-primary data-[active=true]:border-primary data-[active=true]:text-primary-foreground\",\n            \"data-[current=true]:border-primary data-[current=true]:bg-secondary\",\n            \"data-[invalid=true]:bg-destructive data-[invalid=true]:border-destructive data-[invalid=true]:text-destructive-foreground\",\n            styles?.[\"step-button-container\"],\n         )}\n         aria-current={isCurrentStep ? \"step\" : undefined}\n         data-current={isCurrentStep}\n         data-invalid={isError && (isCurrentStep || isCompletedStep)}\n         data-active={isCompletedStep}\n         data-clickable={currentStepClickable}\n         data-loading={isLoading && (isCurrentStep || isCompletedStep)}\n      >\n         {children}\n      </Button>\n   )\n}\n\n// <---------- STEP ICON ---------->\n\ntype IconType = LucideIcon | React.ComponentType<any> | undefined\n\nconst iconVariants = cva(\"\", {\n   variants: {\n      size: {\n         sm: \"size-4\",\n         md: \"size-4\",\n         lg: \"size-5\",\n      },\n   },\n   defaultVariants: {\n      size: \"md\",\n   },\n})\n\ninterface StepIconProps {\n   isCompletedStep?: boolean\n   isCurrentStep?: boolean\n   isError?: boolean\n   isLoading?: boolean\n   isKeepError?: boolean\n   icon?: IconType\n   index?: number\n   checkIcon?: IconType\n   errorIcon?: IconType\n}\n\nconst StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(\n   (props, ref) => {\n      const { size } = useStepper()\n\n      const {\n         isCompletedStep,\n         isCurrentStep,\n         isError,\n         isLoading,\n         isKeepError,\n         icon: CustomIcon,\n         index,\n         checkIcon: CustomCheckIcon,\n         errorIcon: CustomErrorIcon,\n      } = props\n\n      const Icon = React.useMemo(() => CustomIcon || null, [CustomIcon])\n\n      const ErrorIcon = React.useMemo(\n         () => CustomErrorIcon || null,\n         [CustomErrorIcon],\n      )\n\n      const Check = React.useMemo(\n         () => CustomCheckIcon || CheckIcon,\n         [CustomCheckIcon],\n      )\n\n      return React.useMemo(() => {\n         if (isCompletedStep) {\n            if (isError && isKeepError) {\n               return (\n                  <div key=\"icon\">\n                     <X className={cn(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            return (\n               <div key=\"check-icon\">\n                  <Check className={cn(iconVariants({ size }))} />\n               </div>\n            )\n         }\n         if (isCurrentStep) {\n            if (isError && ErrorIcon) {\n               return (\n                  <div key=\"error-icon\">\n                     <ErrorIcon className={cn(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            if (isError) {\n               return (\n                  <div key=\"icon\">\n                     <X className={cn(iconVariants({ size }))} />\n                  </div>\n               )\n            }\n            if (isLoading) {\n               return (\n                  <Loader2\n                     className={cn(iconVariants({ size }), \"animate-spin\")}\n                  />\n               )\n            }\n         }\n         if (Icon) {\n            return (\n               <div key=\"step-icon\">\n                  <Icon className={cn(iconVariants({ size }))} />\n               </div>\n            )\n         }\n         return (\n            <span\n               ref={ref}\n               key=\"label\"\n               className={cn(\"text-md text-center font-medium\")}\n            >\n               {(index || 0) + 1}\n            </span>\n         )\n      }, [\n         isCompletedStep,\n         isCurrentStep,\n         isError,\n         isLoading,\n         Icon,\n         index,\n         Check,\n         ErrorIcon,\n         isKeepError,\n         ref,\n         size,\n      ])\n   },\n)\n\n// <---------- STEP LABEL ---------->\n\ninterface StepLabelProps {\n   isCurrentStep?: boolean\n   opacity: number\n   label?: string | React.ReactNode\n   description?: string | null\n}\n\nconst labelVariants = cva(\"\", {\n   variants: {\n      size: {\n         sm: \"text-sm\",\n         md: \"text-sm\",\n         lg: \"text-base\",\n      },\n   },\n   defaultVariants: {\n      size: \"md\",\n   },\n})\n\nconst descriptionVariants = cva(\"\", {\n   variants: {\n      size: {\n         sm: \"text-xs\",\n         md: \"text-xs\",\n         lg: \"text-sm\",\n      },\n   },\n   defaultVariants: {\n      size: \"md\",\n   },\n})\n\nfunction StepLabel({\n   isCurrentStep,\n   opacity,\n   label,\n   description,\n}: StepLabelProps) {\n   const { variant, styles, size, orientation } = useStepper()\n   const shouldRender = !!label || !!description\n\n   return shouldRender ? (\n      <div\n         aria-current={isCurrentStep ? \"step\" : undefined}\n         className={cn(\n            \"stepper__step-label-container\",\n            \"flex flex-col\",\n            variant !== \"line\"\n               ? \"ms-2\"\n               : orientation === \"horizontal\" && \"my-2\",\n            variant === \"circle-alt\" && \"text-center\",\n            variant === \"circle-alt\" && orientation === \"horizontal\" && \"ms-0\",\n            variant === \"circle-alt\" &&\n               orientation === \"vertical\" &&\n               \"text-start\",\n            styles?.[\"step-label-container\"],\n         )}\n         style={{\n            opacity,\n         }}\n      >\n         {!!label && (\n            <span\n               className={cn(\n                  \"stepper__step-label\",\n                  labelVariants({ size }),\n                  styles?.[\"step-label\"],\n               )}\n            >\n               {label}\n            </span>\n         )}\n         {!!description && (\n            <span\n               className={cn(\n                  \"stepper__step-description\",\n                  \"text-muted-foreground\",\n                  descriptionVariants({ size }),\n                  styles?.[\"step-description\"],\n               )}\n            >\n               {description}\n            </span>\n         )}\n      </div>\n   ) : null\n}\n\nexport { Stepper, Step, useStepper }\nexport type { StepProps, StepperProps, StepItem }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/switch-demo.json b/apps/web/public/v0/styles/miami/switch-demo.json
new file mode 100644
index 00000000..ec14e915
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/switch-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "switch-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/switch-demo.tsx",
+      "content": "import { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\n\nexport default function SwitchDemo() {\n   return (\n      <div className=\"flex items-center space-x-2\">\n         <Switch id=\"airplane-mode\" />\n         <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/switch-form.json b/apps/web/public/v0/styles/miami/switch-form.json
new file mode 100644
index 00000000..c030bde9
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/switch-form.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "switch-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/switch-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n} from \"@/components/ui/form\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   marketing_emails: z.boolean().default(false).optional(),\n   security_emails: z.boolean(),\n})\n\nexport default function SwitchForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n      defaultValues: {\n         security_emails: true,\n      },\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-full space-y-6\"\n         >\n            <div>\n               <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n               <div className=\"space-y-4\">\n                  <FormField\n                     control={form.control}\n                     name=\"marketing_emails\"\n                     render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                           <div className=\"space-y-0.5\">\n                              <FormLabel>Marketing emails</FormLabel>\n                              <FormDescription>\n                                 Receive emails about new products, features,\n                                 and more.\n                              </FormDescription>\n                           </div>\n                           <FormControl>\n                              <Switch\n                                 checked={field.value}\n                                 onCheckedChange={field.onChange}\n                              />\n                           </FormControl>\n                        </FormItem>\n                     )}\n                  />\n                  <FormField\n                     control={form.control}\n                     name=\"security_emails\"\n                     render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                           <div className=\"space-y-0.5\">\n                              <FormLabel>Security emails</FormLabel>\n                              <FormDescription>\n                                 Receive emails about your account security.\n                              </FormDescription>\n                           </div>\n                           <FormControl>\n                              <Switch\n                                 checked={field.value}\n                                 onCheckedChange={field.onChange}\n                                 disabled\n                                 aria-readonly\n                              />\n                           </FormControl>\n                        </FormItem>\n                     )}\n                  />\n               </div>\n            </div>\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/switch.json b/apps/web/public/v0/styles/miami/switch.json
new file mode 100644
index 00000000..25959b5e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/switch.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "switch",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-switch"
+  ],
+  "files": [
+    {
+      "path": "ui/switch.tsx",
+      "content": "\"use client\"\n\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Switch = React.forwardRef<\n   React.ElementRef<typeof SwitchPrimitives.Root>,\n   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n   <SwitchPrimitives.Root\n      className={cn(\n         \"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n         className,\n      )}\n      {...props}\n      ref={ref}\n   >\n      <SwitchPrimitives.Thumb\n         className={cn(\n            \"bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\",\n         )}\n      />\n   </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/table-demo.json b/apps/web/public/v0/styles/miami/table-demo.json
new file mode 100644
index 00000000..edfd9eae
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/table-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "table-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/table-demo.tsx",
+      "content": "import {\n   Table,\n   TableBody,\n   TableCaption,\n   TableCell,\n   TableFooter,\n   TableHead,\n   TableHeader,\n   TableRow,\n} from \"@/components/ui/table\"\n\nconst invoices = [\n   {\n      invoice: \"INV001\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$250.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV002\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$150.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV003\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$350.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV004\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$450.00\",\n      paymentMethod: \"Credit Card\",\n   },\n   {\n      invoice: \"INV005\",\n      paymentStatus: \"Paid\",\n      totalAmount: \"$550.00\",\n      paymentMethod: \"PayPal\",\n   },\n   {\n      invoice: \"INV006\",\n      paymentStatus: \"Pending\",\n      totalAmount: \"$200.00\",\n      paymentMethod: \"Bank Transfer\",\n   },\n   {\n      invoice: \"INV007\",\n      paymentStatus: \"Unpaid\",\n      totalAmount: \"$300.00\",\n      paymentMethod: \"Credit Card\",\n   },\n]\n\nexport default function TableDemo() {\n   return (\n      <Table>\n         <TableCaption>A list of your recent invoices.</TableCaption>\n         <TableHeader>\n            <TableRow>\n               <TableHead className=\"w-[100px]\">Invoice</TableHead>\n               <TableHead>Status</TableHead>\n               <TableHead>Method</TableHead>\n               <TableHead className=\"text-right\">Amount</TableHead>\n            </TableRow>\n         </TableHeader>\n         <TableBody>\n            {invoices.map((invoice) => (\n               <TableRow key={invoice.invoice}>\n                  <TableCell className=\"font-medium\">\n                     {invoice.invoice}\n                  </TableCell>\n                  <TableCell>{invoice.paymentStatus}</TableCell>\n                  <TableCell>{invoice.paymentMethod}</TableCell>\n                  <TableCell className=\"text-right\">\n                     {invoice.totalAmount}\n                  </TableCell>\n               </TableRow>\n            ))}\n         </TableBody>\n         <TableFooter>\n            <TableRow>\n               <TableCell colSpan={3}>Total</TableCell>\n               <TableCell className=\"text-right\">$2,500.00</TableCell>\n            </TableRow>\n         </TableFooter>\n      </Table>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/table.json b/apps/web/public/v0/styles/miami/table.json
new file mode 100644
index 00000000..f604c88e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/table.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "table",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/table.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n   HTMLTableElement,\n   React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n   <div className=\"relative w-full overflow-auto\">\n      <table\n         ref={ref}\n         className={cn(\"w-full caption-bottom text-sm\", className)}\n         {...props}\n      />\n   </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <tbody\n      ref={ref}\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n   />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n   HTMLTableSectionElement,\n   React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n   <tfoot\n      ref={ref}\n      className={cn(\n         \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n   HTMLTableRowElement,\n   React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n   <tr\n      ref={ref}\n      className={cn(\n         \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n   HTMLTableCellElement,\n   React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n   <th\n      ref={ref}\n      className={cn(\n         \"text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n   HTMLTableCellElement,\n   React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n   <td\n      ref={ref}\n      className={cn(\n         \"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n   HTMLTableCaptionElement,\n   React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n   <caption\n      ref={ref}\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n   />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n   Table,\n   TableHeader,\n   TableBody,\n   TableFooter,\n   TableHead,\n   TableRow,\n   TableCell,\n   TableCaption,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tabs-demo.json b/apps/web/public/v0/styles/miami/tabs-demo.json
new file mode 100644
index 00000000..3cc0d9ae
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tabs-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tabs-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tabs-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n   Tabs,\n   TabsContent,\n   TabsList,\n   TabsTrigger,\n} from \"@/components/ui/tabs\"\n\nexport default function TabsDemo() {\n   return (\n      <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n         <TabsList className=\"grid w-full grid-cols-2\">\n            <TabsTrigger value=\"account\">Account</TabsTrigger>\n            <TabsTrigger value=\"password\">Password</TabsTrigger>\n         </TabsList>\n         <TabsContent value=\"account\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Account</CardTitle>\n                  <CardDescription>\n                     Make changes to your account here. Click save when you're\n                     done.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"name\">Name</Label>\n                     <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"username\">Username</Label>\n                     <Input id=\"username\" defaultValue=\"~peduarte\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save changes</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n         <TabsContent value=\"password\">\n            <Card>\n               <CardHeader>\n                  <CardTitle>Password</CardTitle>\n                  <CardDescription>\n                     Change your password here. After saving, you'll be logged\n                     out.\n                  </CardDescription>\n               </CardHeader>\n               <CardContent className=\"space-y-2\">\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"current\">Current password</Label>\n                     <Input id=\"current\" type=\"password\" />\n                  </div>\n                  <div className=\"space-y-1\">\n                     <Label htmlFor=\"new\">New password</Label>\n                     <Input id=\"new\" type=\"password\" />\n                  </div>\n               </CardContent>\n               <CardFooter>\n                  <Button>Save password</Button>\n               </CardFooter>\n            </Card>\n         </TabsContent>\n      </Tabs>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tabs.json b/apps/web/public/v0/styles/miami/tabs.json
new file mode 100644
index 00000000..7f86500c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tabs.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tabs",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-tabs"
+  ],
+  "files": [
+    {
+      "path": "ui/tabs.tsx",
+      "content": "\"use client\"\n\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.List>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n         \"bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1\",\n         className,\n      )}\n      {...props}\n   />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.Trigger>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n         \"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow\",\n         className,\n      )}\n      {...props}\n   />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n   React.ElementRef<typeof TabsPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n   <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n         \"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n         className,\n      )}\n      {...props}\n   />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/terminal-demo.json b/apps/web/public/v0/styles/miami/terminal-demo.json
new file mode 100644
index 00000000..f6bad101
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/terminal-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "terminal-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/terminal-demo.tsx",
+      "content": "import {\n   AnimatedSpan,\n   Terminal,\n   TypingAnimation,\n} from \"@/components/ui/terminal\"\n\nexport default function TerminalDemo() {\n   return (\n      <Terminal>\n         <TypingAnimation>&gt; pnpm dlx nyxb@latest init</TypingAnimation>\n\n         <AnimatedSpan delay={1500} className=\"text-green-500\">\n            <span>✔ Preflight checks.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={2000} className=\"text-green-500\">\n            <span>✔ Verifying framework. Found Next.js.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={2500} className=\"text-green-500\">\n            <span>✔ Validating Tailwind CSS.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={3000} className=\"text-green-500\">\n            <span>✔ Validating import alias.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={3500} className=\"text-green-500\">\n            <span>✔ Writing components.json.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={4000} className=\"text-green-500\">\n            <span>✔ Checking registry.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={4500} className=\"text-green-500\">\n            <span>✔ Updating tailwind.config.ts</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={5000} className=\"text-green-500\">\n            <span>✔ Updating app/globals.css</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={5500} className=\"text-green-500\">\n            <span>✔ Installing dependencies.</span>\n         </AnimatedSpan>\n\n         <AnimatedSpan delay={6000} className=\"text-blue-500\">\n            <span>ℹ Updated 1 file:</span>\n            <span className=\"pl-2\">- lib/utils.ts</span>\n         </AnimatedSpan>\n\n         <TypingAnimation delay={6500} className=\"text-muted-foreground\">\n            Success! Project initialization completed.\n         </TypingAnimation>\n\n         <TypingAnimation delay={7000} className=\"text-muted-foreground\">\n            You may now add components.\n         </TypingAnimation>\n      </Terminal>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/terminal.json b/apps/web/public/v0/styles/miami/terminal.json
new file mode 100644
index 00000000..f7ac52a5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/terminal.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "terminal",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/terminal.tsx",
+      "content": "\"use client\"\n\nimport { type MotionProps, motion } from \"motion/react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface AnimatedSpanProps extends MotionProps {\n   children: React.ReactNode\n   delay?: number\n   className?: string\n}\n\nexport const AnimatedSpan = ({\n   children,\n   delay = 0,\n   className,\n   ...props\n}: AnimatedSpanProps) => (\n   <motion.div\n      initial={{ opacity: 0, y: -5 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.3, delay: delay / 1000 }}\n      className={cn(\"grid text-sm font-normal tracking-tight\", className)}\n      {...props}\n   >\n      {children}\n   </motion.div>\n)\n\ninterface TypingAnimationProps extends MotionProps {\n   children: string\n   className?: string\n   duration?: number\n   delay?: number\n   as?: React.ElementType\n}\n\nexport const TypingAnimation = ({\n   children,\n   className,\n   duration = 60,\n   delay = 0,\n   as: Component = \"span\",\n   ...props\n}: TypingAnimationProps) => {\n   if (typeof children !== \"string\") {\n      throw new Error(\"TypingAnimation: children must be a string. Received:\")\n   }\n\n   const MotionComponent = motion.create(Component, {\n      forwardMotionProps: true,\n   })\n\n   const [displayedText, setDisplayedText] = useState<string>(\"\")\n   const [started, setStarted] = useState(false)\n   const elementRef = useRef<HTMLElement | null>(null)\n\n   useEffect(() => {\n      const startTimeout = setTimeout(() => {\n         setStarted(true)\n      }, delay)\n      return () => clearTimeout(startTimeout)\n   }, [delay])\n\n   useEffect(() => {\n      if (!started) return\n\n      let i = 0\n      const typingEffect = setInterval(() => {\n         if (i < children.length) {\n            setDisplayedText(children.substring(0, i + 1))\n            i++\n         } else {\n            clearInterval(typingEffect)\n         }\n      }, duration)\n\n      return () => {\n         clearInterval(typingEffect)\n      }\n   }, [children, duration, started])\n\n   return (\n      <MotionComponent\n         ref={elementRef}\n         className={cn(\"text-sm font-normal tracking-tight\", className)}\n         {...props}\n      >\n         {displayedText}\n      </MotionComponent>\n   )\n}\n\ninterface TerminalProps {\n   children: React.ReactNode\n   className?: string\n}\n\nexport const Terminal = ({ children, className }: TerminalProps) => {\n   return (\n      <div\n         className={cn(\n            \"z-0 h-full max-h-[400px] w-full max-w-lg rounded-xl border border-border bg-background\",\n            className,\n         )}\n      >\n         <div className=\"flex flex-col gap-y-2 border-b border-border p-4\">\n            <div className=\"flex flex-row gap-x-2\">\n               <div className=\"h-2 w-2 rounded-full bg-red-500\"></div>\n               <div className=\"h-2 w-2 rounded-full bg-yellow-500\"></div>\n               <div className=\"h-2 w-2 rounded-full bg-green-500\"></div>\n            </div>\n         </div>\n         <pre className=\"p-4\">\n            <code className=\"grid gap-y-1 overflow-auto\">{children}</code>\n         </pre>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/text-animate-demo-2.json b/apps/web/public/v0/styles/miami/text-animate-demo-2.json
new file mode 100644
index 00000000..bc02ff8e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/text-animate-demo-2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-2.tsx",
+      "content": "import { TextAnimate } from \"@/components/ui/text-animate\"\n\nexport default function TextAnimateDemo2() {\n   return (\n      <TextAnimate animation=\"blurIn\" as=\"h1\">\n         Blur in text\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/text-animate-demo-3.json b/apps/web/public/v0/styles/miami/text-animate-demo-3.json
new file mode 100644
index 00000000..2a610f4d
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/text-animate-demo-3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-3",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-3.tsx",
+      "content": "import { TextAnimate } from \"@/components/ui/text-animate\"\n\nexport default function TextAnimateDemo3() {\n   return (\n      <TextAnimate animation=\"slideUp\" by=\"word\">\n         Slide up by word\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/text-animate-demo-4.json b/apps/web/public/v0/styles/miami/text-animate-demo-4.json
new file mode 100644
index 00000000..0acf5bdb
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/text-animate-demo-4.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-4",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-4.tsx",
+      "content": "import { TextAnimate } from \"@/components/ui/text-animate\"\n\nexport default function TextAnimateDemo4() {\n   return (\n      <TextAnimate animation=\"scaleUp\" by=\"text\">\n         Scale up by text\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/text-animate-demo-5.json b/apps/web/public/v0/styles/miami/text-animate-demo-5.json
new file mode 100644
index 00000000..b5a9e15b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/text-animate-demo-5.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-5",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-5.tsx",
+      "content": "import { TextAnimate } from \"@/components/ui/text-animate\"\n\nexport default function TextAnimateDemo5() {\n   return (\n      <TextAnimate animation=\"fadeIn\" by=\"line\" as=\"p\">\n         {`Fade in by line as paragraph\\n\\nFade in by line as paragraph\\n\\nFade in by line as paragraph`}\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/text-animate-demo-6.json b/apps/web/public/v0/styles/miami/text-animate-demo-6.json
new file mode 100644
index 00000000..42234590
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/text-animate-demo-6.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo-6",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo-6.tsx",
+      "content": "import { TextAnimate } from \"@/components/ui/text-animate\"\n\nexport default function TextAnimateDemo6() {\n   return (\n      <TextAnimate animation=\"slideLeft\" by=\"character\">\n         Slide left by character\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/text-animate-demo.json b/apps/web/public/v0/styles/miami/text-animate-demo.json
new file mode 100644
index 00000000..e9f39065
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/text-animate-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-animate-demo.tsx",
+      "content": "import { TextAnimate } from \"@/components/ui/text-animate\"\n\nexport default function TextAnimateDemo() {\n   return (\n      <TextAnimate animation=\"blurInUp\" by=\"character\">\n         Blur in by character\n      </TextAnimate>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/text-animate.json b/apps/web/public/v0/styles/miami/text-animate.json
new file mode 100644
index 00000000..452646c1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/text-animate.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-animate",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/text-animate.tsx",
+      "content": "\"use client\"\n\nimport {\n   AnimatePresence,\n   type MotionProps,\n   type Variants,\n   motion,\n} from \"motion/react\"\nimport type { ElementType } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype AnimationType = \"text\" | \"word\" | \"character\" | \"line\"\ntype AnimationVariant =\n   | \"fadeIn\"\n   | \"blurIn\"\n   | \"blurInUp\"\n   | \"blurInDown\"\n   | \"slideUp\"\n   | \"slideDown\"\n   | \"slideLeft\"\n   | \"slideRight\"\n   | \"scaleUp\"\n   | \"scaleDown\"\n\ninterface TextAnimateProps extends MotionProps {\n   /**\n    * The text content to animate\n    */\n   children: string\n   /**\n    * The class name to be applied to the component\n    */\n   className?: string\n   /**\n    * The class name to be applied to each segment\n    */\n   segmentClassName?: string\n   /**\n    * The delay before the animation starts\n    */\n   delay?: number\n   /**\n    * The duration of the animation\n    */\n   duration?: number\n   /**\n    * Custom motion variants for the animation\n    */\n   variants?: Variants\n   /**\n    * The element type to render\n    */\n   as?: ElementType\n   /**\n    * How to split the text (\"text\", \"word\", \"character\")\n    */\n   by?: AnimationType\n   /**\n    * Whether to start animation when component enters viewport\n    */\n   startOnView?: boolean\n   /**\n    * Whether to animate only once\n    */\n   once?: boolean\n   /**\n    * The animation preset to use\n    */\n   animation?: AnimationVariant\n}\n\nconst staggerTimings: Record<AnimationType, number> = {\n   text: 0.06,\n   word: 0.05,\n   character: 0.03,\n   line: 0.06,\n}\n\nconst defaultContainerVariants = {\n   hidden: { opacity: 1 },\n   show: {\n      opacity: 1,\n      transition: {\n         staggerChildren: 0.05,\n      },\n   },\n   exit: {\n      opacity: 0,\n      transition: {\n         staggerChildren: 0.05,\n         staggerDirection: -1,\n      },\n   },\n}\n\nconst defaultItemVariants: Variants = {\n   hidden: { opacity: 0 },\n   show: {\n      opacity: 1,\n   },\n   exit: {\n      opacity: 0,\n   },\n}\n\nconst defaultItemAnimationVariants: Record<\n   AnimationVariant,\n   { container: Variants; item: Variants }\n> = {\n   fadeIn: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, y: 20 },\n         show: (delay: number) => ({\n            opacity: 1,\n            y: 0,\n            transition: {\n               delay,\n               duration: 0.3,\n            },\n         }),\n         exit: {\n            opacity: 0,\n            y: 20,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   blurIn: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, filter: \"blur(10px)\" },\n         show: (i: number) => ({\n            opacity: 1,\n            filter: \"blur(0px)\",\n            transition: {\n               delay: i * 0.1,\n               duration: 0.3,\n            },\n         }),\n         exit: {\n            opacity: 0,\n            filter: \"blur(10px)\",\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   blurInUp: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, filter: \"blur(10px)\", y: 20 },\n         show: (delay: number) => ({\n            opacity: 1,\n            filter: \"blur(0px)\",\n            y: 0,\n            transition: {\n               y: { duration: 0.3 },\n               opacity: { duration: 0.4 },\n               filter: { duration: 0.3 },\n            },\n         }),\n         exit: {\n            opacity: 0,\n            filter: \"blur(10px)\",\n            y: 20,\n            transition: {\n               y: { duration: 0.3 },\n               opacity: { duration: 0.4 },\n               filter: { duration: 0.3 },\n            },\n         },\n      },\n   },\n   blurInDown: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { opacity: 0, filter: \"blur(10px)\", y: -20 },\n         show: (delay: number) => ({\n            opacity: 1,\n            filter: \"blur(0px)\",\n            y: 0,\n            transition: {\n               y: { duration: 0.3 },\n               opacity: { duration: 0.4 },\n               filter: { duration: 0.3 },\n            },\n         }),\n      },\n   },\n   slideUp: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { y: 20, opacity: 0 },\n         show: (delay: number) => ({\n            y: 0,\n            opacity: 1,\n            transition: {\n               delay,\n               duration: 0.3,\n            },\n         }),\n         exit: {\n            y: -20,\n            opacity: 0,\n            transition: {\n               duration: 0.3,\n            },\n         },\n      },\n   },\n   slideDown: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { y: -20, opacity: 0 },\n         show: {\n            y: 0,\n            opacity: 1,\n            transition: { duration: 0.3 },\n         },\n         exit: {\n            y: 20,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   slideLeft: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { x: 20, opacity: 0 },\n         show: {\n            x: 0,\n            opacity: 1,\n            transition: { duration: 0.3 },\n         },\n         exit: {\n            x: -20,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   slideRight: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { x: -20, opacity: 0 },\n         show: {\n            x: 0,\n            opacity: 1,\n            transition: { duration: 0.3 },\n         },\n         exit: {\n            x: 20,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   scaleUp: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { scale: 0.5, opacity: 0 },\n         show: {\n            scale: 1,\n            opacity: 1,\n            transition: {\n               duration: 0.3,\n               scale: {\n                  type: \"spring\",\n                  damping: 15,\n                  stiffness: 300,\n               },\n            },\n         },\n         exit: {\n            scale: 0.5,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n   scaleDown: {\n      container: defaultContainerVariants,\n      item: {\n         hidden: { scale: 1.5, opacity: 0 },\n         show: (delay: number) => ({\n            scale: 1,\n            opacity: 1,\n            transition: {\n               delay,\n               duration: 0.3,\n               scale: {\n                  type: \"spring\",\n                  damping: 15,\n                  stiffness: 300,\n               },\n            },\n         }),\n         exit: {\n            scale: 1.5,\n            opacity: 0,\n            transition: { duration: 0.3 },\n         },\n      },\n   },\n}\n\nexport function TextAnimate({\n   children,\n   delay = 0,\n   duration = 0.3,\n   variants,\n   className,\n   segmentClassName,\n   as: Component = \"p\",\n   startOnView = true,\n   once = false,\n   by = \"word\",\n   animation = \"fadeIn\",\n   ...props\n}: TextAnimateProps) {\n   const MotionComponent = motion.create(Component)\n\n   // Use provided variants or default variants based on animation type\n   const finalVariants = animation\n      ? {\n           container: {\n              ...defaultItemAnimationVariants[animation].container,\n              show: {\n                 ...defaultItemAnimationVariants[animation].container.show,\n                 transition: {\n                    staggerChildren: staggerTimings[by],\n                 },\n              },\n              exit: {\n                 ...defaultItemAnimationVariants[animation].container.exit,\n                 transition: {\n                    staggerChildren: staggerTimings[by],\n                    staggerDirection: -1,\n                 },\n              },\n           },\n           item: defaultItemAnimationVariants[animation].item,\n        }\n      : { container: defaultContainerVariants, item: defaultItemVariants }\n\n   let segments: string[] = []\n   switch (by) {\n      case \"word\":\n         segments = children.split(/(\\s+)/)\n         break\n      case \"character\":\n         segments = children.split(\"\")\n         break\n      case \"line\":\n         segments = children.split(\"\\n\")\n         break\n      case \"text\":\n      default:\n         segments = [children]\n         break\n   }\n\n   return (\n      <AnimatePresence mode=\"popLayout\">\n         <MotionComponent\n            variants={finalVariants.container}\n            initial=\"hidden\"\n            whileInView={startOnView ? \"show\" : undefined}\n            animate={startOnView ? undefined : \"show\"}\n            exit=\"exit\"\n            className={cn(\"whitespace-pre-wrap\", className)}\n            {...props}\n         >\n            {segments.map((segment, i) => (\n               <motion.span\n                  key={`${by}-${segment}-${i}`}\n                  variants={finalVariants.item}\n                  custom={i * staggerTimings[by]}\n                  className={cn(\n                     by === \"line\" ? \"block\" : \"inline-block whitespace-pre\",\n                     segmentClassName,\n                  )}\n               >\n                  {segment}\n               </motion.span>\n            ))}\n         </MotionComponent>\n      </AnimatePresence>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/text-reveal-demo.json b/apps/web/public/v0/styles/miami/text-reveal-demo.json
new file mode 100644
index 00000000..8dd5b932
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/text-reveal-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-reveal-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/text-reveal-demo.tsx",
+      "content": "import TextReveal from \"@/components/ui/text-reveal\"\n\nexport default async function TextRevealDemo() {\n   return (\n      <div className=\"z-10 flex min-h-64 items-center justify-center rounded-lg border bg-white dark:bg-black\">\n         <TextReveal text=\"Nyxb UI will change the way you design.\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/text-reveal.json b/apps/web/public/v0/styles/miami/text-reveal.json
new file mode 100644
index 00000000..af95ca6f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/text-reveal.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "text-reveal",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/text-reveal.tsx",
+      "content": "\"use client\"\n\nimport { motion, useScroll, useTransform } from \"framer-motion\"\nimport type { FC, ReactNode } from \"react\"\nimport { useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TextRevealByWordProps {\n   text: string\n   className?: string\n}\n\nexport const TextRevealByWord: FC<TextRevealByWordProps> = ({\n   text,\n   className,\n}) => {\n   const targetRef = useRef<HTMLDivElement | null>(null)\n\n   const { scrollYProgress } = useScroll({\n      target: targetRef,\n   })\n   const words = text.split(\" \")\n\n   return (\n      <div ref={targetRef} className={cn(\"relative z-0 h-[200vh]\", className)}>\n         <div className=\"sticky top-0 mx-auto flex h-1/2 max-w-4xl items-center bg-transparent px-4 py-20\">\n            <p\n               ref={targetRef}\n               className=\"flex flex-wrap p-5 text-2xl font-bold text-black/20 md:p-8 md:text-3xl lg:p-10 lg:text-4xl xl:text-5xl dark:text-white/20\"\n            >\n               {words.map((word, i) => {\n                  const start = i / words.length\n                  const end = start + 1 / words.length\n                  return (\n                     <Word\n                        key={i}\n                        progress={scrollYProgress}\n                        range={[start, end]}\n                     >\n                        {word}\n                     </Word>\n                  )\n               })}\n            </p>\n         </div>\n      </div>\n   )\n}\n\ninterface WordProps {\n   children: ReactNode\n   progress: any\n   range: [number, number]\n}\n\nconst Word: FC<WordProps> = ({ children, progress, range }) => {\n   const opacity = useTransform(progress, range, [0, 1])\n   return (\n      <span className=\"xl:lg-3 relative mx-1 lg:mx-2.5\">\n         <span className=\"absolute opacity-30\">{children}</span>\n         <motion.span\n            style={{ opacity }}\n            className=\"text-black dark:text-white\"\n         >\n            {children}\n         </motion.span>\n      </span>\n   )\n}\n\nexport default TextRevealByWord\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/textarea-demo.json b/apps/web/public/v0/styles/miami/textarea-demo.json
new file mode 100644
index 00000000..9f903f07
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/textarea-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/components/ui/textarea\"\n\nexport default function TextareaDemo() {\n   return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/textarea-disabled.json b/apps/web/public/v0/styles/miami/textarea-disabled.json
new file mode 100644
index 00000000..1e548255
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/textarea-disabled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/textarea-disabled.tsx",
+      "content": "import { Textarea } from \"@/components/ui/textarea\"\n\nexport default function TextareaDisabled() {\n   return <Textarea placeholder=\"Type your message here.\" disabled />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/textarea-form.json b/apps/web/public/v0/styles/miami/textarea-form.json
new file mode 100644
index 00000000..73dab5f2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/textarea-form.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea-form",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/textarea-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Form,\n   FormControl,\n   FormDescription,\n   FormField,\n   FormItem,\n   FormLabel,\n   FormMessage,\n} from \"@/components/ui/form\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { toast } from \"@/components/ui/use-toast\"\n\nconst FormSchema = z.object({\n   bio: z\n      .string()\n      .min(10, {\n         message: \"Bio must be at least 10 characters.\",\n      })\n      .max(160, {\n         message: \"Bio must not be longer than 30 characters.\",\n      }),\n})\n\nexport default function TextareaForm() {\n   const form = useForm<z.infer<typeof FormSchema>>({\n      resolver: zodResolver(FormSchema),\n   })\n\n   function onSubmit(data: z.infer<typeof FormSchema>) {\n      toast({\n         title: \"You submitted the following values:\",\n         description: (\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n               <code className=\"text-white\">\n                  {JSON.stringify(data, null, 2)}\n               </code>\n            </pre>\n         ),\n      })\n   }\n\n   return (\n      <Form {...form}>\n         <form\n            onSubmit={form.handleSubmit(onSubmit)}\n            className=\"w-2/3 space-y-6\"\n         >\n            <FormField\n               control={form.control}\n               name=\"bio\"\n               render={({ field }) => (\n                  <FormItem>\n                     <FormLabel>Bio</FormLabel>\n                     <FormControl>\n                        <Textarea\n                           placeholder=\"Tell us a little bit about yourself\"\n                           className=\"resize-none\"\n                           {...field}\n                        />\n                     </FormControl>\n                     <FormDescription>\n                        You can <span>@mention</span> other users and\n                        organizations.\n                     </FormDescription>\n                     <FormMessage />\n                  </FormItem>\n               )}\n            />\n            <Button type=\"submit\">Submit</Button>\n         </form>\n      </Form>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/textarea-with-button.json b/apps/web/public/v0/styles/miami/textarea-with-button.json
new file mode 100644
index 00000000..e2eb76f2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/textarea-with-button.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea-with-button",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/textarea-with-button.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport default function TextareaWithButton() {\n   return (\n      <div className=\"grid w-full gap-2\">\n         <Textarea placeholder=\"Type your message here.\" />\n         <Button>Send message</Button>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/textarea-with-label.json b/apps/web/public/v0/styles/miami/textarea-with-label.json
new file mode 100644
index 00000000..6f08f518
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/textarea-with-label.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea-with-label",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/textarea-with-label.tsx",
+      "content": "import { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport default function TextareaWithLabel() {\n   return (\n      <div className=\"grid w-full gap-1.5\">\n         <Label htmlFor=\"message\">Your message</Label>\n         <Textarea placeholder=\"Type your message here.\" id=\"message\" />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/textarea-with-text.json b/apps/web/public/v0/styles/miami/textarea-with-text.json
new file mode 100644
index 00000000..8cdc7f04
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/textarea-with-text.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea-with-text",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/textarea-with-text.tsx",
+      "content": "import { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport default function TextareaWithText() {\n   return (\n      <div className=\"grid w-full gap-1.5\">\n         <Label htmlFor=\"message-2\">Your Message</Label>\n         <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n         <p className=\"text-muted-foreground text-sm\">\n            Your message will be copied to the support team.\n         </p>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/textarea.json b/apps/web/public/v0/styles/miami/textarea.json
new file mode 100644
index 00000000..159f9163
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/textarea.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "textarea",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/textarea.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n   ({ className, ...props }, ref) => {\n      return (\n         <textarea\n            className={cn(\n               \"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/theme-daylight.json b/apps/web/public/v0/styles/miami/theme-daylight.json
new file mode 100644
index 00000000..ed53ff99
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/theme-daylight.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "theme-daylight",
+  "type": "registry:theme",
+  "author": "nyxb (https://nyxbui.design)",
+  "cssVars": {
+    "light": {
+      "background": "36 39% 88%",
+      "foreground": "36 45% 15%",
+      "primary": "36 45% 70%",
+      "primary-foreground": "36 45% 11%",
+      "secondary": "40 35% 77%",
+      "secondary-foreground": "36 45% 25%",
+      "accent": "36 64% 57%",
+      "accent-foreground": "36 72% 17%",
+      "destructive": "0 84% 37%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "36 33% 75%",
+      "muted-foreground": "36 45% 25%",
+      "card": "36 46% 82%",
+      "card-foreground": "36 45% 20%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "border": "36 45% 60%",
+      "input": "36 45% 60%",
+      "ring": "36 45% 30%",
+      "chart-1": "25 34% 28%",
+      "chart-2": "26 36% 34%",
+      "chart-3": "28 40% 40%",
+      "chart-4": "31 41% 48%",
+      "chart-5": "35 43% 53%"
+    },
+    "dark": {
+      "background": "36 39% 88%",
+      "foreground": "36 45% 15%",
+      "primary": "36 45% 70%",
+      "primary-foreground": "36 45% 11%",
+      "secondary": "40 35% 77%",
+      "secondary-foreground": "36 45% 25%",
+      "accent": "36 64% 57%",
+      "accent-foreground": "36 72% 17%",
+      "destructive": "0 84% 37%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "36 33% 75%",
+      "muted-foreground": "36 45% 25%",
+      "card": "36 46% 82%",
+      "card-foreground": "36 45% 20%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "border": "36 45% 60%",
+      "input": "36 45% 60%",
+      "ring": "36 45% 30%",
+      "chart-1": "25 34% 28%",
+      "chart-2": "26 36% 34%",
+      "chart-3": "28 40% 40%",
+      "chart-4": "31 41% 48%",
+      "chart-5": "35 43% 53%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/theme-emerald.json b/apps/web/public/v0/styles/miami/theme-emerald.json
new file mode 100644
index 00000000..19fab7be
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/theme-emerald.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "theme-emerald",
+  "type": "registry:theme",
+  "author": "nyxb (https://nyxbui.design)",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "142 86% 28%",
+      "primary-foreground": "356 29% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 45%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 72% 51%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "142 86% 28%",
+      "chart-1": "139 65% 20%",
+      "chart-2": "140 74% 44%",
+      "chart-3": "142 88% 28%",
+      "chart-4": "137 55% 15%",
+      "chart-5": "141 40% 9%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "142 86% 28%",
+      "primary-foreground": "356 29% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 72% 51%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "142 86% 28%",
+      "chart-1": "142 88% 28%",
+      "chart-2": "139 65% 20%",
+      "chart-3": "140 74% 24%",
+      "chart-4": "137 55% 15%",
+      "chart-5": "141 40% 9%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/theme-midnight.json b/apps/web/public/v0/styles/miami/theme-midnight.json
new file mode 100644
index 00000000..36638300
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/theme-midnight.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "theme-midnight",
+  "type": "registry:theme",
+  "author": "nyxb (https://nyxbui.design)",
+  "cssVars": {
+    "light": {
+      "background": "240 5% 6%",
+      "foreground": "60 5% 90%",
+      "primary": "240 0% 90%",
+      "primary-foreground": "60 0% 0%",
+      "secondary": "240 4% 15%",
+      "secondary-foreground": "60 5% 85%",
+      "accent": "240 0% 13%",
+      "accent-foreground": "60 0% 100%",
+      "destructive": "0 60% 50%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "240 5% 25%",
+      "muted-foreground": "60 5% 85%",
+      "card": "240 4% 10%",
+      "card-foreground": "60 5% 90%",
+      "popover": "240 5% 15%",
+      "popover-foreground": "60 5% 85%",
+      "border": "240 6% 20%",
+      "input": "240 6% 20%",
+      "ring": "240 5% 90%",
+      "chart-1": "359 2% 90%",
+      "chart-2": "240 1% 74%",
+      "chart-3": "240 1% 58%",
+      "chart-4": "240 1% 42%",
+      "chart-5": "240 2% 26%"
+    },
+    "dark": {
+      "background": "240 5% 6%",
+      "foreground": "60 5% 90%",
+      "primary": "240 0% 90%",
+      "primary-foreground": "60 0% 0%",
+      "secondary": "240 4% 15%",
+      "secondary-foreground": "60 5% 85%",
+      "accent": "240 0% 13%",
+      "accent-foreground": "60 0% 100%",
+      "destructive": "0 60% 50%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "240 5% 25%",
+      "muted-foreground": "60 5% 85%",
+      "card": "240 4% 10%",
+      "card-foreground": "60 5% 90%",
+      "popover": "240 5% 15%",
+      "popover-foreground": "60 5% 85%",
+      "border": "240 6% 20%",
+      "input": "240 6% 20%",
+      "ring": "240 5% 90%",
+      "chart-1": "359 2% 90%",
+      "chart-2": "240 1% 74%",
+      "chart-3": "240 1% 58%",
+      "chart-4": "240 1% 42%",
+      "chart-5": "240 2% 26%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/timeline-alternate.json b/apps/web/public/v0/styles/miami/timeline-alternate.json
new file mode 100644
index 00000000..f8057736
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/timeline-alternate.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "timeline-alternate",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "timeline"
+  ],
+  "files": [
+    {
+      "path": "examples/timeline-alternate.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"@/components/ui/timeline\"\n\nexport default function TimelineAlternate() {\n   return (\n      <Timeline positions=\"center\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading>Done!</TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/timeline-demo.json b/apps/web/public/v0/styles/miami/timeline-demo.json
new file mode 100644
index 00000000..271fa30f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/timeline-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "timeline-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "timeline"
+  ],
+  "files": [
+    {
+      "path": "examples/timeline-demo.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"@/components/ui/timeline\"\n\nexport default function TimelineDemo() {\n   return (\n      <Timeline>\n         <TimelineItem status=\"done\">\n            <TimelineHeading>Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading>Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent>\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Done!</TimelineHeading>\n            <TimelineDot />\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/timeline-labels.json b/apps/web/public/v0/styles/miami/timeline-labels.json
new file mode 100644
index 00000000..a9e7432a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/timeline-labels.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "timeline-labels",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "timeline"
+  ],
+  "files": [
+    {
+      "path": "examples/timeline-labels.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"@/components/ui/timeline\"\n\nexport default function TimelineAlternate() {\n   return (\n      <Timeline positions=\"center\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Done (05/04/2024)\n            </TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"right\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Failed (05/04/2024)\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent>\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Current step\n            </TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading>Test</TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Next step\n            </TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent>\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineHeading side=\"right\" variant=\"secondary\">\n               Deadline (05/10/2024)\n            </TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading>Done!</TimelineHeading>\n            <TimelineHeading side=\"left\" variant=\"secondary\">\n               Here everything ends\n            </TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/timeline-right.json b/apps/web/public/v0/styles/miami/timeline-right.json
new file mode 100644
index 00000000..c247edd1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/timeline-right.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "timeline-right",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "timeline"
+  ],
+  "files": [
+    {
+      "path": "examples/timeline-right.tsx",
+      "content": "import React from \"react\"\n\nimport {\n   Timeline,\n   TimelineContent,\n   TimelineDot,\n   TimelineHeading,\n   TimelineItem,\n   TimelineLine,\n} from \"@/components/ui/timeline\"\n\nexport default function TimelineRight() {\n   return (\n      <Timeline positions=\"right\">\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Plan!</TimelineHeading>\n            <TimelineDot status=\"done\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Before diving into coding, it is crucial to plan your software\n               project thoroughly. This involves defining the project scope,\n               setting clear objectives, and identifying the target audience.\n               Additionally, creating a timeline and allocating resources\n               appropriately will contribute to a successful development\n               process.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\" className=\"text-destructive\">\n               Design\n            </TimelineHeading>\n            <TimelineDot status=\"error\" />\n            <TimelineLine done />\n            <TimelineContent side=\"left\">\n               Designing your software involves creating a blueprint that\n               outlines the structure, user interface, and functionality of your\n               application. Consider user experience (UX) principles,\n               wireframing, and prototyping to ensure an intuitive and visually\n               appealing design.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem status=\"done\">\n            <TimelineHeading side=\"left\">Code</TimelineHeading>\n            <TimelineDot status=\"current\" />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               The coding phase involves translating your design into actual\n               code. Choose a programming language and framework that aligns\n               with your project requirements. Follow best practices, such as\n               modular and reusable code, to enhance maintainability and\n               scalability. Regularly test your code to identify and fix any\n               bugs or errors.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Test</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Thorough testing is essential to ensure the quality and\n               reliability of your software. Implement different testing\n               methodologies, including unit testing, integration testing, and\n               user acceptance testing. This helps identify and rectify any\n               issues before deploying the software.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineHeading side=\"left\">Deploy</TimelineHeading>\n            <TimelineDot />\n            <TimelineLine />\n            <TimelineContent side=\"left\">\n               Once your software has passed rigorous testing, it's time to\n               deploy it. Consider the deployment environment, whether it's\n               on-premises or in the cloud. Ensure proper documentation and\n               provide clear instructions for installation and configuration.\n            </TimelineContent>\n         </TimelineItem>\n         <TimelineItem>\n            <TimelineDot />\n            <TimelineHeading side=\"left\">Done!</TimelineHeading>\n         </TimelineItem>\n      </Timeline>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/timeline.json b/apps/web/public/v0/styles/miami/timeline.json
new file mode 100644
index 00000000..b99efb52
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/timeline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "timeline",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "files": [
+    {
+      "path": "ui/timeline.tsx",
+      "content": "import { CheckIcon, Cross1Icon } from \"@radix-ui/react-icons\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst timelineVariants = cva(\"grid\", {\n   variants: {\n      positions: {\n         left: \"[&>li]:grid-cols-[0_min-content_1fr]\",\n         right: \"[&>li]:grid-cols-[1fr_min-content]\",\n         center: \"[&>li]:grid-cols-[1fr_min-content_1fr]\",\n      },\n   },\n   defaultVariants: {\n      positions: \"left\",\n   },\n})\n\ninterface TimelineProps\n   extends React.HTMLAttributes<HTMLUListElement>,\n      VariantProps<typeof timelineVariants> {}\n\nconst Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(\n   ({ children, className, positions, ...props }, ref) => {\n      return (\n         <ul\n            className={cn(timelineVariants({ positions }), className)}\n            ref={ref}\n            {...props}\n         >\n            {children}\n         </ul>\n      )\n   },\n)\nTimeline.displayName = \"Timeline\"\n\nconst timelineItemVariants = cva(\"grid items-center gap-x-2\", {\n   variants: {\n      status: {\n         done: \"text-primary\",\n         default: \"text-muted-foreground\",\n      },\n   },\n   defaultVariants: {\n      status: \"default\",\n   },\n})\n\ninterface TimelineItemProps\n   extends React.HTMLAttributes<HTMLLIElement>,\n      VariantProps<typeof timelineItemVariants> {}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n   ({ className, status, ...props }, ref) => (\n      <li\n         className={cn(timelineItemVariants({ status }), className)}\n         ref={ref}\n         {...props}\n      />\n   ),\n)\nTimelineItem.displayName = \"TimelineItem\"\n\nconst timelineDotVariants = cva(\n   \"col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current\",\n   {\n      variants: {\n         status: {\n            default: \"[&>*]:hidden\",\n            current:\n               \"[&>*:not(.radix-circle)]:hidden [&>.radix-circle]:bg-current [&>.radix-circle]:fill-current\",\n            done: \"bg-primary [&>*:not(.radix-check)]:hidden [&>.radix-check]:text-background\",\n            error: \"border-destructive bg-destructive [&>*:not(.radix-cross)]:hidden [&>.radix-cross]:text-background\",\n            custom: \"[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block\",\n         },\n      },\n      defaultVariants: {\n         status: \"default\",\n      },\n   },\n)\n\ninterface TimelineDotProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof timelineDotVariants> {\n   customIcon?: React.ReactNode\n}\n\nconst TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(\n   ({ className, status, customIcon, ...props }, ref) => (\n      <div\n         role=\"status\"\n         className={cn(\n            \"timeline-dot\",\n            timelineDotVariants({ status }),\n            className,\n         )}\n         ref={ref}\n         {...props}\n      >\n         <div className=\"radix-circle size-2.5 rounded-full\" />\n         <CheckIcon className=\"radix-check size-3\" />\n         <Cross1Icon className=\"radix-cross size-2.5\" />\n         {customIcon}\n      </div>\n   ),\n)\nTimelineDot.displayName = \"TimelineDot\"\n\nconst timelineContentVariants = cva(\n   \"row-start-2 row-end-2 pb-8 text-muted-foreground\",\n   {\n      variants: {\n         side: {\n            right: \"col-start-3 col-end-4 mr-auto text-left\",\n            left: \"col-start-1 col-end-2 ml-auto text-right\",\n         },\n      },\n      defaultVariants: {\n         side: \"right\",\n      },\n   },\n)\n\ninterface TimelineConentProps\n   extends React.HTMLAttributes<HTMLDivElement>,\n      VariantProps<typeof timelineContentVariants> {}\n\nconst TimelineContent = React.forwardRef<HTMLDivElement, TimelineConentProps>(\n   ({ className, side, ...props }, ref) => (\n      <div\n         className={cn(timelineContentVariants({ side }), className)}\n         ref={ref}\n         {...props}\n      />\n   ),\n)\nTimelineContent.displayName = \"TimelineContent\"\n\nconst timelineHeadingVariants = cva(\n   \"row-start-1 row-end-1 line-clamp-1 max-w-full truncate\",\n   {\n      variants: {\n         side: {\n            right: \"col-start-3 col-end-4 mr-auto text-left\",\n            left: \"col-start-1 col-end-2 ml-auto text-right\",\n         },\n         variant: {\n            primary: \"text-base font-medium text-primary\",\n            secondary: \"text-sm font-light text-muted-foreground\",\n         },\n      },\n      defaultVariants: {\n         side: \"right\",\n         variant: \"primary\",\n      },\n   },\n)\n\ninterface TimelineHeadingProps\n   extends React.HTMLAttributes<HTMLParagraphElement>,\n      VariantProps<typeof timelineHeadingVariants> {}\n\nconst TimelineHeading = React.forwardRef<\n   HTMLParagraphElement,\n   TimelineHeadingProps\n>(({ className, side, variant, ...props }, ref) => (\n   <p\n      role=\"heading\"\n      aria-level={variant === \"primary\" ? 2 : 3}\n      className={cn(timelineHeadingVariants({ side, variant }), className)}\n      ref={ref}\n      {...props}\n   />\n))\nTimelineHeading.displayName = \"TimelineHeading\"\n\ninterface TimelineLineProps extends React.HTMLAttributes<HTMLHRElement> {\n   done?: boolean\n}\n\nconst TimelineLine = React.forwardRef<HTMLHRElement, TimelineLineProps>(\n   ({ className, done = false, ...props }, ref) => {\n      return (\n         <hr\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            className={cn(\n               \"col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full\",\n               done ? \"bg-primary\" : \"bg-muted\",\n               className,\n            )}\n            ref={ref}\n            {...props}\n         />\n      )\n   },\n)\nTimelineLine.displayName = \"TimelineLine\"\n\nexport {\n   Timeline,\n   TimelineDot,\n   TimelineItem,\n   TimelineContent,\n   TimelineHeading,\n   TimelineLine,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toast-demo.json b/apps/web/public/v0/styles/miami/toast-demo.json
new file mode 100644
index 00000000..f14324d1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toast-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toast-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ToastAction } from \"@/components/ui/toast\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nexport default function ToastDemo() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Scheduled: Catch up \",\n               description: \"Friday, February 10, 2023 at 5:57 PM\",\n               action: (\n                  <ToastAction altText=\"Goto schedule to undo\">\n                     Undo\n                  </ToastAction>\n               ),\n            })\n         }}\n      >\n         Add to calendar\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toast-destructive.json b/apps/web/public/v0/styles/miami/toast-destructive.json
new file mode 100644
index 00000000..a42564ae
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toast-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toast-destructive",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-destructive.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ToastAction } from \"@/components/ui/toast\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nexport default function ToastDestructive() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               variant: \"destructive\",\n               title: \"Uh oh! Something went wrong.\",\n               description: \"There was a problem with your request.\",\n               action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toast-simple.json b/apps/web/public/v0/styles/miami/toast-simple.json
new file mode 100644
index 00000000..a790cf6a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toast-simple.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toast-simple",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-simple.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nexport default function ToastSimple() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               description: \"Your message has been sent.\",\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toast-with-action.json b/apps/web/public/v0/styles/miami/toast-with-action.json
new file mode 100644
index 00000000..f8fa28e7
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toast-with-action.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toast-with-action",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-with-action.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ToastAction } from \"@/components/ui/toast\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nexport default function ToastWithAction() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Uh oh! Something went wrong.\",\n               description: \"There was a problem with your request.\",\n               action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toast-with-title.json b/apps/web/public/v0/styles/miami/toast-with-title.json
new file mode 100644
index 00000000..05376c55
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toast-with-title.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toast-with-title",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-with-title.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nexport default function ToastWithTitle() {\n   const { toast } = useToast()\n\n   return (\n      <Button\n         variant=\"outline\"\n         onClick={() => {\n            toast({\n               title: \"Uh oh! Something went wrong.\",\n               description: \"There was a problem with your request.\",\n            })\n         }}\n      >\n         Show Toast\n      </Button>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toast.json b/apps/web/public/v0/styles/miami/toast.json
new file mode 100644
index 00000000..37007bf3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toast.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toast",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-toast"
+  ],
+  "files": [
+    {
+      "path": "ui/toast.tsx",
+      "content": "\"use client\"\n\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Viewport>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Viewport\n      ref={ref}\n      className={cn(\n         \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n         className,\n      )}\n      {...props}\n   />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n   \"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n   {\n      variants: {\n         variant: {\n            default: \"border bg-background text-foreground\",\n            destructive:\n               \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nconst Toast = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Root>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n      VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n   return (\n      <ToastPrimitives.Root\n         ref={ref}\n         className={cn(toastVariants({ variant }), className)}\n         {...props}\n      />\n   )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Action>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Action\n      ref={ref}\n      className={cn(\n         \"hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-1 disabled:pointer-events-none disabled:opacity-50\",\n         className,\n      )}\n      {...props}\n   />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Close>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Close\n      ref={ref}\n      className={cn(\n         \"text-foreground/50 hover:text-foreground absolute right-1 top-1 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\n         className,\n      )}\n      toast-close=\"\"\n      {...props}\n   >\n      <Cross2Icon className=\"size-4\" />\n   </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Title>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Title\n      ref={ref}\n      className={cn(\"text-sm font-semibold [&+div]:text-xs\", className)}\n      {...props}\n   />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n   React.ElementRef<typeof ToastPrimitives.Description>,\n   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n   <ToastPrimitives.Description\n      ref={ref}\n      className={cn(\"text-sm opacity-90\", className)}\n      {...props}\n   />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n   type ToastProps,\n   type ToastActionElement,\n   ToastProvider,\n   ToastViewport,\n   Toast,\n   ToastTitle,\n   ToastDescription,\n   ToastClose,\n   ToastAction,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "hooks/use-toast.ts",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type { ToastActionElement, ToastProps } from \"@/components/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n   id: string\n   title?: React.ReactNode\n   description?: React.ReactNode\n   action?: ToastActionElement\n}\n\nconst actionTypes = {\n   ADD_TOAST: \"ADD_TOAST\",\n   UPDATE_TOAST: \"UPDATE_TOAST\",\n   DISMISS_TOAST: \"DISMISS_TOAST\",\n   REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n   count = (count + 1) % Number.MAX_SAFE_INTEGER\n   return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n   | {\n        type: ActionType[\"ADD_TOAST\"]\n        toast: ToasterToast\n     }\n   | {\n        type: ActionType[\"UPDATE_TOAST\"]\n        toast: Partial<ToasterToast>\n     }\n   | {\n        type: ActionType[\"DISMISS_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n   | {\n        type: ActionType[\"REMOVE_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n\ninterface State {\n   toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n   if (toastTimeouts.has(toastId)) {\n      return\n   }\n\n   const timeout = setTimeout(() => {\n      toastTimeouts.delete(toastId)\n      dispatch({\n         type: \"REMOVE_TOAST\",\n         toastId,\n      })\n   }, TOAST_REMOVE_DELAY)\n\n   toastTimeouts.set(toastId, timeout)\n}\n\nexport function reducer(state: State, action: Action): State {\n   switch (action.type) {\n      case \"ADD_TOAST\":\n         return {\n            ...state,\n            toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n         }\n\n      case \"UPDATE_TOAST\":\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === action.toast.id ? { ...t, ...action.toast } : t,\n            ),\n         }\n\n      case \"DISMISS_TOAST\": {\n         const { toastId } = action\n\n         // ! Side effects ! - This could be extracted into a dismissToast() action,\n         // but I'll keep it here for simplicity\n         if (toastId) {\n            addToRemoveQueue(toastId)\n         } else {\n            state.toasts.forEach((toast) => {\n               addToRemoveQueue(toast.id)\n            })\n         }\n\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === toastId || toastId === undefined\n                  ? {\n                       ...t,\n                       open: false,\n                    }\n                  : t,\n            ),\n         }\n      }\n      case \"REMOVE_TOAST\":\n         if (action.toastId === undefined) {\n            return {\n               ...state,\n               toasts: [],\n            }\n         }\n         return {\n            ...state,\n            toasts: state.toasts.filter((t) => t.id !== action.toastId),\n         }\n   }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n   memoryState = reducer(memoryState, action)\n   listeners.forEach((listener) => {\n      listener(memoryState)\n   })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n   const id = genId()\n\n   const update = (props: ToasterToast) =>\n      dispatch({\n         type: \"UPDATE_TOAST\",\n         toast: { ...props, id },\n      })\n   const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n   dispatch({\n      type: \"ADD_TOAST\",\n      toast: {\n         ...props,\n         id,\n         open: true,\n         onOpenChange: (open) => {\n            if (!open) dismiss()\n         },\n      },\n   })\n\n   return {\n      id,\n      dismiss,\n      update,\n   }\n}\n\nfunction useToast() {\n   const [state, setState] = React.useState<State>(memoryState)\n\n   React.useEffect(() => {\n      listeners.push(setState)\n      return () => {\n         const index = listeners.indexOf(setState)\n         if (index > -1) {\n            listeners.splice(index, 1)\n         }\n      }\n   }, [state])\n\n   return {\n      ...state,\n      toast,\n      dismiss: (toastId?: string) =>\n         dispatch({ type: \"DISMISS_TOAST\", toastId }),\n   }\n}\n\nexport { useToast, toast }\n",
+      "type": "registry:hook",
+      "target": ""
+    },
+    {
+      "path": "ui/toaster.tsx",
+      "content": "\"use client\"\n\nimport {\n   Toast,\n   ToastClose,\n   ToastDescription,\n   ToastProvider,\n   ToastTitle,\n   ToastViewport,\n} from \"@/components/ui/toast\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nexport function Toaster() {\n   const { toasts } = useToast()\n\n   return (\n      <ToastProvider>\n         {toasts.map(({ id, title, description, action, ...props }) => {\n            return (\n               <Toast key={id} {...props}>\n                  <div className=\"grid gap-1\">\n                     {title && <ToastTitle>{title}</ToastTitle>}\n                     {description && (\n                        <ToastDescription>{description}</ToastDescription>\n                     )}\n                  </div>\n                  {action}\n                  <ToastClose />\n               </Toast>\n            )\n         })}\n         <ToastViewport />\n      </ToastProvider>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toc-active.json b/apps/web/public/v0/styles/miami/toc-active.json
new file mode 100644
index 00000000..01d83cb3
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toc-active.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toc-active",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toc-active.tsx",
+      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from \"@/components/ui/toc\"\n\nexport default function TOCActive() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>\n            Active Item Table of Contents\n         </TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem indent>\n            <TableOfContentsLink isActive href=\"#second-section\">\n               Second Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toc-demo.json b/apps/web/public/v0/styles/miami/toc-demo.json
new file mode 100644
index 00000000..05f22154
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toc-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toc-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toc-demo.tsx",
+      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from \"@/components/ui/toc\"\n\nexport default function TOCDemo() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#second-section\">\n               Second Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toc-nested.json b/apps/web/public/v0/styles/miami/toc-nested.json
new file mode 100644
index 00000000..b241db01
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toc-nested.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toc-nested",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toc-nested.tsx",
+      "content": "import {\n   TableOfContentsItem,\n   TableOfContentsLink,\n   TableOfContentsList,\n   TableOfContentsTitle,\n} from \"@/components/ui/toc\"\n\nexport default function TOCDNested() {\n   return (\n      <TableOfContentsList>\n         <TableOfContentsTitle>Nested Table of Contents</TableOfContentsTitle>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#first-section-nested\">\n               First Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n         <TableOfContentsItem indent>\n            <TableOfContentsList>\n               <TableOfContentsLink href=\"#first-nested-section-nested\">\n                  First Nested Section\n               </TableOfContentsLink>\n               <TableOfContentsItem indent>\n                  <TableOfContentsLink href=\"#second-nested-section-nested\">\n                     Second Nested Section\n                  </TableOfContentsLink>\n               </TableOfContentsItem>\n            </TableOfContentsList>\n         </TableOfContentsItem>\n         <TableOfContentsItem>\n            <TableOfContentsLink href=\"#third-section-nested\">\n               Third Section\n            </TableOfContentsLink>\n         </TableOfContentsItem>\n      </TableOfContentsList>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toc.json b/apps/web/public/v0/styles/miami/toc.json
new file mode 100644
index 00000000..f867d1a2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toc.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toc",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/toc.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface TableOfContentsListProps\n   extends React.ComponentPropsWithoutRef<\"ul\"> {\n   indent?: boolean\n}\n\nconst TableOfContentsList = React.forwardRef<\n   React.ElementRef<\"ul\">,\n   TableOfContentsListProps\n>(({ className, indent, ...props }, ref) => (\n   <ul\n      ref={ref}\n      className={cn(\"m-0 list-none\", indent && \"pl-4\", className)}\n      {...props}\n   />\n))\nTableOfContentsList.displayName = \"TableOfContentsList\"\n\ninterface TableOfContentsTitleProps\n   extends React.ComponentPropsWithoutRef<\"li\"> {}\n\nconst TableOfContentsTitle = React.forwardRef<\n   React.ElementRef<\"li\">,\n   TableOfContentsTitleProps\n>(({ className, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={cn(\"mb-2 text-sm font-medium\", className)}\n      {...props}\n   />\n))\nTableOfContentsTitle.displayName = \"TableOfContentsTitle\"\n\ninterface TableOfContentsItemProps\n   extends React.ComponentPropsWithoutRef<\"li\"> {\n   indent?: boolean\n}\n\nconst TableOfContentsItem = React.forwardRef<\n   React.ElementRef<\"li\">,\n   TableOfContentsItemProps\n>(({ className, indent, ...props }, ref) => (\n   <li\n      ref={ref}\n      className={cn(\"mt-0 pt-2\", indent && \"ml-4\", className)}\n      {...props}\n   />\n))\nTableOfContentsItem.displayName = \"TableOfContentsItem\"\n\ninterface TableOfContentsLinkProps extends React.ComponentPropsWithoutRef<\"a\"> {\n   isActive?: boolean\n}\n\nconst TableOfContentsLink = React.forwardRef<\n   React.ElementRef<\"a\">,\n   TableOfContentsLinkProps\n>(({ className, isActive, ...props }, ref) => (\n   <a\n      ref={ref}\n      className={cn(\n         \"text-foreground hover:text-primary text-sm font-medium transition-colors\",\n         isActive ? \"text-foreground font-medium\" : \"text-muted-foreground\",\n         className,\n      )}\n      {...props}\n   />\n))\nTableOfContentsLink.displayName = \"TableOfContentsLink\"\n\nexport {\n   TableOfContentsList,\n   TableOfContentsTitle,\n   TableOfContentsItem,\n   TableOfContentsLink,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-demo.json b/apps/web/public/v0/styles/miami/toggle-demo.json
new file mode 100644
index 00000000..ffd3ebde
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-demo.tsx",
+      "content": "import { FontBoldIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport default function ToggleDemo() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <FontBoldIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-disabled.json b/apps/web/public/v0/styles/miami/toggle-disabled.json
new file mode 100644
index 00000000..0be0432b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-disabled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-disabled.tsx",
+      "content": "import { UnderlineIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport default function ToggleDisabled() {\n   return (\n      <Toggle aria-label=\"Toggle italic\" disabled>\n         <UnderlineIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-group-demo.json b/apps/web/public/v0/styles/miami/toggle-group-demo.json
new file mode 100644
index 00000000..860d437f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-group-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-group-demo.tsx",
+      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-group-disabled.json b/apps/web/public/v0/styles/miami/toggle-group-disabled.json
new file mode 100644
index 00000000..0759e7d7
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-group-disabled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group-disabled",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-group-disabled.tsx",
+      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\" disabled>\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-group-lg.json b/apps/web/public/v0/styles/miami/toggle-group-lg.json
new file mode 100644
index 00000000..061af6a2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-group-lg.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group-lg",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-group-lg.tsx",
+      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\" size=\"lg\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-group-outline.json b/apps/web/public/v0/styles/miami/toggle-group-outline.json
new file mode 100644
index 00000000..3a9e19f5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-group-outline.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group-outline",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-group-outline.tsx",
+      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"multiple\" variant=\"outline\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-group-single.json b/apps/web/public/v0/styles/miami/toggle-group-single.json
new file mode 100644
index 00000000..fa2ac82b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-group-single.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group-single",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-group-single.tsx",
+      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"single\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-group-sm.json b/apps/web/public/v0/styles/miami/toggle-group-sm.json
new file mode 100644
index 00000000..bc5ed991
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-group-sm.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group-sm",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-group-sm.tsx",
+      "content": "import {\n   FontBoldIcon,\n   FontItalicIcon,\n   UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n   return (\n      <ToggleGroup type=\"single\" size=\"sm\">\n         <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n            <FontBoldIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n            <FontItalicIcon className=\"size-4\" />\n         </ToggleGroupItem>\n         <ToggleGroupItem\n            value=\"strikethrough\"\n            aria-label=\"Toggle strikethrough\"\n         >\n            <UnderlineIcon className=\"size-4\" />\n         </ToggleGroupItem>\n      </ToggleGroup>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-group.json b/apps/web/public/v0/styles/miami/toggle-group.json
new file mode 100644
index 00000000..12f868b6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-group.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-group",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-toggle-group"
+  ],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle-group.tsx",
+      "content": "\"use client\"\n\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/components/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n   VariantProps<typeof toggleVariants>\n>({\n   size: \"default\",\n   variant: \"default\",\n})\n\nconst ToggleGroup = React.forwardRef<\n   React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n      VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n   <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={cn(\"flex items-center justify-center gap-1\", className)}\n      {...props}\n   >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n         {children}\n      </ToggleGroupContext.Provider>\n   </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n   React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n      VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n   const context = React.useContext(ToggleGroupContext)\n\n   return (\n      <ToggleGroupPrimitive.Item\n         ref={ref}\n         className={cn(\n            toggleVariants({\n               variant: context.variant || variant,\n               size: context.size || size,\n            }),\n            className,\n         )}\n         {...props}\n      >\n         {children}\n      </ToggleGroupPrimitive.Item>\n   )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-lg.json b/apps/web/public/v0/styles/miami/toggle-lg.json
new file mode 100644
index 00000000..c49cfca0
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-lg.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-lg",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-lg.tsx",
+      "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport default function ToggleLg() {\n   return (\n      <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n         <FontItalicIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-outline.json b/apps/web/public/v0/styles/miami/toggle-outline.json
new file mode 100644
index 00000000..606f1f4b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-outline.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-outline",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-outline.tsx",
+      "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport default function ToggleOutline() {\n   return (\n      <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n         <FontItalicIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-sm.json b/apps/web/public/v0/styles/miami/toggle-sm.json
new file mode 100644
index 00000000..92e327cc
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-sm.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-sm",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-sm.tsx",
+      "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport default function ToggleSm() {\n   return (\n      <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n         <FontItalicIcon className=\"size-4\" />\n      </Toggle>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle-with-text.json b/apps/web/public/v0/styles/miami/toggle-with-text.json
new file mode 100644
index 00000000..ed6c171c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle-with-text.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle-with-text",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/toggle-with-text.tsx",
+      "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport default function ToggleWithText() {\n   return (\n      <Toggle aria-label=\"Toggle italic\">\n         <FontItalicIcon className=\"mr-2 size-4\" />\n         Italic\n      </Toggle>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/toggle.json b/apps/web/public/v0/styles/miami/toggle.json
new file mode 100644
index 00000000..9455d8ff
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/toggle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "toggle",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-toggle"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle.tsx",
+      "content": "\"use client\"\n\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n   \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-transparent\",\n            outline:\n               \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n         },\n         size: {\n            default: \"h-9 px-3\",\n            sm: \"h-8 px-2\",\n            lg: \"h-10 px-3\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n         size: \"default\",\n      },\n   },\n)\n\nconst Toggle = React.forwardRef<\n   React.ElementRef<typeof TogglePrimitive.Root>,\n   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n      VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n   <TogglePrimitive.Root\n      ref={ref}\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n   />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tooltip-demo.json b/apps/web/public/v0/styles/miami/tooltip-demo.json
new file mode 100644
index 00000000..b5d9d907
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tooltip-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tooltip-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Tooltip,\n   TooltipArrow,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nexport default function TooltipDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Add to library</p>\n               <TooltipArrow />\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tooltip-outline.json b/apps/web/public/v0/styles/miami/tooltip-outline.json
new file mode 100644
index 00000000..28b3afc8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tooltip-outline.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tooltip-outline",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tooltip-outline.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nexport default function TooltipOutline() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent variant=\"outline\">\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tooltip-secondary.json b/apps/web/public/v0/styles/miami/tooltip-secondary.json
new file mode 100644
index 00000000..a9ee95be
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tooltip-secondary.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tooltip-secondary",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tooltip-secondary.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nexport default function TooltipSecondary() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger asChild>\n               <Button variant=\"outline\">Hover</Button>\n            </TooltipTrigger>\n            <TooltipContent variant=\"secondary\">\n               <p>Add to library</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tooltip-with-toggle-demo.json b/apps/web/public/v0/styles/miami/tooltip-with-toggle-demo.json
new file mode 100644
index 00000000..ae569344
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tooltip-with-toggle-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tooltip-with-toggle-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tooltip-with-toggle-demo.tsx",
+      "content": "import { Heart } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\nimport {\n   Tooltip,\n   TooltipContent,\n   TooltipProvider,\n   TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nexport default function TooltipWithToggleDemo() {\n   return (\n      <TooltipProvider>\n         <Tooltip>\n            <TooltipTrigger>\n               <Toggle variant=\"outline\" aria-label=\"Toggle Heart\">\n                  <Heart className=\"size-4\" />\n               </Toggle>\n            </TooltipTrigger>\n            <TooltipContent>\n               <p>Heart</p>\n            </TooltipContent>\n         </Tooltip>\n      </TooltipProvider>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tooltip.json b/apps/web/public/v0/styles/miami/tooltip.json
new file mode 100644
index 00000000..77fd8f16
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tooltip.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tooltip",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-tooltip"
+  ],
+  "files": [
+    {
+      "path": "ui/tooltip.tsx",
+      "content": "\"use client\"\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst tooltipVariants = cva(\n   \"z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n   {\n      variants: {\n         variant: {\n            default: \"bg-primary text-primary-foreground\",\n            outline: \"border bg-popover text-popover-foreground shadow-md\",\n            secondary: \"bg-secondary text-secondary-foreground\",\n         },\n      },\n      defaultVariants: {\n         variant: \"default\",\n      },\n   },\n)\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipArrow = TooltipPrimitive.TooltipArrow\n\nexport interface TooltipProps\n   extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n      VariantProps<typeof tooltipVariants> {}\n\nconst TooltipContent = React.forwardRef<\n   React.ElementRef<typeof TooltipPrimitive.Content>,\n   TooltipProps\n>(({ className, variant, sideOffset = 4, ...props }, ref) => (\n   <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(tooltipVariants({ variant, className }))}\n      {...props}\n   />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport {\n   Tooltip,\n   TooltipTrigger,\n   TooltipArrow,\n   TooltipContent,\n   TooltipProvider,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tour-demo.json b/apps/web/public/v0/styles/miami/tour-demo.json
new file mode 100644
index 00000000..ee0b7c61
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tour-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tour-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tour-demo.tsx",
+      "content": "import type * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardFooter,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { TourFactory } from \"@/components/ui/tour\"\n\nconst tour = TourFactory([\n   \"buttonOne\",\n   \"buttonTwo\",\n   \"missingButton\",\n   \"buttonFour\",\n   \"emailInput\",\n])\n\nfunction TourDisplay(props: {\n   children: React.ReactNode\n   title?: string\n   description?: string\n}) {\n   const ctx = tour.useContext()\n   return (\n      <Card className=\"w-[350px]\">\n         <CardHeader>\n            <CardTitle>{props.title}</CardTitle>\n            <CardDescription>{props.description}</CardDescription>\n         </CardHeader>\n         <CardContent>{props.children}</CardContent>\n         <CardFooter>\n            {ctx.current < ctx.nodes.size ? (\n               <div className=\"flex w-full justify-between\">\n                  <Button variant=\"outline\" onClick={ctx.close}>\n                     Close\n                  </Button>\n                  <div>\n                     <Button onClick={ctx.previous}>Previous</Button>\n                     <Button onClick={ctx.next}>Next</Button>\n                  </div>\n               </div>\n            ) : (\n               <div className=\"flex w-full justify-end\">\n                  <Button onClick={ctx.previous}>Previous</Button>\n                  <Button className=\"bg-green-800\" onClick={ctx.close}>\n                     Finish\n                  </Button>\n               </div>\n            )}\n         </CardFooter>\n      </Card>\n   )\n}\n\nfunction TourApplication() {\n   const ctx = tour.useContext()\n   return (\n      <div className=\"flex h-96 w-full items-center justify-center\">\n         <div className=\"absolute bottom-2 left-2 flex gap-2\">\n            <tour.TourFocus\n               name=\"buttonOne\"\n               tourRender={\n                  <TourDisplay title=\"Create Incident\">\n                     <h1>This button creates an incident</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               }\n            >\n               <Button>Create Incident</Button>\n            </tour.TourFocus>\n            <tour.TourFocus\n               name=\"buttonFour\"\n               tourRender={\n                  <TourDisplay title=\"Update Incident\">\n                     <h1>This button pushes your updates</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               }\n            >\n               <Button>Update Incident</Button>\n            </tour.TourFocus>\n         </div>\n         <div className=\"absolute right-2 top-12 flex gap-2\">\n            <tour.TourFocus\n               name=\"buttonTwo\"\n               tourRender={\n                  <TourDisplay title=\"Resolve Incident\">\n                     <h1>This button Resolves the Incident</h1>\n                     <p>helpful text about this button</p>\n                  </TourDisplay>\n               }\n            >\n               <Button>Resolve Incident</Button>\n            </tour.TourFocus>\n         </div>\n         <div>\n            <tour.TourFocus\n               name=\"emailInput\"\n               tourRender={\n                  <TourDisplay title=\"Email Input\">\n                     <h1>This is where you put incident info</h1>\n                     <p>helpful text about this input</p>\n                  </TourDisplay>\n               }\n            >\n               <Input type=\"email\" placeholder=\"Email\" />\n            </tour.TourFocus>\n         </div>\n         <div className=\"absolute bottom-2 right-2\">\n            <Button onClick={ctx.open}>Open Tour</Button>\n         </div>\n      </div>\n   )\n}\n\nexport default function TourDemo() {\n   return (\n      <tour.TourProvider>\n         <TourApplication />\n      </tour.TourProvider>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tour.json b/apps/web/public/v0/styles/miami/tour.json
new file mode 100644
index 00000000..568bc3c5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tour.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tour",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/tour.tsx",
+      "content": "\"use client\"\nimport React, {\n   createContext,\n   useContext,\n   useEffect,\n   useMemo,\n   useRef,\n   useState,\n} from \"react\"\nimport { createPortal } from \"react-dom\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TourContext<T extends string> {\n   nodes: Map<\n      string,\n      {\n         ref: HTMLElement\n         render: React.ReactNode\n         name: T\n      }\n   >\n   show: boolean\n   current: number\n   next: () => void\n   previous: () => void\n   close: () => void\n   open: () => void\n}\n\nexport interface TourProps {\n   children?: React.ReactNode\n}\n\nexport interface TourFocusProps<T extends string> {\n   children: React.ReactNode\n   tourRender: React.ReactNode\n   name: T\n}\n\nexport function TourFactory<T extends string>(order: T[]) {\n   const tourContext = createContext<TourContext<T>>({\n      nodes: new Map(),\n      show: false,\n      current: 0,\n      next: () => {\n         console.log(\"empty\")\n      },\n      previous: () => {\n         console.log(\"empty\")\n      },\n      close: () => {\n         console.log(\"empty\")\n      },\n      open: () => {\n         console.log(\"empty\")\n      },\n   })\n\n   function TourPortal() {\n      const ctx = useContext(tourContext)\n\n      const ref = useRef<HTMLDivElement>(null)\n      const [, forceUpdate] = React.useState({})\n\n      const currentElement = useMemo(\n         () => ctx.nodes.get(order[ctx.current] ?? \"\"),\n         [ctx],\n      )\n\n      useEffect(() => {\n         const handleResize = () => {\n            forceUpdate({})\n         }\n\n         window.addEventListener(\"resize\", handleResize)\n         window.addEventListener(\"scroll\", handleResize)\n\n         return () => {\n            window.removeEventListener(\"resize\", handleResize)\n            window.removeEventListener(\"scroll\", handleResize)\n         }\n      }, [])\n\n      useEffect(() => {\n         if (ctx.show) {\n            forceUpdate({})\n         }\n      }, [ctx.show])\n\n      if (!currentElement) {\n         return <></>\n      }\n\n      const currentElementRect = currentElement.ref.getBoundingClientRect()\n\n      const height = ref.current?.getBoundingClientRect().height ?? 0\n      const width = ref.current?.getBoundingClientRect().width ?? 0\n\n      const closest = (): React.CSSProperties => {\n         const isCloseToTop = currentElementRect.top < height\n         const isCloseToLeft = currentElementRect.left < width\n         const isCloseToRight =\n            currentElementRect.right > window.innerWidth - width\n\n         if (isCloseToLeft) {\n            return {\n               left: currentElementRect.x + currentElementRect.width,\n               top:\n                  currentElementRect.y -\n                  height / 2 +\n                  currentElementRect.height / 2,\n            }\n         }\n\n         if (isCloseToRight) {\n            return {\n               left: currentElementRect.x - width,\n               top:\n                  currentElementRect.y -\n                  height / 2 +\n                  currentElementRect.height / 2,\n            }\n         }\n\n         if (isCloseToTop) {\n            return {\n               left:\n                  currentElementRect.x -\n                  width / 2 +\n                  currentElementRect.width / 2,\n               top: currentElementRect.y + currentElementRect.height,\n            }\n         }\n\n         return {\n            left:\n               currentElementRect.x - width / 2 + currentElementRect.width / 2,\n            top: currentElementRect.y - height,\n         }\n      }\n\n      return createPortal(\n         <div\n            id=\"tour\"\n            className={cn(\n               \"pointer-events-auto fixed left-0 top-0 h-screen w-screen transition-none\",\n               !ctx.show ? \"invisible\" : \"visible\",\n            )}\n         >\n            <div\n               ref={ref}\n               className={cn(\n                  `absolute z-50 transition-all duration-500 ease-in-out`,\n               )}\n               style={{\n                  ...closest(),\n               }}\n            >\n               {currentElement.render}\n            </div>\n            <div\n               className=\"absolute z-40 h-screen w-screen overflow-hidden opacity-80 shadow-[0_0_0_100vw_rgba(0,0,0,.99)] transition-all duration-500 ease-in-out\"\n               style={{\n                  height: currentElementRect.height,\n                  width: currentElementRect.width,\n                  left: currentElementRect.x,\n                  top: currentElementRect.y,\n               }}\n            />\n         </div>,\n         document.body,\n      )\n   }\n\n   return {\n      TourProvider: function TourProvider(props: TourProps) {\n         const nodes = useRef<TourContext<T>[\"nodes\"]>(new Map())\n\n         const [show, setShow] = useState(false)\n         const [current, setCurrent] = useState(0)\n\n         const getNextIndex = (currIndex: number, nextDiff: number): number => {\n            const lookAheadIndex = currIndex + nextDiff\n            if (lookAheadIndex >= order.length || lookAheadIndex < 0) {\n               return currIndex\n            }\n            if (!nodes.current.has(order[lookAheadIndex])) {\n               return getNextIndex(lookAheadIndex, nextDiff)\n            }\n            return lookAheadIndex\n         }\n\n         return (\n            <tourContext.Provider\n               value={{\n                  nodes: nodes.current,\n                  current,\n                  show,\n                  next: () => {\n                     setCurrent((state) =>\n                        Math.min(getNextIndex(state, 1), order.length - 1),\n                     )\n                  },\n                  previous: () => {\n                     setCurrent((state) => Math.max(getNextIndex(state, -1), 0))\n                  },\n                  close: () => {\n                     setShow(false)\n                  },\n                  open: () => {\n                     setShow(true)\n                  },\n               }}\n            >\n               <TourPortal />\n               {props.children}\n            </tourContext.Provider>\n         )\n      },\n      context: tourContext,\n      useContext: () => useContext(tourContext),\n      TourFocus: function TourFocus(props: TourFocusProps<T>) {\n         const ctx = useContext(tourContext)\n         return (\n            <div\n               ref={(divRef) => {\n                  if (divRef && !ctx.nodes.has(props.name)) {\n                     ctx.nodes.set(props.name, {\n                        ref: divRef,\n                        render: props.tourRender,\n                        name: props.name,\n                     })\n                  }\n               }}\n            >\n               {props.children}\n            </div>\n         )\n      },\n   }\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tweet-card-demo.json b/apps/web/public/v0/styles/miami/tweet-card-demo.json
new file mode 100644
index 00000000..69b24a5e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tweet-card-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tweet-card-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tweet-card-demo.tsx",
+      "content": "import ClientTweetCard from \"@/components/ui/client-tweet-card\"\n\n/**\n * <TweetCard /> (Server Side Only)\n * <ClientTweetCard /> (Client Side Only)\n */\nexport default async function TweetDemo() {\n   return <ClientTweetCard id=\"1845116507438620801\" className=\"shadow-2xl\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tweet-card-images.json b/apps/web/public/v0/styles/miami/tweet-card-images.json
new file mode 100644
index 00000000..ba98fbaf
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tweet-card-images.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tweet-card-images",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tweet-card-images.tsx",
+      "content": "import ClientTweetCard from \"@/components/ui/client-tweet-card\"\n\nexport default async function TweetImages() {\n   return <ClientTweetCard id=\"1803717292087296479\" className=\"shadow-2xl\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tweet-card-meta-preview.json b/apps/web/public/v0/styles/miami/tweet-card-meta-preview.json
new file mode 100644
index 00000000..dd21ef1b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tweet-card-meta-preview.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tweet-card-meta-preview",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/tweet-card-meta-preview.tsx",
+      "content": "import ClientTweetCard from \"@/components/ui/client-tweet-card\"\n\nexport default async function TweetMetaPreview() {\n   return <ClientTweetCard id=\"1671108134591504385\" className=\"shadow-2xl\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/tweet-card.json b/apps/web/public/v0/styles/miami/tweet-card.json
new file mode 100644
index 00000000..b97fb401
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/tweet-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "tweet-card",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "react-tweet"
+  ],
+  "files": [
+    {
+      "path": "ui/tweet-card.tsx",
+      "content": "import { Suspense } from \"react\"\nimport {\n   type EnrichedTweet,\n   type TweetProps,\n   type TwitterComponents,\n   enrichTweet,\n} from \"react-tweet\"\nimport { type Tweet, getTweet } from \"react-tweet/api\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TwitterIconProps {\n   className?: string\n   [key: string]: any\n}\nfunction Twitter({ className, ...props }: TwitterIconProps) {\n   return (\n      <svg\n         stroke=\"currentColor\"\n         fill=\"currentColor\"\n         strokeWidth=\"0\"\n         viewBox=\"0 0 24 24\"\n         height=\"1em\"\n         width=\"1em\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         className={className}\n         {...props}\n      >\n         <g>\n            <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n            <path d=\"M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z\"></path>\n         </g>\n      </svg>\n   )\n}\n\nfunction Verified({ className, ...props }: TwitterIconProps) {\n   return (\n      <svg\n         aria-label=\"Verified Account\"\n         viewBox=\"0 0 24 24\"\n         className={className}\n         {...props}\n      >\n         <g fill=\"currentColor\">\n            <path d=\"M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z\" />\n         </g>\n      </svg>\n   )\n}\n\nexport function truncate(str: string | null, length: number) {\n   if (!str || str.length <= length) return str\n   return `${str.slice(0, length - 3)}...`\n}\n\nfunction Skeleton({\n   className,\n   ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n   return (\n      <div\n         className={cn(\"bg-primary/10 animate-pulse rounded-md\", className)}\n         {...props}\n      />\n   )\n}\n\nexport function TweetSkeleton({\n   className,\n   ...props\n}: {\n   className?: string\n   [key: string]: any\n}) {\n   return (\n      <div\n         className={cn(\n            \"flex size-full max-h-max min-w-72 flex-col gap-2 rounded-lg border p-4\",\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"flex flex-row gap-2\">\n            <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n            <Skeleton className=\"h-10 w-full\" />\n         </div>\n         <Skeleton className=\"h-20 w-full\" />\n      </div>\n   )\n}\n\nexport function TweetNotFound({\n   className,\n   ...props\n}: {\n   className?: string\n   [key: string]: any\n}) {\n   return (\n      <div\n         className={cn(\n            \"flex size-full flex-col items-center justify-center gap-2 rounded-lg border p-4\",\n            className,\n         )}\n         {...props}\n      >\n         <h3>Tweet not found</h3>\n      </div>\n   )\n}\n\nexport function TweetHeader({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"flex flex-row justify-between tracking-tight\">\n         <div className=\"flex items-center space-x-2\">\n            <a href={tweet.user.url} target=\"_blank\" rel=\"noreferrer\">\n               <img\n                  title={`Profile picture of ${tweet.user.name}`}\n                  alt={tweet.user.screen_name}\n                  height={48}\n                  width={48}\n                  src={tweet.user.profile_image_url_https}\n                  className=\"overflow-hidden rounded-full border border-transparent\"\n               />\n            </a>\n            <div>\n               <a\n                  href={tweet.user.url}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"flex items-center whitespace-nowrap font-semibold\"\n               >\n                  {truncate(tweet.user.name, 20)}\n                  {tweet.user.verified ||\n                     (tweet.user.is_blue_verified && (\n                        <Verified className=\"ml-1 inline size-4 text-blue-500\" />\n                     ))}\n               </a>\n               <div className=\"flex items-center space-x-1\">\n                  <a\n                     href={tweet.user.url}\n                     target=\"_blank\"\n                     rel=\"noreferrer\"\n                     className=\"text-sm text-gray-500 transition-all duration-75\"\n                  >\n                     @{truncate(tweet.user.screen_name, 16)}\n                  </a>\n               </div>\n            </div>\n         </div>\n         <a href={tweet.url} target=\"_blank\" rel=\"noreferrer\">\n            <span className=\"sr-only\">Link to tweet</span>\n            <Twitter className=\"size-5 items-start text-[#3BA9EE] transition-all ease-in-out hover:scale-105\" />\n         </a>\n      </div>\n   )\n}\n\nexport function TweetBody({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"break-words leading-normal tracking-tighter\">\n         {tweet.entities.map((entity, idx) => {\n            switch (entity.type) {\n               case \"url\":\n               case \"symbol\":\n               case \"hashtag\":\n               case \"mention\":\n                  return (\n                     <a\n                        key={idx}\n                        href={entity.href}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"text-sm font-normal text-gray-500\"\n                     >\n                        <span>{entity.text}</span>\n                     </a>\n                  )\n               case \"text\":\n                  return (\n                     <span\n                        key={idx}\n                        className=\"text-sm font-normal\"\n                        dangerouslySetInnerHTML={{ __html: entity.text }}\n                     />\n                  )\n            }\n         })}\n      </div>\n   )\n}\n\nexport function TweetMedia({ tweet }: { tweet: EnrichedTweet }) {\n   return (\n      <div className=\"flex flex-1 items-center justify-center\">\n         {tweet.video && (\n            <video\n               poster={tweet.video.poster}\n               autoPlay\n               loop\n               muted\n               playsInline\n               className=\"rounded-xl border shadow-sm\"\n            >\n               <source src={tweet.video.variants[0].src} type=\"video/mp4\" />\n               Your browser does not support the video tag.\n            </video>\n         )}\n         {tweet.photos && (\n            <div className=\"relative flex transform-gpu snap-x snap-mandatory gap-4 overflow-x-auto\">\n               <div className=\"shrink-0 snap-center sm:w-2\" />\n               {tweet.photos.map((photo) => (\n                  <img\n                     key={photo.url}\n                     src={photo.url}\n                     title={`Photo by ${tweet.user.name}`}\n                     alt={tweet.text}\n                     className=\"h-64 w-5/6 shrink-0 snap-center snap-always rounded-xl border object-cover shadow-sm\"\n                  />\n               ))}\n               <div className=\"shrink-0 snap-center sm:w-2\" />\n            </div>\n         )}\n         {!tweet.video &&\n            !tweet.photos &&\n            // @ts-expect-error is fine\n            tweet?.card?.binding_values?.thumbnail_image_large?.image_value\n               .url && (\n               <img\n                  src={\n                     // @ts-expect-error is fine\n                     tweet.card.binding_values.thumbnail_image_large.image_value\n                        .url\n                  }\n                  className=\"h-64 rounded-xl border object-cover shadow-sm\"\n               />\n            )}\n      </div>\n   )\n}\n\nexport function MagicTweet({\n   tweet,\n   components,\n   className,\n   ...props\n}: {\n   tweet: Tweet\n   components?: TwitterComponents\n   className?: string\n}) {\n   const enrichedTweet = enrichTweet(tweet)\n   return (\n      <div\n         className={cn(\n            \"relative flex size-full max-w-lg flex-col gap-2 overflow-hidden rounded-lg border p-4 backdrop-blur-md\",\n            className,\n         )}\n         {...props}\n      >\n         <TweetHeader tweet={enrichedTweet} />\n         <TweetBody tweet={enrichedTweet} />\n         <TweetMedia tweet={enrichedTweet} />\n      </div>\n   )\n}\n\n/**\n * TweetCard (Server Side Only)\n */\nexport async function TweetCard({\n   id,\n   components,\n   fallback = <TweetSkeleton />,\n   onError,\n   ...props\n}: TweetProps & {\n   className?: string\n}) {\n   const tweet = id\n      ? await getTweet(id).catch((err) => {\n           if (onError) onError(err)\n           else console.error(err)\n        })\n      : undefined\n\n   if (!tweet) {\n      const NotFound = components?.TweetNotFound || TweetNotFound\n      return <NotFound {...props} />\n   }\n\n   return (\n      <Suspense fallback={fallback}>\n         <MagicTweet tweet={tweet} {...props} />\n      </Suspense>\n   )\n}\n\nexport default TweetCard\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typing-animation-demo.json b/apps/web/public/v0/styles/miami/typing-animation-demo.json
new file mode 100644
index 00000000..fb39e8d1
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typing-animation-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typing-animation-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typing-animation-demo.tsx",
+      "content": "import TypingAnimation from \"@/components/ui/typing-animation\"\n\nexport default async function TextRevealDemo() {\n   return (\n      <TypingAnimation\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         text=\"Typing Animation\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typing-animation.json b/apps/web/public/v0/styles/miami/typing-animation.json
new file mode 100644
index 00000000..04a97032
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typing-animation.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typing-animation",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "ui/typing-animation.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TypingAnimationProps {\n   text: string\n   duration?: number\n   className?: string\n}\n\nexport default function TypingAnimation({\n   text,\n   duration = 200,\n   className,\n}: TypingAnimationProps) {\n   const [displayedText, setDisplayedText] = useState<string>(\"\")\n   const [i, setI] = useState<number>(0)\n\n   useEffect(() => {\n      const typingEffect = setInterval(() => {\n         if (i < text.length) {\n            setDisplayedText(text.substring(0, i + 1))\n            setI(i + 1)\n         } else {\n            clearInterval(typingEffect)\n         }\n      }, duration)\n\n      return () => {\n         clearInterval(typingEffect)\n      }\n   }, [duration, i])\n\n   return (\n      <h1\n         className={cn(\n            \"font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm\",\n            className,\n         )}\n      >\n         {displayedText || text}\n      </h1>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-blockquote.json b/apps/web/public/v0/styles/miami/typography-blockquote.json
new file mode 100644
index 00000000..f84c06f4
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-blockquote.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-blockquote",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-blockquote.tsx",
+      "content": "export default function TypographyBlockquote() {\n   return (\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n         \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n         that they should pay for the privilege.\"\n      </blockquote>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-demo.json b/apps/web/public/v0/styles/miami/typography-demo.json
new file mode 100644
index 00000000..f444d0cf
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-demo.tsx",
+      "content": "export default function TypographyDemo() {\n   return (\n      <div>\n         <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n            The Joke Tax Chronicles\n         </h1>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            Once upon a time, in a far-off land, there was a very lazy king who\n            spent all day lounging on his throne. One day, his advisors came to\n            him with a problem: the kingdom was running out of money.\n         </p>\n         <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n            The King's Plan\n         </h2>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king thought long and hard, and finally came up with{\" \"}\n            <a\n               href=\"#\"\n               className=\"text-primary font-medium underline underline-offset-4\"\n            >\n               a brilliant plan\n            </a>\n            : he would tax the jokes in the kingdom.\n         </p>\n         <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n            \"After all,\" he said, \"everyone enjoys a good joke, so it's only\n            fair that they should pay for the privilege.\"\n         </blockquote>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            The Joke Tax\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king's subjects were not amused. They grumbled and complained,\n            but the king was firm:\n         </p>\n         <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n            <li>1st level of puns: 5 gold coins</li>\n            <li>2nd level of jokes: 10 gold coins</li>\n            <li>3rd level of one-liners : 20 gold coins</li>\n         </ul>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            As a result, people stopped telling jokes, and the kingdom fell into\n            a gloom. But there was one person who refused to let the king's\n            foolishness get him down: a court jester named Jokester.\n         </p>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            Jokester's Revolt\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            Jokester began sneaking into the castle in the middle of the night\n            and leaving jokes all over the place: under the king's pillow, in\n            his soup, even in the royal toilet. The king was furious, but he\n            couldn't seem to stop Jokester.\n         </p>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            And then, one day, the people of the kingdom discovered that the\n            jokes left by Jokester were so funny that they couldn't help but\n            laugh. And once they started laughing, they couldn't stop.\n         </p>\n         <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n            The People's Rebellion\n         </h3>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The people of the kingdom, feeling uplifted by the laughter, started\n            to tell jokes and puns again, and soon the entire kingdom was in on\n            the joke.\n         </p>\n         <div className=\"my-6 w-full overflow-y-auto\">\n            <table className=\"w-full\">\n               <thead>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        King's Treasury\n                     </th>\n                     <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        People's happiness\n                     </th>\n                  </tr>\n               </thead>\n               <tbody>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Empty\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Overflowing\n                     </td>\n                  </tr>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Modest\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Satisfied\n                     </td>\n                  </tr>\n                  <tr className=\"even:bg-muted m-0 border-t p-0\">\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Full\n                     </td>\n                     <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                        Ecstatic\n                     </td>\n                  </tr>\n               </tbody>\n            </table>\n         </div>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The king, seeing how much happier his subjects were, realized the\n            error of his ways and repealed the joke tax. Jokester was declared a\n            hero, and the kingdom lived happily ever after.\n         </p>\n         <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n            The moral of the story is: never underestimate the power of a good\n            laugh and always be careful of bad ideas.\n         </p>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-h1.json b/apps/web/public/v0/styles/miami/typography-h1.json
new file mode 100644
index 00000000..bd85e102
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-h1.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-h1",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-h1.tsx",
+      "content": "export default function TypographyH1() {\n   return (\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n         Taxing Laughter: The Joke Tax Chronicles\n      </h1>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-h2.json b/apps/web/public/v0/styles/miami/typography-h2.json
new file mode 100644
index 00000000..a75fd310
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-h2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-h2",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-h2.tsx",
+      "content": "export default function TypographyH2() {\n   return (\n      <h2 className=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\">\n         The People of the Kingdom\n      </h2>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-h3.json b/apps/web/public/v0/styles/miami/typography-h3.json
new file mode 100644
index 00000000..20b46497
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-h3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-h3",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-h3.tsx",
+      "content": "export default function TypographyH3() {\n   return (\n      <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n         The Joke Tax\n      </h3>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-h4.json b/apps/web/public/v0/styles/miami/typography-h4.json
new file mode 100644
index 00000000..e302b44f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-h4.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-h4",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-h4.tsx",
+      "content": "export default function TypographyH4() {\n   return (\n      <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n         People stopped telling jokes\n      </h4>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-inline-code.json b/apps/web/public/v0/styles/miami/typography-inline-code.json
new file mode 100644
index 00000000..4c603b53
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-inline-code.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-inline-code",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-inline-code.tsx",
+      "content": "export default function TypographyInlineCode() {\n   return (\n      <code className=\"bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n         @radix-ui/react-alert-dialog\n      </code>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-large.json b/apps/web/public/v0/styles/miami/typography-large.json
new file mode 100644
index 00000000..0e98f954
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-large.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-large",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-large.tsx",
+      "content": "export default function TypographyLarge() {\n   return <div className=\"text-lg font-semibold\">Are you absolutely sure?</div>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-lead.json b/apps/web/public/v0/styles/miami/typography-lead.json
new file mode 100644
index 00000000..0be38b38
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-lead.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-lead",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-lead.tsx",
+      "content": "export default function TypographyLead() {\n   return (\n      <p className=\"text-muted-foreground text-xl\">\n         A modal dialog that interrupts the user with important content and\n         expects a response.\n      </p>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-list.json b/apps/web/public/v0/styles/miami/typography-list.json
new file mode 100644
index 00000000..f89a2027
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-list.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-list",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-list.tsx",
+      "content": "export default function TypographyList() {\n   return (\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n         <li>1st level of puns: 5 gold coins</li>\n         <li>2nd level of jokes: 10 gold coins</li>\n         <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-muted.json b/apps/web/public/v0/styles/miami/typography-muted.json
new file mode 100644
index 00000000..4ecc1c20
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-muted.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-muted",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-muted.tsx",
+      "content": "export default function TypographyMuted() {\n   return (\n      <p className=\"text-muted-foreground text-sm\">Enter your email address.</p>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-p.json b/apps/web/public/v0/styles/miami/typography-p.json
new file mode 100644
index 00000000..c880a19a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-p.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-p",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-p.tsx",
+      "content": "export default function TypographyP() {\n   return (\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n         The king, seeing how much happier his subjects were, realized the error\n         of his ways and repealed the joke tax.\n      </p>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-small.json b/apps/web/public/v0/styles/miami/typography-small.json
new file mode 100644
index 00000000..69f5ceac
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-small.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-small",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-small.tsx",
+      "content": "export default function TypographySmall() {\n   return (\n      <small className=\"text-sm font-medium leading-none\">Email address</small>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/typography-table.json b/apps/web/public/v0/styles/miami/typography-table.json
new file mode 100644
index 00000000..75ec428c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/typography-table.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "typography-table",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/typography-table.tsx",
+      "content": "export default function TypographyTable() {\n   return (\n      <div className=\"my-6 w-full overflow-y-auto\">\n         <table className=\"w-full\">\n            <thead>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     King's Treasury\n                  </th>\n                  <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     People's happiness\n                  </th>\n               </tr>\n            </thead>\n            <tbody>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Empty\n                  </td>\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Overflowing\n                  </td>\n               </tr>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Modest\n                  </td>\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Satisfied\n                  </td>\n               </tr>\n               <tr className=\"even:bg-muted m-0 border-t p-0\">\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Full\n                  </td>\n                  <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                     Ecstatic\n                  </td>\n               </tr>\n            </tbody>\n         </table>\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/use-anchor-observer.json b/apps/web/public/v0/styles/miami/use-anchor-observer.json
new file mode 100644
index 00000000..e563ef68
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/use-anchor-observer.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "use-anchor-observer",
+  "type": "registry:hook",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "hooks/use-anchor-observer.ts",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\n/**\n * Find the active heading of page\n *\n * It selects the top heading by default, and the last item when reached the bottom of page.\n *\n * @param watch - An array of element ids to watch\n * @param single - only one active item at most\n * @returns Active anchor\n */\nexport function useAnchorObserver(watch: string[], single: boolean): string[] {\n   const [activeAnchor, setActiveAnchor] = useState<string[]>([])\n\n   useEffect(() => {\n      let visible: string[] = []\n      const observer = new IntersectionObserver(\n         (entries) => {\n            for (const entry of entries) {\n               if (entry.isIntersecting && !visible.includes(entry.target.id)) {\n                  visible = [...visible, entry.target.id]\n               } else if (\n                  !entry.isIntersecting &&\n                  visible.includes(entry.target.id)\n               ) {\n                  visible = visible.filter((v) => v !== entry.target.id)\n               }\n            }\n\n            if (visible.length > 0) setActiveAnchor(visible)\n         },\n         {\n            rootMargin: single ? \"-80px 0% -70% 0%\" : `-20px 0% -40% 0%`,\n            threshold: 1,\n         },\n      )\n\n      function onScroll(): void {\n         const element = document.scrollingElement\n         if (!element) return\n\n         if (element.scrollTop === 0 && single) {\n            setActiveAnchor(watch.slice(0, 1))\n         } else if (\n            element.scrollTop + element.clientHeight >=\n            element.scrollHeight - 6\n         ) {\n            setActiveAnchor((active) => {\n               return active.length > 0 && !single\n                  ? watch.slice(watch.indexOf(active[0]))\n                  : watch.slice(-1)\n            })\n         }\n      }\n\n      for (const heading of watch) {\n         const element = document.getElementById(heading)\n\n         if (element) observer.observe(element)\n      }\n\n      onScroll()\n      window.addEventListener(\"scroll\", onScroll)\n      return () => {\n         window.removeEventListener(\"scroll\", onScroll)\n         observer.disconnect()\n      }\n   }, [single, watch])\n\n   return single ? activeAnchor.slice(0, 1) : activeAnchor\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/use-mobile.json b/apps/web/public/v0/styles/miami/use-mobile.json
new file mode 100644
index 00000000..ed3b4aca
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/use-mobile.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "use-mobile",
+  "type": "registry:hook",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "hooks/use-mobile.tsx",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n      undefined,\n   )\n\n   React.useEffect(() => {\n      const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n      const onChange = () => {\n         setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n      }\n      mql.addEventListener(\"change\", onChange)\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n      return () => mql.removeEventListener(\"change\", onChange)\n   }, [])\n\n   return !!isMobile\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/use-on-change.json b/apps/web/public/v0/styles/miami/use-on-change.json
new file mode 100644
index 00000000..92150176
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/use-on-change.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "use-on-change",
+  "type": "registry:hook",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "hooks/use-on-change.ts",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nfunction isDifferent(a: unknown, b: unknown): boolean {\n   if (Array.isArray(a) && Array.isArray(b)) {\n      return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]))\n   }\n\n   return a !== b\n}\n\n/**\n * @param value - state to watch\n * @param onChange - when the state changed\n * @param isUpdated - a function that determines if the state is updated\n */\nexport function useOnChange<T>(\n   value: T,\n   onChange: (current: T, previous: T) => void,\n   isUpdated: (prev: T, current: T) => boolean = isDifferent,\n): void {\n   const [prev, setPrev] = useState<T>(value)\n\n   if (isUpdated(prev, value)) {\n      onChange(value, prev)\n      setPrev(value)\n   }\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/use-toast.json b/apps/web/public/v0/styles/miami/use-toast.json
new file mode 100644
index 00000000..91f17d0b
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/use-toast.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "use-toast",
+  "type": "registry:hook",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "hooks/use-toast.ts",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type { ToastActionElement, ToastProps } from \"@/components/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n   id: string\n   title?: React.ReactNode\n   description?: React.ReactNode\n   action?: ToastActionElement\n}\n\nconst actionTypes = {\n   ADD_TOAST: \"ADD_TOAST\",\n   UPDATE_TOAST: \"UPDATE_TOAST\",\n   DISMISS_TOAST: \"DISMISS_TOAST\",\n   REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n   count = (count + 1) % Number.MAX_SAFE_INTEGER\n   return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n   | {\n        type: ActionType[\"ADD_TOAST\"]\n        toast: ToasterToast\n     }\n   | {\n        type: ActionType[\"UPDATE_TOAST\"]\n        toast: Partial<ToasterToast>\n     }\n   | {\n        type: ActionType[\"DISMISS_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n   | {\n        type: ActionType[\"REMOVE_TOAST\"]\n        toastId?: ToasterToast[\"id\"]\n     }\n\ninterface State {\n   toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n   if (toastTimeouts.has(toastId)) {\n      return\n   }\n\n   const timeout = setTimeout(() => {\n      toastTimeouts.delete(toastId)\n      dispatch({\n         type: \"REMOVE_TOAST\",\n         toastId,\n      })\n   }, TOAST_REMOVE_DELAY)\n\n   toastTimeouts.set(toastId, timeout)\n}\n\nexport function reducer(state: State, action: Action): State {\n   switch (action.type) {\n      case \"ADD_TOAST\":\n         return {\n            ...state,\n            toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n         }\n\n      case \"UPDATE_TOAST\":\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === action.toast.id ? { ...t, ...action.toast } : t,\n            ),\n         }\n\n      case \"DISMISS_TOAST\": {\n         const { toastId } = action\n\n         // ! Side effects ! - This could be extracted into a dismissToast() action,\n         // but I'll keep it here for simplicity\n         if (toastId) {\n            addToRemoveQueue(toastId)\n         } else {\n            state.toasts.forEach((toast) => {\n               addToRemoveQueue(toast.id)\n            })\n         }\n\n         return {\n            ...state,\n            toasts: state.toasts.map((t) =>\n               t.id === toastId || toastId === undefined\n                  ? {\n                       ...t,\n                       open: false,\n                    }\n                  : t,\n            ),\n         }\n      }\n      case \"REMOVE_TOAST\":\n         if (action.toastId === undefined) {\n            return {\n               ...state,\n               toasts: [],\n            }\n         }\n         return {\n            ...state,\n            toasts: state.toasts.filter((t) => t.id !== action.toastId),\n         }\n   }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n   memoryState = reducer(memoryState, action)\n   listeners.forEach((listener) => {\n      listener(memoryState)\n   })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n   const id = genId()\n\n   const update = (props: ToasterToast) =>\n      dispatch({\n         type: \"UPDATE_TOAST\",\n         toast: { ...props, id },\n      })\n   const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n   dispatch({\n      type: \"ADD_TOAST\",\n      toast: {\n         ...props,\n         id,\n         open: true,\n         onOpenChange: (open) => {\n            if (!open) dismiss()\n         },\n      },\n   })\n\n   return {\n      id,\n      dismiss,\n      update,\n   }\n}\n\nfunction useToast() {\n   const [state, setState] = React.useState<State>(memoryState)\n\n   React.useEffect(() => {\n      listeners.push(setState)\n      return () => {\n         const index = listeners.indexOf(setState)\n         if (index > -1) {\n            listeners.splice(index, 1)\n         }\n      }\n   }, [state])\n\n   return {\n      ...state,\n      toast,\n      dismiss: (toastId?: string) =>\n         dispatch({ type: \"DISMISS_TOAST\", toastId }),\n   }\n}\n\nexport { useToast, toast }\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/utils.json b/apps/web/public/v0/styles/miami/utils.json
new file mode 100644
index 00000000..b33a63de
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/utils.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "utils",
+  "type": "registry:lib",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n   return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-login-01.json b/apps/web/public/v0/styles/miami/v0-login-01.json
new file mode 100644
index 00000000..14fbcab2
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-login-01.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-login-01",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "internal/login-01.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-screen w-full items-center justify-center px-4\">\n         <Card className=\"mx-auto max-w-sm\">\n            <CardHeader>\n               <CardTitle className=\"text-2xl\">Login</CardTitle>\n               <CardDescription>\n                  Enter your email below to login to your account\n               </CardDescription>\n            </CardHeader>\n            <CardContent>\n               <div className=\"grid gap-4\">\n                  <div className=\"grid gap-2\">\n                     <Label htmlFor=\"email\">Email</Label>\n                     <Input\n                        id=\"email\"\n                        type=\"email\"\n                        placeholder=\"m@example.com\"\n                        required\n                     />\n                  </div>\n                  <div className=\"grid gap-2\">\n                     <div className=\"flex items-center\">\n                        <Label htmlFor=\"password\">Password</Label>\n                        <Link\n                           href=\"#\"\n                           className=\"ml-auto inline-block text-sm underline\"\n                        >\n                           Forgot your password?\n                        </Link>\n                     </div>\n                     <Input id=\"password\" type=\"password\" required />\n                  </div>\n                  <Button type=\"submit\" className=\"w-full\">\n                     Login\n                  </Button>\n                  <Button variant=\"outline\" className=\"w-full\">\n                     Login with Google\n                  </Button>\n               </div>\n               <div className=\"mt-4 text-center text-sm\">\n                  Don&apos;t have an account?{\" \"}\n                  <Link href=\"#\" className=\"underline\">\n                     Sign up\n                  </Link>\n               </div>\n            </CardContent>\n         </Card>\n      </div>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-01.json b/apps/web/public/v0/styles/miami/v0-sidebar-01.json
new file mode 100644
index 00000000..50602e3e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-01.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-01",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-01.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   const [selectedVersion, setSelectedVersion] = React.useState(\n      data.versions[0],\n   )\n\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                                 <GalleryVerticalEnd className=\"size-4\" />\n                              </div>\n                              <div className=\"flex flex-col gap-0.5 leading-none\">\n                                 <span className=\"font-semibold\">\n                                    Documentation\n                                 </span>\n                                 <span className=\"\">v{selectedVersion}</span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                           align=\"start\"\n                        >\n                           {data.versions.map((version) => (\n                              <DropdownMenuItem\n                                 key={version}\n                                 onSelect={() => setSelectedVersion(version)}\n                              >\n                                 v{version}{\" \"}\n                                 {version === selectedVersion && (\n                                    <Check className=\"ml-auto\" />\n                                 )}\n                              </DropdownMenuItem>\n                           ))}\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n               <form>\n                  <SidebarGroup className=\"py-0\">\n                     <SidebarGroupContent className=\"relative\">\n                        <Label htmlFor=\"search\" className=\"sr-only\">\n                           Search\n                        </Label>\n                        <SidebarInput\n                           id=\"search\"\n                           placeholder=\"Search the docs...\"\n                           className=\"pl-8\"\n                        />\n                        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               </form>\n            </SidebarHeader>\n            <SidebarContent>\n               {/* We create a SidebarGroup for each parent. */}\n               {data.navMain.map((item) => (\n                  <SidebarGroup key={item.title}>\n                     <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n                     <SidebarGroupContent>\n                        <SidebarMenu>\n                           {item.items.map((item) => (\n                              <SidebarMenuItem key={item.title}>\n                                 <SidebarMenuButton\n                                    asChild\n                                    isActive={item.isActive}\n                                 >\n                                    <a href={item.url}>{item.title}</a>\n                                 </SidebarMenuButton>\n                              </SidebarMenuItem>\n                           ))}\n                        </SidebarMenu>\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               ))}\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:component",
+      "target": "components/sidebar-01.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-02.json b/apps/web/public/v0/styles/miami/v0-sidebar-02.json
new file mode 100644
index 00000000..a603c922
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-02.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-02",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-02.tsx",
+      "content": "\"use client\"\n\nimport {\n   Check,\n   ChevronRight,\n   ChevronsUpDown,\n   GalleryVerticalEnd,\n   Search,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   const [selectedVersion, setSelectedVersion] = React.useState(\n      data.versions[0],\n   )\n\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                                 <GalleryVerticalEnd className=\"size-4\" />\n                              </div>\n                              <div className=\"flex flex-col gap-0.5 leading-none\">\n                                 <span className=\"font-semibold\">\n                                    Documentation\n                                 </span>\n                                 <span className=\"\">v{selectedVersion}</span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                           align=\"start\"\n                        >\n                           {data.versions.map((version) => (\n                              <DropdownMenuItem\n                                 key={version}\n                                 onSelect={() => setSelectedVersion(version)}\n                              >\n                                 v{version}{\" \"}\n                                 {version === selectedVersion && (\n                                    <Check className=\"ml-auto\" />\n                                 )}\n                              </DropdownMenuItem>\n                           ))}\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n               <form>\n                  <SidebarGroup className=\"py-0\">\n                     <SidebarGroupContent className=\"relative\">\n                        <Label htmlFor=\"search\" className=\"sr-only\">\n                           Search\n                        </Label>\n                        <SidebarInput\n                           id=\"search\"\n                           placeholder=\"Search the docs...\"\n                           className=\"pl-8\"\n                        />\n                        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               </form>\n            </SidebarHeader>\n            <SidebarContent className=\"gap-0\">\n               {/* We create a collapsible SidebarGroup for each parent. */}\n               {data.navMain.map((item) => (\n                  <Collapsible\n                     key={item.title}\n                     title={item.title}\n                     defaultOpen\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroup>\n                        <SidebarGroupLabel\n                           asChild\n                           className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                        >\n                           <CollapsibleTrigger>\n                              {item.title}{\" \"}\n                              <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                           </CollapsibleTrigger>\n                        </SidebarGroupLabel>\n                        <CollapsibleContent>\n                           <SidebarGroupContent>\n                              <SidebarMenu>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuItem key={item.title}>\n                                       <SidebarMenuButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </CollapsibleContent>\n                     </SidebarGroup>\n                  </Collapsible>\n               ))}\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-03.json b/apps/web/public/v0/styles/miami/v0-sidebar-03.json
new file mode 100644
index 00000000..83221c58
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-03.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-03",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-03.tsx",
+      "content": "\"use client\"\n\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n               <div className=\"flex items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-04.json b/apps/web/public/v0/styles/miami/v0-sidebar-04.json
new file mode 100644
index 00000000..0338f141
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-04.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-04",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-04.tsx",
+      "content": "\"use client\"\n\nimport { GalleryVerticalEnd } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"19rem\",\n            } as React.CSSProperties\n         }\n      >\n         <Sidebar variant=\"floating\">\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu className=\"gap-2\">\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-05.json b/apps/web/public/v0/styles/miami/v0-sidebar-05.json
new file mode 100644
index 00000000..e27f898c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-05.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-05",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-05.tsx",
+      "content": "import { GalleryVerticalEnd, Minus, Plus, Search } from \"lucide-react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Component() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n               <form>\n                  <SidebarGroup className=\"py-0\">\n                     <SidebarGroupContent className=\"relative\">\n                        <Label htmlFor=\"search\" className=\"sr-only\">\n                           Search\n                        </Label>\n                        <SidebarInput\n                           id=\"search\"\n                           placeholder=\"Search the docs...\"\n                           className=\"pl-8\"\n                        />\n                        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n                     </SidebarGroupContent>\n                  </SidebarGroup>\n               </form>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu>\n                     {data.navMain.map((item, index) => (\n                        <Collapsible\n                           key={item.title}\n                           defaultOpen={index === 1}\n                           className=\"group/collapsible\"\n                        >\n                           <SidebarMenuItem>\n                              <CollapsibleTrigger asChild>\n                                 <SidebarMenuButton>\n                                    {item.title}{\" \"}\n                                    <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                                    <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                                 </SidebarMenuButton>\n                              </CollapsibleTrigger>\n                              {item.items?.length ? (\n                                 <CollapsibleContent>\n                                    <SidebarMenuSub>\n                                       {item.items.map((item) => (\n                                          <SidebarMenuSubItem key={item.title}>\n                                             <SidebarMenuSubButton\n                                                asChild\n                                                isActive={item.isActive}\n                                             >\n                                                <a href={item.url}>\n                                                   {item.title}\n                                                </a>\n                                             </SidebarMenuSubButton>\n                                          </SidebarMenuSubItem>\n                                       ))}\n                                    </SidebarMenuSub>\n                                 </CollapsibleContent>\n                              ) : null}\n                           </SidebarMenuItem>\n                        </Collapsible>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-06.json b/apps/web/public/v0/styles/miami/v0-sidebar-06.json
new file mode 100644
index 00000000..ab7fea49
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-06.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-06",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-06.tsx",
+      "content": "\"use client\"\n\nimport { GalleryVerticalEnd, MoreHorizontal } from \"lucide-react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Card,\n   CardContent,\n   CardDescription,\n   CardHeader,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <Sidebar>\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <GalleryVerticalEnd className=\"size-4\" />\n                           </div>\n                           <div className=\"flex flex-col gap-0.5 leading-none\">\n                              <span className=\"font-semibold\">\n                                 Documentation\n                              </span>\n                              <span className=\"\">v1.0.0</span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <DropdownMenu key={item.title}>\n                           <SidebarMenuItem>\n                              <DropdownMenuTrigger asChild>\n                                 <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                                    {item.title}{\" \"}\n                                    <MoreHorizontal className=\"ml-auto\" />\n                                 </SidebarMenuButton>\n                              </DropdownMenuTrigger>\n                              {item.items?.length ? (\n                                 <DropdownMenuContent\n                                    side=\"bottom\"\n                                    align=\"end\"\n                                    className=\"min-w-56 rounded-lg\"\n                                 >\n                                    {item.items.map((item) => (\n                                       <DropdownMenuItem\n                                          asChild\n                                          key={item.title}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </DropdownMenuItem>\n                                    ))}\n                                 </DropdownMenuContent>\n                              ) : null}\n                           </SidebarMenuItem>\n                        </DropdownMenu>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <div className=\"p-1\">\n                  <Card className=\"shadow-none\">\n                     <form>\n                        <CardHeader className=\"p-4 pb-0\">\n                           <CardTitle className=\"text-sm\">\n                              Subscribe to our newsletter\n                           </CardTitle>\n                           <CardDescription>\n                              Opt-in to receive updates and news about the\n                              sidebar.\n                           </CardDescription>\n                        </CardHeader>\n                        <CardContent className=\"grid gap-2.5 p-4\">\n                           <SidebarInput type=\"email\" placeholder=\"Email\" />\n                           <Button\n                              className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n                              size=\"sm\"\n                           >\n                              Subscribe\n                           </Button>\n                        </CardContent>\n                     </form>\n                  </Card>\n               </div>\n            </SidebarFooter>\n            <SidebarRail />\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-07.json b/apps/web/public/v0/styles/miami/v0-sidebar-07.json
new file mode 100644
index 00000000..c7c97a66
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-07.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-07",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-07.tsx",
+      "content": "\"use client\"\n\nimport {\n   AudioWaveform,\n   BadgeCheck,\n   Bell,\n   BookOpen,\n   Bot,\n   ChevronRight,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   Folder,\n   Forward,\n   Frame,\n   GalleryVerticalEnd,\n   LogOut,\n   Map,\n   MoreHorizontal,\n   PieChart,\n   Plus,\n   Settings2,\n   Sparkles,\n   SquareTerminal,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: GalleryVerticalEnd,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport default function Page() {\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 asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                                 <activeTeam.logo className=\"size-4\" />\n                              </div>\n                              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                 <span className=\"truncate font-semibold\">\n                                    {activeTeam.name}\n                                 </span>\n                                 <span className=\"truncate text-xs\">\n                                    {activeTeam.plan}\n                                 </span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                           align=\"start\"\n                           side=\"bottom\"\n                           sideOffset={4}\n                        >\n                           <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                              Teams\n                           </DropdownMenuLabel>\n                           {data.teams.map((team, index) => (\n                              <DropdownMenuItem\n                                 key={team.name}\n                                 onClick={() => setActiveTeam(team)}\n                                 className=\"gap-2 p-2\"\n                              >\n                                 <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                                    <team.logo className=\"size-4 shrink-0\" />\n                                 </div>\n                                 {team.name}\n                                 <DropdownMenuShortcut>\n                                    ⌘{index + 1}\n                                 </DropdownMenuShortcut>\n                              </DropdownMenuItem>\n                           ))}\n                           <DropdownMenuSeparator />\n                           <DropdownMenuItem className=\"gap-2 p-2\">\n                              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                                 <Plus className=\"size-4\" />\n                              </div>\n                              <div className=\"font-medium text-muted-foreground\">\n                                 Add team\n                              </div>\n                           </DropdownMenuItem>\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                           asChild\n                           defaultOpen={item.isActive}\n                           className=\"group/collapsible\"\n                        >\n                           <SidebarMenuItem>\n                              <CollapsibleTrigger asChild>\n                                 <SidebarMenuButton tooltip={item.title}>\n                                    {item.icon && <item.icon />}\n                                    <span>{item.title}</span>\n                                    <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                                 </SidebarMenuButton>\n                              </CollapsibleTrigger>\n                              <CollapsibleContent>\n                                 <SidebarMenuSub>\n                                    {item.items?.map((subItem) => (\n                                       <SidebarMenuSubItem key={subItem.title}>\n                                          <SidebarMenuSubButton asChild>\n                                             <a href={subItem.url}>\n                                                <span>{subItem.title}</span>\n                                             </a>\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 asChild>\n                              <a href={item.url}>\n                                 <item.icon />\n                                 <span>{item.name}</span>\n                              </a>\n                           </SidebarMenuButton>\n                           <DropdownMenu>\n                              <DropdownMenuTrigger asChild>\n                                 <SidebarMenuAction showOnHover>\n                                    <MoreHorizontal />\n                                    <span className=\"sr-only\">More</span>\n                                 </SidebarMenuAction>\n                              </DropdownMenuTrigger>\n                              <DropdownMenuContent\n                                 className=\"w-48 rounded-lg\"\n                                 side=\"bottom\"\n                                 align=\"end\"\n                              >\n                                 <DropdownMenuItem>\n                                    <Folder className=\"text-muted-foreground\" />\n                                    <span>View Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuItem>\n                                    <Forward className=\"text-muted-foreground\" />\n                                    <span>Share Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuSeparator />\n                                 <DropdownMenuItem>\n                                    <Trash2 className=\"text-muted-foreground\" />\n                                    <span>Delete Project</span>\n                                 </DropdownMenuItem>\n                              </DropdownMenuContent>\n                           </DropdownMenu>\n                        </SidebarMenuItem>\n                     ))}\n                     <SidebarMenuItem>\n                        <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                           <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                           <span>More</span>\n                        </SidebarMenuButton>\n                     </SidebarMenuItem>\n                  </SidebarMenu>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <Avatar className=\"h-8 w-8 rounded-lg\">\n                                 <AvatarImage\n                                    src={data.user.avatar}\n                                    alt={data.user.name}\n                                 />\n                                 <AvatarFallback className=\"rounded-lg\">\n                                    CN\n                                 </AvatarFallback>\n                              </Avatar>\n                              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                 <span className=\"truncate font-semibold\">\n                                    {data.user.name}\n                                 </span>\n                                 <span className=\"truncate text-xs\">\n                                    {data.user.email}\n                                 </span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto size-4\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                           side=\"bottom\"\n                           align=\"end\"\n                           sideOffset={4}\n                        >\n                           <DropdownMenuLabel className=\"p-0 font-normal\">\n                              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                                 <Avatar className=\"h-8 w-8 rounded-lg\">\n                                    <AvatarImage\n                                       src={data.user.avatar}\n                                       alt={data.user.name}\n                                    />\n                                    <AvatarFallback className=\"rounded-lg\">\n                                       CN\n                                    </AvatarFallback>\n                                 </Avatar>\n                                 <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                    <span className=\"truncate font-semibold\">\n                                       {data.user.name}\n                                    </span>\n                                    <span className=\"truncate text-xs\">\n                                       {data.user.email}\n                                    </span>\n                                 </div>\n                              </div>\n                           </DropdownMenuLabel>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <Sparkles />\n                                 Upgrade to Pro\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <BadgeCheck />\n                                 Account\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <CreditCard />\n                                 Billing\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <Bell />\n                                 Notifications\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuItem>\n                              <LogOut />\n                              Log out\n                           </DropdownMenuItem>\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 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                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-08.json b/apps/web/public/v0/styles/miami/v0-sidebar-08.json
new file mode 100644
index 00000000..77d5431f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-08.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-08",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-08.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   BookOpen,\n   Bot,\n   ChevronRight,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   Folder,\n   Frame,\n   LifeBuoy,\n   LogOut,\n   Map,\n   MoreHorizontal,\n   PieChart,\n   Send,\n   Settings2,\n   Share,\n   Sparkles,\n   SquareTerminal,\n   Trash2,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Playground\",\n         url: \"#\",\n         icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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   navSecondary: [\n      {\n         title: \"Support\",\n         url: \"#\",\n         icon: LifeBuoy,\n      },\n      {\n         title: \"Feedback\",\n         url: \"#\",\n         icon: Send,\n      },\n   ],\n   projects: [\n      {\n         name: \"Design Engineering\",\n         url: \"#\",\n         icon: Frame,\n      },\n      {\n         name: \"Sales & Marketing\",\n         url: \"#\",\n         icon: PieChart,\n      },\n      {\n         name: \"Travel\",\n         url: \"#\",\n         icon: Map,\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <Sidebar variant=\"inset\">\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton size=\"lg\" asChild>\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">\n                                 Acme Inc\n                              </span>\n                              <span className=\"truncate text-xs\">\n                                 Enterprise\n                              </span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\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                           asChild\n                           defaultOpen={item.isActive}\n                        >\n                           <SidebarMenuItem>\n                              <SidebarMenuButton asChild tooltip={item.title}>\n                                 <a href={item.url}>\n                                    <item.icon />\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                              {item.items?.length ? (\n                                 <>\n                                    <CollapsibleTrigger asChild>\n                                       <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                                          <ChevronRight />\n                                          <span className=\"sr-only\">\n                                             Toggle\n                                          </span>\n                                       </SidebarMenuAction>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent>\n                                       <SidebarMenuSub>\n                                          {item.items?.map((subItem) => (\n                                             <SidebarMenuSubItem\n                                                key={subItem.title}\n                                             >\n                                                <SidebarMenuSubButton asChild>\n                                                   <a href={subItem.url}>\n                                                      <span>\n                                                         {subItem.title}\n                                                      </span>\n                                                   </a>\n                                                </SidebarMenuSubButton>\n                                             </SidebarMenuSubItem>\n                                          ))}\n                                       </SidebarMenuSub>\n                                    </CollapsibleContent>\n                                 </>\n                              ) : null}\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 asChild>\n                              <a href={item.url}>\n                                 <item.icon />\n                                 <span>{item.name}</span>\n                              </a>\n                           </SidebarMenuButton>\n                           <DropdownMenu>\n                              <DropdownMenuTrigger asChild>\n                                 <SidebarMenuAction showOnHover>\n                                    <MoreHorizontal />\n                                    <span className=\"sr-only\">More</span>\n                                 </SidebarMenuAction>\n                              </DropdownMenuTrigger>\n                              <DropdownMenuContent\n                                 className=\"w-48\"\n                                 side=\"bottom\"\n                                 align=\"end\"\n                              >\n                                 <DropdownMenuItem>\n                                    <Folder className=\"text-muted-foreground\" />\n                                    <span>View Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuItem>\n                                    <Share className=\"text-muted-foreground\" />\n                                    <span>Share Project</span>\n                                 </DropdownMenuItem>\n                                 <DropdownMenuSeparator />\n                                 <DropdownMenuItem>\n                                    <Trash2 className=\"text-muted-foreground\" />\n                                    <span>Delete Project</span>\n                                 </DropdownMenuItem>\n                              </DropdownMenuContent>\n                           </DropdownMenu>\n                        </SidebarMenuItem>\n                     ))}\n                     <SidebarMenuItem>\n                        <SidebarMenuButton>\n                           <MoreHorizontal />\n                           <span>More</span>\n                        </SidebarMenuButton>\n                     </SidebarMenuItem>\n                  </SidebarMenu>\n               </SidebarGroup>\n               <SidebarGroup className=\"mt-auto\">\n                  <SidebarGroupContent>\n                     <SidebarMenu>\n                        {data.navSecondary.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton asChild size=\"sm\">\n                                 <a href={item.url}>\n                                    <item.icon />\n                                    <span>{item.title}</span>\n                                 </a>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <DropdownMenu>\n                        <DropdownMenuTrigger asChild>\n                           <SidebarMenuButton\n                              size=\"lg\"\n                              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                           >\n                              <Avatar className=\"h-8 w-8 rounded-lg\">\n                                 <AvatarImage\n                                    src={data.user.avatar}\n                                    alt={data.user.name}\n                                 />\n                                 <AvatarFallback className=\"rounded-lg\">\n                                    CN\n                                 </AvatarFallback>\n                              </Avatar>\n                              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                 <span className=\"truncate font-semibold\">\n                                    {data.user.name}\n                                 </span>\n                                 <span className=\"truncate text-xs\">\n                                    {data.user.email}\n                                 </span>\n                              </div>\n                              <ChevronsUpDown className=\"ml-auto size-4\" />\n                           </SidebarMenuButton>\n                        </DropdownMenuTrigger>\n                        <DropdownMenuContent\n                           className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                           side=\"bottom\"\n                           align=\"end\"\n                           sideOffset={4}\n                        >\n                           <DropdownMenuLabel className=\"p-0 font-normal\">\n                              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                                 <Avatar className=\"h-8 w-8 rounded-lg\">\n                                    <AvatarImage\n                                       src={data.user.avatar}\n                                       alt={data.user.name}\n                                    />\n                                    <AvatarFallback className=\"rounded-lg\">\n                                       CN\n                                    </AvatarFallback>\n                                 </Avatar>\n                                 <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                                    <span className=\"truncate font-semibold\">\n                                       {data.user.name}\n                                    </span>\n                                    <span className=\"truncate text-xs\">\n                                       {data.user.email}\n                                    </span>\n                                 </div>\n                              </div>\n                           </DropdownMenuLabel>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <Sparkles />\n                                 Upgrade to Pro\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuGroup>\n                              <DropdownMenuItem>\n                                 <BadgeCheck />\n                                 Account\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <CreditCard />\n                                 Billing\n                              </DropdownMenuItem>\n                              <DropdownMenuItem>\n                                 <Bell />\n                                 Notifications\n                              </DropdownMenuItem>\n                           </DropdownMenuGroup>\n                           <DropdownMenuSeparator />\n                           <DropdownMenuItem>\n                              <LogOut />\n                              Log out\n                           </DropdownMenuItem>\n                        </DropdownMenuContent>\n                     </DropdownMenu>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarFooter>\n         </Sidebar>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2\">\n               <div className=\"flex items-center gap-2 px-4\">\n                  <SidebarTrigger className=\"-ml-1\" />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem className=\"hidden md:block\">\n                           <BreadcrumbLink href=\"#\">\n                              Building Your Application\n                           </BreadcrumbLink>\n                        </BreadcrumbItem>\n                        <BreadcrumbSeparator className=\"hidden md:block\" />\n                        <BreadcrumbItem>\n                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\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=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-09.json b/apps/web/public/v0/styles/miami/v0-sidebar-09.json
new file mode 100644
index 00000000..95742249
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-09.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-09",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-09.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArchiveX,\n   BadgeCheck,\n   Bell,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   File,\n   Inbox,\n   LogOut,\n   Send,\n   Sparkles,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarHeader,\n   SidebarInput,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarTrigger,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\nimport { Switch } from \"@/components/ui/switch\"\n\n// This is sample data\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   navMain: [\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         isActive: true,\n      },\n      {\n         title: \"Drafts\",\n         url: \"#\",\n         icon: File,\n         isActive: false,\n      },\n      {\n         title: \"Sent\",\n         url: \"#\",\n         icon: Send,\n         isActive: false,\n      },\n      {\n         title: \"Junk\",\n         url: \"#\",\n         icon: ArchiveX,\n         isActive: false,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n         isActive: false,\n      },\n   ],\n   mails: [\n      {\n         name: \"William Smith\",\n         email: \"williamsmith@example.com\",\n         subject: \"Meeting Tomorrow\",\n         date: \"09:34 AM\",\n         teaser:\n            \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n      },\n      {\n         name: \"Alice Smith\",\n         email: \"alicesmith@example.com\",\n         subject: \"Re: Project Update\",\n         date: \"Yesterday\",\n         teaser:\n            \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n      },\n      {\n         name: \"Bob Johnson\",\n         email: \"bobjohnson@example.com\",\n         subject: \"Weekend Plans\",\n         date: \"2 days ago\",\n         teaser:\n            \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n      },\n      {\n         name: \"Emily Davis\",\n         email: \"emilydavis@example.com\",\n         subject: \"Re: Question about Budget\",\n         date: \"2 days ago\",\n         teaser:\n            \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n      },\n      {\n         name: \"Michael Wilson\",\n         email: \"michaelwilson@example.com\",\n         subject: \"Important Announcement\",\n         date: \"1 week ago\",\n         teaser:\n            \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n      },\n      {\n         name: \"Sarah Brown\",\n         email: \"sarahbrown@example.com\",\n         subject: \"Re: Feedback on Proposal\",\n         date: \"1 week ago\",\n         teaser:\n            \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n      },\n      {\n         name: \"David Lee\",\n         email: \"davidlee@example.com\",\n         subject: \"New Project Idea\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n      },\n      {\n         name: \"Olivia Wilson\",\n         email: \"oliviawilson@example.com\",\n         subject: \"Vacation Plans\",\n         date: \"1 week ago\",\n         teaser:\n            \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n      },\n      {\n         name: \"James Martin\",\n         email: \"jamesmartin@example.com\",\n         subject: \"Re: Conference Registration\",\n         date: \"1 week ago\",\n         teaser:\n            \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n      },\n      {\n         name: \"Sophia White\",\n         email: \"sophiawhite@example.com\",\n         subject: \"Team Dinner\",\n         date: \"1 week ago\",\n         teaser:\n            \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider\n         style={\n            {\n               \"--sidebar-width\": \"350px\",\n            } as React.CSSProperties\n         }\n      >\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Inbox</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               {Array.from({ length: 24 }).map((_, index) => (\n                  <div\n                     key={index}\n                     className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n                  />\n               ))}\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   // Note: I'm using state to show active item.\n   // IRL you should use the url/router.\n   const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n   const [mails, setMails] = React.useState(data.mails)\n   const { setOpen } = useSidebar()\n\n   return (\n      <Sidebar\n         collapsible=\"icon\"\n         className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n         {...props}\n      >\n         {/* This is the first sidebar */}\n         {/* We disable collapsible and adjust width to icon. */}\n         {/* This will make the sidebar appear as icons. */}\n         <Sidebar\n            collapsible=\"none\"\n            className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n         >\n            <SidebarHeader>\n               <SidebarMenu>\n                  <SidebarMenuItem>\n                     <SidebarMenuButton\n                        size=\"lg\"\n                        asChild\n                        className=\"md:h-8 md:p-0\"\n                     >\n                        <a href=\"#\">\n                           <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                              <Command className=\"size-4\" />\n                           </div>\n                           <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                              <span className=\"truncate font-semibold\">\n                                 Acme Inc\n                              </span>\n                              <span className=\"truncate text-xs\">\n                                 Enterprise\n                              </span>\n                           </div>\n                        </a>\n                     </SidebarMenuButton>\n                  </SidebarMenuItem>\n               </SidebarMenu>\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup>\n                  <SidebarGroupContent className=\"px-1.5 md:px-0\">\n                     <SidebarMenu>\n                        {data.navMain.map((item) => (\n                           <SidebarMenuItem key={item.title}>\n                              <SidebarMenuButton\n                                 tooltip={{\n                                    children: item.title,\n                                    hidden: false,\n                                 }}\n                                 onClick={() => {\n                                    setActiveItem(item)\n                                    const mail = data.mails.sort(\n                                       () => Math.random() - 0.5,\n                                    )\n                                    setMails(\n                                       mail.slice(\n                                          0,\n                                          Math.max(\n                                             5,\n                                             Math.floor(Math.random() * 10) + 1,\n                                          ),\n                                       ),\n                                    )\n                                    setOpen(true)\n                                 }}\n                                 isActive={activeItem.title === item.title}\n                                 className=\"px-2.5 md:px-2\"\n                              >\n                                 <item.icon />\n                                 <span>{item.title}</span>\n                              </SidebarMenuButton>\n                           </SidebarMenuItem>\n                        ))}\n                     </SidebarMenu>\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n            <SidebarFooter>\n               <NavUser user={data.user} />\n            </SidebarFooter>\n         </Sidebar>\n\n         {/* This is the second sidebar */}\n         {/* We disable collapsible and let it fill remaining space */}\n         <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n            <SidebarHeader className=\"gap-3.5 border-b p-4\">\n               <div className=\"flex w-full items-center justify-between\">\n                  <div className=\"text-base font-medium text-foreground\">\n                     {activeItem.title}\n                  </div>\n                  <Label className=\"flex items-center gap-2 text-sm\">\n                     <span>Unreads</span>\n                     <Switch className=\"shadow-none\" />\n                  </Label>\n               </div>\n               <SidebarInput placeholder=\"Type to search...\" />\n            </SidebarHeader>\n            <SidebarContent>\n               <SidebarGroup className=\"px-0\">\n                  <SidebarGroupContent>\n                     {mails.map((mail) => (\n                        <a\n                           href=\"#\"\n                           key={mail.email}\n                           className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                        >\n                           <div className=\"flex w-full items-center gap-2\">\n                              <span>{mail.name}</span>{\" \"}\n                              <span className=\"ml-auto text-xs\">\n                                 {mail.date}\n                              </span>\n                           </div>\n                           <span className=\"font-medium\">{mail.subject}</span>\n                           <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                              {mail.teaser}\n                           </span>\n                        </a>\n                     ))}\n                  </SidebarGroupContent>\n               </SidebarGroup>\n            </SidebarContent>\n         </Sidebar>\n      </Sidebar>\n   )\n}\n\nfunction NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"end\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-10.json b/apps/web/public/v0/styles/miami/v0-sidebar-10.json
new file mode 100644
index 00000000..eff17477
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-10.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-10",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-10.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowDown,\n   ArrowUp,\n   ArrowUpRight,\n   AudioWaveform,\n   Bell,\n   Blocks,\n   Calendar,\n   ChevronDown,\n   ChevronRight,\n   Command,\n   Copy,\n   CornerUpLeft,\n   CornerUpRight,\n   FileText,\n   GalleryVerticalEnd,\n   Home,\n   Inbox,\n   LineChart,\n   Link,\n   type LucideIcon,\n   MessageCircleQuestion,\n   MoreHorizontal,\n   Plus,\n   Search,\n   Settings2,\n   Sparkles,\n   Star,\n   StarOff,\n   Trash,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n   Popover,\n   PopoverContent,\n   PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: Calendar,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n   actions: [\n      [\n         {\n            label: \"Customize Page\",\n            icon: Settings2,\n         },\n         {\n            label: \"Turn into wiki\",\n            icon: FileText,\n         },\n      ],\n      [\n         {\n            label: \"Copy Link\",\n            icon: Link,\n         },\n         {\n            label: \"Duplicate\",\n            icon: Copy,\n         },\n         {\n            label: \"Move to\",\n            icon: CornerUpRight,\n         },\n         {\n            label: \"Move to Trash\",\n            icon: Trash2,\n         },\n      ],\n      [\n         {\n            label: \"Undo\",\n            icon: CornerUpLeft,\n         },\n         {\n            label: \"View analytics\",\n            icon: LineChart,\n         },\n         {\n            label: \"Version History\",\n            icon: GalleryVerticalEnd,\n         },\n         {\n            label: \"Show delete pages\",\n            icon: Trash,\n         },\n         {\n            label: \"Notifications\",\n            icon: Bell,\n         },\n      ],\n      [\n         {\n            label: \"Import\",\n            icon: ArrowUp,\n         },\n         {\n            label: \"Export\",\n            icon: ArrowDown,\n         },\n      ],\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-14 shrink-0 items-center gap-2\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n               <div className=\"ml-auto px-3\">\n                  <NavActions actions={data.actions} />\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={data.teams} />\n            <NavMain items={data.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={data.favorites} />\n            <NavWorkspaces workspaces={data.workspaces} />\n            <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction NavActions({\n   actions,\n}: {\n   actions: {\n      label: string\n      icon: LucideIcon\n   }[][]\n}) {\n   const [isOpen, setIsOpen] = React.useState(false)\n\n   React.useEffect(() => {\n      setIsOpen(true)\n   }, [])\n\n   return (\n      <div className=\"flex items-center gap-2 text-sm\">\n         <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n            Edit Oct 08\n         </div>\n         <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n            <Star />\n         </Button>\n         <Popover open={isOpen} onOpenChange={setIsOpen}>\n            <PopoverTrigger asChild>\n               <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-7 w-7 data-[state=open]:bg-accent\"\n               >\n                  <MoreHorizontal />\n               </Button>\n            </PopoverTrigger>\n            <PopoverContent\n               className=\"w-56 overflow-hidden rounded-lg p-0\"\n               align=\"end\"\n            >\n               <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n                  <SidebarContent>\n                     {actions.map((group, index) => (\n                        <SidebarGroup\n                           key={index}\n                           className=\"border-b last:border-none\"\n                        >\n                           <SidebarGroupContent className=\"gap-0\">\n                              <SidebarMenu>\n                                 {group.map((item, index) => (\n                                    <SidebarMenuItem key={index}>\n                                       <SidebarMenuButton>\n                                          <item.icon />{\" \"}\n                                          <span>{item.label}</span>\n                                       </SidebarMenuButton>\n                                    </SidebarMenuItem>\n                                 ))}\n                              </SidebarMenu>\n                           </SidebarGroupContent>\n                        </SidebarGroup>\n                     ))}\n                  </SidebarContent>\n               </Sidebar>\n            </PopoverContent>\n         </Popover>\n      </div>\n   )\n}\n\nfunction NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n\nfunction NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n\nfunction NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-11.json b/apps/web/public/v0/styles/miami/v0-sidebar-11.json
new file mode 100644
index 00000000..67e26a07
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-11.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-11",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-11.tsx",
+      "content": "import { ChevronRight, File, Folder } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   changes: [\n      {\n         file: \"README.md\",\n         state: \"M\",\n      },\n      {\n         file: \"api/hello/route.ts\",\n         state: \"U\",\n      },\n      {\n         file: \"app/layout.tsx\",\n         state: \"M\",\n      },\n   ],\n   tree: [\n      [\n         \"app\",\n         [\n            \"api\",\n            [\"hello\", [\"route.ts\"]],\n            \"page.tsx\",\n            \"layout.tsx\",\n            [\"blog\", [\"page.tsx\"]],\n         ],\n      ],\n      [\n         \"components\",\n         [\"ui\", \"button.tsx\", \"card.tsx\"],\n         \"header.tsx\",\n         \"footer.tsx\",\n      ],\n      [\"lib\", [\"util.ts\"]],\n      [\"public\", \"favicon.ico\", \"vercel.svg\"],\n      \".eslintrc.json\",\n      \".gitignore\",\n      \"next.config.js\",\n      \"tailwind.config.js\",\n      \"package.json\",\n      \"README.md\",\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>button.tsx</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Changes</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.changes.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                           <SidebarMenuButton>\n                              <File />\n                              {item.file}\n                           </SidebarMenuButton>\n                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n            <SidebarGroup>\n               <SidebarGroupLabel>Files</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.tree.map((item, index) => (\n                        <Tree key={index} item={item} />\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n   const [name, ...items] = Array.isArray(item) ? item : [item]\n\n   if (!items.length) {\n      return (\n         <SidebarMenuButton\n            isActive={name === \"button.tsx\"}\n            className=\"data-[active=true]:bg-transparent\"\n         >\n            <File />\n            {name}\n         </SidebarMenuButton>\n      )\n   }\n\n   return (\n      <SidebarMenuItem>\n         <Collapsible\n            className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n            defaultOpen={name === \"components\" || name === \"ui\"}\n         >\n            <CollapsibleTrigger asChild>\n               <SidebarMenuButton>\n                  <ChevronRight className=\"transition-transform\" />\n                  <Folder />\n                  {name}\n               </SidebarMenuButton>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n               <SidebarMenuSub>\n                  {items.map((subItem, index) => (\n                     <Tree key={index} item={subItem} />\n                  ))}\n               </SidebarMenuSub>\n            </CollapsibleContent>\n         </Collapsible>\n      </SidebarMenuItem>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-12.json b/apps/web/public/v0/styles/miami/v0-sidebar-12.json
new file mode 100644
index 00000000..43653d1f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-12.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-12",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-12.tsx",
+      "content": "\"use client\"\n\nimport {\n   BadgeCheck,\n   Bell,\n   Check,\n   ChevronRight,\n   ChevronsUpDown,\n   CreditCard,\n   LogOut,\n   Plus,\n   Sparkles,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <AppSidebar />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n               <SidebarTrigger className=\"-ml-1\" />\n               <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>October 2024</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n                  {Array.from({ length: 20 }).map((_, i) => (\n                     <div\n                        key={i}\n                        className=\"aspect-square rounded-xl bg-muted/50\"\n                     />\n                  ))}\n               </div>\n            </div>\n         </SidebarInset>\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={data.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={data.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n\nfunction DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-13.json b/apps/web/public/v0/styles/miami/v0-sidebar-13.json
new file mode 100644
index 00000000..1908925c
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-13.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-13",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-13.tsx",
+      "content": "\"use client\"\n\nimport {\n   Bell,\n   Check,\n   Globe,\n   Home,\n   Keyboard,\n   Link,\n   Lock,\n   Menu,\n   MessageCircle,\n   Paintbrush,\n   Settings,\n   Video,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   Dialog,\n   DialogContent,\n   DialogDescription,\n   DialogTitle,\n   DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarProvider,\n} from \"@/components/ui/sidebar\"\nconst data = {\n   nav: [\n      { name: \"Notifications\", icon: Bell },\n      { name: \"Navigation\", icon: Menu },\n      { name: \"Home\", icon: Home },\n      { name: \"Appearance\", icon: Paintbrush },\n      { name: \"Messages & media\", icon: MessageCircle },\n      { name: \"Language & region\", icon: Globe },\n      { name: \"Accessibility\", icon: Keyboard },\n      { name: \"Mark as read\", icon: Check },\n      { name: \"Audio & video\", icon: Video },\n      { name: \"Connected accounts\", icon: Link },\n      { name: \"Privacy & visibility\", icon: Lock },\n      { name: \"Advanced\", icon: Settings },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <div className=\"flex h-svh items-center justify-center\">\n         <SettingsDialog />\n      </div>\n   )\n}\n\nfunction SettingsDialog() {\n   const [open, setOpen] = React.useState(true)\n\n   return (\n      <Dialog open={open} onOpenChange={setOpen}>\n         <DialogTrigger asChild>\n            <Button size=\"sm\">Open Dialog</Button>\n         </DialogTrigger>\n         <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n            <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n            <DialogDescription className=\"sr-only\">\n               Customize your settings here.\n            </DialogDescription>\n            <SidebarProvider className=\"items-start\">\n               <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n                  <SidebarContent>\n                     <SidebarGroup>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {data.nav.map((item) => (\n                                 <SidebarMenuItem key={item.name}>\n                                    <SidebarMenuButton\n                                       asChild\n                                       isActive={\n                                          item.name === \"Messages & media\"\n                                       }\n                                    >\n                                       <a href=\"#\">\n                                          <item.icon />\n                                          <span>{item.name}</span>\n                                       </a>\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </SidebarGroup>\n                  </SidebarContent>\n               </Sidebar>\n               <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n                  <header className=\"flex h-16 shrink-0 items-center gap-2 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                        <Breadcrumb>\n                           <BreadcrumbList>\n                              <BreadcrumbItem className=\"hidden md:block\">\n                                 <BreadcrumbLink href=\"#\">\n                                    Settings\n                                 </BreadcrumbLink>\n                              </BreadcrumbItem>\n                              <BreadcrumbSeparator className=\"hidden md:block\" />\n                              <BreadcrumbItem>\n                                 <BreadcrumbPage>\n                                    Messages & media\n                                 </BreadcrumbPage>\n                              </BreadcrumbItem>\n                           </BreadcrumbList>\n                        </Breadcrumb>\n                     </div>\n                  </header>\n                  <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n                     {Array.from({ length: 10 }).map((_, i) => (\n                        <div\n                           key={i}\n                           className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                        />\n                     ))}\n                  </div>\n               </main>\n            </SidebarProvider>\n         </DialogContent>\n      </Dialog>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-14.json b/apps/web/public/v0/styles/miami/v0-sidebar-14.json
new file mode 100644
index 00000000..0eeb51f4
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-14.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-14",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-14.tsx",
+      "content": "import type * as React from \"react\"\n\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbLink,\n   BreadcrumbList,\n   BreadcrumbPage,\n   BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n   navMain: [\n      {\n         title: \"Getting Started\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Installation\",\n               url: \"#\",\n            },\n            {\n               title: \"Project Structure\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Building Your Application\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Routing\",\n               url: \"#\",\n            },\n            {\n               title: \"Data Fetching\",\n               url: \"#\",\n               isActive: true,\n            },\n            {\n               title: \"Rendering\",\n               url: \"#\",\n            },\n            {\n               title: \"Caching\",\n               url: \"#\",\n            },\n            {\n               title: \"Styling\",\n               url: \"#\",\n            },\n            {\n               title: \"Optimizing\",\n               url: \"#\",\n            },\n            {\n               title: \"Configuring\",\n               url: \"#\",\n            },\n            {\n               title: \"Testing\",\n               url: \"#\",\n            },\n            {\n               title: \"Authentication\",\n               url: \"#\",\n            },\n            {\n               title: \"Deploying\",\n               url: \"#\",\n            },\n            {\n               title: \"Upgrading\",\n               url: \"#\",\n            },\n            {\n               title: \"Examples\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"API Reference\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Components\",\n               url: \"#\",\n            },\n            {\n               title: \"File Conventions\",\n               url: \"#\",\n            },\n            {\n               title: \"Functions\",\n               url: \"#\",\n            },\n            {\n               title: \"next.config.js Options\",\n               url: \"#\",\n            },\n            {\n               title: \"CLI\",\n               url: \"#\",\n            },\n            {\n               title: \"Edge Runtime\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Architecture\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Accessibility\",\n               url: \"#\",\n            },\n            {\n               title: \"Fast Refresh\",\n               url: \"#\",\n            },\n            {\n               title: \"Next.js Compiler\",\n               url: \"#\",\n            },\n            {\n               title: \"Supported Browsers\",\n               url: \"#\",\n            },\n            {\n               title: \"Turbopack\",\n               url: \"#\",\n            },\n         ],\n      },\n      {\n         title: \"Community\",\n         url: \"#\",\n         items: [\n            {\n               title: \"Contribution Guide\",\n               url: \"#\",\n            },\n         ],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarInset>\n            <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n               <Breadcrumb>\n                  <BreadcrumbList>\n                     <BreadcrumbItem className=\"hidden md:block\">\n                        <BreadcrumbLink href=\"#\">\n                           Building Your Application\n                        </BreadcrumbLink>\n                     </BreadcrumbItem>\n                     <BreadcrumbSeparator className=\"hidden md:block\" />\n                     <BreadcrumbItem>\n                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                     </BreadcrumbItem>\n                  </BreadcrumbList>\n               </Breadcrumb>\n               <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                  <div className=\"aspect-video rounded-xl bg-muted/50\" />\n               </div>\n               <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n         </SidebarInset>\n         <AppSidebar side=\"right\" />\n      </SidebarProvider>\n   )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar {...props}>\n         <SidebarContent>\n            <SidebarGroup>\n               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n               <SidebarGroupContent>\n                  <SidebarMenu>\n                     {data.navMain.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                           <SidebarMenuButton asChild>\n                              <a href={item.url} className=\"font-medium\">\n                                 {item.title}\n                              </a>\n                           </SidebarMenuButton>\n                           {item.items?.length ? (\n                              <SidebarMenuSub>\n                                 {item.items.map((item) => (\n                                    <SidebarMenuSubItem key={item.title}>\n                                       <SidebarMenuSubButton\n                                          asChild\n                                          isActive={item.isActive}\n                                       >\n                                          <a href={item.url}>{item.title}</a>\n                                       </SidebarMenuSubButton>\n                                    </SidebarMenuSubItem>\n                                 ))}\n                              </SidebarMenuSub>\n                           ) : null}\n                        </SidebarMenuItem>\n                     ))}\n                  </SidebarMenu>\n               </SidebarGroupContent>\n            </SidebarGroup>\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/v0-sidebar-15.json b/apps/web/public/v0/styles/miami/v0-sidebar-15.json
new file mode 100644
index 00000000..c14933d6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/v0-sidebar-15.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "v0-sidebar-15",
+  "type": "registry:internal",
+  "author": "nyxb (https://nyxbui.design)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-15.tsx",
+      "content": "\"use client\"\n\nimport {\n   ArrowUpRight,\n   AudioWaveform,\n   BadgeCheck,\n   Bell,\n   Blocks,\n   CalendarIcon,\n   Check,\n   ChevronDown,\n   ChevronRight,\n   ChevronsUpDown,\n   Command,\n   CreditCard,\n   Home,\n   Inbox,\n   Link,\n   LogOut,\n   type LucideIcon,\n   MessageCircleQuestion,\n   MoreHorizontal,\n   Plus,\n   Search,\n   Settings2,\n   Sparkles,\n   StarOff,\n   Trash2,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n   Breadcrumb,\n   BreadcrumbItem,\n   BreadcrumbList,\n   BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n   Collapsible,\n   CollapsibleContent,\n   CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n   DropdownMenu,\n   DropdownMenuContent,\n   DropdownMenuGroup,\n   DropdownMenuItem,\n   DropdownMenuLabel,\n   DropdownMenuSeparator,\n   DropdownMenuShortcut,\n   DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n   Sidebar,\n   SidebarContent,\n   SidebarFooter,\n   SidebarGroup,\n   SidebarGroupContent,\n   SidebarGroupLabel,\n   SidebarHeader,\n   SidebarInset,\n   SidebarMenu,\n   SidebarMenuAction,\n   SidebarMenuBadge,\n   SidebarMenuButton,\n   SidebarMenuItem,\n   SidebarMenuSub,\n   SidebarMenuSubButton,\n   SidebarMenuSubItem,\n   SidebarProvider,\n   SidebarRail,\n   SidebarSeparator,\n   SidebarTrigger,\n   useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst sidebarLeftData = {\n   teams: [\n      {\n         name: \"Acme Inc\",\n         logo: Command,\n         plan: \"Enterprise\",\n      },\n      {\n         name: \"Acme Corp.\",\n         logo: AudioWaveform,\n         plan: \"Startup\",\n      },\n      {\n         name: \"Evil Corp.\",\n         logo: Command,\n         plan: \"Free\",\n      },\n   ],\n   navMain: [\n      {\n         title: \"Search\",\n         url: \"#\",\n         icon: Search,\n      },\n      {\n         title: \"Ask AI\",\n         url: \"#\",\n         icon: Sparkles,\n      },\n      {\n         title: \"Home\",\n         url: \"#\",\n         icon: Home,\n         isActive: true,\n      },\n      {\n         title: \"Inbox\",\n         url: \"#\",\n         icon: Inbox,\n         badge: \"10\",\n      },\n   ],\n   navSecondary: [\n      {\n         title: \"Calendar\",\n         url: \"#\",\n         icon: CalendarIcon,\n      },\n      {\n         title: \"Settings\",\n         url: \"#\",\n         icon: Settings2,\n      },\n      {\n         title: \"Templates\",\n         url: \"#\",\n         icon: Blocks,\n      },\n      {\n         title: \"Trash\",\n         url: \"#\",\n         icon: Trash2,\n      },\n      {\n         title: \"Help\",\n         url: \"#\",\n         icon: MessageCircleQuestion,\n      },\n   ],\n   favorites: [\n      {\n         name: \"Project Management & Task Tracking\",\n         url: \"#\",\n         emoji: \"📊\",\n      },\n      {\n         name: \"Family Recipe Collection & Meal Planning\",\n         url: \"#\",\n         emoji: \"🍳\",\n      },\n      {\n         name: \"Fitness Tracker & Workout Routines\",\n         url: \"#\",\n         emoji: \"💪\",\n      },\n      {\n         name: \"Book Notes & Reading List\",\n         url: \"#\",\n         emoji: \"📚\",\n      },\n      {\n         name: \"Sustainable Gardening Tips & Plant Care\",\n         url: \"#\",\n         emoji: \"🌱\",\n      },\n      {\n         name: \"Language Learning Progress & Resources\",\n         url: \"#\",\n         emoji: \"🗣️\",\n      },\n      {\n         name: \"Home Renovation Ideas & Budget Tracker\",\n         url: \"#\",\n         emoji: \"🏠\",\n      },\n      {\n         name: \"Personal Finance & Investment Portfolio\",\n         url: \"#\",\n         emoji: \"💰\",\n      },\n      {\n         name: \"Movie & TV Show Watchlist with Reviews\",\n         url: \"#\",\n         emoji: \"🎬\",\n      },\n      {\n         name: \"Daily Habit Tracker & Goal Setting\",\n         url: \"#\",\n         emoji: \"✅\",\n      },\n   ],\n   workspaces: [\n      {\n         name: \"Personal Life Management\",\n         emoji: \"🏠\",\n         pages: [\n            {\n               name: \"Daily Journal & Reflection\",\n               url: \"#\",\n               emoji: \"📔\",\n            },\n            {\n               name: \"Health & Wellness Tracker\",\n               url: \"#\",\n               emoji: \"🍏\",\n            },\n            {\n               name: \"Personal Growth & Learning Goals\",\n               url: \"#\",\n               emoji: \"🌟\",\n            },\n         ],\n      },\n      {\n         name: \"Professional Development\",\n         emoji: \"💼\",\n         pages: [\n            {\n               name: \"Career Objectives & Milestones\",\n               url: \"#\",\n               emoji: \"🎯\",\n            },\n            {\n               name: \"Skill Acquisition & Training Log\",\n               url: \"#\",\n               emoji: \"🧠\",\n            },\n            {\n               name: \"Networking Contacts & Events\",\n               url: \"#\",\n               emoji: \"🤝\",\n            },\n         ],\n      },\n      {\n         name: \"Creative Projects\",\n         emoji: \"🎨\",\n         pages: [\n            {\n               name: \"Writing Ideas & Story Outlines\",\n               url: \"#\",\n               emoji: \"✍️\",\n            },\n            {\n               name: \"Art & Design Portfolio\",\n               url: \"#\",\n               emoji: \"🖼️\",\n            },\n            {\n               name: \"Music Composition & Practice Log\",\n               url: \"#\",\n               emoji: \"🎵\",\n            },\n         ],\n      },\n      {\n         name: \"Home Management\",\n         emoji: \"🏡\",\n         pages: [\n            {\n               name: \"Household Budget & Expense Tracking\",\n               url: \"#\",\n               emoji: \"💰\",\n            },\n            {\n               name: \"Home Maintenance Schedule & Tasks\",\n               url: \"#\",\n               emoji: \"🔧\",\n            },\n            {\n               name: \"Family Calendar & Event Planning\",\n               url: \"#\",\n               emoji: \"📅\",\n            },\n         ],\n      },\n      {\n         name: \"Travel & Adventure\",\n         emoji: \"🧳\",\n         pages: [\n            {\n               name: \"Trip Planning & Itineraries\",\n               url: \"#\",\n               emoji: \"🗺️\",\n            },\n            {\n               name: \"Travel Bucket List & Inspiration\",\n               url: \"#\",\n               emoji: \"🌎\",\n            },\n            {\n               name: \"Travel Journal & Photo Gallery\",\n               url: \"#\",\n               emoji: \"📸\",\n            },\n         ],\n      },\n   ],\n}\n\n// This is sample data.\nconst sidebarRightData = {\n   user: {\n      name: \"nyxb\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/nyxb.jpg\",\n   },\n   calendars: [\n      {\n         name: \"My Calendars\",\n         items: [\"Personal\", \"Work\", \"Family\"],\n      },\n      {\n         name: \"Favorites\",\n         items: [\"Holidays\", \"Birthdays\"],\n      },\n      {\n         name: \"Other\",\n         items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n      },\n   ],\n}\n\nexport default function Page() {\n   return (\n      <SidebarProvider>\n         <SidebarLeft />\n         <SidebarInset>\n            <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n               <div className=\"flex flex-1 items-center gap-2 px-3\">\n                  <SidebarTrigger />\n                  <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                  <Breadcrumb>\n                     <BreadcrumbList>\n                        <BreadcrumbItem>\n                           <BreadcrumbPage className=\"line-clamp-1\">\n                              Project Management & Task Tracking\n                           </BreadcrumbPage>\n                        </BreadcrumbItem>\n                     </BreadcrumbList>\n                  </Breadcrumb>\n               </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n               <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n               <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n            </div>\n         </SidebarInset>\n         <SidebarRight />\n      </SidebarProvider>\n   )\n}\n\nfunction SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar className=\"border-r-0\" {...props}>\n         <SidebarHeader>\n            <TeamSwitcher teams={sidebarLeftData.teams} />\n            <NavMain items={sidebarLeftData.navMain} />\n         </SidebarHeader>\n         <SidebarContent>\n            <NavFavorites favorites={sidebarLeftData.favorites} />\n            <NavWorkspaces workspaces={sidebarLeftData.workspaces} />\n            <NavSecondary\n               items={sidebarLeftData.navSecondary}\n               className=\"mt-auto\"\n            />\n         </SidebarContent>\n         <SidebarRail />\n      </Sidebar>\n   )\n}\n\nfunction SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {\n   return (\n      <Sidebar\n         collapsible=\"none\"\n         className=\"sticky hidden lg:flex top-0 h-svh border-l\"\n         {...props}\n      >\n         <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n            <NavUser user={sidebarRightData.user} />\n         </SidebarHeader>\n         <SidebarContent>\n            <DatePicker />\n            <SidebarSeparator className=\"mx-0\" />\n            <Calendars calendars={sidebarRightData.calendars} />\n         </SidebarContent>\n         <SidebarFooter>\n            <SidebarMenu>\n               <SidebarMenuItem>\n                  <SidebarMenuButton>\n                     <Plus />\n                     <span>New Calendar</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarFooter>\n      </Sidebar>\n   )\n}\n\nfunction Calendars({\n   calendars,\n}: {\n   calendars: {\n      name: string\n      items: string[]\n   }[]\n}) {\n   return (\n      <>\n         {calendars.map((calendar, index) => (\n            <React.Fragment key={calendar.name}>\n               <SidebarGroup key={calendar.name} className=\"py-0\">\n                  <Collapsible\n                     defaultOpen={index === 0}\n                     className=\"group/collapsible\"\n                  >\n                     <SidebarGroupLabel\n                        asChild\n                        className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                     >\n                        <CollapsibleTrigger>\n                           {calendar.name}{\" \"}\n                           <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </CollapsibleTrigger>\n                     </SidebarGroupLabel>\n                     <CollapsibleContent>\n                        <SidebarGroupContent>\n                           <SidebarMenu>\n                              {calendar.items.map((item, index) => (\n                                 <SidebarMenuItem key={item}>\n                                    <SidebarMenuButton>\n                                       <div\n                                          data-active={index < 2}\n                                          className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                                       >\n                                          <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                                       </div>\n                                       {item}\n                                    </SidebarMenuButton>\n                                 </SidebarMenuItem>\n                              ))}\n                           </SidebarMenu>\n                        </SidebarGroupContent>\n                     </CollapsibleContent>\n                  </Collapsible>\n               </SidebarGroup>\n               <SidebarSeparator className=\"mx-0\" />\n            </React.Fragment>\n         ))}\n      </>\n   )\n}\n\nfunction DatePicker() {\n   return (\n      <SidebarGroup className=\"px-0\">\n         <SidebarGroupContent>\n            <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavFavorites({\n   favorites,\n}: {\n   favorites: {\n      name: string\n      url: string\n      emoji: string\n   }[]\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n         <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n         <SidebarMenu>\n            {favorites.map((item) => (\n               <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                     <a href={item.url} title={item.name}>\n                        <span>{item.emoji}</span>\n                        <span>{item.name}</span>\n                     </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                     <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                           <MoreHorizontal />\n                           <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                     </DropdownMenuTrigger>\n                     <DropdownMenuContent\n                        className=\"w-56 rounded-lg\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                     >\n                        <DropdownMenuItem>\n                           <StarOff className=\"text-muted-foreground\" />\n                           <span>Remove from Favorites</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Link className=\"text-muted-foreground\" />\n                           <span>Copy Link</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                           <ArrowUpRight className=\"text-muted-foreground\" />\n                           <span>Open in New Tab</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                           <Trash2 className=\"text-muted-foreground\" />\n                           <span>Delete</span>\n                        </DropdownMenuItem>\n                     </DropdownMenuContent>\n                  </DropdownMenu>\n               </SidebarMenuItem>\n            ))}\n            <SidebarMenuItem>\n               <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal />\n                  <span>More</span>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         </SidebarMenu>\n      </SidebarGroup>\n   )\n}\n\nfunction NavMain({\n   items,\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      isActive?: boolean\n   }[]\n}) {\n   return (\n      <SidebarMenu>\n         {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n               <SidebarMenuButton asChild isActive={item.isActive}>\n                  <a href={item.url}>\n                     <item.icon />\n                     <span>{item.title}</span>\n                  </a>\n               </SidebarMenuButton>\n            </SidebarMenuItem>\n         ))}\n      </SidebarMenu>\n   )\n}\n\nfunction NavSecondary({\n   items,\n   ...props\n}: {\n   items: {\n      title: string\n      url: string\n      icon: LucideIcon\n      badge?: React.ReactNode\n   }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n   return (\n      <SidebarGroup {...props}>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                     <SidebarMenuButton asChild>\n                        <a href={item.url}>\n                           <item.icon />\n                           <span>{item.title}</span>\n                        </a>\n                     </SidebarMenuButton>\n                     {item.badge && (\n                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>\n                     )}\n                  </SidebarMenuItem>\n               ))}\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction NavUser({\n   user,\n}: {\n   user: {\n      name: string\n      email: string\n      avatar: string\n   }\n}) {\n   const { isMobile } = useSidebar()\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                     size=\"lg\"\n                     className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                     <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage src={user.avatar} alt={user.name} />\n                        <AvatarFallback className=\"rounded-lg\">\n                           CN\n                        </AvatarFallback>\n                     </Avatar>\n                     <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                           {user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">{user.email}</span>\n                     </div>\n                     <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align=\"start\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                     <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                           <AvatarImage src={user.avatar} alt={user.name} />\n                           <AvatarFallback className=\"rounded-lg\">\n                              CN\n                           </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                           <span className=\"truncate font-semibold\">\n                              {user.name}\n                           </span>\n                           <span className=\"truncate text-xs\">\n                              {user.email}\n                           </span>\n                        </div>\n                     </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                     <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                     </DropdownMenuItem>\n                     <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                     </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                     <LogOut />\n                     Log out\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n\nfunction NavWorkspaces({\n   workspaces,\n}: {\n   workspaces: {\n      name: string\n      emoji: React.ReactNode\n      pages: {\n         name: string\n         emoji: React.ReactNode\n      }[]\n   }[]\n}) {\n   return (\n      <SidebarGroup>\n         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n         <SidebarGroupContent>\n            <SidebarMenu>\n               {workspaces.map((workspace) => (\n                  <Collapsible key={workspace.name}>\n                     <SidebarMenuItem>\n                        <SidebarMenuButton asChild>\n                           <a href=\"#\">\n                              <span>{workspace.emoji}</span>\n                              <span>{workspace.name}</span>\n                           </a>\n                        </SidebarMenuButton>\n                        <CollapsibleTrigger asChild>\n                           <SidebarMenuAction\n                              className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                              showOnHover\n                           >\n                              <ChevronRight />\n                           </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <SidebarMenuAction showOnHover>\n                           <Plus />\n                        </SidebarMenuAction>\n                        <CollapsibleContent>\n                           <SidebarMenuSub>\n                              {workspace.pages.map((page) => (\n                                 <SidebarMenuSubItem key={page.name}>\n                                    <SidebarMenuSubButton asChild>\n                                       <a href=\"#\">\n                                          <span>{page.emoji}</span>\n                                          <span>{page.name}</span>\n                                       </a>\n                                    </SidebarMenuSubButton>\n                                 </SidebarMenuSubItem>\n                              ))}\n                           </SidebarMenuSub>\n                        </CollapsibleContent>\n                     </SidebarMenuItem>\n                  </Collapsible>\n               ))}\n               <SidebarMenuItem>\n                  <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                     <MoreHorizontal />\n                     <span>More</span>\n                  </SidebarMenuButton>\n               </SidebarMenuItem>\n            </SidebarMenu>\n         </SidebarGroupContent>\n      </SidebarGroup>\n   )\n}\n\nfunction TeamSwitcher({\n   teams,\n}: {\n   teams: {\n      name: string\n      logo: React.ElementType\n      plan: string\n   }[]\n}) {\n   const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n   return (\n      <SidebarMenu>\n         <SidebarMenuItem>\n            <DropdownMenu>\n               <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"w-fit px-1.5\">\n                     <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                        <activeTeam.logo className=\"size-3\" />\n                     </div>\n                     <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                     </span>\n                     <ChevronDown className=\"opacity-50\" />\n                  </SidebarMenuButton>\n               </DropdownMenuTrigger>\n               <DropdownMenuContent\n                  className=\"w-64 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n               >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                     Teams\n                  </DropdownMenuLabel>\n                  {teams.map((team, index) => (\n                     <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                        className=\"gap-2 p-2\"\n                     >\n                        <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                           <team.logo className=\"size-4 shrink-0\" />\n                        </div>\n                        {team.name}\n                        <DropdownMenuShortcut>\n                           ⌘{index + 1}\n                        </DropdownMenuShortcut>\n                     </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                     <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                        <Plus className=\"size-4\" />\n                     </div>\n                     <div className=\"font-medium text-muted-foreground\">\n                        Add team\n                     </div>\n                  </DropdownMenuItem>\n               </DropdownMenuContent>\n            </DropdownMenu>\n         </SidebarMenuItem>\n      </SidebarMenu>\n   )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/video-modal-demo.json b/apps/web/public/v0/styles/miami/video-modal-demo.json
new file mode 100644
index 00000000..43e7c001
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/video-modal-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "video-modal-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/video-modal-demo.tsx",
+      "content": "import { PlayIcon } from \"@radix-ui/react-icons\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n   VideoModal,\n   VideoModalContent,\n   VideoModalDescription,\n   VideoModalTitle,\n   VideoModalTrigger,\n   VideoModalVideo,\n   VideoPlayButton,\n   VideoPlayer,\n   VideoPreview,\n} from \"@/components/ui/video-modal\"\n\nfunction VideoModalDemo() {\n   return (\n      <div className=\"relative justify-center\">\n         <VideoModal>\n            <VideoModalTrigger>\n               <Button>Open modal</Button>\n            </VideoModalTrigger>\n            <VideoModalContent>\n               <VideoModalTitle>Modal Video Demo</VideoModalTitle>\n               <VideoModalDescription>\n                  Your subtitle or description here\n               </VideoModalDescription>\n               <VideoModalVideo>\n                  <VideoPlayer>\n                     <VideoPreview>\n                        <img\n                           src=\"https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200\"\n                           alt=\"Video preview\"\n                        />\n                     </VideoPreview>\n                     <VideoPlayButton>\n                        <button className=\"absolute inset-0 m-auto flex size-32 items-center justify-center rounded-full border border-white border-white/10 bg-white/50 transition duration-300 hover:bg-white/75\">\n                           <PlayIcon className=\"size-20 stroke-1 text-white\" />\n                        </button>\n                     </VideoPlayButton>\n                     <iframe\n                        className=\"size-full\"\n                        src=\"https://cdn.magicui.design/globe.mp4\"\n                        allow=\"accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;\"\n                        allowFullScreen\n                     />\n                  </VideoPlayer>\n               </VideoModalVideo>\n            </VideoModalContent>\n         </VideoModal>\n      </div>\n   )\n}\n\nexport default VideoModalDemo\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/video-modal.json b/apps/web/public/v0/styles/miami/video-modal.json
new file mode 100644
index 00000000..052fdc0a
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/video-modal.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "video-modal",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/video-modal.tsx",
+      "content": "\"use client\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nconst VideoModal = DialogPrimitive.Root\n\nconst VideoModalTrigger = DialogPrimitive.Trigger\n\nconst VideoModalPortal = DialogPrimitive.Portal\n\nconst VideoModalClose = DialogPrimitive.Close\n\nconst VideoModalOverlay = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Overlay>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Overlay\n      ref={ref}\n      className={cn(\n         \"data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in fixed inset-0 z-50 backdrop-blur-xl\",\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst VideoModalContent = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Content>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n   <VideoModalPortal>\n      <VideoModalOverlay />\n      <DialogPrimitive.Content\n         ref={ref}\n         className={cn(\n            \"fixed left-1/2 top-1/2 z-50 flex h-screen w-screen -translate-x-1/2 -translate-y-1/2 items-center justify-center p-3\",\n            \"data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] transition-all\",\n            className,\n         )}\n         {...props}\n      >\n         <div className=\"relative mx-auto flex size-full items-center justify-center rounded-2xl border border-gray-950/[.1] bg-gray-50/[.2] dark:border-gray-50/[.1] dark:bg-gray-950/[.5]\">\n            {/* Mobile close button */}\n            <CloseIcon isMobile />\n\n            <div className=\"flex h-4/5 w-full max-w-5xl gap-6\">\n               {/* Desktop close button */}\n               <CloseIcon />\n               <div className=\"flex w-full flex-col max-lg:p-4 max-lg:text-center\">\n                  {children}\n               </div>\n            </div>\n         </div>\n      </DialogPrimitive.Content>\n   </VideoModalPortal>\n))\n\nVideoModalContent.displayName = DialogPrimitive.Content.displayName\n\nconst VideoModalTitle = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Title>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Title\n      ref={ref}\n      className={cn(\n         \"mb-4 text-4xl font-bold text-gray-950 dark:text-gray-50\",\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalTitle.displayName = DialogPrimitive.Title.displayName\n\nconst VideoModalDescription = React.forwardRef<\n   React.ElementRef<typeof DialogPrimitive.Description>,\n   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n   <DialogPrimitive.Description\n      ref={ref}\n      className={cn(\n         \"mb-6 text-xl text-gray-950/80 dark:text-gray-50/70\",\n         className,\n      )}\n      {...props}\n   />\n))\nVideoModalDescription.displayName = DialogPrimitive.Description.displayName\n\nconst VideoPreview = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\n         \"absolute inset-0 z-10 transition-opacity duration-500 group-[.playing]:pointer-events-none group-[.playing]:opacity-0\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoPreview.displayName = \"VideoPreview\"\n\nconst VideoPlayButton = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\n         \"absolute inset-0 z-20 flex items-center justify-center transition-opacity duration-300 group-[.playing]:pointer-events-none group-[.playing]:opacity-0\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoPlayButton.displayName = \"VideoPlayButton\"\n\nconst VideoPlayer = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n   const [isPlaying, setIsPlaying] = React.useState(false)\n\n   return (\n      <div\n         ref={ref}\n         className={cn(\n            \"group relative aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover dark:border-gray-50/[.1]\",\n            isPlaying && \"playing\",\n            className,\n         )}\n         onClick={() => setIsPlaying(true)}\n         {...props}\n      >\n         {children}\n      </div>\n   )\n})\nVideoPlayer.displayName = \"VideoPlayer\"\n\nconst VideoModalVideo = React.forwardRef<\n   HTMLDivElement,\n   React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n   <div\n      ref={ref}\n      className={cn(\n         \"aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover shadow-xl dark:border-gray-50/[.1]\",\n         className,\n      )}\n      {...props}\n   >\n      {children}\n   </div>\n))\nVideoModalVideo.displayName = \"VideoModalVideo\"\n\nconst CloseIcon = React.forwardRef<\n   React.ElementRef<typeof VideoModalClose>,\n   React.ComponentPropsWithoutRef<typeof VideoModalClose> & {\n      isMobile?: boolean\n   }\n>(({ className, isMobile = false, ...props }, ref) => (\n   <VideoModalClose\n      ref={ref}\n      className={cn(\n         \"rounded-full border border-gray-950/[.1] bg-gray-950/[.01] p-2 transition duration-300 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n         isMobile\n            ? \"absolute right-4 top-4 lg:hidden\"\n            : \"hidden self-start lg:block\",\n         className,\n      )}\n      {...props}\n   >\n      <svg\n         fill=\"none\"\n         height=\"12\"\n         viewBox=\"0 0 12 12\"\n         width=\"12\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n      >\n         <path\n            d=\"M1 1L11 11M11 1L1 11\"\n            className=\"stroke-current\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.5\"\n         ></path>\n      </svg>\n      <span className=\"sr-only\">Close</span>\n   </VideoModalClose>\n))\n\nCloseIcon.displayName = \"CloseIcon\"\n\nexport {\n   VideoModal,\n   VideoModalTrigger,\n   VideoModalContent,\n   VideoModalTitle,\n   VideoModalDescription,\n   VideoModalVideo,\n   VideoPreview,\n   VideoPlayButton,\n   VideoPlayer,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "modal-fade-in": "modal-fade-in 500ms ease-out",
+            "modal-fade-out": "modal-fade-out 500ms ease-in"
+          },
+          "keyframes": {
+            "modal-fade-in": {
+              "0%": {
+                "opacity": "0"
+              },
+              "100%": {
+                "opacity": "1"
+              }
+            },
+            "modal-fade-out": {
+              "0%": {
+                "opacity": "1"
+              },
+              "100%": {
+                "opacity": "0"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/warp-background-demo.json b/apps/web/public/v0/styles/miami/warp-background-demo.json
new file mode 100644
index 00000000..091224c8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/warp-background-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "warp-background-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/warp-background-demo.tsx",
+      "content": "import {\n   Card,\n   CardContent,\n   CardDescription,\n   CardTitle,\n} from \"@/components/ui/card\"\nimport { WarpBackground } from \"@/components/ui/warp-background\"\n\nexport default function ExampleComponentDemo() {\n   return (\n      <WarpBackground>\n         <Card className=\"w-80\">\n            <CardContent className=\"flex flex-col gap-2 p-4\">\n               <CardTitle>Congratulations on Your Promotion!</CardTitle>\n               <CardDescription>\n                  Your hard work and dedication have paid off. We&apos;re\n                  thrilled to see you take this next step in your career. Keep\n                  up the fantastic work!\n               </CardDescription>\n            </CardContent>\n         </Card>\n      </WarpBackground>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/warp-background.json b/apps/web/public/v0/styles/miami/warp-background.json
new file mode 100644
index 00000000..abc8cac5
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/warp-background.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "warp-background",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "ui/warp-background.tsx",
+      "content": "import { motion } from \"motion/react\"\nimport type React from \"react\"\nimport { type HTMLAttributes, useCallback, useMemo } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface WarpBackgroundProps extends HTMLAttributes<HTMLDivElement> {\n   children: React.ReactNode\n   perspective?: number\n   beamsPerSide?: number\n   beamSize?: number\n   beamDelayMax?: number\n   beamDelayMin?: number\n   beamDuration?: number\n   gridColor?: string\n}\n\nconst Beam = ({\n   width,\n   x,\n   delay,\n   duration,\n}: {\n   width: string | number\n   x: string | number\n   delay: number\n   duration: number\n}) => {\n   const hue = Math.floor(Math.random() * 360)\n   const ar = Math.floor(Math.random() * 10) + 1\n\n   return (\n      <motion.div\n         style={\n            {\n               \"--x\": `${x}`,\n               \"--width\": `${width}`,\n               \"--aspect-ratio\": `${ar}`,\n               \"--background\": `linear-gradient(hsl(${hue} 80% 60%), transparent)`,\n            } as React.CSSProperties\n         }\n         className={`absolute left-[var(--x)] top-0 [aspect-ratio:1/var(--aspect-ratio)] [background:var(--background)] [width:var(--width)]`}\n         initial={{ y: \"100cqmax\", x: \"-50%\" }}\n         animate={{ y: \"-100%\", x: \"-50%\" }}\n         transition={{\n            duration,\n            delay,\n            repeat: Number.POSITIVE_INFINITY,\n            ease: \"linear\",\n         }}\n      />\n   )\n}\n\nexport const WarpBackground: React.FC<WarpBackgroundProps> = ({\n   children,\n   perspective = 100,\n   className,\n   beamsPerSide = 3,\n   beamSize = 5,\n   beamDelayMax = 3,\n   beamDelayMin = 0,\n   beamDuration = 3,\n   gridColor = \"hsl(var(--border))\",\n   ...props\n}) => {\n   const generateBeams = useCallback(() => {\n      const beams = []\n      const cellsPerSide = Math.floor(100 / beamSize)\n      const step = cellsPerSide / beamsPerSide\n\n      for (let i = 0; i < beamsPerSide; i++) {\n         const x = Math.floor(i * step)\n         const delay =\n            Math.random() * (beamDelayMax - beamDelayMin) + beamDelayMin\n         beams.push({ x, delay })\n      }\n      return beams\n   }, [beamsPerSide, beamSize, beamDelayMax, beamDelayMin])\n\n   const topBeams = useMemo(() => generateBeams(), [generateBeams])\n   const rightBeams = useMemo(() => generateBeams(), [generateBeams])\n   const bottomBeams = useMemo(() => generateBeams(), [generateBeams])\n   const leftBeams = useMemo(() => generateBeams(), [generateBeams])\n\n   return (\n      <div className={cn(\"relative rounded border p-20\", className)} {...props}>\n         <div\n            style={\n               {\n                  \"--perspective\": `${perspective}px`,\n                  \"--grid-color\": gridColor,\n                  \"--beam-size\": `${beamSize}%`,\n               } as React.CSSProperties\n            }\n            className={\n               \"pointer-events-none absolute left-0 top-0 size-full overflow-hidden [clip-path:inset(0)] [container-type:size] [perspective:var(--perspective)] [transform-style:preserve-3d]\"\n            }\n         >\n            {/* top side */}\n            <div className=\"absolute [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]\">\n               {topBeams.map((beam, index) => (\n                  <Beam\n                     key={`top-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n            {/* bottom side */}\n            <div className=\"absolute top-full [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]\">\n               {bottomBeams.map((beam, index) => (\n                  <Beam\n                     key={`bottom-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n            {/* left side */}\n            <div className=\"absolute left-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:0%_0%] [transform:rotate(90deg)_rotateX(-90deg)] [width:100cqh]\">\n               {leftBeams.map((beam, index) => (\n                  <Beam\n                     key={`left-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n            {/* right side */}\n            <div className=\"absolute right-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [width:100cqh] [transform-origin:100%_0%] [transform:rotate(-90deg)_rotateX(-90deg)]\">\n               {rightBeams.map((beam, index) => (\n                  <Beam\n                     key={`right-${index}`}\n                     width={`${beamSize}%`}\n                     x={`${beam.x * beamSize}%`}\n                     delay={beam.delay}\n                     duration={beamDuration}\n                  />\n               ))}\n            </div>\n         </div>\n         <div className=\"relative\">{children}</div>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/wavy-dot-pattern-demo.json b/apps/web/public/v0/styles/miami/wavy-dot-pattern-demo.json
new file mode 100644
index 00000000..719ac89e
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/wavy-dot-pattern-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "wavy-dot-pattern-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/wavy-dot-pattern-demo.tsx",
+      "content": "import WavyDotPattern from \"@/components/ui/wavy-dot-pattern\"\n\nexport default function WavyDotPatternDemo() {\n   return (\n      <div className=\"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl \">\n         <p className=\"z-10 whitespace-pre-wrap text-center text-4xl font-semibold tracking-tighter text-black dark:text-white\">\n            Wavy Dot Pattern\n         </p>\n\n         <WavyDotPattern\n            gridWidth={30}\n            gridHeight={15}\n            dotWidth={8}\n            dotHeight={8}\n         />\n      </div>\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/wavy-dot-pattern.json b/apps/web/public/v0/styles/miami/wavy-dot-pattern.json
new file mode 100644
index 00000000..ae7058d8
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/wavy-dot-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "wavy-dot-pattern",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "react-anime"
+  ],
+  "files": [
+    {
+      "path": "ui/wavy-dot-pattern.tsx",
+      "content": "\"use client\"\nimport { useState } from \"react\"\nimport { anime } from \"react-anime\"\nimport { cn } from \"@/lib/utils\"\n\ninterface WavyDotPatternProps {\n   className?: string\n   gridWidth?: number\n   gridHeight?: number\n   dotWidth?: number\n   dotHeight?: number\n}\n\nexport function WavyDotPattern({\n   className,\n   gridWidth,\n   gridHeight,\n   dotWidth,\n   dotHeight,\n}: WavyDotPatternProps) {\n   const [dotClickDisabled, setDotClickDisabled] = useState<boolean>(false)\n\n   const handleDotClick = (e: any, width: number, height: number) => {\n      setDotClickDisabled(true)\n\n      anime({\n         targets: \".dot-point\",\n         scale: [\n            { value: 1.35, easing: \"easeOutSine\", duration: 250 },\n            { value: 1, easing: \"easeInOutQuad\", duration: 500 },\n         ],\n         translateY: [\n            { value: -15, easing: \"easeOutSine\", duration: 250 },\n            { value: 1, easing: \"easeInOutQuad\", duration: 500 },\n         ],\n         opacity: [\n            { value: 0.7, easing: \"easeOutSine\", duration: 250 },\n            { value: 0.35, easing: \"easeInOutQuad\", duration: 500 },\n         ],\n         delay: anime.stagger(100, {\n            grid: [width, height],\n            from: e.target.dataset.index,\n         }),\n      })\n\n      setTimeout(() => setDotClickDisabled(false), 2000)\n   }\n\n   const GRID_WIDTH = gridWidth || 30\n   const GRID_HEIGHT = gridHeight || 30\n\n   const DOT_WIDTH = dotWidth ? `w-[${dotWidth}px]` : \"w-[8px]\"\n   const DOT_HEIGHT = dotHeight ? `h-[${dotHeight}px]` : \"h-[8px]\"\n\n   let index = 0\n\n   const dots = []\n\n   for (let i = 0; i < GRID_WIDTH; i++) {\n      for (let j = 0; j < GRID_HEIGHT; j++) {\n         dots.push(\n            <button\n               className=\"rounded-[8px] p-[0.8rem]\"\n               type=\"button\"\n               onClick={(e) => handleDotClick(e, GRID_WIDTH, GRID_HEIGHT)}\n               data-index={index}\n               key={`${i}-${j}`}\n               disabled={dotClickDisabled}\n            >\n               <div\n                  className={cn(\n                     \"dot-point\",\n                     \"rounded-xl bg-gradient-to-r from-[#d9cab3] to-black opacity-35 hover:from-black hover:to-black hover:opacity-100\",\n                     DOT_WIDTH,\n                     DOT_HEIGHT,\n                  )}\n                  data-index={index}\n               />\n            </button>,\n         )\n         index++\n      }\n   }\n\n   return (\n      <div\n         style={{ gridTemplateColumns: `repeat(${GRID_WIDTH}, 1fr)` }}\n         className={cn(\"max-w-3/4 absolute z-0 grid\", className)}\n      >\n         {dots.map((dot) => dot)}\n      </div>\n   )\n}\n\nexport default WavyDotPattern\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/wavy-text-demo.json b/apps/web/public/v0/styles/miami/wavy-text-demo.json
new file mode 100644
index 00000000..83657c8f
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/wavy-text-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "wavy-text-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/wavy-text-demo.tsx",
+      "content": "import WavyText from \"@/components/ui/wavy-text\"\n\nexport default function WavyTextDemo() {\n   return (\n      <WavyText\n         word=\"Wavy Text\"\n         className=\"text-4xl font-bold text-black dark:text-white\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/wavy-text.json b/apps/web/public/v0/styles/miami/wavy-text.json
new file mode 100644
index 00000000..7ce16642
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/wavy-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "wavy-text",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/wavy-text.tsx",
+      "content": "\"use client\"\n\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { useMemo } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface WavyTextProps {\n   word: string\n   className?: string\n   variant?: {\n      hidden: { y: number }\n      visible: { y: number }\n   }\n   duration?: number\n   delay?: number\n}\nfunction WavyText({\n   word,\n   className,\n   variant,\n   duration = 0.5,\n   delay = 0.05,\n}: WavyTextProps) {\n   const defaultVariants = {\n      hidden: { y: 10 },\n      visible: { y: -10 },\n   }\n   const combinedVariants = variant || defaultVariants\n   const characters = useMemo(() => word.split(\"\"), [word])\n   return (\n      <div className=\"flex justify-center space-x-2 overflow-hidden p-3\">\n         <AnimatePresence>\n            {characters.map((char, i) => (\n               <motion.h1\n                  key={i}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={combinedVariants}\n                  transition={{\n                     yoyo: Number.POSITIVE_INFINITY,\n                     duration,\n                     delay: i * delay,\n                  }}\n                  className={cn(\n                     className,\n                     \"font-display text-center text-4xl font-bold tracking-[-0.15em] md:text-7xl\",\n                  )}\n               >\n                  {char}\n               </motion.h1>\n            ))}\n         </AnimatePresence>\n      </div>\n   )\n}\n\nexport default WavyText\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/word-fade-in-demo.json b/apps/web/public/v0/styles/miami/word-fade-in-demo.json
new file mode 100644
index 00000000..1b5294ef
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/word-fade-in-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "word-fade-in-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/word-fade-in-demo.tsx",
+      "content": "import WordFadeIn from \"@/components/ui/word-fade-in\"\n\nexport default async function WordFadeInDemo() {\n   return <WordFadeIn words=\"Word Fade In\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/word-fade-in.json b/apps/web/public/v0/styles/miami/word-fade-in.json
new file mode 100644
index 00000000..38971e33
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/word-fade-in.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "word-fade-in",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/word-fade-in.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface WordFadeInProps {\n   words: string\n   className?: string\n   delay?: number\n   variants?: Variants\n}\n\nexport default function WordFadeIn({\n   words,\n   delay = 0.15,\n   variants = {\n      hidden: { opacity: 0 },\n      visible: (i: any) => ({\n         y: 0,\n         opacity: 1,\n         transition: { delay: i * delay },\n      }),\n   },\n   className,\n}: WordFadeInProps) {\n   const _words = words.split(\" \")\n\n   return (\n      <motion.h1\n         variants={variants}\n         initial=\"hidden\"\n         animate=\"visible\"\n         className={cn(\n            \"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white\",\n            className,\n         )}\n      >\n         {_words.map((word, i) => (\n            <motion.span key={word} variants={variants} custom={i}>\n               {word}{\" \"}\n            </motion.span>\n         ))}\n      </motion.h1>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/word-pull-up-demo.json b/apps/web/public/v0/styles/miami/word-pull-up-demo.json
new file mode 100644
index 00000000..6f4de408
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/word-pull-up-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "word-pull-up-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/word-pull-up-demo.tsx",
+      "content": "import WordPullUp from \"@/components/ui/word-pull-up\"\n\nexport default async function WordPullUpDemo() {\n   return (\n      <WordPullUp\n         className=\"text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white\"\n         words=\"Word Pull Up\"\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/word-pull-up.json b/apps/web/public/v0/styles/miami/word-pull-up.json
new file mode 100644
index 00000000..bc2b69c6
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/word-pull-up.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "word-pull-up",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/word-pull-up.tsx",
+      "content": "\"use client\"\n\nimport type { Variants } from \"framer-motion\"\nimport { motion } from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\ninterface WordPullUpProps {\n   words: string\n   delayMultiple?: number\n   wrapperFramerProps?: Variants\n   framerProps?: Variants\n   className?: string\n}\n\nexport default function WordPullUp({\n   words,\n   wrapperFramerProps = {\n      hidden: { opacity: 0 },\n      show: {\n         opacity: 1,\n         transition: {\n            staggerChildren: 0.2,\n         },\n      },\n   },\n   framerProps = {\n      hidden: { y: 20, opacity: 0 },\n      show: { y: 0, opacity: 1 },\n   },\n   className,\n}: WordPullUpProps) {\n   return (\n      <motion.h1\n         variants={wrapperFramerProps}\n         initial=\"hidden\"\n         animate=\"show\"\n         className={cn(\n            \"font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm\",\n            className,\n         )}\n      >\n         {words.split(\" \").map((word, i) => (\n            <motion.span\n               key={i}\n               variants={framerProps}\n               style={{ display: \"inline-block\", paddingRight: \"8px\" }}\n            >\n               {word === \"\" ? <span>&nbsp;</span> : word}\n            </motion.span>\n         ))}\n      </motion.h1>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/word-rotate-demo.json b/apps/web/public/v0/styles/miami/word-rotate-demo.json
new file mode 100644
index 00000000..12f83dff
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/word-rotate-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "word-rotate-demo",
+  "type": "registry:example",
+  "author": "nyxb (https://nyxbui.design)",
+  "files": [
+    {
+      "path": "examples/word-rotate-demo.tsx",
+      "content": "import WordRotate from \"@/components/ui/word-rotate\"\n\nexport default async function WordRotateDemo() {\n   return (\n      <WordRotate\n         className=\"text-4xl font-bold text-black dark:text-white\"\n         words={[\"Word\", \"Rotate\"]}\n      />\n   )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/styles/miami/word-rotate.json b/apps/web/public/v0/styles/miami/word-rotate.json
new file mode 100644
index 00000000..730c8470
--- /dev/null
+++ b/apps/web/public/v0/styles/miami/word-rotate.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema/registry-item.json",
+  "name": "word-rotate",
+  "type": "registry:ui",
+  "author": "nyxb (https://nyxbui.design)",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "ui/word-rotate.tsx",
+      "content": "\"use client\"\n\nimport type { HTMLMotionProps } from \"framer-motion\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { useEffect, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface WordRotateProps {\n   words: string[]\n   duration?: number\n   framerProps?: HTMLMotionProps<\"h1\">\n   className?: string\n}\n\nexport default function WordRotate({\n   words,\n   duration = 2500,\n   framerProps = {\n      initial: { opacity: 0, y: -50 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 50 },\n      transition: { duration: 0.25, ease: \"easeOut\" },\n   },\n   className,\n}: WordRotateProps) {\n   const [index, setIndex] = useState(0)\n\n   useEffect(() => {\n      const interval = setInterval(() => {\n         setIndex((prevIndex) => (prevIndex + 1) % words.length)\n      }, duration)\n\n      // Clean up interval on unmount\n      return () => clearInterval(interval)\n   }, [words, duration])\n\n   return (\n      <div className=\"overflow-hidden py-2\">\n         <AnimatePresence mode=\"wait\">\n            <motion.h1\n               key={words[index]}\n               className={cn(className)}\n               {...framerProps}\n            >\n               {words[index]}\n            </motion.h1>\n         </AnimatePresence>\n      </div>\n   )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/themes.css b/apps/web/public/v0/themes.css
new file mode 100644
index 00000000..f953bb05
--- /dev/null
+++ b/apps/web/public/v0/themes.css
@@ -0,0 +1,768 @@
+
+.theme-zinc {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 240 5.9% 10%;
+
+  --radius: 0.5rem;
+}
+
+.dark .theme-zinc {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 240 4.9% 83.9%;
+}
+
+.theme-slate {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 222.2 84% 4.9%;
+
+  --radius: 0.5rem;
+}
+
+.dark .theme-slate {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 212.7 26.8% 83.9;
+}
+
+.theme-stone {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+
+  --primary: 24 9.8% 10%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 20 14.3% 4.1%;
+
+  --radius: 0.95rem;
+}
+
+.dark .theme-stone {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+
+  --primary: 60 9.1% 97.8%;
+  --primary-foreground: 24 9.8% 10%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 24 5.7% 82.9%;
+}
+
+.theme-gray {
+  --background: 0 0% 100%;
+  --foreground: 224 71.4% 4.1%;
+
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+
+  --primary: 220.9 39.3% 11%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 224 71.4% 4.1%;
+
+  --radius: 0.35rem;
+}
+
+.dark .theme-gray {
+  --background: 224 71.4% 4.1%;
+  --foreground: 210 20% 98%;
+
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+
+  --primary: 210 20% 98%;
+  --primary-foreground: 220.9 39.3% 11%;
+
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 216 12.2% 83.9%;
+}
+
+.theme-neutral {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 0% 3.9%;
+
+  --radius: ;
+}
+
+.dark .theme-neutral {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 0% 83.1%;
+}
+
+.theme-red {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+
+  --primary: 0 72.2% 50.6%;
+  --primary-foreground: 0 85.7% 97.3%;
+
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 72.2% 50.6%;
+
+  --radius: 0.4rem;
+}
+
+.dark .theme-red {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+
+  --primary: 0 72.2% 50.6%;
+  --primary-foreground: 0 85.7% 97.3%;
+
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 72.2% 50.6%;
+}
+
+.theme-rose {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 346.8 77.2% 49.8%;
+  --primary-foreground: 355.7 100% 97.3%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 346.8 77.2% 49.8%;
+
+  --radius: 0.5rem;
+}
+
+.dark .theme-rose {
+  --background: 20 14.3% 4.1%;
+  --foreground: 0 0% 95%;
+
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+
+  --card: 24 9.8% 10%;
+  --card-foreground: 0 0% 95%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 346.8 77.2% 49.8%;
+  --primary-foreground: 355.7 100% 97.3%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+
+  --ring: 346.8 77.2% 49.8%;
+}
+
+.theme-orange {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+
+  --primary: 24.6 95% 53.1%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 24.6 95% 53.1%;
+
+  --radius: 0.95rem;
+}
+
+.dark .theme-orange {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+
+  --primary: 20.5 90.2% 48.2%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 72.2% 50.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 20.5 90.2% 48.2%;
+}
+
+.theme-green {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 142.1 76.2% 36.3%;
+  --primary-foreground: 355.7 100% 97.3%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 142.1 76.2% 36.3%;
+
+  --radius: ;
+}
+
+.dark .theme-green {
+  --background: 20 14.3% 4.1%;
+  --foreground: 0 0% 95%;
+
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+
+  --card: 24 9.8% 10%;
+  --card-foreground: 0 0% 95%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 142.1 70.6% 45.3%;
+  --primary-foreground: 144.9 80.4% 10%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+
+  --ring: 142.4 71.8% 29.2%;
+}
+
+.theme-blue {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 221.2 83.2% 53.3%;
+
+  --radius: ;
+}
+
+.dark .theme-blue {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 224.3 76.3% 48%;
+}
+
+.theme-yellow {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+
+  --primary: 47.9 95.8% 53.1%;
+  --primary-foreground: 26 83.3% 14.1%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 20 14.3% 4.1%;
+
+  --radius: 0.95rem;
+}
+
+.dark .theme-yellow {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+
+  --primary: 47.9 95.8% 53.1%;
+  --primary-foreground: 26 83.3% 14.1%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 35.5 91.7% 32.9%;
+}
+
+.theme-violet {
+  --background: 0 0% 100%;
+  --foreground: 224 71.4% 4.1%;
+
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+
+  --primary: 262.1 83.3% 57.8%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 262.1 83.3% 57.8%;
+
+  --radius: ;
+}
+
+.dark .theme-violet {
+  --background: 224 71.4% 4.1%;
+  --foreground: 210 20% 98%;
+
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+
+  --primary: 263.4 70% 50.4%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 263.4 70% 50.4%;
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/themes/gray.json b/apps/web/public/v0/themes/gray.json
new file mode 100644
index 00000000..a7f4d749
--- /dev/null
+++ b/apps/web/public/v0/themes/gray.json
@@ -0,0 +1,58 @@
+{
+  "name": "gray",
+  "label": "Gray",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "224 71.4% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "224 71.4% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "224 71.4% 4.1%",
+      "primary": "220.9 39.3% 11%",
+      "primary-foreground": "210 20% 98%",
+      "secondary": "220 14.3% 95.9%",
+      "secondary-foreground": "220.9 39.3% 11%",
+      "muted": "220 14.3% 95.9%",
+      "muted-foreground": "220 8.9% 46.1%",
+      "accent": "220 14.3% 95.9%",
+      "accent-foreground": "220.9 39.3% 11%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "220 13% 91%",
+      "input": "220 13% 91%",
+      "ring": "224 71.4% 4.1%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "224 71.4% 4.1%",
+      "foreground": "210 20% 98%",
+      "card": "224 71.4% 4.1%",
+      "card-foreground": "210 20% 98%",
+      "popover": "224 71.4% 4.1%",
+      "popover-foreground": "210 20% 98%",
+      "primary": "210 20% 98%",
+      "primary-foreground": "220.9 39.3% 11%",
+      "secondary": "215 27.9% 16.9%",
+      "secondary-foreground": "210 20% 98%",
+      "muted": "215 27.9% 16.9%",
+      "muted-foreground": "217.9 10.6% 64.9%",
+      "accent": "215 27.9% 16.9%",
+      "accent-foreground": "210 20% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "215 27.9% 16.9%",
+      "input": "215 27.9% 16.9%",
+      "ring": "216 12.2% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/themes/neutral.json b/apps/web/public/v0/themes/neutral.json
new file mode 100644
index 00000000..775f929b
--- /dev/null
+++ b/apps/web/public/v0/themes/neutral.json
@@ -0,0 +1,58 @@
+{
+  "name": "neutral",
+  "label": "Neutral",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "0 0% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "0 0% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "0 0% 3.9%",
+      "primary": "0 0% 9%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "0 0% 96.1%",
+      "secondary-foreground": "0 0% 9%",
+      "muted": "0 0% 96.1%",
+      "muted-foreground": "0 0% 45.1%",
+      "accent": "0 0% 96.1%",
+      "accent-foreground": "0 0% 9%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 89.8%",
+      "input": "0 0% 89.8%",
+      "ring": "0 0% 3.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "0 0% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "0 0% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "0 0% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "0 0% 9%",
+      "secondary": "0 0% 14.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "0 0% 14.9%",
+      "muted-foreground": "0 0% 63.9%",
+      "accent": "0 0% 14.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 14.9%",
+      "input": "0 0% 14.9%",
+      "ring": "0 0% 83.1%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/themes/slate.json b/apps/web/public/v0/themes/slate.json
new file mode 100644
index 00000000..17db98cb
--- /dev/null
+++ b/apps/web/public/v0/themes/slate.json
@@ -0,0 +1,58 @@
+{
+  "name": "slate",
+  "label": "Slate",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "222.2 84% 4.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "222.2 84% 4.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "222.2 84% 4.9%",
+      "primary": "222.2 47.4% 11.2%",
+      "primary-foreground": "210 40% 98%",
+      "secondary": "210 40% 96.1%",
+      "secondary-foreground": "222.2 47.4% 11.2%",
+      "muted": "210 40% 96.1%",
+      "muted-foreground": "215.4 16.3% 46.9%",
+      "accent": "210 40% 96.1%",
+      "accent-foreground": "222.2 47.4% 11.2%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 40% 98%",
+      "border": "214.3 31.8% 91.4%",
+      "input": "214.3 31.8% 91.4%",
+      "ring": "222.2 84% 4.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "222.2 84% 4.9%",
+      "foreground": "210 40% 98%",
+      "card": "222.2 84% 4.9%",
+      "card-foreground": "210 40% 98%",
+      "popover": "222.2 84% 4.9%",
+      "popover-foreground": "210 40% 98%",
+      "primary": "210 40% 98%",
+      "primary-foreground": "222.2 47.4% 11.2%",
+      "secondary": "217.2 32.6% 17.5%",
+      "secondary-foreground": "210 40% 98%",
+      "muted": "217.2 32.6% 17.5%",
+      "muted-foreground": "215 20.2% 65.1%",
+      "accent": "217.2 32.6% 17.5%",
+      "accent-foreground": "210 40% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 40% 98%",
+      "border": "217.2 32.6% 17.5%",
+      "input": "217.2 32.6% 17.5%",
+      "ring": "212.7 26.8% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/themes/stone.json b/apps/web/public/v0/themes/stone.json
new file mode 100644
index 00000000..9b2babe0
--- /dev/null
+++ b/apps/web/public/v0/themes/stone.json
@@ -0,0 +1,58 @@
+{
+  "name": "stone",
+  "label": "Stone",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "20 14.3% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "20 14.3% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "20 14.3% 4.1%",
+      "primary": "24 9.8% 10%",
+      "primary-foreground": "60 9.1% 97.8%",
+      "secondary": "60 4.8% 95.9%",
+      "secondary-foreground": "24 9.8% 10%",
+      "muted": "60 4.8% 95.9%",
+      "muted-foreground": "25 5.3% 44.7%",
+      "accent": "60 4.8% 95.9%",
+      "accent-foreground": "24 9.8% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "20 5.9% 90%",
+      "input": "20 5.9% 90%",
+      "ring": "20 14.3% 4.1%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "20 14.3% 4.1%",
+      "foreground": "60 9.1% 97.8%",
+      "card": "20 14.3% 4.1%",
+      "card-foreground": "60 9.1% 97.8%",
+      "popover": "20 14.3% 4.1%",
+      "popover-foreground": "60 9.1% 97.8%",
+      "primary": "60 9.1% 97.8%",
+      "primary-foreground": "24 9.8% 10%",
+      "secondary": "12 6.5% 15.1%",
+      "secondary-foreground": "60 9.1% 97.8%",
+      "muted": "12 6.5% 15.1%",
+      "muted-foreground": "24 5.4% 63.9%",
+      "accent": "12 6.5% 15.1%",
+      "accent-foreground": "60 9.1% 97.8%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "12 6.5% 15.1%",
+      "input": "12 6.5% 15.1%",
+      "ring": "24 5.7% 82.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/v0/themes/zinc.json b/apps/web/public/v0/themes/zinc.json
new file mode 100644
index 00000000..669fc8d3
--- /dev/null
+++ b/apps/web/public/v0/themes/zinc.json
@@ -0,0 +1,58 @@
+{
+  "name": "zinc",
+  "label": "Zinc",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "240 5.9% 10%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 46.1%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "240 10% 3.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "240 5.9% 10%",
+      "secondary": "240 3.7% 15.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "240 4.9% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/registry/default/block/_sink/components/accordion-demo.tsx b/apps/web/registry/default/block/_sink/components/accordion-demo.tsx
deleted file mode 100644
index 22d2c07c..00000000
--- a/apps/web/registry/default/block/_sink/components/accordion-demo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-   Accordion,
-   AccordionContent,
-   AccordionItem,
-   AccordionTrigger,
-} from '~/registry/default/ui/accordion'
-
-export function AccordionDemo() {
-   return (
-      <Accordion type="single" collapsible className="w-full">
-         <AccordionItem value="item-1">
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>
-               Yes. It adheres to the WAI-ARIA design pattern.
-            </AccordionContent>
-         </AccordionItem>
-         <AccordionItem value="item-2">
-            <AccordionTrigger>Is it styled?</AccordionTrigger>
-            <AccordionContent>
-               Yes. It comes with default styles that matches the other
-               components&apos; aesthetic.
-            </AccordionContent>
-         </AccordionItem>
-         <AccordionItem value="item-3">
-            <AccordionTrigger>Is it animated?</AccordionTrigger>
-            <AccordionContent>
-               Yes. It's animated by default, but you can disable it if you prefer.
-            </AccordionContent>
-         </AccordionItem>
-      </Accordion>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/alert-demo.tsx b/apps/web/registry/default/block/_sink/components/alert-demo.tsx
deleted file mode 100644
index 8392a5d8..00000000
--- a/apps/web/registry/default/block/_sink/components/alert-demo.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Terminal } from 'lucide-react'
-
-import {
-   Alert,
-   AlertDescription,
-   AlertTitle,
-} from '~/registry/default/ui/alert'
-
-export function AlertDemo() {
-   return (
-      <Alert>
-         <Terminal className="size-4" />
-         <AlertTitle>Heads up!</AlertTitle>
-         <AlertDescription>
-            You can add components to your app using the cli.
-         </AlertDescription>
-      </Alert>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/alert-dialog-demo.tsx b/apps/web/registry/default/block/_sink/components/alert-dialog-demo.tsx
deleted file mode 100644
index 89ac5122..00000000
--- a/apps/web/registry/default/block/_sink/components/alert-dialog-demo.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {
-   AlertDialog,
-   AlertDialogAction,
-   AlertDialogCancel,
-   AlertDialogContent,
-   AlertDialogDescription,
-   AlertDialogFooter,
-   AlertDialogHeader,
-   AlertDialogTitle,
-   AlertDialogTrigger,
-} from '~/registry/default/ui/alert-dialog'
-import { Button } from '~/registry/default/ui/button'
-
-export function AlertDialogDemo() {
-   return (
-      <AlertDialog>
-         <AlertDialogTrigger asChild>
-            <Button variant="outline">Show Dialog</Button>
-         </AlertDialogTrigger>
-         <AlertDialogContent>
-            <AlertDialogHeader>
-               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-               <AlertDialogDescription>
-                  This action cannot be undone. This will permanently delete your
-                  account and remove your data from our servers.
-               </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-               <AlertDialogCancel>Cancel</AlertDialogCancel>
-               <AlertDialogAction>Continue</AlertDialogAction>
-            </AlertDialogFooter>
-         </AlertDialogContent>
-      </AlertDialog>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/app-sidebar copy.tsx b/apps/web/registry/default/block/_sink/components/app-sidebar copy.tsx
deleted file mode 100644
index c6fdfa6e..00000000
--- a/apps/web/registry/default/block/_sink/components/app-sidebar copy.tsx	
+++ /dev/null
@@ -1,175 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   AudioWaveform,
-   BookOpen,
-   Bot,
-   Command,
-   Frame,
-   GalleryVerticalEnd,
-   Map,
-   PieChart,
-   Settings2,
-   SquareTerminal,
-} from 'lucide-react'
-
-import { NavMain } from '~/registry/default/block/_sink/components/nav-main'
-import { NavProjects } from '~/registry/default/block/_sink/components/nav-projects'
-import { NavUser } from '~/registry/default/block/_sink/components/nav-user'
-import { TeamSwitcher } from '~/registry/default/block/_sink/components/team-switcher'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarRail,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   teams: [
-      {
-         name: 'Acme Inc',
-         logo: GalleryVerticalEnd,
-         plan: 'Enterprise',
-      },
-      {
-         name: 'Acme Corp.',
-         logo: AudioWaveform,
-         plan: 'Startup',
-      },
-      {
-         name: 'Evil Corp.',
-         logo: Command,
-         plan: 'Free',
-      },
-   ],
-   navMain: [
-      {
-         title: 'Playground',
-         url: '#',
-         icon: SquareTerminal,
-         isActive: true,
-         items: [
-            {
-               title: 'History',
-               url: '#',
-            },
-            {
-               title: 'Starred',
-               url: '#',
-            },
-            {
-               title: 'Settings',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Models',
-         url: '#',
-         icon: Bot,
-         items: [
-            {
-               title: 'Genesis',
-               url: '#',
-            },
-            {
-               title: 'Explorer',
-               url: '#',
-            },
-            {
-               title: 'Quantum',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Documentation',
-         url: '#',
-         icon: BookOpen,
-         items: [
-            {
-               title: 'Introduction',
-               url: '#',
-            },
-            {
-               title: 'Get Started',
-               url: '#',
-            },
-            {
-               title: 'Tutorials',
-               url: '#',
-            },
-            {
-               title: 'Changelog',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Settings',
-         url: '#',
-         icon: Settings2,
-         items: [
-            {
-               title: 'General',
-               url: '#',
-            },
-            {
-               title: 'Team',
-               url: '#',
-            },
-            {
-               title: 'Billing',
-               url: '#',
-            },
-            {
-               title: 'Limits',
-               url: '#',
-            },
-         ],
-      },
-   ],
-   projects: [
-      {
-         name: 'Design Engineering',
-         url: '#',
-         icon: Frame,
-      },
-      {
-         name: 'Sales & Marketing',
-         url: '#',
-         icon: PieChart,
-      },
-      {
-         name: 'Travel',
-         url: '#',
-         icon: Map,
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar collapsible="icon" {...props}>
-         <SidebarHeader>
-            <TeamSwitcher teams={data.teams} />
-         </SidebarHeader>
-         <SidebarContent>
-            <NavMain items={data.navMain} />
-            <NavProjects projects={data.projects} />
-         </SidebarContent>
-         <SidebarFooter>
-            <NavUser user={data.user} />
-         </SidebarFooter>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/app-sidebar.tsx b/apps/web/registry/default/block/_sink/components/app-sidebar.tsx
deleted file mode 100644
index 4056cd5b..00000000
--- a/apps/web/registry/default/block/_sink/components/app-sidebar.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   AudioWaveform,
-   BookOpen,
-   Bot,
-   Command,
-   Frame,
-   GalleryVerticalEnd,
-   Map,
-   PieChart,
-   Settings2,
-   SquareTerminal,
-} from 'lucide-react'
-
-import { NavMain } from '~/registry/default/block/sidebar-07/components/nav-main'
-import { NavProjects } from '~/registry/default/block/sidebar-07/components/nav-projects'
-import { NavUser } from '~/registry/default/block/sidebar-07/components/nav-user'
-import { TeamSwitcher } from '~/registry/default/block/sidebar-07/components/team-switcher'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarRail,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   teams: [
-      {
-         name: 'Acme Inc',
-         logo: GalleryVerticalEnd,
-         plan: 'Enterprise',
-      },
-      {
-         name: 'Acme Corp.',
-         logo: AudioWaveform,
-         plan: 'Startup',
-      },
-      {
-         name: 'Evil Corp.',
-         logo: Command,
-         plan: 'Free',
-      },
-   ],
-   navMain: [
-      {
-         title: 'Playground',
-         url: '#',
-         icon: SquareTerminal,
-         isActive: true,
-         items: [
-            {
-               title: 'History',
-               url: '#',
-            },
-            {
-               title: 'Starred',
-               url: '#',
-            },
-            {
-               title: 'Settings',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Models',
-         url: '#',
-         icon: Bot,
-         items: [
-            {
-               title: 'Genesis',
-               url: '#',
-            },
-            {
-               title: 'Explorer',
-               url: '#',
-            },
-            {
-               title: 'Quantum',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Documentation',
-         url: '#',
-         icon: BookOpen,
-         items: [
-            {
-               title: 'Introduction',
-               url: '#',
-            },
-            {
-               title: 'Get Started',
-               url: '#',
-            },
-            {
-               title: 'Tutorials',
-               url: '#',
-            },
-            {
-               title: 'Changelog',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Settings',
-         url: '#',
-         icon: Settings2,
-         items: [
-            {
-               title: 'General',
-               url: '#',
-            },
-            {
-               title: 'Team',
-               url: '#',
-            },
-            {
-               title: 'Billing',
-               url: '#',
-            },
-            {
-               title: 'Limits',
-               url: '#',
-            },
-         ],
-      },
-   ],
-   projects: [
-      {
-         name: 'Design Engineering',
-         url: '#',
-         icon: Frame,
-      },
-      {
-         name: 'Sales & Marketing',
-         url: '#',
-         icon: PieChart,
-      },
-      {
-         name: 'Travel',
-         url: '#',
-         icon: Map,
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar collapsible="icon" {...props}>
-         <SidebarHeader>
-            <TeamSwitcher teams={data.teams} />
-         </SidebarHeader>
-         <SidebarContent>
-            <NavMain items={data.navMain} />
-            <NavProjects projects={data.projects} />
-         </SidebarContent>
-         <SidebarFooter>
-            <NavUser user={data.user} />
-         </SidebarFooter>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/aspect-ratio-demo.tsx b/apps/web/registry/default/block/_sink/components/aspect-ratio-demo.tsx
deleted file mode 100644
index 452bb218..00000000
--- a/apps/web/registry/default/block/_sink/components/aspect-ratio-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Image from 'next/image'
-
-import { AspectRatio } from '~/registry/default/ui/aspect-ratio'
-
-export function AspectRatioDemo() {
-   return (
-      <AspectRatio ratio={16 / 9} className="bg-muted">
-         <Image
-            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-            alt="Photo by Drew Beamer"
-            fill
-            className="size-full rounded-md object-cover"
-         />
-      </AspectRatio>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/avatar-demo.tsx b/apps/web/registry/default/block/_sink/components/avatar-demo.tsx
deleted file mode 100644
index 22ff421f..00000000
--- a/apps/web/registry/default/block/_sink/components/avatar-demo.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-
-export function AvatarDemo() {
-   return (
-      <Avatar>
-         <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-         <AvatarFallback>CN</AvatarFallback>
-      </Avatar>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/badge-demo.tsx b/apps/web/registry/default/block/_sink/components/badge-demo.tsx
deleted file mode 100644
index 130d040a..00000000
--- a/apps/web/registry/default/block/_sink/components/badge-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/default/ui/badge'
-
-export function BadgeDemo() {
-   return <Badge>Badge</Badge>
-}
diff --git a/apps/web/registry/default/block/_sink/components/badge-destructive.tsx b/apps/web/registry/default/block/_sink/components/badge-destructive.tsx
deleted file mode 100644
index ae8a27e7..00000000
--- a/apps/web/registry/default/block/_sink/components/badge-destructive.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/default/ui/badge'
-
-export function BadgeDestructive() {
-   return <Badge variant="destructive">Destructive</Badge>
-}
diff --git a/apps/web/registry/default/block/_sink/components/badge-outline.tsx b/apps/web/registry/default/block/_sink/components/badge-outline.tsx
deleted file mode 100644
index 1b73876c..00000000
--- a/apps/web/registry/default/block/_sink/components/badge-outline.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/default/ui/badge'
-
-export function BadgeOutline() {
-   return <Badge variant="outline">Outline</Badge>
-}
diff --git a/apps/web/registry/default/block/_sink/components/badge-secondary.tsx b/apps/web/registry/default/block/_sink/components/badge-secondary.tsx
deleted file mode 100644
index 09e9bacf..00000000
--- a/apps/web/registry/default/block/_sink/components/badge-secondary.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/default/ui/badge'
-
-export function BadgeSecondary() {
-   return <Badge variant="secondary">Secondary</Badge>
-}
diff --git a/apps/web/registry/default/block/_sink/components/breadcrumb-demo.tsx b/apps/web/registry/default/block/_sink/components/breadcrumb-demo.tsx
deleted file mode 100644
index add5ad01..00000000
--- a/apps/web/registry/default/block/_sink/components/breadcrumb-demo.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-   Breadcrumb,
-   BreadcrumbEllipsis,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-
-export function BreadcrumbDemo() {
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/">Home</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <DropdownMenu>
-                  <DropdownMenuTrigger className="flex items-center gap-1">
-                     <BreadcrumbEllipsis className="size-4" />
-                     <span className="sr-only">Toggle menu</span>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start">
-                     <DropdownMenuItem>Documentation</DropdownMenuItem>
-                     <DropdownMenuItem>Themes</DropdownMenuItem>
-                     <DropdownMenuItem>GitHub</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/button-demo copy.tsx b/apps/web/registry/default/block/_sink/components/button-demo copy.tsx
deleted file mode 100644
index e76a0b94..00000000
--- a/apps/web/registry/default/block/_sink/components/button-demo copy.tsx	
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export function ButtonDemo() {
-   return <Button>Button</Button>
-}
diff --git a/apps/web/registry/default/block/_sink/components/button-demo.tsx b/apps/web/registry/default/block/_sink/components/button-demo.tsx
deleted file mode 100644
index e76a0b94..00000000
--- a/apps/web/registry/default/block/_sink/components/button-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export function ButtonDemo() {
-   return <Button>Button</Button>
-}
diff --git a/apps/web/registry/default/block/_sink/components/button-destructive.tsx b/apps/web/registry/default/block/_sink/components/button-destructive.tsx
deleted file mode 100644
index 433cba9f..00000000
--- a/apps/web/registry/default/block/_sink/components/button-destructive.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export function ButtonDestructive() {
-   return <Button variant="destructive">Destructive</Button>
-}
diff --git a/apps/web/registry/default/block/_sink/components/button-ghost.tsx b/apps/web/registry/default/block/_sink/components/button-ghost.tsx
deleted file mode 100644
index d4468a86..00000000
--- a/apps/web/registry/default/block/_sink/components/button-ghost.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export function ButtonGhost() {
-   return <Button variant="ghost">Ghost</Button>
-}
diff --git a/apps/web/registry/default/block/_sink/components/button-icon.tsx b/apps/web/registry/default/block/_sink/components/button-icon.tsx
deleted file mode 100644
index 152d51dc..00000000
--- a/apps/web/registry/default/block/_sink/components/button-icon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ChevronRight } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-
-export function ButtonIcon() {
-   return (
-      <Button variant="outline" size="icon">
-         <ChevronRight />
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/button-link.tsx b/apps/web/registry/default/block/_sink/components/button-link.tsx
deleted file mode 100644
index 0c4631ee..00000000
--- a/apps/web/registry/default/block/_sink/components/button-link.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export function ButtonLink() {
-   return <Button variant="link">Link</Button>
-}
diff --git a/apps/web/registry/default/block/_sink/components/button-loading.tsx b/apps/web/registry/default/block/_sink/components/button-loading.tsx
deleted file mode 100644
index be0cc83c..00000000
--- a/apps/web/registry/default/block/_sink/components/button-loading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Loader2 } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-
-export function ButtonLoading() {
-   return (
-      <Button disabled>
-         <Loader2 className="animate-spin" />
-         Please wait
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/button-outline.tsx b/apps/web/registry/default/block/_sink/components/button-outline.tsx
deleted file mode 100644
index 7b95df4f..00000000
--- a/apps/web/registry/default/block/_sink/components/button-outline.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export function ButtonOutline() {
-   return <Button variant="outline">Outline</Button>
-}
diff --git a/apps/web/registry/default/block/_sink/components/button-secondary.tsx b/apps/web/registry/default/block/_sink/components/button-secondary.tsx
deleted file mode 100644
index 729afc08..00000000
--- a/apps/web/registry/default/block/_sink/components/button-secondary.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export function ButtonSecondary() {
-   return <Button variant="secondary">Secondary</Button>
-}
diff --git a/apps/web/registry/default/block/_sink/components/button-with-icon.tsx b/apps/web/registry/default/block/_sink/components/button-with-icon.tsx
deleted file mode 100644
index 568e148e..00000000
--- a/apps/web/registry/default/block/_sink/components/button-with-icon.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { MailOpen } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-
-export function ButtonWithIcon() {
-   return (
-      <Button>
-         <MailOpen />
-         {' '}
-         Login with Email
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/calendar-demo.tsx b/apps/web/registry/default/block/_sink/components/calendar-demo.tsx
deleted file mode 100644
index 443241d8..00000000
--- a/apps/web/registry/default/block/_sink/components/calendar-demo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Calendar } from '~/registry/default/ui/calendar'
-
-export function CalendarDemo() {
-   const [date, setDate] = React.useState<Date | undefined>(new Date())
-
-   return (
-      <Calendar
-         mode="single"
-         selected={date}
-         onSelect={setDate}
-         className="rounded-md border shadow"
-      />
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/card-demo.tsx b/apps/web/registry/default/block/_sink/components/card-demo.tsx
deleted file mode 100644
index 34c6594f..00000000
--- a/apps/web/registry/default/block/_sink/components/card-demo.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { BellRing, Check } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Switch } from '~/registry/default/ui/switch'
-
-const notifications = [
-   {
-      title: 'Your call has been confirmed.',
-      description: '1 hour ago',
-   },
-   {
-      title: 'You have a new message!',
-      description: '1 hour ago',
-   },
-   {
-      title: 'Your subscription is expiring soon!',
-      description: '2 hours ago',
-   },
-]
-
-type CardProps = React.ComponentProps<typeof Card>
-
-export function CardDemo({ className, ...props }: CardProps) {
-   return (
-      <Card className={ny('w-[380px]', className)} {...props}>
-         <CardHeader>
-            <CardTitle>Notifications</CardTitle>
-            <CardDescription>You have 3 unread messages.</CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-4">
-            <div className=" flex items-center space-x-4 rounded-md border p-4">
-               <BellRing />
-               <div className="flex-1 space-y-1">
-                  <p className="text-sm font-medium leading-none">
-                     Push Notifications
-                  </p>
-                  <p className="text-muted-foreground text-sm">
-                     Send notifications to device.
-                  </p>
-               </div>
-               <Switch />
-            </div>
-            <div>
-               {notifications.map((notification, index) => (
-                  <div
-                     key={index}
-                     className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
-                  >
-                     <span className="flex size-2 translate-y-1 rounded-full bg-sky-500" />
-                     <div className="space-y-1">
-                        <p className="text-sm font-medium leading-none">
-                           {notification.title}
-                        </p>
-                        <p className="text-muted-foreground text-sm">
-                           {notification.description}
-                        </p>
-                     </div>
-                  </div>
-               ))}
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button className="w-full">
-               <Check />
-               {' '}
-               Mark all as read
-            </Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/carousel-demo.tsx b/apps/web/registry/default/block/_sink/components/carousel-demo.tsx
deleted file mode 100644
index 439c9d01..00000000
--- a/apps/web/registry/default/block/_sink/components/carousel-demo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/default/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/default/ui/carousel'
-
-export function CarouselDemo() {
-   return (
-      <Carousel className="w-full max-w-xs">
-         <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index}>
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-4xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/checkbox-demo.tsx b/apps/web/registry/default/block/_sink/components/checkbox-demo.tsx
deleted file mode 100644
index 1d312892..00000000
--- a/apps/web/registry/default/block/_sink/components/checkbox-demo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client'
-
-import { Checkbox } from '~/registry/default/ui/checkbox'
-
-export function CheckboxDemo() {
-   return (
-      <div className="flex items-center space-x-2">
-         <Checkbox id="terms" />
-         <label
-            htmlFor="terms"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-         >
-            Accept terms and conditions
-         </label>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/collapsible-demo.tsx b/apps/web/registry/default/block/_sink/components/collapsible-demo.tsx
deleted file mode 100644
index d2e6a8e7..00000000
--- a/apps/web/registry/default/block/_sink/components/collapsible-demo.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronsUpDown } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-
-export function CollapsibleDemo() {
-   const [isOpen, setIsOpen] = React.useState(false)
-
-   return (
-      <Collapsible
-         open={isOpen}
-         onOpenChange={setIsOpen}
-         className="w-[350px] space-y-2"
-      >
-         <div className="flex items-center justify-between space-x-4 px-4">
-            <h4 className="text-sm font-semibold">
-               @peduarte starred 3 repositories
-            </h4>
-            <CollapsibleTrigger asChild>
-               <Button variant="ghost" size="sm">
-                  <ChevronsUpDown className="size-4" />
-                  <span className="sr-only">Toggle</span>
-               </Button>
-            </CollapsibleTrigger>
-         </div>
-         <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-            @radix-ui/primitives
-         </div>
-         <CollapsibleContent className="space-y-2">
-            <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-               @radix-ui/colors
-            </div>
-            <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-               @stitches/react
-            </div>
-         </CollapsibleContent>
-      </Collapsible>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/combobox-demo.tsx b/apps/web/registry/default/block/_sink/components/combobox-demo.tsx
deleted file mode 100644
index daec6acc..00000000
--- a/apps/web/registry/default/block/_sink/components/combobox-demo.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Check, ChevronsUpDown } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/default/ui/command'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-const frameworks = [
-   {
-      value: 'next.js',
-      label: 'Next.js',
-   },
-   {
-      value: 'sveltekit',
-      label: 'SvelteKit',
-   },
-   {
-      value: 'nuxt.js',
-      label: 'Nuxt.js',
-   },
-   {
-      value: 'remix',
-      label: 'Remix',
-   },
-   {
-      value: 'astro',
-      label: 'Astro',
-   },
-]
-
-export function ComboboxDemo() {
-   const [open, setOpen] = React.useState(false)
-   const [value, setValue] = React.useState('')
-
-   return (
-      <Popover open={open} onOpenChange={setOpen}>
-         <PopoverTrigger asChild>
-            <Button
-               variant="outline"
-               role="combobox"
-               aria-expanded={open}
-               className="w-[200px] justify-between"
-            >
-               {value
-                  ? frameworks.find(framework => framework.value === value)?.label
-                  : 'Select framework...'}
-               <ChevronsUpDown className="opacity-50" />
-            </Button>
-         </PopoverTrigger>
-         <PopoverContent className="w-[200px] p-0">
-            <Command>
-               <CommandInput placeholder="Search framework..." className="h-9" />
-               <CommandList>
-                  <CommandEmpty>No framework found.</CommandEmpty>
-                  <CommandGroup>
-                     {frameworks.map(framework => (
-                        <CommandItem
-                           key={framework.value}
-                           value={framework.value}
-                           onSelect={(currentValue) => {
-                              setValue(currentValue === value ? '' : currentValue)
-                              setOpen(false)
-                           }}
-                        >
-                           {framework.label}
-                           <Check
-                              className={ny(
-                                 'ml-auto',
-                                 value === framework.value ? 'opacity-100' : 'opacity-0',
-                              )}
-                           />
-                        </CommandItem>
-                     ))}
-                  </CommandGroup>
-               </CommandList>
-            </Command>
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/command-demo.tsx b/apps/web/registry/default/block/_sink/components/command-demo.tsx
deleted file mode 100644
index f1c2f32c..00000000
--- a/apps/web/registry/default/block/_sink/components/command-demo.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
-   Calculator,
-   Calendar,
-   CreditCard,
-   Settings,
-   Smile,
-   User,
-} from 'lucide-react'
-
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-   CommandSeparator,
-   CommandShortcut,
-} from '~/registry/default/ui/command'
-
-export function CommandDemo() {
-   return (
-      <Command className="rounded-lg border shadow-md md:min-w-[450px]">
-         <CommandInput placeholder="Type a command or search..." />
-         <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup heading="Suggestions">
-               <CommandItem>
-                  <Calendar />
-                  <span>Calendar</span>
-               </CommandItem>
-               <CommandItem>
-                  <Smile />
-                  <span>Search Emoji</span>
-               </CommandItem>
-               <CommandItem disabled>
-                  <Calculator />
-                  <span>Calculator</span>
-               </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Settings">
-               <CommandItem>
-                  <User />
-                  <span>Profile</span>
-                  <CommandShortcut>⌘P</CommandShortcut>
-               </CommandItem>
-               <CommandItem>
-                  <CreditCard />
-                  <span>Billing</span>
-                  <CommandShortcut>⌘B</CommandShortcut>
-               </CommandItem>
-               <CommandItem>
-                  <Settings />
-                  <span>Settings</span>
-                  <CommandShortcut>⌘S</CommandShortcut>
-               </CommandItem>
-            </CommandGroup>
-         </CommandList>
-      </Command>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/component-wrapper copy.tsx b/apps/web/registry/default/block/_sink/components/component-wrapper copy.tsx
deleted file mode 100644
index 300c180e..00000000
--- a/apps/web/registry/default/block/_sink/components/component-wrapper copy.tsx	
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ny } from '~/lib/utils'
-
-export function ComponentWrapper({
-   className,
-   name,
-   children,
-   ...props
-}: React.ComponentPropsWithoutRef<'div'> & { name: string }) {
-   return (
-      <div
-         className={ny('flex w-full flex-col rounded-lg border', className)}
-         {...props}
-      >
-         <div className="border-b px-4 py-3">
-            <div className="text-sm font-medium">{name}</div>
-         </div>
-         <div className="flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full">
-            {children}
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/component-wrapper.tsx b/apps/web/registry/default/block/_sink/components/component-wrapper.tsx
deleted file mode 100644
index f328451f..00000000
--- a/apps/web/registry/default/block/_sink/components/component-wrapper.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ny } from '~/registry/default/lib/utils'
-
-export function ComponentWrapper({
-   className,
-   name,
-   children,
-   ...props
-}: React.ComponentPropsWithoutRef<'div'> & { name: string }) {
-   return (
-      <div
-         className={ny('flex w-full flex-col rounded-lg border', className)}
-         {...props}
-      >
-         <div className="border-b px-4 py-3">
-            <div className="text-sm font-medium">{name}</div>
-         </div>
-         <div className="flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full">
-            {children}
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/context-menu-demo.tsx b/apps/web/registry/default/block/_sink/components/context-menu-demo.tsx
deleted file mode 100644
index 533a5952..00000000
--- a/apps/web/registry/default/block/_sink/components/context-menu-demo.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-   ContextMenu,
-   ContextMenuCheckboxItem,
-   ContextMenuContent,
-   ContextMenuItem,
-   ContextMenuLabel,
-   ContextMenuRadioGroup,
-   ContextMenuRadioItem,
-   ContextMenuSeparator,
-   ContextMenuShortcut,
-   ContextMenuSub,
-   ContextMenuSubContent,
-   ContextMenuSubTrigger,
-   ContextMenuTrigger,
-} from '~/registry/default/ui/context-menu'
-
-export function ContextMenuDemo() {
-   return (
-      <ContextMenu>
-         <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-            Right click here
-         </ContextMenuTrigger>
-         <ContextMenuContent className="w-64">
-            <ContextMenuItem inset>
-               Back
-               <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem inset disabled>
-               Forward
-               <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem inset>
-               Reload
-               <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuSub>
-               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-               <ContextMenuSubContent className="w-48">
-                  <ContextMenuItem>
-                     Save Page As...
-                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-                  </ContextMenuItem>
-                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-                  <ContextMenuItem>Name Window...</ContextMenuItem>
-                  <ContextMenuSeparator />
-                  <ContextMenuItem>Developer Tools</ContextMenuItem>
-               </ContextMenuSubContent>
-            </ContextMenuSub>
-            <ContextMenuSeparator />
-            <ContextMenuCheckboxItem checked>
-               Show Bookmarks Bar
-               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-            </ContextMenuCheckboxItem>
-            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-            <ContextMenuSeparator />
-            <ContextMenuRadioGroup value="pedro">
-               <ContextMenuLabel inset>People</ContextMenuLabel>
-               <ContextMenuSeparator />
-               <ContextMenuRadioItem value="pedro">
-                  Pedro Duarte
-               </ContextMenuRadioItem>
-               <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-            </ContextMenuRadioGroup>
-         </ContextMenuContent>
-      </ContextMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/date-picker-demo.tsx b/apps/web/registry/default/block/_sink/components/date-picker-demo.tsx
deleted file mode 100644
index 22d3d574..00000000
--- a/apps/web/registry/default/block/_sink/components/date-picker-demo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { format } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import { Calendar } from '~/registry/default/ui/calendar'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-export function DatePickerDemo() {
-   const [date, setDate] = React.useState<Date>()
-
-   return (
-      <Popover>
-         <PopoverTrigger asChild>
-            <Button
-               variant="outline"
-               className={ny(
-                  'w-[240px] justify-start text-left font-normal',
-                  !date && 'text-muted-foreground',
-               )}
-            >
-               <CalendarIcon />
-               {date ? format(date, 'PPP') : <span>Pick a date</span>}
-            </Button>
-         </PopoverTrigger>
-         <PopoverContent className="w-auto p-0" align="start">
-            <Calendar
-               mode="single"
-               selected={date}
-               onSelect={setDate}
-               initialFocus
-            />
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/dialog-demo.tsx b/apps/web/registry/default/block/_sink/components/dialog-demo.tsx
deleted file mode 100644
index 87d5d73c..00000000
--- a/apps/web/registry/default/block/_sink/components/dialog-demo.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import {
-   Dialog,
-   DialogContent,
-   DialogDescription,
-   DialogFooter,
-   DialogHeader,
-   DialogTitle,
-   DialogTrigger,
-} from '~/registry/default/ui/dialog'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export function DialogDemo() {
-   return (
-      <Dialog>
-         <DialogTrigger asChild>
-            <Button variant="outline">Edit Profile</Button>
-         </DialogTrigger>
-         <DialogContent className="sm:max-w-[425px]">
-            <DialogHeader>
-               <DialogTitle>Edit profile</DialogTitle>
-               <DialogDescription>
-                  Make changes to your profile here. Click save when you're done.
-               </DialogDescription>
-            </DialogHeader>
-            <div className="grid gap-4 py-4">
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="name" className="text-right">
-                     Name
-                  </Label>
-                  <Input id="name" value="Pedro Duarte" className="col-span-3" />
-               </div>
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="username" className="text-right">
-                     Username
-                  </Label>
-                  <Input id="username" value="@peduarte" className="col-span-3" />
-               </div>
-            </div>
-            <DialogFooter>
-               <Button type="submit">Save changes</Button>
-            </DialogFooter>
-         </DialogContent>
-      </Dialog>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/drawer-demo.tsx b/apps/web/registry/default/block/_sink/components/drawer-demo.tsx
deleted file mode 100644
index 24a67f72..00000000
--- a/apps/web/registry/default/block/_sink/components/drawer-demo.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Minus, Plus } from 'lucide-react'
-import { Bar, BarChart, ResponsiveContainer } from 'recharts'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Drawer,
-   DrawerClose,
-   DrawerContent,
-   DrawerDescription,
-   DrawerFooter,
-   DrawerHeader,
-   DrawerTitle,
-   DrawerTrigger,
-} from '~/registry/default/ui/drawer'
-
-const data = [
-   {
-      goal: 400,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 278,
-   },
-   {
-      goal: 189,
-   },
-   {
-      goal: 239,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 278,
-   },
-   {
-      goal: 189,
-   },
-   {
-      goal: 349,
-   },
-]
-
-export function DrawerDemo() {
-   const [goal, setGoal] = React.useState(350)
-
-   function onClick(adjustment: number) {
-      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
-   }
-
-   return (
-      <Drawer>
-         <DrawerTrigger asChild>
-            <Button variant="outline">Open Drawer</Button>
-         </DrawerTrigger>
-         <DrawerContent>
-            <div className="mx-auto w-full max-w-sm">
-               <DrawerHeader>
-                  <DrawerTitle>Move Goal</DrawerTitle>
-                  <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-               </DrawerHeader>
-               <div className="p-4 pb-0">
-                  <div className="flex items-center justify-center space-x-2">
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="size-8 shrink-0 rounded-full"
-                        onClick={() => onClick(-10)}
-                        disabled={goal <= 200}
-                     >
-                        <Minus />
-                        <span className="sr-only">Decrease</span>
-                     </Button>
-                     <div className="flex-1 text-center">
-                        <div className="text-7xl font-bold tracking-tighter">
-                           {goal}
-                        </div>
-                        <div className="text-muted-foreground text-[0.70rem] uppercase">
-                           Calories/day
-                        </div>
-                     </div>
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="size-8 shrink-0 rounded-full"
-                        onClick={() => onClick(10)}
-                        disabled={goal >= 400}
-                     >
-                        <Plus />
-                        <span className="sr-only">Increase</span>
-                     </Button>
-                  </div>
-                  <div className="mt-3 h-[120px]">
-                     <ResponsiveContainer width="100%" height="100%">
-                        <BarChart data={data}>
-                           <Bar
-                              dataKey="goal"
-                              style={
-                                 {
-                                    fill: 'hsl(var(--foreground))',
-                                    opacity: 0.9,
-                                 } as React.CSSProperties
-                              }
-                           />
-                        </BarChart>
-                     </ResponsiveContainer>
-                  </div>
-               </div>
-               <DrawerFooter>
-                  <Button>Submit</Button>
-                  <DrawerClose asChild>
-                     <Button variant="outline">Cancel</Button>
-                  </DrawerClose>
-               </DrawerFooter>
-            </div>
-         </DrawerContent>
-      </Drawer>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/dropdown-menu-demo.tsx b/apps/web/registry/default/block/_sink/components/dropdown-menu-demo.tsx
deleted file mode 100644
index c813a37d..00000000
--- a/apps/web/registry/default/block/_sink/components/dropdown-menu-demo.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuPortal,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuSub,
-   DropdownMenuSubContent,
-   DropdownMenuSubTrigger,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-
-export function DropdownMenuDemo() {
-   return (
-      <DropdownMenu>
-         <DropdownMenuTrigger asChild>
-            <Button variant="outline">Open</Button>
-         </DropdownMenuTrigger>
-         <DropdownMenuContent className="w-56">
-            <DropdownMenuLabel>My Account</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-               <DropdownMenuItem>
-                  Profile
-                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-               </DropdownMenuItem>
-               <DropdownMenuItem>
-                  Billing
-                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-               </DropdownMenuItem>
-               <DropdownMenuItem>
-                  Settings
-                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-               </DropdownMenuItem>
-               <DropdownMenuItem>
-                  Keyboard shortcuts
-                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
-               </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-               <DropdownMenuItem>Team</DropdownMenuItem>
-               <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
-                  <DropdownMenuPortal>
-                     <DropdownMenuSubContent>
-                        <DropdownMenuItem>Email</DropdownMenuItem>
-                        <DropdownMenuItem>Message</DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>More...</DropdownMenuItem>
-                     </DropdownMenuSubContent>
-                  </DropdownMenuPortal>
-               </DropdownMenuSub>
-               <DropdownMenuItem>
-                  New Team
-                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
-               </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>GitHub</DropdownMenuItem>
-            <DropdownMenuItem>Support</DropdownMenuItem>
-            <DropdownMenuItem disabled>API</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-               Log out
-               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-            </DropdownMenuItem>
-         </DropdownMenuContent>
-      </DropdownMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/hover-card-demo.tsx b/apps/web/registry/default/block/_sink/components/hover-card-demo.tsx
deleted file mode 100644
index 6c805e45..00000000
--- a/apps/web/registry/default/block/_sink/components/hover-card-demo.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { CalendarIcon } from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import { Button } from '~/registry/default/ui/button'
-import {
-   HoverCard,
-   HoverCardContent,
-   HoverCardTrigger,
-} from '~/registry/default/ui/hover-card'
-
-export function HoverCardDemo() {
-   return (
-      <HoverCard>
-         <HoverCardTrigger asChild>
-            <Button variant="link">@nextjs</Button>
-         </HoverCardTrigger>
-         <HoverCardContent className="w-80">
-            <div className="flex justify-between space-x-4">
-               <Avatar>
-                  <AvatarImage src="https://github.com/vercel.png" />
-                  <AvatarFallback>VC</AvatarFallback>
-               </Avatar>
-               <div className="space-y-1">
-                  <h4 className="text-sm font-semibold">@nextjs</h4>
-                  <p className="text-sm">
-                     The React Framework – created and maintained by @vercel.
-                  </p>
-                  <div className="flex items-center pt-2">
-                     <CalendarIcon className="mr-2 size-4 opacity-70" />
-                     {' '}
-                     <span className="text-muted-foreground text-xs">
-                        Joined December 2021
-                     </span>
-                  </div>
-               </div>
-            </div>
-         </HoverCardContent>
-      </HoverCard>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/input-demo.tsx b/apps/web/registry/default/block/_sink/components/input-demo.tsx
deleted file mode 100644
index 82aa4f0c..00000000
--- a/apps/web/registry/default/block/_sink/components/input-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Input } from '~/registry/default/ui/input'
-
-export function InputDemo() {
-   return <Input type="email" placeholder="Email" />
-}
diff --git a/apps/web/registry/default/block/_sink/components/input-otp-demo.tsx b/apps/web/registry/default/block/_sink/components/input-otp-demo.tsx
deleted file mode 100644
index a58c9ffa..00000000
--- a/apps/web/registry/default/block/_sink/components/input-otp-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSeparator,
-   InputOTPSlot,
-} from '~/registry/default/ui/input-otp'
-
-export function InputOTPDemo() {
-   return (
-      <InputOTP maxLength={6}>
-         <InputOTPGroup>
-            <InputOTPSlot index={0} />
-            <InputOTPSlot index={1} />
-            <InputOTPSlot index={2} />
-         </InputOTPGroup>
-         <InputOTPSeparator />
-         <InputOTPGroup>
-            <InputOTPSlot index={3} />
-            <InputOTPSlot index={4} />
-            <InputOTPSlot index={5} />
-         </InputOTPGroup>
-      </InputOTP>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/label-demo.tsx b/apps/web/registry/default/block/_sink/components/label-demo.tsx
deleted file mode 100644
index 9dcb7292..00000000
--- a/apps/web/registry/default/block/_sink/components/label-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Checkbox } from '~/registry/default/ui/checkbox'
-import { Label } from '~/registry/default/ui/label'
-
-export function LabelDemo() {
-   return (
-      <div>
-         <div className="flex items-center space-x-2">
-            <Checkbox id="terms" />
-            <Label htmlFor="terms">Accept terms and conditions</Label>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/menubar-demo.tsx b/apps/web/registry/default/block/_sink/components/menubar-demo.tsx
deleted file mode 100644
index cb1d90cc..00000000
--- a/apps/web/registry/default/block/_sink/components/menubar-demo.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import {
-   Menubar,
-   MenubarCheckboxItem,
-   MenubarContent,
-   MenubarItem,
-   MenubarMenu,
-   MenubarRadioGroup,
-   MenubarRadioItem,
-   MenubarSeparator,
-   MenubarShortcut,
-   MenubarSub,
-   MenubarSubContent,
-   MenubarSubTrigger,
-   MenubarTrigger,
-} from '~/registry/default/ui/menubar'
-
-export function MenubarDemo() {
-   return (
-      <Menubar>
-         <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-               <MenubarItem>
-                  New Tab
-                  {' '}
-                  <MenubarShortcut>⌘T</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem>
-                  New Window
-                  {' '}
-                  <MenubarShortcut>⌘N</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem disabled>New Incognito Window</MenubarItem>
-               <MenubarSeparator />
-               <MenubarSub>
-                  <MenubarSubTrigger>Share</MenubarSubTrigger>
-                  <MenubarSubContent>
-                     <MenubarItem>Email link</MenubarItem>
-                     <MenubarItem>Messages</MenubarItem>
-                     <MenubarItem>Notes</MenubarItem>
-                  </MenubarSubContent>
-               </MenubarSub>
-               <MenubarSeparator />
-               <MenubarItem>
-                  Print...
-                  {' '}
-                  <MenubarShortcut>⌘P</MenubarShortcut>
-               </MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-         <MenubarMenu>
-            <MenubarTrigger>Edit</MenubarTrigger>
-            <MenubarContent>
-               <MenubarItem>
-                  Undo
-                  {' '}
-                  <MenubarShortcut>⌘Z</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem>
-                  Redo
-                  {' '}
-                  <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-               </MenubarItem>
-               <MenubarSeparator />
-               <MenubarSub>
-                  <MenubarSubTrigger>Find</MenubarSubTrigger>
-                  <MenubarSubContent>
-                     <MenubarItem>Search the web</MenubarItem>
-                     <MenubarSeparator />
-                     <MenubarItem>Find...</MenubarItem>
-                     <MenubarItem>Find Next</MenubarItem>
-                     <MenubarItem>Find Previous</MenubarItem>
-                  </MenubarSubContent>
-               </MenubarSub>
-               <MenubarSeparator />
-               <MenubarItem>Cut</MenubarItem>
-               <MenubarItem>Copy</MenubarItem>
-               <MenubarItem>Paste</MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-         <MenubarMenu>
-            <MenubarTrigger>View</MenubarTrigger>
-            <MenubarContent>
-               <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-               <MenubarCheckboxItem checked>
-                  Always Show Full URLs
-               </MenubarCheckboxItem>
-               <MenubarSeparator />
-               <MenubarItem inset>
-                  Reload
-                  {' '}
-                  <MenubarShortcut>⌘R</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem disabled inset>
-                  Force Reload
-                  {' '}
-                  <MenubarShortcut>⇧⌘R</MenubarShortcut>
-               </MenubarItem>
-               <MenubarSeparator />
-               <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-               <MenubarSeparator />
-               <MenubarItem inset>Hide Sidebar</MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-         <MenubarMenu>
-            <MenubarTrigger>Profiles</MenubarTrigger>
-            <MenubarContent>
-               <MenubarRadioGroup value="benoit">
-                  <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-                  <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-                  <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-               </MenubarRadioGroup>
-               <MenubarSeparator />
-               <MenubarItem inset>Edit...</MenubarItem>
-               <MenubarSeparator />
-               <MenubarItem inset>Add Profile...</MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-      </Menubar>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/nav-main copy.tsx b/apps/web/registry/default/block/_sink/components/nav-main copy.tsx
deleted file mode 100644
index 93c5febd..00000000
--- a/apps/web/registry/default/block/_sink/components/nav-main copy.tsx	
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client'
-
-import { ChevronRight, type LucideIcon } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/default/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon?: LucideIcon
-      isActive?: boolean
-      items?: {
-         title: string
-         url: string
-      }[]
-   }[]
-}) {
-   return (
-      <SidebarGroup>
-         <SidebarGroupLabel>Platform</SidebarGroupLabel>
-         <SidebarMenu>
-            {items.map(item => (
-               <Collapsible
-                  key={item.title}
-                  asChild
-                  defaultOpen={item.isActive}
-                  className="group/collapsible"
-               >
-                  <SidebarMenuItem>
-                     <CollapsibleTrigger asChild>
-                        <SidebarMenuButton tooltip={item.title}>
-                           {item.icon && <item.icon />}
-                           <span>{item.title}</span>
-                           <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                        </SidebarMenuButton>
-                     </CollapsibleTrigger>
-                     <CollapsibleContent>
-                        <SidebarMenuSub>
-                           {item.items?.map(subItem => (
-                              <SidebarMenuSubItem key={subItem.title}>
-                                 <SidebarMenuSubButton asChild>
-                                    <a href={subItem.url}>
-                                       <span>{subItem.title}</span>
-                                    </a>
-                                 </SidebarMenuSubButton>
-                              </SidebarMenuSubItem>
-                           ))}
-                        </SidebarMenuSub>
-                     </CollapsibleContent>
-                  </SidebarMenuItem>
-               </Collapsible>
-            ))}
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/nav-main.tsx b/apps/web/registry/default/block/_sink/components/nav-main.tsx
deleted file mode 100644
index 93c5febd..00000000
--- a/apps/web/registry/default/block/_sink/components/nav-main.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client'
-
-import { ChevronRight, type LucideIcon } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/default/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon?: LucideIcon
-      isActive?: boolean
-      items?: {
-         title: string
-         url: string
-      }[]
-   }[]
-}) {
-   return (
-      <SidebarGroup>
-         <SidebarGroupLabel>Platform</SidebarGroupLabel>
-         <SidebarMenu>
-            {items.map(item => (
-               <Collapsible
-                  key={item.title}
-                  asChild
-                  defaultOpen={item.isActive}
-                  className="group/collapsible"
-               >
-                  <SidebarMenuItem>
-                     <CollapsibleTrigger asChild>
-                        <SidebarMenuButton tooltip={item.title}>
-                           {item.icon && <item.icon />}
-                           <span>{item.title}</span>
-                           <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                        </SidebarMenuButton>
-                     </CollapsibleTrigger>
-                     <CollapsibleContent>
-                        <SidebarMenuSub>
-                           {item.items?.map(subItem => (
-                              <SidebarMenuSubItem key={subItem.title}>
-                                 <SidebarMenuSubButton asChild>
-                                    <a href={subItem.url}>
-                                       <span>{subItem.title}</span>
-                                    </a>
-                                 </SidebarMenuSubButton>
-                              </SidebarMenuSubItem>
-                           ))}
-                        </SidebarMenuSub>
-                     </CollapsibleContent>
-                  </SidebarMenuItem>
-               </Collapsible>
-            ))}
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/nav-projects copy.tsx b/apps/web/registry/default/block/_sink/components/nav-projects copy.tsx
deleted file mode 100644
index d4a0073e..00000000
--- a/apps/web/registry/default/block/_sink/components/nav-projects copy.tsx	
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import {
-   Folder,
-   Forward,
-   type LucideIcon,
-   MoreHorizontal,
-   Trash2,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavProjects({
-   projects,
-}: {
-   projects: {
-      name: string
-      url: string
-      icon: LucideIcon
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-         <SidebarGroupLabel>Projects</SidebarGroupLabel>
-         <SidebarMenu>
-            {projects.map(item => (
-               <SidebarMenuItem key={item.name}>
-                  <SidebarMenuButton asChild>
-                     <a href={item.url}>
-                        <item.icon />
-                        <span>{item.name}</span>
-                     </a>
-                  </SidebarMenuButton>
-                  <DropdownMenu>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover>
-                           <MoreHorizontal />
-                           <span className="sr-only">More</span>
-                        </SidebarMenuAction>
-                     </DropdownMenuTrigger>
-                     <DropdownMenuContent
-                        className="w-48 rounded-lg"
-                        side={isMobile ? 'bottom' : 'right'}
-                        align={isMobile ? 'end' : 'start'}
-                     >
-                        <DropdownMenuItem>
-                           <Folder className="text-muted-foreground" />
-                           <span>View Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <Forward className="text-muted-foreground" />
-                           <span>Share Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Trash2 className="text-muted-foreground" />
-                           <span>Delete Project</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuContent>
-                  </DropdownMenu>
-               </SidebarMenuItem>
-            ))}
-            <SidebarMenuItem>
-               <SidebarMenuButton className="text-sidebar-foreground/70">
-                  <MoreHorizontal className="text-sidebar-foreground/70" />
-                  <span>More</span>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/nav-projects.tsx b/apps/web/registry/default/block/_sink/components/nav-projects.tsx
deleted file mode 100644
index d4a0073e..00000000
--- a/apps/web/registry/default/block/_sink/components/nav-projects.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import {
-   Folder,
-   Forward,
-   type LucideIcon,
-   MoreHorizontal,
-   Trash2,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavProjects({
-   projects,
-}: {
-   projects: {
-      name: string
-      url: string
-      icon: LucideIcon
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-         <SidebarGroupLabel>Projects</SidebarGroupLabel>
-         <SidebarMenu>
-            {projects.map(item => (
-               <SidebarMenuItem key={item.name}>
-                  <SidebarMenuButton asChild>
-                     <a href={item.url}>
-                        <item.icon />
-                        <span>{item.name}</span>
-                     </a>
-                  </SidebarMenuButton>
-                  <DropdownMenu>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover>
-                           <MoreHorizontal />
-                           <span className="sr-only">More</span>
-                        </SidebarMenuAction>
-                     </DropdownMenuTrigger>
-                     <DropdownMenuContent
-                        className="w-48 rounded-lg"
-                        side={isMobile ? 'bottom' : 'right'}
-                        align={isMobile ? 'end' : 'start'}
-                     >
-                        <DropdownMenuItem>
-                           <Folder className="text-muted-foreground" />
-                           <span>View Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <Forward className="text-muted-foreground" />
-                           <span>Share Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Trash2 className="text-muted-foreground" />
-                           <span>Delete Project</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuContent>
-                  </DropdownMenu>
-               </SidebarMenuItem>
-            ))}
-            <SidebarMenuItem>
-               <SidebarMenuButton className="text-sidebar-foreground/70">
-                  <MoreHorizontal className="text-sidebar-foreground/70" />
-                  <span>More</span>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/nav-user copy.tsx b/apps/web/registry/default/block/_sink/components/nav-user copy.tsx
deleted file mode 100644
index 28465fdf..00000000
--- a/apps/web/registry/default/block/_sink/components/nav-user copy.tsx	
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="end"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/nav-user.tsx b/apps/web/registry/default/block/_sink/components/nav-user.tsx
deleted file mode 100644
index 28465fdf..00000000
--- a/apps/web/registry/default/block/_sink/components/nav-user.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="end"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/navigation-menu-demo.tsx b/apps/web/registry/default/block/_sink/components/navigation-menu-demo.tsx
deleted file mode 100644
index 847dffbd..00000000
--- a/apps/web/registry/default/block/_sink/components/navigation-menu-demo.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import Link from 'next/link'
-
-import { ny } from '~/lib/utils'
-import {
-   NavigationMenu,
-   NavigationMenuContent,
-   NavigationMenuItem,
-   NavigationMenuLink,
-   NavigationMenuList,
-   NavigationMenuTrigger,
-   navigationMenuTriggerStyle,
-} from '~/registry/default/ui/navigation-menu'
-
-const components: { title: string, href: string, description: string }[] = [
-   {
-      title: 'Alert Dialog',
-      href: '/docs/primitives/alert-dialog',
-      description:
-      'A modal dialog that interrupts the user with important content and expects a response.',
-   },
-   {
-      title: 'Hover Card',
-      href: '/docs/primitives/hover-card',
-      description:
-      'For sighted users to preview content available behind a link.',
-   },
-   {
-      title: 'Progress',
-      href: '/docs/primitives/progress',
-      description:
-      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
-   },
-   {
-      title: 'Scroll-area',
-      href: '/docs/primitives/scroll-area',
-      description: 'Visually or semantically separates content.',
-   },
-   {
-      title: 'Tabs',
-      href: '/docs/primitives/tabs',
-      description:
-      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
-   },
-   {
-      title: 'Tooltip',
-      href: '/docs/primitives/tooltip',
-      description:
-      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
-   },
-]
-
-export function NavigationMenuDemo() {
-   return (
-      <NavigationMenu>
-         <NavigationMenuList>
-            <NavigationMenuItem>
-               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-               <NavigationMenuContent>
-                  <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                     <li className="row-span-3">
-                        <NavigationMenuLink asChild>
-                           <a
-                              className="from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md"
-                              href="/"
-                           >
-                              <div className="mb-2 mt-4 text-lg font-medium">
-                                 shadcn/ui
-                              </div>
-                              <p className="text-muted-foreground text-sm leading-tight">
-                                 Beautifully designed components built with Radix UI and
-                                 Tailwind CSS.
-                              </p>
-                           </a>
-                        </NavigationMenuLink>
-                     </li>
-                     <ListItem href="/docs" title="Introduction">
-                        Re-usable components built using Radix UI and Tailwind CSS.
-                     </ListItem>
-                     <ListItem href="/docs/installation" title="Installation">
-                        How to install dependencies and structure your app.
-                     </ListItem>
-                     <ListItem href="/docs/primitives/typography" title="Typography">
-                        Styles for headings, paragraphs, lists...etc
-                     </ListItem>
-                  </ul>
-               </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-               <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-               <NavigationMenuContent>
-                  <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                     {components.map(component => (
-                        <ListItem
-                           key={component.title}
-                           title={component.title}
-                           href={component.href}
-                        >
-                           {component.description}
-                        </ListItem>
-                     ))}
-                  </ul>
-               </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-               <Link href="/docs" legacyBehavior passHref>
-                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                     Documentation
-                  </NavigationMenuLink>
-               </Link>
-            </NavigationMenuItem>
-         </NavigationMenuList>
-      </NavigationMenu>
-   )
-}
-
-const ListItem = React.forwardRef<
-   React.ElementRef<'a'>,
-   React.ComponentPropsWithoutRef<'a'>
->(({ className, title, children, ...props }, ref) => {
-   return (
-      <li>
-         <NavigationMenuLink asChild>
-            <a
-               ref={ref}
-               className={ny(
-                  'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors',
-                  className,
-               )}
-               {...props}
-            >
-               <div className="text-sm font-medium leading-none">{title}</div>
-               <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
-                  {children}
-               </p>
-            </a>
-         </NavigationMenuLink>
-      </li>
-   )
-})
-ListItem.displayName = 'ListItem'
diff --git a/apps/web/registry/default/block/_sink/components/pagination-demo.tsx b/apps/web/registry/default/block/_sink/components/pagination-demo.tsx
deleted file mode 100644
index ae8d986c..00000000
--- a/apps/web/registry/default/block/_sink/components/pagination-demo.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-   Pagination,
-   PaginationContent,
-   PaginationEllipsis,
-   PaginationItem,
-   PaginationLink,
-   PaginationNext,
-   PaginationPrevious,
-} from '~/registry/default/ui/pagination'
-
-export function PaginationDemo() {
-   return (
-      <Pagination>
-         <PaginationContent>
-            <PaginationItem>
-               <PaginationPrevious href="#" />
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationLink href="#">1</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationLink href="#" isActive>
-                  2
-               </PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationLink href="#">3</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationEllipsis />
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationNext href="#" />
-            </PaginationItem>
-         </PaginationContent>
-      </Pagination>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/popover-demo.tsx b/apps/web/registry/default/block/_sink/components/popover-demo.tsx
deleted file mode 100644
index b2edb48d..00000000
--- a/apps/web/registry/default/block/_sink/components/popover-demo.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-export function PopoverDemo() {
-   return (
-      <Popover>
-         <PopoverTrigger asChild>
-            <Button variant="outline">Open popover</Button>
-         </PopoverTrigger>
-         <PopoverContent className="w-80">
-            <div className="grid gap-4">
-               <div className="space-y-2">
-                  <h4 className="font-medium leading-none">Dimensions</h4>
-                  <p className="text-muted-foreground text-sm">
-                     Set the dimensions for the layer.
-                  </p>
-               </div>
-               <div className="grid gap-2">
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="width">Width</Label>
-                     <Input
-                        id="width"
-                        defaultValue="100%"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="maxWidth">Max. width</Label>
-                     <Input
-                        id="maxWidth"
-                        defaultValue="300px"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="height">Height</Label>
-                     <Input
-                        id="height"
-                        defaultValue="25px"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="maxHeight">Max. height</Label>
-                     <Input
-                        id="maxHeight"
-                        defaultValue="none"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-               </div>
-            </div>
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/progress-demo.tsx b/apps/web/registry/default/block/_sink/components/progress-demo.tsx
deleted file mode 100644
index be312ab9..00000000
--- a/apps/web/registry/default/block/_sink/components/progress-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Progress } from '~/registry/default/ui/progress'
-
-export function ProgressDemo() {
-   const [progress, setProgress] = React.useState(13)
-
-   React.useEffect(() => {
-      const timer = setTimeout(() => setProgress(66), 500)
-      return () => clearTimeout(timer)
-   }, [])
-
-   return <Progress value={progress} className="w-3/5" />
-}
diff --git a/apps/web/registry/default/block/_sink/components/radio-group-demo.tsx b/apps/web/registry/default/block/_sink/components/radio-group-demo.tsx
deleted file mode 100644
index ce44ad00..00000000
--- a/apps/web/registry/default/block/_sink/components/radio-group-demo.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Label } from '~/registry/default/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'
-
-export function RadioGroupDemo() {
-   return (
-      <RadioGroup defaultValue="comfortable">
-         <div className="flex items-center space-x-2">
-            <RadioGroupItem value="default" id="r1" />
-            <Label htmlFor="r1">Default</Label>
-         </div>
-         <div className="flex items-center space-x-2">
-            <RadioGroupItem value="comfortable" id="r2" />
-            <Label htmlFor="r2">Comfortable</Label>
-         </div>
-         <div className="flex items-center space-x-2">
-            <RadioGroupItem value="compact" id="r3" />
-            <Label htmlFor="r3">Compact</Label>
-         </div>
-      </RadioGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/resizable-handle.tsx b/apps/web/registry/default/block/_sink/components/resizable-handle.tsx
deleted file mode 100644
index 5f0aa60f..00000000
--- a/apps/web/registry/default/block/_sink/components/resizable-handle.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-   ResizableHandle,
-   ResizablePanel,
-   ResizablePanelGroup,
-} from '~/registry/default/ui/resizable'
-
-export function ResizableHandleDemo() {
-   return (
-      <ResizablePanelGroup
-         direction="horizontal"
-         className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
-      >
-         <ResizablePanel defaultSize={25}>
-            <div className="flex h-full items-center justify-center p-6">
-               <span className="font-semibold">Sidebar</span>
-            </div>
-         </ResizablePanel>
-         <ResizableHandle withHandle />
-         <ResizablePanel defaultSize={75}>
-            <div className="flex h-full items-center justify-center p-6">
-               <span className="font-semibold">Content</span>
-            </div>
-         </ResizablePanel>
-      </ResizablePanelGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/scroll-area-demo.tsx b/apps/web/registry/default/block/_sink/components/scroll-area-demo.tsx
deleted file mode 100644
index 03f18323..00000000
--- a/apps/web/registry/default/block/_sink/components/scroll-area-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react'
-
-import { ScrollArea } from '~/registry/default/ui/scroll-area'
-import { Separator } from '~/registry/default/ui/separator'
-
-const tags = Array.from({ length: 50 }).map(
-   (_, i, a) => `v1.2.0-beta.${a.length - i}`,
-)
-
-export function ScrollAreaDemo() {
-   return (
-      <ScrollArea className="h-72 w-48 rounded-md border">
-         <div className="p-4">
-            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
-            {tags.map(tag => (
-               <React.Fragment key={tag}>
-                  <div className="text-sm">{tag}</div>
-                  <Separator className="my-2" />
-               </React.Fragment>
-            ))}
-         </div>
-      </ScrollArea>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/select-demo.tsx b/apps/web/registry/default/block/_sink/components/select-demo.tsx
deleted file mode 100644
index 54c5cdb7..00000000
--- a/apps/web/registry/default/block/_sink/components/select-demo.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react'
-
-import {
-   Select,
-   SelectContent,
-   SelectGroup,
-   SelectItem,
-   SelectLabel,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-
-export function SelectDemo() {
-   return (
-      <Select>
-         <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Select a fruit" />
-         </SelectTrigger>
-         <SelectContent>
-            <SelectGroup>
-               <SelectLabel>Fruits</SelectLabel>
-               <SelectItem value="apple">Apple</SelectItem>
-               <SelectItem value="banana">Banana</SelectItem>
-               <SelectItem value="blueberry">Blueberry</SelectItem>
-               <SelectItem value="grapes">Grapes</SelectItem>
-               <SelectItem value="pineapple">Pineapple</SelectItem>
-            </SelectGroup>
-         </SelectContent>
-      </Select>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/separator-demo.tsx b/apps/web/registry/default/block/_sink/components/separator-demo.tsx
deleted file mode 100644
index ea99c704..00000000
--- a/apps/web/registry/default/block/_sink/components/separator-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Separator } from '~/registry/default/ui/separator'
-
-export function SeparatorDemo() {
-   return (
-      <div>
-         <div className="space-y-1">
-            <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-            <p className="text-muted-foreground text-sm">
-               An open-source UI component library.
-            </p>
-         </div>
-         <Separator className="my-4" />
-         <div className="flex h-5 items-center space-x-4 text-sm">
-            <div>Blog</div>
-            <Separator orientation="vertical" />
-            <div>Docs</div>
-            <Separator orientation="vertical" />
-            <div>Source</div>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/sheet-demo.tsx b/apps/web/registry/default/block/_sink/components/sheet-demo.tsx
deleted file mode 100644
index f5bc4470..00000000
--- a/apps/web/registry/default/block/_sink/components/sheet-demo.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Sheet,
-   SheetClose,
-   SheetContent,
-   SheetDescription,
-   SheetFooter,
-   SheetHeader,
-   SheetTitle,
-   SheetTrigger,
-} from '~/registry/default/ui/sheet'
-
-export function SheetDemo() {
-   return (
-      <Sheet>
-         <SheetTrigger asChild>
-            <Button variant="outline">Open</Button>
-         </SheetTrigger>
-         <SheetContent>
-            <SheetHeader>
-               <SheetTitle>Edit profile</SheetTitle>
-               <SheetDescription>
-                  Make changes to your profile here. Click save when you're done.
-               </SheetDescription>
-            </SheetHeader>
-            <div className="grid gap-4 py-4">
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="name" className="text-right">
-                     Name
-                  </Label>
-                  <Input id="name" value="Pedro Duarte" className="col-span-3" />
-               </div>
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="username" className="text-right">
-                     Username
-                  </Label>
-                  <Input id="username" value="@peduarte" className="col-span-3" />
-               </div>
-            </div>
-            <SheetFooter>
-               <SheetClose asChild>
-                  <Button type="submit">Save changes</Button>
-               </SheetClose>
-            </SheetFooter>
-         </SheetContent>
-      </Sheet>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/skeleton-demo.tsx b/apps/web/registry/default/block/_sink/components/skeleton-demo.tsx
deleted file mode 100644
index 4bf1a683..00000000
--- a/apps/web/registry/default/block/_sink/components/skeleton-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Skeleton } from '~/registry/default/ui/skeleton'
-
-export function SkeletonDemo() {
-   return (
-      <div className="flex items-center space-x-4">
-         <Skeleton className="size-12 rounded-full" />
-         <div className="space-y-2">
-            <Skeleton className="h-4 w-[250px]" />
-            <Skeleton className="h-4 w-[200px]" />
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/slider-demo.tsx b/apps/web/registry/default/block/_sink/components/slider-demo.tsx
deleted file mode 100644
index 771c7c35..00000000
--- a/apps/web/registry/default/block/_sink/components/slider-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/default/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export function SliderDemo({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[50]}
-         max={100}
-         step={1}
-         className={ny('w-3/5', className)}
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/sonner-demo.tsx b/apps/web/registry/default/block/_sink/components/sonner-demo.tsx
deleted file mode 100644
index 6e4dd213..00000000
--- a/apps/web/registry/default/block/_sink/components/sonner-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-
-import { toast } from 'sonner'
-
-import { Button } from '~/registry/default/ui/button'
-
-export function SonnerDemo() {
-   return (
-      <Button
-         variant="outline"
-         onClick={() =>
-            toast('Event has been created', {
-               description: 'Sunday, December 03, 2023 at 9:00 AM',
-               action: {
-                  label: 'Undo',
-                  // eslint-disable-next-line no-console
-                  onClick: () => console.log('Undo'),
-               },
-            })}
-      >
-         Show Toast
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/switch-demo.tsx b/apps/web/registry/default/block/_sink/components/switch-demo.tsx
deleted file mode 100644
index ec30a05f..00000000
--- a/apps/web/registry/default/block/_sink/components/switch-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Label } from '~/registry/default/ui/label'
-import { Switch } from '~/registry/default/ui/switch'
-
-export function SwitchDemo() {
-   return (
-      <div className="flex items-center space-x-2">
-         <Switch id="airplane-mode" />
-         <Label htmlFor="airplane-mode">Airplane Mode</Label>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/table-demo.tsx b/apps/web/registry/default/block/_sink/components/table-demo.tsx
deleted file mode 100644
index 3c12ee07..00000000
--- a/apps/web/registry/default/block/_sink/components/table-demo.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-   Table,
-   TableBody,
-   TableCaption,
-   TableCell,
-   TableFooter,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/default/ui/table'
-
-const invoices = [
-   {
-      invoice: 'INV001',
-      paymentStatus: 'Paid',
-      totalAmount: '$250.00',
-      paymentMethod: 'Credit Card',
-   },
-   {
-      invoice: 'INV002',
-      paymentStatus: 'Pending',
-      totalAmount: '$150.00',
-      paymentMethod: 'PayPal',
-   },
-   {
-      invoice: 'INV003',
-      paymentStatus: 'Unpaid',
-      totalAmount: '$350.00',
-      paymentMethod: 'Bank Transfer',
-   },
-   {
-      invoice: 'INV004',
-      paymentStatus: 'Paid',
-      totalAmount: '$450.00',
-      paymentMethod: 'Credit Card',
-   },
-   {
-      invoice: 'INV005',
-      paymentStatus: 'Paid',
-      totalAmount: '$550.00',
-      paymentMethod: 'PayPal',
-   },
-   {
-      invoice: 'INV006',
-      paymentStatus: 'Pending',
-      totalAmount: '$200.00',
-      paymentMethod: 'Bank Transfer',
-   },
-   {
-      invoice: 'INV007',
-      paymentStatus: 'Unpaid',
-      totalAmount: '$300.00',
-      paymentMethod: 'Credit Card',
-   },
-]
-
-export function TableDemo() {
-   return (
-      <Table>
-         <TableCaption>A list of your recent invoices.</TableCaption>
-         <TableHeader>
-            <TableRow>
-               <TableHead className="w-[100px]">Invoice</TableHead>
-               <TableHead>Status</TableHead>
-               <TableHead>Method</TableHead>
-               <TableHead className="text-right">Amount</TableHead>
-            </TableRow>
-         </TableHeader>
-         <TableBody>
-            {invoices.map(invoice => (
-               <TableRow key={invoice.invoice}>
-                  <TableCell className="font-medium">{invoice.invoice}</TableCell>
-                  <TableCell>{invoice.paymentStatus}</TableCell>
-                  <TableCell>{invoice.paymentMethod}</TableCell>
-                  <TableCell className="text-right">{invoice.totalAmount}</TableCell>
-               </TableRow>
-            ))}
-         </TableBody>
-         <TableFooter>
-            <TableRow>
-               <TableCell colSpan={3}>Total</TableCell>
-               <TableCell className="text-right">$2,500.00</TableCell>
-            </TableRow>
-         </TableFooter>
-      </Table>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/tabs-demo.tsx b/apps/web/registry/default/block/_sink/components/tabs-demo.tsx
deleted file mode 100644
index 4c240ce2..00000000
--- a/apps/web/registry/default/block/_sink/components/tabs-demo.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Tabs,
-   TabsContent,
-   TabsList,
-   TabsTrigger,
-} from '~/registry/default/ui/tabs'
-
-export function TabsDemo() {
-   return (
-      <Tabs defaultValue="account" className="w-[400px]">
-         <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="account">Account</TabsTrigger>
-            <TabsTrigger value="password">Password</TabsTrigger>
-         </TabsList>
-         <TabsContent value="account">
-            <Card>
-               <CardHeader>
-                  <CardTitle>Account</CardTitle>
-                  <CardDescription>
-                     Make changes to your account here. Click save when you're done.
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="space-y-2">
-                  <div className="space-y-1">
-                     <Label htmlFor="name">Name</Label>
-                     <Input id="name" defaultValue="Pedro Duarte" />
-                  </div>
-                  <div className="space-y-1">
-                     <Label htmlFor="username">Username</Label>
-                     <Input id="username" defaultValue="@peduarte" />
-                  </div>
-               </CardContent>
-               <CardFooter>
-                  <Button>Save changes</Button>
-               </CardFooter>
-            </Card>
-         </TabsContent>
-         <TabsContent value="password">
-            <Card>
-               <CardHeader>
-                  <CardTitle>Password</CardTitle>
-                  <CardDescription>
-                     Change your password here. After saving, you'll be logged out.
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="space-y-2">
-                  <div className="space-y-1">
-                     <Label htmlFor="current">Current password</Label>
-                     <Input id="current" type="password" />
-                  </div>
-                  <div className="space-y-1">
-                     <Label htmlFor="new">New password</Label>
-                     <Input id="new" type="password" />
-                  </div>
-               </CardContent>
-               <CardFooter>
-                  <Button>Save password</Button>
-               </CardFooter>
-            </Card>
-         </TabsContent>
-      </Tabs>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/team-switcher copy.tsx b/apps/web/registry/default/block/_sink/components/team-switcher copy.tsx
deleted file mode 100644
index 196f27e3..00000000
--- a/apps/web/registry/default/block/_sink/components/team-switcher copy.tsx	
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronsUpDown, Plus } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function TeamSwitcher({
-   teams,
-}: {
-   teams: {
-      name: string
-      logo: React.ElementType
-      plan: string
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-   const [activeTeam, setActiveTeam] = React.useState(teams[0])
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                        <activeTeam.logo className="size-4" />
-                     </div>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">
-                           {activeTeam.name}
-                        </span>
-                        <span className="truncate text-xs">{activeTeam.plan}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  align="start"
-                  side={isMobile ? 'bottom' : 'right'}
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
-                     Teams
-                  </DropdownMenuLabel>
-                  {teams.map((team, index) => (
-                     <DropdownMenuItem
-                        key={team.name}
-                        onClick={() => setActiveTeam(team)}
-                        className="gap-2 p-2"
-                     >
-                        <div className="flex size-6 items-center justify-center rounded-sm border">
-                           <team.logo className="size-4 shrink-0" />
-                        </div>
-                        {team.name}
-                        <DropdownMenuShortcut>
-                           ⌘
-                           {index + 1}
-                        </DropdownMenuShortcut>
-                     </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="gap-2 p-2">
-                     <div className="bg-background flex size-6 items-center justify-center rounded-md border">
-                        <Plus className="size-4" />
-                     </div>
-                     <div className="text-muted-foreground font-medium">Add team</div>
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/team-switcher.tsx b/apps/web/registry/default/block/_sink/components/team-switcher.tsx
deleted file mode 100644
index 196f27e3..00000000
--- a/apps/web/registry/default/block/_sink/components/team-switcher.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronsUpDown, Plus } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function TeamSwitcher({
-   teams,
-}: {
-   teams: {
-      name: string
-      logo: React.ElementType
-      plan: string
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-   const [activeTeam, setActiveTeam] = React.useState(teams[0])
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                        <activeTeam.logo className="size-4" />
-                     </div>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">
-                           {activeTeam.name}
-                        </span>
-                        <span className="truncate text-xs">{activeTeam.plan}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  align="start"
-                  side={isMobile ? 'bottom' : 'right'}
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
-                     Teams
-                  </DropdownMenuLabel>
-                  {teams.map((team, index) => (
-                     <DropdownMenuItem
-                        key={team.name}
-                        onClick={() => setActiveTeam(team)}
-                        className="gap-2 p-2"
-                     >
-                        <div className="flex size-6 items-center justify-center rounded-sm border">
-                           <team.logo className="size-4 shrink-0" />
-                        </div>
-                        {team.name}
-                        <DropdownMenuShortcut>
-                           ⌘
-                           {index + 1}
-                        </DropdownMenuShortcut>
-                     </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="gap-2 p-2">
-                     <div className="bg-background flex size-6 items-center justify-center rounded-md border">
-                        <Plus className="size-4" />
-                     </div>
-                     <div className="text-muted-foreground font-medium">Add team</div>
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/textarea-demo.tsx b/apps/web/registry/default/block/_sink/components/textarea-demo.tsx
deleted file mode 100644
index 9b967387..00000000
--- a/apps/web/registry/default/block/_sink/components/textarea-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Textarea } from '~/registry/default/ui/textarea'
-
-export function TextareaDemo() {
-   return <Textarea placeholder="Type your message here." />
-}
diff --git a/apps/web/registry/default/block/_sink/components/toast-demo.tsx b/apps/web/registry/default/block/_sink/components/toast-demo.tsx
deleted file mode 100644
index 7eb8c3df..00000000
--- a/apps/web/registry/default/block/_sink/components/toast-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { useToast } from '~/registry/default/hooks/use-toast'
-import { Button } from '~/registry/default/ui/button'
-import { ToastAction } from '~/registry/default/ui/toast'
-
-export function ToastDemo() {
-   const { toast } = useToast()
-
-   return (
-      <Button
-         variant="outline"
-         onClick={() => {
-            toast({
-               title: 'Scheduled: Catch up ',
-               description: 'Friday, February 10, 2023 at 5:57 PM',
-               action: (
-                  <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
-               ),
-            })
-         }}
-      >
-         Add to calendar
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/toggle-demo.tsx b/apps/web/registry/default/block/_sink/components/toggle-demo.tsx
deleted file mode 100644
index 9c975b1e..00000000
--- a/apps/web/registry/default/block/_sink/components/toggle-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Bold } from 'lucide-react'
-
-import { Toggle } from '~/registry/default/ui/toggle'
-
-export function ToggleDemo() {
-   return (
-      <Toggle aria-label="Toggle italic">
-         <Bold className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/toggle-disabled.tsx b/apps/web/registry/default/block/_sink/components/toggle-disabled.tsx
deleted file mode 100644
index 8740c5c7..00000000
--- a/apps/web/registry/default/block/_sink/components/toggle-disabled.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Underline } from 'lucide-react'
-
-import { Toggle } from '~/registry/default/ui/toggle'
-
-export function ToggleDisabled() {
-   return (
-      <Toggle aria-label="Toggle italic" disabled>
-         <Underline className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/toggle-group-demo.tsx b/apps/web/registry/default/block/_sink/components/toggle-group-demo.tsx
deleted file mode 100644
index 174aad87..00000000
--- a/apps/web/registry/default/block/_sink/components/toggle-group-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Bold, Italic, Underline } from 'lucide-react'
-
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/default/ui/toggle-group'
-
-export function ToggleGroupDemo() {
-   return (
-      <ToggleGroup type="multiple">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <Bold className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <Italic className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-            <Underline className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/toggle-outline.tsx b/apps/web/registry/default/block/_sink/components/toggle-outline.tsx
deleted file mode 100644
index 3c5dae22..00000000
--- a/apps/web/registry/default/block/_sink/components/toggle-outline.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Italic } from 'lucide-react'
-
-import { Toggle } from '~/registry/default/ui/toggle'
-
-export function ToggleOutline() {
-   return (
-      <Toggle variant="outline" aria-label="Toggle italic">
-         <Italic />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/toggle-with-text.tsx b/apps/web/registry/default/block/_sink/components/toggle-with-text.tsx
deleted file mode 100644
index 91a7d3b3..00000000
--- a/apps/web/registry/default/block/_sink/components/toggle-with-text.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Italic } from 'lucide-react'
-
-import { Toggle } from '~/registry/default/ui/toggle'
-
-export function ToggleWithText() {
-   return (
-      <Toggle aria-label="Toggle italic">
-         <Italic />
-         Italic
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/components/tooltip-demo.tsx b/apps/web/registry/default/block/_sink/components/tooltip-demo.tsx
deleted file mode 100644
index b2b57fde..00000000
--- a/apps/web/registry/default/block/_sink/components/tooltip-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
-
-export function TooltipDemo() {
-   return (
-      <TooltipProvider>
-         <Tooltip>
-            <TooltipTrigger asChild>
-               <Button variant="outline">Hover</Button>
-            </TooltipTrigger>
-            <TooltipContent>
-               <p>Add to library</p>
-            </TooltipContent>
-         </Tooltip>
-      </TooltipProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/_sink/page.tsx b/apps/web/registry/default/block/_sink/page.tsx
deleted file mode 100644
index c572762c..00000000
--- a/apps/web/registry/default/block/_sink/page.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import { AccordionDemo } from '~/registry/default/block/_sink/components/accordion-demo'
-import { AlertDemo } from '~/registry/default/block/_sink/components/alert-demo'
-import { AlertDialogDemo } from '~/registry/default/block/_sink/components/alert-dialog-demo'
-import { AppSidebar } from '~/registry/default/block/_sink/components/app-sidebar'
-import { AspectRatioDemo } from '~/registry/default/block/_sink/components/aspect-ratio-demo'
-import { AvatarDemo } from '~/registry/default/block/_sink/components/avatar-demo'
-import { BadgeDemo } from '~/registry/default/block/_sink/components/badge-demo'
-import { BadgeDestructive } from '~/registry/default/block/_sink/components/badge-destructive'
-import { BadgeOutline } from '~/registry/default/block/_sink/components/badge-outline'
-import { BadgeSecondary } from '~/registry/default/block/_sink/components/badge-secondary'
-import { BreadcrumbDemo } from '~/registry/default/block/_sink/components/breadcrumb-demo'
-import { ButtonDemo } from '~/registry/default/block/_sink/components/button-demo'
-import { ButtonDestructive } from '~/registry/default/block/_sink/components/button-destructive'
-import { ButtonGhost } from '~/registry/default/block/_sink/components/button-ghost'
-import { ButtonLink } from '~/registry/default/block/_sink/components/button-link'
-import { ButtonLoading } from '~/registry/default/block/_sink/components/button-loading'
-import { ButtonOutline } from '~/registry/default/block/_sink/components/button-outline'
-import { ButtonSecondary } from '~/registry/default/block/_sink/components/button-secondary'
-import { ButtonWithIcon } from '~/registry/default/block/_sink/components/button-with-icon'
-import { CalendarDemo } from '~/registry/default/block/_sink/components/calendar-demo'
-import { CardDemo } from '~/registry/default/block/_sink/components/card-demo'
-import { CarouselDemo } from '~/registry/default/block/_sink/components/carousel-demo'
-import { CheckboxDemo } from '~/registry/default/block/_sink/components/checkbox-demo'
-import { CollapsibleDemo } from '~/registry/default/block/_sink/components/collapsible-demo'
-import { ComboboxDemo } from '~/registry/default/block/_sink/components/combobox-demo'
-import { CommandDemo } from '~/registry/default/block/_sink/components/command-demo'
-import { ComponentWrapper } from '~/registry/default/block/_sink/components/component-wrapper'
-import { ContextMenuDemo } from '~/registry/default/block/_sink/components/context-menu-demo'
-import { DatePickerDemo } from '~/registry/default/block/_sink/components/date-picker-demo'
-import { DialogDemo } from '~/registry/default/block/_sink/components/dialog-demo'
-import { DrawerDemo } from '~/registry/default/block/_sink/components/drawer-demo'
-import { DropdownMenuDemo } from '~/registry/default/block/_sink/components/dropdown-menu-demo'
-import { HoverCardDemo } from '~/registry/default/block/_sink/components/hover-card-demo'
-import { InputDemo } from '~/registry/default/block/_sink/components/input-demo'
-import { InputOTPDemo } from '~/registry/default/block/_sink/components/input-otp-demo'
-import { LabelDemo } from '~/registry/default/block/_sink/components/label-demo'
-import { MenubarDemo } from '~/registry/default/block/_sink/components/menubar-demo'
-import { NavigationMenuDemo } from '~/registry/default/block/_sink/components/navigation-menu-demo'
-import { PaginationDemo } from '~/registry/default/block/_sink/components/pagination-demo'
-import { PopoverDemo } from '~/registry/default/block/_sink/components/popover-demo'
-import { ProgressDemo } from '~/registry/default/block/_sink/components/progress-demo'
-import { RadioGroupDemo } from '~/registry/default/block/_sink/components/radio-group-demo'
-import { ResizableHandleDemo } from '~/registry/default/block/_sink/components/resizable-handle'
-import { ScrollAreaDemo } from '~/registry/default/block/_sink/components/scroll-area-demo'
-import { SelectDemo } from '~/registry/default/block/_sink/components/select-demo'
-import { SeparatorDemo } from '~/registry/default/block/_sink/components/separator-demo'
-import { SheetDemo } from '~/registry/default/block/_sink/components/sheet-demo'
-import { SkeletonDemo } from '~/registry/default/block/_sink/components/skeleton-demo'
-import { SliderDemo } from '~/registry/default/block/_sink/components/slider-demo'
-import { SonnerDemo } from '~/registry/default/block/_sink/components/sonner-demo'
-import { SwitchDemo } from '~/registry/default/block/_sink/components/switch-demo'
-import { TableDemo } from '~/registry/default/block/_sink/components/table-demo'
-import { TabsDemo } from '~/registry/default/block/_sink/components/tabs-demo'
-import { TextareaDemo } from '~/registry/default/block/_sink/components/textarea-demo'
-import { ToastDemo } from '~/registry/default/block/_sink/components/toast-demo'
-import { ToggleDemo } from '~/registry/default/block/_sink/components/toggle-demo'
-import { ToggleDisabled } from '~/registry/default/block/_sink/components/toggle-disabled'
-import { ToggleGroupDemo } from '~/registry/default/block/_sink/components/toggle-group-demo'
-import { ToggleOutline } from '~/registry/default/block/_sink/components/toggle-outline'
-import { ToggleWithText } from '~/registry/default/block/_sink/components/toggle-with-text'
-import { TooltipDemo } from '~/registry/default/block/_sink/components/tooltip-demo'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export default function SinkPage() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <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">
-               <div className="flex items-center gap-2 px-4">
-                  <SidebarTrigger className="-ml-1" />
-                  <Separator orientation="vertical" className="mr-2 h-4" />
-                  <Breadcrumb>
-                     <BreadcrumbList>
-                        <BreadcrumbItem className="hidden md:block">
-                           <BreadcrumbLink href="#">
-                              Building Your Application
-                           </BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator className="hidden md:block" />
-                        <BreadcrumbItem>
-                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                        </BreadcrumbItem>
-                     </BreadcrumbList>
-                  </Breadcrumb>
-               </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-                  <ComponentWrapper name="Accordion">
-                     <AccordionDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Alert">
-                     <AlertDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="AlertDialog">
-                     <AlertDialogDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="AspectRatio">
-                     <AspectRatioDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Avatar">
-                     <AvatarDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Badge">
-                     <BadgeDemo />
-                     <BadgeDestructive />
-                     <BadgeOutline />
-                     <BadgeSecondary />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Breadcrumb">
-                     <BreadcrumbDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Button">
-                     <div className="flex items-center gap-2">
-                        <ButtonDemo />
-                        <ButtonDestructive />
-                        <ButtonGhost />
-                        <ButtonLink />
-                     </div>
-                     <div className="flex items-center gap-2">
-                        <ButtonLoading />
-                        <ButtonOutline />
-                        <ButtonSecondary />
-                     </div>
-                     <div className="flex items-center gap-2">
-                        <ButtonWithIcon />
-                     </div>
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Calendar">
-                     <CalendarDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Card">
-                     <CardDemo className="w-full" />
-                  </ComponentWrapper>
-                  <ComponentWrapper
-                     name="Carousel"
-                     className="[&_.max-w-xs]:max-w-[70%]"
-                  >
-                     <CarouselDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Checkbox">
-                     <CheckboxDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Collapsible">
-                     <CollapsibleDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Combobox">
-                     <ComboboxDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper
-                     name="Command"
-                     className="[&_[cmdk-root]]:md:min-w-max"
-                  >
-                     <CommandDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="ContextMenu">
-                     <ContextMenuDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="DatePicker">
-                     <DatePickerDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Dialog">
-                     <DialogDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Drawer">
-                     <DrawerDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="DropdownMenu">
-                     <DropdownMenuDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="HoverCard">
-                     <HoverCardDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Input">
-                     <InputDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="InputOTP">
-                     <InputOTPDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Label">
-                     <LabelDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Menubar">
-                     <MenubarDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="NavigationMenu" className="col-span-2">
-                     <NavigationMenuDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Pagination">
-                     <PaginationDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Popover">
-                     <PopoverDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Progress">
-                     <ProgressDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="RadioGroup">
-                     <RadioGroupDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Resizable" className="col-span-2">
-                     <ResizableHandleDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="ScrollArea">
-                     <ScrollAreaDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Select">
-                     <SelectDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Separator">
-                     <SeparatorDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Sheet">
-                     <SheetDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Skeleton">
-                     <SkeletonDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Slider">
-                     <SliderDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Sonner">
-                     <SonnerDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Switch">
-                     <SwitchDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Table" className="col-span-2">
-                     <TableDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Tabs">
-                     <TabsDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Textarea">
-                     <TextareaDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Toast">
-                     <ToastDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Toggle">
-                     <div className="flex items-center gap-2">
-                        <ToggleDemo />
-                        <ToggleDisabled />
-                        <ToggleOutline />
-                        <ToggleWithText />
-                     </div>
-                  </ComponentWrapper>
-                  <ComponentWrapper name="ToggleGroup">
-                     <ToggleGroupDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Tooltip">
-                     <TooltipDemo />
-                  </ComponentWrapper>
-               </div>
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/authentication-01.tsx b/apps/web/registry/default/block/authentication-01.tsx
deleted file mode 100644
index faf4c266..00000000
--- a/apps/web/registry/default/block/authentication-01.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export const description
-  = 'A simple login form with email and password. The submit button says \'Sign in\'.'
-
-export const iframeHeight = '600px'
-
-export const containerClassName
-  = 'w-full h-screen flex items-center justify-center px-4'
-
-export default function LoginForm() {
-   return (
-      <Card className="w-full max-w-sm">
-         <CardHeader>
-            <CardTitle className="text-2xl">Login</CardTitle>
-            <CardDescription>
-               Enter your email below to login to your account.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-4">
-            <div className="grid gap-2">
-               <Label htmlFor="email">Email</Label>
-               <Input id="email" type="email" placeholder="m@example.com" required />
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor="password">Password</Label>
-               <Input id="password" type="password" required />
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button className="w-full">Sign in</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/authentication-02.tsx b/apps/web/registry/default/block/authentication-02.tsx
deleted file mode 100644
index 07ac9580..00000000
--- a/apps/web/registry/default/block/authentication-02.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import Link from 'next/link'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export const description
-  = 'A login form with email and password. There\'s an option to login with Google and a link to sign up if you don\'t have an account.'
-
-export const iframeHeight = '600px'
-
-export const containerClassName
-  = 'w-full h-screen flex items-center justify-center px-4'
-
-export default function LoginForm() {
-   return (
-      <Card className="mx-auto max-w-sm">
-         <CardHeader>
-            <CardTitle className="text-2xl">Login</CardTitle>
-            <CardDescription>
-               Enter your email below to login to your account
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-4">
-               <div className="grid gap-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                     id="email"
-                     type="email"
-                     placeholder="m@example.com"
-                     required
-                  />
-               </div>
-               <div className="grid gap-2">
-                  <div className="flex items-center">
-                     <Label htmlFor="password">Password</Label>
-                     <Link href="#" className="ml-auto inline-block text-sm underline">
-                        Forgot your password?
-                     </Link>
-                  </div>
-                  <Input id="password" type="password" required />
-               </div>
-               <Button type="submit" className="w-full">
-                  Login
-               </Button>
-               <Button variant="outline" className="w-full">
-                  Login with Google
-               </Button>
-            </div>
-            <div className="mt-4 text-center text-sm">
-               Don&apos;t have an account?
-               {' '}
-               <Link href="#" className="underline">
-                  Sign up
-               </Link>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/authentication-03.tsx b/apps/web/registry/default/block/authentication-03.tsx
deleted file mode 100644
index f2f880f1..00000000
--- a/apps/web/registry/default/block/authentication-03.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import Link from 'next/link'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export const description
-  = 'A sign up form with first name, last name, email and password inside a card. There\'s an option to sign up with GitHub and a link to login if you already have an account'
-
-export const iframeHeight = '600px'
-
-export const containerClassName
-  = 'w-full h-screen flex items-center justify-center px-4'
-
-export default function LoginForm() {
-   return (
-      <Card className="mx-auto max-w-sm">
-         <CardHeader>
-            <CardTitle className="text-xl">Sign Up</CardTitle>
-            <CardDescription>
-               Enter your information to create an account
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-4">
-               <div className="grid grid-cols-2 gap-4">
-                  <div className="grid gap-2">
-                     <Label htmlFor="first-name">First name</Label>
-                     <Input id="first-name" placeholder="Max" required />
-                  </div>
-                  <div className="grid gap-2">
-                     <Label htmlFor="last-name">Last name</Label>
-                     <Input id="last-name" placeholder="Robinson" required />
-                  </div>
-               </div>
-               <div className="grid gap-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                     id="email"
-                     type="email"
-                     placeholder="m@example.com"
-                     required
-                  />
-               </div>
-               <div className="grid gap-2">
-                  <Label htmlFor="password">Password</Label>
-                  <Input id="password" type="password" />
-               </div>
-               <Button type="submit" className="w-full">
-                  Create an account
-               </Button>
-               <Button variant="outline" className="w-full">
-                  Sign up with GitHub
-               </Button>
-            </div>
-            <div className="mt-4 text-center text-sm">
-               Already have an account?
-               {' '}
-               <Link href="#" className="underline">
-                  Sign in
-               </Link>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/authentication-04.tsx b/apps/web/registry/default/block/authentication-04.tsx
deleted file mode 100644
index 0817239f..00000000
--- a/apps/web/registry/default/block/authentication-04.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import Image from 'next/image'
-import Link from 'next/link'
-
-import { Button } from '~/registry/default/ui/button'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export const description
-  = 'A login page with two columns. The first column has the login form with email and password. There\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'
-
-export const iframeHeight = '800px'
-
-export const containerClassName = 'w-full h-full p-4 lg:p-0'
-
-export default function Dashboard() {
-   return (
-      <div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
-         <div className="flex items-center justify-center py-12">
-            <div className="mx-auto grid w-[350px] gap-6">
-               <div className="grid gap-2 text-center">
-                  <h1 className="text-3xl font-bold">Login</h1>
-                  <p className="text-muted-foreground text-balance">
-                     Enter your email below to login to your account
-                  </p>
-               </div>
-               <div className="grid gap-4">
-                  <div className="grid gap-2">
-                     <Label htmlFor="email">Email</Label>
-                     <Input
-                        id="email"
-                        type="email"
-                        placeholder="m@example.com"
-                        required
-                     />
-                  </div>
-                  <div className="grid gap-2">
-                     <div className="flex items-center">
-                        <Label htmlFor="password">Password</Label>
-                        <Link
-                           href="/forgot-password"
-                           className="ml-auto inline-block text-sm underline"
-                        >
-                           Forgot your password?
-                        </Link>
-                     </div>
-                     <Input id="password" type="password" required />
-                  </div>
-                  <Button type="submit" className="w-full">
-                     Login
-                  </Button>
-                  <Button variant="outline" className="w-full">
-                     Login with Google
-                  </Button>
-               </div>
-               <div className="mt-4 text-center text-sm">
-                  Don&apos;t have an account?
-                  {' '}
-                  <Link href="#" className="underline">
-                     Sign up
-                  </Link>
-               </div>
-            </div>
-         </div>
-         <div className="bg-muted hidden lg:block">
-            <Image
-               src="/placeholder.svg"
-               alt="Image"
-               width="1920"
-               height="1080"
-               className="size-full object-cover dark:brightness-[0.2] dark:grayscale"
-            />
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-area-axes.tsx b/apps/web/registry/default/block/chart-area-axes.tsx
deleted file mode 100644
index 47364aac..00000000
--- a/apps/web/registry/default/block/chart-area-axes.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'An area chart with axes'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Axes</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: -20,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <YAxis
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickCount={3}
-                  />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="var(--color-mobile)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-area-default.tsx b/apps/web/registry/default/block/chart-area-default.tsx
deleted file mode 100644
index 948ae8b1..00000000
--- a/apps/web/registry/default/block/chart-area-default.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A simple area chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-area-gradient.tsx b/apps/web/registry/default/block/chart-area-gradient.tsx
deleted file mode 100644
index 8b50e75f..00000000
--- a/apps/web/registry/default/block/chart-area-gradient.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'An area chart with gradient fill'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Gradient</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                  <defs>
-                     <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-                        <stop
-                           offset="5%"
-                           stopColor="var(--color-desktop)"
-                           stopOpacity={0.8}
-                        />
-                        <stop
-                           offset="95%"
-                           stopColor="var(--color-desktop)"
-                           stopOpacity={0.1}
-                        />
-                     </linearGradient>
-                     <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-                        <stop
-                           offset="5%"
-                           stopColor="var(--color-mobile)"
-                           stopOpacity={0.8}
-                        />
-                        <stop
-                           offset="95%"
-                           stopColor="var(--color-mobile)"
-                           stopOpacity={0.1}
-                        />
-                     </linearGradient>
-                  </defs>
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="url(#fillMobile)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="url(#fillDesktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-area-icons.tsx b/apps/web/registry/default/block/chart-area-icons.tsx
deleted file mode 100644
index 8dc41fa8..00000000
--- a/apps/web/registry/default/block/chart-area-icons.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-'use client'
-
-import { TrendingDown, TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'An area chart with icons'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-      icon: TrendingDown,
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-      icon: TrendingUp,
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Icons</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="var(--color-mobile)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-                  <ChartLegend content={<ChartLegendContent />} />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-area-interactive.tsx b/apps/web/registry/default/block/chart-area-interactive.tsx
deleted file mode 100644
index 779569b6..00000000
--- a/apps/web/registry/default/block/chart-area-interactive.tsx
+++ /dev/null
@@ -1,268 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-
-export const description = 'An interactive area chart'
-
-const chartData = [
-   { date: '2024-04-01', desktop: 222, mobile: 150 },
-   { date: '2024-04-02', desktop: 97, mobile: 180 },
-   { date: '2024-04-03', desktop: 167, mobile: 120 },
-   { date: '2024-04-04', desktop: 242, mobile: 260 },
-   { date: '2024-04-05', desktop: 373, mobile: 290 },
-   { date: '2024-04-06', desktop: 301, mobile: 340 },
-   { date: '2024-04-07', desktop: 245, mobile: 180 },
-   { date: '2024-04-08', desktop: 409, mobile: 320 },
-   { date: '2024-04-09', desktop: 59, mobile: 110 },
-   { date: '2024-04-10', desktop: 261, mobile: 190 },
-   { date: '2024-04-11', desktop: 327, mobile: 350 },
-   { date: '2024-04-12', desktop: 292, mobile: 210 },
-   { date: '2024-04-13', desktop: 342, mobile: 380 },
-   { date: '2024-04-14', desktop: 137, mobile: 220 },
-   { date: '2024-04-15', desktop: 120, mobile: 170 },
-   { date: '2024-04-16', desktop: 138, mobile: 190 },
-   { date: '2024-04-17', desktop: 446, mobile: 360 },
-   { date: '2024-04-18', desktop: 364, mobile: 410 },
-   { date: '2024-04-19', desktop: 243, mobile: 180 },
-   { date: '2024-04-20', desktop: 89, mobile: 150 },
-   { date: '2024-04-21', desktop: 137, mobile: 200 },
-   { date: '2024-04-22', desktop: 224, mobile: 170 },
-   { date: '2024-04-23', desktop: 138, mobile: 230 },
-   { date: '2024-04-24', desktop: 387, mobile: 290 },
-   { date: '2024-04-25', desktop: 215, mobile: 250 },
-   { date: '2024-04-26', desktop: 75, mobile: 130 },
-   { date: '2024-04-27', desktop: 383, mobile: 420 },
-   { date: '2024-04-28', desktop: 122, mobile: 180 },
-   { date: '2024-04-29', desktop: 315, mobile: 240 },
-   { date: '2024-04-30', desktop: 454, mobile: 380 },
-   { date: '2024-05-01', desktop: 165, mobile: 220 },
-   { date: '2024-05-02', desktop: 293, mobile: 310 },
-   { date: '2024-05-03', desktop: 247, mobile: 190 },
-   { date: '2024-05-04', desktop: 385, mobile: 420 },
-   { date: '2024-05-05', desktop: 481, mobile: 390 },
-   { date: '2024-05-06', desktop: 498, mobile: 520 },
-   { date: '2024-05-07', desktop: 388, mobile: 300 },
-   { date: '2024-05-08', desktop: 149, mobile: 210 },
-   { date: '2024-05-09', desktop: 227, mobile: 180 },
-   { date: '2024-05-10', desktop: 293, mobile: 330 },
-   { date: '2024-05-11', desktop: 335, mobile: 270 },
-   { date: '2024-05-12', desktop: 197, mobile: 240 },
-   { date: '2024-05-13', desktop: 197, mobile: 160 },
-   { date: '2024-05-14', desktop: 448, mobile: 490 },
-   { date: '2024-05-15', desktop: 473, mobile: 380 },
-   { date: '2024-05-16', desktop: 338, mobile: 400 },
-   { date: '2024-05-17', desktop: 499, mobile: 420 },
-   { date: '2024-05-18', desktop: 315, mobile: 350 },
-   { date: '2024-05-19', desktop: 235, mobile: 180 },
-   { date: '2024-05-20', desktop: 177, mobile: 230 },
-   { date: '2024-05-21', desktop: 82, mobile: 140 },
-   { date: '2024-05-22', desktop: 81, mobile: 120 },
-   { date: '2024-05-23', desktop: 252, mobile: 290 },
-   { date: '2024-05-24', desktop: 294, mobile: 220 },
-   { date: '2024-05-25', desktop: 201, mobile: 250 },
-   { date: '2024-05-26', desktop: 213, mobile: 170 },
-   { date: '2024-05-27', desktop: 420, mobile: 460 },
-   { date: '2024-05-28', desktop: 233, mobile: 190 },
-   { date: '2024-05-29', desktop: 78, mobile: 130 },
-   { date: '2024-05-30', desktop: 340, mobile: 280 },
-   { date: '2024-05-31', desktop: 178, mobile: 230 },
-   { date: '2024-06-01', desktop: 178, mobile: 200 },
-   { date: '2024-06-02', desktop: 470, mobile: 410 },
-   { date: '2024-06-03', desktop: 103, mobile: 160 },
-   { date: '2024-06-04', desktop: 439, mobile: 380 },
-   { date: '2024-06-05', desktop: 88, mobile: 140 },
-   { date: '2024-06-06', desktop: 294, mobile: 250 },
-   { date: '2024-06-07', desktop: 323, mobile: 370 },
-   { date: '2024-06-08', desktop: 385, mobile: 320 },
-   { date: '2024-06-09', desktop: 438, mobile: 480 },
-   { date: '2024-06-10', desktop: 155, mobile: 200 },
-   { date: '2024-06-11', desktop: 92, mobile: 150 },
-   { date: '2024-06-12', desktop: 492, mobile: 420 },
-   { date: '2024-06-13', desktop: 81, mobile: 130 },
-   { date: '2024-06-14', desktop: 426, mobile: 380 },
-   { date: '2024-06-15', desktop: 307, mobile: 350 },
-   { date: '2024-06-16', desktop: 371, mobile: 310 },
-   { date: '2024-06-17', desktop: 475, mobile: 520 },
-   { date: '2024-06-18', desktop: 107, mobile: 170 },
-   { date: '2024-06-19', desktop: 341, mobile: 290 },
-   { date: '2024-06-20', desktop: 408, mobile: 450 },
-   { date: '2024-06-21', desktop: 169, mobile: 210 },
-   { date: '2024-06-22', desktop: 317, mobile: 270 },
-   { date: '2024-06-23', desktop: 480, mobile: 530 },
-   { date: '2024-06-24', desktop: 132, mobile: 180 },
-   { date: '2024-06-25', desktop: 141, mobile: 190 },
-   { date: '2024-06-26', desktop: 434, mobile: 380 },
-   { date: '2024-06-27', desktop: 448, mobile: 490 },
-   { date: '2024-06-28', desktop: 149, mobile: 200 },
-   { date: '2024-06-29', desktop: 103, mobile: 160 },
-   { date: '2024-06-30', desktop: 446, mobile: 400 },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   const [timeRange, setTimeRange] = React.useState('90d')
-
-   const filteredData = chartData.filter((item) => {
-      const date = new Date(item.date)
-      const now = new Date()
-      let daysToSubtract = 90
-      if (timeRange === '30d') {
-         daysToSubtract = 30
-      }
-      else if (timeRange === '7d') {
-         daysToSubtract = 7
-      }
-      now.setDate(now.getDate() - daysToSubtract)
-      return date >= now
-   })
-
-   return (
-      <Card>
-         <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
-            <div className="grid flex-1 gap-1 text-center sm:text-left">
-               <CardTitle>Area Chart - Interactive</CardTitle>
-               <CardDescription>
-                  Showing total visitors for the last 3 months
-               </CardDescription>
-            </div>
-            <Select value={timeRange} onValueChange={setTimeRange}>
-               <SelectTrigger
-                  className="w-[160px] rounded-lg sm:ml-auto"
-                  aria-label="Select a value"
-               >
-                  <SelectValue placeholder="Last 3 months" />
-               </SelectTrigger>
-               <SelectContent className="rounded-xl">
-                  <SelectItem value="90d" className="rounded-lg">
-                     Last 3 months
-                  </SelectItem>
-                  <SelectItem value="30d" className="rounded-lg">
-                     Last 30 days
-                  </SelectItem>
-                  <SelectItem value="7d" className="rounded-lg">
-                     Last 7 days
-                  </SelectItem>
-               </SelectContent>
-            </Select>
-         </CardHeader>
-         <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
-            <ChartContainer
-               config={chartConfig}
-               className="aspect-auto h-[250px] w-full"
-            >
-               <AreaChart data={filteredData}>
-                  <defs>
-                     <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-                        <stop
-                           offset="5%"
-                           stopColor="var(--color-desktop)"
-                           stopOpacity={0.8}
-                        />
-                        <stop
-                           offset="95%"
-                           stopColor="var(--color-desktop)"
-                           stopOpacity={0.1}
-                        />
-                     </linearGradient>
-                     <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-                        <stop
-                           offset="5%"
-                           stopColor="var(--color-mobile)"
-                           stopOpacity={0.8}
-                        />
-                        <stop
-                           offset="95%"
-                           stopColor="var(--color-mobile)"
-                           stopOpacity={0.1}
-                        />
-                     </linearGradient>
-                  </defs>
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     minTickGap={32}
-                     tickFormatter={(value) => {
-                        const date = new Date(value)
-                        return date.toLocaleDateString('en-US', {
-                           month: 'short',
-                           day: 'numeric',
-                        })
-                     }}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={(
-                        <ChartTooltipContent
-                           labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 month: 'short',
-                                 day: 'numeric',
-                              })
-                           }}
-                           indicator="dot"
-                        />
-                     )}
-                  />
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="url(#fillMobile)"
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="url(#fillDesktop)"
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-                  <ChartLegend content={<ChartLegendContent />} />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-area-legend.tsx b/apps/web/registry/default/block/chart-area-legend.tsx
deleted file mode 100644
index ce882e53..00000000
--- a/apps/web/registry/default/block/chart-area-legend.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'An area chart with a legend'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Legend</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="var(--color-mobile)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-                  <ChartLegend content={<ChartLegendContent />} />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-area-linear.tsx b/apps/web/registry/default/block/chart-area-linear.tsx
deleted file mode 100644
index ac0533c9..00000000
--- a/apps/web/registry/default/block/chart-area-linear.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A linear area chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Linear</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="dot" hideLabel />}
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="linear"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-area-stacked-expand.tsx b/apps/web/registry/default/block/chart-area-stacked-expand.tsx
deleted file mode 100644
index 51a62bac..00000000
--- a/apps/web/registry/default/block/chart-area-stacked-expand.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A stacked area chart with expand stacking'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80, other: 45 },
-   { month: 'February', desktop: 305, mobile: 200, other: 100 },
-   { month: 'March', desktop: 237, mobile: 120, other: 150 },
-   { month: 'April', desktop: 73, mobile: 190, other: 50 },
-   { month: 'May', desktop: 209, mobile: 130, other: 100 },
-   { month: 'June', desktop: 214, mobile: 140, other: 160 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-3))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Stacked Expanded</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                     top: 12,
-                  }}
-                  stackOffset="expand"
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <Area
-                     dataKey="other"
-                     type="natural"
-                     fill="var(--color-other)"
-                     fillOpacity={0.1}
-                     stroke="var(--color-other)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="var(--color-mobile)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-area-stacked.tsx b/apps/web/registry/default/block/chart-area-stacked.tsx
deleted file mode 100644
index 3e34b73d..00000000
--- a/apps/web/registry/default/block/chart-area-stacked.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A stacked area chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Stacked</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="dot" />}
-                  />
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="var(--color-mobile)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-area-step.tsx b/apps/web/registry/default/block/chart-area-step.tsx
deleted file mode 100644
index 2a51cd45..00000000
--- a/apps/web/registry/default/block/chart-area-step.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client'
-
-import { Activity, TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A step area chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-      icon: Activity,
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Step</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="step"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-bar-active.tsx b/apps/web/registry/default/block/chart-bar-active.tsx
deleted file mode 100644
index 037029db..00000000
--- a/apps/web/registry/default/block/chart-bar-active.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A bar chart with an active bar'
-
-const chartData = [
-   { browser: 'chrome', visitors: 187, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 275, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Active</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="browser"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value =>
-                        chartConfig[value as keyof typeof chartConfig]?.label}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Bar
-                     dataKey="visitors"
-                     strokeWidth={2}
-                     radius={8}
-                     activeIndex={2}
-                     activeBar={({ ...props }) => {
-                        return (
-                           <Rectangle
-                              {...props}
-                              fillOpacity={0.8}
-                              stroke={props.payload.fill}
-                              strokeDasharray={4}
-                              strokeDashoffset={4}
-                           />
-                        )
-                     }}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-bar-default.tsx b/apps/web/registry/default/block/chart-bar-default.tsx
deleted file mode 100644
index 49330679..00000000
--- a/apps/web/registry/default/block/chart-bar-default.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A bar chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-bar-horizontal.tsx b/apps/web/registry/default/block/chart-bar-horizontal.tsx
deleted file mode 100644
index 144ef997..00000000
--- a/apps/web/registry/default/block/chart-bar-horizontal.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A horizontal bar chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Horizontal</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart
-                  accessibilityLayer
-                  data={chartData}
-                  layout="vertical"
-                  margin={{
-                     left: -20,
-                  }}
-               >
-                  <XAxis type="number" dataKey="desktop" hide />
-                  <YAxis
-                     dataKey="month"
-                     type="category"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={5} />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-bar-interactive.tsx b/apps/web/registry/default/block/chart-bar-interactive.tsx
deleted file mode 100644
index d86ee682..00000000
--- a/apps/web/registry/default/block/chart-bar-interactive.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'An interactive bar chart'
-
-const chartData = [
-   { date: '2024-04-01', desktop: 222, mobile: 150 },
-   { date: '2024-04-02', desktop: 97, mobile: 180 },
-   { date: '2024-04-03', desktop: 167, mobile: 120 },
-   { date: '2024-04-04', desktop: 242, mobile: 260 },
-   { date: '2024-04-05', desktop: 373, mobile: 290 },
-   { date: '2024-04-06', desktop: 301, mobile: 340 },
-   { date: '2024-04-07', desktop: 245, mobile: 180 },
-   { date: '2024-04-08', desktop: 409, mobile: 320 },
-   { date: '2024-04-09', desktop: 59, mobile: 110 },
-   { date: '2024-04-10', desktop: 261, mobile: 190 },
-   { date: '2024-04-11', desktop: 327, mobile: 350 },
-   { date: '2024-04-12', desktop: 292, mobile: 210 },
-   { date: '2024-04-13', desktop: 342, mobile: 380 },
-   { date: '2024-04-14', desktop: 137, mobile: 220 },
-   { date: '2024-04-15', desktop: 120, mobile: 170 },
-   { date: '2024-04-16', desktop: 138, mobile: 190 },
-   { date: '2024-04-17', desktop: 446, mobile: 360 },
-   { date: '2024-04-18', desktop: 364, mobile: 410 },
-   { date: '2024-04-19', desktop: 243, mobile: 180 },
-   { date: '2024-04-20', desktop: 89, mobile: 150 },
-   { date: '2024-04-21', desktop: 137, mobile: 200 },
-   { date: '2024-04-22', desktop: 224, mobile: 170 },
-   { date: '2024-04-23', desktop: 138, mobile: 230 },
-   { date: '2024-04-24', desktop: 387, mobile: 290 },
-   { date: '2024-04-25', desktop: 215, mobile: 250 },
-   { date: '2024-04-26', desktop: 75, mobile: 130 },
-   { date: '2024-04-27', desktop: 383, mobile: 420 },
-   { date: '2024-04-28', desktop: 122, mobile: 180 },
-   { date: '2024-04-29', desktop: 315, mobile: 240 },
-   { date: '2024-04-30', desktop: 454, mobile: 380 },
-   { date: '2024-05-01', desktop: 165, mobile: 220 },
-   { date: '2024-05-02', desktop: 293, mobile: 310 },
-   { date: '2024-05-03', desktop: 247, mobile: 190 },
-   { date: '2024-05-04', desktop: 385, mobile: 420 },
-   { date: '2024-05-05', desktop: 481, mobile: 390 },
-   { date: '2024-05-06', desktop: 498, mobile: 520 },
-   { date: '2024-05-07', desktop: 388, mobile: 300 },
-   { date: '2024-05-08', desktop: 149, mobile: 210 },
-   { date: '2024-05-09', desktop: 227, mobile: 180 },
-   { date: '2024-05-10', desktop: 293, mobile: 330 },
-   { date: '2024-05-11', desktop: 335, mobile: 270 },
-   { date: '2024-05-12', desktop: 197, mobile: 240 },
-   { date: '2024-05-13', desktop: 197, mobile: 160 },
-   { date: '2024-05-14', desktop: 448, mobile: 490 },
-   { date: '2024-05-15', desktop: 473, mobile: 380 },
-   { date: '2024-05-16', desktop: 338, mobile: 400 },
-   { date: '2024-05-17', desktop: 499, mobile: 420 },
-   { date: '2024-05-18', desktop: 315, mobile: 350 },
-   { date: '2024-05-19', desktop: 235, mobile: 180 },
-   { date: '2024-05-20', desktop: 177, mobile: 230 },
-   { date: '2024-05-21', desktop: 82, mobile: 140 },
-   { date: '2024-05-22', desktop: 81, mobile: 120 },
-   { date: '2024-05-23', desktop: 252, mobile: 290 },
-   { date: '2024-05-24', desktop: 294, mobile: 220 },
-   { date: '2024-05-25', desktop: 201, mobile: 250 },
-   { date: '2024-05-26', desktop: 213, mobile: 170 },
-   { date: '2024-05-27', desktop: 420, mobile: 460 },
-   { date: '2024-05-28', desktop: 233, mobile: 190 },
-   { date: '2024-05-29', desktop: 78, mobile: 130 },
-   { date: '2024-05-30', desktop: 340, mobile: 280 },
-   { date: '2024-05-31', desktop: 178, mobile: 230 },
-   { date: '2024-06-01', desktop: 178, mobile: 200 },
-   { date: '2024-06-02', desktop: 470, mobile: 410 },
-   { date: '2024-06-03', desktop: 103, mobile: 160 },
-   { date: '2024-06-04', desktop: 439, mobile: 380 },
-   { date: '2024-06-05', desktop: 88, mobile: 140 },
-   { date: '2024-06-06', desktop: 294, mobile: 250 },
-   { date: '2024-06-07', desktop: 323, mobile: 370 },
-   { date: '2024-06-08', desktop: 385, mobile: 320 },
-   { date: '2024-06-09', desktop: 438, mobile: 480 },
-   { date: '2024-06-10', desktop: 155, mobile: 200 },
-   { date: '2024-06-11', desktop: 92, mobile: 150 },
-   { date: '2024-06-12', desktop: 492, mobile: 420 },
-   { date: '2024-06-13', desktop: 81, mobile: 130 },
-   { date: '2024-06-14', desktop: 426, mobile: 380 },
-   { date: '2024-06-15', desktop: 307, mobile: 350 },
-   { date: '2024-06-16', desktop: 371, mobile: 310 },
-   { date: '2024-06-17', desktop: 475, mobile: 520 },
-   { date: '2024-06-18', desktop: 107, mobile: 170 },
-   { date: '2024-06-19', desktop: 341, mobile: 290 },
-   { date: '2024-06-20', desktop: 408, mobile: 450 },
-   { date: '2024-06-21', desktop: 169, mobile: 210 },
-   { date: '2024-06-22', desktop: 317, mobile: 270 },
-   { date: '2024-06-23', desktop: 480, mobile: 530 },
-   { date: '2024-06-24', desktop: 132, mobile: 180 },
-   { date: '2024-06-25', desktop: 141, mobile: 190 },
-   { date: '2024-06-26', desktop: 434, mobile: 380 },
-   { date: '2024-06-27', desktop: 448, mobile: 490 },
-   { date: '2024-06-28', desktop: 149, mobile: 200 },
-   { date: '2024-06-29', desktop: 103, mobile: 160 },
-   { date: '2024-06-30', desktop: 446, mobile: 400 },
-]
-
-const chartConfig = {
-   views: {
-      label: 'Page Views',
-   },
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   const [activeChart, setActiveChart]
-    = React.useState<keyof typeof chartConfig>('desktop')
-
-   const total = React.useMemo(
-      () => ({
-         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
-         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
-      }),
-      [],
-   )
-
-   return (
-      <Card>
-         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
-            <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
-               <CardTitle>Bar Chart - Interactive</CardTitle>
-               <CardDescription>
-                  Showing total visitors for the last 3 months
-               </CardDescription>
-            </div>
-            <div className="flex">
-               {['desktop', 'mobile'].map((key) => {
-                  const chart = key as keyof typeof chartConfig
-                  return (
-                     <button
-                        key={chart}
-                        data-active={activeChart === chart}
-                        className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
-                        onClick={() => setActiveChart(chart)}
-                     >
-                        <span className="text-muted-foreground text-xs">
-                           {chartConfig[chart].label}
-                        </span>
-                        <span className="text-lg font-bold leading-none sm:text-3xl">
-                           {total[key as keyof typeof total].toLocaleString()}
-                        </span>
-                     </button>
-                  )
-               })}
-            </div>
-         </CardHeader>
-         <CardContent className="px-2 sm:p-6">
-            <ChartContainer
-               config={chartConfig}
-               className="aspect-auto h-[250px] w-full"
-            >
-               <BarChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     minTickGap={32}
-                     tickFormatter={(value) => {
-                        const date = new Date(value)
-                        return date.toLocaleDateString('en-US', {
-                           month: 'short',
-                           day: 'numeric',
-                        })
-                     }}
-                  />
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           className="w-[150px]"
-                           nameKey="views"
-                           labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 month: 'short',
-                                 day: 'numeric',
-                                 year: 'numeric',
-                              })
-                           }}
-                        />
-                     )}
-                  />
-                  <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-bar-label-custom.tsx b/apps/web/registry/default/block/chart-bar-label-custom.tsx
deleted file mode 100644
index 9c7858c7..00000000
--- a/apps/web/registry/default/block/chart-bar-label-custom.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A bar chart with a custom label'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-   label: {
-      color: 'hsl(var(--background))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Custom Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart
-                  accessibilityLayer
-                  data={chartData}
-                  layout="vertical"
-                  margin={{
-                     right: 16,
-                  }}
-               >
-                  <CartesianGrid horizontal={false} />
-                  <YAxis
-                     dataKey="month"
-                     type="category"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
-                     hide
-                  />
-                  <XAxis dataKey="desktop" type="number" hide />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <Bar
-                     dataKey="desktop"
-                     layout="vertical"
-                     fill="var(--color-desktop)"
-                     radius={4}
-                  >
-                     <LabelList
-                        dataKey="month"
-                        position="insideLeft"
-                        offset={8}
-                        className="fill-[--color-label]"
-                        fontSize={12}
-                     />
-                     <LabelList
-                        dataKey="desktop"
-                        position="right"
-                        offset={8}
-                        className="fill-foreground"
-                        fontSize={12}
-                     />
-                  </Bar>
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-bar-label.tsx b/apps/web/registry/default/block/chart-bar-label.tsx
deleted file mode 100644
index 293d5aeb..00000000
--- a/apps/web/registry/default/block/chart-bar-label.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A bar chart with a label'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     top: 20,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
-                     <LabelList
-                        position="top"
-                        offset={12}
-                        className="fill-foreground"
-                        fontSize={12}
-                     />
-                  </Bar>
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-bar-mixed.tsx b/apps/web/registry/default/block/chart-bar-mixed.tsx
deleted file mode 100644
index 0b3d790c..00000000
--- a/apps/web/registry/default/block/chart-bar-mixed.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A mixed bar chart'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Mixed</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart
-                  accessibilityLayer
-                  data={chartData}
-                  layout="vertical"
-                  margin={{
-                     left: 0,
-                  }}
-               >
-                  <YAxis
-                     dataKey="browser"
-                     type="category"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value =>
-                        chartConfig[value as keyof typeof chartConfig]?.label}
-                  />
-                  <XAxis dataKey="visitors" type="number" hide />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Bar dataKey="visitors" layout="vertical" radius={5} />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-bar-multiple.tsx b/apps/web/registry/default/block/chart-bar-multiple.tsx
deleted file mode 100644
index 44a13a61..00000000
--- a/apps/web/registry/default/block/chart-bar-multiple.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A multiple bar chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Multiple</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="dashed" />}
-                  />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-                  <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-bar-negative.tsx b/apps/web/registry/default/block/chart-bar-negative.tsx
deleted file mode 100644
index 8a437e50..00000000
--- a/apps/web/registry/default/block/chart-bar-negative.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, Cell, LabelList } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A bar chart with negative values'
-
-const chartData = [
-   { month: 'January', visitors: 186 },
-   { month: 'February', visitors: 205 },
-   { month: 'March', visitors: -207 },
-   { month: 'April', visitors: 173 },
-   { month: 'May', visitors: -209 },
-   { month: 'June', visitors: 214 },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Negative</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <CartesianGrid vertical={false} />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel hideIndicator />}
-                  />
-                  <Bar dataKey="visitors">
-                     <LabelList position="top" dataKey="month" fillOpacity={1} />
-                     {chartData.map(item => (
-                        <Cell
-                           key={item.month}
-                           fill={
-                              item.visitors > 0
-                                 ? 'hsl(var(--chart-1))'
-                                 : 'hsl(var(--chart-2))'
-                           }
-                        />
-                     ))}
-                  </Bar>
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-bar-stacked.tsx b/apps/web/registry/default/block/chart-bar-stacked.tsx
deleted file mode 100644
index 1f303ffa..00000000
--- a/apps/web/registry/default/block/chart-bar-stacked.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Stacked + Legend</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-                  <ChartLegend content={<ChartLegendContent />} />
-                  <Bar
-                     dataKey="desktop"
-                     stackId="a"
-                     fill="var(--color-desktop)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="mobile"
-                     stackId="a"
-                     fill="var(--color-mobile)"
-                     radius={[4, 4, 0, 0]}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-line-default.tsx b/apps/web/registry/default/block/chart-line-default.tsx
deleted file mode 100644
index 19755abf..00000000
--- a/apps/web/registry/default/block/chart-line-default.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A line chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Line
-                     dataKey="desktop"
-                     type="natural"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={false}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-line-dots-colors.tsx b/apps/web/registry/default/block/chart-line-dots-colors.tsx
deleted file mode 100644
index 20c822ca..00000000
--- a/apps/web/registry/default/block/chart-line-dots-colors.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Dot, Line, LineChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A line chart with dots and colors'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-      color: 'hsl(var(--chart-2))',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Dots Colors</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     top: 24,
-                     left: 24,
-                     right: 24,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <ChartTooltip
-                     cursor={false}
-                     content={(
-                        <ChartTooltipContent
-                           indicator="line"
-                           nameKey="visitors"
-                           hideLabel
-                        />
-                     )}
-                  />
-                  <Line
-                     dataKey="visitors"
-                     type="natural"
-                     stroke="var(--color-visitors)"
-                     strokeWidth={2}
-                     dot={({ payload, ...props }) => {
-                        return (
-                           <Dot
-                              key={payload.browser}
-                              r={5}
-                              cx={props.cx}
-                              cy={props.cy}
-                              fill={payload.fill}
-                              stroke={payload.fill}
-                           />
-                        )
-                     }}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-line-dots-custom.tsx b/apps/web/registry/default/block/chart-line-dots-custom.tsx
deleted file mode 100644
index 5d0db250..00000000
--- a/apps/web/registry/default/block/chart-line-dots-custom.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-'use client'
-
-import { GitCommitVertical, TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A line chart with custom dots'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Custom Dots</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Line
-                     dataKey="desktop"
-                     type="natural"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={({ cx, cy, payload }) => {
-                        const r = 24
-                        return (
-                           <GitCommitVertical
-                              key={payload.month}
-                              x={cx - r / 2}
-                              y={cy - r / 2}
-                              width={r}
-                              height={r}
-                              fill="hsl(var(--background))"
-                              stroke="var(--color-desktop)"
-                           />
-                        )
-                     }}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-line-dots.tsx b/apps/web/registry/default/block/chart-line-dots.tsx
deleted file mode 100644
index 3372810a..00000000
--- a/apps/web/registry/default/block/chart-line-dots.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A line chart with dots'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Dots</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Line
-                     dataKey="desktop"
-                     type="natural"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={{
-                        fill: 'var(--color-desktop)',
-                     }}
-                     activeDot={{
-                        r: 6,
-                     }}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-line-interactive.tsx b/apps/web/registry/default/block/chart-line-interactive.tsx
deleted file mode 100644
index 4ea9d26f..00000000
--- a/apps/web/registry/default/block/chart-line-interactive.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'An interactive line chart'
-
-const chartData = [
-   { date: '2024-04-01', desktop: 222, mobile: 150 },
-   { date: '2024-04-02', desktop: 97, mobile: 180 },
-   { date: '2024-04-03', desktop: 167, mobile: 120 },
-   { date: '2024-04-04', desktop: 242, mobile: 260 },
-   { date: '2024-04-05', desktop: 373, mobile: 290 },
-   { date: '2024-04-06', desktop: 301, mobile: 340 },
-   { date: '2024-04-07', desktop: 245, mobile: 180 },
-   { date: '2024-04-08', desktop: 409, mobile: 320 },
-   { date: '2024-04-09', desktop: 59, mobile: 110 },
-   { date: '2024-04-10', desktop: 261, mobile: 190 },
-   { date: '2024-04-11', desktop: 327, mobile: 350 },
-   { date: '2024-04-12', desktop: 292, mobile: 210 },
-   { date: '2024-04-13', desktop: 342, mobile: 380 },
-   { date: '2024-04-14', desktop: 137, mobile: 220 },
-   { date: '2024-04-15', desktop: 120, mobile: 170 },
-   { date: '2024-04-16', desktop: 138, mobile: 190 },
-   { date: '2024-04-17', desktop: 446, mobile: 360 },
-   { date: '2024-04-18', desktop: 364, mobile: 410 },
-   { date: '2024-04-19', desktop: 243, mobile: 180 },
-   { date: '2024-04-20', desktop: 89, mobile: 150 },
-   { date: '2024-04-21', desktop: 137, mobile: 200 },
-   { date: '2024-04-22', desktop: 224, mobile: 170 },
-   { date: '2024-04-23', desktop: 138, mobile: 230 },
-   { date: '2024-04-24', desktop: 387, mobile: 290 },
-   { date: '2024-04-25', desktop: 215, mobile: 250 },
-   { date: '2024-04-26', desktop: 75, mobile: 130 },
-   { date: '2024-04-27', desktop: 383, mobile: 420 },
-   { date: '2024-04-28', desktop: 122, mobile: 180 },
-   { date: '2024-04-29', desktop: 315, mobile: 240 },
-   { date: '2024-04-30', desktop: 454, mobile: 380 },
-   { date: '2024-05-01', desktop: 165, mobile: 220 },
-   { date: '2024-05-02', desktop: 293, mobile: 310 },
-   { date: '2024-05-03', desktop: 247, mobile: 190 },
-   { date: '2024-05-04', desktop: 385, mobile: 420 },
-   { date: '2024-05-05', desktop: 481, mobile: 390 },
-   { date: '2024-05-06', desktop: 498, mobile: 520 },
-   { date: '2024-05-07', desktop: 388, mobile: 300 },
-   { date: '2024-05-08', desktop: 149, mobile: 210 },
-   { date: '2024-05-09', desktop: 227, mobile: 180 },
-   { date: '2024-05-10', desktop: 293, mobile: 330 },
-   { date: '2024-05-11', desktop: 335, mobile: 270 },
-   { date: '2024-05-12', desktop: 197, mobile: 240 },
-   { date: '2024-05-13', desktop: 197, mobile: 160 },
-   { date: '2024-05-14', desktop: 448, mobile: 490 },
-   { date: '2024-05-15', desktop: 473, mobile: 380 },
-   { date: '2024-05-16', desktop: 338, mobile: 400 },
-   { date: '2024-05-17', desktop: 499, mobile: 420 },
-   { date: '2024-05-18', desktop: 315, mobile: 350 },
-   { date: '2024-05-19', desktop: 235, mobile: 180 },
-   { date: '2024-05-20', desktop: 177, mobile: 230 },
-   { date: '2024-05-21', desktop: 82, mobile: 140 },
-   { date: '2024-05-22', desktop: 81, mobile: 120 },
-   { date: '2024-05-23', desktop: 252, mobile: 290 },
-   { date: '2024-05-24', desktop: 294, mobile: 220 },
-   { date: '2024-05-25', desktop: 201, mobile: 250 },
-   { date: '2024-05-26', desktop: 213, mobile: 170 },
-   { date: '2024-05-27', desktop: 420, mobile: 460 },
-   { date: '2024-05-28', desktop: 233, mobile: 190 },
-   { date: '2024-05-29', desktop: 78, mobile: 130 },
-   { date: '2024-05-30', desktop: 340, mobile: 280 },
-   { date: '2024-05-31', desktop: 178, mobile: 230 },
-   { date: '2024-06-01', desktop: 178, mobile: 200 },
-   { date: '2024-06-02', desktop: 470, mobile: 410 },
-   { date: '2024-06-03', desktop: 103, mobile: 160 },
-   { date: '2024-06-04', desktop: 439, mobile: 380 },
-   { date: '2024-06-05', desktop: 88, mobile: 140 },
-   { date: '2024-06-06', desktop: 294, mobile: 250 },
-   { date: '2024-06-07', desktop: 323, mobile: 370 },
-   { date: '2024-06-08', desktop: 385, mobile: 320 },
-   { date: '2024-06-09', desktop: 438, mobile: 480 },
-   { date: '2024-06-10', desktop: 155, mobile: 200 },
-   { date: '2024-06-11', desktop: 92, mobile: 150 },
-   { date: '2024-06-12', desktop: 492, mobile: 420 },
-   { date: '2024-06-13', desktop: 81, mobile: 130 },
-   { date: '2024-06-14', desktop: 426, mobile: 380 },
-   { date: '2024-06-15', desktop: 307, mobile: 350 },
-   { date: '2024-06-16', desktop: 371, mobile: 310 },
-   { date: '2024-06-17', desktop: 475, mobile: 520 },
-   { date: '2024-06-18', desktop: 107, mobile: 170 },
-   { date: '2024-06-19', desktop: 341, mobile: 290 },
-   { date: '2024-06-20', desktop: 408, mobile: 450 },
-   { date: '2024-06-21', desktop: 169, mobile: 210 },
-   { date: '2024-06-22', desktop: 317, mobile: 270 },
-   { date: '2024-06-23', desktop: 480, mobile: 530 },
-   { date: '2024-06-24', desktop: 132, mobile: 180 },
-   { date: '2024-06-25', desktop: 141, mobile: 190 },
-   { date: '2024-06-26', desktop: 434, mobile: 380 },
-   { date: '2024-06-27', desktop: 448, mobile: 490 },
-   { date: '2024-06-28', desktop: 149, mobile: 200 },
-   { date: '2024-06-29', desktop: 103, mobile: 160 },
-   { date: '2024-06-30', desktop: 446, mobile: 400 },
-]
-
-const chartConfig = {
-   views: {
-      label: 'Page Views',
-   },
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   const [activeChart, setActiveChart]
-    = React.useState<keyof typeof chartConfig>('desktop')
-
-   const total = React.useMemo(
-      () => ({
-         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
-         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
-      }),
-      [],
-   )
-
-   return (
-      <Card>
-         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
-            <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
-               <CardTitle>Line Chart - Interactive</CardTitle>
-               <CardDescription>
-                  Showing total visitors for the last 3 months
-               </CardDescription>
-            </div>
-            <div className="flex">
-               {['desktop', 'mobile'].map((key) => {
-                  const chart = key as keyof typeof chartConfig
-                  return (
-                     <button
-                        key={chart}
-                        data-active={activeChart === chart}
-                        className="data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
-                        onClick={() => setActiveChart(chart)}
-                     >
-                        <span className="text-muted-foreground text-xs">
-                           {chartConfig[chart].label}
-                        </span>
-                        <span className="text-lg font-bold leading-none sm:text-3xl">
-                           {total[key as keyof typeof total].toLocaleString()}
-                        </span>
-                     </button>
-                  )
-               })}
-            </div>
-         </CardHeader>
-         <CardContent className="px-2 sm:p-6">
-            <ChartContainer
-               config={chartConfig}
-               className="aspect-auto h-[250px] w-full"
-            >
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     minTickGap={32}
-                     tickFormatter={(value) => {
-                        const date = new Date(value)
-                        return date.toLocaleDateString('en-US', {
-                           month: 'short',
-                           day: 'numeric',
-                        })
-                     }}
-                  />
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           className="w-[150px]"
-                           nameKey="views"
-                           labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 month: 'short',
-                                 day: 'numeric',
-                                 year: 'numeric',
-                              })
-                           }}
-                        />
-                     )}
-                  />
-                  <Line
-                     dataKey={activeChart}
-                     type="monotone"
-                     stroke={`var(--color-${activeChart})`}
-                     strokeWidth={2}
-                     dot={false}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-line-label-custom.tsx b/apps/web/registry/default/block/chart-line-label-custom.tsx
deleted file mode 100644
index fda25b48..00000000
--- a/apps/web/registry/default/block/chart-line-label-custom.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, LabelList, Line, LineChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A line chart with a custom label'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-      color: 'hsl(var(--chart-2))',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Custom Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     top: 24,
-                     left: 24,
-                     right: 24,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <ChartTooltip
-                     cursor={false}
-                     content={(
-                        <ChartTooltipContent
-                           indicator="line"
-                           nameKey="visitors"
-                           hideLabel
-                        />
-                     )}
-                  />
-                  <Line
-                     dataKey="visitors"
-                     type="natural"
-                     stroke="var(--color-visitors)"
-                     strokeWidth={2}
-                     dot={{
-                        fill: 'var(--color-visitors)',
-                     }}
-                     activeDot={{
-                        r: 6,
-                     }}
-                  >
-                     <LabelList
-                        position="top"
-                        offset={12}
-                        className="fill-foreground"
-                        fontSize={12}
-                        dataKey="browser"
-                        formatter={(value: keyof typeof chartConfig) =>
-                           chartConfig[value]?.label}
-                     />
-                  </Line>
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-line-label.tsx b/apps/web/registry/default/block/chart-line-label.tsx
deleted file mode 100644
index 8c7b4292..00000000
--- a/apps/web/registry/default/block/chart-line-label.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, LabelList, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A line chart with a label'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     top: 20,
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <Line
-                     dataKey="desktop"
-                     type="natural"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={{
-                        fill: 'var(--color-desktop)',
-                     }}
-                     activeDot={{
-                        r: 6,
-                     }}
-                  >
-                     <LabelList
-                        position="top"
-                        offset={12}
-                        className="fill-foreground"
-                        fontSize={12}
-                     />
-                  </Line>
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-line-linear.tsx b/apps/web/registry/default/block/chart-line-linear.tsx
deleted file mode 100644
index 2daee0af..00000000
--- a/apps/web/registry/default/block/chart-line-linear.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A linear line chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Linear</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Line
-                     dataKey="desktop"
-                     type="linear"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={false}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-line-multiple.tsx b/apps/web/registry/default/block/chart-line-multiple.tsx
deleted file mode 100644
index 63ae0ef1..00000000
--- a/apps/web/registry/default/block/chart-line-multiple.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A multiple line chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Multiple</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                  <Line
-                     dataKey="desktop"
-                     type="monotone"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={false}
-                  />
-                  <Line
-                     dataKey="mobile"
-                     type="monotone"
-                     stroke="var(--color-mobile)"
-                     strokeWidth={2}
-                     dot={false}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     Showing total visitors for the last 6 months
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-line-step.tsx b/apps/web/registry/default/block/chart-line-step.tsx
deleted file mode 100644
index e6b327d3..00000000
--- a/apps/web/registry/default/block/chart-line-step.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A line chart with step'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Step</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Line
-                     dataKey="desktop"
-                     type="step"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={false}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-pie-donut-active.tsx b/apps/web/registry/default/block/chart-pie-donut-active.tsx
deleted file mode 100644
index de29e1c3..00000000
--- a/apps/web/registry/default/block/chart-pie-donut-active.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Label, Pie, PieChart, Sector } from 'recharts'
-import type { PieSectorDataItem } from 'recharts/types/polar/Pie'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A donut chart with an active sector'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Donut Active</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Pie
-                     data={chartData}
-                     dataKey="visitors"
-                     nameKey="browser"
-                     innerRadius={60}
-                     strokeWidth={5}
-                     activeIndex={0}
-                     activeShape={({
-                        outerRadius = 0,
-                        ...props
-                     }: PieSectorDataItem) => (
-                        <Sector {...props} outerRadius={outerRadius + 10} />
-                     )}
-                  />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-pie-donut-text.tsx b/apps/web/registry/default/block/chart-pie-donut-text.tsx
deleted file mode 100644
index b8d5a5fc..00000000
--- a/apps/web/registry/default/block/chart-pie-donut-text.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { TrendingUp } from 'lucide-react'
-import { Label, Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A donut chart with text'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 287, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 190, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   const totalVisitors = React.useMemo(() => {
-      return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
-   }, [])
-
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Donut with Text</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Pie
-                     data={chartData}
-                     dataKey="visitors"
-                     nameKey="browser"
-                     innerRadius={60}
-                     strokeWidth={5}
-                  >
-                     <Label
-                        content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                              return (
-                                 <text
-                                    x={viewBox.cx}
-                                    y={viewBox.cy}
-                                    textAnchor="middle"
-                                    dominantBaseline="middle"
-                                 >
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={viewBox.cy}
-                                       className="fill-foreground text-3xl font-bold"
-                                    >
-                                       {totalVisitors.toLocaleString()}
-                                    </tspan>
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={(viewBox.cy || 0) + 24}
-                                       className="fill-muted-foreground"
-                                    >
-                                       Visitors
-                                    </tspan>
-                                 </text>
-                              )
-                           }
-                        }}
-                     />
-                  </Pie>
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-pie-donut.tsx b/apps/web/registry/default/block/chart-pie-donut.tsx
deleted file mode 100644
index cfd3cb64..00000000
--- a/apps/web/registry/default/block/chart-pie-donut.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A donut chart'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Donut</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Pie
-                     data={chartData}
-                     dataKey="visitors"
-                     nameKey="browser"
-                     innerRadius={60}
-                  />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-pie-interactive.tsx b/apps/web/registry/default/block/chart-pie-interactive.tsx
deleted file mode 100644
index efec263a..00000000
--- a/apps/web/registry/default/block/chart-pie-interactive.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Label, Pie, PieChart, Sector } from 'recharts'
-import type { PieSectorDataItem } from 'recharts/types/polar/Pie'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartStyle,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-
-export const description = 'An interactive pie chart'
-
-const desktopData = [
-   { month: 'january', desktop: 186, fill: 'var(--color-january)' },
-   { month: 'february', desktop: 305, fill: 'var(--color-february)' },
-   { month: 'march', desktop: 237, fill: 'var(--color-march)' },
-   { month: 'april', desktop: 173, fill: 'var(--color-april)' },
-   { month: 'may', desktop: 209, fill: 'var(--color-may)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   desktop: {
-      label: 'Desktop',
-   },
-   mobile: {
-      label: 'Mobile',
-   },
-   january: {
-      label: 'January',
-      color: 'hsl(var(--chart-1))',
-   },
-   february: {
-      label: 'February',
-      color: 'hsl(var(--chart-2))',
-   },
-   march: {
-      label: 'March',
-      color: 'hsl(var(--chart-3))',
-   },
-   april: {
-      label: 'April',
-      color: 'hsl(var(--chart-4))',
-   },
-   may: {
-      label: 'May',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   const id = 'pie-interactive'
-   const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
-
-   const activeIndex = React.useMemo(
-      () => desktopData.findIndex(item => item.month === activeMonth),
-      [activeMonth],
-   )
-   const months = React.useMemo(() => desktopData.map(item => item.month), [])
-
-   return (
-      <Card data-chart={id} className="flex flex-col">
-         <ChartStyle id={id} config={chartConfig} />
-         <CardHeader className="flex-row items-start space-y-0 pb-0">
-            <div className="grid gap-1">
-               <CardTitle>Pie Chart - Interactive</CardTitle>
-               <CardDescription>January - June 2024</CardDescription>
-            </div>
-            <Select value={activeMonth} onValueChange={setActiveMonth}>
-               <SelectTrigger
-                  className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
-                  aria-label="Select a value"
-               >
-                  <SelectValue placeholder="Select month" />
-               </SelectTrigger>
-               <SelectContent align="end" className="rounded-xl">
-                  {months.map((key) => {
-                     const config = chartConfig[key as keyof typeof chartConfig]
-
-                     if (!config) {
-                        return null
-                     }
-
-                     return (
-                        <SelectItem
-                           key={key}
-                           value={key}
-                           className="rounded-lg [&_span]:flex"
-                        >
-                           <div className="flex items-center gap-2 text-xs">
-                              <span
-                                 className="flex size-3 shrink-0 rounded-sm"
-                                 style={{
-                                    backgroundColor: `var(--color-${key})`,
-                                 }}
-                              />
-                              {config?.label}
-                           </div>
-                        </SelectItem>
-                     )
-                  })}
-               </SelectContent>
-            </Select>
-         </CardHeader>
-         <CardContent className="flex flex-1 justify-center pb-0">
-            <ChartContainer
-               id={id}
-               config={chartConfig}
-               className="mx-auto aspect-square w-full max-w-[300px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Pie
-                     data={desktopData}
-                     dataKey="desktop"
-                     nameKey="month"
-                     innerRadius={60}
-                     strokeWidth={5}
-                     activeIndex={activeIndex}
-                     activeShape={({
-                        outerRadius = 0,
-                        ...props
-                     }: PieSectorDataItem) => (
-                        <g>
-                           <Sector {...props} outerRadius={outerRadius + 10} />
-                           <Sector
-                              {...props}
-                              outerRadius={outerRadius + 25}
-                              innerRadius={outerRadius + 12}
-                           />
-                        </g>
-                     )}
-                  >
-                     <Label
-                        content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                              return (
-                                 <text
-                                    x={viewBox.cx}
-                                    y={viewBox.cy}
-                                    textAnchor="middle"
-                                    dominantBaseline="middle"
-                                 >
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={viewBox.cy}
-                                       className="fill-foreground text-3xl font-bold"
-                                    >
-                                       {desktopData[activeIndex].desktop.toLocaleString()}
-                                    </tspan>
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={(viewBox.cy || 0) + 24}
-                                       className="fill-muted-foreground"
-                                    >
-                                       Visitors
-                                    </tspan>
-                                 </text>
-                              )
-                           }
-                        }}
-                     />
-                  </Pie>
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-pie-label-custom.tsx b/apps/web/registry/default/block/chart-pie-label-custom.tsx
deleted file mode 100644
index b101130b..00000000
--- a/apps/web/registry/default/block/chart-pie-label-custom.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A pie chart with a custom label'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Custom Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     content={<ChartTooltipContent nameKey="visitors" hideLabel />}
-                  />
-                  <Pie
-                     data={chartData}
-                     dataKey="visitors"
-                     labelLine={false}
-                     label={({ payload, ...props }) => {
-                        return (
-                           <text
-                              cx={props.cx}
-                              cy={props.cy}
-                              x={props.x}
-                              y={props.y}
-                              textAnchor={props.textAnchor}
-                              dominantBaseline={props.dominantBaseline}
-                              fill="hsla(var(--foreground))"
-                           >
-                              {`${
-                      chartConfig[payload.browser as keyof typeof chartConfig]
-                        ?.label
-                    } (${payload.visitors})`}
-                           </text>
-                        )
-                     }}
-                     nameKey="browser"
-                  />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-pie-label-list.tsx b/apps/web/registry/default/block/chart-pie-label-list.tsx
deleted file mode 100644
index 8cf2e738..00000000
--- a/apps/web/registry/default/block/chart-pie-label-list.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { LabelList, Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A pie chart with a label list'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Label List</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     content={<ChartTooltipContent nameKey="visitors" hideLabel />}
-                  />
-                  <Pie data={chartData} dataKey="visitors">
-                     <LabelList
-                        dataKey="browser"
-                        className="fill-background"
-                        stroke="none"
-                        fontSize={12}
-                        formatter={(value: keyof typeof chartConfig) =>
-                           chartConfig[value]?.label}
-                     />
-                  </Pie>
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-pie-label.tsx b/apps/web/registry/default/block/chart-pie-label.tsx
deleted file mode 100644
index 39d835b4..00000000
--- a/apps/web/registry/default/block/chart-pie-label.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A pie chart with a label'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[250px] pb-0"
-            >
-               <PieChart>
-                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-                  <Pie data={chartData} dataKey="visitors" label nameKey="browser" />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-pie-legend.tsx b/apps/web/registry/default/block/chart-pie-legend.tsx
deleted file mode 100644
index fccfd705..00000000
--- a/apps/web/registry/default/block/chart-pie-legend.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client'
-
-import { Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A pie chart with a legend'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Legend</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[300px]"
-            >
-               <PieChart>
-                  <Pie data={chartData} dataKey="visitors" />
-                  <ChartLegend
-                     content={<ChartLegendContent nameKey="browser" />}
-                     className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
-                  />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-pie-separator-none.tsx b/apps/web/registry/default/block/chart-pie-separator-none.tsx
deleted file mode 100644
index 24c7dc4b..00000000
--- a/apps/web/registry/default/block/chart-pie-separator-none.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A pie chart with no separator'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Separator None</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Pie
-                     data={chartData}
-                     dataKey="visitors"
-                     nameKey="browser"
-                     stroke="0"
-                  />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-pie-simple.tsx b/apps/web/registry/default/block/chart-pie-simple.tsx
deleted file mode 100644
index cc9b3ed9..00000000
--- a/apps/web/registry/default/block/chart-pie-simple.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A simple pie chart'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Pie data={chartData} dataKey="visitors" nameKey="browser" />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-pie-stacked.tsx b/apps/web/registry/default/block/chart-pie-stacked.tsx
deleted file mode 100644
index 7b82fcd1..00000000
--- a/apps/web/registry/default/block/chart-pie-stacked.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { TrendingUp } from 'lucide-react'
-import { Label, Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A pie chart with stacked sections'
-
-const desktopData = [
-   { month: 'january', desktop: 186, fill: 'var(--color-january)' },
-   { month: 'february', desktop: 305, fill: 'var(--color-february)' },
-   { month: 'march', desktop: 237, fill: 'var(--color-march)' },
-   { month: 'april', desktop: 173, fill: 'var(--color-april)' },
-   { month: 'may', desktop: 209, fill: 'var(--color-may)' },
-]
-
-const mobileData = [
-   { month: 'january', mobile: 80, fill: 'var(--color-january)' },
-   { month: 'february', mobile: 200, fill: 'var(--color-february)' },
-   { month: 'march', mobile: 120, fill: 'var(--color-march)' },
-   { month: 'april', mobile: 190, fill: 'var(--color-april)' },
-   { month: 'may', mobile: 130, fill: 'var(--color-may)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   desktop: {
-      label: 'Desktop',
-   },
-   mobile: {
-      label: 'Mobile',
-   },
-   january: {
-      label: 'January',
-      color: 'hsl(var(--chart-1))',
-   },
-   february: {
-      label: 'February',
-      color: 'hsl(var(--chart-2))',
-   },
-   march: {
-      label: 'March',
-      color: 'hsl(var(--chart-3))',
-   },
-   april: {
-      label: 'April',
-      color: 'hsl(var(--chart-4))',
-   },
-   may: {
-      label: 'May',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Stacked</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           labelKey="visitors"
-                           nameKey="month"
-                           indicator="line"
-                           labelFormatter={(_, payload) => {
-                              return chartConfig[
-                                 payload?.[0].dataKey as keyof typeof chartConfig
-                              ].label
-                           }}
-                        />
-                     )}
-                  />
-                  <Pie data={desktopData} dataKey="desktop" outerRadius={60} />
-                  <Pie
-                     data={mobileData}
-                     dataKey="mobile"
-                     innerRadius={70}
-                     outerRadius={90}
-                  />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-default.tsx b/apps/web/registry/default/block/chart-radar-default.tsx
deleted file mode 100644
index d4105cb4..00000000
--- a/apps/web/registry/default/block/chart-radar-default.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                  <PolarAngleAxis dataKey="month" />
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-dots.tsx b/apps/web/registry/default/block/chart-radar-dots.tsx
deleted file mode 100644
index 6e412568..00000000
--- a/apps/web/registry/default/block/chart-radar-dots.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with dots'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center">
-            <CardTitle>Radar Chart - Dots</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                  <PolarAngleAxis dataKey="month" />
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                     dot={{
-                        r: 4,
-                        fillOpacity: 1,
-                     }}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-grid-circle-fill.tsx b/apps/web/registry/default/block/chart-radar-grid-circle-fill.tsx
deleted file mode 100644
index 5b29a8f8..00000000
--- a/apps/web/registry/default/block/chart-radar-grid-circle-fill.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with a grid and circle fill'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 285 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 203 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 264 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                  <PolarGrid
-                     className="fill-[--color-desktop] opacity-20"
-                     gridType="circle"
-                  />
-                  <PolarAngleAxis dataKey="month" />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.5}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-grid-circle-no-lines.tsx b/apps/web/registry/default/block/chart-radar-grid-circle-no-lines.tsx
deleted file mode 100644
index 0df38d20..00000000
--- a/apps/web/registry/default/block/chart-radar-grid-circle-no-lines.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with a grid and circle fill'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 203 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <PolarGrid gridType="circle" radialLines={false} />
-                  <PolarAngleAxis dataKey="month" />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                     dot={{
-                        r: 4,
-                        fillOpacity: 1,
-                     }}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-grid-circle.tsx b/apps/web/registry/default/block/chart-radar-grid-circle.tsx
deleted file mode 100644
index 4ce7e306..00000000
--- a/apps/web/registry/default/block/chart-radar-grid-circle.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with a grid and circle'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Grid Circle</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <PolarGrid gridType="circle" />
-                  <PolarAngleAxis dataKey="month" />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                     dot={{
-                        r: 4,
-                        fillOpacity: 1,
-                     }}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-grid-custom.tsx b/apps/web/registry/default/block/chart-radar-grid-custom.tsx
deleted file mode 100644
index 67965a88..00000000
--- a/apps/web/registry/default/block/chart-radar-grid-custom.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with a custom grid'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Grid Custom</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />
-                  <PolarAngleAxis dataKey="month" />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-grid-fill.tsx b/apps/web/registry/default/block/chart-radar-grid-fill.tsx
deleted file mode 100644
index cc359b4f..00000000
--- a/apps/web/registry/default/block/chart-radar-grid-fill.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with a grid filled'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 285 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 203 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 264 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Grid Filled</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <PolarGrid className="fill-[--color-desktop] opacity-20" />
-                  <PolarAngleAxis dataKey="month" />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.5}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-grid-none.tsx b/apps/web/registry/default/block/chart-radar-grid-none.tsx
deleted file mode 100644
index ca243a36..00000000
--- a/apps/web/registry/default/block/chart-radar-grid-none.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with no grid'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Grid None</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <PolarAngleAxis dataKey="month" />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                     dot={{
-                        r: 4,
-                        fillOpacity: 1,
-                     }}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-icons.tsx b/apps/web/registry/default/block/chart-radar-icons.tsx
deleted file mode 100644
index f287f913..00000000
--- a/apps/web/registry/default/block/chart-radar-icons.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client'
-
-import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with icons'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-      icon: ArrowDownFromLine,
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-      icon: ArrowUpFromLine,
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Icons</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart
-                  data={chartData}
-                  margin={{
-                     top: -40,
-                     bottom: -10,
-                  }}
-               >
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <PolarAngleAxis dataKey="month" />
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
-                  <ChartLegend className="mt-8" content={<ChartLegendContent />} />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 pt-4 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-label-custom.tsx b/apps/web/registry/default/block/chart-radar-label-custom.tsx
deleted file mode 100644
index 59ac3355..00000000
--- a/apps/web/registry/default/block/chart-radar-label-custom.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with a custom label'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Custom Label</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart
-                  data={chartData}
-                  margin={{
-                     top: 10,
-                     right: 10,
-                     bottom: 10,
-                     left: 10,
-                  }}
-               >
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <PolarAngleAxis
-                     dataKey="month"
-                     tick={({ x, y, textAnchor, value, index, ...props }) => {
-                        const data = chartData[index]
-
-                        return (
-                           <text
-                              x={x}
-                              y={index === 0 ? y - 10 : y}
-                              textAnchor={textAnchor}
-                              fontSize={13}
-                              fontWeight={500}
-                              {...props}
-                           >
-                              <tspan>{data.desktop}</tspan>
-                              <tspan className="fill-muted-foreground">/</tspan>
-                              <tspan>{data.mobile}</tspan>
-                              <tspan
-                                 x={x}
-                                 dy="1rem"
-                                 fontSize={12}
-                                 className="fill-muted-foreground"
-                              >
-                                 {data.month}
-                              </tspan>
-                           </text>
-                        )
-                     }}
-                  />
-
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-legend.tsx b/apps/web/registry/default/block/chart-radar-legend.tsx
deleted file mode 100644
index 7a7cc4c8..00000000
--- a/apps/web/registry/default/block/chart-radar-legend.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with a legend'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Legend</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart
-                  data={chartData}
-                  margin={{
-                     top: -40,
-                     bottom: -10,
-                  }}
-               >
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <PolarAngleAxis dataKey="month" />
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
-                  <ChartLegend className="mt-8" content={<ChartLegendContent />} />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 pt-4 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-lines-only.tsx b/apps/web/registry/default/block/chart-radar-lines-only.tsx
deleted file mode 100644
index 77d26262..00000000
--- a/apps/web/registry/default/block/chart-radar-lines-only.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with lines only'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 160 },
-   { month: 'February', desktop: 185, mobile: 170 },
-   { month: 'March', desktop: 207, mobile: 180 },
-   { month: 'April', desktop: 173, mobile: 160 },
-   { month: 'May', desktop: 160, mobile: 190 },
-   { month: 'June', desktop: 174, mobile: 204 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Lines Only</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <PolarAngleAxis dataKey="month" />
-                  <PolarGrid radialLines={false} />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0}
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                  />
-                  <Radar
-                     dataKey="mobile"
-                     fill="var(--color-mobile)"
-                     fillOpacity={0}
-                     stroke="var(--color-mobile)"
-                     strokeWidth={2}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-multiple.tsx b/apps/web/registry/default/block/chart-radar-multiple.tsx
deleted file mode 100644
index 37d2a7f6..00000000
--- a/apps/web/registry/default/block/chart-radar-multiple.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with multiple data'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Multiple</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <PolarAngleAxis dataKey="month" />
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radar-radius.tsx b/apps/web/registry/default/block/chart-radar-radius.tsx
deleted file mode 100644
index b0103b6f..00000000
--- a/apps/web/registry/default/block/chart-radar-radius.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import {
-   PolarAngleAxis,
-   PolarGrid,
-   PolarRadiusAxis,
-   Radar,
-   RadarChart,
-} from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radar chart with a radius axis'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Radius Axis</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={
-                        <ChartTooltipContent indicator="line" labelKey="month" />
-                     }
-                  />
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
-                  <PolarRadiusAxis
-                     angle={60}
-                     stroke="hsla(var(--foreground))"
-                     orientation="middle"
-                     axisLine={false}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radial-grid.tsx b/apps/web/registry/default/block/chart-radial-grid.tsx
deleted file mode 100644
index 38b6524f..00000000
--- a/apps/web/registry/default/block/chart-radial-grid.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarGrid, RadialBar, RadialBarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radial chart with a grid'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Radial Chart - Grid</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel nameKey="browser" />}
-                  />
-                  <PolarGrid gridType="circle" />
-                  <RadialBar dataKey="visitors" />
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radial-label.tsx b/apps/web/registry/default/block/chart-radial-label.tsx
deleted file mode 100644
index a8e3c9f1..00000000
--- a/apps/web/registry/default/block/chart-radial-label.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { LabelList, RadialBar, RadialBarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radial chart with a label'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Radial Chart - Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadialBarChart
-                  data={chartData}
-                  startAngle={-90}
-                  endAngle={380}
-                  innerRadius={30}
-                  outerRadius={110}
-               >
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel nameKey="browser" />}
-                  />
-                  <RadialBar dataKey="visitors" background>
-                     <LabelList
-                        position="insideStart"
-                        dataKey="browser"
-                        className="fill-white capitalize mix-blend-luminosity"
-                        fontSize={11}
-                     />
-                  </RadialBar>
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radial-shape.tsx b/apps/web/registry/default/block/chart-radial-shape.tsx
deleted file mode 100644
index 3774a11c..00000000
--- a/apps/web/registry/default/block/chart-radial-shape.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import {
-   Label,
-   PolarGrid,
-   PolarRadiusAxis,
-   RadialBar,
-   RadialBarChart,
-} from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type { ChartConfig } from '~/registry/default/ui/chart'
-import { ChartContainer } from '~/registry/default/ui/chart'
-
-export const description = 'A radial chart with a custom shape'
-
-const chartData = [
-   { browser: 'safari', visitors: 1260, fill: 'var(--color-safari)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Radial Chart - Shape</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadialBarChart
-                  data={chartData}
-                  endAngle={100}
-                  innerRadius={80}
-                  outerRadius={140}
-               >
-                  <PolarGrid
-                     gridType="circle"
-                     radialLines={false}
-                     stroke="none"
-                     className="first:fill-muted last:fill-background"
-                     polarRadius={[86, 74]}
-                  />
-                  <RadialBar dataKey="visitors" background />
-                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
-                     <Label
-                        content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                              return (
-                                 <text
-                                    x={viewBox.cx}
-                                    y={viewBox.cy}
-                                    textAnchor="middle"
-                                    dominantBaseline="middle"
-                                 >
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={viewBox.cy}
-                                       className="fill-foreground text-4xl font-bold"
-                                    >
-                                       {chartData[0].visitors.toLocaleString()}
-                                    </tspan>
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={(viewBox.cy || 0) + 24}
-                                       className="fill-muted-foreground"
-                                    >
-                                       Visitors
-                                    </tspan>
-                                 </text>
-                              )
-                           }
-                        }}
-                     />
-                  </PolarRadiusAxis>
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radial-simple.tsx b/apps/web/registry/default/block/chart-radial-simple.tsx
deleted file mode 100644
index d8ba77ed..00000000
--- a/apps/web/registry/default/block/chart-radial-simple.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { RadialBar, RadialBarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radial chart'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Radial Chart</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel nameKey="browser" />}
-                  />
-                  <RadialBar dataKey="visitors" background />
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radial-stacked.tsx b/apps/web/registry/default/block/chart-radial-stacked.tsx
deleted file mode 100644
index e4fd832a..00000000
--- a/apps/web/registry/default/block/chart-radial-stacked.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A radial chart with stacked sections'
-
-const chartData = [{ month: 'january', desktop: 1260, mobile: 570 }]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   const totalVisitors = chartData[0].desktop + chartData[0].mobile
-
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Radial Chart - Stacked</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex flex-1 items-center pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square w-full max-w-[250px]"
-            >
-               <RadialBarChart
-                  data={chartData}
-                  endAngle={180}
-                  innerRadius={80}
-                  outerRadius={130}
-               >
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
-                     <Label
-                        content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                              return (
-                                 <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={(viewBox.cy || 0) - 16}
-                                       className="fill-foreground text-2xl font-bold"
-                                    >
-                                       {totalVisitors.toLocaleString()}
-                                    </tspan>
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={(viewBox.cy || 0) + 4}
-                                       className="fill-muted-foreground"
-                                    >
-                                       Visitors
-                                    </tspan>
-                                 </text>
-                              )
-                           }
-                        }}
-                     />
-                  </PolarRadiusAxis>
-                  <RadialBar
-                     dataKey="desktop"
-                     stackId="a"
-                     cornerRadius={5}
-                     fill="var(--color-desktop)"
-                     className="stroke-transparent stroke-2"
-                  />
-                  <RadialBar
-                     dataKey="mobile"
-                     fill="var(--color-mobile)"
-                     stackId="a"
-                     cornerRadius={5}
-                     className="stroke-transparent stroke-2"
-                  />
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-radial-text.tsx b/apps/web/registry/default/block/chart-radial-text.tsx
deleted file mode 100644
index b0f373f1..00000000
--- a/apps/web/registry/default/block/chart-radial-text.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import {
-   Label,
-   PolarGrid,
-   PolarRadiusAxis,
-   RadialBar,
-   RadialBarChart,
-} from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type { ChartConfig } from '~/registry/default/ui/chart'
-import { ChartContainer } from '~/registry/default/ui/chart'
-
-export const description = 'A radial chart with text'
-
-const chartData = [
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Radial Chart - Text</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadialBarChart
-                  data={chartData}
-                  startAngle={0}
-                  endAngle={250}
-                  innerRadius={80}
-                  outerRadius={110}
-               >
-                  <PolarGrid
-                     gridType="circle"
-                     radialLines={false}
-                     stroke="none"
-                     className="first:fill-muted last:fill-background"
-                     polarRadius={[86, 74]}
-                  />
-                  <RadialBar dataKey="visitors" background cornerRadius={10} />
-                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
-                     <Label
-                        content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                              return (
-                                 <text
-                                    x={viewBox.cx}
-                                    y={viewBox.cy}
-                                    textAnchor="middle"
-                                    dominantBaseline="middle"
-                                 >
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={viewBox.cy}
-                                       className="fill-foreground text-4xl font-bold"
-                                    >
-                                       {chartData[0].visitors.toLocaleString()}
-                                    </tspan>
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={(viewBox.cy || 0) + 24}
-                                       className="fill-muted-foreground"
-                                    >
-                                       Visitors
-                                    </tspan>
-                                 </text>
-                              )
-                           }
-                        }}
-                     />
-                  </PolarRadiusAxis>
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-tooltip-advanced.tsx b/apps/web/registry/default/block/chart-tooltip-advanced.tsx
deleted file mode 100644
index 6d6a5d91..00000000
--- a/apps/web/registry/default/block/chart-tooltip-advanced.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Advanced</CardTitle>
-            <CardDescription>
-               Tooltip with custom formatter and total.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           hideLabel
-                           className="w-[180px]"
-                           formatter={(value, name, item, index) => (
-                              <>
-                                 <div
-                                    className="size-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
-                                    style={
-                                       {
-                                          '--color-bg': `var(--color-${name})`,
-                                       } as React.CSSProperties
-                                    }
-                                 />
-                                 {chartConfig[name as keyof typeof chartConfig]?.label
-                                 || name}
-                                 <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
-                                    {value}
-                                    <span className="text-muted-foreground font-normal">
-                                       kcal
-                                    </span>
-                                 </div>
-                                 {/* Add this after the last item */}
-                                 {index === 1 && (
-                                    <div className="text-foreground mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium">
-                                       Total
-                                       <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
-                                          {item.payload.running + item.payload.swimming}
-                                          <span className="text-muted-foreground font-normal">
-                                             kcal
-                                          </span>
-                                       </div>
-                                    </div>
-                                 )}
-                              </>
-                           )}
-                        />
-                     )}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-tooltip-default.tsx b/apps/web/registry/default/block/chart-tooltip-default.tsx
deleted file mode 100644
index e1459cf7..00000000
--- a/apps/web/registry/default/block/chart-tooltip-default.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Default</CardTitle>
-            <CardDescription>
-               Default tooltip with ChartTooltipContent.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={<ChartTooltipContent />}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-tooltip-formatter.tsx b/apps/web/registry/default/block/chart-tooltip-formatter.tsx
deleted file mode 100644
index 52cabbed..00000000
--- a/apps/web/registry/default/block/chart-tooltip-formatter.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Formatter</CardTitle>
-            <CardDescription>Tooltip with custom formatter .</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           hideLabel
-                           formatter={(value, name) => (
-                              <div className="text-muted-foreground flex min-w-[130px] items-center text-xs">
-                                 {chartConfig[name as keyof typeof chartConfig]?.label
-                                 || name}
-                                 <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
-                                    {value}
-                                    <span className="text-muted-foreground font-normal">
-                                       kcal
-                                    </span>
-                                 </div>
-                              </div>
-                           )}
-                        />
-                     )}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-tooltip-icons.tsx b/apps/web/registry/default/block/chart-tooltip-icons.tsx
deleted file mode 100644
index 2d04239d..00000000
--- a/apps/web/registry/default/block/chart-tooltip-icons.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import { Footprints, Waves } from 'lucide-react'
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-      icon: Footprints,
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-      icon: Waves,
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Icons</CardTitle>
-            <CardDescription>Tooltip with icons.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={<ChartTooltipContent hideLabel />}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-tooltip-indicator-line.tsx b/apps/web/registry/default/block/chart-tooltip-indicator-line.tsx
deleted file mode 100644
index 44befde0..00000000
--- a/apps/web/registry/default/block/chart-tooltip-indicator-line.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Line Indicator</CardTitle>
-            <CardDescription>Tooltip with line indicator.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={<ChartTooltipContent indicator="line" />}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-tooltip-indicator-none.tsx b/apps/web/registry/default/block/chart-tooltip-indicator-none.tsx
deleted file mode 100644
index d8eeb292..00000000
--- a/apps/web/registry/default/block/chart-tooltip-indicator-none.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - No Indicator</CardTitle>
-            <CardDescription>Tooltip with no indicator.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={<ChartTooltipContent hideIndicator />}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-tooltip-label-custom.tsx b/apps/web/registry/default/block/chart-tooltip-label-custom.tsx
deleted file mode 100644
index 92ded685..00000000
--- a/apps/web/registry/default/block/chart-tooltip-label-custom.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   activities: {
-      label: 'Activities',
-   },
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Custom label</CardTitle>
-            <CardDescription>
-               Tooltip with custom label from chartConfig.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={
-                        <ChartTooltipContent labelKey="activities" indicator="line" />
-                     }
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-tooltip-label-formatter.tsx b/apps/web/registry/default/block/chart-tooltip-label-formatter.tsx
deleted file mode 100644
index 14d73680..00000000
--- a/apps/web/registry/default/block/chart-tooltip-label-formatter.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Label Formatter</CardTitle>
-            <CardDescription>Tooltip with label formatter.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 day: 'numeric',
-                                 month: 'long',
-                                 year: 'numeric',
-                              })
-                           }}
-                        />
-                     )}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/chart-tooltip-label-none.tsx b/apps/web/registry/default/block/chart-tooltip-label-none.tsx
deleted file mode 100644
index 2727a1b6..00000000
--- a/apps/web/registry/default/block/chart-tooltip-label-none.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - No Label</CardTitle>
-            <CardDescription>Tooltip with no label.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={<ChartTooltipContent hideIndicator hideLabel />}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/charts-01-chunk-0.tsx b/apps/web/registry/default/block/charts-01-chunk-0.tsx
deleted file mode 100644
index 902bef1a..00000000
--- a/apps/web/registry/default/block/charts-01-chunk-0.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-'use client'
-
-import { Bar, BarChart, Label, Rectangle, ReferenceLine, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
-         <CardHeader className="space-y-0 pb-2">
-            <CardDescription>Today</CardDescription>
-            <CardTitle className="text-4xl tabular-nums">
-               12,584
-               {' '}
-               <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
-                  steps
-               </span>
-            </CardTitle>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer
-               config={{
-                  steps: {
-                     label: 'Steps',
-                     color: 'hsl(var(--chart-1))',
-                  },
-               }}
-            >
-               <BarChart
-                  accessibilityLayer
-                  margin={{
-                     left: -4,
-                     right: -4,
-                  }}
-                  data={[
-                     {
-                        date: '2024-01-01',
-                        steps: 2000,
-                     },
-                     {
-                        date: '2024-01-02',
-                        steps: 2100,
-                     },
-                     {
-                        date: '2024-01-03',
-                        steps: 2200,
-                     },
-                     {
-                        date: '2024-01-04',
-                        steps: 1300,
-                     },
-                     {
-                        date: '2024-01-05',
-                        steps: 1400,
-                     },
-                     {
-                        date: '2024-01-06',
-                        steps: 2500,
-                     },
-                     {
-                        date: '2024-01-07',
-                        steps: 1600,
-                     },
-                  ]}
-               >
-                  <Bar
-                     dataKey="steps"
-                     fill="var(--color-steps)"
-                     radius={5}
-                     fillOpacity={0.6}
-                     activeBar={<Rectangle fillOpacity={0.8} />}
-                  />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={4}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <ChartTooltip
-                     defaultIndex={2}
-                     content={(
-                        <ChartTooltipContent
-                           hideIndicator
-                           labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 day: 'numeric',
-                                 month: 'long',
-                                 year: 'numeric',
-                              })
-                           }}
-                        />
-                     )}
-                     cursor={false}
-                  />
-                  <ReferenceLine
-                     y={1200}
-                     stroke="hsl(var(--muted-foreground))"
-                     strokeDasharray="3 3"
-                     strokeWidth={1}
-                  >
-                     <Label
-                        position="insideBottomLeft"
-                        value="Average Steps"
-                        offset={10}
-                        fill="hsl(var(--foreground))"
-                     />
-                     <Label
-                        position="insideTopLeft"
-                        value="12,343"
-                        className="text-lg"
-                        fill="hsl(var(--foreground))"
-                        offset={10}
-                        startOffset={100}
-                     />
-                  </ReferenceLine>
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-1">
-            <CardDescription>
-               Over the past 7 days, you have walked
-               {' '}
-               <span className="text-foreground font-medium">53,305</span>
-               {' '}
-               steps.
-            </CardDescription>
-            <CardDescription>
-               You need
-               {' '}
-               <span className="text-foreground font-medium">12,584</span>
-               {' '}
-               more steps to reach your goal.
-            </CardDescription>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/charts-01-chunk-1.tsx b/apps/web/registry/default/block/charts-01-chunk-1.tsx
deleted file mode 100644
index a6a7f6cb..00000000
--- a/apps/web/registry/default/block/charts-01-chunk-1.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-'use client'
-
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
-         <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
-            <div>
-               <CardDescription>Resting HR</CardDescription>
-               <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                  62
-                  <span className="text-muted-foreground text-sm font-normal tracking-normal">
-                     bpm
-                  </span>
-               </CardTitle>
-            </div>
-            <div>
-               <CardDescription>Variability</CardDescription>
-               <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                  35
-                  <span className="text-muted-foreground text-sm font-normal tracking-normal">
-                     ms
-                  </span>
-               </CardTitle>
-            </div>
-         </CardHeader>
-         <CardContent className="flex flex-1 items-center">
-            <ChartContainer
-               config={{
-                  resting: {
-                     label: 'Resting',
-                     color: 'hsl(var(--chart-1))',
-                  },
-               }}
-               className="w-full"
-            >
-               <LineChart
-                  accessibilityLayer
-                  margin={{
-                     left: 14,
-                     right: 14,
-                     top: 10,
-                  }}
-                  data={[
-                     {
-                        date: '2024-01-01',
-                        resting: 62,
-                     },
-                     {
-                        date: '2024-01-02',
-                        resting: 72,
-                     },
-                     {
-                        date: '2024-01-03',
-                        resting: 35,
-                     },
-                     {
-                        date: '2024-01-04',
-                        resting: 62,
-                     },
-                     {
-                        date: '2024-01-05',
-                        resting: 52,
-                     },
-                     {
-                        date: '2024-01-06',
-                        resting: 62,
-                     },
-                     {
-                        date: '2024-01-07',
-                        resting: 70,
-                     },
-                  ]}
-               >
-                  <CartesianGrid
-                     strokeDasharray="4 4"
-                     vertical={false}
-                     stroke="hsl(var(--muted-foreground))"
-                     strokeOpacity={0.5}
-                  />
-                  <YAxis hide domain={['dataMin - 10', 'dataMax + 10']} />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Line
-                     dataKey="resting"
-                     type="natural"
-                     fill="var(--color-resting)"
-                     stroke="var(--color-resting)"
-                     strokeWidth={2}
-                     dot={false}
-                     activeDot={{
-                        fill: 'var(--color-resting)',
-                        stroke: 'var(--color-resting)',
-                        r: 4,
-                     }}
-                  />
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           indicator="line"
-                           labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 day: 'numeric',
-                                 month: 'long',
-                                 year: 'numeric',
-                              })
-                           }}
-                        />
-                     )}
-                     cursor={false}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/charts-01-chunk-2.tsx b/apps/web/registry/default/block/charts-01-chunk-2.tsx
deleted file mode 100644
index 34008b82..00000000
--- a/apps/web/registry/default/block/charts-01-chunk-2.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'use client'
-
-import { Bar, BarChart, LabelList, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { ChartContainer } from '~/registry/default/ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="max-w-xs" x-chunk="charts-01-chunk-2">
-         <CardHeader>
-            <CardTitle>Progress</CardTitle>
-            <CardDescription>
-               You're average more steps a day this year than last year.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-4">
-            <div className="grid auto-rows-min gap-2">
-               <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  12,453
-                  <span className="text-muted-foreground text-sm font-normal">
-                     steps/day
-                  </span>
-               </div>
-               <ChartContainer
-                  config={{
-                     steps: {
-                        label: 'Steps',
-                        color: 'hsl(var(--chart-1))',
-                     },
-                  }}
-                  className="aspect-auto h-[32px] w-full"
-               >
-                  <BarChart
-                     accessibilityLayer
-                     layout="vertical"
-                     margin={{
-                        left: 0,
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                     }}
-                     data={[
-                        {
-                           date: '2024',
-                           steps: 12435,
-                        },
-                     ]}
-                  >
-                     <Bar
-                        dataKey="steps"
-                        fill="var(--color-steps)"
-                        radius={4}
-                        barSize={32}
-                     >
-                        <LabelList
-                           position="insideLeft"
-                           dataKey="date"
-                           offset={8}
-                           fontSize={12}
-                           fill="white"
-                        />
-                     </Bar>
-                     <YAxis dataKey="date" type="category" tickCount={1} hide />
-                     <XAxis dataKey="steps" type="number" hide />
-                  </BarChart>
-               </ChartContainer>
-            </div>
-            <div className="grid auto-rows-min gap-2">
-               <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  10,103
-                  <span className="text-muted-foreground text-sm font-normal">
-                     steps/day
-                  </span>
-               </div>
-               <ChartContainer
-                  config={{
-                     steps: {
-                        label: 'Steps',
-                        color: 'hsl(var(--muted))',
-                     },
-                  }}
-                  className="aspect-auto h-[32px] w-full"
-               >
-                  <BarChart
-                     accessibilityLayer
-                     layout="vertical"
-                     margin={{
-                        left: 0,
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                     }}
-                     data={[
-                        {
-                           date: '2023',
-                           steps: 10103,
-                        },
-                     ]}
-                  >
-                     <Bar
-                        dataKey="steps"
-                        fill="var(--color-steps)"
-                        radius={4}
-                        barSize={32}
-                     >
-                        <LabelList
-                           position="insideLeft"
-                           dataKey="date"
-                           offset={8}
-                           fontSize={12}
-                           fill="hsl(var(--muted-foreground))"
-                        />
-                     </Bar>
-                     <YAxis dataKey="date" type="category" tickCount={1} hide />
-                     <XAxis dataKey="steps" type="number" hide />
-                  </BarChart>
-               </ChartContainer>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/charts-01-chunk-3.tsx b/apps/web/registry/default/block/charts-01-chunk-3.tsx
deleted file mode 100644
index 27463caa..00000000
--- a/apps/web/registry/default/block/charts-01-chunk-3.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client'
-
-import { Bar, BarChart, Rectangle, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { ChartContainer } from '~/registry/default/ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="max-w-xs" x-chunk="charts-01-chunk-3">
-         <CardHeader className="p-4 pb-0">
-            <CardTitle>Walking Distance</CardTitle>
-            <CardDescription>
-               Over the last 7 days, your distance walked and run was 12.5 miles per
-               day.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
-            <div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
-               12.5
-               <span className="text-muted-foreground text-sm font-normal">
-                  miles/day
-               </span>
-            </div>
-            <ChartContainer
-               config={{
-                  steps: {
-                     label: 'Steps',
-                     color: 'hsl(var(--chart-1))',
-                  },
-               }}
-               className="ml-auto w-[72px]"
-            >
-               <BarChart
-                  accessibilityLayer
-                  margin={{
-                     left: 0,
-                     right: 0,
-                     top: 0,
-                     bottom: 0,
-                  }}
-                  data={[
-                     {
-                        date: '2024-01-01',
-                        steps: 2000,
-                     },
-                     {
-                        date: '2024-01-02',
-                        steps: 2100,
-                     },
-                     {
-                        date: '2024-01-03',
-                        steps: 2200,
-                     },
-                     {
-                        date: '2024-01-04',
-                        steps: 1300,
-                     },
-                     {
-                        date: '2024-01-05',
-                        steps: 1400,
-                     },
-                     {
-                        date: '2024-01-06',
-                        steps: 2500,
-                     },
-                     {
-                        date: '2024-01-07',
-                        steps: 1600,
-                     },
-                  ]}
-               >
-                  <Bar
-                     dataKey="steps"
-                     fill="var(--color-steps)"
-                     radius={2}
-                     fillOpacity={0.2}
-                     activeIndex={6}
-                     activeBar={<Rectangle fillOpacity={0.8} />}
-                  />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={4}
-                     hide
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/charts-01-chunk-4.tsx b/apps/web/registry/default/block/charts-01-chunk-4.tsx
deleted file mode 100644
index 3b8c307b..00000000
--- a/apps/web/registry/default/block/charts-01-chunk-4.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-'use client'
-
-import { Bar, BarChart, LabelList, XAxis, YAxis } from 'recharts'
-
-import { Card, CardContent, CardFooter } from '~/registry/default/ui/card'
-import { ChartContainer } from '~/registry/default/ui/chart'
-import { Separator } from '~/registry/default/ui/separator'
-
-export default function Component() {
-   return (
-      <Card className="max-w-xs" x-chunk="charts-01-chunk-4">
-         <CardContent className="flex gap-4 p-4 pb-2">
-            <ChartContainer
-               config={{
-                  move: {
-                     label: 'Move',
-                     color: 'hsl(var(--chart-1))',
-                  },
-                  stand: {
-                     label: 'Stand',
-                     color: 'hsl(var(--chart-2))',
-                  },
-                  exercise: {
-                     label: 'Exercise',
-                     color: 'hsl(var(--chart-3))',
-                  },
-               }}
-               className="h-[140px] w-full"
-            >
-               <BarChart
-                  margin={{
-                     left: 0,
-                     right: 0,
-                     top: 0,
-                     bottom: 10,
-                  }}
-                  data={[
-                     {
-                        activity: 'stand',
-                        value: (8 / 12) * 100,
-                        label: '8/12 hr',
-                        fill: 'var(--color-stand)',
-                     },
-                     {
-                        activity: 'exercise',
-                        value: (46 / 60) * 100,
-                        label: '46/60 min',
-                        fill: 'var(--color-exercise)',
-                     },
-                     {
-                        activity: 'move',
-                        value: (245 / 360) * 100,
-                        label: '245/360 kcal',
-                        fill: 'var(--color-move)',
-                     },
-                  ]}
-                  layout="vertical"
-                  barSize={32}
-                  barGap={2}
-               >
-                  <XAxis type="number" dataKey="value" hide />
-                  <YAxis
-                     dataKey="activity"
-                     type="category"
-                     tickLine={false}
-                     tickMargin={4}
-                     axisLine={false}
-                     className="capitalize"
-                  />
-                  <Bar dataKey="value" radius={5}>
-                     <LabelList
-                        position="insideLeft"
-                        dataKey="label"
-                        fill="white"
-                        offset={8}
-                        fontSize={12}
-                     />
-                  </Bar>
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex flex-row border-t p-4">
-            <div className="flex w-full items-center gap-2">
-               <div className="grid flex-1 auto-rows-min gap-0.5">
-                  <div className="text-muted-foreground text-xs">Move</div>
-                  <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                     562
-                     <span className="text-muted-foreground text-sm font-normal">
-                        kcal
-                     </span>
-                  </div>
-               </div>
-               <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-               <div className="grid flex-1 auto-rows-min gap-0.5">
-                  <div className="text-muted-foreground text-xs">Exercise</div>
-                  <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                     73
-                     <span className="text-muted-foreground text-sm font-normal">
-                        min
-                     </span>
-                  </div>
-               </div>
-               <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-               <div className="grid flex-1 auto-rows-min gap-0.5">
-                  <div className="text-muted-foreground text-xs">Stand</div>
-                  <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                     14
-                     <span className="text-muted-foreground text-sm font-normal">
-                        hr
-                     </span>
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/charts-01-chunk-5.tsx b/apps/web/registry/default/block/charts-01-chunk-5.tsx
deleted file mode 100644
index 69118033..00000000
--- a/apps/web/registry/default/block/charts-01-chunk-5.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client'
-
-import { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts'
-
-import { Card, CardContent } from '~/registry/default/ui/card'
-import { ChartContainer } from '~/registry/default/ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="max-w-xs" x-chunk="charts-01-chunk-5">
-         <CardContent className="flex gap-4 p-4">
-            <div className="grid items-center gap-2">
-               <div className="grid flex-1 auto-rows-min gap-0.5">
-                  <div className="text-muted-foreground text-sm">Move</div>
-                  <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                     562/600
-                     <span className="text-muted-foreground text-sm font-normal">
-                        kcal
-                     </span>
-                  </div>
-               </div>
-               <div className="grid flex-1 auto-rows-min gap-0.5">
-                  <div className="text-muted-foreground text-sm">Exercise</div>
-                  <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                     73/120
-                     <span className="text-muted-foreground text-sm font-normal">
-                        min
-                     </span>
-                  </div>
-               </div>
-               <div className="grid flex-1 auto-rows-min gap-0.5">
-                  <div className="text-muted-foreground text-sm">Stand</div>
-                  <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                     8/12
-                     <span className="text-muted-foreground text-sm font-normal">
-                        hr
-                     </span>
-                  </div>
-               </div>
-            </div>
-            <ChartContainer
-               config={{
-                  move: {
-                     label: 'Move',
-                     color: 'hsl(var(--chart-1))',
-                  },
-                  exercise: {
-                     label: 'Exercise',
-                     color: 'hsl(var(--chart-2))',
-                  },
-                  stand: {
-                     label: 'Stand',
-                     color: 'hsl(var(--chart-3))',
-                  },
-               }}
-               className="mx-auto aspect-square w-full max-w-[80%]"
-            >
-               <RadialBarChart
-                  margin={{
-                     left: -10,
-                     right: -10,
-                     top: -10,
-                     bottom: -10,
-                  }}
-                  data={[
-                     {
-                        activity: 'stand',
-                        value: (8 / 12) * 100,
-                        fill: 'var(--color-stand)',
-                     },
-                     {
-                        activity: 'exercise',
-                        value: (46 / 60) * 100,
-                        fill: 'var(--color-exercise)',
-                     },
-                     {
-                        activity: 'move',
-                        value: (245 / 360) * 100,
-                        fill: 'var(--color-move)',
-                     },
-                  ]}
-                  innerRadius="20%"
-                  barSize={24}
-                  startAngle={90}
-                  endAngle={450}
-               >
-                  <PolarAngleAxis
-                     type="number"
-                     domain={[0, 100]}
-                     dataKey="value"
-                     tick={false}
-                  />
-                  <RadialBar dataKey="value" background cornerRadius={5} />
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/charts-01-chunk-6.tsx b/apps/web/registry/default/block/charts-01-chunk-6.tsx
deleted file mode 100644
index 5a6f8dfd..00000000
--- a/apps/web/registry/default/block/charts-01-chunk-6.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client'
-
-import { Bar, BarChart, Rectangle, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { ChartContainer } from '~/registry/default/ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="max-w-xs" x-chunk="charts-01-chunk-6">
-         <CardHeader className="p-4 pb-0">
-            <CardTitle>Active Energy</CardTitle>
-            <CardDescription>
-               You're burning an average of 754 calories per day. Good job!
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
-            <div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
-               1,254
-               <span className="text-muted-foreground text-sm font-normal">
-                  kcal/day
-               </span>
-            </div>
-            <ChartContainer
-               config={{
-                  calories: {
-                     label: 'Calories',
-                     color: 'hsl(var(--chart-1))',
-                  },
-               }}
-               className="ml-auto w-[64px]"
-            >
-               <BarChart
-                  accessibilityLayer
-                  margin={{
-                     left: 0,
-                     right: 0,
-                     top: 0,
-                     bottom: 0,
-                  }}
-                  data={[
-                     {
-                        date: '2024-01-01',
-                        calories: 354,
-                     },
-                     {
-                        date: '2024-01-02',
-                        calories: 514,
-                     },
-                     {
-                        date: '2024-01-03',
-                        calories: 345,
-                     },
-                     {
-                        date: '2024-01-04',
-                        calories: 734,
-                     },
-                     {
-                        date: '2024-01-05',
-                        calories: 645,
-                     },
-                     {
-                        date: '2024-01-06',
-                        calories: 456,
-                     },
-                     {
-                        date: '2024-01-07',
-                        calories: 345,
-                     },
-                  ]}
-               >
-                  <Bar
-                     dataKey="calories"
-                     fill="var(--color-calories)"
-                     radius={2}
-                     fillOpacity={0.2}
-                     activeIndex={6}
-                     activeBar={<Rectangle fillOpacity={0.8} />}
-                  />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={4}
-                     hide
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/charts-01-chunk-7.tsx b/apps/web/registry/default/block/charts-01-chunk-7.tsx
deleted file mode 100644
index 64e6545f..00000000
--- a/apps/web/registry/default/block/charts-01-chunk-7.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-'use client'
-
-import { Area, AreaChart, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="max-w-xs" x-chunk="charts-01-chunk-7">
-         <CardHeader className="space-y-0 pb-0">
-            <CardDescription>Time in Bed</CardDescription>
-            <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-               8
-               <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
-                  hr
-               </span>
-               35
-               <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
-                  min
-               </span>
-            </CardTitle>
-         </CardHeader>
-         <CardContent className="p-0">
-            <ChartContainer
-               config={{
-                  time: {
-                     label: 'Time',
-                     color: 'hsl(var(--chart-2))',
-                  },
-               }}
-            >
-               <AreaChart
-                  accessibilityLayer
-                  data={[
-                     {
-                        date: '2024-01-01',
-                        time: 8.5,
-                     },
-                     {
-                        date: '2024-01-02',
-                        time: 7.2,
-                     },
-                     {
-                        date: '2024-01-03',
-                        time: 8.1,
-                     },
-                     {
-                        date: '2024-01-04',
-                        time: 6.2,
-                     },
-                     {
-                        date: '2024-01-05',
-                        time: 5.2,
-                     },
-                     {
-                        date: '2024-01-06',
-                        time: 8.1,
-                     },
-                     {
-                        date: '2024-01-07',
-                        time: 7.0,
-                     },
-                  ]}
-                  margin={{
-                     left: 0,
-                     right: 0,
-                     top: 0,
-                     bottom: 0,
-                  }}
-               >
-                  <XAxis dataKey="date" hide />
-                  <YAxis domain={['dataMin - 5', 'dataMax + 2']} hide />
-                  <defs>
-                     <linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
-                        <stop
-                           offset="5%"
-                           stopColor="var(--color-time)"
-                           stopOpacity={0.8}
-                        />
-                        <stop
-                           offset="95%"
-                           stopColor="var(--color-time)"
-                           stopOpacity={0.1}
-                        />
-                     </linearGradient>
-                  </defs>
-                  <Area
-                     dataKey="time"
-                     type="natural"
-                     fill="url(#fillTime)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-time)"
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                     formatter={value => (
-                        <div className="text-muted-foreground flex min-w-[120px] items-center text-xs">
-                           Time in bed
-                           <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
-                              {value}
-                              <span className="text-muted-foreground font-normal">
-                                 hr
-                              </span>
-                           </div>
-                        </div>
-                     )}
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/charts-01.tsx b/apps/web/registry/default/block/charts-01.tsx
deleted file mode 100644
index acddb0e2..00000000
--- a/apps/web/registry/default/block/charts-01.tsx
+++ /dev/null
@@ -1,902 +0,0 @@
-'use client'
-
-import {
-   Area,
-   AreaChart,
-   Bar,
-   BarChart,
-   CartesianGrid,
-   Label,
-   LabelList,
-   Line,
-   LineChart,
-   PolarAngleAxis,
-   RadialBar,
-   RadialBarChart,
-   Rectangle,
-   ReferenceLine,
-   XAxis,
-   YAxis,
-} from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-import { Separator } from '~/registry/default/ui/separator'
-
-export const description = 'A collection of health charts.'
-
-export const iframeHeight = '900px'
-
-export const containerClassName = 'min-h-screen py-12'
-
-export default function Charts() {
-   return (
-      <div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
-         <div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
-            <Card
-               x-chunk="A bar chart showing the number of steps you have walked in the past 7 days."
-               className="lg:max-w-md"
-            >
-               <CardHeader className="space-y-0 pb-2">
-                  <CardDescription>Today</CardDescription>
-                  <CardTitle className="text-4xl tabular-nums">
-                     12,584
-                     {' '}
-                     <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
-                        steps
-                     </span>
-                  </CardTitle>
-               </CardHeader>
-               <CardContent>
-                  <ChartContainer
-                     config={{
-                        steps: {
-                           label: 'Steps',
-                           color: 'hsl(var(--chart-1))',
-                        },
-                     }}
-                  >
-                     <BarChart
-                        accessibilityLayer
-                        margin={{
-                           left: -4,
-                           right: -4,
-                        }}
-                        data={[
-                           {
-                              date: '2024-01-01',
-                              steps: 2000,
-                           },
-                           {
-                              date: '2024-01-02',
-                              steps: 2100,
-                           },
-                           {
-                              date: '2024-01-03',
-                              steps: 2200,
-                           },
-                           {
-                              date: '2024-01-04',
-                              steps: 1300,
-                           },
-                           {
-                              date: '2024-01-05',
-                              steps: 1400,
-                           },
-                           {
-                              date: '2024-01-06',
-                              steps: 2500,
-                           },
-                           {
-                              date: '2024-01-07',
-                              steps: 1600,
-                           },
-                        ]}
-                     >
-                        <Bar
-                           dataKey="steps"
-                           fill="var(--color-steps)"
-                           radius={5}
-                           fillOpacity={0.6}
-                           activeBar={<Rectangle fillOpacity={0.8} />}
-                        />
-                        <XAxis
-                           dataKey="date"
-                           tickLine={false}
-                           axisLine={false}
-                           tickMargin={4}
-                           tickFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 weekday: 'short',
-                              })
-                           }}
-                        />
-                        <ChartTooltip
-                           defaultIndex={2}
-                           content={(
-                              <ChartTooltipContent
-                                 hideIndicator
-                                 labelFormatter={(value) => {
-                                    return new Date(value).toLocaleDateString('en-US', {
-                                       day: 'numeric',
-                                       month: 'long',
-                                       year: 'numeric',
-                                    })
-                                 }}
-                              />
-                           )}
-                           cursor={false}
-                        />
-                        <ReferenceLine
-                           y={1200}
-                           stroke="hsl(var(--muted-foreground))"
-                           strokeDasharray="3 3"
-                           strokeWidth={1}
-                        >
-                           <Label
-                              position="insideBottomLeft"
-                              value="Average Steps"
-                              offset={10}
-                              fill="hsl(var(--foreground))"
-                           />
-                           <Label
-                              position="insideTopLeft"
-                              value="12,343"
-                              className="text-lg"
-                              fill="hsl(var(--foreground))"
-                              offset={10}
-                              startOffset={100}
-                           />
-                        </ReferenceLine>
-                     </BarChart>
-                  </ChartContainer>
-               </CardContent>
-               <CardFooter className="flex-col items-start gap-1">
-                  <CardDescription>
-                     Over the past 7 days, you have walked
-                     {' '}
-                     <span className="text-foreground font-medium">53,305</span>
-                     {' '}
-                     steps.
-                  </CardDescription>
-                  <CardDescription>
-                     You need
-                     {' '}
-                     <span className="text-foreground font-medium">12,584</span>
-                     {' '}
-                     more
-                     steps to reach your goal.
-                  </CardDescription>
-               </CardFooter>
-            </Card>
-            <Card
-               x-chunk="A line chart showing the resting heart rate for the past 7 days."
-               className="flex flex-col lg:max-w-md"
-            >
-               <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
-                  <div>
-                     <CardDescription>Resting HR</CardDescription>
-                     <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                        62
-                        <span className="text-muted-foreground text-sm font-normal tracking-normal">
-                           bpm
-                        </span>
-                     </CardTitle>
-                  </div>
-                  <div>
-                     <CardDescription>Variability</CardDescription>
-                     <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                        35
-                        <span className="text-muted-foreground text-sm font-normal tracking-normal">
-                           ms
-                        </span>
-                     </CardTitle>
-                  </div>
-               </CardHeader>
-               <CardContent className="flex flex-1 items-center">
-                  <ChartContainer
-                     config={{
-                        resting: {
-                           label: 'Resting',
-                           color: 'hsl(var(--chart-1))',
-                        },
-                     }}
-                     className="w-full"
-                  >
-                     <LineChart
-                        accessibilityLayer
-                        margin={{
-                           left: 14,
-                           right: 14,
-                           top: 10,
-                        }}
-                        data={[
-                           {
-                              date: '2024-01-01',
-                              resting: 62,
-                           },
-                           {
-                              date: '2024-01-02',
-                              resting: 72,
-                           },
-                           {
-                              date: '2024-01-03',
-                              resting: 35,
-                           },
-                           {
-                              date: '2024-01-04',
-                              resting: 62,
-                           },
-                           {
-                              date: '2024-01-05',
-                              resting: 52,
-                           },
-                           {
-                              date: '2024-01-06',
-                              resting: 62,
-                           },
-                           {
-                              date: '2024-01-07',
-                              resting: 70,
-                           },
-                        ]}
-                     >
-                        <CartesianGrid
-                           strokeDasharray="4 4"
-                           vertical={false}
-                           stroke="hsl(var(--muted-foreground))"
-                           strokeOpacity={0.5}
-                        />
-                        <YAxis hide domain={['dataMin - 10', 'dataMax + 10']} />
-                        <XAxis
-                           dataKey="date"
-                           tickLine={false}
-                           axisLine={false}
-                           tickMargin={8}
-                           tickFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 weekday: 'short',
-                              })
-                           }}
-                        />
-                        <Line
-                           dataKey="resting"
-                           type="natural"
-                           fill="var(--color-resting)"
-                           stroke="var(--color-resting)"
-                           strokeWidth={2}
-                           dot={false}
-                           activeDot={{
-                              fill: 'var(--color-resting)',
-                              stroke: 'var(--color-resting)',
-                              r: 4,
-                           }}
-                        />
-                        <ChartTooltip
-                           content={(
-                              <ChartTooltipContent
-                                 indicator="line"
-                                 labelFormatter={(value) => {
-                                    return new Date(value).toLocaleDateString('en-US', {
-                                       day: 'numeric',
-                                       month: 'long',
-                                       year: 'numeric',
-                                    })
-                                 }}
-                              />
-                           )}
-                           cursor={false}
-                        />
-                     </LineChart>
-                  </ChartContainer>
-               </CardContent>
-            </Card>
-         </div>
-         <div className="grid w-full flex-1 gap-6 lg:max-w-80">
-            <Card
-               x-chunk="Two horizontal bar charts showing total steps taken during the current year and last year."
-               className="max-w-xs"
-            >
-               <CardHeader>
-                  <CardTitle>Progress</CardTitle>
-                  <CardDescription>
-                     You're average more steps a day this year than last year.
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="grid gap-4">
-                  <div className="grid auto-rows-min gap-2">
-                     <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                        12,453
-                        <span className="text-muted-foreground text-sm font-normal">
-                           steps/day
-                        </span>
-                     </div>
-                     <ChartContainer
-                        config={{
-                           steps: {
-                              label: 'Steps',
-                              color: 'hsl(var(--chart-1))',
-                           },
-                        }}
-                        className="aspect-auto h-[32px] w-full"
-                     >
-                        <BarChart
-                           accessibilityLayer
-                           layout="vertical"
-                           margin={{
-                              left: 0,
-                              top: 0,
-                              right: 0,
-                              bottom: 0,
-                           }}
-                           data={[
-                              {
-                                 date: '2024',
-                                 steps: 12435,
-                              },
-                           ]}
-                        >
-                           <Bar
-                              dataKey="steps"
-                              fill="var(--color-steps)"
-                              radius={4}
-                              barSize={32}
-                           >
-                              <LabelList
-                                 position="insideLeft"
-                                 dataKey="date"
-                                 offset={8}
-                                 fontSize={12}
-                                 fill="white"
-                              />
-                           </Bar>
-                           <YAxis dataKey="date" type="category" tickCount={1} hide />
-                           <XAxis dataKey="steps" type="number" hide />
-                        </BarChart>
-                     </ChartContainer>
-                  </div>
-                  <div className="grid auto-rows-min gap-2">
-                     <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                        10,103
-                        <span className="text-muted-foreground text-sm font-normal">
-                           steps/day
-                        </span>
-                     </div>
-                     <ChartContainer
-                        config={{
-                           steps: {
-                              label: 'Steps',
-                              color: 'hsl(var(--muted))',
-                           },
-                        }}
-                        className="aspect-auto h-[32px] w-full"
-                     >
-                        <BarChart
-                           accessibilityLayer
-                           layout="vertical"
-                           margin={{
-                              left: 0,
-                              top: 0,
-                              right: 0,
-                              bottom: 0,
-                           }}
-                           data={[
-                              {
-                                 date: '2023',
-                                 steps: 10103,
-                              },
-                           ]}
-                        >
-                           <Bar
-                              dataKey="steps"
-                              fill="var(--color-steps)"
-                              radius={4}
-                              barSize={32}
-                           >
-                              <LabelList
-                                 position="insideLeft"
-                                 dataKey="date"
-                                 offset={8}
-                                 fontSize={12}
-                                 fill="hsl(var(--muted-foreground))"
-                              />
-                           </Bar>
-                           <YAxis dataKey="date" type="category" tickCount={1} hide />
-                           <XAxis dataKey="steps" type="number" hide />
-                        </BarChart>
-                     </ChartContainer>
-                  </div>
-               </CardContent>
-            </Card>
-            <Card
-               x-chunk="A bar chart showing the walking and running distance for the past 7 days."
-               className="max-w-xs"
-            >
-               <CardHeader className="p-4 pb-0">
-                  <CardTitle>Walking Distance</CardTitle>
-                  <CardDescription>
-                     Over the last 7 days, your distance walked and run was 12.5 miles
-                     per day.
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
-                  <div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
-                     12.5
-                     <span className="text-muted-foreground text-sm font-normal">
-                        miles/day
-                     </span>
-                  </div>
-                  <ChartContainer
-                     config={{
-                        steps: {
-                           label: 'Steps',
-                           color: 'hsl(var(--chart-1))',
-                        },
-                     }}
-                     className="ml-auto w-[72px]"
-                  >
-                     <BarChart
-                        accessibilityLayer
-                        margin={{
-                           left: 0,
-                           right: 0,
-                           top: 0,
-                           bottom: 0,
-                        }}
-                        data={[
-                           {
-                              date: '2024-01-01',
-                              steps: 2000,
-                           },
-                           {
-                              date: '2024-01-02',
-                              steps: 2100,
-                           },
-                           {
-                              date: '2024-01-03',
-                              steps: 2200,
-                           },
-                           {
-                              date: '2024-01-04',
-                              steps: 1300,
-                           },
-                           {
-                              date: '2024-01-05',
-                              steps: 1400,
-                           },
-                           {
-                              date: '2024-01-06',
-                              steps: 2500,
-                           },
-                           {
-                              date: '2024-01-07',
-                              steps: 1600,
-                           },
-                        ]}
-                     >
-                        <Bar
-                           dataKey="steps"
-                           fill="var(--color-steps)"
-                           radius={2}
-                           fillOpacity={0.2}
-                           activeIndex={6}
-                           activeBar={<Rectangle fillOpacity={0.8} />}
-                        />
-                        <XAxis
-                           dataKey="date"
-                           tickLine={false}
-                           axisLine={false}
-                           tickMargin={4}
-                           hide
-                        />
-                     </BarChart>
-                  </ChartContainer>
-               </CardContent>
-            </Card>
-            <Card
-               x-chunk="A bar chart showing move, exercise, and stand progress."
-               className="max-w-xs"
-            >
-               <CardContent className="flex gap-4 p-4 pb-2">
-                  <ChartContainer
-                     config={{
-                        move: {
-                           label: 'Move',
-                           color: 'hsl(var(--chart-1))',
-                        },
-                        stand: {
-                           label: 'Stand',
-                           color: 'hsl(var(--chart-2))',
-                        },
-                        exercise: {
-                           label: 'Exercise',
-                           color: 'hsl(var(--chart-3))',
-                        },
-                     }}
-                     className="h-[140px] w-full"
-                  >
-                     <BarChart
-                        margin={{
-                           left: 0,
-                           right: 0,
-                           top: 0,
-                           bottom: 10,
-                        }}
-                        data={[
-                           {
-                              activity: 'stand',
-                              value: (8 / 12) * 100,
-                              label: '8/12 hr',
-                              fill: 'var(--color-stand)',
-                           },
-                           {
-                              activity: 'exercise',
-                              value: (46 / 60) * 100,
-                              label: '46/60 min',
-                              fill: 'var(--color-exercise)',
-                           },
-                           {
-                              activity: 'move',
-                              value: (245 / 360) * 100,
-                              label: '245/360 kcal',
-                              fill: 'var(--color-move)',
-                           },
-                        ]}
-                        layout="vertical"
-                        barSize={32}
-                        barGap={2}
-                     >
-                        <XAxis type="number" dataKey="value" hide />
-                        <YAxis
-                           dataKey="activity"
-                           type="category"
-                           tickLine={false}
-                           tickMargin={4}
-                           axisLine={false}
-                           className="capitalize"
-                        />
-                        <Bar dataKey="value" radius={5}>
-                           <LabelList
-                              position="insideLeft"
-                              dataKey="label"
-                              fill="white"
-                              offset={8}
-                              fontSize={12}
-                           />
-                        </Bar>
-                     </BarChart>
-                  </ChartContainer>
-               </CardContent>
-               <CardFooter className="flex flex-row border-t p-4">
-                  <div className="flex w-full items-center gap-2">
-                     <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-xs">Move</div>
-                        <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                           562
-                           <span className="text-muted-foreground text-sm font-normal">
-                              kcal
-                           </span>
-                        </div>
-                     </div>
-                     <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-                     <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-xs">Exercise</div>
-                        <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                           73
-                           <span className="text-muted-foreground text-sm font-normal">
-                              min
-                           </span>
-                        </div>
-                     </div>
-                     <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-                     <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-xs">Stand</div>
-                        <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                           14
-                           <span className="text-muted-foreground text-sm font-normal">
-                              hr
-                           </span>
-                        </div>
-                     </div>
-                  </div>
-               </CardFooter>
-            </Card>
-         </div>
-         <div className="grid w-full flex-1 gap-6">
-            <Card
-               x-chunk="A radial bar chart showing the percentage of time spent moving, exercising, and standing."
-               className="max-w-xs"
-            >
-               <CardContent className="flex gap-4 p-4">
-                  <div className="grid items-center gap-2">
-                     <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-sm">Move</div>
-                        <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                           562/600
-                           <span className="text-muted-foreground text-sm font-normal">
-                              kcal
-                           </span>
-                        </div>
-                     </div>
-                     <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-sm">Exercise</div>
-                        <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                           73/120
-                           <span className="text-muted-foreground text-sm font-normal">
-                              min
-                           </span>
-                        </div>
-                     </div>
-                     <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-sm">Stand</div>
-                        <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                           8/12
-                           <span className="text-muted-foreground text-sm font-normal">
-                              hr
-                           </span>
-                        </div>
-                     </div>
-                  </div>
-                  <ChartContainer
-                     config={{
-                        move: {
-                           label: 'Move',
-                           color: 'hsl(var(--chart-1))',
-                        },
-                        exercise: {
-                           label: 'Exercise',
-                           color: 'hsl(var(--chart-2))',
-                        },
-                        stand: {
-                           label: 'Stand',
-                           color: 'hsl(var(--chart-3))',
-                        },
-                     }}
-                     className="mx-auto aspect-square w-full max-w-[80%]"
-                  >
-                     <RadialBarChart
-                        margin={{
-                           left: -10,
-                           right: -10,
-                           top: -10,
-                           bottom: -10,
-                        }}
-                        data={[
-                           {
-                              activity: 'stand',
-                              value: (8 / 12) * 100,
-                              fill: 'var(--color-stand)',
-                           },
-                           {
-                              activity: 'exercise',
-                              value: (46 / 60) * 100,
-                              fill: 'var(--color-exercise)',
-                           },
-                           {
-                              activity: 'move',
-                              value: (245 / 360) * 100,
-                              fill: 'var(--color-move)',
-                           },
-                        ]}
-                        innerRadius="20%"
-                        barSize={24}
-                        startAngle={90}
-                        endAngle={450}
-                     >
-                        <PolarAngleAxis
-                           type="number"
-                           domain={[0, 100]}
-                           dataKey="value"
-                           tick={false}
-                        />
-                        <RadialBar dataKey="value" background cornerRadius={5} />
-                     </RadialBarChart>
-                  </ChartContainer>
-               </CardContent>
-            </Card>
-            <Card
-               x-chunk="A bar chart showing active energy in the past 7 days."
-               className="max-w-xs"
-            >
-               <CardHeader className="p-4 pb-0">
-                  <CardTitle>Active Energy</CardTitle>
-                  <CardDescription>
-                     You're burning an average of 754 calories per day. Good job!
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
-                  <div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
-                     1,254
-                     <span className="text-muted-foreground text-sm font-normal">
-                        kcal/day
-                     </span>
-                  </div>
-                  <ChartContainer
-                     config={{
-                        calories: {
-                           label: 'Calories',
-                           color: 'hsl(var(--chart-1))',
-                        },
-                     }}
-                     className="ml-auto w-[64px]"
-                  >
-                     <BarChart
-                        accessibilityLayer
-                        margin={{
-                           left: 0,
-                           right: 0,
-                           top: 0,
-                           bottom: 0,
-                        }}
-                        data={[
-                           {
-                              date: '2024-01-01',
-                              calories: 354,
-                           },
-                           {
-                              date: '2024-01-02',
-                              calories: 514,
-                           },
-                           {
-                              date: '2024-01-03',
-                              calories: 345,
-                           },
-                           {
-                              date: '2024-01-04',
-                              calories: 734,
-                           },
-                           {
-                              date: '2024-01-05',
-                              calories: 645,
-                           },
-                           {
-                              date: '2024-01-06',
-                              calories: 456,
-                           },
-                           {
-                              date: '2024-01-07',
-                              calories: 345,
-                           },
-                        ]}
-                     >
-                        <Bar
-                           dataKey="calories"
-                           fill="var(--color-calories)"
-                           radius={2}
-                           fillOpacity={0.2}
-                           activeIndex={6}
-                           activeBar={<Rectangle fillOpacity={0.8} />}
-                        />
-                        <XAxis
-                           dataKey="date"
-                           tickLine={false}
-                           axisLine={false}
-                           tickMargin={4}
-                           hide
-                        />
-                     </BarChart>
-                  </ChartContainer>
-               </CardContent>
-            </Card>
-            <Card
-               x-chunk="An area chart showing the time spent in bed for the past 7 days."
-               className="max-w-xs"
-            >
-               <CardHeader className="space-y-0 pb-0">
-                  <CardDescription>Time in Bed</CardDescription>
-                  <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                     8
-                     <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
-                        hr
-                     </span>
-                     35
-                     <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
-                        min
-                     </span>
-                  </CardTitle>
-               </CardHeader>
-               <CardContent className="p-0">
-                  <ChartContainer
-                     config={{
-                        time: {
-                           label: 'Time',
-                           color: 'hsl(var(--chart-2))',
-                        },
-                     }}
-                  >
-                     <AreaChart
-                        accessibilityLayer
-                        data={[
-                           {
-                              date: '2024-01-01',
-                              time: 8.5,
-                           },
-                           {
-                              date: '2024-01-02',
-                              time: 7.2,
-                           },
-                           {
-                              date: '2024-01-03',
-                              time: 8.1,
-                           },
-                           {
-                              date: '2024-01-04',
-                              time: 6.2,
-                           },
-                           {
-                              date: '2024-01-05',
-                              time: 5.2,
-                           },
-                           {
-                              date: '2024-01-06',
-                              time: 8.1,
-                           },
-                           {
-                              date: '2024-01-07',
-                              time: 7.0,
-                           },
-                        ]}
-                        margin={{
-                           left: 0,
-                           right: 0,
-                           top: 0,
-                           bottom: 0,
-                        }}
-                     >
-                        <XAxis dataKey="date" hide />
-                        <YAxis domain={['dataMin - 5', 'dataMax + 2']} hide />
-                        <defs>
-                           <linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
-                              <stop
-                                 offset="5%"
-                                 stopColor="var(--color-time)"
-                                 stopOpacity={0.8}
-                              />
-                              <stop
-                                 offset="95%"
-                                 stopColor="var(--color-time)"
-                                 stopOpacity={0.1}
-                              />
-                           </linearGradient>
-                        </defs>
-                        <Area
-                           dataKey="time"
-                           type="natural"
-                           fill="url(#fillTime)"
-                           fillOpacity={0.4}
-                           stroke="var(--color-time)"
-                        />
-                        <ChartTooltip
-                           cursor={false}
-                           content={<ChartTooltipContent hideLabel />}
-                           formatter={value => (
-                              <div className="text-muted-foreground flex min-w-[120px] items-center text-xs">
-                                 Time in bed
-                                 <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
-                                    {value}
-                                    <span className="text-muted-foreground font-normal">
-                                       hr
-                                    </span>
-                                 </div>
-                              </div>
-                           )}
-                        />
-                     </AreaChart>
-                  </ChartContainer>
-               </CardContent>
-            </Card>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-01-chunk-0.tsx b/apps/web/registry/default/block/dashboard-01-chunk-0.tsx
deleted file mode 100644
index c3e1b6f0..00000000
--- a/apps/web/registry/default/block/dashboard-01-chunk-0.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { DollarSign } from 'lucide-react'
-
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-01-chunk-0">
-         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
-            <DollarSign className="text-muted-foreground size-4" />
-         </CardHeader>
-         <CardContent>
-            <div className="text-2xl font-bold">$45,231.89</div>
-            <p className="text-muted-foreground text-xs">+20.1% from last month</p>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-01-chunk-1.tsx b/apps/web/registry/default/block/dashboard-01-chunk-1.tsx
deleted file mode 100644
index 34fa4550..00000000
--- a/apps/web/registry/default/block/dashboard-01-chunk-1.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { Users } from 'lucide-react'
-
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-01-chunk-1">
-         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
-            <Users className="text-muted-foreground size-4" />
-         </CardHeader>
-         <CardContent>
-            <div className="text-2xl font-bold">+2350</div>
-            <p className="text-muted-foreground text-xs">+180.1% from last month</p>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-01-chunk-2.tsx b/apps/web/registry/default/block/dashboard-01-chunk-2.tsx
deleted file mode 100644
index 2817f2f5..00000000
--- a/apps/web/registry/default/block/dashboard-01-chunk-2.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { CreditCard } from 'lucide-react'
-
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-01-chunk-2">
-         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Sales</CardTitle>
-            <CreditCard className="text-muted-foreground size-4" />
-         </CardHeader>
-         <CardContent>
-            <div className="text-2xl font-bold">+12,234</div>
-            <p className="text-muted-foreground text-xs">+19% from last month</p>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-01-chunk-3.tsx b/apps/web/registry/default/block/dashboard-01-chunk-3.tsx
deleted file mode 100644
index 1b8264fc..00000000
--- a/apps/web/registry/default/block/dashboard-01-chunk-3.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { Activity } from 'lucide-react'
-
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-01-chunk-3">
-         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Active Now</CardTitle>
-            <Activity className="text-muted-foreground size-4" />
-         </CardHeader>
-         <CardContent>
-            <div className="text-2xl font-bold">+573</div>
-            <p className="text-muted-foreground text-xs">+201 since last hour</p>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-01-chunk-4.tsx b/apps/web/registry/default/block/dashboard-01-chunk-4.tsx
deleted file mode 100644
index ec5779a3..00000000
--- a/apps/web/registry/default/block/dashboard-01-chunk-4.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { ArrowUpRight } from 'lucide-react'
-
-import { Badge } from '~/registry/default/ui/badge'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/default/ui/table'
-
-export default function Component() {
-   return (
-      <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
-         <CardHeader className="flex flex-row items-center">
-            <div className="grid gap-2">
-               <CardTitle>Transactions</CardTitle>
-               <CardDescription>
-                  Recent transactions from your store.
-               </CardDescription>
-            </div>
-            <Button asChild size="sm" className="ml-auto gap-1">
-               <Link href="#">
-                  View All
-                  <ArrowUpRight className="size-4" />
-               </Link>
-            </Button>
-         </CardHeader>
-         <CardContent>
-            <Table>
-               <TableHeader>
-                  <TableRow>
-                     <TableHead>Customer</TableHead>
-                     <TableHead className="hidden xl:table-column">Type</TableHead>
-                     <TableHead className="hidden xl:table-column">Status</TableHead>
-                     <TableHead className="hidden xl:table-column">Date</TableHead>
-                     <TableHead className="text-right">Amount</TableHead>
-                  </TableRow>
-               </TableHeader>
-               <TableBody>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Liam Johnson</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           liam@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden xl:table-column">Sale</TableCell>
-                     <TableCell className="hidden xl:table-column">
-                        <Badge className="text-xs" variant="outline">
-                           Approved
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                        2023-06-23
-                     </TableCell>
-                     <TableCell className="text-right">$250.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Olivia Smith</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           olivia@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden xl:table-column">Refund</TableCell>
-                     <TableCell className="hidden xl:table-column">
-                        <Badge className="text-xs" variant="outline">
-                           Declined
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                        2023-06-24
-                     </TableCell>
-                     <TableCell className="text-right">$150.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Noah Williams</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           noah@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden xl:table-column">
-                        Subscription
-                     </TableCell>
-                     <TableCell className="hidden xl:table-column">
-                        <Badge className="text-xs" variant="outline">
-                           Approved
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                        2023-06-25
-                     </TableCell>
-                     <TableCell className="text-right">$350.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Emma Brown</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           emma@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden xl:table-column">Sale</TableCell>
-                     <TableCell className="hidden xl:table-column">
-                        <Badge className="text-xs" variant="outline">
-                           Approved
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                        2023-06-26
-                     </TableCell>
-                     <TableCell className="text-right">$450.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Liam Johnson</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           liam@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden xl:table-column">Sale</TableCell>
-                     <TableCell className="hidden xl:table-column">
-                        <Badge className="text-xs" variant="outline">
-                           Approved
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                        2023-06-27
-                     </TableCell>
-                     <TableCell className="text-right">$550.00</TableCell>
-                  </TableRow>
-               </TableBody>
-            </Table>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-01-chunk-5.tsx b/apps/web/registry/default/block/dashboard-01-chunk-5.tsx
deleted file mode 100644
index d7c72762..00000000
--- a/apps/web/registry/default/block/dashboard-01-chunk-5.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-01-chunk-5">
-         <CardHeader>
-            <CardTitle>Recent Sales</CardTitle>
-         </CardHeader>
-         <CardContent className="grid gap-8">
-            <div className="flex items-center gap-4">
-               <Avatar className="hidden size-9 sm:flex">
-                  <AvatarImage src="/avatars/01.png" alt="Avatar" />
-                  <AvatarFallback>OM</AvatarFallback>
-               </Avatar>
-               <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">Olivia Martin</p>
-                  <p className="text-muted-foreground text-sm">
-                     olivia.martin@email.com
-                  </p>
-               </div>
-               <div className="ml-auto font-medium">+$1,999.00</div>
-            </div>
-            <div className="flex items-center gap-4">
-               <Avatar className="hidden size-9 sm:flex">
-                  <AvatarImage src="/avatars/02.png" alt="Avatar" />
-                  <AvatarFallback>JL</AvatarFallback>
-               </Avatar>
-               <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">Jackson Lee</p>
-                  <p className="text-muted-foreground text-sm">
-                     jackson.lee@email.com
-                  </p>
-               </div>
-               <div className="ml-auto font-medium">+$39.00</div>
-            </div>
-            <div className="flex items-center gap-4">
-               <Avatar className="hidden size-9 sm:flex">
-                  <AvatarImage src="/avatars/03.png" alt="Avatar" />
-                  <AvatarFallback>IN</AvatarFallback>
-               </Avatar>
-               <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">Isabella Nguyen</p>
-                  <p className="text-muted-foreground text-sm">
-                     isabella.nguyen@email.com
-                  </p>
-               </div>
-               <div className="ml-auto font-medium">+$299.00</div>
-            </div>
-            <div className="flex items-center gap-4">
-               <Avatar className="hidden size-9 sm:flex">
-                  <AvatarImage src="/avatars/04.png" alt="Avatar" />
-                  <AvatarFallback>WK</AvatarFallback>
-               </Avatar>
-               <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">William Kim</p>
-                  <p className="text-muted-foreground text-sm">will@email.com</p>
-               </div>
-               <div className="ml-auto font-medium">+$99.00</div>
-            </div>
-            <div className="flex items-center gap-4">
-               <Avatar className="hidden size-9 sm:flex">
-                  <AvatarImage src="/avatars/05.png" alt="Avatar" />
-                  <AvatarFallback>SD</AvatarFallback>
-               </Avatar>
-               <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">Sofia Davis</p>
-                  <p className="text-muted-foreground text-sm">
-                     sofia.davis@email.com
-                  </p>
-               </div>
-               <div className="ml-auto font-medium">+$39.00</div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-01.tsx b/apps/web/registry/default/block/dashboard-01.tsx
deleted file mode 100644
index c7553efb..00000000
--- a/apps/web/registry/default/block/dashboard-01.tsx
+++ /dev/null
@@ -1,458 +0,0 @@
-import Link from 'next/link'
-import {
-   Activity,
-   ArrowUpRight,
-   CircleUser,
-   CreditCard,
-   DollarSign,
-   Menu,
-   Package2,
-   Search,
-   Users,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import { Badge } from '~/registry/default/ui/badge'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/default/ui/sheet'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/default/ui/table'
-
-export const description
-  = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image.'
-
-export const iframeHeight = '825px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="flex min-h-screen w-full flex-col">
-         <header className="bg-background sticky top-0 flex h-16 items-center gap-4 border-b px-4 md:px-6">
-            <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-               <Link
-                  href="#"
-                  className="flex items-center gap-2 text-lg font-semibold md:text-base"
-               >
-                  <Package2 className="size-6" />
-                  <span className="sr-only">Acme Inc</span>
-               </Link>
-               <Link
-                  href="#"
-                  className="text-foreground hover:text-foreground transition-colors"
-               >
-                  Dashboard
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Orders
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Products
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Customers
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Analytics
-               </Link>
-            </nav>
-            <Sheet>
-               <SheetTrigger asChild>
-                  <Button
-                     variant="outline"
-                     size="icon"
-                     className="shrink-0 md:hidden"
-                  >
-                     <Menu className="size-5" />
-                     <span className="sr-only">Toggle navigation menu</span>
-                  </Button>
-               </SheetTrigger>
-               <SheetContent side="left">
-                  <nav className="grid gap-6 text-lg font-medium">
-                     <Link
-                        href="#"
-                        className="flex items-center gap-2 text-lg font-semibold"
-                     >
-                        <Package2 className="size-6" />
-                        <span className="sr-only">Acme Inc</span>
-                     </Link>
-                     <Link href="#" className="hover:text-foreground">
-                        Dashboard
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Orders
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Products
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Customers
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Analytics
-                     </Link>
-                  </nav>
-               </SheetContent>
-            </Sheet>
-            <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
-               <form className="ml-auto flex-1 sm:flex-initial">
-                  <div className="relative">
-                     <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-                     <Input
-                        type="search"
-                        placeholder="Search products..."
-                        className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
-                     />
-                  </div>
-               </form>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button variant="secondary" size="icon" className="rounded-full">
-                        <CircleUser className="size-5" />
-                        <span className="sr-only">Toggle user menu</span>
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Settings</DropdownMenuItem>
-                     <DropdownMenuItem>Support</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Logout</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </div>
-         </header>
-         <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
-            <div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-               <Card x-chunk="A card showing the total revenue in USD and the percentage difference from last month.">
-                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                     <CardTitle className="text-sm font-medium">
-                        Total Revenue
-                     </CardTitle>
-                     <DollarSign className="text-muted-foreground size-4" />
-                  </CardHeader>
-                  <CardContent>
-                     <div className="text-2xl font-bold">$45,231.89</div>
-                     <p className="text-muted-foreground text-xs">
-                        +20.1% from last month
-                     </p>
-                  </CardContent>
-               </Card>
-               <Card x-chunk="A card showing the total subscriptions and the percentage difference from last month.">
-                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                     <CardTitle className="text-sm font-medium">
-                        Subscriptions
-                     </CardTitle>
-                     <Users className="text-muted-foreground size-4" />
-                  </CardHeader>
-                  <CardContent>
-                     <div className="text-2xl font-bold">+2350</div>
-                     <p className="text-muted-foreground text-xs">
-                        +180.1% from last month
-                     </p>
-                  </CardContent>
-               </Card>
-               <Card x-chunk="A card showing the total sales and the percentage difference from last month.">
-                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                     <CardTitle className="text-sm font-medium">Sales</CardTitle>
-                     <CreditCard className="text-muted-foreground size-4" />
-                  </CardHeader>
-                  <CardContent>
-                     <div className="text-2xl font-bold">+12,234</div>
-                     <p className="text-muted-foreground text-xs">
-                        +19% from last month
-                     </p>
-                  </CardContent>
-               </Card>
-               <Card x-chunk="A card showing the total active users and the percentage difference from last hour.">
-                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                     <CardTitle className="text-sm font-medium">Active Now</CardTitle>
-                     <Activity className="text-muted-foreground size-4" />
-                  </CardHeader>
-                  <CardContent>
-                     <div className="text-2xl font-bold">+573</div>
-                     <p className="text-muted-foreground text-xs">
-                        +201 since last hour
-                     </p>
-                  </CardContent>
-               </Card>
-            </div>
-            <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-               <Card
-                  className="xl:col-span-2"
-                  x-chunk="A card showing a table of recent transactions with a link to view all transactions."
-               >
-                  <CardHeader className="flex flex-row items-center">
-                     <div className="grid gap-2">
-                        <CardTitle>Transactions</CardTitle>
-                        <CardDescription>
-                           Recent transactions from your store.
-                        </CardDescription>
-                     </div>
-                     <Button asChild size="sm" className="ml-auto gap-1">
-                        <Link href="#">
-                           View All
-                           <ArrowUpRight className="size-4" />
-                        </Link>
-                     </Button>
-                  </CardHeader>
-                  <CardContent>
-                     <Table>
-                        <TableHeader>
-                           <TableRow>
-                              <TableHead>Customer</TableHead>
-                              <TableHead className="hidden xl:table-column">
-                                 Type
-                              </TableHead>
-                              <TableHead className="hidden xl:table-column">
-                                 Status
-                              </TableHead>
-                              <TableHead className="hidden xl:table-column">
-                                 Date
-                              </TableHead>
-                              <TableHead className="text-right">Amount</TableHead>
-                           </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                           <TableRow>
-                              <TableCell>
-                                 <div className="font-medium">Liam Johnson</div>
-                                 <div className="text-muted-foreground hidden text-sm md:inline">
-                                    liam@example.com
-                                 </div>
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 Sale
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 <Badge className="text-xs" variant="outline">
-                                    Approved
-                                 </Badge>
-                              </TableCell>
-                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                                 2023-06-23
-                              </TableCell>
-                              <TableCell className="text-right">$250.00</TableCell>
-                           </TableRow>
-                           <TableRow>
-                              <TableCell>
-                                 <div className="font-medium">Olivia Smith</div>
-                                 <div className="text-muted-foreground hidden text-sm md:inline">
-                                    olivia@example.com
-                                 </div>
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 Refund
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 <Badge className="text-xs" variant="outline">
-                                    Declined
-                                 </Badge>
-                              </TableCell>
-                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                                 2023-06-24
-                              </TableCell>
-                              <TableCell className="text-right">$150.00</TableCell>
-                           </TableRow>
-                           <TableRow>
-                              <TableCell>
-                                 <div className="font-medium">Noah Williams</div>
-                                 <div className="text-muted-foreground hidden text-sm md:inline">
-                                    noah@example.com
-                                 </div>
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 Subscription
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 <Badge className="text-xs" variant="outline">
-                                    Approved
-                                 </Badge>
-                              </TableCell>
-                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                                 2023-06-25
-                              </TableCell>
-                              <TableCell className="text-right">$350.00</TableCell>
-                           </TableRow>
-                           <TableRow>
-                              <TableCell>
-                                 <div className="font-medium">Emma Brown</div>
-                                 <div className="text-muted-foreground hidden text-sm md:inline">
-                                    emma@example.com
-                                 </div>
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 Sale
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 <Badge className="text-xs" variant="outline">
-                                    Approved
-                                 </Badge>
-                              </TableCell>
-                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                                 2023-06-26
-                              </TableCell>
-                              <TableCell className="text-right">$450.00</TableCell>
-                           </TableRow>
-                           <TableRow>
-                              <TableCell>
-                                 <div className="font-medium">Liam Johnson</div>
-                                 <div className="text-muted-foreground hidden text-sm md:inline">
-                                    liam@example.com
-                                 </div>
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 Sale
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 <Badge className="text-xs" variant="outline">
-                                    Approved
-                                 </Badge>
-                              </TableCell>
-                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                                 2023-06-27
-                              </TableCell>
-                              <TableCell className="text-right">$550.00</TableCell>
-                           </TableRow>
-                        </TableBody>
-                     </Table>
-                  </CardContent>
-               </Card>
-               <Card x-chunk="A card showing a list of recent sales with customer names and email addresses.">
-                  <CardHeader>
-                     <CardTitle>Recent Sales</CardTitle>
-                  </CardHeader>
-                  <CardContent className="grid gap-8">
-                     <div className="flex items-center gap-4">
-                        <Avatar className="hidden size-9 sm:flex">
-                           <AvatarImage src="/avatars/01.png" alt="Avatar" />
-                           <AvatarFallback>OM</AvatarFallback>
-                        </Avatar>
-                        <div className="grid gap-1">
-                           <p className="text-sm font-medium leading-none">
-                              Olivia Martin
-                           </p>
-                           <p className="text-muted-foreground text-sm">
-                              olivia.martin@email.com
-                           </p>
-                        </div>
-                        <div className="ml-auto font-medium">+$1,999.00</div>
-                     </div>
-                     <div className="flex items-center gap-4">
-                        <Avatar className="hidden size-9 sm:flex">
-                           <AvatarImage src="/avatars/02.png" alt="Avatar" />
-                           <AvatarFallback>JL</AvatarFallback>
-                        </Avatar>
-                        <div className="grid gap-1">
-                           <p className="text-sm font-medium leading-none">
-                              Jackson Lee
-                           </p>
-                           <p className="text-muted-foreground text-sm">
-                              jackson.lee@email.com
-                           </p>
-                        </div>
-                        <div className="ml-auto font-medium">+$39.00</div>
-                     </div>
-                     <div className="flex items-center gap-4">
-                        <Avatar className="hidden size-9 sm:flex">
-                           <AvatarImage src="/avatars/03.png" alt="Avatar" />
-                           <AvatarFallback>IN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid gap-1">
-                           <p className="text-sm font-medium leading-none">
-                              Isabella Nguyen
-                           </p>
-                           <p className="text-muted-foreground text-sm">
-                              isabella.nguyen@email.com
-                           </p>
-                        </div>
-                        <div className="ml-auto font-medium">+$299.00</div>
-                     </div>
-                     <div className="flex items-center gap-4">
-                        <Avatar className="hidden size-9 sm:flex">
-                           <AvatarImage src="/avatars/04.png" alt="Avatar" />
-                           <AvatarFallback>WK</AvatarFallback>
-                        </Avatar>
-                        <div className="grid gap-1">
-                           <p className="text-sm font-medium leading-none">
-                              William Kim
-                           </p>
-                           <p className="text-muted-foreground text-sm">
-                              will@email.com
-                           </p>
-                        </div>
-                        <div className="ml-auto font-medium">+$99.00</div>
-                     </div>
-                     <div className="flex items-center gap-4">
-                        <Avatar className="hidden size-9 sm:flex">
-                           <AvatarImage src="/avatars/05.png" alt="Avatar" />
-                           <AvatarFallback>SD</AvatarFallback>
-                        </Avatar>
-                        <div className="grid gap-1">
-                           <p className="text-sm font-medium leading-none">
-                              Sofia Davis
-                           </p>
-                           <p className="text-muted-foreground text-sm">
-                              sofia.davis@email.com
-                           </p>
-                        </div>
-                        <div className="ml-auto font-medium">+$39.00</div>
-                     </div>
-                  </CardContent>
-               </Card>
-            </div>
-         </main>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-02-chunk-0.tsx b/apps/web/registry/default/block/dashboard-02-chunk-0.tsx
deleted file mode 100644
index ff074971..00000000
--- a/apps/web/registry/default/block/dashboard-02-chunk-0.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-02-chunk-0">
-         <CardHeader className="p-2 pt-0 md:p-4">
-            <CardTitle>Upgrade to Pro</CardTitle>
-            <CardDescription>
-               Unlock all features and get unlimited access to our support team.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
-            <Button size="sm" className="w-full">
-               Upgrade
-            </Button>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-02-chunk-1.tsx b/apps/web/registry/default/block/dashboard-02-chunk-1.tsx
deleted file mode 100644
index 668dda30..00000000
--- a/apps/web/registry/default/block/dashboard-02-chunk-1.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-
-export default function Component() {
-   return (
-      <div
-         className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-         x-chunk="dashboard-02-chunk-1"
-      >
-         <div className="flex flex-col items-center gap-1 text-center">
-            <h3 className="text-2xl font-bold tracking-tight">
-               You have no products
-            </h3>
-            <p className="text-muted-foreground text-sm">
-               You can start selling as soon as you add a product.
-            </p>
-            <Button className="mt-4">Add Product</Button>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-02.tsx b/apps/web/registry/default/block/dashboard-02.tsx
deleted file mode 100644
index c3475448..00000000
--- a/apps/web/registry/default/block/dashboard-02.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-import Link from 'next/link'
-import {
-   Bell,
-   CircleUser,
-   Home,
-   LineChart,
-   Menu,
-   Package,
-   Package2,
-   Search,
-   ShoppingCart,
-   Users,
-} from 'lucide-react'
-
-import { Badge } from '~/registry/default/ui/badge'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/default/ui/sheet'
-
-export const description
-  = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'
-
-export const iframeHeight = '800px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-         <div className="bg-muted/40 hidden border-r md:block">
-            <div className="flex h-full max-h-screen flex-col gap-2">
-               <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
-                  <Link href="/" className="flex items-center gap-2 font-semibold">
-                     <Package2 className="size-6" />
-                     <span className="">Acme Inc</span>
-                  </Link>
-                  <Button variant="outline" size="icon" className="ml-auto size-8">
-                     <Bell className="size-4" />
-                     <span className="sr-only">Toggle notifications</span>
-                  </Button>
-               </div>
-               <div className="flex-1">
-                  <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
-                     >
-                        <Home className="size-4" />
-                        Dashboard
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
-                     >
-                        <ShoppingCart className="size-4" />
-                        Orders
-                        <Badge className="ml-auto flex size-6 shrink-0 items-center justify-center rounded-full">
-                           6
-                        </Badge>
-                     </Link>
-                     <Link
-                        href="#"
-                        className="bg-muted text-primary hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
-                     >
-                        <Package className="size-4" />
-                        Products
-                        {' '}
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
-                     >
-                        <Users className="size-4" />
-                        Customers
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
-                     >
-                        <LineChart className="size-4" />
-                        Analytics
-                     </Link>
-                  </nav>
-               </div>
-               <div className="mt-auto p-4">
-                  <Card x-chunk="A card with a call to action">
-                     <CardHeader className="p-2 pt-0 md:p-4">
-                        <CardTitle>Upgrade to Pro</CardTitle>
-                        <CardDescription>
-                           Unlock all features and get unlimited access to our support
-                           team.
-                        </CardDescription>
-                     </CardHeader>
-                     <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
-                        <Button size="sm" className="w-full">
-                           Upgrade
-                        </Button>
-                     </CardContent>
-                  </Card>
-               </div>
-            </div>
-         </div>
-         <div className="flex flex-col">
-            <header className="bg-muted/40 flex h-14 items-center gap-4 border-b px-4 lg:h-[60px] lg:px-6">
-               <Sheet>
-                  <SheetTrigger asChild>
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="shrink-0 md:hidden"
-                     >
-                        <Menu className="size-5" />
-                        <span className="sr-only">Toggle navigation menu</span>
-                     </Button>
-                  </SheetTrigger>
-                  <SheetContent side="left" className="flex flex-col">
-                     <nav className="grid gap-2 text-lg font-medium">
-                        <Link
-                           href="#"
-                           className="flex items-center gap-2 text-lg font-semibold"
-                        >
-                           <Package2 className="size-6" />
-                           <span className="sr-only">Acme Inc</span>
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
-                        >
-                           <Home className="size-5" />
-                           Dashboard
-                        </Link>
-                        <Link
-                           href="#"
-                           className="bg-muted text-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
-                        >
-                           <ShoppingCart className="size-5" />
-                           Orders
-                           <Badge className="ml-auto flex size-6 shrink-0 items-center justify-center rounded-full">
-                              6
-                           </Badge>
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
-                        >
-                           <Package className="size-5" />
-                           Products
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
-                        >
-                           <Users className="size-5" />
-                           Customers
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
-                        >
-                           <LineChart className="size-5" />
-                           Analytics
-                        </Link>
-                     </nav>
-                     <div className="mt-auto">
-                        <Card>
-                           <CardHeader>
-                              <CardTitle>Upgrade to Pro</CardTitle>
-                              <CardDescription>
-                                 Unlock all features and get unlimited access to our
-                                 support team.
-                              </CardDescription>
-                           </CardHeader>
-                           <CardContent>
-                              <Button size="sm" className="w-full">
-                                 Upgrade
-                              </Button>
-                           </CardContent>
-                        </Card>
-                     </div>
-                  </SheetContent>
-               </Sheet>
-               <div className="w-full flex-1">
-                  <form>
-                     <div className="relative">
-                        <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-                        <Input
-                           type="search"
-                           placeholder="Search products..."
-                           className="bg-background w-full appearance-none pl-8 shadow-none md:w-2/3 lg:w-1/3"
-                        />
-                     </div>
-                  </form>
-               </div>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button variant="secondary" size="icon" className="rounded-full">
-                        <CircleUser className="size-5" />
-                        <span className="sr-only">Toggle user menu</span>
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Settings</DropdownMenuItem>
-                     <DropdownMenuItem>Support</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Logout</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </header>
-            <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
-               <div className="flex items-center">
-                  <h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
-               </div>
-               <div
-                  x-chunk="An empty state showing no products with a heading, description and a call to action to add a product."
-                  className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-               >
-                  <div className="flex flex-col items-center gap-1 text-center">
-                     <h3 className="text-2xl font-bold tracking-tight">
-                        You have no products
-                     </h3>
-                     <p className="text-muted-foreground text-sm">
-                        You can start selling as soon as you add a product.
-                     </p>
-                     <Button className="mt-4">Add Product</Button>
-                  </div>
-               </div>
-            </main>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-03-chunk-0.tsx b/apps/web/registry/default/block/dashboard-03-chunk-0.tsx
deleted file mode 100644
index 61d1456c..00000000
--- a/apps/web/registry/default/block/dashboard-03-chunk-0.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-'use client'
-
-import { Bird, Rabbit, Turtle } from 'lucide-react'
-
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-import { Textarea } from '~/registry/default/ui/textarea'
-
-export default function Component() {
-   return (
-      <div
-         className="relative hidden flex-col items-start gap-8 md:flex"
-         x-chunk="dashboard-03-chunk-0"
-      >
-         <form className="grid w-full items-start gap-6">
-            <fieldset className="grid gap-6 rounded-lg border p-4">
-               <legend className="-ml-1 px-1 text-sm font-medium">Settings</legend>
-               <div className="grid gap-3">
-                  <Label htmlFor="model">Model</Label>
-                  <Select>
-                     <SelectTrigger
-                        id="model"
-                        className="items-start [&_[data-description]]:hidden"
-                     >
-                        <SelectValue placeholder="Select a model" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="genesis">
-                           <div className="text-muted-foreground flex items-start gap-3">
-                              <Rabbit className="size-5" />
-                              <div className="grid gap-0.5">
-                                 <p>
-                                    Neural
-                                    {' '}
-                                    <span className="text-foreground font-medium">
-                                       Genesis
-                                    </span>
-                                 </p>
-                                 <p className="text-xs" data-description>
-                                    Our fastest model for general use cases.
-                                 </p>
-                              </div>
-                           </div>
-                        </SelectItem>
-                        <SelectItem value="explorer">
-                           <div className="text-muted-foreground flex items-start gap-3">
-                              <Bird className="size-5" />
-                              <div className="grid gap-0.5">
-                                 <p>
-                                    Neural
-                                    {' '}
-                                    <span className="text-foreground font-medium">
-                                       Explorer
-                                    </span>
-                                 </p>
-                                 <p className="text-xs" data-description>
-                                    Performance and speed for efficiency.
-                                 </p>
-                              </div>
-                           </div>
-                        </SelectItem>
-                        <SelectItem value="quantum">
-                           <div className="text-muted-foreground flex items-start gap-3">
-                              <Turtle className="size-5" />
-                              <div className="grid gap-0.5">
-                                 <p>
-                                    Neural
-                                    {' '}
-                                    <span className="text-foreground font-medium">
-                                       Quantum
-                                    </span>
-                                 </p>
-                                 <p className="text-xs" data-description>
-                                    The most powerful model for complex computations.
-                                 </p>
-                              </div>
-                           </div>
-                        </SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-               <div className="grid gap-3">
-                  <Label htmlFor="temperature">Temperature</Label>
-                  <Input id="temperature" type="number" placeholder="0.4" />
-               </div>
-               <div className="grid grid-cols-2 gap-4">
-                  <div className="grid gap-3">
-                     <Label htmlFor="top-p">Top P</Label>
-                     <Input id="top-p" type="number" placeholder="0.7" />
-                  </div>
-                  <div className="grid gap-3">
-                     <Label htmlFor="top-k">Top K</Label>
-                     <Input id="top-k" type="number" placeholder="0.0" />
-                  </div>
-               </div>
-            </fieldset>
-            <fieldset className="grid gap-6 rounded-lg border p-4">
-               <legend className="-ml-1 px-1 text-sm font-medium">Messages</legend>
-               <div className="grid gap-3">
-                  <Label htmlFor="role">Role</Label>
-                  <Select defaultValue="system">
-                     <SelectTrigger>
-                        <SelectValue placeholder="Select a role" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="system">System</SelectItem>
-                        <SelectItem value="user">User</SelectItem>
-                        <SelectItem value="assistant">Assistant</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-               <div className="grid gap-3">
-                  <Label htmlFor="content">Content</Label>
-                  <Textarea
-                     id="content"
-                     placeholder="You are a..."
-                     className="min-h-[9.5rem]"
-                  />
-               </div>
-            </fieldset>
-         </form>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-03-chunk-1.tsx b/apps/web/registry/default/block/dashboard-03-chunk-1.tsx
deleted file mode 100644
index 4e4367a9..00000000
--- a/apps/web/registry/default/block/dashboard-03-chunk-1.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client'
-
-import { CornerDownLeft, Mic, Paperclip } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import { Label } from '~/registry/default/ui/label'
-import { Textarea } from '~/registry/default/ui/textarea'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
-
-export default function Component() {
-   return (
-      <form
-         className="bg-background focus-within:ring-ring relative overflow-hidden rounded-lg border focus-within:ring-1"
-         x-chunk="dashboard-03-chunk-1"
-      >
-         <Label htmlFor="message" className="sr-only">
-            Message
-         </Label>
-         <Textarea
-            id="message"
-            placeholder="Type your message here..."
-            className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
-         />
-         <div className="flex items-center p-3 pt-0">
-            <Tooltip>
-               <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon">
-                     <Paperclip className="size-4" />
-                     <span className="sr-only">Attach file</span>
-                  </Button>
-               </TooltipTrigger>
-               <TooltipContent side="top">Attach File</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-               <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon">
-                     <Mic className="size-4" />
-                     <span className="sr-only">Use Microphone</span>
-                  </Button>
-               </TooltipTrigger>
-               <TooltipContent side="top">Use Microphone</TooltipContent>
-            </Tooltip>
-            <Button type="submit" size="sm" className="ml-auto gap-1.5">
-               Send Message
-               <CornerDownLeft className="size-3.5" />
-            </Button>
-         </div>
-      </form>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-03.tsx b/apps/web/registry/default/block/dashboard-03.tsx
deleted file mode 100644
index 3010e217..00000000
--- a/apps/web/registry/default/block/dashboard-03.tsx
+++ /dev/null
@@ -1,470 +0,0 @@
-import {
-   Bird,
-   Book,
-   Bot,
-   Code2,
-   CornerDownLeft,
-   LifeBuoy,
-   Mic,
-   Paperclip,
-   Rabbit,
-   Settings,
-   Settings2,
-   Share,
-   SquareTerminal,
-   SquareUser,
-   Triangle,
-   Turtle,
-} from 'lucide-react'
-
-import { Badge } from '~/registry/default/ui/badge'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Drawer,
-   DrawerContent,
-   DrawerDescription,
-   DrawerHeader,
-   DrawerTitle,
-   DrawerTrigger,
-} from '~/registry/default/ui/drawer'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-import { Textarea } from '~/registry/default/ui/textarea'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
-
-export const description
-  = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'
-
-export const iframeHeight = '740px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="grid h-screen w-full pl-[56px]">
-         <aside className="inset-y fixed  left-0 z-20 flex h-full flex-col border-r">
-            <div className="border-b p-2">
-               <Button variant="outline" size="icon" aria-label="Home">
-                  <Triangle className="fill-foreground size-5" />
-               </Button>
-            </div>
-            <nav className="grid gap-1 p-2">
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="bg-muted rounded-lg"
-                        aria-label="Playground"
-                     >
-                        <SquareTerminal className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     Playground
-                  </TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="rounded-lg"
-                        aria-label="Models"
-                     >
-                        <Bot className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     Models
-                  </TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="rounded-lg"
-                        aria-label="API"
-                     >
-                        <Code2 className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     API
-                  </TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="rounded-lg"
-                        aria-label="Documentation"
-                     >
-                        <Book className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     Documentation
-                  </TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="rounded-lg"
-                        aria-label="Settings"
-                     >
-                        <Settings2 className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     Settings
-                  </TooltipContent>
-               </Tooltip>
-            </nav>
-            <nav className="mt-auto grid gap-1 p-2">
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="mt-auto rounded-lg"
-                        aria-label="Help"
-                     >
-                        <LifeBuoy className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     Help
-                  </TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="mt-auto rounded-lg"
-                        aria-label="Account"
-                     >
-                        <SquareUser className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     Account
-                  </TooltipContent>
-               </Tooltip>
-            </nav>
-         </aside>
-         <div className="flex flex-col">
-            <header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b px-4">
-               <h1 className="text-xl font-semibold">Playground</h1>
-               <Drawer>
-                  <DrawerTrigger asChild>
-                     <Button variant="ghost" size="icon" className="md:hidden">
-                        <Settings className="size-4" />
-                        <span className="sr-only">Settings</span>
-                     </Button>
-                  </DrawerTrigger>
-                  <DrawerContent className="max-h-[80vh]">
-                     <DrawerHeader>
-                        <DrawerTitle>Configuration</DrawerTitle>
-                        <DrawerDescription>
-                           Configure the settings for the model and messages.
-                        </DrawerDescription>
-                     </DrawerHeader>
-                     <form className="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
-                        <fieldset className="grid gap-6 rounded-lg border p-4">
-                           <legend className="-ml-1 px-1 text-sm font-medium">
-                              Settings
-                           </legend>
-                           <div className="grid gap-3">
-                              <Label htmlFor="model">Model</Label>
-                              <Select>
-                                 <SelectTrigger
-                                    id="model"
-                                    className="items-start [&_[data-description]]:hidden"
-                                 >
-                                    <SelectValue placeholder="Select a model" />
-                                 </SelectTrigger>
-                                 <SelectContent>
-                                    <SelectItem value="genesis">
-                                       <div className="text-muted-foreground flex items-start gap-3">
-                                          <Rabbit className="size-5" />
-                                          <div className="grid gap-0.5">
-                                             <p>
-                                                Neural
-                                                {' '}
-                                                <span className="text-foreground font-medium">
-                                                   Genesis
-                                                </span>
-                                             </p>
-                                             <p className="text-xs" data-description>
-                                                Our fastest model for general use cases.
-                                             </p>
-                                          </div>
-                                       </div>
-                                    </SelectItem>
-                                    <SelectItem value="explorer">
-                                       <div className="text-muted-foreground flex items-start gap-3">
-                                          <Bird className="size-5" />
-                                          <div className="grid gap-0.5">
-                                             <p>
-                                                Neural
-                                                {' '}
-                                                <span className="text-foreground font-medium">
-                                                   Explorer
-                                                </span>
-                                             </p>
-                                             <p className="text-xs" data-description>
-                                                Performance and speed for efficiency.
-                                             </p>
-                                          </div>
-                                       </div>
-                                    </SelectItem>
-                                    <SelectItem value="quantum">
-                                       <div className="text-muted-foreground flex items-start gap-3">
-                                          <Turtle className="size-5" />
-                                          <div className="grid gap-0.5">
-                                             <p>
-                                                Neural
-                                                {' '}
-                                                <span className="text-foreground font-medium">
-                                                   Quantum
-                                                </span>
-                                             </p>
-                                             <p className="text-xs" data-description>
-                                                The most powerful model for complex
-                                                computations.
-                                             </p>
-                                          </div>
-                                       </div>
-                                    </SelectItem>
-                                 </SelectContent>
-                              </Select>
-                           </div>
-                           <div className="grid gap-3">
-                              <Label htmlFor="temperature">Temperature</Label>
-                              <Input id="temperature" type="number" placeholder="0.4" />
-                           </div>
-                           <div className="grid gap-3">
-                              <Label htmlFor="top-p">Top P</Label>
-                              <Input id="top-p" type="number" placeholder="0.7" />
-                           </div>
-                           <div className="grid gap-3">
-                              <Label htmlFor="top-k">Top K</Label>
-                              <Input id="top-k" type="number" placeholder="0.0" />
-                           </div>
-                        </fieldset>
-                        <fieldset className="grid gap-6 rounded-lg border p-4">
-                           <legend className="-ml-1 px-1 text-sm font-medium">
-                              Messages
-                           </legend>
-                           <div className="grid gap-3">
-                              <Label htmlFor="role">Role</Label>
-                              <Select defaultValue="system">
-                                 <SelectTrigger>
-                                    <SelectValue placeholder="Select a role" />
-                                 </SelectTrigger>
-                                 <SelectContent>
-                                    <SelectItem value="system">System</SelectItem>
-                                    <SelectItem value="user">User</SelectItem>
-                                    <SelectItem value="assistant">Assistant</SelectItem>
-                                 </SelectContent>
-                              </Select>
-                           </div>
-                           <div className="grid gap-3">
-                              <Label htmlFor="content">Content</Label>
-                              <Textarea id="content" placeholder="You are a..." />
-                           </div>
-                        </fieldset>
-                     </form>
-                  </DrawerContent>
-               </Drawer>
-               <Button
-                  variant="outline"
-                  size="sm"
-                  className="ml-auto gap-1.5 text-sm"
-               >
-                  <Share className="size-3.5" />
-                  Share
-               </Button>
-            </header>
-            <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
-               <div
-                  className="relative hidden flex-col items-start gap-8 md:flex"
-                  x-chunk="A settings form a configuring an AI model and messages."
-               >
-                  <form className="grid w-full items-start gap-6">
-                     <fieldset className="grid gap-6 rounded-lg border p-4">
-                        <legend className="-ml-1 px-1 text-sm font-medium">
-                           Settings
-                        </legend>
-                        <div className="grid gap-3">
-                           <Label htmlFor="model">Model</Label>
-                           <Select>
-                              <SelectTrigger
-                                 id="model"
-                                 className="items-start [&_[data-description]]:hidden"
-                              >
-                                 <SelectValue placeholder="Select a model" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                 <SelectItem value="genesis">
-                                    <div className="text-muted-foreground flex items-start gap-3">
-                                       <Rabbit className="size-5" />
-                                       <div className="grid gap-0.5">
-                                          <p>
-                                             Neural
-                                             {' '}
-                                             <span className="text-foreground font-medium">
-                                                Genesis
-                                             </span>
-                                          </p>
-                                          <p className="text-xs" data-description>
-                                             Our fastest model for general use cases.
-                                          </p>
-                                       </div>
-                                    </div>
-                                 </SelectItem>
-                                 <SelectItem value="explorer">
-                                    <div className="text-muted-foreground flex items-start gap-3">
-                                       <Bird className="size-5" />
-                                       <div className="grid gap-0.5">
-                                          <p>
-                                             Neural
-                                             {' '}
-                                             <span className="text-foreground font-medium">
-                                                Explorer
-                                             </span>
-                                          </p>
-                                          <p className="text-xs" data-description>
-                                             Performance and speed for efficiency.
-                                          </p>
-                                       </div>
-                                    </div>
-                                 </SelectItem>
-                                 <SelectItem value="quantum">
-                                    <div className="text-muted-foreground flex items-start gap-3">
-                                       <Turtle className="size-5" />
-                                       <div className="grid gap-0.5">
-                                          <p>
-                                             Neural
-                                             {' '}
-                                             <span className="text-foreground font-medium">
-                                                Quantum
-                                             </span>
-                                          </p>
-                                          <p className="text-xs" data-description>
-                                             The most powerful model for complex computations.
-                                          </p>
-                                       </div>
-                                    </div>
-                                 </SelectItem>
-                              </SelectContent>
-                           </Select>
-                        </div>
-                        <div className="grid gap-3">
-                           <Label htmlFor="temperature">Temperature</Label>
-                           <Input id="temperature" type="number" placeholder="0.4" />
-                        </div>
-                        <div className="grid grid-cols-2 gap-4">
-                           <div className="grid gap-3">
-                              <Label htmlFor="top-p">Top P</Label>
-                              <Input id="top-p" type="number" placeholder="0.7" />
-                           </div>
-                           <div className="grid gap-3">
-                              <Label htmlFor="top-k">Top K</Label>
-                              <Input id="top-k" type="number" placeholder="0.0" />
-                           </div>
-                        </div>
-                     </fieldset>
-                     <fieldset className="grid gap-6 rounded-lg border p-4">
-                        <legend className="-ml-1 px-1 text-sm font-medium">
-                           Messages
-                        </legend>
-                        <div className="grid gap-3">
-                           <Label htmlFor="role">Role</Label>
-                           <Select defaultValue="system">
-                              <SelectTrigger>
-                                 <SelectValue placeholder="Select a role" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                 <SelectItem value="system">System</SelectItem>
-                                 <SelectItem value="user">User</SelectItem>
-                                 <SelectItem value="assistant">Assistant</SelectItem>
-                              </SelectContent>
-                           </Select>
-                        </div>
-                        <div className="grid gap-3">
-                           <Label htmlFor="content">Content</Label>
-                           <Textarea
-                              id="content"
-                              placeholder="You are a..."
-                              className="min-h-[9.5rem]"
-                           />
-                        </div>
-                     </fieldset>
-                  </form>
-               </div>
-               <div className="bg-muted/50 relative flex h-full min-h-[50vh] flex-col rounded-xl p-4 lg:col-span-2">
-                  <Badge variant="outline" className="absolute right-3 top-3">
-                     Output
-                  </Badge>
-                  <div className="flex-1" />
-                  <form
-                     className="bg-background focus-within:ring-ring relative overflow-hidden rounded-lg border focus-within:ring-1"
-                     x-chunk="A form for sending a message to an AI chatbot. The form has a textarea and buttons to upload files and record audio."
-                  >
-                     <Label htmlFor="message" className="sr-only">
-                        Message
-                     </Label>
-                     <Textarea
-                        id="message"
-                        placeholder="Type your message here..."
-                        className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
-                     />
-                     <div className="flex items-center p-3 pt-0">
-                        <Tooltip>
-                           <TooltipTrigger asChild>
-                              <Button variant="ghost" size="icon">
-                                 <Paperclip className="size-4" />
-                                 <span className="sr-only">Attach file</span>
-                              </Button>
-                           </TooltipTrigger>
-                           <TooltipContent side="top">Attach File</TooltipContent>
-                        </Tooltip>
-                        <Tooltip>
-                           <TooltipTrigger asChild>
-                              <Button variant="ghost" size="icon">
-                                 <Mic className="size-4" />
-                                 <span className="sr-only">Use Microphone</span>
-                              </Button>
-                           </TooltipTrigger>
-                           <TooltipContent side="top">Use Microphone</TooltipContent>
-                        </Tooltip>
-                        <Button type="submit" size="sm" className="ml-auto gap-1.5">
-                           Send Message
-                           <CornerDownLeft className="size-3.5" />
-                        </Button>
-                     </div>
-                  </form>
-               </div>
-            </main>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-04-chunk-0.tsx b/apps/web/registry/default/block/dashboard-04-chunk-0.tsx
deleted file mode 100644
index 3ca1c210..00000000
--- a/apps/web/registry/default/block/dashboard-04-chunk-0.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-
-export default function Component() {
-   return (
-      <nav
-         className="text-muted-foreground grid gap-4 text-sm"
-         x-chunk="dashboard-04-chunk-0"
-      >
-         <Link href="#" className="text-primary font-semibold">
-            General
-         </Link>
-         <Link href="#">Security</Link>
-         <Link href="#">Integrations</Link>
-         <Link href="#">Support</Link>
-         <Link href="#">Organizations</Link>
-         <Link href="#">Advanced</Link>
-      </nav>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-04-chunk-1.tsx b/apps/web/registry/default/block/dashboard-04-chunk-1.tsx
deleted file mode 100644
index 5aa171a2..00000000
--- a/apps/web/registry/default/block/dashboard-04-chunk-1.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-04-chunk-1">
-         <CardHeader>
-            <CardTitle>Store Name</CardTitle>
-            <CardDescription>
-               Used to identify your store in the marketplace.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <form>
-               <Input placeholder="Store Name" />
-            </form>
-         </CardContent>
-         <CardFooter className="border-t px-6 py-4">
-            <Button>Save</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-04-chunk-2.tsx b/apps/web/registry/default/block/dashboard-04-chunk-2.tsx
deleted file mode 100644
index 8cdbc5f6..00000000
--- a/apps/web/registry/default/block/dashboard-04-chunk-2.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Checkbox } from '~/registry/default/ui/checkbox'
-import { Input } from '~/registry/default/ui/input'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-04-chunk-2">
-         <CardHeader>
-            <CardTitle>Plugins Directory</CardTitle>
-            <CardDescription>
-               The directory within your project, in which your plugins are located.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <form className="flex flex-col gap-4">
-               <Input placeholder="Project Name" defaultValue="/content/plugins" />
-               <div className="flex items-center space-x-2">
-                  <Checkbox id="include" defaultChecked />
-                  <label
-                     htmlFor="include"
-                     className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  >
-                     Allow administrators to change the directory.
-                  </label>
-               </div>
-            </form>
-         </CardContent>
-         <CardFooter className="border-t px-6 py-4">
-            <Button>Save</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-04.tsx b/apps/web/registry/default/block/dashboard-04.tsx
deleted file mode 100644
index ae623df8..00000000
--- a/apps/web/registry/default/block/dashboard-04.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import Link from 'next/link'
-import { CircleUser, Menu, Package2, Search } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Checkbox } from '~/registry/default/ui/checkbox'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/default/ui/sheet'
-
-export const description
-  = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'
-
-export const iframeHeight = '780px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="flex min-h-screen w-full flex-col">
-         <header className="bg-background sticky top-0 flex h-16 items-center gap-4 border-b px-4 md:px-6">
-            <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-               <Link
-                  href="#"
-                  className="flex items-center gap-2 text-lg font-semibold md:text-base"
-               >
-                  <Package2 className="size-6" />
-                  <span className="sr-only">Acme Inc</span>
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Dashboard
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Orders
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Products
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Customers
-               </Link>
-               <Link
-                  href="#"
-                  className="text-foreground hover:text-foreground transition-colors"
-               >
-                  Settings
-               </Link>
-            </nav>
-            <Sheet>
-               <SheetTrigger asChild>
-                  <Button
-                     variant="outline"
-                     size="icon"
-                     className="shrink-0 md:hidden"
-                  >
-                     <Menu className="size-5" />
-                     <span className="sr-only">Toggle navigation menu</span>
-                  </Button>
-               </SheetTrigger>
-               <SheetContent side="left">
-                  <nav className="grid gap-6 text-lg font-medium">
-                     <Link
-                        href="#"
-                        className="flex items-center gap-2 text-lg font-semibold"
-                     >
-                        <Package2 className="size-6" />
-                        <span className="sr-only">Acme Inc</span>
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Dashboard
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Orders
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Products
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Customers
-                     </Link>
-                     <Link href="#" className="hover:text-foreground">
-                        Settings
-                     </Link>
-                  </nav>
-               </SheetContent>
-            </Sheet>
-            <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
-               <form className="ml-auto flex-1 sm:flex-initial">
-                  <div className="relative">
-                     <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-                     <Input
-                        type="search"
-                        placeholder="Search products..."
-                        className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
-                     />
-                  </div>
-               </form>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button variant="secondary" size="icon" className="rounded-full">
-                        <CircleUser className="size-5" />
-                        <span className="sr-only">Toggle user menu</span>
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Settings</DropdownMenuItem>
-                     <DropdownMenuItem>Support</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Logout</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </div>
-         </header>
-         <main className="bg-muted/40 flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 p-4 md:gap-8 md:p-10">
-            <div className="mx-auto grid w-full max-w-6xl gap-2">
-               <h1 className="text-3xl font-semibold">Settings</h1>
-            </div>
-            <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
-               <nav
-                  className="text-muted-foreground grid gap-4 text-sm"
-                  x-chunk="A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings."
-                  x-chunk-container="chunk-container after:right-0"
-               >
-                  <Link href="#" className="text-primary font-semibold">
-                     General
-                  </Link>
-                  <Link href="#">Security</Link>
-                  <Link href="#">Integrations</Link>
-                  <Link href="#">Support</Link>
-                  <Link href="#">Organizations</Link>
-                  <Link href="#">Advanced</Link>
-               </nav>
-               <div className="grid gap-6">
-                  <Card x-chunk="A form to update the store name.">
-                     <CardHeader>
-                        <CardTitle>Store Name</CardTitle>
-                        <CardDescription>
-                           Used to identify your store in the marketplace.
-                        </CardDescription>
-                     </CardHeader>
-                     <CardContent>
-                        <form>
-                           <Input placeholder="Store Name" />
-                        </form>
-                     </CardContent>
-                     <CardFooter className="border-t px-6 py-4">
-                        <Button>Save</Button>
-                     </CardFooter>
-                  </Card>
-                  <Card x-chunk="A form to update the plugins directory with a checkbox to allow administrators to change the directory.">
-                     <CardHeader>
-                        <CardTitle>Plugins Directory</CardTitle>
-                        <CardDescription>
-                           The directory within your project, in which your plugins are
-                           located.
-                        </CardDescription>
-                     </CardHeader>
-                     <CardContent>
-                        <form className="flex flex-col gap-4">
-                           <Input
-                              placeholder="Project Name"
-                              defaultValue="/content/plugins"
-                           />
-                           <div className="flex items-center space-x-2">
-                              <Checkbox id="include" defaultChecked />
-                              <label
-                                 htmlFor="include"
-                                 className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                              >
-                                 Allow administrators to change the directory.
-                              </label>
-                           </div>
-                        </form>
-                     </CardContent>
-                     <CardFooter className="border-t px-6 py-4">
-                        <Button>Save</Button>
-                     </CardFooter>
-                  </Card>
-               </div>
-            </div>
-         </main>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-05-chunk-0.tsx b/apps/web/registry/default/block/dashboard-05-chunk-0.tsx
deleted file mode 100644
index a32d159d..00000000
--- a/apps/web/registry/default/block/dashboard-05-chunk-0.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-
-export default function Component() {
-   return (
-      <Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
-         <CardHeader className="pb-3">
-            <CardTitle>Your Orders</CardTitle>
-            <CardDescription className="max-w-lg text-balance leading-relaxed">
-               Introducing Our Dynamic Orders Dashboard for Seamless Management and
-               Insightful Analysis.
-            </CardDescription>
-         </CardHeader>
-         <CardFooter>
-            <Button>Create New Order</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-05-chunk-1.tsx b/apps/web/registry/default/block/dashboard-05-chunk-1.tsx
deleted file mode 100644
index 5e1a273e..00000000
--- a/apps/web/registry/default/block/dashboard-05-chunk-1.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Progress } from '~/registry/default/ui/progress'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-05-chunk-1">
-         <CardHeader className="pb-2">
-            <CardDescription>This Week</CardDescription>
-            <CardTitle className="text-4xl">$1,329</CardTitle>
-         </CardHeader>
-         <CardContent>
-            <div className="text-muted-foreground text-xs">+25% from last week</div>
-         </CardContent>
-         <CardFooter>
-            <Progress value={25} aria-label="25% increase" />
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-05-chunk-2.tsx b/apps/web/registry/default/block/dashboard-05-chunk-2.tsx
deleted file mode 100644
index 2cf78407..00000000
--- a/apps/web/registry/default/block/dashboard-05-chunk-2.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Progress } from '~/registry/default/ui/progress'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-05-chunk-2">
-         <CardHeader className="pb-2">
-            <CardDescription>This Month</CardDescription>
-            <CardTitle className="text-4xl">$5,329</CardTitle>
-         </CardHeader>
-         <CardContent>
-            <div className="text-muted-foreground text-xs">
-               +10% from last month
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Progress value={12} aria-label="12% increase" />
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-05-chunk-3.tsx b/apps/web/registry/default/block/dashboard-05-chunk-3.tsx
deleted file mode 100644
index aa525bbb..00000000
--- a/apps/web/registry/default/block/dashboard-05-chunk-3.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-'use client'
-
-import { Badge } from '~/registry/default/ui/badge'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/default/ui/table'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-05-chunk-3">
-         <CardHeader className="px-7">
-            <CardTitle>Orders</CardTitle>
-            <CardDescription>Recent orders from your store.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <Table>
-               <TableHeader>
-                  <TableRow>
-                     <TableHead>Customer</TableHead>
-                     <TableHead className="hidden sm:table-cell">Type</TableHead>
-                     <TableHead className="hidden sm:table-cell">Status</TableHead>
-                     <TableHead className="hidden md:table-cell">Date</TableHead>
-                     <TableHead className="text-right">Amount</TableHead>
-                  </TableRow>
-               </TableHeader>
-               <TableBody>
-                  <TableRow className="bg-accent">
-                     <TableCell>
-                        <div className="font-medium">Liam Johnson</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           liam@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="secondary">
-                           Fulfilled
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-                     <TableCell className="text-right">$250.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Olivia Smith</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           olivia@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Refund</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="outline">
-                           Declined
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-24</TableCell>
-                     <TableCell className="text-right">$150.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Noah Williams</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           noah@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        Subscription
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="secondary">
-                           Fulfilled
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-25</TableCell>
-                     <TableCell className="text-right">$350.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Emma Brown</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           emma@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="secondary">
-                           Fulfilled
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-26</TableCell>
-                     <TableCell className="text-right">$450.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Liam Johnson</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           liam@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="secondary">
-                           Fulfilled
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-                     <TableCell className="text-right">$250.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Liam Johnson</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           liam@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="secondary">
-                           Fulfilled
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-                     <TableCell className="text-right">$250.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Olivia Smith</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           olivia@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Refund</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="outline">
-                           Declined
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-24</TableCell>
-                     <TableCell className="text-right">$150.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Emma Brown</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           emma@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="secondary">
-                           Fulfilled
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-26</TableCell>
-                     <TableCell className="text-right">$450.00</TableCell>
-                  </TableRow>
-               </TableBody>
-            </Table>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-05-chunk-4.tsx b/apps/web/registry/default/block/dashboard-05-chunk-4.tsx
deleted file mode 100644
index e963a7f8..00000000
--- a/apps/web/registry/default/block/dashboard-05-chunk-4.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-'use client'
-
-import {
-   ChevronLeft,
-   ChevronRight,
-   Copy,
-   CreditCard,
-   MoreVertical,
-   Truck,
-} from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   Pagination,
-   PaginationContent,
-   PaginationItem,
-} from '~/registry/default/ui/pagination'
-import { Separator } from '~/registry/default/ui/separator'
-
-export default function Component() {
-   return (
-      <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
-         <CardHeader className="bg-muted/50 flex flex-row items-start">
-            <div className="grid gap-0.5">
-               <CardTitle className="group flex items-center gap-2 text-lg">
-                  Order Oe31b70H
-                  <Button
-                     size="icon"
-                     variant="outline"
-                     className="size-6 opacity-0 transition-opacity group-hover:opacity-100"
-                  >
-                     <Copy className="size-3" />
-                     <span className="sr-only">Copy Order ID</span>
-                  </Button>
-               </CardTitle>
-               <CardDescription>Date: November 23, 2023</CardDescription>
-            </div>
-            <div className="ml-auto flex items-center gap-1">
-               <Button size="sm" variant="outline" className="h-8 gap-1">
-                  <Truck className="size-3.5" />
-                  <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-                     Track Order
-                  </span>
-               </Button>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button size="icon" variant="outline" className="size-8">
-                        <MoreVertical className="size-3.5" />
-                        <span className="sr-only">More</span>
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuItem>Edit</DropdownMenuItem>
-                     <DropdownMenuItem>Export</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Trash</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </div>
-         </CardHeader>
-         <CardContent className="p-6 text-sm">
-            <div className="grid gap-3">
-               <div className="font-semibold">Order Details</div>
-               <ul className="grid gap-3">
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">
-                        Glimmer Lamps x
-                        {' '}
-                        <span>2</span>
-                     </span>
-                     <span>$250.00</span>
-                  </li>
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">
-                        Aqua Filters x
-                        {' '}
-                        <span>1</span>
-                     </span>
-                     <span>$49.00</span>
-                  </li>
-               </ul>
-               <Separator className="my-2" />
-               <ul className="grid gap-3">
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">Subtotal</span>
-                     <span>$299.00</span>
-                  </li>
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">Shipping</span>
-                     <span>$5.00</span>
-                  </li>
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">Tax</span>
-                     <span>$25.00</span>
-                  </li>
-                  <li className="flex items-center justify-between font-semibold">
-                     <span className="text-muted-foreground">Total</span>
-                     <span>$329.00</span>
-                  </li>
-               </ul>
-            </div>
-            <Separator className="my-4" />
-            <div className="grid grid-cols-2 gap-4">
-               <div className="grid gap-3">
-                  <div className="font-semibold">Shipping Information</div>
-                  <address className="text-muted-foreground grid gap-0.5 not-italic">
-                     <span>Liam Johnson</span>
-                     <span>1234 Main St.</span>
-                     <span>Anytown, CA 12345</span>
-                  </address>
-               </div>
-               <div className="grid auto-rows-max gap-3">
-                  <div className="font-semibold">Billing Information</div>
-                  <div className="text-muted-foreground">
-                     Same as shipping address
-                  </div>
-               </div>
-            </div>
-            <Separator className="my-4" />
-            <div className="grid gap-3">
-               <div className="font-semibold">Customer Information</div>
-               <dl className="grid gap-3">
-                  <div className="flex items-center justify-between">
-                     <dt className="text-muted-foreground">Customer</dt>
-                     <dd>Liam Johnson</dd>
-                  </div>
-                  <div className="flex items-center justify-between">
-                     <dt className="text-muted-foreground">Email</dt>
-                     <dd>
-                        <a href="mailto:">liam@acme.com</a>
-                     </dd>
-                  </div>
-                  <div className="flex items-center justify-between">
-                     <dt className="text-muted-foreground">Phone</dt>
-                     <dd>
-                        <a href="tel:">+1 234 567 890</a>
-                     </dd>
-                  </div>
-               </dl>
-            </div>
-            <Separator className="my-4" />
-            <div className="grid gap-3">
-               <div className="font-semibold">Payment Information</div>
-               <dl className="grid gap-3">
-                  <div className="flex items-center justify-between">
-                     <dt className="text-muted-foreground flex items-center gap-1">
-                        <CreditCard className="size-4" />
-                        Visa
-                     </dt>
-                     <dd>**** **** **** 4532</dd>
-                  </div>
-               </dl>
-            </div>
-         </CardContent>
-         <CardFooter className="bg-muted/50 flex flex-row items-center border-t px-6 py-3">
-            <div className="text-muted-foreground text-xs">
-               Updated
-               {' '}
-               <time dateTime="2023-11-23">November 23, 2023</time>
-            </div>
-            <Pagination className="ml-auto mr-0 w-auto">
-               <PaginationContent>
-                  <PaginationItem>
-                     <Button size="icon" variant="outline" className="size-6">
-                        <ChevronLeft className="size-3.5" />
-                        <span className="sr-only">Previous Order</span>
-                     </Button>
-                  </PaginationItem>
-                  <PaginationItem>
-                     <Button size="icon" variant="outline" className="size-6">
-                        <ChevronRight className="size-3.5" />
-                        <span className="sr-only">Next Order</span>
-                     </Button>
-                  </PaginationItem>
-               </PaginationContent>
-            </Pagination>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-05.tsx b/apps/web/registry/default/block/dashboard-05.tsx
deleted file mode 100644
index e8e6ca81..00000000
--- a/apps/web/registry/default/block/dashboard-05.tsx
+++ /dev/null
@@ -1,732 +0,0 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import {
-   ChevronLeft,
-   ChevronRight,
-   Copy,
-   CreditCard,
-   File,
-   Home,
-   LineChart,
-   ListFilter,
-   MoreVertical,
-   Package,
-   Package2,
-   PanelLeft,
-   Search,
-   Settings,
-   ShoppingCart,
-   Truck,
-   Users2,
-} from 'lucide-react'
-
-import { Badge } from '~/registry/default/ui/badge'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuCheckboxItem,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import {
-   Pagination,
-   PaginationContent,
-   PaginationItem,
-} from '~/registry/default/ui/pagination'
-import { Progress } from '~/registry/default/ui/progress'
-import { Separator } from '~/registry/default/ui/separator'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/default/ui/sheet'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/default/ui/table'
-import {
-   Tabs,
-   TabsContent,
-   TabsList,
-   TabsTrigger,
-} from '~/registry/default/ui/tabs'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
-
-export const description
-  = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'
-
-export const iframeHeight = '1112px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="bg-muted/40 flex min-h-screen w-full flex-col">
-         <aside className="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
-            <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
-               <Link
-                  href="#"
-                  className="bg-primary text-primary-foreground group flex size-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:size-8 md:text-base"
-               >
-                  <Package2 className="size-4 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-               </Link>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Home className="size-5" />
-                        <span className="sr-only">Dashboard</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Dashboard</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="bg-accent text-accent-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <ShoppingCart className="size-5" />
-                        <span className="sr-only">Orders</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Orders</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Package className="size-5" />
-                        <span className="sr-only">Products</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Products</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Users2 className="size-5" />
-                        <span className="sr-only">Customers</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Customers</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <LineChart className="size-5" />
-                        <span className="sr-only">Analytics</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Analytics</TooltipContent>
-               </Tooltip>
-            </nav>
-            <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Settings className="size-5" />
-                        <span className="sr-only">Settings</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Settings</TooltipContent>
-               </Tooltip>
-            </nav>
-         </aside>
-         <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-            <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-               <Sheet>
-                  <SheetTrigger asChild>
-                     <Button size="icon" variant="outline" className="sm:hidden">
-                        <PanelLeft className="size-5" />
-                        <span className="sr-only">Toggle Menu</span>
-                     </Button>
-                  </SheetTrigger>
-                  <SheetContent side="left" className="sm:max-w-xs">
-                     <nav className="grid gap-6 text-lg font-medium">
-                        <Link
-                           href="#"
-                           className="bg-primary text-primary-foreground group flex size-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base"
-                        >
-                           <Package2 className="size-5 transition-all group-hover:scale-110" />
-                           <span className="sr-only">Acme Inc</span>
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Home className="size-5" />
-                           Dashboard
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <ShoppingCart className="size-5" />
-                           Orders
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Package className="size-5" />
-                           Products
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Users2 className="size-5" />
-                           Customers
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <LineChart className="size-5" />
-                           Settings
-                        </Link>
-                     </nav>
-                  </SheetContent>
-               </Sheet>
-               <Breadcrumb className="hidden md:flex">
-                  <BreadcrumbList>
-                     <BreadcrumbItem>
-                        <BreadcrumbLink asChild>
-                           <Link href="#">Dashboard</Link>
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator />
-                     <BreadcrumbItem>
-                        <BreadcrumbLink asChild>
-                           <Link href="#">Orders</Link>
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Recent Orders</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-               <div className="relative ml-auto flex-1 md:grow-0">
-                  <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-                  <Input
-                     type="search"
-                     placeholder="Search..."
-                     className="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
-                  />
-               </div>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="overflow-hidden rounded-full"
-                     >
-                        <Image
-                           src="/placeholder-user.jpg"
-                           width={36}
-                           height={36}
-                           alt="Avatar"
-                           className="overflow-hidden rounded-full"
-                        />
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Settings</DropdownMenuItem>
-                     <DropdownMenuItem>Support</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Logout</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </header>
-            <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
-               <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
-                  <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
-                     <Card
-                        className="sm:col-span-2"
-                        x-chunk="A card for an orders dashboard with a description and a button to create a new order."
-                     >
-                        <CardHeader className="pb-3">
-                           <CardTitle>Your Orders</CardTitle>
-                           <CardDescription className="max-w-lg text-balance leading-relaxed">
-                              Introducing Our Dynamic Orders Dashboard for Seamless
-                              Management and Insightful Analysis.
-                           </CardDescription>
-                        </CardHeader>
-                        <CardFooter>
-                           <Button>Create New Order</Button>
-                        </CardFooter>
-                     </Card>
-                     <Card x-chunk="A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.">
-                        <CardHeader className="pb-2">
-                           <CardDescription>This Week</CardDescription>
-                           <CardTitle className="text-4xl">$1,329</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                           <div className="text-muted-foreground text-xs">
-                              +25% from last week
-                           </div>
-                        </CardContent>
-                        <CardFooter>
-                           <Progress value={25} aria-label="25% increase" />
-                        </CardFooter>
-                     </Card>
-                     <Card x-chunk="A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.">
-                        <CardHeader className="pb-2">
-                           <CardDescription>This Month</CardDescription>
-                           <CardTitle className="text-4xl">$5,329</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                           <div className="text-muted-foreground text-xs">
-                              +10% from last month
-                           </div>
-                        </CardContent>
-                        <CardFooter>
-                           <Progress value={12} aria-label="12% increase" />
-                        </CardFooter>
-                     </Card>
-                  </div>
-                  <Tabs defaultValue="week">
-                     <div className="flex items-center">
-                        <TabsList>
-                           <TabsTrigger value="week">Week</TabsTrigger>
-                           <TabsTrigger value="month">Month</TabsTrigger>
-                           <TabsTrigger value="year">Year</TabsTrigger>
-                        </TabsList>
-                        <div className="ml-auto flex items-center gap-2">
-                           <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                 <Button
-                                    variant="outline"
-                                    size="sm"
-                                    className="h-7 gap-1 text-sm"
-                                 >
-                                    <ListFilter className="size-3.5" />
-                                    <span className="sr-only sm:not-sr-only">Filter</span>
-                                 </Button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent align="end">
-                                 <DropdownMenuLabel>Filter by</DropdownMenuLabel>
-                                 <DropdownMenuSeparator />
-                                 <DropdownMenuCheckboxItem checked>
-                                    Fulfilled
-                                 </DropdownMenuCheckboxItem>
-                                 <DropdownMenuCheckboxItem>
-                                    Declined
-                                 </DropdownMenuCheckboxItem>
-                                 <DropdownMenuCheckboxItem>
-                                    Refunded
-                                 </DropdownMenuCheckboxItem>
-                              </DropdownMenuContent>
-                           </DropdownMenu>
-                           <Button
-                              size="sm"
-                              variant="outline"
-                              className="h-7 gap-1 text-sm"
-                           >
-                              <File className="size-3.5" />
-                              <span className="sr-only sm:not-sr-only">Export</span>
-                           </Button>
-                        </div>
-                     </div>
-                     <TabsContent value="week">
-                        <Card x-chunk="A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.">
-                           <CardHeader className="px-7">
-                              <CardTitle>Orders</CardTitle>
-                              <CardDescription>
-                                 Recent orders from your store.
-                              </CardDescription>
-                           </CardHeader>
-                           <CardContent>
-                              <Table>
-                                 <TableHeader>
-                                    <TableRow>
-                                       <TableHead>Customer</TableHead>
-                                       <TableHead className="hidden sm:table-cell">
-                                          Type
-                                       </TableHead>
-                                       <TableHead className="hidden sm:table-cell">
-                                          Status
-                                       </TableHead>
-                                       <TableHead className="hidden md:table-cell">
-                                          Date
-                                       </TableHead>
-                                       <TableHead className="text-right">Amount</TableHead>
-                                    </TableRow>
-                                 </TableHeader>
-                                 <TableBody>
-                                    <TableRow className="bg-accent">
-                                       <TableCell>
-                                          <div className="font-medium">Liam Johnson</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             liam@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Sale
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
-                                             Fulfilled
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-23
-                                       </TableCell>
-                                       <TableCell className="text-right">$250.00</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Olivia Smith</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             olivia@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Refund
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="outline">
-                                             Declined
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-24
-                                       </TableCell>
-                                       <TableCell className="text-right">$150.00</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Noah Williams</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             noah@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Subscription
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
-                                             Fulfilled
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-25
-                                       </TableCell>
-                                       <TableCell className="text-right">$350.00</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Emma Brown</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             emma@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Sale
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
-                                             Fulfilled
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-26
-                                       </TableCell>
-                                       <TableCell className="text-right">$450.00</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Liam Johnson</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             liam@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Sale
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
-                                             Fulfilled
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-23
-                                       </TableCell>
-                                       <TableCell className="text-right">$250.00</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Liam Johnson</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             liam@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Sale
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
-                                             Fulfilled
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-23
-                                       </TableCell>
-                                       <TableCell className="text-right">$250.00</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Olivia Smith</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             olivia@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Refund
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="outline">
-                                             Declined
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-24
-                                       </TableCell>
-                                       <TableCell className="text-right">$150.00</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Emma Brown</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             emma@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Sale
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
-                                             Fulfilled
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-26
-                                       </TableCell>
-                                       <TableCell className="text-right">$450.00</TableCell>
-                                    </TableRow>
-                                 </TableBody>
-                              </Table>
-                           </CardContent>
-                        </Card>
-                     </TabsContent>
-                  </Tabs>
-               </div>
-               <div>
-                  <Card
-                     className="overflow-hidden"
-                     x-chunk="An order details card with order details, shipping information, customer information and payment information."
-                  >
-                     <CardHeader className="bg-muted/50 flex flex-row items-start">
-                        <div className="grid gap-0.5">
-                           <CardTitle className="group flex items-center gap-2 text-lg">
-                              Order Oe31b70H
-                              <Button
-                                 size="icon"
-                                 variant="outline"
-                                 className="size-6 opacity-0 transition-opacity group-hover:opacity-100"
-                              >
-                                 <Copy className="size-3" />
-                                 <span className="sr-only">Copy Order ID</span>
-                              </Button>
-                           </CardTitle>
-                           <CardDescription>Date: November 23, 2023</CardDescription>
-                        </div>
-                        <div className="ml-auto flex items-center gap-1">
-                           <Button size="sm" variant="outline" className="h-8 gap-1">
-                              <Truck className="size-3.5" />
-                              <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-                                 Track Order
-                              </span>
-                           </Button>
-                           <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                 <Button size="icon" variant="outline" className="size-8">
-                                    <MoreVertical className="size-3.5" />
-                                    <span className="sr-only">More</span>
-                                 </Button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent align="end">
-                                 <DropdownMenuItem>Edit</DropdownMenuItem>
-                                 <DropdownMenuItem>Export</DropdownMenuItem>
-                                 <DropdownMenuSeparator />
-                                 <DropdownMenuItem>Trash</DropdownMenuItem>
-                              </DropdownMenuContent>
-                           </DropdownMenu>
-                        </div>
-                     </CardHeader>
-                     <CardContent className="p-6 text-sm">
-                        <div className="grid gap-3">
-                           <div className="font-semibold">Order Details</div>
-                           <ul className="grid gap-3">
-                              <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">
-                                    Glimmer Lamps x
-                                    {' '}
-                                    <span>2</span>
-                                 </span>
-                                 <span>$250.00</span>
-                              </li>
-                              <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">
-                                    Aqua Filters x
-                                    {' '}
-                                    <span>1</span>
-                                 </span>
-                                 <span>$49.00</span>
-                              </li>
-                           </ul>
-                           <Separator className="my-2" />
-                           <ul className="grid gap-3">
-                              <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">Subtotal</span>
-                                 <span>$299.00</span>
-                              </li>
-                              <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">Shipping</span>
-                                 <span>$5.00</span>
-                              </li>
-                              <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">Tax</span>
-                                 <span>$25.00</span>
-                              </li>
-                              <li className="flex items-center justify-between font-semibold">
-                                 <span className="text-muted-foreground">Total</span>
-                                 <span>$329.00</span>
-                              </li>
-                           </ul>
-                        </div>
-                        <Separator className="my-4" />
-                        <div className="grid grid-cols-2 gap-4">
-                           <div className="grid gap-3">
-                              <div className="font-semibold">Shipping Information</div>
-                              <address className="text-muted-foreground grid gap-0.5 not-italic">
-                                 <span>Liam Johnson</span>
-                                 <span>1234 Main St.</span>
-                                 <span>Anytown, CA 12345</span>
-                              </address>
-                           </div>
-                           <div className="grid auto-rows-max gap-3">
-                              <div className="font-semibold">Billing Information</div>
-                              <div className="text-muted-foreground">
-                                 Same as shipping address
-                              </div>
-                           </div>
-                        </div>
-                        <Separator className="my-4" />
-                        <div className="grid gap-3">
-                           <div className="font-semibold">Customer Information</div>
-                           <dl className="grid gap-3">
-                              <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground">Customer</dt>
-                                 <dd>Liam Johnson</dd>
-                              </div>
-                              <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground">Email</dt>
-                                 <dd>
-                                    <a href="mailto:">liam@acme.com</a>
-                                 </dd>
-                              </div>
-                              <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground">Phone</dt>
-                                 <dd>
-                                    <a href="tel:">+1 234 567 890</a>
-                                 </dd>
-                              </div>
-                           </dl>
-                        </div>
-                        <Separator className="my-4" />
-                        <div className="grid gap-3">
-                           <div className="font-semibold">Payment Information</div>
-                           <dl className="grid gap-3">
-                              <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground flex items-center gap-1">
-                                    <CreditCard className="size-4" />
-                                    Visa
-                                 </dt>
-                                 <dd>**** **** **** 4532</dd>
-                              </div>
-                           </dl>
-                        </div>
-                     </CardContent>
-                     <CardFooter className="bg-muted/50 flex flex-row items-center border-t px-6 py-3">
-                        <div className="text-muted-foreground text-xs">
-                           Updated
-                           {' '}
-                           <time dateTime="2023-11-23">November 23, 2023</time>
-                        </div>
-                        <Pagination className="ml-auto mr-0 w-auto">
-                           <PaginationContent>
-                              <PaginationItem>
-                                 <Button size="icon" variant="outline" className="size-6">
-                                    <ChevronLeft className="size-3.5" />
-                                    <span className="sr-only">Previous Order</span>
-                                 </Button>
-                              </PaginationItem>
-                              <PaginationItem>
-                                 <Button size="icon" variant="outline" className="size-6">
-                                    <ChevronRight className="size-3.5" />
-                                    <span className="sr-only">Next Order</span>
-                                 </Button>
-                              </PaginationItem>
-                           </PaginationContent>
-                        </Pagination>
-                     </CardFooter>
-                  </Card>
-               </div>
-            </main>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-06-chunk-0.tsx b/apps/web/registry/default/block/dashboard-06-chunk-0.tsx
deleted file mode 100644
index 2eda0ba8..00000000
--- a/apps/web/registry/default/block/dashboard-06-chunk-0.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-import { MoreHorizontal } from 'lucide-react'
-
-import { Badge } from '~/registry/default/ui/badge'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/default/ui/table'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-06-chunk-0">
-         <CardHeader>
-            <CardTitle>Products</CardTitle>
-            <CardDescription>
-               Manage your products and view their sales performance.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <Table>
-               <TableHeader>
-                  <TableRow>
-                     <TableHead className="hidden w-[100px] sm:table-cell">
-                        <span className="sr-only">Image</span>
-                     </TableHead>
-                     <TableHead>Name</TableHead>
-                     <TableHead>Status</TableHead>
-                     <TableHead className="hidden md:table-cell">Price</TableHead>
-                     <TableHead className="hidden md:table-cell">
-                        Total Sales
-                     </TableHead>
-                     <TableHead className="hidden md:table-cell">Created at</TableHead>
-                     <TableHead>
-                        <span className="sr-only">Actions</span>
-                     </TableHead>
-                  </TableRow>
-               </TableHeader>
-               <TableBody>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">
-                        Laser Lemonade Machine
-                     </TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Draft</Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">$499.99</TableCell>
-                     <TableCell className="hidden md:table-cell">25</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2023-07-12 10:42 AM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">
-                        Hypernova Headphones
-                     </TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Active</Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">$129.99</TableCell>
-                     <TableCell className="hidden md:table-cell">100</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2023-10-18 03:21 PM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">AeroGlow Desk Lamp</TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Active</Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">$39.99</TableCell>
-                     <TableCell className="hidden md:table-cell">50</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2023-11-29 08:15 AM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">
-                        TechTonic Energy Drink
-                     </TableCell>
-                     <TableCell>
-                        <Badge variant="secondary">Draft</Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">$2.99</TableCell>
-                     <TableCell className="hidden md:table-cell">0</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2023-12-25 11:59 PM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">
-                        Gamer Gear Pro Controller
-                     </TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Active</Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">$59.99</TableCell>
-                     <TableCell className="hidden md:table-cell">75</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2024-01-01 12:00 AM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">Luminous VR Headset</TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Active</Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">$199.99</TableCell>
-                     <TableCell className="hidden md:table-cell">30</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2024-02-14 02:14 PM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-               </TableBody>
-            </Table>
-         </CardContent>
-         <CardFooter>
-            <div className="text-muted-foreground text-xs">
-               Showing
-               {' '}
-               <strong>1-10</strong>
-               {' '}
-               of
-               <strong>32</strong>
-               {' '}
-               products
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-06.tsx b/apps/web/registry/default/block/dashboard-06.tsx
deleted file mode 100644
index 8ce28653..00000000
--- a/apps/web/registry/default/block/dashboard-06.tsx
+++ /dev/null
@@ -1,643 +0,0 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import {
-   File,
-   Home,
-   LineChart,
-   ListFilter,
-   MoreHorizontal,
-   Package,
-   Package2,
-   PanelLeft,
-   PlusCircle,
-   Search,
-   Settings,
-   ShoppingCart,
-   Users2,
-} from 'lucide-react'
-
-import { Badge } from '~/registry/default/ui/badge'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuCheckboxItem,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/default/ui/sheet'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/default/ui/table'
-import {
-   Tabs,
-   TabsContent,
-   TabsList,
-   TabsTrigger,
-} from '~/registry/default/ui/tabs'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
-
-export const description
-  = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'
-
-export const iframeHeight = '938px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="bg-muted/40 flex min-h-screen w-full flex-col">
-         <aside className="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
-            <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
-               <Link
-                  href="#"
-                  className="bg-primary text-primary-foreground group flex size-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:size-8 md:text-base"
-               >
-                  <Package2 className="size-4 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-               </Link>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Home className="size-5" />
-                        <span className="sr-only">Dashboard</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Dashboard</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="bg-accent text-accent-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <ShoppingCart className="size-5" />
-                        <span className="sr-only">Orders</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Orders</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Package className="size-5" />
-                        <span className="sr-only">Products</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Products</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Users2 className="size-5" />
-                        <span className="sr-only">Customers</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Customers</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <LineChart className="size-5" />
-                        <span className="sr-only">Analytics</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Analytics</TooltipContent>
-               </Tooltip>
-            </nav>
-            <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Settings className="size-5" />
-                        <span className="sr-only">Settings</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Settings</TooltipContent>
-               </Tooltip>
-            </nav>
-         </aside>
-         <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-            <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-               <Sheet>
-                  <SheetTrigger asChild>
-                     <Button size="icon" variant="outline" className="sm:hidden">
-                        <PanelLeft className="size-5" />
-                        <span className="sr-only">Toggle Menu</span>
-                     </Button>
-                  </SheetTrigger>
-                  <SheetContent side="left" className="sm:max-w-xs">
-                     <nav className="grid gap-6 text-lg font-medium">
-                        <Link
-                           href="#"
-                           className="bg-primary text-primary-foreground group flex size-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base"
-                        >
-                           <Package2 className="size-5 transition-all group-hover:scale-110" />
-                           <span className="sr-only">Acme Inc</span>
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Home className="size-5" />
-                           Dashboard
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <ShoppingCart className="size-5" />
-                           Orders
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Package className="size-5" />
-                           Products
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Users2 className="size-5" />
-                           Customers
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <LineChart className="size-5" />
-                           Settings
-                        </Link>
-                     </nav>
-                  </SheetContent>
-               </Sheet>
-               <Breadcrumb className="hidden md:flex">
-                  <BreadcrumbList>
-                     <BreadcrumbItem>
-                        <BreadcrumbLink asChild>
-                           <Link href="#">Dashboard</Link>
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator />
-                     <BreadcrumbItem>
-                        <BreadcrumbLink asChild>
-                           <Link href="#">Products</Link>
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>All Products</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-               <div className="relative ml-auto flex-1 md:grow-0">
-                  <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-                  <Input
-                     type="search"
-                     placeholder="Search..."
-                     className="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
-                  />
-               </div>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="overflow-hidden rounded-full"
-                     >
-                        <Image
-                           src="/placeholder-user.jpg"
-                           width={36}
-                           height={36}
-                           alt="Avatar"
-                           className="overflow-hidden rounded-full"
-                        />
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Settings</DropdownMenuItem>
-                     <DropdownMenuItem>Support</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Logout</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </header>
-            <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
-               <Tabs defaultValue="all">
-                  <div className="flex items-center">
-                     <TabsList>
-                        <TabsTrigger value="all">All</TabsTrigger>
-                        <TabsTrigger value="active">Active</TabsTrigger>
-                        <TabsTrigger value="draft">Draft</TabsTrigger>
-                        <TabsTrigger value="archived" className="hidden sm:flex">
-                           Archived
-                        </TabsTrigger>
-                     </TabsList>
-                     <div className="ml-auto flex items-center gap-2">
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button variant="outline" size="sm" className="h-8 gap-1">
-                                 <ListFilter className="size-3.5" />
-                                 <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                                    Filter
-                                 </span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Filter by</DropdownMenuLabel>
-                              <DropdownMenuSeparator />
-                              <DropdownMenuCheckboxItem checked>
-                                 Active
-                              </DropdownMenuCheckboxItem>
-                              <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>
-                              <DropdownMenuCheckboxItem>
-                                 Archived
-                              </DropdownMenuCheckboxItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                        <Button size="sm" variant="outline" className="h-8 gap-1">
-                           <File className="size-3.5" />
-                           <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                              Export
-                           </span>
-                        </Button>
-                        <Button size="sm" className="h-8 gap-1">
-                           <PlusCircle className="size-3.5" />
-                           <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                              Add Product
-                           </span>
-                        </Button>
-                     </div>
-                  </div>
-                  <TabsContent value="all">
-                     <Card x-chunk="A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.">
-                        <CardHeader>
-                           <CardTitle>Products</CardTitle>
-                           <CardDescription>
-                              Manage your products and view their sales performance.
-                           </CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                           <Table>
-                              <TableHeader>
-                                 <TableRow>
-                                    <TableHead className="hidden w-[100px] sm:table-cell">
-                                       <span className="sr-only">Image</span>
-                                    </TableHead>
-                                    <TableHead>Name</TableHead>
-                                    <TableHead>Status</TableHead>
-                                    <TableHead className="hidden md:table-cell">
-                                       Price
-                                    </TableHead>
-                                    <TableHead className="hidden md:table-cell">
-                                       Total Sales
-                                    </TableHead>
-                                    <TableHead className="hidden md:table-cell">
-                                       Created at
-                                    </TableHead>
-                                    <TableHead>
-                                       <span className="sr-only">Actions</span>
-                                    </TableHead>
-                                 </TableRow>
-                              </TableHeader>
-                              <TableBody>
-                                 <TableRow>
-                                    <TableCell className="hidden sm:table-cell">
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square rounded-md object-cover"
-                                          height="64"
-                                          src="/placeholder.svg"
-                                          width="64"
-                                       />
-                                    </TableCell>
-                                    <TableCell className="font-medium">
-                                       Laser Lemonade Machine
-                                    </TableCell>
-                                    <TableCell>
-                                       <Badge variant="outline">Draft</Badge>
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       $499.99
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       25
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       2023-07-12 10:42 AM
-                                    </TableCell>
-                                    <TableCell>
-                                       <DropdownMenu>
-                                          <DropdownMenuTrigger asChild>
-                                             <Button
-                                                aria-haspopup="true"
-                                                size="icon"
-                                                variant="ghost"
-                                             >
-                                                <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
-                                             </Button>
-                                          </DropdownMenuTrigger>
-                                          <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
-                                          </DropdownMenuContent>
-                                       </DropdownMenu>
-                                    </TableCell>
-                                 </TableRow>
-                                 <TableRow>
-                                    <TableCell className="hidden sm:table-cell">
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square rounded-md object-cover"
-                                          height="64"
-                                          src="/placeholder.svg"
-                                          width="64"
-                                       />
-                                    </TableCell>
-                                    <TableCell className="font-medium">
-                                       Hypernova Headphones
-                                    </TableCell>
-                                    <TableCell>
-                                       <Badge variant="outline">Active</Badge>
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       $129.99
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       100
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       2023-10-18 03:21 PM
-                                    </TableCell>
-                                    <TableCell>
-                                       <DropdownMenu>
-                                          <DropdownMenuTrigger asChild>
-                                             <Button
-                                                aria-haspopup="true"
-                                                size="icon"
-                                                variant="ghost"
-                                             >
-                                                <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
-                                             </Button>
-                                          </DropdownMenuTrigger>
-                                          <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
-                                          </DropdownMenuContent>
-                                       </DropdownMenu>
-                                    </TableCell>
-                                 </TableRow>
-                                 <TableRow>
-                                    <TableCell className="hidden sm:table-cell">
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square rounded-md object-cover"
-                                          height="64"
-                                          src="/placeholder.svg"
-                                          width="64"
-                                       />
-                                    </TableCell>
-                                    <TableCell className="font-medium">
-                                       AeroGlow Desk Lamp
-                                    </TableCell>
-                                    <TableCell>
-                                       <Badge variant="outline">Active</Badge>
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       $39.99
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       50
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       2023-11-29 08:15 AM
-                                    </TableCell>
-                                    <TableCell>
-                                       <DropdownMenu>
-                                          <DropdownMenuTrigger asChild>
-                                             <Button
-                                                aria-haspopup="true"
-                                                size="icon"
-                                                variant="ghost"
-                                             >
-                                                <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
-                                             </Button>
-                                          </DropdownMenuTrigger>
-                                          <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
-                                          </DropdownMenuContent>
-                                       </DropdownMenu>
-                                    </TableCell>
-                                 </TableRow>
-                                 <TableRow>
-                                    <TableCell className="hidden sm:table-cell">
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square rounded-md object-cover"
-                                          height="64"
-                                          src="/placeholder.svg"
-                                          width="64"
-                                       />
-                                    </TableCell>
-                                    <TableCell className="font-medium">
-                                       TechTonic Energy Drink
-                                    </TableCell>
-                                    <TableCell>
-                                       <Badge variant="secondary">Draft</Badge>
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       $2.99
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       0
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       2023-12-25 11:59 PM
-                                    </TableCell>
-                                    <TableCell>
-                                       <DropdownMenu>
-                                          <DropdownMenuTrigger asChild>
-                                             <Button
-                                                aria-haspopup="true"
-                                                size="icon"
-                                                variant="ghost"
-                                             >
-                                                <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
-                                             </Button>
-                                          </DropdownMenuTrigger>
-                                          <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
-                                          </DropdownMenuContent>
-                                       </DropdownMenu>
-                                    </TableCell>
-                                 </TableRow>
-                                 <TableRow>
-                                    <TableCell className="hidden sm:table-cell">
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square rounded-md object-cover"
-                                          height="64"
-                                          src="/placeholder.svg"
-                                          width="64"
-                                       />
-                                    </TableCell>
-                                    <TableCell className="font-medium">
-                                       Gamer Gear Pro Controller
-                                    </TableCell>
-                                    <TableCell>
-                                       <Badge variant="outline">Active</Badge>
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       $59.99
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       75
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       2024-01-01 12:00 AM
-                                    </TableCell>
-                                    <TableCell>
-                                       <DropdownMenu>
-                                          <DropdownMenuTrigger asChild>
-                                             <Button
-                                                aria-haspopup="true"
-                                                size="icon"
-                                                variant="ghost"
-                                             >
-                                                <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
-                                             </Button>
-                                          </DropdownMenuTrigger>
-                                          <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
-                                          </DropdownMenuContent>
-                                       </DropdownMenu>
-                                    </TableCell>
-                                 </TableRow>
-                                 <TableRow>
-                                    <TableCell className="hidden sm:table-cell">
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square rounded-md object-cover"
-                                          height="64"
-                                          src="/placeholder.svg"
-                                          width="64"
-                                       />
-                                    </TableCell>
-                                    <TableCell className="font-medium">
-                                       Luminous VR Headset
-                                    </TableCell>
-                                    <TableCell>
-                                       <Badge variant="outline">Active</Badge>
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       $199.99
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       30
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       2024-02-14 02:14 PM
-                                    </TableCell>
-                                    <TableCell>
-                                       <DropdownMenu>
-                                          <DropdownMenuTrigger asChild>
-                                             <Button
-                                                aria-haspopup="true"
-                                                size="icon"
-                                                variant="ghost"
-                                             >
-                                                <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
-                                             </Button>
-                                          </DropdownMenuTrigger>
-                                          <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
-                                          </DropdownMenuContent>
-                                       </DropdownMenu>
-                                    </TableCell>
-                                 </TableRow>
-                              </TableBody>
-                           </Table>
-                        </CardContent>
-                        <CardFooter>
-                           <div className="text-muted-foreground text-xs">
-                              Showing
-                              {' '}
-                              <strong>1-10</strong>
-                              {' '}
-                              of
-                              <strong>32</strong>
-                              {' '}
-                              products
-                           </div>
-                        </CardFooter>
-                     </Card>
-                  </TabsContent>
-               </Tabs>
-            </main>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-07-chunk-0.tsx b/apps/web/registry/default/block/dashboard-07-chunk-0.tsx
deleted file mode 100644
index 579a558f..00000000
--- a/apps/web/registry/default/block/dashboard-07-chunk-0.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import { Textarea } from '~/registry/default/ui/textarea'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-07-chunk-0">
-         <CardHeader>
-            <CardTitle>Product Details</CardTitle>
-            <CardDescription>
-               Lipsum dolor sit amet, consectetur adipiscing elit
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-6">
-               <div className="grid gap-3">
-                  <Label htmlFor="name">Name</Label>
-                  <Input
-                     id="name"
-                     type="text"
-                     className="w-full"
-                     defaultValue="Gamer Gear Pro Controller"
-                  />
-               </div>
-               <div className="grid gap-3">
-                  <Label htmlFor="description">Description</Label>
-                  <Textarea
-                     id="description"
-                     defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
-                     className="min-h-32"
-                  />
-               </div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-07-chunk-1.tsx b/apps/web/registry/default/block/dashboard-07-chunk-1.tsx
deleted file mode 100644
index d2faf61b..00000000
--- a/apps/web/registry/default/block/dashboard-07-chunk-1.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-'use client'
-
-import { PlusCircle } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/default/ui/table'
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/default/ui/toggle-group'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-07-chunk-1">
-         <CardHeader>
-            <CardTitle>Stock</CardTitle>
-            <CardDescription>
-               Lipsum dolor sit amet, consectetur adipiscing elit
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <Table>
-               <TableHeader>
-                  <TableRow>
-                     <TableHead className="w-[100px]">SKU</TableHead>
-                     <TableHead>Stock</TableHead>
-                     <TableHead>Price</TableHead>
-                     <TableHead className="w-[100px]">Size</TableHead>
-                  </TableRow>
-               </TableHeader>
-               <TableBody>
-                  <TableRow>
-                     <TableCell className="font-semibold">GGPC-001</TableCell>
-                     <TableCell>
-                        <Label htmlFor="stock-1" className="sr-only">
-                           Stock
-                        </Label>
-                        <Input id="stock-1" type="number" defaultValue="100" />
-                     </TableCell>
-                     <TableCell>
-                        <Label htmlFor="price-1" className="sr-only">
-                           Price
-                        </Label>
-                        <Input id="price-1" type="number" defaultValue="99.99" />
-                     </TableCell>
-                     <TableCell>
-                        <ToggleGroup type="single" defaultValue="s" variant="outline">
-                           <ToggleGroupItem value="s">S</ToggleGroupItem>
-                           <ToggleGroupItem value="m">M</ToggleGroupItem>
-                           <ToggleGroupItem value="l">L</ToggleGroupItem>
-                        </ToggleGroup>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="font-semibold">GGPC-002</TableCell>
-                     <TableCell>
-                        <Label htmlFor="stock-2" className="sr-only">
-                           Stock
-                        </Label>
-                        <Input id="stock-2" type="number" defaultValue="143" />
-                     </TableCell>
-                     <TableCell>
-                        <Label htmlFor="price-2" className="sr-only">
-                           Price
-                        </Label>
-                        <Input id="price-2" type="number" defaultValue="99.99" />
-                     </TableCell>
-                     <TableCell>
-                        <ToggleGroup type="single" defaultValue="m" variant="outline">
-                           <ToggleGroupItem value="s">S</ToggleGroupItem>
-                           <ToggleGroupItem value="m">M</ToggleGroupItem>
-                           <ToggleGroupItem value="l">L</ToggleGroupItem>
-                        </ToggleGroup>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="font-semibold">GGPC-003</TableCell>
-                     <TableCell>
-                        <Label htmlFor="stock-3" className="sr-only">
-                           Stock
-                        </Label>
-                        <Input id="stock-3" type="number" defaultValue="32" />
-                     </TableCell>
-                     <TableCell>
-                        <Label htmlFor="price-3" className="sr-only">
-                           Stock
-                        </Label>
-                        <Input id="price-3" type="number" defaultValue="99.99" />
-                     </TableCell>
-                     <TableCell>
-                        <ToggleGroup type="single" defaultValue="s" variant="outline">
-                           <ToggleGroupItem value="s">S</ToggleGroupItem>
-                           <ToggleGroupItem value="m">M</ToggleGroupItem>
-                           <ToggleGroupItem value="l">L</ToggleGroupItem>
-                        </ToggleGroup>
-                     </TableCell>
-                  </TableRow>
-               </TableBody>
-            </Table>
-         </CardContent>
-         <CardFooter className="justify-center border-t p-4">
-            <Button size="sm" variant="ghost" className="gap-1">
-               <PlusCircle className="size-3.5" />
-               Add Variant
-            </Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-07-chunk-2.tsx b/apps/web/registry/default/block/dashboard-07-chunk-2.tsx
deleted file mode 100644
index 6fb18069..00000000
--- a/apps/web/registry/default/block/dashboard-07-chunk-2.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client'
-
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-07-chunk-2">
-         <CardHeader>
-            <CardTitle>Product Category</CardTitle>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-6 sm:grid-cols-3">
-               <div className="grid gap-3">
-                  <Label htmlFor="category">Category</Label>
-                  <Select>
-                     <SelectTrigger id="category" aria-label="Select category">
-                        <SelectValue placeholder="Select category" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="clothing">Clothing</SelectItem>
-                        <SelectItem value="electronics">Electronics</SelectItem>
-                        <SelectItem value="accessories">Accessories</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-               <div className="grid gap-3">
-                  <Label htmlFor="subcategory">Subcategory (optional)</Label>
-                  <Select>
-                     <SelectTrigger id="subcategory" aria-label="Select subcategory">
-                        <SelectValue placeholder="Select subcategory" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="t-shirts">T-Shirts</SelectItem>
-                        <SelectItem value="hoodies">Hoodies</SelectItem>
-                        <SelectItem value="sweatshirts">Sweatshirts</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-07-chunk-3.tsx b/apps/web/registry/default/block/dashboard-07-chunk-3.tsx
deleted file mode 100644
index aac5f78a..00000000
--- a/apps/web/registry/default/block/dashboard-07-chunk-3.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-07-chunk-3">
-         <CardHeader>
-            <CardTitle>Product Status</CardTitle>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-6">
-               <div className="grid gap-3">
-                  <Label htmlFor="status">Status</Label>
-                  <Select>
-                     <SelectTrigger id="status" aria-label="Select status">
-                        <SelectValue placeholder="Select status" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="draft">Draft</SelectItem>
-                        <SelectItem value="published">Active</SelectItem>
-                        <SelectItem value="archived">Archived</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-07-chunk-4.tsx b/apps/web/registry/default/block/dashboard-07-chunk-4.tsx
deleted file mode 100644
index 70f5a64a..00000000
--- a/apps/web/registry/default/block/dashboard-07-chunk-4.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-import { Upload } from 'lucide-react'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-
-export default function Component() {
-   return (
-      <Card className="overflow-hidden" x-chunk="dashboard-07-chunk-4">
-         <CardHeader>
-            <CardTitle>Product Images</CardTitle>
-            <CardDescription>
-               Lipsum dolor sit amet, consectetur adipiscing elit
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-2">
-               <Image
-                  alt="Product image"
-                  className="aspect-square w-full rounded-md object-cover"
-                  height="300"
-                  src="/placeholder.svg"
-                  width="300"
-               />
-               <div className="grid grid-cols-3 gap-2">
-                  <button>
-                     <Image
-                        alt="Product image"
-                        className="aspect-square w-full rounded-md object-cover"
-                        height="84"
-                        src="/placeholder.svg"
-                        width="84"
-                     />
-                  </button>
-                  <button>
-                     <Image
-                        alt="Product image"
-                        className="aspect-square w-full rounded-md object-cover"
-                        height="84"
-                        src="/placeholder.svg"
-                        width="84"
-                     />
-                  </button>
-                  <button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
-                     <Upload className="text-muted-foreground size-4" />
-                     <span className="sr-only">Upload</span>
-                  </button>
-               </div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-07-chunk-5.tsx b/apps/web/registry/default/block/dashboard-07-chunk-5.tsx
deleted file mode 100644
index ccb2711a..00000000
--- a/apps/web/registry/default/block/dashboard-07-chunk-5.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-07-chunk-5">
-         <CardHeader>
-            <CardTitle>Archive Product</CardTitle>
-            <CardDescription>
-               Lipsum dolor sit amet, consectetur adipiscing elit.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div></div>
-            <Button size="sm" variant="secondary">
-               Archive Product
-            </Button>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/dashboard-07.tsx b/apps/web/registry/default/block/dashboard-07.tsx
deleted file mode 100644
index 645c9b73..00000000
--- a/apps/web/registry/default/block/dashboard-07.tsx
+++ /dev/null
@@ -1,610 +0,0 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import {
-   ChevronLeft,
-   Home,
-   LineChart,
-   Package,
-   Package2,
-   PanelLeft,
-   PlusCircle,
-   Search,
-   Settings,
-   ShoppingCart,
-   Upload,
-   Users2,
-} from 'lucide-react'
-
-import { Badge } from '~/registry/default/ui/badge'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/default/ui/sheet'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/default/ui/table'
-import { Textarea } from '~/registry/default/ui/textarea'
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/default/ui/toggle-group'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
-
-export const description
-  = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'
-
-export const iframeHeight = '1200px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="bg-muted/40 flex min-h-screen w-full flex-col">
-         <aside className="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
-            <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
-               <Link
-                  href="#"
-                  className="bg-primary text-primary-foreground group flex size-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:size-8 md:text-base"
-               >
-                  <Package2 className="size-4 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-               </Link>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Home className="size-5" />
-                        <span className="sr-only">Dashboard</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Dashboard</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="bg-accent text-accent-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <ShoppingCart className="size-5" />
-                        <span className="sr-only">Orders</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Orders</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Package className="size-5" />
-                        <span className="sr-only">Products</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Products</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Users2 className="size-5" />
-                        <span className="sr-only">Customers</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Customers</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <LineChart className="size-5" />
-                        <span className="sr-only">Analytics</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Analytics</TooltipContent>
-               </Tooltip>
-            </nav>
-            <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Settings className="size-5" />
-                        <span className="sr-only">Settings</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Settings</TooltipContent>
-               </Tooltip>
-            </nav>
-         </aside>
-         <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-            <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-               <Sheet>
-                  <SheetTrigger asChild>
-                     <Button size="icon" variant="outline" className="sm:hidden">
-                        <PanelLeft className="size-5" />
-                        <span className="sr-only">Toggle Menu</span>
-                     </Button>
-                  </SheetTrigger>
-                  <SheetContent side="left" className="sm:max-w-xs">
-                     <nav className="grid gap-6 text-lg font-medium">
-                        <Link
-                           href="#"
-                           className="bg-primary text-primary-foreground group flex size-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base"
-                        >
-                           <Package2 className="size-5 transition-all group-hover:scale-110" />
-                           <span className="sr-only">Acme Inc</span>
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Home className="size-5" />
-                           Dashboard
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <ShoppingCart className="size-5" />
-                           Orders
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Package className="size-5" />
-                           Products
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Users2 className="size-5" />
-                           Customers
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <LineChart className="size-5" />
-                           Settings
-                        </Link>
-                     </nav>
-                  </SheetContent>
-               </Sheet>
-               <Breadcrumb className="hidden md:flex">
-                  <BreadcrumbList>
-                     <BreadcrumbItem>
-                        <BreadcrumbLink asChild>
-                           <Link href="#">Dashboard</Link>
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator />
-                     <BreadcrumbItem>
-                        <BreadcrumbLink asChild>
-                           <Link href="#">Products</Link>
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Edit Product</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-               <div className="relative ml-auto flex-1 md:grow-0">
-                  <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-                  <Input
-                     type="search"
-                     placeholder="Search..."
-                     className="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
-                  />
-               </div>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="overflow-hidden rounded-full"
-                     >
-                        <Image
-                           src="/placeholder-user.jpg"
-                           width={36}
-                           height={36}
-                           alt="Avatar"
-                           className="overflow-hidden rounded-full"
-                        />
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Settings</DropdownMenuItem>
-                     <DropdownMenuItem>Support</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Logout</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </header>
-            <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
-               <div className="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
-                  <div className="flex items-center gap-4">
-                     <Button variant="outline" size="icon" className="size-7">
-                        <ChevronLeft className="size-4" />
-                        <span className="sr-only">Back</span>
-                     </Button>
-                     <h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
-                        Pro Controller
-                     </h1>
-                     <Badge variant="outline" className="ml-auto sm:ml-0">
-                        In stock
-                     </Badge>
-                     <div className="hidden items-center gap-2 md:ml-auto md:flex">
-                        <Button variant="outline" size="sm">
-                           Discard
-                        </Button>
-                        <Button size="sm">Save Product</Button>
-                     </div>
-                  </div>
-                  <div className="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
-                     <div className="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
-                        <Card x-chunk="A card with a form to edit the product details">
-                           <CardHeader>
-                              <CardTitle>Product Details</CardTitle>
-                              <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit
-                              </CardDescription>
-                           </CardHeader>
-                           <CardContent>
-                              <div className="grid gap-6">
-                                 <div className="grid gap-3">
-                                    <Label htmlFor="name">Name</Label>
-                                    <Input
-                                       id="name"
-                                       type="text"
-                                       className="w-full"
-                                       defaultValue="Gamer Gear Pro Controller"
-                                    />
-                                 </div>
-                                 <div className="grid gap-3">
-                                    <Label htmlFor="description">Description</Label>
-                                    <Textarea
-                                       id="description"
-                                       defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
-                                       className="min-h-32"
-                                    />
-                                 </div>
-                              </div>
-                           </CardContent>
-                        </Card>
-                        <Card x-chunk="A card with a form to edit the product stock and variants">
-                           <CardHeader>
-                              <CardTitle>Stock</CardTitle>
-                              <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit
-                              </CardDescription>
-                           </CardHeader>
-                           <CardContent>
-                              <Table>
-                                 <TableHeader>
-                                    <TableRow>
-                                       <TableHead className="w-[100px]">SKU</TableHead>
-                                       <TableHead>Stock</TableHead>
-                                       <TableHead>Price</TableHead>
-                                       <TableHead className="w-[100px]">Size</TableHead>
-                                    </TableRow>
-                                 </TableHeader>
-                                 <TableBody>
-                                    <TableRow>
-                                       <TableCell className="font-semibold">
-                                          GGPC-001
-                                       </TableCell>
-                                       <TableCell>
-                                          <Label htmlFor="stock-1" className="sr-only">
-                                             Stock
-                                          </Label>
-                                          <Input
-                                             id="stock-1"
-                                             type="number"
-                                             defaultValue="100"
-                                          />
-                                       </TableCell>
-                                       <TableCell>
-                                          <Label htmlFor="price-1" className="sr-only">
-                                             Price
-                                          </Label>
-                                          <Input
-                                             id="price-1"
-                                             type="number"
-                                             defaultValue="99.99"
-                                          />
-                                       </TableCell>
-                                       <TableCell>
-                                          <ToggleGroup
-                                             type="single"
-                                             defaultValue="s"
-                                             variant="outline"
-                                          >
-                                             <ToggleGroupItem value="s">S</ToggleGroupItem>
-                                             <ToggleGroupItem value="m">M</ToggleGroupItem>
-                                             <ToggleGroupItem value="l">L</ToggleGroupItem>
-                                          </ToggleGroup>
-                                       </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell className="font-semibold">
-                                          GGPC-002
-                                       </TableCell>
-                                       <TableCell>
-                                          <Label htmlFor="stock-2" className="sr-only">
-                                             Stock
-                                          </Label>
-                                          <Input
-                                             id="stock-2"
-                                             type="number"
-                                             defaultValue="143"
-                                          />
-                                       </TableCell>
-                                       <TableCell>
-                                          <Label htmlFor="price-2" className="sr-only">
-                                             Price
-                                          </Label>
-                                          <Input
-                                             id="price-2"
-                                             type="number"
-                                             defaultValue="99.99"
-                                          />
-                                       </TableCell>
-                                       <TableCell>
-                                          <ToggleGroup
-                                             type="single"
-                                             defaultValue="m"
-                                             variant="outline"
-                                          >
-                                             <ToggleGroupItem value="s">S</ToggleGroupItem>
-                                             <ToggleGroupItem value="m">M</ToggleGroupItem>
-                                             <ToggleGroupItem value="l">L</ToggleGroupItem>
-                                          </ToggleGroup>
-                                       </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell className="font-semibold">
-                                          GGPC-003
-                                       </TableCell>
-                                       <TableCell>
-                                          <Label htmlFor="stock-3" className="sr-only">
-                                             Stock
-                                          </Label>
-                                          <Input
-                                             id="stock-3"
-                                             type="number"
-                                             defaultValue="32"
-                                          />
-                                       </TableCell>
-                                       <TableCell>
-                                          <Label htmlFor="price-3" className="sr-only">
-                                             Stock
-                                          </Label>
-                                          <Input
-                                             id="price-3"
-                                             type="number"
-                                             defaultValue="99.99"
-                                          />
-                                       </TableCell>
-                                       <TableCell>
-                                          <ToggleGroup
-                                             type="single"
-                                             defaultValue="s"
-                                             variant="outline"
-                                          >
-                                             <ToggleGroupItem value="s">S</ToggleGroupItem>
-                                             <ToggleGroupItem value="m">M</ToggleGroupItem>
-                                             <ToggleGroupItem value="l">L</ToggleGroupItem>
-                                          </ToggleGroup>
-                                       </TableCell>
-                                    </TableRow>
-                                 </TableBody>
-                              </Table>
-                           </CardContent>
-                           <CardFooter className="justify-center border-t p-4">
-                              <Button size="sm" variant="ghost" className="gap-1">
-                                 <PlusCircle className="size-3.5" />
-                                 Add Variant
-                              </Button>
-                           </CardFooter>
-                        </Card>
-                        <Card x-chunk="A card with a form to edit the product category and subcategory">
-                           <CardHeader>
-                              <CardTitle>Product Category</CardTitle>
-                           </CardHeader>
-                           <CardContent>
-                              <div className="grid gap-6 sm:grid-cols-3">
-                                 <div className="grid gap-3">
-                                    <Label htmlFor="category">Category</Label>
-                                    <Select>
-                                       <SelectTrigger
-                                          id="category"
-                                          aria-label="Select category"
-                                       >
-                                          <SelectValue placeholder="Select category" />
-                                       </SelectTrigger>
-                                       <SelectContent>
-                                          <SelectItem value="clothing">Clothing</SelectItem>
-                                          <SelectItem value="electronics">
-                                             Electronics
-                                          </SelectItem>
-                                          <SelectItem value="accessories">
-                                             Accessories
-                                          </SelectItem>
-                                       </SelectContent>
-                                    </Select>
-                                 </div>
-                                 <div className="grid gap-3">
-                                    <Label htmlFor="subcategory">
-                                       Subcategory (optional)
-                                    </Label>
-                                    <Select>
-                                       <SelectTrigger
-                                          id="subcategory"
-                                          aria-label="Select subcategory"
-                                       >
-                                          <SelectValue placeholder="Select subcategory" />
-                                       </SelectTrigger>
-                                       <SelectContent>
-                                          <SelectItem value="t-shirts">T-Shirts</SelectItem>
-                                          <SelectItem value="hoodies">Hoodies</SelectItem>
-                                          <SelectItem value="sweatshirts">
-                                             Sweatshirts
-                                          </SelectItem>
-                                       </SelectContent>
-                                    </Select>
-                                 </div>
-                              </div>
-                           </CardContent>
-                        </Card>
-                     </div>
-                     <div className="grid auto-rows-max items-start gap-4 lg:gap-8">
-                        <Card x-chunk="A card with a form to edit the product status">
-                           <CardHeader>
-                              <CardTitle>Product Status</CardTitle>
-                           </CardHeader>
-                           <CardContent>
-                              <div className="grid gap-6">
-                                 <div className="grid gap-3">
-                                    <Label htmlFor="status">Status</Label>
-                                    <Select>
-                                       <SelectTrigger id="status" aria-label="Select status">
-                                          <SelectValue placeholder="Select status" />
-                                       </SelectTrigger>
-                                       <SelectContent>
-                                          <SelectItem value="draft">Draft</SelectItem>
-                                          <SelectItem value="published">Active</SelectItem>
-                                          <SelectItem value="archived">Archived</SelectItem>
-                                       </SelectContent>
-                                    </Select>
-                                 </div>
-                              </div>
-                           </CardContent>
-                        </Card>
-                        <Card
-                           className="overflow-hidden"
-                           x-chunk="A card with a form to upload product images"
-                        >
-                           <CardHeader>
-                              <CardTitle>Product Images</CardTitle>
-                              <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit
-                              </CardDescription>
-                           </CardHeader>
-                           <CardContent>
-                              <div className="grid gap-2">
-                                 <Image
-                                    alt="Product image"
-                                    className="aspect-square w-full rounded-md object-cover"
-                                    height="300"
-                                    src="/placeholder.svg"
-                                    width="300"
-                                 />
-                                 <div className="grid grid-cols-3 gap-2">
-                                    <button>
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square w-full rounded-md object-cover"
-                                          height="84"
-                                          src="/placeholder.svg"
-                                          width="84"
-                                       />
-                                    </button>
-                                    <button>
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square w-full rounded-md object-cover"
-                                          height="84"
-                                          src="/placeholder.svg"
-                                          width="84"
-                                       />
-                                    </button>
-                                    <button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
-                                       <Upload className="text-muted-foreground size-4" />
-                                       <span className="sr-only">Upload</span>
-                                    </button>
-                                 </div>
-                              </div>
-                           </CardContent>
-                        </Card>
-                        <Card x-chunk="A card with a call to action to archive the product">
-                           <CardHeader>
-                              <CardTitle>Archive Product</CardTitle>
-                              <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit.
-                              </CardDescription>
-                           </CardHeader>
-                           <CardContent>
-                              <div></div>
-                              <Button size="sm" variant="secondary">
-                                 Archive Product
-                              </Button>
-                           </CardContent>
-                        </Card>
-                     </div>
-                  </div>
-                  <div className="flex items-center justify-center gap-2 md:hidden">
-                     <Button variant="outline" size="sm">
-                        Discard
-                     </Button>
-                     <Button size="sm">Save Product</Button>
-                  </div>
-               </div>
-            </main>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar-controlled.tsx b/apps/web/registry/default/block/demo-sidebar-controlled.tsx
deleted file mode 100644
index e777237f..00000000
--- a/apps/web/registry/default/block/demo-sidebar-controlled.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   Frame,
-   LifeBuoy,
-   Map,
-   PanelLeftClose,
-   PanelLeftOpen,
-   PieChart,
-   Send,
-} from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarInset,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/default/ui/sidebar'
-
-const projects = [
-   {
-      name: 'Design Engineering',
-      url: '#',
-      icon: Frame,
-   },
-   {
-      name: 'Sales & Marketing',
-      url: '#',
-      icon: PieChart,
-   },
-   {
-      name: 'Travel',
-      url: '#',
-      icon: Map,
-   },
-   {
-      name: 'Support',
-      url: '#',
-      icon: LifeBuoy,
-   },
-   {
-      name: 'Feedback',
-      url: '#',
-      icon: Send,
-   },
-]
-
-export default function AppSidebar() {
-   const [open, setOpen] = React.useState(true)
-
-   return (
-      <SidebarProvider open={open} onOpenChange={setOpen}>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {projects.map(project => (
-                           <SidebarMenuItem key={project.name}>
-                              <SidebarMenuButton asChild>
-                                 <a href={project.url}>
-                                    <project.icon />
-                                    <span>{project.name}</span>
-                                 </a>
-                              </SidebarMenuButton>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-         <SidebarInset>
-            <header className="flex h-12 items-center justify-between px-4">
-               <Button
-                  onClick={() => setOpen(open => !open)}
-                  size="sm"
-                  variant="ghost"
-               >
-                  {open ? <PanelLeftClose /> : <PanelLeftOpen />}
-                  <span>
-                     {open ? 'Close' : 'Open'}
-                     {' '}
-                     Sidebar
-                  </span>
-               </Button>
-            </header>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar-footer.tsx b/apps/web/registry/default/block/demo-sidebar-footer.tsx
deleted file mode 100644
index 495de092..00000000
--- a/apps/web/registry/default/block/demo-sidebar-footer.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-'use client'
-
-import { ChevronDown, ChevronUp, User2 } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarInset,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarHeader />
-            <SidebarContent />
-            <SidebarFooter>
-               <SidebarMenu>
-                  <SidebarMenuItem>
-                     <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                           <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                              Username
-                              <ChevronUp className="ml-auto" />
-                           </SidebarMenuButton>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent
-                           side="top"
-                           className="w-[--radix-popper-anchor-width]"
-                        >
-                           <DropdownMenuItem>
-                              <span>Account</span>
-                           </DropdownMenuItem>
-                           <DropdownMenuItem>
-                              <span>Billing</span>
-                           </DropdownMenuItem>
-                           <DropdownMenuItem>
-                              <span>Sign out</span>
-                           </DropdownMenuItem>
-                        </DropdownMenuContent>
-                     </DropdownMenu>
-                  </SidebarMenuItem>
-               </SidebarMenu>
-            </SidebarFooter>
-         </Sidebar>
-         <SidebarInset>
-            <header className="flex h-12 items-center justify-between px-4">
-               <SidebarTrigger />
-            </header>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar-group-action.tsx b/apps/web/registry/default/block/demo-sidebar-group-action.tsx
deleted file mode 100644
index 49a5dd45..00000000
--- a/apps/web/registry/default/block/demo-sidebar-group-action.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client'
-
-import {
-   ChevronDown,
-   Frame,
-   LifeBuoy,
-   Map,
-   PieChart,
-   Plus,
-   Send,
-} from 'lucide-react'
-import { Toaster, toast } from 'sonner'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupAction,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/default/ui/sidebar'
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Toaster
-            position="bottom-left"
-            toastOptions={{
-               className: 'ml-[160px]',
-            }}
-         />
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
-                  <SidebarGroupAction
-                     title="Add Project"
-                     onClick={() => toast('You clicked the group action!')}
-                  >
-                     <Plus />
-                     {' '}
-                     <span className="sr-only">Add Project</span>
-                  </SidebarGroupAction>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        <SidebarMenuItem>
-                           <SidebarMenuButton asChild>
-                              <a href="#">
-                                 <Frame />
-                                 <span>Design Engineering</span>
-                              </a>
-                           </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem>
-                           <SidebarMenuButton asChild>
-                              <a href="#">
-                                 <PieChart />
-                                 <span>Sales & Marketing</span>
-                              </a>
-                           </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem>
-                           <SidebarMenuButton asChild>
-                              <a href="#">
-                                 <Map />
-                                 <span>Travel</span>
-                              </a>
-                           </SidebarMenuButton>
-                        </SidebarMenuItem>
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar-group-collapsible.tsx b/apps/web/registry/default/block/demo-sidebar-group-collapsible.tsx
deleted file mode 100644
index a092bdb9..00000000
--- a/apps/web/registry/default/block/demo-sidebar-group-collapsible.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'use client'
-
-import { ChevronDown, LifeBuoy, Send } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/default/ui/sidebar'
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <Collapsible defaultOpen className="group/collapsible">
-                  <SidebarGroup>
-                     <SidebarGroupLabel
-                        asChild
-                        className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
-                     >
-                        <CollapsibleTrigger>
-                           Help
-                           <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
-                        </CollapsibleTrigger>
-                     </SidebarGroupLabel>
-                     <CollapsibleContent>
-                        <SidebarGroupContent>
-                           <SidebarMenu>
-                              <SidebarMenuItem>
-                                 <SidebarMenuButton>
-                                    <LifeBuoy />
-                                    Support
-                                 </SidebarMenuButton>
-                              </SidebarMenuItem>
-                              <SidebarMenuItem>
-                                 <SidebarMenuButton>
-                                    <Send />
-                                    Feedback
-                                 </SidebarMenuButton>
-                              </SidebarMenuItem>
-                           </SidebarMenu>
-                        </SidebarGroupContent>
-                     </CollapsibleContent>
-                  </SidebarGroup>
-               </Collapsible>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar-group.tsx b/apps/web/registry/default/block/demo-sidebar-group.tsx
deleted file mode 100644
index a62b7402..00000000
--- a/apps/web/registry/default/block/demo-sidebar-group.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client'
-
-import { LifeBuoy, Send } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/default/ui/sidebar'
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Help</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        <SidebarMenuItem>
-                           <SidebarMenuButton>
-                              <LifeBuoy />
-                              Support
-                           </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem>
-                           <SidebarMenuButton>
-                              <Send />
-                              Feedback
-                           </SidebarMenuButton>
-                        </SidebarMenuItem>
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar-header.tsx b/apps/web/registry/default/block/demo-sidebar-header.tsx
deleted file mode 100644
index 8204209b..00000000
--- a/apps/web/registry/default/block/demo-sidebar-header.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client'
-
-import { ChevronDown } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   Sidebar,
-   SidebarHeader,
-   SidebarInset,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarHeader>
-               <SidebarMenu>
-                  <SidebarMenuItem>
-                     <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                           <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                              Select Workspace
-                              <ChevronDown className="ml-auto" />
-                           </SidebarMenuButton>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent className="w-[--radix-popper-anchor-width]">
-                           <DropdownMenuItem>
-                              <span>Acme Inc</span>
-                           </DropdownMenuItem>
-                           <DropdownMenuItem>
-                              <span>Acme Corp.</span>
-                           </DropdownMenuItem>
-                        </DropdownMenuContent>
-                     </DropdownMenu>
-                  </SidebarMenuItem>
-               </SidebarMenu>
-            </SidebarHeader>
-         </Sidebar>
-         <SidebarInset>
-            <header className="flex h-12 items-center justify-between px-4">
-               <SidebarTrigger />
-            </header>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar-menu-action.tsx b/apps/web/registry/default/block/demo-sidebar-menu-action.tsx
deleted file mode 100644
index 0c41cca6..00000000
--- a/apps/web/registry/default/block/demo-sidebar-menu-action.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-'use client'
-
-import {
-   Frame,
-   LifeBuoy,
-   Map,
-   MoreHorizontal,
-   PieChart,
-   Send,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/default/ui/sidebar'
-
-const projects = [
-   {
-      name: 'Design Engineering',
-      url: '#',
-      icon: Frame,
-   },
-   {
-      name: 'Sales & Marketing',
-      url: '#',
-      icon: PieChart,
-   },
-   {
-      name: 'Travel',
-      url: '#',
-      icon: Map,
-   },
-   {
-      name: 'Support',
-      url: '#',
-      icon: LifeBuoy,
-   },
-   {
-      name: 'Feedback',
-      url: '#',
-      icon: Send,
-   },
-]
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {projects.map((project, index) => (
-                           <SidebarMenuItem key={project.name}>
-                              <SidebarMenuButton
-                                 asChild
-                                 className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
-                              >
-                                 <a href={project.url}>
-                                    <project.icon />
-                                    <span>{project.name}</span>
-                                 </a>
-                              </SidebarMenuButton>
-                              <DropdownMenu>
-                                 <DropdownMenuTrigger asChild>
-                                    <SidebarMenuAction>
-                                       <MoreHorizontal />
-                                       <span className="sr-only">More</span>
-                                    </SidebarMenuAction>
-                                 </DropdownMenuTrigger>
-                                 <DropdownMenuContent side="right" align="start">
-                                    <DropdownMenuItem>
-                                       <span>Edit Project</span>
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem>
-                                       <span>Delete Project</span>
-                                    </DropdownMenuItem>
-                                 </DropdownMenuContent>
-                              </DropdownMenu>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar-menu-badge.tsx b/apps/web/registry/default/block/demo-sidebar-menu-badge.tsx
deleted file mode 100644
index 6d3e36bf..00000000
--- a/apps/web/registry/default/block/demo-sidebar-menu-badge.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client'
-
-import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuBadge,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/default/ui/sidebar'
-
-const projects = [
-   {
-      name: 'Design Engineering',
-      url: '#',
-      icon: Frame,
-      badge: '24',
-   },
-   {
-      name: 'Sales & Marketing',
-      url: '#',
-      icon: PieChart,
-      badge: '12',
-   },
-   {
-      name: 'Travel',
-      url: '#',
-      icon: Map,
-      badge: '3',
-   },
-   {
-      name: 'Support',
-      url: '#',
-      icon: LifeBuoy,
-      badge: '21',
-   },
-   {
-      name: 'Feedback',
-      url: '#',
-      icon: Send,
-      badge: '8',
-   },
-]
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {projects.map(project => (
-                           <SidebarMenuItem key={project.name}>
-                              <SidebarMenuButton
-                                 asChild
-                                 className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
-                              >
-                                 <a href={project.url}>
-                                    <project.icon />
-                                    <span>{project.name}</span>
-                                 </a>
-                              </SidebarMenuButton>
-                              <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar-menu-collapsible.tsx b/apps/web/registry/default/block/demo-sidebar-menu-collapsible.tsx
deleted file mode 100644
index 6dc1c6c7..00000000
--- a/apps/web/registry/default/block/demo-sidebar-menu-collapsible.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-'use client'
-
-import { ChevronRight } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-   SidebarProvider,
-} from '~/registry/default/ui/sidebar'
-
-const items = [
-   {
-      title: 'Getting Started',
-      url: '#',
-      items: [
-         {
-            title: 'Installation',
-            url: '#',
-         },
-         {
-            title: 'Project Structure',
-            url: '#',
-         },
-      ],
-   },
-   {
-      title: 'Building Your Application',
-      url: '#',
-      items: [
-         {
-            title: 'Routing',
-            url: '#',
-         },
-         {
-            title: 'Data Fetching',
-            url: '#',
-            isActive: true,
-         },
-         {
-            title: 'Rendering',
-            url: '#',
-         },
-         {
-            title: 'Caching',
-            url: '#',
-         },
-         {
-            title: 'Styling',
-            url: '#',
-         },
-         {
-            title: 'Optimizing',
-            url: '#',
-         },
-         {
-            title: 'Configuring',
-            url: '#',
-         },
-         {
-            title: 'Testing',
-            url: '#',
-         },
-         {
-            title: 'Authentication',
-            url: '#',
-         },
-         {
-            title: 'Deploying',
-            url: '#',
-         },
-         {
-            title: 'Upgrading',
-            url: '#',
-         },
-         {
-            title: 'Examples',
-            url: '#',
-         },
-      ],
-   },
-   {
-      title: 'API Reference',
-      url: '#',
-      items: [
-         {
-            title: 'Components',
-            url: '#',
-         },
-         {
-            title: 'File Conventions',
-            url: '#',
-         },
-         {
-            title: 'Functions',
-            url: '#',
-         },
-         {
-            title: 'next.config.js Options',
-            url: '#',
-         },
-         {
-            title: 'CLI',
-            url: '#',
-         },
-         {
-            title: 'Edge Runtime',
-            url: '#',
-         },
-      ],
-   },
-   {
-      title: 'Architecture',
-      url: '#',
-      items: [
-         {
-            title: 'Accessibility',
-            url: '#',
-         },
-         {
-            title: 'Fast Refresh',
-            url: '#',
-         },
-         {
-            title: 'Next.js Compiler',
-            url: '#',
-         },
-         {
-            title: 'Supported Browsers',
-            url: '#',
-         },
-         {
-            title: 'Turbopack',
-            url: '#',
-         },
-      ],
-   },
-]
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {items.map((item, index) => (
-                           <Collapsible
-                              key={index}
-                              className="group/collapsible"
-                              defaultOpen={index === 0}
-                           >
-                              <SidebarMenuItem>
-                                 <CollapsibleTrigger asChild>
-                                    <SidebarMenuButton>
-                                       <span>{item.title}</span>
-                                       <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-                                    </SidebarMenuButton>
-                                 </CollapsibleTrigger>
-                                 <CollapsibleContent>
-                                    <SidebarMenuSub>
-                                       {item.items.map((subItem, subIndex) => (
-                                          <SidebarMenuSubItem key={subIndex}>
-                                             <SidebarMenuSubButton asChild>
-                                                <a href={subItem.url}>
-                                                   <span>{subItem.title}</span>
-                                                </a>
-                                             </SidebarMenuSubButton>
-                                          </SidebarMenuSubItem>
-                                       ))}
-                                    </SidebarMenuSub>
-                                 </CollapsibleContent>
-                              </SidebarMenuItem>
-                           </Collapsible>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar-menu-sub.tsx b/apps/web/registry/default/block/demo-sidebar-menu-sub.tsx
deleted file mode 100644
index ff764dbf..00000000
--- a/apps/web/registry/default/block/demo-sidebar-menu-sub.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-'use client'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-   SidebarProvider,
-} from '~/registry/default/ui/sidebar'
-
-const items = [
-   {
-      title: 'Getting Started',
-      url: '#',
-      items: [
-         {
-            title: 'Installation',
-            url: '#',
-         },
-         {
-            title: 'Project Structure',
-            url: '#',
-         },
-      ],
-   },
-   {
-      title: 'Building Your Application',
-      url: '#',
-      items: [
-         {
-            title: 'Routing',
-            url: '#',
-         },
-         {
-            title: 'Data Fetching',
-            url: '#',
-            isActive: true,
-         },
-         {
-            title: 'Rendering',
-            url: '#',
-         },
-         {
-            title: 'Caching',
-            url: '#',
-         },
-         {
-            title: 'Styling',
-            url: '#',
-         },
-         {
-            title: 'Optimizing',
-            url: '#',
-         },
-         {
-            title: 'Configuring',
-            url: '#',
-         },
-         {
-            title: 'Testing',
-            url: '#',
-         },
-         {
-            title: 'Authentication',
-            url: '#',
-         },
-         {
-            title: 'Deploying',
-            url: '#',
-         },
-         {
-            title: 'Upgrading',
-            url: '#',
-         },
-         {
-            title: 'Examples',
-            url: '#',
-         },
-      ],
-   },
-   {
-      title: 'API Reference',
-      url: '#',
-      items: [
-         {
-            title: 'Components',
-            url: '#',
-         },
-         {
-            title: 'File Conventions',
-            url: '#',
-         },
-         {
-            title: 'Functions',
-            url: '#',
-         },
-         {
-            title: 'next.config.js Options',
-            url: '#',
-         },
-         {
-            title: 'CLI',
-            url: '#',
-         },
-         {
-            title: 'Edge Runtime',
-            url: '#',
-         },
-      ],
-   },
-   {
-      title: 'Architecture',
-      url: '#',
-      items: [
-         {
-            title: 'Accessibility',
-            url: '#',
-         },
-         {
-            title: 'Fast Refresh',
-            url: '#',
-         },
-         {
-            title: 'Next.js Compiler',
-            url: '#',
-         },
-         {
-            title: 'Supported Browsers',
-            url: '#',
-         },
-         {
-            title: 'Turbopack',
-            url: '#',
-         },
-      ],
-   },
-]
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {items.map((item, index) => (
-                           <SidebarMenuItem key={index}>
-                              <SidebarMenuButton asChild>
-                                 <a href={item.url}>
-                                    <span>{item.title}</span>
-                                 </a>
-                              </SidebarMenuButton>
-                              <SidebarMenuSub>
-                                 {item.items.map((subItem, subIndex) => (
-                                    <SidebarMenuSubItem key={subIndex}>
-                                       <SidebarMenuSubButton asChild>
-                                          <a href={subItem.url}>
-                                             <span>{subItem.title}</span>
-                                          </a>
-                                       </SidebarMenuSubButton>
-                                    </SidebarMenuSubItem>
-                                 ))}
-                              </SidebarMenuSub>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar-menu.tsx b/apps/web/registry/default/block/demo-sidebar-menu.tsx
deleted file mode 100644
index e78938ff..00000000
--- a/apps/web/registry/default/block/demo-sidebar-menu.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-'use client'
-
-import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/default/ui/sidebar'
-
-const projects = [
-   {
-      name: 'Design Engineering',
-      url: '#',
-      icon: Frame,
-   },
-   {
-      name: 'Sales & Marketing',
-      url: '#',
-      icon: PieChart,
-   },
-   {
-      name: 'Travel',
-      url: '#',
-      icon: Map,
-   },
-   {
-      name: 'Support',
-      url: '#',
-      icon: LifeBuoy,
-   },
-   {
-      name: 'Feedback',
-      url: '#',
-      icon: Send,
-   },
-]
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {projects.map(project => (
-                           <SidebarMenuItem key={project.name}>
-                              <SidebarMenuButton asChild>
-                                 <a href={project.url}>
-                                    <project.icon />
-                                    <span>{project.name}</span>
-                                 </a>
-                              </SidebarMenuButton>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar-rsc.tsx b/apps/web/registry/default/block/demo-sidebar-rsc.tsx
deleted file mode 100644
index d5dbbb5e..00000000
--- a/apps/web/registry/default/block/demo-sidebar-rsc.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as React from 'react'
-import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSkeleton,
-   SidebarProvider,
-} from '~/registry/default/ui/sidebar'
-
-const projects = [
-   {
-      name: 'Design Engineering',
-      url: '#',
-      icon: Frame,
-      badge: '24',
-   },
-   {
-      name: 'Sales & Marketing',
-      url: '#',
-      icon: PieChart,
-      badge: '12',
-   },
-   {
-      name: 'Travel',
-      url: '#',
-      icon: Map,
-      badge: '3',
-   },
-   {
-      name: 'Support',
-      url: '#',
-      icon: LifeBuoy,
-      badge: '21',
-   },
-   {
-      name: 'Feedback',
-      url: '#',
-      icon: Send,
-      badge: '8',
-   },
-]
-
-// Dummy fetch function
-async function fetchProjects() {
-   await new Promise(resolve => setTimeout(resolve, 3000))
-   return projects
-}
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <React.Suspense fallback={<NavProjectsSkeleton />}>
-                        <NavProjects />
-                     </React.Suspense>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
-
-function NavProjectsSkeleton() {
-   return (
-      <SidebarMenu>
-         {Array.from({ length: 5 }).map((_, index) => (
-            <SidebarMenuItem key={index}>
-               <SidebarMenuSkeleton showIcon />
-            </SidebarMenuItem>
-         ))}
-      </SidebarMenu>
-   )
-}
-
-async function NavProjects() {
-   const projects = await fetchProjects()
-
-   return (
-      <SidebarMenu>
-         {projects.map(project => (
-            <SidebarMenuItem key={project.name}>
-               <SidebarMenuButton asChild>
-                  <a href={project.url}>
-                     <project.icon />
-                     <span>{project.name}</span>
-                  </a>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         ))}
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/demo-sidebar.tsx b/apps/web/registry/default/block/demo-sidebar.tsx
deleted file mode 100644
index af767dd4..00000000
--- a/apps/web/registry/default/block/demo-sidebar.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-
-import { Calendar, Home, Inbox, Search, Settings } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarInset,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-// Menu items.
-const items = [
-   {
-      title: 'Home',
-      url: '#',
-      icon: Home,
-   },
-   {
-      title: 'Inbox',
-      url: '#',
-      icon: Inbox,
-   },
-   {
-      title: 'Calendar',
-      url: '#',
-      icon: Calendar,
-   },
-   {
-      title: 'Search',
-      url: '#',
-      icon: Search,
-   },
-   {
-      title: 'Settings',
-      url: '#',
-      icon: Settings,
-   },
-]
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Application</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {items.map(item => (
-                           <SidebarMenuItem key={item.title}>
-                              <SidebarMenuButton asChild>
-                                 <a href={item.url}>
-                                    <item.icon />
-                                    <span>{item.title}</span>
-                                 </a>
-                              </SidebarMenuButton>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-         <SidebarInset>
-            <header className="flex h-12 items-center justify-between px-4">
-               <SidebarTrigger />
-            </header>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/login-01/components/login-form.tsx b/apps/web/registry/default/block/login-01/components/login-form.tsx
deleted file mode 100644
index e6ab0a65..00000000
--- a/apps/web/registry/default/block/login-01/components/login-form.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import Link from 'next/link'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export function LoginForm() {
-   return (
-      <Card className="mx-auto max-w-sm">
-         <CardHeader>
-            <CardTitle className="text-2xl">Login</CardTitle>
-            <CardDescription>
-               Enter your email below to login to your account
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-4">
-               <div className="grid gap-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                     id="email"
-                     type="email"
-                     placeholder="m@example.com"
-                     required
-                  />
-               </div>
-               <div className="grid gap-2">
-                  <div className="flex items-center">
-                     <Label htmlFor="password">Password</Label>
-                     <Link href="#" className="ml-auto inline-block text-sm underline">
-                        Forgot your password?
-                     </Link>
-                  </div>
-                  <Input id="password" type="password" required />
-               </div>
-               <Button type="submit" className="w-full">
-                  Login
-               </Button>
-               <Button variant="outline" className="w-full">
-                  Login with Google
-               </Button>
-            </div>
-            <div className="mt-4 text-center text-sm">
-               Don&apos;t have an account?
-               {' '}
-               <Link href="#" className="underline">
-                  Sign up
-               </Link>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/login-01/page.tsx b/apps/web/registry/default/block/login-01/page.tsx
deleted file mode 100644
index 666076bb..00000000
--- a/apps/web/registry/default/block/login-01/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { LoginForm } from '~/registry/default/block/login-01/components/login-form'
-
-export const description = 'A simple login form.'
-
-export const iframeHeight = '870px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Page() {
-   return (
-      <div className="flex h-screen w-full items-center justify-center px-4">
-         <LoginForm />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-01/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-01/components/app-sidebar.tsx
deleted file mode 100644
index 9ce3f463..00000000
--- a/apps/web/registry/default/block/sidebar-01/components/app-sidebar.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import * as React from 'react'
-
-import { SearchForm } from '~/registry/default/block/sidebar-01/components/search-form'
-import { VersionSwitcher } from '~/registry/default/block/sidebar-01/components/version-switcher'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarRail,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarHeader>
-            <VersionSwitcher
-               versions={data.versions}
-               defaultVersion={data.versions[0]}
-            />
-            <SearchForm />
-         </SidebarHeader>
-         <SidebarContent>
-            {/* We create a SidebarGroup for each parent. */}
-            {data.navMain.map(item => (
-               <SidebarGroup key={item.title}>
-                  <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {item.items.map(item => (
-                           <SidebarMenuItem key={item.title}>
-                              <SidebarMenuButton asChild isActive={item.isActive}>
-                                 <a href={item.url}>{item.title}</a>
-                              </SidebarMenuButton>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            ))}
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-01/components/search-form.tsx b/apps/web/registry/default/block/sidebar-01/components/search-form.tsx
deleted file mode 100644
index 463f7051..00000000
--- a/apps/web/registry/default/block/sidebar-01/components/search-form.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Search } from 'lucide-react'
-
-import { Label } from '~/registry/default/ui/label'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarInput,
-} from '~/registry/default/ui/sidebar'
-
-export function SearchForm({ ...props }: React.ComponentProps<'form'>) {
-   return (
-      <form {...props}>
-         <SidebarGroup className="py-0">
-            <SidebarGroupContent className="relative">
-               <Label htmlFor="search" className="sr-only">
-                  Search
-               </Label>
-               <SidebarInput
-                  id="search"
-                  placeholder="Search the docs..."
-                  className="pl-8"
-               />
-               <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
-            </SidebarGroupContent>
-         </SidebarGroup>
-      </form>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-01/components/version-switcher.tsx b/apps/web/registry/default/block/sidebar-01/components/version-switcher.tsx
deleted file mode 100644
index f08acc0a..00000000
--- a/apps/web/registry/default/block/sidebar-01/components/version-switcher.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/default/ui/sidebar'
-
-export function VersionSwitcher({
-   versions,
-   defaultVersion,
-}: {
-   versions: string[]
-   defaultVersion: string
-}) {
-   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                        <GalleryVerticalEnd className="size-4" />
-                     </div>
-                     <div className="flex flex-col gap-0.5 leading-none">
-                        <span className="font-semibold">Documentation</span>
-                        <span className="">
-                           v
-                           {selectedVersion}
-                        </span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width]"
-                  align="start"
-               >
-                  {versions.map(version => (
-                     <DropdownMenuItem
-                        key={version}
-                        onSelect={() => setSelectedVersion(version)}
-                     >
-                        v
-                        {version}
-                        {' '}
-                        {version === selectedVersion && <Check className="ml-auto" />}
-                     </DropdownMenuItem>
-                  ))}
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-01/page.tsx b/apps/web/registry/default/block/sidebar-01/page.tsx
deleted file mode 100644
index f16e5d2c..00000000
--- a/apps/web/registry/default/block/sidebar-01/page.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-01/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description
-  = 'A simple sidebar with navigation grouped by section.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">
-                           Building Your Application
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-02/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-02/components/app-sidebar.tsx
deleted file mode 100644
index 567585fc..00000000
--- a/apps/web/registry/default/block/sidebar-02/components/app-sidebar.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import * as React from 'react'
-import { ChevronRight } from 'lucide-react'
-
-import { SearchForm } from '~/registry/default/block/sidebar-02/components/search-form'
-import { VersionSwitcher } from '~/registry/default/block/sidebar-02/components/version-switcher'
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarRail,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Community',
-         url: '#',
-         items: [
-            {
-               title: 'Contribution Guide',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarHeader>
-            <VersionSwitcher
-               versions={data.versions}
-               defaultVersion={data.versions[0]}
-            />
-            <SearchForm />
-         </SidebarHeader>
-         <SidebarContent className="gap-0">
-            {/* We create a collapsible SidebarGroup for each parent. */}
-            {data.navMain.map(item => (
-               <Collapsible
-                  key={item.title}
-                  title={item.title}
-                  defaultOpen
-                  className="group/collapsible"
-               >
-                  <SidebarGroup>
-                     <SidebarGroupLabel
-                        asChild
-                        className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
-                     >
-                        <CollapsibleTrigger>
-                           {item.title}
-                           {' '}
-                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-                        </CollapsibleTrigger>
-                     </SidebarGroupLabel>
-                     <CollapsibleContent>
-                        <SidebarGroupContent>
-                           <SidebarMenu>
-                              {item.items.map(item => (
-                                 <SidebarMenuItem key={item.title}>
-                                    <SidebarMenuButton asChild isActive={item.isActive}>
-                                       <a href={item.url}>{item.title}</a>
-                                    </SidebarMenuButton>
-                                 </SidebarMenuItem>
-                              ))}
-                           </SidebarMenu>
-                        </SidebarGroupContent>
-                     </CollapsibleContent>
-                  </SidebarGroup>
-               </Collapsible>
-            ))}
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-02/components/search-form.tsx b/apps/web/registry/default/block/sidebar-02/components/search-form.tsx
deleted file mode 100644
index 463f7051..00000000
--- a/apps/web/registry/default/block/sidebar-02/components/search-form.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Search } from 'lucide-react'
-
-import { Label } from '~/registry/default/ui/label'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarInput,
-} from '~/registry/default/ui/sidebar'
-
-export function SearchForm({ ...props }: React.ComponentProps<'form'>) {
-   return (
-      <form {...props}>
-         <SidebarGroup className="py-0">
-            <SidebarGroupContent className="relative">
-               <Label htmlFor="search" className="sr-only">
-                  Search
-               </Label>
-               <SidebarInput
-                  id="search"
-                  placeholder="Search the docs..."
-                  className="pl-8"
-               />
-               <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
-            </SidebarGroupContent>
-         </SidebarGroup>
-      </form>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-02/components/version-switcher.tsx b/apps/web/registry/default/block/sidebar-02/components/version-switcher.tsx
deleted file mode 100644
index f08acc0a..00000000
--- a/apps/web/registry/default/block/sidebar-02/components/version-switcher.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/default/ui/sidebar'
-
-export function VersionSwitcher({
-   versions,
-   defaultVersion,
-}: {
-   versions: string[]
-   defaultVersion: string
-}) {
-   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                        <GalleryVerticalEnd className="size-4" />
-                     </div>
-                     <div className="flex flex-col gap-0.5 leading-none">
-                        <span className="font-semibold">Documentation</span>
-                        <span className="">
-                           v
-                           {selectedVersion}
-                        </span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width]"
-                  align="start"
-               >
-                  {versions.map(version => (
-                     <DropdownMenuItem
-                        key={version}
-                        onSelect={() => setSelectedVersion(version)}
-                     >
-                        v
-                        {version}
-                        {' '}
-                        {version === selectedVersion && <Check className="ml-auto" />}
-                     </DropdownMenuItem>
-                  ))}
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-02/page.tsx b/apps/web/registry/default/block/sidebar-02/page.tsx
deleted file mode 100644
index 120adffc..00000000
--- a/apps/web/registry/default/block/sidebar-02/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-02/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar with collapsible sections.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">
-                           Building Your Application
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               {Array.from({ length: 24 }).map((_, index) => (
-                  <div
-                     key={index}
-                     className="bg-muted/50 aspect-video h-12 w-full rounded-lg"
-                  />
-               ))}
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-03/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-03/components/app-sidebar.tsx
deleted file mode 100644
index 797ae3be..00000000
--- a/apps/web/registry/default/block/sidebar-03/components/app-sidebar.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import * as React from 'react'
-import { GalleryVerticalEnd } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-   SidebarRail,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Community',
-         url: '#',
-         items: [
-            {
-               title: 'Contribution Guide',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarHeader>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton size="lg" asChild>
-                     <a href="#">
-                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                           <GalleryVerticalEnd className="size-4" />
-                        </div>
-                        <div className="flex flex-col gap-0.5 leading-none">
-                           <span className="font-semibold">Documentation</span>
-                           <span className="">v1.0.0</span>
-                        </div>
-                     </a>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarHeader>
-         <SidebarContent>
-            <SidebarGroup>
-               <SidebarMenu>
-                  {data.navMain.map(item => (
-                     <SidebarMenuItem key={item.title}>
-                        <SidebarMenuButton asChild>
-                           <a href={item.url} className="font-medium">
-                              {item.title}
-                           </a>
-                        </SidebarMenuButton>
-                        {item.items?.length
-                           ? (
-                                 <SidebarMenuSub>
-                                    {item.items.map(item => (
-                                       <SidebarMenuSubItem key={item.title}>
-                                          <SidebarMenuSubButton asChild isActive={item.isActive}>
-                                             <a href={item.url}>{item.title}</a>
-                                          </SidebarMenuSubButton>
-                                       </SidebarMenuSubItem>
-                                    ))}
-                                 </SidebarMenuSub>
-                              )
-                           : null}
-                     </SidebarMenuItem>
-                  ))}
-               </SidebarMenu>
-            </SidebarGroup>
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-03/page.tsx b/apps/web/registry/default/block/sidebar-03/page.tsx
deleted file mode 100644
index 9020a67f..00000000
--- a/apps/web/registry/default/block/sidebar-03/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-03/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar with submenus.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b">
-               <div className="flex items-center gap-2 px-3">
-                  <SidebarTrigger />
-                  <Separator orientation="vertical" className="mr-2 h-4" />
-                  <Breadcrumb>
-                     <BreadcrumbList>
-                        <BreadcrumbItem className="hidden md:block">
-                           <BreadcrumbLink href="#">
-                              Building Your Application
-                           </BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator className="hidden md:block" />
-                        <BreadcrumbItem>
-                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                        </BreadcrumbItem>
-                     </BreadcrumbList>
-                  </Breadcrumb>
-               </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-04/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-04/components/app-sidebar.tsx
deleted file mode 100644
index ea7f496f..00000000
--- a/apps/web/registry/default/block/sidebar-04/components/app-sidebar.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import * as React from 'react'
-import { GalleryVerticalEnd } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Community',
-         url: '#',
-         items: [
-            {
-               title: 'Contribution Guide',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar variant="floating" {...props}>
-         <SidebarHeader>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton size="lg" asChild>
-                     <a href="#">
-                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                           <GalleryVerticalEnd className="size-4" />
-                        </div>
-                        <div className="flex flex-col gap-0.5 leading-none">
-                           <span className="font-semibold">Documentation</span>
-                           <span className="">v1.0.0</span>
-                        </div>
-                     </a>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarHeader>
-         <SidebarContent>
-            <SidebarGroup>
-               <SidebarMenu className="gap-2">
-                  {data.navMain.map(item => (
-                     <SidebarMenuItem key={item.title}>
-                        <SidebarMenuButton asChild>
-                           <a href={item.url} className="font-medium">
-                              {item.title}
-                           </a>
-                        </SidebarMenuButton>
-                        {item.items?.length
-                           ? (
-                                 <SidebarMenuSub className="ml-0 border-l-0 px-1.5">
-                                    {item.items.map(item => (
-                                       <SidebarMenuSubItem key={item.title}>
-                                          <SidebarMenuSubButton asChild isActive={item.isActive}>
-                                             <a href={item.url}>{item.title}</a>
-                                          </SidebarMenuSubButton>
-                                       </SidebarMenuSubItem>
-                                    ))}
-                                 </SidebarMenuSub>
-                              )
-                           : null}
-                     </SidebarMenuItem>
-                  ))}
-               </SidebarMenu>
-            </SidebarGroup>
-         </SidebarContent>
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-04/page.tsx b/apps/web/registry/default/block/sidebar-04/page.tsx
deleted file mode 100644
index 382c4e59..00000000
--- a/apps/web/registry/default/block/sidebar-04/page.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-04/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A floating sidebar with submenus.'
-
-export default function Page() {
-   return (
-      <SidebarProvider
-         style={
-            {
-               '--sidebar-width': '19rem',
-            } as React.CSSProperties
-         }
-      >
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">
-                           Building Your Application
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-05/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-05/components/app-sidebar.tsx
deleted file mode 100644
index de1a2d7d..00000000
--- a/apps/web/registry/default/block/sidebar-05/components/app-sidebar.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import * as React from 'react'
-import { GalleryVerticalEnd, Minus, Plus } from 'lucide-react'
-
-import { SearchForm } from '~/registry/default/block/sidebar-05/components/search-form'
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-   SidebarRail,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Community',
-         url: '#',
-         items: [
-            {
-               title: 'Contribution Guide',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarHeader>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton size="lg" asChild>
-                     <a href="#">
-                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                           <GalleryVerticalEnd className="size-4" />
-                        </div>
-                        <div className="flex flex-col gap-0.5 leading-none">
-                           <span className="font-semibold">Documentation</span>
-                           <span className="">v1.0.0</span>
-                        </div>
-                     </a>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-            <SearchForm />
-         </SidebarHeader>
-         <SidebarContent>
-            <SidebarGroup>
-               <SidebarMenu>
-                  {data.navMain.map((item, index) => (
-                     <Collapsible
-                        key={item.title}
-                        defaultOpen={index === 1}
-                        className="group/collapsible"
-                     >
-                        <SidebarMenuItem>
-                           <CollapsibleTrigger asChild>
-                              <SidebarMenuButton>
-                                 {item.title}
-                                 {' '}
-                                 <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
-                                 <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
-                              </SidebarMenuButton>
-                           </CollapsibleTrigger>
-                           {item.items?.length
-                              ? (
-                                    <CollapsibleContent>
-                                       <SidebarMenuSub>
-                                          {item.items.map(item => (
-                                             <SidebarMenuSubItem key={item.title}>
-                                                <SidebarMenuSubButton
-                                                   asChild
-                                                   isActive={item.isActive}
-                                                >
-                                                   <a href={item.url}>{item.title}</a>
-                                                </SidebarMenuSubButton>
-                                             </SidebarMenuSubItem>
-                                          ))}
-                                       </SidebarMenuSub>
-                                    </CollapsibleContent>
-                                 )
-                              : null}
-                        </SidebarMenuItem>
-                     </Collapsible>
-                  ))}
-               </SidebarMenu>
-            </SidebarGroup>
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-05/components/search-form.tsx b/apps/web/registry/default/block/sidebar-05/components/search-form.tsx
deleted file mode 100644
index 463f7051..00000000
--- a/apps/web/registry/default/block/sidebar-05/components/search-form.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Search } from 'lucide-react'
-
-import { Label } from '~/registry/default/ui/label'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarInput,
-} from '~/registry/default/ui/sidebar'
-
-export function SearchForm({ ...props }: React.ComponentProps<'form'>) {
-   return (
-      <form {...props}>
-         <SidebarGroup className="py-0">
-            <SidebarGroupContent className="relative">
-               <Label htmlFor="search" className="sr-only">
-                  Search
-               </Label>
-               <SidebarInput
-                  id="search"
-                  placeholder="Search the docs..."
-                  className="pl-8"
-               />
-               <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
-            </SidebarGroupContent>
-         </SidebarGroup>
-      </form>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-05/page.tsx b/apps/web/registry/default/block/sidebar-05/page.tsx
deleted file mode 100644
index 607cd8a3..00000000
--- a/apps/web/registry/default/block/sidebar-05/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-05/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar with collapsible submenus.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">
-                           Building Your Application
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-06/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-06/components/app-sidebar.tsx
deleted file mode 100644
index 6fa653fc..00000000
--- a/apps/web/registry/default/block/sidebar-06/components/app-sidebar.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import * as React from 'react'
-import { GalleryVerticalEnd } from 'lucide-react'
-
-import { NavMain } from '~/registry/default/block/sidebar-06/components/nav-main'
-import { SidebarOptInForm } from '~/registry/default/block/sidebar-06/components/sidebar-opt-in-form'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarRail,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarHeader>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton size="lg" asChild>
-                     <a href="#">
-                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                           <GalleryVerticalEnd className="size-4" />
-                        </div>
-                        <div className="flex flex-col gap-0.5 leading-none">
-                           <span className="font-semibold">Documentation</span>
-                           <span className="">v1.0.0</span>
-                        </div>
-                     </a>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarHeader>
-         <SidebarContent>
-            <NavMain items={data.navMain} />
-         </SidebarContent>
-         <SidebarFooter>
-            <div className="p-1">
-               <SidebarOptInForm />
-            </div>
-         </SidebarFooter>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-06/components/nav-main.tsx b/apps/web/registry/default/block/sidebar-06/components/nav-main.tsx
deleted file mode 100644
index 502b8bd7..00000000
--- a/apps/web/registry/default/block/sidebar-06/components/nav-main.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-
-import { type LucideIcon, MoreHorizontal } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon?: LucideIcon
-      isActive?: boolean
-      items?: {
-         title: string
-         url: string
-      }[]
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup>
-         <SidebarMenu>
-            {items.map(item => (
-               <DropdownMenu key={item.title}>
-                  <SidebarMenuItem>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                           {item.title}
-                           {' '}
-                           <MoreHorizontal className="ml-auto" />
-                        </SidebarMenuButton>
-                     </DropdownMenuTrigger>
-                     {item.items?.length
-                        ? (
-                              <DropdownMenuContent
-                                 side={isMobile ? 'bottom' : 'right'}
-                                 align={isMobile ? 'end' : 'start'}
-                                 className="min-w-56 rounded-lg"
-                              >
-                                 {item.items.map(item => (
-                                    <DropdownMenuItem asChild key={item.title}>
-                                       <a href={item.url}>{item.title}</a>
-                                    </DropdownMenuItem>
-                                 ))}
-                              </DropdownMenuContent>
-                           )
-                        : null}
-                  </SidebarMenuItem>
-               </DropdownMenu>
-            ))}
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/web/registry/default/block/sidebar-06/components/sidebar-opt-in-form.tsx
deleted file mode 100644
index 1439e7bb..00000000
--- a/apps/web/registry/default/block/sidebar-06/components/sidebar-opt-in-form.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { SidebarInput } from '~/registry/default/ui/sidebar'
-
-export function SidebarOptInForm() {
-   return (
-      <Card className="shadow-none">
-         <form>
-            <CardHeader className="p-4 pb-0">
-               <CardTitle className="text-sm">Subscribe to our newsletter</CardTitle>
-               <CardDescription>
-                  Opt-in to receive updates and news about the sidebar.
-               </CardDescription>
-            </CardHeader>
-            <CardContent className="grid gap-2.5 p-4">
-               <SidebarInput type="email" placeholder="Email" />
-               <Button
-                  className="bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none"
-                  size="sm"
-               >
-                  Subscribe
-               </Button>
-            </CardContent>
-         </form>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-06/page.tsx b/apps/web/registry/default/block/sidebar-06/page.tsx
deleted file mode 100644
index d5f4980e..00000000
--- a/apps/web/registry/default/block/sidebar-06/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-06/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar with submenus as dropdowns.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">
-                           Building Your Application
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-07/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-07/components/app-sidebar.tsx
deleted file mode 100644
index 4056cd5b..00000000
--- a/apps/web/registry/default/block/sidebar-07/components/app-sidebar.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   AudioWaveform,
-   BookOpen,
-   Bot,
-   Command,
-   Frame,
-   GalleryVerticalEnd,
-   Map,
-   PieChart,
-   Settings2,
-   SquareTerminal,
-} from 'lucide-react'
-
-import { NavMain } from '~/registry/default/block/sidebar-07/components/nav-main'
-import { NavProjects } from '~/registry/default/block/sidebar-07/components/nav-projects'
-import { NavUser } from '~/registry/default/block/sidebar-07/components/nav-user'
-import { TeamSwitcher } from '~/registry/default/block/sidebar-07/components/team-switcher'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarRail,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   teams: [
-      {
-         name: 'Acme Inc',
-         logo: GalleryVerticalEnd,
-         plan: 'Enterprise',
-      },
-      {
-         name: 'Acme Corp.',
-         logo: AudioWaveform,
-         plan: 'Startup',
-      },
-      {
-         name: 'Evil Corp.',
-         logo: Command,
-         plan: 'Free',
-      },
-   ],
-   navMain: [
-      {
-         title: 'Playground',
-         url: '#',
-         icon: SquareTerminal,
-         isActive: true,
-         items: [
-            {
-               title: 'History',
-               url: '#',
-            },
-            {
-               title: 'Starred',
-               url: '#',
-            },
-            {
-               title: 'Settings',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Models',
-         url: '#',
-         icon: Bot,
-         items: [
-            {
-               title: 'Genesis',
-               url: '#',
-            },
-            {
-               title: 'Explorer',
-               url: '#',
-            },
-            {
-               title: 'Quantum',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Documentation',
-         url: '#',
-         icon: BookOpen,
-         items: [
-            {
-               title: 'Introduction',
-               url: '#',
-            },
-            {
-               title: 'Get Started',
-               url: '#',
-            },
-            {
-               title: 'Tutorials',
-               url: '#',
-            },
-            {
-               title: 'Changelog',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Settings',
-         url: '#',
-         icon: Settings2,
-         items: [
-            {
-               title: 'General',
-               url: '#',
-            },
-            {
-               title: 'Team',
-               url: '#',
-            },
-            {
-               title: 'Billing',
-               url: '#',
-            },
-            {
-               title: 'Limits',
-               url: '#',
-            },
-         ],
-      },
-   ],
-   projects: [
-      {
-         name: 'Design Engineering',
-         url: '#',
-         icon: Frame,
-      },
-      {
-         name: 'Sales & Marketing',
-         url: '#',
-         icon: PieChart,
-      },
-      {
-         name: 'Travel',
-         url: '#',
-         icon: Map,
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar collapsible="icon" {...props}>
-         <SidebarHeader>
-            <TeamSwitcher teams={data.teams} />
-         </SidebarHeader>
-         <SidebarContent>
-            <NavMain items={data.navMain} />
-            <NavProjects projects={data.projects} />
-         </SidebarContent>
-         <SidebarFooter>
-            <NavUser user={data.user} />
-         </SidebarFooter>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-07/components/nav-main.tsx b/apps/web/registry/default/block/sidebar-07/components/nav-main.tsx
deleted file mode 100644
index 93c5febd..00000000
--- a/apps/web/registry/default/block/sidebar-07/components/nav-main.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client'
-
-import { ChevronRight, type LucideIcon } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/default/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon?: LucideIcon
-      isActive?: boolean
-      items?: {
-         title: string
-         url: string
-      }[]
-   }[]
-}) {
-   return (
-      <SidebarGroup>
-         <SidebarGroupLabel>Platform</SidebarGroupLabel>
-         <SidebarMenu>
-            {items.map(item => (
-               <Collapsible
-                  key={item.title}
-                  asChild
-                  defaultOpen={item.isActive}
-                  className="group/collapsible"
-               >
-                  <SidebarMenuItem>
-                     <CollapsibleTrigger asChild>
-                        <SidebarMenuButton tooltip={item.title}>
-                           {item.icon && <item.icon />}
-                           <span>{item.title}</span>
-                           <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                        </SidebarMenuButton>
-                     </CollapsibleTrigger>
-                     <CollapsibleContent>
-                        <SidebarMenuSub>
-                           {item.items?.map(subItem => (
-                              <SidebarMenuSubItem key={subItem.title}>
-                                 <SidebarMenuSubButton asChild>
-                                    <a href={subItem.url}>
-                                       <span>{subItem.title}</span>
-                                    </a>
-                                 </SidebarMenuSubButton>
-                              </SidebarMenuSubItem>
-                           ))}
-                        </SidebarMenuSub>
-                     </CollapsibleContent>
-                  </SidebarMenuItem>
-               </Collapsible>
-            ))}
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-07/components/nav-projects.tsx b/apps/web/registry/default/block/sidebar-07/components/nav-projects.tsx
deleted file mode 100644
index d4a0073e..00000000
--- a/apps/web/registry/default/block/sidebar-07/components/nav-projects.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import {
-   Folder,
-   Forward,
-   type LucideIcon,
-   MoreHorizontal,
-   Trash2,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavProjects({
-   projects,
-}: {
-   projects: {
-      name: string
-      url: string
-      icon: LucideIcon
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-         <SidebarGroupLabel>Projects</SidebarGroupLabel>
-         <SidebarMenu>
-            {projects.map(item => (
-               <SidebarMenuItem key={item.name}>
-                  <SidebarMenuButton asChild>
-                     <a href={item.url}>
-                        <item.icon />
-                        <span>{item.name}</span>
-                     </a>
-                  </SidebarMenuButton>
-                  <DropdownMenu>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover>
-                           <MoreHorizontal />
-                           <span className="sr-only">More</span>
-                        </SidebarMenuAction>
-                     </DropdownMenuTrigger>
-                     <DropdownMenuContent
-                        className="w-48 rounded-lg"
-                        side={isMobile ? 'bottom' : 'right'}
-                        align={isMobile ? 'end' : 'start'}
-                     >
-                        <DropdownMenuItem>
-                           <Folder className="text-muted-foreground" />
-                           <span>View Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <Forward className="text-muted-foreground" />
-                           <span>Share Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Trash2 className="text-muted-foreground" />
-                           <span>Delete Project</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuContent>
-                  </DropdownMenu>
-               </SidebarMenuItem>
-            ))}
-            <SidebarMenuItem>
-               <SidebarMenuButton className="text-sidebar-foreground/70">
-                  <MoreHorizontal className="text-sidebar-foreground/70" />
-                  <span>More</span>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-07/components/nav-user.tsx b/apps/web/registry/default/block/sidebar-07/components/nav-user.tsx
deleted file mode 100644
index 28465fdf..00000000
--- a/apps/web/registry/default/block/sidebar-07/components/nav-user.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="end"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-07/components/team-switcher.tsx b/apps/web/registry/default/block/sidebar-07/components/team-switcher.tsx
deleted file mode 100644
index 196f27e3..00000000
--- a/apps/web/registry/default/block/sidebar-07/components/team-switcher.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronsUpDown, Plus } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function TeamSwitcher({
-   teams,
-}: {
-   teams: {
-      name: string
-      logo: React.ElementType
-      plan: string
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-   const [activeTeam, setActiveTeam] = React.useState(teams[0])
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                        <activeTeam.logo className="size-4" />
-                     </div>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">
-                           {activeTeam.name}
-                        </span>
-                        <span className="truncate text-xs">{activeTeam.plan}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  align="start"
-                  side={isMobile ? 'bottom' : 'right'}
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
-                     Teams
-                  </DropdownMenuLabel>
-                  {teams.map((team, index) => (
-                     <DropdownMenuItem
-                        key={team.name}
-                        onClick={() => setActiveTeam(team)}
-                        className="gap-2 p-2"
-                     >
-                        <div className="flex size-6 items-center justify-center rounded-sm border">
-                           <team.logo className="size-4 shrink-0" />
-                        </div>
-                        {team.name}
-                        <DropdownMenuShortcut>
-                           ⌘
-                           {index + 1}
-                        </DropdownMenuShortcut>
-                     </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="gap-2 p-2">
-                     <div className="bg-background flex size-6 items-center justify-center rounded-md border">
-                        <Plus className="size-4" />
-                     </div>
-                     <div className="text-muted-foreground font-medium">Add team</div>
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-07/page.tsx b/apps/web/registry/default/block/sidebar-07/page.tsx
deleted file mode 100644
index c43c4fca..00000000
--- a/apps/web/registry/default/block/sidebar-07/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-07/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar that collapses to icons.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-               <div className="flex items-center gap-2 px-4">
-                  <SidebarTrigger className="-ml-1" />
-                  <Separator orientation="vertical" className="mr-2 h-4" />
-                  <Breadcrumb>
-                     <BreadcrumbList>
-                        <BreadcrumbItem className="hidden md:block">
-                           <BreadcrumbLink href="#">
-                              Building Your Application
-                           </BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator className="hidden md:block" />
-                        <BreadcrumbItem>
-                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                        </BreadcrumbItem>
-                     </BreadcrumbList>
-                  </Breadcrumb>
-               </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-08/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-08/components/app-sidebar.tsx
deleted file mode 100644
index 875017fd..00000000
--- a/apps/web/registry/default/block/sidebar-08/components/app-sidebar.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   BookOpen,
-   Bot,
-   Command,
-   Frame,
-   LifeBuoy,
-   Map,
-   PieChart,
-   Send,
-   Settings2,
-   SquareTerminal,
-} from 'lucide-react'
-
-import { NavMain } from '~/registry/default/block/sidebar-08/components/nav-main'
-import { NavProjects } from '~/registry/default/block/sidebar-08/components/nav-projects'
-import { NavSecondary } from '~/registry/default/block/sidebar-08/components/nav-secondary'
-import { NavUser } from '~/registry/default/block/sidebar-08/components/nav-user'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/default/ui/sidebar'
-
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   navMain: [
-      {
-         title: 'Playground',
-         url: '#',
-         icon: SquareTerminal,
-         isActive: true,
-         items: [
-            {
-               title: 'History',
-               url: '#',
-            },
-            {
-               title: 'Starred',
-               url: '#',
-            },
-            {
-               title: 'Settings',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Models',
-         url: '#',
-         icon: Bot,
-         items: [
-            {
-               title: 'Genesis',
-               url: '#',
-            },
-            {
-               title: 'Explorer',
-               url: '#',
-            },
-            {
-               title: 'Quantum',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Documentation',
-         url: '#',
-         icon: BookOpen,
-         items: [
-            {
-               title: 'Introduction',
-               url: '#',
-            },
-            {
-               title: 'Get Started',
-               url: '#',
-            },
-            {
-               title: 'Tutorials',
-               url: '#',
-            },
-            {
-               title: 'Changelog',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Settings',
-         url: '#',
-         icon: Settings2,
-         items: [
-            {
-               title: 'General',
-               url: '#',
-            },
-            {
-               title: 'Team',
-               url: '#',
-            },
-            {
-               title: 'Billing',
-               url: '#',
-            },
-            {
-               title: 'Limits',
-               url: '#',
-            },
-         ],
-      },
-   ],
-   navSecondary: [
-      {
-         title: 'Support',
-         url: '#',
-         icon: LifeBuoy,
-      },
-      {
-         title: 'Feedback',
-         url: '#',
-         icon: Send,
-      },
-   ],
-   projects: [
-      {
-         name: 'Design Engineering',
-         url: '#',
-         icon: Frame,
-      },
-      {
-         name: 'Sales & Marketing',
-         url: '#',
-         icon: PieChart,
-      },
-      {
-         name: 'Travel',
-         url: '#',
-         icon: Map,
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar variant="inset" {...props}>
-         <SidebarHeader>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton size="lg" asChild>
-                     <a href="#">
-                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                           <Command className="size-4" />
-                        </div>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">Acme Inc</span>
-                           <span className="truncate text-xs">Enterprise</span>
-                        </div>
-                     </a>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarHeader>
-         <SidebarContent>
-            <NavMain items={data.navMain} />
-            <NavProjects projects={data.projects} />
-            <NavSecondary items={data.navSecondary} className="mt-auto" />
-         </SidebarContent>
-         <SidebarFooter>
-            <NavUser user={data.user} />
-         </SidebarFooter>
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-08/components/nav-main.tsx b/apps/web/registry/default/block/sidebar-08/components/nav-main.tsx
deleted file mode 100644
index ab19423d..00000000
--- a/apps/web/registry/default/block/sidebar-08/components/nav-main.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client'
-
-import { ChevronRight, type LucideIcon } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/default/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon: LucideIcon
-      isActive?: boolean
-      items?: {
-         title: string
-         url: string
-      }[]
-   }[]
-}) {
-   return (
-      <SidebarGroup>
-         <SidebarGroupLabel>Platform</SidebarGroupLabel>
-         <SidebarMenu>
-            {items.map(item => (
-               <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
-                  <SidebarMenuItem>
-                     <SidebarMenuButton asChild tooltip={item.title}>
-                        <a href={item.url}>
-                           <item.icon />
-                           <span>{item.title}</span>
-                        </a>
-                     </SidebarMenuButton>
-                     {item.items?.length
-                        ? (
-                              <>
-                                 <CollapsibleTrigger asChild>
-                                    <SidebarMenuAction className="data-[state=open]:rotate-90">
-                                       <ChevronRight />
-                                       <span className="sr-only">Toggle</span>
-                                    </SidebarMenuAction>
-                                 </CollapsibleTrigger>
-                                 <CollapsibleContent>
-                                    <SidebarMenuSub>
-                                       {item.items?.map(subItem => (
-                                          <SidebarMenuSubItem key={subItem.title}>
-                                             <SidebarMenuSubButton asChild>
-                                                <a href={subItem.url}>
-                                                   <span>{subItem.title}</span>
-                                                </a>
-                                             </SidebarMenuSubButton>
-                                          </SidebarMenuSubItem>
-                                       ))}
-                                    </SidebarMenuSub>
-                                 </CollapsibleContent>
-                              </>
-                           )
-                        : null}
-                  </SidebarMenuItem>
-               </Collapsible>
-            ))}
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-08/components/nav-projects.tsx b/apps/web/registry/default/block/sidebar-08/components/nav-projects.tsx
deleted file mode 100644
index a1367117..00000000
--- a/apps/web/registry/default/block/sidebar-08/components/nav-projects.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import {
-   Folder,
-   type LucideIcon,
-   MoreHorizontal,
-   Share,
-   Trash2,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavProjects({
-   projects,
-}: {
-   projects: {
-      name: string
-      url: string
-      icon: LucideIcon
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-         <SidebarGroupLabel>Projects</SidebarGroupLabel>
-         <SidebarMenu>
-            {projects.map(item => (
-               <SidebarMenuItem key={item.name}>
-                  <SidebarMenuButton asChild>
-                     <a href={item.url}>
-                        <item.icon />
-                        <span>{item.name}</span>
-                     </a>
-                  </SidebarMenuButton>
-                  <DropdownMenu>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover>
-                           <MoreHorizontal />
-                           <span className="sr-only">More</span>
-                        </SidebarMenuAction>
-                     </DropdownMenuTrigger>
-                     <DropdownMenuContent
-                        className="w-48"
-                        side={isMobile ? 'bottom' : 'right'}
-                        align={isMobile ? 'end' : 'start'}
-                     >
-                        <DropdownMenuItem>
-                           <Folder className="text-muted-foreground" />
-                           <span>View Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <Share className="text-muted-foreground" />
-                           <span>Share Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Trash2 className="text-muted-foreground" />
-                           <span>Delete Project</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuContent>
-                  </DropdownMenu>
-               </SidebarMenuItem>
-            ))}
-            <SidebarMenuItem>
-               <SidebarMenuButton>
-                  <MoreHorizontal />
-                  <span>More</span>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-08/components/nav-secondary.tsx b/apps/web/registry/default/block/sidebar-08/components/nav-secondary.tsx
deleted file mode 100644
index 434a6daf..00000000
--- a/apps/web/registry/default/block/sidebar-08/components/nav-secondary.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from 'react'
-import type { LucideIcon } from 'lucide-react'
-
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/default/ui/sidebar'
-
-export function NavSecondary({
-   items,
-   ...props
-}: {
-   items: {
-      title: string
-      url: string
-      icon: LucideIcon
-   }[]
-} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
-   return (
-      <SidebarGroup {...props}>
-         <SidebarGroupContent>
-            <SidebarMenu>
-               {items.map(item => (
-                  <SidebarMenuItem key={item.title}>
-                     <SidebarMenuButton asChild size="sm">
-                        <a href={item.url}>
-                           <item.icon />
-                           <span>{item.title}</span>
-                        </a>
-                     </SidebarMenuButton>
-                  </SidebarMenuItem>
-               ))}
-            </SidebarMenu>
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-08/components/nav-user.tsx b/apps/web/registry/default/block/sidebar-08/components/nav-user.tsx
deleted file mode 100644
index 28465fdf..00000000
--- a/apps/web/registry/default/block/sidebar-08/components/nav-user.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="end"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-08/page.tsx b/apps/web/registry/default/block/sidebar-08/page.tsx
deleted file mode 100644
index fe53ea0f..00000000
--- a/apps/web/registry/default/block/sidebar-08/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-08/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'An inset sidebar with secondary navigation.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2">
-               <div className="flex items-center gap-2 px-4">
-                  <SidebarTrigger className="-ml-1" />
-                  <Separator orientation="vertical" className="mr-2 h-4" />
-                  <Breadcrumb>
-                     <BreadcrumbList>
-                        <BreadcrumbItem className="hidden md:block">
-                           <BreadcrumbLink href="#">
-                              Building Your Application
-                           </BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator className="hidden md:block" />
-                        <BreadcrumbItem>
-                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                        </BreadcrumbItem>
-                     </BreadcrumbList>
-                  </Breadcrumb>
-               </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-09/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-09/components/app-sidebar.tsx
deleted file mode 100644
index 7fa96601..00000000
--- a/apps/web/registry/default/block/sidebar-09/components/app-sidebar.tsx
+++ /dev/null
@@ -1,263 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-react'
-
-import { NavUser } from '~/registry/default/block/sidebar-09/components/nav-user'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarHeader,
-   SidebarInput,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-import { Switch } from '~/registry/default/ui/switch'
-
-// This is sample data
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   navMain: [
-      {
-         title: 'Inbox',
-         url: '#',
-         icon: Inbox,
-         isActive: true,
-      },
-      {
-         title: 'Drafts',
-         url: '#',
-         icon: File,
-         isActive: false,
-      },
-      {
-         title: 'Sent',
-         url: '#',
-         icon: Send,
-         isActive: false,
-      },
-      {
-         title: 'Junk',
-         url: '#',
-         icon: ArchiveX,
-         isActive: false,
-      },
-      {
-         title: 'Trash',
-         url: '#',
-         icon: Trash2,
-         isActive: false,
-      },
-   ],
-   mails: [
-      {
-         name: 'William Smith',
-         email: 'williamsmith@example.com',
-         subject: 'Meeting Tomorrow',
-         date: '09:34 AM',
-         teaser:
-        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.',
-      },
-      {
-         name: 'Alice Smith',
-         email: 'alicesmith@example.com',
-         subject: 'Re: Project Update',
-         date: 'Yesterday',
-         teaser:
-        'Thanks for the update. The progress looks great so far.\nLet\'s schedule a call to discuss the next steps.',
-      },
-      {
-         name: 'Bob Johnson',
-         email: 'bobjohnson@example.com',
-         subject: 'Weekend Plans',
-         date: '2 days ago',
-         teaser:
-        'Hey everyone! I\'m thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?',
-      },
-      {
-         name: 'Emily Davis',
-         email: 'emilydavis@example.com',
-         subject: 'Re: Question about Budget',
-         date: '2 days ago',
-         teaser:
-        'I\'ve reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?',
-      },
-      {
-         name: 'Michael Wilson',
-         email: 'michaelwilson@example.com',
-         subject: 'Important Announcement',
-         date: '1 week ago',
-         teaser:
-        'Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company\'s future.',
-      },
-      {
-         name: 'Sarah Brown',
-         email: 'sarahbrown@example.com',
-         subject: 'Re: Feedback on Proposal',
-         date: '1 week ago',
-         teaser:
-        'Thank you for sending over the proposal. I\'ve reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?',
-      },
-      {
-         name: 'David Lee',
-         email: 'davidlee@example.com',
-         subject: 'New Project Idea',
-         date: '1 week ago',
-         teaser:
-        'I\'ve been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?',
-      },
-      {
-         name: 'Olivia Wilson',
-         email: 'oliviawilson@example.com',
-         subject: 'Vacation Plans',
-         date: '1 week ago',
-         teaser:
-        'Just a heads up that I\'ll be taking a two-week vacation next month.\nI\'ll make sure all my projects are up to date before I leave.',
-      },
-      {
-         name: 'James Martin',
-         email: 'jamesmartin@example.com',
-         subject: 'Re: Conference Registration',
-         date: '1 week ago',
-         teaser:
-        'I\'ve completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.',
-      },
-      {
-         name: 'Sophia White',
-         email: 'sophiawhite@example.com',
-         subject: 'Team Dinner',
-         date: '1 week ago',
-         teaser:
-        'To celebrate our recent project success, I\'d like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.',
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   // Note: I'm using state to show active item.
-   // IRL you should use the url/router.
-   const [activeItem, setActiveItem] = React.useState(data.navMain[0])
-   const [mails, setMails] = React.useState(data.mails)
-   const { setOpen } = useSidebar()
-
-   return (
-      <Sidebar
-         collapsible="icon"
-         className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row"
-         {...props}
-      >
-         {/* This is the first sidebar */}
-         {/* We disable collapsible and adjust width to icon. */}
-         {/* This will make the sidebar appear as icons. */}
-         <Sidebar
-            collapsible="none"
-            className="!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r"
-         >
-            <SidebarHeader>
-               <SidebarMenu>
-                  <SidebarMenuItem>
-                     <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
-                        <a href="#">
-                           <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                              <Command className="size-4" />
-                           </div>
-                           <div className="grid flex-1 text-left text-sm leading-tight">
-                              <span className="truncate font-semibold">Acme Inc</span>
-                              <span className="truncate text-xs">Enterprise</span>
-                           </div>
-                        </a>
-                     </SidebarMenuButton>
-                  </SidebarMenuItem>
-               </SidebarMenu>
-            </SidebarHeader>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupContent className="px-1.5 md:px-0">
-                     <SidebarMenu>
-                        {data.navMain.map(item => (
-                           <SidebarMenuItem key={item.title}>
-                              <SidebarMenuButton
-                                 tooltip={{
-                                    children: item.title,
-                                    hidden: false,
-                                 }}
-                                 onClick={() => {
-                                    setActiveItem(item)
-                                    const mail = data.mails.sort(() => Math.random() - 0.5)
-                                    setMails(
-                                       mail.slice(
-                                          0,
-                                          Math.max(5, Math.floor(Math.random() * 10) + 1),
-                                       ),
-                                    )
-                                    setOpen(true)
-                                 }}
-                                 isActive={activeItem.title === item.title}
-                                 className="px-2.5 md:px-2"
-                              >
-                                 <item.icon />
-                                 <span>{item.title}</span>
-                              </SidebarMenuButton>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-            <SidebarFooter>
-               <NavUser user={data.user} />
-            </SidebarFooter>
-         </Sidebar>
-
-         {/* This is the second sidebar */}
-         {/* We disable collapsible and let it fill remaining space */}
-         <Sidebar collapsible="none" className="hidden flex-1 md:flex">
-            <SidebarHeader className="gap-3.5 border-b p-4">
-               <div className="flex w-full items-center justify-between">
-                  <div className="text-foreground text-base font-medium">
-                     {activeItem.title}
-                  </div>
-                  <Label className="flex items-center gap-2 text-sm">
-                     <span>Unreads</span>
-                     <Switch className="shadow-none" />
-                  </Label>
-               </div>
-               <SidebarInput placeholder="Type to search..." />
-            </SidebarHeader>
-            <SidebarContent>
-               <SidebarGroup className="px-0">
-                  <SidebarGroupContent>
-                     {mails.map(mail => (
-                        <a
-                           href="#"
-                           key={mail.email}
-                           className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0"
-                        >
-                           <div className="flex w-full items-center gap-2">
-                              <span>{mail.name}</span>
-                              {' '}
-                              <span className="ml-auto text-xs">{mail.date}</span>
-                           </div>
-                           <span className="font-medium">{mail.subject}</span>
-                           <span className="line-clamp-2 w-[260px] whitespace-break-spaces text-xs">
-                              {mail.teaser}
-                           </span>
-                        </a>
-                     ))}
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-09/components/nav-user.tsx b/apps/web/registry/default/block/sidebar-09/components/nav-user.tsx
deleted file mode 100644
index 2826309d..00000000
--- a/apps/web/registry/default/block/sidebar-09/components/nav-user.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="end"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-09/page.tsx b/apps/web/registry/default/block/sidebar-09/page.tsx
deleted file mode 100644
index 0c1bd58b..00000000
--- a/apps/web/registry/default/block/sidebar-09/page.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-09/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'Collapsible nested sidebars.'
-
-export default function Page() {
-   return (
-      <SidebarProvider
-         style={
-            {
-               '--sidebar-width': '350px',
-            } as React.CSSProperties
-         }
-      >
-         <AppSidebar />
-         <SidebarInset>
-            <header className="bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Inbox</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               {Array.from({ length: 24 }).map((_, index) => (
-                  <div
-                     key={index}
-                     className="bg-muted/50 aspect-video h-12 w-full rounded-lg"
-                  />
-               ))}
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-10/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-10/components/app-sidebar.tsx
deleted file mode 100644
index 4be1788e..00000000
--- a/apps/web/registry/default/block/sidebar-10/components/app-sidebar.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   AudioWaveform,
-   Blocks,
-   Calendar,
-   Command,
-   Home,
-   Inbox,
-   MessageCircleQuestion,
-   Search,
-   Settings2,
-   Sparkles,
-   Trash2,
-} from 'lucide-react'
-
-import { NavFavorites } from '~/registry/default/block/sidebar-10/components/nav-favorites'
-import { NavMain } from '~/registry/default/block/sidebar-10/components/nav-main'
-import { NavSecondary } from '~/registry/default/block/sidebar-10/components/nav-secondary'
-import { NavWorkspaces } from '~/registry/default/block/sidebar-10/components/nav-workspaces'
-import { TeamSwitcher } from '~/registry/default/block/sidebar-10/components/team-switcher'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarHeader,
-   SidebarRail,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   teams: [
-      {
-         name: 'Acme Inc',
-         logo: Command,
-         plan: 'Enterprise',
-      },
-      {
-         name: 'Acme Corp.',
-         logo: AudioWaveform,
-         plan: 'Startup',
-      },
-      {
-         name: 'Evil Corp.',
-         logo: Command,
-         plan: 'Free',
-      },
-   ],
-   navMain: [
-      {
-         title: 'Search',
-         url: '#',
-         icon: Search,
-      },
-      {
-         title: 'Ask AI',
-         url: '#',
-         icon: Sparkles,
-      },
-      {
-         title: 'Home',
-         url: '#',
-         icon: Home,
-         isActive: true,
-      },
-      {
-         title: 'Inbox',
-         url: '#',
-         icon: Inbox,
-         badge: '10',
-      },
-   ],
-   navSecondary: [
-      {
-         title: 'Calendar',
-         url: '#',
-         icon: Calendar,
-      },
-      {
-         title: 'Settings',
-         url: '#',
-         icon: Settings2,
-      },
-      {
-         title: 'Templates',
-         url: '#',
-         icon: Blocks,
-      },
-      {
-         title: 'Trash',
-         url: '#',
-         icon: Trash2,
-      },
-      {
-         title: 'Help',
-         url: '#',
-         icon: MessageCircleQuestion,
-      },
-   ],
-   favorites: [
-      {
-         name: 'Project Management & Task Tracking',
-         url: '#',
-         emoji: '📊',
-      },
-      {
-         name: 'Family Recipe Collection & Meal Planning',
-         url: '#',
-         emoji: '🍳',
-      },
-      {
-         name: 'Fitness Tracker & Workout Routines',
-         url: '#',
-         emoji: '💪',
-      },
-      {
-         name: 'Book Notes & Reading List',
-         url: '#',
-         emoji: '📚',
-      },
-      {
-         name: 'Sustainable Gardening Tips & Plant Care',
-         url: '#',
-         emoji: '🌱',
-      },
-      {
-         name: 'Language Learning Progress & Resources',
-         url: '#',
-         emoji: '🗣️',
-      },
-      {
-         name: 'Home Renovation Ideas & Budget Tracker',
-         url: '#',
-         emoji: '🏠',
-      },
-      {
-         name: 'Personal Finance & Investment Portfolio',
-         url: '#',
-         emoji: '💰',
-      },
-      {
-         name: 'Movie & TV Show Watchlist with Reviews',
-         url: '#',
-         emoji: '🎬',
-      },
-      {
-         name: 'Daily Habit Tracker & Goal Setting',
-         url: '#',
-         emoji: '✅',
-      },
-   ],
-   workspaces: [
-      {
-         name: 'Personal Life Management',
-         emoji: '🏠',
-         pages: [
-            {
-               name: 'Daily Journal & Reflection',
-               url: '#',
-               emoji: '📔',
-            },
-            {
-               name: 'Health & Wellness Tracker',
-               url: '#',
-               emoji: '🍏',
-            },
-            {
-               name: 'Personal Growth & Learning Goals',
-               url: '#',
-               emoji: '🌟',
-            },
-         ],
-      },
-      {
-         name: 'Professional Development',
-         emoji: '💼',
-         pages: [
-            {
-               name: 'Career Objectives & Milestones',
-               url: '#',
-               emoji: '🎯',
-            },
-            {
-               name: 'Skill Acquisition & Training Log',
-               url: '#',
-               emoji: '🧠',
-            },
-            {
-               name: 'Networking Contacts & Events',
-               url: '#',
-               emoji: '🤝',
-            },
-         ],
-      },
-      {
-         name: 'Creative Projects',
-         emoji: '🎨',
-         pages: [
-            {
-               name: 'Writing Ideas & Story Outlines',
-               url: '#',
-               emoji: '✍️',
-            },
-            {
-               name: 'Art & Design Portfolio',
-               url: '#',
-               emoji: '🖼️',
-            },
-            {
-               name: 'Music Composition & Practice Log',
-               url: '#',
-               emoji: '🎵',
-            },
-         ],
-      },
-      {
-         name: 'Home Management',
-         emoji: '🏡',
-         pages: [
-            {
-               name: 'Household Budget & Expense Tracking',
-               url: '#',
-               emoji: '💰',
-            },
-            {
-               name: 'Home Maintenance Schedule & Tasks',
-               url: '#',
-               emoji: '🔧',
-            },
-            {
-               name: 'Family Calendar & Event Planning',
-               url: '#',
-               emoji: '📅',
-            },
-         ],
-      },
-      {
-         name: 'Travel & Adventure',
-         emoji: '🧳',
-         pages: [
-            {
-               name: 'Trip Planning & Itineraries',
-               url: '#',
-               emoji: '🗺️',
-            },
-            {
-               name: 'Travel Bucket List & Inspiration',
-               url: '#',
-               emoji: '🌎',
-            },
-            {
-               name: 'Travel Journal & Photo Gallery',
-               url: '#',
-               emoji: '📸',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar className="border-r-0" {...props}>
-         <SidebarHeader>
-            <TeamSwitcher teams={data.teams} />
-            <NavMain items={data.navMain} />
-         </SidebarHeader>
-         <SidebarContent>
-            <NavFavorites favorites={data.favorites} />
-            <NavWorkspaces workspaces={data.workspaces} />
-            <NavSecondary items={data.navSecondary} className="mt-auto" />
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-10/components/nav-actions.tsx b/apps/web/registry/default/block/sidebar-10/components/nav-actions.tsx
deleted file mode 100644
index 0bcc26f0..00000000
--- a/apps/web/registry/default/block/sidebar-10/components/nav-actions.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   ArrowDown,
-   ArrowUp,
-   Bell,
-   Copy,
-   CornerUpLeft,
-   CornerUpRight,
-   FileText,
-   GalleryVerticalEnd,
-   LineChart,
-   Link,
-   MoreHorizontal,
-   Settings2,
-   Star,
-   Trash,
-   Trash2,
-} from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/default/ui/sidebar'
-
-const data = [
-   [
-      {
-         label: 'Customize Page',
-         icon: Settings2,
-      },
-      {
-         label: 'Turn into wiki',
-         icon: FileText,
-      },
-   ],
-   [
-      {
-         label: 'Copy Link',
-         icon: Link,
-      },
-      {
-         label: 'Duplicate',
-         icon: Copy,
-      },
-      {
-         label: 'Move to',
-         icon: CornerUpRight,
-      },
-      {
-         label: 'Move to Trash',
-         icon: Trash2,
-      },
-   ],
-   [
-      {
-         label: 'Undo',
-         icon: CornerUpLeft,
-      },
-      {
-         label: 'View analytics',
-         icon: LineChart,
-      },
-      {
-         label: 'Version History',
-         icon: GalleryVerticalEnd,
-      },
-      {
-         label: 'Show delete pages',
-         icon: Trash,
-      },
-      {
-         label: 'Notifications',
-         icon: Bell,
-      },
-   ],
-   [
-      {
-         label: 'Import',
-         icon: ArrowUp,
-      },
-      {
-         label: 'Export',
-         icon: ArrowDown,
-      },
-   ],
-]
-
-export function NavActions() {
-   const [isOpen, setIsOpen] = React.useState(false)
-
-   React.useEffect(() => {
-      setIsOpen(true)
-   }, [])
-
-   return (
-      <div className="flex items-center gap-2 text-sm">
-         <div className="text-muted-foreground hidden font-medium md:inline-block">
-            Edit Oct 08
-         </div>
-         <Button variant="ghost" size="icon" className="size-7">
-            <Star />
-         </Button>
-         <Popover open={isOpen} onOpenChange={setIsOpen}>
-            <PopoverTrigger asChild>
-               <Button
-                  variant="ghost"
-                  size="icon"
-                  className="data-[state=open]:bg-accent size-7"
-               >
-                  <MoreHorizontal />
-               </Button>
-            </PopoverTrigger>
-            <PopoverContent
-               className="w-56 overflow-hidden rounded-lg p-0"
-               align="end"
-            >
-               <Sidebar collapsible="none" className="bg-transparent">
-                  <SidebarContent>
-                     {data.map((group, index) => (
-                        <SidebarGroup key={index} className="border-b last:border-none">
-                           <SidebarGroupContent className="gap-0">
-                              <SidebarMenu>
-                                 {group.map((item, index) => (
-                                    <SidebarMenuItem key={index}>
-                                       <SidebarMenuButton>
-                                          <item.icon />
-                                          {' '}
-                                          <span>{item.label}</span>
-                                       </SidebarMenuButton>
-                                    </SidebarMenuItem>
-                                 ))}
-                              </SidebarMenu>
-                           </SidebarGroupContent>
-                        </SidebarGroup>
-                     ))}
-                  </SidebarContent>
-               </Sidebar>
-            </PopoverContent>
-         </Popover>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-10/components/nav-favorites.tsx b/apps/web/registry/default/block/sidebar-10/components/nav-favorites.tsx
deleted file mode 100644
index db474a23..00000000
--- a/apps/web/registry/default/block/sidebar-10/components/nav-favorites.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import {
-   ArrowUpRight,
-   Link,
-   MoreHorizontal,
-   StarOff,
-   Trash2,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavFavorites({
-   favorites,
-}: {
-   favorites: {
-      name: string
-      url: string
-      emoji: string
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-         <SidebarGroupLabel>Favorites</SidebarGroupLabel>
-         <SidebarMenu>
-            {favorites.map(item => (
-               <SidebarMenuItem key={item.name}>
-                  <SidebarMenuButton asChild>
-                     <a href={item.url} title={item.name}>
-                        <span>{item.emoji}</span>
-                        <span>{item.name}</span>
-                     </a>
-                  </SidebarMenuButton>
-                  <DropdownMenu>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover>
-                           <MoreHorizontal />
-                           <span className="sr-only">More</span>
-                        </SidebarMenuAction>
-                     </DropdownMenuTrigger>
-                     <DropdownMenuContent
-                        className="w-56 rounded-lg"
-                        side={isMobile ? 'bottom' : 'right'}
-                        align={isMobile ? 'end' : 'start'}
-                     >
-                        <DropdownMenuItem>
-                           <StarOff className="text-muted-foreground" />
-                           <span>Remove from Favorites</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Link className="text-muted-foreground" />
-                           <span>Copy Link</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <ArrowUpRight className="text-muted-foreground" />
-                           <span>Open in New Tab</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Trash2 className="text-muted-foreground" />
-                           <span>Delete</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuContent>
-                  </DropdownMenu>
-               </SidebarMenuItem>
-            ))}
-            <SidebarMenuItem>
-               <SidebarMenuButton className="text-sidebar-foreground/70">
-                  <MoreHorizontal />
-                  <span>More</span>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-10/components/nav-main.tsx b/apps/web/registry/default/block/sidebar-10/components/nav-main.tsx
deleted file mode 100644
index ded3e56e..00000000
--- a/apps/web/registry/default/block/sidebar-10/components/nav-main.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-import type { LucideIcon } from 'lucide-react'
-
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/default/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon: LucideIcon
-      isActive?: boolean
-   }[]
-}) {
-   return (
-      <SidebarMenu>
-         {items.map(item => (
-            <SidebarMenuItem key={item.title}>
-               <SidebarMenuButton asChild isActive={item.isActive}>
-                  <a href={item.url}>
-                     <item.icon />
-                     <span>{item.title}</span>
-                  </a>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         ))}
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-10/components/nav-secondary.tsx b/apps/web/registry/default/block/sidebar-10/components/nav-secondary.tsx
deleted file mode 100644
index 59e5d724..00000000
--- a/apps/web/registry/default/block/sidebar-10/components/nav-secondary.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react'
-import type { LucideIcon } from 'lucide-react'
-
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarMenu,
-   SidebarMenuBadge,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/default/ui/sidebar'
-
-export function NavSecondary({
-   items,
-   ...props
-}: {
-   items: {
-      title: string
-      url: string
-      icon: LucideIcon
-      badge?: React.ReactNode
-   }[]
-} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
-   return (
-      <SidebarGroup {...props}>
-         <SidebarGroupContent>
-            <SidebarMenu>
-               {items.map(item => (
-                  <SidebarMenuItem key={item.title}>
-                     <SidebarMenuButton asChild>
-                        <a href={item.url}>
-                           <item.icon />
-                           <span>{item.title}</span>
-                        </a>
-                     </SidebarMenuButton>
-                     {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
-                  </SidebarMenuItem>
-               ))}
-            </SidebarMenu>
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-10/components/nav-workspaces.tsx b/apps/web/registry/default/block/sidebar-10/components/nav-workspaces.tsx
deleted file mode 100644
index 20b960ba..00000000
--- a/apps/web/registry/default/block/sidebar-10/components/nav-workspaces.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/default/ui/sidebar'
-
-export function NavWorkspaces({
-   workspaces,
-}: {
-   workspaces: {
-      name: string
-      emoji: React.ReactNode
-      pages: {
-         name: string
-         emoji: React.ReactNode
-      }[]
-   }[]
-}) {
-   return (
-      <SidebarGroup>
-         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
-         <SidebarGroupContent>
-            <SidebarMenu>
-               {workspaces.map(workspace => (
-                  <Collapsible key={workspace.name}>
-                     <SidebarMenuItem>
-                        <SidebarMenuButton asChild>
-                           <a href="#">
-                              <span>{workspace.emoji}</span>
-                              <span>{workspace.name}</span>
-                           </a>
-                        </SidebarMenuButton>
-                        <CollapsibleTrigger asChild>
-                           <SidebarMenuAction
-                              className="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90"
-                              showOnHover
-                           >
-                              <ChevronRight />
-                           </SidebarMenuAction>
-                        </CollapsibleTrigger>
-                        <SidebarMenuAction showOnHover>
-                           <Plus />
-                        </SidebarMenuAction>
-                        <CollapsibleContent>
-                           <SidebarMenuSub>
-                              {workspace.pages.map(page => (
-                                 <SidebarMenuSubItem key={page.name}>
-                                    <SidebarMenuSubButton asChild>
-                                       <a href="#">
-                                          <span>{page.emoji}</span>
-                                          <span>{page.name}</span>
-                                       </a>
-                                    </SidebarMenuSubButton>
-                                 </SidebarMenuSubItem>
-                              ))}
-                           </SidebarMenuSub>
-                        </CollapsibleContent>
-                     </SidebarMenuItem>
-                  </Collapsible>
-               ))}
-               <SidebarMenuItem>
-                  <SidebarMenuButton className="text-sidebar-foreground/70">
-                     <MoreHorizontal />
-                     <span>More</span>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-10/components/team-switcher.tsx b/apps/web/registry/default/block/sidebar-10/components/team-switcher.tsx
deleted file mode 100644
index 9b7d76c4..00000000
--- a/apps/web/registry/default/block/sidebar-10/components/team-switcher.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronDown, Plus } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/default/ui/sidebar'
-
-export function TeamSwitcher({
-   teams,
-}: {
-   teams: {
-      name: string
-      logo: React.ElementType
-      plan: string
-   }[]
-}) {
-   const [activeTeam, setActiveTeam] = React.useState(teams[0])
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton className="w-fit px-1.5">
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
-                        <activeTeam.logo className="size-3" />
-                     </div>
-                     <span className="truncate font-semibold">{activeTeam.name}</span>
-                     <ChevronDown className="opacity-50" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-64 rounded-lg"
-                  align="start"
-                  side="bottom"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
-                     Teams
-                  </DropdownMenuLabel>
-                  {teams.map((team, index) => (
-                     <DropdownMenuItem
-                        key={team.name}
-                        onClick={() => setActiveTeam(team)}
-                        className="gap-2 p-2"
-                     >
-                        <div className="flex size-6 items-center justify-center rounded-sm border">
-                           <team.logo className="size-4 shrink-0" />
-                        </div>
-                        {team.name}
-                        <DropdownMenuShortcut>
-                           ⌘
-                           {index + 1}
-                        </DropdownMenuShortcut>
-                     </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="gap-2 p-2">
-                     <div className="bg-background flex size-6 items-center justify-center rounded-md border">
-                        <Plus className="size-4" />
-                     </div>
-                     <div className="text-muted-foreground font-medium">Add team</div>
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-10/page.tsx b/apps/web/registry/default/block/sidebar-10/page.tsx
deleted file mode 100644
index e45be572..00000000
--- a/apps/web/registry/default/block/sidebar-10/page.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-10/components/app-sidebar'
-import { NavActions } from '~/registry/default/block/sidebar-10/components/nav-actions'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbList,
-   BreadcrumbPage,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar in a popover.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-14 shrink-0 items-center gap-2">
-               <div className="flex flex-1 items-center gap-2 px-3">
-                  <SidebarTrigger />
-                  <Separator orientation="vertical" className="mr-2 h-4" />
-                  <Breadcrumb>
-                     <BreadcrumbList>
-                        <BreadcrumbItem>
-                           <BreadcrumbPage className="line-clamp-1">
-                              Project Management & Task Tracking
-                           </BreadcrumbPage>
-                        </BreadcrumbItem>
-                     </BreadcrumbList>
-                  </Breadcrumb>
-               </div>
-               <div className="ml-auto px-3">
-                  <NavActions />
-               </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 px-4 py-10">
-               <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
-               <div className="bg-muted/50 mx-auto size-full max-w-3xl rounded-xl" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-11/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-11/components/app-sidebar.tsx
deleted file mode 100644
index 55c2c42e..00000000
--- a/apps/web/registry/default/block/sidebar-11/components/app-sidebar.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import * as React from 'react'
-import { ChevronRight, File, Folder } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuBadge,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarRail,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   changes: [
-      {
-         file: 'README.md',
-         state: 'M',
-      },
-      {
-         file: 'api/hello/route.ts',
-         state: 'U',
-      },
-      {
-         file: 'app/layout.tsx',
-         state: 'M',
-      },
-   ],
-   tree: [
-      [
-         'app',
-         [
-            'api',
-            ['hello', ['route.ts']],
-            'page.tsx',
-            'layout.tsx',
-            ['blog', ['page.tsx']],
-         ],
-      ],
-      [
-         'components',
-         ['ui', 'button.tsx', 'card.tsx'],
-         'header.tsx',
-         'footer.tsx',
-      ],
-      ['lib', ['util.ts']],
-      ['public', 'favicon.ico', 'vercel.svg'],
-      '.eslintrc.json',
-      '.gitignore',
-      'next.config.js',
-      'tailwind.config.js',
-      'package.json',
-      'README.md',
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarContent>
-            <SidebarGroup>
-               <SidebarGroupLabel>Changes</SidebarGroupLabel>
-               <SidebarGroupContent>
-                  <SidebarMenu>
-                     {data.changes.map((item, index) => (
-                        <SidebarMenuItem key={index}>
-                           <SidebarMenuButton>
-                              <File />
-                              {item.file}
-                           </SidebarMenuButton>
-                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>
-                        </SidebarMenuItem>
-                     ))}
-                  </SidebarMenu>
-               </SidebarGroupContent>
-            </SidebarGroup>
-            <SidebarGroup>
-               <SidebarGroupLabel>Files</SidebarGroupLabel>
-               <SidebarGroupContent>
-                  <SidebarMenu>
-                     {data.tree.map((item, index) => (
-                        <Tree key={index} item={item} />
-                     ))}
-                  </SidebarMenu>
-               </SidebarGroupContent>
-            </SidebarGroup>
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
-
-function Tree({ item }: { item: string | any[] }) {
-   const [name, ...items] = Array.isArray(item) ? item : [item]
-
-   if (!items.length) {
-      return (
-         <SidebarMenuButton
-            isActive={name === 'button.tsx'}
-            className="data-[active=true]:bg-transparent"
-         >
-            <File />
-            {name}
-         </SidebarMenuButton>
-      )
-   }
-
-   return (
-      <SidebarMenuItem>
-         <Collapsible
-            className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
-            defaultOpen={name === 'components' || name === 'ui'}
-         >
-            <CollapsibleTrigger asChild>
-               <SidebarMenuButton>
-                  <ChevronRight className="transition-transform" />
-                  <Folder />
-                  {name}
-               </SidebarMenuButton>
-            </CollapsibleTrigger>
-            <CollapsibleContent>
-               <SidebarMenuSub>
-                  {items.map((subItem, index) => (
-                     <Tree key={index} item={subItem} />
-                  ))}
-               </SidebarMenuSub>
-            </CollapsibleContent>
-         </Collapsible>
-      </SidebarMenuItem>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-11/page.tsx b/apps/web/registry/default/block/sidebar-11/page.tsx
deleted file mode 100644
index 0332aaa8..00000000
--- a/apps/web/registry/default/block/sidebar-11/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-11/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar with a collapsible file tree.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">components</BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">ui</BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>button.tsx</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-12/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-12/components/app-sidebar.tsx
deleted file mode 100644
index 05ee9a48..00000000
--- a/apps/web/registry/default/block/sidebar-12/components/app-sidebar.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react'
-import { Plus } from 'lucide-react'
-
-import { Calendars } from '~/registry/default/block/sidebar-12/components/calendars'
-import { DatePicker } from '~/registry/default/block/sidebar-12/components/date-picker'
-import { NavUser } from '~/registry/default/block/sidebar-12/components/nav-user'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarRail,
-   SidebarSeparator,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   calendars: [
-      {
-         name: 'My Calendars',
-         items: ['Personal', 'Work', 'Family'],
-      },
-      {
-         name: 'Favorites',
-         items: ['Holidays', 'Birthdays'],
-      },
-      {
-         name: 'Other',
-         items: ['Travel', 'Reminders', 'Deadlines'],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarHeader className="border-sidebar-border h-16 border-b">
-            <NavUser user={data.user} />
-         </SidebarHeader>
-         <SidebarContent>
-            <DatePicker />
-            <SidebarSeparator className="mx-0" />
-            <Calendars calendars={data.calendars} />
-         </SidebarContent>
-         <SidebarFooter>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton>
-                     <Plus />
-                     <span>New Calendar</span>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarFooter>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-12/components/calendars.tsx b/apps/web/registry/default/block/sidebar-12/components/calendars.tsx
deleted file mode 100644
index d6e0afd8..00000000
--- a/apps/web/registry/default/block/sidebar-12/components/calendars.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react'
-import { Check, ChevronRight } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarSeparator,
-} from '~/registry/default/ui/sidebar'
-
-export function Calendars({
-   calendars,
-}: {
-   calendars: {
-      name: string
-      items: string[]
-   }[]
-}) {
-   return (
-      <>
-         {calendars.map((calendar, index) => (
-            <React.Fragment key={calendar.name}>
-               <SidebarGroup key={calendar.name} className="py-0">
-                  <Collapsible
-                     defaultOpen={index === 0}
-                     className="group/collapsible"
-                  >
-                     <SidebarGroupLabel
-                        asChild
-                        className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
-                     >
-                        <CollapsibleTrigger>
-                           {calendar.name}
-                           {' '}
-                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-                        </CollapsibleTrigger>
-                     </SidebarGroupLabel>
-                     <CollapsibleContent>
-                        <SidebarGroupContent>
-                           <SidebarMenu>
-                              {calendar.items.map((item, index) => (
-                                 <SidebarMenuItem key={item}>
-                                    <SidebarMenuButton>
-                                       <div
-                                          data-active={index < 2}
-                                          className="group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
-                                       >
-                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
-                                       </div>
-                                       {item}
-                                    </SidebarMenuButton>
-                                 </SidebarMenuItem>
-                              ))}
-                           </SidebarMenu>
-                        </SidebarGroupContent>
-                     </CollapsibleContent>
-                  </Collapsible>
-               </SidebarGroup>
-               <SidebarSeparator className="mx-0" />
-            </React.Fragment>
-         ))}
-      </>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-12/components/date-picker.tsx b/apps/web/registry/default/block/sidebar-12/components/date-picker.tsx
deleted file mode 100644
index a01136ab..00000000
--- a/apps/web/registry/default/block/sidebar-12/components/date-picker.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Calendar } from '~/registry/default/ui/calendar'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-} from '~/registry/default/ui/sidebar'
-
-export function DatePicker() {
-   return (
-      <SidebarGroup className="px-0">
-         <SidebarGroupContent>
-            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-12/components/nav-user.tsx b/apps/web/registry/default/block/sidebar-12/components/nav-user.tsx
deleted file mode 100644
index 40b09b2f..00000000
--- a/apps/web/registry/default/block/sidebar-12/components/nav-user.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="start"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-12/page.tsx b/apps/web/registry/default/block/sidebar-12/page.tsx
deleted file mode 100644
index ca617dbd..00000000
--- a/apps/web/registry/default/block/sidebar-12/page.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-12/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbList,
-   BreadcrumbPage,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar with a calendar.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>October 2024</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-5">
-                  {Array.from({ length: 20 }).map((_, i) => (
-                     <div key={i} className="bg-muted/50 aspect-square rounded-xl" />
-                  ))}
-               </div>
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-13/components/settings-dialog.tsx b/apps/web/registry/default/block/sidebar-13/components/settings-dialog.tsx
deleted file mode 100644
index 6eadbf76..00000000
--- a/apps/web/registry/default/block/sidebar-13/components/settings-dialog.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   Bell,
-   Check,
-   Globe,
-   Home,
-   Keyboard,
-   Link,
-   Lock,
-   Menu,
-   MessageCircle,
-   Paintbrush,
-   Settings,
-   Video,
-} from 'lucide-react'
-
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Dialog,
-   DialogContent,
-   DialogDescription,
-   DialogTitle,
-   DialogTrigger,
-} from '~/registry/default/ui/dialog'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/default/ui/sidebar'
-
-const data = {
-   nav: [
-      { name: 'Notifications', icon: Bell },
-      { name: 'Navigation', icon: Menu },
-      { name: 'Home', icon: Home },
-      { name: 'Appearance', icon: Paintbrush },
-      { name: 'Messages & media', icon: MessageCircle },
-      { name: 'Language & region', icon: Globe },
-      { name: 'Accessibility', icon: Keyboard },
-      { name: 'Mark as read', icon: Check },
-      { name: 'Audio & video', icon: Video },
-      { name: 'Connected accounts', icon: Link },
-      { name: 'Privacy & visibility', icon: Lock },
-      { name: 'Advanced', icon: Settings },
-   ],
-}
-
-export function SettingsDialog() {
-   const [open, setOpen] = React.useState(true)
-
-   return (
-      <Dialog open={open} onOpenChange={setOpen}>
-         <DialogTrigger asChild>
-            <Button size="sm">Open Dialog</Button>
-         </DialogTrigger>
-         <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
-            <DialogTitle className="sr-only">Settings</DialogTitle>
-            <DialogDescription className="sr-only">
-               Customize your settings here.
-            </DialogDescription>
-            <SidebarProvider className="items-start">
-               <Sidebar collapsible="none" className="hidden md:flex">
-                  <SidebarContent>
-                     <SidebarGroup>
-                        <SidebarGroupContent>
-                           <SidebarMenu>
-                              {data.nav.map(item => (
-                                 <SidebarMenuItem key={item.name}>
-                                    <SidebarMenuButton
-                                       asChild
-                                       isActive={item.name === 'Messages & media'}
-                                    >
-                                       <a href="#">
-                                          <item.icon />
-                                          <span>{item.name}</span>
-                                       </a>
-                                    </SidebarMenuButton>
-                                 </SidebarMenuItem>
-                              ))}
-                           </SidebarMenu>
-                        </SidebarGroupContent>
-                     </SidebarGroup>
-                  </SidebarContent>
-               </Sidebar>
-               <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
-                  <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-                     <div className="flex items-center gap-2 px-4">
-                        <Breadcrumb>
-                           <BreadcrumbList>
-                              <BreadcrumbItem className="hidden md:block">
-                                 <BreadcrumbLink href="#">Settings</BreadcrumbLink>
-                              </BreadcrumbItem>
-                              <BreadcrumbSeparator className="hidden md:block" />
-                              <BreadcrumbItem>
-                                 <BreadcrumbPage>Messages & media</BreadcrumbPage>
-                              </BreadcrumbItem>
-                           </BreadcrumbList>
-                        </Breadcrumb>
-                     </div>
-                  </header>
-                  <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
-                     {Array.from({ length: 10 }).map((_, i) => (
-                        <div
-                           key={i}
-                           className="bg-muted/50 aspect-video max-w-3xl rounded-xl"
-                        />
-                     ))}
-                  </div>
-               </main>
-            </SidebarProvider>
-         </DialogContent>
-      </Dialog>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-13/page.tsx b/apps/web/registry/default/block/sidebar-13/page.tsx
deleted file mode 100644
index 793e851e..00000000
--- a/apps/web/registry/default/block/sidebar-13/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { SettingsDialog } from '~/registry/default/block/sidebar-13/components/settings-dialog'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar in a dialog.'
-
-export default function Page() {
-   return (
-      <div className="flex h-svh items-center justify-center">
-         <SettingsDialog />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-14/components/app-sidebar.tsx b/apps/web/registry/default/block/sidebar-14/components/app-sidebar.tsx
deleted file mode 100644
index a16d3d65..00000000
--- a/apps/web/registry/default/block/sidebar-14/components/app-sidebar.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import * as React from 'react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-   SidebarRail,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Community',
-         url: '#',
-         items: [
-            {
-               title: 'Contribution Guide',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarContent>
-            <SidebarGroup>
-               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
-               <SidebarGroupContent>
-                  <SidebarMenu>
-                     {data.navMain.map(item => (
-                        <SidebarMenuItem key={item.title}>
-                           <SidebarMenuButton asChild>
-                              <a href={item.url} className="font-medium">
-                                 {item.title}
-                              </a>
-                           </SidebarMenuButton>
-                           {item.items?.length
-                              ? (
-                                    <SidebarMenuSub>
-                                       {item.items.map(item => (
-                                          <SidebarMenuSubItem key={item.title}>
-                                             <SidebarMenuSubButton
-                                                asChild
-                                                isActive={item.isActive}
-                                             >
-                                                <a href={item.url}>{item.title}</a>
-                                             </SidebarMenuSubButton>
-                                          </SidebarMenuSubItem>
-                                       ))}
-                                    </SidebarMenuSub>
-                                 )
-                              : null}
-                        </SidebarMenuItem>
-                     ))}
-                  </SidebarMenu>
-               </SidebarGroupContent>
-            </SidebarGroup>
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-14/page.tsx b/apps/web/registry/default/block/sidebar-14/page.tsx
deleted file mode 100644
index 819151a7..00000000
--- a/apps/web/registry/default/block/sidebar-14/page.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { AppSidebar } from '~/registry/default/block/sidebar-14/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar on the right.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">
-                           Building Your Application
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-               <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-         <AppSidebar side="right" />
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-15/components/calendars.tsx b/apps/web/registry/default/block/sidebar-15/components/calendars.tsx
deleted file mode 100644
index d6e0afd8..00000000
--- a/apps/web/registry/default/block/sidebar-15/components/calendars.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react'
-import { Check, ChevronRight } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarSeparator,
-} from '~/registry/default/ui/sidebar'
-
-export function Calendars({
-   calendars,
-}: {
-   calendars: {
-      name: string
-      items: string[]
-   }[]
-}) {
-   return (
-      <>
-         {calendars.map((calendar, index) => (
-            <React.Fragment key={calendar.name}>
-               <SidebarGroup key={calendar.name} className="py-0">
-                  <Collapsible
-                     defaultOpen={index === 0}
-                     className="group/collapsible"
-                  >
-                     <SidebarGroupLabel
-                        asChild
-                        className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
-                     >
-                        <CollapsibleTrigger>
-                           {calendar.name}
-                           {' '}
-                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-                        </CollapsibleTrigger>
-                     </SidebarGroupLabel>
-                     <CollapsibleContent>
-                        <SidebarGroupContent>
-                           <SidebarMenu>
-                              {calendar.items.map((item, index) => (
-                                 <SidebarMenuItem key={item}>
-                                    <SidebarMenuButton>
-                                       <div
-                                          data-active={index < 2}
-                                          className="group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
-                                       >
-                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
-                                       </div>
-                                       {item}
-                                    </SidebarMenuButton>
-                                 </SidebarMenuItem>
-                              ))}
-                           </SidebarMenu>
-                        </SidebarGroupContent>
-                     </CollapsibleContent>
-                  </Collapsible>
-               </SidebarGroup>
-               <SidebarSeparator className="mx-0" />
-            </React.Fragment>
-         ))}
-      </>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-15/components/date-picker.tsx b/apps/web/registry/default/block/sidebar-15/components/date-picker.tsx
deleted file mode 100644
index a01136ab..00000000
--- a/apps/web/registry/default/block/sidebar-15/components/date-picker.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Calendar } from '~/registry/default/ui/calendar'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-} from '~/registry/default/ui/sidebar'
-
-export function DatePicker() {
-   return (
-      <SidebarGroup className="px-0">
-         <SidebarGroupContent>
-            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-15/components/nav-favorites.tsx b/apps/web/registry/default/block/sidebar-15/components/nav-favorites.tsx
deleted file mode 100644
index db474a23..00000000
--- a/apps/web/registry/default/block/sidebar-15/components/nav-favorites.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import {
-   ArrowUpRight,
-   Link,
-   MoreHorizontal,
-   StarOff,
-   Trash2,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavFavorites({
-   favorites,
-}: {
-   favorites: {
-      name: string
-      url: string
-      emoji: string
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-         <SidebarGroupLabel>Favorites</SidebarGroupLabel>
-         <SidebarMenu>
-            {favorites.map(item => (
-               <SidebarMenuItem key={item.name}>
-                  <SidebarMenuButton asChild>
-                     <a href={item.url} title={item.name}>
-                        <span>{item.emoji}</span>
-                        <span>{item.name}</span>
-                     </a>
-                  </SidebarMenuButton>
-                  <DropdownMenu>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover>
-                           <MoreHorizontal />
-                           <span className="sr-only">More</span>
-                        </SidebarMenuAction>
-                     </DropdownMenuTrigger>
-                     <DropdownMenuContent
-                        className="w-56 rounded-lg"
-                        side={isMobile ? 'bottom' : 'right'}
-                        align={isMobile ? 'end' : 'start'}
-                     >
-                        <DropdownMenuItem>
-                           <StarOff className="text-muted-foreground" />
-                           <span>Remove from Favorites</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Link className="text-muted-foreground" />
-                           <span>Copy Link</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <ArrowUpRight className="text-muted-foreground" />
-                           <span>Open in New Tab</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Trash2 className="text-muted-foreground" />
-                           <span>Delete</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuContent>
-                  </DropdownMenu>
-               </SidebarMenuItem>
-            ))}
-            <SidebarMenuItem>
-               <SidebarMenuButton className="text-sidebar-foreground/70">
-                  <MoreHorizontal />
-                  <span>More</span>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-15/components/nav-main.tsx b/apps/web/registry/default/block/sidebar-15/components/nav-main.tsx
deleted file mode 100644
index ded3e56e..00000000
--- a/apps/web/registry/default/block/sidebar-15/components/nav-main.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-import type { LucideIcon } from 'lucide-react'
-
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/default/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon: LucideIcon
-      isActive?: boolean
-   }[]
-}) {
-   return (
-      <SidebarMenu>
-         {items.map(item => (
-            <SidebarMenuItem key={item.title}>
-               <SidebarMenuButton asChild isActive={item.isActive}>
-                  <a href={item.url}>
-                     <item.icon />
-                     <span>{item.title}</span>
-                  </a>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         ))}
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-15/components/nav-secondary.tsx b/apps/web/registry/default/block/sidebar-15/components/nav-secondary.tsx
deleted file mode 100644
index 59e5d724..00000000
--- a/apps/web/registry/default/block/sidebar-15/components/nav-secondary.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react'
-import type { LucideIcon } from 'lucide-react'
-
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarMenu,
-   SidebarMenuBadge,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/default/ui/sidebar'
-
-export function NavSecondary({
-   items,
-   ...props
-}: {
-   items: {
-      title: string
-      url: string
-      icon: LucideIcon
-      badge?: React.ReactNode
-   }[]
-} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
-   return (
-      <SidebarGroup {...props}>
-         <SidebarGroupContent>
-            <SidebarMenu>
-               {items.map(item => (
-                  <SidebarMenuItem key={item.title}>
-                     <SidebarMenuButton asChild>
-                        <a href={item.url}>
-                           <item.icon />
-                           <span>{item.title}</span>
-                        </a>
-                     </SidebarMenuButton>
-                     {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
-                  </SidebarMenuItem>
-               ))}
-            </SidebarMenu>
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-15/components/nav-user.tsx b/apps/web/registry/default/block/sidebar-15/components/nav-user.tsx
deleted file mode 100644
index 40b09b2f..00000000
--- a/apps/web/registry/default/block/sidebar-15/components/nav-user.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/default/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="start"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-15/components/nav-workspaces.tsx b/apps/web/registry/default/block/sidebar-15/components/nav-workspaces.tsx
deleted file mode 100644
index 20b960ba..00000000
--- a/apps/web/registry/default/block/sidebar-15/components/nav-workspaces.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/default/ui/sidebar'
-
-export function NavWorkspaces({
-   workspaces,
-}: {
-   workspaces: {
-      name: string
-      emoji: React.ReactNode
-      pages: {
-         name: string
-         emoji: React.ReactNode
-      }[]
-   }[]
-}) {
-   return (
-      <SidebarGroup>
-         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
-         <SidebarGroupContent>
-            <SidebarMenu>
-               {workspaces.map(workspace => (
-                  <Collapsible key={workspace.name}>
-                     <SidebarMenuItem>
-                        <SidebarMenuButton asChild>
-                           <a href="#">
-                              <span>{workspace.emoji}</span>
-                              <span>{workspace.name}</span>
-                           </a>
-                        </SidebarMenuButton>
-                        <CollapsibleTrigger asChild>
-                           <SidebarMenuAction
-                              className="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90"
-                              showOnHover
-                           >
-                              <ChevronRight />
-                           </SidebarMenuAction>
-                        </CollapsibleTrigger>
-                        <SidebarMenuAction showOnHover>
-                           <Plus />
-                        </SidebarMenuAction>
-                        <CollapsibleContent>
-                           <SidebarMenuSub>
-                              {workspace.pages.map(page => (
-                                 <SidebarMenuSubItem key={page.name}>
-                                    <SidebarMenuSubButton asChild>
-                                       <a href="#">
-                                          <span>{page.emoji}</span>
-                                          <span>{page.name}</span>
-                                       </a>
-                                    </SidebarMenuSubButton>
-                                 </SidebarMenuSubItem>
-                              ))}
-                           </SidebarMenuSub>
-                        </CollapsibleContent>
-                     </SidebarMenuItem>
-                  </Collapsible>
-               ))}
-               <SidebarMenuItem>
-                  <SidebarMenuButton className="text-sidebar-foreground/70">
-                     <MoreHorizontal />
-                     <span>More</span>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-15/components/sidebar-left.tsx b/apps/web/registry/default/block/sidebar-15/components/sidebar-left.tsx
deleted file mode 100644
index dcd16e0e..00000000
--- a/apps/web/registry/default/block/sidebar-15/components/sidebar-left.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   AudioWaveform,
-   Blocks,
-   Calendar,
-   Command,
-   Home,
-   Inbox,
-   MessageCircleQuestion,
-   Search,
-   Settings2,
-   Sparkles,
-   Trash2,
-} from 'lucide-react'
-
-import { NavFavorites } from '~/registry/default/block/sidebar-15/components/nav-favorites'
-import { NavMain } from '~/registry/default/block/sidebar-15/components/nav-main'
-import { NavSecondary } from '~/registry/default/block/sidebar-15/components/nav-secondary'
-import { NavWorkspaces } from '~/registry/default/block/sidebar-15/components/nav-workspaces'
-import { TeamSwitcher } from '~/registry/default/block/sidebar-15/components/team-switcher'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarHeader,
-   SidebarRail,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   teams: [
-      {
-         name: 'Acme Inc',
-         logo: Command,
-         plan: 'Enterprise',
-      },
-      {
-         name: 'Acme Corp.',
-         logo: AudioWaveform,
-         plan: 'Startup',
-      },
-      {
-         name: 'Evil Corp.',
-         logo: Command,
-         plan: 'Free',
-      },
-   ],
-   navMain: [
-      {
-         title: 'Search',
-         url: '#',
-         icon: Search,
-      },
-      {
-         title: 'Ask AI',
-         url: '#',
-         icon: Sparkles,
-      },
-      {
-         title: 'Home',
-         url: '#',
-         icon: Home,
-         isActive: true,
-      },
-      {
-         title: 'Inbox',
-         url: '#',
-         icon: Inbox,
-         badge: '10',
-      },
-   ],
-   navSecondary: [
-      {
-         title: 'Calendar',
-         url: '#',
-         icon: Calendar,
-      },
-      {
-         title: 'Settings',
-         url: '#',
-         icon: Settings2,
-      },
-      {
-         title: 'Templates',
-         url: '#',
-         icon: Blocks,
-      },
-      {
-         title: 'Trash',
-         url: '#',
-         icon: Trash2,
-      },
-      {
-         title: 'Help',
-         url: '#',
-         icon: MessageCircleQuestion,
-      },
-   ],
-   favorites: [
-      {
-         name: 'Project Management & Task Tracking',
-         url: '#',
-         emoji: '📊',
-      },
-      {
-         name: 'Family Recipe Collection & Meal Planning',
-         url: '#',
-         emoji: '🍳',
-      },
-      {
-         name: 'Fitness Tracker & Workout Routines',
-         url: '#',
-         emoji: '💪',
-      },
-      {
-         name: 'Book Notes & Reading List',
-         url: '#',
-         emoji: '📚',
-      },
-      {
-         name: 'Sustainable Gardening Tips & Plant Care',
-         url: '#',
-         emoji: '🌱',
-      },
-      {
-         name: 'Language Learning Progress & Resources',
-         url: '#',
-         emoji: '🗣️',
-      },
-      {
-         name: 'Home Renovation Ideas & Budget Tracker',
-         url: '#',
-         emoji: '🏠',
-      },
-      {
-         name: 'Personal Finance & Investment Portfolio',
-         url: '#',
-         emoji: '💰',
-      },
-      {
-         name: 'Movie & TV Show Watchlist with Reviews',
-         url: '#',
-         emoji: '🎬',
-      },
-      {
-         name: 'Daily Habit Tracker & Goal Setting',
-         url: '#',
-         emoji: '✅',
-      },
-   ],
-   workspaces: [
-      {
-         name: 'Personal Life Management',
-         emoji: '🏠',
-         pages: [
-            {
-               name: 'Daily Journal & Reflection',
-               url: '#',
-               emoji: '📔',
-            },
-            {
-               name: 'Health & Wellness Tracker',
-               url: '#',
-               emoji: '🍏',
-            },
-            {
-               name: 'Personal Growth & Learning Goals',
-               url: '#',
-               emoji: '🌟',
-            },
-         ],
-      },
-      {
-         name: 'Professional Development',
-         emoji: '💼',
-         pages: [
-            {
-               name: 'Career Objectives & Milestones',
-               url: '#',
-               emoji: '🎯',
-            },
-            {
-               name: 'Skill Acquisition & Training Log',
-               url: '#',
-               emoji: '🧠',
-            },
-            {
-               name: 'Networking Contacts & Events',
-               url: '#',
-               emoji: '🤝',
-            },
-         ],
-      },
-      {
-         name: 'Creative Projects',
-         emoji: '🎨',
-         pages: [
-            {
-               name: 'Writing Ideas & Story Outlines',
-               url: '#',
-               emoji: '✍️',
-            },
-            {
-               name: 'Art & Design Portfolio',
-               url: '#',
-               emoji: '🖼️',
-            },
-            {
-               name: 'Music Composition & Practice Log',
-               url: '#',
-               emoji: '🎵',
-            },
-         ],
-      },
-      {
-         name: 'Home Management',
-         emoji: '🏡',
-         pages: [
-            {
-               name: 'Household Budget & Expense Tracking',
-               url: '#',
-               emoji: '💰',
-            },
-            {
-               name: 'Home Maintenance Schedule & Tasks',
-               url: '#',
-               emoji: '🔧',
-            },
-            {
-               name: 'Family Calendar & Event Planning',
-               url: '#',
-               emoji: '📅',
-            },
-         ],
-      },
-      {
-         name: 'Travel & Adventure',
-         emoji: '🧳',
-         pages: [
-            {
-               name: 'Trip Planning & Itineraries',
-               url: '#',
-               emoji: '🗺️',
-            },
-            {
-               name: 'Travel Bucket List & Inspiration',
-               url: '#',
-               emoji: '🌎',
-            },
-            {
-               name: 'Travel Journal & Photo Gallery',
-               url: '#',
-               emoji: '📸',
-            },
-         ],
-      },
-   ],
-}
-
-export function SidebarLeft({
-   ...props
-}: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar className="border-r-0" {...props}>
-         <SidebarHeader>
-            <TeamSwitcher teams={data.teams} />
-            <NavMain items={data.navMain} />
-         </SidebarHeader>
-         <SidebarContent>
-            <NavFavorites favorites={data.favorites} />
-            <NavWorkspaces workspaces={data.workspaces} />
-            <NavSecondary items={data.navSecondary} className="mt-auto" />
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-15/components/sidebar-right.tsx b/apps/web/registry/default/block/sidebar-15/components/sidebar-right.tsx
deleted file mode 100644
index 23494dd2..00000000
--- a/apps/web/registry/default/block/sidebar-15/components/sidebar-right.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react'
-import { Plus } from 'lucide-react'
-
-import { Calendars } from '~/registry/default/block/sidebar-15/components/calendars'
-import { DatePicker } from '~/registry/default/block/sidebar-15/components/date-picker'
-import { NavUser } from '~/registry/default/block/sidebar-15/components/nav-user'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarRail,
-   SidebarSeparator,
-} from '~/registry/default/ui/sidebar'
-
-// This is sample data.
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   calendars: [
-      {
-         name: 'My Calendars',
-         items: ['Personal', 'Work', 'Family'],
-      },
-      {
-         name: 'Favorites',
-         items: ['Holidays', 'Birthdays'],
-      },
-      {
-         name: 'Other',
-         items: ['Travel', 'Reminders', 'Deadlines'],
-      },
-   ],
-}
-
-export function SidebarRight({
-   ...props
-}: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar
-         collapsible="none"
-         className="sticky top-0 hidden h-svh border-l lg:flex"
-         {...props}
-      >
-         <SidebarHeader className="border-sidebar-border h-16 border-b">
-            <NavUser user={data.user} />
-         </SidebarHeader>
-         <SidebarContent>
-            <DatePicker />
-            <SidebarSeparator className="mx-0" />
-            <Calendars calendars={data.calendars} />
-         </SidebarContent>
-         <SidebarFooter>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton>
-                     <Plus />
-                     <span>New Calendar</span>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarFooter>
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-15/components/team-switcher.tsx b/apps/web/registry/default/block/sidebar-15/components/team-switcher.tsx
deleted file mode 100644
index 9b7d76c4..00000000
--- a/apps/web/registry/default/block/sidebar-15/components/team-switcher.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronDown, Plus } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/default/ui/sidebar'
-
-export function TeamSwitcher({
-   teams,
-}: {
-   teams: {
-      name: string
-      logo: React.ElementType
-      plan: string
-   }[]
-}) {
-   const [activeTeam, setActiveTeam] = React.useState(teams[0])
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton className="w-fit px-1.5">
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
-                        <activeTeam.logo className="size-3" />
-                     </div>
-                     <span className="truncate font-semibold">{activeTeam.name}</span>
-                     <ChevronDown className="opacity-50" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-64 rounded-lg"
-                  align="start"
-                  side="bottom"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
-                     Teams
-                  </DropdownMenuLabel>
-                  {teams.map((team, index) => (
-                     <DropdownMenuItem
-                        key={team.name}
-                        onClick={() => setActiveTeam(team)}
-                        className="gap-2 p-2"
-                     >
-                        <div className="flex size-6 items-center justify-center rounded-sm border">
-                           <team.logo className="size-4 shrink-0" />
-                        </div>
-                        {team.name}
-                        <DropdownMenuShortcut>
-                           ⌘
-                           {index + 1}
-                        </DropdownMenuShortcut>
-                     </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="gap-2 p-2">
-                     <div className="bg-background flex size-6 items-center justify-center rounded-md border">
-                        <Plus className="size-4" />
-                     </div>
-                     <div className="text-muted-foreground font-medium">Add team</div>
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/default/block/sidebar-15/page.tsx b/apps/web/registry/default/block/sidebar-15/page.tsx
deleted file mode 100644
index 25525e11..00000000
--- a/apps/web/registry/default/block/sidebar-15/page.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { SidebarLeft } from '~/registry/default/block/sidebar-15/components/sidebar-left'
-import { SidebarRight } from '~/registry/default/block/sidebar-15/components/sidebar-right'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbList,
-   BreadcrumbPage,
-} from '~/registry/default/ui/breadcrumb'
-import { Separator } from '~/registry/default/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/default/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A left and right sidebar.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <SidebarLeft />
-         <SidebarInset>
-            <header className="bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2">
-               <div className="flex flex-1 items-center gap-2 px-3">
-                  <SidebarTrigger />
-                  <Separator orientation="vertical" className="mr-2 h-4" />
-                  <Breadcrumb>
-                     <BreadcrumbList>
-                        <BreadcrumbItem>
-                           <BreadcrumbPage className="line-clamp-1">
-                              Project Management & Task Tracking
-                           </BreadcrumbPage>
-                        </BreadcrumbItem>
-                     </BreadcrumbList>
-                  </Breadcrumb>
-               </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
-               <div className="bg-muted/50 mx-auto h-screen w-full max-w-3xl rounded-xl" />
-            </div>
-         </SidebarInset>
-         <SidebarRight />
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/default/blocks/login-01/components/login-form.tsx b/apps/web/registry/default/blocks/login-01/components/login-form.tsx
new file mode 100644
index 00000000..a928530e
--- /dev/null
+++ b/apps/web/registry/default/blocks/login-01/components/login-form.tsx
@@ -0,0 +1,68 @@
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function LoginForm({
+   className,
+   ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+   return (
+      <div className={ny("flex flex-col gap-6", className)} {...props}>
+         <Card>
+            <CardHeader>
+               <CardTitle className="text-2xl">Login</CardTitle>
+               <CardDescription>
+                  Enter your email below to login to your account
+               </CardDescription>
+            </CardHeader>
+            <CardContent>
+               <form>
+                  <div className="flex flex-col gap-6">
+                     <div className="grid gap-2">
+                        <Label htmlFor="email">Email</Label>
+                        <Input
+                           id="email"
+                           type="email"
+                           placeholder="m@example.com"
+                           required
+                        />
+                     </div>
+                     <div className="grid gap-2">
+                        <div className="flex items-center">
+                           <Label htmlFor="password">Password</Label>
+                           <a
+                              href="#"
+                              className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                           >
+                              Forgot your password?
+                           </a>
+                        </div>
+                        <Input id="password" type="password" required />
+                     </div>
+                     <Button type="submit" className="w-full">
+                        Login
+                     </Button>
+                     <Button variant="outline" className="w-full">
+                        Login with Google
+                     </Button>
+                  </div>
+                  <div className="mt-4 text-center text-sm">
+                     Don&apos;t have an account?{" "}
+                     <a href="#" className="underline underline-offset-4">
+                        Sign up
+                     </a>
+                  </div>
+               </form>
+            </CardContent>
+         </Card>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/blocks/login-01/page.tsx b/apps/web/registry/default/blocks/login-01/page.tsx
new file mode 100644
index 00000000..7278bb4b
--- /dev/null
+++ b/apps/web/registry/default/blocks/login-01/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "~/registry/miami/blocks/login-01/components/login-form"
+
+export default function Page() {
+   return (
+      <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+         <div className="w-full max-w-sm">
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/blocks/login-02/components/login-form.tsx b/apps/web/registry/default/blocks/login-02/components/login-form.tsx
new file mode 100644
index 00000000..f77fbc51
--- /dev/null
+++ b/apps/web/registry/default/blocks/login-02/components/login-form.tsx
@@ -0,0 +1,73 @@
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function LoginForm({
+   className,
+   ...props
+}: React.ComponentPropsWithoutRef<"form">) {
+   return (
+      <form className={ny("flex flex-col gap-6", className)} {...props}>
+         <div className="flex flex-col items-center gap-2 text-center">
+            <h1 className="text-2xl font-bold">Login to your account</h1>
+            <p className="text-balance text-sm text-muted-foreground">
+               Enter your email below to login to your account
+            </p>
+         </div>
+         <div className="grid gap-6">
+            <div className="grid gap-2">
+               <Label htmlFor="email">Email</Label>
+               <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+               />
+            </div>
+            <div className="grid gap-2">
+               <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                  <a
+                     href="#"
+                     className="ml-auto text-sm underline-offset-4 hover:underline"
+                  >
+                     Forgot your password?
+                  </a>
+               </div>
+               <Input id="password" type="password" required />
+            </div>
+            <Button type="submit" className="w-full">
+               Login
+            </Button>
+            <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+               <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                  Or continue with
+               </span>
+            </div>
+            <Button
+               variant="outline"
+               className="w-full h-10 flex items-center justify-center gap-2"
+            >
+               <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  className="h-5 w-5"
+               >
+                  <path
+                     d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+                     fill="currentColor"
+                  />
+               </svg>
+               Login with GitHub
+            </Button>
+         </div>
+         <div className="text-center text-sm">
+            Don&apos;t have an account?{" "}
+            <a href="#" className="underline underline-offset-4">
+               Sign up
+            </a>
+         </div>
+      </form>
+   )
+}
diff --git a/apps/web/registry/default/blocks/login-02/page.tsx b/apps/web/registry/default/blocks/login-02/page.tsx
new file mode 100644
index 00000000..96babd35
--- /dev/null
+++ b/apps/web/registry/default/blocks/login-02/page.tsx
@@ -0,0 +1,32 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "~/registry/miami/blocks/login-02/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="grid min-h-svh lg:grid-cols-2">
+         <div className="flex flex-col gap-4 p-6 md:p-10">
+            <div className="flex justify-center gap-2 md:justify-start">
+               <a href="#" className="flex items-center gap-2 font-medium">
+                  <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+                     <GalleryVerticalEnd className="size-4" />
+                  </div>
+                  Acme Inc.
+               </a>
+            </div>
+            <div className="flex flex-1 items-center justify-center">
+               <div className="w-full max-w-xs">
+                  <LoginForm />
+               </div>
+            </div>
+         </div>
+         <div className="relative hidden bg-muted lg:block">
+            <img
+               src="/placeholder.svg"
+               alt="Image"
+               className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+            />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/blocks/login-03/components/login-form.tsx b/apps/web/registry/default/blocks/login-03/components/login-form.tsx
new file mode 100644
index 00000000..e85c8629
--- /dev/null
+++ b/apps/web/registry/default/blocks/login-03/components/login-form.tsx
@@ -0,0 +1,110 @@
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function LoginForm({
+   className,
+   ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+   return (
+      <div className={ny("flex flex-col gap-6", className)} {...props}>
+         <Card>
+            <CardHeader className="text-center">
+               <CardTitle className="text-xl">Welcome back</CardTitle>
+               <CardDescription>
+                  Login with your Apple or Google account
+               </CardDescription>
+            </CardHeader>
+            <CardContent>
+               <form>
+                  <div className="grid gap-6">
+                     <div className="flex flex-col gap-4">
+                        <Button
+                           variant="outline"
+                           className="w-full h-10 flex items-center justify-center gap-2"
+                        >
+                           <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              className="h-5 w-5"
+                           >
+                              <path
+                                 d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                                 fill="currentColor"
+                              />
+                           </svg>
+                           Login with Apple
+                        </Button>
+                        <Button
+                           variant="outline"
+                           className="w-full h-10 flex items-center justify-center gap-2"
+                        >
+                           <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              className="h-5 w-5"
+                           >
+                              <path
+                                 d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                                 fill="currentColor"
+                              />
+                           </svg>
+                           Login with Google
+                        </Button>
+                     </div>
+                     <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+                        <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                           Or continue with
+                        </span>
+                     </div>
+                     <div className="grid gap-6">
+                        <div className="grid gap-2">
+                           <Label htmlFor="email">Email</Label>
+                           <Input
+                              id="email"
+                              type="email"
+                              placeholder="m@example.com"
+                              required
+                           />
+                        </div>
+                        <div className="grid gap-2">
+                           <div className="flex items-center">
+                              <Label htmlFor="password">Password</Label>
+                              <a
+                                 href="#"
+                                 className="ml-auto text-sm underline-offset-4 hover:underline"
+                              >
+                                 Forgot your password?
+                              </a>
+                           </div>
+                           <Input id="password" type="password" required />
+                        </div>
+                        <Button type="submit" className="w-full">
+                           Login
+                        </Button>
+                     </div>
+                     <div className="text-center text-sm">
+                        Don&apos;t have an account?{" "}
+                        <a href="#" className="underline underline-offset-4">
+                           Sign up
+                        </a>
+                     </div>
+                  </div>
+               </form>
+            </CardContent>
+         </Card>
+         <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  ">
+            By clicking continue, you agree to our{" "}
+            <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/blocks/login-03/page.tsx b/apps/web/registry/default/blocks/login-03/page.tsx
new file mode 100644
index 00000000..ebd0938c
--- /dev/null
+++ b/apps/web/registry/default/blocks/login-03/page.tsx
@@ -0,0 +1,22 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "~/registry/miami/blocks/login-03/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+         <div className="flex w-full max-w-sm flex-col gap-6">
+            <a
+               href="#"
+               className="flex items-center gap-2 self-center font-medium"
+            >
+               <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+               </div>
+               Acme Inc.
+            </a>
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/blocks/login-04/components/login-form.tsx b/apps/web/registry/default/blocks/login-04/components/login-form.tsx
new file mode 100644
index 00000000..106e29bf
--- /dev/null
+++ b/apps/web/registry/default/blocks/login-04/components/login-form.tsx
@@ -0,0 +1,125 @@
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Card, CardContent } from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function LoginForm({
+   className,
+   ...props
+}: React.ComponentProps<"div">) {
+   return (
+      <div className={ny("flex flex-col gap-6", className)} {...props}>
+         <Card className="overflow-hidden">
+            <CardContent className="grid p-0 md:grid-cols-2">
+               <form className="p-6 md:p-8">
+                  <div className="flex flex-col gap-6">
+                     <div className="flex flex-col items-center text-center">
+                        <h1 className="text-2xl font-bold">Welcome back</h1>
+                        <p className="text-balance text-muted-foreground">
+                           Login to your Acme Inc account
+                        </p>
+                     </div>
+                     <div className="grid gap-2">
+                        <Label htmlFor="email">Email</Label>
+                        <Input
+                           id="email"
+                           type="email"
+                           placeholder="m@example.com"
+                           required
+                        />
+                     </div>
+                     <div className="grid gap-2">
+                        <div className="flex items-center">
+                           <Label htmlFor="password">Password</Label>
+                           <a
+                              href="#"
+                              className="ml-auto text-sm underline-offset-2 hover:underline"
+                           >
+                              Forgot your password?
+                           </a>
+                        </div>
+                        <Input id="password" type="password" required />
+                     </div>
+                     <Button type="submit" className="w-full">
+                        Login
+                     </Button>
+                     <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+                        <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                           Or continue with
+                        </span>
+                     </div>
+                     <div className="grid grid-cols-3 gap-4">
+                        <Button
+                           variant="outline"
+                           className="w-full h-10 flex items-center justify-center"
+                        >
+                           <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              className="h-5 w-5"
+                           >
+                              <path
+                                 d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                                 fill="currentColor"
+                              />
+                           </svg>
+                           <span className="sr-only">Login with Apple</span>
+                        </Button>
+                        <Button
+                           variant="outline"
+                           className="w-full h-10 flex items-center justify-center"
+                        >
+                           <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              className="h-5 w-5"
+                           >
+                              <path
+                                 d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                                 fill="currentColor"
+                              />
+                           </svg>
+                           <span className="sr-only">Login with Google</span>
+                        </Button>
+                        <Button
+                           variant="outline"
+                           className="w-full h-10 flex items-center justify-center"
+                        >
+                           <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              className="h-5 w-5"
+                           >
+                              <path
+                                 d="M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z"
+                                 fill="currentColor"
+                              />
+                           </svg>
+                           <span className="sr-only">Login with Meta</span>
+                        </Button>
+                     </div>
+                     <div className="text-center text-sm">
+                        Don&apos;t have an account?{" "}
+                        <a href="#" className="underline underline-offset-4">
+                           Sign up
+                        </a>
+                     </div>
+                  </div>
+               </form>
+               <div className="relative hidden bg-muted md:block">
+                  <img
+                     src="/placeholder.svg"
+                     alt="Image"
+                     className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+                  />
+               </div>
+            </CardContent>
+         </Card>
+         <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary">
+            By clicking continue, you agree to our{" "}
+            <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/blocks/login-04/page.tsx b/apps/web/registry/default/blocks/login-04/page.tsx
new file mode 100644
index 00000000..5512ae30
--- /dev/null
+++ b/apps/web/registry/default/blocks/login-04/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "~/registry/miami/blocks/login-04/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+         <div className="w-full max-w-sm md:max-w-3xl">
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/blocks/login-05/components/login-form.tsx b/apps/web/registry/default/blocks/login-05/components/login-form.tsx
new file mode 100644
index 00000000..29ec9e57
--- /dev/null
+++ b/apps/web/registry/default/blocks/login-05/components/login-form.tsx
@@ -0,0 +1,87 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function LoginForm({
+   className,
+   ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+   return (
+      <div className={ny("flex flex-col gap-6", className)} {...props}>
+         <form>
+            <div className="flex flex-col gap-6">
+               <div className="flex flex-col items-center gap-2">
+                  <a
+                     href="#"
+                     className="flex flex-col items-center gap-2 font-medium"
+                  >
+                     <div className="flex h-8 w-8 items-center justify-center rounded-md">
+                        <GalleryVerticalEnd className="size-6" />
+                     </div>
+                     <span className="sr-only">Acme Inc.</span>
+                  </a>
+                  <h1 className="text-xl font-bold">Welcome to Acme Inc.</h1>
+                  <div className="text-center text-sm">
+                     Don&apos;t have an account?{" "}
+                     <a href="#" className="underline underline-offset-4">
+                        Sign up
+                     </a>
+                  </div>
+               </div>
+               <div className="flex flex-col gap-6">
+                  <div className="grid gap-2">
+                     <Label htmlFor="email">Email</Label>
+                     <Input
+                        id="email"
+                        type="email"
+                        placeholder="m@example.com"
+                        required
+                     />
+                  </div>
+                  <Button type="submit" className="w-full">
+                     Login
+                  </Button>
+               </div>
+               <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+                  <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                     Or
+                  </span>
+               </div>
+               <div className="grid gap-4 sm:grid-cols-2">
+                  <Button variant="outline" className="w-full">
+                     <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                     >
+                        <path
+                           d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                           fill="currentColor"
+                        />
+                     </svg>
+                     Continue with Apple
+                  </Button>
+                  <Button variant="outline" className="w-full">
+                     <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                     >
+                        <path
+                           d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                           fill="currentColor"
+                        />
+                     </svg>
+                     Continue with Google
+                  </Button>
+               </div>
+            </div>
+         </form>
+         <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary  ">
+            By clicking continue, you agree to our{" "}
+            <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/blocks/login-05/page.tsx b/apps/web/registry/default/blocks/login-05/page.tsx
new file mode 100644
index 00000000..11cadf68
--- /dev/null
+++ b/apps/web/registry/default/blocks/login-05/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "~/registry/miami/blocks/login-05/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+         <div className="w-full max-w-sm">
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-01/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-01/components/app-sidebar.tsx
new file mode 100644
index 00000000..c1752057
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-01/components/app-sidebar.tsx
@@ -0,0 +1,185 @@
+import type * as React from "react"
+
+import { SearchForm } from "~/registry/miami/blocks/sidebar-01/components/search-form"
+import { VersionSwitcher } from "~/registry/miami/blocks/sidebar-01/components/version-switcher"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader>
+            <VersionSwitcher
+               versions={data.versions}
+               defaultVersion={data.versions[0]}
+            />
+            <SearchForm />
+         </SidebarHeader>
+         <SidebarContent>
+            {/* We create a SidebarGroup for each parent. */}
+            {data.navMain.map((item) => (
+               <SidebarGroup key={item.title}>
+                  <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {item.items.map((item) => (
+                           <SidebarMenuItem key={item.title}>
+                              <SidebarMenuButton
+                                 asChild
+                                 isActive={item.isActive}
+                              >
+                                 <a href={item.url}>{item.title}</a>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            ))}
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-01/components/search-form.tsx b/apps/web/registry/default/blocks/sidebar-01/components/search-form.tsx
new file mode 100644
index 00000000..278d21e7
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-01/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "~/registry/miami/ui/label"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarInput,
+} from "~/registry/miami/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+   return (
+      <form {...props}>
+         <SidebarGroup className="py-0">
+            <SidebarGroupContent className="relative">
+               <Label htmlFor="search" className="sr-only">
+                  Search
+               </Label>
+               <SidebarInput
+                  id="search"
+                  placeholder="Search the docs..."
+                  className="pl-8"
+               />
+               <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+            </SidebarGroupContent>
+         </SidebarGroup>
+      </form>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-01/components/version-switcher.tsx b/apps/web/registry/default/blocks/sidebar-01/components/version-switcher.tsx
new file mode 100644
index 00000000..a0e8f936
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-01/components/version-switcher.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react"
+import * as React from "react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function VersionSwitcher({
+   versions,
+   defaultVersion,
+}: {
+   versions: string[]
+   defaultVersion: string
+}) {
+   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                        <GalleryVerticalEnd className="size-4" />
+                     </div>
+                     <div className="flex flex-col gap-0.5 leading-none">
+                        <span className="font-semibold">Documentation</span>
+                        <span className="">v{selectedVersion}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width]"
+                  align="start"
+               >
+                  {versions.map((version) => (
+                     <DropdownMenuItem
+                        key={version}
+                        onSelect={() => setSelectedVersion(version)}
+                     >
+                        v{version}{" "}
+                        {version === selectedVersion && (
+                           <Check className="ml-auto" />
+                        )}
+                     </DropdownMenuItem>
+                  ))}
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-01/page.tsx b/apps/web/registry/default/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000..07a23e91
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-01/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-01/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-02/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-02/components/app-sidebar.tsx
new file mode 100644
index 00000000..26d6c5ea
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-02/components/app-sidebar.tsx
@@ -0,0 +1,218 @@
+import { ChevronRight } from "lucide-react"
+import type * as React from "react"
+
+import { SearchForm } from "~/registry/miami/blocks/sidebar-02/components/search-form"
+import { VersionSwitcher } from "~/registry/miami/blocks/sidebar-02/components/version-switcher"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader>
+            <VersionSwitcher
+               versions={data.versions}
+               defaultVersion={data.versions[0]}
+            />
+            <SearchForm />
+         </SidebarHeader>
+         <SidebarContent className="gap-0">
+            {/* We create a collapsible SidebarGroup for each parent. */}
+            {data.navMain.map((item) => (
+               <Collapsible
+                  key={item.title}
+                  title={item.title}
+                  defaultOpen
+                  className="group/collapsible"
+               >
+                  <SidebarGroup>
+                     <SidebarGroupLabel
+                        asChild
+                        className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                     >
+                        <CollapsibleTrigger>
+                           {item.title}{" "}
+                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                        </CollapsibleTrigger>
+                     </SidebarGroupLabel>
+                     <CollapsibleContent>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {item.items.map((item) => (
+                                 <SidebarMenuItem key={item.title}>
+                                    <SidebarMenuButton
+                                       asChild
+                                       isActive={item.isActive}
+                                    >
+                                       <a href={item.url}>{item.title}</a>
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </CollapsibleContent>
+                  </SidebarGroup>
+               </Collapsible>
+            ))}
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-02/components/search-form.tsx b/apps/web/registry/default/blocks/sidebar-02/components/search-form.tsx
new file mode 100644
index 00000000..278d21e7
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-02/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "~/registry/miami/ui/label"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarInput,
+} from "~/registry/miami/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+   return (
+      <form {...props}>
+         <SidebarGroup className="py-0">
+            <SidebarGroupContent className="relative">
+               <Label htmlFor="search" className="sr-only">
+                  Search
+               </Label>
+               <SidebarInput
+                  id="search"
+                  placeholder="Search the docs..."
+                  className="pl-8"
+               />
+               <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+            </SidebarGroupContent>
+         </SidebarGroup>
+      </form>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-02/components/version-switcher.tsx b/apps/web/registry/default/blocks/sidebar-02/components/version-switcher.tsx
new file mode 100644
index 00000000..a0e8f936
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-02/components/version-switcher.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react"
+import * as React from "react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function VersionSwitcher({
+   versions,
+   defaultVersion,
+}: {
+   versions: string[]
+   defaultVersion: string
+}) {
+   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                        <GalleryVerticalEnd className="size-4" />
+                     </div>
+                     <div className="flex flex-col gap-0.5 leading-none">
+                        <span className="font-semibold">Documentation</span>
+                        <span className="">v{selectedVersion}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width]"
+                  align="start"
+               >
+                  {versions.map((version) => (
+                     <DropdownMenuItem
+                        key={version}
+                        onSelect={() => setSelectedVersion(version)}
+                     >
+                        v{version}{" "}
+                        {version === selectedVersion && (
+                           <Check className="ml-auto" />
+                        )}
+                     </DropdownMenuItem>
+                  ))}
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-02/page.tsx b/apps/web/registry/default/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000..ca95d0ab
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-02/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-02/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               {Array.from({ length: 24 }).map((_, index) => (
+                  <div
+                     key={index}
+                     className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                  />
+               ))}
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-03/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-03/components/app-sidebar.tsx
new file mode 100644
index 00000000..cc71be14
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-03/components/app-sidebar.tsx
@@ -0,0 +1,211 @@
+import { GalleryVerticalEnd } from "lucide-react"
+import type * as React from "react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton size="lg" asChild>
+                     <a href="#">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                           <GalleryVerticalEnd className="size-4" />
+                        </div>
+                        <div className="flex flex-col gap-0.5 leading-none">
+                           <span className="font-semibold">Documentation</span>
+                           <span className="">v1.0.0</span>
+                        </div>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarHeader>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarMenu>
+                  {data.navMain.map((item) => (
+                     <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton asChild>
+                           <a href={item.url} className="font-medium">
+                              {item.title}
+                           </a>
+                        </SidebarMenuButton>
+                        {item.items?.length ? (
+                           <SidebarMenuSub>
+                              {item.items.map((item) => (
+                                 <SidebarMenuSubItem key={item.title}>
+                                    <SidebarMenuSubButton
+                                       asChild
+                                       isActive={item.isActive}
+                                    >
+                                       <a href={item.url}>{item.title}</a>
+                                    </SidebarMenuSubButton>
+                                 </SidebarMenuSubItem>
+                              ))}
+                           </SidebarMenuSub>
+                        ) : null}
+                     </SidebarMenuItem>
+                  ))}
+               </SidebarMenu>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-03/page.tsx b/apps/web/registry/default/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000..dfbbbe61
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-03/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-03/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+               <div className="flex items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-04/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-04/components/app-sidebar.tsx
new file mode 100644
index 00000000..00e58b1b
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-04/components/app-sidebar.tsx
@@ -0,0 +1,209 @@
+import { GalleryVerticalEnd } from "lucide-react"
+import type * as React from "react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar variant="floating" {...props}>
+         <SidebarHeader>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton size="lg" asChild>
+                     <a href="#">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                           <GalleryVerticalEnd className="size-4" />
+                        </div>
+                        <div className="flex flex-col gap-0.5 leading-none">
+                           <span className="font-semibold">Documentation</span>
+                           <span className="">v1.0.0</span>
+                        </div>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarHeader>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarMenu className="gap-2">
+                  {data.navMain.map((item) => (
+                     <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton asChild>
+                           <a href={item.url} className="font-medium">
+                              {item.title}
+                           </a>
+                        </SidebarMenuButton>
+                        {item.items?.length ? (
+                           <SidebarMenuSub className="ml-0 border-l-0 px-1.5">
+                              {item.items.map((item) => (
+                                 <SidebarMenuSubItem key={item.title}>
+                                    <SidebarMenuSubButton
+                                       asChild
+                                       isActive={item.isActive}
+                                    >
+                                       <a href={item.url}>{item.title}</a>
+                                    </SidebarMenuSubButton>
+                                 </SidebarMenuSubItem>
+                              ))}
+                           </SidebarMenuSub>
+                        ) : null}
+                     </SidebarMenuItem>
+                  ))}
+               </SidebarMenu>
+            </SidebarGroup>
+         </SidebarContent>
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-04/page.tsx b/apps/web/registry/default/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000..fcd531c6
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-04/page.tsx
@@ -0,0 +1,56 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-04/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider
+         style={
+            {
+               "--sidebar-width": "19rem",
+            } as React.CSSProperties
+         }
+      >
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-05/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-05/components/app-sidebar.tsx
new file mode 100644
index 00000000..acb5e0bd
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-05/components/app-sidebar.tsx
@@ -0,0 +1,228 @@
+import { GalleryVerticalEnd, Minus, Plus } from "lucide-react"
+import type * as React from "react"
+
+import { SearchForm } from "~/registry/miami/blocks/sidebar-05/components/search-form"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton size="lg" asChild>
+                     <a href="#">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                           <GalleryVerticalEnd className="size-4" />
+                        </div>
+                        <div className="flex flex-col gap-0.5 leading-none">
+                           <span className="font-semibold">Documentation</span>
+                           <span className="">v1.0.0</span>
+                        </div>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+            <SearchForm />
+         </SidebarHeader>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarMenu>
+                  {data.navMain.map((item, index) => (
+                     <Collapsible
+                        key={item.title}
+                        defaultOpen={index === 1}
+                        className="group/collapsible"
+                     >
+                        <SidebarMenuItem>
+                           <CollapsibleTrigger asChild>
+                              <SidebarMenuButton>
+                                 {item.title}{" "}
+                                 <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                                 <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                              </SidebarMenuButton>
+                           </CollapsibleTrigger>
+                           {item.items?.length ? (
+                              <CollapsibleContent>
+                                 <SidebarMenuSub>
+                                    {item.items.map((item) => (
+                                       <SidebarMenuSubItem key={item.title}>
+                                          <SidebarMenuSubButton
+                                             asChild
+                                             isActive={item.isActive}
+                                          >
+                                             <a href={item.url}>{item.title}</a>
+                                          </SidebarMenuSubButton>
+                                       </SidebarMenuSubItem>
+                                    ))}
+                                 </SidebarMenuSub>
+                              </CollapsibleContent>
+                           ) : null}
+                        </SidebarMenuItem>
+                     </Collapsible>
+                  ))}
+               </SidebarMenu>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-05/components/search-form.tsx b/apps/web/registry/default/blocks/sidebar-05/components/search-form.tsx
new file mode 100644
index 00000000..278d21e7
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-05/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "~/registry/miami/ui/label"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarInput,
+} from "~/registry/miami/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+   return (
+      <form {...props}>
+         <SidebarGroup className="py-0">
+            <SidebarGroupContent className="relative">
+               <Label htmlFor="search" className="sr-only">
+                  Search
+               </Label>
+               <SidebarInput
+                  id="search"
+                  placeholder="Search the docs..."
+                  className="pl-8"
+               />
+               <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+            </SidebarGroupContent>
+         </SidebarGroup>
+      </form>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-05/page.tsx b/apps/web/registry/default/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000..2877811b
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-05/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-05/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-06/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-06/components/app-sidebar.tsx
new file mode 100644
index 00000000..40e0027b
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-06/components/app-sidebar.tsx
@@ -0,0 +1,179 @@
+import { GalleryVerticalEnd } from "lucide-react"
+import type * as React from "react"
+
+import { NavMain } from "~/registry/miami/blocks/sidebar-06/components/nav-main"
+import { SidebarOptInForm } from "~/registry/miami/blocks/sidebar-06/components/sidebar-opt-in-form"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton size="lg" asChild>
+                     <a href="#">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                           <GalleryVerticalEnd className="size-4" />
+                        </div>
+                        <div className="flex flex-col gap-0.5 leading-none">
+                           <span className="font-semibold">Documentation</span>
+                           <span className="">v1.0.0</span>
+                        </div>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarHeader>
+         <SidebarContent>
+            <NavMain items={data.navMain} />
+         </SidebarContent>
+         <SidebarFooter>
+            <div className="p-1">
+               <SidebarOptInForm />
+            </div>
+         </SidebarFooter>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-06/components/nav-main.tsx b/apps/web/registry/default/blocks/sidebar-06/components/nav-main.tsx
new file mode 100644
index 00000000..2c5119ee
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-06/components/nav-main.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { type LucideIcon, MoreHorizontal } from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon?: LucideIcon
+      isActive?: boolean
+      items?: {
+         title: string
+         url: string
+      }[]
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup>
+         <SidebarMenu>
+            {items.map((item) => (
+               <DropdownMenu key={item.title}>
+                  <SidebarMenuItem>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                           {item.title} <MoreHorizontal className="ml-auto" />
+                        </SidebarMenuButton>
+                     </DropdownMenuTrigger>
+                     {item.items?.length ? (
+                        <DropdownMenuContent
+                           side={isMobile ? "bottom" : "right"}
+                           align={isMobile ? "end" : "start"}
+                           className="min-w-56 rounded-lg"
+                        >
+                           {item.items.map((item) => (
+                              <DropdownMenuItem asChild key={item.title}>
+                                 <a href={item.url}>{item.title}</a>
+                              </DropdownMenuItem>
+                           ))}
+                        </DropdownMenuContent>
+                     ) : null}
+                  </SidebarMenuItem>
+               </DropdownMenu>
+            ))}
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/web/registry/default/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
new file mode 100644
index 00000000..d2be7339
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
@@ -0,0 +1,35 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { SidebarInput } from "~/registry/miami/ui/sidebar"
+
+export function SidebarOptInForm() {
+   return (
+      <Card className="shadow-none">
+         <form>
+            <CardHeader className="p-4 pb-0">
+               <CardTitle className="text-sm">
+                  Subscribe to our newsletter
+               </CardTitle>
+               <CardDescription>
+                  Opt-in to receive updates and news about the sidebar.
+               </CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-2.5 p-4">
+               <SidebarInput type="email" placeholder="Email" />
+               <Button
+                  className="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none"
+                  size="sm"
+               >
+                  Subscribe
+               </Button>
+            </CardContent>
+         </form>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-06/page.tsx b/apps/web/registry/default/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000..a754e431
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-06/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-06/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-07/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-07/components/app-sidebar.tsx
new file mode 100644
index 00000000..70c652cc
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-07/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"use client"
+
+import {
+   AudioWaveform,
+   BookOpen,
+   Bot,
+   Command,
+   Frame,
+   GalleryVerticalEnd,
+   Map,
+   PieChart,
+   Settings2,
+   SquareTerminal,
+} from "lucide-react"
+import type * as React from "react"
+
+import { NavMain } from "~/registry/miami/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "~/registry/miami/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "~/registry/miami/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "~/registry/miami/blocks/sidebar-07/components/team-switcher"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: GalleryVerticalEnd,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar collapsible="icon" {...props}>
+         <SidebarHeader>
+            <TeamSwitcher teams={data.teams} />
+         </SidebarHeader>
+         <SidebarContent>
+            <NavMain items={data.navMain} />
+            <NavProjects projects={data.projects} />
+         </SidebarContent>
+         <SidebarFooter>
+            <NavUser user={data.user} />
+         </SidebarFooter>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-07/components/nav-main.tsx b/apps/web/registry/default/blocks/sidebar-07/components/nav-main.tsx
new file mode 100644
index 00000000..73557e4a
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-07/components/nav-main.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon?: LucideIcon
+      isActive?: boolean
+      items?: {
+         title: string
+         url: string
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Platform</SidebarGroupLabel>
+         <SidebarMenu>
+            {items.map((item) => (
+               <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={item.isActive}
+                  className="group/collapsible"
+               >
+                  <SidebarMenuItem>
+                     <CollapsibleTrigger asChild>
+                        <SidebarMenuButton tooltip={item.title}>
+                           {item.icon && <item.icon />}
+                           <span>{item.title}</span>
+                           <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                        </SidebarMenuButton>
+                     </CollapsibleTrigger>
+                     <CollapsibleContent>
+                        <SidebarMenuSub>
+                           {item.items?.map((subItem) => (
+                              <SidebarMenuSubItem key={subItem.title}>
+                                 <SidebarMenuSubButton asChild>
+                                    <a href={subItem.url}>
+                                       <span>{subItem.title}</span>
+                                    </a>
+                                 </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                           ))}
+                        </SidebarMenuSub>
+                     </CollapsibleContent>
+                  </SidebarMenuItem>
+               </Collapsible>
+            ))}
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-07/components/nav-projects.tsx b/apps/web/registry/default/blocks/sidebar-07/components/nav-projects.tsx
new file mode 100644
index 00000000..16487028
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-07/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+   Folder,
+   Forward,
+   type LucideIcon,
+   MoreHorizontal,
+   Trash2,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavProjects({
+   projects,
+}: {
+   projects: {
+      name: string
+      url: string
+      icon: LucideIcon
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Projects</SidebarGroupLabel>
+         <SidebarMenu>
+            {projects.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url}>
+                        <item.icon />
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-48 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <Folder className="text-muted-foreground" />
+                           <span>View Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <Forward className="text-muted-foreground" />
+                           <span>Share Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete Project</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal className="text-sidebar-foreground/70" />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-07/components/nav-user.tsx b/apps/web/registry/default/blocks/sidebar-07/components/nav-user.tsx
new file mode 100644
index 00000000..6566b797
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-07/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="end"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-07/components/team-switcher.tsx b/apps/web/registry/default/blocks/sidebar-07/components/team-switcher.tsx
new file mode 100644
index 00000000..3d5c4d29
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-07/components/team-switcher.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { ChevronsUpDown, Plus } from "lucide-react"
+import * as React from "react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function TeamSwitcher({
+   teams,
+}: {
+   teams: {
+      name: string
+      logo: React.ElementType
+      plan: string
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+   const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                        <activeTeam.logo className="size-4" />
+                     </div>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {activeTeam.name}
+                        </span>
+                        <span className="truncate text-xs">
+                           {activeTeam.plan}
+                        </span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  align="start"
+                  side={isMobile ? "bottom" : "right"}
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                     Teams
+                  </DropdownMenuLabel>
+                  {teams.map((team, index) => (
+                     <DropdownMenuItem
+                        key={team.name}
+                        onClick={() => setActiveTeam(team)}
+                        className="gap-2 p-2"
+                     >
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
+                           <team.logo className="size-4 shrink-0" />
+                        </div>
+                        {team.name}
+                        <DropdownMenuShortcut>
+                           ⌘{index + 1}
+                        </DropdownMenuShortcut>
+                     </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                     <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                        <Plus className="size-4" />
+                     </div>
+                     <div className="font-medium text-muted-foreground">
+                        Add team
+                     </div>
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-07/page.tsx b/apps/web/registry/default/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000..a8819cc4
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-07/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-07/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-08/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-08/components/app-sidebar.tsx
new file mode 100644
index 00000000..12e09a0c
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-08/components/app-sidebar.tsx
@@ -0,0 +1,187 @@
+"use client"
+
+import {
+   BookOpen,
+   Bot,
+   Command,
+   Frame,
+   LifeBuoy,
+   Map,
+   PieChart,
+   Send,
+   Settings2,
+   SquareTerminal,
+} from "lucide-react"
+import type * as React from "react"
+
+import { NavMain } from "~/registry/miami/blocks/sidebar-08/components/nav-main"
+import { NavProjects } from "~/registry/miami/blocks/sidebar-08/components/nav-projects"
+import { NavSecondary } from "~/registry/miami/blocks/sidebar-08/components/nav-secondary"
+import { NavUser } from "~/registry/miami/blocks/sidebar-08/components/nav-user"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Support",
+         url: "#",
+         icon: LifeBuoy,
+      },
+      {
+         title: "Feedback",
+         url: "#",
+         icon: Send,
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar variant="inset" {...props}>
+         <SidebarHeader>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton size="lg" asChild>
+                     <a href="#">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                           <Command className="size-4" />
+                        </div>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              Acme Inc
+                           </span>
+                           <span className="truncate text-xs">Enterprise</span>
+                        </div>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarHeader>
+         <SidebarContent>
+            <NavMain items={data.navMain} />
+            <NavProjects projects={data.projects} />
+            <NavSecondary items={data.navSecondary} className="mt-auto" />
+         </SidebarContent>
+         <SidebarFooter>
+            <NavUser user={data.user} />
+         </SidebarFooter>
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-08/components/nav-main.tsx b/apps/web/registry/default/blocks/sidebar-08/components/nav-main.tsx
new file mode 100644
index 00000000..5e0ae8a1
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-08/components/nav-main.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      isActive?: boolean
+      items?: {
+         title: string
+         url: string
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Platform</SidebarGroupLabel>
+         <SidebarMenu>
+            {items.map((item) => (
+               <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={item.isActive}
+               >
+                  <SidebarMenuItem>
+                     <SidebarMenuButton asChild tooltip={item.title}>
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                     {item.items?.length ? (
+                        <>
+                           <CollapsibleTrigger asChild>
+                              <SidebarMenuAction className="data-[state=open]:rotate-90">
+                                 <ChevronRight />
+                                 <span className="sr-only">Toggle</span>
+                              </SidebarMenuAction>
+                           </CollapsibleTrigger>
+                           <CollapsibleContent>
+                              <SidebarMenuSub>
+                                 {item.items?.map((subItem) => (
+                                    <SidebarMenuSubItem key={subItem.title}>
+                                       <SidebarMenuSubButton asChild>
+                                          <a href={subItem.url}>
+                                             <span>{subItem.title}</span>
+                                          </a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           </CollapsibleContent>
+                        </>
+                     ) : null}
+                  </SidebarMenuItem>
+               </Collapsible>
+            ))}
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-08/components/nav-projects.tsx b/apps/web/registry/default/blocks/sidebar-08/components/nav-projects.tsx
new file mode 100644
index 00000000..e74bcd98
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-08/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+   Folder,
+   type LucideIcon,
+   MoreHorizontal,
+   Share,
+   Trash2,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavProjects({
+   projects,
+}: {
+   projects: {
+      name: string
+      url: string
+      icon: LucideIcon
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Projects</SidebarGroupLabel>
+         <SidebarMenu>
+            {projects.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url}>
+                        <item.icon />
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-48"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <Folder className="text-muted-foreground" />
+                           <span>View Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <Share className="text-muted-foreground" />
+                           <span>Share Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete Project</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton>
+                  <MoreHorizontal />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-08/components/nav-secondary.tsx b/apps/web/registry/default/blocks/sidebar-08/components/nav-secondary.tsx
new file mode 100644
index 00000000..4a91913f
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-08/components/nav-secondary.tsx
@@ -0,0 +1,40 @@
+import type { LucideIcon } from "lucide-react"
+import type * as React from "react"
+
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavSecondary({
+   items,
+   ...props
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+   }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+   return (
+      <SidebarGroup {...props}>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                     <SidebarMenuButton asChild size="sm">
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               ))}
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-08/components/nav-user.tsx b/apps/web/registry/default/blocks/sidebar-08/components/nav-user.tsx
new file mode 100644
index 00000000..6566b797
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-08/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="end"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-08/page.tsx b/apps/web/registry/default/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000..fe9a3a3b
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-08/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-08/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-09/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-09/components/app-sidebar.tsx
new file mode 100644
index 00000000..18b844ff
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-09/components/app-sidebar.tsx
@@ -0,0 +1,277 @@
+"use client"
+
+import { ArchiveX, Command, File, Inbox, Send, Trash2 } from "lucide-react"
+import * as React from "react"
+
+import { NavUser } from "~/registry/miami/blocks/sidebar-09/components/nav-user"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarHeader,
+   SidebarInput,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+import { Switch } from "~/registry/miami/ui/switch"
+
+// This is sample data
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Inbox",
+         url: "#",
+         icon: Inbox,
+         isActive: true,
+      },
+      {
+         title: "Drafts",
+         url: "#",
+         icon: File,
+         isActive: false,
+      },
+      {
+         title: "Sent",
+         url: "#",
+         icon: Send,
+         isActive: false,
+      },
+      {
+         title: "Junk",
+         url: "#",
+         icon: ArchiveX,
+         isActive: false,
+      },
+      {
+         title: "Trash",
+         url: "#",
+         icon: Trash2,
+         isActive: false,
+      },
+   ],
+   mails: [
+      {
+         name: "William Smith",
+         email: "williamsmith@example.com",
+         subject: "Meeting Tomorrow",
+         date: "09:34 AM",
+         teaser:
+            "Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.",
+      },
+      {
+         name: "Alice Smith",
+         email: "alicesmith@example.com",
+         subject: "Re: Project Update",
+         date: "Yesterday",
+         teaser:
+            "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.",
+      },
+      {
+         name: "Bob Johnson",
+         email: "bobjohnson@example.com",
+         subject: "Weekend Plans",
+         date: "2 days ago",
+         teaser:
+            "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?",
+      },
+      {
+         name: "Emily Davis",
+         email: "emilydavis@example.com",
+         subject: "Re: Question about Budget",
+         date: "2 days ago",
+         teaser:
+            "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?",
+      },
+      {
+         name: "Michael Wilson",
+         email: "michaelwilson@example.com",
+         subject: "Important Announcement",
+         date: "1 week ago",
+         teaser:
+            "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.",
+      },
+      {
+         name: "Sarah Brown",
+         email: "sarahbrown@example.com",
+         subject: "Re: Feedback on Proposal",
+         date: "1 week ago",
+         teaser:
+            "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?",
+      },
+      {
+         name: "David Lee",
+         email: "davidlee@example.com",
+         subject: "New Project Idea",
+         date: "1 week ago",
+         teaser:
+            "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?",
+      },
+      {
+         name: "Olivia Wilson",
+         email: "oliviawilson@example.com",
+         subject: "Vacation Plans",
+         date: "1 week ago",
+         teaser:
+            "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.",
+      },
+      {
+         name: "James Martin",
+         email: "jamesmartin@example.com",
+         subject: "Re: Conference Registration",
+         date: "1 week ago",
+         teaser:
+            "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.",
+      },
+      {
+         name: "Sophia White",
+         email: "sophiawhite@example.com",
+         subject: "Team Dinner",
+         date: "1 week ago",
+         teaser:
+            "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.",
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   // Note: I'm using state to show active item.
+   // IRL you should use the url/router.
+   const [activeItem, setActiveItem] = React.useState(data.navMain[0])
+   const [mails, setMails] = React.useState(data.mails)
+   const { setOpen } = useSidebar()
+
+   return (
+      <Sidebar
+         collapsible="icon"
+         className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row"
+         {...props}
+      >
+         {/* This is the first sidebar */}
+         {/* We disable collapsible and adjust width to icon. */}
+         {/* This will make the sidebar appear as icons. */}
+         <Sidebar
+            collapsible="none"
+            className="!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r"
+         >
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton
+                        size="lg"
+                        asChild
+                        className="md:h-8 md:p-0"
+                     >
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <Command className="size-4" />
+                           </div>
+                           <div className="grid flex-1 text-left text-sm leading-tight">
+                              <span className="truncate font-semibold">
+                                 Acme Inc
+                              </span>
+                              <span className="truncate text-xs">
+                                 Enterprise
+                              </span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupContent className="px-1.5 md:px-0">
+                     <SidebarMenu>
+                        {data.navMain.map((item) => (
+                           <SidebarMenuItem key={item.title}>
+                              <SidebarMenuButton
+                                 tooltip={{
+                                    children: item.title,
+                                    hidden: false,
+                                 }}
+                                 onClick={() => {
+                                    setActiveItem(item)
+                                    const mail = data.mails.sort(
+                                       () => Math.random() - 0.5,
+                                    )
+                                    setMails(
+                                       mail.slice(
+                                          0,
+                                          Math.max(
+                                             5,
+                                             Math.floor(Math.random() * 10) + 1,
+                                          ),
+                                       ),
+                                    )
+                                    setOpen(true)
+                                 }}
+                                 isActive={activeItem.title === item.title}
+                                 className="px-2.5 md:px-2"
+                              >
+                                 <item.icon />
+                                 <span>{item.title}</span>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+               <NavUser user={data.user} />
+            </SidebarFooter>
+         </Sidebar>
+
+         {/* This is the second sidebar */}
+         {/* We disable collapsible and let it fill remaining space */}
+         <Sidebar collapsible="none" className="hidden flex-1 md:flex">
+            <SidebarHeader className="gap-3.5 border-b p-4">
+               <div className="flex w-full items-center justify-between">
+                  <div className="text-base font-medium text-foreground">
+                     {activeItem.title}
+                  </div>
+                  <Label className="flex items-center gap-2 text-sm">
+                     <span>Unreads</span>
+                     <Switch className="shadow-none" />
+                  </Label>
+               </div>
+               <SidebarInput placeholder="Type to search..." />
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup className="px-0">
+                  <SidebarGroupContent>
+                     {mails.map((mail) => (
+                        <a
+                           href="#"
+                           key={mail.email}
+                           className="flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                        >
+                           <div className="flex w-full items-center gap-2">
+                              <span>{mail.name}</span>{" "}
+                              <span className="ml-auto text-xs">
+                                 {mail.date}
+                              </span>
+                           </div>
+                           <span className="font-medium">{mail.subject}</span>
+                           <span className="line-clamp-2 w-[260px] whitespace-break-spaces text-xs">
+                              {mail.teaser}
+                           </span>
+                        </a>
+                     ))}
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-09/components/nav-user.tsx b/apps/web/registry/default/blocks/sidebar-09/components/nav-user.tsx
new file mode 100644
index 00000000..64dded54
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-09/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="end"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-09/page.tsx b/apps/web/registry/default/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000..094ad2dc
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-09/page.tsx
@@ -0,0 +1,54 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-09/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider
+         style={
+            {
+               "--sidebar-width": "350px",
+            } as React.CSSProperties
+         }
+      >
+         <AppSidebar />
+         <SidebarInset>
+            <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Inbox</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               {Array.from({ length: 24 }).map((_, index) => (
+                  <div
+                     key={index}
+                     className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                  />
+               ))}
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-10/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-10/components/app-sidebar.tsx
new file mode 100644
index 00000000..dab4a25a
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-10/components/app-sidebar.tsx
@@ -0,0 +1,276 @@
+"use client"
+
+import {
+   AudioWaveform,
+   Blocks,
+   Calendar,
+   Command,
+   Home,
+   Inbox,
+   MessageCircleQuestion,
+   Search,
+   Settings2,
+   Sparkles,
+   Trash2,
+} from "lucide-react"
+import type * as React from "react"
+
+import { NavFavorites } from "~/registry/miami/blocks/sidebar-10/components/nav-favorites"
+import { NavMain } from "~/registry/miami/blocks/sidebar-10/components/nav-main"
+import { NavSecondary } from "~/registry/miami/blocks/sidebar-10/components/nav-secondary"
+import { NavWorkspaces } from "~/registry/miami/blocks/sidebar-10/components/nav-workspaces"
+import { TeamSwitcher } from "~/registry/miami/blocks/sidebar-10/components/team-switcher"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarHeader,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: Command,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Search",
+         url: "#",
+         icon: Search,
+      },
+      {
+         title: "Ask AI",
+         url: "#",
+         icon: Sparkles,
+      },
+      {
+         title: "Home",
+         url: "#",
+         icon: Home,
+         isActive: true,
+      },
+      {
+         title: "Inbox",
+         url: "#",
+         icon: Inbox,
+         badge: "10",
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Calendar",
+         url: "#",
+         icon: Calendar,
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+      },
+      {
+         title: "Templates",
+         url: "#",
+         icon: Blocks,
+      },
+      {
+         title: "Trash",
+         url: "#",
+         icon: Trash2,
+      },
+      {
+         title: "Help",
+         url: "#",
+         icon: MessageCircleQuestion,
+      },
+   ],
+   favorites: [
+      {
+         name: "Project Management & Task Tracking",
+         url: "#",
+         emoji: "📊",
+      },
+      {
+         name: "Family Recipe Collection & Meal Planning",
+         url: "#",
+         emoji: "🍳",
+      },
+      {
+         name: "Fitness Tracker & Workout Routines",
+         url: "#",
+         emoji: "💪",
+      },
+      {
+         name: "Book Notes & Reading List",
+         url: "#",
+         emoji: "📚",
+      },
+      {
+         name: "Sustainable Gardening Tips & Plant Care",
+         url: "#",
+         emoji: "🌱",
+      },
+      {
+         name: "Language Learning Progress & Resources",
+         url: "#",
+         emoji: "🗣️",
+      },
+      {
+         name: "Home Renovation Ideas & Budget Tracker",
+         url: "#",
+         emoji: "🏠",
+      },
+      {
+         name: "Personal Finance & Investment Portfolio",
+         url: "#",
+         emoji: "💰",
+      },
+      {
+         name: "Movie & TV Show Watchlist with Reviews",
+         url: "#",
+         emoji: "🎬",
+      },
+      {
+         name: "Daily Habit Tracker & Goal Setting",
+         url: "#",
+         emoji: "✅",
+      },
+   ],
+   workspaces: [
+      {
+         name: "Personal Life Management",
+         emoji: "🏠",
+         pages: [
+            {
+               name: "Daily Journal & Reflection",
+               url: "#",
+               emoji: "📔",
+            },
+            {
+               name: "Health & Wellness Tracker",
+               url: "#",
+               emoji: "🍏",
+            },
+            {
+               name: "Personal Growth & Learning Goals",
+               url: "#",
+               emoji: "🌟",
+            },
+         ],
+      },
+      {
+         name: "Professional Development",
+         emoji: "💼",
+         pages: [
+            {
+               name: "Career Objectives & Milestones",
+               url: "#",
+               emoji: "🎯",
+            },
+            {
+               name: "Skill Acquisition & Training Log",
+               url: "#",
+               emoji: "🧠",
+            },
+            {
+               name: "Networking Contacts & Events",
+               url: "#",
+               emoji: "🤝",
+            },
+         ],
+      },
+      {
+         name: "Creative Projects",
+         emoji: "🎨",
+         pages: [
+            {
+               name: "Writing Ideas & Story Outlines",
+               url: "#",
+               emoji: "✍️",
+            },
+            {
+               name: "Art & Design Portfolio",
+               url: "#",
+               emoji: "🖼️",
+            },
+            {
+               name: "Music Composition & Practice Log",
+               url: "#",
+               emoji: "🎵",
+            },
+         ],
+      },
+      {
+         name: "Home Management",
+         emoji: "🏡",
+         pages: [
+            {
+               name: "Household Budget & Expense Tracking",
+               url: "#",
+               emoji: "💰",
+            },
+            {
+               name: "Home Maintenance Schedule & Tasks",
+               url: "#",
+               emoji: "🔧",
+            },
+            {
+               name: "Family Calendar & Event Planning",
+               url: "#",
+               emoji: "📅",
+            },
+         ],
+      },
+      {
+         name: "Travel & Adventure",
+         emoji: "🧳",
+         pages: [
+            {
+               name: "Trip Planning & Itineraries",
+               url: "#",
+               emoji: "🗺️",
+            },
+            {
+               name: "Travel Bucket List & Inspiration",
+               url: "#",
+               emoji: "🌎",
+            },
+            {
+               name: "Travel Journal & Photo Gallery",
+               url: "#",
+               emoji: "📸",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar className="border-r-0" {...props}>
+         <SidebarHeader>
+            <TeamSwitcher teams={data.teams} />
+            <NavMain items={data.navMain} />
+         </SidebarHeader>
+         <SidebarContent>
+            <NavFavorites favorites={data.favorites} />
+            <NavWorkspaces workspaces={data.workspaces} />
+            <NavSecondary items={data.navSecondary} className="mt-auto" />
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-10/components/nav-actions.tsx b/apps/web/registry/default/blocks/sidebar-10/components/nav-actions.tsx
new file mode 100644
index 00000000..63f6f503
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-10/components/nav-actions.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import {
+   ArrowDown,
+   ArrowUp,
+   Bell,
+   Copy,
+   CornerUpLeft,
+   CornerUpRight,
+   FileText,
+   GalleryVerticalEnd,
+   LineChart,
+   Link,
+   MoreHorizontal,
+   Settings2,
+   Star,
+   Trash,
+   Trash2,
+} from "lucide-react"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+const data = [
+   [
+      {
+         label: "Customize Page",
+         icon: Settings2,
+      },
+      {
+         label: "Turn into wiki",
+         icon: FileText,
+      },
+   ],
+   [
+      {
+         label: "Copy Link",
+         icon: Link,
+      },
+      {
+         label: "Duplicate",
+         icon: Copy,
+      },
+      {
+         label: "Move to",
+         icon: CornerUpRight,
+      },
+      {
+         label: "Move to Trash",
+         icon: Trash2,
+      },
+   ],
+   [
+      {
+         label: "Undo",
+         icon: CornerUpLeft,
+      },
+      {
+         label: "View analytics",
+         icon: LineChart,
+      },
+      {
+         label: "Version History",
+         icon: GalleryVerticalEnd,
+      },
+      {
+         label: "Show delete pages",
+         icon: Trash,
+      },
+      {
+         label: "Notifications",
+         icon: Bell,
+      },
+   ],
+   [
+      {
+         label: "Import",
+         icon: ArrowUp,
+      },
+      {
+         label: "Export",
+         icon: ArrowDown,
+      },
+   ],
+]
+
+export function NavActions() {
+   const [isOpen, setIsOpen] = React.useState(false)
+
+   React.useEffect(() => {
+      setIsOpen(true)
+   }, [])
+
+   return (
+      <div className="flex items-center gap-2 text-sm">
+         <div className="hidden font-medium text-muted-foreground md:inline-block">
+            Edit Oct 08
+         </div>
+         <Button variant="ghost" size="icon" className="h-7 w-7">
+            <Star />
+         </Button>
+         <Popover open={isOpen} onOpenChange={setIsOpen}>
+            <PopoverTrigger asChild>
+               <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 data-[state=open]:bg-accent"
+               >
+                  <MoreHorizontal />
+               </Button>
+            </PopoverTrigger>
+            <PopoverContent
+               className="w-56 overflow-hidden rounded-lg p-0"
+               align="end"
+            >
+               <Sidebar collapsible="none" className="bg-transparent">
+                  <SidebarContent>
+                     {data.map((group, index) => (
+                        <SidebarGroup
+                           key={index}
+                           className="border-b last:border-none"
+                        >
+                           <SidebarGroupContent className="gap-0">
+                              <SidebarMenu>
+                                 {group.map((item, index) => (
+                                    <SidebarMenuItem key={index}>
+                                       <SidebarMenuButton>
+                                          <item.icon />{" "}
+                                          <span>{item.label}</span>
+                                       </SidebarMenuButton>
+                                    </SidebarMenuItem>
+                                 ))}
+                              </SidebarMenu>
+                           </SidebarGroupContent>
+                        </SidebarGroup>
+                     ))}
+                  </SidebarContent>
+               </Sidebar>
+            </PopoverContent>
+         </Popover>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-10/components/nav-favorites.tsx b/apps/web/registry/default/blocks/sidebar-10/components/nav-favorites.tsx
new file mode 100644
index 00000000..d46120ad
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-10/components/nav-favorites.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import {
+   ArrowUpRight,
+   Link,
+   MoreHorizontal,
+   StarOff,
+   Trash2,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavFavorites({
+   favorites,
+}: {
+   favorites: {
+      name: string
+      url: string
+      emoji: string
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+         <SidebarMenu>
+            {favorites.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url} title={item.name}>
+                        <span>{item.emoji}</span>
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-56 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <StarOff className="text-muted-foreground" />
+                           <span>Remove from Favorites</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Link className="text-muted-foreground" />
+                           <span>Copy Link</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <ArrowUpRight className="text-muted-foreground" />
+                           <span>Open in New Tab</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-10/components/nav-main.tsx b/apps/web/registry/default/blocks/sidebar-10/components/nav-main.tsx
new file mode 100644
index 00000000..495f0cab
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-10/components/nav-main.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import type { LucideIcon } from "lucide-react"
+
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      isActive?: boolean
+   }[]
+}) {
+   return (
+      <SidebarMenu>
+         {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+               <SidebarMenuButton asChild isActive={item.isActive}>
+                  <a href={item.url}>
+                     <item.icon />
+                     <span>{item.title}</span>
+                  </a>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         ))}
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-10/components/nav-secondary.tsx b/apps/web/registry/default/blocks/sidebar-10/components/nav-secondary.tsx
new file mode 100644
index 00000000..c8185d17
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-10/components/nav-secondary.tsx
@@ -0,0 +1,45 @@
+import type { LucideIcon } from "lucide-react"
+import type React from "react"
+
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavSecondary({
+   items,
+   ...props
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      badge?: React.ReactNode
+   }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+   return (
+      <SidebarGroup {...props}>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                     <SidebarMenuButton asChild>
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                     {item.badge && (
+                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+                     )}
+                  </SidebarMenuItem>
+               ))}
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-10/components/nav-workspaces.tsx b/apps/web/registry/default/blocks/sidebar-10/components/nav-workspaces.tsx
new file mode 100644
index 00000000..0e7860e8
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-10/components/nav-workspaces.tsx
@@ -0,0 +1,85 @@
+import { ChevronRight, MoreHorizontal, Plus } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavWorkspaces({
+   workspaces,
+}: {
+   workspaces: {
+      name: string
+      emoji: React.ReactNode
+      pages: {
+         name: string
+         emoji: React.ReactNode
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {workspaces.map((workspace) => (
+                  <Collapsible key={workspace.name}>
+                     <SidebarMenuItem>
+                        <SidebarMenuButton asChild>
+                           <a href="#">
+                              <span>{workspace.emoji}</span>
+                              <span>{workspace.name}</span>
+                           </a>
+                        </SidebarMenuButton>
+                        <CollapsibleTrigger asChild>
+                           <SidebarMenuAction
+                              className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                              showOnHover
+                           >
+                              <ChevronRight />
+                           </SidebarMenuAction>
+                        </CollapsibleTrigger>
+                        <SidebarMenuAction showOnHover>
+                           <Plus />
+                        </SidebarMenuAction>
+                        <CollapsibleContent>
+                           <SidebarMenuSub>
+                              {workspace.pages.map((page) => (
+                                 <SidebarMenuSubItem key={page.name}>
+                                    <SidebarMenuSubButton asChild>
+                                       <a href="#">
+                                          <span>{page.emoji}</span>
+                                          <span>{page.name}</span>
+                                       </a>
+                                    </SidebarMenuSubButton>
+                                 </SidebarMenuSubItem>
+                              ))}
+                           </SidebarMenuSub>
+                        </CollapsibleContent>
+                     </SidebarMenuItem>
+                  </Collapsible>
+               ))}
+               <SidebarMenuItem>
+                  <SidebarMenuButton className="text-sidebar-foreground/70">
+                     <MoreHorizontal />
+                     <span>More</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-10/components/team-switcher.tsx b/apps/web/registry/default/blocks/sidebar-10/components/team-switcher.tsx
new file mode 100644
index 00000000..01cd8f1d
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-10/components/team-switcher.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import { ChevronDown, Plus } from "lucide-react"
+import * as React from "react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function TeamSwitcher({
+   teams,
+}: {
+   teams: {
+      name: string
+      logo: React.ElementType
+      plan: string
+   }[]
+}) {
+   const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="w-fit px-1.5">
+                     <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                        <activeTeam.logo className="size-3" />
+                     </div>
+                     <span className="truncate font-semibold">
+                        {activeTeam.name}
+                     </span>
+                     <ChevronDown className="opacity-50" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-64 rounded-lg"
+                  align="start"
+                  side="bottom"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                     Teams
+                  </DropdownMenuLabel>
+                  {teams.map((team, index) => (
+                     <DropdownMenuItem
+                        key={team.name}
+                        onClick={() => setActiveTeam(team)}
+                        className="gap-2 p-2"
+                     >
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
+                           <team.logo className="size-4 shrink-0" />
+                        </div>
+                        {team.name}
+                        <DropdownMenuShortcut>
+                           ⌘{index + 1}
+                        </DropdownMenuShortcut>
+                     </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                     <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                        <Plus className="size-4" />
+                     </div>
+                     <div className="font-medium text-muted-foreground">
+                        Add team
+                     </div>
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-10/page.tsx b/apps/web/registry/default/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000..852aec2d
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-10/page.tsx
@@ -0,0 +1,46 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-10/components/app-sidebar"
+import { NavActions } from "~/registry/miami/blocks/sidebar-10/components/nav-actions"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-14 shrink-0 items-center gap-2">
+               <div className="flex flex-1 items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem>
+                           <BreadcrumbPage className="line-clamp-1">
+                              Project Management & Task Tracking
+                           </BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+               <div className="ml-auto px-3">
+                  <NavActions />
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+               <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+               <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-11/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-11/components/app-sidebar.tsx
new file mode 100644
index 00000000..b8d9af2e
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-11/components/app-sidebar.tsx
@@ -0,0 +1,141 @@
+import { ChevronRight, File, Folder } from "lucide-react"
+import type * as React from "react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   changes: [
+      {
+         file: "README.md",
+         state: "M",
+      },
+      {
+         file: "api/hello/route.ts",
+         state: "U",
+      },
+      {
+         file: "app/layout.tsx",
+         state: "M",
+      },
+   ],
+   tree: [
+      [
+         "app",
+         [
+            "api",
+            ["hello", ["route.ts"]],
+            "page.tsx",
+            "layout.tsx",
+            ["blog", ["page.tsx"]],
+         ],
+      ],
+      [
+         "components",
+         ["ui", "button.tsx", "card.tsx"],
+         "header.tsx",
+         "footer.tsx",
+      ],
+      ["lib", ["util.ts"]],
+      ["public", "favicon.ico", "vercel.svg"],
+      ".eslintrc.json",
+      ".gitignore",
+      "next.config.js",
+      "tailwind.config.js",
+      "package.json",
+      "README.md",
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarGroupLabel>Changes</SidebarGroupLabel>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {data.changes.map((item, index) => (
+                        <SidebarMenuItem key={index}>
+                           <SidebarMenuButton>
+                              <File />
+                              {item.file}
+                           </SidebarMenuButton>
+                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+            <SidebarGroup>
+               <SidebarGroupLabel>Files</SidebarGroupLabel>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {data.tree.map((item, index) => (
+                        <Tree key={index} item={item} />
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
+
+function Tree({ item }: { item: string | any[] }) {
+   const [name, ...items] = Array.isArray(item) ? item : [item]
+
+   if (!items.length) {
+      return (
+         <SidebarMenuButton
+            isActive={name === "button.tsx"}
+            className="data-[active=true]:bg-transparent"
+         >
+            <File />
+            {name}
+         </SidebarMenuButton>
+      )
+   }
+
+   return (
+      <SidebarMenuItem>
+         <Collapsible
+            className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+            defaultOpen={name === "components" || name === "ui"}
+         >
+            <CollapsibleTrigger asChild>
+               <SidebarMenuButton>
+                  <ChevronRight className="transition-transform" />
+                  <Folder />
+                  {name}
+               </SidebarMenuButton>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+               <SidebarMenuSub>
+                  {items.map((subItem, index) => (
+                     <Tree key={index} item={subItem} />
+                  ))}
+               </SidebarMenuSub>
+            </CollapsibleContent>
+         </Collapsible>
+      </SidebarMenuItem>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-11/page.tsx b/apps/web/registry/default/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000..aa1c0fa5
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-11/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-11/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">components</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">ui</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>button.tsx</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-12/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-12/components/app-sidebar.tsx
new file mode 100644
index 00000000..298a9346
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-12/components/app-sidebar.tsx
@@ -0,0 +1,66 @@
+import { Plus } from "lucide-react"
+import type * as React from "react"
+
+import { Calendars } from "~/registry/miami/blocks/sidebar-12/components/calendars"
+import { DatePicker } from "~/registry/miami/blocks/sidebar-12/components/date-picker"
+import { NavUser } from "~/registry/miami/blocks/sidebar-12/components/nav-user"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarRail,
+   SidebarSeparator,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   calendars: [
+      {
+         name: "My Calendars",
+         items: ["Personal", "Work", "Family"],
+      },
+      {
+         name: "Favorites",
+         items: ["Holidays", "Birthdays"],
+      },
+      {
+         name: "Other",
+         items: ["Travel", "Reminders", "Deadlines"],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader className="h-16 border-b border-sidebar-border">
+            <NavUser user={data.user} />
+         </SidebarHeader>
+         <SidebarContent>
+            <DatePicker />
+            <SidebarSeparator className="mx-0" />
+            <Calendars calendars={data.calendars} />
+         </SidebarContent>
+         <SidebarFooter>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton>
+                     <Plus />
+                     <span>New Calendar</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarFooter>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-12/components/calendars.tsx b/apps/web/registry/default/blocks/sidebar-12/components/calendars.tsx
new file mode 100644
index 00000000..2441d87a
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-12/components/calendars.tsx
@@ -0,0 +1,71 @@
+import { Check, ChevronRight } from "lucide-react"
+import * as React from "react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarSeparator,
+} from "~/registry/miami/ui/sidebar"
+
+export function Calendars({
+   calendars,
+}: {
+   calendars: {
+      name: string
+      items: string[]
+   }[]
+}) {
+   return (
+      <>
+         {calendars.map((calendar, index) => (
+            <React.Fragment key={calendar.name}>
+               <SidebarGroup key={calendar.name} className="py-0">
+                  <Collapsible
+                     defaultOpen={index === 0}
+                     className="group/collapsible"
+                  >
+                     <SidebarGroupLabel
+                        asChild
+                        className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                     >
+                        <CollapsibleTrigger>
+                           {calendar.name}{" "}
+                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                        </CollapsibleTrigger>
+                     </SidebarGroupLabel>
+                     <CollapsibleContent>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {calendar.items.map((item, index) => (
+                                 <SidebarMenuItem key={item}>
+                                    <SidebarMenuButton>
+                                       <div
+                                          data-active={index < 2}
+                                          className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                                       >
+                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                                       </div>
+                                       {item}
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </CollapsibleContent>
+                  </Collapsible>
+               </SidebarGroup>
+               <SidebarSeparator className="mx-0" />
+            </React.Fragment>
+         ))}
+      </>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-12/components/date-picker.tsx b/apps/web/registry/default/blocks/sidebar-12/components/date-picker.tsx
new file mode 100644
index 00000000..ef721c1a
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-12/components/date-picker.tsx
@@ -0,0 +1,12 @@
+import { Calendar } from "~/registry/miami/ui/calendar"
+import { SidebarGroup, SidebarGroupContent } from "~/registry/miami/ui/sidebar"
+
+export function DatePicker() {
+   return (
+      <SidebarGroup className="px-0">
+         <SidebarGroupContent>
+            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-12/components/nav-user.tsx b/apps/web/registry/default/blocks/sidebar-12/components/nav-user.tsx
new file mode 100644
index 00000000..6c037c95
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-12/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="start"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-12/page.tsx b/apps/web/registry/default/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000..442fec4a
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-12/page.tsx
@@ -0,0 +1,44 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-12/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>October 2024</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+                  {Array.from({ length: 20 }).map((_, i) => (
+                     <div
+                        key={i}
+                        className="aspect-square rounded-xl bg-muted/50"
+                     />
+                  ))}
+               </div>
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-13/components/settings-dialog.tsx b/apps/web/registry/default/blocks/sidebar-13/components/settings-dialog.tsx
new file mode 100644
index 00000000..19ddff90
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-13/components/settings-dialog.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import {
+   Bell,
+   Check,
+   Globe,
+   Home,
+   Keyboard,
+   Link,
+   Lock,
+   Menu,
+   MessageCircle,
+   Paintbrush,
+   Settings,
+   Video,
+} from "lucide-react"
+import * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogTitle,
+   DialogTrigger,
+} from "~/registry/miami/ui/dialog"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const data = {
+   nav: [
+      { name: "Notifications", icon: Bell },
+      { name: "Navigation", icon: Menu },
+      { name: "Home", icon: Home },
+      { name: "Appearance", icon: Paintbrush },
+      { name: "Messages & media", icon: MessageCircle },
+      { name: "Language & region", icon: Globe },
+      { name: "Accessibility", icon: Keyboard },
+      { name: "Mark as read", icon: Check },
+      { name: "Audio & video", icon: Video },
+      { name: "Connected accounts", icon: Link },
+      { name: "Privacy & visibility", icon: Lock },
+      { name: "Advanced", icon: Settings },
+   ],
+}
+
+export function SettingsDialog() {
+   const [open, setOpen] = React.useState(true)
+
+   return (
+      <Dialog open={open} onOpenChange={setOpen}>
+         <DialogTrigger asChild>
+            <Button size="sm">Open Dialog</Button>
+         </DialogTrigger>
+         <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+            <DialogTitle className="sr-only">Settings</DialogTitle>
+            <DialogDescription className="sr-only">
+               Customize your settings here.
+            </DialogDescription>
+            <SidebarProvider className="items-start">
+               <Sidebar collapsible="none" className="hidden md:flex">
+                  <SidebarContent>
+                     <SidebarGroup>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {data.nav.map((item) => (
+                                 <SidebarMenuItem key={item.name}>
+                                    <SidebarMenuButton
+                                       asChild
+                                       isActive={
+                                          item.name === "Messages & media"
+                                       }
+                                    >
+                                       <a href="#">
+                                          <item.icon />
+                                          <span>{item.name}</span>
+                                       </a>
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </SidebarGroup>
+                  </SidebarContent>
+               </Sidebar>
+               <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
+                  <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+                     <div className="flex items-center gap-2 px-4">
+                        <Breadcrumb>
+                           <BreadcrumbList>
+                              <BreadcrumbItem className="hidden md:block">
+                                 <BreadcrumbLink href="#">
+                                    Settings
+                                 </BreadcrumbLink>
+                              </BreadcrumbItem>
+                              <BreadcrumbSeparator className="hidden md:block" />
+                              <BreadcrumbItem>
+                                 <BreadcrumbPage>
+                                    Messages & media
+                                 </BreadcrumbPage>
+                              </BreadcrumbItem>
+                           </BreadcrumbList>
+                        </Breadcrumb>
+                     </div>
+                  </header>
+                  <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+                     {Array.from({ length: 10 }).map((_, i) => (
+                        <div
+                           key={i}
+                           className="aspect-video max-w-3xl rounded-xl bg-muted/50"
+                        />
+                     ))}
+                  </div>
+               </main>
+            </SidebarProvider>
+         </DialogContent>
+      </Dialog>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-13/page.tsx b/apps/web/registry/default/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000..b77c9783
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-13/page.tsx
@@ -0,0 +1,9 @@
+import { SettingsDialog } from "~/registry/miami/blocks/sidebar-13/components/settings-dialog"
+
+export default function Page() {
+   return (
+      <div className="flex h-svh items-center justify-center">
+         <SettingsDialog />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-14/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-14/components/app-sidebar.tsx
new file mode 100644
index 00000000..746ae65f
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-14/components/app-sidebar.tsx
@@ -0,0 +1,197 @@
+import type * as React from "react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {data.navMain.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url} className="font-medium">
+                                 {item.title}
+                              </a>
+                           </SidebarMenuButton>
+                           {item.items?.length ? (
+                              <SidebarMenuSub>
+                                 {item.items.map((item) => (
+                                    <SidebarMenuSubItem key={item.title}>
+                                       <SidebarMenuSubButton
+                                          asChild
+                                          isActive={item.isActive}
+                                       >
+                                          <a href={item.url}>{item.title}</a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           ) : null}
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-14/page.tsx b/apps/web/registry/default/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000..31e89b6c
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-14/page.tsx
@@ -0,0 +1,48 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-14/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+               <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+         <AppSidebar side="right" />
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-15/components/calendars.tsx b/apps/web/registry/default/blocks/sidebar-15/components/calendars.tsx
new file mode 100644
index 00000000..2441d87a
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-15/components/calendars.tsx
@@ -0,0 +1,71 @@
+import { Check, ChevronRight } from "lucide-react"
+import * as React from "react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarSeparator,
+} from "~/registry/miami/ui/sidebar"
+
+export function Calendars({
+   calendars,
+}: {
+   calendars: {
+      name: string
+      items: string[]
+   }[]
+}) {
+   return (
+      <>
+         {calendars.map((calendar, index) => (
+            <React.Fragment key={calendar.name}>
+               <SidebarGroup key={calendar.name} className="py-0">
+                  <Collapsible
+                     defaultOpen={index === 0}
+                     className="group/collapsible"
+                  >
+                     <SidebarGroupLabel
+                        asChild
+                        className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                     >
+                        <CollapsibleTrigger>
+                           {calendar.name}{" "}
+                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                        </CollapsibleTrigger>
+                     </SidebarGroupLabel>
+                     <CollapsibleContent>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {calendar.items.map((item, index) => (
+                                 <SidebarMenuItem key={item}>
+                                    <SidebarMenuButton>
+                                       <div
+                                          data-active={index < 2}
+                                          className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                                       >
+                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                                       </div>
+                                       {item}
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </CollapsibleContent>
+                  </Collapsible>
+               </SidebarGroup>
+               <SidebarSeparator className="mx-0" />
+            </React.Fragment>
+         ))}
+      </>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-15/components/date-picker.tsx b/apps/web/registry/default/blocks/sidebar-15/components/date-picker.tsx
new file mode 100644
index 00000000..ef721c1a
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-15/components/date-picker.tsx
@@ -0,0 +1,12 @@
+import { Calendar } from "~/registry/miami/ui/calendar"
+import { SidebarGroup, SidebarGroupContent } from "~/registry/miami/ui/sidebar"
+
+export function DatePicker() {
+   return (
+      <SidebarGroup className="px-0">
+         <SidebarGroupContent>
+            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-15/components/nav-favorites.tsx b/apps/web/registry/default/blocks/sidebar-15/components/nav-favorites.tsx
new file mode 100644
index 00000000..d46120ad
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-15/components/nav-favorites.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import {
+   ArrowUpRight,
+   Link,
+   MoreHorizontal,
+   StarOff,
+   Trash2,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavFavorites({
+   favorites,
+}: {
+   favorites: {
+      name: string
+      url: string
+      emoji: string
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+         <SidebarMenu>
+            {favorites.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url} title={item.name}>
+                        <span>{item.emoji}</span>
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-56 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <StarOff className="text-muted-foreground" />
+                           <span>Remove from Favorites</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Link className="text-muted-foreground" />
+                           <span>Copy Link</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <ArrowUpRight className="text-muted-foreground" />
+                           <span>Open in New Tab</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-15/components/nav-main.tsx b/apps/web/registry/default/blocks/sidebar-15/components/nav-main.tsx
new file mode 100644
index 00000000..495f0cab
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-15/components/nav-main.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import type { LucideIcon } from "lucide-react"
+
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      isActive?: boolean
+   }[]
+}) {
+   return (
+      <SidebarMenu>
+         {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+               <SidebarMenuButton asChild isActive={item.isActive}>
+                  <a href={item.url}>
+                     <item.icon />
+                     <span>{item.title}</span>
+                  </a>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         ))}
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-15/components/nav-secondary.tsx b/apps/web/registry/default/blocks/sidebar-15/components/nav-secondary.tsx
new file mode 100644
index 00000000..c8185d17
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-15/components/nav-secondary.tsx
@@ -0,0 +1,45 @@
+import type { LucideIcon } from "lucide-react"
+import type React from "react"
+
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavSecondary({
+   items,
+   ...props
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      badge?: React.ReactNode
+   }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+   return (
+      <SidebarGroup {...props}>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                     <SidebarMenuButton asChild>
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                     {item.badge && (
+                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+                     )}
+                  </SidebarMenuItem>
+               ))}
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-15/components/nav-user.tsx b/apps/web/registry/default/blocks/sidebar-15/components/nav-user.tsx
new file mode 100644
index 00000000..6c037c95
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-15/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="start"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-15/components/nav-workspaces.tsx b/apps/web/registry/default/blocks/sidebar-15/components/nav-workspaces.tsx
new file mode 100644
index 00000000..0e7860e8
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-15/components/nav-workspaces.tsx
@@ -0,0 +1,85 @@
+import { ChevronRight, MoreHorizontal, Plus } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavWorkspaces({
+   workspaces,
+}: {
+   workspaces: {
+      name: string
+      emoji: React.ReactNode
+      pages: {
+         name: string
+         emoji: React.ReactNode
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {workspaces.map((workspace) => (
+                  <Collapsible key={workspace.name}>
+                     <SidebarMenuItem>
+                        <SidebarMenuButton asChild>
+                           <a href="#">
+                              <span>{workspace.emoji}</span>
+                              <span>{workspace.name}</span>
+                           </a>
+                        </SidebarMenuButton>
+                        <CollapsibleTrigger asChild>
+                           <SidebarMenuAction
+                              className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                              showOnHover
+                           >
+                              <ChevronRight />
+                           </SidebarMenuAction>
+                        </CollapsibleTrigger>
+                        <SidebarMenuAction showOnHover>
+                           <Plus />
+                        </SidebarMenuAction>
+                        <CollapsibleContent>
+                           <SidebarMenuSub>
+                              {workspace.pages.map((page) => (
+                                 <SidebarMenuSubItem key={page.name}>
+                                    <SidebarMenuSubButton asChild>
+                                       <a href="#">
+                                          <span>{page.emoji}</span>
+                                          <span>{page.name}</span>
+                                       </a>
+                                    </SidebarMenuSubButton>
+                                 </SidebarMenuSubItem>
+                              ))}
+                           </SidebarMenuSub>
+                        </CollapsibleContent>
+                     </SidebarMenuItem>
+                  </Collapsible>
+               ))}
+               <SidebarMenuItem>
+                  <SidebarMenuButton className="text-sidebar-foreground/70">
+                     <MoreHorizontal />
+                     <span>More</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-15/components/sidebar-left.tsx b/apps/web/registry/default/blocks/sidebar-15/components/sidebar-left.tsx
new file mode 100644
index 00000000..e2b006e3
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-15/components/sidebar-left.tsx
@@ -0,0 +1,278 @@
+"use client"
+
+import {
+   AudioWaveform,
+   Blocks,
+   Calendar,
+   Command,
+   Home,
+   Inbox,
+   MessageCircleQuestion,
+   Search,
+   Settings2,
+   Sparkles,
+   Trash2,
+} from "lucide-react"
+import type * as React from "react"
+
+import { NavFavorites } from "~/registry/miami/blocks/sidebar-15/components/nav-favorites"
+import { NavMain } from "~/registry/miami/blocks/sidebar-15/components/nav-main"
+import { NavSecondary } from "~/registry/miami/blocks/sidebar-15/components/nav-secondary"
+import { NavWorkspaces } from "~/registry/miami/blocks/sidebar-15/components/nav-workspaces"
+import { TeamSwitcher } from "~/registry/miami/blocks/sidebar-15/components/team-switcher"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarHeader,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: Command,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Search",
+         url: "#",
+         icon: Search,
+      },
+      {
+         title: "Ask AI",
+         url: "#",
+         icon: Sparkles,
+      },
+      {
+         title: "Home",
+         url: "#",
+         icon: Home,
+         isActive: true,
+      },
+      {
+         title: "Inbox",
+         url: "#",
+         icon: Inbox,
+         badge: "10",
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Calendar",
+         url: "#",
+         icon: Calendar,
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+      },
+      {
+         title: "Templates",
+         url: "#",
+         icon: Blocks,
+      },
+      {
+         title: "Trash",
+         url: "#",
+         icon: Trash2,
+      },
+      {
+         title: "Help",
+         url: "#",
+         icon: MessageCircleQuestion,
+      },
+   ],
+   favorites: [
+      {
+         name: "Project Management & Task Tracking",
+         url: "#",
+         emoji: "📊",
+      },
+      {
+         name: "Family Recipe Collection & Meal Planning",
+         url: "#",
+         emoji: "🍳",
+      },
+      {
+         name: "Fitness Tracker & Workout Routines",
+         url: "#",
+         emoji: "💪",
+      },
+      {
+         name: "Book Notes & Reading List",
+         url: "#",
+         emoji: "📚",
+      },
+      {
+         name: "Sustainable Gardening Tips & Plant Care",
+         url: "#",
+         emoji: "🌱",
+      },
+      {
+         name: "Language Learning Progress & Resources",
+         url: "#",
+         emoji: "🗣️",
+      },
+      {
+         name: "Home Renovation Ideas & Budget Tracker",
+         url: "#",
+         emoji: "🏠",
+      },
+      {
+         name: "Personal Finance & Investment Portfolio",
+         url: "#",
+         emoji: "💰",
+      },
+      {
+         name: "Movie & TV Show Watchlist with Reviews",
+         url: "#",
+         emoji: "🎬",
+      },
+      {
+         name: "Daily Habit Tracker & Goal Setting",
+         url: "#",
+         emoji: "✅",
+      },
+   ],
+   workspaces: [
+      {
+         name: "Personal Life Management",
+         emoji: "🏠",
+         pages: [
+            {
+               name: "Daily Journal & Reflection",
+               url: "#",
+               emoji: "📔",
+            },
+            {
+               name: "Health & Wellness Tracker",
+               url: "#",
+               emoji: "🍏",
+            },
+            {
+               name: "Personal Growth & Learning Goals",
+               url: "#",
+               emoji: "🌟",
+            },
+         ],
+      },
+      {
+         name: "Professional Development",
+         emoji: "💼",
+         pages: [
+            {
+               name: "Career Objectives & Milestones",
+               url: "#",
+               emoji: "🎯",
+            },
+            {
+               name: "Skill Acquisition & Training Log",
+               url: "#",
+               emoji: "🧠",
+            },
+            {
+               name: "Networking Contacts & Events",
+               url: "#",
+               emoji: "🤝",
+            },
+         ],
+      },
+      {
+         name: "Creative Projects",
+         emoji: "🎨",
+         pages: [
+            {
+               name: "Writing Ideas & Story Outlines",
+               url: "#",
+               emoji: "✍️",
+            },
+            {
+               name: "Art & Design Portfolio",
+               url: "#",
+               emoji: "🖼️",
+            },
+            {
+               name: "Music Composition & Practice Log",
+               url: "#",
+               emoji: "🎵",
+            },
+         ],
+      },
+      {
+         name: "Home Management",
+         emoji: "🏡",
+         pages: [
+            {
+               name: "Household Budget & Expense Tracking",
+               url: "#",
+               emoji: "💰",
+            },
+            {
+               name: "Home Maintenance Schedule & Tasks",
+               url: "#",
+               emoji: "🔧",
+            },
+            {
+               name: "Family Calendar & Event Planning",
+               url: "#",
+               emoji: "📅",
+            },
+         ],
+      },
+      {
+         name: "Travel & Adventure",
+         emoji: "🧳",
+         pages: [
+            {
+               name: "Trip Planning & Itineraries",
+               url: "#",
+               emoji: "🗺️",
+            },
+            {
+               name: "Travel Bucket List & Inspiration",
+               url: "#",
+               emoji: "🌎",
+            },
+            {
+               name: "Travel Journal & Photo Gallery",
+               url: "#",
+               emoji: "📸",
+            },
+         ],
+      },
+   ],
+}
+
+export function SidebarLeft({
+   ...props
+}: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar className="border-r-0" {...props}>
+         <SidebarHeader>
+            <TeamSwitcher teams={data.teams} />
+            <NavMain items={data.navMain} />
+         </SidebarHeader>
+         <SidebarContent>
+            <NavFavorites favorites={data.favorites} />
+            <NavWorkspaces workspaces={data.workspaces} />
+            <NavSecondary items={data.navSecondary} className="mt-auto" />
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-15/components/sidebar-right.tsx b/apps/web/registry/default/blocks/sidebar-15/components/sidebar-right.tsx
new file mode 100644
index 00000000..9ccf32e3
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-15/components/sidebar-right.tsx
@@ -0,0 +1,71 @@
+import { Plus } from "lucide-react"
+import type * as React from "react"
+
+import { Calendars } from "~/registry/miami/blocks/sidebar-15/components/calendars"
+import { DatePicker } from "~/registry/miami/blocks/sidebar-15/components/date-picker"
+import { NavUser } from "~/registry/miami/blocks/sidebar-15/components/nav-user"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarRail,
+   SidebarSeparator,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   calendars: [
+      {
+         name: "My Calendars",
+         items: ["Personal", "Work", "Family"],
+      },
+      {
+         name: "Favorites",
+         items: ["Holidays", "Birthdays"],
+      },
+      {
+         name: "Other",
+         items: ["Travel", "Reminders", "Deadlines"],
+      },
+   ],
+}
+
+export function SidebarRight({
+   ...props
+}: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar
+         collapsible="none"
+         className="sticky hidden lg:flex top-0 h-svh border-l"
+         {...props}
+      >
+         <SidebarHeader className="h-16 border-b border-sidebar-border">
+            <NavUser user={data.user} />
+         </SidebarHeader>
+         <SidebarContent>
+            <DatePicker />
+            <SidebarSeparator className="mx-0" />
+            <Calendars calendars={data.calendars} />
+         </SidebarContent>
+         <SidebarFooter>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton>
+                     <Plus />
+                     <span>New Calendar</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarFooter>
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-15/components/team-switcher.tsx b/apps/web/registry/default/blocks/sidebar-15/components/team-switcher.tsx
new file mode 100644
index 00000000..01cd8f1d
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-15/components/team-switcher.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import { ChevronDown, Plus } from "lucide-react"
+import * as React from "react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function TeamSwitcher({
+   teams,
+}: {
+   teams: {
+      name: string
+      logo: React.ElementType
+      plan: string
+   }[]
+}) {
+   const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="w-fit px-1.5">
+                     <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                        <activeTeam.logo className="size-3" />
+                     </div>
+                     <span className="truncate font-semibold">
+                        {activeTeam.name}
+                     </span>
+                     <ChevronDown className="opacity-50" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-64 rounded-lg"
+                  align="start"
+                  side="bottom"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                     Teams
+                  </DropdownMenuLabel>
+                  {teams.map((team, index) => (
+                     <DropdownMenuItem
+                        key={team.name}
+                        onClick={() => setActiveTeam(team)}
+                        className="gap-2 p-2"
+                     >
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
+                           <team.logo className="size-4 shrink-0" />
+                        </div>
+                        {team.name}
+                        <DropdownMenuShortcut>
+                           ⌘{index + 1}
+                        </DropdownMenuShortcut>
+                     </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                     <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                        <Plus className="size-4" />
+                     </div>
+                     <div className="font-medium text-muted-foreground">
+                        Add team
+                     </div>
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-15/page.tsx b/apps/web/registry/default/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000..2c891896
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-15/page.tsx
@@ -0,0 +1,44 @@
+import { SidebarLeft } from "~/registry/miami/blocks/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "~/registry/miami/blocks/sidebar-15/components/sidebar-right"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <SidebarLeft />
+         <SidebarInset>
+            <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+               <div className="flex flex-1 items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem>
+                           <BreadcrumbPage className="line-clamp-1">
+                              Project Management & Task Tracking
+                           </BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+               <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+            </div>
+         </SidebarInset>
+         <SidebarRight />
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-16/components/app-sidebar.tsx b/apps/web/registry/default/blocks/sidebar-16/components/app-sidebar.tsx
new file mode 100644
index 00000000..2e76d6b5
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-16/components/app-sidebar.tsx
@@ -0,0 +1,190 @@
+"use client"
+
+import {
+   BookOpen,
+   Bot,
+   Command,
+   Frame,
+   LifeBuoy,
+   Map,
+   PieChart,
+   Send,
+   Settings2,
+   SquareTerminal,
+} from "lucide-react"
+import type * as React from "react"
+
+import { NavMain } from "~/registry/miami/blocks/sidebar-16/components/nav-main"
+import { NavProjects } from "~/registry/miami/blocks/sidebar-16/components/nav-projects"
+import { NavSecondary } from "~/registry/miami/blocks/sidebar-16/components/nav-secondary"
+import { NavUser } from "~/registry/miami/blocks/sidebar-16/components/nav-user"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Support",
+         url: "#",
+         icon: LifeBuoy,
+      },
+      {
+         title: "Feedback",
+         url: "#",
+         icon: Send,
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar
+         className="top-[--header-height] !h-[calc(100svh-var(--header-height))]"
+         {...props}
+      >
+         <SidebarHeader>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton size="lg" asChild>
+                     <a href="#">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                           <Command className="size-4" />
+                        </div>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              Acme Inc
+                           </span>
+                           <span className="truncate text-xs">Enterprise</span>
+                        </div>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarHeader>
+         <SidebarContent>
+            <NavMain items={data.navMain} />
+            <NavProjects projects={data.projects} />
+            <NavSecondary items={data.navSecondary} className="mt-auto" />
+         </SidebarContent>
+         <SidebarFooter>
+            <NavUser user={data.user} />
+         </SidebarFooter>
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-16/components/nav-main.tsx b/apps/web/registry/default/blocks/sidebar-16/components/nav-main.tsx
new file mode 100644
index 00000000..5e0ae8a1
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-16/components/nav-main.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      isActive?: boolean
+      items?: {
+         title: string
+         url: string
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Platform</SidebarGroupLabel>
+         <SidebarMenu>
+            {items.map((item) => (
+               <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={item.isActive}
+               >
+                  <SidebarMenuItem>
+                     <SidebarMenuButton asChild tooltip={item.title}>
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                     {item.items?.length ? (
+                        <>
+                           <CollapsibleTrigger asChild>
+                              <SidebarMenuAction className="data-[state=open]:rotate-90">
+                                 <ChevronRight />
+                                 <span className="sr-only">Toggle</span>
+                              </SidebarMenuAction>
+                           </CollapsibleTrigger>
+                           <CollapsibleContent>
+                              <SidebarMenuSub>
+                                 {item.items?.map((subItem) => (
+                                    <SidebarMenuSubItem key={subItem.title}>
+                                       <SidebarMenuSubButton asChild>
+                                          <a href={subItem.url}>
+                                             <span>{subItem.title}</span>
+                                          </a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           </CollapsibleContent>
+                        </>
+                     ) : null}
+                  </SidebarMenuItem>
+               </Collapsible>
+            ))}
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-16/components/nav-projects.tsx b/apps/web/registry/default/blocks/sidebar-16/components/nav-projects.tsx
new file mode 100644
index 00000000..e74bcd98
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-16/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+   Folder,
+   type LucideIcon,
+   MoreHorizontal,
+   Share,
+   Trash2,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavProjects({
+   projects,
+}: {
+   projects: {
+      name: string
+      url: string
+      icon: LucideIcon
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Projects</SidebarGroupLabel>
+         <SidebarMenu>
+            {projects.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url}>
+                        <item.icon />
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-48"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <Folder className="text-muted-foreground" />
+                           <span>View Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <Share className="text-muted-foreground" />
+                           <span>Share Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete Project</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton>
+                  <MoreHorizontal />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-16/components/nav-secondary.tsx b/apps/web/registry/default/blocks/sidebar-16/components/nav-secondary.tsx
new file mode 100644
index 00000000..4a91913f
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-16/components/nav-secondary.tsx
@@ -0,0 +1,40 @@
+import type { LucideIcon } from "lucide-react"
+import type * as React from "react"
+
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavSecondary({
+   items,
+   ...props
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+   }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+   return (
+      <SidebarGroup {...props}>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                     <SidebarMenuButton asChild size="sm">
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               ))}
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-16/components/nav-user.tsx b/apps/web/registry/default/blocks/sidebar-16/components/nav-user.tsx
new file mode 100644
index 00000000..6566b797
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-16/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="end"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-16/components/search-form.tsx b/apps/web/registry/default/blocks/sidebar-16/components/search-form.tsx
new file mode 100644
index 00000000..960c1d46
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-16/components/search-form.tsx
@@ -0,0 +1,22 @@
+import { Search } from "lucide-react"
+
+import { Label } from "~/registry/miami/ui/label"
+import { SidebarInput } from "~/registry/miami/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+   return (
+      <form {...props}>
+         <div className="relative">
+            <Label htmlFor="search" className="sr-only">
+               Search
+            </Label>
+            <SidebarInput
+               id="search"
+               placeholder="Type to search..."
+               className="h-8 pl-7"
+            />
+            <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+         </div>
+      </form>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-16/components/site-header.tsx b/apps/web/registry/default/blocks/sidebar-16/components/site-header.tsx
new file mode 100644
index 00000000..3af8a4ce
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-16/components/site-header.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { SidebarIcon } from "lucide-react"
+
+import { SearchForm } from "~/registry/miami/blocks/sidebar-16/components/search-form"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import { Separator } from "~/registry/miami/ui/separator"
+import { useSidebar } from "~/registry/miami/ui/sidebar"
+
+export function SiteHeader() {
+   const { toggleSidebar } = useSidebar()
+
+   return (
+      <header className="fle sticky top-0 z-50 w-full items-center border-b bg-background">
+         <div className="flex h-[--header-height] w-full items-center gap-2 px-4">
+            <Button
+               className="h-8 w-8"
+               variant="ghost"
+               size="icon"
+               onClick={toggleSidebar}
+            >
+               <SidebarIcon />
+            </Button>
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb className="hidden sm:block">
+               <BreadcrumbList>
+                  <BreadcrumbItem>
+                     <BreadcrumbLink href="#">
+                        Building Your Application
+                     </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                     <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                  </BreadcrumbItem>
+               </BreadcrumbList>
+            </Breadcrumb>
+            <SearchForm className="w-full sm:ml-auto sm:w-auto" />
+         </div>
+      </header>
+   )
+}
diff --git a/apps/web/registry/default/blocks/sidebar-16/page.tsx b/apps/web/registry/default/blocks/sidebar-16/page.tsx
new file mode 100644
index 00000000..301f91f1
--- /dev/null
+++ b/apps/web/registry/default/blocks/sidebar-16/page.tsx
@@ -0,0 +1,30 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-16/components/app-sidebar"
+import { SiteHeader } from "~/registry/miami/blocks/sidebar-16/components/site-header"
+import { SidebarInset, SidebarProvider } from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a header and a search form."
+
+export default function Page() {
+   return (
+      <div className="[--header-height:calc(theme(spacing.14))]">
+         <SidebarProvider className="flex flex-col">
+            <SiteHeader />
+            <div className="flex flex-1">
+               <AppSidebar />
+               <SidebarInset>
+                  <div className="flex flex-1 flex-col gap-4 p-4">
+                     <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                        <div className="aspect-video rounded-xl bg-muted/50" />
+                        <div className="aspect-video rounded-xl bg-muted/50" />
+                        <div className="aspect-video rounded-xl bg-muted/50" />
+                     </div>
+                     <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+                  </div>
+               </SidebarInset>
+            </div>
+         </SidebarProvider>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-area-axes.tsx b/apps/web/registry/default/charts/chart-area-axes.tsx
new file mode 100644
index 00000000..92194485
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-area-axes.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An area chart with axes"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Axes</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: -20,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <YAxis
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickCount={3}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-area-default.tsx b/apps/web/registry/default/charts/chart-area-default.tsx
new file mode 100644
index 00000000..164c3c50
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-area-default.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A simple area chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-area-gradient.tsx b/apps/web/registry/default/charts/chart-area-gradient.tsx
new file mode 100644
index 00000000..dcd8e9ec
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-area-gradient.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An area chart with gradient fill"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Gradient</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <defs>
+                     <linearGradient
+                        id="fillDesktop"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                     <linearGradient
+                        id="fillMobile"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                  </defs>
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="url(#fillMobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="url(#fillDesktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-area-icons.tsx b/apps/web/registry/default/charts/chart-area-icons.tsx
new file mode 100644
index 00000000..9cd82054
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-area-icons.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { TrendingDown, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An area chart with icons"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+      icon: TrendingDown,
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+      icon: TrendingUp,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Icons</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-area-interactive.tsx b/apps/web/registry/default/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000..8a4db42e
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-area-interactive.tsx
@@ -0,0 +1,281 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const [timeRange, setTimeRange] = React.useState("90d")
+
+   const filteredData = chartData.filter((item) => {
+      const date = new Date(item.date)
+      const referenceDate = new Date("2024-06-30")
+      let daysToSubtract = 90
+      if (timeRange === "30d") {
+         daysToSubtract = 30
+      } else if (timeRange === "7d") {
+         daysToSubtract = 7
+      }
+      const startDate = new Date(referenceDate)
+      startDate.setDate(startDate.getDate() - daysToSubtract)
+      return date >= startDate
+   })
+
+   return (
+      <Card>
+         <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
+            <div className="grid flex-1 gap-1 text-center sm:text-left">
+               <CardTitle>Area Chart - Interactive</CardTitle>
+               <CardDescription>
+                  Showing total visitors for the last 3 months
+               </CardDescription>
+            </div>
+            <Select value={timeRange} onValueChange={setTimeRange}>
+               <SelectTrigger
+                  className="w-[160px] rounded-lg sm:ml-auto"
+                  aria-label="Select a value"
+               >
+                  <SelectValue placeholder="Last 3 months" />
+               </SelectTrigger>
+               <SelectContent className="rounded-xl">
+                  <SelectItem value="90d" className="rounded-lg">
+                     Last 3 months
+                  </SelectItem>
+                  <SelectItem value="30d" className="rounded-lg">
+                     Last 30 days
+                  </SelectItem>
+                  <SelectItem value="7d" className="rounded-lg">
+                     Last 7 days
+                  </SelectItem>
+               </SelectContent>
+            </Select>
+         </CardHeader>
+         <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+            <ChartContainer
+               config={chartConfig}
+               className="aspect-auto h-[250px] w-full"
+            >
+               <AreaChart data={filteredData}>
+                  <defs>
+                     <linearGradient
+                        id="fillDesktop"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                     <linearGradient
+                        id="fillMobile"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                  </defs>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     minTickGap={32}
+                     tickFormatter={(value) => {
+                        const date = new Date(value)
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
+                        })
+                     }}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                 },
+                              )
+                           }}
+                           indicator="dot"
+                        />
+                     }
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="url(#fillMobile)"
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="url(#fillDesktop)"
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-area-legend.tsx b/apps/web/registry/default/charts/chart-area-legend.tsx
new file mode 100644
index 00000000..d6c2f912
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-area-legend.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An area chart with a legend"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Legend</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-area-linear.tsx b/apps/web/registry/default/charts/chart-area-linear.tsx
new file mode 100644
index 00000000..876f0a01
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-area-linear.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A linear area chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Linear</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="dot" hideLabel />}
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="linear"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-area-stacked-expand.tsx b/apps/web/registry/default/charts/chart-area-stacked-expand.tsx
new file mode 100644
index 00000000..52fa57ac
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-area-stacked-expand.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked area chart with expand stacking"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80, other: 45 },
+   { month: "February", desktop: 305, mobile: 200, other: 100 },
+   { month: "March", desktop: 237, mobile: 120, other: 150 },
+   { month: "April", desktop: 73, mobile: 190, other: 50 },
+   { month: "May", desktop: 209, mobile: 130, other: 100 },
+   { month: "June", desktop: 214, mobile: 140, other: 160 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-3))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Stacked Expanded</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                     top: 12,
+                  }}
+                  stackOffset="expand"
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="other"
+                     type="natural"
+                     fill="var(--color-other)"
+                     fillOpacity={0.1}
+                     stroke="var(--color-other)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-area-stacked.tsx b/apps/web/registry/default/charts/chart-area-stacked.tsx
new file mode 100644
index 00000000..479c34da
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-area-stacked.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked area chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Stacked</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="dot" />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-area-step.tsx b/apps/web/registry/default/charts/chart-area-step.tsx
new file mode 100644
index 00000000..f1e9d853
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-area-step.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { Activity, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A step area chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+      icon: Activity,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Step</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="step"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-bar-active.tsx b/apps/web/registry/default/charts/chart-bar-active.tsx
new file mode 100644
index 00000000..0e7dc223
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-bar-active.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart with an active bar"
+
+const chartData = [
+   { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Active</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="browser"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) =>
+                        chartConfig[value as keyof typeof chartConfig]?.label
+                     }
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                     dataKey="visitors"
+                     strokeWidth={2}
+                     radius={8}
+                     activeIndex={2}
+                     activeBar={({ ...props }) => {
+                        return (
+                           <Rectangle
+                              {...props}
+                              fillOpacity={0.8}
+                              stroke={props.payload.fill}
+                              strokeDasharray={4}
+                              strokeDashoffset={4}
+                           />
+                        )
+                     }}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-bar-default.tsx b/apps/web/registry/default/charts/chart-bar-default.tsx
new file mode 100644
index 00000000..16453837
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-bar-default.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={8}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-bar-horizontal.tsx b/apps/web/registry/default/charts/chart-bar-horizontal.tsx
new file mode 100644
index 00000000..e89feb3d
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-bar-horizontal.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A horizontal bar chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Horizontal</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  layout="vertical"
+                  margin={{
+                     left: -20,
+                  }}
+               >
+                  <XAxis type="number" dataKey="desktop" hide />
+                  <YAxis
+                     dataKey="month"
+                     type="category"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={5}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-bar-interactive.tsx b/apps/web/registry/default/charts/chart-bar-interactive.tsx
new file mode 100644
index 00000000..f23caccf
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-bar-interactive.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An interactive bar chart"
+
+const chartData = [
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+   views: {
+      label: "Page Views",
+   },
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const [activeChart, setActiveChart] =
+      React.useState<keyof typeof chartConfig>("desktop")
+
+   const total = React.useMemo(
+      () => ({
+         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+      }),
+      [],
+   )
+
+   return (
+      <Card>
+         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+            <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+               <CardTitle>Bar Chart - Interactive</CardTitle>
+               <CardDescription>
+                  Showing total visitors for the last 3 months
+               </CardDescription>
+            </div>
+            <div className="flex">
+               {["desktop", "mobile"].map((key) => {
+                  const chart = key as keyof typeof chartConfig
+                  return (
+                     <button
+                        key={chart}
+                        data-active={activeChart === chart}
+                        className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                        onClick={() => setActiveChart(chart)}
+                     >
+                        <span className="text-xs text-muted-foreground">
+                           {chartConfig[chart].label}
+                        </span>
+                        <span className="text-lg font-bold leading-none sm:text-3xl">
+                           {total[key as keyof typeof total].toLocaleString()}
+                        </span>
+                     </button>
+                  )
+               })}
+            </div>
+         </CardHeader>
+         <CardContent className="px-2 sm:p-6">
+            <ChartContainer
+               config={chartConfig}
+               className="aspect-auto h-[250px] w-full"
+            >
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     minTickGap={32}
+                     tickFormatter={(value) => {
+                        const date = new Date(value)
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
+                        })
+                     }}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           className="w-[150px]"
+                           nameKey="views"
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                 },
+                              )
+                           }}
+                        />
+                     }
+                  />
+                  <Bar
+                     dataKey={activeChart}
+                     fill={`var(--color-${activeChart})`}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-bar-label-custom.tsx b/apps/web/registry/default/charts/chart-bar-label-custom.tsx
new file mode 100644
index 00000000..3abee3e1
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-bar-label-custom.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart with a custom label"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+   label: {
+      color: "hsl(var(--background))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Custom Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  layout="vertical"
+                  margin={{
+                     right: 16,
+                  }}
+               >
+                  <CartesianGrid horizontal={false} />
+                  <YAxis
+                     dataKey="month"
+                     type="category"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                     hide
+                  />
+                  <XAxis dataKey="desktop" type="number" hide />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     layout="vertical"
+                     fill="var(--color-desktop)"
+                     radius={4}
+                  >
+                     <LabelList
+                        dataKey="month"
+                        position="insideLeft"
+                        offset={8}
+                        className="fill-[--color-label]"
+                        fontSize={12}
+                     />
+                     <LabelList
+                        dataKey="desktop"
+                        position="right"
+                        offset={8}
+                        className="fill-foreground"
+                        fontSize={12}
+                     />
+                  </Bar>
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-bar-label.tsx b/apps/web/registry/default/charts/chart-bar-label.tsx
new file mode 100644
index 00000000..ca006fdb
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-bar-label.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart with a label"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 20,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
+                     <LabelList
+                        position="top"
+                        offset={12}
+                        className="fill-foreground"
+                        fontSize={12}
+                     />
+                  </Bar>
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-bar-mixed.tsx b/apps/web/registry/default/charts/chart-bar-mixed.tsx
new file mode 100644
index 00000000..56bde747
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-bar-mixed.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A mixed bar chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Mixed</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  layout="vertical"
+                  margin={{
+                     left: 0,
+                  }}
+               >
+                  <YAxis
+                     dataKey="browser"
+                     type="category"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) =>
+                        chartConfig[value as keyof typeof chartConfig]?.label
+                     }
+                  />
+                  <XAxis dataKey="visitors" type="number" hide />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar dataKey="visitors" layout="vertical" radius={5} />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-bar-multiple.tsx b/apps/web/registry/default/charts/chart-bar-multiple.tsx
new file mode 100644
index 00000000..3fec4b70
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-bar-multiple.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A multiple bar chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Multiple</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="dashed" />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={4}
+                  />
+                  <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-bar-negative.tsx b/apps/web/registry/default/charts/chart-bar-negative.tsx
new file mode 100644
index 00000000..7078443a
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-bar-negative.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart with negative values"
+
+const chartData = [
+   { month: "January", visitors: 186 },
+   { month: "February", visitors: 205 },
+   { month: "March", visitors: -207 },
+   { month: "April", visitors: 173 },
+   { month: "May", visitors: -209 },
+   { month: "June", visitors: 214 },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Negative</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel hideIndicator />}
+                  />
+                  <Bar dataKey="visitors">
+                     <LabelList
+                        position="top"
+                        dataKey="month"
+                        fillOpacity={1}
+                     />
+                     {chartData.map((item) => (
+                        <Cell
+                           key={item.month}
+                           fill={
+                              item.visitors > 0
+                                 ? "hsl(var(--chart-1))"
+                                 : "hsl(var(--chart-2))"
+                           }
+                        />
+                     ))}
+                  </Bar>
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-bar-stacked.tsx b/apps/web/registry/default/charts/chart-bar-stacked.tsx
new file mode 100644
index 00000000..ff9a0b58
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-bar-stacked.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Stacked + Legend</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+                  <ChartLegend content={<ChartLegendContent />} />
+                  <Bar
+                     dataKey="desktop"
+                     stackId="a"
+                     fill="var(--color-desktop)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="mobile"
+                     stackId="a"
+                     fill="var(--color-mobile)"
+                     radius={[4, 4, 0, 0]}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-line-default.tsx b/apps/web/registry/default/charts/chart-line-default.tsx
new file mode 100644
index 00000000..ab335c1c
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-line-default.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-line-dots-colors.tsx b/apps/web/registry/default/charts/chart-line-dots-colors.tsx
new file mode 100644
index 00000000..c2cef299
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-line-dots-colors.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Dot, Line, LineChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with dots and colors"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+      color: "hsl(var(--chart-2))",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Dots Colors</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 24,
+                     left: 24,
+                     right: 24,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           indicator="line"
+                           nameKey="visitors"
+                           hideLabel
+                        />
+                     }
+                  />
+                  <Line
+                     dataKey="visitors"
+                     type="natural"
+                     stroke="var(--color-visitors)"
+                     strokeWidth={2}
+                     dot={({ payload, ...props }) => {
+                        return (
+                           <Dot
+                              key={payload.browser}
+                              r={5}
+                              cx={props.cx}
+                              cy={props.cy}
+                              fill={payload.fill}
+                              stroke={payload.fill}
+                           />
+                        )
+                     }}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-line-dots-custom.tsx b/apps/web/registry/default/charts/chart-line-dots-custom.tsx
new file mode 100644
index 00000000..362dd1ce
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-line-dots-custom.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { GitCommitVertical, TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with custom dots"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Custom Dots</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={({ cx, cy, payload }) => {
+                        const r = 24
+                        return (
+                           <GitCommitVertical
+                              key={payload.month}
+                              x={cx - r / 2}
+                              y={cy - r / 2}
+                              width={r}
+                              height={r}
+                              fill="hsl(var(--background))"
+                              stroke="var(--color-desktop)"
+                           />
+                        )
+                     }}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-line-dots.tsx b/apps/web/registry/default/charts/chart-line-dots.tsx
new file mode 100644
index 00000000..b41afc1c
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-line-dots.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with dots"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Dots</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={{
+                        fill: "var(--color-desktop)",
+                     }}
+                     activeDot={{
+                        r: 6,
+                     }}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-line-interactive.tsx b/apps/web/registry/default/charts/chart-line-interactive.tsx
new file mode 100644
index 00000000..3fb317b9
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-line-interactive.tsx
@@ -0,0 +1,230 @@
+"use client"
+
+import * as React from "react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An interactive line chart"
+
+const chartData = [
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+   views: {
+      label: "Page Views",
+   },
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const [activeChart, setActiveChart] =
+      React.useState<keyof typeof chartConfig>("desktop")
+
+   const total = React.useMemo(
+      () => ({
+         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+      }),
+      [],
+   )
+
+   return (
+      <Card>
+         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+            <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+               <CardTitle>Line Chart - Interactive</CardTitle>
+               <CardDescription>
+                  Showing total visitors for the last 3 months
+               </CardDescription>
+            </div>
+            <div className="flex">
+               {["desktop", "mobile"].map((key) => {
+                  const chart = key as keyof typeof chartConfig
+                  return (
+                     <button
+                        key={chart}
+                        data-active={activeChart === chart}
+                        className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                        onClick={() => setActiveChart(chart)}
+                     >
+                        <span className="text-xs text-muted-foreground">
+                           {chartConfig[chart].label}
+                        </span>
+                        <span className="text-lg font-bold leading-none sm:text-3xl">
+                           {total[key as keyof typeof total].toLocaleString()}
+                        </span>
+                     </button>
+                  )
+               })}
+            </div>
+         </CardHeader>
+         <CardContent className="px-2 sm:p-6">
+            <ChartContainer
+               config={chartConfig}
+               className="aspect-auto h-[250px] w-full"
+            >
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     minTickGap={32}
+                     tickFormatter={(value) => {
+                        const date = new Date(value)
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
+                        })
+                     }}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           className="w-[150px]"
+                           nameKey="views"
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                 },
+                              )
+                           }}
+                        />
+                     }
+                  />
+                  <Line
+                     dataKey={activeChart}
+                     type="monotone"
+                     stroke={`var(--color-${activeChart})`}
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-line-label-custom.tsx b/apps/web/registry/default/charts/chart-line-label-custom.tsx
new file mode 100644
index 00000000..08f26a4e
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-line-label-custom.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with a custom label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+      color: "hsl(var(--chart-2))",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Custom Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 24,
+                     left: 24,
+                     right: 24,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           indicator="line"
+                           nameKey="visitors"
+                           hideLabel
+                        />
+                     }
+                  />
+                  <Line
+                     dataKey="visitors"
+                     type="natural"
+                     stroke="var(--color-visitors)"
+                     strokeWidth={2}
+                     dot={{
+                        fill: "var(--color-visitors)",
+                     }}
+                     activeDot={{
+                        r: 6,
+                     }}
+                  >
+                     <LabelList
+                        position="top"
+                        offset={12}
+                        className="fill-foreground"
+                        fontSize={12}
+                        dataKey="browser"
+                        formatter={(value: keyof typeof chartConfig) =>
+                           chartConfig[value]?.label
+                        }
+                     />
+                  </Line>
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-line-label.tsx b/apps/web/registry/default/charts/chart-line-label.tsx
new file mode 100644
index 00000000..3ae88b1f
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-line-label.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with a label"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 20,
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={{
+                        fill: "var(--color-desktop)",
+                     }}
+                     activeDot={{
+                        r: 6,
+                     }}
+                  >
+                     <LabelList
+                        position="top"
+                        offset={12}
+                        className="fill-foreground"
+                        fontSize={12}
+                     />
+                  </Line>
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-line-linear.tsx b/apps/web/registry/default/charts/chart-line-linear.tsx
new file mode 100644
index 00000000..eec8e1a0
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-line-linear.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A linear line chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Linear</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="linear"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-line-multiple.tsx b/apps/web/registry/default/charts/chart-line-multiple.tsx
new file mode 100644
index 00000000..7bfcafc6
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-line-multiple.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A multiple line chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Multiple</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="monotone"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+                  <Line
+                     dataKey="mobile"
+                     type="monotone"
+                     stroke="var(--color-mobile)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     Showing total visitors for the last 6 months
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-line-step.tsx b/apps/web/registry/default/charts/chart-line-step.tsx
new file mode 100644
index 00000000..9b0c7657
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-line-step.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with step"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Step</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="step"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-pie-donut-active.tsx b/apps/web/registry/default/charts/chart-pie-donut-active.tsx
new file mode 100644
index 00000000..9517f7d5
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-pie-donut-active.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import type { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A donut chart with an active sector"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Donut Active</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     innerRadius={60}
+                     strokeWidth={5}
+                     activeIndex={0}
+                     activeShape={({
+                        outerRadius = 0,
+                        ...props
+                     }: PieSectorDataItem) => (
+                        <Sector {...props} outerRadius={outerRadius + 10} />
+                     )}
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-pie-donut-text.tsx b/apps/web/registry/default/charts/chart-pie-donut-text.tsx
new file mode 100644
index 00000000..1417bb1d
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-pie-donut-text.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import * as React from "react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A donut chart with text"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 190, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const totalVisitors = React.useMemo(() => {
+      return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+   }, [])
+
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Donut with Text</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     innerRadius={60}
+                     strokeWidth={5}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-3xl font-bold"
+                                    >
+                                       {totalVisitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </Pie>
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-pie-donut.tsx b/apps/web/registry/default/charts/chart-pie-donut.tsx
new file mode 100644
index 00000000..267d1b3e
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-pie-donut.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A donut chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Donut</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     innerRadius={60}
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-pie-interactive.tsx b/apps/web/registry/default/charts/chart-pie-interactive.tsx
new file mode 100644
index 00000000..fffa4349
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-pie-interactive.tsx
@@ -0,0 +1,194 @@
+"use client"
+
+import * as React from "react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import type { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartStyle,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export const description = "An interactive pie chart"
+
+const desktopData = [
+   { month: "january", desktop: 186, fill: "var(--color-january)" },
+   { month: "february", desktop: 305, fill: "var(--color-february)" },
+   { month: "march", desktop: 237, fill: "var(--color-march)" },
+   { month: "april", desktop: 173, fill: "var(--color-april)" },
+   { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   desktop: {
+      label: "Desktop",
+   },
+   mobile: {
+      label: "Mobile",
+   },
+   january: {
+      label: "January",
+      color: "hsl(var(--chart-1))",
+   },
+   february: {
+      label: "February",
+      color: "hsl(var(--chart-2))",
+   },
+   march: {
+      label: "March",
+      color: "hsl(var(--chart-3))",
+   },
+   april: {
+      label: "April",
+      color: "hsl(var(--chart-4))",
+   },
+   may: {
+      label: "May",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const id = "pie-interactive"
+   const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
+
+   const activeIndex = React.useMemo(
+      () => desktopData.findIndex((item) => item.month === activeMonth),
+      [activeMonth],
+   )
+   const months = React.useMemo(() => desktopData.map((item) => item.month), [])
+
+   return (
+      <Card data-chart={id} className="flex flex-col">
+         <ChartStyle id={id} config={chartConfig} />
+         <CardHeader className="flex-row items-start space-y-0 pb-0">
+            <div className="grid gap-1">
+               <CardTitle>Pie Chart - Interactive</CardTitle>
+               <CardDescription>January - June 2024</CardDescription>
+            </div>
+            <Select value={activeMonth} onValueChange={setActiveMonth}>
+               <SelectTrigger
+                  className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
+                  aria-label="Select a value"
+               >
+                  <SelectValue placeholder="Select month" />
+               </SelectTrigger>
+               <SelectContent align="end" className="rounded-xl">
+                  {months.map((key) => {
+                     const config = chartConfig[key as keyof typeof chartConfig]
+
+                     if (!config) {
+                        return null
+                     }
+
+                     return (
+                        <SelectItem
+                           key={key}
+                           value={key}
+                           className="rounded-lg [&_span]:flex"
+                        >
+                           <div className="flex items-center gap-2 text-xs">
+                              <span
+                                 className="flex h-3 w-3 shrink-0 rounded-sm"
+                                 style={{
+                                    backgroundColor: `var(--color-${key})`,
+                                 }}
+                              />
+                              {config?.label}
+                           </div>
+                        </SelectItem>
+                     )
+                  })}
+               </SelectContent>
+            </Select>
+         </CardHeader>
+         <CardContent className="flex flex-1 justify-center pb-0">
+            <ChartContainer
+               id={id}
+               config={chartConfig}
+               className="mx-auto aspect-square w-full max-w-[300px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={desktopData}
+                     dataKey="desktop"
+                     nameKey="month"
+                     innerRadius={60}
+                     strokeWidth={5}
+                     activeIndex={activeIndex}
+                     activeShape={({
+                        outerRadius = 0,
+                        ...props
+                     }: PieSectorDataItem) => (
+                        <g>
+                           <Sector {...props} outerRadius={outerRadius + 10} />
+                           <Sector
+                              {...props}
+                              outerRadius={outerRadius + 25}
+                              innerRadius={outerRadius + 12}
+                           />
+                        </g>
+                     )}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-3xl font-bold"
+                                    >
+                                       {desktopData[
+                                          activeIndex
+                                       ].desktop.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </Pie>
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-pie-label-custom.tsx b/apps/web/registry/default/charts/chart-pie-label-custom.tsx
new file mode 100644
index 00000000..d926e0d6
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-pie-label-custom.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with a custom label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Custom Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px] px-0"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent nameKey="visitors" hideLabel />
+                     }
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     labelLine={false}
+                     label={({ payload, ...props }) => {
+                        return (
+                           <text
+                              cx={props.cx}
+                              cy={props.cy}
+                              x={props.x}
+                              y={props.y}
+                              textAnchor={props.textAnchor}
+                              dominantBaseline={props.dominantBaseline}
+                              fill="hsla(var(--foreground))"
+                           >
+                              {payload.visitors}
+                           </text>
+                        )
+                     }}
+                     nameKey="browser"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-pie-label-list.tsx b/apps/web/registry/default/charts/chart-pie-label-list.tsx
new file mode 100644
index 00000000..c31543d4
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-pie-label-list.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with a label list"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Label List</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent nameKey="visitors" hideLabel />
+                     }
+                  />
+                  <Pie data={chartData} dataKey="visitors">
+                     <LabelList
+                        dataKey="browser"
+                        className="fill-background"
+                        stroke="none"
+                        fontSize={12}
+                        formatter={(value: keyof typeof chartConfig) =>
+                           chartConfig[value]?.label
+                        }
+                     />
+                  </Pie>
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-pie-label.tsx b/apps/web/registry/default/charts/chart-pie-label.tsx
new file mode 100644
index 00000000..9a9ceb58
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-pie-label.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with a label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
+            >
+               <PieChart>
+                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     label
+                     nameKey="browser"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-pie-legend.tsx b/apps/web/registry/default/charts/chart-pie-legend.tsx
new file mode 100644
index 00000000..e0ae6dc6
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-pie-legend.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with a legend"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Legend</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[300px]"
+            >
+               <PieChart>
+                  <Pie data={chartData} dataKey="visitors" />
+                  <ChartLegend
+                     content={<ChartLegendContent nameKey="browser" />}
+                     className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-pie-separator-none.tsx b/apps/web/registry/default/charts/chart-pie-separator-none.tsx
new file mode 100644
index 00000000..a2727312
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-pie-separator-none.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with no separator"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Separator None</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     stroke="0"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-pie-simple.tsx b/apps/web/registry/default/charts/chart-pie-simple.tsx
new file mode 100644
index 00000000..40cb711a
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-pie-simple.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A simple pie chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie data={chartData} dataKey="visitors" nameKey="browser" />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-pie-stacked.tsx b/apps/web/registry/default/charts/chart-pie-stacked.tsx
new file mode 100644
index 00000000..60238dc6
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-pie-stacked.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import * as React from "react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with stacked sections"
+
+const desktopData = [
+   { month: "january", desktop: 186, fill: "var(--color-january)" },
+   { month: "february", desktop: 305, fill: "var(--color-february)" },
+   { month: "march", desktop: 237, fill: "var(--color-march)" },
+   { month: "april", desktop: 173, fill: "var(--color-april)" },
+   { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const mobileData = [
+   { month: "january", mobile: 80, fill: "var(--color-january)" },
+   { month: "february", mobile: 200, fill: "var(--color-february)" },
+   { month: "march", mobile: 120, fill: "var(--color-march)" },
+   { month: "april", mobile: 190, fill: "var(--color-april)" },
+   { month: "may", mobile: 130, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   desktop: {
+      label: "Desktop",
+   },
+   mobile: {
+      label: "Mobile",
+   },
+   january: {
+      label: "January",
+      color: "hsl(var(--chart-1))",
+   },
+   february: {
+      label: "February",
+      color: "hsl(var(--chart-2))",
+   },
+   march: {
+      label: "March",
+      color: "hsl(var(--chart-3))",
+   },
+   april: {
+      label: "April",
+      color: "hsl(var(--chart-4))",
+   },
+   may: {
+      label: "May",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Stacked</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           labelKey="visitors"
+                           nameKey="month"
+                           indicator="line"
+                           labelFormatter={(_, payload) => {
+                              return chartConfig[
+                                 payload?.[0]
+                                    .dataKey as keyof typeof chartConfig
+                              ].label
+                           }}
+                        />
+                     }
+                  />
+                  <Pie data={desktopData} dataKey="desktop" outerRadius={60} />
+                  <Pie
+                     data={mobileData}
+                     dataKey="mobile"
+                     innerRadius={70}
+                     outerRadius={90}
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-default.tsx b/apps/web/registry/default/charts/chart-radar-default.tsx
new file mode 100644
index 00000000..f29cdc8d
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-default.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-dots.tsx b/apps/web/registry/default/charts/chart-radar-dots.tsx
new file mode 100644
index 00000000..113082e4
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-dots.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with dots"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center">
+            <CardTitle>Radar Chart - Dots</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-grid-circle-fill.tsx b/apps/web/registry/default/charts/chart-radar-grid-circle-fill.tsx
new file mode 100644
index 00000000..f20f6f8b
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-grid-circle-fill.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 285 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <PolarGrid
+                     className="fill-[--color-desktop] opacity-20"
+                     gridType="circle"
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.5}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-grid-circle-no-lines.tsx b/apps/web/registry/default/charts/chart-radar-grid-circle-no-lines.tsx
new file mode 100644
index 00000000..15d7fc66
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-grid-circle-no-lines.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid gridType="circle" radialLines={false} />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-grid-circle.tsx b/apps/web/registry/default/charts/chart-radar-grid-circle.tsx
new file mode 100644
index 00000000..63f244c5
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-grid-circle.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a grid and circle"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Circle</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid gridType="circle" />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-grid-custom.tsx b/apps/web/registry/default/charts/chart-radar-grid-custom.tsx
new file mode 100644
index 00000000..d378825a
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-grid-custom.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a custom grid"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Custom</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid
+                     radialLines={false}
+                     polarRadius={[90]}
+                     strokeWidth={1}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-grid-fill.tsx b/apps/web/registry/default/charts/chart-radar-grid-fill.tsx
new file mode 100644
index 00000000..0605ca27
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-grid-fill.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a grid filled"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 285 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Filled</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid className="fill-[--color-desktop] opacity-20" />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.5}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-grid-none.tsx b/apps/web/registry/default/charts/chart-radar-grid-none.tsx
new file mode 100644
index 00000000..f8ee632a
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-grid-none.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with no grid"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid None</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-icons.tsx b/apps/web/registry/default/charts/chart-radar-icons.tsx
new file mode 100644
index 00000000..9c783a31
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-icons.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with icons"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+      icon: ArrowDownFromLine,
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+      icon: ArrowUpFromLine,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Icons</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart
+                  data={chartData}
+                  margin={{
+                     top: -40,
+                     bottom: -10,
+                  }}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+                  <ChartLegend
+                     className="mt-8"
+                     content={<ChartLegendContent />}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 pt-4 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-label-custom.tsx b/apps/web/registry/default/charts/chart-radar-label-custom.tsx
new file mode 100644
index 00000000..36fb2186
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-label-custom.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a custom label"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Custom Label</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart
+                  data={chartData}
+                  margin={{
+                     top: 10,
+                     right: 10,
+                     bottom: 10,
+                     left: 10,
+                  }}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis
+                     dataKey="month"
+                     tick={({ x, y, textAnchor, value, index, ...props }) => {
+                        const data = chartData[index]
+
+                        return (
+                           <text
+                              x={x}
+                              y={index === 0 ? y - 10 : y}
+                              textAnchor={textAnchor}
+                              fontSize={13}
+                              fontWeight={500}
+                              {...props}
+                           >
+                              <tspan>{data.desktop}</tspan>
+                              <tspan className="fill-muted-foreground">/</tspan>
+                              <tspan>{data.mobile}</tspan>
+                              <tspan
+                                 x={x}
+                                 dy={"1rem"}
+                                 fontSize={12}
+                                 className="fill-muted-foreground"
+                              >
+                                 {data.month}
+                              </tspan>
+                           </text>
+                        )
+                     }}
+                  />
+
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-legend.tsx b/apps/web/registry/default/charts/chart-radar-legend.tsx
new file mode 100644
index 00000000..6083f8f9
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-legend.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a legend"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Legend</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart
+                  data={chartData}
+                  margin={{
+                     top: -40,
+                     bottom: -10,
+                  }}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+                  <ChartLegend
+                     className="mt-8"
+                     content={<ChartLegendContent />}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 pt-4 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-lines-only.tsx b/apps/web/registry/default/charts/chart-radar-lines-only.tsx
new file mode 100644
index 00000000..1cb9f8b9
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-lines-only.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with lines only"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 160 },
+   { month: "February", desktop: 185, mobile: 170 },
+   { month: "March", desktop: 207, mobile: 180 },
+   { month: "April", desktop: 173, mobile: 160 },
+   { month: "May", desktop: 160, mobile: 190 },
+   { month: "June", desktop: 174, mobile: 204 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Lines Only</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid radialLines={false} />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0}
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                  />
+                  <Radar
+                     dataKey="mobile"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0}
+                     stroke="var(--color-mobile)"
+                     strokeWidth={2}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-multiple.tsx b/apps/web/registry/default/charts/chart-radar-multiple.tsx
new file mode 100644
index 00000000..0635dbb8
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-multiple.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with multiple data"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Multiple</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radar-radius.tsx b/apps/web/registry/default/charts/chart-radar-radius.tsx
new file mode 100644
index 00000000..7ed0f6fc
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radar-radius.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+   PolarAngleAxis,
+   PolarGrid,
+   PolarRadiusAxis,
+   Radar,
+   RadarChart,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a radius axis"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Radius Axis</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           indicator="line"
+                           labelKey="month"
+                        />
+                     }
+                  />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+                  <PolarRadiusAxis
+                     angle={60}
+                     stroke="hsla(var(--foreground))"
+                     orientation="middle"
+                     axisLine={false}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radial-grid.tsx b/apps/web/registry/default/charts/chart-radial-grid.tsx
new file mode 100644
index 00000000..943f7439
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radial-grid.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarGrid, RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with a grid"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Grid</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  innerRadius={30}
+                  outerRadius={100}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
+                  />
+                  <PolarGrid gridType="circle" />
+                  <RadialBar dataKey="visitors" />
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radial-label.tsx b/apps/web/registry/default/charts/chart-radial-label.tsx
new file mode 100644
index 00000000..3050ff22
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radial-label.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with a label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  startAngle={-90}
+                  endAngle={380}
+                  innerRadius={30}
+                  outerRadius={110}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
+                  />
+                  <RadialBar dataKey="visitors" background>
+                     <LabelList
+                        position="insideStart"
+                        dataKey="browser"
+                        className="fill-white capitalize mix-blend-luminosity"
+                        fontSize={11}
+                     />
+                  </RadialBar>
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radial-shape.tsx b/apps/web/registry/default/charts/chart-radial-shape.tsx
new file mode 100644
index 00000000..30957dda
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radial-shape.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+   Label,
+   PolarGrid,
+   PolarRadiusAxis,
+   RadialBar,
+   RadialBarChart,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { type ChartConfig, ChartContainer } from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with a custom shape"
+
+const chartData = [
+   { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Shape</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  endAngle={100}
+                  innerRadius={80}
+                  outerRadius={140}
+               >
+                  <PolarGrid
+                     gridType="circle"
+                     radialLines={false}
+                     stroke="none"
+                     className="first:fill-muted last:fill-background"
+                     polarRadius={[86, 74]}
+                  />
+                  <RadialBar dataKey="visitors" background />
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-4xl font-bold"
+                                    >
+                                       {chartData[0].visitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </PolarRadiusAxis>
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radial-simple.tsx b/apps/web/registry/default/charts/chart-radial-simple.tsx
new file mode 100644
index 00000000..f8ed1c4c
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radial-simple.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  innerRadius={30}
+                  outerRadius={110}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
+                  />
+                  <RadialBar dataKey="visitors" background />
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radial-stacked.tsx b/apps/web/registry/default/charts/chart-radial-stacked.tsx
new file mode 100644
index 00000000..2f50074f
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radial-stacked.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with stacked sections"
+
+const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const totalVisitors = chartData[0].desktop + chartData[0].mobile
+
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Stacked</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex flex-1 items-center pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square w-full max-w-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  endAngle={180}
+                  innerRadius={80}
+                  outerRadius={130}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) - 16}
+                                       className="fill-foreground text-2xl font-bold"
+                                    >
+                                       {totalVisitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 4}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </PolarRadiusAxis>
+                  <RadialBar
+                     dataKey="desktop"
+                     stackId="a"
+                     cornerRadius={5}
+                     fill="var(--color-desktop)"
+                     className="stroke-transparent stroke-2"
+                  />
+                  <RadialBar
+                     dataKey="mobile"
+                     fill="var(--color-mobile)"
+                     stackId="a"
+                     cornerRadius={5}
+                     className="stroke-transparent stroke-2"
+                  />
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-radial-text.tsx b/apps/web/registry/default/charts/chart-radial-text.tsx
new file mode 100644
index 00000000..bf163f1b
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-radial-text.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+   Label,
+   PolarGrid,
+   PolarRadiusAxis,
+   RadialBar,
+   RadialBarChart,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { type ChartConfig, ChartContainer } from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with text"
+
+const chartData = [
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Text</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  startAngle={0}
+                  endAngle={250}
+                  innerRadius={80}
+                  outerRadius={110}
+               >
+                  <PolarGrid
+                     gridType="circle"
+                     radialLines={false}
+                     stroke="none"
+                     className="first:fill-muted last:fill-background"
+                     polarRadius={[86, 74]}
+                  />
+                  <RadialBar dataKey="visitors" background cornerRadius={10} />
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-4xl font-bold"
+                                    >
+                                       {chartData[0].visitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </PolarRadiusAxis>
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-tooltip-advanced.tsx b/apps/web/registry/default/charts/chart-tooltip-advanced.tsx
new file mode 100644
index 00000000..98966002
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-tooltip-advanced.tsx
@@ -0,0 +1,124 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Advanced</CardTitle>
+            <CardDescription>
+               Tooltip with custom formatter and total.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           hideLabel
+                           className="w-[180px]"
+                           formatter={(value, name, item, index) => (
+                              <>
+                                 <div
+                                    className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
+                                    style={
+                                       {
+                                          "--color-bg": `var(--color-${name})`,
+                                       } as React.CSSProperties
+                                    }
+                                 />
+                                 {chartConfig[name as keyof typeof chartConfig]
+                                    ?.label || name}
+                                 <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                    {value}
+                                    <span className="font-normal text-muted-foreground">
+                                       kcal
+                                    </span>
+                                 </div>
+                                 {/* Add this after the last item */}
+                                 {index === 1 && (
+                                    <div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
+                                       Total
+                                       <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                          {item.payload.running +
+                                             item.payload.swimming}
+                                          <span className="font-normal text-muted-foreground">
+                                             kcal
+                                          </span>
+                                       </div>
+                                    </div>
+                                 )}
+                              </>
+                           )}
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-tooltip-default.tsx b/apps/web/registry/default/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000..53e812dd
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-tooltip-default.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+   "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Default</CardTitle>
+            <CardDescription>
+               Default tooltip with ChartTooltipContent.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-tooltip-formatter.tsx b/apps/web/registry/default/charts/chart-tooltip-formatter.tsx
new file mode 100644
index 00000000..fef08446
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-tooltip-formatter.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Formatter</CardTitle>
+            <CardDescription>Tooltip with custom formatter .</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           hideLabel
+                           formatter={(value, name) => (
+                              <div className="flex min-w-[130px] items-center text-xs text-muted-foreground">
+                                 {chartConfig[name as keyof typeof chartConfig]
+                                    ?.label || name}
+                                 <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                    {value}
+                                    <span className="font-normal text-muted-foreground">
+                                       kcal
+                                    </span>
+                                 </div>
+                              </div>
+                           )}
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-tooltip-icons.tsx b/apps/web/registry/default/charts/chart-tooltip-icons.tsx
new file mode 100644
index 00000000..3710195d
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-tooltip-icons.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Footprints, Waves } from "lucide-react"
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+      icon: Footprints,
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+      icon: Waves,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Icons</CardTitle>
+            <CardDescription>Tooltip with icons.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent hideLabel />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-tooltip-indicator-line.tsx b/apps/web/registry/default/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000..c15a99e5
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-tooltip-indicator-line.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+   "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Line Indicator</CardTitle>
+            <CardDescription>Tooltip with line indicator.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent indicator="line" />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-tooltip-indicator-none.tsx b/apps/web/registry/default/charts/chart-tooltip-indicator-none.tsx
new file mode 100644
index 00000000..c5b8cf4f
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-tooltip-indicator-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - No Indicator</CardTitle>
+            <CardDescription>Tooltip with no indicator.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent hideIndicator />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-tooltip-label-custom.tsx b/apps/web/registry/default/charts/chart-tooltip-label-custom.tsx
new file mode 100644
index 00000000..59563667
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-tooltip-label-custom.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   activities: {
+      label: "Activities",
+   },
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Custom label</CardTitle>
+            <CardDescription>
+               Tooltip with custom label from chartConfig.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           labelKey="activities"
+                           indicator="line"
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-tooltip-label-formatter.tsx b/apps/web/registry/default/charts/chart-tooltip-label-formatter.tsx
new file mode 100644
index 00000000..83fbd36c
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-tooltip-label-formatter.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Label Formatter</CardTitle>
+            <CardDescription>Tooltip with label formatter.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    day: "numeric",
+                                    month: "long",
+                                    year: "numeric",
+                                 },
+                              )
+                           }}
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/charts/chart-tooltip-label-none.tsx b/apps/web/registry/default/charts/chart-tooltip-label-none.tsx
new file mode 100644
index 00000000..b4f5f0ea
--- /dev/null
+++ b/apps/web/registry/default/charts/chart-tooltip-label-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - No Label</CardTitle>
+            <CardDescription>Tooltip with no label.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent hideIndicator hideLabel />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/example/accordion-demo.tsx b/apps/web/registry/default/example/accordion-demo.tsx
deleted file mode 100644
index 9d14a63c..00000000
--- a/apps/web/registry/default/example/accordion-demo.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {
-   Accordion,
-   AccordionContent,
-   AccordionItem,
-   AccordionTrigger,
-} from '~/registry/default/ui/accordion'
-
-export default function AccordionDemo() {
-   return (
-      <Accordion type="single" collapsible className="w-full">
-         <AccordionItem value="item-1">
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>
-               Yes. It adheres to the WAI-ARIA design pattern.
-            </AccordionContent>
-         </AccordionItem>
-         <AccordionItem value="item-2">
-            <AccordionTrigger>Is it styled?</AccordionTrigger>
-            <AccordionContent>
-               Yes. It comes with default styles that matches the other
-               components&apos; aesthetic.
-            </AccordionContent>
-         </AccordionItem>
-         <AccordionItem value="item-3">
-            <AccordionTrigger>Is it animated?</AccordionTrigger>
-            <AccordionContent>
-               Yes. It&apos;s animated by default, but you can disable it if you
-               prefer.
-            </AccordionContent>
-         </AccordionItem>
-      </Accordion>
-   )
-}
diff --git a/apps/web/registry/default/example/alert-demo.tsx b/apps/web/registry/default/example/alert-demo.tsx
deleted file mode 100644
index 8f5b82d2..00000000
--- a/apps/web/registry/default/example/alert-demo.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Terminal } from 'lucide-react'
-
-import {
-   Alert,
-   AlertDescription,
-   AlertTitle,
-} from '~/registry/default/ui/alert'
-
-export default function AlertDemo() {
-   return (
-      <Alert>
-         <Terminal className="size-4" />
-         <AlertTitle>Heads up!</AlertTitle>
-         <AlertDescription>
-            You can add components to your app using the cli.
-         </AlertDescription>
-      </Alert>
-   )
-}
diff --git a/apps/web/registry/default/example/alert-destructive.tsx b/apps/web/registry/default/example/alert-destructive.tsx
deleted file mode 100644
index 554c91fa..00000000
--- a/apps/web/registry/default/example/alert-destructive.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AlertCircle } from 'lucide-react'
-
-import {
-   Alert,
-   AlertDescription,
-   AlertTitle,
-} from '~/registry/default/ui/alert'
-
-export default function AlertDestructive() {
-   return (
-      <Alert variant="destructive">
-         <AlertCircle className="size-4" />
-         <AlertTitle>Error</AlertTitle>
-         <AlertDescription>
-            Your session has expired. Please log in again.
-         </AlertDescription>
-      </Alert>
-   )
-}
diff --git a/apps/web/registry/default/example/alert-dialog-demo.tsx b/apps/web/registry/default/example/alert-dialog-demo.tsx
deleted file mode 100644
index ccb5dcf7..00000000
--- a/apps/web/registry/default/example/alert-dialog-demo.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {
-   AlertDialog,
-   AlertDialogAction,
-   AlertDialogCancel,
-   AlertDialogContent,
-   AlertDialogDescription,
-   AlertDialogFooter,
-   AlertDialogHeader,
-   AlertDialogTitle,
-   AlertDialogTrigger,
-} from '~/registry/default/ui/alert-dialog'
-import { Button } from '~/registry/default/ui/button'
-
-export default function AlertDialogDemo() {
-   return (
-      <AlertDialog>
-         <AlertDialogTrigger asChild>
-            <Button variant="outline">Show Dialog</Button>
-         </AlertDialogTrigger>
-         <AlertDialogContent>
-            <AlertDialogHeader>
-               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-               <AlertDialogDescription>
-                  This action cannot be undone. This will permanently delete your
-                  account and remove your data from our servers.
-               </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-               <AlertDialogCancel>Cancel</AlertDialogCancel>
-               <AlertDialogAction>Continue</AlertDialogAction>
-            </AlertDialogFooter>
-         </AlertDialogContent>
-      </AlertDialog>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-beam-bidirectional.tsx b/apps/web/registry/default/example/animated-beam-bidirectional.tsx
deleted file mode 100644
index de090615..00000000
--- a/apps/web/registry/default/example/animated-beam-bidirectional.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-'use client'
-
-import React, { forwardRef, useRef } from 'react'
-import { ny } from '~/lib/utils'
-import { AnimatedBeam } from '~/registry/default/ui/animated-beam'
-
-const Circle = forwardRef<
-   HTMLDivElement,
-   { className?: string, children?: React.ReactNode }
->(({ className, children }, ref) => {
-   return (
-      <div
-         ref={ref}
-         className={ny(
-            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
-            className,
-         )}
-      >
-         {children}
-      </div>
-   )
-})
-
-export default function AnimatedBeamDemo() {
-   const containerRef = useRef<HTMLDivElement>(null)
-   const div1Ref = useRef<HTMLDivElement>(null)
-   const div2Ref = useRef<HTMLDivElement>(null)
-
-   return (
-      <div
-         className="bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
-         ref={containerRef}
-      >
-         <div className="flex size-full flex-col items-stretch justify-between gap-10">
-            <div className="flex flex-row justify-between">
-               <Circle ref={div1Ref}>
-                  <Icons.user />
-               </Circle>
-               <Circle ref={div2Ref}>
-                  <Icons.openai />
-               </Circle>
-            </div>
-         </div>
-
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div1Ref}
-            toRef={div2Ref}
-            startYOffset={10}
-            endYOffset={10}
-            curvature={-20}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div1Ref}
-            toRef={div2Ref}
-            startYOffset={-10}
-            endYOffset={-10}
-            curvature={20}
-            reverse
-         />
-      </div>
-   )
-}
-
-const Icons = {
-   openai: () => (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
-   ),
-   user: () => (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         fill="none"
-         stroke="#000000"
-         strokeWidth="2"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
-         <circle cx="12" cy="7" r="4" />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/default/example/animated-beam-demo.tsx b/apps/web/registry/default/example/animated-beam-demo.tsx
deleted file mode 100644
index fcf2df69..00000000
--- a/apps/web/registry/default/example/animated-beam-demo.tsx
+++ /dev/null
@@ -1,495 +0,0 @@
-'use client'
-
-import React, { forwardRef, useRef } from 'react'
-import { ny } from '~/lib/utils'
-import { AnimatedBeam } from '~/registry/default/ui/animated-beam'
-
-const Circle = forwardRef<
-   HTMLDivElement,
-   { className?: string, children?: React.ReactNode }
->(({ className, children }, ref) => {
-   return (
-      <div
-         ref={ref}
-         className={ny(
-            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
-            className,
-         )}
-      >
-         {children}
-      </div>
-   )
-})
-
-export default function AnimatedBeamDemo() {
-   const containerRef = useRef<HTMLDivElement>(null)
-   const div1Ref = useRef<HTMLDivElement>(null)
-   const div2Ref = useRef<HTMLDivElement>(null)
-   const div3Ref = useRef<HTMLDivElement>(null)
-   const div4Ref = useRef<HTMLDivElement>(null)
-   const div5Ref = useRef<HTMLDivElement>(null)
-   const div6Ref = useRef<HTMLDivElement>(null)
-   const div7Ref = useRef<HTMLDivElement>(null)
-
-   return (
-      <div
-         className="bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
-         ref={containerRef}
-      >
-         <div className="flex size-full flex-col items-stretch justify-between gap-10">
-            <div className="flex flex-row items-center justify-between">
-               <Circle ref={div1Ref}>
-                  <Icons.googleDrive />
-               </Circle>
-               <Circle ref={div5Ref}>
-                  <Icons.googleDocs />
-               </Circle>
-            </div>
-            <div className="flex flex-row items-center justify-between">
-               <Circle ref={div2Ref}>
-                  <Icons.notion />
-               </Circle>
-               <Circle ref={div4Ref} className="size-16">
-                  <Icons.openai />
-               </Circle>
-               <Circle ref={div6Ref}>
-                  <Icons.zapier />
-               </Circle>
-            </div>
-            <div className="flex flex-row items-center justify-between">
-               <Circle ref={div3Ref}>
-                  <Icons.whatsapp />
-               </Circle>
-               <Circle ref={div7Ref}>
-                  <Icons.messenger />
-               </Circle>
-            </div>
-         </div>
-
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div1Ref}
-            toRef={div4Ref}
-            curvature={-75}
-            endYOffset={-10}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div2Ref}
-            toRef={div4Ref}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div3Ref}
-            toRef={div4Ref}
-            curvature={75}
-            endYOffset={10}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div5Ref}
-            toRef={div4Ref}
-            curvature={-75}
-            endYOffset={-10}
-            reverse
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div6Ref}
-            toRef={div4Ref}
-            reverse
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div7Ref}
-            toRef={div4Ref}
-            curvature={75}
-            endYOffset={10}
-            reverse
-         />
-      </div>
-   )
-}
-
-const Icons = {
-   notion: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 100 100"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
-            fill="#ffffff"
-         />
-         <path
-            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
-            fill="#000000"
-            fillRule="evenodd"
-            clipRule="evenodd"
-         />
-      </svg>
-   ),
-   openai: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
-   ),
-   googleDrive: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 87.3 78"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-            fill="#0066da"
-         />
-         <path
-            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-            fill="#00ac47"
-         />
-         <path
-            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-            fill="#ea4335"
-         />
-         <path
-            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-            fill="#00832d"
-         />
-         <path
-            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-            fill="#2684fc"
-         />
-         <path
-            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-            fill="#ffba00"
-         />
-      </svg>
-   ),
-   whatsapp: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 175.216 175.552"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <linearGradient
-               id="b"
-               x1="85.915"
-               x2="86.535"
-               y1="32.567"
-               y2="137.092"
-               gradientUnits="userSpaceOnUse"
-            >
-               <stop offset="0" stopColor="#57d163" />
-               <stop offset="1" stopColor="#23b33a" />
-            </linearGradient>
-            <filter
-               id="a"
-               width="1.115"
-               height="1.114"
-               x="-.057"
-               y="-.057"
-               colorInterpolationFilters="sRGB"
-            >
-               <feGaussianBlur stdDeviation="3.531" />
-            </filter>
-         </defs>
-         <path
-            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
-            fill="#b3b3b3"
-            filter="url(#a)"
-         />
-         <path
-            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
-            fill="#ffffff"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
-            fill="url(#linearGradient1780)"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
-            fill="url(#b)"
-         />
-         <path
-            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
-            fill="#ffffff"
-            fillRule="evenodd"
-         />
-      </svg>
-   ),
-   googleDocs: () => (
-      <svg
-         width="47px"
-         height="65px"
-         viewBox="0 0 47 65"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-1"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-3"
-            />
-            <linearGradient
-               x1="50.0053945%"
-               y1="8.58610612%"
-               x2="50.0053945%"
-               y2="100.013939%"
-               id="linearGradient-5"
-            >
-               <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
-               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
-            </linearGradient>
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-6"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-8"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-10"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-12"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-14"
-            />
-            <radialGradient
-               cx="3.16804688%"
-               cy="2.71744318%"
-               fx="3.16804688%"
-               fy="2.71744318%"
-               r="161.248516%"
-               gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
-               id="radialGradient-16"
-            >
-               <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
-               <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
-            </radialGradient>
-         </defs>
-         <g
-            id="Page-1"
-            stroke="none"
-            strokeWidth="1"
-            fill="none"
-            fillRule="evenodd"
-         >
-            <g transform="translate(-451.000000, -463.000000)">
-               <g id="Hero" transform="translate(0.000000, 63.000000)">
-                  <g id="Personal" transform="translate(277.000000, 309.000000)">
-                     <g id="Docs-icon" transform="translate(174.000000, 91.000000)">
-                        <g id="Group">
-                           <g id="Clipped">
-                              <mask id="mask-2" fill="white">
-                                 <use xlinkHref="#path-1" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
-                                 id="Path"
-                                 fill="#4285F4"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-2)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-4" fill="white">
-                                 <use xlinkHref="#path-3" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <polygon
-                                 id="Path"
-                                 fill="url(#linearGradient-5)"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-4)"
-                                 points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
-                              >
-                              </polygon>
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-7" fill="white">
-                                 <use xlinkHref="#path-6" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
-                                 id="Shape"
-                                 fill="#F1F1F1"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-7)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-9" fill="white">
-                                 <use xlinkHref="#path-8" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <g id="Group" mask="url(#mask-9)">
-                                 <g transform="translate(26.437500, -2.954545)">
-                                    <path
-                                       d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
-                                       id="Path"
-                                       fill="#A1C2FA"
-                                       fillRule="nonzero"
-                                    />
-                                 </g>
-                              </g>
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-11" fill="white">
-                                 <use xlinkHref="#path-10" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
-                                 id="Path"
-                                 fillOpacity="0.2"
-                                 fill="#FFFFFF"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-11)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-13" fill="white">
-                                 <use xlinkHref="#path-12" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
-                                 id="Path"
-                                 fillOpacity="0.2"
-                                 fill="#1A237E"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-13)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-15" fill="white">
-                                 <use xlinkHref="#path-14" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
-                                 id="Path"
-                                 fillOpacity="0.1"
-                                 fill="#1A237E"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-15)"
-                              />
-                           </g>
-                        </g>
-                        <path
-                           d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-                           id="Path"
-                           fill="url(#radialGradient-16)"
-                           fillRule="nonzero"
-                        />
-                     </g>
-                  </g>
-               </g>
-            </g>
-         </g>
-      </svg>
-   ),
-   zapier: () => (
-      <svg
-         width="105"
-         height="28"
-         viewBox="0 0 244 66"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
-            fill="#201515"
-         />
-         <path
-            d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
-            fill="#201515"
-         />
-         <path
-            d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
-            fill="#201515"
-         />
-         <path
-            d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
-            fill="#201515"
-         />
-         <path
-            d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
-            fill="#201515"
-         />
-         <path
-            d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
-            fill="#201515"
-         />
-         <path
-            d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
-            fill="#201515"
-         />
-         <path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
-      </svg>
-   ),
-   messenger: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 48 48"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <radialGradient
-            id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
-            cx="11.087"
-            cy="7.022"
-            r="47.612"
-            gradientTransform="matrix(1 0 0 -1 0 50)"
-            gradientUnits="userSpaceOnUse"
-         >
-            <stop offset="0" stopColor="#1292ff"></stop>
-            <stop offset=".079" stopColor="#2982ff"></stop>
-            <stop offset=".23" stopColor="#4e69ff"></stop>
-            <stop offset=".351" stopColor="#6559ff"></stop>
-            <stop offset=".428" stopColor="#6d53ff"></stop>
-            <stop offset=".754" stopColor="#df47aa"></stop>
-            <stop offset=".946" stopColor="#ff6257"></stop>
-         </radialGradient>
-         <path
-            fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
-            d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
-         />
-         <path
-            d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
-            opacity=".05"
-         />
-         <path
-            d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
-            opacity=".07"
-         />
-         <path
-            fill="#ffffff"
-            d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
-         />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/default/example/animated-beam-multiple-inputs.tsx b/apps/web/registry/default/example/animated-beam-multiple-inputs.tsx
deleted file mode 100644
index 04e94cb3..00000000
--- a/apps/web/registry/default/example/animated-beam-multiple-inputs.tsx
+++ /dev/null
@@ -1,498 +0,0 @@
-'use client'
-
-import React, { forwardRef, useRef } from 'react'
-import { ny } from '~/lib/utils'
-import { AnimatedBeam } from '~/registry/default/ui/animated-beam'
-
-const Circle = forwardRef<
-   HTMLDivElement,
-   { className?: string, children?: React.ReactNode }
->(({ className, children }, ref) => {
-   return (
-      <div
-         ref={ref}
-         className={ny(
-            'border-border z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
-            className,
-         )}
-      >
-         {children}
-      </div>
-   )
-})
-
-export default function AnimatedBeamMultipleInputDemo() {
-   const containerRef = useRef<HTMLDivElement>(null)
-   const div1Ref = useRef<HTMLDivElement>(null)
-   const div2Ref = useRef<HTMLDivElement>(null)
-   const div3Ref = useRef<HTMLDivElement>(null)
-   const div4Ref = useRef<HTMLDivElement>(null)
-   const div5Ref = useRef<HTMLDivElement>(null)
-   const div6Ref = useRef<HTMLDivElement>(null)
-   const div7Ref = useRef<HTMLDivElement>(null)
-
-   return (
-      <div
-         className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
-         ref={containerRef}
-      >
-         <div className="flex size-full flex-row items-stretch justify-between gap-10">
-            <div className="flex flex-col justify-center gap-2">
-               <Circle ref={div1Ref}>
-                  <Icons.googleDrive />
-               </Circle>
-               <Circle ref={div2Ref}>
-                  <Icons.googleDocs />
-               </Circle>
-               <Circle ref={div3Ref}>
-                  <Icons.whatsapp />
-               </Circle>
-               <Circle ref={div4Ref}>
-                  <Icons.messenger />
-               </Circle>
-               <Circle ref={div5Ref}>
-                  <Icons.notion />
-               </Circle>
-            </div>
-            <div className="flex flex-col justify-center">
-               <Circle ref={div6Ref} className="size-16">
-                  <Icons.openai />
-               </Circle>
-            </div>
-            <div className="flex flex-col justify-center">
-               <Circle ref={div7Ref}>
-                  <Icons.user />
-               </Circle>
-            </div>
-         </div>
-
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div1Ref}
-            toRef={div6Ref}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div2Ref}
-            toRef={div6Ref}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div3Ref}
-            toRef={div6Ref}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div4Ref}
-            toRef={div6Ref}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div5Ref}
-            toRef={div6Ref}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div6Ref}
-            toRef={div7Ref}
-         />
-      </div>
-   )
-}
-
-const Icons = {
-   notion: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 100 100"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
-            fill="#ffffff"
-         />
-         <path
-            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
-            fill="#000000"
-            fillRule="evenodd"
-            clipRule="evenodd"
-         />
-      </svg>
-   ),
-   openai: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
-   ),
-   googleDrive: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 87.3 78"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-            fill="#0066da"
-         />
-         <path
-            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-            fill="#00ac47"
-         />
-         <path
-            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-            fill="#ea4335"
-         />
-         <path
-            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-            fill="#00832d"
-         />
-         <path
-            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-            fill="#2684fc"
-         />
-         <path
-            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-            fill="#ffba00"
-         />
-      </svg>
-   ),
-   whatsapp: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 175.216 175.552"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <linearGradient
-               id="b"
-               x1="85.915"
-               x2="86.535"
-               y1="32.567"
-               y2="137.092"
-               gradientUnits="userSpaceOnUse"
-            >
-               <stop offset="0" stopColor="#57d163" />
-               <stop offset="1" stopColor="#23b33a" />
-            </linearGradient>
-            <filter
-               id="a"
-               width="1.115"
-               height="1.114"
-               x="-.057"
-               y="-.057"
-               colorInterpolationFilters="sRGB"
-            >
-               <feGaussianBlur stdDeviation="3.531" />
-            </filter>
-         </defs>
-         <path
-            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
-            fill="#b3b3b3"
-            filter="url(#a)"
-         />
-         <path
-            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
-            fill="#ffffff"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
-            fill="url(#linearGradient1780)"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
-            fill="url(#b)"
-         />
-         <path
-            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
-            fill="#ffffff"
-            fillRule="evenodd"
-         />
-      </svg>
-   ),
-   googleDocs: () => (
-      <svg
-         width="47px"
-         height="65px"
-         viewBox="0 0 47 65"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-1"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-3"
-            />
-            <linearGradient
-               x1="50.0053945%"
-               y1="8.58610612%"
-               x2="50.0053945%"
-               y2="100.013939%"
-               id="linearGradient-5"
-            >
-               <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
-               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
-            </linearGradient>
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-6"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-8"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-10"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-12"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-14"
-            />
-            <radialGradient
-               cx="3.16804688%"
-               cy="2.71744318%"
-               fx="3.16804688%"
-               fy="2.71744318%"
-               r="161.248516%"
-               gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
-               id="radialGradient-16"
-            >
-               <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
-               <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
-            </radialGradient>
-         </defs>
-         <g
-            id="Page-1"
-            stroke="none"
-            strokeWidth="1"
-            fill="none"
-            fillRule="evenodd"
-         >
-            <g transform="translate(-451.000000, -463.000000)">
-               <g id="Hero" transform="translate(0.000000, 63.000000)">
-                  <g id="Personal" transform="translate(277.000000, 309.000000)">
-                     <g id="Docs-icon" transform="translate(174.000000, 91.000000)">
-                        <g id="Group">
-                           <g id="Clipped">
-                              <mask id="mask-2" fill="white">
-                                 <use xlinkHref="#path-1" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
-                                 id="Path"
-                                 fill="#4285F4"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-2)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-4" fill="white">
-                                 <use xlinkHref="#path-3" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <polygon
-                                 id="Path"
-                                 fill="url(#linearGradient-5)"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-4)"
-                                 points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
-                              >
-                              </polygon>
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-7" fill="white">
-                                 <use xlinkHref="#path-6" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
-                                 id="Shape"
-                                 fill="#F1F1F1"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-7)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-9" fill="white">
-                                 <use xlinkHref="#path-8" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <g id="Group" mask="url(#mask-9)">
-                                 <g transform="translate(26.437500, -2.954545)">
-                                    <path
-                                       d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
-                                       id="Path"
-                                       fill="#A1C2FA"
-                                       fillRule="nonzero"
-                                    />
-                                 </g>
-                              </g>
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-11" fill="white">
-                                 <use xlinkHref="#path-10" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
-                                 id="Path"
-                                 fillOpacity="0.2"
-                                 fill="#FFFFFF"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-11)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-13" fill="white">
-                                 <use xlinkHref="#path-12" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
-                                 id="Path"
-                                 fillOpacity="0.2"
-                                 fill="#1A237E"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-13)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-15" fill="white">
-                                 <use xlinkHref="#path-14" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
-                                 id="Path"
-                                 fillOpacity="0.1"
-                                 fill="#1A237E"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-15)"
-                              />
-                           </g>
-                        </g>
-                        <path
-                           d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-                           id="Path"
-                           fill="url(#radialGradient-16)"
-                           fillRule="nonzero"
-                        />
-                     </g>
-                  </g>
-               </g>
-            </g>
-         </g>
-      </svg>
-   ),
-   zapier: () => (
-      <svg
-         width="105"
-         height="28"
-         viewBox="0 0 244 66"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
-            fill="#201515"
-         />
-         <path
-            d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
-            fill="#201515"
-         />
-         <path
-            d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
-            fill="#201515"
-         />
-         <path
-            d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
-            fill="#201515"
-         />
-         <path
-            d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
-            fill="#201515"
-         />
-         <path
-            d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
-            fill="#201515"
-         />
-         <path
-            d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
-            fill="#201515"
-         />
-         <path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
-      </svg>
-   ),
-   messenger: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 48 48"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <radialGradient
-            id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
-            cx="11.087"
-            cy="7.022"
-            r="47.612"
-            gradientTransform="matrix(1 0 0 -1 0 50)"
-            gradientUnits="userSpaceOnUse"
-         >
-            <stop offset="0" stopColor="#1292ff"></stop>
-            <stop offset=".079" stopColor="#2982ff"></stop>
-            <stop offset=".23" stopColor="#4e69ff"></stop>
-            <stop offset=".351" stopColor="#6559ff"></stop>
-            <stop offset=".428" stopColor="#6d53ff"></stop>
-            <stop offset=".754" stopColor="#df47aa"></stop>
-            <stop offset=".946" stopColor="#ff6257"></stop>
-         </radialGradient>
-         <path
-            fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
-            d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
-         />
-         <path
-            d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
-            opacity=".05"
-         />
-         <path
-            d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
-            opacity=".07"
-         />
-         <path
-            fill="#ffffff"
-            d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
-         />
-      </svg>
-   ),
-   user: () => (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         fill="none"
-         stroke="#000000"
-         strokeWidth="2"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
-         <circle cx="12" cy="7" r="4" />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/default/example/animated-beam-multiple-outputs.tsx b/apps/web/registry/default/example/animated-beam-multiple-outputs.tsx
deleted file mode 100644
index 1daa8ba6..00000000
--- a/apps/web/registry/default/example/animated-beam-multiple-outputs.tsx
+++ /dev/null
@@ -1,512 +0,0 @@
-'use client'
-
-import React, { forwardRef, useRef } from 'react'
-import { ny } from '~/lib/utils'
-import { AnimatedBeam } from '~/registry/default/ui/animated-beam'
-
-const Circle = forwardRef<
-   HTMLDivElement,
-   { className?: string, children?: React.ReactNode }
->(({ className, children }, ref) => {
-   return (
-      <div
-         ref={ref}
-         className={ny(
-            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
-            className,
-         )}
-      >
-         {children}
-      </div>
-   )
-})
-
-export default function AnimatedBeamMultipleOutputDemo({
-   className,
-}: {
-   className?: string
-}) {
-   const containerRef = useRef<HTMLDivElement>(null)
-   const div1Ref = useRef<HTMLDivElement>(null)
-   const div2Ref = useRef<HTMLDivElement>(null)
-   const div3Ref = useRef<HTMLDivElement>(null)
-   const div4Ref = useRef<HTMLDivElement>(null)
-   const div5Ref = useRef<HTMLDivElement>(null)
-   const div6Ref = useRef<HTMLDivElement>(null)
-   const div7Ref = useRef<HTMLDivElement>(null)
-
-   return (
-      <div
-         className={ny(
-            'bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl',
-            className,
-         )}
-         ref={containerRef}
-      >
-         <div className="flex size-full flex-row items-stretch justify-between gap-10">
-            <div className="flex flex-col justify-center">
-               <Circle ref={div7Ref}>
-                  <Icons.user />
-               </Circle>
-            </div>
-            <div className="flex flex-col justify-center">
-               <Circle ref={div6Ref} className="size-16">
-                  <Icons.openai />
-               </Circle>
-            </div>
-            <div className="flex flex-col justify-center gap-2">
-               <Circle ref={div1Ref}>
-                  <Icons.googleDrive />
-               </Circle>
-               <Circle ref={div2Ref}>
-                  <Icons.googleDocs />
-               </Circle>
-               <Circle ref={div3Ref}>
-                  <Icons.whatsapp />
-               </Circle>
-               <Circle ref={div4Ref}>
-                  <Icons.messenger />
-               </Circle>
-               <Circle ref={div5Ref}>
-                  <Icons.notion />
-               </Circle>
-            </div>
-         </div>
-
-         {/* AnimatedBeams */}
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div1Ref}
-            toRef={div6Ref}
-            duration={3}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div2Ref}
-            toRef={div6Ref}
-            duration={3}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div3Ref}
-            toRef={div6Ref}
-            duration={3}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div4Ref}
-            toRef={div6Ref}
-            duration={3}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div5Ref}
-            toRef={div6Ref}
-            duration={3}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div6Ref}
-            toRef={div7Ref}
-            duration={3}
-         />
-      </div>
-   )
-}
-
-const Icons = {
-   notion: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 100 100"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
-            fill="#ffffff"
-         />
-         <path
-            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
-            fill="#000000"
-            fillRule="evenodd"
-            clipRule="evenodd"
-         />
-      </svg>
-   ),
-   openai: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
-   ),
-   googleDrive: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 87.3 78"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-            fill="#0066da"
-         />
-         <path
-            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-            fill="#00ac47"
-         />
-         <path
-            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-            fill="#ea4335"
-         />
-         <path
-            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-            fill="#00832d"
-         />
-         <path
-            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-            fill="#2684fc"
-         />
-         <path
-            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-            fill="#ffba00"
-         />
-      </svg>
-   ),
-   whatsapp: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 175.216 175.552"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <linearGradient
-               id="b"
-               x1="85.915"
-               x2="86.535"
-               y1="32.567"
-               y2="137.092"
-               gradientUnits="userSpaceOnUse"
-            >
-               <stop offset="0" stopColor="#57d163" />
-               <stop offset="1" stopColor="#23b33a" />
-            </linearGradient>
-            <filter
-               id="a"
-               width="1.115"
-               height="1.114"
-               x="-.057"
-               y="-.057"
-               colorInterpolationFilters="sRGB"
-            >
-               <feGaussianBlur stdDeviation="3.531" />
-            </filter>
-         </defs>
-         <path
-            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
-            fill="#b3b3b3"
-            filter="url(#a)"
-         />
-         <path
-            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
-            fill="#ffffff"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
-            fill="url(#linearGradient1780)"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
-            fill="url(#b)"
-         />
-         <path
-            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
-            fill="#ffffff"
-            fillRule="evenodd"
-         />
-      </svg>
-   ),
-   googleDocs: () => (
-      <svg
-         width="47px"
-         height="65px"
-         viewBox="0 0 47 65"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-1"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-3"
-            />
-            <linearGradient
-               x1="50.0053945%"
-               y1="8.58610612%"
-               x2="50.0053945%"
-               y2="100.013939%"
-               id="linearGradient-5"
-            >
-               <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
-               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
-            </linearGradient>
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-6"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-8"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-10"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-12"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-14"
-            />
-            <radialGradient
-               cx="3.16804688%"
-               cy="2.71744318%"
-               fx="3.16804688%"
-               fy="2.71744318%"
-               r="161.248516%"
-               gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
-               id="radialGradient-16"
-            >
-               <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
-               <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
-            </radialGradient>
-         </defs>
-         <g
-            id="Page-1"
-            stroke="none"
-            strokeWidth="1"
-            fill="none"
-            fillRule="evenodd"
-         >
-            <g transform="translate(-451.000000, -463.000000)">
-               <g id="Hero" transform="translate(0.000000, 63.000000)">
-                  <g id="Personal" transform="translate(277.000000, 309.000000)">
-                     <g id="Docs-icon" transform="translate(174.000000, 91.000000)">
-                        <g id="Group">
-                           <g id="Clipped">
-                              <mask id="mask-2" fill="white">
-                                 <use xlinkHref="#path-1" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
-                                 id="Path"
-                                 fill="#4285F4"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-2)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-4" fill="white">
-                                 <use xlinkHref="#path-3" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <polygon
-                                 id="Path"
-                                 fill="url(#linearGradient-5)"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-4)"
-                                 points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
-                              >
-                              </polygon>
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-7" fill="white">
-                                 <use xlinkHref="#path-6" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
-                                 id="Shape"
-                                 fill="#F1F1F1"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-7)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-9" fill="white">
-                                 <use xlinkHref="#path-8" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <g id="Group" mask="url(#mask-9)">
-                                 <g transform="translate(26.437500, -2.954545)">
-                                    <path
-                                       d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
-                                       id="Path"
-                                       fill="#A1C2FA"
-                                       fillRule="nonzero"
-                                    />
-                                 </g>
-                              </g>
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-11" fill="white">
-                                 <use xlinkHref="#path-10" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
-                                 id="Path"
-                                 fillOpacity="0.2"
-                                 fill="#FFFFFF"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-11)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-13" fill="white">
-                                 <use xlinkHref="#path-12" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
-                                 id="Path"
-                                 fillOpacity="0.2"
-                                 fill="#1A237E"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-13)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-15" fill="white">
-                                 <use xlinkHref="#path-14" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
-                                 id="Path"
-                                 fillOpacity="0.1"
-                                 fill="#1A237E"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-15)"
-                              />
-                           </g>
-                        </g>
-                        <path
-                           d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-                           id="Path"
-                           fill="url(#radialGradient-16)"
-                           fillRule="nonzero"
-                        />
-                     </g>
-                  </g>
-               </g>
-            </g>
-         </g>
-      </svg>
-   ),
-   zapier: () => (
-      <svg
-         width="105"
-         height="28"
-         viewBox="0 0 244 66"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
-            fill="#201515"
-         />
-         <path
-            d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
-            fill="#201515"
-         />
-         <path
-            d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
-            fill="#201515"
-         />
-         <path
-            d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
-            fill="#201515"
-         />
-         <path
-            d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
-            fill="#201515"
-         />
-         <path
-            d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
-            fill="#201515"
-         />
-         <path
-            d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
-            fill="#201515"
-         />
-         <path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
-      </svg>
-   ),
-   messenger: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 48 48"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <radialGradient
-            id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
-            cx="11.087"
-            cy="7.022"
-            r="47.612"
-            gradientTransform="matrix(1 0 0 -1 0 50)"
-            gradientUnits="userSpaceOnUse"
-         >
-            <stop offset="0" stopColor="#1292ff"></stop>
-            <stop offset=".079" stopColor="#2982ff"></stop>
-            <stop offset=".23" stopColor="#4e69ff"></stop>
-            <stop offset=".351" stopColor="#6559ff"></stop>
-            <stop offset=".428" stopColor="#6d53ff"></stop>
-            <stop offset=".754" stopColor="#df47aa"></stop>
-            <stop offset=".946" stopColor="#ff6257"></stop>
-         </radialGradient>
-         <path
-            fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
-            d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
-         />
-         <path
-            d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
-            opacity=".05"
-         />
-         <path
-            d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
-            opacity=".07"
-         />
-         <path
-            fill="#ffffff"
-            d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
-         />
-      </svg>
-   ),
-   user: () => (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         fill="none"
-         stroke="#000000"
-         strokeWidth="2"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
-         <circle cx="12" cy="7" r="4" />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/default/example/animated-beam-unidirectional.tsx b/apps/web/registry/default/example/animated-beam-unidirectional.tsx
deleted file mode 100644
index b05ca5ce..00000000
--- a/apps/web/registry/default/example/animated-beam-unidirectional.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client'
-
-import React, { forwardRef, useRef } from 'react'
-import { ny } from '~/lib/utils'
-import { AnimatedBeam } from '~/registry/default/ui/animated-beam'
-
-const Circle = forwardRef<
-   HTMLDivElement,
-   { className?: string, children?: React.ReactNode }
->(({ className, children }, ref) => {
-   return (
-      <div
-         ref={ref}
-         className={ny(
-            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
-            className,
-         )}
-      >
-         {children}
-      </div>
-   )
-})
-
-export default function AnimatedBeamDemo() {
-   const containerRef = useRef<HTMLDivElement>(null)
-   const div1Ref = useRef<HTMLDivElement>(null)
-   const div2Ref = useRef<HTMLDivElement>(null)
-
-   return (
-      <div
-         className="bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
-         ref={containerRef}
-      >
-         <div className="flex size-full flex-col items-stretch justify-between gap-10">
-            <div className="flex flex-row justify-between">
-               <Circle ref={div1Ref}>
-                  <Icons.user />
-               </Circle>
-               <Circle ref={div2Ref}>
-                  <Icons.openai />
-               </Circle>
-            </div>
-         </div>
-
-         <AnimatedBeam
-            duration={3}
-            containerRef={containerRef}
-            fromRef={div1Ref}
-            toRef={div2Ref}
-         />
-      </div>
-   )
-}
-
-const Icons = {
-   openai: () => (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
-   ),
-   user: () => (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         fill="none"
-         stroke="#000000"
-         strokeWidth="2"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
-         <circle cx="12" cy="7" r="4" />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/default/example/animated-circular-progress-bar-demo.tsx b/apps/web/registry/default/example/animated-circular-progress-bar-demo.tsx
deleted file mode 100644
index f01d6ea9..00000000
--- a/apps/web/registry/default/example/animated-circular-progress-bar-demo.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-
-import AnimatedCircularProgressBar from '~/registry/default/ui/animated-circular-progress-bar'
-
-export default function AnimatedCircularProgressBarDemo() {
-   const [value, setValue] = useState(0)
-
-   useEffect(() => {
-      const handleIncrement = (prev: number) => {
-         if (prev === 100) {
-            return 0
-         }
-         return prev + 10
-      }
-      setValue(handleIncrement)
-      const interval = setInterval(() => setValue(handleIncrement), 2000)
-      return () => clearInterval(interval)
-   }, [])
-
-   return (
-      <AnimatedCircularProgressBar
-         max={100}
-         min={0}
-         value={value}
-         gaugePrimaryColor="rgb(79 70 229)"
-         gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/animated-feature-card-1.tsx b/apps/web/registry/default/example/animated-feature-card-1.tsx
deleted file mode 100644
index 012910c9..00000000
--- a/apps/web/registry/default/example/animated-feature-card-1.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-'use client'
-
-import { motion } from 'framer-motion'
-
-export default function FeatureCard1() {
-   const variant1 = {
-      initial: {
-         scale: 0.87,
-         transition: {
-            delay: 0.05,
-            duration: 0.2,
-            ease: 'linear',
-         },
-      },
-      whileHover: {
-         scale: 0.8,
-         boxShadow:
-        'rgba(245,40,145,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.2,
-            ease: 'linear',
-         },
-      },
-   }
-   const variant2 = {
-      initial: {
-         y: -27,
-         scale: 0.95,
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: 'linear',
-         },
-      },
-      whileHover: {
-         y: -55,
-         scale: 0.87,
-         boxShadow:
-        'rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: 'linear',
-         },
-      },
-   }
-   const variant3 = {
-      initial: {
-         y: -25,
-         opacity: 0,
-         scale: 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.2,
-            ease: 'linear',
-         },
-      },
-      whileHover: {
-         y: -45,
-         opacity: 1,
-         scale: 1,
-         boxShadow:
-        'rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.2,
-            ease: 'easeInOut',
-         },
-      },
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col justify-between"
-         >
-            <div className="flex size-full items-center justify-center rounded-t-xl">
-               <div className="relative flex flex-col items-center justify-center gap-y-2 p-10">
-                  <motion.div
-                     variants={variant1}
-                     className="z-[1] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/jack"
-                           alt="jack"
-                        />
-                     </div>
-                     <div className="flex flex-col gap-y-2">
-                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
-
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                     </div>
-                  </motion.div>
-                  <motion.div
-                     variants={variant2}
-                     className="z-[2] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/jane"
-                           alt="jane"
-                        />
-                     </div>
-                     <div className="flex flex-col gap-y-2">
-                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
-                     </div>
-                  </motion.div>
-                  <motion.div
-                     variants={variant3}
-                     className="absolute bottom-0 z-[3] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/jill"
-                           alt="jill"
-                        />
-                     </div>
-                     <div className="flex flex-col gap-y-2">
-                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                     </div>
-                  </motion.div>
-               </div>
-            </div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Notifications</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Instantly get notified about events
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-feature-card-10.tsx b/apps/web/registry/default/example/animated-feature-card-10.tsx
deleted file mode 100644
index 252f7ca9..00000000
--- a/apps/web/registry/default/example/animated-feature-card-10.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client'
-
-import {
-   AnimatePresence,
-   cubicBezier,
-   motion,
-   useAnimation,
-   useInView,
-} from 'framer-motion'
-import { useEffect, useRef } from 'react'
-
-const cardImage = [
-   {
-      id: 1,
-      title: 'Tom',
-      link: '#',
-      image: 'https://avatar.vercel.sh/tom',
-   },
-   {
-      id: 2,
-      title: 'Chris',
-      link: '#',
-      image: 'https://avatar.vercel.sh/chris',
-   },
-   {
-      id: 3,
-      title: 'PJ',
-      link: '#',
-      image: 'https://avatar.vercel.sh/pj',
-   },
-   {
-      id: 4,
-      title: 'Scott',
-      link: '#',
-      image: 'https://avatar.vercel.sh/scott',
-   },
-   {
-      id: 5,
-      title: 'Yehuda',
-      link: '#',
-      image: 'https://avatar.vercel.sh/yehuda',
-   },
-   {
-      id: 6,
-      title: 'Ezra',
-      link: '#',
-      image: 'https://avatar.vercel.sh/ezra',
-   },
-   {
-      id: 7,
-      title: 'Ivey',
-      link: '#',
-      image: 'https://avatar.vercel.sh/ivey',
-   },
-   {
-      id: 8,
-      title: 'Evan',
-      link: '#',
-      image: 'https://avatar.vercel.sh/evan',
-   },
-   {
-      id: 9,
-      title: 'Van',
-      link: '#',
-      image: 'https://avatar.vercel.sh/van',
-   },
-]
-
-export default function FeatureCard10() {
-   const containerRef = useRef(null)
-   const inView = useInView(containerRef, { amount: 0.25 })
-   const controls = useAnimation()
-
-   useEffect(() => {
-      if (inView)
-         controls.start('visible')
-      else controls.start('hidden')
-   }, [inView, controls])
-
-   return (
-      <div className="flex h-full transform-gpu flex-col items-center justify-between gap-5 rounded-lg border border-neutral-200 bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] xl:flex-row dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <div className="flex w-full flex-col items-start justify-between gap-y-10 p-10 xl:h-full xl:w-1/2">
-            <h2 className="text-3xl font-semibold">
-               Nyxb UI let's you build amazing websites with all your friends.
-            </h2>
-            <a
-               href="#"
-               className="text-base font-normal text-gray-500 underline-offset-4 transition-all hover:underline"
-            >
-               Check out our showcase
-            </a>
-         </div>
-         <div className="relative w-full overflow-hidden xl:w-1/2">
-            <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-1/3 bg-gradient-to-b from-white dark:from-black"></div>
-            <div
-               ref={containerRef}
-               className="relative -right-[50px] -top-[100px] grid max-h-[450px] grid-cols-3 gap-5 [transform:rotate(-15deg)translateZ(10px);]"
-            >
-               <AnimatePresence>
-                  {cardImage.map((card, index) => (
-                     <motion.div
-                        variants={{
-                           hidden: { opacity: 0, scale: 0.96, y: 25 },
-                           visible: { opacity: 1, scale: 1, y: 0 },
-                        }}
-                        initial="hidden"
-                        animate={controls}
-                        exit={{
-                           opacity: 0,
-                           scale: 0,
-                           transition: {
-                              duration: 0.1,
-                              ease: cubicBezier(0.22, 1, 0.36, 1),
-                           },
-                        }}
-                        transition={{
-                           duration: 0.2,
-                           ease: cubicBezier(0.22, 1, 0.36, 1),
-                           delay: index * 0.04,
-                        }}
-                        key={card.id}
-                        className="flex flex-col items-center gap-y-2 rounded-md border bg-white/5 p-5"
-                     >
-                        <img
-                           src={card.image}
-                           alt={card.title}
-                           className="size-20 rounded-full object-cover"
-                        />
-                        <p className="text-sm dark:text-neutral-200/50">{card.title}</p>
-                        <a
-                           href={card.link}
-                           className="rounded-md border border-neutral-700/50 bg-neutral-600 p-2 py-0.5 text-white shadow-xl drop-shadow-lg hover:bg-neutral-500 dark:border-neutral-400/20 dark:bg-gray-500"
-                        >
-                           Website
-                        </a>
-                     </motion.div>
-                  ))}
-               </AnimatePresence>
-            </div>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-feature-card-2.tsx b/apps/web/registry/default/example/animated-feature-card-2.tsx
deleted file mode 100644
index e5b09473..00000000
--- a/apps/web/registry/default/example/animated-feature-card-2.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-'use client'
-
-import { cubicBezier, motion } from 'framer-motion'
-import { Clock, Download, MessageCircle, Star } from 'lucide-react'
-
-const texts = [
-   {
-      id: 1,
-      header: 'New Feature Release.',
-      subheader: 'Experience our app\'s latest features now.',
-      icon: <Star />,
-   },
-   {
-      id: 2,
-      header: 'App Update Available.',
-      subheader:
-      'A new update is available for download. Get the latest version!',
-      icon: <Download />,
-   },
-   {
-      id: 3,
-      header: 'Scheduled Maintenance.',
-      subheader:
-      'Our app will be temporarily unavailable due to scheduled maintenance.',
-      icon: <Clock />,
-   },
-   {
-      id: 4,
-      header: 'Feedback Appreciated.',
-      subheader:
-      'We\'d love to hear your thoughts on our app. Share your feedback!',
-      icon: <MessageCircle />,
-   },
-]
-
-export default function FeatureCard2() {
-   const itemVariants = {
-      initial: (index: number) => ({
-         y: 0,
-         scale: index === 3 ? 0.85 : 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      }),
-      whileHover: (index: number) => ({
-         y: -110,
-         opacity: 1,
-         scale: index === 0 ? 0.85 : index === 3 ? 1 : 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      }),
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col justify-between"
-         >
-            <div className="flex size-full items-center justify-center rounded-t-xl">
-               <motion.div className="flex h-[310px] w-full cursor-pointer flex-col gap-y-5 overflow-hidden rounded-t-md p-5">
-                  {texts.map((text, index) => (
-                     <motion.div
-                        key={text.id}
-                        className="w-full origin-right rounded-md  border border-slate-300/50 p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
-                        custom={index}
-                        variants={itemVariants}
-                     >
-                        <div className="flex flex-row gap-2">
-                           {text.icon}
-                           <p className="text-black dark:text-white">{text.header}</p>
-                        </div>
-                        <p className="text-gray-400 dark:text-gray-400">
-                           {text.subheader}
-                        </p>
-                     </motion.div>
-                  ))}
-               </motion.div>
-            </div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Notifications</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Instantly get notified about events
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-feature-card-3.tsx b/apps/web/registry/default/example/animated-feature-card-3.tsx
deleted file mode 100644
index 9cd551ff..00000000
--- a/apps/web/registry/default/example/animated-feature-card-3.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-'use client'
-
-import { cubicBezier, motion } from 'framer-motion'
-
-export default function FeatureCard3() {
-   const variant1 = {
-      initial: {
-         y: 4,
-         scale: 0.5,
-         opacity: 0,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: -2,
-         opacity: 1,
-         scale: 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant2 = {
-      initial: {
-         y: -2,
-         opacity: 1,
-         scale: 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: 8,
-         opacity: 1,
-         scale: 1.05,
-         boxShadow:
-        'rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col justify-between"
-         >
-            <motion.div className="flex size-full cursor-pointer flex-col items-center justify-center gap-y-2 overflow-hidden rounded-t-xl p-8">
-               <motion.p
-                  variants={variant1}
-                  className="w-fit rounded-full border px-2 text-[15px]"
-               >
-                  Make it Pop ✨
-               </motion.p>
-               <motion.div
-                  variants={variant2}
-                  className="flex max-w-[300px] items-start gap-x-2 rounded-lg border border-neutral-300 border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
-               >
-                  <div className="flex size-6 shrink-0 rounded-full bg-blue-500">
-                     <img
-                        className="size-full rounded-full object-cover"
-                        src="https://avatar.vercel.sh/jane"
-                        alt="jane"
-                     />
-                  </div>
-                  <div>
-                     <h3 className="text-base font-semibold">Josh</h3>
-                     <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                     </p>
-                  </div>
-               </motion.div>
-            </motion.div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">AI Co-Pilot</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Use AI to make your writing stand out
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-feature-card-4.tsx b/apps/web/registry/default/example/animated-feature-card-4.tsx
deleted file mode 100644
index 0120fa1e..00000000
--- a/apps/web/registry/default/example/animated-feature-card-4.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-'use client'
-
-import { cubicBezier, motion } from 'framer-motion'
-
-export default function FeatureCard4() {
-   const variant1 = {
-      initial: {
-         x: 35,
-         y: 5,
-         scale: 0.8,
-         rotate: -3,
-         zIndex: 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.1,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         x: 0,
-         y: 0,
-         scale: 1,
-         rotate: 0,
-         boxShadow:
-        'rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.1,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant2 = {
-      initial: {
-         scale: 1.1,
-         zIndex: 2,
-         transition: {
-            delay: 0.05,
-            duration: 0.1,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         scale: 1,
-         boxShadow:
-        'rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.1,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant3 = {
-      initial: {
-         x: -35,
-         y: 5,
-         scale: 0.8,
-         rotate: 3,
-         zIndex: 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.1,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         x: 0,
-         y: 0,
-         scale: 1,
-         rotate: 0,
-         boxShadow:
-        'rgba(245,40,145,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.1,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col items-start justify-between"
-         >
-            <div className="flex size-full items-center justify-center rounded-t-xl bg-transparent p-10">
-               <motion.div className="flex h-[230px] w-full items-center justify-between gap-x-4">
-                  <motion.div
-                     variants={variant1}
-                     className="z-[3] flex h-fit w-full  flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/jack"
-                           alt="jack"
-                        />
-                     </div>
-                     <div className="grid grid-cols-2 gap-2">
-                        <div className="h-2 w-10 rounded-full bg-neutral-700/50"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-400/80"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-300/80"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-600/80"></div>
-                     </div>
-                  </motion.div>
-                  <motion.div
-                     variants={variant2}
-                     className="z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/christina"
-                           alt="christina"
-                        />
-                     </div>
-                     <div className="grid grid-cols-2 gap-2">
-                        <div className="h-2 w-10 rounded-full bg-neutral-700/50"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-400/80"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-300/80"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-600/80"></div>
-                     </div>
-                  </motion.div>
-                  <motion.div
-                     variants={variant3}
-                     className="z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/joshua"
-                           alt="joshua"
-                        />
-                     </div>
-                     <div className="grid grid-cols-2 gap-2">
-                        <div className="h-2 w-10 rounded-full bg-neutral-700/50"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-400/80"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-300/80"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-600/80"></div>
-                     </div>
-                  </motion.div>
-               </motion.div>
-            </div>
-
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Social</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Write once, share with your friends
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-feature-card-5.tsx b/apps/web/registry/default/example/animated-feature-card-5.tsx
deleted file mode 100644
index 9f5e2972..00000000
--- a/apps/web/registry/default/example/animated-feature-card-5.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-'use client'
-
-import { cubicBezier, motion } from 'framer-motion'
-
-export default function FeatureCard5() {
-   const variant1 = {
-      initial: {
-         viewBox: '0 -950 366 1408',
-         filter: 'saturate(0.3)',
-         opacity: 0.5,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         viewBox: '0 -60 366 310',
-         filter: 'saturate(1)',
-         opacity: 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant2 = {
-      initial: {
-         y: 0,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: 0,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col items-start justify-between"
-         >
-            <div className="relative flex size-full cursor-pointer items-center justify-center overflow-hidden rounded-t-xl bg-transparent p-10">
-               <div className="relative h-[150px] w-full cursor-pointer overflow-hidden rounded-xl border border-slate-200/50 bg-white dark:border-neutral-700/50 dark:bg-neutral-900">
-                  <motion.p
-                     variants={variant2}
-                     className="absolute left-5 top-5 w-fit text-[15px]"
-                  >
-                     +245%
-                  </motion.p>
-                  <motion.svg
-                     variants={variant1}
-                     xmlns="http://www.w3.org/2000/svg"
-                     fill="none"
-                     preserveAspectRatio="none"
-                     className="absolute inset-0 size-full"
-                     viewBox="0 -950 366 1408"
-                  >
-                     <path
-                        fill="url(#a)"
-                        d="M0 193c109.5 0 260.5-52.5 366-192.5v907H0V193Z"
-                     />
-                     <defs>
-                        <linearGradient
-                           id="a"
-                           x1={183}
-                           x2={183}
-                           y1={0.5}
-                           y2={262}
-                           gradientUnits="userSpaceOnUse"
-                        >
-                           <stop stopColor="#22c55e" />
-                           <stop offset={1} stopColor="#15803d" />
-                        </linearGradient>
-                     </defs>
-                  </motion.svg>
-               </div>
-            </div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Growth</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Invest and watch your money grow
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-feature-card-6.tsx b/apps/web/registry/default/example/animated-feature-card-6.tsx
deleted file mode 100644
index ff45ab9c..00000000
--- a/apps/web/registry/default/example/animated-feature-card-6.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-'use client'
-
-import { cubicBezier, motion } from 'framer-motion'
-
-export default function FeatureCard6() {
-   const variant1 = {
-      initial: {
-         y: 0,
-         scale: 0.95,
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: 25,
-         x: 10,
-         scale: 1,
-         rotate: -2,
-         boxShadow:
-        'rgba(39,127,245,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant2 = {
-      initial: {
-         y: 0,
-         scale: 0.95,
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: -25,
-         x: -10,
-         scale: 1,
-         rotate: 3,
-         boxShadow:
-        'rgba(39,245,76,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col items-start justify-between"
-         >
-            <div className="flex h-[300px] w-full items-center justify-center rounded-t-xl bg-transparent ">
-               <div className="relative flex cursor-pointer flex-col items-center justify-center gap-y-2 p-14">
-                  <motion.div
-                     variants={variant1}
-                     className="dark:bg-neutral-980 z-[3] flex size-full items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/jack"
-                           alt="jack"
-                        />
-                     </div>
-                     <div className="flex flex-col gap-y-2">
-                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                     </div>
-                  </motion.div>
-                  <motion.div
-                     variants={variant2}
-                     className="absolute bottom-14 z-[2] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/jack"
-                           alt="jack"
-                        />
-                     </div>
-                     <div className="flex flex-col gap-y-2">
-                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                     </div>
-                  </motion.div>
-               </div>
-            </div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Share</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Share results with your friends
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-feature-card-7.tsx b/apps/web/registry/default/example/animated-feature-card-7.tsx
deleted file mode 100644
index f46e60d2..00000000
--- a/apps/web/registry/default/example/animated-feature-card-7.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-'use client'
-
-import { motion, useAnimation, useInView } from 'framer-motion'
-import {
-   BarChart,
-   File,
-   Globe,
-   HeartHandshake,
-   Rss,
-   Shield,
-} from 'lucide-react'
-import { useEffect, useId, useRef, useState } from 'react'
-import Marquee from '~/registry/default/ui/marquee'
-import { ny } from '~/lib/utils'
-
-const tiles = [
-   {
-      icon: <HeartHandshake className="size-full" />,
-      bg: (
-         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]"></div>
-      ),
-   },
-   {
-      icon: <Globe className="size-full" />,
-      bg: (
-         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 opacity-70 blur-[20px]"></div>
-      ),
-   },
-   {
-      icon: <File className="size-full" />,
-      bg: (
-         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-green-500 via-teal-500 to-emerald-600 opacity-70 blur-[20px]"></div>
-      ),
-   },
-   {
-      icon: <Shield className="size-full" />,
-      bg: (
-         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-600 opacity-70 blur-[20px]"></div>
-      ),
-   },
-   {
-      icon: <Rss className="size-full" />,
-      bg: (
-         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]"></div>
-      ),
-   },
-   {
-      icon: <BarChart className="size-full" />,
-      bg: (
-         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-gray-600 via-gray-500 to-gray-400 opacity-70 blur-[20px]"></div>
-      ),
-   },
-]
-
-function shuffleArray(array: any[]) {
-   let currentIndex = array.length
-   let randomIndex
-   // While there remain elements to shuffle.
-   while (currentIndex !== 0) {
-      // Pick a remaining element.
-      randomIndex = Math.floor(Math.random() * currentIndex)
-      currentIndex--;
-      // And swap it with the current element.
-      [array[currentIndex], array[randomIndex]] = [
-         array[randomIndex],
-         array[currentIndex],
-      ]
-   }
-   return array
-}
-
-function Card(card: { icon: JSX.Element, bg: JSX.Element }) {
-   const id = useId()
-   const controls = useAnimation()
-   const ref = useRef(null)
-   const inView = useInView(ref, { once: true })
-
-   useEffect(() => {
-      if (inView) {
-         controls.start({
-            opacity: 1,
-            transition: { delay: Math.random() * 2, ease: 'easeOut', duration: 1 },
-         })
-      }
-   }, [controls, inView])
-
-   return (
-      <motion.div
-         key={id}
-         ref={ref}
-         initial={{ opacity: 0 }}
-         animate={controls}
-         className={ny(
-            'relative size-20 cursor-pointer overflow-hidden rounded-2xl border p-4',
-            // light styles
-            'bg-white',
-            // dark styles
-            'transform-gpu dark:bg-transparent dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
-         )}
-      >
-         {card.icon}
-         {card.bg}
-      </motion.div>
-   )
-}
-
-export default function FeatureCard7() {
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-   const [randomTiles1] = useState(() => shuffleArray([...tiles]))
-   const [randomTiles2] = useState(() => shuffleArray([...tiles]))
-   const [randomTiles3] = useState(() => shuffleArray([...tiles]))
-   const [randomTiles4] = useState(() => shuffleArray([...tiles]))
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col items-start justify-between"
-         >
-            <div className="group relative flex h-[300px] w-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl p-4">
-               <div className="relative flex flex-col items-center justify-center gap-y-2 px-10">
-                  <Marquee
-                     reverse
-                     className="-delay-[200ms] [--duration:20s]"
-                     repeat={4}
-                  >
-                     {randomTiles1.map((review, idx) => (
-                        <Card key={idx} {...review} />
-                     ))}
-                  </Marquee>
-                  <Marquee reverse className="[--duration:30s]" repeat={4}>
-                     {randomTiles2.map((review, idx) => (
-                        <Card key={idx} {...review} />
-                     ))}
-                  </Marquee>
-                  <Marquee
-                     reverse
-                     className="-delay-[200ms] [--duration:20s]"
-                     repeat={4}
-                  >
-                     {randomTiles3.map((review, idx) => (
-                        <Card key={idx} {...review} />
-                     ))}
-                  </Marquee>
-                  <Marquee reverse className="[--duration:30s]" repeat={4}>
-                     {randomTiles4.map((review, idx) => (
-                        <Card key={idx} {...review} />
-                     ))}
-                  </Marquee>
-                  <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
-                  <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
-               </div>
-            </div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Integrations</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Integrate with all your favourite apps
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-feature-card-8.tsx b/apps/web/registry/default/example/animated-feature-card-8.tsx
deleted file mode 100644
index 4c74437d..00000000
--- a/apps/web/registry/default/example/animated-feature-card-8.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-'use client'
-
-import { cubicBezier, motion } from 'framer-motion'
-
-export default function FeatureCard8() {
-   const variant1 = {
-      initial: {
-         y: 0,
-         scale: 0.97,
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: -45,
-         scale: 1,
-         boxShadow:
-        'rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant2 = {
-      initial: {
-         y: 30,
-         opacity: 0,
-         scale: 0.97,
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: 10,
-         opacity: 1,
-         scale: 1,
-         boxShadow:
-        'rgba(245,40,145,0.05) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant3 = {
-      initial: {
-         x: 30,
-         y: 20,
-         opacity: 0,
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         x: 5,
-         y: 5,
-         opacity: 1,
-         boxShadow:
-        'rgba(39,245,76,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col items-start justify-between"
-         >
-            <div className="flex size-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl bg-transparent">
-               <div className="relative flex flex-col items-center justify-center gap-y-2 px-10 py-20">
-                  <motion.div
-                     variants={variant1}
-                     className=" relative flex items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-6 rounded-full bg-blue-500">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/joshua"
-                           alt="joshua"
-                        />
-                     </div>
-                     <div className="w-[calc(100%-3rem)]">
-                        <h3 className="text-base font-semibold">Mary</h3>
-                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                           I think the design can be improved
-                        </p>
-                     </div>
-                  </motion.div>
-                  <motion.div
-                     variants={variant2}
-                     className=" absolute inset-10 -bottom-14 z-[3] m-auto flex h-fit items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="w-8 ">
-                        <div className="size-6 rounded-full bg-blue-500">
-                           <img
-                              className="size-full rounded-full object-cover"
-                              src="https://avatar.vercel.sh/christina"
-                              alt="christina"
-                           />
-                        </div>
-                     </div>
-                     <div className="w-[calc(100%-3rem)]">
-                        <h3 className="text-base font-semibold">Joshua</h3>
-                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                           On it ✅
-                        </p>
-                     </div>
-                     <motion.p
-                        variants={variant3}
-                        className="highlighted absolute -bottom-2 right-2 w-fit rounded-full border bg-cyan-500 px-2 py-0.5 text-xs text-white"
-                     >
-                        sent
-                     </motion.p>
-                  </motion.div>
-               </div>
-            </div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Reply</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Reply to other creators in app
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-feature-card-9.tsx b/apps/web/registry/default/example/animated-feature-card-9.tsx
deleted file mode 100644
index 5804c1f3..00000000
--- a/apps/web/registry/default/example/animated-feature-card-9.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-'use client'
-
-import { AnimatePresence, motion } from 'framer-motion'
-import type { ReactElement } from 'react'
-import React, { useEffect, useMemo, useState } from 'react'
-import { ny } from '~/lib/utils'
-
-export const AnimatedList = React.memo(
-   ({
-      className,
-      children,
-      delay = 1000,
-   }: {
-      className?: string
-      children: React.ReactNode
-      delay?: number
-   }) => {
-      const [index, setIndex] = useState(0)
-      const childrenArray = React.Children.toArray(children)
-
-      useEffect(() => {
-         const interval = setInterval(() => {
-            setIndex(prevIndex => (prevIndex + 1) % childrenArray.length)
-         }, delay)
-
-         return () => clearInterval(interval)
-      }, [childrenArray.length, delay])
-
-      const itemsToShow = useMemo(
-         () => childrenArray.slice(0, index + 1).reverse(),
-         [index, childrenArray],
-      )
-
-      return (
-         <div className={`flex flex-col items-center gap-4 ${className}`}>
-            <AnimatePresence>
-               {itemsToShow.map(item => (
-                  <AnimatedListItem key={(item as ReactElement).key}>
-                     {item}
-                  </AnimatedListItem>
-               ))}
-            </AnimatePresence>
-         </div>
-      )
-   },
-)
-
-AnimatedList.displayName = 'AnimatedList'
-
-export function AnimatedListItem({ children }: { children: React.ReactNode }) {
-   const animations = {
-      initial: { scale: 0, opacity: 0 },
-      animate: { scale: 1, opacity: 1, originY: 0 },
-      exit: { scale: 0, opacity: 0 },
-      transition: { type: 'spring', stiffness: 350, damping: 40 },
-   }
-
-   return (
-      <motion.div {...animations} layout className="mx-auto w-full">
-         {children}
-      </motion.div>
-   )
-}
-
-interface Item {
-   name: string
-   description: string
-   icon: string
-   color: string
-   time: string
-}
-
-let notifications = [
-   {
-      name: 'Payment received',
-      description: 'Nyxb UI',
-      time: '15m ago',
-
-      icon: '💸',
-      color: '#00C9A7',
-   },
-   {
-      name: 'User signed up',
-      description: 'Nyxb UI',
-      time: '10m ago',
-      icon: '👤',
-      color: '#FFB800',
-   },
-   {
-      name: 'New message',
-      description: 'Nyxb UI',
-      time: '5m ago',
-      icon: '💬',
-      color: '#FF3D71',
-   },
-   {
-      name: 'New event',
-      description: 'Nyxb UI',
-      time: '2m ago',
-      icon: '🗞️',
-      color: '#1E86FF',
-   },
-]
-
-notifications = Array.from({ length: 10 }, () => notifications).flat()
-
-function Notification({ name, description, icon, color, time }: Item) {
-   return (
-      <figure
-         className={ny(
-            'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-lg p-4',
-            // animation styles
-            'transition-all duration-200 ease-in-out hover:scale-[103%]',
-            // light styles
-            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
-            // dark styles
-            'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
-         )}
-      >
-         <div className="flex flex-row items-center gap-3">
-            <div
-               className="flex size-10 items-center justify-center rounded-2xl"
-               style={{
-                  backgroundColor: color,
-               }}
-            >
-               <span className="text-lg">{icon}</span>
-            </div>
-            <div className="flex flex-col overflow-hidden">
-               <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
-                  <span className="text-sm sm:text-lg">{name}</span>
-                  <span className="mx-1">·</span>
-                  <span className="text-xs text-gray-500">{time}</span>
-               </figcaption>
-               <p className="text-sm font-normal dark:text-white/60">
-                  {description}
-               </p>
-            </div>
-         </div>
-      </figure>
-   )
-}
-
-export default function FeatureCard9() {
-   return (
-      <div className="relative flex size-full max-h-[500px] min-h-[500px] max-w-lg transform-gpu flex-col justify-between overflow-hidden rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <div className="flex items-center justify-center overflow-hidden">
-            <AnimatedList>
-               {notifications.map((item, idx) => (
-                  <Notification {...item} key={idx} />
-               ))}
-            </AnimatedList>
-         </div>
-         <div className="flex flex-col items-start gap-y-1 border-t p-4 dark:border-neutral-800">
-            <h2 className="text-xl font-semibold">Notifications</h2>
-            <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-               Get realtime notifications for events you subscribe too
-            </p>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-gradient-text-demo.tsx b/apps/web/registry/default/example/animated-gradient-text-demo.tsx
deleted file mode 100644
index 1440868f..00000000
--- a/apps/web/registry/default/example/animated-gradient-text-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ChevronRight } from 'lucide-react'
-import { ny } from '~/lib/utils'
-import AnimatedGradientText from '~/registry/default/ui/animated-gradient-text'
-
-export default async function AnimatedGradientTextDemo() {
-   return (
-      <div className="z-10 flex min-h-64 items-center justify-center">
-         <AnimatedGradientText>
-            🎉
-            {' '}
-            <hr className="mx-2 h-4 w-px shrink-0 bg-gray-300" />
-            {' '}
-            <span
-               className={ny(
-            `animate-gradient inline bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
-               )}
-            >
-               Introducing Nyxb UI
-            </span>
-            <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
-         </AnimatedGradientText>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-grid-pattern-demo.tsx b/apps/web/registry/default/example/animated-grid-pattern-demo.tsx
deleted file mode 100644
index 8e0f7628..00000000
--- a/apps/web/registry/default/example/animated-grid-pattern-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { ny } from '~/lib/utils'
-import AnimatedGridPattern from '~/registry/default/ui/animated-grid-pattern'
-
-function AnimatedGridPatternDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Animated Grid Pattern
-         </p>
-         <AnimatedGridPattern
-            numSquares={30}
-            maxOpacity={0.5}
-            duration={3}
-            repeatDelay={1}
-            className={ny(
-               '[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]',
-               'inset-x-0 inset-y-[-30%] h-[200%] skew-y-12',
-            )}
-         />
-      </div>
-   )
-}
-
-export default AnimatedGridPatternDemo
diff --git a/apps/web/registry/default/example/animated-list-demo.tsx b/apps/web/registry/default/example/animated-list-demo.tsx
deleted file mode 100644
index 4fbd2eca..00000000
--- a/apps/web/registry/default/example/animated-list-demo.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-
-import { ny } from '~/lib/utils'
-import { AnimatedList } from '~/registry/default/ui/animated-list'
-
-interface Item {
-   name: string
-   description: string
-   icon: string
-   color: string
-   time: string
-}
-
-let notifications = [
-   {
-      name: 'Payment received',
-      description: 'Nyxb UI',
-      time: '15m ago',
-
-      icon: '💸',
-      color: '#00C9A7',
-   },
-   {
-      name: 'User signed up',
-      description: 'Nyxb UI',
-      time: '10m ago',
-      icon: '👤',
-      color: '#FFB800',
-   },
-   {
-      name: 'New message',
-      description: 'Nyxb UI',
-      time: '5m ago',
-      icon: '💬',
-      color: '#FF3D71',
-   },
-   {
-      name: 'New event',
-      description: 'Nyxb UI',
-      time: '2m ago',
-      icon: '🗞️',
-      color: '#1E86FF',
-   },
-]
-
-notifications = Array.from({ length: 10 }, () => notifications).flat()
-
-function Notification({ name, description, icon, color, time }: Item) {
-   return (
-      <figure
-         className={ny(
-            'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4',
-            // animation styles
-            'transition-all duration-200 ease-in-out hover:scale-[103%]',
-            // light styles
-            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
-            // dark styles
-            'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
-         )}
-      >
-         <div className="flex flex-row items-center gap-3">
-            <div
-               className="flex size-10 items-center justify-center rounded-2xl"
-               style={{
-                  backgroundColor: color,
-               }}
-            >
-               <span className="text-lg">{icon}</span>
-            </div>
-            <div className="flex flex-col overflow-hidden">
-               <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
-                  <span className="text-sm sm:text-lg">{name}</span>
-                  <span className="mx-1">·</span>
-                  <span className="text-xs text-gray-500">{time}</span>
-               </figcaption>
-               <p className="text-sm font-normal dark:text-white/60">
-                  {description}
-               </p>
-            </div>
-         </div>
-      </figure>
-   )
-}
-
-export default function AnimatedListDemo() {
-   return (
-      <div className="bg-background relative flex max-h-[400px] min-h-[400px] w-full max-w-lg flex-col overflow-hidden rounded-lg border p-6 shadow-lg">
-         <AnimatedList>
-            {notifications.map((item, idx) => (
-               <Notification {...item} key={idx} />
-            ))}
-         </AnimatedList>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-shiny-text-demo.tsx b/apps/web/registry/default/example/animated-shiny-text-demo.tsx
deleted file mode 100644
index 9d70e6f7..00000000
--- a/apps/web/registry/default/example/animated-shiny-text-demo.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ArrowRightIcon } from '@radix-ui/react-icons'
-import { ny } from '~/lib/utils'
-import AnimatedShinyText from '~/registry/default/ui/animated-shiny-text'
-
-export default async function AnimatedShinyTextDemo() {
-   return (
-      <div className="z-10 flex min-h-64 items-center justify-center">
-         <div
-            className={ny(
-               'group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800',
-            )}
-         >
-            <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400">
-               <span>✨ Introducing Nyxb UI</span>
-               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
-            </AnimatedShinyText>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/animated-subscribe-button-demo.tsx b/apps/web/registry/default/example/animated-subscribe-button-demo.tsx
deleted file mode 100644
index f8d352af..00000000
--- a/apps/web/registry/default/example/animated-subscribe-button-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { CheckIcon, ChevronRightIcon } from 'lucide-react'
-import { AnimatedSubscribeButton } from '~/registry/default/ui/animated-subscribe-button'
-
-export default function AnimatedSubscribeButtonDemo() {
-   return (
-      <AnimatedSubscribeButton
-         buttonColor="#000000"
-         buttonTextColor="#ffffff"
-         subscribeStatus={false}
-         initialText={(
-            <span className="group inline-flex items-center">
-               Subscribe
-               {' '}
-               <ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" />
-            </span>
-         )}
-         changeText={(
-            <span className="group inline-flex items-center">
-               <CheckIcon className="mr-2 size-4" />
-               Subscribed
-               {' '}
-            </span>
-         )}
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/aspect-ratio-demo.tsx b/apps/web/registry/default/example/aspect-ratio-demo.tsx
deleted file mode 100644
index 7617a280..00000000
--- a/apps/web/registry/default/example/aspect-ratio-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Image from 'next/image'
-
-import { AspectRatio } from '~/registry/default/ui/aspect-ratio'
-
-export default function AspectRatioDemo() {
-   return (
-      <AspectRatio ratio={16 / 9} className="bg-muted">
-         <Image
-            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-            alt="Photo by Drew Beamer"
-            fill
-            className="rounded-md object-cover"
-         />
-      </AspectRatio>
-   )
-}
diff --git a/apps/web/registry/default/example/avatar-circles-demo.tsx b/apps/web/registry/default/example/avatar-circles-demo.tsx
deleted file mode 100644
index a44797ee..00000000
--- a/apps/web/registry/default/example/avatar-circles-demo.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import AvatarCircles from '~/registry/default/ui/avatar-circles'
-
-const avatarUrls = [
-   'https://avatars.githubusercontent.com/u/98586665',
-   'https://avatars.githubusercontent.com/u/20110627',
-   'https://avatars.githubusercontent.com/u/106103625',
-   'https://avatars.githubusercontent.com/u/59228569',
-]
-
-export default async function AvatarCirclesDemo() {
-   return <AvatarCircles numPeople={99} avatarUrls={avatarUrls} />
-}
diff --git a/apps/web/registry/default/example/avatar-demo.tsx b/apps/web/registry/default/example/avatar-demo.tsx
deleted file mode 100644
index 6e117884..00000000
--- a/apps/web/registry/default/example/avatar-demo.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-
-export default function AvatarDemo() {
-   return (
-      <Avatar>
-         <AvatarImage src="https://github.com/nyxb.png" alt="@nyxb" />
-         <AvatarFallback>NY</AvatarFallback>
-      </Avatar>
-   )
-}
diff --git a/apps/web/registry/default/example/badge-demo.tsx b/apps/web/registry/default/example/badge-demo.tsx
deleted file mode 100644
index be1c11d4..00000000
--- a/apps/web/registry/default/example/badge-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/default/ui/badge'
-
-export default function BadgeDemo() {
-   return <Badge>Badge</Badge>
-}
diff --git a/apps/web/registry/default/example/badge-destructive.tsx b/apps/web/registry/default/example/badge-destructive.tsx
deleted file mode 100644
index 46e5afdc..00000000
--- a/apps/web/registry/default/example/badge-destructive.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/default/ui/badge'
-
-export default function BadgeDestructive() {
-   return <Badge variant="destructive">Destructive</Badge>
-}
diff --git a/apps/web/registry/default/example/badge-outline.tsx b/apps/web/registry/default/example/badge-outline.tsx
deleted file mode 100644
index d7cd8411..00000000
--- a/apps/web/registry/default/example/badge-outline.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/default/ui/badge'
-
-export default function BadgeOutline() {
-   return <Badge variant="outline">Outline</Badge>
-}
diff --git a/apps/web/registry/default/example/badge-secondary.tsx b/apps/web/registry/default/example/badge-secondary.tsx
deleted file mode 100644
index 603cbd49..00000000
--- a/apps/web/registry/default/example/badge-secondary.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/default/ui/badge'
-
-export default function BadgeSecondary() {
-   return <Badge variant="secondary">Secondary</Badge>
-}
diff --git a/apps/web/registry/default/example/bento-demo-vertical.tsx b/apps/web/registry/default/example/bento-demo-vertical.tsx
deleted file mode 100644
index a2253800..00000000
--- a/apps/web/registry/default/example/bento-demo-vertical.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-   BellIcon,
-   CalendarIcon,
-   FileTextIcon,
-   GlobeIcon,
-   InputIcon,
-} from '@radix-ui/react-icons'
-import { BentoCard, BentoGrid } from '~/registry/default/ui/bento-grid'
-
-const features = [
-   {
-      Icon: FileTextIcon,
-      name: 'Save your files',
-      description: 'We automatically save your files as you type.',
-      href: '/docs',
-      cta: 'Learn more',
-      background: <img className="absolute -right-20 -top-20 opacity-60" />,
-      className: 'lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3',
-   },
-   {
-      Icon: InputIcon,
-      name: 'Full text search',
-      description: 'Search through all your files in one place.',
-      href: '/docs',
-      cta: 'Learn more',
-      background: <img className="absolute -right-20 -top-20 opacity-60" />,
-      className: 'lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3',
-   },
-   {
-      Icon: GlobeIcon,
-      name: 'Multilingual',
-      description: 'Supports 100+ languages and counting.',
-      href: '/docs',
-      cta: 'Learn more',
-      background: <img className="absolute -right-20 -top-20 opacity-60" />,
-      className: 'lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4',
-   },
-   {
-      Icon: CalendarIcon,
-      name: 'Calendar',
-      description: 'Use the calendar to filter your files by date.',
-      href: '/docs',
-      cta: 'Learn more',
-      background: <img className="absolute -right-20 -top-20 opacity-60" />,
-      className: 'lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2',
-   },
-   {
-      Icon: BellIcon,
-      name: 'Notifications',
-      description:
-      'Get notified when someone shares a file or mentions you in a comment.',
-      href: '/docs',
-      cta: 'Learn more',
-      background: <img className="absolute -right-20 -top-20 opacity-60" />,
-      className: 'lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4',
-   },
-]
-
-export default async function BentoDemo() {
-   return (
-      <BentoGrid className="lg:grid-rows-3">
-         {features.map(feature => (
-            <BentoCard key={feature.name} {...feature} />
-         ))}
-      </BentoGrid>
-   )
-}
diff --git a/apps/web/registry/default/example/bento-demo.tsx b/apps/web/registry/default/example/bento-demo.tsx
deleted file mode 100644
index a94a6928..00000000
--- a/apps/web/registry/default/example/bento-demo.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import { CalendarIcon, FileTextIcon, InputIcon } from '@radix-ui/react-icons'
-import { Share2Icon } from 'lucide-react'
-import { Calendar } from '~/components/ui/calendar'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/components/ui/command'
-import { ny } from '~/lib/utils'
-import AnimatedBeamMultipleOutputDemo from '~/registry/default/example/animated-beam-multiple-outputs'
-import { BentoCard, BentoGrid } from '~/registry/default/ui/bento-grid'
-import Marquee from '~/registry/default/ui/marquee'
-
-const files = [
-   {
-      name: 'bitcoin.pdf',
-      body: 'Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.',
-   },
-   {
-      name: 'finances.xlsx',
-      body: 'A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.',
-   },
-   {
-      name: 'logo.svg',
-      body: 'Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.',
-   },
-   {
-      name: 'keys.gpg',
-      body: 'GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.',
-   },
-   {
-      name: 'seed.txt',
-      body: 'A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.',
-   },
-]
-
-interface Item {
-   name: string
-   description: string
-   icon: string
-   color: string
-   time: string
-}
-
-let notifications = [
-   {
-      name: 'Payment received',
-      description: 'Nyxb UI',
-      time: '15m ago',
-
-      icon: '💸',
-      color: '#00C9A7',
-   },
-   {
-      name: 'User signed up',
-      description: 'Nyxb UI',
-      time: '10m ago',
-      icon: '👤',
-      color: '#FFB800',
-   },
-   {
-      name: 'New message',
-      description: 'Nyxb UI',
-      time: '5m ago',
-      icon: '💬',
-      color: '#FF3D71',
-   },
-   {
-      name: 'New event',
-      description: 'Nyxb UI',
-      time: '2m ago',
-      icon: '🗞️',
-      color: '#1E86FF',
-   },
-]
-
-notifications = Array.from({ length: 10 }, () => notifications).flat()
-
-function Notification({ name, description, icon, color, time }: Item) {
-   return (
-      <figure
-         className={ny(
-            'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4',
-            // animation styles
-            'transition-all duration-200 ease-in-out hover:scale-[103%]',
-            // light styles
-            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
-            // dark styles
-            'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
-         )}
-      >
-         <div className="flex flex-row items-center gap-3">
-            <div
-               className="flex size-10 items-center justify-center rounded-2xl"
-               style={{
-                  backgroundColor: color,
-               }}
-            >
-               <span className="text-lg">{icon}</span>
-            </div>
-            <div className="flex flex-col overflow-hidden">
-               <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
-                  <span className="text-sm sm:text-lg">{name}</span>
-                  <span className="mx-1">·</span>
-                  <span className="text-xs text-gray-500">{time}</span>
-               </figcaption>
-               <p className="text-sm font-normal dark:text-white/60">
-                  {description}
-               </p>
-            </div>
-         </div>
-      </figure>
-   )
-}
-
-const features = [
-   {
-      Icon: FileTextIcon,
-      name: 'Save your files',
-      description: 'We automatically save your files as you type.',
-      href: '/docs',
-      cta: 'Learn more',
-      className: 'col-span-3 lg:col-span-1',
-      background: (
-         <Marquee
-            pauseOnHover
-            className="absolute top-10 [--duration:20s] [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] "
-         >
-            {files.map((f, idx) => (
-               <figure
-                  key={idx}
-                  className={ny(
-                     'relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4',
-                     'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',
-                     'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',
-                     'transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none',
-                  )}
-               >
-                  <div className="flex flex-row items-center gap-2">
-                     <div className="flex flex-col">
-                        <figcaption className="text-sm font-medium dark:text-white ">
-                           {f.name}
-                        </figcaption>
-                     </div>
-                  </div>
-                  <blockquote className="mt-2 text-xs">{f.body}</blockquote>
-               </figure>
-            ))}
-         </Marquee>
-      ),
-   },
-   {
-      Icon: InputIcon,
-      name: 'Full text search',
-      description: 'Search through all your files in one place.',
-      href: '/docs',
-      cta: 'Learn more',
-      className: 'col-span-3 lg:col-span-2',
-      background: (
-         <Command className="absolute right-10 top-10 w-[70%] origin-top translate-x-0 border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:-translate-x-10">
-            <CommandInput placeholder="Type a command or search..." />
-            <CommandList>
-               <CommandEmpty>No results found.</CommandEmpty>
-               <CommandGroup heading="Suggestions">
-                  <CommandItem>screenshot.png</CommandItem>
-                  <CommandItem>bitcoin.pdf</CommandItem>
-                  <CommandItem>finances.xlsx</CommandItem>
-                  <CommandItem>logo.svg</CommandItem>
-                  <CommandItem>keys.gpg</CommandItem>
-                  <CommandItem>seed.txt</CommandItem>
-               </CommandGroup>
-            </CommandList>
-         </Command>
-      ),
-   },
-   {
-      Icon: Share2Icon,
-      name: 'Integrations',
-      description: 'Supports 100+ integrations and counting.',
-      href: '/docs',
-      cta: 'Learn more',
-      className: 'col-span-3 lg:col-span-2',
-      background: (
-         <AnimatedBeamMultipleOutputDemo className="absolute right-2 top-4 h-[300px] w-[600px] border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105" />
-      ),
-   },
-   {
-      Icon: CalendarIcon,
-      name: 'Calendar',
-      description: 'Use the calendar to filter your files by date.',
-      className: 'col-span-3 lg:col-span-1',
-      href: '/docs',
-      cta: 'Learn more',
-      background: (
-         <Calendar
-            mode="single"
-            selected={new Date(2022, 4, 11, 0, 0, 0)}
-            className="absolute right-0 top-10 origin-top rounded-md border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:scale-105"
-         />
-      ),
-   },
-]
-
-export default function BentoDemo() {
-   return (
-      <BentoGrid>
-         {features.map((feature, idx) => (
-            <BentoCard key={idx} {...feature} />
-         ))}
-      </BentoGrid>
-   )
-}
diff --git a/apps/web/registry/default/example/blur-fade-demo.tsx b/apps/web/registry/default/example/blur-fade-demo.tsx
deleted file mode 100644
index 1497d375..00000000
--- a/apps/web/registry/default/example/blur-fade-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import BlurFade from '~/registry/default/ui/blur-fade'
-
-const images = Array.from({ length: 9 }, (_, i) => {
-   const isLandscape = i % 2 === 0
-   const width = isLandscape ? 800 : 600
-   const height = isLandscape ? 600 : 800
-   return `https://picsum.photos/seed/${i + 1}/${width}/${height}`
-})
-
-export default function BlurFadeDemo() {
-   return (
-      <section id="photos">
-         <div className="columns-2 gap-4 sm:columns-3">
-            {images.map((imageUrl, idx) => (
-               <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>
-                  <img
-                     className="mb-4 size-full rounded-lg object-contain"
-                     src={imageUrl}
-                     alt={`Random stock image ${idx + 1}`}
-                  />
-               </BlurFade>
-            ))}
-         </div>
-      </section>
-   )
-}
diff --git a/apps/web/registry/default/example/blur-fade-text-demo.tsx b/apps/web/registry/default/example/blur-fade-text-demo.tsx
deleted file mode 100644
index 6981f7f8..00000000
--- a/apps/web/registry/default/example/blur-fade-text-demo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import BlurFade from '~/registry/default/ui/blur-fade'
-
-export default function BlurFadeTextDemo() {
-   return (
-      <section id="header">
-         <BlurFade delay={0.25} inView>
-            <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
-               Hello World 👋
-            </h2>
-         </BlurFade>
-         <BlurFade delay={0.25 * 2} inView>
-            <span className="text-pretty text-xl tracking-tighter sm:text-3xl xl:text-4xl/none">
-               Nice to meet you
-            </span>
-         </BlurFade>
-      </section>
-   )
-}
diff --git a/apps/web/registry/default/example/blur-in-demo.tsx b/apps/web/registry/default/example/blur-in-demo.tsx
deleted file mode 100644
index c325d9f5..00000000
--- a/apps/web/registry/default/example/blur-in-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import BlurIn from '~/registry/default/ui/blur-in'
-
-function BlurInDemo() {
-   return (
-      <BlurIn
-         word="Blur In"
-         className="text-4xl font-bold text-black dark:text-white"
-      />
-   )
-}
-export default BlurInDemo
diff --git a/apps/web/registry/default/example/border-beam-demo.tsx b/apps/web/registry/default/example/border-beam-demo.tsx
deleted file mode 100644
index 1c66f0dc..00000000
--- a/apps/web/registry/default/example/border-beam-demo.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { BorderBeam } from '~/registry/default/ui/border-beam'
-
-export default function BorderBeamDemo() {
-   return (
-      <div className="relative rounded-xl">
-         <img
-            src="/dashboard-dark.png"
-            alt="Hero Image"
-            className="hidden w-[700px] rounded-[inherit] border object-contain shadow-lg dark:block"
-         />
-         <img
-            src="/dashboard-light.png"
-            alt="Hero Image"
-            className="block w-[700px] rounded-[inherit] border object-contain shadow-lg dark:hidden"
-         />
-
-         <BorderBeam size={250} duration={12} delay={9} />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/box-reveal-demo.tsx b/apps/web/registry/default/example/box-reveal-demo.tsx
deleted file mode 100644
index fc3e6e77..00000000
--- a/apps/web/registry/default/example/box-reveal-demo.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import BoxReveal from '~/registry/default/ui/box-reveal'
-
-import { Button } from '~/components/ui/button'
-
-export default async function BoxRevealDemo() {
-   return (
-      <div className="size-full max-w-lg items-center justify-center overflow-hidden pt-8">
-         <BoxReveal boxColor="#5046e6" duration={0.5}>
-            <p className="text-[3.5rem] font-semibold">
-               Nyxb UI
-               <span className="text-[#5046e6]">.</span>
-            </p>
-         </BoxReveal>
-
-         <BoxReveal boxColor="#5046e6" duration={0.5}>
-            <h2 className="mt-[.5rem] text-[1rem]">
-               UI library for
-               {' '}
-               <span className="text-[#5046e6]">Design Engineers</span>
-            </h2>
-         </BoxReveal>
-
-         <BoxReveal boxColor="#5046e6" duration={0.5}>
-            <div className="mt-6">
-               <p>
-                  -&gt; 20+ free and open-source animated components built with
-                  <span className="font-semibold text-[#5046e6]"> React</span>
-                  ,
-                  <span className="font-semibold text-[#5046e6]"> Typescript</span>
-                  ,
-                  <span className="font-semibold text-[#5046e6]"> Tailwind CSS</span>
-                  ,
-                  and
-                  <span className="font-semibold text-[#5046e6]"> Framer Motion</span>
-                  .
-                  {' '}
-                  <br />
-                  -&gt; 100% open-source, and customizable.
-                  {' '}
-                  <br />
-               </p>
-            </div>
-         </BoxReveal>
-
-         <BoxReveal boxColor="#5046e6" duration={0.5}>
-            <Button className="mt-[1.6rem] bg-[#5046e6]">Explore</Button>
-         </BoxReveal>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/breadcrumb-demo.tsx b/apps/web/registry/default/example/breadcrumb-demo.tsx
deleted file mode 100644
index 0aa08403..00000000
--- a/apps/web/registry/default/example/breadcrumb-demo.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-   Breadcrumb,
-   BreadcrumbEllipsis,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-
-export default function BreadcrumbDemo() {
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/">Home</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <DropdownMenu>
-                  <DropdownMenuTrigger className="flex items-center gap-1">
-                     <BreadcrumbEllipsis className="size-4" />
-                     <span className="sr-only">Toggle menu</span>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start">
-                     <DropdownMenuItem>Documentation</DropdownMenuItem>
-                     <DropdownMenuItem>Themes</DropdownMenuItem>
-                     <DropdownMenuItem>GitHub</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/default/example/breadcrumb-dropdown.tsx b/apps/web/registry/default/example/breadcrumb-dropdown.tsx
deleted file mode 100644
index 05f1ea68..00000000
--- a/apps/web/registry/default/example/breadcrumb-dropdown.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ChevronDown, Slash } from 'lucide-react'
-
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-
-export default function BreadcrumbWithDropdown() {
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/">Home</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator>
-               <Slash />
-            </BreadcrumbSeparator>
-            <BreadcrumbItem>
-               <DropdownMenu>
-                  <DropdownMenuTrigger className="flex items-center gap-1">
-                     Components
-                     <ChevronDown className="size-4" />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start">
-                     <DropdownMenuItem>Documentation</DropdownMenuItem>
-                     <DropdownMenuItem>Themes</DropdownMenuItem>
-                     <DropdownMenuItem>GitHub</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator>
-               <Slash />
-            </BreadcrumbSeparator>
-            <BreadcrumbItem>
-               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/default/example/breadcrumb-ellipsis.tsx b/apps/web/registry/default/example/breadcrumb-ellipsis.tsx
deleted file mode 100644
index 1f5a28e6..00000000
--- a/apps/web/registry/default/example/breadcrumb-ellipsis.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Link from 'next/link'
-
-import {
-   Breadcrumb,
-   BreadcrumbEllipsis,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-
-export default function BreadcrumbCollapsed() {
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink asChild>
-                  <Link href="/">Home</Link>
-               </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbEllipsis />
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbLink asChild>
-                  <Link href="/docs/components">Components</Link>
-               </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/default/example/breadcrumb-link.tsx b/apps/web/registry/default/example/breadcrumb-link.tsx
deleted file mode 100644
index a174bc99..00000000
--- a/apps/web/registry/default/example/breadcrumb-link.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Link from 'next/link'
-
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-
-export default function BreadcrumbWithCustomSeparator() {
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink>
-                  <Link href="/">Home</Link>
-               </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbLink>
-                  <Link href="/components">Components</Link>
-               </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/default/example/breadcrumb-responsive.tsx b/apps/web/registry/default/example/breadcrumb-responsive.tsx
deleted file mode 100644
index f067d45f..00000000
--- a/apps/web/registry/default/example/breadcrumb-responsive.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import Link from 'next/link'
-
-import { useMediaQuery } from '~/hooks/use-media-query'
-import {
-   Breadcrumb,
-   BreadcrumbEllipsis,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Drawer,
-   DrawerClose,
-   DrawerContent,
-   DrawerDescription,
-   DrawerFooter,
-   DrawerHeader,
-   DrawerTitle,
-   DrawerTrigger,
-} from '~/registry/default/ui/drawer'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-
-const items = [
-   { href: '#', label: 'Home' },
-   { href: '#', label: 'Documentation' },
-   { href: '#', label: 'Building Your Application' },
-   { href: '#', label: 'Data Fetching' },
-   { label: 'Caching and Revalidating' },
-]
-
-const ITEMS_TO_DISPLAY = 3
-
-export default function BreadcrumbResponsive() {
-   const [open, setOpen] = React.useState(false)
-   const isDesktop = useMediaQuery('(min-width: 768px)')
-
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            {items.length > ITEMS_TO_DISPLAY
-               ? (
-                     <>
-                        <BreadcrumbItem>
-                           {isDesktop
-                              ? (
-                                    <DropdownMenu open={open} onOpenChange={setOpen}>
-                                       <DropdownMenuTrigger
-                                          className="flex items-center gap-1"
-                                          aria-label="Toggle menu"
-                                       >
-                                          <BreadcrumbEllipsis className="size-4" />
-                                       </DropdownMenuTrigger>
-                                       <DropdownMenuContent align="start">
-                                          {items.slice(1, -2).map((item, index) => (
-                                             <DropdownMenuItem key={index}>
-                                                <Link href={item.href ? item.href : '#'}>
-                                                   {item.label}
-                                                </Link>
-                                             </DropdownMenuItem>
-                                          ))}
-                                       </DropdownMenuContent>
-                                    </DropdownMenu>
-                                 )
-                              : (
-                                    <Drawer open={open} onOpenChange={setOpen}>
-                                       <DrawerTrigger aria-label="Toggle Menu">
-                                          <BreadcrumbEllipsis className="size-4" />
-                                       </DrawerTrigger>
-                                       <DrawerContent>
-                                          <DrawerHeader className="text-left">
-                                             <DrawerTitle>Navigate to</DrawerTitle>
-                                             <DrawerDescription>
-                                                Select a page to navigate to.
-                                             </DrawerDescription>
-                                          </DrawerHeader>
-                                          <div className="grid gap-1 px-4">
-                                             {items.slice(1, -2).map((item, index) => (
-                                                <Link
-                                                   key={index}
-                                                   href={item.href ? item.href : '#'}
-                                                   className="py-1 text-sm"
-                                                >
-                                                   {item.label}
-                                                </Link>
-                                             ))}
-                                          </div>
-                                          <DrawerFooter className="pt-4">
-                                             <DrawerClose asChild>
-                                                <Button variant="outline">Close</Button>
-                                             </DrawerClose>
-                                          </DrawerFooter>
-                                       </DrawerContent>
-                                    </Drawer>
-                                 )}
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator />
-                     </>
-                  )
-               : null}
-            {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
-               <BreadcrumbItem key={index}>
-                  {item.href
-                     ? (
-                           <>
-                              <BreadcrumbLink
-                                 asChild
-                                 className="max-w-20 truncate md:max-w-none"
-                              >
-                                 <Link href={item.href}>{item.label}</Link>
-                              </BreadcrumbLink>
-                              <BreadcrumbSeparator />
-                           </>
-                        )
-                     : (
-                           <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
-                              {item.label}
-                           </BreadcrumbPage>
-                        )}
-               </BreadcrumbItem>
-            ))}
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/default/example/breadcrumb-separator.tsx b/apps/web/registry/default/example/breadcrumb-separator.tsx
deleted file mode 100644
index 9d30d781..00000000
--- a/apps/web/registry/default/example/breadcrumb-separator.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Slash } from 'lucide-react'
-
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/default/ui/breadcrumb'
-
-export default function BreadcrumbWithCustomSeparator() {
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/">Home</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator>
-               <Slash />
-            </BreadcrumbSeparator>
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator>
-               <Slash />
-            </BreadcrumbSeparator>
-            <BreadcrumbItem>
-               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/default/example/button-as-child.tsx b/apps/web/registry/default/example/button-as-child.tsx
deleted file mode 100644
index 16bb41c0..00000000
--- a/apps/web/registry/default/example/button-as-child.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import Link from 'next/link'
-
-import { Button } from '~/registry/default/ui/button'
-
-export default function ButtonAsChild() {
-   return (
-      <Button asChild>
-         <Link href="/login">Login</Link>
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/example/button-demo.tsx b/apps/web/registry/default/example/button-demo.tsx
deleted file mode 100644
index 28d1835c..00000000
--- a/apps/web/registry/default/example/button-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export default function ButtonDemo() {
-   return <Button>Button</Button>
-}
diff --git a/apps/web/registry/default/example/button-destructive.tsx b/apps/web/registry/default/example/button-destructive.tsx
deleted file mode 100644
index 4147bec9..00000000
--- a/apps/web/registry/default/example/button-destructive.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export default function ButtonDestructive() {
-   return <Button variant="destructive">Destructive</Button>
-}
diff --git a/apps/web/registry/default/example/button-ghost.tsx b/apps/web/registry/default/example/button-ghost.tsx
deleted file mode 100644
index 083e1b85..00000000
--- a/apps/web/registry/default/example/button-ghost.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export default function ButtonGhost() {
-   return <Button variant="ghost">Ghost</Button>
-}
diff --git a/apps/web/registry/default/example/button-icon.tsx b/apps/web/registry/default/example/button-icon.tsx
deleted file mode 100644
index 48f201ad..00000000
--- a/apps/web/registry/default/example/button-icon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ChevronRight } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-
-export default function ButtonIcon() {
-   return (
-      <Button variant="outline" size="icon">
-         <ChevronRight className="size-4" />
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/example/button-link.tsx b/apps/web/registry/default/example/button-link.tsx
deleted file mode 100644
index bbe487dd..00000000
--- a/apps/web/registry/default/example/button-link.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export default function ButtonLink() {
-   return <Button variant="link">Link</Button>
-}
diff --git a/apps/web/registry/default/example/button-loading.tsx b/apps/web/registry/default/example/button-loading.tsx
deleted file mode 100644
index f1ad2ea8..00000000
--- a/apps/web/registry/default/example/button-loading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Loader2 } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-
-export default function ButtonLoading() {
-   return (
-      <Button disabled>
-         <Loader2 className="mr-2 size-4 animate-spin" />
-         Please wait
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/example/button-outline.tsx b/apps/web/registry/default/example/button-outline.tsx
deleted file mode 100644
index 96993a1c..00000000
--- a/apps/web/registry/default/example/button-outline.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export default function ButtonOutline() {
-   return <Button variant="outline">Outline</Button>
-}
diff --git a/apps/web/registry/default/example/button-secondary.tsx b/apps/web/registry/default/example/button-secondary.tsx
deleted file mode 100644
index dd8efb82..00000000
--- a/apps/web/registry/default/example/button-secondary.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-
-export default function ButtonSecondary() {
-   return <Button variant="secondary">Secondary</Button>
-}
diff --git a/apps/web/registry/default/example/button-with-icon.tsx b/apps/web/registry/default/example/button-with-icon.tsx
deleted file mode 100644
index 8b6d082c..00000000
--- a/apps/web/registry/default/example/button-with-icon.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Mail } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-
-export default function ButtonWithIcon() {
-   return (
-      <Button>
-         <Mail className="mr-2 size-4" />
-         {' '}
-         Login with Email
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/example/calendar-demo.tsx b/apps/web/registry/default/example/calendar-demo.tsx
deleted file mode 100644
index b5459ab1..00000000
--- a/apps/web/registry/default/example/calendar-demo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Calendar } from '~/registry/default/ui/calendar'
-
-export default function CalendarDemo() {
-   const [date, setDate] = React.useState<Date | undefined>(new Date())
-
-   return (
-      <Calendar
-         mode="single"
-         selected={date}
-         onSelect={setDate}
-         className="rounded-md border"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/calendar-form.tsx b/apps/web/registry/default/example/calendar-form.tsx
deleted file mode 100644
index 7008fa1e..00000000
--- a/apps/web/registry/default/example/calendar-form.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { format } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import { Calendar } from '~/registry/default/ui/calendar'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const FormSchema = z.object({
-   dob: z.date({
-      required_error: 'A date of birth is required.',
-   }),
-})
-
-export default function CalendarForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-            <FormField
-               control={form.control}
-               name="dob"
-               render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                     <FormLabel>Date of birth</FormLabel>
-                     <Popover>
-                        <PopoverTrigger asChild>
-                           <FormControl>
-                              <Button
-                                 variant="outline"
-                                 className={ny(
-                                    'w-[240px] pl-3 text-left font-normal',
-                                    !field.value && 'text-muted-foreground',
-                                 )}
-                              >
-                                 {field.value
-                                    ? (
-                                          format(field.value, 'PPP')
-                                       )
-                                    : (
-                                          <span>Pick a date</span>
-                                       )}
-                                 <CalendarIcon className="ml-auto size-4 opacity-50" />
-                              </Button>
-                           </FormControl>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0" align="start">
-                           <Calendar
-                              mode="single"
-                              selected={field.value}
-                              onSelect={field.onChange}
-                              disabled={date =>
-                                 date > new Date() || date < new Date('1900-01-01')}
-                              initialFocus
-                           />
-                        </PopoverContent>
-                     </Popover>
-                     <FormDescription>
-                        Your date of birth is used to calculate your age.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/calendar-react-hook-form.tsx b/apps/web/registry/default/example/calendar-react-hook-form.tsx
deleted file mode 100644
index c19555f7..00000000
--- a/apps/web/registry/default/example/calendar-react-hook-form.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client'
-
-import { format } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import { Calendar } from '~/registry/default/ui/calendar'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const FormSchema = z.object({
-   dob: z.date({
-      required_error: 'A date of birth is required.',
-   }),
-})
-
-export default function CalendarForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-            <FormField
-               control={form.control}
-               name="dob"
-               render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                     <FormLabel>Date of birth</FormLabel>
-                     <Popover>
-                        <PopoverTrigger asChild>
-                           <FormControl>
-                              <Button
-                                 variant="outline"
-                                 className={ny(
-                                    'w-[240px] pl-3 text-left font-normal',
-                                    !field.value && 'text-muted-foreground',
-                                 )}
-                              >
-                                 {field.value
-                                    ? (
-                                          format(field.value, 'PPP')
-                                       )
-                                    : (
-                                          <span>Pick a date</span>
-                                       )}
-                                 <CalendarIcon className="ml-auto size-4 opacity-50" />
-                              </Button>
-                           </FormControl>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0" align="start">
-                           <Calendar
-                              mode="single"
-                              selected={field.value}
-                              onSelect={field.onChange}
-                              disabled={date =>
-                                 date > new Date() || date < new Date('1900-01-01')}
-                              initialFocus
-                           />
-                        </PopoverContent>
-                     </Popover>
-                     <FormDescription>
-                        Your date of birth is used to calculate your age.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/card-demo.tsx b/apps/web/registry/default/example/card-demo.tsx
deleted file mode 100644
index f6d66578..00000000
--- a/apps/web/registry/default/example/card-demo.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { BellRing, Check } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Switch } from '~/registry/default/ui/switch'
-
-const notifications = [
-   {
-      title: 'Your call has been confirmed.',
-      description: '1 hour ago',
-   },
-   {
-      title: 'You have a new message!',
-      description: '1 hour ago',
-   },
-   {
-      title: 'Your subscription is expiring soon!',
-      description: '2 hours ago',
-   },
-]
-
-type CardProps = React.ComponentProps<typeof Card>
-
-export default function CardDemo({ className, ...props }: CardProps) {
-   return (
-      <Card className={ny('w-[380px]', className)} {...props}>
-         <CardHeader>
-            <CardTitle>Notifications</CardTitle>
-            <CardDescription>You have 3 unread messages.</CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-4">
-            <div className=" flex items-center space-x-4 rounded-md border p-4">
-               <BellRing />
-               <div className="flex-1 space-y-1">
-                  <p className="text-sm font-medium leading-none">
-                     Push Notifications
-                  </p>
-                  <p className="text-muted-foreground text-sm">
-                     Send notifications to device.
-                  </p>
-               </div>
-               <Switch />
-            </div>
-            <div>
-               {notifications.map((notification, index) => (
-                  <div
-                     key={index}
-                     className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
-                  >
-                     <span className="flex size-2 translate-y-1 rounded-full bg-sky-500" />
-                     <div className="space-y-1">
-                        <p className="text-sm font-medium leading-none">
-                           {notification.title}
-                        </p>
-                        <p className="text-muted-foreground text-sm">
-                           {notification.description}
-                        </p>
-                     </div>
-                  </div>
-               ))}
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button className="w-full">
-               <Check className="mr-2 size-4" />
-               {' '}
-               Mark all as read
-            </Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/example/card-with-form.tsx b/apps/web/registry/default/example/card-with-form.tsx
deleted file mode 100644
index 5da84088..00000000
--- a/apps/web/registry/default/example/card-with-form.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-
-export default function CardWithForm() {
-   return (
-      <Card className="w-[350px]">
-         <CardHeader>
-            <CardTitle>Create project</CardTitle>
-            <CardDescription>Deploy your new project in one-click.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <form>
-               <div className="grid w-full items-center gap-4">
-                  <div className="flex flex-col space-y-1.5">
-                     <Label htmlFor="name">Name</Label>
-                     <Input id="name" placeholder="Name of your project" />
-                  </div>
-                  <div className="flex flex-col space-y-1.5">
-                     <Label htmlFor="framework">Framework</Label>
-                     <Select>
-                        <SelectTrigger id="framework">
-                           <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent position="popper">
-                           <SelectItem value="next">Next.js</SelectItem>
-                           <SelectItem value="sveltekit">SvelteKit</SelectItem>
-                           <SelectItem value="astro">Astro</SelectItem>
-                           <SelectItem value="nuxt">Nuxt.js</SelectItem>
-                        </SelectContent>
-                     </Select>
-                  </div>
-               </div>
-            </form>
-         </CardContent>
-         <CardFooter className="flex justify-between">
-            <Button variant="outline">Cancel</Button>
-            <Button>Deploy</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/activity-goal.tsx b/apps/web/registry/default/example/cards/activity-goal.tsx
deleted file mode 100644
index 876df1cc..00000000
--- a/apps/web/registry/default/example/cards/activity-goal.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Minus, Plus } from 'lucide-react'
-import { useTheme } from 'next-themes'
-import { Bar, BarChart, ResponsiveContainer } from 'recharts'
-
-import { useConfig } from '~/hooks/use-config'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { baseColors } from '~/registry/registry-base-colors'
-
-const data = [
-   {
-      goal: 400,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 278,
-   },
-   {
-      goal: 189,
-   },
-   {
-      goal: 239,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 278,
-   },
-   {
-      goal: 189,
-   },
-   {
-      goal: 349,
-   },
-]
-
-export function CardsActivityGoal() {
-   const { theme: mode } = useTheme()
-   const [config] = useConfig()
-
-   const baseColor = baseColors.find(
-      baseColor => baseColor.name === config.theme,
-   )
-   const [goal, setGoal] = React.useState(350)
-
-   function onClick(adjustment: number) {
-      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
-   }
-
-   return (
-      <Card>
-         <CardHeader className="pb-4">
-            <CardTitle className="text-base">Move Goal</CardTitle>
-            <CardDescription>Set your daily activity goal.</CardDescription>
-         </CardHeader>
-         <CardContent className="pb-2">
-            <div className="flex items-center justify-center space-x-2">
-               <Button
-                  variant="outline"
-                  size="icon"
-                  className="size-8 shrink-0 rounded-full"
-                  onClick={() => onClick(-10)}
-                  disabled={goal <= 200}
-               >
-                  <Minus className="size-4" />
-                  <span className="sr-only">Decrease</span>
-               </Button>
-               <div className="flex-1 text-center">
-                  <div className="text-5xl font-bold tracking-tighter">{goal}</div>
-                  <div className="text-muted-foreground text-[0.70rem] uppercase">
-                     Calories/day
-                  </div>
-               </div>
-               <Button
-                  variant="outline"
-                  size="icon"
-                  className="size-8 shrink-0 rounded-full"
-                  onClick={() => onClick(10)}
-                  disabled={goal >= 400}
-               >
-                  <Plus className="size-4" />
-                  <span className="sr-only">Increase</span>
-               </Button>
-            </div>
-            <div className="my-3 h-[60px]">
-               <ResponsiveContainer width="100%" height="100%">
-                  <BarChart data={data}>
-                     <Bar
-                        dataKey="goal"
-                        style={
-                           {
-                              'fill': 'var(--theme-primary)',
-                              'opacity': 0.2,
-                              '--theme-primary': `hsl(${
-                      baseColor?.cssVars[mode === 'dark' ? 'dark' : 'light']
-                        .primary
-                    })`,
-                           } as React.CSSProperties
-                        }
-                     />
-                  </BarChart>
-               </ResponsiveContainer>
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button className="w-full">Set Goal</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/calendar.tsx b/apps/web/registry/default/example/cards/calendar.tsx
deleted file mode 100644
index 7e4271e3..00000000
--- a/apps/web/registry/default/example/cards/calendar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { addDays } from 'date-fns'
-
-import { Calendar } from '~/registry/default/ui/calendar'
-import { Card, CardContent } from '~/registry/default/ui/card'
-
-const start = new Date(2023, 5, 5)
-
-export function CardsCalendar() {
-   return (
-      <Card className="max-w-[280px]">
-         <CardContent className="p-0">
-            <Calendar
-               numberOfMonths={1}
-               mode="range"
-               defaultMonth={start}
-               selected={{
-                  from: start,
-                  to: addDays(start, 8),
-               }}
-            />
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/chat.tsx b/apps/web/registry/default/example/cards/chat.tsx
deleted file mode 100644
index d4a9be87..00000000
--- a/apps/web/registry/default/example/cards/chat.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import * as React from 'react'
-import { Check, Plus, Send } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardFooter,
-   CardHeader,
-} from '~/registry/default/ui/card'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/default/ui/command'
-import {
-   Dialog,
-   DialogContent,
-   DialogDescription,
-   DialogFooter,
-   DialogHeader,
-   DialogTitle,
-} from '~/registry/default/ui/dialog'
-import { Input } from '~/registry/default/ui/input'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
-
-const users = [
-   {
-      name: 'Olivia Martin',
-      email: 'm@example.com',
-      avatar: '/avatars/01.png',
-   },
-   {
-      name: 'Isabella Nguyen',
-      email: 'isabella.nguyen@email.com',
-      avatar: '/avatars/03.png',
-   },
-   {
-      name: 'Emma Wilson',
-      email: 'emma@example.com',
-      avatar: '/avatars/05.png',
-   },
-   {
-      name: 'Jackson Lee',
-      email: 'lee@example.com',
-      avatar: '/avatars/02.png',
-   },
-   {
-      name: 'William Kim',
-      email: 'will@email.com',
-      avatar: '/avatars/04.png',
-   },
-] as const
-
-type User = (typeof users)[number]
-
-export function CardsChat() {
-   const [open, setOpen] = React.useState(false)
-   const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
-
-   const [messages, setMessages] = React.useState([
-      {
-         role: 'agent',
-         content: 'Hi, how can I help you today?',
-      },
-      {
-         role: 'user',
-         content: 'Hey, I\'m having trouble with my account.',
-      },
-      {
-         role: 'agent',
-         content: 'What seems to be the problem?',
-      },
-      {
-         role: 'user',
-         content: 'I can\'t log in.',
-      },
-   ])
-   const [input, setInput] = React.useState('')
-   const inputLength = input.trim().length
-
-   return (
-      <>
-         <Card>
-            <CardHeader className="flex flex-row items-center">
-               <div className="flex items-center space-x-4">
-                  <Avatar>
-                     <AvatarImage src="/avatars/01.png" alt="Image" />
-                     <AvatarFallback>OM</AvatarFallback>
-                  </Avatar>
-                  <div>
-                     <p className="text-sm font-medium leading-none">Sofia Davis</p>
-                     <p className="text-muted-foreground text-sm">m@example.com</p>
-                  </div>
-               </div>
-               <TooltipProvider delayDuration={0}>
-                  <Tooltip>
-                     <TooltipTrigger asChild>
-                        <Button
-                           size="icon"
-                           variant="outline"
-                           className="ml-auto rounded-full"
-                           onClick={() => setOpen(true)}
-                        >
-                           <Plus className="size-4" />
-                           <span className="sr-only">New message</span>
-                        </Button>
-                     </TooltipTrigger>
-                     <TooltipContent sideOffset={10}>New message</TooltipContent>
-                  </Tooltip>
-               </TooltipProvider>
-            </CardHeader>
-            <CardContent>
-               <div className="space-y-4">
-                  {messages.map((message, index) => (
-                     <div
-                        key={index}
-                        className={ny(
-                           'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',
-                           message.role === 'user'
-                              ? 'bg-primary text-primary-foreground ml-auto'
-                              : 'bg-muted',
-                        )}
-                     >
-                        {message.content}
-                     </div>
-                  ))}
-               </div>
-            </CardContent>
-            <CardFooter>
-               <form
-                  onSubmit={(event) => {
-                     event.preventDefault()
-                     if (inputLength === 0)
-                        return
-                     setMessages([
-                        ...messages,
-                        {
-                           role: 'user',
-                           content: input,
-                        },
-                     ])
-                     setInput('')
-                  }}
-                  className="flex w-full items-center space-x-2"
-               >
-                  <Input
-                     id="message"
-                     placeholder="Type your message..."
-                     className="flex-1"
-                     autoComplete="off"
-                     value={input}
-                     onChange={event => setInput(event.target.value)}
-                  />
-                  <Button type="submit" size="icon" disabled={inputLength === 0}>
-                     <Send className="size-4" />
-                     <span className="sr-only">Send</span>
-                  </Button>
-               </form>
-            </CardFooter>
-         </Card>
-         <Dialog open={open} onOpenChange={setOpen}>
-            <DialogContent className="gap-0 p-0 outline-none">
-               <DialogHeader className="px-4 pb-4 pt-5">
-                  <DialogTitle>New message</DialogTitle>
-                  <DialogDescription>
-                     Invite a user to this thread. This will create a new group
-                     message.
-                  </DialogDescription>
-               </DialogHeader>
-               <Command className="overflow-hidden rounded-t-none border-t">
-                  <CommandInput placeholder="Search user..." />
-                  <CommandList>
-                     <CommandEmpty>No users found.</CommandEmpty>
-                     <CommandGroup className="p-2">
-                        {users.map(user => (
-                           <CommandItem
-                              key={user.email}
-                              className="flex items-center px-2"
-                              onSelect={() => {
-                                 if (selectedUsers.includes(user)) {
-                                    return setSelectedUsers(
-                                       selectedUsers.filter(
-                                          selectedUser => selectedUser !== user,
-                                       ),
-                                    )
-                                 }
-
-                                 return setSelectedUsers(
-                                    [...users].filter(u =>
-                                       [...selectedUsers, user].includes(u),
-                                    ),
-                                 )
-                              }}
-                           >
-                              <Avatar>
-                                 <AvatarImage src={user.avatar} alt="Image" />
-                                 <AvatarFallback>{user.name[0]}</AvatarFallback>
-                              </Avatar>
-                              <div className="ml-2">
-                                 <p className="text-sm font-medium leading-none">
-                                    {user.name}
-                                 </p>
-                                 <p className="text-muted-foreground text-sm">
-                                    {user.email}
-                                 </p>
-                              </div>
-                              {selectedUsers.includes(user)
-                                 ? (
-                                       <Check className="text-primary ml-auto flex size-5" />
-                                    )
-                                 : null}
-                           </CommandItem>
-                        ))}
-                     </CommandGroup>
-                  </CommandList>
-               </Command>
-               <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
-                  {selectedUsers.length > 0
-                     ? (
-                           <div className="flex -space-x-2 overflow-hidden">
-                              {selectedUsers.map(user => (
-                                 <Avatar
-                                    key={user.email}
-                                    className="border-background inline-block border-2"
-                                 >
-                                    <AvatarImage src={user.avatar} />
-                                    <AvatarFallback>{user.name[0]}</AvatarFallback>
-                                 </Avatar>
-                              ))}
-                           </div>
-                        )
-                     : (
-                           <p className="text-muted-foreground text-sm">
-                              Select users to add to this thread.
-                           </p>
-                        )}
-                  <Button
-                     disabled={selectedUsers.length < 2}
-                     onClick={() => {
-                        setOpen(false)
-                     }}
-                  >
-                     Continue
-                  </Button>
-               </DialogFooter>
-            </DialogContent>
-         </Dialog>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/cookie-settings.tsx b/apps/web/registry/default/example/cards/cookie-settings.tsx
deleted file mode 100644
index 7e580f1b..00000000
--- a/apps/web/registry/default/example/cards/cookie-settings.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Label } from '~/registry/default/ui/label'
-import { Switch } from '~/registry/default/ui/switch'
-
-export function CardsCookieSettings() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Cookie Settings</CardTitle>
-            <CardDescription>Manage your cookie settings here.</CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-6">
-            <div className="flex items-center justify-between space-x-4">
-               <Label htmlFor="necessary" className="flex flex-col space-y-1">
-                  <span>Strictly Necessary</span>
-                  <span className="text-muted-foreground text-xs font-normal leading-snug">
-                     These cookies are essential in order to use the website and use
-                     its features.
-                  </span>
-               </Label>
-               <Switch id="necessary" defaultChecked aria-label="Necessary" />
-            </div>
-            <div className="flex items-center justify-between space-x-4">
-               <Label htmlFor="functional" className="flex flex-col space-y-1">
-                  <span>Functional Cookies</span>
-                  <span className="text-muted-foreground text-xs font-normal leading-snug">
-                     These cookies allow the website to provide personalized
-                     functionality.
-                  </span>
-               </Label>
-               <Switch id="functional" aria-label="Functional" />
-            </div>
-            <div className="flex items-center justify-between space-x-4">
-               <Label htmlFor="performance" className="flex flex-col space-y-1">
-                  <span>Performance Cookies</span>
-                  <span className="text-muted-foreground text-xs font-normal leading-snug">
-                     These cookies help to improve the performance of the website.
-                  </span>
-               </Label>
-               <Switch id="performance" aria-label="Performance" />
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button variant="outline" className="w-full">
-               Save preferences
-            </Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/create-account.tsx b/apps/web/registry/default/example/cards/create-account.tsx
deleted file mode 100644
index df5720da..00000000
--- a/apps/web/registry/default/example/cards/create-account.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import { Icons } from '~/components/icons'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export function CardsCreateAccount() {
-   return (
-      <Card>
-         <CardHeader className="space-y-1">
-            <CardTitle className="text-2xl">Create an account</CardTitle>
-            <CardDescription>
-               Enter your email below to create your account
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-4">
-            <div className="grid grid-cols-2 gap-6">
-               <Button variant="outline">
-                  <Icons.gitHub className="mr-2 size-4" />
-                  Github
-               </Button>
-               <Button variant="outline">
-                  <Icons.google className="mr-2 size-4" />
-                  Google
-               </Button>
-            </div>
-            <div className="relative">
-               <div className="absolute inset-0 flex items-center">
-                  <span className="w-full border-t" />
-               </div>
-               <div className="relative flex justify-center text-xs uppercase">
-                  <span className="bg-background text-muted-foreground px-2">
-                     Or continue with
-                  </span>
-               </div>
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor="email">Email</Label>
-               <Input id="email" type="email" placeholder="m@example.com" />
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor="password">Password</Label>
-               <Input id="password" type="password" />
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button className="w-full">Create account</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/data-table.tsx b/apps/web/registry/default/example/cards/data-table.tsx
deleted file mode 100644
index 77efbec2..00000000
--- a/apps/web/registry/default/example/cards/data-table.tsx
+++ /dev/null
@@ -1,344 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   CaretSortIcon,
-   ChevronDownIcon,
-   DotsHorizontalIcon,
-} from '@radix-ui/react-icons'
-import type {
-   ColumnDef,
-   ColumnFiltersState,
-   SortingState,
-   VisibilityState,
-} from '@tanstack/react-table'
-import {
-   flexRender,
-   getCoreRowModel,
-   getFilteredRowModel,
-   getPaginationRowModel,
-   getSortedRowModel,
-   useReactTable,
-} from '@tanstack/react-table'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Checkbox } from '~/registry/default/ui/checkbox'
-import {
-   DropdownMenu,
-   DropdownMenuCheckboxItem,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/default/ui/table'
-
-const data: Payment[] = [
-   {
-      id: 'm5gr84i9',
-      amount: 316,
-      status: 'success',
-      email: 'ken99@yahoo.com',
-   },
-   {
-      id: '3u1reuv4',
-      amount: 242,
-      status: 'success',
-      email: 'Abe45@gmail.com',
-   },
-   {
-      id: 'derv1ws0',
-      amount: 837,
-      status: 'processing',
-      email: 'Monserrat44@gmail.com',
-   },
-   {
-      id: '5kma53ae',
-      amount: 874,
-      status: 'success',
-      email: 'Silas22@gmail.com',
-   },
-   {
-      id: 'bhqecj4p',
-      amount: 721,
-      status: 'failed',
-      email: 'carmella@hotmail.com',
-   },
-]
-
-export interface Payment {
-   id: string
-   amount: number
-   status: 'pending' | 'processing' | 'success' | 'failed'
-   email: string
-}
-
-export const columns: ColumnDef<Payment>[] = [
-   {
-      id: 'select',
-      header: ({ table }) => (
-         <Checkbox
-            checked={
-               table.getIsAllPageRowsSelected()
-               || (table.getIsSomePageRowsSelected() && 'indeterminate')
-            }
-            onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-            aria-label="Select all"
-         />
-      ),
-      cell: ({ row }) => (
-         <Checkbox
-            checked={row.getIsSelected()}
-            onCheckedChange={value => row.toggleSelected(!!value)}
-            aria-label="Select row"
-         />
-      ),
-      enableSorting: false,
-      enableHiding: false,
-   },
-   {
-      accessorKey: 'status',
-      header: 'Status',
-      cell: ({ row }) => (
-         <div className="capitalize">{row.getValue('status')}</div>
-      ),
-   },
-   {
-      accessorKey: 'email',
-      header: ({ column }) => {
-         return (
-            <Button
-               variant="ghost"
-               onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            >
-               Email
-               <CaretSortIcon className="ml-2 size-4" />
-            </Button>
-         )
-      },
-      cell: ({ row }) => <div className="lowercase">{row.getValue('email')}</div>,
-   },
-   {
-      accessorKey: 'amount',
-      header: () => <div className="text-right">Amount</div>,
-      cell: ({ row }) => {
-         const amount = Number.parseFloat(row.getValue('amount'))
-
-         // Format the amount as a dollar amount
-         const formatted = new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: 'USD',
-         }).format(amount)
-
-         return <div className="text-right font-medium">{formatted}</div>
-      },
-   },
-   {
-      id: 'actions',
-      enableHiding: false,
-      cell: ({ row }) => {
-         const payment = row.original
-
-         return (
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" className="size-8 p-0">
-                     <span className="sr-only">Open menu</span>
-                     <DotsHorizontalIcon className="size-4" />
-                  </Button>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent align="end">
-                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                  <DropdownMenuItem
-                     onClick={() => navigator.clipboard.writeText(payment.id)}
-                  >
-                     Copy payment ID
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>View customer</DropdownMenuItem>
-                  <DropdownMenuItem>View payment details</DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         )
-      },
-   },
-]
-
-export function CardsDataTable() {
-   const [sorting, setSorting] = React.useState<SortingState>([])
-   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-      [],
-   )
-   const [columnVisibility, setColumnVisibility]
-    = React.useState<VisibilityState>({})
-   const [rowSelection, setRowSelection] = React.useState({})
-
-   const table = useReactTable({
-      data,
-      columns,
-      onSortingChange: setSorting,
-      onColumnFiltersChange: setColumnFilters,
-      getCoreRowModel: getCoreRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      onColumnVisibilityChange: setColumnVisibility,
-      onRowSelectionChange: setRowSelection,
-      state: {
-         sorting,
-         columnFilters,
-         columnVisibility,
-         rowSelection,
-      },
-   })
-
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Payments</CardTitle>
-            <CardDescription>Manage your payments.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="mb-4 flex items-center gap-4">
-               <Input
-                  placeholder="Filter emails..."
-                  value={(table.getColumn('email')?.getFilterValue() as string) ?? ''}
-                  onChange={event =>
-                     table.getColumn('email')?.setFilterValue(event.target.value)}
-                  className="max-w-sm"
-               />
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button variant="outline" className="ml-auto">
-                        Columns
-                        {' '}
-                        <ChevronDownIcon className="ml-2 size-4" />
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     {table
-                        .getAllColumns()
-                        .filter(column => column.getCanHide())
-                        .map((column) => {
-                           return (
-                              <DropdownMenuCheckboxItem
-                                 key={column.id}
-                                 className="capitalize"
-                                 checked={column.getIsVisible()}
-                                 onCheckedChange={value =>
-                                    column.toggleVisibility(!!value)}
-                              >
-                                 {column.id}
-                              </DropdownMenuCheckboxItem>
-                           )
-                        })}
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </div>
-            <div className="rounded-md border">
-               <Table>
-                  <TableHeader>
-                     {table.getHeaderGroups().map(headerGroup => (
-                        <TableRow key={headerGroup.id}>
-                           {headerGroup.headers.map((header) => {
-                              return (
-                                 <TableHead
-                                    key={header.id}
-                                    className="[&:has([role=checkbox])]:pl-3"
-                                 >
-                                    {header.isPlaceholder
-                                       ? null
-                                       : flexRender(
-                                          header.column.columnDef.header,
-                                          header.getContext(),
-                                       )}
-                                 </TableHead>
-                              )
-                           })}
-                        </TableRow>
-                     ))}
-                  </TableHeader>
-                  <TableBody>
-                     {table.getRowModel().rows?.length
-                        ? (
-                              table.getRowModel().rows.map(row => (
-                                 <TableRow
-                                    key={row.id}
-                                    data-state={row.getIsSelected() && 'selected'}
-                                 >
-                                    {row.getVisibleCells().map(cell => (
-                                       <TableCell
-                                          key={cell.id}
-                                          className="[&:has([role=checkbox])]:pl-3"
-                                       >
-                                          {flexRender(
-                                             cell.column.columnDef.cell,
-                                             cell.getContext(),
-                                          )}
-                                       </TableCell>
-                                    ))}
-                                 </TableRow>
-                              ))
-                           )
-                        : (
-                              <TableRow>
-                                 <TableCell
-                                    colSpan={columns.length}
-                                    className="h-24 text-center"
-                                 >
-                                    No results.
-                                 </TableCell>
-                              </TableRow>
-                           )}
-                  </TableBody>
-               </Table>
-            </div>
-            <div className="flex items-center justify-end space-x-2 pt-4">
-               <div className="text-muted-foreground flex-1 text-sm">
-                  {table.getFilteredSelectedRowModel().rows.length}
-                  {' '}
-                  of
-                  {' '}
-                  {table.getFilteredRowModel().rows.length}
-                  {' '}
-                  row(s) selected.
-               </div>
-               <div className="space-x-2">
-                  <Button
-                     variant="outline"
-                     size="sm"
-                     onClick={() => table.previousPage()}
-                     disabled={!table.getCanPreviousPage()}
-                  >
-                     Previous
-                  </Button>
-                  <Button
-                     variant="outline"
-                     size="sm"
-                     onClick={() => table.nextPage()}
-                     disabled={!table.getCanNextPage()}
-                  >
-                     Next
-                  </Button>
-               </div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/index.tsx b/apps/web/registry/default/example/cards/index.tsx
deleted file mode 100644
index 7cb130a0..00000000
--- a/apps/web/registry/default/example/cards/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { CardsActivityGoal } from '~/registry/default/example/cards/activity-goal'
-import { CardsCalendar } from '~/registry/default/example/cards/calendar'
-import { CardsChat } from '~/registry/default/example/cards/chat'
-import { CardsCookieSettings } from '~/registry/default/example/cards/cookie-settings'
-import { CardsCreateAccount } from '~/registry/default/example/cards/create-account'
-import { CardsDataTable } from '~/registry/default/example/cards/data-table'
-import { CardsMetric } from '~/registry/default/example/cards/metric'
-import { CardsPaymentMethod } from '~/registry/default/example/cards/payment-method'
-import { CardsReportIssue } from '~/registry/default/example/cards/report-issue'
-import { CardsShare } from '~/registry/default/example/cards/share'
-import { CardsStats } from '~/registry/default/example/cards/stats'
-import { CardsTeamMembers } from '~/registry/default/example/cards/team-members'
-
-export default function CardsDemo() {
-   return (
-      <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
-         <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
-            <CardsStats />
-            <div className="grid gap-1 sm:grid-cols-[280px_1fr] md:hidden">
-               <CardsCalendar />
-               <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
-                  <CardsActivityGoal />
-               </div>
-               <div className="pt-3 sm:col-span-2 xl:pt-4">
-                  <CardsMetric />
-               </div>
-            </div>
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-               <div className="space-y-4 xl:space-y-4">
-                  <CardsTeamMembers />
-                  <CardsCookieSettings />
-                  <CardsPaymentMethod />
-               </div>
-               <div className="space-y-4 xl:space-y-4">
-                  <CardsChat />
-                  <CardsCreateAccount />
-                  <div className="hidden xl:block">
-                     <CardsReportIssue />
-                  </div>
-               </div>
-            </div>
-         </div>
-         <div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
-            <div className="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
-               <CardsCalendar />
-               <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
-                  <CardsActivityGoal />
-               </div>
-               <div className="pt-3 sm:col-span-2 xl:pt-3">
-                  <CardsMetric />
-               </div>
-            </div>
-            <div className="hidden md:block">
-               <CardsDataTable />
-            </div>
-            <CardsShare />
-            <div className="xl:hidden">
-               <CardsReportIssue />
-            </div>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/metric.tsx b/apps/web/registry/default/example/cards/metric.tsx
deleted file mode 100644
index 9d4cca51..00000000
--- a/apps/web/registry/default/example/cards/metric.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { useTheme } from 'next-themes'
-import { Line, LineChart, ResponsiveContainer, Tooltip } from 'recharts'
-
-import { useConfig } from '~/hooks/use-config'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { baseColors } from '~/registry/registry-base-colors'
-
-const data = [
-   {
-      average: 400,
-      today: 240,
-   },
-   {
-      average: 300,
-      today: 139,
-   },
-   {
-      average: 200,
-      today: 980,
-   },
-   {
-      average: 278,
-      today: 390,
-   },
-   {
-      average: 189,
-      today: 480,
-   },
-   {
-      average: 239,
-      today: 380,
-   },
-   {
-      average: 349,
-      today: 430,
-   },
-]
-
-export function CardsMetric() {
-   const { theme: mode } = useTheme()
-   const [config] = useConfig()
-
-   const baseColor = baseColors.find(
-      baseColor => baseColor.name === config.theme,
-   )
-
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Exercise Minutes</CardTitle>
-            <CardDescription>
-               Your exercise minutes are ahead of where you normally are.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-4">
-            <div className="h-[200px]">
-               <ResponsiveContainer width="100%" height="100%">
-                  <LineChart
-                     data={data}
-                     margin={{
-                        top: 5,
-                        right: 10,
-                        left: 10,
-                        bottom: 0,
-                     }}
-                  >
-                     <Tooltip
-                        content={({ active, payload }) => {
-                           if (active && payload && payload.length) {
-                              return (
-                                 <div className="bg-background rounded-lg border p-2 shadow-sm">
-                                    <div className="grid grid-cols-2 gap-2">
-                                       <div className="flex flex-col">
-                                          <span className="text-muted-foreground text-[0.70rem] uppercase">
-                                             Average
-                                          </span>
-                                          <span className="text-muted-foreground font-bold">
-                                             {payload[0].value}
-                                          </span>
-                                       </div>
-                                       <div className="flex flex-col">
-                                          <span className="text-muted-foreground text-[0.70rem] uppercase">
-                                             Today
-                                          </span>
-                                          <span className="font-bold">
-                                             {payload[1].value}
-                                          </span>
-                                       </div>
-                                    </div>
-                                 </div>
-                              )
-                           }
-
-                           return null
-                        }}
-                     />
-                     <Line
-                        type="monotone"
-                        strokeWidth={2}
-                        dataKey="average"
-                        activeDot={{
-                           r: 6,
-                           style: { fill: 'var(--theme-primary)', opacity: 0.25 },
-                        }}
-                        style={
-                           {
-                              'stroke': 'var(--theme-primary)',
-                              'opacity': 0.25,
-                              '--theme-primary': `hsl(${
-                      baseColor?.cssVars[mode === 'dark' ? 'dark' : 'light']
-                        .primary
-                    })`,
-                           } as React.CSSProperties
-                        }
-                     />
-                     <Line
-                        type="monotone"
-                        dataKey="today"
-                        strokeWidth={2}
-                        activeDot={{
-                           r: 8,
-                           style: { fill: 'var(--theme-primary)' },
-                        }}
-                        style={
-                           {
-                              'stroke': 'var(--theme-primary)',
-                              '--theme-primary': `hsl(${
-                      baseColor?.cssVars[mode === 'dark' ? 'dark' : 'light']
-                        .primary
-                    })`,
-                           } as React.CSSProperties
-                        }
-                     />
-                  </LineChart>
-               </ResponsiveContainer>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/payment-method.tsx b/apps/web/registry/default/example/cards/payment-method.tsx
deleted file mode 100644
index fccec418..00000000
--- a/apps/web/registry/default/example/cards/payment-method.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-'use client'
-
-import { Icons } from '~/components/icons'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-
-export function CardsPaymentMethod() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Payment Method</CardTitle>
-            <CardDescription>
-               Add a new payment method to your account.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-6">
-            <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
-               <div>
-                  <RadioGroupItem
-                     value="card"
-                     id="card"
-                     className="peer sr-only"
-                     aria-label="Card"
-                  />
-                  <Label
-                     htmlFor="card"
-                     className="border-muted hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
-                  >
-                     <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        className="mb-3 size-6"
-                     >
-                        <rect width="20" height="14" x="2" y="5" rx="2" />
-                        <path d="M2 10h20" />
-                     </svg>
-                     Card
-                  </Label>
-               </div>
-
-               <div>
-                  <RadioGroupItem
-                     value="paypal"
-                     id="paypal"
-                     className="peer sr-only"
-                     aria-label="Paypal"
-                  />
-                  <Label
-                     htmlFor="paypal"
-                     className="border-muted hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
-                  >
-                     <Icons.paypal className="mb-3 size-6" />
-                     Paypal
-                  </Label>
-               </div>
-
-               <div>
-                  <RadioGroupItem
-                     value="apple"
-                     id="apple"
-                     className="peer sr-only"
-                     aria-label="Apple"
-                  />
-                  <Label
-                     htmlFor="apple"
-                     className="border-muted hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
-                  >
-                     <Icons.apple className="mb-3 size-6" />
-                     Apple
-                  </Label>
-               </div>
-            </RadioGroup>
-            <div className="grid gap-2">
-               <Label htmlFor="name">Name</Label>
-               <Input id="name" placeholder="First Last" />
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor="city">City</Label>
-               <Input id="city" placeholder="" />
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor="number">Card number</Label>
-               <Input id="number" placeholder="" />
-            </div>
-            <div className="grid grid-cols-3 gap-4">
-               <div className="grid gap-2">
-                  <Label htmlFor="month">Expires</Label>
-                  <Select>
-                     <SelectTrigger id="month" aria-label="Month">
-                        <SelectValue placeholder="Month" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="1">January</SelectItem>
-                        <SelectItem value="2">February</SelectItem>
-                        <SelectItem value="3">March</SelectItem>
-                        <SelectItem value="4">April</SelectItem>
-                        <SelectItem value="5">May</SelectItem>
-                        <SelectItem value="6">June</SelectItem>
-                        <SelectItem value="7">July</SelectItem>
-                        <SelectItem value="8">August</SelectItem>
-                        <SelectItem value="9">September</SelectItem>
-                        <SelectItem value="10">October</SelectItem>
-                        <SelectItem value="11">November</SelectItem>
-                        <SelectItem value="12">December</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-               <div className="grid gap-2">
-                  <Label htmlFor="year">Year</Label>
-                  <Select>
-                     <SelectTrigger id="year" aria-label="Year">
-                        <SelectValue placeholder="Year" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        {Array.from({ length: 10 }, (_, i) => (
-                           <SelectItem key={i} value={`${new Date().getFullYear() + i}`}>
-                              {new Date().getFullYear() + i}
-                           </SelectItem>
-                        ))}
-                     </SelectContent>
-                  </Select>
-               </div>
-               <div className="grid gap-2">
-                  <Label htmlFor="cvc">CVC</Label>
-                  <Input id="cvc" placeholder="CVC" />
-               </div>
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button className="w-full">Continue</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/report-issue.tsx b/apps/web/registry/default/example/cards/report-issue.tsx
deleted file mode 100644
index 9598eb95..00000000
--- a/apps/web/registry/default/example/cards/report-issue.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-import { Textarea } from '~/registry/default/ui/textarea'
-
-export function CardsReportIssue() {
-   const id = React.useId()
-
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Report an issue</CardTitle>
-            <CardDescription>
-               What area are you having problems with?
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-6">
-            <div className="grid gap-4 sm:grid-cols-2">
-               <div className="grid gap-2">
-                  <Label htmlFor={`area-${id}`}>Area</Label>
-                  <Select defaultValue="billing">
-                     <SelectTrigger id={`area-${id}`} aria-label="Area">
-                        <SelectValue placeholder="Select" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="team">Team</SelectItem>
-                        <SelectItem value="billing">Billing</SelectItem>
-                        <SelectItem value="account">Account</SelectItem>
-                        <SelectItem value="deployments">Deployments</SelectItem>
-                        <SelectItem value="support">Support</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-               <div className="grid gap-2">
-                  <Label htmlFor={`security-level-${id}`}>Security Level</Label>
-                  <Select defaultValue="2">
-                     <SelectTrigger
-                        id={`security-level-${id}`}
-                        className="line-clamp-1 w-full truncate"
-                        aria-label="Security Level"
-                     >
-                        <SelectValue placeholder="Select level" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="1">Severity 1 (Highest)</SelectItem>
-                        <SelectItem value="2">Severity 2</SelectItem>
-                        <SelectItem value="3">Severity 3</SelectItem>
-                        <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor={`subject-${id}`}>Subject</Label>
-               <Input id={`subject-${id}`} placeholder="I need help with..." />
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor={`description-${id}`}>Description</Label>
-               <Textarea
-                  id={`description-${id}`}
-                  placeholder="Please include all information relevant to your issue."
-               />
-            </div>
-         </CardContent>
-         <CardFooter className="justify-between space-x-2">
-            <Button variant="ghost">Cancel</Button>
-            <Button>Submit</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/share.tsx b/apps/web/registry/default/example/cards/share.tsx
deleted file mode 100644
index 5832f963..00000000
--- a/apps/web/registry/default/example/cards/share.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-'use client'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-import { Separator } from '~/registry/default/ui/separator'
-
-export function CardsShare() {
-   return (
-      <Card>
-         <CardHeader className="pb-3">
-            <CardTitle>Share this document</CardTitle>
-            <CardDescription>
-               Anyone with the link can view this document.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="flex space-x-2">
-               <Label htmlFor="link" className="sr-only">
-                  Link
-               </Label>
-               <Input
-                  id="link"
-                  value="http://example.com/link/to/document"
-                  readOnly
-               />
-               <Button variant="secondary" className="shrink-0">
-                  Copy Link
-               </Button>
-            </div>
-            <Separator className="my-4" />
-            <div className="space-y-4">
-               <h4 className="text-sm font-medium">People with access</h4>
-               <div className="grid gap-6">
-                  <div className="flex items-center justify-between space-x-4">
-                     <div className="flex items-center space-x-4">
-                        <Avatar>
-                           <AvatarImage src="/avatars/03.png" alt="Image" />
-                           <AvatarFallback>OM</AvatarFallback>
-                        </Avatar>
-                        <div>
-                           <p className="text-sm font-medium leading-none">
-                              Olivia Martin
-                           </p>
-                           <p className="text-muted-foreground text-sm">m@example.com</p>
-                        </div>
-                     </div>
-                     <Select defaultValue="edit">
-                        <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
-                           <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                           <SelectItem value="edit">Can edit</SelectItem>
-                           <SelectItem value="view">Can view</SelectItem>
-                        </SelectContent>
-                     </Select>
-                  </div>
-                  <div className="flex items-center justify-between space-x-4">
-                     <div className="flex items-center space-x-4">
-                        <Avatar>
-                           <AvatarImage src="/avatars/05.png" alt="Image" />
-                           <AvatarFallback>IN</AvatarFallback>
-                        </Avatar>
-                        <div>
-                           <p className="text-sm font-medium leading-none">
-                              Isabella Nguyen
-                           </p>
-                           <p className="text-muted-foreground text-sm">b@example.com</p>
-                        </div>
-                     </div>
-                     <Select defaultValue="view">
-                        <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
-                           <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                           <SelectItem value="edit">Can edit</SelectItem>
-                           <SelectItem value="view">Can view</SelectItem>
-                        </SelectContent>
-                     </Select>
-                  </div>
-                  <div className="flex items-center justify-between space-x-4">
-                     <div className="flex items-center space-x-4">
-                        <Avatar>
-                           <AvatarImage src="/avatars/01.png" alt="Image" />
-                           <AvatarFallback>SD</AvatarFallback>
-                        </Avatar>
-                        <div>
-                           <p className="text-sm font-medium leading-none">
-                              Sofia Davis
-                           </p>
-                           <p className="text-muted-foreground text-sm">p@example.com</p>
-                        </div>
-                     </div>
-                     <Select defaultValue="view">
-                        <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
-                           <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                           <SelectItem value="edit">Can edit</SelectItem>
-                           <SelectItem value="view">Can view</SelectItem>
-                        </SelectContent>
-                     </Select>
-                  </div>
-               </div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/stats.tsx b/apps/web/registry/default/example/cards/stats.tsx
deleted file mode 100644
index 8a1fa5d6..00000000
--- a/apps/web/registry/default/example/cards/stats.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { useTheme } from 'next-themes'
-import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from 'recharts'
-
-import { useConfig } from '~/hooks/use-config'
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { baseColors } from '~/registry/registry-base-colors'
-
-const data = [
-   {
-      revenue: 10400,
-      subscription: 240,
-   },
-   {
-      revenue: 14405,
-      subscription: 300,
-   },
-   {
-      revenue: 9400,
-      subscription: 200,
-   },
-   {
-      revenue: 8200,
-      subscription: 278,
-   },
-   {
-      revenue: 7000,
-      subscription: 189,
-   },
-   {
-      revenue: 9600,
-      subscription: 239,
-   },
-   {
-      revenue: 11244,
-      subscription: 278,
-   },
-   {
-      revenue: 26475,
-      subscription: 189,
-   },
-]
-
-export function CardsStats() {
-   const { theme: mode } = useTheme()
-   const [config] = useConfig()
-
-   const baseColor = baseColors.find(
-      baseColor => baseColor.name === config.theme,
-   )
-
-   return (
-      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
-         <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-               <CardTitle className="text-base font-normal">Total Revenue</CardTitle>
-            </CardHeader>
-            <CardContent>
-               <div className="text-2xl font-bold">$15,231.89</div>
-               <p className="text-muted-foreground text-xs">
-                  +20.1% from last month
-               </p>
-               <div className="h-[80px]">
-                  <ResponsiveContainer width="100%" height="100%">
-                     <LineChart
-                        data={data}
-                        margin={{
-                           top: 5,
-                           right: 10,
-                           left: 10,
-                           bottom: 0,
-                        }}
-                     >
-                        <Line
-                           type="monotone"
-                           strokeWidth={2}
-                           dataKey="revenue"
-                           activeDot={{
-                              r: 6,
-                              style: { fill: 'var(--theme-primary)', opacity: 0.25 },
-                           }}
-                           style={
-                              {
-                                 'stroke': 'var(--theme-primary)',
-                                 '--theme-primary': `hsl(${
-                        baseColor?.cssVars[mode === 'dark' ? 'dark' : 'light']
-                          .primary
-                      })`,
-                              } as React.CSSProperties
-                           }
-                        />
-                     </LineChart>
-                  </ResponsiveContainer>
-               </div>
-            </CardContent>
-         </Card>
-         <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-               <CardTitle className="text-base font-normal">Subscriptions</CardTitle>
-            </CardHeader>
-            <CardContent>
-               <div className="text-2xl font-bold">+2350</div>
-               <p className="text-muted-foreground text-xs">
-                  +180.1% from last month
-               </p>
-               <div className="mt-4 h-[80px]">
-                  <ResponsiveContainer width="100%" height="100%">
-                     <BarChart data={data}>
-                        <Bar
-                           dataKey="subscription"
-                           style={
-                              {
-                                 'fill': 'var(--theme-primary)',
-                                 'opacity': 1,
-                                 '--theme-primary': `hsl(${
-                        baseColor?.cssVars[mode === 'dark' ? 'dark' : 'light']
-                          .primary
-                      })`,
-                              } as React.CSSProperties
-                           }
-                        />
-                     </BarChart>
-                  </ResponsiveContainer>
-               </div>
-            </CardContent>
-         </Card>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/cards/team-members.tsx b/apps/web/registry/default/example/cards/team-members.tsx
deleted file mode 100644
index 245d6576..00000000
--- a/apps/web/registry/default/example/cards/team-members.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-'use client'
-
-import { ChevronDownIcon } from '@radix-ui/react-icons'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/default/ui/command'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-export function CardsTeamMembers() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Team Members</CardTitle>
-            <CardDescription>
-               Invite your team members to collaborate.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-6">
-            <div className="flex items-center justify-between space-x-4">
-               <div className="flex items-center space-x-4">
-                  <Avatar className="size-8">
-                     <AvatarImage src="/avatars/01.png" alt="Image" />
-                     <AvatarFallback>OM</AvatarFallback>
-                  </Avatar>
-                  <div>
-                     <p className="text-sm font-medium leading-none">Sofia Davis</p>
-                     <p className="text-muted-foreground text-sm">m@example.com</p>
-                  </div>
-               </div>
-               <Popover>
-                  <PopoverTrigger asChild>
-                     <Button variant="outline" size="sm" className="ml-auto">
-                        Owner
-                        {' '}
-                        <ChevronDownIcon className="text-muted-foreground ml-2 size-4" />
-                     </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="p-0" align="end">
-                     <Command>
-                        <CommandInput placeholder="Select new role..." />
-                        <CommandList>
-                           <CommandEmpty>No roles found.</CommandEmpty>
-                           <CommandGroup>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Viewer</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view and comment.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Developer</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view, comment and edit.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Billing</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view, comment and manage billing.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Owner</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Admin-level access to all resources.
-                                 </p>
-                              </CommandItem>
-                           </CommandGroup>
-                        </CommandList>
-                     </Command>
-                  </PopoverContent>
-               </Popover>
-            </div>
-            <div className="flex items-center justify-between space-x-4">
-               <div className="flex items-center space-x-4">
-                  <Avatar className="size-8">
-                     <AvatarImage src="/avatars/02.png" alt="Image" />
-                     <AvatarFallback>JL</AvatarFallback>
-                  </Avatar>
-                  <div>
-                     <p className="text-sm font-medium leading-none">Jackson Lee</p>
-                     <p className="text-muted-foreground text-sm">p@example.com</p>
-                  </div>
-               </div>
-               <Popover>
-                  <PopoverTrigger asChild>
-                     <Button variant="outline" size="sm" className="ml-auto">
-                        Member
-                        {' '}
-                        <ChevronDownIcon className="text-muted-foreground ml-2 size-4" />
-                     </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="p-0" align="end">
-                     <Command>
-                        <CommandInput placeholder="Select new role..." />
-                        <CommandList>
-                           <CommandEmpty>No roles found.</CommandEmpty>
-                           <CommandGroup className="p-1.5">
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Viewer</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view and comment.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Developer</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view, comment and edit.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Billing</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view, comment and manage billing.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Owner</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Admin-level access to all resources.
-                                 </p>
-                              </CommandItem>
-                           </CommandGroup>
-                        </CommandList>
-                     </Command>
-                  </PopoverContent>
-               </Popover>
-            </div>
-            <div className="flex items-center justify-between space-x-4">
-               <div className="flex items-center space-x-4">
-                  <Avatar className="size-8">
-                     <AvatarImage src="/avatars/03.png" alt="Image" />
-                     <AvatarFallback>IN</AvatarFallback>
-                  </Avatar>
-                  <div>
-                     <p className="text-sm font-medium leading-none">
-                        Isabella Nguyen
-                     </p>
-                     <p className="text-muted-foreground text-sm">i@example.com</p>
-                  </div>
-               </div>
-               <Popover>
-                  <PopoverTrigger asChild>
-                     <Button variant="outline" size="sm" className="ml-auto">
-                        Member
-                        {' '}
-                        <ChevronDownIcon className="text-muted-foreground ml-2 size-4" />
-                     </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="p-0" align="end">
-                     <Command>
-                        <CommandInput placeholder="Select new role..." />
-                        <CommandList>
-                           <CommandEmpty>No roles found.</CommandEmpty>
-                           <CommandGroup className="p-1.5">
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Viewer</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view and comment.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Developer</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view, comment and edit.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Billing</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view, comment and manage billing.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Owner</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Admin-level access to all resources.
-                                 </p>
-                              </CommandItem>
-                           </CommandGroup>
-                        </CommandList>
-                     </Command>
-                  </PopoverContent>
-               </Popover>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/default/example/carousel-api.tsx b/apps/web/registry/default/example/carousel-api.tsx
deleted file mode 100644
index 56b8d94a..00000000
--- a/apps/web/registry/default/example/carousel-api.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/default/ui/card'
-import {
-   Carousel,
-   type CarouselApi,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/default/ui/carousel'
-
-export default function CarouselDApiDemo() {
-   const [api, setApi] = React.useState<CarouselApi>()
-   const [current, setCurrent] = React.useState(0)
-   const [count, setCount] = React.useState(0)
-
-   React.useEffect(() => {
-      if (!api)
-         return
-
-      setCount(api.scrollSnapList().length)
-      setCurrent(api.selectedScrollSnap() + 1)
-
-      api.on('select', () => {
-         setCurrent(api.selectedScrollSnap() + 1)
-      })
-   }, [api])
-
-   return (
-      <div>
-         <Carousel setApi={setApi} className="w-full max-w-xs">
-            <CarouselContent>
-               {Array.from({ length: 5 }).map((_, index) => (
-                  <CarouselItem key={index}>
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-4xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </CarouselItem>
-               ))}
-            </CarouselContent>
-            <CarouselPrevious />
-            <CarouselNext />
-         </Carousel>
-         <div className="text-muted-foreground py-2 text-center text-sm">
-            Slide
-            {' '}
-            {current}
-            {' '}
-            of
-            {count}
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/carousel-demo.tsx b/apps/web/registry/default/example/carousel-demo.tsx
deleted file mode 100644
index 1aef1884..00000000
--- a/apps/web/registry/default/example/carousel-demo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/default/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/default/ui/carousel'
-
-export default function CarouselDemo() {
-   return (
-      <Carousel className="w-full max-w-xs">
-         <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index}>
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-4xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/default/example/carousel-dots.tsx b/apps/web/registry/default/example/carousel-dots.tsx
deleted file mode 100644
index a6042b05..00000000
--- a/apps/web/registry/default/example/carousel-dots.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/default/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselDots,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/default/ui/carousel'
-
-export default function CarouselDotsDemo() {
-   return (
-      <Carousel
-         opts={{
-            align: 'start',
-         }}
-         className="w-full max-w-sm"
-      >
-         <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-3xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselDots />
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/default/example/carousel-orientation.tsx b/apps/web/registry/default/example/carousel-orientation.tsx
deleted file mode 100644
index e6fda033..00000000
--- a/apps/web/registry/default/example/carousel-orientation.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/default/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/default/ui/carousel'
-
-export default function CarouselOrientation() {
-   return (
-      <Carousel
-         opts={{
-            align: 'start',
-         }}
-         orientation="vertical"
-         className="w-full max-w-xs"
-      >
-         <CarouselContent className="-mt-1 h-[200px]">
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index} className="pt-1 md:basis-1/2">
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex items-center justify-center p-6">
-                           <span className="text-3xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/default/example/carousel-plugin.tsx b/apps/web/registry/default/example/carousel-plugin.tsx
deleted file mode 100644
index 557598b7..00000000
--- a/apps/web/registry/default/example/carousel-plugin.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react'
-import Autoplay from 'embla-carousel-autoplay'
-
-import { Card, CardContent } from '~/registry/default/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/default/ui/carousel'
-
-export default function CarouselPlugin() {
-   const plugin = React.useRef(
-      Autoplay({ delay: 2000, stopOnInteraction: true }),
-   )
-
-   return (
-      <Carousel
-         plugins={[plugin.current]}
-         className="w-full max-w-xs"
-         onMouseEnter={plugin.current.stop}
-         onMouseLeave={plugin.current.reset}
-      >
-         <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index}>
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-4xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/default/example/carousel-size.tsx b/apps/web/registry/default/example/carousel-size.tsx
deleted file mode 100644
index f7a6bdaa..00000000
--- a/apps/web/registry/default/example/carousel-size.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/default/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/default/ui/carousel'
-
-export default function CarouselSize() {
-   return (
-      <Carousel
-         opts={{
-            align: 'start',
-         }}
-         className="w-full max-w-sm"
-      >
-         <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-3xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/default/example/carousel-spacing.tsx b/apps/web/registry/default/example/carousel-spacing.tsx
deleted file mode 100644
index 502d2f17..00000000
--- a/apps/web/registry/default/example/carousel-spacing.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/default/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/default/ui/carousel'
-
-export default function CarouselSpacing() {
-   return (
-      <Carousel className="w-full max-w-sm">
-         <CarouselContent className="-ml-1">
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-2xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/default/example/chart-bar-demo-axis.tsx b/apps/web/registry/default/example/chart-bar-demo-axis.tsx
deleted file mode 100644
index 6a878c5c..00000000
--- a/apps/web/registry/default/example/chart-bar-demo-axis.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client'
-
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import type { ChartConfig } from '~/registry/default/ui/chart'
-import { ChartContainer } from '~/registry/default/ui/chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: '#2563eb',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: '#60a5fa',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-         <BarChart accessibilityLayer data={chartData}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-               dataKey="month"
-               tickLine={false}
-               tickMargin={10}
-               axisLine={false}
-               tickFormatter={value => value.slice(0, 3)}
-            />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-         </BarChart>
-      </ChartContainer>
-   )
-}
diff --git a/apps/web/registry/default/example/chart-bar-demo-grid.tsx b/apps/web/registry/default/example/chart-bar-demo-grid.tsx
deleted file mode 100644
index 074fd84c..00000000
--- a/apps/web/registry/default/example/chart-bar-demo-grid.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import { Bar, BarChart, CartesianGrid } from 'recharts'
-
-import type { ChartConfig } from '~/registry/default/ui/chart'
-import { ChartContainer } from '~/registry/default/ui/chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: '#2563eb',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: '#60a5fa',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-         <BarChart accessibilityLayer data={chartData}>
-            <CartesianGrid vertical={false} />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-         </BarChart>
-      </ChartContainer>
-   )
-}
diff --git a/apps/web/registry/default/example/chart-bar-demo-legend.tsx b/apps/web/registry/default/example/chart-bar-demo-legend.tsx
deleted file mode 100644
index 96f9860c..00000000
--- a/apps/web/registry/default/example/chart-bar-demo-legend.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client'
-
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: '#2563eb',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: '#60a5fa',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-         <BarChart accessibilityLayer data={chartData}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-               dataKey="month"
-               tickLine={false}
-               tickMargin={10}
-               axisLine={false}
-               tickFormatter={value => value.slice(0, 3)}
-            />
-            <ChartTooltip content={<ChartTooltipContent />} />
-            <ChartLegend content={<ChartLegendContent />} />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-         </BarChart>
-      </ChartContainer>
-   )
-}
diff --git a/apps/web/registry/default/example/chart-bar-demo-tooltip.tsx b/apps/web/registry/default/example/chart-bar-demo-tooltip.tsx
deleted file mode 100644
index 538c240d..00000000
--- a/apps/web/registry/default/example/chart-bar-demo-tooltip.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-'use client'
-
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import type {
-   ChartConfig,
-} from '~/registry/default/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/default/ui/chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: '#2563eb',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: '#60a5fa',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-         <BarChart accessibilityLayer data={chartData}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-               dataKey="month"
-               tickLine={false}
-               tickMargin={10}
-               axisLine={false}
-               tickFormatter={value => value.slice(0, 3)}
-            />
-            <ChartTooltip content={<ChartTooltipContent />} />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-         </BarChart>
-      </ChartContainer>
-   )
-}
diff --git a/apps/web/registry/default/example/chart-bar-demo.tsx b/apps/web/registry/default/example/chart-bar-demo.tsx
deleted file mode 100644
index 23ee8079..00000000
--- a/apps/web/registry/default/example/chart-bar-demo.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client'
-
-import { Bar, BarChart } from 'recharts'
-
-import type { ChartConfig } from '~/registry/default/ui/chart'
-import { ChartContainer } from '~/registry/default/ui/chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: '#2563eb',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: '#60a5fa',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-         <BarChart accessibilityLayer data={chartData}>
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-         </BarChart>
-      </ChartContainer>
-   )
-}
diff --git a/apps/web/registry/default/example/chart-tooltip-demo.tsx b/apps/web/registry/default/example/chart-tooltip-demo.tsx
deleted file mode 100644
index 94efb61d..00000000
--- a/apps/web/registry/default/example/chart-tooltip-demo.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { ny } from '~/lib/utils'
-
-export default function Component() {
-   return (
-      <div className="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
-         <div>
-            <div className="absolute left-[-35px] top-[45px] z-10 text-sm font-medium">
-               Label
-            </div>
-            <svg
-               xmlns="http://www.w3.org/2000/svg"
-               viewBox="0 0 193 40"
-               width="50"
-               height="12"
-               fill="none"
-               className="absolute left-[5px] top-[50px] z-10"
-            >
-               <g clip-path="url(#a)">
-                  <path
-                     fill="currentColor"
-                     d="M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z"
-                  />
-               </g>
-               <defs>
-                  <clipPath id="a">
-                     <path fill="currentColor" d="M0 0h193v40H0z" />
-                  </clipPath>
-               </defs>
-            </svg>
-            <TooltipDemo
-               label="Page Views"
-               payload={[
-                  { name: 'Desktop', value: 186, fill: 'hsl(var(--chart-1))' },
-                  { name: 'Mobile', value: 80, fill: 'hsl(var(--chart-2))' },
-               ]}
-               className="w-32"
-            />
-         </div>
-         <div className="items-end">
-            <div className="absolute left-[122px] top-0 z-10 text-sm font-medium">
-               Name
-            </div>
-            <svg
-               xmlns="http://www.w3.org/2000/svg"
-               width="35"
-               height="42"
-               fill="none"
-               viewBox="0 0 122 148"
-               className="absolute left-[85px] top-[10px] z-10 -scale-x-100"
-            >
-               <g clip-path="url(#ab)">
-                  <path
-                     fill="currentColor"
-                     d="M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z"
-                  />
-               </g>
-               <defs>
-                  <clipPath id="ab">
-                     <path fill="currentColor" d="M0 0h122v148H0z" />
-                  </clipPath>
-               </defs>
-            </svg>
-            <TooltipDemo
-               label="Browser"
-               hideLabel
-               payload={[
-                  { name: 'Chrome', value: 1286, fill: 'hsl(var(--chart-3))' },
-                  { name: 'Firefox', value: 1000, fill: 'hsl(var(--chart-4))' },
-               ]}
-               indicator="dashed"
-               className="w-32"
-            />
-         </div>
-         <div className="!hidden md:!flex">
-            <TooltipDemo
-               label="Page Views"
-               payload={[
-                  { name: 'Desktop', value: 12486, fill: 'hsl(var(--chart-3))' },
-               ]}
-               className="w-36"
-               indicator="line"
-            />
-         </div>
-         <div className="!items-start !justify-start">
-            <div className="absolute left-[50px] top-[60px] z-10 text-sm font-medium">
-               Indicator
-            </div>
-            <TooltipDemo
-               label="Browser"
-               hideLabel
-               payload={[
-                  { name: 'Chrome', value: 1286, fill: 'hsl(var(--chart-1))' },
-               ]}
-               indicator="dot"
-               className="w-32"
-            />
-            <svg
-               xmlns="http://www.w3.org/2000/svg"
-               width="15"
-               height="34"
-               fill="none"
-               viewBox="0 0 75 175"
-               className="absolute left-[30px] top-[38px] z-10 rotate-[-40deg]"
-            >
-               <g clip-path="url(#abc)">
-                  <path
-                     fill="currentColor"
-                     d="M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z"
-                  />
-               </g>
-               <defs>
-                  <clipPath id="abc">
-                     <path fill="currentColor" d="M0 0h75v175H0z" />
-                  </clipPath>
-               </defs>
-            </svg>
-         </div>
-      </div>
-   )
-}
-
-function TooltipDemo({
-   indicator = 'dot',
-   label,
-   payload,
-   hideLabel,
-   hideIndicator,
-   className,
-}: {
-   label: string
-   hideLabel?: boolean
-   hideIndicator?: boolean
-   indicator?: 'line' | 'dot' | 'dashed'
-   payload: {
-      name: string
-      value: number
-      fill: string
-   }[]
-   nameKey?: string
-   labelKey?: string
-} & React.ComponentProps<'div'>) {
-   const tooltipLabel = hideLabel
-      ? null
-      : (
-            <div className="font-medium">{label}</div>
-         )
-
-   if (!payload?.length) {
-      return null
-   }
-
-   const nestLabel = payload.length === 1 && indicator !== 'dot'
-
-   return (
-      <div
-         className={ny(
-            'border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5',
-            className,
-         )}
-      >
-         {!nestLabel ? tooltipLabel : null}
-         <div className="grid gap-1.5">
-            {payload.map((item, index) => {
-               const indicatorColor = item.fill
-
-               return (
-                  <div
-                     key={index}
-                     className={ny(
-                        '[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5',
-                        indicator === 'dot' && 'items-center',
-                     )}
-                  >
-                     <>
-                        {!hideIndicator && (
-                           <div
-                              className={ny(
-                                 'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
-                                 {
-                                    'h-2.5 w-2.5': indicator === 'dot',
-                                    'w-1': indicator === 'line',
-                                    'w-0 border-[1.5px] border-dashed bg-transparent':
-                          indicator === 'dashed',
-                                    'my-0.5': nestLabel && indicator === 'dashed',
-                                 },
-                              )}
-                              style={
-                                 {
-                                    '--color-bg': indicatorColor,
-                                    '--color-border': indicatorColor,
-                                 } as React.CSSProperties
-                              }
-                           />
-                        )}
-                        <div
-                           className={ny(
-                              'flex flex-1 justify-between leading-none',
-                              nestLabel ? 'items-end' : 'items-center',
-                           )}
-                        >
-                           <div className="grid gap-1.5">
-                              {nestLabel ? tooltipLabel : null}
-                              <span className="text-muted-foreground">{item.name}</span>
-                           </div>
-                           <span className="text-foreground font-mono font-medium tabular-nums">
-                              {item.value.toLocaleString()}
-                           </span>
-                        </div>
-                     </>
-                  </div>
-               )
-            })}
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/checkbox-demo.tsx b/apps/web/registry/default/example/checkbox-demo.tsx
deleted file mode 100644
index 5af95651..00000000
--- a/apps/web/registry/default/example/checkbox-demo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client'
-
-import { Checkbox } from '~/registry/default/ui/checkbox'
-
-export default function CheckboxDemo() {
-   return (
-      <div className="flex items-center space-x-2">
-         <Checkbox id="terms" />
-         <label
-            htmlFor="terms"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-         >
-            Accept terms and conditions
-         </label>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/checkbox-disabled.tsx b/apps/web/registry/default/example/checkbox-disabled.tsx
deleted file mode 100644
index 8f8e9d29..00000000
--- a/apps/web/registry/default/example/checkbox-disabled.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Checkbox } from '~/registry/default/ui/checkbox'
-
-export default function CheckboxDisabled() {
-   return (
-      <div className="flex items-center space-x-2">
-         <Checkbox id="terms2" disabled />
-         <label
-            htmlFor="terms2"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-         >
-            Accept terms and conditions
-         </label>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/checkbox-form-multiple.tsx b/apps/web/registry/default/example/checkbox-form-multiple.tsx
deleted file mode 100644
index 253745d8..00000000
--- a/apps/web/registry/default/example/checkbox-form-multiple.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-'use client'
-
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-
-import { Button } from '~/registry/default/ui/button'
-import { Checkbox } from '~/registry/default/ui/checkbox'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const items = [
-   {
-      id: 'recents',
-      label: 'Recents',
-   },
-   {
-      id: 'home',
-      label: 'Home',
-   },
-   {
-      id: 'applications',
-      label: 'Applications',
-   },
-   {
-      id: 'desktop',
-      label: 'Desktop',
-   },
-   {
-      id: 'downloads',
-      label: 'Downloads',
-   },
-   {
-      id: 'documents',
-      label: 'Documents',
-   },
-] as const
-
-const FormSchema = z.object({
-   items: z.array(z.string()).refine(value => value.some(item => item), {
-      message: 'You have to select at least one item.',
-   }),
-})
-
-export default function CheckboxReactHookFormMultiple() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-      defaultValues: {
-         items: ['recents', 'home'],
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-            <FormField
-               control={form.control}
-               name="items"
-               render={() => (
-                  <FormItem>
-                     <div className="mb-4">
-                        <FormLabel className="text-base">Sidebar</FormLabel>
-                        <FormDescription>
-                           Select the items you want to display in the sidebar.
-                        </FormDescription>
-                     </div>
-                     {items.map(item => (
-                        <FormField
-                           key={item.id}
-                           control={form.control}
-                           name="items"
-                           render={({ field }) => {
-                              return (
-                                 <FormItem
-                                    key={item.id}
-                                    className="flex flex-row items-start space-x-3 space-y-0"
-                                 >
-                                    <FormControl>
-                                       <Checkbox
-                                          checked={field.value?.includes(item.id)}
-                                          onCheckedChange={(checked) => {
-                                             return checked
-                                                ? field.onChange([...field.value, item.id])
-                                                : field.onChange(
-                                                   field.value?.filter(
-                                                      value => value !== item.id,
-                                                   ),
-                                                )
-                                          }}
-                                       />
-                                    </FormControl>
-                                    <FormLabel className="font-normal">
-                                       {item.label}
-                                    </FormLabel>
-                                 </FormItem>
-                              )
-                           }}
-                        />
-                     ))}
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/checkbox-form-single.tsx b/apps/web/registry/default/example/checkbox-form-single.tsx
deleted file mode 100644
index cbe707db..00000000
--- a/apps/web/registry/default/example/checkbox-form-single.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-
-import { Button } from '~/registry/default/ui/button'
-import { Checkbox } from '~/registry/default/ui/checkbox'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-} from '~/registry/default/ui/form'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const FormSchema = z.object({
-   mobile: z.boolean().default(false).optional(),
-})
-
-export default function CheckboxReactHookFormSingle() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-      defaultValues: {
-         mobile: true,
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <FormField
-               control={form.control}
-               name="mobile"
-               render={({ field }) => (
-                  <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
-                     <FormControl>
-                        <Checkbox
-                           checked={field.value}
-                           onCheckedChange={field.onChange}
-                        />
-                     </FormControl>
-                     <div className="space-y-1 leading-none">
-                        <FormLabel>
-                           Use different settings for my mobile devices
-                        </FormLabel>
-                        <FormDescription>
-                           You can manage your mobile notifications in the
-                           {' '}
-                           <Link href="/examples/forms">mobile settings</Link>
-                           {' '}
-                           page.
-                        </FormDescription>
-                     </div>
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/checkbox-with-text.tsx b/apps/web/registry/default/example/checkbox-with-text.tsx
deleted file mode 100644
index fae5d13f..00000000
--- a/apps/web/registry/default/example/checkbox-with-text.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import { Checkbox } from '~/registry/default/ui/checkbox'
-
-export default function CheckboxWithText() {
-   return (
-      <div className="items-top flex space-x-2">
-         <Checkbox id="terms1" />
-         <div className="grid gap-1.5 leading-none">
-            <label
-               htmlFor="terms1"
-               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-               Accept terms and conditions
-            </label>
-            <p className="text-muted-foreground text-sm">
-               You agree to our Terms of Service and Privacy Policy.
-            </p>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/collapsible-demo.tsx b/apps/web/registry/default/example/collapsible-demo.tsx
deleted file mode 100644
index 3e0b7fc1..00000000
--- a/apps/web/registry/default/example/collapsible-demo.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronsUpDown } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/default/ui/collapsible'
-
-export default function CollapsibleDemo() {
-   const [isOpen, setIsOpen] = React.useState(false)
-
-   return (
-      <Collapsible
-         open={isOpen}
-         onOpenChange={setIsOpen}
-         className="w-[350px] space-y-2"
-      >
-         <div className="flex items-center justify-between space-x-4 px-4">
-            <h4 className="text-sm font-semibold">
-               @peduarte starred 3 repositories
-            </h4>
-            <CollapsibleTrigger asChild>
-               <Button variant="ghost" size="sm" className="w-9 p-0">
-                  <ChevronsUpDown className="size-4" />
-                  <span className="sr-only">Toggle</span>
-               </Button>
-            </CollapsibleTrigger>
-         </div>
-         <div className="rounded-md border px-4 py-3 font-mono text-sm">
-            @radix-ui/primitives
-         </div>
-         <CollapsibleContent className="space-y-2">
-            <div className="rounded-md border px-4 py-3 font-mono text-sm">
-               @radix-ui/colors
-            </div>
-            <div className="rounded-md border px-4 py-3 font-mono text-sm">
-               @stitches/react
-            </div>
-         </CollapsibleContent>
-      </Collapsible>
-   )
-}
diff --git a/apps/web/registry/default/example/combobox-demo.tsx b/apps/web/registry/default/example/combobox-demo.tsx
deleted file mode 100644
index 079f0737..00000000
--- a/apps/web/registry/default/example/combobox-demo.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Check, ChevronsUpDown } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/default/ui/command'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-const frameworks = [
-   {
-      value: 'next.js',
-      label: 'Next.js',
-   },
-   {
-      value: 'sveltekit',
-      label: 'SvelteKit',
-   },
-   {
-      value: 'nuxt.js',
-      label: 'Nuxt.js',
-   },
-   {
-      value: 'remix',
-      label: 'Remix',
-   },
-   {
-      value: 'astro',
-      label: 'Astro',
-   },
-]
-
-export default function ComboboxDemo() {
-   const [open, setOpen] = React.useState(false)
-   const [value, setValue] = React.useState('')
-
-   return (
-      <Popover open={open} onOpenChange={setOpen}>
-         <PopoverTrigger asChild>
-            <Button
-               variant="outline"
-               role="combobox"
-               aria-expanded={open}
-               className="w-[200px] justify-between"
-            >
-               {value
-                  ? frameworks.find(framework => framework.value === value)?.label
-                  : 'Select framework...'}
-               <ChevronsUpDown className="opacity-50" />
-            </Button>
-         </PopoverTrigger>
-         <PopoverContent className="w-[200px] p-0">
-            <Command>
-               <CommandInput placeholder="Search framework..." />
-               <CommandList>
-                  <CommandEmpty>No framework found.</CommandEmpty>
-                  <CommandGroup>
-                     {frameworks.map(framework => (
-                        <CommandItem
-                           key={framework.value}
-                           value={framework.value}
-                           onSelect={(currentValue) => {
-                              setValue(currentValue === value ? '' : currentValue)
-                              setOpen(false)
-                           }}
-                        >
-                           {framework.label}
-                           <Check
-                              className={ny(
-                                 'ml-auto',
-                                 value === framework.value ? 'opacity-100' : 'opacity-0',
-                              )}
-                           />
-                        </CommandItem>
-                     ))}
-                  </CommandGroup>
-               </CommandList>
-            </Command>
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/default/example/combobox-dropdown-menu.tsx b/apps/web/registry/default/example/combobox-dropdown-menu.tsx
deleted file mode 100644
index 20b6ee06..00000000
--- a/apps/web/registry/default/example/combobox-dropdown-menu.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/default/ui/command'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuSub,
-   DropdownMenuSubContent,
-   DropdownMenuSubTrigger,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-
-const labels = [
-   'feature',
-   'bug',
-   'enhancement',
-   'documentation',
-   'design',
-   'question',
-   'maintenance',
-]
-
-export default function ComboboxDropdownMenu() {
-   const [label, setLabel] = React.useState('feature')
-   const [open, setOpen] = React.useState(false)
-
-   return (
-      <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
-         <p className="text-sm font-medium leading-none">
-            <span className="bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs">
-               {label}
-            </span>
-            <span className="text-muted-foreground">Create a new project</span>
-         </p>
-         <DropdownMenu open={open} onOpenChange={setOpen}>
-            <DropdownMenuTrigger asChild>
-               <Button variant="ghost" size="sm">
-                  <MoreHorizontal />
-               </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-[200px]">
-               <DropdownMenuLabel>Actions</DropdownMenuLabel>
-               <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                     <User />
-                     Assign to...
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                     <Calendar />
-                     Set due date...
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuSub>
-                     <DropdownMenuSubTrigger>
-                        <Tags />
-                        Apply label
-                     </DropdownMenuSubTrigger>
-                     <DropdownMenuSubContent className="p-0">
-                        <Command>
-                           <CommandInput
-                              placeholder="Filter label..."
-                              autoFocus
-                           />
-                           <CommandList>
-                              <CommandEmpty>No label found.</CommandEmpty>
-                              <CommandGroup>
-                                 {labels.map(label => (
-                                    <CommandItem
-                                       key={label}
-                                       value={label}
-                                       onSelect={(value) => {
-                                          setLabel(value)
-                                          setOpen(false)
-                                       }}
-                                    >
-                                       {label}
-                                    </CommandItem>
-                                 ))}
-                              </CommandGroup>
-                           </CommandList>
-                        </Command>
-                     </DropdownMenuSubContent>
-                  </DropdownMenuSub>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="text-red-600">
-                     <Trash />
-                     Delete
-                     <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-               </DropdownMenuGroup>
-            </DropdownMenuContent>
-         </DropdownMenu>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/combobox-form.tsx b/apps/web/registry/default/example/combobox-form.tsx
deleted file mode 100644
index 5230bc9d..00000000
--- a/apps/web/registry/default/example/combobox-form.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { Check, ChevronsUpDown } from 'lucide-react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { ny } from '~/lib/utils'
-import { toast } from '~/registry/default/hooks/use-toast'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/default/ui/command'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-const languages = [
-   { label: 'English', value: 'en' },
-   { label: 'French', value: 'fr' },
-   { label: 'German', value: 'de' },
-   { label: 'Spanish', value: 'es' },
-   { label: 'Portuguese', value: 'pt' },
-   { label: 'Russian', value: 'ru' },
-   { label: 'Japanese', value: 'ja' },
-   { label: 'Korean', value: 'ko' },
-   { label: 'Chinese', value: 'zh' },
-] as const
-
-const FormSchema = z.object({
-   language: z.string({
-      required_error: 'Please select a language.',
-   }),
-})
-
-export default function ComboboxForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <FormField
-               control={form.control}
-               name="language"
-               render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                     <FormLabel>Language</FormLabel>
-                     <Popover>
-                        <PopoverTrigger asChild>
-                           <FormControl>
-                              <Button
-                                 variant="outline"
-                                 role="combobox"
-                                 className={ny(
-                                    'w-[200px] justify-between',
-                                    !field.value && 'text-muted-foreground',
-                                 )}
-                              >
-                                 {field.value
-                                    ? languages.find(
-                                       language => language.value === field.value,
-                                    )?.label
-                                    : 'Select language'}
-                                 <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
-                              </Button>
-                           </FormControl>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-[200px] p-0">
-                           <Command>
-                              <CommandInput placeholder="Search language..." />
-                              <CommandList>
-                                 <CommandEmpty>No language found.</CommandEmpty>
-                                 <CommandGroup>
-                                    {languages.map(language => (
-                                       <CommandItem
-                                          value={language.label}
-                                          key={language.value}
-                                          onSelect={() => {
-                                             form.setValue('language', language.value)
-                                          }}
-                                       >
-                                          {language.label}
-                                          <Check
-                                             className={ny(
-                                                'ml-auto',
-                                                language.value === field.value
-                                                   ? 'opacity-100'
-                                                   : 'opacity-0',
-                                             )}
-                                          />
-                                       </CommandItem>
-                                    ))}
-                                 </CommandGroup>
-                              </CommandList>
-                           </Command>
-                        </PopoverContent>
-                     </Popover>
-                     <FormDescription>
-                        This is the language that will be used in the dashboard.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/combobox-popover.tsx b/apps/web/registry/default/example/combobox-popover.tsx
deleted file mode 100644
index f92c5440..00000000
--- a/apps/web/registry/default/example/combobox-popover.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import type {
-   LucideIcon,
-} from 'lucide-react'
-import {
-   ArrowUpCircle,
-   CheckCircle2,
-   Circle,
-   HelpCircle,
-   XCircle,
-} from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/default/ui/command'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-interface Status {
-   value: string
-   label: string
-   icon: LucideIcon
-}
-
-const statuses: Status[] = [
-   {
-      value: 'backlog',
-      label: 'Backlog',
-      icon: HelpCircle,
-   },
-   {
-      value: 'todo',
-      label: 'Todo',
-      icon: Circle,
-   },
-   {
-      value: 'in progress',
-      label: 'In Progress',
-      icon: ArrowUpCircle,
-   },
-   {
-      value: 'done',
-      label: 'Done',
-      icon: CheckCircle2,
-   },
-   {
-      value: 'canceled',
-      label: 'Canceled',
-      icon: XCircle,
-   },
-]
-
-export default function ComboboxPopover() {
-   const [open, setOpen] = React.useState(false)
-   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
-      null,
-   )
-
-   return (
-      <div className="flex items-center space-x-4">
-         <p className="text-muted-foreground text-sm">Status</p>
-         <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-               <Button
-                  variant="outline"
-                  size="sm"
-                  className="w-[150px] justify-start"
-               >
-                  {selectedStatus
-                     ? (
-                           <>
-                              <selectedStatus.icon className="mr-2 size-4 shrink-0" />
-                              {selectedStatus.label}
-                           </>
-                        )
-                     : (
-                           <>+ Set status</>
-                        )}
-               </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0" side="right" align="start">
-               <Command>
-                  <CommandInput placeholder="Change status..." />
-                  <CommandList>
-                     <CommandEmpty>No results found.</CommandEmpty>
-                     <CommandGroup>
-                        {statuses.map(status => (
-                           <CommandItem
-                              key={status.value}
-                              value={status.value}
-                              onSelect={(value) => {
-                                 setSelectedStatus(
-                                    statuses.find(priority => priority.value === value)
-                                    || null,
-                                 )
-                                 setOpen(false)
-                              }}
-                           >
-                              <status.icon
-                                 className={ny(
-                                    'mr-2 size-4',
-                                    status.value === selectedStatus?.value
-                                       ? 'opacity-100'
-                                       : 'opacity-40',
-                                 )}
-                              />
-                              <span>{status.label}</span>
-                           </CommandItem>
-                        ))}
-                     </CommandGroup>
-                  </CommandList>
-               </Command>
-            </PopoverContent>
-         </Popover>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/combobox-responsive.tsx b/apps/web/registry/default/example/combobox-responsive.tsx
deleted file mode 100644
index 90daf42f..00000000
--- a/apps/web/registry/default/example/combobox-responsive.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { useMediaQuery } from '~/hooks/use-media-query'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/default/ui/command'
-import {
-   Drawer,
-   DrawerContent,
-   DrawerTrigger,
-} from '~/registry/default/ui/drawer'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-interface Status {
-   value: string
-   label: string
-}
-
-const statuses: Status[] = [
-   {
-      value: 'backlog',
-      label: 'Backlog',
-   },
-   {
-      value: 'todo',
-      label: 'Todo',
-   },
-   {
-      value: 'in progress',
-      label: 'In Progress',
-   },
-   {
-      value: 'done',
-      label: 'Done',
-   },
-   {
-      value: 'canceled',
-      label: 'Canceled',
-   },
-]
-
-export default function ComboBoxResponsive() {
-   const [open, setOpen] = React.useState(false)
-   const isDesktop = useMediaQuery('(min-width: 768px)')
-   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
-      null,
-   )
-
-   if (isDesktop) {
-      return (
-         <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-               <Button variant="outline" className="w-[150px] justify-start">
-                  {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
-               </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[200px] p-0" align="start">
-               <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
-            </PopoverContent>
-         </Popover>
-      )
-   }
-
-   return (
-      <Drawer open={open} onOpenChange={setOpen}>
-         <DrawerTrigger asChild>
-            <Button variant="outline" className="w-[150px] justify-start">
-               {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
-            </Button>
-         </DrawerTrigger>
-         <DrawerContent>
-            <div className="mt-4 border-t">
-               <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
-            </div>
-         </DrawerContent>
-      </Drawer>
-   )
-}
-
-function StatusList({
-   setOpen,
-   setSelectedStatus,
-}: {
-   setOpen: (open: boolean) => void
-   setSelectedStatus: (status: Status | null) => void
-}) {
-   return (
-      <Command>
-         <CommandInput placeholder="Filter status..." />
-         <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-               {statuses.map(status => (
-                  <CommandItem
-                     key={status.value}
-                     value={status.value}
-                     onSelect={(value) => {
-                        setSelectedStatus(
-                           statuses.find(priority => priority.value === value) || null,
-                        )
-                        setOpen(false)
-                     }}
-                  >
-                     {status.label}
-                  </CommandItem>
-               ))}
-            </CommandGroup>
-         </CommandList>
-      </Command>
-   )
-}
diff --git a/apps/web/registry/default/example/command-demo.tsx b/apps/web/registry/default/example/command-demo.tsx
deleted file mode 100644
index b27de46a..00000000
--- a/apps/web/registry/default/example/command-demo.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
-   Calculator,
-   Calendar,
-   CreditCard,
-   Settings,
-   Smile,
-   User,
-} from 'lucide-react'
-
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-   CommandSeparator,
-   CommandShortcut,
-} from '~/registry/default/ui/command'
-
-export default function CommandDemo() {
-   return (
-      <Command className="rounded-lg border shadow-md">
-         <CommandInput placeholder="Type a command or search..." />
-         <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup heading="Suggestions">
-               <CommandItem>
-                  <Calendar className="mr-2 size-4" />
-                  <span>Calendar</span>
-               </CommandItem>
-               <CommandItem>
-                  <Smile className="mr-2 size-4" />
-                  <span>Search Emoji</span>
-               </CommandItem>
-               <CommandItem>
-                  <Calculator className="mr-2 size-4" />
-                  <span>Calculator</span>
-               </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Settings">
-               <CommandItem>
-                  <User className="mr-2 size-4" />
-                  <span>Profile</span>
-                  <CommandShortcut>⌘P</CommandShortcut>
-               </CommandItem>
-               <CommandItem>
-                  <CreditCard className="mr-2 size-4" />
-                  <span>Billing</span>
-                  <CommandShortcut>⌘B</CommandShortcut>
-               </CommandItem>
-               <CommandItem>
-                  <Settings className="mr-2 size-4" />
-                  <span>Settings</span>
-                  <CommandShortcut>⌘S</CommandShortcut>
-               </CommandItem>
-            </CommandGroup>
-         </CommandList>
-      </Command>
-   )
-}
diff --git a/apps/web/registry/default/example/command-dialog.tsx b/apps/web/registry/default/example/command-dialog.tsx
deleted file mode 100644
index 09b612ec..00000000
--- a/apps/web/registry/default/example/command-dialog.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   Calculator,
-   Calendar,
-   CreditCard,
-   Settings,
-   Smile,
-   User,
-} from 'lucide-react'
-
-import {
-   CommandDialog,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-   CommandSeparator,
-   CommandShortcut,
-} from '~/registry/default/ui/command'
-
-export default function CommandDialogDemo() {
-   const [open, setOpen] = React.useState(false)
-
-   React.useEffect(() => {
-      const down = (e: KeyboardEvent) => {
-         if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
-            e.preventDefault()
-            setOpen(open => !open)
-         }
-      }
-
-      document.addEventListener('keydown', down)
-      return () => document.removeEventListener('keydown', down)
-   }, [])
-
-   return (
-      <>
-         <p className="text-muted-foreground text-sm">
-            Press
-            {' '}
-            <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100">
-               <span className="text-xs">⌘</span>
-               J
-            </kbd>
-         </p>
-         <CommandDialog open={open} onOpenChange={setOpen}>
-            <CommandInput placeholder="Type a command or search..." />
-            <CommandList>
-               <CommandEmpty>No results found.</CommandEmpty>
-               <CommandGroup heading="Suggestions">
-                  <CommandItem>
-                     <Calendar className="mr-2 size-4" />
-                     <span>Calendar</span>
-                  </CommandItem>
-                  <CommandItem>
-                     <Smile className="mr-2 size-4" />
-                     <span>Search Emoji</span>
-                  </CommandItem>
-                  <CommandItem>
-                     <Calculator className="mr-2 size-4" />
-                     <span>Calculator</span>
-                  </CommandItem>
-               </CommandGroup>
-               <CommandSeparator />
-               <CommandGroup heading="Settings">
-                  <CommandItem>
-                     <User className="mr-2 size-4" />
-                     <span>Profile</span>
-                     <CommandShortcut>⌘P</CommandShortcut>
-                  </CommandItem>
-                  <CommandItem>
-                     <CreditCard className="mr-2 size-4" />
-                     <span>Billing</span>
-                     <CommandShortcut>⌘B</CommandShortcut>
-                  </CommandItem>
-                  <CommandItem>
-                     <Settings className="mr-2 size-4" />
-                     <span>Settings</span>
-                     <CommandShortcut>⌘S</CommandShortcut>
-                  </CommandItem>
-               </CommandGroup>
-            </CommandList>
-         </CommandDialog>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/confetti-basic-cannon.tsx b/apps/web/registry/default/example/confetti-basic-cannon.tsx
deleted file mode 100644
index c845f4c5..00000000
--- a/apps/web/registry/default/example/confetti-basic-cannon.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ConfettiButton } from '~/registry/default/ui/confetti'
-
-export default function ConfettiButtonDemo() {
-   return (
-      <div className="relative">
-         <ConfettiButton>Confetti 🎉</ConfettiButton>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/confetti-custom-shapes.tsx b/apps/web/registry/default/example/confetti-custom-shapes.tsx
deleted file mode 100644
index 7d481f5f..00000000
--- a/apps/web/registry/default/example/confetti-custom-shapes.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import confetti from 'canvas-confetti'
-import { Button } from '~/components/ui/button'
-
-export default function ConfettiCustomShapes() {
-   const handleClick = () => {
-      const scalar = 2
-      const triangle = confetti.shapeFromPath({
-         path: 'M0 10 L5 0 L10 10z',
-      })
-      const square = confetti.shapeFromPath({
-         path: 'M0 0 L10 0 L10 10 L0 10 Z',
-      })
-      const coin = confetti.shapeFromPath({
-         path: 'M5 0 A5 5 0 1 0 5 10 A5 5 0 1 0 5 0 Z',
-      })
-      const tree = confetti.shapeFromPath({
-         path: 'M5 0 L10 10 L0 10 Z',
-      })
-
-      const defaults = {
-         spread: 360,
-         ticks: 60,
-         gravity: 0,
-         decay: 0.96,
-         startVelocity: 20,
-         shapes: [triangle, square, coin, tree],
-         scalar,
-      }
-
-      const shoot = () => {
-         confetti({
-            ...defaults,
-            particleCount: 30,
-         })
-
-         confetti({
-            ...defaults,
-            particleCount: 5,
-         })
-
-         confetti({
-            ...defaults,
-            particleCount: 15,
-            scalar: scalar / 2,
-            shapes: ['circle'],
-         })
-      }
-
-      setTimeout(shoot, 0)
-      setTimeout(shoot, 100)
-      setTimeout(shoot, 200)
-   }
-
-   return (
-      <div className="relative flex items-center justify-center">
-         <Button onClick={handleClick}>Trigger Shapes</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/confetti-demo.tsx b/apps/web/registry/default/example/confetti-demo.tsx
deleted file mode 100644
index 6fceaf98..00000000
--- a/apps/web/registry/default/example/confetti-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { useRef } from 'react'
-
-import type { ConfettiRef } from '~/registry/default/ui/confetti'
-import Confetti from '~/registry/default/ui/confetti'
-
-export default function ConfettiDemo() {
-   const confettiRef = useRef<ConfettiRef>(null)
-
-   return (
-      <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Confetti
-         </span>
-
-         <Confetti
-            ref={confettiRef}
-            className="absolute left-0 top-0 z-0 size-full"
-            onMouseEnter={() => {
-               confettiRef.current?.fire({})
-            }}
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/confetti-emoji.tsx b/apps/web/registry/default/example/confetti-emoji.tsx
deleted file mode 100644
index 6c0d15a3..00000000
--- a/apps/web/registry/default/example/confetti-emoji.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import confetti from 'canvas-confetti'
-import { Button } from '~/components/ui/button'
-
-export default function ConfettiEmoji() {
-   const handleClick = () => {
-      const scalar = 2
-      const unicorn = confetti.shapeFromText({ text: '🦄', scalar })
-
-      const defaults = {
-         spread: 360,
-         ticks: 60,
-         gravity: 0,
-         decay: 0.96,
-         startVelocity: 20,
-         shapes: [unicorn],
-         scalar,
-      }
-
-      const shoot = () => {
-         confetti({
-            ...defaults,
-            particleCount: 30,
-         })
-
-         confetti({
-            ...defaults,
-            particleCount: 5,
-         })
-
-         confetti({
-            ...defaults,
-            particleCount: 15,
-            scalar: scalar / 2,
-            shapes: ['circle'],
-         })
-      }
-
-      setTimeout(shoot, 0)
-      setTimeout(shoot, 100)
-      setTimeout(shoot, 200)
-   }
-
-   return (
-      <div className="relative justify-center">
-         <Button onClick={handleClick}>Trigger Emoji</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/confetti-fireworks.tsx b/apps/web/registry/default/example/confetti-fireworks.tsx
deleted file mode 100644
index 40a69d96..00000000
--- a/apps/web/registry/default/example/confetti-fireworks.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import confetti from 'canvas-confetti'
-import { Button } from '~/components/ui/button'
-
-export default function ConfettiFireworks() {
-   const handleClick = () => {
-      const duration = 5 * 1000
-      const animationEnd = Date.now() + duration
-      const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
-
-      const randomInRange = (min: number, max: number) =>
-         Math.random() * (max - min) + min
-
-      const interval = window.setInterval(() => {
-         const timeLeft = animationEnd - Date.now()
-
-         if (timeLeft <= 0)
-            return clearInterval(interval)
-
-         const particleCount = 50 * (timeLeft / duration)
-         confetti({
-            ...defaults,
-            particleCount,
-            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
-         })
-         confetti({
-            ...defaults,
-            particleCount,
-            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
-         })
-      }, 250)
-   }
-
-   return (
-      <div className="relative">
-         <Button onClick={handleClick}>Trigger Fireworks</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/confetti-hover.tsx b/apps/web/registry/default/example/confetti-hover.tsx
deleted file mode 100644
index 1783b8f8..00000000
--- a/apps/web/registry/default/example/confetti-hover.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { useRef } from 'react'
-import type { ConfettiRef } from '~/registry/default/ui/confetti'
-import Confetti from '~/registry/default/ui/confetti'
-
-export default function ConfettiBasicCannon() {
-   const confettiRef = useRef<ConfettiRef>(null)
-
-   return (
-      <div className="bg-background relative flex h-[500px] w-full max-w-lg flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Confetti
-         </span>
-
-         <Confetti
-            ref={confettiRef}
-            className="absolute left-0 top-0 z-0 size-full"
-            onMouseEnter={() => {
-               confettiRef.current?.fire({})
-            }}
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/confetti-random-direction.tsx b/apps/web/registry/default/example/confetti-random-direction.tsx
deleted file mode 100644
index df8f25b6..00000000
--- a/apps/web/registry/default/example/confetti-random-direction.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ConfettiButton } from '~/registry/default/ui/confetti'
-
-export default function ConfettiButtonDemo() {
-   return (
-      <div className="relative">
-         <ConfettiButton
-            options={{
-               get angle() {
-                  return Math.random() * 360
-               },
-            }}
-         >
-            Random Confetti 🎉
-         </ConfettiButton>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/confetti-side-cannons.tsx b/apps/web/registry/default/example/confetti-side-cannons.tsx
deleted file mode 100644
index 605b78b6..00000000
--- a/apps/web/registry/default/example/confetti-side-cannons.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import confetti from 'canvas-confetti'
-import { Button } from '~/components/ui/button'
-
-export default function ConfettiSideCannons() {
-   const handleClick = () => {
-      const end = Date.now() + 3 * 1000 // 3 seconds
-      const colors = ['#a786ff', '#fd8bbc', '#eca184', '#f8deb1']
-
-      const frame = () => {
-         if (Date.now() > end)
-            return
-
-         confetti({
-            particleCount: 2,
-            angle: 60,
-            spread: 55,
-            startVelocity: 60,
-            origin: { x: 0, y: 0.5 },
-            colors,
-         })
-         confetti({
-            particleCount: 2,
-            angle: 120,
-            spread: 55,
-            startVelocity: 60,
-            origin: { x: 1, y: 0.5 },
-            colors,
-         })
-
-         requestAnimationFrame(frame)
-      }
-
-      frame()
-   }
-
-   return (
-      <div className="relative">
-         <Button onClick={handleClick}>Trigger Side Cannons</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/confetti-stars.tsx b/apps/web/registry/default/example/confetti-stars.tsx
deleted file mode 100644
index 1df82c79..00000000
--- a/apps/web/registry/default/example/confetti-stars.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import confetti from 'canvas-confetti'
-import { Button } from '~/components/ui/button'
-
-export default function ConfettiStars() {
-   const handleClick = () => {
-      const defaults = {
-         spread: 360,
-         ticks: 50,
-         gravity: 0,
-         decay: 0.94,
-         startVelocity: 30,
-         colors: ['#FFE400', '#FFBD00', '#E89400', '#FFCA6C', '#FDFFB8'],
-      }
-
-      const shoot = () => {
-         confetti({
-            ...defaults,
-            particleCount: 40,
-            scalar: 1.2,
-            shapes: ['star'],
-         })
-
-         confetti({
-            ...defaults,
-            particleCount: 10,
-            scalar: 0.75,
-            shapes: ['circle'],
-         })
-      }
-
-      setTimeout(shoot, 0)
-      setTimeout(shoot, 100)
-      setTimeout(shoot, 200)
-   }
-
-   return (
-      <div className="relative">
-         <Button onClick={handleClick}>Trigger Stars</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/context-menu-demo.tsx b/apps/web/registry/default/example/context-menu-demo.tsx
deleted file mode 100644
index 5f19433c..00000000
--- a/apps/web/registry/default/example/context-menu-demo.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-   ContextMenu,
-   ContextMenuCheckboxItem,
-   ContextMenuContent,
-   ContextMenuItem,
-   ContextMenuLabel,
-   ContextMenuRadioGroup,
-   ContextMenuRadioItem,
-   ContextMenuSeparator,
-   ContextMenuShortcut,
-   ContextMenuSub,
-   ContextMenuSubContent,
-   ContextMenuSubTrigger,
-   ContextMenuTrigger,
-} from '~/registry/default/ui/context-menu'
-
-export default function ContextMenuDemo() {
-   return (
-      <ContextMenu>
-         <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-            Right click here
-         </ContextMenuTrigger>
-         <ContextMenuContent className="w-64">
-            <ContextMenuItem inset>
-               Back
-               <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem inset disabled>
-               Forward
-               <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem inset>
-               Reload
-               <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuSub>
-               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-               <ContextMenuSubContent className="w-48">
-                  <ContextMenuItem>
-                     Save Page As...
-                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-                  </ContextMenuItem>
-                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-                  <ContextMenuItem>Name Window...</ContextMenuItem>
-                  <ContextMenuSeparator />
-                  <ContextMenuItem>Developer Tools</ContextMenuItem>
-               </ContextMenuSubContent>
-            </ContextMenuSub>
-            <ContextMenuSeparator />
-            <ContextMenuCheckboxItem checked>
-               Show Bookmarks Bar
-               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-            </ContextMenuCheckboxItem>
-            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-            <ContextMenuSeparator />
-            <ContextMenuRadioGroup value="pedro">
-               <ContextMenuLabel inset>People</ContextMenuLabel>
-               <ContextMenuSeparator />
-               <ContextMenuRadioItem value="pedro">
-                  Pedro Duarte
-               </ContextMenuRadioItem>
-               <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-            </ContextMenuRadioGroup>
-         </ContextMenuContent>
-      </ContextMenu>
-   )
-}
diff --git a/apps/web/registry/default/example/cool-mode-custom.tsx b/apps/web/registry/default/example/cool-mode-custom.tsx
deleted file mode 100644
index b0c3475c..00000000
--- a/apps/web/registry/default/example/cool-mode-custom.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { Button } from '~/components/ui/button'
-import { CoolMode } from '~/registry/default/ui/cool-mode'
-
-export default function CoolModeCustom() {
-   return (
-      <div className="relative justify-center">
-         <CoolMode
-            options={{
-               particle:
-            'https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg',
-            }}
-         >
-            <Button>Click Me!</Button>
-         </CoolMode>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/cool-mode-demo.tsx b/apps/web/registry/default/example/cool-mode-demo.tsx
deleted file mode 100644
index 0e6c508e..00000000
--- a/apps/web/registry/default/example/cool-mode-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { CoolMode } from '~/registry/default/ui/cool-mode'
-import { Button } from '~/components/ui/button'
-
-export default function CoolModeDemo() {
-   return (
-      <div className="relative justify-center">
-         <CoolMode>
-            <Button>Click Me!</Button>
-         </CoolMode>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/data-table-demo.tsx b/apps/web/registry/default/example/data-table-demo.tsx
deleted file mode 100644
index 1ceb6fb1..00000000
--- a/apps/web/registry/default/example/data-table-demo.tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import type {
-   ColumnDef,
-   ColumnFiltersState,
-   SortingState,
-   VisibilityState,
-} from '@tanstack/react-table'
-import {
-   flexRender,
-   getCoreRowModel,
-   getFilteredRowModel,
-   getPaginationRowModel,
-   getSortedRowModel,
-   useReactTable,
-} from '@tanstack/react-table'
-import { ArrowUpDown, ChevronDown, MoreHorizontal } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import { Checkbox } from '~/registry/default/ui/checkbox'
-import {
-   DropdownMenu,
-   DropdownMenuCheckboxItem,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-import { Input } from '~/registry/default/ui/input'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/default/ui/table'
-
-const data: Payment[] = [
-   {
-      id: 'm5gr84i9',
-      amount: 316,
-      status: 'success',
-      email: 'ken99@yahoo.com',
-   },
-   {
-      id: '3u1reuv4',
-      amount: 242,
-      status: 'success',
-      email: 'Abe45@gmail.com',
-   },
-   {
-      id: 'derv1ws0',
-      amount: 837,
-      status: 'processing',
-      email: 'Monserrat44@gmail.com',
-   },
-   {
-      id: '5kma53ae',
-      amount: 874,
-      status: 'success',
-      email: 'Silas22@gmail.com',
-   },
-   {
-      id: 'bhqecj4p',
-      amount: 721,
-      status: 'failed',
-      email: 'carmella@hotmail.com',
-   },
-]
-
-export interface Payment {
-   id: string
-   amount: number
-   status: 'pending' | 'processing' | 'success' | 'failed'
-   email: string
-}
-
-export const columns: ColumnDef<Payment>[] = [
-   {
-      id: 'select',
-      header: ({ table }) => (
-         <Checkbox
-            checked={
-               table.getIsAllPageRowsSelected()
-               || (table.getIsSomePageRowsSelected() && 'indeterminate')
-            }
-            onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-            aria-label="Select all"
-         />
-      ),
-      cell: ({ row }) => (
-         <Checkbox
-            checked={row.getIsSelected()}
-            onCheckedChange={value => row.toggleSelected(!!value)}
-            aria-label="Select row"
-         />
-      ),
-      enableSorting: false,
-      enableHiding: false,
-   },
-   {
-      accessorKey: 'status',
-      header: 'Status',
-      cell: ({ row }) => (
-         <div className="capitalize">{row.getValue('status')}</div>
-      ),
-   },
-   {
-      accessorKey: 'email',
-      header: ({ column }) => {
-         return (
-            <Button
-               variant="ghost"
-               onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            >
-               Email
-               <ArrowUpDown className="ml-2 size-4" />
-            </Button>
-         )
-      },
-      cell: ({ row }) => <div className="lowercase">{row.getValue('email')}</div>,
-   },
-   {
-      accessorKey: 'amount',
-      header: () => <div className="text-right">Amount</div>,
-      cell: ({ row }) => {
-         const amount = Number.parseFloat(row.getValue('amount'))
-
-         // Format the amount as a dollar amount
-         const formatted = new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: 'USD',
-         }).format(amount)
-
-         return <div className="text-right font-medium">{formatted}</div>
-      },
-   },
-   {
-      id: 'actions',
-      enableHiding: false,
-      cell: ({ row }) => {
-         const payment = row.original
-
-         return (
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" className="size-8 p-0">
-                     <span className="sr-only">Open menu</span>
-                     <MoreHorizontal className="size-4" />
-                  </Button>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent align="end">
-                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                  <DropdownMenuItem
-                     onClick={() => navigator.clipboard.writeText(payment.id)}
-                  >
-                     Copy payment ID
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>View customer</DropdownMenuItem>
-                  <DropdownMenuItem>View payment details</DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         )
-      },
-   },
-]
-
-export default function DataTableDemo() {
-   const [sorting, setSorting] = React.useState<SortingState>([])
-   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-      [],
-   )
-   const [columnVisibility, setColumnVisibility]
-    = React.useState<VisibilityState>({})
-   const [rowSelection, setRowSelection] = React.useState({})
-
-   const table = useReactTable({
-      data,
-      columns,
-      onSortingChange: setSorting,
-      onColumnFiltersChange: setColumnFilters,
-      getCoreRowModel: getCoreRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      onColumnVisibilityChange: setColumnVisibility,
-      onRowSelectionChange: setRowSelection,
-      state: {
-         sorting,
-         columnFilters,
-         columnVisibility,
-         rowSelection,
-      },
-   })
-
-   return (
-      <div className="w-full">
-         <div className="flex items-center py-4">
-            <Input
-               placeholder="Filter emails..."
-               value={(table.getColumn('email')?.getFilterValue() as string) ?? ''}
-               onChange={event =>
-                  table.getColumn('email')?.setFilterValue(event.target.value)}
-               className="max-w-sm"
-            />
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <Button variant="outline" className="ml-auto">
-                     Columns
-                     {' '}
-                     <ChevronDown className="ml-2 size-4" />
-                  </Button>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent align="end">
-                  {table
-                     .getAllColumns()
-                     .filter(column => column.getCanHide())
-                     .map((column) => {
-                        return (
-                           <DropdownMenuCheckboxItem
-                              key={column.id}
-                              className="capitalize"
-                              checked={column.getIsVisible()}
-                              onCheckedChange={value =>
-                                 column.toggleVisibility(!!value)}
-                           >
-                              {column.id}
-                           </DropdownMenuCheckboxItem>
-                        )
-                     })}
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </div>
-         <div className="rounded-md border">
-            <Table>
-               <TableHeader>
-                  {table.getHeaderGroups().map(headerGroup => (
-                     <TableRow key={headerGroup.id}>
-                        {headerGroup.headers.map((header) => {
-                           return (
-                              <TableHead key={header.id}>
-                                 {header.isPlaceholder
-                                    ? null
-                                    : flexRender(
-                                       header.column.columnDef.header,
-                                       header.getContext(),
-                                    )}
-                              </TableHead>
-                           )
-                        })}
-                     </TableRow>
-                  ))}
-               </TableHeader>
-               <TableBody>
-                  {table.getRowModel().rows?.length
-                     ? (
-                           table.getRowModel().rows.map(row => (
-                              <TableRow
-                                 key={row.id}
-                                 data-state={row.getIsSelected() && 'selected'}
-                              >
-                                 {row.getVisibleCells().map(cell => (
-                                    <TableCell key={cell.id}>
-                                       {flexRender(
-                                          cell.column.columnDef.cell,
-                                          cell.getContext(),
-                                       )}
-                                    </TableCell>
-                                 ))}
-                              </TableRow>
-                           ))
-                        )
-                     : (
-                           <TableRow>
-                              <TableCell
-                                 colSpan={columns.length}
-                                 className="h-24 text-center"
-                              >
-                                 No results.
-                              </TableCell>
-                           </TableRow>
-                        )}
-               </TableBody>
-            </Table>
-         </div>
-         <div className="flex items-center justify-end space-x-2 py-4">
-            <div className="text-muted-foreground flex-1 text-sm">
-               {table.getFilteredSelectedRowModel().rows.length}
-               {' '}
-               of
-               {' '}
-               {table.getFilteredRowModel().rows.length}
-               {' '}
-               row(s) selected.
-            </div>
-            <div className="space-x-2">
-               <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => table.previousPage()}
-                  disabled={!table.getCanPreviousPage()}
-               >
-                  Previous
-               </Button>
-               <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => table.nextPage()}
-                  disabled={!table.getCanNextPage()}
-               >
-                  Next
-               </Button>
-            </div>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/date-picker-demo.tsx b/apps/web/registry/default/example/date-picker-demo.tsx
deleted file mode 100644
index c03297fd..00000000
--- a/apps/web/registry/default/example/date-picker-demo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import { Calendar } from '~/registry/default/ui/calendar'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-export default function DatePickerDemo() {
-   const [date, setDate] = React.useState<Date>()
-
-   return (
-      <Popover>
-         <PopoverTrigger asChild>
-            <Button
-               variant="outline"
-               className={ny(
-                  'w-[280px] justify-start text-left font-normal',
-                  !date && 'text-muted-foreground',
-               )}
-            >
-               <CalendarIcon className="mr-2 size-4" />
-               {date ? format(date, 'PPP') : <span>Pick a date</span>}
-            </Button>
-         </PopoverTrigger>
-         <PopoverContent className="w-auto p-0">
-            <Calendar
-               mode="single"
-               selected={date}
-               onSelect={setDate}
-               initialFocus
-            />
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/default/example/date-picker-form.tsx b/apps/web/registry/default/example/date-picker-form.tsx
deleted file mode 100644
index 23ed322a..00000000
--- a/apps/web/registry/default/example/date-picker-form.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { format } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import { Calendar } from '~/registry/default/ui/calendar'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const FormSchema = z.object({
-   dob: z.date({
-      required_error: 'A date of birth is required.',
-   }),
-})
-
-export default function DatePickerForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-            <FormField
-               control={form.control}
-               name="dob"
-               render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                     <FormLabel>Date of birth</FormLabel>
-                     <Popover>
-                        <PopoverTrigger asChild>
-                           <FormControl>
-                              <Button
-                                 variant="outline"
-                                 className={ny(
-                                    'w-[240px] pl-3 text-left font-normal',
-                                    !field.value && 'text-muted-foreground',
-                                 )}
-                              >
-                                 {field.value
-                                    ? (
-                                          format(field.value, 'PPP')
-                                       )
-                                    : (
-                                          <span>Pick a date</span>
-                                       )}
-                                 <CalendarIcon className="ml-auto size-4 opacity-50" />
-                              </Button>
-                           </FormControl>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0" align="start">
-                           <Calendar
-                              mode="single"
-                              selected={field.value}
-                              onSelect={field.onChange}
-                              disabled={date =>
-                                 date > new Date() || date < new Date('1900-01-01')}
-                              initialFocus
-                           />
-                        </PopoverContent>
-                     </Popover>
-                     <FormDescription>
-                        Your date of birth is used to calculate your age.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/date-picker-with-presets.tsx b/apps/web/registry/default/example/date-picker-with-presets.tsx
deleted file mode 100644
index f581d61a..00000000
--- a/apps/web/registry/default/example/date-picker-with-presets.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import { Calendar } from '~/registry/default/ui/calendar'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-
-export default function DatePickerWithPresets() {
-   const [date, setDate] = React.useState<Date>()
-
-   return (
-      <Popover>
-         <PopoverTrigger asChild>
-            <Button
-               variant="outline"
-               className={ny(
-                  'w-[280px] justify-start text-left font-normal',
-                  !date && 'text-muted-foreground',
-               )}
-            >
-               <CalendarIcon className="mr-2 size-4" />
-               {date ? format(date, 'PPP') : <span>Pick a date</span>}
-            </Button>
-         </PopoverTrigger>
-         <PopoverContent className="flex w-auto flex-col space-y-2 p-2">
-            <Select
-               onValueChange={value =>
-                  setDate(addDays(new Date(), Number.parseInt(value)))}
-            >
-               <SelectTrigger>
-                  <SelectValue placeholder="Select" />
-               </SelectTrigger>
-               <SelectContent position="popper">
-                  <SelectItem value="0">Today</SelectItem>
-                  <SelectItem value="1">Tomorrow</SelectItem>
-                  <SelectItem value="3">In 3 days</SelectItem>
-                  <SelectItem value="7">In a week</SelectItem>
-               </SelectContent>
-            </Select>
-            <div className="rounded-md border">
-               <Calendar mode="single" selected={date} onSelect={setDate} />
-            </div>
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/default/example/date-picker-with-range-presets-internal.tsx b/apps/web/registry/default/example/date-picker-with-range-presets-internal.tsx
deleted file mode 100644
index 2e6398d3..00000000
--- a/apps/web/registry/default/example/date-picker-with-range-presets-internal.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-react'
-import type { DateRange } from 'react-day-picker'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import { Calendar } from '~/registry/default/ui/calendar'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-export default function DatePickerWithRange({
-   className,
-}: React.HTMLAttributes<HTMLDivElement>) {
-   const [date, setDate] = React.useState<DateRange | undefined>({
-      from: new Date(2022, 0, 20),
-      to: addDays(new Date(2022, 0, 20), 20),
-   })
-
-   const handlePresetSelect = (value: string) => {
-      switch (value) {
-         case 'last7Days':
-            setDate({
-               from: addDays(new Date(), -7),
-               to: new Date(),
-            })
-            break
-         case 'last30Days':
-            setDate({
-               from: addDays(new Date(), -30),
-               to: new Date(),
-            })
-            break
-         case 'monthToDate':
-            setDate({
-               from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
-               to: new Date(),
-            })
-            break
-         case 'yearToDate':
-            setDate({
-               from: new Date(new Date().getFullYear(), 0, 1),
-               to: new Date(),
-            })
-            break
-         default:
-            break
-      }
-   }
-
-   return (
-      <div className={ny('inline-flex', className)}>
-         <Popover>
-            <PopoverTrigger asChild>
-               <Button
-                  id="date"
-                  variant="outline"
-                  className={ny(
-                     'w-[300px] justify-start text-left font-normal',
-                     !date && 'text-muted-foreground',
-                  )}
-               >
-                  <CalendarIcon className="mr-2 size-4" />
-                  {date?.from
-                     ? (
-                           date.to
-                              ? (
-                                    <>
-                                       {format(date.from, 'LLL dd, y')}
-                                       {' '}
-                                       -
-                                       {' '}
-                                       {format(date.to, 'LLL dd, y')}
-                                    </>
-                                 )
-                              : (
-                                    format(date.from, 'LLL dd, y')
-                                 )
-                        )
-                     : (
-                           <span>Pick a date</span>
-                        )}
-               </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="start">
-               <div className="flex w-full justify-evenly p-2">
-                  <Button
-                     variant="outline"
-                     onClick={() => handlePresetSelect('last7Days')}
-                  >
-                     Last 7 Days
-                  </Button>
-                  <Button
-                     variant="outline"
-                     onClick={() => handlePresetSelect('last30Days')}
-                  >
-                     Last 30 Days
-                  </Button>
-                  <Button
-                     variant="outline"
-                     onClick={() => handlePresetSelect('monthToDate')}
-                  >
-                     Month to Date
-                  </Button>
-                  <Button
-                     variant="outline"
-                     onClick={() => handlePresetSelect('yearToDate')}
-                  >
-                     Year to Date
-                  </Button>
-               </div>
-               <div className="border-t">
-                  <Calendar
-                     initialFocus
-                     mode="range"
-                     defaultMonth={date?.from}
-                     selected={date}
-                     onSelect={setDate}
-                     numberOfMonths={2}
-                  />
-               </div>
-            </PopoverContent>
-         </Popover>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/date-picker-with-range.tsx b/apps/web/registry/default/example/date-picker-with-range.tsx
deleted file mode 100644
index e65a2943..00000000
--- a/apps/web/registry/default/example/date-picker-with-range.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-react'
-import type { DateRange } from 'react-day-picker'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import { Calendar } from '~/registry/default/ui/calendar'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-export default function DatePickerWithRange({
-   className,
-}: React.HTMLAttributes<HTMLDivElement>) {
-   const [date, setDate] = React.useState<DateRange | undefined>({
-      from: new Date(2022, 0, 20),
-      to: addDays(new Date(2022, 0, 20), 20),
-   })
-
-   return (
-      <div className={ny('grid gap-2', className)}>
-         <Popover>
-            <PopoverTrigger asChild>
-               <Button
-                  id="date"
-                  variant="outline"
-                  className={ny(
-                     'w-[300px] justify-start text-left font-normal',
-                     !date && 'text-muted-foreground',
-                  )}
-               >
-                  <CalendarIcon className="mr-2 size-4" />
-                  {date?.from
-                     ? (
-                           date.to
-                              ? (
-                                    <>
-                                       {format(date.from, 'LLL dd, y')}
-                                       {' '}
-                                       -
-                                       {' '}
-                                       {format(date.to, 'LLL dd, y')}
-                                    </>
-                                 )
-                              : (
-                                    format(date.from, 'LLL dd, y')
-                                 )
-                        )
-                     : (
-                           <span>Pick a date</span>
-                        )}
-               </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="start">
-               <Calendar
-                  initialFocus
-                  mode="range"
-                  defaultMonth={date?.from}
-                  selected={date}
-                  onSelect={setDate}
-                  numberOfMonths={2}
-               />
-            </PopoverContent>
-         </Popover>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/dialog-close-button.tsx b/apps/web/registry/default/example/dialog-close-button.tsx
deleted file mode 100644
index 76a5a514..00000000
--- a/apps/web/registry/default/example/dialog-close-button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Copy } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Dialog,
-   DialogClose,
-   DialogContent,
-   DialogDescription,
-   DialogFooter,
-   DialogHeader,
-   DialogTitle,
-   DialogTrigger,
-} from '~/registry/default/ui/dialog'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export default function DialogCloseButton() {
-   return (
-      <Dialog>
-         <DialogTrigger asChild>
-            <Button variant="outline">Share</Button>
-         </DialogTrigger>
-         <DialogContent className="sm:max-w-md">
-            <DialogHeader>
-               <DialogTitle>Share link</DialogTitle>
-               <DialogDescription>
-                  Anyone who has this link will be able to view this.
-               </DialogDescription>
-            </DialogHeader>
-            <div className="flex items-center space-x-2">
-               <div className="grid flex-1 gap-2">
-                  <Label htmlFor="link" className="sr-only">
-                     Link
-                  </Label>
-                  <Input
-                     id="link"
-                     defaultValue="https://nyxbui.design/docs/installation"
-                     readOnly
-                  />
-               </div>
-               <Button type="submit" size="sm" className="px-3">
-                  <span className="sr-only">Copy</span>
-                  <Copy className="size-4" />
-               </Button>
-            </div>
-            <DialogFooter className="sm:justify-start">
-               <DialogClose asChild>
-                  <Button type="button" variant="secondary">
-                     Close
-                  </Button>
-               </DialogClose>
-            </DialogFooter>
-         </DialogContent>
-      </Dialog>
-   )
-}
diff --git a/apps/web/registry/default/example/dialog-demo.tsx b/apps/web/registry/default/example/dialog-demo.tsx
deleted file mode 100644
index ab19438c..00000000
--- a/apps/web/registry/default/example/dialog-demo.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import {
-   Dialog,
-   DialogContent,
-   DialogDescription,
-   DialogFooter,
-   DialogHeader,
-   DialogTitle,
-   DialogTrigger,
-} from '~/registry/default/ui/dialog'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export default function DialogDemo() {
-   return (
-      <Dialog>
-         <DialogTrigger asChild>
-            <Button variant="outline">Edit Profile</Button>
-         </DialogTrigger>
-         <DialogContent className="sm:max-w-[425px]">
-            <DialogHeader>
-               <DialogTitle>Edit profile</DialogTitle>
-               <DialogDescription>
-                  Make changes to your profile here. Click save when you're done.
-               </DialogDescription>
-            </DialogHeader>
-            <div className="grid gap-4 py-4">
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="name" className="text-right">
-                     Name
-                  </Label>
-                  <Input
-                     id="name"
-                     defaultValue="Pedro Duarte"
-                     className="col-span-3"
-                  />
-               </div>
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="username" className="text-right">
-                     Username
-                  </Label>
-                  <Input
-                     id="username"
-                     defaultValue="~peduarte"
-                     className="col-span-3"
-                  />
-               </div>
-            </div>
-            <DialogFooter>
-               <Button type="submit">Save changes</Button>
-            </DialogFooter>
-         </DialogContent>
-      </Dialog>
-   )
-}
diff --git a/apps/web/registry/default/example/dock-demo-2.tsx b/apps/web/registry/default/example/dock-demo-2.tsx
deleted file mode 100644
index e4faab95..00000000
--- a/apps/web/registry/default/example/dock-demo-2.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react'
-
-import { Dock, DockIcon } from '~/registry/default/ui/dock'
-
-export type IconProps = React.HTMLAttributes<SVGElement>
-
-export default function DockDemo() {
-   return (
-      <div className="relative">
-         <Dock direction="middle">
-            <DockIcon>
-               <Icons.gitHub className="size-6" />
-            </DockIcon>
-            <DockIcon>
-               <Icons.googleDrive className="size-6" />
-            </DockIcon>
-            <DockIcon>
-               <Icons.notion className="size-6" />
-            </DockIcon>
-            <DockIcon>
-               <Icons.whatsapp className="size-6" />
-            </DockIcon>
-         </Dock>
-      </div>
-   )
-}
-
-const Icons = {
-   gitHub: (props: IconProps) => (
-      <svg viewBox="0 0 438.549 438.549" {...props}>
-         <path
-            fill="currentColor"
-            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-         >
-         </path>
-      </svg>
-   ),
-   notion: (props: IconProps) => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 100 100"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-         {...props}
-      >
-         <path
-            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
-            fill="#fff"
-         />
-         <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
-            fill="#000"
-         />
-      </svg>
-   ),
-   googleDrive: (props: IconProps) => (
-      <svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg" {...props}>
-         <path
-            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-            fill="#0066da"
-         />
-         <path
-            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-            fill="#00ac47"
-         />
-         <path
-            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-            fill="#ea4335"
-         />
-         <path
-            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-            fill="#00832d"
-         />
-         <path
-            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-            fill="#2684fc"
-         />
-         <path
-            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-            fill="#ffba00"
-         />
-      </svg>
-   ),
-   whatsapp: (props: IconProps) => (
-      <svg
-         xmlns="http://www.w3.org/2000/svg"
-         viewBox="0 0 175.216 175.552"
-         {...props}
-      >
-         <defs>
-            <linearGradient
-               id="b"
-               x1="85.915"
-               x2="86.535"
-               y1="32.567"
-               y2="137.092"
-               gradientUnits="userSpaceOnUse"
-            >
-               <stop offset="0" stopColor="#57d163" />
-               <stop offset="1" stopColor="#23b33a" />
-            </linearGradient>
-            <filter
-               id="a"
-               width="1.115"
-               height="1.114"
-               x="-.057"
-               y="-.057"
-               colorInterpolationFilters="sRGB"
-            >
-               <feGaussianBlur stdDeviation="3.531" />
-            </filter>
-         </defs>
-         <path
-            fill="#b3b3b3"
-            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
-            filter="url(#a)"
-         />
-         <path
-            fill="#fff"
-            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
-         />
-         <path
-            fill="url(#linearGradient1780)"
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
-         />
-         <path
-            fill="url(#b)"
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
-         />
-         <path
-            fill="#fff"
-            fillRule="evenodd"
-            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
-         />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/default/example/dock-demo-3.tsx b/apps/web/registry/default/example/dock-demo-3.tsx
deleted file mode 100644
index a7734ded..00000000
--- a/apps/web/registry/default/example/dock-demo-3.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react'
-
-import { Dock, DockIcon } from '~/registry/default/ui/dock'
-
-export type IconProps = React.HTMLAttributes<SVGElement>
-
-export default function DockDemo() {
-   return (
-      <div className="relative">
-         <Dock magnification={60} distance={100}>
-            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
-               <Icons.gitHub className="size-full" />
-            </DockIcon>
-            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
-               <Icons.googleDrive className="size-full" />
-            </DockIcon>
-            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
-               <Icons.notion className="size-full" />
-            </DockIcon>
-            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
-               <Icons.whatsapp className="size-full" />
-            </DockIcon>
-         </Dock>
-      </div>
-   )
-}
-
-const Icons = {
-   gitHub: (props: IconProps) => (
-      <svg viewBox="0 0 438.549 438.549" {...props}>
-         <path
-            fill="currentColor"
-            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-         >
-         </path>
-      </svg>
-   ),
-   notion: (props: IconProps) => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 100 100"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-         {...props}
-      >
-         <path
-            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
-            fill="#fff"
-         />
-         <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
-            fill="#000"
-         />
-      </svg>
-   ),
-   googleDrive: (props: IconProps) => (
-      <svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg" {...props}>
-         <path
-            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-            fill="#0066da"
-         />
-         <path
-            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-            fill="#00ac47"
-         />
-         <path
-            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-            fill="#ea4335"
-         />
-         <path
-            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-            fill="#00832d"
-         />
-         <path
-            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-            fill="#2684fc"
-         />
-         <path
-            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-            fill="#ffba00"
-         />
-      </svg>
-   ),
-   whatsapp: (props: IconProps) => (
-      <svg
-         xmlns="http://www.w3.org/2000/svg"
-         viewBox="0 0 175.216 175.552"
-         {...props}
-      >
-         <defs>
-            <linearGradient
-               id="b"
-               x1="85.915"
-               x2="86.535"
-               y1="32.567"
-               y2="137.092"
-               gradientUnits="userSpaceOnUse"
-            >
-               <stop offset="0" stopColor="#57d163" />
-               <stop offset="1" stopColor="#23b33a" />
-            </linearGradient>
-            <filter
-               id="a"
-               width="1.115"
-               height="1.114"
-               x="-.057"
-               y="-.057"
-               colorInterpolationFilters="sRGB"
-            >
-               <feGaussianBlur stdDeviation="3.531" />
-            </filter>
-         </defs>
-         <path
-            fill="#b3b3b3"
-            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
-            filter="url(#a)"
-         />
-         <path
-            fill="#fff"
-            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
-         />
-         <path
-            fill="url(#linearGradient1780)"
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
-         />
-         <path
-            fill="url(#b)"
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
-         />
-         <path
-            fill="#fff"
-            fillRule="evenodd"
-            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
-         />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/default/example/dock-demo.tsx b/apps/web/registry/default/example/dock-demo.tsx
deleted file mode 100644
index 6b31811c..00000000
--- a/apps/web/registry/default/example/dock-demo.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { CalendarIcon, HomeIcon, MailIcon, PencilIcon } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { buttonVariants } from '~/components/ui/button'
-import { Separator } from '~/components/ui/separator'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/components/ui/tooltip'
-import { ModeToggle } from '~/components/mode-toggle'
-import { Dock, DockIcon } from '~/registry/default/ui/dock'
-
-export type IconProps = React.HTMLAttributes<SVGElement>
-
-const Icons = {
-   calendar: (props: IconProps) => <CalendarIcon {...props} />,
-   email: (props: IconProps) => <MailIcon {...props} />,
-   linkedin: (props: IconProps) => (
-      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-         <title>LinkedIn</title>
-         <path
-            fill="currentColor"
-            d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
-         />
-      </svg>
-   ),
-   x: (props: IconProps) => (
-      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-         <title>X</title>
-         <path
-            fill="currentColor"
-            d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
-         />
-      </svg>
-   ),
-   youtube: (props: IconProps) => (
-      <svg
-         width="32px"
-         height="32px"
-         viewBox="0 0 32 32"
-         fill="currentColor"
-         xmlns="http://www.w3.org/2000/svg"
-         {...props}
-      >
-         <title>youtube</title>
-         <path d="M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z" />
-      </svg>
-   ),
-   github: (props: IconProps) => (
-      <svg viewBox="0 0 438.549 438.549" {...props}>
-         <path
-            fill="currentColor"
-            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-         >
-         </path>
-      </svg>
-   ),
-}
-
-const DATA = {
-   navbar: [
-      { href: '#', icon: HomeIcon, label: 'Home' },
-      { href: '#', icon: PencilIcon, label: 'Blog' },
-   ],
-   contact: {
-      social: {
-         GitHub: {
-            name: 'GitHub',
-            url: '#',
-            icon: Icons.github,
-         },
-         LinkedIn: {
-            name: 'LinkedIn',
-            url: '#',
-            icon: Icons.linkedin,
-         },
-         X: {
-            name: 'X',
-            url: '#',
-            icon: Icons.x,
-         },
-         email: {
-            name: 'Send Email',
-            url: '#',
-            icon: Icons.email,
-         },
-      },
-   },
-}
-
-export default function DockDemo() {
-   return (
-      <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Dock
-         </span>
-         <TooltipProvider>
-            <Dock direction="middle">
-               {DATA.navbar.map(item => (
-                  <DockIcon key={item.label}>
-                     <Tooltip>
-                        <TooltipTrigger asChild>
-                           <Link
-                              href={item.href}
-                              aria-label={item.label}
-                              className={ny(
-                                 buttonVariants({ variant: 'ghost', size: 'icon' }),
-                                 'size-12 rounded-full',
-                              )}
-                           >
-                              <item.icon className="size-4" />
-                           </Link>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                           <p>{item.label}</p>
-                        </TooltipContent>
-                     </Tooltip>
-                  </DockIcon>
-               ))}
-               <Separator orientation="vertical" className="h-full" />
-               {Object.entries(DATA.contact.social).map(([name, social]) => (
-                  <DockIcon key={name}>
-                     <Tooltip>
-                        <TooltipTrigger asChild>
-                           <Link
-                              href={social.url}
-                              aria-label={social.name}
-                              className={ny(
-                                 buttonVariants({ variant: 'ghost', size: 'icon' }),
-                                 'size-12 rounded-full',
-                              )}
-                           >
-                              <social.icon className="size-4" />
-                           </Link>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                           <p>{name}</p>
-                        </TooltipContent>
-                     </Tooltip>
-                  </DockIcon>
-               ))}
-               <Separator orientation="vertical" className="h-full py-2" />
-               <DockIcon>
-                  <Tooltip>
-                     <TooltipTrigger asChild>
-                        <ModeToggle className="rounded-full" />
-                     </TooltipTrigger>
-                     <TooltipContent>
-                        <p>Theme</p>
-                     </TooltipContent>
-                  </Tooltip>
-               </DockIcon>
-            </Dock>
-         </TooltipProvider>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/dot-pattern-demo.tsx b/apps/web/registry/default/example/dot-pattern-demo.tsx
deleted file mode 100644
index 148428bb..00000000
--- a/apps/web/registry/default/example/dot-pattern-demo.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import { ny } from '~/lib/utils'
-import DotPattern from '~/registry/default/ui/dot-pattern'
-
-function DotPatternDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Dot Pattern
-         </p>
-         <DotPattern
-            className={ny(
-               '[mask-image:radial-gradient(200px_circle_at_center,white,transparent)]',
-            )}
-         />
-      </div>
-   )
-}
-
-export default DotPatternDemo
diff --git a/apps/web/registry/default/example/dot-pattern-linear-gradient.tsx b/apps/web/registry/default/example/dot-pattern-linear-gradient.tsx
deleted file mode 100644
index 3cf1e9ab..00000000
--- a/apps/web/registry/default/example/dot-pattern-linear-gradient.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import DotPattern from '~/registry/default/ui/dot-pattern'
-import { ny } from '~/lib/utils'
-
-function DotPatternDemo2() {
-   return (
-      <div className="bg-background relative flex size-full items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Dot Pattern
-         </p>
-         <DotPattern
-            width={20}
-            height={20}
-            cx={1}
-            cy={1}
-            cr={1}
-            className={ny(
-               '[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ',
-            )}
-         />
-      </div>
-   )
-}
-
-export default DotPatternDemo2
diff --git a/apps/web/registry/default/example/drawer-demo.tsx b/apps/web/registry/default/example/drawer-demo.tsx
deleted file mode 100644
index fccca04d..00000000
--- a/apps/web/registry/default/example/drawer-demo.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from 'react'
-import { Minus, Plus } from 'lucide-react'
-import { Bar, BarChart, ResponsiveContainer } from 'recharts'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Drawer,
-   DrawerClose,
-   DrawerContent,
-   DrawerDescription,
-   DrawerFooter,
-   DrawerHeader,
-   DrawerTitle,
-   DrawerTrigger,
-} from '~/registry/default/ui/drawer'
-
-const data = [
-   {
-      goal: 400,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 278,
-   },
-   {
-      goal: 189,
-   },
-   {
-      goal: 239,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 278,
-   },
-   {
-      goal: 189,
-   },
-   {
-      goal: 349,
-   },
-]
-
-export default function DrawerDemo() {
-   const [goal, setGoal] = React.useState(350)
-
-   function onClick(adjustment: number) {
-      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
-   }
-
-   return (
-      <Drawer>
-         <DrawerTrigger asChild>
-            <Button variant="outline">Open Drawer</Button>
-         </DrawerTrigger>
-         <DrawerContent>
-            <div className="mx-auto w-full max-w-sm">
-               <DrawerHeader>
-                  <DrawerTitle>Move Goal</DrawerTitle>
-                  <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-               </DrawerHeader>
-               <div className="p-4 pb-0">
-                  <div className="flex items-center justify-center space-x-2">
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="size-8 shrink-0 rounded-full"
-                        onClick={() => onClick(-10)}
-                        disabled={goal <= 200}
-                     >
-                        <Minus className="size-4" />
-                        <span className="sr-only">Decrease</span>
-                     </Button>
-                     <div className="flex-1 text-center">
-                        <div className="text-7xl font-bold tracking-tighter">
-                           {goal}
-                        </div>
-                        <div className="text-muted-foreground text-[0.70rem] uppercase">
-                           Calories/day
-                        </div>
-                     </div>
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="size-8 shrink-0 rounded-full"
-                        onClick={() => onClick(10)}
-                        disabled={goal >= 400}
-                     >
-                        <Plus className="size-4" />
-                        <span className="sr-only">Increase</span>
-                     </Button>
-                  </div>
-                  <div className="mt-3 h-[120px]">
-                     <ResponsiveContainer width="100%" height="100%">
-                        <BarChart data={data}>
-                           <Bar
-                              dataKey="goal"
-                              style={
-                                 {
-                                    fill: 'hsl(var(--foreground))',
-                                    opacity: 0.9,
-                                 } as React.CSSProperties
-                              }
-                           />
-                        </BarChart>
-                     </ResponsiveContainer>
-                  </div>
-               </div>
-               <DrawerFooter>
-                  <Button>Submit</Button>
-                  <DrawerClose asChild>
-                     <Button variant="outline">Cancel</Button>
-                  </DrawerClose>
-               </DrawerFooter>
-            </div>
-         </DrawerContent>
-      </Drawer>
-   )
-}
diff --git a/apps/web/registry/default/example/drawer-dialog.tsx b/apps/web/registry/default/example/drawer-dialog.tsx
deleted file mode 100644
index ec93a793..00000000
--- a/apps/web/registry/default/example/drawer-dialog.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import * as React from 'react'
-
-import { ny } from '~/lib/utils'
-import { useMediaQuery } from '~/hooks/use-media-query'
-import { Button } from '~/registry/default/ui/button'
-import {
-   Dialog,
-   DialogContent,
-   DialogDescription,
-   DialogHeader,
-   DialogTitle,
-   DialogTrigger,
-} from '~/registry/default/ui/dialog'
-import {
-   Drawer,
-   DrawerClose,
-   DrawerContent,
-   DrawerDescription,
-   DrawerFooter,
-   DrawerHeader,
-   DrawerTitle,
-   DrawerTrigger,
-} from '~/registry/default/ui/drawer'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export default function DrawerDialogDemo() {
-   const [open, setOpen] = React.useState(false)
-   const isDesktop = useMediaQuery('(min-width: 768px)')
-
-   if (isDesktop) {
-      return (
-         <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-               <Button variant="outline">Edit Profile</Button>
-            </DialogTrigger>
-            <DialogContent className="sm:max-w-[425px]">
-               <DialogHeader>
-                  <DialogTitle>Edit profile</DialogTitle>
-                  <DialogDescription>
-                     Make changes to your profile here. Click save when you're done.
-                  </DialogDescription>
-               </DialogHeader>
-               <ProfileForm />
-            </DialogContent>
-         </Dialog>
-      )
-   }
-
-   return (
-      <Drawer open={open} onOpenChange={setOpen}>
-         <DrawerTrigger asChild>
-            <Button variant="outline">Edit Profile</Button>
-         </DrawerTrigger>
-         <DrawerContent>
-            <DrawerHeader className="text-left">
-               <DrawerTitle>Edit profile</DrawerTitle>
-               <DrawerDescription>
-                  Make changes to your profile here. Click save when you're done.
-               </DrawerDescription>
-            </DrawerHeader>
-            <ProfileForm className="px-4" />
-            <DrawerFooter className="pt-2">
-               <DrawerClose asChild>
-                  <Button variant="outline">Cancel</Button>
-               </DrawerClose>
-            </DrawerFooter>
-         </DrawerContent>
-      </Drawer>
-   )
-}
-
-function ProfileForm({ className }: React.ComponentProps<'form'>) {
-   return (
-      <form className={ny('grid items-start gap-4', className)}>
-         <div className="grid gap-2">
-            <Label htmlFor="email">Email</Label>
-            <Input type="email" id="email" defaultValue="nyxb@example.com" />
-         </div>
-         <div className="grid gap-2">
-            <Label htmlFor="username">Username</Label>
-            <Input id="username" defaultValue="~nyxb" />
-         </div>
-         <Button type="submit">Save changes</Button>
-      </form>
-   )
-}
diff --git a/apps/web/registry/default/example/dropdown-menu-checkboxes.tsx b/apps/web/registry/default/example/dropdown-menu-checkboxes.tsx
deleted file mode 100644
index 1bd7af58..00000000
--- a/apps/web/registry/default/example/dropdown-menu-checkboxes.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import type { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   DropdownMenu,
-   DropdownMenuCheckboxItem,
-   DropdownMenuContent,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-
-type Checked = DropdownMenuCheckboxItemProps['checked']
-
-export default function DropdownMenuCheckboxes() {
-   const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
-   const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
-   const [showPanel, setShowPanel] = React.useState<Checked>(false)
-
-   return (
-      <DropdownMenu>
-         <DropdownMenuTrigger asChild>
-            <Button variant="outline">Open</Button>
-         </DropdownMenuTrigger>
-         <DropdownMenuContent className="w-56">
-            <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuCheckboxItem
-               checked={showStatusBar}
-               onCheckedChange={setShowStatusBar}
-            >
-               Status Bar
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuCheckboxItem
-               checked={showActivityBar}
-               onCheckedChange={setShowActivityBar}
-               disabled
-            >
-               Activity Bar
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuCheckboxItem
-               checked={showPanel}
-               onCheckedChange={setShowPanel}
-            >
-               Panel
-            </DropdownMenuCheckboxItem>
-         </DropdownMenuContent>
-      </DropdownMenu>
-   )
-}
diff --git a/apps/web/registry/default/example/dropdown-menu-demo.tsx b/apps/web/registry/default/example/dropdown-menu-demo.tsx
deleted file mode 100644
index 574613ac..00000000
--- a/apps/web/registry/default/example/dropdown-menu-demo.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import {
-   Cloud,
-   CreditCard,
-   Github,
-   Keyboard,
-   LifeBuoy,
-   LogOut,
-   Mail,
-   MessageSquare,
-   Plus,
-   PlusCircle,
-   Settings,
-   User,
-   UserPlus,
-   Users,
-} from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuPortal,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuSub,
-   DropdownMenuSubContent,
-   DropdownMenuSubTrigger,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-
-export default function DropdownMenuDemo() {
-   return (
-      <DropdownMenu>
-         <DropdownMenuTrigger asChild>
-            <Button variant="outline">Open</Button>
-         </DropdownMenuTrigger>
-         <DropdownMenuContent className="w-56">
-            <DropdownMenuLabel>My Account</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-               <DropdownMenuItem>
-                  <User />
-                  <span>Profile</span>
-                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-               </DropdownMenuItem>
-               <DropdownMenuItem>
-                  <CreditCard />
-                  <span>Billing</span>
-                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-               </DropdownMenuItem>
-               <DropdownMenuItem>
-                  <Settings />
-                  <span>Settings</span>
-                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-               </DropdownMenuItem>
-               <DropdownMenuItem>
-                  <Keyboard />
-                  <span>Keyboard shortcuts</span>
-                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
-               </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-               <DropdownMenuItem>
-                  <Users />
-                  <span>Team</span>
-               </DropdownMenuItem>
-               <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>
-                     <UserPlus />
-                     <span>Invite users</span>
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuPortal>
-                     <DropdownMenuSubContent>
-                        <DropdownMenuItem>
-                           <Mail />
-                           <span>Email</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <MessageSquare />
-                           <span>Message</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <PlusCircle />
-                           <span>More...</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuSubContent>
-                  </DropdownMenuPortal>
-               </DropdownMenuSub>
-               <DropdownMenuItem>
-                  <Plus />
-                  <span>New Team</span>
-                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
-               </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-               <Github />
-               <span>GitHub</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-               <LifeBuoy />
-               <span>Support</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem disabled>
-               <Cloud />
-               <span>API</span>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-               <LogOut />
-               <span>Log out</span>
-               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-            </DropdownMenuItem>
-         </DropdownMenuContent>
-      </DropdownMenu>
-   )
-}
diff --git a/apps/web/registry/default/example/dropdown-menu-radio-group.tsx b/apps/web/registry/default/example/dropdown-menu-radio-group.tsx
deleted file mode 100644
index de0cf74b..00000000
--- a/apps/web/registry/default/example/dropdown-menu-radio-group.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuLabel,
-   DropdownMenuRadioGroup,
-   DropdownMenuRadioItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-
-export default function DropdownMenuRadioGroupDemo() {
-   const [position, setPosition] = React.useState('bottom')
-
-   return (
-      <DropdownMenu>
-         <DropdownMenuTrigger asChild>
-            <Button variant="outline">Open</Button>
-         </DropdownMenuTrigger>
-         <DropdownMenuContent className="w-56">
-            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-               <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-               <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-               <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-            </DropdownMenuRadioGroup>
-         </DropdownMenuContent>
-      </DropdownMenu>
-   )
-}
diff --git a/apps/web/registry/default/example/fade-text-demo.tsx b/apps/web/registry/default/example/fade-text-demo.tsx
deleted file mode 100644
index a2529ea8..00000000
--- a/apps/web/registry/default/example/fade-text-demo.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { FadeText } from '~/registry/default/ui/fade-text'
-
-export default async function FadeTextDemo() {
-   return (
-      <div className="flex flex-col space-y-8 text-center">
-         <FadeText
-            className="text-4xl font-bold text-black dark:text-white"
-            direction="up"
-            framerProps={{
-               show: { transition: { delay: 0.2 } },
-            }}
-            text="Fade Up"
-         />
-         <FadeText
-            className="text-4xl font-bold text-black dark:text-white"
-            direction="right"
-            framerProps={{
-               show: { transition: { delay: 0.4 } },
-            }}
-            text="Fade Right"
-         />
-         <FadeText
-            className="text-4xl font-bold text-black dark:text-white"
-            direction="down"
-            framerProps={{
-               show: { transition: { delay: 0.6 } },
-            }}
-            text="Fade Down"
-         />
-         <FadeText
-            className="text-4xl font-bold text-black dark:text-white"
-            direction="left"
-            framerProps={{
-               show: { transition: { delay: 0.8 } },
-            }}
-            text="Fade Left"
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/file-tree-demo.tsx b/apps/web/registry/default/example/file-tree-demo.tsx
deleted file mode 100644
index 885064f7..00000000
--- a/apps/web/registry/default/example/file-tree-demo.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { File, Folder, Tree } from '~/registry/default/ui/file-tree'
-
-export default function FileTreeDemo() {
-   return (
-      <div className="bg-background relative flex h-[300px] w-1/2 flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
-         <Tree
-            className="bg-background overflow-hidden rounded-md p-2"
-            initialSelectedId="7"
-            initialExpandedItems={[
-               '1',
-               '2',
-               '3',
-               '4',
-               '5',
-               '6',
-               '7',
-               '8',
-               '9',
-               '10',
-               '11',
-            ]}
-            elements={ELEMENTS}
-         >
-            <Folder element="src" value="1">
-               <Folder value="2" element="app">
-                  <File value="3">
-                     <p>layout.tsx</p>
-                  </File>
-                  <File value="4">
-                     <p>page.tsx</p>
-                  </File>
-               </Folder>
-               <Folder value="5" element="components">
-                  <Folder value="6" element="ui">
-                     <File value="7">
-                        <p>button.tsx</p>
-                     </File>
-                  </Folder>
-                  <File value="8">
-                     <p>header.tsx</p>
-                  </File>
-                  <File value="9">
-                     <p>footer.tsx</p>
-                  </File>
-               </Folder>
-               <Folder value="10" element="lib">
-                  <File value="11">
-                     <p>utils.ts</p>
-                  </File>
-               </Folder>
-            </Folder>
-         </Tree>
-      </div>
-   )
-}
-
-const ELEMENTS = [
-   {
-      id: '1',
-      isSelectable: true,
-      name: 'src',
-      children: [
-         {
-            id: '2',
-            isSelectable: true,
-            name: 'app',
-            children: [
-               {
-                  id: '3',
-                  isSelectable: true,
-                  name: 'layout.tsx',
-               },
-               {
-                  id: '4',
-                  isSelectable: true,
-                  name: 'page.tsx',
-               },
-            ],
-         },
-         {
-            id: '5',
-            isSelectable: true,
-            name: 'components',
-            children: [
-               {
-                  id: '6',
-                  isSelectable: true,
-                  name: 'header.tsx',
-               },
-               {
-                  id: '7',
-                  isSelectable: true,
-                  name: 'footer.tsx',
-               },
-            ],
-         },
-         {
-            id: '8',
-            isSelectable: true,
-            name: 'lib',
-            children: [
-               {
-                  id: '9',
-                  isSelectable: true,
-                  name: 'utils.ts',
-               },
-            ],
-         },
-      ],
-   },
-]
diff --git a/apps/web/registry/default/example/flickering-grid-demo.tsx b/apps/web/registry/default/example/flickering-grid-demo.tsx
deleted file mode 100644
index 45d5716d..00000000
--- a/apps/web/registry/default/example/flickering-grid-demo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import FlickeringGrid from '~/registry/default/ui/flickering-grid'
-
-export default function FlickeringGridDemo() {
-   return (
-      <div className="bg-background relative h-[500px] w-full overflow-hidden rounded-lg border">
-         <FlickeringGrid
-            className="absolute inset-0 z-0 size-full"
-            squareSize={4}
-            gridGap={6}
-            color="#6B7280"
-            maxOpacity={0.5}
-            flickerChance={0.1}
-            height={800}
-            width={800}
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/flickering-grid-rounded-demo.tsx b/apps/web/registry/default/example/flickering-grid-rounded-demo.tsx
deleted file mode 100644
index 2a4f473a..00000000
--- a/apps/web/registry/default/example/flickering-grid-rounded-demo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import FlickeringGrid from '~/registry/default/ui/flickering-grid'
-
-export default function FlickeringGridRoundedDemo() {
-   return (
-      <div className="bg-background relative size-[600px] w-full overflow-hidden rounded-lg border">
-         <FlickeringGrid
-            className="absolute inset-0 z-0 [mask:radial-gradient(circle_at_center,#fff_300px,transparent_0)]"
-            squareSize={4}
-            gridGap={6}
-            color="#60A5FA"
-            maxOpacity={0.5}
-            flickerChance={0.1}
-            height={800}
-            width={800}
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/flip-text-demo.tsx b/apps/web/registry/default/example/flip-text-demo.tsx
deleted file mode 100644
index c8aa49c6..00000000
--- a/apps/web/registry/default/example/flip-text-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import FlipText from '~/registry/default/ui/flip-text'
-
-export default async function FlipTextDemo() {
-   return (
-      <FlipText
-         className="text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
-         word="Flip Text"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/gauge-circle-demo.tsx b/apps/web/registry/default/example/gauge-circle-demo.tsx
deleted file mode 100644
index d524ea41..00000000
--- a/apps/web/registry/default/example/gauge-circle-demo.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import GaugeCircle from '~/registry/default/ui/gauge-circle'
-
-export default function GaugeCircleDemo() {
-   const [value, setValue] = useState(0)
-
-   useEffect(() => {
-      const handleIncrement = (prev: number) => {
-         if (prev === 100)
-            return 0
-
-         return prev + 10
-      }
-      setValue(handleIncrement)
-      const interval = setInterval(() => setValue(handleIncrement), 2000)
-      return () => clearInterval(interval)
-   }, [])
-
-   return (
-      <GaugeCircle
-         max={100}
-         min={0}
-         value={value}
-         gaugePrimaryColor="rgb(79 70 229)"
-         gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/globe-demo.tsx b/apps/web/registry/default/example/globe-demo.tsx
deleted file mode 100644
index 4bd64e01..00000000
--- a/apps/web/registry/default/example/globe-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Globe from '~/registry/default/ui/globe'
-
-export default function GlobeDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-40 pb-40 pt-8 md:pb-60 md:shadow-xl">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Globe
-         </span>
-         <Globe className="top-28" />
-         <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/globe-grid-demo.tsx b/apps/web/registry/default/example/globe-grid-demo.tsx
deleted file mode 100644
index 9324d12a..00000000
--- a/apps/web/registry/default/example/globe-grid-demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { GlobeGrid } from '~/registry/miami/ui/globe-grid'
-
-export function GlobeGridDemo() {
-   return (
-      <GlobeGrid />
-   )
-}
-
-export default GlobeGridDemo
diff --git a/apps/web/registry/default/example/globe-grid-full-demo.tsx b/apps/web/registry/default/example/globe-grid-full-demo.tsx
deleted file mode 100644
index 39f9c0b3..00000000
--- a/apps/web/registry/default/example/globe-grid-full-demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { GlobeGrid } from '~/registry/default/ui/globe-grid'
-
-export function GlobeGridDemo() {
-   return (
-      <GlobeGrid fullGlobe />
-   )
-}
-
-export default GlobeGridDemo
diff --git a/apps/web/registry/default/example/gradual-spacing-demo.tsx b/apps/web/registry/default/example/gradual-spacing-demo.tsx
deleted file mode 100644
index bd117549..00000000
--- a/apps/web/registry/default/example/gradual-spacing-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import GradualSpacing from '~/registry/default/ui/gradual-spacing'
-
-export default async function GradualSpacingDemo() {
-   return (
-      <GradualSpacing
-         className="font-display text-center text-4xl font-bold -tracking-widest  text-black md:text-7xl md:leading-[5rem] dark:text-white"
-         text="Gradual Spacing"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/grid-layout-columns-demo.tsx b/apps/web/registry/default/example/grid-layout-columns-demo.tsx
deleted file mode 100644
index 7e1cec02..00000000
--- a/apps/web/registry/default/example/grid-layout-columns-demo.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client'
-
-import GridLayout from '~/registry/default/ui/grid-layout'
-
-export default function GridLayoutColumnsDemo() {
-   return (
-      <div className="space-y-8">
-         <GridLayout
-            columns={8}
-            className="min-h-[150px] p-4"
-            crosshairs={{
-               topLeft: true,
-               bottomRight: true,
-            }}
-         >
-            <div className="flex h-full items-center justify-center">
-               <div className="text-center">
-                  <h3 className="text-xl font-medium">8 Columns</h3>
-                  <p className="text-muted-foreground mt-1">Compact layouts</p>
-               </div>
-            </div>
-         </GridLayout>
-
-         <GridLayout
-            columns={12}
-            className="min-h-[150px] p-4"
-            crosshairs={{
-               topLeft: true,
-               bottomRight: true,
-            }}
-         >
-            <div className="flex h-full items-center justify-center">
-               <div className="text-center">
-                  <h3 className="text-xl font-medium">12 Columns</h3>
-                  <p className="text-muted-foreground mt-1">Traditional grid</p>
-               </div>
-            </div>
-         </GridLayout>
-
-         <GridLayout
-            columns={16}
-            className="min-h-[150px] p-4"
-            crosshairs={{
-               topLeft: true,
-               bottomRight: true,
-            }}
-         >
-            <div className="flex h-full items-center justify-center">
-               <div className="text-center">
-                  <h3 className="text-xl font-medium">16 Columns</h3>
-                  <p className="text-muted-foreground mt-1">Fine-grained control</p>
-               </div>
-            </div>
-         </GridLayout>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/grid-layout-crosshairs-demo.tsx b/apps/web/registry/default/example/grid-layout-crosshairs-demo.tsx
deleted file mode 100644
index 66312ae4..00000000
--- a/apps/web/registry/default/example/grid-layout-crosshairs-demo.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client'
-
-import GridLayout from '~/registry/default/ui/grid-layout'
-
-export default function GridLayoutCrosshairsDemo() {
-   return (
-      <GridLayout
-         crosshairs={{
-            topLeft: true,
-            topRight: true,
-            bottomLeft: true,
-            bottomRight: true,
-         }}
-         lineVariant="none"
-         className="min-h-[350px] p-6"
-      >
-         <div className="flex h-full flex-col items-center justify-center space-y-4">
-            <div className="text-center">
-               <h3 className="text-2xl font-medium">Corner Markers</h3>
-               <p className="text-muted-foreground mt-2">
-                  Use crosshairs to highlight key areas or create visual anchors
-               </p>
-            </div>
-            <div className="grid w-full max-w-xl grid-cols-2 gap-8 pt-8">
-               <div className="bg-card rounded-lg border p-4 text-center">Top Left</div>
-               <div className="bg-card rounded-lg border p-4 text-center">Top Right</div>
-               <div className="bg-card rounded-lg border p-4 text-center">Bottom Left</div>
-               <div className="bg-card rounded-lg border p-4 text-center">Bottom Right</div>
-            </div>
-         </div>
-      </GridLayout>
-   )
-}
diff --git a/apps/web/registry/default/example/grid-layout-demo.tsx b/apps/web/registry/default/example/grid-layout-demo.tsx
deleted file mode 100644
index f6c8b4ee..00000000
--- a/apps/web/registry/default/example/grid-layout-demo.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import GridLayout from '~/registry/default/ui/grid-layout'
-
-export default function GridLayoutDemo() {
-   return (
-      <GridLayout
-         crosshairs={{
-            topLeft: true,
-            bottomRight: true,
-         }}
-         lineVariant="center"
-         className="min-h-[350px] p-8"
-      >
-         <div className="space-y-8">
-            <div>
-               <h2 className="text-4xl font-medium tracking-tight">
-                  Ready to deploy?
-                  {' '}
-                  <span className="text-muted-foreground">
-                     Start building with a free account.
-                  </span>
-               </h2>
-               <p className="text-muted-foreground mt-4 text-xl">
-                  Speak to an expert for your
-                  {' '}
-                  <span className="text-blue-500">Pro</span>
-                  {' '}
-                  or
-                  {' '}
-                  <span className="text-purple-500">Enterprise</span>
-                  {' '}
-                  needs.
-               </p>
-            </div>
-            <div className="flex gap-4">
-               <Button variant="default" size="lg">
-                  Start Deploying
-               </Button>
-               <Button variant="outline" size="lg">
-                  Contact Sales
-               </Button>
-            </div>
-         </div>
-      </GridLayout>
-   )
-}
diff --git a/apps/web/registry/default/example/grid-layout-variants-demo.tsx b/apps/web/registry/default/example/grid-layout-variants-demo.tsx
deleted file mode 100644
index 17b9a23f..00000000
--- a/apps/web/registry/default/example/grid-layout-variants-demo.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client'
-
-import GridLayout from '~/registry/default/ui/grid-layout'
-
-export default function GridLayoutVariantsDemo() {
-   return (
-      <div className="space-y-8">
-         <GridLayout
-            lineVariant="center"
-            className="min-h-[150px]"
-            crosshairs={{
-               topLeft: true,
-               bottomRight: true,
-            }}
-         >
-            <div className="flex h-full items-center justify-center">
-               <div className="text-center">
-                  <h3 className="text-xl font-medium">Center Line</h3>
-                  <p className="text-muted-foreground mt-1">Minimal and focused</p>
-               </div>
-            </div>
-         </GridLayout>
-
-         <GridLayout
-            lineVariant="vertical"
-            className="min-h-[150px]"
-            crosshairs={{
-               topLeft: true,
-               bottomRight: true,
-            }}
-         >
-            <div className="flex h-full items-center justify-center">
-               <div className="text-center">
-                  <h3 className="text-xl font-medium">Vertical Lines</h3>
-                  <p className="text-muted-foreground mt-1">Column-focused layout</p>
-               </div>
-            </div>
-         </GridLayout>
-
-         <GridLayout
-            lineVariant="horizontal"
-            className="min-h-[150px]"
-            crosshairs={{
-               topLeft: true,
-               bottomRight: true,
-            }}
-         >
-            <div className="flex h-full items-center justify-center">
-               <div className="text-center">
-                  <h3 className="text-xl font-medium">Horizontal Lines</h3>
-                  <p className="text-muted-foreground mt-1">Row-based organization</p>
-               </div>
-            </div>
-         </GridLayout>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/grid-pattern-dashed.tsx b/apps/web/registry/default/example/grid-pattern-dashed.tsx
deleted file mode 100644
index 752f0a8b..00000000
--- a/apps/web/registry/default/example/grid-pattern-dashed.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { ny } from '~/lib/utils'
-import GridPattern from '~/registry/default/ui/grid-pattern'
-
-function GridPatternDashed() {
-   return (
-      <div className="bg-background relative flex size-full items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Grid Pattern
-         </p>
-         <GridPattern
-            width={30}
-            height={30}
-            x={-1}
-            y={-1}
-            strokeDasharray="4 2"
-            className={ny(
-               '[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]',
-            )}
-         />
-      </div>
-   )
-}
-
-export default GridPatternDashed
diff --git a/apps/web/registry/default/example/grid-pattern-demo.tsx b/apps/web/registry/default/example/grid-pattern-demo.tsx
deleted file mode 100644
index 5d92c972..00000000
--- a/apps/web/registry/default/example/grid-pattern-demo.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client'
-
-import { ny } from '~/lib/utils'
-import GridPattern from '~/registry/default/ui/grid-pattern'
-
-function GridPatternDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl ">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Grid Pattern
-         </p>
-         <GridPattern
-            squares={[
-               [4, 4],
-               [5, 1],
-               [8, 2],
-               [6, 6],
-               [10, 5],
-               [13, 3],
-            ]}
-            className={ny(
-               '[mask-image:radial-gradient(200px_circle_at_center,white,transparent)]',
-               'inset-x-0 inset-y-[-30%] h-[200%] skew-y-12',
-            )}
-         />
-      </div>
-   )
-}
-
-export default GridPatternDemo
diff --git a/apps/web/registry/default/example/grid-pattern-linear-gradient.tsx b/apps/web/registry/default/example/grid-pattern-linear-gradient.tsx
deleted file mode 100644
index 182d70bc..00000000
--- a/apps/web/registry/default/example/grid-pattern-linear-gradient.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { ny } from '~/lib/utils'
-import GridPattern from '~/registry/default/ui/grid-pattern'
-
-function GridPatternLinearGradient() {
-   return (
-      <div className="bg-background relative flex size-full items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Grid Pattern
-         </p>
-         <GridPattern
-            width={20}
-            height={20}
-            x={-1}
-            y={-1}
-            className={ny(
-               '[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ',
-            )}
-         />
-      </div>
-   )
-}
-
-export default GridPatternLinearGradient
diff --git a/apps/web/registry/default/example/hero-video-demo.tsx b/apps/web/registry/default/example/hero-video-demo.tsx
deleted file mode 100644
index 4c3f72bd..00000000
--- a/apps/web/registry/default/example/hero-video-demo.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from '~/components/ui/button'
-import HeroVideo, { HeroVideoAction } from '~/registry/default/ui/hero-video'
-import { MagicCard, MagicContainer } from '~/registry/default/ui/magic-card'
-
-function PlayButton() {
-   return (
-      <svg
-         xmlns="http://www.w3.org/2000/svg"
-         viewBox="0 0 24 24"
-         fill="currentColor"
-         className="dark:text-white"
-      >
-         <path
-            fillRule="evenodd"
-            d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
-            clipRule="evenodd"
-         />
-      </svg>
-   )
-}
-
-export default function HeroVideoDemo() {
-   return (
-      <div className="bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Hero Video
-         </span>
-
-         <MagicContainer>
-            <MagicCard className="min-h-[400px] [mask:linear-gradient(0deg,transparent_40%,#fff_100%)]">
-               <HeroVideo
-                  title="Nyxb UI Demo"
-                  image="https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200"
-               >
-                  <HeroVideoAction>
-                     <Button className="size-20 rounded-full" variant="outline">
-                        <PlayButton />
-                     </Button>
-                  </HeroVideoAction>
-                  <video
-                     autoPlay
-                     className="rounded-xl dark:border"
-                     playsInline
-                     src="https://cdn.nyxbui.design/globe.mp4"
-                  />
-               </HeroVideo>
-            </MagicCard>
-         </MagicContainer>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx b/apps/web/registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx
deleted file mode 100644
index bcd4c55f..00000000
--- a/apps/web/registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import HeroVideoDialog from '~/registry/default/ui/hero-video-dialog'
-
-export default function HeroVideoDialogDemoTopInBottomOut() {
-   return (
-      <div className="relative">
-         <HeroVideoDialog
-            className="block dark:hidden"
-            animationStyle="top-in-bottom-out"
-            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
-            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-light.png"
-            thumbnailAlt="Hero Video"
-         />
-         <HeroVideoDialog
-            className="hidden dark:block"
-            animationStyle="top-in-bottom-out"
-            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
-            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-dark.png"
-            thumbnailAlt="Hero Video"
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/hero-video-dialog-demo.tsx b/apps/web/registry/default/example/hero-video-dialog-demo.tsx
deleted file mode 100644
index ab81335c..00000000
--- a/apps/web/registry/default/example/hero-video-dialog-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import HeroVideoDialog from '~/registry/default/ui/hero-video-dialog'
-
-export default function HeroVideoDialogDemo() {
-   return (
-      <div className="relative">
-         <HeroVideoDialog
-            className="block dark:hidden"
-            animationStyle="from-center"
-            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
-            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-light.png"
-            thumbnailAlt="Hero Video"
-         />
-         <HeroVideoDialog
-            className="hidden dark:block"
-            animationStyle="from-center"
-            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
-            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-dark.png"
-            thumbnailAlt="Hero Video"
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/hero-video-youtube.tsx b/apps/web/registry/default/example/hero-video-youtube.tsx
deleted file mode 100644
index b48c8865..00000000
--- a/apps/web/registry/default/example/hero-video-youtube.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Button } from '~/components/ui/button'
-import HeroVideo, { HeroVideoAction } from '~/registry/default/ui/hero-video'
-import { MagicCard, MagicContainer } from '~/registry/default/ui/magic-card'
-
-function PlayButton() {
-   return (
-      <svg
-         xmlns="http://www.w3.org/2000/svg"
-         viewBox="0 0 24 24"
-         fill="currentColor"
-         className="dark:text-white"
-      >
-         <path
-            fillRule="evenodd"
-            d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
-            clipRule="evenodd"
-         />
-      </svg>
-   )
-}
-
-export default function HeroVideoDemo() {
-   return (
-      <div className="bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Never gonna give you up
-         </span>
-         {/* Magic Card  */}
-         <MagicContainer className="relative">
-            <MagicCard className="min-h-[400px] [mask:linear-gradient(0deg,transparent_20%,#fff_100%)]">
-               <HeroVideo
-                  title="Never gonna give you up"
-                  image="https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024"
-               >
-                  <HeroVideoAction>
-                     <Button className="size-20 rounded-full" variant="outline">
-                        <PlayButton />
-                     </Button>
-                  </HeroVideoAction>
-                  <iframe
-                     height="500"
-                     className="h-[500px] rounded-xl border"
-                     src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=FmFbhzaToJQ9iXN4"
-                     title="YouTube video player"
-                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  />
-               </HeroVideo>
-            </MagicCard>
-         </MagicContainer>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/hover-card-demo.tsx b/apps/web/registry/default/example/hover-card-demo.tsx
deleted file mode 100644
index f5323090..00000000
--- a/apps/web/registry/default/example/hover-card-demo.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { CalendarDays } from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/default/ui/avatar'
-import { Button } from '~/registry/default/ui/button'
-import {
-   HoverCard,
-   HoverCardContent,
-   HoverCardTrigger,
-} from '~/registry/default/ui/hover-card'
-
-export default function HoverCardDemo() {
-   return (
-      <HoverCard>
-         <HoverCardTrigger asChild>
-            <Button variant="link">@nextjs</Button>
-         </HoverCardTrigger>
-         <HoverCardContent className="w-80">
-            <div className="flex justify-between space-x-4">
-               <Avatar>
-                  <AvatarImage src="https://github.com/vercel.png" />
-                  <AvatarFallback>VC</AvatarFallback>
-               </Avatar>
-               <div className="space-y-1">
-                  <h4 className="text-sm font-semibold">@nextjs</h4>
-                  <p className="text-sm">
-                     The React Framework – created and maintained by @vercel.
-                  </p>
-                  <div className="flex items-center pt-2">
-                     <CalendarDays className="mr-2 size-4 opacity-70" />
-                     {' '}
-                     <span className="text-muted-foreground text-xs">
-                        Joined December 2021
-                     </span>
-                  </div>
-               </div>
-            </div>
-         </HoverCardContent>
-      </HoverCard>
-   )
-}
diff --git a/apps/web/registry/default/example/hyper-text-demo.tsx b/apps/web/registry/default/example/hyper-text-demo.tsx
deleted file mode 100644
index f0678e30..00000000
--- a/apps/web/registry/default/example/hyper-text-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import HyperText from '~/registry/default/ui/hyper-text'
-
-export default function HyperTextDemo() {
-   return (
-      <HyperText
-         className="text-4xl font-bold text-black dark:text-white"
-         text="Hyper Text"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/icon-cloud-demo.tsx b/apps/web/registry/default/example/icon-cloud-demo.tsx
deleted file mode 100644
index 52e88f23..00000000
--- a/apps/web/registry/default/example/icon-cloud-demo.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import IconCloud from '~/registry/default/ui/icon-cloud'
-
-const slugs = [
-   'typescript',
-   'javascript',
-   'dart',
-   'java',
-   'react',
-   'flutter',
-   'android',
-   'html5',
-   'css3',
-   'nodedotjs',
-   'express',
-   'nextdotjs',
-   'prisma',
-   'amazonaws',
-   'postgresql',
-   'firebase',
-   'nginx',
-   'vercel',
-   'testinglibrary',
-   'jest',
-   'cypress',
-   'docker',
-   'git',
-   'jira',
-   'github',
-   'gitlab',
-   'visualstudiocode',
-   'androidstudio',
-   'sonarqube',
-   'figma',
-]
-
-export default function IconCloudDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-20 pb-20 pt-8 ">
-         <IconCloud iconSlugs={slugs} />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/input-demo.tsx b/apps/web/registry/default/example/input-demo.tsx
deleted file mode 100644
index 477fe397..00000000
--- a/apps/web/registry/default/example/input-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Input } from '~/registry/default/ui/input'
-
-export default function InputDemo() {
-   return <Input type="email" placeholder="Email" />
-}
diff --git a/apps/web/registry/default/example/input-disabled.tsx b/apps/web/registry/default/example/input-disabled.tsx
deleted file mode 100644
index 63c9398e..00000000
--- a/apps/web/registry/default/example/input-disabled.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Input } from '~/registry/default/ui/input'
-
-export default function InputDisabled() {
-   return <Input disabled type="email" placeholder="Email" />
-}
diff --git a/apps/web/registry/default/example/input-file.tsx b/apps/web/registry/default/example/input-file.tsx
deleted file mode 100644
index 368a352b..00000000
--- a/apps/web/registry/default/example/input-file.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export default function InputFile() {
-   return (
-      <div className="grid w-full max-w-sm items-center gap-1.5">
-         <Label htmlFor="picture">Picture</Label>
-         <Input id="picture" type="file" />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/input-form.tsx b/apps/web/registry/default/example/input-form.tsx
deleted file mode 100644
index 2c6364b2..00000000
--- a/apps/web/registry/default/example/input-form.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import { Input } from '~/registry/default/ui/input'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const FormSchema = z.object({
-   username: z.string().min(2, {
-      message: 'Username must be at least 2 characters.',
-   }),
-})
-
-export default function InputForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-      defaultValues: {
-         username: '',
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="username"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Username</FormLabel>
-                     <FormControl>
-                        <Input placeholder="nyxb" {...field} />
-                     </FormControl>
-                     <FormDescription>
-                        This is your public display name.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/input-otp-controlled.tsx b/apps/web/registry/default/example/input-otp-controlled.tsx
deleted file mode 100644
index d645042f..00000000
--- a/apps/web/registry/default/example/input-otp-controlled.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSlot,
-} from '~/registry/default/ui/input-otp'
-
-export default function InputOTPControlled() {
-   const [value, setValue] = React.useState('')
-
-   return (
-      <div className="space-y-2">
-         <InputOTP
-            maxLength={6}
-            value={value}
-            onChange={value => setValue(value)}
-         >
-            <InputOTPGroup>
-               <InputOTPSlot index={0} />
-               <InputOTPSlot index={1} />
-               <InputOTPSlot index={2} />
-               <InputOTPSlot index={3} />
-               <InputOTPSlot index={4} />
-               <InputOTPSlot index={5} />
-            </InputOTPGroup>
-         </InputOTP>
-         <div className="text-center text-sm">
-            {value === ''
-               ? (
-                     <>Enter your one-time password.</>
-                  )
-               : (
-                     <>
-                        You entered:
-                        {value}
-                     </>
-                  )}
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/input-otp-demo.tsx b/apps/web/registry/default/example/input-otp-demo.tsx
deleted file mode 100644
index 8c9b9cef..00000000
--- a/apps/web/registry/default/example/input-otp-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSeparator,
-   InputOTPSlot,
-} from '~/registry/default/ui/input-otp'
-
-export default function InputOTPDemo() {
-   return (
-      <InputOTP maxLength={6}>
-         <InputOTPGroup>
-            <InputOTPSlot index={0} />
-            <InputOTPSlot index={1} />
-            <InputOTPSlot index={2} />
-         </InputOTPGroup>
-         <InputOTPSeparator />
-         <InputOTPGroup>
-            <InputOTPSlot index={3} />
-            <InputOTPSlot index={4} />
-            <InputOTPSlot index={5} />
-         </InputOTPGroup>
-      </InputOTP>
-   )
-}
diff --git a/apps/web/registry/default/example/input-otp-disabled.tsx b/apps/web/registry/default/example/input-otp-disabled.tsx
deleted file mode 100644
index 35c5c58e..00000000
--- a/apps/web/registry/default/example/input-otp-disabled.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSeparator,
-   InputOTPSlot,
-} from '~/registry/default/ui/input-otp'
-
-export default function InputOTPDemo() {
-   return (
-      <InputOTP maxLength={6} disabled>
-         <InputOTPGroup>
-            <InputOTPSlot index={0} />
-            <InputOTPSlot index={1} />
-            <InputOTPSlot index={2} />
-         </InputOTPGroup>
-         <InputOTPSeparator />
-         <InputOTPGroup>
-            <InputOTPSlot index={3} />
-            <InputOTPSlot index={4} />
-            <InputOTPSlot index={5} />
-         </InputOTPGroup>
-      </InputOTP>
-   )
-}
diff --git a/apps/web/registry/default/example/input-otp-form.tsx b/apps/web/registry/default/example/input-otp-form.tsx
deleted file mode 100644
index 51d9ceff..00000000
--- a/apps/web/registry/default/example/input-otp-form.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSlot,
-} from '~/registry/default/ui/input-otp'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const FormSchema = z.object({
-   pin: z.string().min(6, {
-      message: 'Your one-time password must be 6 characters.',
-   }),
-})
-
-export default function InputOTPForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-      defaultValues: {
-         pin: '',
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="pin"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>One-Time Password</FormLabel>
-                     <FormControl>
-                        <InputOTP maxLength={6} {...field}>
-                           <InputOTPGroup>
-                              <InputOTPSlot index={0} />
-                              <InputOTPSlot index={1} />
-                              <InputOTPSlot index={2} />
-                              <InputOTPSlot index={3} />
-                              <InputOTPSlot index={4} />
-                              <InputOTPSlot index={5} />
-                           </InputOTPGroup>
-                        </InputOTP>
-                     </FormControl>
-                     <FormDescription>
-                        Please enter the one-time password sent to your phone.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/input-otp-pattern.tsx b/apps/web/registry/default/example/input-otp-pattern.tsx
deleted file mode 100644
index ecf3f515..00000000
--- a/apps/web/registry/default/example/input-otp-pattern.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'
-
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSlot,
-} from '~/registry/default/ui/input-otp'
-
-export default function InputOTPPattern() {
-   return (
-      <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS} inputMode="text" spellCheck="false">
-         <InputOTPGroup>
-            <InputOTPSlot index={0} />
-            <InputOTPSlot index={1} />
-            <InputOTPSlot index={2} />
-            <InputOTPSlot index={3} />
-            <InputOTPSlot index={4} />
-            <InputOTPSlot index={5} />
-         </InputOTPGroup>
-      </InputOTP>
-   )
-}
diff --git a/apps/web/registry/default/example/input-otp-separator.tsx b/apps/web/registry/default/example/input-otp-separator.tsx
deleted file mode 100644
index ac87a83f..00000000
--- a/apps/web/registry/default/example/input-otp-separator.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSeparator,
-   InputOTPSlot,
-} from '~/registry/default/ui/input-otp'
-
-export default function InputOTPWithSeparator() {
-   return (
-      <InputOTP maxLength={6}>
-         <InputOTPGroup>
-            <InputOTPSlot index={0} />
-            <InputOTPSlot index={1} />
-         </InputOTPGroup>
-         <InputOTPSeparator />
-         <InputOTPGroup>
-            <InputOTPSlot index={2} />
-            <InputOTPSlot index={3} />
-         </InputOTPGroup>
-         <InputOTPSeparator />
-         <InputOTPGroup>
-            <InputOTPSlot index={4} />
-            <InputOTPSlot index={5} />
-         </InputOTPGroup>
-      </InputOTP>
-   )
-}
diff --git a/apps/web/registry/default/example/input-phone-default.tsx b/apps/web/registry/default/example/input-phone-default.tsx
deleted file mode 100644
index d0954944..00000000
--- a/apps/web/registry/default/example/input-phone-default.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react'
-
-import { InputPhone } from '~/registry/default/ui/input-phone'
-
-export default function InputPhoneDefault() {
-   const [value, setValue] = React.useState('')
-
-   return <InputPhone value={value} onChange={setValue} defaultCountry="US" />
-}
diff --git a/apps/web/registry/default/example/input-phone-demo.tsx b/apps/web/registry/default/example/input-phone-demo.tsx
deleted file mode 100644
index a1c67b75..00000000
--- a/apps/web/registry/default/example/input-phone-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-
-import { InputPhone } from '~/registry/default/ui/input-phone'
-
-export default function InputPhoneDemo() {
-   const [value, setValue] = React.useState('')
-
-   return (
-      <InputPhone
-         value={value}
-         onChange={setValue}
-         placeholder="Enter a phone number"
-         defaultCountry="US"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/input-phone-form.tsx b/apps/web/registry/default/example/input-phone-form.tsx
deleted file mode 100644
index f8be87c3..00000000
--- a/apps/web/registry/default/example/input-phone-form.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { isValidPhoneNumber } from 'react-phone-number-input'
-import { z } from 'zod'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import { InputPhone } from '~/registry/default/ui/input-phone'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const FormSchema = z.object({
-   phone: z
-      .string()
-      .refine(isValidPhoneNumber, { message: 'Invalid phone number' }),
-})
-
-export default function InputPhoneForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-      defaultValues: {
-         phone: '',
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="phone"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Phone Number</FormLabel>
-                     <FormControl>
-                        <InputPhone placeholder="Enter a phone number" {...field} />
-                     </FormControl>
-                     <FormDescription>
-                        Please enter a valid phone number.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/input-phone-initial.tsx b/apps/web/registry/default/example/input-phone-initial.tsx
deleted file mode 100644
index fc1a7625..00000000
--- a/apps/web/registry/default/example/input-phone-initial.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react'
-
-import { InputPhone } from '~/registry/default/ui/input-phone'
-
-export default function InputPhoneInitial() {
-   const [value, setValue] = React.useState('')
-
-   return (
-      <InputPhone
-         value={value}
-         onChange={setValue}
-         initialValueFormat="national"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/input-phone-international.tsx b/apps/web/registry/default/example/input-phone-international.tsx
deleted file mode 100644
index 0b510005..00000000
--- a/apps/web/registry/default/example/input-phone-international.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-
-import { InputPhone } from '~/registry/default/ui/input-phone'
-
-export default function InputPhoneInternational() {
-   const [value, setValue] = React.useState('')
-
-   return (
-      <InputPhone
-         value={value}
-         onChange={setValue}
-         international
-         defaultCountry="US"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/input-phone-national.tsx b/apps/web/registry/default/example/input-phone-national.tsx
deleted file mode 100644
index 1b60960d..00000000
--- a/apps/web/registry/default/example/input-phone-national.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-
-import { InputPhone } from '~/registry/default/ui/input-phone'
-
-export default function InputPhoneNational() {
-   const [value, setValue] = React.useState('')
-
-   return (
-      <InputPhone
-         value={value}
-         onChange={setValue}
-         international={false}
-         defaultCountry="US"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/input-with-button.tsx b/apps/web/registry/default/example/input-with-button.tsx
deleted file mode 100644
index 18db9a38..00000000
--- a/apps/web/registry/default/example/input-with-button.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import { Input } from '~/registry/default/ui/input'
-
-export default function InputWithButton() {
-   return (
-      <div className="flex w-full max-w-sm items-center space-x-2">
-         <Input type="email" placeholder="Email" />
-         <Button type="submit">Subscribe</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/input-with-label.tsx b/apps/web/registry/default/example/input-with-label.tsx
deleted file mode 100644
index 234113ba..00000000
--- a/apps/web/registry/default/example/input-with-label.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export default function InputWithLabel() {
-   return (
-      <div className="grid w-full max-w-sm items-center gap-1.5">
-         <Label htmlFor="email">Email</Label>
-         <Input type="email" id="email" placeholder="Email" />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/input-with-text.tsx b/apps/web/registry/default/example/input-with-text.tsx
deleted file mode 100644
index 1b0618d0..00000000
--- a/apps/web/registry/default/example/input-with-text.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-
-export default function InputWithText() {
-   return (
-      <div className="grid w-full max-w-sm items-center gap-1.5">
-         <Label htmlFor="email-2">Email</Label>
-         <Input type="email" id="email-2" placeholder="Email" />
-         <p className="text-muted-foreground text-sm">Enter your email address.</p>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/iphone-15-pro-demo-2.tsx b/apps/web/registry/default/example/iphone-15-pro-demo-2.tsx
deleted file mode 100644
index 3816d63a..00000000
--- a/apps/web/registry/default/example/iphone-15-pro-demo-2.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Iphone15Pro from '~/registry/default/ui/iphone-15-pro'
-
-export default function Iphone15ProDemo() {
-   return (
-      <div className="relative">
-         <Iphone15Pro
-            className="size-full"
-            src="https://via.placeholder.com/430x880"
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/iphone-15-pro-demo.tsx b/apps/web/registry/default/example/iphone-15-pro-demo.tsx
deleted file mode 100644
index c1d84522..00000000
--- a/apps/web/registry/default/example/iphone-15-pro-demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Iphone15Pro from '~/registry/default/ui/iphone-15-pro'
-
-export default function Iphone15ProDemo() {
-   return (
-      <div className="relative">
-         <Iphone15Pro className="size-full" />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/label-demo.tsx b/apps/web/registry/default/example/label-demo.tsx
deleted file mode 100644
index d7ee04b2..00000000
--- a/apps/web/registry/default/example/label-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Checkbox } from '~/registry/default/ui/checkbox'
-import { Label } from '~/registry/default/ui/label'
-
-export default function LabelDemo() {
-   return (
-      <div>
-         <div className="flex items-center space-x-2">
-            <Checkbox id="terms" />
-            <Label htmlFor="terms">Accept terms and conditions</Label>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/letter-pullup-demo.tsx b/apps/web/registry/default/example/letter-pullup-demo.tsx
deleted file mode 100644
index 2d8c67b1..00000000
--- a/apps/web/registry/default/example/letter-pullup-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import LetterPullup from '~/registry/default/ui/letter-pullup'
-
-export default async function LetterPullupDemo() {
-   return <LetterPullup words="Staggered Letter Pull Up" delay={0.05} />
-}
diff --git a/apps/web/registry/default/example/magic-card-demo.tsx b/apps/web/registry/default/example/magic-card-demo.tsx
deleted file mode 100644
index 37efc8a4..00000000
--- a/apps/web/registry/default/example/magic-card-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { MagicCard, MagicContainer } from '~/registry/default/ui/magic-card'
-
-export default function MagicCardDemo() {
-   return (
-      <MagicContainer className="flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row">
-         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
-            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
-               Magic
-            </p>
-            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
-         </MagicCard>
-         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
-            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
-               Card
-            </p>
-            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
-         </MagicCard>
-         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
-            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
-               Demo
-            </p>
-            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
-         </MagicCard>
-      </MagicContainer>
-   )
-}
diff --git a/apps/web/registry/default/example/magic-card-gradient.tsx b/apps/web/registry/default/example/magic-card-gradient.tsx
deleted file mode 100644
index 1b30f1a9..00000000
--- a/apps/web/registry/default/example/magic-card-gradient.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { MagicCard, MagicContainer } from '~/registry/default/ui/magic-card'
-
-export default function MagicCardGradient() {
-   return (
-      <MagicContainer className="flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row">
-         <MagicCard
-            borderWidth={3}
-            className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl"
-         >
-            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
-               Magic
-            </p>
-            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
-         </MagicCard>
-         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl">
-            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
-               Card
-            </p>
-            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
-         </MagicCard>
-         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl">
-            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
-               Demo
-            </p>
-            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
-         </MagicCard>
-      </MagicContainer>
-   )
-}
diff --git a/apps/web/registry/default/example/marquee-3d.tsx b/apps/web/registry/default/example/marquee-3d.tsx
deleted file mode 100644
index 2af8e2e7..00000000
--- a/apps/web/registry/default/example/marquee-3d.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import Marquee from '~/registry/default/ui/marquee'
-
-const logos = [
-   {
-      name: 'Microsoft',
-      img: 'https://picsum.photos/id/1/200/300',
-   },
-   {
-      name: 'Apple',
-      img: 'https://picsum.photos/id/2/200/300',
-   },
-   {
-      name: 'Google',
-      img: 'https://picsum.photos/id/3/200/300',
-   },
-   {
-      name: 'Facebook',
-      img: 'https://picsum.photos/id/4/200/300',
-   },
-   {
-      name: 'LinkedIn',
-      img: 'https://picsum.photos/id/5/200/300',
-   },
-   {
-      name: 'Twitter',
-      img: 'https://picsum.photos/id/6/200/300',
-   },
-]
-
-function Marquee3D() {
-   return (
-      <div className="bg-background relative flex h-full w-96 flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border px-20 md:shadow-xl">
-         <div className="flex flex-row gap-4 [perspective:300px]">
-            <Marquee
-               className="h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]"
-               vertical
-               style={{
-                  transform:
-              'translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)',
-               }}
-            >
-               {logos.map((data, idx) => (
-                  <img
-                     key={idx}
-                     src={data.img}
-                     alt={data.name}
-                     className="mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300"
-                  />
-               ))}
-            </Marquee>
-         </div>
-
-         <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
-         <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
-      </div>
-   )
-}
-
-export default Marquee3D
diff --git a/apps/web/registry/default/example/marquee-demo-vertical.tsx b/apps/web/registry/default/example/marquee-demo-vertical.tsx
deleted file mode 100644
index 4112d772..00000000
--- a/apps/web/registry/default/example/marquee-demo-vertical.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { ny } from '~/lib/utils'
-import Marquee from '~/registry/default/ui/marquee'
-
-const reviews = [
-   {
-      name: 'Jack',
-      username: '@jack',
-      body: 'I\'ve never seen anything like this before. It\'s amazing. I love it.',
-      img: 'https://avatar.vercel.sh/jack',
-   },
-   {
-      name: 'Jill',
-      username: '@jill',
-      body: 'I don\'t know what to say. I\'m speechless. This is amazing.',
-      img: 'https://avatar.vercel.sh/jill',
-   },
-   {
-      name: 'John',
-      username: '@john',
-      body: 'I\'m at a loss for words. This is amazing. I love it.',
-      img: 'https://avatar.vercel.sh/john',
-   },
-]
-
-const firstRow = reviews.slice(0, reviews.length / 2)
-const secondRow = reviews.slice(reviews.length / 2)
-
-function ReviewCard({
-   img,
-   name,
-   username,
-   body,
-}: {
-   img: string
-   name: string
-   username: string
-   body: string
-}) {
-   return (
-      <figure
-         className={ny(
-            'relative h-40 w-36 cursor-pointer overflow-hidden rounded-xl border p-4',
-            // light styles
-            'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',
-            // dark styles
-            'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',
-         )}
-      >
-         <div className="flex flex-row items-center gap-2">
-            <img className="rounded-full" width="32" height="32" alt="" src={img} />
-            <div className="flex flex-col">
-               <figcaption className="text-sm font-medium dark:text-white">
-                  {name}
-               </figcaption>
-               <p className="text-xs font-medium dark:text-white/40">{username}</p>
-            </div>
-         </div>
-         <blockquote className="mt-2 text-sm">{body}</blockquote>
-      </figure>
-   )
-}
-
-function MarqueeDemoVertical() {
-   return (
-      <div className="bg-background relative flex h-96 flex-row items-center justify-center overflow-hidden rounded-lg border sm:px-20 md:shadow-xl">
-         <Marquee pauseOnHover vertical className="[--duration:20s]">
-            {firstRow.map(review => (
-               <ReviewCard key={review.username} {...review} />
-            ))}
-         </Marquee>
-         <Marquee reverse pauseOnHover vertical className="[--duration:20s]">
-            {secondRow.map(review => (
-               <ReviewCard key={review.username} {...review} />
-            ))}
-         </Marquee>
-         <div className="dark:from-background pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white"></div>
-         <div className="dark:from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white"></div>
-      </div>
-   )
-}
-
-export default MarqueeDemoVertical
diff --git a/apps/web/registry/default/example/marquee-demo.tsx b/apps/web/registry/default/example/marquee-demo.tsx
deleted file mode 100644
index 27fcdf7b..00000000
--- a/apps/web/registry/default/example/marquee-demo.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { ny } from '~/lib/utils'
-import Marquee from '~/registry/default/ui/marquee'
-
-const reviews = [
-   {
-      name: 'Jack',
-      username: '@jack',
-      body: 'I\'ve never seen anything like this before. It\'s amazing. I love it.',
-      img: 'https://avatar.vercel.sh/jack',
-   },
-   {
-      name: 'Jill',
-      username: '@jill',
-      body: 'I don\'t know what to say. I\'m speechless. This is amazing.',
-      img: 'https://avatar.vercel.sh/jill',
-   },
-   {
-      name: 'John',
-      username: '@john',
-      body: 'I\'m at a loss for words. This is amazing. I love it.',
-      img: 'https://avatar.vercel.sh/john',
-   },
-   {
-      name: 'Jane',
-      username: '@jane',
-      body: 'I\'m at a loss for words. This is amazing. I love it.',
-      img: 'https://avatar.vercel.sh/jane',
-   },
-   {
-      name: 'Jenny',
-      username: '@jenny',
-      body: 'I\'m at a loss for words. This is amazing. I love it.',
-      img: 'https://avatar.vercel.sh/jenny',
-   },
-   {
-      name: 'James',
-      username: '@james',
-      body: 'I\'m at a loss for words. This is amazing. I love it.',
-      img: 'https://avatar.vercel.sh/james',
-   },
-]
-
-const firstRow = reviews.slice(0, reviews.length / 2)
-const secondRow = reviews.slice(reviews.length / 2)
-
-function ReviewCard({
-   img,
-   name,
-   username,
-   body,
-}: {
-   img: string
-   name: string
-   username: string
-   body: string
-}) {
-   return (
-      <figure
-         className={ny(
-            'relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4',
-            // light styles
-            'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',
-            // dark styles
-            'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',
-         )}
-      >
-         <div className="flex flex-row items-center gap-2">
-            <img className="rounded-full" width="32" height="32" alt="" src={img} />
-            <div className="flex flex-col">
-               <figcaption className="text-sm font-medium dark:text-white">
-                  {name}
-               </figcaption>
-               <p className="text-xs font-medium dark:text-white/40">{username}</p>
-            </div>
-         </div>
-         <blockquote className="mt-2 text-sm">{body}</blockquote>
-      </figure>
-   )
-}
-
-function MarqueeDemo() {
-   return (
-      <div className="bg-background relative flex size-full flex-col items-center justify-center overflow-hidden rounded-lg border py-20 md:shadow-xl">
-         <Marquee pauseOnHover className="[--duration:20s]">
-            {firstRow.map(review => (
-               <ReviewCard key={review.username} {...review} />
-            ))}
-         </Marquee>
-         <Marquee reverse pauseOnHover className="[--duration:20s]">
-            {secondRow.map(review => (
-               <ReviewCard key={review.username} {...review} />
-            ))}
-         </Marquee>
-         <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
-         <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
-      </div>
-   )
-}
-
-export default MarqueeDemo
diff --git a/apps/web/registry/default/example/marquee-logos.tsx b/apps/web/registry/default/example/marquee-logos.tsx
deleted file mode 100644
index 25a04132..00000000
--- a/apps/web/registry/default/example/marquee-logos.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ny } from '~/lib/utils'
-import Marquee from '~/registry/default/ui/marquee'
-
-const logos = [
-   {
-      name: 'Microsoft',
-      img: 'https://cdn.simpleicons.org/microsoft/000/fff',
-   },
-   {
-      name: 'Apple',
-      img: 'https://cdn.simpleicons.org/apple/000/fff',
-   },
-   {
-      name: 'Google',
-      img: 'https://cdn.simpleicons.org/google/000/fff',
-   },
-   {
-      name: 'Facebook',
-      img: 'https://cdn.simpleicons.org/facebook/000/fff',
-   },
-   {
-      name: 'LinkedIn',
-      img: 'https://cdn.simpleicons.org/linkedin/000/fff',
-   },
-   {
-      name: 'Twitter',
-      img: 'https://cdn.simpleicons.org/twitter/000/fff',
-   },
-]
-
-function Logo({ name, img }: { name: string, img: string }) {
-   return (
-      <div className={ny('size-12 cursor-pointer')}>
-         <img src={img} alt={name} />
-      </div>
-   )
-}
-
-function MarqueeLogos() {
-   return (
-      <div className="bg-background relative flex size-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border py-20 md:shadow-xl">
-         <Marquee className="[--gap:3rem]">
-            {logos.map((logo, idx) => (
-               <Logo key={idx} {...logo} />
-            ))}
-         </Marquee>
-         <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
-         <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
-      </div>
-   )
-}
-
-export default MarqueeLogos
diff --git a/apps/web/registry/default/example/menubar-demo.tsx b/apps/web/registry/default/example/menubar-demo.tsx
deleted file mode 100644
index 19270fa0..00000000
--- a/apps/web/registry/default/example/menubar-demo.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import {
-   Menubar,
-   MenubarCheckboxItem,
-   MenubarContent,
-   MenubarItem,
-   MenubarMenu,
-   MenubarRadioGroup,
-   MenubarRadioItem,
-   MenubarSeparator,
-   MenubarShortcut,
-   MenubarSub,
-   MenubarSubContent,
-   MenubarSubTrigger,
-   MenubarTrigger,
-} from '~/registry/default/ui/menubar'
-
-export default function MenubarDemo() {
-   return (
-      <Menubar>
-         <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-               <MenubarItem>
-                  New Tab
-                  {' '}
-                  <MenubarShortcut>⌘T</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem>
-                  New Window
-                  {' '}
-                  <MenubarShortcut>⌘N</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem disabled>New Incognito Window</MenubarItem>
-               <MenubarSeparator />
-               <MenubarSub>
-                  <MenubarSubTrigger>Share</MenubarSubTrigger>
-                  <MenubarSubContent>
-                     <MenubarItem>Email link</MenubarItem>
-                     <MenubarItem>Messages</MenubarItem>
-                     <MenubarItem>Notes</MenubarItem>
-                  </MenubarSubContent>
-               </MenubarSub>
-               <MenubarSeparator />
-               <MenubarItem>
-                  Print...
-                  {' '}
-                  <MenubarShortcut>⌘P</MenubarShortcut>
-               </MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-         <MenubarMenu>
-            <MenubarTrigger>Edit</MenubarTrigger>
-            <MenubarContent>
-               <MenubarItem>
-                  Undo
-                  {' '}
-                  <MenubarShortcut>⌘Z</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem>
-                  Redo
-                  {' '}
-                  <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-               </MenubarItem>
-               <MenubarSeparator />
-               <MenubarSub>
-                  <MenubarSubTrigger>Find</MenubarSubTrigger>
-                  <MenubarSubContent>
-                     <MenubarItem>Search the web</MenubarItem>
-                     <MenubarSeparator />
-                     <MenubarItem>Find...</MenubarItem>
-                     <MenubarItem>Find Next</MenubarItem>
-                     <MenubarItem>Find Previous</MenubarItem>
-                  </MenubarSubContent>
-               </MenubarSub>
-               <MenubarSeparator />
-               <MenubarItem>Cut</MenubarItem>
-               <MenubarItem>Copy</MenubarItem>
-               <MenubarItem>Paste</MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-         <MenubarMenu>
-            <MenubarTrigger>View</MenubarTrigger>
-            <MenubarContent>
-               <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-               <MenubarCheckboxItem checked>
-                  Always Show Full URLs
-               </MenubarCheckboxItem>
-               <MenubarSeparator />
-               <MenubarItem inset>
-                  Reload
-                  {' '}
-                  <MenubarShortcut>⌘R</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem disabled inset>
-                  Force Reload
-                  {' '}
-                  <MenubarShortcut>⇧⌘R</MenubarShortcut>
-               </MenubarItem>
-               <MenubarSeparator />
-               <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-               <MenubarSeparator />
-               <MenubarItem inset>Hide Sidebar</MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-         <MenubarMenu>
-            <MenubarTrigger>Profiles</MenubarTrigger>
-            <MenubarContent>
-               <MenubarRadioGroup value="benoit">
-                  <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-                  <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-                  <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-               </MenubarRadioGroup>
-               <MenubarSeparator />
-               <MenubarItem inset>Edit...</MenubarItem>
-               <MenubarSeparator />
-               <MenubarItem inset>Add Profile...</MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-      </Menubar>
-   )
-}
diff --git a/apps/web/registry/default/example/meteors-demo.tsx b/apps/web/registry/default/example/meteors-demo.tsx
deleted file mode 100644
index 160a42a0..00000000
--- a/apps/web/registry/default/example/meteors-demo.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Meteors from '~/registry/default/ui/meteors'
-
-export default function MeteorDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <Meteors number={30} />
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Meteors
-         </p>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/mode-toggle-group.tsx b/apps/web/registry/default/example/mode-toggle-group.tsx
deleted file mode 100644
index 8cc69485..00000000
--- a/apps/web/registry/default/example/mode-toggle-group.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Laptop, Moon, Sun } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { useTheme } from 'next-themes'
-
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/default/ui/toggle-group'
-
-export default function ModeToggleGroup() {
-   const { setTheme, theme } = useTheme()
-   const [currentTheme, setCurrentTheme] = useState<string>('')
-
-   useEffect(() => {
-      if (theme === 'system')
-         setCurrentTheme('system')
-      else if (theme === 'dark')
-         setCurrentTheme('dark')
-      else if (theme === 'light')
-         setCurrentTheme('light')
-   }, [theme])
-
-   return (
-      <ToggleGroup type="single" variant="outline" className="scale-90 rounded-full border p-1" value={currentTheme}>
-         <ToggleGroupItem
-            value="light"
-            onClick={() => setTheme('light')}
-            disabled={theme === 'light'}
-            className="disabled:bg-accent rounded-full disabled:opacity-100"
-         >
-            <Sun className="size-5" />
-         </ToggleGroupItem>
-         <ToggleGroupItem
-            value="system"
-            onClick={() => setTheme('system')}
-            disabled={theme === 'system'}
-            className="disabled:bg-accent rounded-full disabled:opacity-100"
-         >
-            <Laptop className="size-5" />
-         </ToggleGroupItem>
-         <ToggleGroupItem
-            value="dark"
-            onClick={() => setTheme('dark')}
-            disabled={theme === 'dark'}
-            className="disabled:bg-accent rounded-full disabled:opacity-100"
-         >
-            <Moon className="size-5" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/default/example/mode-toggle.tsx b/apps/web/registry/default/example/mode-toggle.tsx
deleted file mode 100644
index c7637854..00000000
--- a/apps/web/registry/default/example/mode-toggle.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Moon, Sun } from 'lucide-react'
-import { useTheme } from 'next-themes'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/default/ui/dropdown-menu'
-
-export default function ModeToggle() {
-   const { setTheme } = useTheme()
-
-   return (
-      <DropdownMenu>
-         <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="icon">
-               <Sun className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-               <Moon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-               <span className="sr-only">Toggle theme</span>
-            </Button>
-         </DropdownMenuTrigger>
-         <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => setTheme('light')}>
-               Light
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setTheme('dark')}>
-               Dark
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setTheme('system')}>
-               System
-            </DropdownMenuItem>
-         </DropdownMenuContent>
-      </DropdownMenu>
-   )
-}
diff --git a/apps/web/registry/default/example/multi-select-basic.tsx b/apps/web/registry/default/example/multi-select-basic.tsx
deleted file mode 100644
index 632ce666..00000000
--- a/apps/web/registry/default/example/multi-select-basic.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectGroup,
-   MultiSelectItem,
-   MultiSelectList,
-   MultiSelectTrigger,
-   MultiSelectValue,
-} from '~/registry/default/ui/multi-select'
-
-export default function MultiSelectBasicDemo() {
-   return (
-      <MultiSelect>
-         <MultiSelectTrigger className="w-96">
-            <MultiSelectValue placeholder="Select stack" />
-         </MultiSelectTrigger>
-         <MultiSelectContent>
-            <MultiSelectList>
-               <MultiSelectGroup heading="React">
-                  <MultiSelectItem value="react">React</MultiSelectItem>
-                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
-                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Vue">
-                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
-                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Others">
-                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
-                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
-               </MultiSelectGroup>
-            </MultiSelectList>
-         </MultiSelectContent>
-      </MultiSelect>
-   )
-}
diff --git a/apps/web/registry/default/example/multi-select-controllable-search.tsx b/apps/web/registry/default/example/multi-select-controllable-search.tsx
deleted file mode 100644
index 6097e93c..00000000
--- a/apps/web/registry/default/example/multi-select-controllable-search.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-'use client'
-
-import { useRef, useState } from 'react'
-
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectEmpty,
-   MultiSelectList,
-   type MultiSelectOption,
-   type MultiSelectOptionGroup,
-   MultiSelectSearch,
-   MultiSelectTrigger,
-   MultiSelectValue,
-   renderMultiSelectOptions,
-} from '~/registry/default/ui/multi-select'
-
-const ALL_ITEMS = [
-   { value: 'react', label: 'React', group: 'React' },
-   { value: 'next', label: 'Next.js', group: 'React' },
-   { value: 'remix', label: 'Remix', group: 'React' },
-   { value: 'vue', label: 'Vue', group: 'Vue' },
-   { value: 'nuxt', label: 'Nuxt.js', group: 'Vue' },
-   { value: 'angular', label: 'Angular', group: 'Others' },
-   { value: 'svelte', label: 'Svelte', group: 'Others' },
-]
-
-function group(options: Array<(typeof ALL_ITEMS)[number]>): MultiSelectOptionGroup[] {
-   return options.reduce((acc, item) => {
-      const group = acc.find(g => g.heading === item.group)
-      if (group)
-         group.children.push(item)
-      else
-         acc.push({ heading: item.group, children: [item] })
-
-      return acc
-   }, [] as MultiSelectOptionGroup[])
-}
-
-async function search(keyword?: string) {
-   if (!keyword)
-      return group(ALL_ITEMS)
-   await new Promise(resolve => setTimeout(resolve, 500))
-   const lowerKeyword = keyword.toLowerCase()
-   const filtered = ALL_ITEMS.filter(item =>
-      item.label.toLowerCase().includes(lowerKeyword),
-   )
-   return group(filtered)
-}
-
-export default function MultiSelectControllableSearchDemo() {
-   const [loading, setLoading] = useState(false)
-   const [options, setOptions] = useState<MultiSelectOption[]>(() =>
-      group(ALL_ITEMS),
-   )
-
-   const indexRef = useRef(0)
-
-   const handleSearch = async (keyword?: string) => {
-      const index = ++indexRef.current
-      setLoading(true)
-      const newOptions = await search(keyword)
-      if (indexRef.current === index) {
-         setOptions(newOptions)
-         setLoading(false)
-      }
-   }
-
-   return (
-      <MultiSelect onSearch={handleSearch}>
-         <MultiSelectTrigger className="w-96">
-            <MultiSelectValue placeholder="Select stack" />
-         </MultiSelectTrigger>
-         <MultiSelectContent>
-            <MultiSelectSearch />
-            <MultiSelectList>
-               {loading ? null : renderMultiSelectOptions(options)}
-               <MultiSelectEmpty>
-                  {loading ? 'Loading...' : 'No results found'}
-               </MultiSelectEmpty>
-            </MultiSelectList>
-         </MultiSelectContent>
-      </MultiSelect>
-   )
-}
diff --git a/apps/web/registry/default/example/multi-select-filter.tsx b/apps/web/registry/default/example/multi-select-filter.tsx
deleted file mode 100644
index 7af5f53f..00000000
--- a/apps/web/registry/default/example/multi-select-filter.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client'
-
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectEmpty,
-   MultiSelectGroup,
-   MultiSelectItem,
-   MultiSelectList,
-   MultiSelectSearch,
-   MultiSelectTrigger,
-   MultiSelectValue,
-} from '~/registry/default/ui/multi-select'
-
-export default function MultiSelectFilterDemo() {
-   return (
-      <MultiSelect>
-         <MultiSelectTrigger className="w-96">
-            <MultiSelectValue placeholder="Select stack" />
-         </MultiSelectTrigger>
-         <MultiSelectContent>
-            <MultiSelectSearch placeholder="Input to search" />
-            <MultiSelectList>
-               <MultiSelectGroup heading="React">
-                  <MultiSelectItem value="react">React</MultiSelectItem>
-                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
-                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Vue">
-                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
-                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Others">
-                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
-                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
-               </MultiSelectGroup>
-            </MultiSelectList>
-            <MultiSelectEmpty />
-         </MultiSelectContent>
-      </MultiSelect>
-   )
-}
diff --git a/apps/web/registry/default/example/multi-select-form.tsx b/apps/web/registry/default/example/multi-select-form.tsx
deleted file mode 100644
index 5c9acc83..00000000
--- a/apps/web/registry/default/example/multi-select-form.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-'use client'
-
-import { useRef, useState } from 'react'
-import Link from 'next/link'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectEmpty,
-   MultiSelectList,
-   type MultiSelectOption,
-   type MultiSelectOptionGroup,
-   MultiSelectSearch,
-   MultiSelectTrigger,
-   MultiSelectValue,
-   renderMultiSelectOptions,
-} from '~/registry/default/ui/multi-select'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const ALL_ITEMS = [
-   { value: 'react', label: 'React', group: 'React' },
-   { value: 'next', label: 'Next.js', group: 'React' },
-   { value: 'remix', label: 'Remix', group: 'React' },
-   { value: 'vue', label: 'Vue', group: 'Vue' },
-   { value: 'nuxt', label: 'Nuxt.js', group: 'Vue' },
-   { value: 'angular', label: 'Angular', group: 'Others' },
-   { value: 'svelte', label: 'Svelte', group: 'Others' },
-]
-
-function group(options: Array<(typeof ALL_ITEMS)[number]>): MultiSelectOptionGroup[] {
-   return options.reduce((acc, item) => {
-      const group = acc.find(g => g.heading === item.group)
-      if (group)
-         group.children.push(item)
-      else
-         acc.push({ heading: item.group, children: [item] })
-
-      return acc
-   }, [] as MultiSelectOptionGroup[])
-}
-
-async function search(keyword?: string) {
-   if (!keyword)
-      return group(ALL_ITEMS)
-   const lowerKeyword = keyword.toLowerCase()
-   const filtered = ALL_ITEMS.filter(item =>
-      item.label.toLowerCase().includes(lowerKeyword),
-   )
-
-   if (!filtered.length) {
-      return [
-         {
-            label: keyword,
-            value: keyword,
-         },
-      ]
-   }
-
-   return group(filtered)
-}
-
-const FormSchema = z.object({
-   frameworks: z.array(z.string(), {
-      required_error: 'Please select at least one framework.',
-   }),
-})
-
-export default function MultiSelectFormDemo() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   const [loading, setLoading] = useState(false)
-   const [options, setOptions] = useState<MultiSelectOption[]>(() =>
-      group(ALL_ITEMS),
-   )
-
-   const indexRef = useRef(0)
-
-   const handleSearch = async (keyword: string) => {
-      const index = ++indexRef.current
-      setLoading(true)
-      const newOptions = await search(keyword)
-      if (indexRef.current === index) {
-         setOptions(newOptions)
-         setLoading(false)
-      }
-   }
-
-   const onSubmit = (data: z.infer<typeof FormSchema>) => {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="frameworks"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Frameworks</FormLabel>
-                     <MultiSelect
-                        onValueChange={field.onChange}
-                        defaultValue={field.value}
-                        onSearch={keyword => handleSearch(keyword ?? '')}
-                     >
-                        <FormControl>
-                           <MultiSelectTrigger className="w-96">
-                              <MultiSelectValue placeholder="Select frameworks" />
-                           </MultiSelectTrigger>
-                        </FormControl>
-                        <MultiSelectContent>
-                           <MultiSelectSearch />
-                           <MultiSelectList>
-                              {loading ? null : renderMultiSelectOptions(options)}
-                              <MultiSelectEmpty>
-                                 {loading ? 'Loading...' : 'No results found'}
-                              </MultiSelectEmpty>
-                           </MultiSelectList>
-                        </MultiSelectContent>
-                     </MultiSelect>
-                     <FormDescription>
-                        You can manage frameworks in
-                        {' '}
-                        <Link href="/examples/forms">framework settings</Link>
-                        .
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/multi-select-input-custom.tsx b/apps/web/registry/default/example/multi-select-input-custom.tsx
deleted file mode 100644
index 90df1c45..00000000
--- a/apps/web/registry/default/example/multi-select-input-custom.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import { useRef, useState } from 'react'
-
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectEmpty,
-   MultiSelectList,
-   type MultiSelectOption,
-   type MultiSelectOptionGroup,
-   MultiSelectSearch,
-   MultiSelectTrigger,
-   MultiSelectValue,
-   renderMultiSelectOptions,
-} from '~/registry/default/ui/multi-select'
-
-const ALL_ITEMS = [
-   { value: 'react', label: 'React', group: 'React' },
-   { value: 'next', label: 'Next.js', group: 'React' },
-   { value: 'remix', label: 'Remix', group: 'React' },
-   { value: 'vue', label: 'Vue', group: 'Vue' },
-   { value: 'nuxt', label: 'Nuxt.js', group: 'Vue' },
-   { value: 'angular', label: 'Angular', group: 'Others' },
-   { value: 'svelte', label: 'Svelte', group: 'Others' },
-]
-
-function group(options: Array<(typeof ALL_ITEMS)[number]>): MultiSelectOptionGroup[] {
-   return options.reduce((acc, item) => {
-      const group = acc.find(g => g.heading === item.group)
-      if (group)
-         group.children.push(item)
-      else
-         acc.push({ heading: item.group, children: [item] })
-
-      return acc
-   }, [] as MultiSelectOptionGroup[])
-}
-
-async function search(keyword?: string) {
-   if (!keyword)
-      return group(ALL_ITEMS)
-   const lowerKeyword = keyword.toLowerCase()
-   const filtered = ALL_ITEMS.filter(item =>
-      item.label.toLowerCase().includes(lowerKeyword),
-   )
-
-   if (!filtered.length) {
-      return [
-         {
-            label: keyword,
-            value: keyword,
-         },
-      ]
-   }
-
-   return group(filtered)
-}
-
-export default function MultiSelectInputCustomDemo() {
-   const [loading, setLoading] = useState(false)
-   const [options, setOptions] = useState<MultiSelectOption[]>(() =>
-      group(ALL_ITEMS),
-   )
-
-   const indexRef = useRef(0)
-
-   const handleSearch = async (keyword: string) => {
-      const index = ++indexRef.current
-      setLoading(true)
-      const newOptions = await search(keyword)
-      if (indexRef.current === index) {
-         setOptions(newOptions)
-         setLoading(false)
-      }
-   }
-
-   return (
-      <MultiSelect onSearch={keyword => handleSearch(keyword ?? '')}>
-         <MultiSelectTrigger className="w-96">
-            <MultiSelectValue placeholder="Select stack" />
-         </MultiSelectTrigger>
-         <MultiSelectContent>
-            <MultiSelectSearch placeholder="input any..." />
-            <MultiSelectList>
-               {loading ? null : renderMultiSelectOptions(options)}
-               <MultiSelectEmpty>
-                  {loading ? 'Loading...' : 'No results found'}
-               </MultiSelectEmpty>
-            </MultiSelectList>
-         </MultiSelectContent>
-      </MultiSelect>
-   )
-}
diff --git a/apps/web/registry/default/example/multi-select-limit-count.tsx b/apps/web/registry/default/example/multi-select-limit-count.tsx
deleted file mode 100644
index 1f57c114..00000000
--- a/apps/web/registry/default/example/multi-select-limit-count.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectGroup,
-   MultiSelectItem,
-   MultiSelectList,
-   MultiSelectTrigger,
-   MultiSelectValue,
-} from '~/registry/default/ui/multi-select'
-
-export default function MultiSelectLimitCountDemo() {
-   return (
-      <MultiSelect defaultValue={['react', 'next', 'remix']} maxCount={3}>
-         <MultiSelectTrigger className="w-96">
-            <MultiSelectValue placeholder="Select stack" />
-         </MultiSelectTrigger>
-         <MultiSelectContent>
-            <MultiSelectList>
-               <MultiSelectGroup heading="React">
-                  <MultiSelectItem value="react">React</MultiSelectItem>
-                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
-                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Vue">
-                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
-                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Others">
-                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
-                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
-               </MultiSelectGroup>
-            </MultiSelectList>
-         </MultiSelectContent>
-      </MultiSelect>
-   )
-}
diff --git a/apps/web/registry/default/example/multi-select-limit-display-length.tsx b/apps/web/registry/default/example/multi-select-limit-display-length.tsx
deleted file mode 100644
index 15fac9bb..00000000
--- a/apps/web/registry/default/example/multi-select-limit-display-length.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectGroup,
-   MultiSelectItem,
-   MultiSelectList,
-   MultiSelectTrigger,
-   MultiSelectValue,
-} from '~/registry/default/ui/multi-select'
-
-export default function MultiSelectLimitDisplayLengthDemo() {
-   return (
-      <MultiSelect defaultValue={['long', 'react', 'angular', 'vue', 'remix']}>
-         <MultiSelectTrigger className="w-96">
-            <MultiSelectValue
-               placeholder="Select stack"
-               maxDisplay={3}
-               maxItemLength={5}
-            />
-         </MultiSelectTrigger>
-         <MultiSelectContent>
-            <MultiSelectList>
-               <MultiSelectGroup heading="React">
-                  <MultiSelectItem value="react">React</MultiSelectItem>
-                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
-                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Vue">
-                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
-                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Others">
-                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
-                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
-                  <MultiSelectItem value="long">VeryVeryLongItem</MultiSelectItem>
-               </MultiSelectGroup>
-            </MultiSelectList>
-         </MultiSelectContent>
-      </MultiSelect>
-   )
-}
diff --git a/apps/web/registry/default/example/navigation-menu-demo.tsx b/apps/web/registry/default/example/navigation-menu-demo.tsx
deleted file mode 100644
index 1b6e9c62..00000000
--- a/apps/web/registry/default/example/navigation-menu-demo.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import Link from 'next/link'
-
-import { ny } from '~/lib/utils'
-import { Icons } from '~/components/icons'
-import {
-   NavigationMenu,
-   NavigationMenuContent,
-   NavigationMenuItem,
-   NavigationMenuLink,
-   NavigationMenuList,
-   NavigationMenuTrigger,
-   navigationMenuTriggerStyle,
-} from '~/registry/default/ui/navigation-menu'
-
-const components: { title: string, href: string, description: string }[] = [
-   {
-      title: 'Alert Dialog',
-      href: '/docs/primitives/alert-dialog',
-      description:
-      'A modal dialog that interrupts the user with important content and expects a response.',
-   },
-   {
-      title: 'Hover Card',
-      href: '/docs/primitives/hover-card',
-      description:
-      'For sighted users to preview content available behind a link.',
-   },
-   {
-      title: 'Progress',
-      href: '/docs/primitives/progress',
-      description:
-      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
-   },
-   {
-      title: 'Scroll-area',
-      href: '/docs/primitives/scroll-area',
-      description: 'Visually or semantically separates content.',
-   },
-   {
-      title: 'Tabs',
-      href: '/docs/primitives/tabs',
-      description:
-      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
-   },
-   {
-      title: 'Tooltip',
-      href: '/docs/primitives/tooltip',
-      description:
-      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
-   },
-]
-
-export default function NavigationMenuDemo() {
-   return (
-      <NavigationMenu>
-         <NavigationMenuList>
-            <NavigationMenuItem>
-               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-               <NavigationMenuContent>
-                  <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                     <li className="row-span-3">
-                        <NavigationMenuLink asChild>
-                           <a
-                              className="from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md"
-                              href="/"
-                           >
-                              <Icons.logo className="size-6" />
-                              <div className="mb-2 mt-4 text-lg font-medium">nyxb/ui</div>
-                              <p className="text-muted-foreground text-sm leading-tight">
-                                 Beautifully designed components that you can copy and
-                                 paste into your apps. Accessible. Customizable. Open
-                                 Source.
-                              </p>
-                           </a>
-                        </NavigationMenuLink>
-                     </li>
-                     <ListItem href="/docs" title="Introduction">
-                        Re-usable components built using Radix UI and Tailwind CSS.
-                     </ListItem>
-                     <ListItem href="/docs/installation" title="Installation">
-                        How to install dependencies and structure your app.
-                     </ListItem>
-                     <ListItem href="/docs/primitives/typography" title="Typography">
-                        Styles for headings, paragraphs, lists...etc
-                     </ListItem>
-                  </ul>
-               </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-               <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-               <NavigationMenuContent>
-                  <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                     {components.map(component => (
-                        <ListItem
-                           key={component.title}
-                           title={component.title}
-                           href={component.href}
-                        >
-                           {component.description}
-                        </ListItem>
-                     ))}
-                  </ul>
-               </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-               <Link href="/docs" legacyBehavior passHref>
-                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                     Documentation
-                  </NavigationMenuLink>
-               </Link>
-            </NavigationMenuItem>
-         </NavigationMenuList>
-      </NavigationMenu>
-   )
-}
-
-const ListItem = React.forwardRef<
-   React.ElementRef<'a'>,
-   React.ComponentPropsWithoutRef<'a'>
->(({ className, title, children, ...props }, ref) => {
-   return (
-      <li>
-         <NavigationMenuLink asChild>
-            <a
-               ref={ref}
-               className={ny(
-                  'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors',
-                  className,
-               )}
-               {...props}
-            >
-               <div className="text-sm font-medium leading-none">{title}</div>
-               <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
-                  {children}
-               </p>
-            </a>
-         </NavigationMenuLink>
-      </li>
-   )
-})
-ListItem.displayName = 'ListItem'
diff --git a/apps/web/registry/default/example/neon-gradient-card-demo.tsx b/apps/web/registry/default/example/neon-gradient-card-demo.tsx
deleted file mode 100644
index 0906eeab..00000000
--- a/apps/web/registry/default/example/neon-gradient-card-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NeonGradientCard } from '~/registry/default/ui/neon-gradient-card'
-
-export default function NeonGradientCardDemo() {
-   return (
-      <NeonGradientCard className="max-w-sm items-center justify-center text-center">
-         <span className="pointer-events-none z-10 h-full whitespace-pre-wrap bg-gradient-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-6xl font-bold leading-none tracking-tighter text-transparent dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]">
-            Neon Gradient Card
-         </span>
-      </NeonGradientCard>
-   )
-}
diff --git a/apps/web/registry/default/example/number-ticker-demo.tsx b/apps/web/registry/default/example/number-ticker-demo.tsx
deleted file mode 100644
index 971ab170..00000000
--- a/apps/web/registry/default/example/number-ticker-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import NumberTicker from '~/registry/default/ui/number-ticker'
-
-function NumberTickerDemo() {
-   return (
-      <p className="whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white">
-         <NumberTicker value={100} />
-      </p>
-   )
-}
-
-export default NumberTickerDemo
diff --git a/apps/web/registry/default/example/nyx-toc-demo.tsx b/apps/web/registry/default/example/nyx-toc-demo.tsx
deleted file mode 100644
index aab1dd8d..00000000
--- a/apps/web/registry/default/example/nyx-toc-demo.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { NyxTOCItems } from '~/registry/miami/ui/nyx-toc'
-
-const demoItems = [
-   {
-      title: 'Introduction',
-      url: '#introduction',
-      depth: 1,
-   },
-   {
-      title: 'Getting Started',
-      url: '#getting-started',
-      depth: 2,
-   },
-   {
-      title: 'Installation',
-      url: '#installation',
-      depth: 3,
-   },
-   {
-      title: 'Basic Usage',
-      url: '#basic-usage',
-      depth: 3,
-   },
-   {
-      title: 'Advanced Features',
-      url: '#advanced-features',
-      depth: 2,
-   },
-   {
-      title: 'API Reference',
-      url: '#api-reference',
-      depth: 2,
-   },
-]
-
-export default function NyxTOCDemo() {
-   return (
-      <div className="flex gap-10">
-         <div className="flex-1">
-            <NyxTOCItems
-               items={demoItems}
-               label="On This Page"
-            />
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/nyx-toc-popover-demo.tsx b/apps/web/registry/default/example/nyx-toc-popover-demo.tsx
deleted file mode 100644
index 394b83fb..00000000
--- a/apps/web/registry/default/example/nyx-toc-popover-demo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { NyxTOCItems, TocPopover, TocPopoverContent, TocPopoverTrigger } from '~/registry/default/ui/nyx-toc'
-
-export default function NyxTOCPopoverDemo() {
-   // Example TOC items
-   const items = [
-      { title: 'Introduction', url: '#introduction', depth: 1 },
-      { title: 'Getting Started', url: '#getting-started', depth: 2 },
-      { title: 'Installation', url: '#installation', depth: 2 },
-      { title: 'Basic Usage', url: '#basic-usage', depth: 3 },
-      { title: 'Advanced Features', url: '#advanced-features', depth: 2 },
-      { title: 'Configuration', url: '#configuration', depth: 3 },
-      { title: 'Customization', url: '#customization', depth: 2 },
-   ]
-
-   return (
-      <div className="flex h-[300px] w-full items-start justify-center p-6">
-         <TocPopover>
-            <TocPopoverTrigger items={items} className="hover:bg-accent rounded-md border" />
-            <TocPopoverContent>
-               <NyxTOCItems
-                  items={items}
-                  isMenu
-                  label="On This Page"
-               />
-            </TocPopoverContent>
-         </TocPopover>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/orbiting-circles-demo.tsx b/apps/web/registry/default/example/orbiting-circles-demo.tsx
deleted file mode 100644
index 737b8a02..00000000
--- a/apps/web/registry/default/example/orbiting-circles-demo.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import OrbitingCircles from '~/registry/default/ui/orbiting-circles'
-
-export default function OrbitingCirclesDemo() {
-   return (
-      <div className="bg-background relative flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Circles
-         </span>
-
-         {/* Inner Circles */}
-         <OrbitingCircles
-            className="size-[30px] border-none bg-transparent"
-            duration={20}
-            delay={20}
-            radius={80}
-         >
-            <Icons.whatsapp />
-         </OrbitingCircles>
-         <OrbitingCircles
-            className="size-[30px] border-none bg-transparent"
-            duration={20}
-            delay={10}
-            radius={80}
-         >
-            <Icons.notion />
-         </OrbitingCircles>
-
-         {/* Outer Circles (reverse) */}
-         <OrbitingCircles
-            className="size-[50px] border-none bg-transparent"
-            radius={190}
-            duration={20}
-            reverse
-         >
-            <Icons.googleDrive />
-         </OrbitingCircles>
-         <OrbitingCircles
-            className="size-[50px] border-none bg-transparent"
-            radius={190}
-            duration={20}
-            delay={20}
-            reverse
-         >
-            <Icons.gitHub />
-         </OrbitingCircles>
-      </div>
-   )
-}
-
-const Icons = {
-   gitHub: () => (
-      <svg width="100" height="100" viewBox="0 0 438.549 438.549">
-         <path
-            fill="currentColor"
-            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-         />
-      </svg>
-   ),
-   notion: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 100 100"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
-            fill="#ffffff"
-         />
-         <path
-            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
-            fill="#000000"
-            fillRule="evenodd"
-            clipRule="evenodd"
-         />
-      </svg>
-   ),
-   openai: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
-   ),
-   googleDrive: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 87.3 78"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-            fill="#0066da"
-         />
-         <path
-            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-            fill="#00ac47"
-         />
-         <path
-            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-            fill="#ea4335"
-         />
-         <path
-            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-            fill="#00832d"
-         />
-         <path
-            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-            fill="#2684fc"
-         />
-         <path
-            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-            fill="#ffba00"
-         />
-      </svg>
-   ),
-   whatsapp: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 175.216 175.552"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <linearGradient
-               id="b"
-               x1="85.915"
-               x2="86.535"
-               y1="32.567"
-               y2="137.092"
-               gradientUnits="userSpaceOnUse"
-            >
-               <stop offset="0" stopColor="#57d163" />
-               <stop offset="1" stopColor="#23b33a" />
-            </linearGradient>
-            <filter
-               id="a"
-               width="1.115"
-               height="1.114"
-               x="-.057"
-               y="-.057"
-               colorInterpolationFilters="sRGB"
-            >
-               <feGaussianBlur stdDeviation="3.531" />
-            </filter>
-         </defs>
-         <path
-            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
-            fill="#b3b3b3"
-            filter="url(#a)"
-         />
-         <path
-            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
-            fill="#ffffff"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
-            fill="url(#linearGradient1780)"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
-            fill="url(#b)"
-         />
-         <path
-            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
-            fill="#ffffff"
-            fillRule="evenodd"
-         />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/default/example/pagination-demo.tsx b/apps/web/registry/default/example/pagination-demo.tsx
deleted file mode 100644
index 722e6c05..00000000
--- a/apps/web/registry/default/example/pagination-demo.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-   Pagination,
-   PaginationContent,
-   PaginationEllipsis,
-   PaginationItem,
-   PaginationLink,
-   PaginationNext,
-   PaginationPrevious,
-} from '~/registry/default/ui/pagination'
-
-export default function PaginationDemo() {
-   return (
-      <Pagination>
-         <PaginationContent>
-            <PaginationItem>
-               <PaginationPrevious href="#" />
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationLink href="#">1</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationLink href="#" isActive>
-                  2
-               </PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationLink href="#">3</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationEllipsis />
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationNext href="#" />
-            </PaginationItem>
-         </PaginationContent>
-      </Pagination>
-   )
-}
diff --git a/apps/web/registry/default/example/particles-demo.tsx b/apps/web/registry/default/example/particles-demo.tsx
deleted file mode 100644
index 574d7c76..00000000
--- a/apps/web/registry/default/example/particles-demo.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { useTheme } from 'next-themes'
-import { useEffect, useState } from 'react'
-import Particles from '~/registry/miami/ui/particles'
-
-function ParticlesDemo() {
-   const { theme } = useTheme()
-   const [color, setColor] = useState('#ffffff')
-
-   useEffect(() => {
-      setColor(theme === 'dark' ? '#ffffff' : '#000000')
-   }, [theme])
-
-   return (
-      <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Particles
-         </span>
-         <Particles
-            className="absolute inset-0"
-            quantity={100}
-            ease={80}
-            color={color}
-            refresh
-         />
-      </div>
-   )
-}
-
-export default ParticlesDemo
diff --git a/apps/web/registry/default/example/popover-demo.tsx b/apps/web/registry/default/example/popover-demo.tsx
deleted file mode 100644
index 6799f8cf..00000000
--- a/apps/web/registry/default/example/popover-demo.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-export default function PopoverDemo() {
-   return (
-      <Popover>
-         <PopoverTrigger asChild>
-            <Button variant="outline">Open popover</Button>
-         </PopoverTrigger>
-         <PopoverContent className="w-80">
-            <div className="grid gap-4">
-               <div className="space-y-2">
-                  <h4 className="font-medium leading-none">Dimensions</h4>
-                  <p className="text-muted-foreground text-sm">
-                     Set the dimensions for the layer.
-                  </p>
-               </div>
-               <div className="grid gap-2">
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="width">Width</Label>
-                     <Input
-                        id="width"
-                        defaultValue="100%"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="maxWidth">Max. width</Label>
-                     <Input
-                        id="maxWidth"
-                        defaultValue="300px"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="height">Height</Label>
-                     <Input
-                        id="height"
-                        defaultValue="25px"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="maxHeight">Max. height</Label>
-                     <Input
-                        id="maxHeight"
-                        defaultValue="none"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-               </div>
-            </div>
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/default/example/progress-demo.tsx b/apps/web/registry/default/example/progress-demo.tsx
deleted file mode 100644
index e0ce04b1..00000000
--- a/apps/web/registry/default/example/progress-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Progress } from '~/registry/default/ui/progress'
-
-export default function ProgressDemo() {
-   const [progress, setProgress] = React.useState(13)
-
-   React.useEffect(() => {
-      const timer = setTimeout(() => setProgress(66), 500)
-      return () => clearTimeout(timer)
-   }, [])
-
-   return <Progress value={progress} className="w-3/5" />
-}
diff --git a/apps/web/registry/default/example/pulsating-button-demo.tsx b/apps/web/registry/default/example/pulsating-button-demo.tsx
deleted file mode 100644
index 9317cae3..00000000
--- a/apps/web/registry/default/example/pulsating-button-demo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { PulsatingButton } from '~/registry/default/ui/pulsating-button'
-
-function PulsatingButtonDemo() {
-   return (
-      <PulsatingButton
-         text="Join Affiliate Program"
-         pulseColor="150, 0, 255"
-         backgroundColor="#9945FF"
-         textColor="#ffffff"
-         animationDuration="1.5s"
-         buttonWidth="200px"
-         buttonHeight="50px"
-      />
-   )
-}
-
-export default PulsatingButtonDemo
diff --git a/apps/web/registry/default/example/radio-group-demo.tsx b/apps/web/registry/default/example/radio-group-demo.tsx
deleted file mode 100644
index f1a40ec3..00000000
--- a/apps/web/registry/default/example/radio-group-demo.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Label } from '~/registry/default/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'
-
-export default function RadioGroupDemo() {
-   return (
-      <RadioGroup defaultValue="comfortable">
-         <div className="flex items-center space-x-2">
-            <RadioGroupItem value="default" id="r1" />
-            <Label htmlFor="r1">Default</Label>
-         </div>
-         <div className="flex items-center space-x-2">
-            <RadioGroupItem value="comfortable" id="r2" />
-            <Label htmlFor="r2">Comfortable</Label>
-         </div>
-         <div className="flex items-center space-x-2">
-            <RadioGroupItem value="compact" id="r3" />
-            <Label htmlFor="r3">Compact</Label>
-         </div>
-      </RadioGroup>
-   )
-}
diff --git a/apps/web/registry/default/example/radio-group-form.tsx b/apps/web/registry/default/example/radio-group-form.tsx
deleted file mode 100644
index f73b3ed5..00000000
--- a/apps/web/registry/default/example/radio-group-form.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Form,
-   FormControl,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const FormSchema = z.object({
-   type: z.enum(['all', 'mentions', 'none'], {
-      required_error: 'You need to select a notification type.',
-   }),
-})
-
-export default function RadioGroupForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="type"
-               render={({ field }) => (
-                  <FormItem className="space-y-3">
-                     <FormLabel>Notify me about...</FormLabel>
-                     <FormControl>
-                        <RadioGroup
-                           onValueChange={field.onChange}
-                           defaultValue={field.value}
-                           className="flex flex-col space-y-1"
-                        >
-                           <FormItem className="flex items-center space-x-3 space-y-0">
-                              <FormControl>
-                                 <RadioGroupItem value="all" />
-                              </FormControl>
-                              <FormLabel className="font-normal">
-                                 All new messages
-                              </FormLabel>
-                           </FormItem>
-                           <FormItem className="flex items-center space-x-3 space-y-0">
-                              <FormControl>
-                                 <RadioGroupItem value="mentions" />
-                              </FormControl>
-                              <FormLabel className="font-normal">
-                                 Direct messages and mentions
-                              </FormLabel>
-                           </FormItem>
-                           <FormItem className="flex items-center space-x-3 space-y-0">
-                              <FormControl>
-                                 <RadioGroupItem value="none" />
-                              </FormControl>
-                              <FormLabel className="font-normal">Nothing</FormLabel>
-                           </FormItem>
-                        </RadioGroup>
-                     </FormControl>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/rainbow-button-demo.tsx b/apps/web/registry/default/example/rainbow-button-demo.tsx
deleted file mode 100644
index 86f3c9d3..00000000
--- a/apps/web/registry/default/example/rainbow-button-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { RainbowButton } from '~/registry/default/ui/rainbow-button'
-
-export default function RainbowButtonDemo() {
-   return <RainbowButton>Get Unlimited Access</RainbowButton>
-}
diff --git a/apps/web/registry/default/example/resizable-demo-with-handle.tsx b/apps/web/registry/default/example/resizable-demo-with-handle.tsx
deleted file mode 100644
index ad86020a..00000000
--- a/apps/web/registry/default/example/resizable-demo-with-handle.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-   ResizableHandle,
-   ResizablePanel,
-   ResizablePanelGroup,
-} from '~/registry/default/ui/resizable'
-
-export default function ResizableDemo() {
-   return (
-      <ResizablePanelGroup
-         direction="horizontal"
-         className="max-w-md rounded-lg border"
-      >
-         <ResizablePanel defaultSize={50}>
-            <div className="flex h-[200px] items-center justify-center p-6">
-               <span className="font-semibold">One</span>
-            </div>
-         </ResizablePanel>
-         <ResizableHandle withHandle />
-         <ResizablePanel defaultSize={50}>
-            <ResizablePanelGroup direction="vertical">
-               <ResizablePanel defaultSize={25}>
-                  <div className="flex h-full items-center justify-center p-6">
-                     <span className="font-semibold">Two</span>
-                  </div>
-               </ResizablePanel>
-               <ResizableHandle withHandle />
-               <ResizablePanel defaultSize={75}>
-                  <div className="flex h-full items-center justify-center p-6">
-                     <span className="font-semibold">Three</span>
-                  </div>
-               </ResizablePanel>
-            </ResizablePanelGroup>
-         </ResizablePanel>
-      </ResizablePanelGroup>
-   )
-}
diff --git a/apps/web/registry/default/example/resizable-demo.tsx b/apps/web/registry/default/example/resizable-demo.tsx
deleted file mode 100644
index 7cbf5791..00000000
--- a/apps/web/registry/default/example/resizable-demo.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-   ResizableHandle,
-   ResizablePanel,
-   ResizablePanelGroup,
-} from '~/registry/default/ui/resizable'
-
-export default function ResizableDemo() {
-   return (
-      <ResizablePanelGroup
-         direction="horizontal"
-         className="max-w-md rounded-lg border"
-      >
-         <ResizablePanel defaultSize={50}>
-            <div className="flex h-[200px] items-center justify-center p-6">
-               <span className="font-semibold">One</span>
-            </div>
-         </ResizablePanel>
-         <ResizableHandle />
-         <ResizablePanel defaultSize={50}>
-            <ResizablePanelGroup direction="vertical">
-               <ResizablePanel defaultSize={25}>
-                  <div className="flex h-full items-center justify-center p-6">
-                     <span className="font-semibold">Two</span>
-                  </div>
-               </ResizablePanel>
-               <ResizableHandle />
-               <ResizablePanel defaultSize={75}>
-                  <div className="flex h-full items-center justify-center p-6">
-                     <span className="font-semibold">Three</span>
-                  </div>
-               </ResizablePanel>
-            </ResizablePanelGroup>
-         </ResizablePanel>
-      </ResizablePanelGroup>
-   )
-}
diff --git a/apps/web/registry/default/example/resizable-handle.tsx b/apps/web/registry/default/example/resizable-handle.tsx
deleted file mode 100644
index 8ed7b162..00000000
--- a/apps/web/registry/default/example/resizable-handle.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-   ResizableHandle,
-   ResizablePanel,
-   ResizablePanelGroup,
-} from '~/registry/default/ui/resizable'
-
-export default function ResizableDemo() {
-   return (
-      <ResizablePanelGroup
-         direction="horizontal"
-         className="min-h-[200px] max-w-md rounded-lg border"
-      >
-         <ResizablePanel defaultSize={25}>
-            <div className="flex h-full items-center justify-center p-6">
-               <span className="font-semibold">Sidebar</span>
-            </div>
-         </ResizablePanel>
-         <ResizableHandle withHandle />
-         <ResizablePanel defaultSize={75}>
-            <div className="flex h-full items-center justify-center p-6">
-               <span className="font-semibold">Content</span>
-            </div>
-         </ResizablePanel>
-      </ResizablePanelGroup>
-   )
-}
diff --git a/apps/web/registry/default/example/resizable-vertical.tsx b/apps/web/registry/default/example/resizable-vertical.tsx
deleted file mode 100644
index 52d4fad7..00000000
--- a/apps/web/registry/default/example/resizable-vertical.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-   ResizableHandle,
-   ResizablePanel,
-   ResizablePanelGroup,
-} from '~/registry/default/ui/resizable'
-
-export default function ResizableDemo() {
-   return (
-      <ResizablePanelGroup
-         direction="vertical"
-         className="min-h-[200px] max-w-md rounded-lg border"
-      >
-         <ResizablePanel defaultSize={25}>
-            <div className="flex h-full items-center justify-center p-6">
-               <span className="font-semibold">Header</span>
-            </div>
-         </ResizablePanel>
-         <ResizableHandle />
-         <ResizablePanel defaultSize={75}>
-            <div className="flex h-full items-center justify-center p-6">
-               <span className="font-semibold">Content</span>
-            </div>
-         </ResizablePanel>
-      </ResizablePanelGroup>
-   )
-}
diff --git a/apps/web/registry/default/example/retro-grid-demo.tsx b/apps/web/registry/default/example/retro-grid-demo.tsx
deleted file mode 100644
index 5364a03e..00000000
--- a/apps/web/registry/default/example/retro-grid-demo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client'
-
-import RetroGrid from '~/registry/default/ui/retro-grid'
-
-function RetroGridDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <span className="pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent">
-            Retro Grid
-         </span>
-
-         <RetroGrid />
-      </div>
-   )
-}
-
-export default RetroGridDemo
diff --git a/apps/web/registry/default/example/ripple-demo.tsx b/apps/web/registry/default/example/ripple-demo.tsx
deleted file mode 100644
index 58e4e699..00000000
--- a/apps/web/registry/default/example/ripple-demo.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import Ripple from '~/registry/default/ui/ripple'
-
-function RippleDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white">
-            Ripple
-         </p>
-         <Ripple />
-      </div>
-   )
-}
-
-export default RippleDemo
diff --git a/apps/web/registry/default/example/safari-demo-2.tsx b/apps/web/registry/default/example/safari-demo-2.tsx
deleted file mode 100644
index 55453101..00000000
--- a/apps/web/registry/default/example/safari-demo-2.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Safari from '~/registry/default/ui/safari'
-
-export default function SafariDemo() {
-   return (
-      <div className="relative">
-         <Safari
-            url="nyxbui.design"
-            className="size-full"
-            src="https://via.placeholder.com/1200x750"
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/safari-demo.tsx b/apps/web/registry/default/example/safari-demo.tsx
deleted file mode 100644
index bd00c43b..00000000
--- a/apps/web/registry/default/example/safari-demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Safari from '~/registry/default/ui/safari'
-
-export default function SafariDemo() {
-   return (
-      <div className="relative">
-         <Safari url="nyxbui.design" className="size-full" />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/scratch-to-reveal-demo.tsx b/apps/web/registry/default/example/scratch-to-reveal-demo.tsx
deleted file mode 100644
index 461eb627..00000000
--- a/apps/web/registry/default/example/scratch-to-reveal-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import ScratchToReveal from '~/registry/default/ui/scratch-to-reveal'
-
-function ScratchToRevealDemo() {
-   const handleComplete = () => {
-      // Do Something
-   }
-
-   return (
-      <div>
-         <ScratchToReveal
-            width={250}
-            height={250}
-            minScratchPercentage={70}
-            className="flex items-center justify-center overflow-hidden rounded-2xl border-2 bg-gray-100"
-            onComplete={handleComplete}
-         >
-            <p className="text-9xl">😎</p>
-         </ScratchToReveal>
-      </div>
-   )
-}
-
-export default ScratchToRevealDemo
diff --git a/apps/web/registry/default/example/scroll-area-demo.tsx b/apps/web/registry/default/example/scroll-area-demo.tsx
deleted file mode 100644
index f441b86f..00000000
--- a/apps/web/registry/default/example/scroll-area-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react'
-
-import { ScrollArea } from '~/registry/default/ui/scroll-area'
-import { Separator } from '~/registry/default/ui/separator'
-
-const tags = Array.from({ length: 50 }).map(
-   (_, i, a) => `v1.2.0-beta.${a.length - i}`,
-)
-
-export default function ScrollAreaDemo() {
-   return (
-      <ScrollArea className="h-72 w-48 rounded-md border">
-         <div className="p-4">
-            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
-            {tags.map(tag => (
-               <>
-                  <div key={tag} className="text-sm">
-                     {tag}
-                  </div>
-                  <Separator className="my-2" />
-               </>
-            ))}
-         </div>
-      </ScrollArea>
-   )
-}
diff --git a/apps/web/registry/default/example/scroll-area-horizontal-demo.tsx b/apps/web/registry/default/example/scroll-area-horizontal-demo.tsx
deleted file mode 100644
index 35f47023..00000000
--- a/apps/web/registry/default/example/scroll-area-horizontal-demo.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from 'react'
-import Image from 'next/image'
-
-import { ScrollArea, ScrollBar } from '~/registry/default/ui/scroll-area'
-
-export interface Artwork {
-   artist: string
-   art: string
-}
-
-export const works: Artwork[] = [
-   {
-      artist: 'Ornella Binni',
-      art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
-   },
-   {
-      artist: 'Tom Byrom',
-      art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
-   },
-   {
-      artist: 'Vladimir Malyavko',
-      art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
-   },
-]
-
-export default function ScrollAreaHorizontalDemo() {
-   return (
-      <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
-         <div className="flex w-max space-x-4 p-4">
-            {works.map(artwork => (
-               <figure key={artwork.artist} className="shrink-0">
-                  <div className="overflow-hidden rounded-md">
-                     <Image
-                        src={artwork.art}
-                        alt={`Photo by ${artwork.artist}`}
-                        className="aspect-[3/4] size-fit object-cover"
-                        width={300}
-                        height={400}
-                     />
-                  </div>
-                  <figcaption className="text-muted-foreground pt-2 text-xs">
-                     Photo by
-                     {' '}
-                     <span className="text-foreground font-semibold">
-                        {artwork.artist}
-                     </span>
-                  </figcaption>
-               </figure>
-            ))}
-         </div>
-         <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-   )
-}
diff --git a/apps/web/registry/default/example/scroll-based-velocity-demo.tsx b/apps/web/registry/default/example/scroll-based-velocity-demo.tsx
deleted file mode 100644
index 8e147298..00000000
--- a/apps/web/registry/default/example/scroll-based-velocity-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { VelocityScroll } from '~/registry/default/ui/scroll-based-velocity'
-
-export default function ScrollBasedVelocityDemo() {
-   return (
-      <VelocityScroll
-         text="Velocity Scroll"
-         default_velocity={5}
-         className="font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/scroll-progress-demo.tsx b/apps/web/registry/default/example/scroll-progress-demo.tsx
deleted file mode 100644
index e7e135aa..00000000
--- a/apps/web/registry/default/example/scroll-progress-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import ScrollProgress from '~/registry/default/ui/scroll-progress'
-
-const dummyContent = Array.from({ length: 10 }, (_, i) => (
-   <p key={i}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam
-      lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra
-      nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget
-      libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut
-      porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies
-      a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-   </p>
-))
-
-function ScrollProgressDemo() {
-   return (
-      <div>
-         <ScrollProgress className="top-[65px]" />
-         <strong>Note: The scroll progress is shown below the navbar of the page.</strong>
-         {dummyContent}
-      </div>
-   )
-}
-
-export default ScrollProgressDemo
diff --git a/apps/web/registry/default/example/select-demo.tsx b/apps/web/registry/default/example/select-demo.tsx
deleted file mode 100644
index 68be4cb1..00000000
--- a/apps/web/registry/default/example/select-demo.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react'
-
-import {
-   Select,
-   SelectContent,
-   SelectGroup,
-   SelectItem,
-   SelectLabel,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-
-export default function SelectDemo() {
-   return (
-      <Select>
-         <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Select a fruit" />
-         </SelectTrigger>
-         <SelectContent>
-            <SelectGroup>
-               <SelectLabel>Fruits</SelectLabel>
-               <SelectItem value="apple">Apple</SelectItem>
-               <SelectItem value="banana">Banana</SelectItem>
-               <SelectItem value="blueberry">Blueberry</SelectItem>
-               <SelectItem value="grapes">Grapes</SelectItem>
-               <SelectItem value="pineapple">Pineapple</SelectItem>
-            </SelectGroup>
-         </SelectContent>
-      </Select>
-   )
-}
diff --git a/apps/web/registry/default/example/select-form.tsx b/apps/web/registry/default/example/select-form.tsx
deleted file mode 100644
index 63463028..00000000
--- a/apps/web/registry/default/example/select-form.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const FormSchema = z.object({
-   email: z
-      .string({
-         required_error: 'Please select an email to display.',
-      })
-      .email(),
-})
-
-export default function SelectForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="email"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Email</FormLabel>
-                     <Select onValueChange={field.onChange} defaultValue={field.value}>
-                        <FormControl>
-                           <SelectTrigger>
-                              <SelectValue placeholder="Select a verified email to display" />
-                           </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                           <SelectItem value="m@example.com">m@example.com</SelectItem>
-                           <SelectItem value="m@google.com">m@google.com</SelectItem>
-                           <SelectItem value="m@support.com">m@support.com</SelectItem>
-                        </SelectContent>
-                     </Select>
-                     <FormDescription>
-                        You can manage email addresses in your
-                        {' '}
-                        <Link href="/examples/forms">email settings</Link>
-                        .
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/select-scrollable.tsx b/apps/web/registry/default/example/select-scrollable.tsx
deleted file mode 100644
index 537961c0..00000000
--- a/apps/web/registry/default/example/select-scrollable.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from 'react'
-
-import {
-   Select,
-   SelectContent,
-   SelectGroup,
-   SelectItem,
-   SelectLabel,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/default/ui/select'
-
-export default function SelectScrollable() {
-   return (
-      <Select>
-         <SelectTrigger className="w-[280px]">
-            <SelectValue placeholder="Select a timezone" />
-         </SelectTrigger>
-         <SelectContent>
-            <SelectGroup>
-               <SelectLabel>North America</SelectLabel>
-               <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
-               <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
-               <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
-               <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
-               <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
-               <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
-            </SelectGroup>
-            <SelectGroup>
-               <SelectLabel>Europe & Africa</SelectLabel>
-               <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
-               <SelectItem value="cet">Central European Time (CET)</SelectItem>
-               <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
-               <SelectItem value="west">
-                  Western European Summer Time (WEST)
-               </SelectItem>
-               <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
-               <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
-            </SelectGroup>
-            <SelectGroup>
-               <SelectLabel>Asia</SelectLabel>
-               <SelectItem value="msk">Moscow Time (MSK)</SelectItem>
-               <SelectItem value="ist">India Standard Time (IST)</SelectItem>
-               <SelectItem value="cst_china">China Standard Time (CST)</SelectItem>
-               <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
-               <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
-               <SelectItem value="ist_indonesia">
-                  Indonesia Central Standard Time (WITA)
-               </SelectItem>
-            </SelectGroup>
-            <SelectGroup>
-               <SelectLabel>Australia & Pacific</SelectLabel>
-               <SelectItem value="awst">
-                  Australian Western Standard Time (AWST)
-               </SelectItem>
-               <SelectItem value="acst">
-                  Australian Central Standard Time (ACST)
-               </SelectItem>
-               <SelectItem value="aest">
-                  Australian Eastern Standard Time (AEST)
-               </SelectItem>
-               <SelectItem value="nzst">New Zealand Standard Time (NZST)</SelectItem>
-               <SelectItem value="fjt">Fiji Time (FJT)</SelectItem>
-            </SelectGroup>
-            <SelectGroup>
-               <SelectLabel>South America</SelectLabel>
-               <SelectItem value="art">Argentina Time (ART)</SelectItem>
-               <SelectItem value="bot">Bolivia Time (BOT)</SelectItem>
-               <SelectItem value="brt">Brasilia Time (BRT)</SelectItem>
-               <SelectItem value="clt">Chile Standard Time (CLT)</SelectItem>
-            </SelectGroup>
-         </SelectContent>
-      </Select>
-   )
-}
diff --git a/apps/web/registry/default/example/separate-away-demo.tsx b/apps/web/registry/default/example/separate-away-demo.tsx
deleted file mode 100644
index 62dbe7ed..00000000
--- a/apps/web/registry/default/example/separate-away-demo.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { SeparateAway } from '~/registry/default/ui/separate-away'
-
-export default async function SeparateAwayDemo() {
-   return (
-      <SeparateAway
-         upper_text="Separate"
-         lower_text="Away"
-         duration={1.5}
-         hidden_opacity={0}
-         visible_opacity={1}
-         className="font-display text-center text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/separator-demo.tsx b/apps/web/registry/default/example/separator-demo.tsx
deleted file mode 100644
index 8fca8136..00000000
--- a/apps/web/registry/default/example/separator-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Separator } from '~/registry/default/ui/separator'
-
-export default function SeparatorDemo() {
-   return (
-      <div>
-         <div className="space-y-1">
-            <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-            <p className="text-muted-foreground text-sm">
-               An open-source UI component library.
-            </p>
-         </div>
-         <Separator className="my-4" />
-         <div className="flex h-5 items-center space-x-4 text-sm">
-            <div>Blog</div>
-            <Separator orientation="vertical" />
-            <div>Docs</div>
-            <Separator orientation="vertical" />
-            <div>Source</div>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/sheet-demo.tsx b/apps/web/registry/default/example/sheet-demo.tsx
deleted file mode 100644
index 0e66ed26..00000000
--- a/apps/web/registry/default/example/sheet-demo.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Sheet,
-   SheetClose,
-   SheetContent,
-   SheetDescription,
-   SheetFooter,
-   SheetHeader,
-   SheetTitle,
-   SheetTrigger,
-} from '~/registry/default/ui/sheet'
-
-export default function SheetDemo() {
-   return (
-      <Sheet>
-         <SheetTrigger asChild>
-            <Button variant="outline">Open</Button>
-         </SheetTrigger>
-         <SheetContent>
-            <SheetHeader>
-               <SheetTitle>Edit profile</SheetTitle>
-               <SheetDescription>
-                  Make changes to your profile here. Click save when you're done.
-               </SheetDescription>
-            </SheetHeader>
-            <div className="grid gap-4 py-4">
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="name" className="text-right">
-                     Name
-                  </Label>
-                  <Input id="name" value="Pedro Duarte" className="col-span-3" />
-               </div>
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="username" className="text-right">
-                     Username
-                  </Label>
-                  <Input id="username" value="~peduarte" className="col-span-3" />
-               </div>
-            </div>
-            <SheetFooter>
-               <SheetClose asChild>
-                  <Button type="submit">Save changes</Button>
-               </SheetClose>
-            </SheetFooter>
-         </SheetContent>
-      </Sheet>
-   )
-}
diff --git a/apps/web/registry/default/example/sheet-side.tsx b/apps/web/registry/default/example/sheet-side.tsx
deleted file mode 100644
index 0cbef613..00000000
--- a/apps/web/registry/default/example/sheet-side.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Sheet,
-   SheetClose,
-   SheetContent,
-   SheetDescription,
-   SheetFooter,
-   SheetHeader,
-   SheetTitle,
-   SheetTrigger,
-} from '~/registry/default/ui/sheet'
-
-const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
-
-type SheetSide = (typeof SHEET_SIDES)[number]
-
-export default function SheetSide() {
-   return (
-      <div className="grid grid-cols-2 gap-2">
-         {SHEET_SIDES.map(side => (
-            <Sheet key={side}>
-               <SheetTrigger asChild>
-                  <Button variant="outline">{side}</Button>
-               </SheetTrigger>
-               <SheetContent side={side}>
-                  <SheetHeader>
-                     <SheetTitle>Edit profile</SheetTitle>
-                     <SheetDescription>
-                        Make changes to your profile here. Click save when you're done.
-                     </SheetDescription>
-                  </SheetHeader>
-                  <div className="grid gap-4 py-4">
-                     <div className="grid grid-cols-4 items-center gap-4">
-                        <Label htmlFor="name" className="text-right">
-                           Name
-                        </Label>
-                        <Input id="name" value="Pedro Duarte" className="col-span-3" />
-                     </div>
-                     <div className="grid grid-cols-4 items-center gap-4">
-                        <Label htmlFor="username" className="text-right">
-                           Username
-                        </Label>
-                        <Input id="username" value="~peduarte" className="col-span-3" />
-                     </div>
-                  </div>
-                  <SheetFooter>
-                     <SheetClose asChild>
-                        <Button type="submit">Save changes</Button>
-                     </SheetClose>
-                  </SheetFooter>
-               </SheetContent>
-            </Sheet>
-         ))}
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/shimmer-button-demo.tsx b/apps/web/registry/default/example/shimmer-button-demo.tsx
deleted file mode 100644
index 801cb4a8..00000000
--- a/apps/web/registry/default/example/shimmer-button-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import ShimmerButton from '~/registry/default/ui/shimmer-button'
-
-export default function ShimmerButtonDemo() {
-   return (
-      <div className="z-10 flex min-h-64 items-center justify-center">
-         <ShimmerButton className="shadow-2xl">
-            <span className="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10">
-               Shimmer Button
-            </span>
-         </ShimmerButton>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/shine-border-demo-2.tsx b/apps/web/registry/default/example/shine-border-demo-2.tsx
deleted file mode 100644
index c893a273..00000000
--- a/apps/web/registry/default/example/shine-border-demo-2.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ShineBorder from '~/registry/default/ui/shine-border'
-
-export default function ShineBorderDemo() {
-   return (
-      <ShineBorder className="text-center text-2xl font-bold capitalize">
-         Shine Border
-      </ShineBorder>
-   )
-}
diff --git a/apps/web/registry/default/example/shine-border-demo.tsx b/apps/web/registry/default/example/shine-border-demo.tsx
deleted file mode 100644
index 80f582cb..00000000
--- a/apps/web/registry/default/example/shine-border-demo.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import ShineBorder from '~/registry/default/ui/shine-border'
-
-export default function ShineBorderDemo() {
-   return (
-      <ShineBorder
-         className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl"
-         color={['#A07CFE', '#FE8FB5', '#FFBE7B']}
-      >
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Shine Border
-         </span>
-      </ShineBorder>
-   )
-}
diff --git a/apps/web/registry/default/example/shiny-button-demo.tsx b/apps/web/registry/default/example/shiny-button-demo.tsx
deleted file mode 100644
index 157895ad..00000000
--- a/apps/web/registry/default/example/shiny-button-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import ShinyButton from '~/registry/default/ui/shiny-button'
-
-export default function ShinyButtonDemo() {
-   return <ShinyButton text="Shiny Button" />
-}
diff --git a/apps/web/registry/default/example/skeleton-card.tsx b/apps/web/registry/default/example/skeleton-card.tsx
deleted file mode 100644
index 52b81a6a..00000000
--- a/apps/web/registry/default/example/skeleton-card.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Skeleton } from '~/registry/default/ui/skeleton'
-
-export default function SkeletonCard() {
-   return (
-      <div className="flex flex-col space-y-3">
-         <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-         <div className="space-y-2">
-            <Skeleton className="h-4 w-[250px]" />
-            <Skeleton className="h-4 w-[200px]" />
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/skeleton-demo.tsx b/apps/web/registry/default/example/skeleton-demo.tsx
deleted file mode 100644
index ae41d03a..00000000
--- a/apps/web/registry/default/example/skeleton-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Skeleton } from '~/registry/default/ui/skeleton'
-
-export default function SkeletonDemo() {
-   return (
-      <div className="flex items-center space-x-4">
-         <Skeleton className="size-12 rounded-full" />
-         <div className="space-y-2">
-            <Skeleton className="h-4 w-[250px]" />
-            <Skeleton className="h-4 w-[200px]" />
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/slider-demo.tsx b/apps/web/registry/default/example/slider-demo.tsx
deleted file mode 100644
index ec1a6d32..00000000
--- a/apps/web/registry/default/example/slider-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/default/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderDemo({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[50]}
-         max={100}
-         step={1}
-         className={ny('w-3/5', className)}
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/slider-disabled.tsx b/apps/web/registry/default/example/slider-disabled.tsx
deleted file mode 100644
index 01a4c249..00000000
--- a/apps/web/registry/default/example/slider-disabled.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/default/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderDisabled({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[50]}
-         max={100}
-         step={1}
-         className={ny('w-3/5', className)}
-         disabled
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/slider-format-label-side.tsx b/apps/web/registry/default/example/slider-format-label-side.tsx
deleted file mode 100644
index 500ddff4..00000000
--- a/apps/web/registry/default/example/slider-format-label-side.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/default/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderFormatLabelSide({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[2]}
-         max={5}
-         step={1}
-         className={ny('w-3/5', className)}
-         formatLabel={value => `${value} points`}
-         formatLabelSide="left"
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/slider-format-label.tsx b/apps/web/registry/default/example/slider-format-label.tsx
deleted file mode 100644
index 3b66cedb..00000000
--- a/apps/web/registry/default/example/slider-format-label.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/default/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderFormatLabel({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[2]}
-         max={5}
-         step={1}
-         className={ny('w-3/5', className)}
-         formatLabel={value => `${value} points`}
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/slider-inverted.tsx b/apps/web/registry/default/example/slider-inverted.tsx
deleted file mode 100644
index 37afccd1..00000000
--- a/apps/web/registry/default/example/slider-inverted.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/default/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderInverted({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[50]}
-         max={100}
-         step={1}
-         className={ny('w-3/5', className)}
-         inverted
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/slider-range.tsx b/apps/web/registry/default/example/slider-range.tsx
deleted file mode 100644
index f58de392..00000000
--- a/apps/web/registry/default/example/slider-range.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/default/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderRange({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[25, 75]}
-         max={100}
-         step={1}
-         className={ny('w-3/5', className)}
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/slider-ranges.tsx b/apps/web/registry/default/example/slider-ranges.tsx
deleted file mode 100644
index dccb260f..00000000
--- a/apps/web/registry/default/example/slider-ranges.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/default/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderDemo({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[50, 75]}
-         max={100}
-         step={1}
-         className={ny('w-3/5', className)}
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/slider-tick-marks-full.tsx b/apps/web/registry/default/example/slider-tick-marks-full.tsx
deleted file mode 100644
index 23665967..00000000
--- a/apps/web/registry/default/example/slider-tick-marks-full.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/default/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderTickMarksFull({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[2]}
-         max={5}
-         step={1}
-         className={ny('w-3/5', className)}
-         showSteps="full"
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/slider-tick-marks-half.tsx b/apps/web/registry/default/example/slider-tick-marks-half.tsx
deleted file mode 100644
index 62512f5b..00000000
--- a/apps/web/registry/default/example/slider-tick-marks-half.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/default/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderTickMarksHalf({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[2]}
-         max={5}
-         step={1}
-         className={ny('w-3/5', className)}
-         showSteps="half"
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/slider-vertical.tsx b/apps/web/registry/default/example/slider-vertical.tsx
deleted file mode 100644
index 032e689d..00000000
--- a/apps/web/registry/default/example/slider-vertical.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Slider } from '~/registry/default/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderVertical({ className, ...props }: SliderProps) {
-   return (
-      <>
-         {/* Vertical slider needs its parent container to define the height */}
-         <div className="h-64">
-            <Slider
-               defaultValue={[50]}
-               max={100}
-               step={1}
-               orientation="vertical"
-               className={className}
-               {...props}
-            />
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/sonner-demo.tsx b/apps/web/registry/default/example/sonner-demo.tsx
deleted file mode 100644
index 2f949672..00000000
--- a/apps/web/registry/default/example/sonner-demo.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { toast } from 'sonner'
-
-import { Button } from '~/registry/default/ui/button'
-
-export default function SonnerDemo() {
-   return (
-      <Button
-         variant="outline"
-         onClick={() =>
-            toast('Event has been created', {
-               description: 'Sunday, December 03, 2023 at 9:00 AM',
-               action: {
-                  label: 'Undo',
-
-                  // eslint-disable-next-line no-console
-                  onClick: () => console.log('Undo'),
-               },
-            })}
-      >
-         Show Toast
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/example/sparkles-text-demo.tsx b/apps/web/registry/default/example/sparkles-text-demo.tsx
deleted file mode 100644
index 4edde09c..00000000
--- a/apps/web/registry/default/example/sparkles-text-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import SparklesText from '~/registry/default/ui/sparkles-text'
-
-export default async function SparklesTextDemo() {
-   return <SparklesText text="Nyxb UI" />
-}
diff --git a/apps/web/registry/default/example/star-rating-colored.tsx b/apps/web/registry/default/example/star-rating-colored.tsx
deleted file mode 100644
index 7b53e142..00000000
--- a/apps/web/registry/default/example/star-rating-colored.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react'
-import { StarRating } from '~/registry/default/ui/star-rating'
-
-export default function StarRatingColored() {
-   const [value, setValue] = React.useState<number>(3)
-   return <StarRating value={value} setValue={setValue} iconProps={{ className: 'fill-yellow-500 stroke-yellow-500' }} />
-}
diff --git a/apps/web/registry/default/example/star-rating-demo.tsx b/apps/web/registry/default/example/star-rating-demo.tsx
deleted file mode 100644
index e22cb25d..00000000
--- a/apps/web/registry/default/example/star-rating-demo.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react'
-import { StarRating } from '~/registry/default/ui/star-rating'
-
-export default function StarRatingDemo() {
-   const [value, setValue] = React.useState<number>(3)
-   return <StarRating value={value} setValue={setValue} />
-}
diff --git a/apps/web/registry/default/example/star-rating-icon.tsx b/apps/web/registry/default/example/star-rating-icon.tsx
deleted file mode 100644
index 44156f25..00000000
--- a/apps/web/registry/default/example/star-rating-icon.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react'
-import { Heart } from 'lucide-react'
-import { StarRating } from '~/registry/default/ui/star-rating'
-
-export default function StarRatingIcon() {
-   const [value, setValue] = React.useState<number>(3)
-   return <StarRating value={value} setValue={setValue} icon={Heart} />
-}
diff --git a/apps/web/registry/default/example/stepper-clickable-steps.tsx b/apps/web/registry/default/example/stepper-clickable-steps.tsx
deleted file mode 100644
index b75b5536..00000000
--- a/apps/web/registry/default/example/stepper-clickable-steps.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import type {
-   StepItem,
-} from '~/registry/default/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/default/ui/stepper'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper
-            initialStep={0}
-            steps={steps}
-            onClickStep={(step, setStep) => {
-               toast({
-                  title: 'Step clicked',
-                  description:
-              'This event is executed globally for all steps. If you want to have an event for a specific step, use the `onClickStep` prop of the independent step.',
-               })
-               setStep(step)
-            }}
-         >
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/stepper-custom-icons.tsx b/apps/web/registry/default/example/stepper-custom-icons.tsx
deleted file mode 100644
index c5c47515..00000000
--- a/apps/web/registry/default/example/stepper-custom-icons.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Building, Star, User } from 'lucide-react'
-
-import { Button } from '~/registry/default/ui/button'
-import type {
-   StepItem,
-} from '~/registry/default/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/default/ui/stepper'
-
-const steps = [
-   { label: 'Step 1', icon: User },
-   { label: 'Step 2', icon: Building },
-   { label: 'Step 3', icon: Star },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/stepper-custom-styles.tsx b/apps/web/registry/default/example/stepper-custom-styles.tsx
deleted file mode 100644
index 15660e49..00000000
--- a/apps/web/registry/default/example/stepper-custom-styles.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import type {
-   StepItem,
-} from '~/registry/default/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/default/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper
-            initialStep={0}
-            steps={steps}
-            styles={{
-               'step-button-container': ny(
-                  'rounded-none text-purple-700',
-                  'data-[current=true]:border-purple-500 data-[current=true]:bg-purple-50',
-                  'data-[active=true]:border-purple-500 data-[active=true]:bg-purple-500',
-               ),
-               'horizontal-step':
-            'data-[completed=true]:[&:not(:last-child)]:after:bg-purple-500',
-            }}
-            variables={{
-               '--step-icon-size': '60px',
-               '--step-gap': '20px',
-            }}
-         >
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-      isDisabledStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/stepper-demo.tsx b/apps/web/registry/default/example/stepper-demo.tsx
deleted file mode 100644
index 0e7d2d3b..00000000
--- a/apps/web/registry/default/example/stepper-demo.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import type {
-   StepItem,
-} from '~/registry/default/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/default/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-      isDisabledStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/stepper-description.tsx b/apps/web/registry/default/example/stepper-description.tsx
deleted file mode 100644
index e7784db0..00000000
--- a/apps/web/registry/default/example/stepper-description.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import type {
-   StepItem,
-} from '~/registry/default/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/default/ui/stepper'
-
-const steps = [
-   { label: 'Step 1', description: 'Description 1' },
-   { label: 'Step 2', description: 'Description 2' },
-   { label: 'Step 3', description: 'Description 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-      isDisabledStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/stepper-footer-inside.tsx b/apps/web/registry/default/example/stepper-footer-inside.tsx
deleted file mode 100644
index 7ceb67b8..00000000
--- a/apps/web/registry/default/example/stepper-footer-inside.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import type {
-   StepItem,
-} from '~/registry/default/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/default/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper orientation="vertical" initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                     <StepButtons />
-                  </Step>
-               )
-            })}
-            <FinalStep />
-         </Stepper>
-      </div>
-   )
-}
-
-function StepButtons() {
-   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep }
-    = useStepper()
-   return (
-      <div className="mb-4 flex w-full gap-2">
-         <Button
-            disabled={isDisabledStep}
-            onClick={prevStep}
-            size="sm"
-            variant="secondary"
-         >
-            Prev
-         </Button>
-         <Button size="sm" onClick={nextStep}>
-            {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-         </Button>
-      </div>
-   )
-}
-
-function FinalStep() {
-   const { hasCompletedAllSteps, resetSteps } = useStepper()
-
-   if (!hasCompletedAllSteps)
-      return null
-
-   return (
-      <>
-         <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
-            <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-         </div>
-         <div className="flex w-full justify-end gap-2">
-            <Button size="sm" onClick={resetSteps}>
-               Reset
-            </Button>
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/stepper-form.tsx b/apps/web/registry/default/example/stepper-form.tsx
deleted file mode 100644
index df89265c..00000000
--- a/apps/web/registry/default/example/stepper-form.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import * as z from 'zod'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import { Input } from '~/registry/default/ui/input'
-import { Step, Stepper, useStepper } from '~/registry/default/ui/stepper'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const steps = [
-   { label: 'Step 1', description: 'Description 1' },
-   { label: 'Step 2', description: 'Description 2' },
-]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper variant="circle-alt" initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               if (index === 0) {
-                  return (
-                     <Step key={stepProps.label} {...stepProps}>
-                        <FirstStepForm />
-                     </Step>
-                  )
-               }
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <SecondStepForm />
-                  </Step>
-               )
-            })}
-            <MyStepperFooter />
-         </Stepper>
-      </div>
-   )
-}
-
-const FirstFormSchema = z.object({
-   username: z.string().min(2, {
-      message: 'Username must be at least 2 characters.',
-   }),
-})
-
-function FirstStepForm() {
-   const { nextStep } = useStepper()
-
-   const form = useForm<z.infer<typeof FirstFormSchema>>({
-      resolver: zodResolver(FirstFormSchema),
-      defaultValues: {
-         username: '',
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FirstFormSchema>) {
-      nextStep()
-      toast({
-         title: 'First step submitted!',
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <FormField
-               control={form.control}
-               name="username"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Username</FormLabel>
-                     <FormControl>
-                        <Input placeholder="nyxb" {...field} />
-                     </FormControl>
-                     <FormDescription>
-                        This is your public display name.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <StepperFormActions />
-         </form>
-      </Form>
-   )
-}
-
-const SecondFormSchema = z.object({
-   password: z.string().min(8, {
-      message: 'Password must be at least 8 characters.',
-   }),
-})
-
-function SecondStepForm() {
-   const { nextStep } = useStepper()
-
-   const form = useForm<z.infer<typeof SecondFormSchema>>({
-      resolver: zodResolver(SecondFormSchema),
-      defaultValues: {
-         password: '',
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof SecondFormSchema>) {
-      nextStep()
-      toast({
-         title: 'Second step submitted!',
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <FormField
-               control={form.control}
-               name="password"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Password</FormLabel>
-                     <FormControl>
-                        <Input type="password" {...field} />
-                     </FormControl>
-                     <FormDescription>This is your private password.</FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <StepperFormActions />
-         </form>
-      </Form>
-   )
-}
-
-function StepperFormActions() {
-   const {
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-
-   return (
-      <div className="flex w-full justify-end gap-2">
-         {hasCompletedAllSteps
-            ? (
-                  <Button size="sm" onClick={resetSteps}>
-                     Reset
-                  </Button>
-               )
-            : (
-                  <>
-                     <Button
-                        disabled={isDisabledStep}
-                        onClick={prevStep}
-                        size="sm"
-                        variant="secondary"
-                     >
-                        Prev
-                     </Button>
-                     <Button size="sm">
-                        {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                     </Button>
-                  </>
-               )}
-      </div>
-   )
-}
-
-function MyStepperFooter() {
-   const { activeStep, resetSteps, steps } = useStepper()
-
-   if (activeStep !== steps.length)
-      return null
-
-   return (
-      <div className="flex items-center justify-end gap-2">
-         <Button onClick={resetSteps}>Reset Stepper with Form</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/stepper-optional-steps.tsx b/apps/web/registry/default/example/stepper-optional-steps.tsx
deleted file mode 100644
index 3ba9d6e6..00000000
--- a/apps/web/registry/default/example/stepper-optional-steps.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import type {
-   StepItem,
-} from '~/registry/default/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/default/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2', optional: true },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/stepper-orientation.tsx b/apps/web/registry/default/example/stepper-orientation.tsx
deleted file mode 100644
index 267aad81..00000000
--- a/apps/web/registry/default/example/stepper-orientation.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import * as React from 'react'
-
-import { Button } from '~/registry/default/ui/button'
-import { Label } from '~/registry/default/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'
-import type {
-   StepItem,
-   StepperProps,
-} from '~/registry/default/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/default/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperOrientation() {
-   const [orientation, setOrientation]
-    = React.useState<StepperProps['orientation']>('vertical')
-
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <RadioGroup
-            className="mb-2 flex"
-            value={orientation}
-            onValueChange={value =>
-               setOrientation(value as StepperProps['orientation'])}
-         >
-            <Label
-               htmlFor="horizontal"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem
-                  value="horizontal"
-                  id="horizontal"
-                  className="sr-only"
-               />
-               <h2 className="font-medium">Horizontal</h2>
-            </Label>
-            <Label
-               htmlFor="vertical"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem value="vertical" id="vertical" className="sr-only" />
-               <h2 className="font-medium">Vertical</h2>
-            </Label>
-         </RadioGroup>
-         <Stepper orientation={orientation} initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/stepper-scroll-tracking.tsx b/apps/web/registry/default/example/stepper-scroll-tracking.tsx
deleted file mode 100644
index cd369084..00000000
--- a/apps/web/registry/default/example/stepper-scroll-tracking.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import type {
-   StepItem,
-} from '~/registry/default/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/default/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-   { label: 'Step 4' },
-   { label: 'Step 5' },
-   { label: 'Step 6' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper
-            orientation="vertical"
-            initialStep={0}
-            steps={steps}
-            scrollTracking
-         >
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                     <StepButtons />
-                  </Step>
-               )
-            })}
-            <FinalStep />
-         </Stepper>
-      </div>
-   )
-}
-
-function StepButtons() {
-   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep }
-    = useStepper()
-   return (
-      <div className="mb-4 flex w-full gap-2">
-         <Button
-            disabled={isDisabledStep}
-            onClick={prevStep}
-            size="sm"
-            variant="secondary"
-         >
-            Prev
-         </Button>
-         <Button size="sm" onClick={nextStep}>
-            {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-         </Button>
-      </div>
-   )
-}
-
-function FinalStep() {
-   const { hasCompletedAllSteps, resetSteps } = useStepper()
-
-   if (!hasCompletedAllSteps)
-      return null
-
-   return (
-      <>
-         <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
-            <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-         </div>
-         <div className="flex w-full justify-end gap-2">
-            <Button size="sm" onClick={resetSteps}>
-               Reset
-            </Button>
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/stepper-sizes.tsx b/apps/web/registry/default/example/stepper-sizes.tsx
deleted file mode 100644
index 79d4c9fd..00000000
--- a/apps/web/registry/default/example/stepper-sizes.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as React from 'react'
-
-import { Button } from '~/registry/default/ui/button'
-import { Label } from '~/registry/default/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'
-import type {
-   StepItem,
-   StepperProps,
-} from '~/registry/default/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/default/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   const [size, setSize] = React.useState<StepperProps['size']>('md')
-
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <RadioGroup
-            className="mb-2 flex"
-            value={size}
-            onValueChange={value => setSize(value as StepperProps['size'])}
-         >
-            <Label
-               htmlFor="sm"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem value="sm" id="sm" className="sr-only" />
-               <h2 className="font-medium">sm</h2>
-            </Label>
-            <Label
-               htmlFor="md"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem value="md" id="md" className="sr-only" />
-               <h2 className="font-medium">md</h2>
-            </Label>
-            <Label
-               htmlFor="lg"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem value="lg" id="lg" className="sr-only" />
-               <h2 className="font-medium">lg</h2>
-            </Label>
-         </RadioGroup>
-         <Stepper size={size} initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/stepper-state.tsx b/apps/web/registry/default/example/stepper-state.tsx
deleted file mode 100644
index bdb1254a..00000000
--- a/apps/web/registry/default/example/stepper-state.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import type {
-   StepItem,
-} from '~/registry/default/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/default/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper state="error" initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-      isError,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button disabled={isError} size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/stepper-variants.tsx b/apps/web/registry/default/example/stepper-variants.tsx
deleted file mode 100644
index 866b0a16..00000000
--- a/apps/web/registry/default/example/stepper-variants.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import * as React from 'react'
-
-import { Button } from '~/registry/default/ui/button'
-import { Label } from '~/registry/default/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'
-import type {
-   StepItem,
-   StepperProps,
-} from '~/registry/default/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/default/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   const [variant, setVariant]
-    = React.useState<StepperProps['variant']>('circle')
-
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <RadioGroup
-            className="mb-2 flex"
-            value={variant}
-            onValueChange={value => setVariant(value as StepperProps['variant'])}
-         >
-            <Label
-               htmlFor="circle"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem value="circle" id="circle" className="sr-only" />
-               <h2 className="font-medium">circle</h2>
-            </Label>
-            <Label
-               htmlFor="circle-alt"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem
-                  value="circle-alt"
-                  id="circle-alt"
-                  className="sr-only"
-               />
-               <h2 className="font-medium">circle-alt</h2>
-            </Label>
-            <Label
-               htmlFor="line"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem value="line" id="line" className="sr-only" />
-               <h2 className="font-medium">line</h2>
-            </Label>
-         </RadioGroup>
-         <Stepper variant={variant} initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/default/example/switch-demo.tsx b/apps/web/registry/default/example/switch-demo.tsx
deleted file mode 100644
index 2846b54a..00000000
--- a/apps/web/registry/default/example/switch-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Label } from '~/registry/default/ui/label'
-import { Switch } from '~/registry/default/ui/switch'
-
-export default function SwitchDemo() {
-   return (
-      <div className="flex items-center space-x-2">
-         <Switch id="airplane-mode" />
-         <Label htmlFor="airplane-mode">Airplane Mode</Label>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/switch-form.tsx b/apps/web/registry/default/example/switch-form.tsx
deleted file mode 100644
index ff46a52a..00000000
--- a/apps/web/registry/default/example/switch-form.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client'
-
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-} from '~/registry/default/ui/form'
-import { Switch } from '~/registry/default/ui/switch'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const FormSchema = z.object({
-   marketing_emails: z.boolean().default(false).optional(),
-   security_emails: z.boolean(),
-})
-
-export default function SwitchForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-      defaultValues: {
-         security_emails: true,
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
-            <div>
-               <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
-               <div className="space-y-4">
-                  <FormField
-                     control={form.control}
-                     name="marketing_emails"
-                     render={({ field }) => (
-                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                           <div className="space-y-0.5">
-                              <FormLabel className="text-base">
-                                 Marketing emails
-                              </FormLabel>
-                              <FormDescription>
-                                 Receive emails about new products, features, and more.
-                              </FormDescription>
-                           </div>
-                           <FormControl>
-                              <Switch
-                                 checked={field.value}
-                                 onCheckedChange={field.onChange}
-                              />
-                           </FormControl>
-                        </FormItem>
-                     )}
-                  />
-                  <FormField
-                     control={form.control}
-                     name="security_emails"
-                     render={({ field }) => (
-                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                           <div className="space-y-0.5">
-                              <FormLabel className="text-base">Security emails</FormLabel>
-                              <FormDescription>
-                                 Receive emails about your account security.
-                              </FormDescription>
-                           </div>
-                           <FormControl>
-                              <Switch
-                                 checked={field.value}
-                                 onCheckedChange={field.onChange}
-                                 disabled
-                                 aria-readonly
-                              />
-                           </FormControl>
-                        </FormItem>
-                     )}
-                  />
-               </div>
-            </div>
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/table-demo.tsx b/apps/web/registry/default/example/table-demo.tsx
deleted file mode 100644
index c67a9d41..00000000
--- a/apps/web/registry/default/example/table-demo.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-   Table,
-   TableBody,
-   TableCaption,
-   TableCell,
-   TableFooter,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/default/ui/table'
-
-const invoices = [
-   {
-      invoice: 'INV001',
-      paymentStatus: 'Paid',
-      totalAmount: '$250.00',
-      paymentMethod: 'Credit Card',
-   },
-   {
-      invoice: 'INV002',
-      paymentStatus: 'Pending',
-      totalAmount: '$150.00',
-      paymentMethod: 'PayPal',
-   },
-   {
-      invoice: 'INV003',
-      paymentStatus: 'Unpaid',
-      totalAmount: '$350.00',
-      paymentMethod: 'Bank Transfer',
-   },
-   {
-      invoice: 'INV004',
-      paymentStatus: 'Paid',
-      totalAmount: '$450.00',
-      paymentMethod: 'Credit Card',
-   },
-   {
-      invoice: 'INV005',
-      paymentStatus: 'Paid',
-      totalAmount: '$550.00',
-      paymentMethod: 'PayPal',
-   },
-   {
-      invoice: 'INV006',
-      paymentStatus: 'Pending',
-      totalAmount: '$200.00',
-      paymentMethod: 'Bank Transfer',
-   },
-   {
-      invoice: 'INV007',
-      paymentStatus: 'Unpaid',
-      totalAmount: '$300.00',
-      paymentMethod: 'Credit Card',
-   },
-]
-
-export default function TableDemo() {
-   return (
-      <Table>
-         <TableCaption>A list of your recent invoices.</TableCaption>
-         <TableHeader>
-            <TableRow>
-               <TableHead className="w-[100px]">Invoice</TableHead>
-               <TableHead>Status</TableHead>
-               <TableHead>Method</TableHead>
-               <TableHead className="text-right">Amount</TableHead>
-            </TableRow>
-         </TableHeader>
-         <TableBody>
-            {invoices.map(invoice => (
-               <TableRow key={invoice.invoice}>
-                  <TableCell className="font-medium">{invoice.invoice}</TableCell>
-                  <TableCell>{invoice.paymentStatus}</TableCell>
-                  <TableCell>{invoice.paymentMethod}</TableCell>
-                  <TableCell className="text-right">{invoice.totalAmount}</TableCell>
-               </TableRow>
-            ))}
-         </TableBody>
-         <TableFooter>
-            <TableRow>
-               <TableCell colSpan={3}>Total</TableCell>
-               <TableCell className="text-right">$2,500.00</TableCell>
-            </TableRow>
-         </TableFooter>
-      </Table>
-   )
-}
diff --git a/apps/web/registry/default/example/tabs-demo.tsx b/apps/web/registry/default/example/tabs-demo.tsx
deleted file mode 100644
index 1ac3c299..00000000
--- a/apps/web/registry/default/example/tabs-demo.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { Label } from '~/registry/default/ui/label'
-import {
-   Tabs,
-   TabsContent,
-   TabsList,
-   TabsTrigger,
-} from '~/registry/default/ui/tabs'
-
-export default function TabsDemo() {
-   return (
-      <Tabs defaultValue="account" className="w-[400px]">
-         <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="account">Account</TabsTrigger>
-            <TabsTrigger value="password">Password</TabsTrigger>
-         </TabsList>
-         <TabsContent value="account">
-            <Card>
-               <CardHeader>
-                  <CardTitle>Account</CardTitle>
-                  <CardDescription>
-                     Make changes to your account here. Click save when you're done.
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="space-y-2">
-                  <div className="space-y-1">
-                     <Label htmlFor="name">Name</Label>
-                     <Input id="name" defaultValue="Pedro Duarte" />
-                  </div>
-                  <div className="space-y-1">
-                     <Label htmlFor="username">Username</Label>
-                     <Input id="username" defaultValue="~peduarte" />
-                  </div>
-               </CardContent>
-               <CardFooter>
-                  <Button>Save changes</Button>
-               </CardFooter>
-            </Card>
-         </TabsContent>
-         <TabsContent value="password">
-            <Card>
-               <CardHeader>
-                  <CardTitle>Password</CardTitle>
-                  <CardDescription>
-                     Change your password here. After saving, you'll be logged out.
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="space-y-2">
-                  <div className="space-y-1">
-                     <Label htmlFor="current">Current password</Label>
-                     <Input id="current" type="password" />
-                  </div>
-                  <div className="space-y-1">
-                     <Label htmlFor="new">New password</Label>
-                     <Input id="new" type="password" />
-                  </div>
-               </CardContent>
-               <CardFooter>
-                  <Button>Save password</Button>
-               </CardFooter>
-            </Card>
-         </TabsContent>
-      </Tabs>
-   )
-}
diff --git a/apps/web/registry/default/example/text-reveal-demo.tsx b/apps/web/registry/default/example/text-reveal-demo.tsx
deleted file mode 100644
index cb37064e..00000000
--- a/apps/web/registry/default/example/text-reveal-demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import TextReveal from '~/registry/default/ui/text-reveal'
-
-export default async function TextRevealDemo() {
-   return (
-      <div className="z-10 flex min-h-64 items-center justify-center rounded-lg border bg-white dark:bg-black">
-         <TextReveal text="Nyxb UI will change the way you design." />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/textarea-demo.tsx b/apps/web/registry/default/example/textarea-demo.tsx
deleted file mode 100644
index 8d0ccfb2..00000000
--- a/apps/web/registry/default/example/textarea-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Textarea } from '~/registry/default/ui/textarea'
-
-export default function TextareaDemo() {
-   return <Textarea placeholder="Type your message here." />
-}
diff --git a/apps/web/registry/default/example/textarea-disabled.tsx b/apps/web/registry/default/example/textarea-disabled.tsx
deleted file mode 100644
index 2e5a88da..00000000
--- a/apps/web/registry/default/example/textarea-disabled.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Textarea } from '~/registry/default/ui/textarea'
-
-export default function TextareaDisabled() {
-   return <Textarea placeholder="Type your message here." disabled />
-}
diff --git a/apps/web/registry/default/example/textarea-form.tsx b/apps/web/registry/default/example/textarea-form.tsx
deleted file mode 100644
index f0147cc5..00000000
--- a/apps/web/registry/default/example/textarea-form.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-'use client'
-
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import { Textarea } from '~/registry/default/ui/textarea'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const FormSchema = z.object({
-   bio: z
-      .string()
-      .min(10, {
-         message: 'Bio must be at least 10 characters.',
-      })
-      .max(160, {
-         message: 'Bio must not be longer than 30 characters.',
-      }),
-})
-
-export default function TextareaForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="bio"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Bio</FormLabel>
-                     <FormControl>
-                        <Textarea
-                           placeholder="Tell us a little bit about yourself"
-                           className="resize-none"
-                           {...field}
-                        />
-                     </FormControl>
-                     <FormDescription>
-                        You can
-                        {' '}
-                        <span>~mention</span>
-                        {' '}
-                        other users and organizations.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/default/example/textarea-with-button.tsx b/apps/web/registry/default/example/textarea-with-button.tsx
deleted file mode 100644
index 55cfd6a8..00000000
--- a/apps/web/registry/default/example/textarea-with-button.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import { Textarea } from '~/registry/default/ui/textarea'
-
-export default function TextareaWithButton() {
-   return (
-      <div className="grid w-full gap-2">
-         <Textarea placeholder="Type your message here." />
-         <Button>Send message</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/textarea-with-label.tsx b/apps/web/registry/default/example/textarea-with-label.tsx
deleted file mode 100644
index 5a0dedec..00000000
--- a/apps/web/registry/default/example/textarea-with-label.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Label } from '~/registry/default/ui/label'
-import { Textarea } from '~/registry/default/ui/textarea'
-
-export default function TextareaWithLabel() {
-   return (
-      <div className="grid w-full gap-1.5">
-         <Label htmlFor="message">Your message</Label>
-         <Textarea placeholder="Type your message here." id="message" />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/textarea-with-text.tsx b/apps/web/registry/default/example/textarea-with-text.tsx
deleted file mode 100644
index bf8c06d7..00000000
--- a/apps/web/registry/default/example/textarea-with-text.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Label } from '~/registry/default/ui/label'
-import { Textarea } from '~/registry/default/ui/textarea'
-
-export default function TextareaWithText() {
-   return (
-      <div className="grid w-full gap-1.5">
-         <Label htmlFor="message-2">Your Message</Label>
-         <Textarea placeholder="Type your message here." id="message-2" />
-         <p className="text-muted-foreground text-sm">
-            Your message will be copied to the support team.
-         </p>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/timeline-alternate.tsx b/apps/web/registry/default/example/timeline-alternate.tsx
deleted file mode 100644
index 66f15bf1..00000000
--- a/apps/web/registry/default/example/timeline-alternate.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react'
-
-import {
-   Timeline,
-   TimelineContent,
-   TimelineDot,
-   TimelineHeading,
-   TimelineItem,
-   TimelineLine,
-} from '~/registry/default/ui/timeline'
-
-export default function TimelineAlternate() {
-   return (
-      <Timeline positions="center">
-         <TimelineItem status="done">
-            <TimelineHeading side="left">Plan!</TimelineHeading>
-            <TimelineDot status="done" />
-            <TimelineLine done />
-            <TimelineContent side="left">
-               Before diving into coding, it is crucial to plan your software project
-               thoroughly. This involves defining the project scope, setting clear
-               objectives, and identifying the target audience. Additionally,
-               creating a timeline and allocating resources appropriately will
-               contribute to a successful development process.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="right" className="text-destructive">
-               Design
-            </TimelineHeading>
-            <TimelineDot status="error" />
-            <TimelineLine done />
-            <TimelineContent>
-               Designing your software involves creating a blueprint that outlines
-               the structure, user interface, and functionality of your application.
-               Consider user experience (UX) principles, wireframing, and prototyping
-               to ensure an intuitive and visually appealing design.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="left">Code</TimelineHeading>
-            <TimelineDot status="current" />
-            <TimelineLine />
-            <TimelineContent side="left">
-               The coding phase involves translating your design into actual code.
-               Choose a programming language and framework that aligns with your
-               project requirements. Follow best practices, such as modular and
-               reusable code, to enhance maintainability and scalability. Regularly
-               test your code to identify and fix any bugs or errors.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading>Test</TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent>
-               Thorough testing is essential to ensure the quality and reliability of
-               your software. Implement different testing methodologies, including
-               unit testing, integration testing, and user acceptance testing. This
-               helps identify and rectify any issues before deploying the software.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading side="left">Deploy</TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent side="left">
-               Once your software has passed rigorous testing, it's time to deploy
-               it. Consider the deployment environment, whether it's on-premises or
-               in the cloud. Ensure proper documentation and provide clear
-               instructions for installation and configuration.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineDot />
-            <TimelineHeading>Done!</TimelineHeading>
-         </TimelineItem>
-      </Timeline>
-   )
-}
diff --git a/apps/web/registry/default/example/timeline-demo.tsx b/apps/web/registry/default/example/timeline-demo.tsx
deleted file mode 100644
index ad234a02..00000000
--- a/apps/web/registry/default/example/timeline-demo.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react'
-
-import {
-   Timeline,
-   TimelineContent,
-   TimelineDot,
-   TimelineHeading,
-   TimelineItem,
-   TimelineLine,
-} from '~/registry/default/ui/timeline'
-
-export default function TimelineDemo() {
-   return (
-      <Timeline>
-         <TimelineItem status="done">
-            <TimelineHeading>Plan!</TimelineHeading>
-            <TimelineDot status="done" />
-            <TimelineLine done />
-            <TimelineContent>
-               Before diving into coding, it is crucial to plan your software project
-               thoroughly. This involves defining the project scope, setting clear
-               objectives, and identifying the target audience. Additionally,
-               creating a timeline and allocating resources appropriately will
-               contribute to a successful development process.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="right" className="text-destructive">
-               Design
-            </TimelineHeading>
-            <TimelineDot status="error" />
-            <TimelineLine done />
-            <TimelineContent>
-               Designing your software involves creating a blueprint that outlines
-               the structure, user interface, and functionality of your application.
-               Consider user experience (UX) principles, wireframing, and prototyping
-               to ensure an intuitive and visually appealing design.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading>Code</TimelineHeading>
-            <TimelineDot status="current" />
-            <TimelineLine />
-            <TimelineContent>
-               The coding phase involves translating your design into actual code.
-               Choose a programming language and framework that aligns with your
-               project requirements. Follow best practices, such as modular and
-               reusable code, to enhance maintainability and scalability. Regularly
-               test your code to identify and fix any bugs or errors.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading>Test</TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent>
-               Thorough testing is essential to ensure the quality and reliability of
-               your software. Implement different testing methodologies, including
-               unit testing, integration testing, and user acceptance testing. This
-               helps identify and rectify any issues before deploying the software.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading>Deploy</TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent>
-               Once your software has passed rigorous testing, it's time to deploy
-               it. Consider the deployment environment, whether it's on-premises or
-               in the cloud. Ensure proper documentation and provide clear
-               instructions for installation and configuration.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading>Done!</TimelineHeading>
-            <TimelineDot />
-         </TimelineItem>
-      </Timeline>
-   )
-}
diff --git a/apps/web/registry/default/example/timeline-labels.tsx b/apps/web/registry/default/example/timeline-labels.tsx
deleted file mode 100644
index 60a2a4b7..00000000
--- a/apps/web/registry/default/example/timeline-labels.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react'
-
-import {
-   Timeline,
-   TimelineContent,
-   TimelineDot,
-   TimelineHeading,
-   TimelineItem,
-   TimelineLine,
-} from '~/registry/default/ui/timeline'
-
-export default function TimelineAlternate() {
-   return (
-      <Timeline positions="center">
-         <TimelineItem status="done">
-            <TimelineHeading side="left">Plan!</TimelineHeading>
-            <TimelineHeading side="right" variant="secondary">
-               Done (05/04/2024)
-            </TimelineHeading>
-            <TimelineDot status="done" />
-            <TimelineLine done />
-            <TimelineContent side="left">
-               Before diving into coding, it is crucial to plan your software project
-               thoroughly. This involves defining the project scope, setting clear
-               objectives, and identifying the target audience. Additionally,
-               creating a timeline and allocating resources appropriately will
-               contribute to a successful development process.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="right" className="text-destructive">
-               Design
-            </TimelineHeading>
-            <TimelineHeading side="left" variant="secondary">
-               Failed (05/04/2024)
-            </TimelineHeading>
-            <TimelineDot status="error" />
-            <TimelineLine done />
-            <TimelineContent>
-               Designing your software involves creating a blueprint that outlines
-               the structure, user interface, and functionality of your application.
-               Consider user experience (UX) principles, wireframing, and prototyping
-               to ensure an intuitive and visually appealing design.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="left">Code</TimelineHeading>
-            <TimelineHeading side="right" variant="secondary">
-               Current step
-            </TimelineHeading>
-            <TimelineDot status="current" />
-            <TimelineLine />
-            <TimelineContent side="left">
-               The coding phase involves translating your design into actual code.
-               Choose a programming language and framework that aligns with your
-               project requirements. Follow best practices, such as modular and
-               reusable code, to enhance maintainability and scalability. Regularly
-               test your code to identify and fix any bugs or errors.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading>Test</TimelineHeading>
-            <TimelineHeading side="left" variant="secondary">
-               Next step
-            </TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent>
-               Thorough testing is essential to ensure the quality and reliability of
-               your software. Implement different testing methodologies, including
-               unit testing, integration testing, and user acceptance testing. This
-               helps identify and rectify any issues before deploying the software.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading side="left">Deploy</TimelineHeading>
-            <TimelineHeading side="right" variant="secondary">
-               Deadline (05/10/2024)
-            </TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent side="left">
-               Once your software has passed rigorous testing, it's time to deploy
-               it. Consider the deployment environment, whether it's on-premises or
-               in the cloud. Ensure proper documentation and provide clear
-               instructions for installation and configuration.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineDot />
-            <TimelineHeading>Done!</TimelineHeading>
-            <TimelineHeading side="left" variant="secondary">
-               Here everything ends
-            </TimelineHeading>
-         </TimelineItem>
-      </Timeline>
-   )
-}
diff --git a/apps/web/registry/default/example/timeline-right.tsx b/apps/web/registry/default/example/timeline-right.tsx
deleted file mode 100644
index be66cfbb..00000000
--- a/apps/web/registry/default/example/timeline-right.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react'
-
-import {
-   Timeline,
-   TimelineContent,
-   TimelineDot,
-   TimelineHeading,
-   TimelineItem,
-   TimelineLine,
-} from '~/registry/default/ui/timeline'
-
-export default function TimelineRight() {
-   return (
-      <Timeline positions="right">
-         <TimelineItem status="done">
-            <TimelineHeading side="left">Plan!</TimelineHeading>
-            <TimelineDot status="done" />
-            <TimelineLine done />
-            <TimelineContent side="left">
-               Before diving into coding, it is crucial to plan your software project
-               thoroughly. This involves defining the project scope, setting clear
-               objectives, and identifying the target audience. Additionally,
-               creating a timeline and allocating resources appropriately will
-               contribute to a successful development process.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="left" className="text-destructive">
-               Design
-            </TimelineHeading>
-            <TimelineDot status="error" />
-            <TimelineLine done />
-            <TimelineContent side="left">
-               Designing your software involves creating a blueprint that outlines
-               the structure, user interface, and functionality of your application.
-               Consider user experience (UX) principles, wireframing, and prototyping
-               to ensure an intuitive and visually appealing design.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="left">Code</TimelineHeading>
-            <TimelineDot status="current" />
-            <TimelineLine />
-            <TimelineContent side="left">
-               The coding phase involves translating your design into actual code.
-               Choose a programming language and framework that aligns with your
-               project requirements. Follow best practices, such as modular and
-               reusable code, to enhance maintainability and scalability. Regularly
-               test your code to identify and fix any bugs or errors.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading side="left">Test</TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent side="left">
-               Thorough testing is essential to ensure the quality and reliability of
-               your software. Implement different testing methodologies, including
-               unit testing, integration testing, and user acceptance testing. This
-               helps identify and rectify any issues before deploying the software.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading side="left">Deploy</TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent side="left">
-               Once your software has passed rigorous testing, it's time to deploy
-               it. Consider the deployment environment, whether it's on-premises or
-               in the cloud. Ensure proper documentation and provide clear
-               instructions for installation and configuration.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineDot />
-            <TimelineHeading side="left">Done!</TimelineHeading>
-         </TimelineItem>
-      </Timeline>
-   )
-}
diff --git a/apps/web/registry/default/example/toast-demo.tsx b/apps/web/registry/default/example/toast-demo.tsx
deleted file mode 100644
index 59fd3ccc..00000000
--- a/apps/web/registry/default/example/toast-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import { ToastAction } from '~/registry/default/ui/toast'
-import { useToast } from '~/registry/default/ui/use-toast'
-
-export default function ToastDemo() {
-   const { toast } = useToast()
-
-   return (
-      <Button
-         variant="outline"
-         onClick={() => {
-            toast({
-               title: 'Scheduled: Catch up ',
-               description: 'Friday, February 10, 2023 at 5:57 PM',
-               action: (
-                  <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
-               ),
-            })
-         }}
-      >
-         Add to calendar
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/example/toast-destructive.tsx b/apps/web/registry/default/example/toast-destructive.tsx
deleted file mode 100644
index b4a9a062..00000000
--- a/apps/web/registry/default/example/toast-destructive.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import { ToastAction } from '~/registry/default/ui/toast'
-import { useToast } from '~/registry/default/ui/use-toast'
-
-export default function ToastDestructive() {
-   const { toast } = useToast()
-
-   return (
-      <Button
-         variant="outline"
-         onClick={() => {
-            toast({
-               variant: 'destructive',
-               title: 'Uh oh! Something went wrong.',
-               description: 'There was a problem with your request.',
-               action: <ToastAction altText="Try again">Try again</ToastAction>,
-            })
-         }}
-      >
-         Show Toast
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/example/toast-simple.tsx b/apps/web/registry/default/example/toast-simple.tsx
deleted file mode 100644
index e0d07474..00000000
--- a/apps/web/registry/default/example/toast-simple.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import { useToast } from '~/registry/default/ui/use-toast'
-
-export default function ToastSimple() {
-   const { toast } = useToast()
-
-   return (
-      <Button
-         variant="outline"
-         onClick={() => {
-            toast({
-               description: 'Your message has been sent.',
-            })
-         }}
-      >
-         Show Toast
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/example/toast-with-action.tsx b/apps/web/registry/default/example/toast-with-action.tsx
deleted file mode 100644
index 611e6415..00000000
--- a/apps/web/registry/default/example/toast-with-action.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import { ToastAction } from '~/registry/default/ui/toast'
-import { useToast } from '~/registry/default/ui/use-toast'
-
-export default function ToastWithAction() {
-   const { toast } = useToast()
-
-   return (
-      <Button
-         variant="outline"
-         onClick={() => {
-            toast({
-               title: 'Uh oh! Something went wrong.',
-               description: 'There was a problem with your request.',
-               action: <ToastAction altText="Try again">Try again</ToastAction>,
-            })
-         }}
-      >
-         Show Toast
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/example/toast-with-title.tsx b/apps/web/registry/default/example/toast-with-title.tsx
deleted file mode 100644
index 1b866a44..00000000
--- a/apps/web/registry/default/example/toast-with-title.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import { useToast } from '~/registry/default/ui/use-toast'
-
-export default function ToastWithTitle() {
-   const { toast } = useToast()
-
-   return (
-      <Button
-         variant="outline"
-         onClick={() => {
-            toast({
-               title: 'Uh oh! Something went wrong.',
-               description: 'There was a problem with your request.',
-            })
-         }}
-      >
-         Show Toast
-      </Button>
-   )
-}
diff --git a/apps/web/registry/default/example/toc-active.tsx b/apps/web/registry/default/example/toc-active.tsx
deleted file mode 100644
index b458f9ae..00000000
--- a/apps/web/registry/default/example/toc-active.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
-   TableOfContentsItem,
-   TableOfContentsLink,
-   TableOfContentsList,
-   TableOfContentsTitle,
-} from '~/registry/default/ui/toc'
-
-export default function TOCActive() {
-   return (
-      <TableOfContentsList>
-         <TableOfContentsTitle>Active Item Table of Contents</TableOfContentsTitle>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#first-section">
-               First Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-         <TableOfContentsItem indent>
-            <TableOfContentsLink isActive href="#second-section">
-               Second Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#third-section">
-               Third Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-      </TableOfContentsList>
-   )
-}
diff --git a/apps/web/registry/default/example/toc-demo.tsx b/apps/web/registry/default/example/toc-demo.tsx
deleted file mode 100644
index 59fb2576..00000000
--- a/apps/web/registry/default/example/toc-demo.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
-   TableOfContentsItem,
-   TableOfContentsLink,
-   TableOfContentsList,
-   TableOfContentsTitle,
-} from '~/registry/default/ui/toc'
-
-export default function TOCDemo() {
-   return (
-      <TableOfContentsList>
-         <TableOfContentsTitle>Table of Contents</TableOfContentsTitle>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#first-section">
-               First Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#second-section">
-               Second Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#third-section">
-               Third Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-      </TableOfContentsList>
-   )
-}
diff --git a/apps/web/registry/default/example/toc-nested.tsx b/apps/web/registry/default/example/toc-nested.tsx
deleted file mode 100644
index a3f6cddd..00000000
--- a/apps/web/registry/default/example/toc-nested.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-   TableOfContentsItem,
-   TableOfContentsLink,
-   TableOfContentsList,
-   TableOfContentsTitle,
-} from '~/registry/default/ui/toc'
-
-export default function TOCDNested() {
-   return (
-      <TableOfContentsList>
-         <TableOfContentsTitle>Nested Table of Contents</TableOfContentsTitle>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#first-section-nested">
-               First Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-         <TableOfContentsItem indent>
-            <TableOfContentsList>
-               <TableOfContentsLink href="#first-nested-section-nested">
-                  First Nested Section
-               </TableOfContentsLink>
-               <TableOfContentsItem indent>
-                  <TableOfContentsLink href="#second-nested-section-nested">
-                     Second Nested Section
-                  </TableOfContentsLink>
-               </TableOfContentsItem>
-            </TableOfContentsList>
-         </TableOfContentsItem>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#third-section-nested">
-               Third Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-      </TableOfContentsList>
-   )
-}
diff --git a/apps/web/registry/default/example/toggle-demo.tsx b/apps/web/registry/default/example/toggle-demo.tsx
deleted file mode 100644
index 46689bbe..00000000
--- a/apps/web/registry/default/example/toggle-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Bold } from 'lucide-react'
-
-import { Toggle } from '~/registry/default/ui/toggle'
-
-export default function ToggleDemo() {
-   return (
-      <Toggle aria-label="Toggle bold">
-         <Bold className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/default/example/toggle-disabled.tsx b/apps/web/registry/default/example/toggle-disabled.tsx
deleted file mode 100644
index 3c000d9e..00000000
--- a/apps/web/registry/default/example/toggle-disabled.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Underline } from 'lucide-react'
-
-import { Toggle } from '~/registry/default/ui/toggle'
-
-export default function ToggleDisabled() {
-   return (
-      <Toggle aria-label="Toggle underline" disabled>
-         <Underline className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/default/example/toggle-group-demo.tsx b/apps/web/registry/default/example/toggle-group-demo.tsx
deleted file mode 100644
index d36f1627..00000000
--- a/apps/web/registry/default/example/toggle-group-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Bold, Italic, Underline } from 'lucide-react'
-
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/default/ui/toggle-group'
-
-export default function ToggleGroupDemo() {
-   return (
-      <ToggleGroup type="multiple">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <Bold className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <Italic className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="underline" aria-label="Toggle underline">
-            <Underline className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/default/example/toggle-group-disabled.tsx b/apps/web/registry/default/example/toggle-group-disabled.tsx
deleted file mode 100644
index 34496b5a..00000000
--- a/apps/web/registry/default/example/toggle-group-disabled.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Bold, Italic, Underline } from 'lucide-react'
-
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/default/ui/toggle-group'
-
-export default function ToggleGroupDemo() {
-   return (
-      <ToggleGroup disabled type="single">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <Bold className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <Italic className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="underline" aria-label="Toggle underline">
-            <Underline className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/default/example/toggle-group-lg.tsx b/apps/web/registry/default/example/toggle-group-lg.tsx
deleted file mode 100644
index 04d83ad9..00000000
--- a/apps/web/registry/default/example/toggle-group-lg.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Bold, Italic, Underline } from 'lucide-react'
-
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/default/ui/toggle-group'
-
-export default function ToggleGroupDemo() {
-   return (
-      <ToggleGroup size="lg" type="multiple">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <Bold className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <Italic className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="underline" aria-label="Toggle underline">
-            <Underline className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/default/example/toggle-group-outline.tsx b/apps/web/registry/default/example/toggle-group-outline.tsx
deleted file mode 100644
index 11660a96..00000000
--- a/apps/web/registry/default/example/toggle-group-outline.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Bold, Italic, Underline } from 'lucide-react'
-
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/default/ui/toggle-group'
-
-export default function ToggleGroupDemo() {
-   return (
-      <ToggleGroup variant="outline" type="multiple">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <Bold className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <Italic className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="underline" aria-label="Toggle underline">
-            <Underline className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/default/example/toggle-group-single.tsx b/apps/web/registry/default/example/toggle-group-single.tsx
deleted file mode 100644
index 818c03c4..00000000
--- a/apps/web/registry/default/example/toggle-group-single.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Bold, Italic, Underline } from 'lucide-react'
-
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/default/ui/toggle-group'
-
-export default function ToggleGroupDemo() {
-   return (
-      <ToggleGroup type="single">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <Bold className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <Italic className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="underline" aria-label="Toggle underline">
-            <Underline className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/default/example/toggle-group-sm.tsx b/apps/web/registry/default/example/toggle-group-sm.tsx
deleted file mode 100644
index 040d87cb..00000000
--- a/apps/web/registry/default/example/toggle-group-sm.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Bold, Italic, Underline } from 'lucide-react'
-
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/default/ui/toggle-group'
-
-export default function ToggleGroupDemo() {
-   return (
-      <ToggleGroup size="sm" type="multiple">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <Bold className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <Italic className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="underline" aria-label="Toggle underline">
-            <Underline className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/default/example/toggle-lg.tsx b/apps/web/registry/default/example/toggle-lg.tsx
deleted file mode 100644
index dfca8c1c..00000000
--- a/apps/web/registry/default/example/toggle-lg.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Italic } from 'lucide-react'
-
-import { Toggle } from '~/registry/default/ui/toggle'
-
-export default function ToggleLg() {
-   return (
-      <Toggle size="lg" aria-label="Toggle italic">
-         <Italic className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/default/example/toggle-outline.tsx b/apps/web/registry/default/example/toggle-outline.tsx
deleted file mode 100644
index 78ed68db..00000000
--- a/apps/web/registry/default/example/toggle-outline.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Italic } from 'lucide-react'
-
-import { Toggle } from '~/registry/default/ui/toggle'
-
-export default function ToggleOutline() {
-   return (
-      <Toggle variant="outline" aria-label="Toggle italic">
-         <Italic className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/default/example/toggle-sm.tsx b/apps/web/registry/default/example/toggle-sm.tsx
deleted file mode 100644
index c16d1fb3..00000000
--- a/apps/web/registry/default/example/toggle-sm.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Italic } from 'lucide-react'
-
-import { Toggle } from '~/registry/default/ui/toggle'
-
-export default function ToggleSm() {
-   return (
-      <Toggle size="sm" aria-label="Toggle italic">
-         <Italic className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/default/example/toggle-with-text.tsx b/apps/web/registry/default/example/toggle-with-text.tsx
deleted file mode 100644
index 598f3677..00000000
--- a/apps/web/registry/default/example/toggle-with-text.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Italic } from 'lucide-react'
-
-import { Toggle } from '~/registry/default/ui/toggle'
-
-export default function ToggleWithText() {
-   return (
-      <Toggle aria-label="Toggle italic">
-         <Italic className="mr-2 size-4" />
-         Italic
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/default/example/tooltip-demo.tsx b/apps/web/registry/default/example/tooltip-demo.tsx
deleted file mode 100644
index 793ec07e..00000000
--- a/apps/web/registry/default/example/tooltip-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import {
-   Tooltip,
-   TooltipArrow,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
-
-export default function TooltipDemo() {
-   return (
-      <TooltipProvider>
-         <Tooltip>
-            <TooltipTrigger asChild>
-               <Button variant="outline">Hover</Button>
-            </TooltipTrigger>
-            <TooltipContent>
-               <p>Add to library</p>
-               <TooltipArrow />
-            </TooltipContent>
-         </Tooltip>
-      </TooltipProvider>
-   )
-}
diff --git a/apps/web/registry/default/example/tooltip-outline.tsx b/apps/web/registry/default/example/tooltip-outline.tsx
deleted file mode 100644
index 640209cb..00000000
--- a/apps/web/registry/default/example/tooltip-outline.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
-
-export default function TooltipOutline() {
-   return (
-      <TooltipProvider>
-         <Tooltip>
-            <TooltipTrigger asChild>
-               <Button variant="outline">Hover</Button>
-            </TooltipTrigger>
-            <TooltipContent variant="outline">
-               <p>Add to library</p>
-            </TooltipContent>
-         </Tooltip>
-      </TooltipProvider>
-   )
-}
diff --git a/apps/web/registry/default/example/tooltip-secondary.tsx b/apps/web/registry/default/example/tooltip-secondary.tsx
deleted file mode 100644
index 8eacdb21..00000000
--- a/apps/web/registry/default/example/tooltip-secondary.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button } from '~/registry/default/ui/button'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
-
-export default function TooltipSecondary() {
-   return (
-      <TooltipProvider>
-         <Tooltip>
-            <TooltipTrigger asChild>
-               <Button variant="outline">Hover</Button>
-            </TooltipTrigger>
-            <TooltipContent variant="secondary">
-               <p>Add to library</p>
-            </TooltipContent>
-         </Tooltip>
-      </TooltipProvider>
-   )
-}
diff --git a/apps/web/registry/default/example/tooltip-with-toggle-demo.tsx b/apps/web/registry/default/example/tooltip-with-toggle-demo.tsx
deleted file mode 100644
index 1ffbe35b..00000000
--- a/apps/web/registry/default/example/tooltip-with-toggle-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Heart } from 'lucide-react'
-
-import { Toggle } from '~/registry/default/ui/toggle'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
-
-export default function TooltipWithToggleDemo() {
-   return (
-      <TooltipProvider>
-         <Tooltip>
-            <TooltipTrigger>
-               <Toggle variant="outline" aria-label="Toggle love">
-                  <Heart className="size-4" />
-               </Toggle>
-            </TooltipTrigger>
-            <TooltipContent>
-               <p>Heart</p>
-            </TooltipContent>
-         </Tooltip>
-      </TooltipProvider>
-   )
-}
diff --git a/apps/web/registry/default/example/tour-demo.tsx b/apps/web/registry/default/example/tour-demo.tsx
deleted file mode 100644
index d5b6ee70..00000000
--- a/apps/web/registry/default/example/tour-demo.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import * as React from 'react'
-
-import { Button } from '~/registry/default/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/default/ui/card'
-import { Input } from '~/registry/default/ui/input'
-import { TourFactory } from '~/registry/default/ui/tour'
-
-const tour = TourFactory([
-   'buttonOne',
-   'buttonTwo',
-   'missingButton',
-   'buttonFour',
-   'emailInput',
-])
-
-function TourDisplay(props: {
-   children: React.ReactNode
-   title?: string
-   description?: string
-}) {
-   const ctx = tour.useContext()
-   return (
-      <Card className="w-[350px]">
-         <CardHeader>
-            <CardTitle>{props.title}</CardTitle>
-            <CardDescription>{props.description}</CardDescription>
-         </CardHeader>
-         <CardContent>{props.children}</CardContent>
-         <CardFooter>
-            {ctx.current < ctx.nodes.size
-               ? (
-                     <div className="flex w-full justify-between">
-                        <Button variant="outline" onClick={ctx.close}>
-                           Close
-                        </Button>
-                        <div>
-                           <Button onClick={ctx.previous}>Previous</Button>
-                           <Button onClick={ctx.next}>Next</Button>
-                        </div>
-                     </div>
-                  )
-               : (
-                     <div className="flex w-full justify-end">
-                        <Button onClick={ctx.previous}>Previous</Button>
-                        <Button className="bg-green-800" onClick={ctx.close}>
-                           Finish
-                        </Button>
-                     </div>
-                  )}
-         </CardFooter>
-      </Card>
-   )
-}
-
-function TourApplication() {
-   const ctx = tour.useContext()
-   return (
-      <div className="flex h-96 w-full items-center justify-center">
-         <div className="absolute bottom-2 left-2 flex gap-2">
-            <tour.TourFocus
-               name="buttonOne"
-               tourRender={(
-                  <TourDisplay title="Create Incident">
-                     <h1>This button creates an incident</h1>
-                     <p>helpful text about this button</p>
-                  </TourDisplay>
-               )}
-            >
-               <Button>Create Incident</Button>
-            </tour.TourFocus>
-            <tour.TourFocus
-               name="buttonFour"
-               tourRender={(
-                  <TourDisplay title="Update Incident">
-                     <h1>This button pushes your updates</h1>
-                     <p>helpful text about this button</p>
-                  </TourDisplay>
-               )}
-            >
-               <Button>Update Incident</Button>
-            </tour.TourFocus>
-         </div>
-         <div className="absolute right-2 top-12 flex gap-2">
-            <tour.TourFocus
-               name="buttonTwo"
-               tourRender={(
-                  <TourDisplay title="Resolve Incident">
-                     <h1>This button Resolves the Incident</h1>
-                     <p>helpful text about this button</p>
-                  </TourDisplay>
-               )}
-            >
-               <Button>Resolve Incident</Button>
-            </tour.TourFocus>
-         </div>
-         <div>
-            <tour.TourFocus
-               name="emailInput"
-               tourRender={(
-                  <TourDisplay title="Email Input">
-                     <h1>This is where you put incident info</h1>
-                     <p>helpful text about this input</p>
-                  </TourDisplay>
-               )}
-            >
-               <Input type="email" placeholder="Email" />
-            </tour.TourFocus>
-         </div>
-         <div className="absolute bottom-2 right-2">
-            <Button onClick={ctx.open}>Open Tour</Button>
-         </div>
-      </div>
-   )
-}
-
-export default function TourDemo() {
-   return (
-      <tour.TourProvider>
-         <TourApplication />
-      </tour.TourProvider>
-   )
-}
diff --git a/apps/web/registry/default/example/tweet-card-demo.tsx b/apps/web/registry/default/example/tweet-card-demo.tsx
deleted file mode 100644
index 0b8fc035..00000000
--- a/apps/web/registry/default/example/tweet-card-demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ClientTweetCard from '~/registry/default/ui/client-tweet-card'
-
-/**
- * <TweetCard /> (Server Side Only)
- * <ClientTweetCard /> (Client Side Only)
- */
-export default async function TweetDemo() {
-   return <ClientTweetCard id="1703861725534011484" className="shadow-2xl" />
-}
diff --git a/apps/web/registry/default/example/tweet-card-images.tsx b/apps/web/registry/default/example/tweet-card-images.tsx
deleted file mode 100644
index f020b936..00000000
--- a/apps/web/registry/default/example/tweet-card-images.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import ClientTweetCard from '~/registry/default/ui/client-tweet-card'
-
-export default async function TweetImages() {
-   return <ClientTweetCard id="1803717292087296479" className="shadow-2xl" />
-}
diff --git a/apps/web/registry/default/example/tweet-card-meta-preview.tsx b/apps/web/registry/default/example/tweet-card-meta-preview.tsx
deleted file mode 100644
index 1d12831c..00000000
--- a/apps/web/registry/default/example/tweet-card-meta-preview.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import ClientTweetCard from '~/registry/default/ui/client-tweet-card'
-
-export default async function TweetMetaPreview() {
-   return <ClientTweetCard id="1671108134591504385" className="shadow-2xl" />
-}
diff --git a/apps/web/registry/default/example/typing-animation-demo.tsx b/apps/web/registry/default/example/typing-animation-demo.tsx
deleted file mode 100644
index ea333e9e..00000000
--- a/apps/web/registry/default/example/typing-animation-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import TypingAnimation from '~/registry/default/ui/typing-animation'
-
-export default async function TextRevealDemo() {
-   return (
-      <TypingAnimation
-         className="text-4xl font-bold text-black dark:text-white"
-         text="Typing Animation"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/typography-blockquote.tsx b/apps/web/registry/default/example/typography-blockquote.tsx
deleted file mode 100644
index 7db64be7..00000000
--- a/apps/web/registry/default/example/typography-blockquote.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function TypographyBlockquote() {
-   return (
-      <blockquote className="mt-6 border-l-2 pl-6 italic">
-         "After all," he said, "everyone enjoys a good joke, so it's only fair that
-         they should pay for the privilege."
-      </blockquote>
-   )
-}
diff --git a/apps/web/registry/default/example/typography-demo.tsx b/apps/web/registry/default/example/typography-demo.tsx
deleted file mode 100644
index cc1b62b1..00000000
--- a/apps/web/registry/default/example/typography-demo.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-export default function TypographyDemo() {
-   return (
-      <div>
-         <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-            The Joke Tax Chronicles
-         </h1>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            Once upon a time, in a far-off land, there was a very lazy king who
-            spent all day lounging on his throne. One day, his advisors came to him
-            with a problem: the kingdom was running out of money.
-         </p>
-         <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
-            The King's Plan
-         </h2>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            The king thought long and hard, and finally came up with
-            {' '}
-            <a
-               href="#"
-               className="text-primary font-medium underline underline-offset-4"
-            >
-               a brilliant plan
-            </a>
-            : he would tax the jokes in the kingdom.
-         </p>
-         <blockquote className="mt-6 border-l-2 pl-6 italic">
-            "After all," he said, "everyone enjoys a good joke, so it's only fair
-            that they should pay for the privilege."
-         </blockquote>
-         <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-            The Joke Tax
-         </h3>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            The king's subjects were not amused. They grumbled and complained, but
-            the king was firm:
-         </p>
-         <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
-            <li>1st level of puns: 5 gold coins</li>
-            <li>2nd level of jokes: 10 gold coins</li>
-            <li>3rd level of one-liners : 20 gold coins</li>
-         </ul>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            As a result, people stopped telling jokes, and the kingdom fell into a
-            gloom. But there was one person who refused to let the king's
-            foolishness get him down: a court jester named Jokester.
-         </p>
-         <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-            Jokester's Revolt
-         </h3>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            Jokester began sneaking into the castle in the middle of the night and
-            leaving jokes all over the place: under the king's pillow, in his soup,
-            even in the royal toilet. The king was furious, but he couldn't seem to
-            stop Jokester.
-         </p>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            And then, one day, the people of the kingdom discovered that the jokes
-            left by Jokester were so funny that they couldn't help but laugh. And
-            once they started laughing, they couldn't stop.
-         </p>
-         <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-            The People's Rebellion
-         </h3>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            The people of the kingdom, feeling uplifted by the laughter, started to
-            tell jokes and puns again, and soon the entire kingdom was in on the
-            joke.
-         </p>
-         <div className="my-6 w-full overflow-y-auto">
-            <table className="w-full">
-               <thead>
-                  <tr className="even:bg-muted m-0 border-t p-0">
-                     <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-                        King's Treasury
-                     </th>
-                     <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-                        People's happiness
-                     </th>
-                  </tr>
-               </thead>
-               <tbody>
-                  <tr className="even:bg-muted m-0 border-t p-0">
-                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                        Empty
-                     </td>
-                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                        Overflowing
-                     </td>
-                  </tr>
-                  <tr className="even:bg-muted m-0 border-t p-0">
-                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                        Modest
-                     </td>
-                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                        Satisfied
-                     </td>
-                  </tr>
-                  <tr className="even:bg-muted m-0 border-t p-0">
-                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                        Full
-                     </td>
-                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                        Ecstatic
-                     </td>
-                  </tr>
-               </tbody>
-            </table>
-         </div>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            The king, seeing how much happier his subjects were, realized the error
-            of his ways and repealed the joke tax. Jokester was declared a hero, and
-            the kingdom lived happily ever after.
-         </p>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            The moral of the story is: never underestimate the power of a good laugh
-            and always be careful of bad ideas.
-         </p>
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/typography-lead.tsx b/apps/web/registry/default/example/typography-lead.tsx
deleted file mode 100644
index d2baabae..00000000
--- a/apps/web/registry/default/example/typography-lead.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function TypographyLead() {
-   return (
-      <p className="text-muted-foreground text-xl">
-         A modal dialog that interrupts the user with important content and expects
-         a response.
-      </p>
-   )
-}
diff --git a/apps/web/registry/default/example/typography-p.tsx b/apps/web/registry/default/example/typography-p.tsx
deleted file mode 100644
index 44cfde59..00000000
--- a/apps/web/registry/default/example/typography-p.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function TypographyP() {
-   return (
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-         The king, seeing how much happier his subjects were, realized the error of
-         his ways and repealed the joke tax.
-      </p>
-   )
-}
diff --git a/apps/web/registry/default/example/video-modal-demo.tsx b/apps/web/registry/default/example/video-modal-demo.tsx
deleted file mode 100644
index 8ba10501..00000000
--- a/apps/web/registry/default/example/video-modal-demo.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { PlayCircle } from 'lucide-react'
-import {
-   VideoModal,
-   VideoModalContent,
-   VideoModalDescription,
-   VideoModalTitle,
-   VideoModalTrigger,
-   VideoModalVideo,
-   VideoPlayButton,
-   VideoPlayer,
-   VideoPreview,
-} from '~/registry/default/ui/video-modal'
-import { Button } from '~/registry/default/ui/button'
-
-function VideoModalDemo() {
-   return (
-      <div className="relative justify-center">
-         <VideoModal>
-            <VideoModalTrigger>
-               <Button>Open modal</Button>
-            </VideoModalTrigger>
-            <VideoModalContent>
-               <VideoModalTitle>Modal Video Demo</VideoModalTitle>
-               <VideoModalDescription>
-                  Your subtitle or description here
-               </VideoModalDescription>
-               <VideoModalVideo>
-                  <VideoPlayer>
-                     <VideoPreview>
-                        <img
-                           src="https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200"
-                           alt="Video preview"
-                        />
-                     </VideoPreview>
-                     <VideoPlayButton>
-                        <button className="absolute inset-0 m-auto flex size-32 items-center justify-center rounded-full border border-white border-white/10 bg-white/50 transition duration-300 hover:bg-white/75">
-                           <PlayCircle className="size-20 stroke-1 text-white" />
-                        </button>
-                     </VideoPlayButton>
-                     <iframe
-                        className="size-full"
-                        src="https://cdn.magicui.design/globe.mp4"
-                        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
-                        allowFullScreen
-                     />
-                  </VideoPlayer>
-               </VideoModalVideo>
-            </VideoModalContent>
-         </VideoModal>
-      </div>
-   )
-}
-
-export default VideoModalDemo
diff --git a/apps/web/registry/default/example/wavy-dot-pattern-demo.tsx b/apps/web/registry/default/example/wavy-dot-pattern-demo.tsx
deleted file mode 100644
index 758fd4a9..00000000
--- a/apps/web/registry/default/example/wavy-dot-pattern-demo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import WavyDotPattern from '~/registry/default/ui/wavy-dot-pattern'
-
-export default function WavyDotPatternDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl ">
-         <p className="z-10 whitespace-pre-wrap text-center text-4xl font-semibold tracking-tighter text-black dark:text-white">
-            Wavy Dot Pattern
-         </p>
-
-         <WavyDotPattern
-            gridWidth={30}
-            gridHeight={15}
-            dotWidth={8}
-            dotHeight={8}
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/default/example/wavy-text-demo.tsx b/apps/web/registry/default/example/wavy-text-demo.tsx
deleted file mode 100644
index d7a1fca4..00000000
--- a/apps/web/registry/default/example/wavy-text-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import WavyText from '~/registry/default/ui/wavy-text'
-
-export default function WavyTextDemo() {
-   return (
-      <WavyText
-         word="Wavy Text"
-         className="text-4xl font-bold text-black dark:text-white"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/word-fade-in-demo.tsx b/apps/web/registry/default/example/word-fade-in-demo.tsx
deleted file mode 100644
index 8b72a61a..00000000
--- a/apps/web/registry/default/example/word-fade-in-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import WordFadeIn from '~/registry/default/ui/word-fade-in'
-
-export default async function WordFadeInDemo() {
-   return <WordFadeIn words="Word Fade In" />
-}
diff --git a/apps/web/registry/default/example/word-pull-up-demo.tsx b/apps/web/registry/default/example/word-pull-up-demo.tsx
deleted file mode 100644
index f4663a05..00000000
--- a/apps/web/registry/default/example/word-pull-up-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import WordPullUp from '~/registry/default/ui/word-pull-up'
-
-export default async function WordPullUpDemo() {
-   return (
-      <WordPullUp
-         className="text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white"
-         words="Word Pull Up"
-      />
-   )
-}
diff --git a/apps/web/registry/default/example/word-rotate-demo.tsx b/apps/web/registry/default/example/word-rotate-demo.tsx
deleted file mode 100644
index 18e396e5..00000000
--- a/apps/web/registry/default/example/word-rotate-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import WordRotate from '~/registry/default/ui/word-rotate'
-
-export default async function WordRotateDemo() {
-   return (
-      <WordRotate
-         className="text-4xl font-bold text-black dark:text-white"
-         words={['Word', 'Rotate']}
-      />
-   )
-}
diff --git a/apps/web/registry/default/examples/accordion-demo.tsx b/apps/web/registry/default/examples/accordion-demo.tsx
new file mode 100644
index 00000000..ae895324
--- /dev/null
+++ b/apps/web/registry/default/examples/accordion-demo.tsx
@@ -0,0 +1,33 @@
+import {
+   Accordion,
+   AccordionContent,
+   AccordionItem,
+   AccordionTrigger,
+} from "~/registry/default/ui/accordion"
+
+export default function AccordionDemo() {
+   return (
+      <Accordion type="single" collapsible className="w-full">
+         <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>
+               Yes. It adheres to the WAI-ARIA design pattern.
+            </AccordionContent>
+         </AccordionItem>
+         <AccordionItem value="item-2">
+            <AccordionTrigger>Is it styled?</AccordionTrigger>
+            <AccordionContent>
+               Yes. It comes with default styles that matches the other
+               components&apos; aesthetic.
+            </AccordionContent>
+         </AccordionItem>
+         <AccordionItem value="item-3">
+            <AccordionTrigger>Is it animated?</AccordionTrigger>
+            <AccordionContent>
+               Yes. It&apos;s animated by default, but you can disable it if you
+               prefer.
+            </AccordionContent>
+         </AccordionItem>
+      </Accordion>
+   )
+}
diff --git a/apps/web/registry/default/examples/alert-demo.tsx b/apps/web/registry/default/examples/alert-demo.tsx
new file mode 100644
index 00000000..096cad28
--- /dev/null
+++ b/apps/web/registry/default/examples/alert-demo.tsx
@@ -0,0 +1,19 @@
+import { Terminal } from "lucide-react"
+
+import {
+   Alert,
+   AlertDescription,
+   AlertTitle,
+} from "~/registry/default/ui/alert"
+
+export default function AlertDemo() {
+   return (
+      <Alert>
+         <Terminal className="size-4" />
+         <AlertTitle>Heads up!</AlertTitle>
+         <AlertDescription>
+            You can add components to your app using the cli.
+         </AlertDescription>
+      </Alert>
+   )
+}
diff --git a/apps/web/registry/default/examples/alert-destructive.tsx b/apps/web/registry/default/examples/alert-destructive.tsx
new file mode 100644
index 00000000..f535967f
--- /dev/null
+++ b/apps/web/registry/default/examples/alert-destructive.tsx
@@ -0,0 +1,19 @@
+import { AlertCircle } from "lucide-react"
+
+import {
+   Alert,
+   AlertDescription,
+   AlertTitle,
+} from "~/registry/default/ui/alert"
+
+export default function AlertDestructive() {
+   return (
+      <Alert variant="destructive">
+         <AlertCircle className="size-4" />
+         <AlertTitle>Error</AlertTitle>
+         <AlertDescription>
+            Your session has expired. Please log in again.
+         </AlertDescription>
+      </Alert>
+   )
+}
diff --git a/apps/web/registry/default/examples/alert-dialog-demo.tsx b/apps/web/registry/default/examples/alert-dialog-demo.tsx
new file mode 100644
index 00000000..781806db
--- /dev/null
+++ b/apps/web/registry/default/examples/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+   AlertDialog,
+   AlertDialogAction,
+   AlertDialogCancel,
+   AlertDialogContent,
+   AlertDialogDescription,
+   AlertDialogFooter,
+   AlertDialogHeader,
+   AlertDialogTitle,
+   AlertDialogTrigger,
+} from "~/registry/default/ui/alert-dialog"
+import { Button } from "~/registry/default/ui/button"
+
+export default function AlertDialogDemo() {
+   return (
+      <AlertDialog>
+         <AlertDialogTrigger asChild>
+            <Button variant="outline">Show Dialog</Button>
+         </AlertDialogTrigger>
+         <AlertDialogContent>
+            <AlertDialogHeader>
+               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+               <AlertDialogDescription>
+                  This action cannot be undone. This will permanently delete
+                  your account and remove your data from our servers.
+               </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+               <AlertDialogCancel>Cancel</AlertDialogCancel>
+               <AlertDialogAction>Continue</AlertDialogAction>
+            </AlertDialogFooter>
+         </AlertDialogContent>
+      </AlertDialog>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-beam-bidirectional.tsx b/apps/web/registry/default/examples/animated-beam-bidirectional.tsx
new file mode 100644
index 00000000..f284bd11
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-beam-bidirectional.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import type React from "react"
+import { forwardRef, useRef } from "react"
+import { ny } from "~/lib/utils"
+import { AnimatedBeam } from "~/registry/default/ui/animated-beam"
+
+const Circle = forwardRef<
+   HTMLDivElement,
+   { className?: string; children?: React.ReactNode }
+>(({ className, children }, ref) => {
+   return (
+      <div
+         ref={ref}
+         className={ny(
+            "z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
+            className,
+         )}
+      >
+         {children}
+      </div>
+   )
+})
+
+export default function AnimatedBeamDemo() {
+   const containerRef = useRef<HTMLDivElement>(null)
+   const div1Ref = useRef<HTMLDivElement>(null)
+   const div2Ref = useRef<HTMLDivElement>(null)
+
+   return (
+      <div
+         className="bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
+         ref={containerRef}
+      >
+         <div className="flex size-full flex-col items-stretch justify-between gap-10">
+            <div className="flex flex-row justify-between">
+               <Circle ref={div1Ref}>
+                  <Icons.user />
+               </Circle>
+               <Circle ref={div2Ref}>
+                  <Icons.openai />
+               </Circle>
+            </div>
+         </div>
+
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div1Ref}
+            toRef={div2Ref}
+            startYOffset={10}
+            endYOffset={10}
+            curvature={-20}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div1Ref}
+            toRef={div2Ref}
+            startYOffset={-10}
+            endYOffset={-10}
+            curvature={20}
+            reverse
+         />
+      </div>
+   )
+}
+
+const Icons = {
+   openai: () => (
+      <svg
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+   ),
+   user: () => (
+      <svg
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         fill="none"
+         stroke="#000000"
+         strokeWidth="2"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+         <circle cx="12" cy="7" r="4" />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/default/examples/animated-beam-demo.tsx b/apps/web/registry/default/examples/animated-beam-demo.tsx
new file mode 100644
index 00000000..8f05a3b7
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-beam-demo.tsx
@@ -0,0 +1,501 @@
+"use client"
+
+import type React from "react"
+import { forwardRef, useRef } from "react"
+import { ny } from "~/lib/utils"
+import { AnimatedBeam } from "~/registry/default/ui/animated-beam"
+
+const Circle = forwardRef<
+   HTMLDivElement,
+   { className?: string; children?: React.ReactNode }
+>(({ className, children }, ref) => {
+   return (
+      <div
+         ref={ref}
+         className={ny(
+            "z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
+            className,
+         )}
+      >
+         {children}
+      </div>
+   )
+})
+
+export default function AnimatedBeamDemo() {
+   const containerRef = useRef<HTMLDivElement>(null)
+   const div1Ref = useRef<HTMLDivElement>(null)
+   const div2Ref = useRef<HTMLDivElement>(null)
+   const div3Ref = useRef<HTMLDivElement>(null)
+   const div4Ref = useRef<HTMLDivElement>(null)
+   const div5Ref = useRef<HTMLDivElement>(null)
+   const div6Ref = useRef<HTMLDivElement>(null)
+   const div7Ref = useRef<HTMLDivElement>(null)
+
+   return (
+      <div
+         className="bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
+         ref={containerRef}
+      >
+         <div className="flex size-full flex-col items-stretch justify-between gap-10">
+            <div className="flex flex-row items-center justify-between">
+               <Circle ref={div1Ref}>
+                  <Icons.googleDrive />
+               </Circle>
+               <Circle ref={div5Ref}>
+                  <Icons.googleDocs />
+               </Circle>
+            </div>
+            <div className="flex flex-row items-center justify-between">
+               <Circle ref={div2Ref}>
+                  <Icons.notion />
+               </Circle>
+               <Circle ref={div4Ref} className="size-16">
+                  <Icons.openai />
+               </Circle>
+               <Circle ref={div6Ref}>
+                  <Icons.zapier />
+               </Circle>
+            </div>
+            <div className="flex flex-row items-center justify-between">
+               <Circle ref={div3Ref}>
+                  <Icons.whatsapp />
+               </Circle>
+               <Circle ref={div7Ref}>
+                  <Icons.messenger />
+               </Circle>
+            </div>
+         </div>
+
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div1Ref}
+            toRef={div4Ref}
+            curvature={-75}
+            endYOffset={-10}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div2Ref}
+            toRef={div4Ref}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div3Ref}
+            toRef={div4Ref}
+            curvature={75}
+            endYOffset={10}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div5Ref}
+            toRef={div4Ref}
+            curvature={-75}
+            endYOffset={-10}
+            reverse
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div6Ref}
+            toRef={div4Ref}
+            reverse
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div7Ref}
+            toRef={div4Ref}
+            curvature={75}
+            endYOffset={10}
+            reverse
+         />
+      </div>
+   )
+}
+
+const Icons = {
+   notion: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 100 100"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+            fill="#ffffff"
+         />
+         <path
+            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+            fill="#000000"
+            fillRule="evenodd"
+            clipRule="evenodd"
+         />
+      </svg>
+   ),
+   openai: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 24 24"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+   ),
+   googleDrive: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 87.3 78"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+            fill="#0066da"
+         />
+         <path
+            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+            fill="#00ac47"
+         />
+         <path
+            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335"
+         />
+         <path
+            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+            fill="#00832d"
+         />
+         <path
+            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+            fill="#2684fc"
+         />
+         <path
+            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00"
+         />
+      </svg>
+   ),
+   whatsapp: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 175.216 175.552"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <linearGradient
+               id="b"
+               x1="85.915"
+               x2="86.535"
+               y1="32.567"
+               y2="137.092"
+               gradientUnits="userSpaceOnUse"
+            >
+               <stop offset="0" stopColor="#57d163" />
+               <stop offset="1" stopColor="#23b33a" />
+            </linearGradient>
+            <filter
+               id="a"
+               width="1.115"
+               height="1.114"
+               x="-.057"
+               y="-.057"
+               colorInterpolationFilters="sRGB"
+            >
+               <feGaussianBlur stdDeviation="3.531" />
+            </filter>
+         </defs>
+         <path
+            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
+            fill="#b3b3b3"
+            filter="url(#a)"
+         />
+         <path
+            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
+            fill="#ffffff"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
+            fill="url(#linearGradient1780)"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
+            fill="url(#b)"
+         />
+         <path
+            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
+            fill="#ffffff"
+            fillRule="evenodd"
+         />
+      </svg>
+   ),
+   googleDocs: () => (
+      <svg
+         width="47px"
+         height="65px"
+         viewBox="0 0 47 65"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-1"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-3"
+            />
+            <linearGradient
+               x1="50.0053945%"
+               y1="8.58610612%"
+               x2="50.0053945%"
+               y2="100.013939%"
+               id="linearGradient-5"
+            >
+               <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
+               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
+            </linearGradient>
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-6"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-8"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-10"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-12"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-14"
+            />
+            <radialGradient
+               cx="3.16804688%"
+               cy="2.71744318%"
+               fx="3.16804688%"
+               fy="2.71744318%"
+               r="161.248516%"
+               gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
+               id="radialGradient-16"
+            >
+               <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
+               <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
+            </radialGradient>
+         </defs>
+         <g
+            id="Page-1"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+         >
+            <g transform="translate(-451.000000, -463.000000)">
+               <g id="Hero" transform="translate(0.000000, 63.000000)">
+                  <g
+                     id="Personal"
+                     transform="translate(277.000000, 309.000000)"
+                  >
+                     <g
+                        id="Docs-icon"
+                        transform="translate(174.000000, 91.000000)"
+                     >
+                        <g id="Group">
+                           <g id="Clipped">
+                              <mask id="mask-2" fill="white">
+                                 <use xlinkHref="#path-1" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
+                                 id="Path"
+                                 fill="#4285F4"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-2)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-4" fill="white">
+                                 <use xlinkHref="#path-3" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <polygon
+                                 id="Path"
+                                 fill="url(#linearGradient-5)"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-4)"
+                                 points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
+                              ></polygon>
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-7" fill="white">
+                                 <use xlinkHref="#path-6" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
+                                 id="Shape"
+                                 fill="#F1F1F1"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-7)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-9" fill="white">
+                                 <use xlinkHref="#path-8" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <g id="Group" mask="url(#mask-9)">
+                                 <g transform="translate(26.437500, -2.954545)">
+                                    <path
+                                       d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
+                                       id="Path"
+                                       fill="#A1C2FA"
+                                       fillRule="nonzero"
+                                    />
+                                 </g>
+                              </g>
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-11" fill="white">
+                                 <use xlinkHref="#path-10" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
+                                 id="Path"
+                                 fillOpacity="0.2"
+                                 fill="#FFFFFF"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-11)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-13" fill="white">
+                                 <use xlinkHref="#path-12" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
+                                 id="Path"
+                                 fillOpacity="0.2"
+                                 fill="#1A237E"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-13)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-15" fill="white">
+                                 <use xlinkHref="#path-14" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
+                                 id="Path"
+                                 fillOpacity="0.1"
+                                 fill="#1A237E"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-15)"
+                              />
+                           </g>
+                        </g>
+                        <path
+                           d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+                           id="Path"
+                           fill="url(#radialGradient-16)"
+                           fillRule="nonzero"
+                        />
+                     </g>
+                  </g>
+               </g>
+            </g>
+         </g>
+      </svg>
+   ),
+   zapier: () => (
+      <svg
+         width="105"
+         height="28"
+         viewBox="0 0 244 66"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
+            fill="#201515"
+         />
+         <path
+            d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
+            fill="#201515"
+         />
+         <path
+            d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
+            fill="#201515"
+         />
+         <path
+            d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
+            fill="#201515"
+         />
+         <path
+            d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
+            fill="#201515"
+         />
+         <path
+            d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
+            fill="#201515"
+         />
+         <path
+            d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
+            fill="#201515"
+         />
+         <path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
+      </svg>
+   ),
+   messenger: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 48 48"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <radialGradient
+            id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
+            cx="11.087"
+            cy="7.022"
+            r="47.612"
+            gradientTransform="matrix(1 0 0 -1 0 50)"
+            gradientUnits="userSpaceOnUse"
+         >
+            <stop offset="0" stopColor="#1292ff"></stop>
+            <stop offset=".079" stopColor="#2982ff"></stop>
+            <stop offset=".23" stopColor="#4e69ff"></stop>
+            <stop offset=".351" stopColor="#6559ff"></stop>
+            <stop offset=".428" stopColor="#6d53ff"></stop>
+            <stop offset=".754" stopColor="#df47aa"></stop>
+            <stop offset=".946" stopColor="#ff6257"></stop>
+         </radialGradient>
+         <path
+            fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
+            d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
+         />
+         <path
+            d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
+            opacity=".05"
+         />
+         <path
+            d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
+            opacity=".07"
+         />
+         <path
+            fill="#ffffff"
+            d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
+         />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/default/examples/animated-beam-multiple-inputs.tsx b/apps/web/registry/default/examples/animated-beam-multiple-inputs.tsx
new file mode 100644
index 00000000..8bdf8b64
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-beam-multiple-inputs.tsx
@@ -0,0 +1,504 @@
+"use client"
+
+import type React from "react"
+import { forwardRef, useRef } from "react"
+import { ny } from "~/lib/utils"
+import { AnimatedBeam } from "~/registry/default/ui/animated-beam"
+
+const Circle = forwardRef<
+   HTMLDivElement,
+   { className?: string; children?: React.ReactNode }
+>(({ className, children }, ref) => {
+   return (
+      <div
+         ref={ref}
+         className={ny(
+            "border-border z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
+            className,
+         )}
+      >
+         {children}
+      </div>
+   )
+})
+
+export default function AnimatedBeamMultipleInputDemo() {
+   const containerRef = useRef<HTMLDivElement>(null)
+   const div1Ref = useRef<HTMLDivElement>(null)
+   const div2Ref = useRef<HTMLDivElement>(null)
+   const div3Ref = useRef<HTMLDivElement>(null)
+   const div4Ref = useRef<HTMLDivElement>(null)
+   const div5Ref = useRef<HTMLDivElement>(null)
+   const div6Ref = useRef<HTMLDivElement>(null)
+   const div7Ref = useRef<HTMLDivElement>(null)
+
+   return (
+      <div
+         className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
+         ref={containerRef}
+      >
+         <div className="flex size-full flex-row items-stretch justify-between gap-10">
+            <div className="flex flex-col justify-center gap-2">
+               <Circle ref={div1Ref}>
+                  <Icons.googleDrive />
+               </Circle>
+               <Circle ref={div2Ref}>
+                  <Icons.googleDocs />
+               </Circle>
+               <Circle ref={div3Ref}>
+                  <Icons.whatsapp />
+               </Circle>
+               <Circle ref={div4Ref}>
+                  <Icons.messenger />
+               </Circle>
+               <Circle ref={div5Ref}>
+                  <Icons.notion />
+               </Circle>
+            </div>
+            <div className="flex flex-col justify-center">
+               <Circle ref={div6Ref} className="size-16">
+                  <Icons.openai />
+               </Circle>
+            </div>
+            <div className="flex flex-col justify-center">
+               <Circle ref={div7Ref}>
+                  <Icons.user />
+               </Circle>
+            </div>
+         </div>
+
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div1Ref}
+            toRef={div6Ref}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div2Ref}
+            toRef={div6Ref}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div3Ref}
+            toRef={div6Ref}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div4Ref}
+            toRef={div6Ref}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div5Ref}
+            toRef={div6Ref}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div6Ref}
+            toRef={div7Ref}
+         />
+      </div>
+   )
+}
+
+const Icons = {
+   notion: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 100 100"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+            fill="#ffffff"
+         />
+         <path
+            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+            fill="#000000"
+            fillRule="evenodd"
+            clipRule="evenodd"
+         />
+      </svg>
+   ),
+   openai: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 24 24"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+   ),
+   googleDrive: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 87.3 78"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+            fill="#0066da"
+         />
+         <path
+            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+            fill="#00ac47"
+         />
+         <path
+            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335"
+         />
+         <path
+            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+            fill="#00832d"
+         />
+         <path
+            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+            fill="#2684fc"
+         />
+         <path
+            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00"
+         />
+      </svg>
+   ),
+   whatsapp: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 175.216 175.552"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <linearGradient
+               id="b"
+               x1="85.915"
+               x2="86.535"
+               y1="32.567"
+               y2="137.092"
+               gradientUnits="userSpaceOnUse"
+            >
+               <stop offset="0" stopColor="#57d163" />
+               <stop offset="1" stopColor="#23b33a" />
+            </linearGradient>
+            <filter
+               id="a"
+               width="1.115"
+               height="1.114"
+               x="-.057"
+               y="-.057"
+               colorInterpolationFilters="sRGB"
+            >
+               <feGaussianBlur stdDeviation="3.531" />
+            </filter>
+         </defs>
+         <path
+            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
+            fill="#b3b3b3"
+            filter="url(#a)"
+         />
+         <path
+            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
+            fill="#ffffff"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
+            fill="url(#linearGradient1780)"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
+            fill="url(#b)"
+         />
+         <path
+            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
+            fill="#ffffff"
+            fillRule="evenodd"
+         />
+      </svg>
+   ),
+   googleDocs: () => (
+      <svg
+         width="47px"
+         height="65px"
+         viewBox="0 0 47 65"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-1"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-3"
+            />
+            <linearGradient
+               x1="50.0053945%"
+               y1="8.58610612%"
+               x2="50.0053945%"
+               y2="100.013939%"
+               id="linearGradient-5"
+            >
+               <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
+               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
+            </linearGradient>
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-6"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-8"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-10"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-12"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-14"
+            />
+            <radialGradient
+               cx="3.16804688%"
+               cy="2.71744318%"
+               fx="3.16804688%"
+               fy="2.71744318%"
+               r="161.248516%"
+               gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
+               id="radialGradient-16"
+            >
+               <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
+               <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
+            </radialGradient>
+         </defs>
+         <g
+            id="Page-1"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+         >
+            <g transform="translate(-451.000000, -463.000000)">
+               <g id="Hero" transform="translate(0.000000, 63.000000)">
+                  <g
+                     id="Personal"
+                     transform="translate(277.000000, 309.000000)"
+                  >
+                     <g
+                        id="Docs-icon"
+                        transform="translate(174.000000, 91.000000)"
+                     >
+                        <g id="Group">
+                           <g id="Clipped">
+                              <mask id="mask-2" fill="white">
+                                 <use xlinkHref="#path-1" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
+                                 id="Path"
+                                 fill="#4285F4"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-2)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-4" fill="white">
+                                 <use xlinkHref="#path-3" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <polygon
+                                 id="Path"
+                                 fill="url(#linearGradient-5)"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-4)"
+                                 points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
+                              ></polygon>
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-7" fill="white">
+                                 <use xlinkHref="#path-6" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
+                                 id="Shape"
+                                 fill="#F1F1F1"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-7)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-9" fill="white">
+                                 <use xlinkHref="#path-8" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <g id="Group" mask="url(#mask-9)">
+                                 <g transform="translate(26.437500, -2.954545)">
+                                    <path
+                                       d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
+                                       id="Path"
+                                       fill="#A1C2FA"
+                                       fillRule="nonzero"
+                                    />
+                                 </g>
+                              </g>
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-11" fill="white">
+                                 <use xlinkHref="#path-10" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
+                                 id="Path"
+                                 fillOpacity="0.2"
+                                 fill="#FFFFFF"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-11)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-13" fill="white">
+                                 <use xlinkHref="#path-12" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
+                                 id="Path"
+                                 fillOpacity="0.2"
+                                 fill="#1A237E"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-13)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-15" fill="white">
+                                 <use xlinkHref="#path-14" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
+                                 id="Path"
+                                 fillOpacity="0.1"
+                                 fill="#1A237E"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-15)"
+                              />
+                           </g>
+                        </g>
+                        <path
+                           d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+                           id="Path"
+                           fill="url(#radialGradient-16)"
+                           fillRule="nonzero"
+                        />
+                     </g>
+                  </g>
+               </g>
+            </g>
+         </g>
+      </svg>
+   ),
+   zapier: () => (
+      <svg
+         width="105"
+         height="28"
+         viewBox="0 0 244 66"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
+            fill="#201515"
+         />
+         <path
+            d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
+            fill="#201515"
+         />
+         <path
+            d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
+            fill="#201515"
+         />
+         <path
+            d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
+            fill="#201515"
+         />
+         <path
+            d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
+            fill="#201515"
+         />
+         <path
+            d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
+            fill="#201515"
+         />
+         <path
+            d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
+            fill="#201515"
+         />
+         <path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
+      </svg>
+   ),
+   messenger: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 48 48"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <radialGradient
+            id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
+            cx="11.087"
+            cy="7.022"
+            r="47.612"
+            gradientTransform="matrix(1 0 0 -1 0 50)"
+            gradientUnits="userSpaceOnUse"
+         >
+            <stop offset="0" stopColor="#1292ff"></stop>
+            <stop offset=".079" stopColor="#2982ff"></stop>
+            <stop offset=".23" stopColor="#4e69ff"></stop>
+            <stop offset=".351" stopColor="#6559ff"></stop>
+            <stop offset=".428" stopColor="#6d53ff"></stop>
+            <stop offset=".754" stopColor="#df47aa"></stop>
+            <stop offset=".946" stopColor="#ff6257"></stop>
+         </radialGradient>
+         <path
+            fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
+            d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
+         />
+         <path
+            d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
+            opacity=".05"
+         />
+         <path
+            d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
+            opacity=".07"
+         />
+         <path
+            fill="#ffffff"
+            d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
+         />
+      </svg>
+   ),
+   user: () => (
+      <svg
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         fill="none"
+         stroke="#000000"
+         strokeWidth="2"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+         <circle cx="12" cy="7" r="4" />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/default/examples/animated-beam-multiple-outputs.tsx b/apps/web/registry/default/examples/animated-beam-multiple-outputs.tsx
new file mode 100644
index 00000000..1f9990a9
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-beam-multiple-outputs.tsx
@@ -0,0 +1,518 @@
+"use client"
+
+import type React from "react"
+import { forwardRef, useRef } from "react"
+import { ny } from "~/lib/utils"
+import { AnimatedBeam } from "~/registry/default/ui/animated-beam"
+
+const Circle = forwardRef<
+   HTMLDivElement,
+   { className?: string; children?: React.ReactNode }
+>(({ className, children }, ref) => {
+   return (
+      <div
+         ref={ref}
+         className={ny(
+            "z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
+            className,
+         )}
+      >
+         {children}
+      </div>
+   )
+})
+
+export default function AnimatedBeamMultipleOutputDemo({
+   className,
+}: {
+   className?: string
+}) {
+   const containerRef = useRef<HTMLDivElement>(null)
+   const div1Ref = useRef<HTMLDivElement>(null)
+   const div2Ref = useRef<HTMLDivElement>(null)
+   const div3Ref = useRef<HTMLDivElement>(null)
+   const div4Ref = useRef<HTMLDivElement>(null)
+   const div5Ref = useRef<HTMLDivElement>(null)
+   const div6Ref = useRef<HTMLDivElement>(null)
+   const div7Ref = useRef<HTMLDivElement>(null)
+
+   return (
+      <div
+         className={ny(
+            "bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl",
+            className,
+         )}
+         ref={containerRef}
+      >
+         <div className="flex size-full flex-row items-stretch justify-between gap-10">
+            <div className="flex flex-col justify-center">
+               <Circle ref={div7Ref}>
+                  <Icons.user />
+               </Circle>
+            </div>
+            <div className="flex flex-col justify-center">
+               <Circle ref={div6Ref} className="size-16">
+                  <Icons.openai />
+               </Circle>
+            </div>
+            <div className="flex flex-col justify-center gap-2">
+               <Circle ref={div1Ref}>
+                  <Icons.googleDrive />
+               </Circle>
+               <Circle ref={div2Ref}>
+                  <Icons.googleDocs />
+               </Circle>
+               <Circle ref={div3Ref}>
+                  <Icons.whatsapp />
+               </Circle>
+               <Circle ref={div4Ref}>
+                  <Icons.messenger />
+               </Circle>
+               <Circle ref={div5Ref}>
+                  <Icons.notion />
+               </Circle>
+            </div>
+         </div>
+
+         {/* AnimatedBeams */}
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div1Ref}
+            toRef={div6Ref}
+            duration={3}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div2Ref}
+            toRef={div6Ref}
+            duration={3}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div3Ref}
+            toRef={div6Ref}
+            duration={3}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div4Ref}
+            toRef={div6Ref}
+            duration={3}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div5Ref}
+            toRef={div6Ref}
+            duration={3}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div6Ref}
+            toRef={div7Ref}
+            duration={3}
+         />
+      </div>
+   )
+}
+
+const Icons = {
+   notion: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 100 100"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+            fill="#ffffff"
+         />
+         <path
+            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+            fill="#000000"
+            fillRule="evenodd"
+            clipRule="evenodd"
+         />
+      </svg>
+   ),
+   openai: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 24 24"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+   ),
+   googleDrive: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 87.3 78"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+            fill="#0066da"
+         />
+         <path
+            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+            fill="#00ac47"
+         />
+         <path
+            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335"
+         />
+         <path
+            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+            fill="#00832d"
+         />
+         <path
+            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+            fill="#2684fc"
+         />
+         <path
+            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00"
+         />
+      </svg>
+   ),
+   whatsapp: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 175.216 175.552"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <linearGradient
+               id="b"
+               x1="85.915"
+               x2="86.535"
+               y1="32.567"
+               y2="137.092"
+               gradientUnits="userSpaceOnUse"
+            >
+               <stop offset="0" stopColor="#57d163" />
+               <stop offset="1" stopColor="#23b33a" />
+            </linearGradient>
+            <filter
+               id="a"
+               width="1.115"
+               height="1.114"
+               x="-.057"
+               y="-.057"
+               colorInterpolationFilters="sRGB"
+            >
+               <feGaussianBlur stdDeviation="3.531" />
+            </filter>
+         </defs>
+         <path
+            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
+            fill="#b3b3b3"
+            filter="url(#a)"
+         />
+         <path
+            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
+            fill="#ffffff"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
+            fill="url(#linearGradient1780)"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
+            fill="url(#b)"
+         />
+         <path
+            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
+            fill="#ffffff"
+            fillRule="evenodd"
+         />
+      </svg>
+   ),
+   googleDocs: () => (
+      <svg
+         width="47px"
+         height="65px"
+         viewBox="0 0 47 65"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-1"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-3"
+            />
+            <linearGradient
+               x1="50.0053945%"
+               y1="8.58610612%"
+               x2="50.0053945%"
+               y2="100.013939%"
+               id="linearGradient-5"
+            >
+               <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
+               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
+            </linearGradient>
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-6"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-8"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-10"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-12"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-14"
+            />
+            <radialGradient
+               cx="3.16804688%"
+               cy="2.71744318%"
+               fx="3.16804688%"
+               fy="2.71744318%"
+               r="161.248516%"
+               gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
+               id="radialGradient-16"
+            >
+               <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
+               <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
+            </radialGradient>
+         </defs>
+         <g
+            id="Page-1"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+         >
+            <g transform="translate(-451.000000, -463.000000)">
+               <g id="Hero" transform="translate(0.000000, 63.000000)">
+                  <g
+                     id="Personal"
+                     transform="translate(277.000000, 309.000000)"
+                  >
+                     <g
+                        id="Docs-icon"
+                        transform="translate(174.000000, 91.000000)"
+                     >
+                        <g id="Group">
+                           <g id="Clipped">
+                              <mask id="mask-2" fill="white">
+                                 <use xlinkHref="#path-1" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
+                                 id="Path"
+                                 fill="#4285F4"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-2)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-4" fill="white">
+                                 <use xlinkHref="#path-3" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <polygon
+                                 id="Path"
+                                 fill="url(#linearGradient-5)"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-4)"
+                                 points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
+                              ></polygon>
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-7" fill="white">
+                                 <use xlinkHref="#path-6" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
+                                 id="Shape"
+                                 fill="#F1F1F1"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-7)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-9" fill="white">
+                                 <use xlinkHref="#path-8" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <g id="Group" mask="url(#mask-9)">
+                                 <g transform="translate(26.437500, -2.954545)">
+                                    <path
+                                       d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
+                                       id="Path"
+                                       fill="#A1C2FA"
+                                       fillRule="nonzero"
+                                    />
+                                 </g>
+                              </g>
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-11" fill="white">
+                                 <use xlinkHref="#path-10" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
+                                 id="Path"
+                                 fillOpacity="0.2"
+                                 fill="#FFFFFF"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-11)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-13" fill="white">
+                                 <use xlinkHref="#path-12" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
+                                 id="Path"
+                                 fillOpacity="0.2"
+                                 fill="#1A237E"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-13)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-15" fill="white">
+                                 <use xlinkHref="#path-14" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
+                                 id="Path"
+                                 fillOpacity="0.1"
+                                 fill="#1A237E"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-15)"
+                              />
+                           </g>
+                        </g>
+                        <path
+                           d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+                           id="Path"
+                           fill="url(#radialGradient-16)"
+                           fillRule="nonzero"
+                        />
+                     </g>
+                  </g>
+               </g>
+            </g>
+         </g>
+      </svg>
+   ),
+   zapier: () => (
+      <svg
+         width="105"
+         height="28"
+         viewBox="0 0 244 66"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
+            fill="#201515"
+         />
+         <path
+            d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
+            fill="#201515"
+         />
+         <path
+            d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
+            fill="#201515"
+         />
+         <path
+            d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
+            fill="#201515"
+         />
+         <path
+            d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
+            fill="#201515"
+         />
+         <path
+            d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
+            fill="#201515"
+         />
+         <path
+            d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
+            fill="#201515"
+         />
+         <path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
+      </svg>
+   ),
+   messenger: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 48 48"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <radialGradient
+            id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
+            cx="11.087"
+            cy="7.022"
+            r="47.612"
+            gradientTransform="matrix(1 0 0 -1 0 50)"
+            gradientUnits="userSpaceOnUse"
+         >
+            <stop offset="0" stopColor="#1292ff"></stop>
+            <stop offset=".079" stopColor="#2982ff"></stop>
+            <stop offset=".23" stopColor="#4e69ff"></stop>
+            <stop offset=".351" stopColor="#6559ff"></stop>
+            <stop offset=".428" stopColor="#6d53ff"></stop>
+            <stop offset=".754" stopColor="#df47aa"></stop>
+            <stop offset=".946" stopColor="#ff6257"></stop>
+         </radialGradient>
+         <path
+            fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
+            d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
+         />
+         <path
+            d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
+            opacity=".05"
+         />
+         <path
+            d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
+            opacity=".07"
+         />
+         <path
+            fill="#ffffff"
+            d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
+         />
+      </svg>
+   ),
+   user: () => (
+      <svg
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         fill="none"
+         stroke="#000000"
+         strokeWidth="2"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+         <circle cx="12" cy="7" r="4" />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/default/examples/animated-beam-unidirectional.tsx b/apps/web/registry/default/examples/animated-beam-unidirectional.tsx
new file mode 100644
index 00000000..95f581c8
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-beam-unidirectional.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import type React from "react"
+import { forwardRef, useRef } from "react"
+import { ny } from "~/lib/utils"
+import { AnimatedBeam } from "~/registry/default/ui/animated-beam"
+
+const Circle = forwardRef<
+   HTMLDivElement,
+   { className?: string; children?: React.ReactNode }
+>(({ className, children }, ref) => {
+   return (
+      <div
+         ref={ref}
+         className={ny(
+            "z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
+            className,
+         )}
+      >
+         {children}
+      </div>
+   )
+})
+
+export default function AnimatedBeamDemo() {
+   const containerRef = useRef<HTMLDivElement>(null)
+   const div1Ref = useRef<HTMLDivElement>(null)
+   const div2Ref = useRef<HTMLDivElement>(null)
+
+   return (
+      <div
+         className="bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
+         ref={containerRef}
+      >
+         <div className="flex size-full flex-col items-stretch justify-between gap-10">
+            <div className="flex flex-row justify-between">
+               <Circle ref={div1Ref}>
+                  <Icons.user />
+               </Circle>
+               <Circle ref={div2Ref}>
+                  <Icons.openai />
+               </Circle>
+            </div>
+         </div>
+
+         <AnimatedBeam
+            duration={3}
+            containerRef={containerRef}
+            fromRef={div1Ref}
+            toRef={div2Ref}
+         />
+      </div>
+   )
+}
+
+const Icons = {
+   openai: () => (
+      <svg
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+   ),
+   user: () => (
+      <svg
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         fill="none"
+         stroke="#000000"
+         strokeWidth="2"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+         <circle cx="12" cy="7" r="4" />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/default/examples/animated-circular-progress-bar-demo.tsx b/apps/web/registry/default/examples/animated-circular-progress-bar-demo.tsx
new file mode 100644
index 00000000..0716bf7c
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-circular-progress-bar-demo.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import AnimatedCircularProgressBar from "~/registry/default/ui/animated-circular-progress-bar"
+
+export default function AnimatedCircularProgressBarDemo() {
+   const [value, setValue] = useState(0)
+
+   useEffect(() => {
+      const handleIncrement = (prev: number) => {
+         if (prev === 100) {
+            return 0
+         }
+         return prev + 10
+      }
+      setValue(handleIncrement)
+      const interval = setInterval(() => setValue(handleIncrement), 2000)
+      return () => clearInterval(interval)
+   }, [])
+
+   return (
+      <AnimatedCircularProgressBar
+         max={100}
+         min={0}
+         value={value}
+         gaugePrimaryColor="rgb(79 70 229)"
+         gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-feature-card-1.tsx b/apps/web/registry/default/examples/animated-feature-card-1.tsx
new file mode 100644
index 00000000..15f9f32f
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-feature-card-1.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import { motion } from "framer-motion"
+
+export default function FeatureCard1() {
+   const variant1 = {
+      initial: {
+         scale: 0.87,
+         transition: {
+            delay: 0.05,
+            duration: 0.2,
+            ease: "linear",
+         },
+      },
+      whileHover: {
+         scale: 0.8,
+         boxShadow:
+            "rgba(245,40,145,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.2,
+            ease: "linear",
+         },
+      },
+   }
+   const variant2 = {
+      initial: {
+         y: -27,
+         scale: 0.95,
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: "linear",
+         },
+      },
+      whileHover: {
+         y: -55,
+         scale: 0.87,
+         boxShadow:
+            "rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: "linear",
+         },
+      },
+   }
+   const variant3 = {
+      initial: {
+         y: -25,
+         opacity: 0,
+         scale: 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.2,
+            ease: "linear",
+         },
+      },
+      whileHover: {
+         y: -45,
+         opacity: 1,
+         scale: 1,
+         boxShadow:
+            "rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.2,
+            ease: "easeInOut",
+         },
+      },
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col justify-between"
+         >
+            <div className="flex size-full items-center justify-center rounded-t-xl">
+               <div className="relative flex flex-col items-center justify-center gap-y-2 p-10">
+                  <motion.div
+                     variants={variant1}
+                     className="z-[1] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/jack"
+                           alt="jack"
+                        />
+                     </div>
+                     <div className="flex flex-col gap-y-2">
+                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
+
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                     </div>
+                  </motion.div>
+                  <motion.div
+                     variants={variant2}
+                     className="z-[2] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/jane"
+                           alt="jane"
+                        />
+                     </div>
+                     <div className="flex flex-col gap-y-2">
+                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
+                     </div>
+                  </motion.div>
+                  <motion.div
+                     variants={variant3}
+                     className="absolute bottom-0 z-[3] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/jill"
+                           alt="jill"
+                        />
+                     </div>
+                     <div className="flex flex-col gap-y-2">
+                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                     </div>
+                  </motion.div>
+               </div>
+            </div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Notifications</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Instantly get notified about events
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-feature-card-10.tsx b/apps/web/registry/default/examples/animated-feature-card-10.tsx
new file mode 100644
index 00000000..ea1d08bd
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-feature-card-10.tsx
@@ -0,0 +1,144 @@
+"use client"
+
+import {
+   AnimatePresence,
+   cubicBezier,
+   motion,
+   useAnimation,
+   useInView,
+} from "framer-motion"
+import { useEffect, useRef } from "react"
+
+const cardImage = [
+   {
+      id: 1,
+      title: "Tom",
+      link: "#",
+      image: "https://avatar.vercel.sh/tom",
+   },
+   {
+      id: 2,
+      title: "Chris",
+      link: "#",
+      image: "https://avatar.vercel.sh/chris",
+   },
+   {
+      id: 3,
+      title: "PJ",
+      link: "#",
+      image: "https://avatar.vercel.sh/pj",
+   },
+   {
+      id: 4,
+      title: "Scott",
+      link: "#",
+      image: "https://avatar.vercel.sh/scott",
+   },
+   {
+      id: 5,
+      title: "Yehuda",
+      link: "#",
+      image: "https://avatar.vercel.sh/yehuda",
+   },
+   {
+      id: 6,
+      title: "Ezra",
+      link: "#",
+      image: "https://avatar.vercel.sh/ezra",
+   },
+   {
+      id: 7,
+      title: "Ivey",
+      link: "#",
+      image: "https://avatar.vercel.sh/ivey",
+   },
+   {
+      id: 8,
+      title: "Evan",
+      link: "#",
+      image: "https://avatar.vercel.sh/evan",
+   },
+   {
+      id: 9,
+      title: "Van",
+      link: "#",
+      image: "https://avatar.vercel.sh/van",
+   },
+]
+
+export default function FeatureCard10() {
+   const containerRef = useRef(null)
+   const inView = useInView(containerRef, { amount: 0.25 })
+   const controls = useAnimation()
+
+   useEffect(() => {
+      if (inView) controls.start("visible")
+      else controls.start("hidden")
+   }, [inView, controls])
+
+   return (
+      <div className="flex h-full transform-gpu flex-col items-center justify-between gap-5 rounded-lg border border-neutral-200 bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] xl:flex-row dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <div className="flex w-full flex-col items-start justify-between gap-y-10 p-10 xl:h-full xl:w-1/2">
+            <h2 className="text-3xl font-semibold">
+               Nyxb UI let's you build amazing websites with all your friends.
+            </h2>
+            <a
+               href="#"
+               className="text-base font-normal text-gray-500 underline-offset-4 transition-all hover:underline"
+            >
+               Check out our showcase
+            </a>
+         </div>
+         <div className="relative w-full overflow-hidden xl:w-1/2">
+            <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-1/3 bg-gradient-to-b from-white dark:from-black"></div>
+            <div
+               ref={containerRef}
+               className="relative -right-[50px] -top-[100px] grid max-h-[450px] grid-cols-3 gap-5 [transform:rotate(-15deg)translateZ(10px);]"
+            >
+               <AnimatePresence>
+                  {cardImage.map((card, index) => (
+                     <motion.div
+                        variants={{
+                           hidden: { opacity: 0, scale: 0.96, y: 25 },
+                           visible: { opacity: 1, scale: 1, y: 0 },
+                        }}
+                        initial="hidden"
+                        animate={controls}
+                        exit={{
+                           opacity: 0,
+                           scale: 0,
+                           transition: {
+                              duration: 0.1,
+                              ease: cubicBezier(0.22, 1, 0.36, 1),
+                           },
+                        }}
+                        transition={{
+                           duration: 0.2,
+                           ease: cubicBezier(0.22, 1, 0.36, 1),
+                           delay: index * 0.04,
+                        }}
+                        key={card.id}
+                        className="flex flex-col items-center gap-y-2 rounded-md border bg-white/5 p-5"
+                     >
+                        <img
+                           src={card.image}
+                           alt={card.title}
+                           className="size-20 rounded-full object-cover"
+                        />
+                        <p className="text-sm dark:text-neutral-200/50">
+                           {card.title}
+                        </p>
+                        <a
+                           href={card.link}
+                           className="rounded-md border border-neutral-700/50 bg-neutral-600 p-2 py-0.5 text-white shadow-xl drop-shadow-lg hover:bg-neutral-500 dark:border-neutral-400/20 dark:bg-gray-500"
+                        >
+                           Website
+                        </a>
+                     </motion.div>
+                  ))}
+               </AnimatePresence>
+            </div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-feature-card-2.tsx b/apps/web/registry/default/examples/animated-feature-card-2.tsx
new file mode 100644
index 00000000..34a0b225
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-feature-card-2.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { cubicBezier, motion } from "framer-motion"
+import { Clock, Download, MessageCircle, Star } from "lucide-react"
+
+const texts = [
+   {
+      id: 1,
+      header: "New Feature Release.",
+      subheader: "Experience our app's latest features now.",
+      icon: <Star />,
+   },
+   {
+      id: 2,
+      header: "App Update Available.",
+      subheader:
+         "A new update is available for download. Get the latest version!",
+      icon: <Download />,
+   },
+   {
+      id: 3,
+      header: "Scheduled Maintenance.",
+      subheader:
+         "Our app will be temporarily unavailable due to scheduled maintenance.",
+      icon: <Clock />,
+   },
+   {
+      id: 4,
+      header: "Feedback Appreciated.",
+      subheader:
+         "We'd love to hear your thoughts on our app. Share your feedback!",
+      icon: <MessageCircle />,
+   },
+]
+
+export default function FeatureCard2() {
+   const itemVariants = {
+      initial: (index: number) => ({
+         y: 0,
+         scale: index === 3 ? 0.85 : 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      }),
+      whileHover: (index: number) => ({
+         y: -110,
+         opacity: 1,
+         scale: index === 0 ? 0.85 : index === 3 ? 1 : 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      }),
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col justify-between"
+         >
+            <div className="flex size-full items-center justify-center rounded-t-xl">
+               <motion.div className="flex h-[310px] w-full cursor-pointer flex-col gap-y-5 overflow-hidden rounded-t-md p-5">
+                  {texts.map((text, index) => (
+                     <motion.div
+                        key={text.id}
+                        className="w-full origin-right rounded-md  border border-slate-300/50 p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
+                        custom={index}
+                        variants={itemVariants}
+                     >
+                        <div className="flex flex-row gap-2">
+                           {text.icon}
+                           <p className="text-black dark:text-white">
+                              {text.header}
+                           </p>
+                        </div>
+                        <p className="text-gray-400 dark:text-gray-400">
+                           {text.subheader}
+                        </p>
+                     </motion.div>
+                  ))}
+               </motion.div>
+            </div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Notifications</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Instantly get notified about events
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-feature-card-3.tsx b/apps/web/registry/default/examples/animated-feature-card-3.tsx
new file mode 100644
index 00000000..da9f321e
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-feature-card-3.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { cubicBezier, motion } from "framer-motion"
+
+export default function FeatureCard3() {
+   const variant1 = {
+      initial: {
+         y: 4,
+         scale: 0.5,
+         opacity: 0,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: -2,
+         opacity: 1,
+         scale: 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant2 = {
+      initial: {
+         y: -2,
+         opacity: 1,
+         scale: 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: 8,
+         opacity: 1,
+         scale: 1.05,
+         boxShadow:
+            "rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col justify-between"
+         >
+            <motion.div className="flex size-full cursor-pointer flex-col items-center justify-center gap-y-2 overflow-hidden rounded-t-xl p-8">
+               <motion.p
+                  variants={variant1}
+                  className="w-fit rounded-full border px-2 text-[15px]"
+               >
+                  Make it Pop ✨
+               </motion.p>
+               <motion.div
+                  variants={variant2}
+                  className="flex max-w-[300px] items-start gap-x-2 rounded-lg border border-neutral-300 border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
+               >
+                  <div className="flex size-6 shrink-0 rounded-full bg-blue-500">
+                     <img
+                        className="size-full rounded-full object-cover"
+                        src="https://avatar.vercel.sh/jane"
+                        alt="jane"
+                     />
+                  </div>
+                  <div>
+                     <h3 className="text-base font-semibold">Josh</h3>
+                     <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                     </p>
+                  </div>
+               </motion.div>
+            </motion.div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">AI Co-Pilot</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Use AI to make your writing stand out
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-feature-card-4.tsx b/apps/web/registry/default/examples/animated-feature-card-4.tsx
new file mode 100644
index 00000000..ec49654b
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-feature-card-4.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import { cubicBezier, motion } from "framer-motion"
+
+export default function FeatureCard4() {
+   const variant1 = {
+      initial: {
+         x: 35,
+         y: 5,
+         scale: 0.8,
+         rotate: -3,
+         zIndex: 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.1,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         x: 0,
+         y: 0,
+         scale: 1,
+         rotate: 0,
+         boxShadow:
+            "rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.1,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant2 = {
+      initial: {
+         scale: 1.1,
+         zIndex: 2,
+         transition: {
+            delay: 0.05,
+            duration: 0.1,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         scale: 1,
+         boxShadow:
+            "rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.1,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant3 = {
+      initial: {
+         x: -35,
+         y: 5,
+         scale: 0.8,
+         rotate: 3,
+         zIndex: 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.1,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         x: 0,
+         y: 0,
+         scale: 1,
+         rotate: 0,
+         boxShadow:
+            "rgba(245,40,145,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.1,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col items-start justify-between"
+         >
+            <div className="flex size-full items-center justify-center rounded-t-xl bg-transparent p-10">
+               <motion.div className="flex h-[230px] w-full items-center justify-between gap-x-4">
+                  <motion.div
+                     variants={variant1}
+                     className="z-[3] flex h-fit w-full  flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/jack"
+                           alt="jack"
+                        />
+                     </div>
+                     <div className="grid grid-cols-2 gap-2">
+                        <div className="h-2 w-10 rounded-full bg-neutral-700/50"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-400/80"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-300/80"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-600/80"></div>
+                     </div>
+                  </motion.div>
+                  <motion.div
+                     variants={variant2}
+                     className="z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/christina"
+                           alt="christina"
+                        />
+                     </div>
+                     <div className="grid grid-cols-2 gap-2">
+                        <div className="h-2 w-10 rounded-full bg-neutral-700/50"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-400/80"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-300/80"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-600/80"></div>
+                     </div>
+                  </motion.div>
+                  <motion.div
+                     variants={variant3}
+                     className="z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/joshua"
+                           alt="joshua"
+                        />
+                     </div>
+                     <div className="grid grid-cols-2 gap-2">
+                        <div className="h-2 w-10 rounded-full bg-neutral-700/50"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-400/80"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-300/80"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-600/80"></div>
+                     </div>
+                  </motion.div>
+               </motion.div>
+            </div>
+
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Social</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Write once, share with your friends
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-feature-card-5.tsx b/apps/web/registry/default/examples/animated-feature-card-5.tsx
new file mode 100644
index 00000000..2c3f79c3
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-feature-card-5.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { cubicBezier, motion } from "framer-motion"
+
+export default function FeatureCard5() {
+   const variant1 = {
+      initial: {
+         viewBox: "0 -950 366 1408",
+         filter: "saturate(0.3)",
+         opacity: 0.5,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         viewBox: "0 -60 366 310",
+         filter: "saturate(1)",
+         opacity: 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant2 = {
+      initial: {
+         y: 0,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: 0,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col items-start justify-between"
+         >
+            <div className="relative flex size-full cursor-pointer items-center justify-center overflow-hidden rounded-t-xl bg-transparent p-10">
+               <div className="relative h-[150px] w-full cursor-pointer overflow-hidden rounded-xl border border-slate-200/50 bg-white dark:border-neutral-700/50 dark:bg-neutral-900">
+                  <motion.p
+                     variants={variant2}
+                     className="absolute left-5 top-5 w-fit text-[15px]"
+                  >
+                     +245%
+                  </motion.p>
+                  <motion.svg
+                     variants={variant1}
+                     xmlns="http://www.w3.org/2000/svg"
+                     fill="none"
+                     preserveAspectRatio="none"
+                     className="absolute inset-0 size-full"
+                     viewBox="0 -950 366 1408"
+                  >
+                     <path
+                        fill="url(#a)"
+                        d="M0 193c109.5 0 260.5-52.5 366-192.5v907H0V193Z"
+                     />
+                     <defs>
+                        <linearGradient
+                           id="a"
+                           x1={183}
+                           x2={183}
+                           y1={0.5}
+                           y2={262}
+                           gradientUnits="userSpaceOnUse"
+                        >
+                           <stop stopColor="#22c55e" />
+                           <stop offset={1} stopColor="#15803d" />
+                        </linearGradient>
+                     </defs>
+                  </motion.svg>
+               </div>
+            </div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Growth</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Invest and watch your money grow
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-feature-card-6.tsx b/apps/web/registry/default/examples/animated-feature-card-6.tsx
new file mode 100644
index 00000000..0cf3f8e3
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-feature-card-6.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { cubicBezier, motion } from "framer-motion"
+
+export default function FeatureCard6() {
+   const variant1 = {
+      initial: {
+         y: 0,
+         scale: 0.95,
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: 25,
+         x: 10,
+         scale: 1,
+         rotate: -2,
+         boxShadow:
+            "rgba(39,127,245,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant2 = {
+      initial: {
+         y: 0,
+         scale: 0.95,
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: -25,
+         x: -10,
+         scale: 1,
+         rotate: 3,
+         boxShadow:
+            "rgba(39,245,76,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col items-start justify-between"
+         >
+            <div className="flex h-[300px] w-full items-center justify-center rounded-t-xl bg-transparent ">
+               <div className="relative flex cursor-pointer flex-col items-center justify-center gap-y-2 p-14">
+                  <motion.div
+                     variants={variant1}
+                     className="dark:bg-neutral-980 z-[3] flex size-full items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/jack"
+                           alt="jack"
+                        />
+                     </div>
+                     <div className="flex flex-col gap-y-2">
+                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                     </div>
+                  </motion.div>
+                  <motion.div
+                     variants={variant2}
+                     className="absolute bottom-14 z-[2] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/jack"
+                           alt="jack"
+                        />
+                     </div>
+                     <div className="flex flex-col gap-y-2">
+                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                     </div>
+                  </motion.div>
+               </div>
+            </div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Share</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Share results with your friends
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-feature-card-7.tsx b/apps/web/registry/default/examples/animated-feature-card-7.tsx
new file mode 100644
index 00000000..c96648c9
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-feature-card-7.tsx
@@ -0,0 +1,176 @@
+"use client"
+
+import { motion, useAnimation, useInView } from "framer-motion"
+import {
+   BarChart,
+   File,
+   Globe,
+   HeartHandshake,
+   Rss,
+   Shield,
+} from "lucide-react"
+import { useEffect, useId, useRef, useState } from "react"
+import { ny } from "~/lib/utils"
+import Marquee from "~/registry/default/ui/marquee"
+
+const tiles = [
+   {
+      icon: <HeartHandshake className="size-full" />,
+      bg: (
+         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]"></div>
+      ),
+   },
+   {
+      icon: <Globe className="size-full" />,
+      bg: (
+         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 opacity-70 blur-[20px]"></div>
+      ),
+   },
+   {
+      icon: <File className="size-full" />,
+      bg: (
+         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-green-500 via-teal-500 to-emerald-600 opacity-70 blur-[20px]"></div>
+      ),
+   },
+   {
+      icon: <Shield className="size-full" />,
+      bg: (
+         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-600 opacity-70 blur-[20px]"></div>
+      ),
+   },
+   {
+      icon: <Rss className="size-full" />,
+      bg: (
+         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]"></div>
+      ),
+   },
+   {
+      icon: <BarChart className="size-full" />,
+      bg: (
+         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-gray-600 via-gray-500 to-gray-400 opacity-70 blur-[20px]"></div>
+      ),
+   },
+]
+
+function shuffleArray(array: any[]) {
+   let currentIndex = array.length
+   let randomIndex
+   // While there remain elements to shuffle.
+   while (currentIndex !== 0) {
+      // Pick a remaining element.
+      randomIndex = Math.floor(Math.random() * currentIndex)
+      currentIndex--
+      // And swap it with the current element.
+      ;[array[currentIndex], array[randomIndex]] = [
+         array[randomIndex],
+         array[currentIndex],
+      ]
+   }
+   return array
+}
+
+function Card(card: { icon: JSX.Element; bg: JSX.Element }) {
+   const id = useId()
+   const controls = useAnimation()
+   const ref = useRef(null)
+   const inView = useInView(ref, { once: true })
+
+   useEffect(() => {
+      if (inView) {
+         controls.start({
+            opacity: 1,
+            transition: {
+               delay: Math.random() * 2,
+               ease: "easeOut",
+               duration: 1,
+            },
+         })
+      }
+   }, [controls, inView])
+
+   return (
+      <motion.div
+         key={id}
+         ref={ref}
+         initial={{ opacity: 0 }}
+         animate={controls}
+         className={ny(
+            "relative size-20 cursor-pointer overflow-hidden rounded-2xl border p-4",
+            // light styles
+            "bg-white",
+            // dark styles
+            "transform-gpu dark:bg-transparent dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+         )}
+      >
+         {card.icon}
+         {card.bg}
+      </motion.div>
+   )
+}
+
+export default function FeatureCard7() {
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+   const [randomTiles1] = useState(() => shuffleArray([...tiles]))
+   const [randomTiles2] = useState(() => shuffleArray([...tiles]))
+   const [randomTiles3] = useState(() => shuffleArray([...tiles]))
+   const [randomTiles4] = useState(() => shuffleArray([...tiles]))
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col items-start justify-between"
+         >
+            <div className="group relative flex h-[300px] w-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl p-4">
+               <div className="relative flex flex-col items-center justify-center gap-y-2 px-10">
+                  <Marquee
+                     reverse
+                     className="-delay-[200ms] [--duration:20s]"
+                     repeat={4}
+                  >
+                     {randomTiles1.map((review, idx) => (
+                        <Card key={idx} {...review} />
+                     ))}
+                  </Marquee>
+                  <Marquee reverse className="[--duration:30s]" repeat={4}>
+                     {randomTiles2.map((review, idx) => (
+                        <Card key={idx} {...review} />
+                     ))}
+                  </Marquee>
+                  <Marquee
+                     reverse
+                     className="-delay-[200ms] [--duration:20s]"
+                     repeat={4}
+                  >
+                     {randomTiles3.map((review, idx) => (
+                        <Card key={idx} {...review} />
+                     ))}
+                  </Marquee>
+                  <Marquee reverse className="[--duration:30s]" repeat={4}>
+                     {randomTiles4.map((review, idx) => (
+                        <Card key={idx} {...review} />
+                     ))}
+                  </Marquee>
+                  <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
+                  <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
+               </div>
+            </div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Integrations</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Integrate with all your favourite apps
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-feature-card-8.tsx b/apps/web/registry/default/examples/animated-feature-card-8.tsx
new file mode 100644
index 00000000..915a4e56
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-feature-card-8.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { cubicBezier, motion } from "framer-motion"
+
+export default function FeatureCard8() {
+   const variant1 = {
+      initial: {
+         y: 0,
+         scale: 0.97,
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: -45,
+         scale: 1,
+         boxShadow:
+            "rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant2 = {
+      initial: {
+         y: 30,
+         opacity: 0,
+         scale: 0.97,
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: 10,
+         opacity: 1,
+         scale: 1,
+         boxShadow:
+            "rgba(245,40,145,0.05) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant3 = {
+      initial: {
+         x: 30,
+         y: 20,
+         opacity: 0,
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         x: 5,
+         y: 5,
+         opacity: 1,
+         boxShadow:
+            "rgba(39,245,76,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col items-start justify-between"
+         >
+            <div className="flex size-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl bg-transparent">
+               <div className="relative flex flex-col items-center justify-center gap-y-2 px-10 py-20">
+                  <motion.div
+                     variants={variant1}
+                     className=" relative flex items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-6 rounded-full bg-blue-500">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/joshua"
+                           alt="joshua"
+                        />
+                     </div>
+                     <div className="w-[calc(100%-3rem)]">
+                        <h3 className="text-base font-semibold">Mary</h3>
+                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                           I think the design can be improved
+                        </p>
+                     </div>
+                  </motion.div>
+                  <motion.div
+                     variants={variant2}
+                     className=" absolute inset-10 -bottom-14 z-[3] m-auto flex h-fit items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="w-8 ">
+                        <div className="size-6 rounded-full bg-blue-500">
+                           <img
+                              className="size-full rounded-full object-cover"
+                              src="https://avatar.vercel.sh/christina"
+                              alt="christina"
+                           />
+                        </div>
+                     </div>
+                     <div className="w-[calc(100%-3rem)]">
+                        <h3 className="text-base font-semibold">Joshua</h3>
+                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                           On it ✅
+                        </p>
+                     </div>
+                     <motion.p
+                        variants={variant3}
+                        className="highlighted absolute -bottom-2 right-2 w-fit rounded-full border bg-cyan-500 px-2 py-0.5 text-xs text-white"
+                     >
+                        sent
+                     </motion.p>
+                  </motion.div>
+               </div>
+            </div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Reply</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Reply to other creators in app
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-feature-card-9.tsx b/apps/web/registry/default/examples/animated-feature-card-9.tsx
new file mode 100644
index 00000000..9f37265c
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-feature-card-9.tsx
@@ -0,0 +1,162 @@
+"use client"
+
+import { AnimatePresence, motion } from "framer-motion"
+import type { ReactElement } from "react"
+import React, { useEffect, useMemo, useState } from "react"
+import { ny } from "~/lib/utils"
+
+export const AnimatedList = React.memo(
+   ({
+      className,
+      children,
+      delay = 1000,
+   }: {
+      className?: string
+      children: React.ReactNode
+      delay?: number
+   }) => {
+      const [index, setIndex] = useState(0)
+      const childrenArray = React.Children.toArray(children)
+
+      useEffect(() => {
+         const interval = setInterval(() => {
+            setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)
+         }, delay)
+
+         return () => clearInterval(interval)
+      }, [childrenArray.length, delay])
+
+      const itemsToShow = useMemo(
+         () => childrenArray.slice(0, index + 1).reverse(),
+         [index, childrenArray],
+      )
+
+      return (
+         <div className={`flex flex-col items-center gap-4 ${className}`}>
+            <AnimatePresence>
+               {itemsToShow.map((item) => (
+                  <AnimatedListItem key={(item as ReactElement).key}>
+                     {item}
+                  </AnimatedListItem>
+               ))}
+            </AnimatePresence>
+         </div>
+      )
+   },
+)
+
+AnimatedList.displayName = "AnimatedList"
+
+export function AnimatedListItem({ children }: { children: React.ReactNode }) {
+   const animations = {
+      initial: { scale: 0, opacity: 0 },
+      animate: { scale: 1, opacity: 1, originY: 0 },
+      exit: { scale: 0, opacity: 0 },
+      transition: { type: "spring", stiffness: 350, damping: 40 },
+   }
+
+   return (
+      <motion.div {...animations} layout className="mx-auto w-full">
+         {children}
+      </motion.div>
+   )
+}
+
+interface Item {
+   name: string
+   description: string
+   icon: string
+   color: string
+   time: string
+}
+
+let notifications = [
+   {
+      name: "Payment received",
+      description: "Nyxb UI",
+      time: "15m ago",
+
+      icon: "💸",
+      color: "#00C9A7",
+   },
+   {
+      name: "User signed up",
+      description: "Nyxb UI",
+      time: "10m ago",
+      icon: "👤",
+      color: "#FFB800",
+   },
+   {
+      name: "New message",
+      description: "Nyxb UI",
+      time: "5m ago",
+      icon: "💬",
+      color: "#FF3D71",
+   },
+   {
+      name: "New event",
+      description: "Nyxb UI",
+      time: "2m ago",
+      icon: "🗞️",
+      color: "#1E86FF",
+   },
+]
+
+notifications = Array.from({ length: 10 }, () => notifications).flat()
+
+function Notification({ name, description, icon, color, time }: Item) {
+   return (
+      <figure
+         className={ny(
+            "relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-lg p-4",
+            // animation styles
+            "transition-all duration-200 ease-in-out hover:scale-[103%]",
+            // light styles
+            "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
+            // dark styles
+            "transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+         )}
+      >
+         <div className="flex flex-row items-center gap-3">
+            <div
+               className="flex size-10 items-center justify-center rounded-2xl"
+               style={{
+                  backgroundColor: color,
+               }}
+            >
+               <span className="text-lg">{icon}</span>
+            </div>
+            <div className="flex flex-col overflow-hidden">
+               <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
+                  <span className="text-sm sm:text-lg">{name}</span>
+                  <span className="mx-1">·</span>
+                  <span className="text-xs text-gray-500">{time}</span>
+               </figcaption>
+               <p className="text-sm font-normal dark:text-white/60">
+                  {description}
+               </p>
+            </div>
+         </div>
+      </figure>
+   )
+}
+
+export default function FeatureCard9() {
+   return (
+      <div className="relative flex size-full max-h-[500px] min-h-[500px] max-w-lg transform-gpu flex-col justify-between overflow-hidden rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <div className="flex items-center justify-center overflow-hidden">
+            <AnimatedList>
+               {notifications.map((item, idx) => (
+                  <Notification {...item} key={idx} />
+               ))}
+            </AnimatedList>
+         </div>
+         <div className="flex flex-col items-start gap-y-1 border-t p-4 dark:border-neutral-800">
+            <h2 className="text-xl font-semibold">Notifications</h2>
+            <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+               Get realtime notifications for events you subscribe too
+            </p>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-gradient-text-demo.tsx b/apps/web/registry/default/examples/animated-gradient-text-demo.tsx
new file mode 100644
index 00000000..c7974822
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-gradient-text-demo.tsx
@@ -0,0 +1,21 @@
+import { ChevronRight } from "lucide-react"
+import { ny } from "~/lib/utils"
+import AnimatedGradientText from "~/registry/default/ui/animated-gradient-text"
+
+export default async function AnimatedGradientTextDemo() {
+   return (
+      <div className="z-10 flex min-h-64 items-center justify-center">
+         <AnimatedGradientText>
+            🎉 <hr className="mx-2 h-4 w-px shrink-0 bg-gray-300" />{" "}
+            <span
+               className={ny(
+                  `animate-gradient inline bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
+               )}
+            >
+               Introducing Nyxb UI
+            </span>
+            <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
+         </AnimatedGradientText>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-grid-pattern-demo.tsx b/apps/web/registry/default/examples/animated-grid-pattern-demo.tsx
new file mode 100644
index 00000000..d5231dda
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-grid-pattern-demo.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { ny } from "~/registry/default/lib/utils"
+import { GridPattern } from "~/registry/default/ui/grid-pattern"
+
+export default function GridPatternDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Grid Pattern
+         </p>
+         <GridPattern
+            squares={[
+               [4, 4],
+               [5, 1],
+               [8, 2],
+               [5, 3],
+               [5, 5],
+               [10, 10],
+               [12, 15],
+               [15, 10],
+               [10, 15],
+               [15, 10],
+               [10, 15],
+               [15, 10],
+            ]}
+            className={ny(
+               "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
+               "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-list-demo.tsx b/apps/web/registry/default/examples/animated-list-demo.tsx
new file mode 100644
index 00000000..b6a79633
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-list-demo.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { ny } from "~/lib/utils"
+import { AnimatedList } from "~/registry/default/ui/animated-list"
+
+interface Item {
+   name: string
+   description: string
+   icon: string
+   color: string
+   time: string
+}
+
+let notifications = [
+   {
+      name: "Payment received",
+      description: "Nyxb UI",
+      time: "15m ago",
+
+      icon: "💸",
+      color: "#00C9A7",
+   },
+   {
+      name: "User signed up",
+      description: "Nyxb UI",
+      time: "10m ago",
+      icon: "👤",
+      color: "#FFB800",
+   },
+   {
+      name: "New message",
+      description: "Nyxb UI",
+      time: "5m ago",
+      icon: "💬",
+      color: "#FF3D71",
+   },
+   {
+      name: "New event",
+      description: "Nyxb UI",
+      time: "2m ago",
+      icon: "🗞️",
+      color: "#1E86FF",
+   },
+]
+
+notifications = Array.from({ length: 10 }, () => notifications).flat()
+
+function Notification({ name, description, icon, color, time }: Item) {
+   return (
+      <figure
+         className={ny(
+            "relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4",
+            // animation styles
+            "transition-all duration-200 ease-in-out hover:scale-[103%]",
+            // light styles
+            "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
+            // dark styles
+            "transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+         )}
+      >
+         <div className="flex flex-row items-center gap-3">
+            <div
+               className="flex size-10 items-center justify-center rounded-2xl"
+               style={{
+                  backgroundColor: color,
+               }}
+            >
+               <span className="text-lg">{icon}</span>
+            </div>
+            <div className="flex flex-col overflow-hidden">
+               <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
+                  <span className="text-sm sm:text-lg">{name}</span>
+                  <span className="mx-1">·</span>
+                  <span className="text-xs text-gray-500">{time}</span>
+               </figcaption>
+               <p className="text-sm font-normal dark:text-white/60">
+                  {description}
+               </p>
+            </div>
+         </div>
+      </figure>
+   )
+}
+
+export default function AnimatedListDemo() {
+   return (
+      <div className="bg-background relative flex max-h-[400px] min-h-[400px] w-full max-w-lg flex-col overflow-hidden rounded-lg border p-6 shadow-lg">
+         <AnimatedList>
+            {notifications.map((item, idx) => (
+               <Notification {...item} key={idx} />
+            ))}
+         </AnimatedList>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-shiny-text-demo.tsx b/apps/web/registry/default/examples/animated-shiny-text-demo.tsx
new file mode 100644
index 00000000..844c4114
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-shiny-text-demo.tsx
@@ -0,0 +1,20 @@
+import { ArrowRightIcon } from "@radix-ui/react-icons"
+import { ny } from "~/lib/utils"
+import AnimatedShinyText from "~/registry/default/ui/animated-shiny-text"
+
+export default async function AnimatedShinyTextDemo() {
+   return (
+      <div className="z-10 flex min-h-64 items-center justify-center">
+         <div
+            className={ny(
+               "group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800",
+            )}
+         >
+            <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400">
+               <span>✨ Introducing Nyxb UI</span>
+               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
+            </AnimatedShinyText>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/animated-subscribe-button-demo.tsx b/apps/web/registry/default/examples/animated-subscribe-button-demo.tsx
new file mode 100644
index 00000000..beae99c3
--- /dev/null
+++ b/apps/web/registry/default/examples/animated-subscribe-button-demo.tsx
@@ -0,0 +1,24 @@
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+import { AnimatedSubscribeButton } from "~/registry/default/ui/animated-subscribe-button"
+
+export default function AnimatedSubscribeButtonDemo() {
+   return (
+      <AnimatedSubscribeButton
+         buttonColor="#000000"
+         buttonTextColor="#ffffff"
+         subscribeStatus={false}
+         initialText={
+            <span className="group inline-flex items-center">
+               Subscribe{" "}
+               <ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" />
+            </span>
+         }
+         changeText={
+            <span className="group inline-flex items-center">
+               <CheckIcon className="mr-2 size-4" />
+               Subscribed{" "}
+            </span>
+         }
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/aspect-ratio-demo.tsx b/apps/web/registry/default/examples/aspect-ratio-demo.tsx
new file mode 100644
index 00000000..c1956392
--- /dev/null
+++ b/apps/web/registry/default/examples/aspect-ratio-demo.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image"
+
+import { AspectRatio } from "~/registry/default/ui/aspect-ratio"
+
+export default function AspectRatioDemo() {
+   return (
+      <AspectRatio ratio={16 / 9} className="bg-muted">
+         <Image
+            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+            alt="Photo by Drew Beamer"
+            fill
+            className="rounded-md object-cover"
+         />
+      </AspectRatio>
+   )
+}
diff --git a/apps/web/registry/default/examples/aurora-text-demo.tsx b/apps/web/registry/default/examples/aurora-text-demo.tsx
new file mode 100644
index 00000000..010ca886
--- /dev/null
+++ b/apps/web/registry/default/examples/aurora-text-demo.tsx
@@ -0,0 +1,9 @@
+import { AuroraText } from "~/registry/default/ui/aurora-text"
+
+export default function AuroraTextDemo() {
+   return (
+      <h1 className="text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl">
+         Ship <AuroraText>beautiful</AuroraText>
+      </h1>
+   )
+}
diff --git a/apps/web/registry/default/examples/avatar-circles-demo.tsx b/apps/web/registry/default/examples/avatar-circles-demo.tsx
new file mode 100644
index 00000000..b07c5e2d
--- /dev/null
+++ b/apps/web/registry/default/examples/avatar-circles-demo.tsx
@@ -0,0 +1,12 @@
+import AvatarCircles from "~/registry/default/ui/avatar-circles"
+
+const avatarUrls = [
+   "https://avatars.githubusercontent.com/u/98586665",
+   "https://avatars.githubusercontent.com/u/20110627",
+   "https://avatars.githubusercontent.com/u/106103625",
+   "https://avatars.githubusercontent.com/u/59228569",
+]
+
+export default async function AvatarCirclesDemo() {
+   return <AvatarCircles numPeople={99} avatarUrls={avatarUrls} />
+}
diff --git a/apps/web/registry/default/examples/avatar-demo.tsx b/apps/web/registry/default/examples/avatar-demo.tsx
new file mode 100644
index 00000000..5f9b02d6
--- /dev/null
+++ b/apps/web/registry/default/examples/avatar-demo.tsx
@@ -0,0 +1,14 @@
+import {
+   Avatar,
+   AvatarFallback,
+   AvatarImage,
+} from "~/registry/default/ui/avatar"
+
+export default function AvatarDemo() {
+   return (
+      <Avatar>
+         <AvatarImage src="https://github.com/nyxb.png" alt="@nyxb" />
+         <AvatarFallback>NY</AvatarFallback>
+      </Avatar>
+   )
+}
diff --git a/apps/web/registry/default/examples/badge-demo.tsx b/apps/web/registry/default/examples/badge-demo.tsx
new file mode 100644
index 00000000..5c87b986
--- /dev/null
+++ b/apps/web/registry/default/examples/badge-demo.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/default/ui/badge"
+
+export default function BadgeDemo() {
+   return <Badge>Badge</Badge>
+}
diff --git a/apps/web/registry/default/examples/badge-destructive.tsx b/apps/web/registry/default/examples/badge-destructive.tsx
new file mode 100644
index 00000000..99081fe2
--- /dev/null
+++ b/apps/web/registry/default/examples/badge-destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/default/ui/badge"
+
+export default function BadgeDestructive() {
+   return <Badge variant="destructive">Destructive</Badge>
+}
diff --git a/apps/web/registry/default/examples/badge-outline.tsx b/apps/web/registry/default/examples/badge-outline.tsx
new file mode 100644
index 00000000..fd1cabd9
--- /dev/null
+++ b/apps/web/registry/default/examples/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/default/ui/badge"
+
+export default function BadgeOutline() {
+   return <Badge variant="outline">Outline</Badge>
+}
diff --git a/apps/web/registry/default/examples/badge-secondary.tsx b/apps/web/registry/default/examples/badge-secondary.tsx
new file mode 100644
index 00000000..c975d83d
--- /dev/null
+++ b/apps/web/registry/default/examples/badge-secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/default/ui/badge"
+
+export default function BadgeSecondary() {
+   return <Badge variant="secondary">Secondary</Badge>
+}
diff --git a/apps/web/registry/default/examples/bento-demo-vertical.tsx b/apps/web/registry/default/examples/bento-demo-vertical.tsx
new file mode 100644
index 00000000..162bee23
--- /dev/null
+++ b/apps/web/registry/default/examples/bento-demo-vertical.tsx
@@ -0,0 +1,67 @@
+import {
+   BellIcon,
+   CalendarIcon,
+   FileTextIcon,
+   GlobeIcon,
+   InputIcon,
+} from "@radix-ui/react-icons"
+import { BentoCard, BentoGrid } from "~/registry/default/ui/bento-grid"
+
+const features = [
+   {
+      Icon: FileTextIcon,
+      name: "Save your files",
+      description: "We automatically save your files as you type.",
+      href: "/docs",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3",
+   },
+   {
+      Icon: InputIcon,
+      name: "Full text search",
+      description: "Search through all your files in one place.",
+      href: "/docs",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3",
+   },
+   {
+      Icon: GlobeIcon,
+      name: "Multilingual",
+      description: "Supports 100+ languages and counting.",
+      href: "/docs",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4",
+   },
+   {
+      Icon: CalendarIcon,
+      name: "Calendar",
+      description: "Use the calendar to filter your files by date.",
+      href: "/docs",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2",
+   },
+   {
+      Icon: BellIcon,
+      name: "Notifications",
+      description:
+         "Get notified when someone shares a file or mentions you in a comment.",
+      href: "/docs",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4",
+   },
+]
+
+export default async function BentoDemo() {
+   return (
+      <BentoGrid className="lg:grid-rows-3">
+         {features.map((feature) => (
+            <BentoCard key={feature.name} {...feature} />
+         ))}
+      </BentoGrid>
+   )
+}
diff --git a/apps/web/registry/default/examples/bento-demo.tsx b/apps/web/registry/default/examples/bento-demo.tsx
new file mode 100644
index 00000000..ad027ebf
--- /dev/null
+++ b/apps/web/registry/default/examples/bento-demo.tsx
@@ -0,0 +1,215 @@
+import { CalendarIcon, FileTextIcon, InputIcon } from "@radix-ui/react-icons"
+import { Share2Icon } from "lucide-react"
+import { Calendar } from "~/components/ui/calendar"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/components/ui/command"
+import { ny } from "~/lib/utils"
+import AnimatedBeamMultipleOutputDemo from "~/registry/default/examples/animated-beam-multiple-outputs"
+import { BentoCard, BentoGrid } from "~/registry/default/ui/bento-grid"
+import Marquee from "~/registry/default/ui/marquee"
+
+const files = [
+   {
+      name: "bitcoin.pdf",
+      body: "Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.",
+   },
+   {
+      name: "finances.xlsx",
+      body: "A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.",
+   },
+   {
+      name: "logo.svg",
+      body: "Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.",
+   },
+   {
+      name: "keys.gpg",
+      body: "GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.",
+   },
+   {
+      name: "seed.txt",
+      body: "A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.",
+   },
+]
+
+interface Item {
+   name: string
+   description: string
+   icon: string
+   color: string
+   time: string
+}
+
+let notifications = [
+   {
+      name: "Payment received",
+      description: "Nyxb UI",
+      time: "15m ago",
+
+      icon: "💸",
+      color: "#00C9A7",
+   },
+   {
+      name: "User signed up",
+      description: "Nyxb UI",
+      time: "10m ago",
+      icon: "👤",
+      color: "#FFB800",
+   },
+   {
+      name: "New message",
+      description: "Nyxb UI",
+      time: "5m ago",
+      icon: "💬",
+      color: "#FF3D71",
+   },
+   {
+      name: "New event",
+      description: "Nyxb UI",
+      time: "2m ago",
+      icon: "🗞️",
+      color: "#1E86FF",
+   },
+]
+
+notifications = Array.from({ length: 10 }, () => notifications).flat()
+
+function Notification({ name, description, icon, color, time }: Item) {
+   return (
+      <figure
+         className={ny(
+            "relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4",
+            // animation styles
+            "transition-all duration-200 ease-in-out hover:scale-[103%]",
+            // light styles
+            "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
+            // dark styles
+            "transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+         )}
+      >
+         <div className="flex flex-row items-center gap-3">
+            <div
+               className="flex size-10 items-center justify-center rounded-2xl"
+               style={{
+                  backgroundColor: color,
+               }}
+            >
+               <span className="text-lg">{icon}</span>
+            </div>
+            <div className="flex flex-col overflow-hidden">
+               <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
+                  <span className="text-sm sm:text-lg">{name}</span>
+                  <span className="mx-1">·</span>
+                  <span className="text-xs text-gray-500">{time}</span>
+               </figcaption>
+               <p className="text-sm font-normal dark:text-white/60">
+                  {description}
+               </p>
+            </div>
+         </div>
+      </figure>
+   )
+}
+
+const features = [
+   {
+      Icon: FileTextIcon,
+      name: "Save your files",
+      description: "We automatically save your files as you type.",
+      href: "/docs",
+      cta: "Learn more",
+      className: "col-span-3 lg:col-span-1",
+      background: (
+         <Marquee
+            pauseOnHover
+            className="absolute top-10 [--duration:20s] [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] "
+         >
+            {files.map((f, idx) => (
+               <figure
+                  key={idx}
+                  className={ny(
+                     "relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4",
+                     "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
+                     "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
+                     "transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none",
+                  )}
+               >
+                  <div className="flex flex-row items-center gap-2">
+                     <div className="flex flex-col">
+                        <figcaption className="text-sm font-medium dark:text-white ">
+                           {f.name}
+                        </figcaption>
+                     </div>
+                  </div>
+                  <blockquote className="mt-2 text-xs">{f.body}</blockquote>
+               </figure>
+            ))}
+         </Marquee>
+      ),
+   },
+   {
+      Icon: InputIcon,
+      name: "Full text search",
+      description: "Search through all your files in one place.",
+      href: "/docs",
+      cta: "Learn more",
+      className: "col-span-3 lg:col-span-2",
+      background: (
+         <Command className="absolute right-10 top-10 w-[70%] origin-top translate-x-0 border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:-translate-x-10">
+            <CommandInput placeholder="Type a command or search..." />
+            <CommandList>
+               <CommandEmpty>No results found.</CommandEmpty>
+               <CommandGroup heading="Suggestions">
+                  <CommandItem>screenshot.png</CommandItem>
+                  <CommandItem>bitcoin.pdf</CommandItem>
+                  <CommandItem>finances.xlsx</CommandItem>
+                  <CommandItem>logo.svg</CommandItem>
+                  <CommandItem>keys.gpg</CommandItem>
+                  <CommandItem>seed.txt</CommandItem>
+               </CommandGroup>
+            </CommandList>
+         </Command>
+      ),
+   },
+   {
+      Icon: Share2Icon,
+      name: "Integrations",
+      description: "Supports 100+ integrations and counting.",
+      href: "/docs",
+      cta: "Learn more",
+      className: "col-span-3 lg:col-span-2",
+      background: (
+         <AnimatedBeamMultipleOutputDemo className="absolute right-2 top-4 h-[300px] w-[600px] border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105" />
+      ),
+   },
+   {
+      Icon: CalendarIcon,
+      name: "Calendar",
+      description: "Use the calendar to filter your files by date.",
+      className: "col-span-3 lg:col-span-1",
+      href: "/docs",
+      cta: "Learn more",
+      background: (
+         <Calendar
+            mode="single"
+            selected={new Date(2022, 4, 11, 0, 0, 0)}
+            className="absolute right-0 top-10 origin-top rounded-md border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:scale-105"
+         />
+      ),
+   },
+]
+
+export default function BentoDemo() {
+   return (
+      <BentoGrid>
+         {features.map((feature, idx) => (
+            <BentoCard key={idx} {...feature} />
+         ))}
+      </BentoGrid>
+   )
+}
diff --git a/apps/web/registry/default/examples/blur-fade-demo.tsx b/apps/web/registry/default/examples/blur-fade-demo.tsx
new file mode 100644
index 00000000..f7517f23
--- /dev/null
+++ b/apps/web/registry/default/examples/blur-fade-demo.tsx
@@ -0,0 +1,26 @@
+import BlurFade from "~/registry/default/ui/blur-fade"
+
+const images = Array.from({ length: 9 }, (_, i) => {
+   const isLandscape = i % 2 === 0
+   const width = isLandscape ? 800 : 600
+   const height = isLandscape ? 600 : 800
+   return `https://picsum.photos/seed/${i + 1}/${width}/${height}`
+})
+
+export default function BlurFadeDemo() {
+   return (
+      <section id="photos">
+         <div className="columns-2 gap-4 sm:columns-3">
+            {images.map((imageUrl, idx) => (
+               <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>
+                  <img
+                     className="mb-4 size-full rounded-lg object-contain"
+                     src={imageUrl}
+                     alt={`Random stock image ${idx + 1}`}
+                  />
+               </BlurFade>
+            ))}
+         </div>
+      </section>
+   )
+}
diff --git a/apps/web/registry/default/examples/blur-fade-text-demo.tsx b/apps/web/registry/default/examples/blur-fade-text-demo.tsx
new file mode 100644
index 00000000..444dca1f
--- /dev/null
+++ b/apps/web/registry/default/examples/blur-fade-text-demo.tsx
@@ -0,0 +1,18 @@
+import BlurFade from "~/registry/default/ui/blur-fade"
+
+export default function BlurFadeTextDemo() {
+   return (
+      <section id="header">
+         <BlurFade delay={0.25} inView>
+            <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
+               Hello World 👋
+            </h2>
+         </BlurFade>
+         <BlurFade delay={0.25 * 2} inView>
+            <span className="text-pretty text-xl tracking-tighter sm:text-3xl xl:text-4xl/none">
+               Nice to meet you
+            </span>
+         </BlurFade>
+      </section>
+   )
+}
diff --git a/apps/web/registry/default/examples/blur-in-demo.tsx b/apps/web/registry/default/examples/blur-in-demo.tsx
new file mode 100644
index 00000000..688864c2
--- /dev/null
+++ b/apps/web/registry/default/examples/blur-in-demo.tsx
@@ -0,0 +1,11 @@
+import BlurIn from "~/registry/default/ui/blur-in"
+
+function BlurInDemo() {
+   return (
+      <BlurIn
+         word="Blur In"
+         className="text-4xl font-bold text-black dark:text-white"
+      />
+   )
+}
+export default BlurInDemo
diff --git a/apps/web/registry/default/examples/border-beam-demo.tsx b/apps/web/registry/default/examples/border-beam-demo.tsx
new file mode 100644
index 00000000..99cb7057
--- /dev/null
+++ b/apps/web/registry/default/examples/border-beam-demo.tsx
@@ -0,0 +1,20 @@
+import { BorderBeam } from "~/registry/default/ui/border-beam"
+
+export default function BorderBeamDemo() {
+   return (
+      <div className="relative rounded-xl">
+         <img
+            src="/dashboard-dark.png"
+            alt="Hero Image"
+            className="hidden w-[700px] rounded-[inherit] border object-contain shadow-lg dark:block"
+         />
+         <img
+            src="/dashboard-light.png"
+            alt="Hero Image"
+            className="block w-[700px] rounded-[inherit] border object-contain shadow-lg dark:hidden"
+         />
+
+         <BorderBeam size={250} duration={12} delay={9} />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/box-reveal-demo.tsx b/apps/web/registry/default/examples/box-reveal-demo.tsx
new file mode 100644
index 00000000..1e4982a9
--- /dev/null
+++ b/apps/web/registry/default/examples/box-reveal-demo.tsx
@@ -0,0 +1,52 @@
+import BoxReveal from "~/registry/default/ui/box-reveal"
+
+import { Button } from "~/components/ui/button"
+
+export default async function BoxRevealDemo() {
+   return (
+      <div className="size-full max-w-lg items-center justify-center overflow-hidden pt-8">
+         <BoxReveal boxColor="#5046e6" duration={0.5}>
+            <p className="text-[3.5rem] font-semibold">
+               Nyxb UI
+               <span className="text-[#5046e6]">.</span>
+            </p>
+         </BoxReveal>
+
+         <BoxReveal boxColor="#5046e6" duration={0.5}>
+            <h2 className="mt-[.5rem] text-[1rem]">
+               UI library for{" "}
+               <span className="text-[#5046e6]">Design Engineers</span>
+            </h2>
+         </BoxReveal>
+
+         <BoxReveal boxColor="#5046e6" duration={0.5}>
+            <div className="mt-6">
+               <p>
+                  -&gt; 20+ free and open-source animated components built with
+                  <span className="font-semibold text-[#5046e6]"> React</span>,
+                  <span className="font-semibold text-[#5046e6]">
+                     {" "}
+                     Typescript
+                  </span>
+                  ,
+                  <span className="font-semibold text-[#5046e6]">
+                     {" "}
+                     Tailwind CSS
+                  </span>
+                  , and
+                  <span className="font-semibold text-[#5046e6]">
+                     {" "}
+                     Framer Motion
+                  </span>
+                  . <br />
+                  -&gt; 100% open-source, and customizable. <br />
+               </p>
+            </div>
+         </BoxReveal>
+
+         <BoxReveal boxColor="#5046e6" duration={0.5}>
+            <Button className="mt-[1.6rem] bg-[#5046e6]">Explore</Button>
+         </BoxReveal>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/breadcrumb-demo.tsx b/apps/web/registry/default/examples/breadcrumb-demo.tsx
new file mode 100644
index 00000000..8213bdcf
--- /dev/null
+++ b/apps/web/registry/default/examples/breadcrumb-demo.tsx
@@ -0,0 +1,51 @@
+import {
+   Breadcrumb,
+   BreadcrumbEllipsis,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/default/ui/dropdown-menu"
+
+export default function BreadcrumbDemo() {
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <DropdownMenu>
+                  <DropdownMenuTrigger className="flex items-center gap-1">
+                     <BreadcrumbEllipsis className="size-4" />
+                     <span className="sr-only">Toggle menu</span>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                     <DropdownMenuItem>Documentation</DropdownMenuItem>
+                     <DropdownMenuItem>Themes</DropdownMenuItem>
+                     <DropdownMenuItem>GitHub</DropdownMenuItem>
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/docs/components">
+                  Components
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/default/examples/breadcrumb-dropdown.tsx b/apps/web/registry/default/examples/breadcrumb-dropdown.tsx
new file mode 100644
index 00000000..a7a603a3
--- /dev/null
+++ b/apps/web/registry/default/examples/breadcrumb-dropdown.tsx
@@ -0,0 +1,50 @@
+import { ChevronDown, Slash } from "lucide-react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/default/ui/dropdown-menu"
+
+export default function BreadcrumbWithDropdown() {
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+               <Slash />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+               <DropdownMenu>
+                  <DropdownMenuTrigger className="flex items-center gap-1">
+                     Components
+                     <ChevronDown className="size-4" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                     <DropdownMenuItem>Documentation</DropdownMenuItem>
+                     <DropdownMenuItem>Themes</DropdownMenuItem>
+                     <DropdownMenuItem>GitHub</DropdownMenuItem>
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+               <Slash />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/default/examples/breadcrumb-ellipsis.tsx b/apps/web/registry/default/examples/breadcrumb-ellipsis.tsx
new file mode 100644
index 00000000..e6d84e23
--- /dev/null
+++ b/apps/web/registry/default/examples/breadcrumb-ellipsis.tsx
@@ -0,0 +1,39 @@
+import Link from "next/link"
+
+import {
+   Breadcrumb,
+   BreadcrumbEllipsis,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+
+export default function BreadcrumbCollapsed() {
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink asChild>
+                  <Link href="/">Home</Link>
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbEllipsis />
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbLink asChild>
+                  <Link href="/docs/components">Components</Link>
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/default/examples/breadcrumb-link.tsx b/apps/web/registry/default/examples/breadcrumb-link.tsx
new file mode 100644
index 00000000..1c94bb59
--- /dev/null
+++ b/apps/web/registry/default/examples/breadcrumb-link.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+
+export default function BreadcrumbWithCustomSeparator() {
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink>
+                  <Link href="/">Home</Link>
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbLink>
+                  <Link href="/components">Components</Link>
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/default/examples/breadcrumb-responsive.tsx b/apps/web/registry/default/examples/breadcrumb-responsive.tsx
new file mode 100644
index 00000000..8febe828
--- /dev/null
+++ b/apps/web/registry/default/examples/breadcrumb-responsive.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import Link from "next/link"
+import * as React from "react"
+
+import { useMediaQuery } from "~/hooks/use-media-query"
+import {
+   Breadcrumb,
+   BreadcrumbEllipsis,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Drawer,
+   DrawerClose,
+   DrawerContent,
+   DrawerDescription,
+   DrawerFooter,
+   DrawerHeader,
+   DrawerTitle,
+   DrawerTrigger,
+} from "~/registry/default/ui/drawer"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/default/ui/dropdown-menu"
+
+const items = [
+   { href: "#", label: "Home" },
+   { href: "#", label: "Documentation" },
+   { href: "#", label: "Building Your Application" },
+   { href: "#", label: "Data Fetching" },
+   { label: "Caching and Revalidating" },
+]
+
+const ITEMS_TO_DISPLAY = 3
+
+export default function BreadcrumbResponsive() {
+   const [open, setOpen] = React.useState(false)
+   const isDesktop = useMediaQuery("(min-width: 768px)")
+
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink href={items[0].href}>
+                  {items[0].label}
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            {items.length > ITEMS_TO_DISPLAY ? (
+               <>
+                  <BreadcrumbItem>
+                     {isDesktop ? (
+                        <DropdownMenu open={open} onOpenChange={setOpen}>
+                           <DropdownMenuTrigger
+                              className="flex items-center gap-1"
+                              aria-label="Toggle menu"
+                           >
+                              <BreadcrumbEllipsis className="size-4" />
+                           </DropdownMenuTrigger>
+                           <DropdownMenuContent align="start">
+                              {items.slice(1, -2).map((item, index) => (
+                                 <DropdownMenuItem key={index}>
+                                    <Link href={item.href ? item.href : "#"}>
+                                       {item.label}
+                                    </Link>
+                                 </DropdownMenuItem>
+                              ))}
+                           </DropdownMenuContent>
+                        </DropdownMenu>
+                     ) : (
+                        <Drawer open={open} onOpenChange={setOpen}>
+                           <DrawerTrigger aria-label="Toggle Menu">
+                              <BreadcrumbEllipsis className="size-4" />
+                           </DrawerTrigger>
+                           <DrawerContent>
+                              <DrawerHeader className="text-left">
+                                 <DrawerTitle>Navigate to</DrawerTitle>
+                                 <DrawerDescription>
+                                    Select a page to navigate to.
+                                 </DrawerDescription>
+                              </DrawerHeader>
+                              <div className="grid gap-1 px-4">
+                                 {items.slice(1, -2).map((item, index) => (
+                                    <Link
+                                       key={index}
+                                       href={item.href ? item.href : "#"}
+                                       className="py-1 text-sm"
+                                    >
+                                       {item.label}
+                                    </Link>
+                                 ))}
+                              </div>
+                              <DrawerFooter className="pt-4">
+                                 <DrawerClose asChild>
+                                    <Button variant="outline">Close</Button>
+                                 </DrawerClose>
+                              </DrawerFooter>
+                           </DrawerContent>
+                        </Drawer>
+                     )}
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+               </>
+            ) : null}
+            {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
+               <BreadcrumbItem key={index}>
+                  {item.href ? (
+                     <>
+                        <BreadcrumbLink
+                           asChild
+                           className="max-w-20 truncate md:max-w-none"
+                        >
+                           <Link href={item.href}>{item.label}</Link>
+                        </BreadcrumbLink>
+                        <BreadcrumbSeparator />
+                     </>
+                  ) : (
+                     <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
+                        {item.label}
+                     </BreadcrumbPage>
+                  )}
+               </BreadcrumbItem>
+            ))}
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/default/examples/breadcrumb-separator.tsx b/apps/web/registry/default/examples/breadcrumb-separator.tsx
new file mode 100644
index 00000000..f4441a8d
--- /dev/null
+++ b/apps/web/registry/default/examples/breadcrumb-separator.tsx
@@ -0,0 +1,34 @@
+import { Slash } from "lucide-react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+
+export default function BreadcrumbWithCustomSeparator() {
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+               <Slash />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+               <Slash />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/default/examples/button-as-child.tsx b/apps/web/registry/default/examples/button-as-child.tsx
new file mode 100644
index 00000000..c05f06b9
--- /dev/null
+++ b/apps/web/registry/default/examples/button-as-child.tsx
@@ -0,0 +1,11 @@
+import Link from "next/link"
+
+import { Button } from "~/registry/default/ui/button"
+
+export default function ButtonAsChild() {
+   return (
+      <Button asChild>
+         <Link href="/login">Login</Link>
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/examples/button-demo.tsx b/apps/web/registry/default/examples/button-demo.tsx
new file mode 100644
index 00000000..b516a112
--- /dev/null
+++ b/apps/web/registry/default/examples/button-demo.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/default/ui/button"
+
+export default function ButtonDemo() {
+   return <Button>Button</Button>
+}
diff --git a/apps/web/registry/default/examples/button-destructive.tsx b/apps/web/registry/default/examples/button-destructive.tsx
new file mode 100644
index 00000000..876f426b
--- /dev/null
+++ b/apps/web/registry/default/examples/button-destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/default/ui/button"
+
+export default function ButtonDestructive() {
+   return <Button variant="destructive">Destructive</Button>
+}
diff --git a/apps/web/registry/default/examples/button-ghost.tsx b/apps/web/registry/default/examples/button-ghost.tsx
new file mode 100644
index 00000000..f8ef5a40
--- /dev/null
+++ b/apps/web/registry/default/examples/button-ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/default/ui/button"
+
+export default function ButtonGhost() {
+   return <Button variant="ghost">Ghost</Button>
+}
diff --git a/apps/web/registry/default/examples/button-icon.tsx b/apps/web/registry/default/examples/button-icon.tsx
new file mode 100644
index 00000000..092c949a
--- /dev/null
+++ b/apps/web/registry/default/examples/button-icon.tsx
@@ -0,0 +1,11 @@
+import { ChevronRight } from "lucide-react"
+
+import { Button } from "~/registry/default/ui/button"
+
+export default function ButtonIcon() {
+   return (
+      <Button variant="outline" size="icon">
+         <ChevronRight className="size-4" />
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/examples/button-link.tsx b/apps/web/registry/default/examples/button-link.tsx
new file mode 100644
index 00000000..f0d4b47e
--- /dev/null
+++ b/apps/web/registry/default/examples/button-link.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/default/ui/button"
+
+export default function ButtonLink() {
+   return <Button variant="link">Link</Button>
+}
diff --git a/apps/web/registry/default/examples/button-loading.tsx b/apps/web/registry/default/examples/button-loading.tsx
new file mode 100644
index 00000000..8a21f0c2
--- /dev/null
+++ b/apps/web/registry/default/examples/button-loading.tsx
@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react"
+
+import { Button } from "~/registry/default/ui/button"
+
+export default function ButtonLoading() {
+   return (
+      <Button disabled>
+         <Loader2 className="mr-2 size-4 animate-spin" />
+         Please wait
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/examples/button-outline.tsx b/apps/web/registry/default/examples/button-outline.tsx
new file mode 100644
index 00000000..b732fa7e
--- /dev/null
+++ b/apps/web/registry/default/examples/button-outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/default/ui/button"
+
+export default function ButtonOutline() {
+   return <Button variant="outline">Outline</Button>
+}
diff --git a/apps/web/registry/default/examples/button-secondary.tsx b/apps/web/registry/default/examples/button-secondary.tsx
new file mode 100644
index 00000000..9cca4256
--- /dev/null
+++ b/apps/web/registry/default/examples/button-secondary.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/default/ui/button"
+
+export default function ButtonSecondary() {
+   return <Button variant="secondary">Secondary</Button>
+}
diff --git a/apps/web/registry/default/examples/button-with-icon.tsx b/apps/web/registry/default/examples/button-with-icon.tsx
new file mode 100644
index 00000000..75d77d5d
--- /dev/null
+++ b/apps/web/registry/default/examples/button-with-icon.tsx
@@ -0,0 +1,11 @@
+import { Mail } from "lucide-react"
+
+import { Button } from "~/registry/default/ui/button"
+
+export default function ButtonWithIcon() {
+   return (
+      <Button>
+         <Mail className="mr-2 size-4" /> Login with Email
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/examples/calendar-demo.tsx b/apps/web/registry/default/examples/calendar-demo.tsx
new file mode 100644
index 00000000..5b333104
--- /dev/null
+++ b/apps/web/registry/default/examples/calendar-demo.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "~/registry/default/ui/calendar"
+
+export default function CalendarDemo() {
+   const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+   return (
+      <Calendar
+         mode="single"
+         selected={date}
+         onSelect={setDate}
+         className="rounded-md border"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/calendar-form.tsx b/apps/web/registry/default/examples/calendar-form.tsx
new file mode 100644
index 00000000..29d2ac39
--- /dev/null
+++ b/apps/web/registry/default/examples/calendar-form.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import { Calendar } from "~/registry/default/ui/calendar"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+   dob: z.date({
+      required_error: "A date of birth is required.",
+   }),
+})
+
+export default function CalendarForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+               control={form.control}
+               name="dob"
+               render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                     <FormLabel>Date of birth</FormLabel>
+                     <Popover>
+                        <PopoverTrigger asChild>
+                           <FormControl>
+                              <Button
+                                 variant="outline"
+                                 className={ny(
+                                    "w-[240px] pl-3 text-left font-normal",
+                                    !field.value && "text-muted-foreground",
+                                 )}
+                              >
+                                 {field.value ? (
+                                    format(field.value, "PPP")
+                                 ) : (
+                                    <span>Pick a date</span>
+                                 )}
+                                 <CalendarIcon className="ml-auto size-4 opacity-50" />
+                              </Button>
+                           </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                           <Calendar
+                              mode="single"
+                              selected={field.value}
+                              onSelect={field.onChange}
+                              disabled={(date) =>
+                                 date > new Date() ||
+                                 date < new Date("1900-01-01")
+                              }
+                              initialFocus
+                           />
+                        </PopoverContent>
+                     </Popover>
+                     <FormDescription>
+                        Your date of birth is used to calculate your age.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/calendar-react-hook-form.tsx b/apps/web/registry/default/examples/calendar-react-hook-form.tsx
new file mode 100644
index 00000000..29d2ac39
--- /dev/null
+++ b/apps/web/registry/default/examples/calendar-react-hook-form.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import { Calendar } from "~/registry/default/ui/calendar"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+   dob: z.date({
+      required_error: "A date of birth is required.",
+   }),
+})
+
+export default function CalendarForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+               control={form.control}
+               name="dob"
+               render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                     <FormLabel>Date of birth</FormLabel>
+                     <Popover>
+                        <PopoverTrigger asChild>
+                           <FormControl>
+                              <Button
+                                 variant="outline"
+                                 className={ny(
+                                    "w-[240px] pl-3 text-left font-normal",
+                                    !field.value && "text-muted-foreground",
+                                 )}
+                              >
+                                 {field.value ? (
+                                    format(field.value, "PPP")
+                                 ) : (
+                                    <span>Pick a date</span>
+                                 )}
+                                 <CalendarIcon className="ml-auto size-4 opacity-50" />
+                              </Button>
+                           </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                           <Calendar
+                              mode="single"
+                              selected={field.value}
+                              onSelect={field.onChange}
+                              disabled={(date) =>
+                                 date > new Date() ||
+                                 date < new Date("1900-01-01")
+                              }
+                              initialFocus
+                           />
+                        </PopoverContent>
+                     </Popover>
+                     <FormDescription>
+                        Your date of birth is used to calculate your age.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/card-demo.tsx b/apps/web/registry/default/examples/card-demo.tsx
new file mode 100644
index 00000000..136edd64
--- /dev/null
+++ b/apps/web/registry/default/examples/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellRing, Check } from "lucide-react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { Switch } from "~/registry/default/ui/switch"
+
+const notifications = [
+   {
+      title: "Your call has been confirmed.",
+      description: "1 hour ago",
+   },
+   {
+      title: "You have a new message!",
+      description: "1 hour ago",
+   },
+   {
+      title: "Your subscription is expiring soon!",
+      description: "2 hours ago",
+   },
+]
+
+type CardProps = React.ComponentProps<typeof Card>
+
+export default function CardDemo({ className, ...props }: CardProps) {
+   return (
+      <Card className={ny("w-[380px]", className)} {...props}>
+         <CardHeader>
+            <CardTitle>Notifications</CardTitle>
+            <CardDescription>You have 3 unread messages.</CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-4">
+            <div className=" flex items-center space-x-4 rounded-md border p-4">
+               <BellRing />
+               <div className="flex-1 space-y-1">
+                  <p className="text-sm font-medium leading-none">
+                     Push Notifications
+                  </p>
+                  <p className="text-muted-foreground text-sm">
+                     Send notifications to device.
+                  </p>
+               </div>
+               <Switch />
+            </div>
+            <div>
+               {notifications.map((notification, index) => (
+                  <div
+                     key={index}
+                     className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+                  >
+                     <span className="flex size-2 translate-y-1 rounded-full bg-sky-500" />
+                     <div className="space-y-1">
+                        <p className="text-sm font-medium leading-none">
+                           {notification.title}
+                        </p>
+                        <p className="text-muted-foreground text-sm">
+                           {notification.description}
+                        </p>
+                     </div>
+                  </div>
+               ))}
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">
+               <Check className="mr-2 size-4" /> Mark all as read
+            </Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/examples/card-with-form.tsx b/apps/web/registry/default/examples/card-with-form.tsx
new file mode 100644
index 00000000..c25941b7
--- /dev/null
+++ b/apps/web/registry/default/examples/card-with-form.tsx
@@ -0,0 +1,61 @@
+import * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/default/ui/select"
+
+export default function CardWithForm() {
+   return (
+      <Card className="w-[350px]">
+         <CardHeader>
+            <CardTitle>Create project</CardTitle>
+            <CardDescription>
+               Deploy your new project in one-click.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <form>
+               <div className="grid w-full items-center gap-4">
+                  <div className="flex flex-col space-y-1.5">
+                     <Label htmlFor="name">Name</Label>
+                     <Input id="name" placeholder="Name of your project" />
+                  </div>
+                  <div className="flex flex-col space-y-1.5">
+                     <Label htmlFor="framework">Framework</Label>
+                     <Select>
+                        <SelectTrigger id="framework">
+                           <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent position="popper">
+                           <SelectItem value="next">Next.js</SelectItem>
+                           <SelectItem value="sveltekit">SvelteKit</SelectItem>
+                           <SelectItem value="astro">Astro</SelectItem>
+                           <SelectItem value="nuxt">Nuxt.js</SelectItem>
+                        </SelectContent>
+                     </Select>
+                  </div>
+               </div>
+            </form>
+         </CardContent>
+         <CardFooter className="flex justify-between">
+            <Button variant="outline">Cancel</Button>
+            <Button>Deploy</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/activity-goal.tsx b/apps/web/registry/default/examples/cards/activity-goal.tsx
new file mode 100644
index 00000000..74f3e85a
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/activity-goal.tsx
@@ -0,0 +1,138 @@
+"use client"
+
+import { Minus, Plus } from "lucide-react"
+import { useTheme } from "next-themes"
+import * as React from "react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { useConfig } from "~/hooks/use-config"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { baseColors } from "~/registry/registry-base-colors"
+
+const data = [
+   {
+      goal: 400,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 239,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 349,
+   },
+]
+
+export function CardsActivityGoal() {
+   const { theme: mode } = useTheme()
+   const [config] = useConfig()
+
+   const baseColor = baseColors.find(
+      (baseColor) => baseColor.name === config.theme,
+   )
+   const [goal, setGoal] = React.useState(350)
+
+   function onClick(adjustment: number) {
+      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+   }
+
+   return (
+      <Card>
+         <CardHeader className="pb-4">
+            <CardTitle className="text-base">Move Goal</CardTitle>
+            <CardDescription>Set your daily activity goal.</CardDescription>
+         </CardHeader>
+         <CardContent className="pb-2">
+            <div className="flex items-center justify-center space-x-2">
+               <Button
+                  variant="outline"
+                  size="icon"
+                  className="size-8 shrink-0 rounded-full"
+                  onClick={() => onClick(-10)}
+                  disabled={goal <= 200}
+               >
+                  <Minus className="size-4" />
+                  <span className="sr-only">Decrease</span>
+               </Button>
+               <div className="flex-1 text-center">
+                  <div className="text-5xl font-bold tracking-tighter">
+                     {goal}
+                  </div>
+                  <div className="text-muted-foreground text-[0.70rem] uppercase">
+                     Calories/day
+                  </div>
+               </div>
+               <Button
+                  variant="outline"
+                  size="icon"
+                  className="size-8 shrink-0 rounded-full"
+                  onClick={() => onClick(10)}
+                  disabled={goal >= 400}
+               >
+                  <Plus className="size-4" />
+                  <span className="sr-only">Increase</span>
+               </Button>
+            </div>
+            <div className="my-3 h-[60px]">
+               <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={data}>
+                     <Bar
+                        dataKey="goal"
+                        style={
+                           {
+                              fill: "var(--theme-primary)",
+                              opacity: 0.2,
+                              "--theme-primary": `hsl(${
+                                 baseColor?.cssVars[
+                                    mode === "dark" ? "dark" : "light"
+                                 ].primary
+                              })`,
+                           } as React.CSSProperties
+                        }
+                     />
+                  </BarChart>
+               </ResponsiveContainer>
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">Set Goal</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/calendar.tsx b/apps/web/registry/default/examples/cards/calendar.tsx
new file mode 100644
index 00000000..0ea9c2ba
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/calendar.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { addDays } from "date-fns"
+
+import { Calendar } from "~/registry/default/ui/calendar"
+import { Card, CardContent } from "~/registry/default/ui/card"
+
+const start = new Date(2023, 5, 5)
+
+export function CardsCalendar() {
+   return (
+      <Card className="max-w-[280px]">
+         <CardContent className="p-0">
+            <Calendar
+               numberOfMonths={1}
+               mode="range"
+               defaultMonth={start}
+               selected={{
+                  from: start,
+                  to: addDays(start, 8),
+               }}
+            />
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/chat.tsx b/apps/web/registry/default/examples/cards/chat.tsx
new file mode 100644
index 00000000..4380f6ec
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/chat.tsx
@@ -0,0 +1,271 @@
+import { Check, Plus, Send } from "lucide-react"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import {
+   Avatar,
+   AvatarFallback,
+   AvatarImage,
+} from "~/registry/default/ui/avatar"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardFooter,
+   CardHeader,
+} from "~/registry/default/ui/card"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/default/ui/command"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogFooter,
+   DialogHeader,
+   DialogTitle,
+} from "~/registry/default/ui/dialog"
+import { Input } from "~/registry/default/ui/input"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/default/ui/tooltip"
+
+const users = [
+   {
+      name: "Olivia Martin",
+      email: "m@example.com",
+      avatar: "/avatars/01.png",
+   },
+   {
+      name: "Isabella Nguyen",
+      email: "isabella.nguyen@email.com",
+      avatar: "/avatars/03.png",
+   },
+   {
+      name: "Emma Wilson",
+      email: "emma@example.com",
+      avatar: "/avatars/05.png",
+   },
+   {
+      name: "Jackson Lee",
+      email: "lee@example.com",
+      avatar: "/avatars/02.png",
+   },
+   {
+      name: "William Kim",
+      email: "will@email.com",
+      avatar: "/avatars/04.png",
+   },
+] as const
+
+type User = (typeof users)[number]
+
+export function CardsChat() {
+   const [open, setOpen] = React.useState(false)
+   const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
+
+   const [messages, setMessages] = React.useState([
+      {
+         role: "agent",
+         content: "Hi, how can I help you today?",
+      },
+      {
+         role: "user",
+         content: "Hey, I'm having trouble with my account.",
+      },
+      {
+         role: "agent",
+         content: "What seems to be the problem?",
+      },
+      {
+         role: "user",
+         content: "I can't log in.",
+      },
+   ])
+   const [input, setInput] = React.useState("")
+   const inputLength = input.trim().length
+
+   return (
+      <>
+         <Card>
+            <CardHeader className="flex flex-row items-center">
+               <div className="flex items-center space-x-4">
+                  <Avatar>
+                     <AvatarImage src="/avatars/01.png" alt="Image" />
+                     <AvatarFallback>OM</AvatarFallback>
+                  </Avatar>
+                  <div>
+                     <p className="text-sm font-medium leading-none">
+                        Sofia Davis
+                     </p>
+                     <p className="text-muted-foreground text-sm">
+                        m@example.com
+                     </p>
+                  </div>
+               </div>
+               <TooltipProvider delayDuration={0}>
+                  <Tooltip>
+                     <TooltipTrigger asChild>
+                        <Button
+                           size="icon"
+                           variant="outline"
+                           className="ml-auto rounded-full"
+                           onClick={() => setOpen(true)}
+                        >
+                           <Plus className="size-4" />
+                           <span className="sr-only">New message</span>
+                        </Button>
+                     </TooltipTrigger>
+                     <TooltipContent sideOffset={10}>
+                        New message
+                     </TooltipContent>
+                  </Tooltip>
+               </TooltipProvider>
+            </CardHeader>
+            <CardContent>
+               <div className="space-y-4">
+                  {messages.map((message, index) => (
+                     <div
+                        key={index}
+                        className={ny(
+                           "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
+                           message.role === "user"
+                              ? "bg-primary text-primary-foreground ml-auto"
+                              : "bg-muted",
+                        )}
+                     >
+                        {message.content}
+                     </div>
+                  ))}
+               </div>
+            </CardContent>
+            <CardFooter>
+               <form
+                  onSubmit={(event) => {
+                     event.preventDefault()
+                     if (inputLength === 0) return
+                     setMessages([
+                        ...messages,
+                        {
+                           role: "user",
+                           content: input,
+                        },
+                     ])
+                     setInput("")
+                  }}
+                  className="flex w-full items-center space-x-2"
+               >
+                  <Input
+                     id="message"
+                     placeholder="Type your message..."
+                     className="flex-1"
+                     autoComplete="off"
+                     value={input}
+                     onChange={(event) => setInput(event.target.value)}
+                  />
+                  <Button
+                     type="submit"
+                     size="icon"
+                     disabled={inputLength === 0}
+                  >
+                     <Send className="size-4" />
+                     <span className="sr-only">Send</span>
+                  </Button>
+               </form>
+            </CardFooter>
+         </Card>
+         <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent className="gap-0 p-0 outline-none">
+               <DialogHeader className="px-4 pb-4 pt-5">
+                  <DialogTitle>New message</DialogTitle>
+                  <DialogDescription>
+                     Invite a user to this thread. This will create a new group
+                     message.
+                  </DialogDescription>
+               </DialogHeader>
+               <Command className="overflow-hidden rounded-t-none border-t">
+                  <CommandInput placeholder="Search user..." />
+                  <CommandList>
+                     <CommandEmpty>No users found.</CommandEmpty>
+                     <CommandGroup className="p-2">
+                        {users.map((user) => (
+                           <CommandItem
+                              key={user.email}
+                              className="flex items-center px-2"
+                              onSelect={() => {
+                                 if (selectedUsers.includes(user)) {
+                                    return setSelectedUsers(
+                                       selectedUsers.filter(
+                                          (selectedUser) =>
+                                             selectedUser !== user,
+                                       ),
+                                    )
+                                 }
+
+                                 return setSelectedUsers(
+                                    [...users].filter((u) =>
+                                       [...selectedUsers, user].includes(u),
+                                    ),
+                                 )
+                              }}
+                           >
+                              <Avatar>
+                                 <AvatarImage src={user.avatar} alt="Image" />
+                                 <AvatarFallback>{user.name[0]}</AvatarFallback>
+                              </Avatar>
+                              <div className="ml-2">
+                                 <p className="text-sm font-medium leading-none">
+                                    {user.name}
+                                 </p>
+                                 <p className="text-muted-foreground text-sm">
+                                    {user.email}
+                                 </p>
+                              </div>
+                              {selectedUsers.includes(user) ? (
+                                 <Check className="text-primary ml-auto flex size-5" />
+                              ) : null}
+                           </CommandItem>
+                        ))}
+                     </CommandGroup>
+                  </CommandList>
+               </Command>
+               <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
+                  {selectedUsers.length > 0 ? (
+                     <div className="flex -space-x-2 overflow-hidden">
+                        {selectedUsers.map((user) => (
+                           <Avatar
+                              key={user.email}
+                              className="border-background inline-block border-2"
+                           >
+                              <AvatarImage src={user.avatar} />
+                              <AvatarFallback>{user.name[0]}</AvatarFallback>
+                           </Avatar>
+                        ))}
+                     </div>
+                  ) : (
+                     <p className="text-muted-foreground text-sm">
+                        Select users to add to this thread.
+                     </p>
+                  )}
+                  <Button
+                     disabled={selectedUsers.length < 2}
+                     onClick={() => {
+                        setOpen(false)
+                     }}
+                  >
+                     Continue
+                  </Button>
+               </DialogFooter>
+            </DialogContent>
+         </Dialog>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/cookie-settings.tsx b/apps/web/registry/default/examples/cards/cookie-settings.tsx
new file mode 100644
index 00000000..d601c977
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/cookie-settings.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { Label } from "~/registry/default/ui/label"
+import { Switch } from "~/registry/default/ui/switch"
+
+export function CardsCookieSettings() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Cookie Settings</CardTitle>
+            <CardDescription>Manage your cookie settings here.</CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-6">
+            <div className="flex items-center justify-between space-x-4">
+               <Label htmlFor="necessary" className="flex flex-col space-y-1">
+                  <span>Strictly Necessary</span>
+                  <span className="text-muted-foreground text-xs font-normal leading-snug">
+                     These cookies are essential in order to use the website and
+                     use its features.
+                  </span>
+               </Label>
+               <Switch id="necessary" defaultChecked aria-label="Necessary" />
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+               <Label htmlFor="functional" className="flex flex-col space-y-1">
+                  <span>Functional Cookies</span>
+                  <span className="text-muted-foreground text-xs font-normal leading-snug">
+                     These cookies allow the website to provide personalized
+                     functionality.
+                  </span>
+               </Label>
+               <Switch id="functional" aria-label="Functional" />
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+               <Label htmlFor="performance" className="flex flex-col space-y-1">
+                  <span>Performance Cookies</span>
+                  <span className="text-muted-foreground text-xs font-normal leading-snug">
+                     These cookies help to improve the performance of the
+                     website.
+                  </span>
+               </Label>
+               <Switch id="performance" aria-label="Performance" />
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button variant="outline" className="w-full">
+               Save preferences
+            </Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/create-account.tsx b/apps/web/registry/default/examples/cards/create-account.tsx
new file mode 100644
index 00000000..a4dd0a7d
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/create-account.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import { Icons } from "~/components/icons"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+
+export function CardsCreateAccount() {
+   return (
+      <Card>
+         <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl">Create an account</CardTitle>
+            <CardDescription>
+               Enter your email below to create your account
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-4">
+            <div className="grid grid-cols-2 gap-6">
+               <Button variant="outline">
+                  <Icons.gitHub className="mr-2 size-4" />
+                  Github
+               </Button>
+               <Button variant="outline">
+                  <Icons.google className="mr-2 size-4" />
+                  Google
+               </Button>
+            </div>
+            <div className="relative">
+               <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t" />
+               </div>
+               <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-background text-muted-foreground px-2">
+                     Or continue with
+                  </span>
+               </div>
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor="email">Email</Label>
+               <Input id="email" type="email" placeholder="m@example.com" />
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor="password">Password</Label>
+               <Input id="password" type="password" />
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">Create account</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/data-table.tsx b/apps/web/registry/default/examples/cards/data-table.tsx
new file mode 100644
index 00000000..4319de2b
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/data-table.tsx
@@ -0,0 +1,348 @@
+"use client"
+
+import {
+   CaretSortIcon,
+   ChevronDownIcon,
+   DotsHorizontalIcon,
+} from "@radix-ui/react-icons"
+import type {
+   ColumnDef,
+   ColumnFiltersState,
+   SortingState,
+   VisibilityState,
+} from "@tanstack/react-table"
+import {
+   flexRender,
+   getCoreRowModel,
+   getFilteredRowModel,
+   getPaginationRowModel,
+   getSortedRowModel,
+   useReactTable,
+} from "@tanstack/react-table"
+import * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { Checkbox } from "~/registry/default/ui/checkbox"
+import {
+   DropdownMenu,
+   DropdownMenuCheckboxItem,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/default/ui/dropdown-menu"
+import { Input } from "~/registry/default/ui/input"
+import {
+   Table,
+   TableBody,
+   TableCell,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/default/ui/table"
+
+const data: Payment[] = [
+   {
+      id: "m5gr84i9",
+      amount: 316,
+      status: "success",
+      email: "ken99@yahoo.com",
+   },
+   {
+      id: "3u1reuv4",
+      amount: 242,
+      status: "success",
+      email: "Abe45@gmail.com",
+   },
+   {
+      id: "derv1ws0",
+      amount: 837,
+      status: "processing",
+      email: "Monserrat44@gmail.com",
+   },
+   {
+      id: "5kma53ae",
+      amount: 874,
+      status: "success",
+      email: "Silas22@gmail.com",
+   },
+   {
+      id: "bhqecj4p",
+      amount: 721,
+      status: "failed",
+      email: "carmella@hotmail.com",
+   },
+]
+
+export interface Payment {
+   id: string
+   amount: number
+   status: "pending" | "processing" | "success" | "failed"
+   email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+   {
+      id: "select",
+      header: ({ table }) => (
+         <Checkbox
+            checked={
+               table.getIsAllPageRowsSelected() ||
+               (table.getIsSomePageRowsSelected() && "indeterminate")
+            }
+            onCheckedChange={(value) =>
+               table.toggleAllPageRowsSelected(!!value)
+            }
+            aria-label="Select all"
+         />
+      ),
+      cell: ({ row }) => (
+         <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+         />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+   },
+   {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ row }) => (
+         <div className="capitalize">{row.getValue("status")}</div>
+      ),
+   },
+   {
+      accessorKey: "email",
+      header: ({ column }) => {
+         return (
+            <Button
+               variant="ghost"
+               onClick={() =>
+                  column.toggleSorting(column.getIsSorted() === "asc")
+               }
+            >
+               Email
+               <CaretSortIcon className="ml-2 size-4" />
+            </Button>
+         )
+      },
+      cell: ({ row }) => (
+         <div className="lowercase">{row.getValue("email")}</div>
+      ),
+   },
+   {
+      accessorKey: "amount",
+      header: () => <div className="text-right">Amount</div>,
+      cell: ({ row }) => {
+         const amount = Number.parseFloat(row.getValue("amount"))
+
+         // Format the amount as a dollar amount
+         const formatted = new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+         }).format(amount)
+
+         return <div className="text-right font-medium">{formatted}</div>
+      },
+   },
+   {
+      id: "actions",
+      enableHiding: false,
+      cell: ({ row }) => {
+         const payment = row.original
+
+         return (
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="size-8 p-0">
+                     <span className="sr-only">Open menu</span>
+                     <DotsHorizontalIcon className="size-4" />
+                  </Button>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                  <DropdownMenuItem
+                     onClick={() => navigator.clipboard.writeText(payment.id)}
+                  >
+                     Copy payment ID
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>View customer</DropdownMenuItem>
+                  <DropdownMenuItem>View payment details</DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         )
+      },
+   },
+]
+
+export function CardsDataTable() {
+   const [sorting, setSorting] = React.useState<SortingState>([])
+   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+      [],
+   )
+   const [columnVisibility, setColumnVisibility] =
+      React.useState<VisibilityState>({})
+   const [rowSelection, setRowSelection] = React.useState({})
+
+   const table = useReactTable({
+      data,
+      columns,
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setColumnFilters,
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      onColumnVisibilityChange: setColumnVisibility,
+      onRowSelectionChange: setRowSelection,
+      state: {
+         sorting,
+         columnFilters,
+         columnVisibility,
+         rowSelection,
+      },
+   })
+
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Payments</CardTitle>
+            <CardDescription>Manage your payments.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <div className="mb-4 flex items-center gap-4">
+               <Input
+                  placeholder="Filter emails..."
+                  value={
+                     (table.getColumn("email")?.getFilterValue() as string) ??
+                     ""
+                  }
+                  onChange={(event) =>
+                     table
+                        .getColumn("email")
+                        ?.setFilterValue(event.target.value)
+                  }
+                  className="max-w-sm"
+               />
+               <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                     <Button variant="outline" className="ml-auto">
+                        Columns <ChevronDownIcon className="ml-2 size-4" />
+                     </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                     {table
+                        .getAllColumns()
+                        .filter((column) => column.getCanHide())
+                        .map((column) => {
+                           return (
+                              <DropdownMenuCheckboxItem
+                                 key={column.id}
+                                 className="capitalize"
+                                 checked={column.getIsVisible()}
+                                 onCheckedChange={(value) =>
+                                    column.toggleVisibility(!!value)
+                                 }
+                              >
+                                 {column.id}
+                              </DropdownMenuCheckboxItem>
+                           )
+                        })}
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </div>
+            <div className="rounded-md border">
+               <Table>
+                  <TableHeader>
+                     {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                           {headerGroup.headers.map((header) => {
+                              return (
+                                 <TableHead
+                                    key={header.id}
+                                    className="[&:has([role=checkbox])]:pl-3"
+                                 >
+                                    {header.isPlaceholder
+                                       ? null
+                                       : flexRender(
+                                            header.column.columnDef.header,
+                                            header.getContext(),
+                                         )}
+                                 </TableHead>
+                              )
+                           })}
+                        </TableRow>
+                     ))}
+                  </TableHeader>
+                  <TableBody>
+                     {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                           <TableRow
+                              key={row.id}
+                              data-state={row.getIsSelected() && "selected"}
+                           >
+                              {row.getVisibleCells().map((cell) => (
+                                 <TableCell
+                                    key={cell.id}
+                                    className="[&:has([role=checkbox])]:pl-3"
+                                 >
+                                    {flexRender(
+                                       cell.column.columnDef.cell,
+                                       cell.getContext(),
+                                    )}
+                                 </TableCell>
+                              ))}
+                           </TableRow>
+                        ))
+                     ) : (
+                        <TableRow>
+                           <TableCell
+                              colSpan={columns.length}
+                              className="h-24 text-center"
+                           >
+                              No results.
+                           </TableCell>
+                        </TableRow>
+                     )}
+                  </TableBody>
+               </Table>
+            </div>
+            <div className="flex items-center justify-end space-x-2 pt-4">
+               <div className="text-muted-foreground flex-1 text-sm">
+                  {table.getFilteredSelectedRowModel().rows.length} of{" "}
+                  {table.getFilteredRowModel().rows.length} row(s) selected.
+               </div>
+               <div className="space-x-2">
+                  <Button
+                     variant="outline"
+                     size="sm"
+                     onClick={() => table.previousPage()}
+                     disabled={!table.getCanPreviousPage()}
+                  >
+                     Previous
+                  </Button>
+                  <Button
+                     variant="outline"
+                     size="sm"
+                     onClick={() => table.nextPage()}
+                     disabled={!table.getCanNextPage()}
+                  >
+                     Next
+                  </Button>
+               </div>
+            </div>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/index.tsx b/apps/web/registry/default/examples/cards/index.tsx
new file mode 100644
index 00000000..fa874de3
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/index.tsx
@@ -0,0 +1,63 @@
+import { CardsActivityGoal } from "~/registry/default/examples/cards/activity-goal"
+import { CardsCalendar } from "~/registry/default/examples/cards/calendar"
+import { CardsChat } from "~/registry/default/examples/cards/chat"
+import { CardsCookieSettings } from "~/registry/default/examples/cards/cookie-settings"
+import { CardsCreateAccount } from "~/registry/default/examples/cards/create-account"
+import { CardsDataTable } from "~/registry/default/examples/cards/data-table"
+import { CardsMetric } from "~/registry/default/examples/cards/metric"
+import { CardsPaymentMethod } from "~/registry/default/examples/cards/payment-method"
+import { CardsReportIssue } from "~/registry/default/examples/cards/report-issue"
+import { CardsShare } from "~/registry/default/examples/cards/share"
+import { CardsStats } from "~/registry/default/examples/cards/stats"
+import { CardsTeamMembers } from "~/registry/default/examples/cards/team-members"
+
+export default function CardsDemo() {
+   return (
+      <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
+         <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
+            <CardsStats />
+            <div className="grid gap-1 sm:grid-cols-[280px_1fr] md:hidden">
+               <CardsCalendar />
+               <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
+                  <CardsActivityGoal />
+               </div>
+               <div className="pt-3 sm:col-span-2 xl:pt-4">
+                  <CardsMetric />
+               </div>
+            </div>
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+               <div className="space-y-4 xl:space-y-4">
+                  <CardsTeamMembers />
+                  <CardsCookieSettings />
+                  <CardsPaymentMethod />
+               </div>
+               <div className="space-y-4 xl:space-y-4">
+                  <CardsChat />
+                  <CardsCreateAccount />
+                  <div className="hidden xl:block">
+                     <CardsReportIssue />
+                  </div>
+               </div>
+            </div>
+         </div>
+         <div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
+            <div className="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
+               <CardsCalendar />
+               <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
+                  <CardsActivityGoal />
+               </div>
+               <div className="pt-3 sm:col-span-2 xl:pt-3">
+                  <CardsMetric />
+               </div>
+            </div>
+            <div className="hidden md:block">
+               <CardsDataTable />
+            </div>
+            <CardsShare />
+            <div className="xl:hidden">
+               <CardsReportIssue />
+            </div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/metric.tsx b/apps/web/registry/default/examples/cards/metric.tsx
new file mode 100644
index 00000000..0de65ed1
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/metric.tsx
@@ -0,0 +1,151 @@
+import { useTheme } from "next-themes"
+import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts"
+
+import { useConfig } from "~/hooks/use-config"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { baseColors } from "~/registry/registry-base-colors"
+
+const data = [
+   {
+      average: 400,
+      today: 240,
+   },
+   {
+      average: 300,
+      today: 139,
+   },
+   {
+      average: 200,
+      today: 980,
+   },
+   {
+      average: 278,
+      today: 390,
+   },
+   {
+      average: 189,
+      today: 480,
+   },
+   {
+      average: 239,
+      today: 380,
+   },
+   {
+      average: 349,
+      today: 430,
+   },
+]
+
+export function CardsMetric() {
+   const { theme: mode } = useTheme()
+   const [config] = useConfig()
+
+   const baseColor = baseColors.find(
+      (baseColor) => baseColor.name === config.theme,
+   )
+
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Exercise Minutes</CardTitle>
+            <CardDescription>
+               Your exercise minutes are ahead of where you normally are.
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-4">
+            <div className="h-[200px]">
+               <ResponsiveContainer width="100%" height="100%">
+                  <LineChart
+                     data={data}
+                     margin={{
+                        top: 5,
+                        right: 10,
+                        left: 10,
+                        bottom: 0,
+                     }}
+                  >
+                     <Tooltip
+                        content={({ active, payload }) => {
+                           if (active && payload && payload.length) {
+                              return (
+                                 <div className="bg-background rounded-lg border p-2 shadow-sm">
+                                    <div className="grid grid-cols-2 gap-2">
+                                       <div className="flex flex-col">
+                                          <span className="text-muted-foreground text-[0.70rem] uppercase">
+                                             Average
+                                          </span>
+                                          <span className="text-muted-foreground font-bold">
+                                             {payload[0].value}
+                                          </span>
+                                       </div>
+                                       <div className="flex flex-col">
+                                          <span className="text-muted-foreground text-[0.70rem] uppercase">
+                                             Today
+                                          </span>
+                                          <span className="font-bold">
+                                             {payload[1].value}
+                                          </span>
+                                       </div>
+                                    </div>
+                                 </div>
+                              )
+                           }
+
+                           return null
+                        }}
+                     />
+                     <Line
+                        type="monotone"
+                        strokeWidth={2}
+                        dataKey="average"
+                        activeDot={{
+                           r: 6,
+                           style: {
+                              fill: "var(--theme-primary)",
+                              opacity: 0.25,
+                           },
+                        }}
+                        style={
+                           {
+                              stroke: "var(--theme-primary)",
+                              opacity: 0.25,
+                              "--theme-primary": `hsl(${
+                                 baseColor?.cssVars[
+                                    mode === "dark" ? "dark" : "light"
+                                 ].primary
+                              })`,
+                           } as React.CSSProperties
+                        }
+                     />
+                     <Line
+                        type="monotone"
+                        dataKey="today"
+                        strokeWidth={2}
+                        activeDot={{
+                           r: 8,
+                           style: { fill: "var(--theme-primary)" },
+                        }}
+                        style={
+                           {
+                              stroke: "var(--theme-primary)",
+                              "--theme-primary": `hsl(${
+                                 baseColor?.cssVars[
+                                    mode === "dark" ? "dark" : "light"
+                                 ].primary
+                              })`,
+                           } as React.CSSProperties
+                        }
+                     />
+                  </LineChart>
+               </ResponsiveContainer>
+            </div>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/payment-method.tsx b/apps/web/registry/default/examples/cards/payment-method.tsx
new file mode 100644
index 00000000..2ff1db0c
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/payment-method.tsx
@@ -0,0 +1,159 @@
+"use client"
+
+import { Icons } from "~/components/icons"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/default/ui/radio-group"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/default/ui/select"
+
+export function CardsPaymentMethod() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Payment Method</CardTitle>
+            <CardDescription>
+               Add a new payment method to your account.
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-6">
+            <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
+               <div>
+                  <RadioGroupItem
+                     value="card"
+                     id="card"
+                     className="peer sr-only"
+                     aria-label="Card"
+                  />
+                  <Label
+                     htmlFor="card"
+                     className="border-muted hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
+                  >
+                     <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        className="mb-3 size-6"
+                     >
+                        <rect width="20" height="14" x="2" y="5" rx="2" />
+                        <path d="M2 10h20" />
+                     </svg>
+                     Card
+                  </Label>
+               </div>
+
+               <div>
+                  <RadioGroupItem
+                     value="paypal"
+                     id="paypal"
+                     className="peer sr-only"
+                     aria-label="Paypal"
+                  />
+                  <Label
+                     htmlFor="paypal"
+                     className="border-muted hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
+                  >
+                     <Icons.paypal className="mb-3 size-6" />
+                     Paypal
+                  </Label>
+               </div>
+
+               <div>
+                  <RadioGroupItem
+                     value="apple"
+                     id="apple"
+                     className="peer sr-only"
+                     aria-label="Apple"
+                  />
+                  <Label
+                     htmlFor="apple"
+                     className="border-muted hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
+                  >
+                     <Icons.apple className="mb-3 size-6" />
+                     Apple
+                  </Label>
+               </div>
+            </RadioGroup>
+            <div className="grid gap-2">
+               <Label htmlFor="name">Name</Label>
+               <Input id="name" placeholder="First Last" />
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor="city">City</Label>
+               <Input id="city" placeholder="" />
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor="number">Card number</Label>
+               <Input id="number" placeholder="" />
+            </div>
+            <div className="grid grid-cols-3 gap-4">
+               <div className="grid gap-2">
+                  <Label htmlFor="month">Expires</Label>
+                  <Select>
+                     <SelectTrigger id="month" aria-label="Month">
+                        <SelectValue placeholder="Month" />
+                     </SelectTrigger>
+                     <SelectContent>
+                        <SelectItem value="1">January</SelectItem>
+                        <SelectItem value="2">February</SelectItem>
+                        <SelectItem value="3">March</SelectItem>
+                        <SelectItem value="4">April</SelectItem>
+                        <SelectItem value="5">May</SelectItem>
+                        <SelectItem value="6">June</SelectItem>
+                        <SelectItem value="7">July</SelectItem>
+                        <SelectItem value="8">August</SelectItem>
+                        <SelectItem value="9">September</SelectItem>
+                        <SelectItem value="10">October</SelectItem>
+                        <SelectItem value="11">November</SelectItem>
+                        <SelectItem value="12">December</SelectItem>
+                     </SelectContent>
+                  </Select>
+               </div>
+               <div className="grid gap-2">
+                  <Label htmlFor="year">Year</Label>
+                  <Select>
+                     <SelectTrigger id="year" aria-label="Year">
+                        <SelectValue placeholder="Year" />
+                     </SelectTrigger>
+                     <SelectContent>
+                        {Array.from({ length: 10 }, (_, i) => (
+                           <SelectItem
+                              key={i}
+                              value={`${new Date().getFullYear() + i}`}
+                           >
+                              {new Date().getFullYear() + i}
+                           </SelectItem>
+                        ))}
+                     </SelectContent>
+                  </Select>
+               </div>
+               <div className="grid gap-2">
+                  <Label htmlFor="cvc">CVC</Label>
+                  <Input id="cvc" placeholder="CVC" />
+               </div>
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">Continue</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/report-issue.tsx b/apps/web/registry/default/examples/cards/report-issue.tsx
new file mode 100644
index 00000000..ac81fc54
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/report-issue.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/default/ui/select"
+import { Textarea } from "~/registry/default/ui/textarea"
+
+export function CardsReportIssue() {
+   const id = React.useId()
+
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Report an issue</CardTitle>
+            <CardDescription>
+               What area are you having problems with?
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-6">
+            <div className="grid gap-4 sm:grid-cols-2">
+               <div className="grid gap-2">
+                  <Label htmlFor={`area-${id}`}>Area</Label>
+                  <Select defaultValue="billing">
+                     <SelectTrigger id={`area-${id}`} aria-label="Area">
+                        <SelectValue placeholder="Select" />
+                     </SelectTrigger>
+                     <SelectContent>
+                        <SelectItem value="team">Team</SelectItem>
+                        <SelectItem value="billing">Billing</SelectItem>
+                        <SelectItem value="account">Account</SelectItem>
+                        <SelectItem value="deployments">Deployments</SelectItem>
+                        <SelectItem value="support">Support</SelectItem>
+                     </SelectContent>
+                  </Select>
+               </div>
+               <div className="grid gap-2">
+                  <Label htmlFor={`security-level-${id}`}>Security Level</Label>
+                  <Select defaultValue="2">
+                     <SelectTrigger
+                        id={`security-level-${id}`}
+                        className="line-clamp-1 w-full truncate"
+                        aria-label="Security Level"
+                     >
+                        <SelectValue placeholder="Select level" />
+                     </SelectTrigger>
+                     <SelectContent>
+                        <SelectItem value="1">Severity 1 (Highest)</SelectItem>
+                        <SelectItem value="2">Severity 2</SelectItem>
+                        <SelectItem value="3">Severity 3</SelectItem>
+                        <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
+                     </SelectContent>
+                  </Select>
+               </div>
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor={`subject-${id}`}>Subject</Label>
+               <Input id={`subject-${id}`} placeholder="I need help with..." />
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor={`description-${id}`}>Description</Label>
+               <Textarea
+                  id={`description-${id}`}
+                  placeholder="Please include all information relevant to your issue."
+               />
+            </div>
+         </CardContent>
+         <CardFooter className="justify-between space-x-2">
+            <Button variant="ghost">Cancel</Button>
+            <Button>Submit</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/share.tsx b/apps/web/registry/default/examples/cards/share.tsx
new file mode 100644
index 00000000..beb63b56
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/share.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import {
+   Avatar,
+   AvatarFallback,
+   AvatarImage,
+} from "~/registry/default/ui/avatar"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/default/ui/select"
+import { Separator } from "~/registry/default/ui/separator"
+
+export function CardsShare() {
+   return (
+      <Card>
+         <CardHeader className="pb-3">
+            <CardTitle>Share this document</CardTitle>
+            <CardDescription>
+               Anyone with the link can view this document.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <div className="flex space-x-2">
+               <Label htmlFor="link" className="sr-only">
+                  Link
+               </Label>
+               <Input
+                  id="link"
+                  value="http://example.com/link/to/document"
+                  readOnly
+               />
+               <Button variant="secondary" className="shrink-0">
+                  Copy Link
+               </Button>
+            </div>
+            <Separator className="my-4" />
+            <div className="space-y-4">
+               <h4 className="text-sm font-medium">People with access</h4>
+               <div className="grid gap-6">
+                  <div className="flex items-center justify-between space-x-4">
+                     <div className="flex items-center space-x-4">
+                        <Avatar>
+                           <AvatarImage src="/avatars/03.png" alt="Image" />
+                           <AvatarFallback>OM</AvatarFallback>
+                        </Avatar>
+                        <div>
+                           <p className="text-sm font-medium leading-none">
+                              Olivia Martin
+                           </p>
+                           <p className="text-muted-foreground text-sm">
+                              m@example.com
+                           </p>
+                        </div>
+                     </div>
+                     <Select defaultValue="edit">
+                        <SelectTrigger
+                           className="ml-auto w-[110px]"
+                           aria-label="Edit"
+                        >
+                           <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                           <SelectItem value="edit">Can edit</SelectItem>
+                           <SelectItem value="view">Can view</SelectItem>
+                        </SelectContent>
+                     </Select>
+                  </div>
+                  <div className="flex items-center justify-between space-x-4">
+                     <div className="flex items-center space-x-4">
+                        <Avatar>
+                           <AvatarImage src="/avatars/05.png" alt="Image" />
+                           <AvatarFallback>IN</AvatarFallback>
+                        </Avatar>
+                        <div>
+                           <p className="text-sm font-medium leading-none">
+                              Isabella Nguyen
+                           </p>
+                           <p className="text-muted-foreground text-sm">
+                              b@example.com
+                           </p>
+                        </div>
+                     </div>
+                     <Select defaultValue="view">
+                        <SelectTrigger
+                           className="ml-auto w-[110px]"
+                           aria-label="Edit"
+                        >
+                           <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                           <SelectItem value="edit">Can edit</SelectItem>
+                           <SelectItem value="view">Can view</SelectItem>
+                        </SelectContent>
+                     </Select>
+                  </div>
+                  <div className="flex items-center justify-between space-x-4">
+                     <div className="flex items-center space-x-4">
+                        <Avatar>
+                           <AvatarImage src="/avatars/01.png" alt="Image" />
+                           <AvatarFallback>SD</AvatarFallback>
+                        </Avatar>
+                        <div>
+                           <p className="text-sm font-medium leading-none">
+                              Sofia Davis
+                           </p>
+                           <p className="text-muted-foreground text-sm">
+                              p@example.com
+                           </p>
+                        </div>
+                     </div>
+                     <Select defaultValue="view">
+                        <SelectTrigger
+                           className="ml-auto w-[110px]"
+                           aria-label="Edit"
+                        >
+                           <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                           <SelectItem value="edit">Can edit</SelectItem>
+                           <SelectItem value="view">Can view</SelectItem>
+                        </SelectContent>
+                     </Select>
+                  </div>
+               </div>
+            </div>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/stats.tsx b/apps/web/registry/default/examples/cards/stats.tsx
new file mode 100644
index 00000000..ad94f18f
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/stats.tsx
@@ -0,0 +1,142 @@
+import { useTheme } from "next-themes"
+import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts"
+
+import { useConfig } from "~/hooks/use-config"
+import {
+   Card,
+   CardContent,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { baseColors } from "~/registry/registry-base-colors"
+
+const data = [
+   {
+      revenue: 10400,
+      subscription: 240,
+   },
+   {
+      revenue: 14405,
+      subscription: 300,
+   },
+   {
+      revenue: 9400,
+      subscription: 200,
+   },
+   {
+      revenue: 8200,
+      subscription: 278,
+   },
+   {
+      revenue: 7000,
+      subscription: 189,
+   },
+   {
+      revenue: 9600,
+      subscription: 239,
+   },
+   {
+      revenue: 11244,
+      subscription: 278,
+   },
+   {
+      revenue: 26475,
+      subscription: 189,
+   },
+]
+
+export function CardsStats() {
+   const { theme: mode } = useTheme()
+   const [config] = useConfig()
+
+   const baseColor = baseColors.find(
+      (baseColor) => baseColor.name === config.theme,
+   )
+
+   return (
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
+         <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+               <CardTitle className="text-base font-normal">
+                  Total Revenue
+               </CardTitle>
+            </CardHeader>
+            <CardContent>
+               <div className="text-2xl font-bold">$15,231.89</div>
+               <p className="text-muted-foreground text-xs">
+                  +20.1% from last month
+               </p>
+               <div className="h-[80px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                     <LineChart
+                        data={data}
+                        margin={{
+                           top: 5,
+                           right: 10,
+                           left: 10,
+                           bottom: 0,
+                        }}
+                     >
+                        <Line
+                           type="monotone"
+                           strokeWidth={2}
+                           dataKey="revenue"
+                           activeDot={{
+                              r: 6,
+                              style: {
+                                 fill: "var(--theme-primary)",
+                                 opacity: 0.25,
+                              },
+                           }}
+                           style={
+                              {
+                                 stroke: "var(--theme-primary)",
+                                 "--theme-primary": `hsl(${
+                                    baseColor?.cssVars[
+                                       mode === "dark" ? "dark" : "light"
+                                    ].primary
+                                 })`,
+                              } as React.CSSProperties
+                           }
+                        />
+                     </LineChart>
+                  </ResponsiveContainer>
+               </div>
+            </CardContent>
+         </Card>
+         <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+               <CardTitle className="text-base font-normal">
+                  Subscriptions
+               </CardTitle>
+            </CardHeader>
+            <CardContent>
+               <div className="text-2xl font-bold">+2350</div>
+               <p className="text-muted-foreground text-xs">
+                  +180.1% from last month
+               </p>
+               <div className="mt-4 h-[80px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                     <BarChart data={data}>
+                        <Bar
+                           dataKey="subscription"
+                           style={
+                              {
+                                 fill: "var(--theme-primary)",
+                                 opacity: 1,
+                                 "--theme-primary": `hsl(${
+                                    baseColor?.cssVars[
+                                       mode === "dark" ? "dark" : "light"
+                                    ].primary
+                                 })`,
+                              } as React.CSSProperties
+                           }
+                        />
+                     </BarChart>
+                  </ResponsiveContainer>
+               </div>
+            </CardContent>
+         </Card>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/cards/team-members.tsx b/apps/web/registry/default/examples/cards/team-members.tsx
new file mode 100644
index 00000000..cef02673
--- /dev/null
+++ b/apps/web/registry/default/examples/cards/team-members.tsx
@@ -0,0 +1,219 @@
+"use client"
+
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+import {
+   Avatar,
+   AvatarFallback,
+   AvatarImage,
+} from "~/registry/default/ui/avatar"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/default/ui/command"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+
+export function CardsTeamMembers() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Team Members</CardTitle>
+            <CardDescription>
+               Invite your team members to collaborate.
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-6">
+            <div className="flex items-center justify-between space-x-4">
+               <div className="flex items-center space-x-4">
+                  <Avatar className="size-8">
+                     <AvatarImage src="/avatars/01.png" alt="Image" />
+                     <AvatarFallback>OM</AvatarFallback>
+                  </Avatar>
+                  <div>
+                     <p className="text-sm font-medium leading-none">
+                        Sofia Davis
+                     </p>
+                     <p className="text-muted-foreground text-sm">
+                        m@example.com
+                     </p>
+                  </div>
+               </div>
+               <Popover>
+                  <PopoverTrigger asChild>
+                     <Button variant="outline" size="sm" className="ml-auto">
+                        Owner{" "}
+                        <ChevronDownIcon className="text-muted-foreground ml-2 size-4" />
+                     </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="end">
+                     <Command>
+                        <CommandInput placeholder="Select new role..." />
+                        <CommandList>
+                           <CommandEmpty>No roles found.</CommandEmpty>
+                           <CommandGroup>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Viewer</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view and comment.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Developer</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view, comment and edit.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Billing</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view, comment and manage billing.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Owner</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Admin-level access to all resources.
+                                 </p>
+                              </CommandItem>
+                           </CommandGroup>
+                        </CommandList>
+                     </Command>
+                  </PopoverContent>
+               </Popover>
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+               <div className="flex items-center space-x-4">
+                  <Avatar className="size-8">
+                     <AvatarImage src="/avatars/02.png" alt="Image" />
+                     <AvatarFallback>JL</AvatarFallback>
+                  </Avatar>
+                  <div>
+                     <p className="text-sm font-medium leading-none">
+                        Jackson Lee
+                     </p>
+                     <p className="text-muted-foreground text-sm">
+                        p@example.com
+                     </p>
+                  </div>
+               </div>
+               <Popover>
+                  <PopoverTrigger asChild>
+                     <Button variant="outline" size="sm" className="ml-auto">
+                        Member{" "}
+                        <ChevronDownIcon className="text-muted-foreground ml-2 size-4" />
+                     </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="end">
+                     <Command>
+                        <CommandInput placeholder="Select new role..." />
+                        <CommandList>
+                           <CommandEmpty>No roles found.</CommandEmpty>
+                           <CommandGroup className="p-1.5">
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Viewer</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view and comment.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Developer</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view, comment and edit.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Billing</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view, comment and manage billing.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Owner</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Admin-level access to all resources.
+                                 </p>
+                              </CommandItem>
+                           </CommandGroup>
+                        </CommandList>
+                     </Command>
+                  </PopoverContent>
+               </Popover>
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+               <div className="flex items-center space-x-4">
+                  <Avatar className="size-8">
+                     <AvatarImage src="/avatars/03.png" alt="Image" />
+                     <AvatarFallback>IN</AvatarFallback>
+                  </Avatar>
+                  <div>
+                     <p className="text-sm font-medium leading-none">
+                        Isabella Nguyen
+                     </p>
+                     <p className="text-muted-foreground text-sm">
+                        i@example.com
+                     </p>
+                  </div>
+               </div>
+               <Popover>
+                  <PopoverTrigger asChild>
+                     <Button variant="outline" size="sm" className="ml-auto">
+                        Member{" "}
+                        <ChevronDownIcon className="text-muted-foreground ml-2 size-4" />
+                     </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="end">
+                     <Command>
+                        <CommandInput placeholder="Select new role..." />
+                        <CommandList>
+                           <CommandEmpty>No roles found.</CommandEmpty>
+                           <CommandGroup className="p-1.5">
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Viewer</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view and comment.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Developer</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view, comment and edit.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Billing</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view, comment and manage billing.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Owner</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Admin-level access to all resources.
+                                 </p>
+                              </CommandItem>
+                           </CommandGroup>
+                        </CommandList>
+                     </Command>
+                  </PopoverContent>
+               </Popover>
+            </div>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/examples/carousel-api.tsx b/apps/web/registry/default/examples/carousel-api.tsx
new file mode 100644
index 00000000..012e91e4
--- /dev/null
+++ b/apps/web/registry/default/examples/carousel-api.tsx
@@ -0,0 +1,54 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/default/ui/card"
+import {
+   Carousel,
+   type CarouselApi,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/default/ui/carousel"
+
+export default function CarouselDApiDemo() {
+   const [api, setApi] = React.useState<CarouselApi>()
+   const [current, setCurrent] = React.useState(0)
+   const [count, setCount] = React.useState(0)
+
+   React.useEffect(() => {
+      if (!api) return
+
+      setCount(api.scrollSnapList().length)
+      setCurrent(api.selectedScrollSnap() + 1)
+
+      api.on("select", () => {
+         setCurrent(api.selectedScrollSnap() + 1)
+      })
+   }, [api])
+
+   return (
+      <div>
+         <Carousel setApi={setApi} className="w-full max-w-xs">
+            <CarouselContent>
+               {Array.from({ length: 5 }).map((_, index) => (
+                  <CarouselItem key={index}>
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-4xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </CarouselItem>
+               ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+         </Carousel>
+         <div className="text-muted-foreground py-2 text-center text-sm">
+            Slide {current} of
+            {count}
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/carousel-demo.tsx b/apps/web/registry/default/examples/carousel-demo.tsx
new file mode 100644
index 00000000..3f7f725a
--- /dev/null
+++ b/apps/web/registry/default/examples/carousel-demo.tsx
@@ -0,0 +1,34 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/default/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/default/ui/carousel"
+
+export default function CarouselDemo() {
+   return (
+      <Carousel className="w-full max-w-xs">
+         <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem key={index}>
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-4xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/default/examples/carousel-dots.tsx b/apps/web/registry/default/examples/carousel-dots.tsx
new file mode 100644
index 00000000..d72be0f2
--- /dev/null
+++ b/apps/web/registry/default/examples/carousel-dots.tsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/default/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselDots,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/default/ui/carousel"
+
+export default function CarouselDotsDemo() {
+   return (
+      <Carousel
+         opts={{
+            align: "start",
+         }}
+         className="w-full max-w-sm"
+      >
+         <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-3xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselDots />
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/default/examples/carousel-orientation.tsx b/apps/web/registry/default/examples/carousel-orientation.tsx
new file mode 100644
index 00000000..ef3c12ba
--- /dev/null
+++ b/apps/web/registry/default/examples/carousel-orientation.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/default/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/default/ui/carousel"
+
+export default function CarouselOrientation() {
+   return (
+      <Carousel
+         opts={{
+            align: "start",
+         }}
+         orientation="vertical"
+         className="w-full max-w-xs"
+      >
+         <CarouselContent className="-mt-1 h-[200px]">
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem key={index} className="pt-1 md:basis-1/2">
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex items-center justify-center p-6">
+                           <span className="text-3xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/default/examples/carousel-plugin.tsx b/apps/web/registry/default/examples/carousel-plugin.tsx
new file mode 100644
index 00000000..6e3b8712
--- /dev/null
+++ b/apps/web/registry/default/examples/carousel-plugin.tsx
@@ -0,0 +1,44 @@
+import Autoplay from "embla-carousel-autoplay"
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/default/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/default/ui/carousel"
+
+export default function CarouselPlugin() {
+   const plugin = React.useRef(
+      Autoplay({ delay: 2000, stopOnInteraction: true }),
+   )
+
+   return (
+      <Carousel
+         plugins={[plugin.current]}
+         className="w-full max-w-xs"
+         onMouseEnter={plugin.current.stop}
+         onMouseLeave={plugin.current.reset}
+      >
+         <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem key={index}>
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-4xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/default/examples/carousel-size.tsx b/apps/web/registry/default/examples/carousel-size.tsx
new file mode 100644
index 00000000..1b3d3b36
--- /dev/null
+++ b/apps/web/registry/default/examples/carousel-size.tsx
@@ -0,0 +1,39 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/default/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/default/ui/carousel"
+
+export default function CarouselSize() {
+   return (
+      <Carousel
+         opts={{
+            align: "start",
+         }}
+         className="w-full max-w-sm"
+      >
+         <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-3xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/default/examples/carousel-spacing.tsx b/apps/web/registry/default/examples/carousel-spacing.tsx
new file mode 100644
index 00000000..714f978b
--- /dev/null
+++ b/apps/web/registry/default/examples/carousel-spacing.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/default/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/default/ui/carousel"
+
+export default function CarouselSpacing() {
+   return (
+      <Carousel className="w-full max-w-sm">
+         <CarouselContent className="-ml-1">
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem
+                  key={index}
+                  className="pl-1 md:basis-1/2 lg:basis-1/3"
+               >
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-2xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/default/examples/chart-bar-demo-axis.tsx b/apps/web/registry/default/examples/chart-bar-demo-axis.tsx
new file mode 100644
index 00000000..4f2d6268
--- /dev/null
+++ b/apps/web/registry/default/examples/chart-bar-demo-axis.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import type { ChartConfig } from "~/registry/default/ui/chart"
+import { ChartContainer } from "~/registry/default/ui/chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "#2563eb",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "#60a5fa",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+         <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+               dataKey="month"
+               tickLine={false}
+               tickMargin={10}
+               axisLine={false}
+               tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+         </BarChart>
+      </ChartContainer>
+   )
+}
diff --git a/apps/web/registry/default/examples/chart-bar-demo-grid.tsx b/apps/web/registry/default/examples/chart-bar-demo-grid.tsx
new file mode 100644
index 00000000..b5bef1c8
--- /dev/null
+++ b/apps/web/registry/default/examples/chart-bar-demo-grid.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid } from "recharts"
+
+import type { ChartConfig } from "~/registry/default/ui/chart"
+import { ChartContainer } from "~/registry/default/ui/chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "#2563eb",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "#60a5fa",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+         <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+         </BarChart>
+      </ChartContainer>
+   )
+}
diff --git a/apps/web/registry/default/examples/chart-bar-demo-legend.tsx b/apps/web/registry/default/examples/chart-bar-demo-legend.tsx
new file mode 100644
index 00000000..9fb35df5
--- /dev/null
+++ b/apps/web/registry/default/examples/chart-bar-demo-legend.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import type { ChartConfig } from "~/registry/default/ui/chart"
+import {
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "#2563eb",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "#60a5fa",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+         <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+               dataKey="month"
+               tickLine={false}
+               tickMargin={10}
+               axisLine={false}
+               tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+         </BarChart>
+      </ChartContainer>
+   )
+}
diff --git a/apps/web/registry/default/examples/chart-bar-demo-tooltip.tsx b/apps/web/registry/default/examples/chart-bar-demo-tooltip.tsx
new file mode 100644
index 00000000..3ecab752
--- /dev/null
+++ b/apps/web/registry/default/examples/chart-bar-demo-tooltip.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import type { ChartConfig } from "~/registry/default/ui/chart"
+import {
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/default/ui/chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "#2563eb",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "#60a5fa",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+         <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+               dataKey="month"
+               tickLine={false}
+               tickMargin={10}
+               axisLine={false}
+               tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+         </BarChart>
+      </ChartContainer>
+   )
+}
diff --git a/apps/web/registry/default/examples/chart-bar-demo.tsx b/apps/web/registry/default/examples/chart-bar-demo.tsx
new file mode 100644
index 00000000..a3d51aff
--- /dev/null
+++ b/apps/web/registry/default/examples/chart-bar-demo.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import { Bar, BarChart } from "recharts"
+
+import type { ChartConfig } from "~/registry/default/ui/chart"
+import { ChartContainer } from "~/registry/default/ui/chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "#2563eb",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "#60a5fa",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+         <BarChart accessibilityLayer data={chartData}>
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+         </BarChart>
+      </ChartContainer>
+   )
+}
diff --git a/apps/web/registry/default/examples/chart-tooltip-demo.tsx b/apps/web/registry/default/examples/chart-tooltip-demo.tsx
new file mode 100644
index 00000000..bb599d7b
--- /dev/null
+++ b/apps/web/registry/default/examples/chart-tooltip-demo.tsx
@@ -0,0 +1,225 @@
+"use client"
+
+import type * as React from "react"
+
+import { ny } from "~/lib/utils"
+
+export default function Component() {
+   return (
+      <div className="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
+         <div>
+            <div className="absolute left-[-35px] top-[45px] z-10 text-sm font-medium">
+               Label
+            </div>
+            <svg
+               xmlns="http://www.w3.org/2000/svg"
+               viewBox="0 0 193 40"
+               width="50"
+               height="12"
+               fill="none"
+               className="absolute left-[5px] top-[50px] z-10"
+            >
+               <g clip-path="url(#a)">
+                  <path
+                     fill="currentColor"
+                     d="M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z"
+                  />
+               </g>
+               <defs>
+                  <clipPath id="a">
+                     <path fill="currentColor" d="M0 0h193v40H0z" />
+                  </clipPath>
+               </defs>
+            </svg>
+            <TooltipDemo
+               label="Page Views"
+               payload={[
+                  { name: "Desktop", value: 186, fill: "hsl(var(--chart-1))" },
+                  { name: "Mobile", value: 80, fill: "hsl(var(--chart-2))" },
+               ]}
+               className="w-32"
+            />
+         </div>
+         <div className="items-end">
+            <div className="absolute left-[122px] top-0 z-10 text-sm font-medium">
+               Name
+            </div>
+            <svg
+               xmlns="http://www.w3.org/2000/svg"
+               width="35"
+               height="42"
+               fill="none"
+               viewBox="0 0 122 148"
+               className="absolute left-[85px] top-[10px] z-10 -scale-x-100"
+            >
+               <g clip-path="url(#ab)">
+                  <path
+                     fill="currentColor"
+                     d="M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z"
+                  />
+               </g>
+               <defs>
+                  <clipPath id="ab">
+                     <path fill="currentColor" d="M0 0h122v148H0z" />
+                  </clipPath>
+               </defs>
+            </svg>
+            <TooltipDemo
+               label="Browser"
+               hideLabel
+               payload={[
+                  { name: "Chrome", value: 1286, fill: "hsl(var(--chart-3))" },
+                  { name: "Firefox", value: 1000, fill: "hsl(var(--chart-4))" },
+               ]}
+               indicator="dashed"
+               className="w-32"
+            />
+         </div>
+         <div className="!hidden md:!flex">
+            <TooltipDemo
+               label="Page Views"
+               payload={[
+                  {
+                     name: "Desktop",
+                     value: 12486,
+                     fill: "hsl(var(--chart-3))",
+                  },
+               ]}
+               className="w-36"
+               indicator="line"
+            />
+         </div>
+         <div className="!items-start !justify-start">
+            <div className="absolute left-[50px] top-[60px] z-10 text-sm font-medium">
+               Indicator
+            </div>
+            <TooltipDemo
+               label="Browser"
+               hideLabel
+               payload={[
+                  { name: "Chrome", value: 1286, fill: "hsl(var(--chart-1))" },
+               ]}
+               indicator="dot"
+               className="w-32"
+            />
+            <svg
+               xmlns="http://www.w3.org/2000/svg"
+               width="15"
+               height="34"
+               fill="none"
+               viewBox="0 0 75 175"
+               className="absolute left-[30px] top-[38px] z-10 rotate-[-40deg]"
+            >
+               <g clip-path="url(#abc)">
+                  <path
+                     fill="currentColor"
+                     d="M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z"
+                  />
+               </g>
+               <defs>
+                  <clipPath id="abc">
+                     <path fill="currentColor" d="M0 0h75v175H0z" />
+                  </clipPath>
+               </defs>
+            </svg>
+         </div>
+      </div>
+   )
+}
+
+function TooltipDemo({
+   indicator = "dot",
+   label,
+   payload,
+   hideLabel,
+   hideIndicator,
+   className,
+}: {
+   label: string
+   hideLabel?: boolean
+   hideIndicator?: boolean
+   indicator?: "line" | "dot" | "dashed"
+   payload: {
+      name: string
+      value: number
+      fill: string
+   }[]
+   nameKey?: string
+   labelKey?: string
+} & React.ComponentProps<"div">) {
+   const tooltipLabel = hideLabel ? null : (
+      <div className="font-medium">{label}</div>
+   )
+
+   if (!payload?.length) {
+      return null
+   }
+
+   const nestLabel = payload.length === 1 && indicator !== "dot"
+
+   return (
+      <div
+         className={ny(
+            "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5",
+            className,
+         )}
+      >
+         {!nestLabel ? tooltipLabel : null}
+         <div className="grid gap-1.5">
+            {payload.map((item, index) => {
+               const indicatorColor = item.fill
+
+               return (
+                  <div
+                     key={index}
+                     className={ny(
+                        "[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5",
+                        indicator === "dot" && "items-center",
+                     )}
+                  >
+                     <>
+                        {!hideIndicator && (
+                           <div
+                              className={ny(
+                                 "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                                 {
+                                    "h-2.5 w-2.5": indicator === "dot",
+                                    "w-1": indicator === "line",
+                                    "w-0 border-[1.5px] border-dashed bg-transparent":
+                                       indicator === "dashed",
+                                    "my-0.5":
+                                       nestLabel && indicator === "dashed",
+                                 },
+                              )}
+                              style={
+                                 {
+                                    "--color-bg": indicatorColor,
+                                    "--color-border": indicatorColor,
+                                 } as React.CSSProperties
+                              }
+                           />
+                        )}
+                        <div
+                           className={ny(
+                              "flex flex-1 justify-between leading-none",
+                              nestLabel ? "items-end" : "items-center",
+                           )}
+                        >
+                           <div className="grid gap-1.5">
+                              {nestLabel ? tooltipLabel : null}
+                              <span className="text-muted-foreground">
+                                 {item.name}
+                              </span>
+                           </div>
+                           <span className="text-foreground font-mono font-medium tabular-nums">
+                              {item.value.toLocaleString()}
+                           </span>
+                        </div>
+                     </>
+                  </div>
+               )
+            })}
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/checkbox-demo.tsx b/apps/web/registry/default/examples/checkbox-demo.tsx
new file mode 100644
index 00000000..96acdc70
--- /dev/null
+++ b/apps/web/registry/default/examples/checkbox-demo.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { Checkbox } from "~/registry/default/ui/checkbox"
+
+export default function CheckboxDemo() {
+   return (
+      <div className="flex items-center space-x-2">
+         <Checkbox id="terms" />
+         <label
+            htmlFor="terms"
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+         >
+            Accept terms and conditions
+         </label>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/checkbox-disabled.tsx b/apps/web/registry/default/examples/checkbox-disabled.tsx
new file mode 100644
index 00000000..d3416e11
--- /dev/null
+++ b/apps/web/registry/default/examples/checkbox-disabled.tsx
@@ -0,0 +1,15 @@
+import { Checkbox } from "~/registry/default/ui/checkbox"
+
+export default function CheckboxDisabled() {
+   return (
+      <div className="flex items-center space-x-2">
+         <Checkbox id="terms2" disabled />
+         <label
+            htmlFor="terms2"
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+         >
+            Accept terms and conditions
+         </label>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/checkbox-form-multiple.tsx b/apps/web/registry/default/examples/checkbox-form-multiple.tsx
new file mode 100644
index 00000000..ce6be98b
--- /dev/null
+++ b/apps/web/registry/default/examples/checkbox-form-multiple.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/default/ui/button"
+import { Checkbox } from "~/registry/default/ui/checkbox"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const items = [
+   {
+      id: "recents",
+      label: "Recents",
+   },
+   {
+      id: "home",
+      label: "Home",
+   },
+   {
+      id: "applications",
+      label: "Applications",
+   },
+   {
+      id: "desktop",
+      label: "Desktop",
+   },
+   {
+      id: "downloads",
+      label: "Downloads",
+   },
+   {
+      id: "documents",
+      label: "Documents",
+   },
+] as const
+
+const FormSchema = z.object({
+   items: z.array(z.string()).refine((value) => value.some((item) => item), {
+      message: "You have to select at least one item.",
+   }),
+})
+
+export default function CheckboxReactHookFormMultiple() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+         items: ["recents", "home"],
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+               control={form.control}
+               name="items"
+               render={() => (
+                  <FormItem>
+                     <div className="mb-4">
+                        <FormLabel className="text-base">Sidebar</FormLabel>
+                        <FormDescription>
+                           Select the items you want to display in the sidebar.
+                        </FormDescription>
+                     </div>
+                     {items.map((item) => (
+                        <FormField
+                           key={item.id}
+                           control={form.control}
+                           name="items"
+                           render={({ field }) => {
+                              return (
+                                 <FormItem
+                                    key={item.id}
+                                    className="flex flex-row items-start space-x-3 space-y-0"
+                                 >
+                                    <FormControl>
+                                       <Checkbox
+                                          checked={field.value?.includes(
+                                             item.id,
+                                          )}
+                                          onCheckedChange={(checked) => {
+                                             return checked
+                                                ? field.onChange([
+                                                     ...field.value,
+                                                     item.id,
+                                                  ])
+                                                : field.onChange(
+                                                     field.value?.filter(
+                                                        (value) =>
+                                                           value !== item.id,
+                                                     ),
+                                                  )
+                                          }}
+                                       />
+                                    </FormControl>
+                                    <FormLabel className="font-normal">
+                                       {item.label}
+                                    </FormLabel>
+                                 </FormItem>
+                              )
+                           }}
+                        />
+                     ))}
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/checkbox-form-single.tsx b/apps/web/registry/default/examples/checkbox-form-single.tsx
new file mode 100644
index 00000000..8fad15d8
--- /dev/null
+++ b/apps/web/registry/default/examples/checkbox-form-single.tsx
@@ -0,0 +1,76 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import Link from "next/link"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/default/ui/button"
+import { Checkbox } from "~/registry/default/ui/checkbox"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+} from "~/registry/default/ui/form"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+   mobile: z.boolean().default(false).optional(),
+})
+
+export default function CheckboxReactHookFormSingle() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+         mobile: true,
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+               control={form.control}
+               name="mobile"
+               render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                     <FormControl>
+                        <Checkbox
+                           checked={field.value}
+                           onCheckedChange={field.onChange}
+                        />
+                     </FormControl>
+                     <div className="space-y-1 leading-none">
+                        <FormLabel>
+                           Use different settings for my mobile devices
+                        </FormLabel>
+                        <FormDescription>
+                           You can manage your mobile notifications in the{" "}
+                           <Link href="/examples/forms">mobile settings</Link>{" "}
+                           page.
+                        </FormDescription>
+                     </div>
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/checkbox-with-text.tsx b/apps/web/registry/default/examples/checkbox-with-text.tsx
new file mode 100644
index 00000000..29f86307
--- /dev/null
+++ b/apps/web/registry/default/examples/checkbox-with-text.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { Checkbox } from "~/registry/default/ui/checkbox"
+
+export default function CheckboxWithText() {
+   return (
+      <div className="items-top flex space-x-2">
+         <Checkbox id="terms1" />
+         <div className="grid gap-1.5 leading-none">
+            <label
+               htmlFor="terms1"
+               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+               Accept terms and conditions
+            </label>
+            <p className="text-muted-foreground text-sm">
+               You agree to our Terms of Service and Privacy Policy.
+            </p>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/collapsible-demo.tsx b/apps/web/registry/default/examples/collapsible-demo.tsx
new file mode 100644
index 00000000..26a55f97
--- /dev/null
+++ b/apps/web/registry/default/examples/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import { ChevronsUpDown } from "lucide-react"
+import * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/default/ui/collapsible"
+
+export default function CollapsibleDemo() {
+   const [isOpen, setIsOpen] = React.useState(false)
+
+   return (
+      <Collapsible
+         open={isOpen}
+         onOpenChange={setIsOpen}
+         className="w-[350px] space-y-2"
+      >
+         <div className="flex items-center justify-between space-x-4 px-4">
+            <h4 className="text-sm font-semibold">
+               @peduarte starred 3 repositories
+            </h4>
+            <CollapsibleTrigger asChild>
+               <Button variant="ghost" size="sm" className="w-9 p-0">
+                  <ChevronsUpDown className="size-4" />
+                  <span className="sr-only">Toggle</span>
+               </Button>
+            </CollapsibleTrigger>
+         </div>
+         <div className="rounded-md border px-4 py-3 font-mono text-sm">
+            @radix-ui/primitives
+         </div>
+         <CollapsibleContent className="space-y-2">
+            <div className="rounded-md border px-4 py-3 font-mono text-sm">
+               @radix-ui/colors
+            </div>
+            <div className="rounded-md border px-4 py-3 font-mono text-sm">
+               @stitches/react
+            </div>
+         </CollapsibleContent>
+      </Collapsible>
+   )
+}
diff --git a/apps/web/registry/default/examples/combobox-demo.tsx b/apps/web/registry/default/examples/combobox-demo.tsx
new file mode 100644
index 00000000..e976f3af
--- /dev/null
+++ b/apps/web/registry/default/examples/combobox-demo.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { Check, ChevronsUpDown } from "lucide-react"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/default/ui/command"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+
+const frameworks = [
+   {
+      value: "next.js",
+      label: "Next.js",
+   },
+   {
+      value: "sveltekit",
+      label: "SvelteKit",
+   },
+   {
+      value: "nuxt.js",
+      label: "Nuxt.js",
+   },
+   {
+      value: "remix",
+      label: "Remix",
+   },
+   {
+      value: "astro",
+      label: "Astro",
+   },
+]
+
+export default function ComboboxDemo() {
+   const [open, setOpen] = React.useState(false)
+   const [value, setValue] = React.useState("")
+
+   return (
+      <Popover open={open} onOpenChange={setOpen}>
+         <PopoverTrigger asChild>
+            <Button
+               variant="outline"
+               role="combobox"
+               aria-expanded={open}
+               className="w-[200px] justify-between"
+            >
+               {value
+                  ? frameworks.find((framework) => framework.value === value)
+                       ?.label
+                  : "Select framework..."}
+               <ChevronsUpDown className="opacity-50" />
+            </Button>
+         </PopoverTrigger>
+         <PopoverContent className="w-[200px] p-0">
+            <Command>
+               <CommandInput placeholder="Search framework..." />
+               <CommandList>
+                  <CommandEmpty>No framework found.</CommandEmpty>
+                  <CommandGroup>
+                     {frameworks.map((framework) => (
+                        <CommandItem
+                           key={framework.value}
+                           value={framework.value}
+                           onSelect={(currentValue) => {
+                              setValue(
+                                 currentValue === value ? "" : currentValue,
+                              )
+                              setOpen(false)
+                           }}
+                        >
+                           {framework.label}
+                           <Check
+                              className={ny(
+                                 "ml-auto",
+                                 value === framework.value
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                              )}
+                           />
+                        </CommandItem>
+                     ))}
+                  </CommandGroup>
+               </CommandList>
+            </Command>
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/default/examples/combobox-dropdown-menu.tsx b/apps/web/registry/default/examples/combobox-dropdown-menu.tsx
new file mode 100644
index 00000000..aa147981
--- /dev/null
+++ b/apps/web/registry/default/examples/combobox-dropdown-menu.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { Calendar, MoreHorizontal, Tags, Trash, User } from "lucide-react"
+import * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/default/ui/command"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuSub,
+   DropdownMenuSubContent,
+   DropdownMenuSubTrigger,
+   DropdownMenuTrigger,
+} from "~/registry/default/ui/dropdown-menu"
+
+const labels = [
+   "feature",
+   "bug",
+   "enhancement",
+   "documentation",
+   "design",
+   "question",
+   "maintenance",
+]
+
+export default function ComboboxDropdownMenu() {
+   const [label, setLabel] = React.useState("feature")
+   const [open, setOpen] = React.useState(false)
+
+   return (
+      <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+         <p className="text-sm font-medium leading-none">
+            <span className="bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs">
+               {label}
+            </span>
+            <span className="text-muted-foreground">Create a new project</span>
+         </p>
+         <DropdownMenu open={open} onOpenChange={setOpen}>
+            <DropdownMenuTrigger asChild>
+               <Button variant="ghost" size="sm">
+                  <MoreHorizontal />
+               </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-[200px]">
+               <DropdownMenuLabel>Actions</DropdownMenuLabel>
+               <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                     <User />
+                     Assign to...
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                     <Calendar />
+                     Set due date...
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuSub>
+                     <DropdownMenuSubTrigger>
+                        <Tags />
+                        Apply label
+                     </DropdownMenuSubTrigger>
+                     <DropdownMenuSubContent className="p-0">
+                        <Command>
+                           <CommandInput
+                              placeholder="Filter label..."
+                              autoFocus
+                           />
+                           <CommandList>
+                              <CommandEmpty>No label found.</CommandEmpty>
+                              <CommandGroup>
+                                 {labels.map((label) => (
+                                    <CommandItem
+                                       key={label}
+                                       value={label}
+                                       onSelect={(value) => {
+                                          setLabel(value)
+                                          setOpen(false)
+                                       }}
+                                    >
+                                       {label}
+                                    </CommandItem>
+                                 ))}
+                              </CommandGroup>
+                           </CommandList>
+                        </Command>
+                     </DropdownMenuSubContent>
+                  </DropdownMenuSub>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="text-red-600">
+                     <Trash />
+                     Delete
+                     <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+                  </DropdownMenuItem>
+               </DropdownMenuGroup>
+            </DropdownMenuContent>
+         </DropdownMenu>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/combobox-form.tsx b/apps/web/registry/default/examples/combobox-form.tsx
new file mode 100644
index 00000000..0f945725
--- /dev/null
+++ b/apps/web/registry/default/examples/combobox-form.tsx
@@ -0,0 +1,144 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { ny } from "~/lib/utils"
+import { toast } from "~/registry/default/hooks/use-toast"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/default/ui/command"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+
+const languages = [
+   { label: "English", value: "en" },
+   { label: "French", value: "fr" },
+   { label: "German", value: "de" },
+   { label: "Spanish", value: "es" },
+   { label: "Portuguese", value: "pt" },
+   { label: "Russian", value: "ru" },
+   { label: "Japanese", value: "ja" },
+   { label: "Korean", value: "ko" },
+   { label: "Chinese", value: "zh" },
+] as const
+
+const FormSchema = z.object({
+   language: z.string({
+      required_error: "Please select a language.",
+   }),
+})
+
+export default function ComboboxForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+               control={form.control}
+               name="language"
+               render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                     <FormLabel>Language</FormLabel>
+                     <Popover>
+                        <PopoverTrigger asChild>
+                           <FormControl>
+                              <Button
+                                 variant="outline"
+                                 role="combobox"
+                                 className={ny(
+                                    "w-[200px] justify-between",
+                                    !field.value && "text-muted-foreground",
+                                 )}
+                              >
+                                 {field.value
+                                    ? languages.find(
+                                         (language) =>
+                                            language.value === field.value,
+                                      )?.label
+                                    : "Select language"}
+                                 <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+                              </Button>
+                           </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[200px] p-0">
+                           <Command>
+                              <CommandInput placeholder="Search language..." />
+                              <CommandList>
+                                 <CommandEmpty>No language found.</CommandEmpty>
+                                 <CommandGroup>
+                                    {languages.map((language) => (
+                                       <CommandItem
+                                          value={language.label}
+                                          key={language.value}
+                                          onSelect={() => {
+                                             form.setValue(
+                                                "language",
+                                                language.value,
+                                             )
+                                          }}
+                                       >
+                                          {language.label}
+                                          <Check
+                                             className={ny(
+                                                "ml-auto",
+                                                language.value === field.value
+                                                   ? "opacity-100"
+                                                   : "opacity-0",
+                                             )}
+                                          />
+                                       </CommandItem>
+                                    ))}
+                                 </CommandGroup>
+                              </CommandList>
+                           </Command>
+                        </PopoverContent>
+                     </Popover>
+                     <FormDescription>
+                        This is the language that will be used in the dashboard.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/combobox-popover.tsx b/apps/web/registry/default/examples/combobox-popover.tsx
new file mode 100644
index 00000000..a7d5cddb
--- /dev/null
+++ b/apps/web/registry/default/examples/combobox-popover.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import type { LucideIcon } from "lucide-react"
+import {
+   ArrowUpCircle,
+   CheckCircle2,
+   Circle,
+   HelpCircle,
+   XCircle,
+} from "lucide-react"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/default/ui/command"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+
+interface Status {
+   value: string
+   label: string
+   icon: LucideIcon
+}
+
+const statuses: Status[] = [
+   {
+      value: "backlog",
+      label: "Backlog",
+      icon: HelpCircle,
+   },
+   {
+      value: "todo",
+      label: "Todo",
+      icon: Circle,
+   },
+   {
+      value: "in progress",
+      label: "In Progress",
+      icon: ArrowUpCircle,
+   },
+   {
+      value: "done",
+      label: "Done",
+      icon: CheckCircle2,
+   },
+   {
+      value: "canceled",
+      label: "Canceled",
+      icon: XCircle,
+   },
+]
+
+export default function ComboboxPopover() {
+   const [open, setOpen] = React.useState(false)
+   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
+      null,
+   )
+
+   return (
+      <div className="flex items-center space-x-4">
+         <p className="text-muted-foreground text-sm">Status</p>
+         <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+               <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-[150px] justify-start"
+               >
+                  {selectedStatus ? (
+                     <>
+                        <selectedStatus.icon className="mr-2 size-4 shrink-0" />
+                        {selectedStatus.label}
+                     </>
+                  ) : (
+                     <>+ Set status</>
+                  )}
+               </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" side="right" align="start">
+               <Command>
+                  <CommandInput placeholder="Change status..." />
+                  <CommandList>
+                     <CommandEmpty>No results found.</CommandEmpty>
+                     <CommandGroup>
+                        {statuses.map((status) => (
+                           <CommandItem
+                              key={status.value}
+                              value={status.value}
+                              onSelect={(value) => {
+                                 setSelectedStatus(
+                                    statuses.find(
+                                       (priority) => priority.value === value,
+                                    ) || null,
+                                 )
+                                 setOpen(false)
+                              }}
+                           >
+                              <status.icon
+                                 className={ny(
+                                    "mr-2 size-4",
+                                    status.value === selectedStatus?.value
+                                       ? "opacity-100"
+                                       : "opacity-40",
+                                 )}
+                              />
+                              <span>{status.label}</span>
+                           </CommandItem>
+                        ))}
+                     </CommandGroup>
+                  </CommandList>
+               </Command>
+            </PopoverContent>
+         </Popover>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/combobox-responsive.tsx b/apps/web/registry/default/examples/combobox-responsive.tsx
new file mode 100644
index 00000000..bad1dbed
--- /dev/null
+++ b/apps/web/registry/default/examples/combobox-responsive.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+
+import { useMediaQuery } from "~/hooks/use-media-query"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/default/ui/command"
+import {
+   Drawer,
+   DrawerContent,
+   DrawerTrigger,
+} from "~/registry/default/ui/drawer"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+
+interface Status {
+   value: string
+   label: string
+}
+
+const statuses: Status[] = [
+   {
+      value: "backlog",
+      label: "Backlog",
+   },
+   {
+      value: "todo",
+      label: "Todo",
+   },
+   {
+      value: "in progress",
+      label: "In Progress",
+   },
+   {
+      value: "done",
+      label: "Done",
+   },
+   {
+      value: "canceled",
+      label: "Canceled",
+   },
+]
+
+export default function ComboBoxResponsive() {
+   const [open, setOpen] = React.useState(false)
+   const isDesktop = useMediaQuery("(min-width: 768px)")
+   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
+      null,
+   )
+
+   if (isDesktop) {
+      return (
+         <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+               <Button variant="outline" className="w-[150px] justify-start">
+                  {selectedStatus ? (
+                     <>{selectedStatus.label}</>
+                  ) : (
+                     <>+ Set status</>
+                  )}
+               </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[200px] p-0" align="start">
+               <StatusList
+                  setOpen={setOpen}
+                  setSelectedStatus={setSelectedStatus}
+               />
+            </PopoverContent>
+         </Popover>
+      )
+   }
+
+   return (
+      <Drawer open={open} onOpenChange={setOpen}>
+         <DrawerTrigger asChild>
+            <Button variant="outline" className="w-[150px] justify-start">
+               {selectedStatus ? (
+                  <>{selectedStatus.label}</>
+               ) : (
+                  <>+ Set status</>
+               )}
+            </Button>
+         </DrawerTrigger>
+         <DrawerContent>
+            <div className="mt-4 border-t">
+               <StatusList
+                  setOpen={setOpen}
+                  setSelectedStatus={setSelectedStatus}
+               />
+            </div>
+         </DrawerContent>
+      </Drawer>
+   )
+}
+
+function StatusList({
+   setOpen,
+   setSelectedStatus,
+}: {
+   setOpen: (open: boolean) => void
+   setSelectedStatus: (status: Status | null) => void
+}) {
+   return (
+      <Command>
+         <CommandInput placeholder="Filter status..." />
+         <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+               {statuses.map((status) => (
+                  <CommandItem
+                     key={status.value}
+                     value={status.value}
+                     onSelect={(value) => {
+                        setSelectedStatus(
+                           statuses.find(
+                              (priority) => priority.value === value,
+                           ) || null,
+                        )
+                        setOpen(false)
+                     }}
+                  >
+                     {status.label}
+                  </CommandItem>
+               ))}
+            </CommandGroup>
+         </CommandList>
+      </Command>
+   )
+}
diff --git a/apps/web/registry/default/examples/command-demo.tsx b/apps/web/registry/default/examples/command-demo.tsx
new file mode 100644
index 00000000..ad94448e
--- /dev/null
+++ b/apps/web/registry/default/examples/command-demo.tsx
@@ -0,0 +1,62 @@
+import {
+   Calculator,
+   Calendar,
+   CreditCard,
+   Settings,
+   Smile,
+   User,
+} from "lucide-react"
+
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+   CommandSeparator,
+   CommandShortcut,
+} from "~/registry/default/ui/command"
+
+export default function CommandDemo() {
+   return (
+      <Command className="rounded-lg border shadow-md">
+         <CommandInput placeholder="Type a command or search..." />
+         <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+               <CommandItem>
+                  <Calendar className="mr-2 size-4" />
+                  <span>Calendar</span>
+               </CommandItem>
+               <CommandItem>
+                  <Smile className="mr-2 size-4" />
+                  <span>Search Emoji</span>
+               </CommandItem>
+               <CommandItem>
+                  <Calculator className="mr-2 size-4" />
+                  <span>Calculator</span>
+               </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Settings">
+               <CommandItem>
+                  <User className="mr-2 size-4" />
+                  <span>Profile</span>
+                  <CommandShortcut>⌘P</CommandShortcut>
+               </CommandItem>
+               <CommandItem>
+                  <CreditCard className="mr-2 size-4" />
+                  <span>Billing</span>
+                  <CommandShortcut>⌘B</CommandShortcut>
+               </CommandItem>
+               <CommandItem>
+                  <Settings className="mr-2 size-4" />
+                  <span>Settings</span>
+                  <CommandShortcut>⌘S</CommandShortcut>
+               </CommandItem>
+            </CommandGroup>
+         </CommandList>
+      </Command>
+   )
+}
diff --git a/apps/web/registry/default/examples/command-dialog.tsx b/apps/web/registry/default/examples/command-dialog.tsx
new file mode 100644
index 00000000..4e8a1570
--- /dev/null
+++ b/apps/web/registry/default/examples/command-dialog.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import {
+   Calculator,
+   Calendar,
+   CreditCard,
+   Settings,
+   Smile,
+   User,
+} from "lucide-react"
+import * as React from "react"
+
+import {
+   CommandDialog,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+   CommandSeparator,
+   CommandShortcut,
+} from "~/registry/default/ui/command"
+
+export default function CommandDialogDemo() {
+   const [open, setOpen] = React.useState(false)
+
+   React.useEffect(() => {
+      const down = (e: KeyboardEvent) => {
+         if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault()
+            setOpen((open) => !open)
+         }
+      }
+
+      document.addEventListener("keydown", down)
+      return () => document.removeEventListener("keydown", down)
+   }, [])
+
+   return (
+      <>
+         <p className="text-muted-foreground text-sm">
+            Press{" "}
+            <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100">
+               <span className="text-xs">⌘</span>J
+            </kbd>
+         </p>
+         <CommandDialog open={open} onOpenChange={setOpen}>
+            <CommandInput placeholder="Type a command or search..." />
+            <CommandList>
+               <CommandEmpty>No results found.</CommandEmpty>
+               <CommandGroup heading="Suggestions">
+                  <CommandItem>
+                     <Calendar className="mr-2 size-4" />
+                     <span>Calendar</span>
+                  </CommandItem>
+                  <CommandItem>
+                     <Smile className="mr-2 size-4" />
+                     <span>Search Emoji</span>
+                  </CommandItem>
+                  <CommandItem>
+                     <Calculator className="mr-2 size-4" />
+                     <span>Calculator</span>
+                  </CommandItem>
+               </CommandGroup>
+               <CommandSeparator />
+               <CommandGroup heading="Settings">
+                  <CommandItem>
+                     <User className="mr-2 size-4" />
+                     <span>Profile</span>
+                     <CommandShortcut>⌘P</CommandShortcut>
+                  </CommandItem>
+                  <CommandItem>
+                     <CreditCard className="mr-2 size-4" />
+                     <span>Billing</span>
+                     <CommandShortcut>⌘B</CommandShortcut>
+                  </CommandItem>
+                  <CommandItem>
+                     <Settings className="mr-2 size-4" />
+                     <span>Settings</span>
+                     <CommandShortcut>⌘S</CommandShortcut>
+                  </CommandItem>
+               </CommandGroup>
+            </CommandList>
+         </CommandDialog>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/confetti-basic-cannon.tsx b/apps/web/registry/default/examples/confetti-basic-cannon.tsx
new file mode 100644
index 00000000..8946af70
--- /dev/null
+++ b/apps/web/registry/default/examples/confetti-basic-cannon.tsx
@@ -0,0 +1,9 @@
+import { ConfettiButton } from "~/registry/default/ui/confetti"
+
+export default function ConfettiButtonDemo() {
+   return (
+      <div className="relative">
+         <ConfettiButton>Confetti 🎉</ConfettiButton>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/confetti-custom-shapes.tsx b/apps/web/registry/default/examples/confetti-custom-shapes.tsx
new file mode 100644
index 00000000..77bce476
--- /dev/null
+++ b/apps/web/registry/default/examples/confetti-custom-shapes.tsx
@@ -0,0 +1,59 @@
+import confetti from "canvas-confetti"
+import { Button } from "~/components/ui/button"
+
+export default function ConfettiCustomShapes() {
+   const handleClick = () => {
+      const scalar = 2
+      const triangle = confetti.shapeFromPath({
+         path: "M0 10 L5 0 L10 10z",
+      })
+      const square = confetti.shapeFromPath({
+         path: "M0 0 L10 0 L10 10 L0 10 Z",
+      })
+      const coin = confetti.shapeFromPath({
+         path: "M5 0 A5 5 0 1 0 5 10 A5 5 0 1 0 5 0 Z",
+      })
+      const tree = confetti.shapeFromPath({
+         path: "M5 0 L10 10 L0 10 Z",
+      })
+
+      const defaults = {
+         spread: 360,
+         ticks: 60,
+         gravity: 0,
+         decay: 0.96,
+         startVelocity: 20,
+         shapes: [triangle, square, coin, tree],
+         scalar,
+      }
+
+      const shoot = () => {
+         confetti({
+            ...defaults,
+            particleCount: 30,
+         })
+
+         confetti({
+            ...defaults,
+            particleCount: 5,
+         })
+
+         confetti({
+            ...defaults,
+            particleCount: 15,
+            scalar: scalar / 2,
+            shapes: ["circle"],
+         })
+      }
+
+      setTimeout(shoot, 0)
+      setTimeout(shoot, 100)
+      setTimeout(shoot, 200)
+   }
+
+   return (
+      <div className="relative flex items-center justify-center">
+         <Button onClick={handleClick}>Trigger Shapes</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/confetti-demo.tsx b/apps/web/registry/default/examples/confetti-demo.tsx
new file mode 100644
index 00000000..c98e9735
--- /dev/null
+++ b/apps/web/registry/default/examples/confetti-demo.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { useRef } from "react"
+
+import type { ConfettiRef } from "~/registry/default/ui/confetti"
+import Confetti from "~/registry/default/ui/confetti"
+
+export default function ConfettiDemo() {
+   const confettiRef = useRef<ConfettiRef>(null)
+
+   return (
+      <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Confetti
+         </span>
+
+         <Confetti
+            ref={confettiRef}
+            className="absolute left-0 top-0 z-0 size-full"
+            onMouseEnter={() => {
+               confettiRef.current?.fire({})
+            }}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/confetti-emoji.tsx b/apps/web/registry/default/examples/confetti-emoji.tsx
new file mode 100644
index 00000000..28d0dfdb
--- /dev/null
+++ b/apps/web/registry/default/examples/confetti-emoji.tsx
@@ -0,0 +1,48 @@
+import confetti from "canvas-confetti"
+import { Button } from "~/components/ui/button"
+
+export default function ConfettiEmoji() {
+   const handleClick = () => {
+      const scalar = 2
+      const unicorn = confetti.shapeFromText({ text: "🦄", scalar })
+
+      const defaults = {
+         spread: 360,
+         ticks: 60,
+         gravity: 0,
+         decay: 0.96,
+         startVelocity: 20,
+         shapes: [unicorn],
+         scalar,
+      }
+
+      const shoot = () => {
+         confetti({
+            ...defaults,
+            particleCount: 30,
+         })
+
+         confetti({
+            ...defaults,
+            particleCount: 5,
+         })
+
+         confetti({
+            ...defaults,
+            particleCount: 15,
+            scalar: scalar / 2,
+            shapes: ["circle"],
+         })
+      }
+
+      setTimeout(shoot, 0)
+      setTimeout(shoot, 100)
+      setTimeout(shoot, 200)
+   }
+
+   return (
+      <div className="relative justify-center">
+         <Button onClick={handleClick}>Trigger Emoji</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/confetti-fireworks.tsx b/apps/web/registry/default/examples/confetti-fireworks.tsx
new file mode 100644
index 00000000..bf4bfa06
--- /dev/null
+++ b/apps/web/registry/default/examples/confetti-fireworks.tsx
@@ -0,0 +1,37 @@
+import confetti from "canvas-confetti"
+import { Button } from "~/components/ui/button"
+
+export default function ConfettiFireworks() {
+   const handleClick = () => {
+      const duration = 5 * 1000
+      const animationEnd = Date.now() + duration
+      const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
+
+      const randomInRange = (min: number, max: number) =>
+         Math.random() * (max - min) + min
+
+      const interval = window.setInterval(() => {
+         const timeLeft = animationEnd - Date.now()
+
+         if (timeLeft <= 0) return clearInterval(interval)
+
+         const particleCount = 50 * (timeLeft / duration)
+         confetti({
+            ...defaults,
+            particleCount,
+            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
+         })
+         confetti({
+            ...defaults,
+            particleCount,
+            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
+         })
+      }, 250)
+   }
+
+   return (
+      <div className="relative">
+         <Button onClick={handleClick}>Trigger Fireworks</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/confetti-hover.tsx b/apps/web/registry/default/examples/confetti-hover.tsx
new file mode 100644
index 00000000..2444d81a
--- /dev/null
+++ b/apps/web/registry/default/examples/confetti-hover.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { useRef } from "react"
+import type { ConfettiRef } from "~/registry/default/ui/confetti"
+import Confetti from "~/registry/default/ui/confetti"
+
+export default function ConfettiBasicCannon() {
+   const confettiRef = useRef<ConfettiRef>(null)
+
+   return (
+      <div className="bg-background relative flex h-[500px] w-full max-w-lg flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Confetti
+         </span>
+
+         <Confetti
+            ref={confettiRef}
+            className="absolute left-0 top-0 z-0 size-full"
+            onMouseEnter={() => {
+               confettiRef.current?.fire({})
+            }}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/confetti-random-direction.tsx b/apps/web/registry/default/examples/confetti-random-direction.tsx
new file mode 100644
index 00000000..c830dc32
--- /dev/null
+++ b/apps/web/registry/default/examples/confetti-random-direction.tsx
@@ -0,0 +1,17 @@
+import { ConfettiButton } from "~/registry/default/ui/confetti"
+
+export default function ConfettiButtonDemo() {
+   return (
+      <div className="relative">
+         <ConfettiButton
+            options={{
+               get angle() {
+                  return Math.random() * 360
+               },
+            }}
+         >
+            Random Confetti 🎉
+         </ConfettiButton>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/confetti-side-cannons.tsx b/apps/web/registry/default/examples/confetti-side-cannons.tsx
new file mode 100644
index 00000000..b902b517
--- /dev/null
+++ b/apps/web/registry/default/examples/confetti-side-cannons.tsx
@@ -0,0 +1,40 @@
+import confetti from "canvas-confetti"
+import { Button } from "~/components/ui/button"
+
+export default function ConfettiSideCannons() {
+   const handleClick = () => {
+      const end = Date.now() + 3 * 1000 // 3 seconds
+      const colors = ["#a786ff", "#fd8bbc", "#eca184", "#f8deb1"]
+
+      const frame = () => {
+         if (Date.now() > end) return
+
+         confetti({
+            particleCount: 2,
+            angle: 60,
+            spread: 55,
+            startVelocity: 60,
+            origin: { x: 0, y: 0.5 },
+            colors,
+         })
+         confetti({
+            particleCount: 2,
+            angle: 120,
+            spread: 55,
+            startVelocity: 60,
+            origin: { x: 1, y: 0.5 },
+            colors,
+         })
+
+         requestAnimationFrame(frame)
+      }
+
+      frame()
+   }
+
+   return (
+      <div className="relative">
+         <Button onClick={handleClick}>Trigger Side Cannons</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/confetti-stars.tsx b/apps/web/registry/default/examples/confetti-stars.tsx
new file mode 100644
index 00000000..5893e4c9
--- /dev/null
+++ b/apps/web/registry/default/examples/confetti-stars.tsx
@@ -0,0 +1,41 @@
+import confetti from "canvas-confetti"
+import { Button } from "~/components/ui/button"
+
+export default function ConfettiStars() {
+   const handleClick = () => {
+      const defaults = {
+         spread: 360,
+         ticks: 50,
+         gravity: 0,
+         decay: 0.94,
+         startVelocity: 30,
+         colors: ["#FFE400", "#FFBD00", "#E89400", "#FFCA6C", "#FDFFB8"],
+      }
+
+      const shoot = () => {
+         confetti({
+            ...defaults,
+            particleCount: 40,
+            scalar: 1.2,
+            shapes: ["star"],
+         })
+
+         confetti({
+            ...defaults,
+            particleCount: 10,
+            scalar: 0.75,
+            shapes: ["circle"],
+         })
+      }
+
+      setTimeout(shoot, 0)
+      setTimeout(shoot, 100)
+      setTimeout(shoot, 200)
+   }
+
+   return (
+      <div className="relative">
+         <Button onClick={handleClick}>Trigger Stars</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/context-menu-demo.tsx b/apps/web/registry/default/examples/context-menu-demo.tsx
new file mode 100644
index 00000000..b617f6f4
--- /dev/null
+++ b/apps/web/registry/default/examples/context-menu-demo.tsx
@@ -0,0 +1,69 @@
+import {
+   ContextMenu,
+   ContextMenuCheckboxItem,
+   ContextMenuContent,
+   ContextMenuItem,
+   ContextMenuLabel,
+   ContextMenuRadioGroup,
+   ContextMenuRadioItem,
+   ContextMenuSeparator,
+   ContextMenuShortcut,
+   ContextMenuSub,
+   ContextMenuSubContent,
+   ContextMenuSubTrigger,
+   ContextMenuTrigger,
+} from "~/registry/default/ui/context-menu"
+
+export default function ContextMenuDemo() {
+   return (
+      <ContextMenu>
+         <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+            Right click here
+         </ContextMenuTrigger>
+         <ContextMenuContent className="w-64">
+            <ContextMenuItem inset>
+               Back
+               <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem inset disabled>
+               Forward
+               <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem inset>
+               Reload
+               <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuSub>
+               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+               <ContextMenuSubContent className="w-48">
+                  <ContextMenuItem>
+                     Save Page As...
+                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+                  </ContextMenuItem>
+                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+                  <ContextMenuItem>Name Window...</ContextMenuItem>
+                  <ContextMenuSeparator />
+                  <ContextMenuItem>Developer Tools</ContextMenuItem>
+               </ContextMenuSubContent>
+            </ContextMenuSub>
+            <ContextMenuSeparator />
+            <ContextMenuCheckboxItem checked>
+               Show Bookmarks Bar
+               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+            </ContextMenuCheckboxItem>
+            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+            <ContextMenuSeparator />
+            <ContextMenuRadioGroup value="pedro">
+               <ContextMenuLabel inset>People</ContextMenuLabel>
+               <ContextMenuSeparator />
+               <ContextMenuRadioItem value="pedro">
+                  Pedro Duarte
+               </ContextMenuRadioItem>
+               <ContextMenuRadioItem value="colm">
+                  Colm Tuite
+               </ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+         </ContextMenuContent>
+      </ContextMenu>
+   )
+}
diff --git a/apps/web/registry/default/examples/cool-mode-custom.tsx b/apps/web/registry/default/examples/cool-mode-custom.tsx
new file mode 100644
index 00000000..0678e3c0
--- /dev/null
+++ b/apps/web/registry/default/examples/cool-mode-custom.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+import { Button } from "~/components/ui/button"
+import { CoolMode } from "~/registry/default/ui/cool-mode"
+
+export default function CoolModeCustom() {
+   return (
+      <div className="relative justify-center">
+         <CoolMode
+            options={{
+               particle:
+                  "https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg",
+            }}
+         >
+            <Button>Click Me!</Button>
+         </CoolMode>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/cool-mode-demo.tsx b/apps/web/registry/default/examples/cool-mode-demo.tsx
new file mode 100644
index 00000000..ff1b8408
--- /dev/null
+++ b/apps/web/registry/default/examples/cool-mode-demo.tsx
@@ -0,0 +1,13 @@
+import React from "react"
+import { Button } from "~/components/ui/button"
+import { CoolMode } from "~/registry/default/ui/cool-mode"
+
+export default function CoolModeDemo() {
+   return (
+      <div className="relative justify-center">
+         <CoolMode>
+            <Button>Click Me!</Button>
+         </CoolMode>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/data-table-demo.tsx b/apps/web/registry/default/examples/data-table-demo.tsx
new file mode 100644
index 00000000..b958ca8e
--- /dev/null
+++ b/apps/web/registry/default/examples/data-table-demo.tsx
@@ -0,0 +1,322 @@
+"use client"
+
+import type {
+   ColumnDef,
+   ColumnFiltersState,
+   SortingState,
+   VisibilityState,
+} from "@tanstack/react-table"
+import {
+   flexRender,
+   getCoreRowModel,
+   getFilteredRowModel,
+   getPaginationRowModel,
+   getSortedRowModel,
+   useReactTable,
+} from "@tanstack/react-table"
+import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
+import * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import { Checkbox } from "~/registry/default/ui/checkbox"
+import {
+   DropdownMenu,
+   DropdownMenuCheckboxItem,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/default/ui/dropdown-menu"
+import { Input } from "~/registry/default/ui/input"
+import {
+   Table,
+   TableBody,
+   TableCell,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/default/ui/table"
+
+const data: Payment[] = [
+   {
+      id: "m5gr84i9",
+      amount: 316,
+      status: "success",
+      email: "ken99@yahoo.com",
+   },
+   {
+      id: "3u1reuv4",
+      amount: 242,
+      status: "success",
+      email: "Abe45@gmail.com",
+   },
+   {
+      id: "derv1ws0",
+      amount: 837,
+      status: "processing",
+      email: "Monserrat44@gmail.com",
+   },
+   {
+      id: "5kma53ae",
+      amount: 874,
+      status: "success",
+      email: "Silas22@gmail.com",
+   },
+   {
+      id: "bhqecj4p",
+      amount: 721,
+      status: "failed",
+      email: "carmella@hotmail.com",
+   },
+]
+
+export interface Payment {
+   id: string
+   amount: number
+   status: "pending" | "processing" | "success" | "failed"
+   email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+   {
+      id: "select",
+      header: ({ table }) => (
+         <Checkbox
+            checked={
+               table.getIsAllPageRowsSelected() ||
+               (table.getIsSomePageRowsSelected() && "indeterminate")
+            }
+            onCheckedChange={(value) =>
+               table.toggleAllPageRowsSelected(!!value)
+            }
+            aria-label="Select all"
+         />
+      ),
+      cell: ({ row }) => (
+         <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+         />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+   },
+   {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ row }) => (
+         <div className="capitalize">{row.getValue("status")}</div>
+      ),
+   },
+   {
+      accessorKey: "email",
+      header: ({ column }) => {
+         return (
+            <Button
+               variant="ghost"
+               onClick={() =>
+                  column.toggleSorting(column.getIsSorted() === "asc")
+               }
+            >
+               Email
+               <ArrowUpDown className="ml-2 size-4" />
+            </Button>
+         )
+      },
+      cell: ({ row }) => (
+         <div className="lowercase">{row.getValue("email")}</div>
+      ),
+   },
+   {
+      accessorKey: "amount",
+      header: () => <div className="text-right">Amount</div>,
+      cell: ({ row }) => {
+         const amount = Number.parseFloat(row.getValue("amount"))
+
+         // Format the amount as a dollar amount
+         const formatted = new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+         }).format(amount)
+
+         return <div className="text-right font-medium">{formatted}</div>
+      },
+   },
+   {
+      id: "actions",
+      enableHiding: false,
+      cell: ({ row }) => {
+         const payment = row.original
+
+         return (
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="size-8 p-0">
+                     <span className="sr-only">Open menu</span>
+                     <MoreHorizontal className="size-4" />
+                  </Button>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                  <DropdownMenuItem
+                     onClick={() => navigator.clipboard.writeText(payment.id)}
+                  >
+                     Copy payment ID
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>View customer</DropdownMenuItem>
+                  <DropdownMenuItem>View payment details</DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         )
+      },
+   },
+]
+
+export default function DataTableDemo() {
+   const [sorting, setSorting] = React.useState<SortingState>([])
+   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+      [],
+   )
+   const [columnVisibility, setColumnVisibility] =
+      React.useState<VisibilityState>({})
+   const [rowSelection, setRowSelection] = React.useState({})
+
+   const table = useReactTable({
+      data,
+      columns,
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setColumnFilters,
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      onColumnVisibilityChange: setColumnVisibility,
+      onRowSelectionChange: setRowSelection,
+      state: {
+         sorting,
+         columnFilters,
+         columnVisibility,
+         rowSelection,
+      },
+   })
+
+   return (
+      <div className="w-full">
+         <div className="flex items-center py-4">
+            <Input
+               placeholder="Filter emails..."
+               value={
+                  (table.getColumn("email")?.getFilterValue() as string) ?? ""
+               }
+               onChange={(event) =>
+                  table.getColumn("email")?.setFilterValue(event.target.value)
+               }
+               className="max-w-sm"
+            />
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="ml-auto">
+                     Columns <ChevronDown className="ml-2 size-4" />
+                  </Button>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent align="end">
+                  {table
+                     .getAllColumns()
+                     .filter((column) => column.getCanHide())
+                     .map((column) => {
+                        return (
+                           <DropdownMenuCheckboxItem
+                              key={column.id}
+                              className="capitalize"
+                              checked={column.getIsVisible()}
+                              onCheckedChange={(value) =>
+                                 column.toggleVisibility(!!value)
+                              }
+                           >
+                              {column.id}
+                           </DropdownMenuCheckboxItem>
+                        )
+                     })}
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </div>
+         <div className="rounded-md border">
+            <Table>
+               <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                     <TableRow key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => {
+                           return (
+                              <TableHead key={header.id}>
+                                 {header.isPlaceholder
+                                    ? null
+                                    : flexRender(
+                                         header.column.columnDef.header,
+                                         header.getContext(),
+                                      )}
+                              </TableHead>
+                           )
+                        })}
+                     </TableRow>
+                  ))}
+               </TableHeader>
+               <TableBody>
+                  {table.getRowModel().rows?.length ? (
+                     table.getRowModel().rows.map((row) => (
+                        <TableRow
+                           key={row.id}
+                           data-state={row.getIsSelected() && "selected"}
+                        >
+                           {row.getVisibleCells().map((cell) => (
+                              <TableCell key={cell.id}>
+                                 {flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext(),
+                                 )}
+                              </TableCell>
+                           ))}
+                        </TableRow>
+                     ))
+                  ) : (
+                     <TableRow>
+                        <TableCell
+                           colSpan={columns.length}
+                           className="h-24 text-center"
+                        >
+                           No results.
+                        </TableCell>
+                     </TableRow>
+                  )}
+               </TableBody>
+            </Table>
+         </div>
+         <div className="flex items-center justify-end space-x-2 py-4">
+            <div className="text-muted-foreground flex-1 text-sm">
+               {table.getFilteredSelectedRowModel().rows.length} of{" "}
+               {table.getFilteredRowModel().rows.length} row(s) selected.
+            </div>
+            <div className="space-x-2">
+               <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => table.previousPage()}
+                  disabled={!table.getCanPreviousPage()}
+               >
+                  Previous
+               </Button>
+               <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => table.nextPage()}
+                  disabled={!table.getCanNextPage()}
+               >
+                  Next
+               </Button>
+            </div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/date-picker-demo.tsx b/apps/web/registry/default/examples/date-picker-demo.tsx
new file mode 100644
index 00000000..c9ed38f9
--- /dev/null
+++ b/apps/web/registry/default/examples/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import { Calendar } from "~/registry/default/ui/calendar"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+
+export default function DatePickerDemo() {
+   const [date, setDate] = React.useState<Date>()
+
+   return (
+      <Popover>
+         <PopoverTrigger asChild>
+            <Button
+               variant="outline"
+               className={ny(
+                  "w-[280px] justify-start text-left font-normal",
+                  !date && "text-muted-foreground",
+               )}
+            >
+               <CalendarIcon className="mr-2 size-4" />
+               {date ? format(date, "PPP") : <span>Pick a date</span>}
+            </Button>
+         </PopoverTrigger>
+         <PopoverContent className="w-auto p-0">
+            <Calendar
+               mode="single"
+               selected={date}
+               onSelect={setDate}
+               initialFocus
+            />
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/default/examples/date-picker-form.tsx b/apps/web/registry/default/examples/date-picker-form.tsx
new file mode 100644
index 00000000..070bccc0
--- /dev/null
+++ b/apps/web/registry/default/examples/date-picker-form.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import { Calendar } from "~/registry/default/ui/calendar"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+   dob: z.date({
+      required_error: "A date of birth is required.",
+   }),
+})
+
+export default function DatePickerForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+               control={form.control}
+               name="dob"
+               render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                     <FormLabel>Date of birth</FormLabel>
+                     <Popover>
+                        <PopoverTrigger asChild>
+                           <FormControl>
+                              <Button
+                                 variant="outline"
+                                 className={ny(
+                                    "w-[240px] pl-3 text-left font-normal",
+                                    !field.value && "text-muted-foreground",
+                                 )}
+                              >
+                                 {field.value ? (
+                                    format(field.value, "PPP")
+                                 ) : (
+                                    <span>Pick a date</span>
+                                 )}
+                                 <CalendarIcon className="ml-auto size-4 opacity-50" />
+                              </Button>
+                           </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                           <Calendar
+                              mode="single"
+                              selected={field.value}
+                              onSelect={field.onChange}
+                              disabled={(date) =>
+                                 date > new Date() ||
+                                 date < new Date("1900-01-01")
+                              }
+                              initialFocus
+                           />
+                        </PopoverContent>
+                     </Popover>
+                     <FormDescription>
+                        Your date of birth is used to calculate your age.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/date-picker-with-presets.tsx b/apps/web/registry/default/examples/date-picker-with-presets.tsx
new file mode 100644
index 00000000..612d83c8
--- /dev/null
+++ b/apps/web/registry/default/examples/date-picker-with-presets.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import { Calendar } from "~/registry/default/ui/calendar"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/default/ui/select"
+
+export default function DatePickerWithPresets() {
+   const [date, setDate] = React.useState<Date>()
+
+   return (
+      <Popover>
+         <PopoverTrigger asChild>
+            <Button
+               variant="outline"
+               className={ny(
+                  "w-[280px] justify-start text-left font-normal",
+                  !date && "text-muted-foreground",
+               )}
+            >
+               <CalendarIcon className="mr-2 size-4" />
+               {date ? format(date, "PPP") : <span>Pick a date</span>}
+            </Button>
+         </PopoverTrigger>
+         <PopoverContent className="flex w-auto flex-col space-y-2 p-2">
+            <Select
+               onValueChange={(value) =>
+                  setDate(addDays(new Date(), Number.parseInt(value)))
+               }
+            >
+               <SelectTrigger>
+                  <SelectValue placeholder="Select" />
+               </SelectTrigger>
+               <SelectContent position="popper">
+                  <SelectItem value="0">Today</SelectItem>
+                  <SelectItem value="1">Tomorrow</SelectItem>
+                  <SelectItem value="3">In 3 days</SelectItem>
+                  <SelectItem value="7">In a week</SelectItem>
+               </SelectContent>
+            </Select>
+            <div className="rounded-md border">
+               <Calendar mode="single" selected={date} onSelect={setDate} />
+            </div>
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/default/examples/date-picker-with-range-presets-internal.tsx b/apps/web/registry/default/examples/date-picker-with-range-presets-internal.tsx
new file mode 100644
index 00000000..149c8f5f
--- /dev/null
+++ b/apps/web/registry/default/examples/date-picker-with-range-presets-internal.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import * as React from "react"
+import type { DateRange } from "react-day-picker"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import { Calendar } from "~/registry/default/ui/calendar"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+
+export default function DatePickerWithRange({
+   className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+   const [date, setDate] = React.useState<DateRange | undefined>({
+      from: new Date(2022, 0, 20),
+      to: addDays(new Date(2022, 0, 20), 20),
+   })
+
+   const handlePresetSelect = (value: string) => {
+      switch (value) {
+         case "last7Days":
+            setDate({
+               from: addDays(new Date(), -7),
+               to: new Date(),
+            })
+            break
+         case "last30Days":
+            setDate({
+               from: addDays(new Date(), -30),
+               to: new Date(),
+            })
+            break
+         case "monthToDate":
+            setDate({
+               from: new Date(
+                  new Date().getFullYear(),
+                  new Date().getMonth(),
+                  1,
+               ),
+               to: new Date(),
+            })
+            break
+         case "yearToDate":
+            setDate({
+               from: new Date(new Date().getFullYear(), 0, 1),
+               to: new Date(),
+            })
+            break
+         default:
+            break
+      }
+   }
+
+   return (
+      <div className={ny("inline-flex", className)}>
+         <Popover>
+            <PopoverTrigger asChild>
+               <Button
+                  id="date"
+                  variant="outline"
+                  className={ny(
+                     "w-[300px] justify-start text-left font-normal",
+                     !date && "text-muted-foreground",
+                  )}
+               >
+                  <CalendarIcon className="mr-2 size-4" />
+                  {date?.from ? (
+                     date.to ? (
+                        <>
+                           {format(date.from, "LLL dd, y")} -{" "}
+                           {format(date.to, "LLL dd, y")}
+                        </>
+                     ) : (
+                        format(date.from, "LLL dd, y")
+                     )
+                  ) : (
+                     <span>Pick a date</span>
+                  )}
+               </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+               <div className="flex w-full justify-evenly p-2">
+                  <Button
+                     variant="outline"
+                     onClick={() => handlePresetSelect("last7Days")}
+                  >
+                     Last 7 Days
+                  </Button>
+                  <Button
+                     variant="outline"
+                     onClick={() => handlePresetSelect("last30Days")}
+                  >
+                     Last 30 Days
+                  </Button>
+                  <Button
+                     variant="outline"
+                     onClick={() => handlePresetSelect("monthToDate")}
+                  >
+                     Month to Date
+                  </Button>
+                  <Button
+                     variant="outline"
+                     onClick={() => handlePresetSelect("yearToDate")}
+                  >
+                     Year to Date
+                  </Button>
+               </div>
+               <div className="border-t">
+                  <Calendar
+                     initialFocus
+                     mode="range"
+                     defaultMonth={date?.from}
+                     selected={date}
+                     onSelect={setDate}
+                     numberOfMonths={2}
+                  />
+               </div>
+            </PopoverContent>
+         </Popover>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/date-picker-with-range.tsx b/apps/web/registry/default/examples/date-picker-with-range.tsx
new file mode 100644
index 00000000..e77f838a
--- /dev/null
+++ b/apps/web/registry/default/examples/date-picker-with-range.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import * as React from "react"
+import type { DateRange } from "react-day-picker"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import { Calendar } from "~/registry/default/ui/calendar"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+
+export default function DatePickerWithRange({
+   className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+   const [date, setDate] = React.useState<DateRange | undefined>({
+      from: new Date(2022, 0, 20),
+      to: addDays(new Date(2022, 0, 20), 20),
+   })
+
+   return (
+      <div className={ny("grid gap-2", className)}>
+         <Popover>
+            <PopoverTrigger asChild>
+               <Button
+                  id="date"
+                  variant="outline"
+                  className={ny(
+                     "w-[300px] justify-start text-left font-normal",
+                     !date && "text-muted-foreground",
+                  )}
+               >
+                  <CalendarIcon className="mr-2 size-4" />
+                  {date?.from ? (
+                     date.to ? (
+                        <>
+                           {format(date.from, "LLL dd, y")} -{" "}
+                           {format(date.to, "LLL dd, y")}
+                        </>
+                     ) : (
+                        format(date.from, "LLL dd, y")
+                     )
+                  ) : (
+                     <span>Pick a date</span>
+                  )}
+               </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+               <Calendar
+                  initialFocus
+                  mode="range"
+                  defaultMonth={date?.from}
+                  selected={date}
+                  onSelect={setDate}
+                  numberOfMonths={2}
+               />
+            </PopoverContent>
+         </Popover>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/dialog-close-button.tsx b/apps/web/registry/default/examples/dialog-close-button.tsx
new file mode 100644
index 00000000..b3e9a6b4
--- /dev/null
+++ b/apps/web/registry/default/examples/dialog-close-button.tsx
@@ -0,0 +1,56 @@
+import { Copy } from "lucide-react"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Dialog,
+   DialogClose,
+   DialogContent,
+   DialogDescription,
+   DialogFooter,
+   DialogHeader,
+   DialogTitle,
+   DialogTrigger,
+} from "~/registry/default/ui/dialog"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+
+export default function DialogCloseButton() {
+   return (
+      <Dialog>
+         <DialogTrigger asChild>
+            <Button variant="outline">Share</Button>
+         </DialogTrigger>
+         <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+               <DialogTitle>Share link</DialogTitle>
+               <DialogDescription>
+                  Anyone who has this link will be able to view this.
+               </DialogDescription>
+            </DialogHeader>
+            <div className="flex items-center space-x-2">
+               <div className="grid flex-1 gap-2">
+                  <Label htmlFor="link" className="sr-only">
+                     Link
+                  </Label>
+                  <Input
+                     id="link"
+                     defaultValue="https://nyxbui.design/docs/installation"
+                     readOnly
+                  />
+               </div>
+               <Button type="submit" size="sm" className="px-3">
+                  <span className="sr-only">Copy</span>
+                  <Copy className="size-4" />
+               </Button>
+            </div>
+            <DialogFooter className="sm:justify-start">
+               <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                     Close
+                  </Button>
+               </DialogClose>
+            </DialogFooter>
+         </DialogContent>
+      </Dialog>
+   )
+}
diff --git a/apps/web/registry/default/examples/dialog-demo.tsx b/apps/web/registry/default/examples/dialog-demo.tsx
new file mode 100644
index 00000000..18319cb7
--- /dev/null
+++ b/apps/web/registry/default/examples/dialog-demo.tsx
@@ -0,0 +1,56 @@
+import { Button } from "~/registry/default/ui/button"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogFooter,
+   DialogHeader,
+   DialogTitle,
+   DialogTrigger,
+} from "~/registry/default/ui/dialog"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+
+export default function DialogDemo() {
+   return (
+      <Dialog>
+         <DialogTrigger asChild>
+            <Button variant="outline">Edit Profile</Button>
+         </DialogTrigger>
+         <DialogContent className="sm:max-w-[425px]">
+            <DialogHeader>
+               <DialogTitle>Edit profile</DialogTitle>
+               <DialogDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+               </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="name" className="text-right">
+                     Name
+                  </Label>
+                  <Input
+                     id="name"
+                     defaultValue="Pedro Duarte"
+                     className="col-span-3"
+                  />
+               </div>
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="username" className="text-right">
+                     Username
+                  </Label>
+                  <Input
+                     id="username"
+                     defaultValue="~peduarte"
+                     className="col-span-3"
+                  />
+               </div>
+            </div>
+            <DialogFooter>
+               <Button type="submit">Save changes</Button>
+            </DialogFooter>
+         </DialogContent>
+      </Dialog>
+   )
+}
diff --git a/apps/web/registry/default/examples/dock-demo-2.tsx b/apps/web/registry/default/examples/dock-demo-2.tsx
new file mode 100644
index 00000000..96318d58
--- /dev/null
+++ b/apps/web/registry/default/examples/dock-demo-2.tsx
@@ -0,0 +1,139 @@
+import type React from "react"
+
+import { Dock, DockIcon } from "~/registry/default/ui/dock"
+
+export type IconProps = React.HTMLAttributes<SVGElement>
+
+export default function DockDemo() {
+   return (
+      <div className="relative">
+         <Dock direction="middle">
+            <DockIcon>
+               <Icons.gitHub className="size-6" />
+            </DockIcon>
+            <DockIcon>
+               <Icons.googleDrive className="size-6" />
+            </DockIcon>
+            <DockIcon>
+               <Icons.notion className="size-6" />
+            </DockIcon>
+            <DockIcon>
+               <Icons.whatsapp className="size-6" />
+            </DockIcon>
+         </Dock>
+      </div>
+   )
+}
+
+const Icons = {
+   gitHub: (props: IconProps) => (
+      <svg viewBox="0 0 438.549 438.549" {...props}>
+         <path
+            fill="currentColor"
+            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+         ></path>
+      </svg>
+   ),
+   notion: (props: IconProps) => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 100 100"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+         {...props}
+      >
+         <path
+            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+            fill="#fff"
+         />
+         <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+            fill="#000"
+         />
+      </svg>
+   ),
+   googleDrive: (props: IconProps) => (
+      <svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg" {...props}>
+         <path
+            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+            fill="#0066da"
+         />
+         <path
+            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+            fill="#00ac47"
+         />
+         <path
+            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335"
+         />
+         <path
+            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+            fill="#00832d"
+         />
+         <path
+            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+            fill="#2684fc"
+         />
+         <path
+            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00"
+         />
+      </svg>
+   ),
+   whatsapp: (props: IconProps) => (
+      <svg
+         xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 175.216 175.552"
+         {...props}
+      >
+         <defs>
+            <linearGradient
+               id="b"
+               x1="85.915"
+               x2="86.535"
+               y1="32.567"
+               y2="137.092"
+               gradientUnits="userSpaceOnUse"
+            >
+               <stop offset="0" stopColor="#57d163" />
+               <stop offset="1" stopColor="#23b33a" />
+            </linearGradient>
+            <filter
+               id="a"
+               width="1.115"
+               height="1.114"
+               x="-.057"
+               y="-.057"
+               colorInterpolationFilters="sRGB"
+            >
+               <feGaussianBlur stdDeviation="3.531" />
+            </filter>
+         </defs>
+         <path
+            fill="#b3b3b3"
+            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
+            filter="url(#a)"
+         />
+         <path
+            fill="#fff"
+            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
+         />
+         <path
+            fill="url(#linearGradient1780)"
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
+         />
+         <path
+            fill="url(#b)"
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
+         />
+         <path
+            fill="#fff"
+            fillRule="evenodd"
+            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
+         />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/default/examples/dock-demo-3.tsx b/apps/web/registry/default/examples/dock-demo-3.tsx
new file mode 100644
index 00000000..7b8b1a2f
--- /dev/null
+++ b/apps/web/registry/default/examples/dock-demo-3.tsx
@@ -0,0 +1,139 @@
+import type React from "react"
+
+import { Dock, DockIcon } from "~/registry/default/ui/dock"
+
+export type IconProps = React.HTMLAttributes<SVGElement>
+
+export default function DockDemo() {
+   return (
+      <div className="relative">
+         <Dock magnification={60} distance={100}>
+            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
+               <Icons.gitHub className="size-full" />
+            </DockIcon>
+            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
+               <Icons.googleDrive className="size-full" />
+            </DockIcon>
+            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
+               <Icons.notion className="size-full" />
+            </DockIcon>
+            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
+               <Icons.whatsapp className="size-full" />
+            </DockIcon>
+         </Dock>
+      </div>
+   )
+}
+
+const Icons = {
+   gitHub: (props: IconProps) => (
+      <svg viewBox="0 0 438.549 438.549" {...props}>
+         <path
+            fill="currentColor"
+            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+         ></path>
+      </svg>
+   ),
+   notion: (props: IconProps) => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 100 100"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+         {...props}
+      >
+         <path
+            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+            fill="#fff"
+         />
+         <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+            fill="#000"
+         />
+      </svg>
+   ),
+   googleDrive: (props: IconProps) => (
+      <svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg" {...props}>
+         <path
+            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+            fill="#0066da"
+         />
+         <path
+            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+            fill="#00ac47"
+         />
+         <path
+            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335"
+         />
+         <path
+            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+            fill="#00832d"
+         />
+         <path
+            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+            fill="#2684fc"
+         />
+         <path
+            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00"
+         />
+      </svg>
+   ),
+   whatsapp: (props: IconProps) => (
+      <svg
+         xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 175.216 175.552"
+         {...props}
+      >
+         <defs>
+            <linearGradient
+               id="b"
+               x1="85.915"
+               x2="86.535"
+               y1="32.567"
+               y2="137.092"
+               gradientUnits="userSpaceOnUse"
+            >
+               <stop offset="0" stopColor="#57d163" />
+               <stop offset="1" stopColor="#23b33a" />
+            </linearGradient>
+            <filter
+               id="a"
+               width="1.115"
+               height="1.114"
+               x="-.057"
+               y="-.057"
+               colorInterpolationFilters="sRGB"
+            >
+               <feGaussianBlur stdDeviation="3.531" />
+            </filter>
+         </defs>
+         <path
+            fill="#b3b3b3"
+            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
+            filter="url(#a)"
+         />
+         <path
+            fill="#fff"
+            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
+         />
+         <path
+            fill="url(#linearGradient1780)"
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
+         />
+         <path
+            fill="url(#b)"
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
+         />
+         <path
+            fill="#fff"
+            fillRule="evenodd"
+            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
+         />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/default/examples/dock-demo.tsx b/apps/web/registry/default/examples/dock-demo.tsx
new file mode 100644
index 00000000..ed1ee9f7
--- /dev/null
+++ b/apps/web/registry/default/examples/dock-demo.tsx
@@ -0,0 +1,166 @@
+import { CalendarIcon, HomeIcon, MailIcon, PencilIcon } from "lucide-react"
+import Link from "next/link"
+import type React from "react"
+
+import { ModeToggle } from "~/components/mode-toggle"
+import { buttonVariants } from "~/components/ui/button"
+import { Separator } from "~/components/ui/separator"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/components/ui/tooltip"
+import { ny } from "~/lib/utils"
+import { Dock, DockIcon } from "~/registry/default/ui/dock"
+
+export type IconProps = React.HTMLAttributes<SVGElement>
+
+const Icons = {
+   calendar: (props: IconProps) => <CalendarIcon {...props} />,
+   email: (props: IconProps) => <MailIcon {...props} />,
+   linkedin: (props: IconProps) => (
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+         <title>LinkedIn</title>
+         <path
+            fill="currentColor"
+            d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+         />
+      </svg>
+   ),
+   x: (props: IconProps) => (
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+         <title>X</title>
+         <path
+            fill="currentColor"
+            d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
+         />
+      </svg>
+   ),
+   youtube: (props: IconProps) => (
+      <svg
+         width="32px"
+         height="32px"
+         viewBox="0 0 32 32"
+         fill="currentColor"
+         xmlns="http://www.w3.org/2000/svg"
+         {...props}
+      >
+         <title>youtube</title>
+         <path d="M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z" />
+      </svg>
+   ),
+   github: (props: IconProps) => (
+      <svg viewBox="0 0 438.549 438.549" {...props}>
+         <path
+            fill="currentColor"
+            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+         ></path>
+      </svg>
+   ),
+}
+
+const DATA = {
+   navbar: [
+      { href: "#", icon: HomeIcon, label: "Home" },
+      { href: "#", icon: PencilIcon, label: "Blog" },
+   ],
+   contact: {
+      social: {
+         GitHub: {
+            name: "GitHub",
+            url: "#",
+            icon: Icons.github,
+         },
+         LinkedIn: {
+            name: "LinkedIn",
+            url: "#",
+            icon: Icons.linkedin,
+         },
+         X: {
+            name: "X",
+            url: "#",
+            icon: Icons.x,
+         },
+         email: {
+            name: "Send Email",
+            url: "#",
+            icon: Icons.email,
+         },
+      },
+   },
+}
+
+export default function DockDemo() {
+   return (
+      <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Dock
+         </span>
+         <TooltipProvider>
+            <Dock direction="middle">
+               {DATA.navbar.map((item) => (
+                  <DockIcon key={item.label}>
+                     <Tooltip>
+                        <TooltipTrigger asChild>
+                           <Link
+                              href={item.href}
+                              aria-label={item.label}
+                              className={ny(
+                                 buttonVariants({
+                                    variant: "ghost",
+                                    size: "icon",
+                                 }),
+                                 "size-12 rounded-full",
+                              )}
+                           >
+                              <item.icon className="size-4" />
+                           </Link>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                           <p>{item.label}</p>
+                        </TooltipContent>
+                     </Tooltip>
+                  </DockIcon>
+               ))}
+               <Separator orientation="vertical" className="h-full" />
+               {Object.entries(DATA.contact.social).map(([name, social]) => (
+                  <DockIcon key={name}>
+                     <Tooltip>
+                        <TooltipTrigger asChild>
+                           <Link
+                              href={social.url}
+                              aria-label={social.name}
+                              className={ny(
+                                 buttonVariants({
+                                    variant: "ghost",
+                                    size: "icon",
+                                 }),
+                                 "size-12 rounded-full",
+                              )}
+                           >
+                              <social.icon className="size-4" />
+                           </Link>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                           <p>{name}</p>
+                        </TooltipContent>
+                     </Tooltip>
+                  </DockIcon>
+               ))}
+               <Separator orientation="vertical" className="h-full py-2" />
+               <DockIcon>
+                  <Tooltip>
+                     <TooltipTrigger asChild>
+                        <ModeToggle className="rounded-full" />
+                     </TooltipTrigger>
+                     <TooltipContent>
+                        <p>Theme</p>
+                     </TooltipContent>
+                  </Tooltip>
+               </DockIcon>
+            </Dock>
+         </TooltipProvider>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/dot-pattern-demo.tsx b/apps/web/registry/default/examples/dot-pattern-demo.tsx
new file mode 100644
index 00000000..e2067505
--- /dev/null
+++ b/apps/web/registry/default/examples/dot-pattern-demo.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import { ny } from "~/registry/default/lib/utils"
+import { DotPattern } from "~/registry/default/ui/dot-pattern"
+
+export default function DotPatternDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Dot Pattern
+         </p>
+         <DotPattern
+            className={ny(
+               "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/dot-pattern-linear-gradient.tsx b/apps/web/registry/default/examples/dot-pattern-linear-gradient.tsx
new file mode 100644
index 00000000..2ac00dc4
--- /dev/null
+++ b/apps/web/registry/default/examples/dot-pattern-linear-gradient.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { ny } from "~/registry/default/lib/utils"
+import { DotPattern } from "~/registry/default/ui/dot-pattern"
+
+export default function DotPatternLinearGradient() {
+   return (
+      <div className="relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Dot Pattern
+         </p>
+         <DotPattern
+            width={20}
+            height={20}
+            cx={1}
+            cy={1}
+            cr={1}
+            className={ny(
+               "[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/drawer-demo.tsx b/apps/web/registry/default/examples/drawer-demo.tsx
new file mode 100644
index 00000000..70aec0cf
--- /dev/null
+++ b/apps/web/registry/default/examples/drawer-demo.tsx
@@ -0,0 +1,136 @@
+import { Minus, Plus } from "lucide-react"
+import * as React from "react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Drawer,
+   DrawerClose,
+   DrawerContent,
+   DrawerDescription,
+   DrawerFooter,
+   DrawerHeader,
+   DrawerTitle,
+   DrawerTrigger,
+} from "~/registry/default/ui/drawer"
+
+const data = [
+   {
+      goal: 400,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 239,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 349,
+   },
+]
+
+export default function DrawerDemo() {
+   const [goal, setGoal] = React.useState(350)
+
+   function onClick(adjustment: number) {
+      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+   }
+
+   return (
+      <Drawer>
+         <DrawerTrigger asChild>
+            <Button variant="outline">Open Drawer</Button>
+         </DrawerTrigger>
+         <DrawerContent>
+            <div className="mx-auto w-full max-w-sm">
+               <DrawerHeader>
+                  <DrawerTitle>Move Goal</DrawerTitle>
+                  <DrawerDescription>
+                     Set your daily activity goal.
+                  </DrawerDescription>
+               </DrawerHeader>
+               <div className="p-4 pb-0">
+                  <div className="flex items-center justify-center space-x-2">
+                     <Button
+                        variant="outline"
+                        size="icon"
+                        className="size-8 shrink-0 rounded-full"
+                        onClick={() => onClick(-10)}
+                        disabled={goal <= 200}
+                     >
+                        <Minus className="size-4" />
+                        <span className="sr-only">Decrease</span>
+                     </Button>
+                     <div className="flex-1 text-center">
+                        <div className="text-7xl font-bold tracking-tighter">
+                           {goal}
+                        </div>
+                        <div className="text-muted-foreground text-[0.70rem] uppercase">
+                           Calories/day
+                        </div>
+                     </div>
+                     <Button
+                        variant="outline"
+                        size="icon"
+                        className="size-8 shrink-0 rounded-full"
+                        onClick={() => onClick(10)}
+                        disabled={goal >= 400}
+                     >
+                        <Plus className="size-4" />
+                        <span className="sr-only">Increase</span>
+                     </Button>
+                  </div>
+                  <div className="mt-3 h-[120px]">
+                     <ResponsiveContainer width="100%" height="100%">
+                        <BarChart data={data}>
+                           <Bar
+                              dataKey="goal"
+                              style={
+                                 {
+                                    fill: "hsl(var(--foreground))",
+                                    opacity: 0.9,
+                                 } as React.CSSProperties
+                              }
+                           />
+                        </BarChart>
+                     </ResponsiveContainer>
+                  </div>
+               </div>
+               <DrawerFooter>
+                  <Button>Submit</Button>
+                  <DrawerClose asChild>
+                     <Button variant="outline">Cancel</Button>
+                  </DrawerClose>
+               </DrawerFooter>
+            </div>
+         </DrawerContent>
+      </Drawer>
+   )
+}
diff --git a/apps/web/registry/default/examples/drawer-dialog.tsx b/apps/web/registry/default/examples/drawer-dialog.tsx
new file mode 100644
index 00000000..6ec5b69e
--- /dev/null
+++ b/apps/web/registry/default/examples/drawer-dialog.tsx
@@ -0,0 +1,89 @@
+import * as React from "react"
+
+import { useMediaQuery } from "~/hooks/use-media-query"
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogHeader,
+   DialogTitle,
+   DialogTrigger,
+} from "~/registry/default/ui/dialog"
+import {
+   Drawer,
+   DrawerClose,
+   DrawerContent,
+   DrawerDescription,
+   DrawerFooter,
+   DrawerHeader,
+   DrawerTitle,
+   DrawerTrigger,
+} from "~/registry/default/ui/drawer"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+
+export default function DrawerDialogDemo() {
+   const [open, setOpen] = React.useState(false)
+   const isDesktop = useMediaQuery("(min-width: 768px)")
+
+   if (isDesktop) {
+      return (
+         <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+               <Button variant="outline">Edit Profile</Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+               <DialogHeader>
+                  <DialogTitle>Edit profile</DialogTitle>
+                  <DialogDescription>
+                     Make changes to your profile here. Click save when you're
+                     done.
+                  </DialogDescription>
+               </DialogHeader>
+               <ProfileForm />
+            </DialogContent>
+         </Dialog>
+      )
+   }
+
+   return (
+      <Drawer open={open} onOpenChange={setOpen}>
+         <DrawerTrigger asChild>
+            <Button variant="outline">Edit Profile</Button>
+         </DrawerTrigger>
+         <DrawerContent>
+            <DrawerHeader className="text-left">
+               <DrawerTitle>Edit profile</DrawerTitle>
+               <DrawerDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+               </DrawerDescription>
+            </DrawerHeader>
+            <ProfileForm className="px-4" />
+            <DrawerFooter className="pt-2">
+               <DrawerClose asChild>
+                  <Button variant="outline">Cancel</Button>
+               </DrawerClose>
+            </DrawerFooter>
+         </DrawerContent>
+      </Drawer>
+   )
+}
+
+function ProfileForm({ className }: React.ComponentProps<"form">) {
+   return (
+      <form className={ny("grid items-start gap-4", className)}>
+         <div className="grid gap-2">
+            <Label htmlFor="email">Email</Label>
+            <Input type="email" id="email" defaultValue="nyxb@example.com" />
+         </div>
+         <div className="grid gap-2">
+            <Label htmlFor="username">Username</Label>
+            <Input id="username" defaultValue="~nyxb" />
+         </div>
+         <Button type="submit">Save changes</Button>
+      </form>
+   )
+}
diff --git a/apps/web/registry/default/examples/dropdown-menu-checkboxes.tsx b/apps/web/registry/default/examples/dropdown-menu-checkboxes.tsx
new file mode 100644
index 00000000..0cb9f43c
--- /dev/null
+++ b/apps/web/registry/default/examples/dropdown-menu-checkboxes.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import type { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"
+import * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   DropdownMenu,
+   DropdownMenuCheckboxItem,
+   DropdownMenuContent,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/default/ui/dropdown-menu"
+
+type Checked = DropdownMenuCheckboxItemProps["checked"]
+
+export default function DropdownMenuCheckboxes() {
+   const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
+   const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
+   const [showPanel, setShowPanel] = React.useState<Checked>(false)
+
+   return (
+      <DropdownMenu>
+         <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open</Button>
+         </DropdownMenuTrigger>
+         <DropdownMenuContent className="w-56">
+            <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuCheckboxItem
+               checked={showStatusBar}
+               onCheckedChange={setShowStatusBar}
+            >
+               Status Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem
+               checked={showActivityBar}
+               onCheckedChange={setShowActivityBar}
+               disabled
+            >
+               Activity Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem
+               checked={showPanel}
+               onCheckedChange={setShowPanel}
+            >
+               Panel
+            </DropdownMenuCheckboxItem>
+         </DropdownMenuContent>
+      </DropdownMenu>
+   )
+}
diff --git a/apps/web/registry/default/examples/dropdown-menu-demo.tsx b/apps/web/registry/default/examples/dropdown-menu-demo.tsx
new file mode 100644
index 00000000..9d60cbe7
--- /dev/null
+++ b/apps/web/registry/default/examples/dropdown-menu-demo.tsx
@@ -0,0 +1,122 @@
+import {
+   Cloud,
+   CreditCard,
+   Github,
+   Keyboard,
+   LifeBuoy,
+   LogOut,
+   Mail,
+   MessageSquare,
+   Plus,
+   PlusCircle,
+   Settings,
+   User,
+   UserPlus,
+   Users,
+} from "lucide-react"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuPortal,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuSub,
+   DropdownMenuSubContent,
+   DropdownMenuSubTrigger,
+   DropdownMenuTrigger,
+} from "~/registry/default/ui/dropdown-menu"
+
+export default function DropdownMenuDemo() {
+   return (
+      <DropdownMenu>
+         <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open</Button>
+         </DropdownMenuTrigger>
+         <DropdownMenuContent className="w-56">
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+               <DropdownMenuItem>
+                  <User />
+                  <span>Profile</span>
+                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+               </DropdownMenuItem>
+               <DropdownMenuItem>
+                  <CreditCard />
+                  <span>Billing</span>
+                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+               </DropdownMenuItem>
+               <DropdownMenuItem>
+                  <Settings />
+                  <span>Settings</span>
+                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+               </DropdownMenuItem>
+               <DropdownMenuItem>
+                  <Keyboard />
+                  <span>Keyboard shortcuts</span>
+                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+               </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+               <DropdownMenuItem>
+                  <Users />
+                  <span>Team</span>
+               </DropdownMenuItem>
+               <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                     <UserPlus />
+                     <span>Invite users</span>
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                     <DropdownMenuSubContent>
+                        <DropdownMenuItem>
+                           <Mail />
+                           <span>Email</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <MessageSquare />
+                           <span>Message</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <PlusCircle />
+                           <span>More...</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+               </DropdownMenuSub>
+               <DropdownMenuItem>
+                  <Plus />
+                  <span>New Team</span>
+                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+               </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+               <Github />
+               <span>GitHub</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+               <LifeBuoy />
+               <span>Support</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem disabled>
+               <Cloud />
+               <span>API</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+               <LogOut />
+               <span>Log out</span>
+               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+            </DropdownMenuItem>
+         </DropdownMenuContent>
+      </DropdownMenu>
+   )
+}
diff --git a/apps/web/registry/default/examples/dropdown-menu-radio-group.tsx b/apps/web/registry/default/examples/dropdown-menu-radio-group.tsx
new file mode 100644
index 00000000..efb371a3
--- /dev/null
+++ b/apps/web/registry/default/examples/dropdown-menu-radio-group.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuLabel,
+   DropdownMenuRadioGroup,
+   DropdownMenuRadioItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/default/ui/dropdown-menu"
+
+export default function DropdownMenuRadioGroupDemo() {
+   const [position, setPosition] = React.useState("bottom")
+
+   return (
+      <DropdownMenu>
+         <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open</Button>
+         </DropdownMenuTrigger>
+         <DropdownMenuContent className="w-56">
+            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuRadioGroup
+               value={position}
+               onValueChange={setPosition}
+            >
+               <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+               <DropdownMenuRadioItem value="bottom">
+                  Bottom
+               </DropdownMenuRadioItem>
+               <DropdownMenuRadioItem value="right">
+                  Right
+               </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+         </DropdownMenuContent>
+      </DropdownMenu>
+   )
+}
diff --git a/apps/web/registry/default/examples/fade-text-demo.tsx b/apps/web/registry/default/examples/fade-text-demo.tsx
new file mode 100644
index 00000000..86f51607
--- /dev/null
+++ b/apps/web/registry/default/examples/fade-text-demo.tsx
@@ -0,0 +1,40 @@
+import { FadeText } from "~/registry/default/ui/fade-text"
+
+export default async function FadeTextDemo() {
+   return (
+      <div className="flex flex-col space-y-8 text-center">
+         <FadeText
+            className="text-4xl font-bold text-black dark:text-white"
+            direction="up"
+            framerProps={{
+               show: { transition: { delay: 0.2 } },
+            }}
+            text="Fade Up"
+         />
+         <FadeText
+            className="text-4xl font-bold text-black dark:text-white"
+            direction="right"
+            framerProps={{
+               show: { transition: { delay: 0.4 } },
+            }}
+            text="Fade Right"
+         />
+         <FadeText
+            className="text-4xl font-bold text-black dark:text-white"
+            direction="down"
+            framerProps={{
+               show: { transition: { delay: 0.6 } },
+            }}
+            text="Fade Down"
+         />
+         <FadeText
+            className="text-4xl font-bold text-black dark:text-white"
+            direction="left"
+            framerProps={{
+               show: { transition: { delay: 0.8 } },
+            }}
+            text="Fade Left"
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/file-tree-demo.tsx b/apps/web/registry/default/examples/file-tree-demo.tsx
new file mode 100644
index 00000000..c7b7ad2c
--- /dev/null
+++ b/apps/web/registry/default/examples/file-tree-demo.tsx
@@ -0,0 +1,111 @@
+import { File, Folder, Tree } from "~/registry/default/ui/file-tree"
+
+export default function FileTreeDemo() {
+   return (
+      <div className="bg-background relative flex h-[300px] w-1/2 flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
+         <Tree
+            className="bg-background overflow-hidden rounded-md p-2"
+            initialSelectedId="7"
+            initialExpandedItems={[
+               "1",
+               "2",
+               "3",
+               "4",
+               "5",
+               "6",
+               "7",
+               "8",
+               "9",
+               "10",
+               "11",
+            ]}
+            elements={ELEMENTS}
+         >
+            <Folder element="src" value="1">
+               <Folder value="2" element="app">
+                  <File value="3">
+                     <p>layout.tsx</p>
+                  </File>
+                  <File value="4">
+                     <p>page.tsx</p>
+                  </File>
+               </Folder>
+               <Folder value="5" element="components">
+                  <Folder value="6" element="ui">
+                     <File value="7">
+                        <p>button.tsx</p>
+                     </File>
+                  </Folder>
+                  <File value="8">
+                     <p>header.tsx</p>
+                  </File>
+                  <File value="9">
+                     <p>footer.tsx</p>
+                  </File>
+               </Folder>
+               <Folder value="10" element="lib">
+                  <File value="11">
+                     <p>utils.ts</p>
+                  </File>
+               </Folder>
+            </Folder>
+         </Tree>
+      </div>
+   )
+}
+
+const ELEMENTS = [
+   {
+      id: "1",
+      isSelectable: true,
+      name: "src",
+      children: [
+         {
+            id: "2",
+            isSelectable: true,
+            name: "app",
+            children: [
+               {
+                  id: "3",
+                  isSelectable: true,
+                  name: "layout.tsx",
+               },
+               {
+                  id: "4",
+                  isSelectable: true,
+                  name: "page.tsx",
+               },
+            ],
+         },
+         {
+            id: "5",
+            isSelectable: true,
+            name: "components",
+            children: [
+               {
+                  id: "6",
+                  isSelectable: true,
+                  name: "header.tsx",
+               },
+               {
+                  id: "7",
+                  isSelectable: true,
+                  name: "footer.tsx",
+               },
+            ],
+         },
+         {
+            id: "8",
+            isSelectable: true,
+            name: "lib",
+            children: [
+               {
+                  id: "9",
+                  isSelectable: true,
+                  name: "utils.ts",
+               },
+            ],
+         },
+      ],
+   },
+]
diff --git a/apps/web/registry/default/examples/flickering-grid-demo.tsx b/apps/web/registry/default/examples/flickering-grid-demo.tsx
new file mode 100644
index 00000000..9d621c4e
--- /dev/null
+++ b/apps/web/registry/default/examples/flickering-grid-demo.tsx
@@ -0,0 +1,18 @@
+import { FlickeringGrid } from "~/registry/default/ui/flickering-grid"
+
+export default function FlickeringGridDemo() {
+   return (
+      <div className="relative h-[500px] w-full overflow-hidden rounded-lg border bg-background">
+         <FlickeringGrid
+            className="absolute inset-0 z-0 size-full"
+            squareSize={4}
+            gridGap={6}
+            color="#6B7280"
+            maxOpacity={0.5}
+            flickerChance={0.1}
+            height={800}
+            width={800}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/flickering-grid-rounded-demo.tsx b/apps/web/registry/default/examples/flickering-grid-rounded-demo.tsx
new file mode 100644
index 00000000..e4f07964
--- /dev/null
+++ b/apps/web/registry/default/examples/flickering-grid-rounded-demo.tsx
@@ -0,0 +1,18 @@
+import { FlickeringGrid } from "~/registry/default/ui/flickering-grid"
+
+export default function FlickeringGridRoundedDemo() {
+   return (
+      <div className="relative size-[600px] w-full overflow-hidden rounded-lg border bg-background">
+         <FlickeringGrid
+            className="relative inset-0 z-0 [mask-image:radial-gradient(450px_circle_at_center,white,transparent)]"
+            squareSize={4}
+            gridGap={6}
+            color="#60A5FA"
+            maxOpacity={0.5}
+            flickerChance={0.1}
+            height={800}
+            width={800}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/flip-text-demo.tsx b/apps/web/registry/default/examples/flip-text-demo.tsx
new file mode 100644
index 00000000..fc315dc9
--- /dev/null
+++ b/apps/web/registry/default/examples/flip-text-demo.tsx
@@ -0,0 +1,10 @@
+import FlipText from "~/registry/default/ui/flip-text"
+
+export default async function FlipTextDemo() {
+   return (
+      <FlipText
+         className="text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
+         word="Flip Text"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/gauge-circle-demo.tsx b/apps/web/registry/default/examples/gauge-circle-demo.tsx
new file mode 100644
index 00000000..58a25513
--- /dev/null
+++ b/apps/web/registry/default/examples/gauge-circle-demo.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import GaugeCircle from "~/registry/default/ui/gauge-circle"
+
+export default function GaugeCircleDemo() {
+   const [value, setValue] = useState(0)
+
+   useEffect(() => {
+      const handleIncrement = (prev: number) => {
+         if (prev === 100) return 0
+
+         return prev + 10
+      }
+      setValue(handleIncrement)
+      const interval = setInterval(() => setValue(handleIncrement), 2000)
+      return () => clearInterval(interval)
+   }, [])
+
+   return (
+      <GaugeCircle
+         max={100}
+         min={0}
+         value={value}
+         gaugePrimaryColor="rgb(79 70 229)"
+         gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/globe-demo.tsx b/apps/web/registry/default/examples/globe-demo.tsx
new file mode 100644
index 00000000..7a70ec2e
--- /dev/null
+++ b/apps/web/registry/default/examples/globe-demo.tsx
@@ -0,0 +1,13 @@
+import Globe from "~/registry/default/ui/globe"
+
+export default function GlobeDemo() {
+   return (
+      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-40 pb-40 pt-8 md:pb-60 md:shadow-xl">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Globe
+         </span>
+         <Globe className="top-28" />
+         <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/globe-grid-demo.tsx b/apps/web/registry/default/examples/globe-grid-demo.tsx
new file mode 100644
index 00000000..4c25e913
--- /dev/null
+++ b/apps/web/registry/default/examples/globe-grid-demo.tsx
@@ -0,0 +1,7 @@
+import { GlobeGrid } from "~/registry/miami/ui/globe-grid"
+
+export function GlobeGridDemo() {
+   return <GlobeGrid />
+}
+
+export default GlobeGridDemo
diff --git a/apps/web/registry/default/examples/globe-grid-full-demo.tsx b/apps/web/registry/default/examples/globe-grid-full-demo.tsx
new file mode 100644
index 00000000..7baf846b
--- /dev/null
+++ b/apps/web/registry/default/examples/globe-grid-full-demo.tsx
@@ -0,0 +1,7 @@
+import { GlobeGrid } from "~/registry/default/ui/globe-grid"
+
+export function GlobeGridDemo() {
+   return <GlobeGrid fullGlobe />
+}
+
+export default GlobeGridDemo
diff --git a/apps/web/registry/default/examples/gradual-spacing-demo.tsx b/apps/web/registry/default/examples/gradual-spacing-demo.tsx
new file mode 100644
index 00000000..29c6b73b
--- /dev/null
+++ b/apps/web/registry/default/examples/gradual-spacing-demo.tsx
@@ -0,0 +1,10 @@
+import GradualSpacing from "~/registry/default/ui/gradual-spacing"
+
+export default async function GradualSpacingDemo() {
+   return (
+      <GradualSpacing
+         className="font-display text-center text-4xl font-bold -tracking-widest  text-black md:text-7xl md:leading-[5rem] dark:text-white"
+         text="Gradual Spacing"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/grid-layout-columns-demo.tsx b/apps/web/registry/default/examples/grid-layout-columns-demo.tsx
new file mode 100644
index 00000000..f720b517
--- /dev/null
+++ b/apps/web/registry/default/examples/grid-layout-columns-demo.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import GridLayout from "~/registry/default/ui/grid-layout"
+
+export default function GridLayoutColumnsDemo() {
+   return (
+      <div className="space-y-8">
+         <GridLayout
+            columns={8}
+            className="min-h-[150px] p-4"
+            crosshairs={{
+               topLeft: true,
+               bottomRight: true,
+            }}
+         >
+            <div className="flex h-full items-center justify-center">
+               <div className="text-center">
+                  <h3 className="text-xl font-medium">8 Columns</h3>
+                  <p className="text-muted-foreground mt-1">Compact layouts</p>
+               </div>
+            </div>
+         </GridLayout>
+
+         <GridLayout
+            columns={12}
+            className="min-h-[150px] p-4"
+            crosshairs={{
+               topLeft: true,
+               bottomRight: true,
+            }}
+         >
+            <div className="flex h-full items-center justify-center">
+               <div className="text-center">
+                  <h3 className="text-xl font-medium">12 Columns</h3>
+                  <p className="text-muted-foreground mt-1">Traditional grid</p>
+               </div>
+            </div>
+         </GridLayout>
+
+         <GridLayout
+            columns={16}
+            className="min-h-[150px] p-4"
+            crosshairs={{
+               topLeft: true,
+               bottomRight: true,
+            }}
+         >
+            <div className="flex h-full items-center justify-center">
+               <div className="text-center">
+                  <h3 className="text-xl font-medium">16 Columns</h3>
+                  <p className="text-muted-foreground mt-1">
+                     Fine-grained control
+                  </p>
+               </div>
+            </div>
+         </GridLayout>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/grid-layout-crosshairs-demo.tsx b/apps/web/registry/default/examples/grid-layout-crosshairs-demo.tsx
new file mode 100644
index 00000000..62fde488
--- /dev/null
+++ b/apps/web/registry/default/examples/grid-layout-crosshairs-demo.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import GridLayout from "~/registry/default/ui/grid-layout"
+
+export default function GridLayoutCrosshairsDemo() {
+   return (
+      <GridLayout
+         crosshairs={{
+            topLeft: true,
+            topRight: true,
+            bottomLeft: true,
+            bottomRight: true,
+         }}
+         lineVariant="none"
+         className="min-h-[350px] p-6"
+      >
+         <div className="flex h-full flex-col items-center justify-center space-y-4">
+            <div className="text-center">
+               <h3 className="text-2xl font-medium">Corner Markers</h3>
+               <p className="text-muted-foreground mt-2">
+                  Use crosshairs to highlight key areas or create visual anchors
+               </p>
+            </div>
+            <div className="grid w-full max-w-xl grid-cols-2 gap-8 pt-8">
+               <div className="bg-card rounded-lg border p-4 text-center">
+                  Top Left
+               </div>
+               <div className="bg-card rounded-lg border p-4 text-center">
+                  Top Right
+               </div>
+               <div className="bg-card rounded-lg border p-4 text-center">
+                  Bottom Left
+               </div>
+               <div className="bg-card rounded-lg border p-4 text-center">
+                  Bottom Right
+               </div>
+            </div>
+         </div>
+      </GridLayout>
+   )
+}
diff --git a/apps/web/registry/default/examples/grid-layout-demo.tsx b/apps/web/registry/default/examples/grid-layout-demo.tsx
new file mode 100644
index 00000000..c8bd300b
--- /dev/null
+++ b/apps/web/registry/default/examples/grid-layout-demo.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import { Button } from "~/registry/default/ui/button"
+import GridLayout from "~/registry/default/ui/grid-layout"
+
+export default function GridLayoutDemo() {
+   return (
+      <GridLayout
+         crosshairs={{
+            topLeft: true,
+            bottomRight: true,
+         }}
+         lineVariant="center"
+         className="min-h-[350px] p-8"
+      >
+         <div className="space-y-8">
+            <div>
+               <h2 className="text-4xl font-medium tracking-tight">
+                  Ready to deploy?{" "}
+                  <span className="text-muted-foreground">
+                     Start building with a free account.
+                  </span>
+               </h2>
+               <p className="text-muted-foreground mt-4 text-xl">
+                  Speak to an expert for your{" "}
+                  <span className="text-blue-500">Pro</span> or{" "}
+                  <span className="text-purple-500">Enterprise</span> needs.
+               </p>
+            </div>
+            <div className="flex gap-4">
+               <Button variant="default" size="lg">
+                  Start Deploying
+               </Button>
+               <Button variant="outline" size="lg">
+                  Contact Sales
+               </Button>
+            </div>
+         </div>
+      </GridLayout>
+   )
+}
diff --git a/apps/web/registry/default/examples/grid-layout-variants-demo.tsx b/apps/web/registry/default/examples/grid-layout-variants-demo.tsx
new file mode 100644
index 00000000..630e47fb
--- /dev/null
+++ b/apps/web/registry/default/examples/grid-layout-variants-demo.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import GridLayout from "~/registry/default/ui/grid-layout"
+
+export default function GridLayoutVariantsDemo() {
+   return (
+      <div className="space-y-8">
+         <GridLayout
+            lineVariant="center"
+            className="min-h-[150px]"
+            crosshairs={{
+               topLeft: true,
+               bottomRight: true,
+            }}
+         >
+            <div className="flex h-full items-center justify-center">
+               <div className="text-center">
+                  <h3 className="text-xl font-medium">Center Line</h3>
+                  <p className="text-muted-foreground mt-1">
+                     Minimal and focused
+                  </p>
+               </div>
+            </div>
+         </GridLayout>
+
+         <GridLayout
+            lineVariant="vertical"
+            className="min-h-[150px]"
+            crosshairs={{
+               topLeft: true,
+               bottomRight: true,
+            }}
+         >
+            <div className="flex h-full items-center justify-center">
+               <div className="text-center">
+                  <h3 className="text-xl font-medium">Vertical Lines</h3>
+                  <p className="text-muted-foreground mt-1">
+                     Column-focused layout
+                  </p>
+               </div>
+            </div>
+         </GridLayout>
+
+         <GridLayout
+            lineVariant="horizontal"
+            className="min-h-[150px]"
+            crosshairs={{
+               topLeft: true,
+               bottomRight: true,
+            }}
+         >
+            <div className="flex h-full items-center justify-center">
+               <div className="text-center">
+                  <h3 className="text-xl font-medium">Horizontal Lines</h3>
+                  <p className="text-muted-foreground mt-1">
+                     Row-based organization
+                  </p>
+               </div>
+            </div>
+         </GridLayout>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/grid-pattern-dashed.tsx b/apps/web/registry/default/examples/grid-pattern-dashed.tsx
new file mode 100644
index 00000000..2647e54d
--- /dev/null
+++ b/apps/web/registry/default/examples/grid-pattern-dashed.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { ny } from "~/registry/default/lib/utils"
+import { GridPattern } from "~/registry/default/ui/grid-pattern"
+
+export default function GridPatternDashed() {
+   return (
+      <div className="relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Grid Pattern
+         </p>
+         <GridPattern
+            width={30}
+            height={30}
+            x={-1}
+            y={-1}
+            strokeDasharray={"4 2"}
+            className={ny(
+               "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/grid-pattern-demo.tsx b/apps/web/registry/default/examples/grid-pattern-demo.tsx
new file mode 100644
index 00000000..d5231dda
--- /dev/null
+++ b/apps/web/registry/default/examples/grid-pattern-demo.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { ny } from "~/registry/default/lib/utils"
+import { GridPattern } from "~/registry/default/ui/grid-pattern"
+
+export default function GridPatternDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Grid Pattern
+         </p>
+         <GridPattern
+            squares={[
+               [4, 4],
+               [5, 1],
+               [8, 2],
+               [5, 3],
+               [5, 5],
+               [10, 10],
+               [12, 15],
+               [15, 10],
+               [10, 15],
+               [15, 10],
+               [10, 15],
+               [15, 10],
+            ]}
+            className={ny(
+               "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
+               "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/grid-pattern-linear-gradient.tsx b/apps/web/registry/default/examples/grid-pattern-linear-gradient.tsx
new file mode 100644
index 00000000..15d869d0
--- /dev/null
+++ b/apps/web/registry/default/examples/grid-pattern-linear-gradient.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { ny } from "~/registry/default/lib/utils"
+import { GridPattern } from "~/registry/default/ui/grid-pattern"
+
+export default function GridPatternLinearGradient() {
+   return (
+      <div className="relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Grid Pattern
+         </p>
+         <GridPattern
+            width={20}
+            height={20}
+            x={-1}
+            y={-1}
+            className={ny(
+               "[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/hero-video-demo.tsx b/apps/web/registry/default/examples/hero-video-demo.tsx
new file mode 100644
index 00000000..90a38bba
--- /dev/null
+++ b/apps/web/registry/default/examples/hero-video-demo.tsx
@@ -0,0 +1,51 @@
+import { Button } from "~/components/ui/button"
+import HeroVideo, { HeroVideoAction } from "~/registry/default/ui/hero-video"
+import { MagicCard, MagicContainer } from "~/registry/default/ui/magic-card"
+
+function PlayButton() {
+   return (
+      <svg
+         xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 24 24"
+         fill="currentColor"
+         className="dark:text-white"
+      >
+         <path
+            fillRule="evenodd"
+            d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
+            clipRule="evenodd"
+         />
+      </svg>
+   )
+}
+
+export default function HeroVideoDemo() {
+   return (
+      <div className="bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Hero Video
+         </span>
+
+         <MagicContainer>
+            <MagicCard className="min-h-[400px] [mask:linear-gradient(0deg,transparent_40%,#fff_100%)]">
+               <HeroVideo
+                  title="Nyxb UI Demo"
+                  image="https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200"
+               >
+                  <HeroVideoAction>
+                     <Button className="size-20 rounded-full" variant="outline">
+                        <PlayButton />
+                     </Button>
+                  </HeroVideoAction>
+                  <video
+                     autoPlay
+                     className="rounded-xl dark:border"
+                     playsInline
+                     src="https://cdn.nyxbui.design/globe.mp4"
+                  />
+               </HeroVideo>
+            </MagicCard>
+         </MagicContainer>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/hero-video-dialog-demo-top-in-bottom-out.tsx b/apps/web/registry/default/examples/hero-video-dialog-demo-top-in-bottom-out.tsx
new file mode 100644
index 00000000..da1c2fbd
--- /dev/null
+++ b/apps/web/registry/default/examples/hero-video-dialog-demo-top-in-bottom-out.tsx
@@ -0,0 +1,22 @@
+import HeroVideoDialog from "~/registry/default/ui/hero-video-dialog"
+
+export default function HeroVideoDialogDemoTopInBottomOut() {
+   return (
+      <div className="relative">
+         <HeroVideoDialog
+            className="block dark:hidden"
+            animationStyle="top-in-bottom-out"
+            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
+            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-light.png"
+            thumbnailAlt="Hero Video"
+         />
+         <HeroVideoDialog
+            className="hidden dark:block"
+            animationStyle="top-in-bottom-out"
+            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
+            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-dark.png"
+            thumbnailAlt="Hero Video"
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/hero-video-dialog-demo.tsx b/apps/web/registry/default/examples/hero-video-dialog-demo.tsx
new file mode 100644
index 00000000..756b1db8
--- /dev/null
+++ b/apps/web/registry/default/examples/hero-video-dialog-demo.tsx
@@ -0,0 +1,22 @@
+import HeroVideoDialog from "~/registry/default/ui/hero-video-dialog"
+
+export default function HeroVideoDialogDemo() {
+   return (
+      <div className="relative">
+         <HeroVideoDialog
+            className="block dark:hidden"
+            animationStyle="from-center"
+            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
+            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-light.png"
+            thumbnailAlt="Hero Video"
+         />
+         <HeroVideoDialog
+            className="hidden dark:block"
+            animationStyle="from-center"
+            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
+            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-dark.png"
+            thumbnailAlt="Hero Video"
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/hero-video-youtube.tsx b/apps/web/registry/default/examples/hero-video-youtube.tsx
new file mode 100644
index 00000000..d03d077e
--- /dev/null
+++ b/apps/web/registry/default/examples/hero-video-youtube.tsx
@@ -0,0 +1,52 @@
+import { Button } from "~/components/ui/button"
+import HeroVideo, { HeroVideoAction } from "~/registry/default/ui/hero-video"
+import { MagicCard, MagicContainer } from "~/registry/default/ui/magic-card"
+
+function PlayButton() {
+   return (
+      <svg
+         xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 24 24"
+         fill="currentColor"
+         className="dark:text-white"
+      >
+         <path
+            fillRule="evenodd"
+            d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
+            clipRule="evenodd"
+         />
+      </svg>
+   )
+}
+
+export default function HeroVideoDemo() {
+   return (
+      <div className="bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Never gonna give you up
+         </span>
+         {/* Magic Card  */}
+         <MagicContainer className="relative">
+            <MagicCard className="min-h-[400px] [mask:linear-gradient(0deg,transparent_20%,#fff_100%)]">
+               <HeroVideo
+                  title="Never gonna give you up"
+                  image="https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024"
+               >
+                  <HeroVideoAction>
+                     <Button className="size-20 rounded-full" variant="outline">
+                        <PlayButton />
+                     </Button>
+                  </HeroVideoAction>
+                  <iframe
+                     height="500"
+                     className="h-[500px] rounded-xl border"
+                     src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=FmFbhzaToJQ9iXN4"
+                     title="YouTube video player"
+                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  />
+               </HeroVideo>
+            </MagicCard>
+         </MagicContainer>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/hover-card-demo.tsx b/apps/web/registry/default/examples/hover-card-demo.tsx
new file mode 100644
index 00000000..1dec555b
--- /dev/null
+++ b/apps/web/registry/default/examples/hover-card-demo.tsx
@@ -0,0 +1,43 @@
+import { CalendarDays } from "lucide-react"
+
+import {
+   Avatar,
+   AvatarFallback,
+   AvatarImage,
+} from "~/registry/default/ui/avatar"
+import { Button } from "~/registry/default/ui/button"
+import {
+   HoverCard,
+   HoverCardContent,
+   HoverCardTrigger,
+} from "~/registry/default/ui/hover-card"
+
+export default function HoverCardDemo() {
+   return (
+      <HoverCard>
+         <HoverCardTrigger asChild>
+            <Button variant="link">@nextjs</Button>
+         </HoverCardTrigger>
+         <HoverCardContent className="w-80">
+            <div className="flex justify-between space-x-4">
+               <Avatar>
+                  <AvatarImage src="https://github.com/vercel.png" />
+                  <AvatarFallback>VC</AvatarFallback>
+               </Avatar>
+               <div className="space-y-1">
+                  <h4 className="text-sm font-semibold">@nextjs</h4>
+                  <p className="text-sm">
+                     The React Framework – created and maintained by @vercel.
+                  </p>
+                  <div className="flex items-center pt-2">
+                     <CalendarDays className="mr-2 size-4 opacity-70" />{" "}
+                     <span className="text-muted-foreground text-xs">
+                        Joined December 2021
+                     </span>
+                  </div>
+               </div>
+            </div>
+         </HoverCardContent>
+      </HoverCard>
+   )
+}
diff --git a/apps/web/registry/default/examples/hyper-text-demo.tsx b/apps/web/registry/default/examples/hyper-text-demo.tsx
new file mode 100644
index 00000000..536bdad1
--- /dev/null
+++ b/apps/web/registry/default/examples/hyper-text-demo.tsx
@@ -0,0 +1,10 @@
+import HyperText from "~/registry/default/ui/hyper-text"
+
+export default function HyperTextDemo() {
+   return (
+      <HyperText
+         className="text-4xl font-bold text-black dark:text-white"
+         text="Hyper Text"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/icon-cloud-demo.tsx b/apps/web/registry/default/examples/icon-cloud-demo.tsx
new file mode 100644
index 00000000..c6cbc42e
--- /dev/null
+++ b/apps/web/registry/default/examples/icon-cloud-demo.tsx
@@ -0,0 +1,42 @@
+import IconCloud from "~/registry/default/ui/icon-cloud"
+
+const slugs = [
+   "typescript",
+   "javascript",
+   "dart",
+   "java",
+   "react",
+   "flutter",
+   "android",
+   "html5",
+   "css3",
+   "nodedotjs",
+   "express",
+   "nextdotjs",
+   "prisma",
+   "amazonaws",
+   "postgresql",
+   "firebase",
+   "nginx",
+   "vercel",
+   "testinglibrary",
+   "jest",
+   "cypress",
+   "docker",
+   "git",
+   "jira",
+   "github",
+   "gitlab",
+   "visualstudiocode",
+   "androidstudio",
+   "sonarqube",
+   "figma",
+]
+
+export default function IconCloudDemo() {
+   return (
+      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-20 pb-20 pt-8 ">
+         <IconCloud iconSlugs={slugs} />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/input-demo.tsx b/apps/web/registry/default/examples/input-demo.tsx
new file mode 100644
index 00000000..8bfb84a3
--- /dev/null
+++ b/apps/web/registry/default/examples/input-demo.tsx
@@ -0,0 +1,5 @@
+import { Input } from "~/registry/default/ui/input"
+
+export default function InputDemo() {
+   return <Input type="email" placeholder="Email" />
+}
diff --git a/apps/web/registry/default/examples/input-disabled.tsx b/apps/web/registry/default/examples/input-disabled.tsx
new file mode 100644
index 00000000..6996d15a
--- /dev/null
+++ b/apps/web/registry/default/examples/input-disabled.tsx
@@ -0,0 +1,5 @@
+import { Input } from "~/registry/default/ui/input"
+
+export default function InputDisabled() {
+   return <Input disabled type="email" placeholder="Email" />
+}
diff --git a/apps/web/registry/default/examples/input-file.tsx b/apps/web/registry/default/examples/input-file.tsx
new file mode 100644
index 00000000..3a676244
--- /dev/null
+++ b/apps/web/registry/default/examples/input-file.tsx
@@ -0,0 +1,11 @@
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+
+export default function InputFile() {
+   return (
+      <div className="grid w-full max-w-sm items-center gap-1.5">
+         <Label htmlFor="picture">Picture</Label>
+         <Input id="picture" type="file" />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/input-form.tsx b/apps/web/registry/default/examples/input-form.tsx
new file mode 100644
index 00000000..cb92da7e
--- /dev/null
+++ b/apps/web/registry/default/examples/input-form.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import { Input } from "~/registry/default/ui/input"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+   username: z.string().min(2, {
+      message: "Username must be at least 2 characters.",
+   }),
+})
+
+export default function InputForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+         username: "",
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="username"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Username</FormLabel>
+                     <FormControl>
+                        <Input placeholder="nyxb" {...field} />
+                     </FormControl>
+                     <FormDescription>
+                        This is your public display name.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/input-otp-controlled.tsx b/apps/web/registry/default/examples/input-otp-controlled.tsx
new file mode 100644
index 00000000..78cb7acc
--- /dev/null
+++ b/apps/web/registry/default/examples/input-otp-controlled.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSlot,
+} from "~/registry/default/ui/input-otp"
+
+export default function InputOTPControlled() {
+   const [value, setValue] = React.useState("")
+
+   return (
+      <div className="space-y-2">
+         <InputOTP
+            maxLength={6}
+            value={value}
+            onChange={(value) => setValue(value)}
+         >
+            <InputOTPGroup>
+               <InputOTPSlot index={0} />
+               <InputOTPSlot index={1} />
+               <InputOTPSlot index={2} />
+               <InputOTPSlot index={3} />
+               <InputOTPSlot index={4} />
+               <InputOTPSlot index={5} />
+            </InputOTPGroup>
+         </InputOTP>
+         <div className="text-center text-sm">
+            {value === "" ? (
+               <>Enter your one-time password.</>
+            ) : (
+               <>
+                  You entered:
+                  {value}
+               </>
+            )}
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/input-otp-demo.tsx b/apps/web/registry/default/examples/input-otp-demo.tsx
new file mode 100644
index 00000000..91d1371d
--- /dev/null
+++ b/apps/web/registry/default/examples/input-otp-demo.tsx
@@ -0,0 +1,24 @@
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSeparator,
+   InputOTPSlot,
+} from "~/registry/default/ui/input-otp"
+
+export default function InputOTPDemo() {
+   return (
+      <InputOTP maxLength={6}>
+         <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+         </InputOTPGroup>
+         <InputOTPSeparator />
+         <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+         </InputOTPGroup>
+      </InputOTP>
+   )
+}
diff --git a/apps/web/registry/default/examples/input-otp-disabled.tsx b/apps/web/registry/default/examples/input-otp-disabled.tsx
new file mode 100644
index 00000000..842ddb04
--- /dev/null
+++ b/apps/web/registry/default/examples/input-otp-disabled.tsx
@@ -0,0 +1,24 @@
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSeparator,
+   InputOTPSlot,
+} from "~/registry/default/ui/input-otp"
+
+export default function InputOTPDemo() {
+   return (
+      <InputOTP maxLength={6} disabled>
+         <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+         </InputOTPGroup>
+         <InputOTPSeparator />
+         <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+         </InputOTPGroup>
+      </InputOTP>
+   )
+}
diff --git a/apps/web/registry/default/examples/input-otp-form.tsx b/apps/web/registry/default/examples/input-otp-form.tsx
new file mode 100644
index 00000000..bb7a0151
--- /dev/null
+++ b/apps/web/registry/default/examples/input-otp-form.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSlot,
+} from "~/registry/default/ui/input-otp"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+   pin: z.string().min(6, {
+      message: "Your one-time password must be 6 characters.",
+   }),
+})
+
+export default function InputOTPForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+         pin: "",
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="pin"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>One-Time Password</FormLabel>
+                     <FormControl>
+                        <InputOTP maxLength={6} {...field}>
+                           <InputOTPGroup>
+                              <InputOTPSlot index={0} />
+                              <InputOTPSlot index={1} />
+                              <InputOTPSlot index={2} />
+                              <InputOTPSlot index={3} />
+                              <InputOTPSlot index={4} />
+                              <InputOTPSlot index={5} />
+                           </InputOTPGroup>
+                        </InputOTP>
+                     </FormControl>
+                     <FormDescription>
+                        Please enter the one-time password sent to your phone.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/input-otp-pattern.tsx b/apps/web/registry/default/examples/input-otp-pattern.tsx
new file mode 100644
index 00000000..5b31561d
--- /dev/null
+++ b/apps/web/registry/default/examples/input-otp-pattern.tsx
@@ -0,0 +1,27 @@
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSlot,
+} from "~/registry/default/ui/input-otp"
+
+export default function InputOTPPattern() {
+   return (
+      <InputOTP
+         maxLength={6}
+         pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+         inputMode="text"
+         spellCheck="false"
+      >
+         <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+         </InputOTPGroup>
+      </InputOTP>
+   )
+}
diff --git a/apps/web/registry/default/examples/input-otp-separator.tsx b/apps/web/registry/default/examples/input-otp-separator.tsx
new file mode 100644
index 00000000..c9317a7f
--- /dev/null
+++ b/apps/web/registry/default/examples/input-otp-separator.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSeparator,
+   InputOTPSlot,
+} from "~/registry/default/ui/input-otp"
+
+export default function InputOTPWithSeparator() {
+   return (
+      <InputOTP maxLength={6}>
+         <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+         </InputOTPGroup>
+         <InputOTPSeparator />
+         <InputOTPGroup>
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+         </InputOTPGroup>
+         <InputOTPSeparator />
+         <InputOTPGroup>
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+         </InputOTPGroup>
+      </InputOTP>
+   )
+}
diff --git a/apps/web/registry/default/examples/input-phone-default.tsx b/apps/web/registry/default/examples/input-phone-default.tsx
new file mode 100644
index 00000000..0c380799
--- /dev/null
+++ b/apps/web/registry/default/examples/input-phone-default.tsx
@@ -0,0 +1,9 @@
+import * as React from "react"
+
+import { InputPhone } from "~/registry/default/ui/input-phone"
+
+export default function InputPhoneDefault() {
+   const [value, setValue] = React.useState("")
+
+   return <InputPhone value={value} onChange={setValue} defaultCountry="US" />
+}
diff --git a/apps/web/registry/default/examples/input-phone-demo.tsx b/apps/web/registry/default/examples/input-phone-demo.tsx
new file mode 100644
index 00000000..6a5083ec
--- /dev/null
+++ b/apps/web/registry/default/examples/input-phone-demo.tsx
@@ -0,0 +1,16 @@
+import * as React from "react"
+
+import { InputPhone } from "~/registry/default/ui/input-phone"
+
+export default function InputPhoneDemo() {
+   const [value, setValue] = React.useState("")
+
+   return (
+      <InputPhone
+         value={value}
+         onChange={setValue}
+         placeholder="Enter a phone number"
+         defaultCountry="US"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/input-phone-form.tsx b/apps/web/registry/default/examples/input-phone-form.tsx
new file mode 100644
index 00000000..be310df0
--- /dev/null
+++ b/apps/web/registry/default/examples/input-phone-form.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { isValidPhoneNumber } from "react-phone-number-input"
+import { z } from "zod"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import { InputPhone } from "~/registry/default/ui/input-phone"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+   phone: z
+      .string()
+      .refine(isValidPhoneNumber, { message: "Invalid phone number" }),
+})
+
+export default function InputPhoneForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+         phone: "",
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="phone"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Phone Number</FormLabel>
+                     <FormControl>
+                        <InputPhone
+                           placeholder="Enter a phone number"
+                           {...field}
+                        />
+                     </FormControl>
+                     <FormDescription>
+                        Please enter a valid phone number.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/input-phone-initial.tsx b/apps/web/registry/default/examples/input-phone-initial.tsx
new file mode 100644
index 00000000..b6f93dec
--- /dev/null
+++ b/apps/web/registry/default/examples/input-phone-initial.tsx
@@ -0,0 +1,15 @@
+import * as React from "react"
+
+import { InputPhone } from "~/registry/default/ui/input-phone"
+
+export default function InputPhoneInitial() {
+   const [value, setValue] = React.useState("")
+
+   return (
+      <InputPhone
+         value={value}
+         onChange={setValue}
+         initialValueFormat="national"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/input-phone-international.tsx b/apps/web/registry/default/examples/input-phone-international.tsx
new file mode 100644
index 00000000..1f19de04
--- /dev/null
+++ b/apps/web/registry/default/examples/input-phone-international.tsx
@@ -0,0 +1,16 @@
+import * as React from "react"
+
+import { InputPhone } from "~/registry/default/ui/input-phone"
+
+export default function InputPhoneInternational() {
+   const [value, setValue] = React.useState("")
+
+   return (
+      <InputPhone
+         value={value}
+         onChange={setValue}
+         international
+         defaultCountry="US"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/input-phone-national.tsx b/apps/web/registry/default/examples/input-phone-national.tsx
new file mode 100644
index 00000000..39cfcc62
--- /dev/null
+++ b/apps/web/registry/default/examples/input-phone-national.tsx
@@ -0,0 +1,16 @@
+import * as React from "react"
+
+import { InputPhone } from "~/registry/default/ui/input-phone"
+
+export default function InputPhoneNational() {
+   const [value, setValue] = React.useState("")
+
+   return (
+      <InputPhone
+         value={value}
+         onChange={setValue}
+         international={false}
+         defaultCountry="US"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/input-with-button.tsx b/apps/web/registry/default/examples/input-with-button.tsx
new file mode 100644
index 00000000..91778793
--- /dev/null
+++ b/apps/web/registry/default/examples/input-with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from "~/registry/default/ui/button"
+import { Input } from "~/registry/default/ui/input"
+
+export default function InputWithButton() {
+   return (
+      <div className="flex w-full max-w-sm items-center space-x-2">
+         <Input type="email" placeholder="Email" />
+         <Button type="submit">Subscribe</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/input-with-label.tsx b/apps/web/registry/default/examples/input-with-label.tsx
new file mode 100644
index 00000000..458bae31
--- /dev/null
+++ b/apps/web/registry/default/examples/input-with-label.tsx
@@ -0,0 +1,11 @@
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+
+export default function InputWithLabel() {
+   return (
+      <div className="grid w-full max-w-sm items-center gap-1.5">
+         <Label htmlFor="email">Email</Label>
+         <Input type="email" id="email" placeholder="Email" />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/input-with-text.tsx b/apps/web/registry/default/examples/input-with-text.tsx
new file mode 100644
index 00000000..f1d6c35f
--- /dev/null
+++ b/apps/web/registry/default/examples/input-with-text.tsx
@@ -0,0 +1,14 @@
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+
+export default function InputWithText() {
+   return (
+      <div className="grid w-full max-w-sm items-center gap-1.5">
+         <Label htmlFor="email-2">Email</Label>
+         <Input type="email" id="email-2" placeholder="Email" />
+         <p className="text-muted-foreground text-sm">
+            Enter your email address.
+         </p>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/interactive-grid-pattern-demo-2.tsx b/apps/web/registry/default/examples/interactive-grid-pattern-demo-2.tsx
new file mode 100644
index 00000000..6e4dc8ab
--- /dev/null
+++ b/apps/web/registry/default/examples/interactive-grid-pattern-demo-2.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { ny } from "~/registry/miami/lib/utils"
+import { InteractiveGridPattern } from "~/registry/miami/ui/interactive-grid-pattern"
+
+export default function InteractiveGridPatternDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Interactive Grid Pattern
+         </p>
+         <InteractiveGridPattern
+            className={ny(
+               "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
+            )}
+            width={20}
+            height={20}
+            squares={[80, 80]}
+            squaresClassName="hover:fill-blue-500"
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/interactive-grid-pattern-demo.tsx b/apps/web/registry/default/examples/interactive-grid-pattern-demo.tsx
new file mode 100644
index 00000000..b63e45b2
--- /dev/null
+++ b/apps/web/registry/default/examples/interactive-grid-pattern-demo.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import { ny } from "~/registry/default/lib/utils"
+import { InteractiveGridPattern } from "~/registry/default/ui/interactive-grid-pattern"
+
+export default function InteractiveGridPatternDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Interactive Grid Pattern
+         </p>
+         <InteractiveGridPattern
+            className={ny(
+               "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
+               "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/iphone-15-pro-demo-2.tsx b/apps/web/registry/default/examples/iphone-15-pro-demo-2.tsx
new file mode 100644
index 00000000..f0f25d68
--- /dev/null
+++ b/apps/web/registry/default/examples/iphone-15-pro-demo-2.tsx
@@ -0,0 +1,12 @@
+import Iphone15Pro from "~/registry/default/ui/iphone-15-pro"
+
+export default function Iphone15ProDemo() {
+   return (
+      <div className="relative">
+         <Iphone15Pro
+            className="size-full"
+            src="https://via.placeholder.com/430x880"
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/iphone-15-pro-demo.tsx b/apps/web/registry/default/examples/iphone-15-pro-demo.tsx
new file mode 100644
index 00000000..5b1a9238
--- /dev/null
+++ b/apps/web/registry/default/examples/iphone-15-pro-demo.tsx
@@ -0,0 +1,9 @@
+import Iphone15Pro from "~/registry/default/ui/iphone-15-pro"
+
+export default function Iphone15ProDemo() {
+   return (
+      <div className="relative">
+         <Iphone15Pro className="size-full" />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/label-demo.tsx b/apps/web/registry/default/examples/label-demo.tsx
new file mode 100644
index 00000000..d4fafcb8
--- /dev/null
+++ b/apps/web/registry/default/examples/label-demo.tsx
@@ -0,0 +1,13 @@
+import { Checkbox } from "~/registry/default/ui/checkbox"
+import { Label } from "~/registry/default/ui/label"
+
+export default function LabelDemo() {
+   return (
+      <div>
+         <div className="flex items-center space-x-2">
+            <Checkbox id="terms" />
+            <Label htmlFor="terms">Accept terms and conditions</Label>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/letter-pullup-demo.tsx b/apps/web/registry/default/examples/letter-pullup-demo.tsx
new file mode 100644
index 00000000..e31635f0
--- /dev/null
+++ b/apps/web/registry/default/examples/letter-pullup-demo.tsx
@@ -0,0 +1,5 @@
+import LetterPullup from "~/registry/default/ui/letter-pullup"
+
+export default async function LetterPullupDemo() {
+   return <LetterPullup words="Staggered Letter Pull Up" delay={0.05} />
+}
diff --git a/apps/web/registry/default/examples/line-shadow-text-demo.tsx b/apps/web/registry/default/examples/line-shadow-text-demo.tsx
new file mode 100644
index 00000000..d859d29b
--- /dev/null
+++ b/apps/web/registry/default/examples/line-shadow-text-demo.tsx
@@ -0,0 +1,15 @@
+import { useTheme } from "next-themes"
+import { LineShadowText } from "~/registry/default/ui/line-shadow-text"
+
+export default function LineShadowTextDemo() {
+   const theme = useTheme()
+   const shadowColor = theme.resolvedTheme === "dark" ? "white" : "black"
+   return (
+      <h1 className="text-balance text-5xl font-semibold leading-none tracking-tighter sm:text-6xl md:text-7xl lg:text-8xl">
+         Ship
+         <LineShadowText className="italic" shadowColor={shadowColor}>
+            Fast
+         </LineShadowText>
+      </h1>
+   )
+}
diff --git a/apps/web/registry/default/examples/magic-card-demo.tsx b/apps/web/registry/default/examples/magic-card-demo.tsx
new file mode 100644
index 00000000..ec7f9a14
--- /dev/null
+++ b/apps/web/registry/default/examples/magic-card-demo.tsx
@@ -0,0 +1,26 @@
+import { MagicCard, MagicContainer } from "~/registry/default/ui/magic-card"
+
+export default function MagicCardDemo() {
+   return (
+      <MagicContainer className="flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row">
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Magic
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Card
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Demo
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+      </MagicContainer>
+   )
+}
diff --git a/apps/web/registry/default/examples/magic-card-gradient.tsx b/apps/web/registry/default/examples/magic-card-gradient.tsx
new file mode 100644
index 00000000..4c4fd5e5
--- /dev/null
+++ b/apps/web/registry/default/examples/magic-card-gradient.tsx
@@ -0,0 +1,29 @@
+import { MagicCard, MagicContainer } from "~/registry/default/ui/magic-card"
+
+export default function MagicCardGradient() {
+   return (
+      <MagicContainer className="flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row">
+         <MagicCard
+            borderWidth={3}
+            className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl"
+         >
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Magic
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Card
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Demo
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+      </MagicContainer>
+   )
+}
diff --git a/apps/web/registry/default/examples/marquee-3d.tsx b/apps/web/registry/default/examples/marquee-3d.tsx
new file mode 100644
index 00000000..f3c6655f
--- /dev/null
+++ b/apps/web/registry/default/examples/marquee-3d.tsx
@@ -0,0 +1,59 @@
+import Marquee from "~/registry/default/ui/marquee"
+
+const logos = [
+   {
+      name: "Microsoft",
+      img: "https://picsum.photos/id/1/200/300",
+   },
+   {
+      name: "Apple",
+      img: "https://picsum.photos/id/2/200/300",
+   },
+   {
+      name: "Google",
+      img: "https://picsum.photos/id/3/200/300",
+   },
+   {
+      name: "Facebook",
+      img: "https://picsum.photos/id/4/200/300",
+   },
+   {
+      name: "LinkedIn",
+      img: "https://picsum.photos/id/5/200/300",
+   },
+   {
+      name: "Twitter",
+      img: "https://picsum.photos/id/6/200/300",
+   },
+]
+
+function Marquee3D() {
+   return (
+      <div className="bg-background relative flex h-full w-96 flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border px-20 md:shadow-xl">
+         <div className="flex flex-row gap-4 [perspective:300px]">
+            <Marquee
+               className="h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]"
+               vertical
+               style={{
+                  transform:
+                     "translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)",
+               }}
+            >
+               {logos.map((data, idx) => (
+                  <img
+                     key={idx}
+                     src={data.img}
+                     alt={data.name}
+                     className="mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300"
+                  />
+               ))}
+            </Marquee>
+         </div>
+
+         <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
+         <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
+      </div>
+   )
+}
+
+export default Marquee3D
diff --git a/apps/web/registry/default/examples/marquee-demo-vertical.tsx b/apps/web/registry/default/examples/marquee-demo-vertical.tsx
new file mode 100644
index 00000000..2ea28bf3
--- /dev/null
+++ b/apps/web/registry/default/examples/marquee-demo-vertical.tsx
@@ -0,0 +1,90 @@
+import { ny } from "~/lib/utils"
+import Marquee from "~/registry/default/ui/marquee"
+
+const reviews = [
+   {
+      name: "Jack",
+      username: "@jack",
+      body: "I've never seen anything like this before. It's amazing. I love it.",
+      img: "https://avatar.vercel.sh/jack",
+   },
+   {
+      name: "Jill",
+      username: "@jill",
+      body: "I don't know what to say. I'm speechless. This is amazing.",
+      img: "https://avatar.vercel.sh/jill",
+   },
+   {
+      name: "John",
+      username: "@john",
+      body: "I'm at a loss for words. This is amazing. I love it.",
+      img: "https://avatar.vercel.sh/john",
+   },
+]
+
+const firstRow = reviews.slice(0, reviews.length / 2)
+const secondRow = reviews.slice(reviews.length / 2)
+
+function ReviewCard({
+   img,
+   name,
+   username,
+   body,
+}: {
+   img: string
+   name: string
+   username: string
+   body: string
+}) {
+   return (
+      <figure
+         className={ny(
+            "relative h-40 w-36 cursor-pointer overflow-hidden rounded-xl border p-4",
+            // light styles
+            "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
+            // dark styles
+            "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
+         )}
+      >
+         <div className="flex flex-row items-center gap-2">
+            <img
+               className="rounded-full"
+               width="32"
+               height="32"
+               alt=""
+               src={img}
+            />
+            <div className="flex flex-col">
+               <figcaption className="text-sm font-medium dark:text-white">
+                  {name}
+               </figcaption>
+               <p className="text-xs font-medium dark:text-white/40">
+                  {username}
+               </p>
+            </div>
+         </div>
+         <blockquote className="mt-2 text-sm">{body}</blockquote>
+      </figure>
+   )
+}
+
+function MarqueeDemoVertical() {
+   return (
+      <div className="bg-background relative flex h-96 flex-row items-center justify-center overflow-hidden rounded-lg border sm:px-20 md:shadow-xl">
+         <Marquee pauseOnHover vertical className="[--duration:20s]">
+            {firstRow.map((review) => (
+               <ReviewCard key={review.username} {...review} />
+            ))}
+         </Marquee>
+         <Marquee reverse pauseOnHover vertical className="[--duration:20s]">
+            {secondRow.map((review) => (
+               <ReviewCard key={review.username} {...review} />
+            ))}
+         </Marquee>
+         <div className="dark:from-background pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white"></div>
+         <div className="dark:from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white"></div>
+      </div>
+   )
+}
+
+export default MarqueeDemoVertical
diff --git a/apps/web/registry/default/examples/marquee-demo.tsx b/apps/web/registry/default/examples/marquee-demo.tsx
new file mode 100644
index 00000000..bc863d7d
--- /dev/null
+++ b/apps/web/registry/default/examples/marquee-demo.tsx
@@ -0,0 +1,108 @@
+import { ny } from "~/lib/utils"
+import Marquee from "~/registry/default/ui/marquee"
+
+const reviews = [
+   {
+      name: "Jack",
+      username: "@jack",
+      body: "I've never seen anything like this before. It's amazing. I love it.",
+      img: "https://avatar.vercel.sh/jack",
+   },
+   {
+      name: "Jill",
+      username: "@jill",
+      body: "I don't know what to say. I'm speechless. This is amazing.",
+      img: "https://avatar.vercel.sh/jill",
+   },
+   {
+      name: "John",
+      username: "@john",
+      body: "I'm at a loss for words. This is amazing. I love it.",
+      img: "https://avatar.vercel.sh/john",
+   },
+   {
+      name: "Jane",
+      username: "@jane",
+      body: "I'm at a loss for words. This is amazing. I love it.",
+      img: "https://avatar.vercel.sh/jane",
+   },
+   {
+      name: "Jenny",
+      username: "@jenny",
+      body: "I'm at a loss for words. This is amazing. I love it.",
+      img: "https://avatar.vercel.sh/jenny",
+   },
+   {
+      name: "James",
+      username: "@james",
+      body: "I'm at a loss for words. This is amazing. I love it.",
+      img: "https://avatar.vercel.sh/james",
+   },
+]
+
+const firstRow = reviews.slice(0, reviews.length / 2)
+const secondRow = reviews.slice(reviews.length / 2)
+
+function ReviewCard({
+   img,
+   name,
+   username,
+   body,
+}: {
+   img: string
+   name: string
+   username: string
+   body: string
+}) {
+   return (
+      <figure
+         className={ny(
+            "relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4",
+            // light styles
+            "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
+            // dark styles
+            "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
+         )}
+      >
+         <div className="flex flex-row items-center gap-2">
+            <img
+               className="rounded-full"
+               width="32"
+               height="32"
+               alt=""
+               src={img}
+            />
+            <div className="flex flex-col">
+               <figcaption className="text-sm font-medium dark:text-white">
+                  {name}
+               </figcaption>
+               <p className="text-xs font-medium dark:text-white/40">
+                  {username}
+               </p>
+            </div>
+         </div>
+         <blockquote className="mt-2 text-sm">{body}</blockquote>
+      </figure>
+   )
+}
+
+function MarqueeDemo() {
+   return (
+      <div className="bg-background relative flex size-full flex-col items-center justify-center overflow-hidden rounded-lg border py-20 md:shadow-xl">
+         <Marquee pauseOnHover className="[--duration:20s]">
+            {firstRow.map((review) => (
+               <ReviewCard key={review.username} {...review} />
+            ))}
+         </Marquee>
+         <Marquee reverse pauseOnHover className="[--duration:20s]">
+            {secondRow.map((review) => (
+               <ReviewCard key={review.username} {...review} />
+            ))}
+         </Marquee>
+         <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
+         <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
+      </div>
+   )
+}
+
+export default MarqueeDemo
diff --git a/apps/web/registry/default/examples/marquee-logos.tsx b/apps/web/registry/default/examples/marquee-logos.tsx
new file mode 100644
index 00000000..6267983a
--- /dev/null
+++ b/apps/web/registry/default/examples/marquee-logos.tsx
@@ -0,0 +1,53 @@
+import { ny } from "~/lib/utils"
+import Marquee from "~/registry/default/ui/marquee"
+
+const logos = [
+   {
+      name: "Microsoft",
+      img: "https://cdn.simpleicons.org/microsoft/000/fff",
+   },
+   {
+      name: "Apple",
+      img: "https://cdn.simpleicons.org/apple/000/fff",
+   },
+   {
+      name: "Google",
+      img: "https://cdn.simpleicons.org/google/000/fff",
+   },
+   {
+      name: "Facebook",
+      img: "https://cdn.simpleicons.org/facebook/000/fff",
+   },
+   {
+      name: "LinkedIn",
+      img: "https://cdn.simpleicons.org/linkedin/000/fff",
+   },
+   {
+      name: "Twitter",
+      img: "https://cdn.simpleicons.org/twitter/000/fff",
+   },
+]
+
+function Logo({ name, img }: { name: string; img: string }) {
+   return (
+      <div className={ny("size-12 cursor-pointer")}>
+         <img src={img} alt={name} />
+      </div>
+   )
+}
+
+function MarqueeLogos() {
+   return (
+      <div className="bg-background relative flex size-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border py-20 md:shadow-xl">
+         <Marquee className="[--gap:3rem]">
+            {logos.map((logo, idx) => (
+               <Logo key={idx} {...logo} />
+            ))}
+         </Marquee>
+         <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
+         <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
+      </div>
+   )
+}
+
+export default MarqueeLogos
diff --git a/apps/web/registry/default/examples/menubar-demo.tsx b/apps/web/registry/default/examples/menubar-demo.tsx
new file mode 100644
index 00000000..c2be01b3
--- /dev/null
+++ b/apps/web/registry/default/examples/menubar-demo.tsx
@@ -0,0 +1,109 @@
+import {
+   Menubar,
+   MenubarCheckboxItem,
+   MenubarContent,
+   MenubarItem,
+   MenubarMenu,
+   MenubarRadioGroup,
+   MenubarRadioItem,
+   MenubarSeparator,
+   MenubarShortcut,
+   MenubarSub,
+   MenubarSubContent,
+   MenubarSubTrigger,
+   MenubarTrigger,
+} from "~/registry/default/ui/menubar"
+
+export default function MenubarDemo() {
+   return (
+      <Menubar>
+         <MenubarMenu>
+            <MenubarTrigger>File</MenubarTrigger>
+            <MenubarContent>
+               <MenubarItem>
+                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem>
+                  New Window <MenubarShortcut>⌘N</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem disabled>New Incognito Window</MenubarItem>
+               <MenubarSeparator />
+               <MenubarSub>
+                  <MenubarSubTrigger>Share</MenubarSubTrigger>
+                  <MenubarSubContent>
+                     <MenubarItem>Email link</MenubarItem>
+                     <MenubarItem>Messages</MenubarItem>
+                     <MenubarItem>Notes</MenubarItem>
+                  </MenubarSubContent>
+               </MenubarSub>
+               <MenubarSeparator />
+               <MenubarItem>
+                  Print... <MenubarShortcut>⌘P</MenubarShortcut>
+               </MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+         <MenubarMenu>
+            <MenubarTrigger>Edit</MenubarTrigger>
+            <MenubarContent>
+               <MenubarItem>
+                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem>
+                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+               </MenubarItem>
+               <MenubarSeparator />
+               <MenubarSub>
+                  <MenubarSubTrigger>Find</MenubarSubTrigger>
+                  <MenubarSubContent>
+                     <MenubarItem>Search the web</MenubarItem>
+                     <MenubarSeparator />
+                     <MenubarItem>Find...</MenubarItem>
+                     <MenubarItem>Find Next</MenubarItem>
+                     <MenubarItem>Find Previous</MenubarItem>
+                  </MenubarSubContent>
+               </MenubarSub>
+               <MenubarSeparator />
+               <MenubarItem>Cut</MenubarItem>
+               <MenubarItem>Copy</MenubarItem>
+               <MenubarItem>Paste</MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+         <MenubarMenu>
+            <MenubarTrigger>View</MenubarTrigger>
+            <MenubarContent>
+               <MenubarCheckboxItem>
+                  Always Show Bookmarks Bar
+               </MenubarCheckboxItem>
+               <MenubarCheckboxItem checked>
+                  Always Show Full URLs
+               </MenubarCheckboxItem>
+               <MenubarSeparator />
+               <MenubarItem inset>
+                  Reload <MenubarShortcut>⌘R</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem disabled inset>
+                  Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+               </MenubarItem>
+               <MenubarSeparator />
+               <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+               <MenubarSeparator />
+               <MenubarItem inset>Hide Sidebar</MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+         <MenubarMenu>
+            <MenubarTrigger>Profiles</MenubarTrigger>
+            <MenubarContent>
+               <MenubarRadioGroup value="benoit">
+                  <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+                  <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+                  <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+               </MenubarRadioGroup>
+               <MenubarSeparator />
+               <MenubarItem inset>Edit...</MenubarItem>
+               <MenubarSeparator />
+               <MenubarItem inset>Add Profile...</MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+      </Menubar>
+   )
+}
diff --git a/apps/web/registry/default/examples/meteors-demo.tsx b/apps/web/registry/default/examples/meteors-demo.tsx
new file mode 100644
index 00000000..39825cc3
--- /dev/null
+++ b/apps/web/registry/default/examples/meteors-demo.tsx
@@ -0,0 +1,12 @@
+import Meteors from "~/registry/default/ui/meteors"
+
+export default function MeteorDemo() {
+   return (
+      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
+         <Meteors number={30} />
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Meteors
+         </p>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/mode-toggle-group.tsx b/apps/web/registry/default/examples/mode-toggle-group.tsx
new file mode 100644
index 00000000..0bed3975
--- /dev/null
+++ b/apps/web/registry/default/examples/mode-toggle-group.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { Laptop, Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import * as React from "react"
+import { useEffect, useState } from "react"
+
+import {
+   ToggleGroup,
+   ToggleGroupItem,
+} from "~/registry/default/ui/toggle-group"
+
+export default function ModeToggleGroup() {
+   const { setTheme, theme } = useTheme()
+   const [currentTheme, setCurrentTheme] = useState<string>("")
+
+   useEffect(() => {
+      if (theme === "system") setCurrentTheme("system")
+      else if (theme === "dark") setCurrentTheme("dark")
+      else if (theme === "light") setCurrentTheme("light")
+   }, [theme])
+
+   return (
+      <ToggleGroup
+         type="single"
+         variant="outline"
+         className="scale-90 rounded-full border p-1"
+         value={currentTheme}
+      >
+         <ToggleGroupItem
+            value="light"
+            onClick={() => setTheme("light")}
+            disabled={theme === "light"}
+            className="disabled:bg-accent rounded-full disabled:opacity-100"
+         >
+            <Sun className="size-5" />
+         </ToggleGroupItem>
+         <ToggleGroupItem
+            value="system"
+            onClick={() => setTheme("system")}
+            disabled={theme === "system"}
+            className="disabled:bg-accent rounded-full disabled:opacity-100"
+         >
+            <Laptop className="size-5" />
+         </ToggleGroupItem>
+         <ToggleGroupItem
+            value="dark"
+            onClick={() => setTheme("dark")}
+            disabled={theme === "dark"}
+            className="disabled:bg-accent rounded-full disabled:opacity-100"
+         >
+            <Moon className="size-5" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/default/examples/mode-toggle.tsx b/apps/web/registry/default/examples/mode-toggle.tsx
new file mode 100644
index 00000000..17560597
--- /dev/null
+++ b/apps/web/registry/default/examples/mode-toggle.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/default/ui/dropdown-menu"
+
+export default function ModeToggle() {
+   const { setTheme } = useTheme()
+
+   return (
+      <DropdownMenu>
+         <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="icon">
+               <Sun className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+               <Moon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+               <span className="sr-only">Toggle theme</span>
+            </Button>
+         </DropdownMenuTrigger>
+         <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setTheme("light")}>
+               Light
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setTheme("dark")}>
+               Dark
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setTheme("system")}>
+               System
+            </DropdownMenuItem>
+         </DropdownMenuContent>
+      </DropdownMenu>
+   )
+}
diff --git a/apps/web/registry/default/examples/morphing-text-demo.tsx b/apps/web/registry/default/examples/morphing-text-demo.tsx
new file mode 100644
index 00000000..4a135994
--- /dev/null
+++ b/apps/web/registry/default/examples/morphing-text-demo.tsx
@@ -0,0 +1,17 @@
+import { MorphingText } from "~/registry/default/ui/morphing-text"
+
+const texts = [
+   "Hello",
+   "Morphing",
+   "Text",
+   "Animation",
+   "React",
+   "Component",
+   "Smooth",
+   "Transition",
+   "Engaging",
+]
+
+export default function MorphingTextDemo() {
+   return <MorphingText texts={texts} />
+}
diff --git a/apps/web/registry/default/examples/multi-select-basic.tsx b/apps/web/registry/default/examples/multi-select-basic.tsx
new file mode 100644
index 00000000..4c5b2b2e
--- /dev/null
+++ b/apps/web/registry/default/examples/multi-select-basic.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectGroup,
+   MultiSelectItem,
+   MultiSelectList,
+   MultiSelectTrigger,
+   MultiSelectValue,
+} from "~/registry/default/ui/multi-select"
+
+export default function MultiSelectBasicDemo() {
+   return (
+      <MultiSelect>
+         <MultiSelectTrigger className="w-96">
+            <MultiSelectValue placeholder="Select stack" />
+         </MultiSelectTrigger>
+         <MultiSelectContent>
+            <MultiSelectList>
+               <MultiSelectGroup heading="React">
+                  <MultiSelectItem value="react">React</MultiSelectItem>
+                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
+                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Vue">
+                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
+                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Others">
+                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
+                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
+               </MultiSelectGroup>
+            </MultiSelectList>
+         </MultiSelectContent>
+      </MultiSelect>
+   )
+}
diff --git a/apps/web/registry/default/examples/multi-select-controllable-search.tsx b/apps/web/registry/default/examples/multi-select-controllable-search.tsx
new file mode 100644
index 00000000..8036e7e0
--- /dev/null
+++ b/apps/web/registry/default/examples/multi-select-controllable-search.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { useRef, useState } from "react"
+
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectEmpty,
+   MultiSelectList,
+   type MultiSelectOption,
+   type MultiSelectOptionGroup,
+   MultiSelectSearch,
+   MultiSelectTrigger,
+   MultiSelectValue,
+   renderMultiSelectOptions,
+} from "~/registry/default/ui/multi-select"
+
+const ALL_ITEMS = [
+   { value: "react", label: "React", group: "React" },
+   { value: "next", label: "Next.js", group: "React" },
+   { value: "remix", label: "Remix", group: "React" },
+   { value: "vue", label: "Vue", group: "Vue" },
+   { value: "nuxt", label: "Nuxt.js", group: "Vue" },
+   { value: "angular", label: "Angular", group: "Others" },
+   { value: "svelte", label: "Svelte", group: "Others" },
+]
+
+function group(
+   options: Array<(typeof ALL_ITEMS)[number]>,
+): MultiSelectOptionGroup[] {
+   return options.reduce((acc, item) => {
+      const group = acc.find((g) => g.heading === item.group)
+      if (group) group.children.push(item)
+      else acc.push({ heading: item.group, children: [item] })
+
+      return acc
+   }, [] as MultiSelectOptionGroup[])
+}
+
+async function search(keyword?: string) {
+   if (!keyword) return group(ALL_ITEMS)
+   await new Promise((resolve) => setTimeout(resolve, 500))
+   const lowerKeyword = keyword.toLowerCase()
+   const filtered = ALL_ITEMS.filter((item) =>
+      item.label.toLowerCase().includes(lowerKeyword),
+   )
+   return group(filtered)
+}
+
+export default function MultiSelectControllableSearchDemo() {
+   const [loading, setLoading] = useState(false)
+   const [options, setOptions] = useState<MultiSelectOption[]>(() =>
+      group(ALL_ITEMS),
+   )
+
+   const indexRef = useRef(0)
+
+   const handleSearch = async (keyword?: string) => {
+      const index = ++indexRef.current
+      setLoading(true)
+      const newOptions = await search(keyword)
+      if (indexRef.current === index) {
+         setOptions(newOptions)
+         setLoading(false)
+      }
+   }
+
+   return (
+      <MultiSelect onSearch={handleSearch}>
+         <MultiSelectTrigger className="w-96">
+            <MultiSelectValue placeholder="Select stack" />
+         </MultiSelectTrigger>
+         <MultiSelectContent>
+            <MultiSelectSearch />
+            <MultiSelectList>
+               {loading ? null : renderMultiSelectOptions(options)}
+               <MultiSelectEmpty>
+                  {loading ? "Loading..." : "No results found"}
+               </MultiSelectEmpty>
+            </MultiSelectList>
+         </MultiSelectContent>
+      </MultiSelect>
+   )
+}
diff --git a/apps/web/registry/default/examples/multi-select-filter.tsx b/apps/web/registry/default/examples/multi-select-filter.tsx
new file mode 100644
index 00000000..6993124f
--- /dev/null
+++ b/apps/web/registry/default/examples/multi-select-filter.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectEmpty,
+   MultiSelectGroup,
+   MultiSelectItem,
+   MultiSelectList,
+   MultiSelectSearch,
+   MultiSelectTrigger,
+   MultiSelectValue,
+} from "~/registry/default/ui/multi-select"
+
+export default function MultiSelectFilterDemo() {
+   return (
+      <MultiSelect>
+         <MultiSelectTrigger className="w-96">
+            <MultiSelectValue placeholder="Select stack" />
+         </MultiSelectTrigger>
+         <MultiSelectContent>
+            <MultiSelectSearch placeholder="Input to search" />
+            <MultiSelectList>
+               <MultiSelectGroup heading="React">
+                  <MultiSelectItem value="react">React</MultiSelectItem>
+                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
+                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Vue">
+                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
+                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Others">
+                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
+                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
+               </MultiSelectGroup>
+            </MultiSelectList>
+            <MultiSelectEmpty />
+         </MultiSelectContent>
+      </MultiSelect>
+   )
+}
diff --git a/apps/web/registry/default/examples/multi-select-form.tsx b/apps/web/registry/default/examples/multi-select-form.tsx
new file mode 100644
index 00000000..a17d6d03
--- /dev/null
+++ b/apps/web/registry/default/examples/multi-select-form.tsx
@@ -0,0 +1,161 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import Link from "next/link"
+import { useRef, useState } from "react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectEmpty,
+   MultiSelectList,
+   type MultiSelectOption,
+   type MultiSelectOptionGroup,
+   MultiSelectSearch,
+   MultiSelectTrigger,
+   MultiSelectValue,
+   renderMultiSelectOptions,
+} from "~/registry/default/ui/multi-select"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const ALL_ITEMS = [
+   { value: "react", label: "React", group: "React" },
+   { value: "next", label: "Next.js", group: "React" },
+   { value: "remix", label: "Remix", group: "React" },
+   { value: "vue", label: "Vue", group: "Vue" },
+   { value: "nuxt", label: "Nuxt.js", group: "Vue" },
+   { value: "angular", label: "Angular", group: "Others" },
+   { value: "svelte", label: "Svelte", group: "Others" },
+]
+
+function group(
+   options: Array<(typeof ALL_ITEMS)[number]>,
+): MultiSelectOptionGroup[] {
+   return options.reduce((acc, item) => {
+      const group = acc.find((g) => g.heading === item.group)
+      if (group) group.children.push(item)
+      else acc.push({ heading: item.group, children: [item] })
+
+      return acc
+   }, [] as MultiSelectOptionGroup[])
+}
+
+async function search(keyword?: string) {
+   if (!keyword) return group(ALL_ITEMS)
+   const lowerKeyword = keyword.toLowerCase()
+   const filtered = ALL_ITEMS.filter((item) =>
+      item.label.toLowerCase().includes(lowerKeyword),
+   )
+
+   if (!filtered.length) {
+      return [
+         {
+            label: keyword,
+            value: keyword,
+         },
+      ]
+   }
+
+   return group(filtered)
+}
+
+const FormSchema = z.object({
+   frameworks: z.array(z.string(), {
+      required_error: "Please select at least one framework.",
+   }),
+})
+
+export default function MultiSelectFormDemo() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   const [loading, setLoading] = useState(false)
+   const [options, setOptions] = useState<MultiSelectOption[]>(() =>
+      group(ALL_ITEMS),
+   )
+
+   const indexRef = useRef(0)
+
+   const handleSearch = async (keyword: string) => {
+      const index = ++indexRef.current
+      setLoading(true)
+      const newOptions = await search(keyword)
+      if (indexRef.current === index) {
+         setOptions(newOptions)
+         setLoading(false)
+      }
+   }
+
+   const onSubmit = (data: z.infer<typeof FormSchema>) => {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="frameworks"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Frameworks</FormLabel>
+                     <MultiSelect
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                        onSearch={(keyword) => handleSearch(keyword ?? "")}
+                     >
+                        <FormControl>
+                           <MultiSelectTrigger className="w-96">
+                              <MultiSelectValue placeholder="Select frameworks" />
+                           </MultiSelectTrigger>
+                        </FormControl>
+                        <MultiSelectContent>
+                           <MultiSelectSearch />
+                           <MultiSelectList>
+                              {loading
+                                 ? null
+                                 : renderMultiSelectOptions(options)}
+                              <MultiSelectEmpty>
+                                 {loading ? "Loading..." : "No results found"}
+                              </MultiSelectEmpty>
+                           </MultiSelectList>
+                        </MultiSelectContent>
+                     </MultiSelect>
+                     <FormDescription>
+                        You can manage frameworks in{" "}
+                        <Link href="/examples/forms">framework settings</Link>.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/multi-select-input-custom.tsx b/apps/web/registry/default/examples/multi-select-input-custom.tsx
new file mode 100644
index 00000000..2085eac3
--- /dev/null
+++ b/apps/web/registry/default/examples/multi-select-input-custom.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { useRef, useState } from "react"
+
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectEmpty,
+   MultiSelectList,
+   type MultiSelectOption,
+   type MultiSelectOptionGroup,
+   MultiSelectSearch,
+   MultiSelectTrigger,
+   MultiSelectValue,
+   renderMultiSelectOptions,
+} from "~/registry/default/ui/multi-select"
+
+const ALL_ITEMS = [
+   { value: "react", label: "React", group: "React" },
+   { value: "next", label: "Next.js", group: "React" },
+   { value: "remix", label: "Remix", group: "React" },
+   { value: "vue", label: "Vue", group: "Vue" },
+   { value: "nuxt", label: "Nuxt.js", group: "Vue" },
+   { value: "angular", label: "Angular", group: "Others" },
+   { value: "svelte", label: "Svelte", group: "Others" },
+]
+
+function group(
+   options: Array<(typeof ALL_ITEMS)[number]>,
+): MultiSelectOptionGroup[] {
+   return options.reduce((acc, item) => {
+      const group = acc.find((g) => g.heading === item.group)
+      if (group) group.children.push(item)
+      else acc.push({ heading: item.group, children: [item] })
+
+      return acc
+   }, [] as MultiSelectOptionGroup[])
+}
+
+async function search(keyword?: string) {
+   if (!keyword) return group(ALL_ITEMS)
+   const lowerKeyword = keyword.toLowerCase()
+   const filtered = ALL_ITEMS.filter((item) =>
+      item.label.toLowerCase().includes(lowerKeyword),
+   )
+
+   if (!filtered.length) {
+      return [
+         {
+            label: keyword,
+            value: keyword,
+         },
+      ]
+   }
+
+   return group(filtered)
+}
+
+export default function MultiSelectInputCustomDemo() {
+   const [loading, setLoading] = useState(false)
+   const [options, setOptions] = useState<MultiSelectOption[]>(() =>
+      group(ALL_ITEMS),
+   )
+
+   const indexRef = useRef(0)
+
+   const handleSearch = async (keyword: string) => {
+      const index = ++indexRef.current
+      setLoading(true)
+      const newOptions = await search(keyword)
+      if (indexRef.current === index) {
+         setOptions(newOptions)
+         setLoading(false)
+      }
+   }
+
+   return (
+      <MultiSelect onSearch={(keyword) => handleSearch(keyword ?? "")}>
+         <MultiSelectTrigger className="w-96">
+            <MultiSelectValue placeholder="Select stack" />
+         </MultiSelectTrigger>
+         <MultiSelectContent>
+            <MultiSelectSearch placeholder="input any..." />
+            <MultiSelectList>
+               {loading ? null : renderMultiSelectOptions(options)}
+               <MultiSelectEmpty>
+                  {loading ? "Loading..." : "No results found"}
+               </MultiSelectEmpty>
+            </MultiSelectList>
+         </MultiSelectContent>
+      </MultiSelect>
+   )
+}
diff --git a/apps/web/registry/default/examples/multi-select-limit-count.tsx b/apps/web/registry/default/examples/multi-select-limit-count.tsx
new file mode 100644
index 00000000..74988f5f
--- /dev/null
+++ b/apps/web/registry/default/examples/multi-select-limit-count.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectGroup,
+   MultiSelectItem,
+   MultiSelectList,
+   MultiSelectTrigger,
+   MultiSelectValue,
+} from "~/registry/default/ui/multi-select"
+
+export default function MultiSelectLimitCountDemo() {
+   return (
+      <MultiSelect defaultValue={["react", "next", "remix"]} maxCount={3}>
+         <MultiSelectTrigger className="w-96">
+            <MultiSelectValue placeholder="Select stack" />
+         </MultiSelectTrigger>
+         <MultiSelectContent>
+            <MultiSelectList>
+               <MultiSelectGroup heading="React">
+                  <MultiSelectItem value="react">React</MultiSelectItem>
+                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
+                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Vue">
+                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
+                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Others">
+                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
+                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
+               </MultiSelectGroup>
+            </MultiSelectList>
+         </MultiSelectContent>
+      </MultiSelect>
+   )
+}
diff --git a/apps/web/registry/default/examples/multi-select-limit-display-length.tsx b/apps/web/registry/default/examples/multi-select-limit-display-length.tsx
new file mode 100644
index 00000000..b700528a
--- /dev/null
+++ b/apps/web/registry/default/examples/multi-select-limit-display-length.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectGroup,
+   MultiSelectItem,
+   MultiSelectList,
+   MultiSelectTrigger,
+   MultiSelectValue,
+} from "~/registry/default/ui/multi-select"
+
+export default function MultiSelectLimitDisplayLengthDemo() {
+   return (
+      <MultiSelect defaultValue={["long", "react", "angular", "vue", "remix"]}>
+         <MultiSelectTrigger className="w-96">
+            <MultiSelectValue
+               placeholder="Select stack"
+               maxDisplay={3}
+               maxItemLength={5}
+            />
+         </MultiSelectTrigger>
+         <MultiSelectContent>
+            <MultiSelectList>
+               <MultiSelectGroup heading="React">
+                  <MultiSelectItem value="react">React</MultiSelectItem>
+                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
+                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Vue">
+                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
+                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Others">
+                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
+                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
+                  <MultiSelectItem value="long">
+                     VeryVeryLongItem
+                  </MultiSelectItem>
+               </MultiSelectGroup>
+            </MultiSelectList>
+         </MultiSelectContent>
+      </MultiSelect>
+   )
+}
diff --git a/apps/web/registry/default/examples/navigation-menu-demo.tsx b/apps/web/registry/default/examples/navigation-menu-demo.tsx
new file mode 100644
index 00000000..4ddde477
--- /dev/null
+++ b/apps/web/registry/default/examples/navigation-menu-demo.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import Link from "next/link"
+import * as React from "react"
+
+import { Icons } from "~/components/icons"
+import { ny } from "~/lib/utils"
+import {
+   NavigationMenu,
+   NavigationMenuContent,
+   NavigationMenuItem,
+   NavigationMenuLink,
+   NavigationMenuList,
+   NavigationMenuTrigger,
+   navigationMenuTriggerStyle,
+} from "~/registry/default/ui/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+   {
+      title: "Alert Dialog",
+      href: "/docs/primitives/alert-dialog",
+      description:
+         "A modal dialog that interrupts the user with important content and expects a response.",
+   },
+   {
+      title: "Hover Card",
+      href: "/docs/primitives/hover-card",
+      description:
+         "For sighted users to preview content available behind a link.",
+   },
+   {
+      title: "Progress",
+      href: "/docs/primitives/progress",
+      description:
+         "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+   },
+   {
+      title: "Scroll-area",
+      href: "/docs/primitives/scroll-area",
+      description: "Visually or semantically separates content.",
+   },
+   {
+      title: "Tabs",
+      href: "/docs/primitives/tabs",
+      description:
+         "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+   },
+   {
+      title: "Tooltip",
+      href: "/docs/primitives/tooltip",
+      description:
+         "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+   },
+]
+
+export default function NavigationMenuDemo() {
+   return (
+      <NavigationMenu>
+         <NavigationMenuList>
+            <NavigationMenuItem>
+               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+               <NavigationMenuContent>
+                  <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                     <li className="row-span-3">
+                        <NavigationMenuLink asChild>
+                           <a
+                              className="from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md"
+                              href="/"
+                           >
+                              <Icons.logo className="size-6" />
+                              <div className="mb-2 mt-4 text-lg font-medium">
+                                 nyxb/ui
+                              </div>
+                              <p className="text-muted-foreground text-sm leading-tight">
+                                 Beautifully designed components that you can
+                                 copy and paste into your apps. Accessible.
+                                 Customizable. Open Source.
+                              </p>
+                           </a>
+                        </NavigationMenuLink>
+                     </li>
+                     <ListItem href="/docs" title="Introduction">
+                        Re-usable components built using Radix UI and Tailwind
+                        CSS.
+                     </ListItem>
+                     <ListItem href="/docs/installation" title="Installation">
+                        How to install dependencies and structure your app.
+                     </ListItem>
+                     <ListItem
+                        href="/docs/primitives/typography"
+                        title="Typography"
+                     >
+                        Styles for headings, paragraphs, lists...etc
+                     </ListItem>
+                  </ul>
+               </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+               <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+               <NavigationMenuContent>
+                  <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                     {components.map((component) => (
+                        <ListItem
+                           key={component.title}
+                           title={component.title}
+                           href={component.href}
+                        >
+                           {component.description}
+                        </ListItem>
+                     ))}
+                  </ul>
+               </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+               <Link href="/docs" legacyBehavior passHref>
+                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                     Documentation
+                  </NavigationMenuLink>
+               </Link>
+            </NavigationMenuItem>
+         </NavigationMenuList>
+      </NavigationMenu>
+   )
+}
+
+const ListItem = React.forwardRef<
+   React.ElementRef<"a">,
+   React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+   return (
+      <li>
+         <NavigationMenuLink asChild>
+            <a
+               ref={ref}
+               className={ny(
+                  "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors",
+                  className,
+               )}
+               {...props}
+            >
+               <div className="text-sm font-medium leading-none">{title}</div>
+               <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                  {children}
+               </p>
+            </a>
+         </NavigationMenuLink>
+      </li>
+   )
+})
+ListItem.displayName = "ListItem"
diff --git a/apps/web/registry/default/examples/neon-gradient-card-demo.tsx b/apps/web/registry/default/examples/neon-gradient-card-demo.tsx
new file mode 100644
index 00000000..df2f214e
--- /dev/null
+++ b/apps/web/registry/default/examples/neon-gradient-card-demo.tsx
@@ -0,0 +1,11 @@
+import { NeonGradientCard } from "~/registry/default/ui/neon-gradient-card"
+
+export default function NeonGradientCardDemo() {
+   return (
+      <NeonGradientCard className="max-w-sm items-center justify-center text-center">
+         <span className="pointer-events-none z-10 h-full whitespace-pre-wrap bg-gradient-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-6xl font-bold leading-none tracking-tighter text-transparent dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]">
+            Neon Gradient Card
+         </span>
+      </NeonGradientCard>
+   )
+}
diff --git a/apps/web/registry/default/examples/number-ticker-demo.tsx b/apps/web/registry/default/examples/number-ticker-demo.tsx
new file mode 100644
index 00000000..627da743
--- /dev/null
+++ b/apps/web/registry/default/examples/number-ticker-demo.tsx
@@ -0,0 +1,11 @@
+import NumberTicker from "~/registry/default/ui/number-ticker"
+
+function NumberTickerDemo() {
+   return (
+      <p className="whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white">
+         <NumberTicker value={100} />
+      </p>
+   )
+}
+
+export default NumberTickerDemo
diff --git a/apps/web/registry/default/examples/nyx-toc-demo.tsx b/apps/web/registry/default/examples/nyx-toc-demo.tsx
new file mode 100644
index 00000000..43b9c644
--- /dev/null
+++ b/apps/web/registry/default/examples/nyx-toc-demo.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { NyxTOCItems } from "~/registry/miami/ui/nyx-toc"
+
+const demoItems = [
+   {
+      title: "Introduction",
+      url: "#introduction",
+      depth: 1,
+   },
+   {
+      title: "Getting Started",
+      url: "#getting-started",
+      depth: 2,
+   },
+   {
+      title: "Installation",
+      url: "#installation",
+      depth: 3,
+   },
+   {
+      title: "Basic Usage",
+      url: "#basic-usage",
+      depth: 3,
+   },
+   {
+      title: "Advanced Features",
+      url: "#advanced-features",
+      depth: 2,
+   },
+   {
+      title: "API Reference",
+      url: "#api-reference",
+      depth: 2,
+   },
+]
+
+export default function NyxTOCDemo() {
+   return (
+      <div className="flex gap-10">
+         <div className="flex-1">
+            <NyxTOCItems items={demoItems} label="On This Page" />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/nyx-toc-popover-demo.tsx b/apps/web/registry/default/examples/nyx-toc-popover-demo.tsx
new file mode 100644
index 00000000..79a39149
--- /dev/null
+++ b/apps/web/registry/default/examples/nyx-toc-popover-demo.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react"
+import {
+   NyxTOCItems,
+   TocPopover,
+   TocPopoverContent,
+   TocPopoverTrigger,
+} from "~/registry/default/ui/nyx-toc"
+
+export default function NyxTOCPopoverDemo() {
+   // Example TOC items
+   const items = [
+      { title: "Introduction", url: "#introduction", depth: 1 },
+      { title: "Getting Started", url: "#getting-started", depth: 2 },
+      { title: "Installation", url: "#installation", depth: 2 },
+      { title: "Basic Usage", url: "#basic-usage", depth: 3 },
+      { title: "Advanced Features", url: "#advanced-features", depth: 2 },
+      { title: "Configuration", url: "#configuration", depth: 3 },
+      { title: "Customization", url: "#customization", depth: 2 },
+   ]
+
+   return (
+      <div className="flex h-[300px] w-full items-start justify-center p-6">
+         <TocPopover>
+            <TocPopoverTrigger
+               items={items}
+               className="hover:bg-accent rounded-md border"
+            />
+            <TocPopoverContent>
+               <NyxTOCItems items={items} isMenu label="On This Page" />
+            </TocPopoverContent>
+         </TocPopover>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/orbiting-circles-demo.tsx b/apps/web/registry/default/examples/orbiting-circles-demo.tsx
new file mode 100644
index 00000000..ad541892
--- /dev/null
+++ b/apps/web/registry/default/examples/orbiting-circles-demo.tsx
@@ -0,0 +1,176 @@
+import OrbitingCircles from "~/registry/default/ui/orbiting-circles"
+
+export default function OrbitingCirclesDemo() {
+   return (
+      <div className="bg-background relative flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Circles
+         </span>
+
+         {/* Inner Circles */}
+         <OrbitingCircles
+            className="size-[30px] border-none bg-transparent"
+            duration={20}
+            delay={20}
+            radius={80}
+         >
+            <Icons.whatsapp />
+         </OrbitingCircles>
+         <OrbitingCircles
+            className="size-[30px] border-none bg-transparent"
+            duration={20}
+            delay={10}
+            radius={80}
+         >
+            <Icons.notion />
+         </OrbitingCircles>
+
+         {/* Outer Circles (reverse) */}
+         <OrbitingCircles
+            className="size-[50px] border-none bg-transparent"
+            radius={190}
+            duration={20}
+            reverse
+         >
+            <Icons.googleDrive />
+         </OrbitingCircles>
+         <OrbitingCircles
+            className="size-[50px] border-none bg-transparent"
+            radius={190}
+            duration={20}
+            delay={20}
+            reverse
+         >
+            <Icons.gitHub />
+         </OrbitingCircles>
+      </div>
+   )
+}
+
+const Icons = {
+   gitHub: () => (
+      <svg width="100" height="100" viewBox="0 0 438.549 438.549">
+         <path
+            fill="currentColor"
+            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+         />
+      </svg>
+   ),
+   notion: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 100 100"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+            fill="#ffffff"
+         />
+         <path
+            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+            fill="#000000"
+            fillRule="evenodd"
+            clipRule="evenodd"
+         />
+      </svg>
+   ),
+   openai: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 24 24"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+   ),
+   googleDrive: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 87.3 78"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+            fill="#0066da"
+         />
+         <path
+            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+            fill="#00ac47"
+         />
+         <path
+            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335"
+         />
+         <path
+            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+            fill="#00832d"
+         />
+         <path
+            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+            fill="#2684fc"
+         />
+         <path
+            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00"
+         />
+      </svg>
+   ),
+   whatsapp: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 175.216 175.552"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <linearGradient
+               id="b"
+               x1="85.915"
+               x2="86.535"
+               y1="32.567"
+               y2="137.092"
+               gradientUnits="userSpaceOnUse"
+            >
+               <stop offset="0" stopColor="#57d163" />
+               <stop offset="1" stopColor="#23b33a" />
+            </linearGradient>
+            <filter
+               id="a"
+               width="1.115"
+               height="1.114"
+               x="-.057"
+               y="-.057"
+               colorInterpolationFilters="sRGB"
+            >
+               <feGaussianBlur stdDeviation="3.531" />
+            </filter>
+         </defs>
+         <path
+            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
+            fill="#b3b3b3"
+            filter="url(#a)"
+         />
+         <path
+            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
+            fill="#ffffff"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
+            fill="url(#linearGradient1780)"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
+            fill="url(#b)"
+         />
+         <path
+            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
+            fill="#ffffff"
+            fillRule="evenodd"
+         />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/default/examples/pagination-demo.tsx b/apps/web/registry/default/examples/pagination-demo.tsx
new file mode 100644
index 00000000..0025153f
--- /dev/null
+++ b/apps/web/registry/default/examples/pagination-demo.tsx
@@ -0,0 +1,38 @@
+import {
+   Pagination,
+   PaginationContent,
+   PaginationEllipsis,
+   PaginationItem,
+   PaginationLink,
+   PaginationNext,
+   PaginationPrevious,
+} from "~/registry/default/ui/pagination"
+
+export default function PaginationDemo() {
+   return (
+      <Pagination>
+         <PaginationContent>
+            <PaginationItem>
+               <PaginationPrevious href="#" />
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationLink href="#">1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationLink href="#" isActive>
+                  2
+               </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationLink href="#">3</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationNext href="#" />
+            </PaginationItem>
+         </PaginationContent>
+      </Pagination>
+   )
+}
diff --git a/apps/web/registry/default/examples/particles-demo.tsx b/apps/web/registry/default/examples/particles-demo.tsx
new file mode 100644
index 00000000..662a2b04
--- /dev/null
+++ b/apps/web/registry/default/examples/particles-demo.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+import Particles from "~/registry/miami/ui/particles"
+
+function ParticlesDemo() {
+   const { theme } = useTheme()
+   const [color, setColor] = useState("#ffffff")
+
+   useEffect(() => {
+      setColor(theme === "dark" ? "#ffffff" : "#000000")
+   }, [theme])
+
+   return (
+      <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Particles
+         </span>
+         <Particles
+            className="absolute inset-0"
+            quantity={100}
+            ease={80}
+            color={color}
+            refresh
+         />
+      </div>
+   )
+}
+
+export default ParticlesDemo
diff --git a/apps/web/registry/default/examples/popover-demo.tsx b/apps/web/registry/default/examples/popover-demo.tsx
new file mode 100644
index 00000000..3f86ca9e
--- /dev/null
+++ b/apps/web/registry/default/examples/popover-demo.tsx
@@ -0,0 +1,62 @@
+import { Button } from "~/registry/default/ui/button"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+
+export default function PopoverDemo() {
+   return (
+      <Popover>
+         <PopoverTrigger asChild>
+            <Button variant="outline">Open popover</Button>
+         </PopoverTrigger>
+         <PopoverContent className="w-80">
+            <div className="grid gap-4">
+               <div className="space-y-2">
+                  <h4 className="font-medium leading-none">Dimensions</h4>
+                  <p className="text-muted-foreground text-sm">
+                     Set the dimensions for the layer.
+                  </p>
+               </div>
+               <div className="grid gap-2">
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="width">Width</Label>
+                     <Input
+                        id="width"
+                        defaultValue="100%"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="maxWidth">Max. width</Label>
+                     <Input
+                        id="maxWidth"
+                        defaultValue="300px"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="height">Height</Label>
+                     <Input
+                        id="height"
+                        defaultValue="25px"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="maxHeight">Max. height</Label>
+                     <Input
+                        id="maxHeight"
+                        defaultValue="none"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+               </div>
+            </div>
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/default/examples/progress-demo.tsx b/apps/web/registry/default/examples/progress-demo.tsx
new file mode 100644
index 00000000..8c3f7819
--- /dev/null
+++ b/apps/web/registry/default/examples/progress-demo.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import * as React from "react"
+
+import { Progress } from "~/registry/default/ui/progress"
+
+export default function ProgressDemo() {
+   const [progress, setProgress] = React.useState(13)
+
+   React.useEffect(() => {
+      const timer = setTimeout(() => setProgress(66), 500)
+      return () => clearTimeout(timer)
+   }, [])
+
+   return <Progress value={progress} className="w-3/5" />
+}
diff --git a/apps/web/registry/default/examples/pulsating-button-demo.tsx b/apps/web/registry/default/examples/pulsating-button-demo.tsx
new file mode 100644
index 00000000..050abc7f
--- /dev/null
+++ b/apps/web/registry/default/examples/pulsating-button-demo.tsx
@@ -0,0 +1,17 @@
+import { PulsatingButton } from "~/registry/default/ui/pulsating-button"
+
+function PulsatingButtonDemo() {
+   return (
+      <PulsatingButton
+         text="Join Affiliate Program"
+         pulseColor="150, 0, 255"
+         backgroundColor="#9945FF"
+         textColor="#ffffff"
+         animationDuration="1.5s"
+         buttonWidth="200px"
+         buttonHeight="50px"
+      />
+   )
+}
+
+export default PulsatingButtonDemo
diff --git a/apps/web/registry/default/examples/radio-group-demo.tsx b/apps/web/registry/default/examples/radio-group-demo.tsx
new file mode 100644
index 00000000..a16d2d13
--- /dev/null
+++ b/apps/web/registry/default/examples/radio-group-demo.tsx
@@ -0,0 +1,21 @@
+import { Label } from "~/registry/default/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/default/ui/radio-group"
+
+export default function RadioGroupDemo() {
+   return (
+      <RadioGroup defaultValue="comfortable">
+         <div className="flex items-center space-x-2">
+            <RadioGroupItem value="default" id="r1" />
+            <Label htmlFor="r1">Default</Label>
+         </div>
+         <div className="flex items-center space-x-2">
+            <RadioGroupItem value="comfortable" id="r2" />
+            <Label htmlFor="r2">Comfortable</Label>
+         </div>
+         <div className="flex items-center space-x-2">
+            <RadioGroupItem value="compact" id="r3" />
+            <Label htmlFor="r3">Compact</Label>
+         </div>
+      </RadioGroup>
+   )
+}
diff --git a/apps/web/registry/default/examples/radio-group-form.tsx b/apps/web/registry/default/examples/radio-group-form.tsx
new file mode 100644
index 00000000..e1dd8e21
--- /dev/null
+++ b/apps/web/registry/default/examples/radio-group-form.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Form,
+   FormControl,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import { RadioGroup, RadioGroupItem } from "~/registry/default/ui/radio-group"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+   type: z.enum(["all", "mentions", "none"], {
+      required_error: "You need to select a notification type.",
+   }),
+})
+
+export default function RadioGroupForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="type"
+               render={({ field }) => (
+                  <FormItem className="space-y-3">
+                     <FormLabel>Notify me about...</FormLabel>
+                     <FormControl>
+                        <RadioGroup
+                           onValueChange={field.onChange}
+                           defaultValue={field.value}
+                           className="flex flex-col space-y-1"
+                        >
+                           <FormItem className="flex items-center space-x-3 space-y-0">
+                              <FormControl>
+                                 <RadioGroupItem value="all" />
+                              </FormControl>
+                              <FormLabel className="font-normal">
+                                 All new messages
+                              </FormLabel>
+                           </FormItem>
+                           <FormItem className="flex items-center space-x-3 space-y-0">
+                              <FormControl>
+                                 <RadioGroupItem value="mentions" />
+                              </FormControl>
+                              <FormLabel className="font-normal">
+                                 Direct messages and mentions
+                              </FormLabel>
+                           </FormItem>
+                           <FormItem className="flex items-center space-x-3 space-y-0">
+                              <FormControl>
+                                 <RadioGroupItem value="none" />
+                              </FormControl>
+                              <FormLabel className="font-normal">
+                                 Nothing
+                              </FormLabel>
+                           </FormItem>
+                        </RadioGroup>
+                     </FormControl>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/rainbow-button-demo.tsx b/apps/web/registry/default/examples/rainbow-button-demo.tsx
new file mode 100644
index 00000000..ff411dce
--- /dev/null
+++ b/apps/web/registry/default/examples/rainbow-button-demo.tsx
@@ -0,0 +1,5 @@
+import { RainbowButton } from "~/registry/default/ui/rainbow-button"
+
+export default function RainbowButtonDemo() {
+   return <RainbowButton>Get Unlimited Access</RainbowButton>
+}
diff --git a/apps/web/registry/default/examples/resizable-demo-with-handle.tsx b/apps/web/registry/default/examples/resizable-demo-with-handle.tsx
new file mode 100644
index 00000000..deab262c
--- /dev/null
+++ b/apps/web/registry/default/examples/resizable-demo-with-handle.tsx
@@ -0,0 +1,36 @@
+import {
+   ResizableHandle,
+   ResizablePanel,
+   ResizablePanelGroup,
+} from "~/registry/default/ui/resizable"
+
+export default function ResizableDemo() {
+   return (
+      <ResizablePanelGroup
+         direction="horizontal"
+         className="max-w-md rounded-lg border"
+      >
+         <ResizablePanel defaultSize={50}>
+            <div className="flex h-[200px] items-center justify-center p-6">
+               <span className="font-semibold">One</span>
+            </div>
+         </ResizablePanel>
+         <ResizableHandle withHandle />
+         <ResizablePanel defaultSize={50}>
+            <ResizablePanelGroup direction="vertical">
+               <ResizablePanel defaultSize={25}>
+                  <div className="flex h-full items-center justify-center p-6">
+                     <span className="font-semibold">Two</span>
+                  </div>
+               </ResizablePanel>
+               <ResizableHandle withHandle />
+               <ResizablePanel defaultSize={75}>
+                  <div className="flex h-full items-center justify-center p-6">
+                     <span className="font-semibold">Three</span>
+                  </div>
+               </ResizablePanel>
+            </ResizablePanelGroup>
+         </ResizablePanel>
+      </ResizablePanelGroup>
+   )
+}
diff --git a/apps/web/registry/default/examples/resizable-demo.tsx b/apps/web/registry/default/examples/resizable-demo.tsx
new file mode 100644
index 00000000..f8a760f0
--- /dev/null
+++ b/apps/web/registry/default/examples/resizable-demo.tsx
@@ -0,0 +1,36 @@
+import {
+   ResizableHandle,
+   ResizablePanel,
+   ResizablePanelGroup,
+} from "~/registry/default/ui/resizable"
+
+export default function ResizableDemo() {
+   return (
+      <ResizablePanelGroup
+         direction="horizontal"
+         className="max-w-md rounded-lg border"
+      >
+         <ResizablePanel defaultSize={50}>
+            <div className="flex h-[200px] items-center justify-center p-6">
+               <span className="font-semibold">One</span>
+            </div>
+         </ResizablePanel>
+         <ResizableHandle />
+         <ResizablePanel defaultSize={50}>
+            <ResizablePanelGroup direction="vertical">
+               <ResizablePanel defaultSize={25}>
+                  <div className="flex h-full items-center justify-center p-6">
+                     <span className="font-semibold">Two</span>
+                  </div>
+               </ResizablePanel>
+               <ResizableHandle />
+               <ResizablePanel defaultSize={75}>
+                  <div className="flex h-full items-center justify-center p-6">
+                     <span className="font-semibold">Three</span>
+                  </div>
+               </ResizablePanel>
+            </ResizablePanelGroup>
+         </ResizablePanel>
+      </ResizablePanelGroup>
+   )
+}
diff --git a/apps/web/registry/default/examples/resizable-handle.tsx b/apps/web/registry/default/examples/resizable-handle.tsx
new file mode 100644
index 00000000..636beeb0
--- /dev/null
+++ b/apps/web/registry/default/examples/resizable-handle.tsx
@@ -0,0 +1,26 @@
+import {
+   ResizableHandle,
+   ResizablePanel,
+   ResizablePanelGroup,
+} from "~/registry/default/ui/resizable"
+
+export default function ResizableDemo() {
+   return (
+      <ResizablePanelGroup
+         direction="horizontal"
+         className="min-h-[200px] max-w-md rounded-lg border"
+      >
+         <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+               <span className="font-semibold">Sidebar</span>
+            </div>
+         </ResizablePanel>
+         <ResizableHandle withHandle />
+         <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+               <span className="font-semibold">Content</span>
+            </div>
+         </ResizablePanel>
+      </ResizablePanelGroup>
+   )
+}
diff --git a/apps/web/registry/default/examples/resizable-vertical.tsx b/apps/web/registry/default/examples/resizable-vertical.tsx
new file mode 100644
index 00000000..8baeb089
--- /dev/null
+++ b/apps/web/registry/default/examples/resizable-vertical.tsx
@@ -0,0 +1,26 @@
+import {
+   ResizableHandle,
+   ResizablePanel,
+   ResizablePanelGroup,
+} from "~/registry/default/ui/resizable"
+
+export default function ResizableDemo() {
+   return (
+      <ResizablePanelGroup
+         direction="vertical"
+         className="min-h-[200px] max-w-md rounded-lg border"
+      >
+         <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+               <span className="font-semibold">Header</span>
+            </div>
+         </ResizablePanel>
+         <ResizableHandle />
+         <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+               <span className="font-semibold">Content</span>
+            </div>
+         </ResizablePanel>
+      </ResizablePanelGroup>
+   )
+}
diff --git a/apps/web/registry/default/examples/retro-grid-demo.tsx b/apps/web/registry/default/examples/retro-grid-demo.tsx
new file mode 100644
index 00000000..1d5abdab
--- /dev/null
+++ b/apps/web/registry/default/examples/retro-grid-demo.tsx
@@ -0,0 +1,15 @@
+"use client"
+
+import { RetroGrid } from "~/registry/default/ui/retro-grid"
+
+export default function RetroGridDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <span className="pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent">
+            Retro Grid
+         </span>
+
+         <RetroGrid />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/ripple-button-demo.tsx b/apps/web/registry/default/examples/ripple-button-demo.tsx
new file mode 100644
index 00000000..4dcc3699
--- /dev/null
+++ b/apps/web/registry/default/examples/ripple-button-demo.tsx
@@ -0,0 +1,5 @@
+import { RippleButton } from "~/registry/default/ui/ripple-button"
+
+export default function RippleButtonDemo() {
+   return <RippleButton rippleColor="#ADD8E6">Click me</RippleButton>
+}
diff --git a/apps/web/registry/default/examples/ripple-demo.tsx b/apps/web/registry/default/examples/ripple-demo.tsx
new file mode 100644
index 00000000..fca1b7d4
--- /dev/null
+++ b/apps/web/registry/default/examples/ripple-demo.tsx
@@ -0,0 +1,12 @@
+import { Ripple } from "~/registry/default/ui/ripple"
+
+export default function RippleDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white">
+            Ripple
+         </p>
+         <Ripple />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/safari-demo-2.tsx b/apps/web/registry/default/examples/safari-demo-2.tsx
new file mode 100644
index 00000000..9aae557a
--- /dev/null
+++ b/apps/web/registry/default/examples/safari-demo-2.tsx
@@ -0,0 +1,13 @@
+import Safari from "~/registry/default/ui/safari"
+
+export default function SafariDemo() {
+   return (
+      <div className="relative">
+         <Safari
+            url="nyxbui.design"
+            className="size-full"
+            src="https://via.placeholder.com/1200x750"
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/safari-demo.tsx b/apps/web/registry/default/examples/safari-demo.tsx
new file mode 100644
index 00000000..359efc01
--- /dev/null
+++ b/apps/web/registry/default/examples/safari-demo.tsx
@@ -0,0 +1,9 @@
+import Safari from "~/registry/default/ui/safari"
+
+export default function SafariDemo() {
+   return (
+      <div className="relative">
+         <Safari url="nyxbui.design" className="size-full" />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/scratch-to-reveal-demo.tsx b/apps/web/registry/default/examples/scratch-to-reveal-demo.tsx
new file mode 100644
index 00000000..2007237c
--- /dev/null
+++ b/apps/web/registry/default/examples/scratch-to-reveal-demo.tsx
@@ -0,0 +1,24 @@
+import React from "react"
+import ScratchToReveal from "~/registry/default/ui/scratch-to-reveal"
+
+function ScratchToRevealDemo() {
+   const handleComplete = () => {
+      // Do Something
+   }
+
+   return (
+      <div>
+         <ScratchToReveal
+            width={250}
+            height={250}
+            minScratchPercentage={70}
+            className="flex items-center justify-center overflow-hidden rounded-2xl border-2 bg-gray-100"
+            onComplete={handleComplete}
+         >
+            <p className="text-9xl">😎</p>
+         </ScratchToReveal>
+      </div>
+   )
+}
+
+export default ScratchToRevealDemo
diff --git a/apps/web/registry/default/examples/script-copy-btn-demo.tsx b/apps/web/registry/default/examples/script-copy-btn-demo.tsx
new file mode 100644
index 00000000..94f3f6d5
--- /dev/null
+++ b/apps/web/registry/default/examples/script-copy-btn-demo.tsx
@@ -0,0 +1,19 @@
+import { ScriptCopyBtn } from "~/registry/default/ui/script-copy-btn"
+
+export default function ScriptCopyBtnDemo() {
+   const customCommandMap = {
+      npm: "npm run nyxb add button",
+      yarn: "yarn nyxb add button",
+      pnpm: "pnpm dlx nyxb@latest add button",
+      bun: "bun x nyxb@latest add button",
+   }
+   return (
+      <ScriptCopyBtn
+         showMultiplePackageOptions={true}
+         codeLanguage="shell"
+         lightTheme="nord"
+         darkTheme="vitesse-dark"
+         commandMap={customCommandMap}
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/scroll-area-demo.tsx b/apps/web/registry/default/examples/scroll-area-demo.tsx
new file mode 100644
index 00000000..f9243181
--- /dev/null
+++ b/apps/web/registry/default/examples/scroll-area-demo.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+import { ScrollArea } from "~/registry/default/ui/scroll-area"
+import { Separator } from "~/registry/default/ui/separator"
+
+const tags = Array.from({ length: 50 }).map(
+   (_, i, a) => `v1.2.0-beta.${a.length - i}`,
+)
+
+export default function ScrollAreaDemo() {
+   return (
+      <ScrollArea className="h-72 w-48 rounded-md border">
+         <div className="p-4">
+            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+            {tags.map((tag) => (
+               <>
+                  <div key={tag} className="text-sm">
+                     {tag}
+                  </div>
+                  <Separator className="my-2" />
+               </>
+            ))}
+         </div>
+      </ScrollArea>
+   )
+}
diff --git a/apps/web/registry/default/examples/scroll-area-horizontal-demo.tsx b/apps/web/registry/default/examples/scroll-area-horizontal-demo.tsx
new file mode 100644
index 00000000..0c873a9c
--- /dev/null
+++ b/apps/web/registry/default/examples/scroll-area-horizontal-demo.tsx
@@ -0,0 +1,53 @@
+import Image from "next/image"
+import * as React from "react"
+
+import { ScrollArea, ScrollBar } from "~/registry/default/ui/scroll-area"
+
+export interface Artwork {
+   artist: string
+   art: string
+}
+
+export const works: Artwork[] = [
+   {
+      artist: "Ornella Binni",
+      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+   },
+   {
+      artist: "Tom Byrom",
+      art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+   },
+   {
+      artist: "Vladimir Malyavko",
+      art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+   },
+]
+
+export default function ScrollAreaHorizontalDemo() {
+   return (
+      <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+         <div className="flex w-max space-x-4 p-4">
+            {works.map((artwork) => (
+               <figure key={artwork.artist} className="shrink-0">
+                  <div className="overflow-hidden rounded-md">
+                     <Image
+                        src={artwork.art}
+                        alt={`Photo by ${artwork.artist}`}
+                        className="aspect-[3/4] size-fit object-cover"
+                        width={300}
+                        height={400}
+                     />
+                  </div>
+                  <figcaption className="text-muted-foreground pt-2 text-xs">
+                     Photo by{" "}
+                     <span className="text-foreground font-semibold">
+                        {artwork.artist}
+                     </span>
+                  </figcaption>
+               </figure>
+            ))}
+         </div>
+         <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+   )
+}
diff --git a/apps/web/registry/default/examples/scroll-based-velocity-demo.tsx b/apps/web/registry/default/examples/scroll-based-velocity-demo.tsx
new file mode 100644
index 00000000..61fbdb75
--- /dev/null
+++ b/apps/web/registry/default/examples/scroll-based-velocity-demo.tsx
@@ -0,0 +1,11 @@
+import { VelocityScroll } from "~/registry/default/ui/scroll-based-velocity"
+
+export default function ScrollBasedVelocityDemo() {
+   return (
+      <VelocityScroll
+         text="Velocity Scroll"
+         default_velocity={5}
+         className="font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/scroll-progress-demo.tsx b/apps/web/registry/default/examples/scroll-progress-demo.tsx
new file mode 100644
index 00000000..d199d6c2
--- /dev/null
+++ b/apps/web/registry/default/examples/scroll-progress-demo.tsx
@@ -0,0 +1,27 @@
+import ScrollProgress from "~/registry/default/ui/scroll-progress"
+
+const dummyContent = Array.from({ length: 10 }, (_, i) => (
+   <p key={i}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam
+      lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra
+      nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam
+      eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue
+      enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu
+      vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit.
+   </p>
+))
+
+function ScrollProgressDemo() {
+   return (
+      <div>
+         <ScrollProgress className="top-[65px]" />
+         <strong>
+            Note: The scroll progress is shown below the navbar of the page.
+         </strong>
+         {dummyContent}
+      </div>
+   )
+}
+
+export default ScrollProgressDemo
diff --git a/apps/web/registry/default/examples/select-demo.tsx b/apps/web/registry/default/examples/select-demo.tsx
new file mode 100644
index 00000000..257bf524
--- /dev/null
+++ b/apps/web/registry/default/examples/select-demo.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import {
+   Select,
+   SelectContent,
+   SelectGroup,
+   SelectItem,
+   SelectLabel,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/default/ui/select"
+
+export default function SelectDemo() {
+   return (
+      <Select>
+         <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select a fruit" />
+         </SelectTrigger>
+         <SelectContent>
+            <SelectGroup>
+               <SelectLabel>Fruits</SelectLabel>
+               <SelectItem value="apple">Apple</SelectItem>
+               <SelectItem value="banana">Banana</SelectItem>
+               <SelectItem value="blueberry">Blueberry</SelectItem>
+               <SelectItem value="grapes">Grapes</SelectItem>
+               <SelectItem value="pineapple">Pineapple</SelectItem>
+            </SelectGroup>
+         </SelectContent>
+      </Select>
+   )
+}
diff --git a/apps/web/registry/default/examples/select-form.tsx b/apps/web/registry/default/examples/select-form.tsx
new file mode 100644
index 00000000..c76b6b5a
--- /dev/null
+++ b/apps/web/registry/default/examples/select-form.tsx
@@ -0,0 +1,98 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import Link from "next/link"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/default/ui/select"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+   email: z
+      .string({
+         required_error: "Please select an email to display.",
+      })
+      .email(),
+})
+
+export default function SelectForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="email"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Email</FormLabel>
+                     <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                     >
+                        <FormControl>
+                           <SelectTrigger>
+                              <SelectValue placeholder="Select a verified email to display" />
+                           </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                           <SelectItem value="m@example.com">
+                              m@example.com
+                           </SelectItem>
+                           <SelectItem value="m@google.com">
+                              m@google.com
+                           </SelectItem>
+                           <SelectItem value="m@support.com">
+                              m@support.com
+                           </SelectItem>
+                        </SelectContent>
+                     </Select>
+                     <FormDescription>
+                        You can manage email addresses in your{" "}
+                        <Link href="/examples/forms">email settings</Link>.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/select-scrollable.tsx b/apps/web/registry/default/examples/select-scrollable.tsx
new file mode 100644
index 00000000..05fd7989
--- /dev/null
+++ b/apps/web/registry/default/examples/select-scrollable.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import {
+   Select,
+   SelectContent,
+   SelectGroup,
+   SelectItem,
+   SelectLabel,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/default/ui/select"
+
+export default function SelectScrollable() {
+   return (
+      <Select>
+         <SelectTrigger className="w-[280px]">
+            <SelectValue placeholder="Select a timezone" />
+         </SelectTrigger>
+         <SelectContent>
+            <SelectGroup>
+               <SelectLabel>North America</SelectLabel>
+               <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
+               <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
+               <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
+               <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
+               <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
+               <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
+            </SelectGroup>
+            <SelectGroup>
+               <SelectLabel>Europe & Africa</SelectLabel>
+               <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
+               <SelectItem value="cet">Central European Time (CET)</SelectItem>
+               <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
+               <SelectItem value="west">
+                  Western European Summer Time (WEST)
+               </SelectItem>
+               <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
+               <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
+            </SelectGroup>
+            <SelectGroup>
+               <SelectLabel>Asia</SelectLabel>
+               <SelectItem value="msk">Moscow Time (MSK)</SelectItem>
+               <SelectItem value="ist">India Standard Time (IST)</SelectItem>
+               <SelectItem value="cst_china">
+                  China Standard Time (CST)
+               </SelectItem>
+               <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
+               <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
+               <SelectItem value="ist_indonesia">
+                  Indonesia Central Standard Time (WITA)
+               </SelectItem>
+            </SelectGroup>
+            <SelectGroup>
+               <SelectLabel>Australia & Pacific</SelectLabel>
+               <SelectItem value="awst">
+                  Australian Western Standard Time (AWST)
+               </SelectItem>
+               <SelectItem value="acst">
+                  Australian Central Standard Time (ACST)
+               </SelectItem>
+               <SelectItem value="aest">
+                  Australian Eastern Standard Time (AEST)
+               </SelectItem>
+               <SelectItem value="nzst">
+                  New Zealand Standard Time (NZST)
+               </SelectItem>
+               <SelectItem value="fjt">Fiji Time (FJT)</SelectItem>
+            </SelectGroup>
+            <SelectGroup>
+               <SelectLabel>South America</SelectLabel>
+               <SelectItem value="art">Argentina Time (ART)</SelectItem>
+               <SelectItem value="bot">Bolivia Time (BOT)</SelectItem>
+               <SelectItem value="brt">Brasilia Time (BRT)</SelectItem>
+               <SelectItem value="clt">Chile Standard Time (CLT)</SelectItem>
+            </SelectGroup>
+         </SelectContent>
+      </Select>
+   )
+}
diff --git a/apps/web/registry/default/examples/separate-away-demo.tsx b/apps/web/registry/default/examples/separate-away-demo.tsx
new file mode 100644
index 00000000..6b02331d
--- /dev/null
+++ b/apps/web/registry/default/examples/separate-away-demo.tsx
@@ -0,0 +1,14 @@
+import { SeparateAway } from "~/registry/default/ui/separate-away"
+
+export default async function SeparateAwayDemo() {
+   return (
+      <SeparateAway
+         upper_text="Separate"
+         lower_text="Away"
+         duration={1.5}
+         hidden_opacity={0}
+         visible_opacity={1}
+         className="font-display text-center text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/separator-demo.tsx b/apps/web/registry/default/examples/separator-demo.tsx
new file mode 100644
index 00000000..28c4cf0f
--- /dev/null
+++ b/apps/web/registry/default/examples/separator-demo.tsx
@@ -0,0 +1,24 @@
+import { Separator } from "~/registry/default/ui/separator"
+
+export default function SeparatorDemo() {
+   return (
+      <div>
+         <div className="space-y-1">
+            <h4 className="text-sm font-medium leading-none">
+               Radix Primitives
+            </h4>
+            <p className="text-muted-foreground text-sm">
+               An open-source UI component library.
+            </p>
+         </div>
+         <Separator className="my-4" />
+         <div className="flex h-5 items-center space-x-4 text-sm">
+            <div>Blog</div>
+            <Separator orientation="vertical" />
+            <div>Docs</div>
+            <Separator orientation="vertical" />
+            <div>Source</div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/sheet-demo.tsx b/apps/web/registry/default/examples/sheet-demo.tsx
new file mode 100644
index 00000000..780737f6
--- /dev/null
+++ b/apps/web/registry/default/examples/sheet-demo.tsx
@@ -0,0 +1,59 @@
+import { Button } from "~/registry/default/ui/button"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+import {
+   Sheet,
+   SheetClose,
+   SheetContent,
+   SheetDescription,
+   SheetFooter,
+   SheetHeader,
+   SheetTitle,
+   SheetTrigger,
+} from "~/registry/default/ui/sheet"
+
+export default function SheetDemo() {
+   return (
+      <Sheet>
+         <SheetTrigger asChild>
+            <Button variant="outline">Open</Button>
+         </SheetTrigger>
+         <SheetContent>
+            <SheetHeader>
+               <SheetTitle>Edit profile</SheetTitle>
+               <SheetDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+               </SheetDescription>
+            </SheetHeader>
+            <div className="grid gap-4 py-4">
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="name" className="text-right">
+                     Name
+                  </Label>
+                  <Input
+                     id="name"
+                     value="Pedro Duarte"
+                     className="col-span-3"
+                  />
+               </div>
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="username" className="text-right">
+                     Username
+                  </Label>
+                  <Input
+                     id="username"
+                     value="~peduarte"
+                     className="col-span-3"
+                  />
+               </div>
+            </div>
+            <SheetFooter>
+               <SheetClose asChild>
+                  <Button type="submit">Save changes</Button>
+               </SheetClose>
+            </SheetFooter>
+         </SheetContent>
+      </Sheet>
+   )
+}
diff --git a/apps/web/registry/default/examples/sheet-side.tsx b/apps/web/registry/default/examples/sheet-side.tsx
new file mode 100644
index 00000000..7753ce1b
--- /dev/null
+++ b/apps/web/registry/default/examples/sheet-side.tsx
@@ -0,0 +1,69 @@
+"use client"
+
+import { Button } from "~/registry/default/ui/button"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+import {
+   Sheet,
+   SheetClose,
+   SheetContent,
+   SheetDescription,
+   SheetFooter,
+   SheetHeader,
+   SheetTitle,
+   SheetTrigger,
+} from "~/registry/default/ui/sheet"
+
+const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
+
+type SheetSide = (typeof SHEET_SIDES)[number]
+
+export default function SheetSide() {
+   return (
+      <div className="grid grid-cols-2 gap-2">
+         {SHEET_SIDES.map((side) => (
+            <Sheet key={side}>
+               <SheetTrigger asChild>
+                  <Button variant="outline">{side}</Button>
+               </SheetTrigger>
+               <SheetContent side={side}>
+                  <SheetHeader>
+                     <SheetTitle>Edit profile</SheetTitle>
+                     <SheetDescription>
+                        Make changes to your profile here. Click save when
+                        you're done.
+                     </SheetDescription>
+                  </SheetHeader>
+                  <div className="grid gap-4 py-4">
+                     <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="name" className="text-right">
+                           Name
+                        </Label>
+                        <Input
+                           id="name"
+                           value="Pedro Duarte"
+                           className="col-span-3"
+                        />
+                     </div>
+                     <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="username" className="text-right">
+                           Username
+                        </Label>
+                        <Input
+                           id="username"
+                           value="~peduarte"
+                           className="col-span-3"
+                        />
+                     </div>
+                  </div>
+                  <SheetFooter>
+                     <SheetClose asChild>
+                        <Button type="submit">Save changes</Button>
+                     </SheetClose>
+                  </SheetFooter>
+               </SheetContent>
+            </Sheet>
+         ))}
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/shimmer-button-demo.tsx b/apps/web/registry/default/examples/shimmer-button-demo.tsx
new file mode 100644
index 00000000..70e06093
--- /dev/null
+++ b/apps/web/registry/default/examples/shimmer-button-demo.tsx
@@ -0,0 +1,13 @@
+import ShimmerButton from "~/registry/default/ui/shimmer-button"
+
+export default function ShimmerButtonDemo() {
+   return (
+      <div className="z-10 flex min-h-64 items-center justify-center">
+         <ShimmerButton className="shadow-2xl">
+            <span className="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10">
+               Shimmer Button
+            </span>
+         </ShimmerButton>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/shine-border-demo-2.tsx b/apps/web/registry/default/examples/shine-border-demo-2.tsx
new file mode 100644
index 00000000..57a8aafa
--- /dev/null
+++ b/apps/web/registry/default/examples/shine-border-demo-2.tsx
@@ -0,0 +1,9 @@
+import ShineBorder from "~/registry/default/ui/shine-border"
+
+export default function ShineBorderDemo() {
+   return (
+      <ShineBorder className="text-center text-2xl font-bold capitalize">
+         Shine Border
+      </ShineBorder>
+   )
+}
diff --git a/apps/web/registry/default/examples/shine-border-demo.tsx b/apps/web/registry/default/examples/shine-border-demo.tsx
new file mode 100644
index 00000000..b090ccc1
--- /dev/null
+++ b/apps/web/registry/default/examples/shine-border-demo.tsx
@@ -0,0 +1,14 @@
+import ShineBorder from "~/registry/default/ui/shine-border"
+
+export default function ShineBorderDemo() {
+   return (
+      <ShineBorder
+         className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl"
+         color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
+      >
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Shine Border
+         </span>
+      </ShineBorder>
+   )
+}
diff --git a/apps/web/registry/default/examples/shiny-button-demo.tsx b/apps/web/registry/default/examples/shiny-button-demo.tsx
new file mode 100644
index 00000000..4c2bfa9c
--- /dev/null
+++ b/apps/web/registry/default/examples/shiny-button-demo.tsx
@@ -0,0 +1,5 @@
+import ShinyButton from "~/registry/default/ui/shiny-button"
+
+export default function ShinyButtonDemo() {
+   return <ShinyButton text="Shiny Button" />
+}
diff --git a/apps/web/registry/default/examples/skeleton-card.tsx b/apps/web/registry/default/examples/skeleton-card.tsx
new file mode 100644
index 00000000..e20d3681
--- /dev/null
+++ b/apps/web/registry/default/examples/skeleton-card.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "~/registry/default/ui/skeleton"
+
+export default function SkeletonCard() {
+   return (
+      <div className="flex flex-col space-y-3">
+         <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+         <div className="space-y-2">
+            <Skeleton className="h-4 w-[250px]" />
+            <Skeleton className="h-4 w-[200px]" />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/skeleton-demo.tsx b/apps/web/registry/default/examples/skeleton-demo.tsx
new file mode 100644
index 00000000..dd704fe3
--- /dev/null
+++ b/apps/web/registry/default/examples/skeleton-demo.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "~/registry/default/ui/skeleton"
+
+export default function SkeletonDemo() {
+   return (
+      <div className="flex items-center space-x-4">
+         <Skeleton className="size-12 rounded-full" />
+         <div className="space-y-2">
+            <Skeleton className="h-4 w-[250px]" />
+            <Skeleton className="h-4 w-[200px]" />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/slider-demo.tsx b/apps/web/registry/default/examples/slider-demo.tsx
new file mode 100644
index 00000000..f5d92ab0
--- /dev/null
+++ b/apps/web/registry/default/examples/slider-demo.tsx
@@ -0,0 +1,16 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/default/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderDemo({ className, ...props }: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[50]}
+         max={100}
+         step={1}
+         className={ny("w-3/5", className)}
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/slider-disabled.tsx b/apps/web/registry/default/examples/slider-disabled.tsx
new file mode 100644
index 00000000..5d1887ad
--- /dev/null
+++ b/apps/web/registry/default/examples/slider-disabled.tsx
@@ -0,0 +1,17 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/default/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderDisabled({ className, ...props }: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[50]}
+         max={100}
+         step={1}
+         className={ny("w-3/5", className)}
+         disabled
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/slider-format-label-side.tsx b/apps/web/registry/default/examples/slider-format-label-side.tsx
new file mode 100644
index 00000000..2db7107c
--- /dev/null
+++ b/apps/web/registry/default/examples/slider-format-label-side.tsx
@@ -0,0 +1,21 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/default/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderFormatLabelSide({
+   className,
+   ...props
+}: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[2]}
+         max={5}
+         step={1}
+         className={ny("w-3/5", className)}
+         formatLabel={(value) => `${value} points`}
+         formatLabelSide="left"
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/slider-format-label.tsx b/apps/web/registry/default/examples/slider-format-label.tsx
new file mode 100644
index 00000000..3b2003cc
--- /dev/null
+++ b/apps/web/registry/default/examples/slider-format-label.tsx
@@ -0,0 +1,20 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/default/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderFormatLabel({
+   className,
+   ...props
+}: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[2]}
+         max={5}
+         step={1}
+         className={ny("w-3/5", className)}
+         formatLabel={(value) => `${value} points`}
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/slider-inverted.tsx b/apps/web/registry/default/examples/slider-inverted.tsx
new file mode 100644
index 00000000..c662dcca
--- /dev/null
+++ b/apps/web/registry/default/examples/slider-inverted.tsx
@@ -0,0 +1,17 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/default/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderInverted({ className, ...props }: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[50]}
+         max={100}
+         step={1}
+         className={ny("w-3/5", className)}
+         inverted
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/slider-range.tsx b/apps/web/registry/default/examples/slider-range.tsx
new file mode 100644
index 00000000..b1e5f563
--- /dev/null
+++ b/apps/web/registry/default/examples/slider-range.tsx
@@ -0,0 +1,16 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/default/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderRange({ className, ...props }: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[25, 75]}
+         max={100}
+         step={1}
+         className={ny("w-3/5", className)}
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/slider-ranges.tsx b/apps/web/registry/default/examples/slider-ranges.tsx
new file mode 100644
index 00000000..d3dd2bb8
--- /dev/null
+++ b/apps/web/registry/default/examples/slider-ranges.tsx
@@ -0,0 +1,16 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/default/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderDemo({ className, ...props }: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[50, 75]}
+         max={100}
+         step={1}
+         className={ny("w-3/5", className)}
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/slider-tick-marks-full.tsx b/apps/web/registry/default/examples/slider-tick-marks-full.tsx
new file mode 100644
index 00000000..8950e17d
--- /dev/null
+++ b/apps/web/registry/default/examples/slider-tick-marks-full.tsx
@@ -0,0 +1,20 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/default/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderTickMarksFull({
+   className,
+   ...props
+}: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[2]}
+         max={5}
+         step={1}
+         className={ny("w-3/5", className)}
+         showSteps="full"
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/slider-tick-marks-half.tsx b/apps/web/registry/default/examples/slider-tick-marks-half.tsx
new file mode 100644
index 00000000..f84c27f9
--- /dev/null
+++ b/apps/web/registry/default/examples/slider-tick-marks-half.tsx
@@ -0,0 +1,20 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/default/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderTickMarksHalf({
+   className,
+   ...props
+}: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[2]}
+         max={5}
+         step={1}
+         className={ny("w-3/5", className)}
+         showSteps="half"
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/slider-vertical.tsx b/apps/web/registry/default/examples/slider-vertical.tsx
new file mode 100644
index 00000000..647c6cd9
--- /dev/null
+++ b/apps/web/registry/default/examples/slider-vertical.tsx
@@ -0,0 +1,21 @@
+import { Slider } from "~/registry/default/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderVertical({ className, ...props }: SliderProps) {
+   return (
+      <>
+         {/* Vertical slider needs its parent container to define the height */}
+         <div className="h-64">
+            <Slider
+               defaultValue={[50]}
+               max={100}
+               step={1}
+               orientation="vertical"
+               className={className}
+               {...props}
+            />
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/sonner-demo.tsx b/apps/web/registry/default/examples/sonner-demo.tsx
new file mode 100644
index 00000000..89da2984
--- /dev/null
+++ b/apps/web/registry/default/examples/sonner-demo.tsx
@@ -0,0 +1,24 @@
+import { toast } from "sonner"
+
+import { Button } from "~/registry/default/ui/button"
+
+export default function SonnerDemo() {
+   return (
+      <Button
+         variant="outline"
+         onClick={() =>
+            toast("Event has been created", {
+               description: "Sunday, December 03, 2023 at 9:00 AM",
+               action: {
+                  label: "Undo",
+
+                  // eslint-disable-next-line no-console
+                  onClick: () => console.log("Undo"),
+               },
+            })
+         }
+      >
+         Show Toast
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/examples/sparkles-text-demo.tsx b/apps/web/registry/default/examples/sparkles-text-demo.tsx
new file mode 100644
index 00000000..393e0fe0
--- /dev/null
+++ b/apps/web/registry/default/examples/sparkles-text-demo.tsx
@@ -0,0 +1,5 @@
+import SparklesText from "~/registry/default/ui/sparkles-text"
+
+export default async function SparklesTextDemo() {
+   return <SparklesText text="Nyxb UI" />
+}
diff --git a/apps/web/registry/default/examples/star-rating-colored.tsx b/apps/web/registry/default/examples/star-rating-colored.tsx
new file mode 100644
index 00000000..8ad6b4b8
--- /dev/null
+++ b/apps/web/registry/default/examples/star-rating-colored.tsx
@@ -0,0 +1,13 @@
+import * as React from "react"
+import { StarRating } from "~/registry/default/ui/star-rating"
+
+export default function StarRatingColored() {
+   const [value, setValue] = React.useState<number>(3)
+   return (
+      <StarRating
+         value={value}
+         setValue={setValue}
+         iconProps={{ className: "fill-yellow-500 stroke-yellow-500" }}
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/star-rating-demo.tsx b/apps/web/registry/default/examples/star-rating-demo.tsx
new file mode 100644
index 00000000..f1c6c7c3
--- /dev/null
+++ b/apps/web/registry/default/examples/star-rating-demo.tsx
@@ -0,0 +1,7 @@
+import * as React from "react"
+import { StarRating } from "~/registry/default/ui/star-rating"
+
+export default function StarRatingDemo() {
+   const [value, setValue] = React.useState<number>(3)
+   return <StarRating value={value} setValue={setValue} />
+}
diff --git a/apps/web/registry/default/examples/star-rating-icon.tsx b/apps/web/registry/default/examples/star-rating-icon.tsx
new file mode 100644
index 00000000..fffae52f
--- /dev/null
+++ b/apps/web/registry/default/examples/star-rating-icon.tsx
@@ -0,0 +1,8 @@
+import { Heart } from "lucide-react"
+import * as React from "react"
+import { StarRating } from "~/registry/default/ui/star-rating"
+
+export default function StarRatingIcon() {
+   const [value, setValue] = React.useState<number>(3)
+   return <StarRating value={value} setValue={setValue} icon={Heart} />
+}
diff --git a/apps/web/registry/default/examples/stepper-clickable-steps.tsx b/apps/web/registry/default/examples/stepper-clickable-steps.tsx
new file mode 100644
index 00000000..63e1e4f0
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-clickable-steps.tsx
@@ -0,0 +1,85 @@
+import { Button } from "~/registry/default/ui/button"
+import type { StepItem } from "~/registry/default/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper
+            initialStep={0}
+            steps={steps}
+            onClickStep={(step, setStep) => {
+               toast({
+                  title: "Step clicked",
+                  description:
+                     "This event is executed globally for all steps. If you want to have an event for a specific step, use the `onClickStep` prop of the independent step.",
+               })
+               setStep(step)
+            }}
+         >
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/stepper-custom-icons.tsx b/apps/web/registry/default/examples/stepper-custom-icons.tsx
new file mode 100644
index 00000000..e3709027
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-custom-icons.tsx
@@ -0,0 +1,75 @@
+import { Building, Star, User } from "lucide-react"
+
+import { Button } from "~/registry/default/ui/button"
+import type { StepItem } from "~/registry/default/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+
+const steps = [
+   { label: "Step 1", icon: User },
+   { label: "Step 2", icon: Building },
+   { label: "Step 3", icon: Star },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/stepper-custom-styles.tsx b/apps/web/registry/default/examples/stepper-custom-styles.tsx
new file mode 100644
index 00000000..7334ff15
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-custom-styles.tsx
@@ -0,0 +1,90 @@
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import type { StepItem } from "~/registry/default/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper
+            initialStep={0}
+            steps={steps}
+            styles={{
+               "step-button-container": ny(
+                  "rounded-none text-purple-700",
+                  "data-[current=true]:border-purple-500 data-[current=true]:bg-purple-50",
+                  "data-[active=true]:border-purple-500 data-[active=true]:bg-purple-500",
+               ),
+               "horizontal-step":
+                  "data-[completed=true]:[&:not(:last-child)]:after:bg-purple-500",
+            }}
+            variables={{
+               "--step-icon-size": "60px",
+               "--step-gap": "20px",
+            }}
+         >
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+      isDisabledStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/stepper-demo.tsx b/apps/web/registry/default/examples/stepper-demo.tsx
new file mode 100644
index 00000000..538dd23e
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-demo.tsx
@@ -0,0 +1,73 @@
+import { Button } from "~/registry/default/ui/button"
+import type { StepItem } from "~/registry/default/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+      isDisabledStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/stepper-description.tsx b/apps/web/registry/default/examples/stepper-description.tsx
new file mode 100644
index 00000000..d19b4e66
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-description.tsx
@@ -0,0 +1,73 @@
+import { Button } from "~/registry/default/ui/button"
+import type { StepItem } from "~/registry/default/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+
+const steps = [
+   { label: "Step 1", description: "Description 1" },
+   { label: "Step 2", description: "Description 2" },
+   { label: "Step 3", description: "Description 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+      isDisabledStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/stepper-footer-inside.tsx b/apps/web/registry/default/examples/stepper-footer-inside.tsx
new file mode 100644
index 00000000..843961a8
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-footer-inside.tsx
@@ -0,0 +1,71 @@
+import { Button } from "~/registry/default/ui/button"
+import type { StepItem } from "~/registry/default/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper orientation="vertical" initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                     <StepButtons />
+                  </Step>
+               )
+            })}
+            <FinalStep />
+         </Stepper>
+      </div>
+   )
+}
+
+function StepButtons() {
+   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =
+      useStepper()
+   return (
+      <div className="mb-4 flex w-full gap-2">
+         <Button
+            disabled={isDisabledStep}
+            onClick={prevStep}
+            size="sm"
+            variant="secondary"
+         >
+            Prev
+         </Button>
+         <Button size="sm" onClick={nextStep}>
+            {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+         </Button>
+      </div>
+   )
+}
+
+function FinalStep() {
+   const { hasCompletedAllSteps, resetSteps } = useStepper()
+
+   if (!hasCompletedAllSteps) return null
+
+   return (
+      <>
+         <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
+            <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+         </div>
+         <div className="flex w-full justify-end gap-2">
+            <Button size="sm" onClick={resetSteps}>
+               Reset
+            </Button>
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/stepper-form.tsx b/apps/web/registry/default/examples/stepper-form.tsx
new file mode 100644
index 00000000..4b6125f6
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-form.tsx
@@ -0,0 +1,191 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import { Input } from "~/registry/default/ui/input"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const steps = [
+   { label: "Step 1", description: "Description 1" },
+   { label: "Step 2", description: "Description 2" },
+]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper variant="circle-alt" initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               if (index === 0) {
+                  return (
+                     <Step key={stepProps.label} {...stepProps}>
+                        <FirstStepForm />
+                     </Step>
+                  )
+               }
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <SecondStepForm />
+                  </Step>
+               )
+            })}
+            <MyStepperFooter />
+         </Stepper>
+      </div>
+   )
+}
+
+const FirstFormSchema = z.object({
+   username: z.string().min(2, {
+      message: "Username must be at least 2 characters.",
+   }),
+})
+
+function FirstStepForm() {
+   const { nextStep } = useStepper()
+
+   const form = useForm<z.infer<typeof FirstFormSchema>>({
+      resolver: zodResolver(FirstFormSchema),
+      defaultValues: {
+         username: "",
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FirstFormSchema>) {
+      nextStep()
+      toast({
+         title: "First step submitted!",
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+               control={form.control}
+               name="username"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Username</FormLabel>
+                     <FormControl>
+                        <Input placeholder="nyxb" {...field} />
+                     </FormControl>
+                     <FormDescription>
+                        This is your public display name.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <StepperFormActions />
+         </form>
+      </Form>
+   )
+}
+
+const SecondFormSchema = z.object({
+   password: z.string().min(8, {
+      message: "Password must be at least 8 characters.",
+   }),
+})
+
+function SecondStepForm() {
+   const { nextStep } = useStepper()
+
+   const form = useForm<z.infer<typeof SecondFormSchema>>({
+      resolver: zodResolver(SecondFormSchema),
+      defaultValues: {
+         password: "",
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof SecondFormSchema>) {
+      nextStep()
+      toast({
+         title: "Second step submitted!",
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+               control={form.control}
+               name="password"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Password</FormLabel>
+                     <FormControl>
+                        <Input type="password" {...field} />
+                     </FormControl>
+                     <FormDescription>
+                        This is your private password.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <StepperFormActions />
+         </form>
+      </Form>
+   )
+}
+
+function StepperFormActions() {
+   const {
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+
+   return (
+      <div className="flex w-full justify-end gap-2">
+         {hasCompletedAllSteps ? (
+            <Button size="sm" onClick={resetSteps}>
+               Reset
+            </Button>
+         ) : (
+            <>
+               <Button
+                  disabled={isDisabledStep}
+                  onClick={prevStep}
+                  size="sm"
+                  variant="secondary"
+               >
+                  Prev
+               </Button>
+               <Button size="sm">
+                  {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+               </Button>
+            </>
+         )}
+      </div>
+   )
+}
+
+function MyStepperFooter() {
+   const { activeStep, resetSteps, steps } = useStepper()
+
+   if (activeStep !== steps.length) return null
+
+   return (
+      <div className="flex items-center justify-end gap-2">
+         <Button onClick={resetSteps}>Reset Stepper with Form</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/stepper-optional-steps.tsx b/apps/web/registry/default/examples/stepper-optional-steps.tsx
new file mode 100644
index 00000000..e979df61
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-optional-steps.tsx
@@ -0,0 +1,73 @@
+import { Button } from "~/registry/default/ui/button"
+import type { StepItem } from "~/registry/default/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2", optional: true },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/stepper-orientation.tsx b/apps/web/registry/default/examples/stepper-orientation.tsx
new file mode 100644
index 00000000..e8616be2
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-orientation.tsx
@@ -0,0 +1,110 @@
+import * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import { Label } from "~/registry/default/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/default/ui/radio-group"
+import type { StepItem, StepperProps } from "~/registry/default/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperOrientation() {
+   const [orientation, setOrientation] =
+      React.useState<StepperProps["orientation"]>("vertical")
+
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <RadioGroup
+            className="mb-2 flex"
+            value={orientation}
+            onValueChange={(value) =>
+               setOrientation(value as StepperProps["orientation"])
+            }
+         >
+            <Label
+               htmlFor="horizontal"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem
+                  value="horizontal"
+                  id="horizontal"
+                  className="sr-only"
+               />
+               <h2 className="font-medium">Horizontal</h2>
+            </Label>
+            <Label
+               htmlFor="vertical"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem
+                  value="vertical"
+                  id="vertical"
+                  className="sr-only"
+               />
+               <h2 className="font-medium">Vertical</h2>
+            </Label>
+         </RadioGroup>
+         <Stepper orientation={orientation} initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/stepper-scroll-tracking.tsx b/apps/web/registry/default/examples/stepper-scroll-tracking.tsx
new file mode 100644
index 00000000..cce86cce
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-scroll-tracking.tsx
@@ -0,0 +1,79 @@
+import { Button } from "~/registry/default/ui/button"
+import type { StepItem } from "~/registry/default/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+   { label: "Step 4" },
+   { label: "Step 5" },
+   { label: "Step 6" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper
+            orientation="vertical"
+            initialStep={0}
+            steps={steps}
+            scrollTracking
+         >
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                     <StepButtons />
+                  </Step>
+               )
+            })}
+            <FinalStep />
+         </Stepper>
+      </div>
+   )
+}
+
+function StepButtons() {
+   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =
+      useStepper()
+   return (
+      <div className="mb-4 flex w-full gap-2">
+         <Button
+            disabled={isDisabledStep}
+            onClick={prevStep}
+            size="sm"
+            variant="secondary"
+         >
+            Prev
+         </Button>
+         <Button size="sm" onClick={nextStep}>
+            {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+         </Button>
+      </div>
+   )
+}
+
+function FinalStep() {
+   const { hasCompletedAllSteps, resetSteps } = useStepper()
+
+   if (!hasCompletedAllSteps) return null
+
+   return (
+      <>
+         <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
+            <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+         </div>
+         <div className="flex w-full justify-end gap-2">
+            <Button size="sm" onClick={resetSteps}>
+               Reset
+            </Button>
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/stepper-sizes.tsx b/apps/web/registry/default/examples/stepper-sizes.tsx
new file mode 100644
index 00000000..a196b3a8
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-sizes.tsx
@@ -0,0 +1,106 @@
+import * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import { Label } from "~/registry/default/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/default/ui/radio-group"
+import type { StepItem, StepperProps } from "~/registry/default/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   const [size, setSize] = React.useState<StepperProps["size"]>("md")
+
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <RadioGroup
+            className="mb-2 flex"
+            value={size}
+            onValueChange={(value) => setSize(value as StepperProps["size"])}
+         >
+            <Label
+               htmlFor="sm"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem value="sm" id="sm" className="sr-only" />
+               <h2 className="font-medium">sm</h2>
+            </Label>
+            <Label
+               htmlFor="md"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem value="md" id="md" className="sr-only" />
+               <h2 className="font-medium">md</h2>
+            </Label>
+            <Label
+               htmlFor="lg"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem value="lg" id="lg" className="sr-only" />
+               <h2 className="font-medium">lg</h2>
+            </Label>
+         </RadioGroup>
+         <Stepper size={size} initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/stepper-state.tsx b/apps/web/registry/default/examples/stepper-state.tsx
new file mode 100644
index 00000000..3b341edf
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-state.tsx
@@ -0,0 +1,74 @@
+import { Button } from "~/registry/default/ui/button"
+import type { StepItem } from "~/registry/default/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper state="error" initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+      isError,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button disabled={isError} size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/stepper-variants.tsx b/apps/web/registry/default/examples/stepper-variants.tsx
new file mode 100644
index 00000000..f27680f5
--- /dev/null
+++ b/apps/web/registry/default/examples/stepper-variants.tsx
@@ -0,0 +1,113 @@
+import * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import { Label } from "~/registry/default/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/default/ui/radio-group"
+import type { StepItem, StepperProps } from "~/registry/default/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/default/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   const [variant, setVariant] =
+      React.useState<StepperProps["variant"]>("circle")
+
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <RadioGroup
+            className="mb-2 flex"
+            value={variant}
+            onValueChange={(value) =>
+               setVariant(value as StepperProps["variant"])
+            }
+         >
+            <Label
+               htmlFor="circle"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem value="circle" id="circle" className="sr-only" />
+               <h2 className="font-medium">circle</h2>
+            </Label>
+            <Label
+               htmlFor="circle-alt"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem
+                  value="circle-alt"
+                  id="circle-alt"
+                  className="sr-only"
+               />
+               <h2 className="font-medium">circle-alt</h2>
+            </Label>
+            <Label
+               htmlFor="line"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem value="line" id="line" className="sr-only" />
+               <h2 className="font-medium">line</h2>
+            </Label>
+         </RadioGroup>
+         <Stepper variant={variant} initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/default/examples/switch-demo.tsx b/apps/web/registry/default/examples/switch-demo.tsx
new file mode 100644
index 00000000..526ebf99
--- /dev/null
+++ b/apps/web/registry/default/examples/switch-demo.tsx
@@ -0,0 +1,11 @@
+import { Label } from "~/registry/default/ui/label"
+import { Switch } from "~/registry/default/ui/switch"
+
+export default function SwitchDemo() {
+   return (
+      <div className="flex items-center space-x-2">
+         <Switch id="airplane-mode" />
+         <Label htmlFor="airplane-mode">Airplane Mode</Label>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/switch-form.tsx b/apps/web/registry/default/examples/switch-form.tsx
new file mode 100644
index 00000000..fc05e2fa
--- /dev/null
+++ b/apps/web/registry/default/examples/switch-form.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+} from "~/registry/default/ui/form"
+import { Switch } from "~/registry/default/ui/switch"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+   marketing_emails: z.boolean().default(false).optional(),
+   security_emails: z.boolean(),
+})
+
+export default function SwitchForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+         security_emails: true,
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-full space-y-6"
+         >
+            <div>
+               <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
+               <div className="space-y-4">
+                  <FormField
+                     control={form.control}
+                     name="marketing_emails"
+                     render={({ field }) => (
+                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                           <div className="space-y-0.5">
+                              <FormLabel className="text-base">
+                                 Marketing emails
+                              </FormLabel>
+                              <FormDescription>
+                                 Receive emails about new products, features,
+                                 and more.
+                              </FormDescription>
+                           </div>
+                           <FormControl>
+                              <Switch
+                                 checked={field.value}
+                                 onCheckedChange={field.onChange}
+                              />
+                           </FormControl>
+                        </FormItem>
+                     )}
+                  />
+                  <FormField
+                     control={form.control}
+                     name="security_emails"
+                     render={({ field }) => (
+                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                           <div className="space-y-0.5">
+                              <FormLabel className="text-base">
+                                 Security emails
+                              </FormLabel>
+                              <FormDescription>
+                                 Receive emails about your account security.
+                              </FormDescription>
+                           </div>
+                           <FormControl>
+                              <Switch
+                                 checked={field.value}
+                                 onCheckedChange={field.onChange}
+                                 disabled
+                                 aria-readonly
+                              />
+                           </FormControl>
+                        </FormItem>
+                     )}
+                  />
+               </div>
+            </div>
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/table-demo.tsx b/apps/web/registry/default/examples/table-demo.tsx
new file mode 100644
index 00000000..a0e5e55c
--- /dev/null
+++ b/apps/web/registry/default/examples/table-demo.tsx
@@ -0,0 +1,91 @@
+import {
+   Table,
+   TableBody,
+   TableCaption,
+   TableCell,
+   TableFooter,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/default/ui/table"
+
+const invoices = [
+   {
+      invoice: "INV001",
+      paymentStatus: "Paid",
+      totalAmount: "$250.00",
+      paymentMethod: "Credit Card",
+   },
+   {
+      invoice: "INV002",
+      paymentStatus: "Pending",
+      totalAmount: "$150.00",
+      paymentMethod: "PayPal",
+   },
+   {
+      invoice: "INV003",
+      paymentStatus: "Unpaid",
+      totalAmount: "$350.00",
+      paymentMethod: "Bank Transfer",
+   },
+   {
+      invoice: "INV004",
+      paymentStatus: "Paid",
+      totalAmount: "$450.00",
+      paymentMethod: "Credit Card",
+   },
+   {
+      invoice: "INV005",
+      paymentStatus: "Paid",
+      totalAmount: "$550.00",
+      paymentMethod: "PayPal",
+   },
+   {
+      invoice: "INV006",
+      paymentStatus: "Pending",
+      totalAmount: "$200.00",
+      paymentMethod: "Bank Transfer",
+   },
+   {
+      invoice: "INV007",
+      paymentStatus: "Unpaid",
+      totalAmount: "$300.00",
+      paymentMethod: "Credit Card",
+   },
+]
+
+export default function TableDemo() {
+   return (
+      <Table>
+         <TableCaption>A list of your recent invoices.</TableCaption>
+         <TableHeader>
+            <TableRow>
+               <TableHead className="w-[100px]">Invoice</TableHead>
+               <TableHead>Status</TableHead>
+               <TableHead>Method</TableHead>
+               <TableHead className="text-right">Amount</TableHead>
+            </TableRow>
+         </TableHeader>
+         <TableBody>
+            {invoices.map((invoice) => (
+               <TableRow key={invoice.invoice}>
+                  <TableCell className="font-medium">
+                     {invoice.invoice}
+                  </TableCell>
+                  <TableCell>{invoice.paymentStatus}</TableCell>
+                  <TableCell>{invoice.paymentMethod}</TableCell>
+                  <TableCell className="text-right">
+                     {invoice.totalAmount}
+                  </TableCell>
+               </TableRow>
+            ))}
+         </TableBody>
+         <TableFooter>
+            <TableRow>
+               <TableCell colSpan={3}>Total</TableCell>
+               <TableCell className="text-right">$2,500.00</TableCell>
+            </TableRow>
+         </TableFooter>
+      </Table>
+   )
+}
diff --git a/apps/web/registry/default/examples/tabs-demo.tsx b/apps/web/registry/default/examples/tabs-demo.tsx
new file mode 100644
index 00000000..bfa862f9
--- /dev/null
+++ b/apps/web/registry/default/examples/tabs-demo.tsx
@@ -0,0 +1,76 @@
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+import {
+   Tabs,
+   TabsContent,
+   TabsList,
+   TabsTrigger,
+} from "~/registry/default/ui/tabs"
+
+export default function TabsDemo() {
+   return (
+      <Tabs defaultValue="account" className="w-[400px]">
+         <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="account">Account</TabsTrigger>
+            <TabsTrigger value="password">Password</TabsTrigger>
+         </TabsList>
+         <TabsContent value="account">
+            <Card>
+               <CardHeader>
+                  <CardTitle>Account</CardTitle>
+                  <CardDescription>
+                     Make changes to your account here. Click save when you're
+                     done.
+                  </CardDescription>
+               </CardHeader>
+               <CardContent className="space-y-2">
+                  <div className="space-y-1">
+                     <Label htmlFor="name">Name</Label>
+                     <Input id="name" defaultValue="Pedro Duarte" />
+                  </div>
+                  <div className="space-y-1">
+                     <Label htmlFor="username">Username</Label>
+                     <Input id="username" defaultValue="~peduarte" />
+                  </div>
+               </CardContent>
+               <CardFooter>
+                  <Button>Save changes</Button>
+               </CardFooter>
+            </Card>
+         </TabsContent>
+         <TabsContent value="password">
+            <Card>
+               <CardHeader>
+                  <CardTitle>Password</CardTitle>
+                  <CardDescription>
+                     Change your password here. After saving, you'll be logged
+                     out.
+                  </CardDescription>
+               </CardHeader>
+               <CardContent className="space-y-2">
+                  <div className="space-y-1">
+                     <Label htmlFor="current">Current password</Label>
+                     <Input id="current" type="password" />
+                  </div>
+                  <div className="space-y-1">
+                     <Label htmlFor="new">New password</Label>
+                     <Input id="new" type="password" />
+                  </div>
+               </CardContent>
+               <CardFooter>
+                  <Button>Save password</Button>
+               </CardFooter>
+            </Card>
+         </TabsContent>
+      </Tabs>
+   )
+}
diff --git a/apps/web/registry/default/examples/terminal-demo.tsx b/apps/web/registry/default/examples/terminal-demo.tsx
new file mode 100644
index 00000000..f1eb9055
--- /dev/null
+++ b/apps/web/registry/default/examples/terminal-demo.tsx
@@ -0,0 +1,62 @@
+import {
+   AnimatedSpan,
+   Terminal,
+   TypingAnimation,
+} from "~/registry/default/ui/terminal"
+
+export default function TerminalDemo() {
+   return (
+      <Terminal>
+         <TypingAnimation>&gt; pnpm dlx nyxb@latest init</TypingAnimation>
+
+         <AnimatedSpan delay={1500} className="text-green-500">
+            <span>✔ Preflight checks.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={2000} className="text-green-500">
+            <span>✔ Verifying framework. Found Next.js.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={2500} className="text-green-500">
+            <span>✔ Validating Tailwind CSS.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={3000} className="text-green-500">
+            <span>✔ Validating import alias.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={3500} className="text-green-500">
+            <span>✔ Writing components.json.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={4000} className="text-green-500">
+            <span>✔ Checking registry.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={4500} className="text-green-500">
+            <span>✔ Updating tailwind.config.ts</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={5000} className="text-green-500">
+            <span>✔ Updating app/globals.css</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={5500} className="text-green-500">
+            <span>✔ Installing dependencies.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={6000} className="text-blue-500">
+            <span>ℹ Updated 1 file:</span>
+            <span className="pl-2">- lib/utils.ts</span>
+         </AnimatedSpan>
+
+         <TypingAnimation delay={6500} className="text-muted-foreground">
+            Success! Project initialization completed.
+         </TypingAnimation>
+
+         <TypingAnimation delay={7000} className="text-muted-foreground">
+            You may now add components.
+         </TypingAnimation>
+      </Terminal>
+   )
+}
diff --git a/apps/web/registry/default/examples/text-animate-demo-2.tsx b/apps/web/registry/default/examples/text-animate-demo-2.tsx
new file mode 100644
index 00000000..0edebd3d
--- /dev/null
+++ b/apps/web/registry/default/examples/text-animate-demo-2.tsx
@@ -0,0 +1,9 @@
+import { TextAnimate } from "~/registry/default/ui/text-animate"
+
+export default function TextAnimateDemo2() {
+   return (
+      <TextAnimate animation="blurIn" as="h1">
+         Blur in text
+      </TextAnimate>
+   )
+}
diff --git a/apps/web/registry/default/examples/text-animate-demo-3.tsx b/apps/web/registry/default/examples/text-animate-demo-3.tsx
new file mode 100644
index 00000000..12aac482
--- /dev/null
+++ b/apps/web/registry/default/examples/text-animate-demo-3.tsx
@@ -0,0 +1,9 @@
+import { TextAnimate } from "~/registry/default/ui/text-animate"
+
+export default function TextAnimateDemo3() {
+   return (
+      <TextAnimate animation="slideUp" by="word">
+         Slide up by word
+      </TextAnimate>
+   )
+}
diff --git a/apps/web/registry/default/examples/text-animate-demo-4.tsx b/apps/web/registry/default/examples/text-animate-demo-4.tsx
new file mode 100644
index 00000000..b3600556
--- /dev/null
+++ b/apps/web/registry/default/examples/text-animate-demo-4.tsx
@@ -0,0 +1,9 @@
+import { TextAnimate } from "~/registry/default/ui/text-animate"
+
+export default function TextAnimateDemo4() {
+   return (
+      <TextAnimate animation="scaleUp" by="text">
+         Scale up by text
+      </TextAnimate>
+   )
+}
diff --git a/apps/web/registry/default/examples/text-animate-demo-5.tsx b/apps/web/registry/default/examples/text-animate-demo-5.tsx
new file mode 100644
index 00000000..3eb0564b
--- /dev/null
+++ b/apps/web/registry/default/examples/text-animate-demo-5.tsx
@@ -0,0 +1,9 @@
+import { TextAnimate } from "~/registry/default/ui/text-animate"
+
+export default function TextAnimateDemo5() {
+   return (
+      <TextAnimate animation="fadeIn" by="line" as="p">
+         {`Fade in by line as paragraph\n\nFade in by line as paragraph\n\nFade in by line as paragraph`}
+      </TextAnimate>
+   )
+}
diff --git a/apps/web/registry/default/examples/text-animate-demo-6.tsx b/apps/web/registry/default/examples/text-animate-demo-6.tsx
new file mode 100644
index 00000000..f4ed507c
--- /dev/null
+++ b/apps/web/registry/default/examples/text-animate-demo-6.tsx
@@ -0,0 +1,9 @@
+import { TextAnimate } from "~/registry/default/ui/text-animate"
+
+export default function TextAnimateDemo6() {
+   return (
+      <TextAnimate animation="slideLeft" by="character">
+         Slide left by character
+      </TextAnimate>
+   )
+}
diff --git a/apps/web/registry/default/examples/text-animate-demo.tsx b/apps/web/registry/default/examples/text-animate-demo.tsx
new file mode 100644
index 00000000..872e7a40
--- /dev/null
+++ b/apps/web/registry/default/examples/text-animate-demo.tsx
@@ -0,0 +1,9 @@
+import { TextAnimate } from "~/registry/default/ui/text-animate"
+
+export default function TextAnimateDemo() {
+   return (
+      <TextAnimate animation="blurInUp" by="character">
+         Blur in by character
+      </TextAnimate>
+   )
+}
diff --git a/apps/web/registry/default/examples/text-reveal-demo.tsx b/apps/web/registry/default/examples/text-reveal-demo.tsx
new file mode 100644
index 00000000..3126d7ab
--- /dev/null
+++ b/apps/web/registry/default/examples/text-reveal-demo.tsx
@@ -0,0 +1,9 @@
+import TextReveal from "~/registry/default/ui/text-reveal"
+
+export default async function TextRevealDemo() {
+   return (
+      <div className="z-10 flex min-h-64 items-center justify-center rounded-lg border bg-white dark:bg-black">
+         <TextReveal text="Nyxb UI will change the way you design." />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/textarea-demo.tsx b/apps/web/registry/default/examples/textarea-demo.tsx
new file mode 100644
index 00000000..b36e6ec8
--- /dev/null
+++ b/apps/web/registry/default/examples/textarea-demo.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "~/registry/default/ui/textarea"
+
+export default function TextareaDemo() {
+   return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/web/registry/default/examples/textarea-disabled.tsx b/apps/web/registry/default/examples/textarea-disabled.tsx
new file mode 100644
index 00000000..e8f9d713
--- /dev/null
+++ b/apps/web/registry/default/examples/textarea-disabled.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "~/registry/default/ui/textarea"
+
+export default function TextareaDisabled() {
+   return <Textarea placeholder="Type your message here." disabled />
+}
diff --git a/apps/web/registry/default/examples/textarea-form.tsx b/apps/web/registry/default/examples/textarea-form.tsx
new file mode 100644
index 00000000..63b2eb27
--- /dev/null
+++ b/apps/web/registry/default/examples/textarea-form.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import { Textarea } from "~/registry/default/ui/textarea"
+import { toast } from "~/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+   bio: z
+      .string()
+      .min(10, {
+         message: "Bio must be at least 10 characters.",
+      })
+      .max(160, {
+         message: "Bio must not be longer than 30 characters.",
+      }),
+})
+
+export default function TextareaForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="bio"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Bio</FormLabel>
+                     <FormControl>
+                        <Textarea
+                           placeholder="Tell us a little bit about yourself"
+                           className="resize-none"
+                           {...field}
+                        />
+                     </FormControl>
+                     <FormDescription>
+                        You can <span>~mention</span> other users and
+                        organizations.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/default/examples/textarea-with-button.tsx b/apps/web/registry/default/examples/textarea-with-button.tsx
new file mode 100644
index 00000000..a210ebfb
--- /dev/null
+++ b/apps/web/registry/default/examples/textarea-with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from "~/registry/default/ui/button"
+import { Textarea } from "~/registry/default/ui/textarea"
+
+export default function TextareaWithButton() {
+   return (
+      <div className="grid w-full gap-2">
+         <Textarea placeholder="Type your message here." />
+         <Button>Send message</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/textarea-with-label.tsx b/apps/web/registry/default/examples/textarea-with-label.tsx
new file mode 100644
index 00000000..ea91277f
--- /dev/null
+++ b/apps/web/registry/default/examples/textarea-with-label.tsx
@@ -0,0 +1,11 @@
+import { Label } from "~/registry/default/ui/label"
+import { Textarea } from "~/registry/default/ui/textarea"
+
+export default function TextareaWithLabel() {
+   return (
+      <div className="grid w-full gap-1.5">
+         <Label htmlFor="message">Your message</Label>
+         <Textarea placeholder="Type your message here." id="message" />
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/textarea-with-text.tsx b/apps/web/registry/default/examples/textarea-with-text.tsx
new file mode 100644
index 00000000..0b341925
--- /dev/null
+++ b/apps/web/registry/default/examples/textarea-with-text.tsx
@@ -0,0 +1,14 @@
+import { Label } from "~/registry/default/ui/label"
+import { Textarea } from "~/registry/default/ui/textarea"
+
+export default function TextareaWithText() {
+   return (
+      <div className="grid w-full gap-1.5">
+         <Label htmlFor="message-2">Your Message</Label>
+         <Textarea placeholder="Type your message here." id="message-2" />
+         <p className="text-muted-foreground text-sm">
+            Your message will be copied to the support team.
+         </p>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/examples/timeline-alternate.tsx b/apps/web/registry/default/examples/timeline-alternate.tsx
new file mode 100644
index 00000000..14ac76be
--- /dev/null
+++ b/apps/web/registry/default/examples/timeline-alternate.tsx
@@ -0,0 +1,84 @@
+import React from "react"
+
+import {
+   Timeline,
+   TimelineContent,
+   TimelineDot,
+   TimelineHeading,
+   TimelineItem,
+   TimelineLine,
+} from "~/registry/default/ui/timeline"
+
+export default function TimelineAlternate() {
+   return (
+      <Timeline positions="center">
+         <TimelineItem status="done">
+            <TimelineHeading side="left">Plan!</TimelineHeading>
+            <TimelineDot status="done" />
+            <TimelineLine done />
+            <TimelineContent side="left">
+               Before diving into coding, it is crucial to plan your software
+               project thoroughly. This involves defining the project scope,
+               setting clear objectives, and identifying the target audience.
+               Additionally, creating a timeline and allocating resources
+               appropriately will contribute to a successful development
+               process.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="right" className="text-destructive">
+               Design
+            </TimelineHeading>
+            <TimelineDot status="error" />
+            <TimelineLine done />
+            <TimelineContent>
+               Designing your software involves creating a blueprint that
+               outlines the structure, user interface, and functionality of your
+               application. Consider user experience (UX) principles,
+               wireframing, and prototyping to ensure an intuitive and visually
+               appealing design.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="left">Code</TimelineHeading>
+            <TimelineDot status="current" />
+            <TimelineLine />
+            <TimelineContent side="left">
+               The coding phase involves translating your design into actual
+               code. Choose a programming language and framework that aligns
+               with your project requirements. Follow best practices, such as
+               modular and reusable code, to enhance maintainability and
+               scalability. Regularly test your code to identify and fix any
+               bugs or errors.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading>Test</TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent>
+               Thorough testing is essential to ensure the quality and
+               reliability of your software. Implement different testing
+               methodologies, including unit testing, integration testing, and
+               user acceptance testing. This helps identify and rectify any
+               issues before deploying the software.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading side="left">Deploy</TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent side="left">
+               Once your software has passed rigorous testing, it's time to
+               deploy it. Consider the deployment environment, whether it's
+               on-premises or in the cloud. Ensure proper documentation and
+               provide clear instructions for installation and configuration.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineDot />
+            <TimelineHeading>Done!</TimelineHeading>
+         </TimelineItem>
+      </Timeline>
+   )
+}
diff --git a/apps/web/registry/default/examples/timeline-demo.tsx b/apps/web/registry/default/examples/timeline-demo.tsx
new file mode 100644
index 00000000..918cc28d
--- /dev/null
+++ b/apps/web/registry/default/examples/timeline-demo.tsx
@@ -0,0 +1,84 @@
+import React from "react"
+
+import {
+   Timeline,
+   TimelineContent,
+   TimelineDot,
+   TimelineHeading,
+   TimelineItem,
+   TimelineLine,
+} from "~/registry/default/ui/timeline"
+
+export default function TimelineDemo() {
+   return (
+      <Timeline>
+         <TimelineItem status="done">
+            <TimelineHeading>Plan!</TimelineHeading>
+            <TimelineDot status="done" />
+            <TimelineLine done />
+            <TimelineContent>
+               Before diving into coding, it is crucial to plan your software
+               project thoroughly. This involves defining the project scope,
+               setting clear objectives, and identifying the target audience.
+               Additionally, creating a timeline and allocating resources
+               appropriately will contribute to a successful development
+               process.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="right" className="text-destructive">
+               Design
+            </TimelineHeading>
+            <TimelineDot status="error" />
+            <TimelineLine done />
+            <TimelineContent>
+               Designing your software involves creating a blueprint that
+               outlines the structure, user interface, and functionality of your
+               application. Consider user experience (UX) principles,
+               wireframing, and prototyping to ensure an intuitive and visually
+               appealing design.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading>Code</TimelineHeading>
+            <TimelineDot status="current" />
+            <TimelineLine />
+            <TimelineContent>
+               The coding phase involves translating your design into actual
+               code. Choose a programming language and framework that aligns
+               with your project requirements. Follow best practices, such as
+               modular and reusable code, to enhance maintainability and
+               scalability. Regularly test your code to identify and fix any
+               bugs or errors.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading>Test</TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent>
+               Thorough testing is essential to ensure the quality and
+               reliability of your software. Implement different testing
+               methodologies, including unit testing, integration testing, and
+               user acceptance testing. This helps identify and rectify any
+               issues before deploying the software.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading>Deploy</TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent>
+               Once your software has passed rigorous testing, it's time to
+               deploy it. Consider the deployment environment, whether it's
+               on-premises or in the cloud. Ensure proper documentation and
+               provide clear instructions for installation and configuration.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading>Done!</TimelineHeading>
+            <TimelineDot />
+         </TimelineItem>
+      </Timeline>
+   )
+}
diff --git a/apps/web/registry/default/examples/timeline-labels.tsx b/apps/web/registry/default/examples/timeline-labels.tsx
new file mode 100644
index 00000000..310e04f5
--- /dev/null
+++ b/apps/web/registry/default/examples/timeline-labels.tsx
@@ -0,0 +1,102 @@
+import React from "react"
+
+import {
+   Timeline,
+   TimelineContent,
+   TimelineDot,
+   TimelineHeading,
+   TimelineItem,
+   TimelineLine,
+} from "~/registry/default/ui/timeline"
+
+export default function TimelineAlternate() {
+   return (
+      <Timeline positions="center">
+         <TimelineItem status="done">
+            <TimelineHeading side="left">Plan!</TimelineHeading>
+            <TimelineHeading side="right" variant="secondary">
+               Done (05/04/2024)
+            </TimelineHeading>
+            <TimelineDot status="done" />
+            <TimelineLine done />
+            <TimelineContent side="left">
+               Before diving into coding, it is crucial to plan your software
+               project thoroughly. This involves defining the project scope,
+               setting clear objectives, and identifying the target audience.
+               Additionally, creating a timeline and allocating resources
+               appropriately will contribute to a successful development
+               process.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="right" className="text-destructive">
+               Design
+            </TimelineHeading>
+            <TimelineHeading side="left" variant="secondary">
+               Failed (05/04/2024)
+            </TimelineHeading>
+            <TimelineDot status="error" />
+            <TimelineLine done />
+            <TimelineContent>
+               Designing your software involves creating a blueprint that
+               outlines the structure, user interface, and functionality of your
+               application. Consider user experience (UX) principles,
+               wireframing, and prototyping to ensure an intuitive and visually
+               appealing design.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="left">Code</TimelineHeading>
+            <TimelineHeading side="right" variant="secondary">
+               Current step
+            </TimelineHeading>
+            <TimelineDot status="current" />
+            <TimelineLine />
+            <TimelineContent side="left">
+               The coding phase involves translating your design into actual
+               code. Choose a programming language and framework that aligns
+               with your project requirements. Follow best practices, such as
+               modular and reusable code, to enhance maintainability and
+               scalability. Regularly test your code to identify and fix any
+               bugs or errors.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading>Test</TimelineHeading>
+            <TimelineHeading side="left" variant="secondary">
+               Next step
+            </TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent>
+               Thorough testing is essential to ensure the quality and
+               reliability of your software. Implement different testing
+               methodologies, including unit testing, integration testing, and
+               user acceptance testing. This helps identify and rectify any
+               issues before deploying the software.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading side="left">Deploy</TimelineHeading>
+            <TimelineHeading side="right" variant="secondary">
+               Deadline (05/10/2024)
+            </TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent side="left">
+               Once your software has passed rigorous testing, it's time to
+               deploy it. Consider the deployment environment, whether it's
+               on-premises or in the cloud. Ensure proper documentation and
+               provide clear instructions for installation and configuration.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineDot />
+            <TimelineHeading>Done!</TimelineHeading>
+            <TimelineHeading side="left" variant="secondary">
+               Here everything ends
+            </TimelineHeading>
+         </TimelineItem>
+      </Timeline>
+   )
+}
diff --git a/apps/web/registry/default/examples/timeline-right.tsx b/apps/web/registry/default/examples/timeline-right.tsx
new file mode 100644
index 00000000..2af7007b
--- /dev/null
+++ b/apps/web/registry/default/examples/timeline-right.tsx
@@ -0,0 +1,84 @@
+import React from "react"
+
+import {
+   Timeline,
+   TimelineContent,
+   TimelineDot,
+   TimelineHeading,
+   TimelineItem,
+   TimelineLine,
+} from "~/registry/default/ui/timeline"
+
+export default function TimelineRight() {
+   return (
+      <Timeline positions="right">
+         <TimelineItem status="done">
+            <TimelineHeading side="left">Plan!</TimelineHeading>
+            <TimelineDot status="done" />
+            <TimelineLine done />
+            <TimelineContent side="left">
+               Before diving into coding, it is crucial to plan your software
+               project thoroughly. This involves defining the project scope,
+               setting clear objectives, and identifying the target audience.
+               Additionally, creating a timeline and allocating resources
+               appropriately will contribute to a successful development
+               process.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="left" className="text-destructive">
+               Design
+            </TimelineHeading>
+            <TimelineDot status="error" />
+            <TimelineLine done />
+            <TimelineContent side="left">
+               Designing your software involves creating a blueprint that
+               outlines the structure, user interface, and functionality of your
+               application. Consider user experience (UX) principles,
+               wireframing, and prototyping to ensure an intuitive and visually
+               appealing design.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="left">Code</TimelineHeading>
+            <TimelineDot status="current" />
+            <TimelineLine />
+            <TimelineContent side="left">
+               The coding phase involves translating your design into actual
+               code. Choose a programming language and framework that aligns
+               with your project requirements. Follow best practices, such as
+               modular and reusable code, to enhance maintainability and
+               scalability. Regularly test your code to identify and fix any
+               bugs or errors.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading side="left">Test</TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent side="left">
+               Thorough testing is essential to ensure the quality and
+               reliability of your software. Implement different testing
+               methodologies, including unit testing, integration testing, and
+               user acceptance testing. This helps identify and rectify any
+               issues before deploying the software.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading side="left">Deploy</TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent side="left">
+               Once your software has passed rigorous testing, it's time to
+               deploy it. Consider the deployment environment, whether it's
+               on-premises or in the cloud. Ensure proper documentation and
+               provide clear instructions for installation and configuration.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineDot />
+            <TimelineHeading side="left">Done!</TimelineHeading>
+         </TimelineItem>
+      </Timeline>
+   )
+}
diff --git a/apps/web/registry/default/examples/toast-demo.tsx b/apps/web/registry/default/examples/toast-demo.tsx
new file mode 100644
index 00000000..cefffc10
--- /dev/null
+++ b/apps/web/registry/default/examples/toast-demo.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { Button } from "~/registry/default/ui/button"
+import { ToastAction } from "~/registry/default/ui/toast"
+import { useToast } from "~/registry/default/ui/use-toast"
+
+export default function ToastDemo() {
+   const { toast } = useToast()
+
+   return (
+      <Button
+         variant="outline"
+         onClick={() => {
+            toast({
+               title: "Scheduled: Catch up ",
+               description: "Friday, February 10, 2023 at 5:57 PM",
+               action: (
+                  <ToastAction altText="Goto schedule to undo">
+                     Undo
+                  </ToastAction>
+               ),
+            })
+         }}
+      >
+         Add to calendar
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/examples/toast-destructive.tsx b/apps/web/registry/default/examples/toast-destructive.tsx
new file mode 100644
index 00000000..42dc3208
--- /dev/null
+++ b/apps/web/registry/default/examples/toast-destructive.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { Button } from "~/registry/default/ui/button"
+import { ToastAction } from "~/registry/default/ui/toast"
+import { useToast } from "~/registry/default/ui/use-toast"
+
+export default function ToastDestructive() {
+   const { toast } = useToast()
+
+   return (
+      <Button
+         variant="outline"
+         onClick={() => {
+            toast({
+               variant: "destructive",
+               title: "Uh oh! Something went wrong.",
+               description: "There was a problem with your request.",
+               action: <ToastAction altText="Try again">Try again</ToastAction>,
+            })
+         }}
+      >
+         Show Toast
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/examples/toast-simple.tsx b/apps/web/registry/default/examples/toast-simple.tsx
new file mode 100644
index 00000000..f4994c7e
--- /dev/null
+++ b/apps/web/registry/default/examples/toast-simple.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { Button } from "~/registry/default/ui/button"
+import { useToast } from "~/registry/default/ui/use-toast"
+
+export default function ToastSimple() {
+   const { toast } = useToast()
+
+   return (
+      <Button
+         variant="outline"
+         onClick={() => {
+            toast({
+               description: "Your message has been sent.",
+            })
+         }}
+      >
+         Show Toast
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/examples/toast-with-action.tsx b/apps/web/registry/default/examples/toast-with-action.tsx
new file mode 100644
index 00000000..610cd25c
--- /dev/null
+++ b/apps/web/registry/default/examples/toast-with-action.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { Button } from "~/registry/default/ui/button"
+import { ToastAction } from "~/registry/default/ui/toast"
+import { useToast } from "~/registry/default/ui/use-toast"
+
+export default function ToastWithAction() {
+   const { toast } = useToast()
+
+   return (
+      <Button
+         variant="outline"
+         onClick={() => {
+            toast({
+               title: "Uh oh! Something went wrong.",
+               description: "There was a problem with your request.",
+               action: <ToastAction altText="Try again">Try again</ToastAction>,
+            })
+         }}
+      >
+         Show Toast
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/examples/toast-with-title.tsx b/apps/web/registry/default/examples/toast-with-title.tsx
new file mode 100644
index 00000000..0833a471
--- /dev/null
+++ b/apps/web/registry/default/examples/toast-with-title.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { Button } from "~/registry/default/ui/button"
+import { useToast } from "~/registry/default/ui/use-toast"
+
+export default function ToastWithTitle() {
+   const { toast } = useToast()
+
+   return (
+      <Button
+         variant="outline"
+         onClick={() => {
+            toast({
+               title: "Uh oh! Something went wrong.",
+               description: "There was a problem with your request.",
+            })
+         }}
+      >
+         Show Toast
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/examples/toc-active.tsx b/apps/web/registry/default/examples/toc-active.tsx
new file mode 100644
index 00000000..491015ef
--- /dev/null
+++ b/apps/web/registry/default/examples/toc-active.tsx
@@ -0,0 +1,31 @@
+import {
+   TableOfContentsItem,
+   TableOfContentsLink,
+   TableOfContentsList,
+   TableOfContentsTitle,
+} from "~/registry/default/ui/toc"
+
+export default function TOCActive() {
+   return (
+      <TableOfContentsList>
+         <TableOfContentsTitle>
+            Active Item Table of Contents
+         </TableOfContentsTitle>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#first-section">
+               First Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+         <TableOfContentsItem indent>
+            <TableOfContentsLink isActive href="#second-section">
+               Second Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#third-section">
+               Third Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+      </TableOfContentsList>
+   )
+}
diff --git a/apps/web/registry/default/examples/toc-demo.tsx b/apps/web/registry/default/examples/toc-demo.tsx
new file mode 100644
index 00000000..bfd96050
--- /dev/null
+++ b/apps/web/registry/default/examples/toc-demo.tsx
@@ -0,0 +1,29 @@
+import {
+   TableOfContentsItem,
+   TableOfContentsLink,
+   TableOfContentsList,
+   TableOfContentsTitle,
+} from "~/registry/default/ui/toc"
+
+export default function TOCDemo() {
+   return (
+      <TableOfContentsList>
+         <TableOfContentsTitle>Table of Contents</TableOfContentsTitle>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#first-section">
+               First Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#second-section">
+               Second Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#third-section">
+               Third Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+      </TableOfContentsList>
+   )
+}
diff --git a/apps/web/registry/default/examples/toc-nested.tsx b/apps/web/registry/default/examples/toc-nested.tsx
new file mode 100644
index 00000000..49b63128
--- /dev/null
+++ b/apps/web/registry/default/examples/toc-nested.tsx
@@ -0,0 +1,36 @@
+import {
+   TableOfContentsItem,
+   TableOfContentsLink,
+   TableOfContentsList,
+   TableOfContentsTitle,
+} from "~/registry/default/ui/toc"
+
+export default function TOCDNested() {
+   return (
+      <TableOfContentsList>
+         <TableOfContentsTitle>Nested Table of Contents</TableOfContentsTitle>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#first-section-nested">
+               First Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+         <TableOfContentsItem indent>
+            <TableOfContentsList>
+               <TableOfContentsLink href="#first-nested-section-nested">
+                  First Nested Section
+               </TableOfContentsLink>
+               <TableOfContentsItem indent>
+                  <TableOfContentsLink href="#second-nested-section-nested">
+                     Second Nested Section
+                  </TableOfContentsLink>
+               </TableOfContentsItem>
+            </TableOfContentsList>
+         </TableOfContentsItem>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#third-section-nested">
+               Third Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+      </TableOfContentsList>
+   )
+}
diff --git a/apps/web/registry/default/examples/toggle-demo.tsx b/apps/web/registry/default/examples/toggle-demo.tsx
new file mode 100644
index 00000000..ec6dfd10
--- /dev/null
+++ b/apps/web/registry/default/examples/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { Bold } from "lucide-react"
+
+import { Toggle } from "~/registry/default/ui/toggle"
+
+export default function ToggleDemo() {
+   return (
+      <Toggle aria-label="Toggle bold">
+         <Bold className="size-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/default/examples/toggle-disabled.tsx b/apps/web/registry/default/examples/toggle-disabled.tsx
new file mode 100644
index 00000000..839f2782
--- /dev/null
+++ b/apps/web/registry/default/examples/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { Underline } from "lucide-react"
+
+import { Toggle } from "~/registry/default/ui/toggle"
+
+export default function ToggleDisabled() {
+   return (
+      <Toggle aria-label="Toggle underline" disabled>
+         <Underline className="size-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/default/examples/toggle-group-demo.tsx b/apps/web/registry/default/examples/toggle-group-demo.tsx
new file mode 100644
index 00000000..833275be
--- /dev/null
+++ b/apps/web/registry/default/examples/toggle-group-demo.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+   ToggleGroup,
+   ToggleGroupItem,
+} from "~/registry/default/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+   return (
+      <ToggleGroup type="multiple">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <Bold className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <Italic className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="underline" aria-label="Toggle underline">
+            <Underline className="size-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/default/examples/toggle-group-disabled.tsx b/apps/web/registry/default/examples/toggle-group-disabled.tsx
new file mode 100644
index 00000000..103c58d4
--- /dev/null
+++ b/apps/web/registry/default/examples/toggle-group-disabled.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+   ToggleGroup,
+   ToggleGroupItem,
+} from "~/registry/default/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+   return (
+      <ToggleGroup disabled type="single">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <Bold className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <Italic className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="underline" aria-label="Toggle underline">
+            <Underline className="size-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/default/examples/toggle-group-lg.tsx b/apps/web/registry/default/examples/toggle-group-lg.tsx
new file mode 100644
index 00000000..92b5a518
--- /dev/null
+++ b/apps/web/registry/default/examples/toggle-group-lg.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+   ToggleGroup,
+   ToggleGroupItem,
+} from "~/registry/default/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+   return (
+      <ToggleGroup size="lg" type="multiple">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <Bold className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <Italic className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="underline" aria-label="Toggle underline">
+            <Underline className="size-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/default/examples/toggle-group-outline.tsx b/apps/web/registry/default/examples/toggle-group-outline.tsx
new file mode 100644
index 00000000..f9a24201
--- /dev/null
+++ b/apps/web/registry/default/examples/toggle-group-outline.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+   ToggleGroup,
+   ToggleGroupItem,
+} from "~/registry/default/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+   return (
+      <ToggleGroup variant="outline" type="multiple">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <Bold className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <Italic className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="underline" aria-label="Toggle underline">
+            <Underline className="size-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/default/examples/toggle-group-single.tsx b/apps/web/registry/default/examples/toggle-group-single.tsx
new file mode 100644
index 00000000..fb422fbb
--- /dev/null
+++ b/apps/web/registry/default/examples/toggle-group-single.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+   ToggleGroup,
+   ToggleGroupItem,
+} from "~/registry/default/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+   return (
+      <ToggleGroup type="single">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <Bold className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <Italic className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="underline" aria-label="Toggle underline">
+            <Underline className="size-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/default/examples/toggle-group-sm.tsx b/apps/web/registry/default/examples/toggle-group-sm.tsx
new file mode 100644
index 00000000..7873edf3
--- /dev/null
+++ b/apps/web/registry/default/examples/toggle-group-sm.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+   ToggleGroup,
+   ToggleGroupItem,
+} from "~/registry/default/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+   return (
+      <ToggleGroup size="sm" type="multiple">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <Bold className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <Italic className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="underline" aria-label="Toggle underline">
+            <Underline className="size-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/default/examples/toggle-lg.tsx b/apps/web/registry/default/examples/toggle-lg.tsx
new file mode 100644
index 00000000..39b5a346
--- /dev/null
+++ b/apps/web/registry/default/examples/toggle-lg.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "~/registry/default/ui/toggle"
+
+export default function ToggleLg() {
+   return (
+      <Toggle size="lg" aria-label="Toggle italic">
+         <Italic className="size-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/default/examples/toggle-outline.tsx b/apps/web/registry/default/examples/toggle-outline.tsx
new file mode 100644
index 00000000..8e91eefb
--- /dev/null
+++ b/apps/web/registry/default/examples/toggle-outline.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "~/registry/default/ui/toggle"
+
+export default function ToggleOutline() {
+   return (
+      <Toggle variant="outline" aria-label="Toggle italic">
+         <Italic className="size-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/default/examples/toggle-sm.tsx b/apps/web/registry/default/examples/toggle-sm.tsx
new file mode 100644
index 00000000..0917aa0c
--- /dev/null
+++ b/apps/web/registry/default/examples/toggle-sm.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "~/registry/default/ui/toggle"
+
+export default function ToggleSm() {
+   return (
+      <Toggle size="sm" aria-label="Toggle italic">
+         <Italic className="size-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/default/examples/toggle-with-text.tsx b/apps/web/registry/default/examples/toggle-with-text.tsx
new file mode 100644
index 00000000..b031c9b9
--- /dev/null
+++ b/apps/web/registry/default/examples/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "~/registry/default/ui/toggle"
+
+export default function ToggleWithText() {
+   return (
+      <Toggle aria-label="Toggle italic">
+         <Italic className="mr-2 size-4" />
+         Italic
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/default/examples/tooltip-demo.tsx b/apps/web/registry/default/examples/tooltip-demo.tsx
new file mode 100644
index 00000000..2bc25c8c
--- /dev/null
+++ b/apps/web/registry/default/examples/tooltip-demo.tsx
@@ -0,0 +1,24 @@
+import { Button } from "~/registry/default/ui/button"
+import {
+   Tooltip,
+   TooltipArrow,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/default/ui/tooltip"
+
+export default function TooltipDemo() {
+   return (
+      <TooltipProvider>
+         <Tooltip>
+            <TooltipTrigger asChild>
+               <Button variant="outline">Hover</Button>
+            </TooltipTrigger>
+            <TooltipContent>
+               <p>Add to library</p>
+               <TooltipArrow />
+            </TooltipContent>
+         </Tooltip>
+      </TooltipProvider>
+   )
+}
diff --git a/apps/web/registry/default/examples/tooltip-outline.tsx b/apps/web/registry/default/examples/tooltip-outline.tsx
new file mode 100644
index 00000000..a23e0192
--- /dev/null
+++ b/apps/web/registry/default/examples/tooltip-outline.tsx
@@ -0,0 +1,22 @@
+import { Button } from "~/registry/default/ui/button"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/default/ui/tooltip"
+
+export default function TooltipOutline() {
+   return (
+      <TooltipProvider>
+         <Tooltip>
+            <TooltipTrigger asChild>
+               <Button variant="outline">Hover</Button>
+            </TooltipTrigger>
+            <TooltipContent variant="outline">
+               <p>Add to library</p>
+            </TooltipContent>
+         </Tooltip>
+      </TooltipProvider>
+   )
+}
diff --git a/apps/web/registry/default/examples/tooltip-secondary.tsx b/apps/web/registry/default/examples/tooltip-secondary.tsx
new file mode 100644
index 00000000..570b2316
--- /dev/null
+++ b/apps/web/registry/default/examples/tooltip-secondary.tsx
@@ -0,0 +1,22 @@
+import { Button } from "~/registry/default/ui/button"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/default/ui/tooltip"
+
+export default function TooltipSecondary() {
+   return (
+      <TooltipProvider>
+         <Tooltip>
+            <TooltipTrigger asChild>
+               <Button variant="outline">Hover</Button>
+            </TooltipTrigger>
+            <TooltipContent variant="secondary">
+               <p>Add to library</p>
+            </TooltipContent>
+         </Tooltip>
+      </TooltipProvider>
+   )
+}
diff --git a/apps/web/registry/default/examples/tooltip-with-toggle-demo.tsx b/apps/web/registry/default/examples/tooltip-with-toggle-demo.tsx
new file mode 100644
index 00000000..f92c2107
--- /dev/null
+++ b/apps/web/registry/default/examples/tooltip-with-toggle-demo.tsx
@@ -0,0 +1,26 @@
+import { Heart } from "lucide-react"
+
+import { Toggle } from "~/registry/default/ui/toggle"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/default/ui/tooltip"
+
+export default function TooltipWithToggleDemo() {
+   return (
+      <TooltipProvider>
+         <Tooltip>
+            <TooltipTrigger>
+               <Toggle variant="outline" aria-label="Toggle love">
+                  <Heart className="size-4" />
+               </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+               <p>Heart</p>
+            </TooltipContent>
+         </Tooltip>
+      </TooltipProvider>
+   )
+}
diff --git a/apps/web/registry/default/examples/tour-demo.tsx b/apps/web/registry/default/examples/tour-demo.tsx
new file mode 100644
index 00000000..ffbfacbb
--- /dev/null
+++ b/apps/web/registry/default/examples/tour-demo.tsx
@@ -0,0 +1,127 @@
+import type * as React from "react"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { Input } from "~/registry/default/ui/input"
+import { TourFactory } from "~/registry/default/ui/tour"
+
+const tour = TourFactory([
+   "buttonOne",
+   "buttonTwo",
+   "missingButton",
+   "buttonFour",
+   "emailInput",
+])
+
+function TourDisplay(props: {
+   children: React.ReactNode
+   title?: string
+   description?: string
+}) {
+   const ctx = tour.useContext()
+   return (
+      <Card className="w-[350px]">
+         <CardHeader>
+            <CardTitle>{props.title}</CardTitle>
+            <CardDescription>{props.description}</CardDescription>
+         </CardHeader>
+         <CardContent>{props.children}</CardContent>
+         <CardFooter>
+            {ctx.current < ctx.nodes.size ? (
+               <div className="flex w-full justify-between">
+                  <Button variant="outline" onClick={ctx.close}>
+                     Close
+                  </Button>
+                  <div>
+                     <Button onClick={ctx.previous}>Previous</Button>
+                     <Button onClick={ctx.next}>Next</Button>
+                  </div>
+               </div>
+            ) : (
+               <div className="flex w-full justify-end">
+                  <Button onClick={ctx.previous}>Previous</Button>
+                  <Button className="bg-green-800" onClick={ctx.close}>
+                     Finish
+                  </Button>
+               </div>
+            )}
+         </CardFooter>
+      </Card>
+   )
+}
+
+function TourApplication() {
+   const ctx = tour.useContext()
+   return (
+      <div className="flex h-96 w-full items-center justify-center">
+         <div className="absolute bottom-2 left-2 flex gap-2">
+            <tour.TourFocus
+               name="buttonOne"
+               tourRender={
+                  <TourDisplay title="Create Incident">
+                     <h1>This button creates an incident</h1>
+                     <p>helpful text about this button</p>
+                  </TourDisplay>
+               }
+            >
+               <Button>Create Incident</Button>
+            </tour.TourFocus>
+            <tour.TourFocus
+               name="buttonFour"
+               tourRender={
+                  <TourDisplay title="Update Incident">
+                     <h1>This button pushes your updates</h1>
+                     <p>helpful text about this button</p>
+                  </TourDisplay>
+               }
+            >
+               <Button>Update Incident</Button>
+            </tour.TourFocus>
+         </div>
+         <div className="absolute right-2 top-12 flex gap-2">
+            <tour.TourFocus
+               name="buttonTwo"
+               tourRender={
+                  <TourDisplay title="Resolve Incident">
+                     <h1>This button Resolves the Incident</h1>
+                     <p>helpful text about this button</p>
+                  </TourDisplay>
+               }
+            >
+               <Button>Resolve Incident</Button>
+            </tour.TourFocus>
+         </div>
+         <div>
+            <tour.TourFocus
+               name="emailInput"
+               tourRender={
+                  <TourDisplay title="Email Input">
+                     <h1>This is where you put incident info</h1>
+                     <p>helpful text about this input</p>
+                  </TourDisplay>
+               }
+            >
+               <Input type="email" placeholder="Email" />
+            </tour.TourFocus>
+         </div>
+         <div className="absolute bottom-2 right-2">
+            <Button onClick={ctx.open}>Open Tour</Button>
+         </div>
+      </div>
+   )
+}
+
+export default function TourDemo() {
+   return (
+      <tour.TourProvider>
+         <TourApplication />
+      </tour.TourProvider>
+   )
+}
diff --git a/apps/web/registry/default/examples/tweet-card-demo.tsx b/apps/web/registry/default/examples/tweet-card-demo.tsx
new file mode 100644
index 00000000..4149bc7c
--- /dev/null
+++ b/apps/web/registry/default/examples/tweet-card-demo.tsx
@@ -0,0 +1,9 @@
+import ClientTweetCard from "~/registry/default/ui/client-tweet-card"
+
+/**
+ * <TweetCard /> (Server Side Only)
+ * <ClientTweetCard /> (Client Side Only)
+ */
+export default async function TweetDemo() {
+   return <ClientTweetCard id="1703861725534011484" className="shadow-2xl" />
+}
diff --git a/apps/web/registry/default/examples/tweet-card-images.tsx b/apps/web/registry/default/examples/tweet-card-images.tsx
new file mode 100644
index 00000000..661ef1ee
--- /dev/null
+++ b/apps/web/registry/default/examples/tweet-card-images.tsx
@@ -0,0 +1,5 @@
+import ClientTweetCard from "~/registry/default/ui/client-tweet-card"
+
+export default async function TweetImages() {
+   return <ClientTweetCard id="1803717292087296479" className="shadow-2xl" />
+}
diff --git a/apps/web/registry/default/examples/tweet-card-meta-preview.tsx b/apps/web/registry/default/examples/tweet-card-meta-preview.tsx
new file mode 100644
index 00000000..3828f25a
--- /dev/null
+++ b/apps/web/registry/default/examples/tweet-card-meta-preview.tsx
@@ -0,0 +1,5 @@
+import ClientTweetCard from "~/registry/default/ui/client-tweet-card"
+
+export default async function TweetMetaPreview() {
+   return <ClientTweetCard id="1671108134591504385" className="shadow-2xl" />
+}
diff --git a/apps/web/registry/default/examples/typing-animation-demo.tsx b/apps/web/registry/default/examples/typing-animation-demo.tsx
new file mode 100644
index 00000000..1d28e086
--- /dev/null
+++ b/apps/web/registry/default/examples/typing-animation-demo.tsx
@@ -0,0 +1,10 @@
+import TypingAnimation from "~/registry/default/ui/typing-animation"
+
+export default async function TextRevealDemo() {
+   return (
+      <TypingAnimation
+         className="text-4xl font-bold text-black dark:text-white"
+         text="Typing Animation"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/typography-blockquote.tsx b/apps/web/registry/default/examples/typography-blockquote.tsx
new file mode 100644
index 00000000..4de1d264
--- /dev/null
+++ b/apps/web/registry/default/examples/typography-blockquote.tsx
@@ -0,0 +1,8 @@
+export default function TypographyBlockquote() {
+   return (
+      <blockquote className="mt-6 border-l-2 pl-6 italic">
+         "After all," he said, "everyone enjoys a good joke, so it's only fair
+         that they should pay for the privilege."
+      </blockquote>
+   )
+}
diff --git a/apps/web/registry/default/examples/typography-demo.tsx b/apps/web/registry/default/examples/typography-demo.tsx
new file mode 100644
index 00000000..b13c8155
--- /dev/null
+++ b/apps/web/registry/default/examples/typography-demo.tsx
@@ -0,0 +1,119 @@
+export default function TypographyDemo() {
+   return (
+      <div>
+         <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+            The Joke Tax Chronicles
+         </h1>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            Once upon a time, in a far-off land, there was a very lazy king who
+            spent all day lounging on his throne. One day, his advisors came to
+            him with a problem: the kingdom was running out of money.
+         </p>
+         <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+            The King's Plan
+         </h2>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            The king thought long and hard, and finally came up with{" "}
+            <a
+               href="#"
+               className="text-primary font-medium underline underline-offset-4"
+            >
+               a brilliant plan
+            </a>
+            : he would tax the jokes in the kingdom.
+         </p>
+         <blockquote className="mt-6 border-l-2 pl-6 italic">
+            "After all," he said, "everyone enjoys a good joke, so it's only
+            fair that they should pay for the privilege."
+         </blockquote>
+         <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+            The Joke Tax
+         </h3>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            The king's subjects were not amused. They grumbled and complained,
+            but the king was firm:
+         </p>
+         <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
+            <li>1st level of puns: 5 gold coins</li>
+            <li>2nd level of jokes: 10 gold coins</li>
+            <li>3rd level of one-liners : 20 gold coins</li>
+         </ul>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            As a result, people stopped telling jokes, and the kingdom fell into
+            a gloom. But there was one person who refused to let the king's
+            foolishness get him down: a court jester named Jokester.
+         </p>
+         <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+            Jokester's Revolt
+         </h3>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            Jokester began sneaking into the castle in the middle of the night
+            and leaving jokes all over the place: under the king's pillow, in
+            his soup, even in the royal toilet. The king was furious, but he
+            couldn't seem to stop Jokester.
+         </p>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            And then, one day, the people of the kingdom discovered that the
+            jokes left by Jokester were so funny that they couldn't help but
+            laugh. And once they started laughing, they couldn't stop.
+         </p>
+         <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+            The People's Rebellion
+         </h3>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            The people of the kingdom, feeling uplifted by the laughter, started
+            to tell jokes and puns again, and soon the entire kingdom was in on
+            the joke.
+         </p>
+         <div className="my-6 w-full overflow-y-auto">
+            <table className="w-full">
+               <thead>
+                  <tr className="even:bg-muted m-0 border-t p-0">
+                     <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                        King's Treasury
+                     </th>
+                     <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                        People's happiness
+                     </th>
+                  </tr>
+               </thead>
+               <tbody>
+                  <tr className="even:bg-muted m-0 border-t p-0">
+                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                        Empty
+                     </td>
+                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                        Overflowing
+                     </td>
+                  </tr>
+                  <tr className="even:bg-muted m-0 border-t p-0">
+                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                        Modest
+                     </td>
+                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                        Satisfied
+                     </td>
+                  </tr>
+                  <tr className="even:bg-muted m-0 border-t p-0">
+                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                        Full
+                     </td>
+                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                        Ecstatic
+                     </td>
+                  </tr>
+               </tbody>
+            </table>
+         </div>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            The king, seeing how much happier his subjects were, realized the
+            error of his ways and repealed the joke tax. Jokester was declared a
+            hero, and the kingdom lived happily ever after.
+         </p>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            The moral of the story is: never underestimate the power of a good
+            laugh and always be careful of bad ideas.
+         </p>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/example/typography-h1.tsx b/apps/web/registry/default/examples/typography-h1.tsx
similarity index 100%
rename from apps/web/registry/default/example/typography-h1.tsx
rename to apps/web/registry/default/examples/typography-h1.tsx
diff --git a/apps/web/registry/default/example/typography-h2.tsx b/apps/web/registry/default/examples/typography-h2.tsx
similarity index 100%
rename from apps/web/registry/default/example/typography-h2.tsx
rename to apps/web/registry/default/examples/typography-h2.tsx
diff --git a/apps/web/registry/default/example/typography-h3.tsx b/apps/web/registry/default/examples/typography-h3.tsx
similarity index 100%
rename from apps/web/registry/default/example/typography-h3.tsx
rename to apps/web/registry/default/examples/typography-h3.tsx
diff --git a/apps/web/registry/default/example/typography-h4.tsx b/apps/web/registry/default/examples/typography-h4.tsx
similarity index 100%
rename from apps/web/registry/default/example/typography-h4.tsx
rename to apps/web/registry/default/examples/typography-h4.tsx
diff --git a/apps/web/registry/default/example/typography-inline-code.tsx b/apps/web/registry/default/examples/typography-inline-code.tsx
similarity index 100%
rename from apps/web/registry/default/example/typography-inline-code.tsx
rename to apps/web/registry/default/examples/typography-inline-code.tsx
diff --git a/apps/web/registry/default/example/typography-large.tsx b/apps/web/registry/default/examples/typography-large.tsx
similarity index 100%
rename from apps/web/registry/default/example/typography-large.tsx
rename to apps/web/registry/default/examples/typography-large.tsx
diff --git a/apps/web/registry/default/examples/typography-lead.tsx b/apps/web/registry/default/examples/typography-lead.tsx
new file mode 100644
index 00000000..856bb6ed
--- /dev/null
+++ b/apps/web/registry/default/examples/typography-lead.tsx
@@ -0,0 +1,8 @@
+export default function TypographyLead() {
+   return (
+      <p className="text-muted-foreground text-xl">
+         A modal dialog that interrupts the user with important content and
+         expects a response.
+      </p>
+   )
+}
diff --git a/apps/web/registry/default/example/typography-list.tsx b/apps/web/registry/default/examples/typography-list.tsx
similarity index 100%
rename from apps/web/registry/default/example/typography-list.tsx
rename to apps/web/registry/default/examples/typography-list.tsx
diff --git a/apps/web/registry/default/example/typography-muted.tsx b/apps/web/registry/default/examples/typography-muted.tsx
similarity index 100%
rename from apps/web/registry/default/example/typography-muted.tsx
rename to apps/web/registry/default/examples/typography-muted.tsx
diff --git a/apps/web/registry/default/examples/typography-p.tsx b/apps/web/registry/default/examples/typography-p.tsx
new file mode 100644
index 00000000..9aa22e96
--- /dev/null
+++ b/apps/web/registry/default/examples/typography-p.tsx
@@ -0,0 +1,8 @@
+export default function TypographyP() {
+   return (
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+         The king, seeing how much happier his subjects were, realized the error
+         of his ways and repealed the joke tax.
+      </p>
+   )
+}
diff --git a/apps/web/registry/default/example/typography-small.tsx b/apps/web/registry/default/examples/typography-small.tsx
similarity index 100%
rename from apps/web/registry/default/example/typography-small.tsx
rename to apps/web/registry/default/examples/typography-small.tsx
diff --git a/apps/web/registry/default/example/typography-table.tsx b/apps/web/registry/default/examples/typography-table.tsx
similarity index 100%
rename from apps/web/registry/default/example/typography-table.tsx
rename to apps/web/registry/default/examples/typography-table.tsx
diff --git a/apps/web/registry/default/examples/video-modal-demo.tsx b/apps/web/registry/default/examples/video-modal-demo.tsx
new file mode 100644
index 00000000..df3cf9ea
--- /dev/null
+++ b/apps/web/registry/default/examples/video-modal-demo.tsx
@@ -0,0 +1,54 @@
+import { PlayCircle } from "lucide-react"
+import { Button } from "~/registry/default/ui/button"
+import {
+   VideoModal,
+   VideoModalContent,
+   VideoModalDescription,
+   VideoModalTitle,
+   VideoModalTrigger,
+   VideoModalVideo,
+   VideoPlayButton,
+   VideoPlayer,
+   VideoPreview,
+} from "~/registry/default/ui/video-modal"
+
+function VideoModalDemo() {
+   return (
+      <div className="relative justify-center">
+         <VideoModal>
+            <VideoModalTrigger>
+               <Button>Open modal</Button>
+            </VideoModalTrigger>
+            <VideoModalContent>
+               <VideoModalTitle>Modal Video Demo</VideoModalTitle>
+               <VideoModalDescription>
+                  Your subtitle or description here
+               </VideoModalDescription>
+               <VideoModalVideo>
+                  <VideoPlayer>
+                     <VideoPreview>
+                        <img
+                           src="https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200"
+                           alt="Video preview"
+                        />
+                     </VideoPreview>
+                     <VideoPlayButton>
+                        <button className="absolute inset-0 m-auto flex size-32 items-center justify-center rounded-full border border-white border-white/10 bg-white/50 transition duration-300 hover:bg-white/75">
+                           <PlayCircle className="size-20 stroke-1 text-white" />
+                        </button>
+                     </VideoPlayButton>
+                     <iframe
+                        className="size-full"
+                        src="https://cdn.magicui.design/globe.mp4"
+                        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+                        allowFullScreen
+                     />
+                  </VideoPlayer>
+               </VideoModalVideo>
+            </VideoModalContent>
+         </VideoModal>
+      </div>
+   )
+}
+
+export default VideoModalDemo
diff --git a/apps/web/registry/default/examples/warp-background-demo.tsx b/apps/web/registry/default/examples/warp-background-demo.tsx
new file mode 100644
index 00000000..d2e73798
--- /dev/null
+++ b/apps/web/registry/default/examples/warp-background-demo.tsx
@@ -0,0 +1,24 @@
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardTitle,
+} from "~/registry/default/ui/card"
+import { WarpBackground } from "~/registry/default/ui/warp-background"
+
+export default function ExampleComponentDemo() {
+   return (
+      <WarpBackground>
+         <Card className="w-80">
+            <CardContent className="flex flex-col gap-2 p-4">
+               <CardTitle>Congratulations on Your Promotion!</CardTitle>
+               <CardDescription>
+                  Your hard work and dedication have paid off. We&apos;re
+                  thrilled to see you take this next step in your career. Keep
+                  up the fantastic work!
+               </CardDescription>
+            </CardContent>
+         </Card>
+      </WarpBackground>
+   )
+}
diff --git a/apps/web/registry/default/examples/wavy-text-demo.tsx b/apps/web/registry/default/examples/wavy-text-demo.tsx
new file mode 100644
index 00000000..62e84b85
--- /dev/null
+++ b/apps/web/registry/default/examples/wavy-text-demo.tsx
@@ -0,0 +1,10 @@
+import WavyText from "~/registry/default/ui/wavy-text"
+
+export default function WavyTextDemo() {
+   return (
+      <WavyText
+         word="Wavy Text"
+         className="text-4xl font-bold text-black dark:text-white"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/word-fade-in-demo.tsx b/apps/web/registry/default/examples/word-fade-in-demo.tsx
new file mode 100644
index 00000000..ab70f449
--- /dev/null
+++ b/apps/web/registry/default/examples/word-fade-in-demo.tsx
@@ -0,0 +1,5 @@
+import WordFadeIn from "~/registry/default/ui/word-fade-in"
+
+export default async function WordFadeInDemo() {
+   return <WordFadeIn words="Word Fade In" />
+}
diff --git a/apps/web/registry/default/examples/word-pull-up-demo.tsx b/apps/web/registry/default/examples/word-pull-up-demo.tsx
new file mode 100644
index 00000000..f43a7a61
--- /dev/null
+++ b/apps/web/registry/default/examples/word-pull-up-demo.tsx
@@ -0,0 +1,10 @@
+import WordPullUp from "~/registry/default/ui/word-pull-up"
+
+export default async function WordPullUpDemo() {
+   return (
+      <WordPullUp
+         className="text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white"
+         words="Word Pull Up"
+      />
+   )
+}
diff --git a/apps/web/registry/default/examples/word-rotate-demo.tsx b/apps/web/registry/default/examples/word-rotate-demo.tsx
new file mode 100644
index 00000000..32f4164d
--- /dev/null
+++ b/apps/web/registry/default/examples/word-rotate-demo.tsx
@@ -0,0 +1,10 @@
+import WordRotate from "~/registry/default/ui/word-rotate"
+
+export default async function WordRotateDemo() {
+   return (
+      <WordRotate
+         className="text-4xl font-bold text-black dark:text-white"
+         words={["Word", "Rotate"]}
+      />
+   )
+}
diff --git a/apps/web/registry/default/hooks/use-anchor-observer.ts b/apps/web/registry/default/hooks/use-anchor-observer.ts
index f5daf522..cd2b190c 100644
--- a/apps/web/registry/default/hooks/use-anchor-observer.ts
+++ b/apps/web/registry/default/hooks/use-anchor-observer.ts
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react"
 
 /**
  * Find the active heading of page
@@ -21,35 +21,31 @@ export function useAnchorObserver(watch: string[], single: boolean): string[] {
             for (const entry of entries) {
                if (entry.isIntersecting && !visible.includes(entry.target.id)) {
                   visible = [...visible, entry.target.id]
-               }
-               else if (
-                  !entry.isIntersecting
-                  && visible.includes(entry.target.id)
+               } else if (
+                  !entry.isIntersecting &&
+                  visible.includes(entry.target.id)
                ) {
-                  visible = visible.filter(v => v !== entry.target.id)
+                  visible = visible.filter((v) => v !== entry.target.id)
                }
             }
 
-            if (visible.length > 0)
-               setActiveAnchor(visible)
+            if (visible.length > 0) setActiveAnchor(visible)
          },
          {
-            rootMargin: single ? '-80px 0% -70% 0%' : `-20px 0% -40% 0%`,
+            rootMargin: single ? "-80px 0% -70% 0%" : `-20px 0% -40% 0%`,
             threshold: 1,
          },
       )
 
       function onScroll(): void {
          const element = document.scrollingElement
-         if (!element)
-            return
+         if (!element) return
 
          if (element.scrollTop === 0 && single) {
             setActiveAnchor(watch.slice(0, 1))
-         }
-         else if (
-            element.scrollTop + element.clientHeight
-            >= element.scrollHeight - 6
+         } else if (
+            element.scrollTop + element.clientHeight >=
+            element.scrollHeight - 6
          ) {
             setActiveAnchor((active) => {
                return active.length > 0 && !single
@@ -62,14 +58,13 @@ export function useAnchorObserver(watch: string[], single: boolean): string[] {
       for (const heading of watch) {
          const element = document.getElementById(heading)
 
-         if (element)
-            observer.observe(element)
+         if (element) observer.observe(element)
       }
 
       onScroll()
-      window.addEventListener('scroll', onScroll)
+      window.addEventListener("scroll", onScroll)
       return () => {
-         window.removeEventListener('scroll', onScroll)
+         window.removeEventListener("scroll", onScroll)
          observer.disconnect()
       }
    }, [single, watch])
diff --git a/apps/web/registry/default/hooks/use-mobile.tsx b/apps/web/registry/default/hooks/use-mobile.tsx
index d290f8ed..cb15c382 100644
--- a/apps/web/registry/default/hooks/use-mobile.tsx
+++ b/apps/web/registry/default/hooks/use-mobile.tsx
@@ -1,18 +1,20 @@
-import * as React from 'react'
+import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768
 
 export function useIsMobile() {
-   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+      undefined,
+   )
 
    React.useEffect(() => {
       const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
       const onChange = () => {
          setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
       }
-      mql.addEventListener('change', onChange)
+      mql.addEventListener("change", onChange)
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-      return () => mql.removeEventListener('change', onChange)
+      return () => mql.removeEventListener("change", onChange)
    }, [])
 
    return !!isMobile
diff --git a/apps/web/registry/default/hooks/use-on-change.ts b/apps/web/registry/default/hooks/use-on-change.ts
index 3e317f0a..24688422 100644
--- a/apps/web/registry/default/hooks/use-on-change.ts
+++ b/apps/web/registry/default/hooks/use-on-change.ts
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { useState } from 'react'
+import { useState } from "react"
 
 function isDifferent(a: unknown, b: unknown): boolean {
    if (Array.isArray(a) && Array.isArray(b)) {
diff --git a/apps/web/registry/default/hooks/use-toast.ts b/apps/web/registry/default/hooks/use-toast.ts
index 65f548e1..c9da604a 100644
--- a/apps/web/registry/default/hooks/use-toast.ts
+++ b/apps/web/registry/default/hooks/use-toast.ts
@@ -1,12 +1,9 @@
-'use client'
+"use client"
 
 // Inspired by react-hot-toast library
-import * as React from 'react'
+import * as React from "react"
 
-import type {
-   ToastActionElement,
-   ToastProps,
-} from '~/registry/default/ui/toast'
+import type { ToastActionElement, ToastProps } from "~/registry/miami/ui/toast"
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
@@ -19,10 +16,10 @@ type ToasterToast = ToastProps & {
 }
 
 const actionTypes = {
-   ADD_TOAST: 'ADD_TOAST',
-   UPDATE_TOAST: 'UPDATE_TOAST',
-   DISMISS_TOAST: 'DISMISS_TOAST',
-   REMOVE_TOAST: 'REMOVE_TOAST',
+   ADD_TOAST: "ADD_TOAST",
+   UPDATE_TOAST: "UPDATE_TOAST",
+   DISMISS_TOAST: "DISMISS_TOAST",
+   REMOVE_TOAST: "REMOVE_TOAST",
 } as const
 
 let count = 0
@@ -36,21 +33,21 @@ type ActionType = typeof actionTypes
 
 type Action =
    | {
-      type: ActionType['ADD_TOAST']
-      toast: ToasterToast
-   }
+        type: ActionType["ADD_TOAST"]
+        toast: ToasterToast
+     }
    | {
-      type: ActionType['UPDATE_TOAST']
-      toast: Partial<ToasterToast>
-   }
+        type: ActionType["UPDATE_TOAST"]
+        toast: Partial<ToasterToast>
+     }
    | {
-      type: ActionType['DISMISS_TOAST']
-      toastId?: ToasterToast['id']
-   }
+        type: ActionType["DISMISS_TOAST"]
+        toastId?: ToasterToast["id"]
+     }
    | {
-      type: ActionType['REMOVE_TOAST']
-      toastId?: ToasterToast['id']
-   }
+        type: ActionType["REMOVE_TOAST"]
+        toastId?: ToasterToast["id"]
+     }
 
 interface State {
    toasts: ToasterToast[]
@@ -66,7 +63,7 @@ function addToRemoveQueue(toastId: string) {
    const timeout = setTimeout(() => {
       toastTimeouts.delete(toastId)
       dispatch({
-         type: 'REMOVE_TOAST',
+         type: "REMOVE_TOAST",
          toastId,
       })
    }, TOAST_REMOVE_DELAY)
@@ -76,29 +73,28 @@ function addToRemoveQueue(toastId: string) {
 
 export function reducer(state: State, action: Action): State {
    switch (action.type) {
-      case 'ADD_TOAST':
+      case "ADD_TOAST":
          return {
             ...state,
             toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
          }
 
-      case 'UPDATE_TOAST':
+      case "UPDATE_TOAST":
          return {
             ...state,
-            toasts: state.toasts.map(t =>
+            toasts: state.toasts.map((t) =>
                t.id === action.toast.id ? { ...t, ...action.toast } : t,
             ),
          }
 
-      case 'DISMISS_TOAST': {
+      case "DISMISS_TOAST": {
          const { toastId } = action
 
          // ! Side effects ! - This could be extracted into a dismissToast() action,
          // but I'll keep it here for simplicity
          if (toastId) {
             addToRemoveQueue(toastId)
-         }
-         else {
+         } else {
             state.toasts.forEach((toast) => {
                addToRemoveQueue(toast.id)
             })
@@ -106,17 +102,17 @@ export function reducer(state: State, action: Action): State {
 
          return {
             ...state,
-            toasts: state.toasts.map(t =>
+            toasts: state.toasts.map((t) =>
                t.id === toastId || toastId === undefined
                   ? {
-                        ...t,
-                        open: false,
-                     }
+                       ...t,
+                       open: false,
+                    }
                   : t,
             ),
          }
       }
-      case 'REMOVE_TOAST':
+      case "REMOVE_TOAST":
          if (action.toastId === undefined) {
             return {
                ...state,
@@ -125,7 +121,7 @@ export function reducer(state: State, action: Action): State {
          }
          return {
             ...state,
-            toasts: state.toasts.filter(t => t.id !== action.toastId),
+            toasts: state.toasts.filter((t) => t.id !== action.toastId),
          }
    }
 }
@@ -141,27 +137,26 @@ function dispatch(action: Action) {
    })
 }
 
-type Toast = Omit<ToasterToast, 'id'>
+type Toast = Omit<ToasterToast, "id">
 
 function toast({ ...props }: Toast) {
    const id = genId()
 
    const update = (props: ToasterToast) =>
       dispatch({
-         type: 'UPDATE_TOAST',
+         type: "UPDATE_TOAST",
          toast: { ...props, id },
       })
-   const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
 
    dispatch({
-      type: 'ADD_TOAST',
+      type: "ADD_TOAST",
       toast: {
          ...props,
          id,
          open: true,
          onOpenChange: (open) => {
-            if (!open)
-               dismiss()
+            if (!open) dismiss()
          },
       },
    })
@@ -189,7 +184,8 @@ function useToast() {
    return {
       ...state,
       toast,
-      dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+      dismiss: (toastId?: string) =>
+         dispatch({ type: "DISMISS_TOAST", toastId }),
    }
 }
 
diff --git a/apps/web/registry/default/internal/login-01.tsx b/apps/web/registry/default/internal/login-01.tsx
new file mode 100644
index 00000000..43772ac3
--- /dev/null
+++ b/apps/web/registry/default/internal/login-01.tsx
@@ -0,0 +1,68 @@
+import Link from "next/link"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export const description = "A simple login form."
+
+export const containerClassName = "w-full h-full"
+
+export default function Page() {
+   return (
+      <div className="flex h-screen w-full items-center justify-center px-4">
+         <Card className="mx-auto max-w-sm">
+            <CardHeader>
+               <CardTitle className="text-2xl">Login</CardTitle>
+               <CardDescription>
+                  Enter your email below to login to your account
+               </CardDescription>
+            </CardHeader>
+            <CardContent>
+               <div className="grid gap-4">
+                  <div className="grid gap-2">
+                     <Label htmlFor="email">Email</Label>
+                     <Input
+                        id="email"
+                        type="email"
+                        placeholder="m@example.com"
+                        required
+                     />
+                  </div>
+                  <div className="grid gap-2">
+                     <div className="flex items-center">
+                        <Label htmlFor="password">Password</Label>
+                        <Link
+                           href="#"
+                           className="ml-auto inline-block text-sm underline"
+                        >
+                           Forgot your password?
+                        </Link>
+                     </div>
+                     <Input id="password" type="password" required />
+                  </div>
+                  <Button type="submit" className="w-full">
+                     Login
+                  </Button>
+                  <Button variant="outline" className="w-full">
+                     Login with Google
+                  </Button>
+               </div>
+               <div className="mt-4 text-center text-sm">
+                  Don&apos;t have an account?{" "}
+                  <Link href="#" className="underline">
+                     Sign up
+                  </Link>
+               </div>
+            </CardContent>
+         </Card>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-01.tsx b/apps/web/registry/default/internal/sidebar-01.tsx
new file mode 100644
index 00000000..2ea4d0bd
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-01.tsx
@@ -0,0 +1,292 @@
+"use client"
+
+import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from "lucide-react"
+import * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Label } from "~/registry/miami/ui/label"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInput,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description =
+   "A simple sidebar with navigation grouped by section."
+
+const data = {
+   versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Component() {
+   const [selectedVersion, setSelectedVersion] = React.useState(
+      data.versions[0],
+   )
+
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton
+                              size="lg"
+                              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                           >
+                              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                                 <GalleryVerticalEnd className="size-4" />
+                              </div>
+                              <div className="flex flex-col gap-0.5 leading-none">
+                                 <span className="font-semibold">
+                                    Documentation
+                                 </span>
+                                 <span className="">v{selectedVersion}</span>
+                              </div>
+                              <ChevronsUpDown className="ml-auto" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                           className="w-[--radix-dropdown-menu-trigger-width]"
+                           align="start"
+                        >
+                           {data.versions.map((version) => (
+                              <DropdownMenuItem
+                                 key={version}
+                                 onSelect={() => setSelectedVersion(version)}
+                              >
+                                 v{version}{" "}
+                                 {version === selectedVersion && (
+                                    <Check className="ml-auto" />
+                                 )}
+                              </DropdownMenuItem>
+                           ))}
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+               <form>
+                  <SidebarGroup className="py-0">
+                     <SidebarGroupContent className="relative">
+                        <Label htmlFor="search" className="sr-only">
+                           Search
+                        </Label>
+                        <SidebarInput
+                           id="search"
+                           placeholder="Search the docs..."
+                           className="pl-8"
+                        />
+                        <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+                     </SidebarGroupContent>
+                  </SidebarGroup>
+               </form>
+            </SidebarHeader>
+            <SidebarContent>
+               {/* We create a SidebarGroup for each parent. */}
+               {data.navMain.map((item) => (
+                  <SidebarGroup key={item.title}>
+                     <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
+                     <SidebarGroupContent>
+                        <SidebarMenu>
+                           {item.items.map((item) => (
+                              <SidebarMenuItem key={item.title}>
+                                 <SidebarMenuButton
+                                    asChild
+                                    isActive={item.isActive}
+                                 >
+                                    <a href={item.url}>{item.title}</a>
+                                 </SidebarMenuButton>
+                              </SidebarMenuItem>
+                           ))}
+                        </SidebarMenu>
+                     </SidebarGroupContent>
+                  </SidebarGroup>
+               ))}
+            </SidebarContent>
+            <SidebarRail />
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-02.tsx b/apps/web/registry/default/internal/sidebar-02.tsx
new file mode 100644
index 00000000..f9d30488
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-02.tsx
@@ -0,0 +1,330 @@
+"use client"
+
+import {
+   Check,
+   ChevronRight,
+   ChevronsUpDown,
+   GalleryVerticalEnd,
+   Search,
+} from "lucide-react"
+import * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Label } from "~/registry/miami/ui/label"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInput,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with collapsible sections."
+
+// This is sample data.
+const data = {
+   versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Component() {
+   const [selectedVersion, setSelectedVersion] = React.useState(
+      data.versions[0],
+   )
+
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton
+                              size="lg"
+                              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                           >
+                              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                                 <GalleryVerticalEnd className="size-4" />
+                              </div>
+                              <div className="flex flex-col gap-0.5 leading-none">
+                                 <span className="font-semibold">
+                                    Documentation
+                                 </span>
+                                 <span className="">v{selectedVersion}</span>
+                              </div>
+                              <ChevronsUpDown className="ml-auto" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                           className="w-[--radix-dropdown-menu-trigger-width]"
+                           align="start"
+                        >
+                           {data.versions.map((version) => (
+                              <DropdownMenuItem
+                                 key={version}
+                                 onSelect={() => setSelectedVersion(version)}
+                              >
+                                 v{version}{" "}
+                                 {version === selectedVersion && (
+                                    <Check className="ml-auto" />
+                                 )}
+                              </DropdownMenuItem>
+                           ))}
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+               <form>
+                  <SidebarGroup className="py-0">
+                     <SidebarGroupContent className="relative">
+                        <Label htmlFor="search" className="sr-only">
+                           Search
+                        </Label>
+                        <SidebarInput
+                           id="search"
+                           placeholder="Search the docs..."
+                           className="pl-8"
+                        />
+                        <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+                     </SidebarGroupContent>
+                  </SidebarGroup>
+               </form>
+            </SidebarHeader>
+            <SidebarContent className="gap-0">
+               {/* We create a collapsible SidebarGroup for each parent. */}
+               {data.navMain.map((item) => (
+                  <Collapsible
+                     key={item.title}
+                     title={item.title}
+                     defaultOpen
+                     className="group/collapsible"
+                  >
+                     <SidebarGroup>
+                        <SidebarGroupLabel
+                           asChild
+                           className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                        >
+                           <CollapsibleTrigger>
+                              {item.title}{" "}
+                              <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                           </CollapsibleTrigger>
+                        </SidebarGroupLabel>
+                        <CollapsibleContent>
+                           <SidebarGroupContent>
+                              <SidebarMenu>
+                                 {item.items.map((item) => (
+                                    <SidebarMenuItem key={item.title}>
+                                       <SidebarMenuButton
+                                          asChild
+                                          isActive={item.isActive}
+                                       >
+                                          <a href={item.url}>{item.title}</a>
+                                       </SidebarMenuButton>
+                                    </SidebarMenuItem>
+                                 ))}
+                              </SidebarMenu>
+                           </SidebarGroupContent>
+                        </CollapsibleContent>
+                     </SidebarGroup>
+                  </Collapsible>
+               ))}
+            </SidebarContent>
+            <SidebarRail />
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               {Array.from({ length: 24 }).map((_, index) => (
+                  <div
+                     key={index}
+                     className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                  />
+               ))}
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-03.tsx b/apps/web/registry/default/internal/sidebar-03.tsx
new file mode 100644
index 00000000..f288be64
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-03.tsx
@@ -0,0 +1,272 @@
+"use client"
+
+import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from "lucide-react"
+import * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Label } from "~/registry/miami/ui/label"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInput,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with nested navigation."
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Component() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton size="lg" asChild>
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <GalleryVerticalEnd className="size-4" />
+                           </div>
+                           <div className="flex flex-col gap-0.5 leading-none">
+                              <span className="font-semibold">
+                                 Documentation
+                              </span>
+                              <span className="">v1.0.0</span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarMenu>
+                     {data.navMain.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url} className="font-medium">
+                                 {item.title}
+                              </a>
+                           </SidebarMenuButton>
+                           {item.items?.length ? (
+                              <SidebarMenuSub>
+                                 {item.items.map((item) => (
+                                    <SidebarMenuSubItem key={item.title}>
+                                       <SidebarMenuSubButton
+                                          asChild
+                                          isActive={item.isActive}
+                                       >
+                                          <a href={item.url}>{item.title}</a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           ) : null}
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarRail />
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+               <div className="flex items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-04.tsx b/apps/web/registry/default/internal/sidebar-04.tsx
new file mode 100644
index 00000000..0295640d
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-04.tsx
@@ -0,0 +1,264 @@
+"use client"
+
+import { GalleryVerticalEnd } from "lucide-react"
+import type * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A floating sidebar with submenus."
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Component() {
+   return (
+      <SidebarProvider
+         style={
+            {
+               "--sidebar-width": "19rem",
+            } as React.CSSProperties
+         }
+      >
+         <Sidebar variant="floating">
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton size="lg" asChild>
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <GalleryVerticalEnd className="size-4" />
+                           </div>
+                           <div className="flex flex-col gap-0.5 leading-none">
+                              <span className="font-semibold">
+                                 Documentation
+                              </span>
+                              <span className="">v1.0.0</span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarMenu className="gap-2">
+                     {data.navMain.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url} className="font-medium">
+                                 {item.title}
+                              </a>
+                           </SidebarMenuButton>
+                           {item.items?.length ? (
+                              <SidebarMenuSub className="ml-0 border-l-0 px-1.5">
+                                 {item.items.map((item) => (
+                                    <SidebarMenuSubItem key={item.title}>
+                                       <SidebarMenuSubButton
+                                          asChild
+                                          isActive={item.isActive}
+                                       >
+                                          <a href={item.url}>{item.title}</a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           ) : null}
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-05.tsx b/apps/web/registry/default/internal/sidebar-05.tsx
new file mode 100644
index 00000000..c6f8fa9a
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-05.tsx
@@ -0,0 +1,292 @@
+import { GalleryVerticalEnd, Minus, Plus, Search } from "lucide-react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import { Label } from "~/registry/miami/ui/label"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarHeader,
+   SidebarInput,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with collapsible submenus."
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Component() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton size="lg" asChild>
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <GalleryVerticalEnd className="size-4" />
+                           </div>
+                           <div className="flex flex-col gap-0.5 leading-none">
+                              <span className="font-semibold">
+                                 Documentation
+                              </span>
+                              <span className="">v1.0.0</span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+               <form>
+                  <SidebarGroup className="py-0">
+                     <SidebarGroupContent className="relative">
+                        <Label htmlFor="search" className="sr-only">
+                           Search
+                        </Label>
+                        <SidebarInput
+                           id="search"
+                           placeholder="Search the docs..."
+                           className="pl-8"
+                        />
+                        <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+                     </SidebarGroupContent>
+                  </SidebarGroup>
+               </form>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarMenu>
+                     {data.navMain.map((item, index) => (
+                        <Collapsible
+                           key={item.title}
+                           defaultOpen={index === 1}
+                           className="group/collapsible"
+                        >
+                           <SidebarMenuItem>
+                              <CollapsibleTrigger asChild>
+                                 <SidebarMenuButton>
+                                    {item.title}{" "}
+                                    <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                                    <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                                 </SidebarMenuButton>
+                              </CollapsibleTrigger>
+                              {item.items?.length ? (
+                                 <CollapsibleContent>
+                                    <SidebarMenuSub>
+                                       {item.items.map((item) => (
+                                          <SidebarMenuSubItem key={item.title}>
+                                             <SidebarMenuSubButton
+                                                asChild
+                                                isActive={item.isActive}
+                                             >
+                                                <a href={item.url}>
+                                                   {item.title}
+                                                </a>
+                                             </SidebarMenuSubButton>
+                                          </SidebarMenuSubItem>
+                                       ))}
+                                    </SidebarMenuSub>
+                                 </CollapsibleContent>
+                              ) : null}
+                           </SidebarMenuItem>
+                        </Collapsible>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarRail />
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-06.tsx b/apps/web/registry/default/internal/sidebar-06.tsx
new file mode 100644
index 00000000..7d841b66
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-06.tsx
@@ -0,0 +1,294 @@
+"use client"
+
+import { GalleryVerticalEnd, MoreHorizontal } from "lucide-react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarHeader,
+   SidebarInput,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with submenus as dropdowns."
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton size="lg" asChild>
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <GalleryVerticalEnd className="size-4" />
+                           </div>
+                           <div className="flex flex-col gap-0.5 leading-none">
+                              <span className="font-semibold">
+                                 Documentation
+                              </span>
+                              <span className="">v1.0.0</span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarMenu>
+                     {data.navMain.map((item) => (
+                        <DropdownMenu key={item.title}>
+                           <SidebarMenuItem>
+                              <DropdownMenuTrigger asChild>
+                                 <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                                    {item.title}{" "}
+                                    <MoreHorizontal className="ml-auto" />
+                                 </SidebarMenuButton>
+                              </DropdownMenuTrigger>
+                              {item.items?.length ? (
+                                 <DropdownMenuContent
+                                    side="bottom"
+                                    align="end"
+                                    className="min-w-56 rounded-lg"
+                                 >
+                                    {item.items.map((item) => (
+                                       <DropdownMenuItem
+                                          asChild
+                                          key={item.title}
+                                       >
+                                          <a href={item.url}>{item.title}</a>
+                                       </DropdownMenuItem>
+                                    ))}
+                                 </DropdownMenuContent>
+                              ) : null}
+                           </SidebarMenuItem>
+                        </DropdownMenu>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+               <div className="p-1">
+                  <Card className="shadow-none">
+                     <form>
+                        <CardHeader className="p-4 pb-0">
+                           <CardTitle className="text-sm">
+                              Subscribe to our newsletter
+                           </CardTitle>
+                           <CardDescription>
+                              Opt-in to receive updates and news about the
+                              sidebar.
+                           </CardDescription>
+                        </CardHeader>
+                        <CardContent className="grid gap-2.5 p-4">
+                           <SidebarInput type="email" placeholder="Email" />
+                           <Button
+                              className="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none"
+                              size="sm"
+                           >
+                              Subscribe
+                           </Button>
+                        </CardContent>
+                     </form>
+                  </Card>
+               </div>
+            </SidebarFooter>
+            <SidebarRail />
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-07.tsx b/apps/web/registry/default/internal/sidebar-07.tsx
new file mode 100644
index 00000000..84b37b79
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-07.tsx
@@ -0,0 +1,482 @@
+"use client"
+
+import {
+   AudioWaveform,
+   BadgeCheck,
+   Bell,
+   BookOpen,
+   Bot,
+   ChevronRight,
+   ChevronsUpDown,
+   Command,
+   CreditCard,
+   Folder,
+   Forward,
+   Frame,
+   GalleryVerticalEnd,
+   LogOut,
+   Map,
+   MoreHorizontal,
+   PieChart,
+   Plus,
+   Settings2,
+   Sparkles,
+   SquareTerminal,
+   Trash2,
+} from "lucide-react"
+import * as React from "react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar that collapses to icons."
+
+// This is sample data.
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: GalleryVerticalEnd,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+export default function Page() {
+   const [activeTeam, setActiveTeam] = React.useState(data.teams[0])
+
+   return (
+      <SidebarProvider>
+         <Sidebar collapsible="icon">
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton
+                              size="lg"
+                              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                           >
+                              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                                 <activeTeam.logo className="size-4" />
+                              </div>
+                              <div className="grid flex-1 text-left text-sm leading-tight">
+                                 <span className="truncate font-semibold">
+                                    {activeTeam.name}
+                                 </span>
+                                 <span className="truncate text-xs">
+                                    {activeTeam.plan}
+                                 </span>
+                              </div>
+                              <ChevronsUpDown className="ml-auto" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                           className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                           align="start"
+                           side="bottom"
+                           sideOffset={4}
+                        >
+                           <DropdownMenuLabel className="text-xs text-muted-foreground">
+                              Teams
+                           </DropdownMenuLabel>
+                           {data.teams.map((team, index) => (
+                              <DropdownMenuItem
+                                 key={team.name}
+                                 onClick={() => setActiveTeam(team)}
+                                 className="gap-2 p-2"
+                              >
+                                 <div className="flex size-6 items-center justify-center rounded-sm border">
+                                    <team.logo className="size-4 shrink-0" />
+                                 </div>
+                                 {team.name}
+                                 <DropdownMenuShortcut>
+                                    ⌘{index + 1}
+                                 </DropdownMenuShortcut>
+                              </DropdownMenuItem>
+                           ))}
+                           <DropdownMenuSeparator />
+                           <DropdownMenuItem className="gap-2 p-2">
+                              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                                 <Plus className="size-4" />
+                              </div>
+                              <div className="font-medium text-muted-foreground">
+                                 Add team
+                              </div>
+                           </DropdownMenuItem>
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Platform</SidebarGroupLabel>
+                  <SidebarMenu>
+                     {data.navMain.map((item) => (
+                        <Collapsible
+                           key={item.title}
+                           asChild
+                           defaultOpen={item.isActive}
+                           className="group/collapsible"
+                        >
+                           <SidebarMenuItem>
+                              <CollapsibleTrigger asChild>
+                                 <SidebarMenuButton tooltip={item.title}>
+                                    {item.icon && <item.icon />}
+                                    <span>{item.title}</span>
+                                    <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                                 </SidebarMenuButton>
+                              </CollapsibleTrigger>
+                              <CollapsibleContent>
+                                 <SidebarMenuSub>
+                                    {item.items?.map((subItem) => (
+                                       <SidebarMenuSubItem key={subItem.title}>
+                                          <SidebarMenuSubButton asChild>
+                                             <a href={subItem.url}>
+                                                <span>{subItem.title}</span>
+                                             </a>
+                                          </SidebarMenuSubButton>
+                                       </SidebarMenuSubItem>
+                                    ))}
+                                 </SidebarMenuSub>
+                              </CollapsibleContent>
+                           </SidebarMenuItem>
+                        </Collapsible>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroup>
+               <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarMenu>
+                     {data.projects.map((item) => (
+                        <SidebarMenuItem key={item.name}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url}>
+                                 <item.icon />
+                                 <span>{item.name}</span>
+                              </a>
+                           </SidebarMenuButton>
+                           <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                 <SidebarMenuAction showOnHover>
+                                    <MoreHorizontal />
+                                    <span className="sr-only">More</span>
+                                 </SidebarMenuAction>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent
+                                 className="w-48 rounded-lg"
+                                 side="bottom"
+                                 align="end"
+                              >
+                                 <DropdownMenuItem>
+                                    <Folder className="text-muted-foreground" />
+                                    <span>View Project</span>
+                                 </DropdownMenuItem>
+                                 <DropdownMenuItem>
+                                    <Forward className="text-muted-foreground" />
+                                    <span>Share Project</span>
+                                 </DropdownMenuItem>
+                                 <DropdownMenuSeparator />
+                                 <DropdownMenuItem>
+                                    <Trash2 className="text-muted-foreground" />
+                                    <span>Delete Project</span>
+                                 </DropdownMenuItem>
+                              </DropdownMenuContent>
+                           </DropdownMenu>
+                        </SidebarMenuItem>
+                     ))}
+                     <SidebarMenuItem>
+                        <SidebarMenuButton className="text-sidebar-foreground/70">
+                           <MoreHorizontal className="text-sidebar-foreground/70" />
+                           <span>More</span>
+                        </SidebarMenuButton>
+                     </SidebarMenuItem>
+                  </SidebarMenu>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton
+                              size="lg"
+                              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                           >
+                              <Avatar className="h-8 w-8 rounded-lg">
+                                 <AvatarImage
+                                    src={data.user.avatar}
+                                    alt={data.user.name}
+                                 />
+                                 <AvatarFallback className="rounded-lg">
+                                    CN
+                                 </AvatarFallback>
+                              </Avatar>
+                              <div className="grid flex-1 text-left text-sm leading-tight">
+                                 <span className="truncate font-semibold">
+                                    {data.user.name}
+                                 </span>
+                                 <span className="truncate text-xs">
+                                    {data.user.email}
+                                 </span>
+                              </div>
+                              <ChevronsUpDown className="ml-auto size-4" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                           className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                           side="bottom"
+                           align="end"
+                           sideOffset={4}
+                        >
+                           <DropdownMenuLabel className="p-0 font-normal">
+                              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                 <Avatar className="h-8 w-8 rounded-lg">
+                                    <AvatarImage
+                                       src={data.user.avatar}
+                                       alt={data.user.name}
+                                    />
+                                    <AvatarFallback className="rounded-lg">
+                                       CN
+                                    </AvatarFallback>
+                                 </Avatar>
+                                 <div className="grid flex-1 text-left text-sm leading-tight">
+                                    <span className="truncate font-semibold">
+                                       {data.user.name}
+                                    </span>
+                                    <span className="truncate text-xs">
+                                       {data.user.email}
+                                    </span>
+                                 </div>
+                              </div>
+                           </DropdownMenuLabel>
+                           <DropdownMenuSeparator />
+                           <DropdownMenuGroup>
+                              <DropdownMenuItem>
+                                 <Sparkles />
+                                 Upgrade to Pro
+                              </DropdownMenuItem>
+                           </DropdownMenuGroup>
+                           <DropdownMenuSeparator />
+                           <DropdownMenuGroup>
+                              <DropdownMenuItem>
+                                 <BadgeCheck />
+                                 Account
+                              </DropdownMenuItem>
+                              <DropdownMenuItem>
+                                 <CreditCard />
+                                 Billing
+                              </DropdownMenuItem>
+                              <DropdownMenuItem>
+                                 <Bell />
+                                 Notifications
+                              </DropdownMenuItem>
+                           </DropdownMenuGroup>
+                           <DropdownMenuSeparator />
+                           <DropdownMenuItem>
+                              <LogOut />
+                              Log out
+                           </DropdownMenuItem>
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarFooter>
+            <SidebarRail />
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-08.tsx b/apps/web/registry/default/internal/sidebar-08.tsx
new file mode 100644
index 00000000..94cb8d9f
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-08.tsx
@@ -0,0 +1,460 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   BookOpen,
+   Bot,
+   ChevronRight,
+   ChevronsUpDown,
+   Command,
+   CreditCard,
+   Folder,
+   Frame,
+   LifeBuoy,
+   LogOut,
+   Map,
+   MoreHorizontal,
+   PieChart,
+   Send,
+   Settings2,
+   Share,
+   Sparkles,
+   SquareTerminal,
+   Trash2,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "An inset sidebar with secondary navigation."
+
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Support",
+         url: "#",
+         icon: LifeBuoy,
+      },
+      {
+         title: "Feedback",
+         url: "#",
+         icon: Send,
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <Sidebar variant="inset">
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton size="lg" asChild>
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <Command className="size-4" />
+                           </div>
+                           <div className="grid flex-1 text-left text-sm leading-tight">
+                              <span className="truncate font-semibold">
+                                 Acme Inc
+                              </span>
+                              <span className="truncate text-xs">
+                                 Enterprise
+                              </span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Platform</SidebarGroupLabel>
+                  <SidebarMenu>
+                     {data.navMain.map((item) => (
+                        <Collapsible
+                           key={item.title}
+                           asChild
+                           defaultOpen={item.isActive}
+                        >
+                           <SidebarMenuItem>
+                              <SidebarMenuButton asChild tooltip={item.title}>
+                                 <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.title}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                              {item.items?.length ? (
+                                 <>
+                                    <CollapsibleTrigger asChild>
+                                       <SidebarMenuAction className="data-[state=open]:rotate-90">
+                                          <ChevronRight />
+                                          <span className="sr-only">
+                                             Toggle
+                                          </span>
+                                       </SidebarMenuAction>
+                                    </CollapsibleTrigger>
+                                    <CollapsibleContent>
+                                       <SidebarMenuSub>
+                                          {item.items?.map((subItem) => (
+                                             <SidebarMenuSubItem
+                                                key={subItem.title}
+                                             >
+                                                <SidebarMenuSubButton asChild>
+                                                   <a href={subItem.url}>
+                                                      <span>
+                                                         {subItem.title}
+                                                      </span>
+                                                   </a>
+                                                </SidebarMenuSubButton>
+                                             </SidebarMenuSubItem>
+                                          ))}
+                                       </SidebarMenuSub>
+                                    </CollapsibleContent>
+                                 </>
+                              ) : null}
+                           </SidebarMenuItem>
+                        </Collapsible>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroup>
+               <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarMenu>
+                     {data.projects.map((item) => (
+                        <SidebarMenuItem key={item.name}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url}>
+                                 <item.icon />
+                                 <span>{item.name}</span>
+                              </a>
+                           </SidebarMenuButton>
+                           <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                 <SidebarMenuAction showOnHover>
+                                    <MoreHorizontal />
+                                    <span className="sr-only">More</span>
+                                 </SidebarMenuAction>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent
+                                 className="w-48"
+                                 side="bottom"
+                                 align="end"
+                              >
+                                 <DropdownMenuItem>
+                                    <Folder className="text-muted-foreground" />
+                                    <span>View Project</span>
+                                 </DropdownMenuItem>
+                                 <DropdownMenuItem>
+                                    <Share className="text-muted-foreground" />
+                                    <span>Share Project</span>
+                                 </DropdownMenuItem>
+                                 <DropdownMenuSeparator />
+                                 <DropdownMenuItem>
+                                    <Trash2 className="text-muted-foreground" />
+                                    <span>Delete Project</span>
+                                 </DropdownMenuItem>
+                              </DropdownMenuContent>
+                           </DropdownMenu>
+                        </SidebarMenuItem>
+                     ))}
+                     <SidebarMenuItem>
+                        <SidebarMenuButton>
+                           <MoreHorizontal />
+                           <span>More</span>
+                        </SidebarMenuButton>
+                     </SidebarMenuItem>
+                  </SidebarMenu>
+               </SidebarGroup>
+               <SidebarGroup className="mt-auto">
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {data.navSecondary.map((item) => (
+                           <SidebarMenuItem key={item.title}>
+                              <SidebarMenuButton asChild size="sm">
+                                 <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.title}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton
+                              size="lg"
+                              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                           >
+                              <Avatar className="h-8 w-8 rounded-lg">
+                                 <AvatarImage
+                                    src={data.user.avatar}
+                                    alt={data.user.name}
+                                 />
+                                 <AvatarFallback className="rounded-lg">
+                                    CN
+                                 </AvatarFallback>
+                              </Avatar>
+                              <div className="grid flex-1 text-left text-sm leading-tight">
+                                 <span className="truncate font-semibold">
+                                    {data.user.name}
+                                 </span>
+                                 <span className="truncate text-xs">
+                                    {data.user.email}
+                                 </span>
+                              </div>
+                              <ChevronsUpDown className="ml-auto size-4" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                           className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                           side="bottom"
+                           align="end"
+                           sideOffset={4}
+                        >
+                           <DropdownMenuLabel className="p-0 font-normal">
+                              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                 <Avatar className="h-8 w-8 rounded-lg">
+                                    <AvatarImage
+                                       src={data.user.avatar}
+                                       alt={data.user.name}
+                                    />
+                                    <AvatarFallback className="rounded-lg">
+                                       CN
+                                    </AvatarFallback>
+                                 </Avatar>
+                                 <div className="grid flex-1 text-left text-sm leading-tight">
+                                    <span className="truncate font-semibold">
+                                       {data.user.name}
+                                    </span>
+                                    <span className="truncate text-xs">
+                                       {data.user.email}
+                                    </span>
+                                 </div>
+                              </div>
+                           </DropdownMenuLabel>
+                           <DropdownMenuSeparator />
+                           <DropdownMenuGroup>
+                              <DropdownMenuItem>
+                                 <Sparkles />
+                                 Upgrade to Pro
+                              </DropdownMenuItem>
+                           </DropdownMenuGroup>
+                           <DropdownMenuSeparator />
+                           <DropdownMenuGroup>
+                              <DropdownMenuItem>
+                                 <BadgeCheck />
+                                 Account
+                              </DropdownMenuItem>
+                              <DropdownMenuItem>
+                                 <CreditCard />
+                                 Billing
+                              </DropdownMenuItem>
+                              <DropdownMenuItem>
+                                 <Bell />
+                                 Notifications
+                              </DropdownMenuItem>
+                           </DropdownMenuGroup>
+                           <DropdownMenuSeparator />
+                           <DropdownMenuItem>
+                              <LogOut />
+                              Log out
+                           </DropdownMenuItem>
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarFooter>
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-09.tsx b/apps/web/registry/default/internal/sidebar-09.tsx
new file mode 100644
index 00000000..4938c561
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-09.tsx
@@ -0,0 +1,447 @@
+"use client"
+
+import {
+   ArchiveX,
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   Command,
+   CreditCard,
+   File,
+   Inbox,
+   LogOut,
+   Send,
+   Sparkles,
+   Trash2,
+} from "lucide-react"
+import * as React from "react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Label } from "~/registry/miami/ui/label"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarHeader,
+   SidebarInput,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+import { Switch } from "~/registry/miami/ui/switch"
+
+// This is sample data
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Inbox",
+         url: "#",
+         icon: Inbox,
+         isActive: true,
+      },
+      {
+         title: "Drafts",
+         url: "#",
+         icon: File,
+         isActive: false,
+      },
+      {
+         title: "Sent",
+         url: "#",
+         icon: Send,
+         isActive: false,
+      },
+      {
+         title: "Junk",
+         url: "#",
+         icon: ArchiveX,
+         isActive: false,
+      },
+      {
+         title: "Trash",
+         url: "#",
+         icon: Trash2,
+         isActive: false,
+      },
+   ],
+   mails: [
+      {
+         name: "William Smith",
+         email: "williamsmith@example.com",
+         subject: "Meeting Tomorrow",
+         date: "09:34 AM",
+         teaser:
+            "Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.",
+      },
+      {
+         name: "Alice Smith",
+         email: "alicesmith@example.com",
+         subject: "Re: Project Update",
+         date: "Yesterday",
+         teaser:
+            "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.",
+      },
+      {
+         name: "Bob Johnson",
+         email: "bobjohnson@example.com",
+         subject: "Weekend Plans",
+         date: "2 days ago",
+         teaser:
+            "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?",
+      },
+      {
+         name: "Emily Davis",
+         email: "emilydavis@example.com",
+         subject: "Re: Question about Budget",
+         date: "2 days ago",
+         teaser:
+            "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?",
+      },
+      {
+         name: "Michael Wilson",
+         email: "michaelwilson@example.com",
+         subject: "Important Announcement",
+         date: "1 week ago",
+         teaser:
+            "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.",
+      },
+      {
+         name: "Sarah Brown",
+         email: "sarahbrown@example.com",
+         subject: "Re: Feedback on Proposal",
+         date: "1 week ago",
+         teaser:
+            "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?",
+      },
+      {
+         name: "David Lee",
+         email: "davidlee@example.com",
+         subject: "New Project Idea",
+         date: "1 week ago",
+         teaser:
+            "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?",
+      },
+      {
+         name: "Olivia Wilson",
+         email: "oliviawilson@example.com",
+         subject: "Vacation Plans",
+         date: "1 week ago",
+         teaser:
+            "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.",
+      },
+      {
+         name: "James Martin",
+         email: "jamesmartin@example.com",
+         subject: "Re: Conference Registration",
+         date: "1 week ago",
+         teaser:
+            "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.",
+      },
+      {
+         name: "Sophia White",
+         email: "sophiawhite@example.com",
+         subject: "Team Dinner",
+         date: "1 week ago",
+         teaser:
+            "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.",
+      },
+   ],
+}
+
+export const iframeHeight = "800px"
+
+export const description = "Collapsible nested sidebars."
+
+export default function Page() {
+   return (
+      <SidebarProvider
+         style={
+            {
+               "--sidebar-width": "350px",
+            } as React.CSSProperties
+         }
+      >
+         <AppSidebar />
+         <SidebarInset>
+            <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Inbox</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               {Array.from({ length: 24 }).map((_, index) => (
+                  <div
+                     key={index}
+                     className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                  />
+               ))}
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   // Note: I'm using state to show active item.
+   // IRL you should use the url/router.
+   const [activeItem, setActiveItem] = React.useState(data.navMain[0])
+   const [mails, setMails] = React.useState(data.mails)
+   const { setOpen } = useSidebar()
+
+   return (
+      <Sidebar
+         collapsible="icon"
+         className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row"
+         {...props}
+      >
+         {/* This is the first sidebar */}
+         {/* We disable collapsible and adjust width to icon. */}
+         {/* This will make the sidebar appear as icons. */}
+         <Sidebar
+            collapsible="none"
+            className="!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r"
+         >
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton
+                        size="lg"
+                        asChild
+                        className="md:h-8 md:p-0"
+                     >
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <Command className="size-4" />
+                           </div>
+                           <div className="grid flex-1 text-left text-sm leading-tight">
+                              <span className="truncate font-semibold">
+                                 Acme Inc
+                              </span>
+                              <span className="truncate text-xs">
+                                 Enterprise
+                              </span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupContent className="px-1.5 md:px-0">
+                     <SidebarMenu>
+                        {data.navMain.map((item) => (
+                           <SidebarMenuItem key={item.title}>
+                              <SidebarMenuButton
+                                 tooltip={{
+                                    children: item.title,
+                                    hidden: false,
+                                 }}
+                                 onClick={() => {
+                                    setActiveItem(item)
+                                    const mail = data.mails.sort(
+                                       () => Math.random() - 0.5,
+                                    )
+                                    setMails(
+                                       mail.slice(
+                                          0,
+                                          Math.max(
+                                             5,
+                                             Math.floor(Math.random() * 10) + 1,
+                                          ),
+                                       ),
+                                    )
+                                    setOpen(true)
+                                 }}
+                                 isActive={activeItem.title === item.title}
+                                 className="px-2.5 md:px-2"
+                              >
+                                 <item.icon />
+                                 <span>{item.title}</span>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+               <NavUser user={data.user} />
+            </SidebarFooter>
+         </Sidebar>
+
+         {/* This is the second sidebar */}
+         {/* We disable collapsible and let it fill remaining space */}
+         <Sidebar collapsible="none" className="hidden flex-1 md:flex">
+            <SidebarHeader className="gap-3.5 border-b p-4">
+               <div className="flex w-full items-center justify-between">
+                  <div className="text-base font-medium text-foreground">
+                     {activeItem.title}
+                  </div>
+                  <Label className="flex items-center gap-2 text-sm">
+                     <span>Unreads</span>
+                     <Switch className="shadow-none" />
+                  </Label>
+               </div>
+               <SidebarInput placeholder="Type to search..." />
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup className="px-0">
+                  <SidebarGroupContent>
+                     {mails.map((mail) => (
+                        <a
+                           href="#"
+                           key={mail.email}
+                           className="flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                        >
+                           <div className="flex w-full items-center gap-2">
+                              <span>{mail.name}</span>{" "}
+                              <span className="ml-auto text-xs">
+                                 {mail.date}
+                              </span>
+                           </div>
+                           <span className="font-medium">{mail.subject}</span>
+                           <span className="line-clamp-2 w-[260px] whitespace-break-spaces text-xs">
+                              {mail.teaser}
+                           </span>
+                        </a>
+                     ))}
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </Sidebar>
+   )
+}
+
+function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="end"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-10.tsx b/apps/web/registry/default/internal/sidebar-10.tsx
new file mode 100644
index 00000000..f7886e5a
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-10.tsx
@@ -0,0 +1,755 @@
+"use client"
+
+import {
+   ArrowDown,
+   ArrowUp,
+   ArrowUpRight,
+   AudioWaveform,
+   Bell,
+   Blocks,
+   Calendar,
+   ChevronDown,
+   ChevronRight,
+   Command,
+   Copy,
+   CornerUpLeft,
+   CornerUpRight,
+   FileText,
+   GalleryVerticalEnd,
+   Home,
+   Inbox,
+   LineChart,
+   Link,
+   type LucideIcon,
+   MessageCircleQuestion,
+   MoreHorizontal,
+   Plus,
+   Search,
+   Settings2,
+   Sparkles,
+   Star,
+   StarOff,
+   Trash,
+   Trash2,
+} from "lucide-react"
+import * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar in a popover."
+
+// This is sample data.
+const data = {
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: Command,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Search",
+         url: "#",
+         icon: Search,
+      },
+      {
+         title: "Ask AI",
+         url: "#",
+         icon: Sparkles,
+      },
+      {
+         title: "Home",
+         url: "#",
+         icon: Home,
+         isActive: true,
+      },
+      {
+         title: "Inbox",
+         url: "#",
+         icon: Inbox,
+         badge: "10",
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Calendar",
+         url: "#",
+         icon: Calendar,
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+      },
+      {
+         title: "Templates",
+         url: "#",
+         icon: Blocks,
+      },
+      {
+         title: "Trash",
+         url: "#",
+         icon: Trash2,
+      },
+      {
+         title: "Help",
+         url: "#",
+         icon: MessageCircleQuestion,
+      },
+   ],
+   favorites: [
+      {
+         name: "Project Management & Task Tracking",
+         url: "#",
+         emoji: "📊",
+      },
+      {
+         name: "Family Recipe Collection & Meal Planning",
+         url: "#",
+         emoji: "🍳",
+      },
+      {
+         name: "Fitness Tracker & Workout Routines",
+         url: "#",
+         emoji: "💪",
+      },
+      {
+         name: "Book Notes & Reading List",
+         url: "#",
+         emoji: "📚",
+      },
+      {
+         name: "Sustainable Gardening Tips & Plant Care",
+         url: "#",
+         emoji: "🌱",
+      },
+      {
+         name: "Language Learning Progress & Resources",
+         url: "#",
+         emoji: "🗣️",
+      },
+      {
+         name: "Home Renovation Ideas & Budget Tracker",
+         url: "#",
+         emoji: "🏠",
+      },
+      {
+         name: "Personal Finance & Investment Portfolio",
+         url: "#",
+         emoji: "💰",
+      },
+      {
+         name: "Movie & TV Show Watchlist with Reviews",
+         url: "#",
+         emoji: "🎬",
+      },
+      {
+         name: "Daily Habit Tracker & Goal Setting",
+         url: "#",
+         emoji: "✅",
+      },
+   ],
+   workspaces: [
+      {
+         name: "Personal Life Management",
+         emoji: "🏠",
+         pages: [
+            {
+               name: "Daily Journal & Reflection",
+               url: "#",
+               emoji: "📔",
+            },
+            {
+               name: "Health & Wellness Tracker",
+               url: "#",
+               emoji: "🍏",
+            },
+            {
+               name: "Personal Growth & Learning Goals",
+               url: "#",
+               emoji: "🌟",
+            },
+         ],
+      },
+      {
+         name: "Professional Development",
+         emoji: "💼",
+         pages: [
+            {
+               name: "Career Objectives & Milestones",
+               url: "#",
+               emoji: "🎯",
+            },
+            {
+               name: "Skill Acquisition & Training Log",
+               url: "#",
+               emoji: "🧠",
+            },
+            {
+               name: "Networking Contacts & Events",
+               url: "#",
+               emoji: "🤝",
+            },
+         ],
+      },
+      {
+         name: "Creative Projects",
+         emoji: "🎨",
+         pages: [
+            {
+               name: "Writing Ideas & Story Outlines",
+               url: "#",
+               emoji: "✍️",
+            },
+            {
+               name: "Art & Design Portfolio",
+               url: "#",
+               emoji: "🖼️",
+            },
+            {
+               name: "Music Composition & Practice Log",
+               url: "#",
+               emoji: "🎵",
+            },
+         ],
+      },
+      {
+         name: "Home Management",
+         emoji: "🏡",
+         pages: [
+            {
+               name: "Household Budget & Expense Tracking",
+               url: "#",
+               emoji: "💰",
+            },
+            {
+               name: "Home Maintenance Schedule & Tasks",
+               url: "#",
+               emoji: "🔧",
+            },
+            {
+               name: "Family Calendar & Event Planning",
+               url: "#",
+               emoji: "📅",
+            },
+         ],
+      },
+      {
+         name: "Travel & Adventure",
+         emoji: "🧳",
+         pages: [
+            {
+               name: "Trip Planning & Itineraries",
+               url: "#",
+               emoji: "🗺️",
+            },
+            {
+               name: "Travel Bucket List & Inspiration",
+               url: "#",
+               emoji: "🌎",
+            },
+            {
+               name: "Travel Journal & Photo Gallery",
+               url: "#",
+               emoji: "📸",
+            },
+         ],
+      },
+   ],
+   actions: [
+      [
+         {
+            label: "Customize Page",
+            icon: Settings2,
+         },
+         {
+            label: "Turn into wiki",
+            icon: FileText,
+         },
+      ],
+      [
+         {
+            label: "Copy Link",
+            icon: Link,
+         },
+         {
+            label: "Duplicate",
+            icon: Copy,
+         },
+         {
+            label: "Move to",
+            icon: CornerUpRight,
+         },
+         {
+            label: "Move to Trash",
+            icon: Trash2,
+         },
+      ],
+      [
+         {
+            label: "Undo",
+            icon: CornerUpLeft,
+         },
+         {
+            label: "View analytics",
+            icon: LineChart,
+         },
+         {
+            label: "Version History",
+            icon: GalleryVerticalEnd,
+         },
+         {
+            label: "Show delete pages",
+            icon: Trash,
+         },
+         {
+            label: "Notifications",
+            icon: Bell,
+         },
+      ],
+      [
+         {
+            label: "Import",
+            icon: ArrowUp,
+         },
+         {
+            label: "Export",
+            icon: ArrowDown,
+         },
+      ],
+   ],
+}
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-14 shrink-0 items-center gap-2">
+               <div className="flex flex-1 items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem>
+                           <BreadcrumbPage className="line-clamp-1">
+                              Project Management & Task Tracking
+                           </BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+               <div className="ml-auto px-3">
+                  <NavActions actions={data.actions} />
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+               <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+               <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar className="border-r-0" {...props}>
+         <SidebarHeader>
+            <TeamSwitcher teams={data.teams} />
+            <NavMain items={data.navMain} />
+         </SidebarHeader>
+         <SidebarContent>
+            <NavFavorites favorites={data.favorites} />
+            <NavWorkspaces workspaces={data.workspaces} />
+            <NavSecondary items={data.navSecondary} className="mt-auto" />
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
+
+function NavActions({
+   actions,
+}: {
+   actions: {
+      label: string
+      icon: LucideIcon
+   }[][]
+}) {
+   const [isOpen, setIsOpen] = React.useState(false)
+
+   React.useEffect(() => {
+      setIsOpen(true)
+   }, [])
+
+   return (
+      <div className="flex items-center gap-2 text-sm">
+         <div className="hidden font-medium text-muted-foreground md:inline-block">
+            Edit Oct 08
+         </div>
+         <Button variant="ghost" size="icon" className="h-7 w-7">
+            <Star />
+         </Button>
+         <Popover open={isOpen} onOpenChange={setIsOpen}>
+            <PopoverTrigger asChild>
+               <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 data-[state=open]:bg-accent"
+               >
+                  <MoreHorizontal />
+               </Button>
+            </PopoverTrigger>
+            <PopoverContent
+               className="w-56 overflow-hidden rounded-lg p-0"
+               align="end"
+            >
+               <Sidebar collapsible="none" className="bg-transparent">
+                  <SidebarContent>
+                     {actions.map((group, index) => (
+                        <SidebarGroup
+                           key={index}
+                           className="border-b last:border-none"
+                        >
+                           <SidebarGroupContent className="gap-0">
+                              <SidebarMenu>
+                                 {group.map((item, index) => (
+                                    <SidebarMenuItem key={index}>
+                                       <SidebarMenuButton>
+                                          <item.icon />{" "}
+                                          <span>{item.label}</span>
+                                       </SidebarMenuButton>
+                                    </SidebarMenuItem>
+                                 ))}
+                              </SidebarMenu>
+                           </SidebarGroupContent>
+                        </SidebarGroup>
+                     ))}
+                  </SidebarContent>
+               </Sidebar>
+            </PopoverContent>
+         </Popover>
+      </div>
+   )
+}
+
+function NavFavorites({
+   favorites,
+}: {
+   favorites: {
+      name: string
+      url: string
+      emoji: string
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+         <SidebarMenu>
+            {favorites.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url} title={item.name}>
+                        <span>{item.emoji}</span>
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-56 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <StarOff className="text-muted-foreground" />
+                           <span>Remove from Favorites</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Link className="text-muted-foreground" />
+                           <span>Copy Link</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <ArrowUpRight className="text-muted-foreground" />
+                           <span>Open in New Tab</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
+
+function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      isActive?: boolean
+   }[]
+}) {
+   return (
+      <SidebarMenu>
+         {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+               <SidebarMenuButton asChild isActive={item.isActive}>
+                  <a href={item.url}>
+                     <item.icon />
+                     <span>{item.title}</span>
+                  </a>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         ))}
+      </SidebarMenu>
+   )
+}
+
+function NavSecondary({
+   items,
+   ...props
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      badge?: React.ReactNode
+   }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+   return (
+      <SidebarGroup {...props}>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                     <SidebarMenuButton asChild>
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                     {item.badge && (
+                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+                     )}
+                  </SidebarMenuItem>
+               ))}
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
+
+function NavWorkspaces({
+   workspaces,
+}: {
+   workspaces: {
+      name: string
+      emoji: React.ReactNode
+      pages: {
+         name: string
+         emoji: React.ReactNode
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {workspaces.map((workspace) => (
+                  <Collapsible key={workspace.name}>
+                     <SidebarMenuItem>
+                        <SidebarMenuButton asChild>
+                           <a href="#">
+                              <span>{workspace.emoji}</span>
+                              <span>{workspace.name}</span>
+                           </a>
+                        </SidebarMenuButton>
+                        <CollapsibleTrigger asChild>
+                           <SidebarMenuAction
+                              className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                              showOnHover
+                           >
+                              <ChevronRight />
+                           </SidebarMenuAction>
+                        </CollapsibleTrigger>
+                        <SidebarMenuAction showOnHover>
+                           <Plus />
+                        </SidebarMenuAction>
+                        <CollapsibleContent>
+                           <SidebarMenuSub>
+                              {workspace.pages.map((page) => (
+                                 <SidebarMenuSubItem key={page.name}>
+                                    <SidebarMenuSubButton asChild>
+                                       <a href="#">
+                                          <span>{page.emoji}</span>
+                                          <span>{page.name}</span>
+                                       </a>
+                                    </SidebarMenuSubButton>
+                                 </SidebarMenuSubItem>
+                              ))}
+                           </SidebarMenuSub>
+                        </CollapsibleContent>
+                     </SidebarMenuItem>
+                  </Collapsible>
+               ))}
+               <SidebarMenuItem>
+                  <SidebarMenuButton className="text-sidebar-foreground/70">
+                     <MoreHorizontal />
+                     <span>More</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
+
+function TeamSwitcher({
+   teams,
+}: {
+   teams: {
+      name: string
+      logo: React.ElementType
+      plan: string
+   }[]
+}) {
+   const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="w-fit px-1.5">
+                     <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                        <activeTeam.logo className="size-3" />
+                     </div>
+                     <span className="truncate font-semibold">
+                        {activeTeam.name}
+                     </span>
+                     <ChevronDown className="opacity-50" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-64 rounded-lg"
+                  align="start"
+                  side="bottom"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                     Teams
+                  </DropdownMenuLabel>
+                  {teams.map((team, index) => (
+                     <DropdownMenuItem
+                        key={team.name}
+                        onClick={() => setActiveTeam(team)}
+                        className="gap-2 p-2"
+                     >
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
+                           <team.logo className="size-4 shrink-0" />
+                        </div>
+                        {team.name}
+                        <DropdownMenuShortcut>
+                           ⌘{index + 1}
+                        </DropdownMenuShortcut>
+                     </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                     <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                        <Plus className="size-4" />
+                     </div>
+                     <div className="font-medium text-muted-foreground">
+                        Add team
+                     </div>
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-11.tsx b/apps/web/registry/default/internal/sidebar-11.tsx
new file mode 100644
index 00000000..6a3aa222
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-11.tsx
@@ -0,0 +1,194 @@
+import { ChevronRight, File, Folder } from "lucide-react"
+import type * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   changes: [
+      {
+         file: "README.md",
+         state: "M",
+      },
+      {
+         file: "api/hello/route.ts",
+         state: "U",
+      },
+      {
+         file: "app/layout.tsx",
+         state: "M",
+      },
+   ],
+   tree: [
+      [
+         "app",
+         [
+            "api",
+            ["hello", ["route.ts"]],
+            "page.tsx",
+            "layout.tsx",
+            ["blog", ["page.tsx"]],
+         ],
+      ],
+      [
+         "components",
+         ["ui", "button.tsx", "card.tsx"],
+         "header.tsx",
+         "footer.tsx",
+      ],
+      ["lib", ["util.ts"]],
+      ["public", "favicon.ico", "vercel.svg"],
+      ".eslintrc.json",
+      ".gitignore",
+      "next.config.js",
+      "tailwind.config.js",
+      "package.json",
+      "README.md",
+   ],
+}
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a collapsible file tree."
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">components</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">ui</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>button.tsx</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarGroupLabel>Changes</SidebarGroupLabel>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {data.changes.map((item, index) => (
+                        <SidebarMenuItem key={index}>
+                           <SidebarMenuButton>
+                              <File />
+                              {item.file}
+                           </SidebarMenuButton>
+                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+            <SidebarGroup>
+               <SidebarGroupLabel>Files</SidebarGroupLabel>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {data.tree.map((item, index) => (
+                        <Tree key={index} item={item} />
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
+
+function Tree({ item }: { item: string | any[] }) {
+   const [name, ...items] = Array.isArray(item) ? item : [item]
+
+   if (!items.length) {
+      return (
+         <SidebarMenuButton
+            isActive={name === "button.tsx"}
+            className="data-[active=true]:bg-transparent"
+         >
+            <File />
+            {name}
+         </SidebarMenuButton>
+      )
+   }
+
+   return (
+      <SidebarMenuItem>
+         <Collapsible
+            className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+            defaultOpen={name === "components" || name === "ui"}
+         >
+            <CollapsibleTrigger asChild>
+               <SidebarMenuButton>
+                  <ChevronRight className="transition-transform" />
+                  <Folder />
+                  {name}
+               </SidebarMenuButton>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+               <SidebarMenuSub>
+                  {items.map((subItem, index) => (
+                     <Tree key={index} item={subItem} />
+                  ))}
+               </SidebarMenuSub>
+            </CollapsibleContent>
+         </Collapsible>
+      </SidebarMenuItem>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-12.tsx b/apps/web/registry/default/internal/sidebar-12.tsx
new file mode 100644
index 00000000..13a2cacf
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-12.tsx
@@ -0,0 +1,297 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   Check,
+   ChevronRight,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Plus,
+   Sparkles,
+} from "lucide-react"
+import * as React from "react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Calendar } from "~/registry/miami/ui/calendar"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarSeparator,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   calendars: [
+      {
+         name: "My Calendars",
+         items: ["Personal", "Work", "Family"],
+      },
+      {
+         name: "Favorites",
+         items: ["Holidays", "Birthdays"],
+      },
+      {
+         name: "Other",
+         items: ["Travel", "Reminders", "Deadlines"],
+      },
+   ],
+}
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a calendar."
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>October 2024</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+                  {Array.from({ length: 20 }).map((_, i) => (
+                     <div
+                        key={i}
+                        className="aspect-square rounded-xl bg-muted/50"
+                     />
+                  ))}
+               </div>
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader className="h-16 border-b border-sidebar-border">
+            <NavUser user={data.user} />
+         </SidebarHeader>
+         <SidebarContent>
+            <DatePicker />
+            <SidebarSeparator className="mx-0" />
+            <Calendars calendars={data.calendars} />
+         </SidebarContent>
+         <SidebarFooter>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton>
+                     <Plus />
+                     <span>New Calendar</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarFooter>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
+
+function Calendars({
+   calendars,
+}: {
+   calendars: {
+      name: string
+      items: string[]
+   }[]
+}) {
+   return (
+      <>
+         {calendars.map((calendar, index) => (
+            <React.Fragment key={calendar.name}>
+               <SidebarGroup key={calendar.name} className="py-0">
+                  <Collapsible
+                     defaultOpen={index === 0}
+                     className="group/collapsible"
+                  >
+                     <SidebarGroupLabel
+                        asChild
+                        className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                     >
+                        <CollapsibleTrigger>
+                           {calendar.name}{" "}
+                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                        </CollapsibleTrigger>
+                     </SidebarGroupLabel>
+                     <CollapsibleContent>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {calendar.items.map((item, index) => (
+                                 <SidebarMenuItem key={item}>
+                                    <SidebarMenuButton>
+                                       <div
+                                          data-active={index < 2}
+                                          className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                                       >
+                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                                       </div>
+                                       {item}
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </CollapsibleContent>
+                  </Collapsible>
+               </SidebarGroup>
+               <SidebarSeparator className="mx-0" />
+            </React.Fragment>
+         ))}
+      </>
+   )
+}
+
+function DatePicker() {
+   return (
+      <SidebarGroup className="px-0">
+         <SidebarGroupContent>
+            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
+
+function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="start"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-13.tsx b/apps/web/registry/default/internal/sidebar-13.tsx
new file mode 100644
index 00000000..7ff6e16c
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-13.tsx
@@ -0,0 +1,147 @@
+"use client"
+
+import {
+   Bell,
+   Check,
+   Globe,
+   Home,
+   Keyboard,
+   Link,
+   Lock,
+   Menu,
+   MessageCircle,
+   Paintbrush,
+   Settings,
+   Video,
+} from "lucide-react"
+import * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogTitle,
+   DialogTrigger,
+} from "~/registry/miami/ui/dialog"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar in a dialog."
+
+const data = {
+   nav: [
+      { name: "Notifications", icon: Bell },
+      { name: "Navigation", icon: Menu },
+      { name: "Home", icon: Home },
+      { name: "Appearance", icon: Paintbrush },
+      { name: "Messages & media", icon: MessageCircle },
+      { name: "Language & region", icon: Globe },
+      { name: "Accessibility", icon: Keyboard },
+      { name: "Mark as read", icon: Check },
+      { name: "Audio & video", icon: Video },
+      { name: "Connected accounts", icon: Link },
+      { name: "Privacy & visibility", icon: Lock },
+      { name: "Advanced", icon: Settings },
+   ],
+}
+
+export default function Page() {
+   return (
+      <div className="flex h-svh items-center justify-center">
+         <SettingsDialog />
+      </div>
+   )
+}
+
+function SettingsDialog() {
+   const [open, setOpen] = React.useState(true)
+
+   return (
+      <Dialog open={open} onOpenChange={setOpen}>
+         <DialogTrigger asChild>
+            <Button size="sm">Open Dialog</Button>
+         </DialogTrigger>
+         <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+            <DialogTitle className="sr-only">Settings</DialogTitle>
+            <DialogDescription className="sr-only">
+               Customize your settings here.
+            </DialogDescription>
+            <SidebarProvider className="items-start">
+               <Sidebar collapsible="none" className="hidden md:flex">
+                  <SidebarContent>
+                     <SidebarGroup>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {data.nav.map((item) => (
+                                 <SidebarMenuItem key={item.name}>
+                                    <SidebarMenuButton
+                                       asChild
+                                       isActive={
+                                          item.name === "Messages & media"
+                                       }
+                                    >
+                                       <a href="#">
+                                          <item.icon />
+                                          <span>{item.name}</span>
+                                       </a>
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </SidebarGroup>
+                  </SidebarContent>
+               </Sidebar>
+               <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
+                  <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+                     <div className="flex items-center gap-2 px-4">
+                        <Breadcrumb>
+                           <BreadcrumbList>
+                              <BreadcrumbItem className="hidden md:block">
+                                 <BreadcrumbLink href="#">
+                                    Settings
+                                 </BreadcrumbLink>
+                              </BreadcrumbItem>
+                              <BreadcrumbSeparator className="hidden md:block" />
+                              <BreadcrumbItem>
+                                 <BreadcrumbPage>
+                                    Messages & media
+                                 </BreadcrumbPage>
+                              </BreadcrumbItem>
+                           </BreadcrumbList>
+                        </Breadcrumb>
+                     </div>
+                  </header>
+                  <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+                     {Array.from({ length: 10 }).map((_, i) => (
+                        <div
+                           key={i}
+                           className="aspect-video max-w-3xl rounded-xl bg-muted/50"
+                        />
+                     ))}
+                  </div>
+               </main>
+            </SidebarProvider>
+         </DialogContent>
+      </Dialog>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-14.tsx b/apps/web/registry/default/internal/sidebar-14.tsx
new file mode 100644
index 00000000..ec39f553
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-14.tsx
@@ -0,0 +1,246 @@
+import type * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar on the right."
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+               <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+         <AppSidebar side="right" />
+      </SidebarProvider>
+   )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {data.navMain.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url} className="font-medium">
+                                 {item.title}
+                              </a>
+                           </SidebarMenuButton>
+                           {item.items?.length ? (
+                              <SidebarMenuSub>
+                                 {item.items.map((item) => (
+                                    <SidebarMenuSubItem key={item.title}>
+                                       <SidebarMenuSubButton
+                                          asChild
+                                          isActive={item.isActive}
+                                       >
+                                          <a href={item.url}>{item.title}</a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           ) : null}
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-15.tsx b/apps/web/registry/default/internal/sidebar-15.tsx
new file mode 100644
index 00000000..168b53fc
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-15.tsx
@@ -0,0 +1,832 @@
+"use client"
+
+import {
+   ArrowUpRight,
+   AudioWaveform,
+   BadgeCheck,
+   Bell,
+   Blocks,
+   CalendarIcon,
+   Check,
+   ChevronDown,
+   ChevronRight,
+   ChevronsUpDown,
+   Command,
+   CreditCard,
+   Home,
+   Inbox,
+   Link,
+   LogOut,
+   type LucideIcon,
+   MessageCircleQuestion,
+   MoreHorizontal,
+   Plus,
+   Search,
+   Settings2,
+   Sparkles,
+   StarOff,
+   Trash2,
+} from "lucide-react"
+import * as React from "react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Calendar } from "~/registry/miami/ui/calendar"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarSeparator,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A left and right sidebar."
+
+// This is sample data.
+const sidebarLeftData = {
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: Command,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Search",
+         url: "#",
+         icon: Search,
+      },
+      {
+         title: "Ask AI",
+         url: "#",
+         icon: Sparkles,
+      },
+      {
+         title: "Home",
+         url: "#",
+         icon: Home,
+         isActive: true,
+      },
+      {
+         title: "Inbox",
+         url: "#",
+         icon: Inbox,
+         badge: "10",
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Calendar",
+         url: "#",
+         icon: CalendarIcon,
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+      },
+      {
+         title: "Templates",
+         url: "#",
+         icon: Blocks,
+      },
+      {
+         title: "Trash",
+         url: "#",
+         icon: Trash2,
+      },
+      {
+         title: "Help",
+         url: "#",
+         icon: MessageCircleQuestion,
+      },
+   ],
+   favorites: [
+      {
+         name: "Project Management & Task Tracking",
+         url: "#",
+         emoji: "📊",
+      },
+      {
+         name: "Family Recipe Collection & Meal Planning",
+         url: "#",
+         emoji: "🍳",
+      },
+      {
+         name: "Fitness Tracker & Workout Routines",
+         url: "#",
+         emoji: "💪",
+      },
+      {
+         name: "Book Notes & Reading List",
+         url: "#",
+         emoji: "📚",
+      },
+      {
+         name: "Sustainable Gardening Tips & Plant Care",
+         url: "#",
+         emoji: "🌱",
+      },
+      {
+         name: "Language Learning Progress & Resources",
+         url: "#",
+         emoji: "🗣️",
+      },
+      {
+         name: "Home Renovation Ideas & Budget Tracker",
+         url: "#",
+         emoji: "🏠",
+      },
+      {
+         name: "Personal Finance & Investment Portfolio",
+         url: "#",
+         emoji: "💰",
+      },
+      {
+         name: "Movie & TV Show Watchlist with Reviews",
+         url: "#",
+         emoji: "🎬",
+      },
+      {
+         name: "Daily Habit Tracker & Goal Setting",
+         url: "#",
+         emoji: "✅",
+      },
+   ],
+   workspaces: [
+      {
+         name: "Personal Life Management",
+         emoji: "🏠",
+         pages: [
+            {
+               name: "Daily Journal & Reflection",
+               url: "#",
+               emoji: "📔",
+            },
+            {
+               name: "Health & Wellness Tracker",
+               url: "#",
+               emoji: "🍏",
+            },
+            {
+               name: "Personal Growth & Learning Goals",
+               url: "#",
+               emoji: "🌟",
+            },
+         ],
+      },
+      {
+         name: "Professional Development",
+         emoji: "💼",
+         pages: [
+            {
+               name: "Career Objectives & Milestones",
+               url: "#",
+               emoji: "🎯",
+            },
+            {
+               name: "Skill Acquisition & Training Log",
+               url: "#",
+               emoji: "🧠",
+            },
+            {
+               name: "Networking Contacts & Events",
+               url: "#",
+               emoji: "🤝",
+            },
+         ],
+      },
+      {
+         name: "Creative Projects",
+         emoji: "🎨",
+         pages: [
+            {
+               name: "Writing Ideas & Story Outlines",
+               url: "#",
+               emoji: "✍️",
+            },
+            {
+               name: "Art & Design Portfolio",
+               url: "#",
+               emoji: "🖼️",
+            },
+            {
+               name: "Music Composition & Practice Log",
+               url: "#",
+               emoji: "🎵",
+            },
+         ],
+      },
+      {
+         name: "Home Management",
+         emoji: "🏡",
+         pages: [
+            {
+               name: "Household Budget & Expense Tracking",
+               url: "#",
+               emoji: "💰",
+            },
+            {
+               name: "Home Maintenance Schedule & Tasks",
+               url: "#",
+               emoji: "🔧",
+            },
+            {
+               name: "Family Calendar & Event Planning",
+               url: "#",
+               emoji: "📅",
+            },
+         ],
+      },
+      {
+         name: "Travel & Adventure",
+         emoji: "🧳",
+         pages: [
+            {
+               name: "Trip Planning & Itineraries",
+               url: "#",
+               emoji: "🗺️",
+            },
+            {
+               name: "Travel Bucket List & Inspiration",
+               url: "#",
+               emoji: "🌎",
+            },
+            {
+               name: "Travel Journal & Photo Gallery",
+               url: "#",
+               emoji: "📸",
+            },
+         ],
+      },
+   ],
+}
+
+// This is sample data.
+const sidebarRightData = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   calendars: [
+      {
+         name: "My Calendars",
+         items: ["Personal", "Work", "Family"],
+      },
+      {
+         name: "Favorites",
+         items: ["Holidays", "Birthdays"],
+      },
+      {
+         name: "Other",
+         items: ["Travel", "Reminders", "Deadlines"],
+      },
+   ],
+}
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <SidebarLeft />
+         <SidebarInset>
+            <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+               <div className="flex flex-1 items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem>
+                           <BreadcrumbPage className="line-clamp-1">
+                              Project Management & Task Tracking
+                           </BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+               <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+            </div>
+         </SidebarInset>
+         <SidebarRight />
+      </SidebarProvider>
+   )
+}
+
+function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar className="border-r-0" {...props}>
+         <SidebarHeader>
+            <TeamSwitcher teams={sidebarLeftData.teams} />
+            <NavMain items={sidebarLeftData.navMain} />
+         </SidebarHeader>
+         <SidebarContent>
+            <NavFavorites favorites={sidebarLeftData.favorites} />
+            <NavWorkspaces workspaces={sidebarLeftData.workspaces} />
+            <NavSecondary
+               items={sidebarLeftData.navSecondary}
+               className="mt-auto"
+            />
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
+
+function SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar
+         collapsible="none"
+         className="sticky hidden lg:flex top-0 h-svh border-l"
+         {...props}
+      >
+         <SidebarHeader className="h-16 border-b border-sidebar-border">
+            <NavUser user={sidebarRightData.user} />
+         </SidebarHeader>
+         <SidebarContent>
+            <DatePicker />
+            <SidebarSeparator className="mx-0" />
+            <Calendars calendars={sidebarRightData.calendars} />
+         </SidebarContent>
+         <SidebarFooter>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton>
+                     <Plus />
+                     <span>New Calendar</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarFooter>
+      </Sidebar>
+   )
+}
+
+function Calendars({
+   calendars,
+}: {
+   calendars: {
+      name: string
+      items: string[]
+   }[]
+}) {
+   return (
+      <>
+         {calendars.map((calendar, index) => (
+            <React.Fragment key={calendar.name}>
+               <SidebarGroup key={calendar.name} className="py-0">
+                  <Collapsible
+                     defaultOpen={index === 0}
+                     className="group/collapsible"
+                  >
+                     <SidebarGroupLabel
+                        asChild
+                        className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                     >
+                        <CollapsibleTrigger>
+                           {calendar.name}{" "}
+                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                        </CollapsibleTrigger>
+                     </SidebarGroupLabel>
+                     <CollapsibleContent>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {calendar.items.map((item, index) => (
+                                 <SidebarMenuItem key={item}>
+                                    <SidebarMenuButton>
+                                       <div
+                                          data-active={index < 2}
+                                          className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                                       >
+                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                                       </div>
+                                       {item}
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </CollapsibleContent>
+                  </Collapsible>
+               </SidebarGroup>
+               <SidebarSeparator className="mx-0" />
+            </React.Fragment>
+         ))}
+      </>
+   )
+}
+
+function DatePicker() {
+   return (
+      <SidebarGroup className="px-0">
+         <SidebarGroupContent>
+            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
+
+function NavFavorites({
+   favorites,
+}: {
+   favorites: {
+      name: string
+      url: string
+      emoji: string
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+         <SidebarMenu>
+            {favorites.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url} title={item.name}>
+                        <span>{item.emoji}</span>
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-56 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <StarOff className="text-muted-foreground" />
+                           <span>Remove from Favorites</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Link className="text-muted-foreground" />
+                           <span>Copy Link</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <ArrowUpRight className="text-muted-foreground" />
+                           <span>Open in New Tab</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
+
+function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      isActive?: boolean
+   }[]
+}) {
+   return (
+      <SidebarMenu>
+         {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+               <SidebarMenuButton asChild isActive={item.isActive}>
+                  <a href={item.url}>
+                     <item.icon />
+                     <span>{item.title}</span>
+                  </a>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         ))}
+      </SidebarMenu>
+   )
+}
+
+function NavSecondary({
+   items,
+   ...props
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      badge?: React.ReactNode
+   }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+   return (
+      <SidebarGroup {...props}>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                     <SidebarMenuButton asChild>
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                     {item.badge && (
+                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+                     )}
+                  </SidebarMenuItem>
+               ))}
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
+
+function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="start"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
+
+function NavWorkspaces({
+   workspaces,
+}: {
+   workspaces: {
+      name: string
+      emoji: React.ReactNode
+      pages: {
+         name: string
+         emoji: React.ReactNode
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {workspaces.map((workspace) => (
+                  <Collapsible key={workspace.name}>
+                     <SidebarMenuItem>
+                        <SidebarMenuButton asChild>
+                           <a href="#">
+                              <span>{workspace.emoji}</span>
+                              <span>{workspace.name}</span>
+                           </a>
+                        </SidebarMenuButton>
+                        <CollapsibleTrigger asChild>
+                           <SidebarMenuAction
+                              className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                              showOnHover
+                           >
+                              <ChevronRight />
+                           </SidebarMenuAction>
+                        </CollapsibleTrigger>
+                        <SidebarMenuAction showOnHover>
+                           <Plus />
+                        </SidebarMenuAction>
+                        <CollapsibleContent>
+                           <SidebarMenuSub>
+                              {workspace.pages.map((page) => (
+                                 <SidebarMenuSubItem key={page.name}>
+                                    <SidebarMenuSubButton asChild>
+                                       <a href="#">
+                                          <span>{page.emoji}</span>
+                                          <span>{page.name}</span>
+                                       </a>
+                                    </SidebarMenuSubButton>
+                                 </SidebarMenuSubItem>
+                              ))}
+                           </SidebarMenuSub>
+                        </CollapsibleContent>
+                     </SidebarMenuItem>
+                  </Collapsible>
+               ))}
+               <SidebarMenuItem>
+                  <SidebarMenuButton className="text-sidebar-foreground/70">
+                     <MoreHorizontal />
+                     <span>More</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
+
+function TeamSwitcher({
+   teams,
+}: {
+   teams: {
+      name: string
+      logo: React.ElementType
+      plan: string
+   }[]
+}) {
+   const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="w-fit px-1.5">
+                     <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                        <activeTeam.logo className="size-3" />
+                     </div>
+                     <span className="truncate font-semibold">
+                        {activeTeam.name}
+                     </span>
+                     <ChevronDown className="opacity-50" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-64 rounded-lg"
+                  align="start"
+                  side="bottom"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                     Teams
+                  </DropdownMenuLabel>
+                  {teams.map((team, index) => (
+                     <DropdownMenuItem
+                        key={team.name}
+                        onClick={() => setActiveTeam(team)}
+                        className="gap-2 p-2"
+                     >
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
+                           <team.logo className="size-4 shrink-0" />
+                        </div>
+                        {team.name}
+                        <DropdownMenuShortcut>
+                           ⌘{index + 1}
+                        </DropdownMenuShortcut>
+                     </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                     <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                        <Plus className="size-4" />
+                     </div>
+                     <div className="font-medium text-muted-foreground">
+                        Add team
+                     </div>
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-controlled.tsx b/apps/web/registry/default/internal/sidebar-controlled.tsx
new file mode 100644
index 00000000..1163bbb0
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-controlled.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import {
+   Frame,
+   LifeBuoy,
+   Map,
+   PanelLeftClose,
+   PanelLeftOpen,
+   PieChart,
+   Send,
+} from "lucide-react"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const projects = [
+   {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+   },
+   {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+   },
+   {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+   },
+   {
+      name: "Support",
+      url: "#",
+      icon: LifeBuoy,
+   },
+   {
+      name: "Feedback",
+      url: "#",
+      icon: Send,
+   },
+]
+
+export default function AppSidebar() {
+   const [open, setOpen] = React.useState(true)
+
+   return (
+      <SidebarProvider open={open} onOpenChange={setOpen}>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {projects.map((project) => (
+                           <SidebarMenuItem key={project.name}>
+                              <SidebarMenuButton asChild>
+                                 <a href={project.url}>
+                                    <project.icon />
+                                    <span>{project.name}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex items-center h-12 px-4 justify-between">
+               <Button
+                  onClick={() => setOpen((open) => !open)}
+                  size="sm"
+                  variant="ghost"
+               >
+                  {open ? <PanelLeftClose /> : <PanelLeftOpen />}
+                  <span>{open ? "Close" : "Open"} Sidebar</span>
+               </Button>
+            </header>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-demo.tsx b/apps/web/registry/default/internal/sidebar-demo.tsx
new file mode 100644
index 00000000..ac2f7525
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-demo.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+// Menu items.
+const items = [
+   {
+      title: "Home",
+      url: "#",
+      icon: Home,
+   },
+   {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+   },
+   {
+      title: "Calendar",
+      url: "#",
+      icon: Calendar,
+   },
+   {
+      title: "Search",
+      url: "#",
+      icon: Search,
+   },
+   {
+      title: "Settings",
+      url: "#",
+      icon: Settings,
+   },
+]
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Application</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {items.map((item) => (
+                           <SidebarMenuItem key={item.title}>
+                              <SidebarMenuButton asChild>
+                                 <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.title}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex items-center justify-between px-4 h-12">
+               <SidebarTrigger />
+            </header>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-footer.tsx b/apps/web/registry/default/internal/sidebar-footer.tsx
new file mode 100644
index 00000000..c6227887
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-footer.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { ChevronDown, ChevronUp, User2 } from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader />
+            <SidebarContent />
+            <SidebarFooter>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                              Username
+                              <ChevronUp className="ml-auto" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                           side="top"
+                           className="w-[--radix-popper-anchor-width]"
+                        >
+                           <DropdownMenuItem>
+                              <span>Account</span>
+                           </DropdownMenuItem>
+                           <DropdownMenuItem>
+                              <span>Billing</span>
+                           </DropdownMenuItem>
+                           <DropdownMenuItem>
+                              <span>Sign out</span>
+                           </DropdownMenuItem>
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarFooter>
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex items-center justify-between px-4 h-12">
+               <SidebarTrigger />
+            </header>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-group-action.tsx b/apps/web/registry/default/internal/sidebar-group-action.tsx
new file mode 100644
index 00000000..686e3912
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-group-action.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import {
+   ChevronDown,
+   Frame,
+   LifeBuoy,
+   Map,
+   PieChart,
+   Plus,
+   Send,
+} from "lucide-react"
+import { Toaster, toast } from "sonner"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupAction,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Toaster
+            position="bottom-left"
+            toastOptions={{
+               className: "ml-[160px]",
+            }}
+         />
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarGroupAction
+                     title="Add Project"
+                     onClick={() => toast("You clicked the group action!")}
+                  >
+                     <Plus /> <span className="sr-only">Add Project</span>
+                  </SidebarGroupAction>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        <SidebarMenuItem>
+                           <SidebarMenuButton asChild>
+                              <a href="#">
+                                 <Frame />
+                                 <span>Design Engineering</span>
+                              </a>
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                        <SidebarMenuItem>
+                           <SidebarMenuButton asChild>
+                              <a href="#">
+                                 <PieChart />
+                                 <span>Sales & Marketing</span>
+                              </a>
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                        <SidebarMenuItem>
+                           <SidebarMenuButton asChild>
+                              <a href="#">
+                                 <Map />
+                                 <span>Travel</span>
+                              </a>
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-group-collapsible.tsx b/apps/web/registry/default/internal/sidebar-group-collapsible.tsx
new file mode 100644
index 00000000..52715105
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-group-collapsible.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import { ChevronDown, LifeBuoy, Send } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <Collapsible defaultOpen className="group/collapsible">
+                  <SidebarGroup>
+                     <SidebarGroupLabel
+                        asChild
+                        className="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                     >
+                        <CollapsibleTrigger>
+                           Help
+                           <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                        </CollapsibleTrigger>
+                     </SidebarGroupLabel>
+                     <CollapsibleContent>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              <SidebarMenuItem>
+                                 <SidebarMenuButton>
+                                    <LifeBuoy />
+                                    Support
+                                 </SidebarMenuButton>
+                              </SidebarMenuItem>
+                              <SidebarMenuItem>
+                                 <SidebarMenuButton>
+                                    <Send />
+                                    Feedback
+                                 </SidebarMenuButton>
+                              </SidebarMenuItem>
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </CollapsibleContent>
+                  </SidebarGroup>
+               </Collapsible>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-group.tsx b/apps/web/registry/default/internal/sidebar-group.tsx
new file mode 100644
index 00000000..4ebf7b88
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-group.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { LifeBuoy, Send } from "lucide-react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Help</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        <SidebarMenuItem>
+                           <SidebarMenuButton>
+                              <LifeBuoy />
+                              Support
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                        <SidebarMenuItem>
+                           <SidebarMenuButton>
+                              <Send />
+                              Feedback
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-header.tsx b/apps/web/registry/default/internal/sidebar-header.tsx
new file mode 100644
index 00000000..b7c9f97a
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-header.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { ChevronDown } from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   Sidebar,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                              Select Workspace
+                              <ChevronDown className="ml-auto" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="w-[--radix-popper-anchor-width]">
+                           <DropdownMenuItem>
+                              <span>Acme Inc</span>
+                           </DropdownMenuItem>
+                           <DropdownMenuItem>
+                              <span>Acme Corp.</span>
+                           </DropdownMenuItem>
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex items-center justify-between px-4 h-12">
+               <SidebarTrigger />
+            </header>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-menu-action.tsx b/apps/web/registry/default/internal/sidebar-menu-action.tsx
new file mode 100644
index 00000000..0b8de559
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-menu-action.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import {
+   Frame,
+   LifeBuoy,
+   Map,
+   MoreHorizontal,
+   PieChart,
+   Send,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const projects = [
+   {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+   },
+   {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+   },
+   {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+   },
+   {
+      name: "Support",
+      url: "#",
+      icon: LifeBuoy,
+   },
+   {
+      name: "Feedback",
+      url: "#",
+      icon: Send,
+   },
+]
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {projects.map((project, index) => (
+                           <SidebarMenuItem key={project.name}>
+                              <SidebarMenuButton
+                                 asChild
+                                 className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                              >
+                                 <a href={project.url}>
+                                    <project.icon />
+                                    <span>{project.name}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                              <DropdownMenu>
+                                 <DropdownMenuTrigger asChild>
+                                    <SidebarMenuAction>
+                                       <MoreHorizontal />
+                                       <span className="sr-only">More</span>
+                                    </SidebarMenuAction>
+                                 </DropdownMenuTrigger>
+                                 <DropdownMenuContent
+                                    side="right"
+                                    align="start"
+                                 >
+                                    <DropdownMenuItem>
+                                       <span>Edit Project</span>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem>
+                                       <span>Delete Project</span>
+                                    </DropdownMenuItem>
+                                 </DropdownMenuContent>
+                              </DropdownMenu>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-menu-badge.tsx b/apps/web/registry/default/internal/sidebar-menu-badge.tsx
new file mode 100644
index 00000000..a77f5091
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-menu-badge.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const projects = [
+   {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+      badge: "24",
+   },
+   {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+      badge: "12",
+   },
+   {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+      badge: "3",
+   },
+   {
+      name: "Support",
+      url: "#",
+      icon: LifeBuoy,
+      badge: "21",
+   },
+   {
+      name: "Feedback",
+      url: "#",
+      icon: Send,
+      badge: "8",
+   },
+]
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {projects.map((project) => (
+                           <SidebarMenuItem key={project.name}>
+                              <SidebarMenuButton
+                                 asChild
+                                 className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                              >
+                                 <a href={project.url}>
+                                    <project.icon />
+                                    <span>{project.name}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                              <SidebarMenuBadge>
+                                 {project.badge}
+                              </SidebarMenuBadge>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-menu-collapsible.tsx b/apps/web/registry/default/internal/sidebar-menu-collapsible.tsx
new file mode 100644
index 00000000..8225fc6d
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-menu-collapsible.tsx
@@ -0,0 +1,197 @@
+"use client"
+
+import { ChevronRight } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const items = [
+   {
+      title: "Getting Started",
+      url: "#",
+      items: [
+         {
+            title: "Installation",
+            url: "#",
+         },
+         {
+            title: "Project Structure",
+            url: "#",
+         },
+      ],
+   },
+   {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+         {
+            title: "Routing",
+            url: "#",
+         },
+         {
+            title: "Data Fetching",
+            url: "#",
+            isActive: true,
+         },
+         {
+            title: "Rendering",
+            url: "#",
+         },
+         {
+            title: "Caching",
+            url: "#",
+         },
+         {
+            title: "Styling",
+            url: "#",
+         },
+         {
+            title: "Optimizing",
+            url: "#",
+         },
+         {
+            title: "Configuring",
+            url: "#",
+         },
+         {
+            title: "Testing",
+            url: "#",
+         },
+         {
+            title: "Authentication",
+            url: "#",
+         },
+         {
+            title: "Deploying",
+            url: "#",
+         },
+         {
+            title: "Upgrading",
+            url: "#",
+         },
+         {
+            title: "Examples",
+            url: "#",
+         },
+      ],
+   },
+   {
+      title: "API Reference",
+      url: "#",
+      items: [
+         {
+            title: "Components",
+            url: "#",
+         },
+         {
+            title: "File Conventions",
+            url: "#",
+         },
+         {
+            title: "Functions",
+            url: "#",
+         },
+         {
+            title: "next.config.js Options",
+            url: "#",
+         },
+         {
+            title: "CLI",
+            url: "#",
+         },
+         {
+            title: "Edge Runtime",
+            url: "#",
+         },
+      ],
+   },
+   {
+      title: "Architecture",
+      url: "#",
+      items: [
+         {
+            title: "Accessibility",
+            url: "#",
+         },
+         {
+            title: "Fast Refresh",
+            url: "#",
+         },
+         {
+            title: "Next.js Compiler",
+            url: "#",
+         },
+         {
+            title: "Supported Browsers",
+            url: "#",
+         },
+         {
+            title: "Turbopack",
+            url: "#",
+         },
+      ],
+   },
+]
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {items.map((item, index) => (
+                           <Collapsible
+                              key={index}
+                              className="group/collapsible"
+                              defaultOpen={index === 0}
+                           >
+                              <SidebarMenuItem>
+                                 <CollapsibleTrigger asChild>
+                                    <SidebarMenuButton>
+                                       <span>{item.title}</span>
+                                       <ChevronRight className="transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90" />
+                                    </SidebarMenuButton>
+                                 </CollapsibleTrigger>
+                                 <CollapsibleContent>
+                                    <SidebarMenuSub>
+                                       {item.items.map((subItem, subIndex) => (
+                                          <SidebarMenuSubItem key={subIndex}>
+                                             <SidebarMenuSubButton asChild>
+                                                <a href={subItem.url}>
+                                                   <span>{subItem.title}</span>
+                                                </a>
+                                             </SidebarMenuSubButton>
+                                          </SidebarMenuSubItem>
+                                       ))}
+                                    </SidebarMenuSub>
+                                 </CollapsibleContent>
+                              </SidebarMenuItem>
+                           </Collapsible>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-menu-sub.tsx b/apps/web/registry/default/internal/sidebar-menu-sub.tsx
new file mode 100644
index 00000000..bb52bda0
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-menu-sub.tsx
@@ -0,0 +1,180 @@
+"use client"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const items = [
+   {
+      title: "Getting Started",
+      url: "#",
+      items: [
+         {
+            title: "Installation",
+            url: "#",
+         },
+         {
+            title: "Project Structure",
+            url: "#",
+         },
+      ],
+   },
+   {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+         {
+            title: "Routing",
+            url: "#",
+         },
+         {
+            title: "Data Fetching",
+            url: "#",
+            isActive: true,
+         },
+         {
+            title: "Rendering",
+            url: "#",
+         },
+         {
+            title: "Caching",
+            url: "#",
+         },
+         {
+            title: "Styling",
+            url: "#",
+         },
+         {
+            title: "Optimizing",
+            url: "#",
+         },
+         {
+            title: "Configuring",
+            url: "#",
+         },
+         {
+            title: "Testing",
+            url: "#",
+         },
+         {
+            title: "Authentication",
+            url: "#",
+         },
+         {
+            title: "Deploying",
+            url: "#",
+         },
+         {
+            title: "Upgrading",
+            url: "#",
+         },
+         {
+            title: "Examples",
+            url: "#",
+         },
+      ],
+   },
+   {
+      title: "API Reference",
+      url: "#",
+      items: [
+         {
+            title: "Components",
+            url: "#",
+         },
+         {
+            title: "File Conventions",
+            url: "#",
+         },
+         {
+            title: "Functions",
+            url: "#",
+         },
+         {
+            title: "next.config.js Options",
+            url: "#",
+         },
+         {
+            title: "CLI",
+            url: "#",
+         },
+         {
+            title: "Edge Runtime",
+            url: "#",
+         },
+      ],
+   },
+   {
+      title: "Architecture",
+      url: "#",
+      items: [
+         {
+            title: "Accessibility",
+            url: "#",
+         },
+         {
+            title: "Fast Refresh",
+            url: "#",
+         },
+         {
+            title: "Next.js Compiler",
+            url: "#",
+         },
+         {
+            title: "Supported Browsers",
+            url: "#",
+         },
+         {
+            title: "Turbopack",
+            url: "#",
+         },
+      ],
+   },
+]
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {items.map((item, index) => (
+                           <SidebarMenuItem key={index}>
+                              <SidebarMenuButton asChild>
+                                 <a href={item.url}>
+                                    <span>{item.title}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                              <SidebarMenuSub>
+                                 {item.items.map((subItem, subIndex) => (
+                                    <SidebarMenuSubItem key={subIndex}>
+                                       <SidebarMenuSubButton asChild>
+                                          <a href={subItem.url}>
+                                             <span>{subItem.title}</span>
+                                          </a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-menu.tsx b/apps/web/registry/default/internal/sidebar-menu.tsx
new file mode 100644
index 00000000..53c8742d
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-menu.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const projects = [
+   {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+   },
+   {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+   },
+   {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+   },
+   {
+      name: "Support",
+      url: "#",
+      icon: LifeBuoy,
+   },
+   {
+      name: "Feedback",
+      url: "#",
+      icon: Send,
+   },
+]
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {projects.map((project) => (
+                           <SidebarMenuItem key={project.name}>
+                              <SidebarMenuButton asChild>
+                                 <a href={project.url}>
+                                    <project.icon />
+                                    <span>{project.name}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sidebar-rsc.tsx b/apps/web/registry/default/internal/sidebar-rsc.tsx
new file mode 100644
index 00000000..f3e576b4
--- /dev/null
+++ b/apps/web/registry/default/internal/sidebar-rsc.tsx
@@ -0,0 +1,104 @@
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
+import * as React from "react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSkeleton,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const projects = [
+   {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+      badge: "24",
+   },
+   {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+      badge: "12",
+   },
+   {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+      badge: "3",
+   },
+   {
+      name: "Support",
+      url: "#",
+      icon: LifeBuoy,
+      badge: "21",
+   },
+   {
+      name: "Feedback",
+      url: "#",
+      icon: Send,
+      badge: "8",
+   },
+]
+
+// Dummy fetch function
+async function fetchProjects() {
+   await new Promise((resolve) => setTimeout(resolve, 3000))
+   return projects
+}
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <React.Suspense fallback={<NavProjectsSkeleton />}>
+                        <NavProjects />
+                     </React.Suspense>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
+
+function NavProjectsSkeleton() {
+   return (
+      <SidebarMenu>
+         {Array.from({ length: 5 }).map((_, index) => (
+            <SidebarMenuItem key={index}>
+               <SidebarMenuSkeleton showIcon />
+            </SidebarMenuItem>
+         ))}
+      </SidebarMenu>
+   )
+}
+
+async function NavProjects() {
+   const projects = await fetchProjects()
+
+   return (
+      <SidebarMenu>
+         {projects.map((project) => (
+            <SidebarMenuItem key={project.name}>
+               <SidebarMenuButton asChild>
+                  <a href={project.url}>
+                     <project.icon />
+                     <span>{project.name}</span>
+                  </a>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         ))}
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/accordion-demo.tsx b/apps/web/registry/default/internal/sink/components/accordion-demo.tsx
new file mode 100644
index 00000000..4e9ac021
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/accordion-demo.tsx
@@ -0,0 +1,33 @@
+import {
+   Accordion,
+   AccordionContent,
+   AccordionItem,
+   AccordionTrigger,
+} from "~/registry/miami/ui/accordion"
+
+export function AccordionDemo() {
+   return (
+      <Accordion type="single" collapsible className="w-full">
+         <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>
+               Yes. It adheres to the WAI-ARIA design pattern.
+            </AccordionContent>
+         </AccordionItem>
+         <AccordionItem value="item-2">
+            <AccordionTrigger>Is it styled?</AccordionTrigger>
+            <AccordionContent>
+               Yes. It comes with default styles that matches the other
+               components&apos; aesthetic.
+            </AccordionContent>
+         </AccordionItem>
+         <AccordionItem value="item-3">
+            <AccordionTrigger>Is it animated?</AccordionTrigger>
+            <AccordionContent>
+               Yes. It's animated by default, but you can disable it if you
+               prefer.
+            </AccordionContent>
+         </AccordionItem>
+      </Accordion>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/alert-demo.tsx b/apps/web/registry/default/internal/sink/components/alert-demo.tsx
new file mode 100644
index 00000000..639d7041
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/alert-demo.tsx
@@ -0,0 +1,15 @@
+import { Terminal } from "lucide-react"
+
+import { Alert, AlertDescription, AlertTitle } from "~/registry/miami/ui/alert"
+
+export function AlertDemo() {
+   return (
+      <Alert>
+         <Terminal className="h-4 w-4" />
+         <AlertTitle>Heads up!</AlertTitle>
+         <AlertDescription>
+            You can add components to your app using the cli.
+         </AlertDescription>
+      </Alert>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/alert-dialog-demo.tsx b/apps/web/registry/default/internal/sink/components/alert-dialog-demo.tsx
new file mode 100644
index 00000000..96f656da
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+   AlertDialog,
+   AlertDialogAction,
+   AlertDialogCancel,
+   AlertDialogContent,
+   AlertDialogDescription,
+   AlertDialogFooter,
+   AlertDialogHeader,
+   AlertDialogTitle,
+   AlertDialogTrigger,
+} from "~/registry/miami/ui/alert-dialog"
+import { Button } from "~/registry/miami/ui/button"
+
+export function AlertDialogDemo() {
+   return (
+      <AlertDialog>
+         <AlertDialogTrigger asChild>
+            <Button variant="outline">Show Dialog</Button>
+         </AlertDialogTrigger>
+         <AlertDialogContent>
+            <AlertDialogHeader>
+               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+               <AlertDialogDescription>
+                  This action cannot be undone. This will permanently delete
+                  your account and remove your data from our servers.
+               </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+               <AlertDialogCancel>Cancel</AlertDialogCancel>
+               <AlertDialogAction>Continue</AlertDialogAction>
+            </AlertDialogFooter>
+         </AlertDialogContent>
+      </AlertDialog>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/app-sidebar.tsx b/apps/web/registry/default/internal/sink/components/app-sidebar.tsx
new file mode 100644
index 00000000..70c652cc
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"use client"
+
+import {
+   AudioWaveform,
+   BookOpen,
+   Bot,
+   Command,
+   Frame,
+   GalleryVerticalEnd,
+   Map,
+   PieChart,
+   Settings2,
+   SquareTerminal,
+} from "lucide-react"
+import type * as React from "react"
+
+import { NavMain } from "~/registry/miami/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "~/registry/miami/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "~/registry/miami/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "~/registry/miami/blocks/sidebar-07/components/team-switcher"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: GalleryVerticalEnd,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar collapsible="icon" {...props}>
+         <SidebarHeader>
+            <TeamSwitcher teams={data.teams} />
+         </SidebarHeader>
+         <SidebarContent>
+            <NavMain items={data.navMain} />
+            <NavProjects projects={data.projects} />
+         </SidebarContent>
+         <SidebarFooter>
+            <NavUser user={data.user} />
+         </SidebarFooter>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/aspect-ratio-demo.tsx b/apps/web/registry/default/internal/sink/components/aspect-ratio-demo.tsx
new file mode 100644
index 00000000..23200a86
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/aspect-ratio-demo.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image"
+
+import { AspectRatio } from "~/registry/miami/ui/aspect-ratio"
+
+export function AspectRatioDemo() {
+   return (
+      <AspectRatio ratio={16 / 9} className="bg-muted">
+         <Image
+            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+            alt="Photo by Drew Beamer"
+            fill
+            className="h-full w-full rounded-md object-cover"
+         />
+      </AspectRatio>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/avatar-demo.tsx b/apps/web/registry/default/internal/sink/components/avatar-demo.tsx
new file mode 100644
index 00000000..4a168b1b
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/avatar-demo.tsx
@@ -0,0 +1,10 @@
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+
+export function AvatarDemo() {
+   return (
+      <Avatar>
+         <AvatarImage src="https://github.com/nyxb.png" alt="@nyxb" />
+         <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/badge-demo.tsx b/apps/web/registry/default/internal/sink/components/badge-demo.tsx
new file mode 100644
index 00000000..fce20181
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/badge-demo.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/miami/ui/badge"
+
+export function BadgeDemo() {
+   return <Badge>Badge</Badge>
+}
diff --git a/apps/web/registry/default/internal/sink/components/badge-destructive.tsx b/apps/web/registry/default/internal/sink/components/badge-destructive.tsx
new file mode 100644
index 00000000..c48b6a1e
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/badge-destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/miami/ui/badge"
+
+export function BadgeDestructive() {
+   return <Badge variant="destructive">Destructive</Badge>
+}
diff --git a/apps/web/registry/default/internal/sink/components/badge-outline.tsx b/apps/web/registry/default/internal/sink/components/badge-outline.tsx
new file mode 100644
index 00000000..a3ef1773
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/miami/ui/badge"
+
+export function BadgeOutline() {
+   return <Badge variant="outline">Outline</Badge>
+}
diff --git a/apps/web/registry/default/internal/sink/components/badge-secondary.tsx b/apps/web/registry/default/internal/sink/components/badge-secondary.tsx
new file mode 100644
index 00000000..35a5fe0d
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/badge-secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/miami/ui/badge"
+
+export function BadgeSecondary() {
+   return <Badge variant="secondary">Secondary</Badge>
+}
diff --git a/apps/web/registry/default/internal/sink/components/breadcrumb-demo.tsx b/apps/web/registry/default/internal/sink/components/breadcrumb-demo.tsx
new file mode 100644
index 00000000..ef80ffcc
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/breadcrumb-demo.tsx
@@ -0,0 +1,51 @@
+import {
+   Breadcrumb,
+   BreadcrumbEllipsis,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+
+export function BreadcrumbDemo() {
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <DropdownMenu>
+                  <DropdownMenuTrigger className="flex items-center gap-1">
+                     <BreadcrumbEllipsis className="h-4 w-4" />
+                     <span className="sr-only">Toggle menu</span>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                     <DropdownMenuItem>Documentation</DropdownMenuItem>
+                     <DropdownMenuItem>Themes</DropdownMenuItem>
+                     <DropdownMenuItem>GitHub</DropdownMenuItem>
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/docs/components">
+                  Components
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/button-demo.tsx b/apps/web/registry/default/internal/sink/components/button-demo.tsx
new file mode 100644
index 00000000..aac9eabf
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/button-demo.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonDemo() {
+   return <Button>Button</Button>
+}
diff --git a/apps/web/registry/default/internal/sink/components/button-destructive.tsx b/apps/web/registry/default/internal/sink/components/button-destructive.tsx
new file mode 100644
index 00000000..9003f313
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/button-destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonDestructive() {
+   return <Button variant="destructive">Destructive</Button>
+}
diff --git a/apps/web/registry/default/internal/sink/components/button-ghost.tsx b/apps/web/registry/default/internal/sink/components/button-ghost.tsx
new file mode 100644
index 00000000..d2141704
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/button-ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonGhost() {
+   return <Button variant="ghost">Ghost</Button>
+}
diff --git a/apps/web/registry/default/internal/sink/components/button-link.tsx b/apps/web/registry/default/internal/sink/components/button-link.tsx
new file mode 100644
index 00000000..b10e914c
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/button-link.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonLink() {
+   return <Button variant="link">Link</Button>
+}
diff --git a/apps/web/registry/default/internal/sink/components/button-loading.tsx b/apps/web/registry/default/internal/sink/components/button-loading.tsx
new file mode 100644
index 00000000..d0bbd3d8
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/button-loading.tsx
@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react"
+
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonLoading() {
+   return (
+      <Button disabled>
+         <Loader2 className="animate-spin" />
+         Please wait
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/button-outline.tsx b/apps/web/registry/default/internal/sink/components/button-outline.tsx
new file mode 100644
index 00000000..0614c372
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/button-outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonOutline() {
+   return <Button variant="outline">Outline</Button>
+}
diff --git a/apps/web/registry/default/internal/sink/components/button-secondary.tsx b/apps/web/registry/default/internal/sink/components/button-secondary.tsx
new file mode 100644
index 00000000..02122883
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/button-secondary.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonSecondary() {
+   return <Button variant="secondary">Secondary</Button>
+}
diff --git a/apps/web/registry/default/internal/sink/components/button-with-icon.tsx b/apps/web/registry/default/internal/sink/components/button-with-icon.tsx
new file mode 100644
index 00000000..d9235479
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/button-with-icon.tsx
@@ -0,0 +1,11 @@
+import { MailOpen } from "lucide-react"
+
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonWithIcon() {
+   return (
+      <Button>
+         <MailOpen /> Login with Email
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/calendar-demo.tsx b/apps/web/registry/default/internal/sink/components/calendar-demo.tsx
new file mode 100644
index 00000000..c08a30bc
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/calendar-demo.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "~/registry/miami/ui/calendar"
+
+export function CalendarDemo() {
+   const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+   return (
+      <Calendar
+         mode="single"
+         selected={date}
+         onSelect={setDate}
+         className="rounded-md border shadow"
+      />
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/card-demo.tsx b/apps/web/registry/default/internal/sink/components/card-demo.tsx
new file mode 100644
index 00000000..09c61849
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellRing, Check } from "lucide-react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Switch } from "~/registry/miami/ui/switch"
+
+const notifications = [
+   {
+      title: "Your call has been confirmed.",
+      description: "1 hour ago",
+   },
+   {
+      title: "You have a new message!",
+      description: "1 hour ago",
+   },
+   {
+      title: "Your subscription is expiring soon!",
+      description: "2 hours ago",
+   },
+]
+
+type CardProps = React.ComponentProps<typeof Card>
+
+export function CardDemo({ className, ...props }: CardProps) {
+   return (
+      <Card className={ny("w-[380px]", className)} {...props}>
+         <CardHeader>
+            <CardTitle>Notifications</CardTitle>
+            <CardDescription>You have 3 unread messages.</CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-4">
+            <div className=" flex items-center space-x-4 rounded-md border p-4">
+               <BellRing />
+               <div className="flex-1 space-y-1">
+                  <p className="text-sm font-medium leading-none">
+                     Push Notifications
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                     Send notifications to device.
+                  </p>
+               </div>
+               <Switch />
+            </div>
+            <div>
+               {notifications.map((notification, index) => (
+                  <div
+                     key={index}
+                     className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+                  >
+                     <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+                     <div className="space-y-1">
+                        <p className="text-sm font-medium leading-none">
+                           {notification.title}
+                        </p>
+                        <p className="text-sm text-muted-foreground">
+                           {notification.description}
+                        </p>
+                     </div>
+                  </div>
+               ))}
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">
+               <Check /> Mark all as read
+            </Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/carousel-demo.tsx b/apps/web/registry/default/internal/sink/components/carousel-demo.tsx
new file mode 100644
index 00000000..dd8c8137
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/carousel-demo.tsx
@@ -0,0 +1,34 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/miami/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/miami/ui/carousel"
+
+export function CarouselDemo() {
+   return (
+      <Carousel className="w-full max-w-xs">
+         <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem key={index}>
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-4xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/checkbox-demo.tsx b/apps/web/registry/default/internal/sink/components/checkbox-demo.tsx
new file mode 100644
index 00000000..bb257495
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/checkbox-demo.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+
+export function CheckboxDemo() {
+   return (
+      <div className="flex items-center space-x-2">
+         <Checkbox id="terms" />
+         <label
+            htmlFor="terms"
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+         >
+            Accept terms and conditions
+         </label>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/collapsible-demo.tsx b/apps/web/registry/default/internal/sink/components/collapsible-demo.tsx
new file mode 100644
index 00000000..528d9651
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import { ChevronsUpDown } from "lucide-react"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+
+export function CollapsibleDemo() {
+   const [isOpen, setIsOpen] = React.useState(false)
+
+   return (
+      <Collapsible
+         open={isOpen}
+         onOpenChange={setIsOpen}
+         className="w-[350px] space-y-2"
+      >
+         <div className="flex items-center justify-between space-x-4 px-4">
+            <h4 className="text-sm font-semibold">
+               @peduarte starred 3 repositories
+            </h4>
+            <CollapsibleTrigger asChild>
+               <Button variant="ghost" size="sm">
+                  <ChevronsUpDown className="h-4 w-4" />
+                  <span className="sr-only">Toggle</span>
+               </Button>
+            </CollapsibleTrigger>
+         </div>
+         <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+            @radix-ui/primitives
+         </div>
+         <CollapsibleContent className="space-y-2">
+            <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+               @radix-ui/colors
+            </div>
+            <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+               @stitches/react
+            </div>
+         </CollapsibleContent>
+      </Collapsible>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/combobox-demo.tsx b/apps/web/registry/default/internal/sink/components/combobox-demo.tsx
new file mode 100644
index 00000000..434d41a9
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/combobox-demo.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { Check, ChevronsUpDown } from "lucide-react"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/miami/ui/command"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+const frameworks = [
+   {
+      value: "next.js",
+      label: "Next.js",
+   },
+   {
+      value: "sveltekit",
+      label: "SvelteKit",
+   },
+   {
+      value: "nuxt.js",
+      label: "Nuxt.js",
+   },
+   {
+      value: "remix",
+      label: "Remix",
+   },
+   {
+      value: "astro",
+      label: "Astro",
+   },
+]
+
+export function ComboboxDemo() {
+   const [open, setOpen] = React.useState(false)
+   const [value, setValue] = React.useState("")
+
+   return (
+      <Popover open={open} onOpenChange={setOpen}>
+         <PopoverTrigger asChild>
+            <Button
+               variant="outline"
+               role="combobox"
+               aria-expanded={open}
+               className="w-[200px] justify-between"
+            >
+               {value
+                  ? frameworks.find((framework) => framework.value === value)
+                       ?.label
+                  : "Select framework..."}
+               <ChevronsUpDown className="opacity-50" />
+            </Button>
+         </PopoverTrigger>
+         <PopoverContent className="w-[200px] p-0">
+            <Command>
+               <CommandInput
+                  placeholder="Search framework..."
+                  className="h-9"
+               />
+               <CommandList>
+                  <CommandEmpty>No framework found.</CommandEmpty>
+                  <CommandGroup>
+                     {frameworks.map((framework) => (
+                        <CommandItem
+                           key={framework.value}
+                           value={framework.value}
+                           onSelect={(currentValue) => {
+                              setValue(
+                                 currentValue === value ? "" : currentValue,
+                              )
+                              setOpen(false)
+                           }}
+                        >
+                           {framework.label}
+                           <Check
+                              className={ny(
+                                 "ml-auto",
+                                 value === framework.value
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                              )}
+                           />
+                        </CommandItem>
+                     ))}
+                  </CommandGroup>
+               </CommandList>
+            </Command>
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/command-demo.tsx b/apps/web/registry/default/internal/sink/components/command-demo.tsx
new file mode 100644
index 00000000..b77a036a
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/command-demo.tsx
@@ -0,0 +1,62 @@
+import {
+   Calculator,
+   Calendar,
+   CreditCard,
+   Settings,
+   Smile,
+   User,
+} from "lucide-react"
+
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+   CommandSeparator,
+   CommandShortcut,
+} from "~/registry/miami/ui/command"
+
+export function CommandDemo() {
+   return (
+      <Command className="rounded-lg border shadow-md md:min-w-[450px]">
+         <CommandInput placeholder="Type a command or search..." />
+         <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+               <CommandItem>
+                  <Calendar />
+                  <span>Calendar</span>
+               </CommandItem>
+               <CommandItem>
+                  <Smile />
+                  <span>Search Emoji</span>
+               </CommandItem>
+               <CommandItem disabled>
+                  <Calculator />
+                  <span>Calculator</span>
+               </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Settings">
+               <CommandItem>
+                  <User />
+                  <span>Profile</span>
+                  <CommandShortcut>⌘P</CommandShortcut>
+               </CommandItem>
+               <CommandItem>
+                  <CreditCard />
+                  <span>Billing</span>
+                  <CommandShortcut>⌘B</CommandShortcut>
+               </CommandItem>
+               <CommandItem>
+                  <Settings />
+                  <span>Settings</span>
+                  <CommandShortcut>⌘S</CommandShortcut>
+               </CommandItem>
+            </CommandGroup>
+         </CommandList>
+      </Command>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/component-wrapper.tsx b/apps/web/registry/default/internal/sink/components/component-wrapper.tsx
new file mode 100644
index 00000000..5d94d1e3
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/component-wrapper.tsx
@@ -0,0 +1,22 @@
+import { ny } from "~/registry/miami/lib/utils"
+
+export function ComponentWrapper({
+   className,
+   name,
+   children,
+   ...props
+}: React.ComponentPropsWithoutRef<"div"> & { name: string }) {
+   return (
+      <div
+         className={ny("flex w-full flex-col rounded-lg border", className)}
+         {...props}
+      >
+         <div className="border-b px-4 py-3">
+            <div className="text-sm font-medium">{name}</div>
+         </div>
+         <div className="flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full">
+            {children}
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/context-menu-demo.tsx b/apps/web/registry/default/internal/sink/components/context-menu-demo.tsx
new file mode 100644
index 00000000..2192e29e
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/context-menu-demo.tsx
@@ -0,0 +1,69 @@
+import {
+   ContextMenu,
+   ContextMenuCheckboxItem,
+   ContextMenuContent,
+   ContextMenuItem,
+   ContextMenuLabel,
+   ContextMenuRadioGroup,
+   ContextMenuRadioItem,
+   ContextMenuSeparator,
+   ContextMenuShortcut,
+   ContextMenuSub,
+   ContextMenuSubContent,
+   ContextMenuSubTrigger,
+   ContextMenuTrigger,
+} from "~/registry/miami/ui/context-menu"
+
+export function ContextMenuDemo() {
+   return (
+      <ContextMenu>
+         <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+            Right click here
+         </ContextMenuTrigger>
+         <ContextMenuContent className="w-64">
+            <ContextMenuItem inset>
+               Back
+               <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem inset disabled>
+               Forward
+               <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem inset>
+               Reload
+               <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuSub>
+               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+               <ContextMenuSubContent className="w-48">
+                  <ContextMenuItem>
+                     Save Page As...
+                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+                  </ContextMenuItem>
+                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+                  <ContextMenuItem>Name Window...</ContextMenuItem>
+                  <ContextMenuSeparator />
+                  <ContextMenuItem>Developer Tools</ContextMenuItem>
+               </ContextMenuSubContent>
+            </ContextMenuSub>
+            <ContextMenuSeparator />
+            <ContextMenuCheckboxItem checked>
+               Show Bookmarks Bar
+               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+            </ContextMenuCheckboxItem>
+            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+            <ContextMenuSeparator />
+            <ContextMenuRadioGroup value="pedro">
+               <ContextMenuLabel inset>People</ContextMenuLabel>
+               <ContextMenuSeparator />
+               <ContextMenuRadioItem value="pedro">
+                  Pedro Duarte
+               </ContextMenuRadioItem>
+               <ContextMenuRadioItem value="colm">
+                  Colm Tuite
+               </ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+         </ContextMenuContent>
+      </ContextMenu>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/date-picker-demo.tsx b/apps/web/registry/default/internal/sink/components/date-picker-demo.tsx
new file mode 100644
index 00000000..e0ac8a84
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Calendar } from "~/registry/miami/ui/calendar"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+export function DatePickerDemo() {
+   const [date, setDate] = React.useState<Date>()
+
+   return (
+      <Popover>
+         <PopoverTrigger asChild>
+            <Button
+               variant={"outline"}
+               className={ny(
+                  "w-[240px] justify-start text-left font-normal",
+                  !date && "text-muted-foreground",
+               )}
+            >
+               <CalendarIcon />
+               {date ? format(date, "PPP") : <span>Pick a date</span>}
+            </Button>
+         </PopoverTrigger>
+         <PopoverContent className="w-auto p-0" align="start">
+            <Calendar
+               mode="single"
+               selected={date}
+               onSelect={setDate}
+               initialFocus
+            />
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/dialog-demo.tsx b/apps/web/registry/default/internal/sink/components/dialog-demo.tsx
new file mode 100644
index 00000000..831cf8ca
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/dialog-demo.tsx
@@ -0,0 +1,56 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogFooter,
+   DialogHeader,
+   DialogTitle,
+   DialogTrigger,
+} from "~/registry/miami/ui/dialog"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function DialogDemo() {
+   return (
+      <Dialog>
+         <DialogTrigger asChild>
+            <Button variant="outline">Edit Profile</Button>
+         </DialogTrigger>
+         <DialogContent className="sm:max-w-[425px]">
+            <DialogHeader>
+               <DialogTitle>Edit profile</DialogTitle>
+               <DialogDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+               </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="name" className="text-right">
+                     Name
+                  </Label>
+                  <Input
+                     id="name"
+                     value="Pedro Duarte"
+                     className="col-span-3"
+                  />
+               </div>
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="username" className="text-right">
+                     Username
+                  </Label>
+                  <Input
+                     id="username"
+                     value="@peduarte"
+                     className="col-span-3"
+                  />
+               </div>
+            </div>
+            <DialogFooter>
+               <Button type="submit">Save changes</Button>
+            </DialogFooter>
+         </DialogContent>
+      </Dialog>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/drawer-demo.tsx b/apps/web/registry/default/internal/sink/components/drawer-demo.tsx
new file mode 100644
index 00000000..eec5e1a9
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/drawer-demo.tsx
@@ -0,0 +1,138 @@
+"use client"
+
+import { Minus, Plus } from "lucide-react"
+import * as React from "react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Drawer,
+   DrawerClose,
+   DrawerContent,
+   DrawerDescription,
+   DrawerFooter,
+   DrawerHeader,
+   DrawerTitle,
+   DrawerTrigger,
+} from "~/registry/miami/ui/drawer"
+
+const data = [
+   {
+      goal: 400,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 239,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 349,
+   },
+]
+
+export function DrawerDemo() {
+   const [goal, setGoal] = React.useState(350)
+
+   function onClick(adjustment: number) {
+      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+   }
+
+   return (
+      <Drawer>
+         <DrawerTrigger asChild>
+            <Button variant="outline">Open Drawer</Button>
+         </DrawerTrigger>
+         <DrawerContent>
+            <div className="mx-auto w-full max-w-sm">
+               <DrawerHeader>
+                  <DrawerTitle>Move Goal</DrawerTitle>
+                  <DrawerDescription>
+                     Set your daily activity goal.
+                  </DrawerDescription>
+               </DrawerHeader>
+               <div className="p-4 pb-0">
+                  <div className="flex items-center justify-center space-x-2">
+                     <Button
+                        variant="outline"
+                        size="icon"
+                        className="h-8 w-8 shrink-0 rounded-full"
+                        onClick={() => onClick(-10)}
+                        disabled={goal <= 200}
+                     >
+                        <Minus />
+                        <span className="sr-only">Decrease</span>
+                     </Button>
+                     <div className="flex-1 text-center">
+                        <div className="text-7xl font-bold tracking-tighter">
+                           {goal}
+                        </div>
+                        <div className="text-[0.70rem] uppercase text-muted-foreground">
+                           Calories/day
+                        </div>
+                     </div>
+                     <Button
+                        variant="outline"
+                        size="icon"
+                        className="h-8 w-8 shrink-0 rounded-full"
+                        onClick={() => onClick(10)}
+                        disabled={goal >= 400}
+                     >
+                        <Plus />
+                        <span className="sr-only">Increase</span>
+                     </Button>
+                  </div>
+                  <div className="mt-3 h-[120px]">
+                     <ResponsiveContainer width="100%" height="100%">
+                        <BarChart data={data}>
+                           <Bar
+                              dataKey="goal"
+                              style={
+                                 {
+                                    fill: "hsl(var(--foreground))",
+                                    opacity: 0.9,
+                                 } as React.CSSProperties
+                              }
+                           />
+                        </BarChart>
+                     </ResponsiveContainer>
+                  </div>
+               </div>
+               <DrawerFooter>
+                  <Button>Submit</Button>
+                  <DrawerClose asChild>
+                     <Button variant="outline">Cancel</Button>
+                  </DrawerClose>
+               </DrawerFooter>
+            </div>
+         </DrawerContent>
+      </Drawer>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/dropdown-menu-demo.tsx b/apps/web/registry/default/internal/sink/components/dropdown-menu-demo.tsx
new file mode 100644
index 00000000..ed4b7ba9
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/dropdown-menu-demo.tsx
@@ -0,0 +1,75 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuPortal,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuSub,
+   DropdownMenuSubContent,
+   DropdownMenuSubTrigger,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+
+export function DropdownMenuDemo() {
+   return (
+      <DropdownMenu>
+         <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open</Button>
+         </DropdownMenuTrigger>
+         <DropdownMenuContent className="w-56">
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+               <DropdownMenuItem>
+                  Profile
+                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+               </DropdownMenuItem>
+               <DropdownMenuItem>
+                  Billing
+                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+               </DropdownMenuItem>
+               <DropdownMenuItem>
+                  Settings
+                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+               </DropdownMenuItem>
+               <DropdownMenuItem>
+                  Keyboard shortcuts
+                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+               </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+               <DropdownMenuItem>Team</DropdownMenuItem>
+               <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                     <DropdownMenuSubContent>
+                        <DropdownMenuItem>Email</DropdownMenuItem>
+                        <DropdownMenuItem>Message</DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>More...</DropdownMenuItem>
+                     </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+               </DropdownMenuSub>
+               <DropdownMenuItem>
+                  New Team
+                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+               </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>GitHub</DropdownMenuItem>
+            <DropdownMenuItem>Support</DropdownMenuItem>
+            <DropdownMenuItem disabled>API</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+               Log out
+               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+            </DropdownMenuItem>
+         </DropdownMenuContent>
+      </DropdownMenu>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/hover-card-demo.tsx b/apps/web/registry/default/internal/sink/components/hover-card-demo.tsx
new file mode 100644
index 00000000..d3346bb5
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/hover-card-demo.tsx
@@ -0,0 +1,39 @@
+import { CalendarIcon } from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   HoverCard,
+   HoverCardContent,
+   HoverCardTrigger,
+} from "~/registry/miami/ui/hover-card"
+
+export function HoverCardDemo() {
+   return (
+      <HoverCard>
+         <HoverCardTrigger asChild>
+            <Button variant="link">@nextjs</Button>
+         </HoverCardTrigger>
+         <HoverCardContent className="w-80">
+            <div className="flex justify-between space-x-4">
+               <Avatar>
+                  <AvatarImage src="https://github.com/vercel.png" />
+                  <AvatarFallback>VC</AvatarFallback>
+               </Avatar>
+               <div className="space-y-1">
+                  <h4 className="text-sm font-semibold">@nextjs</h4>
+                  <p className="text-sm">
+                     The React Framework – created and maintained by @vercel.
+                  </p>
+                  <div className="flex items-center pt-2">
+                     <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
+                     <span className="text-xs text-muted-foreground">
+                        Joined December 2021
+                     </span>
+                  </div>
+               </div>
+            </div>
+         </HoverCardContent>
+      </HoverCard>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/input-demo.tsx b/apps/web/registry/default/internal/sink/components/input-demo.tsx
new file mode 100644
index 00000000..2fd0167b
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/input-demo.tsx
@@ -0,0 +1,5 @@
+import { Input } from "~/registry/miami/ui/input"
+
+export function InputDemo() {
+   return <Input type="email" placeholder="Email" />
+}
diff --git a/apps/web/registry/default/internal/sink/components/input-otp-demo.tsx b/apps/web/registry/default/internal/sink/components/input-otp-demo.tsx
new file mode 100644
index 00000000..4b8ef2c2
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/input-otp-demo.tsx
@@ -0,0 +1,24 @@
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSeparator,
+   InputOTPSlot,
+} from "~/registry/miami/ui/input-otp"
+
+export function InputOTPDemo() {
+   return (
+      <InputOTP maxLength={6}>
+         <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+         </InputOTPGroup>
+         <InputOTPSeparator />
+         <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+         </InputOTPGroup>
+      </InputOTP>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/label-demo.tsx b/apps/web/registry/default/internal/sink/components/label-demo.tsx
new file mode 100644
index 00000000..06c53eff
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/label-demo.tsx
@@ -0,0 +1,13 @@
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+import { Label } from "~/registry/miami/ui/label"
+
+export function LabelDemo() {
+   return (
+      <div>
+         <div className="flex items-center space-x-2">
+            <Checkbox id="terms" />
+            <Label htmlFor="terms">Accept terms and conditions</Label>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/menubar-demo.tsx b/apps/web/registry/default/internal/sink/components/menubar-demo.tsx
new file mode 100644
index 00000000..9aee9d6c
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/menubar-demo.tsx
@@ -0,0 +1,109 @@
+import {
+   Menubar,
+   MenubarCheckboxItem,
+   MenubarContent,
+   MenubarItem,
+   MenubarMenu,
+   MenubarRadioGroup,
+   MenubarRadioItem,
+   MenubarSeparator,
+   MenubarShortcut,
+   MenubarSub,
+   MenubarSubContent,
+   MenubarSubTrigger,
+   MenubarTrigger,
+} from "~/registry/miami/ui/menubar"
+
+export function MenubarDemo() {
+   return (
+      <Menubar>
+         <MenubarMenu>
+            <MenubarTrigger>File</MenubarTrigger>
+            <MenubarContent>
+               <MenubarItem>
+                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem>
+                  New Window <MenubarShortcut>⌘N</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem disabled>New Incognito Window</MenubarItem>
+               <MenubarSeparator />
+               <MenubarSub>
+                  <MenubarSubTrigger>Share</MenubarSubTrigger>
+                  <MenubarSubContent>
+                     <MenubarItem>Email link</MenubarItem>
+                     <MenubarItem>Messages</MenubarItem>
+                     <MenubarItem>Notes</MenubarItem>
+                  </MenubarSubContent>
+               </MenubarSub>
+               <MenubarSeparator />
+               <MenubarItem>
+                  Print... <MenubarShortcut>⌘P</MenubarShortcut>
+               </MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+         <MenubarMenu>
+            <MenubarTrigger>Edit</MenubarTrigger>
+            <MenubarContent>
+               <MenubarItem>
+                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem>
+                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+               </MenubarItem>
+               <MenubarSeparator />
+               <MenubarSub>
+                  <MenubarSubTrigger>Find</MenubarSubTrigger>
+                  <MenubarSubContent>
+                     <MenubarItem>Search the web</MenubarItem>
+                     <MenubarSeparator />
+                     <MenubarItem>Find...</MenubarItem>
+                     <MenubarItem>Find Next</MenubarItem>
+                     <MenubarItem>Find Previous</MenubarItem>
+                  </MenubarSubContent>
+               </MenubarSub>
+               <MenubarSeparator />
+               <MenubarItem>Cut</MenubarItem>
+               <MenubarItem>Copy</MenubarItem>
+               <MenubarItem>Paste</MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+         <MenubarMenu>
+            <MenubarTrigger>View</MenubarTrigger>
+            <MenubarContent>
+               <MenubarCheckboxItem>
+                  Always Show Bookmarks Bar
+               </MenubarCheckboxItem>
+               <MenubarCheckboxItem checked>
+                  Always Show Full URLs
+               </MenubarCheckboxItem>
+               <MenubarSeparator />
+               <MenubarItem inset>
+                  Reload <MenubarShortcut>⌘R</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem disabled inset>
+                  Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+               </MenubarItem>
+               <MenubarSeparator />
+               <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+               <MenubarSeparator />
+               <MenubarItem inset>Hide Sidebar</MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+         <MenubarMenu>
+            <MenubarTrigger>Profiles</MenubarTrigger>
+            <MenubarContent>
+               <MenubarRadioGroup value="benoit">
+                  <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+                  <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+                  <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+               </MenubarRadioGroup>
+               <MenubarSeparator />
+               <MenubarItem inset>Edit...</MenubarItem>
+               <MenubarSeparator />
+               <MenubarItem inset>Add Profile...</MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+      </Menubar>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/nav-main.tsx b/apps/web/registry/default/internal/sink/components/nav-main.tsx
new file mode 100644
index 00000000..73557e4a
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/nav-main.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon?: LucideIcon
+      isActive?: boolean
+      items?: {
+         title: string
+         url: string
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Platform</SidebarGroupLabel>
+         <SidebarMenu>
+            {items.map((item) => (
+               <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={item.isActive}
+                  className="group/collapsible"
+               >
+                  <SidebarMenuItem>
+                     <CollapsibleTrigger asChild>
+                        <SidebarMenuButton tooltip={item.title}>
+                           {item.icon && <item.icon />}
+                           <span>{item.title}</span>
+                           <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                        </SidebarMenuButton>
+                     </CollapsibleTrigger>
+                     <CollapsibleContent>
+                        <SidebarMenuSub>
+                           {item.items?.map((subItem) => (
+                              <SidebarMenuSubItem key={subItem.title}>
+                                 <SidebarMenuSubButton asChild>
+                                    <a href={subItem.url}>
+                                       <span>{subItem.title}</span>
+                                    </a>
+                                 </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                           ))}
+                        </SidebarMenuSub>
+                     </CollapsibleContent>
+                  </SidebarMenuItem>
+               </Collapsible>
+            ))}
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/nav-projects.tsx b/apps/web/registry/default/internal/sink/components/nav-projects.tsx
new file mode 100644
index 00000000..16487028
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+   Folder,
+   Forward,
+   type LucideIcon,
+   MoreHorizontal,
+   Trash2,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavProjects({
+   projects,
+}: {
+   projects: {
+      name: string
+      url: string
+      icon: LucideIcon
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Projects</SidebarGroupLabel>
+         <SidebarMenu>
+            {projects.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url}>
+                        <item.icon />
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-48 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <Folder className="text-muted-foreground" />
+                           <span>View Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <Forward className="text-muted-foreground" />
+                           <span>Share Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete Project</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal className="text-sidebar-foreground/70" />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/nav-user.tsx b/apps/web/registry/default/internal/sink/components/nav-user.tsx
new file mode 100644
index 00000000..6566b797
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="end"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/navigation-menu-demo.tsx b/apps/web/registry/default/internal/sink/components/navigation-menu-demo.tsx
new file mode 100644
index 00000000..2302b7ed
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/navigation-menu-demo.tsx
@@ -0,0 +1,147 @@
+"use client"
+
+import Link from "next/link"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import {
+   NavigationMenu,
+   NavigationMenuContent,
+   NavigationMenuItem,
+   NavigationMenuLink,
+   NavigationMenuList,
+   NavigationMenuTrigger,
+   navigationMenuTriggerStyle,
+} from "~/registry/miami/ui/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+   {
+      title: "Alert Dialog",
+      href: "/docs/primitives/alert-dialog",
+      description:
+         "A modal dialog that interrupts the user with important content and expects a response.",
+   },
+   {
+      title: "Hover Card",
+      href: "/docs/primitives/hover-card",
+      description:
+         "For sighted users to preview content available behind a link.",
+   },
+   {
+      title: "Progress",
+      href: "/docs/primitives/progress",
+      description:
+         "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+   },
+   {
+      title: "Scroll-area",
+      href: "/docs/primitives/scroll-area",
+      description: "Visually or semantically separates content.",
+   },
+   {
+      title: "Tabs",
+      href: "/docs/primitives/tabs",
+      description:
+         "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+   },
+   {
+      title: "Tooltip",
+      href: "/docs/primitives/tooltip",
+      description:
+         "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+   },
+]
+
+export function NavigationMenuDemo() {
+   return (
+      <NavigationMenu>
+         <NavigationMenuList>
+            <NavigationMenuItem>
+               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+               <NavigationMenuContent>
+                  <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                     <li className="row-span-3">
+                        <NavigationMenuLink asChild>
+                           <a
+                              className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                              href="/"
+                           >
+                              <div className="mb-2 mt-4 text-lg font-medium">
+                                 nyxb/ui
+                              </div>
+                              <p className="text-sm leading-tight text-muted-foreground">
+                                 Beautifully designed components built with
+                                 Radix UI and Tailwind CSS.
+                              </p>
+                           </a>
+                        </NavigationMenuLink>
+                     </li>
+                     <ListItem href="/docs" title="Introduction">
+                        Re-usable components built using Radix UI and Tailwind
+                        CSS.
+                     </ListItem>
+                     <ListItem href="/docs/installation" title="Installation">
+                        How to install dependencies and structure your app.
+                     </ListItem>
+                     <ListItem
+                        href="/docs/primitives/typography"
+                        title="Typography"
+                     >
+                        Styles for headings, paragraphs, lists...etc
+                     </ListItem>
+                  </ul>
+               </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+               <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+               <NavigationMenuContent>
+                  <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                     {components.map((component) => (
+                        <ListItem
+                           key={component.title}
+                           title={component.title}
+                           href={component.href}
+                        >
+                           {component.description}
+                        </ListItem>
+                     ))}
+                  </ul>
+               </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+               <Link href="/docs" legacyBehavior passHref>
+                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                     Documentation
+                  </NavigationMenuLink>
+               </Link>
+            </NavigationMenuItem>
+         </NavigationMenuList>
+      </NavigationMenu>
+   )
+}
+
+const ListItem = React.forwardRef<
+   React.ElementRef<"a">,
+   React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+   return (
+      <li>
+         <NavigationMenuLink asChild>
+            <a
+               ref={ref}
+               className={ny(
+                  "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+                  className,
+               )}
+               {...props}
+            >
+               <div className="text-sm font-medium leading-none">{title}</div>
+               <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                  {children}
+               </p>
+            </a>
+         </NavigationMenuLink>
+      </li>
+   )
+})
+ListItem.displayName = "ListItem"
diff --git a/apps/web/registry/default/internal/sink/components/pagination-demo.tsx b/apps/web/registry/default/internal/sink/components/pagination-demo.tsx
new file mode 100644
index 00000000..c02a8bf4
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/pagination-demo.tsx
@@ -0,0 +1,38 @@
+import {
+   Pagination,
+   PaginationContent,
+   PaginationEllipsis,
+   PaginationItem,
+   PaginationLink,
+   PaginationNext,
+   PaginationPrevious,
+} from "~/registry/miami/ui/pagination"
+
+export function PaginationDemo() {
+   return (
+      <Pagination>
+         <PaginationContent>
+            <PaginationItem>
+               <PaginationPrevious href="#" />
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationLink href="#">1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationLink href="#" isActive>
+                  2
+               </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationLink href="#">3</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationNext href="#" />
+            </PaginationItem>
+         </PaginationContent>
+      </Pagination>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/popover-demo.tsx b/apps/web/registry/default/internal/sink/components/popover-demo.tsx
new file mode 100644
index 00000000..ed4c7010
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/popover-demo.tsx
@@ -0,0 +1,62 @@
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+export function PopoverDemo() {
+   return (
+      <Popover>
+         <PopoverTrigger asChild>
+            <Button variant="outline">Open popover</Button>
+         </PopoverTrigger>
+         <PopoverContent className="w-80">
+            <div className="grid gap-4">
+               <div className="space-y-2">
+                  <h4 className="font-medium leading-none">Dimensions</h4>
+                  <p className="text-sm text-muted-foreground">
+                     Set the dimensions for the layer.
+                  </p>
+               </div>
+               <div className="grid gap-2">
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="width">Width</Label>
+                     <Input
+                        id="width"
+                        defaultValue="100%"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="maxWidth">Max. width</Label>
+                     <Input
+                        id="maxWidth"
+                        defaultValue="300px"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="height">Height</Label>
+                     <Input
+                        id="height"
+                        defaultValue="25px"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="maxHeight">Max. height</Label>
+                     <Input
+                        id="maxHeight"
+                        defaultValue="none"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+               </div>
+            </div>
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/progress-demo.tsx b/apps/web/registry/default/internal/sink/components/progress-demo.tsx
new file mode 100644
index 00000000..eb7f6510
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/progress-demo.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import * as React from "react"
+
+import { Progress } from "~/registry/miami/ui/progress"
+
+export function ProgressDemo() {
+   const [progress, setProgress] = React.useState(13)
+
+   React.useEffect(() => {
+      const timer = setTimeout(() => setProgress(66), 500)
+      return () => clearTimeout(timer)
+   }, [])
+
+   return <Progress value={progress} className="w-[60%]" />
+}
diff --git a/apps/web/registry/default/internal/sink/components/radio-group-demo.tsx b/apps/web/registry/default/internal/sink/components/radio-group-demo.tsx
new file mode 100644
index 00000000..81f99c43
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/radio-group-demo.tsx
@@ -0,0 +1,21 @@
+import { Label } from "~/registry/miami/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/miami/ui/radio-group"
+
+export function RadioGroupDemo() {
+   return (
+      <RadioGroup defaultValue="comfortable">
+         <div className="flex items-center space-x-2">
+            <RadioGroupItem value="default" id="r1" />
+            <Label htmlFor="r1">Default</Label>
+         </div>
+         <div className="flex items-center space-x-2">
+            <RadioGroupItem value="comfortable" id="r2" />
+            <Label htmlFor="r2">Comfortable</Label>
+         </div>
+         <div className="flex items-center space-x-2">
+            <RadioGroupItem value="compact" id="r3" />
+            <Label htmlFor="r3">Compact</Label>
+         </div>
+      </RadioGroup>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/resizable-handle.tsx b/apps/web/registry/default/internal/sink/components/resizable-handle.tsx
new file mode 100644
index 00000000..1b229da0
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/resizable-handle.tsx
@@ -0,0 +1,26 @@
+import {
+   ResizableHandle,
+   ResizablePanel,
+   ResizablePanelGroup,
+} from "~/registry/miami/ui/resizable"
+
+export function ResizableHandleDemo() {
+   return (
+      <ResizablePanelGroup
+         direction="horizontal"
+         className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
+      >
+         <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+               <span className="font-semibold">Sidebar</span>
+            </div>
+         </ResizablePanel>
+         <ResizableHandle withHandle />
+         <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+               <span className="font-semibold">Content</span>
+            </div>
+         </ResizablePanel>
+      </ResizablePanelGroup>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/scroll-area-demo.tsx b/apps/web/registry/default/internal/sink/components/scroll-area-demo.tsx
new file mode 100644
index 00000000..ecb55c67
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/scroll-area-demo.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { ScrollArea } from "~/registry/miami/ui/scroll-area"
+import { Separator } from "~/registry/miami/ui/separator"
+
+const tags = Array.from({ length: 50 }).map(
+   (_, i, a) => `v1.2.0-beta.${a.length - i}`,
+)
+
+export function ScrollAreaDemo() {
+   return (
+      <ScrollArea className="h-72 w-48 rounded-md border">
+         <div className="p-4">
+            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+            {tags.map((tag) => (
+               <React.Fragment key={tag}>
+                  <div className="text-sm">{tag}</div>
+                  <Separator className="my-2" />
+               </React.Fragment>
+            ))}
+         </div>
+      </ScrollArea>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/select-demo.tsx b/apps/web/registry/default/internal/sink/components/select-demo.tsx
new file mode 100644
index 00000000..75d7454c
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/select-demo.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import {
+   Select,
+   SelectContent,
+   SelectGroup,
+   SelectItem,
+   SelectLabel,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export function SelectDemo() {
+   return (
+      <Select>
+         <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select a fruit" />
+         </SelectTrigger>
+         <SelectContent>
+            <SelectGroup>
+               <SelectLabel>Fruits</SelectLabel>
+               <SelectItem value="apple">Apple</SelectItem>
+               <SelectItem value="banana">Banana</SelectItem>
+               <SelectItem value="blueberry">Blueberry</SelectItem>
+               <SelectItem value="grapes">Grapes</SelectItem>
+               <SelectItem value="pineapple">Pineapple</SelectItem>
+            </SelectGroup>
+         </SelectContent>
+      </Select>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/separator-demo.tsx b/apps/web/registry/default/internal/sink/components/separator-demo.tsx
new file mode 100644
index 00000000..c6f331e2
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/separator-demo.tsx
@@ -0,0 +1,24 @@
+import { Separator } from "~/registry/miami/ui/separator"
+
+export function SeparatorDemo() {
+   return (
+      <div>
+         <div className="space-y-1">
+            <h4 className="text-sm font-medium leading-none">
+               Radix Primitives
+            </h4>
+            <p className="text-sm text-muted-foreground">
+               An open-source UI component library.
+            </p>
+         </div>
+         <Separator className="my-4" />
+         <div className="flex h-5 items-center space-x-4 text-sm">
+            <div>Blog</div>
+            <Separator orientation="vertical" />
+            <div>Docs</div>
+            <Separator orientation="vertical" />
+            <div>Source</div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/sheet-demo.tsx b/apps/web/registry/default/internal/sink/components/sheet-demo.tsx
new file mode 100644
index 00000000..11e59349
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/sheet-demo.tsx
@@ -0,0 +1,59 @@
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Sheet,
+   SheetClose,
+   SheetContent,
+   SheetDescription,
+   SheetFooter,
+   SheetHeader,
+   SheetTitle,
+   SheetTrigger,
+} from "~/registry/miami/ui/sheet"
+
+export function SheetDemo() {
+   return (
+      <Sheet>
+         <SheetTrigger asChild>
+            <Button variant="outline">Open</Button>
+         </SheetTrigger>
+         <SheetContent>
+            <SheetHeader>
+               <SheetTitle>Edit profile</SheetTitle>
+               <SheetDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+               </SheetDescription>
+            </SheetHeader>
+            <div className="grid gap-4 py-4">
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="name" className="text-right">
+                     Name
+                  </Label>
+                  <Input
+                     id="name"
+                     value="Pedro Duarte"
+                     className="col-span-3"
+                  />
+               </div>
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="username" className="text-right">
+                     Username
+                  </Label>
+                  <Input
+                     id="username"
+                     value="@peduarte"
+                     className="col-span-3"
+                  />
+               </div>
+            </div>
+            <SheetFooter>
+               <SheetClose asChild>
+                  <Button type="submit">Save changes</Button>
+               </SheetClose>
+            </SheetFooter>
+         </SheetContent>
+      </Sheet>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/skeleton-demo.tsx b/apps/web/registry/default/internal/sink/components/skeleton-demo.tsx
new file mode 100644
index 00000000..3d2c6c90
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/skeleton-demo.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "~/registry/miami/ui/skeleton"
+
+export function SkeletonDemo() {
+   return (
+      <div className="flex items-center space-x-4">
+         <Skeleton className="h-12 w-12 rounded-full" />
+         <div className="space-y-2">
+            <Skeleton className="h-4 w-[250px]" />
+            <Skeleton className="h-4 w-[200px]" />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/slider-demo.tsx b/apps/web/registry/default/internal/sink/components/slider-demo.tsx
new file mode 100644
index 00000000..e8d8e6d9
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/slider-demo.tsx
@@ -0,0 +1,16 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/miami/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export function SliderDemo({ className, ...props }: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[50]}
+         max={100}
+         step={1}
+         className={ny("w-[60%]", className)}
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/sonner-demo.tsx b/apps/web/registry/default/internal/sink/components/sonner-demo.tsx
new file mode 100644
index 00000000..a7bb10e5
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/sonner-demo.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { toast } from "sonner"
+
+import { Button } from "~/registry/miami/ui/button"
+
+export function SonnerDemo() {
+   return (
+      <Button
+         variant="outline"
+         onClick={() =>
+            toast("Event has been created", {
+               description: "Sunday, December 03, 2023 at 9:00 AM",
+               action: {
+                  label: "Undo",
+                  onClick: () => console.log("Undo"),
+               },
+            })
+         }
+      >
+         Show Toast
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/switch-demo.tsx b/apps/web/registry/default/internal/sink/components/switch-demo.tsx
new file mode 100644
index 00000000..87866ea4
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/switch-demo.tsx
@@ -0,0 +1,11 @@
+import { Label } from "~/registry/miami/ui/label"
+import { Switch } from "~/registry/miami/ui/switch"
+
+export function SwitchDemo() {
+   return (
+      <div className="flex items-center space-x-2">
+         <Switch id="airplane-mode" />
+         <Label htmlFor="airplane-mode">Airplane Mode</Label>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/table-demo.tsx b/apps/web/registry/default/internal/sink/components/table-demo.tsx
new file mode 100644
index 00000000..cfa015cb
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/table-demo.tsx
@@ -0,0 +1,91 @@
+import {
+   Table,
+   TableBody,
+   TableCaption,
+   TableCell,
+   TableFooter,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/miami/ui/table"
+
+const invoices = [
+   {
+      invoice: "INV001",
+      paymentStatus: "Paid",
+      totalAmount: "$250.00",
+      paymentMethod: "Credit Card",
+   },
+   {
+      invoice: "INV002",
+      paymentStatus: "Pending",
+      totalAmount: "$150.00",
+      paymentMethod: "PayPal",
+   },
+   {
+      invoice: "INV003",
+      paymentStatus: "Unpaid",
+      totalAmount: "$350.00",
+      paymentMethod: "Bank Transfer",
+   },
+   {
+      invoice: "INV004",
+      paymentStatus: "Paid",
+      totalAmount: "$450.00",
+      paymentMethod: "Credit Card",
+   },
+   {
+      invoice: "INV005",
+      paymentStatus: "Paid",
+      totalAmount: "$550.00",
+      paymentMethod: "PayPal",
+   },
+   {
+      invoice: "INV006",
+      paymentStatus: "Pending",
+      totalAmount: "$200.00",
+      paymentMethod: "Bank Transfer",
+   },
+   {
+      invoice: "INV007",
+      paymentStatus: "Unpaid",
+      totalAmount: "$300.00",
+      paymentMethod: "Credit Card",
+   },
+]
+
+export function TableDemo() {
+   return (
+      <Table>
+         <TableCaption>A list of your recent invoices.</TableCaption>
+         <TableHeader>
+            <TableRow>
+               <TableHead className="w-[100px]">Invoice</TableHead>
+               <TableHead>Status</TableHead>
+               <TableHead>Method</TableHead>
+               <TableHead className="text-right">Amount</TableHead>
+            </TableRow>
+         </TableHeader>
+         <TableBody>
+            {invoices.map((invoice) => (
+               <TableRow key={invoice.invoice}>
+                  <TableCell className="font-medium">
+                     {invoice.invoice}
+                  </TableCell>
+                  <TableCell>{invoice.paymentStatus}</TableCell>
+                  <TableCell>{invoice.paymentMethod}</TableCell>
+                  <TableCell className="text-right">
+                     {invoice.totalAmount}
+                  </TableCell>
+               </TableRow>
+            ))}
+         </TableBody>
+         <TableFooter>
+            <TableRow>
+               <TableCell colSpan={3}>Total</TableCell>
+               <TableCell className="text-right">$2,500.00</TableCell>
+            </TableRow>
+         </TableFooter>
+      </Table>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/tabs-demo.tsx b/apps/web/registry/default/internal/sink/components/tabs-demo.tsx
new file mode 100644
index 00000000..d852ccb6
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/tabs-demo.tsx
@@ -0,0 +1,76 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Tabs,
+   TabsContent,
+   TabsList,
+   TabsTrigger,
+} from "~/registry/miami/ui/tabs"
+
+export function TabsDemo() {
+   return (
+      <Tabs defaultValue="account" className="w-[400px]">
+         <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="account">Account</TabsTrigger>
+            <TabsTrigger value="password">Password</TabsTrigger>
+         </TabsList>
+         <TabsContent value="account">
+            <Card>
+               <CardHeader>
+                  <CardTitle>Account</CardTitle>
+                  <CardDescription>
+                     Make changes to your account here. Click save when you're
+                     done.
+                  </CardDescription>
+               </CardHeader>
+               <CardContent className="space-y-2">
+                  <div className="space-y-1">
+                     <Label htmlFor="name">Name</Label>
+                     <Input id="name" defaultValue="Pedro Duarte" />
+                  </div>
+                  <div className="space-y-1">
+                     <Label htmlFor="username">Username</Label>
+                     <Input id="username" defaultValue="@peduarte" />
+                  </div>
+               </CardContent>
+               <CardFooter>
+                  <Button>Save changes</Button>
+               </CardFooter>
+            </Card>
+         </TabsContent>
+         <TabsContent value="password">
+            <Card>
+               <CardHeader>
+                  <CardTitle>Password</CardTitle>
+                  <CardDescription>
+                     Change your password here. After saving, you'll be logged
+                     out.
+                  </CardDescription>
+               </CardHeader>
+               <CardContent className="space-y-2">
+                  <div className="space-y-1">
+                     <Label htmlFor="current">Current password</Label>
+                     <Input id="current" type="password" />
+                  </div>
+                  <div className="space-y-1">
+                     <Label htmlFor="new">New password</Label>
+                     <Input id="new" type="password" />
+                  </div>
+               </CardContent>
+               <CardFooter>
+                  <Button>Save password</Button>
+               </CardFooter>
+            </Card>
+         </TabsContent>
+      </Tabs>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/team-switcher.tsx b/apps/web/registry/default/internal/sink/components/team-switcher.tsx
new file mode 100644
index 00000000..3d5c4d29
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/team-switcher.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { ChevronsUpDown, Plus } from "lucide-react"
+import * as React from "react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function TeamSwitcher({
+   teams,
+}: {
+   teams: {
+      name: string
+      logo: React.ElementType
+      plan: string
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+   const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                        <activeTeam.logo className="size-4" />
+                     </div>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {activeTeam.name}
+                        </span>
+                        <span className="truncate text-xs">
+                           {activeTeam.plan}
+                        </span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  align="start"
+                  side={isMobile ? "bottom" : "right"}
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                     Teams
+                  </DropdownMenuLabel>
+                  {teams.map((team, index) => (
+                     <DropdownMenuItem
+                        key={team.name}
+                        onClick={() => setActiveTeam(team)}
+                        className="gap-2 p-2"
+                     >
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
+                           <team.logo className="size-4 shrink-0" />
+                        </div>
+                        {team.name}
+                        <DropdownMenuShortcut>
+                           ⌘{index + 1}
+                        </DropdownMenuShortcut>
+                     </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                     <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                        <Plus className="size-4" />
+                     </div>
+                     <div className="font-medium text-muted-foreground">
+                        Add team
+                     </div>
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/textarea-demo.tsx b/apps/web/registry/default/internal/sink/components/textarea-demo.tsx
new file mode 100644
index 00000000..3e1f84f2
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/textarea-demo.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "~/registry/miami/ui/textarea"
+
+export function TextareaDemo() {
+   return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/web/registry/default/internal/sink/components/toast-demo.tsx b/apps/web/registry/default/internal/sink/components/toast-demo.tsx
new file mode 100644
index 00000000..b49a50f5
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/toast-demo.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { useToast } from "~/registry/miami/hooks/use-toast"
+import { Button } from "~/registry/miami/ui/button"
+import { ToastAction } from "~/registry/miami/ui/toast"
+
+export function ToastDemo() {
+   const { toast } = useToast()
+
+   return (
+      <Button
+         variant="outline"
+         onClick={() => {
+            toast({
+               title: "Scheduled: Catch up ",
+               description: "Friday, February 10, 2023 at 5:57 PM",
+               action: (
+                  <ToastAction altText="Goto schedule to undo">
+                     Undo
+                  </ToastAction>
+               ),
+            })
+         }}
+      >
+         Add to calendar
+      </Button>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/toggle-demo.tsx b/apps/web/registry/default/internal/sink/components/toggle-demo.tsx
new file mode 100644
index 00000000..c2e7c0fd
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { Bold } from "lucide-react"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export function ToggleDemo() {
+   return (
+      <Toggle aria-label="Toggle italic">
+         <Bold className="h-4 w-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/toggle-disabled.tsx b/apps/web/registry/default/internal/sink/components/toggle-disabled.tsx
new file mode 100644
index 00000000..77d7a3f1
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { Underline } from "lucide-react"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export function ToggleDisabled() {
+   return (
+      <Toggle aria-label="Toggle italic" disabled>
+         <Underline className="h-4 w-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/toggle-group-demo.tsx b/apps/web/registry/default/internal/sink/components/toggle-group-demo.tsx
new file mode 100644
index 00000000..af9cbd68
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/toggle-group-demo.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
+
+export function ToggleGroupDemo() {
+   return (
+      <ToggleGroup type="multiple">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <Bold className="h-4 w-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <Italic className="h-4 w-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem
+            value="strikethrough"
+            aria-label="Toggle strikethrough"
+         >
+            <Underline className="h-4 w-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/toggle-outline.tsx b/apps/web/registry/default/internal/sink/components/toggle-outline.tsx
new file mode 100644
index 00000000..058746ba
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/toggle-outline.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export function ToggleOutline() {
+   return (
+      <Toggle variant="outline" aria-label="Toggle italic">
+         <Italic />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/toggle-with-text.tsx b/apps/web/registry/default/internal/sink/components/toggle-with-text.tsx
new file mode 100644
index 00000000..70bb6231
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export function ToggleWithText() {
+   return (
+      <Toggle aria-label="Toggle italic">
+         <Italic />
+         Italic
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/components/tooltip-demo.tsx b/apps/web/registry/default/internal/sink/components/tooltip-demo.tsx
new file mode 100644
index 00000000..dc74cb2f
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/components/tooltip-demo.tsx
@@ -0,0 +1,22 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/miami/ui/tooltip"
+
+export function TooltipDemo() {
+   return (
+      <TooltipProvider>
+         <Tooltip>
+            <TooltipTrigger asChild>
+               <Button variant="outline">Hover</Button>
+            </TooltipTrigger>
+            <TooltipContent>
+               <p>Add to library</p>
+            </TooltipContent>
+         </Tooltip>
+      </TooltipProvider>
+   )
+}
diff --git a/apps/web/registry/default/internal/sink/page.tsx b/apps/web/registry/default/internal/sink/page.tsx
new file mode 100644
index 00000000..a58f7aef
--- /dev/null
+++ b/apps/web/registry/default/internal/sink/page.tsx
@@ -0,0 +1,276 @@
+import { AccordionDemo } from "~/registry/miami/internal/sink/components/accordion-demo"
+import { AlertDemo } from "~/registry/miami/internal/sink/components/alert-demo"
+import { AlertDialogDemo } from "~/registry/miami/internal/sink/components/alert-dialog-demo"
+import { AppSidebar } from "~/registry/miami/internal/sink/components/app-sidebar"
+import { AspectRatioDemo } from "~/registry/miami/internal/sink/components/aspect-ratio-demo"
+import { AvatarDemo } from "~/registry/miami/internal/sink/components/avatar-demo"
+import { BadgeDemo } from "~/registry/miami/internal/sink/components/badge-demo"
+import { BadgeDestructive } from "~/registry/miami/internal/sink/components/badge-destructive"
+import { BadgeOutline } from "~/registry/miami/internal/sink/components/badge-outline"
+import { BadgeSecondary } from "~/registry/miami/internal/sink/components/badge-secondary"
+import { BreadcrumbDemo } from "~/registry/miami/internal/sink/components/breadcrumb-demo"
+import { ButtonDemo } from "~/registry/miami/internal/sink/components/button-demo"
+import { ButtonDestructive } from "~/registry/miami/internal/sink/components/button-destructive"
+import { ButtonGhost } from "~/registry/miami/internal/sink/components/button-ghost"
+import { ButtonLink } from "~/registry/miami/internal/sink/components/button-link"
+import { ButtonLoading } from "~/registry/miami/internal/sink/components/button-loading"
+import { ButtonOutline } from "~/registry/miami/internal/sink/components/button-outline"
+import { ButtonSecondary } from "~/registry/miami/internal/sink/components/button-secondary"
+import { ButtonWithIcon } from "~/registry/miami/internal/sink/components/button-with-icon"
+import { CalendarDemo } from "~/registry/miami/internal/sink/components/calendar-demo"
+import { CardDemo } from "~/registry/miami/internal/sink/components/card-demo"
+import { CarouselDemo } from "~/registry/miami/internal/sink/components/carousel-demo"
+import { CheckboxDemo } from "~/registry/miami/internal/sink/components/checkbox-demo"
+import { CollapsibleDemo } from "~/registry/miami/internal/sink/components/collapsible-demo"
+import { ComboboxDemo } from "~/registry/miami/internal/sink/components/combobox-demo"
+import { CommandDemo } from "~/registry/miami/internal/sink/components/command-demo"
+import { ComponentWrapper } from "~/registry/miami/internal/sink/components/component-wrapper"
+import { ContextMenuDemo } from "~/registry/miami/internal/sink/components/context-menu-demo"
+import { DatePickerDemo } from "~/registry/miami/internal/sink/components/date-picker-demo"
+import { DialogDemo } from "~/registry/miami/internal/sink/components/dialog-demo"
+import { DrawerDemo } from "~/registry/miami/internal/sink/components/drawer-demo"
+import { DropdownMenuDemo } from "~/registry/miami/internal/sink/components/dropdown-menu-demo"
+import { HoverCardDemo } from "~/registry/miami/internal/sink/components/hover-card-demo"
+import { InputDemo } from "~/registry/miami/internal/sink/components/input-demo"
+import { InputOTPDemo } from "~/registry/miami/internal/sink/components/input-otp-demo"
+import { LabelDemo } from "~/registry/miami/internal/sink/components/label-demo"
+import { MenubarDemo } from "~/registry/miami/internal/sink/components/menubar-demo"
+import { NavigationMenuDemo } from "~/registry/miami/internal/sink/components/navigation-menu-demo"
+import { PaginationDemo } from "~/registry/miami/internal/sink/components/pagination-demo"
+import { PopoverDemo } from "~/registry/miami/internal/sink/components/popover-demo"
+import { ProgressDemo } from "~/registry/miami/internal/sink/components/progress-demo"
+import { RadioGroupDemo } from "~/registry/miami/internal/sink/components/radio-group-demo"
+import { ResizableHandleDemo } from "~/registry/miami/internal/sink/components/resizable-handle"
+import { ScrollAreaDemo } from "~/registry/miami/internal/sink/components/scroll-area-demo"
+import { SelectDemo } from "~/registry/miami/internal/sink/components/select-demo"
+import { SeparatorDemo } from "~/registry/miami/internal/sink/components/separator-demo"
+import { SheetDemo } from "~/registry/miami/internal/sink/components/sheet-demo"
+import { SkeletonDemo } from "~/registry/miami/internal/sink/components/skeleton-demo"
+import { SliderDemo } from "~/registry/miami/internal/sink/components/slider-demo"
+import { SonnerDemo } from "~/registry/miami/internal/sink/components/sonner-demo"
+import { SwitchDemo } from "~/registry/miami/internal/sink/components/switch-demo"
+import { TableDemo } from "~/registry/miami/internal/sink/components/table-demo"
+import { TabsDemo } from "~/registry/miami/internal/sink/components/tabs-demo"
+import { TextareaDemo } from "~/registry/miami/internal/sink/components/textarea-demo"
+import { ToastDemo } from "~/registry/miami/internal/sink/components/toast-demo"
+import { ToggleDemo } from "~/registry/miami/internal/sink/components/toggle-demo"
+import { ToggleDisabled } from "~/registry/miami/internal/sink/components/toggle-disabled"
+import { ToggleGroupDemo } from "~/registry/miami/internal/sink/components/toggle-group-demo"
+import { ToggleOutline } from "~/registry/miami/internal/sink/components/toggle-outline"
+import { ToggleWithText } from "~/registry/miami/internal/sink/components/toggle-with-text"
+import { TooltipDemo } from "~/registry/miami/internal/sink/components/tooltip-demo"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function SinkPage() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <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">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  <ComponentWrapper name="Accordion">
+                     <AccordionDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Alert">
+                     <AlertDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="AlertDialog">
+                     <AlertDialogDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="AspectRatio">
+                     <AspectRatioDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Avatar">
+                     <AvatarDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Badge">
+                     <BadgeDemo />
+                     <BadgeDestructive />
+                     <BadgeOutline />
+                     <BadgeSecondary />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Breadcrumb">
+                     <BreadcrumbDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Button">
+                     <div className="flex items-center gap-2">
+                        <ButtonDemo />
+                        <ButtonDestructive />
+                        <ButtonGhost />
+                        <ButtonLink />
+                     </div>
+                     <div className="flex items-center gap-2">
+                        <ButtonLoading />
+                        <ButtonOutline />
+                        <ButtonSecondary />
+                     </div>
+                     <div className="flex items-center gap-2">
+                        <ButtonWithIcon />
+                     </div>
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Calendar">
+                     <CalendarDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Card">
+                     <CardDemo className="w-full" />
+                  </ComponentWrapper>
+                  <ComponentWrapper
+                     name="Carousel"
+                     className="[&_.max-w-xs]:max-w-[70%]"
+                  >
+                     <CarouselDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Checkbox">
+                     <CheckboxDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Collapsible">
+                     <CollapsibleDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Combobox">
+                     <ComboboxDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper
+                     name="Command"
+                     className="[&_[cmdk-root]]:md:min-w-max"
+                  >
+                     <CommandDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="ContextMenu">
+                     <ContextMenuDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="DatePicker">
+                     <DatePickerDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Dialog">
+                     <DialogDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Drawer">
+                     <DrawerDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="DropdownMenu">
+                     <DropdownMenuDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="HoverCard">
+                     <HoverCardDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Input">
+                     <InputDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="InputOTP">
+                     <InputOTPDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Label">
+                     <LabelDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Menubar">
+                     <MenubarDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper
+                     name="NavigationMenu"
+                     className="col-span-2"
+                  >
+                     <NavigationMenuDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Pagination">
+                     <PaginationDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Popover">
+                     <PopoverDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Progress">
+                     <ProgressDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="RadioGroup">
+                     <RadioGroupDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Resizable" className="col-span-2">
+                     <ResizableHandleDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="ScrollArea">
+                     <ScrollAreaDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Select">
+                     <SelectDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Separator">
+                     <SeparatorDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Sheet">
+                     <SheetDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Skeleton">
+                     <SkeletonDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Slider">
+                     <SliderDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Sonner">
+                     <SonnerDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Switch">
+                     <SwitchDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Table" className="col-span-2">
+                     <TableDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Tabs">
+                     <TabsDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Textarea">
+                     <TextareaDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Toast">
+                     <ToastDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Toggle">
+                     <div className="flex items-center gap-2">
+                        <ToggleDemo />
+                        <ToggleDisabled />
+                        <ToggleOutline />
+                        <ToggleWithText />
+                     </div>
+                  </ComponentWrapper>
+                  <ComponentWrapper name="ToggleGroup">
+                     <ToggleGroupDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Tooltip">
+                     <TooltipDemo />
+                  </ComponentWrapper>
+               </div>
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/default/lib/utils.ts b/apps/web/registry/default/lib/utils.ts
index 07259d12..9c376563 100644
--- a/apps/web/registry/default/lib/utils.ts
+++ b/apps/web/registry/default/lib/utils.ts
@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
 
 export function ny(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs))
diff --git a/apps/web/registry/default/ui/accordion.tsx b/apps/web/registry/default/ui/accordion.tsx
index 1ec0bef8..ca10f610 100644
--- a/apps/web/registry/default/ui/accordion.tsx
+++ b/apps/web/registry/default/ui/accordion.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ChevronDown } from 'lucide-react'
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Accordion = AccordionPrimitive.Root
 
@@ -14,11 +14,11 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <AccordionPrimitive.Item
       ref={ref}
-      className={ny('border-b', className)}
+      className={ny("border-b", className)}
       {...props}
    />
 ))
-AccordionItem.displayName = 'AccordionItem'
+AccordionItem.displayName = "AccordionItem"
 
 const AccordionTrigger = React.forwardRef<
    React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
       <AccordionPrimitive.Trigger
          ref={ref}
          className={ny(
-            'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+            "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
             className,
          )}
          {...props}
@@ -49,7 +49,7 @@ const AccordionContent = React.forwardRef<
       className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
       {...props}
    >
-      <div className={ny('pb-4 pt-0', className)}>{children}</div>
+      <div className={ny("pb-4 pt-0", className)}>{children}</div>
    </AccordionPrimitive.Content>
 ))
 
diff --git a/apps/web/registry/default/ui/alert-dialog.tsx b/apps/web/registry/default/ui/alert-dialog.tsx
index 275d93f5..a9aa9665 100644
--- a/apps/web/registry/default/ui/alert-dialog.tsx
+++ b/apps/web/registry/default/ui/alert-dialog.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
-import type { VariantProps } from 'class-variance-authority'
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import type { VariantProps } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { buttonVariants } from '~/registry/default/ui/button'
+import { ny } from "~/lib/utils"
+import { buttonVariants } from "~/registry/default/ui/button"
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -19,7 +19,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <AlertDialogPrimitive.Overlay
       className={ny(
-         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
+         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
          className,
       )}
       {...props}
@@ -37,7 +37,7 @@ const AlertDialogContent = React.forwardRef<
       <AlertDialogPrimitive.Content
          ref={ref}
          className={ny(
-            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
             className,
          )}
          {...props}
@@ -53,14 +53,14 @@ function AlertDialogHeader({
    return (
       <div
          className={ny(
-            'flex flex-col space-y-2 text-center sm:text-left',
+            "flex flex-col space-y-2 text-center sm:text-left",
             className,
          )}
          {...props}
       />
    )
 }
-AlertDialogHeader.displayName = 'AlertDialogHeader'
+AlertDialogHeader.displayName = "AlertDialogHeader"
 
 function AlertDialogFooter({
    className,
@@ -69,14 +69,14 @@ function AlertDialogFooter({
    return (
       <div
          className={ny(
-            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
             className,
          )}
          {...props}
       />
    )
 }
-AlertDialogFooter.displayName = 'AlertDialogFooter'
+AlertDialogFooter.displayName = "AlertDialogFooter"
 
 const AlertDialogTitle = React.forwardRef<
    React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -84,7 +84,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <AlertDialogPrimitive.Title
       ref={ref}
-      className={ny('text-lg font-semibold', className)}
+      className={ny("text-lg font-semibold", className)}
       {...props}
    />
 ))
@@ -96,17 +96,17 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <AlertDialogPrimitive.Description
       ref={ref}
-      className={ny('text-muted-foreground text-sm', className)}
+      className={ny("text-muted-foreground text-sm", className)}
       {...props}
    />
 ))
-AlertDialogDescription.displayName
-  = AlertDialogPrimitive.Description.displayName
+AlertDialogDescription.displayName =
+   AlertDialogPrimitive.Description.displayName
 
 const AlertDialogAction = React.forwardRef<
    React.ElementRef<typeof AlertDialogPrimitive.Action>,
    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &
-   VariantProps<typeof buttonVariants>
+      VariantProps<typeof buttonVariants>
 >(({ className, variant, size, ...props }, ref) => (
    <AlertDialogPrimitive.Action
       ref={ref}
@@ -119,11 +119,15 @@ AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
 const AlertDialogCancel = React.forwardRef<
    React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &
-   VariantProps<typeof buttonVariants>
->(({ className, variant = 'outline', size, ...props }, ref) => (
+      VariantProps<typeof buttonVariants>
+>(({ className, variant = "outline", size, ...props }, ref) => (
    <AlertDialogPrimitive.Cancel
       ref={ref}
-      className={ny(buttonVariants({ variant, size }), 'mt-2 sm:mt-0', className)}
+      className={ny(
+         buttonVariants({ variant, size }),
+         "mt-2 sm:mt-0",
+         className,
+      )}
       {...props}
    />
 ))
diff --git a/apps/web/registry/default/ui/alert.tsx b/apps/web/registry/default/ui/alert.tsx
index 41961877..f78a63f7 100644
--- a/apps/web/registry/default/ui/alert.tsx
+++ b/apps/web/registry/default/ui/alert.tsx
@@ -1,27 +1,27 @@
-import * as React from 'react'
-import { type VariantProps, cva } from 'class-variance-authority'
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const alertVariants = cva(
-   'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
    {
       variants: {
          variant: {
-            default: 'bg-background text-foreground',
+            default: "bg-background text-foreground",
             destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+               "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
          },
       },
       defaultVariants: {
-         variant: 'default',
+         variant: "default",
       },
    },
 )
 
 const Alert = React.forwardRef<
    HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
    <div
       ref={ref}
@@ -30,7 +30,7 @@ const Alert = React.forwardRef<
       {...props}
    />
 ))
-Alert.displayName = 'Alert'
+Alert.displayName = "Alert"
 
 const AlertTitle = React.forwardRef<
    HTMLParagraphElement,
@@ -38,11 +38,11 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <h5
       ref={ref}
-      className={ny('mb-1 font-medium leading-none tracking-tight', className)}
+      className={ny("mb-1 font-medium leading-none tracking-tight", className)}
       {...props}
    />
 ))
-AlertTitle.displayName = 'AlertTitle'
+AlertTitle.displayName = "AlertTitle"
 
 const AlertDescription = React.forwardRef<
    HTMLParagraphElement,
@@ -50,10 +50,10 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <div
       ref={ref}
-      className={ny('text-sm [&_p]:leading-relaxed', className)}
+      className={ny("text-sm [&_p]:leading-relaxed", className)}
       {...props}
    />
 ))
-AlertDescription.displayName = 'AlertDescription'
+AlertDescription.displayName = "AlertDescription"
 
 export { Alert, AlertTitle, AlertDescription }
diff --git a/apps/web/registry/default/ui/animated-beam.tsx b/apps/web/registry/default/ui/animated-beam.tsx
index 49a1f661..75154646 100644
--- a/apps/web/registry/default/ui/animated-beam.tsx
+++ b/apps/web/registry/default/ui/animated-beam.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { motion } from 'framer-motion'
-import type { RefObject } from 'react'
-import { useEffect, useId, useState } from 'react'
-import { ny } from '~/lib/utils'
+import { motion } from "framer-motion"
+import type { RefObject } from "react"
+import { useEffect, useId, useState } from "react"
+import { ny } from "~/lib/utils"
 
 export interface AnimatedBeamProps {
    className?: string
@@ -34,34 +34,34 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
    reverse = false, // Include the reverse prop
    duration = Math.random() * 3 + 4,
    delay = 0,
-   pathColor = 'gray',
+   pathColor = "gray",
    pathWidth = 2,
    pathOpacity = 0.2,
-   gradientStartColor = '#ffaa40',
-   gradientStopColor = '#9c40ff',
+   gradientStartColor = "#ffaa40",
+   gradientStopColor = "#9c40ff",
    startXOffset = 0,
    startYOffset = 0,
    endXOffset = 0,
    endYOffset = 0,
 }) => {
    const id = useId()
-   const [pathD, setPathD] = useState('')
+   const [pathD, setPathD] = useState("")
    const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 })
 
    // Calculate the gradient coordinates based on the reverse prop
    const gradientCoordinates = reverse
       ? {
-            x1: ['90%', '-10%'],
-            x2: ['100%', '0%'],
-            y1: ['0%', '0%'],
-            y2: ['0%', '0%'],
-         }
+           x1: ["90%", "-10%"],
+           x2: ["100%", "0%"],
+           y1: ["0%", "0%"],
+           y2: ["0%", "0%"],
+        }
       : {
-            x1: ['10%', '110%'],
-            x2: ['0%', '100%'],
-            y1: ['0%', '0%'],
-            y2: ['0%', '0%'],
-         }
+           x1: ["10%", "110%"],
+           x2: ["0%", "100%"],
+           y1: ["0%", "0%"],
+           y2: ["0%", "0%"],
+        }
 
    useEffect(() => {
       const updatePath = () => {
@@ -74,32 +74,31 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
             const svgHeight = containerRect.height
             setSvgDimensions({ width: svgWidth, height: svgHeight })
 
-            const startX
-          = rectA.left - containerRect.left + rectA.width / 2 + startXOffset
-            const startY
-          = rectA.top - containerRect.top + rectA.height / 2 + startYOffset
-            const endX
-          = rectB.left - containerRect.left + rectB.width / 2 + endXOffset
-            const endY
-          = rectB.top - containerRect.top + rectB.height / 2 + endYOffset
+            const startX =
+               rectA.left - containerRect.left + rectA.width / 2 + startXOffset
+            const startY =
+               rectA.top - containerRect.top + rectA.height / 2 + startYOffset
+            const endX =
+               rectB.left - containerRect.left + rectB.width / 2 + endXOffset
+            const endY =
+               rectB.top - containerRect.top + rectB.height / 2 + endYOffset
 
             const controlY = startY - curvature
             const d = `M ${startX},${startY} Q ${
-          (startX + endX) / 2
-        },${controlY} ${endX},${endY}`
+               (startX + endX) / 2
+            },${controlY} ${endX},${endY}`
             setPathD(d)
          }
       }
 
       // Initialize ResizeObserver
       const resizeObserver = new ResizeObserver((entries) => {
-      // For all entries, recalculate the path
+         // For all entries, recalculate the path
          for (const entry of entries) updatePath()
       })
 
       // Observe the container element
-      if (containerRef.current)
-         resizeObserver.observe(containerRef.current)
+      if (containerRef.current) resizeObserver.observe(containerRef.current)
 
       // Call the updatePath initially to set the initial path
       updatePath()
@@ -126,7 +125,7 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
          height={svgDimensions.height}
          xmlns="http://www.w3.org/2000/svg"
          className={ny(
-            'pointer-events-none absolute left-0 top-0 transform-gpu stroke-2',
+            "pointer-events-none absolute left-0 top-0 transform-gpu stroke-2",
             className,
          )}
          viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
@@ -151,10 +150,10 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
                id={id}
                gradientUnits="userSpaceOnUse"
                initial={{
-                  x1: '0%',
-                  x2: '0%',
-                  y1: '0%',
-                  y2: '0%',
+                  x1: "0%",
+                  x2: "0%",
+                  y1: "0%",
+                  y2: "0%",
                }}
                animate={{
                   x1: gradientCoordinates.x1,
@@ -166,7 +165,7 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
                   delay,
                   duration,
                   ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo
-                  repeat: Infinity,
+                  repeat: Number.POSITIVE_INFINITY,
                   repeatDelay: 0,
                }}
             >
@@ -177,8 +176,7 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
                   offset="100%"
                   stopColor={gradientStopColor}
                   stopOpacity="0"
-               >
-               </stop>
+               ></stop>
             </motion.linearGradient>
          </defs>
       </svg>
diff --git a/apps/web/registry/default/ui/animated-circular-progress-bar.tsx b/apps/web/registry/default/ui/animated-circular-progress-bar.tsx
index 4c080aa5..fb910424 100644
--- a/apps/web/registry/default/ui/animated-circular-progress-bar.tsx
+++ b/apps/web/registry/default/ui/animated-circular-progress-bar.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface Props {
    max: number
@@ -23,19 +23,19 @@ export default function AnimatedCircularProgressBar({
 
    return (
       <div
-         className={ny('relative size-40 text-2xl font-semibold', className)}
+         className={ny("relative size-40 text-2xl font-semibold", className)}
          style={
             {
-               '--circle-size': '100px',
-               '--circumference': circumference,
-               '--percent-to-px': `${percentPx}px`,
-               '--gap-percent': '5',
-               '--offset-factor': '0',
-               '--transition-length': '1s',
-               '--transition-step': '200ms',
-               '--delay': '0s',
-               '--percent-to-deg': '3.6deg',
-               'transform': 'translateZ(0)',
+               "--circle-size": "100px",
+               "--circumference": circumference,
+               "--percent-to-px": `${percentPx}px`,
+               "--gap-percent": "5",
+               "--offset-factor": "0",
+               "--transition-length": "1s",
+               "--transition-step": "200ms",
+               "--delay": "0s",
+               "--percent-to-deg": "3.6deg",
+               transform: "translateZ(0)",
             } as React.CSSProperties
          }
       >
@@ -57,16 +57,18 @@ export default function AnimatedCircularProgressBar({
                   className=" opacity-100"
                   style={
                      {
-                        'stroke': gaugeSecondaryColor,
-                        '--stroke-percent': 90 - currentPercent,
-                        '--offset-factor-secondary': 'calc(1 - var(--offset-factor))',
-                        'strokeDasharray':
-                  'calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)',
-                        'transform':
-                  'rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)',
-                        'transition': 'all var(--transition-length) ease var(--delay)',
-                        'transformOrigin':
-                  'calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)',
+                        stroke: gaugeSecondaryColor,
+                        "--stroke-percent": 90 - currentPercent,
+                        "--offset-factor-secondary":
+                           "calc(1 - var(--offset-factor))",
+                        strokeDasharray:
+                           "calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
+                        transform:
+                           "rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)",
+                        transition:
+                           "all var(--transition-length) ease var(--delay)",
+                        transformOrigin:
+                           "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
                      } as React.CSSProperties
                   }
                />
@@ -82,17 +84,17 @@ export default function AnimatedCircularProgressBar({
                className="opacity-100"
                style={
                   {
-                     'stroke': gaugePrimaryColor,
-                     '--stroke-percent': currentPercent,
-                     'strokeDasharray':
-                'calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)',
-                     'transition':
-                'var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)',
-                     'transitionProperty': 'stroke-dasharray,transform',
-                     'transform':
-                'rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))',
-                     'transformOrigin':
-                'calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)',
+                     stroke: gaugePrimaryColor,
+                     "--stroke-percent": currentPercent,
+                     strokeDasharray:
+                        "calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
+                     transition:
+                        "var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)",
+                     transitionProperty: "stroke-dasharray,transform",
+                     transform:
+                        "rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))",
+                     transformOrigin:
+                        "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
                   } as React.CSSProperties
                }
             />
diff --git a/apps/web/registry/default/ui/animated-gradient-text.tsx b/apps/web/registry/default/ui/animated-gradient-text.tsx
index a1679a9f..9529277b 100644
--- a/apps/web/registry/default/ui/animated-gradient-text.tsx
+++ b/apps/web/registry/default/ui/animated-gradient-text.tsx
@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react'
-import { ny } from '~/lib/utils'
+import type { ReactNode } from "react"
+import { ny } from "~/lib/utils"
 
 export default function AnimatedGradientText({
    children,
@@ -11,7 +11,7 @@ export default function AnimatedGradientText({
    return (
       <div
          className={ny(
-            'group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40',
+            "group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40",
             className,
          )}
       >
diff --git a/apps/web/registry/default/ui/animated-grid-pattern.tsx b/apps/web/registry/default/ui/animated-grid-pattern.tsx
index 50d3bd40..64294c83 100644
--- a/apps/web/registry/default/ui/animated-grid-pattern.tsx
+++ b/apps/web/registry/default/ui/animated-grid-pattern.tsx
@@ -1,23 +1,30 @@
-'use client'
+"use client"
 
-import { motion } from 'framer-motion'
-import { useEffect, useId, useRef, useState } from 'react'
-import { ny } from '~/lib/utils'
+import { motion } from "motion/react"
+import {
+   type ComponentPropsWithoutRef,
+   useEffect,
+   useId,
+   useRef,
+   useState,
+} from "react"
 
-interface GridPatternProps {
+import { ny } from "~/registry/default/lib/utils"
+
+export interface AnimatedGridPatternProps
+   extends ComponentPropsWithoutRef<"svg"> {
    width?: number
    height?: number
    x?: number
    y?: number
    strokeDasharray?: any
    numSquares?: number
-   className?: string
    maxOpacity?: number
    duration?: number
    repeatDelay?: number
 }
 
-export function GridPattern({
+export function AnimatedGridPattern({
    width = 40,
    height = 40,
    x = -1,
@@ -29,7 +36,7 @@ export function GridPattern({
    duration = 4,
    repeatDelay = 0.5,
    ...props
-}: GridPatternProps) {
+}: AnimatedGridPatternProps) {
    const id = useId()
    const containerRef = useRef(null)
    const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
@@ -52,13 +59,13 @@ export function GridPattern({
 
    // Function to update a single square's position
    const updateSquarePosition = (id: number) => {
-      setSquares(currentSquares =>
-         currentSquares.map(sq =>
+      setSquares((currentSquares) =>
+         currentSquares.map((sq) =>
             sq.id === id
                ? {
-                     ...sq,
-                     pos: getPos(),
-                  }
+                    ...sq,
+                    pos: getPos(),
+                 }
                : sq,
          ),
       )
@@ -66,8 +73,9 @@ export function GridPattern({
 
    // Update squares to animate in
    useEffect(() => {
-      if (dimensions.width && dimensions.height)
+      if (dimensions.width && dimensions.height) {
          setSquares(generateSquares(numSquares))
+      }
    }, [dimensions, numSquares])
 
    // Resize observer to update container dimensions
@@ -81,12 +89,14 @@ export function GridPattern({
          }
       })
 
-      if (containerRef.current)
+      if (containerRef.current) {
          resizeObserver.observe(containerRef.current)
+      }
 
       return () => {
-         if (containerRef.current)
+         if (containerRef.current) {
             resizeObserver.unobserve(containerRef.current)
+         }
       }
    }, [containerRef])
 
@@ -95,7 +105,7 @@ export function GridPattern({
          ref={containerRef}
          aria-hidden="true"
          className={ny(
-            'pointer-events-none absolute inset-0 size-full fill-gray-400/30 stroke-gray-400/30',
+            "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
             className,
          )}
          {...props}
@@ -126,7 +136,7 @@ export function GridPattern({
                      duration,
                      repeat: 1,
                      delay: index * 0.1,
-                     repeatType: 'reverse',
+                     repeatType: "reverse",
                   }}
                   onAnimationComplete={() => updateSquarePosition(id)}
                   key={`${x}-${y}-${index}`}
@@ -142,5 +152,3 @@ export function GridPattern({
       </svg>
    )
 }
-
-export default GridPattern
diff --git a/apps/web/registry/default/ui/animated-list.tsx b/apps/web/registry/default/ui/animated-list.tsx
index 0eb38caf..1c893a44 100644
--- a/apps/web/registry/default/ui/animated-list.tsx
+++ b/apps/web/registry/default/ui/animated-list.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { AnimatePresence, motion } from 'framer-motion'
-import type { ReactElement } from 'react'
-import React, { useEffect, useMemo, useState } from 'react'
+import { AnimatePresence, motion } from "framer-motion"
+import type { ReactElement } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 
 export const AnimatedList = React.memo(
    ({
@@ -19,7 +19,7 @@ export const AnimatedList = React.memo(
 
       useEffect(() => {
          const interval = setInterval(() => {
-            setIndex(prevIndex => (prevIndex + 1) % childrenArray.length)
+            setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)
          }, delay)
 
          return () => clearInterval(interval)
@@ -33,7 +33,7 @@ export const AnimatedList = React.memo(
       return (
          <div className={`flex flex-col items-center gap-4 ${className}`}>
             <AnimatePresence>
-               {itemsToShow.map(item => (
+               {itemsToShow.map((item) => (
                   <AnimatedListItem key={(item as ReactElement).key}>
                      {item}
                   </AnimatedListItem>
@@ -44,14 +44,14 @@ export const AnimatedList = React.memo(
    },
 )
 
-AnimatedList.displayName = 'AnimatedList'
+AnimatedList.displayName = "AnimatedList"
 
 export function AnimatedListItem({ children }: { children: React.ReactNode }) {
    const animations = {
       initial: { scale: 0, opacity: 0 },
       animate: { scale: 1, opacity: 1, originY: 0 },
       exit: { scale: 0, opacity: 0 },
-      transition: { type: 'spring', stiffness: 350, damping: 40 },
+      transition: { type: "spring", stiffness: 350, damping: 40 },
    }
 
    return (
diff --git a/apps/web/registry/default/ui/animated-shiny-text.tsx b/apps/web/registry/default/ui/animated-shiny-text.tsx
index fdad1d12..dfab5c00 100644
--- a/apps/web/registry/default/ui/animated-shiny-text.tsx
+++ b/apps/web/registry/default/ui/animated-shiny-text.tsx
@@ -1,5 +1,5 @@
-import type { CSSProperties, FC, ReactNode } from 'react'
-import { ny } from '~/lib/utils'
+import type { CSSProperties, FC, ReactNode } from "react"
+import { ny } from "~/lib/utils"
 
 interface AnimatedShinyTextProps {
    children: ReactNode
@@ -16,17 +16,17 @@ const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
       <p
          style={
             {
-               '--shimmer-width': `${shimmerWidth}px`,
+               "--shimmer-width": `${shimmerWidth}px`,
             } as CSSProperties
          }
          className={ny(
-            'mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50 ',
+            "mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50 ",
 
             // Shimmer effect
-            'animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]',
+            "animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
 
             // Shimmer gradient
-            'bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80',
+            "bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80",
 
             className,
          )}
diff --git a/apps/web/registry/default/ui/animated-subscribe-button.tsx b/apps/web/registry/default/ui/animated-subscribe-button.tsx
index 4118ccc5..1db72de8 100644
--- a/apps/web/registry/default/ui/animated-subscribe-button.tsx
+++ b/apps/web/registry/default/ui/animated-subscribe-button.tsx
@@ -1,7 +1,8 @@
-'use client'
+"use client"
 
-import { AnimatePresence, motion } from 'framer-motion'
-import React, { useState } from 'react'
+import { AnimatePresence, motion } from "framer-motion"
+import type React from "react"
+import { useState } from "react"
 
 interface AnimatedSubscribeButtonProps {
    buttonColor: string
@@ -24,45 +25,43 @@ export const AnimatedSubscribeButton: React.FC<
 
    return (
       <AnimatePresence mode="wait">
-         {isSubscribed
-            ? (
-                  <motion.button
-                     className="relative flex h-[46px] w-[200px] items-center justify-center overflow-hidden rounded-md bg-white p-[10px] outline outline-1 outline-black"
-                     onClick={() => setIsSubscribed(false)}
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                  >
-                     <motion.span
-                        key="action"
-                        className="relative block size-full font-semibold"
-                        initial={{ y: -50 }}
-                        animate={{ y: 0 }}
-                        style={{ color: buttonColor }}
-                     >
-                        {changeText}
-                     </motion.span>
-                  </motion.button>
-               )
-            : (
-                  <motion.button
-                     className="relative flex w-[200px] cursor-pointer items-center justify-center rounded-md border-none p-[10px]"
-                     style={{ backgroundColor: buttonColor, color: buttonTextColor }}
-                     onClick={() => setIsSubscribed(true)}
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                  >
-                     <motion.span
-                        key="reaction"
-                        className="relative block font-semibold"
-                        initial={{ x: 0 }}
-                        exit={{ x: 50, transition: { duration: 0.1 } }}
-                     >
-                        {initialText}
-                     </motion.span>
-                  </motion.button>
-               )}
+         {isSubscribed ? (
+            <motion.button
+               className="relative flex h-[46px] w-[200px] items-center justify-center overflow-hidden rounded-md bg-white p-[10px] outline outline-1 outline-black"
+               onClick={() => setIsSubscribed(false)}
+               initial={{ opacity: 0 }}
+               animate={{ opacity: 1 }}
+               exit={{ opacity: 0 }}
+            >
+               <motion.span
+                  key="action"
+                  className="relative block size-full font-semibold"
+                  initial={{ y: -50 }}
+                  animate={{ y: 0 }}
+                  style={{ color: buttonColor }}
+               >
+                  {changeText}
+               </motion.span>
+            </motion.button>
+         ) : (
+            <motion.button
+               className="relative flex w-[200px] cursor-pointer items-center justify-center rounded-md border-none p-[10px]"
+               style={{ backgroundColor: buttonColor, color: buttonTextColor }}
+               onClick={() => setIsSubscribed(true)}
+               initial={{ opacity: 0 }}
+               animate={{ opacity: 1 }}
+               exit={{ opacity: 0 }}
+            >
+               <motion.span
+                  key="reaction"
+                  className="relative block font-semibold"
+                  initial={{ x: 0 }}
+                  exit={{ x: 50, transition: { duration: 0.1 } }}
+               >
+                  {initialText}
+               </motion.span>
+            </motion.button>
+         )}
       </AnimatePresence>
    )
 }
diff --git a/apps/web/registry/default/ui/aspect-ratio.tsx b/apps/web/registry/default/ui/aspect-ratio.tsx
index 794c6f4c..d6a5226f 100644
--- a/apps/web/registry/default/ui/aspect-ratio.tsx
+++ b/apps/web/registry/default/ui/aspect-ratio.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
 
 const AspectRatio = AspectRatioPrimitive.Root
 
diff --git a/apps/web/registry/default/ui/aurora-text.tsx b/apps/web/registry/default/ui/aurora-text.tsx
new file mode 100644
index 00000000..8f172dd6
--- /dev/null
+++ b/apps/web/registry/default/ui/aurora-text.tsx
@@ -0,0 +1,34 @@
+import { type MotionProps, motion } from "motion/react"
+import type React from "react"
+import { ny } from "~/registry/default/lib/utils"
+
+interface AuroraTextProps
+   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps> {
+   className?: string
+   children: React.ReactNode
+   as?: React.ElementType
+}
+
+export function AuroraText({
+   className,
+   children,
+   as: Component = "span",
+   ...props
+}: AuroraTextProps) {
+   const MotionComponent = motion.create(Component)
+
+   return (
+      <MotionComponent
+         className={ny("relative inline-flex overflow-hidden", className)}
+         {...props}
+      >
+         {children}
+         <span className="pointer-events-none absolute inset-0 mix-blend-lighten dark:mix-blend-darken">
+            <span className="pointer-events-none absolute -top-1/2 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-1_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-1))] mix-blend-overlay blur-[1rem]"></span>
+            <span className="pointer-events-none absolute right-0 top-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-2_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-2))] mix-blend-overlay blur-[1rem]"></span>
+            <span className="pointer-events-none absolute bottom-0 left-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-3_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-3))] mix-blend-overlay blur-[1rem]"></span>
+            <span className="pointer-events-none absolute -bottom-1/2 right-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-4_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-4))] mix-blend-overlay blur-[1rem]"></span>
+         </span>
+      </MotionComponent>
+   )
+}
diff --git a/apps/web/registry/default/ui/avatar-circles.tsx b/apps/web/registry/default/ui/avatar-circles.tsx
index b88e7d30..244116c1 100644
--- a/apps/web/registry/default/ui/avatar-circles.tsx
+++ b/apps/web/registry/default/ui/avatar-circles.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import React from 'react'
-import { ny } from '~/lib/utils'
+import React from "react"
+import { ny } from "~/lib/utils"
 
 interface AvatarCirclesProps {
    className?: string
@@ -15,7 +15,9 @@ function AvatarCircles({
    avatarUrls,
 }: AvatarCirclesProps) {
    return (
-      <div className={ny('z-10 flex -space-x-4 rtl:space-x-reverse', className)}>
+      <div
+         className={ny("z-10 flex -space-x-4 rtl:space-x-reverse", className)}
+      >
          {avatarUrls.map((url, index) => (
             <img
                key={index}
@@ -30,8 +32,7 @@ function AvatarCircles({
             className="flex size-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black"
             href=""
          >
-            +
-            {numPeople}
+            +{numPeople}
          </a>
       </div>
    )
diff --git a/apps/web/registry/default/ui/avatar.tsx b/apps/web/registry/default/ui/avatar.tsx
index 1f427197..bc20d8cc 100644
--- a/apps/web/registry/default/ui/avatar.tsx
+++ b/apps/web/registry/default/ui/avatar.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Avatar = React.forwardRef<
    React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -12,7 +12,7 @@ const Avatar = React.forwardRef<
    <AvatarPrimitive.Root
       ref={ref}
       className={ny(
-         'relative flex size-10 shrink-0 overflow-hidden rounded-full',
+         "relative flex size-10 shrink-0 overflow-hidden rounded-full",
          className,
       )}
       {...props}
@@ -26,7 +26,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <AvatarPrimitive.Image
       ref={ref}
-      className={ny('aspect-square size-full', className)}
+      className={ny("aspect-square size-full", className)}
       {...props}
    />
 ))
@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
    <AvatarPrimitive.Fallback
       ref={ref}
       className={ny(
-         'bg-muted flex size-full items-center justify-center rounded-full',
+         "bg-muted flex size-full items-center justify-center rounded-full",
          className,
       )}
       {...props}
diff --git a/apps/web/registry/default/ui/badge.tsx b/apps/web/registry/default/ui/badge.tsx
index a9191d81..e46e418b 100644
--- a/apps/web/registry/default/ui/badge.tsx
+++ b/apps/web/registry/default/ui/badge.tsx
@@ -1,31 +1,31 @@
-import * as React from 'react'
-import { type VariantProps, cva } from 'class-variance-authority'
+import { type VariantProps, cva } from "class-variance-authority"
+import type * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const badgeVariants = cva(
-   'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
    {
       variants: {
          variant: {
             default:
-          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+               "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
             secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+               "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
             destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-            outline: 'text-foreground',
+               "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+            outline: "text-foreground",
          },
       },
       defaultVariants: {
-         variant: 'default',
+         variant: "default",
       },
    },
 )
 
 export interface BadgeProps
    extends React.HTMLAttributes<HTMLDivElement>,
-   VariantProps<typeof badgeVariants> {}
+      VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
    return (
diff --git a/apps/web/registry/default/ui/bento-grid.tsx b/apps/web/registry/default/ui/bento-grid.tsx
index e9ae82b4..3e894453 100644
--- a/apps/web/registry/default/ui/bento-grid.tsx
+++ b/apps/web/registry/default/ui/bento-grid.tsx
@@ -1,7 +1,7 @@
-import { ArrowRightIcon } from '@radix-ui/react-icons'
-import type { ReactNode } from 'react'
-import { Button } from '~/components/ui/button'
-import { ny } from '~/lib/utils'
+import { ArrowRightIcon } from "@radix-ui/react-icons"
+import type { ReactNode } from "react"
+import { Button } from "~/components/ui/button"
+import { ny } from "~/lib/utils"
 
 function BentoGrid({
    children,
@@ -13,7 +13,7 @@ function BentoGrid({
    return (
       <div
          className={ny(
-            'grid w-full auto-rows-[22rem] grid-cols-3 gap-4',
+            "grid w-full auto-rows-[22rem] grid-cols-3 gap-4",
             className,
          )}
       >
@@ -43,11 +43,11 @@ function BentoCard({
       <div
          key={name}
          className={ny(
-            'group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl',
+            "group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl",
             // light styles
-            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
+            "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
             // dark styles
-            'transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
+            "transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
             className,
          )}
       >
@@ -62,7 +62,7 @@ function BentoCard({
 
          <div
             className={ny(
-               'pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100',
+               "pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100",
             )}
          >
             <Button
diff --git a/apps/web/registry/default/ui/blur-fade.tsx b/apps/web/registry/default/ui/blur-fade.tsx
index 05d9f303..7df55ae0 100644
--- a/apps/web/registry/default/ui/blur-fade.tsx
+++ b/apps/web/registry/default/ui/blur-fade.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { useRef } from 'react'
-import type { Variants } from 'framer-motion'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
+import type { Variants } from "framer-motion"
+import { AnimatePresence, motion, useInView } from "framer-motion"
+import { useRef } from "react"
 
 interface BlurFadeProps {
    children: React.ReactNode
@@ -27,8 +27,8 @@ export default function BlurFade({
    delay = 0,
    yOffset = 6,
    inView = false,
-   inViewMargin = '-50px',
-   blur = '6px',
+   inViewMargin = "-50px",
+   blur = "6px",
 }: BlurFadeProps) {
    const ref = useRef(null)
    const inViewResult = useInView(ref, { once: true, margin: inViewMargin })
@@ -43,13 +43,13 @@ export default function BlurFade({
          <motion.div
             ref={ref}
             initial="hidden"
-            animate={isInView ? 'visible' : 'hidden'}
+            animate={isInView ? "visible" : "hidden"}
             exit="hidden"
             variants={combinedVariants}
             transition={{
                delay: 0.04 + delay,
                duration,
-               ease: 'easeOut',
+               ease: "easeOut",
             }}
             className={className}
          >
diff --git a/apps/web/registry/default/ui/blur-in.tsx b/apps/web/registry/default/ui/blur-in.tsx
index 8dac917b..6245ede7 100644
--- a/apps/web/registry/default/ui/blur-in.tsx
+++ b/apps/web/registry/default/ui/blur-in.tsx
@@ -1,20 +1,20 @@
-'use client'
-import { motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+"use client"
+import { motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface BlurIntProps {
    word: string
    className?: string
    variant?: {
-      hidden: { filter: string, opacity: number }
-      visible: { filter: string, opacity: number }
+      hidden: { filter: string; opacity: number }
+      visible: { filter: string; opacity: number }
    }
    duration?: number
 }
 function BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {
    const defaultVariants = {
-      hidden: { filter: 'blur(10px)', opacity: 0 },
-      visible: { filter: 'blur(0px)', opacity: 1 },
+      hidden: { filter: "blur(10px)", opacity: 0 },
+      visible: { filter: "blur(0px)", opacity: 1 },
    }
    const combinedVariants = variant || defaultVariants
 
@@ -26,7 +26,7 @@ function BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {
          variants={combinedVariants}
          className={ny(
             className,
-            'font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]',
+            "font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]",
          )}
       >
          {word}
diff --git a/apps/web/registry/default/ui/border-beam.tsx b/apps/web/registry/default/ui/border-beam.tsx
index b2373f9a..424624e8 100644
--- a/apps/web/registry/default/ui/border-beam.tsx
+++ b/apps/web/registry/default/ui/border-beam.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface BorderBeamProps {
    className?: string
@@ -17,31 +17,31 @@ export function BorderBeam({
    duration = 15,
    anchor = 90,
    borderWidth = 1.5,
-   colorFrom = '#ffaa40',
-   colorTo = '#9c40ff',
+   colorFrom = "#ffaa40",
+   colorTo = "#9c40ff",
    delay = 0,
 }: BorderBeamProps) {
    return (
       <div
          style={
             {
-               '--size': size,
-               '--duration': duration,
-               '--anchor': anchor,
-               '--border-width': borderWidth,
-               '--color-from': colorFrom,
-               '--color-to': colorTo,
-               '--delay': `-${delay}s`,
+               "--size": size,
+               "--duration": duration,
+               "--anchor": anchor,
+               "--border-width": borderWidth,
+               "--color-from": colorFrom,
+               "--color-to": colorTo,
+               "--delay": `-${delay}s`,
             } as React.CSSProperties
          }
          className={ny(
-            'pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]',
+            "pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
 
             // mask styles
-            '![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]',
+            "![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
 
             // pseudo styles
-            'after:animate-border-beam after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]',
+            "after:animate-border-beam after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
             className,
          )}
       />
diff --git a/apps/web/registry/default/ui/box-reveal.tsx b/apps/web/registry/default/ui/box-reveal.tsx
index b4b4530d..89640aff 100644
--- a/apps/web/registry/default/ui/box-reveal.tsx
+++ b/apps/web/registry/default/ui/box-reveal.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client"
 
-import { motion, useAnimation, useInView } from 'framer-motion'
-import { useEffect, useRef } from 'react'
+import { motion, useAnimation, useInView } from "framer-motion"
+import { useEffect, useRef } from "react"
 
 interface BoxRevealProps {
    children: JSX.Element
-   width?: 'fit-content' | '100%'
+   width?: "fit-content" | "100%"
    boxColor?: string
    duration?: number
 }
 
 export function BoxReveal({
    children,
-   width = 'fit-content',
+   width = "fit-content",
    boxColor,
    duration,
 }: BoxRevealProps) {
@@ -24,17 +24,19 @@ export function BoxReveal({
 
    useEffect(() => {
       if (isInView) {
-         slideControls.start('visible')
-         mainControls.start('visible')
-      }
-      else {
-         slideControls.start('hidden')
-         mainControls.start('hidden')
+         slideControls.start("visible")
+         mainControls.start("visible")
+      } else {
+         slideControls.start("hidden")
+         mainControls.start("hidden")
       }
    }, [isInView, mainControls, slideControls])
 
    return (
-      <div ref={ref} style={{ position: 'relative', width, overflow: 'hidden' }}>
+      <div
+         ref={ref}
+         style={{ position: "relative", width, overflow: "hidden" }}
+      >
          <motion.div
             variants={{
                hidden: { opacity: 0, y: 75 },
@@ -50,19 +52,19 @@ export function BoxReveal({
          <motion.div
             variants={{
                hidden: { left: 0 },
-               visible: { left: '100%' },
+               visible: { left: "100%" },
             }}
             initial="hidden"
             animate={slideControls}
-            transition={{ duration: duration || 0.5, ease: 'easeIn' }}
+            transition={{ duration: duration || 0.5, ease: "easeIn" }}
             style={{
-               position: 'absolute',
+               position: "absolute",
                top: 4,
                bottom: 4,
                left: 0,
                right: 0,
                zIndex: 20,
-               background: boxColor || '#5046e6',
+               background: boxColor || "#5046e6",
             }}
          />
       </div>
diff --git a/apps/web/registry/default/ui/breadcrumb.tsx b/apps/web/registry/default/ui/breadcrumb.tsx
index d8f0ed48..292c313a 100644
--- a/apps/web/registry/default/ui/breadcrumb.tsx
+++ b/apps/web/registry/default/ui/breadcrumb.tsx
@@ -1,104 +1,104 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { ChevronRight, MoreHorizontal } from 'lucide-react'
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Breadcrumb = React.forwardRef<
    HTMLElement,
-   React.ComponentPropsWithoutRef<'nav'> & {
+   React.ComponentPropsWithoutRef<"nav"> & {
       separator?: React.ReactNode
    }
 >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = 'Breadcrumb'
+Breadcrumb.displayName = "Breadcrumb"
 
 const BreadcrumbList = React.forwardRef<
    HTMLOListElement,
-   React.ComponentPropsWithoutRef<'ol'>
+   React.ComponentPropsWithoutRef<"ol">
 >(({ className, ...props }, ref) => (
    <ol
       ref={ref}
       className={ny(
-         'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
+         "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
          className,
       )}
       {...props}
    />
 ))
-BreadcrumbList.displayName = 'BreadcrumbList'
+BreadcrumbList.displayName = "BreadcrumbList"
 
 const BreadcrumbItem = React.forwardRef<
    HTMLLIElement,
-   React.ComponentPropsWithoutRef<'li'>
+   React.ComponentPropsWithoutRef<"li">
 >(({ className, ...props }, ref) => (
    <li
       ref={ref}
-      className={ny('inline-flex items-center gap-1.5', className)}
+      className={ny("inline-flex items-center gap-1.5", className)}
       {...props}
    />
 ))
-BreadcrumbItem.displayName = 'BreadcrumbItem'
+BreadcrumbItem.displayName = "BreadcrumbItem"
 
 const BreadcrumbLink = React.forwardRef<
    HTMLAnchorElement,
-   React.ComponentPropsWithoutRef<'a'> & {
+   React.ComponentPropsWithoutRef<"a"> & {
       asChild?: boolean
    }
 >(({ asChild, className, ...props }, ref) => {
-   const Comp = asChild ? Slot : 'a'
+   const Comp = asChild ? Slot : "a"
 
    return (
       <Comp
          ref={ref}
-         className={ny('hover:text-foreground transition-colors', className)}
+         className={ny("hover:text-foreground transition-colors", className)}
          {...props}
       />
    )
 })
-BreadcrumbLink.displayName = 'BreadcrumbLink'
+BreadcrumbLink.displayName = "BreadcrumbLink"
 
 const BreadcrumbPage = React.forwardRef<
    HTMLSpanElement,
-   React.ComponentPropsWithoutRef<'span'>
+   React.ComponentPropsWithoutRef<"span">
 >(({ className, ...props }, ref) => (
    <span
       ref={ref}
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={ny('text-foreground font-normal', className)}
+      className={ny("text-foreground font-normal", className)}
       {...props}
    />
 ))
-BreadcrumbPage.displayName = 'BreadcrumbPage'
+BreadcrumbPage.displayName = "BreadcrumbPage"
 
 function BreadcrumbSeparator({
    children,
    className,
    ...props
-}: React.ComponentProps<'li'>) {
+}: React.ComponentProps<"li">) {
    return (
       <li
          role="presentation"
          aria-hidden="true"
-         className={ny('[&>svg]:size-3.5', className)}
+         className={ny("[&>svg]:size-3.5", className)}
          {...props}
       >
          {children ?? <ChevronRight />}
       </li>
    )
 }
-BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
 
 function BreadcrumbEllipsis({
    className,
    ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
    return (
       <span
          role="presentation"
          aria-hidden="true"
-         className={ny('flex size-9 items-center justify-center', className)}
+         className={ny("flex size-9 items-center justify-center", className)}
          {...props}
       >
          <MoreHorizontal className="size-4" />
@@ -106,7 +106,7 @@ function BreadcrumbEllipsis({
       </span>
    )
 }
-BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
 
 export {
    Breadcrumb,
diff --git a/apps/web/registry/default/ui/button.tsx b/apps/web/registry/default/ui/button.tsx
index 88726163..47d05030 100644
--- a/apps/web/registry/default/ui/button.tsx
+++ b/apps/web/registry/default/ui/button.tsx
@@ -1,47 +1,47 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { type VariantProps, cva } from 'class-variance-authority'
+import { Slot } from "@radix-ui/react-slot"
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const buttonVariants = cva(
-   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
    {
       variants: {
          variant: {
-            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
             destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+               "bg-destructive text-destructive-foreground hover:bg-destructive/90",
             outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+               "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
             secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-            ghost: 'hover:bg-accent hover:text-accent-foreground',
-            link: 'text-primary underline-offset-4 hover:underline',
+               "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 hover:underline",
          },
          size: {
-            default: 'h-10 px-4 py-2',
-            sm: 'h-9 rounded-md px-3',
-            lg: 'h-11 rounded-md px-8',
-            icon: 'h-10 w-10',
+            default: "h-10 px-4 py-2",
+            sm: "h-9 rounded-md px-3",
+            lg: "h-11 rounded-md px-8",
+            icon: "h-10 w-10",
          },
       },
       defaultVariants: {
-         variant: 'default',
-         size: 'default',
+         variant: "default",
+         size: "default",
       },
    },
 )
 
 export interface ButtonProps
    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-   VariantProps<typeof buttonVariants> {
+      VariantProps<typeof buttonVariants> {
    asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, variant, size, asChild = false, ...props }, ref) => {
-      const Comp = asChild ? Slot : 'button'
+      const Comp = asChild ? Slot : "button"
       return (
          <Comp
             className={ny(buttonVariants({ variant, size, className }))}
@@ -51,6 +51,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       )
    },
 )
-Button.displayName = 'Button'
+Button.displayName = "Button"
 
 export { Button, buttonVariants }
diff --git a/apps/web/registry/default/ui/calendar.tsx b/apps/web/registry/default/ui/calendar.tsx
index 478ba37d..97ab6781 100644
--- a/apps/web/registry/default/ui/calendar.tsx
+++ b/apps/web/registry/default/ui/calendar.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { DayPicker } from 'react-day-picker'
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import type * as React from "react"
+import { DayPicker } from "react-day-picker"
 
-import { ny } from '~/lib/utils'
-import { buttonVariants } from '~/registry/default/ui/button'
+import { ny } from "~/lib/utils"
+import { buttonVariants } from "~/registry/default/ui/button"
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
@@ -18,39 +18,40 @@ function Calendar({
    return (
       <DayPicker
          showOutsideDays={showOutsideDays}
-         className={ny('p-3', className)}
+         className={ny("p-3", className)}
          classNames={{
-            months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
-            month: 'space-y-4',
-            caption: 'flex justify-center pt-1 relative items-center',
-            caption_label: 'text-sm font-medium',
-            nav: 'space-x-1 flex items-center',
+            months:
+               "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+            month: "space-y-4",
+            caption: "flex justify-center pt-1 relative items-center",
+            caption_label: "text-sm font-medium",
+            nav: "space-x-1 flex items-center",
             nav_button: ny(
-               buttonVariants({ variant: 'outline' }),
-               'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+               buttonVariants({ variant: "outline" }),
+               "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
             ),
-            nav_button_previous: 'absolute left-1',
-            nav_button_next: 'absolute right-1',
-            table: 'w-full border-collapse space-y-1',
-            head_row: 'flex',
+            nav_button_previous: "absolute left-1",
+            nav_button_next: "absolute right-1",
+            table: "w-full border-collapse space-y-1",
+            head_row: "flex",
             head_cell:
-          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
-            row: 'flex w-full mt-2',
-            cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+               "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+            row: "flex w-full mt-2",
+            cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
             day: ny(
-               buttonVariants({ variant: 'ghost' }),
-               'size-9 p-0 font-normal aria-selected:opacity-100',
+               buttonVariants({ variant: "ghost" }),
+               "size-9 p-0 font-normal aria-selected:opacity-100",
             ),
-            day_range_end: 'day-range-end',
+            day_range_end: "day-range-end",
             day_selected:
-          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-            day_today: 'bg-accent text-accent-foreground',
+               "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+            day_today: "bg-accent text-accent-foreground",
             day_outside:
-          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
-            day_disabled: 'text-muted-foreground opacity-50',
+               "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+            day_disabled: "text-muted-foreground opacity-50",
             day_range_middle:
-          'aria-selected:bg-accent aria-selected:text-accent-foreground',
-            day_hidden: 'invisible',
+               "aria-selected:bg-accent aria-selected:text-accent-foreground",
+            day_hidden: "invisible",
             ...classNames,
          }}
          components={{
@@ -61,6 +62,6 @@ function Calendar({
       />
    )
 }
-Calendar.displayName = 'Calendar'
+Calendar.displayName = "Calendar"
 
 export { Calendar }
diff --git a/apps/web/registry/default/ui/card.tsx b/apps/web/registry/default/ui/card.tsx
index 425691d2..993095c5 100644
--- a/apps/web/registry/default/ui/card.tsx
+++ b/apps/web/registry/default/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Card = React.forwardRef<
    HTMLDivElement,
@@ -9,13 +9,13 @@ const Card = React.forwardRef<
    <div
       ref={ref}
       className={ny(
-         'bg-card text-card-foreground rounded-lg border shadow-sm',
+         "bg-card text-card-foreground rounded-lg border shadow-sm",
          className,
       )}
       {...props}
    />
 ))
-Card.displayName = 'Card'
+Card.displayName = "Card"
 
 const CardHeader = React.forwardRef<
    HTMLDivElement,
@@ -23,11 +23,11 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <div
       ref={ref}
-      className={ny('flex flex-col space-y-1.5 p-6', className)}
+      className={ny("flex flex-col space-y-1.5 p-6", className)}
       {...props}
    />
 ))
-CardHeader.displayName = 'CardHeader'
+CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<
    HTMLParagraphElement,
@@ -36,13 +36,13 @@ const CardTitle = React.forwardRef<
    <h3
       ref={ref}
       className={ny(
-         'text-2xl font-semibold leading-none tracking-tight',
+         "text-2xl font-semibold leading-none tracking-tight",
          className,
       )}
       {...props}
    />
 ))
-CardTitle.displayName = 'CardTitle'
+CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
    HTMLParagraphElement,
@@ -50,19 +50,19 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <p
       ref={ref}
-      className={ny('text-muted-foreground text-sm', className)}
+      className={ny("text-muted-foreground text-sm", className)}
       {...props}
    />
 ))
-CardDescription.displayName = 'CardDescription'
+CardDescription.displayName = "CardDescription"
 
 const CardContent = React.forwardRef<
    HTMLDivElement,
    React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-   <div ref={ref} className={ny('p-6 pt-0', className)} {...props} />
+   <div ref={ref} className={ny("p-6 pt-0", className)} {...props} />
 ))
-CardContent.displayName = 'CardContent'
+CardContent.displayName = "CardContent"
 
 const CardFooter = React.forwardRef<
    HTMLDivElement,
@@ -70,17 +70,10 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <div
       ref={ref}
-      className={ny('flex items-center p-6 pt-0', className)}
+      className={ny("flex items-center p-6 pt-0", className)}
       {...props}
    />
 ))
-CardFooter.displayName = 'CardFooter'
+CardFooter.displayName = "CardFooter"
 
-export {
-   Card,
-   CardHeader,
-   CardFooter,
-   CardTitle,
-   CardDescription,
-   CardContent,
-}
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/apps/web/registry/default/ui/carousel.tsx b/apps/web/registry/default/ui/carousel.tsx
index 13719259..a5297bfa 100644
--- a/apps/web/registry/default/ui/carousel.tsx
+++ b/apps/web/registry/default/ui/carousel.tsx
@@ -1,13 +1,15 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
-import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
-import { ArrowLeft, ArrowRight } from 'lucide-react'
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+import useEmblaCarousel, {
+   type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -18,8 +20,8 @@ interface CarouselProps {
    opts?: CarouselOptions
    plugins?: CarouselPlugin
    setApi?: (api: CarouselApi) => void
-   orientation?: 'horizontal' | 'vertical'
-   dotsPosition?: 'top' | 'bottom' | 'left' | 'right'
+   orientation?: "horizontal" | "vertical"
+   dotsPosition?: "top" | "bottom" | "left" | "right"
 }
 
 type CarouselContextProps = {
@@ -40,22 +42,22 @@ function useCarousel() {
    const context = React.useContext(CarouselContext)
 
    if (!context)
-      throw new Error('useCarousel must be used within a <Carousel />')
+      throw new Error("useCarousel must be used within a <Carousel />")
 
    return context
 }
 
 const Carousel = React.forwardRef<
    HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+   React.HTMLAttributes<HTMLDivElement> & CarouselProps
 >(
    (
       {
          opts,
          plugins,
          setApi,
-         orientation = 'horizontal',
-         dotsPosition = 'bottom',
+         orientation = "horizontal",
+         dotsPosition = "bottom",
          className,
          children,
          ...props
@@ -65,7 +67,7 @@ const Carousel = React.forwardRef<
       const [carouselRef, api] = useEmblaCarousel(
          {
             ...opts,
-            axis: orientation === 'horizontal' ? 'x' : 'y',
+            axis: orientation === "horizontal" ? "x" : "y",
          },
          plugins,
       )
@@ -76,8 +78,7 @@ const Carousel = React.forwardRef<
       const [totalSlides, setTotalSlides] = React.useState(0)
 
       const onSelect = React.useCallback((api: CarouselApi) => {
-         if (!api)
-            return
+         if (!api) return
 
          setCanScrollPrev(api.canScrollPrev())
          setCanScrollNext(api.canScrollNext())
@@ -102,11 +103,10 @@ const Carousel = React.forwardRef<
 
       const handleKeyDown = React.useCallback(
          (event: React.KeyboardEvent<HTMLDivElement>) => {
-            if (event.key === 'ArrowLeft') {
+            if (event.key === "ArrowLeft") {
                event.preventDefault()
                scrollPrev()
-            }
-            else if (event.key === 'ArrowRight') {
+            } else if (event.key === "ArrowRight") {
                event.preventDefault()
                scrollNext()
             }
@@ -115,43 +115,40 @@ const Carousel = React.forwardRef<
       )
 
       React.useEffect(() => {
-         if (!api || !setApi)
-            return
+         if (!api || !setApi) return
 
          setApi(api)
       }, [api, setApi])
 
       React.useEffect(() => {
-         if (!api)
-            return
+         if (!api) return
 
          onSelect(api)
-         api.on('reInit', onSelect)
-         api.on('select', onSelect)
+         api.on("reInit", onSelect)
+         api.on("select", onSelect)
 
          return () => {
-            api?.off('select', onSelect)
+            api?.off("select", onSelect)
          }
       }, [api, onSelect])
 
       let effectiveDotsPosition = dotsPosition
       if (
-         orientation === 'horizontal'
-         && (dotsPosition === 'left' || dotsPosition === 'right')
+         orientation === "horizontal" &&
+         (dotsPosition === "left" || dotsPosition === "right")
       ) {
          console.warn(
-        `Invalid dotsPosition "${dotsPosition}" for horizontal orientation, defaulting to "bottom".`,
+            `Invalid dotsPosition "${dotsPosition}" for horizontal orientation, defaulting to "bottom".`,
          )
-         effectiveDotsPosition = 'bottom'
-      }
-      else if (
-         orientation === 'vertical'
-         && (dotsPosition === 'top' || dotsPosition === 'bottom')
+         effectiveDotsPosition = "bottom"
+      } else if (
+         orientation === "vertical" &&
+         (dotsPosition === "top" || dotsPosition === "bottom")
       ) {
          console.warn(
-        `Invalid dotsPosition "${dotsPosition}" for vertical orientation, defaulting to "left".`,
+            `Invalid dotsPosition "${dotsPosition}" for vertical orientation, defaulting to "left".`,
          )
-         effectiveDotsPosition = 'left'
+         effectiveDotsPosition = "left"
       }
 
       return (
@@ -161,7 +158,8 @@ const Carousel = React.forwardRef<
                api,
                opts,
                orientation:
-            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+                  orientation ||
+                  (opts?.axis === "y" ? "vertical" : "horizontal"),
                dotsPosition: effectiveDotsPosition,
                scrollPrev,
                scrollNext,
@@ -175,7 +173,7 @@ const Carousel = React.forwardRef<
             <div
                ref={ref}
                onKeyDownCapture={handleKeyDown}
-               className={ny('relative', className)}
+               className={ny("relative", className)}
                role="region"
                aria-roledescription="carousel"
                {...props}
@@ -186,7 +184,7 @@ const Carousel = React.forwardRef<
       )
    },
 )
-Carousel.displayName = 'Carousel'
+Carousel.displayName = "Carousel"
 
 const CarouselContent = React.forwardRef<
    HTMLDivElement,
@@ -199,8 +197,8 @@ const CarouselContent = React.forwardRef<
          <div
             ref={ref}
             className={ny(
-               'flex',
-               orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+               "flex",
+               orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
                className,
             )}
             {...props}
@@ -208,7 +206,7 @@ const CarouselContent = React.forwardRef<
       </div>
    )
 })
-CarouselContent.displayName = 'CarouselContent'
+CarouselContent.displayName = "CarouselContent"
 
 const CarouselItem = React.forwardRef<
    HTMLDivElement,
@@ -222,20 +220,20 @@ const CarouselItem = React.forwardRef<
          role="group"
          aria-roledescription="slide"
          className={ny(
-            'min-w-0 shrink-0 grow-0 basis-full',
-            orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+            "min-w-0 shrink-0 grow-0 basis-full",
+            orientation === "horizontal" ? "pl-4" : "pt-4",
             className,
          )}
          {...props}
       />
    )
 })
-CarouselItem.displayName = 'CarouselItem'
+CarouselItem.displayName = "CarouselItem"
 
 const CarouselPrevious = React.forwardRef<
    HTMLButtonElement,
    React.ComponentProps<typeof Button>
->(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
    const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
    return (
@@ -244,10 +242,10 @@ const CarouselPrevious = React.forwardRef<
          variant={variant}
          size={size}
          className={ny(
-            'absolute  size-8 rounded-full',
-            orientation === 'horizontal'
-               ? '-left-12 top-1/2 -translate-y-1/2'
-               : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+            "absolute  size-8 rounded-full",
+            orientation === "horizontal"
+               ? "-left-12 top-1/2 -translate-y-1/2"
+               : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
             className,
          )}
          disabled={!canScrollPrev}
@@ -259,12 +257,12 @@ const CarouselPrevious = React.forwardRef<
       </Button>
    )
 })
-CarouselPrevious.displayName = 'CarouselPrevious'
+CarouselPrevious.displayName = "CarouselPrevious"
 
 const CarouselNext = React.forwardRef<
    HTMLButtonElement,
    React.ComponentProps<typeof Button>
->(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
    const { orientation, scrollNext, canScrollNext } = useCarousel()
 
    return (
@@ -273,10 +271,10 @@ const CarouselNext = React.forwardRef<
          variant={variant}
          size={size}
          className={ny(
-            'absolute size-8 rounded-full',
-            orientation === 'horizontal'
-               ? '-right-12 top-1/2 -translate-y-1/2'
-               : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+            "absolute size-8 rounded-full",
+            orientation === "horizontal"
+               ? "-right-12 top-1/2 -translate-y-1/2"
+               : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
             className,
          )}
          disabled={!canScrollNext}
@@ -288,70 +286,69 @@ const CarouselNext = React.forwardRef<
       </Button>
    )
 })
-CarouselNext.displayName = 'CarouselNext'
+CarouselNext.displayName = "CarouselNext"
 
-const dotsContainerVariants = cva('absolute flex justify-center', {
+const dotsContainerVariants = cva("absolute flex justify-center", {
    variants: {
       orientation: {
-         horizontal: 'inset-x-0 flex-row',
-         vertical: 'inset-y-0 flex-col',
+         horizontal: "inset-x-0 flex-row",
+         vertical: "inset-y-0 flex-col",
       },
       size: {
-         default: 'p-4',
-         sm: 'p-4',
-         md: 'p-1',
-         lg: 'p-0',
+         default: "p-4",
+         sm: "p-4",
+         md: "p-1",
+         lg: "p-0",
       },
       position: {
-         top: '-top-10',
-         right: '-right-10',
-         bottom: '-bottom-10',
-         left: '-left-10',
+         top: "-top-10",
+         right: "-right-10",
+         bottom: "-bottom-10",
+         left: "-left-10",
       },
       gap: {
-         default: 'gap-2',
-         sm: 'gap-2',
-         md: 'gap-4',
-         lg: 'gap-6',
+         default: "gap-2",
+         sm: "gap-2",
+         md: "gap-4",
+         lg: "gap-6",
       },
    },
    defaultVariants: {
-      orientation: 'horizontal',
-      size: 'default',
-      position: 'bottom',
-      gap: 'default',
+      orientation: "horizontal",
+      size: "default",
+      position: "bottom",
+      gap: "default",
    },
 })
 
 const dotsVariants = cva(
-   'rounded-full ring-1 ring-muted ring-offset-1 ring-offset-background transition-all duration-300',
+   "rounded-full ring-1 ring-muted ring-offset-1 ring-offset-background transition-all duration-300",
    {
       variants: {
          size: {
-            default: 'size-3',
-            sm: 'size-3',
-            md: 'size-4',
-            lg: 'size-6',
+            default: "size-3",
+            sm: "size-3",
+            md: "size-4",
+            lg: "size-6",
          },
       },
       defaultVariants: {
-         size: 'default',
+         size: "default",
       },
    },
 )
 
 interface CarouselDotsProps
    extends React.HTMLAttributes<HTMLDivElement>,
-   VariantProps<typeof dotsContainerVariants>,
-   VariantProps<typeof dotsVariants> {}
+      VariantProps<typeof dotsContainerVariants>,
+      VariantProps<typeof dotsVariants> {}
 
 const CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(
    ({ className, size, gap, ...props }, ref) => {
-      const { orientation, dotsPosition, totalSlides, currentIndex, scrollTo }
-      = useCarousel()
+      const { orientation, dotsPosition, totalSlides, currentIndex, scrollTo } =
+         useCarousel()
 
-      if (totalSlides <= 1)
-         return null
+      if (totalSlides <= 1) return null
 
       return (
          <div
@@ -377,7 +374,7 @@ const CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(
                   onClick={() => scrollTo(index)}
                   className={ny(
                      dotsVariants({ size }),
-                     currentIndex === index ? 'bg-card-foreground' : 'bg-muted',
+                     currentIndex === index ? "bg-card-foreground" : "bg-muted",
                   )}
                />
             ))}
@@ -385,7 +382,7 @@ const CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(
       )
    },
 )
-CarouselDots.displayName = 'CarouselDots'
+CarouselDots.displayName = "CarouselDots"
 
 export {
    type CarouselApi,
diff --git a/apps/web/registry/default/ui/chart.tsx b/apps/web/registry/default/ui/chart.tsx
index 6ba0cd93..30239937 100644
--- a/apps/web/registry/default/ui/chart.tsx
+++ b/apps/web/registry/default/ui/chart.tsx
@@ -1,21 +1,21 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as RechartsPrimitive from 'recharts'
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: '', dark: '.dark' } as const
+const THEMES = { light: "", dark: ".dark" } as const
 
 export type ChartConfig = {
    [k in string]: {
       label?: React.ReactNode
       icon?: React.ComponentType
    } & (
-      | { color?: string, theme?: never }
-      | { color?: never, theme: Record<keyof typeof THEMES, string> }
-  )
+      | { color?: string; theme?: never }
+      | { color?: never; theme: Record<keyof typeof THEMES, string> }
+   )
 }
 
 interface ChartContextProps {
@@ -28,7 +28,7 @@ function useChart() {
    const context = React.useContext(ChartContext)
 
    if (!context) {
-      throw new Error('useChart must be used within a <ChartContainer />')
+      throw new Error("useChart must be used within a <ChartContainer />")
    }
 
    return context
@@ -36,15 +36,15 @@ function useChart() {
 
 const ChartContainer = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'> & {
+   React.ComponentProps<"div"> & {
       config: ChartConfig
       children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-      >['children']
+         typeof RechartsPrimitive.ResponsiveContainer
+      >["children"]
    }
 >(({ id, className, children, config, ...props }, ref) => {
    const uniqueId = React.useId()
-   const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
+   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
 
    return (
       <ChartContext.Provider value={{ config }}>
@@ -52,7 +52,7 @@ const ChartContainer = React.forwardRef<
             data-chart={chartId}
             ref={ref}
             className={ny(
-               '[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke=\'#ccc\']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke=\'#fff\']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke=\'#fff\']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none',
+               "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
                className,
             )}
             {...props}
@@ -65,9 +65,9 @@ const ChartContainer = React.forwardRef<
       </ChartContext.Provider>
    )
 })
-ChartContainer.displayName = 'Chart'
+ChartContainer.displayName = "Chart"
 
-function ChartStyle({ id, config }: { id: string, config: ChartConfig }) {
+function ChartStyle({ id, config }: { id: string; config: ChartConfig }) {
    const colorConfig = Object.entries(config).filter(
       ([_, config]) => config.theme || config.color,
    )
@@ -83,13 +83,13 @@ function ChartStyle({ id, config }: { id: string, config: ChartConfig }) {
                ([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig
-  .map(([key, itemConfig]) => {
-    const color
-      = itemConfig.theme?.[theme as keyof typeof itemConfig.theme]
-      || itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join('\n')}
+   .map(([key, itemConfig]) => {
+      const color =
+         itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+         itemConfig.color
+      return color ? `  --color-${key}: ${color};` : null
+   })
+   .join("\n")}
 }
 `,
             ),
@@ -103,20 +103,20 @@ const ChartTooltip = RechartsPrimitive.Tooltip
 const ChartTooltipContent = React.forwardRef<
    HTMLDivElement,
    React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-   React.ComponentProps<'div'> & {
-      hideLabel?: boolean
-      hideIndicator?: boolean
-      indicator?: 'line' | 'dot' | 'dashed'
-      nameKey?: string
-      labelKey?: string
-   }
+      React.ComponentProps<"div"> & {
+         hideLabel?: boolean
+         hideIndicator?: boolean
+         indicator?: "line" | "dot" | "dashed"
+         nameKey?: string
+         labelKey?: string
+      }
 >(
    (
       {
          active,
          payload,
          className,
-         indicator = 'dot',
+         indicator = "dot",
          hideLabel = false,
          hideIndicator = false,
          label,
@@ -137,16 +137,16 @@ const ChartTooltipContent = React.forwardRef<
          }
 
          const [item] = payload
-         const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
+         const key = `${labelKey || item?.dataKey || item?.name || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-         const value
-        = !labelKey && typeof label === 'string'
-           ? config[label as keyof typeof config]?.label || label
-           : itemConfig?.label
+         const value =
+            !labelKey && typeof label === "string"
+               ? config[label as keyof typeof config]?.label || label
+               : itemConfig?.label
 
          if (labelFormatter) {
             return (
-               <div className={ny('font-medium', labelClassName)}>
+               <div className={ny("font-medium", labelClassName)}>
                   {labelFormatter(value, payload)}
                </div>
             )
@@ -156,7 +156,7 @@ const ChartTooltipContent = React.forwardRef<
             return null
          }
 
-         return <div className={ny('font-medium', labelClassName)}>{value}</div>
+         return <div className={ny("font-medium", labelClassName)}>{value}</div>
       }, [
          label,
          labelFormatter,
@@ -171,83 +171,92 @@ const ChartTooltipContent = React.forwardRef<
          return null
       }
 
-      const nestLabel = payload.length === 1 && indicator !== 'dot'
+      const nestLabel = payload.length === 1 && indicator !== "dot"
 
       return (
          <div
             ref={ref}
             className={ny(
-               'border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+               "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
                className,
             )}
          >
             {!nestLabel ? tooltipLabel : null}
             <div className="grid gap-1.5">
                {payload.map((item, index) => {
-                  const key = `${nameKey || item.name || item.dataKey || 'value'}`
-                  const itemConfig = getPayloadConfigFromPayload(config, item, key)
-                  const indicatorColor = color || item.payload.fill || item.color
+                  const key = `${nameKey || item.name || item.dataKey || "value"}`
+                  const itemConfig = getPayloadConfigFromPayload(
+                     config,
+                     item,
+                     key,
+                  )
+                  const indicatorColor =
+                     color || item.payload.fill || item.color
 
                   return (
                      <div
                         key={item.dataKey}
                         className={ny(
-                           '[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5',
-                           indicator === 'dot' && 'items-center',
+                           "[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5",
+                           indicator === "dot" && "items-center",
                         )}
                      >
-                        {formatter && item.value && item.name
-                           ? (
-                                 formatter(item.value, item.name, item, index, item.payload)
-                              )
-                           : (
-                                 <>
-                                    {itemConfig?.icon
-                                       ? (
-                                             <itemConfig.icon />
-                                          )
-                                       : (
-                                             !hideIndicator && (
-                                                <div
-                                                   className={ny(
-                                                      'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
-                                                      {
-                                                         'h-2.5 w-2.5': indicator === 'dot',
-                                                         'w-1': indicator === 'line',
-                                                         'w-0 border-[1.5px] border-dashed bg-transparent':
-                                indicator === 'dashed',
-                                                         'my-0.5': nestLabel && indicator === 'dashed',
-                                                      },
-                                                   )}
-                                                   style={
-                                                      {
-                                                         '--color-bg': indicatorColor,
-                                                         '--color-border': indicatorColor,
-                                                      } as React.CSSProperties
-                                                   }
-                                                />
-                                             )
-                                          )}
+                        {formatter && item.value && item.name ? (
+                           formatter(
+                              item.value,
+                              item.name,
+                              item,
+                              index,
+                              item.payload,
+                           )
+                        ) : (
+                           <>
+                              {itemConfig?.icon ? (
+                                 <itemConfig.icon />
+                              ) : (
+                                 !hideIndicator && (
                                     <div
                                        className={ny(
-                                          'flex flex-1 justify-between leading-none',
-                                          nestLabel ? 'items-end' : 'items-center',
+                                          "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                                          {
+                                             "h-2.5 w-2.5": indicator === "dot",
+                                             "w-1": indicator === "line",
+                                             "w-0 border-[1.5px] border-dashed bg-transparent":
+                                                indicator === "dashed",
+                                             "my-0.5":
+                                                nestLabel &&
+                                                indicator === "dashed",
+                                          },
                                        )}
-                                    >
-                                       <div className="grid gap-1.5">
-                                          {nestLabel ? tooltipLabel : null}
-                                          <span className="text-muted-foreground">
-                                             {itemConfig?.label || item.name}
-                                          </span>
-                                       </div>
-                                       {item.value !== undefined && (
-                                          <span className="text-foreground font-mono font-medium tabular-nums">
-                                             {item.value.toLocaleString()}
-                                          </span>
-                                       )}
-                                    </div>
-                                 </>
+                                       style={
+                                          {
+                                             "--color-bg": indicatorColor,
+                                             "--color-border": indicatorColor,
+                                          } as React.CSSProperties
+                                       }
+                                    />
+                                 )
                               )}
+                              <div
+                                 className={ny(
+                                    "flex flex-1 justify-between leading-none",
+                                    nestLabel ? "items-end" : "items-center",
+                                 )}
+                              >
+                                 <div className="grid gap-1.5">
+                                    {nestLabel ? tooltipLabel : null}
+                                    <span className="text-muted-foreground">
+                                       {itemConfig?.label || item.name}
+                                    </span>
+                                 </div>
+                                 {item.value !== undefined && (
+                                    <span className="text-foreground font-mono font-medium tabular-nums">
+                                       {item.value.toLocaleString()}
+                                    </span>
+                                 )}
+                              </div>
+                           </>
+                        )}
                      </div>
                   )
                })}
@@ -256,20 +265,26 @@ const ChartTooltipContent = React.forwardRef<
       )
    },
 )
-ChartTooltipContent.displayName = 'ChartTooltip'
+ChartTooltipContent.displayName = "ChartTooltip"
 
 const ChartLegend = RechartsPrimitive.Legend
 
 const ChartLegendContent = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'> &
-   Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
-      hideIcon?: boolean
-      nameKey?: string
-   }
+   React.ComponentProps<"div"> &
+      Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+         hideIcon?: boolean
+         nameKey?: string
+      }
 >(
    (
-      { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },
+      {
+         className,
+         hideIcon = false,
+         payload,
+         verticalAlign = "bottom",
+         nameKey,
+      },
       ref,
    ) => {
       const { config } = useChart()
@@ -282,34 +297,32 @@ const ChartLegendContent = React.forwardRef<
          <div
             ref={ref}
             className={ny(
-               'flex items-center justify-center gap-4',
-               verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+               "flex items-center justify-center gap-4",
+               verticalAlign === "top" ? "pb-3" : "pt-3",
                className,
             )}
          >
             {payload.map((item) => {
-               const key = `${nameKey || item.dataKey || 'value'}`
+               const key = `${nameKey || item.dataKey || "value"}`
                const itemConfig = getPayloadConfigFromPayload(config, item, key)
 
                return (
                   <div
                      key={item.value}
                      className={ny(
-                        '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3',
+                        "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3",
                      )}
                   >
-                     {itemConfig?.icon && !hideIcon
-                        ? (
-                              <itemConfig.icon />
-                           )
-                        : (
-                              <div
-                                 className="size-2 shrink-0 rounded-[2px]"
-                                 style={{
-                                    backgroundColor: item.color,
-                                 }}
-                              />
-                           )}
+                     {itemConfig?.icon && !hideIcon ? (
+                        <itemConfig.icon />
+                     ) : (
+                        <div
+                           className="size-2 shrink-0 rounded-[2px]"
+                           style={{
+                              backgroundColor: item.color,
+                           }}
+                        />
+                     )}
                      {itemConfig?.label}
                   </div>
                )
@@ -318,7 +331,7 @@ const ChartLegendContent = React.forwardRef<
       )
    },
 )
-ChartLegendContent.displayName = 'ChartLegend'
+ChartLegendContent.displayName = "ChartLegend"
 
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
@@ -326,29 +339,28 @@ function getPayloadConfigFromPayload(
    payload: unknown,
    key: string,
 ) {
-   if (typeof payload !== 'object' || payload === null) {
+   if (typeof payload !== "object" || payload === null) {
       return undefined
    }
 
-   const payloadPayload
-    = 'payload' in payload
-    && typeof payload.payload === 'object'
-    && payload.payload !== null
-       ? payload.payload
-       : undefined
+   const payloadPayload =
+      "payload" in payload &&
+      typeof payload.payload === "object" &&
+      payload.payload !== null
+         ? payload.payload
+         : undefined
 
    let configLabelKey: string = key
 
    if (
-      key in payload
-      && typeof payload[key as keyof typeof payload] === 'string'
+      key in payload &&
+      typeof payload[key as keyof typeof payload] === "string"
    ) {
       configLabelKey = payload[key as keyof typeof payload] as string
-   }
-   else if (
-      payloadPayload
-      && key in payloadPayload
-      && typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+   } else if (
+      payloadPayload &&
+      key in payloadPayload &&
+      typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
    ) {
       configLabelKey = payloadPayload[
          key as keyof typeof payloadPayload
diff --git a/apps/web/registry/default/ui/checkbox.tsx b/apps/web/registry/default/ui/checkbox.tsx
index 0c1e927c..d38f76fe 100644
--- a/apps/web/registry/default/ui/checkbox.tsx
+++ b/apps/web/registry/default/ui/checkbox.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { Check } from 'lucide-react'
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Checkbox = React.forwardRef<
    React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -13,13 +13,13 @@ const Checkbox = React.forwardRef<
    <CheckboxPrimitive.Root
       ref={ref}
       className={ny(
-         'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+         "border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
          className,
       )}
       {...props}
    >
       <CheckboxPrimitive.Indicator
-         className={ny('flex items-center justify-center text-current')}
+         className={ny("flex items-center justify-center text-current")}
       >
          <Check className="size-4" />
       </CheckboxPrimitive.Indicator>
diff --git a/apps/web/registry/default/ui/client-tweet-card.tsx b/apps/web/registry/default/ui/client-tweet-card.tsx
index cfb91bc2..d47ab1b5 100644
--- a/apps/web/registry/default/ui/client-tweet-card.tsx
+++ b/apps/web/registry/default/ui/client-tweet-card.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import type { TweetProps } from 'react-tweet'
-import { useTweet } from 'react-tweet'
+import type { TweetProps } from "react-tweet"
+import { useTweet } from "react-tweet"
 import {
    MagicTweet,
    TweetNotFound,
    TweetSkeleton,
-} from '~/registry/default/ui/tweet-card'
+} from "~/registry/default/ui/tweet-card"
 
 function ClientTweetCard({
    id,
@@ -19,8 +19,7 @@ function ClientTweetCard({
 }: TweetProps & { className?: string }) {
    const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions)
 
-   if (isLoading)
-      return fallback
+   if (isLoading) return fallback
    if (error || !data) {
       const NotFound = components?.TweetNotFound || TweetNotFound
       return <NotFound error={onError ? onError(error) : error} />
diff --git a/apps/web/registry/default/ui/collapsible.tsx b/apps/web/registry/default/ui/collapsible.tsx
index 1bbaed5a..9fa48946 100644
--- a/apps/web/registry/default/ui/collapsible.tsx
+++ b/apps/web/registry/default/ui/collapsible.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 
 const Collapsible = CollapsiblePrimitive.Root
 
diff --git a/apps/web/registry/default/ui/command.tsx b/apps/web/registry/default/ui/command.tsx
index 01fb8e43..ccac8dde 100644
--- a/apps/web/registry/default/ui/command.tsx
+++ b/apps/web/registry/default/ui/command.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import type { DialogProps } from '@radix-ui/react-dialog'
-import { Command as CommandPrimitive } from 'cmdk'
-import { Search } from 'lucide-react'
+import type { DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { Dialog, DialogContent } from '~/registry/default/ui/dialog'
+import { ny } from "~/lib/utils"
+import { Dialog, DialogContent } from "~/registry/default/ui/dialog"
 
 const Command = React.forwardRef<
    React.ElementRef<typeof CommandPrimitive>,
@@ -15,7 +15,7 @@ const Command = React.forwardRef<
    <CommandPrimitive
       ref={ref}
       className={ny(
-         'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md',
+         "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md",
          className,
       )}
       {...props}
@@ -44,7 +44,7 @@ const CommandInput = React.forwardRef<
       <CommandPrimitive.Input
          ref={ref}
          className={ny(
-            'placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+            "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
             className,
          )}
          {...props}
@@ -60,7 +60,10 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <CommandPrimitive.List
       ref={ref}
-      className={ny('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+      className={ny(
+         "max-h-[300px] overflow-y-auto overflow-x-hidden",
+         className,
+      )}
       {...props}
    />
 ))
@@ -87,7 +90,7 @@ const CommandGroup = React.forwardRef<
    <CommandPrimitive.Group
       ref={ref}
       className={ny(
-         'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+         "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
          className,
       )}
       {...props}
@@ -102,7 +105,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <CommandPrimitive.Separator
       ref={ref}
-      className={ny('bg-border -mx-1 h-px', className)}
+      className={ny("bg-border -mx-1 h-px", className)}
       {...props}
    />
 ))
@@ -115,7 +118,7 @@ const CommandItem = React.forwardRef<
    <CommandPrimitive.Item
       ref={ref}
       className={ny(
-         'data-[selected=\'true\']:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+         "data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
          className,
       )}
       {...props}
@@ -131,14 +134,14 @@ function CommandShortcut({
    return (
       <span
          className={ny(
-            'text-muted-foreground ml-auto text-xs tracking-widest',
+            "text-muted-foreground ml-auto text-xs tracking-widest",
             className,
          )}
          {...props}
       />
    )
 }
-CommandShortcut.displayName = 'CommandShortcut'
+CommandShortcut.displayName = "CommandShortcut"
 
 export {
    Command,
diff --git a/apps/web/registry/default/ui/confetti.tsx b/apps/web/registry/default/ui/confetti.tsx
index 089e9ab8..6c3fbd45 100644
--- a/apps/web/registry/default/ui/confetti.tsx
+++ b/apps/web/registry/default/ui/confetti.tsx
@@ -1,21 +1,30 @@
-'use client'
-import confetti from 'canvas-confetti'
-import type { ReactNode } from 'react'
-import React, { createContext, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
+"use client"
+import confetti from "canvas-confetti"
+import type { ReactNode } from "react"
+import type React from "react"
+import {
+   createContext,
+   forwardRef,
+   useCallback,
+   useEffect,
+   useImperativeHandle,
+   useMemo,
+   useRef,
+} from "react"
 
 import type {
    GlobalOptions as ConfettiGlobalOptions,
    CreateTypes as ConfettiInstance,
    Options as ConfettiOptions,
-} from 'canvas-confetti'
-import { Button } from '~/components/ui/button'
-import type { ButtonProps } from '~/components/ui/button'
+} from "canvas-confetti"
+import { Button } from "~/components/ui/button"
+import type { ButtonProps } from "~/components/ui/button"
 
 interface Api {
    fire: (options?: ConfettiOptions) => void
 }
 
-type Props = React.ComponentPropsWithRef<'canvas'> & {
+type Props = React.ComponentPropsWithRef<"canvas"> & {
    options?: ConfettiOptions
    globalOptions?: ConfettiGlobalOptions
    manualstart?: boolean
@@ -42,14 +51,12 @@ const Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {
       (node: HTMLCanvasElement) => {
          if (node !== null) {
             // <canvas> is mounted => create the confetti instance
-            if (instanceRef.current)
-               return // if not already created
+            if (instanceRef.current) return // if not already created
             instanceRef.current = confetti.create(node, {
                ...globalOptions,
                resize: true,
             })
-         }
-         else {
+         } else {
             // <canvas> is unmounted => reset and destroy instanceRef
             if (instanceRef.current) {
                instanceRef.current.reset()
@@ -76,8 +83,7 @@ const Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {
    useImperativeHandle(ref, () => api, [api])
 
    useEffect(() => {
-      if (!manualstart)
-         fire()
+      if (!manualstart) fire()
    }, [manualstart, fire])
 
    return (
@@ -90,7 +96,7 @@ const Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {
 
 interface ConfettiButtonProps extends ButtonProps {
    options?: ConfettiOptions &
-   ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }
+      ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }
    children?: React.ReactNode
 }
 
diff --git a/apps/web/registry/default/ui/context-menu.tsx b/apps/web/registry/default/ui/context-menu.tsx
index 749ea843..9dc1280e 100644
--- a/apps/web/registry/default/ui/context-menu.tsx
+++ b/apps/web/registry/default/ui/context-menu.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
-import { Check, ChevronRight, Circle } from 'lucide-react'
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const ContextMenu = ContextMenuPrimitive.Root
 
@@ -27,8 +27,8 @@ const ContextMenuSubTrigger = React.forwardRef<
    <ContextMenuPrimitive.SubTrigger
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-         inset && 'pl-8',
+         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -46,7 +46,7 @@ const ContextMenuSubContent = React.forwardRef<
    <ContextMenuPrimitive.SubContent
       ref={ref}
       className={ny(
-         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md",
          className,
       )}
       {...props}
@@ -62,7 +62,7 @@ const ContextMenuContent = React.forwardRef<
       <ContextMenuPrimitive.Content
          ref={ref}
          className={ny(
-            'bg-popover text-popover-foreground animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+            "bg-popover text-popover-foreground animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md",
             className,
          )}
          {...props}
@@ -80,8 +80,8 @@ const ContextMenuItem = React.forwardRef<
    <ContextMenuPrimitive.Item
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-         inset && 'pl-8',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -96,7 +96,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
    <ContextMenuPrimitive.CheckboxItem
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       checked={checked}
@@ -110,8 +110,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
       {children}
    </ContextMenuPrimitive.CheckboxItem>
 ))
-ContextMenuCheckboxItem.displayName
-  = ContextMenuPrimitive.CheckboxItem.displayName
+ContextMenuCheckboxItem.displayName =
+   ContextMenuPrimitive.CheckboxItem.displayName
 
 const ContextMenuRadioItem = React.forwardRef<
    React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -120,7 +120,7 @@ const ContextMenuRadioItem = React.forwardRef<
    <ContextMenuPrimitive.RadioItem
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       {...props}
@@ -144,8 +144,8 @@ const ContextMenuLabel = React.forwardRef<
    <ContextMenuPrimitive.Label
       ref={ref}
       className={ny(
-         'text-foreground px-2 py-1.5 text-sm font-semibold',
-         inset && 'pl-8',
+         "text-foreground px-2 py-1.5 text-sm font-semibold",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -159,7 +159,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <ContextMenuPrimitive.Separator
       ref={ref}
-      className={ny('bg-border -mx-1 my-1 h-px', className)}
+      className={ny("bg-border -mx-1 my-1 h-px", className)}
       {...props}
    />
 ))
@@ -172,14 +172,14 @@ function ContextMenuShortcut({
    return (
       <span
          className={ny(
-            'text-muted-foreground ml-auto text-xs tracking-widest',
+            "text-muted-foreground ml-auto text-xs tracking-widest",
             className,
          )}
          {...props}
       />
    )
 }
-ContextMenuShortcut.displayName = 'ContextMenuShortcut'
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
 
 export {
    ContextMenu,
diff --git a/apps/web/registry/default/ui/cool-mode.tsx b/apps/web/registry/default/ui/cool-mode.tsx
index a437586e..dd534284 100644
--- a/apps/web/registry/default/ui/cool-mode.tsx
+++ b/apps/web/registry/default/ui/cool-mode.tsx
@@ -1,6 +1,6 @@
-'use client'
-import type { ReactNode } from 'react'
-import React, { useEffect, useRef } from 'react'
+"use client"
+import type { ReactNode } from "react"
+import React, { useEffect, useRef } from "react"
 
 export interface BaseParticle {
    element: HTMLElement | SVGSVGElement
@@ -29,17 +29,16 @@ export interface CoolParticleOptions extends BaseParticleOptions {
 }
 
 function getContainer() {
-   const id = '_coolMode_effect'
+   const id = "_coolMode_effect"
    const existingContainer = document.getElementById(id)
 
-   if (existingContainer)
-      return existingContainer
+   if (existingContainer) return existingContainer
 
-   const container = document.createElement('div')
-   container.setAttribute('id', id)
+   const container = document.createElement("div")
+   container.setAttribute("id", id)
    container.setAttribute(
-      'style',
-      'overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647',
+      "style",
+      "overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647",
    )
 
    document.body.appendChild(container)
@@ -55,7 +54,7 @@ function applyParticleEffect(
 ): () => void {
    instanceCounter++
 
-   const defaultParticle = 'circle'
+   const defaultParticle = "circle"
    const particleType = options?.particle || defaultParticle
    const sizes = [15, 20, 25, 35, 45]
    const limit = 45
@@ -68,8 +67,8 @@ function applyParticleEffect(
    const container = getContainer()
 
    function generateParticle() {
-      const size
-      = options?.size || sizes[Math.floor(Math.random() * sizes.length)]
+      const size =
+         options?.size || sizes[Math.floor(Math.random() * sizes.length)]
       const speedHorz = options?.speedHorz || Math.random() * 10
       const speedUp = options?.speedUp || Math.random() * 25
       const spinVal = Math.random() * 360
@@ -78,32 +77,31 @@ function applyParticleEffect(
       const left = mouseX - size / 2
       const direction = Math.random() <= 0.5 ? -1 : 1
 
-      const particle = document.createElement('div')
+      const particle = document.createElement("div")
 
-      if (particleType === 'circle') {
-         const svgNS = 'http://www.w3.org/2000/svg'
-         const circleSVG = document.createElementNS(svgNS, 'svg')
-         const circle = document.createElementNS(svgNS, 'circle')
-         circle.setAttributeNS(null, 'cx', (size / 2).toString())
-         circle.setAttributeNS(null, 'cy', (size / 2).toString())
-         circle.setAttributeNS(null, 'r', (size / 2).toString())
+      if (particleType === "circle") {
+         const svgNS = "http://www.w3.org/2000/svg"
+         const circleSVG = document.createElementNS(svgNS, "svg")
+         const circle = document.createElementNS(svgNS, "circle")
+         circle.setAttributeNS(null, "cx", (size / 2).toString())
+         circle.setAttributeNS(null, "cy", (size / 2).toString())
+         circle.setAttributeNS(null, "r", (size / 2).toString())
          circle.setAttributeNS(
             null,
-            'fill',
-        `hsl(${Math.random() * 360}, 70%, 50%)`,
+            "fill",
+            `hsl(${Math.random() * 360}, 70%, 50%)`,
          )
 
          circleSVG.appendChild(circle)
-         circleSVG.setAttribute('width', size.toString())
-         circleSVG.setAttribute('height', size.toString())
+         circleSVG.setAttribute("width", size.toString())
+         circleSVG.setAttribute("height", size.toString())
 
          particle.appendChild(circleSVG)
-      }
-      else {
+      } else {
          particle.innerHTML = `<img src="${particleType}" width="${size}" height="${size}" style="border-radius: 50%">`
       }
 
-      particle.style.position = 'absolute'
+      particle.style.position = "absolute"
       particle.style.transform = `translate3d(${left}px, ${top}px, 0px) rotate(${spinVal}deg)`
 
       container.appendChild(particle)
@@ -129,22 +127,22 @@ function applyParticleEffect(
          p.spinVal = p.spinVal + p.spinSpeed
 
          if (
-            p.top
-            >= Math.max(window.innerHeight, document.body.clientHeight) + p.size
+            p.top >=
+            Math.max(window.innerHeight, document.body.clientHeight) + p.size
          ) {
-            particles = particles.filter(o => o !== p)
+            particles = particles.filter((o) => o !== p)
             p.element.remove()
          }
 
          p.element.setAttribute(
-            'style',
+            "style",
             [
-               'position:absolute',
-               'will-change:transform',
-          `top:${p.top}px`,
-          `left:${p.left}px`,
-          `transform:rotate(${p.spinVal}deg)`,
-            ].join(';'),
+               "position:absolute",
+               "will-change:transform",
+               `top:${p.top}px`,
+               `left:${p.left}px`,
+               `transform:rotate(${p.spinVal}deg)`,
+            ].join(";"),
          )
       })
    }
@@ -157,9 +155,9 @@ function applyParticleEffect(
    function loop() {
       const currentTime = performance.now()
       if (
-         autoAddParticle
-         && particles.length < limit
-         && currentTime - lastParticleTimestamp > particleGenerationDelay
+         autoAddParticle &&
+         particles.length < limit &&
+         currentTime - lastParticleTimestamp > particleGenerationDelay
       ) {
          generateParticle()
          lastParticleTimestamp = currentTime
@@ -171,18 +169,17 @@ function applyParticleEffect(
 
    loop()
 
-   const isTouchInteraction = 'ontouchstart' in window
+   const isTouchInteraction = "ontouchstart" in window
 
-   const tap = isTouchInteraction ? 'touchstart' : 'mousedown'
-   const tapEnd = isTouchInteraction ? 'touchend' : 'mouseup'
-   const move = isTouchInteraction ? 'touchmove' : 'mousemove'
+   const tap = isTouchInteraction ? "touchstart" : "mousedown"
+   const tapEnd = isTouchInteraction ? "touchend" : "mouseup"
+   const move = isTouchInteraction ? "touchmove" : "mousemove"
 
    const updateMousePosition = (e: MouseEvent | TouchEvent) => {
-      if ('touches' in e) {
+      if ("touches" in e) {
          mouseX = e.touches?.[0].clientX
          mouseY = e.touches?.[0].clientY
-      }
-      else {
+      } else {
          mouseX = e.clientX
          mouseY = e.clientY
       }
@@ -200,7 +197,7 @@ function applyParticleEffect(
    element.addEventListener(move, updateMousePosition, { passive: true })
    element.addEventListener(tap, tapHandler, { passive: true })
    element.addEventListener(tapEnd, disableAutoAddParticle, { passive: true })
-   element.addEventListener('mouseleave', disableAutoAddParticle, {
+   element.addEventListener("mouseleave", disableAutoAddParticle, {
       passive: true,
    })
 
@@ -208,15 +205,14 @@ function applyParticleEffect(
       element.removeEventListener(move, updateMousePosition)
       element.removeEventListener(tap, tapHandler)
       element.removeEventListener(tapEnd, disableAutoAddParticle)
-      element.removeEventListener('mouseleave', disableAutoAddParticle)
+      element.removeEventListener("mouseleave", disableAutoAddParticle)
 
       const interval = setInterval(() => {
          if (animationFrame && particles.length === 0) {
             cancelAnimationFrame(animationFrame)
             clearInterval(interval)
 
-            if (--instanceCounter === 0)
-               container.remove()
+            if (--instanceCounter === 0) container.remove()
          }
       }, 500)
    }
@@ -231,8 +227,7 @@ export const CoolMode: React.FC<CoolModeProps> = ({ children, options }) => {
    const ref = useRef<HTMLElement>(null)
 
    useEffect(() => {
-      if (ref.current)
-         return applyParticleEffect(ref.current, options)
+      if (ref.current) return applyParticleEffect(ref.current, options)
    }, [options])
 
    return React.cloneElement(children as React.ReactElement, { ref })
diff --git a/apps/web/registry/default/ui/dialog.tsx b/apps/web/registry/default/ui/dialog.tsx
index d20d32c4..e51fc96b 100644
--- a/apps/web/registry/default/ui/dialog.tsx
+++ b/apps/web/registry/default/ui/dialog.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { X } from 'lucide-react'
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Dialog = DialogPrimitive.Root
 
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
    <DialogPrimitive.Overlay
       ref={ref}
       className={ny(
-         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
+         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
          className,
       )}
       {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
          ref={ref}
          className={ny(
-            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
             className,
          )}
          {...props}
@@ -60,14 +60,14 @@ function DialogHeader({
    return (
       <div
          className={ny(
-            'flex flex-col space-y-1.5 text-center sm:text-left',
+            "flex flex-col space-y-1.5 text-center sm:text-left",
             className,
          )}
          {...props}
       />
    )
 }
-DialogHeader.displayName = 'DialogHeader'
+DialogHeader.displayName = "DialogHeader"
 
 function DialogFooter({
    className,
@@ -76,14 +76,14 @@ function DialogFooter({
    return (
       <div
          className={ny(
-            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
             className,
          )}
          {...props}
       />
    )
 }
-DialogFooter.displayName = 'DialogFooter'
+DialogFooter.displayName = "DialogFooter"
 
 const DialogTitle = React.forwardRef<
    React.ElementRef<typeof DialogPrimitive.Title>,
@@ -92,7 +92,7 @@ const DialogTitle = React.forwardRef<
    <DialogPrimitive.Title
       ref={ref}
       className={ny(
-         'text-lg font-semibold leading-none tracking-tight',
+         "text-lg font-semibold leading-none tracking-tight",
          className,
       )}
       {...props}
@@ -106,7 +106,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <DialogPrimitive.Description
       ref={ref}
-      className={ny('text-muted-foreground text-sm', className)}
+      className={ny("text-muted-foreground text-sm", className)}
       {...props}
    />
 ))
diff --git a/apps/web/registry/default/ui/dock.tsx b/apps/web/registry/default/ui/dock.tsx
index 941d70f1..0344cb11 100644
--- a/apps/web/registry/default/ui/dock.tsx
+++ b/apps/web/registry/default/ui/dock.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client"
 
-import type { PropsWithChildren } from 'react'
-import React, { useRef } from 'react'
-import { type VariantProps, cva } from 'class-variance-authority'
-import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion'
+import { type VariantProps, cva } from "class-variance-authority"
+import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"
+import type { PropsWithChildren } from "react"
+import React, { useRef } from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 export interface DockProps extends VariantProps<typeof dockVariants> {
    className?: string
    magnification?: number
    distance?: number
-   direction?: 'top' | 'middle' | 'bottom'
+   direction?: "top" | "middle" | "bottom"
    children: React.ReactNode
 }
 
@@ -19,7 +19,7 @@ const DEFAULT_MAGNIFICATION = 60
 const DEFAULT_DISTANCE = 140
 
 const dockVariants = cva(
-   'supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md',
+   "supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md",
 )
 
 const Dock = React.forwardRef<HTMLDivElement, DockProps>(
@@ -29,12 +29,12 @@ const Dock = React.forwardRef<HTMLDivElement, DockProps>(
          children,
          magnification = DEFAULT_MAGNIFICATION,
          distance = DEFAULT_DISTANCE,
-         direction = 'bottom',
+         direction = "bottom",
          ...props
       },
       ref,
    ) => {
-      const mouseX = useMotionValue(Infinity)
+      const mouseX = useMotionValue(Number.POSITIVE_INFINITY)
 
       const renderChildren = () => {
          return React.Children.map(children, (child) => {
@@ -53,13 +53,13 @@ const Dock = React.forwardRef<HTMLDivElement, DockProps>(
       return (
          <motion.div
             ref={ref}
-            onMouseMove={e => mouseX.set(e.pageX)}
-            onMouseLeave={() => mouseX.set(Infinity)}
+            onMouseMove={(e) => mouseX.set(e.pageX)}
+            onMouseLeave={() => mouseX.set(Number.POSITIVE_INFINITY)}
             {...props}
             className={ny(dockVariants({ className }), {
-               'items-start': direction === 'top',
-               'items-center': direction === 'middle',
-               'items-end': direction === 'bottom',
+               "items-start": direction === "top",
+               "items-center": direction === "middle",
+               "items-end": direction === "bottom",
             })}
          >
             {renderChildren()}
@@ -68,7 +68,7 @@ const Dock = React.forwardRef<HTMLDivElement, DockProps>(
    },
 )
 
-Dock.displayName = 'Dock'
+Dock.displayName = "Dock"
 
 export interface DockIconProps {
    size?: number
@@ -114,7 +114,7 @@ function DockIcon({
          ref={ref}
          style={{ width }}
          className={ny(
-            'flex aspect-square cursor-pointer items-center justify-center rounded-full',
+            "flex aspect-square cursor-pointer items-center justify-center rounded-full",
             className,
          )}
          {...props}
@@ -124,6 +124,6 @@ function DockIcon({
    )
 }
 
-DockIcon.displayName = 'DockIcon'
+DockIcon.displayName = "DockIcon"
 
 export { Dock, DockIcon, dockVariants }
diff --git a/apps/web/registry/default/ui/dot-pattern.tsx b/apps/web/registry/default/ui/dot-pattern.tsx
index be664eb0..fb8cd64a 100644
--- a/apps/web/registry/default/ui/dot-pattern.tsx
+++ b/apps/web/registry/default/ui/dot-pattern.tsx
@@ -1,16 +1,17 @@
-import { useId } from 'react'
-import { ny } from '~/lib/utils'
+import { useId } from "react"
 
-interface DotPatternProps {
-   width?: any
-   height?: any
-   x?: any
-   y?: any
-   cx?: any
-   cy?: any
-   cr?: any
+import { ny } from "~/registry/default/lib/utils"
+
+interface DotPatternProps extends React.SVGProps<SVGSVGElement> {
+   width?: number
+   height?: number
+   x?: number
+   y?: number
+   cx?: number
+   cy?: number
+   cr?: number
    className?: string
-   [key: string]: any
+   [key: string]: unknown
 }
 export function DotPattern({
    width = 16,
@@ -29,7 +30,7 @@ export function DotPattern({
       <svg
          aria-hidden="true"
          className={ny(
-            'pointer-events-none absolute inset-0 size-full fill-neutral-400/80',
+            "pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80",
             className,
          )}
          {...props}
@@ -47,9 +48,12 @@ export function DotPattern({
                <circle id="pattern-circle" cx={cx} cy={cy} r={cr} />
             </pattern>
          </defs>
-         <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+         <rect
+            width="100%"
+            height="100%"
+            strokeWidth={0}
+            fill={`url(#${id})`}
+         />
       </svg>
    )
 }
-
-export default DotPattern
diff --git a/apps/web/registry/default/ui/drawer.tsx b/apps/web/registry/default/ui/drawer.tsx
index ddb70b60..e06f0182 100644
--- a/apps/web/registry/default/ui/drawer.tsx
+++ b/apps/web/registry/default/ui/drawer.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Drawer as DrawerPrimitive } from 'vaul'
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 function Drawer({
    shouldScaleBackground = true,
@@ -16,7 +16,7 @@ function Drawer({
       />
    )
 }
-Drawer.displayName = 'Drawer'
+Drawer.displayName = "Drawer"
 
 const DrawerTrigger = DrawerPrimitive.Trigger
 
@@ -30,7 +30,7 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <DrawerPrimitive.Overlay
       ref={ref}
-      className={ny('fixed inset-0 z-50 bg-black/80', className)}
+      className={ny("fixed inset-0 z-50 bg-black/80", className)}
       {...props}
    />
 ))
@@ -45,7 +45,7 @@ const DrawerContent = React.forwardRef<
       <DrawerPrimitive.Content
          ref={ref}
          className={ny(
-            'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border',
+            "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
             className,
          )}
          {...props}
@@ -55,7 +55,7 @@ const DrawerContent = React.forwardRef<
       </DrawerPrimitive.Content>
    </DrawerPortal>
 ))
-DrawerContent.displayName = 'DrawerContent'
+DrawerContent.displayName = "DrawerContent"
 
 function DrawerHeader({
    className,
@@ -63,12 +63,12 @@ function DrawerHeader({
 }: React.HTMLAttributes<HTMLDivElement>) {
    return (
       <div
-         className={ny('grid gap-1.5 p-4 text-center sm:text-left', className)}
+         className={ny("grid gap-1.5 p-4 text-center sm:text-left", className)}
          {...props}
       />
    )
 }
-DrawerHeader.displayName = 'DrawerHeader'
+DrawerHeader.displayName = "DrawerHeader"
 
 function DrawerFooter({
    className,
@@ -76,12 +76,12 @@ function DrawerFooter({
 }: React.HTMLAttributes<HTMLDivElement>) {
    return (
       <div
-         className={ny('mt-auto flex flex-col gap-2 p-4', className)}
+         className={ny("mt-auto flex flex-col gap-2 p-4", className)}
          {...props}
       />
    )
 }
-DrawerFooter.displayName = 'DrawerFooter'
+DrawerFooter.displayName = "DrawerFooter"
 
 const DrawerTitle = React.forwardRef<
    React.ElementRef<typeof DrawerPrimitive.Title>,
@@ -90,7 +90,7 @@ const DrawerTitle = React.forwardRef<
    <DrawerPrimitive.Title
       ref={ref}
       className={ny(
-         'text-lg font-semibold leading-none tracking-tight',
+         "text-lg font-semibold leading-none tracking-tight",
          className,
       )}
       {...props}
@@ -104,7 +104,7 @@ const DrawerDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <DrawerPrimitive.Description
       ref={ref}
-      className={ny('text-muted-foreground text-sm', className)}
+      className={ny("text-muted-foreground text-sm", className)}
       {...props}
    />
 ))
diff --git a/apps/web/registry/default/ui/dropdown-menu.tsx b/apps/web/registry/default/ui/dropdown-menu.tsx
index 9bfae431..396c9a6c 100644
--- a/apps/web/registry/default/ui/dropdown-menu.tsx
+++ b/apps/web/registry/default/ui/dropdown-menu.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { Check, ChevronRight, Circle } from 'lucide-react'
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -27,8 +27,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
    <DropdownMenuPrimitive.SubTrigger
       ref={ref}
       className={ny(
-         'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-         inset && 'pl-8',
+         "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -37,8 +37,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
       <ChevronRight className="ml-auto size-4" />
    </DropdownMenuPrimitive.SubTrigger>
 ))
-DropdownMenuSubTrigger.displayName
-  = DropdownMenuPrimitive.SubTrigger.displayName
+DropdownMenuSubTrigger.displayName =
+   DropdownMenuPrimitive.SubTrigger.displayName
 
 const DropdownMenuSubContent = React.forwardRef<
    React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -47,14 +47,14 @@ const DropdownMenuSubContent = React.forwardRef<
    <DropdownMenuPrimitive.SubContent
       ref={ref}
       className={ny(
-         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
          className,
       )}
       {...props}
    />
 ))
-DropdownMenuSubContent.displayName
-  = DropdownMenuPrimitive.SubContent.displayName
+DropdownMenuSubContent.displayName =
+   DropdownMenuPrimitive.SubContent.displayName
 
 const DropdownMenuContent = React.forwardRef<
    React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
          ref={ref}
          sideOffset={sideOffset}
          className={ny(
-            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+            "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md",
             className,
          )}
          {...props}
@@ -83,8 +83,8 @@ const DropdownMenuItem = React.forwardRef<
    <DropdownMenuPrimitive.Item
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-         inset && 'pl-8',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
    <DropdownMenuPrimitive.CheckboxItem
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       checked={checked}
@@ -113,8 +113,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
       {children}
    </DropdownMenuPrimitive.CheckboxItem>
 ))
-DropdownMenuCheckboxItem.displayName
-  = DropdownMenuPrimitive.CheckboxItem.displayName
+DropdownMenuCheckboxItem.displayName =
+   DropdownMenuPrimitive.CheckboxItem.displayName
 
 const DropdownMenuRadioItem = React.forwardRef<
    React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
    <DropdownMenuPrimitive.RadioItem
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       {...props}
@@ -147,8 +147,8 @@ const DropdownMenuLabel = React.forwardRef<
    <DropdownMenuPrimitive.Label
       ref={ref}
       className={ny(
-         'px-2 py-1.5 text-sm font-semibold',
-         inset && 'pl-8',
+         "px-2 py-1.5 text-sm font-semibold",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -162,7 +162,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <DropdownMenuPrimitive.Separator
       ref={ref}
-      className={ny('bg-muted -mx-1 my-1 h-px', className)}
+      className={ny("bg-muted -mx-1 my-1 h-px", className)}
       {...props}
    />
 ))
@@ -174,12 +174,12 @@ function DropdownMenuShortcut({
 }: React.HTMLAttributes<HTMLSpanElement>) {
    return (
       <span
-         className={ny('ml-auto text-xs tracking-widest opacity-60', className)}
+         className={ny("ml-auto text-xs tracking-widest opacity-60", className)}
          {...props}
       />
    )
 }
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
 
 export {
    DropdownMenu,
diff --git a/apps/web/registry/default/ui/fade-in.tsx b/apps/web/registry/default/ui/fade-in.tsx
index a5793365..0aff5ab8 100644
--- a/apps/web/registry/default/ui/fade-in.tsx
+++ b/apps/web/registry/default/ui/fade-in.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { useRef } from 'react'
-import { motion, useInView } from 'framer-motion'
+import { motion, useInView } from "framer-motion"
+import { useRef } from "react"
 
 export default function FadeIn({
    children,
@@ -19,7 +19,7 @@ export default function FadeIn({
    const ref = useRef(null)
    const inView = useInView(ref, {
       once: true,
-      margin: viewTriggerOffset ? '-128px' : '0px',
+      margin: viewTriggerOffset ? "-128px" : "0px",
    })
 
    const fadeUpVariants = {
@@ -36,7 +36,7 @@ export default function FadeIn({
    return (
       <motion.div
          ref={ref}
-         animate={inView ? 'animate' : 'initial'}
+         animate={inView ? "animate" : "initial"}
          variants={fadeUpVariants}
          className={className}
          initial={false}
@@ -44,7 +44,7 @@ export default function FadeIn({
             duration: 0.6,
             delay: delay || 0,
             ease: [0.21, 0.47, 0.32, 0.98],
-            type: 'spring',
+            type: "spring",
          }}
       >
          {children}
diff --git a/apps/web/registry/default/ui/fade-text.tsx b/apps/web/registry/default/ui/fade-text.tsx
index 1e98b65b..790a4e25 100644
--- a/apps/web/registry/default/ui/fade-text.tsx
+++ b/apps/web/registry/default/ui/fade-text.tsx
@@ -1,22 +1,22 @@
-'use client'
+"use client"
 
-import type { Variants } from 'framer-motion'
-import { motion } from 'framer-motion'
-import { useMemo } from 'react'
+import type { Variants } from "framer-motion"
+import { motion } from "framer-motion"
+import { useMemo } from "react"
 
 interface FadeTextProps {
    className?: string
-   direction?: 'up' | 'down' | 'left' | 'right'
+   direction?: "up" | "down" | "left" | "right"
    framerProps?: Variants
    text: string
 }
 
 export function FadeText({
-   direction = 'up',
+   direction = "up",
    className,
    framerProps = {
       hidden: { opacity: 0 },
-      show: { opacity: 1, transition: { type: 'spring' } },
+      show: { opacity: 1, transition: { type: "spring" } },
    },
    text,
 }: FadeTextProps) {
@@ -25,11 +25,11 @@ export function FadeText({
       return map[direction]
    }, [direction])
 
-   const axis = direction === 'up' || direction === 'down' ? 'y' : 'x'
+   const axis = direction === "up" || direction === "down" ? "y" : "x"
 
    const FADE_ANIMATION_VARIANTS = useMemo(() => {
       const { hidden, show, ...rest } = framerProps as {
-         [name: string]: { [name: string]: number, opacity: number }
+         [name: string]: { [name: string]: number; opacity: number }
       }
 
       return {
diff --git a/apps/web/registry/default/ui/file-tree.tsx b/apps/web/registry/default/ui/file-tree.tsx
index dfbc4dda..59733a2e 100644
--- a/apps/web/registry/default/ui/file-tree.tsx
+++ b/apps/web/registry/default/ui/file-tree.tsx
@@ -1,19 +1,20 @@
-'use client'
+"use client"
 
-import React, {
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react"
+import type React from "react"
+import {
    createContext,
    forwardRef,
    useCallback,
    useContext,
    useEffect,
    useState,
-} from 'react'
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { FileIcon, FolderIcon, FolderOpenIcon } from 'lucide-react'
+} from "react"
 
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import { ScrollArea } from '~/registry/default/ui/scroll-area'
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import { ScrollArea } from "~/registry/default/ui/scroll-area"
 
 interface TreeViewElement {
    id: string
@@ -31,7 +32,7 @@ interface TreeContextProps {
    setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>
    openIcon?: React.ReactNode
    closeIcon?: React.ReactNode
-   direction: 'rtl' | 'ltr'
+   direction: "rtl" | "ltr"
 }
 
 const TreeContext = createContext<TreeContextProps | null>(null)
@@ -39,14 +40,14 @@ const TreeContext = createContext<TreeContextProps | null>(null)
 function useTree() {
    const context = useContext(TreeContext)
    if (!context) {
-      throw new Error('useTree must be used within a TreeProvider')
+      throw new Error("useTree must be used within a TreeProvider")
    }
    return context
 }
 
 interface TreeViewComponentProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-type Direction = 'rtl' | 'ltr' | undefined
+type Direction = "rtl" | "ltr" | undefined
 
 type TreeViewProps = {
    initialSelectedId?: string
@@ -87,7 +88,7 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
       const handleExpand = useCallback((id: string) => {
          setExpandedItems((prev) => {
             if (prev?.includes(id)) {
-               return prev.filter(item => item !== id)
+               return prev.filter((item) => item !== id)
             }
             return [...(prev ?? []), id]
          })
@@ -95,8 +96,7 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
 
       const expandSpecificTargetedElements = useCallback(
          (elements?: TreeViewElement[], selectId?: string) => {
-            if (!elements || !selectId)
-               return
+            if (!elements || !selectId) return
             const findParent = (
                currentElement: TreeViewElement,
                currentPath: string[] = [],
@@ -105,20 +105,22 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
                const newPath = [...currentPath, currentElement.id]
                if (currentElement.id === selectId) {
                   if (isSelectable) {
-                     setExpandedItems(prev => [...(prev ?? []), ...newPath])
-                  }
-                  else {
+                     setExpandedItems((prev) => [...(prev ?? []), ...newPath])
+                  } else {
                      if (newPath.includes(currentElement.id)) {
                         newPath.pop()
-                        setExpandedItems(prev => [...(prev ?? []), ...newPath])
+                        setExpandedItems((prev) => [
+                           ...(prev ?? []),
+                           ...newPath,
+                        ])
                      }
                   }
                   return
                }
                if (
-                  isSelectable
-                  && currentElement.children
-                  && currentElement.children.length > 0
+                  isSelectable &&
+                  currentElement.children &&
+                  currentElement.children.length > 0
                ) {
                   currentElement.children.forEach((child) => {
                      findParent(child, newPath)
@@ -138,7 +140,7 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
          }
       }, [initialSelectedId, elements])
 
-      const direction = dir === 'rtl' ? 'rtl' : 'ltr'
+      const direction = dir === "rtl" ? "rtl" : "ltr"
 
       return (
          <TreeContext.Provider
@@ -154,7 +156,7 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
                direction,
             }}
          >
-            <div className={ny('size-full', className)}>
+            <div className={ny("size-full", className)}>
                <ScrollArea
                   ref={ref}
                   className="relative h-full px-2"
@@ -166,8 +168,9 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
                      defaultValue={expandedItems}
                      value={expandedItems}
                      className="flex flex-col gap-1"
-                     onValueChange={value =>
-                        setExpandedItems(prev => [...(prev ?? []), value[0]])}
+                     onValueChange={(value) =>
+                        setExpandedItems((prev) => [...(prev ?? []), value[0]])
+                     }
                      dir={dir as Direction}
                   >
                      {children}
@@ -179,7 +182,7 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
    },
 )
 
-Tree.displayName = 'Tree'
+Tree.displayName = "Tree"
 
 const TreeIndicator = forwardRef<
    HTMLDivElement,
@@ -192,7 +195,7 @@ const TreeIndicator = forwardRef<
          dir={direction}
          ref={ref}
          className={ny(
-            'bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5',
+            "bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5",
             className,
          )}
          {...props}
@@ -200,7 +203,7 @@ const TreeIndicator = forwardRef<
    )
 })
 
-TreeIndicator.displayName = 'TreeIndicator'
+TreeIndicator.displayName = "TreeIndicator"
 
 interface FolderComponentProps
    extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {}
@@ -214,7 +217,7 @@ type FolderProps = {
 
 const Folder = forwardRef<
    HTMLDivElement,
-  FolderProps & React.HTMLAttributes<HTMLDivElement>
+   FolderProps & React.HTMLAttributes<HTMLDivElement>
 >(
    (
       {
@@ -246,20 +249,20 @@ const Folder = forwardRef<
          >
             <AccordionPrimitive.Trigger
                className={ny(
-            `flex items-center gap-1 rounded-md text-sm`,
-            className,
-            {
-               'bg-muted rounded-md': isSelect && isSelectable,
-               'cursor-pointer': isSelectable,
-               'cursor-not-allowed opacity-50': !isSelectable,
-            },
+                  `flex items-center gap-1 rounded-md text-sm`,
+                  className,
+                  {
+                     "bg-muted rounded-md": isSelect && isSelectable,
+                     "cursor-pointer": isSelectable,
+                     "cursor-not-allowed opacity-50": !isSelectable,
+                  },
                )}
                disabled={!isSelectable}
                onClick={() => handleExpand(value)}
             >
                {expandedItems?.includes(value)
-                  ? openIcon ?? <FolderOpenIcon className="size-4" />
-                  : closeIcon ?? <FolderIcon className="size-4" />}
+                  ? (openIcon ?? <FolderOpenIcon className="size-4" />)
+                  : (closeIcon ?? <FolderIcon className="size-4" />)}
                <span>{element}</span>
             </AccordionPrimitive.Trigger>
             <AccordionPrimitive.Content className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative h-full overflow-hidden text-sm">
@@ -271,7 +274,7 @@ const Folder = forwardRef<
                   defaultValue={expandedItems}
                   value={expandedItems}
                   onValueChange={(value) => {
-                     setExpandedItems?.(prev => [...(prev ?? []), value[0]])
+                     setExpandedItems?.((prev) => [...(prev ?? []), value[0]])
                   }}
                >
                   {children}
@@ -282,7 +285,7 @@ const Folder = forwardRef<
    },
 )
 
-Folder.displayName = 'Folder'
+Folder.displayName = "Folder"
 
 const File = forwardRef<
    HTMLButtonElement,
@@ -294,48 +297,50 @@ const File = forwardRef<
       fileIcon?: React.ReactNode
    } & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(
-         (
-            {
-               value,
-               className,
-               handleSelect,
-               isSelectable = true,
-               isSelect,
-               fileIcon,
-               children,
-               ...props
-            },
-            ref,
-         ) => {
-            const { direction, selectedId, selectItem } = useTree()
-            const isSelected = isSelect ?? selectedId === value
-            return (
-               <AccordionPrimitive.Item value={value} className="relative">
-                  <AccordionPrimitive.Trigger
-                     ref={ref}
-                     {...props}
-                     dir={direction}
-                     disabled={!isSelectable}
-                     aria-label="File"
-                     className={ny(
-                        'flex cursor-pointer items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out  rtl:pl-1 rtl:pr-0',
-                        {
-                           'bg-muted': isSelected && isSelectable,
-                        },
-                        isSelectable ? 'cursor-pointer' : 'cursor-not-allowed opacity-50',
-                        className,
-                     )}
-                     onClick={() => selectItem(value)}
-                  >
-                     {fileIcon ?? <FileIcon className="size-4" />}
-                     {children}
-                  </AccordionPrimitive.Trigger>
-               </AccordionPrimitive.Item>
-            )
-         },
-         )
+   (
+      {
+         value,
+         className,
+         handleSelect,
+         isSelectable = true,
+         isSelect,
+         fileIcon,
+         children,
+         ...props
+      },
+      ref,
+   ) => {
+      const { direction, selectedId, selectItem } = useTree()
+      const isSelected = isSelect ?? selectedId === value
+      return (
+         <AccordionPrimitive.Item value={value} className="relative">
+            <AccordionPrimitive.Trigger
+               ref={ref}
+               {...props}
+               dir={direction}
+               disabled={!isSelectable}
+               aria-label="File"
+               className={ny(
+                  "flex cursor-pointer items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out  rtl:pl-1 rtl:pr-0",
+                  {
+                     "bg-muted": isSelected && isSelectable,
+                  },
+                  isSelectable
+                     ? "cursor-pointer"
+                     : "cursor-not-allowed opacity-50",
+                  className,
+               )}
+               onClick={() => selectItem(value)}
+            >
+               {fileIcon ?? <FileIcon className="size-4" />}
+               {children}
+            </AccordionPrimitive.Trigger>
+         </AccordionPrimitive.Item>
+      )
+   },
+)
 
-File.displayName = 'File'
+File.displayName = "File"
 
 const CollapseButton = forwardRef<
    HTMLButtonElement,
@@ -350,7 +355,7 @@ const CollapseButton = forwardRef<
       const expandTree = (element: TreeViewElement) => {
          const isSelectable = element.isSelectable ?? true
          if (isSelectable && element.children && element.children.length > 0) {
-            setExpandedItems?.(prev => [...(prev ?? []), element.id])
+            setExpandedItems?.((prev) => [...(prev ?? []), element.id])
             element.children.forEach(expandTree)
          }
       }
@@ -388,6 +393,6 @@ const CollapseButton = forwardRef<
    )
 })
 
-CollapseButton.displayName = 'CollapseButton'
+CollapseButton.displayName = "CollapseButton"
 
 export { CollapseButton, File, Folder, Tree, type TreeViewElement }
diff --git a/apps/web/registry/default/ui/flickering-grid.tsx b/apps/web/registry/default/ui/flickering-grid.tsx
index 3e65047d..67c7671e 100644
--- a/apps/web/registry/default/ui/flickering-grid.tsx
+++ b/apps/web/registry/default/ui/flickering-grid.tsx
@@ -1,14 +1,10 @@
-'use client'
+"use client"
 
-import React, {
-   useCallback,
-   useEffect,
-   useMemo,
-   useRef,
-   useState,
-} from 'react'
+import type React from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { ny } from "~/registry/default/lib/utils"
 
-interface FlickeringGridProps {
+interface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {
    squareSize?: number
    gridGap?: number
    flickerChance?: number
@@ -19,64 +15,57 @@ interface FlickeringGridProps {
    maxOpacity?: number
 }
 
-const FlickeringGrid: React.FC<FlickeringGridProps> = ({
+export const FlickeringGrid: React.FC<FlickeringGridProps> = ({
    squareSize = 4,
    gridGap = 6,
    flickerChance = 0.3,
-   color = 'rgb(0, 0, 0)',
+   color = "rgb(0, 0, 0)",
    width,
    height,
    className,
    maxOpacity = 0.3,
+   ...props
 }) => {
    const canvasRef = useRef<HTMLCanvasElement>(null)
+   const containerRef = useRef<HTMLDivElement>(null)
    const [isInView, setIsInView] = useState(false)
+   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 })
 
    const memoizedColor = useMemo(() => {
       const toRGBA = (color: string) => {
-         if (typeof window === 'undefined') {
+         if (typeof window === "undefined") {
             return `rgba(0, 0, 0,`
          }
-         const canvas = document.createElement('canvas')
+         const canvas = document.createElement("canvas")
          canvas.width = canvas.height = 1
-         const ctx = canvas.getContext('2d')
-         if (!ctx)
-            return 'rgba(255, 0, 0,'
+         const ctx = canvas.getContext("2d")
+         if (!ctx) return "rgba(255, 0, 0,"
          ctx.fillStyle = color
          ctx.fillRect(0, 0, 1, 1)
-         const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data
+         const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)
          return `rgba(${r}, ${g}, ${b},`
       }
       return toRGBA(color)
    }, [color])
 
    const setupCanvas = useCallback(
-      (canvas: HTMLCanvasElement) => {
-         const canvasWidth = width || canvas.clientWidth
-         const canvasHeight = height || canvas.clientHeight
+      (canvas: HTMLCanvasElement, width: number, height: number) => {
          const dpr = window.devicePixelRatio || 1
-         canvas.width = canvasWidth * dpr
-         canvas.height = canvasHeight * dpr
-         canvas.style.width = `${canvasWidth}px`
-         canvas.style.height = `${canvasHeight}px`
-         const cols = Math.floor(canvasWidth / (squareSize + gridGap))
-         const rows = Math.floor(canvasHeight / (squareSize + gridGap))
+         canvas.width = width * dpr
+         canvas.height = height * dpr
+         canvas.style.width = `${width}px`
+         canvas.style.height = `${height}px`
+         const cols = Math.floor(width / (squareSize + gridGap))
+         const rows = Math.floor(height / (squareSize + gridGap))
 
          const squares = new Float32Array(cols * rows)
          for (let i = 0; i < squares.length; i++) {
             squares[i] = Math.random() * maxOpacity
          }
 
-         return {
-            width: canvasWidth,
-            height: canvasHeight,
-            cols,
-            rows,
-            squares,
-            dpr,
-         }
+         return { cols, rows, squares, dpr }
       },
-      [squareSize, gridGap, width, height, maxOpacity],
+      [squareSize, gridGap, maxOpacity],
    )
 
    const updateSquares = useCallback(
@@ -101,7 +90,7 @@ const FlickeringGrid: React.FC<FlickeringGridProps> = ({
          dpr: number,
       ) => {
          ctx.clearRect(0, 0, width, height)
-         ctx.fillStyle = 'transparent'
+         ctx.fillStyle = "transparent"
          ctx.fillRect(0, 0, width, height)
 
          for (let i = 0; i < cols; i++) {
@@ -122,67 +111,84 @@ const FlickeringGrid: React.FC<FlickeringGridProps> = ({
 
    useEffect(() => {
       const canvas = canvasRef.current
-      if (!canvas)
-         return
+      const container = containerRef.current
+      if (!canvas || !container) return
 
-      const ctx = canvas.getContext('2d')
-      if (!ctx)
-         return
+      const ctx = canvas.getContext("2d")
+      if (!ctx) return
 
       let animationFrameId: number
-      let { width, height, cols, rows, squares, dpr } = setupCanvas(canvas)
+      let gridParams: ReturnType<typeof setupCanvas>
+
+      const updateCanvasSize = () => {
+         const newWidth = width || container.clientWidth
+         const newHeight = height || container.clientHeight
+         setCanvasSize({ width: newWidth, height: newHeight })
+         gridParams = setupCanvas(canvas, newWidth, newHeight)
+      }
+
+      updateCanvasSize()
 
       let lastTime = 0
       const animate = (time: number) => {
-         if (!isInView)
-            return
+         if (!isInView) return
 
          const deltaTime = (time - lastTime) / 1000
          lastTime = time
 
-         updateSquares(squares, deltaTime)
-         drawGrid(ctx, width * dpr, height * dpr, cols, rows, squares, dpr)
+         updateSquares(gridParams.squares, deltaTime)
+         drawGrid(
+            ctx,
+            canvas.width,
+            canvas.height,
+            gridParams.cols,
+            gridParams.rows,
+            gridParams.squares,
+            gridParams.dpr,
+         )
          animationFrameId = requestAnimationFrame(animate)
       }
 
-      const handleResize = () => {
-         ({ width, height, cols, rows, squares, dpr } = setupCanvas(canvas))
-      }
+      const resizeObserver = new ResizeObserver(() => {
+         updateCanvasSize()
+      })
+
+      resizeObserver.observe(container)
 
-      const observer = new IntersectionObserver(
+      const intersectionObserver = new IntersectionObserver(
          ([entry]) => {
             setIsInView(entry.isIntersecting)
          },
          { threshold: 0 },
       )
 
-      observer.observe(canvas)
-
-      window.addEventListener('resize', handleResize)
+      intersectionObserver.observe(canvas)
 
       if (isInView) {
          animationFrameId = requestAnimationFrame(animate)
       }
 
       return () => {
-         window.removeEventListener('resize', handleResize)
          cancelAnimationFrame(animationFrameId)
-         observer.disconnect()
+         resizeObserver.disconnect()
+         intersectionObserver.disconnect()
       }
    }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])
 
    return (
-      <canvas
-         ref={canvasRef}
-         className={`pointer-events-none size-full ${className}`}
-         style={{
-            width: width || '100%',
-            height: height || '100%',
-         }}
-         width={width}
-         height={height}
-      />
+      <div
+         ref={containerRef}
+         className={ny(`h-full w-full ${className}`)}
+         {...props}
+      >
+         <canvas
+            ref={canvasRef}
+            className="pointer-events-none"
+            style={{
+               width: canvasSize.width,
+               height: canvasSize.height,
+            }}
+         />
+      </div>
    )
 }
-
-export default FlickeringGrid
diff --git a/apps/web/registry/default/ui/flip-text.tsx b/apps/web/registry/default/ui/flip-text.tsx
index 51da4969..12cb43dd 100644
--- a/apps/web/registry/default/ui/flip-text.tsx
+++ b/apps/web/registry/default/ui/flip-text.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import type { Variants } from 'framer-motion'
-import { AnimatePresence, motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import type { Variants } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface SlightFlipProps {
    word: string
@@ -25,7 +25,7 @@ export default function SlightFlip({
    return (
       <div className="flex justify-center space-x-2">
          <AnimatePresence mode="wait">
-            {word.split('').map((char, i) => (
+            {word.split("").map((char, i) => (
                <motion.span
                   key={i}
                   initial="hidden"
@@ -33,7 +33,7 @@ export default function SlightFlip({
                   exit="hidden"
                   variants={framerProps}
                   transition={{ duration, delay: i * delayMultiple }}
-                  className={ny('origin-center drop-shadow-sm', className)}
+                  className={ny("origin-center drop-shadow-sm", className)}
                >
                   {char}
                </motion.span>
diff --git a/apps/web/registry/default/ui/form.tsx b/apps/web/registry/default/ui/form.tsx
index 15574a85..17bb5973 100644
--- a/apps/web/registry/default/ui/form.tsx
+++ b/apps/web/registry/default/ui/form.tsx
@@ -1,13 +1,18 @@
-'use client'
-
-import * as React from 'react'
-import type * as LabelPrimitive from '@radix-ui/react-label'
-import { Slot } from '@radix-ui/react-slot'
-import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form'
-import { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form'
-
-import { ny } from '~/lib/utils'
-import { Label } from '~/registry/default/ui/label'
+"use client"
+
+import type * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import * as React from "react"
+import type { ControllerProps, FieldPath, FieldValues } from "react-hook-form"
+import {
+   Controller,
+   FormProvider,
+   useFormContext,
+   useFormState,
+} from "react-hook-form"
+
+import { ny } from "~/lib/utils"
+import { Label } from "~/registry/default/ui/label"
 
 const Form = FormProvider
 
@@ -41,7 +46,7 @@ function useFormField() {
    const fieldState = getFieldState(fieldContext.name, formState)
 
    if (!fieldContext)
-      throw new Error('useFormField should be used within <FormField>')
+      throw new Error("useFormField should be used within <FormField>")
 
    const { id } = itemContext
 
@@ -71,11 +76,11 @@ const FormItem = React.forwardRef<
 
    return (
       <FormItemContext.Provider value={{ id }}>
-         <div ref={ref} className={ny('space-y-2', className)} {...props} />
+         <div ref={ref} className={ny("space-y-2", className)} {...props} />
       </FormItemContext.Provider>
    )
 })
-FormItem.displayName = 'FormItem'
+FormItem.displayName = "FormItem"
 
 const FormLabel = React.forwardRef<
    React.ElementRef<typeof LabelPrimitive.Root>,
@@ -86,20 +91,20 @@ const FormLabel = React.forwardRef<
    return (
       <Label
          ref={ref}
-         className={ny(error && 'text-destructive', className)}
+         className={ny(error && "text-destructive", className)}
          htmlFor={formItemId}
          {...props}
       />
    )
 })
-FormLabel.displayName = 'FormLabel'
+FormLabel.displayName = "FormLabel"
 
 const FormControl = React.forwardRef<
    React.ElementRef<typeof Slot>,
    React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-   const { error, formItemId, formDescriptionId, formMessageId }
-    = useFormField()
+   const { error, formItemId, formDescriptionId, formMessageId } =
+      useFormField()
 
    return (
       <Slot
@@ -115,7 +120,7 @@ const FormControl = React.forwardRef<
       />
    )
 })
-FormControl.displayName = 'FormControl'
+FormControl.displayName = "FormControl"
 
 const FormDescription = React.forwardRef<
    HTMLParagraphElement,
@@ -127,12 +132,12 @@ const FormDescription = React.forwardRef<
       <p
          ref={ref}
          id={formDescriptionId}
-         className={ny('text-muted-foreground text-sm', className)}
+         className={ny("text-muted-foreground text-sm", className)}
          {...props}
       />
    )
 })
-FormDescription.displayName = 'FormDescription'
+FormDescription.displayName = "FormDescription"
 
 const FormMessage = React.forwardRef<
    HTMLParagraphElement,
@@ -141,21 +146,20 @@ const FormMessage = React.forwardRef<
    const { error, formMessageId } = useFormField()
    const body = error ? String(error?.message) : children
 
-   if (!body)
-      return null
+   if (!body) return null
 
    return (
       <p
          ref={ref}
          id={formMessageId}
-         className={ny('text-destructive text-sm font-medium', className)}
+         className={ny("text-destructive text-sm font-medium", className)}
          {...props}
       >
          {body}
       </p>
    )
 })
-FormMessage.displayName = 'FormMessage'
+FormMessage.displayName = "FormMessage"
 
 const FormGlobalError = React.forwardRef<
    HTMLParagraphElement,
@@ -163,20 +167,19 @@ const FormGlobalError = React.forwardRef<
 >(({ className, ...props }, ref) => {
    const { errors } = useFormState()
    const rootError = errors.root
-   if (!rootError)
-      return null
+   if (!rootError) return null
 
    return (
       <p
          ref={ref}
-         className={ny('text-destructive text-sm font-medium', className)}
+         className={ny("text-destructive text-sm font-medium", className)}
          {...props}
       >
          {rootError.message}
       </p>
    )
 })
-FormGlobalError.displayName = 'FormGlobalError'
+FormGlobalError.displayName = "FormGlobalError"
 
 export {
    useFormField,
diff --git a/apps/web/registry/default/ui/gauge-circle.tsx b/apps/web/registry/default/ui/gauge-circle.tsx
index ffe96bec..f8999440 100644
--- a/apps/web/registry/default/ui/gauge-circle.tsx
+++ b/apps/web/registry/default/ui/gauge-circle.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface Props {
    max: number
@@ -23,19 +23,19 @@ export default function GaugeCircle({
 
    return (
       <div
-         className={ny('relative size-40 text-2xl font-semibold', className)}
+         className={ny("relative size-40 text-2xl font-semibold", className)}
          style={
             {
-               '--circle-size': '100px',
-               '--circumference': `${circumference}px`,
-               '--percent-to-px': `${percentPx}px`,
-               '--gap-percent': '5',
-               '--offset-factor': '0',
-               '--transition-length': '1s',
-               '--transition-step': '200ms',
-               '--delay': '0s',
-               '--percent-to-deg': '3.6deg',
-               'transform': 'translateZ(0)',
+               "--circle-size": "100px",
+               "--circumference": `${circumference}px`,
+               "--percent-to-px": `${percentPx}px`,
+               "--gap-percent": "5",
+               "--offset-factor": "0",
+               "--transition-length": "1s",
+               "--transition-step": "200ms",
+               "--delay": "0s",
+               "--percent-to-deg": "3.6deg",
+               transform: "translateZ(0)",
             } as React.CSSProperties
          }
       >
@@ -59,8 +59,8 @@ export default function GaugeCircle({
                      stroke: gaugeSecondaryColor,
                      strokeDasharray: `${(90 - currentPercent) * percentPx}px ${circumference}px`,
                      transform: `rotate(calc(1turn - 90deg - (5 * 3.6deg * (1 - 0)))) scaleY(-1)`,
-                     transition: 'all 1s ease 0s',
-                     transformOrigin: '50px 50px',
+                     transition: "all 1s ease 0s",
+                     transformOrigin: "50px 50px",
                   }}
                />
             )}
@@ -76,18 +76,18 @@ export default function GaugeCircle({
                style={{
                   stroke: gaugePrimaryColor,
                   strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,
-                  transition: '1s ease 0s, stroke 1s ease 0s',
-                  transitionProperty: 'stroke-dasharray,transform',
-                  transform: 'rotate(calc(-90deg + 5 * 0 * 3.6deg))',
-                  transformOrigin: '50px 50px',
+                  transition: "1s ease 0s, stroke 1s ease 0s",
+                  transitionProperty: "stroke-dasharray,transform",
+                  transform: "rotate(calc(-90deg + 5 * 0 * 3.6deg))",
+                  transformOrigin: "50px 50px",
                }}
             />
          </svg>
          <span
             className="animate-in fade-in absolute inset-0 m-auto size-fit"
             style={{
-               animationDelay: '0s',
-               transitionDuration: '1s',
+               animationDelay: "0s",
+               transitionDuration: "1s",
             }}
          >
             {Math.round(currentPercent)}
diff --git a/apps/web/registry/default/ui/globe-grid.tsx b/apps/web/registry/default/ui/globe-grid.tsx
index 1d34ab83..44ebc3e2 100644
--- a/apps/web/registry/default/ui/globe-grid.tsx
+++ b/apps/web/registry/default/ui/globe-grid.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { ny } from '~/lib/utils'
+import type * as React from "react"
+import { ny } from "~/lib/utils"
 
 interface GlobeGridProps {
    fullGlobe?: boolean
@@ -10,18 +10,25 @@ interface GlobeGridProps {
 
 export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
    return (
-      <div className={ny('relative flex min-h-[350px] w-full items-center justify-center overflow-hidden', className)}>
+      <div
+         className={ny(
+            "relative flex min-h-[350px] w-full items-center justify-center overflow-hidden",
+            className,
+         )}
+      >
          <section
             className="relative w-full max-w-[600px]"
-            style={{
-               '--sm-grid-columns': '6',
-               '--md-grid-columns': '6',
-               '--sm-grid-rows': fullGlobe ? '12' : '6',
-               '--md-grid-rows': fullGlobe ? '12' : '6',
-               '--grid-columns': 'var(--sm-grid-columns)',
-               '--grid-rows': 'var(--sm-grid-rows)',
-               'aspectRatio': fullGlobe ? '1/1' : '2/1',
-            } as React.CSSProperties}
+            style={
+               {
+                  "--sm-grid-columns": "6",
+                  "--md-grid-columns": "6",
+                  "--sm-grid-rows": fullGlobe ? "12" : "6",
+                  "--md-grid-rows": fullGlobe ? "12" : "6",
+                  "--grid-columns": "var(--sm-grid-columns)",
+                  "--grid-rows": "var(--sm-grid-rows)",
+                  aspectRatio: fullGlobe ? "1/1" : "2/1",
+               } as React.CSSProperties
+            }
          >
             <style jsx>
                {`
@@ -39,10 +46,10 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                   height="100%"
                   style={{
                      transform: fullGlobe
-                        ? 'translateY(0px) scale(1.002)'
-                        : 'translateY(-12.5%) scale(1.002)',
+                        ? "translateY(0px) scale(1.002)"
+                        : "translateY(-12.5%) scale(1.002)",
                   }}
-                  viewBox={fullGlobe ? '-1 -1 802 802' : '-1 -151 802 602'}
+                  viewBox={fullGlobe ? "-1 -1 802 802" : "-1 -151 802 602"}
                   width="100%"
                   className="[--guide-color:theme(colors.border/50%)]"
                >
@@ -54,30 +61,143 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
 
                   <g
                      data-testid="globe-wireframe"
-                     clipPath={fullGlobe ? 'none' : 'url(#half-globe-clip)'}
+                     clipPath={fullGlobe ? "none" : "url(#half-globe-clip)"}
                   >
-                     <circle cx="400" cy="400" fill="var(--ds-background-200)" r="400" />
-                     <path d="M 400 800 A -400 400 0 0 0 400 0" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M 400 800 A -266.667 400 0 0 0 400 0" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M 400 800 A -133.333 400 0 0 0 400 0" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M 400 800 A 0 400 0 0 0 400 0" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M 400 0 A 133.333 400 0 0 0 400 800" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M 400 0 A 266.667 400 0 0 0 400 800" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M 400 0 A 400 400 0 0 0 400 800" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
+                     <circle
+                        cx="400"
+                        cy="400"
+                        fill="var(--ds-background-200)"
+                        r="400"
+                     />
+                     <path
+                        d="M 400 800 A -400 400 0 0 0 400 0"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M 400 800 A -266.667 400 0 0 0 400 0"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M 400 800 A -133.333 400 0 0 0 400 0"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M 400 800 A 0 400 0 0 0 400 0"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M 400 0 A 133.333 400 0 0 0 400 800"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M 400 0 A 266.667 400 0 0 0 400 800"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M 400 0 A 400 400 0 0 0 400 800"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
 
-                     <path d="M178.892,66.667 h442.217" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M101.858,133.333 h596.285" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M53.59,200 h692.82" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M22.876,266.667 h754.247" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M5.595,333.333 h788.811" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M0,400 h800" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
+                     <path
+                        d="M178.892,66.667 h442.217"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M101.858,133.333 h596.285"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M53.59,200 h692.82"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M22.876,266.667 h754.247"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M5.595,333.333 h788.811"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M0,400 h800"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
                      {fullGlobe && (
                         <>
-                           <path d="M5.595,466.667 h788.811" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                           <path d="M22.876,533.333 h754.247" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                           <path d="M53.59,600 h692.82" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                           <path d="M101.858,666.667 h596.285" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                           <path d="M178.892,733.333 h442.217" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
+                           <path
+                              d="M5.595,466.667 h788.811"
+                              fill="none"
+                              stroke="url(#globe-gradient)"
+                              strokeWidth="1"
+                              vectorEffect="non-scaling-stroke"
+                           />
+                           <path
+                              d="M22.876,533.333 h754.247"
+                              fill="none"
+                              stroke="url(#globe-gradient)"
+                              strokeWidth="1"
+                              vectorEffect="non-scaling-stroke"
+                           />
+                           <path
+                              d="M53.59,600 h692.82"
+                              fill="none"
+                              stroke="url(#globe-gradient)"
+                              strokeWidth="1"
+                              vectorEffect="non-scaling-stroke"
+                           />
+                           <path
+                              d="M101.858,666.667 h596.285"
+                              fill="none"
+                              stroke="url(#globe-gradient)"
+                              strokeWidth="1"
+                              vectorEffect="non-scaling-stroke"
+                           />
+                           <path
+                              d="M178.892,733.333 h442.217"
+                              fill="none"
+                              stroke="url(#globe-gradient)"
+                              strokeWidth="1"
+                              vectorEffect="non-scaling-stroke"
+                           />
                         </>
                      )}
                   </g>
@@ -85,7 +205,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                   {/* Original animated paths */}
                   <g id="animated-paths">
                      {/* First animated path */}
-                     <g id="lllldll31" opacity="1" className="[--normal-color:var(--line-color-1)]">
+                     <g
+                        id="lllldll31"
+                        opacity="1"
+                        className="[--normal-color:var(--line-color-1)]"
+                     >
                         <path
                            d="M794.405,333.333 h-131.468M662.937,333.333 h-131.468M531.468,333.333 h-131.468M400,333.333 h-131.468M 268.532 333.333 A -133.333 400 0 0 0 266.667 400M266.667,400 h-133.333M133.333,400 h-133.333"
                            fill="none"
@@ -114,7 +238,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                            >
                               <stop offset="0" stopColor="var(--color)" />
                               <stop offset="0.4" stopColor="var(--color)" />
-                              <stop offset="1" stopColor="var(--color)" stopOpacity="0" />
+                              <stop
+                                 offset="1"
+                                 stopColor="var(--color)"
+                                 stopOpacity="0"
+                              />
                               <animate
                                  attributeName="cx"
                                  dur="5.5s"
@@ -144,7 +272,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                      </g>
 
                      {/* Second animated path */}
-                     <g id="llullldl34" opacity="1" className="[--normal-color:var(--line-color-2)]">
+                     <g
+                        id="llullldl34"
+                        opacity="1"
+                        className="[--normal-color:var(--line-color-2)]"
+                     >
                         <path
                            d="M698.142,133.333 h-99.381M598.762,133.333 h-99.381M 499.381 133.333 A 133.333 400 0 0 0 473.703 66.667M473.703,66.667 h-73.703M400,66.667 h-73.703M326.297,66.667 h-73.703M 252.594 66.667 A -266.667 400 0 0 0 201.238 133.333M201.238,133.333 h-99.381"
                            fill="none"
@@ -173,7 +305,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                            >
                               <stop offset="0" stopColor="var(--color)" />
                               <stop offset="0.4" stopColor="var(--color)" />
-                              <stop offset="1" stopColor="var(--color)" stopOpacity="0" />
+                              <stop
+                                 offset="1"
+                                 stopColor="var(--color)"
+                                 stopOpacity="0"
+                              />
                               <animate
                                  attributeName="cx"
                                  dur="5.5s"
@@ -203,7 +339,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                      </g>
 
                      {/* Third animated path */}
-                     <g id="llldlll35" opacity="1" className="[--normal-color:var(--line-color-1)]">
+                     <g
+                        id="llldlll35"
+                        opacity="1"
+                        className="[--normal-color:var(--line-color-1)]"
+                     >
                         <path
                            d="M621.108,66.667 h-73.703M547.406,66.667 h-73.703M473.703,66.667 h-73.703M 400 133.333 A 0 400 0 0 0 400 66.667M400,133.333 h-99.381M300.619,133.333 h-99.381M201.238,133.333 h-99.381"
                            fill="none"
@@ -232,7 +372,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                            >
                               <stop offset="0" stopColor="var(--color)" />
                               <stop offset="0.4" stopColor="var(--color)" />
-                              <stop offset="1" stopColor="var(--color)" stopOpacity="0" />
+                              <stop
+                                 offset="1"
+                                 stopColor="var(--color)"
+                                 stopOpacity="0"
+                              />
                               <animate
                                  attributeName="cx"
                                  dur="5.5s"
@@ -262,7 +406,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                      </g>
 
                      {/* Fourth animated path */}
-                     <g id="llddllll33" opacity="1" className="[--normal-color:var(--line-color-3)]">
+                     <g
+                        id="llddllll33"
+                        opacity="1"
+                        className="[--normal-color:var(--line-color-3)]"
+                     >
                         <path
                            d="M746.41,200 h-115.47M630.94,200 h-115.47M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M 531.468 333.333 A 133.333 400 0 0 0 525.708 266.667M531.468,333.333 h-131.468M400,333.333 h-131.468M268.532,333.333 h-131.468M137.063,333.333 h-131.468"
                            fill="none"
@@ -291,7 +439,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                            >
                               <stop offset="0" stopColor="var(--color)" />
                               <stop offset="0.4" stopColor="var(--color)" />
-                              <stop offset="1" stopColor="var(--color)" stopOpacity="0" />
+                              <stop
+                                 offset="1"
+                                 stopColor="var(--color)"
+                                 stopOpacity="0"
+                              />
                               <animate
                                  attributeName="cx"
                                  dur="5.5s"
@@ -321,7 +473,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                      </g>
 
                      {/* Fifth animated path */}
-                     <g id="lllddlll34" opacity="1" className="[--normal-color:var(--line-color-2)]">
+                     <g
+                        id="lllddlll34"
+                        opacity="1"
+                        className="[--normal-color:var(--line-color-2)]"
+                     >
                         <path
                            d="M698.142,133.333 h-99.381M598.762,133.333 h-99.381M499.381,133.333 h-99.381M 400 200 A 0 400 0 0 0 400 133.333M 400 266.667 A 0 400 0 0 0 400 200M400,266.667 h-125.708M274.292,266.667 h-125.708M148.584,266.667 h-125.708"
                            fill="none"
@@ -350,7 +506,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                            >
                               <stop offset="0" stopColor="var(--color)" />
                               <stop offset="0.4" stopColor="var(--color)" />
-                              <stop offset="1" stopColor="var(--color)" stopOpacity="0" />
+                              <stop
+                                 offset="1"
+                                 stopColor="var(--color)"
+                                 stopOpacity="0"
+                              />
                               <animate
                                  attributeName="cx"
                                  dur="5.5s"
@@ -380,7 +540,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                      </g>
 
                      {/* Sixth animated path */}
-                     <g id="llullll32" opacity="1" className="[--normal-color:var(--line-color-3)]">
+                     <g
+                        id="llullll32"
+                        opacity="1"
+                        className="[--normal-color:var(--line-color-3)]"
+                     >
                         <path
                            d="M777.124,266.667 h-125.708M651.416,266.667 h-125.708M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M515.47,200 h-115.47M400,200 h-115.47M284.53,200 h-115.47M169.06,200 h-115.47"
                            fill="none"
@@ -409,7 +573,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                            >
                               <stop offset="0" stopColor="var(--color)" />
                               <stop offset="0.4" stopColor="var(--color)" />
-                              <stop offset="1" stopColor="var(--color)" stopOpacity="0" />
+                              <stop
+                                 offset="1"
+                                 stopColor="var(--color)"
+                                 stopOpacity="0"
+                              />
                               <animate
                                  attributeName="cx"
                                  dur="5.5s"
diff --git a/apps/web/registry/default/ui/globe.tsx b/apps/web/registry/default/ui/globe.tsx
index ec5d61ac..eb48dab3 100644
--- a/apps/web/registry/default/ui/globe.tsx
+++ b/apps/web/registry/default/ui/globe.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import type { COBEOptions } from 'cobe'
-import createGlobe from 'cobe'
-import { useCallback, useEffect, useRef } from 'react'
-import { useSpring } from 'react-spring'
-import { ny } from '~/lib/utils'
+import type { COBEOptions } from "cobe"
+import createGlobe from "cobe"
+import { useCallback, useEffect, useRef } from "react"
+import { useSpring } from "react-spring"
+import { ny } from "~/lib/utils"
 
 const GLOBE_CONFIG: COBEOptions = {
    width: 800,
@@ -58,7 +58,7 @@ export default function Globe({
 
    const updatePointerInteraction = (value: any) => {
       pointerInteracting.current = value
-      canvasRef.current!.style.cursor = value ? 'grabbing' : 'grab'
+      canvasRef.current!.style.cursor = value ? "grabbing" : "grab"
    }
 
    const updateMovement = (clientX: any) => {
@@ -71,8 +71,7 @@ export default function Globe({
 
    const onRender = useCallback(
       (state: Record<string, any>) => {
-         if (!pointerInteracting.current)
-            phi += 0.005
+         if (!pointerInteracting.current) phi += 0.005
          state.phi = phi + r.get()
          state.width = width * 2
          state.height = width * 2
@@ -81,12 +80,11 @@ export default function Globe({
    )
 
    const onResize = () => {
-      if (canvasRef.current)
-         width = canvasRef.current.offsetWidth
+      if (canvasRef.current) width = canvasRef.current.offsetWidth
    }
 
    useEffect(() => {
-      window.addEventListener('resize', onResize)
+      window.addEventListener("resize", onResize)
       onResize()
 
       const globe = createGlobe(canvasRef.current!, {
@@ -96,29 +94,33 @@ export default function Globe({
          onRender,
       })
 
-      setTimeout(() => (canvasRef.current!.style.opacity = '1'))
+      setTimeout(() => (canvasRef.current!.style.opacity = "1"))
       return () => globe.destroy()
    }, [])
 
    return (
       <div
          className={ny(
-            'absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]',
+            "absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]",
             className,
          )}
       >
          <canvas
             className={ny(
-               'size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]',
+               "size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]",
             )}
             ref={canvasRef}
-            onPointerDown={e =>
-               updatePointerInteraction(e.clientX - pointerInteractionMovement.current)}
+            onPointerDown={(e) =>
+               updatePointerInteraction(
+                  e.clientX - pointerInteractionMovement.current,
+               )
+            }
             onPointerUp={() => updatePointerInteraction(null)}
             onPointerOut={() => updatePointerInteraction(null)}
-            onMouseMove={e => updateMovement(e.clientX)}
-            onTouchMove={e =>
-               e.touches[0] && updateMovement(e.touches[0].clientX)}
+            onMouseMove={(e) => updateMovement(e.clientX)}
+            onTouchMove={(e) =>
+               e.touches[0] && updateMovement(e.touches[0].clientX)
+            }
          />
       </div>
    )
diff --git a/apps/web/registry/default/ui/gradual-spacing.tsx b/apps/web/registry/default/ui/gradual-spacing.tsx
index 405e3808..5864d172 100644
--- a/apps/web/registry/default/ui/gradual-spacing.tsx
+++ b/apps/web/registry/default/ui/gradual-spacing.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import type { Variants } from 'framer-motion'
-import { AnimatePresence, motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import type { Variants } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface GradualSpacingProps {
    text: string
@@ -25,7 +25,7 @@ export default function GradualSpacing({
    return (
       <div className="flex justify-center space-x-1">
          <AnimatePresence>
-            {text.split('').map((char, i) => (
+            {text.split("").map((char, i) => (
                <motion.h1
                   key={i}
                   initial="hidden"
@@ -33,9 +33,9 @@ export default function GradualSpacing({
                   exit="hidden"
                   variants={framerProps}
                   transition={{ duration, delay: i * delayMultiple }}
-                  className={ny('drop-shadow-sm ', className)}
+                  className={ny("drop-shadow-sm ", className)}
                >
-                  {char === ' ' ? <span>&nbsp;</span> : char}
+                  {char === " " ? <span>&nbsp;</span> : char}
                </motion.h1>
             ))}
          </AnimatePresence>
diff --git a/apps/web/registry/default/ui/grid-layout.tsx b/apps/web/registry/default/ui/grid-layout.tsx
index e18dc5b7..3ce42d23 100644
--- a/apps/web/registry/default/ui/grid-layout.tsx
+++ b/apps/web/registry/default/ui/grid-layout.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { ny } from '~/lib/utils'
+import type * as React from "react"
+import { ny } from "~/lib/utils"
 
 interface CrosshairConfig {
    topLeft?: boolean
@@ -15,7 +15,7 @@ interface GridLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
    crosshairs?: CrosshairConfig
    gridLines?: boolean
    columns?: 8 | 12 | 16
-   lineVariant?: 'all' | 'vertical' | 'horizontal' | 'center' | 'none'
+   lineVariant?: "all" | "vertical" | "horizontal" | "center" | "none"
 }
 
 function CrosshairIcon({ className }: { className?: string }) {
@@ -43,18 +43,18 @@ export function GridLayout({
    crosshairs,
    gridLines = true,
    columns = 16,
-   lineVariant = 'all',
+   lineVariant = "all",
    className,
    ...props
 }: GridLayoutProps) {
    return (
       <div
          className={ny(
-            'relative grid w-full gap-0',
-            gridLines && 'border-grid-line border',
-            columns === 16 && 'grid-cols-grid-16',
-            columns === 12 && 'grid-cols-grid-12',
-            columns === 8 && 'grid-cols-grid-8',
+            "relative grid w-full gap-0",
+            gridLines && "border-grid-line border",
+            columns === 16 && "grid-cols-grid-16",
+            columns === 12 && "grid-cols-grid-12",
+            columns === 8 && "grid-cols-grid-8",
             className,
          )}
          {...props}
@@ -62,44 +62,44 @@ export function GridLayout({
          {gridLines && (
             <div className="absolute inset-0 z-0">
                {/* Vertikale Linien */}
-               {(lineVariant === 'all' || lineVariant === 'vertical' || lineVariant === 'center') && (
+               {(lineVariant === "all" ||
+                  lineVariant === "vertical" ||
+                  lineVariant === "center") && (
                   <div className="absolute inset-0 flex justify-center">
-                     {lineVariant === 'center'
-                        ? (
-                              <div className="border-grid-line h-full w-px border-r" />
-                           )
-                        : (
+                     {lineVariant === "center" ? (
+                        <div className="border-grid-line h-full w-px border-r" />
+                     ) : (
+                        <div
+                           className={ny(
+                              "grid size-full",
+                              columns === 16 && "grid-cols-grid-16",
+                              columns === 12 && "grid-cols-grid-12",
+                              columns === 8 && "grid-cols-grid-8",
+                           )}
+                        >
+                           {Array.from({ length: columns }).map((_, i) => (
                               <div
+                                 key={i}
                                  className={ny(
-                                    'grid size-full',
-                                    columns === 16 && 'grid-cols-grid-16',
-                                    columns === 12 && 'grid-cols-grid-12',
-                                    columns === 8 && 'grid-cols-grid-8',
+                                    "border-grid-line border-r",
+                                    i === 0 && "border-l",
                                  )}
-                              >
-                                 {Array.from({ length: columns }).map((_, i) => (
-                                    <div
-                                       key={i}
-                                       className={ny(
-                                          'border-grid-line border-r',
-                                          i === 0 && 'border-l',
-                                       )}
-                                    />
-                                 ))}
-                              </div>
-                           )}
+                              />
+                           ))}
+                        </div>
+                     )}
                   </div>
                )}
 
                {/* Horizontale Linien */}
-               {(lineVariant === 'all' || lineVariant === 'horizontal') && (
+               {(lineVariant === "all" || lineVariant === "horizontal") && (
                   <div className="absolute inset-0 grid grid-rows-[repeat(16,1fr)]">
                      {Array.from({ length: 17 }).map((_, i) => (
                         <div
                            key={i}
                            className={ny(
-                              'border-grid-line border-t',
-                              i === 16 && 'border-b',
+                              "border-grid-line border-t",
+                              i === 16 && "border-b",
                            )}
                         />
                      ))}
diff --git a/apps/web/registry/default/ui/grid-pattern.tsx b/apps/web/registry/default/ui/grid-pattern.tsx
index e70aa593..2c6c1272 100644
--- a/apps/web/registry/default/ui/grid-pattern.tsx
+++ b/apps/web/registry/default/ui/grid-pattern.tsx
@@ -1,15 +1,16 @@
-import { useId } from 'react'
-import { ny } from '~/lib/utils'
+import { useId } from "react"
 
-interface GridPatternProps {
-   width?: any
-   height?: any
-   x?: any
-   y?: any
+import { ny } from "~/registry/default/lib/utils"
+
+interface GridPatternProps extends React.SVGProps<SVGSVGElement> {
+   width?: number
+   height?: number
+   x?: number
+   y?: number
    squares?: Array<[x: number, y: number]>
-   strokeDasharray?: any
+   strokeDasharray?: string
    className?: string
-   [key: string]: any
+   [key: string]: unknown
 }
 
 export function GridPattern({
@@ -17,7 +18,7 @@ export function GridPattern({
    height = 40,
    x = -1,
    y = -1,
-   strokeDasharray = 0,
+   strokeDasharray = "0",
    squares,
    className,
    ...props
@@ -28,7 +29,7 @@ export function GridPattern({
       <svg
          aria-hidden="true"
          className={ny(
-            'pointer-events-none absolute inset-0 size-full fill-gray-400/30 stroke-gray-400/30',
+            "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
             className,
          )}
          {...props}
@@ -49,7 +50,12 @@ export function GridPattern({
                />
             </pattern>
          </defs>
-         <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+         <rect
+            width="100%"
+            height="100%"
+            strokeWidth={0}
+            fill={`url(#${id})`}
+         />
          {squares && (
             <svg x={x} y={y} className="overflow-visible">
                {squares.map(([x, y]) => (
@@ -67,5 +73,3 @@ export function GridPattern({
       </svg>
    )
 }
-
-export default GridPattern
diff --git a/apps/web/registry/default/ui/hero-video-dialog.tsx b/apps/web/registry/default/ui/hero-video-dialog.tsx
index db97f8d1..497cdb4d 100644
--- a/apps/web/registry/default/ui/hero-video-dialog.tsx
+++ b/apps/web/registry/default/ui/hero-video-dialog.tsx
@@ -1,20 +1,20 @@
-'use client'
+"use client"
 
-import { useState } from 'react'
-import { AnimatePresence, motion } from 'framer-motion'
-import { Play, XIcon } from 'lucide-react'
+import { AnimatePresence, motion } from "framer-motion"
+import { Play, XIcon } from "lucide-react"
+import { useState } from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 type AnimationStyle =
-   | 'from-bottom'
-   | 'from-center'
-   | 'from-top'
-   | 'from-left'
-   | 'from-right'
-   | 'fade'
-   | 'top-in-bottom-out'
-   | 'left-in-right-out'
+   | "from-bottom"
+   | "from-center"
+   | "from-top"
+   | "from-left"
+   | "from-right"
+   | "fade"
+   | "top-in-bottom-out"
+   | "left-in-right-out"
 
 interface HeroVideoProps {
    animationStyle?: AnimationStyle
@@ -25,60 +25,60 @@ interface HeroVideoProps {
 }
 
 const animationVariants = {
-   'from-bottom': {
-      initial: { y: '100%', opacity: 0 },
+   "from-bottom": {
+      initial: { y: "100%", opacity: 0 },
       animate: { y: 0, opacity: 1 },
-      exit: { y: '100%', opacity: 0 },
+      exit: { y: "100%", opacity: 0 },
    },
-   'from-center': {
+   "from-center": {
       initial: { scale: 0.5, opacity: 0 },
       animate: { scale: 1, opacity: 1 },
       exit: { scale: 0.5, opacity: 0 },
    },
-   'from-top': {
-      initial: { y: '-100%', opacity: 0 },
+   "from-top": {
+      initial: { y: "-100%", opacity: 0 },
       animate: { y: 0, opacity: 1 },
-      exit: { y: '-100%', opacity: 0 },
+      exit: { y: "-100%", opacity: 0 },
    },
-   'from-left': {
-      initial: { x: '-100%', opacity: 0 },
+   "from-left": {
+      initial: { x: "-100%", opacity: 0 },
       animate: { x: 0, opacity: 1 },
-      exit: { x: '-100%', opacity: 0 },
+      exit: { x: "-100%", opacity: 0 },
    },
-   'from-right': {
-      initial: { x: '100%', opacity: 0 },
+   "from-right": {
+      initial: { x: "100%", opacity: 0 },
       animate: { x: 0, opacity: 1 },
-      exit: { x: '100%', opacity: 0 },
+      exit: { x: "100%", opacity: 0 },
    },
-   'fade': {
+   fade: {
       initial: { opacity: 0 },
       animate: { opacity: 1 },
       exit: { opacity: 0 },
    },
-   'top-in-bottom-out': {
-      initial: { y: '-100%', opacity: 0 },
+   "top-in-bottom-out": {
+      initial: { y: "-100%", opacity: 0 },
       animate: { y: 0, opacity: 1 },
-      exit: { y: '100%', opacity: 0 },
+      exit: { y: "100%", opacity: 0 },
    },
-   'left-in-right-out': {
-      initial: { x: '-100%', opacity: 0 },
+   "left-in-right-out": {
+      initial: { x: "-100%", opacity: 0 },
       animate: { x: 0, opacity: 1 },
-      exit: { x: '100%', opacity: 0 },
+      exit: { x: "100%", opacity: 0 },
    },
 }
 
 export default function HeroVideoDialog({
-   animationStyle = 'from-center',
+   animationStyle = "from-center",
    videoSrc,
    thumbnailSrc,
-   thumbnailAlt = 'Video thumbnail',
+   thumbnailAlt = "Video thumbnail",
    className,
 }: HeroVideoProps) {
    const [isVideoOpen, setIsVideoOpen] = useState(false)
    const selectedAnimation = animationVariants[animationStyle]
 
    return (
-      <div className={ny('relative', className)}>
+      <div className={ny("relative", className)}>
          <div
             className="group relative cursor-pointer"
             onClick={() => setIsVideoOpen(true)}
@@ -92,14 +92,12 @@ export default function HeroVideoDialog({
             />
             <div className="absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100">
                <div className="bg-primary/10 flex size-28 items-center justify-center rounded-full backdrop-blur-md">
-                  <div
-                     className="from-primary/30 to-primary relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]"
-                  >
+                  <div className="from-primary/30 to-primary relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]">
                      <Play
                         className="size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105"
                         style={{
                            filter:
-                    'drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))',
+                              "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))",
                         }}
                      />
                   </div>
@@ -117,7 +115,11 @@ export default function HeroVideoDialog({
                >
                   <motion.div
                      {...selectedAnimation}
-                     transition={{ type: 'spring', damping: 30, stiffness: 300 }}
+                     transition={{
+                        type: "spring",
+                        damping: 30,
+                        stiffness: 300,
+                     }}
                      className="relative mx-4 aspect-video w-full max-w-4xl md:mx-0"
                   >
                      <motion.button className="absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black">
@@ -129,8 +131,7 @@ export default function HeroVideoDialog({
                            className="size-full rounded-2xl"
                            allowFullScreen
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                        >
-                        </iframe>
+                        ></iframe>
                      </div>
                   </motion.div>
                </motion.div>
diff --git a/apps/web/registry/default/ui/hero-video.tsx b/apps/web/registry/default/ui/hero-video.tsx
index 7ac7e220..a5e65406 100644
--- a/apps/web/registry/default/ui/hero-video.tsx
+++ b/apps/web/registry/default/ui/hero-video.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { Dialog, Transition } from '@headlessui/react'
-import { X } from 'lucide-react'
-import React, { Fragment, useContext, useState } from 'react'
-import { ny } from '~/lib/utils'
+import { Dialog, Transition } from "@headlessui/react"
+import { X } from "lucide-react"
+import React, { Fragment, useContext, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface HeroVideoProps {
    children?: React.ReactNode
@@ -29,7 +29,7 @@ export function HeroVideoAction({
    const context = useContext(HeroVideoContext)
 
    if (!context)
-      throw new Error('HeroVideoAction must be used within a HeroVideo')
+      throw new Error("HeroVideoAction must be used within a HeroVideo")
 
    const { openModal } = context
 
@@ -45,7 +45,7 @@ export function HeroVideoAction({
    )
 }
 
-function HeroVideo({ children, image, title = 'Demo' }: HeroVideoProps) {
+function HeroVideo({ children, image, title = "Demo" }: HeroVideoProps) {
    const [isOpen, setIsOpen] = useState(false)
 
    function closeModal() {
@@ -62,8 +62,7 @@ function HeroVideo({ children, image, title = 'Demo' }: HeroVideoProps) {
 
    React.Children.forEach(children, (child) => {
       if (React.isValidElement(child)) {
-         if (child.type === HeroVideoAction)
-            actionChild = child
+         if (child.type === HeroVideoAction) actionChild = child
          else otherChildren.push(child)
       }
    })
@@ -71,7 +70,7 @@ function HeroVideo({ children, image, title = 'Demo' }: HeroVideoProps) {
    return (
       <HeroVideoContext.Provider value={{ openModal, closeModal }}>
          <div
-            className={ny('absolute inset-px flex overflow-hidden rounded-2xl')}
+            className={ny("absolute inset-px flex overflow-hidden rounded-2xl")}
          >
             {actionChild}
             <img
diff --git a/apps/web/registry/default/ui/hover-card.tsx b/apps/web/registry/default/ui/hover-card.tsx
index ae0935f9..fdc84543 100644
--- a/apps/web/registry/default/ui/hover-card.tsx
+++ b/apps/web/registry/default/ui/hover-card.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const HoverCard = HoverCardPrimitive.Root
 
@@ -12,13 +12,13 @@ const HoverCardTrigger = HoverCardPrimitive.Trigger
 const HoverCardContent = React.forwardRef<
    React.ElementRef<typeof HoverCardPrimitive.Content>,
    React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
    <HoverCardPrimitive.Content
       ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={ny(
-         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none',
+         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none",
          className,
       )}
       {...props}
diff --git a/apps/web/registry/default/ui/hyper-text.tsx b/apps/web/registry/default/ui/hyper-text.tsx
index efcf02ce..281fb593 100644
--- a/apps/web/registry/default/ui/hyper-text.tsx
+++ b/apps/web/registry/default/ui/hyper-text.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import { useEffect, useRef, useState } from 'react'
-import type { Variants } from 'framer-motion'
-import { AnimatePresence, motion } from 'framer-motion'
+import type { Variants } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
+import { useEffect, useRef, useState } from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface HyperTextProps {
    text: string
@@ -14,7 +14,7 @@ interface HyperTextProps {
    animateOnLoad?: boolean
 }
 
-const alphabets = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
+const alphabets = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")
 
 const getRandomInt = (max: number) => Math.floor(Math.random() * max)
 
@@ -29,7 +29,7 @@ export default function HyperText({
    className,
    animateOnLoad = true,
 }: HyperTextProps) {
-   const [displayText, setDisplayText] = useState(text.split(''))
+   const [displayText, setDisplayText] = useState(text.split(""))
    const [trigger, setTrigger] = useState(false)
    const interations = useRef(0)
    const isFirstRender = useRef(true)
@@ -48,18 +48,17 @@ export default function HyperText({
                return
             }
             if (interations.current < text.length) {
-               setDisplayText(t =>
+               setDisplayText((t) =>
                   t.map((l, i) =>
-                     l === ' '
+                     l === " "
                         ? l
                         : i <= interations.current
-                           ? text[i]
-                           : alphabets[getRandomInt(26)],
+                          ? text[i]
+                          : alphabets[getRandomInt(26)],
                   ),
                )
                interations.current = interations.current + 0.1
-            }
-            else {
+            } else {
                setTrigger(false)
                clearInterval(interval)
             }
@@ -79,7 +78,11 @@ export default function HyperText({
             {displayText.map((letter, i) => (
                <motion.h1
                   key={i}
-                  className={ny('font-mono', letter === ' ' ? 'w-3' : '', className)}
+                  className={ny(
+                     "font-mono",
+                     letter === " " ? "w-3" : "",
+                     className,
+                  )}
                   {...framerProps}
                >
                   {letter.toUpperCase()}
diff --git a/apps/web/registry/default/ui/icon-cloud.tsx b/apps/web/registry/default/ui/icon-cloud.tsx
index a2f32065..52111738 100644
--- a/apps/web/registry/default/ui/icon-cloud.tsx
+++ b/apps/web/registry/default/ui/icon-cloud.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client"
 
-import { useTheme } from 'next-themes'
-import { useEffect, useMemo, useState } from 'react'
-import type { ICloud, SimpleIcon } from 'react-icon-cloud'
-import { Cloud, fetchSimpleIcons, renderSimpleIcon } from 'react-icon-cloud'
+import { useTheme } from "next-themes"
+import { useEffect, useMemo, useState } from "react"
+import type { ICloud, SimpleIcon } from "react-icon-cloud"
+import { Cloud, fetchSimpleIcons, renderSimpleIcon } from "react-icon-cloud"
 
-export const cloudProps: Omit<ICloud, 'children'> = {
+export const cloudProps: Omit<ICloud, "children"> = {
    containerProps: {
       style: {
-         display: 'flex',
-         justifyContent: 'center',
-         alignItems: 'center',
-         width: '100%',
+         display: "flex",
+         justifyContent: "center",
+         alignItems: "center",
+         width: "100%",
          paddingTop: 40,
       },
    },
@@ -20,12 +20,12 @@ export const cloudProps: Omit<ICloud, 'children'> = {
       depth: 1,
       wheelZoom: false,
       imageScale: 2,
-      activeCursor: 'default',
-      tooltip: 'native',
+      activeCursor: "default",
+      tooltip: "native",
       initial: [0.1, -0.1],
       clickToFront: 500,
       tooltipDelay: 0,
-      outlineColour: '#0000',
+      outlineColour: "#0000",
       maxSpeed: 0.04,
       minSpeed: 0.02,
       // dragControl: false,
@@ -33,9 +33,9 @@ export const cloudProps: Omit<ICloud, 'children'> = {
 }
 
 export function renderCustomIcon(icon: SimpleIcon, theme: string) {
-   const bgHex = theme === 'light' ? '#f3f2ef' : '#080510'
-   const fallbackHex = theme === 'light' ? '#6e6e73' : '#ffffff'
-   const minContrastRatio = theme === 'dark' ? 2 : 1.2
+   const bgHex = theme === "light" ? "#f3f2ef" : "#080510"
+   const fallbackHex = theme === "light" ? "#6e6e73" : "#ffffff"
+   const minContrastRatio = theme === "dark" ? 2 : 1.2
 
    return renderSimpleIcon({
       icon,
@@ -67,16 +67,15 @@ export default function IconCloud({ iconSlugs }: DynamicCloudProps) {
    }, [iconSlugs])
 
    const renderedIcons = useMemo(() => {
-      if (!data)
-         return null
+      if (!data) return null
 
-      return Object.values(data.simpleIcons).map(icon =>
-         renderCustomIcon(icon, theme || 'light'),
+      return Object.values(data.simpleIcons).map((icon) =>
+         renderCustomIcon(icon, theme || "light"),
       )
    }, [data, theme])
 
    return (
-   // @ts-expect-error is fine
+      // @ts-expect-error is fine
       <Cloud {...cloudProps}>
          <>{renderedIcons}</>
       </Cloud>
diff --git a/apps/web/registry/default/ui/input-otp.tsx b/apps/web/registry/default/ui/input-otp.tsx
index 39f99684..5a2147a5 100644
--- a/apps/web/registry/default/ui/input-otp.tsx
+++ b/apps/web/registry/default/ui/input-otp.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { OTPInput, OTPInputContext } from 'input-otp'
-import { Dot } from 'lucide-react'
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Dot } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const InputOTP = React.forwardRef<
    React.ElementRef<typeof OTPInput>,
@@ -13,26 +13,26 @@ const InputOTP = React.forwardRef<
    <OTPInput
       ref={ref}
       containerClassName={ny(
-         'flex items-center gap-2 has-[:disabled]:opacity-50',
+         "flex items-center gap-2 has-[:disabled]:opacity-50",
          containerClassName,
       )}
-      className={ny('disabled:cursor-not-allowed', className)}
+      className={ny("disabled:cursor-not-allowed", className)}
       {...props}
    />
 ))
-InputOTP.displayName = 'InputOTP'
+InputOTP.displayName = "InputOTP"
 
 const InputOTPGroup = React.forwardRef<
-   React.ElementRef<'div'>,
-   React.ComponentPropsWithoutRef<'div'>
+   React.ElementRef<"div">,
+   React.ComponentPropsWithoutRef<"div">
 >(({ className, ...props }, ref) => (
-   <div ref={ref} className={ny('flex items-center', className)} {...props} />
+   <div ref={ref} className={ny("flex items-center", className)} {...props} />
 ))
-InputOTPGroup.displayName = 'InputOTPGroup'
+InputOTPGroup.displayName = "InputOTPGroup"
 
 const InputOTPSlot = React.forwardRef<
-   React.ElementRef<'div'>,
-  React.ComponentPropsWithoutRef<'div'> & { index: number }
+   React.ElementRef<"div">,
+   React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
    const inputOTPContext = React.useContext(OTPInputContext)
    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
@@ -41,8 +41,8 @@ const InputOTPSlot = React.forwardRef<
       <div
          ref={ref}
          className={ny(
-            'border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
-            isActive && 'ring-ring ring-offset-background z-10 ring-2',
+            "border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+            isActive && "ring-ring ring-offset-background z-10 ring-2",
             className,
          )}
          {...props}
@@ -56,16 +56,16 @@ const InputOTPSlot = React.forwardRef<
       </div>
    )
 })
-InputOTPSlot.displayName = 'InputOTPSlot'
+InputOTPSlot.displayName = "InputOTPSlot"
 
 const InputOTPSeparator = React.forwardRef<
-   React.ElementRef<'div'>,
-   React.ComponentPropsWithoutRef<'div'>
+   React.ElementRef<"div">,
+   React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
    <div ref={ref} role="separator" {...props}>
       <Dot />
    </div>
 ))
-InputOTPSeparator.displayName = 'InputOTPSeparator'
+InputOTPSeparator.displayName = "InputOTPSeparator"
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/apps/web/registry/default/ui/input-phone.tsx b/apps/web/registry/default/ui/input-phone.tsx
index 6179d697..43221718 100644
--- a/apps/web/registry/default/ui/input-phone.tsx
+++ b/apps/web/registry/default/ui/input-phone.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
-import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons'
-import * as RPNInput from 'react-phone-number-input'
-import flags from 'react-phone-number-input/flags'
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
+import * as React from "react"
+import * as RPNInput from "react-phone-number-input"
+import flags from "react-phone-number-input/flags"
 
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Command,
    CommandEmpty,
@@ -12,60 +12,63 @@ import {
    CommandInput,
    CommandItem,
    CommandList,
-} from '~/registry/miami/ui/command'
-import type { InputProps } from '~/registry/miami/ui/input'
-import { Input } from '~/registry/miami/ui/input'
+} from "~/registry/miami/ui/command"
+import type { InputProps } from "~/registry/miami/ui/input"
+import { Input } from "~/registry/miami/ui/input"
 import {
    Popover,
    PopoverContent,
    PopoverTrigger,
-} from '~/registry/miami/ui/popover'
+} from "~/registry/miami/ui/popover"
 
 type InputPhoneProps = Omit<
    React.InputHTMLAttributes<HTMLInputElement>,
-  'onChange' | 'value'
+   "onChange" | "value"
 > &
-Omit<RPNInput.Props<typeof RPNInput.default>, 'onChange'> & {
-   onChange?: (value: RPNInput.Value) => void
-}
+   Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
+      onChange?: (value: RPNInput.Value) => void
+   }
 
-const InputPhone: React.ForwardRefExoticComponent<InputPhoneProps>
-  = React.forwardRef<React.ElementRef<typeof RPNInput.default>, InputPhoneProps>(
-     ({ className, onChange, ...props }, ref) => (
-        <RPNInput.default
-           ref={ref}
-           className={ny('flex', className)}
-           flagComponent={FlagComponent}
-           countrySelectComponent={CountrySelect}
-           inputComponent={InputComponent}
-           /**
-            * Handles the onChange event.
-            *
-            * react-phone-number-input might trigger the onChange event as undefined
-            * when a valid phone number is not entered. To prevent this,
-            * the value is coerced to an empty string.
-            *
-            * @param {E164Number | undefined} value - The entered value
-            */
-           onChange={value => onChange?.(value as RPNInput.Value)}
-           {...props}
-        />
-     ),
-  )
-InputPhone.displayName = 'InputPhone'
+const InputPhone: React.ForwardRefExoticComponent<InputPhoneProps> =
+   React.forwardRef<React.ElementRef<typeof RPNInput.default>, InputPhoneProps>(
+      ({ className, onChange, ...props }, ref) => (
+         <RPNInput.default
+            ref={ref}
+            className={ny("flex", className)}
+            flagComponent={FlagComponent}
+            countrySelectComponent={CountrySelect}
+            inputComponent={InputComponent}
+            /**
+             * Handles the onChange event.
+             *
+             * react-phone-number-input might trigger the onChange event as undefined
+             * when a valid phone number is not entered. To prevent this,
+             * the value is coerced to an empty string.
+             *
+             * @param {E164Number | undefined} value - The entered value
+             */
+            onChange={(value) => onChange?.(value as RPNInput.Value)}
+            {...props}
+         />
+      ),
+   )
+InputPhone.displayName = "InputPhone"
 
 const InputComponent = React.forwardRef<HTMLInputElement, InputProps>(
    ({ className, ...props }, ref) => (
       <Input
-         className={ny('rounded-e-lg rounded-s-none', className)}
+         className={ny("rounded-e-lg rounded-s-none", className)}
          {...props}
          ref={ref}
       />
    ),
 )
-InputComponent.displayName = 'InputComponent'
+InputComponent.displayName = "InputComponent"
 
-interface CountrySelectOption { label: string, value: RPNInput.Country }
+interface CountrySelectOption {
+   label: string
+   value: RPNInput.Country
+}
 
 interface CountrySelectProps {
    disabled?: boolean
@@ -91,14 +94,14 @@ function CountrySelect({
             <Button
                type="button"
                variant="outline"
-               className={ny('flex gap-1 rounded-e-none rounded-s-lg px-3')}
+               className={ny("flex gap-1 rounded-e-none rounded-s-lg px-3")}
                disabled={disabled}
             >
                <FlagComponent country={value} countryName={value} />
                <CaretSortIcon
                   className={ny(
-                     '-mr-2 size-4 opacity-50',
-                     disabled ? 'hidden' : 'opacity-100',
+                     "-mr-2 size-4 opacity-50",
+                     disabled ? "hidden" : "opacity-100",
                   )}
                />
             </Button>
@@ -109,17 +112,19 @@ function CountrySelect({
                   <CommandInput placeholder="Search country..." />
                   <CommandEmpty>No country found.</CommandEmpty>
                   <CommandGroup>
-                     {options.map(option => (
+                     {options.map((option) => (
                         <CommandItem
                            className="gap-2"
-                           key={option.value || 'ZZ'}
+                           key={option.value || "ZZ"}
                            onSelect={() => handleSelect(option.value)}
                         >
                            <FlagComponent
                               country={option.value}
                               countryName={option.label}
                            />
-                           <span className="flex-1 text-sm">{option.label}</span>
+                           <span className="flex-1 text-sm">
+                              {option.label}
+                           </span>
                            {option.value && (
                               <span className="text-foreground/50 text-sm">
                                  {`+${RPNInput.getCountryCallingCode(option.value)}`}
@@ -127,8 +132,10 @@ function CountrySelect({
                            )}
                            <CheckIcon
                               className={ny(
-                                 'ml-auto size-4',
-                                 option.value === value ? 'opacity-100' : 'opacity-0',
+                                 "ml-auto size-4",
+                                 option.value === value
+                                    ? "opacity-100"
+                                    : "opacity-0",
                               )}
                            />
                         </CommandItem>
@@ -150,6 +157,6 @@ function FlagComponent({ country, countryName }: RPNInput.FlagProps) {
       </span>
    )
 }
-FlagComponent.displayName = 'FlagComponent'
+FlagComponent.displayName = "FlagComponent"
 
 export { InputPhone }
diff --git a/apps/web/registry/default/ui/input.tsx b/apps/web/registry/default/ui/input.tsx
index 7ddf0b63..152af2ec 100644
--- a/apps/web/registry/default/ui/input.tsx
+++ b/apps/web/registry/default/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 export interface InputProps
    extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
          <input
             type={type}
             className={ny(
-               'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+               "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                className,
             )}
             ref={ref}
@@ -20,6 +20,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       )
    },
 )
-Input.displayName = 'Input'
+Input.displayName = "Input"
 
 export { Input }
diff --git a/apps/web/registry/default/ui/interactive-grid-pattern.tsx b/apps/web/registry/default/ui/interactive-grid-pattern.tsx
new file mode 100644
index 00000000..68e34d2c
--- /dev/null
+++ b/apps/web/registry/default/ui/interactive-grid-pattern.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import { ny } from "~/registry/default/lib/utils"
+
+/**
+ * InteractiveGridPattern is a component that renders a grid pattern with interactive squares.
+ *
+ * @param width - The width of each square.
+ * @param height - The height of each square.
+ * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares.
+ * @param className - The class name of the grid.
+ * @param squaresClassName - The class name of the squares.
+ */
+interface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {
+   width?: number
+   height?: number
+   squares?: [number, number] // [horizontal, vertical]
+   className?: string
+   squaresClassName?: string
+}
+
+/**
+ * The InteractiveGridPattern component.
+ *
+ * @see InteractiveGridPatternProps for the props interface.
+ * @returns A React component.
+ */
+export function InteractiveGridPattern({
+   width = 40,
+   height = 40,
+   squares = [24, 24],
+   className,
+   squaresClassName,
+   ...props
+}: InteractiveGridPatternProps) {
+   const [horizontal, vertical] = squares
+   const [hoveredSquare, setHoveredSquare] = useState<number | null>(null)
+
+   return (
+      <svg
+         width={width * horizontal}
+         height={height * vertical}
+         className={ny(
+            "absolute inset-0 h-full w-full border border-gray-400/30",
+            className,
+         )}
+         {...props}
+      >
+         {Array.from({ length: horizontal * vertical }).map((_, index) => {
+            const x = (index % horizontal) * width
+            const y = Math.floor(index / horizontal) * height
+            return (
+               <rect
+                  key={index}
+                  x={x}
+                  y={y}
+                  width={width}
+                  height={height}
+                  className={ny(
+                     "stroke-gray-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000",
+                     hoveredSquare === index
+                        ? "fill-gray-300/30"
+                        : "fill-transparent",
+                     squaresClassName,
+                  )}
+                  onMouseEnter={() => setHoveredSquare(index)}
+                  onMouseLeave={() => setHoveredSquare(null)}
+               />
+            )
+         })}
+      </svg>
+   )
+}
diff --git a/apps/web/registry/default/ui/iphone-15-pro.tsx b/apps/web/registry/default/ui/iphone-15-pro.tsx
index 9bc44766..c50fc12b 100644
--- a/apps/web/registry/default/ui/iphone-15-pro.tsx
+++ b/apps/web/registry/default/ui/iphone-15-pro.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react'
+import type { SVGProps } from "react"
 
 export interface Iphone15ProProps extends SVGProps<SVGSVGElement> {
    width?: number
diff --git a/apps/web/registry/default/ui/label.tsx b/apps/web/registry/default/ui/label.tsx
index 6ba5024c..e2264b75 100644
--- a/apps/web/registry/default/ui/label.tsx
+++ b/apps/web/registry/default/ui/label.tsx
@@ -1,19 +1,19 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { type VariantProps, cva } from 'class-variance-authority'
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const labelVariants = cva(
-   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 )
 
 const Label = React.forwardRef<
    React.ElementRef<typeof LabelPrimitive.Root>,
    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-   VariantProps<typeof labelVariants>
+      VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
    <LabelPrimitive.Root
       ref={ref}
diff --git a/apps/web/registry/default/ui/letter-pullup.tsx b/apps/web/registry/default/ui/letter-pullup.tsx
index 953047b1..71438582 100644
--- a/apps/web/registry/default/ui/letter-pullup.tsx
+++ b/apps/web/registry/default/ui/letter-pullup.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import { motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface LetterPullupProps {
    className?: string
@@ -14,7 +14,7 @@ export default function LetterPullup({
    words,
    delay,
 }: LetterPullupProps) {
-   const letters = words.split('')
+   const letters = words.split("")
 
    const pullupVariant = {
       initial: { y: 100, opacity: 0 },
@@ -37,11 +37,11 @@ export default function LetterPullup({
                animate="animate"
                custom={i}
                className={ny(
-                  'font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-4xl md:leading-[5rem] dark:text-white',
+                  "font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-4xl md:leading-[5rem] dark:text-white",
                   className,
                )}
             >
-               {letter === ' ' ? <span>&nbsp;</span> : letter}
+               {letter === " " ? <span>&nbsp;</span> : letter}
             </motion.h1>
          ))}
       </div>
diff --git a/apps/web/registry/default/ui/line-shadow-text.tsx b/apps/web/registry/default/ui/line-shadow-text.tsx
new file mode 100644
index 00000000..0499c79b
--- /dev/null
+++ b/apps/web/registry/default/ui/line-shadow-text.tsx
@@ -0,0 +1,42 @@
+import { type MotionProps, motion } from "motion/react"
+import { ny } from "~/registry/default/lib/utils"
+
+interface LineShadowTextProps
+   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,
+      MotionProps {
+   shadowColor?: string
+   as?: React.ElementType
+}
+
+export function LineShadowText({
+   children,
+   shadowColor = "black",
+   className,
+   as: Component = "span",
+   ...props
+}: LineShadowTextProps) {
+   const MotionComponent = motion.create(Component)
+   const content = typeof children === "string" ? children : null
+
+   if (!content) {
+      throw new Error("LineShadowText only accepts string content")
+   }
+
+   return (
+      <MotionComponent
+         style={{ "--shadow-color": shadowColor } as React.CSSProperties}
+         className={ny(
+            "relative z-0 inline-flex",
+            "after:absolute after:left-[0.04em] after:top-[0.04em] after:content-[attr(data-text)]",
+            "after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]",
+            "after:-z-10 after:bg-[length:0.06em_0.06em] after:bg-clip-text after:text-transparent",
+            "after:animate-line-shadow",
+            className,
+         )}
+         data-text={content}
+         {...props}
+      >
+         {content}
+      </MotionComponent>
+   )
+}
diff --git a/apps/web/registry/default/ui/magic-card.tsx b/apps/web/registry/default/ui/magic-card.tsx
index 22df9b0d..15ec536d 100644
--- a/apps/web/registry/default/ui/magic-card.tsx
+++ b/apps/web/registry/default/ui/magic-card.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import type { CSSProperties, ReactElement, ReactNode } from 'react'
-import { useEffect, useRef, useState } from 'react'
-import { ny } from '~/lib/utils'
+import type { CSSProperties, ReactElement, ReactNode } from "react"
+import { useEffect, useRef, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface MousePosition {
    x: number
@@ -20,10 +20,10 @@ function useMousePosition(): MousePosition {
          setMousePosition({ x: event.clientX, y: event.clientY })
       }
 
-      window.addEventListener('mousemove', handleMouseMove)
+      window.addEventListener("mousemove", handleMouseMove)
 
       return () => {
-         window.removeEventListener('mousemove', handleMouseMove)
+         window.removeEventListener("mousemove", handleMouseMove)
       }
    }, [])
 
@@ -38,24 +38,26 @@ interface MagicContainerProps {
 function MagicContainer({ children, className }: MagicContainerProps) {
    const containerRef = useRef<HTMLDivElement>(null)
    const mousePosition = useMousePosition()
-   const mouse = useRef<{ x: number, y: number }>({ x: 0, y: 0 })
-   const containerSize = useRef<{ w: number, h: number }>({ w: 0, h: 0 })
+   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+   const containerSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })
    const [boxes, setBoxes] = useState<Array<HTMLElement>>([])
 
    useEffect(() => {
       init()
-      containerRef.current
-      && setBoxes(
-         Array.from(containerRef.current.children).map(el => el as HTMLElement),
-      )
+      containerRef.current &&
+         setBoxes(
+            Array.from(containerRef.current.children).map(
+               (el) => el as HTMLElement,
+            ),
+         )
    }, [])
 
    useEffect(() => {
       init()
-      window.addEventListener('resize', init)
+      window.addEventListener("resize", init)
 
       return () => {
-         window.removeEventListener('resize', init)
+         window.removeEventListener("resize", init)
       }
    }, [setBoxes])
 
@@ -81,22 +83,21 @@ function MagicContainer({ children, className }: MagicContainerProps) {
          mouse.current.x = x
          mouse.current.y = y
          boxes.forEach((box) => {
-            const boxX
-          = -(box.getBoundingClientRect().left - rect.left) + mouse.current.x
-            const boxY
-          = -(box.getBoundingClientRect().top - rect.top) + mouse.current.y
-            box.style.setProperty('--mouse-x', `${boxX}px`)
-            box.style.setProperty('--mouse-y', `${boxY}px`)
-
-            if (inside)
-               box.style.setProperty('--opacity', `1`)
-            else box.style.setProperty('--opacity', `0`)
+            const boxX =
+               -(box.getBoundingClientRect().left - rect.left) + mouse.current.x
+            const boxY =
+               -(box.getBoundingClientRect().top - rect.top) + mouse.current.y
+            box.style.setProperty("--mouse-x", `${boxX}px`)
+            box.style.setProperty("--mouse-y", `${boxY}px`)
+
+            if (inside) box.style.setProperty("--opacity", `1`)
+            else box.style.setProperty("--opacity", `0`)
          })
       }
    }
 
    return (
-      <div className={ny('size-full', className)} ref={containerRef}>
+      <div className={ny("size-full", className)} ref={containerRef}>
          {children}
       </div>
    )
@@ -174,7 +175,7 @@ const MagicCard: React.FC<MagicCardProps> = ({
    children,
    size = 600,
    spotlight = true,
-   borderColor = 'hsl(0 0% 98%)',
+   borderColor = "hsl(0 0% 98%)",
    isolated = true,
    ...props
 }) => {
@@ -182,14 +183,14 @@ const MagicCard: React.FC<MagicCardProps> = ({
       <div
          style={
             {
-               '--mask-size': `${size}px`,
-               '--border-color': `${borderColor}`,
+               "--mask-size": `${size}px`,
+               "--border-color": `${borderColor}`,
             } as CSSProperties
          }
          className={ny(
-            'relative z-0 size-full rounded-2xl p-6',
-            'bg-gray-300 dark:bg-gray-700',
-            'bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--border-color),transparent_100%)]',
+            "relative z-0 size-full rounded-2xl p-6",
+            "bg-gray-300 dark:bg-gray-700",
+            "bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--border-color),transparent_100%)]",
             className,
          )}
          {...props}
diff --git a/apps/web/registry/default/ui/marquee.tsx b/apps/web/registry/default/ui/marquee.tsx
index 1d5cca57..0a0bc3b1 100644
--- a/apps/web/registry/default/ui/marquee.tsx
+++ b/apps/web/registry/default/ui/marquee.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface MarqueeProps {
    className?: string
@@ -23,10 +23,10 @@ export default function Marquee({
       <div
          {...props}
          className={ny(
-            'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]',
+            "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
             {
-               'flex-row': !vertical,
-               'flex-col': vertical,
+               "flex-row": !vertical,
+               "flex-col": vertical,
             },
             className,
          )}
@@ -36,12 +36,16 @@ export default function Marquee({
             .map((_, i) => (
                <div
                   key={i}
-                  className={ny('flex shrink-0 justify-around [gap:var(--gap)]', {
-                     'animate-marquee flex-row': !vertical,
-                     'animate-marquee-vertical flex-col': vertical,
-                     'group-hover:[animation-play-state:paused]': pauseOnHover,
-                     '[animation-direction:reverse]': reverse,
-                  })}
+                  className={ny(
+                     "flex shrink-0 justify-around [gap:var(--gap)]",
+                     {
+                        "animate-marquee flex-row": !vertical,
+                        "animate-marquee-vertical flex-col": vertical,
+                        "group-hover:[animation-play-state:paused]":
+                           pauseOnHover,
+                        "[animation-direction:reverse]": reverse,
+                     },
+                  )}
                >
                   {children}
                </div>
diff --git a/apps/web/registry/default/ui/menubar.tsx b/apps/web/registry/default/ui/menubar.tsx
index 21df9670..d1f9dec3 100644
--- a/apps/web/registry/default/ui/menubar.tsx
+++ b/apps/web/registry/default/ui/menubar.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as MenubarPrimitive from '@radix-ui/react-menubar'
-import { Check, ChevronRight, Circle } from 'lucide-react'
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const MenubarMenu = MenubarPrimitive.Menu
 
@@ -23,7 +23,7 @@ const Menubar = React.forwardRef<
    <MenubarPrimitive.Root
       ref={ref}
       className={ny(
-         'bg-background flex h-10 items-center space-x-1 rounded-md border p-1',
+         "bg-background flex h-10 items-center space-x-1 rounded-md border p-1",
          className,
       )}
       {...props}
@@ -38,7 +38,7 @@ const MenubarTrigger = React.forwardRef<
    <MenubarPrimitive.Trigger
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none',
+         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none",
          className,
       )}
       {...props}
@@ -55,8 +55,8 @@ const MenubarSubTrigger = React.forwardRef<
    <MenubarPrimitive.SubTrigger
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-         inset && 'pl-8',
+         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -74,7 +74,7 @@ const MenubarSubContent = React.forwardRef<
    <MenubarPrimitive.SubContent
       ref={ref}
       className={ny(
-         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1',
+         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1",
          className,
       )}
       {...props}
@@ -87,7 +87,13 @@ const MenubarContent = React.forwardRef<
    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
 >(
    (
-      { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props },
+      {
+         className,
+         align = "start",
+         alignOffset = -4,
+         sideOffset = 8,
+         ...props
+      },
       ref,
    ) => (
       <MenubarPrimitive.Portal>
@@ -97,7 +103,7 @@ const MenubarContent = React.forwardRef<
             alignOffset={alignOffset}
             sideOffset={sideOffset}
             className={ny(
-               'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md',
+               "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md",
                className,
             )}
             {...props}
@@ -116,8 +122,8 @@ const MenubarItem = React.forwardRef<
    <MenubarPrimitive.Item
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-         inset && 'pl-8',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -132,7 +138,7 @@ const MenubarCheckboxItem = React.forwardRef<
    <MenubarPrimitive.CheckboxItem
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       checked={checked}
@@ -155,7 +161,7 @@ const MenubarRadioItem = React.forwardRef<
    <MenubarPrimitive.RadioItem
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       {...props}
@@ -179,8 +185,8 @@ const MenubarLabel = React.forwardRef<
    <MenubarPrimitive.Label
       ref={ref}
       className={ny(
-         'px-2 py-1.5 text-sm font-semibold',
-         inset && 'pl-8',
+         "px-2 py-1.5 text-sm font-semibold",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -194,7 +200,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <MenubarPrimitive.Separator
       ref={ref}
-      className={ny('bg-muted -mx-1 my-1 h-px', className)}
+      className={ny("bg-muted -mx-1 my-1 h-px", className)}
       {...props}
    />
 ))
@@ -207,14 +213,14 @@ function MenubarShortcut({
    return (
       <span
          className={ny(
-            'text-muted-foreground ml-auto text-xs tracking-widest',
+            "text-muted-foreground ml-auto text-xs tracking-widest",
             className,
          )}
          {...props}
       />
    )
 }
-MenubarShortcut.displayname = 'MenubarShortcut'
+MenubarShortcut.displayname = "MenubarShortcut"
 
 export {
    Menubar,
diff --git a/apps/web/registry/default/ui/meteors.tsx b/apps/web/registry/default/ui/meteors.tsx
index 014c9e6c..5f6707d3 100644
--- a/apps/web/registry/default/ui/meteors.tsx
+++ b/apps/web/registry/default/ui/meteors.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import clsx from 'clsx'
-import { useEffect, useState } from 'react'
+import clsx from "clsx"
+import { useEffect, useState } from "react"
 
 interface MeteorsProps {
    number?: number
@@ -28,7 +28,7 @@ export function Meteors({ number = 20 }: MeteorsProps) {
             <span
                key={idx}
                className={clsx(
-                  'pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]',
+                  "pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]",
                )}
                style={style}
             >
diff --git a/apps/web/registry/default/ui/morphing-text.tsx b/apps/web/registry/default/ui/morphing-text.tsx
new file mode 100644
index 00000000..59a374f3
--- /dev/null
+++ b/apps/web/registry/default/ui/morphing-text.tsx
@@ -0,0 +1,145 @@
+"use client"
+
+import { useCallback, useEffect, useRef } from "react"
+import { ny } from "~/registry/default/lib/utils"
+
+const morphTime = 1.5
+const cooldownTime = 0.5
+
+const useMorphingText = (texts: string[]) => {
+   const textIndexRef = useRef(0)
+   const morphRef = useRef(0)
+   const cooldownRef = useRef(0)
+   const timeRef = useRef(new Date())
+
+   const text1Ref = useRef<HTMLSpanElement>(null)
+   const text2Ref = useRef<HTMLSpanElement>(null)
+
+   const setStyles = useCallback(
+      (fraction: number) => {
+         const [current1, current2] = [text1Ref.current, text2Ref.current]
+         if (!current1 || !current2) return
+
+         current2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`
+         current2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`
+
+         const invertedFraction = 1 - fraction
+         current1.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`
+         current1.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`
+
+         current1.textContent = texts[textIndexRef.current % texts.length]
+         current2.textContent = texts[(textIndexRef.current + 1) % texts.length]
+      },
+      [texts],
+   )
+
+   const doMorph = useCallback(() => {
+      morphRef.current -= cooldownRef.current
+      cooldownRef.current = 0
+
+      let fraction = morphRef.current / morphTime
+
+      if (fraction > 1) {
+         cooldownRef.current = cooldownTime
+         fraction = 1
+      }
+
+      setStyles(fraction)
+
+      if (fraction === 1) {
+         textIndexRef.current++
+      }
+   }, [setStyles])
+
+   const doCooldown = useCallback(() => {
+      morphRef.current = 0
+      const [current1, current2] = [text1Ref.current, text2Ref.current]
+      if (current1 && current2) {
+         current2.style.filter = "none"
+         current2.style.opacity = "100%"
+         current1.style.filter = "none"
+         current1.style.opacity = "0%"
+      }
+   }, [])
+
+   useEffect(() => {
+      let animationFrameId: number
+
+      const animate = () => {
+         animationFrameId = requestAnimationFrame(animate)
+
+         const newTime = new Date()
+         const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000
+         timeRef.current = newTime
+
+         cooldownRef.current -= dt
+
+         if (cooldownRef.current <= 0) doMorph()
+         else doCooldown()
+      }
+
+      animate()
+      return () => {
+         cancelAnimationFrame(animationFrameId)
+      }
+   }, [doMorph, doCooldown])
+
+   return { text1Ref, text2Ref }
+}
+
+interface MorphingTextProps {
+   className?: string
+   texts: string[]
+}
+
+const Texts: React.FC<Pick<MorphingTextProps, "texts">> = ({ texts }) => {
+   const { text1Ref, text2Ref } = useMorphingText(texts)
+   return (
+      <>
+         <span
+            className="absolute inset-x-0 top-0 m-auto inline-block w-full"
+            ref={text1Ref}
+         />
+         <span
+            className="absolute inset-x-0 top-0 m-auto inline-block w-full"
+            ref={text2Ref}
+         />
+      </>
+   )
+}
+
+const SvgFilters: React.FC = () => (
+   <svg
+      id="filters"
+      className="fixed h-0 w-0"
+      preserveAspectRatio="xMidYMid slice"
+   >
+      <defs>
+         <filter id="threshold">
+            <feColorMatrix
+               in="SourceGraphic"
+               type="matrix"
+               values="1 0 0 0 0
+                  0 1 0 0 0
+                  0 0 1 0 0
+                  0 0 0 255 -140"
+            />
+         </filter>
+      </defs>
+   </svg>
+)
+
+export const MorphingText: React.FC<MorphingTextProps> = ({
+   texts,
+   className,
+}) => (
+   <div
+      className={ny(
+         "relative mx-auto h-16 w-full max-w-screen-md text-center font-sans text-[40pt] font-bold leading-none [filter:url(#threshold)_blur(0.6px)] md:h-24 lg:text-[6rem]",
+         className,
+      )}
+   >
+      <Texts texts={texts} />
+      <SvgFilters />
+   </div>
+)
diff --git a/apps/web/registry/default/ui/multi-select.tsx b/apps/web/registry/default/ui/multi-select.tsx
index 8ddd60ab..ec3780b7 100644
--- a/apps/web/registry/default/ui/multi-select.tsx
+++ b/apps/web/registry/default/ui/multi-select.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-import type { Primitive } from '@radix-ui/react-primitive'
-import { useControllableState } from '@radix-ui/react-use-controllable-state'
-import { Check, ChevronsUpDown, X } from 'lucide-react'
-import { createPortal } from 'react-dom'
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import type { Primitive } from "@radix-ui/react-primitive"
+import { useControllableState } from "@radix-ui/react-use-controllable-state"
+import { Check, ChevronsUpDown, X } from "lucide-react"
+import React from "react"
+import { createPortal } from "react-dom"
 
-import { ny } from '~/lib/utils'
-import { Badge } from '~/registry/default/ui/badge'
+import { ny } from "~/lib/utils"
+import { Badge } from "~/registry/default/ui/badge"
 import {
    Command,
    CommandEmpty,
@@ -17,13 +17,13 @@ import {
    CommandItem,
    CommandList,
    CommandSeparator,
-} from '~/registry/default/ui/command'
+} from "~/registry/default/ui/command"
 import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
+} from "~/registry/default/ui/tooltip"
 
 export interface MultiSelectOptionItem {
    value: string
@@ -51,20 +51,20 @@ interface MultiSelectContextValue {
 }
 
 const MultiSelectContext = React.createContext<
-  MultiSelectContextValue | undefined
+   MultiSelectContextValue | undefined
 >(undefined)
 
 function useMultiSelect() {
    const context = React.useContext(MultiSelectContext)
 
    if (!context)
-      throw new Error('useMultiSelect must be used within MultiSelectProvider')
+      throw new Error("useMultiSelect must be used within MultiSelectProvider")
 
    return context
 }
 
 type MultiSelectProps = React.ComponentPropsWithoutRef<
-  typeof PopoverPrimitive.Root
+   typeof PopoverPrimitive.Root
 > & {
    value?: string[]
    onValueChange?: (value: string[], items: MultiSelectOptionItem[]) => void
@@ -99,7 +99,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
    const handleValueChange = React.useCallback(
       (state: string[]) => {
          if (onValueChangeProp) {
-            const items = state.map(value => itemCache.get(value)!)
+            const items = state.map((value) => itemCache.get(value)!)
 
             onValueChangeProp(state, items)
          }
@@ -122,8 +122,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
    const handleSelect = React.useCallback(
       (value: string, item: MultiSelectOptionItem) => {
          setValue((prev) => {
-            if (prev?.includes(value))
-               return prev
+            if (prev?.includes(value)) return prev
 
             onSelectProp?.(value, item)
 
@@ -136,12 +135,11 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
    const handleDeselect = React.useCallback(
       (value: string, item: MultiSelectOptionItem) => {
          setValue((prev) => {
-            if (!prev || !prev.includes(value))
-               return prev
+            if (!prev || !prev.includes(value)) return prev
 
             onDeselectProp?.(value, item)
 
-            return prev.filter(v => v !== value)
+            return prev.filter((v) => v !== value)
          })
       },
       [onDeselectProp, setValue],
@@ -168,7 +166,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
       maxCount,
       handleSelect,
       handleDeselect,
-      itemCache
+      itemCache,
    ])
 
    return (
@@ -182,7 +180,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
    )
 }
 
-MultiSelect.displayName = 'MultiSelect'
+MultiSelect.displayName = "MultiSelect"
 
 type MultiSelectTriggerElement = React.ElementRef<typeof Primitive.div>
 
@@ -207,21 +205,24 @@ const MultiSelectTrigger = React.forwardRef<
             data-disabled={disabled}
             {...props}
             className={ny(
-               'border-input ring-offset-background focus:ring-ring flex size-full min-h-10 items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 [&>span]:line-clamp-1',
-               disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text',
+               "border-input ring-offset-background focus:ring-ring flex size-full min-h-10 items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 [&>span]:line-clamp-1",
+               disabled ? "cursor-not-allowed opacity-50" : "cursor-text",
                className,
             )}
             onClick={disabled ? PreventClick : props.onClick}
             onTouchStart={disabled ? PreventClick : props.onTouchStart}
          >
             {children}
-            <ChevronsUpDown aria-hidden className="size-4 shrink-0 opacity-50" />
+            <ChevronsUpDown
+               aria-hidden
+               className="size-4 shrink-0 opacity-50"
+            />
          </div>
       </PopoverPrimitive.Trigger>
    )
 })
 
-MultiSelectTrigger.displayName = 'MultiSelectTrigger'
+MultiSelectTrigger.displayName = "MultiSelectTrigger"
 
 interface MultiSelectValueProps
    extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
@@ -241,8 +242,8 @@ const MultiSelectValue = React.forwardRef<
       const { value, itemCache, onDeselect } = useMultiSelect()
       const [firstRendered, setFirstRendered] = React.useState(false)
 
-      const renderRemain
-      = maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0
+      const renderRemain =
+         maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0
       const renderItems = renderRemain ? value.slice(0, maxDisplay) : value
 
       React.useLayoutEffect(() => {
@@ -261,7 +262,7 @@ const MultiSelectValue = React.forwardRef<
          <TooltipProvider delayDuration={300}>
             <div
                className={ny(
-                  'flex flex-1 flex-wrap items-center gap-1.5 overflow-x-hidden',
+                  "flex flex-1 flex-wrap items-center gap-1.5 overflow-x-hidden",
                   className,
                )}
                {...props}
@@ -272,12 +273,12 @@ const MultiSelectValue = React.forwardRef<
 
                   const content = item?.label || value
 
-                  const child
-              = maxItemLength
-              && typeof content === 'string'
-              && content.length > maxItemLength
-                 ? `${content.slice(0, maxItemLength)}...`
-                 : content
+                  const child =
+                     maxItemLength &&
+                     typeof content === "string" &&
+                     content.length > maxItemLength
+                        ? `${content.slice(0, maxItemLength)}...`
+                        : content
 
                   const el = (
                      <Badge
@@ -298,7 +299,9 @@ const MultiSelectValue = React.forwardRef<
                   if (child !== content) {
                      return (
                         <Tooltip key={value}>
-                           <TooltipTrigger className="inline-flex">{el}</TooltipTrigger>
+                           <TooltipTrigger className="inline-flex">
+                              {el}
+                           </TooltipTrigger>
                            <TooltipContent
                               side="bottom"
                               align="start"
@@ -312,21 +315,18 @@ const MultiSelectValue = React.forwardRef<
 
                   return el
                })}
-               {renderRemain
-                  ? (
-                        <span className="text-muted-foreground py-.5 text-xs leading-4">
-                           +
-                           {renderRemain}
-                        </span>
-                     )
-                  : null}
+               {renderRemain ? (
+                  <span className="text-muted-foreground py-.5 text-xs leading-4">
+                     +{renderRemain}
+                  </span>
+               ) : null}
             </div>
          </TooltipProvider>
       )
    },
 )
 
-MultiSelectValue.displayName = 'MultiSelectValue'
+MultiSelectValue.displayName = "MultiSelectValue"
 
 const MultiSelectSearch = React.forwardRef<
    React.ElementRef<typeof CommandInput>,
@@ -337,7 +337,7 @@ const MultiSelectSearch = React.forwardRef<
    return <CommandInput ref={ref} {...props} onValueChange={onSearch} />
 })
 
-MultiSelectSearch.displayName = 'MultiSelectSearch'
+MultiSelectSearch.displayName = "MultiSelectSearch"
 
 const MultiSelectList = React.forwardRef<
    React.ElementRef<typeof CommandList>,
@@ -346,13 +346,13 @@ const MultiSelectList = React.forwardRef<
    return (
       <CommandList
          ref={ref}
-         className={ny('max-h-[unset] px-0 py-1', className)}
+         className={ny("max-h-[unset] px-0 py-1", className)}
          {...props}
       />
    )
 })
 
-MultiSelectList.displayName = 'MultiSelectList'
+MultiSelectList.displayName = "MultiSelectList"
 
 interface MultiSelectContentProps
    extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {}
@@ -365,7 +365,7 @@ const MultiSelectContent = React.forwardRef<
 
    const fragmentRef = React.useRef<DocumentFragment>()
 
-   if (!fragmentRef.current && typeof window !== 'undefined')
+   if (!fragmentRef.current && typeof window !== "undefined")
       fragmentRef.current = document.createDocumentFragment()
 
    if (!context.open) {
@@ -382,26 +382,27 @@ const MultiSelectContent = React.forwardRef<
             sideOffset={4}
             collisionPadding={10}
             className={ny(
-               'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-full rounded-md border p-0 shadow-md outline-none',
+               "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-full rounded-md border p-0 shadow-md outline-none",
             )}
             style={
                {
-                  '--radix-select-content-transform-origin':
-              'var(--radix-popper-transform-origin)',
-                  '--radix-select-content-available-width':
-              'var(--radix-popper-available-width)',
-                  '--radix-select-content-available-height':
-              'var(--radix-popper-available-height)',
-                  '--radix-select-trigger-width': 'var(--radix-popper-anchor-width)',
-                  '--radix-select-trigger-height':
-              'var(--radix-popper-anchor-height)',
+                  "--radix-select-content-transform-origin":
+                     "var(--radix-popper-transform-origin)",
+                  "--radix-select-content-available-width":
+                     "var(--radix-popper-available-width)",
+                  "--radix-select-content-available-height":
+                     "var(--radix-popper-available-height)",
+                  "--radix-select-trigger-width":
+                     "var(--radix-popper-anchor-width)",
+                  "--radix-select-trigger-height":
+                     "var(--radix-popper-anchor-height)",
                } as any
             }
             {...props}
          >
             <Command
                className={ny(
-                  'max-h-96 w-full min-w-[var(--radix-select-trigger-width)] px-1',
+                  "max-h-96 w-full min-w-[var(--radix-select-trigger-width)] px-1",
                   className,
                )}
                shouldFilter={!context.onSearch}
@@ -413,7 +414,7 @@ const MultiSelectContent = React.forwardRef<
    )
 })
 
-MultiSelectContent.displayName = 'MultiSelectContent'
+MultiSelectContent.displayName = "MultiSelectContent"
 
 type MultiSelectItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> &
    Partial<MultiSelectOptionItem> & {
@@ -449,30 +450,30 @@ const MultiSelectItem = React.forwardRef<
       const item = React.useMemo(() => {
          return value
             ? {
-                  value,
-                  label:
-              label || (typeof children === 'string' ? children : undefined),
-               }
+                 value,
+                 label:
+                    label ||
+                    (typeof children === "string" ? children : undefined),
+              }
             : undefined
       }, [value, label, children])
 
       const selected = Boolean(value && contextValue.includes(value))
 
       React.useEffect(() => {
-         if (value)
-            itemCache.set(value, item!)
+         if (value) itemCache.set(value, item!)
       }, [selected, value, item, itemCache])
 
       const disabled = Boolean(
-         disabledProp || (!selected && maxCount && contextValue.length >= maxCount),
+         disabledProp ||
+            (!selected && maxCount && contextValue.length >= maxCount),
       )
 
       const handleClick = () => {
          if (selected) {
             onDeselectProp?.(value!, item!)
             onDeselect(value!, item!)
-         }
-         else {
+         } else {
             itemCache.set(value!, item!)
             onSelectProp?.(value!, item!)
             onSelect(value!, item!)
@@ -484,23 +485,21 @@ const MultiSelectItem = React.forwardRef<
             {...props}
             value={value}
             className={ny(
-               disabled && 'text-muted-foreground cursor-not-allowed',
+               disabled && "text-muted-foreground cursor-not-allowed",
                className,
             )}
             disabled={disabled}
             onSelect={!disabled && value ? handleClick : undefined}
             ref={forwardedRef}
          >
-            <span className="mr-2 truncate">
-               {children || label || value}
-            </span>
+            <span className="mr-2 truncate">{children || label || value}</span>
             {selected ? <Check className="ml-auto size-4 shrink-0" /> : null}
          </CommandItem>
       )
    },
 )
 
-MultiSelectItem.displayName = 'MultiSelectItem'
+MultiSelectItem.displayName = "MultiSelectItem"
 
 const MultiSelectGroup = React.forwardRef<
    React.ElementRef<typeof CommandGroup>,
@@ -509,7 +508,7 @@ const MultiSelectGroup = React.forwardRef<
    return <CommandGroup {...props} ref={forwardRef} />
 })
 
-MultiSelectGroup.displayName = 'MultiSelectGroup'
+MultiSelectGroup.displayName = "MultiSelectGroup"
 
 const MultiSelectSeparator = React.forwardRef<
    React.ElementRef<typeof CommandSeparator>,
@@ -518,12 +517,12 @@ const MultiSelectSeparator = React.forwardRef<
    return <CommandSeparator {...props} ref={forwardRef} />
 })
 
-MultiSelectSeparator.displayName = 'MultiSelectSeparator'
+MultiSelectSeparator.displayName = "MultiSelectSeparator"
 
 const MultiSelectEmpty = React.forwardRef<
    React.ElementRef<typeof CommandEmpty>,
    React.ComponentPropsWithoutRef<typeof CommandEmpty>
->(({ children = 'No Content', ...props }, forwardRef) => {
+>(({ children = "No Content", ...props }, forwardRef) => {
    return (
       <CommandEmpty {...props} ref={forwardRef}>
          {children}
@@ -531,10 +530,10 @@ const MultiSelectEmpty = React.forwardRef<
    )
 })
 
-MultiSelectEmpty.displayName = 'MultiSelectEmpty'
+MultiSelectEmpty.displayName = "MultiSelectEmpty"
 
 export interface MultiSelectOptionSeparator {
-   type: 'separator'
+   type: "separator"
 }
 
 export interface MultiSelectOptionGroup {
@@ -545,22 +544,22 @@ export interface MultiSelectOptionGroup {
 
 export type MultiSelectOption =
    | Pick<
-      MultiSelectItemProps,
-      'value' | 'label' | 'disabled' | 'onSelect' | 'onDeselect'
-   >
+        MultiSelectItemProps,
+        "value" | "label" | "disabled" | "onSelect" | "onDeselect"
+     >
    | MultiSelectOptionSeparator
    | MultiSelectOptionGroup
 
 function renderMultiSelectOptions(list: MultiSelectOption[]) {
    return list.map((option, index) => {
-      if ('type' in option) {
-         if (option.type === 'separator')
+      if ("type" in option) {
+         if (option.type === "separator")
             return <MultiSelectSeparator key={index} />
 
          return null
       }
 
-      if ('children' in option) {
+      if ("children" in option) {
          return (
             <MultiSelectGroup
                key={option.value || index}
@@ -592,4 +591,4 @@ export {
    MultiSelectSeparator,
    MultiSelectEmpty,
    renderMultiSelectOptions,
-}
\ No newline at end of file
+}
diff --git a/apps/web/registry/default/ui/navigation-menu.tsx b/apps/web/registry/default/ui/navigation-menu.tsx
index e1329b38..93b6a0a5 100644
--- a/apps/web/registry/default/ui/navigation-menu.tsx
+++ b/apps/web/registry/default/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react'
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
-import { cva } from 'class-variance-authority'
-import { ChevronDown } from 'lucide-react'
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const NavigationMenu = React.forwardRef<
    React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@@ -12,7 +12,7 @@ const NavigationMenu = React.forwardRef<
    <NavigationMenuPrimitive.Root
       ref={ref}
       className={ny(
-         'relative z-10 flex max-w-max flex-1 items-center justify-center',
+         "relative z-10 flex max-w-max flex-1 items-center justify-center",
          className,
       )}
       {...props}
@@ -30,7 +30,7 @@ const NavigationMenuList = React.forwardRef<
    <NavigationMenuPrimitive.List
       ref={ref}
       className={ny(
-         'group flex flex-1 list-none items-center justify-center space-x-1',
+         "group flex flex-1 list-none items-center justify-center space-x-1",
          className,
       )}
       {...props}
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-   'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
 )
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -50,11 +50,10 @@ const NavigationMenuTrigger = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
    <NavigationMenuPrimitive.Trigger
       ref={ref}
-      className={ny(navigationMenuTriggerStyle(), 'group', className)}
+      className={ny(navigationMenuTriggerStyle(), "group", className)}
       {...props}
    >
-      {children}
-      {' '}
+      {children}{" "}
       <ChevronDown
          className="relative top-px ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
          aria-hidden="true"
@@ -70,7 +69,7 @@ const NavigationMenuContent = React.forwardRef<
    <NavigationMenuPrimitive.Content
       ref={ref}
       className={ny(
-         'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto ',
+         "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto ",
          className,
       )}
       {...props}
@@ -84,10 +83,10 @@ const NavigationMenuViewport = React.forwardRef<
    React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-   <div className={ny('absolute left-0 top-full flex justify-center')}>
+   <div className={ny("absolute left-0 top-full flex justify-center")}>
       <NavigationMenuPrimitive.Viewport
          className={ny(
-            'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]',
+            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
             className,
          )}
          ref={ref}
@@ -95,8 +94,8 @@ const NavigationMenuViewport = React.forwardRef<
       />
    </div>
 ))
-NavigationMenuViewport.displayName
-  = NavigationMenuPrimitive.Viewport.displayName
+NavigationMenuViewport.displayName =
+   NavigationMenuPrimitive.Viewport.displayName
 
 const NavigationMenuIndicator = React.forwardRef<
    React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -105,7 +104,7 @@ const NavigationMenuIndicator = React.forwardRef<
    <NavigationMenuPrimitive.Indicator
       ref={ref}
       className={ny(
-         'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+         "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
          className,
       )}
       {...props}
@@ -113,8 +112,8 @@ const NavigationMenuIndicator = React.forwardRef<
       <div className="bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md" />
    </NavigationMenuPrimitive.Indicator>
 ))
-NavigationMenuIndicator.displayName
-  = NavigationMenuPrimitive.Indicator.displayName
+NavigationMenuIndicator.displayName =
+   NavigationMenuPrimitive.Indicator.displayName
 
 export {
    navigationMenuTriggerStyle,
diff --git a/apps/web/registry/default/ui/neon-gradient-card.tsx b/apps/web/registry/default/ui/neon-gradient-card.tsx
index b6b350a2..7b822750 100644
--- a/apps/web/registry/default/ui/neon-gradient-card.tsx
+++ b/apps/web/registry/default/ui/neon-gradient-card.tsx
@@ -1,17 +1,9 @@
-'use client'
+"use client"
 
-import type {
-   CSSProperties,
-   ReactElement,
-   ReactNode,
-} from 'react'
-import {
-   useEffect,
-   useRef,
-   useState,
-} from 'react'
+import type { CSSProperties, ReactElement, ReactNode } from "react"
+import { useEffect, useRef, useState } from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface NeonColorsProps {
    firstColor: string
@@ -75,8 +67,8 @@ const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
    borderSize = 2,
    borderRadius = 20,
    neonColors = {
-      firstColor: '#ff00aa',
-      secondColor: '#00FFF1',
+      firstColor: "#ff00aa",
+      secondColor: "#00FFF1",
    },
    ...props
 }) => {
@@ -92,10 +84,10 @@ const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
       }
 
       updateDimensions()
-      window.addEventListener('resize', updateDimensions)
+      window.addEventListener("resize", updateDimensions)
 
       return () => {
-         window.removeEventListener('resize', updateDimensions)
+         window.removeEventListener("resize", updateDimensions)
       }
    }, [])
 
@@ -111,37 +103,37 @@ const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
          ref={containerRef}
          style={
             {
-               '--border-size': `${borderSize}px`,
-               '--border-radius': `${borderRadius}px`,
-               '--neon-first-color': neonColors.firstColor,
-               '--neon-second-color': neonColors.secondColor,
-               '--card-width': `${dimensions.width}px`,
-               '--card-height': `${dimensions.height}px`,
-               '--card-content-radius': `${borderRadius - borderSize}px`,
-               '--pseudo-element-background-image': `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,
-               '--pseudo-element-width': `${dimensions.width + borderSize * 2}px`,
-               '--pseudo-element-height': `${dimensions.height + borderSize * 2}px`,
-               '--after-blur': `${dimensions.width / 3}px`,
+               "--border-size": `${borderSize}px`,
+               "--border-radius": `${borderRadius}px`,
+               "--neon-first-color": neonColors.firstColor,
+               "--neon-second-color": neonColors.secondColor,
+               "--card-width": `${dimensions.width}px`,
+               "--card-height": `${dimensions.height}px`,
+               "--card-content-radius": `${borderRadius - borderSize}px`,
+               "--pseudo-element-background-image": `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,
+               "--pseudo-element-width": `${dimensions.width + borderSize * 2}px`,
+               "--pseudo-element-height": `${dimensions.height + borderSize * 2}px`,
+               "--after-blur": `${dimensions.width / 3}px`,
             } as CSSProperties
          }
          className={ny(
-            'relative z-10 size-full rounded-[var(--border-radius)]',
+            "relative z-10 size-full rounded-[var(--border-radius)]",
             className,
          )}
          {...props}
       >
          <div
             className={ny(
-               'relative size-full min-h-[inherit] rounded-[var(--card-content-radius)] bg-gray-100 p-6',
-               'before:absolute before:-left-[var(--border-size)] before:-top-[var(--border-size)] before:-z-10 before:block',
-               'before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-[\'\']',
-               'before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-[length:100%_200%]',
-               'before:animate-background-position-spin',
-               'after:absolute after:-left-[var(--border-size)] after:-top-[var(--border-size)] after:-z-10 after:block',
-               'after:h-[var(--pseudo-element-height)] after:w-[var(--pseudo-element-width)] after:rounded-[var(--border-radius)] after:blur-[var(--after-blur)] after:content-[\'\']',
-               'after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80',
-               'after:animate-background-position-spin',
-               'dark:bg-neutral-900',
+               "relative size-full min-h-[inherit] rounded-[var(--card-content-radius)] bg-gray-100 p-6",
+               "before:absolute before:-left-[var(--border-size)] before:-top-[var(--border-size)] before:-z-10 before:block",
+               "before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-['']",
+               "before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-[length:100%_200%]",
+               "before:animate-background-position-spin",
+               "after:absolute after:-left-[var(--border-size)] after:-top-[var(--border-size)] after:-z-10 after:block",
+               "after:h-[var(--pseudo-element-height)] after:w-[var(--pseudo-element-width)] after:rounded-[var(--border-radius)] after:blur-[var(--after-blur)] after:content-['']",
+               "after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80",
+               "after:animate-background-position-spin",
+               "dark:bg-neutral-900",
             )}
          >
             {children}
diff --git a/apps/web/registry/default/ui/number-ticker.tsx b/apps/web/registry/default/ui/number-ticker.tsx
index dccded63..6dcb8019 100644
--- a/apps/web/registry/default/ui/number-ticker.tsx
+++ b/apps/web/registry/default/ui/number-ticker.tsx
@@ -1,40 +1,40 @@
-'use client'
+"use client"
 
-import { useInView, useMotionValue, useSpring } from 'framer-motion'
-import { useEffect, useRef } from 'react'
-import { ny } from '~/lib/utils'
+import { useInView, useMotionValue, useSpring } from "framer-motion"
+import { useEffect, useRef } from "react"
+import { ny } from "~/lib/utils"
 
 export default function NumberTicker({
    value,
-   direction = 'up',
+   direction = "up",
    delay = 0,
    className,
 }: {
    value: number
-   direction?: 'up' | 'down'
+   direction?: "up" | "down"
    className?: string
    delay?: number // delay in s
 }) {
    const ref = useRef<HTMLSpanElement>(null)
-   const motionValue = useMotionValue(direction === 'down' ? value : 0)
+   const motionValue = useMotionValue(direction === "down" ? value : 0)
    const springValue = useSpring(motionValue, {
       damping: 60,
       stiffness: 100,
    })
-   const isInView = useInView(ref, { once: true, margin: '0px' })
+   const isInView = useInView(ref, { once: true, margin: "0px" })
 
    useEffect(() => {
-      isInView
-      && setTimeout(() => {
-         motionValue.set(direction === 'down' ? 0 : value)
-      }, delay * 1000)
+      isInView &&
+         setTimeout(() => {
+            motionValue.set(direction === "down" ? 0 : value)
+         }, delay * 1000)
    }, [motionValue, isInView, delay, value, direction])
 
    useEffect(
       () =>
-         springValue.on('change', (latest) => {
+         springValue.on("change", (latest) => {
             if (ref.current) {
-               ref.current.textContent = Intl.NumberFormat('en-US').format(
+               ref.current.textContent = Intl.NumberFormat("en-US").format(
                   Math.round(latest),
                )
             }
@@ -45,7 +45,7 @@ export default function NumberTicker({
    return (
       <span
          className={ny(
-            'inline-block tabular-nums tracking-wider text-black dark:text-white',
+            "inline-block tabular-nums tracking-wider text-black dark:text-white",
             className,
          )}
          ref={ref}
diff --git a/apps/web/registry/default/ui/nyx-toc.tsx b/apps/web/registry/default/ui/nyx-toc.tsx
index 2f980916..9f0b2573 100644
--- a/apps/web/registry/default/ui/nyx-toc.tsx
+++ b/apps/web/registry/default/ui/nyx-toc.tsx
@@ -1,16 +1,36 @@
-'use client'
-
-import * as React from 'react'
-import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode, RefObject } from 'react'
-import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import type { PopoverContentProps, PopoverTriggerProps } from '@radix-ui/react-popover'
-import { AlignLeft, ChevronRight } from 'lucide-react'
-import scrollIntoView from 'scroll-into-view-if-needed'
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
-import { Popover, PopoverContent, PopoverTrigger } from '~/registry/miami/ui/popover'
-import { ny } from '~/lib/utils'
-import { useAnchorObserver } from '~/hooks/use-anchor-observer'
-import { useOnChange } from '~/hooks/use-on-change'
+"use client"
+
+import type {
+   PopoverContentProps,
+   PopoverTriggerProps,
+} from "@radix-ui/react-popover"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import { AlignLeft, ChevronRight } from "lucide-react"
+import * as React from "react"
+import type {
+   AnchorHTMLAttributes,
+   HTMLAttributes,
+   ReactNode,
+   RefObject,
+} from "react"
+import {
+   createContext,
+   forwardRef,
+   useContext,
+   useEffect,
+   useMemo,
+   useRef,
+   useState,
+} from "react"
+import scrollIntoView from "scroll-into-view-if-needed"
+import { useAnchorObserver } from "~/hooks/use-anchor-observer"
+import { useOnChange } from "~/hooks/use-on-change"
+import { ny } from "~/lib/utils"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
 
 // #region Types
 export interface TOCItemType {
@@ -36,7 +56,7 @@ export interface PageStyles {
 }
 
 export interface TOCItemProps
-   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
    href: string
 
    onActiveChange?: (v: boolean) => void
@@ -49,7 +69,7 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
    <ScrollAreaPrimitive.Root
       ref={ref}
-      className={ny('overflow-hidden', className)}
+      className={ny("overflow-hidden", className)}
       {...props}
    >
       {children}
@@ -66,7 +86,7 @@ const ScrollViewport = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
    <ScrollAreaPrimitive.Viewport
       ref={ref}
-      className={ny('size-full rounded-[inherit]', className)}
+      className={ny("size-full rounded-[inherit]", className)}
       {...props}
    >
       {children}
@@ -78,14 +98,14 @@ ScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName
 const ScrollBar = React.forwardRef<
    React.ComponentRef<typeof ScrollAreaPrimitive.Scrollbar>,
    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
+>(({ className, orientation = "vertical", ...props }, ref) => (
    <ScrollAreaPrimitive.Scrollbar
       ref={ref}
       orientation={orientation}
       className={ny(
-         'data-[state=hidden]:animate-fd-fade-out flex select-none',
-         orientation === 'vertical' && 'h-full w-1.5',
-         orientation === 'horizontal' && 'h-1.5 flex-col',
+         "data-[state=hidden]:animate-fd-fade-out flex select-none",
+         orientation === "vertical" && "h-full w-1.5",
+         orientation === "horizontal" && "h-1.5 flex-col",
          className,
       )}
       {...props}
@@ -99,10 +119,12 @@ export { ScrollArea, ScrollBar, ScrollViewport }
 
 // #region Contexts
 const ActiveAnchorContext = createContext<string[]>([])
-const ScrollContext = createContext<RefObject<HTMLElement | null>>({ current: null })
+const ScrollContext = createContext<RefObject<HTMLElement | null>>({
+   current: null,
+})
 const StylesContext = createContext<PageStyles>({
-   tocNav: 'xl:hidden',
-   toc: 'max-xl:hidden',
+   tocNav: "xl:hidden",
+   toc: "max-xl:hidden",
 })
 
 // #region Hooks
@@ -128,19 +150,16 @@ function isDifferent(a: unknown, b: unknown): boolean {
 function mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
    return (value) => {
       refs.forEach((ref) => {
-         if (typeof ref === 'function')
-            ref(value)
-         else if (ref !== null && typeof ref === 'object')
+         if (typeof ref === "function") ref(value)
+         else if (ref !== null && typeof ref === "object")
             (ref as React.MutableRefObject<T | null>).current = value
       })
    }
 }
 
 function getItemOffset(depth: number): number {
-   if (depth <= 2)
-      return 14
-   if (depth === 3)
-      return 26
+   if (depth <= 2) return 14
+   if (depth === 3) return 26
    return 36
 }
 
@@ -173,7 +192,7 @@ export function AnchorProvider({
    children?: ReactNode
 }): React.ReactElement {
    const headings = useMemo(() => {
-      return toc.map(item => item.url.split('#')[1])
+      return toc.map((item) => item.url.split("#")[1])
    }, [toc])
 
    return (
@@ -194,15 +213,14 @@ export const TOCItem = forwardRef<HTMLAnchorElement, TOCItemProps>(
 
       useOnChange(isActive, (v) => {
          const element = anchorRef.current
-         if (!element)
-            return
+         if (!element) return
 
          if (v && containerRef.current) {
             scrollIntoView(element, {
-               behavior: 'smooth',
-               block: 'center',
-               inline: 'center',
-               scrollMode: 'always',
+               behavior: "smooth",
+               block: "center",
+               inline: "center",
+               scrollMode: "always",
                boundary: containerRef.current,
             })
          }
@@ -218,7 +236,7 @@ export const TOCItem = forwardRef<HTMLAnchorElement, TOCItemProps>(
    },
 )
 
-TOCItem.displayName = 'TOCItem'
+TOCItem.displayName = "TOCItem"
 
 export function TocThumb({
    containerRef,
@@ -232,24 +250,27 @@ export function TocThumb({
    activeRef.current = active
 
    function calc(container: HTMLElement, active: string[]): TOCThumb {
-      if (active.length === 0 || container.clientHeight === 0)
-         return [0, 0]
+      if (active.length === 0 || container.clientHeight === 0) return [0, 0]
 
       let upper = Number.MAX_VALUE
       let lower = 0
 
       for (const item of active) {
-         const element = container.querySelector<HTMLElement>(`a[href="#${item}"]`)
-         if (!element)
-            continue
+         const element = container.querySelector<HTMLElement>(
+            `a[href="#${item}"]`,
+         )
+         if (!element) continue
 
          const styles = getComputedStyle(element)
-         upper = Math.min(upper, element.offsetTop + Number.parseFloat(styles.paddingTop))
+         upper = Math.min(
+            upper,
+            element.offsetTop + Number.parseFloat(styles.paddingTop),
+         )
          lower = Math.max(
             lower,
-            element.offsetTop
-            + element.clientHeight
-            - Number.parseFloat(styles.paddingBottom),
+            element.offsetTop +
+               element.clientHeight -
+               Number.parseFloat(styles.paddingBottom),
          )
       }
 
@@ -257,18 +278,16 @@ export function TocThumb({
    }
 
    function update(element: HTMLElement, info: TOCThumb): void {
-      element.style.setProperty('--nyx-top', `${info[0]}px`)
-      element.style.setProperty('--nyx-height', `${info[1]}px`)
+      element.style.setProperty("--nyx-top", `${info[0]}px`)
+      element.style.setProperty("--nyx-height", `${info[1]}px`)
    }
 
    useEffect(() => {
-      if (!containerRef.current)
-         return
+      if (!containerRef.current) return
       const container = containerRef.current
 
       const onResize = (): void => {
-         if (!thumbRef.current)
-            return
+         if (!thumbRef.current) return
          update(thumbRef.current, calc(container, activeRef.current))
       }
 
@@ -282,8 +301,7 @@ export function TocThumb({
    }, [containerRef])
 
    useOnChange(active, () => {
-      if (!containerRef.current || !thumbRef.current)
-         return
+      if (!containerRef.current || !thumbRef.current) return
 
       update(thumbRef.current, calc(containerRef.current, active))
    })
@@ -307,14 +325,17 @@ export function Toc(props: HTMLAttributes<HTMLDivElement>) {
          id="nyx-toc"
          {...props}
          className={ny(
-            'top-nyx-layout-top sticky h-[var(--nyx-toc-height)] pb-2 pt-12',
+            "top-nyx-layout-top sticky h-[var(--nyx-toc-height)] pb-2 pt-12",
             toc,
             props.className,
          )}
-         style={{
-            ...props.style,
-            '--nyx-toc-height': 'calc(100dvh - var(--nyx-banner-height) - var(--nyx-nav-height))',
-         } as any}
+         style={
+            {
+               ...props.style,
+               "--nyx-toc-height":
+                  "calc(100dvh - var(--nyx-banner-height) - var(--nyx-nav-height))",
+            } as any
+         }
       >
          <div className="flex h-full w-[var(--nyx-width)] max-w-full flex-col gap-3 pe-4">
             {props.children}
@@ -343,13 +364,11 @@ export function NyxTOCItems({
    }>()
 
    useEffect(() => {
-      if (!containerRef.current)
-         return
+      if (!containerRef.current) return
       const container = containerRef.current
 
       function onResize(): void {
-         if (container.clientHeight === 0)
-            return
+         if (container.clientHeight === 0) return
          let w = 0
          let h = 0
          const d: string[] = []
@@ -357,23 +376,25 @@ export function NyxTOCItems({
             const element: HTMLElement | null = container.querySelector(
                `a[href="#${items[i].url.slice(1)}"]`,
             )
-            if (!element)
-               continue
+            if (!element) continue
 
             const styles = getComputedStyle(element)
             const offset = getLineOffset(items[i].depth) + 1
             const top = element.offsetTop + Number.parseFloat(styles.paddingTop)
-            const bottom = element.offsetTop + element.clientHeight - Number.parseFloat(styles.paddingBottom)
+            const bottom =
+               element.offsetTop +
+               element.clientHeight -
+               Number.parseFloat(styles.paddingBottom)
 
             w = Math.max(offset, w)
             h = Math.max(h, bottom)
 
-            d.push(`${i === 0 ? 'M' : 'L'}${offset} ${top}`)
+            d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`)
             d.push(`L${offset} ${bottom}`)
          }
 
          setSvg({
-            path: d.join(' '),
+            path: d.join(" "),
             width: w + 1,
             height: h,
          })
@@ -385,8 +406,7 @@ export function NyxTOCItems({
       return () => observer.disconnect()
    }, [items])
 
-   if (items.length === 0)
-      return <TocItemsEmpty />
+   if (items.length === 0) return <TocItemsEmpty />
 
    return (
       <>
@@ -396,30 +416,28 @@ export function NyxTOCItems({
                {label}
             </h3>
          )}
-         <ScrollArea className={ny('flex flex-col', isMenu && '-ms-3')}>
+         <ScrollArea className={ny("flex flex-col", isMenu && "-ms-3")}>
             <ScrollViewport className="relative min-h-0" ref={viewRef}>
-               {svg
-                  ? (
-                        <div
-                           className="absolute start-0 top-0 rtl:-scale-x-100"
-                           style={{
-                              width: svg.width,
-                              height: svg.height,
-                              maskImage: `url("data:image/svg+xml,${
-                             // Inline SVG
-                             encodeURIComponent(
-                               `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`,
-                             )
-                           }")`,
-                           }}
-                        >
-                           <TocThumb
-                              containerRef={containerRef}
-                              className="bg-primary mt-[var(--nyx-top)] h-[var(--nyx-height)] transition-all"
-                           />
-                        </div>
-                     )
-                  : null}
+               {svg ? (
+                  <div
+                     className="absolute start-0 top-0 rtl:-scale-x-100"
+                     style={{
+                        width: svg.width,
+                        height: svg.height,
+                        maskImage: `url("data:image/svg+xml,${
+                           // Inline SVG
+                           encodeURIComponent(
+                              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`,
+                           )
+                        }")`,
+                     }}
+                  >
+                     <TocThumb
+                        containerRef={containerRef}
+                        className="bg-primary mt-[var(--nyx-top)] h-[var(--nyx-height)] transition-all"
+                     />
+                  </div>
+               ) : null}
                <ScrollProvider containerRef={viewRef}>
                   <div className="flex flex-col" ref={containerRef}>
                      {items.map((item, i) => (
@@ -447,14 +465,14 @@ export function TocPopoverTrigger({
 }: PopoverTriggerProps & { items: TOCItemType[] }) {
    const active = useActiveAnchor()
    const current = useMemo(() => {
-      return items.find(item => active === item.url.slice(1))?.title
+      return items.find((item) => active === item.url.slice(1))?.title
    }, [items, active])
 
    return (
       <PopoverTrigger
          {...props}
          className={ny(
-            'inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start',
+            "inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start",
             props.className,
          )}
       >
@@ -480,7 +498,7 @@ export function TocPopoverContent(props: PopoverContentProps) {
          data-toc-popover=""
          {...props}
          className={ny(
-            'flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3',
+            "flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3",
             props.className,
          )}
       >
@@ -510,29 +528,27 @@ function LocalTOCItem({
          }}
          className="prose text-muted-foreground data-[active=true]:text-primary relative py-1.5 text-sm transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0"
       >
-         {offset !== upperOffset
-            ? (
-                  <svg
-                     xmlns="http://www.w3.org/2000/svg"
-                     viewBox="0 0 16 16"
-                     className="absolute -top-1.5 start-0 size-4 rtl:-scale-x-100"
-                  >
-                     <line
-                        x1={upperOffset}
-                        y1="0"
-                        x2={offset}
-                        y2="12"
-                        className="stroke-foreground/10"
-                        strokeWidth="1"
-                     />
-                  </svg>
-               )
-            : null}
+         {offset !== upperOffset ? (
+            <svg
+               xmlns="http://www.w3.org/2000/svg"
+               viewBox="0 0 16 16"
+               className="absolute -top-1.5 start-0 size-4 rtl:-scale-x-100"
+            >
+               <line
+                  x1={upperOffset}
+                  y1="0"
+                  x2={offset}
+                  y2="12"
+                  className="stroke-foreground/10"
+                  strokeWidth="1"
+               />
+            </svg>
+         ) : null}
          <div
             className={ny(
-               'bg-foreground/10 absolute inset-y-0 w-px',
-               offset !== upperOffset && 'top-1.5',
-               offset !== lowerOffset && 'bottom-1.5',
+               "bg-foreground/10 absolute inset-y-0 w-px",
+               offset !== upperOffset && "top-1.5",
+               offset !== lowerOffset && "bottom-1.5",
             )}
             style={{
                insetInlineStart: offset,
diff --git a/apps/web/registry/default/ui/orbiting-circles.tsx b/apps/web/registry/default/ui/orbiting-circles.tsx
index 589cfd2d..abe53b43 100644
--- a/apps/web/registry/default/ui/orbiting-circles.tsx
+++ b/apps/web/registry/default/ui/orbiting-circles.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 export default function OrbitingCircles({
    className,
@@ -39,14 +39,14 @@ export default function OrbitingCircles({
          <div
             style={
                {
-                  '--duration': duration,
-                  '--radius': radius,
-                  '--delay': -delay,
+                  "--duration": duration,
+                  "--radius": radius,
+                  "--delay": -delay,
                } as React.CSSProperties
             }
             className={ny(
-               'animate-orbit absolute flex size-full transform-gpu items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10',
-               { '[animation-direction:reverse]': reverse },
+               "animate-orbit absolute flex size-full transform-gpu items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10",
+               { "[animation-direction:reverse]": reverse },
                className,
             )}
          >
diff --git a/apps/web/registry/default/ui/pagination.tsx b/apps/web/registry/default/ui/pagination.tsx
index 1010a67b..ade0b8cc 100644
--- a/apps/web/registry/default/ui/pagination.tsx
+++ b/apps/web/registry/default/ui/pagination.tsx
@@ -1,59 +1,59 @@
-import * as React from 'react'
-import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import type { ButtonProps } from '~/registry/default/ui/button'
-import { buttonVariants } from '~/registry/default/ui/button'
+import { ny } from "~/lib/utils"
+import type { ButtonProps } from "~/registry/default/ui/button"
+import { buttonVariants } from "~/registry/default/ui/button"
 
-function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
    return (
       <nav
          role="navigation"
          aria-label="pagination"
-         className={ny('mx-auto flex w-full justify-center', className)}
+         className={ny("mx-auto flex w-full justify-center", className)}
          {...props}
       />
    )
 }
-Pagination.displayName = 'Pagination'
+Pagination.displayName = "Pagination"
 
 const PaginationContent = React.forwardRef<
    HTMLUListElement,
-   React.ComponentProps<'ul'>
+   React.ComponentProps<"ul">
 >(({ className, ...props }, ref) => (
    <ul
       ref={ref}
-      className={ny('flex flex-row items-center gap-1', className)}
+      className={ny("flex flex-row items-center gap-1", className)}
       {...props}
    />
 ))
-PaginationContent.displayName = 'PaginationContent'
+PaginationContent.displayName = "PaginationContent"
 
 const PaginationItem = React.forwardRef<
    HTMLLIElement,
-   React.ComponentProps<'li'>
+   React.ComponentProps<"li">
 >(({ className, ...props }, ref) => (
-   <li ref={ref} className={ny('', className)} {...props} />
+   <li ref={ref} className={ny("", className)} {...props} />
 ))
-PaginationItem.displayName = 'PaginationItem'
+PaginationItem.displayName = "PaginationItem"
 
 type PaginationLinkProps = {
    isActive?: boolean
-} & Pick<ButtonProps, 'size'> &
-React.ComponentProps<'a'>
+} & Pick<ButtonProps, "size"> &
+   React.ComponentProps<"a">
 
 function PaginationLink({
    className,
    isActive,
-   size = 'icon',
+   size = "icon",
    ...props
 }: PaginationLinkProps) {
    return (
       <a
-         aria-current={isActive ? 'page' : undefined}
+         aria-current={isActive ? "page" : undefined}
          className={ny(
             buttonVariants({
-               variant: isActive ? 'outline' : 'ghost',
+               variant: isActive ? "outline" : "ghost",
                size,
             }),
             className,
@@ -62,7 +62,7 @@ function PaginationLink({
       />
    )
 }
-PaginationLink.displayName = 'PaginationLink'
+PaginationLink.displayName = "PaginationLink"
 
 function PaginationPrevious({
    className,
@@ -72,7 +72,7 @@ function PaginationPrevious({
       <PaginationLink
          aria-label="Go to previous page"
          size="default"
-         className={ny('gap-1 pl-2.5', className)}
+         className={ny("gap-1 pl-2.5", className)}
          {...props}
       >
          <ChevronLeft className="size-4" />
@@ -80,7 +80,7 @@ function PaginationPrevious({
       </PaginationLink>
    )
 }
-PaginationPrevious.displayName = 'PaginationPrevious'
+PaginationPrevious.displayName = "PaginationPrevious"
 
 function PaginationNext({
    className,
@@ -90,7 +90,7 @@ function PaginationNext({
       <PaginationLink
          aria-label="Go to next page"
          size="default"
-         className={ny('gap-1 pr-2.5', className)}
+         className={ny("gap-1 pr-2.5", className)}
          {...props}
       >
          <span>Next</span>
@@ -98,16 +98,16 @@ function PaginationNext({
       </PaginationLink>
    )
 }
-PaginationNext.displayName = 'PaginationNext'
+PaginationNext.displayName = "PaginationNext"
 
 function PaginationEllipsis({
    className,
    ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
    return (
       <span
          aria-hidden
-         className={ny('flex size-9 items-center justify-center', className)}
+         className={ny("flex size-9 items-center justify-center", className)}
          {...props}
       >
          <MoreHorizontal className="size-4" />
@@ -115,7 +115,7 @@ function PaginationEllipsis({
       </span>
    )
 }
-PaginationEllipsis.displayName = 'PaginationEllipsis'
+PaginationEllipsis.displayName = "PaginationEllipsis"
 
 export {
    Pagination,
diff --git a/apps/web/registry/default/ui/particles.tsx b/apps/web/registry/default/ui/particles.tsx
index 81eedc7b..55700550 100644
--- a/apps/web/registry/default/ui/particles.tsx
+++ b/apps/web/registry/default/ui/particles.tsx
@@ -1,6 +1,7 @@
-'use client'
+"use client"
 
-import React, { useEffect, useRef, useState } from 'react'
+import type React from "react"
+import { useEffect, useRef, useState } from "react"
 
 interface MousePosition {
    x: number
@@ -18,10 +19,10 @@ function MousePosition(): MousePosition {
          setMousePosition({ x: event.clientX, y: event.clientY })
       }
 
-      window.addEventListener('mousemove', handleMouseMove)
+      window.addEventListener("mousemove", handleMouseMove)
 
       return () => {
-         window.removeEventListener('mousemove', handleMouseMove)
+         window.removeEventListener("mousemove", handleMouseMove)
       }
    }, [])
 
@@ -40,14 +41,14 @@ interface ParticlesProps {
    vy?: number
 }
 function hexToRgb(hex: string): number[] {
-   hex = hex.replace('#', '')
+   hex = hex.replace("#", "")
 
    // Unterstützung für dreistellige Hex-Farbcodes
    if (hex.length === 3) {
       hex = hex
-         .split('')
-         .map(char => char + char)
-         .join('')
+         .split("")
+         .map((char) => char + char)
+         .join("")
    }
 
    const hexInt = Number.parseInt(hex, 16)
@@ -58,13 +59,13 @@ function hexToRgb(hex: string): number[] {
 }
 
 const Particles: React.FC<ParticlesProps> = ({
-   className = '',
+   className = "",
    quantity = 100,
    staticity = 50,
    ease = 50,
    size = 0.4,
    refresh = false,
-   color = '#ffffff',
+   color = "#ffffff",
    vx = 0,
    vy = 0,
 }) => {
@@ -73,20 +74,20 @@ const Particles: React.FC<ParticlesProps> = ({
    const context = useRef<CanvasRenderingContext2D | null>(null)
    const circles = useRef<any[]>([])
    const mousePosition = MousePosition()
-   const mouse = useRef<{ x: number, y: number }>({ x: 0, y: 0 })
-   const canvasSize = useRef<{ w: number, h: number }>({ w: 0, h: 0 })
-   const dpr = typeof window !== 'undefined' ? window.devicePixelRatio : 1
+   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+   const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })
+   const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1
 
    useEffect(() => {
       if (canvasRef.current)
-         context.current = canvasRef.current.getContext('2d')
+         context.current = canvasRef.current.getContext("2d")
 
       initCanvas()
       animate()
-      window.addEventListener('resize', initCanvas)
+      window.addEventListener("resize", initCanvas)
 
       return () => {
-         window.removeEventListener('resize', initCanvas)
+         window.removeEventListener("resize", initCanvas)
       }
    }, [color])
 
@@ -178,12 +179,11 @@ const Particles: React.FC<ParticlesProps> = ({
          context.current.translate(translateX, translateY)
          context.current.beginPath()
          context.current.arc(x, y, size, 0, 2 * Math.PI)
-         context.current.fillStyle = `rgba(${rgb.join(', ')}, ${alpha})`
+         context.current.fillStyle = `rgba(${rgb.join(", ")}, ${alpha})`
          context.current.fill()
          context.current.setTransform(dpr, 0, 0, dpr, 0, 0)
 
-         if (!update)
-            circles.current.push(circle)
+         if (!update) circles.current.push(circle)
       }
    }
 
@@ -214,15 +214,15 @@ const Particles: React.FC<ParticlesProps> = ({
       start2: number,
       end2: number,
    ): number => {
-      const remapped
-      = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2
+      const remapped =
+         ((value - start1) * (end2 - start2)) / (end1 - start1) + start2
       return remapped > 0 ? remapped : 0
    }
 
    const animate = () => {
       clearContext()
       circles.current.forEach((circle: Circle, i: number) => {
-      // Handle the alpha value
+         // Handle the alpha value
          const edge = [
             circle.x + circle.translateX - circle.size, // distance from left edge
             canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge
@@ -237,27 +237,28 @@ const Particles: React.FC<ParticlesProps> = ({
             circle.alpha += 0.02
             if (circle.alpha > circle.targetAlpha)
                circle.alpha = circle.targetAlpha
-         }
-         else {
+         } else {
             circle.alpha = circle.targetAlpha * remapClosestEdge
          }
          circle.x += circle.dx + vx
          circle.y += circle.dy + vy
-         circle.translateX
-        += (mouse.current.x / (staticity / circle.magnetism) - circle.translateX)
-        / ease
-         circle.translateY
-        += (mouse.current.y / (staticity / circle.magnetism) - circle.translateY)
-        / ease
+         circle.translateX +=
+            (mouse.current.x / (staticity / circle.magnetism) -
+               circle.translateX) /
+            ease
+         circle.translateY +=
+            (mouse.current.y / (staticity / circle.magnetism) -
+               circle.translateY) /
+            ease
 
          drawCircle(circle, true)
 
          // circle gets out of the canvas
          if (
-            circle.x < -circle.size
-            || circle.x > canvasSize.current.w + circle.size
-            || circle.y < -circle.size
-            || circle.y > canvasSize.current.h + circle.size
+            circle.x < -circle.size ||
+            circle.x > canvasSize.current.w + circle.size ||
+            circle.y < -circle.size ||
+            circle.y > canvasSize.current.h + circle.size
          ) {
             // remove the circle from the array
             circles.current.splice(i, 1)
diff --git a/apps/web/registry/default/ui/popover.tsx b/apps/web/registry/default/ui/popover.tsx
index c91cc5a0..765b2e64 100644
--- a/apps/web/registry/default/ui/popover.tsx
+++ b/apps/web/registry/default/ui/popover.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Popover = PopoverPrimitive.Root
 
@@ -14,14 +14,14 @@ const PopoverAnchor = PopoverPrimitive.Anchor // Neues Element hinzugefügt
 const PopoverContent = React.forwardRef<
    React.ElementRef<typeof PopoverPrimitive.Content>,
    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
    <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
          ref={ref}
          align={align}
          sideOffset={sideOffset}
          className={ny(
-            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
+            "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
             className,
          )}
          {...props}
diff --git a/apps/web/registry/default/ui/progress.tsx b/apps/web/registry/default/ui/progress.tsx
index f22364cd..172917ae 100644
--- a/apps/web/registry/default/ui/progress.tsx
+++ b/apps/web/registry/default/ui/progress.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as ProgressPrimitive from '@radix-ui/react-progress'
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Progress = React.forwardRef<
    React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -12,7 +12,7 @@ const Progress = React.forwardRef<
    <ProgressPrimitive.Root
       ref={ref}
       className={ny(
-         'bg-secondary relative h-4 w-full overflow-hidden rounded-full',
+         "bg-secondary relative h-4 w-full overflow-hidden rounded-full",
          className,
       )}
       {...props}
diff --git a/apps/web/registry/default/ui/pulsating-button.tsx b/apps/web/registry/default/ui/pulsating-button.tsx
index b1739317..5a067110 100644
--- a/apps/web/registry/default/ui/pulsating-button.tsx
+++ b/apps/web/registry/default/ui/pulsating-button.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import React from 'react'
+import type React from "react"
 
 interface PulsatingButtonProps {
    text: string
@@ -22,14 +22,12 @@ export const PulsatingButton: React.FC<PulsatingButtonProps> = ({
    buttonHeight,
 }) => {
    const pulseKeyframes = {
-      '--tw-pulse-color': pulseColor,
-      'animation': `pulse ${animationDuration} linear infinite`,
+      "--tw-pulse-color": pulseColor,
+      animation: `pulse ${animationDuration} linear infinite`,
    }
 
    return (
-      <div
-         className="flex items-center justify-center"
-      >
+      <div className="flex items-center justify-center">
          <button
             className="relative block flex cursor-pointer items-center justify-center text-center"
             style={{
@@ -37,7 +35,7 @@ export const PulsatingButton: React.FC<PulsatingButtonProps> = ({
                backgroundColor,
                width: buttonWidth,
                height: buttonHeight,
-               borderRadius: '12px',
+               borderRadius: "12px",
                ...pulseKeyframes,
             }}
          >
diff --git a/apps/web/registry/default/ui/radio-group.tsx b/apps/web/registry/default/ui/radio-group.tsx
index 0b5e36c6..5ade44ec 100644
--- a/apps/web/registry/default/ui/radio-group.tsx
+++ b/apps/web/registry/default/ui/radio-group.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
-import { Circle } from 'lucide-react'
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const RadioGroup = React.forwardRef<
    React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -12,7 +12,7 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
    return (
       <RadioGroupPrimitive.Root
-         className={ny('grid gap-2', className)}
+         className={ny("grid gap-2", className)}
          {...props}
          ref={ref}
       />
@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
       <RadioGroupPrimitive.Item
          ref={ref}
          className={ny(
-            'border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            "border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             className,
          )}
          {...props}
diff --git a/apps/web/registry/default/ui/rainbow-button.tsx b/apps/web/registry/default/ui/rainbow-button.tsx
index e4b174a6..d1cb53c4 100644
--- a/apps/web/registry/default/ui/rainbow-button.tsx
+++ b/apps/web/registry/default/ui/rainbow-button.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import type React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface RainbowButtonProps
    extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
@@ -9,16 +9,16 @@ export function RainbowButton({ children, ...props }: RainbowButtonProps) {
    return (
       <button
          className={ny(
-            'focus-visible:ring-ring animate-rainbow text-primary-foreground group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',
+            "focus-visible:ring-ring animate-rainbow text-primary-foreground group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
 
             // before styles
-            'before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]',
+            "before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]",
 
             // light mode colors
-            'bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+            "bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
 
             // dark mode colors
-            ' dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+            " dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
          )}
          {...props}
       >
diff --git a/apps/web/registry/default/ui/resizable.tsx b/apps/web/registry/default/ui/resizable.tsx
index f917f5e1..dc0cd829 100644
--- a/apps/web/registry/default/ui/resizable.tsx
+++ b/apps/web/registry/default/ui/resizable.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { GripVertical } from 'lucide-react'
-import * as ResizablePrimitive from 'react-resizable-panels'
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 function ResizablePanelGroup({
    className,
@@ -12,7 +12,7 @@ function ResizablePanelGroup({
    return (
       <ResizablePrimitive.PanelGroup
          className={ny(
-            'flex size-full data-[panel-group-direction=vertical]:flex-col',
+            "flex size-full data-[panel-group-direction=vertical]:flex-col",
             className,
          )}
          {...props}
@@ -32,7 +32,7 @@ function ResizableHandle({
    return (
       <ResizablePrimitive.PanelResizeHandle
          className={ny(
-            'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+            "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
             className,
          )}
          {...props}
diff --git a/apps/web/registry/default/ui/retro-grid.tsx b/apps/web/registry/default/ui/retro-grid.tsx
index 986170c2..ec8c4ed7 100644
--- a/apps/web/registry/default/ui/retro-grid.tsx
+++ b/apps/web/registry/default/ui/retro-grid.tsx
@@ -1,31 +1,68 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/registry/default/lib/utils"
+
+interface RetroGridProps extends React.HTMLAttributes<HTMLDivElement> {
+   /**
+    * Additional CSS classes to apply to the grid container
+    */
+   className?: string
+   /**
+    * Rotation angle of the grid in degrees
+    * @default 65
+    */
+   angle?: number
+   /**
+    * Grid cell size in pixels
+    * @default 60
+    */
+   cellSize?: number
+   /**
+    * Grid opacity value between 0 and 1
+    * @default 0.5
+    */
+   opacity?: number
+   /**
+    * Grid line color in light mode
+    * @default "gray"
+    */
+   lightLineColor?: string
+   /**
+    * Grid line color in dark mode
+    * @default "gray"
+    */
+   darkLineColor?: string
+}
+
+export function RetroGrid({
+   className,
+   angle = 65,
+   cellSize = 60,
+   opacity = 0.5,
+   lightLineColor = "gray",
+   darkLineColor = "gray",
+   ...props
+}: RetroGridProps) {
+   const gridStyles = {
+      "--grid-angle": `${angle}deg`,
+      "--cell-size": `${cellSize}px`,
+      "--opacity": opacity,
+      "--light-line": lightLineColor,
+      "--dark-line": darkLineColor,
+   } as React.CSSProperties
 
-export default function RetroGrid({ className }: { className?: string }) {
    return (
       <div
          className={ny(
-            'pointer-events-none absolute size-full overflow-hidden opacity-50 [perspective:200px]',
+            "pointer-events-none absolute size-full overflow-hidden [perspective:200px]",
+            `opacity-[var(--opacity)]`,
             className,
          )}
+         style={gridStyles}
+         {...props}
       >
-         {/* Grid */}
-         <div className="absolute inset-0 [transform:rotateX(35deg)]">
-            <div
-               className={ny(
-                  'animate-grid',
-
-                  '[background-repeat:repeat] [background-size:60px_60px] [height:300vh] [inset:0%_0px] [margin-left:-50%] [transform-origin:100%_0_0] [width:600vw]',
-
-                  // Light Styles
-                  '[background-image:linear-gradient(to_right,rgba(0,0,0,0.3)_1px,transparent_0),linear-gradient(to_bottom,rgba(0,0,0,0.3)_1px,transparent_0)]',
-
-                  // Dark styles
-                  'dark:[background-image:linear-gradient(to_right,rgba(255,255,255,0.2)_1px,transparent_0),linear-gradient(to_bottom,rgba(255,255,255,0.2)_1px,transparent_0)]',
-               )}
-            />
+         <div className="absolute inset-0 [transform:rotateX(var(--grid-angle))]">
+            <div className="animate-grid [background-image:linear-gradient(to_right,var(--light-line)_1px,transparent_0),linear-gradient(to_bottom,var(--light-line)_1px,transparent_0)] [background-repeat:repeat] [background-size:var(--cell-size)_var(--cell-size)] [height:300vh] [inset:0%_0px] [margin-left:-200%] [transform-origin:100%_0_0] [width:600vw] dark:[background-image:linear-gradient(to_right,var(--dark-line)_1px,transparent_0),linear-gradient(to_bottom,var(--dark-line)_1px,transparent_0)]" />
          </div>
 
-         {/* Background Gradient */}
          <div className="absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black" />
       </div>
    )
diff --git a/apps/web/registry/default/ui/ripple-button.tsx b/apps/web/registry/default/ui/ripple-button.tsx
new file mode 100644
index 00000000..06a5ced3
--- /dev/null
+++ b/apps/web/registry/default/ui/ripple-button.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import React, { type MouseEvent, useEffect, useState } from "react"
+import { ny } from "~/registry/default/lib/utils"
+
+interface RippleButtonProps
+   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+   rippleColor?: string
+   duration?: string
+}
+
+export const RippleButton = React.forwardRef<
+   HTMLButtonElement,
+   RippleButtonProps
+>(
+   (
+      {
+         className,
+         children,
+         rippleColor = "#ffffff",
+         duration = "600ms",
+         onClick,
+         ...props
+      },
+      ref,
+   ) => {
+      const [buttonRipples, setButtonRipples] = useState<
+         Array<{ x: number; y: number; size: number; key: number }>
+      >([])
+
+      const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+         createRipple(event)
+         onClick?.(event)
+      }
+
+      const createRipple = (event: MouseEvent<HTMLButtonElement>) => {
+         const button = event.currentTarget
+         const rect = button.getBoundingClientRect()
+         const size = Math.max(rect.width, rect.height)
+         const x = event.clientX - rect.left - size / 2
+         const y = event.clientY - rect.top - size / 2
+
+         const newRipple = { x, y, size, key: Date.now() }
+         setButtonRipples((prevRipples) => [...prevRipples, newRipple])
+      }
+
+      useEffect(() => {
+         if (buttonRipples.length > 0) {
+            const lastRipple = buttonRipples[buttonRipples.length - 1]
+            const timeout = setTimeout(() => {
+               setButtonRipples((prevRipples) =>
+                  prevRipples.filter((ripple) => ripple.key !== lastRipple.key),
+               )
+            }, Number.parseInt(duration))
+            return () => clearTimeout(timeout)
+         }
+      }, [buttonRipples, duration])
+
+      return (
+         <button
+            className={ny(
+               "relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 bg-background px-4 py-2 text-center text-primary",
+               className,
+            )}
+            onClick={handleClick}
+            ref={ref}
+            {...props}
+         >
+            <div className="relative z-10">{children}</div>
+            <span className="pointer-events-none absolute inset-0">
+               {buttonRipples.map((ripple) => (
+                  <span
+                     className="absolute animate-rippling rounded-full bg-background opacity-30"
+                     key={ripple.key}
+                     style={{
+                        width: `${ripple.size}px`,
+                        height: `${ripple.size}px`,
+                        top: `${ripple.y}px`,
+                        left: `${ripple.x}px`,
+                        backgroundColor: rippleColor,
+                        transform: `scale(0)`,
+                     }}
+                  />
+               ))}
+            </span>
+         </button>
+      )
+   },
+)
+
+RippleButton.displayName = "RippleButton"
diff --git a/apps/web/registry/default/ui/ripple.tsx b/apps/web/registry/default/ui/ripple.tsx
index b96228e4..8909c8b3 100644
--- a/apps/web/registry/default/ui/ripple.tsx
+++ b/apps/web/registry/default/ui/ripple.tsx
@@ -1,33 +1,58 @@
-import type { CSSProperties } from 'react'
-import React from 'react'
+import React, { type ComponentPropsWithoutRef, type CSSProperties } from "react"
 
-// Modify these
-const MAIN_CIRCLE_SIZE = 210
-const MAIN_CIRCLE_OPACITY = 0.24
-const NUM_CIRCLES = 8
+import { ny } from "~/registry/default/lib/utils"
 
-const Ripple = React.memo(() => {
+interface RippleProps extends ComponentPropsWithoutRef<"div"> {
+   mainCircleSize?: number
+   mainCircleOpacity?: number
+   numCircles?: number
+}
+
+export const Ripple = React.memo(function Ripple({
+   mainCircleSize = 210,
+   mainCircleOpacity = 0.24,
+   numCircles = 8,
+   className,
+   ...props
+}: RippleProps) {
    return (
-      <div className="absolute left-1/2 top-1/2 size-full overflow-visible">
-         {Array.from({ length: NUM_CIRCLES }, (_, i) => (
-            <div
-               key={i}
-               className="animate-ripple absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-neutral-400"
-               style={
-                  {
-                     width: MAIN_CIRCLE_SIZE + i * 70,
-                     height: MAIN_CIRCLE_SIZE + i * 70,
-                     opacity: MAIN_CIRCLE_OPACITY - i * 0.03,
-                     animationDelay: `${i * 0.06}s`,
-                  } as CSSProperties
-               }
-            >
-            </div>
-         ))}
+      <div
+         className={ny(
+            "pointer-events-none absolute inset-0 select-none [mask-image:linear-gradient(to_bottom,white,transparent)]",
+            className,
+         )}
+         {...props}
+      >
+         {Array.from({ length: numCircles }, (_, i) => {
+            const size = mainCircleSize + i * 70
+            const opacity = mainCircleOpacity - i * 0.03
+            const animationDelay = `${i * 0.06}s`
+            const borderStyle = i === numCircles - 1 ? "dashed" : "solid"
+            const borderOpacity = 5 + i * 5
+
+            return (
+               <div
+                  key={i}
+                  className={`[--i: absolute animate-ripple rounded-full border bg-foreground/25 shadow-xl${i}]`}
+                  style={
+                     {
+                        width: `${size}px`,
+                        height: `${size}px`,
+                        opacity,
+                        animationDelay,
+                        borderStyle,
+                        borderWidth: "1px",
+                        borderColor: `hsl(var(--foreground), ${borderOpacity / 100})`,
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, -50%) scale(1)",
+                     } as CSSProperties
+                  }
+               />
+            )
+         })}
       </div>
    )
 })
 
-Ripple.displayName = 'Ripple'
-
-export default Ripple
+Ripple.displayName = "Ripple"
diff --git a/apps/web/registry/default/ui/safari.tsx b/apps/web/registry/default/ui/safari.tsx
index 1af34299..4ccd5072 100644
--- a/apps/web/registry/default/ui/safari.tsx
+++ b/apps/web/registry/default/ui/safari.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react'
+import type { SVGProps } from "react"
 
 export interface SafariProps extends SVGProps<SVGSVGElement> {
    url?: string
diff --git a/apps/web/registry/default/ui/scratch-to-reveal.tsx b/apps/web/registry/default/ui/scratch-to-reveal.tsx
index abf404c1..5a85aa9b 100644
--- a/apps/web/registry/default/ui/scratch-to-reveal.tsx
+++ b/apps/web/registry/default/ui/scratch-to-reveal.tsx
@@ -1,7 +1,8 @@
-'use client'
-import React, { useEffect, useRef, useState } from 'react'
-import { motion, useAnimation } from 'framer-motion'
-import { ny } from '~/lib/utils'
+"use client"
+import { motion, useAnimation } from "framer-motion"
+import type React from "react"
+import { useEffect, useRef, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface ScratchToRevealProps {
    children: React.ReactNode
@@ -28,9 +29,9 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
 
    useEffect(() => {
       const canvas = canvasRef.current
-      const ctx = canvas?.getContext('2d')
+      const ctx = canvas?.getContext("2d")
       if (canvas && ctx) {
-         ctx.fillStyle = '#ccc'
+         ctx.fillStyle = "#ccc"
          ctx.fillRect(0, 0, canvas.width, canvas.height)
          // Optionally add a background image or gradient
          const gradient = ctx.createLinearGradient(
@@ -39,9 +40,9 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
             canvas.width,
             canvas.height,
          )
-         gradient.addColorStop(0, '#A97CF8')
-         gradient.addColorStop(0.5, '#F38CB8')
-         gradient.addColorStop(1, '#FDCC92')
+         gradient.addColorStop(0, "#A97CF8")
+         gradient.addColorStop(0.5, "#F38CB8")
+         gradient.addColorStop(1, "#FDCC92")
          ctx.fillStyle = gradient
          ctx.fillRect(0, 0, canvas.width, canvas.height)
       }
@@ -49,14 +50,12 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
 
    useEffect(() => {
       const handleDocumentMouseMove = (event: MouseEvent) => {
-         if (!isScratching)
-            return
+         if (!isScratching) return
          scratch(event.clientX, event.clientY)
       }
 
       const handleDocumentTouchMove = (event: TouchEvent) => {
-         if (!isScratching)
-            return
+         if (!isScratching) return
          const touch = event.touches[0]
          scratch(touch.clientX, touch.clientY)
       }
@@ -71,22 +70,22 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
          checkCompletion()
       }
 
-      document.addEventListener('mousedown', handleDocumentMouseMove)
-      document.addEventListener('mousemove', handleDocumentMouseMove)
-      document.addEventListener('touchstart', handleDocumentTouchMove)
-      document.addEventListener('touchmove', handleDocumentTouchMove)
-      document.addEventListener('mouseup', handleDocumentMouseUp)
-      document.addEventListener('touchend', handleDocumentTouchEnd)
-      document.addEventListener('touchcancel', handleDocumentTouchEnd)
+      document.addEventListener("mousedown", handleDocumentMouseMove)
+      document.addEventListener("mousemove", handleDocumentMouseMove)
+      document.addEventListener("touchstart", handleDocumentTouchMove)
+      document.addEventListener("touchmove", handleDocumentTouchMove)
+      document.addEventListener("mouseup", handleDocumentMouseUp)
+      document.addEventListener("touchend", handleDocumentTouchEnd)
+      document.addEventListener("touchcancel", handleDocumentTouchEnd)
 
       return () => {
-         document.removeEventListener('mousedown', handleDocumentMouseMove)
-         document.removeEventListener('mousemove', handleDocumentMouseMove)
-         document.removeEventListener('touchstart', handleDocumentTouchMove)
-         document.removeEventListener('touchmove', handleDocumentTouchMove)
-         document.removeEventListener('mouseup', handleDocumentMouseUp)
-         document.removeEventListener('touchend', handleDocumentTouchEnd)
-         document.removeEventListener('touchcancel', handleDocumentTouchEnd)
+         document.removeEventListener("mousedown", handleDocumentMouseMove)
+         document.removeEventListener("mousemove", handleDocumentMouseMove)
+         document.removeEventListener("touchstart", handleDocumentTouchMove)
+         document.removeEventListener("touchmove", handleDocumentTouchMove)
+         document.removeEventListener("mouseup", handleDocumentMouseUp)
+         document.removeEventListener("touchend", handleDocumentTouchEnd)
+         document.removeEventListener("touchcancel", handleDocumentTouchEnd)
       }
    }, [isScratching])
 
@@ -96,12 +95,12 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
 
    const scratch = (clientX: number, clientY: number) => {
       const canvas = canvasRef.current
-      const ctx = canvas?.getContext('2d')
+      const ctx = canvas?.getContext("2d")
       if (canvas && ctx) {
          const rect = canvas.getBoundingClientRect()
          const x = clientX - rect.left + 16 // offset to position the scratched circle with cursor
          const y = clientY - rect.top + 16
-         ctx.globalCompositeOperation = 'destination-out'
+         ctx.globalCompositeOperation = "destination-out"
          ctx.beginPath()
          ctx.arc(x, y, 30, 0, Math.PI * 2)
          ctx.fill()
@@ -109,11 +108,10 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
    }
 
    const checkCompletion = () => {
-      if (isComplete)
-         return // Check if already completed
+      if (isComplete) return // Check if already completed
 
       const canvas = canvasRef.current
-      const ctx = canvas?.getContext('2d')
+      const ctx = canvas?.getContext("2d")
       if (canvas && ctx) {
          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
          const pixels = imageData.data
@@ -121,8 +119,7 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
          let clearPixels = 0
 
          for (let i = 3; i < pixels.length; i += 4) {
-            if (pixels[i] === 0)
-               clearPixels++
+            if (pixels[i] === 0) clearPixels++
          }
 
          const percentage = (clearPixels / totalPixels) * 100
@@ -131,8 +128,7 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
             setIsComplete(true) // Set complete flag
             ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvas to reveal everything
             startAnimation()
-            if (onComplete)
-               onComplete()
+            if (onComplete) onComplete()
          }
       }
    }
@@ -147,12 +143,12 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
 
    return (
       <motion.div
-         className={ny('relative select-none', className)}
+         className={ny("relative select-none", className)}
          style={{
             width,
             height,
             cursor:
-          'url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+\'), auto',
+               "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto",
          }}
          animate={controls}
       >
@@ -163,8 +159,7 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
             className="absolute left-0 top-0"
             onMouseDown={handleMouseDown}
             onTouchStart={handleTouchStart}
-         >
-         </canvas>
+         ></canvas>
          {children}
       </motion.div>
    )
diff --git a/apps/web/registry/default/ui/script-copy-btn.tsx b/apps/web/registry/default/ui/script-copy-btn.tsx
new file mode 100644
index 00000000..8cb540e9
--- /dev/null
+++ b/apps/web/registry/default/ui/script-copy-btn.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import { Check, Copy } from "lucide-react"
+import { motion } from "motion/react"
+import { useTheme } from "next-themes"
+import { type HTMLAttributes, useEffect, useState } from "react"
+import { ny } from "~/registry/default/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+
+interface ScriptCopyBtnProps extends HTMLAttributes<HTMLDivElement> {
+   showMultiplePackageOptions?: boolean
+   codeLanguage: string
+   lightTheme: string
+   darkTheme: string
+   commandMap: Record<string, string>
+   className?: string
+}
+
+export function ScriptCopyBtn({
+   showMultiplePackageOptions = true,
+   codeLanguage,
+   lightTheme,
+   darkTheme,
+   commandMap,
+   className,
+}: ScriptCopyBtnProps) {
+   const packageManagers = Object.keys(commandMap)
+   const [packageManager, setPackageManager] = useState(packageManagers[0])
+   const [copied, setCopied] = useState(false)
+   const [highlightedCode, setHighlightedCode] = useState("")
+   const { theme } = useTheme()
+   const command = commandMap[packageManager]
+
+   useEffect(() => {
+      async function loadHighlightedCode() {
+         try {
+            const { codeToHtml } = await import("shiki")
+            const highlighted = await codeToHtml(command, {
+               lang: codeLanguage,
+               themes: {
+                  light: lightTheme,
+                  dark: darkTheme,
+               },
+               defaultColor: theme === "dark" ? "dark" : "light",
+            })
+            setHighlightedCode(highlighted)
+         } catch (error) {
+            console.error("Error highlighting code:", error)
+            setHighlightedCode(`<pre>${command}</pre>`)
+         }
+      }
+
+      loadHighlightedCode()
+   }, [command, theme, codeLanguage, lightTheme, darkTheme])
+
+   const copyToClipboard = () => {
+      navigator.clipboard.writeText(command)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+   }
+
+   return (
+      <div
+         className={ny(
+            "mx-auto flex max-w-md items-center justify-center",
+            className,
+         )}
+      >
+         <div className="w-full space-y-2">
+            <div className="mb-2 flex items-center justify-between">
+               {showMultiplePackageOptions && (
+                  <div className="relative">
+                     <div className="inline-flex overflow-hidden rounded-md border border-border text-xs">
+                        {packageManagers.map((pm, index) => (
+                           <div key={pm} className="flex items-center">
+                              {index > 0 && (
+                                 <div
+                                    className="h-4 w-px bg-border"
+                                    aria-hidden="true"
+                                 />
+                              )}
+                              <Button
+                                 variant="ghost"
+                                 size="sm"
+                                 className={`relative rounded-none bg-background px-2 py-1 hover:bg-background ${
+                                    packageManager === pm
+                                       ? "text-primary"
+                                       : "text-muted-foreground"
+                                 }`}
+                                 onClick={() => setPackageManager(pm)}
+                              >
+                                 {pm}
+                                 {packageManager === pm && (
+                                    <motion.div
+                                       className="absolute inset-x-0 bottom-[1px] mx-auto h-0.5 w-[90%] bg-primary"
+                                       layoutId="activeTab"
+                                       initial={false}
+                                       transition={{
+                                          type: "spring",
+                                          stiffness: 500,
+                                          damping: 30,
+                                       }}
+                                    />
+                                 )}
+                              </Button>
+                           </div>
+                        ))}
+                     </div>
+                  </div>
+               )}
+            </div>
+            <div className="relative flex items-center">
+               <div className="min-w-[300px] grow font-mono">
+                  {highlightedCode ? (
+                     <div
+                        className={`[&>pre]:overflow-x-auto [&>pre]:rounded-md [&>pre]:p-2 [&>pre]:px-4 [&>pre]:font-mono ${
+                           theme === "dark" ? "dark" : "light"
+                        }`}
+                        dangerouslySetInnerHTML={{ __html: highlightedCode }}
+                     />
+                  ) : (
+                     <pre className="rounded-md border border-border bg-white p-2 px-4 font-mono dark:bg-black">
+                        {command}
+                     </pre>
+                  )}
+               </div>
+               <Button
+                  variant="outline"
+                  size="icon"
+                  className="relative ml-2 rounded-md"
+                  onClick={copyToClipboard}
+                  aria-label={copied ? "Copied" : "Copy to clipboard"}
+               >
+                  <span className="sr-only">{copied ? "Copied" : "Copy"}</span>
+                  <Copy
+                     className={`h-4 w-4 transition-all duration-300 ${
+                        copied ? "scale-0" : "scale-100"
+                     }`}
+                  />
+                  <Check
+                     className={`absolute inset-0 m-auto h-4 w-4 transition-all duration-300 ${
+                        copied ? "scale-100" : "scale-0"
+                     }`}
+                  />
+               </Button>
+            </div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/ui/scroll-area.tsx b/apps/web/registry/default/ui/scroll-area.tsx
index 48193119..3914d303 100644
--- a/apps/web/registry/default/ui/scroll-area.tsx
+++ b/apps/web/registry/default/ui/scroll-area.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const ScrollArea = React.forwardRef<
    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -11,7 +11,7 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
    <ScrollAreaPrimitive.Root
       ref={ref}
-      className={ny('relative overflow-hidden', className)}
+      className={ny("relative overflow-hidden", className)}
       {...props}
    >
       <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
@@ -25,17 +25,19 @@ ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 
 const ScrollBar = React.forwardRef<
    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
+   React.ComponentPropsWithoutRef<
+      typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+   >
+>(({ className, orientation = "vertical", ...props }, ref) => (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
       ref={ref}
       orientation={orientation}
       className={ny(
-         'flex touch-none select-none transition-colors',
-         orientation === 'vertical'
-         && 'h-full w-2.5 border-l border-l-transparent p-px',
-         orientation === 'horizontal'
-         && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         "flex touch-none select-none transition-colors",
+         orientation === "vertical" &&
+            "h-full w-2.5 border-l border-l-transparent p-px",
+         orientation === "horizontal" &&
+            "h-2.5 flex-col border-t border-t-transparent p-px",
          className,
       )}
       {...props}
diff --git a/apps/web/registry/default/ui/scroll-based-velocity.tsx b/apps/web/registry/default/ui/scroll-based-velocity.tsx
index a216b577..93870b8e 100644
--- a/apps/web/registry/default/ui/scroll-based-velocity.tsx
+++ b/apps/web/registry/default/ui/scroll-based-velocity.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { wrap } from '@motionone/utils'
+import { wrap } from "@motionone/utils"
 import {
    motion,
    useAnimationFrame,
@@ -9,9 +9,9 @@ import {
    useSpring,
    useTransform,
    useVelocity,
-} from 'framer-motion'
-import React, { useEffect, useRef, useState } from 'react'
-import { ny } from '~/lib/utils'
+} from "framer-motion"
+import React, { useEffect, useRef, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface VelocityScrollProps {
    text: string
@@ -63,20 +63,18 @@ export function VelocityScroll({
 
          calculateRepetitions()
 
-         window.addEventListener('resize', calculateRepetitions)
-         return () => window.removeEventListener('resize', calculateRepetitions)
+         window.addEventListener("resize", calculateRepetitions)
+         return () => window.removeEventListener("resize", calculateRepetitions)
       }, [children])
 
-      const x = useTransform(baseX, v => `${wrap(-100 / repetitions, 0, v)}%`)
+      const x = useTransform(baseX, (v) => `${wrap(-100 / repetitions, 0, v)}%`)
 
       const directionFactor = React.useRef<number>(1)
       useAnimationFrame((t, delta) => {
          let moveBy = directionFactor.current * baseVelocity * (delta / 1000)
 
-         if (velocityFactor.get() < 0)
-            directionFactor.current = -1
-         else if (velocityFactor.get() > 0)
-            directionFactor.current = 1
+         if (velocityFactor.get() < 0) directionFactor.current = -1
+         else if (velocityFactor.get() > 0) directionFactor.current = 1
 
          moveBy += directionFactor.current * moveBy * velocityFactor.get()
 
@@ -88,11 +86,10 @@ export function VelocityScroll({
             className="w-full overflow-hidden whitespace-nowrap"
             ref={containerRef}
          >
-            <motion.div className={ny('inline-block', className)} style={{ x }}>
+            <motion.div className={ny("inline-block", className)} style={{ x }}>
                {Array.from({ length: repetitions }).map((_, i) => (
                   <span key={i} ref={i === 0 ? textRef : null}>
-                     {children}
-                     {' '}
+                     {children}{" "}
                   </span>
                ))}
             </motion.div>
diff --git a/apps/web/registry/default/ui/scroll-progress.tsx b/apps/web/registry/default/ui/scroll-progress.tsx
index bcfd99f0..0556430a 100644
--- a/apps/web/registry/default/ui/scroll-progress.tsx
+++ b/apps/web/registry/default/ui/scroll-progress.tsx
@@ -1,13 +1,11 @@
-import { motion, useScroll, useSpring } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import { motion, useScroll, useSpring } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface ScrollProgressProps {
    className?: string
 }
 
-export default function ScrollProgress({
-   className,
-}: ScrollProgressProps) {
+export default function ScrollProgress({ className }: ScrollProgressProps) {
    const { scrollYProgress } = useScroll()
 
    const scaleX = useSpring(scrollYProgress, {
@@ -18,7 +16,10 @@ export default function ScrollProgress({
 
    return (
       <motion.div
-         className={ny('fixed inset-x-0 top-0 z-[1000] h-1 origin-left bg-gradient-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]', className)}
+         className={ny(
+            "fixed inset-x-0 top-0 z-[1000] h-1 origin-left bg-gradient-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]",
+            className,
+         )}
          style={{
             scaleX,
          }}
diff --git a/apps/web/registry/default/ui/select.tsx b/apps/web/registry/default/ui/select.tsx
index d288b2bf..3d232c36 100644
--- a/apps/web/registry/default/ui/select.tsx
+++ b/apps/web/registry/default/ui/select.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as SelectPrimitive from '@radix-ui/react-select'
-import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Select = SelectPrimitive.Root
 
@@ -19,12 +19,11 @@ const SelectTrigger = React.forwardRef<
    <SelectPrimitive.Trigger
       ref={ref}
       className={ny(
-         'border-input bg-background ring-offset-background placeholder:data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-left text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+         "border-input bg-background ring-offset-background placeholder:data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-left text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
          className,
       )}
       onPointerDown={(e) => {
-         if (e.pointerType === 'touch')
-            e.preventDefault()
+         if (e.pointerType === "touch") e.preventDefault()
       }}
       {...props}
    >
@@ -43,7 +42,7 @@ const SelectScrollUpButton = React.forwardRef<
    <SelectPrimitive.ScrollUpButton
       ref={ref}
       className={ny(
-         'flex cursor-default items-center justify-center py-1',
+         "flex cursor-default items-center justify-center py-1",
          className,
       )}
       {...props}
@@ -60,7 +59,7 @@ const SelectScrollDownButton = React.forwardRef<
    <SelectPrimitive.ScrollDownButton
       ref={ref}
       className={ny(
-         'flex cursor-default items-center justify-center py-1',
+         "flex cursor-default items-center justify-center py-1",
          className,
       )}
       {...props}
@@ -68,20 +67,20 @@ const SelectScrollDownButton = React.forwardRef<
       <ChevronDown className="size-4" />
    </SelectPrimitive.ScrollDownButton>
 ))
-SelectScrollDownButton.displayName
-  = SelectPrimitive.ScrollDownButton.displayName
+SelectScrollDownButton.displayName =
+   SelectPrimitive.ScrollDownButton.displayName
 
 const SelectContent = React.forwardRef<
    React.ElementRef<typeof SelectPrimitive.Content>,
    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
+>(({ className, children, position = "popper", ...props }, ref) => (
    <SelectPrimitive.Portal>
       <SelectPrimitive.Content
          ref={ref}
          className={ny(
-            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
-            position === 'popper'
-            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+            "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md",
+            position === "popper" &&
+               "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
             className,
          )}
          position={position}
@@ -90,9 +89,9 @@ const SelectContent = React.forwardRef<
          <SelectScrollUpButton />
          <SelectPrimitive.Viewport
             className={ny(
-               'p-1',
-               position === 'popper'
-               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+               "p-1",
+               position === "popper" &&
+                  "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
             )}
          >
             {children}
@@ -109,7 +108,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <SelectPrimitive.Label
       ref={ref}
-      className={ny('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+      className={ny("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
       {...props}
    />
 ))
@@ -122,7 +121,7 @@ const SelectItem = React.forwardRef<
    <SelectPrimitive.Item
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       {...props}
@@ -144,7 +143,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <SelectPrimitive.Separator
       ref={ref}
-      className={ny('bg-muted -mx-1 my-1 h-px', className)}
+      className={ny("bg-muted -mx-1 my-1 h-px", className)}
       {...props}
    />
 ))
diff --git a/apps/web/registry/default/ui/separate-away.tsx b/apps/web/registry/default/ui/separate-away.tsx
index b77eae86..323a8924 100644
--- a/apps/web/registry/default/ui/separate-away.tsx
+++ b/apps/web/registry/default/ui/separate-away.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import { motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface SeparateAwayProps {
    upper_text: string
diff --git a/apps/web/registry/default/ui/separator.tsx b/apps/web/registry/default/ui/separator.tsx
index 048d0462..dd9df997 100644
--- a/apps/web/registry/default/ui/separator.tsx
+++ b/apps/web/registry/default/ui/separator.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Separator = React.forwardRef<
    React.ElementRef<typeof SeparatorPrimitive.Root>,
    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
    (
-      { className, orientation = 'horizontal', decorative = true, ...props },
+      { className, orientation = "horizontal", decorative = true, ...props },
       ref,
    ) => (
       <SeparatorPrimitive.Root
@@ -18,8 +18,8 @@ const Separator = React.forwardRef<
          decorative={decorative}
          orientation={orientation}
          className={ny(
-            'bg-border shrink-0',
-            orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+            "shrink-0 bg-border",
+            orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
             className,
          )}
          {...props}
diff --git a/apps/web/registry/default/ui/sheet.tsx b/apps/web/registry/default/ui/sheet.tsx
index d209532a..01f33560 100644
--- a/apps/web/registry/default/ui/sheet.tsx
+++ b/apps/web/registry/default/ui/sheet.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { type VariantProps, cva } from 'class-variance-authority'
-import { X } from 'lucide-react'
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { type VariantProps, cva } from "class-variance-authority"
+import { X } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Sheet = SheetPrimitive.Root
 
@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <SheetPrimitive.Overlay
       className={ny(
-         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
+         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
          className,
       )}
       {...props}
@@ -31,32 +31,31 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
    {
       variants: {
          side: {
-            top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+            top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
             bottom:
-          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-            left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-            right:
-          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+               "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+            left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+            right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
          },
       },
       defaultVariants: {
-         side: 'right',
+         side: "right",
       },
    },
 )
 
 interface SheetContentProps
    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-   VariantProps<typeof sheetVariants> {}
+      VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<
    React.ElementRef<typeof SheetPrimitive.Content>,
    SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
+>(({ side = "right", className, children, ...props }, ref) => (
    <SheetPortal>
       <SheetOverlay />
       <SheetPrimitive.Content
@@ -81,14 +80,14 @@ function SheetHeader({
    return (
       <div
          className={ny(
-            'flex flex-col space-y-2 text-center sm:text-start',
+            "flex flex-col space-y-2 text-center sm:text-start",
             className,
          )}
          {...props}
       />
    )
 }
-SheetHeader.displayName = 'SheetHeader'
+SheetHeader.displayName = "SheetHeader"
 
 function SheetFooter({
    className,
@@ -97,14 +96,14 @@ function SheetFooter({
    return (
       <div
          className={ny(
-            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
             className,
          )}
          {...props}
       />
    )
 }
-SheetFooter.displayName = 'SheetFooter'
+SheetFooter.displayName = "SheetFooter"
 
 const SheetTitle = React.forwardRef<
    React.ElementRef<typeof SheetPrimitive.Title>,
@@ -112,7 +111,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <SheetPrimitive.Title
       ref={ref}
-      className={ny('text-foreground text-lg font-semibold', className)}
+      className={ny("text-foreground text-lg font-semibold", className)}
       {...props}
    />
 ))
@@ -124,7 +123,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <SheetPrimitive.Description
       ref={ref}
-      className={ny('text-muted-foreground text-sm', className)}
+      className={ny("text-muted-foreground text-sm", className)}
       {...props}
    />
 ))
diff --git a/apps/web/registry/default/ui/shimmer-button.tsx b/apps/web/registry/default/ui/shimmer-button.tsx
index 1b80b1ae..bde81c99 100644
--- a/apps/web/registry/default/ui/shimmer-button.tsx
+++ b/apps/web/registry/default/ui/shimmer-button.tsx
@@ -1,6 +1,6 @@
-import type { CSSProperties } from 'react'
-import React from 'react'
-import { ny } from '~/lib/utils'
+import type { CSSProperties } from "react"
+import React from "react"
+import { ny } from "~/lib/utils"
 
 export interface ShimmerButtonProps
    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -16,11 +16,11 @@ export interface ShimmerButtonProps
 const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
    (
       {
-         shimmerColor = '#ffffff',
-         shimmerSize = '0.05em',
-         shimmerDuration = '3s',
-         borderRadius = '100px',
-         background = 'rgba(0, 0, 0, 1)',
+         shimmerColor = "#ffffff",
+         shimmerSize = "0.05em",
+         shimmerDuration = "3s",
+         borderRadius = "100px",
+         background = "rgba(0, 0, 0, 1)",
          className,
          children,
          ...props
@@ -32,17 +32,17 @@ const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
             type="button"
             style={
                {
-                  '--spread': '90deg',
-                  '--shimmer-color': shimmerColor,
-                  '--radius': borderRadius,
-                  '--speed': shimmerDuration,
-                  '--cut': shimmerSize,
-                  '--bg': background,
+                  "--spread": "90deg",
+                  "--shimmer-color": shimmerColor,
+                  "--radius": borderRadius,
+                  "--speed": shimmerDuration,
+                  "--cut": shimmerSize,
+                  "--bg": background,
                } as CSSProperties
             }
             className={ny(
-               'group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black',
-               'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px',
+               "group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black",
+               "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
                className,
             )}
             ref={ref}
@@ -51,8 +51,8 @@ const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
             {/* spark container */}
             <div
                className={ny(
-                  '-z-30 blur-[2px]',
-                  'absolute inset-0 overflow-visible [container-type:size]',
+                  "-z-30 blur-[2px]",
+                  "absolute inset-0 overflow-visible [container-type:size]",
                )}
             >
                {/* spark */}
@@ -66,25 +66,25 @@ const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
             {/* Highlight */}
             <div
                className={ny(
-                  'insert-0 absolute size-full',
+                  "insert-0 absolute size-full",
 
-                  'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',
+                  "rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
 
                   // transition
-                  'transform-gpu transition-all duration-300 ease-in-out',
+                  "transform-gpu transition-all duration-300 ease-in-out",
 
                   // on hover
-                  'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
+                  "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
 
                   // on click
-                  'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]',
+                  "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]",
                )}
             />
 
             {/* backdrop */}
             <div
                className={ny(
-                  'absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]',
+                  "absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]",
                )}
             />
          </button>
@@ -92,6 +92,6 @@ const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
    },
 )
 
-ShimmerButton.displayName = 'ShimmerButton'
+ShimmerButton.displayName = "ShimmerButton"
 
 export default ShimmerButton
diff --git a/apps/web/registry/default/ui/shine-border.tsx b/apps/web/registry/default/ui/shine-border.tsx
index 25385335..97b43564 100644
--- a/apps/web/registry/default/ui/shine-border.tsx
+++ b/apps/web/registry/default/ui/shine-border.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 type TColorProp = string | string[]
 
@@ -27,7 +27,7 @@ export default function ShineBorder({
    borderRadius = 8,
    borderWidth = 1,
    duration = 14,
-   color = '#000000',
+   color = "#000000",
    className,
    children,
 }: ShineBorderProps) {
@@ -35,27 +35,26 @@ export default function ShineBorder({
       <div
          style={
             {
-               '--border-radius': `${borderRadius}px`,
+               "--border-radius": `${borderRadius}px`,
             } as React.CSSProperties
          }
          className={ny(
-            'relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white',
+            "relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white",
             className,
          )}
       >
          <div
             style={
                {
-                  '--border-width': `${borderWidth}px`,
-                  '--border-radius': `${borderRadius}px`,
-                  '--duration': `${duration}s`,
-                  '--mask-linear-gradient': `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
-                  '--background-radial-gradient': `radial-gradient(transparent,transparent, ${Array.isArray(color) ? color.join(',') : color},transparent,transparent)`,
+                  "--border-width": `${borderWidth}px`,
+                  "--border-radius": `${borderRadius}px`,
+                  "--duration": `${duration}s`,
+                  "--mask-linear-gradient": `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
+                  "--background-radial-gradient": `radial-gradient(transparent,transparent, ${Array.isArray(color) ? color.join(",") : color},transparent,transparent)`,
                } as React.CSSProperties
             }
             className={`before:bg-shine-size motion-safe:before:animate-shine before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[""] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient]`}
-         >
-         </div>
+         ></div>
          {children}
       </div>
    )
diff --git a/apps/web/registry/default/ui/shiny-button.tsx b/apps/web/registry/default/ui/shiny-button.tsx
index 583b1dd0..e118afef 100644
--- a/apps/web/registry/default/ui/shiny-button.tsx
+++ b/apps/web/registry/default/ui/shiny-button.tsx
@@ -1,20 +1,20 @@
-'use client'
-import { type AnimationProps, motion } from 'framer-motion'
+"use client"
+import { type AnimationProps, motion } from "framer-motion"
 
 const animationProps = {
-   initial: { '--x': '100%', 'scale': 0.8 },
-   animate: { '--x': '-100%', 'scale': 1 },
+   initial: { "--x": "100%", scale: 0.8 },
+   animate: { "--x": "-100%", scale: 1 },
    whileTap: { scale: 0.95 },
    transition: {
-      repeat: Infinity,
-      repeatType: 'loop',
+      repeat: Number.POSITIVE_INFINITY,
+      repeatType: "loop",
       repeatDelay: 1,
-      type: 'spring',
+      type: "spring",
       stiffness: 20,
       damping: 15,
       mass: 2,
       scale: {
-         type: 'spring',
+         type: "spring",
          stiffness: 200,
          damping: 5,
          mass: 0.5,
@@ -22,7 +22,7 @@ const animationProps = {
    },
 } as AnimationProps
 
-function ShinyButton({ text = 'shiny-button' }) {
+function ShinyButton({ text = "shiny-button" }) {
    return (
       <motion.button
          {...animationProps}
@@ -32,19 +32,18 @@ function ShinyButton({ text = 'shiny-button' }) {
             className="relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]"
             style={{
                maskImage:
-            'linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))',
+                  "linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))",
             }}
          >
             {text}
          </span>
          <span
             style={{
-               mask: 'linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))',
-               maskComposite: 'exclude',
+               mask: "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
+               maskComposite: "exclude",
             }}
             className="absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px"
-         >
-         </span>
+         ></span>
       </motion.button>
    )
 }
diff --git a/apps/web/registry/default/ui/sidebar.tsx b/apps/web/registry/default/ui/sidebar.tsx
index 3f6171bc..2d1c056e 100644
--- a/apps/web/registry/default/ui/sidebar.tsx
+++ b/apps/web/registry/default/ui/sidebar.tsx
@@ -1,34 +1,34 @@
-'use client'
-
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
-import { PanelLeft } from 'lucide-react'
-
-import { useIsMobile } from '~/registry/default/hooks/use-mobile'
-import { ny } from '~/registry/default/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import { Input } from '~/registry/default/ui/input'
-import { Separator } from '~/registry/default/ui/separator'
-import { Sheet, SheetContent } from '~/registry/default/ui/sheet'
-import { Skeleton } from '~/registry/default/ui/skeleton'
+"use client"
+
+import { Slot } from "@radix-ui/react-slot"
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+import * as React from "react"
+
+import { useIsMobile } from "~/registry/default/hooks/use-mobile"
+import { ny } from "~/registry/default/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import { Input } from "~/registry/default/ui/input"
+import { Separator } from "~/registry/default/ui/separator"
+import { Sheet, SheetContent } from "~/registry/default/ui/sheet"
+import { Skeleton } from "~/registry/default/ui/skeleton"
 import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
+} from "~/registry/default/ui/tooltip"
 
-const SIDEBAR_COOKIE_NAME = 'sidebar:state'
+const SIDEBAR_COOKIE_NAME = "sidebar:state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = '16rem'
-const SIDEBAR_WIDTH_MOBILE = '18rem'
-const SIDEBAR_WIDTH_ICON = '3rem'
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 interface SidebarContext {
-   state: 'expanded' | 'collapsed'
+   state: "expanded" | "collapsed"
    open: boolean
    setOpen: (open: boolean) => void
    openMobile: boolean
@@ -42,7 +42,7 @@ const SidebarContext = React.createContext<SidebarContext | null>(null)
 function useSidebar() {
    const context = React.useContext(SidebarContext)
    if (!context) {
-      throw new Error('useSidebar must be used within a Sidebar.')
+      throw new Error("useSidebar must be used within a Sidebar.")
    }
 
    return context
@@ -50,127 +50,135 @@ function useSidebar() {
 
 const SidebarProvider = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'> & {
+   React.ComponentProps<"div"> & {
       defaultOpen?: boolean
       open?: boolean
       onOpenChange?: (open: boolean) => void
    }
 >(
-         (
-            {
-               defaultOpen = true,
-               open: openProp,
-               onOpenChange: setOpenProp,
-               className,
-               style,
-               children,
-               ...props
-            },
-            ref,
-         ) => {
-            const isMobile = useIsMobile()
-            const [openMobile, setOpenMobile] = React.useState(false)
-
-            // This is the internal state of the sidebar.
-            // We use openProp and setOpenProp for control from outside the component.
-            const [_open, _setOpen] = React.useState(defaultOpen)
-            const open = openProp ?? _open
-            const setOpen = React.useCallback(
-               (value: boolean | ((value: boolean) => boolean)) => {
-                  if (setOpenProp) {
-                     return setOpenProp?.(
-                        typeof value === 'function' ? value(open) : value,
-                     )
-                  }
+   (
+      {
+         defaultOpen = true,
+         open: openProp,
+         onOpenChange: setOpenProp,
+         className,
+         style,
+         children,
+         ...props
+      },
+      ref,
+   ) => {
+      const isMobile = useIsMobile()
+      const [openMobile, setOpenMobile] = React.useState(false)
+
+      // This is the internal state of the sidebar.
+      // We use openProp and setOpenProp for control from outside the component.
+      const [_open, _setOpen] = React.useState(defaultOpen)
+      const open = openProp ?? _open
+      const setOpen = React.useCallback(
+         (value: boolean | ((value: boolean) => boolean)) => {
+            if (setOpenProp) {
+               return setOpenProp?.(
+                  typeof value === "function" ? value(open) : value,
+               )
+            }
 
-                  _setOpen(value)
-
-                  // This sets the cookie to keep the sidebar state.
-                  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-               },
-               [setOpenProp, open],
-            )
-
-            // Helper to toggle the sidebar.
-            const toggleSidebar = React.useCallback(() => {
-               return isMobile
-                  ? setOpenMobile(open => !open)
-                  : setOpen(open => !open)
-            }, [isMobile, setOpen, setOpenMobile])
-
-            // Adds a keyboard shortcut to toggle the sidebar.
-            React.useEffect(() => {
-               const handleKeyDown = (event: KeyboardEvent) => {
-                  if (
-                     event.key === SIDEBAR_KEYBOARD_SHORTCUT
-                     && (event.metaKey || event.ctrlKey)
-                  ) {
-                     event.preventDefault()
-                     toggleSidebar()
-                  }
-               }
-
-               window.addEventListener('keydown', handleKeyDown)
-               return () => window.removeEventListener('keydown', handleKeyDown)
-            }, [toggleSidebar])
-
-            // We add a state so that we can do data-state="expanded" or "collapsed".
-            // This makes it easier to style the sidebar with Tailwind classes.
-            const state = open ? 'expanded' : 'collapsed'
-
-            const contextValue = React.useMemo<SidebarContext>(
-               () => ({
-                  state,
-                  open,
-                  setOpen,
-                  isMobile,
-                  openMobile,
-                  setOpenMobile,
-                  toggleSidebar,
-               }),
-               [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
-            )
-
-            return (
-               <SidebarContext.Provider value={contextValue}>
-                  <TooltipProvider delayDuration={0}>
-                     <div
-                        style={
-                           {
-                              '--sidebar-width': SIDEBAR_WIDTH,
-                              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-                              ...style,
-                           } as React.CSSProperties
-                        }
-                        className={ny(
-                           'group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',
-                           className,
-                        )}
-                        ref={ref}
-                        {...props}
-                     >
-                        {children}
-                     </div>
-                  </TooltipProvider>
-               </SidebarContext.Provider>
-            )
+            _setOpen(value)
+
+            // This sets the cookie to keep the sidebar state.
+            document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
          },
-         )
-SidebarProvider.displayName = 'SidebarProvider'
+         [setOpenProp, open],
+      )
+
+      // Helper to toggle the sidebar.
+      const toggleSidebar = React.useCallback(() => {
+         return isMobile
+            ? setOpenMobile((open) => !open)
+            : setOpen((open) => !open)
+      }, [isMobile, setOpen, setOpenMobile])
+
+      // Adds a keyboard shortcut to toggle the sidebar.
+      React.useEffect(() => {
+         const handleKeyDown = (event: KeyboardEvent) => {
+            if (
+               event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+               (event.metaKey || event.ctrlKey)
+            ) {
+               event.preventDefault()
+               toggleSidebar()
+            }
+         }
+
+         window.addEventListener("keydown", handleKeyDown)
+         return () => window.removeEventListener("keydown", handleKeyDown)
+      }, [toggleSidebar])
+
+      // We add a state so that we can do data-state="expanded" or "collapsed".
+      // This makes it easier to style the sidebar with Tailwind classes.
+      const state = open ? "expanded" : "collapsed"
+
+      const contextValue = React.useMemo<SidebarContext>(
+         () => ({
+            state,
+            open,
+            setOpen,
+            isMobile,
+            openMobile,
+            setOpenMobile,
+            toggleSidebar,
+         }),
+         [
+            state,
+            open,
+            setOpen,
+            isMobile,
+            openMobile,
+            setOpenMobile,
+            toggleSidebar,
+         ],
+      )
+
+      return (
+         <SidebarContext.Provider value={contextValue}>
+            <TooltipProvider delayDuration={0}>
+               <div
+                  style={
+                     {
+                        "--sidebar-width": SIDEBAR_WIDTH,
+                        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                        ...style,
+                     } as React.CSSProperties
+                  }
+                  className={ny(
+                     "group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full",
+                     className,
+                  )}
+                  ref={ref}
+                  {...props}
+               >
+                  {children}
+               </div>
+            </TooltipProvider>
+         </SidebarContext.Provider>
+      )
+   },
+)
+SidebarProvider.displayName = "SidebarProvider"
 
 const Sidebar = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'> & {
-      side?: 'left' | 'right'
-      variant?: 'sidebar' | 'floating' | 'inset'
-      collapsible?: 'offcanvas' | 'icon' | 'none'
+   React.ComponentProps<"div"> & {
+      side?: "left" | "right"
+      variant?: "sidebar" | "floating" | "inset"
+      collapsible?: "offcanvas" | "icon" | "none"
    }
 >(
    (
       {
-         side = 'left',
-         variant = 'sidebar',
-         collapsible = 'offcanvas',
+         side = "left",
+         variant = "sidebar",
+         collapsible = "offcanvas",
          className,
          children,
          ...props
@@ -179,11 +187,11 @@ const Sidebar = React.forwardRef<
    ) => {
       const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 
-      if (collapsible === 'none') {
+      if (collapsible === "none") {
          return (
             <div
                className={ny(
-                  'bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col',
+                  "bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
                   className,
                )}
                ref={ref}
@@ -203,7 +211,7 @@ const Sidebar = React.forwardRef<
                   className="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
                   style={
                      {
-                        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+                        "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
                      } as React.CSSProperties
                   }
                   side={side}
@@ -219,31 +227,31 @@ const Sidebar = React.forwardRef<
             ref={ref}
             className="group peer hidden md:block"
             data-state={state}
-            data-collapsible={state === 'collapsed' ? collapsible : ''}
+            data-collapsible={state === "collapsed" ? collapsible : ""}
             data-variant={variant}
             data-side={side}
          >
             {/* This is what handles the sidebar gap on desktop */}
             <div
                className={ny(
-                  'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
-                  'group-data-[collapsible=offcanvas]:w-0',
-                  'group-data-[side=right]:rotate-180',
-                  variant === 'floating' || variant === 'inset'
-                     ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
-                     : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
+                  "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+                  "group-data-[collapsible=offcanvas]:w-0",
+                  "group-data-[side=right]:rotate-180",
+                  variant === "floating" || variant === "inset"
+                     ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+                     : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
                )}
             />
             <div
                className={ny(
-                  'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
-                  side === 'left'
-                     ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-                     : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+                  "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+                  side === "left"
+                     ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+                     : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
                   // Adjust the padding for floating and inset variants.
-                  variant === 'floating' || variant === 'inset'
-                     ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-                     : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+                  variant === "floating" || variant === "inset"
+                     ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+                     : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
                   className,
                )}
                {...props}
@@ -259,7 +267,7 @@ const Sidebar = React.forwardRef<
       )
    },
 )
-Sidebar.displayName = 'Sidebar'
+Sidebar.displayName = "Sidebar"
 
 const SidebarTrigger = React.forwardRef<
    React.ElementRef<typeof Button>,
@@ -273,7 +281,7 @@ const SidebarTrigger = React.forwardRef<
          data-sidebar="trigger"
          variant="ghost"
          size="icon"
-         className={ny('size-7', className)}
+         className={ny("size-7", className)}
          onClick={(event) => {
             onClick?.(event)
             toggleSidebar()
@@ -285,11 +293,11 @@ const SidebarTrigger = React.forwardRef<
       </Button>
    )
 })
-SidebarTrigger.displayName = 'SidebarTrigger'
+SidebarTrigger.displayName = "SidebarTrigger"
 
 const SidebarRail = React.forwardRef<
    HTMLButtonElement,
-   React.ComponentProps<'button'>
+   React.ComponentProps<"button">
 >(({ className, ...props }, ref) => {
    const { toggleSidebar } = useSidebar()
 
@@ -302,37 +310,37 @@ const SidebarRail = React.forwardRef<
          onClick={toggleSidebar}
          title="Toggle Sidebar"
          className={ny(
-            'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-            '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
-            '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-            'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-            '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-            '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+            "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+            "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+            "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+            "group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+            "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+            "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarRail.displayName = 'SidebarRail'
+SidebarRail.displayName = "SidebarRail"
 
 const SidebarInset = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'main'>
+   React.ComponentProps<"main">
 >(({ className, ...props }, ref) => {
    return (
       <main
          ref={ref}
          className={ny(
-            'bg-background relative flex min-h-svh flex-1 flex-col',
-            'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+            "bg-background relative flex min-h-svh flex-1 flex-col",
+            "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarInset.displayName = 'SidebarInset'
+SidebarInset.displayName = "SidebarInset"
 
 const SidebarInput = React.forwardRef<
    React.ElementRef<typeof Input>,
@@ -343,44 +351,44 @@ const SidebarInput = React.forwardRef<
          ref={ref}
          data-sidebar="input"
          className={ny(
-            'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',
+            "bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarInput.displayName = 'SidebarInput'
+SidebarInput.displayName = "SidebarInput"
 
 const SidebarHeader = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'>
+   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => {
    return (
       <div
          ref={ref}
          data-sidebar="header"
-         className={ny('flex flex-col gap-2 p-2', className)}
+         className={ny("flex flex-col gap-2 p-2", className)}
          {...props}
       />
    )
 })
-SidebarHeader.displayName = 'SidebarHeader'
+SidebarHeader.displayName = "SidebarHeader"
 
 const SidebarFooter = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'>
+   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => {
    return (
       <div
          ref={ref}
          data-sidebar="footer"
-         className={ny('flex flex-col gap-2 p-2', className)}
+         className={ny("flex flex-col gap-2 p-2", className)}
          {...props}
       />
    )
 })
-SidebarFooter.displayName = 'SidebarFooter'
+SidebarFooter.displayName = "SidebarFooter"
 
 const SidebarSeparator = React.forwardRef<
    React.ElementRef<typeof Separator>,
@@ -390,154 +398,155 @@ const SidebarSeparator = React.forwardRef<
       <Separator
          ref={ref}
          data-sidebar="separator"
-         className={ny('bg-sidebar-border mx-2 w-auto', className)}
+         className={ny("bg-sidebar-border mx-2 w-auto", className)}
          {...props}
       />
    )
 })
-SidebarSeparator.displayName = 'SidebarSeparator'
+SidebarSeparator.displayName = "SidebarSeparator"
 
 const SidebarContent = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'>
+   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => {
    return (
       <div
          ref={ref}
          data-sidebar="content"
          className={ny(
-            'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+            "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarContent.displayName = 'SidebarContent'
+SidebarContent.displayName = "SidebarContent"
 
 const SidebarGroup = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'>
+   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => {
    return (
       <div
          ref={ref}
          data-sidebar="group"
-         className={ny('relative flex w-full min-w-0 flex-col p-2', className)}
+         className={ny("relative flex w-full min-w-0 flex-col p-2", className)}
          {...props}
       />
    )
 })
-SidebarGroup.displayName = 'SidebarGroup'
+SidebarGroup.displayName = "SidebarGroup"
 
 const SidebarGroupLabel = React.forwardRef<
    HTMLDivElement,
-  React.ComponentProps<'div'> & { asChild?: boolean }
+   React.ComponentProps<"div"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-   const Comp = asChild ? Slot : 'div'
+   const Comp = asChild ? Slot : "div"
 
    return (
       <Comp
          ref={ref}
          data-sidebar="group-label"
          className={ny(
-            'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-            'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+            "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+            "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarGroupLabel.displayName = 'SidebarGroupLabel'
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
 
 const SidebarGroupAction = React.forwardRef<
    HTMLButtonElement,
-  React.ComponentProps<'button'> & { asChild?: boolean }
+   React.ComponentProps<"button"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-   const Comp = asChild ? Slot : 'button'
+   const Comp = asChild ? Slot : "button"
 
    return (
       <Comp
          ref={ref}
          data-sidebar="group-action"
          className={ny(
-            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+            "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
             // Increases the hit area of the button on mobile.
-            'after:absolute after:-inset-2 after:md:hidden',
-            'group-data-[collapsible=icon]:hidden',
+            "after:absolute after:-inset-2 after:md:hidden",
+            "group-data-[collapsible=icon]:hidden",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarGroupAction.displayName = 'SidebarGroupAction'
+SidebarGroupAction.displayName = "SidebarGroupAction"
 
 const SidebarGroupContent = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'>
+   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => (
    <div
       ref={ref}
       data-sidebar="group-content"
-      className={ny('w-full text-sm', className)}
+      className={ny("w-full text-sm", className)}
       {...props}
    />
 ))
-SidebarGroupContent.displayName = 'SidebarGroupContent'
+SidebarGroupContent.displayName = "SidebarGroupContent"
 
 const SidebarMenu = React.forwardRef<
    HTMLUListElement,
-   React.ComponentProps<'ul'>
+   React.ComponentProps<"ul">
 >(({ className, ...props }, ref) => (
    <ul
       ref={ref}
       data-sidebar="menu"
-      className={ny('flex w-full min-w-0 flex-col gap-1', className)}
+      className={ny("flex w-full min-w-0 flex-col gap-1", className)}
       {...props}
    />
 ))
-SidebarMenu.displayName = 'SidebarMenu'
+SidebarMenu.displayName = "SidebarMenu"
 
 const SidebarMenuItem = React.forwardRef<
    HTMLLIElement,
-   React.ComponentProps<'li'>
+   React.ComponentProps<"li">
 >(({ className, ...props }, ref) => (
    <li
       ref={ref}
       data-sidebar="menu-item"
-      className={ny('group/menu-item relative', className)}
+      className={ny("group/menu-item relative", className)}
       {...props}
    />
 ))
-SidebarMenuItem.displayName = 'SidebarMenuItem'
+SidebarMenuItem.displayName = "SidebarMenuItem"
 
 const sidebarMenuButtonVariants = cva(
-   'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
    {
       variants: {
          variant: {
-            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+            default:
+               "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
             outline:
-          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+               "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
          },
          size: {
-            default: 'h-8 text-sm',
-            sm: 'h-7 text-xs',
-            lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+            default: "h-8 text-sm",
+            sm: "h-7 text-xs",
+            lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
          },
       },
       defaultVariants: {
-         variant: 'default',
-         size: 'default',
+         variant: "default",
+         size: "default",
       },
    },
 )
 
 const SidebarMenuButton = React.forwardRef<
    HTMLButtonElement,
-   React.ComponentProps<'button'> & {
+   React.ComponentProps<"button"> & {
       asChild?: boolean
       isActive?: boolean
       tooltip?: string | React.ComponentProps<typeof TooltipContent>
@@ -547,15 +556,15 @@ const SidebarMenuButton = React.forwardRef<
       {
          asChild = false,
          isActive = false,
-         variant = 'default',
-         size = 'default',
+         variant = "default",
+         size = "default",
          tooltip,
          className,
          ...props
       },
       ref,
    ) => {
-      const Comp = asChild ? Slot : 'button'
+      const Comp = asChild ? Slot : "button"
       const { isMobile, state } = useSidebar()
 
       const button = (
@@ -564,7 +573,10 @@ const SidebarMenuButton = React.forwardRef<
             data-sidebar="menu-button"
             data-size={size}
             data-active={isActive}
-            className={ny(sidebarMenuButtonVariants({ variant, size }), className)}
+            className={ny(
+               sidebarMenuButtonVariants({ variant, size }),
+               className,
+            )}
             {...props}
          />
       )
@@ -573,7 +585,7 @@ const SidebarMenuButton = React.forwardRef<
          return button
       }
 
-      if (typeof tooltip === 'string') {
+      if (typeof tooltip === "string") {
          tooltip = {
             children: tooltip,
          }
@@ -585,70 +597,70 @@ const SidebarMenuButton = React.forwardRef<
             <TooltipContent
                side="right"
                align="center"
-               hidden={state !== 'collapsed' || isMobile}
+               hidden={state !== "collapsed" || isMobile}
                {...tooltip}
             />
          </Tooltip>
       )
    },
 )
-SidebarMenuButton.displayName = 'SidebarMenuButton'
+SidebarMenuButton.displayName = "SidebarMenuButton"
 
 const SidebarMenuAction = React.forwardRef<
    HTMLButtonElement,
-   React.ComponentProps<'button'> & {
+   React.ComponentProps<"button"> & {
       asChild?: boolean
       showOnHover?: boolean
    }
 >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-   const Comp = asChild ? Slot : 'button'
+   const Comp = asChild ? Slot : "button"
 
    return (
       <Comp
          ref={ref}
          data-sidebar="menu-action"
          className={ny(
-            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+            "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
             // Increases the hit area of the button on mobile.
-            'after:absolute after:-inset-2 after:md:hidden',
-            'peer-data-[size=sm]/menu-button:top-1',
-            'peer-data-[size=default]/menu-button:top-1.5',
-            'peer-data-[size=lg]/menu-button:top-2.5',
-            'group-data-[collapsible=icon]:hidden',
-            showOnHover
-            && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+            "after:absolute after:-inset-2 after:md:hidden",
+            "peer-data-[size=sm]/menu-button:top-1",
+            "peer-data-[size=default]/menu-button:top-1.5",
+            "peer-data-[size=lg]/menu-button:top-2.5",
+            "group-data-[collapsible=icon]:hidden",
+            showOnHover &&
+               "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarMenuAction.displayName = 'SidebarMenuAction'
+SidebarMenuAction.displayName = "SidebarMenuAction"
 
 const SidebarMenuBadge = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'>
+   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => (
    <div
       ref={ref}
       data-sidebar="menu-badge"
       className={ny(
-         'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',
-         'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-         'peer-data-[size=sm]/menu-button:top-1',
-         'peer-data-[size=default]/menu-button:top-1.5',
-         'peer-data-[size=lg]/menu-button:top-2.5',
-         'group-data-[collapsible=icon]:hidden',
+         "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+         "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+         "peer-data-[size=sm]/menu-button:top-1",
+         "peer-data-[size=default]/menu-button:top-1.5",
+         "peer-data-[size=lg]/menu-button:top-2.5",
+         "group-data-[collapsible=icon]:hidden",
          className,
       )}
       {...props}
    />
 ))
-SidebarMenuBadge.displayName = 'SidebarMenuBadge'
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
 
 const SidebarMenuSkeleton = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'> & {
+   React.ComponentProps<"div"> & {
       showIcon?: boolean
    }
 >(({ className, showIcon = false, ...props }, ref) => {
@@ -661,7 +673,10 @@ const SidebarMenuSkeleton = React.forwardRef<
       <div
          ref={ref}
          data-sidebar="menu-skeleton"
-         className={ny('flex h-8 items-center gap-2 rounded-md px-2', className)}
+         className={ny(
+            "flex h-8 items-center gap-2 rounded-md px-2",
+            className,
+         )}
          {...props}
       >
          {showIcon && (
@@ -675,47 +690,47 @@ const SidebarMenuSkeleton = React.forwardRef<
             data-sidebar="menu-skeleton-text"
             style={
                {
-                  '--skeleton-width': width,
+                  "--skeleton-width": width,
                } as React.CSSProperties
             }
          />
       </div>
    )
 })
-SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
 
 const SidebarMenuSub = React.forwardRef<
    HTMLUListElement,
-   React.ComponentProps<'ul'>
+   React.ComponentProps<"ul">
 >(({ className, ...props }, ref) => (
    <ul
       ref={ref}
       data-sidebar="menu-sub"
       className={ny(
-         'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-         'group-data-[collapsible=icon]:hidden',
+         "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+         "group-data-[collapsible=icon]:hidden",
          className,
       )}
       {...props}
    />
 ))
-SidebarMenuSub.displayName = 'SidebarMenuSub'
+SidebarMenuSub.displayName = "SidebarMenuSub"
 
 const SidebarMenuSubItem = React.forwardRef<
    HTMLLIElement,
-   React.ComponentProps<'li'>
+   React.ComponentProps<"li">
 >(({ ...props }, ref) => <li ref={ref} {...props} />)
-SidebarMenuSubItem.displayName = 'SidebarMenuSubItem'
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
 
 const SidebarMenuSubButton = React.forwardRef<
    HTMLAnchorElement,
-   React.ComponentProps<'a'> & {
+   React.ComponentProps<"a"> & {
       asChild?: boolean
-      size?: 'sm' | 'md'
+      size?: "sm" | "md"
       isActive?: boolean
    }
->(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
-   const Comp = asChild ? Slot : 'a'
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+   const Comp = asChild ? Slot : "a"
 
    return (
       <Comp
@@ -724,18 +739,18 @@ const SidebarMenuSubButton = React.forwardRef<
          data-size={size}
          data-active={isActive}
          className={ny(
-            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-            'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-            size === 'sm' && 'text-xs',
-            size === 'md' && 'text-sm',
-            'group-data-[collapsible=icon]:hidden',
+            "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+            "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+            size === "sm" && "text-xs",
+            size === "md" && "text-sm",
+            "group-data-[collapsible=icon]:hidden",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarMenuSubButton.displayName = 'SidebarMenuSubButton'
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
 
 export {
    Sidebar,
diff --git a/apps/web/registry/default/ui/skeleton.tsx b/apps/web/registry/default/ui/skeleton.tsx
index ae6f00a6..faa41ea4 100644
--- a/apps/web/registry/default/ui/skeleton.tsx
+++ b/apps/web/registry/default/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 function Skeleton({
    className,
@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
    return (
       <div
-         className={ny('bg-muted animate-pulse rounded-md', className)}
+         className={ny("bg-muted animate-pulse rounded-md", className)}
          {...props}
       />
    )
diff --git a/apps/web/registry/default/ui/slider.tsx b/apps/web/registry/default/ui/slider.tsx
index 5c80ec54..16817e24 100644
--- a/apps/web/registry/default/ui/slider.tsx
+++ b/apps/web/registry/default/ui/slider.tsx
@@ -1,12 +1,13 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as SliderPrimitive from '@radix-ui/react-slider'
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
-interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
-   showSteps?: 'none' | 'half' | 'full'
+interface SliderProps
+   extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+   showSteps?: "none" | "half" | "full"
    formatLabel?: (value: number) => string
    formatLabelSide?: string
 }
@@ -14,122 +15,188 @@ interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimit
 const Slider = React.forwardRef<
    React.ElementRef<typeof SliderPrimitive.Root>,
    SliderProps
->(({ className, showSteps = 'none', formatLabel, formatLabelSide = 'top', ...props }, ref) => {
-   const { min = 0, max = 100, step = 1, orientation = 'horizontal', value, defaultValue, onValueChange } = props
-   const [hoveredThumbIndex, setHoveredThumbIndex] = React.useState<boolean>(false)
-   const numberOfSteps = Math.floor((max - min) / step)
-   const stepLines = Array.from({ length: numberOfSteps }, (_, index) => index * step + min)
-
-   const initialValue = Array.isArray(value) ? value : (Array.isArray(defaultValue) ? defaultValue : [min, max])
-   const [localValues, setLocalValues] = React.useState<number[]>(initialValue)
-
-   React.useEffect(() => {
-      if (!isEqual(value, localValues))
-         setLocalValues(Array.isArray(value) ? value : (Array.isArray(defaultValue) ? defaultValue : [min, max]))
-   }, [min, max, value])
+>(
+   (
+      {
+         className,
+         showSteps = "none",
+         formatLabel,
+         formatLabelSide = "top",
+         ...props
+      },
+      ref,
+   ) => {
+      const {
+         min = 0,
+         max = 100,
+         step = 1,
+         orientation = "horizontal",
+         value,
+         defaultValue,
+         onValueChange,
+      } = props
+      const [hoveredThumbIndex, setHoveredThumbIndex] =
+         React.useState<boolean>(false)
+      const numberOfSteps = Math.floor((max - min) / step)
+      const stepLines = Array.from(
+         { length: numberOfSteps },
+         (_, index) => index * step + min,
+      )
+
+      const initialValue = Array.isArray(value)
+         ? value
+         : Array.isArray(defaultValue)
+           ? defaultValue
+           : [min, max]
+      const [localValues, setLocalValues] =
+         React.useState<number[]>(initialValue)
+
+      React.useEffect(() => {
+         if (!isEqual(value, localValues))
+            setLocalValues(
+               Array.isArray(value)
+                  ? value
+                  : Array.isArray(defaultValue)
+                    ? defaultValue
+                    : [min, max],
+            )
+      }, [min, max, value])
+
+      const handleValueChange = (newValues: number[]) => {
+         setLocalValues(newValues)
+         if (onValueChange) onValueChange(newValues)
+      }
 
-   const handleValueChange = (newValues: number[]) => {
-      setLocalValues(newValues)
-      if (onValueChange)
-         onValueChange(newValues)
-   }
+      function isEqual(
+         array1: number[] | undefined,
+         array2: number[] | undefined,
+      ) {
+         array1 = array1 ?? []
+         array2 = array2 ?? []
 
-   function isEqual(array1: number[] | undefined, array2: number[] | undefined) {
-      array1 = array1 ?? []
-      array2 = array2 ?? []
+         if (array1.length !== array2.length) return false
 
-      if (array1.length !== array2.length)
-         return false
+         for (let i = 0; i < array1.length; i++) {
+            if (array1[i] !== array2[i]) return false
+         }
 
-      for (let i = 0; i < array1.length; i++) {
-         if (array1[i] !== array2[i])
-            return false
+         return true
       }
 
-      return true
-   }
-
-   return (
-      <SliderPrimitive.Root
-         ref={ref}
-         className={ny(
-            'relative flex cursor-pointer touch-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            orientation === 'horizontal' ? 'w-full items-center' : 'h-full justify-center',
-            className,
-         )}
-         min={min}
-         max={max}
-         step={step}
-         value={localValues}
-         onValueChange={value => handleValueChange(value)}
-         {...props}
-         onFocus={() => setHoveredThumbIndex(true)}
-         onBlur={() => setHoveredThumbIndex(false)}
-      >
-         <SliderPrimitive.Track className={ny(
-            'bg-primary/20 relative grow overflow-hidden rounded-full',
-            orientation === 'horizontal' ? 'h-1.5 w-full' : 'h-full w-1.5',
-         )}
-         >
-            <SliderPrimitive.Range className={ny(
-               'bg-primary absolute',
-               orientation === 'horizontal' ? 'h-full' : 'w-full',
+      return (
+         <SliderPrimitive.Root
+            ref={ref}
+            className={ny(
+               "relative flex cursor-pointer touch-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+               orientation === "horizontal"
+                  ? "w-full items-center"
+                  : "h-full justify-center",
+               className,
             )}
-            />
-            {showSteps !== undefined && showSteps !== 'none' && stepLines.map((value, index) => {
-               if (value === min || value === max)
-                  return null
-
-               const positionPercentage = ((value - min) / (max - min)) * 100
-               const adjustedPosition = 50 + (positionPercentage - 50) * 0.96
-               return (
-                  <div
-                     key={index}
-                     className={ny(
-                        { 'w-0.5 h-2': orientation !== 'vertical', 'w-2 h-0.5': orientation === 'vertical' },
-                        'bg-muted-foreground absolute',
-                        {
-                           'left-1': orientation === 'vertical' && showSteps === 'half',
-                           'top-1': orientation !== 'vertical' && showSteps === 'half',
-                           'left-0': orientation === 'vertical' && showSteps === 'full',
-                           'top-0': orientation !== 'vertical' && showSteps === 'full',
-                           '-translate-x-1/2': orientation !== 'vertical',
-                           '-translate-y-1/2': orientation === 'vertical',
-                        },
-                     )}
-                     style={{
-                        [orientation === 'vertical' ? 'bottom' : 'left']: `${adjustedPosition}%`,
-                     }}
-                  />
-               )
-            })}
-
-         </SliderPrimitive.Track>
-         {localValues.map((numberStep, index) => (
-            <SliderPrimitive.Thumb
-               key={index}
+            min={min}
+            max={max}
+            step={step}
+            value={localValues}
+            onValueChange={(value) => handleValueChange(value)}
+            {...props}
+            onFocus={() => setHoveredThumbIndex(true)}
+            onBlur={() => setHoveredThumbIndex(false)}
+         >
+            <SliderPrimitive.Track
                className={ny(
-                  'border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1',
+                  "bg-primary/20 relative grow overflow-hidden rounded-full",
+                  orientation === "horizontal"
+                     ? "h-1.5 w-full"
+                     : "h-full w-1.5",
                )}
             >
-               {hoveredThumbIndex && formatLabel && (
-                  <div
-                     className={ny(
-                        { 'bottom-8 left-1/2 -translate-x-1/2': formatLabelSide === 'top' },
-                        { 'top-8 left-1/2 -translate-x-1/2': formatLabelSide === 'bottom' },
-                        { 'right-8 -translate-y-1/4': formatLabelSide === 'left' },
-                        { 'left-8 -translate-y-1/4': formatLabelSide === 'right' },
-                        'bg-popover text-popover-foreground absolute z-30 w-max items-center justify-items-center rounded-md border px-2 py-1 text-center shadow-sm',
-                     )}
-                  >
-                     {formatLabel(numberStep)}
-                  </div>
-               )}
-            </SliderPrimitive.Thumb>
-         ))}
-      </SliderPrimitive.Root>
-   )
-})
+               <SliderPrimitive.Range
+                  className={ny(
+                     "bg-primary absolute",
+                     orientation === "horizontal" ? "h-full" : "w-full",
+                  )}
+               />
+               {showSteps !== undefined &&
+                  showSteps !== "none" &&
+                  stepLines.map((value, index) => {
+                     if (value === min || value === max) return null
+
+                     const positionPercentage =
+                        ((value - min) / (max - min)) * 100
+                     const adjustedPosition =
+                        50 + (positionPercentage - 50) * 0.96
+                     return (
+                        <div
+                           key={index}
+                           className={ny(
+                              {
+                                 "w-0.5 h-2": orientation !== "vertical",
+                                 "w-2 h-0.5": orientation === "vertical",
+                              },
+                              "bg-muted-foreground absolute",
+                              {
+                                 "left-1":
+                                    orientation === "vertical" &&
+                                    showSteps === "half",
+                                 "top-1":
+                                    orientation !== "vertical" &&
+                                    showSteps === "half",
+                                 "left-0":
+                                    orientation === "vertical" &&
+                                    showSteps === "full",
+                                 "top-0":
+                                    orientation !== "vertical" &&
+                                    showSteps === "full",
+                                 "-translate-x-1/2": orientation !== "vertical",
+                                 "-translate-y-1/2": orientation === "vertical",
+                              },
+                           )}
+                           style={{
+                              [orientation === "vertical" ? "bottom" : "left"]:
+                                 `${adjustedPosition}%`,
+                           }}
+                        />
+                     )
+                  })}
+            </SliderPrimitive.Track>
+            {localValues.map((numberStep, index) => (
+               <SliderPrimitive.Thumb
+                  key={index}
+                  className={ny(
+                     "border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1",
+                  )}
+               >
+                  {hoveredThumbIndex && formatLabel && (
+                     <div
+                        className={ny(
+                           {
+                              "bottom-8 left-1/2 -translate-x-1/2":
+                                 formatLabelSide === "top",
+                           },
+                           {
+                              "top-8 left-1/2 -translate-x-1/2":
+                                 formatLabelSide === "bottom",
+                           },
+                           {
+                              "right-8 -translate-y-1/4":
+                                 formatLabelSide === "left",
+                           },
+                           {
+                              "left-8 -translate-y-1/4":
+                                 formatLabelSide === "right",
+                           },
+                           "bg-popover text-popover-foreground absolute z-30 w-max items-center justify-items-center rounded-md border px-2 py-1 text-center shadow-sm",
+                        )}
+                     >
+                        {formatLabel(numberStep)}
+                     </div>
+                  )}
+               </SliderPrimitive.Thumb>
+            ))}
+         </SliderPrimitive.Root>
+      )
+   },
+)
 
 Slider.displayName = SliderPrimitive.Root.displayName
 
diff --git a/apps/web/registry/default/ui/sonner.tsx b/apps/web/registry/default/ui/sonner.tsx
index f6677d6c..be4efaf1 100644
--- a/apps/web/registry/default/ui/sonner.tsx
+++ b/apps/web/registry/default/ui/sonner.tsx
@@ -1,26 +1,25 @@
-'use client'
+"use client"
 
-import { useTheme } from 'next-themes'
-import { Toaster as Sonner } from 'sonner'
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
 function Toaster({ ...props }: ToasterProps) {
-   const { theme = 'system' } = useTheme()
+   const { theme = "system" } = useTheme()
 
    return (
       <Sonner
-         theme={theme as ToasterProps['theme']}
+         theme={theme as ToasterProps["theme"]}
          className="toaster group"
          toastOptions={{
             classNames: {
-               toast:
-            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-               description: 'group-[.toast]:text-muted-foreground',
+               toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+               description: "group-[.toast]:text-muted-foreground",
                actionButton:
-            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+                  "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
                cancelButton:
-            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+                  "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
             },
          }}
          {...props}
diff --git a/apps/web/registry/default/ui/sparkles-text.tsx b/apps/web/registry/default/ui/sparkles-text.tsx
index a3031beb..b107c101 100644
--- a/apps/web/registry/default/ui/sparkles-text.tsx
+++ b/apps/web/registry/default/ui/sparkles-text.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { motion } from 'framer-motion'
-import type { CSSProperties, ReactElement } from 'react'
-import { useEffect, useState } from 'react'
-import { ny } from '~/lib/utils'
+import { motion } from "framer-motion"
+import type { CSSProperties, ReactElement } from "react"
+import { useEffect, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface Sparkle {
    id: string
@@ -62,7 +62,7 @@ interface SparklesTextProps {
 
 const SparklesText: React.FC<SparklesTextProps> = ({
    text,
-   colors = { first: '#A07CFE', second: '#FE8FB5' },
+   colors = { first: "#A07CFE", second: "#FE8FB5" },
    className,
    sparklesCount = 10,
    ...props
@@ -87,10 +87,9 @@ const SparklesText: React.FC<SparklesTextProps> = ({
       }
 
       const updateStars = () => {
-         setSparkles(currentSparkles =>
+         setSparkles((currentSparkles) =>
             currentSparkles.map((star) => {
-               if (star.lifespan <= 0)
-                  return generateStar()
+               if (star.lifespan <= 0) return generateStar()
                else return { ...star, lifespan: star.lifespan - 0.1 }
             }),
          )
@@ -104,17 +103,17 @@ const SparklesText: React.FC<SparklesTextProps> = ({
 
    return (
       <div
-         className={ny('text-6xl font-bold', className)}
+         className={ny("text-6xl font-bold", className)}
          {...props}
          style={
             {
-               '--sparkles-first-color': `${colors.first}`,
-               '--sparkles-second-color': `${colors.second}`,
+               "--sparkles-first-color": `${colors.first}`,
+               "--sparkles-second-color": `${colors.second}`,
             } as CSSProperties
          }
       >
          <span className="relative inline-block">
-            {sparkles.map(sparkle => (
+            {sparkles.map((sparkle) => (
                <Sparkle key={sparkle.id} {...sparkle} />
             ))}
             <strong className="bg-gradient-to-r from-[var(--sparkles-first-color)] to-[var(--sparkles-second-color)] bg-clip-text text-transparent">
@@ -136,7 +135,7 @@ const Sparkle: React.FC<Sparkle> = ({ id, x, y, color, delay, scale }) => {
             scale: [0, scale, 0],
             rotate: [75, 120, 150],
          }}
-         transition={{ duration: 0.8, repeat: Infinity, delay }}
+         transition={{ duration: 0.8, repeat: Number.POSITIVE_INFINITY, delay }}
          width="21"
          height="21"
          viewBox="0 0 21 21"
diff --git a/apps/web/registry/default/ui/star-rating.tsx b/apps/web/registry/default/ui/star-rating.tsx
index 26b1cc3e..0fdd4ee6 100644
--- a/apps/web/registry/default/ui/star-rating.tsx
+++ b/apps/web/registry/default/ui/star-rating.tsx
@@ -1,9 +1,9 @@
-import type { Dispatch, SetStateAction } from 'react'
-import React from 'react'
-import type { LucideIcon, LucideProps } from 'lucide-react'
-import { StarIcon } from 'lucide-react'
+import type { LucideIcon, LucideProps } from "lucide-react"
+import { StarIcon } from "lucide-react"
+import type { Dispatch, SetStateAction } from "react"
+import type React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface StarWrapperProps {
    value?: number
@@ -31,27 +31,33 @@ function StarRating({
    const IconComponent = icon
 
    return (
-      <div className={ny('flex items-center gap-1', wrapperClassName)} {...restWrapperProps}>
+      <div
+         className={ny("flex items-center gap-1", wrapperClassName)}
+         {...restWrapperProps}
+      >
          {Array.from({ length: numStars }, (_, i) => {
             const isRated = i < value!
             const styledIconProps: LucideProps = {
                onMouseEnter: () => !showcase && !disabled && setValue!(i + 1),
-               className: ny('fill-primary stroke-primary size-6', {
-                  'opacity-50 pointer-events-none': disabled,
-                  'transition-transform duration-300 hover:scale-110': !disabled && !showcase,
-                  '!fill-muted !stroke-muted': !isRated,
-               }, iconClassName),
+               className: ny(
+                  "fill-primary stroke-primary size-6",
+                  {
+                     "opacity-50 pointer-events-none": disabled,
+                     "transition-transform duration-300 hover:scale-110":
+                        !disabled && !showcase,
+                     "!fill-muted !stroke-muted": !isRated,
+                  },
+                  iconClassName,
+               ),
                ...restIconProps,
             }
             return (
                <div key={i}>
-                  {IconComponent
-                     ? (
-                           <IconComponent {...styledIconProps} />
-                        )
-                     : (
-                           <StarIcon {...styledIconProps} />
-                        )}
+                  {IconComponent ? (
+                     <IconComponent {...styledIconProps} />
+                  ) : (
+                     <StarIcon {...styledIconProps} />
+                  )}
                </div>
             )
          })}
diff --git a/apps/web/registry/default/ui/stepper.tsx b/apps/web/registry/default/ui/stepper.tsx
index 13b2f171..188da1f1 100644
--- a/apps/web/registry/default/ui/stepper.tsx
+++ b/apps/web/registry/default/ui/stepper.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { cva } from 'class-variance-authority'
-import type { LucideIcon } from 'lucide-react'
-import { CheckIcon, Loader2, X } from 'lucide-react'
+import { cva } from "class-variance-authority"
+import type { LucideIcon } from "lucide-react"
+import { CheckIcon, Loader2, X } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
 import {
    Collapsible,
    CollapsibleContent,
-} from '~/registry/default/ui/collapsible'
+} from "~/registry/default/ui/collapsible"
 
 // <---------- CONTEXT ---------->
 
@@ -33,32 +33,32 @@ const StepperContext = React.createContext<
       setStep: (step: number) => void
    }
 >({
-            steps: [],
-            activeStep: 0,
-            initialStep: 0,
-            nextStep: () => {},
-            prevStep: () => {},
-            resetSteps: () => {},
-            setStep: () => {},
-         })
+   steps: [],
+   activeStep: 0,
+   initialStep: 0,
+   nextStep: () => {},
+   prevStep: () => {},
+   resetSteps: () => {},
+   setStep: () => {},
+})
 
 interface StepperContextProviderProps {
-   value: Omit<StepperContextValue, 'activeStep'>
+   value: Omit<StepperContextValue, "activeStep">
    children: React.ReactNode
 }
 
 function StepperProvider({ value, children }: StepperContextProviderProps) {
-   const isError = value.state === 'error'
-   const isLoading = value.state === 'loading'
+   const isError = value.state === "error"
+   const isLoading = value.state === "loading"
 
    const [activeStep, setActiveStep] = React.useState(value.initialStep)
 
    const nextStep = () => {
-      setActiveStep(prev => prev + 1)
+      setActiveStep((prev) => prev + 1)
    }
 
    const prevStep = () => {
-      setActiveStep(prev => prev - 1)
+      setActiveStep((prev) => prev - 1)
    }
 
    const resetSteps = () => {
@@ -103,7 +103,7 @@ function useStepper() {
    const context = React.useContext(StepperContext)
 
    if (context === undefined)
-      throw new Error('useStepper must be used within a StepperProvider')
+      throw new Error("useStepper must be used within a StepperProvider")
 
    const { children, className, ...rest } = context
 
@@ -137,10 +137,10 @@ function useMediaQuery(query: string) {
       }
 
       const result = matchMedia(query)
-      result.addEventListener('change', onChange)
+      result.addEventListener("change", onChange)
       setValue(result.matches)
 
-      return () => result.removeEventListener('change', onChange)
+      return () => result.removeEventListener("change", onChange)
    }, [query])
 
    return value
@@ -157,41 +157,41 @@ interface StepItem {
 }
 
 interface StepOptions {
-   orientation?: 'vertical' | 'horizontal'
-   state?: 'loading' | 'error'
+   orientation?: "vertical" | "horizontal"
+   state?: "loading" | "error"
    responsive?: boolean
    checkIcon?: IconType
    errorIcon?: IconType
    onClickStep?: (step: number, setStep: (step: number) => void) => void
    mobileBreakpoint?: string
-   variant?: 'circle' | 'circle-alt' | 'line'
+   variant?: "circle" | "circle-alt" | "line"
    expandVerticalSteps?: boolean
-   size?: 'sm' | 'md' | 'lg'
+   size?: "sm" | "md" | "lg"
    styles?: {
       /** Styles for the main container */
-      'main-container'?: string
+      "main-container"?: string
       /** Styles for the horizontal step */
-      'horizontal-step'?: string
+      "horizontal-step"?: string
       /** Styles for the horizontal step container (button and labels) */
-      'horizontal-step-container'?: string
+      "horizontal-step-container"?: string
       /** Styles for the vertical step */
-      'vertical-step'?: string
+      "vertical-step"?: string
       /** Styles for the vertical step container (button and labels) */
-      'vertical-step-container'?: string
+      "vertical-step-container"?: string
       /** Styles for the vertical step content */
-      'vertical-step-content'?: string
+      "vertical-step-content"?: string
       /** Styles for the step button container */
-      'step-button-container'?: string
+      "step-button-container"?: string
       /** Styles for the label and description container */
-      'step-label-container'?: string
+      "step-label-container"?: string
       /** Styles for the step label */
-      'step-label'?: string
+      "step-label"?: string
       /** Styles for the step description */
-      'step-description'?: string
+      "step-description"?: string
    }
    variables?: {
-      '--step-icon-size'?: string
-      '--step-gap'?: string
+      "--step-icon-size"?: string
+      "--step-gap"?: string
    }
    scrollTracking?: boolean
 }
@@ -203,9 +203,9 @@ interface StepperProps extends StepOptions {
 }
 
 const VARIABLE_SIZES = {
-   sm: '36px',
-   md: '40px',
-   lg: '44px',
+   sm: "36px",
+   md: "40px",
+   lg: "44px",
 }
 
 const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
@@ -237,7 +237,7 @@ const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
 
       const footer = childArr.map((child, _index) => {
          if (!React.isValidElement(child))
-            throw new Error('Stepper children must be valid React elements.')
+            throw new Error("Stepper children must be valid React elements.")
 
          if (child.type === Step) {
             items.push(child)
@@ -250,14 +250,14 @@ const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
       const stepCount = items.length
 
       const isMobile = useMediaQuery(
-      `(max-width: ${mobileBreakpoint || '768px'})`,
+         `(max-width: ${mobileBreakpoint || "768px"})`,
       )
 
       const clickable = !!onClickStep
 
-      const orientation = isMobile && responsive ? 'vertical' : orientationProp
+      const orientation = isMobile && responsive ? "vertical" : orientationProp
 
-      const isVertical = orientation === 'vertical'
+      const isVertical = orientation === "vertical"
 
       return (
          <StepperProvider
@@ -273,7 +273,7 @@ const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
                clickable,
                stepCount,
                isVertical,
-               variant: variant || 'circle',
+               variant: variant || "circle",
                expandVerticalSteps,
                steps,
                scrollTracking,
@@ -283,27 +283,27 @@ const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
             <div
                ref={ref}
                className={ny(
-                  'stepper__main-container',
-                  'flex w-full flex-wrap',
-                  stepCount === 1 ? 'justify-end' : 'justify-between',
-                  orientation === 'vertical' ? 'flex-col' : 'flex-row',
-                  variant === 'line' && orientation === 'horizontal' && 'gap-4',
+                  "stepper__main-container",
+                  "flex w-full flex-wrap",
+                  stepCount === 1 ? "justify-end" : "justify-between",
+                  orientation === "vertical" ? "flex-col" : "flex-row",
+                  variant === "line" && orientation === "horizontal" && "gap-4",
                   className,
-                  styles?.['main-container'],
+                  styles?.["main-container"],
                )}
                style={
                   {
-                     '--step-icon-size':
-                variables?.['--step-icon-size']
-                || `${VARIABLE_SIZES[size || 'md']}`,
-                     '--step-gap': variables?.['--step-gap'] || '8px',
+                     "--step-icon-size":
+                        variables?.["--step-icon-size"] ||
+                        `${VARIABLE_SIZES[size || "md"]}`,
+                     "--step-gap": variables?.["--step-gap"] || "8px",
                   } as React.CSSProperties
                }
                {...rest}
             >
                <VerticalContent>{items}</VerticalContent>
             </div>
-            {orientation === 'horizontal' && (
+            {orientation === "horizontal" && (
                <HorizontalContent>{items}</HorizontalContent>
             )}
             {footer}
@@ -313,8 +313,8 @@ const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
 )
 
 Stepper.defaultProps = {
-   size: 'md',
-   orientation: 'horizontal',
+   size: "md",
+   orientation: "horizontal",
    responsive: true,
 }
 
@@ -327,10 +327,10 @@ function VerticalContent({ children }: { children: React.ReactNode }) {
    return (
       <>
          {React.Children.map(children, (child, i) => {
-            const isCompletedStep
-          = (React.isValidElement(child)
-          && (child.props as any).isCompletedStep)
-          ?? i < activeStep
+            const isCompletedStep =
+               (React.isValidElement(child) &&
+                  (child.props as any).isCompletedStep) ??
+               i < activeStep
             const isLastStep = i === stepCount - 1
             const isCurrentStep = i === activeStep
 
@@ -354,16 +354,17 @@ function HorizontalContent({ children }: { children: React.ReactNode }) {
    const { activeStep } = useStepper()
    const childArr = React.Children.toArray(children)
 
-   if (activeStep > childArr.length)
-      return null
+   if (activeStep > childArr.length) return null
 
    return (
       <>
          {React.Children.map(childArr[activeStep], (node) => {
-            if (!React.isValidElement(node))
-               return null
+            if (!React.isValidElement(node)) return null
 
-            return React.Children.map(node.props.children, childNode => childNode)
+            return React.Children.map(
+               node.props.children,
+               (childNode) => childNode,
+            )
          })}
       </>
    )
@@ -375,7 +376,7 @@ interface StepProps extends React.HTMLAttributes<HTMLLIElement> {
    label?: string | React.ReactNode
    description?: string
    icon?: IconType
-   state?: 'loading' | 'error'
+   state?: "loading" | "error"
    checkIcon?: IconType
    errorIcon?: IconType
    isCompletedStep?: boolean
@@ -468,23 +469,23 @@ type VerticalStepProps = StepSharedProps & {
 
 const verticalStepVariants = cva(
    [
-      'flex flex-col relative transition-all duration-200',
-      'data-[completed=true]:[&:not(:last-child)]:after:bg-primary',
-      'data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive',
+      "flex flex-col relative transition-all duration-200",
+      "data-[completed=true]:[&:not(:last-child)]:after:bg-primary",
+      "data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive",
    ],
    {
       variants: {
          variant: {
             circle: ny(
-               '[&:not(:last-child)]:gap-[var(--step-gap)] [&:not(:last-child)]:pb-[var(--step-gap)]',
-               '[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:w-[2px] [&:not(:last-child)]:after:content-[\'\']',
-               '[&:not(:last-child)]:after:inset-x-[calc(var(--step-icon-size)/2)]',
-               '[&:not(:last-child)]:after:absolute',
-               '[&:not(:last-child)]:after:top-[calc(var(--step-icon-size)+var(--step-gap))]',
-               '[&:not(:last-child)]:after:bottom-[var(--step-gap)]',
-               '[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200',
+               "[&:not(:last-child)]:gap-[var(--step-gap)] [&:not(:last-child)]:pb-[var(--step-gap)]",
+               "[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:w-[2px] [&:not(:last-child)]:after:content-['']",
+               "[&:not(:last-child)]:after:inset-x-[calc(var(--step-icon-size)/2)]",
+               "[&:not(:last-child)]:after:absolute",
+               "[&:not(:last-child)]:after:top-[calc(var(--step-icon-size)+var(--step-gap))]",
+               "[&:not(:last-child)]:after:bottom-[var(--step-gap)]",
+               "[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200",
             ),
-            line: 'flex-1 border-t-0 mb-4',
+            line: "flex-1 border-t-0 mb-4",
          },
       },
    },
@@ -526,13 +527,13 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
       } = useStepper()
 
       const opacity = hasVisited ? 1 : 0.8
-      const localIsLoading = isLoading || state === 'loading'
-      const localIsError = isError || state === 'error'
+      const localIsLoading = isLoading || state === "loading"
+      const localIsError = isError || state === "error"
 
       const isLastStep = index === steps.length - 1
 
-      const active
-      = variant === 'line' ? isCompletedStep || isCurrentStep : isCompletedStep
+      const active =
+         variant === "line" ? isCompletedStep || isCurrentStep : isCompletedStep
       const checkIcon = checkIconProp || checkIconContext
       const errorIcon = errorIconProp || errorIconContext
 
@@ -543,19 +544,19 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
                   <CollapsibleContent
                      ref={(node) => {
                         if (
-                        // If the step is the first step and the previous step
-                        // was the last step or if the step is not the first step
-                        // This prevents initial scrolling when the stepper
-                        // is located anywhere other than the top of the view.
-                           scrollTracking
-                           && ((index === 0
-                           && previousActiveStep
-                           && previousActiveStep === steps.length)
-                           || (index && index > 0))
+                           // If the step is the first step and the previous step
+                           // was the last step or if the step is not the first step
+                           // This prevents initial scrolling when the stepper
+                           // is located anywhere other than the top of the view.
+                           scrollTracking &&
+                           ((index === 0 &&
+                              previousActiveStep &&
+                              previousActiveStep === steps.length) ||
+                              (index && index > 0))
                         ) {
                            node?.scrollIntoView({
-                              behavior: 'smooth',
-                              block: 'center',
+                              behavior: "smooth",
+                              block: "center",
                            })
                         }
                      }}
@@ -573,12 +574,12 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
          <div
             ref={ref}
             className={ny(
-               'stepper__vertical-step',
+               "stepper__vertical-step",
                verticalStepVariants({
-                  variant: variant?.includes('circle') ? 'circle' : 'line',
+                  variant: variant?.includes("circle") ? "circle" : "line",
                }),
-               isLastStepCurrentStep && 'gap-[var(--step-gap)]',
-               styles?.['vertical-step'],
+               isLastStepCurrentStep && "gap-[var(--step-gap)]",
+               styles?.["vertical-step"],
             )}
             data-optional={steps[index || 0]?.optional}
             data-completed={isCompletedStep}
@@ -586,25 +587,27 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
             data-clickable={clickable || !!onClickStep}
             data-invalid={localIsError}
             onClick={() => {
-               if (onClickStep)
-                  onClickStep(index || 0, setStep)
-               else
-                  onClickStepGeneral?.(index || 0, setStep)
+               if (onClickStep) onClickStep(index || 0, setStep)
+               else onClickStepGeneral?.(index || 0, setStep)
             }}
          >
             <div
                data-vertical
                data-active={active}
                className={ny(
-                  'stepper__vertical-step-container',
-                  'flex items-center',
-                  variant === 'line'
-                  && 'data-[active=true]:border-primary border-s-[3px] py-2 ps-3',
-                  styles?.['vertical-step-container'],
+                  "stepper__vertical-step-container",
+                  "flex items-center",
+                  variant === "line" &&
+                     "data-[active=true]:border-primary border-s-[3px] py-2 ps-3",
+                  styles?.["vertical-step-container"],
                )}
             >
                <StepButtonContainer
-                  {...{ isLoading: localIsLoading, isError: localIsError, ...props }}
+                  {...{
+                     isLoading: localIsLoading,
+                     isError: localIsError,
+                     ...props,
+                  }}
                >
                   <StepIcon
                      {...{
@@ -627,11 +630,11 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
             </div>
             <div
                className={ny(
-                  'stepper__vertical-step-content',
-                  !isLastStep && 'min-h-4',
-                  variant !== 'line' && 'ps-[--step-icon-size]',
-                  variant === 'line' && orientation === 'vertical' && 'min-h-0',
-                  styles?.['vertical-step-content'],
+                  "stepper__vertical-step-content",
+                  !isLastStep && "min-h-4",
+                  variant !== "line" && "ps-[--step-icon-size]",
+                  variant === "line" && orientation === "vertical" && "min-h-0",
+                  styles?.["vertical-step-content"],
                )}
             >
                {renderChildren()}
@@ -672,13 +675,13 @@ const HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(
          errorIcon: errorIconProp,
       } = props
 
-      const localIsLoading = isLoading || state === 'loading'
-      const localIsError = isError || state === 'error'
+      const localIsLoading = isLoading || state === "loading"
+      const localIsError = isError || state === "error"
 
       const opacity = hasVisited ? 1 : 0.8
 
-      const active
-      = variant === 'line' ? isCompletedStep || isCurrentStep : isCompletedStep
+      const active =
+         variant === "line" ? isCompletedStep || isCurrentStep : isCompletedStep
 
       const checkIcon = checkIconProp || checkIconContext
       const errorIcon = errorIconProp || errorIconContext
@@ -687,20 +690,20 @@ const HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(
          <div
             aria-disabled={!hasVisited}
             className={ny(
-               'stepper__horizontal-step',
-               'relative flex items-center transition-all duration-200',
-               '[&:not(:last-child)]:flex-1',
-               '[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200',
-               '[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:content-[\'\']',
-               'data-[completed=true]:[&:not(:last-child)]:after:bg-primary',
-               'data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive',
-               variant === 'circle-alt'
-               && 'flex-1 flex-col justify-start [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:-order-1 [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]',
-               variant === 'circle'
-               && '[&:not(:last-child)]:after:me-[var(--step-gap)] [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:flex-1',
-               variant === 'line'
-               && 'data-[active=true]:border-primary flex-1 flex-col border-t-[3px]',
-               styles?.['horizontal-step'],
+               "stepper__horizontal-step",
+               "relative flex items-center transition-all duration-200",
+               "[&:not(:last-child)]:flex-1",
+               "[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200",
+               "[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:content-['']",
+               "data-[completed=true]:[&:not(:last-child)]:after:bg-primary",
+               "data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive",
+               variant === "circle-alt" &&
+                  "flex-1 flex-col justify-start [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:-order-1 [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]",
+               variant === "circle" &&
+                  "[&:not(:last-child)]:after:me-[var(--step-gap)] [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:flex-1",
+               variant === "line" &&
+                  "data-[active=true]:border-primary flex-1 flex-col border-t-[3px]",
+               styles?.["horizontal-step"],
             )}
             data-optional={steps[index || 0]?.optional}
             data-completed={isCompletedStep}
@@ -712,15 +715,19 @@ const HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(
          >
             <div
                className={ny(
-                  'stepper__horizontal-step-container',
-                  'flex items-center',
-                  variant === 'circle-alt' && 'flex-col justify-center gap-1',
-                  variant === 'line' && 'w-full',
-                  styles?.['horizontal-step-container'],
+                  "stepper__horizontal-step-container",
+                  "flex items-center",
+                  variant === "circle-alt" && "flex-col justify-center gap-1",
+                  variant === "line" && "w-full",
+                  styles?.["horizontal-step-container"],
                )}
             >
                <StepButtonContainer
-                  {...{ ...props, isError: localIsError, isLoading: localIsLoading }}
+                  {...{
+                     ...props,
+                     isError: localIsError,
+                     isLoading: localIsLoading,
+                  }}
                >
                   <StepIcon
                      {...{
@@ -772,25 +779,24 @@ function StepButtonContainer({
 
    const isLoading = isLoadingProp || isLoadingContext
 
-   if (variant === 'line')
-      return null
+   if (variant === "line") return null
 
    return (
       <Button
          variant="ghost"
          tabIndex={currentStepClickable ? 0 : -1}
          className={ny(
-            'stepper__step-button-container',
-            'pointer-events-none rounded-full p-0',
-            'size-[var(--step-icon-size)]',
-            'flex items-center justify-center rounded-full border-2',
-            'data-[clickable=true]:pointer-events-auto',
-            'data-[active=true]:bg-primary data-[active=true]:border-primary data-[active=true]:text-primary-foreground',
-            'data-[current=true]:border-primary data-[current=true]:bg-secondary',
-            'data-[invalid=true]:bg-destructive data-[invalid=true]:border-destructive data-[invalid=true]:text-destructive-foreground',
-            styles?.['step-button-container'],
+            "stepper__step-button-container",
+            "pointer-events-none rounded-full p-0",
+            "size-[var(--step-icon-size)]",
+            "flex items-center justify-center rounded-full border-2",
+            "data-[clickable=true]:pointer-events-auto",
+            "data-[active=true]:bg-primary data-[active=true]:border-primary data-[active=true]:text-primary-foreground",
+            "data-[current=true]:border-primary data-[current=true]:bg-secondary",
+            "data-[invalid=true]:bg-destructive data-[invalid=true]:border-destructive data-[invalid=true]:text-destructive-foreground",
+            styles?.["step-button-container"],
          )}
-         aria-current={isCurrentStep ? 'step' : undefined}
+         aria-current={isCurrentStep ? "step" : undefined}
          data-current={isCurrentStep}
          data-invalid={isError && (isCurrentStep || isCompletedStep)}
          data-active={isCompletedStep}
@@ -806,16 +812,16 @@ function StepButtonContainer({
 
 type IconType = LucideIcon | React.ComponentType<any> | undefined
 
-const iconVariants = cva('', {
+const iconVariants = cva("", {
    variants: {
       size: {
-         sm: 'size-4',
-         md: 'size-4',
-         lg: 'size-5',
+         sm: "size-4",
+         md: "size-4",
+         lg: "size-5",
       },
    },
    defaultVariants: {
-      size: 'md',
+      size: "md",
    },
 })
 
@@ -847,18 +853,15 @@ const StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(
          errorIcon: CustomErrorIcon,
       } = props
 
-      const Icon = React.useMemo(
-         () => (CustomIcon || null),
-         [CustomIcon],
-      )
+      const Icon = React.useMemo(() => CustomIcon || null, [CustomIcon])
 
       const ErrorIcon = React.useMemo(
-         () => (CustomErrorIcon || null),
+         () => CustomErrorIcon || null,
          [CustomErrorIcon],
       )
 
       const Check = React.useMemo(
-         () => (CustomCheckIcon || CheckIcon),
+         () => CustomCheckIcon || CheckIcon,
          [CustomCheckIcon],
       )
 
@@ -894,7 +897,9 @@ const StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(
             }
             if (isLoading) {
                return (
-                  <Loader2 className={ny(iconVariants({ size }), 'animate-spin')} />
+                  <Loader2
+                     className={ny(iconVariants({ size }), "animate-spin")}
+                  />
                )
             }
          }
@@ -909,7 +914,7 @@ const StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(
             <span
                ref={ref}
                key="label"
-               className={ny('text-md text-center font-medium')}
+               className={ny("text-md text-center font-medium")}
             >
                {(index || 0) + 1}
             </span>
@@ -939,29 +944,29 @@ interface StepLabelProps {
    description?: string | null
 }
 
-const labelVariants = cva('', {
+const labelVariants = cva("", {
    variants: {
       size: {
-         sm: 'text-sm',
-         md: 'text-sm',
-         lg: 'text-base',
+         sm: "text-sm",
+         md: "text-sm",
+         lg: "text-base",
       },
    },
    defaultVariants: {
-      size: 'md',
+      size: "md",
    },
 })
 
-const descriptionVariants = cva('', {
+const descriptionVariants = cva("", {
    variants: {
       size: {
-         sm: 'text-xs',
-         md: 'text-xs',
-         lg: 'text-sm',
+         sm: "text-xs",
+         md: "text-xs",
+         lg: "text-sm",
       },
    },
    defaultVariants: {
-      size: 'md',
+      size: "md",
    },
 })
 
@@ -974,49 +979,51 @@ function StepLabel({
    const { variant, styles, size, orientation } = useStepper()
    const shouldRender = !!label || !!description
 
-   return shouldRender
-      ? (
-            <div
-               aria-current={isCurrentStep ? 'step' : undefined}
+   return shouldRender ? (
+      <div
+         aria-current={isCurrentStep ? "step" : undefined}
+         className={ny(
+            "stepper__step-label-container",
+            "flex flex-col",
+            variant !== "line"
+               ? "ms-2"
+               : orientation === "horizontal" && "my-2",
+            variant === "circle-alt" && "text-center",
+            variant === "circle-alt" && orientation === "horizontal" && "ms-0",
+            variant === "circle-alt" &&
+               orientation === "vertical" &&
+               "text-start",
+            styles?.["step-label-container"],
+         )}
+         style={{
+            opacity,
+         }}
+      >
+         {!!label && (
+            <span
                className={ny(
-                  'stepper__step-label-container',
-                  'flex flex-col',
-                  variant !== 'line' ? 'ms-2' : orientation === 'horizontal' && 'my-2',
-                  variant === 'circle-alt' && 'text-center',
-                  variant === 'circle-alt' && orientation === 'horizontal' && 'ms-0',
-                  variant === 'circle-alt' && orientation === 'vertical' && 'text-start',
-                  styles?.['step-label-container'],
+                  "stepper__step-label",
+                  labelVariants({ size }),
+                  styles?.["step-label"],
                )}
-               style={{
-                  opacity,
-               }}
             >
-               {!!label && (
-                  <span
-                     className={ny(
-                        'stepper__step-label',
-                        labelVariants({ size }),
-                        styles?.['step-label'],
-                     )}
-                  >
-                     {label}
-                  </span>
-               )}
-               {!!description && (
-                  <span
-                     className={ny(
-                        'stepper__step-description',
-                        'text-muted-foreground',
-                        descriptionVariants({ size }),
-                        styles?.['step-description'],
-                     )}
-                  >
-                     {description}
-                  </span>
+               {label}
+            </span>
+         )}
+         {!!description && (
+            <span
+               className={ny(
+                  "stepper__step-description",
+                  "text-muted-foreground",
+                  descriptionVariants({ size }),
+                  styles?.["step-description"],
                )}
-            </div>
-         )
-      : null
+            >
+               {description}
+            </span>
+         )}
+      </div>
+   ) : null
 }
 
 export { Stepper, Step, useStepper }
diff --git a/apps/web/registry/default/ui/switch.tsx b/apps/web/registry/default/ui/switch.tsx
index 0acfa084..80f723cc 100644
--- a/apps/web/registry/default/ui/switch.tsx
+++ b/apps/web/registry/default/ui/switch.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as SwitchPrimitives from '@radix-ui/react-switch'
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Switch = React.forwardRef<
    React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <SwitchPrimitives.Root
       className={ny(
-         'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+         "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
          className,
       )}
       {...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
    >
       <SwitchPrimitives.Thumb
          className={ny(
-            'bg-background pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+            "bg-background pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
          )}
       />
    </SwitchPrimitives.Root>
diff --git a/apps/web/registry/default/ui/table.tsx b/apps/web/registry/default/ui/table.tsx
index a0c838db..3f91cfb4 100644
--- a/apps/web/registry/default/ui/table.tsx
+++ b/apps/web/registry/default/ui/table.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Table = React.forwardRef<
    HTMLTableElement,
@@ -9,20 +9,20 @@ const Table = React.forwardRef<
    <div className="relative w-full overflow-auto">
       <table
          ref={ref}
-         className={ny('w-full caption-bottom text-sm', className)}
+         className={ny("w-full caption-bottom text-sm", className)}
          {...props}
       />
    </div>
 ))
-Table.displayName = 'Table'
+Table.displayName = "Table"
 
 const TableHeader = React.forwardRef<
    HTMLTableSectionElement,
    React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-   <thead ref={ref} className={ny('[&_tr]:border-b', className)} {...props} />
+   <thead ref={ref} className={ny("[&_tr]:border-b", className)} {...props} />
 ))
-TableHeader.displayName = 'TableHeader'
+TableHeader.displayName = "TableHeader"
 
 const TableBody = React.forwardRef<
    HTMLTableSectionElement,
@@ -30,11 +30,11 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <tbody
       ref={ref}
-      className={ny('[&_tr:last-child]:border-0', className)}
+      className={ny("[&_tr:last-child]:border-0", className)}
       {...props}
    />
 ))
-TableBody.displayName = 'TableBody'
+TableBody.displayName = "TableBody"
 
 const TableFooter = React.forwardRef<
    HTMLTableSectionElement,
@@ -43,13 +43,13 @@ const TableFooter = React.forwardRef<
    <tfoot
       ref={ref}
       className={ny(
-         'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+         "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
          className,
       )}
       {...props}
    />
 ))
-TableFooter.displayName = 'TableFooter'
+TableFooter.displayName = "TableFooter"
 
 const TableRow = React.forwardRef<
    HTMLTableRowElement,
@@ -58,13 +58,13 @@ const TableRow = React.forwardRef<
    <tr
       ref={ref}
       className={ny(
-         'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+         "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
          className,
       )}
       {...props}
    />
 ))
-TableRow.displayName = 'TableRow'
+TableRow.displayName = "TableRow"
 
 const TableHead = React.forwardRef<
    HTMLTableCellElement,
@@ -73,13 +73,13 @@ const TableHead = React.forwardRef<
    <th
       ref={ref}
       className={ny(
-         'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
+         "text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
          className,
       )}
       {...props}
    />
 ))
-TableHead.displayName = 'TableHead'
+TableHead.displayName = "TableHead"
 
 const TableCell = React.forwardRef<
    HTMLTableCellElement,
@@ -87,11 +87,14 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <td
       ref={ref}
-      className={ny('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+      className={ny(
+         "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+         className,
+      )}
       {...props}
    />
 ))
-TableCell.displayName = 'TableCell'
+TableCell.displayName = "TableCell"
 
 const TableCaption = React.forwardRef<
    HTMLTableCaptionElement,
@@ -99,11 +102,11 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <caption
       ref={ref}
-      className={ny('text-muted-foreground mt-4 text-sm', className)}
+      className={ny("text-muted-foreground mt-4 text-sm", className)}
       {...props}
    />
 ))
-TableCaption.displayName = 'TableCaption'
+TableCaption.displayName = "TableCaption"
 
 export {
    Table,
diff --git a/apps/web/registry/default/ui/tabs.tsx b/apps/web/registry/default/ui/tabs.tsx
index 7a399c83..bc2332ac 100644
--- a/apps/web/registry/default/ui/tabs.tsx
+++ b/apps/web/registry/default/ui/tabs.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Tabs = TabsPrimitive.Root
 
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
    <TabsPrimitive.List
       ref={ref}
       className={ny(
-         'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',
+         "bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
          className,
       )}
       {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
    <TabsPrimitive.Trigger
       ref={ref}
       className={ny(
-         'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
+         "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
          className,
       )}
       {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
    <TabsPrimitive.Content
       ref={ref}
       className={ny(
-         'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+         "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
          className,
       )}
       {...props}
diff --git a/apps/web/registry/default/ui/terminal.tsx b/apps/web/registry/default/ui/terminal.tsx
new file mode 100644
index 00000000..623d3f8b
--- /dev/null
+++ b/apps/web/registry/default/ui/terminal.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import { type MotionProps, motion } from "motion/react"
+import { useEffect, useRef, useState } from "react"
+import { ny } from "~/lib/utils"
+
+interface AnimatedSpanProps extends MotionProps {
+   children: React.ReactNode
+   delay?: number
+   className?: string
+}
+
+export const AnimatedSpan = ({
+   children,
+   delay = 0,
+   className,
+   ...props
+}: AnimatedSpanProps) => (
+   <motion.div
+      initial={{ opacity: 0, y: -5 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, delay: delay / 1000 }}
+      className={ny("grid text-sm font-normal tracking-tight", className)}
+      {...props}
+   >
+      {children}
+   </motion.div>
+)
+
+interface TypingAnimationProps extends MotionProps {
+   children: string
+   className?: string
+   duration?: number
+   delay?: number
+   as?: React.ElementType
+}
+
+export const TypingAnimation = ({
+   children,
+   className,
+   duration = 60,
+   delay = 0,
+   as: Component = "span",
+   ...props
+}: TypingAnimationProps) => {
+   if (typeof children !== "string") {
+      throw new Error("TypingAnimation: children must be a string. Received:")
+   }
+
+   const MotionComponent = motion.create(Component, {
+      forwardMotionProps: true,
+   })
+
+   const [displayedText, setDisplayedText] = useState<string>("")
+   const [started, setStarted] = useState(false)
+   const elementRef = useRef<HTMLElement | null>(null)
+
+   useEffect(() => {
+      const startTimeout = setTimeout(() => {
+         setStarted(true)
+      }, delay)
+      return () => clearTimeout(startTimeout)
+   }, [delay])
+
+   useEffect(() => {
+      if (!started) return
+
+      let i = 0
+      const typingEffect = setInterval(() => {
+         if (i < children.length) {
+            setDisplayedText(children.substring(0, i + 1))
+            i++
+         } else {
+            clearInterval(typingEffect)
+         }
+      }, duration)
+
+      return () => {
+         clearInterval(typingEffect)
+      }
+   }, [children, duration, started])
+
+   return (
+      <MotionComponent
+         ref={elementRef}
+         className={ny("text-sm font-normal tracking-tight", className)}
+         {...props}
+      >
+         {displayedText}
+      </MotionComponent>
+   )
+}
+
+interface TerminalProps {
+   children: React.ReactNode
+   className?: string
+}
+
+export const Terminal = ({ children, className }: TerminalProps) => {
+   return (
+      <div
+         className={ny(
+            "z-0 h-full max-h-[400px] w-full max-w-lg rounded-xl border border-border bg-background",
+            className,
+         )}
+      >
+         <div className="flex flex-col gap-y-2 border-b border-border p-4">
+            <div className="flex flex-row gap-x-2">
+               <div className="h-2 w-2 rounded-full bg-red-500"></div>
+               <div className="h-2 w-2 rounded-full bg-yellow-500"></div>
+               <div className="h-2 w-2 rounded-full bg-green-500"></div>
+            </div>
+         </div>
+         <pre className="p-4">
+            <code className="grid gap-y-1 overflow-auto">{children}</code>
+         </pre>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/ui/text-animate.tsx b/apps/web/registry/default/ui/text-animate.tsx
new file mode 100644
index 00000000..fa7bd58e
--- /dev/null
+++ b/apps/web/registry/default/ui/text-animate.tsx
@@ -0,0 +1,391 @@
+"use client"
+
+import {
+   AnimatePresence,
+   type MotionProps,
+   type Variants,
+   motion,
+} from "motion/react"
+import type { ElementType } from "react"
+import { ny } from "~/registry/default/lib/utils"
+
+type AnimationType = "text" | "word" | "character" | "line"
+type AnimationVariant =
+   | "fadeIn"
+   | "blurIn"
+   | "blurInUp"
+   | "blurInDown"
+   | "slideUp"
+   | "slideDown"
+   | "slideLeft"
+   | "slideRight"
+   | "scaleUp"
+   | "scaleDown"
+
+interface TextAnimateProps extends MotionProps {
+   /**
+    * The text content to animate
+    */
+   children: string
+   /**
+    * The class name to be applied to the component
+    */
+   className?: string
+   /**
+    * The class name to be applied to each segment
+    */
+   segmentClassName?: string
+   /**
+    * The delay before the animation starts
+    */
+   delay?: number
+   /**
+    * The duration of the animation
+    */
+   duration?: number
+   /**
+    * Custom motion variants for the animation
+    */
+   variants?: Variants
+   /**
+    * The element type to render
+    */
+   as?: ElementType
+   /**
+    * How to split the text ("text", "word", "character")
+    */
+   by?: AnimationType
+   /**
+    * Whether to start animation when component enters viewport
+    */
+   startOnView?: boolean
+   /**
+    * Whether to animate only once
+    */
+   once?: boolean
+   /**
+    * The animation preset to use
+    */
+   animation?: AnimationVariant
+}
+
+const staggerTimings: Record<AnimationType, number> = {
+   text: 0.06,
+   word: 0.05,
+   character: 0.03,
+   line: 0.06,
+}
+
+const defaultContainerVariants = {
+   hidden: { opacity: 1 },
+   show: {
+      opacity: 1,
+      transition: {
+         staggerChildren: 0.05,
+      },
+   },
+   exit: {
+      opacity: 0,
+      transition: {
+         staggerChildren: 0.05,
+         staggerDirection: -1,
+      },
+   },
+}
+
+const defaultItemVariants: Variants = {
+   hidden: { opacity: 0 },
+   show: {
+      opacity: 1,
+   },
+   exit: {
+      opacity: 0,
+   },
+}
+
+const defaultItemAnimationVariants: Record<
+   AnimationVariant,
+   { container: Variants; item: Variants }
+> = {
+   fadeIn: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { opacity: 0, y: 20 },
+         show: (delay: number) => ({
+            opacity: 1,
+            y: 0,
+            transition: {
+               delay,
+               duration: 0.3,
+            },
+         }),
+         exit: {
+            opacity: 0,
+            y: 20,
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+   blurIn: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { opacity: 0, filter: "blur(10px)" },
+         show: (i: number) => ({
+            opacity: 1,
+            filter: "blur(0px)",
+            transition: {
+               delay: i * 0.1,
+               duration: 0.3,
+            },
+         }),
+         exit: {
+            opacity: 0,
+            filter: "blur(10px)",
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+   blurInUp: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { opacity: 0, filter: "blur(10px)", y: 20 },
+         show: (delay: number) => ({
+            opacity: 1,
+            filter: "blur(0px)",
+            y: 0,
+            transition: {
+               y: { duration: 0.3 },
+               opacity: { duration: 0.4 },
+               filter: { duration: 0.3 },
+            },
+         }),
+         exit: {
+            opacity: 0,
+            filter: "blur(10px)",
+            y: 20,
+            transition: {
+               y: { duration: 0.3 },
+               opacity: { duration: 0.4 },
+               filter: { duration: 0.3 },
+            },
+         },
+      },
+   },
+   blurInDown: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { opacity: 0, filter: "blur(10px)", y: -20 },
+         show: (delay: number) => ({
+            opacity: 1,
+            filter: "blur(0px)",
+            y: 0,
+            transition: {
+               y: { duration: 0.3 },
+               opacity: { duration: 0.4 },
+               filter: { duration: 0.3 },
+            },
+         }),
+      },
+   },
+   slideUp: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { y: 20, opacity: 0 },
+         show: (delay: number) => ({
+            y: 0,
+            opacity: 1,
+            transition: {
+               delay,
+               duration: 0.3,
+            },
+         }),
+         exit: {
+            y: -20,
+            opacity: 0,
+            transition: {
+               duration: 0.3,
+            },
+         },
+      },
+   },
+   slideDown: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { y: -20, opacity: 0 },
+         show: {
+            y: 0,
+            opacity: 1,
+            transition: { duration: 0.3 },
+         },
+         exit: {
+            y: 20,
+            opacity: 0,
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+   slideLeft: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { x: 20, opacity: 0 },
+         show: {
+            x: 0,
+            opacity: 1,
+            transition: { duration: 0.3 },
+         },
+         exit: {
+            x: -20,
+            opacity: 0,
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+   slideRight: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { x: -20, opacity: 0 },
+         show: {
+            x: 0,
+            opacity: 1,
+            transition: { duration: 0.3 },
+         },
+         exit: {
+            x: 20,
+            opacity: 0,
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+   scaleUp: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { scale: 0.5, opacity: 0 },
+         show: {
+            scale: 1,
+            opacity: 1,
+            transition: {
+               duration: 0.3,
+               scale: {
+                  type: "spring",
+                  damping: 15,
+                  stiffness: 300,
+               },
+            },
+         },
+         exit: {
+            scale: 0.5,
+            opacity: 0,
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+   scaleDown: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { scale: 1.5, opacity: 0 },
+         show: (delay: number) => ({
+            scale: 1,
+            opacity: 1,
+            transition: {
+               delay,
+               duration: 0.3,
+               scale: {
+                  type: "spring",
+                  damping: 15,
+                  stiffness: 300,
+               },
+            },
+         }),
+         exit: {
+            scale: 1.5,
+            opacity: 0,
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+}
+
+export function TextAnimate({
+   children,
+   delay = 0,
+   duration = 0.3,
+   variants,
+   className,
+   segmentClassName,
+   as: Component = "p",
+   startOnView = true,
+   once = false,
+   by = "word",
+   animation = "fadeIn",
+   ...props
+}: TextAnimateProps) {
+   const MotionComponent = motion.create(Component)
+
+   // Use provided variants or default variants based on animation type
+   const finalVariants = animation
+      ? {
+           container: {
+              ...defaultItemAnimationVariants[animation].container,
+              show: {
+                 ...defaultItemAnimationVariants[animation].container.show,
+                 transition: {
+                    staggerChildren: staggerTimings[by],
+                 },
+              },
+              exit: {
+                 ...defaultItemAnimationVariants[animation].container.exit,
+                 transition: {
+                    staggerChildren: staggerTimings[by],
+                    staggerDirection: -1,
+                 },
+              },
+           },
+           item: defaultItemAnimationVariants[animation].item,
+        }
+      : { container: defaultContainerVariants, item: defaultItemVariants }
+
+   let segments: string[] = []
+   switch (by) {
+      case "word":
+         segments = children.split(/(\s+)/)
+         break
+      case "character":
+         segments = children.split("")
+         break
+      case "line":
+         segments = children.split("\n")
+         break
+      case "text":
+      default:
+         segments = [children]
+         break
+   }
+
+   return (
+      <AnimatePresence mode="popLayout">
+         <MotionComponent
+            variants={finalVariants.container}
+            initial="hidden"
+            whileInView={startOnView ? "show" : undefined}
+            animate={startOnView ? undefined : "show"}
+            exit="exit"
+            className={ny("whitespace-pre-wrap", className)}
+            {...props}
+         >
+            {segments.map((segment, i) => (
+               <motion.span
+                  key={`${by}-${segment}-${i}`}
+                  variants={finalVariants.item}
+                  custom={i * staggerTimings[by]}
+                  className={ny(
+                     by === "line" ? "block" : "inline-block whitespace-pre",
+                     segmentClassName,
+                  )}
+               >
+                  {segment}
+               </motion.span>
+            ))}
+         </MotionComponent>
+      </AnimatePresence>
+   )
+}
diff --git a/apps/web/registry/default/ui/text-reveal.tsx b/apps/web/registry/default/ui/text-reveal.tsx
index 8099c1da..59726955 100644
--- a/apps/web/registry/default/ui/text-reveal.tsx
+++ b/apps/web/registry/default/ui/text-reveal.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { motion, useScroll, useTransform } from 'framer-motion'
-import type { FC, ReactNode } from 'react'
-import { useRef } from 'react'
-import { ny } from '~/lib/utils'
+import { motion, useScroll, useTransform } from "framer-motion"
+import type { FC, ReactNode } from "react"
+import { useRef } from "react"
+import { ny } from "~/lib/utils"
 
 interface TextRevealByWordProps {
    text: string
@@ -19,10 +19,10 @@ export const TextRevealByWord: FC<TextRevealByWordProps> = ({
    const { scrollYProgress } = useScroll({
       target: targetRef,
    })
-   const words = text.split(' ')
+   const words = text.split(" ")
 
    return (
-      <div ref={targetRef} className={ny('relative z-0 h-[200vh]', className)}>
+      <div ref={targetRef} className={ny("relative z-0 h-[200vh]", className)}>
          <div className="sticky top-0 mx-auto flex h-1/2 max-w-4xl items-center bg-transparent px-4 py-20">
             <p
                ref={targetRef}
@@ -32,7 +32,11 @@ export const TextRevealByWord: FC<TextRevealByWordProps> = ({
                   const start = i / words.length
                   const end = start + 1 / words.length
                   return (
-                     <Word key={i} progress={scrollYProgress} range={[start, end]}>
+                     <Word
+                        key={i}
+                        progress={scrollYProgress}
+                        range={[start, end]}
+                     >
                         {word}
                      </Word>
                   )
@@ -54,7 +58,10 @@ const Word: FC<WordProps> = ({ children, progress, range }) => {
    return (
       <span className="xl:lg-3 relative mx-1 lg:mx-2.5">
          <span className="absolute opacity-30">{children}</span>
-         <motion.span style={{ opacity }} className="text-black dark:text-white">
+         <motion.span
+            style={{ opacity }}
+            className="text-black dark:text-white"
+         >
             {children}
          </motion.span>
       </span>
diff --git a/apps/web/registry/default/ui/textarea.tsx b/apps/web/registry/default/ui/textarea.tsx
index 6a771fde..2e0feb4f 100644
--- a/apps/web/registry/default/ui/textarea.tsx
+++ b/apps/web/registry/default/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 export interface TextareaProps
    extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       return (
          <textarea
             className={ny(
-               'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+               "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                className,
             )}
             ref={ref}
@@ -19,6 +19,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       )
    },
 )
-Textarea.displayName = 'Textarea'
+Textarea.displayName = "Textarea"
 
 export { Textarea }
diff --git a/apps/web/registry/default/ui/timeline.tsx b/apps/web/registry/default/ui/timeline.tsx
index a0b97d79..6a7a91c2 100644
--- a/apps/web/registry/default/ui/timeline.tsx
+++ b/apps/web/registry/default/ui/timeline.tsx
@@ -1,26 +1,26 @@
-import React from 'react'
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
-import { Check, Circle, X } from 'lucide-react'
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+import { Check, Circle, X } from "lucide-react"
+import React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
-const timelineVariants = cva('grid', {
+const timelineVariants = cva("grid", {
    variants: {
       positions: {
-         left: '[&>li]:grid-cols-[0_min-content_1fr]',
-         right: '[&>li]:grid-cols-[1fr_min-content]',
-         center: '[&>li]:grid-cols-[1fr_min-content_1fr]',
+         left: "[&>li]:grid-cols-[0_min-content_1fr]",
+         right: "[&>li]:grid-cols-[1fr_min-content]",
+         center: "[&>li]:grid-cols-[1fr_min-content_1fr]",
       },
    },
    defaultVariants: {
-      positions: 'left',
+      positions: "left",
    },
 })
 
 interface TimelineProps
    extends React.HTMLAttributes<HTMLUListElement>,
-   VariantProps<typeof timelineVariants> {}
+      VariantProps<typeof timelineVariants> {}
 
 const Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(
    ({ children, className, positions, ...props }, ref) => {
@@ -35,23 +35,23 @@ const Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(
       )
    },
 )
-Timeline.displayName = 'Timeline'
+Timeline.displayName = "Timeline"
 
-const timelineItemVariants = cva('grid items-center gap-x-2', {
+const timelineItemVariants = cva("grid items-center gap-x-2", {
    variants: {
       status: {
-         done: 'text-primary',
-         default: 'text-muted-foreground',
+         done: "text-primary",
+         default: "text-muted-foreground",
       },
    },
    defaultVariants: {
-      status: 'default',
+      status: "default",
    },
 })
 
 interface TimelineItemProps
    extends React.HTMLAttributes<HTMLLIElement>,
-   VariantProps<typeof timelineItemVariants> {}
+      VariantProps<typeof timelineItemVariants> {}
 
 const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
    ({ className, status, ...props }, ref) => (
@@ -62,31 +62,30 @@ const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
       />
    ),
 )
-TimelineItem.displayName = 'TimelineItem'
+TimelineItem.displayName = "TimelineItem"
 
 const timelineDotVariants = cva(
-   'col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current',
+   "col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current",
    {
       variants: {
          status: {
-            default: '[&>*]:hidden',
+            default: "[&>*]:hidden",
             current:
-          '[&>*:not(.lucide-circle)]:hidden [&>.lucide-circle]:fill-current [&>.lucide-circle]:text-current',
-            done: 'bg-primary [&>*:not(.lucide-check)]:hidden [&>.lucide-check]:text-background',
-            error:
-          'border-destructive bg-destructive [&>*:not(.lucide-x)]:hidden [&>.lucide-x]:text-background',
-            custom: '[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block',
+               "[&>*:not(.lucide-circle)]:hidden [&>.lucide-circle]:fill-current [&>.lucide-circle]:text-current",
+            done: "bg-primary [&>*:not(.lucide-check)]:hidden [&>.lucide-check]:text-background",
+            error: "border-destructive bg-destructive [&>*:not(.lucide-x)]:hidden [&>.lucide-x]:text-background",
+            custom: "[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block",
          },
       },
       defaultVariants: {
-         status: 'default',
+         status: "default",
       },
    },
 )
 
 interface TimelineDotProps
    extends React.HTMLAttributes<HTMLDivElement>,
-   VariantProps<typeof timelineDotVariants> {
+      VariantProps<typeof timelineDotVariants> {
    customIcon?: React.ReactNode
 }
 
@@ -94,7 +93,11 @@ const TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(
    ({ className, status, customIcon, ...props }, ref) => (
       <div
          role="status"
-         className={ny('timeline-dot', timelineDotVariants({ status }), className)}
+         className={ny(
+            "timeline-dot",
+            timelineDotVariants({ status }),
+            className,
+         )}
          ref={ref}
          {...props}
       >
@@ -105,26 +108,26 @@ const TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(
       </div>
    ),
 )
-TimelineDot.displayName = 'TimelineDot'
+TimelineDot.displayName = "TimelineDot"
 
 const timelineContentVariants = cva(
-   'row-start-2 row-end-2 pb-8 text-muted-foreground',
+   "row-start-2 row-end-2 pb-8 text-muted-foreground",
    {
       variants: {
          side: {
-            right: 'col-start-3 col-end-4 mr-auto text-left',
-            left: 'col-start-1 col-end-2 ml-auto text-right',
+            right: "col-start-3 col-end-4 mr-auto text-left",
+            left: "col-start-1 col-end-2 ml-auto text-right",
          },
       },
       defaultVariants: {
-         side: 'right',
+         side: "right",
       },
    },
 )
 
 interface TimelineContentProps
    extends React.HTMLAttributes<HTMLDivElement>,
-   VariantProps<typeof timelineContentVariants> {}
+      VariantProps<typeof timelineContentVariants> {}
 
 const TimelineContent = React.forwardRef<HTMLDivElement, TimelineContentProps>(
    ({ className, side, ...props }, ref) => (
@@ -135,31 +138,31 @@ const TimelineContent = React.forwardRef<HTMLDivElement, TimelineContentProps>(
       />
    ),
 )
-TimelineContent.displayName = 'TimelineContent'
+TimelineContent.displayName = "TimelineContent"
 
 const timelineHeadingVariants = cva(
-   'row-start-1 row-end-1 line-clamp-1 max-w-full truncate',
+   "row-start-1 row-end-1 line-clamp-1 max-w-full truncate",
    {
       variants: {
          side: {
-            right: 'col-start-3 col-end-4 mr-auto text-left',
-            left: 'col-start-1 col-end-2 ml-auto text-right',
+            right: "col-start-3 col-end-4 mr-auto text-left",
+            left: "col-start-1 col-end-2 ml-auto text-right",
          },
          variant: {
-            primary: 'text-base font-medium text-primary',
-            secondary: 'text-sm font-light text-muted-foreground',
+            primary: "text-base font-medium text-primary",
+            secondary: "text-sm font-light text-muted-foreground",
          },
       },
       defaultVariants: {
-         side: 'right',
-         variant: 'primary',
+         side: "right",
+         variant: "primary",
       },
    },
 )
 
 interface TimelineHeadingProps
    extends React.HTMLAttributes<HTMLParagraphElement>,
-   VariantProps<typeof timelineHeadingVariants> {}
+      VariantProps<typeof timelineHeadingVariants> {}
 
 const TimelineHeading = React.forwardRef<
    HTMLParagraphElement,
@@ -167,13 +170,13 @@ const TimelineHeading = React.forwardRef<
 >(({ className, side, variant, ...props }, ref) => (
    <p
       role="heading"
-      aria-level={variant === 'primary' ? 2 : 3}
+      aria-level={variant === "primary" ? 2 : 3}
       className={ny(timelineHeadingVariants({ side, variant }), className)}
       ref={ref}
       {...props}
    />
 ))
-TimelineHeading.displayName = 'TimelineHeading'
+TimelineHeading.displayName = "TimelineHeading"
 
 interface TimelineLineProps extends React.HTMLAttributes<HTMLHRElement> {
    done?: boolean
@@ -186,8 +189,8 @@ const TimelineLine = React.forwardRef<HTMLHRElement, TimelineLineProps>(
             role="separator"
             aria-orientation="vertical"
             className={ny(
-               'col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full',
-               done ? 'bg-primary' : 'bg-muted',
+               "col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full",
+               done ? "bg-primary" : "bg-muted",
                className,
             )}
             ref={ref}
@@ -196,7 +199,7 @@ const TimelineLine = React.forwardRef<HTMLHRElement, TimelineLineProps>(
       )
    },
 )
-TimelineLine.displayName = 'TimelineLine'
+TimelineLine.displayName = "TimelineLine"
 
 export {
    Timeline,
diff --git a/apps/web/registry/default/ui/toast.tsx b/apps/web/registry/default/ui/toast.tsx
index a9666f2c..148427ef 100644
--- a/apps/web/registry/default/ui/toast.tsx
+++ b/apps/web/registry/default/ui/toast.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as ToastPrimitives from '@radix-ui/react-toast'
-import { type VariantProps, cva } from 'class-variance-authority'
-import { X } from 'lucide-react'
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { type VariantProps, cva } from "class-variance-authority"
+import { X } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const ToastProvider = ToastPrimitives.Provider
 
@@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
    <ToastPrimitives.Viewport
       ref={ref}
       className={ny(
-         'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+         "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
          className,
       )}
       {...props}
@@ -25,17 +25,17 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-   'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
    {
       variants: {
          variant: {
-            default: 'border bg-background text-foreground',
+            default: "border bg-background text-foreground",
             destructive:
-          'destructive group border-destructive bg-destructive text-destructive-foreground',
+               "destructive group border-destructive bg-destructive text-destructive-foreground",
          },
       },
       defaultVariants: {
-         variant: 'default',
+         variant: "default",
       },
    },
 )
@@ -43,7 +43,7 @@ const toastVariants = cva(
 const Toast = React.forwardRef<
    React.ElementRef<typeof ToastPrimitives.Root>,
    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-   VariantProps<typeof toastVariants>
+      VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
    return (
       <ToastPrimitives.Root
@@ -62,7 +62,7 @@ const ToastAction = React.forwardRef<
    <ToastPrimitives.Action
       ref={ref}
       className={ny(
-         'ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+         "ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
          className,
       )}
       {...props}
@@ -77,7 +77,7 @@ const ToastClose = React.forwardRef<
    <ToastPrimitives.Close
       ref={ref}
       className={ny(
-         'text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+         "text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
          className,
       )}
       toast-close=""
@@ -94,7 +94,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <ToastPrimitives.Title
       ref={ref}
-      className={ny('text-sm font-semibold', className)}
+      className={ny("text-sm font-semibold", className)}
       {...props}
    />
 ))
@@ -106,7 +106,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <ToastPrimitives.Description
       ref={ref}
-      className={ny('text-sm opacity-90', className)}
+      className={ny("text-sm opacity-90", className)}
       {...props}
    />
 ))
diff --git a/apps/web/registry/default/ui/toaster.tsx b/apps/web/registry/default/ui/toaster.tsx
index 736de254..1f682798 100644
--- a/apps/web/registry/default/ui/toaster.tsx
+++ b/apps/web/registry/default/ui/toaster.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client"
 
 import {
    Toast,
@@ -7,8 +7,8 @@ import {
    ToastProvider,
    ToastTitle,
    ToastViewport,
-} from '~/registry/default/ui/toast'
-import { useToast } from '~/registry/default/ui/use-toast'
+} from "~/registry/default/ui/toast"
+import { useToast } from "~/registry/default/ui/use-toast"
 
 export function Toaster() {
    const { toasts } = useToast()
diff --git a/apps/web/registry/default/ui/toc.tsx b/apps/web/registry/default/ui/toc.tsx
index 9d1cee49..b0a53d71 100644
--- a/apps/web/registry/default/ui/toc.tsx
+++ b/apps/web/registry/default/ui/toc.tsx
@@ -1,75 +1,75 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface TableOfContentsListProps
-   extends React.ComponentPropsWithoutRef<'ul'> {
+   extends React.ComponentPropsWithoutRef<"ul"> {
    indent?: boolean
 }
 
 const TableOfContentsList = React.forwardRef<
-   React.ElementRef<'ul'>,
+   React.ElementRef<"ul">,
    TableOfContentsListProps
 >(({ className, indent, ...props }, ref) => (
    <ul
       ref={ref}
-      className={ny('m-0 list-none', indent && 'pl-4', className)}
+      className={ny("m-0 list-none", indent && "pl-4", className)}
       {...props}
    />
 ))
-TableOfContentsList.displayName = 'TableOfContentsList'
+TableOfContentsList.displayName = "TableOfContentsList"
 
 interface TableOfContentsTitleProps
-   extends React.ComponentPropsWithoutRef<'li'> {}
+   extends React.ComponentPropsWithoutRef<"li"> {}
 
 const TableOfContentsTitle = React.forwardRef<
-   React.ElementRef<'li'>,
+   React.ElementRef<"li">,
    TableOfContentsTitleProps
 >(({ className, ...props }, ref) => (
    <li
       ref={ref}
-      className={ny('mb-2 text-sm font-medium', className)}
+      className={ny("mb-2 text-sm font-medium", className)}
       {...props}
    />
 ))
-TableOfContentsTitle.displayName = 'TableOfContentsTitle'
+TableOfContentsTitle.displayName = "TableOfContentsTitle"
 
 interface TableOfContentsItemProps
-   extends React.ComponentPropsWithoutRef<'li'> {
+   extends React.ComponentPropsWithoutRef<"li"> {
    indent?: boolean
 }
 
 const TableOfContentsItem = React.forwardRef<
-   React.ElementRef<'li'>,
+   React.ElementRef<"li">,
    TableOfContentsItemProps
 >(({ className, indent, ...props }, ref) => (
    <li
       ref={ref}
-      className={ny('mt-0 pt-2', indent && 'ml-4', className)}
+      className={ny("mt-0 pt-2", indent && "ml-4", className)}
       {...props}
    />
 ))
-TableOfContentsItem.displayName = 'TableOfContentsItem'
+TableOfContentsItem.displayName = "TableOfContentsItem"
 
-interface TableOfContentsLinkProps extends React.ComponentPropsWithoutRef<'a'> {
+interface TableOfContentsLinkProps extends React.ComponentPropsWithoutRef<"a"> {
    isActive?: boolean
 }
 
 const TableOfContentsLink = React.forwardRef<
-   React.ElementRef<'a'>,
+   React.ElementRef<"a">,
    TableOfContentsLinkProps
 >(({ className, isActive, ...props }, ref) => (
    <a
       ref={ref}
       className={ny(
-         'text-foreground hover:text-primary text-sm font-medium transition-colors',
-         isActive ? 'text-foreground font-medium' : 'text-muted-foreground',
+         "text-foreground hover:text-primary text-sm font-medium transition-colors",
+         isActive ? "text-foreground font-medium" : "text-muted-foreground",
          className,
       )}
       {...props}
    />
 ))
-TableOfContentsLink.displayName = 'TableOfContentsLink'
+TableOfContentsLink.displayName = "TableOfContentsLink"
 
 export {
    TableOfContentsList,
diff --git a/apps/web/registry/default/ui/toggle-group.tsx b/apps/web/registry/default/ui/toggle-group.tsx
index e7d19a2e..e04efef9 100644
--- a/apps/web/registry/default/ui/toggle-group.tsx
+++ b/apps/web/registry/default/ui/toggle-group.tsx
@@ -1,27 +1,27 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
-import type { VariantProps } from 'class-variance-authority'
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import type { VariantProps } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { toggleVariants } from '~/registry/default/ui/toggle'
+import { ny } from "~/lib/utils"
+import { toggleVariants } from "~/registry/default/ui/toggle"
 
 const ToggleGroupContext = React.createContext<
    VariantProps<typeof toggleVariants>
 >({
-   size: 'default',
-   variant: 'default',
+   size: "default",
+   variant: "default",
 })
 
 const ToggleGroup = React.forwardRef<
    React.ElementRef<typeof ToggleGroupPrimitive.Root>,
    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-   VariantProps<typeof toggleVariants>
+      VariantProps<typeof toggleVariants>
 >(({ className, variant, size, children, ...props }, ref) => (
    <ToggleGroupPrimitive.Root
       ref={ref}
-      className={ny('flex items-center justify-center gap-1', className)}
+      className={ny("flex items-center justify-center gap-1", className)}
       {...props}
    >
       <ToggleGroupContext.Provider value={{ variant, size }}>
@@ -35,7 +35,7 @@ ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
 const ToggleGroupItem = React.forwardRef<
    React.ElementRef<typeof ToggleGroupPrimitive.Item>,
    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-   VariantProps<typeof toggleVariants>
+      VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
    const context = React.useContext(ToggleGroupContext)
 
diff --git a/apps/web/registry/default/ui/toggle.tsx b/apps/web/registry/default/ui/toggle.tsx
index c192f8e4..94f75204 100644
--- a/apps/web/registry/default/ui/toggle.tsx
+++ b/apps/web/registry/default/ui/toggle.tsx
@@ -1,29 +1,29 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as TogglePrimitive from '@radix-ui/react-toggle'
-import { type VariantProps, cva } from 'class-variance-authority'
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const toggleVariants = cva(
-   'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
    {
       variants: {
          variant: {
-            default: 'bg-transparent',
+            default: "bg-transparent",
             outline:
-          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+               "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
          },
          size: {
-            default: 'h-10 px-3',
-            sm: 'h-9 px-2.5',
-            lg: 'h-11 px-5',
+            default: "h-10 px-3",
+            sm: "h-9 px-2.5",
+            lg: "h-11 px-5",
          },
       },
       defaultVariants: {
-         variant: 'default',
-         size: 'default',
+         variant: "default",
+         size: "default",
       },
    },
 )
@@ -31,7 +31,7 @@ const toggleVariants = cva(
 const Toggle = React.forwardRef<
    React.ElementRef<typeof TogglePrimitive.Root>,
    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-   VariantProps<typeof toggleVariants>
+      VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
    <TogglePrimitive.Root
       ref={ref}
diff --git a/apps/web/registry/default/ui/tooltip.tsx b/apps/web/registry/default/ui/tooltip.tsx
index 53e4c67f..34338dd3 100644
--- a/apps/web/registry/default/ui/tooltip.tsx
+++ b/apps/web/registry/default/ui/tooltip.tsx
@@ -1,23 +1,23 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-import { type VariantProps, cva } from 'class-variance-authority'
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const tooltipVariants = cva(
-   'z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+   "z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
    {
       variants: {
          variant: {
-            default: 'bg-primary text-primary-foreground',
-            outline: 'border bg-popover text-popover-foreground shadow-md',
-            secondary: 'bg-secondary text-secondary-foreground',
+            default: "bg-primary text-primary-foreground",
+            outline: "border bg-popover text-popover-foreground shadow-md",
+            secondary: "bg-secondary text-secondary-foreground",
          },
       },
       defaultVariants: {
-         variant: 'default',
+         variant: "default",
       },
    },
 )
@@ -32,7 +32,7 @@ const TooltipArrow = TooltipPrimitive.TooltipArrow
 
 export interface TooltipProps
    extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
-   VariantProps<typeof tooltipVariants> {};
+      VariantProps<typeof tooltipVariants> {}
 
 const TooltipContent = React.forwardRef<
    React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -47,4 +47,10 @@ const TooltipContent = React.forwardRef<
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipTrigger, TooltipArrow, TooltipContent, TooltipProvider }
+export {
+   Tooltip,
+   TooltipTrigger,
+   TooltipArrow,
+   TooltipContent,
+   TooltipProvider,
+}
diff --git a/apps/web/registry/default/ui/tour.tsx b/apps/web/registry/default/ui/tour.tsx
index ea722417..cf1e5888 100644
--- a/apps/web/registry/default/ui/tour.tsx
+++ b/apps/web/registry/default/ui/tour.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-'use client'
+"use client"
 import React, {
    createContext,
    useContext,
@@ -7,10 +7,10 @@ import React, {
    useMemo,
    useRef,
    useState,
-} from 'react'
-import { createPortal } from 'react-dom'
+} from "react"
+import { createPortal } from "react-dom"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 export interface TourContext<T extends string> {
    nodes: Map<
@@ -45,16 +45,16 @@ export function TourFactory<T extends string>(order: T[]) {
       show: false,
       current: 0,
       next: () => {
-         console.log('empty')
+         console.log("empty")
       },
       previous: () => {
-         console.log('empty')
+         console.log("empty")
       },
       close: () => {
-         console.log('empty')
+         console.log("empty")
       },
       open: () => {
-         console.log('empty')
+         console.log("empty")
       },
    })
 
@@ -65,7 +65,7 @@ export function TourFactory<T extends string>(order: T[]) {
       const [, forceUpdate] = React.useState({})
 
       const currentElement = useMemo(
-         () => ctx.nodes.get(order[ctx.current] ?? ''),
+         () => ctx.nodes.get(order[ctx.current] ?? ""),
          [ctx],
       )
 
@@ -74,12 +74,12 @@ export function TourFactory<T extends string>(order: T[]) {
             forceUpdate({})
          }
 
-         window.addEventListener('resize', handleResize)
-         window.addEventListener('scroll', handleResize)
+         window.addEventListener("resize", handleResize)
+         window.addEventListener("scroll", handleResize)
 
          return () => {
-            window.removeEventListener('resize', handleResize)
-            window.removeEventListener('scroll', handleResize)
+            window.removeEventListener("resize", handleResize)
+            window.removeEventListener("scroll", handleResize)
          }
       }, [])
 
@@ -101,14 +101,16 @@ export function TourFactory<T extends string>(order: T[]) {
       const closest = (): React.CSSProperties => {
          const isCloseToTop = currentElementRect.top < height
          const isCloseToLeft = currentElementRect.left < width
-         const isCloseToRight
-         = currentElementRect.right > window.innerWidth - width
+         const isCloseToRight =
+            currentElementRect.right > window.innerWidth - width
 
          if (isCloseToLeft) {
             return {
                left: currentElementRect.x + currentElementRect.width,
                top:
-             currentElementRect.y - height / 2 + currentElementRect.height / 2,
+                  currentElementRect.y -
+                  height / 2 +
+                  currentElementRect.height / 2,
             }
          }
 
@@ -116,19 +118,25 @@ export function TourFactory<T extends string>(order: T[]) {
             return {
                left: currentElementRect.x - width,
                top:
-             currentElementRect.y - height / 2 + currentElementRect.height / 2,
+                  currentElementRect.y -
+                  height / 2 +
+                  currentElementRect.height / 2,
             }
          }
 
          if (isCloseToTop) {
             return {
-               left: currentElementRect.x - width / 2 + currentElementRect.width / 2,
+               left:
+                  currentElementRect.x -
+                  width / 2 +
+                  currentElementRect.width / 2,
                top: currentElementRect.y + currentElementRect.height,
             }
          }
 
          return {
-            left: currentElementRect.x - width / 2 + currentElementRect.width / 2,
+            left:
+               currentElementRect.x - width / 2 + currentElementRect.width / 2,
             top: currentElementRect.y - height,
          }
       }
@@ -137,14 +145,14 @@ export function TourFactory<T extends string>(order: T[]) {
          <div
             id="tour"
             className={ny(
-               'pointer-events-auto fixed left-0 top-0 h-screen w-screen transition-none',
-               !ctx.show ? 'invisible' : 'visible',
+               "pointer-events-auto fixed left-0 top-0 h-screen w-screen transition-none",
+               !ctx.show ? "invisible" : "visible",
             )}
          >
             <div
                ref={ref}
                className={ny(
-             `absolute z-50 transition-all duration-500 ease-in-out`,
+                  `absolute z-50 transition-all duration-500 ease-in-out`,
                )}
                style={{
                   ...closest(),
@@ -168,7 +176,7 @@ export function TourFactory<T extends string>(order: T[]) {
 
    return {
       TourProvider: function TourProvider(props: TourProps) {
-         const nodes = useRef<TourContext<T>['nodes']>(new Map())
+         const nodes = useRef<TourContext<T>["nodes"]>(new Map())
 
          const [show, setShow] = useState(false)
          const [current, setCurrent] = useState(0)
@@ -191,12 +199,12 @@ export function TourFactory<T extends string>(order: T[]) {
                   current,
                   show,
                   next: () => {
-                     setCurrent(state =>
+                     setCurrent((state) =>
                         Math.min(getNextIndex(state, 1), order.length - 1),
                      )
                   },
                   previous: () => {
-                     setCurrent(state => Math.max(getNextIndex(state, -1), 0))
+                     setCurrent((state) => Math.max(getNextIndex(state, -1), 0))
                   },
                   close: () => {
                      setShow(false)
diff --git a/apps/web/registry/default/ui/tweet-card.tsx b/apps/web/registry/default/ui/tweet-card.tsx
index 9d8b358b..87b3652f 100644
--- a/apps/web/registry/default/ui/tweet-card.tsx
+++ b/apps/web/registry/default/ui/tweet-card.tsx
@@ -1,12 +1,12 @@
-import { Suspense } from 'react'
+import { Suspense } from "react"
 import {
    type EnrichedTweet,
    type TweetProps,
    type TwitterComponents,
    enrichTweet,
-} from 'react-tweet'
-import { type Tweet, getTweet } from 'react-tweet/api'
-import { ny } from '~/lib/utils'
+} from "react-tweet"
+import { type Tweet, getTweet } from "react-tweet/api"
+import { ny } from "~/lib/utils"
 
 interface TwitterIconProps {
    className?: string
@@ -49,8 +49,7 @@ function Verified({ className, ...props }: TwitterIconProps) {
 }
 
 export function truncate(str: string | null, length: number) {
-   if (!str || str.length <= length)
-      return str
+   if (!str || str.length <= length) return str
    return `${str.slice(0, length - 3)}...`
 }
 
@@ -60,7 +59,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
    return (
       <div
-         className={ny('bg-primary/10 animate-pulse rounded-md', className)}
+         className={ny("bg-primary/10 animate-pulse rounded-md", className)}
          {...props}
       />
    )
@@ -76,7 +75,7 @@ export function TweetSkeleton({
    return (
       <div
          className={ny(
-            'flex size-full max-h-max min-w-72 flex-col gap-2 rounded-lg border p-4',
+            "flex size-full max-h-max min-w-72 flex-col gap-2 rounded-lg border p-4",
             className,
          )}
          {...props}
@@ -100,7 +99,7 @@ export function TweetNotFound({
    return (
       <div
          className={ny(
-            'flex size-full flex-col items-center justify-center gap-2 rounded-lg border p-4',
+            "flex size-full flex-col items-center justify-center gap-2 rounded-lg border p-4",
             className,
          )}
          {...props}
@@ -132,10 +131,10 @@ export function TweetHeader({ tweet }: { tweet: EnrichedTweet }) {
                   className="flex items-center whitespace-nowrap font-semibold"
                >
                   {truncate(tweet.user.name, 20)}
-                  {tweet.user.verified
-                  || (tweet.user.is_blue_verified && (
-                     <Verified className="ml-1 inline size-4 text-blue-500" />
-                  ))}
+                  {tweet.user.verified ||
+                     (tweet.user.is_blue_verified && (
+                        <Verified className="ml-1 inline size-4 text-blue-500" />
+                     ))}
                </a>
                <div className="flex items-center space-x-1">
                   <a
@@ -144,8 +143,7 @@ export function TweetHeader({ tweet }: { tweet: EnrichedTweet }) {
                      rel="noreferrer"
                      className="text-sm text-gray-500 transition-all duration-75"
                   >
-                     @
-                     {truncate(tweet.user.screen_name, 16)}
+                     @{truncate(tweet.user.screen_name, 16)}
                   </a>
                </div>
             </div>
@@ -163,10 +161,10 @@ export function TweetBody({ tweet }: { tweet: EnrichedTweet }) {
       <div className="break-words leading-normal tracking-tighter">
          {tweet.entities.map((entity, idx) => {
             switch (entity.type) {
-               case 'url':
-               case 'symbol':
-               case 'hashtag':
-               case 'mention':
+               case "url":
+               case "symbol":
+               case "hashtag":
+               case "mention":
                   return (
                      <a
                         key={idx}
@@ -178,7 +176,7 @@ export function TweetBody({ tweet }: { tweet: EnrichedTweet }) {
                         <span>{entity.text}</span>
                      </a>
                   )
-               case 'text':
+               case "text":
                   return (
                      <span
                         key={idx}
@@ -211,7 +209,7 @@ export function TweetMedia({ tweet }: { tweet: EnrichedTweet }) {
          {tweet.photos && (
             <div className="relative flex transform-gpu snap-x snap-mandatory gap-4 overflow-x-auto">
                <div className="shrink-0 snap-center sm:w-2" />
-               {tweet.photos.map(photo => (
+               {tweet.photos.map((photo) => (
                   <img
                      key={photo.url}
                      src={photo.url}
@@ -223,18 +221,20 @@ export function TweetMedia({ tweet }: { tweet: EnrichedTweet }) {
                <div className="shrink-0 snap-center sm:w-2" />
             </div>
          )}
-         {!tweet.video
-         && !tweet.photos
-         // @ts-expect-error is fine
-         && tweet?.card?.binding_values?.thumbnail_image_large?.image_value.url && (
-            <img
-               src={
-                  // @ts-expect-error is fine
-                  tweet.card.binding_values.thumbnail_image_large.image_value.url
-               }
-               className="h-64 rounded-xl border object-cover shadow-sm"
-            />
-         )}
+         {!tweet.video &&
+            !tweet.photos &&
+            // @ts-expect-error is fine
+            tweet?.card?.binding_values?.thumbnail_image_large?.image_value
+               .url && (
+               <img
+                  src={
+                     // @ts-expect-error is fine
+                     tweet.card.binding_values.thumbnail_image_large.image_value
+                        .url
+                  }
+                  className="h-64 rounded-xl border object-cover shadow-sm"
+               />
+            )}
       </div>
    )
 }
@@ -253,7 +253,7 @@ export function MagicTweet({
    return (
       <div
          className={ny(
-            'relative flex size-full max-w-lg flex-col gap-2 overflow-hidden rounded-lg border p-4 backdrop-blur-md',
+            "relative flex size-full max-w-lg flex-col gap-2 overflow-hidden rounded-lg border p-4 backdrop-blur-md",
             className,
          )}
          {...props}
@@ -279,10 +279,9 @@ export async function TweetCard({
 }) {
    const tweet = id
       ? await getTweet(id).catch((err) => {
-         if (onError)
-            onError(err)
-         else console.error(err)
-      })
+           if (onError) onError(err)
+           else console.error(err)
+        })
       : undefined
 
    if (!tweet) {
diff --git a/apps/web/registry/default/ui/typing-animation.tsx b/apps/web/registry/default/ui/typing-animation.tsx
index f4cb8732..dc0aca8c 100644
--- a/apps/web/registry/default/ui/typing-animation.tsx
+++ b/apps/web/registry/default/ui/typing-animation.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { useEffect, useState } from 'react'
-import { ny } from '~/lib/utils'
+import { useEffect, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface TypingAnimationProps {
    text: string
@@ -14,7 +14,7 @@ export default function TypingAnimation({
    duration = 200,
    className,
 }: TypingAnimationProps) {
-   const [displayedText, setDisplayedText] = useState<string>('')
+   const [displayedText, setDisplayedText] = useState<string>("")
    const [i, setI] = useState<number>(0)
 
    useEffect(() => {
@@ -22,8 +22,7 @@ export default function TypingAnimation({
          if (i < text.length) {
             setDisplayedText(text.substring(0, i + 1))
             setI(i + 1)
-         }
-         else {
+         } else {
             clearInterval(typingEffect)
          }
       }, duration)
@@ -36,7 +35,7 @@ export default function TypingAnimation({
    return (
       <h1
          className={ny(
-            'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',
+            "font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm",
             className,
          )}
       >
diff --git a/apps/web/registry/default/ui/use-toast.ts b/apps/web/registry/default/ui/use-toast.ts
index eed06953..64e193f8 100644
--- a/apps/web/registry/default/ui/use-toast.ts
+++ b/apps/web/registry/default/ui/use-toast.ts
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
 // Inspired by react-hot-toast library
-import * as React from 'react'
+import * as React from "react"
 
 import type {
    ToastActionElement,
    ToastProps,
-} from '~/registry/default/ui/toast'
+} from "~/registry/default/ui/toast"
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
@@ -19,10 +19,10 @@ type ToasterToast = ToastProps & {
 }
 
 const actionTypes = {
-   ADD_TOAST: 'ADD_TOAST',
-   UPDATE_TOAST: 'UPDATE_TOAST',
-   DISMISS_TOAST: 'DISMISS_TOAST',
-   REMOVE_TOAST: 'REMOVE_TOAST',
+   ADD_TOAST: "ADD_TOAST",
+   UPDATE_TOAST: "UPDATE_TOAST",
+   DISMISS_TOAST: "DISMISS_TOAST",
+   REMOVE_TOAST: "REMOVE_TOAST",
 } as const
 
 let count = 0
@@ -36,21 +36,21 @@ type ActionType = typeof actionTypes
 
 type Action =
    | {
-      type: ActionType['ADD_TOAST']
-      toast: ToasterToast
-   }
+        type: ActionType["ADD_TOAST"]
+        toast: ToasterToast
+     }
    | {
-      type: ActionType['UPDATE_TOAST']
-      toast: Partial<ToasterToast>
-   }
+        type: ActionType["UPDATE_TOAST"]
+        toast: Partial<ToasterToast>
+     }
    | {
-      type: ActionType['DISMISS_TOAST']
-      toastId?: ToasterToast['id']
-   }
+        type: ActionType["DISMISS_TOAST"]
+        toastId?: ToasterToast["id"]
+     }
    | {
-      type: ActionType['REMOVE_TOAST']
-      toastId?: ToasterToast['id']
-   }
+        type: ActionType["REMOVE_TOAST"]
+        toastId?: ToasterToast["id"]
+     }
 
 interface State {
    toasts: ToasterToast[]
@@ -59,13 +59,12 @@ interface State {
 const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 
 function addToRemoveQueue(toastId: string) {
-   if (toastTimeouts.has(toastId))
-      return
+   if (toastTimeouts.has(toastId)) return
 
    const timeout = setTimeout(() => {
       toastTimeouts.delete(toastId)
       dispatch({
-         type: 'REMOVE_TOAST',
+         type: "REMOVE_TOAST",
          toastId,
       })
    }, TOAST_REMOVE_DELAY)
@@ -75,29 +74,28 @@ function addToRemoveQueue(toastId: string) {
 
 export function reducer(state: State, action: Action): State {
    switch (action.type) {
-      case 'ADD_TOAST':
+      case "ADD_TOAST":
          return {
             ...state,
             toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
          }
 
-      case 'UPDATE_TOAST':
+      case "UPDATE_TOAST":
          return {
             ...state,
-            toasts: state.toasts.map(t =>
+            toasts: state.toasts.map((t) =>
                t.id === action.toast.id ? { ...t, ...action.toast } : t,
             ),
          }
 
-      case 'DISMISS_TOAST': {
+      case "DISMISS_TOAST": {
          const { toastId } = action
 
          // ! Side effects ! - This could be extracted into a dismissToast() action,
          // but I'll keep it here for simplicity
          if (toastId) {
             addToRemoveQueue(toastId)
-         }
-         else {
+         } else {
             state.toasts.forEach((toast) => {
                addToRemoveQueue(toast.id)
             })
@@ -105,17 +103,17 @@ export function reducer(state: State, action: Action): State {
 
          return {
             ...state,
-            toasts: state.toasts.map(t =>
+            toasts: state.toasts.map((t) =>
                t.id === toastId || toastId === undefined
                   ? {
-                        ...t,
-                        open: false,
-                     }
+                       ...t,
+                       open: false,
+                    }
                   : t,
             ),
          }
       }
-      case 'REMOVE_TOAST':
+      case "REMOVE_TOAST":
          if (action.toastId === undefined) {
             return {
                ...state,
@@ -124,7 +122,7 @@ export function reducer(state: State, action: Action): State {
          }
          return {
             ...state,
-            toasts: state.toasts.filter(t => t.id !== action.toastId),
+            toasts: state.toasts.filter((t) => t.id !== action.toastId),
          }
    }
 }
@@ -140,27 +138,26 @@ function dispatch(action: Action) {
    })
 }
 
-type Toast = Omit<ToasterToast, 'id'>
+type Toast = Omit<ToasterToast, "id">
 
 function toast({ ...props }: Toast) {
    const id = genId()
 
    const update = (props: ToasterToast) =>
       dispatch({
-         type: 'UPDATE_TOAST',
+         type: "UPDATE_TOAST",
          toast: { ...props, id },
       })
-   const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
 
    dispatch({
-      type: 'ADD_TOAST',
+      type: "ADD_TOAST",
       toast: {
          ...props,
          id,
          open: true,
          onOpenChange: (open) => {
-            if (!open)
-               dismiss()
+            if (!open) dismiss()
          },
       },
    })
@@ -179,15 +176,15 @@ function useToast() {
       listeners.push(setState)
       return () => {
          const index = listeners.indexOf(setState)
-         if (index > -1)
-            listeners.splice(index, 1)
+         if (index > -1) listeners.splice(index, 1)
       }
    }, [state])
 
    return {
       ...state,
       toast,
-      dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+      dismiss: (toastId?: string) =>
+         dispatch({ type: "DISMISS_TOAST", toastId }),
    }
 }
 
diff --git a/apps/web/registry/default/ui/video-modal.tsx b/apps/web/registry/default/ui/video-modal.tsx
index 4bd21c68..95e7fec8 100644
--- a/apps/web/registry/default/ui/video-modal.tsx
+++ b/apps/web/registry/default/ui/video-modal.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { ny } from '~/lib/utils'
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import * as React from "react"
+import { ny } from "~/lib/utils"
 
 const VideoModal = DialogPrimitive.Root
 
@@ -19,7 +19,7 @@ const VideoModalOverlay = React.forwardRef<
    <DialogPrimitive.Overlay
       ref={ref}
       className={ny(
-         'data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in fixed inset-0 z-50 backdrop-blur-xl',
+         "data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in fixed inset-0 z-50 backdrop-blur-xl",
          className,
       )}
       {...props}
@@ -36,8 +36,8 @@ const VideoModalContent = React.forwardRef<
       <DialogPrimitive.Content
          ref={ref}
          className={ny(
-            'fixed left-1/2 top-1/2 z-50 flex h-screen w-screen -translate-x-1/2 -translate-y-1/2 items-center justify-center p-3',
-            'data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] transition-all',
+            "fixed left-1/2 top-1/2 z-50 flex h-screen w-screen -translate-x-1/2 -translate-y-1/2 items-center justify-center p-3",
+            "data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] transition-all",
             className,
          )}
          {...props}
@@ -67,7 +67,7 @@ const VideoModalTitle = React.forwardRef<
    <DialogPrimitive.Title
       ref={ref}
       className={ny(
-         'mb-4 text-4xl font-bold text-gray-950 dark:text-gray-50',
+         "mb-4 text-4xl font-bold text-gray-950 dark:text-gray-50",
          className,
       )}
       {...props}
@@ -82,7 +82,7 @@ const VideoModalDescription = React.forwardRef<
    <DialogPrimitive.Description
       ref={ref}
       className={ny(
-         'mb-6 text-xl text-gray-950/80 dark:text-gray-50/70',
+         "mb-6 text-xl text-gray-950/80 dark:text-gray-50/70",
          className,
       )}
       {...props}
@@ -97,7 +97,7 @@ const VideoPreview = React.forwardRef<
    <div
       ref={ref}
       className={ny(
-         'absolute inset-0 z-10 transition-opacity duration-500 group-[.playing]:pointer-events-none group-[.playing]:opacity-0',
+         "absolute inset-0 z-10 transition-opacity duration-500 group-[.playing]:pointer-events-none group-[.playing]:opacity-0",
          className,
       )}
       {...props}
@@ -105,7 +105,7 @@ const VideoPreview = React.forwardRef<
       {children}
    </div>
 ))
-VideoPreview.displayName = 'VideoPreview'
+VideoPreview.displayName = "VideoPreview"
 
 const VideoPlayButton = React.forwardRef<
    HTMLDivElement,
@@ -114,7 +114,7 @@ const VideoPlayButton = React.forwardRef<
    <div
       ref={ref}
       className={ny(
-         'absolute inset-0 z-20 flex items-center justify-center transition-opacity duration-300 group-[.playing]:pointer-events-none group-[.playing]:opacity-0',
+         "absolute inset-0 z-20 flex items-center justify-center transition-opacity duration-300 group-[.playing]:pointer-events-none group-[.playing]:opacity-0",
          className,
       )}
       {...props}
@@ -122,7 +122,7 @@ const VideoPlayButton = React.forwardRef<
       {children}
    </div>
 ))
-VideoPlayButton.displayName = 'VideoPlayButton'
+VideoPlayButton.displayName = "VideoPlayButton"
 
 const VideoPlayer = React.forwardRef<
    HTMLDivElement,
@@ -134,8 +134,8 @@ const VideoPlayer = React.forwardRef<
       <div
          ref={ref}
          className={ny(
-            'group relative aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover dark:border-gray-50/[.1]',
-            isPlaying && 'playing',
+            "group relative aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover dark:border-gray-50/[.1]",
+            isPlaying && "playing",
             className,
          )}
          onClick={() => setIsPlaying(true)}
@@ -145,7 +145,7 @@ const VideoPlayer = React.forwardRef<
       </div>
    )
 })
-VideoPlayer.displayName = 'VideoPlayer'
+VideoPlayer.displayName = "VideoPlayer"
 
 const VideoModalVideo = React.forwardRef<
    HTMLDivElement,
@@ -154,7 +154,7 @@ const VideoModalVideo = React.forwardRef<
    <div
       ref={ref}
       className={ny(
-         'aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover shadow-xl dark:border-gray-50/[.1]',
+         "aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover shadow-xl dark:border-gray-50/[.1]",
          className,
       )}
       {...props}
@@ -162,7 +162,7 @@ const VideoModalVideo = React.forwardRef<
       {children}
    </div>
 ))
-VideoModalVideo.displayName = 'VideoModalVideo'
+VideoModalVideo.displayName = "VideoModalVideo"
 
 const CloseIcon = React.forwardRef<
    React.ElementRef<typeof VideoModalClose>,
@@ -173,10 +173,10 @@ const CloseIcon = React.forwardRef<
    <VideoModalClose
       ref={ref}
       className={ny(
-         'rounded-full border border-gray-950/[.1] bg-gray-950/[.01] p-2 transition duration-300 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',
+         "rounded-full border border-gray-950/[.1] bg-gray-950/[.01] p-2 transition duration-300 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
          isMobile
-            ? 'absolute right-4 top-4 lg:hidden'
-            : 'hidden self-start lg:block',
+            ? "absolute right-4 top-4 lg:hidden"
+            : "hidden self-start lg:block",
          className,
       )}
       {...props}
@@ -194,14 +194,13 @@ const CloseIcon = React.forwardRef<
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="1.5"
-         >
-         </path>
+         ></path>
       </svg>
       <span className="sr-only">Close</span>
    </VideoModalClose>
 ))
 
-CloseIcon.displayName = 'CloseIcon'
+CloseIcon.displayName = "CloseIcon"
 
 export {
    VideoModal,
diff --git a/apps/web/registry/default/ui/warp-background.tsx b/apps/web/registry/default/ui/warp-background.tsx
new file mode 100644
index 00000000..030a33e1
--- /dev/null
+++ b/apps/web/registry/default/ui/warp-background.tsx
@@ -0,0 +1,151 @@
+import { motion } from "motion/react"
+import type React from "react"
+import { type HTMLAttributes, useCallback, useMemo } from "react"
+import { ny } from "~/registry/default/lib/utils"
+
+interface WarpBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+   children: React.ReactNode
+   perspective?: number
+   beamsPerSide?: number
+   beamSize?: number
+   beamDelayMax?: number
+   beamDelayMin?: number
+   beamDuration?: number
+   gridColor?: string
+}
+
+const Beam = ({
+   width,
+   x,
+   delay,
+   duration,
+}: {
+   width: string | number
+   x: string | number
+   delay: number
+   duration: number
+}) => {
+   const hue = Math.floor(Math.random() * 360)
+   const ar = Math.floor(Math.random() * 10) + 1
+
+   return (
+      <motion.div
+         style={
+            {
+               "--x": `${x}`,
+               "--width": `${width}`,
+               "--aspect-ratio": `${ar}`,
+               "--background": `linear-gradient(hsl(${hue} 80% 60%), transparent)`,
+            } as React.CSSProperties
+         }
+         className={`absolute left-[var(--x)] top-0 [aspect-ratio:1/var(--aspect-ratio)] [background:var(--background)] [width:var(--width)]`}
+         initial={{ y: "100cqmax", x: "-50%" }}
+         animate={{ y: "-100%", x: "-50%" }}
+         transition={{
+            duration,
+            delay,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: "linear",
+         }}
+      />
+   )
+}
+
+export const WarpBackground: React.FC<WarpBackgroundProps> = ({
+   children,
+   perspective = 100,
+   className,
+   beamsPerSide = 3,
+   beamSize = 5,
+   beamDelayMax = 3,
+   beamDelayMin = 0,
+   beamDuration = 3,
+   gridColor = "hsl(var(--border))",
+   ...props
+}) => {
+   const generateBeams = useCallback(() => {
+      const beams = []
+      const cellsPerSide = Math.floor(100 / beamSize)
+      const step = cellsPerSide / beamsPerSide
+
+      for (let i = 0; i < beamsPerSide; i++) {
+         const x = Math.floor(i * step)
+         const delay =
+            Math.random() * (beamDelayMax - beamDelayMin) + beamDelayMin
+         beams.push({ x, delay })
+      }
+      return beams
+   }, [beamsPerSide, beamSize, beamDelayMax, beamDelayMin])
+
+   const topBeams = useMemo(() => generateBeams(), [generateBeams])
+   const rightBeams = useMemo(() => generateBeams(), [generateBeams])
+   const bottomBeams = useMemo(() => generateBeams(), [generateBeams])
+   const leftBeams = useMemo(() => generateBeams(), [generateBeams])
+
+   return (
+      <div className={ny("relative rounded border p-20", className)} {...props}>
+         <div
+            style={
+               {
+                  "--perspective": `${perspective}px`,
+                  "--grid-color": gridColor,
+                  "--beam-size": `${beamSize}%`,
+               } as React.CSSProperties
+            }
+            className={
+               "pointer-events-none absolute left-0 top-0 size-full overflow-hidden [clip-path:inset(0)] [container-type:size] [perspective:var(--perspective)] [transform-style:preserve-3d]"
+            }
+         >
+            {/* top side */}
+            <div className="absolute [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]">
+               {topBeams.map((beam, index) => (
+                  <Beam
+                     key={`top-${index}`}
+                     width={`${beamSize}%`}
+                     x={`${beam.x * beamSize}%`}
+                     delay={beam.delay}
+                     duration={beamDuration}
+                  />
+               ))}
+            </div>
+            {/* bottom side */}
+            <div className="absolute top-full [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]">
+               {bottomBeams.map((beam, index) => (
+                  <Beam
+                     key={`bottom-${index}`}
+                     width={`${beamSize}%`}
+                     x={`${beam.x * beamSize}%`}
+                     delay={beam.delay}
+                     duration={beamDuration}
+                  />
+               ))}
+            </div>
+            {/* left side */}
+            <div className="absolute left-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:0%_0%] [transform:rotate(90deg)_rotateX(-90deg)] [width:100cqh]">
+               {leftBeams.map((beam, index) => (
+                  <Beam
+                     key={`left-${index}`}
+                     width={`${beamSize}%`}
+                     x={`${beam.x * beamSize}%`}
+                     delay={beam.delay}
+                     duration={beamDuration}
+                  />
+               ))}
+            </div>
+            {/* right side */}
+            <div className="absolute right-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [width:100cqh] [transform-origin:100%_0%] [transform:rotate(-90deg)_rotateX(-90deg)]">
+               {rightBeams.map((beam, index) => (
+                  <Beam
+                     key={`right-${index}`}
+                     width={`${beamSize}%`}
+                     x={`${beam.x * beamSize}%`}
+                     delay={beam.delay}
+                     duration={beamDuration}
+                  />
+               ))}
+            </div>
+         </div>
+         <div className="relative">{children}</div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/default/ui/wavy-dot-pattern.tsx b/apps/web/registry/default/ui/wavy-dot-pattern.tsx
deleted file mode 100644
index 258c32c9..00000000
--- a/apps/web/registry/default/ui/wavy-dot-pattern.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-import { useState } from 'react'
-import { anime } from 'react-anime'
-import { ny } from '~/lib/utils'
-
-interface WavyDotPatternProps {
-   className?: string
-   gridWidth?: number
-   gridHeight?: number
-   dotWidth?: number
-   dotHeight?: number
-}
-
-export function WavyDotPattern({
-   className,
-   gridWidth,
-   gridHeight,
-   dotWidth,
-   dotHeight,
-}: WavyDotPatternProps) {
-   const [dotClickDisabled, setDotClickDisabled] = useState<boolean>(false)
-
-   const handleDotClick = (e: any, width: number, height: number) => {
-      setDotClickDisabled(true)
-
-      anime({
-         targets: '.dot-point',
-         scale: [
-            { value: 1.35, easing: 'easeOutSine', duration: 250 },
-            { value: 1, easing: 'easeInOutQuad', duration: 500 },
-         ],
-         translateY: [
-            { value: -15, easing: 'easeOutSine', duration: 250 },
-            { value: 1, easing: 'easeInOutQuad', duration: 500 },
-         ],
-         opacity: [
-            { value: 0.7, easing: 'easeOutSine', duration: 250 },
-            { value: 0.35, easing: 'easeInOutQuad', duration: 500 },
-         ],
-         delay: anime.stagger(100, {
-            grid: [width, height],
-            from: e.target.dataset.index,
-         }),
-      })
-
-      setTimeout(() => setDotClickDisabled(false), 2000)
-   }
-
-   const GRID_WIDTH = gridWidth || 30
-   const GRID_HEIGHT = gridHeight || 30
-
-   const DOT_WIDTH = dotWidth ? `w-[${dotWidth}px]` : 'w-[8px]'
-   const DOT_HEIGHT = dotHeight ? `h-[${dotHeight}px]` : 'h-[8px]'
-
-   let index = 0
-
-   const dots = []
-
-   for (let i = 0; i < GRID_WIDTH; i++) {
-      for (let j = 0; j < GRID_HEIGHT; j++) {
-         dots.push(
-            <button
-               className="rounded-[8px] p-[0.8rem]"
-               type="button"
-               onClick={e => handleDotClick(e, GRID_WIDTH, GRID_HEIGHT)}
-               data-index={index}
-               key={`${i}-${j}`}
-               disabled={dotClickDisabled}
-            >
-               <div
-                  className={ny(
-                     'dot-point',
-                     'rounded-xl bg-gradient-to-r from-[#d9cab3] to-black opacity-35 hover:from-black hover:to-black hover:opacity-100',
-                     DOT_WIDTH,
-                     DOT_HEIGHT,
-                  )}
-                  data-index={index}
-               />
-            </button>,
-         )
-         index++
-      }
-   }
-
-   return (
-      <div
-         style={{ gridTemplateColumns: `repeat(${GRID_WIDTH}, 1fr)` }}
-         className={ny('max-w-3/4 absolute z-0 grid', className)}
-      >
-         {dots.map(dot => dot)}
-      </div>
-   )
-}
-
-export default WavyDotPattern
diff --git a/apps/web/registry/default/ui/wavy-text.tsx b/apps/web/registry/default/ui/wavy-text.tsx
index 1a4c93ca..6e4f5b46 100644
--- a/apps/web/registry/default/ui/wavy-text.tsx
+++ b/apps/web/registry/default/ui/wavy-text.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { AnimatePresence, motion } from 'framer-motion'
-import { useMemo } from 'react'
-import { ny } from '~/lib/utils'
+import { AnimatePresence, motion } from "framer-motion"
+import { useMemo } from "react"
+import { ny } from "~/lib/utils"
 
 interface WavyTextProps {
    word: string
@@ -26,7 +26,7 @@ function WavyText({
       visible: { y: -10 },
    }
    const combinedVariants = variant || defaultVariants
-   const characters = useMemo(() => word.split(''), [word])
+   const characters = useMemo(() => word.split(""), [word])
    return (
       <div className="flex justify-center space-x-2 overflow-hidden p-3">
          <AnimatePresence>
@@ -38,13 +38,13 @@ function WavyText({
                   exit="hidden"
                   variants={combinedVariants}
                   transition={{
-                     yoyo: Infinity,
+                     yoyo: Number.POSITIVE_INFINITY,
                      duration,
                      delay: i * delay,
                   }}
                   className={ny(
                      className,
-                     'font-display text-center text-4xl font-bold tracking-[-0.15em] md:text-7xl',
+                     "font-display text-center text-4xl font-bold tracking-[-0.15em] md:text-7xl",
                   )}
                >
                   {char}
diff --git a/apps/web/registry/default/ui/word-fade-in.tsx b/apps/web/registry/default/ui/word-fade-in.tsx
index fb9e30d8..94bd42bb 100644
--- a/apps/web/registry/default/ui/word-fade-in.tsx
+++ b/apps/web/registry/default/ui/word-fade-in.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import type { Variants } from 'framer-motion'
-import { motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import type { Variants } from "framer-motion"
+import { motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface WordFadeInProps {
    words: string
@@ -24,7 +24,7 @@ export default function WordFadeIn({
    },
    className,
 }: WordFadeInProps) {
-   const _words = words.split(' ')
+   const _words = words.split(" ")
 
    return (
       <motion.h1
@@ -32,14 +32,13 @@ export default function WordFadeIn({
          initial="hidden"
          animate="visible"
          className={ny(
-            'font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white',
+            "font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white",
             className,
          )}
       >
          {_words.map((word, i) => (
             <motion.span key={word} variants={variants} custom={i}>
-               {word}
-               {' '}
+               {word}{" "}
             </motion.span>
          ))}
       </motion.h1>
diff --git a/apps/web/registry/default/ui/word-pull-up.tsx b/apps/web/registry/default/ui/word-pull-up.tsx
index c8caa1f4..a0136db8 100644
--- a/apps/web/registry/default/ui/word-pull-up.tsx
+++ b/apps/web/registry/default/ui/word-pull-up.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import type { Variants } from 'framer-motion'
-import { motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import type { Variants } from "framer-motion"
+import { motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface WordPullUpProps {
    words: string
@@ -35,17 +35,17 @@ export default function WordPullUp({
          initial="hidden"
          animate="show"
          className={ny(
-            'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',
+            "font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm",
             className,
          )}
       >
-         {words.split(' ').map((word, i) => (
+         {words.split(" ").map((word, i) => (
             <motion.span
                key={i}
                variants={framerProps}
-               style={{ display: 'inline-block', paddingRight: '8px' }}
+               style={{ display: "inline-block", paddingRight: "8px" }}
             >
-               {word === '' ? <span>&nbsp;</span> : word}
+               {word === "" ? <span>&nbsp;</span> : word}
             </motion.span>
          ))}
       </motion.h1>
diff --git a/apps/web/registry/default/ui/word-rotate.tsx b/apps/web/registry/default/ui/word-rotate.tsx
index d0b41b4b..8bd53798 100644
--- a/apps/web/registry/default/ui/word-rotate.tsx
+++ b/apps/web/registry/default/ui/word-rotate.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import type { HTMLMotionProps } from 'framer-motion'
-import { AnimatePresence, motion } from 'framer-motion'
-import { useEffect, useState } from 'react'
-import { ny } from '~/lib/utils'
+import type { HTMLMotionProps } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
+import { useEffect, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface WordRotateProps {
    words: string[]
    duration?: number
-   framerProps?: HTMLMotionProps<'h1'>
+   framerProps?: HTMLMotionProps<"h1">
    className?: string
 }
 
@@ -19,7 +19,7 @@ export default function WordRotate({
       initial: { opacity: 0, y: -50 },
       animate: { opacity: 1, y: 0 },
       exit: { opacity: 0, y: 50 },
-      transition: { duration: 0.25, ease: 'easeOut' },
+      transition: { duration: 0.25, ease: "easeOut" },
    },
    className,
 }: WordRotateProps) {
@@ -27,7 +27,7 @@ export default function WordRotate({
 
    useEffect(() => {
       const interval = setInterval(() => {
-         setIndex(prevIndex => (prevIndex + 1) % words.length)
+         setIndex((prevIndex) => (prevIndex + 1) % words.length)
       }, duration)
 
       // Clean up interval on unmount
diff --git a/apps/web/registry/default/v0/sidebar-16.tsx b/apps/web/registry/default/v0/sidebar-16.tsx
new file mode 100644
index 00000000..b0e83a30
--- /dev/null
+++ b/apps/web/registry/default/v0/sidebar-16.tsx
@@ -0,0 +1,674 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   BookOpen,
+   Bot,
+   ChevronRight,
+   ChevronsUpDown,
+   Command,
+   CreditCard,
+   Folder,
+   Frame,
+   LifeBuoy,
+   LogOut,
+   Map,
+   MoreHorizontal,
+   PieChart,
+   Send,
+   Settings2,
+   Share,
+   Sparkles,
+   SquareTerminal,
+   Trash2,
+} from "lucide-react"
+import Link from "next/link"
+import * as React from "react"
+
+import { Icons } from "~/components/icons"
+import { ny } from "~/lib/utils"
+import {
+   Avatar,
+   AvatarFallback,
+   AvatarImage,
+} from "~/registry/default/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/default/ui/breadcrumb"
+import { Button } from "~/registry/default/ui/button"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/default/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/default/ui/dropdown-menu"
+import {
+   NavigationMenu,
+   NavigationMenuContent,
+   NavigationMenuItem,
+   NavigationMenuLink,
+   NavigationMenuList,
+   NavigationMenuTrigger,
+   navigationMenuTriggerStyle,
+} from "~/registry/default/ui/navigation-menu"
+import { Separator } from "~/registry/default/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "An inset sidebar with site header navigation."
+
+const HEADER_HEIGHT = "4rem"
+
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Support",
+         url: "#",
+         icon: LifeBuoy,
+      },
+      {
+         title: "Feedback",
+         url: "#",
+         icon: Send,
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+const components: { title: string; href: string; description: string }[] = [
+   {
+      title: "Alert Dialog",
+      href: "/docs/primitives/alert-dialog",
+      description:
+         "A modal dialog that interrupts the user with important content and expects a response.",
+   },
+   {
+      title: "Hover Card",
+      href: "/docs/primitives/hover-card",
+      description:
+         "For sighted users to preview content available behind a link.",
+   },
+   {
+      title: "Progress",
+      href: "/docs/primitives/progress",
+      description:
+         "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+   },
+   {
+      title: "Scroll-area",
+      href: "/docs/primitives/scroll-area",
+      description: "Visually or semantically separates content.",
+   },
+   {
+      title: "Tabs",
+      href: "/docs/primitives/tabs",
+      description:
+         "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+   },
+   {
+      title: "Tooltip",
+      href: "/docs/primitives/tooltip",
+      description:
+         "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+   },
+]
+
+export default function Page() {
+   const [open, setOpen] = React.useState(true)
+   const { isMobile } = useSidebar()
+
+   return (
+      <div
+         style={
+            {
+               "--header-height": HEADER_HEIGHT,
+            } as React.CSSProperties
+         }
+      >
+         <header className="sticky top-0 bg-sidebar flex h-[--header-height] shrink-0 items-center gap-2 border-b px-4 isolate z-20">
+            <div className="flex items-center gap-2 w-full">
+               <Button
+                  className="hidden md:flex"
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setOpen(!open)}
+               >
+                  <Sidebar />
+               </Button>
+
+               <div className="mx-auto flex items-center gap-2">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                     <Command className="size-4" />
+                  </div>
+                  <Separator orientation="vertical" className="ml-4 h-4" />
+                  <NavigationMenu>
+                     <NavigationMenuList>
+                        <NavigationMenuItem>
+                           <NavigationMenuTrigger className="bg-sidebar">
+                              Getting started
+                           </NavigationMenuTrigger>
+                           <NavigationMenuContent>
+                              <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                                 <li className="row-span-3">
+                                    <NavigationMenuLink asChild>
+                                       <a
+                                          className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                                          href="/"
+                                       >
+                                          <Icons.logo className="h-6 w-6" />
+                                          <div className="mb-2 mt-4 text-lg font-medium">
+                                             nyxb/ui
+                                          </div>
+                                          <p className="text-sm leading-tight text-muted-foreground">
+                                             Beautifully designed components
+                                             built with Radix UI and Tailwind
+                                             CSS.
+                                          </p>
+                                       </a>
+                                    </NavigationMenuLink>
+                                 </li>
+
+                                 <li>
+                                    <NavigationMenuLink asChild>
+                                       <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                                          <div className="text-sm font-medium leading-none">
+                                             Introduction
+                                          </div>
+                                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                             Re-usable components built using
+                                             Radix UI and Tailwind CSS.
+                                          </p>
+                                       </a>
+                                    </NavigationMenuLink>
+                                 </li>
+
+                                 <li>
+                                    <NavigationMenuLink asChild>
+                                       <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                                          <div className="text-sm font-medium leading-none">
+                                             Installation
+                                          </div>
+                                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                             How to install dependencies and
+                                             structure your app.
+                                          </p>
+                                       </a>
+                                    </NavigationMenuLink>
+                                 </li>
+
+                                 <li>
+                                    <NavigationMenuLink asChild>
+                                       <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                                          <div className="text-sm font-medium leading-none">
+                                             Typography
+                                          </div>
+                                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                             Styles for headings, paragraphs,
+                                             lists...etc
+                                          </p>
+                                       </a>
+                                    </NavigationMenuLink>
+                                 </li>
+                              </ul>
+                           </NavigationMenuContent>
+                        </NavigationMenuItem>
+                        <NavigationMenuItem>
+                           <NavigationMenuTrigger className="bg-sidebar">
+                              Components
+                           </NavigationMenuTrigger>
+                           <NavigationMenuContent>
+                              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                                 {components.map((component) => (
+                                    <li>
+                                       <NavigationMenuLink
+                                          key={component.title}
+                                          asChild
+                                       >
+                                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                                             <div className="text-sm font-medium leading-none">
+                                                {component.title}
+                                             </div>
+                                             <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                                {component.description}
+                                             </p>
+                                          </a>
+                                       </NavigationMenuLink>
+                                    </li>
+                                 ))}
+                              </ul>
+                           </NavigationMenuContent>
+                        </NavigationMenuItem>
+                        <NavigationMenuItem>
+                           <Link href="/docs" legacyBehavior passHref>
+                              <NavigationMenuLink
+                                 className={ny(
+                                    navigationMenuTriggerStyle(),
+                                    "bg-sidebar",
+                                 )}
+                              >
+                                 Documentation
+                              </NavigationMenuLink>
+                           </Link>
+                        </NavigationMenuItem>
+                     </NavigationMenuList>
+                  </NavigationMenu>
+               </div>
+            </div>
+         </header>
+         <SidebarProvider open={open} onOpenChange={setOpen}>
+            <Sidebar
+               className="top-[--header-height] pb-[--header-height]"
+               variant="inset"
+            >
+               <SidebarHeader>
+                  <SidebarMenu>
+                     <SidebarMenuItem>
+                        <SidebarMenuButton size="lg" asChild>
+                           <a href="#">
+                              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                                 <Command className="size-4" />
+                              </div>
+                              <div className="grid flex-1 text-left text-sm leading-tight">
+                                 <span className="truncate font-semibold">
+                                    Acme Inc
+                                 </span>
+                                 <span className="truncate text-xs">
+                                    Enterprise
+                                 </span>
+                              </div>
+                           </a>
+                        </SidebarMenuButton>
+                     </SidebarMenuItem>
+                  </SidebarMenu>
+               </SidebarHeader>
+               <SidebarContent>
+                  <SidebarGroup>
+                     <SidebarGroupLabel>Platform</SidebarGroupLabel>
+                     <SidebarMenu>
+                        {data.navMain.map((item) => (
+                           <Collapsible
+                              key={item.title}
+                              asChild
+                              defaultOpen={item.isActive}
+                           >
+                              <SidebarMenuItem>
+                                 <SidebarMenuButton
+                                    asChild
+                                    tooltip={item.title}
+                                 >
+                                    <a href={item.url}>
+                                       <item.icon />
+                                       <span>{item.title}</span>
+                                    </a>
+                                 </SidebarMenuButton>
+                                 {item.items?.length ? (
+                                    <>
+                                       <CollapsibleTrigger asChild>
+                                          <SidebarMenuAction className="data-[state=open]:rotate-90">
+                                             <ChevronRight />
+                                             <span className="sr-only">
+                                                Toggle
+                                             </span>
+                                          </SidebarMenuAction>
+                                       </CollapsibleTrigger>
+                                       <CollapsibleContent>
+                                          <SidebarMenuSub>
+                                             {item.items?.map((subItem) => (
+                                                <SidebarMenuSubItem
+                                                   key={subItem.title}
+                                                >
+                                                   <SidebarMenuSubButton
+                                                      asChild
+                                                   >
+                                                      <a href={subItem.url}>
+                                                         <span>
+                                                            {subItem.title}
+                                                         </span>
+                                                      </a>
+                                                   </SidebarMenuSubButton>
+                                                </SidebarMenuSubItem>
+                                             ))}
+                                          </SidebarMenuSub>
+                                       </CollapsibleContent>
+                                    </>
+                                 ) : null}
+                              </SidebarMenuItem>
+                           </Collapsible>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroup>
+                  <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+                     <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                     <SidebarMenu>
+                        {data.projects.map((item) => (
+                           <SidebarMenuItem key={item.name}>
+                              <SidebarMenuButton asChild>
+                                 <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.name}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                              <DropdownMenu>
+                                 <DropdownMenuTrigger asChild>
+                                    <SidebarMenuAction showOnHover>
+                                       <MoreHorizontal />
+                                       <span className="sr-only">More</span>
+                                    </SidebarMenuAction>
+                                 </DropdownMenuTrigger>
+                                 <DropdownMenuContent
+                                    className="w-48"
+                                    side={isMobile ? "bottom" : "right"}
+                                    align={isMobile ? "end" : "start"}
+                                 >
+                                    <DropdownMenuItem>
+                                       <Folder className="text-muted-foreground" />
+                                       <span>View Project</span>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem>
+                                       <Share className="text-muted-foreground" />
+                                       <span>Share Project</span>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem>
+                                       <Trash2 className="text-muted-foreground" />
+                                       <span>Delete Project</span>
+                                    </DropdownMenuItem>
+                                 </DropdownMenuContent>
+                              </DropdownMenu>
+                           </SidebarMenuItem>
+                        ))}
+                        <SidebarMenuItem>
+                           <SidebarMenuButton>
+                              <MoreHorizontal />
+                              <span>More</span>
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                     </SidebarMenu>
+                  </SidebarGroup>
+                  <SidebarGroup className="mt-auto">
+                     <SidebarGroupContent>
+                        <SidebarMenu>
+                           {data.navSecondary.map((item) => (
+                              <SidebarMenuItem key={item.title}>
+                                 <SidebarMenuButton asChild size="sm">
+                                    <a href={item.url}>
+                                       <item.icon />
+                                       <span>{item.title}</span>
+                                    </a>
+                                 </SidebarMenuButton>
+                              </SidebarMenuItem>
+                           ))}
+                        </SidebarMenu>
+                     </SidebarGroupContent>
+                  </SidebarGroup>
+               </SidebarContent>
+               <SidebarFooter>
+                  <SidebarMenu>
+                     <SidebarMenuItem>
+                        <DropdownMenu>
+                           <DropdownMenuTrigger asChild>
+                              <SidebarMenuButton
+                                 size="lg"
+                                 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                              >
+                                 <Avatar className="h-8 w-8 rounded-lg">
+                                    <AvatarImage
+                                       src={data.user.avatar}
+                                       alt={data.user.name}
+                                    />
+                                    <AvatarFallback className="rounded-lg">
+                                       ny
+                                    </AvatarFallback>
+                                 </Avatar>
+                                 <div className="grid flex-1 text-left text-sm leading-tight">
+                                    <span className="truncate font-semibold">
+                                       {data.user.name}
+                                    </span>
+                                    <span className="truncate text-xs">
+                                       {data.user.email}
+                                    </span>
+                                 </div>
+                                 <ChevronsUpDown className="ml-auto size-4" />
+                              </SidebarMenuButton>
+                           </DropdownMenuTrigger>
+                           <DropdownMenuContent
+                              className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                              side={isMobile ? "bottom" : "right"}
+                              align="end"
+                              sideOffset={4}
+                           >
+                              <DropdownMenuLabel className="p-0 font-normal">
+                                 <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                    <Avatar className="h-8 w-8 rounded-lg">
+                                       <AvatarImage
+                                          src={data.user.avatar}
+                                          alt={data.user.name}
+                                       />
+                                       <AvatarFallback className="rounded-lg">
+                                          ny
+                                       </AvatarFallback>
+                                    </Avatar>
+                                    <div className="grid flex-1 text-left text-sm leading-tight">
+                                       <span className="truncate font-semibold">
+                                          {data.user.name}
+                                       </span>
+                                       <span className="truncate text-xs">
+                                          {data.user.email}
+                                       </span>
+                                    </div>
+                                 </div>
+                              </DropdownMenuLabel>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuGroup>
+                                 <DropdownMenuItem>
+                                    <Sparkles />
+                                    Upgrade to Pro
+                                 </DropdownMenuItem>
+                              </DropdownMenuGroup>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuGroup>
+                                 <DropdownMenuItem>
+                                    <BadgeCheck />
+                                    Account
+                                 </DropdownMenuItem>
+                                 <DropdownMenuItem>
+                                    <CreditCard />
+                                    Billing
+                                 </DropdownMenuItem>
+                                 <DropdownMenuItem>
+                                    <Bell />
+                                    Notifications
+                                 </DropdownMenuItem>
+                              </DropdownMenuGroup>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem>
+                                 <LogOut />
+                                 Log out
+                              </DropdownMenuItem>
+                           </DropdownMenuContent>
+                        </DropdownMenu>
+                     </SidebarMenuItem>
+                  </SidebarMenu>
+               </SidebarFooter>
+            </Sidebar>
+
+            <SidebarInset>
+               <header className=" flex shrink-0 items-center gap-2 border-b py-2">
+                  <div className="flex items-center gap-2 px-4 py-2">
+                     <div className="flex md:hidden items-center gap-2">
+                        <SidebarTrigger />
+                        <Separator
+                           orientation="vertical"
+                           className="mr-2 h-4"
+                        />
+                     </div>
+                     <Breadcrumb>
+                        <BreadcrumbList>
+                           <BreadcrumbItem className="hidden md:block">
+                              <BreadcrumbLink href="#">
+                                 Building Your Application
+                              </BreadcrumbLink>
+                           </BreadcrumbItem>
+                           <BreadcrumbSeparator className="hidden md:block" />
+                           <BreadcrumbItem>
+                              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                           </BreadcrumbItem>
+                        </BreadcrumbList>
+                     </Breadcrumb>
+                  </div>
+               </header>
+               <div className="flex flex-1 flex-col gap-4 p-4">
+                  <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                     <div className="aspect-video rounded-xl bg-muted/50" />
+                     <div className="aspect-video rounded-xl bg-muted/50" />
+                     <div className="aspect-video rounded-xl bg-muted/50" />
+                  </div>
+                  <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+               </div>
+            </SidebarInset>
+         </SidebarProvider>
+      </div>
+   )
+}
diff --git a/apps/web/registry/index.ts b/apps/web/registry/index.ts
index d955f8a4..f294c50d 100644
--- a/apps/web/registry/index.ts
+++ b/apps/web/registry/index.ts
@@ -1,18 +1,27 @@
-import { charts } from './registry-charts'
-import { examples } from './registry-examples'
-import { hooks } from './registry-hooks'
-import { lib } from './registry-lib'
-import { themes } from './registry-themes'
-import { ui } from './registry-ui'
-import type { Registry } from './schema'
-import { blocks } from './registry-blocks'
+import type { Registry } from "nyxb/registry"
 
-export const registry: Registry = [
-   ...ui,
-   ...examples,
-   ...blocks,
-   ...charts,
-   ...lib,
-   ...hooks,
-   ...themes,
-]
+import { blocks } from "~/registry/registry-blocks"
+import { charts } from "~/registry/registry-charts"
+import { examples } from "~/registry/registry-examples"
+import { hooks } from "~/registry/registry-hooks"
+import { internal } from "~/registry/registry-internal"
+import { lib } from "~/registry/registry-lib"
+import { themes } from "~/registry/registry-themes"
+import { ui } from "~/registry/registry-ui"
+
+export const registry = {
+   name: "nyxb/ui",
+   homepage: "https://nyxbui.design",
+   items: [
+      ...ui,
+      ...blocks,
+      ...charts,
+      ...lib,
+      ...hooks,
+      ...themes,
+
+      // Internal use only.
+      ...internal,
+      ...examples,
+   ],
+} satisfies Registry
diff --git a/apps/web/registry/miami/block/_sink/components/accordion-demo.tsx b/apps/web/registry/miami/block/_sink/components/accordion-demo.tsx
deleted file mode 100644
index fa8188f9..00000000
--- a/apps/web/registry/miami/block/_sink/components/accordion-demo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-   Accordion,
-   AccordionContent,
-   AccordionItem,
-   AccordionTrigger,
-} from '~/registry/miami/ui/accordion'
-
-export function AccordionDemo() {
-   return (
-      <Accordion type="single" collapsible className="w-full">
-         <AccordionItem value="item-1">
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>
-               Yes. It adheres to the WAI-ARIA design pattern.
-            </AccordionContent>
-         </AccordionItem>
-         <AccordionItem value="item-2">
-            <AccordionTrigger>Is it styled?</AccordionTrigger>
-            <AccordionContent>
-               Yes. It comes with default styles that matches the other
-               components&apos; aesthetic.
-            </AccordionContent>
-         </AccordionItem>
-         <AccordionItem value="item-3">
-            <AccordionTrigger>Is it animated?</AccordionTrigger>
-            <AccordionContent>
-               Yes. It's animated by default, but you can disable it if you prefer.
-            </AccordionContent>
-         </AccordionItem>
-      </Accordion>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/alert-demo.tsx b/apps/web/registry/miami/block/_sink/components/alert-demo.tsx
deleted file mode 100644
index 32c9e742..00000000
--- a/apps/web/registry/miami/block/_sink/components/alert-demo.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Terminal } from 'lucide-react'
-
-import {
-   Alert,
-   AlertDescription,
-   AlertTitle,
-} from '~/registry/miami/ui/alert'
-
-export function AlertDemo() {
-   return (
-      <Alert>
-         <Terminal className="size-4" />
-         <AlertTitle>Heads up!</AlertTitle>
-         <AlertDescription>
-            You can add components to your app using the cli.
-         </AlertDescription>
-      </Alert>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/alert-dialog-demo.tsx b/apps/web/registry/miami/block/_sink/components/alert-dialog-demo.tsx
deleted file mode 100644
index f41fc956..00000000
--- a/apps/web/registry/miami/block/_sink/components/alert-dialog-demo.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {
-   AlertDialog,
-   AlertDialogAction,
-   AlertDialogCancel,
-   AlertDialogContent,
-   AlertDialogDescription,
-   AlertDialogFooter,
-   AlertDialogHeader,
-   AlertDialogTitle,
-   AlertDialogTrigger,
-} from '~/registry/miami/ui/alert-dialog'
-import { Button } from '~/registry/miami/ui/button'
-
-export function AlertDialogDemo() {
-   return (
-      <AlertDialog>
-         <AlertDialogTrigger asChild>
-            <Button variant="outline">Show Dialog</Button>
-         </AlertDialogTrigger>
-         <AlertDialogContent>
-            <AlertDialogHeader>
-               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-               <AlertDialogDescription>
-                  This action cannot be undone. This will permanently delete your
-                  account and remove your data from our servers.
-               </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-               <AlertDialogCancel>Cancel</AlertDialogCancel>
-               <AlertDialogAction>Continue</AlertDialogAction>
-            </AlertDialogFooter>
-         </AlertDialogContent>
-      </AlertDialog>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/app-sidebar copy.tsx b/apps/web/registry/miami/block/_sink/components/app-sidebar copy.tsx
deleted file mode 100644
index 50671c34..00000000
--- a/apps/web/registry/miami/block/_sink/components/app-sidebar copy.tsx	
+++ /dev/null
@@ -1,175 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   AudioWaveform,
-   BookOpen,
-   Bot,
-   Command,
-   Frame,
-   GalleryVerticalEnd,
-   Map,
-   PieChart,
-   Settings2,
-   SquareTerminal,
-} from 'lucide-react'
-
-import { NavMain } from '~/registry/miami/block/_sink/components/nav-main'
-import { NavProjects } from '~/registry/miami/block/_sink/components/nav-projects'
-import { NavUser } from '~/registry/miami/block/_sink/components/nav-user'
-import { TeamSwitcher } from '~/registry/miami/block/_sink/components/team-switcher'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarRail,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   teams: [
-      {
-         name: 'Acme Inc',
-         logo: GalleryVerticalEnd,
-         plan: 'Enterprise',
-      },
-      {
-         name: 'Acme Corp.',
-         logo: AudioWaveform,
-         plan: 'Startup',
-      },
-      {
-         name: 'Evil Corp.',
-         logo: Command,
-         plan: 'Free',
-      },
-   ],
-   navMain: [
-      {
-         title: 'Playground',
-         url: '#',
-         icon: SquareTerminal,
-         isActive: true,
-         items: [
-            {
-               title: 'History',
-               url: '#',
-            },
-            {
-               title: 'Starred',
-               url: '#',
-            },
-            {
-               title: 'Settings',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Models',
-         url: '#',
-         icon: Bot,
-         items: [
-            {
-               title: 'Genesis',
-               url: '#',
-            },
-            {
-               title: 'Explorer',
-               url: '#',
-            },
-            {
-               title: 'Quantum',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Documentation',
-         url: '#',
-         icon: BookOpen,
-         items: [
-            {
-               title: 'Introduction',
-               url: '#',
-            },
-            {
-               title: 'Get Started',
-               url: '#',
-            },
-            {
-               title: 'Tutorials',
-               url: '#',
-            },
-            {
-               title: 'Changelog',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Settings',
-         url: '#',
-         icon: Settings2,
-         items: [
-            {
-               title: 'General',
-               url: '#',
-            },
-            {
-               title: 'Team',
-               url: '#',
-            },
-            {
-               title: 'Billing',
-               url: '#',
-            },
-            {
-               title: 'Limits',
-               url: '#',
-            },
-         ],
-      },
-   ],
-   projects: [
-      {
-         name: 'Design Engineering',
-         url: '#',
-         icon: Frame,
-      },
-      {
-         name: 'Sales & Marketing',
-         url: '#',
-         icon: PieChart,
-      },
-      {
-         name: 'Travel',
-         url: '#',
-         icon: Map,
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar collapsible="icon" {...props}>
-         <SidebarHeader>
-            <TeamSwitcher teams={data.teams} />
-         </SidebarHeader>
-         <SidebarContent>
-            <NavMain items={data.navMain} />
-            <NavProjects projects={data.projects} />
-         </SidebarContent>
-         <SidebarFooter>
-            <NavUser user={data.user} />
-         </SidebarFooter>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/app-sidebar.tsx b/apps/web/registry/miami/block/_sink/components/app-sidebar.tsx
deleted file mode 100644
index 4ce5d59e..00000000
--- a/apps/web/registry/miami/block/_sink/components/app-sidebar.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   AudioWaveform,
-   BookOpen,
-   Bot,
-   Command,
-   Frame,
-   GalleryVerticalEnd,
-   Map,
-   PieChart,
-   Settings2,
-   SquareTerminal,
-} from 'lucide-react'
-
-import { NavMain } from '~/registry/miami/block/sidebar-07/components/nav-main'
-import { NavProjects } from '~/registry/miami/block/sidebar-07/components/nav-projects'
-import { NavUser } from '~/registry/miami/block/sidebar-07/components/nav-user'
-import { TeamSwitcher } from '~/registry/miami/block/sidebar-07/components/team-switcher'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarRail,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   teams: [
-      {
-         name: 'Acme Inc',
-         logo: GalleryVerticalEnd,
-         plan: 'Enterprise',
-      },
-      {
-         name: 'Acme Corp.',
-         logo: AudioWaveform,
-         plan: 'Startup',
-      },
-      {
-         name: 'Evil Corp.',
-         logo: Command,
-         plan: 'Free',
-      },
-   ],
-   navMain: [
-      {
-         title: 'Playground',
-         url: '#',
-         icon: SquareTerminal,
-         isActive: true,
-         items: [
-            {
-               title: 'History',
-               url: '#',
-            },
-            {
-               title: 'Starred',
-               url: '#',
-            },
-            {
-               title: 'Settings',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Models',
-         url: '#',
-         icon: Bot,
-         items: [
-            {
-               title: 'Genesis',
-               url: '#',
-            },
-            {
-               title: 'Explorer',
-               url: '#',
-            },
-            {
-               title: 'Quantum',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Documentation',
-         url: '#',
-         icon: BookOpen,
-         items: [
-            {
-               title: 'Introduction',
-               url: '#',
-            },
-            {
-               title: 'Get Started',
-               url: '#',
-            },
-            {
-               title: 'Tutorials',
-               url: '#',
-            },
-            {
-               title: 'Changelog',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Settings',
-         url: '#',
-         icon: Settings2,
-         items: [
-            {
-               title: 'General',
-               url: '#',
-            },
-            {
-               title: 'Team',
-               url: '#',
-            },
-            {
-               title: 'Billing',
-               url: '#',
-            },
-            {
-               title: 'Limits',
-               url: '#',
-            },
-         ],
-      },
-   ],
-   projects: [
-      {
-         name: 'Design Engineering',
-         url: '#',
-         icon: Frame,
-      },
-      {
-         name: 'Sales & Marketing',
-         url: '#',
-         icon: PieChart,
-      },
-      {
-         name: 'Travel',
-         url: '#',
-         icon: Map,
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar collapsible="icon" {...props}>
-         <SidebarHeader>
-            <TeamSwitcher teams={data.teams} />
-         </SidebarHeader>
-         <SidebarContent>
-            <NavMain items={data.navMain} />
-            <NavProjects projects={data.projects} />
-         </SidebarContent>
-         <SidebarFooter>
-            <NavUser user={data.user} />
-         </SidebarFooter>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/aspect-ratio-demo.tsx b/apps/web/registry/miami/block/_sink/components/aspect-ratio-demo.tsx
deleted file mode 100644
index 1f6d9a37..00000000
--- a/apps/web/registry/miami/block/_sink/components/aspect-ratio-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Image from 'next/image'
-
-import { AspectRatio } from '~/registry/miami/ui/aspect-ratio'
-
-export function AspectRatioDemo() {
-   return (
-      <AspectRatio ratio={16 / 9} className="bg-muted">
-         <Image
-            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-            alt="Photo by Drew Beamer"
-            fill
-            className="size-full rounded-md object-cover"
-         />
-      </AspectRatio>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/avatar-demo.tsx b/apps/web/registry/miami/block/_sink/components/avatar-demo.tsx
deleted file mode 100644
index bddcf019..00000000
--- a/apps/web/registry/miami/block/_sink/components/avatar-demo.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-
-export function AvatarDemo() {
-   return (
-      <Avatar>
-         <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-         <AvatarFallback>CN</AvatarFallback>
-      </Avatar>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/badge-demo.tsx b/apps/web/registry/miami/block/_sink/components/badge-demo.tsx
deleted file mode 100644
index 11ffa1bf..00000000
--- a/apps/web/registry/miami/block/_sink/components/badge-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/miami/ui/badge'
-
-export function BadgeDemo() {
-   return <Badge>Badge</Badge>
-}
diff --git a/apps/web/registry/miami/block/_sink/components/badge-destructive.tsx b/apps/web/registry/miami/block/_sink/components/badge-destructive.tsx
deleted file mode 100644
index 971ff81a..00000000
--- a/apps/web/registry/miami/block/_sink/components/badge-destructive.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/miami/ui/badge'
-
-export function BadgeDestructive() {
-   return <Badge variant="destructive">Destructive</Badge>
-}
diff --git a/apps/web/registry/miami/block/_sink/components/badge-outline.tsx b/apps/web/registry/miami/block/_sink/components/badge-outline.tsx
deleted file mode 100644
index 65936569..00000000
--- a/apps/web/registry/miami/block/_sink/components/badge-outline.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/miami/ui/badge'
-
-export function BadgeOutline() {
-   return <Badge variant="outline">Outline</Badge>
-}
diff --git a/apps/web/registry/miami/block/_sink/components/badge-secondary.tsx b/apps/web/registry/miami/block/_sink/components/badge-secondary.tsx
deleted file mode 100644
index ee6d1524..00000000
--- a/apps/web/registry/miami/block/_sink/components/badge-secondary.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/miami/ui/badge'
-
-export function BadgeSecondary() {
-   return <Badge variant="secondary">Secondary</Badge>
-}
diff --git a/apps/web/registry/miami/block/_sink/components/breadcrumb-demo.tsx b/apps/web/registry/miami/block/_sink/components/breadcrumb-demo.tsx
deleted file mode 100644
index 5007a8d3..00000000
--- a/apps/web/registry/miami/block/_sink/components/breadcrumb-demo.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-   Breadcrumb,
-   BreadcrumbEllipsis,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-
-export function BreadcrumbDemo() {
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/">Home</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <DropdownMenu>
-                  <DropdownMenuTrigger className="flex items-center gap-1">
-                     <BreadcrumbEllipsis className="size-4" />
-                     <span className="sr-only">Toggle menu</span>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start">
-                     <DropdownMenuItem>Documentation</DropdownMenuItem>
-                     <DropdownMenuItem>Themes</DropdownMenuItem>
-                     <DropdownMenuItem>GitHub</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/button-demo copy.tsx b/apps/web/registry/miami/block/_sink/components/button-demo copy.tsx
deleted file mode 100644
index 89379237..00000000
--- a/apps/web/registry/miami/block/_sink/components/button-demo copy.tsx	
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export function ButtonDemo() {
-   return <Button>Button</Button>
-}
diff --git a/apps/web/registry/miami/block/_sink/components/button-demo.tsx b/apps/web/registry/miami/block/_sink/components/button-demo.tsx
deleted file mode 100644
index 89379237..00000000
--- a/apps/web/registry/miami/block/_sink/components/button-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export function ButtonDemo() {
-   return <Button>Button</Button>
-}
diff --git a/apps/web/registry/miami/block/_sink/components/button-destructive.tsx b/apps/web/registry/miami/block/_sink/components/button-destructive.tsx
deleted file mode 100644
index 6f5b14cf..00000000
--- a/apps/web/registry/miami/block/_sink/components/button-destructive.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export function ButtonDestructive() {
-   return <Button variant="destructive">Destructive</Button>
-}
diff --git a/apps/web/registry/miami/block/_sink/components/button-ghost.tsx b/apps/web/registry/miami/block/_sink/components/button-ghost.tsx
deleted file mode 100644
index 71f74eb3..00000000
--- a/apps/web/registry/miami/block/_sink/components/button-ghost.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export function ButtonGhost() {
-   return <Button variant="ghost">Ghost</Button>
-}
diff --git a/apps/web/registry/miami/block/_sink/components/button-icon.tsx b/apps/web/registry/miami/block/_sink/components/button-icon.tsx
deleted file mode 100644
index 4751420d..00000000
--- a/apps/web/registry/miami/block/_sink/components/button-icon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ChevronRight } from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-
-export function ButtonIcon() {
-   return (
-      <Button variant="outline" size="icon">
-         <ChevronRight />
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/button-link.tsx b/apps/web/registry/miami/block/_sink/components/button-link.tsx
deleted file mode 100644
index 72fb86e9..00000000
--- a/apps/web/registry/miami/block/_sink/components/button-link.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export function ButtonLink() {
-   return <Button variant="link">Link</Button>
-}
diff --git a/apps/web/registry/miami/block/_sink/components/button-loading.tsx b/apps/web/registry/miami/block/_sink/components/button-loading.tsx
deleted file mode 100644
index 4b5f811d..00000000
--- a/apps/web/registry/miami/block/_sink/components/button-loading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Loader2 } from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-
-export function ButtonLoading() {
-   return (
-      <Button disabled>
-         <Loader2 className="animate-spin" />
-         Please wait
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/button-outline.tsx b/apps/web/registry/miami/block/_sink/components/button-outline.tsx
deleted file mode 100644
index a5afa22e..00000000
--- a/apps/web/registry/miami/block/_sink/components/button-outline.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export function ButtonOutline() {
-   return <Button variant="outline">Outline</Button>
-}
diff --git a/apps/web/registry/miami/block/_sink/components/button-secondary.tsx b/apps/web/registry/miami/block/_sink/components/button-secondary.tsx
deleted file mode 100644
index a6293f28..00000000
--- a/apps/web/registry/miami/block/_sink/components/button-secondary.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export function ButtonSecondary() {
-   return <Button variant="secondary">Secondary</Button>
-}
diff --git a/apps/web/registry/miami/block/_sink/components/button-with-icon.tsx b/apps/web/registry/miami/block/_sink/components/button-with-icon.tsx
deleted file mode 100644
index 0df43716..00000000
--- a/apps/web/registry/miami/block/_sink/components/button-with-icon.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { MailOpen } from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-
-export function ButtonWithIcon() {
-   return (
-      <Button>
-         <MailOpen />
-         {' '}
-         Login with Email
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/calendar-demo.tsx b/apps/web/registry/miami/block/_sink/components/calendar-demo.tsx
deleted file mode 100644
index 87ba72ab..00000000
--- a/apps/web/registry/miami/block/_sink/components/calendar-demo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Calendar } from '~/registry/miami/ui/calendar'
-
-export function CalendarDemo() {
-   const [date, setDate] = React.useState<Date | undefined>(new Date())
-
-   return (
-      <Calendar
-         mode="single"
-         selected={date}
-         onSelect={setDate}
-         className="rounded-md border shadow"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/card-demo.tsx b/apps/web/registry/miami/block/_sink/components/card-demo.tsx
deleted file mode 100644
index 3ed7040a..00000000
--- a/apps/web/registry/miami/block/_sink/components/card-demo.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { BellRing, Check } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Switch } from '~/registry/miami/ui/switch'
-
-const notifications = [
-   {
-      title: 'Your call has been confirmed.',
-      description: '1 hour ago',
-   },
-   {
-      title: 'You have a new message!',
-      description: '1 hour ago',
-   },
-   {
-      title: 'Your subscription is expiring soon!',
-      description: '2 hours ago',
-   },
-]
-
-type CardProps = React.ComponentProps<typeof Card>
-
-export function CardDemo({ className, ...props }: CardProps) {
-   return (
-      <Card className={ny('w-[380px]', className)} {...props}>
-         <CardHeader>
-            <CardTitle>Notifications</CardTitle>
-            <CardDescription>You have 3 unread messages.</CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-4">
-            <div className=" flex items-center space-x-4 rounded-md border p-4">
-               <BellRing />
-               <div className="flex-1 space-y-1">
-                  <p className="text-sm font-medium leading-none">
-                     Push Notifications
-                  </p>
-                  <p className="text-muted-foreground text-sm">
-                     Send notifications to device.
-                  </p>
-               </div>
-               <Switch />
-            </div>
-            <div>
-               {notifications.map((notification, index) => (
-                  <div
-                     key={index}
-                     className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
-                  >
-                     <span className="flex size-2 translate-y-1 rounded-full bg-sky-500" />
-                     <div className="space-y-1">
-                        <p className="text-sm font-medium leading-none">
-                           {notification.title}
-                        </p>
-                        <p className="text-muted-foreground text-sm">
-                           {notification.description}
-                        </p>
-                     </div>
-                  </div>
-               ))}
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button className="w-full">
-               <Check />
-               {' '}
-               Mark all as read
-            </Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/carousel-demo.tsx b/apps/web/registry/miami/block/_sink/components/carousel-demo.tsx
deleted file mode 100644
index 8658b7c4..00000000
--- a/apps/web/registry/miami/block/_sink/components/carousel-demo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/miami/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/miami/ui/carousel'
-
-export function CarouselDemo() {
-   return (
-      <Carousel className="w-full max-w-xs">
-         <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index}>
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-4xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/checkbox-demo.tsx b/apps/web/registry/miami/block/_sink/components/checkbox-demo.tsx
deleted file mode 100644
index 4eef826b..00000000
--- a/apps/web/registry/miami/block/_sink/components/checkbox-demo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client'
-
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-
-export function CheckboxDemo() {
-   return (
-      <div className="flex items-center space-x-2">
-         <Checkbox id="terms" />
-         <label
-            htmlFor="terms"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-         >
-            Accept terms and conditions
-         </label>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/collapsible-demo.tsx b/apps/web/registry/miami/block/_sink/components/collapsible-demo.tsx
deleted file mode 100644
index eb823069..00000000
--- a/apps/web/registry/miami/block/_sink/components/collapsible-demo.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronsUpDown } from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-
-export function CollapsibleDemo() {
-   const [isOpen, setIsOpen] = React.useState(false)
-
-   return (
-      <Collapsible
-         open={isOpen}
-         onOpenChange={setIsOpen}
-         className="w-[350px] space-y-2"
-      >
-         <div className="flex items-center justify-between space-x-4 px-4">
-            <h4 className="text-sm font-semibold">
-               @peduarte starred 3 repositories
-            </h4>
-            <CollapsibleTrigger asChild>
-               <Button variant="ghost" size="sm">
-                  <ChevronsUpDown className="size-4" />
-                  <span className="sr-only">Toggle</span>
-               </Button>
-            </CollapsibleTrigger>
-         </div>
-         <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-            @radix-ui/primitives
-         </div>
-         <CollapsibleContent className="space-y-2">
-            <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-               @radix-ui/colors
-            </div>
-            <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-               @stitches/react
-            </div>
-         </CollapsibleContent>
-      </Collapsible>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/combobox-demo.tsx b/apps/web/registry/miami/block/_sink/components/combobox-demo.tsx
deleted file mode 100644
index a9df92cf..00000000
--- a/apps/web/registry/miami/block/_sink/components/combobox-demo.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Check, ChevronsUpDown } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/miami/ui/command'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-
-const frameworks = [
-   {
-      value: 'next.js',
-      label: 'Next.js',
-   },
-   {
-      value: 'sveltekit',
-      label: 'SvelteKit',
-   },
-   {
-      value: 'nuxt.js',
-      label: 'Nuxt.js',
-   },
-   {
-      value: 'remix',
-      label: 'Remix',
-   },
-   {
-      value: 'astro',
-      label: 'Astro',
-   },
-]
-
-export function ComboboxDemo() {
-   const [open, setOpen] = React.useState(false)
-   const [value, setValue] = React.useState('')
-
-   return (
-      <Popover open={open} onOpenChange={setOpen}>
-         <PopoverTrigger asChild>
-            <Button
-               variant="outline"
-               role="combobox"
-               aria-expanded={open}
-               className="w-[200px] justify-between"
-            >
-               {value
-                  ? frameworks.find(framework => framework.value === value)?.label
-                  : 'Select framework...'}
-               <ChevronsUpDown className="opacity-50" />
-            </Button>
-         </PopoverTrigger>
-         <PopoverContent className="w-[200px] p-0">
-            <Command>
-               <CommandInput placeholder="Search framework..." className="h-9" />
-               <CommandList>
-                  <CommandEmpty>No framework found.</CommandEmpty>
-                  <CommandGroup>
-                     {frameworks.map(framework => (
-                        <CommandItem
-                           key={framework.value}
-                           value={framework.value}
-                           onSelect={(currentValue) => {
-                              setValue(currentValue === value ? '' : currentValue)
-                              setOpen(false)
-                           }}
-                        >
-                           {framework.label}
-                           <Check
-                              className={ny(
-                                 'ml-auto',
-                                 value === framework.value ? 'opacity-100' : 'opacity-0',
-                              )}
-                           />
-                        </CommandItem>
-                     ))}
-                  </CommandGroup>
-               </CommandList>
-            </Command>
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/command-demo.tsx b/apps/web/registry/miami/block/_sink/components/command-demo.tsx
deleted file mode 100644
index bffd9fa1..00000000
--- a/apps/web/registry/miami/block/_sink/components/command-demo.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
-   Calculator,
-   Calendar,
-   CreditCard,
-   Settings,
-   Smile,
-   User,
-} from 'lucide-react'
-
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-   CommandSeparator,
-   CommandShortcut,
-} from '~/registry/miami/ui/command'
-
-export function CommandDemo() {
-   return (
-      <Command className="rounded-lg border shadow-md md:min-w-[450px]">
-         <CommandInput placeholder="Type a command or search..." />
-         <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup heading="Suggestions">
-               <CommandItem>
-                  <Calendar />
-                  <span>Calendar</span>
-               </CommandItem>
-               <CommandItem>
-                  <Smile />
-                  <span>Search Emoji</span>
-               </CommandItem>
-               <CommandItem disabled>
-                  <Calculator />
-                  <span>Calculator</span>
-               </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Settings">
-               <CommandItem>
-                  <User />
-                  <span>Profile</span>
-                  <CommandShortcut>⌘P</CommandShortcut>
-               </CommandItem>
-               <CommandItem>
-                  <CreditCard />
-                  <span>Billing</span>
-                  <CommandShortcut>⌘B</CommandShortcut>
-               </CommandItem>
-               <CommandItem>
-                  <Settings />
-                  <span>Settings</span>
-                  <CommandShortcut>⌘S</CommandShortcut>
-               </CommandItem>
-            </CommandGroup>
-         </CommandList>
-      </Command>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/component-wrapper copy.tsx b/apps/web/registry/miami/block/_sink/components/component-wrapper copy.tsx
deleted file mode 100644
index 300c180e..00000000
--- a/apps/web/registry/miami/block/_sink/components/component-wrapper copy.tsx	
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ny } from '~/lib/utils'
-
-export function ComponentWrapper({
-   className,
-   name,
-   children,
-   ...props
-}: React.ComponentPropsWithoutRef<'div'> & { name: string }) {
-   return (
-      <div
-         className={ny('flex w-full flex-col rounded-lg border', className)}
-         {...props}
-      >
-         <div className="border-b px-4 py-3">
-            <div className="text-sm font-medium">{name}</div>
-         </div>
-         <div className="flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full">
-            {children}
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/component-wrapper.tsx b/apps/web/registry/miami/block/_sink/components/component-wrapper.tsx
deleted file mode 100644
index 9927ec6e..00000000
--- a/apps/web/registry/miami/block/_sink/components/component-wrapper.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ny } from '~/registry/miami/lib/utils'
-
-export function ComponentWrapper({
-   className,
-   name,
-   children,
-   ...props
-}: React.ComponentPropsWithoutRef<'div'> & { name: string }) {
-   return (
-      <div
-         className={ny('flex w-full flex-col rounded-lg border', className)}
-         {...props}
-      >
-         <div className="border-b px-4 py-3">
-            <div className="text-sm font-medium">{name}</div>
-         </div>
-         <div className="flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full">
-            {children}
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/context-menu-demo.tsx b/apps/web/registry/miami/block/_sink/components/context-menu-demo.tsx
deleted file mode 100644
index fb0de001..00000000
--- a/apps/web/registry/miami/block/_sink/components/context-menu-demo.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-   ContextMenu,
-   ContextMenuCheckboxItem,
-   ContextMenuContent,
-   ContextMenuItem,
-   ContextMenuLabel,
-   ContextMenuRadioGroup,
-   ContextMenuRadioItem,
-   ContextMenuSeparator,
-   ContextMenuShortcut,
-   ContextMenuSub,
-   ContextMenuSubContent,
-   ContextMenuSubTrigger,
-   ContextMenuTrigger,
-} from '~/registry/miami/ui/context-menu'
-
-export function ContextMenuDemo() {
-   return (
-      <ContextMenu>
-         <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-            Right click here
-         </ContextMenuTrigger>
-         <ContextMenuContent className="w-64">
-            <ContextMenuItem inset>
-               Back
-               <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem inset disabled>
-               Forward
-               <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem inset>
-               Reload
-               <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuSub>
-               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-               <ContextMenuSubContent className="w-48">
-                  <ContextMenuItem>
-                     Save Page As...
-                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-                  </ContextMenuItem>
-                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-                  <ContextMenuItem>Name Window...</ContextMenuItem>
-                  <ContextMenuSeparator />
-                  <ContextMenuItem>Developer Tools</ContextMenuItem>
-               </ContextMenuSubContent>
-            </ContextMenuSub>
-            <ContextMenuSeparator />
-            <ContextMenuCheckboxItem checked>
-               Show Bookmarks Bar
-               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-            </ContextMenuCheckboxItem>
-            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-            <ContextMenuSeparator />
-            <ContextMenuRadioGroup value="pedro">
-               <ContextMenuLabel inset>People</ContextMenuLabel>
-               <ContextMenuSeparator />
-               <ContextMenuRadioItem value="pedro">
-                  Pedro Duarte
-               </ContextMenuRadioItem>
-               <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-            </ContextMenuRadioGroup>
-         </ContextMenuContent>
-      </ContextMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/date-picker-demo.tsx b/apps/web/registry/miami/block/_sink/components/date-picker-demo.tsx
deleted file mode 100644
index 8ced7398..00000000
--- a/apps/web/registry/miami/block/_sink/components/date-picker-demo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { format } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import { Calendar } from '~/registry/miami/ui/calendar'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-
-export function DatePickerDemo() {
-   const [date, setDate] = React.useState<Date>()
-
-   return (
-      <Popover>
-         <PopoverTrigger asChild>
-            <Button
-               variant="outline"
-               className={ny(
-                  'w-[240px] justify-start text-left font-normal',
-                  !date && 'text-muted-foreground',
-               )}
-            >
-               <CalendarIcon />
-               {date ? format(date, 'PPP') : <span>Pick a date</span>}
-            </Button>
-         </PopoverTrigger>
-         <PopoverContent className="w-auto p-0" align="start">
-            <Calendar
-               mode="single"
-               selected={date}
-               onSelect={setDate}
-               initialFocus
-            />
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/dialog-demo.tsx b/apps/web/registry/miami/block/_sink/components/dialog-demo.tsx
deleted file mode 100644
index b50f1693..00000000
--- a/apps/web/registry/miami/block/_sink/components/dialog-demo.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Dialog,
-   DialogContent,
-   DialogDescription,
-   DialogFooter,
-   DialogHeader,
-   DialogTitle,
-   DialogTrigger,
-} from '~/registry/miami/ui/dialog'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export function DialogDemo() {
-   return (
-      <Dialog>
-         <DialogTrigger asChild>
-            <Button variant="outline">Edit Profile</Button>
-         </DialogTrigger>
-         <DialogContent className="sm:max-w-[425px]">
-            <DialogHeader>
-               <DialogTitle>Edit profile</DialogTitle>
-               <DialogDescription>
-                  Make changes to your profile here. Click save when you're done.
-               </DialogDescription>
-            </DialogHeader>
-            <div className="grid gap-4 py-4">
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="name" className="text-right">
-                     Name
-                  </Label>
-                  <Input id="name" value="Pedro Duarte" className="col-span-3" />
-               </div>
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="username" className="text-right">
-                     Username
-                  </Label>
-                  <Input id="username" value="@peduarte" className="col-span-3" />
-               </div>
-            </div>
-            <DialogFooter>
-               <Button type="submit">Save changes</Button>
-            </DialogFooter>
-         </DialogContent>
-      </Dialog>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/drawer-demo.tsx b/apps/web/registry/miami/block/_sink/components/drawer-demo.tsx
deleted file mode 100644
index 2b9cebc2..00000000
--- a/apps/web/registry/miami/block/_sink/components/drawer-demo.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Minus, Plus } from 'lucide-react'
-import { Bar, BarChart, ResponsiveContainer } from 'recharts'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Drawer,
-   DrawerClose,
-   DrawerContent,
-   DrawerDescription,
-   DrawerFooter,
-   DrawerHeader,
-   DrawerTitle,
-   DrawerTrigger,
-} from '~/registry/miami/ui/drawer'
-
-const data = [
-   {
-      goal: 400,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 278,
-   },
-   {
-      goal: 189,
-   },
-   {
-      goal: 239,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 278,
-   },
-   {
-      goal: 189,
-   },
-   {
-      goal: 349,
-   },
-]
-
-export function DrawerDemo() {
-   const [goal, setGoal] = React.useState(350)
-
-   function onClick(adjustment: number) {
-      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
-   }
-
-   return (
-      <Drawer>
-         <DrawerTrigger asChild>
-            <Button variant="outline">Open Drawer</Button>
-         </DrawerTrigger>
-         <DrawerContent>
-            <div className="mx-auto w-full max-w-sm">
-               <DrawerHeader>
-                  <DrawerTitle>Move Goal</DrawerTitle>
-                  <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-               </DrawerHeader>
-               <div className="p-4 pb-0">
-                  <div className="flex items-center justify-center space-x-2">
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="size-8 shrink-0 rounded-full"
-                        onClick={() => onClick(-10)}
-                        disabled={goal <= 200}
-                     >
-                        <Minus />
-                        <span className="sr-only">Decrease</span>
-                     </Button>
-                     <div className="flex-1 text-center">
-                        <div className="text-7xl font-bold tracking-tighter">
-                           {goal}
-                        </div>
-                        <div className="text-muted-foreground text-[0.70rem] uppercase">
-                           Calories/day
-                        </div>
-                     </div>
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="size-8 shrink-0 rounded-full"
-                        onClick={() => onClick(10)}
-                        disabled={goal >= 400}
-                     >
-                        <Plus />
-                        <span className="sr-only">Increase</span>
-                     </Button>
-                  </div>
-                  <div className="mt-3 h-[120px]">
-                     <ResponsiveContainer width="100%" height="100%">
-                        <BarChart data={data}>
-                           <Bar
-                              dataKey="goal"
-                              style={
-                                 {
-                                    fill: 'hsl(var(--foreground))',
-                                    opacity: 0.9,
-                                 } as React.CSSProperties
-                              }
-                           />
-                        </BarChart>
-                     </ResponsiveContainer>
-                  </div>
-               </div>
-               <DrawerFooter>
-                  <Button>Submit</Button>
-                  <DrawerClose asChild>
-                     <Button variant="outline">Cancel</Button>
-                  </DrawerClose>
-               </DrawerFooter>
-            </div>
-         </DrawerContent>
-      </Drawer>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/dropdown-menu-demo.tsx b/apps/web/registry/miami/block/_sink/components/dropdown-menu-demo.tsx
deleted file mode 100644
index 6ab325b5..00000000
--- a/apps/web/registry/miami/block/_sink/components/dropdown-menu-demo.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuPortal,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuSub,
-   DropdownMenuSubContent,
-   DropdownMenuSubTrigger,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-
-export function DropdownMenuDemo() {
-   return (
-      <DropdownMenu>
-         <DropdownMenuTrigger asChild>
-            <Button variant="outline">Open</Button>
-         </DropdownMenuTrigger>
-         <DropdownMenuContent className="w-56">
-            <DropdownMenuLabel>My Account</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-               <DropdownMenuItem>
-                  Profile
-                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-               </DropdownMenuItem>
-               <DropdownMenuItem>
-                  Billing
-                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-               </DropdownMenuItem>
-               <DropdownMenuItem>
-                  Settings
-                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-               </DropdownMenuItem>
-               <DropdownMenuItem>
-                  Keyboard shortcuts
-                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
-               </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-               <DropdownMenuItem>Team</DropdownMenuItem>
-               <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
-                  <DropdownMenuPortal>
-                     <DropdownMenuSubContent>
-                        <DropdownMenuItem>Email</DropdownMenuItem>
-                        <DropdownMenuItem>Message</DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>More...</DropdownMenuItem>
-                     </DropdownMenuSubContent>
-                  </DropdownMenuPortal>
-               </DropdownMenuSub>
-               <DropdownMenuItem>
-                  New Team
-                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
-               </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>GitHub</DropdownMenuItem>
-            <DropdownMenuItem>Support</DropdownMenuItem>
-            <DropdownMenuItem disabled>API</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-               Log out
-               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-            </DropdownMenuItem>
-         </DropdownMenuContent>
-      </DropdownMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/hover-card-demo.tsx b/apps/web/registry/miami/block/_sink/components/hover-card-demo.tsx
deleted file mode 100644
index b7392317..00000000
--- a/apps/web/registry/miami/block/_sink/components/hover-card-demo.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { CalendarIcon } from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   HoverCard,
-   HoverCardContent,
-   HoverCardTrigger,
-} from '~/registry/miami/ui/hover-card'
-
-export function HoverCardDemo() {
-   return (
-      <HoverCard>
-         <HoverCardTrigger asChild>
-            <Button variant="link">@nextjs</Button>
-         </HoverCardTrigger>
-         <HoverCardContent className="w-80">
-            <div className="flex justify-between space-x-4">
-               <Avatar>
-                  <AvatarImage src="https://github.com/vercel.png" />
-                  <AvatarFallback>VC</AvatarFallback>
-               </Avatar>
-               <div className="space-y-1">
-                  <h4 className="text-sm font-semibold">@nextjs</h4>
-                  <p className="text-sm">
-                     The React Framework – created and maintained by @vercel.
-                  </p>
-                  <div className="flex items-center pt-2">
-                     <CalendarIcon className="mr-2 size-4 opacity-70" />
-                     {' '}
-                     <span className="text-muted-foreground text-xs">
-                        Joined December 2021
-                     </span>
-                  </div>
-               </div>
-            </div>
-         </HoverCardContent>
-      </HoverCard>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/input-demo.tsx b/apps/web/registry/miami/block/_sink/components/input-demo.tsx
deleted file mode 100644
index 8d581424..00000000
--- a/apps/web/registry/miami/block/_sink/components/input-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Input } from '~/registry/miami/ui/input'
-
-export function InputDemo() {
-   return <Input type="email" placeholder="Email" />
-}
diff --git a/apps/web/registry/miami/block/_sink/components/input-otp-demo.tsx b/apps/web/registry/miami/block/_sink/components/input-otp-demo.tsx
deleted file mode 100644
index 491159a6..00000000
--- a/apps/web/registry/miami/block/_sink/components/input-otp-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSeparator,
-   InputOTPSlot,
-} from '~/registry/miami/ui/input-otp'
-
-export function InputOTPDemo() {
-   return (
-      <InputOTP maxLength={6}>
-         <InputOTPGroup>
-            <InputOTPSlot index={0} />
-            <InputOTPSlot index={1} />
-            <InputOTPSlot index={2} />
-         </InputOTPGroup>
-         <InputOTPSeparator />
-         <InputOTPGroup>
-            <InputOTPSlot index={3} />
-            <InputOTPSlot index={4} />
-            <InputOTPSlot index={5} />
-         </InputOTPGroup>
-      </InputOTP>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/label-demo.tsx b/apps/web/registry/miami/block/_sink/components/label-demo.tsx
deleted file mode 100644
index 0c671d0d..00000000
--- a/apps/web/registry/miami/block/_sink/components/label-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-import { Label } from '~/registry/miami/ui/label'
-
-export function LabelDemo() {
-   return (
-      <div>
-         <div className="flex items-center space-x-2">
-            <Checkbox id="terms" />
-            <Label htmlFor="terms">Accept terms and conditions</Label>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/menubar-demo.tsx b/apps/web/registry/miami/block/_sink/components/menubar-demo.tsx
deleted file mode 100644
index 2be007e0..00000000
--- a/apps/web/registry/miami/block/_sink/components/menubar-demo.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import {
-   Menubar,
-   MenubarCheckboxItem,
-   MenubarContent,
-   MenubarItem,
-   MenubarMenu,
-   MenubarRadioGroup,
-   MenubarRadioItem,
-   MenubarSeparator,
-   MenubarShortcut,
-   MenubarSub,
-   MenubarSubContent,
-   MenubarSubTrigger,
-   MenubarTrigger,
-} from '~/registry/miami/ui/menubar'
-
-export function MenubarDemo() {
-   return (
-      <Menubar>
-         <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-               <MenubarItem>
-                  New Tab
-                  {' '}
-                  <MenubarShortcut>⌘T</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem>
-                  New Window
-                  {' '}
-                  <MenubarShortcut>⌘N</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem disabled>New Incognito Window</MenubarItem>
-               <MenubarSeparator />
-               <MenubarSub>
-                  <MenubarSubTrigger>Share</MenubarSubTrigger>
-                  <MenubarSubContent>
-                     <MenubarItem>Email link</MenubarItem>
-                     <MenubarItem>Messages</MenubarItem>
-                     <MenubarItem>Notes</MenubarItem>
-                  </MenubarSubContent>
-               </MenubarSub>
-               <MenubarSeparator />
-               <MenubarItem>
-                  Print...
-                  {' '}
-                  <MenubarShortcut>⌘P</MenubarShortcut>
-               </MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-         <MenubarMenu>
-            <MenubarTrigger>Edit</MenubarTrigger>
-            <MenubarContent>
-               <MenubarItem>
-                  Undo
-                  {' '}
-                  <MenubarShortcut>⌘Z</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem>
-                  Redo
-                  {' '}
-                  <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-               </MenubarItem>
-               <MenubarSeparator />
-               <MenubarSub>
-                  <MenubarSubTrigger>Find</MenubarSubTrigger>
-                  <MenubarSubContent>
-                     <MenubarItem>Search the web</MenubarItem>
-                     <MenubarSeparator />
-                     <MenubarItem>Find...</MenubarItem>
-                     <MenubarItem>Find Next</MenubarItem>
-                     <MenubarItem>Find Previous</MenubarItem>
-                  </MenubarSubContent>
-               </MenubarSub>
-               <MenubarSeparator />
-               <MenubarItem>Cut</MenubarItem>
-               <MenubarItem>Copy</MenubarItem>
-               <MenubarItem>Paste</MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-         <MenubarMenu>
-            <MenubarTrigger>View</MenubarTrigger>
-            <MenubarContent>
-               <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-               <MenubarCheckboxItem checked>
-                  Always Show Full URLs
-               </MenubarCheckboxItem>
-               <MenubarSeparator />
-               <MenubarItem inset>
-                  Reload
-                  {' '}
-                  <MenubarShortcut>⌘R</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem disabled inset>
-                  Force Reload
-                  {' '}
-                  <MenubarShortcut>⇧⌘R</MenubarShortcut>
-               </MenubarItem>
-               <MenubarSeparator />
-               <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-               <MenubarSeparator />
-               <MenubarItem inset>Hide Sidebar</MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-         <MenubarMenu>
-            <MenubarTrigger>Profiles</MenubarTrigger>
-            <MenubarContent>
-               <MenubarRadioGroup value="benoit">
-                  <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-                  <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-                  <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-               </MenubarRadioGroup>
-               <MenubarSeparator />
-               <MenubarItem inset>Edit...</MenubarItem>
-               <MenubarSeparator />
-               <MenubarItem inset>Add Profile...</MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-      </Menubar>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/nav-main copy.tsx b/apps/web/registry/miami/block/_sink/components/nav-main copy.tsx
deleted file mode 100644
index 82a22fcd..00000000
--- a/apps/web/registry/miami/block/_sink/components/nav-main copy.tsx	
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client'
-
-import { ChevronRight, type LucideIcon } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon?: LucideIcon
-      isActive?: boolean
-      items?: {
-         title: string
-         url: string
-      }[]
-   }[]
-}) {
-   return (
-      <SidebarGroup>
-         <SidebarGroupLabel>Platform</SidebarGroupLabel>
-         <SidebarMenu>
-            {items.map(item => (
-               <Collapsible
-                  key={item.title}
-                  asChild
-                  defaultOpen={item.isActive}
-                  className="group/collapsible"
-               >
-                  <SidebarMenuItem>
-                     <CollapsibleTrigger asChild>
-                        <SidebarMenuButton tooltip={item.title}>
-                           {item.icon && <item.icon />}
-                           <span>{item.title}</span>
-                           <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                        </SidebarMenuButton>
-                     </CollapsibleTrigger>
-                     <CollapsibleContent>
-                        <SidebarMenuSub>
-                           {item.items?.map(subItem => (
-                              <SidebarMenuSubItem key={subItem.title}>
-                                 <SidebarMenuSubButton asChild>
-                                    <a href={subItem.url}>
-                                       <span>{subItem.title}</span>
-                                    </a>
-                                 </SidebarMenuSubButton>
-                              </SidebarMenuSubItem>
-                           ))}
-                        </SidebarMenuSub>
-                     </CollapsibleContent>
-                  </SidebarMenuItem>
-               </Collapsible>
-            ))}
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/nav-main.tsx b/apps/web/registry/miami/block/_sink/components/nav-main.tsx
deleted file mode 100644
index 82a22fcd..00000000
--- a/apps/web/registry/miami/block/_sink/components/nav-main.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client'
-
-import { ChevronRight, type LucideIcon } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon?: LucideIcon
-      isActive?: boolean
-      items?: {
-         title: string
-         url: string
-      }[]
-   }[]
-}) {
-   return (
-      <SidebarGroup>
-         <SidebarGroupLabel>Platform</SidebarGroupLabel>
-         <SidebarMenu>
-            {items.map(item => (
-               <Collapsible
-                  key={item.title}
-                  asChild
-                  defaultOpen={item.isActive}
-                  className="group/collapsible"
-               >
-                  <SidebarMenuItem>
-                     <CollapsibleTrigger asChild>
-                        <SidebarMenuButton tooltip={item.title}>
-                           {item.icon && <item.icon />}
-                           <span>{item.title}</span>
-                           <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                        </SidebarMenuButton>
-                     </CollapsibleTrigger>
-                     <CollapsibleContent>
-                        <SidebarMenuSub>
-                           {item.items?.map(subItem => (
-                              <SidebarMenuSubItem key={subItem.title}>
-                                 <SidebarMenuSubButton asChild>
-                                    <a href={subItem.url}>
-                                       <span>{subItem.title}</span>
-                                    </a>
-                                 </SidebarMenuSubButton>
-                              </SidebarMenuSubItem>
-                           ))}
-                        </SidebarMenuSub>
-                     </CollapsibleContent>
-                  </SidebarMenuItem>
-               </Collapsible>
-            ))}
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/nav-projects copy.tsx b/apps/web/registry/miami/block/_sink/components/nav-projects copy.tsx
deleted file mode 100644
index 5093e815..00000000
--- a/apps/web/registry/miami/block/_sink/components/nav-projects copy.tsx	
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import {
-   Folder,
-   Forward,
-   type LucideIcon,
-   MoreHorizontal,
-   Trash2,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavProjects({
-   projects,
-}: {
-   projects: {
-      name: string
-      url: string
-      icon: LucideIcon
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-         <SidebarGroupLabel>Projects</SidebarGroupLabel>
-         <SidebarMenu>
-            {projects.map(item => (
-               <SidebarMenuItem key={item.name}>
-                  <SidebarMenuButton asChild>
-                     <a href={item.url}>
-                        <item.icon />
-                        <span>{item.name}</span>
-                     </a>
-                  </SidebarMenuButton>
-                  <DropdownMenu>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover>
-                           <MoreHorizontal />
-                           <span className="sr-only">More</span>
-                        </SidebarMenuAction>
-                     </DropdownMenuTrigger>
-                     <DropdownMenuContent
-                        className="w-48 rounded-lg"
-                        side={isMobile ? 'bottom' : 'right'}
-                        align={isMobile ? 'end' : 'start'}
-                     >
-                        <DropdownMenuItem>
-                           <Folder className="text-muted-foreground" />
-                           <span>View Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <Forward className="text-muted-foreground" />
-                           <span>Share Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Trash2 className="text-muted-foreground" />
-                           <span>Delete Project</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuContent>
-                  </DropdownMenu>
-               </SidebarMenuItem>
-            ))}
-            <SidebarMenuItem>
-               <SidebarMenuButton className="text-sidebar-foreground/70">
-                  <MoreHorizontal className="text-sidebar-foreground/70" />
-                  <span>More</span>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/nav-projects.tsx b/apps/web/registry/miami/block/_sink/components/nav-projects.tsx
deleted file mode 100644
index 5093e815..00000000
--- a/apps/web/registry/miami/block/_sink/components/nav-projects.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import {
-   Folder,
-   Forward,
-   type LucideIcon,
-   MoreHorizontal,
-   Trash2,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavProjects({
-   projects,
-}: {
-   projects: {
-      name: string
-      url: string
-      icon: LucideIcon
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-         <SidebarGroupLabel>Projects</SidebarGroupLabel>
-         <SidebarMenu>
-            {projects.map(item => (
-               <SidebarMenuItem key={item.name}>
-                  <SidebarMenuButton asChild>
-                     <a href={item.url}>
-                        <item.icon />
-                        <span>{item.name}</span>
-                     </a>
-                  </SidebarMenuButton>
-                  <DropdownMenu>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover>
-                           <MoreHorizontal />
-                           <span className="sr-only">More</span>
-                        </SidebarMenuAction>
-                     </DropdownMenuTrigger>
-                     <DropdownMenuContent
-                        className="w-48 rounded-lg"
-                        side={isMobile ? 'bottom' : 'right'}
-                        align={isMobile ? 'end' : 'start'}
-                     >
-                        <DropdownMenuItem>
-                           <Folder className="text-muted-foreground" />
-                           <span>View Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <Forward className="text-muted-foreground" />
-                           <span>Share Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Trash2 className="text-muted-foreground" />
-                           <span>Delete Project</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuContent>
-                  </DropdownMenu>
-               </SidebarMenuItem>
-            ))}
-            <SidebarMenuItem>
-               <SidebarMenuButton className="text-sidebar-foreground/70">
-                  <MoreHorizontal className="text-sidebar-foreground/70" />
-                  <span>More</span>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/nav-user copy.tsx b/apps/web/registry/miami/block/_sink/components/nav-user copy.tsx
deleted file mode 100644
index ffe87f3a..00000000
--- a/apps/web/registry/miami/block/_sink/components/nav-user copy.tsx	
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="end"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/nav-user.tsx b/apps/web/registry/miami/block/_sink/components/nav-user.tsx
deleted file mode 100644
index ffe87f3a..00000000
--- a/apps/web/registry/miami/block/_sink/components/nav-user.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="end"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/navigation-menu-demo.tsx b/apps/web/registry/miami/block/_sink/components/navigation-menu-demo.tsx
deleted file mode 100644
index c8e0c154..00000000
--- a/apps/web/registry/miami/block/_sink/components/navigation-menu-demo.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import Link from 'next/link'
-
-import { ny } from '~/lib/utils'
-import {
-   NavigationMenu,
-   NavigationMenuContent,
-   NavigationMenuItem,
-   NavigationMenuLink,
-   NavigationMenuList,
-   NavigationMenuTrigger,
-   navigationMenuTriggerStyle,
-} from '~/registry/miami/ui/navigation-menu'
-
-const components: { title: string, href: string, description: string }[] = [
-   {
-      title: 'Alert Dialog',
-      href: '/docs/primitives/alert-dialog',
-      description:
-      'A modal dialog that interrupts the user with important content and expects a response.',
-   },
-   {
-      title: 'Hover Card',
-      href: '/docs/primitives/hover-card',
-      description:
-      'For sighted users to preview content available behind a link.',
-   },
-   {
-      title: 'Progress',
-      href: '/docs/primitives/progress',
-      description:
-      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
-   },
-   {
-      title: 'Scroll-area',
-      href: '/docs/primitives/scroll-area',
-      description: 'Visually or semantically separates content.',
-   },
-   {
-      title: 'Tabs',
-      href: '/docs/primitives/tabs',
-      description:
-      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
-   },
-   {
-      title: 'Tooltip',
-      href: '/docs/primitives/tooltip',
-      description:
-      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
-   },
-]
-
-export function NavigationMenuDemo() {
-   return (
-      <NavigationMenu>
-         <NavigationMenuList>
-            <NavigationMenuItem>
-               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-               <NavigationMenuContent>
-                  <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                     <li className="row-span-3">
-                        <NavigationMenuLink asChild>
-                           <a
-                              className="from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md"
-                              href="/"
-                           >
-                              <div className="mb-2 mt-4 text-lg font-medium">
-                                 shadcn/ui
-                              </div>
-                              <p className="text-muted-foreground text-sm leading-tight">
-                                 Beautifully designed components built with Radix UI and
-                                 Tailwind CSS.
-                              </p>
-                           </a>
-                        </NavigationMenuLink>
-                     </li>
-                     <ListItem href="/docs" title="Introduction">
-                        Re-usable components built using Radix UI and Tailwind CSS.
-                     </ListItem>
-                     <ListItem href="/docs/installation" title="Installation">
-                        How to install dependencies and structure your app.
-                     </ListItem>
-                     <ListItem href="/docs/primitives/typography" title="Typography">
-                        Styles for headings, paragraphs, lists...etc
-                     </ListItem>
-                  </ul>
-               </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-               <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-               <NavigationMenuContent>
-                  <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                     {components.map(component => (
-                        <ListItem
-                           key={component.title}
-                           title={component.title}
-                           href={component.href}
-                        >
-                           {component.description}
-                        </ListItem>
-                     ))}
-                  </ul>
-               </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-               <Link href="/docs" legacyBehavior passHref>
-                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                     Documentation
-                  </NavigationMenuLink>
-               </Link>
-            </NavigationMenuItem>
-         </NavigationMenuList>
-      </NavigationMenu>
-   )
-}
-
-const ListItem = React.forwardRef<
-   React.ElementRef<'a'>,
-   React.ComponentPropsWithoutRef<'a'>
->(({ className, title, children, ...props }, ref) => {
-   return (
-      <li>
-         <NavigationMenuLink asChild>
-            <a
-               ref={ref}
-               className={ny(
-                  'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors',
-                  className,
-               )}
-               {...props}
-            >
-               <div className="text-sm font-medium leading-none">{title}</div>
-               <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
-                  {children}
-               </p>
-            </a>
-         </NavigationMenuLink>
-      </li>
-   )
-})
-ListItem.displayName = 'ListItem'
diff --git a/apps/web/registry/miami/block/_sink/components/pagination-demo.tsx b/apps/web/registry/miami/block/_sink/components/pagination-demo.tsx
deleted file mode 100644
index fe455fef..00000000
--- a/apps/web/registry/miami/block/_sink/components/pagination-demo.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-   Pagination,
-   PaginationContent,
-   PaginationEllipsis,
-   PaginationItem,
-   PaginationLink,
-   PaginationNext,
-   PaginationPrevious,
-} from '~/registry/miami/ui/pagination'
-
-export function PaginationDemo() {
-   return (
-      <Pagination>
-         <PaginationContent>
-            <PaginationItem>
-               <PaginationPrevious href="#" />
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationLink href="#">1</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationLink href="#" isActive>
-                  2
-               </PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationLink href="#">3</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationEllipsis />
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationNext href="#" />
-            </PaginationItem>
-         </PaginationContent>
-      </Pagination>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/popover-demo.tsx b/apps/web/registry/miami/block/_sink/components/popover-demo.tsx
deleted file mode 100644
index 8c52c3a1..00000000
--- a/apps/web/registry/miami/block/_sink/components/popover-demo.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-
-export function PopoverDemo() {
-   return (
-      <Popover>
-         <PopoverTrigger asChild>
-            <Button variant="outline">Open popover</Button>
-         </PopoverTrigger>
-         <PopoverContent className="w-80">
-            <div className="grid gap-4">
-               <div className="space-y-2">
-                  <h4 className="font-medium leading-none">Dimensions</h4>
-                  <p className="text-muted-foreground text-sm">
-                     Set the dimensions for the layer.
-                  </p>
-               </div>
-               <div className="grid gap-2">
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="width">Width</Label>
-                     <Input
-                        id="width"
-                        defaultValue="100%"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="maxWidth">Max. width</Label>
-                     <Input
-                        id="maxWidth"
-                        defaultValue="300px"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="height">Height</Label>
-                     <Input
-                        id="height"
-                        defaultValue="25px"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="maxHeight">Max. height</Label>
-                     <Input
-                        id="maxHeight"
-                        defaultValue="none"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-               </div>
-            </div>
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/progress-demo.tsx b/apps/web/registry/miami/block/_sink/components/progress-demo.tsx
deleted file mode 100644
index 62473d4d..00000000
--- a/apps/web/registry/miami/block/_sink/components/progress-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Progress } from '~/registry/miami/ui/progress'
-
-export function ProgressDemo() {
-   const [progress, setProgress] = React.useState(13)
-
-   React.useEffect(() => {
-      const timer = setTimeout(() => setProgress(66), 500)
-      return () => clearTimeout(timer)
-   }, [])
-
-   return <Progress value={progress} className="w-3/5" />
-}
diff --git a/apps/web/registry/miami/block/_sink/components/radio-group-demo.tsx b/apps/web/registry/miami/block/_sink/components/radio-group-demo.tsx
deleted file mode 100644
index 6c52808a..00000000
--- a/apps/web/registry/miami/block/_sink/components/radio-group-demo.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Label } from '~/registry/miami/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'
-
-export function RadioGroupDemo() {
-   return (
-      <RadioGroup defaultValue="comfortable">
-         <div className="flex items-center space-x-2">
-            <RadioGroupItem value="default" id="r1" />
-            <Label htmlFor="r1">Default</Label>
-         </div>
-         <div className="flex items-center space-x-2">
-            <RadioGroupItem value="comfortable" id="r2" />
-            <Label htmlFor="r2">Comfortable</Label>
-         </div>
-         <div className="flex items-center space-x-2">
-            <RadioGroupItem value="compact" id="r3" />
-            <Label htmlFor="r3">Compact</Label>
-         </div>
-      </RadioGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/resizable-handle.tsx b/apps/web/registry/miami/block/_sink/components/resizable-handle.tsx
deleted file mode 100644
index ce71c686..00000000
--- a/apps/web/registry/miami/block/_sink/components/resizable-handle.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-   ResizableHandle,
-   ResizablePanel,
-   ResizablePanelGroup,
-} from '~/registry/miami/ui/resizable'
-
-export function ResizableHandleDemo() {
-   return (
-      <ResizablePanelGroup
-         direction="horizontal"
-         className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
-      >
-         <ResizablePanel defaultSize={25}>
-            <div className="flex h-full items-center justify-center p-6">
-               <span className="font-semibold">Sidebar</span>
-            </div>
-         </ResizablePanel>
-         <ResizableHandle withHandle />
-         <ResizablePanel defaultSize={75}>
-            <div className="flex h-full items-center justify-center p-6">
-               <span className="font-semibold">Content</span>
-            </div>
-         </ResizablePanel>
-      </ResizablePanelGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/scroll-area-demo.tsx b/apps/web/registry/miami/block/_sink/components/scroll-area-demo.tsx
deleted file mode 100644
index b8efcf82..00000000
--- a/apps/web/registry/miami/block/_sink/components/scroll-area-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react'
-
-import { ScrollArea } from '~/registry/miami/ui/scroll-area'
-import { Separator } from '~/registry/miami/ui/separator'
-
-const tags = Array.from({ length: 50 }).map(
-   (_, i, a) => `v1.2.0-beta.${a.length - i}`,
-)
-
-export function ScrollAreaDemo() {
-   return (
-      <ScrollArea className="h-72 w-48 rounded-md border">
-         <div className="p-4">
-            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
-            {tags.map(tag => (
-               <React.Fragment key={tag}>
-                  <div className="text-sm">{tag}</div>
-                  <Separator className="my-2" />
-               </React.Fragment>
-            ))}
-         </div>
-      </ScrollArea>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/select-demo.tsx b/apps/web/registry/miami/block/_sink/components/select-demo.tsx
deleted file mode 100644
index 27523889..00000000
--- a/apps/web/registry/miami/block/_sink/components/select-demo.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react'
-
-import {
-   Select,
-   SelectContent,
-   SelectGroup,
-   SelectItem,
-   SelectLabel,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-
-export function SelectDemo() {
-   return (
-      <Select>
-         <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Select a fruit" />
-         </SelectTrigger>
-         <SelectContent>
-            <SelectGroup>
-               <SelectLabel>Fruits</SelectLabel>
-               <SelectItem value="apple">Apple</SelectItem>
-               <SelectItem value="banana">Banana</SelectItem>
-               <SelectItem value="blueberry">Blueberry</SelectItem>
-               <SelectItem value="grapes">Grapes</SelectItem>
-               <SelectItem value="pineapple">Pineapple</SelectItem>
-            </SelectGroup>
-         </SelectContent>
-      </Select>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/separator-demo.tsx b/apps/web/registry/miami/block/_sink/components/separator-demo.tsx
deleted file mode 100644
index 9a2d248a..00000000
--- a/apps/web/registry/miami/block/_sink/components/separator-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Separator } from '~/registry/miami/ui/separator'
-
-export function SeparatorDemo() {
-   return (
-      <div>
-         <div className="space-y-1">
-            <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-            <p className="text-muted-foreground text-sm">
-               An open-source UI component library.
-            </p>
-         </div>
-         <Separator className="my-4" />
-         <div className="flex h-5 items-center space-x-4 text-sm">
-            <div>Blog</div>
-            <Separator orientation="vertical" />
-            <div>Docs</div>
-            <Separator orientation="vertical" />
-            <div>Source</div>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/sheet-demo.tsx b/apps/web/registry/miami/block/_sink/components/sheet-demo.tsx
deleted file mode 100644
index b5b56d2d..00000000
--- a/apps/web/registry/miami/block/_sink/components/sheet-demo.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Sheet,
-   SheetClose,
-   SheetContent,
-   SheetDescription,
-   SheetFooter,
-   SheetHeader,
-   SheetTitle,
-   SheetTrigger,
-} from '~/registry/miami/ui/sheet'
-
-export function SheetDemo() {
-   return (
-      <Sheet>
-         <SheetTrigger asChild>
-            <Button variant="outline">Open</Button>
-         </SheetTrigger>
-         <SheetContent>
-            <SheetHeader>
-               <SheetTitle>Edit profile</SheetTitle>
-               <SheetDescription>
-                  Make changes to your profile here. Click save when you're done.
-               </SheetDescription>
-            </SheetHeader>
-            <div className="grid gap-4 py-4">
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="name" className="text-right">
-                     Name
-                  </Label>
-                  <Input id="name" value="Pedro Duarte" className="col-span-3" />
-               </div>
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="username" className="text-right">
-                     Username
-                  </Label>
-                  <Input id="username" value="@peduarte" className="col-span-3" />
-               </div>
-            </div>
-            <SheetFooter>
-               <SheetClose asChild>
-                  <Button type="submit">Save changes</Button>
-               </SheetClose>
-            </SheetFooter>
-         </SheetContent>
-      </Sheet>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/skeleton-demo.tsx b/apps/web/registry/miami/block/_sink/components/skeleton-demo.tsx
deleted file mode 100644
index c924c529..00000000
--- a/apps/web/registry/miami/block/_sink/components/skeleton-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Skeleton } from '~/registry/miami/ui/skeleton'
-
-export function SkeletonDemo() {
-   return (
-      <div className="flex items-center space-x-4">
-         <Skeleton className="size-12 rounded-full" />
-         <div className="space-y-2">
-            <Skeleton className="h-4 w-[250px]" />
-            <Skeleton className="h-4 w-[200px]" />
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/slider-demo.tsx b/apps/web/registry/miami/block/_sink/components/slider-demo.tsx
deleted file mode 100644
index 26380106..00000000
--- a/apps/web/registry/miami/block/_sink/components/slider-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/miami/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export function SliderDemo({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[50]}
-         max={100}
-         step={1}
-         className={ny('w-3/5', className)}
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/sonner-demo.tsx b/apps/web/registry/miami/block/_sink/components/sonner-demo.tsx
deleted file mode 100644
index 01800ef4..00000000
--- a/apps/web/registry/miami/block/_sink/components/sonner-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-
-import { toast } from 'sonner'
-
-import { Button } from '~/registry/miami/ui/button'
-
-export function SonnerDemo() {
-   return (
-      <Button
-         variant="outline"
-         onClick={() =>
-            toast('Event has been created', {
-               description: 'Sunday, December 03, 2023 at 9:00 AM',
-               action: {
-                  label: 'Undo',
-                  // eslint-disable-next-line no-console
-                  onClick: () => console.log('Undo'),
-               },
-            })}
-      >
-         Show Toast
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/switch-demo.tsx b/apps/web/registry/miami/block/_sink/components/switch-demo.tsx
deleted file mode 100644
index ebdee6e6..00000000
--- a/apps/web/registry/miami/block/_sink/components/switch-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Label } from '~/registry/miami/ui/label'
-import { Switch } from '~/registry/miami/ui/switch'
-
-export function SwitchDemo() {
-   return (
-      <div className="flex items-center space-x-2">
-         <Switch id="airplane-mode" />
-         <Label htmlFor="airplane-mode">Airplane Mode</Label>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/table-demo.tsx b/apps/web/registry/miami/block/_sink/components/table-demo.tsx
deleted file mode 100644
index 105a7c42..00000000
--- a/apps/web/registry/miami/block/_sink/components/table-demo.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-   Table,
-   TableBody,
-   TableCaption,
-   TableCell,
-   TableFooter,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-
-const invoices = [
-   {
-      invoice: 'INV001',
-      paymentStatus: 'Paid',
-      totalAmount: '$250.00',
-      paymentMethod: 'Credit Card',
-   },
-   {
-      invoice: 'INV002',
-      paymentStatus: 'Pending',
-      totalAmount: '$150.00',
-      paymentMethod: 'PayPal',
-   },
-   {
-      invoice: 'INV003',
-      paymentStatus: 'Unpaid',
-      totalAmount: '$350.00',
-      paymentMethod: 'Bank Transfer',
-   },
-   {
-      invoice: 'INV004',
-      paymentStatus: 'Paid',
-      totalAmount: '$450.00',
-      paymentMethod: 'Credit Card',
-   },
-   {
-      invoice: 'INV005',
-      paymentStatus: 'Paid',
-      totalAmount: '$550.00',
-      paymentMethod: 'PayPal',
-   },
-   {
-      invoice: 'INV006',
-      paymentStatus: 'Pending',
-      totalAmount: '$200.00',
-      paymentMethod: 'Bank Transfer',
-   },
-   {
-      invoice: 'INV007',
-      paymentStatus: 'Unpaid',
-      totalAmount: '$300.00',
-      paymentMethod: 'Credit Card',
-   },
-]
-
-export function TableDemo() {
-   return (
-      <Table>
-         <TableCaption>A list of your recent invoices.</TableCaption>
-         <TableHeader>
-            <TableRow>
-               <TableHead className="w-[100px]">Invoice</TableHead>
-               <TableHead>Status</TableHead>
-               <TableHead>Method</TableHead>
-               <TableHead className="text-right">Amount</TableHead>
-            </TableRow>
-         </TableHeader>
-         <TableBody>
-            {invoices.map(invoice => (
-               <TableRow key={invoice.invoice}>
-                  <TableCell className="font-medium">{invoice.invoice}</TableCell>
-                  <TableCell>{invoice.paymentStatus}</TableCell>
-                  <TableCell>{invoice.paymentMethod}</TableCell>
-                  <TableCell className="text-right">{invoice.totalAmount}</TableCell>
-               </TableRow>
-            ))}
-         </TableBody>
-         <TableFooter>
-            <TableRow>
-               <TableCell colSpan={3}>Total</TableCell>
-               <TableCell className="text-right">$2,500.00</TableCell>
-            </TableRow>
-         </TableFooter>
-      </Table>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/tabs-demo.tsx b/apps/web/registry/miami/block/_sink/components/tabs-demo.tsx
deleted file mode 100644
index 52b0ae15..00000000
--- a/apps/web/registry/miami/block/_sink/components/tabs-demo.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Tabs,
-   TabsContent,
-   TabsList,
-   TabsTrigger,
-} from '~/registry/miami/ui/tabs'
-
-export function TabsDemo() {
-   return (
-      <Tabs defaultValue="account" className="w-[400px]">
-         <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="account">Account</TabsTrigger>
-            <TabsTrigger value="password">Password</TabsTrigger>
-         </TabsList>
-         <TabsContent value="account">
-            <Card>
-               <CardHeader>
-                  <CardTitle>Account</CardTitle>
-                  <CardDescription>
-                     Make changes to your account here. Click save when you're done.
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="space-y-2">
-                  <div className="space-y-1">
-                     <Label htmlFor="name">Name</Label>
-                     <Input id="name" defaultValue="Pedro Duarte" />
-                  </div>
-                  <div className="space-y-1">
-                     <Label htmlFor="username">Username</Label>
-                     <Input id="username" defaultValue="@peduarte" />
-                  </div>
-               </CardContent>
-               <CardFooter>
-                  <Button>Save changes</Button>
-               </CardFooter>
-            </Card>
-         </TabsContent>
-         <TabsContent value="password">
-            <Card>
-               <CardHeader>
-                  <CardTitle>Password</CardTitle>
-                  <CardDescription>
-                     Change your password here. After saving, you'll be logged out.
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="space-y-2">
-                  <div className="space-y-1">
-                     <Label htmlFor="current">Current password</Label>
-                     <Input id="current" type="password" />
-                  </div>
-                  <div className="space-y-1">
-                     <Label htmlFor="new">New password</Label>
-                     <Input id="new" type="password" />
-                  </div>
-               </CardContent>
-               <CardFooter>
-                  <Button>Save password</Button>
-               </CardFooter>
-            </Card>
-         </TabsContent>
-      </Tabs>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/team-switcher copy.tsx b/apps/web/registry/miami/block/_sink/components/team-switcher copy.tsx
deleted file mode 100644
index 447183c3..00000000
--- a/apps/web/registry/miami/block/_sink/components/team-switcher copy.tsx	
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronsUpDown, Plus } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function TeamSwitcher({
-   teams,
-}: {
-   teams: {
-      name: string
-      logo: React.ElementType
-      plan: string
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-   const [activeTeam, setActiveTeam] = React.useState(teams[0])
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                        <activeTeam.logo className="size-4" />
-                     </div>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">
-                           {activeTeam.name}
-                        </span>
-                        <span className="truncate text-xs">{activeTeam.plan}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  align="start"
-                  side={isMobile ? 'bottom' : 'right'}
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
-                     Teams
-                  </DropdownMenuLabel>
-                  {teams.map((team, index) => (
-                     <DropdownMenuItem
-                        key={team.name}
-                        onClick={() => setActiveTeam(team)}
-                        className="gap-2 p-2"
-                     >
-                        <div className="flex size-6 items-center justify-center rounded-sm border">
-                           <team.logo className="size-4 shrink-0" />
-                        </div>
-                        {team.name}
-                        <DropdownMenuShortcut>
-                           ⌘
-                           {index + 1}
-                        </DropdownMenuShortcut>
-                     </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="gap-2 p-2">
-                     <div className="bg-background flex size-6 items-center justify-center rounded-md border">
-                        <Plus className="size-4" />
-                     </div>
-                     <div className="text-muted-foreground font-medium">Add team</div>
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/team-switcher.tsx b/apps/web/registry/miami/block/_sink/components/team-switcher.tsx
deleted file mode 100644
index 447183c3..00000000
--- a/apps/web/registry/miami/block/_sink/components/team-switcher.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronsUpDown, Plus } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function TeamSwitcher({
-   teams,
-}: {
-   teams: {
-      name: string
-      logo: React.ElementType
-      plan: string
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-   const [activeTeam, setActiveTeam] = React.useState(teams[0])
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                        <activeTeam.logo className="size-4" />
-                     </div>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">
-                           {activeTeam.name}
-                        </span>
-                        <span className="truncate text-xs">{activeTeam.plan}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  align="start"
-                  side={isMobile ? 'bottom' : 'right'}
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
-                     Teams
-                  </DropdownMenuLabel>
-                  {teams.map((team, index) => (
-                     <DropdownMenuItem
-                        key={team.name}
-                        onClick={() => setActiveTeam(team)}
-                        className="gap-2 p-2"
-                     >
-                        <div className="flex size-6 items-center justify-center rounded-sm border">
-                           <team.logo className="size-4 shrink-0" />
-                        </div>
-                        {team.name}
-                        <DropdownMenuShortcut>
-                           ⌘
-                           {index + 1}
-                        </DropdownMenuShortcut>
-                     </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="gap-2 p-2">
-                     <div className="bg-background flex size-6 items-center justify-center rounded-md border">
-                        <Plus className="size-4" />
-                     </div>
-                     <div className="text-muted-foreground font-medium">Add team</div>
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/textarea-demo.tsx b/apps/web/registry/miami/block/_sink/components/textarea-demo.tsx
deleted file mode 100644
index 427227da..00000000
--- a/apps/web/registry/miami/block/_sink/components/textarea-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Textarea } from '~/registry/miami/ui/textarea'
-
-export function TextareaDemo() {
-   return <Textarea placeholder="Type your message here." />
-}
diff --git a/apps/web/registry/miami/block/_sink/components/toast-demo.tsx b/apps/web/registry/miami/block/_sink/components/toast-demo.tsx
deleted file mode 100644
index 7ea56c29..00000000
--- a/apps/web/registry/miami/block/_sink/components/toast-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { useToast } from '~/registry/miami/hooks/use-toast'
-import { Button } from '~/registry/miami/ui/button'
-import { ToastAction } from '~/registry/miami/ui/toast'
-
-export function ToastDemo() {
-   const { toast } = useToast()
-
-   return (
-      <Button
-         variant="outline"
-         onClick={() => {
-            toast({
-               title: 'Scheduled: Catch up ',
-               description: 'Friday, February 10, 2023 at 5:57 PM',
-               action: (
-                  <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
-               ),
-            })
-         }}
-      >
-         Add to calendar
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/toggle-demo.tsx b/apps/web/registry/miami/block/_sink/components/toggle-demo.tsx
deleted file mode 100644
index 131e9056..00000000
--- a/apps/web/registry/miami/block/_sink/components/toggle-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Bold } from 'lucide-react'
-
-import { Toggle } from '~/registry/miami/ui/toggle'
-
-export function ToggleDemo() {
-   return (
-      <Toggle aria-label="Toggle italic">
-         <Bold className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/toggle-disabled.tsx b/apps/web/registry/miami/block/_sink/components/toggle-disabled.tsx
deleted file mode 100644
index 2c7af4b9..00000000
--- a/apps/web/registry/miami/block/_sink/components/toggle-disabled.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Underline } from 'lucide-react'
-
-import { Toggle } from '~/registry/miami/ui/toggle'
-
-export function ToggleDisabled() {
-   return (
-      <Toggle aria-label="Toggle italic" disabled>
-         <Underline className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/toggle-group-demo.tsx b/apps/web/registry/miami/block/_sink/components/toggle-group-demo.tsx
deleted file mode 100644
index 36efff14..00000000
--- a/apps/web/registry/miami/block/_sink/components/toggle-group-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Bold, Italic, Underline } from 'lucide-react'
-
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/miami/ui/toggle-group'
-
-export function ToggleGroupDemo() {
-   return (
-      <ToggleGroup type="multiple">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <Bold className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <Italic className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-            <Underline className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/toggle-outline.tsx b/apps/web/registry/miami/block/_sink/components/toggle-outline.tsx
deleted file mode 100644
index 657d1c34..00000000
--- a/apps/web/registry/miami/block/_sink/components/toggle-outline.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Italic } from 'lucide-react'
-
-import { Toggle } from '~/registry/miami/ui/toggle'
-
-export function ToggleOutline() {
-   return (
-      <Toggle variant="outline" aria-label="Toggle italic">
-         <Italic />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/toggle-with-text.tsx b/apps/web/registry/miami/block/_sink/components/toggle-with-text.tsx
deleted file mode 100644
index b52233a5..00000000
--- a/apps/web/registry/miami/block/_sink/components/toggle-with-text.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Italic } from 'lucide-react'
-
-import { Toggle } from '~/registry/miami/ui/toggle'
-
-export function ToggleWithText() {
-   return (
-      <Toggle aria-label="Toggle italic">
-         <Italic />
-         Italic
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/components/tooltip-demo.tsx b/apps/web/registry/miami/block/_sink/components/tooltip-demo.tsx
deleted file mode 100644
index dbb52e59..00000000
--- a/apps/web/registry/miami/block/_sink/components/tooltip-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-
-export function TooltipDemo() {
-   return (
-      <TooltipProvider>
-         <Tooltip>
-            <TooltipTrigger asChild>
-               <Button variant="outline">Hover</Button>
-            </TooltipTrigger>
-            <TooltipContent>
-               <p>Add to library</p>
-            </TooltipContent>
-         </Tooltip>
-      </TooltipProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/_sink/page.tsx b/apps/web/registry/miami/block/_sink/page.tsx
deleted file mode 100644
index fd23f8cc..00000000
--- a/apps/web/registry/miami/block/_sink/page.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import { AccordionDemo } from '~/registry/miami/block/_sink/components/accordion-demo'
-import { AlertDemo } from '~/registry/miami/block/_sink/components/alert-demo'
-import { AlertDialogDemo } from '~/registry/miami/block/_sink/components/alert-dialog-demo'
-import { AppSidebar } from '~/registry/miami/block/_sink/components/app-sidebar'
-import { AspectRatioDemo } from '~/registry/miami/block/_sink/components/aspect-ratio-demo'
-import { AvatarDemo } from '~/registry/miami/block/_sink/components/avatar-demo'
-import { BadgeDemo } from '~/registry/miami/block/_sink/components/badge-demo'
-import { BadgeDestructive } from '~/registry/miami/block/_sink/components/badge-destructive'
-import { BadgeOutline } from '~/registry/miami/block/_sink/components/badge-outline'
-import { BadgeSecondary } from '~/registry/miami/block/_sink/components/badge-secondary'
-import { BreadcrumbDemo } from '~/registry/miami/block/_sink/components/breadcrumb-demo'
-import { ButtonDemo } from '~/registry/miami/block/_sink/components/button-demo'
-import { ButtonDestructive } from '~/registry/miami/block/_sink/components/button-destructive'
-import { ButtonGhost } from '~/registry/miami/block/_sink/components/button-ghost'
-import { ButtonLink } from '~/registry/miami/block/_sink/components/button-link'
-import { ButtonLoading } from '~/registry/miami/block/_sink/components/button-loading'
-import { ButtonOutline } from '~/registry/miami/block/_sink/components/button-outline'
-import { ButtonSecondary } from '~/registry/miami/block/_sink/components/button-secondary'
-import { ButtonWithIcon } from '~/registry/miami/block/_sink/components/button-with-icon'
-import { CalendarDemo } from '~/registry/miami/block/_sink/components/calendar-demo'
-import { CardDemo } from '~/registry/miami/block/_sink/components/card-demo'
-import { CarouselDemo } from '~/registry/miami/block/_sink/components/carousel-demo'
-import { CheckboxDemo } from '~/registry/miami/block/_sink/components/checkbox-demo'
-import { CollapsibleDemo } from '~/registry/miami/block/_sink/components/collapsible-demo'
-import { ComboboxDemo } from '~/registry/miami/block/_sink/components/combobox-demo'
-import { CommandDemo } from '~/registry/miami/block/_sink/components/command-demo'
-import { ComponentWrapper } from '~/registry/miami/block/_sink/components/component-wrapper'
-import { ContextMenuDemo } from '~/registry/miami/block/_sink/components/context-menu-demo'
-import { DatePickerDemo } from '~/registry/miami/block/_sink/components/date-picker-demo'
-import { DialogDemo } from '~/registry/miami/block/_sink/components/dialog-demo'
-import { DrawerDemo } from '~/registry/miami/block/_sink/components/drawer-demo'
-import { DropdownMenuDemo } from '~/registry/miami/block/_sink/components/dropdown-menu-demo'
-import { HoverCardDemo } from '~/registry/miami/block/_sink/components/hover-card-demo'
-import { InputDemo } from '~/registry/miami/block/_sink/components/input-demo'
-import { InputOTPDemo } from '~/registry/miami/block/_sink/components/input-otp-demo'
-import { LabelDemo } from '~/registry/miami/block/_sink/components/label-demo'
-import { MenubarDemo } from '~/registry/miami/block/_sink/components/menubar-demo'
-import { NavigationMenuDemo } from '~/registry/miami/block/_sink/components/navigation-menu-demo'
-import { PaginationDemo } from '~/registry/miami/block/_sink/components/pagination-demo'
-import { PopoverDemo } from '~/registry/miami/block/_sink/components/popover-demo'
-import { ProgressDemo } from '~/registry/miami/block/_sink/components/progress-demo'
-import { RadioGroupDemo } from '~/registry/miami/block/_sink/components/radio-group-demo'
-import { ResizableHandleDemo } from '~/registry/miami/block/_sink/components/resizable-handle'
-import { ScrollAreaDemo } from '~/registry/miami/block/_sink/components/scroll-area-demo'
-import { SelectDemo } from '~/registry/miami/block/_sink/components/select-demo'
-import { SeparatorDemo } from '~/registry/miami/block/_sink/components/separator-demo'
-import { SheetDemo } from '~/registry/miami/block/_sink/components/sheet-demo'
-import { SkeletonDemo } from '~/registry/miami/block/_sink/components/skeleton-demo'
-import { SliderDemo } from '~/registry/miami/block/_sink/components/slider-demo'
-import { SonnerDemo } from '~/registry/miami/block/_sink/components/sonner-demo'
-import { SwitchDemo } from '~/registry/miami/block/_sink/components/switch-demo'
-import { TableDemo } from '~/registry/miami/block/_sink/components/table-demo'
-import { TabsDemo } from '~/registry/miami/block/_sink/components/tabs-demo'
-import { TextareaDemo } from '~/registry/miami/block/_sink/components/textarea-demo'
-import { ToastDemo } from '~/registry/miami/block/_sink/components/toast-demo'
-import { ToggleDemo } from '~/registry/miami/block/_sink/components/toggle-demo'
-import { ToggleDisabled } from '~/registry/miami/block/_sink/components/toggle-disabled'
-import { ToggleGroupDemo } from '~/registry/miami/block/_sink/components/toggle-group-demo'
-import { ToggleOutline } from '~/registry/miami/block/_sink/components/toggle-outline'
-import { ToggleWithText } from '~/registry/miami/block/_sink/components/toggle-with-text'
-import { TooltipDemo } from '~/registry/miami/block/_sink/components/tooltip-demo'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export default function SinkPage() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <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">
-               <div className="flex items-center gap-2 px-4">
-                  <SidebarTrigger className="-ml-1" />
-                  <Separator orientation="vertical" className="mr-2 h-4" />
-                  <Breadcrumb>
-                     <BreadcrumbList>
-                        <BreadcrumbItem className="hidden md:block">
-                           <BreadcrumbLink href="#">
-                              Building Your Application
-                           </BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator className="hidden md:block" />
-                        <BreadcrumbItem>
-                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                        </BreadcrumbItem>
-                     </BreadcrumbList>
-                  </Breadcrumb>
-               </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-                  <ComponentWrapper name="Accordion">
-                     <AccordionDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Alert">
-                     <AlertDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="AlertDialog">
-                     <AlertDialogDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="AspectRatio">
-                     <AspectRatioDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Avatar">
-                     <AvatarDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Badge">
-                     <BadgeDemo />
-                     <BadgeDestructive />
-                     <BadgeOutline />
-                     <BadgeSecondary />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Breadcrumb">
-                     <BreadcrumbDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Button">
-                     <div className="flex items-center gap-2">
-                        <ButtonDemo />
-                        <ButtonDestructive />
-                        <ButtonGhost />
-                        <ButtonLink />
-                     </div>
-                     <div className="flex items-center gap-2">
-                        <ButtonLoading />
-                        <ButtonOutline />
-                        <ButtonSecondary />
-                     </div>
-                     <div className="flex items-center gap-2">
-                        <ButtonWithIcon />
-                     </div>
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Calendar">
-                     <CalendarDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Card">
-                     <CardDemo className="w-full" />
-                  </ComponentWrapper>
-                  <ComponentWrapper
-                     name="Carousel"
-                     className="[&_.max-w-xs]:max-w-[70%]"
-                  >
-                     <CarouselDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Checkbox">
-                     <CheckboxDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Collapsible">
-                     <CollapsibleDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Combobox">
-                     <ComboboxDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper
-                     name="Command"
-                     className="[&_[cmdk-root]]:md:min-w-max"
-                  >
-                     <CommandDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="ContextMenu">
-                     <ContextMenuDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="DatePicker">
-                     <DatePickerDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Dialog">
-                     <DialogDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Drawer">
-                     <DrawerDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="DropdownMenu">
-                     <DropdownMenuDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="HoverCard">
-                     <HoverCardDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Input">
-                     <InputDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="InputOTP">
-                     <InputOTPDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Label">
-                     <LabelDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Menubar">
-                     <MenubarDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="NavigationMenu" className="col-span-2">
-                     <NavigationMenuDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Pagination">
-                     <PaginationDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Popover">
-                     <PopoverDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Progress">
-                     <ProgressDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="RadioGroup">
-                     <RadioGroupDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Resizable" className="col-span-2">
-                     <ResizableHandleDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="ScrollArea">
-                     <ScrollAreaDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Select">
-                     <SelectDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Separator">
-                     <SeparatorDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Sheet">
-                     <SheetDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Skeleton">
-                     <SkeletonDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Slider">
-                     <SliderDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Sonner">
-                     <SonnerDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Switch">
-                     <SwitchDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Table" className="col-span-2">
-                     <TableDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Tabs">
-                     <TabsDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Textarea">
-                     <TextareaDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Toast">
-                     <ToastDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Toggle">
-                     <div className="flex items-center gap-2">
-                        <ToggleDemo />
-                        <ToggleDisabled />
-                        <ToggleOutline />
-                        <ToggleWithText />
-                     </div>
-                  </ComponentWrapper>
-                  <ComponentWrapper name="ToggleGroup">
-                     <ToggleGroupDemo />
-                  </ComponentWrapper>
-                  <ComponentWrapper name="Tooltip">
-                     <TooltipDemo />
-                  </ComponentWrapper>
-               </div>
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/authentication-01.tsx b/apps/web/registry/miami/block/authentication-01.tsx
deleted file mode 100644
index f3ab7121..00000000
--- a/apps/web/registry/miami/block/authentication-01.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export const description
-  = 'A simple login form with email and password. The submit button says \'Sign in\'.'
-
-export const iframeHeight = '600px'
-
-export const containerClassName
-  = 'w-full h-screen flex items-center justify-center px-4'
-
-export default function LoginForm() {
-   return (
-      <Card className="w-full max-w-sm">
-         <CardHeader>
-            <CardTitle className="text-2xl">Login</CardTitle>
-            <CardDescription>
-               Enter your email below to login to your account.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-4">
-            <div className="grid gap-2">
-               <Label htmlFor="email">Email</Label>
-               <Input id="email" type="email" placeholder="m@example.com" required />
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor="password">Password</Label>
-               <Input id="password" type="password" required />
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button className="w-full">Sign in</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/authentication-02.tsx b/apps/web/registry/miami/block/authentication-02.tsx
deleted file mode 100644
index 410bb9b6..00000000
--- a/apps/web/registry/miami/block/authentication-02.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import Link from 'next/link'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export const description
-  = 'A login form with email and password. There\'s an option to login with Google and a link to sign up if you don\'t have an account.'
-
-export const iframeHeight = '600px'
-
-export const containerClassName
-  = 'w-full h-screen flex items-center justify-center px-4'
-
-export default function LoginForm() {
-   return (
-      <Card className="mx-auto max-w-sm">
-         <CardHeader>
-            <CardTitle className="text-2xl">Login</CardTitle>
-            <CardDescription>
-               Enter your email below to login to your account
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-4">
-               <div className="grid gap-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                     id="email"
-                     type="email"
-                     placeholder="m@example.com"
-                     required
-                  />
-               </div>
-               <div className="grid gap-2">
-                  <div className="flex items-center">
-                     <Label htmlFor="password">Password</Label>
-                     <Link href="#" className="ml-auto inline-block text-sm underline">
-                        Forgot your password?
-                     </Link>
-                  </div>
-                  <Input id="password" type="password" required />
-               </div>
-               <Button type="submit" className="w-full">
-                  Login
-               </Button>
-               <Button variant="outline" className="w-full">
-                  Login with Google
-               </Button>
-            </div>
-            <div className="mt-4 text-center text-sm">
-               Don&apos;t have an account?
-               {' '}
-               <Link href="#" className="underline">
-                  Sign up
-               </Link>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/authentication-03.tsx b/apps/web/registry/miami/block/authentication-03.tsx
deleted file mode 100644
index 1bc3eab1..00000000
--- a/apps/web/registry/miami/block/authentication-03.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import Link from 'next/link'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export const description
-  = 'A sign up form with first name, last name, email and password inside a card. There\'s an option to sign up with GitHub and a link to login if you already have an account'
-
-export const iframeHeight = '600px'
-
-export const containerClassName
-  = 'w-full h-screen flex items-center justify-center px-4'
-
-export default function LoginForm() {
-   return (
-      <Card className="mx-auto max-w-sm">
-         <CardHeader>
-            <CardTitle className="text-xl">Sign Up</CardTitle>
-            <CardDescription>
-               Enter your information to create an account
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-4">
-               <div className="grid grid-cols-2 gap-4">
-                  <div className="grid gap-2">
-                     <Label htmlFor="first-name">First name</Label>
-                     <Input id="first-name" placeholder="Max" required />
-                  </div>
-                  <div className="grid gap-2">
-                     <Label htmlFor="last-name">Last name</Label>
-                     <Input id="last-name" placeholder="Robinson" required />
-                  </div>
-               </div>
-               <div className="grid gap-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                     id="email"
-                     type="email"
-                     placeholder="m@example.com"
-                     required
-                  />
-               </div>
-               <div className="grid gap-2">
-                  <Label htmlFor="password">Password</Label>
-                  <Input id="password" type="password" />
-               </div>
-               <Button type="submit" className="w-full">
-                  Create an account
-               </Button>
-               <Button variant="outline" className="w-full">
-                  Sign up with GitHub
-               </Button>
-            </div>
-            <div className="mt-4 text-center text-sm">
-               Already have an account?
-               {' '}
-               <Link href="#" className="underline">
-                  Sign in
-               </Link>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/authentication-04.tsx b/apps/web/registry/miami/block/authentication-04.tsx
deleted file mode 100644
index fe0e2387..00000000
--- a/apps/web/registry/miami/block/authentication-04.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import Image from 'next/image'
-import Link from 'next/link'
-
-import { Button } from '~/registry/miami/ui/button'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export const description
-  = 'A login page with two columns. The first column has the login form with email and password. There\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'
-
-export const iframeHeight = '800px'
-
-export const containerClassName = 'w-full h-full p-4 lg:p-0'
-
-export default function Dashboard() {
-   return (
-      <div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
-         <div className="flex items-center justify-center py-12">
-            <div className="mx-auto grid w-[350px] gap-6">
-               <div className="grid gap-2 text-center">
-                  <h1 className="text-3xl font-bold">Login</h1>
-                  <p className="text-muted-foreground text-balance">
-                     Enter your email below to login to your account
-                  </p>
-               </div>
-               <div className="grid gap-4">
-                  <div className="grid gap-2">
-                     <Label htmlFor="email">Email</Label>
-                     <Input
-                        id="email"
-                        type="email"
-                        placeholder="m@example.com"
-                        required
-                     />
-                  </div>
-                  <div className="grid gap-2">
-                     <div className="flex items-center">
-                        <Label htmlFor="password">Password</Label>
-                        <Link
-                           href="/forgot-password"
-                           className="ml-auto inline-block text-sm underline"
-                        >
-                           Forgot your password?
-                        </Link>
-                     </div>
-                     <Input id="password" type="password" required />
-                  </div>
-                  <Button type="submit" className="w-full">
-                     Login
-                  </Button>
-                  <Button variant="outline" className="w-full">
-                     Login with Google
-                  </Button>
-               </div>
-               <div className="mt-4 text-center text-sm">
-                  Don&apos;t have an account?
-                  {' '}
-                  <Link href="#" className="underline">
-                     Sign up
-                  </Link>
-               </div>
-            </div>
-         </div>
-         <div className="bg-muted hidden lg:block">
-            <Image
-               src="/placeholder.svg"
-               alt="Image"
-               width="1920"
-               height="1080"
-               className="size-full object-cover dark:brightness-[0.2] dark:grayscale"
-            />
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-area-axes.tsx b/apps/web/registry/miami/block/chart-area-axes.tsx
deleted file mode 100644
index ac21eed0..00000000
--- a/apps/web/registry/miami/block/chart-area-axes.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'An area chart with axes'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Axes</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: -20,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <YAxis
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickCount={3}
-                  />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="var(--color-mobile)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-area-default.tsx b/apps/web/registry/miami/block/chart-area-default.tsx
deleted file mode 100644
index 0b64a90e..00000000
--- a/apps/web/registry/miami/block/chart-area-default.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A simple area chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-area-gradient.tsx b/apps/web/registry/miami/block/chart-area-gradient.tsx
deleted file mode 100644
index b4fdb42e..00000000
--- a/apps/web/registry/miami/block/chart-area-gradient.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'An area chart with gradient fill'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Gradient</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                  <defs>
-                     <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-                        <stop
-                           offset="5%"
-                           stopColor="var(--color-desktop)"
-                           stopOpacity={0.8}
-                        />
-                        <stop
-                           offset="95%"
-                           stopColor="var(--color-desktop)"
-                           stopOpacity={0.1}
-                        />
-                     </linearGradient>
-                     <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-                        <stop
-                           offset="5%"
-                           stopColor="var(--color-mobile)"
-                           stopOpacity={0.8}
-                        />
-                        <stop
-                           offset="95%"
-                           stopColor="var(--color-mobile)"
-                           stopOpacity={0.1}
-                        />
-                     </linearGradient>
-                  </defs>
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="url(#fillMobile)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="url(#fillDesktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-area-icons.tsx b/apps/web/registry/miami/block/chart-area-icons.tsx
deleted file mode 100644
index 7c467ed1..00000000
--- a/apps/web/registry/miami/block/chart-area-icons.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-'use client'
-
-import { TrendingDown, TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'An area chart with icons'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-      icon: TrendingDown,
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-      icon: TrendingUp,
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Icons</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="var(--color-mobile)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-                  <ChartLegend content={<ChartLegendContent />} />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-area-interactive.tsx b/apps/web/registry/miami/block/chart-area-interactive.tsx
deleted file mode 100644
index 85d5527d..00000000
--- a/apps/web/registry/miami/block/chart-area-interactive.tsx
+++ /dev/null
@@ -1,269 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-
-export const description = 'An interactive area chart'
-
-const chartData = [
-   { date: '2024-04-01', desktop: 222, mobile: 150 },
-   { date: '2024-04-02', desktop: 97, mobile: 180 },
-   { date: '2024-04-03', desktop: 167, mobile: 120 },
-   { date: '2024-04-04', desktop: 242, mobile: 260 },
-   { date: '2024-04-05', desktop: 373, mobile: 290 },
-   { date: '2024-04-06', desktop: 301, mobile: 340 },
-   { date: '2024-04-07', desktop: 245, mobile: 180 },
-   { date: '2024-04-08', desktop: 409, mobile: 320 },
-   { date: '2024-04-09', desktop: 59, mobile: 110 },
-   { date: '2024-04-10', desktop: 261, mobile: 190 },
-   { date: '2024-04-11', desktop: 327, mobile: 350 },
-   { date: '2024-04-12', desktop: 292, mobile: 210 },
-   { date: '2024-04-13', desktop: 342, mobile: 380 },
-   { date: '2024-04-14', desktop: 137, mobile: 220 },
-   { date: '2024-04-15', desktop: 120, mobile: 170 },
-   { date: '2024-04-16', desktop: 138, mobile: 190 },
-   { date: '2024-04-17', desktop: 446, mobile: 360 },
-   { date: '2024-04-18', desktop: 364, mobile: 410 },
-   { date: '2024-04-19', desktop: 243, mobile: 180 },
-   { date: '2024-04-20', desktop: 89, mobile: 150 },
-   { date: '2024-04-21', desktop: 137, mobile: 200 },
-   { date: '2024-04-22', desktop: 224, mobile: 170 },
-   { date: '2024-04-23', desktop: 138, mobile: 230 },
-   { date: '2024-04-24', desktop: 387, mobile: 290 },
-   { date: '2024-04-25', desktop: 215, mobile: 250 },
-   { date: '2024-04-26', desktop: 75, mobile: 130 },
-   { date: '2024-04-27', desktop: 383, mobile: 420 },
-   { date: '2024-04-28', desktop: 122, mobile: 180 },
-   { date: '2024-04-29', desktop: 315, mobile: 240 },
-   { date: '2024-04-30', desktop: 454, mobile: 380 },
-   { date: '2024-05-01', desktop: 165, mobile: 220 },
-   { date: '2024-05-02', desktop: 293, mobile: 310 },
-   { date: '2024-05-03', desktop: 247, mobile: 190 },
-   { date: '2024-05-04', desktop: 385, mobile: 420 },
-   { date: '2024-05-05', desktop: 481, mobile: 390 },
-   { date: '2024-05-06', desktop: 498, mobile: 520 },
-   { date: '2024-05-07', desktop: 388, mobile: 300 },
-   { date: '2024-05-08', desktop: 149, mobile: 210 },
-   { date: '2024-05-09', desktop: 227, mobile: 180 },
-   { date: '2024-05-10', desktop: 293, mobile: 330 },
-   { date: '2024-05-11', desktop: 335, mobile: 270 },
-   { date: '2024-05-12', desktop: 197, mobile: 240 },
-   { date: '2024-05-13', desktop: 197, mobile: 160 },
-   { date: '2024-05-14', desktop: 448, mobile: 490 },
-   { date: '2024-05-15', desktop: 473, mobile: 380 },
-   { date: '2024-05-16', desktop: 338, mobile: 400 },
-   { date: '2024-05-17', desktop: 499, mobile: 420 },
-   { date: '2024-05-18', desktop: 315, mobile: 350 },
-   { date: '2024-05-19', desktop: 235, mobile: 180 },
-   { date: '2024-05-20', desktop: 177, mobile: 230 },
-   { date: '2024-05-21', desktop: 82, mobile: 140 },
-   { date: '2024-05-22', desktop: 81, mobile: 120 },
-   { date: '2024-05-23', desktop: 252, mobile: 290 },
-   { date: '2024-05-24', desktop: 294, mobile: 220 },
-   { date: '2024-05-25', desktop: 201, mobile: 250 },
-   { date: '2024-05-26', desktop: 213, mobile: 170 },
-   { date: '2024-05-27', desktop: 420, mobile: 460 },
-   { date: '2024-05-28', desktop: 233, mobile: 190 },
-   { date: '2024-05-29', desktop: 78, mobile: 130 },
-   { date: '2024-05-30', desktop: 340, mobile: 280 },
-   { date: '2024-05-31', desktop: 178, mobile: 230 },
-   { date: '2024-06-01', desktop: 178, mobile: 200 },
-   { date: '2024-06-02', desktop: 470, mobile: 410 },
-   { date: '2024-06-03', desktop: 103, mobile: 160 },
-   { date: '2024-06-04', desktop: 439, mobile: 380 },
-   { date: '2024-06-05', desktop: 88, mobile: 140 },
-   { date: '2024-06-06', desktop: 294, mobile: 250 },
-   { date: '2024-06-07', desktop: 323, mobile: 370 },
-   { date: '2024-06-08', desktop: 385, mobile: 320 },
-   { date: '2024-06-09', desktop: 438, mobile: 480 },
-   { date: '2024-06-10', desktop: 155, mobile: 200 },
-   { date: '2024-06-11', desktop: 92, mobile: 150 },
-   { date: '2024-06-12', desktop: 492, mobile: 420 },
-   { date: '2024-06-13', desktop: 81, mobile: 130 },
-   { date: '2024-06-14', desktop: 426, mobile: 380 },
-   { date: '2024-06-15', desktop: 307, mobile: 350 },
-   { date: '2024-06-16', desktop: 371, mobile: 310 },
-   { date: '2024-06-17', desktop: 475, mobile: 520 },
-   { date: '2024-06-18', desktop: 107, mobile: 170 },
-   { date: '2024-06-19', desktop: 341, mobile: 290 },
-   { date: '2024-06-20', desktop: 408, mobile: 450 },
-   { date: '2024-06-21', desktop: 169, mobile: 210 },
-   { date: '2024-06-22', desktop: 317, mobile: 270 },
-   { date: '2024-06-23', desktop: 480, mobile: 530 },
-   { date: '2024-06-24', desktop: 132, mobile: 180 },
-   { date: '2024-06-25', desktop: 141, mobile: 190 },
-   { date: '2024-06-26', desktop: 434, mobile: 380 },
-   { date: '2024-06-27', desktop: 448, mobile: 490 },
-   { date: '2024-06-28', desktop: 149, mobile: 200 },
-   { date: '2024-06-29', desktop: 103, mobile: 160 },
-   { date: '2024-06-30', desktop: 446, mobile: 400 },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   const [timeRange, setTimeRange] = React.useState('90d')
-
-   const filteredData = chartData.filter((item) => {
-      const date = new Date(item.date)
-      const referenceDate = new Date('2024-06-30')
-      let daysToSubtract = 90
-      if (timeRange === '30d') {
-         daysToSubtract = 30
-      }
-      else if (timeRange === '7d') {
-         daysToSubtract = 7
-      }
-      const startDate = new Date(referenceDate)
-      startDate.setDate(startDate.getDate() - daysToSubtract)
-      return date >= startDate
-   })
-
-   return (
-      <Card>
-         <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
-            <div className="grid flex-1 gap-1 text-center sm:text-left">
-               <CardTitle>Area Chart - Interactive</CardTitle>
-               <CardDescription>
-                  Showing total visitors for the last 3 months
-               </CardDescription>
-            </div>
-            <Select value={timeRange} onValueChange={setTimeRange}>
-               <SelectTrigger
-                  className="w-[160px] rounded-lg sm:ml-auto"
-                  aria-label="Select a value"
-               >
-                  <SelectValue placeholder="Last 3 months" />
-               </SelectTrigger>
-               <SelectContent className="rounded-xl">
-                  <SelectItem value="90d" className="rounded-lg">
-                     Last 3 months
-                  </SelectItem>
-                  <SelectItem value="30d" className="rounded-lg">
-                     Last 30 days
-                  </SelectItem>
-                  <SelectItem value="7d" className="rounded-lg">
-                     Last 7 days
-                  </SelectItem>
-               </SelectContent>
-            </Select>
-         </CardHeader>
-         <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
-            <ChartContainer
-               config={chartConfig}
-               className="aspect-auto h-[250px] w-full"
-            >
-               <AreaChart data={filteredData}>
-                  <defs>
-                     <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-                        <stop
-                           offset="5%"
-                           stopColor="var(--color-desktop)"
-                           stopOpacity={0.8}
-                        />
-                        <stop
-                           offset="95%"
-                           stopColor="var(--color-desktop)"
-                           stopOpacity={0.1}
-                        />
-                     </linearGradient>
-                     <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-                        <stop
-                           offset="5%"
-                           stopColor="var(--color-mobile)"
-                           stopOpacity={0.8}
-                        />
-                        <stop
-                           offset="95%"
-                           stopColor="var(--color-mobile)"
-                           stopOpacity={0.1}
-                        />
-                     </linearGradient>
-                  </defs>
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     minTickGap={32}
-                     tickFormatter={(value) => {
-                        const date = new Date(value)
-                        return date.toLocaleDateString('en-US', {
-                           month: 'short',
-                           day: 'numeric',
-                        })
-                     }}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={(
-                        <ChartTooltipContent
-                           labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 month: 'short',
-                                 day: 'numeric',
-                              })
-                           }}
-                           indicator="dot"
-                        />
-                     )}
-                  />
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="url(#fillMobile)"
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="url(#fillDesktop)"
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-                  <ChartLegend content={<ChartLegendContent />} />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-area-legend.tsx b/apps/web/registry/miami/block/chart-area-legend.tsx
deleted file mode 100644
index 9f9dc28b..00000000
--- a/apps/web/registry/miami/block/chart-area-legend.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'An area chart with a legend'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Legend</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="var(--color-mobile)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-                  <ChartLegend content={<ChartLegendContent />} />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-area-linear.tsx b/apps/web/registry/miami/block/chart-area-linear.tsx
deleted file mode 100644
index 9957dfd7..00000000
--- a/apps/web/registry/miami/block/chart-area-linear.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A linear area chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Linear</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="dot" hideLabel />}
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="linear"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-area-stacked-expand.tsx b/apps/web/registry/miami/block/chart-area-stacked-expand.tsx
deleted file mode 100644
index 6d81a874..00000000
--- a/apps/web/registry/miami/block/chart-area-stacked-expand.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A stacked area chart with expand stacking'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80, other: 45 },
-   { month: 'February', desktop: 305, mobile: 200, other: 100 },
-   { month: 'March', desktop: 237, mobile: 120, other: 150 },
-   { month: 'April', desktop: 73, mobile: 190, other: 50 },
-   { month: 'May', desktop: 209, mobile: 130, other: 100 },
-   { month: 'June', desktop: 214, mobile: 140, other: 160 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-3))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Stacked Expanded</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                     top: 12,
-                  }}
-                  stackOffset="expand"
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <Area
-                     dataKey="other"
-                     type="natural"
-                     fill="var(--color-other)"
-                     fillOpacity={0.1}
-                     stroke="var(--color-other)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="var(--color-mobile)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-area-stacked.tsx b/apps/web/registry/miami/block/chart-area-stacked.tsx
deleted file mode 100644
index becf5e88..00000000
--- a/apps/web/registry/miami/block/chart-area-stacked.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A stacked area chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Stacked</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="dot" />}
-                  />
-                  <Area
-                     dataKey="mobile"
-                     type="natural"
-                     fill="var(--color-mobile)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-mobile)"
-                     stackId="a"
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="natural"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                     stackId="a"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-area-step.tsx b/apps/web/registry/miami/block/chart-area-step.tsx
deleted file mode 100644
index af39855e..00000000
--- a/apps/web/registry/miami/block/chart-area-step.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client'
-
-import { Activity, TrendingUp } from 'lucide-react'
-import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A step area chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-      icon: Activity,
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Area Chart - Step</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Area
-                     dataKey="desktop"
-                     type="step"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-desktop)"
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     January - June 2024
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-bar-active.tsx b/apps/web/registry/miami/block/chart-bar-active.tsx
deleted file mode 100644
index fff43d66..00000000
--- a/apps/web/registry/miami/block/chart-bar-active.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A bar chart with an active bar'
-
-const chartData = [
-   { browser: 'chrome', visitors: 187, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 275, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Active</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="browser"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value =>
-                        chartConfig[value as keyof typeof chartConfig]?.label}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Bar
-                     dataKey="visitors"
-                     strokeWidth={2}
-                     radius={8}
-                     activeIndex={2}
-                     activeBar={({ ...props }) => {
-                        return (
-                           <Rectangle
-                              {...props}
-                              fillOpacity={0.8}
-                              stroke={props.payload.fill}
-                              strokeDasharray={4}
-                              strokeDashoffset={4}
-                           />
-                        )
-                     }}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-bar-default.tsx b/apps/web/registry/miami/block/chart-bar-default.tsx
deleted file mode 100644
index 94a414fd..00000000
--- a/apps/web/registry/miami/block/chart-bar-default.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A bar chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-bar-horizontal.tsx b/apps/web/registry/miami/block/chart-bar-horizontal.tsx
deleted file mode 100644
index 041ba2be..00000000
--- a/apps/web/registry/miami/block/chart-bar-horizontal.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A horizontal bar chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Horizontal</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart
-                  accessibilityLayer
-                  data={chartData}
-                  layout="vertical"
-                  margin={{
-                     left: -20,
-                  }}
-               >
-                  <XAxis type="number" dataKey="desktop" hide />
-                  <YAxis
-                     dataKey="month"
-                     type="category"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={5} />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-bar-interactive.tsx b/apps/web/registry/miami/block/chart-bar-interactive.tsx
deleted file mode 100644
index 7bd2618d..00000000
--- a/apps/web/registry/miami/block/chart-bar-interactive.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'An interactive bar chart'
-
-const chartData = [
-   { date: '2024-04-01', desktop: 222, mobile: 150 },
-   { date: '2024-04-02', desktop: 97, mobile: 180 },
-   { date: '2024-04-03', desktop: 167, mobile: 120 },
-   { date: '2024-04-04', desktop: 242, mobile: 260 },
-   { date: '2024-04-05', desktop: 373, mobile: 290 },
-   { date: '2024-04-06', desktop: 301, mobile: 340 },
-   { date: '2024-04-07', desktop: 245, mobile: 180 },
-   { date: '2024-04-08', desktop: 409, mobile: 320 },
-   { date: '2024-04-09', desktop: 59, mobile: 110 },
-   { date: '2024-04-10', desktop: 261, mobile: 190 },
-   { date: '2024-04-11', desktop: 327, mobile: 350 },
-   { date: '2024-04-12', desktop: 292, mobile: 210 },
-   { date: '2024-04-13', desktop: 342, mobile: 380 },
-   { date: '2024-04-14', desktop: 137, mobile: 220 },
-   { date: '2024-04-15', desktop: 120, mobile: 170 },
-   { date: '2024-04-16', desktop: 138, mobile: 190 },
-   { date: '2024-04-17', desktop: 446, mobile: 360 },
-   { date: '2024-04-18', desktop: 364, mobile: 410 },
-   { date: '2024-04-19', desktop: 243, mobile: 180 },
-   { date: '2024-04-20', desktop: 89, mobile: 150 },
-   { date: '2024-04-21', desktop: 137, mobile: 200 },
-   { date: '2024-04-22', desktop: 224, mobile: 170 },
-   { date: '2024-04-23', desktop: 138, mobile: 230 },
-   { date: '2024-04-24', desktop: 387, mobile: 290 },
-   { date: '2024-04-25', desktop: 215, mobile: 250 },
-   { date: '2024-04-26', desktop: 75, mobile: 130 },
-   { date: '2024-04-27', desktop: 383, mobile: 420 },
-   { date: '2024-04-28', desktop: 122, mobile: 180 },
-   { date: '2024-04-29', desktop: 315, mobile: 240 },
-   { date: '2024-04-30', desktop: 454, mobile: 380 },
-   { date: '2024-05-01', desktop: 165, mobile: 220 },
-   { date: '2024-05-02', desktop: 293, mobile: 310 },
-   { date: '2024-05-03', desktop: 247, mobile: 190 },
-   { date: '2024-05-04', desktop: 385, mobile: 420 },
-   { date: '2024-05-05', desktop: 481, mobile: 390 },
-   { date: '2024-05-06', desktop: 498, mobile: 520 },
-   { date: '2024-05-07', desktop: 388, mobile: 300 },
-   { date: '2024-05-08', desktop: 149, mobile: 210 },
-   { date: '2024-05-09', desktop: 227, mobile: 180 },
-   { date: '2024-05-10', desktop: 293, mobile: 330 },
-   { date: '2024-05-11', desktop: 335, mobile: 270 },
-   { date: '2024-05-12', desktop: 197, mobile: 240 },
-   { date: '2024-05-13', desktop: 197, mobile: 160 },
-   { date: '2024-05-14', desktop: 448, mobile: 490 },
-   { date: '2024-05-15', desktop: 473, mobile: 380 },
-   { date: '2024-05-16', desktop: 338, mobile: 400 },
-   { date: '2024-05-17', desktop: 499, mobile: 420 },
-   { date: '2024-05-18', desktop: 315, mobile: 350 },
-   { date: '2024-05-19', desktop: 235, mobile: 180 },
-   { date: '2024-05-20', desktop: 177, mobile: 230 },
-   { date: '2024-05-21', desktop: 82, mobile: 140 },
-   { date: '2024-05-22', desktop: 81, mobile: 120 },
-   { date: '2024-05-23', desktop: 252, mobile: 290 },
-   { date: '2024-05-24', desktop: 294, mobile: 220 },
-   { date: '2024-05-25', desktop: 201, mobile: 250 },
-   { date: '2024-05-26', desktop: 213, mobile: 170 },
-   { date: '2024-05-27', desktop: 420, mobile: 460 },
-   { date: '2024-05-28', desktop: 233, mobile: 190 },
-   { date: '2024-05-29', desktop: 78, mobile: 130 },
-   { date: '2024-05-30', desktop: 340, mobile: 280 },
-   { date: '2024-05-31', desktop: 178, mobile: 230 },
-   { date: '2024-06-01', desktop: 178, mobile: 200 },
-   { date: '2024-06-02', desktop: 470, mobile: 410 },
-   { date: '2024-06-03', desktop: 103, mobile: 160 },
-   { date: '2024-06-04', desktop: 439, mobile: 380 },
-   { date: '2024-06-05', desktop: 88, mobile: 140 },
-   { date: '2024-06-06', desktop: 294, mobile: 250 },
-   { date: '2024-06-07', desktop: 323, mobile: 370 },
-   { date: '2024-06-08', desktop: 385, mobile: 320 },
-   { date: '2024-06-09', desktop: 438, mobile: 480 },
-   { date: '2024-06-10', desktop: 155, mobile: 200 },
-   { date: '2024-06-11', desktop: 92, mobile: 150 },
-   { date: '2024-06-12', desktop: 492, mobile: 420 },
-   { date: '2024-06-13', desktop: 81, mobile: 130 },
-   { date: '2024-06-14', desktop: 426, mobile: 380 },
-   { date: '2024-06-15', desktop: 307, mobile: 350 },
-   { date: '2024-06-16', desktop: 371, mobile: 310 },
-   { date: '2024-06-17', desktop: 475, mobile: 520 },
-   { date: '2024-06-18', desktop: 107, mobile: 170 },
-   { date: '2024-06-19', desktop: 341, mobile: 290 },
-   { date: '2024-06-20', desktop: 408, mobile: 450 },
-   { date: '2024-06-21', desktop: 169, mobile: 210 },
-   { date: '2024-06-22', desktop: 317, mobile: 270 },
-   { date: '2024-06-23', desktop: 480, mobile: 530 },
-   { date: '2024-06-24', desktop: 132, mobile: 180 },
-   { date: '2024-06-25', desktop: 141, mobile: 190 },
-   { date: '2024-06-26', desktop: 434, mobile: 380 },
-   { date: '2024-06-27', desktop: 448, mobile: 490 },
-   { date: '2024-06-28', desktop: 149, mobile: 200 },
-   { date: '2024-06-29', desktop: 103, mobile: 160 },
-   { date: '2024-06-30', desktop: 446, mobile: 400 },
-]
-
-const chartConfig = {
-   views: {
-      label: 'Page Views',
-   },
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   const [activeChart, setActiveChart]
-    = React.useState<keyof typeof chartConfig>('desktop')
-
-   const total = React.useMemo(
-      () => ({
-         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
-         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
-      }),
-      [],
-   )
-
-   return (
-      <Card>
-         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
-            <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
-               <CardTitle>Bar Chart - Interactive</CardTitle>
-               <CardDescription>
-                  Showing total visitors for the last 3 months
-               </CardDescription>
-            </div>
-            <div className="flex">
-               {['desktop', 'mobile'].map((key) => {
-                  const chart = key as keyof typeof chartConfig
-                  return (
-                     <button
-                        key={chart}
-                        data-active={activeChart === chart}
-                        className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
-                        onClick={() => setActiveChart(chart)}
-                     >
-                        <span className="text-muted-foreground text-xs">
-                           {chartConfig[chart].label}
-                        </span>
-                        <span className="text-lg font-bold leading-none sm:text-3xl">
-                           {total[key as keyof typeof total].toLocaleString()}
-                        </span>
-                     </button>
-                  )
-               })}
-            </div>
-         </CardHeader>
-         <CardContent className="px-2 sm:p-6">
-            <ChartContainer
-               config={chartConfig}
-               className="aspect-auto h-[250px] w-full"
-            >
-               <BarChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     minTickGap={32}
-                     tickFormatter={(value) => {
-                        const date = new Date(value)
-                        return date.toLocaleDateString('en-US', {
-                           month: 'short',
-                           day: 'numeric',
-                        })
-                     }}
-                  />
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           className="w-[150px]"
-                           nameKey="views"
-                           labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 month: 'short',
-                                 day: 'numeric',
-                                 year: 'numeric',
-                              })
-                           }}
-                        />
-                     )}
-                  />
-                  <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-bar-label-custom.tsx b/apps/web/registry/miami/block/chart-bar-label-custom.tsx
deleted file mode 100644
index f82e95b6..00000000
--- a/apps/web/registry/miami/block/chart-bar-label-custom.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A bar chart with a custom label'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-   label: {
-      color: 'hsl(var(--background))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Custom Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart
-                  accessibilityLayer
-                  data={chartData}
-                  layout="vertical"
-                  margin={{
-                     right: 16,
-                  }}
-               >
-                  <CartesianGrid horizontal={false} />
-                  <YAxis
-                     dataKey="month"
-                     type="category"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
-                     hide
-                  />
-                  <XAxis dataKey="desktop" type="number" hide />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <Bar
-                     dataKey="desktop"
-                     layout="vertical"
-                     fill="var(--color-desktop)"
-                     radius={4}
-                  >
-                     <LabelList
-                        dataKey="month"
-                        position="insideLeft"
-                        offset={8}
-                        className="fill-[--color-label]"
-                        fontSize={12}
-                     />
-                     <LabelList
-                        dataKey="desktop"
-                        position="right"
-                        offset={8}
-                        className="fill-foreground"
-                        fontSize={12}
-                     />
-                  </Bar>
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-bar-label.tsx b/apps/web/registry/miami/block/chart-bar-label.tsx
deleted file mode 100644
index 85533ed0..00000000
--- a/apps/web/registry/miami/block/chart-bar-label.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A bar chart with a label'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     top: 20,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
-                     <LabelList
-                        position="top"
-                        offset={12}
-                        className="fill-foreground"
-                        fontSize={12}
-                     />
-                  </Bar>
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-bar-mixed.tsx b/apps/web/registry/miami/block/chart-bar-mixed.tsx
deleted file mode 100644
index ac8d54a4..00000000
--- a/apps/web/registry/miami/block/chart-bar-mixed.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A mixed bar chart'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Mixed</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart
-                  accessibilityLayer
-                  data={chartData}
-                  layout="vertical"
-                  margin={{
-                     left: 0,
-                  }}
-               >
-                  <YAxis
-                     dataKey="browser"
-                     type="category"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value =>
-                        chartConfig[value as keyof typeof chartConfig]?.label}
-                  />
-                  <XAxis dataKey="visitors" type="number" hide />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Bar dataKey="visitors" layout="vertical" radius={5} />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-bar-multiple.tsx b/apps/web/registry/miami/block/chart-bar-multiple.tsx
deleted file mode 100644
index fad70c33..00000000
--- a/apps/web/registry/miami/block/chart-bar-multiple.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A multiple bar chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Multiple</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="dashed" />}
-                  />
-                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-                  <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-bar-negative.tsx b/apps/web/registry/miami/block/chart-bar-negative.tsx
deleted file mode 100644
index 1daaef73..00000000
--- a/apps/web/registry/miami/block/chart-bar-negative.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, Cell, LabelList } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A bar chart with negative values'
-
-const chartData = [
-   { month: 'January', visitors: 186 },
-   { month: 'February', visitors: 205 },
-   { month: 'March', visitors: -207 },
-   { month: 'April', visitors: 173 },
-   { month: 'May', visitors: -209 },
-   { month: 'June', visitors: 214 },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Negative</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <CartesianGrid vertical={false} />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel hideIndicator />}
-                  />
-                  <Bar dataKey="visitors">
-                     <LabelList position="top" dataKey="month" fillOpacity={1} />
-                     {chartData.map(item => (
-                        <Cell
-                           key={item.month}
-                           fill={
-                              item.visitors > 0
-                                 ? 'hsl(var(--chart-1))'
-                                 : 'hsl(var(--chart-2))'
-                           }
-                        />
-                     ))}
-                  </Bar>
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-bar-stacked.tsx b/apps/web/registry/miami/block/chart-bar-stacked.tsx
deleted file mode 100644
index 6c08afff..00000000
--- a/apps/web/registry/miami/block/chart-bar-stacked.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Bar Chart - Stacked + Legend</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-                  <ChartLegend content={<ChartLegendContent />} />
-                  <Bar
-                     dataKey="desktop"
-                     stackId="a"
-                     fill="var(--color-desktop)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="mobile"
-                     stackId="a"
-                     fill="var(--color-mobile)"
-                     radius={[4, 4, 0, 0]}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-line-default.tsx b/apps/web/registry/miami/block/chart-line-default.tsx
deleted file mode 100644
index a21afde3..00000000
--- a/apps/web/registry/miami/block/chart-line-default.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A line chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Line
-                     dataKey="desktop"
-                     type="natural"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={false}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-line-dots-colors.tsx b/apps/web/registry/miami/block/chart-line-dots-colors.tsx
deleted file mode 100644
index 76a8bf53..00000000
--- a/apps/web/registry/miami/block/chart-line-dots-colors.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Dot, Line, LineChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A line chart with dots and colors'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-      color: 'hsl(var(--chart-2))',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Dots Colors</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     top: 24,
-                     left: 24,
-                     right: 24,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <ChartTooltip
-                     cursor={false}
-                     content={(
-                        <ChartTooltipContent
-                           indicator="line"
-                           nameKey="visitors"
-                           hideLabel
-                        />
-                     )}
-                  />
-                  <Line
-                     dataKey="visitors"
-                     type="natural"
-                     stroke="var(--color-visitors)"
-                     strokeWidth={2}
-                     dot={({ payload, ...props }) => {
-                        return (
-                           <Dot
-                              key={payload.browser}
-                              r={5}
-                              cx={props.cx}
-                              cy={props.cy}
-                              fill={payload.fill}
-                              stroke={payload.fill}
-                           />
-                        )
-                     }}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-line-dots-custom.tsx b/apps/web/registry/miami/block/chart-line-dots-custom.tsx
deleted file mode 100644
index 6e30008b..00000000
--- a/apps/web/registry/miami/block/chart-line-dots-custom.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-'use client'
-
-import { GitCommitVertical, TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A line chart with custom dots'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Custom Dots</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Line
-                     dataKey="desktop"
-                     type="natural"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={({ cx, cy, payload }) => {
-                        const r = 24
-                        return (
-                           <GitCommitVertical
-                              key={payload.month}
-                              x={cx - r / 2}
-                              y={cy - r / 2}
-                              width={r}
-                              height={r}
-                              fill="hsl(var(--background))"
-                              stroke="var(--color-desktop)"
-                           />
-                        )
-                     }}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-line-dots.tsx b/apps/web/registry/miami/block/chart-line-dots.tsx
deleted file mode 100644
index 85eab829..00000000
--- a/apps/web/registry/miami/block/chart-line-dots.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A line chart with dots'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Dots</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Line
-                     dataKey="desktop"
-                     type="natural"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={{
-                        fill: 'var(--color-desktop)',
-                     }}
-                     activeDot={{
-                        r: 6,
-                     }}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-line-interactive.tsx b/apps/web/registry/miami/block/chart-line-interactive.tsx
deleted file mode 100644
index d9504116..00000000
--- a/apps/web/registry/miami/block/chart-line-interactive.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'An interactive line chart'
-
-const chartData = [
-   { date: '2024-04-01', desktop: 222, mobile: 150 },
-   { date: '2024-04-02', desktop: 97, mobile: 180 },
-   { date: '2024-04-03', desktop: 167, mobile: 120 },
-   { date: '2024-04-04', desktop: 242, mobile: 260 },
-   { date: '2024-04-05', desktop: 373, mobile: 290 },
-   { date: '2024-04-06', desktop: 301, mobile: 340 },
-   { date: '2024-04-07', desktop: 245, mobile: 180 },
-   { date: '2024-04-08', desktop: 409, mobile: 320 },
-   { date: '2024-04-09', desktop: 59, mobile: 110 },
-   { date: '2024-04-10', desktop: 261, mobile: 190 },
-   { date: '2024-04-11', desktop: 327, mobile: 350 },
-   { date: '2024-04-12', desktop: 292, mobile: 210 },
-   { date: '2024-04-13', desktop: 342, mobile: 380 },
-   { date: '2024-04-14', desktop: 137, mobile: 220 },
-   { date: '2024-04-15', desktop: 120, mobile: 170 },
-   { date: '2024-04-16', desktop: 138, mobile: 190 },
-   { date: '2024-04-17', desktop: 446, mobile: 360 },
-   { date: '2024-04-18', desktop: 364, mobile: 410 },
-   { date: '2024-04-19', desktop: 243, mobile: 180 },
-   { date: '2024-04-20', desktop: 89, mobile: 150 },
-   { date: '2024-04-21', desktop: 137, mobile: 200 },
-   { date: '2024-04-22', desktop: 224, mobile: 170 },
-   { date: '2024-04-23', desktop: 138, mobile: 230 },
-   { date: '2024-04-24', desktop: 387, mobile: 290 },
-   { date: '2024-04-25', desktop: 215, mobile: 250 },
-   { date: '2024-04-26', desktop: 75, mobile: 130 },
-   { date: '2024-04-27', desktop: 383, mobile: 420 },
-   { date: '2024-04-28', desktop: 122, mobile: 180 },
-   { date: '2024-04-29', desktop: 315, mobile: 240 },
-   { date: '2024-04-30', desktop: 454, mobile: 380 },
-   { date: '2024-05-01', desktop: 165, mobile: 220 },
-   { date: '2024-05-02', desktop: 293, mobile: 310 },
-   { date: '2024-05-03', desktop: 247, mobile: 190 },
-   { date: '2024-05-04', desktop: 385, mobile: 420 },
-   { date: '2024-05-05', desktop: 481, mobile: 390 },
-   { date: '2024-05-06', desktop: 498, mobile: 520 },
-   { date: '2024-05-07', desktop: 388, mobile: 300 },
-   { date: '2024-05-08', desktop: 149, mobile: 210 },
-   { date: '2024-05-09', desktop: 227, mobile: 180 },
-   { date: '2024-05-10', desktop: 293, mobile: 330 },
-   { date: '2024-05-11', desktop: 335, mobile: 270 },
-   { date: '2024-05-12', desktop: 197, mobile: 240 },
-   { date: '2024-05-13', desktop: 197, mobile: 160 },
-   { date: '2024-05-14', desktop: 448, mobile: 490 },
-   { date: '2024-05-15', desktop: 473, mobile: 380 },
-   { date: '2024-05-16', desktop: 338, mobile: 400 },
-   { date: '2024-05-17', desktop: 499, mobile: 420 },
-   { date: '2024-05-18', desktop: 315, mobile: 350 },
-   { date: '2024-05-19', desktop: 235, mobile: 180 },
-   { date: '2024-05-20', desktop: 177, mobile: 230 },
-   { date: '2024-05-21', desktop: 82, mobile: 140 },
-   { date: '2024-05-22', desktop: 81, mobile: 120 },
-   { date: '2024-05-23', desktop: 252, mobile: 290 },
-   { date: '2024-05-24', desktop: 294, mobile: 220 },
-   { date: '2024-05-25', desktop: 201, mobile: 250 },
-   { date: '2024-05-26', desktop: 213, mobile: 170 },
-   { date: '2024-05-27', desktop: 420, mobile: 460 },
-   { date: '2024-05-28', desktop: 233, mobile: 190 },
-   { date: '2024-05-29', desktop: 78, mobile: 130 },
-   { date: '2024-05-30', desktop: 340, mobile: 280 },
-   { date: '2024-05-31', desktop: 178, mobile: 230 },
-   { date: '2024-06-01', desktop: 178, mobile: 200 },
-   { date: '2024-06-02', desktop: 470, mobile: 410 },
-   { date: '2024-06-03', desktop: 103, mobile: 160 },
-   { date: '2024-06-04', desktop: 439, mobile: 380 },
-   { date: '2024-06-05', desktop: 88, mobile: 140 },
-   { date: '2024-06-06', desktop: 294, mobile: 250 },
-   { date: '2024-06-07', desktop: 323, mobile: 370 },
-   { date: '2024-06-08', desktop: 385, mobile: 320 },
-   { date: '2024-06-09', desktop: 438, mobile: 480 },
-   { date: '2024-06-10', desktop: 155, mobile: 200 },
-   { date: '2024-06-11', desktop: 92, mobile: 150 },
-   { date: '2024-06-12', desktop: 492, mobile: 420 },
-   { date: '2024-06-13', desktop: 81, mobile: 130 },
-   { date: '2024-06-14', desktop: 426, mobile: 380 },
-   { date: '2024-06-15', desktop: 307, mobile: 350 },
-   { date: '2024-06-16', desktop: 371, mobile: 310 },
-   { date: '2024-06-17', desktop: 475, mobile: 520 },
-   { date: '2024-06-18', desktop: 107, mobile: 170 },
-   { date: '2024-06-19', desktop: 341, mobile: 290 },
-   { date: '2024-06-20', desktop: 408, mobile: 450 },
-   { date: '2024-06-21', desktop: 169, mobile: 210 },
-   { date: '2024-06-22', desktop: 317, mobile: 270 },
-   { date: '2024-06-23', desktop: 480, mobile: 530 },
-   { date: '2024-06-24', desktop: 132, mobile: 180 },
-   { date: '2024-06-25', desktop: 141, mobile: 190 },
-   { date: '2024-06-26', desktop: 434, mobile: 380 },
-   { date: '2024-06-27', desktop: 448, mobile: 490 },
-   { date: '2024-06-28', desktop: 149, mobile: 200 },
-   { date: '2024-06-29', desktop: 103, mobile: 160 },
-   { date: '2024-06-30', desktop: 446, mobile: 400 },
-]
-
-const chartConfig = {
-   views: {
-      label: 'Page Views',
-   },
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   const [activeChart, setActiveChart]
-    = React.useState<keyof typeof chartConfig>('desktop')
-
-   const total = React.useMemo(
-      () => ({
-         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
-         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
-      }),
-      [],
-   )
-
-   return (
-      <Card>
-         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
-            <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
-               <CardTitle>Line Chart - Interactive</CardTitle>
-               <CardDescription>
-                  Showing total visitors for the last 3 months
-               </CardDescription>
-            </div>
-            <div className="flex">
-               {['desktop', 'mobile'].map((key) => {
-                  const chart = key as keyof typeof chartConfig
-                  return (
-                     <button
-                        key={chart}
-                        data-active={activeChart === chart}
-                        className="data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
-                        onClick={() => setActiveChart(chart)}
-                     >
-                        <span className="text-muted-foreground text-xs">
-                           {chartConfig[chart].label}
-                        </span>
-                        <span className="text-lg font-bold leading-none sm:text-3xl">
-                           {total[key as keyof typeof total].toLocaleString()}
-                        </span>
-                     </button>
-                  )
-               })}
-            </div>
-         </CardHeader>
-         <CardContent className="px-2 sm:p-6">
-            <ChartContainer
-               config={chartConfig}
-               className="aspect-auto h-[250px] w-full"
-            >
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     minTickGap={32}
-                     tickFormatter={(value) => {
-                        const date = new Date(value)
-                        return date.toLocaleDateString('en-US', {
-                           month: 'short',
-                           day: 'numeric',
-                        })
-                     }}
-                  />
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           className="w-[150px]"
-                           nameKey="views"
-                           labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 month: 'short',
-                                 day: 'numeric',
-                                 year: 'numeric',
-                              })
-                           }}
-                        />
-                     )}
-                  />
-                  <Line
-                     dataKey={activeChart}
-                     type="monotone"
-                     stroke={`var(--color-${activeChart})`}
-                     strokeWidth={2}
-                     dot={false}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-line-label-custom.tsx b/apps/web/registry/miami/block/chart-line-label-custom.tsx
deleted file mode 100644
index 87816e09..00000000
--- a/apps/web/registry/miami/block/chart-line-label-custom.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, LabelList, Line, LineChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A line chart with a custom label'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-      color: 'hsl(var(--chart-2))',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Custom Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     top: 24,
-                     left: 24,
-                     right: 24,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <ChartTooltip
-                     cursor={false}
-                     content={(
-                        <ChartTooltipContent
-                           indicator="line"
-                           nameKey="visitors"
-                           hideLabel
-                        />
-                     )}
-                  />
-                  <Line
-                     dataKey="visitors"
-                     type="natural"
-                     stroke="var(--color-visitors)"
-                     strokeWidth={2}
-                     dot={{
-                        fill: 'var(--color-visitors)',
-                     }}
-                     activeDot={{
-                        r: 6,
-                     }}
-                  >
-                     <LabelList
-                        position="top"
-                        offset={12}
-                        className="fill-foreground"
-                        fontSize={12}
-                        dataKey="browser"
-                        formatter={(value: keyof typeof chartConfig) =>
-                           chartConfig[value]?.label}
-                     />
-                  </Line>
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-line-label.tsx b/apps/web/registry/miami/block/chart-line-label.tsx
deleted file mode 100644
index 8064a229..00000000
--- a/apps/web/registry/miami/block/chart-line-label.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, LabelList, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A line chart with a label'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     top: 20,
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <Line
-                     dataKey="desktop"
-                     type="natural"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={{
-                        fill: 'var(--color-desktop)',
-                     }}
-                     activeDot={{
-                        r: 6,
-                     }}
-                  >
-                     <LabelList
-                        position="top"
-                        offset={12}
-                        className="fill-foreground"
-                        fontSize={12}
-                     />
-                  </Line>
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-line-linear.tsx b/apps/web/registry/miami/block/chart-line-linear.tsx
deleted file mode 100644
index c9c26dcf..00000000
--- a/apps/web/registry/miami/block/chart-line-linear.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A linear line chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Linear</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Line
-                     dataKey="desktop"
-                     type="linear"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={false}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-line-multiple.tsx b/apps/web/registry/miami/block/chart-line-multiple.tsx
deleted file mode 100644
index 39df9711..00000000
--- a/apps/web/registry/miami/block/chart-line-multiple.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A multiple line chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Multiple</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                  <Line
-                     dataKey="desktop"
-                     type="monotone"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={false}
-                  />
-                  <Line
-                     dataKey="mobile"
-                     type="monotone"
-                     stroke="var(--color-mobile)"
-                     strokeWidth={2}
-                     dot={false}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter>
-            <div className="flex w-full items-start gap-2 text-sm">
-               <div className="grid gap-2">
-                  <div className="flex items-center gap-2 font-medium leading-none">
-                     Trending up by 5.2% this month
-                     {' '}
-                     <TrendingUp className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
-                     Showing total visitors for the last 6 months
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-line-step.tsx b/apps/web/registry/miami/block/chart-line-step.tsx
deleted file mode 100644
index c1a292a9..00000000
--- a/apps/web/registry/miami/block/chart-line-step.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A line chart with step'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 73 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Line Chart - Step</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <LineChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                     left: 12,
-                     right: 12,
-                  }}
-               >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                     dataKey="month"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={value => value.slice(0, 3)}
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Line
-                     dataKey="desktop"
-                     type="step"
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                     dot={false}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-2 text-sm">
-            <div className="flex gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-pie-donut-active.tsx b/apps/web/registry/miami/block/chart-pie-donut-active.tsx
deleted file mode 100644
index 3b2bd7a2..00000000
--- a/apps/web/registry/miami/block/chart-pie-donut-active.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Label, Pie, PieChart, Sector } from 'recharts'
-import type { PieSectorDataItem } from 'recharts/types/polar/Pie'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A donut chart with an active sector'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Donut Active</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Pie
-                     data={chartData}
-                     dataKey="visitors"
-                     nameKey="browser"
-                     innerRadius={60}
-                     strokeWidth={5}
-                     activeIndex={0}
-                     activeShape={({
-                        outerRadius = 0,
-                        ...props
-                     }: PieSectorDataItem) => (
-                        <Sector {...props} outerRadius={outerRadius + 10} />
-                     )}
-                  />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-pie-donut-text.tsx b/apps/web/registry/miami/block/chart-pie-donut-text.tsx
deleted file mode 100644
index 860d39e6..00000000
--- a/apps/web/registry/miami/block/chart-pie-donut-text.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { TrendingUp } from 'lucide-react'
-import { Label, Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A donut chart with text'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 287, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 190, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   const totalVisitors = React.useMemo(() => {
-      return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
-   }, [])
-
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Donut with Text</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Pie
-                     data={chartData}
-                     dataKey="visitors"
-                     nameKey="browser"
-                     innerRadius={60}
-                     strokeWidth={5}
-                  >
-                     <Label
-                        content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                              return (
-                                 <text
-                                    x={viewBox.cx}
-                                    y={viewBox.cy}
-                                    textAnchor="middle"
-                                    dominantBaseline="middle"
-                                 >
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={viewBox.cy}
-                                       className="fill-foreground text-3xl font-bold"
-                                    >
-                                       {totalVisitors.toLocaleString()}
-                                    </tspan>
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={(viewBox.cy || 0) + 24}
-                                       className="fill-muted-foreground"
-                                    >
-                                       Visitors
-                                    </tspan>
-                                 </text>
-                              )
-                           }
-                        }}
-                     />
-                  </Pie>
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-pie-donut.tsx b/apps/web/registry/miami/block/chart-pie-donut.tsx
deleted file mode 100644
index a3dbb2d5..00000000
--- a/apps/web/registry/miami/block/chart-pie-donut.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A donut chart'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Donut</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Pie
-                     data={chartData}
-                     dataKey="visitors"
-                     nameKey="browser"
-                     innerRadius={60}
-                  />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-pie-interactive.tsx b/apps/web/registry/miami/block/chart-pie-interactive.tsx
deleted file mode 100644
index 6979152e..00000000
--- a/apps/web/registry/miami/block/chart-pie-interactive.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Label, Pie, PieChart, Sector } from 'recharts'
-import type { PieSectorDataItem } from 'recharts/types/polar/Pie'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartStyle,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-
-export const description = 'An interactive pie chart'
-
-const desktopData = [
-   { month: 'january', desktop: 186, fill: 'var(--color-january)' },
-   { month: 'february', desktop: 305, fill: 'var(--color-february)' },
-   { month: 'march', desktop: 237, fill: 'var(--color-march)' },
-   { month: 'april', desktop: 173, fill: 'var(--color-april)' },
-   { month: 'may', desktop: 209, fill: 'var(--color-may)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   desktop: {
-      label: 'Desktop',
-   },
-   mobile: {
-      label: 'Mobile',
-   },
-   january: {
-      label: 'January',
-      color: 'hsl(var(--chart-1))',
-   },
-   february: {
-      label: 'February',
-      color: 'hsl(var(--chart-2))',
-   },
-   march: {
-      label: 'March',
-      color: 'hsl(var(--chart-3))',
-   },
-   april: {
-      label: 'April',
-      color: 'hsl(var(--chart-4))',
-   },
-   may: {
-      label: 'May',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   const id = 'pie-interactive'
-   const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
-
-   const activeIndex = React.useMemo(
-      () => desktopData.findIndex(item => item.month === activeMonth),
-      [activeMonth],
-   )
-   const months = React.useMemo(() => desktopData.map(item => item.month), [])
-
-   return (
-      <Card data-chart={id} className="flex flex-col">
-         <ChartStyle id={id} config={chartConfig} />
-         <CardHeader className="flex-row items-start space-y-0 pb-0">
-            <div className="grid gap-1">
-               <CardTitle>Pie Chart - Interactive</CardTitle>
-               <CardDescription>January - June 2024</CardDescription>
-            </div>
-            <Select value={activeMonth} onValueChange={setActiveMonth}>
-               <SelectTrigger
-                  className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
-                  aria-label="Select a value"
-               >
-                  <SelectValue placeholder="Select month" />
-               </SelectTrigger>
-               <SelectContent align="end" className="rounded-xl">
-                  {months.map((key) => {
-                     const config = chartConfig[key as keyof typeof chartConfig]
-
-                     if (!config) {
-                        return null
-                     }
-
-                     return (
-                        <SelectItem
-                           key={key}
-                           value={key}
-                           className="rounded-lg [&_span]:flex"
-                        >
-                           <div className="flex items-center gap-2 text-xs">
-                              <span
-                                 className="flex size-3 shrink-0 rounded-sm"
-                                 style={{
-                                    backgroundColor: `var(--color-${key})`,
-                                 }}
-                              />
-                              {config?.label}
-                           </div>
-                        </SelectItem>
-                     )
-                  })}
-               </SelectContent>
-            </Select>
-         </CardHeader>
-         <CardContent className="flex flex-1 justify-center pb-0">
-            <ChartContainer
-               id={id}
-               config={chartConfig}
-               className="mx-auto aspect-square w-full max-w-[300px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Pie
-                     data={desktopData}
-                     dataKey="desktop"
-                     nameKey="month"
-                     innerRadius={60}
-                     strokeWidth={5}
-                     activeIndex={activeIndex}
-                     activeShape={({
-                        outerRadius = 0,
-                        ...props
-                     }: PieSectorDataItem) => (
-                        <g>
-                           <Sector {...props} outerRadius={outerRadius + 10} />
-                           <Sector
-                              {...props}
-                              outerRadius={outerRadius + 25}
-                              innerRadius={outerRadius + 12}
-                           />
-                        </g>
-                     )}
-                  >
-                     <Label
-                        content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                              return (
-                                 <text
-                                    x={viewBox.cx}
-                                    y={viewBox.cy}
-                                    textAnchor="middle"
-                                    dominantBaseline="middle"
-                                 >
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={viewBox.cy}
-                                       className="fill-foreground text-3xl font-bold"
-                                    >
-                                       {desktopData[activeIndex].desktop.toLocaleString()}
-                                    </tspan>
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={(viewBox.cy || 0) + 24}
-                                       className="fill-muted-foreground"
-                                    >
-                                       Visitors
-                                    </tspan>
-                                 </text>
-                              )
-                           }
-                        }}
-                     />
-                  </Pie>
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-pie-label-custom.tsx b/apps/web/registry/miami/block/chart-pie-label-custom.tsx
deleted file mode 100644
index a369051c..00000000
--- a/apps/web/registry/miami/block/chart-pie-label-custom.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A pie chart with a custom label'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Custom Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px] px-0"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     content={<ChartTooltipContent nameKey="visitors" hideLabel />}
-                  />
-                  <Pie
-                     data={chartData}
-                     dataKey="visitors"
-                     labelLine={false}
-                     label={({ payload, ...props }) => {
-                        return (
-                           <text
-                              cx={props.cx}
-                              cy={props.cy}
-                              x={props.x}
-                              y={props.y}
-                              textAnchor={props.textAnchor}
-                              dominantBaseline={props.dominantBaseline}
-                              fill="hsla(var(--foreground))"
-                           >
-                              {payload.visitors}
-                           </text>
-                        )
-                     }}
-                     nameKey="browser"
-                  />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-pie-label-list.tsx b/apps/web/registry/miami/block/chart-pie-label-list.tsx
deleted file mode 100644
index e21dd107..00000000
--- a/apps/web/registry/miami/block/chart-pie-label-list.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { LabelList, Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A pie chart with a label list'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Label List</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="[&_.recharts-text]:fill-background mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     content={<ChartTooltipContent nameKey="visitors" hideLabel />}
-                  />
-                  <Pie data={chartData} dataKey="visitors">
-                     <LabelList
-                        dataKey="browser"
-                        className="fill-background"
-                        stroke="none"
-                        fontSize={12}
-                        formatter={(value: keyof typeof chartConfig) =>
-                           chartConfig[value]?.label}
-                     />
-                  </Pie>
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-pie-label.tsx b/apps/web/registry/miami/block/chart-pie-label.tsx
deleted file mode 100644
index 692d5af1..00000000
--- a/apps/web/registry/miami/block/chart-pie-label.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A pie chart with a label'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[250px] pb-0"
-            >
-               <PieChart>
-                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-                  <Pie data={chartData} dataKey="visitors" label nameKey="browser" />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-pie-legend.tsx b/apps/web/registry/miami/block/chart-pie-legend.tsx
deleted file mode 100644
index 783950b1..00000000
--- a/apps/web/registry/miami/block/chart-pie-legend.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client'
-
-import { Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A pie chart with a legend'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Legend</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[300px]"
-            >
-               <PieChart>
-                  <Pie data={chartData} dataKey="visitors" />
-                  <ChartLegend
-                     content={<ChartLegendContent nameKey="browser" />}
-                     className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
-                  />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-pie-separator-none.tsx b/apps/web/registry/miami/block/chart-pie-separator-none.tsx
deleted file mode 100644
index 555481d6..00000000
--- a/apps/web/registry/miami/block/chart-pie-separator-none.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A pie chart with no separator'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Separator None</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Pie
-                     data={chartData}
-                     dataKey="visitors"
-                     nameKey="browser"
-                     stroke="0"
-                  />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-pie-simple.tsx b/apps/web/registry/miami/block/chart-pie-simple.tsx
deleted file mode 100644
index 83216e41..00000000
--- a/apps/web/registry/miami/block/chart-pie-simple.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A simple pie chart'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <Pie data={chartData} dataKey="visitors" nameKey="browser" />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-pie-stacked.tsx b/apps/web/registry/miami/block/chart-pie-stacked.tsx
deleted file mode 100644
index a7656da0..00000000
--- a/apps/web/registry/miami/block/chart-pie-stacked.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { TrendingUp } from 'lucide-react'
-import { Label, Pie, PieChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A pie chart with stacked sections'
-
-const desktopData = [
-   { month: 'january', desktop: 186, fill: 'var(--color-january)' },
-   { month: 'february', desktop: 305, fill: 'var(--color-february)' },
-   { month: 'march', desktop: 237, fill: 'var(--color-march)' },
-   { month: 'april', desktop: 173, fill: 'var(--color-april)' },
-   { month: 'may', desktop: 209, fill: 'var(--color-may)' },
-]
-
-const mobileData = [
-   { month: 'january', mobile: 80, fill: 'var(--color-january)' },
-   { month: 'february', mobile: 200, fill: 'var(--color-february)' },
-   { month: 'march', mobile: 120, fill: 'var(--color-march)' },
-   { month: 'april', mobile: 190, fill: 'var(--color-april)' },
-   { month: 'may', mobile: 130, fill: 'var(--color-may)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   desktop: {
-      label: 'Desktop',
-   },
-   mobile: {
-      label: 'Mobile',
-   },
-   january: {
-      label: 'January',
-      color: 'hsl(var(--chart-1))',
-   },
-   february: {
-      label: 'February',
-      color: 'hsl(var(--chart-2))',
-   },
-   march: {
-      label: 'March',
-      color: 'hsl(var(--chart-3))',
-   },
-   april: {
-      label: 'April',
-      color: 'hsl(var(--chart-4))',
-   },
-   may: {
-      label: 'May',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Pie Chart - Stacked</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <PieChart>
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           labelKey="visitors"
-                           nameKey="month"
-                           indicator="line"
-                           labelFormatter={(_, payload) => {
-                              return chartConfig[
-                                 payload?.[0].dataKey as keyof typeof chartConfig
-                              ].label
-                           }}
-                        />
-                     )}
-                  />
-                  <Pie data={desktopData} dataKey="desktop" outerRadius={60} />
-                  <Pie
-                     data={mobileData}
-                     dataKey="mobile"
-                     innerRadius={70}
-                     outerRadius={90}
-                  />
-               </PieChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-default.tsx b/apps/web/registry/miami/block/chart-radar-default.tsx
deleted file mode 100644
index 9198d509..00000000
--- a/apps/web/registry/miami/block/chart-radar-default.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                  <PolarAngleAxis dataKey="month" />
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-dots.tsx b/apps/web/registry/miami/block/chart-radar-dots.tsx
deleted file mode 100644
index cda00f88..00000000
--- a/apps/web/registry/miami/block/chart-radar-dots.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with dots'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center">
-            <CardTitle>Radar Chart - Dots</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                  <PolarAngleAxis dataKey="month" />
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                     dot={{
-                        r: 4,
-                        fillOpacity: 1,
-                     }}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-grid-circle-fill.tsx b/apps/web/registry/miami/block/chart-radar-grid-circle-fill.tsx
deleted file mode 100644
index 35b34cf4..00000000
--- a/apps/web/registry/miami/block/chart-radar-grid-circle-fill.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with a grid and circle fill'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 285 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 203 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 264 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                  <PolarGrid
-                     className="fill-[--color-desktop] opacity-20"
-                     gridType="circle"
-                  />
-                  <PolarAngleAxis dataKey="month" />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.5}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-grid-circle-no-lines.tsx b/apps/web/registry/miami/block/chart-radar-grid-circle-no-lines.tsx
deleted file mode 100644
index b10c2f66..00000000
--- a/apps/web/registry/miami/block/chart-radar-grid-circle-no-lines.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with a grid and circle fill'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 203 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <PolarGrid gridType="circle" radialLines={false} />
-                  <PolarAngleAxis dataKey="month" />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                     dot={{
-                        r: 4,
-                        fillOpacity: 1,
-                     }}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-grid-circle.tsx b/apps/web/registry/miami/block/chart-radar-grid-circle.tsx
deleted file mode 100644
index e18bf807..00000000
--- a/apps/web/registry/miami/block/chart-radar-grid-circle.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with a grid and circle'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Grid Circle</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <PolarGrid gridType="circle" />
-                  <PolarAngleAxis dataKey="month" />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                     dot={{
-                        r: 4,
-                        fillOpacity: 1,
-                     }}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-grid-custom.tsx b/apps/web/registry/miami/block/chart-radar-grid-custom.tsx
deleted file mode 100644
index e3dd31c8..00000000
--- a/apps/web/registry/miami/block/chart-radar-grid-custom.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with a custom grid'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Grid Custom</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />
-                  <PolarAngleAxis dataKey="month" />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-grid-fill.tsx b/apps/web/registry/miami/block/chart-radar-grid-fill.tsx
deleted file mode 100644
index f6be9099..00000000
--- a/apps/web/registry/miami/block/chart-radar-grid-fill.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with a grid filled'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 285 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 203 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 264 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Grid Filled</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <PolarGrid className="fill-[--color-desktop] opacity-20" />
-                  <PolarAngleAxis dataKey="month" />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.5}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-grid-none.tsx b/apps/web/registry/miami/block/chart-radar-grid-none.tsx
deleted file mode 100644
index 48b39894..00000000
--- a/apps/web/registry/miami/block/chart-radar-grid-none.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with no grid'
-
-const chartData = [
-   { month: 'January', desktop: 186 },
-   { month: 'February', desktop: 305 },
-   { month: 'March', desktop: 237 },
-   { month: 'April', desktop: 273 },
-   { month: 'May', desktop: 209 },
-   { month: 'June', desktop: 214 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Grid None</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <PolarAngleAxis dataKey="month" />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                     dot={{
-                        r: 4,
-                        fillOpacity: 1,
-                     }}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-icons.tsx b/apps/web/registry/miami/block/chart-radar-icons.tsx
deleted file mode 100644
index 5579e927..00000000
--- a/apps/web/registry/miami/block/chart-radar-icons.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client'
-
-import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with icons'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-      icon: ArrowDownFromLine,
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-      icon: ArrowUpFromLine,
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Icons</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart
-                  data={chartData}
-                  margin={{
-                     top: -40,
-                     bottom: -10,
-                  }}
-               >
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <PolarAngleAxis dataKey="month" />
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
-                  <ChartLegend className="mt-8" content={<ChartLegendContent />} />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 pt-4 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-label-custom.tsx b/apps/web/registry/miami/block/chart-radar-label-custom.tsx
deleted file mode 100644
index 13e8b839..00000000
--- a/apps/web/registry/miami/block/chart-radar-label-custom.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with a custom label'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Custom Label</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart
-                  data={chartData}
-                  margin={{
-                     top: 10,
-                     right: 10,
-                     bottom: 10,
-                     left: 10,
-                  }}
-               >
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <PolarAngleAxis
-                     dataKey="month"
-                     tick={({ x, y, textAnchor, value, index, ...props }) => {
-                        const data = chartData[index]
-
-                        return (
-                           <text
-                              x={x}
-                              y={index === 0 ? y - 10 : y}
-                              textAnchor={textAnchor}
-                              fontSize={13}
-                              fontWeight={500}
-                              {...props}
-                           >
-                              <tspan>{data.desktop}</tspan>
-                              <tspan className="fill-muted-foreground">/</tspan>
-                              <tspan>{data.mobile}</tspan>
-                              <tspan
-                                 x={x}
-                                 dy="1rem"
-                                 fontSize={12}
-                                 className="fill-muted-foreground"
-                              >
-                                 {data.month}
-                              </tspan>
-                           </text>
-                        )
-                     }}
-                  />
-
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-legend.tsx b/apps/web/registry/miami/block/chart-radar-legend.tsx
deleted file mode 100644
index 5e5dfb2a..00000000
--- a/apps/web/registry/miami/block/chart-radar-legend.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with a legend'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Legend</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart
-                  data={chartData}
-                  margin={{
-                     top: -40,
-                     bottom: -10,
-                  }}
-               >
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <PolarAngleAxis dataKey="month" />
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
-                  <ChartLegend className="mt-8" content={<ChartLegendContent />} />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 pt-4 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-lines-only.tsx b/apps/web/registry/miami/block/chart-radar-lines-only.tsx
deleted file mode 100644
index 8e5f6e61..00000000
--- a/apps/web/registry/miami/block/chart-radar-lines-only.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with lines only'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 160 },
-   { month: 'February', desktop: 185, mobile: 170 },
-   { month: 'March', desktop: 207, mobile: 180 },
-   { month: 'April', desktop: 173, mobile: 160 },
-   { month: 'May', desktop: 160, mobile: 190 },
-   { month: 'June', desktop: 174, mobile: 204 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Lines Only</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <PolarAngleAxis dataKey="month" />
-                  <PolarGrid radialLines={false} />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0}
-                     stroke="var(--color-desktop)"
-                     strokeWidth={2}
-                  />
-                  <Radar
-                     dataKey="mobile"
-                     fill="var(--color-mobile)"
-                     fillOpacity={0}
-                     stroke="var(--color-mobile)"
-                     strokeWidth={2}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-multiple.tsx b/apps/web/registry/miami/block/chart-radar-multiple.tsx
deleted file mode 100644
index 19772c15..00000000
--- a/apps/web/registry/miami/block/chart-radar-multiple.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with multiple data'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Multiple</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent indicator="line" />}
-                  />
-                  <PolarAngleAxis dataKey="month" />
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radar-radius.tsx b/apps/web/registry/miami/block/chart-radar-radius.tsx
deleted file mode 100644
index 66e4ed73..00000000
--- a/apps/web/registry/miami/block/chart-radar-radius.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import {
-   PolarAngleAxis,
-   PolarGrid,
-   PolarRadiusAxis,
-   Radar,
-   RadarChart,
-} from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radar chart with a radius axis'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader className="items-center pb-4">
-            <CardTitle>Radar Chart - Radius Axis</CardTitle>
-            <CardDescription>
-               Showing total visitors for the last 6 months
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadarChart data={chartData}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={
-                        <ChartTooltipContent indicator="line" labelKey="month" />
-                     }
-                  />
-                  <PolarGrid />
-                  <Radar
-                     dataKey="desktop"
-                     fill="var(--color-desktop)"
-                     fillOpacity={0.6}
-                  />
-                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
-                  <PolarRadiusAxis
-                     angle={60}
-                     stroke="hsla(var(--foreground))"
-                     orientation="middle"
-                     axisLine={false}
-                  />
-               </RadarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-               January - June 2024
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radial-grid.tsx b/apps/web/registry/miami/block/chart-radial-grid.tsx
deleted file mode 100644
index 21c4ade4..00000000
--- a/apps/web/registry/miami/block/chart-radial-grid.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { PolarGrid, RadialBar, RadialBarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radial chart with a grid'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Radial Chart - Grid</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel nameKey="browser" />}
-                  />
-                  <PolarGrid gridType="circle" />
-                  <RadialBar dataKey="visitors" />
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radial-label.tsx b/apps/web/registry/miami/block/chart-radial-label.tsx
deleted file mode 100644
index 5e50aaf8..00000000
--- a/apps/web/registry/miami/block/chart-radial-label.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { LabelList, RadialBar, RadialBarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radial chart with a label'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Radial Chart - Label</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadialBarChart
-                  data={chartData}
-                  startAngle={-90}
-                  endAngle={380}
-                  innerRadius={30}
-                  outerRadius={110}
-               >
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel nameKey="browser" />}
-                  />
-                  <RadialBar dataKey="visitors" background>
-                     <LabelList
-                        position="insideStart"
-                        dataKey="browser"
-                        className="fill-white capitalize mix-blend-luminosity"
-                        fontSize={11}
-                     />
-                  </RadialBar>
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radial-shape.tsx b/apps/web/registry/miami/block/chart-radial-shape.tsx
deleted file mode 100644
index 2745fc87..00000000
--- a/apps/web/registry/miami/block/chart-radial-shape.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import {
-   Label,
-   PolarGrid,
-   PolarRadiusAxis,
-   RadialBar,
-   RadialBarChart,
-} from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type { ChartConfig } from '~/registry/miami/ui/chart'
-import { ChartContainer } from '~/registry/miami/ui/chart'
-
-export const description = 'A radial chart with a custom shape'
-
-const chartData = [
-   { browser: 'safari', visitors: 1260, fill: 'var(--color-safari)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Radial Chart - Shape</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadialBarChart
-                  data={chartData}
-                  endAngle={100}
-                  innerRadius={80}
-                  outerRadius={140}
-               >
-                  <PolarGrid
-                     gridType="circle"
-                     radialLines={false}
-                     stroke="none"
-                     className="first:fill-muted last:fill-background"
-                     polarRadius={[86, 74]}
-                  />
-                  <RadialBar dataKey="visitors" background />
-                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
-                     <Label
-                        content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                              return (
-                                 <text
-                                    x={viewBox.cx}
-                                    y={viewBox.cy}
-                                    textAnchor="middle"
-                                    dominantBaseline="middle"
-                                 >
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={viewBox.cy}
-                                       className="fill-foreground text-4xl font-bold"
-                                    >
-                                       {chartData[0].visitors.toLocaleString()}
-                                    </tspan>
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={(viewBox.cy || 0) + 24}
-                                       className="fill-muted-foreground"
-                                    >
-                                       Visitors
-                                    </tspan>
-                                 </text>
-                              )
-                           }
-                        }}
-                     />
-                  </PolarRadiusAxis>
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radial-simple.tsx b/apps/web/registry/miami/block/chart-radial-simple.tsx
deleted file mode 100644
index 32448c3e..00000000
--- a/apps/web/registry/miami/block/chart-radial-simple.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { RadialBar, RadialBarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radial chart'
-
-const chartData = [
-   { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-   { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-   { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-   { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   chrome: {
-      label: 'Chrome',
-      color: 'hsl(var(--chart-1))',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-   firefox: {
-      label: 'Firefox',
-      color: 'hsl(var(--chart-3))',
-   },
-   edge: {
-      label: 'Edge',
-      color: 'hsl(var(--chart-4))',
-   },
-   other: {
-      label: 'Other',
-      color: 'hsl(var(--chart-5))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Radial Chart</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel nameKey="browser" />}
-                  />
-                  <RadialBar dataKey="visitors" background />
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radial-stacked.tsx b/apps/web/registry/miami/block/chart-radial-stacked.tsx
deleted file mode 100644
index 34c8b3c6..00000000
--- a/apps/web/registry/miami/block/chart-radial-stacked.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A radial chart with stacked sections'
-
-const chartData = [{ month: 'january', desktop: 1260, mobile: 570 }]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   const totalVisitors = chartData[0].desktop + chartData[0].mobile
-
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Radial Chart - Stacked</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex flex-1 items-center pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square w-full max-w-[250px]"
-            >
-               <RadialBarChart
-                  data={chartData}
-                  endAngle={180}
-                  innerRadius={80}
-                  outerRadius={130}
-               >
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                  />
-                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
-                     <Label
-                        content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                              return (
-                                 <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={(viewBox.cy || 0) - 16}
-                                       className="fill-foreground text-2xl font-bold"
-                                    >
-                                       {totalVisitors.toLocaleString()}
-                                    </tspan>
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={(viewBox.cy || 0) + 4}
-                                       className="fill-muted-foreground"
-                                    >
-                                       Visitors
-                                    </tspan>
-                                 </text>
-                              )
-                           }
-                        }}
-                     />
-                  </PolarRadiusAxis>
-                  <RadialBar
-                     dataKey="desktop"
-                     stackId="a"
-                     cornerRadius={5}
-                     fill="var(--color-desktop)"
-                     className="stroke-transparent stroke-2"
-                  />
-                  <RadialBar
-                     dataKey="mobile"
-                     fill="var(--color-mobile)"
-                     stackId="a"
-                     cornerRadius={5}
-                     className="stroke-transparent stroke-2"
-                  />
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-radial-text.tsx b/apps/web/registry/miami/block/chart-radial-text.tsx
deleted file mode 100644
index 76d4ca8b..00000000
--- a/apps/web/registry/miami/block/chart-radial-text.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-'use client'
-
-import { TrendingUp } from 'lucide-react'
-import {
-   Label,
-   PolarGrid,
-   PolarRadiusAxis,
-   RadialBar,
-   RadialBarChart,
-} from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type { ChartConfig } from '~/registry/miami/ui/chart'
-import { ChartContainer } from '~/registry/miami/ui/chart'
-
-export const description = 'A radial chart with text'
-
-const chartData = [
-   { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-]
-
-const chartConfig = {
-   visitors: {
-      label: 'Visitors',
-   },
-   safari: {
-      label: 'Safari',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col">
-         <CardHeader className="items-center pb-0">
-            <CardTitle>Radial Chart - Text</CardTitle>
-            <CardDescription>January - June 2024</CardDescription>
-         </CardHeader>
-         <CardContent className="flex-1 pb-0">
-            <ChartContainer
-               config={chartConfig}
-               className="mx-auto aspect-square max-h-[250px]"
-            >
-               <RadialBarChart
-                  data={chartData}
-                  startAngle={0}
-                  endAngle={250}
-                  innerRadius={80}
-                  outerRadius={110}
-               >
-                  <PolarGrid
-                     gridType="circle"
-                     radialLines={false}
-                     stroke="none"
-                     className="first:fill-muted last:fill-background"
-                     polarRadius={[86, 74]}
-                  />
-                  <RadialBar dataKey="visitors" background cornerRadius={10} />
-                  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
-                     <Label
-                        content={({ viewBox }) => {
-                           if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                              return (
-                                 <text
-                                    x={viewBox.cx}
-                                    y={viewBox.cy}
-                                    textAnchor="middle"
-                                    dominantBaseline="middle"
-                                 >
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={viewBox.cy}
-                                       className="fill-foreground text-4xl font-bold"
-                                    >
-                                       {chartData[0].visitors.toLocaleString()}
-                                    </tspan>
-                                    <tspan
-                                       x={viewBox.cx}
-                                       y={(viewBox.cy || 0) + 24}
-                                       className="fill-muted-foreground"
-                                    >
-                                       Visitors
-                                    </tspan>
-                                 </text>
-                              )
-                           }
-                        }}
-                     />
-                  </PolarRadiusAxis>
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col gap-2 text-sm">
-            <div className="flex items-center gap-2 font-medium leading-none">
-               Trending up by 5.2% this month
-               {' '}
-               <TrendingUp className="size-4" />
-            </div>
-            <div className="text-muted-foreground leading-none">
-               Showing total visitors for the last 6 months
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-tooltip-advanced.tsx b/apps/web/registry/miami/block/chart-tooltip-advanced.tsx
deleted file mode 100644
index a5810a5c..00000000
--- a/apps/web/registry/miami/block/chart-tooltip-advanced.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Advanced</CardTitle>
-            <CardDescription>
-               Tooltip with custom formatter and total.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           hideLabel
-                           className="w-[180px]"
-                           formatter={(value, name, item, index) => (
-                              <>
-                                 <div
-                                    className="size-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
-                                    style={
-                                       {
-                                          '--color-bg': `var(--color-${name})`,
-                                       } as React.CSSProperties
-                                    }
-                                 />
-                                 {chartConfig[name as keyof typeof chartConfig]?.label
-                                 || name}
-                                 <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
-                                    {value}
-                                    <span className="text-muted-foreground font-normal">
-                                       kcal
-                                    </span>
-                                 </div>
-                                 {/* Add this after the last item */}
-                                 {index === 1 && (
-                                    <div className="text-foreground mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium">
-                                       Total
-                                       <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
-                                          {item.payload.running + item.payload.swimming}
-                                          <span className="text-muted-foreground font-normal">
-                                             kcal
-                                          </span>
-                                       </div>
-                                    </div>
-                                 )}
-                              </>
-                           )}
-                        />
-                     )}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-tooltip-default.tsx b/apps/web/registry/miami/block/chart-tooltip-default.tsx
deleted file mode 100644
index d4830690..00000000
--- a/apps/web/registry/miami/block/chart-tooltip-default.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Default</CardTitle>
-            <CardDescription>
-               Default tooltip with ChartTooltipContent.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={<ChartTooltipContent />}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-tooltip-formatter.tsx b/apps/web/registry/miami/block/chart-tooltip-formatter.tsx
deleted file mode 100644
index ac2955f5..00000000
--- a/apps/web/registry/miami/block/chart-tooltip-formatter.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Formatter</CardTitle>
-            <CardDescription>Tooltip with custom formatter .</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           hideLabel
-                           formatter={(value, name) => (
-                              <div className="text-muted-foreground flex min-w-[130px] items-center text-xs">
-                                 {chartConfig[name as keyof typeof chartConfig]?.label
-                                 || name}
-                                 <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
-                                    {value}
-                                    <span className="text-muted-foreground font-normal">
-                                       kcal
-                                    </span>
-                                 </div>
-                              </div>
-                           )}
-                        />
-                     )}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-tooltip-icons.tsx b/apps/web/registry/miami/block/chart-tooltip-icons.tsx
deleted file mode 100644
index b50525d5..00000000
--- a/apps/web/registry/miami/block/chart-tooltip-icons.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import { Footprints, Waves } from 'lucide-react'
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-      icon: Footprints,
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-      icon: Waves,
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Icons</CardTitle>
-            <CardDescription>Tooltip with icons.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={<ChartTooltipContent hideLabel />}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-tooltip-indicator-line.tsx b/apps/web/registry/miami/block/chart-tooltip-indicator-line.tsx
deleted file mode 100644
index 53e1dbd9..00000000
--- a/apps/web/registry/miami/block/chart-tooltip-indicator-line.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Line Indicator</CardTitle>
-            <CardDescription>Tooltip with line indicator.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={<ChartTooltipContent indicator="line" />}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-tooltip-indicator-none.tsx b/apps/web/registry/miami/block/chart-tooltip-indicator-none.tsx
deleted file mode 100644
index f361e81c..00000000
--- a/apps/web/registry/miami/block/chart-tooltip-indicator-none.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - No Indicator</CardTitle>
-            <CardDescription>Tooltip with no indicator.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={<ChartTooltipContent hideIndicator />}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-tooltip-label-custom.tsx b/apps/web/registry/miami/block/chart-tooltip-label-custom.tsx
deleted file mode 100644
index e82b0abe..00000000
--- a/apps/web/registry/miami/block/chart-tooltip-label-custom.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   activities: {
-      label: 'Activities',
-   },
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Custom label</CardTitle>
-            <CardDescription>
-               Tooltip with custom label from chartConfig.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={
-                        <ChartTooltipContent labelKey="activities" indicator="line" />
-                     }
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-tooltip-label-formatter.tsx b/apps/web/registry/miami/block/chart-tooltip-label-formatter.tsx
deleted file mode 100644
index da4094f4..00000000
--- a/apps/web/registry/miami/block/chart-tooltip-label-formatter.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - Label Formatter</CardTitle>
-            <CardDescription>Tooltip with label formatter.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 day: 'numeric',
-                                 month: 'long',
-                                 year: 'numeric',
-                              })
-                           }}
-                        />
-                     )}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/chart-tooltip-label-none.tsx b/apps/web/registry/miami/block/chart-tooltip-label-none.tsx
deleted file mode 100644
index a5bb295b..00000000
--- a/apps/web/registry/miami/block/chart-tooltip-label-none.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { Bar, BarChart, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-export const description = 'A stacked bar chart with a legend'
-
-const chartData = [
-   { date: '2024-07-15', running: 450, swimming: 300 },
-   { date: '2024-07-16', running: 380, swimming: 420 },
-   { date: '2024-07-17', running: 520, swimming: 120 },
-   { date: '2024-07-18', running: 140, swimming: 550 },
-   { date: '2024-07-19', running: 600, swimming: 350 },
-   { date: '2024-07-20', running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-   running: {
-      label: 'Running',
-      color: 'hsl(var(--chart-1))',
-   },
-   swimming: {
-      label: 'Swimming',
-      color: 'hsl(var(--chart-2))',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Tooltip - No Label</CardTitle>
-            <CardDescription>Tooltip with no label.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer config={chartConfig}>
-               <BarChart accessibilityLayer data={chartData}>
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     tickMargin={10}
-                     axisLine={false}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Bar
-                     dataKey="running"
-                     stackId="a"
-                     fill="var(--color-running)"
-                     radius={[0, 0, 4, 4]}
-                  />
-                  <Bar
-                     dataKey="swimming"
-                     stackId="a"
-                     fill="var(--color-swimming)"
-                     radius={[4, 4, 0, 0]}
-                  />
-                  <ChartTooltip
-                     content={<ChartTooltipContent hideIndicator hideLabel />}
-                     cursor={false}
-                     defaultIndex={1}
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/charts-01-chunk-0.tsx b/apps/web/registry/miami/block/charts-01-chunk-0.tsx
deleted file mode 100644
index 1764794e..00000000
--- a/apps/web/registry/miami/block/charts-01-chunk-0.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-'use client'
-
-import { Bar, BarChart, Label, Rectangle, ReferenceLine, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami//ui/card'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami//ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
-         <CardHeader className="space-y-0 pb-2">
-            <CardDescription>Today</CardDescription>
-            <CardTitle className="text-4xl tabular-nums">
-               12,584
-               {' '}
-               <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
-                  steps
-               </span>
-            </CardTitle>
-         </CardHeader>
-         <CardContent>
-            <ChartContainer
-               config={{
-                  steps: {
-                     label: 'Steps',
-                     color: 'hsl(var(--chart-1))',
-                  },
-               }}
-            >
-               <BarChart
-                  accessibilityLayer
-                  margin={{
-                     left: -4,
-                     right: -4,
-                  }}
-                  data={[
-                     {
-                        date: '2024-01-01',
-                        steps: 2000,
-                     },
-                     {
-                        date: '2024-01-02',
-                        steps: 2100,
-                     },
-                     {
-                        date: '2024-01-03',
-                        steps: 2200,
-                     },
-                     {
-                        date: '2024-01-04',
-                        steps: 1300,
-                     },
-                     {
-                        date: '2024-01-05',
-                        steps: 1400,
-                     },
-                     {
-                        date: '2024-01-06',
-                        steps: 2500,
-                     },
-                     {
-                        date: '2024-01-07',
-                        steps: 1600,
-                     },
-                  ]}
-               >
-                  <Bar
-                     dataKey="steps"
-                     fill="var(--color-steps)"
-                     radius={5}
-                     fillOpacity={0.6}
-                     activeBar={<Rectangle fillOpacity={0.8} />}
-                  />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={4}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <ChartTooltip
-                     defaultIndex={2}
-                     content={(
-                        <ChartTooltipContent
-                           hideIndicator
-                           labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 day: 'numeric',
-                                 month: 'long',
-                                 year: 'numeric',
-                              })
-                           }}
-                        />
-                     )}
-                     cursor={false}
-                  />
-                  <ReferenceLine
-                     y={1200}
-                     stroke="hsl(var(--muted-foreground))"
-                     strokeDasharray="3 3"
-                     strokeWidth={1}
-                  >
-                     <Label
-                        position="insideBottomLeft"
-                        value="Average Steps"
-                        offset={10}
-                        fill="hsl(var(--foreground))"
-                     />
-                     <Label
-                        position="insideTopLeft"
-                        value="12,343"
-                        className="text-lg"
-                        fill="hsl(var(--foreground))"
-                        offset={10}
-                        startOffset={100}
-                     />
-                  </ReferenceLine>
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex-col items-start gap-1">
-            <CardDescription>
-               Over the past 7 days, you have walked
-               {' '}
-               <span className="text-foreground font-medium">53,305</span>
-               {' '}
-               steps.
-            </CardDescription>
-            <CardDescription>
-               You need
-               {' '}
-               <span className="text-foreground font-medium">12,584</span>
-               {' '}
-               more steps to reach your goal.
-            </CardDescription>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/charts-01-chunk-1.tsx b/apps/web/registry/miami/block/charts-01-chunk-1.tsx
deleted file mode 100644
index fbbf7a11..00000000
--- a/apps/web/registry/miami/block/charts-01-chunk-1.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-'use client'
-
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami//ui/card'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami//ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
-         <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
-            <div>
-               <CardDescription>Resting HR</CardDescription>
-               <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                  62
-                  <span className="text-muted-foreground text-sm font-normal tracking-normal">
-                     bpm
-                  </span>
-               </CardTitle>
-            </div>
-            <div>
-               <CardDescription>Variability</CardDescription>
-               <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                  35
-                  <span className="text-muted-foreground text-sm font-normal tracking-normal">
-                     ms
-                  </span>
-               </CardTitle>
-            </div>
-         </CardHeader>
-         <CardContent className="flex flex-1 items-center">
-            <ChartContainer
-               config={{
-                  resting: {
-                     label: 'Resting',
-                     color: 'hsl(var(--chart-1))',
-                  },
-               }}
-               className="w-full"
-            >
-               <LineChart
-                  accessibilityLayer
-                  margin={{
-                     left: 14,
-                     right: 14,
-                     top: 10,
-                  }}
-                  data={[
-                     {
-                        date: '2024-01-01',
-                        resting: 62,
-                     },
-                     {
-                        date: '2024-01-02',
-                        resting: 72,
-                     },
-                     {
-                        date: '2024-01-03',
-                        resting: 35,
-                     },
-                     {
-                        date: '2024-01-04',
-                        resting: 62,
-                     },
-                     {
-                        date: '2024-01-05',
-                        resting: 52,
-                     },
-                     {
-                        date: '2024-01-06',
-                        resting: 62,
-                     },
-                     {
-                        date: '2024-01-07',
-                        resting: 70,
-                     },
-                  ]}
-               >
-                  <CartesianGrid
-                     strokeDasharray="4 4"
-                     vertical={false}
-                     stroke="hsl(var(--muted-foreground))"
-                     strokeOpacity={0.5}
-                  />
-                  <YAxis hide domain={['dataMin - 10', 'dataMax + 10']} />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={8}
-                     tickFormatter={(value) => {
-                        return new Date(value).toLocaleDateString('en-US', {
-                           weekday: 'short',
-                        })
-                     }}
-                  />
-                  <Line
-                     dataKey="resting"
-                     type="natural"
-                     fill="var(--color-resting)"
-                     stroke="var(--color-resting)"
-                     strokeWidth={2}
-                     dot={false}
-                     activeDot={{
-                        fill: 'var(--color-resting)',
-                        stroke: 'var(--color-resting)',
-                        r: 4,
-                     }}
-                  />
-                  <ChartTooltip
-                     content={(
-                        <ChartTooltipContent
-                           indicator="line"
-                           labelFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 day: 'numeric',
-                                 month: 'long',
-                                 year: 'numeric',
-                              })
-                           }}
-                        />
-                     )}
-                     cursor={false}
-                  />
-               </LineChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/charts-01-chunk-2.tsx b/apps/web/registry/miami/block/charts-01-chunk-2.tsx
deleted file mode 100644
index 294a795b..00000000
--- a/apps/web/registry/miami/block/charts-01-chunk-2.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'use client'
-
-import { Bar, BarChart, LabelList, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami//ui/card'
-import { ChartContainer } from '~/registry/miami//ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="max-w-xs" x-chunk="charts-01-chunk-2">
-         <CardHeader>
-            <CardTitle>Progress</CardTitle>
-            <CardDescription>
-               You're average more steps a day this year than last year.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-4">
-            <div className="grid auto-rows-min gap-2">
-               <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  12,453
-                  <span className="text-muted-foreground text-sm font-normal">
-                     steps/day
-                  </span>
-               </div>
-               <ChartContainer
-                  config={{
-                     steps: {
-                        label: 'Steps',
-                        color: 'hsl(var(--chart-1))',
-                     },
-                  }}
-                  className="aspect-auto h-[32px] w-full"
-               >
-                  <BarChart
-                     accessibilityLayer
-                     layout="vertical"
-                     margin={{
-                        left: 0,
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                     }}
-                     data={[
-                        {
-                           date: '2024',
-                           steps: 12435,
-                        },
-                     ]}
-                  >
-                     <Bar
-                        dataKey="steps"
-                        fill="var(--color-steps)"
-                        radius={4}
-                        barSize={32}
-                     >
-                        <LabelList
-                           position="insideLeft"
-                           dataKey="date"
-                           offset={8}
-                           fontSize={12}
-                           fill="white"
-                        />
-                     </Bar>
-                     <YAxis dataKey="date" type="category" tickCount={1} hide />
-                     <XAxis dataKey="steps" type="number" hide />
-                  </BarChart>
-               </ChartContainer>
-            </div>
-            <div className="grid auto-rows-min gap-2">
-               <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  10,103
-                  <span className="text-muted-foreground text-sm font-normal">
-                     steps/day
-                  </span>
-               </div>
-               <ChartContainer
-                  config={{
-                     steps: {
-                        label: 'Steps',
-                        color: 'hsl(var(--muted))',
-                     },
-                  }}
-                  className="aspect-auto h-[32px] w-full"
-               >
-                  <BarChart
-                     accessibilityLayer
-                     layout="vertical"
-                     margin={{
-                        left: 0,
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                     }}
-                     data={[
-                        {
-                           date: '2023',
-                           steps: 10103,
-                        },
-                     ]}
-                  >
-                     <Bar
-                        dataKey="steps"
-                        fill="var(--color-steps)"
-                        radius={4}
-                        barSize={32}
-                     >
-                        <LabelList
-                           position="insideLeft"
-                           dataKey="date"
-                           offset={8}
-                           fontSize={12}
-                           fill="hsl(var(--muted-foreground))"
-                        />
-                     </Bar>
-                     <YAxis dataKey="date" type="category" tickCount={1} hide />
-                     <XAxis dataKey="steps" type="number" hide />
-                  </BarChart>
-               </ChartContainer>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/charts-01-chunk-3.tsx b/apps/web/registry/miami/block/charts-01-chunk-3.tsx
deleted file mode 100644
index 30dd88c2..00000000
--- a/apps/web/registry/miami/block/charts-01-chunk-3.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client'
-
-import { Bar, BarChart, Rectangle, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami//ui/card'
-import { ChartContainer } from '~/registry/miami//ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="max-w-xs" x-chunk="charts-01-chunk-3">
-         <CardHeader className="p-4 pb-0">
-            <CardTitle>Walking Distance</CardTitle>
-            <CardDescription>
-               Over the last 7 days, your distance walked and run was 12.5 miles per
-               day.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
-            <div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
-               12.5
-               <span className="text-muted-foreground text-sm font-normal">
-                  miles/day
-               </span>
-            </div>
-            <ChartContainer
-               config={{
-                  steps: {
-                     label: 'Steps',
-                     color: 'hsl(var(--chart-1))',
-                  },
-               }}
-               className="ml-auto w-[72px]"
-            >
-               <BarChart
-                  accessibilityLayer
-                  margin={{
-                     left: 0,
-                     right: 0,
-                     top: 0,
-                     bottom: 0,
-                  }}
-                  data={[
-                     {
-                        date: '2024-01-01',
-                        steps: 2000,
-                     },
-                     {
-                        date: '2024-01-02',
-                        steps: 2100,
-                     },
-                     {
-                        date: '2024-01-03',
-                        steps: 2200,
-                     },
-                     {
-                        date: '2024-01-04',
-                        steps: 1300,
-                     },
-                     {
-                        date: '2024-01-05',
-                        steps: 1400,
-                     },
-                     {
-                        date: '2024-01-06',
-                        steps: 2500,
-                     },
-                     {
-                        date: '2024-01-07',
-                        steps: 1600,
-                     },
-                  ]}
-               >
-                  <Bar
-                     dataKey="steps"
-                     fill="var(--color-steps)"
-                     radius={2}
-                     fillOpacity={0.2}
-                     activeIndex={6}
-                     activeBar={<Rectangle fillOpacity={0.8} />}
-                  />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={4}
-                     hide
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/charts-01-chunk-4.tsx b/apps/web/registry/miami/block/charts-01-chunk-4.tsx
deleted file mode 100644
index a4d800bb..00000000
--- a/apps/web/registry/miami/block/charts-01-chunk-4.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-'use client'
-
-import { Bar, BarChart, LabelList, XAxis, YAxis } from 'recharts'
-
-import { Card, CardContent, CardFooter } from '~/registry/miami//ui/card'
-import { ChartContainer } from '~/registry/miami//ui/chart'
-import { Separator } from '~/registry/miami//ui/separator'
-
-export default function Component() {
-   return (
-      <Card className="max-w-xs" x-chunk="charts-01-chunk-4">
-         <CardContent className="flex gap-4 p-4 pb-2">
-            <ChartContainer
-               config={{
-                  move: {
-                     label: 'Move',
-                     color: 'hsl(var(--chart-1))',
-                  },
-                  stand: {
-                     label: 'Stand',
-                     color: 'hsl(var(--chart-2))',
-                  },
-                  exercise: {
-                     label: 'Exercise',
-                     color: 'hsl(var(--chart-3))',
-                  },
-               }}
-               className="h-[140px] w-full"
-            >
-               <BarChart
-                  margin={{
-                     left: 0,
-                     right: 0,
-                     top: 0,
-                     bottom: 10,
-                  }}
-                  data={[
-                     {
-                        activity: 'stand',
-                        value: (8 / 12) * 100,
-                        label: '8/12 hr',
-                        fill: 'var(--color-stand)',
-                     },
-                     {
-                        activity: 'exercise',
-                        value: (46 / 60) * 100,
-                        label: '46/60 min',
-                        fill: 'var(--color-exercise)',
-                     },
-                     {
-                        activity: 'move',
-                        value: (245 / 360) * 100,
-                        label: '245/360 kcal',
-                        fill: 'var(--color-move)',
-                     },
-                  ]}
-                  layout="vertical"
-                  barSize={32}
-                  barGap={2}
-               >
-                  <XAxis type="number" dataKey="value" hide />
-                  <YAxis
-                     dataKey="activity"
-                     type="category"
-                     tickLine={false}
-                     tickMargin={4}
-                     axisLine={false}
-                     className="capitalize"
-                  />
-                  <Bar dataKey="value" radius={5}>
-                     <LabelList
-                        position="insideLeft"
-                        dataKey="label"
-                        fill="white"
-                        offset={8}
-                        fontSize={12}
-                     />
-                  </Bar>
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-         <CardFooter className="flex flex-row border-t p-4">
-            <div className="flex w-full items-center gap-2">
-               <div className="grid flex-1 auto-rows-min gap-0.5">
-                  <div className="text-muted-foreground text-xs">Move</div>
-                  <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                     562
-                     <span className="text-muted-foreground text-sm font-normal">
-                        kcal
-                     </span>
-                  </div>
-               </div>
-               <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-               <div className="grid flex-1 auto-rows-min gap-0.5">
-                  <div className="text-muted-foreground text-xs">Exercise</div>
-                  <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                     73
-                     <span className="text-muted-foreground text-sm font-normal">
-                        min
-                     </span>
-                  </div>
-               </div>
-               <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-               <div className="grid flex-1 auto-rows-min gap-0.5">
-                  <div className="text-muted-foreground text-xs">Stand</div>
-                  <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                     14
-                     <span className="text-muted-foreground text-sm font-normal">
-                        hr
-                     </span>
-                  </div>
-               </div>
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/charts-01-chunk-5.tsx b/apps/web/registry/miami/block/charts-01-chunk-5.tsx
deleted file mode 100644
index 6d7abf4d..00000000
--- a/apps/web/registry/miami/block/charts-01-chunk-5.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client'
-
-import { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts'
-
-import { Card, CardContent } from '~/registry/miami//ui/card'
-import { ChartContainer } from '~/registry/miami//ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="max-w-xs" x-chunk="charts-01-chunk-5">
-         <CardContent className="flex gap-4 p-4">
-            <div className="grid items-center gap-2">
-               <div className="grid flex-1 auto-rows-min gap-0.5">
-                  <div className="text-muted-foreground text-sm">Move</div>
-                  <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                     562/600
-                     <span className="text-muted-foreground text-sm font-normal">
-                        kcal
-                     </span>
-                  </div>
-               </div>
-               <div className="grid flex-1 auto-rows-min gap-0.5">
-                  <div className="text-muted-foreground text-sm">Exercise</div>
-                  <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                     73/120
-                     <span className="text-muted-foreground text-sm font-normal">
-                        min
-                     </span>
-                  </div>
-               </div>
-               <div className="grid flex-1 auto-rows-min gap-0.5">
-                  <div className="text-muted-foreground text-sm">Stand</div>
-                  <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                     8/12
-                     <span className="text-muted-foreground text-sm font-normal">
-                        hr
-                     </span>
-                  </div>
-               </div>
-            </div>
-            <ChartContainer
-               config={{
-                  move: {
-                     label: 'Move',
-                     color: 'hsl(var(--chart-1))',
-                  },
-                  exercise: {
-                     label: 'Exercise',
-                     color: 'hsl(var(--chart-2))',
-                  },
-                  stand: {
-                     label: 'Stand',
-                     color: 'hsl(var(--chart-3))',
-                  },
-               }}
-               className="mx-auto aspect-square w-full max-w-[80%]"
-            >
-               <RadialBarChart
-                  margin={{
-                     left: -10,
-                     right: -10,
-                     top: -10,
-                     bottom: -10,
-                  }}
-                  data={[
-                     {
-                        activity: 'stand',
-                        value: (8 / 12) * 100,
-                        fill: 'var(--color-stand)',
-                     },
-                     {
-                        activity: 'exercise',
-                        value: (46 / 60) * 100,
-                        fill: 'var(--color-exercise)',
-                     },
-                     {
-                        activity: 'move',
-                        value: (245 / 360) * 100,
-                        fill: 'var(--color-move)',
-                     },
-                  ]}
-                  innerRadius="20%"
-                  barSize={24}
-                  startAngle={90}
-                  endAngle={450}
-               >
-                  <PolarAngleAxis
-                     type="number"
-                     domain={[0, 100]}
-                     dataKey="value"
-                     tick={false}
-                  />
-                  <RadialBar dataKey="value" background cornerRadius={5} />
-               </RadialBarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/charts-01-chunk-6.tsx b/apps/web/registry/miami/block/charts-01-chunk-6.tsx
deleted file mode 100644
index ae6a914e..00000000
--- a/apps/web/registry/miami/block/charts-01-chunk-6.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client'
-
-import { Bar, BarChart, Rectangle, XAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami//ui/card'
-import { ChartContainer } from '~/registry/miami//ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="max-w-xs" x-chunk="charts-01-chunk-6">
-         <CardHeader className="p-4 pb-0">
-            <CardTitle>Active Energy</CardTitle>
-            <CardDescription>
-               You're burning an average of 754 calories per day. Good job!
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
-            <div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
-               1,254
-               <span className="text-muted-foreground text-sm font-normal">
-                  kcal/day
-               </span>
-            </div>
-            <ChartContainer
-               config={{
-                  calories: {
-                     label: 'Calories',
-                     color: 'hsl(var(--chart-1))',
-                  },
-               }}
-               className="ml-auto w-[64px]"
-            >
-               <BarChart
-                  accessibilityLayer
-                  margin={{
-                     left: 0,
-                     right: 0,
-                     top: 0,
-                     bottom: 0,
-                  }}
-                  data={[
-                     {
-                        date: '2024-01-01',
-                        calories: 354,
-                     },
-                     {
-                        date: '2024-01-02',
-                        calories: 514,
-                     },
-                     {
-                        date: '2024-01-03',
-                        calories: 345,
-                     },
-                     {
-                        date: '2024-01-04',
-                        calories: 734,
-                     },
-                     {
-                        date: '2024-01-05',
-                        calories: 645,
-                     },
-                     {
-                        date: '2024-01-06',
-                        calories: 456,
-                     },
-                     {
-                        date: '2024-01-07',
-                        calories: 345,
-                     },
-                  ]}
-               >
-                  <Bar
-                     dataKey="calories"
-                     fill="var(--color-calories)"
-                     radius={2}
-                     fillOpacity={0.2}
-                     activeIndex={6}
-                     activeBar={<Rectangle fillOpacity={0.8} />}
-                  />
-                  <XAxis
-                     dataKey="date"
-                     tickLine={false}
-                     axisLine={false}
-                     tickMargin={4}
-                     hide
-                  />
-               </BarChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/charts-01-chunk-7.tsx b/apps/web/registry/miami/block/charts-01-chunk-7.tsx
deleted file mode 100644
index a723d098..00000000
--- a/apps/web/registry/miami/block/charts-01-chunk-7.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-'use client'
-
-import { Area, AreaChart, XAxis, YAxis } from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami//ui/card'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami//ui/chart'
-
-export default function Component() {
-   return (
-      <Card className="max-w-xs" x-chunk="charts-01-chunk-7">
-         <CardHeader className="space-y-0 pb-0">
-            <CardDescription>Time in Bed</CardDescription>
-            <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-               8
-               <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
-                  hr
-               </span>
-               35
-               <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
-                  min
-               </span>
-            </CardTitle>
-         </CardHeader>
-         <CardContent className="p-0">
-            <ChartContainer
-               config={{
-                  time: {
-                     label: 'Time',
-                     color: 'hsl(var(--chart-2))',
-                  },
-               }}
-            >
-               <AreaChart
-                  accessibilityLayer
-                  data={[
-                     {
-                        date: '2024-01-01',
-                        time: 8.5,
-                     },
-                     {
-                        date: '2024-01-02',
-                        time: 7.2,
-                     },
-                     {
-                        date: '2024-01-03',
-                        time: 8.1,
-                     },
-                     {
-                        date: '2024-01-04',
-                        time: 6.2,
-                     },
-                     {
-                        date: '2024-01-05',
-                        time: 5.2,
-                     },
-                     {
-                        date: '2024-01-06',
-                        time: 8.1,
-                     },
-                     {
-                        date: '2024-01-07',
-                        time: 7.0,
-                     },
-                  ]}
-                  margin={{
-                     left: 0,
-                     right: 0,
-                     top: 0,
-                     bottom: 0,
-                  }}
-               >
-                  <XAxis dataKey="date" hide />
-                  <YAxis domain={['dataMin - 5', 'dataMax + 2']} hide />
-                  <defs>
-                     <linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
-                        <stop
-                           offset="5%"
-                           stopColor="var(--color-time)"
-                           stopOpacity={0.8}
-                        />
-                        <stop
-                           offset="95%"
-                           stopColor="var(--color-time)"
-                           stopOpacity={0.1}
-                        />
-                     </linearGradient>
-                  </defs>
-                  <Area
-                     dataKey="time"
-                     type="natural"
-                     fill="url(#fillTime)"
-                     fillOpacity={0.4}
-                     stroke="var(--color-time)"
-                  />
-                  <ChartTooltip
-                     cursor={false}
-                     content={<ChartTooltipContent hideLabel />}
-                     formatter={value => (
-                        <div className="text-muted-foreground flex min-w-[120px] items-center text-xs">
-                           Time in bed
-                           <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
-                              {value}
-                              <span className="text-muted-foreground font-normal">
-                                 hr
-                              </span>
-                           </div>
-                        </div>
-                     )}
-                  />
-               </AreaChart>
-            </ChartContainer>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/charts-01.tsx b/apps/web/registry/miami/block/charts-01.tsx
deleted file mode 100644
index 0a204591..00000000
--- a/apps/web/registry/miami/block/charts-01.tsx
+++ /dev/null
@@ -1,902 +0,0 @@
-'use client'
-
-import {
-   Area,
-   AreaChart,
-   Bar,
-   BarChart,
-   CartesianGrid,
-   Label,
-   LabelList,
-   Line,
-   LineChart,
-   PolarAngleAxis,
-   RadialBar,
-   RadialBarChart,
-   Rectangle,
-   ReferenceLine,
-   XAxis,
-   YAxis,
-} from 'recharts'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami//ui/card'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami//ui/chart'
-import { Separator } from '~/registry/miami//ui/separator'
-
-export const description = 'A collection of health charts.'
-
-export const iframeHeight = '900px'
-
-export const containerClassName = 'min-h-screen py-12'
-
-export default function Charts() {
-   return (
-      <div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
-         <div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
-            <Card
-               x-chunk="A bar chart showing the number of steps you have walked in the past 7 days."
-               className="lg:max-w-md"
-            >
-               <CardHeader className="space-y-0 pb-2">
-                  <CardDescription>Today</CardDescription>
-                  <CardTitle className="text-4xl tabular-nums">
-                     12,584
-                     {' '}
-                     <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
-                        steps
-                     </span>
-                  </CardTitle>
-               </CardHeader>
-               <CardContent>
-                  <ChartContainer
-                     config={{
-                        steps: {
-                           label: 'Steps',
-                           color: 'hsl(var(--chart-1))',
-                        },
-                     }}
-                  >
-                     <BarChart
-                        accessibilityLayer
-                        margin={{
-                           left: -4,
-                           right: -4,
-                        }}
-                        data={[
-                           {
-                              date: '2024-01-01',
-                              steps: 2000,
-                           },
-                           {
-                              date: '2024-01-02',
-                              steps: 2100,
-                           },
-                           {
-                              date: '2024-01-03',
-                              steps: 2200,
-                           },
-                           {
-                              date: '2024-01-04',
-                              steps: 1300,
-                           },
-                           {
-                              date: '2024-01-05',
-                              steps: 1400,
-                           },
-                           {
-                              date: '2024-01-06',
-                              steps: 2500,
-                           },
-                           {
-                              date: '2024-01-07',
-                              steps: 1600,
-                           },
-                        ]}
-                     >
-                        <Bar
-                           dataKey="steps"
-                           fill="var(--color-steps)"
-                           radius={5}
-                           fillOpacity={0.6}
-                           activeBar={<Rectangle fillOpacity={0.8} />}
-                        />
-                        <XAxis
-                           dataKey="date"
-                           tickLine={false}
-                           axisLine={false}
-                           tickMargin={4}
-                           tickFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 weekday: 'short',
-                              })
-                           }}
-                        />
-                        <ChartTooltip
-                           defaultIndex={2}
-                           content={(
-                              <ChartTooltipContent
-                                 hideIndicator
-                                 labelFormatter={(value) => {
-                                    return new Date(value).toLocaleDateString('en-US', {
-                                       day: 'numeric',
-                                       month: 'long',
-                                       year: 'numeric',
-                                    })
-                                 }}
-                              />
-                           )}
-                           cursor={false}
-                        />
-                        <ReferenceLine
-                           y={1200}
-                           stroke="hsl(var(--muted-foreground))"
-                           strokeDasharray="3 3"
-                           strokeWidth={1}
-                        >
-                           <Label
-                              position="insideBottomLeft"
-                              value="Average Steps"
-                              offset={10}
-                              fill="hsl(var(--foreground))"
-                           />
-                           <Label
-                              position="insideTopLeft"
-                              value="12,343"
-                              className="text-lg"
-                              fill="hsl(var(--foreground))"
-                              offset={10}
-                              startOffset={100}
-                           />
-                        </ReferenceLine>
-                     </BarChart>
-                  </ChartContainer>
-               </CardContent>
-               <CardFooter className="flex-col items-start gap-1">
-                  <CardDescription>
-                     Over the past 7 days, you have walked
-                     {' '}
-                     <span className="text-foreground font-medium">53,305</span>
-                     {' '}
-                     steps.
-                  </CardDescription>
-                  <CardDescription>
-                     You need
-                     {' '}
-                     <span className="text-foreground font-medium">12,584</span>
-                     {' '}
-                     more
-                     steps to reach your goal.
-                  </CardDescription>
-               </CardFooter>
-            </Card>
-            <Card
-               x-chunk="A line chart showing the resting heart rate for the past 7 days."
-               className="flex flex-col lg:max-w-md"
-            >
-               <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
-                  <div>
-                     <CardDescription>Resting HR</CardDescription>
-                     <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                        62
-                        <span className="text-muted-foreground text-sm font-normal tracking-normal">
-                           bpm
-                        </span>
-                     </CardTitle>
-                  </div>
-                  <div>
-                     <CardDescription>Variability</CardDescription>
-                     <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                        35
-                        <span className="text-muted-foreground text-sm font-normal tracking-normal">
-                           ms
-                        </span>
-                     </CardTitle>
-                  </div>
-               </CardHeader>
-               <CardContent className="flex flex-1 items-center">
-                  <ChartContainer
-                     config={{
-                        resting: {
-                           label: 'Resting',
-                           color: 'hsl(var(--chart-1))',
-                        },
-                     }}
-                     className="w-full"
-                  >
-                     <LineChart
-                        accessibilityLayer
-                        margin={{
-                           left: 14,
-                           right: 14,
-                           top: 10,
-                        }}
-                        data={[
-                           {
-                              date: '2024-01-01',
-                              resting: 62,
-                           },
-                           {
-                              date: '2024-01-02',
-                              resting: 72,
-                           },
-                           {
-                              date: '2024-01-03',
-                              resting: 35,
-                           },
-                           {
-                              date: '2024-01-04',
-                              resting: 62,
-                           },
-                           {
-                              date: '2024-01-05',
-                              resting: 52,
-                           },
-                           {
-                              date: '2024-01-06',
-                              resting: 62,
-                           },
-                           {
-                              date: '2024-01-07',
-                              resting: 70,
-                           },
-                        ]}
-                     >
-                        <CartesianGrid
-                           strokeDasharray="4 4"
-                           vertical={false}
-                           stroke="hsl(var(--muted-foreground))"
-                           strokeOpacity={0.5}
-                        />
-                        <YAxis hide domain={['dataMin - 10', 'dataMax + 10']} />
-                        <XAxis
-                           dataKey="date"
-                           tickLine={false}
-                           axisLine={false}
-                           tickMargin={8}
-                           tickFormatter={(value) => {
-                              return new Date(value).toLocaleDateString('en-US', {
-                                 weekday: 'short',
-                              })
-                           }}
-                        />
-                        <Line
-                           dataKey="resting"
-                           type="natural"
-                           fill="var(--color-resting)"
-                           stroke="var(--color-resting)"
-                           strokeWidth={2}
-                           dot={false}
-                           activeDot={{
-                              fill: 'var(--color-resting)',
-                              stroke: 'var(--color-resting)',
-                              r: 4,
-                           }}
-                        />
-                        <ChartTooltip
-                           content={(
-                              <ChartTooltipContent
-                                 indicator="line"
-                                 labelFormatter={(value) => {
-                                    return new Date(value).toLocaleDateString('en-US', {
-                                       day: 'numeric',
-                                       month: 'long',
-                                       year: 'numeric',
-                                    })
-                                 }}
-                              />
-                           )}
-                           cursor={false}
-                        />
-                     </LineChart>
-                  </ChartContainer>
-               </CardContent>
-            </Card>
-         </div>
-         <div className="grid w-full flex-1 gap-6 lg:max-w-80">
-            <Card
-               x-chunk="Two horizontal bar charts showing total steps taken during the current year and last year."
-               className="max-w-xs"
-            >
-               <CardHeader>
-                  <CardTitle>Progress</CardTitle>
-                  <CardDescription>
-                     You're average more steps a day this year than last year.
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="grid gap-4">
-                  <div className="grid auto-rows-min gap-2">
-                     <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                        12,453
-                        <span className="text-muted-foreground text-sm font-normal">
-                           steps/day
-                        </span>
-                     </div>
-                     <ChartContainer
-                        config={{
-                           steps: {
-                              label: 'Steps',
-                              color: 'hsl(var(--chart-1))',
-                           },
-                        }}
-                        className="aspect-auto h-[32px] w-full"
-                     >
-                        <BarChart
-                           accessibilityLayer
-                           layout="vertical"
-                           margin={{
-                              left: 0,
-                              top: 0,
-                              right: 0,
-                              bottom: 0,
-                           }}
-                           data={[
-                              {
-                                 date: '2024',
-                                 steps: 12435,
-                              },
-                           ]}
-                        >
-                           <Bar
-                              dataKey="steps"
-                              fill="var(--color-steps)"
-                              radius={4}
-                              barSize={32}
-                           >
-                              <LabelList
-                                 position="insideLeft"
-                                 dataKey="date"
-                                 offset={8}
-                                 fontSize={12}
-                                 fill="white"
-                              />
-                           </Bar>
-                           <YAxis dataKey="date" type="category" tickCount={1} hide />
-                           <XAxis dataKey="steps" type="number" hide />
-                        </BarChart>
-                     </ChartContainer>
-                  </div>
-                  <div className="grid auto-rows-min gap-2">
-                     <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                        10,103
-                        <span className="text-muted-foreground text-sm font-normal">
-                           steps/day
-                        </span>
-                     </div>
-                     <ChartContainer
-                        config={{
-                           steps: {
-                              label: 'Steps',
-                              color: 'hsl(var(--muted))',
-                           },
-                        }}
-                        className="aspect-auto h-[32px] w-full"
-                     >
-                        <BarChart
-                           accessibilityLayer
-                           layout="vertical"
-                           margin={{
-                              left: 0,
-                              top: 0,
-                              right: 0,
-                              bottom: 0,
-                           }}
-                           data={[
-                              {
-                                 date: '2023',
-                                 steps: 10103,
-                              },
-                           ]}
-                        >
-                           <Bar
-                              dataKey="steps"
-                              fill="var(--color-steps)"
-                              radius={4}
-                              barSize={32}
-                           >
-                              <LabelList
-                                 position="insideLeft"
-                                 dataKey="date"
-                                 offset={8}
-                                 fontSize={12}
-                                 fill="hsl(var(--muted-foreground))"
-                              />
-                           </Bar>
-                           <YAxis dataKey="date" type="category" tickCount={1} hide />
-                           <XAxis dataKey="steps" type="number" hide />
-                        </BarChart>
-                     </ChartContainer>
-                  </div>
-               </CardContent>
-            </Card>
-            <Card
-               x-chunk="A bar chart showing the walking and running distance for the past 7 days."
-               className="max-w-xs"
-            >
-               <CardHeader className="p-4 pb-0">
-                  <CardTitle>Walking Distance</CardTitle>
-                  <CardDescription>
-                     Over the last 7 days, your distance walked and run was 12.5 miles
-                     per day.
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
-                  <div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
-                     12.5
-                     <span className="text-muted-foreground text-sm font-normal">
-                        miles/day
-                     </span>
-                  </div>
-                  <ChartContainer
-                     config={{
-                        steps: {
-                           label: 'Steps',
-                           color: 'hsl(var(--chart-1))',
-                        },
-                     }}
-                     className="ml-auto w-[72px]"
-                  >
-                     <BarChart
-                        accessibilityLayer
-                        margin={{
-                           left: 0,
-                           right: 0,
-                           top: 0,
-                           bottom: 0,
-                        }}
-                        data={[
-                           {
-                              date: '2024-01-01',
-                              steps: 2000,
-                           },
-                           {
-                              date: '2024-01-02',
-                              steps: 2100,
-                           },
-                           {
-                              date: '2024-01-03',
-                              steps: 2200,
-                           },
-                           {
-                              date: '2024-01-04',
-                              steps: 1300,
-                           },
-                           {
-                              date: '2024-01-05',
-                              steps: 1400,
-                           },
-                           {
-                              date: '2024-01-06',
-                              steps: 2500,
-                           },
-                           {
-                              date: '2024-01-07',
-                              steps: 1600,
-                           },
-                        ]}
-                     >
-                        <Bar
-                           dataKey="steps"
-                           fill="var(--color-steps)"
-                           radius={2}
-                           fillOpacity={0.2}
-                           activeIndex={6}
-                           activeBar={<Rectangle fillOpacity={0.8} />}
-                        />
-                        <XAxis
-                           dataKey="date"
-                           tickLine={false}
-                           axisLine={false}
-                           tickMargin={4}
-                           hide
-                        />
-                     </BarChart>
-                  </ChartContainer>
-               </CardContent>
-            </Card>
-            <Card
-               x-chunk="A bar chart showing move, exercise, and stand progress."
-               className="max-w-xs"
-            >
-               <CardContent className="flex gap-4 p-4 pb-2">
-                  <ChartContainer
-                     config={{
-                        move: {
-                           label: 'Move',
-                           color: 'hsl(var(--chart-1))',
-                        },
-                        stand: {
-                           label: 'Stand',
-                           color: 'hsl(var(--chart-2))',
-                        },
-                        exercise: {
-                           label: 'Exercise',
-                           color: 'hsl(var(--chart-3))',
-                        },
-                     }}
-                     className="h-[140px] w-full"
-                  >
-                     <BarChart
-                        margin={{
-                           left: 0,
-                           right: 0,
-                           top: 0,
-                           bottom: 10,
-                        }}
-                        data={[
-                           {
-                              activity: 'stand',
-                              value: (8 / 12) * 100,
-                              label: '8/12 hr',
-                              fill: 'var(--color-stand)',
-                           },
-                           {
-                              activity: 'exercise',
-                              value: (46 / 60) * 100,
-                              label: '46/60 min',
-                              fill: 'var(--color-exercise)',
-                           },
-                           {
-                              activity: 'move',
-                              value: (245 / 360) * 100,
-                              label: '245/360 kcal',
-                              fill: 'var(--color-move)',
-                           },
-                        ]}
-                        layout="vertical"
-                        barSize={32}
-                        barGap={2}
-                     >
-                        <XAxis type="number" dataKey="value" hide />
-                        <YAxis
-                           dataKey="activity"
-                           type="category"
-                           tickLine={false}
-                           tickMargin={4}
-                           axisLine={false}
-                           className="capitalize"
-                        />
-                        <Bar dataKey="value" radius={5}>
-                           <LabelList
-                              position="insideLeft"
-                              dataKey="label"
-                              fill="white"
-                              offset={8}
-                              fontSize={12}
-                           />
-                        </Bar>
-                     </BarChart>
-                  </ChartContainer>
-               </CardContent>
-               <CardFooter className="flex flex-row border-t p-4">
-                  <div className="flex w-full items-center gap-2">
-                     <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-xs">Move</div>
-                        <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                           562
-                           <span className="text-muted-foreground text-sm font-normal">
-                              kcal
-                           </span>
-                        </div>
-                     </div>
-                     <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-                     <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-xs">Exercise</div>
-                        <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                           73
-                           <span className="text-muted-foreground text-sm font-normal">
-                              min
-                           </span>
-                        </div>
-                     </div>
-                     <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-                     <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-xs">Stand</div>
-                        <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                           14
-                           <span className="text-muted-foreground text-sm font-normal">
-                              hr
-                           </span>
-                        </div>
-                     </div>
-                  </div>
-               </CardFooter>
-            </Card>
-         </div>
-         <div className="grid w-full flex-1 gap-6">
-            <Card
-               x-chunk="A radial bar chart showing the percentage of time spent moving, exercising, and standing."
-               className="max-w-xs"
-            >
-               <CardContent className="flex gap-4 p-4">
-                  <div className="grid items-center gap-2">
-                     <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-sm">Move</div>
-                        <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                           562/600
-                           <span className="text-muted-foreground text-sm font-normal">
-                              kcal
-                           </span>
-                        </div>
-                     </div>
-                     <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-sm">Exercise</div>
-                        <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                           73/120
-                           <span className="text-muted-foreground text-sm font-normal">
-                              min
-                           </span>
-                        </div>
-                     </div>
-                     <div className="grid flex-1 auto-rows-min gap-0.5">
-                        <div className="text-muted-foreground text-sm">Stand</div>
-                        <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                           8/12
-                           <span className="text-muted-foreground text-sm font-normal">
-                              hr
-                           </span>
-                        </div>
-                     </div>
-                  </div>
-                  <ChartContainer
-                     config={{
-                        move: {
-                           label: 'Move',
-                           color: 'hsl(var(--chart-1))',
-                        },
-                        exercise: {
-                           label: 'Exercise',
-                           color: 'hsl(var(--chart-2))',
-                        },
-                        stand: {
-                           label: 'Stand',
-                           color: 'hsl(var(--chart-3))',
-                        },
-                     }}
-                     className="mx-auto aspect-square w-full max-w-[80%]"
-                  >
-                     <RadialBarChart
-                        margin={{
-                           left: -10,
-                           right: -10,
-                           top: -10,
-                           bottom: -10,
-                        }}
-                        data={[
-                           {
-                              activity: 'stand',
-                              value: (8 / 12) * 100,
-                              fill: 'var(--color-stand)',
-                           },
-                           {
-                              activity: 'exercise',
-                              value: (46 / 60) * 100,
-                              fill: 'var(--color-exercise)',
-                           },
-                           {
-                              activity: 'move',
-                              value: (245 / 360) * 100,
-                              fill: 'var(--color-move)',
-                           },
-                        ]}
-                        innerRadius="20%"
-                        barSize={24}
-                        startAngle={90}
-                        endAngle={450}
-                     >
-                        <PolarAngleAxis
-                           type="number"
-                           domain={[0, 100]}
-                           dataKey="value"
-                           tick={false}
-                        />
-                        <RadialBar dataKey="value" background cornerRadius={5} />
-                     </RadialBarChart>
-                  </ChartContainer>
-               </CardContent>
-            </Card>
-            <Card
-               x-chunk="A bar chart showing active energy in the past 7 days."
-               className="max-w-xs"
-            >
-               <CardHeader className="p-4 pb-0">
-                  <CardTitle>Active Energy</CardTitle>
-                  <CardDescription>
-                     You're burning an average of 754 calories per day. Good job!
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
-                  <div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
-                     1,254
-                     <span className="text-muted-foreground text-sm font-normal">
-                        kcal/day
-                     </span>
-                  </div>
-                  <ChartContainer
-                     config={{
-                        calories: {
-                           label: 'Calories',
-                           color: 'hsl(var(--chart-1))',
-                        },
-                     }}
-                     className="ml-auto w-[64px]"
-                  >
-                     <BarChart
-                        accessibilityLayer
-                        margin={{
-                           left: 0,
-                           right: 0,
-                           top: 0,
-                           bottom: 0,
-                        }}
-                        data={[
-                           {
-                              date: '2024-01-01',
-                              calories: 354,
-                           },
-                           {
-                              date: '2024-01-02',
-                              calories: 514,
-                           },
-                           {
-                              date: '2024-01-03',
-                              calories: 345,
-                           },
-                           {
-                              date: '2024-01-04',
-                              calories: 734,
-                           },
-                           {
-                              date: '2024-01-05',
-                              calories: 645,
-                           },
-                           {
-                              date: '2024-01-06',
-                              calories: 456,
-                           },
-                           {
-                              date: '2024-01-07',
-                              calories: 345,
-                           },
-                        ]}
-                     >
-                        <Bar
-                           dataKey="calories"
-                           fill="var(--color-calories)"
-                           radius={2}
-                           fillOpacity={0.2}
-                           activeIndex={6}
-                           activeBar={<Rectangle fillOpacity={0.8} />}
-                        />
-                        <XAxis
-                           dataKey="date"
-                           tickLine={false}
-                           axisLine={false}
-                           tickMargin={4}
-                           hide
-                        />
-                     </BarChart>
-                  </ChartContainer>
-               </CardContent>
-            </Card>
-            <Card
-               x-chunk="An area chart showing the time spent in bed for the past 7 days."
-               className="max-w-xs"
-            >
-               <CardHeader className="space-y-0 pb-0">
-                  <CardDescription>Time in Bed</CardDescription>
-                  <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                     8
-                     <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
-                        hr
-                     </span>
-                     35
-                     <span className="text-muted-foreground font-sans text-sm font-normal tracking-normal">
-                        min
-                     </span>
-                  </CardTitle>
-               </CardHeader>
-               <CardContent className="p-0">
-                  <ChartContainer
-                     config={{
-                        time: {
-                           label: 'Time',
-                           color: 'hsl(var(--chart-2))',
-                        },
-                     }}
-                  >
-                     <AreaChart
-                        accessibilityLayer
-                        data={[
-                           {
-                              date: '2024-01-01',
-                              time: 8.5,
-                           },
-                           {
-                              date: '2024-01-02',
-                              time: 7.2,
-                           },
-                           {
-                              date: '2024-01-03',
-                              time: 8.1,
-                           },
-                           {
-                              date: '2024-01-04',
-                              time: 6.2,
-                           },
-                           {
-                              date: '2024-01-05',
-                              time: 5.2,
-                           },
-                           {
-                              date: '2024-01-06',
-                              time: 8.1,
-                           },
-                           {
-                              date: '2024-01-07',
-                              time: 7.0,
-                           },
-                        ]}
-                        margin={{
-                           left: 0,
-                           right: 0,
-                           top: 0,
-                           bottom: 0,
-                        }}
-                     >
-                        <XAxis dataKey="date" hide />
-                        <YAxis domain={['dataMin - 5', 'dataMax + 2']} hide />
-                        <defs>
-                           <linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
-                              <stop
-                                 offset="5%"
-                                 stopColor="var(--color-time)"
-                                 stopOpacity={0.8}
-                              />
-                              <stop
-                                 offset="95%"
-                                 stopColor="var(--color-time)"
-                                 stopOpacity={0.1}
-                              />
-                           </linearGradient>
-                        </defs>
-                        <Area
-                           dataKey="time"
-                           type="natural"
-                           fill="url(#fillTime)"
-                           fillOpacity={0.4}
-                           stroke="var(--color-time)"
-                        />
-                        <ChartTooltip
-                           cursor={false}
-                           content={<ChartTooltipContent hideLabel />}
-                           formatter={value => (
-                              <div className="text-muted-foreground flex min-w-[120px] items-center text-xs">
-                                 Time in bed
-                                 <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
-                                    {value}
-                                    <span className="text-muted-foreground font-normal">
-                                       hr
-                                    </span>
-                                 </div>
-                              </div>
-                           )}
-                        />
-                     </AreaChart>
-                  </ChartContainer>
-               </CardContent>
-            </Card>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-01-chunk-0.tsx b/apps/web/registry/miami/block/dashboard-01-chunk-0.tsx
deleted file mode 100644
index b55ba69d..00000000
--- a/apps/web/registry/miami/block/dashboard-01-chunk-0.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { DollarSign } from 'lucide-react'
-
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-01-chunk-0">
-         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
-            <DollarSign className="text-muted-foreground size-4" />
-         </CardHeader>
-         <CardContent>
-            <div className="text-2xl font-bold">$45,231.89</div>
-            <p className="text-muted-foreground text-xs">+20.1% from last month</p>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-01-chunk-1.tsx b/apps/web/registry/miami/block/dashboard-01-chunk-1.tsx
deleted file mode 100644
index 485b1a61..00000000
--- a/apps/web/registry/miami/block/dashboard-01-chunk-1.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { Users } from 'lucide-react'
-
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-01-chunk-1">
-         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
-            <Users className="text-muted-foreground size-4" />
-         </CardHeader>
-         <CardContent>
-            <div className="text-2xl font-bold">+2350</div>
-            <p className="text-muted-foreground text-xs">+180.1% from last month</p>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-01-chunk-2.tsx b/apps/web/registry/miami/block/dashboard-01-chunk-2.tsx
deleted file mode 100644
index 4059b5e8..00000000
--- a/apps/web/registry/miami/block/dashboard-01-chunk-2.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { CreditCard } from 'lucide-react'
-
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-01-chunk-2">
-         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Sales</CardTitle>
-            <CreditCard className="text-muted-foreground size-4" />
-         </CardHeader>
-         <CardContent>
-            <div className="text-2xl font-bold">+12,234</div>
-            <p className="text-muted-foreground text-xs">+19% from last month</p>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-01-chunk-3.tsx b/apps/web/registry/miami/block/dashboard-01-chunk-3.tsx
deleted file mode 100644
index 23833ca2..00000000
--- a/apps/web/registry/miami/block/dashboard-01-chunk-3.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { Activity } from 'lucide-react'
-
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-01-chunk-3">
-         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Active Now</CardTitle>
-            <Activity className="text-muted-foreground size-4" />
-         </CardHeader>
-         <CardContent>
-            <div className="text-2xl font-bold">+573</div>
-            <p className="text-muted-foreground text-xs">+201 since last hour</p>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-01-chunk-4.tsx b/apps/web/registry/miami/block/dashboard-01-chunk-4.tsx
deleted file mode 100644
index 0f21951a..00000000
--- a/apps/web/registry/miami/block/dashboard-01-chunk-4.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { ArrowUpRight } from 'lucide-react'
-
-import { Badge } from '~/registry/miami/ui/badge'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-
-export default function Component() {
-   return (
-      <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
-         <CardHeader className="flex flex-row items-center">
-            <div className="grid gap-2">
-               <CardTitle>Transactions</CardTitle>
-               <CardDescription>
-                  Recent transactions from your store.
-               </CardDescription>
-            </div>
-            <Button asChild size="sm" className="ml-auto gap-1">
-               <Link href="#">
-                  View All
-                  <ArrowUpRight className="size-4" />
-               </Link>
-            </Button>
-         </CardHeader>
-         <CardContent>
-            <Table>
-               <TableHeader>
-                  <TableRow>
-                     <TableHead>Customer</TableHead>
-                     <TableHead className="hidden xl:table-column">Type</TableHead>
-                     <TableHead className="hidden xl:table-column">Status</TableHead>
-                     <TableHead className="hidden xl:table-column">Date</TableHead>
-                     <TableHead className="text-right">Amount</TableHead>
-                  </TableRow>
-               </TableHeader>
-               <TableBody>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Liam Johnson</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           liam@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden xl:table-column">Sale</TableCell>
-                     <TableCell className="hidden xl:table-column">
-                        <Badge className="text-xs" variant="outline">
-                           Approved
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                        2023-06-23
-                     </TableCell>
-                     <TableCell className="text-right">$250.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Olivia Smith</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           olivia@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden xl:table-column">Refund</TableCell>
-                     <TableCell className="hidden xl:table-column">
-                        <Badge className="text-xs" variant="outline">
-                           Declined
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                        2023-06-24
-                     </TableCell>
-                     <TableCell className="text-right">$150.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Noah Williams</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           noah@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden xl:table-column">
-                        Subscription
-                     </TableCell>
-                     <TableCell className="hidden xl:table-column">
-                        <Badge className="text-xs" variant="outline">
-                           Approved
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                        2023-06-25
-                     </TableCell>
-                     <TableCell className="text-right">$350.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Emma Brown</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           emma@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden xl:table-column">Sale</TableCell>
-                     <TableCell className="hidden xl:table-column">
-                        <Badge className="text-xs" variant="outline">
-                           Approved
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                        2023-06-26
-                     </TableCell>
-                     <TableCell className="text-right">$450.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Liam Johnson</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           liam@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden xl:table-column">Sale</TableCell>
-                     <TableCell className="hidden xl:table-column">
-                        <Badge className="text-xs" variant="outline">
-                           Approved
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                        2023-06-27
-                     </TableCell>
-                     <TableCell className="text-right">$550.00</TableCell>
-                  </TableRow>
-               </TableBody>
-            </Table>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-01-chunk-5.tsx b/apps/web/registry/miami/block/dashboard-01-chunk-5.tsx
deleted file mode 100644
index 64b4abd7..00000000
--- a/apps/web/registry/miami/block/dashboard-01-chunk-5.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-01-chunk-5">
-         <CardHeader>
-            <CardTitle>Recent Sales</CardTitle>
-         </CardHeader>
-         <CardContent className="grid gap-8">
-            <div className="flex items-center gap-4">
-               <Avatar className="hidden size-9 sm:flex">
-                  <AvatarImage src="/avatars/01.png" alt="Avatar" />
-                  <AvatarFallback>OM</AvatarFallback>
-               </Avatar>
-               <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">Olivia Martin</p>
-                  <p className="text-muted-foreground text-sm">
-                     olivia.martin@email.com
-                  </p>
-               </div>
-               <div className="ml-auto font-medium">+$1,999.00</div>
-            </div>
-            <div className="flex items-center gap-4">
-               <Avatar className="hidden size-9 sm:flex">
-                  <AvatarImage src="/avatars/02.png" alt="Avatar" />
-                  <AvatarFallback>JL</AvatarFallback>
-               </Avatar>
-               <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">Jackson Lee</p>
-                  <p className="text-muted-foreground text-sm">
-                     jackson.lee@email.com
-                  </p>
-               </div>
-               <div className="ml-auto font-medium">+$39.00</div>
-            </div>
-            <div className="flex items-center gap-4">
-               <Avatar className="hidden size-9 sm:flex">
-                  <AvatarImage src="/avatars/03.png" alt="Avatar" />
-                  <AvatarFallback>IN</AvatarFallback>
-               </Avatar>
-               <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">Isabella Nguyen</p>
-                  <p className="text-muted-foreground text-sm">
-                     isabella.nguyen@email.com
-                  </p>
-               </div>
-               <div className="ml-auto font-medium">+$299.00</div>
-            </div>
-            <div className="flex items-center gap-4">
-               <Avatar className="hidden size-9 sm:flex">
-                  <AvatarImage src="/avatars/04.png" alt="Avatar" />
-                  <AvatarFallback>WK</AvatarFallback>
-               </Avatar>
-               <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">William Kim</p>
-                  <p className="text-muted-foreground text-sm">will@email.com</p>
-               </div>
-               <div className="ml-auto font-medium">+$99.00</div>
-            </div>
-            <div className="flex items-center gap-4">
-               <Avatar className="hidden size-9 sm:flex">
-                  <AvatarImage src="/avatars/05.png" alt="Avatar" />
-                  <AvatarFallback>SD</AvatarFallback>
-               </Avatar>
-               <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">Sofia Davis</p>
-                  <p className="text-muted-foreground text-sm">
-                     sofia.davis@email.com
-                  </p>
-               </div>
-               <div className="ml-auto font-medium">+$39.00</div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-01.tsx b/apps/web/registry/miami/block/dashboard-01.tsx
deleted file mode 100644
index 2db6e082..00000000
--- a/apps/web/registry/miami/block/dashboard-01.tsx
+++ /dev/null
@@ -1,458 +0,0 @@
-import Link from 'next/link'
-import {
-   Activity,
-   ArrowUpRight,
-   CircleUser,
-   CreditCard,
-   DollarSign,
-   Menu,
-   Package2,
-   Search,
-   Users,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Badge } from '~/registry/miami/ui/badge'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/miami/ui/sheet'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-
-export const description
-  = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'
-
-export const iframeHeight = '730px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="flex min-h-screen w-full flex-col">
-         <header className="bg-background sticky top-0 flex h-16 items-center gap-4 border-b px-4 md:px-6">
-            <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-               <Link
-                  href="#"
-                  className="flex items-center gap-2 text-lg font-semibold md:text-base"
-               >
-                  <Package2 className="size-6" />
-                  <span className="sr-only">Acme Inc</span>
-               </Link>
-               <Link
-                  href="#"
-                  className="text-foreground hover:text-foreground transition-colors"
-               >
-                  Dashboard
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Orders
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Products
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Customers
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Analytics
-               </Link>
-            </nav>
-            <Sheet>
-               <SheetTrigger asChild>
-                  <Button
-                     variant="outline"
-                     size="icon"
-                     className="shrink-0 md:hidden"
-                  >
-                     <Menu className="size-5" />
-                     <span className="sr-only">Toggle navigation menu</span>
-                  </Button>
-               </SheetTrigger>
-               <SheetContent side="left">
-                  <nav className="grid gap-6 text-lg font-medium">
-                     <Link
-                        href="#"
-                        className="flex items-center gap-2 text-lg font-semibold"
-                     >
-                        <Package2 className="size-6" />
-                        <span className="sr-only">Acme Inc</span>
-                     </Link>
-                     <Link href="#" className="hover:text-foreground">
-                        Dashboard
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Orders
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Products
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Customers
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Analytics
-                     </Link>
-                  </nav>
-               </SheetContent>
-            </Sheet>
-            <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
-               <form className="ml-auto flex-1 sm:flex-initial">
-                  <div className="relative">
-                     <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-                     <Input
-                        type="search"
-                        placeholder="Search products..."
-                        className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
-                     />
-                  </div>
-               </form>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button variant="secondary" size="icon" className="rounded-full">
-                        <CircleUser className="size-5" />
-                        <span className="sr-only">Toggle user menu</span>
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Settings</DropdownMenuItem>
-                     <DropdownMenuItem>Support</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Logout</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </div>
-         </header>
-         <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
-            <div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-               <Card x-chunk="A card showing the total revenue in USD and the percentage difference from last month.">
-                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                     <CardTitle className="text-sm font-medium">
-                        Total Revenue
-                     </CardTitle>
-                     <DollarSign className="text-muted-foreground size-4" />
-                  </CardHeader>
-                  <CardContent>
-                     <div className="text-2xl font-bold">$45,231.89</div>
-                     <p className="text-muted-foreground text-xs">
-                        +20.1% from last month
-                     </p>
-                  </CardContent>
-               </Card>
-               <Card x-chunk="A card showing the total subscriptions and the percentage difference from last month.">
-                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                     <CardTitle className="text-sm font-medium">
-                        Subscriptions
-                     </CardTitle>
-                     <Users className="text-muted-foreground size-4" />
-                  </CardHeader>
-                  <CardContent>
-                     <div className="text-2xl font-bold">+2350</div>
-                     <p className="text-muted-foreground text-xs">
-                        +180.1% from last month
-                     </p>
-                  </CardContent>
-               </Card>
-               <Card x-chunk="A card showing the total sales and the percentage difference from last month.">
-                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                     <CardTitle className="text-sm font-medium">Sales</CardTitle>
-                     <CreditCard className="text-muted-foreground size-4" />
-                  </CardHeader>
-                  <CardContent>
-                     <div className="text-2xl font-bold">+12,234</div>
-                     <p className="text-muted-foreground text-xs">
-                        +19% from last month
-                     </p>
-                  </CardContent>
-               </Card>
-               <Card x-chunk="A card showing the total active users and the percentage difference from last hour.">
-                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                     <CardTitle className="text-sm font-medium">Active Now</CardTitle>
-                     <Activity className="text-muted-foreground size-4" />
-                  </CardHeader>
-                  <CardContent>
-                     <div className="text-2xl font-bold">+573</div>
-                     <p className="text-muted-foreground text-xs">
-                        +201 since last hour
-                     </p>
-                  </CardContent>
-               </Card>
-            </div>
-            <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-               <Card
-                  className="xl:col-span-2"
-                  x-chunk="A card showing a table of recent transactions with a link to view all transactions."
-               >
-                  <CardHeader className="flex flex-row items-center">
-                     <div className="grid gap-2">
-                        <CardTitle>Transactions</CardTitle>
-                        <CardDescription>
-                           Recent transactions from your store.
-                        </CardDescription>
-                     </div>
-                     <Button asChild size="sm" className="ml-auto gap-1">
-                        <Link href="#">
-                           View All
-                           <ArrowUpRight className="size-4" />
-                        </Link>
-                     </Button>
-                  </CardHeader>
-                  <CardContent>
-                     <Table>
-                        <TableHeader>
-                           <TableRow>
-                              <TableHead>Customer</TableHead>
-                              <TableHead className="hidden xl:table-column">
-                                 Type
-                              </TableHead>
-                              <TableHead className="hidden xl:table-column">
-                                 Status
-                              </TableHead>
-                              <TableHead className="hidden xl:table-column">
-                                 Date
-                              </TableHead>
-                              <TableHead className="text-right">Amount</TableHead>
-                           </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                           <TableRow>
-                              <TableCell>
-                                 <div className="font-medium">Liam Johnson</div>
-                                 <div className="text-muted-foreground hidden text-sm md:inline">
-                                    liam@example.com
-                                 </div>
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 Sale
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 <Badge className="text-xs" variant="outline">
-                                    Approved
-                                 </Badge>
-                              </TableCell>
-                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                                 2023-06-23
-                              </TableCell>
-                              <TableCell className="text-right">$250.00</TableCell>
-                           </TableRow>
-                           <TableRow>
-                              <TableCell>
-                                 <div className="font-medium">Olivia Smith</div>
-                                 <div className="text-muted-foreground hidden text-sm md:inline">
-                                    olivia@example.com
-                                 </div>
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 Refund
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 <Badge className="text-xs" variant="outline">
-                                    Declined
-                                 </Badge>
-                              </TableCell>
-                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                                 2023-06-24
-                              </TableCell>
-                              <TableCell className="text-right">$150.00</TableCell>
-                           </TableRow>
-                           <TableRow>
-                              <TableCell>
-                                 <div className="font-medium">Noah Williams</div>
-                                 <div className="text-muted-foreground hidden text-sm md:inline">
-                                    noah@example.com
-                                 </div>
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 Subscription
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 <Badge className="text-xs" variant="outline">
-                                    Approved
-                                 </Badge>
-                              </TableCell>
-                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                                 2023-06-25
-                              </TableCell>
-                              <TableCell className="text-right">$350.00</TableCell>
-                           </TableRow>
-                           <TableRow>
-                              <TableCell>
-                                 <div className="font-medium">Emma Brown</div>
-                                 <div className="text-muted-foreground hidden text-sm md:inline">
-                                    emma@example.com
-                                 </div>
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 Sale
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 <Badge className="text-xs" variant="outline">
-                                    Approved
-                                 </Badge>
-                              </TableCell>
-                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                                 2023-06-26
-                              </TableCell>
-                              <TableCell className="text-right">$450.00</TableCell>
-                           </TableRow>
-                           <TableRow>
-                              <TableCell>
-                                 <div className="font-medium">Liam Johnson</div>
-                                 <div className="text-muted-foreground hidden text-sm md:inline">
-                                    liam@example.com
-                                 </div>
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 Sale
-                              </TableCell>
-                              <TableCell className="hidden xl:table-column">
-                                 <Badge className="text-xs" variant="outline">
-                                    Approved
-                                 </Badge>
-                              </TableCell>
-                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                                 2023-06-27
-                              </TableCell>
-                              <TableCell className="text-right">$550.00</TableCell>
-                           </TableRow>
-                        </TableBody>
-                     </Table>
-                  </CardContent>
-               </Card>
-               <Card x-chunk="A card showing a list of recent sales with customer names and email addresses.">
-                  <CardHeader>
-                     <CardTitle>Recent Sales</CardTitle>
-                  </CardHeader>
-                  <CardContent className="grid gap-8">
-                     <div className="flex items-center gap-4">
-                        <Avatar className="hidden size-9 sm:flex">
-                           <AvatarImage src="/avatars/01.png" alt="Avatar" />
-                           <AvatarFallback>OM</AvatarFallback>
-                        </Avatar>
-                        <div className="grid gap-1">
-                           <p className="text-sm font-medium leading-none">
-                              Olivia Martin
-                           </p>
-                           <p className="text-muted-foreground text-sm">
-                              olivia.martin@email.com
-                           </p>
-                        </div>
-                        <div className="ml-auto font-medium">+$1,999.00</div>
-                     </div>
-                     <div className="flex items-center gap-4">
-                        <Avatar className="hidden size-9 sm:flex">
-                           <AvatarImage src="/avatars/02.png" alt="Avatar" />
-                           <AvatarFallback>JL</AvatarFallback>
-                        </Avatar>
-                        <div className="grid gap-1">
-                           <p className="text-sm font-medium leading-none">
-                              Jackson Lee
-                           </p>
-                           <p className="text-muted-foreground text-sm">
-                              jackson.lee@email.com
-                           </p>
-                        </div>
-                        <div className="ml-auto font-medium">+$39.00</div>
-                     </div>
-                     <div className="flex items-center gap-4">
-                        <Avatar className="hidden size-9 sm:flex">
-                           <AvatarImage src="/avatars/03.png" alt="Avatar" />
-                           <AvatarFallback>IN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid gap-1">
-                           <p className="text-sm font-medium leading-none">
-                              Isabella Nguyen
-                           </p>
-                           <p className="text-muted-foreground text-sm">
-                              isabella.nguyen@email.com
-                           </p>
-                        </div>
-                        <div className="ml-auto font-medium">+$299.00</div>
-                     </div>
-                     <div className="flex items-center gap-4">
-                        <Avatar className="hidden size-9 sm:flex">
-                           <AvatarImage src="/avatars/04.png" alt="Avatar" />
-                           <AvatarFallback>WK</AvatarFallback>
-                        </Avatar>
-                        <div className="grid gap-1">
-                           <p className="text-sm font-medium leading-none">
-                              William Kim
-                           </p>
-                           <p className="text-muted-foreground text-sm">
-                              will@email.com
-                           </p>
-                        </div>
-                        <div className="ml-auto font-medium">+$99.00</div>
-                     </div>
-                     <div className="flex items-center gap-4">
-                        <Avatar className="hidden size-9 sm:flex">
-                           <AvatarImage src="/avatars/05.png" alt="Avatar" />
-                           <AvatarFallback>SD</AvatarFallback>
-                        </Avatar>
-                        <div className="grid gap-1">
-                           <p className="text-sm font-medium leading-none">
-                              Sofia Davis
-                           </p>
-                           <p className="text-muted-foreground text-sm">
-                              sofia.davis@email.com
-                           </p>
-                        </div>
-                        <div className="ml-auto font-medium">+$39.00</div>
-                     </div>
-                  </CardContent>
-               </Card>
-            </div>
-         </main>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-02-chunk-0.tsx b/apps/web/registry/miami/block/dashboard-02-chunk-0.tsx
deleted file mode 100644
index 1beaba03..00000000
--- a/apps/web/registry/miami/block/dashboard-02-chunk-0.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-02-chunk-0">
-         <CardHeader className="p-2 pt-0 md:p-4">
-            <CardTitle>Upgrade to Pro</CardTitle>
-            <CardDescription>
-               Unlock all features and get unlimited access to our support team.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
-            <Button size="sm" className="w-full">
-               Upgrade
-            </Button>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-02-chunk-1.tsx b/apps/web/registry/miami/block/dashboard-02-chunk-1.tsx
deleted file mode 100644
index b3e3e85c..00000000
--- a/apps/web/registry/miami/block/dashboard-02-chunk-1.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-
-export default function Component() {
-   return (
-      <div
-         className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-         x-chunk="dashboard-02-chunk-1"
-      >
-         <div className="flex flex-col items-center gap-1 text-center">
-            <h3 className="text-2xl font-bold tracking-tight">
-               You have no products
-            </h3>
-            <p className="text-muted-foreground text-sm">
-               You can start selling as soon as you add a product.
-            </p>
-            <Button className="mt-4">Add Product</Button>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-02.tsx b/apps/web/registry/miami/block/dashboard-02.tsx
deleted file mode 100644
index 5b97d864..00000000
--- a/apps/web/registry/miami/block/dashboard-02.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-import Link from 'next/link'
-import {
-   Bell,
-   CircleUser,
-   Home,
-   LineChart,
-   Menu,
-   Package,
-   Package2,
-   Search,
-   ShoppingCart,
-   Users,
-} from 'lucide-react'
-
-import { Badge } from '~/registry/miami/ui/badge'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/miami/ui/sheet'
-
-export const description
-  = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'
-
-export const iframeHeight = '800px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-         <div className="bg-muted/40 hidden border-r md:block">
-            <div className="flex h-full max-h-screen flex-col gap-2">
-               <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
-                  <Link href="/" className="flex items-center gap-2 font-semibold">
-                     <Package2 className="size-6" />
-                     <span className="">Acme Inc</span>
-                  </Link>
-                  <Button variant="outline" size="icon" className="ml-auto size-8">
-                     <Bell className="size-4" />
-                     <span className="sr-only">Toggle notifications</span>
-                  </Button>
-               </div>
-               <div className="flex-1">
-                  <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
-                     >
-                        <Home className="size-4" />
-                        Dashboard
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
-                     >
-                        <ShoppingCart className="size-4" />
-                        Orders
-                        <Badge className="ml-auto flex size-6 shrink-0 items-center justify-center rounded-full">
-                           6
-                        </Badge>
-                     </Link>
-                     <Link
-                        href="#"
-                        className="bg-muted text-primary hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
-                     >
-                        <Package className="size-4" />
-                        Products
-                        {' '}
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
-                     >
-                        <Users className="size-4" />
-                        Customers
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
-                     >
-                        <LineChart className="size-4" />
-                        Analytics
-                     </Link>
-                  </nav>
-               </div>
-               <div className="mt-auto p-4">
-                  <Card x-chunk="A card with a call to action">
-                     <CardHeader className="p-2 pt-0 md:p-4">
-                        <CardTitle>Upgrade to Pro</CardTitle>
-                        <CardDescription>
-                           Unlock all features and get unlimited access to our support
-                           team.
-                        </CardDescription>
-                     </CardHeader>
-                     <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
-                        <Button size="sm" className="w-full">
-                           Upgrade
-                        </Button>
-                     </CardContent>
-                  </Card>
-               </div>
-            </div>
-         </div>
-         <div className="flex flex-col">
-            <header className="bg-muted/40 flex h-14 items-center gap-4 border-b px-4 lg:h-[60px] lg:px-6">
-               <Sheet>
-                  <SheetTrigger asChild>
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="shrink-0 md:hidden"
-                     >
-                        <Menu className="size-5" />
-                        <span className="sr-only">Toggle navigation menu</span>
-                     </Button>
-                  </SheetTrigger>
-                  <SheetContent side="left" className="flex flex-col">
-                     <nav className="grid gap-2 text-lg font-medium">
-                        <Link
-                           href="#"
-                           className="flex items-center gap-2 text-lg font-semibold"
-                        >
-                           <Package2 className="size-6" />
-                           <span className="sr-only">Acme Inc</span>
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
-                        >
-                           <Home className="size-5" />
-                           Dashboard
-                        </Link>
-                        <Link
-                           href="#"
-                           className="bg-muted text-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
-                        >
-                           <ShoppingCart className="size-5" />
-                           Orders
-                           <Badge className="ml-auto flex size-6 shrink-0 items-center justify-center rounded-full">
-                              6
-                           </Badge>
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
-                        >
-                           <Package className="size-5" />
-                           Products
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
-                        >
-                           <Users className="size-5" />
-                           Customers
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
-                        >
-                           <LineChart className="size-5" />
-                           Analytics
-                        </Link>
-                     </nav>
-                     <div className="mt-auto">
-                        <Card>
-                           <CardHeader>
-                              <CardTitle>Upgrade to Pro</CardTitle>
-                              <CardDescription>
-                                 Unlock all features and get unlimited access to our
-                                 support team.
-                              </CardDescription>
-                           </CardHeader>
-                           <CardContent>
-                              <Button size="sm" className="w-full">
-                                 Upgrade
-                              </Button>
-                           </CardContent>
-                        </Card>
-                     </div>
-                  </SheetContent>
-               </Sheet>
-               <div className="w-full flex-1">
-                  <form>
-                     <div className="relative">
-                        <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-                        <Input
-                           type="search"
-                           placeholder="Search products..."
-                           className="bg-background w-full appearance-none pl-8 shadow-none md:w-2/3 lg:w-1/3"
-                        />
-                     </div>
-                  </form>
-               </div>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button variant="secondary" size="icon" className="rounded-full">
-                        <CircleUser className="size-5" />
-                        <span className="sr-only">Toggle user menu</span>
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Settings</DropdownMenuItem>
-                     <DropdownMenuItem>Support</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Logout</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </header>
-            <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
-               <div className="flex items-center">
-                  <h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
-               </div>
-               <div
-                  x-chunk="An empty state showing no products with a heading, description and a call to action to add a product."
-                  className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-               >
-                  <div className="flex flex-col items-center gap-1 text-center">
-                     <h3 className="text-2xl font-bold tracking-tight">
-                        You have no products
-                     </h3>
-                     <p className="text-muted-foreground text-sm">
-                        You can start selling as soon as you add a product.
-                     </p>
-                     <Button className="mt-4">Add Product</Button>
-                  </div>
-               </div>
-            </main>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-03-chunk-0.tsx b/apps/web/registry/miami/block/dashboard-03-chunk-0.tsx
deleted file mode 100644
index 04aaa451..00000000
--- a/apps/web/registry/miami/block/dashboard-03-chunk-0.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-'use client'
-
-import { Bird, Rabbit, Turtle } from 'lucide-react'
-
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-import { Textarea } from '~/registry/miami/ui/textarea'
-
-export default function Component() {
-   return (
-      <div
-         className="relative hidden flex-col items-start gap-8 md:flex"
-         x-chunk="dashboard-03-chunk-0"
-      >
-         <form className="grid w-full items-start gap-6">
-            <fieldset className="grid gap-6 rounded-lg border p-4">
-               <legend className="-ml-1 px-1 text-sm font-medium">Settings</legend>
-               <div className="grid gap-3">
-                  <Label htmlFor="model">Model</Label>
-                  <Select>
-                     <SelectTrigger
-                        id="model"
-                        className="items-start [&_[data-description]]:hidden"
-                     >
-                        <SelectValue placeholder="Select a model" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="genesis">
-                           <div className="text-muted-foreground flex items-start gap-3">
-                              <Rabbit className="size-5" />
-                              <div className="grid gap-0.5">
-                                 <p>
-                                    Neural
-                                    {' '}
-                                    <span className="text-foreground font-medium">
-                                       Genesis
-                                    </span>
-                                 </p>
-                                 <p className="text-xs" data-description>
-                                    Our fastest model for general use cases.
-                                 </p>
-                              </div>
-                           </div>
-                        </SelectItem>
-                        <SelectItem value="explorer">
-                           <div className="text-muted-foreground flex items-start gap-3">
-                              <Bird className="size-5" />
-                              <div className="grid gap-0.5">
-                                 <p>
-                                    Neural
-                                    {' '}
-                                    <span className="text-foreground font-medium">
-                                       Explorer
-                                    </span>
-                                 </p>
-                                 <p className="text-xs" data-description>
-                                    Performance and speed for efficiency.
-                                 </p>
-                              </div>
-                           </div>
-                        </SelectItem>
-                        <SelectItem value="quantum">
-                           <div className="text-muted-foreground flex items-start gap-3">
-                              <Turtle className="size-5" />
-                              <div className="grid gap-0.5">
-                                 <p>
-                                    Neural
-                                    {' '}
-                                    <span className="text-foreground font-medium">
-                                       Quantum
-                                    </span>
-                                 </p>
-                                 <p className="text-xs" data-description>
-                                    The most powerful model for complex computations.
-                                 </p>
-                              </div>
-                           </div>
-                        </SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-               <div className="grid gap-3">
-                  <Label htmlFor="temperature">Temperature</Label>
-                  <Input id="temperature" type="number" placeholder="0.4" />
-               </div>
-               <div className="grid grid-cols-2 gap-4">
-                  <div className="grid gap-3">
-                     <Label htmlFor="top-p">Top P</Label>
-                     <Input id="top-p" type="number" placeholder="0.7" />
-                  </div>
-                  <div className="grid gap-3">
-                     <Label htmlFor="top-k">Top K</Label>
-                     <Input id="top-k" type="number" placeholder="0.0" />
-                  </div>
-               </div>
-            </fieldset>
-            <fieldset className="grid gap-6 rounded-lg border p-4">
-               <legend className="-ml-1 px-1 text-sm font-medium">Messages</legend>
-               <div className="grid gap-3">
-                  <Label htmlFor="role">Role</Label>
-                  <Select defaultValue="system">
-                     <SelectTrigger>
-                        <SelectValue placeholder="Select a role" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="system">System</SelectItem>
-                        <SelectItem value="user">User</SelectItem>
-                        <SelectItem value="assistant">Assistant</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-               <div className="grid gap-3">
-                  <Label htmlFor="content">Content</Label>
-                  <Textarea
-                     id="content"
-                     placeholder="You are a..."
-                     className="min-h-[9.5rem]"
-                  />
-               </div>
-            </fieldset>
-         </form>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-03-chunk-1.tsx b/apps/web/registry/miami/block/dashboard-03-chunk-1.tsx
deleted file mode 100644
index 6079b6f5..00000000
--- a/apps/web/registry/miami/block/dashboard-03-chunk-1.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client'
-
-import { CornerDownLeft, Mic, Paperclip } from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-import { Label } from '~/registry/miami/ui/label'
-import { Textarea } from '~/registry/miami/ui/textarea'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-
-export default function Component() {
-   return (
-      <form
-         className="bg-background focus-within:ring-ring relative overflow-hidden rounded-lg border focus-within:ring-1"
-         x-chunk="dashboard-03-chunk-1"
-      >
-         <Label htmlFor="message" className="sr-only">
-            Message
-         </Label>
-         <Textarea
-            id="message"
-            placeholder="Type your message here..."
-            className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
-         />
-         <div className="flex items-center p-3 pt-0">
-            <Tooltip>
-               <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon">
-                     <Paperclip className="size-4" />
-                     <span className="sr-only">Attach file</span>
-                  </Button>
-               </TooltipTrigger>
-               <TooltipContent side="top">Attach File</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-               <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon">
-                     <Mic className="size-4" />
-                     <span className="sr-only">Use Microphone</span>
-                  </Button>
-               </TooltipTrigger>
-               <TooltipContent side="top">Use Microphone</TooltipContent>
-            </Tooltip>
-            <Button type="submit" size="sm" className="ml-auto gap-1.5">
-               Send Message
-               <CornerDownLeft className="size-3.5" />
-            </Button>
-         </div>
-      </form>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-03.tsx b/apps/web/registry/miami/block/dashboard-03.tsx
deleted file mode 100644
index c8a65587..00000000
--- a/apps/web/registry/miami/block/dashboard-03.tsx
+++ /dev/null
@@ -1,470 +0,0 @@
-import {
-   Bird,
-   Book,
-   Bot,
-   Code2,
-   CornerDownLeft,
-   LifeBuoy,
-   Mic,
-   Paperclip,
-   Rabbit,
-   Settings,
-   Settings2,
-   Share,
-   SquareTerminal,
-   SquareUser,
-   Triangle,
-   Turtle,
-} from 'lucide-react'
-
-import { Badge } from '~/registry/miami/ui/badge'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Drawer,
-   DrawerContent,
-   DrawerDescription,
-   DrawerHeader,
-   DrawerTitle,
-   DrawerTrigger,
-} from '~/registry/miami/ui/drawer'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-import { Textarea } from '~/registry/miami/ui/textarea'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-
-export const description
-  = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'
-
-export const iframeHeight = '720px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="grid h-screen w-full pl-[53px]">
-         <aside className="inset-y fixed  left-0 z-20 flex h-full flex-col border-r">
-            <div className="border-b p-2">
-               <Button variant="outline" size="icon" aria-label="Home">
-                  <Triangle className="fill-foreground size-5" />
-               </Button>
-            </div>
-            <nav className="grid gap-1 p-2">
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="bg-muted rounded-lg"
-                        aria-label="Playground"
-                     >
-                        <SquareTerminal className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     Playground
-                  </TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="rounded-lg"
-                        aria-label="Models"
-                     >
-                        <Bot className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     Models
-                  </TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="rounded-lg"
-                        aria-label="API"
-                     >
-                        <Code2 className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     API
-                  </TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="rounded-lg"
-                        aria-label="Documentation"
-                     >
-                        <Book className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     Documentation
-                  </TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="rounded-lg"
-                        aria-label="Settings"
-                     >
-                        <Settings2 className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     Settings
-                  </TooltipContent>
-               </Tooltip>
-            </nav>
-            <nav className="mt-auto grid gap-1 p-2">
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="mt-auto rounded-lg"
-                        aria-label="Help"
-                     >
-                        <LifeBuoy className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     Help
-                  </TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Button
-                        variant="ghost"
-                        size="icon"
-                        className="mt-auto rounded-lg"
-                        aria-label="Account"
-                     >
-                        <SquareUser className="size-5" />
-                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={5}>
-                     Account
-                  </TooltipContent>
-               </Tooltip>
-            </nav>
-         </aside>
-         <div className="flex flex-col">
-            <header className="bg-background sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b px-4">
-               <h1 className="text-xl font-semibold">Playground</h1>
-               <Drawer>
-                  <DrawerTrigger asChild>
-                     <Button variant="ghost" size="icon" className="md:hidden">
-                        <Settings className="size-4" />
-                        <span className="sr-only">Settings</span>
-                     </Button>
-                  </DrawerTrigger>
-                  <DrawerContent className="max-h-[80vh]">
-                     <DrawerHeader>
-                        <DrawerTitle>Configuration</DrawerTitle>
-                        <DrawerDescription>
-                           Configure the settings for the model and messages.
-                        </DrawerDescription>
-                     </DrawerHeader>
-                     <form className="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
-                        <fieldset className="grid gap-6 rounded-lg border p-4">
-                           <legend className="-ml-1 px-1 text-sm font-medium">
-                              Settings
-                           </legend>
-                           <div className="grid gap-3">
-                              <Label htmlFor="model">Model</Label>
-                              <Select>
-                                 <SelectTrigger
-                                    id="model"
-                                    className="items-start [&_[data-description]]:hidden"
-                                 >
-                                    <SelectValue placeholder="Select a model" />
-                                 </SelectTrigger>
-                                 <SelectContent>
-                                    <SelectItem value="genesis">
-                                       <div className="text-muted-foreground flex items-start gap-3">
-                                          <Rabbit className="size-5" />
-                                          <div className="grid gap-0.5">
-                                             <p>
-                                                Neural
-                                                {' '}
-                                                <span className="text-foreground font-medium">
-                                                   Genesis
-                                                </span>
-                                             </p>
-                                             <p className="text-xs" data-description>
-                                                Our fastest model for general use cases.
-                                             </p>
-                                          </div>
-                                       </div>
-                                    </SelectItem>
-                                    <SelectItem value="explorer">
-                                       <div className="text-muted-foreground flex items-start gap-3">
-                                          <Bird className="size-5" />
-                                          <div className="grid gap-0.5">
-                                             <p>
-                                                Neural
-                                                {' '}
-                                                <span className="text-foreground font-medium">
-                                                   Explorer
-                                                </span>
-                                             </p>
-                                             <p className="text-xs" data-description>
-                                                Performance and speed for efficiency.
-                                             </p>
-                                          </div>
-                                       </div>
-                                    </SelectItem>
-                                    <SelectItem value="quantum">
-                                       <div className="text-muted-foreground flex items-start gap-3">
-                                          <Turtle className="size-5" />
-                                          <div className="grid gap-0.5">
-                                             <p>
-                                                Neural
-                                                {' '}
-                                                <span className="text-foreground font-medium">
-                                                   Quantum
-                                                </span>
-                                             </p>
-                                             <p className="text-xs" data-description>
-                                                The most powerful model for complex
-                                                computations.
-                                             </p>
-                                          </div>
-                                       </div>
-                                    </SelectItem>
-                                 </SelectContent>
-                              </Select>
-                           </div>
-                           <div className="grid gap-3">
-                              <Label htmlFor="temperature">Temperature</Label>
-                              <Input id="temperature" type="number" placeholder="0.4" />
-                           </div>
-                           <div className="grid gap-3">
-                              <Label htmlFor="top-p">Top P</Label>
-                              <Input id="top-p" type="number" placeholder="0.7" />
-                           </div>
-                           <div className="grid gap-3">
-                              <Label htmlFor="top-k">Top K</Label>
-                              <Input id="top-k" type="number" placeholder="0.0" />
-                           </div>
-                        </fieldset>
-                        <fieldset className="grid gap-6 rounded-lg border p-4">
-                           <legend className="-ml-1 px-1 text-sm font-medium">
-                              Messages
-                           </legend>
-                           <div className="grid gap-3">
-                              <Label htmlFor="role">Role</Label>
-                              <Select defaultValue="system">
-                                 <SelectTrigger>
-                                    <SelectValue placeholder="Select a role" />
-                                 </SelectTrigger>
-                                 <SelectContent>
-                                    <SelectItem value="system">System</SelectItem>
-                                    <SelectItem value="user">User</SelectItem>
-                                    <SelectItem value="assistant">Assistant</SelectItem>
-                                 </SelectContent>
-                              </Select>
-                           </div>
-                           <div className="grid gap-3">
-                              <Label htmlFor="content">Content</Label>
-                              <Textarea id="content" placeholder="You are a..." />
-                           </div>
-                        </fieldset>
-                     </form>
-                  </DrawerContent>
-               </Drawer>
-               <Button
-                  variant="outline"
-                  size="sm"
-                  className="ml-auto gap-1.5 text-sm"
-               >
-                  <Share className="size-3.5" />
-                  Share
-               </Button>
-            </header>
-            <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
-               <div
-                  className="relative hidden flex-col items-start gap-8 md:flex"
-                  x-chunk="A settings form a configuring an AI model and messages."
-               >
-                  <form className="grid w-full items-start gap-6">
-                     <fieldset className="grid gap-6 rounded-lg border p-4">
-                        <legend className="-ml-1 px-1 text-sm font-medium">
-                           Settings
-                        </legend>
-                        <div className="grid gap-3">
-                           <Label htmlFor="model">Model</Label>
-                           <Select>
-                              <SelectTrigger
-                                 id="model"
-                                 className="items-start [&_[data-description]]:hidden"
-                              >
-                                 <SelectValue placeholder="Select a model" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                 <SelectItem value="genesis">
-                                    <div className="text-muted-foreground flex items-start gap-3">
-                                       <Rabbit className="size-5" />
-                                       <div className="grid gap-0.5">
-                                          <p>
-                                             Neural
-                                             {' '}
-                                             <span className="text-foreground font-medium">
-                                                Genesis
-                                             </span>
-                                          </p>
-                                          <p className="text-xs" data-description>
-                                             Our fastest model for general use cases.
-                                          </p>
-                                       </div>
-                                    </div>
-                                 </SelectItem>
-                                 <SelectItem value="explorer">
-                                    <div className="text-muted-foreground flex items-start gap-3">
-                                       <Bird className="size-5" />
-                                       <div className="grid gap-0.5">
-                                          <p>
-                                             Neural
-                                             {' '}
-                                             <span className="text-foreground font-medium">
-                                                Explorer
-                                             </span>
-                                          </p>
-                                          <p className="text-xs" data-description>
-                                             Performance and speed for efficiency.
-                                          </p>
-                                       </div>
-                                    </div>
-                                 </SelectItem>
-                                 <SelectItem value="quantum">
-                                    <div className="text-muted-foreground flex items-start gap-3">
-                                       <Turtle className="size-5" />
-                                       <div className="grid gap-0.5">
-                                          <p>
-                                             Neural
-                                             {' '}
-                                             <span className="text-foreground font-medium">
-                                                Quantum
-                                             </span>
-                                          </p>
-                                          <p className="text-xs" data-description>
-                                             The most powerful model for complex computations.
-                                          </p>
-                                       </div>
-                                    </div>
-                                 </SelectItem>
-                              </SelectContent>
-                           </Select>
-                        </div>
-                        <div className="grid gap-3">
-                           <Label htmlFor="temperature">Temperature</Label>
-                           <Input id="temperature" type="number" placeholder="0.4" />
-                        </div>
-                        <div className="grid grid-cols-2 gap-4">
-                           <div className="grid gap-3">
-                              <Label htmlFor="top-p">Top P</Label>
-                              <Input id="top-p" type="number" placeholder="0.7" />
-                           </div>
-                           <div className="grid gap-3">
-                              <Label htmlFor="top-k">Top K</Label>
-                              <Input id="top-k" type="number" placeholder="0.0" />
-                           </div>
-                        </div>
-                     </fieldset>
-                     <fieldset className="grid gap-6 rounded-lg border p-4">
-                        <legend className="-ml-1 px-1 text-sm font-medium">
-                           Messages
-                        </legend>
-                        <div className="grid gap-3">
-                           <Label htmlFor="role">Role</Label>
-                           <Select defaultValue="system">
-                              <SelectTrigger>
-                                 <SelectValue placeholder="Select a role" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                 <SelectItem value="system">System</SelectItem>
-                                 <SelectItem value="user">User</SelectItem>
-                                 <SelectItem value="assistant">Assistant</SelectItem>
-                              </SelectContent>
-                           </Select>
-                        </div>
-                        <div className="grid gap-3">
-                           <Label htmlFor="content">Content</Label>
-                           <Textarea
-                              id="content"
-                              placeholder="You are a..."
-                              className="min-h-[9.5rem]"
-                           />
-                        </div>
-                     </fieldset>
-                  </form>
-               </div>
-               <div className="bg-muted/50 relative flex h-full min-h-[50vh] flex-col rounded-xl p-4 lg:col-span-2">
-                  <Badge variant="outline" className="absolute right-3 top-3">
-                     Output
-                  </Badge>
-                  <div className="flex-1" />
-                  <form
-                     className="bg-background focus-within:ring-ring relative overflow-hidden rounded-lg border focus-within:ring-1"
-                     x-chunk="A form for sending a message to an AI chatbot. The form has a textarea and buttons to upload files and record audio."
-                  >
-                     <Label htmlFor="message" className="sr-only">
-                        Message
-                     </Label>
-                     <Textarea
-                        id="message"
-                        placeholder="Type your message here..."
-                        className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
-                     />
-                     <div className="flex items-center p-3 pt-0">
-                        <Tooltip>
-                           <TooltipTrigger asChild>
-                              <Button variant="ghost" size="icon">
-                                 <Paperclip className="size-4" />
-                                 <span className="sr-only">Attach file</span>
-                              </Button>
-                           </TooltipTrigger>
-                           <TooltipContent side="top">Attach File</TooltipContent>
-                        </Tooltip>
-                        <Tooltip>
-                           <TooltipTrigger asChild>
-                              <Button variant="ghost" size="icon">
-                                 <Mic className="size-4" />
-                                 <span className="sr-only">Use Microphone</span>
-                              </Button>
-                           </TooltipTrigger>
-                           <TooltipContent side="top">Use Microphone</TooltipContent>
-                        </Tooltip>
-                        <Button type="submit" size="sm" className="ml-auto gap-1.5">
-                           Send Message
-                           <CornerDownLeft className="size-3.5" />
-                        </Button>
-                     </div>
-                  </form>
-               </div>
-            </main>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-04-chunk-0.tsx b/apps/web/registry/miami/block/dashboard-04-chunk-0.tsx
deleted file mode 100644
index 3ca1c210..00000000
--- a/apps/web/registry/miami/block/dashboard-04-chunk-0.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-
-export default function Component() {
-   return (
-      <nav
-         className="text-muted-foreground grid gap-4 text-sm"
-         x-chunk="dashboard-04-chunk-0"
-      >
-         <Link href="#" className="text-primary font-semibold">
-            General
-         </Link>
-         <Link href="#">Security</Link>
-         <Link href="#">Integrations</Link>
-         <Link href="#">Support</Link>
-         <Link href="#">Organizations</Link>
-         <Link href="#">Advanced</Link>
-      </nav>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-04-chunk-1.tsx b/apps/web/registry/miami/block/dashboard-04-chunk-1.tsx
deleted file mode 100644
index 51241c47..00000000
--- a/apps/web/registry/miami/block/dashboard-04-chunk-1.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-04-chunk-1">
-         <CardHeader>
-            <CardTitle>Store Name</CardTitle>
-            <CardDescription>
-               Used to identify your store in the marketplace.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <form>
-               <Input placeholder="Store Name" />
-            </form>
-         </CardContent>
-         <CardFooter className="border-t px-6 py-4">
-            <Button>Save</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-04-chunk-2.tsx b/apps/web/registry/miami/block/dashboard-04-chunk-2.tsx
deleted file mode 100644
index 9b4ff5ea..00000000
--- a/apps/web/registry/miami/block/dashboard-04-chunk-2.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-import { Input } from '~/registry/miami/ui/input'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-04-chunk-2">
-         <CardHeader>
-            <CardTitle>Plugins Directory</CardTitle>
-            <CardDescription>
-               The directory within your project, in which your plugins are located.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <form className="flex flex-col gap-4">
-               <Input placeholder="Project Name" defaultValue="/content/plugins" />
-               <div className="flex items-center space-x-2">
-                  <Checkbox id="include" defaultChecked />
-                  <label
-                     htmlFor="include"
-                     className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  >
-                     Allow administrators to change the directory.
-                  </label>
-               </div>
-            </form>
-         </CardContent>
-         <CardFooter className="border-t px-6 py-4">
-            <Button>Save</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-04.tsx b/apps/web/registry/miami/block/dashboard-04.tsx
deleted file mode 100644
index df4fc835..00000000
--- a/apps/web/registry/miami/block/dashboard-04.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import Link from 'next/link'
-import { CircleUser, Menu, Package2, Search } from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/miami/ui/sheet'
-
-export const description
-  = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'
-
-export const iframeHeight = '780px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="flex min-h-screen w-full flex-col">
-         <header className="bg-background sticky top-0 flex h-16 items-center gap-4 border-b px-4 md:px-6">
-            <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-               <Link
-                  href="#"
-                  className="flex items-center gap-2 text-lg font-semibold md:text-base"
-               >
-                  <Package2 className="size-6" />
-                  <span className="sr-only">Acme Inc</span>
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Dashboard
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Orders
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Products
-               </Link>
-               <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-               >
-                  Customers
-               </Link>
-               <Link
-                  href="#"
-                  className="text-foreground hover:text-foreground transition-colors"
-               >
-                  Settings
-               </Link>
-            </nav>
-            <Sheet>
-               <SheetTrigger asChild>
-                  <Button
-                     variant="outline"
-                     size="icon"
-                     className="shrink-0 md:hidden"
-                  >
-                     <Menu className="size-5" />
-                     <span className="sr-only">Toggle navigation menu</span>
-                  </Button>
-               </SheetTrigger>
-               <SheetContent side="left">
-                  <nav className="grid gap-6 text-lg font-medium">
-                     <Link
-                        href="#"
-                        className="flex items-center gap-2 text-lg font-semibold"
-                     >
-                        <Package2 className="size-6" />
-                        <span className="sr-only">Acme Inc</span>
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Dashboard
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Orders
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Products
-                     </Link>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground"
-                     >
-                        Customers
-                     </Link>
-                     <Link href="#" className="hover:text-foreground">
-                        Settings
-                     </Link>
-                  </nav>
-               </SheetContent>
-            </Sheet>
-            <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
-               <form className="ml-auto flex-1 sm:flex-initial">
-                  <div className="relative">
-                     <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-                     <Input
-                        type="search"
-                        placeholder="Search products..."
-                        className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
-                     />
-                  </div>
-               </form>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button variant="secondary" size="icon" className="rounded-full">
-                        <CircleUser className="size-5" />
-                        <span className="sr-only">Toggle user menu</span>
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Settings</DropdownMenuItem>
-                     <DropdownMenuItem>Support</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Logout</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </div>
-         </header>
-         <main className="bg-muted/40 flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 p-4 md:gap-8 md:p-10">
-            <div className="mx-auto grid w-full max-w-6xl gap-2">
-               <h1 className="text-3xl font-semibold">Settings</h1>
-            </div>
-            <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
-               <nav
-                  className="text-muted-foreground grid gap-4 text-sm"
-                  x-chunk="A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings."
-                  x-chunk-container="chunk-container after:right-0"
-               >
-                  <Link href="#" className="text-primary font-semibold">
-                     General
-                  </Link>
-                  <Link href="#">Security</Link>
-                  <Link href="#">Integrations</Link>
-                  <Link href="#">Support</Link>
-                  <Link href="#">Organizations</Link>
-                  <Link href="#">Advanced</Link>
-               </nav>
-               <div className="grid gap-6">
-                  <Card x-chunk="A form to update the store name.">
-                     <CardHeader>
-                        <CardTitle>Store Name</CardTitle>
-                        <CardDescription>
-                           Used to identify your store in the marketplace.
-                        </CardDescription>
-                     </CardHeader>
-                     <CardContent>
-                        <form>
-                           <Input placeholder="Store Name" />
-                        </form>
-                     </CardContent>
-                     <CardFooter className="border-t px-6 py-4">
-                        <Button>Save</Button>
-                     </CardFooter>
-                  </Card>
-                  <Card x-chunk="A form to update the plugins directory with a checkbox to allow administrators to change the directory.">
-                     <CardHeader>
-                        <CardTitle>Plugins Directory</CardTitle>
-                        <CardDescription>
-                           The directory within your project, in which your plugins are
-                           located.
-                        </CardDescription>
-                     </CardHeader>
-                     <CardContent>
-                        <form className="flex flex-col gap-4">
-                           <Input
-                              placeholder="Project Name"
-                              defaultValue="/content/plugins"
-                           />
-                           <div className="flex items-center space-x-2">
-                              <Checkbox id="include" defaultChecked />
-                              <label
-                                 htmlFor="include"
-                                 className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                              >
-                                 Allow administrators to change the directory.
-                              </label>
-                           </div>
-                        </form>
-                     </CardContent>
-                     <CardFooter className="border-t px-6 py-4">
-                        <Button>Save</Button>
-                     </CardFooter>
-                  </Card>
-               </div>
-            </div>
-         </main>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-05-chunk-0.tsx b/apps/web/registry/miami/block/dashboard-05-chunk-0.tsx
deleted file mode 100644
index 84ec28a5..00000000
--- a/apps/web/registry/miami/block/dashboard-05-chunk-0.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-
-export default function Component() {
-   return (
-      <Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
-         <CardHeader className="pb-3">
-            <CardTitle>Your Orders</CardTitle>
-            <CardDescription className="max-w-lg text-balance leading-relaxed">
-               Introducing Our Dynamic Orders Dashboard for Seamless Management and
-               Insightful Analysis.
-            </CardDescription>
-         </CardHeader>
-         <CardFooter>
-            <Button>Create New Order</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-05-chunk-1.tsx b/apps/web/registry/miami/block/dashboard-05-chunk-1.tsx
deleted file mode 100644
index 514d862e..00000000
--- a/apps/web/registry/miami/block/dashboard-05-chunk-1.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Progress } from '~/registry/miami/ui/progress'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-05-chunk-1">
-         <CardHeader className="pb-2">
-            <CardDescription>This Week</CardDescription>
-            <CardTitle className="text-4xl">$1,329</CardTitle>
-         </CardHeader>
-         <CardContent>
-            <div className="text-muted-foreground text-xs">+25% from last week</div>
-         </CardContent>
-         <CardFooter>
-            <Progress value={25} aria-label="25% increase" />
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-05-chunk-2.tsx b/apps/web/registry/miami/block/dashboard-05-chunk-2.tsx
deleted file mode 100644
index e6b563a4..00000000
--- a/apps/web/registry/miami/block/dashboard-05-chunk-2.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Progress } from '~/registry/miami/ui/progress'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-05-chunk-2">
-         <CardHeader className="pb-2">
-            <CardDescription>This Month</CardDescription>
-            <CardTitle className="text-4xl">$5,329</CardTitle>
-         </CardHeader>
-         <CardContent>
-            <div className="text-muted-foreground text-xs">
-               +10% from last month
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Progress value={12} aria-label="12% increase" />
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-05-chunk-3.tsx b/apps/web/registry/miami/block/dashboard-05-chunk-3.tsx
deleted file mode 100644
index 52d25e6e..00000000
--- a/apps/web/registry/miami/block/dashboard-05-chunk-3.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-'use client'
-
-import { Badge } from '~/registry/miami/ui/badge'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-05-chunk-3">
-         <CardHeader className="px-7">
-            <CardTitle>Orders</CardTitle>
-            <CardDescription>Recent orders from your store.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <Table>
-               <TableHeader>
-                  <TableRow>
-                     <TableHead>Customer</TableHead>
-                     <TableHead className="hidden sm:table-cell">Type</TableHead>
-                     <TableHead className="hidden sm:table-cell">Status</TableHead>
-                     <TableHead className="hidden md:table-cell">Date</TableHead>
-                     <TableHead className="text-right">Amount</TableHead>
-                  </TableRow>
-               </TableHeader>
-               <TableBody>
-                  <TableRow className="bg-accent">
-                     <TableCell>
-                        <div className="font-medium">Liam Johnson</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           liam@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="secondary">
-                           Fulfilled
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-                     <TableCell className="text-right">$250.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Olivia Smith</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           olivia@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Refund</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="outline">
-                           Declined
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-24</TableCell>
-                     <TableCell className="text-right">$150.00</TableCell>
-                  </TableRow>
-                  {/* <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Liam Johnson</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              liam@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-23
-                          </TableCell>
-                          <TableCell className="text-right">$250.00</TableCell>
-                        </TableRow> */}
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Noah Williams</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           noah@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        Subscription
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="secondary">
-                           Fulfilled
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-25</TableCell>
-                     <TableCell className="text-right">$350.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Emma Brown</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           emma@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="secondary">
-                           Fulfilled
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-26</TableCell>
-                     <TableCell className="text-right">$450.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Liam Johnson</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           liam@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="secondary">
-                           Fulfilled
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-                     <TableCell className="text-right">$250.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Olivia Smith</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           olivia@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Refund</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="outline">
-                           Declined
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-24</TableCell>
-                     <TableCell className="text-right">$150.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell>
-                        <div className="font-medium">Emma Brown</div>
-                        <div className="text-muted-foreground hidden text-sm md:inline">
-                           emma@example.com
-                        </div>
-                     </TableCell>
-                     <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                     <TableCell className="hidden sm:table-cell">
-                        <Badge className="text-xs" variant="secondary">
-                           Fulfilled
-                        </Badge>
-                     </TableCell>
-                     <TableCell className="hidden md:table-cell">2023-06-26</TableCell>
-                     <TableCell className="text-right">$450.00</TableCell>
-                  </TableRow>
-               </TableBody>
-            </Table>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-05-chunk-4.tsx b/apps/web/registry/miami/block/dashboard-05-chunk-4.tsx
deleted file mode 100644
index 2cda8996..00000000
--- a/apps/web/registry/miami/block/dashboard-05-chunk-4.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-'use client'
-
-import {
-   ChevronLeft,
-   ChevronRight,
-   Copy,
-   CreditCard,
-   MoreVertical,
-   Truck,
-} from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   Pagination,
-   PaginationContent,
-   PaginationItem,
-} from '~/registry/miami/ui/pagination'
-import { Separator } from '~/registry/miami/ui/separator'
-
-export default function Component() {
-   return (
-      <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
-         <CardHeader className="bg-muted/50 flex flex-row items-start">
-            <div className="grid gap-0.5">
-               <CardTitle className="group flex items-center gap-2 text-lg">
-                  Order Oe31b70H
-                  <Button
-                     size="icon"
-                     variant="outline"
-                     className="size-6 opacity-0 transition-opacity group-hover:opacity-100"
-                  >
-                     <Copy className="size-3" />
-                     <span className="sr-only">Copy Order ID</span>
-                  </Button>
-               </CardTitle>
-               <CardDescription>Date: November 23, 2023</CardDescription>
-            </div>
-            <div className="ml-auto flex items-center gap-1">
-               <Button size="sm" variant="outline" className="h-8 gap-1">
-                  <Truck className="size-3.5" />
-                  <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-                     Track Order
-                  </span>
-               </Button>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button size="icon" variant="outline" className="size-8">
-                        <MoreVertical className="size-3.5" />
-                        <span className="sr-only">More</span>
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuItem>Edit</DropdownMenuItem>
-                     <DropdownMenuItem>Export</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Trash</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </div>
-         </CardHeader>
-         <CardContent className="p-6 text-sm">
-            <div className="grid gap-3">
-               <div className="font-semibold">Order Details</div>
-               <ul className="grid gap-3">
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">
-                        Glimmer Lamps x
-                        {' '}
-                        <span>2</span>
-                     </span>
-                     <span>$250.00</span>
-                  </li>
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">
-                        Aqua Filters x
-                        {' '}
-                        <span>1</span>
-                     </span>
-                     <span>$49.00</span>
-                  </li>
-               </ul>
-               <Separator className="my-2" />
-               <ul className="grid gap-3">
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">Subtotal</span>
-                     <span>$299.00</span>
-                  </li>
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">Shipping</span>
-                     <span>$5.00</span>
-                  </li>
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">Tax</span>
-                     <span>$25.00</span>
-                  </li>
-                  <li className="flex items-center justify-between font-semibold">
-                     <span className="text-muted-foreground">Total</span>
-                     <span>$329.00</span>
-                  </li>
-               </ul>
-            </div>
-            <Separator className="my-4" />
-            <div className="grid grid-cols-2 gap-4">
-               <div className="grid gap-3">
-                  <div className="font-semibold">Shipping Information</div>
-                  <address className="text-muted-foreground grid gap-0.5 not-italic">
-                     <span>Liam Johnson</span>
-                     <span>1234 Main St.</span>
-                     <span>Anytown, CA 12345</span>
-                  </address>
-               </div>
-               <div className="grid auto-rows-max gap-3">
-                  <div className="font-semibold">Billing Information</div>
-                  <div className="text-muted-foreground">
-                     Same as shipping address
-                  </div>
-               </div>
-            </div>
-            <Separator className="my-4" />
-            <div className="grid gap-3">
-               <div className="font-semibold">Customer Information</div>
-               <dl className="grid gap-3">
-                  <div className="flex items-center justify-between">
-                     <dt className="text-muted-foreground">Customer</dt>
-                     <dd>Liam Johnson</dd>
-                  </div>
-                  <div className="flex items-center justify-between">
-                     <dt className="text-muted-foreground">Email</dt>
-                     <dd>
-                        <a href="mailto:">liam@acme.com</a>
-                     </dd>
-                  </div>
-                  <div className="flex items-center justify-between">
-                     <dt className="text-muted-foreground">Phone</dt>
-                     <dd>
-                        <a href="tel:">+1 234 567 890</a>
-                     </dd>
-                  </div>
-               </dl>
-            </div>
-            <Separator className="my-4" />
-            <div className="grid gap-3">
-               <div className="font-semibold">Payment Information</div>
-               <dl className="grid gap-3">
-                  <div className="flex items-center justify-between">
-                     <dt className="text-muted-foreground flex items-center gap-1">
-                        <CreditCard className="size-4" />
-                        Visa
-                     </dt>
-                     <dd>**** **** **** 4532</dd>
-                  </div>
-               </dl>
-            </div>
-         </CardContent>
-         <CardFooter className="bg-muted/50 flex flex-row items-center border-t px-6 py-3">
-            <div className="text-muted-foreground text-xs">
-               Updated
-               {' '}
-               <time dateTime="2023-11-23">November 23, 2023</time>
-            </div>
-            <Pagination className="ml-auto mr-0 w-auto">
-               <PaginationContent>
-                  <PaginationItem>
-                     <Button size="icon" variant="outline" className="size-6">
-                        <ChevronLeft className="size-3.5" />
-                        <span className="sr-only">Previous Order</span>
-                     </Button>
-                  </PaginationItem>
-                  <PaginationItem>
-                     <Button size="icon" variant="outline" className="size-6">
-                        <ChevronRight className="size-3.5" />
-                        <span className="sr-only">Next Order</span>
-                     </Button>
-                  </PaginationItem>
-               </PaginationContent>
-            </Pagination>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-05-chunk-5.tsx b/apps/web/registry/miami/block/dashboard-05-chunk-5.tsx
deleted file mode 100644
index dd7b0c99..00000000
--- a/apps/web/registry/miami/block/dashboard-05-chunk-5.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import {
-   ChevronLeft,
-   ChevronRight,
-   Copy,
-   CreditCard,
-   MoreVertical,
-   Truck,
-} from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   Pagination,
-   PaginationContent,
-   PaginationItem,
-} from '~/registry/miami/ui/pagination'
-import { Separator } from '~/registry/miami/ui/separator'
-
-export default function Component() {
-   return (
-      <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-5">
-         <CardHeader className="bg-muted/50 flex flex-row items-start">
-            <div className="grid gap-0.5">
-               <CardTitle className="group flex items-center gap-2 text-lg">
-                  Order Oe31b70H
-                  <Button
-                     size="icon"
-                     variant="outline"
-                     className="size-6 opacity-0 transition-opacity group-hover:opacity-100"
-                  >
-                     <Copy className="size-3" />
-                     <span className="sr-only">Copy Order ID</span>
-                  </Button>
-               </CardTitle>
-               <CardDescription>Date: November 23, 2023</CardDescription>
-            </div>
-            <div className="ml-auto flex items-center gap-1">
-               <Button size="sm" variant="outline" className="h-8 gap-1">
-                  <Truck className="size-3.5" />
-                  <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-                     Track Order
-                  </span>
-               </Button>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button size="icon" variant="outline" className="size-8">
-                        <MoreVertical className="size-3.5" />
-                        <span className="sr-only">More</span>
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuItem>Edit</DropdownMenuItem>
-                     <DropdownMenuItem>Export</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Trash</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </div>
-         </CardHeader>
-         <CardContent className="p-6 text-sm">
-            <div className="grid gap-3">
-               <div className="font-semibold">Order Details</div>
-               <ul className="grid gap-3">
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">
-                        Glimmer Lamps x
-                        {' '}
-                        <span>2</span>
-                     </span>
-                     <span>$250.00</span>
-                  </li>
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">
-                        Aqua Filters x
-                        {' '}
-                        <span>1</span>
-                     </span>
-                     <span>$49.00</span>
-                  </li>
-               </ul>
-               <Separator className="my-2" />
-               <ul className="grid gap-3">
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">Subtotal</span>
-                     <span>$299.00</span>
-                  </li>
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">Shipping</span>
-                     <span>$5.00</span>
-                  </li>
-                  <li className="flex items-center justify-between">
-                     <span className="text-muted-foreground">Tax</span>
-                     <span>$25.00</span>
-                  </li>
-                  <li className="flex items-center justify-between font-semibold">
-                     <span className="text-muted-foreground">Total</span>
-                     <span>$329.00</span>
-                  </li>
-               </ul>
-            </div>
-            <Separator className="my-4" />
-            <div className="grid grid-cols-2 gap-4">
-               <div className="grid gap-3">
-                  <div className="font-semibold">Shipping Information</div>
-                  <address className="text-muted-foreground grid gap-0.5 not-italic">
-                     <span>Liam Johnson</span>
-                     <span>1234 Main St.</span>
-                     <span>Anytown, CA 12345</span>
-                  </address>
-               </div>
-               <div className="grid auto-rows-max gap-3">
-                  <div className="font-semibold">Billing Information</div>
-                  <div className="text-muted-foreground">
-                     Same as shipping address
-                  </div>
-               </div>
-            </div>
-            <Separator className="my-4" />
-            <div className="grid gap-3">
-               <div className="font-semibold">Customer Information</div>
-               <dl className="grid gap-3">
-                  <div className="flex items-center justify-between">
-                     <dt className="text-muted-foreground">Customer</dt>
-                     <dd>Liam Johnson</dd>
-                  </div>
-                  <div className="flex items-center justify-between">
-                     <dt className="text-muted-foreground">Email</dt>
-                     <dd>
-                        <a href="mailto:">liam@acme.com</a>
-                     </dd>
-                  </div>
-                  <div className="flex items-center justify-between">
-                     <dt className="text-muted-foreground">Phone</dt>
-                     <dd>
-                        <a href="tel:">+1 234 567 890</a>
-                     </dd>
-                  </div>
-               </dl>
-            </div>
-            <Separator className="my-4" />
-            <div className="grid gap-3">
-               <div className="font-semibold">Payment Information</div>
-               <dl className="grid gap-3">
-                  <div className="flex items-center justify-between">
-                     <dt className="text-muted-foreground flex items-center gap-1">
-                        <CreditCard className="size-4" />
-                        Visa
-                     </dt>
-                     <dd>**** **** **** 4532</dd>
-                  </div>
-               </dl>
-            </div>
-         </CardContent>
-         <CardFooter className="bg-muted/50 flex flex-row items-center border-t px-6 py-3">
-            <div className="text-muted-foreground text-xs">
-               Updated
-               {' '}
-               <time dateTime="2023-11-23">November 23, 2023</time>
-            </div>
-            <Pagination className="ml-auto mr-0 w-auto">
-               <PaginationContent>
-                  <PaginationItem>
-                     <Button size="icon" variant="outline" className="size-6">
-                        <ChevronLeft className="size-3.5" />
-                        <span className="sr-only">Previous Order</span>
-                     </Button>
-                  </PaginationItem>
-                  <PaginationItem>
-                     <Button size="icon" variant="outline" className="size-6">
-                        <ChevronRight className="size-3.5" />
-                        <span className="sr-only">Next Order</span>
-                     </Button>
-                  </PaginationItem>
-               </PaginationContent>
-            </Pagination>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-05.tsx b/apps/web/registry/miami/block/dashboard-05.tsx
deleted file mode 100644
index 386954ab..00000000
--- a/apps/web/registry/miami/block/dashboard-05.tsx
+++ /dev/null
@@ -1,733 +0,0 @@
-import * as React from 'react'
-import Image from 'next/image'
-import Link from 'next/link'
-import {
-   ChevronLeft,
-   ChevronRight,
-   Copy,
-   CreditCard,
-   File,
-   Home,
-   LineChart,
-   ListFilter,
-   MoreVertical,
-   Package,
-   Package2,
-   PanelLeft,
-   Search,
-   Settings,
-   ShoppingCart,
-   Truck,
-   Users2,
-} from 'lucide-react'
-
-import { Badge } from '~/registry/miami/ui/badge'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuCheckboxItem,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import {
-   Pagination,
-   PaginationContent,
-   PaginationItem,
-} from '~/registry/miami/ui/pagination'
-import { Progress } from '~/registry/miami/ui/progress'
-import { Separator } from '~/registry/miami/ui/separator'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/miami/ui/sheet'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-import {
-   Tabs,
-   TabsContent,
-   TabsList,
-   TabsTrigger,
-} from '~/registry/miami/ui/tabs'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-
-export const description
-  = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'
-
-export const iframeHeight = '906px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="bg-muted/40 flex min-h-screen w-full flex-col">
-         <aside className="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
-            <nav className="flex flex-col items-center gap-4 px-2 sm:py-4">
-               <Link
-                  href="#"
-                  className="bg-primary text-primary-foreground group flex size-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:size-8 md:text-base"
-               >
-                  <Package2 className="size-4 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-               </Link>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Home className="size-5" />
-                        <span className="sr-only">Dashboard</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Dashboard</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="bg-accent text-accent-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <ShoppingCart className="size-5" />
-                        <span className="sr-only">Orders</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Orders</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Package className="size-5" />
-                        <span className="sr-only">Products</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Products</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Users2 className="size-5" />
-                        <span className="sr-only">Customers</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Customers</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <LineChart className="size-5" />
-                        <span className="sr-only">Analytics</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Analytics</TooltipContent>
-               </Tooltip>
-            </nav>
-            <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-4">
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Settings className="size-5" />
-                        <span className="sr-only">Settings</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Settings</TooltipContent>
-               </Tooltip>
-            </nav>
-         </aside>
-         <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-            <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-               <Sheet>
-                  <SheetTrigger asChild>
-                     <Button size="icon" variant="outline" className="sm:hidden">
-                        <PanelLeft className="size-5" />
-                        <span className="sr-only">Toggle Menu</span>
-                     </Button>
-                  </SheetTrigger>
-                  <SheetContent side="left" className="sm:max-w-xs">
-                     <nav className="grid gap-6 text-lg font-medium">
-                        <Link
-                           href="#"
-                           className="bg-primary text-primary-foreground group flex size-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base"
-                        >
-                           <Package2 className="size-5 transition-all group-hover:scale-110" />
-                           <span className="sr-only">Acme Inc</span>
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Home className="size-5" />
-                           Dashboard
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <ShoppingCart className="size-5" />
-                           Orders
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Package className="size-5" />
-                           Products
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Users2 className="size-5" />
-                           Customers
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <LineChart className="size-5" />
-                           Settings
-                        </Link>
-                     </nav>
-                  </SheetContent>
-               </Sheet>
-               <Breadcrumb className="hidden md:flex">
-                  <BreadcrumbList>
-                     <BreadcrumbItem>
-                        <BreadcrumbLink asChild>
-                           <Link href="#">Dashboard</Link>
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator />
-                     <BreadcrumbItem>
-                        <BreadcrumbLink asChild>
-                           <Link href="#">Orders</Link>
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Recent Orders</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-               <div className="relative ml-auto flex-1 md:grow-0">
-                  <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-                  <Input
-                     type="search"
-                     placeholder="Search..."
-                     className="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[320px]"
-                  />
-               </div>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="overflow-hidden rounded-full"
-                     >
-                        <Image
-                           src="/placeholder-user.jpg"
-                           width={36}
-                           height={36}
-                           alt="Avatar"
-                           className="overflow-hidden rounded-full"
-                        />
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Settings</DropdownMenuItem>
-                     <DropdownMenuItem>Support</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Logout</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </header>
-            <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
-               <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
-                  <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
-                     <Card
-                        className="sm:col-span-2"
-                        x-chunk="A card for an orders dashboard with a description and a button to create a new order."
-                     >
-                        <CardHeader className="pb-3">
-                           <CardTitle>Your Orders</CardTitle>
-                           <CardDescription className="max-w-lg text-balance leading-relaxed">
-                              Introducing Our Dynamic Orders Dashboard for Seamless
-                              Management and Insightful Analysis.
-                           </CardDescription>
-                        </CardHeader>
-                        <CardFooter>
-                           <Button>Create New Order</Button>
-                        </CardFooter>
-                     </Card>
-                     <Card x-chunk="A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.">
-                        <CardHeader className="pb-2">
-                           <CardDescription>This Week</CardDescription>
-                           <CardTitle className="text-4xl">$1,329</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                           <div className="text-muted-foreground text-xs">
-                              +25% from last week
-                           </div>
-                        </CardContent>
-                        <CardFooter>
-                           <Progress value={25} aria-label="25% increase" />
-                        </CardFooter>
-                     </Card>
-                     <Card x-chunk="A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.">
-                        <CardHeader className="pb-2">
-                           <CardDescription>This Month</CardDescription>
-                           <CardTitle className="text-4xl">$5,329</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                           <div className="text-muted-foreground text-xs">
-                              +10% from last month
-                           </div>
-                        </CardContent>
-                        <CardFooter>
-                           <Progress value={12} aria-label="12% increase" />
-                        </CardFooter>
-                     </Card>
-                  </div>
-                  <Tabs defaultValue="week">
-                     <div className="flex items-center">
-                        <TabsList>
-                           <TabsTrigger value="week">Week</TabsTrigger>
-                           <TabsTrigger value="month">Month</TabsTrigger>
-                           <TabsTrigger value="year">Year</TabsTrigger>
-                        </TabsList>
-                        <div className="ml-auto flex items-center gap-2">
-                           <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                 <Button
-                                    variant="outline"
-                                    size="sm"
-                                    className="h-7 gap-1 text-sm"
-                                 >
-                                    <ListFilter className="size-3.5" />
-                                    <span className="sr-only sm:not-sr-only">Filter</span>
-                                 </Button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent align="end">
-                                 <DropdownMenuLabel>Filter by</DropdownMenuLabel>
-                                 <DropdownMenuSeparator />
-                                 <DropdownMenuCheckboxItem checked>
-                                    Fulfilled
-                                 </DropdownMenuCheckboxItem>
-                                 <DropdownMenuCheckboxItem>
-                                    Declined
-                                 </DropdownMenuCheckboxItem>
-                                 <DropdownMenuCheckboxItem>
-                                    Refunded
-                                 </DropdownMenuCheckboxItem>
-                              </DropdownMenuContent>
-                           </DropdownMenu>
-                           <Button
-                              size="sm"
-                              variant="outline"
-                              className="h-7 gap-1 text-sm"
-                           >
-                              <File className="size-3.5" />
-                              <span className="sr-only sm:not-sr-only">Export</span>
-                           </Button>
-                        </div>
-                     </div>
-                     <TabsContent value="week">
-                        <Card x-chunk="A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.">
-                           <CardHeader className="px-7">
-                              <CardTitle>Orders</CardTitle>
-                              <CardDescription>
-                                 Recent orders from your store.
-                              </CardDescription>
-                           </CardHeader>
-                           <CardContent>
-                              <Table>
-                                 <TableHeader>
-                                    <TableRow>
-                                       <TableHead>Customer</TableHead>
-                                       <TableHead className="hidden sm:table-cell">
-                                          Type
-                                       </TableHead>
-                                       <TableHead className="hidden sm:table-cell">
-                                          Status
-                                       </TableHead>
-                                       <TableHead className="hidden md:table-cell">
-                                          Date
-                                       </TableHead>
-                                       <TableHead className="text-right">Amount</TableHead>
-                                    </TableRow>
-                                 </TableHeader>
-                                 <TableBody>
-                                    <TableRow className="bg-accent">
-                                       <TableCell>
-                                          <div className="font-medium">Liam Johnson</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             liam@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Sale
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
-                                             Fulfilled
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-23
-                                       </TableCell>
-                                       <TableCell className="text-right">$250.00</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Olivia Smith</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             olivia@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Refund
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="outline">
-                                             Declined
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-24
-                                       </TableCell>
-                                       <TableCell className="text-right">$150.00</TableCell>
-                                    </TableRow>
-                                    {/* <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Liam Johnson</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              liam@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-23
-                          </TableCell>
-                          <TableCell className="text-right">$250.00</TableCell>
-                        </TableRow> */}
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Noah Williams</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             noah@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Subscription
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
-                                             Fulfilled
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-25
-                                       </TableCell>
-                                       <TableCell className="text-right">$350.00</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Emma Brown</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             emma@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Sale
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
-                                             Fulfilled
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-26
-                                       </TableCell>
-                                       <TableCell className="text-right">$450.00</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Liam Johnson</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             liam@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Sale
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
-                                             Fulfilled
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-23
-                                       </TableCell>
-                                       <TableCell className="text-right">$250.00</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Olivia Smith</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             olivia@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Refund
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="outline">
-                                             Declined
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-24
-                                       </TableCell>
-                                       <TableCell className="text-right">$150.00</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell>
-                                          <div className="font-medium">Emma Brown</div>
-                                          <div className="text-muted-foreground hidden text-sm md:inline">
-                                             emma@example.com
-                                          </div>
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          Sale
-                                       </TableCell>
-                                       <TableCell className="hidden sm:table-cell">
-                                          <Badge className="text-xs" variant="secondary">
-                                             Fulfilled
-                                          </Badge>
-                                       </TableCell>
-                                       <TableCell className="hidden md:table-cell">
-                                          2023-06-26
-                                       </TableCell>
-                                       <TableCell className="text-right">$450.00</TableCell>
-                                    </TableRow>
-                                 </TableBody>
-                              </Table>
-                           </CardContent>
-                        </Card>
-                     </TabsContent>
-                  </Tabs>
-               </div>
-               <div>
-                  <Card
-                     className="overflow-hidden"
-                     x-chunk="An order details card with order details, shipping information, customer information and payment information."
-                  >
-                     <CardHeader className="bg-muted/50 flex flex-row items-start">
-                        <div className="grid gap-0.5">
-                           <CardTitle className="group flex items-center gap-2 text-lg">
-                              Order Oe31b70H
-                              <Button
-                                 size="icon"
-                                 variant="outline"
-                                 className="size-6 opacity-0 transition-opacity group-hover:opacity-100"
-                              >
-                                 <Copy className="size-3" />
-                                 <span className="sr-only">Copy Order ID</span>
-                              </Button>
-                           </CardTitle>
-                           <CardDescription>Date: November 23, 2023</CardDescription>
-                        </div>
-                        <div className="ml-auto flex items-center gap-1">
-                           <Button size="sm" variant="outline" className="h-8 gap-1">
-                              <Truck className="size-3.5" />
-                              <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-                                 Track Order
-                              </span>
-                           </Button>
-                           <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                 <Button size="icon" variant="outline" className="size-8">
-                                    <MoreVertical className="size-3.5" />
-                                    <span className="sr-only">More</span>
-                                 </Button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent align="end">
-                                 <DropdownMenuItem>Edit</DropdownMenuItem>
-                                 <DropdownMenuItem>Export</DropdownMenuItem>
-                                 <DropdownMenuSeparator />
-                                 <DropdownMenuItem>Trash</DropdownMenuItem>
-                              </DropdownMenuContent>
-                           </DropdownMenu>
-                        </div>
-                     </CardHeader>
-                     <CardContent className="p-6 text-sm">
-                        <div className="grid gap-3">
-                           <div className="font-semibold">Order Details</div>
-                           <ul className="grid gap-3">
-                              <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">
-                                    Glimmer Lamps x
-                                    {' '}
-                                    <span>2</span>
-                                 </span>
-                                 <span>$250.00</span>
-                              </li>
-                              <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">
-                                    Aqua Filters x
-                                    {' '}
-                                    <span>1</span>
-                                 </span>
-                                 <span>$49.00</span>
-                              </li>
-                           </ul>
-                           <Separator className="my-2" />
-                           <ul className="grid gap-3">
-                              <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">Subtotal</span>
-                                 <span>$299.00</span>
-                              </li>
-                              <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">Shipping</span>
-                                 <span>$5.00</span>
-                              </li>
-                              <li className="flex items-center justify-between">
-                                 <span className="text-muted-foreground">Tax</span>
-                                 <span>$25.00</span>
-                              </li>
-                              <li className="flex items-center justify-between font-semibold">
-                                 <span className="text-muted-foreground">Total</span>
-                                 <span>$329.00</span>
-                              </li>
-                           </ul>
-                        </div>
-                        <Separator className="my-4" />
-                        <div className="grid grid-cols-2 gap-4">
-                           <div className="grid gap-3">
-                              <div className="font-semibold">Shipping Information</div>
-                              <address className="text-muted-foreground grid gap-0.5 not-italic">
-                                 <span>Liam Johnson</span>
-                                 <span>1234 Main St.</span>
-                                 <span>Anytown, CA 12345</span>
-                              </address>
-                           </div>
-                           <div className="grid auto-rows-max gap-3">
-                              <div className="font-semibold">Billing Information</div>
-                              <div className="text-muted-foreground">
-                                 Same as shipping address
-                              </div>
-                           </div>
-                        </div>
-                        <Separator className="my-4" />
-                        <div className="grid gap-3">
-                           <div className="font-semibold">Customer Information</div>
-                           <dl className="grid gap-3">
-                              <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground">Customer</dt>
-                                 <dd>Liam Johnson</dd>
-                              </div>
-                              <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground">Email</dt>
-                                 <dd>
-                                    <a href="mailto:">liam@acme.com</a>
-                                 </dd>
-                              </div>
-                              <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground">Phone</dt>
-                                 <dd>
-                                    <a href="tel:">+1 234 567 890</a>
-                                 </dd>
-                              </div>
-                           </dl>
-                        </div>
-                        <Separator className="my-4" />
-                        <div className="grid gap-3">
-                           <div className="font-semibold">Payment Information</div>
-                           <dl className="grid gap-3">
-                              <div className="flex items-center justify-between">
-                                 <dt className="text-muted-foreground flex items-center gap-1">
-                                    <CreditCard className="size-4" />
-                                    Visa
-                                 </dt>
-                                 <dd>**** **** **** 4532</dd>
-                              </div>
-                           </dl>
-                        </div>
-                     </CardContent>
-                     <CardFooter className="bg-muted/50 flex flex-row items-center border-t px-6 py-3">
-                        <div className="text-muted-foreground text-xs">
-                           Updated
-                           {' '}
-                           <time dateTime="2023-11-23">November 23, 2023</time>
-                        </div>
-                        <Pagination className="ml-auto mr-0 w-auto">
-                           <PaginationContent>
-                              <PaginationItem>
-                                 <Button size="icon" variant="outline" className="size-6">
-                                    <ChevronLeft className="size-3.5" />
-                                    <span className="sr-only">Previous Order</span>
-                                 </Button>
-                              </PaginationItem>
-                              <PaginationItem>
-                                 <Button size="icon" variant="outline" className="size-6">
-                                    <ChevronRight className="size-3.5" />
-                                    <span className="sr-only">Next Order</span>
-                                 </Button>
-                              </PaginationItem>
-                           </PaginationContent>
-                        </Pagination>
-                     </CardFooter>
-                  </Card>
-               </div>
-            </main>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-06-chunk-0.tsx b/apps/web/registry/miami/block/dashboard-06-chunk-0.tsx
deleted file mode 100644
index 6376f59b..00000000
--- a/apps/web/registry/miami/block/dashboard-06-chunk-0.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-import { MoreHorizontal } from 'lucide-react'
-
-import { Badge } from '~/registry/miami/ui/badge'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-06-chunk-0">
-         <CardHeader>
-            <CardTitle>Products</CardTitle>
-            <CardDescription>
-               Manage your products and view their sales performance.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <Table>
-               <TableHeader>
-                  <TableRow>
-                     <TableHead className="hidden w-[100px] sm:table-cell">
-                        <span className="sr-only">Image</span>
-                     </TableHead>
-                     <TableHead>Name</TableHead>
-                     <TableHead>Status</TableHead>
-                     <TableHead>Price</TableHead>
-                     <TableHead className="hidden md:table-cell">
-                        Total Sales
-                     </TableHead>
-                     <TableHead className="hidden md:table-cell">Created at</TableHead>
-                     <TableHead>
-                        <span className="sr-only">Actions</span>
-                     </TableHead>
-                  </TableRow>
-               </TableHeader>
-               <TableBody>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">
-                        Laser Lemonade Machine
-                     </TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Draft</Badge>
-                     </TableCell>
-                     <TableCell>$499.99</TableCell>
-                     <TableCell className="hidden md:table-cell">25</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2023-07-12 10:42 AM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">
-                        Hypernova Headphones
-                     </TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Active</Badge>
-                     </TableCell>
-                     <TableCell>$129.99</TableCell>
-                     <TableCell className="hidden md:table-cell">100</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2023-10-18 03:21 PM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">AeroGlow Desk Lamp</TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Active</Badge>
-                     </TableCell>
-                     <TableCell>$39.99</TableCell>
-                     <TableCell className="hidden md:table-cell">50</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2023-11-29 08:15 AM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">
-                        TechTonic Energy Drink
-                     </TableCell>
-                     <TableCell>
-                        <Badge variant="secondary">Draft</Badge>
-                     </TableCell>
-                     <TableCell>$2.99</TableCell>
-                     <TableCell className="hidden md:table-cell">0</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2023-12-25 11:59 PM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">
-                        Gamer Gear Pro Controller
-                     </TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Active</Badge>
-                     </TableCell>
-                     <TableCell>$59.99</TableCell>
-                     <TableCell className="hidden md:table-cell">75</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2024-01-01 12:00 AM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">Luminous VR Headset</TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Active</Badge>
-                     </TableCell>
-                     <TableCell>$199.99</TableCell>
-                     <TableCell className="hidden md:table-cell">30</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2024-02-14 02:14 PM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-               </TableBody>
-            </Table>
-         </CardContent>
-         <CardFooter>
-            <div className="text-muted-foreground text-xs">
-               Showing
-               {' '}
-               <strong>1-10</strong>
-               {' '}
-               of
-               <strong>32</strong>
-               {' '}
-               products
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-06-chunk-1.tsx b/apps/web/registry/miami/block/dashboard-06-chunk-1.tsx
deleted file mode 100644
index cd900cf3..00000000
--- a/apps/web/registry/miami/block/dashboard-06-chunk-1.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-import Image from 'next/image'
-import { MoreHorizontal } from 'lucide-react'
-
-import { Badge } from '~/registry/miami/ui/badge'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-06-chunk-1">
-         <CardHeader>
-            <CardTitle>Products</CardTitle>
-            <CardDescription>
-               Manage your products and view their sales performance.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <Table>
-               <TableHeader>
-                  <TableRow>
-                     <TableHead className="hidden w-[100px] sm:table-cell">
-                        <span className="sr-only">Image</span>
-                     </TableHead>
-                     <TableHead>Name</TableHead>
-                     <TableHead>Status</TableHead>
-                     <TableHead>Price</TableHead>
-                     <TableHead className="hidden md:table-cell">
-                        Total Sales
-                     </TableHead>
-                     <TableHead className="hidden md:table-cell">Created at</TableHead>
-                     <TableHead>
-                        <span className="sr-only">Actions</span>
-                     </TableHead>
-                  </TableRow>
-               </TableHeader>
-               <TableBody>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">
-                        Laser Lemonade Machine
-                     </TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Draft</Badge>
-                     </TableCell>
-                     <TableCell>$499.99</TableCell>
-                     <TableCell className="hidden md:table-cell">25</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2023-07-12 10:42 AM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">
-                        Hypernova Headphones
-                     </TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Active</Badge>
-                     </TableCell>
-                     <TableCell>$129.99</TableCell>
-                     <TableCell className="hidden md:table-cell">100</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2023-10-18 03:21 PM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">AeroGlow Desk Lamp</TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Active</Badge>
-                     </TableCell>
-                     <TableCell>$39.99</TableCell>
-                     <TableCell className="hidden md:table-cell">50</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2023-11-29 08:15 AM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">
-                        TechTonic Energy Drink
-                     </TableCell>
-                     <TableCell>
-                        <Badge variant="secondary">Draft</Badge>
-                     </TableCell>
-                     <TableCell>$2.99</TableCell>
-                     <TableCell className="hidden md:table-cell">0</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2023-12-25 11:59 PM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">
-                        Gamer Gear Pro Controller
-                     </TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Active</Badge>
-                     </TableCell>
-                     <TableCell>$59.99</TableCell>
-                     <TableCell className="hidden md:table-cell">75</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2024-01-01 12:00 AM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="hidden sm:table-cell">
-                        <Image
-                           alt="Product image"
-                           className="aspect-square rounded-md object-cover"
-                           height="64"
-                           src="/placeholder.svg"
-                           width="64"
-                        />
-                     </TableCell>
-                     <TableCell className="font-medium">Luminous VR Headset</TableCell>
-                     <TableCell>
-                        <Badge variant="outline">Active</Badge>
-                     </TableCell>
-                     <TableCell>$199.99</TableCell>
-                     <TableCell className="hidden md:table-cell">30</TableCell>
-                     <TableCell className="hidden md:table-cell">
-                        2024-02-14 02:14 PM
-                     </TableCell>
-                     <TableCell>
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button aria-haspopup="true" size="icon" variant="ghost">
-                                 <MoreHorizontal className="size-4" />
-                                 <span className="sr-only">Toggle menu</span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                     </TableCell>
-                  </TableRow>
-               </TableBody>
-            </Table>
-         </CardContent>
-         <CardFooter>
-            <div className="text-muted-foreground text-xs">
-               Showing
-               {' '}
-               <strong>1-10</strong>
-               {' '}
-               of
-               <strong>32</strong>
-               {' '}
-               products
-            </div>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-06.tsx b/apps/web/registry/miami/block/dashboard-06.tsx
deleted file mode 100644
index ca397461..00000000
--- a/apps/web/registry/miami/block/dashboard-06.tsx
+++ /dev/null
@@ -1,629 +0,0 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import {
-   File,
-   Home,
-   LineChart,
-   ListFilter,
-   MoreHorizontal,
-   Package,
-   Package2,
-   PanelLeft,
-   PlusCircle,
-   Search,
-   Settings,
-   ShoppingCart,
-   Users2,
-} from 'lucide-react'
-
-import { Badge } from '~/registry/miami/ui/badge'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuCheckboxItem,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/miami/ui/sheet'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-import {
-   Tabs,
-   TabsContent,
-   TabsList,
-   TabsTrigger,
-} from '~/registry/miami/ui/tabs'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-
-export const description
-  = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'
-
-export const iframeHeight = '820px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="bg-muted/40 flex min-h-screen w-full flex-col">
-         <aside className="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
-            <nav className="flex flex-col items-center gap-4 px-2 py-4">
-               <Link
-                  href="#"
-                  className="bg-primary text-primary-foreground group flex size-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:size-8 md:text-base"
-               >
-                  <Package2 className="size-4 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-               </Link>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Home className="size-5" />
-                        <span className="sr-only">Dashboard</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Dashboard</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <ShoppingCart className="size-5" />
-                        <span className="sr-only">Orders</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Orders</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="bg-accent text-accent-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Package className="size-5" />
-                        <span className="sr-only">Products</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Products</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Users2 className="size-5" />
-                        <span className="sr-only">Customers</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Customers</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <LineChart className="size-5" />
-                        <span className="sr-only">Analytics</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Analytics</TooltipContent>
-               </Tooltip>
-            </nav>
-            <nav className="mt-auto flex flex-col items-center gap-4 px-2 py-4">
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Settings className="size-5" />
-                        <span className="sr-only">Settings</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Settings</TooltipContent>
-               </Tooltip>
-            </nav>
-         </aside>
-         <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-            <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-               <Sheet>
-                  <SheetTrigger asChild>
-                     <Button size="icon" variant="outline" className="sm:hidden">
-                        <PanelLeft className="size-5" />
-                        <span className="sr-only">Toggle Menu</span>
-                     </Button>
-                  </SheetTrigger>
-                  <SheetContent side="left" className="sm:max-w-xs">
-                     <nav className="grid gap-6 text-lg font-medium">
-                        <Link
-                           href="#"
-                           className="bg-primary text-primary-foreground group flex size-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base"
-                        >
-                           <Package2 className="size-5 transition-all group-hover:scale-110" />
-                           <span className="sr-only">Acme Inc</span>
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Home className="size-5" />
-                           Dashboard
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <ShoppingCart className="size-5" />
-                           Orders
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Package className="size-5" />
-                           Products
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Users2 className="size-5" />
-                           Customers
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <LineChart className="size-5" />
-                           Settings
-                        </Link>
-                     </nav>
-                  </SheetContent>
-               </Sheet>
-               <Breadcrumb className="hidden md:flex">
-                  <BreadcrumbList>
-                     <BreadcrumbItem>
-                        <BreadcrumbLink asChild>
-                           <Link href="#">Dashboard</Link>
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator />
-                     <BreadcrumbItem>
-                        <BreadcrumbLink asChild>
-                           <Link href="#">Products</Link>
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>All Products</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-               <div className="relative ml-auto flex-1 md:grow-0">
-                  <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-                  <Input
-                     type="search"
-                     placeholder="Search..."
-                     className="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[320px]"
-                  />
-               </div>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="overflow-hidden rounded-full"
-                     >
-                        <Image
-                           src="/placeholder-user.jpg"
-                           width={36}
-                           height={36}
-                           alt="Avatar"
-                           className="overflow-hidden rounded-full"
-                        />
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Settings</DropdownMenuItem>
-                     <DropdownMenuItem>Support</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Logout</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </header>
-            <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
-               <Tabs defaultValue="all">
-                  <div className="flex items-center">
-                     <TabsList>
-                        <TabsTrigger value="all">All</TabsTrigger>
-                        <TabsTrigger value="active">Active</TabsTrigger>
-                        <TabsTrigger value="draft">Draft</TabsTrigger>
-                        <TabsTrigger value="archived" className="hidden sm:flex">
-                           Archived
-                        </TabsTrigger>
-                     </TabsList>
-                     <div className="ml-auto flex items-center gap-2">
-                        <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                              <Button variant="outline" size="sm" className="h-7 gap-1">
-                                 <ListFilter className="size-3.5" />
-                                 <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                                    Filter
-                                 </span>
-                              </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Filter by</DropdownMenuLabel>
-                              <DropdownMenuSeparator />
-                              <DropdownMenuCheckboxItem checked>
-                                 Active
-                              </DropdownMenuCheckboxItem>
-                              <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>
-                              <DropdownMenuCheckboxItem>
-                                 Archived
-                              </DropdownMenuCheckboxItem>
-                           </DropdownMenuContent>
-                        </DropdownMenu>
-                        <Button size="sm" variant="outline" className="h-7 gap-1">
-                           <File className="size-3.5" />
-                           <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                              Export
-                           </span>
-                        </Button>
-                        <Button size="sm" className="h-7 gap-1">
-                           <PlusCircle className="size-3.5" />
-                           <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                              Add Product
-                           </span>
-                        </Button>
-                     </div>
-                  </div>
-                  <TabsContent value="all">
-                     <Card x-chunk="A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.">
-                        <CardHeader>
-                           <CardTitle>Products</CardTitle>
-                           <CardDescription>
-                              Manage your products and view their sales performance.
-                           </CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                           <Table>
-                              <TableHeader>
-                                 <TableRow>
-                                    <TableHead className="hidden w-[100px] sm:table-cell">
-                                       <span className="sr-only">Image</span>
-                                    </TableHead>
-                                    <TableHead>Name</TableHead>
-                                    <TableHead>Status</TableHead>
-                                    <TableHead>Price</TableHead>
-                                    <TableHead className="hidden md:table-cell">
-                                       Total Sales
-                                    </TableHead>
-                                    <TableHead className="hidden md:table-cell">
-                                       Created at
-                                    </TableHead>
-                                    <TableHead>
-                                       <span className="sr-only">Actions</span>
-                                    </TableHead>
-                                 </TableRow>
-                              </TableHeader>
-                              <TableBody>
-                                 <TableRow>
-                                    <TableCell className="hidden sm:table-cell">
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square rounded-md object-cover"
-                                          height="64"
-                                          src="/placeholder.svg"
-                                          width="64"
-                                       />
-                                    </TableCell>
-                                    <TableCell className="font-medium">
-                                       Laser Lemonade Machine
-                                    </TableCell>
-                                    <TableCell>
-                                       <Badge variant="outline">Draft</Badge>
-                                    </TableCell>
-                                    <TableCell>$499.99</TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       25
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       2023-07-12 10:42 AM
-                                    </TableCell>
-                                    <TableCell>
-                                       <DropdownMenu>
-                                          <DropdownMenuTrigger asChild>
-                                             <Button
-                                                aria-haspopup="true"
-                                                size="icon"
-                                                variant="ghost"
-                                             >
-                                                <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
-                                             </Button>
-                                          </DropdownMenuTrigger>
-                                          <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
-                                          </DropdownMenuContent>
-                                       </DropdownMenu>
-                                    </TableCell>
-                                 </TableRow>
-                                 <TableRow>
-                                    <TableCell className="hidden sm:table-cell">
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square rounded-md object-cover"
-                                          height="64"
-                                          src="/placeholder.svg"
-                                          width="64"
-                                       />
-                                    </TableCell>
-                                    <TableCell className="font-medium">
-                                       Hypernova Headphones
-                                    </TableCell>
-                                    <TableCell>
-                                       <Badge variant="outline">Active</Badge>
-                                    </TableCell>
-                                    <TableCell>$129.99</TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       100
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       2023-10-18 03:21 PM
-                                    </TableCell>
-                                    <TableCell>
-                                       <DropdownMenu>
-                                          <DropdownMenuTrigger asChild>
-                                             <Button
-                                                aria-haspopup="true"
-                                                size="icon"
-                                                variant="ghost"
-                                             >
-                                                <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
-                                             </Button>
-                                          </DropdownMenuTrigger>
-                                          <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
-                                          </DropdownMenuContent>
-                                       </DropdownMenu>
-                                    </TableCell>
-                                 </TableRow>
-                                 <TableRow>
-                                    <TableCell className="hidden sm:table-cell">
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square rounded-md object-cover"
-                                          height="64"
-                                          src="/placeholder.svg"
-                                          width="64"
-                                       />
-                                    </TableCell>
-                                    <TableCell className="font-medium">
-                                       AeroGlow Desk Lamp
-                                    </TableCell>
-                                    <TableCell>
-                                       <Badge variant="outline">Active</Badge>
-                                    </TableCell>
-                                    <TableCell>$39.99</TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       50
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       2023-11-29 08:15 AM
-                                    </TableCell>
-                                    <TableCell>
-                                       <DropdownMenu>
-                                          <DropdownMenuTrigger asChild>
-                                             <Button
-                                                aria-haspopup="true"
-                                                size="icon"
-                                                variant="ghost"
-                                             >
-                                                <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
-                                             </Button>
-                                          </DropdownMenuTrigger>
-                                          <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
-                                          </DropdownMenuContent>
-                                       </DropdownMenu>
-                                    </TableCell>
-                                 </TableRow>
-                                 <TableRow>
-                                    <TableCell className="hidden sm:table-cell">
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square rounded-md object-cover"
-                                          height="64"
-                                          src="/placeholder.svg"
-                                          width="64"
-                                       />
-                                    </TableCell>
-                                    <TableCell className="font-medium">
-                                       TechTonic Energy Drink
-                                    </TableCell>
-                                    <TableCell>
-                                       <Badge variant="secondary">Draft</Badge>
-                                    </TableCell>
-                                    <TableCell>$2.99</TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       0
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       2023-12-25 11:59 PM
-                                    </TableCell>
-                                    <TableCell>
-                                       <DropdownMenu>
-                                          <DropdownMenuTrigger asChild>
-                                             <Button
-                                                aria-haspopup="true"
-                                                size="icon"
-                                                variant="ghost"
-                                             >
-                                                <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
-                                             </Button>
-                                          </DropdownMenuTrigger>
-                                          <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
-                                          </DropdownMenuContent>
-                                       </DropdownMenu>
-                                    </TableCell>
-                                 </TableRow>
-                                 <TableRow>
-                                    <TableCell className="hidden sm:table-cell">
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square rounded-md object-cover"
-                                          height="64"
-                                          src="/placeholder.svg"
-                                          width="64"
-                                       />
-                                    </TableCell>
-                                    <TableCell className="font-medium">
-                                       Gamer Gear Pro Controller
-                                    </TableCell>
-                                    <TableCell>
-                                       <Badge variant="outline">Active</Badge>
-                                    </TableCell>
-                                    <TableCell>$59.99</TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       75
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       2024-01-01 12:00 AM
-                                    </TableCell>
-                                    <TableCell>
-                                       <DropdownMenu>
-                                          <DropdownMenuTrigger asChild>
-                                             <Button
-                                                aria-haspopup="true"
-                                                size="icon"
-                                                variant="ghost"
-                                             >
-                                                <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
-                                             </Button>
-                                          </DropdownMenuTrigger>
-                                          <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
-                                          </DropdownMenuContent>
-                                       </DropdownMenu>
-                                    </TableCell>
-                                 </TableRow>
-                                 <TableRow>
-                                    <TableCell className="hidden sm:table-cell">
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square rounded-md object-cover"
-                                          height="64"
-                                          src="/placeholder.svg"
-                                          width="64"
-                                       />
-                                    </TableCell>
-                                    <TableCell className="font-medium">
-                                       Luminous VR Headset
-                                    </TableCell>
-                                    <TableCell>
-                                       <Badge variant="outline">Active</Badge>
-                                    </TableCell>
-                                    <TableCell>$199.99</TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       30
-                                    </TableCell>
-                                    <TableCell className="hidden md:table-cell">
-                                       2024-02-14 02:14 PM
-                                    </TableCell>
-                                    <TableCell>
-                                       <DropdownMenu>
-                                          <DropdownMenuTrigger asChild>
-                                             <Button
-                                                aria-haspopup="true"
-                                                size="icon"
-                                                variant="ghost"
-                                             >
-                                                <MoreHorizontal className="size-4" />
-                                                <span className="sr-only">Toggle menu</span>
-                                             </Button>
-                                          </DropdownMenuTrigger>
-                                          <DropdownMenuContent align="end">
-                                             <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                             <DropdownMenuItem>Edit</DropdownMenuItem>
-                                             <DropdownMenuItem>Delete</DropdownMenuItem>
-                                          </DropdownMenuContent>
-                                       </DropdownMenu>
-                                    </TableCell>
-                                 </TableRow>
-                              </TableBody>
-                           </Table>
-                        </CardContent>
-                        <CardFooter>
-                           <div className="text-muted-foreground text-xs">
-                              Showing
-                              {' '}
-                              <strong>1-10</strong>
-                              {' '}
-                              of
-                              <strong>32</strong>
-                              {' '}
-                              products
-                           </div>
-                        </CardFooter>
-                     </Card>
-                  </TabsContent>
-               </Tabs>
-            </main>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-07-chunk-0.tsx b/apps/web/registry/miami/block/dashboard-07-chunk-0.tsx
deleted file mode 100644
index 9fdf3d41..00000000
--- a/apps/web/registry/miami/block/dashboard-07-chunk-0.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import { Textarea } from '~/registry/miami/ui/textarea'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-07-chunk-0">
-         <CardHeader>
-            <CardTitle>Product Details</CardTitle>
-            <CardDescription>
-               Lipsum dolor sit amet, consectetur adipiscing elit
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-6">
-               <div className="grid gap-3">
-                  <Label htmlFor="name">Name</Label>
-                  <Input
-                     id="name"
-                     type="text"
-                     className="w-full"
-                     defaultValue="Gamer Gear Pro Controller"
-                  />
-               </div>
-               <div className="grid gap-3">
-                  <Label htmlFor="description">Description</Label>
-                  <Textarea
-                     id="description"
-                     defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
-                     className="min-h-32"
-                  />
-               </div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-07-chunk-1.tsx b/apps/web/registry/miami/block/dashboard-07-chunk-1.tsx
deleted file mode 100644
index 7c8d4e71..00000000
--- a/apps/web/registry/miami/block/dashboard-07-chunk-1.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-'use client'
-
-import { PlusCircle } from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/miami/ui/toggle-group'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-07-chunk-1">
-         <CardHeader>
-            <CardTitle>Stock</CardTitle>
-            <CardDescription>
-               Lipsum dolor sit amet, consectetur adipiscing elit
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <Table>
-               <TableHeader>
-                  <TableRow>
-                     <TableHead className="w-[100px]">SKU</TableHead>
-                     <TableHead>Stock</TableHead>
-                     <TableHead>Price</TableHead>
-                     <TableHead className="w-[100px]">Size</TableHead>
-                  </TableRow>
-               </TableHeader>
-               <TableBody>
-                  <TableRow>
-                     <TableCell className="font-semibold">GGPC-001</TableCell>
-                     <TableCell>
-                        <Label htmlFor="stock-1" className="sr-only">
-                           Stock
-                        </Label>
-                        <Input id="stock-1" type="number" defaultValue="100" />
-                     </TableCell>
-                     <TableCell>
-                        <Label htmlFor="price-1" className="sr-only">
-                           Price
-                        </Label>
-                        <Input id="price-1" type="number" defaultValue="99.99" />
-                     </TableCell>
-                     <TableCell>
-                        <ToggleGroup type="single" defaultValue="s" variant="outline">
-                           <ToggleGroupItem value="s">S</ToggleGroupItem>
-                           <ToggleGroupItem value="m">M</ToggleGroupItem>
-                           <ToggleGroupItem value="l">L</ToggleGroupItem>
-                        </ToggleGroup>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="font-semibold">GGPC-002</TableCell>
-                     <TableCell>
-                        <Label htmlFor="stock-2" className="sr-only">
-                           Stock
-                        </Label>
-                        <Input id="stock-2" type="number" defaultValue="143" />
-                     </TableCell>
-                     <TableCell>
-                        <Label htmlFor="price-2" className="sr-only">
-                           Price
-                        </Label>
-                        <Input id="price-2" type="number" defaultValue="99.99" />
-                     </TableCell>
-                     <TableCell>
-                        <ToggleGroup type="single" defaultValue="m" variant="outline">
-                           <ToggleGroupItem value="s">S</ToggleGroupItem>
-                           <ToggleGroupItem value="m">M</ToggleGroupItem>
-                           <ToggleGroupItem value="l">L</ToggleGroupItem>
-                        </ToggleGroup>
-                     </TableCell>
-                  </TableRow>
-                  <TableRow>
-                     <TableCell className="font-semibold">GGPC-003</TableCell>
-                     <TableCell>
-                        <Label htmlFor="stock-3" className="sr-only">
-                           Stock
-                        </Label>
-                        <Input id="stock-3" type="number" defaultValue="32" />
-                     </TableCell>
-                     <TableCell>
-                        <Label htmlFor="price-3" className="sr-only">
-                           Stock
-                        </Label>
-                        <Input id="price-3" type="number" defaultValue="99.99" />
-                     </TableCell>
-                     <TableCell>
-                        <ToggleGroup type="single" defaultValue="s" variant="outline">
-                           <ToggleGroupItem value="s">S</ToggleGroupItem>
-                           <ToggleGroupItem value="m">M</ToggleGroupItem>
-                           <ToggleGroupItem value="l">L</ToggleGroupItem>
-                        </ToggleGroup>
-                     </TableCell>
-                  </TableRow>
-               </TableBody>
-            </Table>
-         </CardContent>
-         <CardFooter className="justify-center border-t p-4">
-            <Button size="sm" variant="ghost" className="gap-1">
-               <PlusCircle className="size-3.5" />
-               Add Variant
-            </Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-07-chunk-2.tsx b/apps/web/registry/miami/block/dashboard-07-chunk-2.tsx
deleted file mode 100644
index 58eabd80..00000000
--- a/apps/web/registry/miami/block/dashboard-07-chunk-2.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client'
-
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-07-chunk-2">
-         <CardHeader>
-            <CardTitle>Product Category</CardTitle>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-6 sm:grid-cols-3">
-               <div className="grid gap-3">
-                  <Label htmlFor="category">Category</Label>
-                  <Select>
-                     <SelectTrigger id="category" aria-label="Select category">
-                        <SelectValue placeholder="Select category" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="clothing">Clothing</SelectItem>
-                        <SelectItem value="electronics">Electronics</SelectItem>
-                        <SelectItem value="accessories">Accessories</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-               <div className="grid gap-3">
-                  <Label htmlFor="subcategory">Subcategory (optional)</Label>
-                  <Select>
-                     <SelectTrigger id="subcategory" aria-label="Select subcategory">
-                        <SelectValue placeholder="Select subcategory" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="t-shirts">T-Shirts</SelectItem>
-                        <SelectItem value="hoodies">Hoodies</SelectItem>
-                        <SelectItem value="sweatshirts">Sweatshirts</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-07-chunk-3.tsx b/apps/web/registry/miami/block/dashboard-07-chunk-3.tsx
deleted file mode 100644
index 32b67221..00000000
--- a/apps/web/registry/miami/block/dashboard-07-chunk-3.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-07-chunk-3">
-         <CardHeader>
-            <CardTitle>Product Status</CardTitle>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-6">
-               <div className="grid gap-3">
-                  <Label htmlFor="status">Status</Label>
-                  <Select>
-                     <SelectTrigger id="status" aria-label="Select status">
-                        <SelectValue placeholder="Select status" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="draft">Draft</SelectItem>
-                        <SelectItem value="published">Active</SelectItem>
-                        <SelectItem value="archived">Archived</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-07-chunk-4.tsx b/apps/web/registry/miami/block/dashboard-07-chunk-4.tsx
deleted file mode 100644
index 1876eaf2..00000000
--- a/apps/web/registry/miami/block/dashboard-07-chunk-4.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-import { Upload } from 'lucide-react'
-
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-
-export default function Component() {
-   return (
-      <Card className="overflow-hidden" x-chunk="dashboard-07-chunk-4">
-         <CardHeader>
-            <CardTitle>Product Images</CardTitle>
-            <CardDescription>
-               Lipsum dolor sit amet, consectetur adipiscing elit
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-2">
-               <Image
-                  alt="Product image"
-                  className="aspect-square w-full rounded-md object-cover"
-                  height="300"
-                  src="/placeholder.svg"
-                  width="300"
-               />
-               <div className="grid grid-cols-3 gap-2">
-                  <button>
-                     <Image
-                        alt="Product image"
-                        className="aspect-square w-full rounded-md object-cover"
-                        height="84"
-                        src="/placeholder.svg"
-                        width="84"
-                     />
-                  </button>
-                  <button>
-                     <Image
-                        alt="Product image"
-                        className="aspect-square w-full rounded-md object-cover"
-                        height="84"
-                        src="/placeholder.svg"
-                        width="84"
-                     />
-                  </button>
-                  <button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
-                     <Upload className="text-muted-foreground size-4" />
-                     <span className="sr-only">Upload</span>
-                  </button>
-               </div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-07-chunk-5.tsx b/apps/web/registry/miami/block/dashboard-07-chunk-5.tsx
deleted file mode 100644
index 67203cfd..00000000
--- a/apps/web/registry/miami/block/dashboard-07-chunk-5.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-
-export default function Component() {
-   return (
-      <Card x-chunk="dashboard-07-chunk-5">
-         <CardHeader>
-            <CardTitle>Archive Product</CardTitle>
-            <CardDescription>
-               Lipsum dolor sit amet, consectetur adipiscing elit.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div></div>
-            <Button size="sm" variant="secondary">
-               Archive Product
-            </Button>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/dashboard-07.tsx b/apps/web/registry/miami/block/dashboard-07.tsx
deleted file mode 100644
index 986b0532..00000000
--- a/apps/web/registry/miami/block/dashboard-07.tsx
+++ /dev/null
@@ -1,610 +0,0 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import {
-   ChevronLeft,
-   Home,
-   LineChart,
-   Package,
-   Package2,
-   PanelLeft,
-   PlusCircle,
-   Search,
-   Settings,
-   ShoppingCart,
-   Upload,
-   Users2,
-} from 'lucide-react'
-
-import { Badge } from '~/registry/miami/ui/badge'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-import { Sheet, SheetContent, SheetTrigger } from '~/registry/miami/ui/sheet'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-import { Textarea } from '~/registry/miami/ui/textarea'
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/miami/ui/toggle-group'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-
-export const description
-  = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'
-
-export const iframeHeight = '1100px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Dashboard() {
-   return (
-      <div className="bg-muted/40 flex min-h-screen w-full flex-col">
-         <aside className="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
-            <nav className="flex flex-col items-center gap-4 px-2 py-4">
-               <Link
-                  href="#"
-                  className="bg-primary text-primary-foreground group flex size-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:size-8 md:text-base"
-               >
-                  <Package2 className="size-4 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-               </Link>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Home className="size-5" />
-                        <span className="sr-only">Dashboard</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Dashboard</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <ShoppingCart className="size-5" />
-                        <span className="sr-only">Orders</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Orders</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="bg-accent text-accent-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Package className="size-5" />
-                        <span className="sr-only">Products</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Products</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Users2 className="size-5" />
-                        <span className="sr-only">Customers</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Customers</TooltipContent>
-               </Tooltip>
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <LineChart className="size-5" />
-                        <span className="sr-only">Analytics</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Analytics</TooltipContent>
-               </Tooltip>
-            </nav>
-            <nav className="mt-auto flex flex-col items-center gap-4 px-2 py-4">
-               <Tooltip>
-                  <TooltipTrigger asChild>
-                     <Link
-                        href="#"
-                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
-                     >
-                        <Settings className="size-5" />
-                        <span className="sr-only">Settings</span>
-                     </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">Settings</TooltipContent>
-               </Tooltip>
-            </nav>
-         </aside>
-         <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-            <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-               <Sheet>
-                  <SheetTrigger asChild>
-                     <Button size="icon" variant="outline" className="sm:hidden">
-                        <PanelLeft className="size-5" />
-                        <span className="sr-only">Toggle Menu</span>
-                     </Button>
-                  </SheetTrigger>
-                  <SheetContent side="left" className="sm:max-w-xs">
-                     <nav className="grid gap-6 text-lg font-medium">
-                        <Link
-                           href="#"
-                           className="bg-primary text-primary-foreground group flex size-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base"
-                        >
-                           <Package2 className="size-5 transition-all group-hover:scale-110" />
-                           <span className="sr-only">Acme Inc</span>
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Home className="size-5" />
-                           Dashboard
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <ShoppingCart className="size-5" />
-                           Orders
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Package className="size-5" />
-                           Products
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <Users2 className="size-5" />
-                           Customers
-                        </Link>
-                        <Link
-                           href="#"
-                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
-                        >
-                           <LineChart className="size-5" />
-                           Settings
-                        </Link>
-                     </nav>
-                  </SheetContent>
-               </Sheet>
-               <Breadcrumb className="hidden md:flex">
-                  <BreadcrumbList>
-                     <BreadcrumbItem>
-                        <BreadcrumbLink asChild>
-                           <Link href="#">Dashboard</Link>
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator />
-                     <BreadcrumbItem>
-                        <BreadcrumbLink asChild>
-                           <Link href="#">Products</Link>
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Edit Product</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-               <div className="relative ml-auto flex-1 md:grow-0">
-                  <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-                  <Input
-                     type="search"
-                     placeholder="Search..."
-                     className="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[320px]"
-                  />
-               </div>
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="overflow-hidden rounded-full"
-                     >
-                        <Image
-                           src="/placeholder-user.jpg"
-                           width={36}
-                           height={36}
-                           alt="Avatar"
-                           className="overflow-hidden rounded-full"
-                        />
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Settings</DropdownMenuItem>
-                     <DropdownMenuItem>Support</DropdownMenuItem>
-                     <DropdownMenuSeparator />
-                     <DropdownMenuItem>Logout</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </header>
-            <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
-               <div className="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
-                  <div className="flex items-center gap-4">
-                     <Button variant="outline" size="icon" className="size-7">
-                        <ChevronLeft className="size-4" />
-                        <span className="sr-only">Back</span>
-                     </Button>
-                     <h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
-                        Pro Controller
-                     </h1>
-                     <Badge variant="outline" className="ml-auto sm:ml-0">
-                        In stock
-                     </Badge>
-                     <div className="hidden items-center gap-2 md:ml-auto md:flex">
-                        <Button variant="outline" size="sm">
-                           Discard
-                        </Button>
-                        <Button size="sm">Save Product</Button>
-                     </div>
-                  </div>
-                  <div className="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
-                     <div className="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
-                        <Card x-chunk="A card with a form to edit the product details">
-                           <CardHeader>
-                              <CardTitle>Product Details</CardTitle>
-                              <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit
-                              </CardDescription>
-                           </CardHeader>
-                           <CardContent>
-                              <div className="grid gap-6">
-                                 <div className="grid gap-3">
-                                    <Label htmlFor="name">Name</Label>
-                                    <Input
-                                       id="name"
-                                       type="text"
-                                       className="w-full"
-                                       defaultValue="Gamer Gear Pro Controller"
-                                    />
-                                 </div>
-                                 <div className="grid gap-3">
-                                    <Label htmlFor="description">Description</Label>
-                                    <Textarea
-                                       id="description"
-                                       defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
-                                       className="min-h-32"
-                                    />
-                                 </div>
-                              </div>
-                           </CardContent>
-                        </Card>
-                        <Card x-chunk="A card with a form to edit the product stock and variants">
-                           <CardHeader>
-                              <CardTitle>Stock</CardTitle>
-                              <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit
-                              </CardDescription>
-                           </CardHeader>
-                           <CardContent>
-                              <Table>
-                                 <TableHeader>
-                                    <TableRow>
-                                       <TableHead className="w-[100px]">SKU</TableHead>
-                                       <TableHead>Stock</TableHead>
-                                       <TableHead>Price</TableHead>
-                                       <TableHead className="w-[100px]">Size</TableHead>
-                                    </TableRow>
-                                 </TableHeader>
-                                 <TableBody>
-                                    <TableRow>
-                                       <TableCell className="font-semibold">
-                                          GGPC-001
-                                       </TableCell>
-                                       <TableCell>
-                                          <Label htmlFor="stock-1" className="sr-only">
-                                             Stock
-                                          </Label>
-                                          <Input
-                                             id="stock-1"
-                                             type="number"
-                                             defaultValue="100"
-                                          />
-                                       </TableCell>
-                                       <TableCell>
-                                          <Label htmlFor="price-1" className="sr-only">
-                                             Price
-                                          </Label>
-                                          <Input
-                                             id="price-1"
-                                             type="number"
-                                             defaultValue="99.99"
-                                          />
-                                       </TableCell>
-                                       <TableCell>
-                                          <ToggleGroup
-                                             type="single"
-                                             defaultValue="s"
-                                             variant="outline"
-                                          >
-                                             <ToggleGroupItem value="s">S</ToggleGroupItem>
-                                             <ToggleGroupItem value="m">M</ToggleGroupItem>
-                                             <ToggleGroupItem value="l">L</ToggleGroupItem>
-                                          </ToggleGroup>
-                                       </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell className="font-semibold">
-                                          GGPC-002
-                                       </TableCell>
-                                       <TableCell>
-                                          <Label htmlFor="stock-2" className="sr-only">
-                                             Stock
-                                          </Label>
-                                          <Input
-                                             id="stock-2"
-                                             type="number"
-                                             defaultValue="143"
-                                          />
-                                       </TableCell>
-                                       <TableCell>
-                                          <Label htmlFor="price-2" className="sr-only">
-                                             Price
-                                          </Label>
-                                          <Input
-                                             id="price-2"
-                                             type="number"
-                                             defaultValue="99.99"
-                                          />
-                                       </TableCell>
-                                       <TableCell>
-                                          <ToggleGroup
-                                             type="single"
-                                             defaultValue="m"
-                                             variant="outline"
-                                          >
-                                             <ToggleGroupItem value="s">S</ToggleGroupItem>
-                                             <ToggleGroupItem value="m">M</ToggleGroupItem>
-                                             <ToggleGroupItem value="l">L</ToggleGroupItem>
-                                          </ToggleGroup>
-                                       </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                       <TableCell className="font-semibold">
-                                          GGPC-003
-                                       </TableCell>
-                                       <TableCell>
-                                          <Label htmlFor="stock-3" className="sr-only">
-                                             Stock
-                                          </Label>
-                                          <Input
-                                             id="stock-3"
-                                             type="number"
-                                             defaultValue="32"
-                                          />
-                                       </TableCell>
-                                       <TableCell>
-                                          <Label htmlFor="price-3" className="sr-only">
-                                             Stock
-                                          </Label>
-                                          <Input
-                                             id="price-3"
-                                             type="number"
-                                             defaultValue="99.99"
-                                          />
-                                       </TableCell>
-                                       <TableCell>
-                                          <ToggleGroup
-                                             type="single"
-                                             defaultValue="s"
-                                             variant="outline"
-                                          >
-                                             <ToggleGroupItem value="s">S</ToggleGroupItem>
-                                             <ToggleGroupItem value="m">M</ToggleGroupItem>
-                                             <ToggleGroupItem value="l">L</ToggleGroupItem>
-                                          </ToggleGroup>
-                                       </TableCell>
-                                    </TableRow>
-                                 </TableBody>
-                              </Table>
-                           </CardContent>
-                           <CardFooter className="justify-center border-t p-4">
-                              <Button size="sm" variant="ghost" className="gap-1">
-                                 <PlusCircle className="size-3.5" />
-                                 Add Variant
-                              </Button>
-                           </CardFooter>
-                        </Card>
-                        <Card x-chunk="A card with a form to edit the product category and subcategory">
-                           <CardHeader>
-                              <CardTitle>Product Category</CardTitle>
-                           </CardHeader>
-                           <CardContent>
-                              <div className="grid gap-6 sm:grid-cols-3">
-                                 <div className="grid gap-3">
-                                    <Label htmlFor="category">Category</Label>
-                                    <Select>
-                                       <SelectTrigger
-                                          id="category"
-                                          aria-label="Select category"
-                                       >
-                                          <SelectValue placeholder="Select category" />
-                                       </SelectTrigger>
-                                       <SelectContent>
-                                          <SelectItem value="clothing">Clothing</SelectItem>
-                                          <SelectItem value="electronics">
-                                             Electronics
-                                          </SelectItem>
-                                          <SelectItem value="accessories">
-                                             Accessories
-                                          </SelectItem>
-                                       </SelectContent>
-                                    </Select>
-                                 </div>
-                                 <div className="grid gap-3">
-                                    <Label htmlFor="subcategory">
-                                       Subcategory (optional)
-                                    </Label>
-                                    <Select>
-                                       <SelectTrigger
-                                          id="subcategory"
-                                          aria-label="Select subcategory"
-                                       >
-                                          <SelectValue placeholder="Select subcategory" />
-                                       </SelectTrigger>
-                                       <SelectContent>
-                                          <SelectItem value="t-shirts">T-Shirts</SelectItem>
-                                          <SelectItem value="hoodies">Hoodies</SelectItem>
-                                          <SelectItem value="sweatshirts">
-                                             Sweatshirts
-                                          </SelectItem>
-                                       </SelectContent>
-                                    </Select>
-                                 </div>
-                              </div>
-                           </CardContent>
-                        </Card>
-                     </div>
-                     <div className="grid auto-rows-max items-start gap-4 lg:gap-8">
-                        <Card x-chunk="A card with a form to edit the product status">
-                           <CardHeader>
-                              <CardTitle>Product Status</CardTitle>
-                           </CardHeader>
-                           <CardContent>
-                              <div className="grid gap-6">
-                                 <div className="grid gap-3">
-                                    <Label htmlFor="status">Status</Label>
-                                    <Select>
-                                       <SelectTrigger id="status" aria-label="Select status">
-                                          <SelectValue placeholder="Select status" />
-                                       </SelectTrigger>
-                                       <SelectContent>
-                                          <SelectItem value="draft">Draft</SelectItem>
-                                          <SelectItem value="published">Active</SelectItem>
-                                          <SelectItem value="archived">Archived</SelectItem>
-                                       </SelectContent>
-                                    </Select>
-                                 </div>
-                              </div>
-                           </CardContent>
-                        </Card>
-                        <Card
-                           className="overflow-hidden"
-                           x-chunk="A card with a form to upload product images"
-                        >
-                           <CardHeader>
-                              <CardTitle>Product Images</CardTitle>
-                              <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit
-                              </CardDescription>
-                           </CardHeader>
-                           <CardContent>
-                              <div className="grid gap-2">
-                                 <Image
-                                    alt="Product image"
-                                    className="aspect-square w-full rounded-md object-cover"
-                                    height="300"
-                                    src="/placeholder.svg"
-                                    width="300"
-                                 />
-                                 <div className="grid grid-cols-3 gap-2">
-                                    <button>
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square w-full rounded-md object-cover"
-                                          height="84"
-                                          src="/placeholder.svg"
-                                          width="84"
-                                       />
-                                    </button>
-                                    <button>
-                                       <Image
-                                          alt="Product image"
-                                          className="aspect-square w-full rounded-md object-cover"
-                                          height="84"
-                                          src="/placeholder.svg"
-                                          width="84"
-                                       />
-                                    </button>
-                                    <button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
-                                       <Upload className="text-muted-foreground size-4" />
-                                       <span className="sr-only">Upload</span>
-                                    </button>
-                                 </div>
-                              </div>
-                           </CardContent>
-                        </Card>
-                        <Card x-chunk="A card with a call to action to archive the product">
-                           <CardHeader>
-                              <CardTitle>Archive Product</CardTitle>
-                              <CardDescription>
-                                 Lipsum dolor sit amet, consectetur adipiscing elit.
-                              </CardDescription>
-                           </CardHeader>
-                           <CardContent>
-                              <div></div>
-                              <Button size="sm" variant="secondary">
-                                 Archive Product
-                              </Button>
-                           </CardContent>
-                        </Card>
-                     </div>
-                  </div>
-                  <div className="flex items-center justify-center gap-2 md:hidden">
-                     <Button variant="outline" size="sm">
-                        Discard
-                     </Button>
-                     <Button size="sm">Save Product</Button>
-                  </div>
-               </div>
-            </main>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar-controlled.tsx b/apps/web/registry/miami/block/demo-sidebar-controlled.tsx
deleted file mode 100644
index 571f7e18..00000000
--- a/apps/web/registry/miami/block/demo-sidebar-controlled.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   Frame,
-   LifeBuoy,
-   Map,
-   PanelLeftClose,
-   PanelLeftOpen,
-   PieChart,
-   Send,
-} from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarInset,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
-
-const projects = [
-   {
-      name: 'Design Engineering',
-      url: '#',
-      icon: Frame,
-   },
-   {
-      name: 'Sales & Marketing',
-      url: '#',
-      icon: PieChart,
-   },
-   {
-      name: 'Travel',
-      url: '#',
-      icon: Map,
-   },
-   {
-      name: 'Support',
-      url: '#',
-      icon: LifeBuoy,
-   },
-   {
-      name: 'Feedback',
-      url: '#',
-      icon: Send,
-   },
-]
-
-export default function AppSidebar() {
-   const [open, setOpen] = React.useState(true)
-
-   return (
-      <SidebarProvider open={open} onOpenChange={setOpen}>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {projects.map(project => (
-                           <SidebarMenuItem key={project.name}>
-                              <SidebarMenuButton asChild>
-                                 <a href={project.url}>
-                                    <project.icon />
-                                    <span>{project.name}</span>
-                                 </a>
-                              </SidebarMenuButton>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-         <SidebarInset>
-            <header className="flex h-12 items-center justify-between px-4">
-               <Button
-                  onClick={() => setOpen(open => !open)}
-                  size="sm"
-                  variant="ghost"
-               >
-                  {open ? <PanelLeftClose /> : <PanelLeftOpen />}
-                  <span>
-                     {open ? 'Close' : 'Open'}
-                     {' '}
-                     Sidebar
-                  </span>
-               </Button>
-            </header>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar-footer.tsx b/apps/web/registry/miami/block/demo-sidebar-footer.tsx
deleted file mode 100644
index b7d56101..00000000
--- a/apps/web/registry/miami/block/demo-sidebar-footer.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-'use client'
-
-import { ChevronDown, ChevronUp, User2 } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarInset,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarHeader />
-            <SidebarContent />
-            <SidebarFooter>
-               <SidebarMenu>
-                  <SidebarMenuItem>
-                     <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                           <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                              Username
-                              <ChevronUp className="ml-auto" />
-                           </SidebarMenuButton>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent
-                           side="top"
-                           className="w-[--radix-popper-anchor-width]"
-                        >
-                           <DropdownMenuItem>
-                              <span>Account</span>
-                           </DropdownMenuItem>
-                           <DropdownMenuItem>
-                              <span>Billing</span>
-                           </DropdownMenuItem>
-                           <DropdownMenuItem>
-                              <span>Sign out</span>
-                           </DropdownMenuItem>
-                        </DropdownMenuContent>
-                     </DropdownMenu>
-                  </SidebarMenuItem>
-               </SidebarMenu>
-            </SidebarFooter>
-         </Sidebar>
-         <SidebarInset>
-            <header className="flex h-12 items-center justify-between px-4">
-               <SidebarTrigger />
-            </header>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar-group-action.tsx b/apps/web/registry/miami/block/demo-sidebar-group-action.tsx
deleted file mode 100644
index 3b299f62..00000000
--- a/apps/web/registry/miami/block/demo-sidebar-group-action.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client'
-
-import {
-   ChevronDown,
-   Frame,
-   LifeBuoy,
-   Map,
-   PieChart,
-   Plus,
-   Send,
-} from 'lucide-react'
-import { Toaster, toast } from 'sonner'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupAction,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Toaster
-            position="bottom-left"
-            toastOptions={{
-               className: 'ml-[160px]',
-            }}
-         />
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
-                  <SidebarGroupAction
-                     title="Add Project"
-                     onClick={() => toast('You clicked the group action!')}
-                  >
-                     <Plus />
-                     {' '}
-                     <span className="sr-only">Add Project</span>
-                  </SidebarGroupAction>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        <SidebarMenuItem>
-                           <SidebarMenuButton asChild>
-                              <a href="#">
-                                 <Frame />
-                                 <span>Design Engineering</span>
-                              </a>
-                           </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem>
-                           <SidebarMenuButton asChild>
-                              <a href="#">
-                                 <PieChart />
-                                 <span>Sales & Marketing</span>
-                              </a>
-                           </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem>
-                           <SidebarMenuButton asChild>
-                              <a href="#">
-                                 <Map />
-                                 <span>Travel</span>
-                              </a>
-                           </SidebarMenuButton>
-                        </SidebarMenuItem>
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar-group-collapsible.tsx b/apps/web/registry/miami/block/demo-sidebar-group-collapsible.tsx
deleted file mode 100644
index 56fbdec6..00000000
--- a/apps/web/registry/miami/block/demo-sidebar-group-collapsible.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'use client'
-
-import { ChevronDown, LifeBuoy, Send } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <Collapsible defaultOpen className="group/collapsible">
-                  <SidebarGroup>
-                     <SidebarGroupLabel
-                        asChild
-                        className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
-                     >
-                        <CollapsibleTrigger>
-                           Help
-                           <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
-                        </CollapsibleTrigger>
-                     </SidebarGroupLabel>
-                     <CollapsibleContent>
-                        <SidebarGroupContent>
-                           <SidebarMenu>
-                              <SidebarMenuItem>
-                                 <SidebarMenuButton>
-                                    <LifeBuoy />
-                                    Support
-                                 </SidebarMenuButton>
-                              </SidebarMenuItem>
-                              <SidebarMenuItem>
-                                 <SidebarMenuButton>
-                                    <Send />
-                                    Feedback
-                                 </SidebarMenuButton>
-                              </SidebarMenuItem>
-                           </SidebarMenu>
-                        </SidebarGroupContent>
-                     </CollapsibleContent>
-                  </SidebarGroup>
-               </Collapsible>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar-group.tsx b/apps/web/registry/miami/block/demo-sidebar-group.tsx
deleted file mode 100644
index 1b4343f4..00000000
--- a/apps/web/registry/miami/block/demo-sidebar-group.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client'
-
-import { LifeBuoy, Send } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Help</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        <SidebarMenuItem>
-                           <SidebarMenuButton>
-                              <LifeBuoy />
-                              Support
-                           </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem>
-                           <SidebarMenuButton>
-                              <Send />
-                              Feedback
-                           </SidebarMenuButton>
-                        </SidebarMenuItem>
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar-header.tsx b/apps/web/registry/miami/block/demo-sidebar-header.tsx
deleted file mode 100644
index aebe08af..00000000
--- a/apps/web/registry/miami/block/demo-sidebar-header.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client'
-
-import { ChevronDown } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   Sidebar,
-   SidebarHeader,
-   SidebarInset,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarHeader>
-               <SidebarMenu>
-                  <SidebarMenuItem>
-                     <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                           <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                              Select Workspace
-                              <ChevronDown className="ml-auto" />
-                           </SidebarMenuButton>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent className="w-[--radix-popper-anchor-width]">
-                           <DropdownMenuItem>
-                              <span>Acme Inc</span>
-                           </DropdownMenuItem>
-                           <DropdownMenuItem>
-                              <span>Acme Corp.</span>
-                           </DropdownMenuItem>
-                        </DropdownMenuContent>
-                     </DropdownMenu>
-                  </SidebarMenuItem>
-               </SidebarMenu>
-            </SidebarHeader>
-         </Sidebar>
-         <SidebarInset>
-            <header className="flex h-12 items-center justify-between px-4">
-               <SidebarTrigger />
-            </header>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar-menu-action.tsx b/apps/web/registry/miami/block/demo-sidebar-menu-action.tsx
deleted file mode 100644
index 80efff17..00000000
--- a/apps/web/registry/miami/block/demo-sidebar-menu-action.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-'use client'
-
-import {
-   Frame,
-   LifeBuoy,
-   Map,
-   MoreHorizontal,
-   PieChart,
-   Send,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
-
-const projects = [
-   {
-      name: 'Design Engineering',
-      url: '#',
-      icon: Frame,
-   },
-   {
-      name: 'Sales & Marketing',
-      url: '#',
-      icon: PieChart,
-   },
-   {
-      name: 'Travel',
-      url: '#',
-      icon: Map,
-   },
-   {
-      name: 'Support',
-      url: '#',
-      icon: LifeBuoy,
-   },
-   {
-      name: 'Feedback',
-      url: '#',
-      icon: Send,
-   },
-]
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {projects.map((project, index) => (
-                           <SidebarMenuItem key={project.name}>
-                              <SidebarMenuButton
-                                 asChild
-                                 className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
-                              >
-                                 <a href={project.url}>
-                                    <project.icon />
-                                    <span>{project.name}</span>
-                                 </a>
-                              </SidebarMenuButton>
-                              <DropdownMenu>
-                                 <DropdownMenuTrigger asChild>
-                                    <SidebarMenuAction>
-                                       <MoreHorizontal />
-                                       <span className="sr-only">More</span>
-                                    </SidebarMenuAction>
-                                 </DropdownMenuTrigger>
-                                 <DropdownMenuContent side="right" align="start">
-                                    <DropdownMenuItem>
-                                       <span>Edit Project</span>
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem>
-                                       <span>Delete Project</span>
-                                    </DropdownMenuItem>
-                                 </DropdownMenuContent>
-                              </DropdownMenu>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar-menu-badge.tsx b/apps/web/registry/miami/block/demo-sidebar-menu-badge.tsx
deleted file mode 100644
index 4089d4d7..00000000
--- a/apps/web/registry/miami/block/demo-sidebar-menu-badge.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client'
-
-import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuBadge,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
-
-const projects = [
-   {
-      name: 'Design Engineering',
-      url: '#',
-      icon: Frame,
-      badge: '24',
-   },
-   {
-      name: 'Sales & Marketing',
-      url: '#',
-      icon: PieChart,
-      badge: '12',
-   },
-   {
-      name: 'Travel',
-      url: '#',
-      icon: Map,
-      badge: '3',
-   },
-   {
-      name: 'Support',
-      url: '#',
-      icon: LifeBuoy,
-      badge: '21',
-   },
-   {
-      name: 'Feedback',
-      url: '#',
-      icon: Send,
-      badge: '8',
-   },
-]
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {projects.map(project => (
-                           <SidebarMenuItem key={project.name}>
-                              <SidebarMenuButton
-                                 asChild
-                                 className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
-                              >
-                                 <a href={project.url}>
-                                    <project.icon />
-                                    <span>{project.name}</span>
-                                 </a>
-                              </SidebarMenuButton>
-                              <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar-menu-collapsible.tsx b/apps/web/registry/miami/block/demo-sidebar-menu-collapsible.tsx
deleted file mode 100644
index a24e3844..00000000
--- a/apps/web/registry/miami/block/demo-sidebar-menu-collapsible.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-'use client'
-
-import { ChevronRight } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-   SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
-
-const items = [
-   {
-      title: 'Getting Started',
-      url: '#',
-      items: [
-         {
-            title: 'Installation',
-            url: '#',
-         },
-         {
-            title: 'Project Structure',
-            url: '#',
-         },
-      ],
-   },
-   {
-      title: 'Building Your Application',
-      url: '#',
-      items: [
-         {
-            title: 'Routing',
-            url: '#',
-         },
-         {
-            title: 'Data Fetching',
-            url: '#',
-            isActive: true,
-         },
-         {
-            title: 'Rendering',
-            url: '#',
-         },
-         {
-            title: 'Caching',
-            url: '#',
-         },
-         {
-            title: 'Styling',
-            url: '#',
-         },
-         {
-            title: 'Optimizing',
-            url: '#',
-         },
-         {
-            title: 'Configuring',
-            url: '#',
-         },
-         {
-            title: 'Testing',
-            url: '#',
-         },
-         {
-            title: 'Authentication',
-            url: '#',
-         },
-         {
-            title: 'Deploying',
-            url: '#',
-         },
-         {
-            title: 'Upgrading',
-            url: '#',
-         },
-         {
-            title: 'Examples',
-            url: '#',
-         },
-      ],
-   },
-   {
-      title: 'API Reference',
-      url: '#',
-      items: [
-         {
-            title: 'Components',
-            url: '#',
-         },
-         {
-            title: 'File Conventions',
-            url: '#',
-         },
-         {
-            title: 'Functions',
-            url: '#',
-         },
-         {
-            title: 'next.config.js Options',
-            url: '#',
-         },
-         {
-            title: 'CLI',
-            url: '#',
-         },
-         {
-            title: 'Edge Runtime',
-            url: '#',
-         },
-      ],
-   },
-   {
-      title: 'Architecture',
-      url: '#',
-      items: [
-         {
-            title: 'Accessibility',
-            url: '#',
-         },
-         {
-            title: 'Fast Refresh',
-            url: '#',
-         },
-         {
-            title: 'Next.js Compiler',
-            url: '#',
-         },
-         {
-            title: 'Supported Browsers',
-            url: '#',
-         },
-         {
-            title: 'Turbopack',
-            url: '#',
-         },
-      ],
-   },
-]
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {items.map((item, index) => (
-                           <Collapsible
-                              key={index}
-                              className="group/collapsible"
-                              defaultOpen={index === 0}
-                           >
-                              <SidebarMenuItem>
-                                 <CollapsibleTrigger asChild>
-                                    <SidebarMenuButton>
-                                       <span>{item.title}</span>
-                                       <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-                                    </SidebarMenuButton>
-                                 </CollapsibleTrigger>
-                                 <CollapsibleContent>
-                                    <SidebarMenuSub>
-                                       {item.items.map((subItem, subIndex) => (
-                                          <SidebarMenuSubItem key={subIndex}>
-                                             <SidebarMenuSubButton asChild>
-                                                <a href={subItem.url}>
-                                                   <span>{subItem.title}</span>
-                                                </a>
-                                             </SidebarMenuSubButton>
-                                          </SidebarMenuSubItem>
-                                       ))}
-                                    </SidebarMenuSub>
-                                 </CollapsibleContent>
-                              </SidebarMenuItem>
-                           </Collapsible>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar-menu-sub.tsx b/apps/web/registry/miami/block/demo-sidebar-menu-sub.tsx
deleted file mode 100644
index 0c34069b..00000000
--- a/apps/web/registry/miami/block/demo-sidebar-menu-sub.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-'use client'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-   SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
-
-const items = [
-   {
-      title: 'Getting Started',
-      url: '#',
-      items: [
-         {
-            title: 'Installation',
-            url: '#',
-         },
-         {
-            title: 'Project Structure',
-            url: '#',
-         },
-      ],
-   },
-   {
-      title: 'Building Your Application',
-      url: '#',
-      items: [
-         {
-            title: 'Routing',
-            url: '#',
-         },
-         {
-            title: 'Data Fetching',
-            url: '#',
-            isActive: true,
-         },
-         {
-            title: 'Rendering',
-            url: '#',
-         },
-         {
-            title: 'Caching',
-            url: '#',
-         },
-         {
-            title: 'Styling',
-            url: '#',
-         },
-         {
-            title: 'Optimizing',
-            url: '#',
-         },
-         {
-            title: 'Configuring',
-            url: '#',
-         },
-         {
-            title: 'Testing',
-            url: '#',
-         },
-         {
-            title: 'Authentication',
-            url: '#',
-         },
-         {
-            title: 'Deploying',
-            url: '#',
-         },
-         {
-            title: 'Upgrading',
-            url: '#',
-         },
-         {
-            title: 'Examples',
-            url: '#',
-         },
-      ],
-   },
-   {
-      title: 'API Reference',
-      url: '#',
-      items: [
-         {
-            title: 'Components',
-            url: '#',
-         },
-         {
-            title: 'File Conventions',
-            url: '#',
-         },
-         {
-            title: 'Functions',
-            url: '#',
-         },
-         {
-            title: 'next.config.js Options',
-            url: '#',
-         },
-         {
-            title: 'CLI',
-            url: '#',
-         },
-         {
-            title: 'Edge Runtime',
-            url: '#',
-         },
-      ],
-   },
-   {
-      title: 'Architecture',
-      url: '#',
-      items: [
-         {
-            title: 'Accessibility',
-            url: '#',
-         },
-         {
-            title: 'Fast Refresh',
-            url: '#',
-         },
-         {
-            title: 'Next.js Compiler',
-            url: '#',
-         },
-         {
-            title: 'Supported Browsers',
-            url: '#',
-         },
-         {
-            title: 'Turbopack',
-            url: '#',
-         },
-      ],
-   },
-]
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {items.map((item, index) => (
-                           <SidebarMenuItem key={index}>
-                              <SidebarMenuButton asChild>
-                                 <a href={item.url}>
-                                    <span>{item.title}</span>
-                                 </a>
-                              </SidebarMenuButton>
-                              <SidebarMenuSub>
-                                 {item.items.map((subItem, subIndex) => (
-                                    <SidebarMenuSubItem key={subIndex}>
-                                       <SidebarMenuSubButton asChild>
-                                          <a href={subItem.url}>
-                                             <span>{subItem.title}</span>
-                                          </a>
-                                       </SidebarMenuSubButton>
-                                    </SidebarMenuSubItem>
-                                 ))}
-                              </SidebarMenuSub>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar-menu.tsx b/apps/web/registry/miami/block/demo-sidebar-menu.tsx
deleted file mode 100644
index 4a49fe89..00000000
--- a/apps/web/registry/miami/block/demo-sidebar-menu.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-'use client'
-
-import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
-
-const projects = [
-   {
-      name: 'Design Engineering',
-      url: '#',
-      icon: Frame,
-   },
-   {
-      name: 'Sales & Marketing',
-      url: '#',
-      icon: PieChart,
-   },
-   {
-      name: 'Travel',
-      url: '#',
-      icon: Map,
-   },
-   {
-      name: 'Support',
-      url: '#',
-      icon: LifeBuoy,
-   },
-   {
-      name: 'Feedback',
-      url: '#',
-      icon: Send,
-   },
-]
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {projects.map(project => (
-                           <SidebarMenuItem key={project.name}>
-                              <SidebarMenuButton asChild>
-                                 <a href={project.url}>
-                                    <project.icon />
-                                    <span>{project.name}</span>
-                                 </a>
-                              </SidebarMenuButton>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar-rsc.tsx b/apps/web/registry/miami/block/demo-sidebar-rsc.tsx
deleted file mode 100644
index ff8ae417..00000000
--- a/apps/web/registry/miami/block/demo-sidebar-rsc.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as React from 'react'
-import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSkeleton,
-   SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
-
-const projects = [
-   {
-      name: 'Design Engineering',
-      url: '#',
-      icon: Frame,
-      badge: '24',
-   },
-   {
-      name: 'Sales & Marketing',
-      url: '#',
-      icon: PieChart,
-      badge: '12',
-   },
-   {
-      name: 'Travel',
-      url: '#',
-      icon: Map,
-      badge: '3',
-   },
-   {
-      name: 'Support',
-      url: '#',
-      icon: LifeBuoy,
-      badge: '21',
-   },
-   {
-      name: 'Feedback',
-      url: '#',
-      icon: Send,
-      badge: '8',
-   },
-]
-
-// Dummy fetch function
-async function fetchProjects() {
-   await new Promise(resolve => setTimeout(resolve, 3000))
-   return projects
-}
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <React.Suspense fallback={<NavProjectsSkeleton />}>
-                        <NavProjects />
-                     </React.Suspense>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </SidebarProvider>
-   )
-}
-
-function NavProjectsSkeleton() {
-   return (
-      <SidebarMenu>
-         {Array.from({ length: 5 }).map((_, index) => (
-            <SidebarMenuItem key={index}>
-               <SidebarMenuSkeleton showIcon />
-            </SidebarMenuItem>
-         ))}
-      </SidebarMenu>
-   )
-}
-
-async function NavProjects() {
-   const projects = await fetchProjects()
-
-   return (
-      <SidebarMenu>
-         {projects.map(project => (
-            <SidebarMenuItem key={project.name}>
-               <SidebarMenuButton asChild>
-                  <a href={project.url}>
-                     <project.icon />
-                     <span>{project.name}</span>
-                  </a>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         ))}
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/demo-sidebar.tsx b/apps/web/registry/miami/block/demo-sidebar.tsx
deleted file mode 100644
index 3ddca004..00000000
--- a/apps/web/registry/miami/block/demo-sidebar.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-
-import { Calendar, Home, Inbox, Search, Settings } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarInset,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-// Menu items.
-const items = [
-   {
-      title: 'Home',
-      url: '#',
-      icon: Home,
-   },
-   {
-      title: 'Inbox',
-      url: '#',
-      icon: Inbox,
-   },
-   {
-      title: 'Calendar',
-      url: '#',
-      icon: Calendar,
-   },
-   {
-      title: 'Search',
-      url: '#',
-      icon: Search,
-   },
-   {
-      title: 'Settings',
-      url: '#',
-      icon: Settings,
-   },
-]
-
-export default function AppSidebar() {
-   return (
-      <SidebarProvider>
-         <Sidebar>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupLabel>Application</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {items.map(item => (
-                           <SidebarMenuItem key={item.title}>
-                              <SidebarMenuButton asChild>
-                                 <a href={item.url}>
-                                    <item.icon />
-                                    <span>{item.title}</span>
-                                 </a>
-                              </SidebarMenuButton>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-         <SidebarInset>
-            <header className="flex h-12 items-center justify-between px-4">
-               <SidebarTrigger />
-            </header>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/login-01/components/login-form.tsx b/apps/web/registry/miami/block/login-01/components/login-form.tsx
deleted file mode 100644
index eb05a08f..00000000
--- a/apps/web/registry/miami/block/login-01/components/login-form.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import Link from 'next/link'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export function LoginForm() {
-   return (
-      <Card className="mx-auto max-w-sm">
-         <CardHeader>
-            <CardTitle className="text-2xl">Login</CardTitle>
-            <CardDescription>
-               Enter your email below to login to your account
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="grid gap-4">
-               <div className="grid gap-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                     id="email"
-                     type="email"
-                     placeholder="m@example.com"
-                     required
-                  />
-               </div>
-               <div className="grid gap-2">
-                  <div className="flex items-center">
-                     <Label htmlFor="password">Password</Label>
-                     <Link href="#" className="ml-auto inline-block text-sm underline">
-                        Forgot your password?
-                     </Link>
-                  </div>
-                  <Input id="password" type="password" required />
-               </div>
-               <Button type="submit" className="w-full">
-                  Login
-               </Button>
-               <Button variant="outline" className="w-full">
-                  Login with Google
-               </Button>
-            </div>
-            <div className="mt-4 text-center text-sm">
-               Don&apos;t have an account?
-               {' '}
-               <Link href="#" className="underline">
-                  Sign up
-               </Link>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/login-01/page.tsx b/apps/web/registry/miami/block/login-01/page.tsx
deleted file mode 100644
index 82f8c2ac..00000000
--- a/apps/web/registry/miami/block/login-01/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { LoginForm } from '~/registry/miami/block/login-01/components/login-form'
-
-export const description = 'A simple login form.'
-
-export const iframeHeight = '870px'
-
-export const containerClassName = 'w-full h-full'
-
-export default function Page() {
-   return (
-      <div className="flex h-screen w-full items-center justify-center px-4">
-         <LoginForm />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-01/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-01/components/app-sidebar.tsx
deleted file mode 100644
index 0e25fe85..00000000
--- a/apps/web/registry/miami/block/sidebar-01/components/app-sidebar.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import * as React from 'react'
-
-import { SearchForm } from '~/registry/miami/block/sidebar-01/components/search-form'
-import { VersionSwitcher } from '~/registry/miami/block/sidebar-01/components/version-switcher'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarRail,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarHeader>
-            <VersionSwitcher
-               versions={data.versions}
-               defaultVersion={data.versions[0]}
-            />
-            <SearchForm />
-         </SidebarHeader>
-         <SidebarContent>
-            {/* We create a SidebarGroup for each parent. */}
-            {data.navMain.map(item => (
-               <SidebarGroup key={item.title}>
-                  <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
-                  <SidebarGroupContent>
-                     <SidebarMenu>
-                        {item.items.map(item => (
-                           <SidebarMenuItem key={item.title}>
-                              <SidebarMenuButton asChild isActive={item.isActive}>
-                                 <a href={item.url}>{item.title}</a>
-                              </SidebarMenuButton>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            ))}
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-01/components/search-form.tsx b/apps/web/registry/miami/block/sidebar-01/components/search-form.tsx
deleted file mode 100644
index 8597ea68..00000000
--- a/apps/web/registry/miami/block/sidebar-01/components/search-form.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Search } from 'lucide-react'
-
-import { Label } from '~/registry/miami/ui/label'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarInput,
-} from '~/registry/miami/ui/sidebar'
-
-export function SearchForm({ ...props }: React.ComponentProps<'form'>) {
-   return (
-      <form {...props}>
-         <SidebarGroup className="py-0">
-            <SidebarGroupContent className="relative">
-               <Label htmlFor="search" className="sr-only">
-                  Search
-               </Label>
-               <SidebarInput
-                  id="search"
-                  placeholder="Search the docs..."
-                  className="pl-8"
-               />
-               <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
-            </SidebarGroupContent>
-         </SidebarGroup>
-      </form>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-01/components/version-switcher.tsx b/apps/web/registry/miami/block/sidebar-01/components/version-switcher.tsx
deleted file mode 100644
index 009cc2be..00000000
--- a/apps/web/registry/miami/block/sidebar-01/components/version-switcher.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function VersionSwitcher({
-   versions,
-   defaultVersion,
-}: {
-   versions: string[]
-   defaultVersion: string
-}) {
-   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                        <GalleryVerticalEnd className="size-4" />
-                     </div>
-                     <div className="flex flex-col gap-0.5 leading-none">
-                        <span className="font-semibold">Documentation</span>
-                        <span className="">
-                           v
-                           {selectedVersion}
-                        </span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width]"
-                  align="start"
-               >
-                  {versions.map(version => (
-                     <DropdownMenuItem
-                        key={version}
-                        onSelect={() => setSelectedVersion(version)}
-                     >
-                        v
-                        {version}
-                        {' '}
-                        {version === selectedVersion && <Check className="ml-auto" />}
-                     </DropdownMenuItem>
-                  ))}
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-01/page.tsx b/apps/web/registry/miami/block/sidebar-01/page.tsx
deleted file mode 100644
index 4fe9e88b..00000000
--- a/apps/web/registry/miami/block/sidebar-01/page.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-01/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description
-  = 'A simple sidebar with navigation grouped by section.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">
-                           Building Your Application
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-02/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-02/components/app-sidebar.tsx
deleted file mode 100644
index fb288775..00000000
--- a/apps/web/registry/miami/block/sidebar-02/components/app-sidebar.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import * as React from 'react'
-import { ChevronRight } from 'lucide-react'
-
-import { SearchForm } from '~/registry/miami/block/sidebar-02/components/search-form'
-import { VersionSwitcher } from '~/registry/miami/block/sidebar-02/components/version-switcher'
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarRail,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Community',
-         url: '#',
-         items: [
-            {
-               title: 'Contribution Guide',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarHeader>
-            <VersionSwitcher
-               versions={data.versions}
-               defaultVersion={data.versions[0]}
-            />
-            <SearchForm />
-         </SidebarHeader>
-         <SidebarContent className="gap-0">
-            {/* We create a collapsible SidebarGroup for each parent. */}
-            {data.navMain.map(item => (
-               <Collapsible
-                  key={item.title}
-                  title={item.title}
-                  defaultOpen
-                  className="group/collapsible"
-               >
-                  <SidebarGroup>
-                     <SidebarGroupLabel
-                        asChild
-                        className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
-                     >
-                        <CollapsibleTrigger>
-                           {item.title}
-                           {' '}
-                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-                        </CollapsibleTrigger>
-                     </SidebarGroupLabel>
-                     <CollapsibleContent>
-                        <SidebarGroupContent>
-                           <SidebarMenu>
-                              {item.items.map(item => (
-                                 <SidebarMenuItem key={item.title}>
-                                    <SidebarMenuButton asChild isActive={item.isActive}>
-                                       <a href={item.url}>{item.title}</a>
-                                    </SidebarMenuButton>
-                                 </SidebarMenuItem>
-                              ))}
-                           </SidebarMenu>
-                        </SidebarGroupContent>
-                     </CollapsibleContent>
-                  </SidebarGroup>
-               </Collapsible>
-            ))}
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-02/components/search-form.tsx b/apps/web/registry/miami/block/sidebar-02/components/search-form.tsx
deleted file mode 100644
index 8597ea68..00000000
--- a/apps/web/registry/miami/block/sidebar-02/components/search-form.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Search } from 'lucide-react'
-
-import { Label } from '~/registry/miami/ui/label'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarInput,
-} from '~/registry/miami/ui/sidebar'
-
-export function SearchForm({ ...props }: React.ComponentProps<'form'>) {
-   return (
-      <form {...props}>
-         <SidebarGroup className="py-0">
-            <SidebarGroupContent className="relative">
-               <Label htmlFor="search" className="sr-only">
-                  Search
-               </Label>
-               <SidebarInput
-                  id="search"
-                  placeholder="Search the docs..."
-                  className="pl-8"
-               />
-               <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
-            </SidebarGroupContent>
-         </SidebarGroup>
-      </form>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-02/components/version-switcher.tsx b/apps/web/registry/miami/block/sidebar-02/components/version-switcher.tsx
deleted file mode 100644
index 009cc2be..00000000
--- a/apps/web/registry/miami/block/sidebar-02/components/version-switcher.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function VersionSwitcher({
-   versions,
-   defaultVersion,
-}: {
-   versions: string[]
-   defaultVersion: string
-}) {
-   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                        <GalleryVerticalEnd className="size-4" />
-                     </div>
-                     <div className="flex flex-col gap-0.5 leading-none">
-                        <span className="font-semibold">Documentation</span>
-                        <span className="">
-                           v
-                           {selectedVersion}
-                        </span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width]"
-                  align="start"
-               >
-                  {versions.map(version => (
-                     <DropdownMenuItem
-                        key={version}
-                        onSelect={() => setSelectedVersion(version)}
-                     >
-                        v
-                        {version}
-                        {' '}
-                        {version === selectedVersion && <Check className="ml-auto" />}
-                     </DropdownMenuItem>
-                  ))}
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-02/page.tsx b/apps/web/registry/miami/block/sidebar-02/page.tsx
deleted file mode 100644
index 7e2dfbf6..00000000
--- a/apps/web/registry/miami/block/sidebar-02/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-02/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar with collapsible sections.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">
-                           Building Your Application
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               {Array.from({ length: 24 }).map((_, index) => (
-                  <div
-                     key={index}
-                     className="bg-muted/50 aspect-video h-12 w-full rounded-lg"
-                  />
-               ))}
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-03/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-03/components/app-sidebar.tsx
deleted file mode 100644
index 33804601..00000000
--- a/apps/web/registry/miami/block/sidebar-03/components/app-sidebar.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import * as React from 'react'
-import { GalleryVerticalEnd } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-   SidebarRail,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Community',
-         url: '#',
-         items: [
-            {
-               title: 'Contribution Guide',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarHeader>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton size="lg" asChild>
-                     <a href="#">
-                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                           <GalleryVerticalEnd className="size-4" />
-                        </div>
-                        <div className="flex flex-col gap-0.5 leading-none">
-                           <span className="font-semibold">Documentation</span>
-                           <span className="">v1.0.0</span>
-                        </div>
-                     </a>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarHeader>
-         <SidebarContent>
-            <SidebarGroup>
-               <SidebarMenu>
-                  {data.navMain.map(item => (
-                     <SidebarMenuItem key={item.title}>
-                        <SidebarMenuButton asChild>
-                           <a href={item.url} className="font-medium">
-                              {item.title}
-                           </a>
-                        </SidebarMenuButton>
-                        {item.items?.length
-                           ? (
-                                 <SidebarMenuSub>
-                                    {item.items.map(item => (
-                                       <SidebarMenuSubItem key={item.title}>
-                                          <SidebarMenuSubButton asChild isActive={item.isActive}>
-                                             <a href={item.url}>{item.title}</a>
-                                          </SidebarMenuSubButton>
-                                       </SidebarMenuSubItem>
-                                    ))}
-                                 </SidebarMenuSub>
-                              )
-                           : null}
-                     </SidebarMenuItem>
-                  ))}
-               </SidebarMenu>
-            </SidebarGroup>
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-03/page.tsx b/apps/web/registry/miami/block/sidebar-03/page.tsx
deleted file mode 100644
index b39cf308..00000000
--- a/apps/web/registry/miami/block/sidebar-03/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-03/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar with submenus.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b">
-               <div className="flex items-center gap-2 px-3">
-                  <SidebarTrigger />
-                  <Separator orientation="vertical" className="mr-2 h-4" />
-                  <Breadcrumb>
-                     <BreadcrumbList>
-                        <BreadcrumbItem className="hidden md:block">
-                           <BreadcrumbLink href="#">
-                              Building Your Application
-                           </BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator className="hidden md:block" />
-                        <BreadcrumbItem>
-                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                        </BreadcrumbItem>
-                     </BreadcrumbList>
-                  </Breadcrumb>
-               </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-04/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-04/components/app-sidebar.tsx
deleted file mode 100644
index feeb20dc..00000000
--- a/apps/web/registry/miami/block/sidebar-04/components/app-sidebar.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import * as React from 'react'
-import { GalleryVerticalEnd } from 'lucide-react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Community',
-         url: '#',
-         items: [
-            {
-               title: 'Contribution Guide',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar variant="floating" {...props}>
-         <SidebarHeader>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton size="lg" asChild>
-                     <a href="#">
-                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                           <GalleryVerticalEnd className="size-4" />
-                        </div>
-                        <div className="flex flex-col gap-0.5 leading-none">
-                           <span className="font-semibold">Documentation</span>
-                           <span className="">v1.0.0</span>
-                        </div>
-                     </a>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarHeader>
-         <SidebarContent>
-            <SidebarGroup>
-               <SidebarMenu className="gap-2">
-                  {data.navMain.map(item => (
-                     <SidebarMenuItem key={item.title}>
-                        <SidebarMenuButton asChild>
-                           <a href={item.url} className="font-medium">
-                              {item.title}
-                           </a>
-                        </SidebarMenuButton>
-                        {item.items?.length
-                           ? (
-                                 <SidebarMenuSub className="ml-0 border-l-0 px-1.5">
-                                    {item.items.map(item => (
-                                       <SidebarMenuSubItem key={item.title}>
-                                          <SidebarMenuSubButton asChild isActive={item.isActive}>
-                                             <a href={item.url}>{item.title}</a>
-                                          </SidebarMenuSubButton>
-                                       </SidebarMenuSubItem>
-                                    ))}
-                                 </SidebarMenuSub>
-                              )
-                           : null}
-                     </SidebarMenuItem>
-                  ))}
-               </SidebarMenu>
-            </SidebarGroup>
-         </SidebarContent>
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-04/page.tsx b/apps/web/registry/miami/block/sidebar-04/page.tsx
deleted file mode 100644
index 475d6c24..00000000
--- a/apps/web/registry/miami/block/sidebar-04/page.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-04/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A floating sidebar with submenus.'
-
-export default function Page() {
-   return (
-      <SidebarProvider
-         style={
-            {
-               '--sidebar-width': '19rem',
-            } as React.CSSProperties
-         }
-      >
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">
-                           Building Your Application
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-05/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-05/components/app-sidebar.tsx
deleted file mode 100644
index 22d3543e..00000000
--- a/apps/web/registry/miami/block/sidebar-05/components/app-sidebar.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import * as React from 'react'
-import { GalleryVerticalEnd, Minus, Plus } from 'lucide-react'
-
-import { SearchForm } from '~/registry/miami/block/sidebar-05/components/search-form'
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-   SidebarRail,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Community',
-         url: '#',
-         items: [
-            {
-               title: 'Contribution Guide',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarHeader>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton size="lg" asChild>
-                     <a href="#">
-                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                           <GalleryVerticalEnd className="size-4" />
-                        </div>
-                        <div className="flex flex-col gap-0.5 leading-none">
-                           <span className="font-semibold">Documentation</span>
-                           <span className="">v1.0.0</span>
-                        </div>
-                     </a>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-            <SearchForm />
-         </SidebarHeader>
-         <SidebarContent>
-            <SidebarGroup>
-               <SidebarMenu>
-                  {data.navMain.map((item, index) => (
-                     <Collapsible
-                        key={item.title}
-                        defaultOpen={index === 1}
-                        className="group/collapsible"
-                     >
-                        <SidebarMenuItem>
-                           <CollapsibleTrigger asChild>
-                              <SidebarMenuButton>
-                                 {item.title}
-                                 {' '}
-                                 <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
-                                 <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
-                              </SidebarMenuButton>
-                           </CollapsibleTrigger>
-                           {item.items?.length
-                              ? (
-                                    <CollapsibleContent>
-                                       <SidebarMenuSub>
-                                          {item.items.map(item => (
-                                             <SidebarMenuSubItem key={item.title}>
-                                                <SidebarMenuSubButton
-                                                   asChild
-                                                   isActive={item.isActive}
-                                                >
-                                                   <a href={item.url}>{item.title}</a>
-                                                </SidebarMenuSubButton>
-                                             </SidebarMenuSubItem>
-                                          ))}
-                                       </SidebarMenuSub>
-                                    </CollapsibleContent>
-                                 )
-                              : null}
-                        </SidebarMenuItem>
-                     </Collapsible>
-                  ))}
-               </SidebarMenu>
-            </SidebarGroup>
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-05/components/search-form.tsx b/apps/web/registry/miami/block/sidebar-05/components/search-form.tsx
deleted file mode 100644
index 8597ea68..00000000
--- a/apps/web/registry/miami/block/sidebar-05/components/search-form.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Search } from 'lucide-react'
-
-import { Label } from '~/registry/miami/ui/label'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarInput,
-} from '~/registry/miami/ui/sidebar'
-
-export function SearchForm({ ...props }: React.ComponentProps<'form'>) {
-   return (
-      <form {...props}>
-         <SidebarGroup className="py-0">
-            <SidebarGroupContent className="relative">
-               <Label htmlFor="search" className="sr-only">
-                  Search
-               </Label>
-               <SidebarInput
-                  id="search"
-                  placeholder="Search the docs..."
-                  className="pl-8"
-               />
-               <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
-            </SidebarGroupContent>
-         </SidebarGroup>
-      </form>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-05/page.tsx b/apps/web/registry/miami/block/sidebar-05/page.tsx
deleted file mode 100644
index 652c5884..00000000
--- a/apps/web/registry/miami/block/sidebar-05/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-05/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar with collapsible submenus.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">
-                           Building Your Application
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-06/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-06/components/app-sidebar.tsx
deleted file mode 100644
index 5c4aa2c8..00000000
--- a/apps/web/registry/miami/block/sidebar-06/components/app-sidebar.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import * as React from 'react'
-import { GalleryVerticalEnd } from 'lucide-react'
-
-import { NavMain } from '~/registry/miami/block/sidebar-06/components/nav-main'
-import { SidebarOptInForm } from '~/registry/miami/block/sidebar-06/components/sidebar-opt-in-form'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarRail,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarHeader>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton size="lg" asChild>
-                     <a href="#">
-                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                           <GalleryVerticalEnd className="size-4" />
-                        </div>
-                        <div className="flex flex-col gap-0.5 leading-none">
-                           <span className="font-semibold">Documentation</span>
-                           <span className="">v1.0.0</span>
-                        </div>
-                     </a>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarHeader>
-         <SidebarContent>
-            <NavMain items={data.navMain} />
-         </SidebarContent>
-         <SidebarFooter>
-            <div className="p-1">
-               <SidebarOptInForm />
-            </div>
-         </SidebarFooter>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-06/components/nav-main.tsx b/apps/web/registry/miami/block/sidebar-06/components/nav-main.tsx
deleted file mode 100644
index 6e0c7414..00000000
--- a/apps/web/registry/miami/block/sidebar-06/components/nav-main.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-
-import { type LucideIcon, MoreHorizontal } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon?: LucideIcon
-      isActive?: boolean
-      items?: {
-         title: string
-         url: string
-      }[]
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup>
-         <SidebarMenu>
-            {items.map(item => (
-               <DropdownMenu key={item.title}>
-                  <SidebarMenuItem>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                           {item.title}
-                           {' '}
-                           <MoreHorizontal className="ml-auto" />
-                        </SidebarMenuButton>
-                     </DropdownMenuTrigger>
-                     {item.items?.length
-                        ? (
-                              <DropdownMenuContent
-                                 side={isMobile ? 'bottom' : 'right'}
-                                 align={isMobile ? 'end' : 'start'}
-                                 className="min-w-56 rounded-lg"
-                              >
-                                 {item.items.map(item => (
-                                    <DropdownMenuItem asChild key={item.title}>
-                                       <a href={item.url}>{item.title}</a>
-                                    </DropdownMenuItem>
-                                 ))}
-                              </DropdownMenuContent>
-                           )
-                        : null}
-                  </SidebarMenuItem>
-               </DropdownMenu>
-            ))}
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/web/registry/miami/block/sidebar-06/components/sidebar-opt-in-form.tsx
deleted file mode 100644
index a39db9e9..00000000
--- a/apps/web/registry/miami/block/sidebar-06/components/sidebar-opt-in-form.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { SidebarInput } from '~/registry/miami/ui/sidebar'
-
-export function SidebarOptInForm() {
-   return (
-      <Card className="shadow-none">
-         <form>
-            <CardHeader className="p-4 pb-0">
-               <CardTitle className="text-sm">Subscribe to our newsletter</CardTitle>
-               <CardDescription>
-                  Opt-in to receive updates and news about the sidebar.
-               </CardDescription>
-            </CardHeader>
-            <CardContent className="grid gap-2.5 p-4">
-               <SidebarInput type="email" placeholder="Email" />
-               <Button
-                  className="bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none"
-                  size="sm"
-               >
-                  Subscribe
-               </Button>
-            </CardContent>
-         </form>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-06/page.tsx b/apps/web/registry/miami/block/sidebar-06/page.tsx
deleted file mode 100644
index 1bcd5e8f..00000000
--- a/apps/web/registry/miami/block/sidebar-06/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-06/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar with submenus as dropdowns.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">
-                           Building Your Application
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-07/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-07/components/app-sidebar.tsx
deleted file mode 100644
index 4ce5d59e..00000000
--- a/apps/web/registry/miami/block/sidebar-07/components/app-sidebar.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   AudioWaveform,
-   BookOpen,
-   Bot,
-   Command,
-   Frame,
-   GalleryVerticalEnd,
-   Map,
-   PieChart,
-   Settings2,
-   SquareTerminal,
-} from 'lucide-react'
-
-import { NavMain } from '~/registry/miami/block/sidebar-07/components/nav-main'
-import { NavProjects } from '~/registry/miami/block/sidebar-07/components/nav-projects'
-import { NavUser } from '~/registry/miami/block/sidebar-07/components/nav-user'
-import { TeamSwitcher } from '~/registry/miami/block/sidebar-07/components/team-switcher'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarRail,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   teams: [
-      {
-         name: 'Acme Inc',
-         logo: GalleryVerticalEnd,
-         plan: 'Enterprise',
-      },
-      {
-         name: 'Acme Corp.',
-         logo: AudioWaveform,
-         plan: 'Startup',
-      },
-      {
-         name: 'Evil Corp.',
-         logo: Command,
-         plan: 'Free',
-      },
-   ],
-   navMain: [
-      {
-         title: 'Playground',
-         url: '#',
-         icon: SquareTerminal,
-         isActive: true,
-         items: [
-            {
-               title: 'History',
-               url: '#',
-            },
-            {
-               title: 'Starred',
-               url: '#',
-            },
-            {
-               title: 'Settings',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Models',
-         url: '#',
-         icon: Bot,
-         items: [
-            {
-               title: 'Genesis',
-               url: '#',
-            },
-            {
-               title: 'Explorer',
-               url: '#',
-            },
-            {
-               title: 'Quantum',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Documentation',
-         url: '#',
-         icon: BookOpen,
-         items: [
-            {
-               title: 'Introduction',
-               url: '#',
-            },
-            {
-               title: 'Get Started',
-               url: '#',
-            },
-            {
-               title: 'Tutorials',
-               url: '#',
-            },
-            {
-               title: 'Changelog',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Settings',
-         url: '#',
-         icon: Settings2,
-         items: [
-            {
-               title: 'General',
-               url: '#',
-            },
-            {
-               title: 'Team',
-               url: '#',
-            },
-            {
-               title: 'Billing',
-               url: '#',
-            },
-            {
-               title: 'Limits',
-               url: '#',
-            },
-         ],
-      },
-   ],
-   projects: [
-      {
-         name: 'Design Engineering',
-         url: '#',
-         icon: Frame,
-      },
-      {
-         name: 'Sales & Marketing',
-         url: '#',
-         icon: PieChart,
-      },
-      {
-         name: 'Travel',
-         url: '#',
-         icon: Map,
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar collapsible="icon" {...props}>
-         <SidebarHeader>
-            <TeamSwitcher teams={data.teams} />
-         </SidebarHeader>
-         <SidebarContent>
-            <NavMain items={data.navMain} />
-            <NavProjects projects={data.projects} />
-         </SidebarContent>
-         <SidebarFooter>
-            <NavUser user={data.user} />
-         </SidebarFooter>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-07/components/nav-main.tsx b/apps/web/registry/miami/block/sidebar-07/components/nav-main.tsx
deleted file mode 100644
index 82a22fcd..00000000
--- a/apps/web/registry/miami/block/sidebar-07/components/nav-main.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client'
-
-import { ChevronRight, type LucideIcon } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon?: LucideIcon
-      isActive?: boolean
-      items?: {
-         title: string
-         url: string
-      }[]
-   }[]
-}) {
-   return (
-      <SidebarGroup>
-         <SidebarGroupLabel>Platform</SidebarGroupLabel>
-         <SidebarMenu>
-            {items.map(item => (
-               <Collapsible
-                  key={item.title}
-                  asChild
-                  defaultOpen={item.isActive}
-                  className="group/collapsible"
-               >
-                  <SidebarMenuItem>
-                     <CollapsibleTrigger asChild>
-                        <SidebarMenuButton tooltip={item.title}>
-                           {item.icon && <item.icon />}
-                           <span>{item.title}</span>
-                           <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                        </SidebarMenuButton>
-                     </CollapsibleTrigger>
-                     <CollapsibleContent>
-                        <SidebarMenuSub>
-                           {item.items?.map(subItem => (
-                              <SidebarMenuSubItem key={subItem.title}>
-                                 <SidebarMenuSubButton asChild>
-                                    <a href={subItem.url}>
-                                       <span>{subItem.title}</span>
-                                    </a>
-                                 </SidebarMenuSubButton>
-                              </SidebarMenuSubItem>
-                           ))}
-                        </SidebarMenuSub>
-                     </CollapsibleContent>
-                  </SidebarMenuItem>
-               </Collapsible>
-            ))}
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-07/components/nav-projects.tsx b/apps/web/registry/miami/block/sidebar-07/components/nav-projects.tsx
deleted file mode 100644
index 5093e815..00000000
--- a/apps/web/registry/miami/block/sidebar-07/components/nav-projects.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import {
-   Folder,
-   Forward,
-   type LucideIcon,
-   MoreHorizontal,
-   Trash2,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavProjects({
-   projects,
-}: {
-   projects: {
-      name: string
-      url: string
-      icon: LucideIcon
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-         <SidebarGroupLabel>Projects</SidebarGroupLabel>
-         <SidebarMenu>
-            {projects.map(item => (
-               <SidebarMenuItem key={item.name}>
-                  <SidebarMenuButton asChild>
-                     <a href={item.url}>
-                        <item.icon />
-                        <span>{item.name}</span>
-                     </a>
-                  </SidebarMenuButton>
-                  <DropdownMenu>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover>
-                           <MoreHorizontal />
-                           <span className="sr-only">More</span>
-                        </SidebarMenuAction>
-                     </DropdownMenuTrigger>
-                     <DropdownMenuContent
-                        className="w-48 rounded-lg"
-                        side={isMobile ? 'bottom' : 'right'}
-                        align={isMobile ? 'end' : 'start'}
-                     >
-                        <DropdownMenuItem>
-                           <Folder className="text-muted-foreground" />
-                           <span>View Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <Forward className="text-muted-foreground" />
-                           <span>Share Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Trash2 className="text-muted-foreground" />
-                           <span>Delete Project</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuContent>
-                  </DropdownMenu>
-               </SidebarMenuItem>
-            ))}
-            <SidebarMenuItem>
-               <SidebarMenuButton className="text-sidebar-foreground/70">
-                  <MoreHorizontal className="text-sidebar-foreground/70" />
-                  <span>More</span>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-07/components/nav-user.tsx b/apps/web/registry/miami/block/sidebar-07/components/nav-user.tsx
deleted file mode 100644
index ffe87f3a..00000000
--- a/apps/web/registry/miami/block/sidebar-07/components/nav-user.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="end"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-07/components/team-switcher.tsx b/apps/web/registry/miami/block/sidebar-07/components/team-switcher.tsx
deleted file mode 100644
index 447183c3..00000000
--- a/apps/web/registry/miami/block/sidebar-07/components/team-switcher.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronsUpDown, Plus } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function TeamSwitcher({
-   teams,
-}: {
-   teams: {
-      name: string
-      logo: React.ElementType
-      plan: string
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-   const [activeTeam, setActiveTeam] = React.useState(teams[0])
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                        <activeTeam.logo className="size-4" />
-                     </div>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">
-                           {activeTeam.name}
-                        </span>
-                        <span className="truncate text-xs">{activeTeam.plan}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  align="start"
-                  side={isMobile ? 'bottom' : 'right'}
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
-                     Teams
-                  </DropdownMenuLabel>
-                  {teams.map((team, index) => (
-                     <DropdownMenuItem
-                        key={team.name}
-                        onClick={() => setActiveTeam(team)}
-                        className="gap-2 p-2"
-                     >
-                        <div className="flex size-6 items-center justify-center rounded-sm border">
-                           <team.logo className="size-4 shrink-0" />
-                        </div>
-                        {team.name}
-                        <DropdownMenuShortcut>
-                           ⌘
-                           {index + 1}
-                        </DropdownMenuShortcut>
-                     </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="gap-2 p-2">
-                     <div className="bg-background flex size-6 items-center justify-center rounded-md border">
-                        <Plus className="size-4" />
-                     </div>
-                     <div className="text-muted-foreground font-medium">Add team</div>
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-07/page.tsx b/apps/web/registry/miami/block/sidebar-07/page.tsx
deleted file mode 100644
index 95f38920..00000000
--- a/apps/web/registry/miami/block/sidebar-07/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-07/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar that collapses to icons.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-               <div className="flex items-center gap-2 px-4">
-                  <SidebarTrigger className="-ml-1" />
-                  <Separator orientation="vertical" className="mr-2 h-4" />
-                  <Breadcrumb>
-                     <BreadcrumbList>
-                        <BreadcrumbItem className="hidden md:block">
-                           <BreadcrumbLink href="#">
-                              Building Your Application
-                           </BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator className="hidden md:block" />
-                        <BreadcrumbItem>
-                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                        </BreadcrumbItem>
-                     </BreadcrumbList>
-                  </Breadcrumb>
-               </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-08/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-08/components/app-sidebar.tsx
deleted file mode 100644
index eb4fa641..00000000
--- a/apps/web/registry/miami/block/sidebar-08/components/app-sidebar.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   BookOpen,
-   Bot,
-   Command,
-   Frame,
-   LifeBuoy,
-   Map,
-   PieChart,
-   Send,
-   Settings2,
-   SquareTerminal,
-} from 'lucide-react'
-
-import { NavMain } from '~/registry/miami/block/sidebar-08/components/nav-main'
-import { NavProjects } from '~/registry/miami/block/sidebar-08/components/nav-projects'
-import { NavSecondary } from '~/registry/miami/block/sidebar-08/components/nav-secondary'
-import { NavUser } from '~/registry/miami/block/sidebar-08/components/nav-user'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/miami/ui/sidebar'
-
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   navMain: [
-      {
-         title: 'Playground',
-         url: '#',
-         icon: SquareTerminal,
-         isActive: true,
-         items: [
-            {
-               title: 'History',
-               url: '#',
-            },
-            {
-               title: 'Starred',
-               url: '#',
-            },
-            {
-               title: 'Settings',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Models',
-         url: '#',
-         icon: Bot,
-         items: [
-            {
-               title: 'Genesis',
-               url: '#',
-            },
-            {
-               title: 'Explorer',
-               url: '#',
-            },
-            {
-               title: 'Quantum',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Documentation',
-         url: '#',
-         icon: BookOpen,
-         items: [
-            {
-               title: 'Introduction',
-               url: '#',
-            },
-            {
-               title: 'Get Started',
-               url: '#',
-            },
-            {
-               title: 'Tutorials',
-               url: '#',
-            },
-            {
-               title: 'Changelog',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Settings',
-         url: '#',
-         icon: Settings2,
-         items: [
-            {
-               title: 'General',
-               url: '#',
-            },
-            {
-               title: 'Team',
-               url: '#',
-            },
-            {
-               title: 'Billing',
-               url: '#',
-            },
-            {
-               title: 'Limits',
-               url: '#',
-            },
-         ],
-      },
-   ],
-   navSecondary: [
-      {
-         title: 'Support',
-         url: '#',
-         icon: LifeBuoy,
-      },
-      {
-         title: 'Feedback',
-         url: '#',
-         icon: Send,
-      },
-   ],
-   projects: [
-      {
-         name: 'Design Engineering',
-         url: '#',
-         icon: Frame,
-      },
-      {
-         name: 'Sales & Marketing',
-         url: '#',
-         icon: PieChart,
-      },
-      {
-         name: 'Travel',
-         url: '#',
-         icon: Map,
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar variant="inset" {...props}>
-         <SidebarHeader>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton size="lg" asChild>
-                     <a href="#">
-                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                           <Command className="size-4" />
-                        </div>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">Acme Inc</span>
-                           <span className="truncate text-xs">Enterprise</span>
-                        </div>
-                     </a>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarHeader>
-         <SidebarContent>
-            <NavMain items={data.navMain} />
-            <NavProjects projects={data.projects} />
-            <NavSecondary items={data.navSecondary} className="mt-auto" />
-         </SidebarContent>
-         <SidebarFooter>
-            <NavUser user={data.user} />
-         </SidebarFooter>
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-08/components/nav-main.tsx b/apps/web/registry/miami/block/sidebar-08/components/nav-main.tsx
deleted file mode 100644
index 33f7ac63..00000000
--- a/apps/web/registry/miami/block/sidebar-08/components/nav-main.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client'
-
-import { ChevronRight, type LucideIcon } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon: LucideIcon
-      isActive?: boolean
-      items?: {
-         title: string
-         url: string
-      }[]
-   }[]
-}) {
-   return (
-      <SidebarGroup>
-         <SidebarGroupLabel>Platform</SidebarGroupLabel>
-         <SidebarMenu>
-            {items.map(item => (
-               <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
-                  <SidebarMenuItem>
-                     <SidebarMenuButton asChild tooltip={item.title}>
-                        <a href={item.url}>
-                           <item.icon />
-                           <span>{item.title}</span>
-                        </a>
-                     </SidebarMenuButton>
-                     {item.items?.length
-                        ? (
-                              <>
-                                 <CollapsibleTrigger asChild>
-                                    <SidebarMenuAction className="data-[state=open]:rotate-90">
-                                       <ChevronRight />
-                                       <span className="sr-only">Toggle</span>
-                                    </SidebarMenuAction>
-                                 </CollapsibleTrigger>
-                                 <CollapsibleContent>
-                                    <SidebarMenuSub>
-                                       {item.items?.map(subItem => (
-                                          <SidebarMenuSubItem key={subItem.title}>
-                                             <SidebarMenuSubButton asChild>
-                                                <a href={subItem.url}>
-                                                   <span>{subItem.title}</span>
-                                                </a>
-                                             </SidebarMenuSubButton>
-                                          </SidebarMenuSubItem>
-                                       ))}
-                                    </SidebarMenuSub>
-                                 </CollapsibleContent>
-                              </>
-                           )
-                        : null}
-                  </SidebarMenuItem>
-               </Collapsible>
-            ))}
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-08/components/nav-projects.tsx b/apps/web/registry/miami/block/sidebar-08/components/nav-projects.tsx
deleted file mode 100644
index b19b5de2..00000000
--- a/apps/web/registry/miami/block/sidebar-08/components/nav-projects.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import {
-   Folder,
-   type LucideIcon,
-   MoreHorizontal,
-   Share,
-   Trash2,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavProjects({
-   projects,
-}: {
-   projects: {
-      name: string
-      url: string
-      icon: LucideIcon
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-         <SidebarGroupLabel>Projects</SidebarGroupLabel>
-         <SidebarMenu>
-            {projects.map(item => (
-               <SidebarMenuItem key={item.name}>
-                  <SidebarMenuButton asChild>
-                     <a href={item.url}>
-                        <item.icon />
-                        <span>{item.name}</span>
-                     </a>
-                  </SidebarMenuButton>
-                  <DropdownMenu>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover>
-                           <MoreHorizontal />
-                           <span className="sr-only">More</span>
-                        </SidebarMenuAction>
-                     </DropdownMenuTrigger>
-                     <DropdownMenuContent
-                        className="w-48"
-                        side={isMobile ? 'bottom' : 'right'}
-                        align={isMobile ? 'end' : 'start'}
-                     >
-                        <DropdownMenuItem>
-                           <Folder className="text-muted-foreground" />
-                           <span>View Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <Share className="text-muted-foreground" />
-                           <span>Share Project</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Trash2 className="text-muted-foreground" />
-                           <span>Delete Project</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuContent>
-                  </DropdownMenu>
-               </SidebarMenuItem>
-            ))}
-            <SidebarMenuItem>
-               <SidebarMenuButton>
-                  <MoreHorizontal />
-                  <span>More</span>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-08/components/nav-secondary.tsx b/apps/web/registry/miami/block/sidebar-08/components/nav-secondary.tsx
deleted file mode 100644
index e0806b46..00000000
--- a/apps/web/registry/miami/block/sidebar-08/components/nav-secondary.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from 'react'
-import type { LucideIcon } from 'lucide-react'
-
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavSecondary({
-   items,
-   ...props
-}: {
-   items: {
-      title: string
-      url: string
-      icon: LucideIcon
-   }[]
-} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
-   return (
-      <SidebarGroup {...props}>
-         <SidebarGroupContent>
-            <SidebarMenu>
-               {items.map(item => (
-                  <SidebarMenuItem key={item.title}>
-                     <SidebarMenuButton asChild size="sm">
-                        <a href={item.url}>
-                           <item.icon />
-                           <span>{item.title}</span>
-                        </a>
-                     </SidebarMenuButton>
-                  </SidebarMenuItem>
-               ))}
-            </SidebarMenu>
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-08/components/nav-user.tsx b/apps/web/registry/miami/block/sidebar-08/components/nav-user.tsx
deleted file mode 100644
index ffe87f3a..00000000
--- a/apps/web/registry/miami/block/sidebar-08/components/nav-user.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="end"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-08/page.tsx b/apps/web/registry/miami/block/sidebar-08/page.tsx
deleted file mode 100644
index b8a7fb6d..00000000
--- a/apps/web/registry/miami/block/sidebar-08/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-08/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'An inset sidebar with secondary navigation.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2">
-               <div className="flex items-center gap-2 px-4">
-                  <SidebarTrigger className="-ml-1" />
-                  <Separator orientation="vertical" className="mr-2 h-4" />
-                  <Breadcrumb>
-                     <BreadcrumbList>
-                        <BreadcrumbItem className="hidden md:block">
-                           <BreadcrumbLink href="#">
-                              Building Your Application
-                           </BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator className="hidden md:block" />
-                        <BreadcrumbItem>
-                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                        </BreadcrumbItem>
-                     </BreadcrumbList>
-                  </Breadcrumb>
-               </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-09/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-09/components/app-sidebar.tsx
deleted file mode 100644
index f6fe1eb9..00000000
--- a/apps/web/registry/miami/block/sidebar-09/components/app-sidebar.tsx
+++ /dev/null
@@ -1,263 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-react'
-
-import { NavUser } from '~/registry/miami/block/sidebar-09/components/nav-user'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarHeader,
-   SidebarInput,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-import { Switch } from '~/registry/miami/ui/switch'
-
-// This is sample data
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   navMain: [
-      {
-         title: 'Inbox',
-         url: '#',
-         icon: Inbox,
-         isActive: true,
-      },
-      {
-         title: 'Drafts',
-         url: '#',
-         icon: File,
-         isActive: false,
-      },
-      {
-         title: 'Sent',
-         url: '#',
-         icon: Send,
-         isActive: false,
-      },
-      {
-         title: 'Junk',
-         url: '#',
-         icon: ArchiveX,
-         isActive: false,
-      },
-      {
-         title: 'Trash',
-         url: '#',
-         icon: Trash2,
-         isActive: false,
-      },
-   ],
-   mails: [
-      {
-         name: 'William Smith',
-         email: 'williamsmith@example.com',
-         subject: 'Meeting Tomorrow',
-         date: '09:34 AM',
-         teaser:
-        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.',
-      },
-      {
-         name: 'Alice Smith',
-         email: 'alicesmith@example.com',
-         subject: 'Re: Project Update',
-         date: 'Yesterday',
-         teaser:
-        'Thanks for the update. The progress looks great so far.\nLet\'s schedule a call to discuss the next steps.',
-      },
-      {
-         name: 'Bob Johnson',
-         email: 'bobjohnson@example.com',
-         subject: 'Weekend Plans',
-         date: '2 days ago',
-         teaser:
-        'Hey everyone! I\'m thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?',
-      },
-      {
-         name: 'Emily Davis',
-         email: 'emilydavis@example.com',
-         subject: 'Re: Question about Budget',
-         date: '2 days ago',
-         teaser:
-        'I\'ve reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?',
-      },
-      {
-         name: 'Michael Wilson',
-         email: 'michaelwilson@example.com',
-         subject: 'Important Announcement',
-         date: '1 week ago',
-         teaser:
-        'Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company\'s future.',
-      },
-      {
-         name: 'Sarah Brown',
-         email: 'sarahbrown@example.com',
-         subject: 'Re: Feedback on Proposal',
-         date: '1 week ago',
-         teaser:
-        'Thank you for sending over the proposal. I\'ve reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?',
-      },
-      {
-         name: 'David Lee',
-         email: 'davidlee@example.com',
-         subject: 'New Project Idea',
-         date: '1 week ago',
-         teaser:
-        'I\'ve been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?',
-      },
-      {
-         name: 'Olivia Wilson',
-         email: 'oliviawilson@example.com',
-         subject: 'Vacation Plans',
-         date: '1 week ago',
-         teaser:
-        'Just a heads up that I\'ll be taking a two-week vacation next month.\nI\'ll make sure all my projects are up to date before I leave.',
-      },
-      {
-         name: 'James Martin',
-         email: 'jamesmartin@example.com',
-         subject: 'Re: Conference Registration',
-         date: '1 week ago',
-         teaser:
-        'I\'ve completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.',
-      },
-      {
-         name: 'Sophia White',
-         email: 'sophiawhite@example.com',
-         subject: 'Team Dinner',
-         date: '1 week ago',
-         teaser:
-        'To celebrate our recent project success, I\'d like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.',
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   // Note: I'm using state to show active item.
-   // IRL you should use the url/router.
-   const [activeItem, setActiveItem] = React.useState(data.navMain[0])
-   const [mails, setMails] = React.useState(data.mails)
-   const { setOpen } = useSidebar()
-
-   return (
-      <Sidebar
-         collapsible="icon"
-         className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row"
-         {...props}
-      >
-         {/* This is the first sidebar */}
-         {/* We disable collapsible and adjust width to icon. */}
-         {/* This will make the sidebar appear as icons. */}
-         <Sidebar
-            collapsible="none"
-            className="!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r"
-         >
-            <SidebarHeader>
-               <SidebarMenu>
-                  <SidebarMenuItem>
-                     <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
-                        <a href="#">
-                           <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                              <Command className="size-4" />
-                           </div>
-                           <div className="grid flex-1 text-left text-sm leading-tight">
-                              <span className="truncate font-semibold">Acme Inc</span>
-                              <span className="truncate text-xs">Enterprise</span>
-                           </div>
-                        </a>
-                     </SidebarMenuButton>
-                  </SidebarMenuItem>
-               </SidebarMenu>
-            </SidebarHeader>
-            <SidebarContent>
-               <SidebarGroup>
-                  <SidebarGroupContent className="px-1.5 md:px-0">
-                     <SidebarMenu>
-                        {data.navMain.map(item => (
-                           <SidebarMenuItem key={item.title}>
-                              <SidebarMenuButton
-                                 tooltip={{
-                                    children: item.title,
-                                    hidden: false,
-                                 }}
-                                 onClick={() => {
-                                    setActiveItem(item)
-                                    const mail = data.mails.sort(() => Math.random() - 0.5)
-                                    setMails(
-                                       mail.slice(
-                                          0,
-                                          Math.max(5, Math.floor(Math.random() * 10) + 1),
-                                       ),
-                                    )
-                                    setOpen(true)
-                                 }}
-                                 isActive={activeItem.title === item.title}
-                                 className="px-2.5 md:px-2"
-                              >
-                                 <item.icon />
-                                 <span>{item.title}</span>
-                              </SidebarMenuButton>
-                           </SidebarMenuItem>
-                        ))}
-                     </SidebarMenu>
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-            <SidebarFooter>
-               <NavUser user={data.user} />
-            </SidebarFooter>
-         </Sidebar>
-
-         {/* This is the second sidebar */}
-         {/* We disable collapsible and let it fill remaining space */}
-         <Sidebar collapsible="none" className="hidden flex-1 md:flex">
-            <SidebarHeader className="gap-3.5 border-b p-4">
-               <div className="flex w-full items-center justify-between">
-                  <div className="text-foreground text-base font-medium">
-                     {activeItem.title}
-                  </div>
-                  <Label className="flex items-center gap-2 text-sm">
-                     <span>Unreads</span>
-                     <Switch className="shadow-none" />
-                  </Label>
-               </div>
-               <SidebarInput placeholder="Type to search..." />
-            </SidebarHeader>
-            <SidebarContent>
-               <SidebarGroup className="px-0">
-                  <SidebarGroupContent>
-                     {mails.map(mail => (
-                        <a
-                           href="#"
-                           key={mail.email}
-                           className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0"
-                        >
-                           <div className="flex w-full items-center gap-2">
-                              <span>{mail.name}</span>
-                              {' '}
-                              <span className="ml-auto text-xs">{mail.date}</span>
-                           </div>
-                           <span className="font-medium">{mail.subject}</span>
-                           <span className="line-clamp-2 w-[260px] whitespace-break-spaces text-xs">
-                              {mail.teaser}
-                           </span>
-                        </a>
-                     ))}
-                  </SidebarGroupContent>
-               </SidebarGroup>
-            </SidebarContent>
-         </Sidebar>
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-09/components/nav-user.tsx b/apps/web/registry/miami/block/sidebar-09/components/nav-user.tsx
deleted file mode 100644
index 700cca73..00000000
--- a/apps/web/registry/miami/block/sidebar-09/components/nav-user.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="end"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-09/page.tsx b/apps/web/registry/miami/block/sidebar-09/page.tsx
deleted file mode 100644
index c24ae8f8..00000000
--- a/apps/web/registry/miami/block/sidebar-09/page.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-09/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'Collapsible nested sidebars.'
-
-export default function Page() {
-   return (
-      <SidebarProvider
-         style={
-            {
-               '--sidebar-width': '350px',
-            } as React.CSSProperties
-         }
-      >
-         <AppSidebar />
-         <SidebarInset>
-            <header className="bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Inbox</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               {Array.from({ length: 24 }).map((_, index) => (
-                  <div
-                     key={index}
-                     className="bg-muted/50 aspect-video h-12 w-full rounded-lg"
-                  />
-               ))}
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-10/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-10/components/app-sidebar.tsx
deleted file mode 100644
index 1ca762c3..00000000
--- a/apps/web/registry/miami/block/sidebar-10/components/app-sidebar.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   AudioWaveform,
-   Blocks,
-   Calendar,
-   Command,
-   Home,
-   Inbox,
-   MessageCircleQuestion,
-   Search,
-   Settings2,
-   Sparkles,
-   Trash2,
-} from 'lucide-react'
-
-import { NavFavorites } from '~/registry/miami/block/sidebar-10/components/nav-favorites'
-import { NavMain } from '~/registry/miami/block/sidebar-10/components/nav-main'
-import { NavSecondary } from '~/registry/miami/block/sidebar-10/components/nav-secondary'
-import { NavWorkspaces } from '~/registry/miami/block/sidebar-10/components/nav-workspaces'
-import { TeamSwitcher } from '~/registry/miami/block/sidebar-10/components/team-switcher'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarHeader,
-   SidebarRail,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   teams: [
-      {
-         name: 'Acme Inc',
-         logo: Command,
-         plan: 'Enterprise',
-      },
-      {
-         name: 'Acme Corp.',
-         logo: AudioWaveform,
-         plan: 'Startup',
-      },
-      {
-         name: 'Evil Corp.',
-         logo: Command,
-         plan: 'Free',
-      },
-   ],
-   navMain: [
-      {
-         title: 'Search',
-         url: '#',
-         icon: Search,
-      },
-      {
-         title: 'Ask AI',
-         url: '#',
-         icon: Sparkles,
-      },
-      {
-         title: 'Home',
-         url: '#',
-         icon: Home,
-         isActive: true,
-      },
-      {
-         title: 'Inbox',
-         url: '#',
-         icon: Inbox,
-         badge: '10',
-      },
-   ],
-   navSecondary: [
-      {
-         title: 'Calendar',
-         url: '#',
-         icon: Calendar,
-      },
-      {
-         title: 'Settings',
-         url: '#',
-         icon: Settings2,
-      },
-      {
-         title: 'Templates',
-         url: '#',
-         icon: Blocks,
-      },
-      {
-         title: 'Trash',
-         url: '#',
-         icon: Trash2,
-      },
-      {
-         title: 'Help',
-         url: '#',
-         icon: MessageCircleQuestion,
-      },
-   ],
-   favorites: [
-      {
-         name: 'Project Management & Task Tracking',
-         url: '#',
-         emoji: '📊',
-      },
-      {
-         name: 'Family Recipe Collection & Meal Planning',
-         url: '#',
-         emoji: '🍳',
-      },
-      {
-         name: 'Fitness Tracker & Workout Routines',
-         url: '#',
-         emoji: '💪',
-      },
-      {
-         name: 'Book Notes & Reading List',
-         url: '#',
-         emoji: '📚',
-      },
-      {
-         name: 'Sustainable Gardening Tips & Plant Care',
-         url: '#',
-         emoji: '🌱',
-      },
-      {
-         name: 'Language Learning Progress & Resources',
-         url: '#',
-         emoji: '🗣️',
-      },
-      {
-         name: 'Home Renovation Ideas & Budget Tracker',
-         url: '#',
-         emoji: '🏠',
-      },
-      {
-         name: 'Personal Finance & Investment Portfolio',
-         url: '#',
-         emoji: '💰',
-      },
-      {
-         name: 'Movie & TV Show Watchlist with Reviews',
-         url: '#',
-         emoji: '🎬',
-      },
-      {
-         name: 'Daily Habit Tracker & Goal Setting',
-         url: '#',
-         emoji: '✅',
-      },
-   ],
-   workspaces: [
-      {
-         name: 'Personal Life Management',
-         emoji: '🏠',
-         pages: [
-            {
-               name: 'Daily Journal & Reflection',
-               url: '#',
-               emoji: '📔',
-            },
-            {
-               name: 'Health & Wellness Tracker',
-               url: '#',
-               emoji: '🍏',
-            },
-            {
-               name: 'Personal Growth & Learning Goals',
-               url: '#',
-               emoji: '🌟',
-            },
-         ],
-      },
-      {
-         name: 'Professional Development',
-         emoji: '💼',
-         pages: [
-            {
-               name: 'Career Objectives & Milestones',
-               url: '#',
-               emoji: '🎯',
-            },
-            {
-               name: 'Skill Acquisition & Training Log',
-               url: '#',
-               emoji: '🧠',
-            },
-            {
-               name: 'Networking Contacts & Events',
-               url: '#',
-               emoji: '🤝',
-            },
-         ],
-      },
-      {
-         name: 'Creative Projects',
-         emoji: '🎨',
-         pages: [
-            {
-               name: 'Writing Ideas & Story Outlines',
-               url: '#',
-               emoji: '✍️',
-            },
-            {
-               name: 'Art & Design Portfolio',
-               url: '#',
-               emoji: '🖼️',
-            },
-            {
-               name: 'Music Composition & Practice Log',
-               url: '#',
-               emoji: '🎵',
-            },
-         ],
-      },
-      {
-         name: 'Home Management',
-         emoji: '🏡',
-         pages: [
-            {
-               name: 'Household Budget & Expense Tracking',
-               url: '#',
-               emoji: '💰',
-            },
-            {
-               name: 'Home Maintenance Schedule & Tasks',
-               url: '#',
-               emoji: '🔧',
-            },
-            {
-               name: 'Family Calendar & Event Planning',
-               url: '#',
-               emoji: '📅',
-            },
-         ],
-      },
-      {
-         name: 'Travel & Adventure',
-         emoji: '🧳',
-         pages: [
-            {
-               name: 'Trip Planning & Itineraries',
-               url: '#',
-               emoji: '🗺️',
-            },
-            {
-               name: 'Travel Bucket List & Inspiration',
-               url: '#',
-               emoji: '🌎',
-            },
-            {
-               name: 'Travel Journal & Photo Gallery',
-               url: '#',
-               emoji: '📸',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar className="border-r-0" {...props}>
-         <SidebarHeader>
-            <TeamSwitcher teams={data.teams} />
-            <NavMain items={data.navMain} />
-         </SidebarHeader>
-         <SidebarContent>
-            <NavFavorites favorites={data.favorites} />
-            <NavWorkspaces workspaces={data.workspaces} />
-            <NavSecondary items={data.navSecondary} className="mt-auto" />
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-10/components/nav-actions.tsx b/apps/web/registry/miami/block/sidebar-10/components/nav-actions.tsx
deleted file mode 100644
index aedbd197..00000000
--- a/apps/web/registry/miami/block/sidebar-10/components/nav-actions.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   ArrowDown,
-   ArrowUp,
-   Bell,
-   Copy,
-   CornerUpLeft,
-   CornerUpRight,
-   FileText,
-   GalleryVerticalEnd,
-   LineChart,
-   Link,
-   MoreHorizontal,
-   Settings2,
-   Star,
-   Trash,
-   Trash2,
-} from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/miami/ui/sidebar'
-
-const data = [
-   [
-      {
-         label: 'Customize Page',
-         icon: Settings2,
-      },
-      {
-         label: 'Turn into wiki',
-         icon: FileText,
-      },
-   ],
-   [
-      {
-         label: 'Copy Link',
-         icon: Link,
-      },
-      {
-         label: 'Duplicate',
-         icon: Copy,
-      },
-      {
-         label: 'Move to',
-         icon: CornerUpRight,
-      },
-      {
-         label: 'Move to Trash',
-         icon: Trash2,
-      },
-   ],
-   [
-      {
-         label: 'Undo',
-         icon: CornerUpLeft,
-      },
-      {
-         label: 'View analytics',
-         icon: LineChart,
-      },
-      {
-         label: 'Version History',
-         icon: GalleryVerticalEnd,
-      },
-      {
-         label: 'Show delete pages',
-         icon: Trash,
-      },
-      {
-         label: 'Notifications',
-         icon: Bell,
-      },
-   ],
-   [
-      {
-         label: 'Import',
-         icon: ArrowUp,
-      },
-      {
-         label: 'Export',
-         icon: ArrowDown,
-      },
-   ],
-]
-
-export function NavActions() {
-   const [isOpen, setIsOpen] = React.useState(false)
-
-   React.useEffect(() => {
-      setIsOpen(true)
-   }, [])
-
-   return (
-      <div className="flex items-center gap-2 text-sm">
-         <div className="text-muted-foreground hidden font-medium md:inline-block">
-            Edit Oct 08
-         </div>
-         <Button variant="ghost" size="icon" className="size-7">
-            <Star />
-         </Button>
-         <Popover open={isOpen} onOpenChange={setIsOpen}>
-            <PopoverTrigger asChild>
-               <Button
-                  variant="ghost"
-                  size="icon"
-                  className="data-[state=open]:bg-accent size-7"
-               >
-                  <MoreHorizontal />
-               </Button>
-            </PopoverTrigger>
-            <PopoverContent
-               className="w-56 overflow-hidden rounded-lg p-0"
-               align="end"
-            >
-               <Sidebar collapsible="none" className="bg-transparent">
-                  <SidebarContent>
-                     {data.map((group, index) => (
-                        <SidebarGroup key={index} className="border-b last:border-none">
-                           <SidebarGroupContent className="gap-0">
-                              <SidebarMenu>
-                                 {group.map((item, index) => (
-                                    <SidebarMenuItem key={index}>
-                                       <SidebarMenuButton>
-                                          <item.icon />
-                                          {' '}
-                                          <span>{item.label}</span>
-                                       </SidebarMenuButton>
-                                    </SidebarMenuItem>
-                                 ))}
-                              </SidebarMenu>
-                           </SidebarGroupContent>
-                        </SidebarGroup>
-                     ))}
-                  </SidebarContent>
-               </Sidebar>
-            </PopoverContent>
-         </Popover>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-10/components/nav-favorites.tsx b/apps/web/registry/miami/block/sidebar-10/components/nav-favorites.tsx
deleted file mode 100644
index 08a67749..00000000
--- a/apps/web/registry/miami/block/sidebar-10/components/nav-favorites.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import {
-   ArrowUpRight,
-   Link,
-   MoreHorizontal,
-   StarOff,
-   Trash2,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavFavorites({
-   favorites,
-}: {
-   favorites: {
-      name: string
-      url: string
-      emoji: string
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-         <SidebarGroupLabel>Favorites</SidebarGroupLabel>
-         <SidebarMenu>
-            {favorites.map(item => (
-               <SidebarMenuItem key={item.name}>
-                  <SidebarMenuButton asChild>
-                     <a href={item.url} title={item.name}>
-                        <span>{item.emoji}</span>
-                        <span>{item.name}</span>
-                     </a>
-                  </SidebarMenuButton>
-                  <DropdownMenu>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover>
-                           <MoreHorizontal />
-                           <span className="sr-only">More</span>
-                        </SidebarMenuAction>
-                     </DropdownMenuTrigger>
-                     <DropdownMenuContent
-                        className="w-56 rounded-lg"
-                        side={isMobile ? 'bottom' : 'right'}
-                        align={isMobile ? 'end' : 'start'}
-                     >
-                        <DropdownMenuItem>
-                           <StarOff className="text-muted-foreground" />
-                           <span>Remove from Favorites</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Link className="text-muted-foreground" />
-                           <span>Copy Link</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <ArrowUpRight className="text-muted-foreground" />
-                           <span>Open in New Tab</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Trash2 className="text-muted-foreground" />
-                           <span>Delete</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuContent>
-                  </DropdownMenu>
-               </SidebarMenuItem>
-            ))}
-            <SidebarMenuItem>
-               <SidebarMenuButton className="text-sidebar-foreground/70">
-                  <MoreHorizontal />
-                  <span>More</span>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-10/components/nav-main.tsx b/apps/web/registry/miami/block/sidebar-10/components/nav-main.tsx
deleted file mode 100644
index 21652805..00000000
--- a/apps/web/registry/miami/block/sidebar-10/components/nav-main.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-import type { LucideIcon } from 'lucide-react'
-
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon: LucideIcon
-      isActive?: boolean
-   }[]
-}) {
-   return (
-      <SidebarMenu>
-         {items.map(item => (
-            <SidebarMenuItem key={item.title}>
-               <SidebarMenuButton asChild isActive={item.isActive}>
-                  <a href={item.url}>
-                     <item.icon />
-                     <span>{item.title}</span>
-                  </a>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         ))}
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-10/components/nav-secondary.tsx b/apps/web/registry/miami/block/sidebar-10/components/nav-secondary.tsx
deleted file mode 100644
index 29f4ab5e..00000000
--- a/apps/web/registry/miami/block/sidebar-10/components/nav-secondary.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react'
-import type { LucideIcon } from 'lucide-react'
-
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarMenu,
-   SidebarMenuBadge,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavSecondary({
-   items,
-   ...props
-}: {
-   items: {
-      title: string
-      url: string
-      icon: LucideIcon
-      badge?: React.ReactNode
-   }[]
-} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
-   return (
-      <SidebarGroup {...props}>
-         <SidebarGroupContent>
-            <SidebarMenu>
-               {items.map(item => (
-                  <SidebarMenuItem key={item.title}>
-                     <SidebarMenuButton asChild>
-                        <a href={item.url}>
-                           <item.icon />
-                           <span>{item.title}</span>
-                        </a>
-                     </SidebarMenuButton>
-                     {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
-                  </SidebarMenuItem>
-               ))}
-            </SidebarMenu>
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-10/components/nav-workspaces.tsx b/apps/web/registry/miami/block/sidebar-10/components/nav-workspaces.tsx
deleted file mode 100644
index b55eaddd..00000000
--- a/apps/web/registry/miami/block/sidebar-10/components/nav-workspaces.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavWorkspaces({
-   workspaces,
-}: {
-   workspaces: {
-      name: string
-      emoji: React.ReactNode
-      pages: {
-         name: string
-         emoji: React.ReactNode
-      }[]
-   }[]
-}) {
-   return (
-      <SidebarGroup>
-         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
-         <SidebarGroupContent>
-            <SidebarMenu>
-               {workspaces.map(workspace => (
-                  <Collapsible key={workspace.name}>
-                     <SidebarMenuItem>
-                        <SidebarMenuButton asChild>
-                           <a href="#">
-                              <span>{workspace.emoji}</span>
-                              <span>{workspace.name}</span>
-                           </a>
-                        </SidebarMenuButton>
-                        <CollapsibleTrigger asChild>
-                           <SidebarMenuAction
-                              className="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90"
-                              showOnHover
-                           >
-                              <ChevronRight />
-                           </SidebarMenuAction>
-                        </CollapsibleTrigger>
-                        <SidebarMenuAction showOnHover>
-                           <Plus />
-                        </SidebarMenuAction>
-                        <CollapsibleContent>
-                           <SidebarMenuSub>
-                              {workspace.pages.map(page => (
-                                 <SidebarMenuSubItem key={page.name}>
-                                    <SidebarMenuSubButton asChild>
-                                       <a href="#">
-                                          <span>{page.emoji}</span>
-                                          <span>{page.name}</span>
-                                       </a>
-                                    </SidebarMenuSubButton>
-                                 </SidebarMenuSubItem>
-                              ))}
-                           </SidebarMenuSub>
-                        </CollapsibleContent>
-                     </SidebarMenuItem>
-                  </Collapsible>
-               ))}
-               <SidebarMenuItem>
-                  <SidebarMenuButton className="text-sidebar-foreground/70">
-                     <MoreHorizontal />
-                     <span>More</span>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-10/components/team-switcher.tsx b/apps/web/registry/miami/block/sidebar-10/components/team-switcher.tsx
deleted file mode 100644
index a04e96c8..00000000
--- a/apps/web/registry/miami/block/sidebar-10/components/team-switcher.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronDown, Plus } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function TeamSwitcher({
-   teams,
-}: {
-   teams: {
-      name: string
-      logo: React.ElementType
-      plan: string
-   }[]
-}) {
-   const [activeTeam, setActiveTeam] = React.useState(teams[0])
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton className="w-fit px-1.5">
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
-                        <activeTeam.logo className="size-3" />
-                     </div>
-                     <span className="truncate font-semibold">{activeTeam.name}</span>
-                     <ChevronDown className="opacity-50" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-64 rounded-lg"
-                  align="start"
-                  side="bottom"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
-                     Teams
-                  </DropdownMenuLabel>
-                  {teams.map((team, index) => (
-                     <DropdownMenuItem
-                        key={team.name}
-                        onClick={() => setActiveTeam(team)}
-                        className="gap-2 p-2"
-                     >
-                        <div className="flex size-6 items-center justify-center rounded-sm border">
-                           <team.logo className="size-4 shrink-0" />
-                        </div>
-                        {team.name}
-                        <DropdownMenuShortcut>
-                           ⌘
-                           {index + 1}
-                        </DropdownMenuShortcut>
-                     </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="gap-2 p-2">
-                     <div className="bg-background flex size-6 items-center justify-center rounded-md border">
-                        <Plus className="size-4" />
-                     </div>
-                     <div className="text-muted-foreground font-medium">Add team</div>
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-10/page.tsx b/apps/web/registry/miami/block/sidebar-10/page.tsx
deleted file mode 100644
index b101a814..00000000
--- a/apps/web/registry/miami/block/sidebar-10/page.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-10/components/app-sidebar'
-import { NavActions } from '~/registry/miami/block/sidebar-10/components/nav-actions'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbList,
-   BreadcrumbPage,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar in a popover.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-14 shrink-0 items-center gap-2">
-               <div className="flex flex-1 items-center gap-2 px-3">
-                  <SidebarTrigger />
-                  <Separator orientation="vertical" className="mr-2 h-4" />
-                  <Breadcrumb>
-                     <BreadcrumbList>
-                        <BreadcrumbItem>
-                           <BreadcrumbPage className="line-clamp-1">
-                              Project Management & Task Tracking
-                           </BreadcrumbPage>
-                        </BreadcrumbItem>
-                     </BreadcrumbList>
-                  </Breadcrumb>
-               </div>
-               <div className="ml-auto px-3">
-                  <NavActions />
-               </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 px-4 py-10">
-               <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
-               <div className="bg-muted/50 mx-auto size-full max-w-3xl rounded-xl" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-11/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-11/components/app-sidebar.tsx
deleted file mode 100644
index a2e65917..00000000
--- a/apps/web/registry/miami/block/sidebar-11/components/app-sidebar.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import * as React from 'react'
-import { ChevronRight, File, Folder } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuBadge,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarRail,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   changes: [
-      {
-         file: 'README.md',
-         state: 'M',
-      },
-      {
-         file: 'api/hello/route.ts',
-         state: 'U',
-      },
-      {
-         file: 'app/layout.tsx',
-         state: 'M',
-      },
-   ],
-   tree: [
-      [
-         'app',
-         [
-            'api',
-            ['hello', ['route.ts']],
-            'page.tsx',
-            'layout.tsx',
-            ['blog', ['page.tsx']],
-         ],
-      ],
-      [
-         'components',
-         ['ui', 'button.tsx', 'card.tsx'],
-         'header.tsx',
-         'footer.tsx',
-      ],
-      ['lib', ['util.ts']],
-      ['public', 'favicon.ico', 'vercel.svg'],
-      '.eslintrc.json',
-      '.gitignore',
-      'next.config.js',
-      'tailwind.config.js',
-      'package.json',
-      'README.md',
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarContent>
-            <SidebarGroup>
-               <SidebarGroupLabel>Changes</SidebarGroupLabel>
-               <SidebarGroupContent>
-                  <SidebarMenu>
-                     {data.changes.map((item, index) => (
-                        <SidebarMenuItem key={index}>
-                           <SidebarMenuButton>
-                              <File />
-                              {item.file}
-                           </SidebarMenuButton>
-                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>
-                        </SidebarMenuItem>
-                     ))}
-                  </SidebarMenu>
-               </SidebarGroupContent>
-            </SidebarGroup>
-            <SidebarGroup>
-               <SidebarGroupLabel>Files</SidebarGroupLabel>
-               <SidebarGroupContent>
-                  <SidebarMenu>
-                     {data.tree.map((item, index) => (
-                        <Tree key={index} item={item} />
-                     ))}
-                  </SidebarMenu>
-               </SidebarGroupContent>
-            </SidebarGroup>
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
-
-function Tree({ item }: { item: string | any[] }) {
-   const [name, ...items] = Array.isArray(item) ? item : [item]
-
-   if (!items.length) {
-      return (
-         <SidebarMenuButton
-            isActive={name === 'button.tsx'}
-            className="data-[active=true]:bg-transparent"
-         >
-            <File />
-            {name}
-         </SidebarMenuButton>
-      )
-   }
-
-   return (
-      <SidebarMenuItem>
-         <Collapsible
-            className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
-            defaultOpen={name === 'components' || name === 'ui'}
-         >
-            <CollapsibleTrigger asChild>
-               <SidebarMenuButton>
-                  <ChevronRight className="transition-transform" />
-                  <Folder />
-                  {name}
-               </SidebarMenuButton>
-            </CollapsibleTrigger>
-            <CollapsibleContent>
-               <SidebarMenuSub>
-                  {items.map((subItem, index) => (
-                     <Tree key={index} item={subItem} />
-                  ))}
-               </SidebarMenuSub>
-            </CollapsibleContent>
-         </Collapsible>
-      </SidebarMenuItem>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-11/page.tsx b/apps/web/registry/miami/block/sidebar-11/page.tsx
deleted file mode 100644
index f0977c63..00000000
--- a/apps/web/registry/miami/block/sidebar-11/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-11/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar with a collapsible file tree.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">components</BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">ui</BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>button.tsx</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-12/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-12/components/app-sidebar.tsx
deleted file mode 100644
index 737ed2a4..00000000
--- a/apps/web/registry/miami/block/sidebar-12/components/app-sidebar.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react'
-import { Plus } from 'lucide-react'
-
-import { Calendars } from '~/registry/miami/block/sidebar-12/components/calendars'
-import { DatePicker } from '~/registry/miami/block/sidebar-12/components/date-picker'
-import { NavUser } from '~/registry/miami/block/sidebar-12/components/nav-user'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarRail,
-   SidebarSeparator,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   calendars: [
-      {
-         name: 'My Calendars',
-         items: ['Personal', 'Work', 'Family'],
-      },
-      {
-         name: 'Favorites',
-         items: ['Holidays', 'Birthdays'],
-      },
-      {
-         name: 'Other',
-         items: ['Travel', 'Reminders', 'Deadlines'],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarHeader className="border-sidebar-border h-16 border-b">
-            <NavUser user={data.user} />
-         </SidebarHeader>
-         <SidebarContent>
-            <DatePicker />
-            <SidebarSeparator className="mx-0" />
-            <Calendars calendars={data.calendars} />
-         </SidebarContent>
-         <SidebarFooter>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton>
-                     <Plus />
-                     <span>New Calendar</span>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarFooter>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-12/components/calendars.tsx b/apps/web/registry/miami/block/sidebar-12/components/calendars.tsx
deleted file mode 100644
index e74bb44b..00000000
--- a/apps/web/registry/miami/block/sidebar-12/components/calendars.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react'
-import { Check, ChevronRight } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarSeparator,
-} from '~/registry/miami/ui/sidebar'
-
-export function Calendars({
-   calendars,
-}: {
-   calendars: {
-      name: string
-      items: string[]
-   }[]
-}) {
-   return (
-      <>
-         {calendars.map((calendar, index) => (
-            <React.Fragment key={calendar.name}>
-               <SidebarGroup key={calendar.name} className="py-0">
-                  <Collapsible
-                     defaultOpen={index === 0}
-                     className="group/collapsible"
-                  >
-                     <SidebarGroupLabel
-                        asChild
-                        className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
-                     >
-                        <CollapsibleTrigger>
-                           {calendar.name}
-                           {' '}
-                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-                        </CollapsibleTrigger>
-                     </SidebarGroupLabel>
-                     <CollapsibleContent>
-                        <SidebarGroupContent>
-                           <SidebarMenu>
-                              {calendar.items.map((item, index) => (
-                                 <SidebarMenuItem key={item}>
-                                    <SidebarMenuButton>
-                                       <div
-                                          data-active={index < 2}
-                                          className="group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
-                                       >
-                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
-                                       </div>
-                                       {item}
-                                    </SidebarMenuButton>
-                                 </SidebarMenuItem>
-                              ))}
-                           </SidebarMenu>
-                        </SidebarGroupContent>
-                     </CollapsibleContent>
-                  </Collapsible>
-               </SidebarGroup>
-               <SidebarSeparator className="mx-0" />
-            </React.Fragment>
-         ))}
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-12/components/date-picker.tsx b/apps/web/registry/miami/block/sidebar-12/components/date-picker.tsx
deleted file mode 100644
index 99c7273b..00000000
--- a/apps/web/registry/miami/block/sidebar-12/components/date-picker.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Calendar } from '~/registry/miami/ui/calendar'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-} from '~/registry/miami/ui/sidebar'
-
-export function DatePicker() {
-   return (
-      <SidebarGroup className="px-0">
-         <SidebarGroupContent>
-            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-12/components/nav-user.tsx b/apps/web/registry/miami/block/sidebar-12/components/nav-user.tsx
deleted file mode 100644
index c9e21424..00000000
--- a/apps/web/registry/miami/block/sidebar-12/components/nav-user.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="start"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-12/page.tsx b/apps/web/registry/miami/block/sidebar-12/page.tsx
deleted file mode 100644
index 58db9716..00000000
--- a/apps/web/registry/miami/block/sidebar-12/page.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-12/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbList,
-   BreadcrumbPage,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar with a calendar.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-            <header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <SidebarTrigger className="-ml-1" />
-               <Separator orientation="vertical" className="mr-2 h-4" />
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>October 2024</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-5">
-                  {Array.from({ length: 20 }).map((_, i) => (
-                     <div key={i} className="bg-muted/50 aspect-square rounded-xl" />
-                  ))}
-               </div>
-            </div>
-         </SidebarInset>
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-13/components/settings-dialog.tsx b/apps/web/registry/miami/block/sidebar-13/components/settings-dialog.tsx
deleted file mode 100644
index b5a8a0c0..00000000
--- a/apps/web/registry/miami/block/sidebar-13/components/settings-dialog.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   Bell,
-   Check,
-   Globe,
-   Home,
-   Keyboard,
-   Link,
-   Lock,
-   Menu,
-   MessageCircle,
-   Paintbrush,
-   Settings,
-   Video,
-} from 'lucide-react'
-
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Dialog,
-   DialogContent,
-   DialogDescription,
-   DialogTitle,
-   DialogTrigger,
-} from '~/registry/miami/ui/dialog'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarProvider,
-} from '~/registry/miami/ui/sidebar'
-
-const data = {
-   nav: [
-      { name: 'Notifications', icon: Bell },
-      { name: 'Navigation', icon: Menu },
-      { name: 'Home', icon: Home },
-      { name: 'Appearance', icon: Paintbrush },
-      { name: 'Messages & media', icon: MessageCircle },
-      { name: 'Language & region', icon: Globe },
-      { name: 'Accessibility', icon: Keyboard },
-      { name: 'Mark as read', icon: Check },
-      { name: 'Audio & video', icon: Video },
-      { name: 'Connected accounts', icon: Link },
-      { name: 'Privacy & visibility', icon: Lock },
-      { name: 'Advanced', icon: Settings },
-   ],
-}
-
-export function SettingsDialog() {
-   const [open, setOpen] = React.useState(true)
-
-   return (
-      <Dialog open={open} onOpenChange={setOpen}>
-         <DialogTrigger asChild>
-            <Button size="sm">Open Dialog</Button>
-         </DialogTrigger>
-         <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
-            <DialogTitle className="sr-only">Settings</DialogTitle>
-            <DialogDescription className="sr-only">
-               Customize your settings here.
-            </DialogDescription>
-            <SidebarProvider className="items-start">
-               <Sidebar collapsible="none" className="hidden md:flex">
-                  <SidebarContent>
-                     <SidebarGroup>
-                        <SidebarGroupContent>
-                           <SidebarMenu>
-                              {data.nav.map(item => (
-                                 <SidebarMenuItem key={item.name}>
-                                    <SidebarMenuButton
-                                       asChild
-                                       isActive={item.name === 'Messages & media'}
-                                    >
-                                       <a href="#">
-                                          <item.icon />
-                                          <span>{item.name}</span>
-                                       </a>
-                                    </SidebarMenuButton>
-                                 </SidebarMenuItem>
-                              ))}
-                           </SidebarMenu>
-                        </SidebarGroupContent>
-                     </SidebarGroup>
-                  </SidebarContent>
-               </Sidebar>
-               <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
-                  <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-                     <div className="flex items-center gap-2 px-4">
-                        <Breadcrumb>
-                           <BreadcrumbList>
-                              <BreadcrumbItem className="hidden md:block">
-                                 <BreadcrumbLink href="#">Settings</BreadcrumbLink>
-                              </BreadcrumbItem>
-                              <BreadcrumbSeparator className="hidden md:block" />
-                              <BreadcrumbItem>
-                                 <BreadcrumbPage>Messages & media</BreadcrumbPage>
-                              </BreadcrumbItem>
-                           </BreadcrumbList>
-                        </Breadcrumb>
-                     </div>
-                  </header>
-                  <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
-                     {Array.from({ length: 10 }).map((_, i) => (
-                        <div
-                           key={i}
-                           className="bg-muted/50 aspect-video max-w-3xl rounded-xl"
-                        />
-                     ))}
-                  </div>
-               </main>
-            </SidebarProvider>
-         </DialogContent>
-      </Dialog>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-13/page.tsx b/apps/web/registry/miami/block/sidebar-13/page.tsx
deleted file mode 100644
index fe8f0402..00000000
--- a/apps/web/registry/miami/block/sidebar-13/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { SettingsDialog } from '~/registry/miami/block/sidebar-13/components/settings-dialog'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar in a dialog.'
-
-export default function Page() {
-   return (
-      <div className="flex h-svh items-center justify-center">
-         <SettingsDialog />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-14/components/app-sidebar.tsx b/apps/web/registry/miami/block/sidebar-14/components/app-sidebar.tsx
deleted file mode 100644
index 731039a8..00000000
--- a/apps/web/registry/miami/block/sidebar-14/components/app-sidebar.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import * as React from 'react'
-
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-   SidebarRail,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   navMain: [
-      {
-         title: 'Getting Started',
-         url: '#',
-         items: [
-            {
-               title: 'Installation',
-               url: '#',
-            },
-            {
-               title: 'Project Structure',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Building Your Application',
-         url: '#',
-         items: [
-            {
-               title: 'Routing',
-               url: '#',
-            },
-            {
-               title: 'Data Fetching',
-               url: '#',
-               isActive: true,
-            },
-            {
-               title: 'Rendering',
-               url: '#',
-            },
-            {
-               title: 'Caching',
-               url: '#',
-            },
-            {
-               title: 'Styling',
-               url: '#',
-            },
-            {
-               title: 'Optimizing',
-               url: '#',
-            },
-            {
-               title: 'Configuring',
-               url: '#',
-            },
-            {
-               title: 'Testing',
-               url: '#',
-            },
-            {
-               title: 'Authentication',
-               url: '#',
-            },
-            {
-               title: 'Deploying',
-               url: '#',
-            },
-            {
-               title: 'Upgrading',
-               url: '#',
-            },
-            {
-               title: 'Examples',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'API Reference',
-         url: '#',
-         items: [
-            {
-               title: 'Components',
-               url: '#',
-            },
-            {
-               title: 'File Conventions',
-               url: '#',
-            },
-            {
-               title: 'Functions',
-               url: '#',
-            },
-            {
-               title: 'next.config.js Options',
-               url: '#',
-            },
-            {
-               title: 'CLI',
-               url: '#',
-            },
-            {
-               title: 'Edge Runtime',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Architecture',
-         url: '#',
-         items: [
-            {
-               title: 'Accessibility',
-               url: '#',
-            },
-            {
-               title: 'Fast Refresh',
-               url: '#',
-            },
-            {
-               title: 'Next.js Compiler',
-               url: '#',
-            },
-            {
-               title: 'Supported Browsers',
-               url: '#',
-            },
-            {
-               title: 'Turbopack',
-               url: '#',
-            },
-         ],
-      },
-      {
-         title: 'Community',
-         url: '#',
-         items: [
-            {
-               title: 'Contribution Guide',
-               url: '#',
-            },
-         ],
-      },
-   ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar {...props}>
-         <SidebarContent>
-            <SidebarGroup>
-               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
-               <SidebarGroupContent>
-                  <SidebarMenu>
-                     {data.navMain.map(item => (
-                        <SidebarMenuItem key={item.title}>
-                           <SidebarMenuButton asChild>
-                              <a href={item.url} className="font-medium">
-                                 {item.title}
-                              </a>
-                           </SidebarMenuButton>
-                           {item.items?.length
-                              ? (
-                                    <SidebarMenuSub>
-                                       {item.items.map(item => (
-                                          <SidebarMenuSubItem key={item.title}>
-                                             <SidebarMenuSubButton
-                                                asChild
-                                                isActive={item.isActive}
-                                             >
-                                                <a href={item.url}>{item.title}</a>
-                                             </SidebarMenuSubButton>
-                                          </SidebarMenuSubItem>
-                                       ))}
-                                    </SidebarMenuSub>
-                                 )
-                              : null}
-                        </SidebarMenuItem>
-                     ))}
-                  </SidebarMenu>
-               </SidebarGroupContent>
-            </SidebarGroup>
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-14/page.tsx b/apps/web/registry/miami/block/sidebar-14/page.tsx
deleted file mode 100644
index 0d205792..00000000
--- a/apps/web/registry/miami/block/sidebar-14/page.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { AppSidebar } from '~/registry/miami/block/sidebar-14/components/app-sidebar'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A sidebar on the right.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-               <Breadcrumb>
-                  <BreadcrumbList>
-                     <BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbLink href="#">
-                           Building Your Application
-                        </BreadcrumbLink>
-                     </BreadcrumbItem>
-                     <BreadcrumbSeparator className="hidden md:block" />
-                     <BreadcrumbItem>
-                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                     </BreadcrumbItem>
-                  </BreadcrumbList>
-               </Breadcrumb>
-               <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-                  <div className="bg-muted/50 aspect-video rounded-xl" />
-               </div>
-               <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-            </div>
-         </SidebarInset>
-         <AppSidebar side="right" />
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-15/components/calendars.tsx b/apps/web/registry/miami/block/sidebar-15/components/calendars.tsx
deleted file mode 100644
index e74bb44b..00000000
--- a/apps/web/registry/miami/block/sidebar-15/components/calendars.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react'
-import { Check, ChevronRight } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarSeparator,
-} from '~/registry/miami/ui/sidebar'
-
-export function Calendars({
-   calendars,
-}: {
-   calendars: {
-      name: string
-      items: string[]
-   }[]
-}) {
-   return (
-      <>
-         {calendars.map((calendar, index) => (
-            <React.Fragment key={calendar.name}>
-               <SidebarGroup key={calendar.name} className="py-0">
-                  <Collapsible
-                     defaultOpen={index === 0}
-                     className="group/collapsible"
-                  >
-                     <SidebarGroupLabel
-                        asChild
-                        className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
-                     >
-                        <CollapsibleTrigger>
-                           {calendar.name}
-                           {' '}
-                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-                        </CollapsibleTrigger>
-                     </SidebarGroupLabel>
-                     <CollapsibleContent>
-                        <SidebarGroupContent>
-                           <SidebarMenu>
-                              {calendar.items.map((item, index) => (
-                                 <SidebarMenuItem key={item}>
-                                    <SidebarMenuButton>
-                                       <div
-                                          data-active={index < 2}
-                                          className="group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
-                                       >
-                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
-                                       </div>
-                                       {item}
-                                    </SidebarMenuButton>
-                                 </SidebarMenuItem>
-                              ))}
-                           </SidebarMenu>
-                        </SidebarGroupContent>
-                     </CollapsibleContent>
-                  </Collapsible>
-               </SidebarGroup>
-               <SidebarSeparator className="mx-0" />
-            </React.Fragment>
-         ))}
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-15/components/date-picker.tsx b/apps/web/registry/miami/block/sidebar-15/components/date-picker.tsx
deleted file mode 100644
index 99c7273b..00000000
--- a/apps/web/registry/miami/block/sidebar-15/components/date-picker.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Calendar } from '~/registry/miami/ui/calendar'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-} from '~/registry/miami/ui/sidebar'
-
-export function DatePicker() {
-   return (
-      <SidebarGroup className="px-0">
-         <SidebarGroupContent>
-            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-15/components/nav-favorites.tsx b/apps/web/registry/miami/block/sidebar-15/components/nav-favorites.tsx
deleted file mode 100644
index 08a67749..00000000
--- a/apps/web/registry/miami/block/sidebar-15/components/nav-favorites.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import {
-   ArrowUpRight,
-   Link,
-   MoreHorizontal,
-   StarOff,
-   Trash2,
-} from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarGroup,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavFavorites({
-   favorites,
-}: {
-   favorites: {
-      name: string
-      url: string
-      emoji: string
-   }[]
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-         <SidebarGroupLabel>Favorites</SidebarGroupLabel>
-         <SidebarMenu>
-            {favorites.map(item => (
-               <SidebarMenuItem key={item.name}>
-                  <SidebarMenuButton asChild>
-                     <a href={item.url} title={item.name}>
-                        <span>{item.emoji}</span>
-                        <span>{item.name}</span>
-                     </a>
-                  </SidebarMenuButton>
-                  <DropdownMenu>
-                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover>
-                           <MoreHorizontal />
-                           <span className="sr-only">More</span>
-                        </SidebarMenuAction>
-                     </DropdownMenuTrigger>
-                     <DropdownMenuContent
-                        className="w-56 rounded-lg"
-                        side={isMobile ? 'bottom' : 'right'}
-                        align={isMobile ? 'end' : 'start'}
-                     >
-                        <DropdownMenuItem>
-                           <StarOff className="text-muted-foreground" />
-                           <span>Remove from Favorites</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Link className="text-muted-foreground" />
-                           <span>Copy Link</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                           <ArrowUpRight className="text-muted-foreground" />
-                           <span>Open in New Tab</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                           <Trash2 className="text-muted-foreground" />
-                           <span>Delete</span>
-                        </DropdownMenuItem>
-                     </DropdownMenuContent>
-                  </DropdownMenu>
-               </SidebarMenuItem>
-            ))}
-            <SidebarMenuItem>
-               <SidebarMenuButton className="text-sidebar-foreground/70">
-                  <MoreHorizontal />
-                  <span>More</span>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         </SidebarMenu>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-15/components/nav-main.tsx b/apps/web/registry/miami/block/sidebar-15/components/nav-main.tsx
deleted file mode 100644
index 21652805..00000000
--- a/apps/web/registry/miami/block/sidebar-15/components/nav-main.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-import type { LucideIcon } from 'lucide-react'
-
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavMain({
-   items,
-}: {
-   items: {
-      title: string
-      url: string
-      icon: LucideIcon
-      isActive?: boolean
-   }[]
-}) {
-   return (
-      <SidebarMenu>
-         {items.map(item => (
-            <SidebarMenuItem key={item.title}>
-               <SidebarMenuButton asChild isActive={item.isActive}>
-                  <a href={item.url}>
-                     <item.icon />
-                     <span>{item.title}</span>
-                  </a>
-               </SidebarMenuButton>
-            </SidebarMenuItem>
-         ))}
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-15/components/nav-secondary.tsx b/apps/web/registry/miami/block/sidebar-15/components/nav-secondary.tsx
deleted file mode 100644
index 29f4ab5e..00000000
--- a/apps/web/registry/miami/block/sidebar-15/components/nav-secondary.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react'
-import type { LucideIcon } from 'lucide-react'
-
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarMenu,
-   SidebarMenuBadge,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavSecondary({
-   items,
-   ...props
-}: {
-   items: {
-      title: string
-      url: string
-      icon: LucideIcon
-      badge?: React.ReactNode
-   }[]
-} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
-   return (
-      <SidebarGroup {...props}>
-         <SidebarGroupContent>
-            <SidebarMenu>
-               {items.map(item => (
-                  <SidebarMenuItem key={item.title}>
-                     <SidebarMenuButton asChild>
-                        <a href={item.url}>
-                           <item.icon />
-                           <span>{item.title}</span>
-                        </a>
-                     </SidebarMenuButton>
-                     {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
-                  </SidebarMenuItem>
-               ))}
-            </SidebarMenu>
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-15/components/nav-user.tsx b/apps/web/registry/miami/block/sidebar-15/components/nav-user.tsx
deleted file mode 100644
index c9e21424..00000000
--- a/apps/web/registry/miami/block/sidebar-15/components/nav-user.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import {
-   BadgeCheck,
-   Bell,
-   ChevronsUpDown,
-   CreditCard,
-   LogOut,
-   Sparkles,
-} from 'lucide-react'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   useSidebar,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavUser({
-   user,
-}: {
-   user: {
-      name: string
-      email: string
-      avatar: string
-   }
-}) {
-   const { isMobile } = useSidebar()
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton
-                     size="lg"
-                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                     <Avatar className="size-8 rounded-lg">
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                     </Avatar>
-                     <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate font-semibold">{user.name}</span>
-                        <span className="truncate text-xs">{user.email}</span>
-                     </div>
-                     <ChevronsUpDown className="ml-auto size-4" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side={isMobile ? 'bottom' : 'right'}
-                  align="start"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="p-0 font-normal">
-                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="size-8 rounded-lg">
-                           <AvatarImage src={user.avatar} alt={user.name} />
-                           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                           <span className="truncate font-semibold">{user.name}</span>
-                           <span className="truncate text-xs">{user.email}</span>
-                        </div>
-                     </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <Sparkles />
-                        Upgrade to Pro
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                     <DropdownMenuItem>
-                        <BadgeCheck />
-                        Account
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <CreditCard />
-                        Billing
-                     </DropdownMenuItem>
-                     <DropdownMenuItem>
-                        <Bell />
-                        Notifications
-                     </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                     <LogOut />
-                     Log out
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-15/components/nav-workspaces.tsx b/apps/web/registry/miami/block/sidebar-15/components/nav-workspaces.tsx
deleted file mode 100644
index b55eaddd..00000000
--- a/apps/web/registry/miami/block/sidebar-15/components/nav-workspaces.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react'
-
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-import {
-   SidebarGroup,
-   SidebarGroupContent,
-   SidebarGroupLabel,
-   SidebarMenu,
-   SidebarMenuAction,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarMenuSub,
-   SidebarMenuSubButton,
-   SidebarMenuSubItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function NavWorkspaces({
-   workspaces,
-}: {
-   workspaces: {
-      name: string
-      emoji: React.ReactNode
-      pages: {
-         name: string
-         emoji: React.ReactNode
-      }[]
-   }[]
-}) {
-   return (
-      <SidebarGroup>
-         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
-         <SidebarGroupContent>
-            <SidebarMenu>
-               {workspaces.map(workspace => (
-                  <Collapsible key={workspace.name}>
-                     <SidebarMenuItem>
-                        <SidebarMenuButton asChild>
-                           <a href="#">
-                              <span>{workspace.emoji}</span>
-                              <span>{workspace.name}</span>
-                           </a>
-                        </SidebarMenuButton>
-                        <CollapsibleTrigger asChild>
-                           <SidebarMenuAction
-                              className="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90"
-                              showOnHover
-                           >
-                              <ChevronRight />
-                           </SidebarMenuAction>
-                        </CollapsibleTrigger>
-                        <SidebarMenuAction showOnHover>
-                           <Plus />
-                        </SidebarMenuAction>
-                        <CollapsibleContent>
-                           <SidebarMenuSub>
-                              {workspace.pages.map(page => (
-                                 <SidebarMenuSubItem key={page.name}>
-                                    <SidebarMenuSubButton asChild>
-                                       <a href="#">
-                                          <span>{page.emoji}</span>
-                                          <span>{page.name}</span>
-                                       </a>
-                                    </SidebarMenuSubButton>
-                                 </SidebarMenuSubItem>
-                              ))}
-                           </SidebarMenuSub>
-                        </CollapsibleContent>
-                     </SidebarMenuItem>
-                  </Collapsible>
-               ))}
-               <SidebarMenuItem>
-                  <SidebarMenuButton className="text-sidebar-foreground/70">
-                     <MoreHorizontal />
-                     <span>More</span>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarGroupContent>
-      </SidebarGroup>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-15/components/sidebar-left.tsx b/apps/web/registry/miami/block/sidebar-15/components/sidebar-left.tsx
deleted file mode 100644
index 520067bc..00000000
--- a/apps/web/registry/miami/block/sidebar-15/components/sidebar-left.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   AudioWaveform,
-   Blocks,
-   Calendar,
-   Command,
-   Home,
-   Inbox,
-   MessageCircleQuestion,
-   Search,
-   Settings2,
-   Sparkles,
-   Trash2,
-} from 'lucide-react'
-
-import { NavFavorites } from '~/registry/miami/block/sidebar-15/components/nav-favorites'
-import { NavMain } from '~/registry/miami/block/sidebar-15/components/nav-main'
-import { NavSecondary } from '~/registry/miami/block/sidebar-15/components/nav-secondary'
-import { NavWorkspaces } from '~/registry/miami/block/sidebar-15/components/nav-workspaces'
-import { TeamSwitcher } from '~/registry/miami/block/sidebar-15/components/team-switcher'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarHeader,
-   SidebarRail,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   teams: [
-      {
-         name: 'Acme Inc',
-         logo: Command,
-         plan: 'Enterprise',
-      },
-      {
-         name: 'Acme Corp.',
-         logo: AudioWaveform,
-         plan: 'Startup',
-      },
-      {
-         name: 'Evil Corp.',
-         logo: Command,
-         plan: 'Free',
-      },
-   ],
-   navMain: [
-      {
-         title: 'Search',
-         url: '#',
-         icon: Search,
-      },
-      {
-         title: 'Ask AI',
-         url: '#',
-         icon: Sparkles,
-      },
-      {
-         title: 'Home',
-         url: '#',
-         icon: Home,
-         isActive: true,
-      },
-      {
-         title: 'Inbox',
-         url: '#',
-         icon: Inbox,
-         badge: '10',
-      },
-   ],
-   navSecondary: [
-      {
-         title: 'Calendar',
-         url: '#',
-         icon: Calendar,
-      },
-      {
-         title: 'Settings',
-         url: '#',
-         icon: Settings2,
-      },
-      {
-         title: 'Templates',
-         url: '#',
-         icon: Blocks,
-      },
-      {
-         title: 'Trash',
-         url: '#',
-         icon: Trash2,
-      },
-      {
-         title: 'Help',
-         url: '#',
-         icon: MessageCircleQuestion,
-      },
-   ],
-   favorites: [
-      {
-         name: 'Project Management & Task Tracking',
-         url: '#',
-         emoji: '📊',
-      },
-      {
-         name: 'Family Recipe Collection & Meal Planning',
-         url: '#',
-         emoji: '🍳',
-      },
-      {
-         name: 'Fitness Tracker & Workout Routines',
-         url: '#',
-         emoji: '💪',
-      },
-      {
-         name: 'Book Notes & Reading List',
-         url: '#',
-         emoji: '📚',
-      },
-      {
-         name: 'Sustainable Gardening Tips & Plant Care',
-         url: '#',
-         emoji: '🌱',
-      },
-      {
-         name: 'Language Learning Progress & Resources',
-         url: '#',
-         emoji: '🗣️',
-      },
-      {
-         name: 'Home Renovation Ideas & Budget Tracker',
-         url: '#',
-         emoji: '🏠',
-      },
-      {
-         name: 'Personal Finance & Investment Portfolio',
-         url: '#',
-         emoji: '💰',
-      },
-      {
-         name: 'Movie & TV Show Watchlist with Reviews',
-         url: '#',
-         emoji: '🎬',
-      },
-      {
-         name: 'Daily Habit Tracker & Goal Setting',
-         url: '#',
-         emoji: '✅',
-      },
-   ],
-   workspaces: [
-      {
-         name: 'Personal Life Management',
-         emoji: '🏠',
-         pages: [
-            {
-               name: 'Daily Journal & Reflection',
-               url: '#',
-               emoji: '📔',
-            },
-            {
-               name: 'Health & Wellness Tracker',
-               url: '#',
-               emoji: '🍏',
-            },
-            {
-               name: 'Personal Growth & Learning Goals',
-               url: '#',
-               emoji: '🌟',
-            },
-         ],
-      },
-      {
-         name: 'Professional Development',
-         emoji: '💼',
-         pages: [
-            {
-               name: 'Career Objectives & Milestones',
-               url: '#',
-               emoji: '🎯',
-            },
-            {
-               name: 'Skill Acquisition & Training Log',
-               url: '#',
-               emoji: '🧠',
-            },
-            {
-               name: 'Networking Contacts & Events',
-               url: '#',
-               emoji: '🤝',
-            },
-         ],
-      },
-      {
-         name: 'Creative Projects',
-         emoji: '🎨',
-         pages: [
-            {
-               name: 'Writing Ideas & Story Outlines',
-               url: '#',
-               emoji: '✍️',
-            },
-            {
-               name: 'Art & Design Portfolio',
-               url: '#',
-               emoji: '🖼️',
-            },
-            {
-               name: 'Music Composition & Practice Log',
-               url: '#',
-               emoji: '🎵',
-            },
-         ],
-      },
-      {
-         name: 'Home Management',
-         emoji: '🏡',
-         pages: [
-            {
-               name: 'Household Budget & Expense Tracking',
-               url: '#',
-               emoji: '💰',
-            },
-            {
-               name: 'Home Maintenance Schedule & Tasks',
-               url: '#',
-               emoji: '🔧',
-            },
-            {
-               name: 'Family Calendar & Event Planning',
-               url: '#',
-               emoji: '📅',
-            },
-         ],
-      },
-      {
-         name: 'Travel & Adventure',
-         emoji: '🧳',
-         pages: [
-            {
-               name: 'Trip Planning & Itineraries',
-               url: '#',
-               emoji: '🗺️',
-            },
-            {
-               name: 'Travel Bucket List & Inspiration',
-               url: '#',
-               emoji: '🌎',
-            },
-            {
-               name: 'Travel Journal & Photo Gallery',
-               url: '#',
-               emoji: '📸',
-            },
-         ],
-      },
-   ],
-}
-
-export function SidebarLeft({
-   ...props
-}: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar className="border-r-0" {...props}>
-         <SidebarHeader>
-            <TeamSwitcher teams={data.teams} />
-            <NavMain items={data.navMain} />
-         </SidebarHeader>
-         <SidebarContent>
-            <NavFavorites favorites={data.favorites} />
-            <NavWorkspaces workspaces={data.workspaces} />
-            <NavSecondary items={data.navSecondary} className="mt-auto" />
-         </SidebarContent>
-         <SidebarRail />
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-15/components/sidebar-right.tsx b/apps/web/registry/miami/block/sidebar-15/components/sidebar-right.tsx
deleted file mode 100644
index 528b6d46..00000000
--- a/apps/web/registry/miami/block/sidebar-15/components/sidebar-right.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react'
-import { Plus } from 'lucide-react'
-
-import { Calendars } from '~/registry/miami/block/sidebar-15/components/calendars'
-import { DatePicker } from '~/registry/miami/block/sidebar-15/components/date-picker'
-import { NavUser } from '~/registry/miami/block/sidebar-15/components/nav-user'
-import {
-   Sidebar,
-   SidebarContent,
-   SidebarFooter,
-   SidebarHeader,
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-   SidebarRail,
-   SidebarSeparator,
-} from '~/registry/miami/ui/sidebar'
-
-// This is sample data.
-const data = {
-   user: {
-      name: 'shadcn',
-      email: 'm@example.com',
-      avatar: '/avatars/nyxb.jpg',
-   },
-   calendars: [
-      {
-         name: 'My Calendars',
-         items: ['Personal', 'Work', 'Family'],
-      },
-      {
-         name: 'Favorites',
-         items: ['Holidays', 'Birthdays'],
-      },
-      {
-         name: 'Other',
-         items: ['Travel', 'Reminders', 'Deadlines'],
-      },
-   ],
-}
-
-export function SidebarRight({
-   ...props
-}: React.ComponentProps<typeof Sidebar>) {
-   return (
-      <Sidebar
-         collapsible="none"
-         className="sticky top-0 hidden h-svh border-l lg:flex"
-         {...props}
-      >
-         <SidebarHeader className="border-sidebar-border h-16 border-b">
-            <NavUser user={data.user} />
-         </SidebarHeader>
-         <SidebarContent>
-            <DatePicker />
-            <SidebarSeparator className="mx-0" />
-            <Calendars calendars={data.calendars} />
-         </SidebarContent>
-         <SidebarFooter>
-            <SidebarMenu>
-               <SidebarMenuItem>
-                  <SidebarMenuButton>
-                     <Plus />
-                     <span>New Calendar</span>
-                  </SidebarMenuButton>
-               </SidebarMenuItem>
-            </SidebarMenu>
-         </SidebarFooter>
-      </Sidebar>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-15/components/team-switcher.tsx b/apps/web/registry/miami/block/sidebar-15/components/team-switcher.tsx
deleted file mode 100644
index a04e96c8..00000000
--- a/apps/web/registry/miami/block/sidebar-15/components/team-switcher.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronDown, Plus } from 'lucide-react'
-
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import {
-   SidebarMenu,
-   SidebarMenuButton,
-   SidebarMenuItem,
-} from '~/registry/miami/ui/sidebar'
-
-export function TeamSwitcher({
-   teams,
-}: {
-   teams: {
-      name: string
-      logo: React.ElementType
-      plan: string
-   }[]
-}) {
-   const [activeTeam, setActiveTeam] = React.useState(teams[0])
-
-   return (
-      <SidebarMenu>
-         <SidebarMenuItem>
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <SidebarMenuButton className="w-fit px-1.5">
-                     <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
-                        <activeTeam.logo className="size-3" />
-                     </div>
-                     <span className="truncate font-semibold">{activeTeam.name}</span>
-                     <ChevronDown className="opacity-50" />
-                  </SidebarMenuButton>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent
-                  className="w-64 rounded-lg"
-                  align="start"
-                  side="bottom"
-                  sideOffset={4}
-               >
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
-                     Teams
-                  </DropdownMenuLabel>
-                  {teams.map((team, index) => (
-                     <DropdownMenuItem
-                        key={team.name}
-                        onClick={() => setActiveTeam(team)}
-                        className="gap-2 p-2"
-                     >
-                        <div className="flex size-6 items-center justify-center rounded-sm border">
-                           <team.logo className="size-4 shrink-0" />
-                        </div>
-                        {team.name}
-                        <DropdownMenuShortcut>
-                           ⌘
-                           {index + 1}
-                        </DropdownMenuShortcut>
-                     </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="gap-2 p-2">
-                     <div className="bg-background flex size-6 items-center justify-center rounded-md border">
-                        <Plus className="size-4" />
-                     </div>
-                     <div className="text-muted-foreground font-medium">Add team</div>
-                  </DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </SidebarMenuItem>
-      </SidebarMenu>
-   )
-}
diff --git a/apps/web/registry/miami/block/sidebar-15/page.tsx b/apps/web/registry/miami/block/sidebar-15/page.tsx
deleted file mode 100644
index 4c409dcf..00000000
--- a/apps/web/registry/miami/block/sidebar-15/page.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { SidebarLeft } from '~/registry/miami/block/sidebar-15/components/sidebar-left'
-import { SidebarRight } from '~/registry/miami/block/sidebar-15/components/sidebar-right'
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbList,
-   BreadcrumbPage,
-} from '~/registry/miami/ui/breadcrumb'
-import { Separator } from '~/registry/miami/ui/separator'
-import {
-   SidebarInset,
-   SidebarProvider,
-   SidebarTrigger,
-} from '~/registry/miami/ui/sidebar'
-
-export const iframeHeight = '800px'
-
-export const description = 'A left and right sidebar.'
-
-export default function Page() {
-   return (
-      <SidebarProvider>
-         <SidebarLeft />
-         <SidebarInset>
-            <header className="bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2">
-               <div className="flex flex-1 items-center gap-2 px-3">
-                  <SidebarTrigger />
-                  <Separator orientation="vertical" className="mr-2 h-4" />
-                  <Breadcrumb>
-                     <BreadcrumbList>
-                        <BreadcrumbItem>
-                           <BreadcrumbPage className="line-clamp-1">
-                              Project Management & Task Tracking
-                           </BreadcrumbPage>
-                        </BreadcrumbItem>
-                     </BreadcrumbList>
-                  </Breadcrumb>
-               </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-               <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
-               <div className="bg-muted/50 mx-auto h-screen w-full max-w-3xl rounded-xl" />
-            </div>
-         </SidebarInset>
-         <SidebarRight />
-      </SidebarProvider>
-   )
-}
diff --git a/apps/web/registry/miami/blocks/login-01/components/login-form.tsx b/apps/web/registry/miami/blocks/login-01/components/login-form.tsx
new file mode 100644
index 00000000..a928530e
--- /dev/null
+++ b/apps/web/registry/miami/blocks/login-01/components/login-form.tsx
@@ -0,0 +1,68 @@
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function LoginForm({
+   className,
+   ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+   return (
+      <div className={ny("flex flex-col gap-6", className)} {...props}>
+         <Card>
+            <CardHeader>
+               <CardTitle className="text-2xl">Login</CardTitle>
+               <CardDescription>
+                  Enter your email below to login to your account
+               </CardDescription>
+            </CardHeader>
+            <CardContent>
+               <form>
+                  <div className="flex flex-col gap-6">
+                     <div className="grid gap-2">
+                        <Label htmlFor="email">Email</Label>
+                        <Input
+                           id="email"
+                           type="email"
+                           placeholder="m@example.com"
+                           required
+                        />
+                     </div>
+                     <div className="grid gap-2">
+                        <div className="flex items-center">
+                           <Label htmlFor="password">Password</Label>
+                           <a
+                              href="#"
+                              className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                           >
+                              Forgot your password?
+                           </a>
+                        </div>
+                        <Input id="password" type="password" required />
+                     </div>
+                     <Button type="submit" className="w-full">
+                        Login
+                     </Button>
+                     <Button variant="outline" className="w-full">
+                        Login with Google
+                     </Button>
+                  </div>
+                  <div className="mt-4 text-center text-sm">
+                     Don&apos;t have an account?{" "}
+                     <a href="#" className="underline underline-offset-4">
+                        Sign up
+                     </a>
+                  </div>
+               </form>
+            </CardContent>
+         </Card>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/login-01/page.tsx b/apps/web/registry/miami/blocks/login-01/page.tsx
new file mode 100644
index 00000000..7278bb4b
--- /dev/null
+++ b/apps/web/registry/miami/blocks/login-01/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "~/registry/miami/blocks/login-01/components/login-form"
+
+export default function Page() {
+   return (
+      <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+         <div className="w-full max-w-sm">
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/login-02/components/login-form.tsx b/apps/web/registry/miami/blocks/login-02/components/login-form.tsx
new file mode 100644
index 00000000..f77fbc51
--- /dev/null
+++ b/apps/web/registry/miami/blocks/login-02/components/login-form.tsx
@@ -0,0 +1,73 @@
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function LoginForm({
+   className,
+   ...props
+}: React.ComponentPropsWithoutRef<"form">) {
+   return (
+      <form className={ny("flex flex-col gap-6", className)} {...props}>
+         <div className="flex flex-col items-center gap-2 text-center">
+            <h1 className="text-2xl font-bold">Login to your account</h1>
+            <p className="text-balance text-sm text-muted-foreground">
+               Enter your email below to login to your account
+            </p>
+         </div>
+         <div className="grid gap-6">
+            <div className="grid gap-2">
+               <Label htmlFor="email">Email</Label>
+               <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+               />
+            </div>
+            <div className="grid gap-2">
+               <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                  <a
+                     href="#"
+                     className="ml-auto text-sm underline-offset-4 hover:underline"
+                  >
+                     Forgot your password?
+                  </a>
+               </div>
+               <Input id="password" type="password" required />
+            </div>
+            <Button type="submit" className="w-full">
+               Login
+            </Button>
+            <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+               <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                  Or continue with
+               </span>
+            </div>
+            <Button
+               variant="outline"
+               className="w-full h-10 flex items-center justify-center gap-2"
+            >
+               <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  className="h-5 w-5"
+               >
+                  <path
+                     d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+                     fill="currentColor"
+                  />
+               </svg>
+               Login with GitHub
+            </Button>
+         </div>
+         <div className="text-center text-sm">
+            Don&apos;t have an account?{" "}
+            <a href="#" className="underline underline-offset-4">
+               Sign up
+            </a>
+         </div>
+      </form>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/login-02/page.tsx b/apps/web/registry/miami/blocks/login-02/page.tsx
new file mode 100644
index 00000000..96babd35
--- /dev/null
+++ b/apps/web/registry/miami/blocks/login-02/page.tsx
@@ -0,0 +1,32 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "~/registry/miami/blocks/login-02/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="grid min-h-svh lg:grid-cols-2">
+         <div className="flex flex-col gap-4 p-6 md:p-10">
+            <div className="flex justify-center gap-2 md:justify-start">
+               <a href="#" className="flex items-center gap-2 font-medium">
+                  <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+                     <GalleryVerticalEnd className="size-4" />
+                  </div>
+                  Acme Inc.
+               </a>
+            </div>
+            <div className="flex flex-1 items-center justify-center">
+               <div className="w-full max-w-xs">
+                  <LoginForm />
+               </div>
+            </div>
+         </div>
+         <div className="relative hidden bg-muted lg:block">
+            <img
+               src="/placeholder.svg"
+               alt="Image"
+               className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+            />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/login-03/components/login-form.tsx b/apps/web/registry/miami/blocks/login-03/components/login-form.tsx
new file mode 100644
index 00000000..e85c8629
--- /dev/null
+++ b/apps/web/registry/miami/blocks/login-03/components/login-form.tsx
@@ -0,0 +1,110 @@
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function LoginForm({
+   className,
+   ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+   return (
+      <div className={ny("flex flex-col gap-6", className)} {...props}>
+         <Card>
+            <CardHeader className="text-center">
+               <CardTitle className="text-xl">Welcome back</CardTitle>
+               <CardDescription>
+                  Login with your Apple or Google account
+               </CardDescription>
+            </CardHeader>
+            <CardContent>
+               <form>
+                  <div className="grid gap-6">
+                     <div className="flex flex-col gap-4">
+                        <Button
+                           variant="outline"
+                           className="w-full h-10 flex items-center justify-center gap-2"
+                        >
+                           <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              className="h-5 w-5"
+                           >
+                              <path
+                                 d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                                 fill="currentColor"
+                              />
+                           </svg>
+                           Login with Apple
+                        </Button>
+                        <Button
+                           variant="outline"
+                           className="w-full h-10 flex items-center justify-center gap-2"
+                        >
+                           <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              className="h-5 w-5"
+                           >
+                              <path
+                                 d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                                 fill="currentColor"
+                              />
+                           </svg>
+                           Login with Google
+                        </Button>
+                     </div>
+                     <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+                        <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                           Or continue with
+                        </span>
+                     </div>
+                     <div className="grid gap-6">
+                        <div className="grid gap-2">
+                           <Label htmlFor="email">Email</Label>
+                           <Input
+                              id="email"
+                              type="email"
+                              placeholder="m@example.com"
+                              required
+                           />
+                        </div>
+                        <div className="grid gap-2">
+                           <div className="flex items-center">
+                              <Label htmlFor="password">Password</Label>
+                              <a
+                                 href="#"
+                                 className="ml-auto text-sm underline-offset-4 hover:underline"
+                              >
+                                 Forgot your password?
+                              </a>
+                           </div>
+                           <Input id="password" type="password" required />
+                        </div>
+                        <Button type="submit" className="w-full">
+                           Login
+                        </Button>
+                     </div>
+                     <div className="text-center text-sm">
+                        Don&apos;t have an account?{" "}
+                        <a href="#" className="underline underline-offset-4">
+                           Sign up
+                        </a>
+                     </div>
+                  </div>
+               </form>
+            </CardContent>
+         </Card>
+         <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  ">
+            By clicking continue, you agree to our{" "}
+            <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/login-03/page.tsx b/apps/web/registry/miami/blocks/login-03/page.tsx
new file mode 100644
index 00000000..ebd0938c
--- /dev/null
+++ b/apps/web/registry/miami/blocks/login-03/page.tsx
@@ -0,0 +1,22 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "~/registry/miami/blocks/login-03/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+         <div className="flex w-full max-w-sm flex-col gap-6">
+            <a
+               href="#"
+               className="flex items-center gap-2 self-center font-medium"
+            >
+               <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+               </div>
+               Acme Inc.
+            </a>
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/login-04/components/login-form.tsx b/apps/web/registry/miami/blocks/login-04/components/login-form.tsx
new file mode 100644
index 00000000..106e29bf
--- /dev/null
+++ b/apps/web/registry/miami/blocks/login-04/components/login-form.tsx
@@ -0,0 +1,125 @@
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Card, CardContent } from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function LoginForm({
+   className,
+   ...props
+}: React.ComponentProps<"div">) {
+   return (
+      <div className={ny("flex flex-col gap-6", className)} {...props}>
+         <Card className="overflow-hidden">
+            <CardContent className="grid p-0 md:grid-cols-2">
+               <form className="p-6 md:p-8">
+                  <div className="flex flex-col gap-6">
+                     <div className="flex flex-col items-center text-center">
+                        <h1 className="text-2xl font-bold">Welcome back</h1>
+                        <p className="text-balance text-muted-foreground">
+                           Login to your Acme Inc account
+                        </p>
+                     </div>
+                     <div className="grid gap-2">
+                        <Label htmlFor="email">Email</Label>
+                        <Input
+                           id="email"
+                           type="email"
+                           placeholder="m@example.com"
+                           required
+                        />
+                     </div>
+                     <div className="grid gap-2">
+                        <div className="flex items-center">
+                           <Label htmlFor="password">Password</Label>
+                           <a
+                              href="#"
+                              className="ml-auto text-sm underline-offset-2 hover:underline"
+                           >
+                              Forgot your password?
+                           </a>
+                        </div>
+                        <Input id="password" type="password" required />
+                     </div>
+                     <Button type="submit" className="w-full">
+                        Login
+                     </Button>
+                     <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+                        <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                           Or continue with
+                        </span>
+                     </div>
+                     <div className="grid grid-cols-3 gap-4">
+                        <Button
+                           variant="outline"
+                           className="w-full h-10 flex items-center justify-center"
+                        >
+                           <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              className="h-5 w-5"
+                           >
+                              <path
+                                 d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                                 fill="currentColor"
+                              />
+                           </svg>
+                           <span className="sr-only">Login with Apple</span>
+                        </Button>
+                        <Button
+                           variant="outline"
+                           className="w-full h-10 flex items-center justify-center"
+                        >
+                           <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              className="h-5 w-5"
+                           >
+                              <path
+                                 d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                                 fill="currentColor"
+                              />
+                           </svg>
+                           <span className="sr-only">Login with Google</span>
+                        </Button>
+                        <Button
+                           variant="outline"
+                           className="w-full h-10 flex items-center justify-center"
+                        >
+                           <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              className="h-5 w-5"
+                           >
+                              <path
+                                 d="M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z"
+                                 fill="currentColor"
+                              />
+                           </svg>
+                           <span className="sr-only">Login with Meta</span>
+                        </Button>
+                     </div>
+                     <div className="text-center text-sm">
+                        Don&apos;t have an account?{" "}
+                        <a href="#" className="underline underline-offset-4">
+                           Sign up
+                        </a>
+                     </div>
+                  </div>
+               </form>
+               <div className="relative hidden bg-muted md:block">
+                  <img
+                     src="/placeholder.svg"
+                     alt="Image"
+                     className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+                  />
+               </div>
+            </CardContent>
+         </Card>
+         <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary">
+            By clicking continue, you agree to our{" "}
+            <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/login-04/page.tsx b/apps/web/registry/miami/blocks/login-04/page.tsx
new file mode 100644
index 00000000..5512ae30
--- /dev/null
+++ b/apps/web/registry/miami/blocks/login-04/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "~/registry/miami/blocks/login-04/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+         <div className="w-full max-w-sm md:max-w-3xl">
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/login-05/components/login-form.tsx b/apps/web/registry/miami/blocks/login-05/components/login-form.tsx
new file mode 100644
index 00000000..29ec9e57
--- /dev/null
+++ b/apps/web/registry/miami/blocks/login-05/components/login-form.tsx
@@ -0,0 +1,87 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function LoginForm({
+   className,
+   ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+   return (
+      <div className={ny("flex flex-col gap-6", className)} {...props}>
+         <form>
+            <div className="flex flex-col gap-6">
+               <div className="flex flex-col items-center gap-2">
+                  <a
+                     href="#"
+                     className="flex flex-col items-center gap-2 font-medium"
+                  >
+                     <div className="flex h-8 w-8 items-center justify-center rounded-md">
+                        <GalleryVerticalEnd className="size-6" />
+                     </div>
+                     <span className="sr-only">Acme Inc.</span>
+                  </a>
+                  <h1 className="text-xl font-bold">Welcome to Acme Inc.</h1>
+                  <div className="text-center text-sm">
+                     Don&apos;t have an account?{" "}
+                     <a href="#" className="underline underline-offset-4">
+                        Sign up
+                     </a>
+                  </div>
+               </div>
+               <div className="flex flex-col gap-6">
+                  <div className="grid gap-2">
+                     <Label htmlFor="email">Email</Label>
+                     <Input
+                        id="email"
+                        type="email"
+                        placeholder="m@example.com"
+                        required
+                     />
+                  </div>
+                  <Button type="submit" className="w-full">
+                     Login
+                  </Button>
+               </div>
+               <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+                  <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                     Or
+                  </span>
+               </div>
+               <div className="grid gap-4 sm:grid-cols-2">
+                  <Button variant="outline" className="w-full">
+                     <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                     >
+                        <path
+                           d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                           fill="currentColor"
+                        />
+                     </svg>
+                     Continue with Apple
+                  </Button>
+                  <Button variant="outline" className="w-full">
+                     <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                     >
+                        <path
+                           d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                           fill="currentColor"
+                        />
+                     </svg>
+                     Continue with Google
+                  </Button>
+               </div>
+            </div>
+         </form>
+         <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary  ">
+            By clicking continue, you agree to our{" "}
+            <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/login-05/page.tsx b/apps/web/registry/miami/blocks/login-05/page.tsx
new file mode 100644
index 00000000..11cadf68
--- /dev/null
+++ b/apps/web/registry/miami/blocks/login-05/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "~/registry/miami/blocks/login-05/components/login-form"
+
+export default function LoginPage() {
+   return (
+      <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+         <div className="w-full max-w-sm">
+            <LoginForm />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-01/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-01/components/app-sidebar.tsx
new file mode 100644
index 00000000..c1752057
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-01/components/app-sidebar.tsx
@@ -0,0 +1,185 @@
+import type * as React from "react"
+
+import { SearchForm } from "~/registry/miami/blocks/sidebar-01/components/search-form"
+import { VersionSwitcher } from "~/registry/miami/blocks/sidebar-01/components/version-switcher"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader>
+            <VersionSwitcher
+               versions={data.versions}
+               defaultVersion={data.versions[0]}
+            />
+            <SearchForm />
+         </SidebarHeader>
+         <SidebarContent>
+            {/* We create a SidebarGroup for each parent. */}
+            {data.navMain.map((item) => (
+               <SidebarGroup key={item.title}>
+                  <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {item.items.map((item) => (
+                           <SidebarMenuItem key={item.title}>
+                              <SidebarMenuButton
+                                 asChild
+                                 isActive={item.isActive}
+                              >
+                                 <a href={item.url}>{item.title}</a>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            ))}
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-01/components/search-form.tsx b/apps/web/registry/miami/blocks/sidebar-01/components/search-form.tsx
new file mode 100644
index 00000000..278d21e7
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-01/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "~/registry/miami/ui/label"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarInput,
+} from "~/registry/miami/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+   return (
+      <form {...props}>
+         <SidebarGroup className="py-0">
+            <SidebarGroupContent className="relative">
+               <Label htmlFor="search" className="sr-only">
+                  Search
+               </Label>
+               <SidebarInput
+                  id="search"
+                  placeholder="Search the docs..."
+                  className="pl-8"
+               />
+               <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+            </SidebarGroupContent>
+         </SidebarGroup>
+      </form>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-01/components/version-switcher.tsx b/apps/web/registry/miami/blocks/sidebar-01/components/version-switcher.tsx
new file mode 100644
index 00000000..a0e8f936
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-01/components/version-switcher.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react"
+import * as React from "react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function VersionSwitcher({
+   versions,
+   defaultVersion,
+}: {
+   versions: string[]
+   defaultVersion: string
+}) {
+   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                        <GalleryVerticalEnd className="size-4" />
+                     </div>
+                     <div className="flex flex-col gap-0.5 leading-none">
+                        <span className="font-semibold">Documentation</span>
+                        <span className="">v{selectedVersion}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width]"
+                  align="start"
+               >
+                  {versions.map((version) => (
+                     <DropdownMenuItem
+                        key={version}
+                        onSelect={() => setSelectedVersion(version)}
+                     >
+                        v{version}{" "}
+                        {version === selectedVersion && (
+                           <Check className="ml-auto" />
+                        )}
+                     </DropdownMenuItem>
+                  ))}
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-01/page.tsx b/apps/web/registry/miami/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000..07a23e91
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-01/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-01/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-02/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-02/components/app-sidebar.tsx
new file mode 100644
index 00000000..26d6c5ea
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-02/components/app-sidebar.tsx
@@ -0,0 +1,218 @@
+import { ChevronRight } from "lucide-react"
+import type * as React from "react"
+
+import { SearchForm } from "~/registry/miami/blocks/sidebar-02/components/search-form"
+import { VersionSwitcher } from "~/registry/miami/blocks/sidebar-02/components/version-switcher"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader>
+            <VersionSwitcher
+               versions={data.versions}
+               defaultVersion={data.versions[0]}
+            />
+            <SearchForm />
+         </SidebarHeader>
+         <SidebarContent className="gap-0">
+            {/* We create a collapsible SidebarGroup for each parent. */}
+            {data.navMain.map((item) => (
+               <Collapsible
+                  key={item.title}
+                  title={item.title}
+                  defaultOpen
+                  className="group/collapsible"
+               >
+                  <SidebarGroup>
+                     <SidebarGroupLabel
+                        asChild
+                        className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                     >
+                        <CollapsibleTrigger>
+                           {item.title}{" "}
+                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                        </CollapsibleTrigger>
+                     </SidebarGroupLabel>
+                     <CollapsibleContent>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {item.items.map((item) => (
+                                 <SidebarMenuItem key={item.title}>
+                                    <SidebarMenuButton
+                                       asChild
+                                       isActive={item.isActive}
+                                    >
+                                       <a href={item.url}>{item.title}</a>
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </CollapsibleContent>
+                  </SidebarGroup>
+               </Collapsible>
+            ))}
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-02/components/search-form.tsx b/apps/web/registry/miami/blocks/sidebar-02/components/search-form.tsx
new file mode 100644
index 00000000..278d21e7
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-02/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "~/registry/miami/ui/label"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarInput,
+} from "~/registry/miami/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+   return (
+      <form {...props}>
+         <SidebarGroup className="py-0">
+            <SidebarGroupContent className="relative">
+               <Label htmlFor="search" className="sr-only">
+                  Search
+               </Label>
+               <SidebarInput
+                  id="search"
+                  placeholder="Search the docs..."
+                  className="pl-8"
+               />
+               <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+            </SidebarGroupContent>
+         </SidebarGroup>
+      </form>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-02/components/version-switcher.tsx b/apps/web/registry/miami/blocks/sidebar-02/components/version-switcher.tsx
new file mode 100644
index 00000000..a0e8f936
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-02/components/version-switcher.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react"
+import * as React from "react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function VersionSwitcher({
+   versions,
+   defaultVersion,
+}: {
+   versions: string[]
+   defaultVersion: string
+}) {
+   const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                        <GalleryVerticalEnd className="size-4" />
+                     </div>
+                     <div className="flex flex-col gap-0.5 leading-none">
+                        <span className="font-semibold">Documentation</span>
+                        <span className="">v{selectedVersion}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width]"
+                  align="start"
+               >
+                  {versions.map((version) => (
+                     <DropdownMenuItem
+                        key={version}
+                        onSelect={() => setSelectedVersion(version)}
+                     >
+                        v{version}{" "}
+                        {version === selectedVersion && (
+                           <Check className="ml-auto" />
+                        )}
+                     </DropdownMenuItem>
+                  ))}
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-02/page.tsx b/apps/web/registry/miami/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000..ca95d0ab
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-02/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-02/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               {Array.from({ length: 24 }).map((_, index) => (
+                  <div
+                     key={index}
+                     className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                  />
+               ))}
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-03/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-03/components/app-sidebar.tsx
new file mode 100644
index 00000000..cc71be14
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-03/components/app-sidebar.tsx
@@ -0,0 +1,211 @@
+import { GalleryVerticalEnd } from "lucide-react"
+import type * as React from "react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton size="lg" asChild>
+                     <a href="#">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                           <GalleryVerticalEnd className="size-4" />
+                        </div>
+                        <div className="flex flex-col gap-0.5 leading-none">
+                           <span className="font-semibold">Documentation</span>
+                           <span className="">v1.0.0</span>
+                        </div>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarHeader>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarMenu>
+                  {data.navMain.map((item) => (
+                     <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton asChild>
+                           <a href={item.url} className="font-medium">
+                              {item.title}
+                           </a>
+                        </SidebarMenuButton>
+                        {item.items?.length ? (
+                           <SidebarMenuSub>
+                              {item.items.map((item) => (
+                                 <SidebarMenuSubItem key={item.title}>
+                                    <SidebarMenuSubButton
+                                       asChild
+                                       isActive={item.isActive}
+                                    >
+                                       <a href={item.url}>{item.title}</a>
+                                    </SidebarMenuSubButton>
+                                 </SidebarMenuSubItem>
+                              ))}
+                           </SidebarMenuSub>
+                        ) : null}
+                     </SidebarMenuItem>
+                  ))}
+               </SidebarMenu>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-03/page.tsx b/apps/web/registry/miami/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000..dfbbbe61
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-03/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-03/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+               <div className="flex items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-04/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-04/components/app-sidebar.tsx
new file mode 100644
index 00000000..00e58b1b
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-04/components/app-sidebar.tsx
@@ -0,0 +1,209 @@
+import { GalleryVerticalEnd } from "lucide-react"
+import type * as React from "react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar variant="floating" {...props}>
+         <SidebarHeader>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton size="lg" asChild>
+                     <a href="#">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                           <GalleryVerticalEnd className="size-4" />
+                        </div>
+                        <div className="flex flex-col gap-0.5 leading-none">
+                           <span className="font-semibold">Documentation</span>
+                           <span className="">v1.0.0</span>
+                        </div>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarHeader>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarMenu className="gap-2">
+                  {data.navMain.map((item) => (
+                     <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton asChild>
+                           <a href={item.url} className="font-medium">
+                              {item.title}
+                           </a>
+                        </SidebarMenuButton>
+                        {item.items?.length ? (
+                           <SidebarMenuSub className="ml-0 border-l-0 px-1.5">
+                              {item.items.map((item) => (
+                                 <SidebarMenuSubItem key={item.title}>
+                                    <SidebarMenuSubButton
+                                       asChild
+                                       isActive={item.isActive}
+                                    >
+                                       <a href={item.url}>{item.title}</a>
+                                    </SidebarMenuSubButton>
+                                 </SidebarMenuSubItem>
+                              ))}
+                           </SidebarMenuSub>
+                        ) : null}
+                     </SidebarMenuItem>
+                  ))}
+               </SidebarMenu>
+            </SidebarGroup>
+         </SidebarContent>
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-04/page.tsx b/apps/web/registry/miami/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000..fcd531c6
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-04/page.tsx
@@ -0,0 +1,56 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-04/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider
+         style={
+            {
+               "--sidebar-width": "19rem",
+            } as React.CSSProperties
+         }
+      >
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-05/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-05/components/app-sidebar.tsx
new file mode 100644
index 00000000..acb5e0bd
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-05/components/app-sidebar.tsx
@@ -0,0 +1,228 @@
+import { GalleryVerticalEnd, Minus, Plus } from "lucide-react"
+import type * as React from "react"
+
+import { SearchForm } from "~/registry/miami/blocks/sidebar-05/components/search-form"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton size="lg" asChild>
+                     <a href="#">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                           <GalleryVerticalEnd className="size-4" />
+                        </div>
+                        <div className="flex flex-col gap-0.5 leading-none">
+                           <span className="font-semibold">Documentation</span>
+                           <span className="">v1.0.0</span>
+                        </div>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+            <SearchForm />
+         </SidebarHeader>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarMenu>
+                  {data.navMain.map((item, index) => (
+                     <Collapsible
+                        key={item.title}
+                        defaultOpen={index === 1}
+                        className="group/collapsible"
+                     >
+                        <SidebarMenuItem>
+                           <CollapsibleTrigger asChild>
+                              <SidebarMenuButton>
+                                 {item.title}{" "}
+                                 <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                                 <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                              </SidebarMenuButton>
+                           </CollapsibleTrigger>
+                           {item.items?.length ? (
+                              <CollapsibleContent>
+                                 <SidebarMenuSub>
+                                    {item.items.map((item) => (
+                                       <SidebarMenuSubItem key={item.title}>
+                                          <SidebarMenuSubButton
+                                             asChild
+                                             isActive={item.isActive}
+                                          >
+                                             <a href={item.url}>{item.title}</a>
+                                          </SidebarMenuSubButton>
+                                       </SidebarMenuSubItem>
+                                    ))}
+                                 </SidebarMenuSub>
+                              </CollapsibleContent>
+                           ) : null}
+                        </SidebarMenuItem>
+                     </Collapsible>
+                  ))}
+               </SidebarMenu>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-05/components/search-form.tsx b/apps/web/registry/miami/blocks/sidebar-05/components/search-form.tsx
new file mode 100644
index 00000000..278d21e7
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-05/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "~/registry/miami/ui/label"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarInput,
+} from "~/registry/miami/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+   return (
+      <form {...props}>
+         <SidebarGroup className="py-0">
+            <SidebarGroupContent className="relative">
+               <Label htmlFor="search" className="sr-only">
+                  Search
+               </Label>
+               <SidebarInput
+                  id="search"
+                  placeholder="Search the docs..."
+                  className="pl-8"
+               />
+               <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+            </SidebarGroupContent>
+         </SidebarGroup>
+      </form>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-05/page.tsx b/apps/web/registry/miami/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000..2877811b
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-05/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-05/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-06/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-06/components/app-sidebar.tsx
new file mode 100644
index 00000000..40e0027b
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-06/components/app-sidebar.tsx
@@ -0,0 +1,179 @@
+import { GalleryVerticalEnd } from "lucide-react"
+import type * as React from "react"
+
+import { NavMain } from "~/registry/miami/blocks/sidebar-06/components/nav-main"
+import { SidebarOptInForm } from "~/registry/miami/blocks/sidebar-06/components/sidebar-opt-in-form"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton size="lg" asChild>
+                     <a href="#">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                           <GalleryVerticalEnd className="size-4" />
+                        </div>
+                        <div className="flex flex-col gap-0.5 leading-none">
+                           <span className="font-semibold">Documentation</span>
+                           <span className="">v1.0.0</span>
+                        </div>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarHeader>
+         <SidebarContent>
+            <NavMain items={data.navMain} />
+         </SidebarContent>
+         <SidebarFooter>
+            <div className="p-1">
+               <SidebarOptInForm />
+            </div>
+         </SidebarFooter>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-06/components/nav-main.tsx b/apps/web/registry/miami/blocks/sidebar-06/components/nav-main.tsx
new file mode 100644
index 00000000..2c5119ee
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-06/components/nav-main.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { type LucideIcon, MoreHorizontal } from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon?: LucideIcon
+      isActive?: boolean
+      items?: {
+         title: string
+         url: string
+      }[]
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup>
+         <SidebarMenu>
+            {items.map((item) => (
+               <DropdownMenu key={item.title}>
+                  <SidebarMenuItem>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                           {item.title} <MoreHorizontal className="ml-auto" />
+                        </SidebarMenuButton>
+                     </DropdownMenuTrigger>
+                     {item.items?.length ? (
+                        <DropdownMenuContent
+                           side={isMobile ? "bottom" : "right"}
+                           align={isMobile ? "end" : "start"}
+                           className="min-w-56 rounded-lg"
+                        >
+                           {item.items.map((item) => (
+                              <DropdownMenuItem asChild key={item.title}>
+                                 <a href={item.url}>{item.title}</a>
+                              </DropdownMenuItem>
+                           ))}
+                        </DropdownMenuContent>
+                     ) : null}
+                  </SidebarMenuItem>
+               </DropdownMenu>
+            ))}
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/web/registry/miami/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
new file mode 100644
index 00000000..d2be7339
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
@@ -0,0 +1,35 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { SidebarInput } from "~/registry/miami/ui/sidebar"
+
+export function SidebarOptInForm() {
+   return (
+      <Card className="shadow-none">
+         <form>
+            <CardHeader className="p-4 pb-0">
+               <CardTitle className="text-sm">
+                  Subscribe to our newsletter
+               </CardTitle>
+               <CardDescription>
+                  Opt-in to receive updates and news about the sidebar.
+               </CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-2.5 p-4">
+               <SidebarInput type="email" placeholder="Email" />
+               <Button
+                  className="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none"
+                  size="sm"
+               >
+                  Subscribe
+               </Button>
+            </CardContent>
+         </form>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-06/page.tsx b/apps/web/registry/miami/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000..a754e431
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-06/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-06/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-07/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-07/components/app-sidebar.tsx
new file mode 100644
index 00000000..70c652cc
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-07/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"use client"
+
+import {
+   AudioWaveform,
+   BookOpen,
+   Bot,
+   Command,
+   Frame,
+   GalleryVerticalEnd,
+   Map,
+   PieChart,
+   Settings2,
+   SquareTerminal,
+} from "lucide-react"
+import type * as React from "react"
+
+import { NavMain } from "~/registry/miami/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "~/registry/miami/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "~/registry/miami/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "~/registry/miami/blocks/sidebar-07/components/team-switcher"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: GalleryVerticalEnd,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar collapsible="icon" {...props}>
+         <SidebarHeader>
+            <TeamSwitcher teams={data.teams} />
+         </SidebarHeader>
+         <SidebarContent>
+            <NavMain items={data.navMain} />
+            <NavProjects projects={data.projects} />
+         </SidebarContent>
+         <SidebarFooter>
+            <NavUser user={data.user} />
+         </SidebarFooter>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-07/components/nav-main.tsx b/apps/web/registry/miami/blocks/sidebar-07/components/nav-main.tsx
new file mode 100644
index 00000000..73557e4a
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-07/components/nav-main.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon?: LucideIcon
+      isActive?: boolean
+      items?: {
+         title: string
+         url: string
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Platform</SidebarGroupLabel>
+         <SidebarMenu>
+            {items.map((item) => (
+               <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={item.isActive}
+                  className="group/collapsible"
+               >
+                  <SidebarMenuItem>
+                     <CollapsibleTrigger asChild>
+                        <SidebarMenuButton tooltip={item.title}>
+                           {item.icon && <item.icon />}
+                           <span>{item.title}</span>
+                           <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                        </SidebarMenuButton>
+                     </CollapsibleTrigger>
+                     <CollapsibleContent>
+                        <SidebarMenuSub>
+                           {item.items?.map((subItem) => (
+                              <SidebarMenuSubItem key={subItem.title}>
+                                 <SidebarMenuSubButton asChild>
+                                    <a href={subItem.url}>
+                                       <span>{subItem.title}</span>
+                                    </a>
+                                 </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                           ))}
+                        </SidebarMenuSub>
+                     </CollapsibleContent>
+                  </SidebarMenuItem>
+               </Collapsible>
+            ))}
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-07/components/nav-projects.tsx b/apps/web/registry/miami/blocks/sidebar-07/components/nav-projects.tsx
new file mode 100644
index 00000000..16487028
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-07/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+   Folder,
+   Forward,
+   type LucideIcon,
+   MoreHorizontal,
+   Trash2,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavProjects({
+   projects,
+}: {
+   projects: {
+      name: string
+      url: string
+      icon: LucideIcon
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Projects</SidebarGroupLabel>
+         <SidebarMenu>
+            {projects.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url}>
+                        <item.icon />
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-48 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <Folder className="text-muted-foreground" />
+                           <span>View Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <Forward className="text-muted-foreground" />
+                           <span>Share Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete Project</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal className="text-sidebar-foreground/70" />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-07/components/nav-user.tsx b/apps/web/registry/miami/blocks/sidebar-07/components/nav-user.tsx
new file mode 100644
index 00000000..6566b797
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-07/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="end"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-07/components/team-switcher.tsx b/apps/web/registry/miami/blocks/sidebar-07/components/team-switcher.tsx
new file mode 100644
index 00000000..3d5c4d29
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-07/components/team-switcher.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { ChevronsUpDown, Plus } from "lucide-react"
+import * as React from "react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function TeamSwitcher({
+   teams,
+}: {
+   teams: {
+      name: string
+      logo: React.ElementType
+      plan: string
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+   const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                        <activeTeam.logo className="size-4" />
+                     </div>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {activeTeam.name}
+                        </span>
+                        <span className="truncate text-xs">
+                           {activeTeam.plan}
+                        </span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  align="start"
+                  side={isMobile ? "bottom" : "right"}
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                     Teams
+                  </DropdownMenuLabel>
+                  {teams.map((team, index) => (
+                     <DropdownMenuItem
+                        key={team.name}
+                        onClick={() => setActiveTeam(team)}
+                        className="gap-2 p-2"
+                     >
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
+                           <team.logo className="size-4 shrink-0" />
+                        </div>
+                        {team.name}
+                        <DropdownMenuShortcut>
+                           ⌘{index + 1}
+                        </DropdownMenuShortcut>
+                     </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                     <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                        <Plus className="size-4" />
+                     </div>
+                     <div className="font-medium text-muted-foreground">
+                        Add team
+                     </div>
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-07/page.tsx b/apps/web/registry/miami/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000..a8819cc4
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-07/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-07/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-08/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-08/components/app-sidebar.tsx
new file mode 100644
index 00000000..12e09a0c
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-08/components/app-sidebar.tsx
@@ -0,0 +1,187 @@
+"use client"
+
+import {
+   BookOpen,
+   Bot,
+   Command,
+   Frame,
+   LifeBuoy,
+   Map,
+   PieChart,
+   Send,
+   Settings2,
+   SquareTerminal,
+} from "lucide-react"
+import type * as React from "react"
+
+import { NavMain } from "~/registry/miami/blocks/sidebar-08/components/nav-main"
+import { NavProjects } from "~/registry/miami/blocks/sidebar-08/components/nav-projects"
+import { NavSecondary } from "~/registry/miami/blocks/sidebar-08/components/nav-secondary"
+import { NavUser } from "~/registry/miami/blocks/sidebar-08/components/nav-user"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Support",
+         url: "#",
+         icon: LifeBuoy,
+      },
+      {
+         title: "Feedback",
+         url: "#",
+         icon: Send,
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar variant="inset" {...props}>
+         <SidebarHeader>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton size="lg" asChild>
+                     <a href="#">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                           <Command className="size-4" />
+                        </div>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              Acme Inc
+                           </span>
+                           <span className="truncate text-xs">Enterprise</span>
+                        </div>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarHeader>
+         <SidebarContent>
+            <NavMain items={data.navMain} />
+            <NavProjects projects={data.projects} />
+            <NavSecondary items={data.navSecondary} className="mt-auto" />
+         </SidebarContent>
+         <SidebarFooter>
+            <NavUser user={data.user} />
+         </SidebarFooter>
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-08/components/nav-main.tsx b/apps/web/registry/miami/blocks/sidebar-08/components/nav-main.tsx
new file mode 100644
index 00000000..5e0ae8a1
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-08/components/nav-main.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      isActive?: boolean
+      items?: {
+         title: string
+         url: string
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Platform</SidebarGroupLabel>
+         <SidebarMenu>
+            {items.map((item) => (
+               <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={item.isActive}
+               >
+                  <SidebarMenuItem>
+                     <SidebarMenuButton asChild tooltip={item.title}>
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                     {item.items?.length ? (
+                        <>
+                           <CollapsibleTrigger asChild>
+                              <SidebarMenuAction className="data-[state=open]:rotate-90">
+                                 <ChevronRight />
+                                 <span className="sr-only">Toggle</span>
+                              </SidebarMenuAction>
+                           </CollapsibleTrigger>
+                           <CollapsibleContent>
+                              <SidebarMenuSub>
+                                 {item.items?.map((subItem) => (
+                                    <SidebarMenuSubItem key={subItem.title}>
+                                       <SidebarMenuSubButton asChild>
+                                          <a href={subItem.url}>
+                                             <span>{subItem.title}</span>
+                                          </a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           </CollapsibleContent>
+                        </>
+                     ) : null}
+                  </SidebarMenuItem>
+               </Collapsible>
+            ))}
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-08/components/nav-projects.tsx b/apps/web/registry/miami/blocks/sidebar-08/components/nav-projects.tsx
new file mode 100644
index 00000000..e74bcd98
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-08/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+   Folder,
+   type LucideIcon,
+   MoreHorizontal,
+   Share,
+   Trash2,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavProjects({
+   projects,
+}: {
+   projects: {
+      name: string
+      url: string
+      icon: LucideIcon
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Projects</SidebarGroupLabel>
+         <SidebarMenu>
+            {projects.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url}>
+                        <item.icon />
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-48"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <Folder className="text-muted-foreground" />
+                           <span>View Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <Share className="text-muted-foreground" />
+                           <span>Share Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete Project</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton>
+                  <MoreHorizontal />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-08/components/nav-secondary.tsx b/apps/web/registry/miami/blocks/sidebar-08/components/nav-secondary.tsx
new file mode 100644
index 00000000..4a91913f
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-08/components/nav-secondary.tsx
@@ -0,0 +1,40 @@
+import type { LucideIcon } from "lucide-react"
+import type * as React from "react"
+
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavSecondary({
+   items,
+   ...props
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+   }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+   return (
+      <SidebarGroup {...props}>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                     <SidebarMenuButton asChild size="sm">
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               ))}
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-08/components/nav-user.tsx b/apps/web/registry/miami/blocks/sidebar-08/components/nav-user.tsx
new file mode 100644
index 00000000..6566b797
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-08/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="end"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-08/page.tsx b/apps/web/registry/miami/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000..fe9a3a3b
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-08/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-08/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-09/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-09/components/app-sidebar.tsx
new file mode 100644
index 00000000..18b844ff
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-09/components/app-sidebar.tsx
@@ -0,0 +1,277 @@
+"use client"
+
+import { ArchiveX, Command, File, Inbox, Send, Trash2 } from "lucide-react"
+import * as React from "react"
+
+import { NavUser } from "~/registry/miami/blocks/sidebar-09/components/nav-user"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarHeader,
+   SidebarInput,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+import { Switch } from "~/registry/miami/ui/switch"
+
+// This is sample data
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Inbox",
+         url: "#",
+         icon: Inbox,
+         isActive: true,
+      },
+      {
+         title: "Drafts",
+         url: "#",
+         icon: File,
+         isActive: false,
+      },
+      {
+         title: "Sent",
+         url: "#",
+         icon: Send,
+         isActive: false,
+      },
+      {
+         title: "Junk",
+         url: "#",
+         icon: ArchiveX,
+         isActive: false,
+      },
+      {
+         title: "Trash",
+         url: "#",
+         icon: Trash2,
+         isActive: false,
+      },
+   ],
+   mails: [
+      {
+         name: "William Smith",
+         email: "williamsmith@example.com",
+         subject: "Meeting Tomorrow",
+         date: "09:34 AM",
+         teaser:
+            "Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.",
+      },
+      {
+         name: "Alice Smith",
+         email: "alicesmith@example.com",
+         subject: "Re: Project Update",
+         date: "Yesterday",
+         teaser:
+            "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.",
+      },
+      {
+         name: "Bob Johnson",
+         email: "bobjohnson@example.com",
+         subject: "Weekend Plans",
+         date: "2 days ago",
+         teaser:
+            "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?",
+      },
+      {
+         name: "Emily Davis",
+         email: "emilydavis@example.com",
+         subject: "Re: Question about Budget",
+         date: "2 days ago",
+         teaser:
+            "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?",
+      },
+      {
+         name: "Michael Wilson",
+         email: "michaelwilson@example.com",
+         subject: "Important Announcement",
+         date: "1 week ago",
+         teaser:
+            "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.",
+      },
+      {
+         name: "Sarah Brown",
+         email: "sarahbrown@example.com",
+         subject: "Re: Feedback on Proposal",
+         date: "1 week ago",
+         teaser:
+            "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?",
+      },
+      {
+         name: "David Lee",
+         email: "davidlee@example.com",
+         subject: "New Project Idea",
+         date: "1 week ago",
+         teaser:
+            "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?",
+      },
+      {
+         name: "Olivia Wilson",
+         email: "oliviawilson@example.com",
+         subject: "Vacation Plans",
+         date: "1 week ago",
+         teaser:
+            "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.",
+      },
+      {
+         name: "James Martin",
+         email: "jamesmartin@example.com",
+         subject: "Re: Conference Registration",
+         date: "1 week ago",
+         teaser:
+            "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.",
+      },
+      {
+         name: "Sophia White",
+         email: "sophiawhite@example.com",
+         subject: "Team Dinner",
+         date: "1 week ago",
+         teaser:
+            "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.",
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   // Note: I'm using state to show active item.
+   // IRL you should use the url/router.
+   const [activeItem, setActiveItem] = React.useState(data.navMain[0])
+   const [mails, setMails] = React.useState(data.mails)
+   const { setOpen } = useSidebar()
+
+   return (
+      <Sidebar
+         collapsible="icon"
+         className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row"
+         {...props}
+      >
+         {/* This is the first sidebar */}
+         {/* We disable collapsible and adjust width to icon. */}
+         {/* This will make the sidebar appear as icons. */}
+         <Sidebar
+            collapsible="none"
+            className="!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r"
+         >
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton
+                        size="lg"
+                        asChild
+                        className="md:h-8 md:p-0"
+                     >
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <Command className="size-4" />
+                           </div>
+                           <div className="grid flex-1 text-left text-sm leading-tight">
+                              <span className="truncate font-semibold">
+                                 Acme Inc
+                              </span>
+                              <span className="truncate text-xs">
+                                 Enterprise
+                              </span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupContent className="px-1.5 md:px-0">
+                     <SidebarMenu>
+                        {data.navMain.map((item) => (
+                           <SidebarMenuItem key={item.title}>
+                              <SidebarMenuButton
+                                 tooltip={{
+                                    children: item.title,
+                                    hidden: false,
+                                 }}
+                                 onClick={() => {
+                                    setActiveItem(item)
+                                    const mail = data.mails.sort(
+                                       () => Math.random() - 0.5,
+                                    )
+                                    setMails(
+                                       mail.slice(
+                                          0,
+                                          Math.max(
+                                             5,
+                                             Math.floor(Math.random() * 10) + 1,
+                                          ),
+                                       ),
+                                    )
+                                    setOpen(true)
+                                 }}
+                                 isActive={activeItem.title === item.title}
+                                 className="px-2.5 md:px-2"
+                              >
+                                 <item.icon />
+                                 <span>{item.title}</span>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+               <NavUser user={data.user} />
+            </SidebarFooter>
+         </Sidebar>
+
+         {/* This is the second sidebar */}
+         {/* We disable collapsible and let it fill remaining space */}
+         <Sidebar collapsible="none" className="hidden flex-1 md:flex">
+            <SidebarHeader className="gap-3.5 border-b p-4">
+               <div className="flex w-full items-center justify-between">
+                  <div className="text-base font-medium text-foreground">
+                     {activeItem.title}
+                  </div>
+                  <Label className="flex items-center gap-2 text-sm">
+                     <span>Unreads</span>
+                     <Switch className="shadow-none" />
+                  </Label>
+               </div>
+               <SidebarInput placeholder="Type to search..." />
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup className="px-0">
+                  <SidebarGroupContent>
+                     {mails.map((mail) => (
+                        <a
+                           href="#"
+                           key={mail.email}
+                           className="flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                        >
+                           <div className="flex w-full items-center gap-2">
+                              <span>{mail.name}</span>{" "}
+                              <span className="ml-auto text-xs">
+                                 {mail.date}
+                              </span>
+                           </div>
+                           <span className="font-medium">{mail.subject}</span>
+                           <span className="line-clamp-2 w-[260px] whitespace-break-spaces text-xs">
+                              {mail.teaser}
+                           </span>
+                        </a>
+                     ))}
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-09/components/nav-user.tsx b/apps/web/registry/miami/blocks/sidebar-09/components/nav-user.tsx
new file mode 100644
index 00000000..64dded54
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-09/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="end"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-09/page.tsx b/apps/web/registry/miami/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000..094ad2dc
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-09/page.tsx
@@ -0,0 +1,54 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-09/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider
+         style={
+            {
+               "--sidebar-width": "350px",
+            } as React.CSSProperties
+         }
+      >
+         <AppSidebar />
+         <SidebarInset>
+            <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Inbox</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               {Array.from({ length: 24 }).map((_, index) => (
+                  <div
+                     key={index}
+                     className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                  />
+               ))}
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-10/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-10/components/app-sidebar.tsx
new file mode 100644
index 00000000..dab4a25a
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-10/components/app-sidebar.tsx
@@ -0,0 +1,276 @@
+"use client"
+
+import {
+   AudioWaveform,
+   Blocks,
+   Calendar,
+   Command,
+   Home,
+   Inbox,
+   MessageCircleQuestion,
+   Search,
+   Settings2,
+   Sparkles,
+   Trash2,
+} from "lucide-react"
+import type * as React from "react"
+
+import { NavFavorites } from "~/registry/miami/blocks/sidebar-10/components/nav-favorites"
+import { NavMain } from "~/registry/miami/blocks/sidebar-10/components/nav-main"
+import { NavSecondary } from "~/registry/miami/blocks/sidebar-10/components/nav-secondary"
+import { NavWorkspaces } from "~/registry/miami/blocks/sidebar-10/components/nav-workspaces"
+import { TeamSwitcher } from "~/registry/miami/blocks/sidebar-10/components/team-switcher"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarHeader,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: Command,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Search",
+         url: "#",
+         icon: Search,
+      },
+      {
+         title: "Ask AI",
+         url: "#",
+         icon: Sparkles,
+      },
+      {
+         title: "Home",
+         url: "#",
+         icon: Home,
+         isActive: true,
+      },
+      {
+         title: "Inbox",
+         url: "#",
+         icon: Inbox,
+         badge: "10",
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Calendar",
+         url: "#",
+         icon: Calendar,
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+      },
+      {
+         title: "Templates",
+         url: "#",
+         icon: Blocks,
+      },
+      {
+         title: "Trash",
+         url: "#",
+         icon: Trash2,
+      },
+      {
+         title: "Help",
+         url: "#",
+         icon: MessageCircleQuestion,
+      },
+   ],
+   favorites: [
+      {
+         name: "Project Management & Task Tracking",
+         url: "#",
+         emoji: "📊",
+      },
+      {
+         name: "Family Recipe Collection & Meal Planning",
+         url: "#",
+         emoji: "🍳",
+      },
+      {
+         name: "Fitness Tracker & Workout Routines",
+         url: "#",
+         emoji: "💪",
+      },
+      {
+         name: "Book Notes & Reading List",
+         url: "#",
+         emoji: "📚",
+      },
+      {
+         name: "Sustainable Gardening Tips & Plant Care",
+         url: "#",
+         emoji: "🌱",
+      },
+      {
+         name: "Language Learning Progress & Resources",
+         url: "#",
+         emoji: "🗣️",
+      },
+      {
+         name: "Home Renovation Ideas & Budget Tracker",
+         url: "#",
+         emoji: "🏠",
+      },
+      {
+         name: "Personal Finance & Investment Portfolio",
+         url: "#",
+         emoji: "💰",
+      },
+      {
+         name: "Movie & TV Show Watchlist with Reviews",
+         url: "#",
+         emoji: "🎬",
+      },
+      {
+         name: "Daily Habit Tracker & Goal Setting",
+         url: "#",
+         emoji: "✅",
+      },
+   ],
+   workspaces: [
+      {
+         name: "Personal Life Management",
+         emoji: "🏠",
+         pages: [
+            {
+               name: "Daily Journal & Reflection",
+               url: "#",
+               emoji: "📔",
+            },
+            {
+               name: "Health & Wellness Tracker",
+               url: "#",
+               emoji: "🍏",
+            },
+            {
+               name: "Personal Growth & Learning Goals",
+               url: "#",
+               emoji: "🌟",
+            },
+         ],
+      },
+      {
+         name: "Professional Development",
+         emoji: "💼",
+         pages: [
+            {
+               name: "Career Objectives & Milestones",
+               url: "#",
+               emoji: "🎯",
+            },
+            {
+               name: "Skill Acquisition & Training Log",
+               url: "#",
+               emoji: "🧠",
+            },
+            {
+               name: "Networking Contacts & Events",
+               url: "#",
+               emoji: "🤝",
+            },
+         ],
+      },
+      {
+         name: "Creative Projects",
+         emoji: "🎨",
+         pages: [
+            {
+               name: "Writing Ideas & Story Outlines",
+               url: "#",
+               emoji: "✍️",
+            },
+            {
+               name: "Art & Design Portfolio",
+               url: "#",
+               emoji: "🖼️",
+            },
+            {
+               name: "Music Composition & Practice Log",
+               url: "#",
+               emoji: "🎵",
+            },
+         ],
+      },
+      {
+         name: "Home Management",
+         emoji: "🏡",
+         pages: [
+            {
+               name: "Household Budget & Expense Tracking",
+               url: "#",
+               emoji: "💰",
+            },
+            {
+               name: "Home Maintenance Schedule & Tasks",
+               url: "#",
+               emoji: "🔧",
+            },
+            {
+               name: "Family Calendar & Event Planning",
+               url: "#",
+               emoji: "📅",
+            },
+         ],
+      },
+      {
+         name: "Travel & Adventure",
+         emoji: "🧳",
+         pages: [
+            {
+               name: "Trip Planning & Itineraries",
+               url: "#",
+               emoji: "🗺️",
+            },
+            {
+               name: "Travel Bucket List & Inspiration",
+               url: "#",
+               emoji: "🌎",
+            },
+            {
+               name: "Travel Journal & Photo Gallery",
+               url: "#",
+               emoji: "📸",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar className="border-r-0" {...props}>
+         <SidebarHeader>
+            <TeamSwitcher teams={data.teams} />
+            <NavMain items={data.navMain} />
+         </SidebarHeader>
+         <SidebarContent>
+            <NavFavorites favorites={data.favorites} />
+            <NavWorkspaces workspaces={data.workspaces} />
+            <NavSecondary items={data.navSecondary} className="mt-auto" />
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-10/components/nav-actions.tsx b/apps/web/registry/miami/blocks/sidebar-10/components/nav-actions.tsx
new file mode 100644
index 00000000..63f6f503
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-10/components/nav-actions.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import {
+   ArrowDown,
+   ArrowUp,
+   Bell,
+   Copy,
+   CornerUpLeft,
+   CornerUpRight,
+   FileText,
+   GalleryVerticalEnd,
+   LineChart,
+   Link,
+   MoreHorizontal,
+   Settings2,
+   Star,
+   Trash,
+   Trash2,
+} from "lucide-react"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+const data = [
+   [
+      {
+         label: "Customize Page",
+         icon: Settings2,
+      },
+      {
+         label: "Turn into wiki",
+         icon: FileText,
+      },
+   ],
+   [
+      {
+         label: "Copy Link",
+         icon: Link,
+      },
+      {
+         label: "Duplicate",
+         icon: Copy,
+      },
+      {
+         label: "Move to",
+         icon: CornerUpRight,
+      },
+      {
+         label: "Move to Trash",
+         icon: Trash2,
+      },
+   ],
+   [
+      {
+         label: "Undo",
+         icon: CornerUpLeft,
+      },
+      {
+         label: "View analytics",
+         icon: LineChart,
+      },
+      {
+         label: "Version History",
+         icon: GalleryVerticalEnd,
+      },
+      {
+         label: "Show delete pages",
+         icon: Trash,
+      },
+      {
+         label: "Notifications",
+         icon: Bell,
+      },
+   ],
+   [
+      {
+         label: "Import",
+         icon: ArrowUp,
+      },
+      {
+         label: "Export",
+         icon: ArrowDown,
+      },
+   ],
+]
+
+export function NavActions() {
+   const [isOpen, setIsOpen] = React.useState(false)
+
+   React.useEffect(() => {
+      setIsOpen(true)
+   }, [])
+
+   return (
+      <div className="flex items-center gap-2 text-sm">
+         <div className="hidden font-medium text-muted-foreground md:inline-block">
+            Edit Oct 08
+         </div>
+         <Button variant="ghost" size="icon" className="h-7 w-7">
+            <Star />
+         </Button>
+         <Popover open={isOpen} onOpenChange={setIsOpen}>
+            <PopoverTrigger asChild>
+               <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 data-[state=open]:bg-accent"
+               >
+                  <MoreHorizontal />
+               </Button>
+            </PopoverTrigger>
+            <PopoverContent
+               className="w-56 overflow-hidden rounded-lg p-0"
+               align="end"
+            >
+               <Sidebar collapsible="none" className="bg-transparent">
+                  <SidebarContent>
+                     {data.map((group, index) => (
+                        <SidebarGroup
+                           key={index}
+                           className="border-b last:border-none"
+                        >
+                           <SidebarGroupContent className="gap-0">
+                              <SidebarMenu>
+                                 {group.map((item, index) => (
+                                    <SidebarMenuItem key={index}>
+                                       <SidebarMenuButton>
+                                          <item.icon />{" "}
+                                          <span>{item.label}</span>
+                                       </SidebarMenuButton>
+                                    </SidebarMenuItem>
+                                 ))}
+                              </SidebarMenu>
+                           </SidebarGroupContent>
+                        </SidebarGroup>
+                     ))}
+                  </SidebarContent>
+               </Sidebar>
+            </PopoverContent>
+         </Popover>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-10/components/nav-favorites.tsx b/apps/web/registry/miami/blocks/sidebar-10/components/nav-favorites.tsx
new file mode 100644
index 00000000..d46120ad
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-10/components/nav-favorites.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import {
+   ArrowUpRight,
+   Link,
+   MoreHorizontal,
+   StarOff,
+   Trash2,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavFavorites({
+   favorites,
+}: {
+   favorites: {
+      name: string
+      url: string
+      emoji: string
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+         <SidebarMenu>
+            {favorites.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url} title={item.name}>
+                        <span>{item.emoji}</span>
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-56 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <StarOff className="text-muted-foreground" />
+                           <span>Remove from Favorites</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Link className="text-muted-foreground" />
+                           <span>Copy Link</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <ArrowUpRight className="text-muted-foreground" />
+                           <span>Open in New Tab</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-10/components/nav-main.tsx b/apps/web/registry/miami/blocks/sidebar-10/components/nav-main.tsx
new file mode 100644
index 00000000..495f0cab
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-10/components/nav-main.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import type { LucideIcon } from "lucide-react"
+
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      isActive?: boolean
+   }[]
+}) {
+   return (
+      <SidebarMenu>
+         {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+               <SidebarMenuButton asChild isActive={item.isActive}>
+                  <a href={item.url}>
+                     <item.icon />
+                     <span>{item.title}</span>
+                  </a>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         ))}
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-10/components/nav-secondary.tsx b/apps/web/registry/miami/blocks/sidebar-10/components/nav-secondary.tsx
new file mode 100644
index 00000000..c8185d17
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-10/components/nav-secondary.tsx
@@ -0,0 +1,45 @@
+import type { LucideIcon } from "lucide-react"
+import type React from "react"
+
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavSecondary({
+   items,
+   ...props
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      badge?: React.ReactNode
+   }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+   return (
+      <SidebarGroup {...props}>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                     <SidebarMenuButton asChild>
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                     {item.badge && (
+                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+                     )}
+                  </SidebarMenuItem>
+               ))}
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-10/components/nav-workspaces.tsx b/apps/web/registry/miami/blocks/sidebar-10/components/nav-workspaces.tsx
new file mode 100644
index 00000000..0e7860e8
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-10/components/nav-workspaces.tsx
@@ -0,0 +1,85 @@
+import { ChevronRight, MoreHorizontal, Plus } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavWorkspaces({
+   workspaces,
+}: {
+   workspaces: {
+      name: string
+      emoji: React.ReactNode
+      pages: {
+         name: string
+         emoji: React.ReactNode
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {workspaces.map((workspace) => (
+                  <Collapsible key={workspace.name}>
+                     <SidebarMenuItem>
+                        <SidebarMenuButton asChild>
+                           <a href="#">
+                              <span>{workspace.emoji}</span>
+                              <span>{workspace.name}</span>
+                           </a>
+                        </SidebarMenuButton>
+                        <CollapsibleTrigger asChild>
+                           <SidebarMenuAction
+                              className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                              showOnHover
+                           >
+                              <ChevronRight />
+                           </SidebarMenuAction>
+                        </CollapsibleTrigger>
+                        <SidebarMenuAction showOnHover>
+                           <Plus />
+                        </SidebarMenuAction>
+                        <CollapsibleContent>
+                           <SidebarMenuSub>
+                              {workspace.pages.map((page) => (
+                                 <SidebarMenuSubItem key={page.name}>
+                                    <SidebarMenuSubButton asChild>
+                                       <a href="#">
+                                          <span>{page.emoji}</span>
+                                          <span>{page.name}</span>
+                                       </a>
+                                    </SidebarMenuSubButton>
+                                 </SidebarMenuSubItem>
+                              ))}
+                           </SidebarMenuSub>
+                        </CollapsibleContent>
+                     </SidebarMenuItem>
+                  </Collapsible>
+               ))}
+               <SidebarMenuItem>
+                  <SidebarMenuButton className="text-sidebar-foreground/70">
+                     <MoreHorizontal />
+                     <span>More</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-10/components/team-switcher.tsx b/apps/web/registry/miami/blocks/sidebar-10/components/team-switcher.tsx
new file mode 100644
index 00000000..01cd8f1d
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-10/components/team-switcher.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import { ChevronDown, Plus } from "lucide-react"
+import * as React from "react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function TeamSwitcher({
+   teams,
+}: {
+   teams: {
+      name: string
+      logo: React.ElementType
+      plan: string
+   }[]
+}) {
+   const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="w-fit px-1.5">
+                     <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                        <activeTeam.logo className="size-3" />
+                     </div>
+                     <span className="truncate font-semibold">
+                        {activeTeam.name}
+                     </span>
+                     <ChevronDown className="opacity-50" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-64 rounded-lg"
+                  align="start"
+                  side="bottom"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                     Teams
+                  </DropdownMenuLabel>
+                  {teams.map((team, index) => (
+                     <DropdownMenuItem
+                        key={team.name}
+                        onClick={() => setActiveTeam(team)}
+                        className="gap-2 p-2"
+                     >
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
+                           <team.logo className="size-4 shrink-0" />
+                        </div>
+                        {team.name}
+                        <DropdownMenuShortcut>
+                           ⌘{index + 1}
+                        </DropdownMenuShortcut>
+                     </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                     <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                        <Plus className="size-4" />
+                     </div>
+                     <div className="font-medium text-muted-foreground">
+                        Add team
+                     </div>
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-10/page.tsx b/apps/web/registry/miami/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000..852aec2d
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-10/page.tsx
@@ -0,0 +1,46 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-10/components/app-sidebar"
+import { NavActions } from "~/registry/miami/blocks/sidebar-10/components/nav-actions"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-14 shrink-0 items-center gap-2">
+               <div className="flex flex-1 items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem>
+                           <BreadcrumbPage className="line-clamp-1">
+                              Project Management & Task Tracking
+                           </BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+               <div className="ml-auto px-3">
+                  <NavActions />
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+               <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+               <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-11/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-11/components/app-sidebar.tsx
new file mode 100644
index 00000000..b8d9af2e
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-11/components/app-sidebar.tsx
@@ -0,0 +1,141 @@
+import { ChevronRight, File, Folder } from "lucide-react"
+import type * as React from "react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   changes: [
+      {
+         file: "README.md",
+         state: "M",
+      },
+      {
+         file: "api/hello/route.ts",
+         state: "U",
+      },
+      {
+         file: "app/layout.tsx",
+         state: "M",
+      },
+   ],
+   tree: [
+      [
+         "app",
+         [
+            "api",
+            ["hello", ["route.ts"]],
+            "page.tsx",
+            "layout.tsx",
+            ["blog", ["page.tsx"]],
+         ],
+      ],
+      [
+         "components",
+         ["ui", "button.tsx", "card.tsx"],
+         "header.tsx",
+         "footer.tsx",
+      ],
+      ["lib", ["util.ts"]],
+      ["public", "favicon.ico", "vercel.svg"],
+      ".eslintrc.json",
+      ".gitignore",
+      "next.config.js",
+      "tailwind.config.js",
+      "package.json",
+      "README.md",
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarGroupLabel>Changes</SidebarGroupLabel>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {data.changes.map((item, index) => (
+                        <SidebarMenuItem key={index}>
+                           <SidebarMenuButton>
+                              <File />
+                              {item.file}
+                           </SidebarMenuButton>
+                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+            <SidebarGroup>
+               <SidebarGroupLabel>Files</SidebarGroupLabel>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {data.tree.map((item, index) => (
+                        <Tree key={index} item={item} />
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
+
+function Tree({ item }: { item: string | any[] }) {
+   const [name, ...items] = Array.isArray(item) ? item : [item]
+
+   if (!items.length) {
+      return (
+         <SidebarMenuButton
+            isActive={name === "button.tsx"}
+            className="data-[active=true]:bg-transparent"
+         >
+            <File />
+            {name}
+         </SidebarMenuButton>
+      )
+   }
+
+   return (
+      <SidebarMenuItem>
+         <Collapsible
+            className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+            defaultOpen={name === "components" || name === "ui"}
+         >
+            <CollapsibleTrigger asChild>
+               <SidebarMenuButton>
+                  <ChevronRight className="transition-transform" />
+                  <Folder />
+                  {name}
+               </SidebarMenuButton>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+               <SidebarMenuSub>
+                  {items.map((subItem, index) => (
+                     <Tree key={index} item={subItem} />
+                  ))}
+               </SidebarMenuSub>
+            </CollapsibleContent>
+         </Collapsible>
+      </SidebarMenuItem>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-11/page.tsx b/apps/web/registry/miami/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000..aa1c0fa5
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-11/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-11/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">components</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">ui</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>button.tsx</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-12/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-12/components/app-sidebar.tsx
new file mode 100644
index 00000000..298a9346
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-12/components/app-sidebar.tsx
@@ -0,0 +1,66 @@
+import { Plus } from "lucide-react"
+import type * as React from "react"
+
+import { Calendars } from "~/registry/miami/blocks/sidebar-12/components/calendars"
+import { DatePicker } from "~/registry/miami/blocks/sidebar-12/components/date-picker"
+import { NavUser } from "~/registry/miami/blocks/sidebar-12/components/nav-user"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarRail,
+   SidebarSeparator,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   calendars: [
+      {
+         name: "My Calendars",
+         items: ["Personal", "Work", "Family"],
+      },
+      {
+         name: "Favorites",
+         items: ["Holidays", "Birthdays"],
+      },
+      {
+         name: "Other",
+         items: ["Travel", "Reminders", "Deadlines"],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader className="h-16 border-b border-sidebar-border">
+            <NavUser user={data.user} />
+         </SidebarHeader>
+         <SidebarContent>
+            <DatePicker />
+            <SidebarSeparator className="mx-0" />
+            <Calendars calendars={data.calendars} />
+         </SidebarContent>
+         <SidebarFooter>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton>
+                     <Plus />
+                     <span>New Calendar</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarFooter>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-12/components/calendars.tsx b/apps/web/registry/miami/blocks/sidebar-12/components/calendars.tsx
new file mode 100644
index 00000000..2441d87a
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-12/components/calendars.tsx
@@ -0,0 +1,71 @@
+import { Check, ChevronRight } from "lucide-react"
+import * as React from "react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarSeparator,
+} from "~/registry/miami/ui/sidebar"
+
+export function Calendars({
+   calendars,
+}: {
+   calendars: {
+      name: string
+      items: string[]
+   }[]
+}) {
+   return (
+      <>
+         {calendars.map((calendar, index) => (
+            <React.Fragment key={calendar.name}>
+               <SidebarGroup key={calendar.name} className="py-0">
+                  <Collapsible
+                     defaultOpen={index === 0}
+                     className="group/collapsible"
+                  >
+                     <SidebarGroupLabel
+                        asChild
+                        className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                     >
+                        <CollapsibleTrigger>
+                           {calendar.name}{" "}
+                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                        </CollapsibleTrigger>
+                     </SidebarGroupLabel>
+                     <CollapsibleContent>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {calendar.items.map((item, index) => (
+                                 <SidebarMenuItem key={item}>
+                                    <SidebarMenuButton>
+                                       <div
+                                          data-active={index < 2}
+                                          className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                                       >
+                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                                       </div>
+                                       {item}
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </CollapsibleContent>
+                  </Collapsible>
+               </SidebarGroup>
+               <SidebarSeparator className="mx-0" />
+            </React.Fragment>
+         ))}
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-12/components/date-picker.tsx b/apps/web/registry/miami/blocks/sidebar-12/components/date-picker.tsx
new file mode 100644
index 00000000..ef721c1a
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-12/components/date-picker.tsx
@@ -0,0 +1,12 @@
+import { Calendar } from "~/registry/miami/ui/calendar"
+import { SidebarGroup, SidebarGroupContent } from "~/registry/miami/ui/sidebar"
+
+export function DatePicker() {
+   return (
+      <SidebarGroup className="px-0">
+         <SidebarGroupContent>
+            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-12/components/nav-user.tsx b/apps/web/registry/miami/blocks/sidebar-12/components/nav-user.tsx
new file mode 100644
index 00000000..6c037c95
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-12/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="start"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-12/page.tsx b/apps/web/registry/miami/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000..442fec4a
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-12/page.tsx
@@ -0,0 +1,44 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-12/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>October 2024</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+                  {Array.from({ length: 20 }).map((_, i) => (
+                     <div
+                        key={i}
+                        className="aspect-square rounded-xl bg-muted/50"
+                     />
+                  ))}
+               </div>
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-13/components/settings-dialog.tsx b/apps/web/registry/miami/blocks/sidebar-13/components/settings-dialog.tsx
new file mode 100644
index 00000000..19ddff90
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-13/components/settings-dialog.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import {
+   Bell,
+   Check,
+   Globe,
+   Home,
+   Keyboard,
+   Link,
+   Lock,
+   Menu,
+   MessageCircle,
+   Paintbrush,
+   Settings,
+   Video,
+} from "lucide-react"
+import * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogTitle,
+   DialogTrigger,
+} from "~/registry/miami/ui/dialog"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const data = {
+   nav: [
+      { name: "Notifications", icon: Bell },
+      { name: "Navigation", icon: Menu },
+      { name: "Home", icon: Home },
+      { name: "Appearance", icon: Paintbrush },
+      { name: "Messages & media", icon: MessageCircle },
+      { name: "Language & region", icon: Globe },
+      { name: "Accessibility", icon: Keyboard },
+      { name: "Mark as read", icon: Check },
+      { name: "Audio & video", icon: Video },
+      { name: "Connected accounts", icon: Link },
+      { name: "Privacy & visibility", icon: Lock },
+      { name: "Advanced", icon: Settings },
+   ],
+}
+
+export function SettingsDialog() {
+   const [open, setOpen] = React.useState(true)
+
+   return (
+      <Dialog open={open} onOpenChange={setOpen}>
+         <DialogTrigger asChild>
+            <Button size="sm">Open Dialog</Button>
+         </DialogTrigger>
+         <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+            <DialogTitle className="sr-only">Settings</DialogTitle>
+            <DialogDescription className="sr-only">
+               Customize your settings here.
+            </DialogDescription>
+            <SidebarProvider className="items-start">
+               <Sidebar collapsible="none" className="hidden md:flex">
+                  <SidebarContent>
+                     <SidebarGroup>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {data.nav.map((item) => (
+                                 <SidebarMenuItem key={item.name}>
+                                    <SidebarMenuButton
+                                       asChild
+                                       isActive={
+                                          item.name === "Messages & media"
+                                       }
+                                    >
+                                       <a href="#">
+                                          <item.icon />
+                                          <span>{item.name}</span>
+                                       </a>
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </SidebarGroup>
+                  </SidebarContent>
+               </Sidebar>
+               <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
+                  <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+                     <div className="flex items-center gap-2 px-4">
+                        <Breadcrumb>
+                           <BreadcrumbList>
+                              <BreadcrumbItem className="hidden md:block">
+                                 <BreadcrumbLink href="#">
+                                    Settings
+                                 </BreadcrumbLink>
+                              </BreadcrumbItem>
+                              <BreadcrumbSeparator className="hidden md:block" />
+                              <BreadcrumbItem>
+                                 <BreadcrumbPage>
+                                    Messages & media
+                                 </BreadcrumbPage>
+                              </BreadcrumbItem>
+                           </BreadcrumbList>
+                        </Breadcrumb>
+                     </div>
+                  </header>
+                  <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+                     {Array.from({ length: 10 }).map((_, i) => (
+                        <div
+                           key={i}
+                           className="aspect-video max-w-3xl rounded-xl bg-muted/50"
+                        />
+                     ))}
+                  </div>
+               </main>
+            </SidebarProvider>
+         </DialogContent>
+      </Dialog>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-13/page.tsx b/apps/web/registry/miami/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000..b77c9783
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-13/page.tsx
@@ -0,0 +1,9 @@
+import { SettingsDialog } from "~/registry/miami/blocks/sidebar-13/components/settings-dialog"
+
+export default function Page() {
+   return (
+      <div className="flex h-svh items-center justify-center">
+         <SettingsDialog />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-14/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-14/components/app-sidebar.tsx
new file mode 100644
index 00000000..746ae65f
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-14/components/app-sidebar.tsx
@@ -0,0 +1,197 @@
+import type * as React from "react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {data.navMain.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url} className="font-medium">
+                                 {item.title}
+                              </a>
+                           </SidebarMenuButton>
+                           {item.items?.length ? (
+                              <SidebarMenuSub>
+                                 {item.items.map((item) => (
+                                    <SidebarMenuSubItem key={item.title}>
+                                       <SidebarMenuSubButton
+                                          asChild
+                                          isActive={item.isActive}
+                                       >
+                                          <a href={item.url}>{item.title}</a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           ) : null}
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-14/page.tsx b/apps/web/registry/miami/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000..31e89b6c
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-14/page.tsx
@@ -0,0 +1,48 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-14/components/app-sidebar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+               <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+         <AppSidebar side="right" />
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-15/components/calendars.tsx b/apps/web/registry/miami/blocks/sidebar-15/components/calendars.tsx
new file mode 100644
index 00000000..2441d87a
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-15/components/calendars.tsx
@@ -0,0 +1,71 @@
+import { Check, ChevronRight } from "lucide-react"
+import * as React from "react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarSeparator,
+} from "~/registry/miami/ui/sidebar"
+
+export function Calendars({
+   calendars,
+}: {
+   calendars: {
+      name: string
+      items: string[]
+   }[]
+}) {
+   return (
+      <>
+         {calendars.map((calendar, index) => (
+            <React.Fragment key={calendar.name}>
+               <SidebarGroup key={calendar.name} className="py-0">
+                  <Collapsible
+                     defaultOpen={index === 0}
+                     className="group/collapsible"
+                  >
+                     <SidebarGroupLabel
+                        asChild
+                        className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                     >
+                        <CollapsibleTrigger>
+                           {calendar.name}{" "}
+                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                        </CollapsibleTrigger>
+                     </SidebarGroupLabel>
+                     <CollapsibleContent>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {calendar.items.map((item, index) => (
+                                 <SidebarMenuItem key={item}>
+                                    <SidebarMenuButton>
+                                       <div
+                                          data-active={index < 2}
+                                          className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                                       >
+                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                                       </div>
+                                       {item}
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </CollapsibleContent>
+                  </Collapsible>
+               </SidebarGroup>
+               <SidebarSeparator className="mx-0" />
+            </React.Fragment>
+         ))}
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-15/components/date-picker.tsx b/apps/web/registry/miami/blocks/sidebar-15/components/date-picker.tsx
new file mode 100644
index 00000000..ef721c1a
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-15/components/date-picker.tsx
@@ -0,0 +1,12 @@
+import { Calendar } from "~/registry/miami/ui/calendar"
+import { SidebarGroup, SidebarGroupContent } from "~/registry/miami/ui/sidebar"
+
+export function DatePicker() {
+   return (
+      <SidebarGroup className="px-0">
+         <SidebarGroupContent>
+            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-15/components/nav-favorites.tsx b/apps/web/registry/miami/blocks/sidebar-15/components/nav-favorites.tsx
new file mode 100644
index 00000000..d46120ad
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-15/components/nav-favorites.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import {
+   ArrowUpRight,
+   Link,
+   MoreHorizontal,
+   StarOff,
+   Trash2,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavFavorites({
+   favorites,
+}: {
+   favorites: {
+      name: string
+      url: string
+      emoji: string
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+         <SidebarMenu>
+            {favorites.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url} title={item.name}>
+                        <span>{item.emoji}</span>
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-56 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <StarOff className="text-muted-foreground" />
+                           <span>Remove from Favorites</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Link className="text-muted-foreground" />
+                           <span>Copy Link</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <ArrowUpRight className="text-muted-foreground" />
+                           <span>Open in New Tab</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-15/components/nav-main.tsx b/apps/web/registry/miami/blocks/sidebar-15/components/nav-main.tsx
new file mode 100644
index 00000000..495f0cab
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-15/components/nav-main.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import type { LucideIcon } from "lucide-react"
+
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      isActive?: boolean
+   }[]
+}) {
+   return (
+      <SidebarMenu>
+         {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+               <SidebarMenuButton asChild isActive={item.isActive}>
+                  <a href={item.url}>
+                     <item.icon />
+                     <span>{item.title}</span>
+                  </a>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         ))}
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-15/components/nav-secondary.tsx b/apps/web/registry/miami/blocks/sidebar-15/components/nav-secondary.tsx
new file mode 100644
index 00000000..c8185d17
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-15/components/nav-secondary.tsx
@@ -0,0 +1,45 @@
+import type { LucideIcon } from "lucide-react"
+import type React from "react"
+
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavSecondary({
+   items,
+   ...props
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      badge?: React.ReactNode
+   }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+   return (
+      <SidebarGroup {...props}>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                     <SidebarMenuButton asChild>
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                     {item.badge && (
+                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+                     )}
+                  </SidebarMenuItem>
+               ))}
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-15/components/nav-user.tsx b/apps/web/registry/miami/blocks/sidebar-15/components/nav-user.tsx
new file mode 100644
index 00000000..6c037c95
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-15/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="start"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-15/components/nav-workspaces.tsx b/apps/web/registry/miami/blocks/sidebar-15/components/nav-workspaces.tsx
new file mode 100644
index 00000000..0e7860e8
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-15/components/nav-workspaces.tsx
@@ -0,0 +1,85 @@
+import { ChevronRight, MoreHorizontal, Plus } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavWorkspaces({
+   workspaces,
+}: {
+   workspaces: {
+      name: string
+      emoji: React.ReactNode
+      pages: {
+         name: string
+         emoji: React.ReactNode
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {workspaces.map((workspace) => (
+                  <Collapsible key={workspace.name}>
+                     <SidebarMenuItem>
+                        <SidebarMenuButton asChild>
+                           <a href="#">
+                              <span>{workspace.emoji}</span>
+                              <span>{workspace.name}</span>
+                           </a>
+                        </SidebarMenuButton>
+                        <CollapsibleTrigger asChild>
+                           <SidebarMenuAction
+                              className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                              showOnHover
+                           >
+                              <ChevronRight />
+                           </SidebarMenuAction>
+                        </CollapsibleTrigger>
+                        <SidebarMenuAction showOnHover>
+                           <Plus />
+                        </SidebarMenuAction>
+                        <CollapsibleContent>
+                           <SidebarMenuSub>
+                              {workspace.pages.map((page) => (
+                                 <SidebarMenuSubItem key={page.name}>
+                                    <SidebarMenuSubButton asChild>
+                                       <a href="#">
+                                          <span>{page.emoji}</span>
+                                          <span>{page.name}</span>
+                                       </a>
+                                    </SidebarMenuSubButton>
+                                 </SidebarMenuSubItem>
+                              ))}
+                           </SidebarMenuSub>
+                        </CollapsibleContent>
+                     </SidebarMenuItem>
+                  </Collapsible>
+               ))}
+               <SidebarMenuItem>
+                  <SidebarMenuButton className="text-sidebar-foreground/70">
+                     <MoreHorizontal />
+                     <span>More</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-15/components/sidebar-left.tsx b/apps/web/registry/miami/blocks/sidebar-15/components/sidebar-left.tsx
new file mode 100644
index 00000000..e2b006e3
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-15/components/sidebar-left.tsx
@@ -0,0 +1,278 @@
+"use client"
+
+import {
+   AudioWaveform,
+   Blocks,
+   Calendar,
+   Command,
+   Home,
+   Inbox,
+   MessageCircleQuestion,
+   Search,
+   Settings2,
+   Sparkles,
+   Trash2,
+} from "lucide-react"
+import type * as React from "react"
+
+import { NavFavorites } from "~/registry/miami/blocks/sidebar-15/components/nav-favorites"
+import { NavMain } from "~/registry/miami/blocks/sidebar-15/components/nav-main"
+import { NavSecondary } from "~/registry/miami/blocks/sidebar-15/components/nav-secondary"
+import { NavWorkspaces } from "~/registry/miami/blocks/sidebar-15/components/nav-workspaces"
+import { TeamSwitcher } from "~/registry/miami/blocks/sidebar-15/components/team-switcher"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarHeader,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: Command,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Search",
+         url: "#",
+         icon: Search,
+      },
+      {
+         title: "Ask AI",
+         url: "#",
+         icon: Sparkles,
+      },
+      {
+         title: "Home",
+         url: "#",
+         icon: Home,
+         isActive: true,
+      },
+      {
+         title: "Inbox",
+         url: "#",
+         icon: Inbox,
+         badge: "10",
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Calendar",
+         url: "#",
+         icon: Calendar,
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+      },
+      {
+         title: "Templates",
+         url: "#",
+         icon: Blocks,
+      },
+      {
+         title: "Trash",
+         url: "#",
+         icon: Trash2,
+      },
+      {
+         title: "Help",
+         url: "#",
+         icon: MessageCircleQuestion,
+      },
+   ],
+   favorites: [
+      {
+         name: "Project Management & Task Tracking",
+         url: "#",
+         emoji: "📊",
+      },
+      {
+         name: "Family Recipe Collection & Meal Planning",
+         url: "#",
+         emoji: "🍳",
+      },
+      {
+         name: "Fitness Tracker & Workout Routines",
+         url: "#",
+         emoji: "💪",
+      },
+      {
+         name: "Book Notes & Reading List",
+         url: "#",
+         emoji: "📚",
+      },
+      {
+         name: "Sustainable Gardening Tips & Plant Care",
+         url: "#",
+         emoji: "🌱",
+      },
+      {
+         name: "Language Learning Progress & Resources",
+         url: "#",
+         emoji: "🗣️",
+      },
+      {
+         name: "Home Renovation Ideas & Budget Tracker",
+         url: "#",
+         emoji: "🏠",
+      },
+      {
+         name: "Personal Finance & Investment Portfolio",
+         url: "#",
+         emoji: "💰",
+      },
+      {
+         name: "Movie & TV Show Watchlist with Reviews",
+         url: "#",
+         emoji: "🎬",
+      },
+      {
+         name: "Daily Habit Tracker & Goal Setting",
+         url: "#",
+         emoji: "✅",
+      },
+   ],
+   workspaces: [
+      {
+         name: "Personal Life Management",
+         emoji: "🏠",
+         pages: [
+            {
+               name: "Daily Journal & Reflection",
+               url: "#",
+               emoji: "📔",
+            },
+            {
+               name: "Health & Wellness Tracker",
+               url: "#",
+               emoji: "🍏",
+            },
+            {
+               name: "Personal Growth & Learning Goals",
+               url: "#",
+               emoji: "🌟",
+            },
+         ],
+      },
+      {
+         name: "Professional Development",
+         emoji: "💼",
+         pages: [
+            {
+               name: "Career Objectives & Milestones",
+               url: "#",
+               emoji: "🎯",
+            },
+            {
+               name: "Skill Acquisition & Training Log",
+               url: "#",
+               emoji: "🧠",
+            },
+            {
+               name: "Networking Contacts & Events",
+               url: "#",
+               emoji: "🤝",
+            },
+         ],
+      },
+      {
+         name: "Creative Projects",
+         emoji: "🎨",
+         pages: [
+            {
+               name: "Writing Ideas & Story Outlines",
+               url: "#",
+               emoji: "✍️",
+            },
+            {
+               name: "Art & Design Portfolio",
+               url: "#",
+               emoji: "🖼️",
+            },
+            {
+               name: "Music Composition & Practice Log",
+               url: "#",
+               emoji: "🎵",
+            },
+         ],
+      },
+      {
+         name: "Home Management",
+         emoji: "🏡",
+         pages: [
+            {
+               name: "Household Budget & Expense Tracking",
+               url: "#",
+               emoji: "💰",
+            },
+            {
+               name: "Home Maintenance Schedule & Tasks",
+               url: "#",
+               emoji: "🔧",
+            },
+            {
+               name: "Family Calendar & Event Planning",
+               url: "#",
+               emoji: "📅",
+            },
+         ],
+      },
+      {
+         name: "Travel & Adventure",
+         emoji: "🧳",
+         pages: [
+            {
+               name: "Trip Planning & Itineraries",
+               url: "#",
+               emoji: "🗺️",
+            },
+            {
+               name: "Travel Bucket List & Inspiration",
+               url: "#",
+               emoji: "🌎",
+            },
+            {
+               name: "Travel Journal & Photo Gallery",
+               url: "#",
+               emoji: "📸",
+            },
+         ],
+      },
+   ],
+}
+
+export function SidebarLeft({
+   ...props
+}: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar className="border-r-0" {...props}>
+         <SidebarHeader>
+            <TeamSwitcher teams={data.teams} />
+            <NavMain items={data.navMain} />
+         </SidebarHeader>
+         <SidebarContent>
+            <NavFavorites favorites={data.favorites} />
+            <NavWorkspaces workspaces={data.workspaces} />
+            <NavSecondary items={data.navSecondary} className="mt-auto" />
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-15/components/sidebar-right.tsx b/apps/web/registry/miami/blocks/sidebar-15/components/sidebar-right.tsx
new file mode 100644
index 00000000..9ccf32e3
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-15/components/sidebar-right.tsx
@@ -0,0 +1,71 @@
+import { Plus } from "lucide-react"
+import type * as React from "react"
+
+import { Calendars } from "~/registry/miami/blocks/sidebar-15/components/calendars"
+import { DatePicker } from "~/registry/miami/blocks/sidebar-15/components/date-picker"
+import { NavUser } from "~/registry/miami/blocks/sidebar-15/components/nav-user"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarRail,
+   SidebarSeparator,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   calendars: [
+      {
+         name: "My Calendars",
+         items: ["Personal", "Work", "Family"],
+      },
+      {
+         name: "Favorites",
+         items: ["Holidays", "Birthdays"],
+      },
+      {
+         name: "Other",
+         items: ["Travel", "Reminders", "Deadlines"],
+      },
+   ],
+}
+
+export function SidebarRight({
+   ...props
+}: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar
+         collapsible="none"
+         className="sticky hidden lg:flex top-0 h-svh border-l"
+         {...props}
+      >
+         <SidebarHeader className="h-16 border-b border-sidebar-border">
+            <NavUser user={data.user} />
+         </SidebarHeader>
+         <SidebarContent>
+            <DatePicker />
+            <SidebarSeparator className="mx-0" />
+            <Calendars calendars={data.calendars} />
+         </SidebarContent>
+         <SidebarFooter>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton>
+                     <Plus />
+                     <span>New Calendar</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarFooter>
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-15/components/team-switcher.tsx b/apps/web/registry/miami/blocks/sidebar-15/components/team-switcher.tsx
new file mode 100644
index 00000000..01cd8f1d
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-15/components/team-switcher.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import { ChevronDown, Plus } from "lucide-react"
+import * as React from "react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function TeamSwitcher({
+   teams,
+}: {
+   teams: {
+      name: string
+      logo: React.ElementType
+      plan: string
+   }[]
+}) {
+   const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="w-fit px-1.5">
+                     <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                        <activeTeam.logo className="size-3" />
+                     </div>
+                     <span className="truncate font-semibold">
+                        {activeTeam.name}
+                     </span>
+                     <ChevronDown className="opacity-50" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-64 rounded-lg"
+                  align="start"
+                  side="bottom"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                     Teams
+                  </DropdownMenuLabel>
+                  {teams.map((team, index) => (
+                     <DropdownMenuItem
+                        key={team.name}
+                        onClick={() => setActiveTeam(team)}
+                        className="gap-2 p-2"
+                     >
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
+                           <team.logo className="size-4 shrink-0" />
+                        </div>
+                        {team.name}
+                        <DropdownMenuShortcut>
+                           ⌘{index + 1}
+                        </DropdownMenuShortcut>
+                     </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                     <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                        <Plus className="size-4" />
+                     </div>
+                     <div className="font-medium text-muted-foreground">
+                        Add team
+                     </div>
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-15/page.tsx b/apps/web/registry/miami/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000..2c891896
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-15/page.tsx
@@ -0,0 +1,44 @@
+import { SidebarLeft } from "~/registry/miami/blocks/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "~/registry/miami/blocks/sidebar-15/components/sidebar-right"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <SidebarLeft />
+         <SidebarInset>
+            <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+               <div className="flex flex-1 items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem>
+                           <BreadcrumbPage className="line-clamp-1">
+                              Project Management & Task Tracking
+                           </BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+               <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+            </div>
+         </SidebarInset>
+         <SidebarRight />
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-16/components/app-sidebar.tsx b/apps/web/registry/miami/blocks/sidebar-16/components/app-sidebar.tsx
new file mode 100644
index 00000000..2e76d6b5
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-16/components/app-sidebar.tsx
@@ -0,0 +1,190 @@
+"use client"
+
+import {
+   BookOpen,
+   Bot,
+   Command,
+   Frame,
+   LifeBuoy,
+   Map,
+   PieChart,
+   Send,
+   Settings2,
+   SquareTerminal,
+} from "lucide-react"
+import type * as React from "react"
+
+import { NavMain } from "~/registry/miami/blocks/sidebar-16/components/nav-main"
+import { NavProjects } from "~/registry/miami/blocks/sidebar-16/components/nav-projects"
+import { NavSecondary } from "~/registry/miami/blocks/sidebar-16/components/nav-secondary"
+import { NavUser } from "~/registry/miami/blocks/sidebar-16/components/nav-user"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Support",
+         url: "#",
+         icon: LifeBuoy,
+      },
+      {
+         title: "Feedback",
+         url: "#",
+         icon: Send,
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar
+         className="top-[--header-height] !h-[calc(100svh-var(--header-height))]"
+         {...props}
+      >
+         <SidebarHeader>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton size="lg" asChild>
+                     <a href="#">
+                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                           <Command className="size-4" />
+                        </div>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              Acme Inc
+                           </span>
+                           <span className="truncate text-xs">Enterprise</span>
+                        </div>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarHeader>
+         <SidebarContent>
+            <NavMain items={data.navMain} />
+            <NavProjects projects={data.projects} />
+            <NavSecondary items={data.navSecondary} className="mt-auto" />
+         </SidebarContent>
+         <SidebarFooter>
+            <NavUser user={data.user} />
+         </SidebarFooter>
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-16/components/nav-main.tsx b/apps/web/registry/miami/blocks/sidebar-16/components/nav-main.tsx
new file mode 100644
index 00000000..5e0ae8a1
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-16/components/nav-main.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      isActive?: boolean
+      items?: {
+         title: string
+         url: string
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Platform</SidebarGroupLabel>
+         <SidebarMenu>
+            {items.map((item) => (
+               <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={item.isActive}
+               >
+                  <SidebarMenuItem>
+                     <SidebarMenuButton asChild tooltip={item.title}>
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                     {item.items?.length ? (
+                        <>
+                           <CollapsibleTrigger asChild>
+                              <SidebarMenuAction className="data-[state=open]:rotate-90">
+                                 <ChevronRight />
+                                 <span className="sr-only">Toggle</span>
+                              </SidebarMenuAction>
+                           </CollapsibleTrigger>
+                           <CollapsibleContent>
+                              <SidebarMenuSub>
+                                 {item.items?.map((subItem) => (
+                                    <SidebarMenuSubItem key={subItem.title}>
+                                       <SidebarMenuSubButton asChild>
+                                          <a href={subItem.url}>
+                                             <span>{subItem.title}</span>
+                                          </a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           </CollapsibleContent>
+                        </>
+                     ) : null}
+                  </SidebarMenuItem>
+               </Collapsible>
+            ))}
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-16/components/nav-projects.tsx b/apps/web/registry/miami/blocks/sidebar-16/components/nav-projects.tsx
new file mode 100644
index 00000000..e74bcd98
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-16/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+   Folder,
+   type LucideIcon,
+   MoreHorizontal,
+   Share,
+   Trash2,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavProjects({
+   projects,
+}: {
+   projects: {
+      name: string
+      url: string
+      icon: LucideIcon
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Projects</SidebarGroupLabel>
+         <SidebarMenu>
+            {projects.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url}>
+                        <item.icon />
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-48"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <Folder className="text-muted-foreground" />
+                           <span>View Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <Share className="text-muted-foreground" />
+                           <span>Share Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete Project</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton>
+                  <MoreHorizontal />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-16/components/nav-secondary.tsx b/apps/web/registry/miami/blocks/sidebar-16/components/nav-secondary.tsx
new file mode 100644
index 00000000..4a91913f
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-16/components/nav-secondary.tsx
@@ -0,0 +1,40 @@
+import type { LucideIcon } from "lucide-react"
+import type * as React from "react"
+
+import {
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavSecondary({
+   items,
+   ...props
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+   }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+   return (
+      <SidebarGroup {...props}>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                     <SidebarMenuButton asChild size="sm">
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               ))}
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-16/components/nav-user.tsx b/apps/web/registry/miami/blocks/sidebar-16/components/nav-user.tsx
new file mode 100644
index 00000000..6566b797
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-16/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="end"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-16/components/search-form.tsx b/apps/web/registry/miami/blocks/sidebar-16/components/search-form.tsx
new file mode 100644
index 00000000..960c1d46
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-16/components/search-form.tsx
@@ -0,0 +1,22 @@
+import { Search } from "lucide-react"
+
+import { Label } from "~/registry/miami/ui/label"
+import { SidebarInput } from "~/registry/miami/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+   return (
+      <form {...props}>
+         <div className="relative">
+            <Label htmlFor="search" className="sr-only">
+               Search
+            </Label>
+            <SidebarInput
+               id="search"
+               placeholder="Type to search..."
+               className="h-8 pl-7"
+            />
+            <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+         </div>
+      </form>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-16/components/site-header.tsx b/apps/web/registry/miami/blocks/sidebar-16/components/site-header.tsx
new file mode 100644
index 00000000..3af8a4ce
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-16/components/site-header.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { SidebarIcon } from "lucide-react"
+
+import { SearchForm } from "~/registry/miami/blocks/sidebar-16/components/search-form"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import { Separator } from "~/registry/miami/ui/separator"
+import { useSidebar } from "~/registry/miami/ui/sidebar"
+
+export function SiteHeader() {
+   const { toggleSidebar } = useSidebar()
+
+   return (
+      <header className="fle sticky top-0 z-50 w-full items-center border-b bg-background">
+         <div className="flex h-[--header-height] w-full items-center gap-2 px-4">
+            <Button
+               className="h-8 w-8"
+               variant="ghost"
+               size="icon"
+               onClick={toggleSidebar}
+            >
+               <SidebarIcon />
+            </Button>
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb className="hidden sm:block">
+               <BreadcrumbList>
+                  <BreadcrumbItem>
+                     <BreadcrumbLink href="#">
+                        Building Your Application
+                     </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                     <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                  </BreadcrumbItem>
+               </BreadcrumbList>
+            </Breadcrumb>
+            <SearchForm className="w-full sm:ml-auto sm:w-auto" />
+         </div>
+      </header>
+   )
+}
diff --git a/apps/web/registry/miami/blocks/sidebar-16/page.tsx b/apps/web/registry/miami/blocks/sidebar-16/page.tsx
new file mode 100644
index 00000000..301f91f1
--- /dev/null
+++ b/apps/web/registry/miami/blocks/sidebar-16/page.tsx
@@ -0,0 +1,30 @@
+import { AppSidebar } from "~/registry/miami/blocks/sidebar-16/components/app-sidebar"
+import { SiteHeader } from "~/registry/miami/blocks/sidebar-16/components/site-header"
+import { SidebarInset, SidebarProvider } from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a header and a search form."
+
+export default function Page() {
+   return (
+      <div className="[--header-height:calc(theme(spacing.14))]">
+         <SidebarProvider className="flex flex-col">
+            <SiteHeader />
+            <div className="flex flex-1">
+               <AppSidebar />
+               <SidebarInset>
+                  <div className="flex flex-1 flex-col gap-4 p-4">
+                     <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                        <div className="aspect-video rounded-xl bg-muted/50" />
+                        <div className="aspect-video rounded-xl bg-muted/50" />
+                        <div className="aspect-video rounded-xl bg-muted/50" />
+                     </div>
+                     <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+                  </div>
+               </SidebarInset>
+            </div>
+         </SidebarProvider>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-area-axes.tsx b/apps/web/registry/miami/charts/chart-area-axes.tsx
new file mode 100644
index 00000000..92194485
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-area-axes.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An area chart with axes"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Axes</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: -20,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <YAxis
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickCount={3}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-area-default.tsx b/apps/web/registry/miami/charts/chart-area-default.tsx
new file mode 100644
index 00000000..164c3c50
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-area-default.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A simple area chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-area-gradient.tsx b/apps/web/registry/miami/charts/chart-area-gradient.tsx
new file mode 100644
index 00000000..dcd8e9ec
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-area-gradient.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An area chart with gradient fill"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Gradient</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <defs>
+                     <linearGradient
+                        id="fillDesktop"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                     <linearGradient
+                        id="fillMobile"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                  </defs>
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="url(#fillMobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="url(#fillDesktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-area-icons.tsx b/apps/web/registry/miami/charts/chart-area-icons.tsx
new file mode 100644
index 00000000..9cd82054
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-area-icons.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { TrendingDown, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An area chart with icons"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+      icon: TrendingDown,
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+      icon: TrendingUp,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Icons</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-area-interactive.tsx b/apps/web/registry/miami/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000..8a4db42e
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-area-interactive.tsx
@@ -0,0 +1,281 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const [timeRange, setTimeRange] = React.useState("90d")
+
+   const filteredData = chartData.filter((item) => {
+      const date = new Date(item.date)
+      const referenceDate = new Date("2024-06-30")
+      let daysToSubtract = 90
+      if (timeRange === "30d") {
+         daysToSubtract = 30
+      } else if (timeRange === "7d") {
+         daysToSubtract = 7
+      }
+      const startDate = new Date(referenceDate)
+      startDate.setDate(startDate.getDate() - daysToSubtract)
+      return date >= startDate
+   })
+
+   return (
+      <Card>
+         <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
+            <div className="grid flex-1 gap-1 text-center sm:text-left">
+               <CardTitle>Area Chart - Interactive</CardTitle>
+               <CardDescription>
+                  Showing total visitors for the last 3 months
+               </CardDescription>
+            </div>
+            <Select value={timeRange} onValueChange={setTimeRange}>
+               <SelectTrigger
+                  className="w-[160px] rounded-lg sm:ml-auto"
+                  aria-label="Select a value"
+               >
+                  <SelectValue placeholder="Last 3 months" />
+               </SelectTrigger>
+               <SelectContent className="rounded-xl">
+                  <SelectItem value="90d" className="rounded-lg">
+                     Last 3 months
+                  </SelectItem>
+                  <SelectItem value="30d" className="rounded-lg">
+                     Last 30 days
+                  </SelectItem>
+                  <SelectItem value="7d" className="rounded-lg">
+                     Last 7 days
+                  </SelectItem>
+               </SelectContent>
+            </Select>
+         </CardHeader>
+         <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+            <ChartContainer
+               config={chartConfig}
+               className="aspect-auto h-[250px] w-full"
+            >
+               <AreaChart data={filteredData}>
+                  <defs>
+                     <linearGradient
+                        id="fillDesktop"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-desktop)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                     <linearGradient
+                        id="fillMobile"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                     >
+                        <stop
+                           offset="5%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.8}
+                        />
+                        <stop
+                           offset="95%"
+                           stopColor="var(--color-mobile)"
+                           stopOpacity={0.1}
+                        />
+                     </linearGradient>
+                  </defs>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     minTickGap={32}
+                     tickFormatter={(value) => {
+                        const date = new Date(value)
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
+                        })
+                     }}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                 },
+                              )
+                           }}
+                           indicator="dot"
+                        />
+                     }
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="url(#fillMobile)"
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="url(#fillDesktop)"
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-area-legend.tsx b/apps/web/registry/miami/charts/chart-area-legend.tsx
new file mode 100644
index 00000000..d6c2f912
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-area-legend.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An area chart with a legend"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Legend</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-area-linear.tsx b/apps/web/registry/miami/charts/chart-area-linear.tsx
new file mode 100644
index 00000000..876f0a01
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-area-linear.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A linear area chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Linear</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="dot" hideLabel />}
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="linear"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-area-stacked-expand.tsx b/apps/web/registry/miami/charts/chart-area-stacked-expand.tsx
new file mode 100644
index 00000000..52fa57ac
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-area-stacked-expand.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked area chart with expand stacking"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80, other: 45 },
+   { month: "February", desktop: 305, mobile: 200, other: 100 },
+   { month: "March", desktop: 237, mobile: 120, other: 150 },
+   { month: "April", desktop: 73, mobile: 190, other: 50 },
+   { month: "May", desktop: 209, mobile: 130, other: 100 },
+   { month: "June", desktop: 214, mobile: 140, other: 160 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-3))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Stacked Expanded</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                     top: 12,
+                  }}
+                  stackOffset="expand"
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                     dataKey="other"
+                     type="natural"
+                     fill="var(--color-other)"
+                     fillOpacity={0.1}
+                     stroke="var(--color-other)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-area-stacked.tsx b/apps/web/registry/miami/charts/chart-area-stacked.tsx
new file mode 100644
index 00000000..479c34da
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-area-stacked.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked area chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Stacked</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="dot" />}
+                  />
+                  <Area
+                     dataKey="mobile"
+                     type="natural"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-mobile)"
+                     stackId="a"
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="natural"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                     stackId="a"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-area-step.tsx b/apps/web/registry/miami/charts/chart-area-step.tsx
new file mode 100644
index 00000000..f1e9d853
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-area-step.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { Activity, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A step area chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+      icon: Activity,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Area Chart - Step</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Area
+                     dataKey="desktop"
+                     type="step"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.4}
+                     stroke="var(--color-desktop)"
+                  />
+               </AreaChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     January - June 2024
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-bar-active.tsx b/apps/web/registry/miami/charts/chart-bar-active.tsx
new file mode 100644
index 00000000..0e7dc223
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-bar-active.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart with an active bar"
+
+const chartData = [
+   { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Active</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="browser"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) =>
+                        chartConfig[value as keyof typeof chartConfig]?.label
+                     }
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                     dataKey="visitors"
+                     strokeWidth={2}
+                     radius={8}
+                     activeIndex={2}
+                     activeBar={({ ...props }) => {
+                        return (
+                           <Rectangle
+                              {...props}
+                              fillOpacity={0.8}
+                              stroke={props.payload.fill}
+                              strokeDasharray={4}
+                              strokeDashoffset={4}
+                           />
+                        )
+                     }}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-bar-default.tsx b/apps/web/registry/miami/charts/chart-bar-default.tsx
new file mode 100644
index 00000000..16453837
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-bar-default.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={8}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-bar-horizontal.tsx b/apps/web/registry/miami/charts/chart-bar-horizontal.tsx
new file mode 100644
index 00000000..e89feb3d
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-bar-horizontal.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A horizontal bar chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Horizontal</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  layout="vertical"
+                  margin={{
+                     left: -20,
+                  }}
+               >
+                  <XAxis type="number" dataKey="desktop" hide />
+                  <YAxis
+                     dataKey="month"
+                     type="category"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={5}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-bar-interactive.tsx b/apps/web/registry/miami/charts/chart-bar-interactive.tsx
new file mode 100644
index 00000000..f23caccf
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-bar-interactive.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An interactive bar chart"
+
+const chartData = [
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+   views: {
+      label: "Page Views",
+   },
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const [activeChart, setActiveChart] =
+      React.useState<keyof typeof chartConfig>("desktop")
+
+   const total = React.useMemo(
+      () => ({
+         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+      }),
+      [],
+   )
+
+   return (
+      <Card>
+         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+            <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+               <CardTitle>Bar Chart - Interactive</CardTitle>
+               <CardDescription>
+                  Showing total visitors for the last 3 months
+               </CardDescription>
+            </div>
+            <div className="flex">
+               {["desktop", "mobile"].map((key) => {
+                  const chart = key as keyof typeof chartConfig
+                  return (
+                     <button
+                        key={chart}
+                        data-active={activeChart === chart}
+                        className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                        onClick={() => setActiveChart(chart)}
+                     >
+                        <span className="text-xs text-muted-foreground">
+                           {chartConfig[chart].label}
+                        </span>
+                        <span className="text-lg font-bold leading-none sm:text-3xl">
+                           {total[key as keyof typeof total].toLocaleString()}
+                        </span>
+                     </button>
+                  )
+               })}
+            </div>
+         </CardHeader>
+         <CardContent className="px-2 sm:p-6">
+            <ChartContainer
+               config={chartConfig}
+               className="aspect-auto h-[250px] w-full"
+            >
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     minTickGap={32}
+                     tickFormatter={(value) => {
+                        const date = new Date(value)
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
+                        })
+                     }}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           className="w-[150px]"
+                           nameKey="views"
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                 },
+                              )
+                           }}
+                        />
+                     }
+                  />
+                  <Bar
+                     dataKey={activeChart}
+                     fill={`var(--color-${activeChart})`}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-bar-label-custom.tsx b/apps/web/registry/miami/charts/chart-bar-label-custom.tsx
new file mode 100644
index 00000000..3abee3e1
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-bar-label-custom.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart with a custom label"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+   label: {
+      color: "hsl(var(--background))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Custom Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  layout="vertical"
+                  margin={{
+                     right: 16,
+                  }}
+               >
+                  <CartesianGrid horizontal={false} />
+                  <YAxis
+                     dataKey="month"
+                     type="category"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                     hide
+                  />
+                  <XAxis dataKey="desktop" type="number" hide />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     layout="vertical"
+                     fill="var(--color-desktop)"
+                     radius={4}
+                  >
+                     <LabelList
+                        dataKey="month"
+                        position="insideLeft"
+                        offset={8}
+                        className="fill-[--color-label]"
+                        fontSize={12}
+                     />
+                     <LabelList
+                        dataKey="desktop"
+                        position="right"
+                        offset={8}
+                        className="fill-foreground"
+                        fontSize={12}
+                     />
+                  </Bar>
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-bar-label.tsx b/apps/web/registry/miami/charts/chart-bar-label.tsx
new file mode 100644
index 00000000..ca006fdb
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-bar-label.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart with a label"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 20,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
+                     <LabelList
+                        position="top"
+                        offset={12}
+                        className="fill-foreground"
+                        fontSize={12}
+                     />
+                  </Bar>
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-bar-mixed.tsx b/apps/web/registry/miami/charts/chart-bar-mixed.tsx
new file mode 100644
index 00000000..56bde747
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-bar-mixed.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A mixed bar chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Mixed</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart
+                  accessibilityLayer
+                  data={chartData}
+                  layout="vertical"
+                  margin={{
+                     left: 0,
+                  }}
+               >
+                  <YAxis
+                     dataKey="browser"
+                     type="category"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) =>
+                        chartConfig[value as keyof typeof chartConfig]?.label
+                     }
+                  />
+                  <XAxis dataKey="visitors" type="number" hide />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar dataKey="visitors" layout="vertical" radius={5} />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-bar-multiple.tsx b/apps/web/registry/miami/charts/chart-bar-multiple.tsx
new file mode 100644
index 00000000..3fec4b70
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-bar-multiple.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A multiple bar chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Multiple</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="dashed" />}
+                  />
+                  <Bar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     radius={4}
+                  />
+                  <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-bar-negative.tsx b/apps/web/registry/miami/charts/chart-bar-negative.tsx
new file mode 100644
index 00000000..7078443a
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-bar-negative.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A bar chart with negative values"
+
+const chartData = [
+   { month: "January", visitors: 186 },
+   { month: "February", visitors: 205 },
+   { month: "March", visitors: -207 },
+   { month: "April", visitors: 173 },
+   { month: "May", visitors: -209 },
+   { month: "June", visitors: 214 },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Negative</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel hideIndicator />}
+                  />
+                  <Bar dataKey="visitors">
+                     <LabelList
+                        position="top"
+                        dataKey="month"
+                        fillOpacity={1}
+                     />
+                     {chartData.map((item) => (
+                        <Cell
+                           key={item.month}
+                           fill={
+                              item.visitors > 0
+                                 ? "hsl(var(--chart-1))"
+                                 : "hsl(var(--chart-2))"
+                           }
+                        />
+                     ))}
+                  </Bar>
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-bar-stacked.tsx b/apps/web/registry/miami/charts/chart-bar-stacked.tsx
new file mode 100644
index 00000000..ff9a0b58
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-bar-stacked.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Bar Chart - Stacked + Legend</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+                  <ChartLegend content={<ChartLegendContent />} />
+                  <Bar
+                     dataKey="desktop"
+                     stackId="a"
+                     fill="var(--color-desktop)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="mobile"
+                     stackId="a"
+                     fill="var(--color-mobile)"
+                     radius={[4, 4, 0, 0]}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-line-default.tsx b/apps/web/registry/miami/charts/chart-line-default.tsx
new file mode 100644
index 00000000..ab335c1c
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-line-default.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-line-dots-colors.tsx b/apps/web/registry/miami/charts/chart-line-dots-colors.tsx
new file mode 100644
index 00000000..c2cef299
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-line-dots-colors.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Dot, Line, LineChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with dots and colors"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+      color: "hsl(var(--chart-2))",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Dots Colors</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 24,
+                     left: 24,
+                     right: 24,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           indicator="line"
+                           nameKey="visitors"
+                           hideLabel
+                        />
+                     }
+                  />
+                  <Line
+                     dataKey="visitors"
+                     type="natural"
+                     stroke="var(--color-visitors)"
+                     strokeWidth={2}
+                     dot={({ payload, ...props }) => {
+                        return (
+                           <Dot
+                              key={payload.browser}
+                              r={5}
+                              cx={props.cx}
+                              cy={props.cy}
+                              fill={payload.fill}
+                              stroke={payload.fill}
+                           />
+                        )
+                     }}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-line-dots-custom.tsx b/apps/web/registry/miami/charts/chart-line-dots-custom.tsx
new file mode 100644
index 00000000..362dd1ce
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-line-dots-custom.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { GitCommitVertical, TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with custom dots"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Custom Dots</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={({ cx, cy, payload }) => {
+                        const r = 24
+                        return (
+                           <GitCommitVertical
+                              key={payload.month}
+                              x={cx - r / 2}
+                              y={cy - r / 2}
+                              width={r}
+                              height={r}
+                              fill="hsl(var(--background))"
+                              stroke="var(--color-desktop)"
+                           />
+                        )
+                     }}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-line-dots.tsx b/apps/web/registry/miami/charts/chart-line-dots.tsx
new file mode 100644
index 00000000..b41afc1c
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-line-dots.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with dots"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Dots</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={{
+                        fill: "var(--color-desktop)",
+                     }}
+                     activeDot={{
+                        r: 6,
+                     }}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-line-interactive.tsx b/apps/web/registry/miami/charts/chart-line-interactive.tsx
new file mode 100644
index 00000000..3fb317b9
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-line-interactive.tsx
@@ -0,0 +1,230 @@
+"use client"
+
+import * as React from "react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "An interactive line chart"
+
+const chartData = [
+   { date: "2024-04-01", desktop: 222, mobile: 150 },
+   { date: "2024-04-02", desktop: 97, mobile: 180 },
+   { date: "2024-04-03", desktop: 167, mobile: 120 },
+   { date: "2024-04-04", desktop: 242, mobile: 260 },
+   { date: "2024-04-05", desktop: 373, mobile: 290 },
+   { date: "2024-04-06", desktop: 301, mobile: 340 },
+   { date: "2024-04-07", desktop: 245, mobile: 180 },
+   { date: "2024-04-08", desktop: 409, mobile: 320 },
+   { date: "2024-04-09", desktop: 59, mobile: 110 },
+   { date: "2024-04-10", desktop: 261, mobile: 190 },
+   { date: "2024-04-11", desktop: 327, mobile: 350 },
+   { date: "2024-04-12", desktop: 292, mobile: 210 },
+   { date: "2024-04-13", desktop: 342, mobile: 380 },
+   { date: "2024-04-14", desktop: 137, mobile: 220 },
+   { date: "2024-04-15", desktop: 120, mobile: 170 },
+   { date: "2024-04-16", desktop: 138, mobile: 190 },
+   { date: "2024-04-17", desktop: 446, mobile: 360 },
+   { date: "2024-04-18", desktop: 364, mobile: 410 },
+   { date: "2024-04-19", desktop: 243, mobile: 180 },
+   { date: "2024-04-20", desktop: 89, mobile: 150 },
+   { date: "2024-04-21", desktop: 137, mobile: 200 },
+   { date: "2024-04-22", desktop: 224, mobile: 170 },
+   { date: "2024-04-23", desktop: 138, mobile: 230 },
+   { date: "2024-04-24", desktop: 387, mobile: 290 },
+   { date: "2024-04-25", desktop: 215, mobile: 250 },
+   { date: "2024-04-26", desktop: 75, mobile: 130 },
+   { date: "2024-04-27", desktop: 383, mobile: 420 },
+   { date: "2024-04-28", desktop: 122, mobile: 180 },
+   { date: "2024-04-29", desktop: 315, mobile: 240 },
+   { date: "2024-04-30", desktop: 454, mobile: 380 },
+   { date: "2024-05-01", desktop: 165, mobile: 220 },
+   { date: "2024-05-02", desktop: 293, mobile: 310 },
+   { date: "2024-05-03", desktop: 247, mobile: 190 },
+   { date: "2024-05-04", desktop: 385, mobile: 420 },
+   { date: "2024-05-05", desktop: 481, mobile: 390 },
+   { date: "2024-05-06", desktop: 498, mobile: 520 },
+   { date: "2024-05-07", desktop: 388, mobile: 300 },
+   { date: "2024-05-08", desktop: 149, mobile: 210 },
+   { date: "2024-05-09", desktop: 227, mobile: 180 },
+   { date: "2024-05-10", desktop: 293, mobile: 330 },
+   { date: "2024-05-11", desktop: 335, mobile: 270 },
+   { date: "2024-05-12", desktop: 197, mobile: 240 },
+   { date: "2024-05-13", desktop: 197, mobile: 160 },
+   { date: "2024-05-14", desktop: 448, mobile: 490 },
+   { date: "2024-05-15", desktop: 473, mobile: 380 },
+   { date: "2024-05-16", desktop: 338, mobile: 400 },
+   { date: "2024-05-17", desktop: 499, mobile: 420 },
+   { date: "2024-05-18", desktop: 315, mobile: 350 },
+   { date: "2024-05-19", desktop: 235, mobile: 180 },
+   { date: "2024-05-20", desktop: 177, mobile: 230 },
+   { date: "2024-05-21", desktop: 82, mobile: 140 },
+   { date: "2024-05-22", desktop: 81, mobile: 120 },
+   { date: "2024-05-23", desktop: 252, mobile: 290 },
+   { date: "2024-05-24", desktop: 294, mobile: 220 },
+   { date: "2024-05-25", desktop: 201, mobile: 250 },
+   { date: "2024-05-26", desktop: 213, mobile: 170 },
+   { date: "2024-05-27", desktop: 420, mobile: 460 },
+   { date: "2024-05-28", desktop: 233, mobile: 190 },
+   { date: "2024-05-29", desktop: 78, mobile: 130 },
+   { date: "2024-05-30", desktop: 340, mobile: 280 },
+   { date: "2024-05-31", desktop: 178, mobile: 230 },
+   { date: "2024-06-01", desktop: 178, mobile: 200 },
+   { date: "2024-06-02", desktop: 470, mobile: 410 },
+   { date: "2024-06-03", desktop: 103, mobile: 160 },
+   { date: "2024-06-04", desktop: 439, mobile: 380 },
+   { date: "2024-06-05", desktop: 88, mobile: 140 },
+   { date: "2024-06-06", desktop: 294, mobile: 250 },
+   { date: "2024-06-07", desktop: 323, mobile: 370 },
+   { date: "2024-06-08", desktop: 385, mobile: 320 },
+   { date: "2024-06-09", desktop: 438, mobile: 480 },
+   { date: "2024-06-10", desktop: 155, mobile: 200 },
+   { date: "2024-06-11", desktop: 92, mobile: 150 },
+   { date: "2024-06-12", desktop: 492, mobile: 420 },
+   { date: "2024-06-13", desktop: 81, mobile: 130 },
+   { date: "2024-06-14", desktop: 426, mobile: 380 },
+   { date: "2024-06-15", desktop: 307, mobile: 350 },
+   { date: "2024-06-16", desktop: 371, mobile: 310 },
+   { date: "2024-06-17", desktop: 475, mobile: 520 },
+   { date: "2024-06-18", desktop: 107, mobile: 170 },
+   { date: "2024-06-19", desktop: 341, mobile: 290 },
+   { date: "2024-06-20", desktop: 408, mobile: 450 },
+   { date: "2024-06-21", desktop: 169, mobile: 210 },
+   { date: "2024-06-22", desktop: 317, mobile: 270 },
+   { date: "2024-06-23", desktop: 480, mobile: 530 },
+   { date: "2024-06-24", desktop: 132, mobile: 180 },
+   { date: "2024-06-25", desktop: 141, mobile: 190 },
+   { date: "2024-06-26", desktop: 434, mobile: 380 },
+   { date: "2024-06-27", desktop: 448, mobile: 490 },
+   { date: "2024-06-28", desktop: 149, mobile: 200 },
+   { date: "2024-06-29", desktop: 103, mobile: 160 },
+   { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+   views: {
+      label: "Page Views",
+   },
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const [activeChart, setActiveChart] =
+      React.useState<keyof typeof chartConfig>("desktop")
+
+   const total = React.useMemo(
+      () => ({
+         desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+         mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+      }),
+      [],
+   )
+
+   return (
+      <Card>
+         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+            <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+               <CardTitle>Line Chart - Interactive</CardTitle>
+               <CardDescription>
+                  Showing total visitors for the last 3 months
+               </CardDescription>
+            </div>
+            <div className="flex">
+               {["desktop", "mobile"].map((key) => {
+                  const chart = key as keyof typeof chartConfig
+                  return (
+                     <button
+                        key={chart}
+                        data-active={activeChart === chart}
+                        className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                        onClick={() => setActiveChart(chart)}
+                     >
+                        <span className="text-xs text-muted-foreground">
+                           {chartConfig[chart].label}
+                        </span>
+                        <span className="text-lg font-bold leading-none sm:text-3xl">
+                           {total[key as keyof typeof total].toLocaleString()}
+                        </span>
+                     </button>
+                  )
+               })}
+            </div>
+         </CardHeader>
+         <CardContent className="px-2 sm:p-6">
+            <ChartContainer
+               config={chartConfig}
+               className="aspect-auto h-[250px] w-full"
+            >
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     minTickGap={32}
+                     tickFormatter={(value) => {
+                        const date = new Date(value)
+                        return date.toLocaleDateString("en-US", {
+                           month: "short",
+                           day: "numeric",
+                        })
+                     }}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           className="w-[150px]"
+                           nameKey="views"
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                 },
+                              )
+                           }}
+                        />
+                     }
+                  />
+                  <Line
+                     dataKey={activeChart}
+                     type="monotone"
+                     stroke={`var(--color-${activeChart})`}
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-line-label-custom.tsx b/apps/web/registry/miami/charts/chart-line-label-custom.tsx
new file mode 100644
index 00000000..08f26a4e
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-line-label-custom.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with a custom label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+      color: "hsl(var(--chart-2))",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Custom Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 24,
+                     left: 24,
+                     right: 24,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           indicator="line"
+                           nameKey="visitors"
+                           hideLabel
+                        />
+                     }
+                  />
+                  <Line
+                     dataKey="visitors"
+                     type="natural"
+                     stroke="var(--color-visitors)"
+                     strokeWidth={2}
+                     dot={{
+                        fill: "var(--color-visitors)",
+                     }}
+                     activeDot={{
+                        r: 6,
+                     }}
+                  >
+                     <LabelList
+                        position="top"
+                        offset={12}
+                        className="fill-foreground"
+                        fontSize={12}
+                        dataKey="browser"
+                        formatter={(value: keyof typeof chartConfig) =>
+                           chartConfig[value]?.label
+                        }
+                     />
+                  </Line>
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-line-label.tsx b/apps/web/registry/miami/charts/chart-line-label.tsx
new file mode 100644
index 00000000..3ae88b1f
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-line-label.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with a label"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     top: 20,
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="natural"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={{
+                        fill: "var(--color-desktop)",
+                     }}
+                     activeDot={{
+                        r: 6,
+                     }}
+                  >
+                     <LabelList
+                        position="top"
+                        offset={12}
+                        className="fill-foreground"
+                        fontSize={12}
+                     />
+                  </Line>
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-line-linear.tsx b/apps/web/registry/miami/charts/chart-line-linear.tsx
new file mode 100644
index 00000000..eec8e1a0
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-line-linear.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A linear line chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Linear</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="linear"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-line-multiple.tsx b/apps/web/registry/miami/charts/chart-line-multiple.tsx
new file mode 100644
index 00000000..7bfcafc6
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-line-multiple.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A multiple line chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Multiple</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="monotone"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+                  <Line
+                     dataKey="mobile"
+                     type="monotone"
+                     stroke="var(--color-mobile)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter>
+            <div className="flex w-full items-start gap-2 text-sm">
+               <div className="grid gap-2">
+                  <div className="flex items-center gap-2 font-medium leading-none">
+                     Trending up by 5.2% this month{" "}
+                     <TrendingUp className="h-4 w-4" />
+                  </div>
+                  <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                     Showing total visitors for the last 6 months
+                  </div>
+               </div>
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-line-step.tsx b/apps/web/registry/miami/charts/chart-line-step.tsx
new file mode 100644
index 00000000..9b0c7657
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-line-step.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A line chart with step"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 73 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Line Chart - Step</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <LineChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                     left: 12,
+                     right: 12,
+                  }}
+               >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                     dataKey="month"
+                     tickLine={false}
+                     axisLine={false}
+                     tickMargin={8}
+                     tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Line
+                     dataKey="desktop"
+                     type="step"
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                     dot={false}
+                  />
+               </LineChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col items-start gap-2 text-sm">
+            <div className="flex gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-pie-donut-active.tsx b/apps/web/registry/miami/charts/chart-pie-donut-active.tsx
new file mode 100644
index 00000000..9517f7d5
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-pie-donut-active.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import type { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A donut chart with an active sector"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Donut Active</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     innerRadius={60}
+                     strokeWidth={5}
+                     activeIndex={0}
+                     activeShape={({
+                        outerRadius = 0,
+                        ...props
+                     }: PieSectorDataItem) => (
+                        <Sector {...props} outerRadius={outerRadius + 10} />
+                     )}
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-pie-donut-text.tsx b/apps/web/registry/miami/charts/chart-pie-donut-text.tsx
new file mode 100644
index 00000000..1417bb1d
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-pie-donut-text.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import * as React from "react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A donut chart with text"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 190, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const totalVisitors = React.useMemo(() => {
+      return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+   }, [])
+
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Donut with Text</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     innerRadius={60}
+                     strokeWidth={5}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-3xl font-bold"
+                                    >
+                                       {totalVisitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </Pie>
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-pie-donut.tsx b/apps/web/registry/miami/charts/chart-pie-donut.tsx
new file mode 100644
index 00000000..267d1b3e
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-pie-donut.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A donut chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Donut</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     innerRadius={60}
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-pie-interactive.tsx b/apps/web/registry/miami/charts/chart-pie-interactive.tsx
new file mode 100644
index 00000000..fffa4349
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-pie-interactive.tsx
@@ -0,0 +1,194 @@
+"use client"
+
+import * as React from "react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import type { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartStyle,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export const description = "An interactive pie chart"
+
+const desktopData = [
+   { month: "january", desktop: 186, fill: "var(--color-january)" },
+   { month: "february", desktop: 305, fill: "var(--color-february)" },
+   { month: "march", desktop: 237, fill: "var(--color-march)" },
+   { month: "april", desktop: 173, fill: "var(--color-april)" },
+   { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   desktop: {
+      label: "Desktop",
+   },
+   mobile: {
+      label: "Mobile",
+   },
+   january: {
+      label: "January",
+      color: "hsl(var(--chart-1))",
+   },
+   february: {
+      label: "February",
+      color: "hsl(var(--chart-2))",
+   },
+   march: {
+      label: "March",
+      color: "hsl(var(--chart-3))",
+   },
+   april: {
+      label: "April",
+      color: "hsl(var(--chart-4))",
+   },
+   may: {
+      label: "May",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const id = "pie-interactive"
+   const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
+
+   const activeIndex = React.useMemo(
+      () => desktopData.findIndex((item) => item.month === activeMonth),
+      [activeMonth],
+   )
+   const months = React.useMemo(() => desktopData.map((item) => item.month), [])
+
+   return (
+      <Card data-chart={id} className="flex flex-col">
+         <ChartStyle id={id} config={chartConfig} />
+         <CardHeader className="flex-row items-start space-y-0 pb-0">
+            <div className="grid gap-1">
+               <CardTitle>Pie Chart - Interactive</CardTitle>
+               <CardDescription>January - June 2024</CardDescription>
+            </div>
+            <Select value={activeMonth} onValueChange={setActiveMonth}>
+               <SelectTrigger
+                  className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
+                  aria-label="Select a value"
+               >
+                  <SelectValue placeholder="Select month" />
+               </SelectTrigger>
+               <SelectContent align="end" className="rounded-xl">
+                  {months.map((key) => {
+                     const config = chartConfig[key as keyof typeof chartConfig]
+
+                     if (!config) {
+                        return null
+                     }
+
+                     return (
+                        <SelectItem
+                           key={key}
+                           value={key}
+                           className="rounded-lg [&_span]:flex"
+                        >
+                           <div className="flex items-center gap-2 text-xs">
+                              <span
+                                 className="flex h-3 w-3 shrink-0 rounded-sm"
+                                 style={{
+                                    backgroundColor: `var(--color-${key})`,
+                                 }}
+                              />
+                              {config?.label}
+                           </div>
+                        </SelectItem>
+                     )
+                  })}
+               </SelectContent>
+            </Select>
+         </CardHeader>
+         <CardContent className="flex flex-1 justify-center pb-0">
+            <ChartContainer
+               id={id}
+               config={chartConfig}
+               className="mx-auto aspect-square w-full max-w-[300px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={desktopData}
+                     dataKey="desktop"
+                     nameKey="month"
+                     innerRadius={60}
+                     strokeWidth={5}
+                     activeIndex={activeIndex}
+                     activeShape={({
+                        outerRadius = 0,
+                        ...props
+                     }: PieSectorDataItem) => (
+                        <g>
+                           <Sector {...props} outerRadius={outerRadius + 10} />
+                           <Sector
+                              {...props}
+                              outerRadius={outerRadius + 25}
+                              innerRadius={outerRadius + 12}
+                           />
+                        </g>
+                     )}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-3xl font-bold"
+                                    >
+                                       {desktopData[
+                                          activeIndex
+                                       ].desktop.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </Pie>
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-pie-label-custom.tsx b/apps/web/registry/miami/charts/chart-pie-label-custom.tsx
new file mode 100644
index 00000000..d926e0d6
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-pie-label-custom.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with a custom label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Custom Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px] px-0"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent nameKey="visitors" hideLabel />
+                     }
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     labelLine={false}
+                     label={({ payload, ...props }) => {
+                        return (
+                           <text
+                              cx={props.cx}
+                              cy={props.cy}
+                              x={props.x}
+                              y={props.y}
+                              textAnchor={props.textAnchor}
+                              dominantBaseline={props.dominantBaseline}
+                              fill="hsla(var(--foreground))"
+                           >
+                              {payload.visitors}
+                           </text>
+                        )
+                     }}
+                     nameKey="browser"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-pie-label-list.tsx b/apps/web/registry/miami/charts/chart-pie-label-list.tsx
new file mode 100644
index 00000000..c31543d4
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-pie-label-list.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with a label list"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Label List</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent nameKey="visitors" hideLabel />
+                     }
+                  />
+                  <Pie data={chartData} dataKey="visitors">
+                     <LabelList
+                        dataKey="browser"
+                        className="fill-background"
+                        stroke="none"
+                        fontSize={12}
+                        formatter={(value: keyof typeof chartConfig) =>
+                           chartConfig[value]?.label
+                        }
+                     />
+                  </Pie>
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-pie-label.tsx b/apps/web/registry/miami/charts/chart-pie-label.tsx
new file mode 100644
index 00000000..9a9ceb58
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-pie-label.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with a label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
+            >
+               <PieChart>
+                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     label
+                     nameKey="browser"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-pie-legend.tsx b/apps/web/registry/miami/charts/chart-pie-legend.tsx
new file mode 100644
index 00000000..e0ae6dc6
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-pie-legend.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with a legend"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Legend</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[300px]"
+            >
+               <PieChart>
+                  <Pie data={chartData} dataKey="visitors" />
+                  <ChartLegend
+                     content={<ChartLegendContent nameKey="browser" />}
+                     className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-pie-separator-none.tsx b/apps/web/registry/miami/charts/chart-pie-separator-none.tsx
new file mode 100644
index 00000000..a2727312
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-pie-separator-none.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with no separator"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Separator None</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                     data={chartData}
+                     dataKey="visitors"
+                     nameKey="browser"
+                     stroke="0"
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-pie-simple.tsx b/apps/web/registry/miami/charts/chart-pie-simple.tsx
new file mode 100644
index 00000000..40cb711a
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-pie-simple.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A simple pie chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie data={chartData} dataKey="visitors" nameKey="browser" />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-pie-stacked.tsx b/apps/web/registry/miami/charts/chart-pie-stacked.tsx
new file mode 100644
index 00000000..60238dc6
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-pie-stacked.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import * as React from "react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A pie chart with stacked sections"
+
+const desktopData = [
+   { month: "january", desktop: 186, fill: "var(--color-january)" },
+   { month: "february", desktop: 305, fill: "var(--color-february)" },
+   { month: "march", desktop: 237, fill: "var(--color-march)" },
+   { month: "april", desktop: 173, fill: "var(--color-april)" },
+   { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const mobileData = [
+   { month: "january", mobile: 80, fill: "var(--color-january)" },
+   { month: "february", mobile: 200, fill: "var(--color-february)" },
+   { month: "march", mobile: 120, fill: "var(--color-march)" },
+   { month: "april", mobile: 190, fill: "var(--color-april)" },
+   { month: "may", mobile: 130, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   desktop: {
+      label: "Desktop",
+   },
+   mobile: {
+      label: "Mobile",
+   },
+   january: {
+      label: "January",
+      color: "hsl(var(--chart-1))",
+   },
+   february: {
+      label: "February",
+      color: "hsl(var(--chart-2))",
+   },
+   march: {
+      label: "March",
+      color: "hsl(var(--chart-3))",
+   },
+   april: {
+      label: "April",
+      color: "hsl(var(--chart-4))",
+   },
+   may: {
+      label: "May",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Pie Chart - Stacked</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <PieChart>
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           labelKey="visitors"
+                           nameKey="month"
+                           indicator="line"
+                           labelFormatter={(_, payload) => {
+                              return chartConfig[
+                                 payload?.[0]
+                                    .dataKey as keyof typeof chartConfig
+                              ].label
+                           }}
+                        />
+                     }
+                  />
+                  <Pie data={desktopData} dataKey="desktop" outerRadius={60} />
+                  <Pie
+                     data={mobileData}
+                     dataKey="mobile"
+                     innerRadius={70}
+                     outerRadius={90}
+                  />
+               </PieChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-default.tsx b/apps/web/registry/miami/charts/chart-radar-default.tsx
new file mode 100644
index 00000000..f29cdc8d
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-default.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-dots.tsx b/apps/web/registry/miami/charts/chart-radar-dots.tsx
new file mode 100644
index 00000000..113082e4
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-dots.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with dots"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center">
+            <CardTitle>Radar Chart - Dots</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-grid-circle-fill.tsx b/apps/web/registry/miami/charts/chart-radar-grid-circle-fill.tsx
new file mode 100644
index 00000000..f20f6f8b
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-grid-circle-fill.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 285 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent />}
+                  />
+                  <PolarGrid
+                     className="fill-[--color-desktop] opacity-20"
+                     gridType="circle"
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.5}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-grid-circle-no-lines.tsx b/apps/web/registry/miami/charts/chart-radar-grid-circle-no-lines.tsx
new file mode 100644
index 00000000..15d7fc66
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-grid-circle-no-lines.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid gridType="circle" radialLines={false} />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-grid-circle.tsx b/apps/web/registry/miami/charts/chart-radar-grid-circle.tsx
new file mode 100644
index 00000000..63f244c5
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-grid-circle.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a grid and circle"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Circle</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid gridType="circle" />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-grid-custom.tsx b/apps/web/registry/miami/charts/chart-radar-grid-custom.tsx
new file mode 100644
index 00000000..d378825a
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-grid-custom.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a custom grid"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Custom</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid
+                     radialLines={false}
+                     polarRadius={[90]}
+                     strokeWidth={1}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-grid-fill.tsx b/apps/web/registry/miami/charts/chart-radar-grid-fill.tsx
new file mode 100644
index 00000000..0605ca27
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-grid-fill.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a grid filled"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 285 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 203 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid Filled</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarGrid className="fill-[--color-desktop] opacity-20" />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.5}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-grid-none.tsx b/apps/web/registry/miami/charts/chart-radar-grid-none.tsx
new file mode 100644
index 00000000..f8ee632a
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-grid-none.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with no grid"
+
+const chartData = [
+   { month: "January", desktop: 186 },
+   { month: "February", desktop: 305 },
+   { month: "March", desktop: 237 },
+   { month: "April", desktop: 273 },
+   { month: "May", desktop: 209 },
+   { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Grid None</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                     dot={{
+                        r: 4,
+                        fillOpacity: 1,
+                     }}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-icons.tsx b/apps/web/registry/miami/charts/chart-radar-icons.tsx
new file mode 100644
index 00000000..9c783a31
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-icons.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with icons"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+      icon: ArrowDownFromLine,
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+      icon: ArrowUpFromLine,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Icons</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart
+                  data={chartData}
+                  margin={{
+                     top: -40,
+                     bottom: -10,
+                  }}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+                  <ChartLegend
+                     className="mt-8"
+                     content={<ChartLegendContent />}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 pt-4 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-label-custom.tsx b/apps/web/registry/miami/charts/chart-radar-label-custom.tsx
new file mode 100644
index 00000000..36fb2186
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-label-custom.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a custom label"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Custom Label</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart
+                  data={chartData}
+                  margin={{
+                     top: 10,
+                     right: 10,
+                     bottom: 10,
+                     left: 10,
+                  }}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis
+                     dataKey="month"
+                     tick={({ x, y, textAnchor, value, index, ...props }) => {
+                        const data = chartData[index]
+
+                        return (
+                           <text
+                              x={x}
+                              y={index === 0 ? y - 10 : y}
+                              textAnchor={textAnchor}
+                              fontSize={13}
+                              fontWeight={500}
+                              {...props}
+                           >
+                              <tspan>{data.desktop}</tspan>
+                              <tspan className="fill-muted-foreground">/</tspan>
+                              <tspan>{data.mobile}</tspan>
+                              <tspan
+                                 x={x}
+                                 dy={"1rem"}
+                                 fontSize={12}
+                                 className="fill-muted-foreground"
+                              >
+                                 {data.month}
+                              </tspan>
+                           </text>
+                        )
+                     }}
+                  />
+
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-legend.tsx b/apps/web/registry/miami/charts/chart-radar-legend.tsx
new file mode 100644
index 00000000..6083f8f9
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-legend.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a legend"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Legend</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart
+                  data={chartData}
+                  margin={{
+                     top: -40,
+                     bottom: -10,
+                  }}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+                  <ChartLegend
+                     className="mt-8"
+                     content={<ChartLegendContent />}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 pt-4 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-lines-only.tsx b/apps/web/registry/miami/charts/chart-radar-lines-only.tsx
new file mode 100644
index 00000000..1cb9f8b9
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-lines-only.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with lines only"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 160 },
+   { month: "February", desktop: 185, mobile: 170 },
+   { month: "March", desktop: 207, mobile: 180 },
+   { month: "April", desktop: 173, mobile: 160 },
+   { month: "May", desktop: 160, mobile: 190 },
+   { month: "June", desktop: 174, mobile: 204 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Lines Only</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid radialLines={false} />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0}
+                     stroke="var(--color-desktop)"
+                     strokeWidth={2}
+                  />
+                  <Radar
+                     dataKey="mobile"
+                     fill="var(--color-mobile)"
+                     fillOpacity={0}
+                     stroke="var(--color-mobile)"
+                     strokeWidth={2}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-multiple.tsx b/apps/web/registry/miami/charts/chart-radar-multiple.tsx
new file mode 100644
index 00000000..0635dbb8
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-multiple.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with multiple data"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Multiple</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <PolarAngleAxis dataKey="month" />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radar-radius.tsx b/apps/web/registry/miami/charts/chart-radar-radius.tsx
new file mode 100644
index 00000000..7ed0f6fc
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radar-radius.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+   PolarAngleAxis,
+   PolarGrid,
+   PolarRadiusAxis,
+   Radar,
+   RadarChart,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radar chart with a radius axis"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader className="items-center pb-4">
+            <CardTitle>Radar Chart - Radius Axis</CardTitle>
+            <CardDescription>
+               Showing total visitors for the last 6 months
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadarChart data={chartData}>
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent
+                           indicator="line"
+                           labelKey="month"
+                        />
+                     }
+                  />
+                  <PolarGrid />
+                  <Radar
+                     dataKey="desktop"
+                     fill="var(--color-desktop)"
+                     fillOpacity={0.6}
+                  />
+                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
+                  <PolarRadiusAxis
+                     angle={60}
+                     stroke="hsla(var(--foreground))"
+                     orientation="middle"
+                     axisLine={false}
+                  />
+               </RadarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+               January - June 2024
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radial-grid.tsx b/apps/web/registry/miami/charts/chart-radial-grid.tsx
new file mode 100644
index 00000000..943f7439
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radial-grid.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarGrid, RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with a grid"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Grid</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  innerRadius={30}
+                  outerRadius={100}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
+                  />
+                  <PolarGrid gridType="circle" />
+                  <RadialBar dataKey="visitors" />
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radial-label.tsx b/apps/web/registry/miami/charts/chart-radial-label.tsx
new file mode 100644
index 00000000..3050ff22
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radial-label.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with a label"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Label</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  startAngle={-90}
+                  endAngle={380}
+                  innerRadius={30}
+                  outerRadius={110}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
+                  />
+                  <RadialBar dataKey="visitors" background>
+                     <LabelList
+                        position="insideStart"
+                        dataKey="browser"
+                        className="fill-white capitalize mix-blend-luminosity"
+                        fontSize={11}
+                     />
+                  </RadialBar>
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radial-shape.tsx b/apps/web/registry/miami/charts/chart-radial-shape.tsx
new file mode 100644
index 00000000..30957dda
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radial-shape.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+   Label,
+   PolarGrid,
+   PolarRadiusAxis,
+   RadialBar,
+   RadialBarChart,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { type ChartConfig, ChartContainer } from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with a custom shape"
+
+const chartData = [
+   { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Shape</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  endAngle={100}
+                  innerRadius={80}
+                  outerRadius={140}
+               >
+                  <PolarGrid
+                     gridType="circle"
+                     radialLines={false}
+                     stroke="none"
+                     className="first:fill-muted last:fill-background"
+                     polarRadius={[86, 74]}
+                  />
+                  <RadialBar dataKey="visitors" background />
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-4xl font-bold"
+                                    >
+                                       {chartData[0].visitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </PolarRadiusAxis>
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radial-simple.tsx b/apps/web/registry/miami/charts/chart-radial-simple.tsx
new file mode 100644
index 00000000..f8ed1c4c
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radial-simple.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart"
+
+const chartData = [
+   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+   { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   chrome: {
+      label: "Chrome",
+      color: "hsl(var(--chart-1))",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+   firefox: {
+      label: "Firefox",
+      color: "hsl(var(--chart-3))",
+   },
+   edge: {
+      label: "Edge",
+      color: "hsl(var(--chart-4))",
+   },
+   other: {
+      label: "Other",
+      color: "hsl(var(--chart-5))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  innerRadius={30}
+                  outerRadius={110}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={
+                        <ChartTooltipContent hideLabel nameKey="browser" />
+                     }
+                  />
+                  <RadialBar dataKey="visitors" background />
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radial-stacked.tsx b/apps/web/registry/miami/charts/chart-radial-stacked.tsx
new file mode 100644
index 00000000..2f50074f
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radial-stacked.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with stacked sections"
+
+const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   const totalVisitors = chartData[0].desktop + chartData[0].mobile
+
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Stacked</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex flex-1 items-center pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square w-full max-w-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  endAngle={180}
+                  innerRadius={80}
+                  outerRadius={130}
+               >
+                  <ChartTooltip
+                     cursor={false}
+                     content={<ChartTooltipContent hideLabel />}
+                  />
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) - 16}
+                                       className="fill-foreground text-2xl font-bold"
+                                    >
+                                       {totalVisitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 4}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </PolarRadiusAxis>
+                  <RadialBar
+                     dataKey="desktop"
+                     stackId="a"
+                     cornerRadius={5}
+                     fill="var(--color-desktop)"
+                     className="stroke-transparent stroke-2"
+                  />
+                  <RadialBar
+                     dataKey="mobile"
+                     fill="var(--color-mobile)"
+                     stackId="a"
+                     cornerRadius={5}
+                     className="stroke-transparent stroke-2"
+                  />
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-radial-text.tsx b/apps/web/registry/miami/charts/chart-radial-text.tsx
new file mode 100644
index 00000000..bf163f1b
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-radial-text.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+   Label,
+   PolarGrid,
+   PolarRadiusAxis,
+   RadialBar,
+   RadialBarChart,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { type ChartConfig, ChartContainer } from "~/registry/miami/ui/chart"
+
+export const description = "A radial chart with text"
+
+const chartData = [
+   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+   visitors: {
+      label: "Visitors",
+   },
+   safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card className="flex flex-col">
+         <CardHeader className="items-center pb-0">
+            <CardTitle>Radial Chart - Text</CardTitle>
+            <CardDescription>January - June 2024</CardDescription>
+         </CardHeader>
+         <CardContent className="flex-1 pb-0">
+            <ChartContainer
+               config={chartConfig}
+               className="mx-auto aspect-square max-h-[250px]"
+            >
+               <RadialBarChart
+                  data={chartData}
+                  startAngle={0}
+                  endAngle={250}
+                  innerRadius={80}
+                  outerRadius={110}
+               >
+                  <PolarGrid
+                     gridType="circle"
+                     radialLines={false}
+                     stroke="none"
+                     className="first:fill-muted last:fill-background"
+                     polarRadius={[86, 74]}
+                  />
+                  <RadialBar dataKey="visitors" background cornerRadius={10} />
+                  <PolarRadiusAxis
+                     tick={false}
+                     tickLine={false}
+                     axisLine={false}
+                  >
+                     <Label
+                        content={({ viewBox }) => {
+                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                              return (
+                                 <text
+                                    x={viewBox.cx}
+                                    y={viewBox.cy}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                 >
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={viewBox.cy}
+                                       className="fill-foreground text-4xl font-bold"
+                                    >
+                                       {chartData[0].visitors.toLocaleString()}
+                                    </tspan>
+                                    <tspan
+                                       x={viewBox.cx}
+                                       y={(viewBox.cy || 0) + 24}
+                                       className="fill-muted-foreground"
+                                    >
+                                       Visitors
+                                    </tspan>
+                                 </text>
+                              )
+                           }
+                        }}
+                     />
+                  </PolarRadiusAxis>
+               </RadialBarChart>
+            </ChartContainer>
+         </CardContent>
+         <CardFooter className="flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 font-medium leading-none">
+               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="leading-none text-muted-foreground">
+               Showing total visitors for the last 6 months
+            </div>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-tooltip-advanced.tsx b/apps/web/registry/miami/charts/chart-tooltip-advanced.tsx
new file mode 100644
index 00000000..98966002
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-tooltip-advanced.tsx
@@ -0,0 +1,124 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Advanced</CardTitle>
+            <CardDescription>
+               Tooltip with custom formatter and total.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           hideLabel
+                           className="w-[180px]"
+                           formatter={(value, name, item, index) => (
+                              <>
+                                 <div
+                                    className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
+                                    style={
+                                       {
+                                          "--color-bg": `var(--color-${name})`,
+                                       } as React.CSSProperties
+                                    }
+                                 />
+                                 {chartConfig[name as keyof typeof chartConfig]
+                                    ?.label || name}
+                                 <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                    {value}
+                                    <span className="font-normal text-muted-foreground">
+                                       kcal
+                                    </span>
+                                 </div>
+                                 {/* Add this after the last item */}
+                                 {index === 1 && (
+                                    <div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
+                                       Total
+                                       <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                          {item.payload.running +
+                                             item.payload.swimming}
+                                          <span className="font-normal text-muted-foreground">
+                                             kcal
+                                          </span>
+                                       </div>
+                                    </div>
+                                 )}
+                              </>
+                           )}
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-tooltip-default.tsx b/apps/web/registry/miami/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000..53e812dd
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-tooltip-default.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+   "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Default</CardTitle>
+            <CardDescription>
+               Default tooltip with ChartTooltipContent.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-tooltip-formatter.tsx b/apps/web/registry/miami/charts/chart-tooltip-formatter.tsx
new file mode 100644
index 00000000..fef08446
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-tooltip-formatter.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Formatter</CardTitle>
+            <CardDescription>Tooltip with custom formatter .</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           hideLabel
+                           formatter={(value, name) => (
+                              <div className="flex min-w-[130px] items-center text-xs text-muted-foreground">
+                                 {chartConfig[name as keyof typeof chartConfig]
+                                    ?.label || name}
+                                 <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                    {value}
+                                    <span className="font-normal text-muted-foreground">
+                                       kcal
+                                    </span>
+                                 </div>
+                              </div>
+                           )}
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-tooltip-icons.tsx b/apps/web/registry/miami/charts/chart-tooltip-icons.tsx
new file mode 100644
index 00000000..3710195d
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-tooltip-icons.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Footprints, Waves } from "lucide-react"
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+      icon: Footprints,
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+      icon: Waves,
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Icons</CardTitle>
+            <CardDescription>Tooltip with icons.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent hideLabel />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-tooltip-indicator-line.tsx b/apps/web/registry/miami/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000..c15a99e5
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-tooltip-indicator-line.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+   "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Line Indicator</CardTitle>
+            <CardDescription>Tooltip with line indicator.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent indicator="line" />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-tooltip-indicator-none.tsx b/apps/web/registry/miami/charts/chart-tooltip-indicator-none.tsx
new file mode 100644
index 00000000..c5b8cf4f
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-tooltip-indicator-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - No Indicator</CardTitle>
+            <CardDescription>Tooltip with no indicator.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent hideIndicator />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-tooltip-label-custom.tsx b/apps/web/registry/miami/charts/chart-tooltip-label-custom.tsx
new file mode 100644
index 00000000..59563667
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-tooltip-label-custom.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   activities: {
+      label: "Activities",
+   },
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Custom label</CardTitle>
+            <CardDescription>
+               Tooltip with custom label from chartConfig.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           labelKey="activities"
+                           indicator="line"
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-tooltip-label-formatter.tsx b/apps/web/registry/miami/charts/chart-tooltip-label-formatter.tsx
new file mode 100644
index 00000000..83fbd36c
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-tooltip-label-formatter.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - Label Formatter</CardTitle>
+            <CardDescription>Tooltip with label formatter.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={
+                        <ChartTooltipContent
+                           labelFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    day: "numeric",
+                                    month: "long",
+                                    year: "numeric",
+                                 },
+                              )
+                           }}
+                        />
+                     }
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/charts/chart-tooltip-label-none.tsx b/apps/web/registry/miami/charts/chart-tooltip-label-none.tsx
new file mode 100644
index 00000000..b4f5f0ea
--- /dev/null
+++ b/apps/web/registry/miami/charts/chart-tooltip-label-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   type ChartConfig,
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+   { date: "2024-07-15", running: 450, swimming: 300 },
+   { date: "2024-07-16", running: 380, swimming: 420 },
+   { date: "2024-07-17", running: 520, swimming: 120 },
+   { date: "2024-07-18", running: 140, swimming: 550 },
+   { date: "2024-07-19", running: 600, swimming: 350 },
+   { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+   running: {
+      label: "Running",
+      color: "hsl(var(--chart-1))",
+   },
+   swimming: {
+      label: "Swimming",
+      color: "hsl(var(--chart-2))",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Tooltip - No Label</CardTitle>
+            <CardDescription>Tooltip with no label.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <ChartContainer config={chartConfig}>
+               <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                     dataKey="date"
+                     tickLine={false}
+                     tickMargin={10}
+                     axisLine={false}
+                     tickFormatter={(value) => {
+                        return new Date(value).toLocaleDateString("en-US", {
+                           weekday: "short",
+                        })
+                     }}
+                  />
+                  <Bar
+                     dataKey="running"
+                     stackId="a"
+                     fill="var(--color-running)"
+                     radius={[0, 0, 4, 4]}
+                  />
+                  <Bar
+                     dataKey="swimming"
+                     stackId="a"
+                     fill="var(--color-swimming)"
+                     radius={[4, 4, 0, 0]}
+                  />
+                  <ChartTooltip
+                     content={<ChartTooltipContent hideIndicator hideLabel />}
+                     cursor={false}
+                     defaultIndex={1}
+                  />
+               </BarChart>
+            </ChartContainer>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/example/accordion-demo.tsx b/apps/web/registry/miami/example/accordion-demo.tsx
deleted file mode 100644
index 547f44bd..00000000
--- a/apps/web/registry/miami/example/accordion-demo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-   Accordion,
-   AccordionContent,
-   AccordionItem,
-   AccordionTrigger,
-} from '~/registry/miami/ui/accordion'
-
-export default function AccordionDemo() {
-   return (
-      <Accordion type="single" collapsible className="w-full">
-         <AccordionItem value="item-1">
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>
-               Yes. It adheres to the WAI-ARIA design pattern.
-            </AccordionContent>
-         </AccordionItem>
-         <AccordionItem value="item-2">
-            <AccordionTrigger>Is it styled?</AccordionTrigger>
-            <AccordionContent>
-               Yes. It comes with default styles that matches the other
-               components&apos; aesthetic.
-            </AccordionContent>
-         </AccordionItem>
-         <AccordionItem value="item-3">
-            <AccordionTrigger>Is it animated?</AccordionTrigger>
-            <AccordionContent>
-               Yes. It's animated by default, but you can disable it if you prefer.
-            </AccordionContent>
-         </AccordionItem>
-      </Accordion>
-   )
-}
diff --git a/apps/web/registry/miami/example/alert-demo.tsx b/apps/web/registry/miami/example/alert-demo.tsx
deleted file mode 100644
index 411b23ac..00000000
--- a/apps/web/registry/miami/example/alert-demo.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { RocketIcon } from '@radix-ui/react-icons'
-
-import { Alert, AlertDescription, AlertTitle } from '~/registry/miami/ui/alert'
-
-export default function AlertDemo() {
-   return (
-      <Alert>
-         <RocketIcon className="size-4" />
-         <AlertTitle>Heads up!</AlertTitle>
-         <AlertDescription>
-            You can add components to your app using the cli.
-         </AlertDescription>
-      </Alert>
-   )
-}
diff --git a/apps/web/registry/miami/example/alert-destructive.tsx b/apps/web/registry/miami/example/alert-destructive.tsx
deleted file mode 100644
index fe125c24..00000000
--- a/apps/web/registry/miami/example/alert-destructive.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
-
-import { Alert, AlertDescription, AlertTitle } from '~/registry/miami/ui/alert'
-
-export default function AlertDestructive() {
-   return (
-      <Alert variant="destructive">
-         <ExclamationTriangleIcon className="size-4" />
-         <AlertTitle>Error</AlertTitle>
-         <AlertDescription>
-            Your session has expired. Please log in again.
-         </AlertDescription>
-      </Alert>
-   )
-}
diff --git a/apps/web/registry/miami/example/alert-dialog-demo.tsx b/apps/web/registry/miami/example/alert-dialog-demo.tsx
deleted file mode 100644
index 62d0591e..00000000
--- a/apps/web/registry/miami/example/alert-dialog-demo.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {
-   AlertDialog,
-   AlertDialogAction,
-   AlertDialogCancel,
-   AlertDialogContent,
-   AlertDialogDescription,
-   AlertDialogFooter,
-   AlertDialogHeader,
-   AlertDialogTitle,
-   AlertDialogTrigger,
-} from '~/registry/miami/ui/alert-dialog'
-import { Button } from '~/registry/miami/ui/button'
-
-export default function AlertDialogDemo() {
-   return (
-      <AlertDialog>
-         <AlertDialogTrigger asChild>
-            <Button variant="outline">Show Dialog</Button>
-         </AlertDialogTrigger>
-         <AlertDialogContent>
-            <AlertDialogHeader>
-               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-               <AlertDialogDescription>
-                  This action cannot be undone. This will permanently delete your
-                  account and remove your data from our servers.
-               </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-               <AlertDialogCancel>Cancel</AlertDialogCancel>
-               <AlertDialogAction>Continue</AlertDialogAction>
-            </AlertDialogFooter>
-         </AlertDialogContent>
-      </AlertDialog>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-beam-bidirectional.tsx b/apps/web/registry/miami/example/animated-beam-bidirectional.tsx
deleted file mode 100644
index db049023..00000000
--- a/apps/web/registry/miami/example/animated-beam-bidirectional.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-'use client'
-
-import React, { forwardRef, useRef } from 'react'
-import { ny } from '~/lib/utils'
-import { AnimatedBeam } from '~/registry/miami/ui/animated-beam'
-
-const Circle = forwardRef<
-   HTMLDivElement,
-   { className?: string, children?: React.ReactNode }
->(({ className, children }, ref) => {
-   return (
-      <div
-         ref={ref}
-         className={ny(
-            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
-            className,
-         )}
-      >
-         {children}
-      </div>
-   )
-})
-
-export default function AnimatedBeamDemo() {
-   const containerRef = useRef<HTMLDivElement>(null)
-   const div1Ref = useRef<HTMLDivElement>(null)
-   const div2Ref = useRef<HTMLDivElement>(null)
-
-   return (
-      <div
-         className="bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
-         ref={containerRef}
-      >
-         <div className="flex size-full flex-col items-stretch justify-between gap-10">
-            <div className="flex flex-row justify-between">
-               <Circle ref={div1Ref}>
-                  <Icons.user />
-               </Circle>
-               <Circle ref={div2Ref}>
-                  <Icons.openai />
-               </Circle>
-            </div>
-         </div>
-
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div1Ref}
-            toRef={div2Ref}
-            startYOffset={10}
-            endYOffset={10}
-            curvature={-20}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div1Ref}
-            toRef={div2Ref}
-            startYOffset={-10}
-            endYOffset={-10}
-            curvature={20}
-            reverse
-         />
-      </div>
-   )
-}
-
-const Icons = {
-   openai: () => (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
-   ),
-   user: () => (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         fill="none"
-         stroke="#000000"
-         strokeWidth="2"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
-         <circle cx="12" cy="7" r="4" />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/miami/example/animated-beam-demo.tsx b/apps/web/registry/miami/example/animated-beam-demo.tsx
deleted file mode 100644
index 9d013cce..00000000
--- a/apps/web/registry/miami/example/animated-beam-demo.tsx
+++ /dev/null
@@ -1,495 +0,0 @@
-'use client'
-
-import React, { forwardRef, useRef } from 'react'
-import { ny } from '~/lib/utils'
-import { AnimatedBeam } from '~/registry/miami/ui/animated-beam'
-
-const Circle = forwardRef<
-   HTMLDivElement,
-   { className?: string, children?: React.ReactNode }
->(({ className, children }, ref) => {
-   return (
-      <div
-         ref={ref}
-         className={ny(
-            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
-            className,
-         )}
-      >
-         {children}
-      </div>
-   )
-})
-
-export default function AnimatedBeamDemo() {
-   const containerRef = useRef<HTMLDivElement>(null)
-   const div1Ref = useRef<HTMLDivElement>(null)
-   const div2Ref = useRef<HTMLDivElement>(null)
-   const div3Ref = useRef<HTMLDivElement>(null)
-   const div4Ref = useRef<HTMLDivElement>(null)
-   const div5Ref = useRef<HTMLDivElement>(null)
-   const div6Ref = useRef<HTMLDivElement>(null)
-   const div7Ref = useRef<HTMLDivElement>(null)
-
-   return (
-      <div
-         className="bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
-         ref={containerRef}
-      >
-         <div className="flex size-full flex-col items-stretch justify-between gap-10">
-            <div className="flex flex-row items-center justify-between">
-               <Circle ref={div1Ref}>
-                  <Icons.googleDrive />
-               </Circle>
-               <Circle ref={div5Ref}>
-                  <Icons.googleDocs />
-               </Circle>
-            </div>
-            <div className="flex flex-row items-center justify-between">
-               <Circle ref={div2Ref}>
-                  <Icons.notion />
-               </Circle>
-               <Circle ref={div4Ref} className="size-16">
-                  <Icons.openai />
-               </Circle>
-               <Circle ref={div6Ref}>
-                  <Icons.zapier />
-               </Circle>
-            </div>
-            <div className="flex flex-row items-center justify-between">
-               <Circle ref={div3Ref}>
-                  <Icons.whatsapp />
-               </Circle>
-               <Circle ref={div7Ref}>
-                  <Icons.messenger />
-               </Circle>
-            </div>
-         </div>
-
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div1Ref}
-            toRef={div4Ref}
-            curvature={-75}
-            endYOffset={-10}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div2Ref}
-            toRef={div4Ref}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div3Ref}
-            toRef={div4Ref}
-            curvature={75}
-            endYOffset={10}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div5Ref}
-            toRef={div4Ref}
-            curvature={-75}
-            endYOffset={-10}
-            reverse
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div6Ref}
-            toRef={div4Ref}
-            reverse
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div7Ref}
-            toRef={div4Ref}
-            curvature={75}
-            endYOffset={10}
-            reverse
-         />
-      </div>
-   )
-}
-
-const Icons = {
-   notion: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 100 100"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
-            fill="#ffffff"
-         />
-         <path
-            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
-            fill="#000000"
-            fillRule="evenodd"
-            clipRule="evenodd"
-         />
-      </svg>
-   ),
-   openai: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
-   ),
-   googleDrive: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 87.3 78"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-            fill="#0066da"
-         />
-         <path
-            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-            fill="#00ac47"
-         />
-         <path
-            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-            fill="#ea4335"
-         />
-         <path
-            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-            fill="#00832d"
-         />
-         <path
-            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-            fill="#2684fc"
-         />
-         <path
-            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-            fill="#ffba00"
-         />
-      </svg>
-   ),
-   whatsapp: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 175.216 175.552"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <linearGradient
-               id="b"
-               x1="85.915"
-               x2="86.535"
-               y1="32.567"
-               y2="137.092"
-               gradientUnits="userSpaceOnUse"
-            >
-               <stop offset="0" stopColor="#57d163" />
-               <stop offset="1" stopColor="#23b33a" />
-            </linearGradient>
-            <filter
-               id="a"
-               width="1.115"
-               height="1.114"
-               x="-.057"
-               y="-.057"
-               colorInterpolationFilters="sRGB"
-            >
-               <feGaussianBlur stdDeviation="3.531" />
-            </filter>
-         </defs>
-         <path
-            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
-            fill="#b3b3b3"
-            filter="url(#a)"
-         />
-         <path
-            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
-            fill="#ffffff"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
-            fill="url(#linearGradient1780)"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
-            fill="url(#b)"
-         />
-         <path
-            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
-            fill="#ffffff"
-            fillRule="evenodd"
-         />
-      </svg>
-   ),
-   googleDocs: () => (
-      <svg
-         width="47px"
-         height="65px"
-         viewBox="0 0 47 65"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-1"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-3"
-            />
-            <linearGradient
-               x1="50.0053945%"
-               y1="8.58610612%"
-               x2="50.0053945%"
-               y2="100.013939%"
-               id="linearGradient-5"
-            >
-               <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
-               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
-            </linearGradient>
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-6"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-8"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-10"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-12"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-14"
-            />
-            <radialGradient
-               cx="3.16804688%"
-               cy="2.71744318%"
-               fx="3.16804688%"
-               fy="2.71744318%"
-               r="161.248516%"
-               gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
-               id="radialGradient-16"
-            >
-               <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
-               <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
-            </radialGradient>
-         </defs>
-         <g
-            id="Page-1"
-            stroke="none"
-            strokeWidth="1"
-            fill="none"
-            fillRule="evenodd"
-         >
-            <g transform="translate(-451.000000, -463.000000)">
-               <g id="Hero" transform="translate(0.000000, 63.000000)">
-                  <g id="Personal" transform="translate(277.000000, 309.000000)">
-                     <g id="Docs-icon" transform="translate(174.000000, 91.000000)">
-                        <g id="Group">
-                           <g id="Clipped">
-                              <mask id="mask-2" fill="white">
-                                 <use xlinkHref="#path-1" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
-                                 id="Path"
-                                 fill="#4285F4"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-2)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-4" fill="white">
-                                 <use xlinkHref="#path-3" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <polygon
-                                 id="Path"
-                                 fill="url(#linearGradient-5)"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-4)"
-                                 points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
-                              >
-                              </polygon>
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-7" fill="white">
-                                 <use xlinkHref="#path-6" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
-                                 id="Shape"
-                                 fill="#F1F1F1"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-7)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-9" fill="white">
-                                 <use xlinkHref="#path-8" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <g id="Group" mask="url(#mask-9)">
-                                 <g transform="translate(26.437500, -2.954545)">
-                                    <path
-                                       d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
-                                       id="Path"
-                                       fill="#A1C2FA"
-                                       fillRule="nonzero"
-                                    />
-                                 </g>
-                              </g>
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-11" fill="white">
-                                 <use xlinkHref="#path-10" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
-                                 id="Path"
-                                 fillOpacity="0.2"
-                                 fill="#FFFFFF"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-11)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-13" fill="white">
-                                 <use xlinkHref="#path-12" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
-                                 id="Path"
-                                 fillOpacity="0.2"
-                                 fill="#1A237E"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-13)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-15" fill="white">
-                                 <use xlinkHref="#path-14" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
-                                 id="Path"
-                                 fillOpacity="0.1"
-                                 fill="#1A237E"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-15)"
-                              />
-                           </g>
-                        </g>
-                        <path
-                           d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-                           id="Path"
-                           fill="url(#radialGradient-16)"
-                           fillRule="nonzero"
-                        />
-                     </g>
-                  </g>
-               </g>
-            </g>
-         </g>
-      </svg>
-   ),
-   zapier: () => (
-      <svg
-         width="105"
-         height="28"
-         viewBox="0 0 244 66"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
-            fill="#201515"
-         />
-         <path
-            d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
-            fill="#201515"
-         />
-         <path
-            d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
-            fill="#201515"
-         />
-         <path
-            d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
-            fill="#201515"
-         />
-         <path
-            d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
-            fill="#201515"
-         />
-         <path
-            d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
-            fill="#201515"
-         />
-         <path
-            d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
-            fill="#201515"
-         />
-         <path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
-      </svg>
-   ),
-   messenger: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 48 48"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <radialGradient
-            id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
-            cx="11.087"
-            cy="7.022"
-            r="47.612"
-            gradientTransform="matrix(1 0 0 -1 0 50)"
-            gradientUnits="userSpaceOnUse"
-         >
-            <stop offset="0" stopColor="#1292ff"></stop>
-            <stop offset=".079" stopColor="#2982ff"></stop>
-            <stop offset=".23" stopColor="#4e69ff"></stop>
-            <stop offset=".351" stopColor="#6559ff"></stop>
-            <stop offset=".428" stopColor="#6d53ff"></stop>
-            <stop offset=".754" stopColor="#df47aa"></stop>
-            <stop offset=".946" stopColor="#ff6257"></stop>
-         </radialGradient>
-         <path
-            fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
-            d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
-         />
-         <path
-            d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
-            opacity=".05"
-         />
-         <path
-            d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
-            opacity=".07"
-         />
-         <path
-            fill="#ffffff"
-            d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
-         />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/miami/example/animated-beam-multiple-inputs.tsx b/apps/web/registry/miami/example/animated-beam-multiple-inputs.tsx
deleted file mode 100644
index 04e94cb3..00000000
--- a/apps/web/registry/miami/example/animated-beam-multiple-inputs.tsx
+++ /dev/null
@@ -1,498 +0,0 @@
-'use client'
-
-import React, { forwardRef, useRef } from 'react'
-import { ny } from '~/lib/utils'
-import { AnimatedBeam } from '~/registry/default/ui/animated-beam'
-
-const Circle = forwardRef<
-   HTMLDivElement,
-   { className?: string, children?: React.ReactNode }
->(({ className, children }, ref) => {
-   return (
-      <div
-         ref={ref}
-         className={ny(
-            'border-border z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
-            className,
-         )}
-      >
-         {children}
-      </div>
-   )
-})
-
-export default function AnimatedBeamMultipleInputDemo() {
-   const containerRef = useRef<HTMLDivElement>(null)
-   const div1Ref = useRef<HTMLDivElement>(null)
-   const div2Ref = useRef<HTMLDivElement>(null)
-   const div3Ref = useRef<HTMLDivElement>(null)
-   const div4Ref = useRef<HTMLDivElement>(null)
-   const div5Ref = useRef<HTMLDivElement>(null)
-   const div6Ref = useRef<HTMLDivElement>(null)
-   const div7Ref = useRef<HTMLDivElement>(null)
-
-   return (
-      <div
-         className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
-         ref={containerRef}
-      >
-         <div className="flex size-full flex-row items-stretch justify-between gap-10">
-            <div className="flex flex-col justify-center gap-2">
-               <Circle ref={div1Ref}>
-                  <Icons.googleDrive />
-               </Circle>
-               <Circle ref={div2Ref}>
-                  <Icons.googleDocs />
-               </Circle>
-               <Circle ref={div3Ref}>
-                  <Icons.whatsapp />
-               </Circle>
-               <Circle ref={div4Ref}>
-                  <Icons.messenger />
-               </Circle>
-               <Circle ref={div5Ref}>
-                  <Icons.notion />
-               </Circle>
-            </div>
-            <div className="flex flex-col justify-center">
-               <Circle ref={div6Ref} className="size-16">
-                  <Icons.openai />
-               </Circle>
-            </div>
-            <div className="flex flex-col justify-center">
-               <Circle ref={div7Ref}>
-                  <Icons.user />
-               </Circle>
-            </div>
-         </div>
-
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div1Ref}
-            toRef={div6Ref}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div2Ref}
-            toRef={div6Ref}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div3Ref}
-            toRef={div6Ref}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div4Ref}
-            toRef={div6Ref}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div5Ref}
-            toRef={div6Ref}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div6Ref}
-            toRef={div7Ref}
-         />
-      </div>
-   )
-}
-
-const Icons = {
-   notion: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 100 100"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
-            fill="#ffffff"
-         />
-         <path
-            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
-            fill="#000000"
-            fillRule="evenodd"
-            clipRule="evenodd"
-         />
-      </svg>
-   ),
-   openai: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
-   ),
-   googleDrive: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 87.3 78"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-            fill="#0066da"
-         />
-         <path
-            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-            fill="#00ac47"
-         />
-         <path
-            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-            fill="#ea4335"
-         />
-         <path
-            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-            fill="#00832d"
-         />
-         <path
-            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-            fill="#2684fc"
-         />
-         <path
-            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-            fill="#ffba00"
-         />
-      </svg>
-   ),
-   whatsapp: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 175.216 175.552"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <linearGradient
-               id="b"
-               x1="85.915"
-               x2="86.535"
-               y1="32.567"
-               y2="137.092"
-               gradientUnits="userSpaceOnUse"
-            >
-               <stop offset="0" stopColor="#57d163" />
-               <stop offset="1" stopColor="#23b33a" />
-            </linearGradient>
-            <filter
-               id="a"
-               width="1.115"
-               height="1.114"
-               x="-.057"
-               y="-.057"
-               colorInterpolationFilters="sRGB"
-            >
-               <feGaussianBlur stdDeviation="3.531" />
-            </filter>
-         </defs>
-         <path
-            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
-            fill="#b3b3b3"
-            filter="url(#a)"
-         />
-         <path
-            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
-            fill="#ffffff"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
-            fill="url(#linearGradient1780)"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
-            fill="url(#b)"
-         />
-         <path
-            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
-            fill="#ffffff"
-            fillRule="evenodd"
-         />
-      </svg>
-   ),
-   googleDocs: () => (
-      <svg
-         width="47px"
-         height="65px"
-         viewBox="0 0 47 65"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-1"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-3"
-            />
-            <linearGradient
-               x1="50.0053945%"
-               y1="8.58610612%"
-               x2="50.0053945%"
-               y2="100.013939%"
-               id="linearGradient-5"
-            >
-               <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
-               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
-            </linearGradient>
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-6"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-8"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-10"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-12"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-14"
-            />
-            <radialGradient
-               cx="3.16804688%"
-               cy="2.71744318%"
-               fx="3.16804688%"
-               fy="2.71744318%"
-               r="161.248516%"
-               gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
-               id="radialGradient-16"
-            >
-               <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
-               <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
-            </radialGradient>
-         </defs>
-         <g
-            id="Page-1"
-            stroke="none"
-            strokeWidth="1"
-            fill="none"
-            fillRule="evenodd"
-         >
-            <g transform="translate(-451.000000, -463.000000)">
-               <g id="Hero" transform="translate(0.000000, 63.000000)">
-                  <g id="Personal" transform="translate(277.000000, 309.000000)">
-                     <g id="Docs-icon" transform="translate(174.000000, 91.000000)">
-                        <g id="Group">
-                           <g id="Clipped">
-                              <mask id="mask-2" fill="white">
-                                 <use xlinkHref="#path-1" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
-                                 id="Path"
-                                 fill="#4285F4"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-2)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-4" fill="white">
-                                 <use xlinkHref="#path-3" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <polygon
-                                 id="Path"
-                                 fill="url(#linearGradient-5)"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-4)"
-                                 points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
-                              >
-                              </polygon>
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-7" fill="white">
-                                 <use xlinkHref="#path-6" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
-                                 id="Shape"
-                                 fill="#F1F1F1"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-7)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-9" fill="white">
-                                 <use xlinkHref="#path-8" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <g id="Group" mask="url(#mask-9)">
-                                 <g transform="translate(26.437500, -2.954545)">
-                                    <path
-                                       d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
-                                       id="Path"
-                                       fill="#A1C2FA"
-                                       fillRule="nonzero"
-                                    />
-                                 </g>
-                              </g>
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-11" fill="white">
-                                 <use xlinkHref="#path-10" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
-                                 id="Path"
-                                 fillOpacity="0.2"
-                                 fill="#FFFFFF"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-11)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-13" fill="white">
-                                 <use xlinkHref="#path-12" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
-                                 id="Path"
-                                 fillOpacity="0.2"
-                                 fill="#1A237E"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-13)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-15" fill="white">
-                                 <use xlinkHref="#path-14" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
-                                 id="Path"
-                                 fillOpacity="0.1"
-                                 fill="#1A237E"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-15)"
-                              />
-                           </g>
-                        </g>
-                        <path
-                           d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-                           id="Path"
-                           fill="url(#radialGradient-16)"
-                           fillRule="nonzero"
-                        />
-                     </g>
-                  </g>
-               </g>
-            </g>
-         </g>
-      </svg>
-   ),
-   zapier: () => (
-      <svg
-         width="105"
-         height="28"
-         viewBox="0 0 244 66"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
-            fill="#201515"
-         />
-         <path
-            d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
-            fill="#201515"
-         />
-         <path
-            d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
-            fill="#201515"
-         />
-         <path
-            d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
-            fill="#201515"
-         />
-         <path
-            d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
-            fill="#201515"
-         />
-         <path
-            d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
-            fill="#201515"
-         />
-         <path
-            d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
-            fill="#201515"
-         />
-         <path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
-      </svg>
-   ),
-   messenger: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 48 48"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <radialGradient
-            id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
-            cx="11.087"
-            cy="7.022"
-            r="47.612"
-            gradientTransform="matrix(1 0 0 -1 0 50)"
-            gradientUnits="userSpaceOnUse"
-         >
-            <stop offset="0" stopColor="#1292ff"></stop>
-            <stop offset=".079" stopColor="#2982ff"></stop>
-            <stop offset=".23" stopColor="#4e69ff"></stop>
-            <stop offset=".351" stopColor="#6559ff"></stop>
-            <stop offset=".428" stopColor="#6d53ff"></stop>
-            <stop offset=".754" stopColor="#df47aa"></stop>
-            <stop offset=".946" stopColor="#ff6257"></stop>
-         </radialGradient>
-         <path
-            fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
-            d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
-         />
-         <path
-            d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
-            opacity=".05"
-         />
-         <path
-            d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
-            opacity=".07"
-         />
-         <path
-            fill="#ffffff"
-            d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
-         />
-      </svg>
-   ),
-   user: () => (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         fill="none"
-         stroke="#000000"
-         strokeWidth="2"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
-         <circle cx="12" cy="7" r="4" />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/miami/example/animated-beam-multiple-outputs.tsx b/apps/web/registry/miami/example/animated-beam-multiple-outputs.tsx
deleted file mode 100644
index cf6a4262..00000000
--- a/apps/web/registry/miami/example/animated-beam-multiple-outputs.tsx
+++ /dev/null
@@ -1,512 +0,0 @@
-'use client'
-
-import React, { forwardRef, useRef } from 'react'
-import { ny } from '~/lib/utils'
-import { AnimatedBeam } from '~/registry/miami/ui/animated-beam'
-
-const Circle = forwardRef<
-   HTMLDivElement,
-   { className?: string, children?: React.ReactNode }
->(({ className, children }, ref) => {
-   return (
-      <div
-         ref={ref}
-         className={ny(
-            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
-            className,
-         )}
-      >
-         {children}
-      </div>
-   )
-})
-
-export default function AnimatedBeamMultipleOutputDemo({
-   className,
-}: {
-   className?: string
-}) {
-   const containerRef = useRef<HTMLDivElement>(null)
-   const div1Ref = useRef<HTMLDivElement>(null)
-   const div2Ref = useRef<HTMLDivElement>(null)
-   const div3Ref = useRef<HTMLDivElement>(null)
-   const div4Ref = useRef<HTMLDivElement>(null)
-   const div5Ref = useRef<HTMLDivElement>(null)
-   const div6Ref = useRef<HTMLDivElement>(null)
-   const div7Ref = useRef<HTMLDivElement>(null)
-
-   return (
-      <div
-         className={ny(
-            'bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl',
-            className,
-         )}
-         ref={containerRef}
-      >
-         <div className="flex size-full flex-row items-stretch justify-between gap-10">
-            <div className="flex flex-col justify-center">
-               <Circle ref={div7Ref}>
-                  <Icons.user />
-               </Circle>
-            </div>
-            <div className="flex flex-col justify-center">
-               <Circle ref={div6Ref} className="size-16">
-                  <Icons.openai />
-               </Circle>
-            </div>
-            <div className="flex flex-col justify-center gap-2">
-               <Circle ref={div1Ref}>
-                  <Icons.googleDrive />
-               </Circle>
-               <Circle ref={div2Ref}>
-                  <Icons.googleDocs />
-               </Circle>
-               <Circle ref={div3Ref}>
-                  <Icons.whatsapp />
-               </Circle>
-               <Circle ref={div4Ref}>
-                  <Icons.messenger />
-               </Circle>
-               <Circle ref={div5Ref}>
-                  <Icons.notion />
-               </Circle>
-            </div>
-         </div>
-
-         {/* AnimatedBeams */}
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div1Ref}
-            toRef={div6Ref}
-            duration={3}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div2Ref}
-            toRef={div6Ref}
-            duration={3}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div3Ref}
-            toRef={div6Ref}
-            duration={3}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div4Ref}
-            toRef={div6Ref}
-            duration={3}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div5Ref}
-            toRef={div6Ref}
-            duration={3}
-         />
-         <AnimatedBeam
-            containerRef={containerRef}
-            fromRef={div6Ref}
-            toRef={div7Ref}
-            duration={3}
-         />
-      </div>
-   )
-}
-
-const Icons = {
-   notion: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 100 100"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
-            fill="#ffffff"
-         />
-         <path
-            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
-            fill="#000000"
-            fillRule="evenodd"
-            clipRule="evenodd"
-         />
-      </svg>
-   ),
-   openai: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
-   ),
-   googleDrive: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 87.3 78"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-            fill="#0066da"
-         />
-         <path
-            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-            fill="#00ac47"
-         />
-         <path
-            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-            fill="#ea4335"
-         />
-         <path
-            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-            fill="#00832d"
-         />
-         <path
-            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-            fill="#2684fc"
-         />
-         <path
-            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-            fill="#ffba00"
-         />
-      </svg>
-   ),
-   whatsapp: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 175.216 175.552"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <linearGradient
-               id="b"
-               x1="85.915"
-               x2="86.535"
-               y1="32.567"
-               y2="137.092"
-               gradientUnits="userSpaceOnUse"
-            >
-               <stop offset="0" stopColor="#57d163" />
-               <stop offset="1" stopColor="#23b33a" />
-            </linearGradient>
-            <filter
-               id="a"
-               width="1.115"
-               height="1.114"
-               x="-.057"
-               y="-.057"
-               colorInterpolationFilters="sRGB"
-            >
-               <feGaussianBlur stdDeviation="3.531" />
-            </filter>
-         </defs>
-         <path
-            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
-            fill="#b3b3b3"
-            filter="url(#a)"
-         />
-         <path
-            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
-            fill="#ffffff"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
-            fill="url(#linearGradient1780)"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
-            fill="url(#b)"
-         />
-         <path
-            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
-            fill="#ffffff"
-            fillRule="evenodd"
-         />
-      </svg>
-   ),
-   googleDocs: () => (
-      <svg
-         width="47px"
-         height="65px"
-         viewBox="0 0 47 65"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-1"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-3"
-            />
-            <linearGradient
-               x1="50.0053945%"
-               y1="8.58610612%"
-               x2="50.0053945%"
-               y2="100.013939%"
-               id="linearGradient-5"
-            >
-               <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
-               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
-            </linearGradient>
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-6"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-8"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-10"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-12"
-            />
-            <path
-               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-               id="path-14"
-            />
-            <radialGradient
-               cx="3.16804688%"
-               cy="2.71744318%"
-               fx="3.16804688%"
-               fy="2.71744318%"
-               r="161.248516%"
-               gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
-               id="radialGradient-16"
-            >
-               <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
-               <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
-            </radialGradient>
-         </defs>
-         <g
-            id="Page-1"
-            stroke="none"
-            strokeWidth="1"
-            fill="none"
-            fillRule="evenodd"
-         >
-            <g transform="translate(-451.000000, -463.000000)">
-               <g id="Hero" transform="translate(0.000000, 63.000000)">
-                  <g id="Personal" transform="translate(277.000000, 309.000000)">
-                     <g id="Docs-icon" transform="translate(174.000000, 91.000000)">
-                        <g id="Group">
-                           <g id="Clipped">
-                              <mask id="mask-2" fill="white">
-                                 <use xlinkHref="#path-1" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
-                                 id="Path"
-                                 fill="#4285F4"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-2)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-4" fill="white">
-                                 <use xlinkHref="#path-3" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <polygon
-                                 id="Path"
-                                 fill="url(#linearGradient-5)"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-4)"
-                                 points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
-                              >
-                              </polygon>
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-7" fill="white">
-                                 <use xlinkHref="#path-6" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
-                                 id="Shape"
-                                 fill="#F1F1F1"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-7)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-9" fill="white">
-                                 <use xlinkHref="#path-8" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <g id="Group" mask="url(#mask-9)">
-                                 <g transform="translate(26.437500, -2.954545)">
-                                    <path
-                                       d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
-                                       id="Path"
-                                       fill="#A1C2FA"
-                                       fillRule="nonzero"
-                                    />
-                                 </g>
-                              </g>
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-11" fill="white">
-                                 <use xlinkHref="#path-10" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
-                                 id="Path"
-                                 fillOpacity="0.2"
-                                 fill="#FFFFFF"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-11)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-13" fill="white">
-                                 <use xlinkHref="#path-12" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
-                                 id="Path"
-                                 fillOpacity="0.2"
-                                 fill="#1A237E"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-13)"
-                              />
-                           </g>
-                           <g id="Clipped">
-                              <mask id="mask-15" fill="white">
-                                 <use xlinkHref="#path-14" />
-                              </mask>
-                              <g id="SVGID_1_" />
-                              <path
-                                 d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
-                                 id="Path"
-                                 fillOpacity="0.1"
-                                 fill="#1A237E"
-                                 fillRule="nonzero"
-                                 mask="url(#mask-15)"
-                              />
-                           </g>
-                        </g>
-                        <path
-                           d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
-                           id="Path"
-                           fill="url(#radialGradient-16)"
-                           fillRule="nonzero"
-                        />
-                     </g>
-                  </g>
-               </g>
-            </g>
-         </g>
-      </svg>
-   ),
-   zapier: () => (
-      <svg
-         width="105"
-         height="28"
-         viewBox="0 0 244 66"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
-            fill="#201515"
-         />
-         <path
-            d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
-            fill="#201515"
-         />
-         <path
-            d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
-            fill="#201515"
-         />
-         <path
-            d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
-            fill="#201515"
-         />
-         <path
-            d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
-            fill="#201515"
-         />
-         <path
-            d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
-            fill="#201515"
-         />
-         <path
-            d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
-            fill="#201515"
-         />
-         <path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
-      </svg>
-   ),
-   messenger: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 48 48"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <radialGradient
-            id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
-            cx="11.087"
-            cy="7.022"
-            r="47.612"
-            gradientTransform="matrix(1 0 0 -1 0 50)"
-            gradientUnits="userSpaceOnUse"
-         >
-            <stop offset="0" stopColor="#1292ff"></stop>
-            <stop offset=".079" stopColor="#2982ff"></stop>
-            <stop offset=".23" stopColor="#4e69ff"></stop>
-            <stop offset=".351" stopColor="#6559ff"></stop>
-            <stop offset=".428" stopColor="#6d53ff"></stop>
-            <stop offset=".754" stopColor="#df47aa"></stop>
-            <stop offset=".946" stopColor="#ff6257"></stop>
-         </radialGradient>
-         <path
-            fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
-            d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
-         />
-         <path
-            d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
-            opacity=".05"
-         />
-         <path
-            d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
-            opacity=".07"
-         />
-         <path
-            fill="#ffffff"
-            d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
-         />
-      </svg>
-   ),
-   user: () => (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         fill="none"
-         stroke="#000000"
-         strokeWidth="2"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
-         <circle cx="12" cy="7" r="4" />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/miami/example/animated-beam-unidirectional.tsx b/apps/web/registry/miami/example/animated-beam-unidirectional.tsx
deleted file mode 100644
index af81e3de..00000000
--- a/apps/web/registry/miami/example/animated-beam-unidirectional.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client'
-
-import React, { forwardRef, useRef } from 'react'
-import { ny } from '~/lib/utils'
-import { AnimatedBeam } from '~/registry/miami/ui/animated-beam'
-
-const Circle = forwardRef<
-   HTMLDivElement,
-   { className?: string, children?: React.ReactNode }
->(({ className, children }, ref) => {
-   return (
-      <div
-         ref={ref}
-         className={ny(
-            'z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
-            className,
-         )}
-      >
-         {children}
-      </div>
-   )
-})
-
-export default function AnimatedBeamDemo() {
-   const containerRef = useRef<HTMLDivElement>(null)
-   const div1Ref = useRef<HTMLDivElement>(null)
-   const div2Ref = useRef<HTMLDivElement>(null)
-
-   return (
-      <div
-         className="bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
-         ref={containerRef}
-      >
-         <div className="flex size-full flex-col items-stretch justify-between gap-10">
-            <div className="flex flex-row justify-between">
-               <Circle ref={div1Ref}>
-                  <Icons.user />
-               </Circle>
-               <Circle ref={div2Ref}>
-                  <Icons.openai />
-               </Circle>
-            </div>
-         </div>
-
-         <AnimatedBeam
-            duration={3}
-            containerRef={containerRef}
-            fromRef={div1Ref}
-            toRef={div2Ref}
-         />
-      </div>
-   )
-}
-
-const Icons = {
-   openai: () => (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
-   ),
-   user: () => (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         fill="none"
-         stroke="#000000"
-         strokeWidth="2"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
-         <circle cx="12" cy="7" r="4" />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/miami/example/animated-circular-progress-bar-demo.tsx b/apps/web/registry/miami/example/animated-circular-progress-bar-demo.tsx
deleted file mode 100644
index a488e532..00000000
--- a/apps/web/registry/miami/example/animated-circular-progress-bar-demo.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-
-import AnimatedCircularProgressBar from '~/registry/miami/ui/animated-circular-progress-bar'
-
-export default function AnimatedCircularProgressBarDemo() {
-   const [value, setValue] = useState(0)
-
-   useEffect(() => {
-      const handleIncrement = (prev: number) => {
-         if (prev === 100) {
-            return 0
-         }
-         return prev + 10
-      }
-      setValue(handleIncrement)
-      const interval = setInterval(() => setValue(handleIncrement), 2000)
-      return () => clearInterval(interval)
-   }, [])
-
-   return (
-      <AnimatedCircularProgressBar
-         max={100}
-         min={0}
-         value={value}
-         gaugePrimaryColor="rgb(79 70 229)"
-         gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-feature-card-1.tsx b/apps/web/registry/miami/example/animated-feature-card-1.tsx
deleted file mode 100644
index 012910c9..00000000
--- a/apps/web/registry/miami/example/animated-feature-card-1.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-'use client'
-
-import { motion } from 'framer-motion'
-
-export default function FeatureCard1() {
-   const variant1 = {
-      initial: {
-         scale: 0.87,
-         transition: {
-            delay: 0.05,
-            duration: 0.2,
-            ease: 'linear',
-         },
-      },
-      whileHover: {
-         scale: 0.8,
-         boxShadow:
-        'rgba(245,40,145,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.2,
-            ease: 'linear',
-         },
-      },
-   }
-   const variant2 = {
-      initial: {
-         y: -27,
-         scale: 0.95,
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: 'linear',
-         },
-      },
-      whileHover: {
-         y: -55,
-         scale: 0.87,
-         boxShadow:
-        'rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: 'linear',
-         },
-      },
-   }
-   const variant3 = {
-      initial: {
-         y: -25,
-         opacity: 0,
-         scale: 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.2,
-            ease: 'linear',
-         },
-      },
-      whileHover: {
-         y: -45,
-         opacity: 1,
-         scale: 1,
-         boxShadow:
-        'rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.2,
-            ease: 'easeInOut',
-         },
-      },
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col justify-between"
-         >
-            <div className="flex size-full items-center justify-center rounded-t-xl">
-               <div className="relative flex flex-col items-center justify-center gap-y-2 p-10">
-                  <motion.div
-                     variants={variant1}
-                     className="z-[1] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/jack"
-                           alt="jack"
-                        />
-                     </div>
-                     <div className="flex flex-col gap-y-2">
-                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
-
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                     </div>
-                  </motion.div>
-                  <motion.div
-                     variants={variant2}
-                     className="z-[2] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/jane"
-                           alt="jane"
-                        />
-                     </div>
-                     <div className="flex flex-col gap-y-2">
-                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
-                     </div>
-                  </motion.div>
-                  <motion.div
-                     variants={variant3}
-                     className="absolute bottom-0 z-[3] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/jill"
-                           alt="jill"
-                        />
-                     </div>
-                     <div className="flex flex-col gap-y-2">
-                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                     </div>
-                  </motion.div>
-               </div>
-            </div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Notifications</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Instantly get notified about events
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-feature-card-10.tsx b/apps/web/registry/miami/example/animated-feature-card-10.tsx
deleted file mode 100644
index 252f7ca9..00000000
--- a/apps/web/registry/miami/example/animated-feature-card-10.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client'
-
-import {
-   AnimatePresence,
-   cubicBezier,
-   motion,
-   useAnimation,
-   useInView,
-} from 'framer-motion'
-import { useEffect, useRef } from 'react'
-
-const cardImage = [
-   {
-      id: 1,
-      title: 'Tom',
-      link: '#',
-      image: 'https://avatar.vercel.sh/tom',
-   },
-   {
-      id: 2,
-      title: 'Chris',
-      link: '#',
-      image: 'https://avatar.vercel.sh/chris',
-   },
-   {
-      id: 3,
-      title: 'PJ',
-      link: '#',
-      image: 'https://avatar.vercel.sh/pj',
-   },
-   {
-      id: 4,
-      title: 'Scott',
-      link: '#',
-      image: 'https://avatar.vercel.sh/scott',
-   },
-   {
-      id: 5,
-      title: 'Yehuda',
-      link: '#',
-      image: 'https://avatar.vercel.sh/yehuda',
-   },
-   {
-      id: 6,
-      title: 'Ezra',
-      link: '#',
-      image: 'https://avatar.vercel.sh/ezra',
-   },
-   {
-      id: 7,
-      title: 'Ivey',
-      link: '#',
-      image: 'https://avatar.vercel.sh/ivey',
-   },
-   {
-      id: 8,
-      title: 'Evan',
-      link: '#',
-      image: 'https://avatar.vercel.sh/evan',
-   },
-   {
-      id: 9,
-      title: 'Van',
-      link: '#',
-      image: 'https://avatar.vercel.sh/van',
-   },
-]
-
-export default function FeatureCard10() {
-   const containerRef = useRef(null)
-   const inView = useInView(containerRef, { amount: 0.25 })
-   const controls = useAnimation()
-
-   useEffect(() => {
-      if (inView)
-         controls.start('visible')
-      else controls.start('hidden')
-   }, [inView, controls])
-
-   return (
-      <div className="flex h-full transform-gpu flex-col items-center justify-between gap-5 rounded-lg border border-neutral-200 bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] xl:flex-row dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <div className="flex w-full flex-col items-start justify-between gap-y-10 p-10 xl:h-full xl:w-1/2">
-            <h2 className="text-3xl font-semibold">
-               Nyxb UI let's you build amazing websites with all your friends.
-            </h2>
-            <a
-               href="#"
-               className="text-base font-normal text-gray-500 underline-offset-4 transition-all hover:underline"
-            >
-               Check out our showcase
-            </a>
-         </div>
-         <div className="relative w-full overflow-hidden xl:w-1/2">
-            <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-1/3 bg-gradient-to-b from-white dark:from-black"></div>
-            <div
-               ref={containerRef}
-               className="relative -right-[50px] -top-[100px] grid max-h-[450px] grid-cols-3 gap-5 [transform:rotate(-15deg)translateZ(10px);]"
-            >
-               <AnimatePresence>
-                  {cardImage.map((card, index) => (
-                     <motion.div
-                        variants={{
-                           hidden: { opacity: 0, scale: 0.96, y: 25 },
-                           visible: { opacity: 1, scale: 1, y: 0 },
-                        }}
-                        initial="hidden"
-                        animate={controls}
-                        exit={{
-                           opacity: 0,
-                           scale: 0,
-                           transition: {
-                              duration: 0.1,
-                              ease: cubicBezier(0.22, 1, 0.36, 1),
-                           },
-                        }}
-                        transition={{
-                           duration: 0.2,
-                           ease: cubicBezier(0.22, 1, 0.36, 1),
-                           delay: index * 0.04,
-                        }}
-                        key={card.id}
-                        className="flex flex-col items-center gap-y-2 rounded-md border bg-white/5 p-5"
-                     >
-                        <img
-                           src={card.image}
-                           alt={card.title}
-                           className="size-20 rounded-full object-cover"
-                        />
-                        <p className="text-sm dark:text-neutral-200/50">{card.title}</p>
-                        <a
-                           href={card.link}
-                           className="rounded-md border border-neutral-700/50 bg-neutral-600 p-2 py-0.5 text-white shadow-xl drop-shadow-lg hover:bg-neutral-500 dark:border-neutral-400/20 dark:bg-gray-500"
-                        >
-                           Website
-                        </a>
-                     </motion.div>
-                  ))}
-               </AnimatePresence>
-            </div>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-feature-card-2.tsx b/apps/web/registry/miami/example/animated-feature-card-2.tsx
deleted file mode 100644
index e5b09473..00000000
--- a/apps/web/registry/miami/example/animated-feature-card-2.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-'use client'
-
-import { cubicBezier, motion } from 'framer-motion'
-import { Clock, Download, MessageCircle, Star } from 'lucide-react'
-
-const texts = [
-   {
-      id: 1,
-      header: 'New Feature Release.',
-      subheader: 'Experience our app\'s latest features now.',
-      icon: <Star />,
-   },
-   {
-      id: 2,
-      header: 'App Update Available.',
-      subheader:
-      'A new update is available for download. Get the latest version!',
-      icon: <Download />,
-   },
-   {
-      id: 3,
-      header: 'Scheduled Maintenance.',
-      subheader:
-      'Our app will be temporarily unavailable due to scheduled maintenance.',
-      icon: <Clock />,
-   },
-   {
-      id: 4,
-      header: 'Feedback Appreciated.',
-      subheader:
-      'We\'d love to hear your thoughts on our app. Share your feedback!',
-      icon: <MessageCircle />,
-   },
-]
-
-export default function FeatureCard2() {
-   const itemVariants = {
-      initial: (index: number) => ({
-         y: 0,
-         scale: index === 3 ? 0.85 : 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      }),
-      whileHover: (index: number) => ({
-         y: -110,
-         opacity: 1,
-         scale: index === 0 ? 0.85 : index === 3 ? 1 : 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      }),
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col justify-between"
-         >
-            <div className="flex size-full items-center justify-center rounded-t-xl">
-               <motion.div className="flex h-[310px] w-full cursor-pointer flex-col gap-y-5 overflow-hidden rounded-t-md p-5">
-                  {texts.map((text, index) => (
-                     <motion.div
-                        key={text.id}
-                        className="w-full origin-right rounded-md  border border-slate-300/50 p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
-                        custom={index}
-                        variants={itemVariants}
-                     >
-                        <div className="flex flex-row gap-2">
-                           {text.icon}
-                           <p className="text-black dark:text-white">{text.header}</p>
-                        </div>
-                        <p className="text-gray-400 dark:text-gray-400">
-                           {text.subheader}
-                        </p>
-                     </motion.div>
-                  ))}
-               </motion.div>
-            </div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Notifications</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Instantly get notified about events
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-feature-card-3.tsx b/apps/web/registry/miami/example/animated-feature-card-3.tsx
deleted file mode 100644
index 9cd551ff..00000000
--- a/apps/web/registry/miami/example/animated-feature-card-3.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-'use client'
-
-import { cubicBezier, motion } from 'framer-motion'
-
-export default function FeatureCard3() {
-   const variant1 = {
-      initial: {
-         y: 4,
-         scale: 0.5,
-         opacity: 0,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: -2,
-         opacity: 1,
-         scale: 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant2 = {
-      initial: {
-         y: -2,
-         opacity: 1,
-         scale: 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: 8,
-         opacity: 1,
-         scale: 1.05,
-         boxShadow:
-        'rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col justify-between"
-         >
-            <motion.div className="flex size-full cursor-pointer flex-col items-center justify-center gap-y-2 overflow-hidden rounded-t-xl p-8">
-               <motion.p
-                  variants={variant1}
-                  className="w-fit rounded-full border px-2 text-[15px]"
-               >
-                  Make it Pop ✨
-               </motion.p>
-               <motion.div
-                  variants={variant2}
-                  className="flex max-w-[300px] items-start gap-x-2 rounded-lg border border-neutral-300 border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
-               >
-                  <div className="flex size-6 shrink-0 rounded-full bg-blue-500">
-                     <img
-                        className="size-full rounded-full object-cover"
-                        src="https://avatar.vercel.sh/jane"
-                        alt="jane"
-                     />
-                  </div>
-                  <div>
-                     <h3 className="text-base font-semibold">Josh</h3>
-                     <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                     </p>
-                  </div>
-               </motion.div>
-            </motion.div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">AI Co-Pilot</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Use AI to make your writing stand out
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-feature-card-4.tsx b/apps/web/registry/miami/example/animated-feature-card-4.tsx
deleted file mode 100644
index 0120fa1e..00000000
--- a/apps/web/registry/miami/example/animated-feature-card-4.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-'use client'
-
-import { cubicBezier, motion } from 'framer-motion'
-
-export default function FeatureCard4() {
-   const variant1 = {
-      initial: {
-         x: 35,
-         y: 5,
-         scale: 0.8,
-         rotate: -3,
-         zIndex: 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.1,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         x: 0,
-         y: 0,
-         scale: 1,
-         rotate: 0,
-         boxShadow:
-        'rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.1,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant2 = {
-      initial: {
-         scale: 1.1,
-         zIndex: 2,
-         transition: {
-            delay: 0.05,
-            duration: 0.1,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         scale: 1,
-         boxShadow:
-        'rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.1,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant3 = {
-      initial: {
-         x: -35,
-         y: 5,
-         scale: 0.8,
-         rotate: 3,
-         zIndex: 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.1,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         x: 0,
-         y: 0,
-         scale: 1,
-         rotate: 0,
-         boxShadow:
-        'rgba(245,40,145,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.1,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col items-start justify-between"
-         >
-            <div className="flex size-full items-center justify-center rounded-t-xl bg-transparent p-10">
-               <motion.div className="flex h-[230px] w-full items-center justify-between gap-x-4">
-                  <motion.div
-                     variants={variant1}
-                     className="z-[3] flex h-fit w-full  flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/jack"
-                           alt="jack"
-                        />
-                     </div>
-                     <div className="grid grid-cols-2 gap-2">
-                        <div className="h-2 w-10 rounded-full bg-neutral-700/50"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-400/80"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-300/80"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-600/80"></div>
-                     </div>
-                  </motion.div>
-                  <motion.div
-                     variants={variant2}
-                     className="z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/christina"
-                           alt="christina"
-                        />
-                     </div>
-                     <div className="grid grid-cols-2 gap-2">
-                        <div className="h-2 w-10 rounded-full bg-neutral-700/50"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-400/80"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-300/80"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-600/80"></div>
-                     </div>
-                  </motion.div>
-                  <motion.div
-                     variants={variant3}
-                     className="z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/joshua"
-                           alt="joshua"
-                        />
-                     </div>
-                     <div className="grid grid-cols-2 gap-2">
-                        <div className="h-2 w-10 rounded-full bg-neutral-700/50"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-400/80"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-300/80"></div>
-                        <div className="h-2 w-10 rounded-full bg-neutral-600/80"></div>
-                     </div>
-                  </motion.div>
-               </motion.div>
-            </div>
-
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Social</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Write once, share with your friends
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-feature-card-5.tsx b/apps/web/registry/miami/example/animated-feature-card-5.tsx
deleted file mode 100644
index 9f5e2972..00000000
--- a/apps/web/registry/miami/example/animated-feature-card-5.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-'use client'
-
-import { cubicBezier, motion } from 'framer-motion'
-
-export default function FeatureCard5() {
-   const variant1 = {
-      initial: {
-         viewBox: '0 -950 366 1408',
-         filter: 'saturate(0.3)',
-         opacity: 0.5,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         viewBox: '0 -60 366 310',
-         filter: 'saturate(1)',
-         opacity: 1,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant2 = {
-      initial: {
-         y: 0,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: 0,
-         transition: {
-            delay: 0.05,
-            duration: 0.3,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col items-start justify-between"
-         >
-            <div className="relative flex size-full cursor-pointer items-center justify-center overflow-hidden rounded-t-xl bg-transparent p-10">
-               <div className="relative h-[150px] w-full cursor-pointer overflow-hidden rounded-xl border border-slate-200/50 bg-white dark:border-neutral-700/50 dark:bg-neutral-900">
-                  <motion.p
-                     variants={variant2}
-                     className="absolute left-5 top-5 w-fit text-[15px]"
-                  >
-                     +245%
-                  </motion.p>
-                  <motion.svg
-                     variants={variant1}
-                     xmlns="http://www.w3.org/2000/svg"
-                     fill="none"
-                     preserveAspectRatio="none"
-                     className="absolute inset-0 size-full"
-                     viewBox="0 -950 366 1408"
-                  >
-                     <path
-                        fill="url(#a)"
-                        d="M0 193c109.5 0 260.5-52.5 366-192.5v907H0V193Z"
-                     />
-                     <defs>
-                        <linearGradient
-                           id="a"
-                           x1={183}
-                           x2={183}
-                           y1={0.5}
-                           y2={262}
-                           gradientUnits="userSpaceOnUse"
-                        >
-                           <stop stopColor="#22c55e" />
-                           <stop offset={1} stopColor="#15803d" />
-                        </linearGradient>
-                     </defs>
-                  </motion.svg>
-               </div>
-            </div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Growth</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Invest and watch your money grow
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-feature-card-6.tsx b/apps/web/registry/miami/example/animated-feature-card-6.tsx
deleted file mode 100644
index ff45ab9c..00000000
--- a/apps/web/registry/miami/example/animated-feature-card-6.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-'use client'
-
-import { cubicBezier, motion } from 'framer-motion'
-
-export default function FeatureCard6() {
-   const variant1 = {
-      initial: {
-         y: 0,
-         scale: 0.95,
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: 25,
-         x: 10,
-         scale: 1,
-         rotate: -2,
-         boxShadow:
-        'rgba(39,127,245,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant2 = {
-      initial: {
-         y: 0,
-         scale: 0.95,
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: -25,
-         x: -10,
-         scale: 1,
-         rotate: 3,
-         boxShadow:
-        'rgba(39,245,76,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col items-start justify-between"
-         >
-            <div className="flex h-[300px] w-full items-center justify-center rounded-t-xl bg-transparent ">
-               <div className="relative flex cursor-pointer flex-col items-center justify-center gap-y-2 p-14">
-                  <motion.div
-                     variants={variant1}
-                     className="dark:bg-neutral-980 z-[3] flex size-full items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/jack"
-                           alt="jack"
-                        />
-                     </div>
-                     <div className="flex flex-col gap-y-2">
-                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                     </div>
-                  </motion.div>
-                  <motion.div
-                     variants={variant2}
-                     className="absolute bottom-14 z-[2] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-8 rounded-full bg-pink-300">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/jack"
-                           alt="jack"
-                        />
-                     </div>
-                     <div className="flex flex-col gap-y-2">
-                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
-                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
-                     </div>
-                  </motion.div>
-               </div>
-            </div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Share</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Share results with your friends
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-feature-card-7.tsx b/apps/web/registry/miami/example/animated-feature-card-7.tsx
deleted file mode 100644
index f1a15b85..00000000
--- a/apps/web/registry/miami/example/animated-feature-card-7.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-'use client'
-
-import { motion, useAnimation, useInView } from 'framer-motion'
-import {
-   BarChart,
-   File,
-   Globe,
-   HeartHandshake,
-   Rss,
-   Shield,
-} from 'lucide-react'
-import { useEffect, useId, useRef, useState } from 'react'
-import Marquee from '~/registry/miami/ui/marquee'
-import { ny } from '~/lib/utils'
-
-const tiles = [
-   {
-      icon: <HeartHandshake className="size-full" />,
-      bg: (
-         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]"></div>
-      ),
-   },
-   {
-      icon: <Globe className="size-full" />,
-      bg: (
-         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 opacity-70 blur-[20px]"></div>
-      ),
-   },
-   {
-      icon: <File className="size-full" />,
-      bg: (
-         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-green-500 via-teal-500 to-emerald-600 opacity-70 blur-[20px]"></div>
-      ),
-   },
-   {
-      icon: <Shield className="size-full" />,
-      bg: (
-         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-600 opacity-70 blur-[20px]"></div>
-      ),
-   },
-   {
-      icon: <Rss className="size-full" />,
-      bg: (
-         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]"></div>
-      ),
-   },
-   {
-      icon: <BarChart className="size-full" />,
-      bg: (
-         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-gray-600 via-gray-500 to-gray-400 opacity-70 blur-[20px]"></div>
-      ),
-   },
-]
-
-function shuffleArray(array: any[]) {
-   let currentIndex = array.length
-   let randomIndex
-   // While there remain elements to shuffle.
-   while (currentIndex !== 0) {
-      // Pick a remaining element.
-      randomIndex = Math.floor(Math.random() * currentIndex)
-      currentIndex--;
-      // And swap it with the current element.
-      [array[currentIndex], array[randomIndex]] = [
-         array[randomIndex],
-         array[currentIndex],
-      ]
-   }
-   return array
-}
-
-function Card(card: { icon: JSX.Element, bg: JSX.Element }) {
-   const id = useId()
-   const controls = useAnimation()
-   const ref = useRef(null)
-   const inView = useInView(ref, { once: true })
-
-   useEffect(() => {
-      if (inView) {
-         controls.start({
-            opacity: 1,
-            transition: { delay: Math.random() * 2, ease: 'easeOut', duration: 1 },
-         })
-      }
-   }, [controls, inView])
-
-   return (
-      <motion.div
-         key={id}
-         ref={ref}
-         initial={{ opacity: 0 }}
-         animate={controls}
-         className={ny(
-            'relative size-20 cursor-pointer overflow-hidden rounded-2xl border p-4',
-            // light styles
-            'bg-white',
-            // dark styles
-            'transform-gpu dark:bg-transparent dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
-         )}
-      >
-         {card.icon}
-         {card.bg}
-      </motion.div>
-   )
-}
-
-export default function FeatureCard7() {
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-   const [randomTiles1] = useState(() => shuffleArray([...tiles]))
-   const [randomTiles2] = useState(() => shuffleArray([...tiles]))
-   const [randomTiles3] = useState(() => shuffleArray([...tiles]))
-   const [randomTiles4] = useState(() => shuffleArray([...tiles]))
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col items-start justify-between"
-         >
-            <div className="group relative flex h-[300px] w-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl p-4">
-               <div className="relative flex flex-col items-center justify-center gap-y-2 px-10">
-                  <Marquee
-                     reverse
-                     className="-delay-[200ms] [--duration:20s]"
-                     repeat={4}
-                  >
-                     {randomTiles1.map((review, idx) => (
-                        <Card key={idx} {...review} />
-                     ))}
-                  </Marquee>
-                  <Marquee reverse className="[--duration:30s]" repeat={4}>
-                     {randomTiles2.map((review, idx) => (
-                        <Card key={idx} {...review} />
-                     ))}
-                  </Marquee>
-                  <Marquee
-                     reverse
-                     className="-delay-[200ms] [--duration:20s]"
-                     repeat={4}
-                  >
-                     {randomTiles3.map((review, idx) => (
-                        <Card key={idx} {...review} />
-                     ))}
-                  </Marquee>
-                  <Marquee reverse className="[--duration:30s]" repeat={4}>
-                     {randomTiles4.map((review, idx) => (
-                        <Card key={idx} {...review} />
-                     ))}
-                  </Marquee>
-                  <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
-                  <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
-               </div>
-            </div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Integrations</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Integrate with all your favourite apps
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-feature-card-8.tsx b/apps/web/registry/miami/example/animated-feature-card-8.tsx
deleted file mode 100644
index 4c74437d..00000000
--- a/apps/web/registry/miami/example/animated-feature-card-8.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-'use client'
-
-import { cubicBezier, motion } from 'framer-motion'
-
-export default function FeatureCard8() {
-   const variant1 = {
-      initial: {
-         y: 0,
-         scale: 0.97,
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: -45,
-         scale: 1,
-         boxShadow:
-        'rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant2 = {
-      initial: {
-         y: 30,
-         opacity: 0,
-         scale: 0.97,
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         y: 10,
-         opacity: 1,
-         scale: 1,
-         boxShadow:
-        'rgba(245,40,145,0.05) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-   const variant3 = {
-      initial: {
-         x: 30,
-         y: 20,
-         opacity: 0,
-         transition: {
-            delay: 0,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-      whileHover: {
-         x: 5,
-         y: 5,
-         opacity: 1,
-         boxShadow:
-        'rgba(39,245,76,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px',
-         transition: {
-            delay: 0.05,
-            duration: 0.2,
-            ease: cubicBezier(0.22, 1, 0.36, 1),
-         },
-      },
-   }
-
-   const containerVariants = {
-      initial: {},
-      whileHover: {
-         transition: {
-            staggerChildren: 0.1,
-         },
-      },
-   }
-
-   return (
-      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <motion.div
-            variants={containerVariants}
-            initial="initial"
-            whileHover="whileHover"
-            className="flex size-full cursor-pointer flex-col items-start justify-between"
-         >
-            <div className="flex size-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl bg-transparent">
-               <div className="relative flex flex-col items-center justify-center gap-y-2 px-10 py-20">
-                  <motion.div
-                     variants={variant1}
-                     className=" relative flex items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="size-6 rounded-full bg-blue-500">
-                        <img
-                           className="size-full rounded-full object-cover"
-                           src="https://avatar.vercel.sh/joshua"
-                           alt="joshua"
-                        />
-                     </div>
-                     <div className="w-[calc(100%-3rem)]">
-                        <h3 className="text-base font-semibold">Mary</h3>
-                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                           I think the design can be improved
-                        </p>
-                     </div>
-                  </motion.div>
-                  <motion.div
-                     variants={variant2}
-                     className=" absolute inset-10 -bottom-14 z-[3] m-auto flex h-fit items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
-                  >
-                     <div className="w-8 ">
-                        <div className="size-6 rounded-full bg-blue-500">
-                           <img
-                              className="size-full rounded-full object-cover"
-                              src="https://avatar.vercel.sh/christina"
-                              alt="christina"
-                           />
-                        </div>
-                     </div>
-                     <div className="w-[calc(100%-3rem)]">
-                        <h3 className="text-base font-semibold">Joshua</h3>
-                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                           On it ✅
-                        </p>
-                     </div>
-                     <motion.p
-                        variants={variant3}
-                        className="highlighted absolute -bottom-2 right-2 w-fit rounded-full border bg-cyan-500 px-2 py-0.5 text-xs text-white"
-                     >
-                        sent
-                     </motion.p>
-                  </motion.div>
-               </div>
-            </div>
-            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
-               <h2 className="text-xl font-semibold">Reply</h2>
-               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-                  Reply to other creators in app
-               </p>
-            </div>
-         </motion.div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-feature-card-9.tsx b/apps/web/registry/miami/example/animated-feature-card-9.tsx
deleted file mode 100644
index 5804c1f3..00000000
--- a/apps/web/registry/miami/example/animated-feature-card-9.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-'use client'
-
-import { AnimatePresence, motion } from 'framer-motion'
-import type { ReactElement } from 'react'
-import React, { useEffect, useMemo, useState } from 'react'
-import { ny } from '~/lib/utils'
-
-export const AnimatedList = React.memo(
-   ({
-      className,
-      children,
-      delay = 1000,
-   }: {
-      className?: string
-      children: React.ReactNode
-      delay?: number
-   }) => {
-      const [index, setIndex] = useState(0)
-      const childrenArray = React.Children.toArray(children)
-
-      useEffect(() => {
-         const interval = setInterval(() => {
-            setIndex(prevIndex => (prevIndex + 1) % childrenArray.length)
-         }, delay)
-
-         return () => clearInterval(interval)
-      }, [childrenArray.length, delay])
-
-      const itemsToShow = useMemo(
-         () => childrenArray.slice(0, index + 1).reverse(),
-         [index, childrenArray],
-      )
-
-      return (
-         <div className={`flex flex-col items-center gap-4 ${className}`}>
-            <AnimatePresence>
-               {itemsToShow.map(item => (
-                  <AnimatedListItem key={(item as ReactElement).key}>
-                     {item}
-                  </AnimatedListItem>
-               ))}
-            </AnimatePresence>
-         </div>
-      )
-   },
-)
-
-AnimatedList.displayName = 'AnimatedList'
-
-export function AnimatedListItem({ children }: { children: React.ReactNode }) {
-   const animations = {
-      initial: { scale: 0, opacity: 0 },
-      animate: { scale: 1, opacity: 1, originY: 0 },
-      exit: { scale: 0, opacity: 0 },
-      transition: { type: 'spring', stiffness: 350, damping: 40 },
-   }
-
-   return (
-      <motion.div {...animations} layout className="mx-auto w-full">
-         {children}
-      </motion.div>
-   )
-}
-
-interface Item {
-   name: string
-   description: string
-   icon: string
-   color: string
-   time: string
-}
-
-let notifications = [
-   {
-      name: 'Payment received',
-      description: 'Nyxb UI',
-      time: '15m ago',
-
-      icon: '💸',
-      color: '#00C9A7',
-   },
-   {
-      name: 'User signed up',
-      description: 'Nyxb UI',
-      time: '10m ago',
-      icon: '👤',
-      color: '#FFB800',
-   },
-   {
-      name: 'New message',
-      description: 'Nyxb UI',
-      time: '5m ago',
-      icon: '💬',
-      color: '#FF3D71',
-   },
-   {
-      name: 'New event',
-      description: 'Nyxb UI',
-      time: '2m ago',
-      icon: '🗞️',
-      color: '#1E86FF',
-   },
-]
-
-notifications = Array.from({ length: 10 }, () => notifications).flat()
-
-function Notification({ name, description, icon, color, time }: Item) {
-   return (
-      <figure
-         className={ny(
-            'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-lg p-4',
-            // animation styles
-            'transition-all duration-200 ease-in-out hover:scale-[103%]',
-            // light styles
-            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
-            // dark styles
-            'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
-         )}
-      >
-         <div className="flex flex-row items-center gap-3">
-            <div
-               className="flex size-10 items-center justify-center rounded-2xl"
-               style={{
-                  backgroundColor: color,
-               }}
-            >
-               <span className="text-lg">{icon}</span>
-            </div>
-            <div className="flex flex-col overflow-hidden">
-               <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
-                  <span className="text-sm sm:text-lg">{name}</span>
-                  <span className="mx-1">·</span>
-                  <span className="text-xs text-gray-500">{time}</span>
-               </figcaption>
-               <p className="text-sm font-normal dark:text-white/60">
-                  {description}
-               </p>
-            </div>
-         </div>
-      </figure>
-   )
-}
-
-export default function FeatureCard9() {
-   return (
-      <div className="relative flex size-full max-h-[500px] min-h-[500px] max-w-lg transform-gpu flex-col justify-between overflow-hidden rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
-         <div className="flex items-center justify-center overflow-hidden">
-            <AnimatedList>
-               {notifications.map((item, idx) => (
-                  <Notification {...item} key={idx} />
-               ))}
-            </AnimatedList>
-         </div>
-         <div className="flex flex-col items-start gap-y-1 border-t p-4 dark:border-neutral-800">
-            <h2 className="text-xl font-semibold">Notifications</h2>
-            <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
-               Get realtime notifications for events you subscribe too
-            </p>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-gradient-text-demo.tsx b/apps/web/registry/miami/example/animated-gradient-text-demo.tsx
deleted file mode 100644
index 4887804c..00000000
--- a/apps/web/registry/miami/example/animated-gradient-text-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ChevronRight } from 'lucide-react'
-import { ny } from '~/lib/utils'
-import AnimatedGradientText from '~/registry/miami/ui/animated-gradient-text'
-
-export default async function AnimatedGradientTextDemo() {
-   return (
-      <div className="z-10 flex min-h-64 items-center justify-center">
-         <AnimatedGradientText>
-            🎉
-            {' '}
-            <hr className="mx-2 h-4 w-px shrink-0 bg-gray-300" />
-            {' '}
-            <span
-               className={ny(
-            `animate-gradient inline bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
-               )}
-            >
-               Introducing Nyxb UI
-            </span>
-            <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
-         </AnimatedGradientText>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-grid-pattern-demo.tsx b/apps/web/registry/miami/example/animated-grid-pattern-demo.tsx
deleted file mode 100644
index b91f4bf6..00000000
--- a/apps/web/registry/miami/example/animated-grid-pattern-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { ny } from '~/lib/utils'
-import AnimatedGridPattern from '~/registry/miami/ui/animated-grid-pattern'
-
-function AnimatedGridPatternDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Animated Grid Pattern
-         </p>
-         <AnimatedGridPattern
-            numSquares={30}
-            maxOpacity={0.5}
-            duration={3}
-            repeatDelay={1}
-            className={ny(
-               '[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]',
-               'inset-x-0 inset-y-[-30%] h-[200%] skew-y-12',
-            )}
-         />
-      </div>
-   )
-}
-
-export default AnimatedGridPatternDemo
diff --git a/apps/web/registry/miami/example/animated-list-demo.tsx b/apps/web/registry/miami/example/animated-list-demo.tsx
deleted file mode 100644
index d64d5d2f..00000000
--- a/apps/web/registry/miami/example/animated-list-demo.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-
-import { ny } from '~/lib/utils'
-import { AnimatedList } from '~/registry/miami/ui/animated-list'
-
-interface Item {
-   name: string
-   description: string
-   icon: string
-   color: string
-   time: string
-}
-
-let notifications = [
-   {
-      name: 'Payment received',
-      description: 'Nyxb UI',
-      time: '15m ago',
-
-      icon: '💸',
-      color: '#00C9A7',
-   },
-   {
-      name: 'User signed up',
-      description: 'Nyxb UI',
-      time: '10m ago',
-      icon: '👤',
-      color: '#FFB800',
-   },
-   {
-      name: 'New message',
-      description: 'Nyxb UI',
-      time: '5m ago',
-      icon: '💬',
-      color: '#FF3D71',
-   },
-   {
-      name: 'New event',
-      description: 'Nyxb UI',
-      time: '2m ago',
-      icon: '🗞️',
-      color: '#1E86FF',
-   },
-]
-
-notifications = Array.from({ length: 10 }, () => notifications).flat()
-
-function Notification({ name, description, icon, color, time }: Item) {
-   return (
-      <figure
-         className={ny(
-            'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4',
-            // animation styles
-            'transition-all duration-200 ease-in-out hover:scale-[103%]',
-            // light styles
-            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
-            // dark styles
-            'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
-         )}
-      >
-         <div className="flex flex-row items-center gap-3">
-            <div
-               className="flex size-10 items-center justify-center rounded-2xl"
-               style={{
-                  backgroundColor: color,
-               }}
-            >
-               <span className="text-lg">{icon}</span>
-            </div>
-            <div className="flex flex-col overflow-hidden">
-               <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
-                  <span className="text-sm sm:text-lg">{name}</span>
-                  <span className="mx-1">·</span>
-                  <span className="text-xs text-gray-500">{time}</span>
-               </figcaption>
-               <p className="text-sm font-normal dark:text-white/60">
-                  {description}
-               </p>
-            </div>
-         </div>
-      </figure>
-   )
-}
-
-export default function AnimatedListDemo() {
-   return (
-      <div className="bg-background relative flex max-h-[400px] min-h-[400px] w-full max-w-lg flex-col overflow-hidden rounded-lg border p-6 shadow-lg">
-         <AnimatedList>
-            {notifications.map((item, idx) => (
-               <Notification {...item} key={idx} />
-            ))}
-         </AnimatedList>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-shiny-text-demo.tsx b/apps/web/registry/miami/example/animated-shiny-text-demo.tsx
deleted file mode 100644
index ebea368a..00000000
--- a/apps/web/registry/miami/example/animated-shiny-text-demo.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ArrowRightIcon } from '@radix-ui/react-icons'
-import { ny } from '~/lib/utils'
-import AnimatedShinyText from '~/registry/miami/ui/animated-shiny-text'
-
-export default async function AnimatedShinyTextDemo() {
-   return (
-      <div className="z-10 flex min-h-64 items-center justify-center">
-         <div
-            className={ny(
-               'group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800',
-            )}
-         >
-            <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400">
-               <span>✨ Introducing Nyxb UI</span>
-               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
-            </AnimatedShinyText>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/animated-subscribe-button-demo.tsx b/apps/web/registry/miami/example/animated-subscribe-button-demo.tsx
deleted file mode 100644
index d9de928c..00000000
--- a/apps/web/registry/miami/example/animated-subscribe-button-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { CheckIcon, ChevronRightIcon } from 'lucide-react'
-import { AnimatedSubscribeButton } from '~/registry/miami/ui/animated-subscribe-button'
-
-export default function AnimatedSubscribeButtonDemo() {
-   return (
-      <AnimatedSubscribeButton
-         buttonColor="#000000"
-         buttonTextColor="#ffffff"
-         subscribeStatus={false}
-         initialText={(
-            <span className="group inline-flex items-center">
-               Subscribe
-               {' '}
-               <ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" />
-            </span>
-         )}
-         changeText={(
-            <span className="group inline-flex items-center">
-               <CheckIcon className="mr-2 size-4" />
-               Subscribed
-               {' '}
-            </span>
-         )}
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/aspect-ratio-demo.tsx b/apps/web/registry/miami/example/aspect-ratio-demo.tsx
deleted file mode 100644
index 0b05b995..00000000
--- a/apps/web/registry/miami/example/aspect-ratio-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Image from 'next/image'
-
-import { AspectRatio } from '~/registry/miami/ui/aspect-ratio'
-
-export default function AspectRatioDemo() {
-   return (
-      <AspectRatio ratio={16 / 9} className="bg-muted">
-         <Image
-            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-            alt="Photo by Drew Beamer"
-            fill
-            className="rounded-md object-cover"
-         />
-      </AspectRatio>
-   )
-}
diff --git a/apps/web/registry/miami/example/avatar-circles-demo.tsx b/apps/web/registry/miami/example/avatar-circles-demo.tsx
deleted file mode 100644
index 33b7adfb..00000000
--- a/apps/web/registry/miami/example/avatar-circles-demo.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import AvatarCircles from '~/registry/miami/ui/avatar-circles'
-
-const avatarUrls = [
-   'https://avatars.githubusercontent.com/u/98586665',
-   'https://avatars.githubusercontent.com/u/20110627',
-   'https://avatars.githubusercontent.com/u/106103625',
-   'https://avatars.githubusercontent.com/u/59228569',
-]
-
-export default async function AvatarCirclesDemo() {
-   return <AvatarCircles numPeople={99} avatarUrls={avatarUrls} />
-}
diff --git a/apps/web/registry/miami/example/avatar-demo.tsx b/apps/web/registry/miami/example/avatar-demo.tsx
deleted file mode 100644
index 0f9d3286..00000000
--- a/apps/web/registry/miami/example/avatar-demo.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-
-export default function AvatarDemo() {
-   return (
-      <Avatar>
-         <AvatarImage src="https://github.com/nyxb.png" alt="@nyxb" />
-         <AvatarFallback>NY</AvatarFallback>
-      </Avatar>
-   )
-}
diff --git a/apps/web/registry/miami/example/badge-demo.tsx b/apps/web/registry/miami/example/badge-demo.tsx
deleted file mode 100644
index ab086be3..00000000
--- a/apps/web/registry/miami/example/badge-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/miami/ui/badge'
-
-export default function BadgeDemo() {
-   return <Badge>Badge</Badge>
-}
diff --git a/apps/web/registry/miami/example/badge-destructive.tsx b/apps/web/registry/miami/example/badge-destructive.tsx
deleted file mode 100644
index 544ec5ec..00000000
--- a/apps/web/registry/miami/example/badge-destructive.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/miami/ui/badge'
-
-export default function BadgeDestructive() {
-   return <Badge variant="destructive">Destructive</Badge>
-}
diff --git a/apps/web/registry/miami/example/badge-outline.tsx b/apps/web/registry/miami/example/badge-outline.tsx
deleted file mode 100644
index f60be392..00000000
--- a/apps/web/registry/miami/example/badge-outline.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/miami/ui/badge'
-
-export default function BadgeOutline() {
-   return <Badge variant="outline">Outline</Badge>
-}
diff --git a/apps/web/registry/miami/example/badge-secondary.tsx b/apps/web/registry/miami/example/badge-secondary.tsx
deleted file mode 100644
index 91346f62..00000000
--- a/apps/web/registry/miami/example/badge-secondary.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '~/registry/miami/ui/badge'
-
-export default function BadgeSecondary() {
-   return <Badge variant="secondary">Secondary</Badge>
-}
diff --git a/apps/web/registry/miami/example/bento-demo-vertical.tsx b/apps/web/registry/miami/example/bento-demo-vertical.tsx
deleted file mode 100644
index c79b16ef..00000000
--- a/apps/web/registry/miami/example/bento-demo-vertical.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-   BellIcon,
-   CalendarIcon,
-   FileTextIcon,
-   GlobeIcon,
-   InputIcon,
-} from '@radix-ui/react-icons'
-import { BentoCard, BentoGrid } from '~/registry/miami/ui/bento-grid'
-
-const features = [
-   {
-      Icon: FileTextIcon,
-      name: 'Save your files',
-      description: 'We automatically save your files as you type.',
-      href: '/docs',
-      cta: 'Learn more',
-      background: <img className="absolute -right-20 -top-20 opacity-60" />,
-      className: 'lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3',
-   },
-   {
-      Icon: InputIcon,
-      name: 'Full text search',
-      description: 'Search through all your files in one place.',
-      href: '/docs',
-      cta: 'Learn more',
-      background: <img className="absolute -right-20 -top-20 opacity-60" />,
-      className: 'lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3',
-   },
-   {
-      Icon: GlobeIcon,
-      name: 'Multilingual',
-      description: 'Supports 100+ languages and counting.',
-      href: '/docs',
-      cta: 'Learn more',
-      background: <img className="absolute -right-20 -top-20 opacity-60" />,
-      className: 'lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4',
-   },
-   {
-      Icon: CalendarIcon,
-      name: 'Calendar',
-      description: 'Use the calendar to filter your files by date.',
-      href: '/docs',
-      cta: 'Learn more',
-      background: <img className="absolute -right-20 -top-20 opacity-60" />,
-      className: 'lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2',
-   },
-   {
-      Icon: BellIcon,
-      name: 'Notifications',
-      description:
-      'Get notified when someone shares a file or mentions you in a comment.',
-      href: '/docs',
-      cta: 'Learn more',
-      background: <img className="absolute -right-20 -top-20 opacity-60" />,
-      className: 'lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4',
-   },
-]
-
-export default async function BentoDemo() {
-   return (
-      <BentoGrid className="lg:grid-rows-3">
-         {features.map(feature => (
-            <BentoCard key={feature.name} {...feature} />
-         ))}
-      </BentoGrid>
-   )
-}
diff --git a/apps/web/registry/miami/example/bento-demo.tsx b/apps/web/registry/miami/example/bento-demo.tsx
deleted file mode 100644
index 0bf13c23..00000000
--- a/apps/web/registry/miami/example/bento-demo.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import { CalendarIcon, FileTextIcon, InputIcon } from '@radix-ui/react-icons'
-import { Share2Icon } from 'lucide-react'
-import { Calendar } from '~/components/ui/calendar'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/components/ui/command'
-import { ny } from '~/lib/utils'
-import AnimatedBeamMultipleOutputDemo from '~/registry/miami/example/animated-beam-multiple-outputs'
-import { BentoCard, BentoGrid } from '~/registry/miami/ui/bento-grid'
-import Marquee from '~/registry/miami/ui/marquee'
-
-const files = [
-   {
-      name: 'bitcoin.pdf',
-      body: 'Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.',
-   },
-   {
-      name: 'finances.xlsx',
-      body: 'A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.',
-   },
-   {
-      name: 'logo.svg',
-      body: 'Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.',
-   },
-   {
-      name: 'keys.gpg',
-      body: 'GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.',
-   },
-   {
-      name: 'seed.txt',
-      body: 'A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.',
-   },
-]
-
-interface Item {
-   name: string
-   description: string
-   icon: string
-   color: string
-   time: string
-}
-
-let notifications = [
-   {
-      name: 'Payment received',
-      description: 'Nyxb UI',
-      time: '15m ago',
-
-      icon: '💸',
-      color: '#00C9A7',
-   },
-   {
-      name: 'User signed up',
-      description: 'Nyxb UI',
-      time: '10m ago',
-      icon: '👤',
-      color: '#FFB800',
-   },
-   {
-      name: 'New message',
-      description: 'Nyxb UI',
-      time: '5m ago',
-      icon: '💬',
-      color: '#FF3D71',
-   },
-   {
-      name: 'New event',
-      description: 'Nyxb UI',
-      time: '2m ago',
-      icon: '🗞️',
-      color: '#1E86FF',
-   },
-]
-
-notifications = Array.from({ length: 10 }, () => notifications).flat()
-
-function Notification({ name, description, icon, color, time }: Item) {
-   return (
-      <figure
-         className={ny(
-            'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4',
-            // animation styles
-            'transition-all duration-200 ease-in-out hover:scale-[103%]',
-            // light styles
-            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
-            // dark styles
-            'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
-         )}
-      >
-         <div className="flex flex-row items-center gap-3">
-            <div
-               className="flex size-10 items-center justify-center rounded-2xl"
-               style={{
-                  backgroundColor: color,
-               }}
-            >
-               <span className="text-lg">{icon}</span>
-            </div>
-            <div className="flex flex-col overflow-hidden">
-               <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
-                  <span className="text-sm sm:text-lg">{name}</span>
-                  <span className="mx-1">·</span>
-                  <span className="text-xs text-gray-500">{time}</span>
-               </figcaption>
-               <p className="text-sm font-normal dark:text-white/60">
-                  {description}
-               </p>
-            </div>
-         </div>
-      </figure>
-   )
-}
-
-const features = [
-   {
-      Icon: FileTextIcon,
-      name: 'Save your files',
-      description: 'We automatically save your files as you type.',
-      href: '/docs',
-      cta: 'Learn more',
-      className: 'col-span-3 lg:col-span-1',
-      background: (
-         <Marquee
-            pauseOnHover
-            className="absolute top-10 [--duration:20s] [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] "
-         >
-            {files.map((f, idx) => (
-               <figure
-                  key={idx}
-                  className={ny(
-                     'relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4',
-                     'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',
-                     'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',
-                     'transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none',
-                  )}
-               >
-                  <div className="flex flex-row items-center gap-2">
-                     <div className="flex flex-col">
-                        <figcaption className="text-sm font-medium dark:text-white ">
-                           {f.name}
-                        </figcaption>
-                     </div>
-                  </div>
-                  <blockquote className="mt-2 text-xs">{f.body}</blockquote>
-               </figure>
-            ))}
-         </Marquee>
-      ),
-   },
-   {
-      Icon: InputIcon,
-      name: 'Full text search',
-      description: 'Search through all your files in one place.',
-      href: '/docs',
-      cta: 'Learn more',
-      className: 'col-span-3 lg:col-span-2',
-      background: (
-         <Command className="absolute right-10 top-10 w-[70%] origin-top translate-x-0 border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:-translate-x-10">
-            <CommandInput placeholder="Type a command or search..." />
-            <CommandList>
-               <CommandEmpty>No results found.</CommandEmpty>
-               <CommandGroup heading="Suggestions">
-                  <CommandItem>screenshot.png</CommandItem>
-                  <CommandItem>bitcoin.pdf</CommandItem>
-                  <CommandItem>finances.xlsx</CommandItem>
-                  <CommandItem>logo.svg</CommandItem>
-                  <CommandItem>keys.gpg</CommandItem>
-                  <CommandItem>seed.txt</CommandItem>
-               </CommandGroup>
-            </CommandList>
-         </Command>
-      ),
-   },
-   {
-      Icon: Share2Icon,
-      name: 'Integrations',
-      description: 'Supports 100+ integrations and counting.',
-      href: '/docs',
-      cta: 'Learn more',
-      className: 'col-span-3 lg:col-span-2',
-      background: (
-         <AnimatedBeamMultipleOutputDemo className="absolute right-2 top-4 h-[300px] w-[600px] border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105" />
-      ),
-   },
-   {
-      Icon: CalendarIcon,
-      name: 'Calendar',
-      description: 'Use the calendar to filter your files by date.',
-      className: 'col-span-3 lg:col-span-1',
-      href: '/docs',
-      cta: 'Learn more',
-      background: (
-         <Calendar
-            mode="single"
-            selected={new Date(2022, 4, 11, 0, 0, 0)}
-            className="absolute right-0 top-10 origin-top rounded-md border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:scale-105"
-         />
-      ),
-   },
-]
-
-export default function BentoDemo() {
-   return (
-      <BentoGrid>
-         {features.map((feature, idx) => (
-            <BentoCard key={idx} {...feature} />
-         ))}
-      </BentoGrid>
-   )
-}
diff --git a/apps/web/registry/miami/example/blur-fade-demo.tsx b/apps/web/registry/miami/example/blur-fade-demo.tsx
deleted file mode 100644
index 611c3a76..00000000
--- a/apps/web/registry/miami/example/blur-fade-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import BlurFade from '~/registry/miami/ui/blur-fade'
-
-const images = Array.from({ length: 9 }, (_, i) => {
-   const isLandscape = i % 2 === 0
-   const width = isLandscape ? 800 : 600
-   const height = isLandscape ? 600 : 800
-   return `https://picsum.photos/seed/${i + 1}/${width}/${height}`
-})
-
-export default function BlurFadeDemo() {
-   return (
-      <section id="photos">
-         <div className="columns-2 gap-4 sm:columns-3">
-            {images.map((imageUrl, idx) => (
-               <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>
-                  <img
-                     className="mb-4 size-full rounded-lg object-contain"
-                     src={imageUrl}
-                     alt={`Random stock image ${idx + 1}`}
-                  />
-               </BlurFade>
-            ))}
-         </div>
-      </section>
-   )
-}
diff --git a/apps/web/registry/miami/example/blur-fade-text-demo.tsx b/apps/web/registry/miami/example/blur-fade-text-demo.tsx
deleted file mode 100644
index 8191421e..00000000
--- a/apps/web/registry/miami/example/blur-fade-text-demo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import BlurFade from '~/registry/miami/ui/blur-fade'
-
-export default function BlurFadeTextDemo() {
-   return (
-      <section id="header">
-         <BlurFade delay={0.25} inView>
-            <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
-               Hello World 👋
-            </h2>
-         </BlurFade>
-         <BlurFade delay={0.25 * 2} inView>
-            <span className="text-pretty text-xl tracking-tighter sm:text-3xl xl:text-4xl/none">
-               Nice to meet you
-            </span>
-         </BlurFade>
-      </section>
-   )
-}
diff --git a/apps/web/registry/miami/example/blur-in-demo.tsx b/apps/web/registry/miami/example/blur-in-demo.tsx
deleted file mode 100644
index bcd406cc..00000000
--- a/apps/web/registry/miami/example/blur-in-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import BlurIn from '~/registry/miami/ui/blur-in'
-
-function BlurInDemo() {
-   return (
-      <BlurIn
-         word="Blur In"
-         className="text-4xl font-bold text-black dark:text-white"
-      />
-   )
-}
-export default BlurInDemo
diff --git a/apps/web/registry/miami/example/border-beam-demo.tsx b/apps/web/registry/miami/example/border-beam-demo.tsx
deleted file mode 100644
index 2f63230b..00000000
--- a/apps/web/registry/miami/example/border-beam-demo.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { BorderBeam } from '~/registry/miami/ui/border-beam'
-
-export default function BorderBeamDemo() {
-   return (
-      <div className="relative rounded-xl">
-         <img
-            src="/dashboard-dark.png"
-            alt="Hero Image"
-            className="hidden w-[700px] rounded-[inherit] border object-contain shadow-lg dark:block"
-         />
-         <img
-            src="/dashboard-light.png"
-            alt="Hero Image"
-            className="block w-[700px] rounded-[inherit] border object-contain shadow-lg dark:hidden"
-         />
-
-         <BorderBeam size={250} duration={12} delay={9} />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/box-reveal-demo.tsx b/apps/web/registry/miami/example/box-reveal-demo.tsx
deleted file mode 100644
index d20558fb..00000000
--- a/apps/web/registry/miami/example/box-reveal-demo.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import BoxReveal from '~/registry/miami/ui/box-reveal'
-
-import { Button } from '~/components/ui/button'
-
-export default async function BoxRevealDemo() {
-   return (
-      <div className="size-full max-w-lg items-center justify-center overflow-hidden pt-8">
-         <BoxReveal boxColor="#5046e6" duration={0.5}>
-            <p className="text-[3.5rem] font-semibold">
-               Nyxb UI
-               <span className="text-[#5046e6]">.</span>
-            </p>
-         </BoxReveal>
-
-         <BoxReveal boxColor="#5046e6" duration={0.5}>
-            <h2 className="mt-[.5rem] text-[1rem]">
-               UI library for
-               {' '}
-               <span className="text-[#5046e6]">Design Engineers</span>
-            </h2>
-         </BoxReveal>
-
-         <BoxReveal boxColor="#5046e6" duration={0.5}>
-            <div className="mt-6">
-               <p>
-                  -&gt; 20+ free and open-source animated components built with
-                  <span className="font-semibold text-[#5046e6]"> React</span>
-                  ,
-                  <span className="font-semibold text-[#5046e6]"> Typescript</span>
-                  ,
-                  <span className="font-semibold text-[#5046e6]"> Tailwind CSS</span>
-                  ,
-                  and
-                  <span className="font-semibold text-[#5046e6]"> Framer Motion</span>
-                  .
-                  {' '}
-                  <br />
-                  -&gt; 100% open-source, and customizable.
-                  {' '}
-                  <br />
-               </p>
-            </div>
-         </BoxReveal>
-
-         <BoxReveal boxColor="#5046e6" duration={0.5}>
-            <Button className="mt-[1.6rem] bg-[#5046e6]">Explore</Button>
-         </BoxReveal>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/breadcrumb-demo.tsx b/apps/web/registry/miami/example/breadcrumb-demo.tsx
deleted file mode 100644
index 31b72e24..00000000
--- a/apps/web/registry/miami/example/breadcrumb-demo.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-   Breadcrumb,
-   BreadcrumbEllipsis,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-
-export default function BreadcrumbDemo() {
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/">Home</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <DropdownMenu>
-                  <DropdownMenuTrigger className="flex items-center gap-1">
-                     <BreadcrumbEllipsis className="size-4" />
-                     <span className="sr-only">Toggle menu</span>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start">
-                     <DropdownMenuItem>Documentation</DropdownMenuItem>
-                     <DropdownMenuItem>Themes</DropdownMenuItem>
-                     <DropdownMenuItem>GitHub</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/miami/example/breadcrumb-dropdown.tsx b/apps/web/registry/miami/example/breadcrumb-dropdown.tsx
deleted file mode 100644
index 9c6d72fd..00000000
--- a/apps/web/registry/miami/example/breadcrumb-dropdown.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ChevronDownIcon, SlashIcon } from '@radix-ui/react-icons'
-
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-
-export default function BreadcrumbWithDropdown() {
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/">Home</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator>
-               <SlashIcon />
-            </BreadcrumbSeparator>
-            <BreadcrumbItem>
-               <DropdownMenu>
-                  <DropdownMenuTrigger className="flex items-center gap-1">
-                     Components
-                     <ChevronDownIcon />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start">
-                     <DropdownMenuItem>Documentation</DropdownMenuItem>
-                     <DropdownMenuItem>Themes</DropdownMenuItem>
-                     <DropdownMenuItem>GitHub</DropdownMenuItem>
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator>
-               <SlashIcon />
-            </BreadcrumbSeparator>
-            <BreadcrumbItem>
-               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/miami/example/breadcrumb-ellipsis.tsx b/apps/web/registry/miami/example/breadcrumb-ellipsis.tsx
deleted file mode 100644
index 8dc4d6f5..00000000
--- a/apps/web/registry/miami/example/breadcrumb-ellipsis.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Link from 'next/link'
-
-import {
-   Breadcrumb,
-   BreadcrumbEllipsis,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-
-export default function BreadcrumbCollapsed() {
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink asChild>
-                  <Link href="/">Home</Link>
-               </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbEllipsis />
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbLink asChild>
-                  <Link href="/docs/components">Components</Link>
-               </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/miami/example/breadcrumb-link.tsx b/apps/web/registry/miami/example/breadcrumb-link.tsx
deleted file mode 100644
index 7367bc5a..00000000
--- a/apps/web/registry/miami/example/breadcrumb-link.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Link from 'next/link'
-
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-
-export default function BreadcrumbWithCustomSeparator() {
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink>
-                  <Link href="/">Home</Link>
-               </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbLink>
-                  <Link href="/components">Components</Link>
-               </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/miami/example/breadcrumb-responsive.tsx b/apps/web/registry/miami/example/breadcrumb-responsive.tsx
deleted file mode 100644
index 10566056..00000000
--- a/apps/web/registry/miami/example/breadcrumb-responsive.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import Link from 'next/link'
-
-import { useMediaQuery } from '~/hooks/use-media-query'
-import {
-   Breadcrumb,
-   BreadcrumbEllipsis,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Drawer,
-   DrawerClose,
-   DrawerContent,
-   DrawerDescription,
-   DrawerFooter,
-   DrawerHeader,
-   DrawerTitle,
-   DrawerTrigger,
-} from '~/registry/miami/ui/drawer'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-
-const items = [
-   { href: '#', label: 'Home' },
-   { href: '#', label: 'Documentation' },
-   { href: '#', label: 'Building Your Application' },
-   { href: '#', label: 'Data Fetching' },
-   { label: 'Caching and Revalidating' },
-]
-
-const ITEMS_TO_DISPLAY = 3
-
-export default function BreadcrumbResponsive() {
-   const [open, setOpen] = React.useState(false)
-   const isDesktop = useMediaQuery('(min-width: 768px)')
-
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            {items.length > ITEMS_TO_DISPLAY
-               ? (
-                     <>
-                        <BreadcrumbItem>
-                           {isDesktop
-                              ? (
-                                    <DropdownMenu open={open} onOpenChange={setOpen}>
-                                       <DropdownMenuTrigger
-                                          className="flex items-center gap-1"
-                                          aria-label="Toggle menu"
-                                       >
-                                          <BreadcrumbEllipsis className="size-4" />
-                                       </DropdownMenuTrigger>
-                                       <DropdownMenuContent align="start">
-                                          {items.slice(1, -2).map((item, index) => (
-                                             <DropdownMenuItem key={index}>
-                                                <Link href={item.href ? item.href : '#'}>
-                                                   {item.label}
-                                                </Link>
-                                             </DropdownMenuItem>
-                                          ))}
-                                       </DropdownMenuContent>
-                                    </DropdownMenu>
-                                 )
-                              : (
-                                    <Drawer open={open} onOpenChange={setOpen}>
-                                       <DrawerTrigger aria-label="Toggle Menu">
-                                          <BreadcrumbEllipsis className="size-4" />
-                                       </DrawerTrigger>
-                                       <DrawerContent>
-                                          <DrawerHeader className="text-left">
-                                             <DrawerTitle>Navigate to</DrawerTitle>
-                                             <DrawerDescription>
-                                                Select a page to navigate to.
-                                             </DrawerDescription>
-                                          </DrawerHeader>
-                                          <div className="grid gap-1 px-4">
-                                             {items.slice(1, -2).map((item, index) => (
-                                                <Link
-                                                   key={index}
-                                                   href={item.href ? item.href : '#'}
-                                                   className="py-1 text-sm"
-                                                >
-                                                   {item.label}
-                                                </Link>
-                                             ))}
-                                          </div>
-                                          <DrawerFooter className="pt-4">
-                                             <DrawerClose asChild>
-                                                <Button variant="outline">Close</Button>
-                                             </DrawerClose>
-                                          </DrawerFooter>
-                                       </DrawerContent>
-                                    </Drawer>
-                                 )}
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator />
-                     </>
-                  )
-               : null}
-            {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
-               <BreadcrumbItem key={index}>
-                  {item.href
-                     ? (
-                           <>
-                              <BreadcrumbLink
-                                 asChild
-                                 className="max-w-20 truncate md:max-w-none"
-                              >
-                                 <Link href={item.href}>{item.label}</Link>
-                              </BreadcrumbLink>
-                              <BreadcrumbSeparator />
-                           </>
-                        )
-                     : (
-                           <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
-                              {item.label}
-                           </BreadcrumbPage>
-                        )}
-               </BreadcrumbItem>
-            ))}
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/miami/example/breadcrumb-separator.tsx b/apps/web/registry/miami/example/breadcrumb-separator.tsx
deleted file mode 100644
index 4fe460b6..00000000
--- a/apps/web/registry/miami/example/breadcrumb-separator.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { SlashIcon } from '@radix-ui/react-icons'
-
-import {
-   Breadcrumb,
-   BreadcrumbItem,
-   BreadcrumbLink,
-   BreadcrumbList,
-   BreadcrumbPage,
-   BreadcrumbSeparator,
-} from '~/registry/miami/ui/breadcrumb'
-
-export default function BreadcrumbWithCustomSeparator() {
-   return (
-      <Breadcrumb>
-         <BreadcrumbList>
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/">Home</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator>
-               <SlashIcon />
-            </BreadcrumbSeparator>
-            <BreadcrumbItem>
-               <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator>
-               <SlashIcon />
-            </BreadcrumbSeparator>
-            <BreadcrumbItem>
-               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-         </BreadcrumbList>
-      </Breadcrumb>
-   )
-}
diff --git a/apps/web/registry/miami/example/button-as-child.tsx b/apps/web/registry/miami/example/button-as-child.tsx
deleted file mode 100644
index 53e42d25..00000000
--- a/apps/web/registry/miami/example/button-as-child.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import Link from 'next/link'
-
-import { Button } from '~/registry/miami/ui/button'
-
-export default function ButtonAsChild() {
-   return (
-      <Button asChild>
-         <Link href="/login">Login</Link>
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/example/button-demo.tsx b/apps/web/registry/miami/example/button-demo.tsx
deleted file mode 100644
index b21d47d1..00000000
--- a/apps/web/registry/miami/example/button-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export default function ButtonDemo() {
-   return <Button>Button</Button>
-}
diff --git a/apps/web/registry/miami/example/button-destructive.tsx b/apps/web/registry/miami/example/button-destructive.tsx
deleted file mode 100644
index 4319cacb..00000000
--- a/apps/web/registry/miami/example/button-destructive.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export default function ButtonDestructive() {
-   return <Button variant="destructive">Destructive</Button>
-}
diff --git a/apps/web/registry/miami/example/button-ghost.tsx b/apps/web/registry/miami/example/button-ghost.tsx
deleted file mode 100644
index b7890a66..00000000
--- a/apps/web/registry/miami/example/button-ghost.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export default function ButtonGhost() {
-   return <Button variant="ghost">Ghost</Button>
-}
diff --git a/apps/web/registry/miami/example/button-icon.tsx b/apps/web/registry/miami/example/button-icon.tsx
deleted file mode 100644
index 44e3af2b..00000000
--- a/apps/web/registry/miami/example/button-icon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ChevronRightIcon } from '@radix-ui/react-icons'
-
-import { Button } from '~/registry/miami/ui/button'
-
-export default function ButtonIcon() {
-   return (
-      <Button variant="outline" size="icon">
-         <ChevronRightIcon className="size-4" />
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/example/button-link.tsx b/apps/web/registry/miami/example/button-link.tsx
deleted file mode 100644
index bc472e0f..00000000
--- a/apps/web/registry/miami/example/button-link.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export default function ButtonLink() {
-   return <Button variant="link">Link</Button>
-}
diff --git a/apps/web/registry/miami/example/button-loading.tsx b/apps/web/registry/miami/example/button-loading.tsx
deleted file mode 100644
index bc96323c..00000000
--- a/apps/web/registry/miami/example/button-loading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ReloadIcon } from '@radix-ui/react-icons'
-
-import { Button } from '~/registry/miami/ui/button'
-
-export default function ButtonLoading() {
-   return (
-      <Button disabled>
-         <ReloadIcon className="mr-2 size-4 animate-spin" />
-         Please wait
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/example/button-outline.tsx b/apps/web/registry/miami/example/button-outline.tsx
deleted file mode 100644
index c74b4026..00000000
--- a/apps/web/registry/miami/example/button-outline.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export default function ButtonOutline() {
-   return <Button variant="outline">Outline</Button>
-}
diff --git a/apps/web/registry/miami/example/button-secondary.tsx b/apps/web/registry/miami/example/button-secondary.tsx
deleted file mode 100644
index 32ad9bcf..00000000
--- a/apps/web/registry/miami/example/button-secondary.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-
-export default function ButtonSecondary() {
-   return <Button variant="secondary">Secondary</Button>
-}
diff --git a/apps/web/registry/miami/example/button-with-icon.tsx b/apps/web/registry/miami/example/button-with-icon.tsx
deleted file mode 100644
index 16ce1a87..00000000
--- a/apps/web/registry/miami/example/button-with-icon.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { EnvelopeOpenIcon } from '@radix-ui/react-icons'
-
-import { Button } from '~/registry/miami/ui/button'
-
-export default function ButtonWithIcon() {
-   return (
-      <Button>
-         <EnvelopeOpenIcon className="mr-2 size-4" />
-         {' '}
-         Login with Email
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/example/calendar-demo.tsx b/apps/web/registry/miami/example/calendar-demo.tsx
deleted file mode 100644
index 27a043bf..00000000
--- a/apps/web/registry/miami/example/calendar-demo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Calendar } from '~/registry/miami/ui/calendar'
-
-export default function CalendarDemo() {
-   const [date, setDate] = React.useState<Date | undefined>(new Date())
-
-   return (
-      <Calendar
-         mode="single"
-         selected={date}
-         onSelect={setDate}
-         className="rounded-md border shadow"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/calendar-form.tsx b/apps/web/registry/miami/example/calendar-form.tsx
deleted file mode 100644
index da9fd23f..00000000
--- a/apps/web/registry/miami/example/calendar-form.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { CalendarIcon } from '@radix-ui/react-icons'
-import { format } from 'date-fns'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import { Calendar } from '~/registry/miami/ui/calendar'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/miami/ui/form'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const FormSchema = z.object({
-   dob: z.date({
-      required_error: 'A date of birth is required.',
-   }),
-})
-
-export default function CalendarForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-            <FormField
-               control={form.control}
-               name="dob"
-               render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                     <FormLabel>Date of birth</FormLabel>
-                     <Popover>
-                        <PopoverTrigger asChild>
-                           <FormControl>
-                              <Button
-                                 variant="outline"
-                                 className={ny(
-                                    'w-[240px] pl-3 text-left font-normal',
-                                    !field.value && 'text-muted-foreground',
-                                 )}
-                              >
-                                 {field.value
-                                    ? (
-                                          format(field.value, 'PPP')
-                                       )
-                                    : (
-                                          <span>Pick a date</span>
-                                       )}
-                                 <CalendarIcon className="ml-auto size-4 opacity-50" />
-                              </Button>
-                           </FormControl>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0" align="start">
-                           <Calendar
-                              mode="single"
-                              selected={field.value}
-                              onSelect={field.onChange}
-                              disabled={date =>
-                                 date > new Date() || date < new Date('1900-01-01')}
-                              initialFocus
-                           />
-                        </PopoverContent>
-                     </Popover>
-                     <FormDescription>
-                        Your date of birth is used to calculate your age.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/card-demo.tsx b/apps/web/registry/miami/example/card-demo.tsx
deleted file mode 100644
index df78dcfd..00000000
--- a/apps/web/registry/miami/example/card-demo.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { BellIcon, CheckIcon } from '@radix-ui/react-icons'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Switch } from '~/registry/miami/ui/switch'
-
-const notifications = [
-   {
-      title: 'Your call has been confirmed.',
-      description: '1 hour ago',
-   },
-   {
-      title: 'You have a new message!',
-      description: '1 hour ago',
-   },
-   {
-      title: 'Your subscription is expiring soon!',
-      description: '2 hours ago',
-   },
-]
-
-type CardProps = React.ComponentProps<typeof Card>
-
-export default function CardDemo({ className, ...props }: CardProps) {
-   return (
-      <Card className={ny('w-[380px]', className)} {...props}>
-         <CardHeader>
-            <CardTitle>Notifications</CardTitle>
-            <CardDescription>You have 3 unread messages.</CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-4">
-            <div className=" flex items-center space-x-4 rounded-md border p-4">
-               <BellIcon />
-               <div className="flex-1 space-y-1">
-                  <p className="text-sm font-medium leading-none">
-                     Push Notifications
-                  </p>
-                  <p className="text-muted-foreground text-sm">
-                     Send notifications to device.
-                  </p>
-               </div>
-               <Switch />
-            </div>
-            <div>
-               {notifications.map((notification, index) => (
-                  <div
-                     key={index}
-                     className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
-                  >
-                     <span className="flex size-2 translate-y-1 rounded-full bg-sky-500" />
-                     <div className="space-y-1">
-                        <p className="text-sm font-medium leading-none">
-                           {notification.title}
-                        </p>
-                        <p className="text-muted-foreground text-sm">
-                           {notification.description}
-                        </p>
-                     </div>
-                  </div>
-               ))}
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button className="w-full">
-               <CheckIcon className="mr-2 size-4" />
-               {' '}
-               Mark all as read
-            </Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/example/card-with-form.tsx b/apps/web/registry/miami/example/card-with-form.tsx
deleted file mode 100644
index 3fe61e1d..00000000
--- a/apps/web/registry/miami/example/card-with-form.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-
-export default function CardWithForm() {
-   return (
-      <Card className="w-[350px]">
-         <CardHeader>
-            <CardTitle>Create project</CardTitle>
-            <CardDescription>Deploy your new project in one-click.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <form>
-               <div className="grid w-full items-center gap-4">
-                  <div className="flex flex-col space-y-1.5">
-                     <Label htmlFor="name">Name</Label>
-                     <Input id="name" placeholder="Name of your project" />
-                  </div>
-                  <div className="flex flex-col space-y-1.5">
-                     <Label htmlFor="framework">Framework</Label>
-                     <Select>
-                        <SelectTrigger id="framework">
-                           <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent position="popper">
-                           <SelectItem value="next">Next.js</SelectItem>
-                           <SelectItem value="sveltekit">SvelteKit</SelectItem>
-                           <SelectItem value="astro">Astro</SelectItem>
-                           <SelectItem value="nuxt">Nuxt.js</SelectItem>
-                        </SelectContent>
-                     </Select>
-                  </div>
-               </div>
-            </form>
-         </CardContent>
-         <CardFooter className="flex justify-between">
-            <Button variant="outline">Cancel</Button>
-            <Button>Deploy</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/activity-goal.tsx b/apps/web/registry/miami/example/cards/activity-goal.tsx
deleted file mode 100644
index ae28dab7..00000000
--- a/apps/web/registry/miami/example/cards/activity-goal.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { MinusIcon, PlusIcon } from '@radix-ui/react-icons'
-import { useTheme } from 'next-themes'
-import { Bar, BarChart, ResponsiveContainer } from 'recharts'
-
-import { useConfig } from '~/hooks/use-config'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { baseColors } from '~/registry/registry-base-colors'
-
-const data = [
-   {
-      goal: 400,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 278,
-   },
-   {
-      goal: 189,
-   },
-   {
-      goal: 239,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 278,
-   },
-   {
-      goal: 189,
-   },
-   {
-      goal: 349,
-   },
-]
-
-export function CardsActivityGoal() {
-   const { theme: mode } = useTheme()
-   const [config] = useConfig()
-
-   const baseColor = baseColors.find(
-      baseColor => baseColor.name === config.theme,
-   )
-   const [goal, setGoal] = React.useState(350)
-
-   function onClick(adjustment: number) {
-      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
-   }
-
-   return (
-      <Card>
-         <CardHeader className="pb-4">
-            <CardTitle>Move Goal</CardTitle>
-            <CardDescription>Set your daily activity goal.</CardDescription>
-         </CardHeader>
-         <CardContent className="pb-2">
-            <div className="flex items-center justify-center space-x-2">
-               <Button
-                  variant="outline"
-                  size="icon"
-                  className="size-8 shrink-0 rounded-full"
-                  onClick={() => onClick(-10)}
-                  disabled={goal <= 200}
-               >
-                  <MinusIcon className="size-4" />
-                  <span className="sr-only">Decrease</span>
-               </Button>
-               <div className="flex-1 text-center">
-                  <div className="text-5xl font-bold tracking-tighter">{goal}</div>
-                  <div className="text-muted-foreground text-[0.70rem] uppercase">
-                     Calories/day
-                  </div>
-               </div>
-               <Button
-                  variant="outline"
-                  size="icon"
-                  className="size-8 shrink-0 rounded-full"
-                  onClick={() => onClick(10)}
-                  disabled={goal >= 400}
-               >
-                  <PlusIcon className="size-4" />
-                  <span className="sr-only">Increase</span>
-               </Button>
-            </div>
-            <div className="my-3 h-[60px]">
-               <ResponsiveContainer width="100%" height="100%">
-                  <BarChart data={data}>
-                     <Bar
-                        dataKey="goal"
-                        style={
-                           {
-                              'fill': 'var(--theme-primary)',
-                              'opacity': 0.2,
-                              '--theme-primary': `hsl(${
-                      baseColor?.cssVars[mode === 'dark' ? 'dark' : 'light']
-                        .primary
-                    })`,
-                           } as React.CSSProperties
-                        }
-                     />
-                  </BarChart>
-               </ResponsiveContainer>
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button className="w-full">Set Goal</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/calendar.tsx b/apps/web/registry/miami/example/cards/calendar.tsx
deleted file mode 100644
index b8054e26..00000000
--- a/apps/web/registry/miami/example/cards/calendar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { addDays } from 'date-fns'
-
-import { Calendar } from '~/registry/miami/ui/calendar'
-import { Card, CardContent } from '~/registry/miami/ui/card'
-
-const start = new Date(2023, 5, 5)
-
-export function CardsCalendar() {
-   return (
-      <Card className="max-w-[260px]">
-         <CardContent className="p-1">
-            <Calendar
-               numberOfMonths={1}
-               mode="range"
-               defaultMonth={start}
-               selected={{
-                  from: start,
-                  to: addDays(start, 8),
-               }}
-            />
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/chat.tsx b/apps/web/registry/miami/example/cards/chat.tsx
deleted file mode 100644
index 82da2009..00000000
--- a/apps/web/registry/miami/example/cards/chat.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import * as React from 'react'
-import { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-ui/react-icons'
-
-import { ny } from '~/lib/utils'
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardFooter,
-   CardHeader,
-} from '~/registry/miami/ui/card'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/miami/ui/command'
-import {
-   Dialog,
-   DialogContent,
-   DialogDescription,
-   DialogFooter,
-   DialogHeader,
-   DialogTitle,
-} from '~/registry/miami/ui/dialog'
-import { Input } from '~/registry/miami/ui/input'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-
-const users = [
-   {
-      name: 'Olivia Martin',
-      email: 'm@example.com',
-      avatar: '/avatars/01.png',
-   },
-   {
-      name: 'Isabella Nguyen',
-      email: 'isabella.nguyen@email.com',
-      avatar: '/avatars/03.png',
-   },
-   {
-      name: 'Emma Wilson',
-      email: 'emma@example.com',
-      avatar: '/avatars/05.png',
-   },
-   {
-      name: 'Jackson Lee',
-      email: 'lee@example.com',
-      avatar: '/avatars/02.png',
-   },
-   {
-      name: 'William Kim',
-      email: 'will@email.com',
-      avatar: '/avatars/04.png',
-   },
-] as const
-
-type User = (typeof users)[number]
-
-export function CardsChat() {
-   const [open, setOpen] = React.useState(false)
-   const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
-
-   const [messages, setMessages] = React.useState([
-      {
-         role: 'agent',
-         content: 'Hi, how can I help you today?',
-      },
-      {
-         role: 'user',
-         content: 'Hey, I\'m having trouble with my account.',
-      },
-      {
-         role: 'agent',
-         content: 'What seems to be the problem?',
-      },
-      {
-         role: 'user',
-         content: 'I can\'t log in.',
-      },
-   ])
-   const [input, setInput] = React.useState('')
-   const inputLength = input.trim().length
-
-   return (
-      <>
-         <Card>
-            <CardHeader className="flex flex-row items-center">
-               <div className="flex items-center space-x-4">
-                  <Avatar>
-                     <AvatarImage src="/avatars/01.png" alt="Image" />
-                     <AvatarFallback>OM</AvatarFallback>
-                  </Avatar>
-                  <div>
-                     <p className="text-sm font-medium leading-none">Sofia Davis</p>
-                     <p className="text-muted-foreground text-sm">m@example.com</p>
-                  </div>
-               </div>
-               <TooltipProvider delayDuration={0}>
-                  <Tooltip>
-                     <TooltipTrigger asChild>
-                        <Button
-                           size="icon"
-                           variant="outline"
-                           className="ml-auto rounded-full"
-                           onClick={() => setOpen(true)}
-                        >
-                           <PlusIcon className="size-4" />
-                           <span className="sr-only">New message</span>
-                        </Button>
-                     </TooltipTrigger>
-                     <TooltipContent sideOffset={10}>New message</TooltipContent>
-                  </Tooltip>
-               </TooltipProvider>
-            </CardHeader>
-            <CardContent>
-               <div className="space-y-4">
-                  {messages.map((message, index) => (
-                     <div
-                        key={index}
-                        className={ny(
-                           'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',
-                           message.role === 'user'
-                              ? 'bg-primary text-primary-foreground ml-auto'
-                              : 'bg-muted',
-                        )}
-                     >
-                        {message.content}
-                     </div>
-                  ))}
-               </div>
-            </CardContent>
-            <CardFooter>
-               <form
-                  onSubmit={(event) => {
-                     event.preventDefault()
-                     if (inputLength === 0)
-                        return
-                     setMessages([
-                        ...messages,
-                        {
-                           role: 'user',
-                           content: input,
-                        },
-                     ])
-                     setInput('')
-                  }}
-                  className="flex w-full items-center space-x-2"
-               >
-                  <Input
-                     id="message"
-                     placeholder="Type your message..."
-                     className="flex-1"
-                     autoComplete="off"
-                     value={input}
-                     onChange={event => setInput(event.target.value)}
-                  />
-                  <Button type="submit" size="icon" disabled={inputLength === 0}>
-                     <PaperPlaneIcon className="size-4" />
-                     <span className="sr-only">Send</span>
-                  </Button>
-               </form>
-            </CardFooter>
-         </Card>
-         <Dialog open={open} onOpenChange={setOpen}>
-            <DialogContent className="gap-0 p-0 outline-none">
-               <DialogHeader className="px-4 pb-4 pt-5">
-                  <DialogTitle>New message</DialogTitle>
-                  <DialogDescription>
-                     Invite a user to this thread. This will create a new group
-                     message.
-                  </DialogDescription>
-               </DialogHeader>
-               <Command className="overflow-hidden rounded-t-none border-t bg-transparent">
-                  <CommandInput placeholder="Search user..." />
-                  <CommandList>
-                     <CommandEmpty>No users found.</CommandEmpty>
-                     <CommandGroup className="p-2">
-                        {users.map(user => (
-                           <CommandItem
-                              key={user.email}
-                              className="flex items-center px-2"
-                              onSelect={() => {
-                                 if (selectedUsers.includes(user)) {
-                                    return setSelectedUsers(
-                                       selectedUsers.filter(
-                                          selectedUser => selectedUser !== user,
-                                       ),
-                                    )
-                                 }
-
-                                 return setSelectedUsers(
-                                    [...users].filter(u =>
-                                       [...selectedUsers, user].includes(u),
-                                    ),
-                                 )
-                              }}
-                           >
-                              <Avatar>
-                                 <AvatarImage src={user.avatar} alt="Image" />
-                                 <AvatarFallback>{user.name[0]}</AvatarFallback>
-                              </Avatar>
-                              <div className="ml-2">
-                                 <p className="text-sm font-medium leading-none">
-                                    {user.name}
-                                 </p>
-                                 <p className="text-muted-foreground text-sm">
-                                    {user.email}
-                                 </p>
-                              </div>
-                              {selectedUsers.includes(user)
-                                 ? (
-                                       <CheckIcon className="text-primary ml-auto flex size-5" />
-                                    )
-                                 : null}
-                           </CommandItem>
-                        ))}
-                     </CommandGroup>
-                  </CommandList>
-               </Command>
-               <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
-                  {selectedUsers.length > 0
-                     ? (
-                           <div className="flex -space-x-2 overflow-hidden">
-                              {selectedUsers.map(user => (
-                                 <Avatar
-                                    key={user.email}
-                                    className="border-background inline-block border-2"
-                                 >
-                                    <AvatarImage src={user.avatar} />
-                                    <AvatarFallback>{user.name[0]}</AvatarFallback>
-                                 </Avatar>
-                              ))}
-                           </div>
-                        )
-                     : (
-                           <p className="text-muted-foreground text-sm">
-                              Select users to add to this thread.
-                           </p>
-                        )}
-                  <Button
-                     disabled={selectedUsers.length < 2}
-                     onClick={() => {
-                        setOpen(false)
-                     }}
-                  >
-                     Continue
-                  </Button>
-               </DialogFooter>
-            </DialogContent>
-         </Dialog>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/cookie-settings.tsx b/apps/web/registry/miami/example/cards/cookie-settings.tsx
deleted file mode 100644
index 7dbc1570..00000000
--- a/apps/web/registry/miami/example/cards/cookie-settings.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Label } from '~/registry/miami/ui/label'
-import { Switch } from '~/registry/miami/ui/switch'
-
-export function CardsCookieSettings() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Cookie Settings</CardTitle>
-            <CardDescription>Manage your cookie settings here.</CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-6">
-            <div className="flex items-center justify-between space-x-4">
-               <Label htmlFor="necessary" className="flex flex-col space-y-1">
-                  <span>Strictly Necessary</span>
-                  <span className="text-muted-foreground text-xs font-normal leading-snug">
-                     These cookies are essential in order to use the website and use
-                     its features.
-                  </span>
-               </Label>
-               <Switch id="necessary" defaultChecked aria-label="Necessary" />
-            </div>
-            <div className="flex items-center justify-between space-x-4">
-               <Label htmlFor="functional" className="flex flex-col space-y-1">
-                  <span>Functional Cookies</span>
-                  <span className="text-muted-foreground text-xs font-normal leading-snug">
-                     These cookies allow the website to provide personalized
-                     functionality.
-                  </span>
-               </Label>
-               <Switch id="functional" aria-label="Functional" />
-            </div>
-            <div className="flex items-center justify-between space-x-4">
-               <Label htmlFor="performance" className="flex flex-col space-y-1">
-                  <span>Performance Cookies</span>
-                  <span className="text-muted-foreground text-xs font-normal leading-snug">
-                     These cookies help to improve the performance of the website.
-                  </span>
-               </Label>
-               <Switch id="performance" aria-label="Performance" />
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button variant="outline" className="w-full">
-               Save preferences
-            </Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/create-account.tsx b/apps/web/registry/miami/example/cards/create-account.tsx
deleted file mode 100644
index f5a973f1..00000000
--- a/apps/web/registry/miami/example/cards/create-account.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import { Icons } from '~/components/icons'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export function CardsCreateAccount() {
-   return (
-      <Card>
-         <CardHeader className="space-y-1">
-            <CardTitle className="text-2xl">Create an account</CardTitle>
-            <CardDescription>
-               Enter your email below to create your account
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-4">
-            <div className="grid grid-cols-2 gap-6">
-               <Button variant="outline">
-                  <Icons.gitHub className="mr-2 size-4" />
-                  GitHub
-               </Button>
-               <Button variant="outline">
-                  <Icons.google className="mr-2 size-4" />
-                  Google
-               </Button>
-            </div>
-            <div className="relative">
-               <div className="absolute inset-0 flex items-center">
-                  <span className="w-full border-t" />
-               </div>
-               <div className="relative flex justify-center text-xs uppercase">
-                  <span className="bg-card text-muted-foreground px-2">
-                     Or continue with
-                  </span>
-               </div>
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor="email">Email</Label>
-               <Input id="email" type="email" placeholder="m@example.com" />
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor="password">Password</Label>
-               <Input id="password" type="password" />
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button className="w-full">Create account</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/data-table.tsx b/apps/web/registry/miami/example/cards/data-table.tsx
deleted file mode 100644
index 322ea72b..00000000
--- a/apps/web/registry/miami/example/cards/data-table.tsx
+++ /dev/null
@@ -1,344 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   CaretSortIcon,
-   ChevronDownIcon,
-   DotsHorizontalIcon,
-} from '@radix-ui/react-icons'
-import type {
-   ColumnDef,
-   ColumnFiltersState,
-   SortingState,
-   VisibilityState,
-} from '@tanstack/react-table'
-import {
-   flexRender,
-   getCoreRowModel,
-   getFilteredRowModel,
-   getPaginationRowModel,
-   getSortedRowModel,
-   useReactTable,
-} from '@tanstack/react-table'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-import {
-   DropdownMenu,
-   DropdownMenuCheckboxItem,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-
-const data: Payment[] = [
-   {
-      id: 'm5gr84i9',
-      amount: 316,
-      status: 'success',
-      email: 'ken99@yahoo.com',
-   },
-   {
-      id: '3u1reuv4',
-      amount: 242,
-      status: 'success',
-      email: 'Abe45@gmail.com',
-   },
-   {
-      id: 'derv1ws0',
-      amount: 837,
-      status: 'processing',
-      email: 'Monserrat44@gmail.com',
-   },
-   {
-      id: '5kma53ae',
-      amount: 874,
-      status: 'success',
-      email: 'Silas22@gmail.com',
-   },
-   {
-      id: 'bhqecj4p',
-      amount: 721,
-      status: 'failed',
-      email: 'carmella@hotmail.com',
-   },
-]
-
-export interface Payment {
-   id: string
-   amount: number
-   status: 'pending' | 'processing' | 'success' | 'failed'
-   email: string
-}
-
-export const columns: ColumnDef<Payment>[] = [
-   {
-      id: 'select',
-      header: ({ table }) => (
-         <Checkbox
-            checked={
-               table.getIsAllPageRowsSelected()
-               || (table.getIsSomePageRowsSelected() && 'indeterminate')
-            }
-            onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-            aria-label="Select all"
-         />
-      ),
-      cell: ({ row }) => (
-         <Checkbox
-            checked={row.getIsSelected()}
-            onCheckedChange={value => row.toggleSelected(!!value)}
-            aria-label="Select row"
-         />
-      ),
-      enableSorting: false,
-      enableHiding: false,
-   },
-   {
-      accessorKey: 'status',
-      header: 'Status',
-      cell: ({ row }) => (
-         <div className="capitalize">{row.getValue('status')}</div>
-      ),
-   },
-   {
-      accessorKey: 'email',
-      header: ({ column }) => {
-         return (
-            <Button
-               variant="ghost"
-               onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            >
-               Email
-               <CaretSortIcon className="ml-2 size-4" />
-            </Button>
-         )
-      },
-      cell: ({ row }) => <div className="lowercase">{row.getValue('email')}</div>,
-   },
-   {
-      accessorKey: 'amount',
-      header: () => <div className="text-right">Amount</div>,
-      cell: ({ row }) => {
-         const amount = Number.parseFloat(row.getValue('amount'))
-
-         // Format the amount as a dollar amount
-         const formatted = new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: 'USD',
-         }).format(amount)
-
-         return <div className="text-right font-medium">{formatted}</div>
-      },
-   },
-   {
-      id: 'actions',
-      enableHiding: false,
-      cell: ({ row }) => {
-         const payment = row.original
-
-         return (
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" className="size-8 p-0">
-                     <span className="sr-only">Open menu</span>
-                     <DotsHorizontalIcon className="size-4" />
-                  </Button>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent align="end">
-                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                  <DropdownMenuItem
-                     onClick={() => navigator.clipboard.writeText(payment.id)}
-                  >
-                     Copy payment ID
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>View customer</DropdownMenuItem>
-                  <DropdownMenuItem>View payment details</DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         )
-      },
-   },
-]
-
-export function CardsDataTable() {
-   const [sorting, setSorting] = React.useState<SortingState>([])
-   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-      [],
-   )
-   const [columnVisibility, setColumnVisibility]
-    = React.useState<VisibilityState>({})
-   const [rowSelection, setRowSelection] = React.useState({})
-
-   const table = useReactTable({
-      data,
-      columns,
-      onSortingChange: setSorting,
-      onColumnFiltersChange: setColumnFilters,
-      getCoreRowModel: getCoreRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      onColumnVisibilityChange: setColumnVisibility,
-      onRowSelectionChange: setRowSelection,
-      state: {
-         sorting,
-         columnFilters,
-         columnVisibility,
-         rowSelection,
-      },
-   })
-
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Payments</CardTitle>
-            <CardDescription>Manage your payments.</CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="mb-4 flex items-center gap-4">
-               <Input
-                  placeholder="Filter emails..."
-                  value={(table.getColumn('email')?.getFilterValue() as string) ?? ''}
-                  onChange={event =>
-                     table.getColumn('email')?.setFilterValue(event.target.value)}
-                  className="max-w-sm"
-               />
-               <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                     <Button variant="outline" className="ml-auto">
-                        Columns
-                        {' '}
-                        <ChevronDownIcon className="ml-2 size-4" />
-                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                     {table
-                        .getAllColumns()
-                        .filter(column => column.getCanHide())
-                        .map((column) => {
-                           return (
-                              <DropdownMenuCheckboxItem
-                                 key={column.id}
-                                 className="capitalize"
-                                 checked={column.getIsVisible()}
-                                 onCheckedChange={value =>
-                                    column.toggleVisibility(!!value)}
-                              >
-                                 {column.id}
-                              </DropdownMenuCheckboxItem>
-                           )
-                        })}
-                  </DropdownMenuContent>
-               </DropdownMenu>
-            </div>
-            <div className="rounded-md border">
-               <Table>
-                  <TableHeader>
-                     {table.getHeaderGroups().map(headerGroup => (
-                        <TableRow key={headerGroup.id}>
-                           {headerGroup.headers.map((header) => {
-                              return (
-                                 <TableHead
-                                    key={header.id}
-                                    className="[&:has([role=checkbox])]:pl-3"
-                                 >
-                                    {header.isPlaceholder
-                                       ? null
-                                       : flexRender(
-                                          header.column.columnDef.header,
-                                          header.getContext(),
-                                       )}
-                                 </TableHead>
-                              )
-                           })}
-                        </TableRow>
-                     ))}
-                  </TableHeader>
-                  <TableBody>
-                     {table.getRowModel().rows?.length
-                        ? (
-                              table.getRowModel().rows.map(row => (
-                                 <TableRow
-                                    key={row.id}
-                                    data-state={row.getIsSelected() && 'selected'}
-                                 >
-                                    {row.getVisibleCells().map(cell => (
-                                       <TableCell
-                                          key={cell.id}
-                                          className="[&:has([role=checkbox])]:pl-3"
-                                       >
-                                          {flexRender(
-                                             cell.column.columnDef.cell,
-                                             cell.getContext(),
-                                          )}
-                                       </TableCell>
-                                    ))}
-                                 </TableRow>
-                              ))
-                           )
-                        : (
-                              <TableRow>
-                                 <TableCell
-                                    colSpan={columns.length}
-                                    className="h-24 text-center"
-                                 >
-                                    No results.
-                                 </TableCell>
-                              </TableRow>
-                           )}
-                  </TableBody>
-               </Table>
-            </div>
-            <div className="flex items-center justify-end space-x-2 pt-4">
-               <div className="text-muted-foreground flex-1 text-sm">
-                  {table.getFilteredSelectedRowModel().rows.length}
-                  {' '}
-                  of
-                  {' '}
-                  {table.getFilteredRowModel().rows.length}
-                  {' '}
-                  row(s) selected.
-               </div>
-               <div className="space-x-2">
-                  <Button
-                     variant="outline"
-                     size="sm"
-                     onClick={() => table.previousPage()}
-                     disabled={!table.getCanPreviousPage()}
-                  >
-                     Previous
-                  </Button>
-                  <Button
-                     variant="outline"
-                     size="sm"
-                     onClick={() => table.nextPage()}
-                     disabled={!table.getCanNextPage()}
-                  >
-                     Next
-                  </Button>
-               </div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/index.tsx b/apps/web/registry/miami/example/cards/index.tsx
deleted file mode 100644
index 1582b37f..00000000
--- a/apps/web/registry/miami/example/cards/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { CardsActivityGoal } from '~/registry/miami/example/cards/activity-goal'
-import { CardsCalendar } from '~/registry/miami/example/cards/calendar'
-import { CardsChat } from '~/registry/miami/example/cards/chat'
-import { CardsCookieSettings } from '~/registry/miami/example/cards/cookie-settings'
-import { CardsCreateAccount } from '~/registry/miami/example/cards/create-account'
-import { CardsDataTable } from '~/registry/miami/example/cards/data-table'
-import { CardsMetric } from '~/registry/miami/example/cards/metric'
-import { CardsPaymentMethod } from '~/registry/miami/example/cards/payment-method'
-import { CardsReportIssue } from '~/registry/miami/example/cards/report-issue'
-import { CardsShare } from '~/registry/miami/example/cards/share'
-import { CardsStats } from '~/registry/miami/example/cards/stats'
-import { CardsTeamMembers } from '~/registry/miami/example/cards/team-members'
-
-export default function CardsDemo() {
-   return (
-      <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
-         <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
-            <CardsStats />
-            <div className="grid gap-1 sm:grid-cols-[260px_1fr] md:hidden">
-               <CardsCalendar />
-               <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
-                  <CardsActivityGoal />
-               </div>
-               <div className="pt-3 sm:col-span-2 xl:pt-4">
-                  <CardsMetric />
-               </div>
-            </div>
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-               <div className="space-y-4 xl:space-y-4">
-                  <CardsTeamMembers />
-                  <CardsCookieSettings />
-                  <CardsPaymentMethod />
-               </div>
-               <div className="space-y-4 xl:space-y-4">
-                  <CardsChat />
-                  <CardsCreateAccount />
-                  <div className="hidden xl:block">
-                     <CardsReportIssue />
-                  </div>
-               </div>
-            </div>
-         </div>
-         <div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
-            <div className="hidden gap-1 sm:grid-cols-[260px_1fr] md:grid">
-               <CardsCalendar />
-               <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
-                  <CardsActivityGoal />
-               </div>
-               <div className="pt-3 sm:col-span-2 xl:pt-3">
-                  <CardsMetric />
-               </div>
-            </div>
-            <div className="hidden md:block">
-               <CardsDataTable />
-            </div>
-            <CardsShare />
-            <div className="xl:hidden">
-               <CardsReportIssue />
-            </div>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/metric.tsx b/apps/web/registry/miami/example/cards/metric.tsx
deleted file mode 100644
index d083ae98..00000000
--- a/apps/web/registry/miami/example/cards/metric.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { useTheme } from 'next-themes'
-import { Line, LineChart, ResponsiveContainer, Tooltip } from 'recharts'
-
-import { useConfig } from '~/hooks/use-config'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { baseColors } from '~/registry/registry-base-colors'
-
-const data = [
-   {
-      average: 400,
-      today: 240,
-   },
-   {
-      average: 300,
-      today: 139,
-   },
-   {
-      average: 200,
-      today: 980,
-   },
-   {
-      average: 278,
-      today: 390,
-   },
-   {
-      average: 189,
-      today: 480,
-   },
-   {
-      average: 239,
-      today: 380,
-   },
-   {
-      average: 349,
-      today: 430,
-   },
-]
-
-export function CardsMetric() {
-   const { theme: mode } = useTheme()
-   const [config] = useConfig()
-
-   const baseColor = baseColors.find(
-      baseColor => baseColor.name === config.theme,
-   )
-
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Exercise Minutes</CardTitle>
-            <CardDescription>
-               Your exercise minutes are ahead of where you normally are.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="pb-4">
-            <div className="h-[200px]">
-               <ResponsiveContainer width="100%" height="100%">
-                  <LineChart
-                     data={data}
-                     margin={{
-                        top: 5,
-                        right: 10,
-                        left: 10,
-                        bottom: 0,
-                     }}
-                  >
-                     <Tooltip
-                        content={({ active, payload }) => {
-                           if (active && payload && payload.length) {
-                              return (
-                                 <div className="bg-background rounded-lg border p-2 shadow-sm">
-                                    <div className="grid grid-cols-2 gap-2">
-                                       <div className="flex flex-col">
-                                          <span className="text-muted-foreground text-[0.70rem] uppercase">
-                                             Average
-                                          </span>
-                                          <span className="text-muted-foreground font-bold">
-                                             {payload[0].value}
-                                          </span>
-                                       </div>
-                                       <div className="flex flex-col">
-                                          <span className="text-muted-foreground text-[0.70rem] uppercase">
-                                             Today
-                                          </span>
-                                          <span className="font-bold">
-                                             {payload[1].value}
-                                          </span>
-                                       </div>
-                                    </div>
-                                 </div>
-                              )
-                           }
-
-                           return null
-                        }}
-                     />
-                     <Line
-                        type="monotone"
-                        strokeWidth={2}
-                        dataKey="average"
-                        activeDot={{
-                           r: 6,
-                           style: { fill: 'var(--theme-primary)', opacity: 0.25 },
-                        }}
-                        style={
-                           {
-                              'stroke': 'var(--theme-primary)',
-                              'opacity': 0.25,
-                              '--theme-primary': `hsl(${
-                      baseColor?.cssVars[mode === 'dark' ? 'dark' : 'light']
-                        .primary
-                    })`,
-                           } as React.CSSProperties
-                        }
-                     />
-                     <Line
-                        type="monotone"
-                        dataKey="today"
-                        strokeWidth={2}
-                        activeDot={{
-                           r: 8,
-                           style: { fill: 'var(--theme-primary)' },
-                        }}
-                        style={
-                           {
-                              'stroke': 'var(--theme-primary)',
-                              '--theme-primary': `hsl(${
-                      baseColor?.cssVars[mode === 'dark' ? 'dark' : 'light']
-                        .primary
-                    })`,
-                           } as React.CSSProperties
-                        }
-                     />
-                  </LineChart>
-               </ResponsiveContainer>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/payment-method.tsx b/apps/web/registry/miami/example/cards/payment-method.tsx
deleted file mode 100644
index 196571e9..00000000
--- a/apps/web/registry/miami/example/cards/payment-method.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-'use client'
-
-import { Icons } from '~/components/icons'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-
-export function CardsPaymentMethod() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Payment Method</CardTitle>
-            <CardDescription>
-               Add a new payment method to your account.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-6">
-            <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
-               <div>
-                  <RadioGroupItem
-                     value="card"
-                     id="card"
-                     className="peer sr-only"
-                     aria-label="Card"
-                  />
-                  <Label
-                     htmlFor="card"
-                     className="border-muted hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
-                  >
-                     <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        className="mb-3 size-6"
-                     >
-                        <rect width="20" height="14" x="2" y="5" rx="2" />
-                        <path d="M2 10h20" />
-                     </svg>
-                     Card
-                  </Label>
-               </div>
-               <div>
-                  <RadioGroupItem
-                     value="paypal"
-                     id="paypal"
-                     className="peer sr-only"
-                     aria-label="Paypal"
-                  />
-                  <Label
-                     htmlFor="paypal"
-                     className="border-muted hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
-                  >
-                     <Icons.paypal className="mb-3 size-6" />
-                     Paypal
-                  </Label>
-               </div>
-               <div>
-                  <RadioGroupItem
-                     value="apple"
-                     id="apple"
-                     className="peer sr-only"
-                     aria-label="Apple"
-                  />
-                  <Label
-                     htmlFor="apple"
-                     className="border-muted hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4 "
-                  >
-                     <Icons.apple className="mb-3 size-6" />
-                     Apple
-                  </Label>
-               </div>
-            </RadioGroup>
-            <div className="grid gap-2">
-               <Label htmlFor="name">Name</Label>
-               <Input id="name" placeholder="First Last" />
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor="city">City</Label>
-               <Input id="city" placeholder="" />
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor="number">Card number</Label>
-               <Input id="number" placeholder="" />
-            </div>
-            <div className="grid grid-cols-3 gap-4">
-               <div className="grid gap-2">
-                  <Label htmlFor="month">Expires</Label>
-                  <Select>
-                     <SelectTrigger id="month" aria-label="Month">
-                        <SelectValue placeholder="Month" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="1">January</SelectItem>
-                        <SelectItem value="2">February</SelectItem>
-                        <SelectItem value="3">March</SelectItem>
-                        <SelectItem value="4">April</SelectItem>
-                        <SelectItem value="5">May</SelectItem>
-                        <SelectItem value="6">June</SelectItem>
-                        <SelectItem value="7">July</SelectItem>
-                        <SelectItem value="8">August</SelectItem>
-                        <SelectItem value="9">September</SelectItem>
-                        <SelectItem value="10">October</SelectItem>
-                        <SelectItem value="11">November</SelectItem>
-                        <SelectItem value="12">December</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-               <div className="grid gap-2">
-                  <Label htmlFor="year">Year</Label>
-                  <Select>
-                     <SelectTrigger id="year" aria-label="Year">
-                        <SelectValue placeholder="Year" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        {Array.from({ length: 10 }, (_, i) => (
-                           <SelectItem key={i} value={`${new Date().getFullYear() + i}`}>
-                              {new Date().getFullYear() + i}
-                           </SelectItem>
-                        ))}
-                     </SelectContent>
-                  </Select>
-               </div>
-               <div className="grid gap-2">
-                  <Label htmlFor="cvc">CVC</Label>
-                  <Input id="cvc" placeholder="CVC" />
-               </div>
-            </div>
-         </CardContent>
-         <CardFooter>
-            <Button className="w-full">Continue</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/report-issue.tsx b/apps/web/registry/miami/example/cards/report-issue.tsx
deleted file mode 100644
index 6a63b327..00000000
--- a/apps/web/registry/miami/example/cards/report-issue.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-import { Textarea } from '~/registry/miami/ui/textarea'
-
-export function CardsReportIssue() {
-   const id = React.useId()
-
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Report an issue</CardTitle>
-            <CardDescription>
-               What area are you having problems with?
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-6">
-            <div className="grid gap-4 sm:grid-cols-2">
-               <div className="grid gap-2">
-                  <Label htmlFor={`area-${id}`}>Area</Label>
-                  <Select defaultValue="billing">
-                     <SelectTrigger id={`area-${id}`} aria-label="Area">
-                        <SelectValue placeholder="Select" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="team">Team</SelectItem>
-                        <SelectItem value="billing">Billing</SelectItem>
-                        <SelectItem value="account">Account</SelectItem>
-                        <SelectItem value="deployments">Deployments</SelectItem>
-                        <SelectItem value="support">Support</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-               <div className="grid gap-2">
-                  <Label htmlFor={`security-level-${id}`}>Security Level</Label>
-                  <Select defaultValue="2">
-                     <SelectTrigger
-                        id={`security-level-${id}`}
-                        className="line-clamp-1 w-full truncate"
-                        aria-label="Security Level"
-                     >
-                        <SelectValue placeholder="Select level" />
-                     </SelectTrigger>
-                     <SelectContent>
-                        <SelectItem value="1">Severity 1 (Highest)</SelectItem>
-                        <SelectItem value="2">Severity 2</SelectItem>
-                        <SelectItem value="3">Severity 3</SelectItem>
-                        <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
-                     </SelectContent>
-                  </Select>
-               </div>
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor={`subject-${id}`}>Subject</Label>
-               <Input id={`subject-${id}`} placeholder="I need help with..." />
-            </div>
-            <div className="grid gap-2">
-               <Label htmlFor={`description-${id}`}>Description</Label>
-               <Textarea
-                  id={`description-${id}`}
-                  placeholder="Please include all information relevant to your issue."
-               />
-            </div>
-         </CardContent>
-         <CardFooter className="justify-between space-x-2">
-            <Button variant="ghost">Cancel</Button>
-            <Button>Submit</Button>
-         </CardFooter>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/share.tsx b/apps/web/registry/miami/example/cards/share.tsx
deleted file mode 100644
index 21541e5e..00000000
--- a/apps/web/registry/miami/example/cards/share.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-'use client'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-import { Separator } from '~/registry/miami/ui/separator'
-
-export function CardsShare() {
-   return (
-      <Card>
-         <CardHeader className="pb-3">
-            <CardTitle>Share this document</CardTitle>
-            <CardDescription>
-               Anyone with the link can view this document.
-            </CardDescription>
-         </CardHeader>
-         <CardContent>
-            <div className="flex space-x-2">
-               <Label htmlFor="link" className="sr-only">
-                  Link
-               </Label>
-               <Input
-                  id="link"
-                  value="http://example.com/link/to/document"
-                  readOnly
-               />
-               <Button className="shrink-0">Copy Link</Button>
-            </div>
-            <Separator className="my-4" />
-            <div className="space-y-4">
-               <h4 className="text-sm font-medium">People with access</h4>
-               <div className="grid gap-6">
-                  <div className="flex items-center justify-between space-x-4">
-                     <div className="flex items-center space-x-4">
-                        <Avatar>
-                           <AvatarImage src="/avatars/03.png" alt="Image" />
-                           <AvatarFallback>OM</AvatarFallback>
-                        </Avatar>
-                        <div>
-                           <p className="text-sm font-medium leading-none">
-                              Olivia Martin
-                           </p>
-                           <p className="text-muted-foreground text-sm">m@example.com</p>
-                        </div>
-                     </div>
-                     <Select defaultValue="edit">
-                        <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
-                           <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                           <SelectItem value="edit">Can edit</SelectItem>
-                           <SelectItem value="view">Can view</SelectItem>
-                        </SelectContent>
-                     </Select>
-                  </div>
-                  <div className="flex items-center justify-between space-x-4">
-                     <div className="flex items-center space-x-4">
-                        <Avatar>
-                           <AvatarImage src="/avatars/05.png" alt="Image" />
-                           <AvatarFallback>IN</AvatarFallback>
-                        </Avatar>
-                        <div>
-                           <p className="text-sm font-medium leading-none">
-                              Isabella Nguyen
-                           </p>
-                           <p className="text-muted-foreground text-sm">b@example.com</p>
-                        </div>
-                     </div>
-                     <Select defaultValue="view">
-                        <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
-                           <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                           <SelectItem value="edit">Can edit</SelectItem>
-                           <SelectItem value="view">Can view</SelectItem>
-                        </SelectContent>
-                     </Select>
-                  </div>
-                  <div className="flex items-center justify-between space-x-4">
-                     <div className="flex items-center space-x-4">
-                        <Avatar>
-                           <AvatarImage src="/avatars/01.png" alt="Image" />
-                           <AvatarFallback>SD</AvatarFallback>
-                        </Avatar>
-                        <div>
-                           <p className="text-sm font-medium leading-none">
-                              Sofia Davis
-                           </p>
-                           <p className="text-muted-foreground text-sm">p@example.com</p>
-                        </div>
-                     </div>
-                     <Select defaultValue="view">
-                        <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
-                           <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                           <SelectItem value="edit">Can edit</SelectItem>
-                           <SelectItem value="view">Can view</SelectItem>
-                        </SelectContent>
-                     </Select>
-                  </div>
-               </div>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/stats.tsx b/apps/web/registry/miami/example/cards/stats.tsx
deleted file mode 100644
index fcba6b59..00000000
--- a/apps/web/registry/miami/example/cards/stats.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { useTheme } from 'next-themes'
-import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from 'recharts'
-
-import { useConfig } from '~/hooks/use-config'
-import {
-   Card,
-   CardContent,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { baseColors } from '~/registry/registry-base-colors'
-
-const data = [
-   {
-      revenue: 10400,
-      subscription: 240,
-   },
-   {
-      revenue: 14405,
-      subscription: 300,
-   },
-   {
-      revenue: 9400,
-      subscription: 200,
-   },
-   {
-      revenue: 8200,
-      subscription: 278,
-   },
-   {
-      revenue: 7000,
-      subscription: 189,
-   },
-   {
-      revenue: 9600,
-      subscription: 239,
-   },
-   {
-      revenue: 11244,
-      subscription: 278,
-   },
-   {
-      revenue: 26475,
-      subscription: 189,
-   },
-]
-
-export function CardsStats() {
-   const { theme: mode } = useTheme()
-   const [config] = useConfig()
-
-   const baseColor = baseColors.find(
-      baseColor => baseColor.name === config.theme,
-   )
-
-   return (
-      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
-         <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-               <CardTitle className="text-sm font-normal">Total Revenue</CardTitle>
-            </CardHeader>
-            <CardContent>
-               <div className="text-2xl font-bold">$15,231.89</div>
-               <p className="text-muted-foreground text-xs">
-                  +20.1% from last month
-               </p>
-               <div className="h-[80px]">
-                  <ResponsiveContainer width="100%" height="100%">
-                     <LineChart
-                        data={data}
-                        margin={{
-                           top: 5,
-                           right: 10,
-                           left: 10,
-                           bottom: 0,
-                        }}
-                     >
-                        <Line
-                           type="monotone"
-                           strokeWidth={2}
-                           dataKey="revenue"
-                           activeDot={{
-                              r: 6,
-                              style: { fill: 'var(--theme-primary)', opacity: 0.25 },
-                           }}
-                           style={
-                              {
-                                 'stroke': 'var(--theme-primary)',
-                                 '--theme-primary': `hsl(${
-                        baseColor?.cssVars[mode === 'dark' ? 'dark' : 'light']
-                          .primary
-                      })`,
-                              } as React.CSSProperties
-                           }
-                        />
-                     </LineChart>
-                  </ResponsiveContainer>
-               </div>
-            </CardContent>
-         </Card>
-         <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-               <CardTitle className="text-sm font-normal">Subscriptions</CardTitle>
-            </CardHeader>
-            <CardContent>
-               <div className="text-2xl font-bold">+2350</div>
-               <p className="text-muted-foreground text-xs">
-                  +180.1% from last month
-               </p>
-               <div className="mt-4 h-[80px]">
-                  <ResponsiveContainer width="100%" height="100%">
-                     <BarChart data={data}>
-                        <Bar
-                           dataKey="subscription"
-                           style={
-                              {
-                                 'fill': 'var(--theme-primary)',
-                                 'opacity': 1,
-                                 '--theme-primary': `hsl(${
-                        baseColor?.cssVars[mode === 'dark' ? 'dark' : 'light']
-                          .primary
-                      })`,
-                              } as React.CSSProperties
-                           }
-                        />
-                     </BarChart>
-                  </ResponsiveContainer>
-               </div>
-            </CardContent>
-         </Card>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/cards/team-members.tsx b/apps/web/registry/miami/example/cards/team-members.tsx
deleted file mode 100644
index 6f626145..00000000
--- a/apps/web/registry/miami/example/cards/team-members.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-'use client'
-
-import { ChevronDownIcon } from '@radix-ui/react-icons'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/miami/ui/command'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-
-export function CardsTeamMembers() {
-   return (
-      <Card>
-         <CardHeader>
-            <CardTitle>Team Members</CardTitle>
-            <CardDescription>
-               Invite your team members to collaborate.
-            </CardDescription>
-         </CardHeader>
-         <CardContent className="grid gap-6">
-            <div className="flex items-center justify-between space-x-4">
-               <div className="flex items-center space-x-4">
-                  <Avatar className="size-8">
-                     <AvatarImage src="/avatars/01.png" alt="Image" />
-                     <AvatarFallback>OM</AvatarFallback>
-                  </Avatar>
-                  <div>
-                     <p className="text-sm font-medium leading-none">Sofia Davis</p>
-                     <p className="text-muted-foreground text-sm">m@example.com</p>
-                  </div>
-               </div>
-               <Popover>
-                  <PopoverTrigger asChild>
-                     <Button variant="outline" size="sm" className="ml-auto">
-                        Owner
-                        {' '}
-                        <ChevronDownIcon className="text-muted-foreground ml-2 size-4" />
-                     </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="p-0" align="end">
-                     <Command>
-                        <CommandInput placeholder="Select new role..." />
-                        <CommandList>
-                           <CommandEmpty>No roles found.</CommandEmpty>
-                           <CommandGroup>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Viewer</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view and comment.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Developer</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view, comment and edit.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Billing</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view, comment and manage billing.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Owner</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Admin-level access to all resources.
-                                 </p>
-                              </CommandItem>
-                           </CommandGroup>
-                        </CommandList>
-                     </Command>
-                  </PopoverContent>
-               </Popover>
-            </div>
-            <div className="flex items-center justify-between space-x-4">
-               <div className="flex items-center space-x-4">
-                  <Avatar className="size-8">
-                     <AvatarImage src="/avatars/02.png" alt="Image" />
-                     <AvatarFallback>JL</AvatarFallback>
-                  </Avatar>
-                  <div>
-                     <p className="text-sm font-medium leading-none">Jackson Lee</p>
-                     <p className="text-muted-foreground text-sm">p@example.com</p>
-                  </div>
-               </div>
-               <Popover>
-                  <PopoverTrigger asChild>
-                     <Button variant="outline" size="sm" className="ml-auto">
-                        Member
-                        {' '}
-                        <ChevronDownIcon className="text-muted-foreground ml-2 size-4" />
-                     </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="p-0" align="end">
-                     <Command>
-                        <CommandInput placeholder="Select new role..." />
-                        <CommandList>
-                           <CommandEmpty>No roles found.</CommandEmpty>
-                           <CommandGroup className="p-1.5">
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Viewer</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view and comment.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Developer</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view, comment and edit.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Billing</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view, comment and manage billing.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Owner</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Admin-level access to all resources.
-                                 </p>
-                              </CommandItem>
-                           </CommandGroup>
-                        </CommandList>
-                     </Command>
-                  </PopoverContent>
-               </Popover>
-            </div>
-            <div className="flex items-center justify-between space-x-4">
-               <div className="flex items-center space-x-4">
-                  <Avatar className="size-8">
-                     <AvatarImage src="/avatars/03.png" alt="Image" />
-                     <AvatarFallback>IN</AvatarFallback>
-                  </Avatar>
-                  <div>
-                     <p className="text-sm font-medium leading-none">
-                        Isabella Nguyen
-                     </p>
-                     <p className="text-muted-foreground text-sm">i@example.com</p>
-                  </div>
-               </div>
-               <Popover>
-                  <PopoverTrigger asChild>
-                     <Button variant="outline" size="sm" className="ml-auto">
-                        Member
-                        {' '}
-                        <ChevronDownIcon className="text-muted-foreground ml-2 size-4" />
-                     </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="p-0" align="end">
-                     <Command>
-                        <CommandInput placeholder="Select new role..." />
-                        <CommandList>
-                           <CommandEmpty>No roles found.</CommandEmpty>
-                           <CommandGroup className="p-1.5">
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Viewer</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view and comment.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Developer</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view, comment and edit.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Billing</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Can view, comment and manage billing.
-                                 </p>
-                              </CommandItem>
-                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                 <p>Owner</p>
-                                 <p className="text-muted-foreground text-sm">
-                                    Admin-level access to all resources.
-                                 </p>
-                              </CommandItem>
-                           </CommandGroup>
-                        </CommandList>
-                     </Command>
-                  </PopoverContent>
-               </Popover>
-            </div>
-         </CardContent>
-      </Card>
-   )
-}
diff --git a/apps/web/registry/miami/example/carousel-api.tsx b/apps/web/registry/miami/example/carousel-api.tsx
deleted file mode 100644
index 30284421..00000000
--- a/apps/web/registry/miami/example/carousel-api.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/miami/ui/card'
-import {
-   Carousel,
-   type CarouselApi,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/miami/ui/carousel'
-
-export default function CarouselDApiDemo() {
-   const [api, setApi] = React.useState<CarouselApi>()
-   const [current, setCurrent] = React.useState(0)
-   const [count, setCount] = React.useState(0)
-
-   React.useEffect(() => {
-      if (!api)
-         return
-
-      setCount(api.scrollSnapList().length)
-      setCurrent(api.selectedScrollSnap() + 1)
-
-      api.on('select', () => {
-         setCurrent(api.selectedScrollSnap() + 1)
-      })
-   }, [api])
-
-   return (
-      <div>
-         <Carousel setApi={setApi} className="w-full max-w-xs">
-            <CarouselContent>
-               {Array.from({ length: 5 }).map((_, index) => (
-                  <CarouselItem key={index}>
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-4xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </CarouselItem>
-               ))}
-            </CarouselContent>
-            <CarouselPrevious />
-            <CarouselNext />
-         </Carousel>
-         <div className="text-muted-foreground py-2 text-center text-sm">
-            Slide
-            {' '}
-            {current}
-            {' '}
-            of
-            {count}
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/carousel-demo.tsx b/apps/web/registry/miami/example/carousel-demo.tsx
deleted file mode 100644
index f6dbd128..00000000
--- a/apps/web/registry/miami/example/carousel-demo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/miami/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/miami/ui/carousel'
-
-export default function CarouselDemo() {
-   return (
-      <Carousel className="w-full max-w-xs">
-         <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index}>
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-4xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/miami/example/carousel-dots.tsx b/apps/web/registry/miami/example/carousel-dots.tsx
deleted file mode 100644
index 71e080e4..00000000
--- a/apps/web/registry/miami/example/carousel-dots.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/miami/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselDots,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/miami/ui/carousel'
-
-export default function CarouselSize() {
-   return (
-      <Carousel
-         opts={{
-            align: 'start',
-         }}
-         className="w-full max-w-sm"
-      >
-         <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-3xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselDots />
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/miami/example/carousel-orientation.tsx b/apps/web/registry/miami/example/carousel-orientation.tsx
deleted file mode 100644
index 96669a4b..00000000
--- a/apps/web/registry/miami/example/carousel-orientation.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/miami/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/miami/ui/carousel'
-
-export default function CarouselOrientation() {
-   return (
-      <Carousel
-         opts={{
-            align: 'start',
-         }}
-         orientation="vertical"
-         className="w-full max-w-xs"
-      >
-         <CarouselContent className="-mt-1 h-[200px]">
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index} className="pt-1 md:basis-1/2">
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex items-center justify-center p-6">
-                           <span className="text-3xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/miami/example/carousel-plugin.tsx b/apps/web/registry/miami/example/carousel-plugin.tsx
deleted file mode 100644
index 2d8812ef..00000000
--- a/apps/web/registry/miami/example/carousel-plugin.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react'
-import Autoplay from 'embla-carousel-autoplay'
-
-import { Card, CardContent } from '~/registry/miami/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/miami/ui/carousel'
-
-export default function CarouselPlugin() {
-   const plugin = React.useRef(
-      Autoplay({ delay: 2000, stopOnInteraction: true }),
-   )
-
-   return (
-      <Carousel
-         plugins={[plugin.current]}
-         className="w-full max-w-xs"
-         onMouseEnter={plugin.current.stop}
-         onMouseLeave={plugin.current.reset}
-      >
-         <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index}>
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-4xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/miami/example/carousel-size.tsx b/apps/web/registry/miami/example/carousel-size.tsx
deleted file mode 100644
index 3eaed0e4..00000000
--- a/apps/web/registry/miami/example/carousel-size.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/miami/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/miami/ui/carousel'
-
-export default function CarouselSize() {
-   return (
-      <Carousel
-         opts={{
-            align: 'start',
-         }}
-         className="w-full max-w-sm"
-      >
-         <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-3xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/miami/example/carousel-spacing.tsx b/apps/web/registry/miami/example/carousel-spacing.tsx
deleted file mode 100644
index 3acfe367..00000000
--- a/apps/web/registry/miami/example/carousel-spacing.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react'
-
-import { Card, CardContent } from '~/registry/miami/ui/card'
-import {
-   Carousel,
-   CarouselContent,
-   CarouselItem,
-   CarouselNext,
-   CarouselPrevious,
-} from '~/registry/miami/ui/carousel'
-
-export default function CarouselSpacing() {
-   return (
-      <Carousel className="w-full max-w-sm">
-         <CarouselContent className="-ml-1">
-            {Array.from({ length: 5 }).map((_, index) => (
-               <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
-                  <div className="p-1">
-                     <Card>
-                        <CardContent className="flex aspect-square items-center justify-center p-6">
-                           <span className="text-2xl font-semibold">{index + 1}</span>
-                        </CardContent>
-                     </Card>
-                  </div>
-               </CarouselItem>
-            ))}
-         </CarouselContent>
-         <CarouselPrevious />
-         <CarouselNext />
-      </Carousel>
-   )
-}
diff --git a/apps/web/registry/miami/example/chart-bar-demo-axis.tsx b/apps/web/registry/miami/example/chart-bar-demo-axis.tsx
deleted file mode 100644
index f476ac61..00000000
--- a/apps/web/registry/miami/example/chart-bar-demo-axis.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client'
-
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import type { ChartConfig } from '~/registry/miami/ui/chart'
-import { ChartContainer } from '~/registry/miami/ui/chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: '#2563eb',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: '#60a5fa',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-         <BarChart accessibilityLayer data={chartData}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-               dataKey="month"
-               tickLine={false}
-               tickMargin={10}
-               axisLine={false}
-               tickFormatter={value => value.slice(0, 3)}
-            />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-         </BarChart>
-      </ChartContainer>
-   )
-}
diff --git a/apps/web/registry/miami/example/chart-bar-demo-grid.tsx b/apps/web/registry/miami/example/chart-bar-demo-grid.tsx
deleted file mode 100644
index 6c63da41..00000000
--- a/apps/web/registry/miami/example/chart-bar-demo-grid.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import { Bar, BarChart, CartesianGrid } from 'recharts'
-
-import type { ChartConfig } from '~/registry/miami/ui/chart'
-import { ChartContainer } from '~/registry/miami/ui/chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: '#2563eb',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: '#60a5fa',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-         <BarChart accessibilityLayer data={chartData}>
-            <CartesianGrid vertical={false} />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-         </BarChart>
-      </ChartContainer>
-   )
-}
diff --git a/apps/web/registry/miami/example/chart-bar-demo-legend.tsx b/apps/web/registry/miami/example/chart-bar-demo-legend.tsx
deleted file mode 100644
index c9282bcc..00000000
--- a/apps/web/registry/miami/example/chart-bar-demo-legend.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client'
-
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartLegend,
-   ChartLegendContent,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: '#2563eb',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: '#60a5fa',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-         <BarChart accessibilityLayer data={chartData}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-               dataKey="month"
-               tickLine={false}
-               tickMargin={10}
-               axisLine={false}
-               tickFormatter={value => value.slice(0, 3)}
-            />
-            <ChartTooltip content={<ChartTooltipContent />} />
-            <ChartLegend content={<ChartLegendContent />} />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-         </BarChart>
-      </ChartContainer>
-   )
-}
diff --git a/apps/web/registry/miami/example/chart-bar-demo-tooltip.tsx b/apps/web/registry/miami/example/chart-bar-demo-tooltip.tsx
deleted file mode 100644
index 5e92f290..00000000
--- a/apps/web/registry/miami/example/chart-bar-demo-tooltip.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-'use client'
-
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import type {
-   ChartConfig,
-} from '~/registry/miami/ui/chart'
-import {
-   ChartContainer,
-   ChartTooltip,
-   ChartTooltipContent,
-} from '~/registry/miami/ui/chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: '#2563eb',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: '#60a5fa',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-         <BarChart accessibilityLayer data={chartData}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-               dataKey="month"
-               tickLine={false}
-               tickMargin={10}
-               axisLine={false}
-               tickFormatter={value => value.slice(0, 3)}
-            />
-            <ChartTooltip content={<ChartTooltipContent />} />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-         </BarChart>
-      </ChartContainer>
-   )
-}
diff --git a/apps/web/registry/miami/example/chart-bar-demo.tsx b/apps/web/registry/miami/example/chart-bar-demo.tsx
deleted file mode 100644
index 48f6ac1b..00000000
--- a/apps/web/registry/miami/example/chart-bar-demo.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client'
-
-import { Bar, BarChart } from 'recharts'
-
-import type { ChartConfig } from '~/registry/miami/ui/chart'
-import { ChartContainer } from '~/registry/miami/ui/chart'
-
-const chartData = [
-   { month: 'January', desktop: 186, mobile: 80 },
-   { month: 'February', desktop: 305, mobile: 200 },
-   { month: 'March', desktop: 237, mobile: 120 },
-   { month: 'April', desktop: 73, mobile: 190 },
-   { month: 'May', desktop: 209, mobile: 130 },
-   { month: 'June', desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-   desktop: {
-      label: 'Desktop',
-      color: '#2563eb',
-   },
-   mobile: {
-      label: 'Mobile',
-      color: '#60a5fa',
-   },
-} satisfies ChartConfig
-
-export default function Component() {
-   return (
-      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-         <BarChart accessibilityLayer data={chartData}>
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-         </BarChart>
-      </ChartContainer>
-   )
-}
diff --git a/apps/web/registry/miami/example/chart-tooltip-demo.tsx b/apps/web/registry/miami/example/chart-tooltip-demo.tsx
deleted file mode 100644
index 94efb61d..00000000
--- a/apps/web/registry/miami/example/chart-tooltip-demo.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { ny } from '~/lib/utils'
-
-export default function Component() {
-   return (
-      <div className="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
-         <div>
-            <div className="absolute left-[-35px] top-[45px] z-10 text-sm font-medium">
-               Label
-            </div>
-            <svg
-               xmlns="http://www.w3.org/2000/svg"
-               viewBox="0 0 193 40"
-               width="50"
-               height="12"
-               fill="none"
-               className="absolute left-[5px] top-[50px] z-10"
-            >
-               <g clip-path="url(#a)">
-                  <path
-                     fill="currentColor"
-                     d="M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z"
-                  />
-               </g>
-               <defs>
-                  <clipPath id="a">
-                     <path fill="currentColor" d="M0 0h193v40H0z" />
-                  </clipPath>
-               </defs>
-            </svg>
-            <TooltipDemo
-               label="Page Views"
-               payload={[
-                  { name: 'Desktop', value: 186, fill: 'hsl(var(--chart-1))' },
-                  { name: 'Mobile', value: 80, fill: 'hsl(var(--chart-2))' },
-               ]}
-               className="w-32"
-            />
-         </div>
-         <div className="items-end">
-            <div className="absolute left-[122px] top-0 z-10 text-sm font-medium">
-               Name
-            </div>
-            <svg
-               xmlns="http://www.w3.org/2000/svg"
-               width="35"
-               height="42"
-               fill="none"
-               viewBox="0 0 122 148"
-               className="absolute left-[85px] top-[10px] z-10 -scale-x-100"
-            >
-               <g clip-path="url(#ab)">
-                  <path
-                     fill="currentColor"
-                     d="M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z"
-                  />
-               </g>
-               <defs>
-                  <clipPath id="ab">
-                     <path fill="currentColor" d="M0 0h122v148H0z" />
-                  </clipPath>
-               </defs>
-            </svg>
-            <TooltipDemo
-               label="Browser"
-               hideLabel
-               payload={[
-                  { name: 'Chrome', value: 1286, fill: 'hsl(var(--chart-3))' },
-                  { name: 'Firefox', value: 1000, fill: 'hsl(var(--chart-4))' },
-               ]}
-               indicator="dashed"
-               className="w-32"
-            />
-         </div>
-         <div className="!hidden md:!flex">
-            <TooltipDemo
-               label="Page Views"
-               payload={[
-                  { name: 'Desktop', value: 12486, fill: 'hsl(var(--chart-3))' },
-               ]}
-               className="w-36"
-               indicator="line"
-            />
-         </div>
-         <div className="!items-start !justify-start">
-            <div className="absolute left-[50px] top-[60px] z-10 text-sm font-medium">
-               Indicator
-            </div>
-            <TooltipDemo
-               label="Browser"
-               hideLabel
-               payload={[
-                  { name: 'Chrome', value: 1286, fill: 'hsl(var(--chart-1))' },
-               ]}
-               indicator="dot"
-               className="w-32"
-            />
-            <svg
-               xmlns="http://www.w3.org/2000/svg"
-               width="15"
-               height="34"
-               fill="none"
-               viewBox="0 0 75 175"
-               className="absolute left-[30px] top-[38px] z-10 rotate-[-40deg]"
-            >
-               <g clip-path="url(#abc)">
-                  <path
-                     fill="currentColor"
-                     d="M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z"
-                  />
-               </g>
-               <defs>
-                  <clipPath id="abc">
-                     <path fill="currentColor" d="M0 0h75v175H0z" />
-                  </clipPath>
-               </defs>
-            </svg>
-         </div>
-      </div>
-   )
-}
-
-function TooltipDemo({
-   indicator = 'dot',
-   label,
-   payload,
-   hideLabel,
-   hideIndicator,
-   className,
-}: {
-   label: string
-   hideLabel?: boolean
-   hideIndicator?: boolean
-   indicator?: 'line' | 'dot' | 'dashed'
-   payload: {
-      name: string
-      value: number
-      fill: string
-   }[]
-   nameKey?: string
-   labelKey?: string
-} & React.ComponentProps<'div'>) {
-   const tooltipLabel = hideLabel
-      ? null
-      : (
-            <div className="font-medium">{label}</div>
-         )
-
-   if (!payload?.length) {
-      return null
-   }
-
-   const nestLabel = payload.length === 1 && indicator !== 'dot'
-
-   return (
-      <div
-         className={ny(
-            'border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5',
-            className,
-         )}
-      >
-         {!nestLabel ? tooltipLabel : null}
-         <div className="grid gap-1.5">
-            {payload.map((item, index) => {
-               const indicatorColor = item.fill
-
-               return (
-                  <div
-                     key={index}
-                     className={ny(
-                        '[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5',
-                        indicator === 'dot' && 'items-center',
-                     )}
-                  >
-                     <>
-                        {!hideIndicator && (
-                           <div
-                              className={ny(
-                                 'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
-                                 {
-                                    'h-2.5 w-2.5': indicator === 'dot',
-                                    'w-1': indicator === 'line',
-                                    'w-0 border-[1.5px] border-dashed bg-transparent':
-                          indicator === 'dashed',
-                                    'my-0.5': nestLabel && indicator === 'dashed',
-                                 },
-                              )}
-                              style={
-                                 {
-                                    '--color-bg': indicatorColor,
-                                    '--color-border': indicatorColor,
-                                 } as React.CSSProperties
-                              }
-                           />
-                        )}
-                        <div
-                           className={ny(
-                              'flex flex-1 justify-between leading-none',
-                              nestLabel ? 'items-end' : 'items-center',
-                           )}
-                        >
-                           <div className="grid gap-1.5">
-                              {nestLabel ? tooltipLabel : null}
-                              <span className="text-muted-foreground">{item.name}</span>
-                           </div>
-                           <span className="text-foreground font-mono font-medium tabular-nums">
-                              {item.value.toLocaleString()}
-                           </span>
-                        </div>
-                     </>
-                  </div>
-               )
-            })}
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/checkbox-demo.tsx b/apps/web/registry/miami/example/checkbox-demo.tsx
deleted file mode 100644
index 12de9811..00000000
--- a/apps/web/registry/miami/example/checkbox-demo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client'
-
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-
-export default function CheckboxDemo() {
-   return (
-      <div className="flex items-center space-x-2">
-         <Checkbox id="terms" />
-         <label
-            htmlFor="terms"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-         >
-            Accept terms and conditions
-         </label>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/checkbox-disabled.tsx b/apps/web/registry/miami/example/checkbox-disabled.tsx
deleted file mode 100644
index f08787d1..00000000
--- a/apps/web/registry/miami/example/checkbox-disabled.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-
-export default function CheckboxDisabled() {
-   return (
-      <div className="flex items-center space-x-2">
-         <Checkbox id="terms2" disabled />
-         <label
-            htmlFor="terms2"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-         >
-            Accept terms and conditions
-         </label>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/checkbox-form-multiple.tsx b/apps/web/registry/miami/example/checkbox-form-multiple.tsx
deleted file mode 100644
index 09d91833..00000000
--- a/apps/web/registry/miami/example/checkbox-form-multiple.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/miami/ui/button'
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/miami/ui/form'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const items = [
-   {
-      id: 'recents',
-      label: 'Recents',
-   },
-   {
-      id: 'home',
-      label: 'Home',
-   },
-   {
-      id: 'applications',
-      label: 'Applications',
-   },
-   {
-      id: 'desktop',
-      label: 'Desktop',
-   },
-   {
-      id: 'downloads',
-      label: 'Downloads',
-   },
-   {
-      id: 'documents',
-      label: 'Documents',
-   },
-] as const
-
-const FormSchema = z.object({
-   items: z.array(z.string()).refine(value => value.some(item => item), {
-      message: 'You have to select at least one item.',
-   }),
-})
-
-export default function CheckboxReactHookFormMultiple() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-      defaultValues: {
-         items: ['recents', 'home'],
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-            <FormField
-               control={form.control}
-               name="items"
-               render={() => (
-                  <FormItem>
-                     <div className="mb-4">
-                        <FormLabel className="text-base">Sidebar</FormLabel>
-                        <FormDescription>
-                           Select the items you want to display in the sidebar.
-                        </FormDescription>
-                     </div>
-                     {items.map(item => (
-                        <FormField
-                           key={item.id}
-                           control={form.control}
-                           name="items"
-                           render={({ field }) => {
-                              return (
-                                 <FormItem
-                                    key={item.id}
-                                    className="flex flex-row items-start space-x-3 space-y-0"
-                                 >
-                                    <FormControl>
-                                       <Checkbox
-                                          checked={field.value?.includes(item.id)}
-                                          onCheckedChange={(checked) => {
-                                             return checked
-                                                ? field.onChange([...field.value, item.id])
-                                                : field.onChange(
-                                                   field.value?.filter(
-                                                      value => value !== item.id,
-                                                   ),
-                                                )
-                                          }}
-                                       />
-                                    </FormControl>
-                                    <FormLabel className="text-sm font-normal">
-                                       {item.label}
-                                    </FormLabel>
-                                 </FormItem>
-                              )
-                           }}
-                        />
-                     ))}
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/checkbox-form-single.tsx b/apps/web/registry/miami/example/checkbox-form-single.tsx
deleted file mode 100644
index 4f72e1b0..00000000
--- a/apps/web/registry/miami/example/checkbox-form-single.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/miami/ui/button'
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-} from '~/registry/miami/ui/form'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const FormSchema = z.object({
-   mobile: z.boolean().default(false).optional(),
-})
-
-export default function CheckboxReactHookFormSingle() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-      defaultValues: {
-         mobile: true,
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <FormField
-               control={form.control}
-               name="mobile"
-               render={({ field }) => (
-                  <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow">
-                     <FormControl>
-                        <Checkbox
-                           checked={field.value}
-                           onCheckedChange={field.onChange}
-                        />
-                     </FormControl>
-                     <div className="space-y-1 leading-none">
-                        <FormLabel>
-                           Use different settings for my mobile devices
-                        </FormLabel>
-                        <FormDescription>
-                           You can manage your mobile notifications in the
-                           {' '}
-                           <Link href="/examples/forms">mobile settings</Link>
-                           {' '}
-                           page.
-                        </FormDescription>
-                     </div>
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/checkbox-with-text.tsx b/apps/web/registry/miami/example/checkbox-with-text.tsx
deleted file mode 100644
index 4e04213a..00000000
--- a/apps/web/registry/miami/example/checkbox-with-text.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-
-export default function CheckboxWithText() {
-   return (
-      <div className="items-top flex space-x-2">
-         <Checkbox id="terms1" />
-         <div className="grid gap-1.5 leading-none">
-            <label
-               htmlFor="terms1"
-               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-               Accept terms and conditions
-            </label>
-            <p className="text-muted-foreground text-sm">
-               You agree to our Terms of Service and Privacy Policy.
-            </p>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/collapsible-demo.tsx b/apps/web/registry/miami/example/collapsible-demo.tsx
deleted file mode 100644
index ec773b9e..00000000
--- a/apps/web/registry/miami/example/collapsible-demo.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { CaretSortIcon } from '@radix-ui/react-icons'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Collapsible,
-   CollapsibleContent,
-   CollapsibleTrigger,
-} from '~/registry/miami/ui/collapsible'
-
-export default function CollapsibleDemo() {
-   const [isOpen, setIsOpen] = React.useState(false)
-
-   return (
-      <Collapsible
-         open={isOpen}
-         onOpenChange={setIsOpen}
-         className="w-[350px] space-y-2"
-      >
-         <div className="flex items-center justify-between space-x-4 px-4">
-            <h4 className="text-sm font-semibold">
-               @peduarte starred 3 repositories
-            </h4>
-            <CollapsibleTrigger asChild>
-               <Button variant="ghost" size="sm">
-                  <CaretSortIcon className="size-4" />
-                  <span className="sr-only">Toggle</span>
-               </Button>
-            </CollapsibleTrigger>
-         </div>
-         <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-            @radix-ui/primitives
-         </div>
-         <CollapsibleContent className="space-y-2">
-            <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-               @radix-ui/colors
-            </div>
-            <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-               @stitches/react
-            </div>
-         </CollapsibleContent>
-      </Collapsible>
-   )
-}
diff --git a/apps/web/registry/miami/example/combobox-demo.tsx b/apps/web/registry/miami/example/combobox-demo.tsx
deleted file mode 100644
index 6c88144a..00000000
--- a/apps/web/registry/miami/example/combobox-demo.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Check, ChevronsUpDown } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/miami/ui/command'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-
-const frameworks = [
-   {
-      value: 'next.js',
-      label: 'Next.js',
-   },
-   {
-      value: 'sveltekit',
-      label: 'SvelteKit',
-   },
-   {
-      value: 'nuxt.js',
-      label: 'Nuxt.js',
-   },
-   {
-      value: 'remix',
-      label: 'Remix',
-   },
-   {
-      value: 'astro',
-      label: 'Astro',
-   },
-]
-
-export default function ComboboxDemo() {
-   const [open, setOpen] = React.useState(false)
-   const [value, setValue] = React.useState('')
-
-   return (
-      <Popover open={open} onOpenChange={setOpen}>
-         <PopoverTrigger asChild>
-            <Button
-               variant="outline"
-               role="combobox"
-               aria-expanded={open}
-               className="w-[200px] justify-between"
-            >
-               {value
-                  ? frameworks.find(framework => framework.value === value)?.label
-                  : 'Select framework...'}
-               <ChevronsUpDown className="opacity-50" />
-            </Button>
-         </PopoverTrigger>
-         <PopoverContent className="w-[200px] p-0">
-            <Command>
-               <CommandInput placeholder="Search framework..." className="h-9" />
-               <CommandList>
-                  <CommandEmpty>No framework found.</CommandEmpty>
-                  <CommandGroup>
-                     {frameworks.map(framework => (
-                        <CommandItem
-                           key={framework.value}
-                           value={framework.value}
-                           onSelect={(currentValue) => {
-                              setValue(currentValue === value ? '' : currentValue)
-                              setOpen(false)
-                           }}
-                        >
-                           {framework.label}
-                           <Check
-                              className={ny(
-                                 'ml-auto',
-                                 value === framework.value ? 'opacity-100' : 'opacity-0',
-                              )}
-                           />
-                        </CommandItem>
-                     ))}
-                  </CommandGroup>
-               </CommandList>
-            </Command>
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/miami/example/combobox-dropdown-menu.tsx b/apps/web/registry/miami/example/combobox-dropdown-menu.tsx
deleted file mode 100644
index a08ce59d..00000000
--- a/apps/web/registry/miami/example/combobox-dropdown-menu.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { MoreHorizontal } from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/miami/ui/command'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuSub,
-   DropdownMenuSubContent,
-   DropdownMenuSubTrigger,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-
-const labels = [
-   'feature',
-   'bug',
-   'enhancement',
-   'documentation',
-   'design',
-   'question',
-   'maintenance',
-]
-
-export default function ComboboxDropdownMenu() {
-   const [label, setLabel] = React.useState('feature')
-   const [open, setOpen] = React.useState(false)
-
-   return (
-      <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
-         <p className="text-sm font-medium leading-none">
-            <span className="bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs">
-               {label}
-            </span>
-            <span className="text-muted-foreground">Create a new project</span>
-         </p>
-         <DropdownMenu open={open} onOpenChange={setOpen}>
-            <DropdownMenuTrigger asChild>
-               <Button variant="ghost" size="sm">
-                  <MoreHorizontal />
-               </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-[200px]">
-               <DropdownMenuLabel>Actions</DropdownMenuLabel>
-               <DropdownMenuGroup>
-                  <DropdownMenuItem>Assign to...</DropdownMenuItem>
-                  <DropdownMenuItem>Set due date...</DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuSub>
-                     <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>
-                     <DropdownMenuSubContent className="p-0">
-                        <Command>
-                           <CommandInput
-                              placeholder="Filter label..."
-                              autoFocus
-                              className="h-9"
-                           />
-                           <CommandList>
-                              <CommandEmpty>No label found.</CommandEmpty>
-                              <CommandGroup>
-                                 {labels.map(label => (
-                                    <CommandItem
-                                       key={label}
-                                       value={label}
-                                       onSelect={(value) => {
-                                          setLabel(value)
-                                          setOpen(false)
-                                       }}
-                                    >
-                                       {label}
-                                    </CommandItem>
-                                 ))}
-                              </CommandGroup>
-                           </CommandList>
-                        </Command>
-                     </DropdownMenuSubContent>
-                  </DropdownMenuSub>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="text-red-600">
-                     Delete
-                     <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-               </DropdownMenuGroup>
-            </DropdownMenuContent>
-         </DropdownMenu>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/combobox-form.tsx b/apps/web/registry/miami/example/combobox-form.tsx
deleted file mode 100644
index 374e1759..00000000
--- a/apps/web/registry/miami/example/combobox-form.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { Check, ChevronsUpDown } from 'lucide-react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { ny } from '~/lib/utils'
-import { toast } from '~/registry/miami/hooks/use-toast'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/miami/ui/command'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/miami/ui/form'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-
-const languages = [
-   { label: 'English', value: 'en' },
-   { label: 'French', value: 'fr' },
-   { label: 'German', value: 'de' },
-   { label: 'Spanish', value: 'es' },
-   { label: 'Portuguese', value: 'pt' },
-   { label: 'Russian', value: 'ru' },
-   { label: 'Japanese', value: 'ja' },
-   { label: 'Korean', value: 'ko' },
-   { label: 'Chinese', value: 'zh' },
-] as const
-
-const FormSchema = z.object({
-   language: z.string({
-      required_error: 'Please select a language.',
-   }),
-})
-
-export default function ComboboxForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <FormField
-               control={form.control}
-               name="language"
-               render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                     <FormLabel>Language</FormLabel>
-                     <Popover>
-                        <PopoverTrigger asChild>
-                           <FormControl>
-                              <Button
-                                 variant="outline"
-                                 role="combobox"
-                                 className={ny(
-                                    'w-[200px] justify-between',
-                                    !field.value && 'text-muted-foreground',
-                                 )}
-                              >
-                                 {field.value
-                                    ? languages.find(
-                                       language => language.value === field.value,
-                                    )?.label
-                                    : 'Select language'}
-                                 <ChevronsUpDown className="opacity-50" />
-                              </Button>
-                           </FormControl>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-[200px] p-0">
-                           <Command>
-                              <CommandInput
-                                 placeholder="Search framework..."
-                                 className="h-9"
-                              />
-                              <CommandList>
-                                 <CommandEmpty>No framework found.</CommandEmpty>
-                                 <CommandGroup>
-                                    {languages.map(language => (
-                                       <CommandItem
-                                          value={language.label}
-                                          key={language.value}
-                                          onSelect={() => {
-                                             form.setValue('language', language.value)
-                                          }}
-                                       >
-                                          {language.label}
-                                          <Check
-                                             className={ny(
-                                                'ml-auto',
-                                                language.value === field.value
-                                                   ? 'opacity-100'
-                                                   : 'opacity-0',
-                                             )}
-                                          />
-                                       </CommandItem>
-                                    ))}
-                                 </CommandGroup>
-                              </CommandList>
-                           </Command>
-                        </PopoverContent>
-                     </Popover>
-                     <FormDescription>
-                        This is the language that will be used in the dashboard.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/combobox-popover.tsx b/apps/web/registry/miami/example/combobox-popover.tsx
deleted file mode 100644
index 7dd11759..00000000
--- a/apps/web/registry/miami/example/combobox-popover.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/miami/ui/command'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-
-interface Status {
-   value: string
-   label: string
-}
-
-const statuses: Status[] = [
-   {
-      value: 'backlog',
-      label: 'Backlog',
-   },
-   {
-      value: 'todo',
-      label: 'Todo',
-   },
-   {
-      value: 'in progress',
-      label: 'In Progress',
-   },
-   {
-      value: 'done',
-      label: 'Done',
-   },
-   {
-      value: 'canceled',
-      label: 'Canceled',
-   },
-]
-
-export default function ComboboxPopover() {
-   const [open, setOpen] = React.useState(false)
-   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
-      null,
-   )
-
-   return (
-      <div className="flex items-center space-x-4">
-         <p className="text-muted-foreground text-sm">Status</p>
-         <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-               <Button variant="outline" className="w-[150px] justify-start">
-                  {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
-               </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0" side="right" align="start">
-               <Command>
-                  <CommandInput placeholder="Change status..." />
-                  <CommandList>
-                     <CommandEmpty>No results found.</CommandEmpty>
-                     <CommandGroup>
-                        {statuses.map(status => (
-                           <CommandItem
-                              key={status.value}
-                              value={status.value}
-                              onSelect={(value) => {
-                                 setSelectedStatus(
-                                    statuses.find(priority => priority.value === value)
-                                    || null,
-                                 )
-                                 setOpen(false)
-                              }}
-                           >
-                              {status.label}
-                           </CommandItem>
-                        ))}
-                     </CommandGroup>
-                  </CommandList>
-               </Command>
-            </PopoverContent>
-         </Popover>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/combobox-responsive.tsx b/apps/web/registry/miami/example/combobox-responsive.tsx
deleted file mode 100644
index 8cae1986..00000000
--- a/apps/web/registry/miami/example/combobox-responsive.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { useMediaQuery } from '~/hooks/use-media-query'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-} from '~/registry/miami/ui/command'
-import {
-   Drawer,
-   DrawerContent,
-   DrawerTrigger,
-} from '~/registry/miami/ui/drawer'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-
-interface Status {
-   value: string
-   label: string
-}
-
-const statuses: Status[] = [
-   {
-      value: 'backlog',
-      label: 'Backlog',
-   },
-   {
-      value: 'todo',
-      label: 'Todo',
-   },
-   {
-      value: 'in progress',
-      label: 'In Progress',
-   },
-   {
-      value: 'done',
-      label: 'Done',
-   },
-   {
-      value: 'canceled',
-      label: 'Canceled',
-   },
-]
-
-export default function ComboBoxResponsive() {
-   const [open, setOpen] = React.useState(false)
-   const isDesktop = useMediaQuery('(min-width: 768px)')
-   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
-      null,
-   )
-
-   if (isDesktop) {
-      return (
-         <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-               <Button variant="outline" className="w-[150px] justify-start">
-                  {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
-               </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[200px] p-0" align="start">
-               <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
-            </PopoverContent>
-         </Popover>
-      )
-   }
-
-   return (
-      <Drawer open={open} onOpenChange={setOpen}>
-         <DrawerTrigger asChild>
-            <Button variant="outline" className="w-[150px] justify-start">
-               {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
-            </Button>
-         </DrawerTrigger>
-         <DrawerContent>
-            <div className="mt-4 border-t">
-               <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
-            </div>
-         </DrawerContent>
-      </Drawer>
-   )
-}
-
-function StatusList({
-   setOpen,
-   setSelectedStatus,
-}: {
-   setOpen: (open: boolean) => void
-   setSelectedStatus: (status: Status | null) => void
-}) {
-   return (
-      <Command>
-         <CommandInput placeholder="Filter status..." />
-         <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-               {statuses.map(status => (
-                  <CommandItem
-                     key={status.value}
-                     value={status.value}
-                     onSelect={(value) => {
-                        setSelectedStatus(
-                           statuses.find(priority => priority.value === value) || null,
-                        )
-                        setOpen(false)
-                     }}
-                  >
-                     {status.label}
-                  </CommandItem>
-               ))}
-            </CommandGroup>
-         </CommandList>
-      </Command>
-   )
-}
diff --git a/apps/web/registry/miami/example/command-demo.tsx b/apps/web/registry/miami/example/command-demo.tsx
deleted file mode 100644
index 38c49eb3..00000000
--- a/apps/web/registry/miami/example/command-demo.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
-   CalendarIcon,
-   EnvelopeClosedIcon,
-   FaceIcon,
-   GearIcon,
-   PersonIcon,
-   RocketIcon,
-} from '@radix-ui/react-icons'
-
-import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-   CommandSeparator,
-   CommandShortcut,
-} from '~/registry/miami/ui/command'
-
-export default function CommandDemo() {
-   return (
-      <Command className="rounded-lg border shadow-md">
-         <CommandInput placeholder="Type a command or search..." />
-         <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup heading="Suggestions">
-               <CommandItem>
-                  <CalendarIcon className="mr-2 size-4" />
-                  <span>Calendar</span>
-               </CommandItem>
-               <CommandItem>
-                  <FaceIcon className="mr-2 size-4" />
-                  <span>Search Emoji</span>
-               </CommandItem>
-               <CommandItem>
-                  <RocketIcon className="mr-2 size-4" />
-                  <span>Launch</span>
-               </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Settings">
-               <CommandItem>
-                  <PersonIcon className="mr-2 size-4" />
-                  <span>Profile</span>
-                  <CommandShortcut>⌘P</CommandShortcut>
-               </CommandItem>
-               <CommandItem>
-                  <EnvelopeClosedIcon className="mr-2 size-4" />
-                  <span>Mail</span>
-                  <CommandShortcut>⌘B</CommandShortcut>
-               </CommandItem>
-               <CommandItem>
-                  <GearIcon className="mr-2 size-4" />
-                  <span>Settings</span>
-                  <CommandShortcut>⌘S</CommandShortcut>
-               </CommandItem>
-            </CommandGroup>
-         </CommandList>
-      </Command>
-   )
-}
diff --git a/apps/web/registry/miami/example/command-dialog.tsx b/apps/web/registry/miami/example/command-dialog.tsx
deleted file mode 100644
index f8e7367b..00000000
--- a/apps/web/registry/miami/example/command-dialog.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   CalendarIcon,
-   EnvelopeClosedIcon,
-   FaceIcon,
-   GearIcon,
-   PersonIcon,
-   RocketIcon,
-} from '@radix-ui/react-icons'
-
-import {
-   CommandDialog,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-   CommandSeparator,
-   CommandShortcut,
-} from '~/registry/miami/ui/command'
-
-export default function CommandDialogDemo() {
-   const [open, setOpen] = React.useState(false)
-
-   React.useEffect(() => {
-      const down = (e: KeyboardEvent) => {
-         if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
-            e.preventDefault()
-            setOpen(open => !open)
-         }
-      }
-
-      document.addEventListener('keydown', down)
-      return () => document.removeEventListener('keydown', down)
-   }, [])
-
-   return (
-      <>
-         <p className="text-muted-foreground text-sm">
-            Press
-            {' '}
-            <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100">
-               <span className="text-xs">⌘</span>
-               J
-            </kbd>
-         </p>
-         <CommandDialog open={open} onOpenChange={setOpen}>
-            <CommandInput placeholder="Type a command or search..." />
-            <CommandList>
-               <CommandEmpty>No results found.</CommandEmpty>
-               <CommandGroup heading="Suggestions">
-                  <CommandItem>
-                     <CalendarIcon className="mr-2 size-4" />
-                     <span>Calendar</span>
-                  </CommandItem>
-                  <CommandItem>
-                     <FaceIcon className="mr-2 size-4" />
-                     <span>Search Emoji</span>
-                  </CommandItem>
-                  <CommandItem>
-                     <RocketIcon className="mr-2 size-4" />
-                     <span>Launch</span>
-                  </CommandItem>
-               </CommandGroup>
-               <CommandSeparator />
-               <CommandGroup heading="Settings">
-                  <CommandItem>
-                     <PersonIcon className="mr-2 size-4" />
-                     <span>Profile</span>
-                     <CommandShortcut>⌘P</CommandShortcut>
-                  </CommandItem>
-                  <CommandItem>
-                     <EnvelopeClosedIcon className="mr-2 size-4" />
-                     <span>Mail</span>
-                     <CommandShortcut>⌘B</CommandShortcut>
-                  </CommandItem>
-                  <CommandItem>
-                     <GearIcon className="mr-2 size-4" />
-                     <span>Settings</span>
-                     <CommandShortcut>⌘S</CommandShortcut>
-                  </CommandItem>
-               </CommandGroup>
-            </CommandList>
-         </CommandDialog>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/confetti-basic-cannon.tsx b/apps/web/registry/miami/example/confetti-basic-cannon.tsx
deleted file mode 100644
index c9c96c6a..00000000
--- a/apps/web/registry/miami/example/confetti-basic-cannon.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ConfettiButton } from '~/registry/miami/ui/confetti'
-
-export default function ConfettiButtonDemo() {
-   return (
-      <div className="relative">
-         <ConfettiButton>Confetti 🎉</ConfettiButton>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/confetti-custom-shapes.tsx b/apps/web/registry/miami/example/confetti-custom-shapes.tsx
deleted file mode 100644
index 7d481f5f..00000000
--- a/apps/web/registry/miami/example/confetti-custom-shapes.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import confetti from 'canvas-confetti'
-import { Button } from '~/components/ui/button'
-
-export default function ConfettiCustomShapes() {
-   const handleClick = () => {
-      const scalar = 2
-      const triangle = confetti.shapeFromPath({
-         path: 'M0 10 L5 0 L10 10z',
-      })
-      const square = confetti.shapeFromPath({
-         path: 'M0 0 L10 0 L10 10 L0 10 Z',
-      })
-      const coin = confetti.shapeFromPath({
-         path: 'M5 0 A5 5 0 1 0 5 10 A5 5 0 1 0 5 0 Z',
-      })
-      const tree = confetti.shapeFromPath({
-         path: 'M5 0 L10 10 L0 10 Z',
-      })
-
-      const defaults = {
-         spread: 360,
-         ticks: 60,
-         gravity: 0,
-         decay: 0.96,
-         startVelocity: 20,
-         shapes: [triangle, square, coin, tree],
-         scalar,
-      }
-
-      const shoot = () => {
-         confetti({
-            ...defaults,
-            particleCount: 30,
-         })
-
-         confetti({
-            ...defaults,
-            particleCount: 5,
-         })
-
-         confetti({
-            ...defaults,
-            particleCount: 15,
-            scalar: scalar / 2,
-            shapes: ['circle'],
-         })
-      }
-
-      setTimeout(shoot, 0)
-      setTimeout(shoot, 100)
-      setTimeout(shoot, 200)
-   }
-
-   return (
-      <div className="relative flex items-center justify-center">
-         <Button onClick={handleClick}>Trigger Shapes</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/confetti-demo.tsx b/apps/web/registry/miami/example/confetti-demo.tsx
deleted file mode 100644
index 6fceaf98..00000000
--- a/apps/web/registry/miami/example/confetti-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { useRef } from 'react'
-
-import type { ConfettiRef } from '~/registry/default/ui/confetti'
-import Confetti from '~/registry/default/ui/confetti'
-
-export default function ConfettiDemo() {
-   const confettiRef = useRef<ConfettiRef>(null)
-
-   return (
-      <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Confetti
-         </span>
-
-         <Confetti
-            ref={confettiRef}
-            className="absolute left-0 top-0 z-0 size-full"
-            onMouseEnter={() => {
-               confettiRef.current?.fire({})
-            }}
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/confetti-emoji.tsx b/apps/web/registry/miami/example/confetti-emoji.tsx
deleted file mode 100644
index 6c0d15a3..00000000
--- a/apps/web/registry/miami/example/confetti-emoji.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import confetti from 'canvas-confetti'
-import { Button } from '~/components/ui/button'
-
-export default function ConfettiEmoji() {
-   const handleClick = () => {
-      const scalar = 2
-      const unicorn = confetti.shapeFromText({ text: '🦄', scalar })
-
-      const defaults = {
-         spread: 360,
-         ticks: 60,
-         gravity: 0,
-         decay: 0.96,
-         startVelocity: 20,
-         shapes: [unicorn],
-         scalar,
-      }
-
-      const shoot = () => {
-         confetti({
-            ...defaults,
-            particleCount: 30,
-         })
-
-         confetti({
-            ...defaults,
-            particleCount: 5,
-         })
-
-         confetti({
-            ...defaults,
-            particleCount: 15,
-            scalar: scalar / 2,
-            shapes: ['circle'],
-         })
-      }
-
-      setTimeout(shoot, 0)
-      setTimeout(shoot, 100)
-      setTimeout(shoot, 200)
-   }
-
-   return (
-      <div className="relative justify-center">
-         <Button onClick={handleClick}>Trigger Emoji</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/confetti-fireworks.tsx b/apps/web/registry/miami/example/confetti-fireworks.tsx
deleted file mode 100644
index 40a69d96..00000000
--- a/apps/web/registry/miami/example/confetti-fireworks.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import confetti from 'canvas-confetti'
-import { Button } from '~/components/ui/button'
-
-export default function ConfettiFireworks() {
-   const handleClick = () => {
-      const duration = 5 * 1000
-      const animationEnd = Date.now() + duration
-      const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
-
-      const randomInRange = (min: number, max: number) =>
-         Math.random() * (max - min) + min
-
-      const interval = window.setInterval(() => {
-         const timeLeft = animationEnd - Date.now()
-
-         if (timeLeft <= 0)
-            return clearInterval(interval)
-
-         const particleCount = 50 * (timeLeft / duration)
-         confetti({
-            ...defaults,
-            particleCount,
-            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
-         })
-         confetti({
-            ...defaults,
-            particleCount,
-            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
-         })
-      }, 250)
-   }
-
-   return (
-      <div className="relative">
-         <Button onClick={handleClick}>Trigger Fireworks</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/confetti-hover.tsx b/apps/web/registry/miami/example/confetti-hover.tsx
deleted file mode 100644
index bc38ab83..00000000
--- a/apps/web/registry/miami/example/confetti-hover.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { useRef } from 'react'
-import type { ConfettiRef } from '~/registry/miami/ui/confetti'
-import Confetti from '~/registry/miami/ui/confetti'
-
-export default function ConfettiBasicCannon() {
-   const confettiRef = useRef<ConfettiRef>(null)
-
-   return (
-      <div className="bg-background relative flex h-[500px] w-full max-w-lg flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Confetti
-         </span>
-
-         <Confetti
-            ref={confettiRef}
-            className="absolute left-0 top-0 z-0 size-full"
-            onMouseEnter={() => {
-               confettiRef.current?.fire({})
-            }}
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/confetti-random-direction.tsx b/apps/web/registry/miami/example/confetti-random-direction.tsx
deleted file mode 100644
index ccf9197c..00000000
--- a/apps/web/registry/miami/example/confetti-random-direction.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ConfettiButton } from '~/registry/miami/ui/confetti'
-
-export default function ConfettiButtonDemo() {
-   return (
-      <div className="relative">
-         <ConfettiButton
-            options={{
-               get angle() {
-                  return Math.random() * 360
-               },
-            }}
-         >
-            Random Confetti 🎉
-         </ConfettiButton>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/confetti-side-cannons.tsx b/apps/web/registry/miami/example/confetti-side-cannons.tsx
deleted file mode 100644
index 605b78b6..00000000
--- a/apps/web/registry/miami/example/confetti-side-cannons.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import confetti from 'canvas-confetti'
-import { Button } from '~/components/ui/button'
-
-export default function ConfettiSideCannons() {
-   const handleClick = () => {
-      const end = Date.now() + 3 * 1000 // 3 seconds
-      const colors = ['#a786ff', '#fd8bbc', '#eca184', '#f8deb1']
-
-      const frame = () => {
-         if (Date.now() > end)
-            return
-
-         confetti({
-            particleCount: 2,
-            angle: 60,
-            spread: 55,
-            startVelocity: 60,
-            origin: { x: 0, y: 0.5 },
-            colors,
-         })
-         confetti({
-            particleCount: 2,
-            angle: 120,
-            spread: 55,
-            startVelocity: 60,
-            origin: { x: 1, y: 0.5 },
-            colors,
-         })
-
-         requestAnimationFrame(frame)
-      }
-
-      frame()
-   }
-
-   return (
-      <div className="relative">
-         <Button onClick={handleClick}>Trigger Side Cannons</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/confetti-stars.tsx b/apps/web/registry/miami/example/confetti-stars.tsx
deleted file mode 100644
index 1df82c79..00000000
--- a/apps/web/registry/miami/example/confetti-stars.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import confetti from 'canvas-confetti'
-import { Button } from '~/components/ui/button'
-
-export default function ConfettiStars() {
-   const handleClick = () => {
-      const defaults = {
-         spread: 360,
-         ticks: 50,
-         gravity: 0,
-         decay: 0.94,
-         startVelocity: 30,
-         colors: ['#FFE400', '#FFBD00', '#E89400', '#FFCA6C', '#FDFFB8'],
-      }
-
-      const shoot = () => {
-         confetti({
-            ...defaults,
-            particleCount: 40,
-            scalar: 1.2,
-            shapes: ['star'],
-         })
-
-         confetti({
-            ...defaults,
-            particleCount: 10,
-            scalar: 0.75,
-            shapes: ['circle'],
-         })
-      }
-
-      setTimeout(shoot, 0)
-      setTimeout(shoot, 100)
-      setTimeout(shoot, 200)
-   }
-
-   return (
-      <div className="relative">
-         <Button onClick={handleClick}>Trigger Stars</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/context-menu-demo.tsx b/apps/web/registry/miami/example/context-menu-demo.tsx
deleted file mode 100644
index d48b6df5..00000000
--- a/apps/web/registry/miami/example/context-menu-demo.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-   ContextMenu,
-   ContextMenuCheckboxItem,
-   ContextMenuContent,
-   ContextMenuItem,
-   ContextMenuLabel,
-   ContextMenuRadioGroup,
-   ContextMenuRadioItem,
-   ContextMenuSeparator,
-   ContextMenuShortcut,
-   ContextMenuSub,
-   ContextMenuSubContent,
-   ContextMenuSubTrigger,
-   ContextMenuTrigger,
-} from '~/registry/miami/ui/context-menu'
-
-export default function ContextMenuDemo() {
-   return (
-      <ContextMenu>
-         <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-            Right click here
-         </ContextMenuTrigger>
-         <ContextMenuContent className="w-64">
-            <ContextMenuItem inset>
-               Back
-               <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem inset disabled>
-               Forward
-               <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem inset>
-               Reload
-               <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuSub>
-               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-               <ContextMenuSubContent className="w-48">
-                  <ContextMenuItem>
-                     Save Page As...
-                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-                  </ContextMenuItem>
-                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-                  <ContextMenuItem>Name Window...</ContextMenuItem>
-                  <ContextMenuSeparator />
-                  <ContextMenuItem>Developer Tools</ContextMenuItem>
-               </ContextMenuSubContent>
-            </ContextMenuSub>
-            <ContextMenuSeparator />
-            <ContextMenuCheckboxItem checked>
-               Show Bookmarks Bar
-               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-            </ContextMenuCheckboxItem>
-            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-            <ContextMenuSeparator />
-            <ContextMenuRadioGroup value="pedro">
-               <ContextMenuLabel inset>People</ContextMenuLabel>
-               <ContextMenuSeparator />
-               <ContextMenuRadioItem value="pedro">
-                  Pedro Duarte
-               </ContextMenuRadioItem>
-               <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-            </ContextMenuRadioGroup>
-         </ContextMenuContent>
-      </ContextMenu>
-   )
-}
diff --git a/apps/web/registry/miami/example/cool-mode-custom.tsx b/apps/web/registry/miami/example/cool-mode-custom.tsx
deleted file mode 100644
index cd735a99..00000000
--- a/apps/web/registry/miami/example/cool-mode-custom.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { Button } from '~/components/ui/button'
-import { CoolMode } from '~/registry/miami/ui/cool-mode'
-
-export default function CoolModeCustom() {
-   return (
-      <div className="relative justify-center">
-         <CoolMode
-            options={{
-               particle:
-            'https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg',
-            }}
-         >
-            <Button>Click Me!</Button>
-         </CoolMode>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/cool-mode-demo.tsx b/apps/web/registry/miami/example/cool-mode-demo.tsx
deleted file mode 100644
index 4f99e1cd..00000000
--- a/apps/web/registry/miami/example/cool-mode-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { CoolMode } from '~/registry/miami/ui/cool-mode'
-import { Button } from '~/components/ui/button'
-
-export default function CoolModeDemo() {
-   return (
-      <div className="relative justify-center">
-         <CoolMode>
-            <Button>Click Me!</Button>
-         </CoolMode>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/data-table-demo.tsx b/apps/web/registry/miami/example/data-table-demo.tsx
deleted file mode 100644
index c3769ebf..00000000
--- a/apps/web/registry/miami/example/data-table-demo.tsx
+++ /dev/null
@@ -1,325 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-   CaretSortIcon,
-   ChevronDownIcon,
-   DotsHorizontalIcon,
-} from '@radix-ui/react-icons'
-import type {
-   ColumnDef,
-   ColumnFiltersState,
-   SortingState,
-   VisibilityState,
-} from '@tanstack/react-table'
-import {
-   flexRender,
-   getCoreRowModel,
-   getFilteredRowModel,
-   getPaginationRowModel,
-   getSortedRowModel,
-   useReactTable,
-} from '@tanstack/react-table'
-
-import { Button } from '~/registry/miami/ui/button'
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-import {
-   DropdownMenu,
-   DropdownMenuCheckboxItem,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-import { Input } from '~/registry/miami/ui/input'
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-
-const data: Payment[] = [
-   {
-      id: 'm5gr84i9',
-      amount: 316,
-      status: 'success',
-      email: 'ken99@yahoo.com',
-   },
-   {
-      id: '3u1reuv4',
-      amount: 242,
-      status: 'success',
-      email: 'Abe45@gmail.com',
-   },
-   {
-      id: 'derv1ws0',
-      amount: 837,
-      status: 'processing',
-      email: 'Monserrat44@gmail.com',
-   },
-   {
-      id: '5kma53ae',
-      amount: 874,
-      status: 'success',
-      email: 'Silas22@gmail.com',
-   },
-   {
-      id: 'bhqecj4p',
-      amount: 721,
-      status: 'failed',
-      email: 'carmella@hotmail.com',
-   },
-]
-
-export interface Payment {
-   id: string
-   amount: number
-   status: 'pending' | 'processing' | 'success' | 'failed'
-   email: string
-}
-
-export const columns: ColumnDef<Payment>[] = [
-   {
-      id: 'select',
-      header: ({ table }) => (
-         <Checkbox
-            checked={
-               table.getIsAllPageRowsSelected()
-               || (table.getIsSomePageRowsSelected() && 'indeterminate')
-            }
-            onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-            aria-label="Select all"
-         />
-      ),
-      cell: ({ row }) => (
-         <Checkbox
-            checked={row.getIsSelected()}
-            onCheckedChange={value => row.toggleSelected(!!value)}
-            aria-label="Select row"
-         />
-      ),
-      enableSorting: false,
-      enableHiding: false,
-   },
-   {
-      accessorKey: 'status',
-      header: 'Status',
-      cell: ({ row }) => (
-         <div className="capitalize">{row.getValue('status')}</div>
-      ),
-   },
-   {
-      accessorKey: 'email',
-      header: ({ column }) => {
-         return (
-            <Button
-               variant="ghost"
-               onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            >
-               Email
-               <CaretSortIcon className="ml-2 size-4" />
-            </Button>
-         )
-      },
-      cell: ({ row }) => <div className="lowercase">{row.getValue('email')}</div>,
-   },
-   {
-      accessorKey: 'amount',
-      header: () => <div className="text-right">Amount</div>,
-      cell: ({ row }) => {
-         const amount = Number.parseFloat(row.getValue('amount'))
-
-         // Format the amount as a dollar amount
-         const formatted = new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: 'USD',
-         }).format(amount)
-
-         return <div className="text-right font-medium">{formatted}</div>
-      },
-   },
-   {
-      id: 'actions',
-      enableHiding: false,
-      cell: ({ row }) => {
-         const payment = row.original
-
-         return (
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" className="size-8 p-0">
-                     <span className="sr-only">Open menu</span>
-                     <DotsHorizontalIcon className="size-4" />
-                  </Button>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent align="end">
-                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                  <DropdownMenuItem
-                     onClick={() => navigator.clipboard.writeText(payment.id)}
-                  >
-                     Copy payment ID
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>View customer</DropdownMenuItem>
-                  <DropdownMenuItem>View payment details</DropdownMenuItem>
-               </DropdownMenuContent>
-            </DropdownMenu>
-         )
-      },
-   },
-]
-
-export default function DataTableDemo() {
-   const [sorting, setSorting] = React.useState<SortingState>([])
-   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-      [],
-   )
-   const [columnVisibility, setColumnVisibility]
-    = React.useState<VisibilityState>({})
-   const [rowSelection, setRowSelection] = React.useState({})
-
-   const table = useReactTable({
-      data,
-      columns,
-      onSortingChange: setSorting,
-      onColumnFiltersChange: setColumnFilters,
-      getCoreRowModel: getCoreRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      onColumnVisibilityChange: setColumnVisibility,
-      onRowSelectionChange: setRowSelection,
-      state: {
-         sorting,
-         columnFilters,
-         columnVisibility,
-         rowSelection,
-      },
-   })
-
-   return (
-      <div className="w-full">
-         <div className="flex items-center py-4">
-            <Input
-               placeholder="Filter emails..."
-               value={(table.getColumn('email')?.getFilterValue() as string) ?? ''}
-               onChange={event =>
-                  table.getColumn('email')?.setFilterValue(event.target.value)}
-               className="max-w-sm"
-            />
-            <DropdownMenu>
-               <DropdownMenuTrigger asChild>
-                  <Button variant="outline" className="ml-auto">
-                     Columns
-                     {' '}
-                     <ChevronDownIcon className="ml-2 size-4" />
-                  </Button>
-               </DropdownMenuTrigger>
-               <DropdownMenuContent align="end">
-                  {table
-                     .getAllColumns()
-                     .filter(column => column.getCanHide())
-                     .map((column) => {
-                        return (
-                           <DropdownMenuCheckboxItem
-                              key={column.id}
-                              className="capitalize"
-                              checked={column.getIsVisible()}
-                              onCheckedChange={value =>
-                                 column.toggleVisibility(!!value)}
-                           >
-                              {column.id}
-                           </DropdownMenuCheckboxItem>
-                        )
-                     })}
-               </DropdownMenuContent>
-            </DropdownMenu>
-         </div>
-         <div className="rounded-md border">
-            <Table>
-               <TableHeader>
-                  {table.getHeaderGroups().map(headerGroup => (
-                     <TableRow key={headerGroup.id}>
-                        {headerGroup.headers.map((header) => {
-                           return (
-                              <TableHead key={header.id}>
-                                 {header.isPlaceholder
-                                    ? null
-                                    : flexRender(
-                                       header.column.columnDef.header,
-                                       header.getContext(),
-                                    )}
-                              </TableHead>
-                           )
-                        })}
-                     </TableRow>
-                  ))}
-               </TableHeader>
-               <TableBody>
-                  {table.getRowModel().rows?.length
-                     ? (
-                           table.getRowModel().rows.map(row => (
-                              <TableRow
-                                 key={row.id}
-                                 data-state={row.getIsSelected() && 'selected'}
-                              >
-                                 {row.getVisibleCells().map(cell => (
-                                    <TableCell key={cell.id}>
-                                       {flexRender(
-                                          cell.column.columnDef.cell,
-                                          cell.getContext(),
-                                       )}
-                                    </TableCell>
-                                 ))}
-                              </TableRow>
-                           ))
-                        )
-                     : (
-                           <TableRow>
-                              <TableCell
-                                 colSpan={columns.length}
-                                 className="h-24 text-center"
-                              >
-                                 No results.
-                              </TableCell>
-                           </TableRow>
-                        )}
-               </TableBody>
-            </Table>
-         </div>
-         <div className="flex items-center justify-end space-x-2 py-4">
-            <div className="text-muted-foreground flex-1 text-sm">
-               {table.getFilteredSelectedRowModel().rows.length}
-               {' '}
-               of
-               {' '}
-               {table.getFilteredRowModel().rows.length}
-               {' '}
-               row(s) selected.
-            </div>
-            <div className="space-x-2">
-               <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => table.previousPage()}
-                  disabled={!table.getCanPreviousPage()}
-               >
-                  Previous
-               </Button>
-               <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => table.nextPage()}
-                  disabled={!table.getCanNextPage()}
-               >
-                  Next
-               </Button>
-            </div>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/date-picker-demo.tsx b/apps/web/registry/miami/example/date-picker-demo.tsx
deleted file mode 100644
index a1e364ac..00000000
--- a/apps/web/registry/miami/example/date-picker-demo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { format } from 'date-fns'
-import { CalendarIcon } from '@radix-ui/react-icons'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import { Calendar } from '~/registry/miami/ui/calendar'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-
-export default function DatePickerDemo() {
-   const [date, setDate] = React.useState<Date>()
-
-   return (
-      <Popover>
-         <PopoverTrigger asChild>
-            <Button
-               variant="outline"
-               className={ny(
-                  'w-[240px] justify-start text-left font-normal',
-                  !date && 'text-muted-foreground',
-               )}
-            >
-               <CalendarIcon className="mr-2 size-4" />
-               {date ? format(date, 'PPP') : <span>Pick a date</span>}
-            </Button>
-         </PopoverTrigger>
-         <PopoverContent className="w-auto p-0" align="start">
-            <Calendar
-               mode="single"
-               selected={date}
-               onSelect={setDate}
-               initialFocus
-            />
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/miami/example/date-picker-form.tsx b/apps/web/registry/miami/example/date-picker-form.tsx
deleted file mode 100644
index cdeda2a0..00000000
--- a/apps/web/registry/miami/example/date-picker-form.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { CalendarIcon } from '@radix-ui/react-icons'
-import { format } from 'date-fns'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import { Calendar } from '~/registry/miami/ui/calendar'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/miami/ui/form'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const FormSchema = z.object({
-   dob: z.date({
-      required_error: 'A date of birth is required.',
-   }),
-})
-
-export default function DatePickerForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-            <FormField
-               control={form.control}
-               name="dob"
-               render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                     <FormLabel>Date of birth</FormLabel>
-                     <Popover>
-                        <PopoverTrigger asChild>
-                           <FormControl>
-                              <Button
-                                 variant="outline"
-                                 className={ny(
-                                    'w-[240px] pl-3 text-left font-normal',
-                                    !field.value && 'text-muted-foreground',
-                                 )}
-                              >
-                                 {field.value
-                                    ? (
-                                          format(field.value, 'PPP')
-                                       )
-                                    : (
-                                          <span>Pick a date</span>
-                                       )}
-                                 <CalendarIcon className="ml-auto size-4 opacity-50" />
-                              </Button>
-                           </FormControl>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0" align="start">
-                           <Calendar
-                              mode="single"
-                              selected={field.value}
-                              onSelect={field.onChange}
-                              disabled={date =>
-                                 date > new Date() || date < new Date('1900-01-01')}
-                              initialFocus
-                           />
-                        </PopoverContent>
-                     </Popover>
-                     <FormDescription>
-                        Your date of birth is used to calculate your age.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/date-picker-with-presets.tsx b/apps/web/registry/miami/example/date-picker-with-presets.tsx
deleted file mode 100644
index d6d210fe..00000000
--- a/apps/web/registry/miami/example/date-picker-with-presets.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { CalendarIcon } from '@radix-ui/react-icons'
-import { addDays, format } from 'date-fns'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import { Calendar } from '~/registry/miami/ui/calendar'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-
-export default function DatePickerWithPresets() {
-   const [date, setDate] = React.useState<Date>()
-
-   return (
-      <Popover>
-         <PopoverTrigger asChild>
-            <Button
-               variant="outline"
-               className={ny(
-                  'w-[240px] justify-start text-left font-normal',
-                  !date && 'text-muted-foreground',
-               )}
-            >
-               <CalendarIcon className="mr-2 size-4" />
-               {date ? format(date, 'PPP') : <span>Pick a date</span>}
-            </Button>
-         </PopoverTrigger>
-         <PopoverContent
-            align="start"
-            className="flex w-auto flex-col space-y-2 p-2"
-         >
-            <Select
-               onValueChange={value =>
-                  setDate(addDays(new Date(), Number.parseInt(value)))}
-            >
-               <SelectTrigger>
-                  <SelectValue placeholder="Select" />
-               </SelectTrigger>
-               <SelectContent position="popper">
-                  <SelectItem value="0">Today</SelectItem>
-                  <SelectItem value="1">Tomorrow</SelectItem>
-                  <SelectItem value="3">In 3 days</SelectItem>
-                  <SelectItem value="7">In a week</SelectItem>
-               </SelectContent>
-            </Select>
-            <div className="rounded-md border">
-               <Calendar mode="single" selected={date} onSelect={setDate} />
-            </div>
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/miami/example/date-picker-with-range-presets-internal.tsx b/apps/web/registry/miami/example/date-picker-with-range-presets-internal.tsx
deleted file mode 100644
index 2e6398d3..00000000
--- a/apps/web/registry/miami/example/date-picker-with-range-presets-internal.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-react'
-import type { DateRange } from 'react-day-picker'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/default/ui/button'
-import { Calendar } from '~/registry/default/ui/calendar'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/default/ui/popover'
-
-export default function DatePickerWithRange({
-   className,
-}: React.HTMLAttributes<HTMLDivElement>) {
-   const [date, setDate] = React.useState<DateRange | undefined>({
-      from: new Date(2022, 0, 20),
-      to: addDays(new Date(2022, 0, 20), 20),
-   })
-
-   const handlePresetSelect = (value: string) => {
-      switch (value) {
-         case 'last7Days':
-            setDate({
-               from: addDays(new Date(), -7),
-               to: new Date(),
-            })
-            break
-         case 'last30Days':
-            setDate({
-               from: addDays(new Date(), -30),
-               to: new Date(),
-            })
-            break
-         case 'monthToDate':
-            setDate({
-               from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
-               to: new Date(),
-            })
-            break
-         case 'yearToDate':
-            setDate({
-               from: new Date(new Date().getFullYear(), 0, 1),
-               to: new Date(),
-            })
-            break
-         default:
-            break
-      }
-   }
-
-   return (
-      <div className={ny('inline-flex', className)}>
-         <Popover>
-            <PopoverTrigger asChild>
-               <Button
-                  id="date"
-                  variant="outline"
-                  className={ny(
-                     'w-[300px] justify-start text-left font-normal',
-                     !date && 'text-muted-foreground',
-                  )}
-               >
-                  <CalendarIcon className="mr-2 size-4" />
-                  {date?.from
-                     ? (
-                           date.to
-                              ? (
-                                    <>
-                                       {format(date.from, 'LLL dd, y')}
-                                       {' '}
-                                       -
-                                       {' '}
-                                       {format(date.to, 'LLL dd, y')}
-                                    </>
-                                 )
-                              : (
-                                    format(date.from, 'LLL dd, y')
-                                 )
-                        )
-                     : (
-                           <span>Pick a date</span>
-                        )}
-               </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="start">
-               <div className="flex w-full justify-evenly p-2">
-                  <Button
-                     variant="outline"
-                     onClick={() => handlePresetSelect('last7Days')}
-                  >
-                     Last 7 Days
-                  </Button>
-                  <Button
-                     variant="outline"
-                     onClick={() => handlePresetSelect('last30Days')}
-                  >
-                     Last 30 Days
-                  </Button>
-                  <Button
-                     variant="outline"
-                     onClick={() => handlePresetSelect('monthToDate')}
-                  >
-                     Month to Date
-                  </Button>
-                  <Button
-                     variant="outline"
-                     onClick={() => handlePresetSelect('yearToDate')}
-                  >
-                     Year to Date
-                  </Button>
-               </div>
-               <div className="border-t">
-                  <Calendar
-                     initialFocus
-                     mode="range"
-                     defaultMonth={date?.from}
-                     selected={date}
-                     onSelect={setDate}
-                     numberOfMonths={2}
-                  />
-               </div>
-            </PopoverContent>
-         </Popover>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/date-picker-with-range.tsx b/apps/web/registry/miami/example/date-picker-with-range.tsx
deleted file mode 100644
index 8f1871a3..00000000
--- a/apps/web/registry/miami/example/date-picker-with-range.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { CalendarIcon } from '@radix-ui/react-icons'
-import { addDays, format } from 'date-fns'
-import type { DateRange } from 'react-day-picker'
-
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import { Calendar } from '~/registry/miami/ui/calendar'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-
-export default function DatePickerWithRange({
-   className,
-}: React.HTMLAttributes<HTMLDivElement>) {
-   const [date, setDate] = React.useState<DateRange | undefined>({
-      from: new Date(2022, 0, 20),
-      to: addDays(new Date(2022, 0, 20), 20),
-   })
-
-   return (
-      <div className={ny('grid gap-2', className)}>
-         <Popover>
-            <PopoverTrigger asChild>
-               <Button
-                  id="date"
-                  variant="outline"
-                  className={ny(
-                     'w-[300px] justify-start text-left font-normal',
-                     !date && 'text-muted-foreground',
-                  )}
-               >
-                  <CalendarIcon className="mr-2 size-4" />
-                  {date?.from
-                     ? (
-                           date.to
-                              ? (
-                                    <>
-                                       {format(date.from, 'LLL dd, y')}
-                                       {' '}
-                                       -
-                                       {' '}
-                                       {format(date.to, 'LLL dd, y')}
-                                    </>
-                                 )
-                              : (
-                                    format(date.from, 'LLL dd, y')
-                                 )
-                        )
-                     : (
-                           <span>Pick a date</span>
-                        )}
-               </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="start">
-               <Calendar
-                  initialFocus
-                  mode="range"
-                  defaultMonth={date?.from}
-                  selected={date}
-                  onSelect={setDate}
-                  numberOfMonths={2}
-               />
-            </PopoverContent>
-         </Popover>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/dialog-close-button.tsx b/apps/web/registry/miami/example/dialog-close-button.tsx
deleted file mode 100644
index 342fb5b7..00000000
--- a/apps/web/registry/miami/example/dialog-close-button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { CopyIcon } from '@radix-ui/react-icons'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Dialog,
-   DialogClose,
-   DialogContent,
-   DialogDescription,
-   DialogFooter,
-   DialogHeader,
-   DialogTitle,
-   DialogTrigger,
-} from '~/registry/miami/ui/dialog'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export default function DialogCloseButton() {
-   return (
-      <Dialog>
-         <DialogTrigger asChild>
-            <Button variant="outline">Share</Button>
-         </DialogTrigger>
-         <DialogContent className="sm:max-w-md">
-            <DialogHeader>
-               <DialogTitle>Share link</DialogTitle>
-               <DialogDescription>
-                  Anyone who has this link will be able to view this.
-               </DialogDescription>
-            </DialogHeader>
-            <div className="flex items-center space-x-2">
-               <div className="grid flex-1 gap-2">
-                  <Label htmlFor="link" className="sr-only">
-                     Link
-                  </Label>
-                  <Input
-                     id="link"
-                     defaultValue="https://nyxbui.design/docs/installation"
-                     readOnly
-                  />
-               </div>
-               <Button type="submit" size="sm" className="px-3">
-                  <span className="sr-only">Copy</span>
-                  <CopyIcon className="size-4" />
-               </Button>
-            </div>
-            <DialogFooter className="sm:justify-start">
-               <DialogClose asChild>
-                  <Button type="button" variant="secondary">
-                     Close
-                  </Button>
-               </DialogClose>
-            </DialogFooter>
-         </DialogContent>
-      </Dialog>
-   )
-}
diff --git a/apps/web/registry/miami/example/dialog-demo.tsx b/apps/web/registry/miami/example/dialog-demo.tsx
deleted file mode 100644
index 711c0773..00000000
--- a/apps/web/registry/miami/example/dialog-demo.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Dialog,
-   DialogContent,
-   DialogDescription,
-   DialogFooter,
-   DialogHeader,
-   DialogTitle,
-   DialogTrigger,
-} from '~/registry/miami/ui/dialog'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export default function DialogDemo() {
-   return (
-      <Dialog>
-         <DialogTrigger asChild>
-            <Button variant="outline">Edit Profile</Button>
-         </DialogTrigger>
-         <DialogContent className="sm:max-w-[425px]">
-            <DialogHeader>
-               <DialogTitle>Edit profile</DialogTitle>
-               <DialogDescription>
-                  Make changes to your profile here. Click save when you're done.
-               </DialogDescription>
-            </DialogHeader>
-            <div className="grid gap-4 py-4">
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="name" className="text-right">
-                     Name
-                  </Label>
-                  <Input id="name" value="Pedro Duarte" className="col-span-3" />
-               </div>
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="username" className="text-right">
-                     Username
-                  </Label>
-                  <Input id="username" value="~peduarte" className="col-span-3" />
-               </div>
-            </div>
-            <DialogFooter>
-               <Button type="submit">Save changes</Button>
-            </DialogFooter>
-         </DialogContent>
-      </Dialog>
-   )
-}
diff --git a/apps/web/registry/miami/example/dock-demo-2.tsx b/apps/web/registry/miami/example/dock-demo-2.tsx
deleted file mode 100644
index 3be00a67..00000000
--- a/apps/web/registry/miami/example/dock-demo-2.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react'
-
-import { Dock, DockIcon } from '~/registry/miami/ui/dock'
-
-export type IconProps = React.HTMLAttributes<SVGElement>
-
-export default function DockDemo() {
-   return (
-      <div className="relative">
-         <Dock direction="middle">
-            <DockIcon>
-               <Icons.gitHub className="size-6" />
-            </DockIcon>
-            <DockIcon>
-               <Icons.googleDrive className="size-6" />
-            </DockIcon>
-            <DockIcon>
-               <Icons.notion className="size-6" />
-            </DockIcon>
-            <DockIcon>
-               <Icons.whatsapp className="size-6" />
-            </DockIcon>
-         </Dock>
-      </div>
-   )
-}
-
-const Icons = {
-   gitHub: (props: IconProps) => (
-      <svg viewBox="0 0 438.549 438.549" {...props}>
-         <path
-            fill="currentColor"
-            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-         >
-         </path>
-      </svg>
-   ),
-   notion: (props: IconProps) => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 100 100"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-         {...props}
-      >
-         <path
-            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
-            fill="#fff"
-         />
-         <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
-            fill="#000"
-         />
-      </svg>
-   ),
-   googleDrive: (props: IconProps) => (
-      <svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg" {...props}>
-         <path
-            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-            fill="#0066da"
-         />
-         <path
-            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-            fill="#00ac47"
-         />
-         <path
-            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-            fill="#ea4335"
-         />
-         <path
-            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-            fill="#00832d"
-         />
-         <path
-            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-            fill="#2684fc"
-         />
-         <path
-            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-            fill="#ffba00"
-         />
-      </svg>
-   ),
-   whatsapp: (props: IconProps) => (
-      <svg
-         xmlns="http://www.w3.org/2000/svg"
-         viewBox="0 0 175.216 175.552"
-         {...props}
-      >
-         <defs>
-            <linearGradient
-               id="b"
-               x1="85.915"
-               x2="86.535"
-               y1="32.567"
-               y2="137.092"
-               gradientUnits="userSpaceOnUse"
-            >
-               <stop offset="0" stopColor="#57d163" />
-               <stop offset="1" stopColor="#23b33a" />
-            </linearGradient>
-            <filter
-               id="a"
-               width="1.115"
-               height="1.114"
-               x="-.057"
-               y="-.057"
-               colorInterpolationFilters="sRGB"
-            >
-               <feGaussianBlur stdDeviation="3.531" />
-            </filter>
-         </defs>
-         <path
-            fill="#b3b3b3"
-            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
-            filter="url(#a)"
-         />
-         <path
-            fill="#fff"
-            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
-         />
-         <path
-            fill="url(#linearGradient1780)"
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
-         />
-         <path
-            fill="url(#b)"
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
-         />
-         <path
-            fill="#fff"
-            fillRule="evenodd"
-            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
-         />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/miami/example/dock-demo-3.tsx b/apps/web/registry/miami/example/dock-demo-3.tsx
deleted file mode 100644
index 3a6bd83e..00000000
--- a/apps/web/registry/miami/example/dock-demo-3.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react'
-
-import { Dock, DockIcon } from '~/registry/miami/ui/dock'
-
-export type IconProps = React.HTMLAttributes<SVGElement>
-
-export default function DockDemo() {
-   return (
-      <div className="relative">
-         <Dock magnification={60} distance={100}>
-            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
-               <Icons.gitHub className="size-full" />
-            </DockIcon>
-            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
-               <Icons.googleDrive className="size-full" />
-            </DockIcon>
-            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
-               <Icons.notion className="size-full" />
-            </DockIcon>
-            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
-               <Icons.whatsapp className="size-full" />
-            </DockIcon>
-         </Dock>
-      </div>
-   )
-}
-
-const Icons = {
-   gitHub: (props: IconProps) => (
-      <svg viewBox="0 0 438.549 438.549" {...props}>
-         <path
-            fill="currentColor"
-            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-         >
-         </path>
-      </svg>
-   ),
-   notion: (props: IconProps) => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 100 100"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-         {...props}
-      >
-         <path
-            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
-            fill="#fff"
-         />
-         <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
-            fill="#000"
-         />
-      </svg>
-   ),
-   googleDrive: (props: IconProps) => (
-      <svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg" {...props}>
-         <path
-            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-            fill="#0066da"
-         />
-         <path
-            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-            fill="#00ac47"
-         />
-         <path
-            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-            fill="#ea4335"
-         />
-         <path
-            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-            fill="#00832d"
-         />
-         <path
-            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-            fill="#2684fc"
-         />
-         <path
-            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-            fill="#ffba00"
-         />
-      </svg>
-   ),
-   whatsapp: (props: IconProps) => (
-      <svg
-         xmlns="http://www.w3.org/2000/svg"
-         viewBox="0 0 175.216 175.552"
-         {...props}
-      >
-         <defs>
-            <linearGradient
-               id="b"
-               x1="85.915"
-               x2="86.535"
-               y1="32.567"
-               y2="137.092"
-               gradientUnits="userSpaceOnUse"
-            >
-               <stop offset="0" stopColor="#57d163" />
-               <stop offset="1" stopColor="#23b33a" />
-            </linearGradient>
-            <filter
-               id="a"
-               width="1.115"
-               height="1.114"
-               x="-.057"
-               y="-.057"
-               colorInterpolationFilters="sRGB"
-            >
-               <feGaussianBlur stdDeviation="3.531" />
-            </filter>
-         </defs>
-         <path
-            fill="#b3b3b3"
-            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
-            filter="url(#a)"
-         />
-         <path
-            fill="#fff"
-            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
-         />
-         <path
-            fill="url(#linearGradient1780)"
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
-         />
-         <path
-            fill="url(#b)"
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
-         />
-         <path
-            fill="#fff"
-            fillRule="evenodd"
-            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
-         />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/miami/example/dock-demo.tsx b/apps/web/registry/miami/example/dock-demo.tsx
deleted file mode 100644
index c6332138..00000000
--- a/apps/web/registry/miami/example/dock-demo.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { CalendarIcon, HomeIcon, MailIcon, PencilIcon } from 'lucide-react'
-
-import { ny } from '~/lib/utils'
-import { buttonVariants } from '~/components/ui/button'
-import { Separator } from '~/components/ui/separator'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/components/ui/tooltip'
-import { ModeToggle } from '~/components/mode-toggle'
-import { Dock, DockIcon } from '~/registry/miami/ui/dock'
-
-export type IconProps = React.HTMLAttributes<SVGElement>
-
-const Icons = {
-   calendar: (props: IconProps) => <CalendarIcon {...props} />,
-   email: (props: IconProps) => <MailIcon {...props} />,
-   linkedin: (props: IconProps) => (
-      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-         <title>LinkedIn</title>
-         <path
-            fill="currentColor"
-            d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
-         />
-      </svg>
-   ),
-   x: (props: IconProps) => (
-      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-         <title>X</title>
-         <path
-            fill="currentColor"
-            d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
-         />
-      </svg>
-   ),
-   youtube: (props: IconProps) => (
-      <svg
-         width="32px"
-         height="32px"
-         viewBox="0 0 32 32"
-         fill="currentColor"
-         xmlns="http://www.w3.org/2000/svg"
-         {...props}
-      >
-         <title>youtube</title>
-         <path d="M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z" />
-      </svg>
-   ),
-   github: (props: IconProps) => (
-      <svg viewBox="0 0 438.549 438.549" {...props}>
-         <path
-            fill="currentColor"
-            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-         >
-         </path>
-      </svg>
-   ),
-}
-
-const DATA = {
-   navbar: [
-      { href: '#', icon: HomeIcon, label: 'Home' },
-      { href: '#', icon: PencilIcon, label: 'Blog' },
-   ],
-   contact: {
-      social: {
-         GitHub: {
-            name: 'GitHub',
-            url: '#',
-            icon: Icons.github,
-         },
-         LinkedIn: {
-            name: 'LinkedIn',
-            url: '#',
-            icon: Icons.linkedin,
-         },
-         X: {
-            name: 'X',
-            url: '#',
-            icon: Icons.x,
-         },
-         email: {
-            name: 'Send Email',
-            url: '#',
-            icon: Icons.email,
-         },
-      },
-   },
-}
-
-export default function DockDemo() {
-   return (
-      <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Dock
-         </span>
-         <TooltipProvider>
-            <Dock direction="middle">
-               {DATA.navbar.map(item => (
-                  <DockIcon key={item.label}>
-                     <Tooltip>
-                        <TooltipTrigger asChild>
-                           <Link
-                              href={item.href}
-                              aria-label={item.label}
-                              className={ny(
-                                 buttonVariants({ variant: 'ghost', size: 'icon' }),
-                                 'size-12 rounded-full',
-                              )}
-                           >
-                              <item.icon className="size-4" />
-                           </Link>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                           <p>{item.label}</p>
-                        </TooltipContent>
-                     </Tooltip>
-                  </DockIcon>
-               ))}
-               <Separator orientation="vertical" className="h-full" />
-               {Object.entries(DATA.contact.social).map(([name, social]) => (
-                  <DockIcon key={name}>
-                     <Tooltip>
-                        <TooltipTrigger asChild>
-                           <Link
-                              href={social.url}
-                              aria-label={social.name}
-                              className={ny(
-                                 buttonVariants({ variant: 'ghost', size: 'icon' }),
-                                 'size-12 rounded-full',
-                              )}
-                           >
-                              <social.icon className="size-4" />
-                           </Link>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                           <p>{name}</p>
-                        </TooltipContent>
-                     </Tooltip>
-                  </DockIcon>
-               ))}
-               <Separator orientation="vertical" className="h-full py-2" />
-               <DockIcon>
-                  <Tooltip>
-                     <TooltipTrigger asChild>
-                        <ModeToggle className="rounded-full" />
-                     </TooltipTrigger>
-                     <TooltipContent>
-                        <p>Theme</p>
-                     </TooltipContent>
-                  </Tooltip>
-               </DockIcon>
-            </Dock>
-         </TooltipProvider>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/dot-pattern-demo.tsx b/apps/web/registry/miami/example/dot-pattern-demo.tsx
deleted file mode 100644
index fe69ff4a..00000000
--- a/apps/web/registry/miami/example/dot-pattern-demo.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import { ny } from '~/lib/utils'
-import DotPattern from '~/registry/miami/ui/dot-pattern'
-
-function DotPatternDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Dot Pattern
-         </p>
-         <DotPattern
-            className={ny(
-               '[mask-image:radial-gradient(200px_circle_at_center,white,transparent)]',
-            )}
-         />
-      </div>
-   )
-}
-
-export default DotPatternDemo
diff --git a/apps/web/registry/miami/example/dot-pattern-linear-gradient.tsx b/apps/web/registry/miami/example/dot-pattern-linear-gradient.tsx
deleted file mode 100644
index d7d2de49..00000000
--- a/apps/web/registry/miami/example/dot-pattern-linear-gradient.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import DotPattern from '~/registry/miami/ui/dot-pattern'
-import { ny } from '~/lib/utils'
-
-function DotPatternDemo2() {
-   return (
-      <div className="bg-background relative flex size-full items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Dot Pattern
-         </p>
-         <DotPattern
-            width={20}
-            height={20}
-            cx={1}
-            cy={1}
-            cr={1}
-            className={ny(
-               '[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ',
-            )}
-         />
-      </div>
-   )
-}
-
-export default DotPatternDemo2
diff --git a/apps/web/registry/miami/example/drawer-demo.tsx b/apps/web/registry/miami/example/drawer-demo.tsx
deleted file mode 100644
index 19caa858..00000000
--- a/apps/web/registry/miami/example/drawer-demo.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from 'react'
-import { MinusIcon, PlusIcon } from '@radix-ui/react-icons'
-import { Bar, BarChart, ResponsiveContainer } from 'recharts'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Drawer,
-   DrawerClose,
-   DrawerContent,
-   DrawerDescription,
-   DrawerFooter,
-   DrawerHeader,
-   DrawerTitle,
-   DrawerTrigger,
-} from '~/registry/miami/ui/drawer'
-
-const data = [
-   {
-      goal: 400,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 278,
-   },
-   {
-      goal: 189,
-   },
-   {
-      goal: 239,
-   },
-   {
-      goal: 300,
-   },
-   {
-      goal: 200,
-   },
-   {
-      goal: 278,
-   },
-   {
-      goal: 189,
-   },
-   {
-      goal: 349,
-   },
-]
-
-export default function DrawerDemo() {
-   const [goal, setGoal] = React.useState(350)
-
-   function onClick(adjustment: number) {
-      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
-   }
-
-   return (
-      <Drawer>
-         <DrawerTrigger asChild>
-            <Button variant="outline">Open Drawer</Button>
-         </DrawerTrigger>
-         <DrawerContent>
-            <div className="mx-auto w-full max-w-sm">
-               <DrawerHeader>
-                  <DrawerTitle>Move Goal</DrawerTitle>
-                  <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-               </DrawerHeader>
-               <div className="p-4 pb-0">
-                  <div className="flex items-center justify-center space-x-2">
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="size-8 shrink-0 rounded-full"
-                        onClick={() => onClick(-10)}
-                        disabled={goal <= 200}
-                     >
-                        <MinusIcon className="size-4" />
-                        <span className="sr-only">Decrease</span>
-                     </Button>
-                     <div className="flex-1 text-center">
-                        <div className="text-7xl font-bold tracking-tighter">
-                           {goal}
-                        </div>
-                        <div className="text-muted-foreground text-[0.70rem] uppercase">
-                           Calories/day
-                        </div>
-                     </div>
-                     <Button
-                        variant="outline"
-                        size="icon"
-                        className="size-8 shrink-0 rounded-full"
-                        onClick={() => onClick(10)}
-                        disabled={goal >= 400}
-                     >
-                        <PlusIcon className="size-4" />
-                        <span className="sr-only">Increase</span>
-                     </Button>
-                  </div>
-                  <div className="mt-3 h-[120px]">
-                     <ResponsiveContainer width="100%" height="100%">
-                        <BarChart data={data}>
-                           <Bar
-                              dataKey="goal"
-                              style={
-                                 {
-                                    fill: 'hsl(var(--foreground))',
-                                    opacity: 0.9,
-                                 } as React.CSSProperties
-                              }
-                           />
-                        </BarChart>
-                     </ResponsiveContainer>
-                  </div>
-               </div>
-               <DrawerFooter>
-                  <Button>Submit</Button>
-                  <DrawerClose asChild>
-                     <Button variant="outline">Cancel</Button>
-                  </DrawerClose>
-               </DrawerFooter>
-            </div>
-         </DrawerContent>
-      </Drawer>
-   )
-}
diff --git a/apps/web/registry/miami/example/drawer-dialog.tsx b/apps/web/registry/miami/example/drawer-dialog.tsx
deleted file mode 100644
index 34115ee2..00000000
--- a/apps/web/registry/miami/example/drawer-dialog.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import * as React from 'react'
-
-import { ny } from '~/lib/utils'
-import { useMediaQuery } from '~/hooks/use-media-query'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Dialog,
-   DialogContent,
-   DialogDescription,
-   DialogHeader,
-   DialogTitle,
-   DialogTrigger,
-} from '~/registry/miami/ui/dialog'
-import {
-   Drawer,
-   DrawerClose,
-   DrawerContent,
-   DrawerDescription,
-   DrawerFooter,
-   DrawerHeader,
-   DrawerTitle,
-   DrawerTrigger,
-} from '~/registry/miami/ui/drawer'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export default function DrawerDialogDemo() {
-   const [open, setOpen] = React.useState(false)
-   const isDesktop = useMediaQuery('(min-width: 768px)')
-
-   if (isDesktop) {
-      return (
-         <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-               <Button variant="outline">Edit Profile</Button>
-            </DialogTrigger>
-            <DialogContent className="sm:max-w-[425px]">
-               <DialogHeader>
-                  <DialogTitle>Edit profile</DialogTitle>
-                  <DialogDescription>
-                     Make changes to your profile here. Click save when you're done.
-                  </DialogDescription>
-               </DialogHeader>
-               <ProfileForm />
-            </DialogContent>
-         </Dialog>
-      )
-   }
-
-   return (
-      <Drawer open={open} onOpenChange={setOpen}>
-         <DrawerTrigger asChild>
-            <Button variant="outline">Edit Profile</Button>
-         </DrawerTrigger>
-         <DrawerContent>
-            <DrawerHeader className="text-left">
-               <DrawerTitle>Edit profile</DrawerTitle>
-               <DrawerDescription>
-                  Make changes to your profile here. Click save when you're done.
-               </DrawerDescription>
-            </DrawerHeader>
-            <ProfileForm className="px-4" />
-            <DrawerFooter className="pt-2">
-               <DrawerClose asChild>
-                  <Button variant="outline">Cancel</Button>
-               </DrawerClose>
-            </DrawerFooter>
-         </DrawerContent>
-      </Drawer>
-   )
-}
-
-function ProfileForm({ className }: React.ComponentProps<'form'>) {
-   return (
-      <form className={ny('grid items-start gap-4', className)}>
-         <div className="grid gap-2">
-            <Label htmlFor="email">Email</Label>
-            <Input type="email" id="email" defaultValue="nyxb@example.com" />
-         </div>
-         <div className="grid gap-2">
-            <Label htmlFor="username">Username</Label>
-            <Input id="username" defaultValue="~nyxb" />
-         </div>
-         <Button type="submit">Save changes</Button>
-      </form>
-   )
-}
diff --git a/apps/web/registry/miami/example/dropdown-menu-checkboxes.tsx b/apps/web/registry/miami/example/dropdown-menu-checkboxes.tsx
deleted file mode 100644
index 30ba65d6..00000000
--- a/apps/web/registry/miami/example/dropdown-menu-checkboxes.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import type { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   DropdownMenu,
-   DropdownMenuCheckboxItem,
-   DropdownMenuContent,
-   DropdownMenuLabel,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-
-type Checked = DropdownMenuCheckboxItemProps['checked']
-
-export default function DropdownMenuCheckboxes() {
-   const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
-   const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
-   const [showPanel, setShowPanel] = React.useState<Checked>(false)
-
-   return (
-      <DropdownMenu>
-         <DropdownMenuTrigger asChild>
-            <Button variant="outline">Open</Button>
-         </DropdownMenuTrigger>
-         <DropdownMenuContent className="w-56">
-            <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuCheckboxItem
-               checked={showStatusBar}
-               onCheckedChange={setShowStatusBar}
-            >
-               Status Bar
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuCheckboxItem
-               checked={showActivityBar}
-               onCheckedChange={setShowActivityBar}
-               disabled
-            >
-               Activity Bar
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuCheckboxItem
-               checked={showPanel}
-               onCheckedChange={setShowPanel}
-            >
-               Panel
-            </DropdownMenuCheckboxItem>
-         </DropdownMenuContent>
-      </DropdownMenu>
-   )
-}
diff --git a/apps/web/registry/miami/example/dropdown-menu-demo.tsx b/apps/web/registry/miami/example/dropdown-menu-demo.tsx
deleted file mode 100644
index 316afa4c..00000000
--- a/apps/web/registry/miami/example/dropdown-menu-demo.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuGroup,
-   DropdownMenuItem,
-   DropdownMenuLabel,
-   DropdownMenuPortal,
-   DropdownMenuSeparator,
-   DropdownMenuShortcut,
-   DropdownMenuSub,
-   DropdownMenuSubContent,
-   DropdownMenuSubTrigger,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-
-export default function DropdownMenuDemo() {
-   return (
-      <DropdownMenu>
-         <DropdownMenuTrigger asChild>
-            <Button variant="outline">Open</Button>
-         </DropdownMenuTrigger>
-         <DropdownMenuContent className="w-56">
-            <DropdownMenuLabel>My Account</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-               <DropdownMenuItem>
-                  Profile
-                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-               </DropdownMenuItem>
-               <DropdownMenuItem>
-                  Billing
-                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-               </DropdownMenuItem>
-               <DropdownMenuItem>
-                  Settings
-                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-               </DropdownMenuItem>
-               <DropdownMenuItem>
-                  Keyboard shortcuts
-                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
-               </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-               <DropdownMenuItem>Team</DropdownMenuItem>
-               <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
-                  <DropdownMenuPortal>
-                     <DropdownMenuSubContent>
-                        <DropdownMenuItem>Email</DropdownMenuItem>
-                        <DropdownMenuItem>Message</DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>More...</DropdownMenuItem>
-                     </DropdownMenuSubContent>
-                  </DropdownMenuPortal>
-               </DropdownMenuSub>
-               <DropdownMenuItem>
-                  New Team
-                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
-               </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>GitHub</DropdownMenuItem>
-            <DropdownMenuItem>Support</DropdownMenuItem>
-            <DropdownMenuItem disabled>API</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-               Log out
-               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-            </DropdownMenuItem>
-         </DropdownMenuContent>
-      </DropdownMenu>
-   )
-}
diff --git a/apps/web/registry/miami/example/dropdown-menu-radio-group.tsx b/apps/web/registry/miami/example/dropdown-menu-radio-group.tsx
deleted file mode 100644
index 27a0b630..00000000
--- a/apps/web/registry/miami/example/dropdown-menu-radio-group.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuLabel,
-   DropdownMenuRadioGroup,
-   DropdownMenuRadioItem,
-   DropdownMenuSeparator,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-
-export default function DropdownMenuRadioGroupDemo() {
-   const [position, setPosition] = React.useState('bottom')
-
-   return (
-      <DropdownMenu>
-         <DropdownMenuTrigger asChild>
-            <Button variant="outline">Open</Button>
-         </DropdownMenuTrigger>
-         <DropdownMenuContent className="w-56">
-            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-               <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-               <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-               <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-            </DropdownMenuRadioGroup>
-         </DropdownMenuContent>
-      </DropdownMenu>
-   )
-}
diff --git a/apps/web/registry/miami/example/fade-text-demo.tsx b/apps/web/registry/miami/example/fade-text-demo.tsx
deleted file mode 100644
index 3e4d6282..00000000
--- a/apps/web/registry/miami/example/fade-text-demo.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { FadeText } from '~/registry/miami/ui/fade-text'
-
-export default async function FadeTextDemo() {
-   return (
-      <div className="flex flex-col space-y-8 text-center">
-         <FadeText
-            className="text-4xl font-bold text-black dark:text-white"
-            direction="up"
-            framerProps={{
-               show: { transition: { delay: 0.2 } },
-            }}
-            text="Fade Up"
-         />
-         <FadeText
-            className="text-4xl font-bold text-black dark:text-white"
-            direction="right"
-            framerProps={{
-               show: { transition: { delay: 0.4 } },
-            }}
-            text="Fade Right"
-         />
-         <FadeText
-            className="text-4xl font-bold text-black dark:text-white"
-            direction="down"
-            framerProps={{
-               show: { transition: { delay: 0.6 } },
-            }}
-            text="Fade Down"
-         />
-         <FadeText
-            className="text-4xl font-bold text-black dark:text-white"
-            direction="left"
-            framerProps={{
-               show: { transition: { delay: 0.8 } },
-            }}
-            text="Fade Left"
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/file-tree-demo.tsx b/apps/web/registry/miami/example/file-tree-demo.tsx
deleted file mode 100644
index d1a4dee7..00000000
--- a/apps/web/registry/miami/example/file-tree-demo.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { File, Folder, Tree } from '~/registry/miami/ui/file-tree'
-
-export default function FileTreeDemo() {
-   return (
-      <div className="bg-background relative flex h-[300px] w-1/2 flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
-         <Tree
-            className="bg-background overflow-hidden rounded-md p-2"
-            initialSelectedId="7"
-            initialExpandedItems={[
-               '1',
-               '2',
-               '3',
-               '4',
-               '5',
-               '6',
-               '7',
-               '8',
-               '9',
-               '10',
-               '11',
-            ]}
-            elements={ELEMENTS}
-         >
-            <Folder element="src" value="1">
-               <Folder value="2" element="app">
-                  <File value="3">
-                     <p>layout.tsx</p>
-                  </File>
-                  <File value="4">
-                     <p>page.tsx</p>
-                  </File>
-               </Folder>
-               <Folder value="5" element="components">
-                  <Folder value="6" element="ui">
-                     <File value="7">
-                        <p>button.tsx</p>
-                     </File>
-                  </Folder>
-                  <File value="8">
-                     <p>header.tsx</p>
-                  </File>
-                  <File value="9">
-                     <p>footer.tsx</p>
-                  </File>
-               </Folder>
-               <Folder value="10" element="lib">
-                  <File value="11">
-                     <p>utils.ts</p>
-                  </File>
-               </Folder>
-            </Folder>
-         </Tree>
-      </div>
-   )
-}
-
-const ELEMENTS = [
-   {
-      id: '1',
-      isSelectable: true,
-      name: 'src',
-      children: [
-         {
-            id: '2',
-            isSelectable: true,
-            name: 'app',
-            children: [
-               {
-                  id: '3',
-                  isSelectable: true,
-                  name: 'layout.tsx',
-               },
-               {
-                  id: '4',
-                  isSelectable: true,
-                  name: 'page.tsx',
-               },
-            ],
-         },
-         {
-            id: '5',
-            isSelectable: true,
-            name: 'components',
-            children: [
-               {
-                  id: '6',
-                  isSelectable: true,
-                  name: 'header.tsx',
-               },
-               {
-                  id: '7',
-                  isSelectable: true,
-                  name: 'footer.tsx',
-               },
-            ],
-         },
-         {
-            id: '8',
-            isSelectable: true,
-            name: 'lib',
-            children: [
-               {
-                  id: '9',
-                  isSelectable: true,
-                  name: 'utils.ts',
-               },
-            ],
-         },
-      ],
-   },
-]
diff --git a/apps/web/registry/miami/example/flickering-grid-demo.tsx b/apps/web/registry/miami/example/flickering-grid-demo.tsx
deleted file mode 100644
index e37d2304..00000000
--- a/apps/web/registry/miami/example/flickering-grid-demo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import FlickeringGrid from '~/registry/miami/ui/flickering-grid'
-
-export default function FlickeringGridDemo() {
-   return (
-      <div className="bg-background relative h-[500px] w-full overflow-hidden rounded-lg border">
-         <FlickeringGrid
-            className="absolute inset-0 z-0 size-full"
-            squareSize={4}
-            gridGap={6}
-            color="#6B7280"
-            maxOpacity={0.5}
-            flickerChance={0.1}
-            height={800}
-            width={800}
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/flickering-grid-rounded-demo.tsx b/apps/web/registry/miami/example/flickering-grid-rounded-demo.tsx
deleted file mode 100644
index 0d3f5606..00000000
--- a/apps/web/registry/miami/example/flickering-grid-rounded-demo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import FlickeringGrid from '~/registry/miami/ui/flickering-grid'
-
-export default function FlickeringGridRoundedDemo() {
-   return (
-      <div className="bg-background relative size-[600px] w-full overflow-hidden rounded-lg border">
-         <FlickeringGrid
-            className="absolute inset-0 z-0 [mask:radial-gradient(circle_at_center,#fff_300px,transparent_0)]"
-            squareSize={4}
-            gridGap={6}
-            color="#60A5FA"
-            maxOpacity={0.5}
-            flickerChance={0.1}
-            height={800}
-            width={800}
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/flip-text-demo.tsx b/apps/web/registry/miami/example/flip-text-demo.tsx
deleted file mode 100644
index 88c9d622..00000000
--- a/apps/web/registry/miami/example/flip-text-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import FlipText from '~/registry/miami/ui/flip-text'
-
-export default async function FlipTextDemo() {
-   return (
-      <FlipText
-         className="text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
-         word="Flip Text"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/gauge-circle-demo.tsx b/apps/web/registry/miami/example/gauge-circle-demo.tsx
deleted file mode 100644
index 39f86c48..00000000
--- a/apps/web/registry/miami/example/gauge-circle-demo.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import GaugeCircle from '~/registry/miami/ui/gauge-circle'
-
-export default function GaugeCircleDemo() {
-   const [value, setValue] = useState(0)
-
-   useEffect(() => {
-      const handleIncrement = (prev: number) => {
-         if (prev === 100)
-            return 0
-
-         return prev + 10
-      }
-      setValue(handleIncrement)
-      const interval = setInterval(() => setValue(handleIncrement), 2000)
-      return () => clearInterval(interval)
-   }, [])
-
-   return (
-      <GaugeCircle
-         max={100}
-         min={0}
-         value={value}
-         gaugePrimaryColor="rgb(79 70 229)"
-         gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/globe-demo.tsx b/apps/web/registry/miami/example/globe-demo.tsx
deleted file mode 100644
index f88bc119..00000000
--- a/apps/web/registry/miami/example/globe-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Globe from '~/registry/miami/ui/globe'
-
-export default function GlobeDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-40 pb-40 pt-8 md:pb-60 md:shadow-xl">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Globe
-         </span>
-         <Globe className="top-28" />
-         <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/globe-grid-demo.tsx b/apps/web/registry/miami/example/globe-grid-demo.tsx
deleted file mode 100644
index 9324d12a..00000000
--- a/apps/web/registry/miami/example/globe-grid-demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { GlobeGrid } from '~/registry/miami/ui/globe-grid'
-
-export function GlobeGridDemo() {
-   return (
-      <GlobeGrid />
-   )
-}
-
-export default GlobeGridDemo
diff --git a/apps/web/registry/miami/example/globe-grid-full-demo.tsx b/apps/web/registry/miami/example/globe-grid-full-demo.tsx
deleted file mode 100644
index 02a41209..00000000
--- a/apps/web/registry/miami/example/globe-grid-full-demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { GlobeGrid } from '~/registry/miami/ui/globe-grid'
-
-export function GlobeGridDemo() {
-   return (
-      <GlobeGrid fullGlobe />
-   )
-}
-
-export default GlobeGridDemo
diff --git a/apps/web/registry/miami/example/gradual-spacing-demo.tsx b/apps/web/registry/miami/example/gradual-spacing-demo.tsx
deleted file mode 100644
index 9c946952..00000000
--- a/apps/web/registry/miami/example/gradual-spacing-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import GradualSpacing from '~/registry/miami/ui/gradual-spacing'
-
-export default async function GradualSpacingDemo() {
-   return (
-      <GradualSpacing
-         className="font-display text-center text-4xl font-bold -tracking-widest  text-black md:text-7xl md:leading-[5rem] dark:text-white"
-         text="Gradual Spacing"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/grid-layout-columns-demo.tsx b/apps/web/registry/miami/example/grid-layout-columns-demo.tsx
deleted file mode 100644
index 7e1cec02..00000000
--- a/apps/web/registry/miami/example/grid-layout-columns-demo.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client'
-
-import GridLayout from '~/registry/default/ui/grid-layout'
-
-export default function GridLayoutColumnsDemo() {
-   return (
-      <div className="space-y-8">
-         <GridLayout
-            columns={8}
-            className="min-h-[150px] p-4"
-            crosshairs={{
-               topLeft: true,
-               bottomRight: true,
-            }}
-         >
-            <div className="flex h-full items-center justify-center">
-               <div className="text-center">
-                  <h3 className="text-xl font-medium">8 Columns</h3>
-                  <p className="text-muted-foreground mt-1">Compact layouts</p>
-               </div>
-            </div>
-         </GridLayout>
-
-         <GridLayout
-            columns={12}
-            className="min-h-[150px] p-4"
-            crosshairs={{
-               topLeft: true,
-               bottomRight: true,
-            }}
-         >
-            <div className="flex h-full items-center justify-center">
-               <div className="text-center">
-                  <h3 className="text-xl font-medium">12 Columns</h3>
-                  <p className="text-muted-foreground mt-1">Traditional grid</p>
-               </div>
-            </div>
-         </GridLayout>
-
-         <GridLayout
-            columns={16}
-            className="min-h-[150px] p-4"
-            crosshairs={{
-               topLeft: true,
-               bottomRight: true,
-            }}
-         >
-            <div className="flex h-full items-center justify-center">
-               <div className="text-center">
-                  <h3 className="text-xl font-medium">16 Columns</h3>
-                  <p className="text-muted-foreground mt-1">Fine-grained control</p>
-               </div>
-            </div>
-         </GridLayout>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/grid-layout-crosshairs-demo.tsx b/apps/web/registry/miami/example/grid-layout-crosshairs-demo.tsx
deleted file mode 100644
index 66312ae4..00000000
--- a/apps/web/registry/miami/example/grid-layout-crosshairs-demo.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client'
-
-import GridLayout from '~/registry/default/ui/grid-layout'
-
-export default function GridLayoutCrosshairsDemo() {
-   return (
-      <GridLayout
-         crosshairs={{
-            topLeft: true,
-            topRight: true,
-            bottomLeft: true,
-            bottomRight: true,
-         }}
-         lineVariant="none"
-         className="min-h-[350px] p-6"
-      >
-         <div className="flex h-full flex-col items-center justify-center space-y-4">
-            <div className="text-center">
-               <h3 className="text-2xl font-medium">Corner Markers</h3>
-               <p className="text-muted-foreground mt-2">
-                  Use crosshairs to highlight key areas or create visual anchors
-               </p>
-            </div>
-            <div className="grid w-full max-w-xl grid-cols-2 gap-8 pt-8">
-               <div className="bg-card rounded-lg border p-4 text-center">Top Left</div>
-               <div className="bg-card rounded-lg border p-4 text-center">Top Right</div>
-               <div className="bg-card rounded-lg border p-4 text-center">Bottom Left</div>
-               <div className="bg-card rounded-lg border p-4 text-center">Bottom Right</div>
-            </div>
-         </div>
-      </GridLayout>
-   )
-}
diff --git a/apps/web/registry/miami/example/grid-layout-demo.tsx b/apps/web/registry/miami/example/grid-layout-demo.tsx
deleted file mode 100644
index f6c8b4ee..00000000
--- a/apps/web/registry/miami/example/grid-layout-demo.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/default/ui/button'
-import GridLayout from '~/registry/default/ui/grid-layout'
-
-export default function GridLayoutDemo() {
-   return (
-      <GridLayout
-         crosshairs={{
-            topLeft: true,
-            bottomRight: true,
-         }}
-         lineVariant="center"
-         className="min-h-[350px] p-8"
-      >
-         <div className="space-y-8">
-            <div>
-               <h2 className="text-4xl font-medium tracking-tight">
-                  Ready to deploy?
-                  {' '}
-                  <span className="text-muted-foreground">
-                     Start building with a free account.
-                  </span>
-               </h2>
-               <p className="text-muted-foreground mt-4 text-xl">
-                  Speak to an expert for your
-                  {' '}
-                  <span className="text-blue-500">Pro</span>
-                  {' '}
-                  or
-                  {' '}
-                  <span className="text-purple-500">Enterprise</span>
-                  {' '}
-                  needs.
-               </p>
-            </div>
-            <div className="flex gap-4">
-               <Button variant="default" size="lg">
-                  Start Deploying
-               </Button>
-               <Button variant="outline" size="lg">
-                  Contact Sales
-               </Button>
-            </div>
-         </div>
-      </GridLayout>
-   )
-}
diff --git a/apps/web/registry/miami/example/grid-layout-variants-demo.tsx b/apps/web/registry/miami/example/grid-layout-variants-demo.tsx
deleted file mode 100644
index 17b9a23f..00000000
--- a/apps/web/registry/miami/example/grid-layout-variants-demo.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client'
-
-import GridLayout from '~/registry/default/ui/grid-layout'
-
-export default function GridLayoutVariantsDemo() {
-   return (
-      <div className="space-y-8">
-         <GridLayout
-            lineVariant="center"
-            className="min-h-[150px]"
-            crosshairs={{
-               topLeft: true,
-               bottomRight: true,
-            }}
-         >
-            <div className="flex h-full items-center justify-center">
-               <div className="text-center">
-                  <h3 className="text-xl font-medium">Center Line</h3>
-                  <p className="text-muted-foreground mt-1">Minimal and focused</p>
-               </div>
-            </div>
-         </GridLayout>
-
-         <GridLayout
-            lineVariant="vertical"
-            className="min-h-[150px]"
-            crosshairs={{
-               topLeft: true,
-               bottomRight: true,
-            }}
-         >
-            <div className="flex h-full items-center justify-center">
-               <div className="text-center">
-                  <h3 className="text-xl font-medium">Vertical Lines</h3>
-                  <p className="text-muted-foreground mt-1">Column-focused layout</p>
-               </div>
-            </div>
-         </GridLayout>
-
-         <GridLayout
-            lineVariant="horizontal"
-            className="min-h-[150px]"
-            crosshairs={{
-               topLeft: true,
-               bottomRight: true,
-            }}
-         >
-            <div className="flex h-full items-center justify-center">
-               <div className="text-center">
-                  <h3 className="text-xl font-medium">Horizontal Lines</h3>
-                  <p className="text-muted-foreground mt-1">Row-based organization</p>
-               </div>
-            </div>
-         </GridLayout>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/grid-pattern-dashed.tsx b/apps/web/registry/miami/example/grid-pattern-dashed.tsx
deleted file mode 100644
index 54fcefdb..00000000
--- a/apps/web/registry/miami/example/grid-pattern-dashed.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { ny } from '~/lib/utils'
-import GridPattern from '~/registry/miami/ui/grid-pattern'
-
-function GridPatternDashed() {
-   return (
-      <div className="bg-background relative flex size-full items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Grid Pattern
-         </p>
-         <GridPattern
-            width={30}
-            height={30}
-            x={-1}
-            y={-1}
-            strokeDasharray="4 2"
-            className={ny(
-               '[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]',
-            )}
-         />
-      </div>
-   )
-}
-
-export default GridPatternDashed
diff --git a/apps/web/registry/miami/example/grid-pattern-demo.tsx b/apps/web/registry/miami/example/grid-pattern-demo.tsx
deleted file mode 100644
index 9c9e3d4c..00000000
--- a/apps/web/registry/miami/example/grid-pattern-demo.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client'
-
-import { ny } from '~/lib/utils'
-import GridPattern from '~/registry/miami/ui/grid-pattern'
-
-function GridPatternDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl ">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Grid Pattern
-         </p>
-         <GridPattern
-            squares={[
-               [4, 4],
-               [5, 1],
-               [8, 2],
-               [6, 6],
-               [10, 5],
-               [13, 3],
-            ]}
-            className={ny(
-               '[mask-image:radial-gradient(200px_circle_at_center,white,transparent)]',
-               'inset-x-0 inset-y-[-30%] h-[200%] skew-y-12',
-            )}
-         />
-      </div>
-   )
-}
-
-export default GridPatternDemo
diff --git a/apps/web/registry/miami/example/grid-pattern-linear-gradient.tsx b/apps/web/registry/miami/example/grid-pattern-linear-gradient.tsx
deleted file mode 100644
index 56808218..00000000
--- a/apps/web/registry/miami/example/grid-pattern-linear-gradient.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { ny } from '~/lib/utils'
-import GridPattern from '~/registry/miami/ui/grid-pattern'
-
-function GridPatternLinearGradient() {
-   return (
-      <div className="bg-background relative flex size-full items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Grid Pattern
-         </p>
-         <GridPattern
-            width={20}
-            height={20}
-            x={-1}
-            y={-1}
-            className={ny(
-               '[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ',
-            )}
-         />
-      </div>
-   )
-}
-
-export default GridPatternLinearGradient
diff --git a/apps/web/registry/miami/example/hero-video-demo.tsx b/apps/web/registry/miami/example/hero-video-demo.tsx
deleted file mode 100644
index 83fc72fe..00000000
--- a/apps/web/registry/miami/example/hero-video-demo.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from '~/components/ui/button'
-import HeroVideo, { HeroVideoAction } from '~/registry/miami/ui/hero-video'
-import { MagicCard, MagicContainer } from '~/registry/miami/ui/magic-card'
-
-function PlayButton() {
-   return (
-      <svg
-         xmlns="http://www.w3.org/2000/svg"
-         viewBox="0 0 24 24"
-         fill="currentColor"
-         className="dark:text-white"
-      >
-         <path
-            fillRule="evenodd"
-            d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
-            clipRule="evenodd"
-         />
-      </svg>
-   )
-}
-
-export default function HeroVideoDemo() {
-   return (
-      <div className="bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Hero Video
-         </span>
-
-         <MagicContainer>
-            <MagicCard className="min-h-[400px] [mask:linear-gradient(0deg,transparent_40%,#fff_100%)]">
-               <HeroVideo
-                  title="Nyxb UI Demo"
-                  image="https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200"
-               >
-                  <HeroVideoAction>
-                     <Button className="size-20 rounded-full" variant="outline">
-                        <PlayButton />
-                     </Button>
-                  </HeroVideoAction>
-                  <video
-                     autoPlay
-                     className="rounded-xl dark:border"
-                     playsInline
-                     src="https://cdn.nyxbui.design/globe.mp4"
-                  />
-               </HeroVideo>
-            </MagicCard>
-         </MagicContainer>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/hero-video-dialog-demo-top-in-bottom-out.tsx b/apps/web/registry/miami/example/hero-video-dialog-demo-top-in-bottom-out.tsx
deleted file mode 100644
index 0f2d58b3..00000000
--- a/apps/web/registry/miami/example/hero-video-dialog-demo-top-in-bottom-out.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import HeroVideoDialog from '~/registry/miami/ui/hero-video-dialog'
-
-export default function HeroVideoDialogDemoTopInBottomOut() {
-   return (
-      <div className="relative">
-         <HeroVideoDialog
-            className="block dark:hidden"
-            animationStyle="top-in-bottom-out"
-            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
-            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-light.png"
-            thumbnailAlt="Hero Video"
-         />
-         <HeroVideoDialog
-            className="hidden dark:block"
-            animationStyle="top-in-bottom-out"
-            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
-            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-dark.png"
-            thumbnailAlt="Hero Video"
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/hero-video-dialog-demo.tsx b/apps/web/registry/miami/example/hero-video-dialog-demo.tsx
deleted file mode 100644
index 346d127d..00000000
--- a/apps/web/registry/miami/example/hero-video-dialog-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import HeroVideoDialog from '~/registry/miami/ui/hero-video-dialog'
-
-export default function HeroVideoDialogDemo() {
-   return (
-      <div className="relative">
-         <HeroVideoDialog
-            className="block dark:hidden"
-            animationStyle="from-center"
-            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
-            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-light.png"
-            thumbnailAlt="Hero Video"
-         />
-         <HeroVideoDialog
-            className="hidden dark:block"
-            animationStyle="from-center"
-            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
-            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-dark.png"
-            thumbnailAlt="Hero Video"
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/hero-video-youtube.tsx b/apps/web/registry/miami/example/hero-video-youtube.tsx
deleted file mode 100644
index 6cda2e44..00000000
--- a/apps/web/registry/miami/example/hero-video-youtube.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Button } from '~/components/ui/button'
-import HeroVideo, { HeroVideoAction } from '~/registry/miami/ui/hero-video'
-import { MagicCard, MagicContainer } from '~/registry/miami/ui/magic-card'
-
-function PlayButton() {
-   return (
-      <svg
-         xmlns="http://www.w3.org/2000/svg"
-         viewBox="0 0 24 24"
-         fill="currentColor"
-         className="dark:text-white"
-      >
-         <path
-            fillRule="evenodd"
-            d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
-            clipRule="evenodd"
-         />
-      </svg>
-   )
-}
-
-export default function HeroVideoDemo() {
-   return (
-      <div className="bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Never gonna give you up
-         </span>
-         {/* Magic Card  */}
-         <MagicContainer className="relative">
-            <MagicCard className="min-h-[400px] [mask:linear-gradient(0deg,transparent_20%,#fff_100%)]">
-               <HeroVideo
-                  title="Never gonna give you up"
-                  image="https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024"
-               >
-                  <HeroVideoAction>
-                     <Button className="size-20 rounded-full" variant="outline">
-                        <PlayButton />
-                     </Button>
-                  </HeroVideoAction>
-                  <iframe
-                     height="500"
-                     className="h-[500px] rounded-xl border"
-                     src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=FmFbhzaToJQ9iXN4"
-                     title="YouTube video player"
-                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  />
-               </HeroVideo>
-            </MagicCard>
-         </MagicContainer>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/hover-card-demo.tsx b/apps/web/registry/miami/example/hover-card-demo.tsx
deleted file mode 100644
index 613b4ef2..00000000
--- a/apps/web/registry/miami/example/hover-card-demo.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { CalendarIcon } from '@radix-ui/react-icons'
-
-import {
-   Avatar,
-   AvatarFallback,
-   AvatarImage,
-} from '~/registry/miami/ui/avatar'
-import { Button } from '~/registry/miami/ui/button'
-import {
-   HoverCard,
-   HoverCardContent,
-   HoverCardTrigger,
-} from '~/registry/miami/ui/hover-card'
-
-export default function HoverCardDemo() {
-   return (
-      <HoverCard>
-         <HoverCardTrigger asChild>
-            <Button variant="link">@nextjs</Button>
-         </HoverCardTrigger>
-         <HoverCardContent className="w-80">
-            <div className="flex justify-between space-x-4">
-               <Avatar>
-                  <AvatarImage src="https://github.com/vercel.png" />
-                  <AvatarFallback>VC</AvatarFallback>
-               </Avatar>
-               <div className="space-y-1">
-                  <h4 className="text-sm font-semibold">@nextjs</h4>
-                  <p className="text-sm">
-                     The React Framework – created and maintained by @vercel.
-                  </p>
-                  <div className="flex items-center pt-2">
-                     <CalendarIcon className="mr-2 size-4 opacity-70" />
-                     {' '}
-                     <span className="text-muted-foreground text-xs">
-                        Joined December 2021
-                     </span>
-                  </div>
-               </div>
-            </div>
-         </HoverCardContent>
-      </HoverCard>
-   )
-}
diff --git a/apps/web/registry/miami/example/hyper-text-demo.tsx b/apps/web/registry/miami/example/hyper-text-demo.tsx
deleted file mode 100644
index 75b98ec2..00000000
--- a/apps/web/registry/miami/example/hyper-text-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import HyperText from '~/registry/miami/ui/hyper-text'
-
-export default function HyperTextDemo() {
-   return (
-      <HyperText
-         className="text-4xl font-bold text-black dark:text-white"
-         text="Hyper Text"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/icon-cloud-demo.tsx b/apps/web/registry/miami/example/icon-cloud-demo.tsx
deleted file mode 100644
index 26f50de3..00000000
--- a/apps/web/registry/miami/example/icon-cloud-demo.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import IconCloud from '~/registry/miami/ui/icon-cloud'
-
-const slugs = [
-   'typescript',
-   'javascript',
-   'dart',
-   'java',
-   'react',
-   'flutter',
-   'android',
-   'html5',
-   'css3',
-   'nodedotjs',
-   'express',
-   'nextdotjs',
-   'prisma',
-   'amazonaws',
-   'postgresql',
-   'firebase',
-   'nginx',
-   'vercel',
-   'testinglibrary',
-   'jest',
-   'cypress',
-   'docker',
-   'git',
-   'jira',
-   'github',
-   'gitlab',
-   'visualstudiocode',
-   'androidstudio',
-   'sonarqube',
-   'figma',
-]
-
-export default function IconCloudDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-20 pb-20 pt-8 ">
-         <IconCloud iconSlugs={slugs} />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/input-demo.tsx b/apps/web/registry/miami/example/input-demo.tsx
deleted file mode 100644
index 2696b280..00000000
--- a/apps/web/registry/miami/example/input-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Input } from '~/registry/miami/ui/input'
-
-export default function InputDemo() {
-   return <Input type="email" placeholder="Email" />
-}
diff --git a/apps/web/registry/miami/example/input-disabled.tsx b/apps/web/registry/miami/example/input-disabled.tsx
deleted file mode 100644
index f54f3648..00000000
--- a/apps/web/registry/miami/example/input-disabled.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Input } from '~/registry/miami/ui/input'
-
-export default function InputDisabled() {
-   return <Input disabled type="email" placeholder="Email" />
-}
diff --git a/apps/web/registry/miami/example/input-file.tsx b/apps/web/registry/miami/example/input-file.tsx
deleted file mode 100644
index 7a3dae47..00000000
--- a/apps/web/registry/miami/example/input-file.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export default function InputFile() {
-   return (
-      <div className="grid w-full max-w-sm items-center gap-1.5">
-         <Label htmlFor="picture">Picture</Label>
-         <Input id="picture" type="file" />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/input-form.tsx b/apps/web/registry/miami/example/input-form.tsx
deleted file mode 100644
index 823c6a83..00000000
--- a/apps/web/registry/miami/example/input-form.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/miami/ui/form'
-import { Input } from '~/registry/miami/ui/input'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const FormSchema = z.object({
-   username: z.string().min(2, {
-      message: 'Username must be at least 2 characters.',
-   }),
-})
-
-export default function InputForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-      defaultValues: {
-         username: '',
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="username"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Username</FormLabel>
-                     <FormControl>
-                        <Input placeholder="nyxb" {...field} />
-                     </FormControl>
-                     <FormDescription>
-                        This is your public display name.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/input-otp-controlled.tsx b/apps/web/registry/miami/example/input-otp-controlled.tsx
deleted file mode 100644
index f8aa9b84..00000000
--- a/apps/web/registry/miami/example/input-otp-controlled.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSlot,
-} from '~/registry/miami/ui/input-otp'
-
-export default function InputOTPControlled() {
-   const [value, setValue] = React.useState('')
-
-   return (
-      <div className="space-y-2">
-         <InputOTP
-            maxLength={6}
-            value={value}
-            onChange={value => setValue(value)}
-         >
-            <InputOTPGroup>
-               <InputOTPSlot index={0} />
-               <InputOTPSlot index={1} />
-               <InputOTPSlot index={2} />
-               <InputOTPSlot index={3} />
-               <InputOTPSlot index={4} />
-               <InputOTPSlot index={5} />
-            </InputOTPGroup>
-         </InputOTP>
-         <div className="text-center text-sm">
-            {value === ''
-               ? (
-                     <>Enter your one-time password.</>
-                  )
-               : (
-                     <>
-                        You entered:
-                        {value}
-                     </>
-                  )}
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/input-otp-demo.tsx b/apps/web/registry/miami/example/input-otp-demo.tsx
deleted file mode 100644
index f6de10cc..00000000
--- a/apps/web/registry/miami/example/input-otp-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSeparator,
-   InputOTPSlot,
-} from '~/registry/miami/ui/input-otp'
-
-export default function InputOTPDemo() {
-   return (
-      <InputOTP maxLength={6}>
-         <InputOTPGroup>
-            <InputOTPSlot index={0} />
-            <InputOTPSlot index={1} />
-            <InputOTPSlot index={2} />
-         </InputOTPGroup>
-         <InputOTPSeparator />
-         <InputOTPGroup>
-            <InputOTPSlot index={3} />
-            <InputOTPSlot index={4} />
-            <InputOTPSlot index={5} />
-         </InputOTPGroup>
-      </InputOTP>
-   )
-}
diff --git a/apps/web/registry/miami/example/input-otp-disabled.tsx b/apps/web/registry/miami/example/input-otp-disabled.tsx
deleted file mode 100644
index 35c5c58e..00000000
--- a/apps/web/registry/miami/example/input-otp-disabled.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSeparator,
-   InputOTPSlot,
-} from '~/registry/default/ui/input-otp'
-
-export default function InputOTPDemo() {
-   return (
-      <InputOTP maxLength={6} disabled>
-         <InputOTPGroup>
-            <InputOTPSlot index={0} />
-            <InputOTPSlot index={1} />
-            <InputOTPSlot index={2} />
-         </InputOTPGroup>
-         <InputOTPSeparator />
-         <InputOTPGroup>
-            <InputOTPSlot index={3} />
-            <InputOTPSlot index={4} />
-            <InputOTPSlot index={5} />
-         </InputOTPGroup>
-      </InputOTP>
-   )
-}
diff --git a/apps/web/registry/miami/example/input-otp-form.tsx b/apps/web/registry/miami/example/input-otp-form.tsx
deleted file mode 100644
index 7cd069a5..00000000
--- a/apps/web/registry/miami/example/input-otp-form.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/miami/ui/form'
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSlot,
-} from '~/registry/miami/ui/input-otp'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const FormSchema = z.object({
-   pin: z.string().min(6, {
-      message: 'Your one-time password must be 6 characters.',
-   }),
-})
-
-export default function InputOTPForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-      defaultValues: {
-         pin: '',
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="pin"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>One-Time Password</FormLabel>
-                     <FormControl>
-                        <InputOTP maxLength={6} {...field}>
-                           <InputOTPGroup>
-                              <InputOTPSlot index={0} />
-                              <InputOTPSlot index={1} />
-                              <InputOTPSlot index={2} />
-                              <InputOTPSlot index={3} />
-                              <InputOTPSlot index={4} />
-                              <InputOTPSlot index={5} />
-                           </InputOTPGroup>
-                        </InputOTP>
-                     </FormControl>
-                     <FormDescription>
-                        Please enter the one-time password sent to your phone.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/input-otp-pattern.tsx b/apps/web/registry/miami/example/input-otp-pattern.tsx
deleted file mode 100644
index dd29c422..00000000
--- a/apps/web/registry/miami/example/input-otp-pattern.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'
-
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSlot,
-} from '~/registry/miami/ui/input-otp'
-
-export default function InputOTPPattern() {
-   return (
-      <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS} inputMode="text" spellCheck="false">
-         <InputOTPGroup>
-            <InputOTPSlot index={0} />
-            <InputOTPSlot index={1} />
-            <InputOTPSlot index={2} />
-            <InputOTPSlot index={3} />
-            <InputOTPSlot index={4} />
-            <InputOTPSlot index={5} />
-         </InputOTPGroup>
-      </InputOTP>
-   )
-}
diff --git a/apps/web/registry/miami/example/input-otp-separator.tsx b/apps/web/registry/miami/example/input-otp-separator.tsx
deleted file mode 100644
index 8fc54d22..00000000
--- a/apps/web/registry/miami/example/input-otp-separator.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-
-import {
-   InputOTP,
-   InputOTPGroup,
-   InputOTPSeparator,
-   InputOTPSlot,
-} from '~/registry/miami/ui/input-otp'
-
-export default function InputOTPWithSeparator() {
-   return (
-      <InputOTP maxLength={6}>
-         <InputOTPGroup>
-            <InputOTPSlot index={0} />
-            <InputOTPSlot index={1} />
-         </InputOTPGroup>
-         <InputOTPSeparator />
-         <InputOTPGroup>
-            <InputOTPSlot index={2} />
-            <InputOTPSlot index={3} />
-         </InputOTPGroup>
-         <InputOTPSeparator />
-         <InputOTPGroup>
-            <InputOTPSlot index={4} />
-            <InputOTPSlot index={5} />
-         </InputOTPGroup>
-      </InputOTP>
-   )
-}
diff --git a/apps/web/registry/miami/example/input-phone-default.tsx b/apps/web/registry/miami/example/input-phone-default.tsx
deleted file mode 100644
index 439c3349..00000000
--- a/apps/web/registry/miami/example/input-phone-default.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react'
-
-import { InputPhone } from '~/registry/miami/ui/input-phone'
-
-export default function InputPhoneDefault() {
-   const [value, setValue] = React.useState('')
-
-   return <InputPhone value={value} onChange={setValue} defaultCountry="US" />
-}
diff --git a/apps/web/registry/miami/example/input-phone-demo.tsx b/apps/web/registry/miami/example/input-phone-demo.tsx
deleted file mode 100644
index e8564633..00000000
--- a/apps/web/registry/miami/example/input-phone-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-
-import { InputPhone } from '~/registry/miami/ui/input-phone'
-
-export default function InputPhoneDemo() {
-   const [value, setValue] = React.useState('')
-
-   return (
-      <InputPhone
-         value={value}
-         onChange={setValue}
-         placeholder="Enter a phone number"
-         defaultCountry="US"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/input-phone-form.tsx b/apps/web/registry/miami/example/input-phone-form.tsx
deleted file mode 100644
index 19da0386..00000000
--- a/apps/web/registry/miami/example/input-phone-form.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { isValidPhoneNumber } from 'react-phone-number-input'
-import { z } from 'zod'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/miami/ui/form'
-import { InputPhone } from '~/registry/miami/ui/input-phone'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const FormSchema = z.object({
-   phone: z
-      .string()
-      .refine(isValidPhoneNumber, { message: 'Invalid phone number' }),
-})
-
-export default function InputPhoneForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-      defaultValues: {
-         phone: '',
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="phone"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Phone Number</FormLabel>
-                     <FormControl>
-                        <InputPhone placeholder="Enter a phone number" {...field} />
-                     </FormControl>
-                     <FormDescription>
-                        Please enter a valid phone number.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/input-phone-initial.tsx b/apps/web/registry/miami/example/input-phone-initial.tsx
deleted file mode 100644
index 91daa785..00000000
--- a/apps/web/registry/miami/example/input-phone-initial.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react'
-
-import { InputPhone } from '~/registry/miami/ui/input-phone'
-
-export default function InputPhoneInitial() {
-   const [value, setValue] = React.useState('')
-
-   return (
-      <InputPhone
-         value={value}
-         onChange={setValue}
-         initialValueFormat="national"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/input-phone-international.tsx b/apps/web/registry/miami/example/input-phone-international.tsx
deleted file mode 100644
index 0df7dbe6..00000000
--- a/apps/web/registry/miami/example/input-phone-international.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-
-import { InputPhone } from '~/registry/miami/ui/input-phone'
-
-export default function InputPhoneInternational() {
-   const [value, setValue] = React.useState('')
-
-   return (
-      <InputPhone
-         value={value}
-         onChange={setValue}
-         international
-         defaultCountry="US"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/input-phone-national.tsx b/apps/web/registry/miami/example/input-phone-national.tsx
deleted file mode 100644
index be8fbd0b..00000000
--- a/apps/web/registry/miami/example/input-phone-national.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-
-import { InputPhone } from '~/registry/miami/ui/input-phone'
-
-export default function InputPhoneNational() {
-   const [value, setValue] = React.useState('')
-
-   return (
-      <InputPhone
-         value={value}
-         onChange={setValue}
-         international={false}
-         defaultCountry="US"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/input-with-button.tsx b/apps/web/registry/miami/example/input-with-button.tsx
deleted file mode 100644
index 734b7494..00000000
--- a/apps/web/registry/miami/example/input-with-button.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import { Input } from '~/registry/miami/ui/input'
-
-export default function InputWithButton() {
-   return (
-      <div className="flex w-full max-w-sm items-center space-x-2">
-         <Input type="email" placeholder="Email" />
-         <Button type="submit">Subscribe</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/input-with-label.tsx b/apps/web/registry/miami/example/input-with-label.tsx
deleted file mode 100644
index 5a1e8146..00000000
--- a/apps/web/registry/miami/example/input-with-label.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export default function InputWithLabel() {
-   return (
-      <div className="grid w-full max-w-sm items-center gap-1.5">
-         <Label htmlFor="email">Email</Label>
-         <Input type="email" id="email" placeholder="Email" />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/input-with-text.tsx b/apps/web/registry/miami/example/input-with-text.tsx
deleted file mode 100644
index 10f41416..00000000
--- a/apps/web/registry/miami/example/input-with-text.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-
-export default function InputWithText() {
-   return (
-      <div className="grid w-full max-w-sm items-center gap-1.5">
-         <Label htmlFor="email-2">Email</Label>
-         <Input type="email" id="email-2" placeholder="Email" />
-         <p className="text-muted-foreground text-sm">Enter your email address.</p>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/iphone-15-pro-demo-2.tsx b/apps/web/registry/miami/example/iphone-15-pro-demo-2.tsx
deleted file mode 100644
index b39d88db..00000000
--- a/apps/web/registry/miami/example/iphone-15-pro-demo-2.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Iphone15Pro from '~/registry/miami/ui/iphone-15-pro'
-
-export default function Iphone15ProDemo() {
-   return (
-      <div className="relative">
-         <Iphone15Pro
-            className="size-full"
-            src="https://via.placeholder.com/430x880"
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/iphone-15-pro-demo.tsx b/apps/web/registry/miami/example/iphone-15-pro-demo.tsx
deleted file mode 100644
index cbcbc238..00000000
--- a/apps/web/registry/miami/example/iphone-15-pro-demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Iphone15Pro from '~/registry/miami/ui/iphone-15-pro'
-
-export default function Iphone15ProDemo() {
-   return (
-      <div className="relative">
-         <Iphone15Pro className="size-full" />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/label-demo.tsx b/apps/web/registry/miami/example/label-demo.tsx
deleted file mode 100644
index f02ffca6..00000000
--- a/apps/web/registry/miami/example/label-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Checkbox } from '~/registry/miami/ui/checkbox'
-import { Label } from '~/registry/miami/ui/label'
-
-export default function LabelDemo() {
-   return (
-      <div>
-         <div className="flex items-center space-x-2">
-            <Checkbox id="terms" />
-            <Label htmlFor="terms">Accept terms and conditions</Label>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/letter-pullup-demo.tsx b/apps/web/registry/miami/example/letter-pullup-demo.tsx
deleted file mode 100644
index 82a8d2ac..00000000
--- a/apps/web/registry/miami/example/letter-pullup-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import LetterPullup from '~/registry/miami/ui/letter-pullup'
-
-export default async function LetterPullupDemo() {
-   return <LetterPullup words="Staggered Letter Pull Up" delay={0.05} />
-}
diff --git a/apps/web/registry/miami/example/magic-card-demo.tsx b/apps/web/registry/miami/example/magic-card-demo.tsx
deleted file mode 100644
index 08ead24d..00000000
--- a/apps/web/registry/miami/example/magic-card-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { MagicCard, MagicContainer } from '~/registry/miami/ui/magic-card'
-
-export default function MagicCardDemo() {
-   return (
-      <MagicContainer className="flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row">
-         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
-            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
-               Magic
-            </p>
-            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
-         </MagicCard>
-         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
-            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
-               Card
-            </p>
-            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
-         </MagicCard>
-         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
-            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
-               Demo
-            </p>
-            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
-         </MagicCard>
-      </MagicContainer>
-   )
-}
diff --git a/apps/web/registry/miami/example/magic-card-gradient.tsx b/apps/web/registry/miami/example/magic-card-gradient.tsx
deleted file mode 100644
index 6d2692bf..00000000
--- a/apps/web/registry/miami/example/magic-card-gradient.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { MagicCard, MagicContainer } from '~/registry/miami/ui/magic-card'
-
-export default function MagicCardGradient() {
-   return (
-      <MagicContainer className="flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row">
-         <MagicCard
-            borderWidth={3}
-            className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl"
-         >
-            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
-               Magic
-            </p>
-            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
-         </MagicCard>
-         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl">
-            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
-               Card
-            </p>
-            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
-         </MagicCard>
-         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl">
-            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
-               Demo
-            </p>
-            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
-         </MagicCard>
-      </MagicContainer>
-   )
-}
diff --git a/apps/web/registry/miami/example/marquee-3d.tsx b/apps/web/registry/miami/example/marquee-3d.tsx
deleted file mode 100644
index 06ff3529..00000000
--- a/apps/web/registry/miami/example/marquee-3d.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import Marquee from '~/registry/miami/ui/marquee'
-
-const logos = [
-   {
-      name: 'Microsoft',
-      img: 'https://picsum.photos/id/1/200/300',
-   },
-   {
-      name: 'Apple',
-      img: 'https://picsum.photos/id/2/200/300',
-   },
-   {
-      name: 'Google',
-      img: 'https://picsum.photos/id/3/200/300',
-   },
-   {
-      name: 'Facebook',
-      img: 'https://picsum.photos/id/4/200/300',
-   },
-   {
-      name: 'LinkedIn',
-      img: 'https://picsum.photos/id/5/200/300',
-   },
-   {
-      name: 'Twitter',
-      img: 'https://picsum.photos/id/6/200/300',
-   },
-]
-
-function Marquee3D() {
-   return (
-      <div className="bg-background relative flex h-full w-96 flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border px-20 md:shadow-xl">
-         <div className="flex flex-row gap-4 [perspective:300px]">
-            <Marquee
-               className="h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]"
-               vertical
-               style={{
-                  transform:
-              'translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)',
-               }}
-            >
-               {logos.map((data, idx) => (
-                  <img
-                     key={idx}
-                     src={data.img}
-                     alt={data.name}
-                     className="mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300"
-                  />
-               ))}
-            </Marquee>
-         </div>
-
-         <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
-         <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
-      </div>
-   )
-}
-
-export default Marquee3D
diff --git a/apps/web/registry/miami/example/marquee-demo-vertical.tsx b/apps/web/registry/miami/example/marquee-demo-vertical.tsx
deleted file mode 100644
index 5e89e453..00000000
--- a/apps/web/registry/miami/example/marquee-demo-vertical.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { ny } from '~/lib/utils'
-import Marquee from '~/registry/miami/ui/marquee'
-
-const reviews = [
-   {
-      name: 'Jack',
-      username: '@jack',
-      body: 'I\'ve never seen anything like this before. It\'s amazing. I love it.',
-      img: 'https://avatar.vercel.sh/jack',
-   },
-   {
-      name: 'Jill',
-      username: '@jill',
-      body: 'I don\'t know what to say. I\'m speechless. This is amazing.',
-      img: 'https://avatar.vercel.sh/jill',
-   },
-   {
-      name: 'John',
-      username: '@john',
-      body: 'I\'m at a loss for words. This is amazing. I love it.',
-      img: 'https://avatar.vercel.sh/john',
-   },
-]
-
-const firstRow = reviews.slice(0, reviews.length / 2)
-const secondRow = reviews.slice(reviews.length / 2)
-
-function ReviewCard({
-   img,
-   name,
-   username,
-   body,
-}: {
-   img: string
-   name: string
-   username: string
-   body: string
-}) {
-   return (
-      <figure
-         className={ny(
-            'relative h-40 w-36 cursor-pointer overflow-hidden rounded-xl border p-4',
-            // light styles
-            'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',
-            // dark styles
-            'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',
-         )}
-      >
-         <div className="flex flex-row items-center gap-2">
-            <img className="rounded-full" width="32" height="32" alt="" src={img} />
-            <div className="flex flex-col">
-               <figcaption className="text-sm font-medium dark:text-white">
-                  {name}
-               </figcaption>
-               <p className="text-xs font-medium dark:text-white/40">{username}</p>
-            </div>
-         </div>
-         <blockquote className="mt-2 text-sm">{body}</blockquote>
-      </figure>
-   )
-}
-
-function MarqueeDemoVertical() {
-   return (
-      <div className="bg-background relative flex h-96 flex-row items-center justify-center overflow-hidden rounded-lg border sm:px-20 md:shadow-xl">
-         <Marquee pauseOnHover vertical className="[--duration:20s]">
-            {firstRow.map(review => (
-               <ReviewCard key={review.username} {...review} />
-            ))}
-         </Marquee>
-         <Marquee reverse pauseOnHover vertical className="[--duration:20s]">
-            {secondRow.map(review => (
-               <ReviewCard key={review.username} {...review} />
-            ))}
-         </Marquee>
-         <div className="dark:from-background pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white"></div>
-         <div className="dark:from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white"></div>
-      </div>
-   )
-}
-
-export default MarqueeDemoVertical
diff --git a/apps/web/registry/miami/example/marquee-demo.tsx b/apps/web/registry/miami/example/marquee-demo.tsx
deleted file mode 100644
index 6ee9cf1c..00000000
--- a/apps/web/registry/miami/example/marquee-demo.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { ny } from '~/lib/utils'
-import Marquee from '~/registry/miami/ui/marquee'
-
-const reviews = [
-   {
-      name: 'Jack',
-      username: '@jack',
-      body: 'I\'ve never seen anything like this before. It\'s amazing. I love it.',
-      img: 'https://avatar.vercel.sh/jack',
-   },
-   {
-      name: 'Jill',
-      username: '@jill',
-      body: 'I don\'t know what to say. I\'m speechless. This is amazing.',
-      img: 'https://avatar.vercel.sh/jill',
-   },
-   {
-      name: 'John',
-      username: '@john',
-      body: 'I\'m at a loss for words. This is amazing. I love it.',
-      img: 'https://avatar.vercel.sh/john',
-   },
-   {
-      name: 'Jane',
-      username: '@jane',
-      body: 'I\'m at a loss for words. This is amazing. I love it.',
-      img: 'https://avatar.vercel.sh/jane',
-   },
-   {
-      name: 'Jenny',
-      username: '@jenny',
-      body: 'I\'m at a loss for words. This is amazing. I love it.',
-      img: 'https://avatar.vercel.sh/jenny',
-   },
-   {
-      name: 'James',
-      username: '@james',
-      body: 'I\'m at a loss for words. This is amazing. I love it.',
-      img: 'https://avatar.vercel.sh/james',
-   },
-]
-
-const firstRow = reviews.slice(0, reviews.length / 2)
-const secondRow = reviews.slice(reviews.length / 2)
-
-function ReviewCard({
-   img,
-   name,
-   username,
-   body,
-}: {
-   img: string
-   name: string
-   username: string
-   body: string
-}) {
-   return (
-      <figure
-         className={ny(
-            'relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4',
-            // light styles
-            'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',
-            // dark styles
-            'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',
-         )}
-      >
-         <div className="flex flex-row items-center gap-2">
-            <img className="rounded-full" width="32" height="32" alt="" src={img} />
-            <div className="flex flex-col">
-               <figcaption className="text-sm font-medium dark:text-white">
-                  {name}
-               </figcaption>
-               <p className="text-xs font-medium dark:text-white/40">{username}</p>
-            </div>
-         </div>
-         <blockquote className="mt-2 text-sm">{body}</blockquote>
-      </figure>
-   )
-}
-
-function MarqueeDemo() {
-   return (
-      <div className="bg-background relative flex size-full flex-col items-center justify-center overflow-hidden rounded-lg border py-20 md:shadow-xl">
-         <Marquee pauseOnHover className="[--duration:20s]">
-            {firstRow.map(review => (
-               <ReviewCard key={review.username} {...review} />
-            ))}
-         </Marquee>
-         <Marquee reverse pauseOnHover className="[--duration:20s]">
-            {secondRow.map(review => (
-               <ReviewCard key={review.username} {...review} />
-            ))}
-         </Marquee>
-         <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
-         <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
-      </div>
-   )
-}
-
-export default MarqueeDemo
diff --git a/apps/web/registry/miami/example/marquee-logos.tsx b/apps/web/registry/miami/example/marquee-logos.tsx
deleted file mode 100644
index 34dc97f4..00000000
--- a/apps/web/registry/miami/example/marquee-logos.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ny } from '~/lib/utils'
-import Marquee from '~/registry/miami/ui/marquee'
-
-const logos = [
-   {
-      name: 'Microsoft',
-      img: 'https://cdn.simpleicons.org/microsoft/000/fff',
-   },
-   {
-      name: 'Apple',
-      img: 'https://cdn.simpleicons.org/apple/000/fff',
-   },
-   {
-      name: 'Google',
-      img: 'https://cdn.simpleicons.org/google/000/fff',
-   },
-   {
-      name: 'Facebook',
-      img: 'https://cdn.simpleicons.org/facebook/000/fff',
-   },
-   {
-      name: 'LinkedIn',
-      img: 'https://cdn.simpleicons.org/linkedin/000/fff',
-   },
-   {
-      name: 'Twitter',
-      img: 'https://cdn.simpleicons.org/twitter/000/fff',
-   },
-]
-
-function Logo({ name, img }: { name: string, img: string }) {
-   return (
-      <div className={ny('size-12 cursor-pointer')}>
-         <img src={img} alt={name} />
-      </div>
-   )
-}
-
-function MarqueeLogos() {
-   return (
-      <div className="bg-background relative flex size-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border py-20 md:shadow-xl">
-         <Marquee className="[--gap:3rem]">
-            {logos.map((logo, idx) => (
-               <Logo key={idx} {...logo} />
-            ))}
-         </Marquee>
-         <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
-         <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
-      </div>
-   )
-}
-
-export default MarqueeLogos
diff --git a/apps/web/registry/miami/example/menubar-demo.tsx b/apps/web/registry/miami/example/menubar-demo.tsx
deleted file mode 100644
index 04fc38f8..00000000
--- a/apps/web/registry/miami/example/menubar-demo.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import {
-   Menubar,
-   MenubarCheckboxItem,
-   MenubarContent,
-   MenubarItem,
-   MenubarMenu,
-   MenubarRadioGroup,
-   MenubarRadioItem,
-   MenubarSeparator,
-   MenubarShortcut,
-   MenubarSub,
-   MenubarSubContent,
-   MenubarSubTrigger,
-   MenubarTrigger,
-} from '~/registry/miami/ui/menubar'
-
-export default function MenubarDemo() {
-   return (
-      <Menubar>
-         <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-               <MenubarItem>
-                  New Tab
-                  {' '}
-                  <MenubarShortcut>⌘T</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem>
-                  New Window
-                  {' '}
-                  <MenubarShortcut>⌘N</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem disabled>New Incognito Window</MenubarItem>
-               <MenubarSeparator />
-               <MenubarSub>
-                  <MenubarSubTrigger>Share</MenubarSubTrigger>
-                  <MenubarSubContent>
-                     <MenubarItem>Email link</MenubarItem>
-                     <MenubarItem>Messages</MenubarItem>
-                     <MenubarItem>Notes</MenubarItem>
-                  </MenubarSubContent>
-               </MenubarSub>
-               <MenubarSeparator />
-               <MenubarItem>
-                  Print...
-                  {' '}
-                  <MenubarShortcut>⌘P</MenubarShortcut>
-               </MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-         <MenubarMenu>
-            <MenubarTrigger>Edit</MenubarTrigger>
-            <MenubarContent>
-               <MenubarItem>
-                  Undo
-                  {' '}
-                  <MenubarShortcut>⌘Z</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem>
-                  Redo
-                  {' '}
-                  <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-               </MenubarItem>
-               <MenubarSeparator />
-               <MenubarSub>
-                  <MenubarSubTrigger>Find</MenubarSubTrigger>
-                  <MenubarSubContent>
-                     <MenubarItem>Search the web</MenubarItem>
-                     <MenubarSeparator />
-                     <MenubarItem>Find...</MenubarItem>
-                     <MenubarItem>Find Next</MenubarItem>
-                     <MenubarItem>Find Previous</MenubarItem>
-                  </MenubarSubContent>
-               </MenubarSub>
-               <MenubarSeparator />
-               <MenubarItem>Cut</MenubarItem>
-               <MenubarItem>Copy</MenubarItem>
-               <MenubarItem>Paste</MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-         <MenubarMenu>
-            <MenubarTrigger>View</MenubarTrigger>
-            <MenubarContent>
-               <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-               <MenubarCheckboxItem checked>
-                  Always Show Full URLs
-               </MenubarCheckboxItem>
-               <MenubarSeparator />
-               <MenubarItem inset>
-                  Reload
-                  {' '}
-                  <MenubarShortcut>⌘R</MenubarShortcut>
-               </MenubarItem>
-               <MenubarItem disabled inset>
-                  Force Reload
-                  {' '}
-                  <MenubarShortcut>⇧⌘R</MenubarShortcut>
-               </MenubarItem>
-               <MenubarSeparator />
-               <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-               <MenubarSeparator />
-               <MenubarItem inset>Hide Sidebar</MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-         <MenubarMenu>
-            <MenubarTrigger>Profiles</MenubarTrigger>
-            <MenubarContent>
-               <MenubarRadioGroup value="benoit">
-                  <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-                  <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-                  <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-               </MenubarRadioGroup>
-               <MenubarSeparator />
-               <MenubarItem inset>Edit...</MenubarItem>
-               <MenubarSeparator />
-               <MenubarItem inset>Add Profile...</MenubarItem>
-            </MenubarContent>
-         </MenubarMenu>
-      </Menubar>
-   )
-}
diff --git a/apps/web/registry/miami/example/meteors-demo.tsx b/apps/web/registry/miami/example/meteors-demo.tsx
deleted file mode 100644
index dbe75cab..00000000
--- a/apps/web/registry/miami/example/meteors-demo.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Meteors from '~/registry/miami/ui/meteors'
-
-export default function MeteorDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <Meteors number={30} />
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
-            Meteors
-         </p>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/mode-toggle-group.tsx b/apps/web/registry/miami/example/mode-toggle-group.tsx
deleted file mode 100644
index 63792c67..00000000
--- a/apps/web/registry/miami/example/mode-toggle-group.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { LaptopIcon, MoonIcon, SunIcon } from '@radix-ui/react-icons'
-import { useEffect, useState } from 'react'
-import { useTheme } from 'next-themes'
-
-import {
-   ToggleGroup,
-   ToggleGroupItem,
-} from '~/registry/miami/ui/toggle-group'
-
-export default function ModeToggleGroup() {
-   const { setTheme, theme } = useTheme()
-   const [currentTheme, setCurrentTheme] = useState<string>('')
-
-   useEffect(() => {
-      if (theme === 'system')
-         setCurrentTheme('system')
-      else if (theme === 'dark')
-         setCurrentTheme('dark')
-      else if (theme === 'light')
-         setCurrentTheme('light')
-   }, [theme])
-
-   return (
-      <ToggleGroup type="single" variant="outline" className="scale-90 rounded-full border p-1" value={currentTheme}>
-         <ToggleGroupItem
-            value="light"
-            onClick={() => setTheme('light')}
-            disabled={theme === 'light'}
-            className="disabled:bg-accent rounded-full disabled:opacity-100"
-         >
-            <SunIcon className="size-5" />
-         </ToggleGroupItem>
-         <ToggleGroupItem
-            value="system"
-            onClick={() => setTheme('system')}
-            disabled={theme === 'system'}
-            className="disabled:bg-accent rounded-full disabled:opacity-100"
-         >
-            <LaptopIcon className="size-5" />
-         </ToggleGroupItem>
-         <ToggleGroupItem
-            value="dark"
-            onClick={() => setTheme('dark')}
-            disabled={theme === 'dark'}
-            className="disabled:bg-accent rounded-full disabled:opacity-100"
-         >
-            <MoonIcon className="size-5" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/miami/example/mode-toggle.tsx b/apps/web/registry/miami/example/mode-toggle.tsx
deleted file mode 100644
index a09b9e95..00000000
--- a/apps/web/registry/miami/example/mode-toggle.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
-import { useTheme } from 'next-themes'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   DropdownMenu,
-   DropdownMenuContent,
-   DropdownMenuItem,
-   DropdownMenuTrigger,
-} from '~/registry/miami/ui/dropdown-menu'
-
-export default function ModeToggle() {
-   const { setTheme } = useTheme()
-
-   return (
-      <DropdownMenu>
-         <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="icon">
-               <SunIcon className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-               <MoonIcon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-               <span className="sr-only">Toggle theme</span>
-            </Button>
-         </DropdownMenuTrigger>
-         <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => setTheme('light')}>
-               Light
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setTheme('dark')}>
-               Dark
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setTheme('system')}>
-               System
-            </DropdownMenuItem>
-         </DropdownMenuContent>
-      </DropdownMenu>
-   )
-}
diff --git a/apps/web/registry/miami/example/multi-select-basic.tsx b/apps/web/registry/miami/example/multi-select-basic.tsx
deleted file mode 100644
index 1511df7b..00000000
--- a/apps/web/registry/miami/example/multi-select-basic.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectGroup,
-   MultiSelectItem,
-   MultiSelectList,
-   MultiSelectTrigger,
-   MultiSelectValue,
-} from '~/registry/miami/ui/multi-select'
-
-export default function MultiSelectBasicDemo() {
-   return (
-      <MultiSelect>
-         <MultiSelectTrigger className="w-96">
-            <MultiSelectValue placeholder="Select stack" />
-         </MultiSelectTrigger>
-         <MultiSelectContent>
-            <MultiSelectList>
-               <MultiSelectGroup heading="React">
-                  <MultiSelectItem value="react">React</MultiSelectItem>
-                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
-                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Vue">
-                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
-                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Others">
-                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
-                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
-               </MultiSelectGroup>
-            </MultiSelectList>
-         </MultiSelectContent>
-      </MultiSelect>
-   )
-}
diff --git a/apps/web/registry/miami/example/multi-select-controllable-search.tsx b/apps/web/registry/miami/example/multi-select-controllable-search.tsx
deleted file mode 100644
index 99d0f110..00000000
--- a/apps/web/registry/miami/example/multi-select-controllable-search.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-'use client'
-
-import { useRef, useState } from 'react'
-
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectEmpty,
-   MultiSelectList,
-   type MultiSelectOption,
-   type MultiSelectOptionGroup,
-   MultiSelectSearch,
-   MultiSelectTrigger,
-   MultiSelectValue,
-   renderMultiSelectOptions,
-} from '~/registry/miami/ui/multi-select'
-
-const ALL_ITEMS = [
-   { value: 'react', label: 'React', group: 'React' },
-   { value: 'next', label: 'Next.js', group: 'React' },
-   { value: 'remix', label: 'Remix', group: 'React' },
-   { value: 'vue', label: 'Vue', group: 'Vue' },
-   { value: 'nuxt', label: 'Nuxt.js', group: 'Vue' },
-   { value: 'angular', label: 'Angular', group: 'Others' },
-   { value: 'svelte', label: 'Svelte', group: 'Others' },
-]
-
-function group(options: Array<(typeof ALL_ITEMS)[number]>): MultiSelectOptionGroup[] {
-   return options.reduce((acc, item) => {
-      const group = acc.find(g => g.heading === item.group)
-      if (group)
-         group.children.push(item)
-      else
-         acc.push({ heading: item.group, children: [item] })
-
-      return acc
-   }, [] as MultiSelectOptionGroup[])
-}
-
-async function search(keyword?: string) {
-   if (!keyword)
-      return group(ALL_ITEMS)
-   await new Promise(resolve => setTimeout(resolve, 500))
-   const lowerKeyword = keyword.toLowerCase()
-   const filtered = ALL_ITEMS.filter(item =>
-      item.label.toLowerCase().includes(lowerKeyword),
-   )
-   return group(filtered)
-}
-
-export default function MultiSelectControllableSearchDemo() {
-   const [loading, setLoading] = useState(false)
-   const [options, setOptions] = useState<MultiSelectOption[]>(() =>
-      group(ALL_ITEMS),
-   )
-
-   const indexRef = useRef(0)
-
-   const handleSearch = async (keyword?: string) => {
-      const index = ++indexRef.current
-      setLoading(true)
-      const newOptions = await search(keyword)
-      if (indexRef.current === index) {
-         setOptions(newOptions)
-         setLoading(false)
-      }
-   }
-
-   return (
-      <MultiSelect onSearch={handleSearch}>
-         <MultiSelectTrigger className="w-96">
-            <MultiSelectValue placeholder="Select stack" />
-         </MultiSelectTrigger>
-         <MultiSelectContent>
-            <MultiSelectSearch />
-            <MultiSelectList>
-               {loading ? null : renderMultiSelectOptions(options)}
-               <MultiSelectEmpty>
-                  {loading ? 'Loading...' : 'No results found'}
-               </MultiSelectEmpty>
-            </MultiSelectList>
-         </MultiSelectContent>
-      </MultiSelect>
-   )
-}
diff --git a/apps/web/registry/miami/example/multi-select-filter.tsx b/apps/web/registry/miami/example/multi-select-filter.tsx
deleted file mode 100644
index 8d38d3d5..00000000
--- a/apps/web/registry/miami/example/multi-select-filter.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client'
-
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectEmpty,
-   MultiSelectGroup,
-   MultiSelectItem,
-   MultiSelectList,
-   MultiSelectSearch,
-   MultiSelectTrigger,
-   MultiSelectValue,
-} from '~/registry/miami/ui/multi-select'
-
-export default function MultiSelectFilterDemo() {
-   return (
-      <MultiSelect>
-         <MultiSelectTrigger className="w-96">
-            <MultiSelectValue placeholder="Select stack" />
-         </MultiSelectTrigger>
-         <MultiSelectContent>
-            <MultiSelectSearch placeholder="Input to search" />
-            <MultiSelectList>
-               <MultiSelectGroup heading="React">
-                  <MultiSelectItem value="react">React</MultiSelectItem>
-                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
-                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Vue">
-                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
-                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Others">
-                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
-                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
-               </MultiSelectGroup>
-            </MultiSelectList>
-            <MultiSelectEmpty />
-         </MultiSelectContent>
-      </MultiSelect>
-   )
-}
diff --git a/apps/web/registry/miami/example/multi-select-form.tsx b/apps/web/registry/miami/example/multi-select-form.tsx
deleted file mode 100644
index 43a4cd0a..00000000
--- a/apps/web/registry/miami/example/multi-select-form.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-'use client'
-
-import { useRef, useState } from 'react'
-import Link from 'next/link'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/default/ui/form'
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectEmpty,
-   MultiSelectList,
-   type MultiSelectOption,
-   type MultiSelectOptionGroup,
-   MultiSelectSearch,
-   MultiSelectTrigger,
-   MultiSelectValue,
-   renderMultiSelectOptions,
-} from '~/registry/default/ui/multi-select'
-import { toast } from '~/registry/default/ui/use-toast'
-
-const ALL_ITEMS = [
-   { value: 'react', label: 'React', group: 'React' },
-   { value: 'next', label: 'Next.js', group: 'React' },
-   { value: 'remix', label: 'Remix', group: 'React' },
-   { value: 'vue', label: 'Vue', group: 'Vue' },
-   { value: 'nuxt', label: 'Nuxt.js', group: 'Vue' },
-   { value: 'angular', label: 'Angular', group: 'Others' },
-   { value: 'svelte', label: 'Svelte', group: 'Others' },
-]
-
-function group(options: Array<(typeof ALL_ITEMS)[number]>): MultiSelectOptionGroup[] {
-   return options.reduce((acc, item) => {
-      const group = acc.find(g => g.heading === item.group)
-      if (group)
-         group.children.push(item)
-      else
-         acc.push({ heading: item.group, children: [item] })
-
-      return acc
-   }, [] as MultiSelectOptionGroup[])
-}
-
-async function search(keyword?: string) {
-   if (!keyword)
-      return group(ALL_ITEMS)
-   const lowerKeyword = keyword.toLowerCase()
-   const filtered = ALL_ITEMS.filter(item =>
-      item.label.toLowerCase().includes(lowerKeyword),
-   )
-
-   if (!filtered.length) {
-      return [
-         {
-            label: keyword,
-            value: keyword,
-         },
-      ]
-   }
-
-   return group(filtered)
-}
-
-const FormSchema = z.object({
-   frameworks: z.array(z.string(), {
-      required_error: 'Please select at least one framework.',
-   }),
-})
-
-export default function MultiSelectFormDemo() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   const [loading, setLoading] = useState(false)
-   const [options, setOptions] = useState<MultiSelectOption[]>(() =>
-      group(ALL_ITEMS),
-   )
-
-   const indexRef = useRef(0)
-
-   const handleSearch = async (keyword: string) => {
-      const index = ++indexRef.current
-      setLoading(true)
-      const newOptions = await search(keyword)
-      if (indexRef.current === index) {
-         setOptions(newOptions)
-         setLoading(false)
-      }
-   }
-
-   const onSubmit = (data: z.infer<typeof FormSchema>) => {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="frameworks"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Frameworks</FormLabel>
-                     <MultiSelect
-                        onValueChange={field.onChange}
-                        defaultValue={field.value}
-                        onSearch={keyword => handleSearch(keyword ?? '')}
-                     >
-                        <FormControl>
-                           <MultiSelectTrigger className="w-96">
-                              <MultiSelectValue placeholder="Select frameworks" />
-                           </MultiSelectTrigger>
-                        </FormControl>
-                        <MultiSelectContent>
-                           <MultiSelectSearch />
-                           <MultiSelectList>
-                              {loading ? null : renderMultiSelectOptions(options)}
-                              <MultiSelectEmpty>
-                                 {loading ? 'Loading...' : 'No results found'}
-                              </MultiSelectEmpty>
-                           </MultiSelectList>
-                        </MultiSelectContent>
-                     </MultiSelect>
-                     <FormDescription>
-                        You can manage frameworks in
-                        {' '}
-                        <Link href="/examples/forms">framework settings</Link>
-                        .
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/multi-select-input-custom.tsx b/apps/web/registry/miami/example/multi-select-input-custom.tsx
deleted file mode 100644
index 4ae9dea7..00000000
--- a/apps/web/registry/miami/example/multi-select-input-custom.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import { useRef, useState } from 'react'
-
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectEmpty,
-   MultiSelectList,
-   type MultiSelectOption,
-   type MultiSelectOptionGroup,
-   MultiSelectSearch,
-   MultiSelectTrigger,
-   MultiSelectValue,
-   renderMultiSelectOptions,
-} from '~/registry/miami/ui/multi-select'
-
-const ALL_ITEMS = [
-   { value: 'react', label: 'React', group: 'React' },
-   { value: 'next', label: 'Next.js', group: 'React' },
-   { value: 'remix', label: 'Remix', group: 'React' },
-   { value: 'vue', label: 'Vue', group: 'Vue' },
-   { value: 'nuxt', label: 'Nuxt.js', group: 'Vue' },
-   { value: 'angular', label: 'Angular', group: 'Others' },
-   { value: 'svelte', label: 'Svelte', group: 'Others' },
-]
-
-function group(options: Array<(typeof ALL_ITEMS)[number]>): MultiSelectOptionGroup[] {
-   return options.reduce((acc, item) => {
-      const group = acc.find(g => g.heading === item.group)
-      if (group)
-         group.children.push(item)
-      else
-         acc.push({ heading: item.group, children: [item] })
-
-      return acc
-   }, [] as MultiSelectOptionGroup[])
-}
-
-async function search(keyword?: string) {
-   if (!keyword)
-      return group(ALL_ITEMS)
-   const lowerKeyword = keyword.toLowerCase()
-   const filtered = ALL_ITEMS.filter(item =>
-      item.label.toLowerCase().includes(lowerKeyword),
-   )
-
-   if (!filtered.length) {
-      return [
-         {
-            label: keyword,
-            value: keyword,
-         },
-      ]
-   }
-
-   return group(filtered)
-}
-
-export default function MultiSelectInputCustomDemo() {
-   const [loading, setLoading] = useState(false)
-   const [options, setOptions] = useState<MultiSelectOption[]>(() =>
-      group(ALL_ITEMS),
-   )
-
-   const indexRef = useRef(0)
-
-   const handleSearch = async (keyword: string) => {
-      const index = ++indexRef.current
-      setLoading(true)
-      const newOptions = await search(keyword)
-      if (indexRef.current === index) {
-         setOptions(newOptions)
-         setLoading(false)
-      }
-   }
-
-   return (
-      <MultiSelect onSearch={keyword => handleSearch(keyword ?? '')}>
-         <MultiSelectTrigger className="w-96">
-            <MultiSelectValue placeholder="Select stack" />
-         </MultiSelectTrigger>
-         <MultiSelectContent>
-            <MultiSelectSearch placeholder="input any..." />
-            <MultiSelectList>
-               {loading ? null : renderMultiSelectOptions(options)}
-               <MultiSelectEmpty>
-                  {loading ? 'Loading...' : 'No results found'}
-               </MultiSelectEmpty>
-            </MultiSelectList>
-         </MultiSelectContent>
-      </MultiSelect>
-   )
-}
diff --git a/apps/web/registry/miami/example/multi-select-limit-count.tsx b/apps/web/registry/miami/example/multi-select-limit-count.tsx
deleted file mode 100644
index 50376b78..00000000
--- a/apps/web/registry/miami/example/multi-select-limit-count.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectGroup,
-   MultiSelectItem,
-   MultiSelectList,
-   MultiSelectTrigger,
-   MultiSelectValue,
-} from '~/registry/miami/ui/multi-select'
-
-export default function MultiSelectLimitCountDemo() {
-   return (
-      <MultiSelect defaultValue={['react', 'next', 'remix']} maxCount={3}>
-         <MultiSelectTrigger className="w-96">
-            <MultiSelectValue placeholder="Select stack" />
-         </MultiSelectTrigger>
-         <MultiSelectContent>
-            <MultiSelectList>
-               <MultiSelectGroup heading="React">
-                  <MultiSelectItem value="react">React</MultiSelectItem>
-                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
-                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Vue">
-                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
-                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Others">
-                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
-                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
-               </MultiSelectGroup>
-            </MultiSelectList>
-         </MultiSelectContent>
-      </MultiSelect>
-   )
-}
diff --git a/apps/web/registry/miami/example/multi-select-limit-display-length.tsx b/apps/web/registry/miami/example/multi-select-limit-display-length.tsx
deleted file mode 100644
index de21fe82..00000000
--- a/apps/web/registry/miami/example/multi-select-limit-display-length.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import {
-   MultiSelect,
-   MultiSelectContent,
-   MultiSelectGroup,
-   MultiSelectItem,
-   MultiSelectList,
-   MultiSelectTrigger,
-   MultiSelectValue,
-} from '~/registry/miami/ui/multi-select'
-
-export default function MultiSelectLimitDisplayLengthDemo() {
-   return (
-      <MultiSelect defaultValue={['long', 'react', 'angular', 'vue', 'remix']}>
-         <MultiSelectTrigger className="w-96">
-            <MultiSelectValue
-               placeholder="Select stack"
-               maxDisplay={3}
-               maxItemLength={5}
-            />
-         </MultiSelectTrigger>
-         <MultiSelectContent>
-            <MultiSelectList>
-               <MultiSelectGroup heading="React">
-                  <MultiSelectItem value="react">React</MultiSelectItem>
-                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
-                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Vue">
-                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
-                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
-               </MultiSelectGroup>
-               <MultiSelectGroup heading="Others">
-                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
-                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
-                  <MultiSelectItem value="long">VeryVeryLongItem</MultiSelectItem>
-               </MultiSelectGroup>
-            </MultiSelectList>
-         </MultiSelectContent>
-      </MultiSelect>
-   )
-}
diff --git a/apps/web/registry/miami/example/navigation-menu-demo.tsx b/apps/web/registry/miami/example/navigation-menu-demo.tsx
deleted file mode 100644
index 2e2ebccc..00000000
--- a/apps/web/registry/miami/example/navigation-menu-demo.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import Link from 'next/link'
-
-import { ny } from '~/lib/utils'
-import { Icons } from '~/components/icons'
-import {
-   NavigationMenu,
-   NavigationMenuContent,
-   NavigationMenuItem,
-   NavigationMenuLink,
-   NavigationMenuList,
-   NavigationMenuTrigger,
-   navigationMenuTriggerStyle,
-} from '~/registry/miami/ui/navigation-menu'
-
-const components: { title: string, href: string, description: string }[] = [
-   {
-      title: 'Alert Dialog',
-      href: '/docs/primitives/alert-dialog',
-      description:
-      'A modal dialog that interrupts the user with important content and expects a response.',
-   },
-   {
-      title: 'Hover Card',
-      href: '/docs/primitives/hover-card',
-      description:
-      'For sighted users to preview content available behind a link.',
-   },
-   {
-      title: 'Progress',
-      href: '/docs/primitives/progress',
-      description:
-      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
-   },
-   {
-      title: 'Scroll-area',
-      href: '/docs/primitives/scroll-area',
-      description: 'Visually or semantically separates content.',
-   },
-   {
-      title: 'Tabs',
-      href: '/docs/primitives/tabs',
-      description:
-      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
-   },
-   {
-      title: 'Tooltip',
-      href: '/docs/primitives/tooltip',
-      description:
-      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
-   },
-]
-
-export default function NavigationMenuDemo() {
-   return (
-      <NavigationMenu>
-         <NavigationMenuList>
-            <NavigationMenuItem>
-               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-               <NavigationMenuContent>
-                  <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                     <li className="row-span-3">
-                        <NavigationMenuLink asChild>
-                           <a
-                              className="from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md"
-                              href="/"
-                           >
-                              <Icons.logo className="size-6" />
-                              <div className="mb-2 mt-4 text-lg font-medium">nyxb/ui</div>
-                              <p className="text-muted-foreground text-sm leading-tight">
-                                 Beautifully designed components built with Radix UI and
-                                 Tailwind CSS.
-                              </p>
-                           </a>
-                        </NavigationMenuLink>
-                     </li>
-                     <ListItem href="/docs" title="Introduction">
-                        Re-usable components built using Radix UI and Tailwind CSS.
-                     </ListItem>
-                     <ListItem href="/docs/installation" title="Installation">
-                        How to install dependencies and structure your app.
-                     </ListItem>
-                     <ListItem href="/docs/primitives/typography" title="Typography">
-                        Styles for headings, paragraphs, lists...etc
-                     </ListItem>
-                  </ul>
-               </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-               <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-               <NavigationMenuContent>
-                  <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                     {components.map(component => (
-                        <ListItem
-                           key={component.title}
-                           title={component.title}
-                           href={component.href}
-                        >
-                           {component.description}
-                        </ListItem>
-                     ))}
-                  </ul>
-               </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-               <Link href="/docs" legacyBehavior passHref>
-                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                     Documentation
-                  </NavigationMenuLink>
-               </Link>
-            </NavigationMenuItem>
-         </NavigationMenuList>
-      </NavigationMenu>
-   )
-}
-
-const ListItem = React.forwardRef<
-   React.ElementRef<'a'>,
-   React.ComponentPropsWithoutRef<'a'>
->(({ className, title, children, ...props }, ref) => {
-   return (
-      <li>
-         <NavigationMenuLink asChild>
-            <a
-               ref={ref}
-               className={ny(
-                  'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors',
-                  className,
-               )}
-               {...props}
-            >
-               <div className="text-sm font-medium leading-none">{title}</div>
-               <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
-                  {children}
-               </p>
-            </a>
-         </NavigationMenuLink>
-      </li>
-   )
-})
-ListItem.displayName = 'ListItem'
diff --git a/apps/web/registry/miami/example/neon-gradient-card-demo.tsx b/apps/web/registry/miami/example/neon-gradient-card-demo.tsx
deleted file mode 100644
index 5f1c7c6a..00000000
--- a/apps/web/registry/miami/example/neon-gradient-card-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NeonGradientCard } from '~/registry/miami/ui/neon-gradient-card'
-
-export default function NeonGradientCardDemo() {
-   return (
-      <NeonGradientCard className="max-w-sm items-center justify-center text-center">
-         <span className="pointer-events-none z-10 h-full whitespace-pre-wrap bg-gradient-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-6xl font-bold leading-none tracking-tighter text-transparent dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]">
-            Neon Gradient Card
-         </span>
-      </NeonGradientCard>
-   )
-}
diff --git a/apps/web/registry/miami/example/number-ticker-demo.tsx b/apps/web/registry/miami/example/number-ticker-demo.tsx
deleted file mode 100644
index cb3eefb0..00000000
--- a/apps/web/registry/miami/example/number-ticker-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import NumberTicker from '~/registry/miami/ui/number-ticker'
-
-function NumberTickerDemo() {
-   return (
-      <p className="whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white">
-         <NumberTicker value={100} />
-      </p>
-   )
-}
-
-export default NumberTickerDemo
diff --git a/apps/web/registry/miami/example/nyx-toc-demo.tsx b/apps/web/registry/miami/example/nyx-toc-demo.tsx
deleted file mode 100644
index aab1dd8d..00000000
--- a/apps/web/registry/miami/example/nyx-toc-demo.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { NyxTOCItems } from '~/registry/miami/ui/nyx-toc'
-
-const demoItems = [
-   {
-      title: 'Introduction',
-      url: '#introduction',
-      depth: 1,
-   },
-   {
-      title: 'Getting Started',
-      url: '#getting-started',
-      depth: 2,
-   },
-   {
-      title: 'Installation',
-      url: '#installation',
-      depth: 3,
-   },
-   {
-      title: 'Basic Usage',
-      url: '#basic-usage',
-      depth: 3,
-   },
-   {
-      title: 'Advanced Features',
-      url: '#advanced-features',
-      depth: 2,
-   },
-   {
-      title: 'API Reference',
-      url: '#api-reference',
-      depth: 2,
-   },
-]
-
-export default function NyxTOCDemo() {
-   return (
-      <div className="flex gap-10">
-         <div className="flex-1">
-            <NyxTOCItems
-               items={demoItems}
-               label="On This Page"
-            />
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/nyx-toc-popover-demo.tsx b/apps/web/registry/miami/example/nyx-toc-popover-demo.tsx
deleted file mode 100644
index 0f8452e2..00000000
--- a/apps/web/registry/miami/example/nyx-toc-popover-demo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { NyxTOCItems, TocPopover, TocPopoverContent, TocPopoverTrigger } from '~/registry/miami/ui/nyx-toc'
-
-export default function NyxTOCPopoverDemo() {
-   // Example TOC items
-   const items = [
-      { title: 'Introduction', url: '#introduction', depth: 1 },
-      { title: 'Getting Started', url: '#getting-started', depth: 2 },
-      { title: 'Installation', url: '#installation', depth: 2 },
-      { title: 'Basic Usage', url: '#basic-usage', depth: 3 },
-      { title: 'Advanced Features', url: '#advanced-features', depth: 2 },
-      { title: 'Configuration', url: '#configuration', depth: 3 },
-      { title: 'Customization', url: '#customization', depth: 2 },
-   ]
-
-   return (
-      <div className="flex h-[300px] w-full items-start justify-center p-6">
-         <TocPopover>
-            <TocPopoverTrigger items={items} className="hover:bg-accent rounded-md border" />
-            <TocPopoverContent>
-               <NyxTOCItems
-                  items={items}
-                  isMenu
-                  label="On This Page"
-               />
-            </TocPopoverContent>
-         </TocPopover>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/orbiting-circles-demo.tsx b/apps/web/registry/miami/example/orbiting-circles-demo.tsx
deleted file mode 100644
index d3317228..00000000
--- a/apps/web/registry/miami/example/orbiting-circles-demo.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import OrbitingCircles from '~/registry/miami/ui/orbiting-circles'
-
-export default function OrbitingCirclesDemo() {
-   return (
-      <div className="bg-background relative flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Circles
-         </span>
-
-         {/* Inner Circles */}
-         <OrbitingCircles
-            className="size-[30px] border-none bg-transparent"
-            duration={20}
-            delay={20}
-            radius={80}
-         >
-            <Icons.whatsapp />
-         </OrbitingCircles>
-         <OrbitingCircles
-            className="size-[30px] border-none bg-transparent"
-            duration={20}
-            delay={10}
-            radius={80}
-         >
-            <Icons.notion />
-         </OrbitingCircles>
-
-         {/* Outer Circles (reverse) */}
-         <OrbitingCircles
-            className="size-[50px] border-none bg-transparent"
-            radius={190}
-            duration={20}
-            reverse
-         >
-            <Icons.googleDrive />
-         </OrbitingCircles>
-         <OrbitingCircles
-            className="size-[50px] border-none bg-transparent"
-            radius={190}
-            duration={20}
-            delay={20}
-            reverse
-         >
-            <Icons.gitHub />
-         </OrbitingCircles>
-      </div>
-   )
-}
-
-const Icons = {
-   gitHub: () => (
-      <svg width="100" height="100" viewBox="0 0 438.549 438.549">
-         <path
-            fill="currentColor"
-            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-         />
-      </svg>
-   ),
-   notion: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 100 100"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
-            fill="#ffffff"
-         />
-         <path
-            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
-            fill="#000000"
-            fillRule="evenodd"
-            clipRule="evenodd"
-         />
-      </svg>
-   ),
-   openai: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
-   ),
-   googleDrive: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 87.3 78"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-            fill="#0066da"
-         />
-         <path
-            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-            fill="#00ac47"
-         />
-         <path
-            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-            fill="#ea4335"
-         />
-         <path
-            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-            fill="#00832d"
-         />
-         <path
-            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-            fill="#2684fc"
-         />
-         <path
-            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-            fill="#ffba00"
-         />
-      </svg>
-   ),
-   whatsapp: () => (
-      <svg
-         width="100"
-         height="100"
-         viewBox="0 0 175.216 175.552"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <defs>
-            <linearGradient
-               id="b"
-               x1="85.915"
-               x2="86.535"
-               y1="32.567"
-               y2="137.092"
-               gradientUnits="userSpaceOnUse"
-            >
-               <stop offset="0" stopColor="#57d163" />
-               <stop offset="1" stopColor="#23b33a" />
-            </linearGradient>
-            <filter
-               id="a"
-               width="1.115"
-               height="1.114"
-               x="-.057"
-               y="-.057"
-               colorInterpolationFilters="sRGB"
-            >
-               <feGaussianBlur stdDeviation="3.531" />
-            </filter>
-         </defs>
-         <path
-            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
-            fill="#b3b3b3"
-            filter="url(#a)"
-         />
-         <path
-            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
-            fill="#ffffff"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
-            fill="url(#linearGradient1780)"
-         />
-         <path
-            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
-            fill="url(#b)"
-         />
-         <path
-            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
-            fill="#ffffff"
-            fillRule="evenodd"
-         />
-      </svg>
-   ),
-}
diff --git a/apps/web/registry/miami/example/pagination-demo.tsx b/apps/web/registry/miami/example/pagination-demo.tsx
deleted file mode 100644
index b115059d..00000000
--- a/apps/web/registry/miami/example/pagination-demo.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-   Pagination,
-   PaginationContent,
-   PaginationEllipsis,
-   PaginationItem,
-   PaginationLink,
-   PaginationNext,
-   PaginationPrevious,
-} from '~/registry/miami/ui/pagination'
-
-export default function PaginationDemo() {
-   return (
-      <Pagination>
-         <PaginationContent>
-            <PaginationItem>
-               <PaginationPrevious href="#" />
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationLink href="#">1</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationLink href="#" isActive>
-                  2
-               </PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationLink href="#">3</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationEllipsis />
-            </PaginationItem>
-            <PaginationItem>
-               <PaginationNext href="#" />
-            </PaginationItem>
-         </PaginationContent>
-      </Pagination>
-   )
-}
diff --git a/apps/web/registry/miami/example/particles-demo.tsx b/apps/web/registry/miami/example/particles-demo.tsx
deleted file mode 100644
index 574d7c76..00000000
--- a/apps/web/registry/miami/example/particles-demo.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { useTheme } from 'next-themes'
-import { useEffect, useState } from 'react'
-import Particles from '~/registry/miami/ui/particles'
-
-function ParticlesDemo() {
-   const { theme } = useTheme()
-   const [color, setColor] = useState('#ffffff')
-
-   useEffect(() => {
-      setColor(theme === 'dark' ? '#ffffff' : '#000000')
-   }, [theme])
-
-   return (
-      <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Particles
-         </span>
-         <Particles
-            className="absolute inset-0"
-            quantity={100}
-            ease={80}
-            color={color}
-            refresh
-         />
-      </div>
-   )
-}
-
-export default ParticlesDemo
diff --git a/apps/web/registry/miami/example/popover-demo.tsx b/apps/web/registry/miami/example/popover-demo.tsx
deleted file mode 100644
index ed399b96..00000000
--- a/apps/web/registry/miami/example/popover-demo.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Popover,
-   PopoverContent,
-   PopoverTrigger,
-} from '~/registry/miami/ui/popover'
-
-export default function PopoverDemo() {
-   return (
-      <Popover>
-         <PopoverTrigger asChild>
-            <Button variant="outline">Open popover</Button>
-         </PopoverTrigger>
-         <PopoverContent className="w-80">
-            <div className="grid gap-4">
-               <div className="space-y-2">
-                  <h4 className="font-medium leading-none">Dimensions</h4>
-                  <p className="text-muted-foreground text-sm">
-                     Set the dimensions for the layer.
-                  </p>
-               </div>
-               <div className="grid gap-2">
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="width">Width</Label>
-                     <Input
-                        id="width"
-                        defaultValue="100%"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="maxWidth">Max. width</Label>
-                     <Input
-                        id="maxWidth"
-                        defaultValue="300px"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="height">Height</Label>
-                     <Input
-                        id="height"
-                        defaultValue="25px"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                     <Label htmlFor="maxHeight">Max. height</Label>
-                     <Input
-                        id="maxHeight"
-                        defaultValue="none"
-                        className="col-span-2 h-8"
-                     />
-                  </div>
-               </div>
-            </div>
-         </PopoverContent>
-      </Popover>
-   )
-}
diff --git a/apps/web/registry/miami/example/progress-demo.tsx b/apps/web/registry/miami/example/progress-demo.tsx
deleted file mode 100644
index 71d37d00..00000000
--- a/apps/web/registry/miami/example/progress-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Progress } from '~/registry/miami/ui/progress'
-
-export default function ProgressDemo() {
-   const [progress, setProgress] = React.useState(13)
-
-   React.useEffect(() => {
-      const timer = setTimeout(() => setProgress(66), 500)
-      return () => clearTimeout(timer)
-   }, [])
-
-   return <Progress value={progress} className="w-3/5" />
-}
diff --git a/apps/web/registry/miami/example/pulsating-button-demo.tsx b/apps/web/registry/miami/example/pulsating-button-demo.tsx
deleted file mode 100644
index 9317cae3..00000000
--- a/apps/web/registry/miami/example/pulsating-button-demo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { PulsatingButton } from '~/registry/default/ui/pulsating-button'
-
-function PulsatingButtonDemo() {
-   return (
-      <PulsatingButton
-         text="Join Affiliate Program"
-         pulseColor="150, 0, 255"
-         backgroundColor="#9945FF"
-         textColor="#ffffff"
-         animationDuration="1.5s"
-         buttonWidth="200px"
-         buttonHeight="50px"
-      />
-   )
-}
-
-export default PulsatingButtonDemo
diff --git a/apps/web/registry/miami/example/radio-group-demo.tsx b/apps/web/registry/miami/example/radio-group-demo.tsx
deleted file mode 100644
index c5cec008..00000000
--- a/apps/web/registry/miami/example/radio-group-demo.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Label } from '~/registry/miami/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'
-
-export default function RadioGroupDemo() {
-   return (
-      <RadioGroup defaultValue="comfortable">
-         <div className="flex items-center space-x-2">
-            <RadioGroupItem value="default" id="r1" />
-            <Label htmlFor="r1">Default</Label>
-         </div>
-         <div className="flex items-center space-x-2">
-            <RadioGroupItem value="comfortable" id="r2" />
-            <Label htmlFor="r2">Comfortable</Label>
-         </div>
-         <div className="flex items-center space-x-2">
-            <RadioGroupItem value="compact" id="r3" />
-            <Label htmlFor="r3">Compact</Label>
-         </div>
-      </RadioGroup>
-   )
-}
diff --git a/apps/web/registry/miami/example/radio-group-form.tsx b/apps/web/registry/miami/example/radio-group-form.tsx
deleted file mode 100644
index 6f66a192..00000000
--- a/apps/web/registry/miami/example/radio-group-form.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Form,
-   FormControl,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/miami/ui/form'
-import { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const FormSchema = z.object({
-   type: z.enum(['all', 'mentions', 'none'], {
-      required_error: 'You need to select a notification type.',
-   }),
-})
-
-export default function RadioGroupForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="type"
-               render={({ field }) => (
-                  <FormItem className="space-y-3">
-                     <FormLabel>Notify me about...</FormLabel>
-                     <FormControl>
-                        <RadioGroup
-                           onValueChange={field.onChange}
-                           defaultValue={field.value}
-                           className="flex flex-col space-y-1"
-                        >
-                           <FormItem className="flex items-center space-x-3 space-y-0">
-                              <FormControl>
-                                 <RadioGroupItem value="all" />
-                              </FormControl>
-                              <FormLabel className="font-normal">
-                                 All new messages
-                              </FormLabel>
-                           </FormItem>
-                           <FormItem className="flex items-center space-x-3 space-y-0">
-                              <FormControl>
-                                 <RadioGroupItem value="mentions" />
-                              </FormControl>
-                              <FormLabel className="font-normal">
-                                 Direct messages and mentions
-                              </FormLabel>
-                           </FormItem>
-                           <FormItem className="flex items-center space-x-3 space-y-0">
-                              <FormControl>
-                                 <RadioGroupItem value="none" />
-                              </FormControl>
-                              <FormLabel className="font-normal">Nothing</FormLabel>
-                           </FormItem>
-                        </RadioGroup>
-                     </FormControl>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/rainbow-button-demo.tsx b/apps/web/registry/miami/example/rainbow-button-demo.tsx
deleted file mode 100644
index 4bbe1811..00000000
--- a/apps/web/registry/miami/example/rainbow-button-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { RainbowButton } from '~/registry/miami/ui/rainbow-button'
-
-export default function RainbowButtonDemo() {
-   return <RainbowButton>Get Unlimited Access</RainbowButton>
-}
diff --git a/apps/web/registry/miami/example/resizable-demo-with-handle.tsx b/apps/web/registry/miami/example/resizable-demo-with-handle.tsx
deleted file mode 100644
index 7debafa8..00000000
--- a/apps/web/registry/miami/example/resizable-demo-with-handle.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-   ResizableHandle,
-   ResizablePanel,
-   ResizablePanelGroup,
-} from '~/registry/miami/ui/resizable'
-
-export default function ResizableDemo() {
-   return (
-      <ResizablePanelGroup
-         direction="horizontal"
-         className="max-w-md rounded-lg border"
-      >
-         <ResizablePanel defaultSize={50}>
-            <div className="flex h-[200px] items-center justify-center p-6">
-               <span className="font-semibold">One</span>
-            </div>
-         </ResizablePanel>
-         <ResizableHandle withHandle />
-         <ResizablePanel defaultSize={50}>
-            <ResizablePanelGroup direction="vertical">
-               <ResizablePanel defaultSize={25}>
-                  <div className="flex h-full items-center justify-center p-6">
-                     <span className="font-semibold">Two</span>
-                  </div>
-               </ResizablePanel>
-               <ResizableHandle withHandle />
-               <ResizablePanel defaultSize={75}>
-                  <div className="flex h-full items-center justify-center p-6">
-                     <span className="font-semibold">Three</span>
-                  </div>
-               </ResizablePanel>
-            </ResizablePanelGroup>
-         </ResizablePanel>
-      </ResizablePanelGroup>
-   )
-}
diff --git a/apps/web/registry/miami/example/resizable-demo.tsx b/apps/web/registry/miami/example/resizable-demo.tsx
deleted file mode 100644
index 761e090b..00000000
--- a/apps/web/registry/miami/example/resizable-demo.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-   ResizableHandle,
-   ResizablePanel,
-   ResizablePanelGroup,
-} from '~/registry/miami/ui/resizable'
-
-export default function ResizableDemo() {
-   return (
-      <ResizablePanelGroup
-         direction="horizontal"
-         className="max-w-md rounded-lg border"
-      >
-         <ResizablePanel defaultSize={50}>
-            <div className="flex h-[200px] items-center justify-center p-6">
-               <span className="font-semibold">One</span>
-            </div>
-         </ResizablePanel>
-         <ResizableHandle />
-         <ResizablePanel defaultSize={50}>
-            <ResizablePanelGroup direction="vertical">
-               <ResizablePanel defaultSize={25}>
-                  <div className="flex h-full items-center justify-center p-6">
-                     <span className="font-semibold">Two</span>
-                  </div>
-               </ResizablePanel>
-               <ResizableHandle />
-               <ResizablePanel defaultSize={75}>
-                  <div className="flex h-full items-center justify-center p-6">
-                     <span className="font-semibold">Three</span>
-                  </div>
-               </ResizablePanel>
-            </ResizablePanelGroup>
-         </ResizablePanel>
-      </ResizablePanelGroup>
-   )
-}
diff --git a/apps/web/registry/miami/example/resizable-handle.tsx b/apps/web/registry/miami/example/resizable-handle.tsx
deleted file mode 100644
index c2fd7c59..00000000
--- a/apps/web/registry/miami/example/resizable-handle.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-   ResizableHandle,
-   ResizablePanel,
-   ResizablePanelGroup,
-} from '~/registry/miami/ui/resizable'
-
-export default function ResizableDemo() {
-   return (
-      <ResizablePanelGroup
-         direction="horizontal"
-         className="min-h-[200px] max-w-md rounded-lg border"
-      >
-         <ResizablePanel defaultSize={25}>
-            <div className="flex h-full items-center justify-center p-6">
-               <span className="font-semibold">Sidebar</span>
-            </div>
-         </ResizablePanel>
-         <ResizableHandle withHandle />
-         <ResizablePanel defaultSize={75}>
-            <div className="flex h-full items-center justify-center p-6">
-               <span className="font-semibold">Content</span>
-            </div>
-         </ResizablePanel>
-      </ResizablePanelGroup>
-   )
-}
diff --git a/apps/web/registry/miami/example/resizable-vertical.tsx b/apps/web/registry/miami/example/resizable-vertical.tsx
deleted file mode 100644
index 3c90b4ff..00000000
--- a/apps/web/registry/miami/example/resizable-vertical.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-   ResizableHandle,
-   ResizablePanel,
-   ResizablePanelGroup,
-} from '~/registry/miami/ui/resizable'
-
-export default function ResizableDemo() {
-   return (
-      <ResizablePanelGroup
-         direction="vertical"
-         className="min-h-[200px] max-w-md rounded-lg border"
-      >
-         <ResizablePanel defaultSize={25}>
-            <div className="flex h-full items-center justify-center p-6">
-               <span className="font-semibold">Header</span>
-            </div>
-         </ResizablePanel>
-         <ResizableHandle />
-         <ResizablePanel defaultSize={75}>
-            <div className="flex h-full items-center justify-center p-6">
-               <span className="font-semibold">Content</span>
-            </div>
-         </ResizablePanel>
-      </ResizablePanelGroup>
-   )
-}
diff --git a/apps/web/registry/miami/example/retro-grid-demo.tsx b/apps/web/registry/miami/example/retro-grid-demo.tsx
deleted file mode 100644
index e7a5047d..00000000
--- a/apps/web/registry/miami/example/retro-grid-demo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client'
-
-import RetroGrid from '~/registry/miami/ui/retro-grid'
-
-function RetroGridDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <span className="pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent">
-            Retro Grid
-         </span>
-
-         <RetroGrid />
-      </div>
-   )
-}
-
-export default RetroGridDemo
diff --git a/apps/web/registry/miami/example/ripple-demo.tsx b/apps/web/registry/miami/example/ripple-demo.tsx
deleted file mode 100644
index b96bf657..00000000
--- a/apps/web/registry/miami/example/ripple-demo.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import Ripple from '~/registry/miami/ui/ripple'
-
-function RippleDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
-         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white">
-            Ripple
-         </p>
-         <Ripple />
-      </div>
-   )
-}
-
-export default RippleDemo
diff --git a/apps/web/registry/miami/example/safari-demo-2.tsx b/apps/web/registry/miami/example/safari-demo-2.tsx
deleted file mode 100644
index 6eb6370d..00000000
--- a/apps/web/registry/miami/example/safari-demo-2.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Safari from '~/registry/miami/ui/safari'
-
-export default function SafariDemo() {
-   return (
-      <div className="relative">
-         <Safari
-            url="nyxbui.design"
-            className="size-full"
-            src="https://via.placeholder.com/1200x750"
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/safari-demo.tsx b/apps/web/registry/miami/example/safari-demo.tsx
deleted file mode 100644
index d7c31bd7..00000000
--- a/apps/web/registry/miami/example/safari-demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Safari from '~/registry/miami/ui/safari'
-
-export default function SafariDemo() {
-   return (
-      <div className="relative">
-         <Safari url="nyxbui.design" className="size-full" />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/scratch-to-reveal-demo.tsx b/apps/web/registry/miami/example/scratch-to-reveal-demo.tsx
deleted file mode 100644
index 078a645d..00000000
--- a/apps/web/registry/miami/example/scratch-to-reveal-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import ScratchToReveal from '~/registry/miami/ui/scratch-to-reveal'
-
-function ScratchToRevealDemo() {
-   const handleComplete = () => {
-      // Do Something
-   }
-
-   return (
-      <div>
-         <ScratchToReveal
-            width={250}
-            height={250}
-            minScratchPercentage={70}
-            className="flex items-center justify-center overflow-hidden rounded-2xl border-2 bg-gray-100"
-            onComplete={handleComplete}
-         >
-            <p className="text-9xl">😎</p>
-         </ScratchToReveal>
-      </div>
-   )
-}
-
-export default ScratchToRevealDemo
diff --git a/apps/web/registry/miami/example/scroll-area-demo.tsx b/apps/web/registry/miami/example/scroll-area-demo.tsx
deleted file mode 100644
index e474782f..00000000
--- a/apps/web/registry/miami/example/scroll-area-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react'
-
-import { ScrollArea } from '~/registry/miami/ui/scroll-area'
-import { Separator } from '~/registry/miami/ui/separator'
-
-const tags = Array.from({ length: 50 }).map(
-   (_, i, a) => `v1.2.0-beta.${a.length - i}`,
-)
-
-export default function ScrollAreaDemo() {
-   return (
-      <ScrollArea className="h-72 w-48 rounded-md border">
-         <div className="p-4">
-            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
-            {tags.map(tag => (
-               <>
-                  <div key={tag} className="text-sm">
-                     {tag}
-                  </div>
-                  <Separator className="my-2" />
-               </>
-            ))}
-         </div>
-      </ScrollArea>
-   )
-}
diff --git a/apps/web/registry/miami/example/scroll-area-horizontal-demo.tsx b/apps/web/registry/miami/example/scroll-area-horizontal-demo.tsx
deleted file mode 100644
index 24d55889..00000000
--- a/apps/web/registry/miami/example/scroll-area-horizontal-demo.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from 'react'
-import Image from 'next/image'
-
-import { ScrollArea, ScrollBar } from '~/registry/miami/ui/scroll-area'
-
-export interface Artwork {
-   artist: string
-   art: string
-}
-
-export const works: Artwork[] = [
-   {
-      artist: 'Ornella Binni',
-      art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
-   },
-   {
-      artist: 'Tom Byrom',
-      art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
-   },
-   {
-      artist: 'Vladimir Malyavko',
-      art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
-   },
-]
-
-export default function ScrollAreaHorizontalDemo() {
-   return (
-      <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
-         <div className="flex w-max space-x-4 p-4">
-            {works.map(artwork => (
-               <figure key={artwork.artist} className="shrink-0">
-                  <div className="overflow-hidden rounded-md">
-                     <Image
-                        src={artwork.art}
-                        alt={`Photo by ${artwork.artist}`}
-                        className="aspect-[3/4] size-fit object-cover"
-                        width={300}
-                        height={400}
-                     />
-                  </div>
-                  <figcaption className="text-muted-foreground pt-2 text-xs">
-                     Photo by
-                     {' '}
-                     <span className="text-foreground font-semibold">
-                        {artwork.artist}
-                     </span>
-                  </figcaption>
-               </figure>
-            ))}
-         </div>
-         <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-   )
-}
diff --git a/apps/web/registry/miami/example/scroll-based-velocity-demo.tsx b/apps/web/registry/miami/example/scroll-based-velocity-demo.tsx
deleted file mode 100644
index a4a85a23..00000000
--- a/apps/web/registry/miami/example/scroll-based-velocity-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { VelocityScroll } from '~/registry/miami/ui/scroll-based-velocity'
-
-export default function ScrollBasedVelocityDemo() {
-   return (
-      <VelocityScroll
-         text="Velocity Scroll"
-         default_velocity={5}
-         className="font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/scroll-progress-demo.tsx b/apps/web/registry/miami/example/scroll-progress-demo.tsx
deleted file mode 100644
index f7106b19..00000000
--- a/apps/web/registry/miami/example/scroll-progress-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import ScrollProgress from '~/registry/miami/ui/scroll-progress'
-
-const dummyContent = Array.from({ length: 10 }, (_, i) => (
-   <p key={i}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam
-      lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra
-      nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget
-      libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut
-      porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies
-      a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-   </p>
-))
-
-function ScrollProgressDemo() {
-   return (
-      <div>
-         <ScrollProgress className="top-[65px]" />
-         <strong>Note: The scroll progress is shown below the navbar of the page.</strong>
-         {dummyContent}
-      </div>
-   )
-}
-
-export default ScrollProgressDemo
diff --git a/apps/web/registry/miami/example/select-demo.tsx b/apps/web/registry/miami/example/select-demo.tsx
deleted file mode 100644
index f0bc4c9a..00000000
--- a/apps/web/registry/miami/example/select-demo.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react'
-
-import {
-   Select,
-   SelectContent,
-   SelectGroup,
-   SelectItem,
-   SelectLabel,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-
-export default function SelectDemo() {
-   return (
-      <Select>
-         <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Select a fruit" />
-         </SelectTrigger>
-         <SelectContent>
-            <SelectGroup>
-               <SelectLabel>Fruits</SelectLabel>
-               <SelectItem value="apple">Apple</SelectItem>
-               <SelectItem value="banana">Banana</SelectItem>
-               <SelectItem value="blueberry">Blueberry</SelectItem>
-               <SelectItem value="grapes">Grapes</SelectItem>
-               <SelectItem value="pineapple">Pineapple</SelectItem>
-            </SelectGroup>
-         </SelectContent>
-      </Select>
-   )
-}
diff --git a/apps/web/registry/miami/example/select-form.tsx b/apps/web/registry/miami/example/select-form.tsx
deleted file mode 100644
index a6e6dfc8..00000000
--- a/apps/web/registry/miami/example/select-form.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/miami/ui/form'
-import {
-   Select,
-   SelectContent,
-   SelectItem,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const FormSchema = z.object({
-   email: z
-      .string({
-         required_error: 'Please select an email to display.',
-      })
-      .email(),
-})
-
-export default function SelectForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="email"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Email</FormLabel>
-                     <Select onValueChange={field.onChange} defaultValue={field.value}>
-                        <FormControl>
-                           <SelectTrigger>
-                              <SelectValue placeholder="Select a verified email to display" />
-                           </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                           <SelectItem value="m@example.com">m@example.com</SelectItem>
-                           <SelectItem value="m@google.com">m@google.com</SelectItem>
-                           <SelectItem value="m@support.com">m@support.com</SelectItem>
-                        </SelectContent>
-                     </Select>
-                     <FormDescription>
-                        You can manage email addresses in your
-                        {' '}
-                        <Link href="/examples/forms">email settings</Link>
-                        .
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/select-scrollable.tsx b/apps/web/registry/miami/example/select-scrollable.tsx
deleted file mode 100644
index 772620cb..00000000
--- a/apps/web/registry/miami/example/select-scrollable.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from 'react'
-
-import {
-   Select,
-   SelectContent,
-   SelectGroup,
-   SelectItem,
-   SelectLabel,
-   SelectTrigger,
-   SelectValue,
-} from '~/registry/miami/ui/select'
-
-export default function SelectScrollable() {
-   return (
-      <Select>
-         <SelectTrigger className="w-[280px]">
-            <SelectValue placeholder="Select a timezone" />
-         </SelectTrigger>
-         <SelectContent>
-            <SelectGroup>
-               <SelectLabel>North America</SelectLabel>
-               <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
-               <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
-               <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
-               <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
-               <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
-               <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
-            </SelectGroup>
-            <SelectGroup>
-               <SelectLabel>Europe & Africa</SelectLabel>
-               <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
-               <SelectItem value="cet">Central European Time (CET)</SelectItem>
-               <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
-               <SelectItem value="west">
-                  Western European Summer Time (WEST)
-               </SelectItem>
-               <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
-               <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
-            </SelectGroup>
-            <SelectGroup>
-               <SelectLabel>Asia</SelectLabel>
-               <SelectItem value="msk">Moscow Time (MSK)</SelectItem>
-               <SelectItem value="ist">India Standard Time (IST)</SelectItem>
-               <SelectItem value="cst_china">China Standard Time (CST)</SelectItem>
-               <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
-               <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
-               <SelectItem value="ist_indonesia">
-                  Indonesia Central Standard Time (WITA)
-               </SelectItem>
-            </SelectGroup>
-            <SelectGroup>
-               <SelectLabel>Australia & Pacific</SelectLabel>
-               <SelectItem value="awst">
-                  Australian Western Standard Time (AWST)
-               </SelectItem>
-               <SelectItem value="acst">
-                  Australian Central Standard Time (ACST)
-               </SelectItem>
-               <SelectItem value="aest">
-                  Australian Eastern Standard Time (AEST)
-               </SelectItem>
-               <SelectItem value="nzst">New Zealand Standard Time (NZST)</SelectItem>
-               <SelectItem value="fjt">Fiji Time (FJT)</SelectItem>
-            </SelectGroup>
-            <SelectGroup>
-               <SelectLabel>South America</SelectLabel>
-               <SelectItem value="art">Argentina Time (ART)</SelectItem>
-               <SelectItem value="bot">Bolivia Time (BOT)</SelectItem>
-               <SelectItem value="brt">Brasilia Time (BRT)</SelectItem>
-               <SelectItem value="clt">Chile Standard Time (CLT)</SelectItem>
-            </SelectGroup>
-         </SelectContent>
-      </Select>
-   )
-}
diff --git a/apps/web/registry/miami/example/separate-away-demo.tsx b/apps/web/registry/miami/example/separate-away-demo.tsx
deleted file mode 100644
index 5e805b3f..00000000
--- a/apps/web/registry/miami/example/separate-away-demo.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { SeparateAway } from '~/registry/miami/ui/separate-away'
-
-export default async function SeparateAwayDemo() {
-   return (
-      <SeparateAway
-         upper_text="Separate"
-         lower_text="Away"
-         duration={1.5}
-         hidden_opacity={0}
-         visible_opacity={1}
-         className="font-display text-center text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/separator-demo.tsx b/apps/web/registry/miami/example/separator-demo.tsx
deleted file mode 100644
index 8a718a60..00000000
--- a/apps/web/registry/miami/example/separator-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Separator } from '~/registry/miami/ui/separator'
-
-export default function SeparatorDemo() {
-   return (
-      <div>
-         <div className="space-y-1">
-            <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-            <p className="text-muted-foreground text-sm">
-               An open-source UI component library.
-            </p>
-         </div>
-         <Separator className="my-4" />
-         <div className="flex h-5 items-center space-x-4 text-sm">
-            <div>Blog</div>
-            <Separator orientation="vertical" />
-            <div>Docs</div>
-            <Separator orientation="vertical" />
-            <div>Source</div>
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/sheet-demo.tsx b/apps/web/registry/miami/example/sheet-demo.tsx
deleted file mode 100644
index 9b91363e..00000000
--- a/apps/web/registry/miami/example/sheet-demo.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Sheet,
-   SheetClose,
-   SheetContent,
-   SheetDescription,
-   SheetFooter,
-   SheetHeader,
-   SheetTitle,
-   SheetTrigger,
-} from '~/registry/miami/ui/sheet'
-
-export default function SheetDemo() {
-   return (
-      <Sheet>
-         <SheetTrigger asChild>
-            <Button variant="outline">Open</Button>
-         </SheetTrigger>
-         <SheetContent>
-            <SheetHeader>
-               <SheetTitle>Edit profile</SheetTitle>
-               <SheetDescription>
-                  Make changes to your profile here. Click save when you're done.
-               </SheetDescription>
-            </SheetHeader>
-            <div className="grid gap-4 py-4">
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="name" className="text-right">
-                     Name
-                  </Label>
-                  <Input id="name" value="Pedro Duarte" className="col-span-3" />
-               </div>
-               <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="username" className="text-right">
-                     Username
-                  </Label>
-                  <Input id="username" value="@peduarte" className="col-span-3" />
-               </div>
-            </div>
-            <SheetFooter>
-               <SheetClose asChild>
-                  <Button type="submit">Save changes</Button>
-               </SheetClose>
-            </SheetFooter>
-         </SheetContent>
-      </Sheet>
-   )
-}
diff --git a/apps/web/registry/miami/example/sheet-side.tsx b/apps/web/registry/miami/example/sheet-side.tsx
deleted file mode 100644
index b8988b49..00000000
--- a/apps/web/registry/miami/example/sheet-side.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Sheet,
-   SheetClose,
-   SheetContent,
-   SheetDescription,
-   SheetFooter,
-   SheetHeader,
-   SheetTitle,
-   SheetTrigger,
-} from '~/registry/miami/ui/sheet'
-
-const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
-
-type SheetSide = (typeof SHEET_SIDES)[number]
-
-export default function SheetSide() {
-   return (
-      <div className="grid grid-cols-2 gap-2">
-         {SHEET_SIDES.map(side => (
-            <Sheet key={side}>
-               <SheetTrigger asChild>
-                  <Button variant="outline">{side}</Button>
-               </SheetTrigger>
-               <SheetContent side={side}>
-                  <SheetHeader>
-                     <SheetTitle>Edit profile</SheetTitle>
-                     <SheetDescription>
-                        Make changes to your profile here. Click save when you're done.
-                     </SheetDescription>
-                  </SheetHeader>
-                  <div className="grid gap-4 py-4">
-                     <div className="grid grid-cols-4 items-center gap-4">
-                        <Label htmlFor="name" className="text-right">
-                           Name
-                        </Label>
-                        <Input id="name" value="Pedro Duarte" className="col-span-3" />
-                     </div>
-                     <div className="grid grid-cols-4 items-center gap-4">
-                        <Label htmlFor="username" className="text-right">
-                           Username
-                        </Label>
-                        <Input id="username" value="~peduarte" className="col-span-3" />
-                     </div>
-                  </div>
-                  <SheetFooter>
-                     <SheetClose asChild>
-                        <Button type="submit">Save changes</Button>
-                     </SheetClose>
-                  </SheetFooter>
-               </SheetContent>
-            </Sheet>
-         ))}
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/shimmer-button-demo.tsx b/apps/web/registry/miami/example/shimmer-button-demo.tsx
deleted file mode 100644
index 2088cc6d..00000000
--- a/apps/web/registry/miami/example/shimmer-button-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import ShimmerButton from '~/registry/miami/ui/shimmer-button'
-
-export default function ShimmerButtonDemo() {
-   return (
-      <div className="z-10 flex min-h-64 items-center justify-center">
-         <ShimmerButton className="shadow-2xl">
-            <span className="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10">
-               Shimmer Button
-            </span>
-         </ShimmerButton>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/shine-border-demo-2.tsx b/apps/web/registry/miami/example/shine-border-demo-2.tsx
deleted file mode 100644
index b919e271..00000000
--- a/apps/web/registry/miami/example/shine-border-demo-2.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ShineBorder from '~/registry/miami/ui/shine-border'
-
-export default function ShineBorderDemo() {
-   return (
-      <ShineBorder className="text-center text-2xl font-bold capitalize">
-         Shine Border
-      </ShineBorder>
-   )
-}
diff --git a/apps/web/registry/miami/example/shine-border-demo.tsx b/apps/web/registry/miami/example/shine-border-demo.tsx
deleted file mode 100644
index 94bb7011..00000000
--- a/apps/web/registry/miami/example/shine-border-demo.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import ShineBorder from '~/registry/miami/ui/shine-border'
-
-export default function ShineBorderDemo() {
-   return (
-      <ShineBorder
-         className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl"
-         color={['#A07CFE', '#FE8FB5', '#FFBE7B']}
-      >
-         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
-            Shine Border
-         </span>
-      </ShineBorder>
-   )
-}
diff --git a/apps/web/registry/miami/example/shiny-button-demo.tsx b/apps/web/registry/miami/example/shiny-button-demo.tsx
deleted file mode 100644
index 202c3834..00000000
--- a/apps/web/registry/miami/example/shiny-button-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import ShinyButton from '~/registry/miami/ui/shiny-button'
-
-export default function ShinyButtonDemo() {
-   return <ShinyButton text="Shiny Button" />
-}
diff --git a/apps/web/registry/miami/example/skeleton-card.tsx b/apps/web/registry/miami/example/skeleton-card.tsx
deleted file mode 100644
index d13698f9..00000000
--- a/apps/web/registry/miami/example/skeleton-card.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Skeleton } from '~/registry/miami/ui/skeleton'
-
-export default function SkeletonCard() {
-   return (
-      <div className="flex flex-col space-y-3">
-         <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-         <div className="space-y-2">
-            <Skeleton className="h-4 w-[250px]" />
-            <Skeleton className="h-4 w-[200px]" />
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/skeleton-demo.tsx b/apps/web/registry/miami/example/skeleton-demo.tsx
deleted file mode 100644
index 63765c69..00000000
--- a/apps/web/registry/miami/example/skeleton-demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Skeleton } from '~/registry/miami/ui/skeleton'
-
-export default function SkeletonDemo() {
-   return (
-      <div className="flex items-center space-x-4">
-         <Skeleton className="size-12 rounded-full" />
-         <div className="space-y-2">
-            <Skeleton className="h-4 w-[250px]" />
-            <Skeleton className="h-4 w-[200px]" />
-         </div>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/slider-demo.tsx b/apps/web/registry/miami/example/slider-demo.tsx
deleted file mode 100644
index 8724c54e..00000000
--- a/apps/web/registry/miami/example/slider-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/miami/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderDemo({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[50]}
-         max={100}
-         step={1}
-         className={ny('w-3/5', className)}
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/slider-disabled.tsx b/apps/web/registry/miami/example/slider-disabled.tsx
deleted file mode 100644
index cc6d1f64..00000000
--- a/apps/web/registry/miami/example/slider-disabled.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/miami/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderDisabled({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[50]}
-         max={100}
-         step={1}
-         className={ny('w-3/5', className)}
-         disabled
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/slider-format-label-side.tsx b/apps/web/registry/miami/example/slider-format-label-side.tsx
deleted file mode 100644
index 60f1f73f..00000000
--- a/apps/web/registry/miami/example/slider-format-label-side.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/miami/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderFormatLabelSide({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[2]}
-         max={5}
-         step={1}
-         className={ny('w-3/5', className)}
-         formatLabel={value => `${value} points`}
-         formatLabelSide="left"
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/slider-format-label.tsx b/apps/web/registry/miami/example/slider-format-label.tsx
deleted file mode 100644
index 527fc3ba..00000000
--- a/apps/web/registry/miami/example/slider-format-label.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/miami/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderFormatLabel({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[2]}
-         max={5}
-         step={1}
-         className={ny('w-3/5', className)}
-         formatLabel={value => `${value} points`}
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/slider-inverted.tsx b/apps/web/registry/miami/example/slider-inverted.tsx
deleted file mode 100644
index 83dedaf4..00000000
--- a/apps/web/registry/miami/example/slider-inverted.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/miami/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderInverted({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[50]}
-         max={100}
-         step={1}
-         className={ny('w-3/5', className)}
-         inverted
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/slider-range.tsx b/apps/web/registry/miami/example/slider-range.tsx
deleted file mode 100644
index 06547c33..00000000
--- a/apps/web/registry/miami/example/slider-range.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/miami/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderRange({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[25, 75]}
-         max={100}
-         step={1}
-         className={ny('w-3/5', className)}
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/slider-ranges.tsx b/apps/web/registry/miami/example/slider-ranges.tsx
deleted file mode 100644
index 6aa781b5..00000000
--- a/apps/web/registry/miami/example/slider-ranges.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/miami/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderDemo({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[50, 75]}
-         max={100}
-         step={1}
-         className={ny('w-3/5', className)}
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/slider-tick-marks-full.tsx b/apps/web/registry/miami/example/slider-tick-marks-full.tsx
deleted file mode 100644
index d8651202..00000000
--- a/apps/web/registry/miami/example/slider-tick-marks-full.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/miami/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderTickMarksFull({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[2]}
-         max={5}
-         step={1}
-         className={ny('w-3/5', className)}
-         showSteps="full"
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/slider-tick-marks-half.tsx b/apps/web/registry/miami/example/slider-tick-marks-half.tsx
deleted file mode 100644
index 2698afea..00000000
--- a/apps/web/registry/miami/example/slider-tick-marks-half.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Slider } from '~/registry/miami/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderTickMarksHalf({ className, ...props }: SliderProps) {
-   return (
-      <Slider
-         defaultValue={[2]}
-         max={5}
-         step={1}
-         className={ny('w-3/5', className)}
-         showSteps="half"
-         {...props}
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/slider-vertical.tsx b/apps/web/registry/miami/example/slider-vertical.tsx
deleted file mode 100644
index c2906de7..00000000
--- a/apps/web/registry/miami/example/slider-vertical.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Slider } from '~/registry/miami/ui/slider'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export default function SliderVertical({ className, ...props }: SliderProps) {
-   return (
-      <>
-         {/* Vertical slider needs its parent container to define the height */}
-         <div className="h-64">
-            <Slider
-               defaultValue={[50]}
-               max={100}
-               step={1}
-               orientation="vertical"
-               className={className}
-               {...props}
-            />
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/sonner-demo.tsx b/apps/web/registry/miami/example/sonner-demo.tsx
deleted file mode 100644
index 13dcba16..00000000
--- a/apps/web/registry/miami/example/sonner-demo.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { toast } from 'sonner'
-
-import { Button } from '~/registry/miami/ui/button'
-
-export default function SonnerDemo() {
-   return (
-      <Button
-         variant="outline"
-         onClick={() =>
-            toast('Event has been created', {
-               description: 'Sunday, December 03, 2023 at 9:00 AM',
-               action: {
-                  label: 'Undo',
-
-                  // eslint-disable-next-line no-console
-                  onClick: () => console.log('Undo'),
-               },
-            })}
-      >
-         Show Toast
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/example/sparkles-text-demo.tsx b/apps/web/registry/miami/example/sparkles-text-demo.tsx
deleted file mode 100644
index 54c94c44..00000000
--- a/apps/web/registry/miami/example/sparkles-text-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import SparklesText from '~/registry/miami/ui/sparkles-text'
-
-export default async function SparklesTextDemo() {
-   return <SparklesText text="Nyxb UI" />
-}
diff --git a/apps/web/registry/miami/example/star-rating-colored.tsx b/apps/web/registry/miami/example/star-rating-colored.tsx
deleted file mode 100644
index 806c6c7a..00000000
--- a/apps/web/registry/miami/example/star-rating-colored.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react'
-import { StarRating } from '~/registry/miami/ui/star-rating'
-
-export default function StarRatingColored() {
-   const [value, setValue] = React.useState<number>(3)
-   return <StarRating value={value} setValue={setValue} iconProps={{ className: 'fill-yellow-500 stroke-yellow-500' }} />
-}
diff --git a/apps/web/registry/miami/example/star-rating-demo.tsx b/apps/web/registry/miami/example/star-rating-demo.tsx
deleted file mode 100644
index e7d0d08b..00000000
--- a/apps/web/registry/miami/example/star-rating-demo.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react'
-import { StarRating } from '~/registry/miami/ui/star-rating'
-
-export default function StarRatingDemo() {
-   const [value, setValue] = React.useState<number>(3)
-   return (<StarRating value={value} setValue={setValue} />)
-}
diff --git a/apps/web/registry/miami/example/star-rating-icon.tsx b/apps/web/registry/miami/example/star-rating-icon.tsx
deleted file mode 100644
index 2fdc3655..00000000
--- a/apps/web/registry/miami/example/star-rating-icon.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react'
-import { Heart } from 'lucide-react'
-import { StarRating } from '~/registry/miami/ui/star-rating'
-
-export default function StarRatingIcon() {
-   const [value, setValue] = React.useState<number>(3)
-   return <StarRating value={value} setValue={setValue} icon={Heart} />
-}
diff --git a/apps/web/registry/miami/example/stepper-clickable-steps.tsx b/apps/web/registry/miami/example/stepper-clickable-steps.tsx
deleted file mode 100644
index 290948d1..00000000
--- a/apps/web/registry/miami/example/stepper-clickable-steps.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import type {
-   StepItem,
-} from '~/registry/miami/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/miami/ui/stepper'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper
-            initialStep={0}
-            steps={steps}
-            onClickStep={(step, setStep) => {
-               toast({
-                  title: 'Step clicked',
-                  description:
-              'This event is executed globally for all steps. If you want to have an event for a specific step, use the `onClickStep` prop of the independent step.',
-               })
-               setStep(step)
-            }}
-         >
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/stepper-custom-icons.tsx b/apps/web/registry/miami/example/stepper-custom-icons.tsx
deleted file mode 100644
index 8a7b63b9..00000000
--- a/apps/web/registry/miami/example/stepper-custom-icons.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Building, Star, User } from 'lucide-react'
-
-import { Button } from '~/registry/miami/ui/button'
-import type {
-   StepItem,
-} from '~/registry/miami/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/miami/ui/stepper'
-
-const steps = [
-   { label: 'Step 1', icon: User },
-   { label: 'Step 2', icon: Building },
-   { label: 'Step 3', icon: Star },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/stepper-custom-styles.tsx b/apps/web/registry/miami/example/stepper-custom-styles.tsx
deleted file mode 100644
index 37dece37..00000000
--- a/apps/web/registry/miami/example/stepper-custom-styles.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import type {
-   StepItem,
-} from '~/registry/miami/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/miami/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper
-            initialStep={0}
-            steps={steps}
-            styles={{
-               'step-button-container': ny(
-                  'rounded-none text-purple-700',
-                  'data-[current=true]:border-purple-500 data-[current=true]:bg-purple-50',
-                  'data-[active=true]:border-purple-500 data-[active=true]:bg-purple-500',
-               ),
-               'horizontal-step':
-            'data-[completed=true]:[&:not(:last-child)]:after:bg-purple-500',
-            }}
-            variables={{
-               '--step-icon-size': '60px',
-               '--step-gap': '20px',
-            }}
-         >
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-      isDisabledStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/stepper-demo.tsx b/apps/web/registry/miami/example/stepper-demo.tsx
deleted file mode 100644
index 77ad81ba..00000000
--- a/apps/web/registry/miami/example/stepper-demo.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import type {
-   StepItem,
-} from '~/registry/miami/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/miami/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-      isDisabledStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/stepper-description.tsx b/apps/web/registry/miami/example/stepper-description.tsx
deleted file mode 100644
index 4762592a..00000000
--- a/apps/web/registry/miami/example/stepper-description.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import type {
-   StepItem,
-} from '~/registry/miami/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/miami/ui/stepper'
-
-const steps = [
-   { label: 'Step 1', description: 'Description 1' },
-   { label: 'Step 2', description: 'Description 2' },
-   { label: 'Step 3', description: 'Description 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-      isDisabledStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/stepper-footer-inside.tsx b/apps/web/registry/miami/example/stepper-footer-inside.tsx
deleted file mode 100644
index b6db4630..00000000
--- a/apps/web/registry/miami/example/stepper-footer-inside.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import type {
-   StepItem,
-} from '~/registry/miami/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/miami/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper orientation="vertical" initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                     <StepButtons />
-                  </Step>
-               )
-            })}
-            <FinalStep />
-         </Stepper>
-      </div>
-   )
-}
-
-function StepButtons() {
-   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep }
-    = useStepper()
-   return (
-      <div className="mb-4 flex w-full gap-2">
-         <Button
-            disabled={isDisabledStep}
-            onClick={prevStep}
-            size="sm"
-            variant="secondary"
-         >
-            Prev
-         </Button>
-         <Button size="sm" onClick={nextStep}>
-            {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-         </Button>
-      </div>
-   )
-}
-
-function FinalStep() {
-   const { hasCompletedAllSteps, resetSteps } = useStepper()
-
-   if (!hasCompletedAllSteps)
-      return null
-
-   return (
-      <>
-         <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
-            <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-         </div>
-         <div className="flex w-full justify-end gap-2">
-            <Button size="sm" onClick={resetSteps}>
-               Reset
-            </Button>
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/stepper-form.tsx b/apps/web/registry/miami/example/stepper-form.tsx
deleted file mode 100644
index 90b81806..00000000
--- a/apps/web/registry/miami/example/stepper-form.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import * as z from 'zod'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/miami/ui/form'
-import { Input } from '~/registry/miami/ui/input'
-import { Step, Stepper, useStepper } from '~/registry/miami/ui/stepper'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const steps = [
-   { label: 'Step 1', description: 'Description 1' },
-   { label: 'Step 2', description: 'Description 2' },
-]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper variant="circle-alt" initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               if (index === 0) {
-                  return (
-                     <Step key={stepProps.label} {...stepProps}>
-                        <FirstStepForm />
-                     </Step>
-                  )
-               }
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <SecondStepForm />
-                  </Step>
-               )
-            })}
-            <MyStepperFooter />
-         </Stepper>
-      </div>
-   )
-}
-
-const FirstFormSchema = z.object({
-   username: z.string().min(2, {
-      message: 'Username must be at least 2 characters.',
-   }),
-})
-
-function FirstStepForm() {
-   const { nextStep } = useStepper()
-
-   const form = useForm<z.infer<typeof FirstFormSchema>>({
-      resolver: zodResolver(FirstFormSchema),
-      defaultValues: {
-         username: '',
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FirstFormSchema>) {
-      nextStep()
-      toast({
-         title: 'First step submitted!',
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <FormField
-               control={form.control}
-               name="username"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Username</FormLabel>
-                     <FormControl>
-                        <Input placeholder="nyxb" {...field} />
-                     </FormControl>
-                     <FormDescription>
-                        This is your public display name.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <StepperFormActions />
-         </form>
-      </Form>
-   )
-}
-
-const SecondFormSchema = z.object({
-   password: z.string().min(8, {
-      message: 'Password must be at least 8 characters.',
-   }),
-})
-
-function SecondStepForm() {
-   const { nextStep } = useStepper()
-
-   const form = useForm<z.infer<typeof SecondFormSchema>>({
-      resolver: zodResolver(SecondFormSchema),
-      defaultValues: {
-         password: '',
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof SecondFormSchema>) {
-      nextStep()
-      toast({
-         title: 'Second step submitted!',
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <FormField
-               control={form.control}
-               name="password"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Password</FormLabel>
-                     <FormControl>
-                        <Input type="password" {...field} />
-                     </FormControl>
-                     <FormDescription>This is your private password.</FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <StepperFormActions />
-         </form>
-      </Form>
-   )
-}
-
-function StepperFormActions() {
-   const {
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-
-   return (
-      <div className="flex w-full justify-end gap-2">
-         {hasCompletedAllSteps
-            ? (
-                  <Button size="sm" onClick={resetSteps}>
-                     Reset
-                  </Button>
-               )
-            : (
-                  <>
-                     <Button
-                        disabled={isDisabledStep}
-                        onClick={prevStep}
-                        size="sm"
-                        variant="secondary"
-                     >
-                        Prev
-                     </Button>
-                     <Button size="sm">
-                        {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                     </Button>
-                  </>
-               )}
-      </div>
-   )
-}
-
-function MyStepperFooter() {
-   const { activeStep, resetSteps, steps } = useStepper()
-
-   if (activeStep !== steps.length)
-      return null
-
-   return (
-      <div className="flex items-center justify-end gap-2">
-         <Button onClick={resetSteps}>Reset Stepper with Form</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/stepper-optional-steps.tsx b/apps/web/registry/miami/example/stepper-optional-steps.tsx
deleted file mode 100644
index 6e94ef72..00000000
--- a/apps/web/registry/miami/example/stepper-optional-steps.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import type {
-   StepItem,
-} from '~/registry/miami/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/miami/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2', optional: true },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/stepper-orientation.tsx b/apps/web/registry/miami/example/stepper-orientation.tsx
deleted file mode 100644
index 5c6f21a6..00000000
--- a/apps/web/registry/miami/example/stepper-orientation.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import * as React from 'react'
-
-import { Button } from '~/registry/miami/ui/button'
-import { Label } from '~/registry/miami/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'
-import type {
-   StepItem,
-   StepperProps,
-} from '~/registry/miami/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/miami/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   const [orientation, setOrientation]
-    = React.useState<StepperProps['orientation']>('vertical')
-
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <RadioGroup
-            className="mb-2 flex"
-            value={orientation}
-            onValueChange={value =>
-               setOrientation(value as StepperProps['orientation'])}
-         >
-            <Label
-               htmlFor="horizontal"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem
-                  value="horizontal"
-                  id="horizontal"
-                  className="sr-only"
-               />
-               <h2 className="font-medium">Horizontal</h2>
-            </Label>
-            <Label
-               htmlFor="vertical"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem value="vertical" id="vertical" className="sr-only" />
-               <h2 className="font-medium">Vertical</h2>
-            </Label>
-         </RadioGroup>
-         <Stepper orientation={orientation} initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/stepper-scroll-tracking.tsx b/apps/web/registry/miami/example/stepper-scroll-tracking.tsx
deleted file mode 100644
index 54269fc6..00000000
--- a/apps/web/registry/miami/example/stepper-scroll-tracking.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import type {
-   StepItem,
-} from '~/registry/miami/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/miami/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-   { label: 'Step 4' },
-   { label: 'Step 5' },
-   { label: 'Step 6' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper
-            orientation="vertical"
-            initialStep={0}
-            steps={steps}
-            scrollTracking
-         >
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                     <StepButtons />
-                  </Step>
-               )
-            })}
-            <FinalStep />
-         </Stepper>
-      </div>
-   )
-}
-
-function StepButtons() {
-   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep }
-    = useStepper()
-   return (
-      <div className="mb-4 flex w-full gap-2">
-         <Button
-            disabled={isDisabledStep}
-            onClick={prevStep}
-            size="sm"
-            variant="secondary"
-         >
-            Prev
-         </Button>
-         <Button size="sm" onClick={nextStep}>
-            {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-         </Button>
-      </div>
-   )
-}
-
-function FinalStep() {
-   const { hasCompletedAllSteps, resetSteps } = useStepper()
-
-   if (!hasCompletedAllSteps)
-      return null
-
-   return (
-      <>
-         <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
-            <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-         </div>
-         <div className="flex w-full justify-end gap-2">
-            <Button size="sm" onClick={resetSteps}>
-               Reset
-            </Button>
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/stepper-sizes.tsx b/apps/web/registry/miami/example/stepper-sizes.tsx
deleted file mode 100644
index 79a00824..00000000
--- a/apps/web/registry/miami/example/stepper-sizes.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as React from 'react'
-
-import { Button } from '~/registry/miami/ui/button'
-import { Label } from '~/registry/miami/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'
-import type {
-   StepItem,
-   StepperProps,
-} from '~/registry/miami/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/miami/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   const [size, setSize] = React.useState<StepperProps['size']>('md')
-
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <RadioGroup
-            className="mb-2 flex"
-            value={size}
-            onValueChange={value => setSize(value as StepperProps['size'])}
-         >
-            <Label
-               htmlFor="sm"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem value="sm" id="sm" className="sr-only" />
-               <h2 className="font-medium">sm</h2>
-            </Label>
-            <Label
-               htmlFor="md"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem value="md" id="md" className="sr-only" />
-               <h2 className="font-medium">md</h2>
-            </Label>
-            <Label
-               htmlFor="lg"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem value="lg" id="lg" className="sr-only" />
-               <h2 className="font-medium">lg</h2>
-            </Label>
-         </RadioGroup>
-         <Stepper size={size} initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/stepper-state.tsx b/apps/web/registry/miami/example/stepper-state.tsx
deleted file mode 100644
index d5343ebd..00000000
--- a/apps/web/registry/miami/example/stepper-state.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import type {
-   StepItem,
-} from '~/registry/miami/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/miami/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <Stepper state="error" initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-      isError,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button disabled={isError} size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/stepper-variants.tsx b/apps/web/registry/miami/example/stepper-variants.tsx
deleted file mode 100644
index 586ab4b0..00000000
--- a/apps/web/registry/miami/example/stepper-variants.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as React from 'react'
-
-import { Button } from '~/registry/miami/ui/button'
-import { Label } from '~/registry/miami/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/registry/miami/ui/radio-group'
-import type {
-
-   StepItem,
-   StepperProps,
-} from '~/registry/miami/ui/stepper'
-import {
-   Step,
-   Stepper,
-   useStepper,
-} from '~/registry/miami/ui/stepper'
-
-const steps = [
-   { label: 'Step 1' },
-   { label: 'Step 2' },
-   { label: 'Step 3' },
-] satisfies StepItem[]
-
-export default function StepperDemo() {
-   const [variant, setVariant]
-    = React.useState<StepperProps['variant']>('circle')
-
-   return (
-      <div className="flex w-full flex-col gap-4">
-         <RadioGroup
-            className="mb-2 flex"
-            value={variant}
-            onValueChange={value => setVariant(value as StepperProps['variant'])}
-         >
-            <Label
-               htmlFor="circle"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem value="circle" id="circle" className="sr-only" />
-               <h2 className="font-medium">circle</h2>
-            </Label>
-            <Label
-               htmlFor="circle-alt"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem
-                  value="circle-alt"
-                  id="circle-alt"
-                  className="sr-only"
-               />
-               <h2 className="font-medium">circle-alt</h2>
-            </Label>
-            <Label
-               htmlFor="line"
-               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
-            >
-               <RadioGroupItem value="line" id="line" className="sr-only" />
-               <h2 className="font-medium">line</h2>
-            </Label>
-         </RadioGroup>
-         <Stepper variant={variant} initialStep={0} steps={steps}>
-            {steps.map((stepProps, index) => {
-               return (
-                  <Step key={stepProps.label} {...stepProps}>
-                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-                        <h1 className="text-xl">
-                           Step
-                           {index + 1}
-                        </h1>
-                     </div>
-                  </Step>
-               )
-            })}
-            <Footer />
-         </Stepper>
-      </div>
-   )
-}
-
-function Footer() {
-   const {
-      nextStep,
-      prevStep,
-      resetSteps,
-      isDisabledStep,
-      hasCompletedAllSteps,
-      isLastStep,
-      isOptionalStep,
-   } = useStepper()
-   return (
-      <>
-         {hasCompletedAllSteps && (
-            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
-               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
-            </div>
-         )}
-         <div className="flex w-full justify-end gap-2">
-            {hasCompletedAllSteps
-               ? (
-                     <Button size="sm" onClick={resetSteps}>
-                        Reset
-                     </Button>
-                  )
-               : (
-                     <>
-                        <Button
-                           disabled={isDisabledStep}
-                           onClick={prevStep}
-                           size="sm"
-                           variant="secondary"
-                        >
-                           Prev
-                        </Button>
-                        <Button size="sm" onClick={nextStep}>
-                           {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
-                        </Button>
-                     </>
-                  )}
-         </div>
-      </>
-   )
-}
diff --git a/apps/web/registry/miami/example/switch-demo.tsx b/apps/web/registry/miami/example/switch-demo.tsx
deleted file mode 100644
index cc22a601..00000000
--- a/apps/web/registry/miami/example/switch-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Label } from '~/registry/miami/ui/label'
-import { Switch } from '~/registry/miami/ui/switch'
-
-export default function SwitchDemo() {
-   return (
-      <div className="flex items-center space-x-2">
-         <Switch id="airplane-mode" />
-         <Label htmlFor="airplane-mode">Airplane Mode</Label>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/switch-form.tsx b/apps/web/registry/miami/example/switch-form.tsx
deleted file mode 100644
index fd5d7bc9..00000000
--- a/apps/web/registry/miami/example/switch-form.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-} from '~/registry/miami/ui/form'
-import { Switch } from '~/registry/miami/ui/switch'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const FormSchema = z.object({
-   marketing_emails: z.boolean().default(false).optional(),
-   security_emails: z.boolean(),
-})
-
-export default function SwitchForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-      defaultValues: {
-         security_emails: true,
-      },
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
-            <div>
-               <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
-               <div className="space-y-4">
-                  <FormField
-                     control={form.control}
-                     name="marketing_emails"
-                     render={({ field }) => (
-                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-                           <div className="space-y-0.5">
-                              <FormLabel>Marketing emails</FormLabel>
-                              <FormDescription>
-                                 Receive emails about new products, features, and more.
-                              </FormDescription>
-                           </div>
-                           <FormControl>
-                              <Switch
-                                 checked={field.value}
-                                 onCheckedChange={field.onChange}
-                              />
-                           </FormControl>
-                        </FormItem>
-                     )}
-                  />
-                  <FormField
-                     control={form.control}
-                     name="security_emails"
-                     render={({ field }) => (
-                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-                           <div className="space-y-0.5">
-                              <FormLabel>Security emails</FormLabel>
-                              <FormDescription>
-                                 Receive emails about your account security.
-                              </FormDescription>
-                           </div>
-                           <FormControl>
-                              <Switch
-                                 checked={field.value}
-                                 onCheckedChange={field.onChange}
-                                 disabled
-                                 aria-readonly
-                              />
-                           </FormControl>
-                        </FormItem>
-                     )}
-                  />
-               </div>
-            </div>
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/table-demo.tsx b/apps/web/registry/miami/example/table-demo.tsx
deleted file mode 100644
index 40955418..00000000
--- a/apps/web/registry/miami/example/table-demo.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-   Table,
-   TableBody,
-   TableCaption,
-   TableCell,
-   TableFooter,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from '~/registry/miami/ui/table'
-
-const invoices = [
-   {
-      invoice: 'INV001',
-      paymentStatus: 'Paid',
-      totalAmount: '$250.00',
-      paymentMethod: 'Credit Card',
-   },
-   {
-      invoice: 'INV002',
-      paymentStatus: 'Pending',
-      totalAmount: '$150.00',
-      paymentMethod: 'PayPal',
-   },
-   {
-      invoice: 'INV003',
-      paymentStatus: 'Unpaid',
-      totalAmount: '$350.00',
-      paymentMethod: 'Bank Transfer',
-   },
-   {
-      invoice: 'INV004',
-      paymentStatus: 'Paid',
-      totalAmount: '$450.00',
-      paymentMethod: 'Credit Card',
-   },
-   {
-      invoice: 'INV005',
-      paymentStatus: 'Paid',
-      totalAmount: '$550.00',
-      paymentMethod: 'PayPal',
-   },
-   {
-      invoice: 'INV006',
-      paymentStatus: 'Pending',
-      totalAmount: '$200.00',
-      paymentMethod: 'Bank Transfer',
-   },
-   {
-      invoice: 'INV007',
-      paymentStatus: 'Unpaid',
-      totalAmount: '$300.00',
-      paymentMethod: 'Credit Card',
-   },
-]
-
-export default function TableDemo() {
-   return (
-      <Table>
-         <TableCaption>A list of your recent invoices.</TableCaption>
-         <TableHeader>
-            <TableRow>
-               <TableHead className="w-[100px]">Invoice</TableHead>
-               <TableHead>Status</TableHead>
-               <TableHead>Method</TableHead>
-               <TableHead className="text-right">Amount</TableHead>
-            </TableRow>
-         </TableHeader>
-         <TableBody>
-            {invoices.map(invoice => (
-               <TableRow key={invoice.invoice}>
-                  <TableCell className="font-medium">{invoice.invoice}</TableCell>
-                  <TableCell>{invoice.paymentStatus}</TableCell>
-                  <TableCell>{invoice.paymentMethod}</TableCell>
-                  <TableCell className="text-right">{invoice.totalAmount}</TableCell>
-               </TableRow>
-            ))}
-         </TableBody>
-         <TableFooter>
-            <TableRow>
-               <TableCell colSpan={3}>Total</TableCell>
-               <TableCell className="text-right">$2,500.00</TableCell>
-            </TableRow>
-         </TableFooter>
-      </Table>
-   )
-}
diff --git a/apps/web/registry/miami/example/tabs-demo.tsx b/apps/web/registry/miami/example/tabs-demo.tsx
deleted file mode 100644
index f999ec16..00000000
--- a/apps/web/registry/miami/example/tabs-demo.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { Label } from '~/registry/miami/ui/label'
-import {
-   Tabs,
-   TabsContent,
-   TabsList,
-   TabsTrigger,
-} from '~/registry/miami/ui/tabs'
-
-export default function TabsDemo() {
-   return (
-      <Tabs defaultValue="account" className="w-[400px]">
-         <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="account">Account</TabsTrigger>
-            <TabsTrigger value="password">Password</TabsTrigger>
-         </TabsList>
-         <TabsContent value="account">
-            <Card>
-               <CardHeader>
-                  <CardTitle>Account</CardTitle>
-                  <CardDescription>
-                     Make changes to your account here. Click save when you're done.
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="space-y-2">
-                  <div className="space-y-1">
-                     <Label htmlFor="name">Name</Label>
-                     <Input id="name" defaultValue="Pedro Duarte" />
-                  </div>
-                  <div className="space-y-1">
-                     <Label htmlFor="username">Username</Label>
-                     <Input id="username" defaultValue="~peduarte" />
-                  </div>
-               </CardContent>
-               <CardFooter>
-                  <Button>Save changes</Button>
-               </CardFooter>
-            </Card>
-         </TabsContent>
-         <TabsContent value="password">
-            <Card>
-               <CardHeader>
-                  <CardTitle>Password</CardTitle>
-                  <CardDescription>
-                     Change your password here. After saving, you'll be logged out.
-                  </CardDescription>
-               </CardHeader>
-               <CardContent className="space-y-2">
-                  <div className="space-y-1">
-                     <Label htmlFor="current">Current password</Label>
-                     <Input id="current" type="password" />
-                  </div>
-                  <div className="space-y-1">
-                     <Label htmlFor="new">New password</Label>
-                     <Input id="new" type="password" />
-                  </div>
-               </CardContent>
-               <CardFooter>
-                  <Button>Save password</Button>
-               </CardFooter>
-            </Card>
-         </TabsContent>
-      </Tabs>
-   )
-}
diff --git a/apps/web/registry/miami/example/text-reveal-demo.tsx b/apps/web/registry/miami/example/text-reveal-demo.tsx
deleted file mode 100644
index 11498bb5..00000000
--- a/apps/web/registry/miami/example/text-reveal-demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import TextReveal from '~/registry/miami/ui/text-reveal'
-
-export default async function TextRevealDemo() {
-   return (
-      <div className="z-10 flex min-h-64 items-center justify-center rounded-lg border bg-white dark:bg-black">
-         <TextReveal text="Nyxb UI will change the way you design." />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/textarea-demo.tsx b/apps/web/registry/miami/example/textarea-demo.tsx
deleted file mode 100644
index 8f274c21..00000000
--- a/apps/web/registry/miami/example/textarea-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Textarea } from '~/registry/miami/ui/textarea'
-
-export default function TextareaDemo() {
-   return <Textarea placeholder="Type your message here." />
-}
diff --git a/apps/web/registry/miami/example/textarea-disabled.tsx b/apps/web/registry/miami/example/textarea-disabled.tsx
deleted file mode 100644
index f4a8dffb..00000000
--- a/apps/web/registry/miami/example/textarea-disabled.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Textarea } from '~/registry/miami/ui/textarea'
-
-export default function TextareaDisabled() {
-   return <Textarea placeholder="Type your message here." disabled />
-}
diff --git a/apps/web/registry/miami/example/textarea-form.tsx b/apps/web/registry/miami/example/textarea-form.tsx
deleted file mode 100644
index 6e6f8456..00000000
--- a/apps/web/registry/miami/example/textarea-form.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Form,
-   FormControl,
-   FormDescription,
-   FormField,
-   FormItem,
-   FormLabel,
-   FormMessage,
-} from '~/registry/miami/ui/form'
-import { Textarea } from '~/registry/miami/ui/textarea'
-import { toast } from '~/registry/miami/ui/use-toast'
-
-const FormSchema = z.object({
-   bio: z
-      .string()
-      .min(10, {
-         message: 'Bio must be at least 10 characters.',
-      })
-      .max(160, {
-         message: 'Bio must not be longer than 30 characters.',
-      }),
-})
-
-export default function TextareaForm() {
-   const form = useForm<z.infer<typeof FormSchema>>({
-      resolver: zodResolver(FormSchema),
-   })
-
-   function onSubmit(data: z.infer<typeof FormSchema>) {
-      toast({
-         title: 'You submitted the following values:',
-         description: (
-            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-            </pre>
-         ),
-      })
-   }
-
-   return (
-      <Form {...form}>
-         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-            <FormField
-               control={form.control}
-               name="bio"
-               render={({ field }) => (
-                  <FormItem>
-                     <FormLabel>Bio</FormLabel>
-                     <FormControl>
-                        <Textarea
-                           placeholder="Tell us a little bit about yourself"
-                           className="resize-none"
-                           {...field}
-                        />
-                     </FormControl>
-                     <FormDescription>
-                        You can
-                        {' '}
-                        <span>@mention</span>
-                        {' '}
-                        other users and organizations.
-                     </FormDescription>
-                     <FormMessage />
-                  </FormItem>
-               )}
-            />
-            <Button type="submit">Submit</Button>
-         </form>
-      </Form>
-   )
-}
diff --git a/apps/web/registry/miami/example/textarea-with-button.tsx b/apps/web/registry/miami/example/textarea-with-button.tsx
deleted file mode 100644
index 844e2231..00000000
--- a/apps/web/registry/miami/example/textarea-with-button.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import { Textarea } from '~/registry/miami/ui/textarea'
-
-export default function TextareaWithButton() {
-   return (
-      <div className="grid w-full gap-2">
-         <Textarea placeholder="Type your message here." />
-         <Button>Send message</Button>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/textarea-with-label.tsx b/apps/web/registry/miami/example/textarea-with-label.tsx
deleted file mode 100644
index 540a781e..00000000
--- a/apps/web/registry/miami/example/textarea-with-label.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Label } from '~/registry/miami/ui/label'
-import { Textarea } from '~/registry/miami/ui/textarea'
-
-export default function TextareaWithLabel() {
-   return (
-      <div className="grid w-full gap-1.5">
-         <Label htmlFor="message">Your message</Label>
-         <Textarea placeholder="Type your message here." id="message" />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/textarea-with-text.tsx b/apps/web/registry/miami/example/textarea-with-text.tsx
deleted file mode 100644
index 4c3b7687..00000000
--- a/apps/web/registry/miami/example/textarea-with-text.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Label } from '~/registry/miami/ui/label'
-import { Textarea } from '~/registry/miami/ui/textarea'
-
-export default function TextareaWithText() {
-   return (
-      <div className="grid w-full gap-1.5">
-         <Label htmlFor="message-2">Your Message</Label>
-         <Textarea placeholder="Type your message here." id="message-2" />
-         <p className="text-muted-foreground text-sm">
-            Your message will be copied to the support team.
-         </p>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/timeline-alternate.tsx b/apps/web/registry/miami/example/timeline-alternate.tsx
deleted file mode 100644
index 2612dc9f..00000000
--- a/apps/web/registry/miami/example/timeline-alternate.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react'
-
-import {
-   Timeline,
-   TimelineContent,
-   TimelineDot,
-   TimelineHeading,
-   TimelineItem,
-   TimelineLine,
-} from '~/registry/miami/ui/timeline'
-
-export default function TimelineAlternate() {
-   return (
-      <Timeline positions="center">
-         <TimelineItem status="done">
-            <TimelineHeading side="left">Plan!</TimelineHeading>
-            <TimelineDot status="done" />
-            <TimelineLine done />
-            <TimelineContent side="left">
-               Before diving into coding, it is crucial to plan your software project
-               thoroughly. This involves defining the project scope, setting clear
-               objectives, and identifying the target audience. Additionally,
-               creating a timeline and allocating resources appropriately will
-               contribute to a successful development process.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="right" className="text-destructive">
-               Design
-            </TimelineHeading>
-            <TimelineDot status="error" />
-            <TimelineLine done />
-            <TimelineContent>
-               Designing your software involves creating a blueprint that outlines
-               the structure, user interface, and functionality of your application.
-               Consider user experience (UX) principles, wireframing, and prototyping
-               to ensure an intuitive and visually appealing design.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="left">Code</TimelineHeading>
-            <TimelineDot status="current" />
-            <TimelineLine />
-            <TimelineContent side="left">
-               The coding phase involves translating your design into actual code.
-               Choose a programming language and framework that aligns with your
-               project requirements. Follow best practices, such as modular and
-               reusable code, to enhance maintainability and scalability. Regularly
-               test your code to identify and fix any bugs or errors.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading>Test</TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent>
-               Thorough testing is essential to ensure the quality and reliability of
-               your software. Implement different testing methodologies, including
-               unit testing, integration testing, and user acceptance testing. This
-               helps identify and rectify any issues before deploying the software.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading side="left">Deploy</TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent side="left">
-               Once your software has passed rigorous testing, it's time to deploy
-               it. Consider the deployment environment, whether it's on-premises or
-               in the cloud. Ensure proper documentation and provide clear
-               instructions for installation and configuration.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineDot />
-            <TimelineHeading>Done!</TimelineHeading>
-         </TimelineItem>
-      </Timeline>
-   )
-}
diff --git a/apps/web/registry/miami/example/timeline-demo.tsx b/apps/web/registry/miami/example/timeline-demo.tsx
deleted file mode 100644
index 2e48fc28..00000000
--- a/apps/web/registry/miami/example/timeline-demo.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react'
-
-import {
-   Timeline,
-   TimelineContent,
-   TimelineDot,
-   TimelineHeading,
-   TimelineItem,
-   TimelineLine,
-} from '~/registry/miami/ui/timeline'
-
-export default function TimelineDemo() {
-   return (
-      <Timeline>
-         <TimelineItem status="done">
-            <TimelineHeading>Plan!</TimelineHeading>
-            <TimelineDot status="done" />
-            <TimelineLine done />
-            <TimelineContent>
-               Before diving into coding, it is crucial to plan your software project
-               thoroughly. This involves defining the project scope, setting clear
-               objectives, and identifying the target audience. Additionally,
-               creating a timeline and allocating resources appropriately will
-               contribute to a successful development process.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="right" className="text-destructive">
-               Design
-            </TimelineHeading>
-            <TimelineDot status="error" />
-            <TimelineLine done />
-            <TimelineContent>
-               Designing your software involves creating a blueprint that outlines
-               the structure, user interface, and functionality of your application.
-               Consider user experience (UX) principles, wireframing, and prototyping
-               to ensure an intuitive and visually appealing design.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading>Code</TimelineHeading>
-            <TimelineDot status="current" />
-            <TimelineLine />
-            <TimelineContent>
-               The coding phase involves translating your design into actual code.
-               Choose a programming language and framework that aligns with your
-               project requirements. Follow best practices, such as modular and
-               reusable code, to enhance maintainability and scalability. Regularly
-               test your code to identify and fix any bugs or errors.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading>Test</TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent>
-               Thorough testing is essential to ensure the quality and reliability of
-               your software. Implement different testing methodologies, including
-               unit testing, integration testing, and user acceptance testing. This
-               helps identify and rectify any issues before deploying the software.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading>Deploy</TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent>
-               Once your software has passed rigorous testing, it's time to deploy
-               it. Consider the deployment environment, whether it's on-premises or
-               in the cloud. Ensure proper documentation and provide clear
-               instructions for installation and configuration.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading>Done!</TimelineHeading>
-            <TimelineDot />
-         </TimelineItem>
-      </Timeline>
-   )
-}
diff --git a/apps/web/registry/miami/example/timeline-labels.tsx b/apps/web/registry/miami/example/timeline-labels.tsx
deleted file mode 100644
index f821d034..00000000
--- a/apps/web/registry/miami/example/timeline-labels.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react'
-
-import {
-   Timeline,
-   TimelineContent,
-   TimelineDot,
-   TimelineHeading,
-   TimelineItem,
-   TimelineLine,
-} from '~/registry/miami/ui/timeline'
-
-export default function TimelineAlternate() {
-   return (
-      <Timeline positions="center">
-         <TimelineItem status="done">
-            <TimelineHeading side="left">Plan!</TimelineHeading>
-            <TimelineHeading side="right" variant="secondary">
-               Done (05/04/2024)
-            </TimelineHeading>
-            <TimelineDot status="done" />
-            <TimelineLine done />
-            <TimelineContent side="left">
-               Before diving into coding, it is crucial to plan your software project
-               thoroughly. This involves defining the project scope, setting clear
-               objectives, and identifying the target audience. Additionally,
-               creating a timeline and allocating resources appropriately will
-               contribute to a successful development process.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="right" className="text-destructive">
-               Design
-            </TimelineHeading>
-            <TimelineHeading side="left" variant="secondary">
-               Failed (05/04/2024)
-            </TimelineHeading>
-            <TimelineDot status="error" />
-            <TimelineLine done />
-            <TimelineContent>
-               Designing your software involves creating a blueprint that outlines
-               the structure, user interface, and functionality of your application.
-               Consider user experience (UX) principles, wireframing, and prototyping
-               to ensure an intuitive and visually appealing design.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="left">Code</TimelineHeading>
-            <TimelineHeading side="right" variant="secondary">
-               Current step
-            </TimelineHeading>
-            <TimelineDot status="current" />
-            <TimelineLine />
-            <TimelineContent side="left">
-               The coding phase involves translating your design into actual code.
-               Choose a programming language and framework that aligns with your
-               project requirements. Follow best practices, such as modular and
-               reusable code, to enhance maintainability and scalability. Regularly
-               test your code to identify and fix any bugs or errors.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading>Test</TimelineHeading>
-            <TimelineHeading side="left" variant="secondary">
-               Next step
-            </TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent>
-               Thorough testing is essential to ensure the quality and reliability of
-               your software. Implement different testing methodologies, including
-               unit testing, integration testing, and user acceptance testing. This
-               helps identify and rectify any issues before deploying the software.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading side="left">Deploy</TimelineHeading>
-            <TimelineHeading side="right" variant="secondary">
-               Deadline (05/10/2024)
-            </TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent side="left">
-               Once your software has passed rigorous testing, it's time to deploy
-               it. Consider the deployment environment, whether it's on-premises or
-               in the cloud. Ensure proper documentation and provide clear
-               instructions for installation and configuration.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineDot />
-            <TimelineHeading>Done!</TimelineHeading>
-            <TimelineHeading side="left" variant="secondary">
-               Here everything ends
-            </TimelineHeading>
-         </TimelineItem>
-      </Timeline>
-   )
-}
diff --git a/apps/web/registry/miami/example/timeline-right.tsx b/apps/web/registry/miami/example/timeline-right.tsx
deleted file mode 100644
index e9da2ca8..00000000
--- a/apps/web/registry/miami/example/timeline-right.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react'
-
-import {
-   Timeline,
-   TimelineContent,
-   TimelineDot,
-   TimelineHeading,
-   TimelineItem,
-   TimelineLine,
-} from '~/registry/miami/ui/timeline'
-
-export default function TimelineRight() {
-   return (
-      <Timeline positions="right">
-         <TimelineItem status="done">
-            <TimelineHeading side="left">Plan!</TimelineHeading>
-            <TimelineDot status="done" />
-            <TimelineLine done />
-            <TimelineContent side="left">
-               Before diving into coding, it is crucial to plan your software project
-               thoroughly. This involves defining the project scope, setting clear
-               objectives, and identifying the target audience. Additionally,
-               creating a timeline and allocating resources appropriately will
-               contribute to a successful development process.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="left" className="text-destructive">
-               Design
-            </TimelineHeading>
-            <TimelineDot status="error" />
-            <TimelineLine done />
-            <TimelineContent side="left">
-               Designing your software involves creating a blueprint that outlines
-               the structure, user interface, and functionality of your application.
-               Consider user experience (UX) principles, wireframing, and prototyping
-               to ensure an intuitive and visually appealing design.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem status="done">
-            <TimelineHeading side="left">Code</TimelineHeading>
-            <TimelineDot status="current" />
-            <TimelineLine />
-            <TimelineContent side="left">
-               The coding phase involves translating your design into actual code.
-               Choose a programming language and framework that aligns with your
-               project requirements. Follow best practices, such as modular and
-               reusable code, to enhance maintainability and scalability. Regularly
-               test your code to identify and fix any bugs or errors.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading side="left">Test</TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent side="left">
-               Thorough testing is essential to ensure the quality and reliability of
-               your software. Implement different testing methodologies, including
-               unit testing, integration testing, and user acceptance testing. This
-               helps identify and rectify any issues before deploying the software.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineHeading side="left">Deploy</TimelineHeading>
-            <TimelineDot />
-            <TimelineLine />
-            <TimelineContent side="left">
-               Once your software has passed rigorous testing, it's time to deploy
-               it. Consider the deployment environment, whether it's on-premises or
-               in the cloud. Ensure proper documentation and provide clear
-               instructions for installation and configuration.
-            </TimelineContent>
-         </TimelineItem>
-         <TimelineItem>
-            <TimelineDot />
-            <TimelineHeading side="left">Done!</TimelineHeading>
-         </TimelineItem>
-      </Timeline>
-   )
-}
diff --git a/apps/web/registry/miami/example/toast-demo.tsx b/apps/web/registry/miami/example/toast-demo.tsx
deleted file mode 100644
index 5d93b570..00000000
--- a/apps/web/registry/miami/example/toast-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-import { ToastAction } from '~/registry/miami/ui/toast'
-import { useToast } from '~/registry/miami/ui/use-toast'
-
-export default function ToastDemo() {
-   const { toast } = useToast()
-
-   return (
-      <Button
-         variant="outline"
-         onClick={() => {
-            toast({
-               title: 'Scheduled: Catch up ',
-               description: 'Friday, February 10, 2023 at 5:57 PM',
-               action: (
-                  <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
-               ),
-            })
-         }}
-      >
-         Add to calendar
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/example/toast-destructive.tsx b/apps/web/registry/miami/example/toast-destructive.tsx
deleted file mode 100644
index bd138dad..00000000
--- a/apps/web/registry/miami/example/toast-destructive.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-import { ToastAction } from '~/registry/miami/ui/toast'
-import { useToast } from '~/registry/miami/ui/use-toast'
-
-export default function ToastDestructive() {
-   const { toast } = useToast()
-
-   return (
-      <Button
-         variant="outline"
-         onClick={() => {
-            toast({
-               variant: 'destructive',
-               title: 'Uh oh! Something went wrong.',
-               description: 'There was a problem with your request.',
-               action: <ToastAction altText="Try again">Try again</ToastAction>,
-            })
-         }}
-      >
-         Show Toast
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/example/toast-simple.tsx b/apps/web/registry/miami/example/toast-simple.tsx
deleted file mode 100644
index 425c8a15..00000000
--- a/apps/web/registry/miami/example/toast-simple.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-import { useToast } from '~/registry/miami/ui/use-toast'
-
-export default function ToastSimple() {
-   const { toast } = useToast()
-
-   return (
-      <Button
-         variant="outline"
-         onClick={() => {
-            toast({
-               description: 'Your message has been sent.',
-            })
-         }}
-      >
-         Show Toast
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/example/toast-with-action.tsx b/apps/web/registry/miami/example/toast-with-action.tsx
deleted file mode 100644
index 1fb60f34..00000000
--- a/apps/web/registry/miami/example/toast-with-action.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-import { ToastAction } from '~/registry/miami/ui/toast'
-import { useToast } from '~/registry/miami/ui/use-toast'
-
-export default function ToastWithAction() {
-   const { toast } = useToast()
-
-   return (
-      <Button
-         variant="outline"
-         onClick={() => {
-            toast({
-               title: 'Uh oh! Something went wrong.',
-               description: 'There was a problem with your request.',
-               action: <ToastAction altText="Try again">Try again</ToastAction>,
-            })
-         }}
-      >
-         Show Toast
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/example/toast-with-title.tsx b/apps/web/registry/miami/example/toast-with-title.tsx
deleted file mode 100644
index 8ae558bf..00000000
--- a/apps/web/registry/miami/example/toast-with-title.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import { Button } from '~/registry/miami/ui/button'
-import { useToast } from '~/registry/miami/ui/use-toast'
-
-export default function ToastWithTitle() {
-   const { toast } = useToast()
-
-   return (
-      <Button
-         variant="outline"
-         onClick={() => {
-            toast({
-               title: 'Uh oh! Something went wrong.',
-               description: 'There was a problem with your request.',
-            })
-         }}
-      >
-         Show Toast
-      </Button>
-   )
-}
diff --git a/apps/web/registry/miami/example/toc-active.tsx b/apps/web/registry/miami/example/toc-active.tsx
deleted file mode 100644
index 78d84eba..00000000
--- a/apps/web/registry/miami/example/toc-active.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
-   TableOfContentsItem,
-   TableOfContentsLink,
-   TableOfContentsList,
-   TableOfContentsTitle,
-} from '~/registry/miami/ui/toc'
-
-export default function TOCActive() {
-   return (
-      <TableOfContentsList>
-         <TableOfContentsTitle>Active Item Table of Contents</TableOfContentsTitle>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#first-section">
-               First Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-         <TableOfContentsItem indent>
-            <TableOfContentsLink isActive href="#second-section">
-               Second Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#third-section">
-               Third Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-      </TableOfContentsList>
-   )
-}
diff --git a/apps/web/registry/miami/example/toc-demo.tsx b/apps/web/registry/miami/example/toc-demo.tsx
deleted file mode 100644
index 4aa227eb..00000000
--- a/apps/web/registry/miami/example/toc-demo.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
-   TableOfContentsItem,
-   TableOfContentsLink,
-   TableOfContentsList,
-   TableOfContentsTitle,
-} from '~/registry/miami/ui/toc'
-
-export default function TOCDemo() {
-   return (
-      <TableOfContentsList>
-         <TableOfContentsTitle>Table of Contents</TableOfContentsTitle>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#first-section">
-               First Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#second-section">
-               Second Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#third-section">
-               Third Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-      </TableOfContentsList>
-   )
-}
diff --git a/apps/web/registry/miami/example/toc-nested.tsx b/apps/web/registry/miami/example/toc-nested.tsx
deleted file mode 100644
index d04a1ec7..00000000
--- a/apps/web/registry/miami/example/toc-nested.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-   TableOfContentsItem,
-   TableOfContentsLink,
-   TableOfContentsList,
-   TableOfContentsTitle,
-} from '~/registry/miami/ui/toc'
-
-export default function TOCDNested() {
-   return (
-      <TableOfContentsList>
-         <TableOfContentsTitle>Nested Table of Contents</TableOfContentsTitle>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#first-section-nested">
-               First Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-         <TableOfContentsItem indent>
-            <TableOfContentsList>
-               <TableOfContentsLink href="#first-nested-section-nested">
-                  First Nested Section
-               </TableOfContentsLink>
-               <TableOfContentsItem indent>
-                  <TableOfContentsLink href="#second-nested-section-nested">
-                     Second Nested Section
-                  </TableOfContentsLink>
-               </TableOfContentsItem>
-            </TableOfContentsList>
-         </TableOfContentsItem>
-         <TableOfContentsItem>
-            <TableOfContentsLink href="#third-section-nested">
-               Third Section
-            </TableOfContentsLink>
-         </TableOfContentsItem>
-      </TableOfContentsList>
-   )
-}
diff --git a/apps/web/registry/miami/example/toggle-demo.tsx b/apps/web/registry/miami/example/toggle-demo.tsx
deleted file mode 100644
index 073cffbf..00000000
--- a/apps/web/registry/miami/example/toggle-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontBoldIcon } from '@radix-ui/react-icons'
-
-import { Toggle } from '~/registry/miami/ui/toggle'
-
-export default function ToggleDemo() {
-   return (
-      <Toggle aria-label="Toggle italic">
-         <FontBoldIcon className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/miami/example/toggle-disabled.tsx b/apps/web/registry/miami/example/toggle-disabled.tsx
deleted file mode 100644
index 01526454..00000000
--- a/apps/web/registry/miami/example/toggle-disabled.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { UnderlineIcon } from '@radix-ui/react-icons'
-
-import { Toggle } from '~/registry/miami/ui/toggle'
-
-export default function ToggleDisabled() {
-   return (
-      <Toggle aria-label="Toggle italic" disabled>
-         <UnderlineIcon className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/miami/example/toggle-group-demo.tsx b/apps/web/registry/miami/example/toggle-group-demo.tsx
deleted file mode 100644
index 345586b9..00000000
--- a/apps/web/registry/miami/example/toggle-group-demo.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-   FontBoldIcon,
-   FontItalicIcon,
-   UnderlineIcon,
-} from '@radix-ui/react-icons'
-
-import { ToggleGroup, ToggleGroupItem } from '~/registry/miami/ui/toggle-group'
-
-export default function ToggleGroupDemo() {
-   return (
-      <ToggleGroup type="multiple">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <FontBoldIcon className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <FontItalicIcon className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-            <UnderlineIcon className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/miami/example/toggle-group-disabled.tsx b/apps/web/registry/miami/example/toggle-group-disabled.tsx
deleted file mode 100644
index 30c80757..00000000
--- a/apps/web/registry/miami/example/toggle-group-disabled.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-   FontBoldIcon,
-   FontItalicIcon,
-   UnderlineIcon,
-} from '@radix-ui/react-icons'
-
-import { ToggleGroup, ToggleGroupItem } from '~/registry/miami/ui/toggle-group'
-
-export default function ToggleGroupDemo() {
-   return (
-      <ToggleGroup type="multiple" disabled>
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <FontBoldIcon className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <FontItalicIcon className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-            <UnderlineIcon className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/miami/example/toggle-group-lg.tsx b/apps/web/registry/miami/example/toggle-group-lg.tsx
deleted file mode 100644
index 78a49fd7..00000000
--- a/apps/web/registry/miami/example/toggle-group-lg.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-   FontBoldIcon,
-   FontItalicIcon,
-   UnderlineIcon,
-} from '@radix-ui/react-icons'
-
-import { ToggleGroup, ToggleGroupItem } from '~/registry/miami/ui/toggle-group'
-
-export default function ToggleGroupDemo() {
-   return (
-      <ToggleGroup type="multiple" size="lg">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <FontBoldIcon className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <FontItalicIcon className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-            <UnderlineIcon className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/miami/example/toggle-group-outline.tsx b/apps/web/registry/miami/example/toggle-group-outline.tsx
deleted file mode 100644
index 79e06b48..00000000
--- a/apps/web/registry/miami/example/toggle-group-outline.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-   FontBoldIcon,
-   FontItalicIcon,
-   UnderlineIcon,
-} from '@radix-ui/react-icons'
-
-import { ToggleGroup, ToggleGroupItem } from '~/registry/miami/ui/toggle-group'
-
-export default function ToggleGroupDemo() {
-   return (
-      <ToggleGroup type="multiple" variant="outline">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <FontBoldIcon className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <FontItalicIcon className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-            <UnderlineIcon className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/miami/example/toggle-group-single.tsx b/apps/web/registry/miami/example/toggle-group-single.tsx
deleted file mode 100644
index 7d7ad541..00000000
--- a/apps/web/registry/miami/example/toggle-group-single.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-   FontBoldIcon,
-   FontItalicIcon,
-   UnderlineIcon,
-} from '@radix-ui/react-icons'
-
-import { ToggleGroup, ToggleGroupItem } from '~/registry/miami/ui/toggle-group'
-
-export default function ToggleGroupDemo() {
-   return (
-      <ToggleGroup type="single">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <FontBoldIcon className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <FontItalicIcon className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-            <UnderlineIcon className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/miami/example/toggle-group-sm.tsx b/apps/web/registry/miami/example/toggle-group-sm.tsx
deleted file mode 100644
index 4b61e6d5..00000000
--- a/apps/web/registry/miami/example/toggle-group-sm.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-   FontBoldIcon,
-   FontItalicIcon,
-   UnderlineIcon,
-} from '@radix-ui/react-icons'
-
-import { ToggleGroup, ToggleGroupItem } from '~/registry/miami/ui/toggle-group'
-
-export default function ToggleGroupDemo() {
-   return (
-      <ToggleGroup type="single" size="sm">
-         <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <FontBoldIcon className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <FontItalicIcon className="size-4" />
-         </ToggleGroupItem>
-         <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-            <UnderlineIcon className="size-4" />
-         </ToggleGroupItem>
-      </ToggleGroup>
-   )
-}
diff --git a/apps/web/registry/miami/example/toggle-lg.tsx b/apps/web/registry/miami/example/toggle-lg.tsx
deleted file mode 100644
index 6f34d38b..00000000
--- a/apps/web/registry/miami/example/toggle-lg.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontItalicIcon } from '@radix-ui/react-icons'
-
-import { Toggle } from '~/registry/miami/ui/toggle'
-
-export default function ToggleLg() {
-   return (
-      <Toggle size="lg" aria-label="Toggle italic">
-         <FontItalicIcon className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/miami/example/toggle-outline.tsx b/apps/web/registry/miami/example/toggle-outline.tsx
deleted file mode 100644
index 8a630dee..00000000
--- a/apps/web/registry/miami/example/toggle-outline.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontItalicIcon } from '@radix-ui/react-icons'
-
-import { Toggle } from '~/registry/miami/ui/toggle'
-
-export default function ToggleOutline() {
-   return (
-      <Toggle variant="outline" aria-label="Toggle italic">
-         <FontItalicIcon className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/miami/example/toggle-sm.tsx b/apps/web/registry/miami/example/toggle-sm.tsx
deleted file mode 100644
index c209cb3d..00000000
--- a/apps/web/registry/miami/example/toggle-sm.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontItalicIcon } from '@radix-ui/react-icons'
-
-import { Toggle } from '~/registry/miami/ui/toggle'
-
-export default function ToggleSm() {
-   return (
-      <Toggle size="sm" aria-label="Toggle italic">
-         <FontItalicIcon className="size-4" />
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/miami/example/toggle-with-text.tsx b/apps/web/registry/miami/example/toggle-with-text.tsx
deleted file mode 100644
index 03fdf8f1..00000000
--- a/apps/web/registry/miami/example/toggle-with-text.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FontItalicIcon } from '@radix-ui/react-icons'
-
-import { Toggle } from '~/registry/miami/ui/toggle'
-
-export default function ToggleWithText() {
-   return (
-      <Toggle aria-label="Toggle italic">
-         <FontItalicIcon className="mr-2 size-4" />
-         Italic
-      </Toggle>
-   )
-}
diff --git a/apps/web/registry/miami/example/tooltip-demo.tsx b/apps/web/registry/miami/example/tooltip-demo.tsx
deleted file mode 100644
index c139e8df..00000000
--- a/apps/web/registry/miami/example/tooltip-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Tooltip,
-   TooltipArrow,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-
-export default function TooltipDemo() {
-   return (
-      <TooltipProvider>
-         <Tooltip>
-            <TooltipTrigger asChild>
-               <Button variant="outline">Hover</Button>
-            </TooltipTrigger>
-            <TooltipContent>
-               <p>Add to library</p>
-               <TooltipArrow />
-            </TooltipContent>
-         </Tooltip>
-      </TooltipProvider>
-   )
-}
diff --git a/apps/web/registry/miami/example/tooltip-outline.tsx b/apps/web/registry/miami/example/tooltip-outline.tsx
deleted file mode 100644
index 2eb9bd7b..00000000
--- a/apps/web/registry/miami/example/tooltip-outline.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-
-export default function TooltipOutline() {
-   return (
-      <TooltipProvider>
-         <Tooltip>
-            <TooltipTrigger asChild>
-               <Button variant="outline">Hover</Button>
-            </TooltipTrigger>
-            <TooltipContent variant="outline">
-               <p>Add to library</p>
-            </TooltipContent>
-         </Tooltip>
-      </TooltipProvider>
-   )
-}
diff --git a/apps/web/registry/miami/example/tooltip-secondary.tsx b/apps/web/registry/miami/example/tooltip-secondary.tsx
deleted file mode 100644
index 5c16634e..00000000
--- a/apps/web/registry/miami/example/tooltip-secondary.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-
-export default function TooltipSecondary() {
-   return (
-      <TooltipProvider>
-         <Tooltip>
-            <TooltipTrigger asChild>
-               <Button variant="outline">Hover</Button>
-            </TooltipTrigger>
-            <TooltipContent variant="secondary">
-               <p>Add to library</p>
-            </TooltipContent>
-         </Tooltip>
-      </TooltipProvider>
-   )
-}
diff --git a/apps/web/registry/miami/example/tooltip-with-toggle-demo.tsx b/apps/web/registry/miami/example/tooltip-with-toggle-demo.tsx
deleted file mode 100644
index 0fb928f3..00000000
--- a/apps/web/registry/miami/example/tooltip-with-toggle-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Heart } from 'lucide-react'
-
-import { Toggle } from '~/registry/miami/ui/toggle'
-import {
-   Tooltip,
-   TooltipContent,
-   TooltipProvider,
-   TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
-
-export default function TooltipWithToggleDemo() {
-   return (
-      <TooltipProvider>
-         <Tooltip>
-            <TooltipTrigger>
-               <Toggle variant="outline" aria-label="Toggle Heart">
-                  <Heart className="size-4" />
-               </Toggle>
-            </TooltipTrigger>
-            <TooltipContent><p>Heart</p></TooltipContent>
-         </Tooltip>
-      </TooltipProvider>
-   )
-}
diff --git a/apps/web/registry/miami/example/tour-demo.tsx b/apps/web/registry/miami/example/tour-demo.tsx
deleted file mode 100644
index 129c7421..00000000
--- a/apps/web/registry/miami/example/tour-demo.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import * as React from 'react'
-
-import { Button } from '~/registry/miami/ui/button'
-import {
-   Card,
-   CardContent,
-   CardDescription,
-   CardFooter,
-   CardHeader,
-   CardTitle,
-} from '~/registry/miami/ui/card'
-import { Input } from '~/registry/miami/ui/input'
-import { TourFactory } from '~/registry/miami/ui/tour'
-
-const tour = TourFactory([
-   'buttonOne',
-   'buttonTwo',
-   'missingButton',
-   'buttonFour',
-   'emailInput',
-])
-
-function TourDisplay(props: {
-   children: React.ReactNode
-   title?: string
-   description?: string
-}) {
-   const ctx = tour.useContext()
-   return (
-      <Card className="w-[350px]">
-         <CardHeader>
-            <CardTitle>{props.title}</CardTitle>
-            <CardDescription>{props.description}</CardDescription>
-         </CardHeader>
-         <CardContent>{props.children}</CardContent>
-         <CardFooter>
-            {ctx.current < ctx.nodes.size
-               ? (
-                     <div className="flex w-full justify-between">
-                        <Button variant="outline" onClick={ctx.close}>
-                           Close
-                        </Button>
-                        <div>
-                           <Button onClick={ctx.previous}>Previous</Button>
-                           <Button onClick={ctx.next}>Next</Button>
-                        </div>
-                     </div>
-                  )
-               : (
-                     <div className="flex w-full justify-end">
-                        <Button onClick={ctx.previous}>Previous</Button>
-                        <Button className="bg-green-800" onClick={ctx.close}>
-                           Finish
-                        </Button>
-                     </div>
-                  )}
-         </CardFooter>
-      </Card>
-   )
-}
-
-function TourApplication() {
-   const ctx = tour.useContext()
-   return (
-      <div className="flex h-96 w-full items-center justify-center">
-         <div className="absolute bottom-2 left-2 flex gap-2">
-            <tour.TourFocus
-               name="buttonOne"
-               tourRender={(
-                  <TourDisplay title="Create Incident">
-                     <h1>This button creates an incident</h1>
-                     <p>helpful text about this button</p>
-                  </TourDisplay>
-               )}
-            >
-               <Button>Create Incident</Button>
-            </tour.TourFocus>
-            <tour.TourFocus
-               name="buttonFour"
-               tourRender={(
-                  <TourDisplay title="Update Incident">
-                     <h1>This button pushes your updates</h1>
-                     <p>helpful text about this button</p>
-                  </TourDisplay>
-               )}
-            >
-               <Button>Update Incident</Button>
-            </tour.TourFocus>
-         </div>
-         <div className="absolute right-2 top-12 flex gap-2">
-            <tour.TourFocus
-               name="buttonTwo"
-               tourRender={(
-                  <TourDisplay title="Resolve Incident">
-                     <h1>This button Resolves the Incident</h1>
-                     <p>helpful text about this button</p>
-                  </TourDisplay>
-               )}
-            >
-               <Button>Resolve Incident</Button>
-            </tour.TourFocus>
-         </div>
-         <div>
-            <tour.TourFocus
-               name="emailInput"
-               tourRender={(
-                  <TourDisplay title="Email Input">
-                     <h1>This is where you put incident info</h1>
-                     <p>helpful text about this input</p>
-                  </TourDisplay>
-               )}
-            >
-               <Input type="email" placeholder="Email" />
-            </tour.TourFocus>
-         </div>
-         <div className="absolute bottom-2 right-2">
-            <Button onClick={ctx.open}>Open Tour</Button>
-         </div>
-      </div>
-   )
-}
-
-export default function TourDemo() {
-   return (
-      <tour.TourProvider>
-         <TourApplication />
-      </tour.TourProvider>
-   )
-}
diff --git a/apps/web/registry/miami/example/tweet-card-demo.tsx b/apps/web/registry/miami/example/tweet-card-demo.tsx
deleted file mode 100644
index cbc2c45f..00000000
--- a/apps/web/registry/miami/example/tweet-card-demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ClientTweetCard from '~/registry/miami/ui/client-tweet-card'
-
-/**
- * <TweetCard /> (Server Side Only)
- * <ClientTweetCard /> (Client Side Only)
- */
-export default async function TweetDemo() {
-   return <ClientTweetCard id="1845116507438620801" className="shadow-2xl" />
-}
diff --git a/apps/web/registry/miami/example/tweet-card-images.tsx b/apps/web/registry/miami/example/tweet-card-images.tsx
deleted file mode 100644
index f4e34858..00000000
--- a/apps/web/registry/miami/example/tweet-card-images.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import ClientTweetCard from '~/registry/miami/ui/client-tweet-card'
-
-export default async function TweetImages() {
-   return <ClientTweetCard id="1803717292087296479" className="shadow-2xl" />
-}
diff --git a/apps/web/registry/miami/example/tweet-card-meta-preview.tsx b/apps/web/registry/miami/example/tweet-card-meta-preview.tsx
deleted file mode 100644
index ffc5ad2d..00000000
--- a/apps/web/registry/miami/example/tweet-card-meta-preview.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import ClientTweetCard from '~/registry/miami/ui/client-tweet-card'
-
-export default async function TweetMetaPreview() {
-   return <ClientTweetCard id="1671108134591504385" className="shadow-2xl" />
-}
diff --git a/apps/web/registry/miami/example/typing-animation-demo.tsx b/apps/web/registry/miami/example/typing-animation-demo.tsx
deleted file mode 100644
index 5447a7ad..00000000
--- a/apps/web/registry/miami/example/typing-animation-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import TypingAnimation from '~/registry/miami/ui/typing-animation'
-
-export default async function TextRevealDemo() {
-   return (
-      <TypingAnimation
-         className="text-4xl font-bold text-black dark:text-white"
-         text="Typing Animation"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/typography-blockquote.tsx b/apps/web/registry/miami/example/typography-blockquote.tsx
deleted file mode 100644
index 7db64be7..00000000
--- a/apps/web/registry/miami/example/typography-blockquote.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function TypographyBlockquote() {
-   return (
-      <blockquote className="mt-6 border-l-2 pl-6 italic">
-         "After all," he said, "everyone enjoys a good joke, so it's only fair that
-         they should pay for the privilege."
-      </blockquote>
-   )
-}
diff --git a/apps/web/registry/miami/example/typography-demo.tsx b/apps/web/registry/miami/example/typography-demo.tsx
deleted file mode 100644
index cc1b62b1..00000000
--- a/apps/web/registry/miami/example/typography-demo.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-export default function TypographyDemo() {
-   return (
-      <div>
-         <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-            The Joke Tax Chronicles
-         </h1>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            Once upon a time, in a far-off land, there was a very lazy king who
-            spent all day lounging on his throne. One day, his advisors came to him
-            with a problem: the kingdom was running out of money.
-         </p>
-         <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
-            The King's Plan
-         </h2>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            The king thought long and hard, and finally came up with
-            {' '}
-            <a
-               href="#"
-               className="text-primary font-medium underline underline-offset-4"
-            >
-               a brilliant plan
-            </a>
-            : he would tax the jokes in the kingdom.
-         </p>
-         <blockquote className="mt-6 border-l-2 pl-6 italic">
-            "After all," he said, "everyone enjoys a good joke, so it's only fair
-            that they should pay for the privilege."
-         </blockquote>
-         <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-            The Joke Tax
-         </h3>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            The king's subjects were not amused. They grumbled and complained, but
-            the king was firm:
-         </p>
-         <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
-            <li>1st level of puns: 5 gold coins</li>
-            <li>2nd level of jokes: 10 gold coins</li>
-            <li>3rd level of one-liners : 20 gold coins</li>
-         </ul>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            As a result, people stopped telling jokes, and the kingdom fell into a
-            gloom. But there was one person who refused to let the king's
-            foolishness get him down: a court jester named Jokester.
-         </p>
-         <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-            Jokester's Revolt
-         </h3>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            Jokester began sneaking into the castle in the middle of the night and
-            leaving jokes all over the place: under the king's pillow, in his soup,
-            even in the royal toilet. The king was furious, but he couldn't seem to
-            stop Jokester.
-         </p>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            And then, one day, the people of the kingdom discovered that the jokes
-            left by Jokester were so funny that they couldn't help but laugh. And
-            once they started laughing, they couldn't stop.
-         </p>
-         <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-            The People's Rebellion
-         </h3>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            The people of the kingdom, feeling uplifted by the laughter, started to
-            tell jokes and puns again, and soon the entire kingdom was in on the
-            joke.
-         </p>
-         <div className="my-6 w-full overflow-y-auto">
-            <table className="w-full">
-               <thead>
-                  <tr className="even:bg-muted m-0 border-t p-0">
-                     <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-                        King's Treasury
-                     </th>
-                     <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-                        People's happiness
-                     </th>
-                  </tr>
-               </thead>
-               <tbody>
-                  <tr className="even:bg-muted m-0 border-t p-0">
-                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                        Empty
-                     </td>
-                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                        Overflowing
-                     </td>
-                  </tr>
-                  <tr className="even:bg-muted m-0 border-t p-0">
-                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                        Modest
-                     </td>
-                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                        Satisfied
-                     </td>
-                  </tr>
-                  <tr className="even:bg-muted m-0 border-t p-0">
-                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                        Full
-                     </td>
-                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                        Ecstatic
-                     </td>
-                  </tr>
-               </tbody>
-            </table>
-         </div>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            The king, seeing how much happier his subjects were, realized the error
-            of his ways and repealed the joke tax. Jokester was declared a hero, and
-            the kingdom lived happily ever after.
-         </p>
-         <p className="leading-7 [&:not(:first-child)]:mt-6">
-            The moral of the story is: never underestimate the power of a good laugh
-            and always be careful of bad ideas.
-         </p>
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/typography-lead.tsx b/apps/web/registry/miami/example/typography-lead.tsx
deleted file mode 100644
index d2baabae..00000000
--- a/apps/web/registry/miami/example/typography-lead.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function TypographyLead() {
-   return (
-      <p className="text-muted-foreground text-xl">
-         A modal dialog that interrupts the user with important content and expects
-         a response.
-      </p>
-   )
-}
diff --git a/apps/web/registry/miami/example/typography-p.tsx b/apps/web/registry/miami/example/typography-p.tsx
deleted file mode 100644
index 44cfde59..00000000
--- a/apps/web/registry/miami/example/typography-p.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function TypographyP() {
-   return (
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-         The king, seeing how much happier his subjects were, realized the error of
-         his ways and repealed the joke tax.
-      </p>
-   )
-}
diff --git a/apps/web/registry/miami/example/video-modal-demo.tsx b/apps/web/registry/miami/example/video-modal-demo.tsx
deleted file mode 100644
index dcaa3adb..00000000
--- a/apps/web/registry/miami/example/video-modal-demo.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { PlayIcon } from '@radix-ui/react-icons'
-import {
-   VideoModal,
-   VideoModalContent,
-   VideoModalDescription,
-   VideoModalTitle,
-   VideoModalTrigger,
-   VideoModalVideo,
-   VideoPlayButton,
-   VideoPlayer,
-   VideoPreview,
-} from '~/registry/miami/ui/video-modal'
-import { Button } from '~/registry/miami/ui/button'
-
-function VideoModalDemo() {
-   return (
-      <div className="relative justify-center">
-         <VideoModal>
-            <VideoModalTrigger>
-               <Button>Open modal</Button>
-            </VideoModalTrigger>
-            <VideoModalContent>
-               <VideoModalTitle>Modal Video Demo</VideoModalTitle>
-               <VideoModalDescription>
-                  Your subtitle or description here
-               </VideoModalDescription>
-               <VideoModalVideo>
-                  <VideoPlayer>
-                     <VideoPreview>
-                        <img
-                           src="https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200"
-                           alt="Video preview"
-                        />
-                     </VideoPreview>
-                     <VideoPlayButton>
-                        <button className="absolute inset-0 m-auto flex size-32 items-center justify-center rounded-full border border-white border-white/10 bg-white/50 transition duration-300 hover:bg-white/75">
-                           <PlayIcon className="size-20 stroke-1 text-white" />
-                        </button>
-                     </VideoPlayButton>
-                     <iframe
-                        className="size-full"
-                        src="https://cdn.magicui.design/globe.mp4"
-                        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
-                        allowFullScreen
-                     />
-                  </VideoPlayer>
-               </VideoModalVideo>
-            </VideoModalContent>
-         </VideoModal>
-      </div>
-   )
-}
-
-export default VideoModalDemo
diff --git a/apps/web/registry/miami/example/wavy-dot-pattern-demo.tsx b/apps/web/registry/miami/example/wavy-dot-pattern-demo.tsx
deleted file mode 100644
index 549ce708..00000000
--- a/apps/web/registry/miami/example/wavy-dot-pattern-demo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import WavyDotPattern from '~/registry/miami/ui/wavy-dot-pattern'
-
-export default function WavyDotPatternDemo() {
-   return (
-      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl ">
-         <p className="z-10 whitespace-pre-wrap text-center text-4xl font-semibold tracking-tighter text-black dark:text-white">
-            Wavy Dot Pattern
-         </p>
-
-         <WavyDotPattern
-            gridWidth={30}
-            gridHeight={15}
-            dotWidth={8}
-            dotHeight={8}
-         />
-      </div>
-   )
-}
diff --git a/apps/web/registry/miami/example/wavy-text-demo.tsx b/apps/web/registry/miami/example/wavy-text-demo.tsx
deleted file mode 100644
index f007abdb..00000000
--- a/apps/web/registry/miami/example/wavy-text-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import WavyText from '~/registry/miami/ui/wavy-text'
-
-export default function WavyTextDemo() {
-   return (
-      <WavyText
-         word="Wavy Text"
-         className="text-4xl font-bold text-black dark:text-white"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/word-fade-in-demo.tsx b/apps/web/registry/miami/example/word-fade-in-demo.tsx
deleted file mode 100644
index 76c92d49..00000000
--- a/apps/web/registry/miami/example/word-fade-in-demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import WordFadeIn from '~/registry/miami/ui/word-fade-in'
-
-export default async function WordFadeInDemo() {
-   return <WordFadeIn words="Word Fade In" />
-}
diff --git a/apps/web/registry/miami/example/word-pull-up-demo.tsx b/apps/web/registry/miami/example/word-pull-up-demo.tsx
deleted file mode 100644
index 01801118..00000000
--- a/apps/web/registry/miami/example/word-pull-up-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import WordPullUp from '~/registry/miami/ui/word-pull-up'
-
-export default async function WordPullUpDemo() {
-   return (
-      <WordPullUp
-         className="text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white"
-         words="Word Pull Up"
-      />
-   )
-}
diff --git a/apps/web/registry/miami/example/word-rotate-demo.tsx b/apps/web/registry/miami/example/word-rotate-demo.tsx
deleted file mode 100644
index 7d1be5f5..00000000
--- a/apps/web/registry/miami/example/word-rotate-demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import WordRotate from '~/registry/miami/ui/word-rotate'
-
-export default async function WordRotateDemo() {
-   return (
-      <WordRotate
-         className="text-4xl font-bold text-black dark:text-white"
-         words={['Word', 'Rotate']}
-      />
-   )
-}
diff --git a/apps/web/registry/miami/examples/accordion-demo.tsx b/apps/web/registry/miami/examples/accordion-demo.tsx
new file mode 100644
index 00000000..a77cbe9b
--- /dev/null
+++ b/apps/web/registry/miami/examples/accordion-demo.tsx
@@ -0,0 +1,33 @@
+import {
+   Accordion,
+   AccordionContent,
+   AccordionItem,
+   AccordionTrigger,
+} from "~/registry/miami/ui/accordion"
+
+export default function AccordionDemo() {
+   return (
+      <Accordion type="single" collapsible className="w-full">
+         <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>
+               Yes. It adheres to the WAI-ARIA design pattern.
+            </AccordionContent>
+         </AccordionItem>
+         <AccordionItem value="item-2">
+            <AccordionTrigger>Is it styled?</AccordionTrigger>
+            <AccordionContent>
+               Yes. It comes with default styles that matches the other
+               components&apos; aesthetic.
+            </AccordionContent>
+         </AccordionItem>
+         <AccordionItem value="item-3">
+            <AccordionTrigger>Is it animated?</AccordionTrigger>
+            <AccordionContent>
+               Yes. It's animated by default, but you can disable it if you
+               prefer.
+            </AccordionContent>
+         </AccordionItem>
+      </Accordion>
+   )
+}
diff --git a/apps/web/registry/miami/examples/alert-demo.tsx b/apps/web/registry/miami/examples/alert-demo.tsx
new file mode 100644
index 00000000..bfc1ac06
--- /dev/null
+++ b/apps/web/registry/miami/examples/alert-demo.tsx
@@ -0,0 +1,15 @@
+import { RocketIcon } from "@radix-ui/react-icons"
+
+import { Alert, AlertDescription, AlertTitle } from "~/registry/miami/ui/alert"
+
+export default function AlertDemo() {
+   return (
+      <Alert>
+         <RocketIcon className="size-4" />
+         <AlertTitle>Heads up!</AlertTitle>
+         <AlertDescription>
+            You can add components to your app using the cli.
+         </AlertDescription>
+      </Alert>
+   )
+}
diff --git a/apps/web/registry/miami/examples/alert-destructive.tsx b/apps/web/registry/miami/examples/alert-destructive.tsx
new file mode 100644
index 00000000..4df6a2fe
--- /dev/null
+++ b/apps/web/registry/miami/examples/alert-destructive.tsx
@@ -0,0 +1,15 @@
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons"
+
+import { Alert, AlertDescription, AlertTitle } from "~/registry/miami/ui/alert"
+
+export default function AlertDestructive() {
+   return (
+      <Alert variant="destructive">
+         <ExclamationTriangleIcon className="size-4" />
+         <AlertTitle>Error</AlertTitle>
+         <AlertDescription>
+            Your session has expired. Please log in again.
+         </AlertDescription>
+      </Alert>
+   )
+}
diff --git a/apps/web/registry/miami/examples/alert-dialog-demo.tsx b/apps/web/registry/miami/examples/alert-dialog-demo.tsx
new file mode 100644
index 00000000..dd5ed28b
--- /dev/null
+++ b/apps/web/registry/miami/examples/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+   AlertDialog,
+   AlertDialogAction,
+   AlertDialogCancel,
+   AlertDialogContent,
+   AlertDialogDescription,
+   AlertDialogFooter,
+   AlertDialogHeader,
+   AlertDialogTitle,
+   AlertDialogTrigger,
+} from "~/registry/miami/ui/alert-dialog"
+import { Button } from "~/registry/miami/ui/button"
+
+export default function AlertDialogDemo() {
+   return (
+      <AlertDialog>
+         <AlertDialogTrigger asChild>
+            <Button variant="outline">Show Dialog</Button>
+         </AlertDialogTrigger>
+         <AlertDialogContent>
+            <AlertDialogHeader>
+               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+               <AlertDialogDescription>
+                  This action cannot be undone. This will permanently delete
+                  your account and remove your data from our servers.
+               </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+               <AlertDialogCancel>Cancel</AlertDialogCancel>
+               <AlertDialogAction>Continue</AlertDialogAction>
+            </AlertDialogFooter>
+         </AlertDialogContent>
+      </AlertDialog>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-beam-bidirectional.tsx b/apps/web/registry/miami/examples/animated-beam-bidirectional.tsx
new file mode 100644
index 00000000..c1a5796c
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-beam-bidirectional.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import type React from "react"
+import { forwardRef, useRef } from "react"
+import { ny } from "~/lib/utils"
+import { AnimatedBeam } from "~/registry/miami/ui/animated-beam"
+
+const Circle = forwardRef<
+   HTMLDivElement,
+   { className?: string; children?: React.ReactNode }
+>(({ className, children }, ref) => {
+   return (
+      <div
+         ref={ref}
+         className={ny(
+            "z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
+            className,
+         )}
+      >
+         {children}
+      </div>
+   )
+})
+
+export default function AnimatedBeamDemo() {
+   const containerRef = useRef<HTMLDivElement>(null)
+   const div1Ref = useRef<HTMLDivElement>(null)
+   const div2Ref = useRef<HTMLDivElement>(null)
+
+   return (
+      <div
+         className="bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
+         ref={containerRef}
+      >
+         <div className="flex size-full flex-col items-stretch justify-between gap-10">
+            <div className="flex flex-row justify-between">
+               <Circle ref={div1Ref}>
+                  <Icons.user />
+               </Circle>
+               <Circle ref={div2Ref}>
+                  <Icons.openai />
+               </Circle>
+            </div>
+         </div>
+
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div1Ref}
+            toRef={div2Ref}
+            startYOffset={10}
+            endYOffset={10}
+            curvature={-20}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div1Ref}
+            toRef={div2Ref}
+            startYOffset={-10}
+            endYOffset={-10}
+            curvature={20}
+            reverse
+         />
+      </div>
+   )
+}
+
+const Icons = {
+   openai: () => (
+      <svg
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+   ),
+   user: () => (
+      <svg
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         fill="none"
+         stroke="#000000"
+         strokeWidth="2"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+         <circle cx="12" cy="7" r="4" />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/miami/examples/animated-beam-demo.tsx b/apps/web/registry/miami/examples/animated-beam-demo.tsx
new file mode 100644
index 00000000..51fbd04c
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-beam-demo.tsx
@@ -0,0 +1,501 @@
+"use client"
+
+import type React from "react"
+import { forwardRef, useRef } from "react"
+import { ny } from "~/lib/utils"
+import { AnimatedBeam } from "~/registry/miami/ui/animated-beam"
+
+const Circle = forwardRef<
+   HTMLDivElement,
+   { className?: string; children?: React.ReactNode }
+>(({ className, children }, ref) => {
+   return (
+      <div
+         ref={ref}
+         className={ny(
+            "z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
+            className,
+         )}
+      >
+         {children}
+      </div>
+   )
+})
+
+export default function AnimatedBeamDemo() {
+   const containerRef = useRef<HTMLDivElement>(null)
+   const div1Ref = useRef<HTMLDivElement>(null)
+   const div2Ref = useRef<HTMLDivElement>(null)
+   const div3Ref = useRef<HTMLDivElement>(null)
+   const div4Ref = useRef<HTMLDivElement>(null)
+   const div5Ref = useRef<HTMLDivElement>(null)
+   const div6Ref = useRef<HTMLDivElement>(null)
+   const div7Ref = useRef<HTMLDivElement>(null)
+
+   return (
+      <div
+         className="bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
+         ref={containerRef}
+      >
+         <div className="flex size-full flex-col items-stretch justify-between gap-10">
+            <div className="flex flex-row items-center justify-between">
+               <Circle ref={div1Ref}>
+                  <Icons.googleDrive />
+               </Circle>
+               <Circle ref={div5Ref}>
+                  <Icons.googleDocs />
+               </Circle>
+            </div>
+            <div className="flex flex-row items-center justify-between">
+               <Circle ref={div2Ref}>
+                  <Icons.notion />
+               </Circle>
+               <Circle ref={div4Ref} className="size-16">
+                  <Icons.openai />
+               </Circle>
+               <Circle ref={div6Ref}>
+                  <Icons.zapier />
+               </Circle>
+            </div>
+            <div className="flex flex-row items-center justify-between">
+               <Circle ref={div3Ref}>
+                  <Icons.whatsapp />
+               </Circle>
+               <Circle ref={div7Ref}>
+                  <Icons.messenger />
+               </Circle>
+            </div>
+         </div>
+
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div1Ref}
+            toRef={div4Ref}
+            curvature={-75}
+            endYOffset={-10}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div2Ref}
+            toRef={div4Ref}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div3Ref}
+            toRef={div4Ref}
+            curvature={75}
+            endYOffset={10}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div5Ref}
+            toRef={div4Ref}
+            curvature={-75}
+            endYOffset={-10}
+            reverse
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div6Ref}
+            toRef={div4Ref}
+            reverse
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div7Ref}
+            toRef={div4Ref}
+            curvature={75}
+            endYOffset={10}
+            reverse
+         />
+      </div>
+   )
+}
+
+const Icons = {
+   notion: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 100 100"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+            fill="#ffffff"
+         />
+         <path
+            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+            fill="#000000"
+            fillRule="evenodd"
+            clipRule="evenodd"
+         />
+      </svg>
+   ),
+   openai: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 24 24"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+   ),
+   googleDrive: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 87.3 78"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+            fill="#0066da"
+         />
+         <path
+            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+            fill="#00ac47"
+         />
+         <path
+            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335"
+         />
+         <path
+            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+            fill="#00832d"
+         />
+         <path
+            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+            fill="#2684fc"
+         />
+         <path
+            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00"
+         />
+      </svg>
+   ),
+   whatsapp: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 175.216 175.552"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <linearGradient
+               id="b"
+               x1="85.915"
+               x2="86.535"
+               y1="32.567"
+               y2="137.092"
+               gradientUnits="userSpaceOnUse"
+            >
+               <stop offset="0" stopColor="#57d163" />
+               <stop offset="1" stopColor="#23b33a" />
+            </linearGradient>
+            <filter
+               id="a"
+               width="1.115"
+               height="1.114"
+               x="-.057"
+               y="-.057"
+               colorInterpolationFilters="sRGB"
+            >
+               <feGaussianBlur stdDeviation="3.531" />
+            </filter>
+         </defs>
+         <path
+            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
+            fill="#b3b3b3"
+            filter="url(#a)"
+         />
+         <path
+            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
+            fill="#ffffff"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
+            fill="url(#linearGradient1780)"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
+            fill="url(#b)"
+         />
+         <path
+            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
+            fill="#ffffff"
+            fillRule="evenodd"
+         />
+      </svg>
+   ),
+   googleDocs: () => (
+      <svg
+         width="47px"
+         height="65px"
+         viewBox="0 0 47 65"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-1"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-3"
+            />
+            <linearGradient
+               x1="50.0053945%"
+               y1="8.58610612%"
+               x2="50.0053945%"
+               y2="100.013939%"
+               id="linearGradient-5"
+            >
+               <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
+               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
+            </linearGradient>
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-6"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-8"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-10"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-12"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-14"
+            />
+            <radialGradient
+               cx="3.16804688%"
+               cy="2.71744318%"
+               fx="3.16804688%"
+               fy="2.71744318%"
+               r="161.248516%"
+               gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
+               id="radialGradient-16"
+            >
+               <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
+               <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
+            </radialGradient>
+         </defs>
+         <g
+            id="Page-1"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+         >
+            <g transform="translate(-451.000000, -463.000000)">
+               <g id="Hero" transform="translate(0.000000, 63.000000)">
+                  <g
+                     id="Personal"
+                     transform="translate(277.000000, 309.000000)"
+                  >
+                     <g
+                        id="Docs-icon"
+                        transform="translate(174.000000, 91.000000)"
+                     >
+                        <g id="Group">
+                           <g id="Clipped">
+                              <mask id="mask-2" fill="white">
+                                 <use xlinkHref="#path-1" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
+                                 id="Path"
+                                 fill="#4285F4"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-2)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-4" fill="white">
+                                 <use xlinkHref="#path-3" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <polygon
+                                 id="Path"
+                                 fill="url(#linearGradient-5)"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-4)"
+                                 points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
+                              ></polygon>
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-7" fill="white">
+                                 <use xlinkHref="#path-6" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
+                                 id="Shape"
+                                 fill="#F1F1F1"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-7)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-9" fill="white">
+                                 <use xlinkHref="#path-8" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <g id="Group" mask="url(#mask-9)">
+                                 <g transform="translate(26.437500, -2.954545)">
+                                    <path
+                                       d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
+                                       id="Path"
+                                       fill="#A1C2FA"
+                                       fillRule="nonzero"
+                                    />
+                                 </g>
+                              </g>
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-11" fill="white">
+                                 <use xlinkHref="#path-10" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
+                                 id="Path"
+                                 fillOpacity="0.2"
+                                 fill="#FFFFFF"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-11)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-13" fill="white">
+                                 <use xlinkHref="#path-12" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
+                                 id="Path"
+                                 fillOpacity="0.2"
+                                 fill="#1A237E"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-13)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-15" fill="white">
+                                 <use xlinkHref="#path-14" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
+                                 id="Path"
+                                 fillOpacity="0.1"
+                                 fill="#1A237E"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-15)"
+                              />
+                           </g>
+                        </g>
+                        <path
+                           d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+                           id="Path"
+                           fill="url(#radialGradient-16)"
+                           fillRule="nonzero"
+                        />
+                     </g>
+                  </g>
+               </g>
+            </g>
+         </g>
+      </svg>
+   ),
+   zapier: () => (
+      <svg
+         width="105"
+         height="28"
+         viewBox="0 0 244 66"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
+            fill="#201515"
+         />
+         <path
+            d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
+            fill="#201515"
+         />
+         <path
+            d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
+            fill="#201515"
+         />
+         <path
+            d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
+            fill="#201515"
+         />
+         <path
+            d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
+            fill="#201515"
+         />
+         <path
+            d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
+            fill="#201515"
+         />
+         <path
+            d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
+            fill="#201515"
+         />
+         <path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
+      </svg>
+   ),
+   messenger: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 48 48"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <radialGradient
+            id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
+            cx="11.087"
+            cy="7.022"
+            r="47.612"
+            gradientTransform="matrix(1 0 0 -1 0 50)"
+            gradientUnits="userSpaceOnUse"
+         >
+            <stop offset="0" stopColor="#1292ff"></stop>
+            <stop offset=".079" stopColor="#2982ff"></stop>
+            <stop offset=".23" stopColor="#4e69ff"></stop>
+            <stop offset=".351" stopColor="#6559ff"></stop>
+            <stop offset=".428" stopColor="#6d53ff"></stop>
+            <stop offset=".754" stopColor="#df47aa"></stop>
+            <stop offset=".946" stopColor="#ff6257"></stop>
+         </radialGradient>
+         <path
+            fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
+            d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
+         />
+         <path
+            d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
+            opacity=".05"
+         />
+         <path
+            d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
+            opacity=".07"
+         />
+         <path
+            fill="#ffffff"
+            d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
+         />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/miami/examples/animated-beam-multiple-inputs.tsx b/apps/web/registry/miami/examples/animated-beam-multiple-inputs.tsx
new file mode 100644
index 00000000..8bdf8b64
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-beam-multiple-inputs.tsx
@@ -0,0 +1,504 @@
+"use client"
+
+import type React from "react"
+import { forwardRef, useRef } from "react"
+import { ny } from "~/lib/utils"
+import { AnimatedBeam } from "~/registry/default/ui/animated-beam"
+
+const Circle = forwardRef<
+   HTMLDivElement,
+   { className?: string; children?: React.ReactNode }
+>(({ className, children }, ref) => {
+   return (
+      <div
+         ref={ref}
+         className={ny(
+            "border-border z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
+            className,
+         )}
+      >
+         {children}
+      </div>
+   )
+})
+
+export default function AnimatedBeamMultipleInputDemo() {
+   const containerRef = useRef<HTMLDivElement>(null)
+   const div1Ref = useRef<HTMLDivElement>(null)
+   const div2Ref = useRef<HTMLDivElement>(null)
+   const div3Ref = useRef<HTMLDivElement>(null)
+   const div4Ref = useRef<HTMLDivElement>(null)
+   const div5Ref = useRef<HTMLDivElement>(null)
+   const div6Ref = useRef<HTMLDivElement>(null)
+   const div7Ref = useRef<HTMLDivElement>(null)
+
+   return (
+      <div
+         className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
+         ref={containerRef}
+      >
+         <div className="flex size-full flex-row items-stretch justify-between gap-10">
+            <div className="flex flex-col justify-center gap-2">
+               <Circle ref={div1Ref}>
+                  <Icons.googleDrive />
+               </Circle>
+               <Circle ref={div2Ref}>
+                  <Icons.googleDocs />
+               </Circle>
+               <Circle ref={div3Ref}>
+                  <Icons.whatsapp />
+               </Circle>
+               <Circle ref={div4Ref}>
+                  <Icons.messenger />
+               </Circle>
+               <Circle ref={div5Ref}>
+                  <Icons.notion />
+               </Circle>
+            </div>
+            <div className="flex flex-col justify-center">
+               <Circle ref={div6Ref} className="size-16">
+                  <Icons.openai />
+               </Circle>
+            </div>
+            <div className="flex flex-col justify-center">
+               <Circle ref={div7Ref}>
+                  <Icons.user />
+               </Circle>
+            </div>
+         </div>
+
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div1Ref}
+            toRef={div6Ref}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div2Ref}
+            toRef={div6Ref}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div3Ref}
+            toRef={div6Ref}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div4Ref}
+            toRef={div6Ref}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div5Ref}
+            toRef={div6Ref}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div6Ref}
+            toRef={div7Ref}
+         />
+      </div>
+   )
+}
+
+const Icons = {
+   notion: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 100 100"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+            fill="#ffffff"
+         />
+         <path
+            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+            fill="#000000"
+            fillRule="evenodd"
+            clipRule="evenodd"
+         />
+      </svg>
+   ),
+   openai: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 24 24"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+   ),
+   googleDrive: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 87.3 78"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+            fill="#0066da"
+         />
+         <path
+            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+            fill="#00ac47"
+         />
+         <path
+            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335"
+         />
+         <path
+            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+            fill="#00832d"
+         />
+         <path
+            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+            fill="#2684fc"
+         />
+         <path
+            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00"
+         />
+      </svg>
+   ),
+   whatsapp: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 175.216 175.552"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <linearGradient
+               id="b"
+               x1="85.915"
+               x2="86.535"
+               y1="32.567"
+               y2="137.092"
+               gradientUnits="userSpaceOnUse"
+            >
+               <stop offset="0" stopColor="#57d163" />
+               <stop offset="1" stopColor="#23b33a" />
+            </linearGradient>
+            <filter
+               id="a"
+               width="1.115"
+               height="1.114"
+               x="-.057"
+               y="-.057"
+               colorInterpolationFilters="sRGB"
+            >
+               <feGaussianBlur stdDeviation="3.531" />
+            </filter>
+         </defs>
+         <path
+            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
+            fill="#b3b3b3"
+            filter="url(#a)"
+         />
+         <path
+            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
+            fill="#ffffff"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
+            fill="url(#linearGradient1780)"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
+            fill="url(#b)"
+         />
+         <path
+            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
+            fill="#ffffff"
+            fillRule="evenodd"
+         />
+      </svg>
+   ),
+   googleDocs: () => (
+      <svg
+         width="47px"
+         height="65px"
+         viewBox="0 0 47 65"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-1"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-3"
+            />
+            <linearGradient
+               x1="50.0053945%"
+               y1="8.58610612%"
+               x2="50.0053945%"
+               y2="100.013939%"
+               id="linearGradient-5"
+            >
+               <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
+               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
+            </linearGradient>
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-6"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-8"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-10"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-12"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-14"
+            />
+            <radialGradient
+               cx="3.16804688%"
+               cy="2.71744318%"
+               fx="3.16804688%"
+               fy="2.71744318%"
+               r="161.248516%"
+               gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
+               id="radialGradient-16"
+            >
+               <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
+               <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
+            </radialGradient>
+         </defs>
+         <g
+            id="Page-1"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+         >
+            <g transform="translate(-451.000000, -463.000000)">
+               <g id="Hero" transform="translate(0.000000, 63.000000)">
+                  <g
+                     id="Personal"
+                     transform="translate(277.000000, 309.000000)"
+                  >
+                     <g
+                        id="Docs-icon"
+                        transform="translate(174.000000, 91.000000)"
+                     >
+                        <g id="Group">
+                           <g id="Clipped">
+                              <mask id="mask-2" fill="white">
+                                 <use xlinkHref="#path-1" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
+                                 id="Path"
+                                 fill="#4285F4"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-2)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-4" fill="white">
+                                 <use xlinkHref="#path-3" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <polygon
+                                 id="Path"
+                                 fill="url(#linearGradient-5)"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-4)"
+                                 points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
+                              ></polygon>
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-7" fill="white">
+                                 <use xlinkHref="#path-6" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
+                                 id="Shape"
+                                 fill="#F1F1F1"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-7)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-9" fill="white">
+                                 <use xlinkHref="#path-8" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <g id="Group" mask="url(#mask-9)">
+                                 <g transform="translate(26.437500, -2.954545)">
+                                    <path
+                                       d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
+                                       id="Path"
+                                       fill="#A1C2FA"
+                                       fillRule="nonzero"
+                                    />
+                                 </g>
+                              </g>
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-11" fill="white">
+                                 <use xlinkHref="#path-10" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
+                                 id="Path"
+                                 fillOpacity="0.2"
+                                 fill="#FFFFFF"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-11)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-13" fill="white">
+                                 <use xlinkHref="#path-12" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
+                                 id="Path"
+                                 fillOpacity="0.2"
+                                 fill="#1A237E"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-13)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-15" fill="white">
+                                 <use xlinkHref="#path-14" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
+                                 id="Path"
+                                 fillOpacity="0.1"
+                                 fill="#1A237E"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-15)"
+                              />
+                           </g>
+                        </g>
+                        <path
+                           d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+                           id="Path"
+                           fill="url(#radialGradient-16)"
+                           fillRule="nonzero"
+                        />
+                     </g>
+                  </g>
+               </g>
+            </g>
+         </g>
+      </svg>
+   ),
+   zapier: () => (
+      <svg
+         width="105"
+         height="28"
+         viewBox="0 0 244 66"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
+            fill="#201515"
+         />
+         <path
+            d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
+            fill="#201515"
+         />
+         <path
+            d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
+            fill="#201515"
+         />
+         <path
+            d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
+            fill="#201515"
+         />
+         <path
+            d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
+            fill="#201515"
+         />
+         <path
+            d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
+            fill="#201515"
+         />
+         <path
+            d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
+            fill="#201515"
+         />
+         <path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
+      </svg>
+   ),
+   messenger: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 48 48"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <radialGradient
+            id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
+            cx="11.087"
+            cy="7.022"
+            r="47.612"
+            gradientTransform="matrix(1 0 0 -1 0 50)"
+            gradientUnits="userSpaceOnUse"
+         >
+            <stop offset="0" stopColor="#1292ff"></stop>
+            <stop offset=".079" stopColor="#2982ff"></stop>
+            <stop offset=".23" stopColor="#4e69ff"></stop>
+            <stop offset=".351" stopColor="#6559ff"></stop>
+            <stop offset=".428" stopColor="#6d53ff"></stop>
+            <stop offset=".754" stopColor="#df47aa"></stop>
+            <stop offset=".946" stopColor="#ff6257"></stop>
+         </radialGradient>
+         <path
+            fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
+            d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
+         />
+         <path
+            d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
+            opacity=".05"
+         />
+         <path
+            d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
+            opacity=".07"
+         />
+         <path
+            fill="#ffffff"
+            d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
+         />
+      </svg>
+   ),
+   user: () => (
+      <svg
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         fill="none"
+         stroke="#000000"
+         strokeWidth="2"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+         <circle cx="12" cy="7" r="4" />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/miami/examples/animated-beam-multiple-outputs.tsx b/apps/web/registry/miami/examples/animated-beam-multiple-outputs.tsx
new file mode 100644
index 00000000..e33271bf
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-beam-multiple-outputs.tsx
@@ -0,0 +1,518 @@
+"use client"
+
+import type React from "react"
+import { forwardRef, useRef } from "react"
+import { ny } from "~/lib/utils"
+import { AnimatedBeam } from "~/registry/miami/ui/animated-beam"
+
+const Circle = forwardRef<
+   HTMLDivElement,
+   { className?: string; children?: React.ReactNode }
+>(({ className, children }, ref) => {
+   return (
+      <div
+         ref={ref}
+         className={ny(
+            "z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
+            className,
+         )}
+      >
+         {children}
+      </div>
+   )
+})
+
+export default function AnimatedBeamMultipleOutputDemo({
+   className,
+}: {
+   className?: string
+}) {
+   const containerRef = useRef<HTMLDivElement>(null)
+   const div1Ref = useRef<HTMLDivElement>(null)
+   const div2Ref = useRef<HTMLDivElement>(null)
+   const div3Ref = useRef<HTMLDivElement>(null)
+   const div4Ref = useRef<HTMLDivElement>(null)
+   const div5Ref = useRef<HTMLDivElement>(null)
+   const div6Ref = useRef<HTMLDivElement>(null)
+   const div7Ref = useRef<HTMLDivElement>(null)
+
+   return (
+      <div
+         className={ny(
+            "bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl",
+            className,
+         )}
+         ref={containerRef}
+      >
+         <div className="flex size-full flex-row items-stretch justify-between gap-10">
+            <div className="flex flex-col justify-center">
+               <Circle ref={div7Ref}>
+                  <Icons.user />
+               </Circle>
+            </div>
+            <div className="flex flex-col justify-center">
+               <Circle ref={div6Ref} className="size-16">
+                  <Icons.openai />
+               </Circle>
+            </div>
+            <div className="flex flex-col justify-center gap-2">
+               <Circle ref={div1Ref}>
+                  <Icons.googleDrive />
+               </Circle>
+               <Circle ref={div2Ref}>
+                  <Icons.googleDocs />
+               </Circle>
+               <Circle ref={div3Ref}>
+                  <Icons.whatsapp />
+               </Circle>
+               <Circle ref={div4Ref}>
+                  <Icons.messenger />
+               </Circle>
+               <Circle ref={div5Ref}>
+                  <Icons.notion />
+               </Circle>
+            </div>
+         </div>
+
+         {/* AnimatedBeams */}
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div1Ref}
+            toRef={div6Ref}
+            duration={3}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div2Ref}
+            toRef={div6Ref}
+            duration={3}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div3Ref}
+            toRef={div6Ref}
+            duration={3}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div4Ref}
+            toRef={div6Ref}
+            duration={3}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div5Ref}
+            toRef={div6Ref}
+            duration={3}
+         />
+         <AnimatedBeam
+            containerRef={containerRef}
+            fromRef={div6Ref}
+            toRef={div7Ref}
+            duration={3}
+         />
+      </div>
+   )
+}
+
+const Icons = {
+   notion: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 100 100"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+            fill="#ffffff"
+         />
+         <path
+            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+            fill="#000000"
+            fillRule="evenodd"
+            clipRule="evenodd"
+         />
+      </svg>
+   ),
+   openai: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 24 24"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+   ),
+   googleDrive: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 87.3 78"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+            fill="#0066da"
+         />
+         <path
+            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+            fill="#00ac47"
+         />
+         <path
+            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335"
+         />
+         <path
+            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+            fill="#00832d"
+         />
+         <path
+            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+            fill="#2684fc"
+         />
+         <path
+            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00"
+         />
+      </svg>
+   ),
+   whatsapp: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 175.216 175.552"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <linearGradient
+               id="b"
+               x1="85.915"
+               x2="86.535"
+               y1="32.567"
+               y2="137.092"
+               gradientUnits="userSpaceOnUse"
+            >
+               <stop offset="0" stopColor="#57d163" />
+               <stop offset="1" stopColor="#23b33a" />
+            </linearGradient>
+            <filter
+               id="a"
+               width="1.115"
+               height="1.114"
+               x="-.057"
+               y="-.057"
+               colorInterpolationFilters="sRGB"
+            >
+               <feGaussianBlur stdDeviation="3.531" />
+            </filter>
+         </defs>
+         <path
+            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
+            fill="#b3b3b3"
+            filter="url(#a)"
+         />
+         <path
+            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
+            fill="#ffffff"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
+            fill="url(#linearGradient1780)"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
+            fill="url(#b)"
+         />
+         <path
+            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
+            fill="#ffffff"
+            fillRule="evenodd"
+         />
+      </svg>
+   ),
+   googleDocs: () => (
+      <svg
+         width="47px"
+         height="65px"
+         viewBox="0 0 47 65"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-1"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-3"
+            />
+            <linearGradient
+               x1="50.0053945%"
+               y1="8.58610612%"
+               x2="50.0053945%"
+               y2="100.013939%"
+               id="linearGradient-5"
+            >
+               <stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
+               <stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
+            </linearGradient>
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-6"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-8"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-10"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-12"
+            />
+            <path
+               d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+               id="path-14"
+            />
+            <radialGradient
+               cx="3.16804688%"
+               cy="2.71744318%"
+               fx="3.16804688%"
+               fy="2.71744318%"
+               r="161.248516%"
+               gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
+               id="radialGradient-16"
+            >
+               <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
+               <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
+            </radialGradient>
+         </defs>
+         <g
+            id="Page-1"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+         >
+            <g transform="translate(-451.000000, -463.000000)">
+               <g id="Hero" transform="translate(0.000000, 63.000000)">
+                  <g
+                     id="Personal"
+                     transform="translate(277.000000, 309.000000)"
+                  >
+                     <g
+                        id="Docs-icon"
+                        transform="translate(174.000000, 91.000000)"
+                     >
+                        <g id="Group">
+                           <g id="Clipped">
+                              <mask id="mask-2" fill="white">
+                                 <use xlinkHref="#path-1" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
+                                 id="Path"
+                                 fill="#4285F4"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-2)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-4" fill="white">
+                                 <use xlinkHref="#path-3" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <polygon
+                                 id="Path"
+                                 fill="url(#linearGradient-5)"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-4)"
+                                 points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
+                              ></polygon>
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-7" fill="white">
+                                 <use xlinkHref="#path-6" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
+                                 id="Shape"
+                                 fill="#F1F1F1"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-7)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-9" fill="white">
+                                 <use xlinkHref="#path-8" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <g id="Group" mask="url(#mask-9)">
+                                 <g transform="translate(26.437500, -2.954545)">
+                                    <path
+                                       d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
+                                       id="Path"
+                                       fill="#A1C2FA"
+                                       fillRule="nonzero"
+                                    />
+                                 </g>
+                              </g>
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-11" fill="white">
+                                 <use xlinkHref="#path-10" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
+                                 id="Path"
+                                 fillOpacity="0.2"
+                                 fill="#FFFFFF"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-11)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-13" fill="white">
+                                 <use xlinkHref="#path-12" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
+                                 id="Path"
+                                 fillOpacity="0.2"
+                                 fill="#1A237E"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-13)"
+                              />
+                           </g>
+                           <g id="Clipped">
+                              <mask id="mask-15" fill="white">
+                                 <use xlinkHref="#path-14" />
+                              </mask>
+                              <g id="SVGID_1_" />
+                              <path
+                                 d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
+                                 id="Path"
+                                 fillOpacity="0.1"
+                                 fill="#1A237E"
+                                 fillRule="nonzero"
+                                 mask="url(#mask-15)"
+                              />
+                           </g>
+                        </g>
+                        <path
+                           d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
+                           id="Path"
+                           fill="url(#radialGradient-16)"
+                           fillRule="nonzero"
+                        />
+                     </g>
+                  </g>
+               </g>
+            </g>
+         </g>
+      </svg>
+   ),
+   zapier: () => (
+      <svg
+         width="105"
+         height="28"
+         viewBox="0 0 244 66"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
+            fill="#201515"
+         />
+         <path
+            d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
+            fill="#201515"
+         />
+         <path
+            d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
+            fill="#201515"
+         />
+         <path
+            d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
+            fill="#201515"
+         />
+         <path
+            d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
+            fill="#201515"
+         />
+         <path
+            d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
+            fill="#201515"
+         />
+         <path
+            d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
+            fill="#201515"
+         />
+         <path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
+      </svg>
+   ),
+   messenger: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 48 48"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <radialGradient
+            id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
+            cx="11.087"
+            cy="7.022"
+            r="47.612"
+            gradientTransform="matrix(1 0 0 -1 0 50)"
+            gradientUnits="userSpaceOnUse"
+         >
+            <stop offset="0" stopColor="#1292ff"></stop>
+            <stop offset=".079" stopColor="#2982ff"></stop>
+            <stop offset=".23" stopColor="#4e69ff"></stop>
+            <stop offset=".351" stopColor="#6559ff"></stop>
+            <stop offset=".428" stopColor="#6d53ff"></stop>
+            <stop offset=".754" stopColor="#df47aa"></stop>
+            <stop offset=".946" stopColor="#ff6257"></stop>
+         </radialGradient>
+         <path
+            fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
+            d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
+         />
+         <path
+            d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
+            opacity=".05"
+         />
+         <path
+            d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
+            opacity=".07"
+         />
+         <path
+            fill="#ffffff"
+            d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
+         />
+      </svg>
+   ),
+   user: () => (
+      <svg
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         fill="none"
+         stroke="#000000"
+         strokeWidth="2"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+         <circle cx="12" cy="7" r="4" />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/miami/examples/animated-beam-unidirectional.tsx b/apps/web/registry/miami/examples/animated-beam-unidirectional.tsx
new file mode 100644
index 00000000..d8e49bc5
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-beam-unidirectional.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import type React from "react"
+import { forwardRef, useRef } from "react"
+import { ny } from "~/lib/utils"
+import { AnimatedBeam } from "~/registry/miami/ui/animated-beam"
+
+const Circle = forwardRef<
+   HTMLDivElement,
+   { className?: string; children?: React.ReactNode }
+>(({ className, children }, ref) => {
+   return (
+      <div
+         ref={ref}
+         className={ny(
+            "z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
+            className,
+         )}
+      >
+         {children}
+      </div>
+   )
+})
+
+export default function AnimatedBeamDemo() {
+   const containerRef = useRef<HTMLDivElement>(null)
+   const div1Ref = useRef<HTMLDivElement>(null)
+   const div2Ref = useRef<HTMLDivElement>(null)
+
+   return (
+      <div
+         className="bg-background relative flex w-full max-w-[500px] items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
+         ref={containerRef}
+      >
+         <div className="flex size-full flex-col items-stretch justify-between gap-10">
+            <div className="flex flex-row justify-between">
+               <Circle ref={div1Ref}>
+                  <Icons.user />
+               </Circle>
+               <Circle ref={div2Ref}>
+                  <Icons.openai />
+               </Circle>
+            </div>
+         </div>
+
+         <AnimatedBeam
+            duration={3}
+            containerRef={containerRef}
+            fromRef={div1Ref}
+            toRef={div2Ref}
+         />
+      </div>
+   )
+}
+
+const Icons = {
+   openai: () => (
+      <svg
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+   ),
+   user: () => (
+      <svg
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         fill="none"
+         stroke="#000000"
+         strokeWidth="2"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+         <circle cx="12" cy="7" r="4" />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/miami/examples/animated-circular-progress-bar-demo.tsx b/apps/web/registry/miami/examples/animated-circular-progress-bar-demo.tsx
new file mode 100644
index 00000000..5cbed490
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-circular-progress-bar-demo.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import AnimatedCircularProgressBar from "~/registry/miami/ui/animated-circular-progress-bar"
+
+export default function AnimatedCircularProgressBarDemo() {
+   const [value, setValue] = useState(0)
+
+   useEffect(() => {
+      const handleIncrement = (prev: number) => {
+         if (prev === 100) {
+            return 0
+         }
+         return prev + 10
+      }
+      setValue(handleIncrement)
+      const interval = setInterval(() => setValue(handleIncrement), 2000)
+      return () => clearInterval(interval)
+   }, [])
+
+   return (
+      <AnimatedCircularProgressBar
+         max={100}
+         min={0}
+         value={value}
+         gaugePrimaryColor="rgb(79 70 229)"
+         gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-feature-card-1.tsx b/apps/web/registry/miami/examples/animated-feature-card-1.tsx
new file mode 100644
index 00000000..15f9f32f
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-feature-card-1.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import { motion } from "framer-motion"
+
+export default function FeatureCard1() {
+   const variant1 = {
+      initial: {
+         scale: 0.87,
+         transition: {
+            delay: 0.05,
+            duration: 0.2,
+            ease: "linear",
+         },
+      },
+      whileHover: {
+         scale: 0.8,
+         boxShadow:
+            "rgba(245,40,145,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.2,
+            ease: "linear",
+         },
+      },
+   }
+   const variant2 = {
+      initial: {
+         y: -27,
+         scale: 0.95,
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: "linear",
+         },
+      },
+      whileHover: {
+         y: -55,
+         scale: 0.87,
+         boxShadow:
+            "rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: "linear",
+         },
+      },
+   }
+   const variant3 = {
+      initial: {
+         y: -25,
+         opacity: 0,
+         scale: 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.2,
+            ease: "linear",
+         },
+      },
+      whileHover: {
+         y: -45,
+         opacity: 1,
+         scale: 1,
+         boxShadow:
+            "rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.2,
+            ease: "easeInOut",
+         },
+      },
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col justify-between"
+         >
+            <div className="flex size-full items-center justify-center rounded-t-xl">
+               <div className="relative flex flex-col items-center justify-center gap-y-2 p-10">
+                  <motion.div
+                     variants={variant1}
+                     className="z-[1] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/jack"
+                           alt="jack"
+                        />
+                     </div>
+                     <div className="flex flex-col gap-y-2">
+                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
+
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                     </div>
+                  </motion.div>
+                  <motion.div
+                     variants={variant2}
+                     className="z-[2] flex size-full items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/jane"
+                           alt="jane"
+                        />
+                     </div>
+                     <div className="flex flex-col gap-y-2">
+                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
+                     </div>
+                  </motion.div>
+                  <motion.div
+                     variants={variant3}
+                     className="absolute bottom-0 z-[3] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border bg-white p-5 px-2.5 dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/jill"
+                           alt="jill"
+                        />
+                     </div>
+                     <div className="flex flex-col gap-y-2">
+                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                     </div>
+                  </motion.div>
+               </div>
+            </div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Notifications</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Instantly get notified about events
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-feature-card-10.tsx b/apps/web/registry/miami/examples/animated-feature-card-10.tsx
new file mode 100644
index 00000000..ea1d08bd
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-feature-card-10.tsx
@@ -0,0 +1,144 @@
+"use client"
+
+import {
+   AnimatePresence,
+   cubicBezier,
+   motion,
+   useAnimation,
+   useInView,
+} from "framer-motion"
+import { useEffect, useRef } from "react"
+
+const cardImage = [
+   {
+      id: 1,
+      title: "Tom",
+      link: "#",
+      image: "https://avatar.vercel.sh/tom",
+   },
+   {
+      id: 2,
+      title: "Chris",
+      link: "#",
+      image: "https://avatar.vercel.sh/chris",
+   },
+   {
+      id: 3,
+      title: "PJ",
+      link: "#",
+      image: "https://avatar.vercel.sh/pj",
+   },
+   {
+      id: 4,
+      title: "Scott",
+      link: "#",
+      image: "https://avatar.vercel.sh/scott",
+   },
+   {
+      id: 5,
+      title: "Yehuda",
+      link: "#",
+      image: "https://avatar.vercel.sh/yehuda",
+   },
+   {
+      id: 6,
+      title: "Ezra",
+      link: "#",
+      image: "https://avatar.vercel.sh/ezra",
+   },
+   {
+      id: 7,
+      title: "Ivey",
+      link: "#",
+      image: "https://avatar.vercel.sh/ivey",
+   },
+   {
+      id: 8,
+      title: "Evan",
+      link: "#",
+      image: "https://avatar.vercel.sh/evan",
+   },
+   {
+      id: 9,
+      title: "Van",
+      link: "#",
+      image: "https://avatar.vercel.sh/van",
+   },
+]
+
+export default function FeatureCard10() {
+   const containerRef = useRef(null)
+   const inView = useInView(containerRef, { amount: 0.25 })
+   const controls = useAnimation()
+
+   useEffect(() => {
+      if (inView) controls.start("visible")
+      else controls.start("hidden")
+   }, [inView, controls])
+
+   return (
+      <div className="flex h-full transform-gpu flex-col items-center justify-between gap-5 rounded-lg border border-neutral-200 bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] xl:flex-row dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <div className="flex w-full flex-col items-start justify-between gap-y-10 p-10 xl:h-full xl:w-1/2">
+            <h2 className="text-3xl font-semibold">
+               Nyxb UI let's you build amazing websites with all your friends.
+            </h2>
+            <a
+               href="#"
+               className="text-base font-normal text-gray-500 underline-offset-4 transition-all hover:underline"
+            >
+               Check out our showcase
+            </a>
+         </div>
+         <div className="relative w-full overflow-hidden xl:w-1/2">
+            <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-1/3 bg-gradient-to-b from-white dark:from-black"></div>
+            <div
+               ref={containerRef}
+               className="relative -right-[50px] -top-[100px] grid max-h-[450px] grid-cols-3 gap-5 [transform:rotate(-15deg)translateZ(10px);]"
+            >
+               <AnimatePresence>
+                  {cardImage.map((card, index) => (
+                     <motion.div
+                        variants={{
+                           hidden: { opacity: 0, scale: 0.96, y: 25 },
+                           visible: { opacity: 1, scale: 1, y: 0 },
+                        }}
+                        initial="hidden"
+                        animate={controls}
+                        exit={{
+                           opacity: 0,
+                           scale: 0,
+                           transition: {
+                              duration: 0.1,
+                              ease: cubicBezier(0.22, 1, 0.36, 1),
+                           },
+                        }}
+                        transition={{
+                           duration: 0.2,
+                           ease: cubicBezier(0.22, 1, 0.36, 1),
+                           delay: index * 0.04,
+                        }}
+                        key={card.id}
+                        className="flex flex-col items-center gap-y-2 rounded-md border bg-white/5 p-5"
+                     >
+                        <img
+                           src={card.image}
+                           alt={card.title}
+                           className="size-20 rounded-full object-cover"
+                        />
+                        <p className="text-sm dark:text-neutral-200/50">
+                           {card.title}
+                        </p>
+                        <a
+                           href={card.link}
+                           className="rounded-md border border-neutral-700/50 bg-neutral-600 p-2 py-0.5 text-white shadow-xl drop-shadow-lg hover:bg-neutral-500 dark:border-neutral-400/20 dark:bg-gray-500"
+                        >
+                           Website
+                        </a>
+                     </motion.div>
+                  ))}
+               </AnimatePresence>
+            </div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-feature-card-2.tsx b/apps/web/registry/miami/examples/animated-feature-card-2.tsx
new file mode 100644
index 00000000..34a0b225
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-feature-card-2.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { cubicBezier, motion } from "framer-motion"
+import { Clock, Download, MessageCircle, Star } from "lucide-react"
+
+const texts = [
+   {
+      id: 1,
+      header: "New Feature Release.",
+      subheader: "Experience our app's latest features now.",
+      icon: <Star />,
+   },
+   {
+      id: 2,
+      header: "App Update Available.",
+      subheader:
+         "A new update is available for download. Get the latest version!",
+      icon: <Download />,
+   },
+   {
+      id: 3,
+      header: "Scheduled Maintenance.",
+      subheader:
+         "Our app will be temporarily unavailable due to scheduled maintenance.",
+      icon: <Clock />,
+   },
+   {
+      id: 4,
+      header: "Feedback Appreciated.",
+      subheader:
+         "We'd love to hear your thoughts on our app. Share your feedback!",
+      icon: <MessageCircle />,
+   },
+]
+
+export default function FeatureCard2() {
+   const itemVariants = {
+      initial: (index: number) => ({
+         y: 0,
+         scale: index === 3 ? 0.85 : 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      }),
+      whileHover: (index: number) => ({
+         y: -110,
+         opacity: 1,
+         scale: index === 0 ? 0.85 : index === 3 ? 1 : 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      }),
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col justify-between"
+         >
+            <div className="flex size-full items-center justify-center rounded-t-xl">
+               <motion.div className="flex h-[310px] w-full cursor-pointer flex-col gap-y-5 overflow-hidden rounded-t-md p-5">
+                  {texts.map((text, index) => (
+                     <motion.div
+                        key={text.id}
+                        className="w-full origin-right rounded-md  border border-slate-300/50 p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
+                        custom={index}
+                        variants={itemVariants}
+                     >
+                        <div className="flex flex-row gap-2">
+                           {text.icon}
+                           <p className="text-black dark:text-white">
+                              {text.header}
+                           </p>
+                        </div>
+                        <p className="text-gray-400 dark:text-gray-400">
+                           {text.subheader}
+                        </p>
+                     </motion.div>
+                  ))}
+               </motion.div>
+            </div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Notifications</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Instantly get notified about events
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-feature-card-3.tsx b/apps/web/registry/miami/examples/animated-feature-card-3.tsx
new file mode 100644
index 00000000..da9f321e
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-feature-card-3.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { cubicBezier, motion } from "framer-motion"
+
+export default function FeatureCard3() {
+   const variant1 = {
+      initial: {
+         y: 4,
+         scale: 0.5,
+         opacity: 0,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: -2,
+         opacity: 1,
+         scale: 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant2 = {
+      initial: {
+         y: -2,
+         opacity: 1,
+         scale: 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: 8,
+         opacity: 1,
+         scale: 1.05,
+         boxShadow:
+            "rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col justify-between"
+         >
+            <motion.div className="flex size-full cursor-pointer flex-col items-center justify-center gap-y-2 overflow-hidden rounded-t-xl p-8">
+               <motion.p
+                  variants={variant1}
+                  className="w-fit rounded-full border px-2 text-[15px]"
+               >
+                  Make it Pop ✨
+               </motion.p>
+               <motion.div
+                  variants={variant2}
+                  className="flex max-w-[300px] items-start gap-x-2 rounded-lg border border-neutral-300 border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
+               >
+                  <div className="flex size-6 shrink-0 rounded-full bg-blue-500">
+                     <img
+                        className="size-full rounded-full object-cover"
+                        src="https://avatar.vercel.sh/jane"
+                        alt="jane"
+                     />
+                  </div>
+                  <div>
+                     <h3 className="text-base font-semibold">Josh</h3>
+                     <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                     </p>
+                  </div>
+               </motion.div>
+            </motion.div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">AI Co-Pilot</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Use AI to make your writing stand out
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-feature-card-4.tsx b/apps/web/registry/miami/examples/animated-feature-card-4.tsx
new file mode 100644
index 00000000..ec49654b
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-feature-card-4.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import { cubicBezier, motion } from "framer-motion"
+
+export default function FeatureCard4() {
+   const variant1 = {
+      initial: {
+         x: 35,
+         y: 5,
+         scale: 0.8,
+         rotate: -3,
+         zIndex: 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.1,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         x: 0,
+         y: 0,
+         scale: 1,
+         rotate: 0,
+         boxShadow:
+            "rgba(39,245,76,0.15) 10px 20px 70px -20px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.1,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant2 = {
+      initial: {
+         scale: 1.1,
+         zIndex: 2,
+         transition: {
+            delay: 0.05,
+            duration: 0.1,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         scale: 1,
+         boxShadow:
+            "rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.1,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant3 = {
+      initial: {
+         x: -35,
+         y: 5,
+         scale: 0.8,
+         rotate: 3,
+         zIndex: 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.1,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         x: 0,
+         y: 0,
+         scale: 1,
+         rotate: 0,
+         boxShadow:
+            "rgba(245,40,145,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.1,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col items-start justify-between"
+         >
+            <div className="flex size-full items-center justify-center rounded-t-xl bg-transparent p-10">
+               <motion.div className="flex h-[230px] w-full items-center justify-between gap-x-4">
+                  <motion.div
+                     variants={variant1}
+                     className="z-[3] flex h-fit w-full  flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/jack"
+                           alt="jack"
+                        />
+                     </div>
+                     <div className="grid grid-cols-2 gap-2">
+                        <div className="h-2 w-10 rounded-full bg-neutral-700/50"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-400/80"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-300/80"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-600/80"></div>
+                     </div>
+                  </motion.div>
+                  <motion.div
+                     variants={variant2}
+                     className="z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/christina"
+                           alt="christina"
+                        />
+                     </div>
+                     <div className="grid grid-cols-2 gap-2">
+                        <div className="h-2 w-10 rounded-full bg-neutral-700/50"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-400/80"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-300/80"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-600/80"></div>
+                     </div>
+                  </motion.div>
+                  <motion.div
+                     variants={variant3}
+                     className="z-[3] flex h-fit w-full flex-col items-center justify-between gap-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/joshua"
+                           alt="joshua"
+                        />
+                     </div>
+                     <div className="grid grid-cols-2 gap-2">
+                        <div className="h-2 w-10 rounded-full bg-neutral-700/50"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-400/80"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-300/80"></div>
+                        <div className="h-2 w-10 rounded-full bg-neutral-600/80"></div>
+                     </div>
+                  </motion.div>
+               </motion.div>
+            </div>
+
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Social</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Write once, share with your friends
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-feature-card-5.tsx b/apps/web/registry/miami/examples/animated-feature-card-5.tsx
new file mode 100644
index 00000000..2c3f79c3
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-feature-card-5.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { cubicBezier, motion } from "framer-motion"
+
+export default function FeatureCard5() {
+   const variant1 = {
+      initial: {
+         viewBox: "0 -950 366 1408",
+         filter: "saturate(0.3)",
+         opacity: 0.5,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         viewBox: "0 -60 366 310",
+         filter: "saturate(1)",
+         opacity: 1,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant2 = {
+      initial: {
+         y: 0,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: 0,
+         transition: {
+            delay: 0.05,
+            duration: 0.3,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col items-start justify-between"
+         >
+            <div className="relative flex size-full cursor-pointer items-center justify-center overflow-hidden rounded-t-xl bg-transparent p-10">
+               <div className="relative h-[150px] w-full cursor-pointer overflow-hidden rounded-xl border border-slate-200/50 bg-white dark:border-neutral-700/50 dark:bg-neutral-900">
+                  <motion.p
+                     variants={variant2}
+                     className="absolute left-5 top-5 w-fit text-[15px]"
+                  >
+                     +245%
+                  </motion.p>
+                  <motion.svg
+                     variants={variant1}
+                     xmlns="http://www.w3.org/2000/svg"
+                     fill="none"
+                     preserveAspectRatio="none"
+                     className="absolute inset-0 size-full"
+                     viewBox="0 -950 366 1408"
+                  >
+                     <path
+                        fill="url(#a)"
+                        d="M0 193c109.5 0 260.5-52.5 366-192.5v907H0V193Z"
+                     />
+                     <defs>
+                        <linearGradient
+                           id="a"
+                           x1={183}
+                           x2={183}
+                           y1={0.5}
+                           y2={262}
+                           gradientUnits="userSpaceOnUse"
+                        >
+                           <stop stopColor="#22c55e" />
+                           <stop offset={1} stopColor="#15803d" />
+                        </linearGradient>
+                     </defs>
+                  </motion.svg>
+               </div>
+            </div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Growth</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Invest and watch your money grow
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-feature-card-6.tsx b/apps/web/registry/miami/examples/animated-feature-card-6.tsx
new file mode 100644
index 00000000..0cf3f8e3
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-feature-card-6.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { cubicBezier, motion } from "framer-motion"
+
+export default function FeatureCard6() {
+   const variant1 = {
+      initial: {
+         y: 0,
+         scale: 0.95,
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: 25,
+         x: 10,
+         scale: 1,
+         rotate: -2,
+         boxShadow:
+            "rgba(39,127,245,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant2 = {
+      initial: {
+         y: 0,
+         scale: 0.95,
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: -25,
+         x: -10,
+         scale: 1,
+         rotate: 3,
+         boxShadow:
+            "rgba(39,245,76,0.35) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col items-start justify-between"
+         >
+            <div className="flex h-[300px] w-full items-center justify-center rounded-t-xl bg-transparent ">
+               <div className="relative flex cursor-pointer flex-col items-center justify-center gap-y-2 p-14">
+                  <motion.div
+                     variants={variant1}
+                     className="dark:bg-neutral-980 z-[3] flex size-full items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/jack"
+                           alt="jack"
+                        />
+                     </div>
+                     <div className="flex flex-col gap-y-2">
+                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                     </div>
+                  </motion.div>
+                  <motion.div
+                     variants={variant2}
+                     className="absolute bottom-14 z-[2] m-auto flex size-fit items-center justify-between gap-x-2 rounded-md border border-neutral-400/20 bg-white p-5 px-2.5 transition-all duration-100 ease-linear dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-8 rounded-full bg-pink-300">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/jack"
+                           alt="jack"
+                        />
+                     </div>
+                     <div className="flex flex-col gap-y-2">
+                        <div className="h-2 w-32 rounded-full bg-neutral-800/50 dark:bg-neutral-200/80"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-20 rounded-full bg-slate-400/50"></div>
+                        <div className="h-2 w-48 rounded-full bg-slate-400/50"></div>
+                     </div>
+                  </motion.div>
+               </div>
+            </div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Share</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Share results with your friends
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-feature-card-7.tsx b/apps/web/registry/miami/examples/animated-feature-card-7.tsx
new file mode 100644
index 00000000..36273088
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-feature-card-7.tsx
@@ -0,0 +1,176 @@
+"use client"
+
+import { motion, useAnimation, useInView } from "framer-motion"
+import {
+   BarChart,
+   File,
+   Globe,
+   HeartHandshake,
+   Rss,
+   Shield,
+} from "lucide-react"
+import { useEffect, useId, useRef, useState } from "react"
+import { ny } from "~/lib/utils"
+import Marquee from "~/registry/miami/ui/marquee"
+
+const tiles = [
+   {
+      icon: <HeartHandshake className="size-full" />,
+      bg: (
+         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]"></div>
+      ),
+   },
+   {
+      icon: <Globe className="size-full" />,
+      bg: (
+         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 opacity-70 blur-[20px]"></div>
+      ),
+   },
+   {
+      icon: <File className="size-full" />,
+      bg: (
+         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-green-500 via-teal-500 to-emerald-600 opacity-70 blur-[20px]"></div>
+      ),
+   },
+   {
+      icon: <Shield className="size-full" />,
+      bg: (
+         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-600 opacity-70 blur-[20px]"></div>
+      ),
+   },
+   {
+      icon: <Rss className="size-full" />,
+      bg: (
+         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]"></div>
+      ),
+   },
+   {
+      icon: <BarChart className="size-full" />,
+      bg: (
+         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-gray-600 via-gray-500 to-gray-400 opacity-70 blur-[20px]"></div>
+      ),
+   },
+]
+
+function shuffleArray(array: any[]) {
+   let currentIndex = array.length
+   let randomIndex
+   // While there remain elements to shuffle.
+   while (currentIndex !== 0) {
+      // Pick a remaining element.
+      randomIndex = Math.floor(Math.random() * currentIndex)
+      currentIndex--
+      // And swap it with the current element.
+      ;[array[currentIndex], array[randomIndex]] = [
+         array[randomIndex],
+         array[currentIndex],
+      ]
+   }
+   return array
+}
+
+function Card(card: { icon: JSX.Element; bg: JSX.Element }) {
+   const id = useId()
+   const controls = useAnimation()
+   const ref = useRef(null)
+   const inView = useInView(ref, { once: true })
+
+   useEffect(() => {
+      if (inView) {
+         controls.start({
+            opacity: 1,
+            transition: {
+               delay: Math.random() * 2,
+               ease: "easeOut",
+               duration: 1,
+            },
+         })
+      }
+   }, [controls, inView])
+
+   return (
+      <motion.div
+         key={id}
+         ref={ref}
+         initial={{ opacity: 0 }}
+         animate={controls}
+         className={ny(
+            "relative size-20 cursor-pointer overflow-hidden rounded-2xl border p-4",
+            // light styles
+            "bg-white",
+            // dark styles
+            "transform-gpu dark:bg-transparent dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+         )}
+      >
+         {card.icon}
+         {card.bg}
+      </motion.div>
+   )
+}
+
+export default function FeatureCard7() {
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+   const [randomTiles1] = useState(() => shuffleArray([...tiles]))
+   const [randomTiles2] = useState(() => shuffleArray([...tiles]))
+   const [randomTiles3] = useState(() => shuffleArray([...tiles]))
+   const [randomTiles4] = useState(() => shuffleArray([...tiles]))
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col items-start justify-between"
+         >
+            <div className="group relative flex h-[300px] w-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl p-4">
+               <div className="relative flex flex-col items-center justify-center gap-y-2 px-10">
+                  <Marquee
+                     reverse
+                     className="-delay-[200ms] [--duration:20s]"
+                     repeat={4}
+                  >
+                     {randomTiles1.map((review, idx) => (
+                        <Card key={idx} {...review} />
+                     ))}
+                  </Marquee>
+                  <Marquee reverse className="[--duration:30s]" repeat={4}>
+                     {randomTiles2.map((review, idx) => (
+                        <Card key={idx} {...review} />
+                     ))}
+                  </Marquee>
+                  <Marquee
+                     reverse
+                     className="-delay-[200ms] [--duration:20s]"
+                     repeat={4}
+                  >
+                     {randomTiles3.map((review, idx) => (
+                        <Card key={idx} {...review} />
+                     ))}
+                  </Marquee>
+                  <Marquee reverse className="[--duration:30s]" repeat={4}>
+                     {randomTiles4.map((review, idx) => (
+                        <Card key={idx} {...review} />
+                     ))}
+                  </Marquee>
+                  <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
+                  <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
+               </div>
+            </div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Integrations</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Integrate with all your favourite apps
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-feature-card-8.tsx b/apps/web/registry/miami/examples/animated-feature-card-8.tsx
new file mode 100644
index 00000000..915a4e56
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-feature-card-8.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { cubicBezier, motion } from "framer-motion"
+
+export default function FeatureCard8() {
+   const variant1 = {
+      initial: {
+         y: 0,
+         scale: 0.97,
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: -45,
+         scale: 1,
+         boxShadow:
+            "rgba(39,127,245,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant2 = {
+      initial: {
+         y: 30,
+         opacity: 0,
+         scale: 0.97,
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         y: 10,
+         opacity: 1,
+         scale: 1,
+         boxShadow:
+            "rgba(245,40,145,0.05) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+   const variant3 = {
+      initial: {
+         x: 30,
+         y: 20,
+         opacity: 0,
+         transition: {
+            delay: 0,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+      whileHover: {
+         x: 5,
+         y: 5,
+         opacity: 1,
+         boxShadow:
+            "rgba(39,245,76,0.15) 0px 20px 70px -10px, rgba(36,42,66,0.04) 0px 10px 24px -8px, rgba(36,42,66,0.06) 0px 1px 4px -1px",
+         transition: {
+            delay: 0.05,
+            duration: 0.2,
+            ease: cubicBezier(0.22, 1, 0.36, 1),
+         },
+      },
+   }
+
+   const containerVariants = {
+      initial: {},
+      whileHover: {
+         transition: {
+            staggerChildren: 0.1,
+         },
+      },
+   }
+
+   return (
+      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <motion.div
+            variants={containerVariants}
+            initial="initial"
+            whileHover="whileHover"
+            className="flex size-full cursor-pointer flex-col items-start justify-between"
+         >
+            <div className="flex size-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl bg-transparent">
+               <div className="relative flex flex-col items-center justify-center gap-y-2 px-10 py-20">
+                  <motion.div
+                     variants={variant1}
+                     className=" relative flex items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="size-6 rounded-full bg-blue-500">
+                        <img
+                           className="size-full rounded-full object-cover"
+                           src="https://avatar.vercel.sh/joshua"
+                           alt="joshua"
+                        />
+                     </div>
+                     <div className="w-[calc(100%-3rem)]">
+                        <h3 className="text-base font-semibold">Mary</h3>
+                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                           I think the design can be improved
+                        </p>
+                     </div>
+                  </motion.div>
+                  <motion.div
+                     variants={variant2}
+                     className=" absolute inset-10 -bottom-14 z-[3] m-auto flex h-fit items-start gap-x-2 rounded-lg border border-neutral-400/20 bg-white p-4 shadow-[0px_0px_40px_-25px_rgba(0,0,0,0.25)] dark:border-neutral-800 dark:bg-neutral-900"
+                  >
+                     <div className="w-8 ">
+                        <div className="size-6 rounded-full bg-blue-500">
+                           <img
+                              className="size-full rounded-full object-cover"
+                              src="https://avatar.vercel.sh/christina"
+                              alt="christina"
+                           />
+                        </div>
+                     </div>
+                     <div className="w-[calc(100%-3rem)]">
+                        <h3 className="text-base font-semibold">Joshua</h3>
+                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                           On it ✅
+                        </p>
+                     </div>
+                     <motion.p
+                        variants={variant3}
+                        className="highlighted absolute -bottom-2 right-2 w-fit rounded-full border bg-cyan-500 px-2 py-0.5 text-xs text-white"
+                     >
+                        sent
+                     </motion.p>
+                  </motion.div>
+               </div>
+            </div>
+            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
+               <h2 className="text-xl font-semibold">Reply</h2>
+               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+                  Reply to other creators in app
+               </p>
+            </div>
+         </motion.div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-feature-card-9.tsx b/apps/web/registry/miami/examples/animated-feature-card-9.tsx
new file mode 100644
index 00000000..9f37265c
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-feature-card-9.tsx
@@ -0,0 +1,162 @@
+"use client"
+
+import { AnimatePresence, motion } from "framer-motion"
+import type { ReactElement } from "react"
+import React, { useEffect, useMemo, useState } from "react"
+import { ny } from "~/lib/utils"
+
+export const AnimatedList = React.memo(
+   ({
+      className,
+      children,
+      delay = 1000,
+   }: {
+      className?: string
+      children: React.ReactNode
+      delay?: number
+   }) => {
+      const [index, setIndex] = useState(0)
+      const childrenArray = React.Children.toArray(children)
+
+      useEffect(() => {
+         const interval = setInterval(() => {
+            setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)
+         }, delay)
+
+         return () => clearInterval(interval)
+      }, [childrenArray.length, delay])
+
+      const itemsToShow = useMemo(
+         () => childrenArray.slice(0, index + 1).reverse(),
+         [index, childrenArray],
+      )
+
+      return (
+         <div className={`flex flex-col items-center gap-4 ${className}`}>
+            <AnimatePresence>
+               {itemsToShow.map((item) => (
+                  <AnimatedListItem key={(item as ReactElement).key}>
+                     {item}
+                  </AnimatedListItem>
+               ))}
+            </AnimatePresence>
+         </div>
+      )
+   },
+)
+
+AnimatedList.displayName = "AnimatedList"
+
+export function AnimatedListItem({ children }: { children: React.ReactNode }) {
+   const animations = {
+      initial: { scale: 0, opacity: 0 },
+      animate: { scale: 1, opacity: 1, originY: 0 },
+      exit: { scale: 0, opacity: 0 },
+      transition: { type: "spring", stiffness: 350, damping: 40 },
+   }
+
+   return (
+      <motion.div {...animations} layout className="mx-auto w-full">
+         {children}
+      </motion.div>
+   )
+}
+
+interface Item {
+   name: string
+   description: string
+   icon: string
+   color: string
+   time: string
+}
+
+let notifications = [
+   {
+      name: "Payment received",
+      description: "Nyxb UI",
+      time: "15m ago",
+
+      icon: "💸",
+      color: "#00C9A7",
+   },
+   {
+      name: "User signed up",
+      description: "Nyxb UI",
+      time: "10m ago",
+      icon: "👤",
+      color: "#FFB800",
+   },
+   {
+      name: "New message",
+      description: "Nyxb UI",
+      time: "5m ago",
+      icon: "💬",
+      color: "#FF3D71",
+   },
+   {
+      name: "New event",
+      description: "Nyxb UI",
+      time: "2m ago",
+      icon: "🗞️",
+      color: "#1E86FF",
+   },
+]
+
+notifications = Array.from({ length: 10 }, () => notifications).flat()
+
+function Notification({ name, description, icon, color, time }: Item) {
+   return (
+      <figure
+         className={ny(
+            "relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-lg p-4",
+            // animation styles
+            "transition-all duration-200 ease-in-out hover:scale-[103%]",
+            // light styles
+            "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
+            // dark styles
+            "transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+         )}
+      >
+         <div className="flex flex-row items-center gap-3">
+            <div
+               className="flex size-10 items-center justify-center rounded-2xl"
+               style={{
+                  backgroundColor: color,
+               }}
+            >
+               <span className="text-lg">{icon}</span>
+            </div>
+            <div className="flex flex-col overflow-hidden">
+               <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
+                  <span className="text-sm sm:text-lg">{name}</span>
+                  <span className="mx-1">·</span>
+                  <span className="text-xs text-gray-500">{time}</span>
+               </figcaption>
+               <p className="text-sm font-normal dark:text-white/60">
+                  {description}
+               </p>
+            </div>
+         </div>
+      </figure>
+   )
+}
+
+export default function FeatureCard9() {
+   return (
+      <div className="relative flex size-full max-h-[500px] min-h-[500px] max-w-lg transform-gpu flex-col justify-between overflow-hidden rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
+         <div className="flex items-center justify-center overflow-hidden">
+            <AnimatedList>
+               {notifications.map((item, idx) => (
+                  <Notification {...item} key={idx} />
+               ))}
+            </AnimatedList>
+         </div>
+         <div className="flex flex-col items-start gap-y-1 border-t p-4 dark:border-neutral-800">
+            <h2 className="text-xl font-semibold">Notifications</h2>
+            <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
+               Get realtime notifications for events you subscribe too
+            </p>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-gradient-text-demo.tsx b/apps/web/registry/miami/examples/animated-gradient-text-demo.tsx
new file mode 100644
index 00000000..3842866e
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-gradient-text-demo.tsx
@@ -0,0 +1,21 @@
+import { ChevronRight } from "lucide-react"
+import { ny } from "~/lib/utils"
+import AnimatedGradientText from "~/registry/miami/ui/animated-gradient-text"
+
+export default async function AnimatedGradientTextDemo() {
+   return (
+      <div className="z-10 flex min-h-64 items-center justify-center">
+         <AnimatedGradientText>
+            🎉 <hr className="mx-2 h-4 w-px shrink-0 bg-gray-300" />{" "}
+            <span
+               className={ny(
+                  `animate-gradient inline bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
+               )}
+            >
+               Introducing Nyxb UI
+            </span>
+            <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
+         </AnimatedGradientText>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-grid-pattern-demo.tsx b/apps/web/registry/miami/examples/animated-grid-pattern-demo.tsx
new file mode 100644
index 00000000..4cdb58eb
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-grid-pattern-demo.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { ny } from "~/registry/miami/lib/utils"
+import { GridPattern } from "~/registry/miami/ui/grid-pattern"
+
+export default function GridPatternDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Grid Pattern
+         </p>
+         <GridPattern
+            squares={[
+               [4, 4],
+               [5, 1],
+               [8, 2],
+               [5, 3],
+               [5, 5],
+               [10, 10],
+               [12, 15],
+               [15, 10],
+               [10, 15],
+               [15, 10],
+               [10, 15],
+               [15, 10],
+            ]}
+            className={ny(
+               "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
+               "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-list-demo.tsx b/apps/web/registry/miami/examples/animated-list-demo.tsx
new file mode 100644
index 00000000..f1fa079f
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-list-demo.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { ny } from "~/lib/utils"
+import { AnimatedList } from "~/registry/miami/ui/animated-list"
+
+interface Item {
+   name: string
+   description: string
+   icon: string
+   color: string
+   time: string
+}
+
+let notifications = [
+   {
+      name: "Payment received",
+      description: "Nyxb UI",
+      time: "15m ago",
+
+      icon: "💸",
+      color: "#00C9A7",
+   },
+   {
+      name: "User signed up",
+      description: "Nyxb UI",
+      time: "10m ago",
+      icon: "👤",
+      color: "#FFB800",
+   },
+   {
+      name: "New message",
+      description: "Nyxb UI",
+      time: "5m ago",
+      icon: "💬",
+      color: "#FF3D71",
+   },
+   {
+      name: "New event",
+      description: "Nyxb UI",
+      time: "2m ago",
+      icon: "🗞️",
+      color: "#1E86FF",
+   },
+]
+
+notifications = Array.from({ length: 10 }, () => notifications).flat()
+
+function Notification({ name, description, icon, color, time }: Item) {
+   return (
+      <figure
+         className={ny(
+            "relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4",
+            // animation styles
+            "transition-all duration-200 ease-in-out hover:scale-[103%]",
+            // light styles
+            "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
+            // dark styles
+            "transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+         )}
+      >
+         <div className="flex flex-row items-center gap-3">
+            <div
+               className="flex size-10 items-center justify-center rounded-2xl"
+               style={{
+                  backgroundColor: color,
+               }}
+            >
+               <span className="text-lg">{icon}</span>
+            </div>
+            <div className="flex flex-col overflow-hidden">
+               <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
+                  <span className="text-sm sm:text-lg">{name}</span>
+                  <span className="mx-1">·</span>
+                  <span className="text-xs text-gray-500">{time}</span>
+               </figcaption>
+               <p className="text-sm font-normal dark:text-white/60">
+                  {description}
+               </p>
+            </div>
+         </div>
+      </figure>
+   )
+}
+
+export default function AnimatedListDemo() {
+   return (
+      <div className="bg-background relative flex max-h-[400px] min-h-[400px] w-full max-w-lg flex-col overflow-hidden rounded-lg border p-6 shadow-lg">
+         <AnimatedList>
+            {notifications.map((item, idx) => (
+               <Notification {...item} key={idx} />
+            ))}
+         </AnimatedList>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-shiny-text-demo.tsx b/apps/web/registry/miami/examples/animated-shiny-text-demo.tsx
new file mode 100644
index 00000000..98adf39a
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-shiny-text-demo.tsx
@@ -0,0 +1,20 @@
+import { ArrowRightIcon } from "@radix-ui/react-icons"
+import { ny } from "~/lib/utils"
+import AnimatedShinyText from "~/registry/miami/ui/animated-shiny-text"
+
+export default async function AnimatedShinyTextDemo() {
+   return (
+      <div className="z-10 flex min-h-64 items-center justify-center">
+         <div
+            className={ny(
+               "group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800",
+            )}
+         >
+            <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400">
+               <span>✨ Introducing Nyxb UI</span>
+               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
+            </AnimatedShinyText>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/animated-subscribe-button-demo.tsx b/apps/web/registry/miami/examples/animated-subscribe-button-demo.tsx
new file mode 100644
index 00000000..db4e8200
--- /dev/null
+++ b/apps/web/registry/miami/examples/animated-subscribe-button-demo.tsx
@@ -0,0 +1,24 @@
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+import { AnimatedSubscribeButton } from "~/registry/miami/ui/animated-subscribe-button"
+
+export default function AnimatedSubscribeButtonDemo() {
+   return (
+      <AnimatedSubscribeButton
+         buttonColor="#000000"
+         buttonTextColor="#ffffff"
+         subscribeStatus={false}
+         initialText={
+            <span className="group inline-flex items-center">
+               Subscribe{" "}
+               <ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" />
+            </span>
+         }
+         changeText={
+            <span className="group inline-flex items-center">
+               <CheckIcon className="mr-2 size-4" />
+               Subscribed{" "}
+            </span>
+         }
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/aspect-ratio-demo.tsx b/apps/web/registry/miami/examples/aspect-ratio-demo.tsx
new file mode 100644
index 00000000..f5937bf9
--- /dev/null
+++ b/apps/web/registry/miami/examples/aspect-ratio-demo.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image"
+
+import { AspectRatio } from "~/registry/miami/ui/aspect-ratio"
+
+export default function AspectRatioDemo() {
+   return (
+      <AspectRatio ratio={16 / 9} className="bg-muted">
+         <Image
+            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+            alt="Photo by Drew Beamer"
+            fill
+            className="rounded-md object-cover"
+         />
+      </AspectRatio>
+   )
+}
diff --git a/apps/web/registry/miami/examples/aurora-text-demo.tsx b/apps/web/registry/miami/examples/aurora-text-demo.tsx
new file mode 100644
index 00000000..da3566c4
--- /dev/null
+++ b/apps/web/registry/miami/examples/aurora-text-demo.tsx
@@ -0,0 +1,9 @@
+import { AuroraText } from "~/registry/miami/ui/aurora-text"
+
+export default function AuroraTextDemo() {
+   return (
+      <h1 className="text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl">
+         Ship <AuroraText>beautiful</AuroraText>
+      </h1>
+   )
+}
diff --git a/apps/web/registry/miami/examples/avatar-circles-demo.tsx b/apps/web/registry/miami/examples/avatar-circles-demo.tsx
new file mode 100644
index 00000000..eb74f573
--- /dev/null
+++ b/apps/web/registry/miami/examples/avatar-circles-demo.tsx
@@ -0,0 +1,12 @@
+import AvatarCircles from "~/registry/miami/ui/avatar-circles"
+
+const avatarUrls = [
+   "https://avatars.githubusercontent.com/u/98586665",
+   "https://avatars.githubusercontent.com/u/20110627",
+   "https://avatars.githubusercontent.com/u/106103625",
+   "https://avatars.githubusercontent.com/u/59228569",
+]
+
+export default async function AvatarCirclesDemo() {
+   return <AvatarCircles numPeople={99} avatarUrls={avatarUrls} />
+}
diff --git a/apps/web/registry/miami/examples/avatar-demo.tsx b/apps/web/registry/miami/examples/avatar-demo.tsx
new file mode 100644
index 00000000..c84b2d88
--- /dev/null
+++ b/apps/web/registry/miami/examples/avatar-demo.tsx
@@ -0,0 +1,10 @@
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+
+export default function AvatarDemo() {
+   return (
+      <Avatar>
+         <AvatarImage src="https://github.com/nyxb.png" alt="@nyxb" />
+         <AvatarFallback>NY</AvatarFallback>
+      </Avatar>
+   )
+}
diff --git a/apps/web/registry/miami/examples/badge-demo.tsx b/apps/web/registry/miami/examples/badge-demo.tsx
new file mode 100644
index 00000000..2d919b96
--- /dev/null
+++ b/apps/web/registry/miami/examples/badge-demo.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/miami/ui/badge"
+
+export default function BadgeDemo() {
+   return <Badge>Badge</Badge>
+}
diff --git a/apps/web/registry/miami/examples/badge-destructive.tsx b/apps/web/registry/miami/examples/badge-destructive.tsx
new file mode 100644
index 00000000..3a332789
--- /dev/null
+++ b/apps/web/registry/miami/examples/badge-destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/miami/ui/badge"
+
+export default function BadgeDestructive() {
+   return <Badge variant="destructive">Destructive</Badge>
+}
diff --git a/apps/web/registry/miami/examples/badge-outline.tsx b/apps/web/registry/miami/examples/badge-outline.tsx
new file mode 100644
index 00000000..ba753f17
--- /dev/null
+++ b/apps/web/registry/miami/examples/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/miami/ui/badge"
+
+export default function BadgeOutline() {
+   return <Badge variant="outline">Outline</Badge>
+}
diff --git a/apps/web/registry/miami/examples/badge-secondary.tsx b/apps/web/registry/miami/examples/badge-secondary.tsx
new file mode 100644
index 00000000..5afb23e0
--- /dev/null
+++ b/apps/web/registry/miami/examples/badge-secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/miami/ui/badge"
+
+export default function BadgeSecondary() {
+   return <Badge variant="secondary">Secondary</Badge>
+}
diff --git a/apps/web/registry/miami/examples/bento-demo-vertical.tsx b/apps/web/registry/miami/examples/bento-demo-vertical.tsx
new file mode 100644
index 00000000..62d6a635
--- /dev/null
+++ b/apps/web/registry/miami/examples/bento-demo-vertical.tsx
@@ -0,0 +1,67 @@
+import {
+   BellIcon,
+   CalendarIcon,
+   FileTextIcon,
+   GlobeIcon,
+   InputIcon,
+} from "@radix-ui/react-icons"
+import { BentoCard, BentoGrid } from "~/registry/miami/ui/bento-grid"
+
+const features = [
+   {
+      Icon: FileTextIcon,
+      name: "Save your files",
+      description: "We automatically save your files as you type.",
+      href: "/docs",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3",
+   },
+   {
+      Icon: InputIcon,
+      name: "Full text search",
+      description: "Search through all your files in one place.",
+      href: "/docs",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3",
+   },
+   {
+      Icon: GlobeIcon,
+      name: "Multilingual",
+      description: "Supports 100+ languages and counting.",
+      href: "/docs",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4",
+   },
+   {
+      Icon: CalendarIcon,
+      name: "Calendar",
+      description: "Use the calendar to filter your files by date.",
+      href: "/docs",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2",
+   },
+   {
+      Icon: BellIcon,
+      name: "Notifications",
+      description:
+         "Get notified when someone shares a file or mentions you in a comment.",
+      href: "/docs",
+      cta: "Learn more",
+      background: <img className="absolute -right-20 -top-20 opacity-60" />,
+      className: "lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4",
+   },
+]
+
+export default async function BentoDemo() {
+   return (
+      <BentoGrid className="lg:grid-rows-3">
+         {features.map((feature) => (
+            <BentoCard key={feature.name} {...feature} />
+         ))}
+      </BentoGrid>
+   )
+}
diff --git a/apps/web/registry/miami/examples/bento-demo.tsx b/apps/web/registry/miami/examples/bento-demo.tsx
new file mode 100644
index 00000000..2a843f50
--- /dev/null
+++ b/apps/web/registry/miami/examples/bento-demo.tsx
@@ -0,0 +1,215 @@
+import { CalendarIcon, FileTextIcon, InputIcon } from "@radix-ui/react-icons"
+import { Share2Icon } from "lucide-react"
+import { Calendar } from "~/components/ui/calendar"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/components/ui/command"
+import { ny } from "~/lib/utils"
+import AnimatedBeamMultipleOutputDemo from "~/registry/miami/examples/animated-beam-multiple-outputs"
+import { BentoCard, BentoGrid } from "~/registry/miami/ui/bento-grid"
+import Marquee from "~/registry/miami/ui/marquee"
+
+const files = [
+   {
+      name: "bitcoin.pdf",
+      body: "Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.",
+   },
+   {
+      name: "finances.xlsx",
+      body: "A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.",
+   },
+   {
+      name: "logo.svg",
+      body: "Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.",
+   },
+   {
+      name: "keys.gpg",
+      body: "GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.",
+   },
+   {
+      name: "seed.txt",
+      body: "A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.",
+   },
+]
+
+interface Item {
+   name: string
+   description: string
+   icon: string
+   color: string
+   time: string
+}
+
+let notifications = [
+   {
+      name: "Payment received",
+      description: "Nyxb UI",
+      time: "15m ago",
+
+      icon: "💸",
+      color: "#00C9A7",
+   },
+   {
+      name: "User signed up",
+      description: "Nyxb UI",
+      time: "10m ago",
+      icon: "👤",
+      color: "#FFB800",
+   },
+   {
+      name: "New message",
+      description: "Nyxb UI",
+      time: "5m ago",
+      icon: "💬",
+      color: "#FF3D71",
+   },
+   {
+      name: "New event",
+      description: "Nyxb UI",
+      time: "2m ago",
+      icon: "🗞️",
+      color: "#1E86FF",
+   },
+]
+
+notifications = Array.from({ length: 10 }, () => notifications).flat()
+
+function Notification({ name, description, icon, color, time }: Item) {
+   return (
+      <figure
+         className={ny(
+            "relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4",
+            // animation styles
+            "transition-all duration-200 ease-in-out hover:scale-[103%]",
+            // light styles
+            "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
+            // dark styles
+            "transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+         )}
+      >
+         <div className="flex flex-row items-center gap-3">
+            <div
+               className="flex size-10 items-center justify-center rounded-2xl"
+               style={{
+                  backgroundColor: color,
+               }}
+            >
+               <span className="text-lg">{icon}</span>
+            </div>
+            <div className="flex flex-col overflow-hidden">
+               <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
+                  <span className="text-sm sm:text-lg">{name}</span>
+                  <span className="mx-1">·</span>
+                  <span className="text-xs text-gray-500">{time}</span>
+               </figcaption>
+               <p className="text-sm font-normal dark:text-white/60">
+                  {description}
+               </p>
+            </div>
+         </div>
+      </figure>
+   )
+}
+
+const features = [
+   {
+      Icon: FileTextIcon,
+      name: "Save your files",
+      description: "We automatically save your files as you type.",
+      href: "/docs",
+      cta: "Learn more",
+      className: "col-span-3 lg:col-span-1",
+      background: (
+         <Marquee
+            pauseOnHover
+            className="absolute top-10 [--duration:20s] [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] "
+         >
+            {files.map((f, idx) => (
+               <figure
+                  key={idx}
+                  className={ny(
+                     "relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4",
+                     "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
+                     "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
+                     "transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none",
+                  )}
+               >
+                  <div className="flex flex-row items-center gap-2">
+                     <div className="flex flex-col">
+                        <figcaption className="text-sm font-medium dark:text-white ">
+                           {f.name}
+                        </figcaption>
+                     </div>
+                  </div>
+                  <blockquote className="mt-2 text-xs">{f.body}</blockquote>
+               </figure>
+            ))}
+         </Marquee>
+      ),
+   },
+   {
+      Icon: InputIcon,
+      name: "Full text search",
+      description: "Search through all your files in one place.",
+      href: "/docs",
+      cta: "Learn more",
+      className: "col-span-3 lg:col-span-2",
+      background: (
+         <Command className="absolute right-10 top-10 w-[70%] origin-top translate-x-0 border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:-translate-x-10">
+            <CommandInput placeholder="Type a command or search..." />
+            <CommandList>
+               <CommandEmpty>No results found.</CommandEmpty>
+               <CommandGroup heading="Suggestions">
+                  <CommandItem>screenshot.png</CommandItem>
+                  <CommandItem>bitcoin.pdf</CommandItem>
+                  <CommandItem>finances.xlsx</CommandItem>
+                  <CommandItem>logo.svg</CommandItem>
+                  <CommandItem>keys.gpg</CommandItem>
+                  <CommandItem>seed.txt</CommandItem>
+               </CommandGroup>
+            </CommandList>
+         </Command>
+      ),
+   },
+   {
+      Icon: Share2Icon,
+      name: "Integrations",
+      description: "Supports 100+ integrations and counting.",
+      href: "/docs",
+      cta: "Learn more",
+      className: "col-span-3 lg:col-span-2",
+      background: (
+         <AnimatedBeamMultipleOutputDemo className="absolute right-2 top-4 h-[300px] w-[600px] border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105" />
+      ),
+   },
+   {
+      Icon: CalendarIcon,
+      name: "Calendar",
+      description: "Use the calendar to filter your files by date.",
+      className: "col-span-3 lg:col-span-1",
+      href: "/docs",
+      cta: "Learn more",
+      background: (
+         <Calendar
+            mode="single"
+            selected={new Date(2022, 4, 11, 0, 0, 0)}
+            className="absolute right-0 top-10 origin-top rounded-md border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:scale-105"
+         />
+      ),
+   },
+]
+
+export default function BentoDemo() {
+   return (
+      <BentoGrid>
+         {features.map((feature, idx) => (
+            <BentoCard key={idx} {...feature} />
+         ))}
+      </BentoGrid>
+   )
+}
diff --git a/apps/web/registry/miami/examples/blur-fade-demo.tsx b/apps/web/registry/miami/examples/blur-fade-demo.tsx
new file mode 100644
index 00000000..0631587e
--- /dev/null
+++ b/apps/web/registry/miami/examples/blur-fade-demo.tsx
@@ -0,0 +1,26 @@
+import BlurFade from "~/registry/miami/ui/blur-fade"
+
+const images = Array.from({ length: 9 }, (_, i) => {
+   const isLandscape = i % 2 === 0
+   const width = isLandscape ? 800 : 600
+   const height = isLandscape ? 600 : 800
+   return `https://picsum.photos/seed/${i + 1}/${width}/${height}`
+})
+
+export default function BlurFadeDemo() {
+   return (
+      <section id="photos">
+         <div className="columns-2 gap-4 sm:columns-3">
+            {images.map((imageUrl, idx) => (
+               <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>
+                  <img
+                     className="mb-4 size-full rounded-lg object-contain"
+                     src={imageUrl}
+                     alt={`Random stock image ${idx + 1}`}
+                  />
+               </BlurFade>
+            ))}
+         </div>
+      </section>
+   )
+}
diff --git a/apps/web/registry/miami/examples/blur-fade-text-demo.tsx b/apps/web/registry/miami/examples/blur-fade-text-demo.tsx
new file mode 100644
index 00000000..dc0a9250
--- /dev/null
+++ b/apps/web/registry/miami/examples/blur-fade-text-demo.tsx
@@ -0,0 +1,18 @@
+import BlurFade from "~/registry/miami/ui/blur-fade"
+
+export default function BlurFadeTextDemo() {
+   return (
+      <section id="header">
+         <BlurFade delay={0.25} inView>
+            <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
+               Hello World 👋
+            </h2>
+         </BlurFade>
+         <BlurFade delay={0.25 * 2} inView>
+            <span className="text-pretty text-xl tracking-tighter sm:text-3xl xl:text-4xl/none">
+               Nice to meet you
+            </span>
+         </BlurFade>
+      </section>
+   )
+}
diff --git a/apps/web/registry/miami/examples/blur-in-demo.tsx b/apps/web/registry/miami/examples/blur-in-demo.tsx
new file mode 100644
index 00000000..93916313
--- /dev/null
+++ b/apps/web/registry/miami/examples/blur-in-demo.tsx
@@ -0,0 +1,11 @@
+import BlurIn from "~/registry/miami/ui/blur-in"
+
+function BlurInDemo() {
+   return (
+      <BlurIn
+         word="Blur In"
+         className="text-4xl font-bold text-black dark:text-white"
+      />
+   )
+}
+export default BlurInDemo
diff --git a/apps/web/registry/miami/examples/border-beam-demo.tsx b/apps/web/registry/miami/examples/border-beam-demo.tsx
new file mode 100644
index 00000000..7c7d97e9
--- /dev/null
+++ b/apps/web/registry/miami/examples/border-beam-demo.tsx
@@ -0,0 +1,20 @@
+import { BorderBeam } from "~/registry/miami/ui/border-beam"
+
+export default function BorderBeamDemo() {
+   return (
+      <div className="relative rounded-xl">
+         <img
+            src="/dashboard-dark.png"
+            alt="Hero Image"
+            className="hidden w-[700px] rounded-[inherit] border object-contain shadow-lg dark:block"
+         />
+         <img
+            src="/dashboard-light.png"
+            alt="Hero Image"
+            className="block w-[700px] rounded-[inherit] border object-contain shadow-lg dark:hidden"
+         />
+
+         <BorderBeam size={250} duration={12} delay={9} />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/box-reveal-demo.tsx b/apps/web/registry/miami/examples/box-reveal-demo.tsx
new file mode 100644
index 00000000..195f3833
--- /dev/null
+++ b/apps/web/registry/miami/examples/box-reveal-demo.tsx
@@ -0,0 +1,52 @@
+import BoxReveal from "~/registry/miami/ui/box-reveal"
+
+import { Button } from "~/components/ui/button"
+
+export default async function BoxRevealDemo() {
+   return (
+      <div className="size-full max-w-lg items-center justify-center overflow-hidden pt-8">
+         <BoxReveal boxColor="#5046e6" duration={0.5}>
+            <p className="text-[3.5rem] font-semibold">
+               Nyxb UI
+               <span className="text-[#5046e6]">.</span>
+            </p>
+         </BoxReveal>
+
+         <BoxReveal boxColor="#5046e6" duration={0.5}>
+            <h2 className="mt-[.5rem] text-[1rem]">
+               UI library for{" "}
+               <span className="text-[#5046e6]">Design Engineers</span>
+            </h2>
+         </BoxReveal>
+
+         <BoxReveal boxColor="#5046e6" duration={0.5}>
+            <div className="mt-6">
+               <p>
+                  -&gt; 20+ free and open-source animated components built with
+                  <span className="font-semibold text-[#5046e6]"> React</span>,
+                  <span className="font-semibold text-[#5046e6]">
+                     {" "}
+                     Typescript
+                  </span>
+                  ,
+                  <span className="font-semibold text-[#5046e6]">
+                     {" "}
+                     Tailwind CSS
+                  </span>
+                  , and
+                  <span className="font-semibold text-[#5046e6]">
+                     {" "}
+                     Framer Motion
+                  </span>
+                  . <br />
+                  -&gt; 100% open-source, and customizable. <br />
+               </p>
+            </div>
+         </BoxReveal>
+
+         <BoxReveal boxColor="#5046e6" duration={0.5}>
+            <Button className="mt-[1.6rem] bg-[#5046e6]">Explore</Button>
+         </BoxReveal>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/breadcrumb-demo.tsx b/apps/web/registry/miami/examples/breadcrumb-demo.tsx
new file mode 100644
index 00000000..4c9f98db
--- /dev/null
+++ b/apps/web/registry/miami/examples/breadcrumb-demo.tsx
@@ -0,0 +1,51 @@
+import {
+   Breadcrumb,
+   BreadcrumbEllipsis,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+
+export default function BreadcrumbDemo() {
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <DropdownMenu>
+                  <DropdownMenuTrigger className="flex items-center gap-1">
+                     <BreadcrumbEllipsis className="size-4" />
+                     <span className="sr-only">Toggle menu</span>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                     <DropdownMenuItem>Documentation</DropdownMenuItem>
+                     <DropdownMenuItem>Themes</DropdownMenuItem>
+                     <DropdownMenuItem>GitHub</DropdownMenuItem>
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/docs/components">
+                  Components
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/miami/examples/breadcrumb-dropdown.tsx b/apps/web/registry/miami/examples/breadcrumb-dropdown.tsx
new file mode 100644
index 00000000..8e6970cc
--- /dev/null
+++ b/apps/web/registry/miami/examples/breadcrumb-dropdown.tsx
@@ -0,0 +1,50 @@
+import { ChevronDownIcon, SlashIcon } from "@radix-ui/react-icons"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+
+export default function BreadcrumbWithDropdown() {
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+               <SlashIcon />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+               <DropdownMenu>
+                  <DropdownMenuTrigger className="flex items-center gap-1">
+                     Components
+                     <ChevronDownIcon />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                     <DropdownMenuItem>Documentation</DropdownMenuItem>
+                     <DropdownMenuItem>Themes</DropdownMenuItem>
+                     <DropdownMenuItem>GitHub</DropdownMenuItem>
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+               <SlashIcon />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/miami/examples/breadcrumb-ellipsis.tsx b/apps/web/registry/miami/examples/breadcrumb-ellipsis.tsx
new file mode 100644
index 00000000..812f4254
--- /dev/null
+++ b/apps/web/registry/miami/examples/breadcrumb-ellipsis.tsx
@@ -0,0 +1,39 @@
+import Link from "next/link"
+
+import {
+   Breadcrumb,
+   BreadcrumbEllipsis,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+
+export default function BreadcrumbCollapsed() {
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink asChild>
+                  <Link href="/">Home</Link>
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbEllipsis />
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbLink asChild>
+                  <Link href="/docs/components">Components</Link>
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/miami/examples/breadcrumb-link.tsx b/apps/web/registry/miami/examples/breadcrumb-link.tsx
new file mode 100644
index 00000000..f49a6185
--- /dev/null
+++ b/apps/web/registry/miami/examples/breadcrumb-link.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+
+export default function BreadcrumbWithCustomSeparator() {
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink>
+                  <Link href="/">Home</Link>
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbLink>
+                  <Link href="/components">Components</Link>
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/miami/examples/breadcrumb-responsive.tsx b/apps/web/registry/miami/examples/breadcrumb-responsive.tsx
new file mode 100644
index 00000000..39185f59
--- /dev/null
+++ b/apps/web/registry/miami/examples/breadcrumb-responsive.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import Link from "next/link"
+import * as React from "react"
+
+import { useMediaQuery } from "~/hooks/use-media-query"
+import {
+   Breadcrumb,
+   BreadcrumbEllipsis,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Drawer,
+   DrawerClose,
+   DrawerContent,
+   DrawerDescription,
+   DrawerFooter,
+   DrawerHeader,
+   DrawerTitle,
+   DrawerTrigger,
+} from "~/registry/miami/ui/drawer"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+
+const items = [
+   { href: "#", label: "Home" },
+   { href: "#", label: "Documentation" },
+   { href: "#", label: "Building Your Application" },
+   { href: "#", label: "Data Fetching" },
+   { label: "Caching and Revalidating" },
+]
+
+const ITEMS_TO_DISPLAY = 3
+
+export default function BreadcrumbResponsive() {
+   const [open, setOpen] = React.useState(false)
+   const isDesktop = useMediaQuery("(min-width: 768px)")
+
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink href={items[0].href}>
+                  {items[0].label}
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            {items.length > ITEMS_TO_DISPLAY ? (
+               <>
+                  <BreadcrumbItem>
+                     {isDesktop ? (
+                        <DropdownMenu open={open} onOpenChange={setOpen}>
+                           <DropdownMenuTrigger
+                              className="flex items-center gap-1"
+                              aria-label="Toggle menu"
+                           >
+                              <BreadcrumbEllipsis className="size-4" />
+                           </DropdownMenuTrigger>
+                           <DropdownMenuContent align="start">
+                              {items.slice(1, -2).map((item, index) => (
+                                 <DropdownMenuItem key={index}>
+                                    <Link href={item.href ? item.href : "#"}>
+                                       {item.label}
+                                    </Link>
+                                 </DropdownMenuItem>
+                              ))}
+                           </DropdownMenuContent>
+                        </DropdownMenu>
+                     ) : (
+                        <Drawer open={open} onOpenChange={setOpen}>
+                           <DrawerTrigger aria-label="Toggle Menu">
+                              <BreadcrumbEllipsis className="size-4" />
+                           </DrawerTrigger>
+                           <DrawerContent>
+                              <DrawerHeader className="text-left">
+                                 <DrawerTitle>Navigate to</DrawerTitle>
+                                 <DrawerDescription>
+                                    Select a page to navigate to.
+                                 </DrawerDescription>
+                              </DrawerHeader>
+                              <div className="grid gap-1 px-4">
+                                 {items.slice(1, -2).map((item, index) => (
+                                    <Link
+                                       key={index}
+                                       href={item.href ? item.href : "#"}
+                                       className="py-1 text-sm"
+                                    >
+                                       {item.label}
+                                    </Link>
+                                 ))}
+                              </div>
+                              <DrawerFooter className="pt-4">
+                                 <DrawerClose asChild>
+                                    <Button variant="outline">Close</Button>
+                                 </DrawerClose>
+                              </DrawerFooter>
+                           </DrawerContent>
+                        </Drawer>
+                     )}
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+               </>
+            ) : null}
+            {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
+               <BreadcrumbItem key={index}>
+                  {item.href ? (
+                     <>
+                        <BreadcrumbLink
+                           asChild
+                           className="max-w-20 truncate md:max-w-none"
+                        >
+                           <Link href={item.href}>{item.label}</Link>
+                        </BreadcrumbLink>
+                        <BreadcrumbSeparator />
+                     </>
+                  ) : (
+                     <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
+                        {item.label}
+                     </BreadcrumbPage>
+                  )}
+               </BreadcrumbItem>
+            ))}
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/miami/examples/breadcrumb-separator.tsx b/apps/web/registry/miami/examples/breadcrumb-separator.tsx
new file mode 100644
index 00000000..49906181
--- /dev/null
+++ b/apps/web/registry/miami/examples/breadcrumb-separator.tsx
@@ -0,0 +1,34 @@
+import { SlashIcon } from "@radix-ui/react-icons"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+
+export default function BreadcrumbWithCustomSeparator() {
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+               <SlashIcon />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+               <SlashIcon />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/miami/examples/button-as-child.tsx b/apps/web/registry/miami/examples/button-as-child.tsx
new file mode 100644
index 00000000..aec4f27c
--- /dev/null
+++ b/apps/web/registry/miami/examples/button-as-child.tsx
@@ -0,0 +1,11 @@
+import Link from "next/link"
+
+import { Button } from "~/registry/miami/ui/button"
+
+export default function ButtonAsChild() {
+   return (
+      <Button asChild>
+         <Link href="/login">Login</Link>
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/examples/button-demo.tsx b/apps/web/registry/miami/examples/button-demo.tsx
new file mode 100644
index 00000000..8309ad27
--- /dev/null
+++ b/apps/web/registry/miami/examples/button-demo.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export default function ButtonDemo() {
+   return <Button>Button</Button>
+}
diff --git a/apps/web/registry/miami/examples/button-destructive.tsx b/apps/web/registry/miami/examples/button-destructive.tsx
new file mode 100644
index 00000000..b04bc3e9
--- /dev/null
+++ b/apps/web/registry/miami/examples/button-destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export default function ButtonDestructive() {
+   return <Button variant="destructive">Destructive</Button>
+}
diff --git a/apps/web/registry/miami/examples/button-ghost.tsx b/apps/web/registry/miami/examples/button-ghost.tsx
new file mode 100644
index 00000000..2a0eae86
--- /dev/null
+++ b/apps/web/registry/miami/examples/button-ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export default function ButtonGhost() {
+   return <Button variant="ghost">Ghost</Button>
+}
diff --git a/apps/web/registry/miami/examples/button-icon.tsx b/apps/web/registry/miami/examples/button-icon.tsx
new file mode 100644
index 00000000..e9f2c0ed
--- /dev/null
+++ b/apps/web/registry/miami/examples/button-icon.tsx
@@ -0,0 +1,11 @@
+import { ChevronRightIcon } from "@radix-ui/react-icons"
+
+import { Button } from "~/registry/miami/ui/button"
+
+export default function ButtonIcon() {
+   return (
+      <Button variant="outline" size="icon">
+         <ChevronRightIcon className="size-4" />
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/examples/button-link.tsx b/apps/web/registry/miami/examples/button-link.tsx
new file mode 100644
index 00000000..c005d05a
--- /dev/null
+++ b/apps/web/registry/miami/examples/button-link.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export default function ButtonLink() {
+   return <Button variant="link">Link</Button>
+}
diff --git a/apps/web/registry/miami/examples/button-loading.tsx b/apps/web/registry/miami/examples/button-loading.tsx
new file mode 100644
index 00000000..5d19f5c6
--- /dev/null
+++ b/apps/web/registry/miami/examples/button-loading.tsx
@@ -0,0 +1,12 @@
+import { ReloadIcon } from "@radix-ui/react-icons"
+
+import { Button } from "~/registry/miami/ui/button"
+
+export default function ButtonLoading() {
+   return (
+      <Button disabled>
+         <ReloadIcon className="mr-2 size-4 animate-spin" />
+         Please wait
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/examples/button-outline.tsx b/apps/web/registry/miami/examples/button-outline.tsx
new file mode 100644
index 00000000..4ebf3161
--- /dev/null
+++ b/apps/web/registry/miami/examples/button-outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export default function ButtonOutline() {
+   return <Button variant="outline">Outline</Button>
+}
diff --git a/apps/web/registry/miami/examples/button-secondary.tsx b/apps/web/registry/miami/examples/button-secondary.tsx
new file mode 100644
index 00000000..581038b1
--- /dev/null
+++ b/apps/web/registry/miami/examples/button-secondary.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export default function ButtonSecondary() {
+   return <Button variant="secondary">Secondary</Button>
+}
diff --git a/apps/web/registry/miami/examples/button-with-icon.tsx b/apps/web/registry/miami/examples/button-with-icon.tsx
new file mode 100644
index 00000000..db073ae0
--- /dev/null
+++ b/apps/web/registry/miami/examples/button-with-icon.tsx
@@ -0,0 +1,11 @@
+import { EnvelopeOpenIcon } from "@radix-ui/react-icons"
+
+import { Button } from "~/registry/miami/ui/button"
+
+export default function ButtonWithIcon() {
+   return (
+      <Button>
+         <EnvelopeOpenIcon className="mr-2 size-4" /> Login with Email
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/examples/calendar-demo.tsx b/apps/web/registry/miami/examples/calendar-demo.tsx
new file mode 100644
index 00000000..56b948bd
--- /dev/null
+++ b/apps/web/registry/miami/examples/calendar-demo.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "~/registry/miami/ui/calendar"
+
+export default function CalendarDemo() {
+   const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+   return (
+      <Calendar
+         mode="single"
+         selected={date}
+         onSelect={setDate}
+         className="rounded-md border shadow"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/calendar-form.tsx b/apps/web/registry/miami/examples/calendar-form.tsx
new file mode 100644
index 00000000..dbcfd6f0
--- /dev/null
+++ b/apps/web/registry/miami/examples/calendar-form.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { format } from "date-fns"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Calendar } from "~/registry/miami/ui/calendar"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/miami/ui/form"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const FormSchema = z.object({
+   dob: z.date({
+      required_error: "A date of birth is required.",
+   }),
+})
+
+export default function CalendarForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+               control={form.control}
+               name="dob"
+               render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                     <FormLabel>Date of birth</FormLabel>
+                     <Popover>
+                        <PopoverTrigger asChild>
+                           <FormControl>
+                              <Button
+                                 variant="outline"
+                                 className={ny(
+                                    "w-[240px] pl-3 text-left font-normal",
+                                    !field.value && "text-muted-foreground",
+                                 )}
+                              >
+                                 {field.value ? (
+                                    format(field.value, "PPP")
+                                 ) : (
+                                    <span>Pick a date</span>
+                                 )}
+                                 <CalendarIcon className="ml-auto size-4 opacity-50" />
+                              </Button>
+                           </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                           <Calendar
+                              mode="single"
+                              selected={field.value}
+                              onSelect={field.onChange}
+                              disabled={(date) =>
+                                 date > new Date() ||
+                                 date < new Date("1900-01-01")
+                              }
+                              initialFocus
+                           />
+                        </PopoverContent>
+                     </Popover>
+                     <FormDescription>
+                        Your date of birth is used to calculate your age.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/card-demo.tsx b/apps/web/registry/miami/examples/card-demo.tsx
new file mode 100644
index 00000000..8ea53262
--- /dev/null
+++ b/apps/web/registry/miami/examples/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellIcon, CheckIcon } from "@radix-ui/react-icons"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Switch } from "~/registry/miami/ui/switch"
+
+const notifications = [
+   {
+      title: "Your call has been confirmed.",
+      description: "1 hour ago",
+   },
+   {
+      title: "You have a new message!",
+      description: "1 hour ago",
+   },
+   {
+      title: "Your subscription is expiring soon!",
+      description: "2 hours ago",
+   },
+]
+
+type CardProps = React.ComponentProps<typeof Card>
+
+export default function CardDemo({ className, ...props }: CardProps) {
+   return (
+      <Card className={ny("w-[380px]", className)} {...props}>
+         <CardHeader>
+            <CardTitle>Notifications</CardTitle>
+            <CardDescription>You have 3 unread messages.</CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-4">
+            <div className=" flex items-center space-x-4 rounded-md border p-4">
+               <BellIcon />
+               <div className="flex-1 space-y-1">
+                  <p className="text-sm font-medium leading-none">
+                     Push Notifications
+                  </p>
+                  <p className="text-muted-foreground text-sm">
+                     Send notifications to device.
+                  </p>
+               </div>
+               <Switch />
+            </div>
+            <div>
+               {notifications.map((notification, index) => (
+                  <div
+                     key={index}
+                     className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+                  >
+                     <span className="flex size-2 translate-y-1 rounded-full bg-sky-500" />
+                     <div className="space-y-1">
+                        <p className="text-sm font-medium leading-none">
+                           {notification.title}
+                        </p>
+                        <p className="text-muted-foreground text-sm">
+                           {notification.description}
+                        </p>
+                     </div>
+                  </div>
+               ))}
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">
+               <CheckIcon className="mr-2 size-4" /> Mark all as read
+            </Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/examples/card-with-form.tsx b/apps/web/registry/miami/examples/card-with-form.tsx
new file mode 100644
index 00000000..f31c645f
--- /dev/null
+++ b/apps/web/registry/miami/examples/card-with-form.tsx
@@ -0,0 +1,61 @@
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export default function CardWithForm() {
+   return (
+      <Card className="w-[350px]">
+         <CardHeader>
+            <CardTitle>Create project</CardTitle>
+            <CardDescription>
+               Deploy your new project in one-click.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <form>
+               <div className="grid w-full items-center gap-4">
+                  <div className="flex flex-col space-y-1.5">
+                     <Label htmlFor="name">Name</Label>
+                     <Input id="name" placeholder="Name of your project" />
+                  </div>
+                  <div className="flex flex-col space-y-1.5">
+                     <Label htmlFor="framework">Framework</Label>
+                     <Select>
+                        <SelectTrigger id="framework">
+                           <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent position="popper">
+                           <SelectItem value="next">Next.js</SelectItem>
+                           <SelectItem value="sveltekit">SvelteKit</SelectItem>
+                           <SelectItem value="astro">Astro</SelectItem>
+                           <SelectItem value="nuxt">Nuxt.js</SelectItem>
+                        </SelectContent>
+                     </Select>
+                  </div>
+               </div>
+            </form>
+         </CardContent>
+         <CardFooter className="flex justify-between">
+            <Button variant="outline">Cancel</Button>
+            <Button>Deploy</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/activity-goal.tsx b/apps/web/registry/miami/examples/cards/activity-goal.tsx
new file mode 100644
index 00000000..cd3fa346
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/activity-goal.tsx
@@ -0,0 +1,138 @@
+"use client"
+
+import { MinusIcon, PlusIcon } from "@radix-ui/react-icons"
+import { useTheme } from "next-themes"
+import * as React from "react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { useConfig } from "~/hooks/use-config"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { baseColors } from "~/registry/registry-base-colors"
+
+const data = [
+   {
+      goal: 400,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 239,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 349,
+   },
+]
+
+export function CardsActivityGoal() {
+   const { theme: mode } = useTheme()
+   const [config] = useConfig()
+
+   const baseColor = baseColors.find(
+      (baseColor) => baseColor.name === config.theme,
+   )
+   const [goal, setGoal] = React.useState(350)
+
+   function onClick(adjustment: number) {
+      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+   }
+
+   return (
+      <Card>
+         <CardHeader className="pb-4">
+            <CardTitle>Move Goal</CardTitle>
+            <CardDescription>Set your daily activity goal.</CardDescription>
+         </CardHeader>
+         <CardContent className="pb-2">
+            <div className="flex items-center justify-center space-x-2">
+               <Button
+                  variant="outline"
+                  size="icon"
+                  className="size-8 shrink-0 rounded-full"
+                  onClick={() => onClick(-10)}
+                  disabled={goal <= 200}
+               >
+                  <MinusIcon className="size-4" />
+                  <span className="sr-only">Decrease</span>
+               </Button>
+               <div className="flex-1 text-center">
+                  <div className="text-5xl font-bold tracking-tighter">
+                     {goal}
+                  </div>
+                  <div className="text-muted-foreground text-[0.70rem] uppercase">
+                     Calories/day
+                  </div>
+               </div>
+               <Button
+                  variant="outline"
+                  size="icon"
+                  className="size-8 shrink-0 rounded-full"
+                  onClick={() => onClick(10)}
+                  disabled={goal >= 400}
+               >
+                  <PlusIcon className="size-4" />
+                  <span className="sr-only">Increase</span>
+               </Button>
+            </div>
+            <div className="my-3 h-[60px]">
+               <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={data}>
+                     <Bar
+                        dataKey="goal"
+                        style={
+                           {
+                              fill: "var(--theme-primary)",
+                              opacity: 0.2,
+                              "--theme-primary": `hsl(${
+                                 baseColor?.cssVars[
+                                    mode === "dark" ? "dark" : "light"
+                                 ].primary
+                              })`,
+                           } as React.CSSProperties
+                        }
+                     />
+                  </BarChart>
+               </ResponsiveContainer>
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">Set Goal</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/calendar.tsx b/apps/web/registry/miami/examples/cards/calendar.tsx
new file mode 100644
index 00000000..049b1179
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/calendar.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { addDays } from "date-fns"
+
+import { Calendar } from "~/registry/miami/ui/calendar"
+import { Card, CardContent } from "~/registry/miami/ui/card"
+
+const start = new Date(2023, 5, 5)
+
+export function CardsCalendar() {
+   return (
+      <Card className="max-w-[260px]">
+         <CardContent className="p-1">
+            <Calendar
+               numberOfMonths={1}
+               mode="range"
+               defaultMonth={start}
+               selected={{
+                  from: start,
+                  to: addDays(start, 8),
+               }}
+            />
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/chat.tsx b/apps/web/registry/miami/examples/cards/chat.tsx
new file mode 100644
index 00000000..82be7947
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/chat.tsx
@@ -0,0 +1,267 @@
+import { CheckIcon, PaperPlaneIcon, PlusIcon } from "@radix-ui/react-icons"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardFooter,
+   CardHeader,
+} from "~/registry/miami/ui/card"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/miami/ui/command"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogFooter,
+   DialogHeader,
+   DialogTitle,
+} from "~/registry/miami/ui/dialog"
+import { Input } from "~/registry/miami/ui/input"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/miami/ui/tooltip"
+
+const users = [
+   {
+      name: "Olivia Martin",
+      email: "m@example.com",
+      avatar: "/avatars/01.png",
+   },
+   {
+      name: "Isabella Nguyen",
+      email: "isabella.nguyen@email.com",
+      avatar: "/avatars/03.png",
+   },
+   {
+      name: "Emma Wilson",
+      email: "emma@example.com",
+      avatar: "/avatars/05.png",
+   },
+   {
+      name: "Jackson Lee",
+      email: "lee@example.com",
+      avatar: "/avatars/02.png",
+   },
+   {
+      name: "William Kim",
+      email: "will@email.com",
+      avatar: "/avatars/04.png",
+   },
+] as const
+
+type User = (typeof users)[number]
+
+export function CardsChat() {
+   const [open, setOpen] = React.useState(false)
+   const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
+
+   const [messages, setMessages] = React.useState([
+      {
+         role: "agent",
+         content: "Hi, how can I help you today?",
+      },
+      {
+         role: "user",
+         content: "Hey, I'm having trouble with my account.",
+      },
+      {
+         role: "agent",
+         content: "What seems to be the problem?",
+      },
+      {
+         role: "user",
+         content: "I can't log in.",
+      },
+   ])
+   const [input, setInput] = React.useState("")
+   const inputLength = input.trim().length
+
+   return (
+      <>
+         <Card>
+            <CardHeader className="flex flex-row items-center">
+               <div className="flex items-center space-x-4">
+                  <Avatar>
+                     <AvatarImage src="/avatars/01.png" alt="Image" />
+                     <AvatarFallback>OM</AvatarFallback>
+                  </Avatar>
+                  <div>
+                     <p className="text-sm font-medium leading-none">
+                        Sofia Davis
+                     </p>
+                     <p className="text-muted-foreground text-sm">
+                        m@example.com
+                     </p>
+                  </div>
+               </div>
+               <TooltipProvider delayDuration={0}>
+                  <Tooltip>
+                     <TooltipTrigger asChild>
+                        <Button
+                           size="icon"
+                           variant="outline"
+                           className="ml-auto rounded-full"
+                           onClick={() => setOpen(true)}
+                        >
+                           <PlusIcon className="size-4" />
+                           <span className="sr-only">New message</span>
+                        </Button>
+                     </TooltipTrigger>
+                     <TooltipContent sideOffset={10}>
+                        New message
+                     </TooltipContent>
+                  </Tooltip>
+               </TooltipProvider>
+            </CardHeader>
+            <CardContent>
+               <div className="space-y-4">
+                  {messages.map((message, index) => (
+                     <div
+                        key={index}
+                        className={ny(
+                           "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
+                           message.role === "user"
+                              ? "bg-primary text-primary-foreground ml-auto"
+                              : "bg-muted",
+                        )}
+                     >
+                        {message.content}
+                     </div>
+                  ))}
+               </div>
+            </CardContent>
+            <CardFooter>
+               <form
+                  onSubmit={(event) => {
+                     event.preventDefault()
+                     if (inputLength === 0) return
+                     setMessages([
+                        ...messages,
+                        {
+                           role: "user",
+                           content: input,
+                        },
+                     ])
+                     setInput("")
+                  }}
+                  className="flex w-full items-center space-x-2"
+               >
+                  <Input
+                     id="message"
+                     placeholder="Type your message..."
+                     className="flex-1"
+                     autoComplete="off"
+                     value={input}
+                     onChange={(event) => setInput(event.target.value)}
+                  />
+                  <Button
+                     type="submit"
+                     size="icon"
+                     disabled={inputLength === 0}
+                  >
+                     <PaperPlaneIcon className="size-4" />
+                     <span className="sr-only">Send</span>
+                  </Button>
+               </form>
+            </CardFooter>
+         </Card>
+         <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent className="gap-0 p-0 outline-none">
+               <DialogHeader className="px-4 pb-4 pt-5">
+                  <DialogTitle>New message</DialogTitle>
+                  <DialogDescription>
+                     Invite a user to this thread. This will create a new group
+                     message.
+                  </DialogDescription>
+               </DialogHeader>
+               <Command className="overflow-hidden rounded-t-none border-t bg-transparent">
+                  <CommandInput placeholder="Search user..." />
+                  <CommandList>
+                     <CommandEmpty>No users found.</CommandEmpty>
+                     <CommandGroup className="p-2">
+                        {users.map((user) => (
+                           <CommandItem
+                              key={user.email}
+                              className="flex items-center px-2"
+                              onSelect={() => {
+                                 if (selectedUsers.includes(user)) {
+                                    return setSelectedUsers(
+                                       selectedUsers.filter(
+                                          (selectedUser) =>
+                                             selectedUser !== user,
+                                       ),
+                                    )
+                                 }
+
+                                 return setSelectedUsers(
+                                    [...users].filter((u) =>
+                                       [...selectedUsers, user].includes(u),
+                                    ),
+                                 )
+                              }}
+                           >
+                              <Avatar>
+                                 <AvatarImage src={user.avatar} alt="Image" />
+                                 <AvatarFallback>{user.name[0]}</AvatarFallback>
+                              </Avatar>
+                              <div className="ml-2">
+                                 <p className="text-sm font-medium leading-none">
+                                    {user.name}
+                                 </p>
+                                 <p className="text-muted-foreground text-sm">
+                                    {user.email}
+                                 </p>
+                              </div>
+                              {selectedUsers.includes(user) ? (
+                                 <CheckIcon className="text-primary ml-auto flex size-5" />
+                              ) : null}
+                           </CommandItem>
+                        ))}
+                     </CommandGroup>
+                  </CommandList>
+               </Command>
+               <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
+                  {selectedUsers.length > 0 ? (
+                     <div className="flex -space-x-2 overflow-hidden">
+                        {selectedUsers.map((user) => (
+                           <Avatar
+                              key={user.email}
+                              className="border-background inline-block border-2"
+                           >
+                              <AvatarImage src={user.avatar} />
+                              <AvatarFallback>{user.name[0]}</AvatarFallback>
+                           </Avatar>
+                        ))}
+                     </div>
+                  ) : (
+                     <p className="text-muted-foreground text-sm">
+                        Select users to add to this thread.
+                     </p>
+                  )}
+                  <Button
+                     disabled={selectedUsers.length < 2}
+                     onClick={() => {
+                        setOpen(false)
+                     }}
+                  >
+                     Continue
+                  </Button>
+               </DialogFooter>
+            </DialogContent>
+         </Dialog>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/cookie-settings.tsx b/apps/web/registry/miami/examples/cards/cookie-settings.tsx
new file mode 100644
index 00000000..ddff5d5b
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/cookie-settings.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Label } from "~/registry/miami/ui/label"
+import { Switch } from "~/registry/miami/ui/switch"
+
+export function CardsCookieSettings() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Cookie Settings</CardTitle>
+            <CardDescription>Manage your cookie settings here.</CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-6">
+            <div className="flex items-center justify-between space-x-4">
+               <Label htmlFor="necessary" className="flex flex-col space-y-1">
+                  <span>Strictly Necessary</span>
+                  <span className="text-muted-foreground text-xs font-normal leading-snug">
+                     These cookies are essential in order to use the website and
+                     use its features.
+                  </span>
+               </Label>
+               <Switch id="necessary" defaultChecked aria-label="Necessary" />
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+               <Label htmlFor="functional" className="flex flex-col space-y-1">
+                  <span>Functional Cookies</span>
+                  <span className="text-muted-foreground text-xs font-normal leading-snug">
+                     These cookies allow the website to provide personalized
+                     functionality.
+                  </span>
+               </Label>
+               <Switch id="functional" aria-label="Functional" />
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+               <Label htmlFor="performance" className="flex flex-col space-y-1">
+                  <span>Performance Cookies</span>
+                  <span className="text-muted-foreground text-xs font-normal leading-snug">
+                     These cookies help to improve the performance of the
+                     website.
+                  </span>
+               </Label>
+               <Switch id="performance" aria-label="Performance" />
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button variant="outline" className="w-full">
+               Save preferences
+            </Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/create-account.tsx b/apps/web/registry/miami/examples/cards/create-account.tsx
new file mode 100644
index 00000000..2e1fc178
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/create-account.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import { Icons } from "~/components/icons"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function CardsCreateAccount() {
+   return (
+      <Card>
+         <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl">Create an account</CardTitle>
+            <CardDescription>
+               Enter your email below to create your account
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-4">
+            <div className="grid grid-cols-2 gap-6">
+               <Button variant="outline">
+                  <Icons.gitHub className="mr-2 size-4" />
+                  GitHub
+               </Button>
+               <Button variant="outline">
+                  <Icons.google className="mr-2 size-4" />
+                  Google
+               </Button>
+            </div>
+            <div className="relative">
+               <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t" />
+               </div>
+               <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-card text-muted-foreground px-2">
+                     Or continue with
+                  </span>
+               </div>
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor="email">Email</Label>
+               <Input id="email" type="email" placeholder="m@example.com" />
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor="password">Password</Label>
+               <Input id="password" type="password" />
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">Create account</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/data-table.tsx b/apps/web/registry/miami/examples/cards/data-table.tsx
new file mode 100644
index 00000000..4b667d5a
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/data-table.tsx
@@ -0,0 +1,348 @@
+"use client"
+
+import {
+   CaretSortIcon,
+   ChevronDownIcon,
+   DotsHorizontalIcon,
+} from "@radix-ui/react-icons"
+import type {
+   ColumnDef,
+   ColumnFiltersState,
+   SortingState,
+   VisibilityState,
+} from "@tanstack/react-table"
+import {
+   flexRender,
+   getCoreRowModel,
+   getFilteredRowModel,
+   getPaginationRowModel,
+   getSortedRowModel,
+   useReactTable,
+} from "@tanstack/react-table"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+import {
+   DropdownMenu,
+   DropdownMenuCheckboxItem,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import {
+   Table,
+   TableBody,
+   TableCell,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/miami/ui/table"
+
+const data: Payment[] = [
+   {
+      id: "m5gr84i9",
+      amount: 316,
+      status: "success",
+      email: "ken99@yahoo.com",
+   },
+   {
+      id: "3u1reuv4",
+      amount: 242,
+      status: "success",
+      email: "Abe45@gmail.com",
+   },
+   {
+      id: "derv1ws0",
+      amount: 837,
+      status: "processing",
+      email: "Monserrat44@gmail.com",
+   },
+   {
+      id: "5kma53ae",
+      amount: 874,
+      status: "success",
+      email: "Silas22@gmail.com",
+   },
+   {
+      id: "bhqecj4p",
+      amount: 721,
+      status: "failed",
+      email: "carmella@hotmail.com",
+   },
+]
+
+export interface Payment {
+   id: string
+   amount: number
+   status: "pending" | "processing" | "success" | "failed"
+   email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+   {
+      id: "select",
+      header: ({ table }) => (
+         <Checkbox
+            checked={
+               table.getIsAllPageRowsSelected() ||
+               (table.getIsSomePageRowsSelected() && "indeterminate")
+            }
+            onCheckedChange={(value) =>
+               table.toggleAllPageRowsSelected(!!value)
+            }
+            aria-label="Select all"
+         />
+      ),
+      cell: ({ row }) => (
+         <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+         />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+   },
+   {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ row }) => (
+         <div className="capitalize">{row.getValue("status")}</div>
+      ),
+   },
+   {
+      accessorKey: "email",
+      header: ({ column }) => {
+         return (
+            <Button
+               variant="ghost"
+               onClick={() =>
+                  column.toggleSorting(column.getIsSorted() === "asc")
+               }
+            >
+               Email
+               <CaretSortIcon className="ml-2 size-4" />
+            </Button>
+         )
+      },
+      cell: ({ row }) => (
+         <div className="lowercase">{row.getValue("email")}</div>
+      ),
+   },
+   {
+      accessorKey: "amount",
+      header: () => <div className="text-right">Amount</div>,
+      cell: ({ row }) => {
+         const amount = Number.parseFloat(row.getValue("amount"))
+
+         // Format the amount as a dollar amount
+         const formatted = new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+         }).format(amount)
+
+         return <div className="text-right font-medium">{formatted}</div>
+      },
+   },
+   {
+      id: "actions",
+      enableHiding: false,
+      cell: ({ row }) => {
+         const payment = row.original
+
+         return (
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="size-8 p-0">
+                     <span className="sr-only">Open menu</span>
+                     <DotsHorizontalIcon className="size-4" />
+                  </Button>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                  <DropdownMenuItem
+                     onClick={() => navigator.clipboard.writeText(payment.id)}
+                  >
+                     Copy payment ID
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>View customer</DropdownMenuItem>
+                  <DropdownMenuItem>View payment details</DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         )
+      },
+   },
+]
+
+export function CardsDataTable() {
+   const [sorting, setSorting] = React.useState<SortingState>([])
+   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+      [],
+   )
+   const [columnVisibility, setColumnVisibility] =
+      React.useState<VisibilityState>({})
+   const [rowSelection, setRowSelection] = React.useState({})
+
+   const table = useReactTable({
+      data,
+      columns,
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setColumnFilters,
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      onColumnVisibilityChange: setColumnVisibility,
+      onRowSelectionChange: setRowSelection,
+      state: {
+         sorting,
+         columnFilters,
+         columnVisibility,
+         rowSelection,
+      },
+   })
+
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Payments</CardTitle>
+            <CardDescription>Manage your payments.</CardDescription>
+         </CardHeader>
+         <CardContent>
+            <div className="mb-4 flex items-center gap-4">
+               <Input
+                  placeholder="Filter emails..."
+                  value={
+                     (table.getColumn("email")?.getFilterValue() as string) ??
+                     ""
+                  }
+                  onChange={(event) =>
+                     table
+                        .getColumn("email")
+                        ?.setFilterValue(event.target.value)
+                  }
+                  className="max-w-sm"
+               />
+               <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                     <Button variant="outline" className="ml-auto">
+                        Columns <ChevronDownIcon className="ml-2 size-4" />
+                     </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                     {table
+                        .getAllColumns()
+                        .filter((column) => column.getCanHide())
+                        .map((column) => {
+                           return (
+                              <DropdownMenuCheckboxItem
+                                 key={column.id}
+                                 className="capitalize"
+                                 checked={column.getIsVisible()}
+                                 onCheckedChange={(value) =>
+                                    column.toggleVisibility(!!value)
+                                 }
+                              >
+                                 {column.id}
+                              </DropdownMenuCheckboxItem>
+                           )
+                        })}
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </div>
+            <div className="rounded-md border">
+               <Table>
+                  <TableHeader>
+                     {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                           {headerGroup.headers.map((header) => {
+                              return (
+                                 <TableHead
+                                    key={header.id}
+                                    className="[&:has([role=checkbox])]:pl-3"
+                                 >
+                                    {header.isPlaceholder
+                                       ? null
+                                       : flexRender(
+                                            header.column.columnDef.header,
+                                            header.getContext(),
+                                         )}
+                                 </TableHead>
+                              )
+                           })}
+                        </TableRow>
+                     ))}
+                  </TableHeader>
+                  <TableBody>
+                     {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                           <TableRow
+                              key={row.id}
+                              data-state={row.getIsSelected() && "selected"}
+                           >
+                              {row.getVisibleCells().map((cell) => (
+                                 <TableCell
+                                    key={cell.id}
+                                    className="[&:has([role=checkbox])]:pl-3"
+                                 >
+                                    {flexRender(
+                                       cell.column.columnDef.cell,
+                                       cell.getContext(),
+                                    )}
+                                 </TableCell>
+                              ))}
+                           </TableRow>
+                        ))
+                     ) : (
+                        <TableRow>
+                           <TableCell
+                              colSpan={columns.length}
+                              className="h-24 text-center"
+                           >
+                              No results.
+                           </TableCell>
+                        </TableRow>
+                     )}
+                  </TableBody>
+               </Table>
+            </div>
+            <div className="flex items-center justify-end space-x-2 pt-4">
+               <div className="text-muted-foreground flex-1 text-sm">
+                  {table.getFilteredSelectedRowModel().rows.length} of{" "}
+                  {table.getFilteredRowModel().rows.length} row(s) selected.
+               </div>
+               <div className="space-x-2">
+                  <Button
+                     variant="outline"
+                     size="sm"
+                     onClick={() => table.previousPage()}
+                     disabled={!table.getCanPreviousPage()}
+                  >
+                     Previous
+                  </Button>
+                  <Button
+                     variant="outline"
+                     size="sm"
+                     onClick={() => table.nextPage()}
+                     disabled={!table.getCanNextPage()}
+                  >
+                     Next
+                  </Button>
+               </div>
+            </div>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/index.tsx b/apps/web/registry/miami/examples/cards/index.tsx
new file mode 100644
index 00000000..bf8f34df
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/index.tsx
@@ -0,0 +1,63 @@
+import { CardsActivityGoal } from "~/registry/miami/examples/cards/activity-goal"
+import { CardsCalendar } from "~/registry/miami/examples/cards/calendar"
+import { CardsChat } from "~/registry/miami/examples/cards/chat"
+import { CardsCookieSettings } from "~/registry/miami/examples/cards/cookie-settings"
+import { CardsCreateAccount } from "~/registry/miami/examples/cards/create-account"
+import { CardsDataTable } from "~/registry/miami/examples/cards/data-table"
+import { CardsMetric } from "~/registry/miami/examples/cards/metric"
+import { CardsPaymentMethod } from "~/registry/miami/examples/cards/payment-method"
+import { CardsReportIssue } from "~/registry/miami/examples/cards/report-issue"
+import { CardsShare } from "~/registry/miami/examples/cards/share"
+import { CardsStats } from "~/registry/miami/examples/cards/stats"
+import { CardsTeamMembers } from "~/registry/miami/examples/cards/team-members"
+
+export default function CardsDemo() {
+   return (
+      <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
+         <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
+            <CardsStats />
+            <div className="grid gap-1 sm:grid-cols-[260px_1fr] md:hidden">
+               <CardsCalendar />
+               <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
+                  <CardsActivityGoal />
+               </div>
+               <div className="pt-3 sm:col-span-2 xl:pt-4">
+                  <CardsMetric />
+               </div>
+            </div>
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+               <div className="space-y-4 xl:space-y-4">
+                  <CardsTeamMembers />
+                  <CardsCookieSettings />
+                  <CardsPaymentMethod />
+               </div>
+               <div className="space-y-4 xl:space-y-4">
+                  <CardsChat />
+                  <CardsCreateAccount />
+                  <div className="hidden xl:block">
+                     <CardsReportIssue />
+                  </div>
+               </div>
+            </div>
+         </div>
+         <div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
+            <div className="hidden gap-1 sm:grid-cols-[260px_1fr] md:grid">
+               <CardsCalendar />
+               <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
+                  <CardsActivityGoal />
+               </div>
+               <div className="pt-3 sm:col-span-2 xl:pt-3">
+                  <CardsMetric />
+               </div>
+            </div>
+            <div className="hidden md:block">
+               <CardsDataTable />
+            </div>
+            <CardsShare />
+            <div className="xl:hidden">
+               <CardsReportIssue />
+            </div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/metric.tsx b/apps/web/registry/miami/examples/cards/metric.tsx
new file mode 100644
index 00000000..f4364df1
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/metric.tsx
@@ -0,0 +1,151 @@
+import { useTheme } from "next-themes"
+import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts"
+
+import { useConfig } from "~/hooks/use-config"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { baseColors } from "~/registry/registry-base-colors"
+
+const data = [
+   {
+      average: 400,
+      today: 240,
+   },
+   {
+      average: 300,
+      today: 139,
+   },
+   {
+      average: 200,
+      today: 980,
+   },
+   {
+      average: 278,
+      today: 390,
+   },
+   {
+      average: 189,
+      today: 480,
+   },
+   {
+      average: 239,
+      today: 380,
+   },
+   {
+      average: 349,
+      today: 430,
+   },
+]
+
+export function CardsMetric() {
+   const { theme: mode } = useTheme()
+   const [config] = useConfig()
+
+   const baseColor = baseColors.find(
+      (baseColor) => baseColor.name === config.theme,
+   )
+
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Exercise Minutes</CardTitle>
+            <CardDescription>
+               Your exercise minutes are ahead of where you normally are.
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="pb-4">
+            <div className="h-[200px]">
+               <ResponsiveContainer width="100%" height="100%">
+                  <LineChart
+                     data={data}
+                     margin={{
+                        top: 5,
+                        right: 10,
+                        left: 10,
+                        bottom: 0,
+                     }}
+                  >
+                     <Tooltip
+                        content={({ active, payload }) => {
+                           if (active && payload && payload.length) {
+                              return (
+                                 <div className="bg-background rounded-lg border p-2 shadow-sm">
+                                    <div className="grid grid-cols-2 gap-2">
+                                       <div className="flex flex-col">
+                                          <span className="text-muted-foreground text-[0.70rem] uppercase">
+                                             Average
+                                          </span>
+                                          <span className="text-muted-foreground font-bold">
+                                             {payload[0].value}
+                                          </span>
+                                       </div>
+                                       <div className="flex flex-col">
+                                          <span className="text-muted-foreground text-[0.70rem] uppercase">
+                                             Today
+                                          </span>
+                                          <span className="font-bold">
+                                             {payload[1].value}
+                                          </span>
+                                       </div>
+                                    </div>
+                                 </div>
+                              )
+                           }
+
+                           return null
+                        }}
+                     />
+                     <Line
+                        type="monotone"
+                        strokeWidth={2}
+                        dataKey="average"
+                        activeDot={{
+                           r: 6,
+                           style: {
+                              fill: "var(--theme-primary)",
+                              opacity: 0.25,
+                           },
+                        }}
+                        style={
+                           {
+                              stroke: "var(--theme-primary)",
+                              opacity: 0.25,
+                              "--theme-primary": `hsl(${
+                                 baseColor?.cssVars[
+                                    mode === "dark" ? "dark" : "light"
+                                 ].primary
+                              })`,
+                           } as React.CSSProperties
+                        }
+                     />
+                     <Line
+                        type="monotone"
+                        dataKey="today"
+                        strokeWidth={2}
+                        activeDot={{
+                           r: 8,
+                           style: { fill: "var(--theme-primary)" },
+                        }}
+                        style={
+                           {
+                              stroke: "var(--theme-primary)",
+                              "--theme-primary": `hsl(${
+                                 baseColor?.cssVars[
+                                    mode === "dark" ? "dark" : "light"
+                                 ].primary
+                              })`,
+                           } as React.CSSProperties
+                        }
+                     />
+                  </LineChart>
+               </ResponsiveContainer>
+            </div>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/payment-method.tsx b/apps/web/registry/miami/examples/cards/payment-method.tsx
new file mode 100644
index 00000000..db3ae287
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/payment-method.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import { Icons } from "~/components/icons"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/miami/ui/radio-group"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export function CardsPaymentMethod() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Payment Method</CardTitle>
+            <CardDescription>
+               Add a new payment method to your account.
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-6">
+            <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
+               <div>
+                  <RadioGroupItem
+                     value="card"
+                     id="card"
+                     className="peer sr-only"
+                     aria-label="Card"
+                  />
+                  <Label
+                     htmlFor="card"
+                     className="border-muted hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
+                  >
+                     <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        className="mb-3 size-6"
+                     >
+                        <rect width="20" height="14" x="2" y="5" rx="2" />
+                        <path d="M2 10h20" />
+                     </svg>
+                     Card
+                  </Label>
+               </div>
+               <div>
+                  <RadioGroupItem
+                     value="paypal"
+                     id="paypal"
+                     className="peer sr-only"
+                     aria-label="Paypal"
+                  />
+                  <Label
+                     htmlFor="paypal"
+                     className="border-muted hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
+                  >
+                     <Icons.paypal className="mb-3 size-6" />
+                     Paypal
+                  </Label>
+               </div>
+               <div>
+                  <RadioGroupItem
+                     value="apple"
+                     id="apple"
+                     className="peer sr-only"
+                     aria-label="Apple"
+                  />
+                  <Label
+                     htmlFor="apple"
+                     className="border-muted hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4 "
+                  >
+                     <Icons.apple className="mb-3 size-6" />
+                     Apple
+                  </Label>
+               </div>
+            </RadioGroup>
+            <div className="grid gap-2">
+               <Label htmlFor="name">Name</Label>
+               <Input id="name" placeholder="First Last" />
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor="city">City</Label>
+               <Input id="city" placeholder="" />
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor="number">Card number</Label>
+               <Input id="number" placeholder="" />
+            </div>
+            <div className="grid grid-cols-3 gap-4">
+               <div className="grid gap-2">
+                  <Label htmlFor="month">Expires</Label>
+                  <Select>
+                     <SelectTrigger id="month" aria-label="Month">
+                        <SelectValue placeholder="Month" />
+                     </SelectTrigger>
+                     <SelectContent>
+                        <SelectItem value="1">January</SelectItem>
+                        <SelectItem value="2">February</SelectItem>
+                        <SelectItem value="3">March</SelectItem>
+                        <SelectItem value="4">April</SelectItem>
+                        <SelectItem value="5">May</SelectItem>
+                        <SelectItem value="6">June</SelectItem>
+                        <SelectItem value="7">July</SelectItem>
+                        <SelectItem value="8">August</SelectItem>
+                        <SelectItem value="9">September</SelectItem>
+                        <SelectItem value="10">October</SelectItem>
+                        <SelectItem value="11">November</SelectItem>
+                        <SelectItem value="12">December</SelectItem>
+                     </SelectContent>
+                  </Select>
+               </div>
+               <div className="grid gap-2">
+                  <Label htmlFor="year">Year</Label>
+                  <Select>
+                     <SelectTrigger id="year" aria-label="Year">
+                        <SelectValue placeholder="Year" />
+                     </SelectTrigger>
+                     <SelectContent>
+                        {Array.from({ length: 10 }, (_, i) => (
+                           <SelectItem
+                              key={i}
+                              value={`${new Date().getFullYear() + i}`}
+                           >
+                              {new Date().getFullYear() + i}
+                           </SelectItem>
+                        ))}
+                     </SelectContent>
+                  </Select>
+               </div>
+               <div className="grid gap-2">
+                  <Label htmlFor="cvc">CVC</Label>
+                  <Input id="cvc" placeholder="CVC" />
+               </div>
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">Continue</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/report-issue.tsx b/apps/web/registry/miami/examples/cards/report-issue.tsx
new file mode 100644
index 00000000..71f5c05f
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/report-issue.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+import { Textarea } from "~/registry/miami/ui/textarea"
+
+export function CardsReportIssue() {
+   const id = React.useId()
+
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Report an issue</CardTitle>
+            <CardDescription>
+               What area are you having problems with?
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-6">
+            <div className="grid gap-4 sm:grid-cols-2">
+               <div className="grid gap-2">
+                  <Label htmlFor={`area-${id}`}>Area</Label>
+                  <Select defaultValue="billing">
+                     <SelectTrigger id={`area-${id}`} aria-label="Area">
+                        <SelectValue placeholder="Select" />
+                     </SelectTrigger>
+                     <SelectContent>
+                        <SelectItem value="team">Team</SelectItem>
+                        <SelectItem value="billing">Billing</SelectItem>
+                        <SelectItem value="account">Account</SelectItem>
+                        <SelectItem value="deployments">Deployments</SelectItem>
+                        <SelectItem value="support">Support</SelectItem>
+                     </SelectContent>
+                  </Select>
+               </div>
+               <div className="grid gap-2">
+                  <Label htmlFor={`security-level-${id}`}>Security Level</Label>
+                  <Select defaultValue="2">
+                     <SelectTrigger
+                        id={`security-level-${id}`}
+                        className="line-clamp-1 w-full truncate"
+                        aria-label="Security Level"
+                     >
+                        <SelectValue placeholder="Select level" />
+                     </SelectTrigger>
+                     <SelectContent>
+                        <SelectItem value="1">Severity 1 (Highest)</SelectItem>
+                        <SelectItem value="2">Severity 2</SelectItem>
+                        <SelectItem value="3">Severity 3</SelectItem>
+                        <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
+                     </SelectContent>
+                  </Select>
+               </div>
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor={`subject-${id}`}>Subject</Label>
+               <Input id={`subject-${id}`} placeholder="I need help with..." />
+            </div>
+            <div className="grid gap-2">
+               <Label htmlFor={`description-${id}`}>Description</Label>
+               <Textarea
+                  id={`description-${id}`}
+                  placeholder="Please include all information relevant to your issue."
+               />
+            </div>
+         </CardContent>
+         <CardFooter className="justify-between space-x-2">
+            <Button variant="ghost">Cancel</Button>
+            <Button>Submit</Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/share.tsx b/apps/web/registry/miami/examples/cards/share.tsx
new file mode 100644
index 00000000..ede29438
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/share.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+import { Separator } from "~/registry/miami/ui/separator"
+
+export function CardsShare() {
+   return (
+      <Card>
+         <CardHeader className="pb-3">
+            <CardTitle>Share this document</CardTitle>
+            <CardDescription>
+               Anyone with the link can view this document.
+            </CardDescription>
+         </CardHeader>
+         <CardContent>
+            <div className="flex space-x-2">
+               <Label htmlFor="link" className="sr-only">
+                  Link
+               </Label>
+               <Input
+                  id="link"
+                  value="http://example.com/link/to/document"
+                  readOnly
+               />
+               <Button className="shrink-0">Copy Link</Button>
+            </div>
+            <Separator className="my-4" />
+            <div className="space-y-4">
+               <h4 className="text-sm font-medium">People with access</h4>
+               <div className="grid gap-6">
+                  <div className="flex items-center justify-between space-x-4">
+                     <div className="flex items-center space-x-4">
+                        <Avatar>
+                           <AvatarImage src="/avatars/03.png" alt="Image" />
+                           <AvatarFallback>OM</AvatarFallback>
+                        </Avatar>
+                        <div>
+                           <p className="text-sm font-medium leading-none">
+                              Olivia Martin
+                           </p>
+                           <p className="text-muted-foreground text-sm">
+                              m@example.com
+                           </p>
+                        </div>
+                     </div>
+                     <Select defaultValue="edit">
+                        <SelectTrigger
+                           className="ml-auto w-[110px]"
+                           aria-label="Edit"
+                        >
+                           <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                           <SelectItem value="edit">Can edit</SelectItem>
+                           <SelectItem value="view">Can view</SelectItem>
+                        </SelectContent>
+                     </Select>
+                  </div>
+                  <div className="flex items-center justify-between space-x-4">
+                     <div className="flex items-center space-x-4">
+                        <Avatar>
+                           <AvatarImage src="/avatars/05.png" alt="Image" />
+                           <AvatarFallback>IN</AvatarFallback>
+                        </Avatar>
+                        <div>
+                           <p className="text-sm font-medium leading-none">
+                              Isabella Nguyen
+                           </p>
+                           <p className="text-muted-foreground text-sm">
+                              b@example.com
+                           </p>
+                        </div>
+                     </div>
+                     <Select defaultValue="view">
+                        <SelectTrigger
+                           className="ml-auto w-[110px]"
+                           aria-label="Edit"
+                        >
+                           <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                           <SelectItem value="edit">Can edit</SelectItem>
+                           <SelectItem value="view">Can view</SelectItem>
+                        </SelectContent>
+                     </Select>
+                  </div>
+                  <div className="flex items-center justify-between space-x-4">
+                     <div className="flex items-center space-x-4">
+                        <Avatar>
+                           <AvatarImage src="/avatars/01.png" alt="Image" />
+                           <AvatarFallback>SD</AvatarFallback>
+                        </Avatar>
+                        <div>
+                           <p className="text-sm font-medium leading-none">
+                              Sofia Davis
+                           </p>
+                           <p className="text-muted-foreground text-sm">
+                              p@example.com
+                           </p>
+                        </div>
+                     </div>
+                     <Select defaultValue="view">
+                        <SelectTrigger
+                           className="ml-auto w-[110px]"
+                           aria-label="Edit"
+                        >
+                           <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                           <SelectItem value="edit">Can edit</SelectItem>
+                           <SelectItem value="view">Can view</SelectItem>
+                        </SelectContent>
+                     </Select>
+                  </div>
+               </div>
+            </div>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/stats.tsx b/apps/web/registry/miami/examples/cards/stats.tsx
new file mode 100644
index 00000000..131a716d
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/stats.tsx
@@ -0,0 +1,142 @@
+import { useTheme } from "next-themes"
+import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts"
+
+import { useConfig } from "~/hooks/use-config"
+import {
+   Card,
+   CardContent,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { baseColors } from "~/registry/registry-base-colors"
+
+const data = [
+   {
+      revenue: 10400,
+      subscription: 240,
+   },
+   {
+      revenue: 14405,
+      subscription: 300,
+   },
+   {
+      revenue: 9400,
+      subscription: 200,
+   },
+   {
+      revenue: 8200,
+      subscription: 278,
+   },
+   {
+      revenue: 7000,
+      subscription: 189,
+   },
+   {
+      revenue: 9600,
+      subscription: 239,
+   },
+   {
+      revenue: 11244,
+      subscription: 278,
+   },
+   {
+      revenue: 26475,
+      subscription: 189,
+   },
+]
+
+export function CardsStats() {
+   const { theme: mode } = useTheme()
+   const [config] = useConfig()
+
+   const baseColor = baseColors.find(
+      (baseColor) => baseColor.name === config.theme,
+   )
+
+   return (
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
+         <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+               <CardTitle className="text-sm font-normal">
+                  Total Revenue
+               </CardTitle>
+            </CardHeader>
+            <CardContent>
+               <div className="text-2xl font-bold">$15,231.89</div>
+               <p className="text-muted-foreground text-xs">
+                  +20.1% from last month
+               </p>
+               <div className="h-[80px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                     <LineChart
+                        data={data}
+                        margin={{
+                           top: 5,
+                           right: 10,
+                           left: 10,
+                           bottom: 0,
+                        }}
+                     >
+                        <Line
+                           type="monotone"
+                           strokeWidth={2}
+                           dataKey="revenue"
+                           activeDot={{
+                              r: 6,
+                              style: {
+                                 fill: "var(--theme-primary)",
+                                 opacity: 0.25,
+                              },
+                           }}
+                           style={
+                              {
+                                 stroke: "var(--theme-primary)",
+                                 "--theme-primary": `hsl(${
+                                    baseColor?.cssVars[
+                                       mode === "dark" ? "dark" : "light"
+                                    ].primary
+                                 })`,
+                              } as React.CSSProperties
+                           }
+                        />
+                     </LineChart>
+                  </ResponsiveContainer>
+               </div>
+            </CardContent>
+         </Card>
+         <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+               <CardTitle className="text-sm font-normal">
+                  Subscriptions
+               </CardTitle>
+            </CardHeader>
+            <CardContent>
+               <div className="text-2xl font-bold">+2350</div>
+               <p className="text-muted-foreground text-xs">
+                  +180.1% from last month
+               </p>
+               <div className="mt-4 h-[80px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                     <BarChart data={data}>
+                        <Bar
+                           dataKey="subscription"
+                           style={
+                              {
+                                 fill: "var(--theme-primary)",
+                                 opacity: 1,
+                                 "--theme-primary": `hsl(${
+                                    baseColor?.cssVars[
+                                       mode === "dark" ? "dark" : "light"
+                                    ].primary
+                                 })`,
+                              } as React.CSSProperties
+                           }
+                        />
+                     </BarChart>
+                  </ResponsiveContainer>
+               </div>
+            </CardContent>
+         </Card>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cards/team-members.tsx b/apps/web/registry/miami/examples/cards/team-members.tsx
new file mode 100644
index 00000000..dba42de4
--- /dev/null
+++ b/apps/web/registry/miami/examples/cards/team-members.tsx
@@ -0,0 +1,215 @@
+"use client"
+
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/miami/ui/command"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+export function CardsTeamMembers() {
+   return (
+      <Card>
+         <CardHeader>
+            <CardTitle>Team Members</CardTitle>
+            <CardDescription>
+               Invite your team members to collaborate.
+            </CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-6">
+            <div className="flex items-center justify-between space-x-4">
+               <div className="flex items-center space-x-4">
+                  <Avatar className="size-8">
+                     <AvatarImage src="/avatars/01.png" alt="Image" />
+                     <AvatarFallback>OM</AvatarFallback>
+                  </Avatar>
+                  <div>
+                     <p className="text-sm font-medium leading-none">
+                        Sofia Davis
+                     </p>
+                     <p className="text-muted-foreground text-sm">
+                        m@example.com
+                     </p>
+                  </div>
+               </div>
+               <Popover>
+                  <PopoverTrigger asChild>
+                     <Button variant="outline" size="sm" className="ml-auto">
+                        Owner{" "}
+                        <ChevronDownIcon className="text-muted-foreground ml-2 size-4" />
+                     </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="end">
+                     <Command>
+                        <CommandInput placeholder="Select new role..." />
+                        <CommandList>
+                           <CommandEmpty>No roles found.</CommandEmpty>
+                           <CommandGroup>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Viewer</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view and comment.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Developer</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view, comment and edit.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Billing</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view, comment and manage billing.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Owner</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Admin-level access to all resources.
+                                 </p>
+                              </CommandItem>
+                           </CommandGroup>
+                        </CommandList>
+                     </Command>
+                  </PopoverContent>
+               </Popover>
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+               <div className="flex items-center space-x-4">
+                  <Avatar className="size-8">
+                     <AvatarImage src="/avatars/02.png" alt="Image" />
+                     <AvatarFallback>JL</AvatarFallback>
+                  </Avatar>
+                  <div>
+                     <p className="text-sm font-medium leading-none">
+                        Jackson Lee
+                     </p>
+                     <p className="text-muted-foreground text-sm">
+                        p@example.com
+                     </p>
+                  </div>
+               </div>
+               <Popover>
+                  <PopoverTrigger asChild>
+                     <Button variant="outline" size="sm" className="ml-auto">
+                        Member{" "}
+                        <ChevronDownIcon className="text-muted-foreground ml-2 size-4" />
+                     </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="end">
+                     <Command>
+                        <CommandInput placeholder="Select new role..." />
+                        <CommandList>
+                           <CommandEmpty>No roles found.</CommandEmpty>
+                           <CommandGroup className="p-1.5">
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Viewer</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view and comment.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Developer</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view, comment and edit.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Billing</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view, comment and manage billing.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Owner</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Admin-level access to all resources.
+                                 </p>
+                              </CommandItem>
+                           </CommandGroup>
+                        </CommandList>
+                     </Command>
+                  </PopoverContent>
+               </Popover>
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+               <div className="flex items-center space-x-4">
+                  <Avatar className="size-8">
+                     <AvatarImage src="/avatars/03.png" alt="Image" />
+                     <AvatarFallback>IN</AvatarFallback>
+                  </Avatar>
+                  <div>
+                     <p className="text-sm font-medium leading-none">
+                        Isabella Nguyen
+                     </p>
+                     <p className="text-muted-foreground text-sm">
+                        i@example.com
+                     </p>
+                  </div>
+               </div>
+               <Popover>
+                  <PopoverTrigger asChild>
+                     <Button variant="outline" size="sm" className="ml-auto">
+                        Member{" "}
+                        <ChevronDownIcon className="text-muted-foreground ml-2 size-4" />
+                     </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="end">
+                     <Command>
+                        <CommandInput placeholder="Select new role..." />
+                        <CommandList>
+                           <CommandEmpty>No roles found.</CommandEmpty>
+                           <CommandGroup className="p-1.5">
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Viewer</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view and comment.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Developer</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view, comment and edit.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Billing</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Can view, comment and manage billing.
+                                 </p>
+                              </CommandItem>
+                              <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                                 <p>Owner</p>
+                                 <p className="text-muted-foreground text-sm">
+                                    Admin-level access to all resources.
+                                 </p>
+                              </CommandItem>
+                           </CommandGroup>
+                        </CommandList>
+                     </Command>
+                  </PopoverContent>
+               </Popover>
+            </div>
+         </CardContent>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/examples/carousel-api.tsx b/apps/web/registry/miami/examples/carousel-api.tsx
new file mode 100644
index 00000000..dc3f020d
--- /dev/null
+++ b/apps/web/registry/miami/examples/carousel-api.tsx
@@ -0,0 +1,54 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/miami/ui/card"
+import {
+   Carousel,
+   type CarouselApi,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/miami/ui/carousel"
+
+export default function CarouselDApiDemo() {
+   const [api, setApi] = React.useState<CarouselApi>()
+   const [current, setCurrent] = React.useState(0)
+   const [count, setCount] = React.useState(0)
+
+   React.useEffect(() => {
+      if (!api) return
+
+      setCount(api.scrollSnapList().length)
+      setCurrent(api.selectedScrollSnap() + 1)
+
+      api.on("select", () => {
+         setCurrent(api.selectedScrollSnap() + 1)
+      })
+   }, [api])
+
+   return (
+      <div>
+         <Carousel setApi={setApi} className="w-full max-w-xs">
+            <CarouselContent>
+               {Array.from({ length: 5 }).map((_, index) => (
+                  <CarouselItem key={index}>
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-4xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </CarouselItem>
+               ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+         </Carousel>
+         <div className="text-muted-foreground py-2 text-center text-sm">
+            Slide {current} of
+            {count}
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/carousel-demo.tsx b/apps/web/registry/miami/examples/carousel-demo.tsx
new file mode 100644
index 00000000..6162ad13
--- /dev/null
+++ b/apps/web/registry/miami/examples/carousel-demo.tsx
@@ -0,0 +1,34 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/miami/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/miami/ui/carousel"
+
+export default function CarouselDemo() {
+   return (
+      <Carousel className="w-full max-w-xs">
+         <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem key={index}>
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-4xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/miami/examples/carousel-dots.tsx b/apps/web/registry/miami/examples/carousel-dots.tsx
new file mode 100644
index 00000000..de4db6d1
--- /dev/null
+++ b/apps/web/registry/miami/examples/carousel-dots.tsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/miami/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselDots,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/miami/ui/carousel"
+
+export default function CarouselSize() {
+   return (
+      <Carousel
+         opts={{
+            align: "start",
+         }}
+         className="w-full max-w-sm"
+      >
+         <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-3xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselDots />
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/miami/examples/carousel-orientation.tsx b/apps/web/registry/miami/examples/carousel-orientation.tsx
new file mode 100644
index 00000000..9e702438
--- /dev/null
+++ b/apps/web/registry/miami/examples/carousel-orientation.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/miami/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/miami/ui/carousel"
+
+export default function CarouselOrientation() {
+   return (
+      <Carousel
+         opts={{
+            align: "start",
+         }}
+         orientation="vertical"
+         className="w-full max-w-xs"
+      >
+         <CarouselContent className="-mt-1 h-[200px]">
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem key={index} className="pt-1 md:basis-1/2">
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex items-center justify-center p-6">
+                           <span className="text-3xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/miami/examples/carousel-plugin.tsx b/apps/web/registry/miami/examples/carousel-plugin.tsx
new file mode 100644
index 00000000..42f69175
--- /dev/null
+++ b/apps/web/registry/miami/examples/carousel-plugin.tsx
@@ -0,0 +1,44 @@
+import Autoplay from "embla-carousel-autoplay"
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/miami/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/miami/ui/carousel"
+
+export default function CarouselPlugin() {
+   const plugin = React.useRef(
+      Autoplay({ delay: 2000, stopOnInteraction: true }),
+   )
+
+   return (
+      <Carousel
+         plugins={[plugin.current]}
+         className="w-full max-w-xs"
+         onMouseEnter={plugin.current.stop}
+         onMouseLeave={plugin.current.reset}
+      >
+         <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem key={index}>
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-4xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/miami/examples/carousel-size.tsx b/apps/web/registry/miami/examples/carousel-size.tsx
new file mode 100644
index 00000000..3c6b615d
--- /dev/null
+++ b/apps/web/registry/miami/examples/carousel-size.tsx
@@ -0,0 +1,39 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/miami/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/miami/ui/carousel"
+
+export default function CarouselSize() {
+   return (
+      <Carousel
+         opts={{
+            align: "start",
+         }}
+         className="w-full max-w-sm"
+      >
+         <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-3xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/miami/examples/carousel-spacing.tsx b/apps/web/registry/miami/examples/carousel-spacing.tsx
new file mode 100644
index 00000000..e8c44d66
--- /dev/null
+++ b/apps/web/registry/miami/examples/carousel-spacing.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/miami/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/miami/ui/carousel"
+
+export default function CarouselSpacing() {
+   return (
+      <Carousel className="w-full max-w-sm">
+         <CarouselContent className="-ml-1">
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem
+                  key={index}
+                  className="pl-1 md:basis-1/2 lg:basis-1/3"
+               >
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-2xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/miami/examples/chart-bar-demo-axis.tsx b/apps/web/registry/miami/examples/chart-bar-demo-axis.tsx
new file mode 100644
index 00000000..97d52842
--- /dev/null
+++ b/apps/web/registry/miami/examples/chart-bar-demo-axis.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import type { ChartConfig } from "~/registry/miami/ui/chart"
+import { ChartContainer } from "~/registry/miami/ui/chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "#2563eb",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "#60a5fa",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+         <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+               dataKey="month"
+               tickLine={false}
+               tickMargin={10}
+               axisLine={false}
+               tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+         </BarChart>
+      </ChartContainer>
+   )
+}
diff --git a/apps/web/registry/miami/examples/chart-bar-demo-grid.tsx b/apps/web/registry/miami/examples/chart-bar-demo-grid.tsx
new file mode 100644
index 00000000..9527584e
--- /dev/null
+++ b/apps/web/registry/miami/examples/chart-bar-demo-grid.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid } from "recharts"
+
+import type { ChartConfig } from "~/registry/miami/ui/chart"
+import { ChartContainer } from "~/registry/miami/ui/chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "#2563eb",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "#60a5fa",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+         <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+         </BarChart>
+      </ChartContainer>
+   )
+}
diff --git a/apps/web/registry/miami/examples/chart-bar-demo-legend.tsx b/apps/web/registry/miami/examples/chart-bar-demo-legend.tsx
new file mode 100644
index 00000000..f35e71aa
--- /dev/null
+++ b/apps/web/registry/miami/examples/chart-bar-demo-legend.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import type { ChartConfig } from "~/registry/miami/ui/chart"
+import {
+   ChartContainer,
+   ChartLegend,
+   ChartLegendContent,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "#2563eb",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "#60a5fa",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+         <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+               dataKey="month"
+               tickLine={false}
+               tickMargin={10}
+               axisLine={false}
+               tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+         </BarChart>
+      </ChartContainer>
+   )
+}
diff --git a/apps/web/registry/miami/examples/chart-bar-demo-tooltip.tsx b/apps/web/registry/miami/examples/chart-bar-demo-tooltip.tsx
new file mode 100644
index 00000000..ff989054
--- /dev/null
+++ b/apps/web/registry/miami/examples/chart-bar-demo-tooltip.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import type { ChartConfig } from "~/registry/miami/ui/chart"
+import {
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami/ui/chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "#2563eb",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "#60a5fa",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+         <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+               dataKey="month"
+               tickLine={false}
+               tickMargin={10}
+               axisLine={false}
+               tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+         </BarChart>
+      </ChartContainer>
+   )
+}
diff --git a/apps/web/registry/miami/examples/chart-bar-demo.tsx b/apps/web/registry/miami/examples/chart-bar-demo.tsx
new file mode 100644
index 00000000..7cfc049c
--- /dev/null
+++ b/apps/web/registry/miami/examples/chart-bar-demo.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import { Bar, BarChart } from "recharts"
+
+import type { ChartConfig } from "~/registry/miami/ui/chart"
+import { ChartContainer } from "~/registry/miami/ui/chart"
+
+const chartData = [
+   { month: "January", desktop: 186, mobile: 80 },
+   { month: "February", desktop: 305, mobile: 200 },
+   { month: "March", desktop: 237, mobile: 120 },
+   { month: "April", desktop: 73, mobile: 190 },
+   { month: "May", desktop: 209, mobile: 130 },
+   { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+   desktop: {
+      label: "Desktop",
+      color: "#2563eb",
+   },
+   mobile: {
+      label: "Mobile",
+      color: "#60a5fa",
+   },
+} satisfies ChartConfig
+
+export default function Component() {
+   return (
+      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+         <BarChart accessibilityLayer data={chartData}>
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+         </BarChart>
+      </ChartContainer>
+   )
+}
diff --git a/apps/web/registry/miami/examples/chart-tooltip-demo.tsx b/apps/web/registry/miami/examples/chart-tooltip-demo.tsx
new file mode 100644
index 00000000..bb599d7b
--- /dev/null
+++ b/apps/web/registry/miami/examples/chart-tooltip-demo.tsx
@@ -0,0 +1,225 @@
+"use client"
+
+import type * as React from "react"
+
+import { ny } from "~/lib/utils"
+
+export default function Component() {
+   return (
+      <div className="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
+         <div>
+            <div className="absolute left-[-35px] top-[45px] z-10 text-sm font-medium">
+               Label
+            </div>
+            <svg
+               xmlns="http://www.w3.org/2000/svg"
+               viewBox="0 0 193 40"
+               width="50"
+               height="12"
+               fill="none"
+               className="absolute left-[5px] top-[50px] z-10"
+            >
+               <g clip-path="url(#a)">
+                  <path
+                     fill="currentColor"
+                     d="M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z"
+                  />
+               </g>
+               <defs>
+                  <clipPath id="a">
+                     <path fill="currentColor" d="M0 0h193v40H0z" />
+                  </clipPath>
+               </defs>
+            </svg>
+            <TooltipDemo
+               label="Page Views"
+               payload={[
+                  { name: "Desktop", value: 186, fill: "hsl(var(--chart-1))" },
+                  { name: "Mobile", value: 80, fill: "hsl(var(--chart-2))" },
+               ]}
+               className="w-32"
+            />
+         </div>
+         <div className="items-end">
+            <div className="absolute left-[122px] top-0 z-10 text-sm font-medium">
+               Name
+            </div>
+            <svg
+               xmlns="http://www.w3.org/2000/svg"
+               width="35"
+               height="42"
+               fill="none"
+               viewBox="0 0 122 148"
+               className="absolute left-[85px] top-[10px] z-10 -scale-x-100"
+            >
+               <g clip-path="url(#ab)">
+                  <path
+                     fill="currentColor"
+                     d="M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z"
+                  />
+               </g>
+               <defs>
+                  <clipPath id="ab">
+                     <path fill="currentColor" d="M0 0h122v148H0z" />
+                  </clipPath>
+               </defs>
+            </svg>
+            <TooltipDemo
+               label="Browser"
+               hideLabel
+               payload={[
+                  { name: "Chrome", value: 1286, fill: "hsl(var(--chart-3))" },
+                  { name: "Firefox", value: 1000, fill: "hsl(var(--chart-4))" },
+               ]}
+               indicator="dashed"
+               className="w-32"
+            />
+         </div>
+         <div className="!hidden md:!flex">
+            <TooltipDemo
+               label="Page Views"
+               payload={[
+                  {
+                     name: "Desktop",
+                     value: 12486,
+                     fill: "hsl(var(--chart-3))",
+                  },
+               ]}
+               className="w-36"
+               indicator="line"
+            />
+         </div>
+         <div className="!items-start !justify-start">
+            <div className="absolute left-[50px] top-[60px] z-10 text-sm font-medium">
+               Indicator
+            </div>
+            <TooltipDemo
+               label="Browser"
+               hideLabel
+               payload={[
+                  { name: "Chrome", value: 1286, fill: "hsl(var(--chart-1))" },
+               ]}
+               indicator="dot"
+               className="w-32"
+            />
+            <svg
+               xmlns="http://www.w3.org/2000/svg"
+               width="15"
+               height="34"
+               fill="none"
+               viewBox="0 0 75 175"
+               className="absolute left-[30px] top-[38px] z-10 rotate-[-40deg]"
+            >
+               <g clip-path="url(#abc)">
+                  <path
+                     fill="currentColor"
+                     d="M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z"
+                  />
+               </g>
+               <defs>
+                  <clipPath id="abc">
+                     <path fill="currentColor" d="M0 0h75v175H0z" />
+                  </clipPath>
+               </defs>
+            </svg>
+         </div>
+      </div>
+   )
+}
+
+function TooltipDemo({
+   indicator = "dot",
+   label,
+   payload,
+   hideLabel,
+   hideIndicator,
+   className,
+}: {
+   label: string
+   hideLabel?: boolean
+   hideIndicator?: boolean
+   indicator?: "line" | "dot" | "dashed"
+   payload: {
+      name: string
+      value: number
+      fill: string
+   }[]
+   nameKey?: string
+   labelKey?: string
+} & React.ComponentProps<"div">) {
+   const tooltipLabel = hideLabel ? null : (
+      <div className="font-medium">{label}</div>
+   )
+
+   if (!payload?.length) {
+      return null
+   }
+
+   const nestLabel = payload.length === 1 && indicator !== "dot"
+
+   return (
+      <div
+         className={ny(
+            "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5",
+            className,
+         )}
+      >
+         {!nestLabel ? tooltipLabel : null}
+         <div className="grid gap-1.5">
+            {payload.map((item, index) => {
+               const indicatorColor = item.fill
+
+               return (
+                  <div
+                     key={index}
+                     className={ny(
+                        "[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5",
+                        indicator === "dot" && "items-center",
+                     )}
+                  >
+                     <>
+                        {!hideIndicator && (
+                           <div
+                              className={ny(
+                                 "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                                 {
+                                    "h-2.5 w-2.5": indicator === "dot",
+                                    "w-1": indicator === "line",
+                                    "w-0 border-[1.5px] border-dashed bg-transparent":
+                                       indicator === "dashed",
+                                    "my-0.5":
+                                       nestLabel && indicator === "dashed",
+                                 },
+                              )}
+                              style={
+                                 {
+                                    "--color-bg": indicatorColor,
+                                    "--color-border": indicatorColor,
+                                 } as React.CSSProperties
+                              }
+                           />
+                        )}
+                        <div
+                           className={ny(
+                              "flex flex-1 justify-between leading-none",
+                              nestLabel ? "items-end" : "items-center",
+                           )}
+                        >
+                           <div className="grid gap-1.5">
+                              {nestLabel ? tooltipLabel : null}
+                              <span className="text-muted-foreground">
+                                 {item.name}
+                              </span>
+                           </div>
+                           <span className="text-foreground font-mono font-medium tabular-nums">
+                              {item.value.toLocaleString()}
+                           </span>
+                        </div>
+                     </>
+                  </div>
+               )
+            })}
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/checkbox-demo.tsx b/apps/web/registry/miami/examples/checkbox-demo.tsx
new file mode 100644
index 00000000..f19cd6a7
--- /dev/null
+++ b/apps/web/registry/miami/examples/checkbox-demo.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+
+export default function CheckboxDemo() {
+   return (
+      <div className="flex items-center space-x-2">
+         <Checkbox id="terms" />
+         <label
+            htmlFor="terms"
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+         >
+            Accept terms and conditions
+         </label>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/checkbox-disabled.tsx b/apps/web/registry/miami/examples/checkbox-disabled.tsx
new file mode 100644
index 00000000..33db82bb
--- /dev/null
+++ b/apps/web/registry/miami/examples/checkbox-disabled.tsx
@@ -0,0 +1,15 @@
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+
+export default function CheckboxDisabled() {
+   return (
+      <div className="flex items-center space-x-2">
+         <Checkbox id="terms2" disabled />
+         <label
+            htmlFor="terms2"
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+         >
+            Accept terms and conditions
+         </label>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/checkbox-form-multiple.tsx b/apps/web/registry/miami/examples/checkbox-form-multiple.tsx
new file mode 100644
index 00000000..6a17a2b2
--- /dev/null
+++ b/apps/web/registry/miami/examples/checkbox-form-multiple.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/miami/ui/button"
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/miami/ui/form"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const items = [
+   {
+      id: "recents",
+      label: "Recents",
+   },
+   {
+      id: "home",
+      label: "Home",
+   },
+   {
+      id: "applications",
+      label: "Applications",
+   },
+   {
+      id: "desktop",
+      label: "Desktop",
+   },
+   {
+      id: "downloads",
+      label: "Downloads",
+   },
+   {
+      id: "documents",
+      label: "Documents",
+   },
+] as const
+
+const FormSchema = z.object({
+   items: z.array(z.string()).refine((value) => value.some((item) => item), {
+      message: "You have to select at least one item.",
+   }),
+})
+
+export default function CheckboxReactHookFormMultiple() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+         items: ["recents", "home"],
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+               control={form.control}
+               name="items"
+               render={() => (
+                  <FormItem>
+                     <div className="mb-4">
+                        <FormLabel className="text-base">Sidebar</FormLabel>
+                        <FormDescription>
+                           Select the items you want to display in the sidebar.
+                        </FormDescription>
+                     </div>
+                     {items.map((item) => (
+                        <FormField
+                           key={item.id}
+                           control={form.control}
+                           name="items"
+                           render={({ field }) => {
+                              return (
+                                 <FormItem
+                                    key={item.id}
+                                    className="flex flex-row items-start space-x-3 space-y-0"
+                                 >
+                                    <FormControl>
+                                       <Checkbox
+                                          checked={field.value?.includes(
+                                             item.id,
+                                          )}
+                                          onCheckedChange={(checked) => {
+                                             return checked
+                                                ? field.onChange([
+                                                     ...field.value,
+                                                     item.id,
+                                                  ])
+                                                : field.onChange(
+                                                     field.value?.filter(
+                                                        (value) =>
+                                                           value !== item.id,
+                                                     ),
+                                                  )
+                                          }}
+                                       />
+                                    </FormControl>
+                                    <FormLabel className="text-sm font-normal">
+                                       {item.label}
+                                    </FormLabel>
+                                 </FormItem>
+                              )
+                           }}
+                        />
+                     ))}
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/checkbox-form-single.tsx b/apps/web/registry/miami/examples/checkbox-form-single.tsx
new file mode 100644
index 00000000..f2f0d1c8
--- /dev/null
+++ b/apps/web/registry/miami/examples/checkbox-form-single.tsx
@@ -0,0 +1,76 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import Link from "next/link"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/miami/ui/button"
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+} from "~/registry/miami/ui/form"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const FormSchema = z.object({
+   mobile: z.boolean().default(false).optional(),
+})
+
+export default function CheckboxReactHookFormSingle() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+         mobile: true,
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+               control={form.control}
+               name="mobile"
+               render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow">
+                     <FormControl>
+                        <Checkbox
+                           checked={field.value}
+                           onCheckedChange={field.onChange}
+                        />
+                     </FormControl>
+                     <div className="space-y-1 leading-none">
+                        <FormLabel>
+                           Use different settings for my mobile devices
+                        </FormLabel>
+                        <FormDescription>
+                           You can manage your mobile notifications in the{" "}
+                           <Link href="/examples/forms">mobile settings</Link>{" "}
+                           page.
+                        </FormDescription>
+                     </div>
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/checkbox-with-text.tsx b/apps/web/registry/miami/examples/checkbox-with-text.tsx
new file mode 100644
index 00000000..9dfadac9
--- /dev/null
+++ b/apps/web/registry/miami/examples/checkbox-with-text.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+
+export default function CheckboxWithText() {
+   return (
+      <div className="items-top flex space-x-2">
+         <Checkbox id="terms1" />
+         <div className="grid gap-1.5 leading-none">
+            <label
+               htmlFor="terms1"
+               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+               Accept terms and conditions
+            </label>
+            <p className="text-muted-foreground text-sm">
+               You agree to our Terms of Service and Privacy Policy.
+            </p>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/collapsible-demo.tsx b/apps/web/registry/miami/examples/collapsible-demo.tsx
new file mode 100644
index 00000000..07f06802
--- /dev/null
+++ b/apps/web/registry/miami/examples/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import { CaretSortIcon } from "@radix-ui/react-icons"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+
+export default function CollapsibleDemo() {
+   const [isOpen, setIsOpen] = React.useState(false)
+
+   return (
+      <Collapsible
+         open={isOpen}
+         onOpenChange={setIsOpen}
+         className="w-[350px] space-y-2"
+      >
+         <div className="flex items-center justify-between space-x-4 px-4">
+            <h4 className="text-sm font-semibold">
+               @peduarte starred 3 repositories
+            </h4>
+            <CollapsibleTrigger asChild>
+               <Button variant="ghost" size="sm">
+                  <CaretSortIcon className="size-4" />
+                  <span className="sr-only">Toggle</span>
+               </Button>
+            </CollapsibleTrigger>
+         </div>
+         <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+            @radix-ui/primitives
+         </div>
+         <CollapsibleContent className="space-y-2">
+            <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+               @radix-ui/colors
+            </div>
+            <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+               @stitches/react
+            </div>
+         </CollapsibleContent>
+      </Collapsible>
+   )
+}
diff --git a/apps/web/registry/miami/examples/combobox-demo.tsx b/apps/web/registry/miami/examples/combobox-demo.tsx
new file mode 100644
index 00000000..8fb0f8bf
--- /dev/null
+++ b/apps/web/registry/miami/examples/combobox-demo.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { Check, ChevronsUpDown } from "lucide-react"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/miami/ui/command"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+const frameworks = [
+   {
+      value: "next.js",
+      label: "Next.js",
+   },
+   {
+      value: "sveltekit",
+      label: "SvelteKit",
+   },
+   {
+      value: "nuxt.js",
+      label: "Nuxt.js",
+   },
+   {
+      value: "remix",
+      label: "Remix",
+   },
+   {
+      value: "astro",
+      label: "Astro",
+   },
+]
+
+export default function ComboboxDemo() {
+   const [open, setOpen] = React.useState(false)
+   const [value, setValue] = React.useState("")
+
+   return (
+      <Popover open={open} onOpenChange={setOpen}>
+         <PopoverTrigger asChild>
+            <Button
+               variant="outline"
+               role="combobox"
+               aria-expanded={open}
+               className="w-[200px] justify-between"
+            >
+               {value
+                  ? frameworks.find((framework) => framework.value === value)
+                       ?.label
+                  : "Select framework..."}
+               <ChevronsUpDown className="opacity-50" />
+            </Button>
+         </PopoverTrigger>
+         <PopoverContent className="w-[200px] p-0">
+            <Command>
+               <CommandInput
+                  placeholder="Search framework..."
+                  className="h-9"
+               />
+               <CommandList>
+                  <CommandEmpty>No framework found.</CommandEmpty>
+                  <CommandGroup>
+                     {frameworks.map((framework) => (
+                        <CommandItem
+                           key={framework.value}
+                           value={framework.value}
+                           onSelect={(currentValue) => {
+                              setValue(
+                                 currentValue === value ? "" : currentValue,
+                              )
+                              setOpen(false)
+                           }}
+                        >
+                           {framework.label}
+                           <Check
+                              className={ny(
+                                 "ml-auto",
+                                 value === framework.value
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                              )}
+                           />
+                        </CommandItem>
+                     ))}
+                  </CommandGroup>
+               </CommandList>
+            </Command>
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/miami/examples/combobox-dropdown-menu.tsx b/apps/web/registry/miami/examples/combobox-dropdown-menu.tsx
new file mode 100644
index 00000000..97586a92
--- /dev/null
+++ b/apps/web/registry/miami/examples/combobox-dropdown-menu.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { MoreHorizontal } from "lucide-react"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/miami/ui/command"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuSub,
+   DropdownMenuSubContent,
+   DropdownMenuSubTrigger,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+
+const labels = [
+   "feature",
+   "bug",
+   "enhancement",
+   "documentation",
+   "design",
+   "question",
+   "maintenance",
+]
+
+export default function ComboboxDropdownMenu() {
+   const [label, setLabel] = React.useState("feature")
+   const [open, setOpen] = React.useState(false)
+
+   return (
+      <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+         <p className="text-sm font-medium leading-none">
+            <span className="bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs">
+               {label}
+            </span>
+            <span className="text-muted-foreground">Create a new project</span>
+         </p>
+         <DropdownMenu open={open} onOpenChange={setOpen}>
+            <DropdownMenuTrigger asChild>
+               <Button variant="ghost" size="sm">
+                  <MoreHorizontal />
+               </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-[200px]">
+               <DropdownMenuLabel>Actions</DropdownMenuLabel>
+               <DropdownMenuGroup>
+                  <DropdownMenuItem>Assign to...</DropdownMenuItem>
+                  <DropdownMenuItem>Set due date...</DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuSub>
+                     <DropdownMenuSubTrigger>
+                        Apply label
+                     </DropdownMenuSubTrigger>
+                     <DropdownMenuSubContent className="p-0">
+                        <Command>
+                           <CommandInput
+                              placeholder="Filter label..."
+                              autoFocus
+                              className="h-9"
+                           />
+                           <CommandList>
+                              <CommandEmpty>No label found.</CommandEmpty>
+                              <CommandGroup>
+                                 {labels.map((label) => (
+                                    <CommandItem
+                                       key={label}
+                                       value={label}
+                                       onSelect={(value) => {
+                                          setLabel(value)
+                                          setOpen(false)
+                                       }}
+                                    >
+                                       {label}
+                                    </CommandItem>
+                                 ))}
+                              </CommandGroup>
+                           </CommandList>
+                        </Command>
+                     </DropdownMenuSubContent>
+                  </DropdownMenuSub>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="text-red-600">
+                     Delete
+                     <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+                  </DropdownMenuItem>
+               </DropdownMenuGroup>
+            </DropdownMenuContent>
+         </DropdownMenu>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/combobox-form.tsx b/apps/web/registry/miami/examples/combobox-form.tsx
new file mode 100644
index 00000000..20b044c8
--- /dev/null
+++ b/apps/web/registry/miami/examples/combobox-form.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { ny } from "~/lib/utils"
+import { toast } from "~/registry/miami/hooks/use-toast"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/miami/ui/command"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/miami/ui/form"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+const languages = [
+   { label: "English", value: "en" },
+   { label: "French", value: "fr" },
+   { label: "German", value: "de" },
+   { label: "Spanish", value: "es" },
+   { label: "Portuguese", value: "pt" },
+   { label: "Russian", value: "ru" },
+   { label: "Japanese", value: "ja" },
+   { label: "Korean", value: "ko" },
+   { label: "Chinese", value: "zh" },
+] as const
+
+const FormSchema = z.object({
+   language: z.string({
+      required_error: "Please select a language.",
+   }),
+})
+
+export default function ComboboxForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+               control={form.control}
+               name="language"
+               render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                     <FormLabel>Language</FormLabel>
+                     <Popover>
+                        <PopoverTrigger asChild>
+                           <FormControl>
+                              <Button
+                                 variant="outline"
+                                 role="combobox"
+                                 className={ny(
+                                    "w-[200px] justify-between",
+                                    !field.value && "text-muted-foreground",
+                                 )}
+                              >
+                                 {field.value
+                                    ? languages.find(
+                                         (language) =>
+                                            language.value === field.value,
+                                      )?.label
+                                    : "Select language"}
+                                 <ChevronsUpDown className="opacity-50" />
+                              </Button>
+                           </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[200px] p-0">
+                           <Command>
+                              <CommandInput
+                                 placeholder="Search framework..."
+                                 className="h-9"
+                              />
+                              <CommandList>
+                                 <CommandEmpty>
+                                    No framework found.
+                                 </CommandEmpty>
+                                 <CommandGroup>
+                                    {languages.map((language) => (
+                                       <CommandItem
+                                          value={language.label}
+                                          key={language.value}
+                                          onSelect={() => {
+                                             form.setValue(
+                                                "language",
+                                                language.value,
+                                             )
+                                          }}
+                                       >
+                                          {language.label}
+                                          <Check
+                                             className={ny(
+                                                "ml-auto",
+                                                language.value === field.value
+                                                   ? "opacity-100"
+                                                   : "opacity-0",
+                                             )}
+                                          />
+                                       </CommandItem>
+                                    ))}
+                                 </CommandGroup>
+                              </CommandList>
+                           </Command>
+                        </PopoverContent>
+                     </Popover>
+                     <FormDescription>
+                        This is the language that will be used in the dashboard.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/combobox-popover.tsx b/apps/web/registry/miami/examples/combobox-popover.tsx
new file mode 100644
index 00000000..a703f75c
--- /dev/null
+++ b/apps/web/registry/miami/examples/combobox-popover.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/miami/ui/command"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+interface Status {
+   value: string
+   label: string
+}
+
+const statuses: Status[] = [
+   {
+      value: "backlog",
+      label: "Backlog",
+   },
+   {
+      value: "todo",
+      label: "Todo",
+   },
+   {
+      value: "in progress",
+      label: "In Progress",
+   },
+   {
+      value: "done",
+      label: "Done",
+   },
+   {
+      value: "canceled",
+      label: "Canceled",
+   },
+]
+
+export default function ComboboxPopover() {
+   const [open, setOpen] = React.useState(false)
+   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
+      null,
+   )
+
+   return (
+      <div className="flex items-center space-x-4">
+         <p className="text-muted-foreground text-sm">Status</p>
+         <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+               <Button variant="outline" className="w-[150px] justify-start">
+                  {selectedStatus ? (
+                     <>{selectedStatus.label}</>
+                  ) : (
+                     <>+ Set status</>
+                  )}
+               </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" side="right" align="start">
+               <Command>
+                  <CommandInput placeholder="Change status..." />
+                  <CommandList>
+                     <CommandEmpty>No results found.</CommandEmpty>
+                     <CommandGroup>
+                        {statuses.map((status) => (
+                           <CommandItem
+                              key={status.value}
+                              value={status.value}
+                              onSelect={(value) => {
+                                 setSelectedStatus(
+                                    statuses.find(
+                                       (priority) => priority.value === value,
+                                    ) || null,
+                                 )
+                                 setOpen(false)
+                              }}
+                           >
+                              {status.label}
+                           </CommandItem>
+                        ))}
+                     </CommandGroup>
+                  </CommandList>
+               </Command>
+            </PopoverContent>
+         </Popover>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/combobox-responsive.tsx b/apps/web/registry/miami/examples/combobox-responsive.tsx
new file mode 100644
index 00000000..a137e8f7
--- /dev/null
+++ b/apps/web/registry/miami/examples/combobox-responsive.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+
+import { useMediaQuery } from "~/hooks/use-media-query"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/miami/ui/command"
+import {
+   Drawer,
+   DrawerContent,
+   DrawerTrigger,
+} from "~/registry/miami/ui/drawer"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+interface Status {
+   value: string
+   label: string
+}
+
+const statuses: Status[] = [
+   {
+      value: "backlog",
+      label: "Backlog",
+   },
+   {
+      value: "todo",
+      label: "Todo",
+   },
+   {
+      value: "in progress",
+      label: "In Progress",
+   },
+   {
+      value: "done",
+      label: "Done",
+   },
+   {
+      value: "canceled",
+      label: "Canceled",
+   },
+]
+
+export default function ComboBoxResponsive() {
+   const [open, setOpen] = React.useState(false)
+   const isDesktop = useMediaQuery("(min-width: 768px)")
+   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
+      null,
+   )
+
+   if (isDesktop) {
+      return (
+         <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+               <Button variant="outline" className="w-[150px] justify-start">
+                  {selectedStatus ? (
+                     <>{selectedStatus.label}</>
+                  ) : (
+                     <>+ Set status</>
+                  )}
+               </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[200px] p-0" align="start">
+               <StatusList
+                  setOpen={setOpen}
+                  setSelectedStatus={setSelectedStatus}
+               />
+            </PopoverContent>
+         </Popover>
+      )
+   }
+
+   return (
+      <Drawer open={open} onOpenChange={setOpen}>
+         <DrawerTrigger asChild>
+            <Button variant="outline" className="w-[150px] justify-start">
+               {selectedStatus ? (
+                  <>{selectedStatus.label}</>
+               ) : (
+                  <>+ Set status</>
+               )}
+            </Button>
+         </DrawerTrigger>
+         <DrawerContent>
+            <div className="mt-4 border-t">
+               <StatusList
+                  setOpen={setOpen}
+                  setSelectedStatus={setSelectedStatus}
+               />
+            </div>
+         </DrawerContent>
+      </Drawer>
+   )
+}
+
+function StatusList({
+   setOpen,
+   setSelectedStatus,
+}: {
+   setOpen: (open: boolean) => void
+   setSelectedStatus: (status: Status | null) => void
+}) {
+   return (
+      <Command>
+         <CommandInput placeholder="Filter status..." />
+         <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+               {statuses.map((status) => (
+                  <CommandItem
+                     key={status.value}
+                     value={status.value}
+                     onSelect={(value) => {
+                        setSelectedStatus(
+                           statuses.find(
+                              (priority) => priority.value === value,
+                           ) || null,
+                        )
+                        setOpen(false)
+                     }}
+                  >
+                     {status.label}
+                  </CommandItem>
+               ))}
+            </CommandGroup>
+         </CommandList>
+      </Command>
+   )
+}
diff --git a/apps/web/registry/miami/examples/command-demo.tsx b/apps/web/registry/miami/examples/command-demo.tsx
new file mode 100644
index 00000000..48f8a4ec
--- /dev/null
+++ b/apps/web/registry/miami/examples/command-demo.tsx
@@ -0,0 +1,62 @@
+import {
+   CalendarIcon,
+   EnvelopeClosedIcon,
+   FaceIcon,
+   GearIcon,
+   PersonIcon,
+   RocketIcon,
+} from "@radix-ui/react-icons"
+
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+   CommandSeparator,
+   CommandShortcut,
+} from "~/registry/miami/ui/command"
+
+export default function CommandDemo() {
+   return (
+      <Command className="rounded-lg border shadow-md">
+         <CommandInput placeholder="Type a command or search..." />
+         <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+               <CommandItem>
+                  <CalendarIcon className="mr-2 size-4" />
+                  <span>Calendar</span>
+               </CommandItem>
+               <CommandItem>
+                  <FaceIcon className="mr-2 size-4" />
+                  <span>Search Emoji</span>
+               </CommandItem>
+               <CommandItem>
+                  <RocketIcon className="mr-2 size-4" />
+                  <span>Launch</span>
+               </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Settings">
+               <CommandItem>
+                  <PersonIcon className="mr-2 size-4" />
+                  <span>Profile</span>
+                  <CommandShortcut>⌘P</CommandShortcut>
+               </CommandItem>
+               <CommandItem>
+                  <EnvelopeClosedIcon className="mr-2 size-4" />
+                  <span>Mail</span>
+                  <CommandShortcut>⌘B</CommandShortcut>
+               </CommandItem>
+               <CommandItem>
+                  <GearIcon className="mr-2 size-4" />
+                  <span>Settings</span>
+                  <CommandShortcut>⌘S</CommandShortcut>
+               </CommandItem>
+            </CommandGroup>
+         </CommandList>
+      </Command>
+   )
+}
diff --git a/apps/web/registry/miami/examples/command-dialog.tsx b/apps/web/registry/miami/examples/command-dialog.tsx
new file mode 100644
index 00000000..8767dd17
--- /dev/null
+++ b/apps/web/registry/miami/examples/command-dialog.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import {
+   CalendarIcon,
+   EnvelopeClosedIcon,
+   FaceIcon,
+   GearIcon,
+   PersonIcon,
+   RocketIcon,
+} from "@radix-ui/react-icons"
+import * as React from "react"
+
+import {
+   CommandDialog,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+   CommandSeparator,
+   CommandShortcut,
+} from "~/registry/miami/ui/command"
+
+export default function CommandDialogDemo() {
+   const [open, setOpen] = React.useState(false)
+
+   React.useEffect(() => {
+      const down = (e: KeyboardEvent) => {
+         if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault()
+            setOpen((open) => !open)
+         }
+      }
+
+      document.addEventListener("keydown", down)
+      return () => document.removeEventListener("keydown", down)
+   }, [])
+
+   return (
+      <>
+         <p className="text-muted-foreground text-sm">
+            Press{" "}
+            <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100">
+               <span className="text-xs">⌘</span>J
+            </kbd>
+         </p>
+         <CommandDialog open={open} onOpenChange={setOpen}>
+            <CommandInput placeholder="Type a command or search..." />
+            <CommandList>
+               <CommandEmpty>No results found.</CommandEmpty>
+               <CommandGroup heading="Suggestions">
+                  <CommandItem>
+                     <CalendarIcon className="mr-2 size-4" />
+                     <span>Calendar</span>
+                  </CommandItem>
+                  <CommandItem>
+                     <FaceIcon className="mr-2 size-4" />
+                     <span>Search Emoji</span>
+                  </CommandItem>
+                  <CommandItem>
+                     <RocketIcon className="mr-2 size-4" />
+                     <span>Launch</span>
+                  </CommandItem>
+               </CommandGroup>
+               <CommandSeparator />
+               <CommandGroup heading="Settings">
+                  <CommandItem>
+                     <PersonIcon className="mr-2 size-4" />
+                     <span>Profile</span>
+                     <CommandShortcut>⌘P</CommandShortcut>
+                  </CommandItem>
+                  <CommandItem>
+                     <EnvelopeClosedIcon className="mr-2 size-4" />
+                     <span>Mail</span>
+                     <CommandShortcut>⌘B</CommandShortcut>
+                  </CommandItem>
+                  <CommandItem>
+                     <GearIcon className="mr-2 size-4" />
+                     <span>Settings</span>
+                     <CommandShortcut>⌘S</CommandShortcut>
+                  </CommandItem>
+               </CommandGroup>
+            </CommandList>
+         </CommandDialog>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/confetti-basic-cannon.tsx b/apps/web/registry/miami/examples/confetti-basic-cannon.tsx
new file mode 100644
index 00000000..02fade08
--- /dev/null
+++ b/apps/web/registry/miami/examples/confetti-basic-cannon.tsx
@@ -0,0 +1,9 @@
+import { ConfettiButton } from "~/registry/miami/ui/confetti"
+
+export default function ConfettiButtonDemo() {
+   return (
+      <div className="relative">
+         <ConfettiButton>Confetti 🎉</ConfettiButton>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/confetti-custom-shapes.tsx b/apps/web/registry/miami/examples/confetti-custom-shapes.tsx
new file mode 100644
index 00000000..77bce476
--- /dev/null
+++ b/apps/web/registry/miami/examples/confetti-custom-shapes.tsx
@@ -0,0 +1,59 @@
+import confetti from "canvas-confetti"
+import { Button } from "~/components/ui/button"
+
+export default function ConfettiCustomShapes() {
+   const handleClick = () => {
+      const scalar = 2
+      const triangle = confetti.shapeFromPath({
+         path: "M0 10 L5 0 L10 10z",
+      })
+      const square = confetti.shapeFromPath({
+         path: "M0 0 L10 0 L10 10 L0 10 Z",
+      })
+      const coin = confetti.shapeFromPath({
+         path: "M5 0 A5 5 0 1 0 5 10 A5 5 0 1 0 5 0 Z",
+      })
+      const tree = confetti.shapeFromPath({
+         path: "M5 0 L10 10 L0 10 Z",
+      })
+
+      const defaults = {
+         spread: 360,
+         ticks: 60,
+         gravity: 0,
+         decay: 0.96,
+         startVelocity: 20,
+         shapes: [triangle, square, coin, tree],
+         scalar,
+      }
+
+      const shoot = () => {
+         confetti({
+            ...defaults,
+            particleCount: 30,
+         })
+
+         confetti({
+            ...defaults,
+            particleCount: 5,
+         })
+
+         confetti({
+            ...defaults,
+            particleCount: 15,
+            scalar: scalar / 2,
+            shapes: ["circle"],
+         })
+      }
+
+      setTimeout(shoot, 0)
+      setTimeout(shoot, 100)
+      setTimeout(shoot, 200)
+   }
+
+   return (
+      <div className="relative flex items-center justify-center">
+         <Button onClick={handleClick}>Trigger Shapes</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/confetti-demo.tsx b/apps/web/registry/miami/examples/confetti-demo.tsx
new file mode 100644
index 00000000..c98e9735
--- /dev/null
+++ b/apps/web/registry/miami/examples/confetti-demo.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { useRef } from "react"
+
+import type { ConfettiRef } from "~/registry/default/ui/confetti"
+import Confetti from "~/registry/default/ui/confetti"
+
+export default function ConfettiDemo() {
+   const confettiRef = useRef<ConfettiRef>(null)
+
+   return (
+      <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Confetti
+         </span>
+
+         <Confetti
+            ref={confettiRef}
+            className="absolute left-0 top-0 z-0 size-full"
+            onMouseEnter={() => {
+               confettiRef.current?.fire({})
+            }}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/confetti-emoji.tsx b/apps/web/registry/miami/examples/confetti-emoji.tsx
new file mode 100644
index 00000000..28d0dfdb
--- /dev/null
+++ b/apps/web/registry/miami/examples/confetti-emoji.tsx
@@ -0,0 +1,48 @@
+import confetti from "canvas-confetti"
+import { Button } from "~/components/ui/button"
+
+export default function ConfettiEmoji() {
+   const handleClick = () => {
+      const scalar = 2
+      const unicorn = confetti.shapeFromText({ text: "🦄", scalar })
+
+      const defaults = {
+         spread: 360,
+         ticks: 60,
+         gravity: 0,
+         decay: 0.96,
+         startVelocity: 20,
+         shapes: [unicorn],
+         scalar,
+      }
+
+      const shoot = () => {
+         confetti({
+            ...defaults,
+            particleCount: 30,
+         })
+
+         confetti({
+            ...defaults,
+            particleCount: 5,
+         })
+
+         confetti({
+            ...defaults,
+            particleCount: 15,
+            scalar: scalar / 2,
+            shapes: ["circle"],
+         })
+      }
+
+      setTimeout(shoot, 0)
+      setTimeout(shoot, 100)
+      setTimeout(shoot, 200)
+   }
+
+   return (
+      <div className="relative justify-center">
+         <Button onClick={handleClick}>Trigger Emoji</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/confetti-fireworks.tsx b/apps/web/registry/miami/examples/confetti-fireworks.tsx
new file mode 100644
index 00000000..bf4bfa06
--- /dev/null
+++ b/apps/web/registry/miami/examples/confetti-fireworks.tsx
@@ -0,0 +1,37 @@
+import confetti from "canvas-confetti"
+import { Button } from "~/components/ui/button"
+
+export default function ConfettiFireworks() {
+   const handleClick = () => {
+      const duration = 5 * 1000
+      const animationEnd = Date.now() + duration
+      const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
+
+      const randomInRange = (min: number, max: number) =>
+         Math.random() * (max - min) + min
+
+      const interval = window.setInterval(() => {
+         const timeLeft = animationEnd - Date.now()
+
+         if (timeLeft <= 0) return clearInterval(interval)
+
+         const particleCount = 50 * (timeLeft / duration)
+         confetti({
+            ...defaults,
+            particleCount,
+            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
+         })
+         confetti({
+            ...defaults,
+            particleCount,
+            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
+         })
+      }, 250)
+   }
+
+   return (
+      <div className="relative">
+         <Button onClick={handleClick}>Trigger Fireworks</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/confetti-hover.tsx b/apps/web/registry/miami/examples/confetti-hover.tsx
new file mode 100644
index 00000000..60b91de0
--- /dev/null
+++ b/apps/web/registry/miami/examples/confetti-hover.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { useRef } from "react"
+import type { ConfettiRef } from "~/registry/miami/ui/confetti"
+import Confetti from "~/registry/miami/ui/confetti"
+
+export default function ConfettiBasicCannon() {
+   const confettiRef = useRef<ConfettiRef>(null)
+
+   return (
+      <div className="bg-background relative flex h-[500px] w-full max-w-lg flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Confetti
+         </span>
+
+         <Confetti
+            ref={confettiRef}
+            className="absolute left-0 top-0 z-0 size-full"
+            onMouseEnter={() => {
+               confettiRef.current?.fire({})
+            }}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/confetti-random-direction.tsx b/apps/web/registry/miami/examples/confetti-random-direction.tsx
new file mode 100644
index 00000000..762ec418
--- /dev/null
+++ b/apps/web/registry/miami/examples/confetti-random-direction.tsx
@@ -0,0 +1,17 @@
+import { ConfettiButton } from "~/registry/miami/ui/confetti"
+
+export default function ConfettiButtonDemo() {
+   return (
+      <div className="relative">
+         <ConfettiButton
+            options={{
+               get angle() {
+                  return Math.random() * 360
+               },
+            }}
+         >
+            Random Confetti 🎉
+         </ConfettiButton>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/confetti-side-cannons.tsx b/apps/web/registry/miami/examples/confetti-side-cannons.tsx
new file mode 100644
index 00000000..b902b517
--- /dev/null
+++ b/apps/web/registry/miami/examples/confetti-side-cannons.tsx
@@ -0,0 +1,40 @@
+import confetti from "canvas-confetti"
+import { Button } from "~/components/ui/button"
+
+export default function ConfettiSideCannons() {
+   const handleClick = () => {
+      const end = Date.now() + 3 * 1000 // 3 seconds
+      const colors = ["#a786ff", "#fd8bbc", "#eca184", "#f8deb1"]
+
+      const frame = () => {
+         if (Date.now() > end) return
+
+         confetti({
+            particleCount: 2,
+            angle: 60,
+            spread: 55,
+            startVelocity: 60,
+            origin: { x: 0, y: 0.5 },
+            colors,
+         })
+         confetti({
+            particleCount: 2,
+            angle: 120,
+            spread: 55,
+            startVelocity: 60,
+            origin: { x: 1, y: 0.5 },
+            colors,
+         })
+
+         requestAnimationFrame(frame)
+      }
+
+      frame()
+   }
+
+   return (
+      <div className="relative">
+         <Button onClick={handleClick}>Trigger Side Cannons</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/confetti-stars.tsx b/apps/web/registry/miami/examples/confetti-stars.tsx
new file mode 100644
index 00000000..5893e4c9
--- /dev/null
+++ b/apps/web/registry/miami/examples/confetti-stars.tsx
@@ -0,0 +1,41 @@
+import confetti from "canvas-confetti"
+import { Button } from "~/components/ui/button"
+
+export default function ConfettiStars() {
+   const handleClick = () => {
+      const defaults = {
+         spread: 360,
+         ticks: 50,
+         gravity: 0,
+         decay: 0.94,
+         startVelocity: 30,
+         colors: ["#FFE400", "#FFBD00", "#E89400", "#FFCA6C", "#FDFFB8"],
+      }
+
+      const shoot = () => {
+         confetti({
+            ...defaults,
+            particleCount: 40,
+            scalar: 1.2,
+            shapes: ["star"],
+         })
+
+         confetti({
+            ...defaults,
+            particleCount: 10,
+            scalar: 0.75,
+            shapes: ["circle"],
+         })
+      }
+
+      setTimeout(shoot, 0)
+      setTimeout(shoot, 100)
+      setTimeout(shoot, 200)
+   }
+
+   return (
+      <div className="relative">
+         <Button onClick={handleClick}>Trigger Stars</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/context-menu-demo.tsx b/apps/web/registry/miami/examples/context-menu-demo.tsx
new file mode 100644
index 00000000..0bb09ae9
--- /dev/null
+++ b/apps/web/registry/miami/examples/context-menu-demo.tsx
@@ -0,0 +1,69 @@
+import {
+   ContextMenu,
+   ContextMenuCheckboxItem,
+   ContextMenuContent,
+   ContextMenuItem,
+   ContextMenuLabel,
+   ContextMenuRadioGroup,
+   ContextMenuRadioItem,
+   ContextMenuSeparator,
+   ContextMenuShortcut,
+   ContextMenuSub,
+   ContextMenuSubContent,
+   ContextMenuSubTrigger,
+   ContextMenuTrigger,
+} from "~/registry/miami/ui/context-menu"
+
+export default function ContextMenuDemo() {
+   return (
+      <ContextMenu>
+         <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+            Right click here
+         </ContextMenuTrigger>
+         <ContextMenuContent className="w-64">
+            <ContextMenuItem inset>
+               Back
+               <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem inset disabled>
+               Forward
+               <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem inset>
+               Reload
+               <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuSub>
+               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+               <ContextMenuSubContent className="w-48">
+                  <ContextMenuItem>
+                     Save Page As...
+                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+                  </ContextMenuItem>
+                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+                  <ContextMenuItem>Name Window...</ContextMenuItem>
+                  <ContextMenuSeparator />
+                  <ContextMenuItem>Developer Tools</ContextMenuItem>
+               </ContextMenuSubContent>
+            </ContextMenuSub>
+            <ContextMenuSeparator />
+            <ContextMenuCheckboxItem checked>
+               Show Bookmarks Bar
+               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+            </ContextMenuCheckboxItem>
+            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+            <ContextMenuSeparator />
+            <ContextMenuRadioGroup value="pedro">
+               <ContextMenuLabel inset>People</ContextMenuLabel>
+               <ContextMenuSeparator />
+               <ContextMenuRadioItem value="pedro">
+                  Pedro Duarte
+               </ContextMenuRadioItem>
+               <ContextMenuRadioItem value="colm">
+                  Colm Tuite
+               </ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+         </ContextMenuContent>
+      </ContextMenu>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cool-mode-custom.tsx b/apps/web/registry/miami/examples/cool-mode-custom.tsx
new file mode 100644
index 00000000..437ef1e0
--- /dev/null
+++ b/apps/web/registry/miami/examples/cool-mode-custom.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+import { Button } from "~/components/ui/button"
+import { CoolMode } from "~/registry/miami/ui/cool-mode"
+
+export default function CoolModeCustom() {
+   return (
+      <div className="relative justify-center">
+         <CoolMode
+            options={{
+               particle:
+                  "https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg",
+            }}
+         >
+            <Button>Click Me!</Button>
+         </CoolMode>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/cool-mode-demo.tsx b/apps/web/registry/miami/examples/cool-mode-demo.tsx
new file mode 100644
index 00000000..87aac3c2
--- /dev/null
+++ b/apps/web/registry/miami/examples/cool-mode-demo.tsx
@@ -0,0 +1,13 @@
+import React from "react"
+import { Button } from "~/components/ui/button"
+import { CoolMode } from "~/registry/miami/ui/cool-mode"
+
+export default function CoolModeDemo() {
+   return (
+      <div className="relative justify-center">
+         <CoolMode>
+            <Button>Click Me!</Button>
+         </CoolMode>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/data-table-demo.tsx b/apps/web/registry/miami/examples/data-table-demo.tsx
new file mode 100644
index 00000000..e0f229f2
--- /dev/null
+++ b/apps/web/registry/miami/examples/data-table-demo.tsx
@@ -0,0 +1,326 @@
+"use client"
+
+import {
+   CaretSortIcon,
+   ChevronDownIcon,
+   DotsHorizontalIcon,
+} from "@radix-ui/react-icons"
+import type {
+   ColumnDef,
+   ColumnFiltersState,
+   SortingState,
+   VisibilityState,
+} from "@tanstack/react-table"
+import {
+   flexRender,
+   getCoreRowModel,
+   getFilteredRowModel,
+   getPaginationRowModel,
+   getSortedRowModel,
+   useReactTable,
+} from "@tanstack/react-table"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+import {
+   DropdownMenu,
+   DropdownMenuCheckboxItem,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import {
+   Table,
+   TableBody,
+   TableCell,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/miami/ui/table"
+
+const data: Payment[] = [
+   {
+      id: "m5gr84i9",
+      amount: 316,
+      status: "success",
+      email: "ken99@yahoo.com",
+   },
+   {
+      id: "3u1reuv4",
+      amount: 242,
+      status: "success",
+      email: "Abe45@gmail.com",
+   },
+   {
+      id: "derv1ws0",
+      amount: 837,
+      status: "processing",
+      email: "Monserrat44@gmail.com",
+   },
+   {
+      id: "5kma53ae",
+      amount: 874,
+      status: "success",
+      email: "Silas22@gmail.com",
+   },
+   {
+      id: "bhqecj4p",
+      amount: 721,
+      status: "failed",
+      email: "carmella@hotmail.com",
+   },
+]
+
+export interface Payment {
+   id: string
+   amount: number
+   status: "pending" | "processing" | "success" | "failed"
+   email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+   {
+      id: "select",
+      header: ({ table }) => (
+         <Checkbox
+            checked={
+               table.getIsAllPageRowsSelected() ||
+               (table.getIsSomePageRowsSelected() && "indeterminate")
+            }
+            onCheckedChange={(value) =>
+               table.toggleAllPageRowsSelected(!!value)
+            }
+            aria-label="Select all"
+         />
+      ),
+      cell: ({ row }) => (
+         <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+         />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+   },
+   {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ row }) => (
+         <div className="capitalize">{row.getValue("status")}</div>
+      ),
+   },
+   {
+      accessorKey: "email",
+      header: ({ column }) => {
+         return (
+            <Button
+               variant="ghost"
+               onClick={() =>
+                  column.toggleSorting(column.getIsSorted() === "asc")
+               }
+            >
+               Email
+               <CaretSortIcon className="ml-2 size-4" />
+            </Button>
+         )
+      },
+      cell: ({ row }) => (
+         <div className="lowercase">{row.getValue("email")}</div>
+      ),
+   },
+   {
+      accessorKey: "amount",
+      header: () => <div className="text-right">Amount</div>,
+      cell: ({ row }) => {
+         const amount = Number.parseFloat(row.getValue("amount"))
+
+         // Format the amount as a dollar amount
+         const formatted = new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+         }).format(amount)
+
+         return <div className="text-right font-medium">{formatted}</div>
+      },
+   },
+   {
+      id: "actions",
+      enableHiding: false,
+      cell: ({ row }) => {
+         const payment = row.original
+
+         return (
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="size-8 p-0">
+                     <span className="sr-only">Open menu</span>
+                     <DotsHorizontalIcon className="size-4" />
+                  </Button>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                  <DropdownMenuItem
+                     onClick={() => navigator.clipboard.writeText(payment.id)}
+                  >
+                     Copy payment ID
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>View customer</DropdownMenuItem>
+                  <DropdownMenuItem>View payment details</DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         )
+      },
+   },
+]
+
+export default function DataTableDemo() {
+   const [sorting, setSorting] = React.useState<SortingState>([])
+   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+      [],
+   )
+   const [columnVisibility, setColumnVisibility] =
+      React.useState<VisibilityState>({})
+   const [rowSelection, setRowSelection] = React.useState({})
+
+   const table = useReactTable({
+      data,
+      columns,
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setColumnFilters,
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      onColumnVisibilityChange: setColumnVisibility,
+      onRowSelectionChange: setRowSelection,
+      state: {
+         sorting,
+         columnFilters,
+         columnVisibility,
+         rowSelection,
+      },
+   })
+
+   return (
+      <div className="w-full">
+         <div className="flex items-center py-4">
+            <Input
+               placeholder="Filter emails..."
+               value={
+                  (table.getColumn("email")?.getFilterValue() as string) ?? ""
+               }
+               onChange={(event) =>
+                  table.getColumn("email")?.setFilterValue(event.target.value)
+               }
+               className="max-w-sm"
+            />
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="ml-auto">
+                     Columns <ChevronDownIcon className="ml-2 size-4" />
+                  </Button>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent align="end">
+                  {table
+                     .getAllColumns()
+                     .filter((column) => column.getCanHide())
+                     .map((column) => {
+                        return (
+                           <DropdownMenuCheckboxItem
+                              key={column.id}
+                              className="capitalize"
+                              checked={column.getIsVisible()}
+                              onCheckedChange={(value) =>
+                                 column.toggleVisibility(!!value)
+                              }
+                           >
+                              {column.id}
+                           </DropdownMenuCheckboxItem>
+                        )
+                     })}
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </div>
+         <div className="rounded-md border">
+            <Table>
+               <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                     <TableRow key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => {
+                           return (
+                              <TableHead key={header.id}>
+                                 {header.isPlaceholder
+                                    ? null
+                                    : flexRender(
+                                         header.column.columnDef.header,
+                                         header.getContext(),
+                                      )}
+                              </TableHead>
+                           )
+                        })}
+                     </TableRow>
+                  ))}
+               </TableHeader>
+               <TableBody>
+                  {table.getRowModel().rows?.length ? (
+                     table.getRowModel().rows.map((row) => (
+                        <TableRow
+                           key={row.id}
+                           data-state={row.getIsSelected() && "selected"}
+                        >
+                           {row.getVisibleCells().map((cell) => (
+                              <TableCell key={cell.id}>
+                                 {flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext(),
+                                 )}
+                              </TableCell>
+                           ))}
+                        </TableRow>
+                     ))
+                  ) : (
+                     <TableRow>
+                        <TableCell
+                           colSpan={columns.length}
+                           className="h-24 text-center"
+                        >
+                           No results.
+                        </TableCell>
+                     </TableRow>
+                  )}
+               </TableBody>
+            </Table>
+         </div>
+         <div className="flex items-center justify-end space-x-2 py-4">
+            <div className="text-muted-foreground flex-1 text-sm">
+               {table.getFilteredSelectedRowModel().rows.length} of{" "}
+               {table.getFilteredRowModel().rows.length} row(s) selected.
+            </div>
+            <div className="space-x-2">
+               <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => table.previousPage()}
+                  disabled={!table.getCanPreviousPage()}
+               >
+                  Previous
+               </Button>
+               <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => table.nextPage()}
+                  disabled={!table.getCanNextPage()}
+               >
+                  Next
+               </Button>
+            </div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/date-picker-demo.tsx b/apps/web/registry/miami/examples/date-picker-demo.tsx
new file mode 100644
index 00000000..4e18f595
--- /dev/null
+++ b/apps/web/registry/miami/examples/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { format } from "date-fns"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Calendar } from "~/registry/miami/ui/calendar"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+export default function DatePickerDemo() {
+   const [date, setDate] = React.useState<Date>()
+
+   return (
+      <Popover>
+         <PopoverTrigger asChild>
+            <Button
+               variant="outline"
+               className={ny(
+                  "w-[240px] justify-start text-left font-normal",
+                  !date && "text-muted-foreground",
+               )}
+            >
+               <CalendarIcon className="mr-2 size-4" />
+               {date ? format(date, "PPP") : <span>Pick a date</span>}
+            </Button>
+         </PopoverTrigger>
+         <PopoverContent className="w-auto p-0" align="start">
+            <Calendar
+               mode="single"
+               selected={date}
+               onSelect={setDate}
+               initialFocus
+            />
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/miami/examples/date-picker-form.tsx b/apps/web/registry/miami/examples/date-picker-form.tsx
new file mode 100644
index 00000000..3c80341e
--- /dev/null
+++ b/apps/web/registry/miami/examples/date-picker-form.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { format } from "date-fns"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Calendar } from "~/registry/miami/ui/calendar"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/miami/ui/form"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const FormSchema = z.object({
+   dob: z.date({
+      required_error: "A date of birth is required.",
+   }),
+})
+
+export default function DatePickerForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+               control={form.control}
+               name="dob"
+               render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                     <FormLabel>Date of birth</FormLabel>
+                     <Popover>
+                        <PopoverTrigger asChild>
+                           <FormControl>
+                              <Button
+                                 variant="outline"
+                                 className={ny(
+                                    "w-[240px] pl-3 text-left font-normal",
+                                    !field.value && "text-muted-foreground",
+                                 )}
+                              >
+                                 {field.value ? (
+                                    format(field.value, "PPP")
+                                 ) : (
+                                    <span>Pick a date</span>
+                                 )}
+                                 <CalendarIcon className="ml-auto size-4 opacity-50" />
+                              </Button>
+                           </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                           <Calendar
+                              mode="single"
+                              selected={field.value}
+                              onSelect={field.onChange}
+                              disabled={(date) =>
+                                 date > new Date() ||
+                                 date < new Date("1900-01-01")
+                              }
+                              initialFocus
+                           />
+                        </PopoverContent>
+                     </Popover>
+                     <FormDescription>
+                        Your date of birth is used to calculate your age.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/date-picker-with-presets.tsx b/apps/web/registry/miami/examples/date-picker-with-presets.tsx
new file mode 100644
index 00000000..f600909b
--- /dev/null
+++ b/apps/web/registry/miami/examples/date-picker-with-presets.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { addDays, format } from "date-fns"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Calendar } from "~/registry/miami/ui/calendar"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export default function DatePickerWithPresets() {
+   const [date, setDate] = React.useState<Date>()
+
+   return (
+      <Popover>
+         <PopoverTrigger asChild>
+            <Button
+               variant="outline"
+               className={ny(
+                  "w-[240px] justify-start text-left font-normal",
+                  !date && "text-muted-foreground",
+               )}
+            >
+               <CalendarIcon className="mr-2 size-4" />
+               {date ? format(date, "PPP") : <span>Pick a date</span>}
+            </Button>
+         </PopoverTrigger>
+         <PopoverContent
+            align="start"
+            className="flex w-auto flex-col space-y-2 p-2"
+         >
+            <Select
+               onValueChange={(value) =>
+                  setDate(addDays(new Date(), Number.parseInt(value)))
+               }
+            >
+               <SelectTrigger>
+                  <SelectValue placeholder="Select" />
+               </SelectTrigger>
+               <SelectContent position="popper">
+                  <SelectItem value="0">Today</SelectItem>
+                  <SelectItem value="1">Tomorrow</SelectItem>
+                  <SelectItem value="3">In 3 days</SelectItem>
+                  <SelectItem value="7">In a week</SelectItem>
+               </SelectContent>
+            </Select>
+            <div className="rounded-md border">
+               <Calendar mode="single" selected={date} onSelect={setDate} />
+            </div>
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/miami/examples/date-picker-with-range-presets-internal.tsx b/apps/web/registry/miami/examples/date-picker-with-range-presets-internal.tsx
new file mode 100644
index 00000000..149c8f5f
--- /dev/null
+++ b/apps/web/registry/miami/examples/date-picker-with-range-presets-internal.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import * as React from "react"
+import type { DateRange } from "react-day-picker"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/default/ui/button"
+import { Calendar } from "~/registry/default/ui/calendar"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/default/ui/popover"
+
+export default function DatePickerWithRange({
+   className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+   const [date, setDate] = React.useState<DateRange | undefined>({
+      from: new Date(2022, 0, 20),
+      to: addDays(new Date(2022, 0, 20), 20),
+   })
+
+   const handlePresetSelect = (value: string) => {
+      switch (value) {
+         case "last7Days":
+            setDate({
+               from: addDays(new Date(), -7),
+               to: new Date(),
+            })
+            break
+         case "last30Days":
+            setDate({
+               from: addDays(new Date(), -30),
+               to: new Date(),
+            })
+            break
+         case "monthToDate":
+            setDate({
+               from: new Date(
+                  new Date().getFullYear(),
+                  new Date().getMonth(),
+                  1,
+               ),
+               to: new Date(),
+            })
+            break
+         case "yearToDate":
+            setDate({
+               from: new Date(new Date().getFullYear(), 0, 1),
+               to: new Date(),
+            })
+            break
+         default:
+            break
+      }
+   }
+
+   return (
+      <div className={ny("inline-flex", className)}>
+         <Popover>
+            <PopoverTrigger asChild>
+               <Button
+                  id="date"
+                  variant="outline"
+                  className={ny(
+                     "w-[300px] justify-start text-left font-normal",
+                     !date && "text-muted-foreground",
+                  )}
+               >
+                  <CalendarIcon className="mr-2 size-4" />
+                  {date?.from ? (
+                     date.to ? (
+                        <>
+                           {format(date.from, "LLL dd, y")} -{" "}
+                           {format(date.to, "LLL dd, y")}
+                        </>
+                     ) : (
+                        format(date.from, "LLL dd, y")
+                     )
+                  ) : (
+                     <span>Pick a date</span>
+                  )}
+               </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+               <div className="flex w-full justify-evenly p-2">
+                  <Button
+                     variant="outline"
+                     onClick={() => handlePresetSelect("last7Days")}
+                  >
+                     Last 7 Days
+                  </Button>
+                  <Button
+                     variant="outline"
+                     onClick={() => handlePresetSelect("last30Days")}
+                  >
+                     Last 30 Days
+                  </Button>
+                  <Button
+                     variant="outline"
+                     onClick={() => handlePresetSelect("monthToDate")}
+                  >
+                     Month to Date
+                  </Button>
+                  <Button
+                     variant="outline"
+                     onClick={() => handlePresetSelect("yearToDate")}
+                  >
+                     Year to Date
+                  </Button>
+               </div>
+               <div className="border-t">
+                  <Calendar
+                     initialFocus
+                     mode="range"
+                     defaultMonth={date?.from}
+                     selected={date}
+                     onSelect={setDate}
+                     numberOfMonths={2}
+                  />
+               </div>
+            </PopoverContent>
+         </Popover>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/date-picker-with-range.tsx b/apps/web/registry/miami/examples/date-picker-with-range.tsx
new file mode 100644
index 00000000..98cc528e
--- /dev/null
+++ b/apps/web/registry/miami/examples/date-picker-with-range.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { addDays, format } from "date-fns"
+import * as React from "react"
+import type { DateRange } from "react-day-picker"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Calendar } from "~/registry/miami/ui/calendar"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+export default function DatePickerWithRange({
+   className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+   const [date, setDate] = React.useState<DateRange | undefined>({
+      from: new Date(2022, 0, 20),
+      to: addDays(new Date(2022, 0, 20), 20),
+   })
+
+   return (
+      <div className={ny("grid gap-2", className)}>
+         <Popover>
+            <PopoverTrigger asChild>
+               <Button
+                  id="date"
+                  variant="outline"
+                  className={ny(
+                     "w-[300px] justify-start text-left font-normal",
+                     !date && "text-muted-foreground",
+                  )}
+               >
+                  <CalendarIcon className="mr-2 size-4" />
+                  {date?.from ? (
+                     date.to ? (
+                        <>
+                           {format(date.from, "LLL dd, y")} -{" "}
+                           {format(date.to, "LLL dd, y")}
+                        </>
+                     ) : (
+                        format(date.from, "LLL dd, y")
+                     )
+                  ) : (
+                     <span>Pick a date</span>
+                  )}
+               </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+               <Calendar
+                  initialFocus
+                  mode="range"
+                  defaultMonth={date?.from}
+                  selected={date}
+                  onSelect={setDate}
+                  numberOfMonths={2}
+               />
+            </PopoverContent>
+         </Popover>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/dialog-close-button.tsx b/apps/web/registry/miami/examples/dialog-close-button.tsx
new file mode 100644
index 00000000..23a67aba
--- /dev/null
+++ b/apps/web/registry/miami/examples/dialog-close-button.tsx
@@ -0,0 +1,56 @@
+import { CopyIcon } from "@radix-ui/react-icons"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Dialog,
+   DialogClose,
+   DialogContent,
+   DialogDescription,
+   DialogFooter,
+   DialogHeader,
+   DialogTitle,
+   DialogTrigger,
+} from "~/registry/miami/ui/dialog"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export default function DialogCloseButton() {
+   return (
+      <Dialog>
+         <DialogTrigger asChild>
+            <Button variant="outline">Share</Button>
+         </DialogTrigger>
+         <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+               <DialogTitle>Share link</DialogTitle>
+               <DialogDescription>
+                  Anyone who has this link will be able to view this.
+               </DialogDescription>
+            </DialogHeader>
+            <div className="flex items-center space-x-2">
+               <div className="grid flex-1 gap-2">
+                  <Label htmlFor="link" className="sr-only">
+                     Link
+                  </Label>
+                  <Input
+                     id="link"
+                     defaultValue="https://nyxbui.design/docs/installation"
+                     readOnly
+                  />
+               </div>
+               <Button type="submit" size="sm" className="px-3">
+                  <span className="sr-only">Copy</span>
+                  <CopyIcon className="size-4" />
+               </Button>
+            </div>
+            <DialogFooter className="sm:justify-start">
+               <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                     Close
+                  </Button>
+               </DialogClose>
+            </DialogFooter>
+         </DialogContent>
+      </Dialog>
+   )
+}
diff --git a/apps/web/registry/miami/examples/dialog-demo.tsx b/apps/web/registry/miami/examples/dialog-demo.tsx
new file mode 100644
index 00000000..27ddd57e
--- /dev/null
+++ b/apps/web/registry/miami/examples/dialog-demo.tsx
@@ -0,0 +1,56 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogFooter,
+   DialogHeader,
+   DialogTitle,
+   DialogTrigger,
+} from "~/registry/miami/ui/dialog"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export default function DialogDemo() {
+   return (
+      <Dialog>
+         <DialogTrigger asChild>
+            <Button variant="outline">Edit Profile</Button>
+         </DialogTrigger>
+         <DialogContent className="sm:max-w-[425px]">
+            <DialogHeader>
+               <DialogTitle>Edit profile</DialogTitle>
+               <DialogDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+               </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="name" className="text-right">
+                     Name
+                  </Label>
+                  <Input
+                     id="name"
+                     value="Pedro Duarte"
+                     className="col-span-3"
+                  />
+               </div>
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="username" className="text-right">
+                     Username
+                  </Label>
+                  <Input
+                     id="username"
+                     value="~peduarte"
+                     className="col-span-3"
+                  />
+               </div>
+            </div>
+            <DialogFooter>
+               <Button type="submit">Save changes</Button>
+            </DialogFooter>
+         </DialogContent>
+      </Dialog>
+   )
+}
diff --git a/apps/web/registry/miami/examples/dock-demo-2.tsx b/apps/web/registry/miami/examples/dock-demo-2.tsx
new file mode 100644
index 00000000..0f98e9c1
--- /dev/null
+++ b/apps/web/registry/miami/examples/dock-demo-2.tsx
@@ -0,0 +1,139 @@
+import type React from "react"
+
+import { Dock, DockIcon } from "~/registry/miami/ui/dock"
+
+export type IconProps = React.HTMLAttributes<SVGElement>
+
+export default function DockDemo() {
+   return (
+      <div className="relative">
+         <Dock direction="middle">
+            <DockIcon>
+               <Icons.gitHub className="size-6" />
+            </DockIcon>
+            <DockIcon>
+               <Icons.googleDrive className="size-6" />
+            </DockIcon>
+            <DockIcon>
+               <Icons.notion className="size-6" />
+            </DockIcon>
+            <DockIcon>
+               <Icons.whatsapp className="size-6" />
+            </DockIcon>
+         </Dock>
+      </div>
+   )
+}
+
+const Icons = {
+   gitHub: (props: IconProps) => (
+      <svg viewBox="0 0 438.549 438.549" {...props}>
+         <path
+            fill="currentColor"
+            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+         ></path>
+      </svg>
+   ),
+   notion: (props: IconProps) => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 100 100"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+         {...props}
+      >
+         <path
+            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+            fill="#fff"
+         />
+         <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+            fill="#000"
+         />
+      </svg>
+   ),
+   googleDrive: (props: IconProps) => (
+      <svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg" {...props}>
+         <path
+            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+            fill="#0066da"
+         />
+         <path
+            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+            fill="#00ac47"
+         />
+         <path
+            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335"
+         />
+         <path
+            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+            fill="#00832d"
+         />
+         <path
+            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+            fill="#2684fc"
+         />
+         <path
+            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00"
+         />
+      </svg>
+   ),
+   whatsapp: (props: IconProps) => (
+      <svg
+         xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 175.216 175.552"
+         {...props}
+      >
+         <defs>
+            <linearGradient
+               id="b"
+               x1="85.915"
+               x2="86.535"
+               y1="32.567"
+               y2="137.092"
+               gradientUnits="userSpaceOnUse"
+            >
+               <stop offset="0" stopColor="#57d163" />
+               <stop offset="1" stopColor="#23b33a" />
+            </linearGradient>
+            <filter
+               id="a"
+               width="1.115"
+               height="1.114"
+               x="-.057"
+               y="-.057"
+               colorInterpolationFilters="sRGB"
+            >
+               <feGaussianBlur stdDeviation="3.531" />
+            </filter>
+         </defs>
+         <path
+            fill="#b3b3b3"
+            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
+            filter="url(#a)"
+         />
+         <path
+            fill="#fff"
+            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
+         />
+         <path
+            fill="url(#linearGradient1780)"
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
+         />
+         <path
+            fill="url(#b)"
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
+         />
+         <path
+            fill="#fff"
+            fillRule="evenodd"
+            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
+         />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/miami/examples/dock-demo-3.tsx b/apps/web/registry/miami/examples/dock-demo-3.tsx
new file mode 100644
index 00000000..3f2924c2
--- /dev/null
+++ b/apps/web/registry/miami/examples/dock-demo-3.tsx
@@ -0,0 +1,139 @@
+import type React from "react"
+
+import { Dock, DockIcon } from "~/registry/miami/ui/dock"
+
+export type IconProps = React.HTMLAttributes<SVGElement>
+
+export default function DockDemo() {
+   return (
+      <div className="relative">
+         <Dock magnification={60} distance={100}>
+            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
+               <Icons.gitHub className="size-full" />
+            </DockIcon>
+            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
+               <Icons.googleDrive className="size-full" />
+            </DockIcon>
+            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
+               <Icons.notion className="size-full" />
+            </DockIcon>
+            <DockIcon className="bg-black/10 p-3 dark:bg-white/10">
+               <Icons.whatsapp className="size-full" />
+            </DockIcon>
+         </Dock>
+      </div>
+   )
+}
+
+const Icons = {
+   gitHub: (props: IconProps) => (
+      <svg viewBox="0 0 438.549 438.549" {...props}>
+         <path
+            fill="currentColor"
+            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+         ></path>
+      </svg>
+   ),
+   notion: (props: IconProps) => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 100 100"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+         {...props}
+      >
+         <path
+            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+            fill="#fff"
+         />
+         <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+            fill="#000"
+         />
+      </svg>
+   ),
+   googleDrive: (props: IconProps) => (
+      <svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg" {...props}>
+         <path
+            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+            fill="#0066da"
+         />
+         <path
+            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+            fill="#00ac47"
+         />
+         <path
+            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335"
+         />
+         <path
+            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+            fill="#00832d"
+         />
+         <path
+            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+            fill="#2684fc"
+         />
+         <path
+            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00"
+         />
+      </svg>
+   ),
+   whatsapp: (props: IconProps) => (
+      <svg
+         xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 175.216 175.552"
+         {...props}
+      >
+         <defs>
+            <linearGradient
+               id="b"
+               x1="85.915"
+               x2="86.535"
+               y1="32.567"
+               y2="137.092"
+               gradientUnits="userSpaceOnUse"
+            >
+               <stop offset="0" stopColor="#57d163" />
+               <stop offset="1" stopColor="#23b33a" />
+            </linearGradient>
+            <filter
+               id="a"
+               width="1.115"
+               height="1.114"
+               x="-.057"
+               y="-.057"
+               colorInterpolationFilters="sRGB"
+            >
+               <feGaussianBlur stdDeviation="3.531" />
+            </filter>
+         </defs>
+         <path
+            fill="#b3b3b3"
+            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
+            filter="url(#a)"
+         />
+         <path
+            fill="#fff"
+            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
+         />
+         <path
+            fill="url(#linearGradient1780)"
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
+         />
+         <path
+            fill="url(#b)"
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
+         />
+         <path
+            fill="#fff"
+            fillRule="evenodd"
+            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
+         />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/miami/examples/dock-demo.tsx b/apps/web/registry/miami/examples/dock-demo.tsx
new file mode 100644
index 00000000..fd8e2455
--- /dev/null
+++ b/apps/web/registry/miami/examples/dock-demo.tsx
@@ -0,0 +1,166 @@
+import { CalendarIcon, HomeIcon, MailIcon, PencilIcon } from "lucide-react"
+import Link from "next/link"
+import type React from "react"
+
+import { ModeToggle } from "~/components/mode-toggle"
+import { buttonVariants } from "~/components/ui/button"
+import { Separator } from "~/components/ui/separator"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/components/ui/tooltip"
+import { ny } from "~/lib/utils"
+import { Dock, DockIcon } from "~/registry/miami/ui/dock"
+
+export type IconProps = React.HTMLAttributes<SVGElement>
+
+const Icons = {
+   calendar: (props: IconProps) => <CalendarIcon {...props} />,
+   email: (props: IconProps) => <MailIcon {...props} />,
+   linkedin: (props: IconProps) => (
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+         <title>LinkedIn</title>
+         <path
+            fill="currentColor"
+            d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+         />
+      </svg>
+   ),
+   x: (props: IconProps) => (
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+         <title>X</title>
+         <path
+            fill="currentColor"
+            d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
+         />
+      </svg>
+   ),
+   youtube: (props: IconProps) => (
+      <svg
+         width="32px"
+         height="32px"
+         viewBox="0 0 32 32"
+         fill="currentColor"
+         xmlns="http://www.w3.org/2000/svg"
+         {...props}
+      >
+         <title>youtube</title>
+         <path d="M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z" />
+      </svg>
+   ),
+   github: (props: IconProps) => (
+      <svg viewBox="0 0 438.549 438.549" {...props}>
+         <path
+            fill="currentColor"
+            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+         ></path>
+      </svg>
+   ),
+}
+
+const DATA = {
+   navbar: [
+      { href: "#", icon: HomeIcon, label: "Home" },
+      { href: "#", icon: PencilIcon, label: "Blog" },
+   ],
+   contact: {
+      social: {
+         GitHub: {
+            name: "GitHub",
+            url: "#",
+            icon: Icons.github,
+         },
+         LinkedIn: {
+            name: "LinkedIn",
+            url: "#",
+            icon: Icons.linkedin,
+         },
+         X: {
+            name: "X",
+            url: "#",
+            icon: Icons.x,
+         },
+         email: {
+            name: "Send Email",
+            url: "#",
+            icon: Icons.email,
+         },
+      },
+   },
+}
+
+export default function DockDemo() {
+   return (
+      <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Dock
+         </span>
+         <TooltipProvider>
+            <Dock direction="middle">
+               {DATA.navbar.map((item) => (
+                  <DockIcon key={item.label}>
+                     <Tooltip>
+                        <TooltipTrigger asChild>
+                           <Link
+                              href={item.href}
+                              aria-label={item.label}
+                              className={ny(
+                                 buttonVariants({
+                                    variant: "ghost",
+                                    size: "icon",
+                                 }),
+                                 "size-12 rounded-full",
+                              )}
+                           >
+                              <item.icon className="size-4" />
+                           </Link>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                           <p>{item.label}</p>
+                        </TooltipContent>
+                     </Tooltip>
+                  </DockIcon>
+               ))}
+               <Separator orientation="vertical" className="h-full" />
+               {Object.entries(DATA.contact.social).map(([name, social]) => (
+                  <DockIcon key={name}>
+                     <Tooltip>
+                        <TooltipTrigger asChild>
+                           <Link
+                              href={social.url}
+                              aria-label={social.name}
+                              className={ny(
+                                 buttonVariants({
+                                    variant: "ghost",
+                                    size: "icon",
+                                 }),
+                                 "size-12 rounded-full",
+                              )}
+                           >
+                              <social.icon className="size-4" />
+                           </Link>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                           <p>{name}</p>
+                        </TooltipContent>
+                     </Tooltip>
+                  </DockIcon>
+               ))}
+               <Separator orientation="vertical" className="h-full py-2" />
+               <DockIcon>
+                  <Tooltip>
+                     <TooltipTrigger asChild>
+                        <ModeToggle className="rounded-full" />
+                     </TooltipTrigger>
+                     <TooltipContent>
+                        <p>Theme</p>
+                     </TooltipContent>
+                  </Tooltip>
+               </DockIcon>
+            </Dock>
+         </TooltipProvider>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/dot-pattern-demo.tsx b/apps/web/registry/miami/examples/dot-pattern-demo.tsx
new file mode 100644
index 00000000..8f708d3c
--- /dev/null
+++ b/apps/web/registry/miami/examples/dot-pattern-demo.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import { ny } from "~/registry/miami/lib/utils"
+import { DotPattern } from "~/registry/miami/ui/dot-pattern"
+
+export default function DotPatternDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Dot Pattern
+         </p>
+         <DotPattern
+            className={ny(
+               "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/dot-pattern-linear-gradient.tsx b/apps/web/registry/miami/examples/dot-pattern-linear-gradient.tsx
new file mode 100644
index 00000000..647f133d
--- /dev/null
+++ b/apps/web/registry/miami/examples/dot-pattern-linear-gradient.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { ny } from "~/registry/miami/lib/utils"
+import { DotPattern } from "~/registry/miami/ui/dot-pattern"
+
+export default function DotPatternLinearGradient() {
+   return (
+      <div className="relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Dot Pattern
+         </p>
+         <DotPattern
+            width={20}
+            height={20}
+            cx={1}
+            cy={1}
+            cr={1}
+            className={ny(
+               "[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/drawer-demo.tsx b/apps/web/registry/miami/examples/drawer-demo.tsx
new file mode 100644
index 00000000..cd7058c0
--- /dev/null
+++ b/apps/web/registry/miami/examples/drawer-demo.tsx
@@ -0,0 +1,136 @@
+import { MinusIcon, PlusIcon } from "@radix-ui/react-icons"
+import * as React from "react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Drawer,
+   DrawerClose,
+   DrawerContent,
+   DrawerDescription,
+   DrawerFooter,
+   DrawerHeader,
+   DrawerTitle,
+   DrawerTrigger,
+} from "~/registry/miami/ui/drawer"
+
+const data = [
+   {
+      goal: 400,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 239,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 349,
+   },
+]
+
+export default function DrawerDemo() {
+   const [goal, setGoal] = React.useState(350)
+
+   function onClick(adjustment: number) {
+      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+   }
+
+   return (
+      <Drawer>
+         <DrawerTrigger asChild>
+            <Button variant="outline">Open Drawer</Button>
+         </DrawerTrigger>
+         <DrawerContent>
+            <div className="mx-auto w-full max-w-sm">
+               <DrawerHeader>
+                  <DrawerTitle>Move Goal</DrawerTitle>
+                  <DrawerDescription>
+                     Set your daily activity goal.
+                  </DrawerDescription>
+               </DrawerHeader>
+               <div className="p-4 pb-0">
+                  <div className="flex items-center justify-center space-x-2">
+                     <Button
+                        variant="outline"
+                        size="icon"
+                        className="size-8 shrink-0 rounded-full"
+                        onClick={() => onClick(-10)}
+                        disabled={goal <= 200}
+                     >
+                        <MinusIcon className="size-4" />
+                        <span className="sr-only">Decrease</span>
+                     </Button>
+                     <div className="flex-1 text-center">
+                        <div className="text-7xl font-bold tracking-tighter">
+                           {goal}
+                        </div>
+                        <div className="text-muted-foreground text-[0.70rem] uppercase">
+                           Calories/day
+                        </div>
+                     </div>
+                     <Button
+                        variant="outline"
+                        size="icon"
+                        className="size-8 shrink-0 rounded-full"
+                        onClick={() => onClick(10)}
+                        disabled={goal >= 400}
+                     >
+                        <PlusIcon className="size-4" />
+                        <span className="sr-only">Increase</span>
+                     </Button>
+                  </div>
+                  <div className="mt-3 h-[120px]">
+                     <ResponsiveContainer width="100%" height="100%">
+                        <BarChart data={data}>
+                           <Bar
+                              dataKey="goal"
+                              style={
+                                 {
+                                    fill: "hsl(var(--foreground))",
+                                    opacity: 0.9,
+                                 } as React.CSSProperties
+                              }
+                           />
+                        </BarChart>
+                     </ResponsiveContainer>
+                  </div>
+               </div>
+               <DrawerFooter>
+                  <Button>Submit</Button>
+                  <DrawerClose asChild>
+                     <Button variant="outline">Cancel</Button>
+                  </DrawerClose>
+               </DrawerFooter>
+            </div>
+         </DrawerContent>
+      </Drawer>
+   )
+}
diff --git a/apps/web/registry/miami/examples/drawer-dialog.tsx b/apps/web/registry/miami/examples/drawer-dialog.tsx
new file mode 100644
index 00000000..cfcd6167
--- /dev/null
+++ b/apps/web/registry/miami/examples/drawer-dialog.tsx
@@ -0,0 +1,89 @@
+import * as React from "react"
+
+import { useMediaQuery } from "~/hooks/use-media-query"
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogHeader,
+   DialogTitle,
+   DialogTrigger,
+} from "~/registry/miami/ui/dialog"
+import {
+   Drawer,
+   DrawerClose,
+   DrawerContent,
+   DrawerDescription,
+   DrawerFooter,
+   DrawerHeader,
+   DrawerTitle,
+   DrawerTrigger,
+} from "~/registry/miami/ui/drawer"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export default function DrawerDialogDemo() {
+   const [open, setOpen] = React.useState(false)
+   const isDesktop = useMediaQuery("(min-width: 768px)")
+
+   if (isDesktop) {
+      return (
+         <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+               <Button variant="outline">Edit Profile</Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+               <DialogHeader>
+                  <DialogTitle>Edit profile</DialogTitle>
+                  <DialogDescription>
+                     Make changes to your profile here. Click save when you're
+                     done.
+                  </DialogDescription>
+               </DialogHeader>
+               <ProfileForm />
+            </DialogContent>
+         </Dialog>
+      )
+   }
+
+   return (
+      <Drawer open={open} onOpenChange={setOpen}>
+         <DrawerTrigger asChild>
+            <Button variant="outline">Edit Profile</Button>
+         </DrawerTrigger>
+         <DrawerContent>
+            <DrawerHeader className="text-left">
+               <DrawerTitle>Edit profile</DrawerTitle>
+               <DrawerDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+               </DrawerDescription>
+            </DrawerHeader>
+            <ProfileForm className="px-4" />
+            <DrawerFooter className="pt-2">
+               <DrawerClose asChild>
+                  <Button variant="outline">Cancel</Button>
+               </DrawerClose>
+            </DrawerFooter>
+         </DrawerContent>
+      </Drawer>
+   )
+}
+
+function ProfileForm({ className }: React.ComponentProps<"form">) {
+   return (
+      <form className={ny("grid items-start gap-4", className)}>
+         <div className="grid gap-2">
+            <Label htmlFor="email">Email</Label>
+            <Input type="email" id="email" defaultValue="nyxb@example.com" />
+         </div>
+         <div className="grid gap-2">
+            <Label htmlFor="username">Username</Label>
+            <Input id="username" defaultValue="~nyxb" />
+         </div>
+         <Button type="submit">Save changes</Button>
+      </form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/dropdown-menu-checkboxes.tsx b/apps/web/registry/miami/examples/dropdown-menu-checkboxes.tsx
new file mode 100644
index 00000000..af205f5b
--- /dev/null
+++ b/apps/web/registry/miami/examples/dropdown-menu-checkboxes.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import type { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   DropdownMenu,
+   DropdownMenuCheckboxItem,
+   DropdownMenuContent,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+
+type Checked = DropdownMenuCheckboxItemProps["checked"]
+
+export default function DropdownMenuCheckboxes() {
+   const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
+   const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
+   const [showPanel, setShowPanel] = React.useState<Checked>(false)
+
+   return (
+      <DropdownMenu>
+         <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open</Button>
+         </DropdownMenuTrigger>
+         <DropdownMenuContent className="w-56">
+            <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuCheckboxItem
+               checked={showStatusBar}
+               onCheckedChange={setShowStatusBar}
+            >
+               Status Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem
+               checked={showActivityBar}
+               onCheckedChange={setShowActivityBar}
+               disabled
+            >
+               Activity Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem
+               checked={showPanel}
+               onCheckedChange={setShowPanel}
+            >
+               Panel
+            </DropdownMenuCheckboxItem>
+         </DropdownMenuContent>
+      </DropdownMenu>
+   )
+}
diff --git a/apps/web/registry/miami/examples/dropdown-menu-demo.tsx b/apps/web/registry/miami/examples/dropdown-menu-demo.tsx
new file mode 100644
index 00000000..5b2483e4
--- /dev/null
+++ b/apps/web/registry/miami/examples/dropdown-menu-demo.tsx
@@ -0,0 +1,75 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuPortal,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuSub,
+   DropdownMenuSubContent,
+   DropdownMenuSubTrigger,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+
+export default function DropdownMenuDemo() {
+   return (
+      <DropdownMenu>
+         <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open</Button>
+         </DropdownMenuTrigger>
+         <DropdownMenuContent className="w-56">
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+               <DropdownMenuItem>
+                  Profile
+                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+               </DropdownMenuItem>
+               <DropdownMenuItem>
+                  Billing
+                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+               </DropdownMenuItem>
+               <DropdownMenuItem>
+                  Settings
+                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+               </DropdownMenuItem>
+               <DropdownMenuItem>
+                  Keyboard shortcuts
+                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+               </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+               <DropdownMenuItem>Team</DropdownMenuItem>
+               <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                     <DropdownMenuSubContent>
+                        <DropdownMenuItem>Email</DropdownMenuItem>
+                        <DropdownMenuItem>Message</DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>More...</DropdownMenuItem>
+                     </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+               </DropdownMenuSub>
+               <DropdownMenuItem>
+                  New Team
+                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+               </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>GitHub</DropdownMenuItem>
+            <DropdownMenuItem>Support</DropdownMenuItem>
+            <DropdownMenuItem disabled>API</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+               Log out
+               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+            </DropdownMenuItem>
+         </DropdownMenuContent>
+      </DropdownMenu>
+   )
+}
diff --git a/apps/web/registry/miami/examples/dropdown-menu-radio-group.tsx b/apps/web/registry/miami/examples/dropdown-menu-radio-group.tsx
new file mode 100644
index 00000000..ff68a384
--- /dev/null
+++ b/apps/web/registry/miami/examples/dropdown-menu-radio-group.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuLabel,
+   DropdownMenuRadioGroup,
+   DropdownMenuRadioItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+
+export default function DropdownMenuRadioGroupDemo() {
+   const [position, setPosition] = React.useState("bottom")
+
+   return (
+      <DropdownMenu>
+         <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open</Button>
+         </DropdownMenuTrigger>
+         <DropdownMenuContent className="w-56">
+            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuRadioGroup
+               value={position}
+               onValueChange={setPosition}
+            >
+               <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+               <DropdownMenuRadioItem value="bottom">
+                  Bottom
+               </DropdownMenuRadioItem>
+               <DropdownMenuRadioItem value="right">
+                  Right
+               </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+         </DropdownMenuContent>
+      </DropdownMenu>
+   )
+}
diff --git a/apps/web/registry/miami/examples/fade-text-demo.tsx b/apps/web/registry/miami/examples/fade-text-demo.tsx
new file mode 100644
index 00000000..f2adda2c
--- /dev/null
+++ b/apps/web/registry/miami/examples/fade-text-demo.tsx
@@ -0,0 +1,40 @@
+import { FadeText } from "~/registry/miami/ui/fade-text"
+
+export default async function FadeTextDemo() {
+   return (
+      <div className="flex flex-col space-y-8 text-center">
+         <FadeText
+            className="text-4xl font-bold text-black dark:text-white"
+            direction="up"
+            framerProps={{
+               show: { transition: { delay: 0.2 } },
+            }}
+            text="Fade Up"
+         />
+         <FadeText
+            className="text-4xl font-bold text-black dark:text-white"
+            direction="right"
+            framerProps={{
+               show: { transition: { delay: 0.4 } },
+            }}
+            text="Fade Right"
+         />
+         <FadeText
+            className="text-4xl font-bold text-black dark:text-white"
+            direction="down"
+            framerProps={{
+               show: { transition: { delay: 0.6 } },
+            }}
+            text="Fade Down"
+         />
+         <FadeText
+            className="text-4xl font-bold text-black dark:text-white"
+            direction="left"
+            framerProps={{
+               show: { transition: { delay: 0.8 } },
+            }}
+            text="Fade Left"
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/file-tree-demo.tsx b/apps/web/registry/miami/examples/file-tree-demo.tsx
new file mode 100644
index 00000000..bcab05dd
--- /dev/null
+++ b/apps/web/registry/miami/examples/file-tree-demo.tsx
@@ -0,0 +1,111 @@
+import { File, Folder, Tree } from "~/registry/miami/ui/file-tree"
+
+export default function FileTreeDemo() {
+   return (
+      <div className="bg-background relative flex h-[300px] w-1/2 flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
+         <Tree
+            className="bg-background overflow-hidden rounded-md p-2"
+            initialSelectedId="7"
+            initialExpandedItems={[
+               "1",
+               "2",
+               "3",
+               "4",
+               "5",
+               "6",
+               "7",
+               "8",
+               "9",
+               "10",
+               "11",
+            ]}
+            elements={ELEMENTS}
+         >
+            <Folder element="src" value="1">
+               <Folder value="2" element="app">
+                  <File value="3">
+                     <p>layout.tsx</p>
+                  </File>
+                  <File value="4">
+                     <p>page.tsx</p>
+                  </File>
+               </Folder>
+               <Folder value="5" element="components">
+                  <Folder value="6" element="ui">
+                     <File value="7">
+                        <p>button.tsx</p>
+                     </File>
+                  </Folder>
+                  <File value="8">
+                     <p>header.tsx</p>
+                  </File>
+                  <File value="9">
+                     <p>footer.tsx</p>
+                  </File>
+               </Folder>
+               <Folder value="10" element="lib">
+                  <File value="11">
+                     <p>utils.ts</p>
+                  </File>
+               </Folder>
+            </Folder>
+         </Tree>
+      </div>
+   )
+}
+
+const ELEMENTS = [
+   {
+      id: "1",
+      isSelectable: true,
+      name: "src",
+      children: [
+         {
+            id: "2",
+            isSelectable: true,
+            name: "app",
+            children: [
+               {
+                  id: "3",
+                  isSelectable: true,
+                  name: "layout.tsx",
+               },
+               {
+                  id: "4",
+                  isSelectable: true,
+                  name: "page.tsx",
+               },
+            ],
+         },
+         {
+            id: "5",
+            isSelectable: true,
+            name: "components",
+            children: [
+               {
+                  id: "6",
+                  isSelectable: true,
+                  name: "header.tsx",
+               },
+               {
+                  id: "7",
+                  isSelectable: true,
+                  name: "footer.tsx",
+               },
+            ],
+         },
+         {
+            id: "8",
+            isSelectable: true,
+            name: "lib",
+            children: [
+               {
+                  id: "9",
+                  isSelectable: true,
+                  name: "utils.ts",
+               },
+            ],
+         },
+      ],
+   },
+]
diff --git a/apps/web/registry/miami/examples/flickering-grid-demo.tsx b/apps/web/registry/miami/examples/flickering-grid-demo.tsx
new file mode 100644
index 00000000..5eb2da74
--- /dev/null
+++ b/apps/web/registry/miami/examples/flickering-grid-demo.tsx
@@ -0,0 +1,18 @@
+import { FlickeringGrid } from "~/registry/miami/ui/flickering-grid"
+
+export default function FlickeringGridDemo() {
+   return (
+      <div className="relative h-[500px] w-full overflow-hidden rounded-lg border bg-background">
+         <FlickeringGrid
+            className="absolute inset-0 z-0 size-full"
+            squareSize={4}
+            gridGap={6}
+            color="#6B7280"
+            maxOpacity={0.5}
+            flickerChance={0.1}
+            height={800}
+            width={800}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/flickering-grid-rounded-demo.tsx b/apps/web/registry/miami/examples/flickering-grid-rounded-demo.tsx
new file mode 100644
index 00000000..1097f280
--- /dev/null
+++ b/apps/web/registry/miami/examples/flickering-grid-rounded-demo.tsx
@@ -0,0 +1,18 @@
+import { FlickeringGrid } from "~/registry/miami/ui/flickering-grid"
+
+export default function FlickeringGridRoundedDemo() {
+   return (
+      <div className="relative size-[600px] w-full overflow-hidden rounded-lg border bg-background">
+         <FlickeringGrid
+            className="relative inset-0 z-0 [mask-image:radial-gradient(450px_circle_at_center,white,transparent)]"
+            squareSize={4}
+            gridGap={6}
+            color="#60A5FA"
+            maxOpacity={0.5}
+            flickerChance={0.1}
+            height={800}
+            width={800}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/flip-text-demo.tsx b/apps/web/registry/miami/examples/flip-text-demo.tsx
new file mode 100644
index 00000000..5e81026b
--- /dev/null
+++ b/apps/web/registry/miami/examples/flip-text-demo.tsx
@@ -0,0 +1,10 @@
+import FlipText from "~/registry/miami/ui/flip-text"
+
+export default async function FlipTextDemo() {
+   return (
+      <FlipText
+         className="text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
+         word="Flip Text"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/gauge-circle-demo.tsx b/apps/web/registry/miami/examples/gauge-circle-demo.tsx
new file mode 100644
index 00000000..79a76024
--- /dev/null
+++ b/apps/web/registry/miami/examples/gauge-circle-demo.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import GaugeCircle from "~/registry/miami/ui/gauge-circle"
+
+export default function GaugeCircleDemo() {
+   const [value, setValue] = useState(0)
+
+   useEffect(() => {
+      const handleIncrement = (prev: number) => {
+         if (prev === 100) return 0
+
+         return prev + 10
+      }
+      setValue(handleIncrement)
+      const interval = setInterval(() => setValue(handleIncrement), 2000)
+      return () => clearInterval(interval)
+   }, [])
+
+   return (
+      <GaugeCircle
+         max={100}
+         min={0}
+         value={value}
+         gaugePrimaryColor="rgb(79 70 229)"
+         gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/globe-demo.tsx b/apps/web/registry/miami/examples/globe-demo.tsx
new file mode 100644
index 00000000..924d6410
--- /dev/null
+++ b/apps/web/registry/miami/examples/globe-demo.tsx
@@ -0,0 +1,13 @@
+import Globe from "~/registry/miami/ui/globe"
+
+export default function GlobeDemo() {
+   return (
+      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-40 pb-40 pt-8 md:pb-60 md:shadow-xl">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Globe
+         </span>
+         <Globe className="top-28" />
+         <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/globe-grid-demo.tsx b/apps/web/registry/miami/examples/globe-grid-demo.tsx
new file mode 100644
index 00000000..4c25e913
--- /dev/null
+++ b/apps/web/registry/miami/examples/globe-grid-demo.tsx
@@ -0,0 +1,7 @@
+import { GlobeGrid } from "~/registry/miami/ui/globe-grid"
+
+export function GlobeGridDemo() {
+   return <GlobeGrid />
+}
+
+export default GlobeGridDemo
diff --git a/apps/web/registry/miami/examples/globe-grid-full-demo.tsx b/apps/web/registry/miami/examples/globe-grid-full-demo.tsx
new file mode 100644
index 00000000..28e4f7ec
--- /dev/null
+++ b/apps/web/registry/miami/examples/globe-grid-full-demo.tsx
@@ -0,0 +1,7 @@
+import { GlobeGrid } from "~/registry/miami/ui/globe-grid"
+
+export function GlobeGridDemo() {
+   return <GlobeGrid fullGlobe />
+}
+
+export default GlobeGridDemo
diff --git a/apps/web/registry/miami/examples/gradual-spacing-demo.tsx b/apps/web/registry/miami/examples/gradual-spacing-demo.tsx
new file mode 100644
index 00000000..4a584209
--- /dev/null
+++ b/apps/web/registry/miami/examples/gradual-spacing-demo.tsx
@@ -0,0 +1,10 @@
+import GradualSpacing from "~/registry/miami/ui/gradual-spacing"
+
+export default async function GradualSpacingDemo() {
+   return (
+      <GradualSpacing
+         className="font-display text-center text-4xl font-bold -tracking-widest  text-black md:text-7xl md:leading-[5rem] dark:text-white"
+         text="Gradual Spacing"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/grid-layout-columns-demo.tsx b/apps/web/registry/miami/examples/grid-layout-columns-demo.tsx
new file mode 100644
index 00000000..f720b517
--- /dev/null
+++ b/apps/web/registry/miami/examples/grid-layout-columns-demo.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import GridLayout from "~/registry/default/ui/grid-layout"
+
+export default function GridLayoutColumnsDemo() {
+   return (
+      <div className="space-y-8">
+         <GridLayout
+            columns={8}
+            className="min-h-[150px] p-4"
+            crosshairs={{
+               topLeft: true,
+               bottomRight: true,
+            }}
+         >
+            <div className="flex h-full items-center justify-center">
+               <div className="text-center">
+                  <h3 className="text-xl font-medium">8 Columns</h3>
+                  <p className="text-muted-foreground mt-1">Compact layouts</p>
+               </div>
+            </div>
+         </GridLayout>
+
+         <GridLayout
+            columns={12}
+            className="min-h-[150px] p-4"
+            crosshairs={{
+               topLeft: true,
+               bottomRight: true,
+            }}
+         >
+            <div className="flex h-full items-center justify-center">
+               <div className="text-center">
+                  <h3 className="text-xl font-medium">12 Columns</h3>
+                  <p className="text-muted-foreground mt-1">Traditional grid</p>
+               </div>
+            </div>
+         </GridLayout>
+
+         <GridLayout
+            columns={16}
+            className="min-h-[150px] p-4"
+            crosshairs={{
+               topLeft: true,
+               bottomRight: true,
+            }}
+         >
+            <div className="flex h-full items-center justify-center">
+               <div className="text-center">
+                  <h3 className="text-xl font-medium">16 Columns</h3>
+                  <p className="text-muted-foreground mt-1">
+                     Fine-grained control
+                  </p>
+               </div>
+            </div>
+         </GridLayout>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/grid-layout-crosshairs-demo.tsx b/apps/web/registry/miami/examples/grid-layout-crosshairs-demo.tsx
new file mode 100644
index 00000000..62fde488
--- /dev/null
+++ b/apps/web/registry/miami/examples/grid-layout-crosshairs-demo.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import GridLayout from "~/registry/default/ui/grid-layout"
+
+export default function GridLayoutCrosshairsDemo() {
+   return (
+      <GridLayout
+         crosshairs={{
+            topLeft: true,
+            topRight: true,
+            bottomLeft: true,
+            bottomRight: true,
+         }}
+         lineVariant="none"
+         className="min-h-[350px] p-6"
+      >
+         <div className="flex h-full flex-col items-center justify-center space-y-4">
+            <div className="text-center">
+               <h3 className="text-2xl font-medium">Corner Markers</h3>
+               <p className="text-muted-foreground mt-2">
+                  Use crosshairs to highlight key areas or create visual anchors
+               </p>
+            </div>
+            <div className="grid w-full max-w-xl grid-cols-2 gap-8 pt-8">
+               <div className="bg-card rounded-lg border p-4 text-center">
+                  Top Left
+               </div>
+               <div className="bg-card rounded-lg border p-4 text-center">
+                  Top Right
+               </div>
+               <div className="bg-card rounded-lg border p-4 text-center">
+                  Bottom Left
+               </div>
+               <div className="bg-card rounded-lg border p-4 text-center">
+                  Bottom Right
+               </div>
+            </div>
+         </div>
+      </GridLayout>
+   )
+}
diff --git a/apps/web/registry/miami/examples/grid-layout-demo.tsx b/apps/web/registry/miami/examples/grid-layout-demo.tsx
new file mode 100644
index 00000000..c8bd300b
--- /dev/null
+++ b/apps/web/registry/miami/examples/grid-layout-demo.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import { Button } from "~/registry/default/ui/button"
+import GridLayout from "~/registry/default/ui/grid-layout"
+
+export default function GridLayoutDemo() {
+   return (
+      <GridLayout
+         crosshairs={{
+            topLeft: true,
+            bottomRight: true,
+         }}
+         lineVariant="center"
+         className="min-h-[350px] p-8"
+      >
+         <div className="space-y-8">
+            <div>
+               <h2 className="text-4xl font-medium tracking-tight">
+                  Ready to deploy?{" "}
+                  <span className="text-muted-foreground">
+                     Start building with a free account.
+                  </span>
+               </h2>
+               <p className="text-muted-foreground mt-4 text-xl">
+                  Speak to an expert for your{" "}
+                  <span className="text-blue-500">Pro</span> or{" "}
+                  <span className="text-purple-500">Enterprise</span> needs.
+               </p>
+            </div>
+            <div className="flex gap-4">
+               <Button variant="default" size="lg">
+                  Start Deploying
+               </Button>
+               <Button variant="outline" size="lg">
+                  Contact Sales
+               </Button>
+            </div>
+         </div>
+      </GridLayout>
+   )
+}
diff --git a/apps/web/registry/miami/examples/grid-layout-variants-demo.tsx b/apps/web/registry/miami/examples/grid-layout-variants-demo.tsx
new file mode 100644
index 00000000..630e47fb
--- /dev/null
+++ b/apps/web/registry/miami/examples/grid-layout-variants-demo.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import GridLayout from "~/registry/default/ui/grid-layout"
+
+export default function GridLayoutVariantsDemo() {
+   return (
+      <div className="space-y-8">
+         <GridLayout
+            lineVariant="center"
+            className="min-h-[150px]"
+            crosshairs={{
+               topLeft: true,
+               bottomRight: true,
+            }}
+         >
+            <div className="flex h-full items-center justify-center">
+               <div className="text-center">
+                  <h3 className="text-xl font-medium">Center Line</h3>
+                  <p className="text-muted-foreground mt-1">
+                     Minimal and focused
+                  </p>
+               </div>
+            </div>
+         </GridLayout>
+
+         <GridLayout
+            lineVariant="vertical"
+            className="min-h-[150px]"
+            crosshairs={{
+               topLeft: true,
+               bottomRight: true,
+            }}
+         >
+            <div className="flex h-full items-center justify-center">
+               <div className="text-center">
+                  <h3 className="text-xl font-medium">Vertical Lines</h3>
+                  <p className="text-muted-foreground mt-1">
+                     Column-focused layout
+                  </p>
+               </div>
+            </div>
+         </GridLayout>
+
+         <GridLayout
+            lineVariant="horizontal"
+            className="min-h-[150px]"
+            crosshairs={{
+               topLeft: true,
+               bottomRight: true,
+            }}
+         >
+            <div className="flex h-full items-center justify-center">
+               <div className="text-center">
+                  <h3 className="text-xl font-medium">Horizontal Lines</h3>
+                  <p className="text-muted-foreground mt-1">
+                     Row-based organization
+                  </p>
+               </div>
+            </div>
+         </GridLayout>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/grid-pattern-dashed.tsx b/apps/web/registry/miami/examples/grid-pattern-dashed.tsx
new file mode 100644
index 00000000..f9ff9f60
--- /dev/null
+++ b/apps/web/registry/miami/examples/grid-pattern-dashed.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { ny } from "~/registry/miami/lib/utils"
+import { GridPattern } from "~/registry/miami/ui/grid-pattern"
+
+export default function GridPatternDashed() {
+   return (
+      <div className="relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Grid Pattern
+         </p>
+         <GridPattern
+            width={30}
+            height={30}
+            x={-1}
+            y={-1}
+            strokeDasharray={"4 2"}
+            className={ny(
+               "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/grid-pattern-demo.tsx b/apps/web/registry/miami/examples/grid-pattern-demo.tsx
new file mode 100644
index 00000000..4cdb58eb
--- /dev/null
+++ b/apps/web/registry/miami/examples/grid-pattern-demo.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { ny } from "~/registry/miami/lib/utils"
+import { GridPattern } from "~/registry/miami/ui/grid-pattern"
+
+export default function GridPatternDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Grid Pattern
+         </p>
+         <GridPattern
+            squares={[
+               [4, 4],
+               [5, 1],
+               [8, 2],
+               [5, 3],
+               [5, 5],
+               [10, 10],
+               [12, 15],
+               [15, 10],
+               [10, 15],
+               [15, 10],
+               [10, 15],
+               [15, 10],
+            ]}
+            className={ny(
+               "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
+               "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/grid-pattern-linear-gradient.tsx b/apps/web/registry/miami/examples/grid-pattern-linear-gradient.tsx
new file mode 100644
index 00000000..b6edf8bb
--- /dev/null
+++ b/apps/web/registry/miami/examples/grid-pattern-linear-gradient.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { ny } from "~/registry/miami/lib/utils"
+import { GridPattern } from "~/registry/miami/ui/grid-pattern"
+
+export default function GridPatternLinearGradient() {
+   return (
+      <div className="relative flex size-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Grid Pattern
+         </p>
+         <GridPattern
+            width={20}
+            height={20}
+            x={-1}
+            y={-1}
+            className={ny(
+               "[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/hero-video-demo.tsx b/apps/web/registry/miami/examples/hero-video-demo.tsx
new file mode 100644
index 00000000..030c983e
--- /dev/null
+++ b/apps/web/registry/miami/examples/hero-video-demo.tsx
@@ -0,0 +1,51 @@
+import { Button } from "~/components/ui/button"
+import HeroVideo, { HeroVideoAction } from "~/registry/miami/ui/hero-video"
+import { MagicCard, MagicContainer } from "~/registry/miami/ui/magic-card"
+
+function PlayButton() {
+   return (
+      <svg
+         xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 24 24"
+         fill="currentColor"
+         className="dark:text-white"
+      >
+         <path
+            fillRule="evenodd"
+            d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
+            clipRule="evenodd"
+         />
+      </svg>
+   )
+}
+
+export default function HeroVideoDemo() {
+   return (
+      <div className="bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Hero Video
+         </span>
+
+         <MagicContainer>
+            <MagicCard className="min-h-[400px] [mask:linear-gradient(0deg,transparent_40%,#fff_100%)]">
+               <HeroVideo
+                  title="Nyxb UI Demo"
+                  image="https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200"
+               >
+                  <HeroVideoAction>
+                     <Button className="size-20 rounded-full" variant="outline">
+                        <PlayButton />
+                     </Button>
+                  </HeroVideoAction>
+                  <video
+                     autoPlay
+                     className="rounded-xl dark:border"
+                     playsInline
+                     src="https://cdn.nyxbui.design/globe.mp4"
+                  />
+               </HeroVideo>
+            </MagicCard>
+         </MagicContainer>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/hero-video-dialog-demo-top-in-bottom-out.tsx b/apps/web/registry/miami/examples/hero-video-dialog-demo-top-in-bottom-out.tsx
new file mode 100644
index 00000000..56cdbe8b
--- /dev/null
+++ b/apps/web/registry/miami/examples/hero-video-dialog-demo-top-in-bottom-out.tsx
@@ -0,0 +1,22 @@
+import HeroVideoDialog from "~/registry/miami/ui/hero-video-dialog"
+
+export default function HeroVideoDialogDemoTopInBottomOut() {
+   return (
+      <div className="relative">
+         <HeroVideoDialog
+            className="block dark:hidden"
+            animationStyle="top-in-bottom-out"
+            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
+            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-light.png"
+            thumbnailAlt="Hero Video"
+         />
+         <HeroVideoDialog
+            className="hidden dark:block"
+            animationStyle="top-in-bottom-out"
+            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
+            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-dark.png"
+            thumbnailAlt="Hero Video"
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/hero-video-dialog-demo.tsx b/apps/web/registry/miami/examples/hero-video-dialog-demo.tsx
new file mode 100644
index 00000000..3c874571
--- /dev/null
+++ b/apps/web/registry/miami/examples/hero-video-dialog-demo.tsx
@@ -0,0 +1,22 @@
+import HeroVideoDialog from "~/registry/miami/ui/hero-video-dialog"
+
+export default function HeroVideoDialogDemo() {
+   return (
+      <div className="relative">
+         <HeroVideoDialog
+            className="block dark:hidden"
+            animationStyle="from-center"
+            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
+            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-light.png"
+            thumbnailAlt="Hero Video"
+         />
+         <HeroVideoDialog
+            className="hidden dark:block"
+            animationStyle="from-center"
+            videoSrc="https://www.youtube.com/embed/oSgNzZifhEA?si=uLdYEP57m0bZEngR"
+            thumbnailSrc="https://startup-nyxbui.vercel.app/hero-dark.png"
+            thumbnailAlt="Hero Video"
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/hero-video-youtube.tsx b/apps/web/registry/miami/examples/hero-video-youtube.tsx
new file mode 100644
index 00000000..bf01f3e8
--- /dev/null
+++ b/apps/web/registry/miami/examples/hero-video-youtube.tsx
@@ -0,0 +1,52 @@
+import { Button } from "~/components/ui/button"
+import HeroVideo, { HeroVideoAction } from "~/registry/miami/ui/hero-video"
+import { MagicCard, MagicContainer } from "~/registry/miami/ui/magic-card"
+
+function PlayButton() {
+   return (
+      <svg
+         xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 24 24"
+         fill="currentColor"
+         className="dark:text-white"
+      >
+         <path
+            fillRule="evenodd"
+            d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
+            clipRule="evenodd"
+         />
+      </svg>
+   )
+}
+
+export default function HeroVideoDemo() {
+   return (
+      <div className="bg-background relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg border p-10">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Never gonna give you up
+         </span>
+         {/* Magic Card  */}
+         <MagicContainer className="relative">
+            <MagicCard className="min-h-[400px] [mask:linear-gradient(0deg,transparent_20%,#fff_100%)]">
+               <HeroVideo
+                  title="Never gonna give you up"
+                  image="https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024"
+               >
+                  <HeroVideoAction>
+                     <Button className="size-20 rounded-full" variant="outline">
+                        <PlayButton />
+                     </Button>
+                  </HeroVideoAction>
+                  <iframe
+                     height="500"
+                     className="h-[500px] rounded-xl border"
+                     src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=FmFbhzaToJQ9iXN4"
+                     title="YouTube video player"
+                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  />
+               </HeroVideo>
+            </MagicCard>
+         </MagicContainer>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/hover-card-demo.tsx b/apps/web/registry/miami/examples/hover-card-demo.tsx
new file mode 100644
index 00000000..e4d66f97
--- /dev/null
+++ b/apps/web/registry/miami/examples/hover-card-demo.tsx
@@ -0,0 +1,39 @@
+import { CalendarIcon } from "@radix-ui/react-icons"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   HoverCard,
+   HoverCardContent,
+   HoverCardTrigger,
+} from "~/registry/miami/ui/hover-card"
+
+export default function HoverCardDemo() {
+   return (
+      <HoverCard>
+         <HoverCardTrigger asChild>
+            <Button variant="link">@nextjs</Button>
+         </HoverCardTrigger>
+         <HoverCardContent className="w-80">
+            <div className="flex justify-between space-x-4">
+               <Avatar>
+                  <AvatarImage src="https://github.com/vercel.png" />
+                  <AvatarFallback>VC</AvatarFallback>
+               </Avatar>
+               <div className="space-y-1">
+                  <h4 className="text-sm font-semibold">@nextjs</h4>
+                  <p className="text-sm">
+                     The React Framework – created and maintained by @vercel.
+                  </p>
+                  <div className="flex items-center pt-2">
+                     <CalendarIcon className="mr-2 size-4 opacity-70" />{" "}
+                     <span className="text-muted-foreground text-xs">
+                        Joined December 2021
+                     </span>
+                  </div>
+               </div>
+            </div>
+         </HoverCardContent>
+      </HoverCard>
+   )
+}
diff --git a/apps/web/registry/miami/examples/hyper-text-demo.tsx b/apps/web/registry/miami/examples/hyper-text-demo.tsx
new file mode 100644
index 00000000..bb75daa9
--- /dev/null
+++ b/apps/web/registry/miami/examples/hyper-text-demo.tsx
@@ -0,0 +1,10 @@
+import HyperText from "~/registry/miami/ui/hyper-text"
+
+export default function HyperTextDemo() {
+   return (
+      <HyperText
+         className="text-4xl font-bold text-black dark:text-white"
+         text="Hyper Text"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/icon-cloud-demo.tsx b/apps/web/registry/miami/examples/icon-cloud-demo.tsx
new file mode 100644
index 00000000..7e4ee1b5
--- /dev/null
+++ b/apps/web/registry/miami/examples/icon-cloud-demo.tsx
@@ -0,0 +1,42 @@
+import IconCloud from "~/registry/miami/ui/icon-cloud"
+
+const slugs = [
+   "typescript",
+   "javascript",
+   "dart",
+   "java",
+   "react",
+   "flutter",
+   "android",
+   "html5",
+   "css3",
+   "nodedotjs",
+   "express",
+   "nextdotjs",
+   "prisma",
+   "amazonaws",
+   "postgresql",
+   "firebase",
+   "nginx",
+   "vercel",
+   "testinglibrary",
+   "jest",
+   "cypress",
+   "docker",
+   "git",
+   "jira",
+   "github",
+   "gitlab",
+   "visualstudiocode",
+   "androidstudio",
+   "sonarqube",
+   "figma",
+]
+
+export default function IconCloudDemo() {
+   return (
+      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-20 pb-20 pt-8 ">
+         <IconCloud iconSlugs={slugs} />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-demo.tsx b/apps/web/registry/miami/examples/input-demo.tsx
new file mode 100644
index 00000000..ec947181
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-demo.tsx
@@ -0,0 +1,5 @@
+import { Input } from "~/registry/miami/ui/input"
+
+export default function InputDemo() {
+   return <Input type="email" placeholder="Email" />
+}
diff --git a/apps/web/registry/miami/examples/input-disabled.tsx b/apps/web/registry/miami/examples/input-disabled.tsx
new file mode 100644
index 00000000..21bcfac6
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-disabled.tsx
@@ -0,0 +1,5 @@
+import { Input } from "~/registry/miami/ui/input"
+
+export default function InputDisabled() {
+   return <Input disabled type="email" placeholder="Email" />
+}
diff --git a/apps/web/registry/miami/examples/input-file.tsx b/apps/web/registry/miami/examples/input-file.tsx
new file mode 100644
index 00000000..47f85cad
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-file.tsx
@@ -0,0 +1,11 @@
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export default function InputFile() {
+   return (
+      <div className="grid w-full max-w-sm items-center gap-1.5">
+         <Label htmlFor="picture">Picture</Label>
+         <Input id="picture" type="file" />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-form.tsx b/apps/web/registry/miami/examples/input-form.tsx
new file mode 100644
index 00000000..2b1cb5f9
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-form.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/miami/ui/form"
+import { Input } from "~/registry/miami/ui/input"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const FormSchema = z.object({
+   username: z.string().min(2, {
+      message: "Username must be at least 2 characters.",
+   }),
+})
+
+export default function InputForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+         username: "",
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="username"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Username</FormLabel>
+                     <FormControl>
+                        <Input placeholder="nyxb" {...field} />
+                     </FormControl>
+                     <FormDescription>
+                        This is your public display name.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-otp-controlled.tsx b/apps/web/registry/miami/examples/input-otp-controlled.tsx
new file mode 100644
index 00000000..7cddeaf0
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-otp-controlled.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSlot,
+} from "~/registry/miami/ui/input-otp"
+
+export default function InputOTPControlled() {
+   const [value, setValue] = React.useState("")
+
+   return (
+      <div className="space-y-2">
+         <InputOTP
+            maxLength={6}
+            value={value}
+            onChange={(value) => setValue(value)}
+         >
+            <InputOTPGroup>
+               <InputOTPSlot index={0} />
+               <InputOTPSlot index={1} />
+               <InputOTPSlot index={2} />
+               <InputOTPSlot index={3} />
+               <InputOTPSlot index={4} />
+               <InputOTPSlot index={5} />
+            </InputOTPGroup>
+         </InputOTP>
+         <div className="text-center text-sm">
+            {value === "" ? (
+               <>Enter your one-time password.</>
+            ) : (
+               <>
+                  You entered:
+                  {value}
+               </>
+            )}
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-otp-demo.tsx b/apps/web/registry/miami/examples/input-otp-demo.tsx
new file mode 100644
index 00000000..36aa5d49
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-otp-demo.tsx
@@ -0,0 +1,24 @@
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSeparator,
+   InputOTPSlot,
+} from "~/registry/miami/ui/input-otp"
+
+export default function InputOTPDemo() {
+   return (
+      <InputOTP maxLength={6}>
+         <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+         </InputOTPGroup>
+         <InputOTPSeparator />
+         <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+         </InputOTPGroup>
+      </InputOTP>
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-otp-disabled.tsx b/apps/web/registry/miami/examples/input-otp-disabled.tsx
new file mode 100644
index 00000000..842ddb04
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-otp-disabled.tsx
@@ -0,0 +1,24 @@
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSeparator,
+   InputOTPSlot,
+} from "~/registry/default/ui/input-otp"
+
+export default function InputOTPDemo() {
+   return (
+      <InputOTP maxLength={6} disabled>
+         <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+         </InputOTPGroup>
+         <InputOTPSeparator />
+         <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+         </InputOTPGroup>
+      </InputOTP>
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-otp-form.tsx b/apps/web/registry/miami/examples/input-otp-form.tsx
new file mode 100644
index 00000000..94ac994d
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-otp-form.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/miami/ui/form"
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSlot,
+} from "~/registry/miami/ui/input-otp"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const FormSchema = z.object({
+   pin: z.string().min(6, {
+      message: "Your one-time password must be 6 characters.",
+   }),
+})
+
+export default function InputOTPForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+         pin: "",
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="pin"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>One-Time Password</FormLabel>
+                     <FormControl>
+                        <InputOTP maxLength={6} {...field}>
+                           <InputOTPGroup>
+                              <InputOTPSlot index={0} />
+                              <InputOTPSlot index={1} />
+                              <InputOTPSlot index={2} />
+                              <InputOTPSlot index={3} />
+                              <InputOTPSlot index={4} />
+                              <InputOTPSlot index={5} />
+                           </InputOTPGroup>
+                        </InputOTP>
+                     </FormControl>
+                     <FormDescription>
+                        Please enter the one-time password sent to your phone.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-otp-pattern.tsx b/apps/web/registry/miami/examples/input-otp-pattern.tsx
new file mode 100644
index 00000000..17ad8861
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-otp-pattern.tsx
@@ -0,0 +1,27 @@
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSlot,
+} from "~/registry/miami/ui/input-otp"
+
+export default function InputOTPPattern() {
+   return (
+      <InputOTP
+         maxLength={6}
+         pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+         inputMode="text"
+         spellCheck="false"
+      >
+         <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+         </InputOTPGroup>
+      </InputOTP>
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-otp-separator.tsx b/apps/web/registry/miami/examples/input-otp-separator.tsx
new file mode 100644
index 00000000..55f4413e
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-otp-separator.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSeparator,
+   InputOTPSlot,
+} from "~/registry/miami/ui/input-otp"
+
+export default function InputOTPWithSeparator() {
+   return (
+      <InputOTP maxLength={6}>
+         <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+         </InputOTPGroup>
+         <InputOTPSeparator />
+         <InputOTPGroup>
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+         </InputOTPGroup>
+         <InputOTPSeparator />
+         <InputOTPGroup>
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+         </InputOTPGroup>
+      </InputOTP>
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-phone-default.tsx b/apps/web/registry/miami/examples/input-phone-default.tsx
new file mode 100644
index 00000000..c475af20
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-phone-default.tsx
@@ -0,0 +1,9 @@
+import * as React from "react"
+
+import { InputPhone } from "~/registry/miami/ui/input-phone"
+
+export default function InputPhoneDefault() {
+   const [value, setValue] = React.useState("")
+
+   return <InputPhone value={value} onChange={setValue} defaultCountry="US" />
+}
diff --git a/apps/web/registry/miami/examples/input-phone-demo.tsx b/apps/web/registry/miami/examples/input-phone-demo.tsx
new file mode 100644
index 00000000..b022ee4c
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-phone-demo.tsx
@@ -0,0 +1,16 @@
+import * as React from "react"
+
+import { InputPhone } from "~/registry/miami/ui/input-phone"
+
+export default function InputPhoneDemo() {
+   const [value, setValue] = React.useState("")
+
+   return (
+      <InputPhone
+         value={value}
+         onChange={setValue}
+         placeholder="Enter a phone number"
+         defaultCountry="US"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-phone-form.tsx b/apps/web/registry/miami/examples/input-phone-form.tsx
new file mode 100644
index 00000000..06d6a9a0
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-phone-form.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { isValidPhoneNumber } from "react-phone-number-input"
+import { z } from "zod"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/miami/ui/form"
+import { InputPhone } from "~/registry/miami/ui/input-phone"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const FormSchema = z.object({
+   phone: z
+      .string()
+      .refine(isValidPhoneNumber, { message: "Invalid phone number" }),
+})
+
+export default function InputPhoneForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+         phone: "",
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="phone"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Phone Number</FormLabel>
+                     <FormControl>
+                        <InputPhone
+                           placeholder="Enter a phone number"
+                           {...field}
+                        />
+                     </FormControl>
+                     <FormDescription>
+                        Please enter a valid phone number.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-phone-initial.tsx b/apps/web/registry/miami/examples/input-phone-initial.tsx
new file mode 100644
index 00000000..4255cb6c
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-phone-initial.tsx
@@ -0,0 +1,15 @@
+import * as React from "react"
+
+import { InputPhone } from "~/registry/miami/ui/input-phone"
+
+export default function InputPhoneInitial() {
+   const [value, setValue] = React.useState("")
+
+   return (
+      <InputPhone
+         value={value}
+         onChange={setValue}
+         initialValueFormat="national"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-phone-international.tsx b/apps/web/registry/miami/examples/input-phone-international.tsx
new file mode 100644
index 00000000..d681d786
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-phone-international.tsx
@@ -0,0 +1,16 @@
+import * as React from "react"
+
+import { InputPhone } from "~/registry/miami/ui/input-phone"
+
+export default function InputPhoneInternational() {
+   const [value, setValue] = React.useState("")
+
+   return (
+      <InputPhone
+         value={value}
+         onChange={setValue}
+         international
+         defaultCountry="US"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-phone-national.tsx b/apps/web/registry/miami/examples/input-phone-national.tsx
new file mode 100644
index 00000000..4266e96a
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-phone-national.tsx
@@ -0,0 +1,16 @@
+import * as React from "react"
+
+import { InputPhone } from "~/registry/miami/ui/input-phone"
+
+export default function InputPhoneNational() {
+   const [value, setValue] = React.useState("")
+
+   return (
+      <InputPhone
+         value={value}
+         onChange={setValue}
+         international={false}
+         defaultCountry="US"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-with-button.tsx b/apps/web/registry/miami/examples/input-with-button.tsx
new file mode 100644
index 00000000..839c614d
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+
+export default function InputWithButton() {
+   return (
+      <div className="flex w-full max-w-sm items-center space-x-2">
+         <Input type="email" placeholder="Email" />
+         <Button type="submit">Subscribe</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-with-label.tsx b/apps/web/registry/miami/examples/input-with-label.tsx
new file mode 100644
index 00000000..73e9959c
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-with-label.tsx
@@ -0,0 +1,11 @@
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export default function InputWithLabel() {
+   return (
+      <div className="grid w-full max-w-sm items-center gap-1.5">
+         <Label htmlFor="email">Email</Label>
+         <Input type="email" id="email" placeholder="Email" />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/input-with-text.tsx b/apps/web/registry/miami/examples/input-with-text.tsx
new file mode 100644
index 00000000..71b57415
--- /dev/null
+++ b/apps/web/registry/miami/examples/input-with-text.tsx
@@ -0,0 +1,14 @@
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export default function InputWithText() {
+   return (
+      <div className="grid w-full max-w-sm items-center gap-1.5">
+         <Label htmlFor="email-2">Email</Label>
+         <Input type="email" id="email-2" placeholder="Email" />
+         <p className="text-muted-foreground text-sm">
+            Enter your email address.
+         </p>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/interactive-grid-pattern-demo-2.tsx b/apps/web/registry/miami/examples/interactive-grid-pattern-demo-2.tsx
new file mode 100644
index 00000000..6e4dc8ab
--- /dev/null
+++ b/apps/web/registry/miami/examples/interactive-grid-pattern-demo-2.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { ny } from "~/registry/miami/lib/utils"
+import { InteractiveGridPattern } from "~/registry/miami/ui/interactive-grid-pattern"
+
+export default function InteractiveGridPatternDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Interactive Grid Pattern
+         </p>
+         <InteractiveGridPattern
+            className={ny(
+               "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
+            )}
+            width={20}
+            height={20}
+            squares={[80, 80]}
+            squaresClassName="hover:fill-blue-500"
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/interactive-grid-pattern-demo.tsx b/apps/web/registry/miami/examples/interactive-grid-pattern-demo.tsx
new file mode 100644
index 00000000..b63e45b2
--- /dev/null
+++ b/apps/web/registry/miami/examples/interactive-grid-pattern-demo.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import { ny } from "~/registry/default/lib/utils"
+import { InteractiveGridPattern } from "~/registry/default/ui/interactive-grid-pattern"
+
+export default function InteractiveGridPatternDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Interactive Grid Pattern
+         </p>
+         <InteractiveGridPattern
+            className={ny(
+               "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
+               "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+            )}
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/iphone-15-pro-demo-2.tsx b/apps/web/registry/miami/examples/iphone-15-pro-demo-2.tsx
new file mode 100644
index 00000000..ffded339
--- /dev/null
+++ b/apps/web/registry/miami/examples/iphone-15-pro-demo-2.tsx
@@ -0,0 +1,12 @@
+import Iphone15Pro from "~/registry/miami/ui/iphone-15-pro"
+
+export default function Iphone15ProDemo() {
+   return (
+      <div className="relative">
+         <Iphone15Pro
+            className="size-full"
+            src="https://via.placeholder.com/430x880"
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/iphone-15-pro-demo.tsx b/apps/web/registry/miami/examples/iphone-15-pro-demo.tsx
new file mode 100644
index 00000000..a812bc08
--- /dev/null
+++ b/apps/web/registry/miami/examples/iphone-15-pro-demo.tsx
@@ -0,0 +1,9 @@
+import Iphone15Pro from "~/registry/miami/ui/iphone-15-pro"
+
+export default function Iphone15ProDemo() {
+   return (
+      <div className="relative">
+         <Iphone15Pro className="size-full" />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/label-demo.tsx b/apps/web/registry/miami/examples/label-demo.tsx
new file mode 100644
index 00000000..b099288e
--- /dev/null
+++ b/apps/web/registry/miami/examples/label-demo.tsx
@@ -0,0 +1,13 @@
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+import { Label } from "~/registry/miami/ui/label"
+
+export default function LabelDemo() {
+   return (
+      <div>
+         <div className="flex items-center space-x-2">
+            <Checkbox id="terms" />
+            <Label htmlFor="terms">Accept terms and conditions</Label>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/letter-pullup-demo.tsx b/apps/web/registry/miami/examples/letter-pullup-demo.tsx
new file mode 100644
index 00000000..4ae5573f
--- /dev/null
+++ b/apps/web/registry/miami/examples/letter-pullup-demo.tsx
@@ -0,0 +1,5 @@
+import LetterPullup from "~/registry/miami/ui/letter-pullup"
+
+export default async function LetterPullupDemo() {
+   return <LetterPullup words="Staggered Letter Pull Up" delay={0.05} />
+}
diff --git a/apps/web/registry/miami/examples/line-shadow-text-demo.tsx b/apps/web/registry/miami/examples/line-shadow-text-demo.tsx
new file mode 100644
index 00000000..c26cf2fe
--- /dev/null
+++ b/apps/web/registry/miami/examples/line-shadow-text-demo.tsx
@@ -0,0 +1,15 @@
+import { useTheme } from "next-themes"
+import { LineShadowText } from "~/registry/miami/ui/line-shadow-text"
+
+export default function LineShadowTextDemo() {
+   const theme = useTheme()
+   const shadowColor = theme.resolvedTheme === "dark" ? "white" : "black"
+   return (
+      <h1 className="text-balance text-5xl font-semibold leading-none tracking-tighter sm:text-6xl md:text-7xl lg:text-8xl">
+         Ship
+         <LineShadowText className="italic" shadowColor={shadowColor}>
+            Fast
+         </LineShadowText>
+      </h1>
+   )
+}
diff --git a/apps/web/registry/miami/examples/magic-card-demo.tsx b/apps/web/registry/miami/examples/magic-card-demo.tsx
new file mode 100644
index 00000000..ec81091b
--- /dev/null
+++ b/apps/web/registry/miami/examples/magic-card-demo.tsx
@@ -0,0 +1,26 @@
+import { MagicCard, MagicContainer } from "~/registry/miami/ui/magic-card"
+
+export default function MagicCardDemo() {
+   return (
+      <MagicContainer className="flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row">
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Magic
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Card
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Demo
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+      </MagicContainer>
+   )
+}
diff --git a/apps/web/registry/miami/examples/magic-card-gradient.tsx b/apps/web/registry/miami/examples/magic-card-gradient.tsx
new file mode 100644
index 00000000..b7d1ad3d
--- /dev/null
+++ b/apps/web/registry/miami/examples/magic-card-gradient.tsx
@@ -0,0 +1,29 @@
+import { MagicCard, MagicContainer } from "~/registry/miami/ui/magic-card"
+
+export default function MagicCardGradient() {
+   return (
+      <MagicContainer className="flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row">
+         <MagicCard
+            borderWidth={3}
+            className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl"
+         >
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Magic
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Card
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Demo
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+      </MagicContainer>
+   )
+}
diff --git a/apps/web/registry/miami/examples/marquee-3d.tsx b/apps/web/registry/miami/examples/marquee-3d.tsx
new file mode 100644
index 00000000..f78443c8
--- /dev/null
+++ b/apps/web/registry/miami/examples/marquee-3d.tsx
@@ -0,0 +1,59 @@
+import Marquee from "~/registry/miami/ui/marquee"
+
+const logos = [
+   {
+      name: "Microsoft",
+      img: "https://picsum.photos/id/1/200/300",
+   },
+   {
+      name: "Apple",
+      img: "https://picsum.photos/id/2/200/300",
+   },
+   {
+      name: "Google",
+      img: "https://picsum.photos/id/3/200/300",
+   },
+   {
+      name: "Facebook",
+      img: "https://picsum.photos/id/4/200/300",
+   },
+   {
+      name: "LinkedIn",
+      img: "https://picsum.photos/id/5/200/300",
+   },
+   {
+      name: "Twitter",
+      img: "https://picsum.photos/id/6/200/300",
+   },
+]
+
+function Marquee3D() {
+   return (
+      <div className="bg-background relative flex h-full w-96 flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border px-20 md:shadow-xl">
+         <div className="flex flex-row gap-4 [perspective:300px]">
+            <Marquee
+               className="h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]"
+               vertical
+               style={{
+                  transform:
+                     "translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)",
+               }}
+            >
+               {logos.map((data, idx) => (
+                  <img
+                     key={idx}
+                     src={data.img}
+                     alt={data.name}
+                     className="mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300"
+                  />
+               ))}
+            </Marquee>
+         </div>
+
+         <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
+         <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
+      </div>
+   )
+}
+
+export default Marquee3D
diff --git a/apps/web/registry/miami/examples/marquee-demo-vertical.tsx b/apps/web/registry/miami/examples/marquee-demo-vertical.tsx
new file mode 100644
index 00000000..4a8803c8
--- /dev/null
+++ b/apps/web/registry/miami/examples/marquee-demo-vertical.tsx
@@ -0,0 +1,90 @@
+import { ny } from "~/lib/utils"
+import Marquee from "~/registry/miami/ui/marquee"
+
+const reviews = [
+   {
+      name: "Jack",
+      username: "@jack",
+      body: "I've never seen anything like this before. It's amazing. I love it.",
+      img: "https://avatar.vercel.sh/jack",
+   },
+   {
+      name: "Jill",
+      username: "@jill",
+      body: "I don't know what to say. I'm speechless. This is amazing.",
+      img: "https://avatar.vercel.sh/jill",
+   },
+   {
+      name: "John",
+      username: "@john",
+      body: "I'm at a loss for words. This is amazing. I love it.",
+      img: "https://avatar.vercel.sh/john",
+   },
+]
+
+const firstRow = reviews.slice(0, reviews.length / 2)
+const secondRow = reviews.slice(reviews.length / 2)
+
+function ReviewCard({
+   img,
+   name,
+   username,
+   body,
+}: {
+   img: string
+   name: string
+   username: string
+   body: string
+}) {
+   return (
+      <figure
+         className={ny(
+            "relative h-40 w-36 cursor-pointer overflow-hidden rounded-xl border p-4",
+            // light styles
+            "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
+            // dark styles
+            "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
+         )}
+      >
+         <div className="flex flex-row items-center gap-2">
+            <img
+               className="rounded-full"
+               width="32"
+               height="32"
+               alt=""
+               src={img}
+            />
+            <div className="flex flex-col">
+               <figcaption className="text-sm font-medium dark:text-white">
+                  {name}
+               </figcaption>
+               <p className="text-xs font-medium dark:text-white/40">
+                  {username}
+               </p>
+            </div>
+         </div>
+         <blockquote className="mt-2 text-sm">{body}</blockquote>
+      </figure>
+   )
+}
+
+function MarqueeDemoVertical() {
+   return (
+      <div className="bg-background relative flex h-96 flex-row items-center justify-center overflow-hidden rounded-lg border sm:px-20 md:shadow-xl">
+         <Marquee pauseOnHover vertical className="[--duration:20s]">
+            {firstRow.map((review) => (
+               <ReviewCard key={review.username} {...review} />
+            ))}
+         </Marquee>
+         <Marquee reverse pauseOnHover vertical className="[--duration:20s]">
+            {secondRow.map((review) => (
+               <ReviewCard key={review.username} {...review} />
+            ))}
+         </Marquee>
+         <div className="dark:from-background pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white"></div>
+         <div className="dark:from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white"></div>
+      </div>
+   )
+}
+
+export default MarqueeDemoVertical
diff --git a/apps/web/registry/miami/examples/marquee-demo.tsx b/apps/web/registry/miami/examples/marquee-demo.tsx
new file mode 100644
index 00000000..033566c3
--- /dev/null
+++ b/apps/web/registry/miami/examples/marquee-demo.tsx
@@ -0,0 +1,108 @@
+import { ny } from "~/lib/utils"
+import Marquee from "~/registry/miami/ui/marquee"
+
+const reviews = [
+   {
+      name: "Jack",
+      username: "@jack",
+      body: "I've never seen anything like this before. It's amazing. I love it.",
+      img: "https://avatar.vercel.sh/jack",
+   },
+   {
+      name: "Jill",
+      username: "@jill",
+      body: "I don't know what to say. I'm speechless. This is amazing.",
+      img: "https://avatar.vercel.sh/jill",
+   },
+   {
+      name: "John",
+      username: "@john",
+      body: "I'm at a loss for words. This is amazing. I love it.",
+      img: "https://avatar.vercel.sh/john",
+   },
+   {
+      name: "Jane",
+      username: "@jane",
+      body: "I'm at a loss for words. This is amazing. I love it.",
+      img: "https://avatar.vercel.sh/jane",
+   },
+   {
+      name: "Jenny",
+      username: "@jenny",
+      body: "I'm at a loss for words. This is amazing. I love it.",
+      img: "https://avatar.vercel.sh/jenny",
+   },
+   {
+      name: "James",
+      username: "@james",
+      body: "I'm at a loss for words. This is amazing. I love it.",
+      img: "https://avatar.vercel.sh/james",
+   },
+]
+
+const firstRow = reviews.slice(0, reviews.length / 2)
+const secondRow = reviews.slice(reviews.length / 2)
+
+function ReviewCard({
+   img,
+   name,
+   username,
+   body,
+}: {
+   img: string
+   name: string
+   username: string
+   body: string
+}) {
+   return (
+      <figure
+         className={ny(
+            "relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4",
+            // light styles
+            "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
+            // dark styles
+            "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
+         )}
+      >
+         <div className="flex flex-row items-center gap-2">
+            <img
+               className="rounded-full"
+               width="32"
+               height="32"
+               alt=""
+               src={img}
+            />
+            <div className="flex flex-col">
+               <figcaption className="text-sm font-medium dark:text-white">
+                  {name}
+               </figcaption>
+               <p className="text-xs font-medium dark:text-white/40">
+                  {username}
+               </p>
+            </div>
+         </div>
+         <blockquote className="mt-2 text-sm">{body}</blockquote>
+      </figure>
+   )
+}
+
+function MarqueeDemo() {
+   return (
+      <div className="bg-background relative flex size-full flex-col items-center justify-center overflow-hidden rounded-lg border py-20 md:shadow-xl">
+         <Marquee pauseOnHover className="[--duration:20s]">
+            {firstRow.map((review) => (
+               <ReviewCard key={review.username} {...review} />
+            ))}
+         </Marquee>
+         <Marquee reverse pauseOnHover className="[--duration:20s]">
+            {secondRow.map((review) => (
+               <ReviewCard key={review.username} {...review} />
+            ))}
+         </Marquee>
+         <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
+         <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
+      </div>
+   )
+}
+
+export default MarqueeDemo
diff --git a/apps/web/registry/miami/examples/marquee-logos.tsx b/apps/web/registry/miami/examples/marquee-logos.tsx
new file mode 100644
index 00000000..fb2aad01
--- /dev/null
+++ b/apps/web/registry/miami/examples/marquee-logos.tsx
@@ -0,0 +1,53 @@
+import { ny } from "~/lib/utils"
+import Marquee from "~/registry/miami/ui/marquee"
+
+const logos = [
+   {
+      name: "Microsoft",
+      img: "https://cdn.simpleicons.org/microsoft/000/fff",
+   },
+   {
+      name: "Apple",
+      img: "https://cdn.simpleicons.org/apple/000/fff",
+   },
+   {
+      name: "Google",
+      img: "https://cdn.simpleicons.org/google/000/fff",
+   },
+   {
+      name: "Facebook",
+      img: "https://cdn.simpleicons.org/facebook/000/fff",
+   },
+   {
+      name: "LinkedIn",
+      img: "https://cdn.simpleicons.org/linkedin/000/fff",
+   },
+   {
+      name: "Twitter",
+      img: "https://cdn.simpleicons.org/twitter/000/fff",
+   },
+]
+
+function Logo({ name, img }: { name: string; img: string }) {
+   return (
+      <div className={ny("size-12 cursor-pointer")}>
+         <img src={img} alt={name} />
+      </div>
+   )
+}
+
+function MarqueeLogos() {
+   return (
+      <div className="bg-background relative flex size-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border py-20 md:shadow-xl">
+         <Marquee className="[--gap:3rem]">
+            {logos.map((logo, idx) => (
+               <Logo key={idx} {...logo} />
+            ))}
+         </Marquee>
+         <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
+         <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
+      </div>
+   )
+}
+
+export default MarqueeLogos
diff --git a/apps/web/registry/miami/examples/menubar-demo.tsx b/apps/web/registry/miami/examples/menubar-demo.tsx
new file mode 100644
index 00000000..2b756850
--- /dev/null
+++ b/apps/web/registry/miami/examples/menubar-demo.tsx
@@ -0,0 +1,109 @@
+import {
+   Menubar,
+   MenubarCheckboxItem,
+   MenubarContent,
+   MenubarItem,
+   MenubarMenu,
+   MenubarRadioGroup,
+   MenubarRadioItem,
+   MenubarSeparator,
+   MenubarShortcut,
+   MenubarSub,
+   MenubarSubContent,
+   MenubarSubTrigger,
+   MenubarTrigger,
+} from "~/registry/miami/ui/menubar"
+
+export default function MenubarDemo() {
+   return (
+      <Menubar>
+         <MenubarMenu>
+            <MenubarTrigger>File</MenubarTrigger>
+            <MenubarContent>
+               <MenubarItem>
+                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem>
+                  New Window <MenubarShortcut>⌘N</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem disabled>New Incognito Window</MenubarItem>
+               <MenubarSeparator />
+               <MenubarSub>
+                  <MenubarSubTrigger>Share</MenubarSubTrigger>
+                  <MenubarSubContent>
+                     <MenubarItem>Email link</MenubarItem>
+                     <MenubarItem>Messages</MenubarItem>
+                     <MenubarItem>Notes</MenubarItem>
+                  </MenubarSubContent>
+               </MenubarSub>
+               <MenubarSeparator />
+               <MenubarItem>
+                  Print... <MenubarShortcut>⌘P</MenubarShortcut>
+               </MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+         <MenubarMenu>
+            <MenubarTrigger>Edit</MenubarTrigger>
+            <MenubarContent>
+               <MenubarItem>
+                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem>
+                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+               </MenubarItem>
+               <MenubarSeparator />
+               <MenubarSub>
+                  <MenubarSubTrigger>Find</MenubarSubTrigger>
+                  <MenubarSubContent>
+                     <MenubarItem>Search the web</MenubarItem>
+                     <MenubarSeparator />
+                     <MenubarItem>Find...</MenubarItem>
+                     <MenubarItem>Find Next</MenubarItem>
+                     <MenubarItem>Find Previous</MenubarItem>
+                  </MenubarSubContent>
+               </MenubarSub>
+               <MenubarSeparator />
+               <MenubarItem>Cut</MenubarItem>
+               <MenubarItem>Copy</MenubarItem>
+               <MenubarItem>Paste</MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+         <MenubarMenu>
+            <MenubarTrigger>View</MenubarTrigger>
+            <MenubarContent>
+               <MenubarCheckboxItem>
+                  Always Show Bookmarks Bar
+               </MenubarCheckboxItem>
+               <MenubarCheckboxItem checked>
+                  Always Show Full URLs
+               </MenubarCheckboxItem>
+               <MenubarSeparator />
+               <MenubarItem inset>
+                  Reload <MenubarShortcut>⌘R</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem disabled inset>
+                  Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+               </MenubarItem>
+               <MenubarSeparator />
+               <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+               <MenubarSeparator />
+               <MenubarItem inset>Hide Sidebar</MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+         <MenubarMenu>
+            <MenubarTrigger>Profiles</MenubarTrigger>
+            <MenubarContent>
+               <MenubarRadioGroup value="benoit">
+                  <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+                  <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+                  <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+               </MenubarRadioGroup>
+               <MenubarSeparator />
+               <MenubarItem inset>Edit...</MenubarItem>
+               <MenubarSeparator />
+               <MenubarItem inset>Add Profile...</MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+      </Menubar>
+   )
+}
diff --git a/apps/web/registry/miami/examples/meteors-demo.tsx b/apps/web/registry/miami/examples/meteors-demo.tsx
new file mode 100644
index 00000000..a6463c0c
--- /dev/null
+++ b/apps/web/registry/miami/examples/meteors-demo.tsx
@@ -0,0 +1,12 @@
+import Meteors from "~/registry/miami/ui/meteors"
+
+export default function MeteorDemo() {
+   return (
+      <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl">
+         <Meteors number={30} />
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Meteors
+         </p>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/mode-toggle-group.tsx b/apps/web/registry/miami/examples/mode-toggle-group.tsx
new file mode 100644
index 00000000..c3fe1233
--- /dev/null
+++ b/apps/web/registry/miami/examples/mode-toggle-group.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { LaptopIcon, MoonIcon, SunIcon } from "@radix-ui/react-icons"
+import { useTheme } from "next-themes"
+import * as React from "react"
+import { useEffect, useState } from "react"
+
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
+
+export default function ModeToggleGroup() {
+   const { setTheme, theme } = useTheme()
+   const [currentTheme, setCurrentTheme] = useState<string>("")
+
+   useEffect(() => {
+      if (theme === "system") setCurrentTheme("system")
+      else if (theme === "dark") setCurrentTheme("dark")
+      else if (theme === "light") setCurrentTheme("light")
+   }, [theme])
+
+   return (
+      <ToggleGroup
+         type="single"
+         variant="outline"
+         className="scale-90 rounded-full border p-1"
+         value={currentTheme}
+      >
+         <ToggleGroupItem
+            value="light"
+            onClick={() => setTheme("light")}
+            disabled={theme === "light"}
+            className="disabled:bg-accent rounded-full disabled:opacity-100"
+         >
+            <SunIcon className="size-5" />
+         </ToggleGroupItem>
+         <ToggleGroupItem
+            value="system"
+            onClick={() => setTheme("system")}
+            disabled={theme === "system"}
+            className="disabled:bg-accent rounded-full disabled:opacity-100"
+         >
+            <LaptopIcon className="size-5" />
+         </ToggleGroupItem>
+         <ToggleGroupItem
+            value="dark"
+            onClick={() => setTheme("dark")}
+            disabled={theme === "dark"}
+            className="disabled:bg-accent rounded-full disabled:opacity-100"
+         >
+            <MoonIcon className="size-5" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/miami/examples/mode-toggle.tsx b/apps/web/registry/miami/examples/mode-toggle.tsx
new file mode 100644
index 00000000..5adacb8f
--- /dev/null
+++ b/apps/web/registry/miami/examples/mode-toggle.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
+import { useTheme } from "next-themes"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+
+export default function ModeToggle() {
+   const { setTheme } = useTheme()
+
+   return (
+      <DropdownMenu>
+         <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="icon">
+               <SunIcon className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+               <MoonIcon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+               <span className="sr-only">Toggle theme</span>
+            </Button>
+         </DropdownMenuTrigger>
+         <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setTheme("light")}>
+               Light
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setTheme("dark")}>
+               Dark
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setTheme("system")}>
+               System
+            </DropdownMenuItem>
+         </DropdownMenuContent>
+      </DropdownMenu>
+   )
+}
diff --git a/apps/web/registry/miami/examples/morphing-text-demo.tsx b/apps/web/registry/miami/examples/morphing-text-demo.tsx
new file mode 100644
index 00000000..8698be58
--- /dev/null
+++ b/apps/web/registry/miami/examples/morphing-text-demo.tsx
@@ -0,0 +1,17 @@
+import { MorphingText } from "~/registry/miami/ui/morphing-text"
+
+const texts = [
+   "Hello",
+   "Morphing",
+   "Text",
+   "Animation",
+   "React",
+   "Component",
+   "Smooth",
+   "Transition",
+   "Engaging",
+]
+
+export default function MorphingTextDemo() {
+   return <MorphingText texts={texts} />
+}
diff --git a/apps/web/registry/miami/examples/multi-select-basic.tsx b/apps/web/registry/miami/examples/multi-select-basic.tsx
new file mode 100644
index 00000000..bca63601
--- /dev/null
+++ b/apps/web/registry/miami/examples/multi-select-basic.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectGroup,
+   MultiSelectItem,
+   MultiSelectList,
+   MultiSelectTrigger,
+   MultiSelectValue,
+} from "~/registry/miami/ui/multi-select"
+
+export default function MultiSelectBasicDemo() {
+   return (
+      <MultiSelect>
+         <MultiSelectTrigger className="w-96">
+            <MultiSelectValue placeholder="Select stack" />
+         </MultiSelectTrigger>
+         <MultiSelectContent>
+            <MultiSelectList>
+               <MultiSelectGroup heading="React">
+                  <MultiSelectItem value="react">React</MultiSelectItem>
+                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
+                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Vue">
+                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
+                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Others">
+                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
+                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
+               </MultiSelectGroup>
+            </MultiSelectList>
+         </MultiSelectContent>
+      </MultiSelect>
+   )
+}
diff --git a/apps/web/registry/miami/examples/multi-select-controllable-search.tsx b/apps/web/registry/miami/examples/multi-select-controllable-search.tsx
new file mode 100644
index 00000000..38ada49b
--- /dev/null
+++ b/apps/web/registry/miami/examples/multi-select-controllable-search.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { useRef, useState } from "react"
+
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectEmpty,
+   MultiSelectList,
+   type MultiSelectOption,
+   type MultiSelectOptionGroup,
+   MultiSelectSearch,
+   MultiSelectTrigger,
+   MultiSelectValue,
+   renderMultiSelectOptions,
+} from "~/registry/miami/ui/multi-select"
+
+const ALL_ITEMS = [
+   { value: "react", label: "React", group: "React" },
+   { value: "next", label: "Next.js", group: "React" },
+   { value: "remix", label: "Remix", group: "React" },
+   { value: "vue", label: "Vue", group: "Vue" },
+   { value: "nuxt", label: "Nuxt.js", group: "Vue" },
+   { value: "angular", label: "Angular", group: "Others" },
+   { value: "svelte", label: "Svelte", group: "Others" },
+]
+
+function group(
+   options: Array<(typeof ALL_ITEMS)[number]>,
+): MultiSelectOptionGroup[] {
+   return options.reduce((acc, item) => {
+      const group = acc.find((g) => g.heading === item.group)
+      if (group) group.children.push(item)
+      else acc.push({ heading: item.group, children: [item] })
+
+      return acc
+   }, [] as MultiSelectOptionGroup[])
+}
+
+async function search(keyword?: string) {
+   if (!keyword) return group(ALL_ITEMS)
+   await new Promise((resolve) => setTimeout(resolve, 500))
+   const lowerKeyword = keyword.toLowerCase()
+   const filtered = ALL_ITEMS.filter((item) =>
+      item.label.toLowerCase().includes(lowerKeyword),
+   )
+   return group(filtered)
+}
+
+export default function MultiSelectControllableSearchDemo() {
+   const [loading, setLoading] = useState(false)
+   const [options, setOptions] = useState<MultiSelectOption[]>(() =>
+      group(ALL_ITEMS),
+   )
+
+   const indexRef = useRef(0)
+
+   const handleSearch = async (keyword?: string) => {
+      const index = ++indexRef.current
+      setLoading(true)
+      const newOptions = await search(keyword)
+      if (indexRef.current === index) {
+         setOptions(newOptions)
+         setLoading(false)
+      }
+   }
+
+   return (
+      <MultiSelect onSearch={handleSearch}>
+         <MultiSelectTrigger className="w-96">
+            <MultiSelectValue placeholder="Select stack" />
+         </MultiSelectTrigger>
+         <MultiSelectContent>
+            <MultiSelectSearch />
+            <MultiSelectList>
+               {loading ? null : renderMultiSelectOptions(options)}
+               <MultiSelectEmpty>
+                  {loading ? "Loading..." : "No results found"}
+               </MultiSelectEmpty>
+            </MultiSelectList>
+         </MultiSelectContent>
+      </MultiSelect>
+   )
+}
diff --git a/apps/web/registry/miami/examples/multi-select-filter.tsx b/apps/web/registry/miami/examples/multi-select-filter.tsx
new file mode 100644
index 00000000..f69da2cc
--- /dev/null
+++ b/apps/web/registry/miami/examples/multi-select-filter.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectEmpty,
+   MultiSelectGroup,
+   MultiSelectItem,
+   MultiSelectList,
+   MultiSelectSearch,
+   MultiSelectTrigger,
+   MultiSelectValue,
+} from "~/registry/miami/ui/multi-select"
+
+export default function MultiSelectFilterDemo() {
+   return (
+      <MultiSelect>
+         <MultiSelectTrigger className="w-96">
+            <MultiSelectValue placeholder="Select stack" />
+         </MultiSelectTrigger>
+         <MultiSelectContent>
+            <MultiSelectSearch placeholder="Input to search" />
+            <MultiSelectList>
+               <MultiSelectGroup heading="React">
+                  <MultiSelectItem value="react">React</MultiSelectItem>
+                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
+                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Vue">
+                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
+                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Others">
+                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
+                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
+               </MultiSelectGroup>
+            </MultiSelectList>
+            <MultiSelectEmpty />
+         </MultiSelectContent>
+      </MultiSelect>
+   )
+}
diff --git a/apps/web/registry/miami/examples/multi-select-form.tsx b/apps/web/registry/miami/examples/multi-select-form.tsx
new file mode 100644
index 00000000..8782c941
--- /dev/null
+++ b/apps/web/registry/miami/examples/multi-select-form.tsx
@@ -0,0 +1,161 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import Link from "next/link"
+import { useRef, useState } from "react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/default/ui/form"
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectEmpty,
+   MultiSelectList,
+   type MultiSelectOption,
+   type MultiSelectOptionGroup,
+   MultiSelectSearch,
+   MultiSelectTrigger,
+   MultiSelectValue,
+   renderMultiSelectOptions,
+} from "~/registry/default/ui/multi-select"
+import { toast } from "~/registry/default/ui/use-toast"
+import { Button } from "~/registry/miami/ui/button"
+
+const ALL_ITEMS = [
+   { value: "react", label: "React", group: "React" },
+   { value: "next", label: "Next.js", group: "React" },
+   { value: "remix", label: "Remix", group: "React" },
+   { value: "vue", label: "Vue", group: "Vue" },
+   { value: "nuxt", label: "Nuxt.js", group: "Vue" },
+   { value: "angular", label: "Angular", group: "Others" },
+   { value: "svelte", label: "Svelte", group: "Others" },
+]
+
+function group(
+   options: Array<(typeof ALL_ITEMS)[number]>,
+): MultiSelectOptionGroup[] {
+   return options.reduce((acc, item) => {
+      const group = acc.find((g) => g.heading === item.group)
+      if (group) group.children.push(item)
+      else acc.push({ heading: item.group, children: [item] })
+
+      return acc
+   }, [] as MultiSelectOptionGroup[])
+}
+
+async function search(keyword?: string) {
+   if (!keyword) return group(ALL_ITEMS)
+   const lowerKeyword = keyword.toLowerCase()
+   const filtered = ALL_ITEMS.filter((item) =>
+      item.label.toLowerCase().includes(lowerKeyword),
+   )
+
+   if (!filtered.length) {
+      return [
+         {
+            label: keyword,
+            value: keyword,
+         },
+      ]
+   }
+
+   return group(filtered)
+}
+
+const FormSchema = z.object({
+   frameworks: z.array(z.string(), {
+      required_error: "Please select at least one framework.",
+   }),
+})
+
+export default function MultiSelectFormDemo() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   const [loading, setLoading] = useState(false)
+   const [options, setOptions] = useState<MultiSelectOption[]>(() =>
+      group(ALL_ITEMS),
+   )
+
+   const indexRef = useRef(0)
+
+   const handleSearch = async (keyword: string) => {
+      const index = ++indexRef.current
+      setLoading(true)
+      const newOptions = await search(keyword)
+      if (indexRef.current === index) {
+         setOptions(newOptions)
+         setLoading(false)
+      }
+   }
+
+   const onSubmit = (data: z.infer<typeof FormSchema>) => {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="frameworks"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Frameworks</FormLabel>
+                     <MultiSelect
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                        onSearch={(keyword) => handleSearch(keyword ?? "")}
+                     >
+                        <FormControl>
+                           <MultiSelectTrigger className="w-96">
+                              <MultiSelectValue placeholder="Select frameworks" />
+                           </MultiSelectTrigger>
+                        </FormControl>
+                        <MultiSelectContent>
+                           <MultiSelectSearch />
+                           <MultiSelectList>
+                              {loading
+                                 ? null
+                                 : renderMultiSelectOptions(options)}
+                              <MultiSelectEmpty>
+                                 {loading ? "Loading..." : "No results found"}
+                              </MultiSelectEmpty>
+                           </MultiSelectList>
+                        </MultiSelectContent>
+                     </MultiSelect>
+                     <FormDescription>
+                        You can manage frameworks in{" "}
+                        <Link href="/examples/forms">framework settings</Link>.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/multi-select-input-custom.tsx b/apps/web/registry/miami/examples/multi-select-input-custom.tsx
new file mode 100644
index 00000000..a6a879f9
--- /dev/null
+++ b/apps/web/registry/miami/examples/multi-select-input-custom.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { useRef, useState } from "react"
+
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectEmpty,
+   MultiSelectList,
+   type MultiSelectOption,
+   type MultiSelectOptionGroup,
+   MultiSelectSearch,
+   MultiSelectTrigger,
+   MultiSelectValue,
+   renderMultiSelectOptions,
+} from "~/registry/miami/ui/multi-select"
+
+const ALL_ITEMS = [
+   { value: "react", label: "React", group: "React" },
+   { value: "next", label: "Next.js", group: "React" },
+   { value: "remix", label: "Remix", group: "React" },
+   { value: "vue", label: "Vue", group: "Vue" },
+   { value: "nuxt", label: "Nuxt.js", group: "Vue" },
+   { value: "angular", label: "Angular", group: "Others" },
+   { value: "svelte", label: "Svelte", group: "Others" },
+]
+
+function group(
+   options: Array<(typeof ALL_ITEMS)[number]>,
+): MultiSelectOptionGroup[] {
+   return options.reduce((acc, item) => {
+      const group = acc.find((g) => g.heading === item.group)
+      if (group) group.children.push(item)
+      else acc.push({ heading: item.group, children: [item] })
+
+      return acc
+   }, [] as MultiSelectOptionGroup[])
+}
+
+async function search(keyword?: string) {
+   if (!keyword) return group(ALL_ITEMS)
+   const lowerKeyword = keyword.toLowerCase()
+   const filtered = ALL_ITEMS.filter((item) =>
+      item.label.toLowerCase().includes(lowerKeyword),
+   )
+
+   if (!filtered.length) {
+      return [
+         {
+            label: keyword,
+            value: keyword,
+         },
+      ]
+   }
+
+   return group(filtered)
+}
+
+export default function MultiSelectInputCustomDemo() {
+   const [loading, setLoading] = useState(false)
+   const [options, setOptions] = useState<MultiSelectOption[]>(() =>
+      group(ALL_ITEMS),
+   )
+
+   const indexRef = useRef(0)
+
+   const handleSearch = async (keyword: string) => {
+      const index = ++indexRef.current
+      setLoading(true)
+      const newOptions = await search(keyword)
+      if (indexRef.current === index) {
+         setOptions(newOptions)
+         setLoading(false)
+      }
+   }
+
+   return (
+      <MultiSelect onSearch={(keyword) => handleSearch(keyword ?? "")}>
+         <MultiSelectTrigger className="w-96">
+            <MultiSelectValue placeholder="Select stack" />
+         </MultiSelectTrigger>
+         <MultiSelectContent>
+            <MultiSelectSearch placeholder="input any..." />
+            <MultiSelectList>
+               {loading ? null : renderMultiSelectOptions(options)}
+               <MultiSelectEmpty>
+                  {loading ? "Loading..." : "No results found"}
+               </MultiSelectEmpty>
+            </MultiSelectList>
+         </MultiSelectContent>
+      </MultiSelect>
+   )
+}
diff --git a/apps/web/registry/miami/examples/multi-select-limit-count.tsx b/apps/web/registry/miami/examples/multi-select-limit-count.tsx
new file mode 100644
index 00000000..f1243dd7
--- /dev/null
+++ b/apps/web/registry/miami/examples/multi-select-limit-count.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectGroup,
+   MultiSelectItem,
+   MultiSelectList,
+   MultiSelectTrigger,
+   MultiSelectValue,
+} from "~/registry/miami/ui/multi-select"
+
+export default function MultiSelectLimitCountDemo() {
+   return (
+      <MultiSelect defaultValue={["react", "next", "remix"]} maxCount={3}>
+         <MultiSelectTrigger className="w-96">
+            <MultiSelectValue placeholder="Select stack" />
+         </MultiSelectTrigger>
+         <MultiSelectContent>
+            <MultiSelectList>
+               <MultiSelectGroup heading="React">
+                  <MultiSelectItem value="react">React</MultiSelectItem>
+                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
+                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Vue">
+                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
+                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Others">
+                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
+                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
+               </MultiSelectGroup>
+            </MultiSelectList>
+         </MultiSelectContent>
+      </MultiSelect>
+   )
+}
diff --git a/apps/web/registry/miami/examples/multi-select-limit-display-length.tsx b/apps/web/registry/miami/examples/multi-select-limit-display-length.tsx
new file mode 100644
index 00000000..6f6f7bd7
--- /dev/null
+++ b/apps/web/registry/miami/examples/multi-select-limit-display-length.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import {
+   MultiSelect,
+   MultiSelectContent,
+   MultiSelectGroup,
+   MultiSelectItem,
+   MultiSelectList,
+   MultiSelectTrigger,
+   MultiSelectValue,
+} from "~/registry/miami/ui/multi-select"
+
+export default function MultiSelectLimitDisplayLengthDemo() {
+   return (
+      <MultiSelect defaultValue={["long", "react", "angular", "vue", "remix"]}>
+         <MultiSelectTrigger className="w-96">
+            <MultiSelectValue
+               placeholder="Select stack"
+               maxDisplay={3}
+               maxItemLength={5}
+            />
+         </MultiSelectTrigger>
+         <MultiSelectContent>
+            <MultiSelectList>
+               <MultiSelectGroup heading="React">
+                  <MultiSelectItem value="react">React</MultiSelectItem>
+                  <MultiSelectItem value="next">Next.js</MultiSelectItem>
+                  <MultiSelectItem value="remix">Remix</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Vue">
+                  <MultiSelectItem value="vue">Vue</MultiSelectItem>
+                  <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
+               </MultiSelectGroup>
+               <MultiSelectGroup heading="Others">
+                  <MultiSelectItem value="angular">Angular</MultiSelectItem>
+                  <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
+                  <MultiSelectItem value="long">
+                     VeryVeryLongItem
+                  </MultiSelectItem>
+               </MultiSelectGroup>
+            </MultiSelectList>
+         </MultiSelectContent>
+      </MultiSelect>
+   )
+}
diff --git a/apps/web/registry/miami/examples/navigation-menu-demo.tsx b/apps/web/registry/miami/examples/navigation-menu-demo.tsx
new file mode 100644
index 00000000..02252a0c
--- /dev/null
+++ b/apps/web/registry/miami/examples/navigation-menu-demo.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import Link from "next/link"
+import * as React from "react"
+
+import { Icons } from "~/components/icons"
+import { ny } from "~/lib/utils"
+import {
+   NavigationMenu,
+   NavigationMenuContent,
+   NavigationMenuItem,
+   NavigationMenuLink,
+   NavigationMenuList,
+   NavigationMenuTrigger,
+   navigationMenuTriggerStyle,
+} from "~/registry/miami/ui/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+   {
+      title: "Alert Dialog",
+      href: "/docs/primitives/alert-dialog",
+      description:
+         "A modal dialog that interrupts the user with important content and expects a response.",
+   },
+   {
+      title: "Hover Card",
+      href: "/docs/primitives/hover-card",
+      description:
+         "For sighted users to preview content available behind a link.",
+   },
+   {
+      title: "Progress",
+      href: "/docs/primitives/progress",
+      description:
+         "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+   },
+   {
+      title: "Scroll-area",
+      href: "/docs/primitives/scroll-area",
+      description: "Visually or semantically separates content.",
+   },
+   {
+      title: "Tabs",
+      href: "/docs/primitives/tabs",
+      description:
+         "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+   },
+   {
+      title: "Tooltip",
+      href: "/docs/primitives/tooltip",
+      description:
+         "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+   },
+]
+
+export default function NavigationMenuDemo() {
+   return (
+      <NavigationMenu>
+         <NavigationMenuList>
+            <NavigationMenuItem>
+               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+               <NavigationMenuContent>
+                  <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                     <li className="row-span-3">
+                        <NavigationMenuLink asChild>
+                           <a
+                              className="from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md"
+                              href="/"
+                           >
+                              <Icons.logo className="size-6" />
+                              <div className="mb-2 mt-4 text-lg font-medium">
+                                 nyxb/ui
+                              </div>
+                              <p className="text-muted-foreground text-sm leading-tight">
+                                 Beautifully designed components built with
+                                 Radix UI and Tailwind CSS.
+                              </p>
+                           </a>
+                        </NavigationMenuLink>
+                     </li>
+                     <ListItem href="/docs" title="Introduction">
+                        Re-usable components built using Radix UI and Tailwind
+                        CSS.
+                     </ListItem>
+                     <ListItem href="/docs/installation" title="Installation">
+                        How to install dependencies and structure your app.
+                     </ListItem>
+                     <ListItem
+                        href="/docs/primitives/typography"
+                        title="Typography"
+                     >
+                        Styles for headings, paragraphs, lists...etc
+                     </ListItem>
+                  </ul>
+               </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+               <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+               <NavigationMenuContent>
+                  <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                     {components.map((component) => (
+                        <ListItem
+                           key={component.title}
+                           title={component.title}
+                           href={component.href}
+                        >
+                           {component.description}
+                        </ListItem>
+                     ))}
+                  </ul>
+               </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+               <Link href="/docs" legacyBehavior passHref>
+                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                     Documentation
+                  </NavigationMenuLink>
+               </Link>
+            </NavigationMenuItem>
+         </NavigationMenuList>
+      </NavigationMenu>
+   )
+}
+
+const ListItem = React.forwardRef<
+   React.ElementRef<"a">,
+   React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+   return (
+      <li>
+         <NavigationMenuLink asChild>
+            <a
+               ref={ref}
+               className={ny(
+                  "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors",
+                  className,
+               )}
+               {...props}
+            >
+               <div className="text-sm font-medium leading-none">{title}</div>
+               <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                  {children}
+               </p>
+            </a>
+         </NavigationMenuLink>
+      </li>
+   )
+})
+ListItem.displayName = "ListItem"
diff --git a/apps/web/registry/miami/examples/neon-gradient-card-demo.tsx b/apps/web/registry/miami/examples/neon-gradient-card-demo.tsx
new file mode 100644
index 00000000..0118e68a
--- /dev/null
+++ b/apps/web/registry/miami/examples/neon-gradient-card-demo.tsx
@@ -0,0 +1,11 @@
+import { NeonGradientCard } from "~/registry/miami/ui/neon-gradient-card"
+
+export default function NeonGradientCardDemo() {
+   return (
+      <NeonGradientCard className="max-w-sm items-center justify-center text-center">
+         <span className="pointer-events-none z-10 h-full whitespace-pre-wrap bg-gradient-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-6xl font-bold leading-none tracking-tighter text-transparent dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]">
+            Neon Gradient Card
+         </span>
+      </NeonGradientCard>
+   )
+}
diff --git a/apps/web/registry/miami/examples/number-ticker-demo.tsx b/apps/web/registry/miami/examples/number-ticker-demo.tsx
new file mode 100644
index 00000000..9d1146d2
--- /dev/null
+++ b/apps/web/registry/miami/examples/number-ticker-demo.tsx
@@ -0,0 +1,11 @@
+import NumberTicker from "~/registry/miami/ui/number-ticker"
+
+function NumberTickerDemo() {
+   return (
+      <p className="whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white">
+         <NumberTicker value={100} />
+      </p>
+   )
+}
+
+export default NumberTickerDemo
diff --git a/apps/web/registry/miami/examples/nyx-toc-demo.tsx b/apps/web/registry/miami/examples/nyx-toc-demo.tsx
new file mode 100644
index 00000000..43b9c644
--- /dev/null
+++ b/apps/web/registry/miami/examples/nyx-toc-demo.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { NyxTOCItems } from "~/registry/miami/ui/nyx-toc"
+
+const demoItems = [
+   {
+      title: "Introduction",
+      url: "#introduction",
+      depth: 1,
+   },
+   {
+      title: "Getting Started",
+      url: "#getting-started",
+      depth: 2,
+   },
+   {
+      title: "Installation",
+      url: "#installation",
+      depth: 3,
+   },
+   {
+      title: "Basic Usage",
+      url: "#basic-usage",
+      depth: 3,
+   },
+   {
+      title: "Advanced Features",
+      url: "#advanced-features",
+      depth: 2,
+   },
+   {
+      title: "API Reference",
+      url: "#api-reference",
+      depth: 2,
+   },
+]
+
+export default function NyxTOCDemo() {
+   return (
+      <div className="flex gap-10">
+         <div className="flex-1">
+            <NyxTOCItems items={demoItems} label="On This Page" />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/nyx-toc-popover-demo.tsx b/apps/web/registry/miami/examples/nyx-toc-popover-demo.tsx
new file mode 100644
index 00000000..2e4e0232
--- /dev/null
+++ b/apps/web/registry/miami/examples/nyx-toc-popover-demo.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react"
+import {
+   NyxTOCItems,
+   TocPopover,
+   TocPopoverContent,
+   TocPopoverTrigger,
+} from "~/registry/miami/ui/nyx-toc"
+
+export default function NyxTOCPopoverDemo() {
+   // Example TOC items
+   const items = [
+      { title: "Introduction", url: "#introduction", depth: 1 },
+      { title: "Getting Started", url: "#getting-started", depth: 2 },
+      { title: "Installation", url: "#installation", depth: 2 },
+      { title: "Basic Usage", url: "#basic-usage", depth: 3 },
+      { title: "Advanced Features", url: "#advanced-features", depth: 2 },
+      { title: "Configuration", url: "#configuration", depth: 3 },
+      { title: "Customization", url: "#customization", depth: 2 },
+   ]
+
+   return (
+      <div className="flex h-[300px] w-full items-start justify-center p-6">
+         <TocPopover>
+            <TocPopoverTrigger
+               items={items}
+               className="hover:bg-accent rounded-md border"
+            />
+            <TocPopoverContent>
+               <NyxTOCItems items={items} isMenu label="On This Page" />
+            </TocPopoverContent>
+         </TocPopover>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/orbiting-circles-demo.tsx b/apps/web/registry/miami/examples/orbiting-circles-demo.tsx
new file mode 100644
index 00000000..51c47b8e
--- /dev/null
+++ b/apps/web/registry/miami/examples/orbiting-circles-demo.tsx
@@ -0,0 +1,176 @@
+import OrbitingCircles from "~/registry/miami/ui/orbiting-circles"
+
+export default function OrbitingCirclesDemo() {
+   return (
+      <div className="bg-background relative flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Circles
+         </span>
+
+         {/* Inner Circles */}
+         <OrbitingCircles
+            className="size-[30px] border-none bg-transparent"
+            duration={20}
+            delay={20}
+            radius={80}
+         >
+            <Icons.whatsapp />
+         </OrbitingCircles>
+         <OrbitingCircles
+            className="size-[30px] border-none bg-transparent"
+            duration={20}
+            delay={10}
+            radius={80}
+         >
+            <Icons.notion />
+         </OrbitingCircles>
+
+         {/* Outer Circles (reverse) */}
+         <OrbitingCircles
+            className="size-[50px] border-none bg-transparent"
+            radius={190}
+            duration={20}
+            reverse
+         >
+            <Icons.googleDrive />
+         </OrbitingCircles>
+         <OrbitingCircles
+            className="size-[50px] border-none bg-transparent"
+            radius={190}
+            duration={20}
+            delay={20}
+            reverse
+         >
+            <Icons.gitHub />
+         </OrbitingCircles>
+      </div>
+   )
+}
+
+const Icons = {
+   gitHub: () => (
+      <svg width="100" height="100" viewBox="0 0 438.549 438.549">
+         <path
+            fill="currentColor"
+            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+         />
+      </svg>
+   ),
+   notion: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 100 100"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+            fill="#ffffff"
+         />
+         <path
+            d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+            fill="#000000"
+            fillRule="evenodd"
+            clipRule="evenodd"
+         />
+      </svg>
+   ),
+   openai: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 24 24"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+   ),
+   googleDrive: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 87.3 78"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <path
+            d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+            fill="#0066da"
+         />
+         <path
+            d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+            fill="#00ac47"
+         />
+         <path
+            d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335"
+         />
+         <path
+            d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+            fill="#00832d"
+         />
+         <path
+            d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+            fill="#2684fc"
+         />
+         <path
+            d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00"
+         />
+      </svg>
+   ),
+   whatsapp: () => (
+      <svg
+         width="100"
+         height="100"
+         viewBox="0 0 175.216 175.552"
+         xmlns="http://www.w3.org/2000/svg"
+      >
+         <defs>
+            <linearGradient
+               id="b"
+               x1="85.915"
+               x2="86.535"
+               y1="32.567"
+               y2="137.092"
+               gradientUnits="userSpaceOnUse"
+            >
+               <stop offset="0" stopColor="#57d163" />
+               <stop offset="1" stopColor="#23b33a" />
+            </linearGradient>
+            <filter
+               id="a"
+               width="1.115"
+               height="1.114"
+               x="-.057"
+               y="-.057"
+               colorInterpolationFilters="sRGB"
+            >
+               <feGaussianBlur stdDeviation="3.531" />
+            </filter>
+         </defs>
+         <path
+            d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
+            fill="#b3b3b3"
+            filter="url(#a)"
+         />
+         <path
+            d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
+            fill="#ffffff"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
+            fill="url(#linearGradient1780)"
+         />
+         <path
+            d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
+            fill="url(#b)"
+         />
+         <path
+            d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
+            fill="#ffffff"
+            fillRule="evenodd"
+         />
+      </svg>
+   ),
+}
diff --git a/apps/web/registry/miami/examples/pagination-demo.tsx b/apps/web/registry/miami/examples/pagination-demo.tsx
new file mode 100644
index 00000000..b41a80e8
--- /dev/null
+++ b/apps/web/registry/miami/examples/pagination-demo.tsx
@@ -0,0 +1,38 @@
+import {
+   Pagination,
+   PaginationContent,
+   PaginationEllipsis,
+   PaginationItem,
+   PaginationLink,
+   PaginationNext,
+   PaginationPrevious,
+} from "~/registry/miami/ui/pagination"
+
+export default function PaginationDemo() {
+   return (
+      <Pagination>
+         <PaginationContent>
+            <PaginationItem>
+               <PaginationPrevious href="#" />
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationLink href="#">1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationLink href="#" isActive>
+                  2
+               </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationLink href="#">3</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationNext href="#" />
+            </PaginationItem>
+         </PaginationContent>
+      </Pagination>
+   )
+}
diff --git a/apps/web/registry/miami/examples/particles-demo.tsx b/apps/web/registry/miami/examples/particles-demo.tsx
new file mode 100644
index 00000000..662a2b04
--- /dev/null
+++ b/apps/web/registry/miami/examples/particles-demo.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+import Particles from "~/registry/miami/ui/particles"
+
+function ParticlesDemo() {
+   const { theme } = useTheme()
+   const [color, setColor] = useState("#ffffff")
+
+   useEffect(() => {
+      setColor(theme === "dark" ? "#ffffff" : "#000000")
+   }, [theme])
+
+   return (
+      <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl">
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Particles
+         </span>
+         <Particles
+            className="absolute inset-0"
+            quantity={100}
+            ease={80}
+            color={color}
+            refresh
+         />
+      </div>
+   )
+}
+
+export default ParticlesDemo
diff --git a/apps/web/registry/miami/examples/popover-demo.tsx b/apps/web/registry/miami/examples/popover-demo.tsx
new file mode 100644
index 00000000..4d488053
--- /dev/null
+++ b/apps/web/registry/miami/examples/popover-demo.tsx
@@ -0,0 +1,62 @@
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+export default function PopoverDemo() {
+   return (
+      <Popover>
+         <PopoverTrigger asChild>
+            <Button variant="outline">Open popover</Button>
+         </PopoverTrigger>
+         <PopoverContent className="w-80">
+            <div className="grid gap-4">
+               <div className="space-y-2">
+                  <h4 className="font-medium leading-none">Dimensions</h4>
+                  <p className="text-muted-foreground text-sm">
+                     Set the dimensions for the layer.
+                  </p>
+               </div>
+               <div className="grid gap-2">
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="width">Width</Label>
+                     <Input
+                        id="width"
+                        defaultValue="100%"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="maxWidth">Max. width</Label>
+                     <Input
+                        id="maxWidth"
+                        defaultValue="300px"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="height">Height</Label>
+                     <Input
+                        id="height"
+                        defaultValue="25px"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="maxHeight">Max. height</Label>
+                     <Input
+                        id="maxHeight"
+                        defaultValue="none"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+               </div>
+            </div>
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/miami/examples/progress-demo.tsx b/apps/web/registry/miami/examples/progress-demo.tsx
new file mode 100644
index 00000000..5fce6f59
--- /dev/null
+++ b/apps/web/registry/miami/examples/progress-demo.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import * as React from "react"
+
+import { Progress } from "~/registry/miami/ui/progress"
+
+export default function ProgressDemo() {
+   const [progress, setProgress] = React.useState(13)
+
+   React.useEffect(() => {
+      const timer = setTimeout(() => setProgress(66), 500)
+      return () => clearTimeout(timer)
+   }, [])
+
+   return <Progress value={progress} className="w-3/5" />
+}
diff --git a/apps/web/registry/miami/examples/pulsating-button-demo.tsx b/apps/web/registry/miami/examples/pulsating-button-demo.tsx
new file mode 100644
index 00000000..050abc7f
--- /dev/null
+++ b/apps/web/registry/miami/examples/pulsating-button-demo.tsx
@@ -0,0 +1,17 @@
+import { PulsatingButton } from "~/registry/default/ui/pulsating-button"
+
+function PulsatingButtonDemo() {
+   return (
+      <PulsatingButton
+         text="Join Affiliate Program"
+         pulseColor="150, 0, 255"
+         backgroundColor="#9945FF"
+         textColor="#ffffff"
+         animationDuration="1.5s"
+         buttonWidth="200px"
+         buttonHeight="50px"
+      />
+   )
+}
+
+export default PulsatingButtonDemo
diff --git a/apps/web/registry/miami/examples/radio-group-demo.tsx b/apps/web/registry/miami/examples/radio-group-demo.tsx
new file mode 100644
index 00000000..c63496b8
--- /dev/null
+++ b/apps/web/registry/miami/examples/radio-group-demo.tsx
@@ -0,0 +1,21 @@
+import { Label } from "~/registry/miami/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/miami/ui/radio-group"
+
+export default function RadioGroupDemo() {
+   return (
+      <RadioGroup defaultValue="comfortable">
+         <div className="flex items-center space-x-2">
+            <RadioGroupItem value="default" id="r1" />
+            <Label htmlFor="r1">Default</Label>
+         </div>
+         <div className="flex items-center space-x-2">
+            <RadioGroupItem value="comfortable" id="r2" />
+            <Label htmlFor="r2">Comfortable</Label>
+         </div>
+         <div className="flex items-center space-x-2">
+            <RadioGroupItem value="compact" id="r3" />
+            <Label htmlFor="r3">Compact</Label>
+         </div>
+      </RadioGroup>
+   )
+}
diff --git a/apps/web/registry/miami/examples/radio-group-form.tsx b/apps/web/registry/miami/examples/radio-group-form.tsx
new file mode 100644
index 00000000..833febd9
--- /dev/null
+++ b/apps/web/registry/miami/examples/radio-group-form.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Form,
+   FormControl,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/miami/ui/form"
+import { RadioGroup, RadioGroupItem } from "~/registry/miami/ui/radio-group"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const FormSchema = z.object({
+   type: z.enum(["all", "mentions", "none"], {
+      required_error: "You need to select a notification type.",
+   }),
+})
+
+export default function RadioGroupForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="type"
+               render={({ field }) => (
+                  <FormItem className="space-y-3">
+                     <FormLabel>Notify me about...</FormLabel>
+                     <FormControl>
+                        <RadioGroup
+                           onValueChange={field.onChange}
+                           defaultValue={field.value}
+                           className="flex flex-col space-y-1"
+                        >
+                           <FormItem className="flex items-center space-x-3 space-y-0">
+                              <FormControl>
+                                 <RadioGroupItem value="all" />
+                              </FormControl>
+                              <FormLabel className="font-normal">
+                                 All new messages
+                              </FormLabel>
+                           </FormItem>
+                           <FormItem className="flex items-center space-x-3 space-y-0">
+                              <FormControl>
+                                 <RadioGroupItem value="mentions" />
+                              </FormControl>
+                              <FormLabel className="font-normal">
+                                 Direct messages and mentions
+                              </FormLabel>
+                           </FormItem>
+                           <FormItem className="flex items-center space-x-3 space-y-0">
+                              <FormControl>
+                                 <RadioGroupItem value="none" />
+                              </FormControl>
+                              <FormLabel className="font-normal">
+                                 Nothing
+                              </FormLabel>
+                           </FormItem>
+                        </RadioGroup>
+                     </FormControl>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/rainbow-button-demo.tsx b/apps/web/registry/miami/examples/rainbow-button-demo.tsx
new file mode 100644
index 00000000..487c129d
--- /dev/null
+++ b/apps/web/registry/miami/examples/rainbow-button-demo.tsx
@@ -0,0 +1,5 @@
+import { RainbowButton } from "~/registry/miami/ui/rainbow-button"
+
+export default function RainbowButtonDemo() {
+   return <RainbowButton>Get Unlimited Access</RainbowButton>
+}
diff --git a/apps/web/registry/miami/examples/resizable-demo-with-handle.tsx b/apps/web/registry/miami/examples/resizable-demo-with-handle.tsx
new file mode 100644
index 00000000..ce36f69c
--- /dev/null
+++ b/apps/web/registry/miami/examples/resizable-demo-with-handle.tsx
@@ -0,0 +1,36 @@
+import {
+   ResizableHandle,
+   ResizablePanel,
+   ResizablePanelGroup,
+} from "~/registry/miami/ui/resizable"
+
+export default function ResizableDemo() {
+   return (
+      <ResizablePanelGroup
+         direction="horizontal"
+         className="max-w-md rounded-lg border"
+      >
+         <ResizablePanel defaultSize={50}>
+            <div className="flex h-[200px] items-center justify-center p-6">
+               <span className="font-semibold">One</span>
+            </div>
+         </ResizablePanel>
+         <ResizableHandle withHandle />
+         <ResizablePanel defaultSize={50}>
+            <ResizablePanelGroup direction="vertical">
+               <ResizablePanel defaultSize={25}>
+                  <div className="flex h-full items-center justify-center p-6">
+                     <span className="font-semibold">Two</span>
+                  </div>
+               </ResizablePanel>
+               <ResizableHandle withHandle />
+               <ResizablePanel defaultSize={75}>
+                  <div className="flex h-full items-center justify-center p-6">
+                     <span className="font-semibold">Three</span>
+                  </div>
+               </ResizablePanel>
+            </ResizablePanelGroup>
+         </ResizablePanel>
+      </ResizablePanelGroup>
+   )
+}
diff --git a/apps/web/registry/miami/examples/resizable-demo.tsx b/apps/web/registry/miami/examples/resizable-demo.tsx
new file mode 100644
index 00000000..7644f296
--- /dev/null
+++ b/apps/web/registry/miami/examples/resizable-demo.tsx
@@ -0,0 +1,36 @@
+import {
+   ResizableHandle,
+   ResizablePanel,
+   ResizablePanelGroup,
+} from "~/registry/miami/ui/resizable"
+
+export default function ResizableDemo() {
+   return (
+      <ResizablePanelGroup
+         direction="horizontal"
+         className="max-w-md rounded-lg border"
+      >
+         <ResizablePanel defaultSize={50}>
+            <div className="flex h-[200px] items-center justify-center p-6">
+               <span className="font-semibold">One</span>
+            </div>
+         </ResizablePanel>
+         <ResizableHandle />
+         <ResizablePanel defaultSize={50}>
+            <ResizablePanelGroup direction="vertical">
+               <ResizablePanel defaultSize={25}>
+                  <div className="flex h-full items-center justify-center p-6">
+                     <span className="font-semibold">Two</span>
+                  </div>
+               </ResizablePanel>
+               <ResizableHandle />
+               <ResizablePanel defaultSize={75}>
+                  <div className="flex h-full items-center justify-center p-6">
+                     <span className="font-semibold">Three</span>
+                  </div>
+               </ResizablePanel>
+            </ResizablePanelGroup>
+         </ResizablePanel>
+      </ResizablePanelGroup>
+   )
+}
diff --git a/apps/web/registry/miami/examples/resizable-handle.tsx b/apps/web/registry/miami/examples/resizable-handle.tsx
new file mode 100644
index 00000000..43e24627
--- /dev/null
+++ b/apps/web/registry/miami/examples/resizable-handle.tsx
@@ -0,0 +1,26 @@
+import {
+   ResizableHandle,
+   ResizablePanel,
+   ResizablePanelGroup,
+} from "~/registry/miami/ui/resizable"
+
+export default function ResizableDemo() {
+   return (
+      <ResizablePanelGroup
+         direction="horizontal"
+         className="min-h-[200px] max-w-md rounded-lg border"
+      >
+         <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+               <span className="font-semibold">Sidebar</span>
+            </div>
+         </ResizablePanel>
+         <ResizableHandle withHandle />
+         <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+               <span className="font-semibold">Content</span>
+            </div>
+         </ResizablePanel>
+      </ResizablePanelGroup>
+   )
+}
diff --git a/apps/web/registry/miami/examples/resizable-vertical.tsx b/apps/web/registry/miami/examples/resizable-vertical.tsx
new file mode 100644
index 00000000..3d9530aa
--- /dev/null
+++ b/apps/web/registry/miami/examples/resizable-vertical.tsx
@@ -0,0 +1,26 @@
+import {
+   ResizableHandle,
+   ResizablePanel,
+   ResizablePanelGroup,
+} from "~/registry/miami/ui/resizable"
+
+export default function ResizableDemo() {
+   return (
+      <ResizablePanelGroup
+         direction="vertical"
+         className="min-h-[200px] max-w-md rounded-lg border"
+      >
+         <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+               <span className="font-semibold">Header</span>
+            </div>
+         </ResizablePanel>
+         <ResizableHandle />
+         <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+               <span className="font-semibold">Content</span>
+            </div>
+         </ResizablePanel>
+      </ResizablePanelGroup>
+   )
+}
diff --git a/apps/web/registry/miami/examples/retro-grid-demo.tsx b/apps/web/registry/miami/examples/retro-grid-demo.tsx
new file mode 100644
index 00000000..b6e694dc
--- /dev/null
+++ b/apps/web/registry/miami/examples/retro-grid-demo.tsx
@@ -0,0 +1,15 @@
+"use client"
+
+import { RetroGrid } from "~/registry/miami/ui/retro-grid"
+
+export default function RetroGridDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <span className="pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent">
+            Retro Grid
+         </span>
+
+         <RetroGrid />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/ripple-button-demo.tsx b/apps/web/registry/miami/examples/ripple-button-demo.tsx
new file mode 100644
index 00000000..d75f1e45
--- /dev/null
+++ b/apps/web/registry/miami/examples/ripple-button-demo.tsx
@@ -0,0 +1,5 @@
+import { RippleButton } from "~/registry/miami/ui/ripple-button"
+
+export default function RippleButtonDemo() {
+   return <RippleButton rippleColor="#ADD8E6">Click me</RippleButton>
+}
diff --git a/apps/web/registry/miami/examples/ripple-demo.tsx b/apps/web/registry/miami/examples/ripple-demo.tsx
new file mode 100644
index 00000000..7ebe29c2
--- /dev/null
+++ b/apps/web/registry/miami/examples/ripple-demo.tsx
@@ -0,0 +1,12 @@
+import { Ripple } from "~/registry/miami/ui/ripple"
+
+export default function RippleDemo() {
+   return (
+      <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white">
+            Ripple
+         </p>
+         <Ripple />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/safari-demo-2.tsx b/apps/web/registry/miami/examples/safari-demo-2.tsx
new file mode 100644
index 00000000..7fd4af3b
--- /dev/null
+++ b/apps/web/registry/miami/examples/safari-demo-2.tsx
@@ -0,0 +1,13 @@
+import Safari from "~/registry/miami/ui/safari"
+
+export default function SafariDemo() {
+   return (
+      <div className="relative">
+         <Safari
+            url="nyxbui.design"
+            className="size-full"
+            src="https://via.placeholder.com/1200x750"
+         />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/safari-demo.tsx b/apps/web/registry/miami/examples/safari-demo.tsx
new file mode 100644
index 00000000..6046117f
--- /dev/null
+++ b/apps/web/registry/miami/examples/safari-demo.tsx
@@ -0,0 +1,9 @@
+import Safari from "~/registry/miami/ui/safari"
+
+export default function SafariDemo() {
+   return (
+      <div className="relative">
+         <Safari url="nyxbui.design" className="size-full" />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/scratch-to-reveal-demo.tsx b/apps/web/registry/miami/examples/scratch-to-reveal-demo.tsx
new file mode 100644
index 00000000..2bb31863
--- /dev/null
+++ b/apps/web/registry/miami/examples/scratch-to-reveal-demo.tsx
@@ -0,0 +1,24 @@
+import React from "react"
+import ScratchToReveal from "~/registry/miami/ui/scratch-to-reveal"
+
+function ScratchToRevealDemo() {
+   const handleComplete = () => {
+      // Do Something
+   }
+
+   return (
+      <div>
+         <ScratchToReveal
+            width={250}
+            height={250}
+            minScratchPercentage={70}
+            className="flex items-center justify-center overflow-hidden rounded-2xl border-2 bg-gray-100"
+            onComplete={handleComplete}
+         >
+            <p className="text-9xl">😎</p>
+         </ScratchToReveal>
+      </div>
+   )
+}
+
+export default ScratchToRevealDemo
diff --git a/apps/web/registry/miami/examples/script-copy-btn-demo.tsx b/apps/web/registry/miami/examples/script-copy-btn-demo.tsx
new file mode 100644
index 00000000..b5cf8a55
--- /dev/null
+++ b/apps/web/registry/miami/examples/script-copy-btn-demo.tsx
@@ -0,0 +1,19 @@
+import { ScriptCopyBtn } from "~/registry/miami/ui/script-copy-btn"
+
+export default function ScriptCopyBtnDemo() {
+   const customCommandMap = {
+      npm: "npm run nyxb add button",
+      yarn: "yarn nyxb add button",
+      pnpm: "pnpm dlx nyxb@latest add button",
+      bun: "bun x nyxb@latest add button",
+   }
+   return (
+      <ScriptCopyBtn
+         showMultiplePackageOptions={true}
+         codeLanguage="shell"
+         lightTheme="nord"
+         darkTheme="vitesse-dark"
+         commandMap={customCommandMap}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/scroll-area-demo.tsx b/apps/web/registry/miami/examples/scroll-area-demo.tsx
new file mode 100644
index 00000000..68ab8487
--- /dev/null
+++ b/apps/web/registry/miami/examples/scroll-area-demo.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+import { ScrollArea } from "~/registry/miami/ui/scroll-area"
+import { Separator } from "~/registry/miami/ui/separator"
+
+const tags = Array.from({ length: 50 }).map(
+   (_, i, a) => `v1.2.0-beta.${a.length - i}`,
+)
+
+export default function ScrollAreaDemo() {
+   return (
+      <ScrollArea className="h-72 w-48 rounded-md border">
+         <div className="p-4">
+            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+            {tags.map((tag) => (
+               <>
+                  <div key={tag} className="text-sm">
+                     {tag}
+                  </div>
+                  <Separator className="my-2" />
+               </>
+            ))}
+         </div>
+      </ScrollArea>
+   )
+}
diff --git a/apps/web/registry/miami/examples/scroll-area-horizontal-demo.tsx b/apps/web/registry/miami/examples/scroll-area-horizontal-demo.tsx
new file mode 100644
index 00000000..f56884fc
--- /dev/null
+++ b/apps/web/registry/miami/examples/scroll-area-horizontal-demo.tsx
@@ -0,0 +1,53 @@
+import Image from "next/image"
+import * as React from "react"
+
+import { ScrollArea, ScrollBar } from "~/registry/miami/ui/scroll-area"
+
+export interface Artwork {
+   artist: string
+   art: string
+}
+
+export const works: Artwork[] = [
+   {
+      artist: "Ornella Binni",
+      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+   },
+   {
+      artist: "Tom Byrom",
+      art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+   },
+   {
+      artist: "Vladimir Malyavko",
+      art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+   },
+]
+
+export default function ScrollAreaHorizontalDemo() {
+   return (
+      <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+         <div className="flex w-max space-x-4 p-4">
+            {works.map((artwork) => (
+               <figure key={artwork.artist} className="shrink-0">
+                  <div className="overflow-hidden rounded-md">
+                     <Image
+                        src={artwork.art}
+                        alt={`Photo by ${artwork.artist}`}
+                        className="aspect-[3/4] size-fit object-cover"
+                        width={300}
+                        height={400}
+                     />
+                  </div>
+                  <figcaption className="text-muted-foreground pt-2 text-xs">
+                     Photo by{" "}
+                     <span className="text-foreground font-semibold">
+                        {artwork.artist}
+                     </span>
+                  </figcaption>
+               </figure>
+            ))}
+         </div>
+         <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+   )
+}
diff --git a/apps/web/registry/miami/examples/scroll-based-velocity-demo.tsx b/apps/web/registry/miami/examples/scroll-based-velocity-demo.tsx
new file mode 100644
index 00000000..c08c133c
--- /dev/null
+++ b/apps/web/registry/miami/examples/scroll-based-velocity-demo.tsx
@@ -0,0 +1,11 @@
+import { VelocityScroll } from "~/registry/miami/ui/scroll-based-velocity"
+
+export default function ScrollBasedVelocityDemo() {
+   return (
+      <VelocityScroll
+         text="Velocity Scroll"
+         default_velocity={5}
+         className="font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/scroll-progress-demo.tsx b/apps/web/registry/miami/examples/scroll-progress-demo.tsx
new file mode 100644
index 00000000..5e1a609e
--- /dev/null
+++ b/apps/web/registry/miami/examples/scroll-progress-demo.tsx
@@ -0,0 +1,27 @@
+import ScrollProgress from "~/registry/miami/ui/scroll-progress"
+
+const dummyContent = Array.from({ length: 10 }, (_, i) => (
+   <p key={i}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam
+      lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra
+      nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam
+      eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue
+      enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu
+      vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit.
+   </p>
+))
+
+function ScrollProgressDemo() {
+   return (
+      <div>
+         <ScrollProgress className="top-[65px]" />
+         <strong>
+            Note: The scroll progress is shown below the navbar of the page.
+         </strong>
+         {dummyContent}
+      </div>
+   )
+}
+
+export default ScrollProgressDemo
diff --git a/apps/web/registry/miami/examples/select-demo.tsx b/apps/web/registry/miami/examples/select-demo.tsx
new file mode 100644
index 00000000..f9642240
--- /dev/null
+++ b/apps/web/registry/miami/examples/select-demo.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import {
+   Select,
+   SelectContent,
+   SelectGroup,
+   SelectItem,
+   SelectLabel,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export default function SelectDemo() {
+   return (
+      <Select>
+         <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select a fruit" />
+         </SelectTrigger>
+         <SelectContent>
+            <SelectGroup>
+               <SelectLabel>Fruits</SelectLabel>
+               <SelectItem value="apple">Apple</SelectItem>
+               <SelectItem value="banana">Banana</SelectItem>
+               <SelectItem value="blueberry">Blueberry</SelectItem>
+               <SelectItem value="grapes">Grapes</SelectItem>
+               <SelectItem value="pineapple">Pineapple</SelectItem>
+            </SelectGroup>
+         </SelectContent>
+      </Select>
+   )
+}
diff --git a/apps/web/registry/miami/examples/select-form.tsx b/apps/web/registry/miami/examples/select-form.tsx
new file mode 100644
index 00000000..e00b5fd6
--- /dev/null
+++ b/apps/web/registry/miami/examples/select-form.tsx
@@ -0,0 +1,98 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import Link from "next/link"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/miami/ui/form"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const FormSchema = z.object({
+   email: z
+      .string({
+         required_error: "Please select an email to display.",
+      })
+      .email(),
+})
+
+export default function SelectForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="email"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Email</FormLabel>
+                     <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                     >
+                        <FormControl>
+                           <SelectTrigger>
+                              <SelectValue placeholder="Select a verified email to display" />
+                           </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                           <SelectItem value="m@example.com">
+                              m@example.com
+                           </SelectItem>
+                           <SelectItem value="m@google.com">
+                              m@google.com
+                           </SelectItem>
+                           <SelectItem value="m@support.com">
+                              m@support.com
+                           </SelectItem>
+                        </SelectContent>
+                     </Select>
+                     <FormDescription>
+                        You can manage email addresses in your{" "}
+                        <Link href="/examples/forms">email settings</Link>.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/select-scrollable.tsx b/apps/web/registry/miami/examples/select-scrollable.tsx
new file mode 100644
index 00000000..0c3e827b
--- /dev/null
+++ b/apps/web/registry/miami/examples/select-scrollable.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import {
+   Select,
+   SelectContent,
+   SelectGroup,
+   SelectItem,
+   SelectLabel,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export default function SelectScrollable() {
+   return (
+      <Select>
+         <SelectTrigger className="w-[280px]">
+            <SelectValue placeholder="Select a timezone" />
+         </SelectTrigger>
+         <SelectContent>
+            <SelectGroup>
+               <SelectLabel>North America</SelectLabel>
+               <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
+               <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
+               <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
+               <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
+               <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
+               <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
+            </SelectGroup>
+            <SelectGroup>
+               <SelectLabel>Europe & Africa</SelectLabel>
+               <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
+               <SelectItem value="cet">Central European Time (CET)</SelectItem>
+               <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
+               <SelectItem value="west">
+                  Western European Summer Time (WEST)
+               </SelectItem>
+               <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
+               <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
+            </SelectGroup>
+            <SelectGroup>
+               <SelectLabel>Asia</SelectLabel>
+               <SelectItem value="msk">Moscow Time (MSK)</SelectItem>
+               <SelectItem value="ist">India Standard Time (IST)</SelectItem>
+               <SelectItem value="cst_china">
+                  China Standard Time (CST)
+               </SelectItem>
+               <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
+               <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
+               <SelectItem value="ist_indonesia">
+                  Indonesia Central Standard Time (WITA)
+               </SelectItem>
+            </SelectGroup>
+            <SelectGroup>
+               <SelectLabel>Australia & Pacific</SelectLabel>
+               <SelectItem value="awst">
+                  Australian Western Standard Time (AWST)
+               </SelectItem>
+               <SelectItem value="acst">
+                  Australian Central Standard Time (ACST)
+               </SelectItem>
+               <SelectItem value="aest">
+                  Australian Eastern Standard Time (AEST)
+               </SelectItem>
+               <SelectItem value="nzst">
+                  New Zealand Standard Time (NZST)
+               </SelectItem>
+               <SelectItem value="fjt">Fiji Time (FJT)</SelectItem>
+            </SelectGroup>
+            <SelectGroup>
+               <SelectLabel>South America</SelectLabel>
+               <SelectItem value="art">Argentina Time (ART)</SelectItem>
+               <SelectItem value="bot">Bolivia Time (BOT)</SelectItem>
+               <SelectItem value="brt">Brasilia Time (BRT)</SelectItem>
+               <SelectItem value="clt">Chile Standard Time (CLT)</SelectItem>
+            </SelectGroup>
+         </SelectContent>
+      </Select>
+   )
+}
diff --git a/apps/web/registry/miami/examples/separate-away-demo.tsx b/apps/web/registry/miami/examples/separate-away-demo.tsx
new file mode 100644
index 00000000..cf390e28
--- /dev/null
+++ b/apps/web/registry/miami/examples/separate-away-demo.tsx
@@ -0,0 +1,14 @@
+import { SeparateAway } from "~/registry/miami/ui/separate-away"
+
+export default async function SeparateAwayDemo() {
+   return (
+      <SeparateAway
+         upper_text="Separate"
+         lower_text="Away"
+         duration={1.5}
+         hidden_opacity={0}
+         visible_opacity={1}
+         className="font-display text-center text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/separator-demo.tsx b/apps/web/registry/miami/examples/separator-demo.tsx
new file mode 100644
index 00000000..7892de1e
--- /dev/null
+++ b/apps/web/registry/miami/examples/separator-demo.tsx
@@ -0,0 +1,24 @@
+import { Separator } from "~/registry/miami/ui/separator"
+
+export default function SeparatorDemo() {
+   return (
+      <div>
+         <div className="space-y-1">
+            <h4 className="text-sm font-medium leading-none">
+               Radix Primitives
+            </h4>
+            <p className="text-muted-foreground text-sm">
+               An open-source UI component library.
+            </p>
+         </div>
+         <Separator className="my-4" />
+         <div className="flex h-5 items-center space-x-4 text-sm">
+            <div>Blog</div>
+            <Separator orientation="vertical" />
+            <div>Docs</div>
+            <Separator orientation="vertical" />
+            <div>Source</div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/sheet-demo.tsx b/apps/web/registry/miami/examples/sheet-demo.tsx
new file mode 100644
index 00000000..ecdd8063
--- /dev/null
+++ b/apps/web/registry/miami/examples/sheet-demo.tsx
@@ -0,0 +1,59 @@
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Sheet,
+   SheetClose,
+   SheetContent,
+   SheetDescription,
+   SheetFooter,
+   SheetHeader,
+   SheetTitle,
+   SheetTrigger,
+} from "~/registry/miami/ui/sheet"
+
+export default function SheetDemo() {
+   return (
+      <Sheet>
+         <SheetTrigger asChild>
+            <Button variant="outline">Open</Button>
+         </SheetTrigger>
+         <SheetContent>
+            <SheetHeader>
+               <SheetTitle>Edit profile</SheetTitle>
+               <SheetDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+               </SheetDescription>
+            </SheetHeader>
+            <div className="grid gap-4 py-4">
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="name" className="text-right">
+                     Name
+                  </Label>
+                  <Input
+                     id="name"
+                     value="Pedro Duarte"
+                     className="col-span-3"
+                  />
+               </div>
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="username" className="text-right">
+                     Username
+                  </Label>
+                  <Input
+                     id="username"
+                     value="@peduarte"
+                     className="col-span-3"
+                  />
+               </div>
+            </div>
+            <SheetFooter>
+               <SheetClose asChild>
+                  <Button type="submit">Save changes</Button>
+               </SheetClose>
+            </SheetFooter>
+         </SheetContent>
+      </Sheet>
+   )
+}
diff --git a/apps/web/registry/miami/examples/sheet-side.tsx b/apps/web/registry/miami/examples/sheet-side.tsx
new file mode 100644
index 00000000..1d9c9bbd
--- /dev/null
+++ b/apps/web/registry/miami/examples/sheet-side.tsx
@@ -0,0 +1,69 @@
+"use client"
+
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Sheet,
+   SheetClose,
+   SheetContent,
+   SheetDescription,
+   SheetFooter,
+   SheetHeader,
+   SheetTitle,
+   SheetTrigger,
+} from "~/registry/miami/ui/sheet"
+
+const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
+
+type SheetSide = (typeof SHEET_SIDES)[number]
+
+export default function SheetSide() {
+   return (
+      <div className="grid grid-cols-2 gap-2">
+         {SHEET_SIDES.map((side) => (
+            <Sheet key={side}>
+               <SheetTrigger asChild>
+                  <Button variant="outline">{side}</Button>
+               </SheetTrigger>
+               <SheetContent side={side}>
+                  <SheetHeader>
+                     <SheetTitle>Edit profile</SheetTitle>
+                     <SheetDescription>
+                        Make changes to your profile here. Click save when
+                        you're done.
+                     </SheetDescription>
+                  </SheetHeader>
+                  <div className="grid gap-4 py-4">
+                     <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="name" className="text-right">
+                           Name
+                        </Label>
+                        <Input
+                           id="name"
+                           value="Pedro Duarte"
+                           className="col-span-3"
+                        />
+                     </div>
+                     <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="username" className="text-right">
+                           Username
+                        </Label>
+                        <Input
+                           id="username"
+                           value="~peduarte"
+                           className="col-span-3"
+                        />
+                     </div>
+                  </div>
+                  <SheetFooter>
+                     <SheetClose asChild>
+                        <Button type="submit">Save changes</Button>
+                     </SheetClose>
+                  </SheetFooter>
+               </SheetContent>
+            </Sheet>
+         ))}
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/shimmer-button-demo.tsx b/apps/web/registry/miami/examples/shimmer-button-demo.tsx
new file mode 100644
index 00000000..a09f2606
--- /dev/null
+++ b/apps/web/registry/miami/examples/shimmer-button-demo.tsx
@@ -0,0 +1,13 @@
+import ShimmerButton from "~/registry/miami/ui/shimmer-button"
+
+export default function ShimmerButtonDemo() {
+   return (
+      <div className="z-10 flex min-h-64 items-center justify-center">
+         <ShimmerButton className="shadow-2xl">
+            <span className="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10">
+               Shimmer Button
+            </span>
+         </ShimmerButton>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/shine-border-demo-2.tsx b/apps/web/registry/miami/examples/shine-border-demo-2.tsx
new file mode 100644
index 00000000..1742d184
--- /dev/null
+++ b/apps/web/registry/miami/examples/shine-border-demo-2.tsx
@@ -0,0 +1,9 @@
+import ShineBorder from "~/registry/miami/ui/shine-border"
+
+export default function ShineBorderDemo() {
+   return (
+      <ShineBorder className="text-center text-2xl font-bold capitalize">
+         Shine Border
+      </ShineBorder>
+   )
+}
diff --git a/apps/web/registry/miami/examples/shine-border-demo.tsx b/apps/web/registry/miami/examples/shine-border-demo.tsx
new file mode 100644
index 00000000..143f1b1c
--- /dev/null
+++ b/apps/web/registry/miami/examples/shine-border-demo.tsx
@@ -0,0 +1,14 @@
+import ShineBorder from "~/registry/miami/ui/shine-border"
+
+export default function ShineBorderDemo() {
+   return (
+      <ShineBorder
+         className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border md:shadow-xl"
+         color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
+      >
+         <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
+            Shine Border
+         </span>
+      </ShineBorder>
+   )
+}
diff --git a/apps/web/registry/miami/examples/shiny-button-demo.tsx b/apps/web/registry/miami/examples/shiny-button-demo.tsx
new file mode 100644
index 00000000..c4408767
--- /dev/null
+++ b/apps/web/registry/miami/examples/shiny-button-demo.tsx
@@ -0,0 +1,5 @@
+import ShinyButton from "~/registry/miami/ui/shiny-button"
+
+export default function ShinyButtonDemo() {
+   return <ShinyButton text="Shiny Button" />
+}
diff --git a/apps/web/registry/miami/examples/skeleton-card.tsx b/apps/web/registry/miami/examples/skeleton-card.tsx
new file mode 100644
index 00000000..87ec37b3
--- /dev/null
+++ b/apps/web/registry/miami/examples/skeleton-card.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "~/registry/miami/ui/skeleton"
+
+export default function SkeletonCard() {
+   return (
+      <div className="flex flex-col space-y-3">
+         <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+         <div className="space-y-2">
+            <Skeleton className="h-4 w-[250px]" />
+            <Skeleton className="h-4 w-[200px]" />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/skeleton-demo.tsx b/apps/web/registry/miami/examples/skeleton-demo.tsx
new file mode 100644
index 00000000..de6d3bc6
--- /dev/null
+++ b/apps/web/registry/miami/examples/skeleton-demo.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "~/registry/miami/ui/skeleton"
+
+export default function SkeletonDemo() {
+   return (
+      <div className="flex items-center space-x-4">
+         <Skeleton className="size-12 rounded-full" />
+         <div className="space-y-2">
+            <Skeleton className="h-4 w-[250px]" />
+            <Skeleton className="h-4 w-[200px]" />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/slider-demo.tsx b/apps/web/registry/miami/examples/slider-demo.tsx
new file mode 100644
index 00000000..5124956c
--- /dev/null
+++ b/apps/web/registry/miami/examples/slider-demo.tsx
@@ -0,0 +1,16 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/miami/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderDemo({ className, ...props }: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[50]}
+         max={100}
+         step={1}
+         className={ny("w-3/5", className)}
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/slider-disabled.tsx b/apps/web/registry/miami/examples/slider-disabled.tsx
new file mode 100644
index 00000000..f505ba5f
--- /dev/null
+++ b/apps/web/registry/miami/examples/slider-disabled.tsx
@@ -0,0 +1,17 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/miami/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderDisabled({ className, ...props }: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[50]}
+         max={100}
+         step={1}
+         className={ny("w-3/5", className)}
+         disabled
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/slider-format-label-side.tsx b/apps/web/registry/miami/examples/slider-format-label-side.tsx
new file mode 100644
index 00000000..c35e183a
--- /dev/null
+++ b/apps/web/registry/miami/examples/slider-format-label-side.tsx
@@ -0,0 +1,21 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/miami/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderFormatLabelSide({
+   className,
+   ...props
+}: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[2]}
+         max={5}
+         step={1}
+         className={ny("w-3/5", className)}
+         formatLabel={(value) => `${value} points`}
+         formatLabelSide="left"
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/slider-format-label.tsx b/apps/web/registry/miami/examples/slider-format-label.tsx
new file mode 100644
index 00000000..0af3bb11
--- /dev/null
+++ b/apps/web/registry/miami/examples/slider-format-label.tsx
@@ -0,0 +1,20 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/miami/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderFormatLabel({
+   className,
+   ...props
+}: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[2]}
+         max={5}
+         step={1}
+         className={ny("w-3/5", className)}
+         formatLabel={(value) => `${value} points`}
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/slider-inverted.tsx b/apps/web/registry/miami/examples/slider-inverted.tsx
new file mode 100644
index 00000000..7d4f5c7a
--- /dev/null
+++ b/apps/web/registry/miami/examples/slider-inverted.tsx
@@ -0,0 +1,17 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/miami/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderInverted({ className, ...props }: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[50]}
+         max={100}
+         step={1}
+         className={ny("w-3/5", className)}
+         inverted
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/slider-range.tsx b/apps/web/registry/miami/examples/slider-range.tsx
new file mode 100644
index 00000000..91315124
--- /dev/null
+++ b/apps/web/registry/miami/examples/slider-range.tsx
@@ -0,0 +1,16 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/miami/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderRange({ className, ...props }: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[25, 75]}
+         max={100}
+         step={1}
+         className={ny("w-3/5", className)}
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/slider-ranges.tsx b/apps/web/registry/miami/examples/slider-ranges.tsx
new file mode 100644
index 00000000..4c235c1c
--- /dev/null
+++ b/apps/web/registry/miami/examples/slider-ranges.tsx
@@ -0,0 +1,16 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/miami/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderDemo({ className, ...props }: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[50, 75]}
+         max={100}
+         step={1}
+         className={ny("w-3/5", className)}
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/slider-tick-marks-full.tsx b/apps/web/registry/miami/examples/slider-tick-marks-full.tsx
new file mode 100644
index 00000000..7f07981e
--- /dev/null
+++ b/apps/web/registry/miami/examples/slider-tick-marks-full.tsx
@@ -0,0 +1,20 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/miami/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderTickMarksFull({
+   className,
+   ...props
+}: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[2]}
+         max={5}
+         step={1}
+         className={ny("w-3/5", className)}
+         showSteps="full"
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/slider-tick-marks-half.tsx b/apps/web/registry/miami/examples/slider-tick-marks-half.tsx
new file mode 100644
index 00000000..ab48c089
--- /dev/null
+++ b/apps/web/registry/miami/examples/slider-tick-marks-half.tsx
@@ -0,0 +1,20 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/miami/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderTickMarksHalf({
+   className,
+   ...props
+}: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[2]}
+         max={5}
+         step={1}
+         className={ny("w-3/5", className)}
+         showSteps="half"
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/slider-vertical.tsx b/apps/web/registry/miami/examples/slider-vertical.tsx
new file mode 100644
index 00000000..a465e2f9
--- /dev/null
+++ b/apps/web/registry/miami/examples/slider-vertical.tsx
@@ -0,0 +1,21 @@
+import { Slider } from "~/registry/miami/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderVertical({ className, ...props }: SliderProps) {
+   return (
+      <>
+         {/* Vertical slider needs its parent container to define the height */}
+         <div className="h-64">
+            <Slider
+               defaultValue={[50]}
+               max={100}
+               step={1}
+               orientation="vertical"
+               className={className}
+               {...props}
+            />
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/sonner-demo.tsx b/apps/web/registry/miami/examples/sonner-demo.tsx
new file mode 100644
index 00000000..fe0c6a12
--- /dev/null
+++ b/apps/web/registry/miami/examples/sonner-demo.tsx
@@ -0,0 +1,24 @@
+import { toast } from "sonner"
+
+import { Button } from "~/registry/miami/ui/button"
+
+export default function SonnerDemo() {
+   return (
+      <Button
+         variant="outline"
+         onClick={() =>
+            toast("Event has been created", {
+               description: "Sunday, December 03, 2023 at 9:00 AM",
+               action: {
+                  label: "Undo",
+
+                  // eslint-disable-next-line no-console
+                  onClick: () => console.log("Undo"),
+               },
+            })
+         }
+      >
+         Show Toast
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/examples/sparkles-text-demo.tsx b/apps/web/registry/miami/examples/sparkles-text-demo.tsx
new file mode 100644
index 00000000..eae3fe4a
--- /dev/null
+++ b/apps/web/registry/miami/examples/sparkles-text-demo.tsx
@@ -0,0 +1,5 @@
+import SparklesText from "~/registry/miami/ui/sparkles-text"
+
+export default async function SparklesTextDemo() {
+   return <SparklesText text="Nyxb UI" />
+}
diff --git a/apps/web/registry/miami/examples/star-rating-colored.tsx b/apps/web/registry/miami/examples/star-rating-colored.tsx
new file mode 100644
index 00000000..9306faba
--- /dev/null
+++ b/apps/web/registry/miami/examples/star-rating-colored.tsx
@@ -0,0 +1,13 @@
+import * as React from "react"
+import { StarRating } from "~/registry/miami/ui/star-rating"
+
+export default function StarRatingColored() {
+   const [value, setValue] = React.useState<number>(3)
+   return (
+      <StarRating
+         value={value}
+         setValue={setValue}
+         iconProps={{ className: "fill-yellow-500 stroke-yellow-500" }}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/star-rating-demo.tsx b/apps/web/registry/miami/examples/star-rating-demo.tsx
new file mode 100644
index 00000000..aed16cb2
--- /dev/null
+++ b/apps/web/registry/miami/examples/star-rating-demo.tsx
@@ -0,0 +1,7 @@
+import * as React from "react"
+import { StarRating } from "~/registry/miami/ui/star-rating"
+
+export default function StarRatingDemo() {
+   const [value, setValue] = React.useState<number>(3)
+   return <StarRating value={value} setValue={setValue} />
+}
diff --git a/apps/web/registry/miami/examples/star-rating-icon.tsx b/apps/web/registry/miami/examples/star-rating-icon.tsx
new file mode 100644
index 00000000..c9d7fea0
--- /dev/null
+++ b/apps/web/registry/miami/examples/star-rating-icon.tsx
@@ -0,0 +1,8 @@
+import { Heart } from "lucide-react"
+import * as React from "react"
+import { StarRating } from "~/registry/miami/ui/star-rating"
+
+export default function StarRatingIcon() {
+   const [value, setValue] = React.useState<number>(3)
+   return <StarRating value={value} setValue={setValue} icon={Heart} />
+}
diff --git a/apps/web/registry/miami/examples/stepper-clickable-steps.tsx b/apps/web/registry/miami/examples/stepper-clickable-steps.tsx
new file mode 100644
index 00000000..96b6fe98
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-clickable-steps.tsx
@@ -0,0 +1,85 @@
+import { Button } from "~/registry/miami/ui/button"
+import type { StepItem } from "~/registry/miami/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper
+            initialStep={0}
+            steps={steps}
+            onClickStep={(step, setStep) => {
+               toast({
+                  title: "Step clicked",
+                  description:
+                     "This event is executed globally for all steps. If you want to have an event for a specific step, use the `onClickStep` prop of the independent step.",
+               })
+               setStep(step)
+            }}
+         >
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/stepper-custom-icons.tsx b/apps/web/registry/miami/examples/stepper-custom-icons.tsx
new file mode 100644
index 00000000..71284c1e
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-custom-icons.tsx
@@ -0,0 +1,75 @@
+import { Building, Star, User } from "lucide-react"
+
+import { Button } from "~/registry/miami/ui/button"
+import type { StepItem } from "~/registry/miami/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+
+const steps = [
+   { label: "Step 1", icon: User },
+   { label: "Step 2", icon: Building },
+   { label: "Step 3", icon: Star },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/stepper-custom-styles.tsx b/apps/web/registry/miami/examples/stepper-custom-styles.tsx
new file mode 100644
index 00000000..5d3434ab
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-custom-styles.tsx
@@ -0,0 +1,90 @@
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import type { StepItem } from "~/registry/miami/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper
+            initialStep={0}
+            steps={steps}
+            styles={{
+               "step-button-container": ny(
+                  "rounded-none text-purple-700",
+                  "data-[current=true]:border-purple-500 data-[current=true]:bg-purple-50",
+                  "data-[active=true]:border-purple-500 data-[active=true]:bg-purple-500",
+               ),
+               "horizontal-step":
+                  "data-[completed=true]:[&:not(:last-child)]:after:bg-purple-500",
+            }}
+            variables={{
+               "--step-icon-size": "60px",
+               "--step-gap": "20px",
+            }}
+         >
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+      isDisabledStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/stepper-demo.tsx b/apps/web/registry/miami/examples/stepper-demo.tsx
new file mode 100644
index 00000000..1b3a0755
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-demo.tsx
@@ -0,0 +1,73 @@
+import { Button } from "~/registry/miami/ui/button"
+import type { StepItem } from "~/registry/miami/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+      isDisabledStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/stepper-description.tsx b/apps/web/registry/miami/examples/stepper-description.tsx
new file mode 100644
index 00000000..61e8e93a
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-description.tsx
@@ -0,0 +1,73 @@
+import { Button } from "~/registry/miami/ui/button"
+import type { StepItem } from "~/registry/miami/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+
+const steps = [
+   { label: "Step 1", description: "Description 1" },
+   { label: "Step 2", description: "Description 2" },
+   { label: "Step 3", description: "Description 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+      isDisabledStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/stepper-footer-inside.tsx b/apps/web/registry/miami/examples/stepper-footer-inside.tsx
new file mode 100644
index 00000000..69418767
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-footer-inside.tsx
@@ -0,0 +1,71 @@
+import { Button } from "~/registry/miami/ui/button"
+import type { StepItem } from "~/registry/miami/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper orientation="vertical" initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                     <StepButtons />
+                  </Step>
+               )
+            })}
+            <FinalStep />
+         </Stepper>
+      </div>
+   )
+}
+
+function StepButtons() {
+   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =
+      useStepper()
+   return (
+      <div className="mb-4 flex w-full gap-2">
+         <Button
+            disabled={isDisabledStep}
+            onClick={prevStep}
+            size="sm"
+            variant="secondary"
+         >
+            Prev
+         </Button>
+         <Button size="sm" onClick={nextStep}>
+            {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+         </Button>
+      </div>
+   )
+}
+
+function FinalStep() {
+   const { hasCompletedAllSteps, resetSteps } = useStepper()
+
+   if (!hasCompletedAllSteps) return null
+
+   return (
+      <>
+         <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
+            <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+         </div>
+         <div className="flex w-full justify-end gap-2">
+            <Button size="sm" onClick={resetSteps}>
+               Reset
+            </Button>
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/stepper-form.tsx b/apps/web/registry/miami/examples/stepper-form.tsx
new file mode 100644
index 00000000..53a188dc
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-form.tsx
@@ -0,0 +1,191 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/miami/ui/form"
+import { Input } from "~/registry/miami/ui/input"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const steps = [
+   { label: "Step 1", description: "Description 1" },
+   { label: "Step 2", description: "Description 2" },
+]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper variant="circle-alt" initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               if (index === 0) {
+                  return (
+                     <Step key={stepProps.label} {...stepProps}>
+                        <FirstStepForm />
+                     </Step>
+                  )
+               }
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <SecondStepForm />
+                  </Step>
+               )
+            })}
+            <MyStepperFooter />
+         </Stepper>
+      </div>
+   )
+}
+
+const FirstFormSchema = z.object({
+   username: z.string().min(2, {
+      message: "Username must be at least 2 characters.",
+   }),
+})
+
+function FirstStepForm() {
+   const { nextStep } = useStepper()
+
+   const form = useForm<z.infer<typeof FirstFormSchema>>({
+      resolver: zodResolver(FirstFormSchema),
+      defaultValues: {
+         username: "",
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FirstFormSchema>) {
+      nextStep()
+      toast({
+         title: "First step submitted!",
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+               control={form.control}
+               name="username"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Username</FormLabel>
+                     <FormControl>
+                        <Input placeholder="nyxb" {...field} />
+                     </FormControl>
+                     <FormDescription>
+                        This is your public display name.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <StepperFormActions />
+         </form>
+      </Form>
+   )
+}
+
+const SecondFormSchema = z.object({
+   password: z.string().min(8, {
+      message: "Password must be at least 8 characters.",
+   }),
+})
+
+function SecondStepForm() {
+   const { nextStep } = useStepper()
+
+   const form = useForm<z.infer<typeof SecondFormSchema>>({
+      resolver: zodResolver(SecondFormSchema),
+      defaultValues: {
+         password: "",
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof SecondFormSchema>) {
+      nextStep()
+      toast({
+         title: "Second step submitted!",
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+               control={form.control}
+               name="password"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Password</FormLabel>
+                     <FormControl>
+                        <Input type="password" {...field} />
+                     </FormControl>
+                     <FormDescription>
+                        This is your private password.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <StepperFormActions />
+         </form>
+      </Form>
+   )
+}
+
+function StepperFormActions() {
+   const {
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+
+   return (
+      <div className="flex w-full justify-end gap-2">
+         {hasCompletedAllSteps ? (
+            <Button size="sm" onClick={resetSteps}>
+               Reset
+            </Button>
+         ) : (
+            <>
+               <Button
+                  disabled={isDisabledStep}
+                  onClick={prevStep}
+                  size="sm"
+                  variant="secondary"
+               >
+                  Prev
+               </Button>
+               <Button size="sm">
+                  {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+               </Button>
+            </>
+         )}
+      </div>
+   )
+}
+
+function MyStepperFooter() {
+   const { activeStep, resetSteps, steps } = useStepper()
+
+   if (activeStep !== steps.length) return null
+
+   return (
+      <div className="flex items-center justify-end gap-2">
+         <Button onClick={resetSteps}>Reset Stepper with Form</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/stepper-optional-steps.tsx b/apps/web/registry/miami/examples/stepper-optional-steps.tsx
new file mode 100644
index 00000000..0e29b1ec
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-optional-steps.tsx
@@ -0,0 +1,73 @@
+import { Button } from "~/registry/miami/ui/button"
+import type { StepItem } from "~/registry/miami/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2", optional: true },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/stepper-orientation.tsx b/apps/web/registry/miami/examples/stepper-orientation.tsx
new file mode 100644
index 00000000..919dd5bf
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-orientation.tsx
@@ -0,0 +1,110 @@
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import { Label } from "~/registry/miami/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/miami/ui/radio-group"
+import type { StepItem, StepperProps } from "~/registry/miami/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   const [orientation, setOrientation] =
+      React.useState<StepperProps["orientation"]>("vertical")
+
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <RadioGroup
+            className="mb-2 flex"
+            value={orientation}
+            onValueChange={(value) =>
+               setOrientation(value as StepperProps["orientation"])
+            }
+         >
+            <Label
+               htmlFor="horizontal"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem
+                  value="horizontal"
+                  id="horizontal"
+                  className="sr-only"
+               />
+               <h2 className="font-medium">Horizontal</h2>
+            </Label>
+            <Label
+               htmlFor="vertical"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem
+                  value="vertical"
+                  id="vertical"
+                  className="sr-only"
+               />
+               <h2 className="font-medium">Vertical</h2>
+            </Label>
+         </RadioGroup>
+         <Stepper orientation={orientation} initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/stepper-scroll-tracking.tsx b/apps/web/registry/miami/examples/stepper-scroll-tracking.tsx
new file mode 100644
index 00000000..55cad3e0
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-scroll-tracking.tsx
@@ -0,0 +1,79 @@
+import { Button } from "~/registry/miami/ui/button"
+import type { StepItem } from "~/registry/miami/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+   { label: "Step 4" },
+   { label: "Step 5" },
+   { label: "Step 6" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper
+            orientation="vertical"
+            initialStep={0}
+            steps={steps}
+            scrollTracking
+         >
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                     <StepButtons />
+                  </Step>
+               )
+            })}
+            <FinalStep />
+         </Stepper>
+      </div>
+   )
+}
+
+function StepButtons() {
+   const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =
+      useStepper()
+   return (
+      <div className="mb-4 flex w-full gap-2">
+         <Button
+            disabled={isDisabledStep}
+            onClick={prevStep}
+            size="sm"
+            variant="secondary"
+         >
+            Prev
+         </Button>
+         <Button size="sm" onClick={nextStep}>
+            {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+         </Button>
+      </div>
+   )
+}
+
+function FinalStep() {
+   const { hasCompletedAllSteps, resetSteps } = useStepper()
+
+   if (!hasCompletedAllSteps) return null
+
+   return (
+      <>
+         <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
+            <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+         </div>
+         <div className="flex w-full justify-end gap-2">
+            <Button size="sm" onClick={resetSteps}>
+               Reset
+            </Button>
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/stepper-sizes.tsx b/apps/web/registry/miami/examples/stepper-sizes.tsx
new file mode 100644
index 00000000..861ad6aa
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-sizes.tsx
@@ -0,0 +1,106 @@
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import { Label } from "~/registry/miami/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/miami/ui/radio-group"
+import type { StepItem, StepperProps } from "~/registry/miami/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   const [size, setSize] = React.useState<StepperProps["size"]>("md")
+
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <RadioGroup
+            className="mb-2 flex"
+            value={size}
+            onValueChange={(value) => setSize(value as StepperProps["size"])}
+         >
+            <Label
+               htmlFor="sm"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem value="sm" id="sm" className="sr-only" />
+               <h2 className="font-medium">sm</h2>
+            </Label>
+            <Label
+               htmlFor="md"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem value="md" id="md" className="sr-only" />
+               <h2 className="font-medium">md</h2>
+            </Label>
+            <Label
+               htmlFor="lg"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem value="lg" id="lg" className="sr-only" />
+               <h2 className="font-medium">lg</h2>
+            </Label>
+         </RadioGroup>
+         <Stepper size={size} initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/stepper-state.tsx b/apps/web/registry/miami/examples/stepper-state.tsx
new file mode 100644
index 00000000..67acd075
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-state.tsx
@@ -0,0 +1,74 @@
+import { Button } from "~/registry/miami/ui/button"
+import type { StepItem } from "~/registry/miami/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <Stepper state="error" initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+      isError,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button disabled={isError} size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/stepper-variants.tsx b/apps/web/registry/miami/examples/stepper-variants.tsx
new file mode 100644
index 00000000..e566b833
--- /dev/null
+++ b/apps/web/registry/miami/examples/stepper-variants.tsx
@@ -0,0 +1,113 @@
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import { Label } from "~/registry/miami/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/miami/ui/radio-group"
+import type { StepItem, StepperProps } from "~/registry/miami/ui/stepper"
+import { Step, Stepper, useStepper } from "~/registry/miami/ui/stepper"
+
+const steps = [
+   { label: "Step 1" },
+   { label: "Step 2" },
+   { label: "Step 3" },
+] satisfies StepItem[]
+
+export default function StepperDemo() {
+   const [variant, setVariant] =
+      React.useState<StepperProps["variant"]>("circle")
+
+   return (
+      <div className="flex w-full flex-col gap-4">
+         <RadioGroup
+            className="mb-2 flex"
+            value={variant}
+            onValueChange={(value) =>
+               setVariant(value as StepperProps["variant"])
+            }
+         >
+            <Label
+               htmlFor="circle"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem value="circle" id="circle" className="sr-only" />
+               <h2 className="font-medium">circle</h2>
+            </Label>
+            <Label
+               htmlFor="circle-alt"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem
+                  value="circle-alt"
+                  id="circle-alt"
+                  className="sr-only"
+               />
+               <h2 className="font-medium">circle-alt</h2>
+            </Label>
+            <Label
+               htmlFor="line"
+               className="bg-background hover:bg-gray-3 [&:has([data-state=checked])]:border-primary flex w-fit flex-col gap-3 rounded-md border px-2 py-1"
+            >
+               <RadioGroupItem value="line" id="line" className="sr-only" />
+               <h2 className="font-medium">line</h2>
+            </Label>
+         </RadioGroup>
+         <Stepper variant={variant} initialStep={0} steps={steps}>
+            {steps.map((stepProps, index) => {
+               return (
+                  <Step key={stepProps.label} {...stepProps}>
+                     <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+                        <h1 className="text-xl">
+                           Step
+                           {index + 1}
+                        </h1>
+                     </div>
+                  </Step>
+               )
+            })}
+            <Footer />
+         </Stepper>
+      </div>
+   )
+}
+
+function Footer() {
+   const {
+      nextStep,
+      prevStep,
+      resetSteps,
+      isDisabledStep,
+      hasCompletedAllSteps,
+      isLastStep,
+      isOptionalStep,
+   } = useStepper()
+   return (
+      <>
+         {hasCompletedAllSteps && (
+            <div className="bg-secondary text-primary my-2 flex h-40 items-center justify-center rounded-md border">
+               <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
+            </div>
+         )}
+         <div className="flex w-full justify-end gap-2">
+            {hasCompletedAllSteps ? (
+               <Button size="sm" onClick={resetSteps}>
+                  Reset
+               </Button>
+            ) : (
+               <>
+                  <Button
+                     disabled={isDisabledStep}
+                     onClick={prevStep}
+                     size="sm"
+                     variant="secondary"
+                  >
+                     Prev
+                  </Button>
+                  <Button size="sm" onClick={nextStep}>
+                     {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
+                  </Button>
+               </>
+            )}
+         </div>
+      </>
+   )
+}
diff --git a/apps/web/registry/miami/examples/switch-demo.tsx b/apps/web/registry/miami/examples/switch-demo.tsx
new file mode 100644
index 00000000..10ee8c7c
--- /dev/null
+++ b/apps/web/registry/miami/examples/switch-demo.tsx
@@ -0,0 +1,11 @@
+import { Label } from "~/registry/miami/ui/label"
+import { Switch } from "~/registry/miami/ui/switch"
+
+export default function SwitchDemo() {
+   return (
+      <div className="flex items-center space-x-2">
+         <Switch id="airplane-mode" />
+         <Label htmlFor="airplane-mode">Airplane Mode</Label>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/switch-form.tsx b/apps/web/registry/miami/examples/switch-form.tsx
new file mode 100644
index 00000000..fc3064a1
--- /dev/null
+++ b/apps/web/registry/miami/examples/switch-form.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+} from "~/registry/miami/ui/form"
+import { Switch } from "~/registry/miami/ui/switch"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const FormSchema = z.object({
+   marketing_emails: z.boolean().default(false).optional(),
+   security_emails: z.boolean(),
+})
+
+export default function SwitchForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+         security_emails: true,
+      },
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-full space-y-6"
+         >
+            <div>
+               <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
+               <div className="space-y-4">
+                  <FormField
+                     control={form.control}
+                     name="marketing_emails"
+                     render={({ field }) => (
+                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                           <div className="space-y-0.5">
+                              <FormLabel>Marketing emails</FormLabel>
+                              <FormDescription>
+                                 Receive emails about new products, features,
+                                 and more.
+                              </FormDescription>
+                           </div>
+                           <FormControl>
+                              <Switch
+                                 checked={field.value}
+                                 onCheckedChange={field.onChange}
+                              />
+                           </FormControl>
+                        </FormItem>
+                     )}
+                  />
+                  <FormField
+                     control={form.control}
+                     name="security_emails"
+                     render={({ field }) => (
+                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                           <div className="space-y-0.5">
+                              <FormLabel>Security emails</FormLabel>
+                              <FormDescription>
+                                 Receive emails about your account security.
+                              </FormDescription>
+                           </div>
+                           <FormControl>
+                              <Switch
+                                 checked={field.value}
+                                 onCheckedChange={field.onChange}
+                                 disabled
+                                 aria-readonly
+                              />
+                           </FormControl>
+                        </FormItem>
+                     )}
+                  />
+               </div>
+            </div>
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/table-demo.tsx b/apps/web/registry/miami/examples/table-demo.tsx
new file mode 100644
index 00000000..4c2cd4b2
--- /dev/null
+++ b/apps/web/registry/miami/examples/table-demo.tsx
@@ -0,0 +1,91 @@
+import {
+   Table,
+   TableBody,
+   TableCaption,
+   TableCell,
+   TableFooter,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/miami/ui/table"
+
+const invoices = [
+   {
+      invoice: "INV001",
+      paymentStatus: "Paid",
+      totalAmount: "$250.00",
+      paymentMethod: "Credit Card",
+   },
+   {
+      invoice: "INV002",
+      paymentStatus: "Pending",
+      totalAmount: "$150.00",
+      paymentMethod: "PayPal",
+   },
+   {
+      invoice: "INV003",
+      paymentStatus: "Unpaid",
+      totalAmount: "$350.00",
+      paymentMethod: "Bank Transfer",
+   },
+   {
+      invoice: "INV004",
+      paymentStatus: "Paid",
+      totalAmount: "$450.00",
+      paymentMethod: "Credit Card",
+   },
+   {
+      invoice: "INV005",
+      paymentStatus: "Paid",
+      totalAmount: "$550.00",
+      paymentMethod: "PayPal",
+   },
+   {
+      invoice: "INV006",
+      paymentStatus: "Pending",
+      totalAmount: "$200.00",
+      paymentMethod: "Bank Transfer",
+   },
+   {
+      invoice: "INV007",
+      paymentStatus: "Unpaid",
+      totalAmount: "$300.00",
+      paymentMethod: "Credit Card",
+   },
+]
+
+export default function TableDemo() {
+   return (
+      <Table>
+         <TableCaption>A list of your recent invoices.</TableCaption>
+         <TableHeader>
+            <TableRow>
+               <TableHead className="w-[100px]">Invoice</TableHead>
+               <TableHead>Status</TableHead>
+               <TableHead>Method</TableHead>
+               <TableHead className="text-right">Amount</TableHead>
+            </TableRow>
+         </TableHeader>
+         <TableBody>
+            {invoices.map((invoice) => (
+               <TableRow key={invoice.invoice}>
+                  <TableCell className="font-medium">
+                     {invoice.invoice}
+                  </TableCell>
+                  <TableCell>{invoice.paymentStatus}</TableCell>
+                  <TableCell>{invoice.paymentMethod}</TableCell>
+                  <TableCell className="text-right">
+                     {invoice.totalAmount}
+                  </TableCell>
+               </TableRow>
+            ))}
+         </TableBody>
+         <TableFooter>
+            <TableRow>
+               <TableCell colSpan={3}>Total</TableCell>
+               <TableCell className="text-right">$2,500.00</TableCell>
+            </TableRow>
+         </TableFooter>
+      </Table>
+   )
+}
diff --git a/apps/web/registry/miami/examples/tabs-demo.tsx b/apps/web/registry/miami/examples/tabs-demo.tsx
new file mode 100644
index 00000000..c2938259
--- /dev/null
+++ b/apps/web/registry/miami/examples/tabs-demo.tsx
@@ -0,0 +1,76 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Tabs,
+   TabsContent,
+   TabsList,
+   TabsTrigger,
+} from "~/registry/miami/ui/tabs"
+
+export default function TabsDemo() {
+   return (
+      <Tabs defaultValue="account" className="w-[400px]">
+         <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="account">Account</TabsTrigger>
+            <TabsTrigger value="password">Password</TabsTrigger>
+         </TabsList>
+         <TabsContent value="account">
+            <Card>
+               <CardHeader>
+                  <CardTitle>Account</CardTitle>
+                  <CardDescription>
+                     Make changes to your account here. Click save when you're
+                     done.
+                  </CardDescription>
+               </CardHeader>
+               <CardContent className="space-y-2">
+                  <div className="space-y-1">
+                     <Label htmlFor="name">Name</Label>
+                     <Input id="name" defaultValue="Pedro Duarte" />
+                  </div>
+                  <div className="space-y-1">
+                     <Label htmlFor="username">Username</Label>
+                     <Input id="username" defaultValue="~peduarte" />
+                  </div>
+               </CardContent>
+               <CardFooter>
+                  <Button>Save changes</Button>
+               </CardFooter>
+            </Card>
+         </TabsContent>
+         <TabsContent value="password">
+            <Card>
+               <CardHeader>
+                  <CardTitle>Password</CardTitle>
+                  <CardDescription>
+                     Change your password here. After saving, you'll be logged
+                     out.
+                  </CardDescription>
+               </CardHeader>
+               <CardContent className="space-y-2">
+                  <div className="space-y-1">
+                     <Label htmlFor="current">Current password</Label>
+                     <Input id="current" type="password" />
+                  </div>
+                  <div className="space-y-1">
+                     <Label htmlFor="new">New password</Label>
+                     <Input id="new" type="password" />
+                  </div>
+               </CardContent>
+               <CardFooter>
+                  <Button>Save password</Button>
+               </CardFooter>
+            </Card>
+         </TabsContent>
+      </Tabs>
+   )
+}
diff --git a/apps/web/registry/miami/examples/terminal-demo.tsx b/apps/web/registry/miami/examples/terminal-demo.tsx
new file mode 100644
index 00000000..3a35147d
--- /dev/null
+++ b/apps/web/registry/miami/examples/terminal-demo.tsx
@@ -0,0 +1,62 @@
+import {
+   AnimatedSpan,
+   Terminal,
+   TypingAnimation,
+} from "~/registry/miami/ui/terminal"
+
+export default function TerminalDemo() {
+   return (
+      <Terminal>
+         <TypingAnimation>&gt; pnpm dlx nyxb@latest init</TypingAnimation>
+
+         <AnimatedSpan delay={1500} className="text-green-500">
+            <span>✔ Preflight checks.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={2000} className="text-green-500">
+            <span>✔ Verifying framework. Found Next.js.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={2500} className="text-green-500">
+            <span>✔ Validating Tailwind CSS.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={3000} className="text-green-500">
+            <span>✔ Validating import alias.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={3500} className="text-green-500">
+            <span>✔ Writing components.json.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={4000} className="text-green-500">
+            <span>✔ Checking registry.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={4500} className="text-green-500">
+            <span>✔ Updating tailwind.config.ts</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={5000} className="text-green-500">
+            <span>✔ Updating app/globals.css</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={5500} className="text-green-500">
+            <span>✔ Installing dependencies.</span>
+         </AnimatedSpan>
+
+         <AnimatedSpan delay={6000} className="text-blue-500">
+            <span>ℹ Updated 1 file:</span>
+            <span className="pl-2">- lib/utils.ts</span>
+         </AnimatedSpan>
+
+         <TypingAnimation delay={6500} className="text-muted-foreground">
+            Success! Project initialization completed.
+         </TypingAnimation>
+
+         <TypingAnimation delay={7000} className="text-muted-foreground">
+            You may now add components.
+         </TypingAnimation>
+      </Terminal>
+   )
+}
diff --git a/apps/web/registry/miami/examples/text-animate-demo-2.tsx b/apps/web/registry/miami/examples/text-animate-demo-2.tsx
new file mode 100644
index 00000000..1ac2b95a
--- /dev/null
+++ b/apps/web/registry/miami/examples/text-animate-demo-2.tsx
@@ -0,0 +1,9 @@
+import { TextAnimate } from "~/registry/miami/ui/text-animate"
+
+export default function TextAnimateDemo2() {
+   return (
+      <TextAnimate animation="blurIn" as="h1">
+         Blur in text
+      </TextAnimate>
+   )
+}
diff --git a/apps/web/registry/miami/examples/text-animate-demo-3.tsx b/apps/web/registry/miami/examples/text-animate-demo-3.tsx
new file mode 100644
index 00000000..06fbee99
--- /dev/null
+++ b/apps/web/registry/miami/examples/text-animate-demo-3.tsx
@@ -0,0 +1,9 @@
+import { TextAnimate } from "~/registry/miami/ui/text-animate"
+
+export default function TextAnimateDemo3() {
+   return (
+      <TextAnimate animation="slideUp" by="word">
+         Slide up by word
+      </TextAnimate>
+   )
+}
diff --git a/apps/web/registry/miami/examples/text-animate-demo-4.tsx b/apps/web/registry/miami/examples/text-animate-demo-4.tsx
new file mode 100644
index 00000000..1058f666
--- /dev/null
+++ b/apps/web/registry/miami/examples/text-animate-demo-4.tsx
@@ -0,0 +1,9 @@
+import { TextAnimate } from "~/registry/miami/ui/text-animate"
+
+export default function TextAnimateDemo4() {
+   return (
+      <TextAnimate animation="scaleUp" by="text">
+         Scale up by text
+      </TextAnimate>
+   )
+}
diff --git a/apps/web/registry/miami/examples/text-animate-demo-5.tsx b/apps/web/registry/miami/examples/text-animate-demo-5.tsx
new file mode 100644
index 00000000..17ae2772
--- /dev/null
+++ b/apps/web/registry/miami/examples/text-animate-demo-5.tsx
@@ -0,0 +1,9 @@
+import { TextAnimate } from "~/registry/miami/ui/text-animate"
+
+export default function TextAnimateDemo5() {
+   return (
+      <TextAnimate animation="fadeIn" by="line" as="p">
+         {`Fade in by line as paragraph\n\nFade in by line as paragraph\n\nFade in by line as paragraph`}
+      </TextAnimate>
+   )
+}
diff --git a/apps/web/registry/miami/examples/text-animate-demo-6.tsx b/apps/web/registry/miami/examples/text-animate-demo-6.tsx
new file mode 100644
index 00000000..8bd0d983
--- /dev/null
+++ b/apps/web/registry/miami/examples/text-animate-demo-6.tsx
@@ -0,0 +1,9 @@
+import { TextAnimate } from "~/registry/miami/ui/text-animate"
+
+export default function TextAnimateDemo6() {
+   return (
+      <TextAnimate animation="slideLeft" by="character">
+         Slide left by character
+      </TextAnimate>
+   )
+}
diff --git a/apps/web/registry/miami/examples/text-animate-demo.tsx b/apps/web/registry/miami/examples/text-animate-demo.tsx
new file mode 100644
index 00000000..43163866
--- /dev/null
+++ b/apps/web/registry/miami/examples/text-animate-demo.tsx
@@ -0,0 +1,9 @@
+import { TextAnimate } from "~/registry/miami/ui/text-animate"
+
+export default function TextAnimateDemo() {
+   return (
+      <TextAnimate animation="blurInUp" by="character">
+         Blur in by character
+      </TextAnimate>
+   )
+}
diff --git a/apps/web/registry/miami/examples/text-reveal-demo.tsx b/apps/web/registry/miami/examples/text-reveal-demo.tsx
new file mode 100644
index 00000000..f4883646
--- /dev/null
+++ b/apps/web/registry/miami/examples/text-reveal-demo.tsx
@@ -0,0 +1,9 @@
+import TextReveal from "~/registry/miami/ui/text-reveal"
+
+export default async function TextRevealDemo() {
+   return (
+      <div className="z-10 flex min-h-64 items-center justify-center rounded-lg border bg-white dark:bg-black">
+         <TextReveal text="Nyxb UI will change the way you design." />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/textarea-demo.tsx b/apps/web/registry/miami/examples/textarea-demo.tsx
new file mode 100644
index 00000000..593f7039
--- /dev/null
+++ b/apps/web/registry/miami/examples/textarea-demo.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "~/registry/miami/ui/textarea"
+
+export default function TextareaDemo() {
+   return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/web/registry/miami/examples/textarea-disabled.tsx b/apps/web/registry/miami/examples/textarea-disabled.tsx
new file mode 100644
index 00000000..f7cfef71
--- /dev/null
+++ b/apps/web/registry/miami/examples/textarea-disabled.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "~/registry/miami/ui/textarea"
+
+export default function TextareaDisabled() {
+   return <Textarea placeholder="Type your message here." disabled />
+}
diff --git a/apps/web/registry/miami/examples/textarea-form.tsx b/apps/web/registry/miami/examples/textarea-form.tsx
new file mode 100644
index 00000000..a06e86e9
--- /dev/null
+++ b/apps/web/registry/miami/examples/textarea-form.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Form,
+   FormControl,
+   FormDescription,
+   FormField,
+   FormItem,
+   FormLabel,
+   FormMessage,
+} from "~/registry/miami/ui/form"
+import { Textarea } from "~/registry/miami/ui/textarea"
+import { toast } from "~/registry/miami/ui/use-toast"
+
+const FormSchema = z.object({
+   bio: z
+      .string()
+      .min(10, {
+         message: "Bio must be at least 10 characters.",
+      })
+      .max(160, {
+         message: "Bio must not be longer than 30 characters.",
+      }),
+})
+
+export default function TextareaForm() {
+   const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+   })
+
+   function onSubmit(data: z.infer<typeof FormSchema>) {
+      toast({
+         title: "You submitted the following values:",
+         description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+               <code className="text-white">
+                  {JSON.stringify(data, null, 2)}
+               </code>
+            </pre>
+         ),
+      })
+   }
+
+   return (
+      <Form {...form}>
+         <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-2/3 space-y-6"
+         >
+            <FormField
+               control={form.control}
+               name="bio"
+               render={({ field }) => (
+                  <FormItem>
+                     <FormLabel>Bio</FormLabel>
+                     <FormControl>
+                        <Textarea
+                           placeholder="Tell us a little bit about yourself"
+                           className="resize-none"
+                           {...field}
+                        />
+                     </FormControl>
+                     <FormDescription>
+                        You can <span>@mention</span> other users and
+                        organizations.
+                     </FormDescription>
+                     <FormMessage />
+                  </FormItem>
+               )}
+            />
+            <Button type="submit">Submit</Button>
+         </form>
+      </Form>
+   )
+}
diff --git a/apps/web/registry/miami/examples/textarea-with-button.tsx b/apps/web/registry/miami/examples/textarea-with-button.tsx
new file mode 100644
index 00000000..1166cd44
--- /dev/null
+++ b/apps/web/registry/miami/examples/textarea-with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from "~/registry/miami/ui/button"
+import { Textarea } from "~/registry/miami/ui/textarea"
+
+export default function TextareaWithButton() {
+   return (
+      <div className="grid w-full gap-2">
+         <Textarea placeholder="Type your message here." />
+         <Button>Send message</Button>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/textarea-with-label.tsx b/apps/web/registry/miami/examples/textarea-with-label.tsx
new file mode 100644
index 00000000..839750cf
--- /dev/null
+++ b/apps/web/registry/miami/examples/textarea-with-label.tsx
@@ -0,0 +1,11 @@
+import { Label } from "~/registry/miami/ui/label"
+import { Textarea } from "~/registry/miami/ui/textarea"
+
+export default function TextareaWithLabel() {
+   return (
+      <div className="grid w-full gap-1.5">
+         <Label htmlFor="message">Your message</Label>
+         <Textarea placeholder="Type your message here." id="message" />
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/textarea-with-text.tsx b/apps/web/registry/miami/examples/textarea-with-text.tsx
new file mode 100644
index 00000000..325c9542
--- /dev/null
+++ b/apps/web/registry/miami/examples/textarea-with-text.tsx
@@ -0,0 +1,14 @@
+import { Label } from "~/registry/miami/ui/label"
+import { Textarea } from "~/registry/miami/ui/textarea"
+
+export default function TextareaWithText() {
+   return (
+      <div className="grid w-full gap-1.5">
+         <Label htmlFor="message-2">Your Message</Label>
+         <Textarea placeholder="Type your message here." id="message-2" />
+         <p className="text-muted-foreground text-sm">
+            Your message will be copied to the support team.
+         </p>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/examples/timeline-alternate.tsx b/apps/web/registry/miami/examples/timeline-alternate.tsx
new file mode 100644
index 00000000..39fbac52
--- /dev/null
+++ b/apps/web/registry/miami/examples/timeline-alternate.tsx
@@ -0,0 +1,84 @@
+import React from "react"
+
+import {
+   Timeline,
+   TimelineContent,
+   TimelineDot,
+   TimelineHeading,
+   TimelineItem,
+   TimelineLine,
+} from "~/registry/miami/ui/timeline"
+
+export default function TimelineAlternate() {
+   return (
+      <Timeline positions="center">
+         <TimelineItem status="done">
+            <TimelineHeading side="left">Plan!</TimelineHeading>
+            <TimelineDot status="done" />
+            <TimelineLine done />
+            <TimelineContent side="left">
+               Before diving into coding, it is crucial to plan your software
+               project thoroughly. This involves defining the project scope,
+               setting clear objectives, and identifying the target audience.
+               Additionally, creating a timeline and allocating resources
+               appropriately will contribute to a successful development
+               process.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="right" className="text-destructive">
+               Design
+            </TimelineHeading>
+            <TimelineDot status="error" />
+            <TimelineLine done />
+            <TimelineContent>
+               Designing your software involves creating a blueprint that
+               outlines the structure, user interface, and functionality of your
+               application. Consider user experience (UX) principles,
+               wireframing, and prototyping to ensure an intuitive and visually
+               appealing design.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="left">Code</TimelineHeading>
+            <TimelineDot status="current" />
+            <TimelineLine />
+            <TimelineContent side="left">
+               The coding phase involves translating your design into actual
+               code. Choose a programming language and framework that aligns
+               with your project requirements. Follow best practices, such as
+               modular and reusable code, to enhance maintainability and
+               scalability. Regularly test your code to identify and fix any
+               bugs or errors.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading>Test</TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent>
+               Thorough testing is essential to ensure the quality and
+               reliability of your software. Implement different testing
+               methodologies, including unit testing, integration testing, and
+               user acceptance testing. This helps identify and rectify any
+               issues before deploying the software.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading side="left">Deploy</TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent side="left">
+               Once your software has passed rigorous testing, it's time to
+               deploy it. Consider the deployment environment, whether it's
+               on-premises or in the cloud. Ensure proper documentation and
+               provide clear instructions for installation and configuration.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineDot />
+            <TimelineHeading>Done!</TimelineHeading>
+         </TimelineItem>
+      </Timeline>
+   )
+}
diff --git a/apps/web/registry/miami/examples/timeline-demo.tsx b/apps/web/registry/miami/examples/timeline-demo.tsx
new file mode 100644
index 00000000..8ca7bb0e
--- /dev/null
+++ b/apps/web/registry/miami/examples/timeline-demo.tsx
@@ -0,0 +1,84 @@
+import React from "react"
+
+import {
+   Timeline,
+   TimelineContent,
+   TimelineDot,
+   TimelineHeading,
+   TimelineItem,
+   TimelineLine,
+} from "~/registry/miami/ui/timeline"
+
+export default function TimelineDemo() {
+   return (
+      <Timeline>
+         <TimelineItem status="done">
+            <TimelineHeading>Plan!</TimelineHeading>
+            <TimelineDot status="done" />
+            <TimelineLine done />
+            <TimelineContent>
+               Before diving into coding, it is crucial to plan your software
+               project thoroughly. This involves defining the project scope,
+               setting clear objectives, and identifying the target audience.
+               Additionally, creating a timeline and allocating resources
+               appropriately will contribute to a successful development
+               process.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="right" className="text-destructive">
+               Design
+            </TimelineHeading>
+            <TimelineDot status="error" />
+            <TimelineLine done />
+            <TimelineContent>
+               Designing your software involves creating a blueprint that
+               outlines the structure, user interface, and functionality of your
+               application. Consider user experience (UX) principles,
+               wireframing, and prototyping to ensure an intuitive and visually
+               appealing design.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading>Code</TimelineHeading>
+            <TimelineDot status="current" />
+            <TimelineLine />
+            <TimelineContent>
+               The coding phase involves translating your design into actual
+               code. Choose a programming language and framework that aligns
+               with your project requirements. Follow best practices, such as
+               modular and reusable code, to enhance maintainability and
+               scalability. Regularly test your code to identify and fix any
+               bugs or errors.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading>Test</TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent>
+               Thorough testing is essential to ensure the quality and
+               reliability of your software. Implement different testing
+               methodologies, including unit testing, integration testing, and
+               user acceptance testing. This helps identify and rectify any
+               issues before deploying the software.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading>Deploy</TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent>
+               Once your software has passed rigorous testing, it's time to
+               deploy it. Consider the deployment environment, whether it's
+               on-premises or in the cloud. Ensure proper documentation and
+               provide clear instructions for installation and configuration.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading>Done!</TimelineHeading>
+            <TimelineDot />
+         </TimelineItem>
+      </Timeline>
+   )
+}
diff --git a/apps/web/registry/miami/examples/timeline-labels.tsx b/apps/web/registry/miami/examples/timeline-labels.tsx
new file mode 100644
index 00000000..b8e76d42
--- /dev/null
+++ b/apps/web/registry/miami/examples/timeline-labels.tsx
@@ -0,0 +1,102 @@
+import React from "react"
+
+import {
+   Timeline,
+   TimelineContent,
+   TimelineDot,
+   TimelineHeading,
+   TimelineItem,
+   TimelineLine,
+} from "~/registry/miami/ui/timeline"
+
+export default function TimelineAlternate() {
+   return (
+      <Timeline positions="center">
+         <TimelineItem status="done">
+            <TimelineHeading side="left">Plan!</TimelineHeading>
+            <TimelineHeading side="right" variant="secondary">
+               Done (05/04/2024)
+            </TimelineHeading>
+            <TimelineDot status="done" />
+            <TimelineLine done />
+            <TimelineContent side="left">
+               Before diving into coding, it is crucial to plan your software
+               project thoroughly. This involves defining the project scope,
+               setting clear objectives, and identifying the target audience.
+               Additionally, creating a timeline and allocating resources
+               appropriately will contribute to a successful development
+               process.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="right" className="text-destructive">
+               Design
+            </TimelineHeading>
+            <TimelineHeading side="left" variant="secondary">
+               Failed (05/04/2024)
+            </TimelineHeading>
+            <TimelineDot status="error" />
+            <TimelineLine done />
+            <TimelineContent>
+               Designing your software involves creating a blueprint that
+               outlines the structure, user interface, and functionality of your
+               application. Consider user experience (UX) principles,
+               wireframing, and prototyping to ensure an intuitive and visually
+               appealing design.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="left">Code</TimelineHeading>
+            <TimelineHeading side="right" variant="secondary">
+               Current step
+            </TimelineHeading>
+            <TimelineDot status="current" />
+            <TimelineLine />
+            <TimelineContent side="left">
+               The coding phase involves translating your design into actual
+               code. Choose a programming language and framework that aligns
+               with your project requirements. Follow best practices, such as
+               modular and reusable code, to enhance maintainability and
+               scalability. Regularly test your code to identify and fix any
+               bugs or errors.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading>Test</TimelineHeading>
+            <TimelineHeading side="left" variant="secondary">
+               Next step
+            </TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent>
+               Thorough testing is essential to ensure the quality and
+               reliability of your software. Implement different testing
+               methodologies, including unit testing, integration testing, and
+               user acceptance testing. This helps identify and rectify any
+               issues before deploying the software.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading side="left">Deploy</TimelineHeading>
+            <TimelineHeading side="right" variant="secondary">
+               Deadline (05/10/2024)
+            </TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent side="left">
+               Once your software has passed rigorous testing, it's time to
+               deploy it. Consider the deployment environment, whether it's
+               on-premises or in the cloud. Ensure proper documentation and
+               provide clear instructions for installation and configuration.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineDot />
+            <TimelineHeading>Done!</TimelineHeading>
+            <TimelineHeading side="left" variant="secondary">
+               Here everything ends
+            </TimelineHeading>
+         </TimelineItem>
+      </Timeline>
+   )
+}
diff --git a/apps/web/registry/miami/examples/timeline-right.tsx b/apps/web/registry/miami/examples/timeline-right.tsx
new file mode 100644
index 00000000..ee3aab21
--- /dev/null
+++ b/apps/web/registry/miami/examples/timeline-right.tsx
@@ -0,0 +1,84 @@
+import React from "react"
+
+import {
+   Timeline,
+   TimelineContent,
+   TimelineDot,
+   TimelineHeading,
+   TimelineItem,
+   TimelineLine,
+} from "~/registry/miami/ui/timeline"
+
+export default function TimelineRight() {
+   return (
+      <Timeline positions="right">
+         <TimelineItem status="done">
+            <TimelineHeading side="left">Plan!</TimelineHeading>
+            <TimelineDot status="done" />
+            <TimelineLine done />
+            <TimelineContent side="left">
+               Before diving into coding, it is crucial to plan your software
+               project thoroughly. This involves defining the project scope,
+               setting clear objectives, and identifying the target audience.
+               Additionally, creating a timeline and allocating resources
+               appropriately will contribute to a successful development
+               process.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="left" className="text-destructive">
+               Design
+            </TimelineHeading>
+            <TimelineDot status="error" />
+            <TimelineLine done />
+            <TimelineContent side="left">
+               Designing your software involves creating a blueprint that
+               outlines the structure, user interface, and functionality of your
+               application. Consider user experience (UX) principles,
+               wireframing, and prototyping to ensure an intuitive and visually
+               appealing design.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem status="done">
+            <TimelineHeading side="left">Code</TimelineHeading>
+            <TimelineDot status="current" />
+            <TimelineLine />
+            <TimelineContent side="left">
+               The coding phase involves translating your design into actual
+               code. Choose a programming language and framework that aligns
+               with your project requirements. Follow best practices, such as
+               modular and reusable code, to enhance maintainability and
+               scalability. Regularly test your code to identify and fix any
+               bugs or errors.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading side="left">Test</TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent side="left">
+               Thorough testing is essential to ensure the quality and
+               reliability of your software. Implement different testing
+               methodologies, including unit testing, integration testing, and
+               user acceptance testing. This helps identify and rectify any
+               issues before deploying the software.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineHeading side="left">Deploy</TimelineHeading>
+            <TimelineDot />
+            <TimelineLine />
+            <TimelineContent side="left">
+               Once your software has passed rigorous testing, it's time to
+               deploy it. Consider the deployment environment, whether it's
+               on-premises or in the cloud. Ensure proper documentation and
+               provide clear instructions for installation and configuration.
+            </TimelineContent>
+         </TimelineItem>
+         <TimelineItem>
+            <TimelineDot />
+            <TimelineHeading side="left">Done!</TimelineHeading>
+         </TimelineItem>
+      </Timeline>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toast-demo.tsx b/apps/web/registry/miami/examples/toast-demo.tsx
new file mode 100644
index 00000000..2db35236
--- /dev/null
+++ b/apps/web/registry/miami/examples/toast-demo.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { Button } from "~/registry/miami/ui/button"
+import { ToastAction } from "~/registry/miami/ui/toast"
+import { useToast } from "~/registry/miami/ui/use-toast"
+
+export default function ToastDemo() {
+   const { toast } = useToast()
+
+   return (
+      <Button
+         variant="outline"
+         onClick={() => {
+            toast({
+               title: "Scheduled: Catch up ",
+               description: "Friday, February 10, 2023 at 5:57 PM",
+               action: (
+                  <ToastAction altText="Goto schedule to undo">
+                     Undo
+                  </ToastAction>
+               ),
+            })
+         }}
+      >
+         Add to calendar
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toast-destructive.tsx b/apps/web/registry/miami/examples/toast-destructive.tsx
new file mode 100644
index 00000000..bdd3104a
--- /dev/null
+++ b/apps/web/registry/miami/examples/toast-destructive.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { Button } from "~/registry/miami/ui/button"
+import { ToastAction } from "~/registry/miami/ui/toast"
+import { useToast } from "~/registry/miami/ui/use-toast"
+
+export default function ToastDestructive() {
+   const { toast } = useToast()
+
+   return (
+      <Button
+         variant="outline"
+         onClick={() => {
+            toast({
+               variant: "destructive",
+               title: "Uh oh! Something went wrong.",
+               description: "There was a problem with your request.",
+               action: <ToastAction altText="Try again">Try again</ToastAction>,
+            })
+         }}
+      >
+         Show Toast
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toast-simple.tsx b/apps/web/registry/miami/examples/toast-simple.tsx
new file mode 100644
index 00000000..7cbd93c1
--- /dev/null
+++ b/apps/web/registry/miami/examples/toast-simple.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { Button } from "~/registry/miami/ui/button"
+import { useToast } from "~/registry/miami/ui/use-toast"
+
+export default function ToastSimple() {
+   const { toast } = useToast()
+
+   return (
+      <Button
+         variant="outline"
+         onClick={() => {
+            toast({
+               description: "Your message has been sent.",
+            })
+         }}
+      >
+         Show Toast
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toast-with-action.tsx b/apps/web/registry/miami/examples/toast-with-action.tsx
new file mode 100644
index 00000000..336a7ef3
--- /dev/null
+++ b/apps/web/registry/miami/examples/toast-with-action.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { Button } from "~/registry/miami/ui/button"
+import { ToastAction } from "~/registry/miami/ui/toast"
+import { useToast } from "~/registry/miami/ui/use-toast"
+
+export default function ToastWithAction() {
+   const { toast } = useToast()
+
+   return (
+      <Button
+         variant="outline"
+         onClick={() => {
+            toast({
+               title: "Uh oh! Something went wrong.",
+               description: "There was a problem with your request.",
+               action: <ToastAction altText="Try again">Try again</ToastAction>,
+            })
+         }}
+      >
+         Show Toast
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toast-with-title.tsx b/apps/web/registry/miami/examples/toast-with-title.tsx
new file mode 100644
index 00000000..75310ccd
--- /dev/null
+++ b/apps/web/registry/miami/examples/toast-with-title.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { Button } from "~/registry/miami/ui/button"
+import { useToast } from "~/registry/miami/ui/use-toast"
+
+export default function ToastWithTitle() {
+   const { toast } = useToast()
+
+   return (
+      <Button
+         variant="outline"
+         onClick={() => {
+            toast({
+               title: "Uh oh! Something went wrong.",
+               description: "There was a problem with your request.",
+            })
+         }}
+      >
+         Show Toast
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toc-active.tsx b/apps/web/registry/miami/examples/toc-active.tsx
new file mode 100644
index 00000000..b2769167
--- /dev/null
+++ b/apps/web/registry/miami/examples/toc-active.tsx
@@ -0,0 +1,31 @@
+import {
+   TableOfContentsItem,
+   TableOfContentsLink,
+   TableOfContentsList,
+   TableOfContentsTitle,
+} from "~/registry/miami/ui/toc"
+
+export default function TOCActive() {
+   return (
+      <TableOfContentsList>
+         <TableOfContentsTitle>
+            Active Item Table of Contents
+         </TableOfContentsTitle>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#first-section">
+               First Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+         <TableOfContentsItem indent>
+            <TableOfContentsLink isActive href="#second-section">
+               Second Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#third-section">
+               Third Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+      </TableOfContentsList>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toc-demo.tsx b/apps/web/registry/miami/examples/toc-demo.tsx
new file mode 100644
index 00000000..652ad0da
--- /dev/null
+++ b/apps/web/registry/miami/examples/toc-demo.tsx
@@ -0,0 +1,29 @@
+import {
+   TableOfContentsItem,
+   TableOfContentsLink,
+   TableOfContentsList,
+   TableOfContentsTitle,
+} from "~/registry/miami/ui/toc"
+
+export default function TOCDemo() {
+   return (
+      <TableOfContentsList>
+         <TableOfContentsTitle>Table of Contents</TableOfContentsTitle>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#first-section">
+               First Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#second-section">
+               Second Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#third-section">
+               Third Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+      </TableOfContentsList>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toc-nested.tsx b/apps/web/registry/miami/examples/toc-nested.tsx
new file mode 100644
index 00000000..c349a116
--- /dev/null
+++ b/apps/web/registry/miami/examples/toc-nested.tsx
@@ -0,0 +1,36 @@
+import {
+   TableOfContentsItem,
+   TableOfContentsLink,
+   TableOfContentsList,
+   TableOfContentsTitle,
+} from "~/registry/miami/ui/toc"
+
+export default function TOCDNested() {
+   return (
+      <TableOfContentsList>
+         <TableOfContentsTitle>Nested Table of Contents</TableOfContentsTitle>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#first-section-nested">
+               First Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+         <TableOfContentsItem indent>
+            <TableOfContentsList>
+               <TableOfContentsLink href="#first-nested-section-nested">
+                  First Nested Section
+               </TableOfContentsLink>
+               <TableOfContentsItem indent>
+                  <TableOfContentsLink href="#second-nested-section-nested">
+                     Second Nested Section
+                  </TableOfContentsLink>
+               </TableOfContentsItem>
+            </TableOfContentsList>
+         </TableOfContentsItem>
+         <TableOfContentsItem>
+            <TableOfContentsLink href="#third-section-nested">
+               Third Section
+            </TableOfContentsLink>
+         </TableOfContentsItem>
+      </TableOfContentsList>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toggle-demo.tsx b/apps/web/registry/miami/examples/toggle-demo.tsx
new file mode 100644
index 00000000..a67cb9e2
--- /dev/null
+++ b/apps/web/registry/miami/examples/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { FontBoldIcon } from "@radix-ui/react-icons"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export default function ToggleDemo() {
+   return (
+      <Toggle aria-label="Toggle italic">
+         <FontBoldIcon className="size-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toggle-disabled.tsx b/apps/web/registry/miami/examples/toggle-disabled.tsx
new file mode 100644
index 00000000..07a3cc34
--- /dev/null
+++ b/apps/web/registry/miami/examples/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { UnderlineIcon } from "@radix-ui/react-icons"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export default function ToggleDisabled() {
+   return (
+      <Toggle aria-label="Toggle italic" disabled>
+         <UnderlineIcon className="size-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toggle-group-demo.tsx b/apps/web/registry/miami/examples/toggle-group-demo.tsx
new file mode 100644
index 00000000..6589da55
--- /dev/null
+++ b/apps/web/registry/miami/examples/toggle-group-demo.tsx
@@ -0,0 +1,26 @@
+import {
+   FontBoldIcon,
+   FontItalicIcon,
+   UnderlineIcon,
+} from "@radix-ui/react-icons"
+
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+   return (
+      <ToggleGroup type="multiple">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <FontBoldIcon className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <FontItalicIcon className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem
+            value="strikethrough"
+            aria-label="Toggle strikethrough"
+         >
+            <UnderlineIcon className="size-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toggle-group-disabled.tsx b/apps/web/registry/miami/examples/toggle-group-disabled.tsx
new file mode 100644
index 00000000..0479046b
--- /dev/null
+++ b/apps/web/registry/miami/examples/toggle-group-disabled.tsx
@@ -0,0 +1,26 @@
+import {
+   FontBoldIcon,
+   FontItalicIcon,
+   UnderlineIcon,
+} from "@radix-ui/react-icons"
+
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+   return (
+      <ToggleGroup type="multiple" disabled>
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <FontBoldIcon className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <FontItalicIcon className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem
+            value="strikethrough"
+            aria-label="Toggle strikethrough"
+         >
+            <UnderlineIcon className="size-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toggle-group-lg.tsx b/apps/web/registry/miami/examples/toggle-group-lg.tsx
new file mode 100644
index 00000000..f50cb797
--- /dev/null
+++ b/apps/web/registry/miami/examples/toggle-group-lg.tsx
@@ -0,0 +1,26 @@
+import {
+   FontBoldIcon,
+   FontItalicIcon,
+   UnderlineIcon,
+} from "@radix-ui/react-icons"
+
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+   return (
+      <ToggleGroup type="multiple" size="lg">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <FontBoldIcon className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <FontItalicIcon className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem
+            value="strikethrough"
+            aria-label="Toggle strikethrough"
+         >
+            <UnderlineIcon className="size-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toggle-group-outline.tsx b/apps/web/registry/miami/examples/toggle-group-outline.tsx
new file mode 100644
index 00000000..42bcac7d
--- /dev/null
+++ b/apps/web/registry/miami/examples/toggle-group-outline.tsx
@@ -0,0 +1,26 @@
+import {
+   FontBoldIcon,
+   FontItalicIcon,
+   UnderlineIcon,
+} from "@radix-ui/react-icons"
+
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+   return (
+      <ToggleGroup type="multiple" variant="outline">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <FontBoldIcon className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <FontItalicIcon className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem
+            value="strikethrough"
+            aria-label="Toggle strikethrough"
+         >
+            <UnderlineIcon className="size-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toggle-group-single.tsx b/apps/web/registry/miami/examples/toggle-group-single.tsx
new file mode 100644
index 00000000..45521605
--- /dev/null
+++ b/apps/web/registry/miami/examples/toggle-group-single.tsx
@@ -0,0 +1,26 @@
+import {
+   FontBoldIcon,
+   FontItalicIcon,
+   UnderlineIcon,
+} from "@radix-ui/react-icons"
+
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+   return (
+      <ToggleGroup type="single">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <FontBoldIcon className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <FontItalicIcon className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem
+            value="strikethrough"
+            aria-label="Toggle strikethrough"
+         >
+            <UnderlineIcon className="size-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toggle-group-sm.tsx b/apps/web/registry/miami/examples/toggle-group-sm.tsx
new file mode 100644
index 00000000..508167c8
--- /dev/null
+++ b/apps/web/registry/miami/examples/toggle-group-sm.tsx
@@ -0,0 +1,26 @@
+import {
+   FontBoldIcon,
+   FontItalicIcon,
+   UnderlineIcon,
+} from "@radix-ui/react-icons"
+
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+   return (
+      <ToggleGroup type="single" size="sm">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <FontBoldIcon className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <FontItalicIcon className="size-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem
+            value="strikethrough"
+            aria-label="Toggle strikethrough"
+         >
+            <UnderlineIcon className="size-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toggle-lg.tsx b/apps/web/registry/miami/examples/toggle-lg.tsx
new file mode 100644
index 00000000..05d2bdd2
--- /dev/null
+++ b/apps/web/registry/miami/examples/toggle-lg.tsx
@@ -0,0 +1,11 @@
+import { FontItalicIcon } from "@radix-ui/react-icons"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export default function ToggleLg() {
+   return (
+      <Toggle size="lg" aria-label="Toggle italic">
+         <FontItalicIcon className="size-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toggle-outline.tsx b/apps/web/registry/miami/examples/toggle-outline.tsx
new file mode 100644
index 00000000..60ec3214
--- /dev/null
+++ b/apps/web/registry/miami/examples/toggle-outline.tsx
@@ -0,0 +1,11 @@
+import { FontItalicIcon } from "@radix-ui/react-icons"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export default function ToggleOutline() {
+   return (
+      <Toggle variant="outline" aria-label="Toggle italic">
+         <FontItalicIcon className="size-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toggle-sm.tsx b/apps/web/registry/miami/examples/toggle-sm.tsx
new file mode 100644
index 00000000..81dc5eeb
--- /dev/null
+++ b/apps/web/registry/miami/examples/toggle-sm.tsx
@@ -0,0 +1,11 @@
+import { FontItalicIcon } from "@radix-ui/react-icons"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export default function ToggleSm() {
+   return (
+      <Toggle size="sm" aria-label="Toggle italic">
+         <FontItalicIcon className="size-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/miami/examples/toggle-with-text.tsx b/apps/web/registry/miami/examples/toggle-with-text.tsx
new file mode 100644
index 00000000..eefe9d4b
--- /dev/null
+++ b/apps/web/registry/miami/examples/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { FontItalicIcon } from "@radix-ui/react-icons"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export default function ToggleWithText() {
+   return (
+      <Toggle aria-label="Toggle italic">
+         <FontItalicIcon className="mr-2 size-4" />
+         Italic
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/miami/examples/tooltip-demo.tsx b/apps/web/registry/miami/examples/tooltip-demo.tsx
new file mode 100644
index 00000000..a8d64695
--- /dev/null
+++ b/apps/web/registry/miami/examples/tooltip-demo.tsx
@@ -0,0 +1,24 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Tooltip,
+   TooltipArrow,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/miami/ui/tooltip"
+
+export default function TooltipDemo() {
+   return (
+      <TooltipProvider>
+         <Tooltip>
+            <TooltipTrigger asChild>
+               <Button variant="outline">Hover</Button>
+            </TooltipTrigger>
+            <TooltipContent>
+               <p>Add to library</p>
+               <TooltipArrow />
+            </TooltipContent>
+         </Tooltip>
+      </TooltipProvider>
+   )
+}
diff --git a/apps/web/registry/miami/examples/tooltip-outline.tsx b/apps/web/registry/miami/examples/tooltip-outline.tsx
new file mode 100644
index 00000000..aab7e20a
--- /dev/null
+++ b/apps/web/registry/miami/examples/tooltip-outline.tsx
@@ -0,0 +1,22 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/miami/ui/tooltip"
+
+export default function TooltipOutline() {
+   return (
+      <TooltipProvider>
+         <Tooltip>
+            <TooltipTrigger asChild>
+               <Button variant="outline">Hover</Button>
+            </TooltipTrigger>
+            <TooltipContent variant="outline">
+               <p>Add to library</p>
+            </TooltipContent>
+         </Tooltip>
+      </TooltipProvider>
+   )
+}
diff --git a/apps/web/registry/miami/examples/tooltip-secondary.tsx b/apps/web/registry/miami/examples/tooltip-secondary.tsx
new file mode 100644
index 00000000..81dd9116
--- /dev/null
+++ b/apps/web/registry/miami/examples/tooltip-secondary.tsx
@@ -0,0 +1,22 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/miami/ui/tooltip"
+
+export default function TooltipSecondary() {
+   return (
+      <TooltipProvider>
+         <Tooltip>
+            <TooltipTrigger asChild>
+               <Button variant="outline">Hover</Button>
+            </TooltipTrigger>
+            <TooltipContent variant="secondary">
+               <p>Add to library</p>
+            </TooltipContent>
+         </Tooltip>
+      </TooltipProvider>
+   )
+}
diff --git a/apps/web/registry/miami/examples/tooltip-with-toggle-demo.tsx b/apps/web/registry/miami/examples/tooltip-with-toggle-demo.tsx
new file mode 100644
index 00000000..604251a0
--- /dev/null
+++ b/apps/web/registry/miami/examples/tooltip-with-toggle-demo.tsx
@@ -0,0 +1,26 @@
+import { Heart } from "lucide-react"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/miami/ui/tooltip"
+
+export default function TooltipWithToggleDemo() {
+   return (
+      <TooltipProvider>
+         <Tooltip>
+            <TooltipTrigger>
+               <Toggle variant="outline" aria-label="Toggle Heart">
+                  <Heart className="size-4" />
+               </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+               <p>Heart</p>
+            </TooltipContent>
+         </Tooltip>
+      </TooltipProvider>
+   )
+}
diff --git a/apps/web/registry/miami/examples/tour-demo.tsx b/apps/web/registry/miami/examples/tour-demo.tsx
new file mode 100644
index 00000000..22e54cec
--- /dev/null
+++ b/apps/web/registry/miami/examples/tour-demo.tsx
@@ -0,0 +1,127 @@
+import type * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { TourFactory } from "~/registry/miami/ui/tour"
+
+const tour = TourFactory([
+   "buttonOne",
+   "buttonTwo",
+   "missingButton",
+   "buttonFour",
+   "emailInput",
+])
+
+function TourDisplay(props: {
+   children: React.ReactNode
+   title?: string
+   description?: string
+}) {
+   const ctx = tour.useContext()
+   return (
+      <Card className="w-[350px]">
+         <CardHeader>
+            <CardTitle>{props.title}</CardTitle>
+            <CardDescription>{props.description}</CardDescription>
+         </CardHeader>
+         <CardContent>{props.children}</CardContent>
+         <CardFooter>
+            {ctx.current < ctx.nodes.size ? (
+               <div className="flex w-full justify-between">
+                  <Button variant="outline" onClick={ctx.close}>
+                     Close
+                  </Button>
+                  <div>
+                     <Button onClick={ctx.previous}>Previous</Button>
+                     <Button onClick={ctx.next}>Next</Button>
+                  </div>
+               </div>
+            ) : (
+               <div className="flex w-full justify-end">
+                  <Button onClick={ctx.previous}>Previous</Button>
+                  <Button className="bg-green-800" onClick={ctx.close}>
+                     Finish
+                  </Button>
+               </div>
+            )}
+         </CardFooter>
+      </Card>
+   )
+}
+
+function TourApplication() {
+   const ctx = tour.useContext()
+   return (
+      <div className="flex h-96 w-full items-center justify-center">
+         <div className="absolute bottom-2 left-2 flex gap-2">
+            <tour.TourFocus
+               name="buttonOne"
+               tourRender={
+                  <TourDisplay title="Create Incident">
+                     <h1>This button creates an incident</h1>
+                     <p>helpful text about this button</p>
+                  </TourDisplay>
+               }
+            >
+               <Button>Create Incident</Button>
+            </tour.TourFocus>
+            <tour.TourFocus
+               name="buttonFour"
+               tourRender={
+                  <TourDisplay title="Update Incident">
+                     <h1>This button pushes your updates</h1>
+                     <p>helpful text about this button</p>
+                  </TourDisplay>
+               }
+            >
+               <Button>Update Incident</Button>
+            </tour.TourFocus>
+         </div>
+         <div className="absolute right-2 top-12 flex gap-2">
+            <tour.TourFocus
+               name="buttonTwo"
+               tourRender={
+                  <TourDisplay title="Resolve Incident">
+                     <h1>This button Resolves the Incident</h1>
+                     <p>helpful text about this button</p>
+                  </TourDisplay>
+               }
+            >
+               <Button>Resolve Incident</Button>
+            </tour.TourFocus>
+         </div>
+         <div>
+            <tour.TourFocus
+               name="emailInput"
+               tourRender={
+                  <TourDisplay title="Email Input">
+                     <h1>This is where you put incident info</h1>
+                     <p>helpful text about this input</p>
+                  </TourDisplay>
+               }
+            >
+               <Input type="email" placeholder="Email" />
+            </tour.TourFocus>
+         </div>
+         <div className="absolute bottom-2 right-2">
+            <Button onClick={ctx.open}>Open Tour</Button>
+         </div>
+      </div>
+   )
+}
+
+export default function TourDemo() {
+   return (
+      <tour.TourProvider>
+         <TourApplication />
+      </tour.TourProvider>
+   )
+}
diff --git a/apps/web/registry/miami/examples/tweet-card-demo.tsx b/apps/web/registry/miami/examples/tweet-card-demo.tsx
new file mode 100644
index 00000000..96c025c0
--- /dev/null
+++ b/apps/web/registry/miami/examples/tweet-card-demo.tsx
@@ -0,0 +1,9 @@
+import ClientTweetCard from "~/registry/miami/ui/client-tweet-card"
+
+/**
+ * <TweetCard /> (Server Side Only)
+ * <ClientTweetCard /> (Client Side Only)
+ */
+export default async function TweetDemo() {
+   return <ClientTweetCard id="1845116507438620801" className="shadow-2xl" />
+}
diff --git a/apps/web/registry/miami/examples/tweet-card-images.tsx b/apps/web/registry/miami/examples/tweet-card-images.tsx
new file mode 100644
index 00000000..155adeff
--- /dev/null
+++ b/apps/web/registry/miami/examples/tweet-card-images.tsx
@@ -0,0 +1,5 @@
+import ClientTweetCard from "~/registry/miami/ui/client-tweet-card"
+
+export default async function TweetImages() {
+   return <ClientTweetCard id="1803717292087296479" className="shadow-2xl" />
+}
diff --git a/apps/web/registry/miami/examples/tweet-card-meta-preview.tsx b/apps/web/registry/miami/examples/tweet-card-meta-preview.tsx
new file mode 100644
index 00000000..273be539
--- /dev/null
+++ b/apps/web/registry/miami/examples/tweet-card-meta-preview.tsx
@@ -0,0 +1,5 @@
+import ClientTweetCard from "~/registry/miami/ui/client-tweet-card"
+
+export default async function TweetMetaPreview() {
+   return <ClientTweetCard id="1671108134591504385" className="shadow-2xl" />
+}
diff --git a/apps/web/registry/miami/examples/typing-animation-demo.tsx b/apps/web/registry/miami/examples/typing-animation-demo.tsx
new file mode 100644
index 00000000..50268b89
--- /dev/null
+++ b/apps/web/registry/miami/examples/typing-animation-demo.tsx
@@ -0,0 +1,10 @@
+import TypingAnimation from "~/registry/miami/ui/typing-animation"
+
+export default async function TextRevealDemo() {
+   return (
+      <TypingAnimation
+         className="text-4xl font-bold text-black dark:text-white"
+         text="Typing Animation"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/typography-blockquote.tsx b/apps/web/registry/miami/examples/typography-blockquote.tsx
new file mode 100644
index 00000000..4de1d264
--- /dev/null
+++ b/apps/web/registry/miami/examples/typography-blockquote.tsx
@@ -0,0 +1,8 @@
+export default function TypographyBlockquote() {
+   return (
+      <blockquote className="mt-6 border-l-2 pl-6 italic">
+         "After all," he said, "everyone enjoys a good joke, so it's only fair
+         that they should pay for the privilege."
+      </blockquote>
+   )
+}
diff --git a/apps/web/registry/miami/examples/typography-demo.tsx b/apps/web/registry/miami/examples/typography-demo.tsx
new file mode 100644
index 00000000..b13c8155
--- /dev/null
+++ b/apps/web/registry/miami/examples/typography-demo.tsx
@@ -0,0 +1,119 @@
+export default function TypographyDemo() {
+   return (
+      <div>
+         <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+            The Joke Tax Chronicles
+         </h1>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            Once upon a time, in a far-off land, there was a very lazy king who
+            spent all day lounging on his throne. One day, his advisors came to
+            him with a problem: the kingdom was running out of money.
+         </p>
+         <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+            The King's Plan
+         </h2>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            The king thought long and hard, and finally came up with{" "}
+            <a
+               href="#"
+               className="text-primary font-medium underline underline-offset-4"
+            >
+               a brilliant plan
+            </a>
+            : he would tax the jokes in the kingdom.
+         </p>
+         <blockquote className="mt-6 border-l-2 pl-6 italic">
+            "After all," he said, "everyone enjoys a good joke, so it's only
+            fair that they should pay for the privilege."
+         </blockquote>
+         <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+            The Joke Tax
+         </h3>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            The king's subjects were not amused. They grumbled and complained,
+            but the king was firm:
+         </p>
+         <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
+            <li>1st level of puns: 5 gold coins</li>
+            <li>2nd level of jokes: 10 gold coins</li>
+            <li>3rd level of one-liners : 20 gold coins</li>
+         </ul>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            As a result, people stopped telling jokes, and the kingdom fell into
+            a gloom. But there was one person who refused to let the king's
+            foolishness get him down: a court jester named Jokester.
+         </p>
+         <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+            Jokester's Revolt
+         </h3>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            Jokester began sneaking into the castle in the middle of the night
+            and leaving jokes all over the place: under the king's pillow, in
+            his soup, even in the royal toilet. The king was furious, but he
+            couldn't seem to stop Jokester.
+         </p>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            And then, one day, the people of the kingdom discovered that the
+            jokes left by Jokester were so funny that they couldn't help but
+            laugh. And once they started laughing, they couldn't stop.
+         </p>
+         <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+            The People's Rebellion
+         </h3>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            The people of the kingdom, feeling uplifted by the laughter, started
+            to tell jokes and puns again, and soon the entire kingdom was in on
+            the joke.
+         </p>
+         <div className="my-6 w-full overflow-y-auto">
+            <table className="w-full">
+               <thead>
+                  <tr className="even:bg-muted m-0 border-t p-0">
+                     <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                        King's Treasury
+                     </th>
+                     <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                        People's happiness
+                     </th>
+                  </tr>
+               </thead>
+               <tbody>
+                  <tr className="even:bg-muted m-0 border-t p-0">
+                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                        Empty
+                     </td>
+                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                        Overflowing
+                     </td>
+                  </tr>
+                  <tr className="even:bg-muted m-0 border-t p-0">
+                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                        Modest
+                     </td>
+                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                        Satisfied
+                     </td>
+                  </tr>
+                  <tr className="even:bg-muted m-0 border-t p-0">
+                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                        Full
+                     </td>
+                     <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                        Ecstatic
+                     </td>
+                  </tr>
+               </tbody>
+            </table>
+         </div>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            The king, seeing how much happier his subjects were, realized the
+            error of his ways and repealed the joke tax. Jokester was declared a
+            hero, and the kingdom lived happily ever after.
+         </p>
+         <p className="leading-7 [&:not(:first-child)]:mt-6">
+            The moral of the story is: never underestimate the power of a good
+            laugh and always be careful of bad ideas.
+         </p>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/example/typography-h1.tsx b/apps/web/registry/miami/examples/typography-h1.tsx
similarity index 100%
rename from apps/web/registry/miami/example/typography-h1.tsx
rename to apps/web/registry/miami/examples/typography-h1.tsx
diff --git a/apps/web/registry/miami/example/typography-h2.tsx b/apps/web/registry/miami/examples/typography-h2.tsx
similarity index 100%
rename from apps/web/registry/miami/example/typography-h2.tsx
rename to apps/web/registry/miami/examples/typography-h2.tsx
diff --git a/apps/web/registry/miami/example/typography-h3.tsx b/apps/web/registry/miami/examples/typography-h3.tsx
similarity index 100%
rename from apps/web/registry/miami/example/typography-h3.tsx
rename to apps/web/registry/miami/examples/typography-h3.tsx
diff --git a/apps/web/registry/miami/example/typography-h4.tsx b/apps/web/registry/miami/examples/typography-h4.tsx
similarity index 100%
rename from apps/web/registry/miami/example/typography-h4.tsx
rename to apps/web/registry/miami/examples/typography-h4.tsx
diff --git a/apps/web/registry/miami/example/typography-inline-code.tsx b/apps/web/registry/miami/examples/typography-inline-code.tsx
similarity index 100%
rename from apps/web/registry/miami/example/typography-inline-code.tsx
rename to apps/web/registry/miami/examples/typography-inline-code.tsx
diff --git a/apps/web/registry/miami/example/typography-large.tsx b/apps/web/registry/miami/examples/typography-large.tsx
similarity index 100%
rename from apps/web/registry/miami/example/typography-large.tsx
rename to apps/web/registry/miami/examples/typography-large.tsx
diff --git a/apps/web/registry/miami/examples/typography-lead.tsx b/apps/web/registry/miami/examples/typography-lead.tsx
new file mode 100644
index 00000000..856bb6ed
--- /dev/null
+++ b/apps/web/registry/miami/examples/typography-lead.tsx
@@ -0,0 +1,8 @@
+export default function TypographyLead() {
+   return (
+      <p className="text-muted-foreground text-xl">
+         A modal dialog that interrupts the user with important content and
+         expects a response.
+      </p>
+   )
+}
diff --git a/apps/web/registry/miami/example/typography-list.tsx b/apps/web/registry/miami/examples/typography-list.tsx
similarity index 100%
rename from apps/web/registry/miami/example/typography-list.tsx
rename to apps/web/registry/miami/examples/typography-list.tsx
diff --git a/apps/web/registry/miami/example/typography-muted.tsx b/apps/web/registry/miami/examples/typography-muted.tsx
similarity index 100%
rename from apps/web/registry/miami/example/typography-muted.tsx
rename to apps/web/registry/miami/examples/typography-muted.tsx
diff --git a/apps/web/registry/miami/examples/typography-p.tsx b/apps/web/registry/miami/examples/typography-p.tsx
new file mode 100644
index 00000000..9aa22e96
--- /dev/null
+++ b/apps/web/registry/miami/examples/typography-p.tsx
@@ -0,0 +1,8 @@
+export default function TypographyP() {
+   return (
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+         The king, seeing how much happier his subjects were, realized the error
+         of his ways and repealed the joke tax.
+      </p>
+   )
+}
diff --git a/apps/web/registry/miami/example/typography-small.tsx b/apps/web/registry/miami/examples/typography-small.tsx
similarity index 100%
rename from apps/web/registry/miami/example/typography-small.tsx
rename to apps/web/registry/miami/examples/typography-small.tsx
diff --git a/apps/web/registry/miami/example/typography-table.tsx b/apps/web/registry/miami/examples/typography-table.tsx
similarity index 100%
rename from apps/web/registry/miami/example/typography-table.tsx
rename to apps/web/registry/miami/examples/typography-table.tsx
diff --git a/apps/web/registry/miami/examples/video-modal-demo.tsx b/apps/web/registry/miami/examples/video-modal-demo.tsx
new file mode 100644
index 00000000..a8c72813
--- /dev/null
+++ b/apps/web/registry/miami/examples/video-modal-demo.tsx
@@ -0,0 +1,54 @@
+import { PlayIcon } from "@radix-ui/react-icons"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   VideoModal,
+   VideoModalContent,
+   VideoModalDescription,
+   VideoModalTitle,
+   VideoModalTrigger,
+   VideoModalVideo,
+   VideoPlayButton,
+   VideoPlayer,
+   VideoPreview,
+} from "~/registry/miami/ui/video-modal"
+
+function VideoModalDemo() {
+   return (
+      <div className="relative justify-center">
+         <VideoModal>
+            <VideoModalTrigger>
+               <Button>Open modal</Button>
+            </VideoModalTrigger>
+            <VideoModalContent>
+               <VideoModalTitle>Modal Video Demo</VideoModalTitle>
+               <VideoModalDescription>
+                  Your subtitle or description here
+               </VideoModalDescription>
+               <VideoModalVideo>
+                  <VideoPlayer>
+                     <VideoPreview>
+                        <img
+                           src="https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200"
+                           alt="Video preview"
+                        />
+                     </VideoPreview>
+                     <VideoPlayButton>
+                        <button className="absolute inset-0 m-auto flex size-32 items-center justify-center rounded-full border border-white border-white/10 bg-white/50 transition duration-300 hover:bg-white/75">
+                           <PlayIcon className="size-20 stroke-1 text-white" />
+                        </button>
+                     </VideoPlayButton>
+                     <iframe
+                        className="size-full"
+                        src="https://cdn.magicui.design/globe.mp4"
+                        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+                        allowFullScreen
+                     />
+                  </VideoPlayer>
+               </VideoModalVideo>
+            </VideoModalContent>
+         </VideoModal>
+      </div>
+   )
+}
+
+export default VideoModalDemo
diff --git a/apps/web/registry/miami/examples/warp-background-demo.tsx b/apps/web/registry/miami/examples/warp-background-demo.tsx
new file mode 100644
index 00000000..d0dee382
--- /dev/null
+++ b/apps/web/registry/miami/examples/warp-background-demo.tsx
@@ -0,0 +1,24 @@
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { WarpBackground } from "~/registry/miami/ui/warp-background"
+
+export default function ExampleComponentDemo() {
+   return (
+      <WarpBackground>
+         <Card className="w-80">
+            <CardContent className="flex flex-col gap-2 p-4">
+               <CardTitle>Congratulations on Your Promotion!</CardTitle>
+               <CardDescription>
+                  Your hard work and dedication have paid off. We&apos;re
+                  thrilled to see you take this next step in your career. Keep
+                  up the fantastic work!
+               </CardDescription>
+            </CardContent>
+         </Card>
+      </WarpBackground>
+   )
+}
diff --git a/apps/web/registry/miami/examples/wavy-text-demo.tsx b/apps/web/registry/miami/examples/wavy-text-demo.tsx
new file mode 100644
index 00000000..b10624c8
--- /dev/null
+++ b/apps/web/registry/miami/examples/wavy-text-demo.tsx
@@ -0,0 +1,10 @@
+import WavyText from "~/registry/miami/ui/wavy-text"
+
+export default function WavyTextDemo() {
+   return (
+      <WavyText
+         word="Wavy Text"
+         className="text-4xl font-bold text-black dark:text-white"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/word-fade-in-demo.tsx b/apps/web/registry/miami/examples/word-fade-in-demo.tsx
new file mode 100644
index 00000000..5575d8eb
--- /dev/null
+++ b/apps/web/registry/miami/examples/word-fade-in-demo.tsx
@@ -0,0 +1,5 @@
+import WordFadeIn from "~/registry/miami/ui/word-fade-in"
+
+export default async function WordFadeInDemo() {
+   return <WordFadeIn words="Word Fade In" />
+}
diff --git a/apps/web/registry/miami/examples/word-pull-up-demo.tsx b/apps/web/registry/miami/examples/word-pull-up-demo.tsx
new file mode 100644
index 00000000..e2ecb703
--- /dev/null
+++ b/apps/web/registry/miami/examples/word-pull-up-demo.tsx
@@ -0,0 +1,10 @@
+import WordPullUp from "~/registry/miami/ui/word-pull-up"
+
+export default async function WordPullUpDemo() {
+   return (
+      <WordPullUp
+         className="text-4xl font-bold tracking-[-0.02em] text-black md:text-7xl md:leading-[5rem] dark:text-white"
+         words="Word Pull Up"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/examples/word-rotate-demo.tsx b/apps/web/registry/miami/examples/word-rotate-demo.tsx
new file mode 100644
index 00000000..fef90d30
--- /dev/null
+++ b/apps/web/registry/miami/examples/word-rotate-demo.tsx
@@ -0,0 +1,10 @@
+import WordRotate from "~/registry/miami/ui/word-rotate"
+
+export default async function WordRotateDemo() {
+   return (
+      <WordRotate
+         className="text-4xl font-bold text-black dark:text-white"
+         words={["Word", "Rotate"]}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/hooks/use-anchor-observer.ts b/apps/web/registry/miami/hooks/use-anchor-observer.ts
index f5daf522..cd2b190c 100644
--- a/apps/web/registry/miami/hooks/use-anchor-observer.ts
+++ b/apps/web/registry/miami/hooks/use-anchor-observer.ts
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react"
 
 /**
  * Find the active heading of page
@@ -21,35 +21,31 @@ export function useAnchorObserver(watch: string[], single: boolean): string[] {
             for (const entry of entries) {
                if (entry.isIntersecting && !visible.includes(entry.target.id)) {
                   visible = [...visible, entry.target.id]
-               }
-               else if (
-                  !entry.isIntersecting
-                  && visible.includes(entry.target.id)
+               } else if (
+                  !entry.isIntersecting &&
+                  visible.includes(entry.target.id)
                ) {
-                  visible = visible.filter(v => v !== entry.target.id)
+                  visible = visible.filter((v) => v !== entry.target.id)
                }
             }
 
-            if (visible.length > 0)
-               setActiveAnchor(visible)
+            if (visible.length > 0) setActiveAnchor(visible)
          },
          {
-            rootMargin: single ? '-80px 0% -70% 0%' : `-20px 0% -40% 0%`,
+            rootMargin: single ? "-80px 0% -70% 0%" : `-20px 0% -40% 0%`,
             threshold: 1,
          },
       )
 
       function onScroll(): void {
          const element = document.scrollingElement
-         if (!element)
-            return
+         if (!element) return
 
          if (element.scrollTop === 0 && single) {
             setActiveAnchor(watch.slice(0, 1))
-         }
-         else if (
-            element.scrollTop + element.clientHeight
-            >= element.scrollHeight - 6
+         } else if (
+            element.scrollTop + element.clientHeight >=
+            element.scrollHeight - 6
          ) {
             setActiveAnchor((active) => {
                return active.length > 0 && !single
@@ -62,14 +58,13 @@ export function useAnchorObserver(watch: string[], single: boolean): string[] {
       for (const heading of watch) {
          const element = document.getElementById(heading)
 
-         if (element)
-            observer.observe(element)
+         if (element) observer.observe(element)
       }
 
       onScroll()
-      window.addEventListener('scroll', onScroll)
+      window.addEventListener("scroll", onScroll)
       return () => {
-         window.removeEventListener('scroll', onScroll)
+         window.removeEventListener("scroll", onScroll)
          observer.disconnect()
       }
    }, [single, watch])
diff --git a/apps/web/registry/miami/hooks/use-mobile.tsx b/apps/web/registry/miami/hooks/use-mobile.tsx
index d290f8ed..cb15c382 100644
--- a/apps/web/registry/miami/hooks/use-mobile.tsx
+++ b/apps/web/registry/miami/hooks/use-mobile.tsx
@@ -1,18 +1,20 @@
-import * as React from 'react'
+import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768
 
 export function useIsMobile() {
-   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+      undefined,
+   )
 
    React.useEffect(() => {
       const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
       const onChange = () => {
          setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
       }
-      mql.addEventListener('change', onChange)
+      mql.addEventListener("change", onChange)
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-      return () => mql.removeEventListener('change', onChange)
+      return () => mql.removeEventListener("change", onChange)
    }, [])
 
    return !!isMobile
diff --git a/apps/web/registry/miami/hooks/use-on-change.ts b/apps/web/registry/miami/hooks/use-on-change.ts
index 3e317f0a..24688422 100644
--- a/apps/web/registry/miami/hooks/use-on-change.ts
+++ b/apps/web/registry/miami/hooks/use-on-change.ts
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { useState } from 'react'
+import { useState } from "react"
 
 function isDifferent(a: unknown, b: unknown): boolean {
    if (Array.isArray(a) && Array.isArray(b)) {
diff --git a/apps/web/registry/miami/hooks/use-toast.ts b/apps/web/registry/miami/hooks/use-toast.ts
index 23a61211..c9da604a 100644
--- a/apps/web/registry/miami/hooks/use-toast.ts
+++ b/apps/web/registry/miami/hooks/use-toast.ts
@@ -1,12 +1,9 @@
-'use client'
+"use client"
 
 // Inspired by react-hot-toast library
-import * as React from 'react'
+import * as React from "react"
 
-import type {
-   ToastActionElement,
-   ToastProps,
-} from '~/registry/miami/ui/toast'
+import type { ToastActionElement, ToastProps } from "~/registry/miami/ui/toast"
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
@@ -19,10 +16,10 @@ type ToasterToast = ToastProps & {
 }
 
 const actionTypes = {
-   ADD_TOAST: 'ADD_TOAST',
-   UPDATE_TOAST: 'UPDATE_TOAST',
-   DISMISS_TOAST: 'DISMISS_TOAST',
-   REMOVE_TOAST: 'REMOVE_TOAST',
+   ADD_TOAST: "ADD_TOAST",
+   UPDATE_TOAST: "UPDATE_TOAST",
+   DISMISS_TOAST: "DISMISS_TOAST",
+   REMOVE_TOAST: "REMOVE_TOAST",
 } as const
 
 let count = 0
@@ -36,21 +33,21 @@ type ActionType = typeof actionTypes
 
 type Action =
    | {
-      type: ActionType['ADD_TOAST']
-      toast: ToasterToast
-   }
+        type: ActionType["ADD_TOAST"]
+        toast: ToasterToast
+     }
    | {
-      type: ActionType['UPDATE_TOAST']
-      toast: Partial<ToasterToast>
-   }
+        type: ActionType["UPDATE_TOAST"]
+        toast: Partial<ToasterToast>
+     }
    | {
-      type: ActionType['DISMISS_TOAST']
-      toastId?: ToasterToast['id']
-   }
+        type: ActionType["DISMISS_TOAST"]
+        toastId?: ToasterToast["id"]
+     }
    | {
-      type: ActionType['REMOVE_TOAST']
-      toastId?: ToasterToast['id']
-   }
+        type: ActionType["REMOVE_TOAST"]
+        toastId?: ToasterToast["id"]
+     }
 
 interface State {
    toasts: ToasterToast[]
@@ -66,7 +63,7 @@ function addToRemoveQueue(toastId: string) {
    const timeout = setTimeout(() => {
       toastTimeouts.delete(toastId)
       dispatch({
-         type: 'REMOVE_TOAST',
+         type: "REMOVE_TOAST",
          toastId,
       })
    }, TOAST_REMOVE_DELAY)
@@ -76,29 +73,28 @@ function addToRemoveQueue(toastId: string) {
 
 export function reducer(state: State, action: Action): State {
    switch (action.type) {
-      case 'ADD_TOAST':
+      case "ADD_TOAST":
          return {
             ...state,
             toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
          }
 
-      case 'UPDATE_TOAST':
+      case "UPDATE_TOAST":
          return {
             ...state,
-            toasts: state.toasts.map(t =>
+            toasts: state.toasts.map((t) =>
                t.id === action.toast.id ? { ...t, ...action.toast } : t,
             ),
          }
 
-      case 'DISMISS_TOAST': {
+      case "DISMISS_TOAST": {
          const { toastId } = action
 
          // ! Side effects ! - This could be extracted into a dismissToast() action,
          // but I'll keep it here for simplicity
          if (toastId) {
             addToRemoveQueue(toastId)
-         }
-         else {
+         } else {
             state.toasts.forEach((toast) => {
                addToRemoveQueue(toast.id)
             })
@@ -106,17 +102,17 @@ export function reducer(state: State, action: Action): State {
 
          return {
             ...state,
-            toasts: state.toasts.map(t =>
+            toasts: state.toasts.map((t) =>
                t.id === toastId || toastId === undefined
                   ? {
-                        ...t,
-                        open: false,
-                     }
+                       ...t,
+                       open: false,
+                    }
                   : t,
             ),
          }
       }
-      case 'REMOVE_TOAST':
+      case "REMOVE_TOAST":
          if (action.toastId === undefined) {
             return {
                ...state,
@@ -125,7 +121,7 @@ export function reducer(state: State, action: Action): State {
          }
          return {
             ...state,
-            toasts: state.toasts.filter(t => t.id !== action.toastId),
+            toasts: state.toasts.filter((t) => t.id !== action.toastId),
          }
    }
 }
@@ -141,27 +137,26 @@ function dispatch(action: Action) {
    })
 }
 
-type Toast = Omit<ToasterToast, 'id'>
+type Toast = Omit<ToasterToast, "id">
 
 function toast({ ...props }: Toast) {
    const id = genId()
 
    const update = (props: ToasterToast) =>
       dispatch({
-         type: 'UPDATE_TOAST',
+         type: "UPDATE_TOAST",
          toast: { ...props, id },
       })
-   const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
 
    dispatch({
-      type: 'ADD_TOAST',
+      type: "ADD_TOAST",
       toast: {
          ...props,
          id,
          open: true,
          onOpenChange: (open) => {
-            if (!open)
-               dismiss()
+            if (!open) dismiss()
          },
       },
    })
@@ -189,7 +184,8 @@ function useToast() {
    return {
       ...state,
       toast,
-      dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+      dismiss: (toastId?: string) =>
+         dispatch({ type: "DISMISS_TOAST", toastId }),
    }
 }
 
diff --git a/apps/web/registry/miami/internal/charts-01.tsx b/apps/web/registry/miami/internal/charts-01.tsx
new file mode 100644
index 00000000..a847c950
--- /dev/null
+++ b/apps/web/registry/miami/internal/charts-01.tsx
@@ -0,0 +1,947 @@
+"use client"
+
+import {
+   Area,
+   AreaChart,
+   Bar,
+   BarChart,
+   CartesianGrid,
+   Label,
+   LabelList,
+   Line,
+   LineChart,
+   PolarAngleAxis,
+   RadialBar,
+   RadialBarChart,
+   Rectangle,
+   ReferenceLine,
+   XAxis,
+   YAxis,
+} from "recharts"
+
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami//ui/card"
+import {
+   ChartContainer,
+   ChartTooltip,
+   ChartTooltipContent,
+} from "~/registry/miami//ui/chart"
+import { Separator } from "~/registry/miami//ui/separator"
+
+export const description = "A collection of health charts."
+
+export const iframeHeight = "900px"
+
+export const containerClassName = "min-h-screen py-12"
+
+export default function Charts() {
+   return (
+      <div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
+         <div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
+            <Card
+               x-chunk="A bar chart showing the number of steps you have walked in the past 7 days."
+               className="lg:max-w-md"
+            >
+               <CardHeader className="space-y-0 pb-2">
+                  <CardDescription>Today</CardDescription>
+                  <CardTitle className="text-4xl tabular-nums">
+                     12,584{" "}
+                     <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
+                        steps
+                     </span>
+                  </CardTitle>
+               </CardHeader>
+               <CardContent>
+                  <ChartContainer
+                     config={{
+                        steps: {
+                           label: "Steps",
+                           color: "hsl(var(--chart-1))",
+                        },
+                     }}
+                  >
+                     <BarChart
+                        accessibilityLayer
+                        margin={{
+                           left: -4,
+                           right: -4,
+                        }}
+                        data={[
+                           {
+                              date: "2024-01-01",
+                              steps: 2000,
+                           },
+                           {
+                              date: "2024-01-02",
+                              steps: 2100,
+                           },
+                           {
+                              date: "2024-01-03",
+                              steps: 2200,
+                           },
+                           {
+                              date: "2024-01-04",
+                              steps: 1300,
+                           },
+                           {
+                              date: "2024-01-05",
+                              steps: 1400,
+                           },
+                           {
+                              date: "2024-01-06",
+                              steps: 2500,
+                           },
+                           {
+                              date: "2024-01-07",
+                              steps: 1600,
+                           },
+                        ]}
+                     >
+                        <Bar
+                           dataKey="steps"
+                           fill="var(--color-steps)"
+                           radius={5}
+                           fillOpacity={0.6}
+                           activeBar={<Rectangle fillOpacity={0.8} />}
+                        />
+                        <XAxis
+                           dataKey="date"
+                           tickLine={false}
+                           axisLine={false}
+                           tickMargin={4}
+                           tickFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    weekday: "short",
+                                 },
+                              )
+                           }}
+                        />
+                        <ChartTooltip
+                           defaultIndex={2}
+                           content={
+                              <ChartTooltipContent
+                                 hideIndicator
+                                 labelFormatter={(value) => {
+                                    return new Date(value).toLocaleDateString(
+                                       "en-US",
+                                       {
+                                          day: "numeric",
+                                          month: "long",
+                                          year: "numeric",
+                                       },
+                                    )
+                                 }}
+                              />
+                           }
+                           cursor={false}
+                        />
+                        <ReferenceLine
+                           y={1200}
+                           stroke="hsl(var(--muted-foreground))"
+                           strokeDasharray="3 3"
+                           strokeWidth={1}
+                        >
+                           <Label
+                              position="insideBottomLeft"
+                              value="Average Steps"
+                              offset={10}
+                              fill="hsl(var(--foreground))"
+                           />
+                           <Label
+                              position="insideTopLeft"
+                              value="12,343"
+                              className="text-lg"
+                              fill="hsl(var(--foreground))"
+                              offset={10}
+                              startOffset={100}
+                           />
+                        </ReferenceLine>
+                     </BarChart>
+                  </ChartContainer>
+               </CardContent>
+               <CardFooter className="flex-col items-start gap-1">
+                  <CardDescription>
+                     Over the past 7 days, you have walked{" "}
+                     <span className="font-medium text-foreground">53,305</span>{" "}
+                     steps.
+                  </CardDescription>
+                  <CardDescription>
+                     You need{" "}
+                     <span className="font-medium text-foreground">12,584</span>{" "}
+                     more steps to reach your goal.
+                  </CardDescription>
+               </CardFooter>
+            </Card>
+            <Card
+               x-chunk="A line chart showing the resting heart rate for the past 7 days."
+               className="flex flex-col lg:max-w-md"
+            >
+               <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
+                  <div>
+                     <CardDescription>Resting HR</CardDescription>
+                     <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
+                        62
+                        <span className="text-sm font-normal tracking-normal text-muted-foreground">
+                           bpm
+                        </span>
+                     </CardTitle>
+                  </div>
+                  <div>
+                     <CardDescription>Variability</CardDescription>
+                     <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
+                        35
+                        <span className="text-sm font-normal tracking-normal text-muted-foreground">
+                           ms
+                        </span>
+                     </CardTitle>
+                  </div>
+               </CardHeader>
+               <CardContent className="flex flex-1 items-center">
+                  <ChartContainer
+                     config={{
+                        resting: {
+                           label: "Resting",
+                           color: "hsl(var(--chart-1))",
+                        },
+                     }}
+                     className="w-full"
+                  >
+                     <LineChart
+                        accessibilityLayer
+                        margin={{
+                           left: 14,
+                           right: 14,
+                           top: 10,
+                        }}
+                        data={[
+                           {
+                              date: "2024-01-01",
+                              resting: 62,
+                           },
+                           {
+                              date: "2024-01-02",
+                              resting: 72,
+                           },
+                           {
+                              date: "2024-01-03",
+                              resting: 35,
+                           },
+                           {
+                              date: "2024-01-04",
+                              resting: 62,
+                           },
+                           {
+                              date: "2024-01-05",
+                              resting: 52,
+                           },
+                           {
+                              date: "2024-01-06",
+                              resting: 62,
+                           },
+                           {
+                              date: "2024-01-07",
+                              resting: 70,
+                           },
+                        ]}
+                     >
+                        <CartesianGrid
+                           strokeDasharray="4 4"
+                           vertical={false}
+                           stroke="hsl(var(--muted-foreground))"
+                           strokeOpacity={0.5}
+                        />
+                        <YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
+                        <XAxis
+                           dataKey="date"
+                           tickLine={false}
+                           axisLine={false}
+                           tickMargin={8}
+                           tickFormatter={(value) => {
+                              return new Date(value).toLocaleDateString(
+                                 "en-US",
+                                 {
+                                    weekday: "short",
+                                 },
+                              )
+                           }}
+                        />
+                        <Line
+                           dataKey="resting"
+                           type="natural"
+                           fill="var(--color-resting)"
+                           stroke="var(--color-resting)"
+                           strokeWidth={2}
+                           dot={false}
+                           activeDot={{
+                              fill: "var(--color-resting)",
+                              stroke: "var(--color-resting)",
+                              r: 4,
+                           }}
+                        />
+                        <ChartTooltip
+                           content={
+                              <ChartTooltipContent
+                                 indicator="line"
+                                 labelFormatter={(value) => {
+                                    return new Date(value).toLocaleDateString(
+                                       "en-US",
+                                       {
+                                          day: "numeric",
+                                          month: "long",
+                                          year: "numeric",
+                                       },
+                                    )
+                                 }}
+                              />
+                           }
+                           cursor={false}
+                        />
+                     </LineChart>
+                  </ChartContainer>
+               </CardContent>
+            </Card>
+         </div>
+         <div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
+            <Card
+               x-chunk="Two horizontal bar charts showing total steps taken during the current year and last year."
+               className="max-w-xs"
+            >
+               <CardHeader>
+                  <CardTitle>Progress</CardTitle>
+                  <CardDescription>
+                     You're average more steps a day this year than last year.
+                  </CardDescription>
+               </CardHeader>
+               <CardContent className="grid gap-4">
+                  <div className="grid auto-rows-min gap-2">
+                     <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
+                        12,453
+                        <span className="text-sm font-normal text-muted-foreground">
+                           steps/day
+                        </span>
+                     </div>
+                     <ChartContainer
+                        config={{
+                           steps: {
+                              label: "Steps",
+                              color: "hsl(var(--chart-1))",
+                           },
+                        }}
+                        className="aspect-auto h-[32px] w-full"
+                     >
+                        <BarChart
+                           accessibilityLayer
+                           layout="vertical"
+                           margin={{
+                              left: 0,
+                              top: 0,
+                              right: 0,
+                              bottom: 0,
+                           }}
+                           data={[
+                              {
+                                 date: "2024",
+                                 steps: 12435,
+                              },
+                           ]}
+                        >
+                           <Bar
+                              dataKey="steps"
+                              fill="var(--color-steps)"
+                              radius={4}
+                              barSize={32}
+                           >
+                              <LabelList
+                                 position="insideLeft"
+                                 dataKey="date"
+                                 offset={8}
+                                 fontSize={12}
+                                 fill="white"
+                              />
+                           </Bar>
+                           <YAxis
+                              dataKey="date"
+                              type="category"
+                              tickCount={1}
+                              hide
+                           />
+                           <XAxis dataKey="steps" type="number" hide />
+                        </BarChart>
+                     </ChartContainer>
+                  </div>
+                  <div className="grid auto-rows-min gap-2">
+                     <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
+                        10,103
+                        <span className="text-sm font-normal text-muted-foreground">
+                           steps/day
+                        </span>
+                     </div>
+                     <ChartContainer
+                        config={{
+                           steps: {
+                              label: "Steps",
+                              color: "hsl(var(--muted))",
+                           },
+                        }}
+                        className="aspect-auto h-[32px] w-full"
+                     >
+                        <BarChart
+                           accessibilityLayer
+                           layout="vertical"
+                           margin={{
+                              left: 0,
+                              top: 0,
+                              right: 0,
+                              bottom: 0,
+                           }}
+                           data={[
+                              {
+                                 date: "2023",
+                                 steps: 10103,
+                              },
+                           ]}
+                        >
+                           <Bar
+                              dataKey="steps"
+                              fill="var(--color-steps)"
+                              radius={4}
+                              barSize={32}
+                           >
+                              <LabelList
+                                 position="insideLeft"
+                                 dataKey="date"
+                                 offset={8}
+                                 fontSize={12}
+                                 fill="hsl(var(--muted-foreground))"
+                              />
+                           </Bar>
+                           <YAxis
+                              dataKey="date"
+                              type="category"
+                              tickCount={1}
+                              hide
+                           />
+                           <XAxis dataKey="steps" type="number" hide />
+                        </BarChart>
+                     </ChartContainer>
+                  </div>
+               </CardContent>
+            </Card>
+            <Card
+               x-chunk="A bar chart showing the walking and running distance for the past 7 days."
+               className="max-w-xs"
+            >
+               <CardHeader className="p-4 pb-0">
+                  <CardTitle>Walking Distance</CardTitle>
+                  <CardDescription>
+                     Over the last 7 days, your distance walked and run was 12.5
+                     miles per day.
+                  </CardDescription>
+               </CardHeader>
+               <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
+                  <div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
+                     12.5
+                     <span className="text-sm font-normal text-muted-foreground">
+                        miles/day
+                     </span>
+                  </div>
+                  <ChartContainer
+                     config={{
+                        steps: {
+                           label: "Steps",
+                           color: "hsl(var(--chart-1))",
+                        },
+                     }}
+                     className="ml-auto w-[72px]"
+                  >
+                     <BarChart
+                        accessibilityLayer
+                        margin={{
+                           left: 0,
+                           right: 0,
+                           top: 0,
+                           bottom: 0,
+                        }}
+                        data={[
+                           {
+                              date: "2024-01-01",
+                              steps: 2000,
+                           },
+                           {
+                              date: "2024-01-02",
+                              steps: 2100,
+                           },
+                           {
+                              date: "2024-01-03",
+                              steps: 2200,
+                           },
+                           {
+                              date: "2024-01-04",
+                              steps: 1300,
+                           },
+                           {
+                              date: "2024-01-05",
+                              steps: 1400,
+                           },
+                           {
+                              date: "2024-01-06",
+                              steps: 2500,
+                           },
+                           {
+                              date: "2024-01-07",
+                              steps: 1600,
+                           },
+                        ]}
+                     >
+                        <Bar
+                           dataKey="steps"
+                           fill="var(--color-steps)"
+                           radius={2}
+                           fillOpacity={0.2}
+                           activeIndex={6}
+                           activeBar={<Rectangle fillOpacity={0.8} />}
+                        />
+                        <XAxis
+                           dataKey="date"
+                           tickLine={false}
+                           axisLine={false}
+                           tickMargin={4}
+                           hide
+                        />
+                     </BarChart>
+                  </ChartContainer>
+               </CardContent>
+            </Card>
+            <Card
+               x-chunk="A bar chart showing move, exercise, and stand progress."
+               className="max-w-xs"
+            >
+               <CardContent className="flex gap-4 p-4 pb-2">
+                  <ChartContainer
+                     config={{
+                        move: {
+                           label: "Move",
+                           color: "hsl(var(--chart-1))",
+                        },
+                        stand: {
+                           label: "Stand",
+                           color: "hsl(var(--chart-2))",
+                        },
+                        exercise: {
+                           label: "Exercise",
+                           color: "hsl(var(--chart-3))",
+                        },
+                     }}
+                     className="h-[140px] w-full"
+                  >
+                     <BarChart
+                        margin={{
+                           left: 0,
+                           right: 0,
+                           top: 0,
+                           bottom: 10,
+                        }}
+                        data={[
+                           {
+                              activity: "stand",
+                              value: (8 / 12) * 100,
+                              label: "8/12 hr",
+                              fill: "var(--color-stand)",
+                           },
+                           {
+                              activity: "exercise",
+                              value: (46 / 60) * 100,
+                              label: "46/60 min",
+                              fill: "var(--color-exercise)",
+                           },
+                           {
+                              activity: "move",
+                              value: (245 / 360) * 100,
+                              label: "245/360 kcal",
+                              fill: "var(--color-move)",
+                           },
+                        ]}
+                        layout="vertical"
+                        barSize={32}
+                        barGap={2}
+                     >
+                        <XAxis type="number" dataKey="value" hide />
+                        <YAxis
+                           dataKey="activity"
+                           type="category"
+                           tickLine={false}
+                           tickMargin={4}
+                           axisLine={false}
+                           className="capitalize"
+                        />
+                        <Bar dataKey="value" radius={5}>
+                           <LabelList
+                              position="insideLeft"
+                              dataKey="label"
+                              fill="white"
+                              offset={8}
+                              fontSize={12}
+                           />
+                        </Bar>
+                     </BarChart>
+                  </ChartContainer>
+               </CardContent>
+               <CardFooter className="flex flex-row border-t p-4">
+                  <div className="flex w-full items-center gap-2">
+                     <div className="grid flex-1 auto-rows-min gap-0.5">
+                        <div className="text-xs text-muted-foreground">
+                           Move
+                        </div>
+                        <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
+                           562
+                           <span className="text-sm font-normal text-muted-foreground">
+                              kcal
+                           </span>
+                        </div>
+                     </div>
+                     <Separator
+                        orientation="vertical"
+                        className="mx-2 h-10 w-px"
+                     />
+                     <div className="grid flex-1 auto-rows-min gap-0.5">
+                        <div className="text-xs text-muted-foreground">
+                           Exercise
+                        </div>
+                        <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
+                           73
+                           <span className="text-sm font-normal text-muted-foreground">
+                              min
+                           </span>
+                        </div>
+                     </div>
+                     <Separator
+                        orientation="vertical"
+                        className="mx-2 h-10 w-px"
+                     />
+                     <div className="grid flex-1 auto-rows-min gap-0.5">
+                        <div className="text-xs text-muted-foreground">
+                           Stand
+                        </div>
+                        <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
+                           14
+                           <span className="text-sm font-normal text-muted-foreground">
+                              hr
+                           </span>
+                        </div>
+                     </div>
+                  </div>
+               </CardFooter>
+            </Card>
+         </div>
+         <div className="grid w-full flex-1 gap-6">
+            <Card
+               x-chunk="A radial bar chart showing the percentage of time spent moving, exercising, and standing."
+               className="max-w-xs"
+            >
+               <CardContent className="flex gap-4 p-4">
+                  <div className="grid items-center gap-2">
+                     <div className="grid flex-1 auto-rows-min gap-0.5">
+                        <div className="text-sm text-muted-foreground">
+                           Move
+                        </div>
+                        <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
+                           562/600
+                           <span className="text-sm font-normal text-muted-foreground">
+                              kcal
+                           </span>
+                        </div>
+                     </div>
+                     <div className="grid flex-1 auto-rows-min gap-0.5">
+                        <div className="text-sm text-muted-foreground">
+                           Exercise
+                        </div>
+                        <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
+                           73/120
+                           <span className="text-sm font-normal text-muted-foreground">
+                              min
+                           </span>
+                        </div>
+                     </div>
+                     <div className="grid flex-1 auto-rows-min gap-0.5">
+                        <div className="text-sm text-muted-foreground">
+                           Stand
+                        </div>
+                        <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
+                           8/12
+                           <span className="text-sm font-normal text-muted-foreground">
+                              hr
+                           </span>
+                        </div>
+                     </div>
+                  </div>
+                  <ChartContainer
+                     config={{
+                        move: {
+                           label: "Move",
+                           color: "hsl(var(--chart-1))",
+                        },
+                        exercise: {
+                           label: "Exercise",
+                           color: "hsl(var(--chart-2))",
+                        },
+                        stand: {
+                           label: "Stand",
+                           color: "hsl(var(--chart-3))",
+                        },
+                     }}
+                     className="mx-auto aspect-square w-full max-w-[80%]"
+                  >
+                     <RadialBarChart
+                        margin={{
+                           left: -10,
+                           right: -10,
+                           top: -10,
+                           bottom: -10,
+                        }}
+                        data={[
+                           {
+                              activity: "stand",
+                              value: (8 / 12) * 100,
+                              fill: "var(--color-stand)",
+                           },
+                           {
+                              activity: "exercise",
+                              value: (46 / 60) * 100,
+                              fill: "var(--color-exercise)",
+                           },
+                           {
+                              activity: "move",
+                              value: (245 / 360) * 100,
+                              fill: "var(--color-move)",
+                           },
+                        ]}
+                        innerRadius="20%"
+                        barSize={24}
+                        startAngle={90}
+                        endAngle={450}
+                     >
+                        <PolarAngleAxis
+                           type="number"
+                           domain={[0, 100]}
+                           dataKey="value"
+                           tick={false}
+                        />
+                        <RadialBar
+                           dataKey="value"
+                           background
+                           cornerRadius={5}
+                        />
+                     </RadialBarChart>
+                  </ChartContainer>
+               </CardContent>
+            </Card>
+            <Card
+               x-chunk="A bar chart showing active energy in the past 7 days."
+               className="max-w-xs"
+            >
+               <CardHeader className="p-4 pb-0">
+                  <CardTitle>Active Energy</CardTitle>
+                  <CardDescription>
+                     You're burning an average of 754 calories per day. Good
+                     job!
+                  </CardDescription>
+               </CardHeader>
+               <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
+                  <div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
+                     1,254
+                     <span className="text-sm font-normal text-muted-foreground">
+                        kcal/day
+                     </span>
+                  </div>
+                  <ChartContainer
+                     config={{
+                        calories: {
+                           label: "Calories",
+                           color: "hsl(var(--chart-1))",
+                        },
+                     }}
+                     className="ml-auto w-[64px]"
+                  >
+                     <BarChart
+                        accessibilityLayer
+                        margin={{
+                           left: 0,
+                           right: 0,
+                           top: 0,
+                           bottom: 0,
+                        }}
+                        data={[
+                           {
+                              date: "2024-01-01",
+                              calories: 354,
+                           },
+                           {
+                              date: "2024-01-02",
+                              calories: 514,
+                           },
+                           {
+                              date: "2024-01-03",
+                              calories: 345,
+                           },
+                           {
+                              date: "2024-01-04",
+                              calories: 734,
+                           },
+                           {
+                              date: "2024-01-05",
+                              calories: 645,
+                           },
+                           {
+                              date: "2024-01-06",
+                              calories: 456,
+                           },
+                           {
+                              date: "2024-01-07",
+                              calories: 345,
+                           },
+                        ]}
+                     >
+                        <Bar
+                           dataKey="calories"
+                           fill="var(--color-calories)"
+                           radius={2}
+                           fillOpacity={0.2}
+                           activeIndex={6}
+                           activeBar={<Rectangle fillOpacity={0.8} />}
+                        />
+                        <XAxis
+                           dataKey="date"
+                           tickLine={false}
+                           axisLine={false}
+                           tickMargin={4}
+                           hide
+                        />
+                     </BarChart>
+                  </ChartContainer>
+               </CardContent>
+            </Card>
+            <Card
+               x-chunk="An area chart showing the time spent in bed for the past 7 days."
+               className="max-w-xs"
+            >
+               <CardHeader className="space-y-0 pb-0">
+                  <CardDescription>Time in Bed</CardDescription>
+                  <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
+                     8
+                     <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
+                        hr
+                     </span>
+                     35
+                     <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
+                        min
+                     </span>
+                  </CardTitle>
+               </CardHeader>
+               <CardContent className="p-0">
+                  <ChartContainer
+                     config={{
+                        time: {
+                           label: "Time",
+                           color: "hsl(var(--chart-2))",
+                        },
+                     }}
+                  >
+                     <AreaChart
+                        accessibilityLayer
+                        data={[
+                           {
+                              date: "2024-01-01",
+                              time: 8.5,
+                           },
+                           {
+                              date: "2024-01-02",
+                              time: 7.2,
+                           },
+                           {
+                              date: "2024-01-03",
+                              time: 8.1,
+                           },
+                           {
+                              date: "2024-01-04",
+                              time: 6.2,
+                           },
+                           {
+                              date: "2024-01-05",
+                              time: 5.2,
+                           },
+                           {
+                              date: "2024-01-06",
+                              time: 8.1,
+                           },
+                           {
+                              date: "2024-01-07",
+                              time: 7.0,
+                           },
+                        ]}
+                        margin={{
+                           left: 0,
+                           right: 0,
+                           top: 0,
+                           bottom: 0,
+                        }}
+                     >
+                        <XAxis dataKey="date" hide />
+                        <YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
+                        <defs>
+                           <linearGradient
+                              id="fillTime"
+                              x1="0"
+                              y1="0"
+                              x2="0"
+                              y2="1"
+                           >
+                              <stop
+                                 offset="5%"
+                                 stopColor="var(--color-time)"
+                                 stopOpacity={0.8}
+                              />
+                              <stop
+                                 offset="95%"
+                                 stopColor="var(--color-time)"
+                                 stopOpacity={0.1}
+                              />
+                           </linearGradient>
+                        </defs>
+                        <Area
+                           dataKey="time"
+                           type="natural"
+                           fill="url(#fillTime)"
+                           fillOpacity={0.4}
+                           stroke="var(--color-time)"
+                        />
+                        <ChartTooltip
+                           cursor={false}
+                           content={<ChartTooltipContent hideLabel />}
+                           formatter={(value) => (
+                              <div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
+                                 Time in bed
+                                 <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                                    {value}
+                                    <span className="font-normal text-muted-foreground">
+                                       hr
+                                    </span>
+                                 </div>
+                              </div>
+                           )}
+                        />
+                     </AreaChart>
+                  </ChartContainer>
+               </CardContent>
+            </Card>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/dashboard-01.tsx b/apps/web/registry/miami/internal/dashboard-01.tsx
new file mode 100644
index 00000000..62e42b45
--- /dev/null
+++ b/apps/web/registry/miami/internal/dashboard-01.tsx
@@ -0,0 +1,476 @@
+import {
+   Activity,
+   ArrowUpRight,
+   CircleUser,
+   CreditCard,
+   DollarSign,
+   Menu,
+   Package2,
+   Search,
+   Users,
+} from "lucide-react"
+import Link from "next/link"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Badge } from "~/registry/miami/ui/badge"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
+import {
+   Table,
+   TableBody,
+   TableCell,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/miami/ui/table"
+
+export const description =
+   "An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales."
+
+export const iframeHeight = "730px"
+
+export const containerClassName = "w-full h-full"
+
+export default function Dashboard() {
+   return (
+      <div className="flex min-h-screen w-full flex-col">
+         <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
+            <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
+               <Link
+                  href="#"
+                  className="flex items-center gap-2 text-lg font-semibold md:text-base"
+               >
+                  <Package2 className="h-6 w-6" />
+                  <span className="sr-only">Acme Inc</span>
+               </Link>
+               <Link
+                  href="#"
+                  className="text-foreground transition-colors hover:text-foreground"
+               >
+                  Dashboard
+               </Link>
+               <Link
+                  href="#"
+                  className="text-muted-foreground transition-colors hover:text-foreground"
+               >
+                  Orders
+               </Link>
+               <Link
+                  href="#"
+                  className="text-muted-foreground transition-colors hover:text-foreground"
+               >
+                  Products
+               </Link>
+               <Link
+                  href="#"
+                  className="text-muted-foreground transition-colors hover:text-foreground"
+               >
+                  Customers
+               </Link>
+               <Link
+                  href="#"
+                  className="text-muted-foreground transition-colors hover:text-foreground"
+               >
+                  Analytics
+               </Link>
+            </nav>
+            <Sheet>
+               <SheetTrigger asChild>
+                  <Button
+                     variant="outline"
+                     size="icon"
+                     className="shrink-0 md:hidden"
+                  >
+                     <Menu className="h-5 w-5" />
+                     <span className="sr-only">Toggle navigation menu</span>
+                  </Button>
+               </SheetTrigger>
+               <SheetContent side="left">
+                  <nav className="grid gap-6 text-lg font-medium">
+                     <Link
+                        href="#"
+                        className="flex items-center gap-2 text-lg font-semibold"
+                     >
+                        <Package2 className="h-6 w-6" />
+                        <span className="sr-only">Acme Inc</span>
+                     </Link>
+                     <Link href="#" className="hover:text-foreground">
+                        Dashboard
+                     </Link>
+                     <Link
+                        href="#"
+                        className="text-muted-foreground hover:text-foreground"
+                     >
+                        Orders
+                     </Link>
+                     <Link
+                        href="#"
+                        className="text-muted-foreground hover:text-foreground"
+                     >
+                        Products
+                     </Link>
+                     <Link
+                        href="#"
+                        className="text-muted-foreground hover:text-foreground"
+                     >
+                        Customers
+                     </Link>
+                     <Link
+                        href="#"
+                        className="text-muted-foreground hover:text-foreground"
+                     >
+                        Analytics
+                     </Link>
+                  </nav>
+               </SheetContent>
+            </Sheet>
+            <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
+               <form className="ml-auto flex-1 sm:flex-initial">
+                  <div className="relative">
+                     <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                     <Input
+                        type="search"
+                        placeholder="Search products..."
+                        className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
+                     />
+                  </div>
+               </form>
+               <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                     <Button
+                        variant="secondary"
+                        size="icon"
+                        className="rounded-full"
+                     >
+                        <CircleUser className="h-5 w-5" />
+                        <span className="sr-only">Toggle user menu</span>
+                     </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                     <DropdownMenuSeparator />
+                     <DropdownMenuItem>Settings</DropdownMenuItem>
+                     <DropdownMenuItem>Support</DropdownMenuItem>
+                     <DropdownMenuSeparator />
+                     <DropdownMenuItem>Logout</DropdownMenuItem>
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </div>
+         </header>
+         <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
+            <div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+               <Card x-chunk="A card showing the total revenue in USD and the percentage difference from last month.">
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                     <CardTitle className="text-sm font-medium">
+                        Total Revenue
+                     </CardTitle>
+                     <DollarSign className="h-4 w-4 text-muted-foreground" />
+                  </CardHeader>
+                  <CardContent>
+                     <div className="text-2xl font-bold">$45,231.89</div>
+                     <p className="text-xs text-muted-foreground">
+                        +20.1% from last month
+                     </p>
+                  </CardContent>
+               </Card>
+               <Card x-chunk="A card showing the total subscriptions and the percentage difference from last month.">
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                     <CardTitle className="text-sm font-medium">
+                        Subscriptions
+                     </CardTitle>
+                     <Users className="h-4 w-4 text-muted-foreground" />
+                  </CardHeader>
+                  <CardContent>
+                     <div className="text-2xl font-bold">+2350</div>
+                     <p className="text-xs text-muted-foreground">
+                        +180.1% from last month
+                     </p>
+                  </CardContent>
+               </Card>
+               <Card x-chunk="A card showing the total sales and the percentage difference from last month.">
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                     <CardTitle className="text-sm font-medium">
+                        Sales
+                     </CardTitle>
+                     <CreditCard className="h-4 w-4 text-muted-foreground" />
+                  </CardHeader>
+                  <CardContent>
+                     <div className="text-2xl font-bold">+12,234</div>
+                     <p className="text-xs text-muted-foreground">
+                        +19% from last month
+                     </p>
+                  </CardContent>
+               </Card>
+               <Card x-chunk="A card showing the total active users and the percentage difference from last hour.">
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                     <CardTitle className="text-sm font-medium">
+                        Active Now
+                     </CardTitle>
+                     <Activity className="h-4 w-4 text-muted-foreground" />
+                  </CardHeader>
+                  <CardContent>
+                     <div className="text-2xl font-bold">+573</div>
+                     <p className="text-xs text-muted-foreground">
+                        +201 since last hour
+                     </p>
+                  </CardContent>
+               </Card>
+            </div>
+            <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
+               <Card
+                  className="xl:col-span-2"
+                  x-chunk="A card showing a table of recent transactions with a link to view all transactions."
+               >
+                  <CardHeader className="flex flex-row items-center">
+                     <div className="grid gap-2">
+                        <CardTitle>Transactions</CardTitle>
+                        <CardDescription>
+                           Recent transactions from your store.
+                        </CardDescription>
+                     </div>
+                     <Button asChild size="sm" className="ml-auto gap-1">
+                        <Link href="#">
+                           View All
+                           <ArrowUpRight className="h-4 w-4" />
+                        </Link>
+                     </Button>
+                  </CardHeader>
+                  <CardContent>
+                     <Table>
+                        <TableHeader>
+                           <TableRow>
+                              <TableHead>Customer</TableHead>
+                              <TableHead className="hidden xl:table-column">
+                                 Type
+                              </TableHead>
+                              <TableHead className="hidden xl:table-column">
+                                 Status
+                              </TableHead>
+                              <TableHead className="hidden xl:table-column">
+                                 Date
+                              </TableHead>
+                              <TableHead className="text-right">
+                                 Amount
+                              </TableHead>
+                           </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                           <TableRow>
+                              <TableCell>
+                                 <div className="font-medium">Liam Johnson</div>
+                                 <div className="hidden text-sm text-muted-foreground md:inline">
+                                    liam@example.com
+                                 </div>
+                              </TableCell>
+                              <TableCell className="hidden xl:table-column">
+                                 Sale
+                              </TableCell>
+                              <TableCell className="hidden xl:table-column">
+                                 <Badge className="text-xs" variant="outline">
+                                    Approved
+                                 </Badge>
+                              </TableCell>
+                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
+                                 2023-06-23
+                              </TableCell>
+                              <TableCell className="text-right">
+                                 $250.00
+                              </TableCell>
+                           </TableRow>
+                           <TableRow>
+                              <TableCell>
+                                 <div className="font-medium">Olivia Smith</div>
+                                 <div className="hidden text-sm text-muted-foreground md:inline">
+                                    olivia@example.com
+                                 </div>
+                              </TableCell>
+                              <TableCell className="hidden xl:table-column">
+                                 Refund
+                              </TableCell>
+                              <TableCell className="hidden xl:table-column">
+                                 <Badge className="text-xs" variant="outline">
+                                    Declined
+                                 </Badge>
+                              </TableCell>
+                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
+                                 2023-06-24
+                              </TableCell>
+                              <TableCell className="text-right">
+                                 $150.00
+                              </TableCell>
+                           </TableRow>
+                           <TableRow>
+                              <TableCell>
+                                 <div className="font-medium">
+                                    Noah Williams
+                                 </div>
+                                 <div className="hidden text-sm text-muted-foreground md:inline">
+                                    noah@example.com
+                                 </div>
+                              </TableCell>
+                              <TableCell className="hidden xl:table-column">
+                                 Subscription
+                              </TableCell>
+                              <TableCell className="hidden xl:table-column">
+                                 <Badge className="text-xs" variant="outline">
+                                    Approved
+                                 </Badge>
+                              </TableCell>
+                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
+                                 2023-06-25
+                              </TableCell>
+                              <TableCell className="text-right">
+                                 $350.00
+                              </TableCell>
+                           </TableRow>
+                           <TableRow>
+                              <TableCell>
+                                 <div className="font-medium">Emma Brown</div>
+                                 <div className="hidden text-sm text-muted-foreground md:inline">
+                                    emma@example.com
+                                 </div>
+                              </TableCell>
+                              <TableCell className="hidden xl:table-column">
+                                 Sale
+                              </TableCell>
+                              <TableCell className="hidden xl:table-column">
+                                 <Badge className="text-xs" variant="outline">
+                                    Approved
+                                 </Badge>
+                              </TableCell>
+                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
+                                 2023-06-26
+                              </TableCell>
+                              <TableCell className="text-right">
+                                 $450.00
+                              </TableCell>
+                           </TableRow>
+                           <TableRow>
+                              <TableCell>
+                                 <div className="font-medium">Liam Johnson</div>
+                                 <div className="hidden text-sm text-muted-foreground md:inline">
+                                    liam@example.com
+                                 </div>
+                              </TableCell>
+                              <TableCell className="hidden xl:table-column">
+                                 Sale
+                              </TableCell>
+                              <TableCell className="hidden xl:table-column">
+                                 <Badge className="text-xs" variant="outline">
+                                    Approved
+                                 </Badge>
+                              </TableCell>
+                              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
+                                 2023-06-27
+                              </TableCell>
+                              <TableCell className="text-right">
+                                 $550.00
+                              </TableCell>
+                           </TableRow>
+                        </TableBody>
+                     </Table>
+                  </CardContent>
+               </Card>
+               <Card x-chunk="A card showing a list of recent sales with customer names and email addresses.">
+                  <CardHeader>
+                     <CardTitle>Recent Sales</CardTitle>
+                  </CardHeader>
+                  <CardContent className="grid gap-8">
+                     <div className="flex items-center gap-4">
+                        <Avatar className="hidden h-9 w-9 sm:flex">
+                           <AvatarImage src="/avatars/01.png" alt="Avatar" />
+                           <AvatarFallback>OM</AvatarFallback>
+                        </Avatar>
+                        <div className="grid gap-1">
+                           <p className="text-sm font-medium leading-none">
+                              Olivia Martin
+                           </p>
+                           <p className="text-sm text-muted-foreground">
+                              olivia.martin@email.com
+                           </p>
+                        </div>
+                        <div className="ml-auto font-medium">+$1,999.00</div>
+                     </div>
+                     <div className="flex items-center gap-4">
+                        <Avatar className="hidden h-9 w-9 sm:flex">
+                           <AvatarImage src="/avatars/02.png" alt="Avatar" />
+                           <AvatarFallback>JL</AvatarFallback>
+                        </Avatar>
+                        <div className="grid gap-1">
+                           <p className="text-sm font-medium leading-none">
+                              Jackson Lee
+                           </p>
+                           <p className="text-sm text-muted-foreground">
+                              jackson.lee@email.com
+                           </p>
+                        </div>
+                        <div className="ml-auto font-medium">+$39.00</div>
+                     </div>
+                     <div className="flex items-center gap-4">
+                        <Avatar className="hidden h-9 w-9 sm:flex">
+                           <AvatarImage src="/avatars/03.png" alt="Avatar" />
+                           <AvatarFallback>IN</AvatarFallback>
+                        </Avatar>
+                        <div className="grid gap-1">
+                           <p className="text-sm font-medium leading-none">
+                              Isabella Nguyen
+                           </p>
+                           <p className="text-sm text-muted-foreground">
+                              isabella.nguyen@email.com
+                           </p>
+                        </div>
+                        <div className="ml-auto font-medium">+$299.00</div>
+                     </div>
+                     <div className="flex items-center gap-4">
+                        <Avatar className="hidden h-9 w-9 sm:flex">
+                           <AvatarImage src="/avatars/04.png" alt="Avatar" />
+                           <AvatarFallback>WK</AvatarFallback>
+                        </Avatar>
+                        <div className="grid gap-1">
+                           <p className="text-sm font-medium leading-none">
+                              William Kim
+                           </p>
+                           <p className="text-sm text-muted-foreground">
+                              will@email.com
+                           </p>
+                        </div>
+                        <div className="ml-auto font-medium">+$99.00</div>
+                     </div>
+                     <div className="flex items-center gap-4">
+                        <Avatar className="hidden h-9 w-9 sm:flex">
+                           <AvatarImage src="/avatars/05.png" alt="Avatar" />
+                           <AvatarFallback>SD</AvatarFallback>
+                        </Avatar>
+                        <div className="grid gap-1">
+                           <p className="text-sm font-medium leading-none">
+                              Sofia Davis
+                           </p>
+                           <p className="text-sm text-muted-foreground">
+                              sofia.davis@email.com
+                           </p>
+                        </div>
+                        <div className="ml-auto font-medium">+$39.00</div>
+                     </div>
+                  </CardContent>
+               </Card>
+            </div>
+         </main>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/dashboard-02.tsx b/apps/web/registry/miami/internal/dashboard-02.tsx
new file mode 100644
index 00000000..ca457be2
--- /dev/null
+++ b/apps/web/registry/miami/internal/dashboard-02.tsx
@@ -0,0 +1,260 @@
+import {
+   Bell,
+   CircleUser,
+   Home,
+   LineChart,
+   Menu,
+   Package,
+   Package2,
+   Search,
+   ShoppingCart,
+   Users,
+} from "lucide-react"
+import Link from "next/link"
+
+import { Badge } from "~/registry/miami/ui/badge"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
+
+export const description =
+   "A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action."
+
+export const iframeHeight = "800px"
+
+export const containerClassName = "w-full h-full"
+
+export default function Dashboard() {
+   return (
+      <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
+         <div className="hidden border-r bg-muted/40 md:block">
+            <div className="flex h-full max-h-screen flex-col gap-2">
+               <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+                  <Link
+                     href="/"
+                     className="flex items-center gap-2 font-semibold"
+                  >
+                     <Package2 className="h-6 w-6" />
+                     <span className="">Acme Inc</span>
+                  </Link>
+                  <Button
+                     variant="outline"
+                     size="icon"
+                     className="ml-auto h-8 w-8"
+                  >
+                     <Bell className="h-4 w-4" />
+                     <span className="sr-only">Toggle notifications</span>
+                  </Button>
+               </div>
+               <div className="flex-1">
+                  <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
+                     <Link
+                        href="#"
+                        className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+                     >
+                        <Home className="h-4 w-4" />
+                        Dashboard
+                     </Link>
+                     <Link
+                        href="#"
+                        className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+                     >
+                        <ShoppingCart className="h-4 w-4" />
+                        Orders
+                        <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                           6
+                        </Badge>
+                     </Link>
+                     <Link
+                        href="#"
+                        className="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
+                     >
+                        <Package className="h-4 w-4" />
+                        Products{" "}
+                     </Link>
+                     <Link
+                        href="#"
+                        className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+                     >
+                        <Users className="h-4 w-4" />
+                        Customers
+                     </Link>
+                     <Link
+                        href="#"
+                        className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+                     >
+                        <LineChart className="h-4 w-4" />
+                        Analytics
+                     </Link>
+                  </nav>
+               </div>
+               <div className="mt-auto p-4">
+                  <Card x-chunk="A card with a call to action">
+                     <CardHeader className="p-2 pt-0 md:p-4">
+                        <CardTitle>Upgrade to Pro</CardTitle>
+                        <CardDescription>
+                           Unlock all features and get unlimited access to our
+                           support team.
+                        </CardDescription>
+                     </CardHeader>
+                     <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
+                        <Button size="sm" className="w-full">
+                           Upgrade
+                        </Button>
+                     </CardContent>
+                  </Card>
+               </div>
+            </div>
+         </div>
+         <div className="flex flex-col">
+            <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+               <Sheet>
+                  <SheetTrigger asChild>
+                     <Button
+                        variant="outline"
+                        size="icon"
+                        className="shrink-0 md:hidden"
+                     >
+                        <Menu className="h-5 w-5" />
+                        <span className="sr-only">Toggle navigation menu</span>
+                     </Button>
+                  </SheetTrigger>
+                  <SheetContent side="left" className="flex flex-col">
+                     <nav className="grid gap-2 text-lg font-medium">
+                        <Link
+                           href="#"
+                           className="flex items-center gap-2 text-lg font-semibold"
+                        >
+                           <Package2 className="h-6 w-6" />
+                           <span className="sr-only">Acme Inc</span>
+                        </Link>
+                        <Link
+                           href="#"
+                           className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                        >
+                           <Home className="h-5 w-5" />
+                           Dashboard
+                        </Link>
+                        <Link
+                           href="#"
+                           className="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
+                        >
+                           <ShoppingCart className="h-5 w-5" />
+                           Orders
+                           <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                              6
+                           </Badge>
+                        </Link>
+                        <Link
+                           href="#"
+                           className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                        >
+                           <Package className="h-5 w-5" />
+                           Products
+                        </Link>
+                        <Link
+                           href="#"
+                           className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                        >
+                           <Users className="h-5 w-5" />
+                           Customers
+                        </Link>
+                        <Link
+                           href="#"
+                           className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                        >
+                           <LineChart className="h-5 w-5" />
+                           Analytics
+                        </Link>
+                     </nav>
+                     <div className="mt-auto">
+                        <Card>
+                           <CardHeader>
+                              <CardTitle>Upgrade to Pro</CardTitle>
+                              <CardDescription>
+                                 Unlock all features and get unlimited access to
+                                 our support team.
+                              </CardDescription>
+                           </CardHeader>
+                           <CardContent>
+                              <Button size="sm" className="w-full">
+                                 Upgrade
+                              </Button>
+                           </CardContent>
+                        </Card>
+                     </div>
+                  </SheetContent>
+               </Sheet>
+               <div className="w-full flex-1">
+                  <form>
+                     <div className="relative">
+                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                        <Input
+                           type="search"
+                           placeholder="Search products..."
+                           className="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
+                        />
+                     </div>
+                  </form>
+               </div>
+               <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                     <Button
+                        variant="secondary"
+                        size="icon"
+                        className="rounded-full"
+                     >
+                        <CircleUser className="h-5 w-5" />
+                        <span className="sr-only">Toggle user menu</span>
+                     </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                     <DropdownMenuSeparator />
+                     <DropdownMenuItem>Settings</DropdownMenuItem>
+                     <DropdownMenuItem>Support</DropdownMenuItem>
+                     <DropdownMenuSeparator />
+                     <DropdownMenuItem>Logout</DropdownMenuItem>
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </header>
+            <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+               <div className="flex items-center">
+                  <h1 className="text-lg font-semibold md:text-2xl">
+                     Inventory
+                  </h1>
+               </div>
+               <div
+                  x-chunk="An empty state showing no products with a heading, description and a call to action to add a product."
+                  className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
+               >
+                  <div className="flex flex-col items-center gap-1 text-center">
+                     <h3 className="text-2xl font-bold tracking-tight">
+                        You have no products
+                     </h3>
+                     <p className="text-sm text-muted-foreground">
+                        You can start selling as soon as you add a product.
+                     </p>
+                     <Button className="mt-4">Add Product</Button>
+                  </div>
+               </div>
+            </main>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/dashboard-03.tsx b/apps/web/registry/miami/internal/dashboard-03.tsx
new file mode 100644
index 00000000..adc803dd
--- /dev/null
+++ b/apps/web/registry/miami/internal/dashboard-03.tsx
@@ -0,0 +1,528 @@
+import {
+   Bird,
+   Book,
+   Bot,
+   Code2,
+   CornerDownLeft,
+   LifeBuoy,
+   Mic,
+   Paperclip,
+   Rabbit,
+   Settings,
+   Settings2,
+   Share,
+   SquareTerminal,
+   SquareUser,
+   Triangle,
+   Turtle,
+} from "lucide-react"
+
+import { Badge } from "~/registry/miami/ui/badge"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Drawer,
+   DrawerContent,
+   DrawerDescription,
+   DrawerHeader,
+   DrawerTitle,
+   DrawerTrigger,
+} from "~/registry/miami/ui/drawer"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+import { Textarea } from "~/registry/miami/ui/textarea"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipTrigger,
+} from "~/registry/miami/ui/tooltip"
+
+export const description =
+   "An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages."
+
+export const iframeHeight = "720px"
+
+export const containerClassName = "w-full h-full"
+
+export default function Dashboard() {
+   return (
+      <div className="grid h-screen w-full pl-[53px]">
+         <aside className="inset-y fixed  left-0 z-20 flex h-full flex-col border-r">
+            <div className="border-b p-2">
+               <Button variant="outline" size="icon" aria-label="Home">
+                  <Triangle className="size-5 fill-foreground" />
+               </Button>
+            </div>
+            <nav className="grid gap-1 p-2">
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Button
+                        variant="ghost"
+                        size="icon"
+                        className="rounded-lg bg-muted"
+                        aria-label="Playground"
+                     >
+                        <SquareTerminal className="size-5" />
+                     </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={5}>
+                     Playground
+                  </TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Button
+                        variant="ghost"
+                        size="icon"
+                        className="rounded-lg"
+                        aria-label="Models"
+                     >
+                        <Bot className="size-5" />
+                     </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={5}>
+                     Models
+                  </TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Button
+                        variant="ghost"
+                        size="icon"
+                        className="rounded-lg"
+                        aria-label="API"
+                     >
+                        <Code2 className="size-5" />
+                     </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={5}>
+                     API
+                  </TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Button
+                        variant="ghost"
+                        size="icon"
+                        className="rounded-lg"
+                        aria-label="Documentation"
+                     >
+                        <Book className="size-5" />
+                     </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={5}>
+                     Documentation
+                  </TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Button
+                        variant="ghost"
+                        size="icon"
+                        className="rounded-lg"
+                        aria-label="Settings"
+                     >
+                        <Settings2 className="size-5" />
+                     </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={5}>
+                     Settings
+                  </TooltipContent>
+               </Tooltip>
+            </nav>
+            <nav className="mt-auto grid gap-1 p-2">
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Button
+                        variant="ghost"
+                        size="icon"
+                        className="mt-auto rounded-lg"
+                        aria-label="Help"
+                     >
+                        <LifeBuoy className="size-5" />
+                     </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={5}>
+                     Help
+                  </TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Button
+                        variant="ghost"
+                        size="icon"
+                        className="mt-auto rounded-lg"
+                        aria-label="Account"
+                     >
+                        <SquareUser className="size-5" />
+                     </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={5}>
+                     Account
+                  </TooltipContent>
+               </Tooltip>
+            </nav>
+         </aside>
+         <div className="flex flex-col">
+            <header className="sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4">
+               <h1 className="text-xl font-semibold">Playground</h1>
+               <Drawer>
+                  <DrawerTrigger asChild>
+                     <Button variant="ghost" size="icon" className="md:hidden">
+                        <Settings className="size-4" />
+                        <span className="sr-only">Settings</span>
+                     </Button>
+                  </DrawerTrigger>
+                  <DrawerContent className="max-h-[80vh]">
+                     <DrawerHeader>
+                        <DrawerTitle>Configuration</DrawerTitle>
+                        <DrawerDescription>
+                           Configure the settings for the model and messages.
+                        </DrawerDescription>
+                     </DrawerHeader>
+                     <form className="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
+                        <fieldset className="grid gap-6 rounded-lg border p-4">
+                           <legend className="-ml-1 px-1 text-sm font-medium">
+                              Settings
+                           </legend>
+                           <div className="grid gap-3">
+                              <Label htmlFor="model">Model</Label>
+                              <Select>
+                                 <SelectTrigger
+                                    id="model"
+                                    className="items-start [&_[data-description]]:hidden"
+                                 >
+                                    <SelectValue placeholder="Select a model" />
+                                 </SelectTrigger>
+                                 <SelectContent>
+                                    <SelectItem value="genesis">
+                                       <div className="flex items-start gap-3 text-muted-foreground">
+                                          <Rabbit className="size-5" />
+                                          <div className="grid gap-0.5">
+                                             <p>
+                                                Neural{" "}
+                                                <span className="font-medium text-foreground">
+                                                   Genesis
+                                                </span>
+                                             </p>
+                                             <p
+                                                className="text-xs"
+                                                data-description
+                                             >
+                                                Our fastest model for general
+                                                use cases.
+                                             </p>
+                                          </div>
+                                       </div>
+                                    </SelectItem>
+                                    <SelectItem value="explorer">
+                                       <div className="flex items-start gap-3 text-muted-foreground">
+                                          <Bird className="size-5" />
+                                          <div className="grid gap-0.5">
+                                             <p>
+                                                Neural{" "}
+                                                <span className="font-medium text-foreground">
+                                                   Explorer
+                                                </span>
+                                             </p>
+                                             <p
+                                                className="text-xs"
+                                                data-description
+                                             >
+                                                Performance and speed for
+                                                efficiency.
+                                             </p>
+                                          </div>
+                                       </div>
+                                    </SelectItem>
+                                    <SelectItem value="quantum">
+                                       <div className="flex items-start gap-3 text-muted-foreground">
+                                          <Turtle className="size-5" />
+                                          <div className="grid gap-0.5">
+                                             <p>
+                                                Neural{" "}
+                                                <span className="font-medium text-foreground">
+                                                   Quantum
+                                                </span>
+                                             </p>
+                                             <p
+                                                className="text-xs"
+                                                data-description
+                                             >
+                                                The most powerful model for
+                                                complex computations.
+                                             </p>
+                                          </div>
+                                       </div>
+                                    </SelectItem>
+                                 </SelectContent>
+                              </Select>
+                           </div>
+                           <div className="grid gap-3">
+                              <Label htmlFor="temperature">Temperature</Label>
+                              <Input
+                                 id="temperature"
+                                 type="number"
+                                 placeholder="0.4"
+                              />
+                           </div>
+                           <div className="grid gap-3">
+                              <Label htmlFor="top-p">Top P</Label>
+                              <Input
+                                 id="top-p"
+                                 type="number"
+                                 placeholder="0.7"
+                              />
+                           </div>
+                           <div className="grid gap-3">
+                              <Label htmlFor="top-k">Top K</Label>
+                              <Input
+                                 id="top-k"
+                                 type="number"
+                                 placeholder="0.0"
+                              />
+                           </div>
+                        </fieldset>
+                        <fieldset className="grid gap-6 rounded-lg border p-4">
+                           <legend className="-ml-1 px-1 text-sm font-medium">
+                              Messages
+                           </legend>
+                           <div className="grid gap-3">
+                              <Label htmlFor="role">Role</Label>
+                              <Select defaultValue="system">
+                                 <SelectTrigger>
+                                    <SelectValue placeholder="Select a role" />
+                                 </SelectTrigger>
+                                 <SelectContent>
+                                    <SelectItem value="system">
+                                       System
+                                    </SelectItem>
+                                    <SelectItem value="user">User</SelectItem>
+                                    <SelectItem value="assistant">
+                                       Assistant
+                                    </SelectItem>
+                                 </SelectContent>
+                              </Select>
+                           </div>
+                           <div className="grid gap-3">
+                              <Label htmlFor="content">Content</Label>
+                              <Textarea
+                                 id="content"
+                                 placeholder="You are a..."
+                              />
+                           </div>
+                        </fieldset>
+                     </form>
+                  </DrawerContent>
+               </Drawer>
+               <Button
+                  variant="outline"
+                  size="sm"
+                  className="ml-auto gap-1.5 text-sm"
+               >
+                  <Share className="size-3.5" />
+                  Share
+               </Button>
+            </header>
+            <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
+               <div
+                  className="relative hidden flex-col items-start gap-8 md:flex"
+                  x-chunk="A settings form a configuring an AI model and messages."
+               >
+                  <form className="grid w-full items-start gap-6">
+                     <fieldset className="grid gap-6 rounded-lg border p-4">
+                        <legend className="-ml-1 px-1 text-sm font-medium">
+                           Settings
+                        </legend>
+                        <div className="grid gap-3">
+                           <Label htmlFor="model">Model</Label>
+                           <Select>
+                              <SelectTrigger
+                                 id="model"
+                                 className="items-start [&_[data-description]]:hidden"
+                              >
+                                 <SelectValue placeholder="Select a model" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                 <SelectItem value="genesis">
+                                    <div className="flex items-start gap-3 text-muted-foreground">
+                                       <Rabbit className="size-5" />
+                                       <div className="grid gap-0.5">
+                                          <p>
+                                             Neural{" "}
+                                             <span className="font-medium text-foreground">
+                                                Genesis
+                                             </span>
+                                          </p>
+                                          <p
+                                             className="text-xs"
+                                             data-description
+                                          >
+                                             Our fastest model for general use
+                                             cases.
+                                          </p>
+                                       </div>
+                                    </div>
+                                 </SelectItem>
+                                 <SelectItem value="explorer">
+                                    <div className="flex items-start gap-3 text-muted-foreground">
+                                       <Bird className="size-5" />
+                                       <div className="grid gap-0.5">
+                                          <p>
+                                             Neural{" "}
+                                             <span className="font-medium text-foreground">
+                                                Explorer
+                                             </span>
+                                          </p>
+                                          <p
+                                             className="text-xs"
+                                             data-description
+                                          >
+                                             Performance and speed for
+                                             efficiency.
+                                          </p>
+                                       </div>
+                                    </div>
+                                 </SelectItem>
+                                 <SelectItem value="quantum">
+                                    <div className="flex items-start gap-3 text-muted-foreground">
+                                       <Turtle className="size-5" />
+                                       <div className="grid gap-0.5">
+                                          <p>
+                                             Neural{" "}
+                                             <span className="font-medium text-foreground">
+                                                Quantum
+                                             </span>
+                                          </p>
+                                          <p
+                                             className="text-xs"
+                                             data-description
+                                          >
+                                             The most powerful model for complex
+                                             computations.
+                                          </p>
+                                       </div>
+                                    </div>
+                                 </SelectItem>
+                              </SelectContent>
+                           </Select>
+                        </div>
+                        <div className="grid gap-3">
+                           <Label htmlFor="temperature">Temperature</Label>
+                           <Input
+                              id="temperature"
+                              type="number"
+                              placeholder="0.4"
+                           />
+                        </div>
+                        <div className="grid grid-cols-2 gap-4">
+                           <div className="grid gap-3">
+                              <Label htmlFor="top-p">Top P</Label>
+                              <Input
+                                 id="top-p"
+                                 type="number"
+                                 placeholder="0.7"
+                              />
+                           </div>
+                           <div className="grid gap-3">
+                              <Label htmlFor="top-k">Top K</Label>
+                              <Input
+                                 id="top-k"
+                                 type="number"
+                                 placeholder="0.0"
+                              />
+                           </div>
+                        </div>
+                     </fieldset>
+                     <fieldset className="grid gap-6 rounded-lg border p-4">
+                        <legend className="-ml-1 px-1 text-sm font-medium">
+                           Messages
+                        </legend>
+                        <div className="grid gap-3">
+                           <Label htmlFor="role">Role</Label>
+                           <Select defaultValue="system">
+                              <SelectTrigger>
+                                 <SelectValue placeholder="Select a role" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                 <SelectItem value="system">System</SelectItem>
+                                 <SelectItem value="user">User</SelectItem>
+                                 <SelectItem value="assistant">
+                                    Assistant
+                                 </SelectItem>
+                              </SelectContent>
+                           </Select>
+                        </div>
+                        <div className="grid gap-3">
+                           <Label htmlFor="content">Content</Label>
+                           <Textarea
+                              id="content"
+                              placeholder="You are a..."
+                              className="min-h-[9.5rem]"
+                           />
+                        </div>
+                     </fieldset>
+                  </form>
+               </div>
+               <div className="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
+                  <Badge variant="outline" className="absolute right-3 top-3">
+                     Output
+                  </Badge>
+                  <div className="flex-1" />
+                  <form
+                     className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
+                     x-chunk="A form for sending a message to an AI chatbot. The form has a textarea and buttons to upload files and record audio."
+                  >
+                     <Label htmlFor="message" className="sr-only">
+                        Message
+                     </Label>
+                     <Textarea
+                        id="message"
+                        placeholder="Type your message here..."
+                        className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
+                     />
+                     <div className="flex items-center p-3 pt-0">
+                        <Tooltip>
+                           <TooltipTrigger asChild>
+                              <Button variant="ghost" size="icon">
+                                 <Paperclip className="size-4" />
+                                 <span className="sr-only">Attach file</span>
+                              </Button>
+                           </TooltipTrigger>
+                           <TooltipContent side="top">
+                              Attach File
+                           </TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                           <TooltipTrigger asChild>
+                              <Button variant="ghost" size="icon">
+                                 <Mic className="size-4" />
+                                 <span className="sr-only">Use Microphone</span>
+                              </Button>
+                           </TooltipTrigger>
+                           <TooltipContent side="top">
+                              Use Microphone
+                           </TooltipContent>
+                        </Tooltip>
+                        <Button
+                           type="submit"
+                           size="sm"
+                           className="ml-auto gap-1.5"
+                        >
+                           Send Message
+                           <CornerDownLeft className="size-3.5" />
+                        </Button>
+                     </div>
+                  </form>
+               </div>
+            </main>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/dashboard-04.tsx b/apps/web/registry/miami/internal/dashboard-04.tsx
new file mode 100644
index 00000000..e70b8008
--- /dev/null
+++ b/apps/web/registry/miami/internal/dashboard-04.tsx
@@ -0,0 +1,228 @@
+import { CircleUser, Menu, Package2, Search } from "lucide-react"
+import Link from "next/link"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
+
+export const description =
+   "A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings."
+
+export const iframeHeight = "780px"
+
+export const containerClassName = "w-full h-full"
+
+export default function Dashboard() {
+   return (
+      <div className="flex min-h-screen w-full flex-col">
+         <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
+            <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
+               <Link
+                  href="#"
+                  className="flex items-center gap-2 text-lg font-semibold md:text-base"
+               >
+                  <Package2 className="h-6 w-6" />
+                  <span className="sr-only">Acme Inc</span>
+               </Link>
+               <Link
+                  href="#"
+                  className="text-muted-foreground transition-colors hover:text-foreground"
+               >
+                  Dashboard
+               </Link>
+               <Link
+                  href="#"
+                  className="text-muted-foreground transition-colors hover:text-foreground"
+               >
+                  Orders
+               </Link>
+               <Link
+                  href="#"
+                  className="text-muted-foreground transition-colors hover:text-foreground"
+               >
+                  Products
+               </Link>
+               <Link
+                  href="#"
+                  className="text-muted-foreground transition-colors hover:text-foreground"
+               >
+                  Customers
+               </Link>
+               <Link
+                  href="#"
+                  className="text-foreground transition-colors hover:text-foreground"
+               >
+                  Settings
+               </Link>
+            </nav>
+            <Sheet>
+               <SheetTrigger asChild>
+                  <Button
+                     variant="outline"
+                     size="icon"
+                     className="shrink-0 md:hidden"
+                  >
+                     <Menu className="h-5 w-5" />
+                     <span className="sr-only">Toggle navigation menu</span>
+                  </Button>
+               </SheetTrigger>
+               <SheetContent side="left">
+                  <nav className="grid gap-6 text-lg font-medium">
+                     <Link
+                        href="#"
+                        className="flex items-center gap-2 text-lg font-semibold"
+                     >
+                        <Package2 className="h-6 w-6" />
+                        <span className="sr-only">Acme Inc</span>
+                     </Link>
+                     <Link
+                        href="#"
+                        className="text-muted-foreground hover:text-foreground"
+                     >
+                        Dashboard
+                     </Link>
+                     <Link
+                        href="#"
+                        className="text-muted-foreground hover:text-foreground"
+                     >
+                        Orders
+                     </Link>
+                     <Link
+                        href="#"
+                        className="text-muted-foreground hover:text-foreground"
+                     >
+                        Products
+                     </Link>
+                     <Link
+                        href="#"
+                        className="text-muted-foreground hover:text-foreground"
+                     >
+                        Customers
+                     </Link>
+                     <Link href="#" className="hover:text-foreground">
+                        Settings
+                     </Link>
+                  </nav>
+               </SheetContent>
+            </Sheet>
+            <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
+               <form className="ml-auto flex-1 sm:flex-initial">
+                  <div className="relative">
+                     <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                     <Input
+                        type="search"
+                        placeholder="Search products..."
+                        className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
+                     />
+                  </div>
+               </form>
+               <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                     <Button
+                        variant="secondary"
+                        size="icon"
+                        className="rounded-full"
+                     >
+                        <CircleUser className="h-5 w-5" />
+                        <span className="sr-only">Toggle user menu</span>
+                     </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                     <DropdownMenuSeparator />
+                     <DropdownMenuItem>Settings</DropdownMenuItem>
+                     <DropdownMenuItem>Support</DropdownMenuItem>
+                     <DropdownMenuSeparator />
+                     <DropdownMenuItem>Logout</DropdownMenuItem>
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </div>
+         </header>
+         <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
+            <div className="mx-auto grid w-full max-w-6xl gap-2">
+               <h1 className="text-3xl font-semibold">Settings</h1>
+            </div>
+            <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
+               <nav
+                  className="grid gap-4 text-sm text-muted-foreground"
+                  x-chunk="A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings."
+                  x-chunk-container="chunk-container after:right-0"
+               >
+                  <Link href="#" className="font-semibold text-primary">
+                     General
+                  </Link>
+                  <Link href="#">Security</Link>
+                  <Link href="#">Integrations</Link>
+                  <Link href="#">Support</Link>
+                  <Link href="#">Organizations</Link>
+                  <Link href="#">Advanced</Link>
+               </nav>
+               <div className="grid gap-6">
+                  <Card x-chunk="A form to update the store name.">
+                     <CardHeader>
+                        <CardTitle>Store Name</CardTitle>
+                        <CardDescription>
+                           Used to identify your store in the marketplace.
+                        </CardDescription>
+                     </CardHeader>
+                     <CardContent>
+                        <form>
+                           <Input placeholder="Store Name" />
+                        </form>
+                     </CardContent>
+                     <CardFooter className="border-t px-6 py-4">
+                        <Button>Save</Button>
+                     </CardFooter>
+                  </Card>
+                  <Card x-chunk="A form to update the plugins directory with a checkbox to allow administrators to change the directory.">
+                     <CardHeader>
+                        <CardTitle>Plugins Directory</CardTitle>
+                        <CardDescription>
+                           The directory within your project, in which your
+                           plugins are located.
+                        </CardDescription>
+                     </CardHeader>
+                     <CardContent>
+                        <form className="flex flex-col gap-4">
+                           <Input
+                              placeholder="Project Name"
+                              defaultValue="/content/plugins"
+                           />
+                           <div className="flex items-center space-x-2">
+                              <Checkbox id="include" defaultChecked />
+                              <label
+                                 htmlFor="include"
+                                 className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                              >
+                                 Allow administrators to change the directory.
+                              </label>
+                           </div>
+                        </form>
+                     </CardContent>
+                     <CardFooter className="border-t px-6 py-4">
+                        <Button>Save</Button>
+                     </CardFooter>
+                  </Card>
+               </div>
+            </div>
+         </main>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/dashboard-05.tsx b/apps/web/registry/miami/internal/dashboard-05.tsx
new file mode 100644
index 00000000..1b36270d
--- /dev/null
+++ b/apps/web/registry/miami/internal/dashboard-05.tsx
@@ -0,0 +1,831 @@
+import {
+   ChevronLeft,
+   ChevronRight,
+   Copy,
+   CreditCard,
+   File,
+   Home,
+   LineChart,
+   ListFilter,
+   MoreVertical,
+   Package,
+   Package2,
+   PanelLeft,
+   Search,
+   Settings,
+   ShoppingCart,
+   Truck,
+   Users2,
+} from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import * as React from "react"
+
+import { Badge } from "~/registry/miami/ui/badge"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   DropdownMenu,
+   DropdownMenuCheckboxItem,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import {
+   Pagination,
+   PaginationContent,
+   PaginationItem,
+} from "~/registry/miami/ui/pagination"
+import { Progress } from "~/registry/miami/ui/progress"
+import { Separator } from "~/registry/miami/ui/separator"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
+import {
+   Table,
+   TableBody,
+   TableCell,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/miami/ui/table"
+import {
+   Tabs,
+   TabsContent,
+   TabsList,
+   TabsTrigger,
+} from "~/registry/miami/ui/tabs"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipTrigger,
+} from "~/registry/miami/ui/tooltip"
+
+export const description =
+   "An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information."
+
+export const iframeHeight = "906px"
+
+export const containerClassName = "w-full h-full"
+
+export default function Dashboard() {
+   return (
+      <div className="flex min-h-screen w-full flex-col bg-muted/40">
+         <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
+            <nav className="flex flex-col items-center gap-4 px-2 sm:py-4">
+               <Link
+                  href="#"
+                  className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
+               >
+                  <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
+                  <span className="sr-only">Acme Inc</span>
+               </Link>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <Home className="h-5 w-5" />
+                        <span className="sr-only">Dashboard</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Dashboard</TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <ShoppingCart className="h-5 w-5" />
+                        <span className="sr-only">Orders</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Orders</TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <Package className="h-5 w-5" />
+                        <span className="sr-only">Products</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Products</TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <Users2 className="h-5 w-5" />
+                        <span className="sr-only">Customers</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Customers</TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <LineChart className="h-5 w-5" />
+                        <span className="sr-only">Analytics</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Analytics</TooltipContent>
+               </Tooltip>
+            </nav>
+            <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-4">
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <Settings className="h-5 w-5" />
+                        <span className="sr-only">Settings</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Settings</TooltipContent>
+               </Tooltip>
+            </nav>
+         </aside>
+         <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+            <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
+               <Sheet>
+                  <SheetTrigger asChild>
+                     <Button
+                        size="icon"
+                        variant="outline"
+                        className="sm:hidden"
+                     >
+                        <PanelLeft className="h-5 w-5" />
+                        <span className="sr-only">Toggle Menu</span>
+                     </Button>
+                  </SheetTrigger>
+                  <SheetContent side="left" className="sm:max-w-xs">
+                     <nav className="grid gap-6 text-lg font-medium">
+                        <Link
+                           href="#"
+                           className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
+                        >
+                           <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
+                           <span className="sr-only">Acme Inc</span>
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                        >
+                           <Home className="h-5 w-5" />
+                           Dashboard
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-foreground"
+                        >
+                           <ShoppingCart className="h-5 w-5" />
+                           Orders
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                        >
+                           <Package className="h-5 w-5" />
+                           Products
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                        >
+                           <Users2 className="h-5 w-5" />
+                           Customers
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                        >
+                           <LineChart className="h-5 w-5" />
+                           Settings
+                        </Link>
+                     </nav>
+                  </SheetContent>
+               </Sheet>
+               <Breadcrumb className="hidden md:flex">
+                  <BreadcrumbList>
+                     <BreadcrumbItem>
+                        <BreadcrumbLink asChild>
+                           <Link href="#">Dashboard</Link>
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator />
+                     <BreadcrumbItem>
+                        <BreadcrumbLink asChild>
+                           <Link href="#">Orders</Link>
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Recent Orders</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+               <div className="relative ml-auto flex-1 md:grow-0">
+                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                  <Input
+                     type="search"
+                     placeholder="Search..."
+                     className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]"
+                  />
+               </div>
+               <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                     <Button
+                        variant="outline"
+                        size="icon"
+                        className="overflow-hidden rounded-full"
+                     >
+                        <Image
+                           src="/placeholder-user.jpg"
+                           width={36}
+                           height={36}
+                           alt="Avatar"
+                           className="overflow-hidden rounded-full"
+                        />
+                     </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                     <DropdownMenuSeparator />
+                     <DropdownMenuItem>Settings</DropdownMenuItem>
+                     <DropdownMenuItem>Support</DropdownMenuItem>
+                     <DropdownMenuSeparator />
+                     <DropdownMenuItem>Logout</DropdownMenuItem>
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </header>
+            <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
+               <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
+                  <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
+                     <Card
+                        className="sm:col-span-2"
+                        x-chunk="A card for an orders dashboard with a description and a button to create a new order."
+                     >
+                        <CardHeader className="pb-3">
+                           <CardTitle>Your Orders</CardTitle>
+                           <CardDescription className="text-balance max-w-lg leading-relaxed">
+                              Introducing Our Dynamic Orders Dashboard for
+                              Seamless Management and Insightful Analysis.
+                           </CardDescription>
+                        </CardHeader>
+                        <CardFooter>
+                           <Button>Create New Order</Button>
+                        </CardFooter>
+                     </Card>
+                     <Card x-chunk="A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.">
+                        <CardHeader className="pb-2">
+                           <CardDescription>This Week</CardDescription>
+                           <CardTitle className="text-4xl">$1,329</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                           <div className="text-xs text-muted-foreground">
+                              +25% from last week
+                           </div>
+                        </CardContent>
+                        <CardFooter>
+                           <Progress value={25} aria-label="25% increase" />
+                        </CardFooter>
+                     </Card>
+                     <Card x-chunk="A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.">
+                        <CardHeader className="pb-2">
+                           <CardDescription>This Month</CardDescription>
+                           <CardTitle className="text-4xl">$5,329</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                           <div className="text-xs text-muted-foreground">
+                              +10% from last month
+                           </div>
+                        </CardContent>
+                        <CardFooter>
+                           <Progress value={12} aria-label="12% increase" />
+                        </CardFooter>
+                     </Card>
+                  </div>
+                  <Tabs defaultValue="week">
+                     <div className="flex items-center">
+                        <TabsList>
+                           <TabsTrigger value="week">Week</TabsTrigger>
+                           <TabsTrigger value="month">Month</TabsTrigger>
+                           <TabsTrigger value="year">Year</TabsTrigger>
+                        </TabsList>
+                        <div className="ml-auto flex items-center gap-2">
+                           <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                 <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="h-7 gap-1 text-sm"
+                                 >
+                                    <ListFilter className="h-3.5 w-3.5" />
+                                    <span className="sr-only sm:not-sr-only">
+                                       Filter
+                                    </span>
+                                 </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="end">
+                                 <DropdownMenuLabel>
+                                    Filter by
+                                 </DropdownMenuLabel>
+                                 <DropdownMenuSeparator />
+                                 <DropdownMenuCheckboxItem checked>
+                                    Fulfilled
+                                 </DropdownMenuCheckboxItem>
+                                 <DropdownMenuCheckboxItem>
+                                    Declined
+                                 </DropdownMenuCheckboxItem>
+                                 <DropdownMenuCheckboxItem>
+                                    Refunded
+                                 </DropdownMenuCheckboxItem>
+                              </DropdownMenuContent>
+                           </DropdownMenu>
+                           <Button
+                              size="sm"
+                              variant="outline"
+                              className="h-7 gap-1 text-sm"
+                           >
+                              <File className="h-3.5 w-3.5" />
+                              <span className="sr-only sm:not-sr-only">
+                                 Export
+                              </span>
+                           </Button>
+                        </div>
+                     </div>
+                     <TabsContent value="week">
+                        <Card x-chunk="A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.">
+                           <CardHeader className="px-7">
+                              <CardTitle>Orders</CardTitle>
+                              <CardDescription>
+                                 Recent orders from your store.
+                              </CardDescription>
+                           </CardHeader>
+                           <CardContent>
+                              <Table>
+                                 <TableHeader>
+                                    <TableRow>
+                                       <TableHead>Customer</TableHead>
+                                       <TableHead className="hidden sm:table-cell">
+                                          Type
+                                       </TableHead>
+                                       <TableHead className="hidden sm:table-cell">
+                                          Status
+                                       </TableHead>
+                                       <TableHead className="hidden md:table-cell">
+                                          Date
+                                       </TableHead>
+                                       <TableHead className="text-right">
+                                          Amount
+                                       </TableHead>
+                                    </TableRow>
+                                 </TableHeader>
+                                 <TableBody>
+                                    <TableRow className="bg-accent">
+                                       <TableCell>
+                                          <div className="font-medium">
+                                             Liam Johnson
+                                          </div>
+                                          <div className="hidden text-sm text-muted-foreground md:inline">
+                                             liam@example.com
+                                          </div>
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          Sale
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
+                                             Fulfilled
+                                          </Badge>
+                                       </TableCell>
+                                       <TableCell className="hidden md:table-cell">
+                                          2023-06-23
+                                       </TableCell>
+                                       <TableCell className="text-right">
+                                          $250.00
+                                       </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                       <TableCell>
+                                          <div className="font-medium">
+                                             Olivia Smith
+                                          </div>
+                                          <div className="hidden text-sm text-muted-foreground md:inline">
+                                             olivia@example.com
+                                          </div>
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          Refund
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="outline"
+                                          >
+                                             Declined
+                                          </Badge>
+                                       </TableCell>
+                                       <TableCell className="hidden md:table-cell">
+                                          2023-06-24
+                                       </TableCell>
+                                       <TableCell className="text-right">
+                                          $150.00
+                                       </TableCell>
+                                    </TableRow>
+                                    {/* <TableRow>
+                          <TableCell>
+                            <div className="font-medium">Liam Johnson</div>
+                            <div className="hidden text-sm text-muted-foreground md:inline">
+                              liam@example.com
+                            </div>
+                          </TableCell>
+                          <TableCell className="hidden sm:table-cell">
+                            Sale
+                          </TableCell>
+                          <TableCell className="hidden sm:table-cell">
+                            <Badge className="text-xs" variant="secondary">
+                              Fulfilled
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="hidden md:table-cell">
+                            2023-06-23
+                          </TableCell>
+                          <TableCell className="text-right">$250.00</TableCell>
+                        </TableRow> */}
+                                    <TableRow>
+                                       <TableCell>
+                                          <div className="font-medium">
+                                             Noah Williams
+                                          </div>
+                                          <div className="hidden text-sm text-muted-foreground md:inline">
+                                             noah@example.com
+                                          </div>
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          Subscription
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
+                                             Fulfilled
+                                          </Badge>
+                                       </TableCell>
+                                       <TableCell className="hidden md:table-cell">
+                                          2023-06-25
+                                       </TableCell>
+                                       <TableCell className="text-right">
+                                          $350.00
+                                       </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                       <TableCell>
+                                          <div className="font-medium">
+                                             Emma Brown
+                                          </div>
+                                          <div className="hidden text-sm text-muted-foreground md:inline">
+                                             emma@example.com
+                                          </div>
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          Sale
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
+                                             Fulfilled
+                                          </Badge>
+                                       </TableCell>
+                                       <TableCell className="hidden md:table-cell">
+                                          2023-06-26
+                                       </TableCell>
+                                       <TableCell className="text-right">
+                                          $450.00
+                                       </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                       <TableCell>
+                                          <div className="font-medium">
+                                             Liam Johnson
+                                          </div>
+                                          <div className="hidden text-sm text-muted-foreground md:inline">
+                                             liam@example.com
+                                          </div>
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          Sale
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
+                                             Fulfilled
+                                          </Badge>
+                                       </TableCell>
+                                       <TableCell className="hidden md:table-cell">
+                                          2023-06-23
+                                       </TableCell>
+                                       <TableCell className="text-right">
+                                          $250.00
+                                       </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                       <TableCell>
+                                          <div className="font-medium">
+                                             Olivia Smith
+                                          </div>
+                                          <div className="hidden text-sm text-muted-foreground md:inline">
+                                             olivia@example.com
+                                          </div>
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          Refund
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="outline"
+                                          >
+                                             Declined
+                                          </Badge>
+                                       </TableCell>
+                                       <TableCell className="hidden md:table-cell">
+                                          2023-06-24
+                                       </TableCell>
+                                       <TableCell className="text-right">
+                                          $150.00
+                                       </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                       <TableCell>
+                                          <div className="font-medium">
+                                             Emma Brown
+                                          </div>
+                                          <div className="hidden text-sm text-muted-foreground md:inline">
+                                             emma@example.com
+                                          </div>
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          Sale
+                                       </TableCell>
+                                       <TableCell className="hidden sm:table-cell">
+                                          <Badge
+                                             className="text-xs"
+                                             variant="secondary"
+                                          >
+                                             Fulfilled
+                                          </Badge>
+                                       </TableCell>
+                                       <TableCell className="hidden md:table-cell">
+                                          2023-06-26
+                                       </TableCell>
+                                       <TableCell className="text-right">
+                                          $450.00
+                                       </TableCell>
+                                    </TableRow>
+                                 </TableBody>
+                              </Table>
+                           </CardContent>
+                        </Card>
+                     </TabsContent>
+                  </Tabs>
+               </div>
+               <div>
+                  <Card
+                     className="overflow-hidden"
+                     x-chunk="An order details card with order details, shipping information, customer information and payment information."
+                  >
+                     <CardHeader className="flex flex-row items-start bg-muted/50">
+                        <div className="grid gap-0.5">
+                           <CardTitle className="group flex items-center gap-2 text-lg">
+                              Order Oe31b70H
+                              <Button
+                                 size="icon"
+                                 variant="outline"
+                                 className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
+                              >
+                                 <Copy className="h-3 w-3" />
+                                 <span className="sr-only">Copy Order ID</span>
+                              </Button>
+                           </CardTitle>
+                           <CardDescription>
+                              Date: November 23, 2023
+                           </CardDescription>
+                        </div>
+                        <div className="ml-auto flex items-center gap-1">
+                           <Button
+                              size="sm"
+                              variant="outline"
+                              className="h-8 gap-1"
+                           >
+                              <Truck className="h-3.5 w-3.5" />
+                              <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
+                                 Track Order
+                              </span>
+                           </Button>
+                           <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                 <Button
+                                    size="icon"
+                                    variant="outline"
+                                    className="h-8 w-8"
+                                 >
+                                    <MoreVertical className="h-3.5 w-3.5" />
+                                    <span className="sr-only">More</span>
+                                 </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="end">
+                                 <DropdownMenuItem>Edit</DropdownMenuItem>
+                                 <DropdownMenuItem>Export</DropdownMenuItem>
+                                 <DropdownMenuSeparator />
+                                 <DropdownMenuItem>Trash</DropdownMenuItem>
+                              </DropdownMenuContent>
+                           </DropdownMenu>
+                        </div>
+                     </CardHeader>
+                     <CardContent className="p-6 text-sm">
+                        <div className="grid gap-3">
+                           <div className="font-semibold">Order Details</div>
+                           <ul className="grid gap-3">
+                              <li className="flex items-center justify-between">
+                                 <span className="text-muted-foreground">
+                                    Glimmer Lamps x <span>2</span>
+                                 </span>
+                                 <span>$250.00</span>
+                              </li>
+                              <li className="flex items-center justify-between">
+                                 <span className="text-muted-foreground">
+                                    Aqua Filters x <span>1</span>
+                                 </span>
+                                 <span>$49.00</span>
+                              </li>
+                           </ul>
+                           <Separator className="my-2" />
+                           <ul className="grid gap-3">
+                              <li className="flex items-center justify-between">
+                                 <span className="text-muted-foreground">
+                                    Subtotal
+                                 </span>
+                                 <span>$299.00</span>
+                              </li>
+                              <li className="flex items-center justify-between">
+                                 <span className="text-muted-foreground">
+                                    Shipping
+                                 </span>
+                                 <span>$5.00</span>
+                              </li>
+                              <li className="flex items-center justify-between">
+                                 <span className="text-muted-foreground">
+                                    Tax
+                                 </span>
+                                 <span>$25.00</span>
+                              </li>
+                              <li className="flex items-center justify-between font-semibold">
+                                 <span className="text-muted-foreground">
+                                    Total
+                                 </span>
+                                 <span>$329.00</span>
+                              </li>
+                           </ul>
+                        </div>
+                        <Separator className="my-4" />
+                        <div className="grid grid-cols-2 gap-4">
+                           <div className="grid gap-3">
+                              <div className="font-semibold">
+                                 Shipping Information
+                              </div>
+                              <address className="grid gap-0.5 not-italic text-muted-foreground">
+                                 <span>Liam Johnson</span>
+                                 <span>1234 Main St.</span>
+                                 <span>Anytown, CA 12345</span>
+                              </address>
+                           </div>
+                           <div className="grid auto-rows-max gap-3">
+                              <div className="font-semibold">
+                                 Billing Information
+                              </div>
+                              <div className="text-muted-foreground">
+                                 Same as shipping address
+                              </div>
+                           </div>
+                        </div>
+                        <Separator className="my-4" />
+                        <div className="grid gap-3">
+                           <div className="font-semibold">
+                              Customer Information
+                           </div>
+                           <dl className="grid gap-3">
+                              <div className="flex items-center justify-between">
+                                 <dt className="text-muted-foreground">
+                                    Customer
+                                 </dt>
+                                 <dd>Liam Johnson</dd>
+                              </div>
+                              <div className="flex items-center justify-between">
+                                 <dt className="text-muted-foreground">
+                                    Email
+                                 </dt>
+                                 <dd>
+                                    <a href="mailto:">liam@acme.com</a>
+                                 </dd>
+                              </div>
+                              <div className="flex items-center justify-between">
+                                 <dt className="text-muted-foreground">
+                                    Phone
+                                 </dt>
+                                 <dd>
+                                    <a href="tel:">+1 234 567 890</a>
+                                 </dd>
+                              </div>
+                           </dl>
+                        </div>
+                        <Separator className="my-4" />
+                        <div className="grid gap-3">
+                           <div className="font-semibold">
+                              Payment Information
+                           </div>
+                           <dl className="grid gap-3">
+                              <div className="flex items-center justify-between">
+                                 <dt className="flex items-center gap-1 text-muted-foreground">
+                                    <CreditCard className="h-4 w-4" />
+                                    Visa
+                                 </dt>
+                                 <dd>**** **** **** 4532</dd>
+                              </div>
+                           </dl>
+                        </div>
+                     </CardContent>
+                     <CardFooter className="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
+                        <div className="text-xs text-muted-foreground">
+                           Updated{" "}
+                           <time dateTime="2023-11-23">November 23, 2023</time>
+                        </div>
+                        <Pagination className="ml-auto mr-0 w-auto">
+                           <PaginationContent>
+                              <PaginationItem>
+                                 <Button
+                                    size="icon"
+                                    variant="outline"
+                                    className="h-6 w-6"
+                                 >
+                                    <ChevronLeft className="h-3.5 w-3.5" />
+                                    <span className="sr-only">
+                                       Previous Order
+                                    </span>
+                                 </Button>
+                              </PaginationItem>
+                              <PaginationItem>
+                                 <Button
+                                    size="icon"
+                                    variant="outline"
+                                    className="h-6 w-6"
+                                 >
+                                    <ChevronRight className="h-3.5 w-3.5" />
+                                    <span className="sr-only">Next Order</span>
+                                 </Button>
+                              </PaginationItem>
+                           </PaginationContent>
+                        </Pagination>
+                     </CardFooter>
+                  </Card>
+               </div>
+            </main>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/dashboard-06.tsx b/apps/web/registry/miami/internal/dashboard-06.tsx
new file mode 100644
index 00000000..d357a7c8
--- /dev/null
+++ b/apps/web/registry/miami/internal/dashboard-06.tsx
@@ -0,0 +1,689 @@
+import {
+   File,
+   Home,
+   LineChart,
+   ListFilter,
+   MoreHorizontal,
+   Package,
+   Package2,
+   PanelLeft,
+   PlusCircle,
+   Search,
+   Settings,
+   ShoppingCart,
+   Users2,
+} from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+
+import { Badge } from "~/registry/miami/ui/badge"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   DropdownMenu,
+   DropdownMenuCheckboxItem,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
+import {
+   Table,
+   TableBody,
+   TableCell,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/miami/ui/table"
+import {
+   Tabs,
+   TabsContent,
+   TabsList,
+   TabsTrigger,
+} from "~/registry/miami/ui/tabs"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipTrigger,
+} from "~/registry/miami/ui/tooltip"
+
+export const description =
+   "An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions."
+
+export const iframeHeight = "820px"
+
+export const containerClassName = "w-full h-full"
+
+export default function Dashboard() {
+   return (
+      <div className="flex min-h-screen w-full flex-col bg-muted/40">
+         <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
+            <nav className="flex flex-col items-center gap-4 px-2 py-4">
+               <Link
+                  href="#"
+                  className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
+               >
+                  <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
+                  <span className="sr-only">Acme Inc</span>
+               </Link>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <Home className="h-5 w-5" />
+                        <span className="sr-only">Dashboard</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Dashboard</TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <ShoppingCart className="h-5 w-5" />
+                        <span className="sr-only">Orders</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Orders</TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <Package className="h-5 w-5" />
+                        <span className="sr-only">Products</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Products</TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <Users2 className="h-5 w-5" />
+                        <span className="sr-only">Customers</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Customers</TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <LineChart className="h-5 w-5" />
+                        <span className="sr-only">Analytics</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Analytics</TooltipContent>
+               </Tooltip>
+            </nav>
+            <nav className="mt-auto flex flex-col items-center gap-4 px-2 py-4">
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <Settings className="h-5 w-5" />
+                        <span className="sr-only">Settings</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Settings</TooltipContent>
+               </Tooltip>
+            </nav>
+         </aside>
+         <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+            <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
+               <Sheet>
+                  <SheetTrigger asChild>
+                     <Button
+                        size="icon"
+                        variant="outline"
+                        className="sm:hidden"
+                     >
+                        <PanelLeft className="h-5 w-5" />
+                        <span className="sr-only">Toggle Menu</span>
+                     </Button>
+                  </SheetTrigger>
+                  <SheetContent side="left" className="sm:max-w-xs">
+                     <nav className="grid gap-6 text-lg font-medium">
+                        <Link
+                           href="#"
+                           className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
+                        >
+                           <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
+                           <span className="sr-only">Acme Inc</span>
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                        >
+                           <Home className="h-5 w-5" />
+                           Dashboard
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                        >
+                           <ShoppingCart className="h-5 w-5" />
+                           Orders
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-foreground"
+                        >
+                           <Package className="h-5 w-5" />
+                           Products
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                        >
+                           <Users2 className="h-5 w-5" />
+                           Customers
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                        >
+                           <LineChart className="h-5 w-5" />
+                           Settings
+                        </Link>
+                     </nav>
+                  </SheetContent>
+               </Sheet>
+               <Breadcrumb className="hidden md:flex">
+                  <BreadcrumbList>
+                     <BreadcrumbItem>
+                        <BreadcrumbLink asChild>
+                           <Link href="#">Dashboard</Link>
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator />
+                     <BreadcrumbItem>
+                        <BreadcrumbLink asChild>
+                           <Link href="#">Products</Link>
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>All Products</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+               <div className="relative ml-auto flex-1 md:grow-0">
+                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                  <Input
+                     type="search"
+                     placeholder="Search..."
+                     className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]"
+                  />
+               </div>
+               <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                     <Button
+                        variant="outline"
+                        size="icon"
+                        className="overflow-hidden rounded-full"
+                     >
+                        <Image
+                           src="/placeholder-user.jpg"
+                           width={36}
+                           height={36}
+                           alt="Avatar"
+                           className="overflow-hidden rounded-full"
+                        />
+                     </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                     <DropdownMenuSeparator />
+                     <DropdownMenuItem>Settings</DropdownMenuItem>
+                     <DropdownMenuItem>Support</DropdownMenuItem>
+                     <DropdownMenuSeparator />
+                     <DropdownMenuItem>Logout</DropdownMenuItem>
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </header>
+            <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
+               <Tabs defaultValue="all">
+                  <div className="flex items-center">
+                     <TabsList>
+                        <TabsTrigger value="all">All</TabsTrigger>
+                        <TabsTrigger value="active">Active</TabsTrigger>
+                        <TabsTrigger value="draft">Draft</TabsTrigger>
+                        <TabsTrigger
+                           value="archived"
+                           className="hidden sm:flex"
+                        >
+                           Archived
+                        </TabsTrigger>
+                     </TabsList>
+                     <div className="ml-auto flex items-center gap-2">
+                        <DropdownMenu>
+                           <DropdownMenuTrigger asChild>
+                              <Button
+                                 variant="outline"
+                                 size="sm"
+                                 className="h-7 gap-1"
+                              >
+                                 <ListFilter className="h-3.5 w-3.5" />
+                                 <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
+                                    Filter
+                                 </span>
+                              </Button>
+                           </DropdownMenuTrigger>
+                           <DropdownMenuContent align="end">
+                              <DropdownMenuLabel>Filter by</DropdownMenuLabel>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuCheckboxItem checked>
+                                 Active
+                              </DropdownMenuCheckboxItem>
+                              <DropdownMenuCheckboxItem>
+                                 Draft
+                              </DropdownMenuCheckboxItem>
+                              <DropdownMenuCheckboxItem>
+                                 Archived
+                              </DropdownMenuCheckboxItem>
+                           </DropdownMenuContent>
+                        </DropdownMenu>
+                        <Button
+                           size="sm"
+                           variant="outline"
+                           className="h-7 gap-1"
+                        >
+                           <File className="h-3.5 w-3.5" />
+                           <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
+                              Export
+                           </span>
+                        </Button>
+                        <Button size="sm" className="h-7 gap-1">
+                           <PlusCircle className="h-3.5 w-3.5" />
+                           <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
+                              Add Product
+                           </span>
+                        </Button>
+                     </div>
+                  </div>
+                  <TabsContent value="all">
+                     <Card x-chunk="A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.">
+                        <CardHeader>
+                           <CardTitle>Products</CardTitle>
+                           <CardDescription>
+                              Manage your products and view their sales
+                              performance.
+                           </CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                           <Table>
+                              <TableHeader>
+                                 <TableRow>
+                                    <TableHead className="hidden w-[100px] sm:table-cell">
+                                       <span className="sr-only">Image</span>
+                                    </TableHead>
+                                    <TableHead>Name</TableHead>
+                                    <TableHead>Status</TableHead>
+                                    <TableHead>Price</TableHead>
+                                    <TableHead className="hidden md:table-cell">
+                                       Total Sales
+                                    </TableHead>
+                                    <TableHead className="hidden md:table-cell">
+                                       Created at
+                                    </TableHead>
+                                    <TableHead>
+                                       <span className="sr-only">Actions</span>
+                                    </TableHead>
+                                 </TableRow>
+                              </TableHeader>
+                              <TableBody>
+                                 <TableRow>
+                                    <TableCell className="hidden sm:table-cell">
+                                       <Image
+                                          alt="Product image"
+                                          className="aspect-square rounded-md object-cover"
+                                          height="64"
+                                          src="/placeholder.svg"
+                                          width="64"
+                                       />
+                                    </TableCell>
+                                    <TableCell className="font-medium">
+                                       Laser Lemonade Machine
+                                    </TableCell>
+                                    <TableCell>
+                                       <Badge variant="outline">Draft</Badge>
+                                    </TableCell>
+                                    <TableCell>$499.99</TableCell>
+                                    <TableCell className="hidden md:table-cell">
+                                       25
+                                    </TableCell>
+                                    <TableCell className="hidden md:table-cell">
+                                       2023-07-12 10:42 AM
+                                    </TableCell>
+                                    <TableCell>
+                                       <DropdownMenu>
+                                          <DropdownMenuTrigger asChild>
+                                             <Button
+                                                aria-haspopup="true"
+                                                size="icon"
+                                                variant="ghost"
+                                             >
+                                                <MoreHorizontal className="h-4 w-4" />
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
+                                             </Button>
+                                          </DropdownMenuTrigger>
+                                          <DropdownMenuContent align="end">
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
+                                          </DropdownMenuContent>
+                                       </DropdownMenu>
+                                    </TableCell>
+                                 </TableRow>
+                                 <TableRow>
+                                    <TableCell className="hidden sm:table-cell">
+                                       <Image
+                                          alt="Product image"
+                                          className="aspect-square rounded-md object-cover"
+                                          height="64"
+                                          src="/placeholder.svg"
+                                          width="64"
+                                       />
+                                    </TableCell>
+                                    <TableCell className="font-medium">
+                                       Hypernova Headphones
+                                    </TableCell>
+                                    <TableCell>
+                                       <Badge variant="outline">Active</Badge>
+                                    </TableCell>
+                                    <TableCell>$129.99</TableCell>
+                                    <TableCell className="hidden md:table-cell">
+                                       100
+                                    </TableCell>
+                                    <TableCell className="hidden md:table-cell">
+                                       2023-10-18 03:21 PM
+                                    </TableCell>
+                                    <TableCell>
+                                       <DropdownMenu>
+                                          <DropdownMenuTrigger asChild>
+                                             <Button
+                                                aria-haspopup="true"
+                                                size="icon"
+                                                variant="ghost"
+                                             >
+                                                <MoreHorizontal className="h-4 w-4" />
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
+                                             </Button>
+                                          </DropdownMenuTrigger>
+                                          <DropdownMenuContent align="end">
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
+                                          </DropdownMenuContent>
+                                       </DropdownMenu>
+                                    </TableCell>
+                                 </TableRow>
+                                 <TableRow>
+                                    <TableCell className="hidden sm:table-cell">
+                                       <Image
+                                          alt="Product image"
+                                          className="aspect-square rounded-md object-cover"
+                                          height="64"
+                                          src="/placeholder.svg"
+                                          width="64"
+                                       />
+                                    </TableCell>
+                                    <TableCell className="font-medium">
+                                       AeroGlow Desk Lamp
+                                    </TableCell>
+                                    <TableCell>
+                                       <Badge variant="outline">Active</Badge>
+                                    </TableCell>
+                                    <TableCell>$39.99</TableCell>
+                                    <TableCell className="hidden md:table-cell">
+                                       50
+                                    </TableCell>
+                                    <TableCell className="hidden md:table-cell">
+                                       2023-11-29 08:15 AM
+                                    </TableCell>
+                                    <TableCell>
+                                       <DropdownMenu>
+                                          <DropdownMenuTrigger asChild>
+                                             <Button
+                                                aria-haspopup="true"
+                                                size="icon"
+                                                variant="ghost"
+                                             >
+                                                <MoreHorizontal className="h-4 w-4" />
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
+                                             </Button>
+                                          </DropdownMenuTrigger>
+                                          <DropdownMenuContent align="end">
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
+                                          </DropdownMenuContent>
+                                       </DropdownMenu>
+                                    </TableCell>
+                                 </TableRow>
+                                 <TableRow>
+                                    <TableCell className="hidden sm:table-cell">
+                                       <Image
+                                          alt="Product image"
+                                          className="aspect-square rounded-md object-cover"
+                                          height="64"
+                                          src="/placeholder.svg"
+                                          width="64"
+                                       />
+                                    </TableCell>
+                                    <TableCell className="font-medium">
+                                       TechTonic Energy Drink
+                                    </TableCell>
+                                    <TableCell>
+                                       <Badge variant="secondary">Draft</Badge>
+                                    </TableCell>
+                                    <TableCell>$2.99</TableCell>
+                                    <TableCell className="hidden md:table-cell">
+                                       0
+                                    </TableCell>
+                                    <TableCell className="hidden md:table-cell">
+                                       2023-12-25 11:59 PM
+                                    </TableCell>
+                                    <TableCell>
+                                       <DropdownMenu>
+                                          <DropdownMenuTrigger asChild>
+                                             <Button
+                                                aria-haspopup="true"
+                                                size="icon"
+                                                variant="ghost"
+                                             >
+                                                <MoreHorizontal className="h-4 w-4" />
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
+                                             </Button>
+                                          </DropdownMenuTrigger>
+                                          <DropdownMenuContent align="end">
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
+                                          </DropdownMenuContent>
+                                       </DropdownMenu>
+                                    </TableCell>
+                                 </TableRow>
+                                 <TableRow>
+                                    <TableCell className="hidden sm:table-cell">
+                                       <Image
+                                          alt="Product image"
+                                          className="aspect-square rounded-md object-cover"
+                                          height="64"
+                                          src="/placeholder.svg"
+                                          width="64"
+                                       />
+                                    </TableCell>
+                                    <TableCell className="font-medium">
+                                       Gamer Gear Pro Controller
+                                    </TableCell>
+                                    <TableCell>
+                                       <Badge variant="outline">Active</Badge>
+                                    </TableCell>
+                                    <TableCell>$59.99</TableCell>
+                                    <TableCell className="hidden md:table-cell">
+                                       75
+                                    </TableCell>
+                                    <TableCell className="hidden md:table-cell">
+                                       2024-01-01 12:00 AM
+                                    </TableCell>
+                                    <TableCell>
+                                       <DropdownMenu>
+                                          <DropdownMenuTrigger asChild>
+                                             <Button
+                                                aria-haspopup="true"
+                                                size="icon"
+                                                variant="ghost"
+                                             >
+                                                <MoreHorizontal className="h-4 w-4" />
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
+                                             </Button>
+                                          </DropdownMenuTrigger>
+                                          <DropdownMenuContent align="end">
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
+                                          </DropdownMenuContent>
+                                       </DropdownMenu>
+                                    </TableCell>
+                                 </TableRow>
+                                 <TableRow>
+                                    <TableCell className="hidden sm:table-cell">
+                                       <Image
+                                          alt="Product image"
+                                          className="aspect-square rounded-md object-cover"
+                                          height="64"
+                                          src="/placeholder.svg"
+                                          width="64"
+                                       />
+                                    </TableCell>
+                                    <TableCell className="font-medium">
+                                       Luminous VR Headset
+                                    </TableCell>
+                                    <TableCell>
+                                       <Badge variant="outline">Active</Badge>
+                                    </TableCell>
+                                    <TableCell>$199.99</TableCell>
+                                    <TableCell className="hidden md:table-cell">
+                                       30
+                                    </TableCell>
+                                    <TableCell className="hidden md:table-cell">
+                                       2024-02-14 02:14 PM
+                                    </TableCell>
+                                    <TableCell>
+                                       <DropdownMenu>
+                                          <DropdownMenuTrigger asChild>
+                                             <Button
+                                                aria-haspopup="true"
+                                                size="icon"
+                                                variant="ghost"
+                                             >
+                                                <MoreHorizontal className="h-4 w-4" />
+                                                <span className="sr-only">
+                                                   Toggle menu
+                                                </span>
+                                             </Button>
+                                          </DropdownMenuTrigger>
+                                          <DropdownMenuContent align="end">
+                                             <DropdownMenuLabel>
+                                                Actions
+                                             </DropdownMenuLabel>
+                                             <DropdownMenuItem>
+                                                Edit
+                                             </DropdownMenuItem>
+                                             <DropdownMenuItem>
+                                                Delete
+                                             </DropdownMenuItem>
+                                          </DropdownMenuContent>
+                                       </DropdownMenu>
+                                    </TableCell>
+                                 </TableRow>
+                              </TableBody>
+                           </Table>
+                        </CardContent>
+                        <CardFooter>
+                           <div className="text-xs text-muted-foreground">
+                              Showing <strong>1-10</strong> of{" "}
+                              <strong>32</strong> products
+                           </div>
+                        </CardFooter>
+                     </Card>
+                  </TabsContent>
+               </Tabs>
+            </main>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/dashboard-07.tsx b/apps/web/registry/miami/internal/dashboard-07.tsx
new file mode 100644
index 00000000..5b172fb3
--- /dev/null
+++ b/apps/web/registry/miami/internal/dashboard-07.tsx
@@ -0,0 +1,676 @@
+import {
+   ChevronLeft,
+   Home,
+   LineChart,
+   Package,
+   Package2,
+   PanelLeft,
+   PlusCircle,
+   Search,
+   Settings,
+   ShoppingCart,
+   Upload,
+   Users2,
+} from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+
+import { Badge } from "~/registry/miami/ui/badge"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
+import {
+   Table,
+   TableBody,
+   TableCell,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/miami/ui/table"
+import { Textarea } from "~/registry/miami/ui/textarea"
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipTrigger,
+} from "~/registry/miami/ui/tooltip"
+
+export const description =
+   "A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images."
+
+export const iframeHeight = "1100px"
+
+export const containerClassName = "w-full h-full"
+
+export default function Dashboard() {
+   return (
+      <div className="flex min-h-screen w-full flex-col bg-muted/40">
+         <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
+            <nav className="flex flex-col items-center gap-4 px-2 py-4">
+               <Link
+                  href="#"
+                  className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
+               >
+                  <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
+                  <span className="sr-only">Acme Inc</span>
+               </Link>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <Home className="h-5 w-5" />
+                        <span className="sr-only">Dashboard</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Dashboard</TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <ShoppingCart className="h-5 w-5" />
+                        <span className="sr-only">Orders</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Orders</TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <Package className="h-5 w-5" />
+                        <span className="sr-only">Products</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Products</TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <Users2 className="h-5 w-5" />
+                        <span className="sr-only">Customers</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Customers</TooltipContent>
+               </Tooltip>
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <LineChart className="h-5 w-5" />
+                        <span className="sr-only">Analytics</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Analytics</TooltipContent>
+               </Tooltip>
+            </nav>
+            <nav className="mt-auto flex flex-col items-center gap-4 px-2 py-4">
+               <Tooltip>
+                  <TooltipTrigger asChild>
+                     <Link
+                        href="#"
+                        className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                     >
+                        <Settings className="h-5 w-5" />
+                        <span className="sr-only">Settings</span>
+                     </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Settings</TooltipContent>
+               </Tooltip>
+            </nav>
+         </aside>
+         <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+            <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
+               <Sheet>
+                  <SheetTrigger asChild>
+                     <Button
+                        size="icon"
+                        variant="outline"
+                        className="sm:hidden"
+                     >
+                        <PanelLeft className="h-5 w-5" />
+                        <span className="sr-only">Toggle Menu</span>
+                     </Button>
+                  </SheetTrigger>
+                  <SheetContent side="left" className="sm:max-w-xs">
+                     <nav className="grid gap-6 text-lg font-medium">
+                        <Link
+                           href="#"
+                           className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
+                        >
+                           <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
+                           <span className="sr-only">Acme Inc</span>
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                        >
+                           <Home className="h-5 w-5" />
+                           Dashboard
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                        >
+                           <ShoppingCart className="h-5 w-5" />
+                           Orders
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-foreground"
+                        >
+                           <Package className="h-5 w-5" />
+                           Products
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                        >
+                           <Users2 className="h-5 w-5" />
+                           Customers
+                        </Link>
+                        <Link
+                           href="#"
+                           className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                        >
+                           <LineChart className="h-5 w-5" />
+                           Settings
+                        </Link>
+                     </nav>
+                  </SheetContent>
+               </Sheet>
+               <Breadcrumb className="hidden md:flex">
+                  <BreadcrumbList>
+                     <BreadcrumbItem>
+                        <BreadcrumbLink asChild>
+                           <Link href="#">Dashboard</Link>
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator />
+                     <BreadcrumbItem>
+                        <BreadcrumbLink asChild>
+                           <Link href="#">Products</Link>
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Edit Product</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+               <div className="relative ml-auto flex-1 md:grow-0">
+                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                  <Input
+                     type="search"
+                     placeholder="Search..."
+                     className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]"
+                  />
+               </div>
+               <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                     <Button
+                        variant="outline"
+                        size="icon"
+                        className="overflow-hidden rounded-full"
+                     >
+                        <Image
+                           src="/placeholder-user.jpg"
+                           width={36}
+                           height={36}
+                           alt="Avatar"
+                           className="overflow-hidden rounded-full"
+                        />
+                     </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                     <DropdownMenuSeparator />
+                     <DropdownMenuItem>Settings</DropdownMenuItem>
+                     <DropdownMenuItem>Support</DropdownMenuItem>
+                     <DropdownMenuSeparator />
+                     <DropdownMenuItem>Logout</DropdownMenuItem>
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </header>
+            <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
+               <div className="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
+                  <div className="flex items-center gap-4">
+                     <Button variant="outline" size="icon" className="h-7 w-7">
+                        <ChevronLeft className="h-4 w-4" />
+                        <span className="sr-only">Back</span>
+                     </Button>
+                     <h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
+                        Pro Controller
+                     </h1>
+                     <Badge variant="outline" className="ml-auto sm:ml-0">
+                        In stock
+                     </Badge>
+                     <div className="hidden items-center gap-2 md:ml-auto md:flex">
+                        <Button variant="outline" size="sm">
+                           Discard
+                        </Button>
+                        <Button size="sm">Save Product</Button>
+                     </div>
+                  </div>
+                  <div className="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
+                     <div className="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
+                        <Card x-chunk="A card with a form to edit the product details">
+                           <CardHeader>
+                              <CardTitle>Product Details</CardTitle>
+                              <CardDescription>
+                                 Lipsum dolor sit amet, consectetur adipiscing
+                                 elit
+                              </CardDescription>
+                           </CardHeader>
+                           <CardContent>
+                              <div className="grid gap-6">
+                                 <div className="grid gap-3">
+                                    <Label htmlFor="name">Name</Label>
+                                    <Input
+                                       id="name"
+                                       type="text"
+                                       className="w-full"
+                                       defaultValue="Gamer Gear Pro Controller"
+                                    />
+                                 </div>
+                                 <div className="grid gap-3">
+                                    <Label htmlFor="description">
+                                       Description
+                                    </Label>
+                                    <Textarea
+                                       id="description"
+                                       defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
+                                       className="min-h-32"
+                                    />
+                                 </div>
+                              </div>
+                           </CardContent>
+                        </Card>
+                        <Card x-chunk="A card with a form to edit the product stock and variants">
+                           <CardHeader>
+                              <CardTitle>Stock</CardTitle>
+                              <CardDescription>
+                                 Lipsum dolor sit amet, consectetur adipiscing
+                                 elit
+                              </CardDescription>
+                           </CardHeader>
+                           <CardContent>
+                              <Table>
+                                 <TableHeader>
+                                    <TableRow>
+                                       <TableHead className="w-[100px]">
+                                          SKU
+                                       </TableHead>
+                                       <TableHead>Stock</TableHead>
+                                       <TableHead>Price</TableHead>
+                                       <TableHead className="w-[100px]">
+                                          Size
+                                       </TableHead>
+                                    </TableRow>
+                                 </TableHeader>
+                                 <TableBody>
+                                    <TableRow>
+                                       <TableCell className="font-semibold">
+                                          GGPC-001
+                                       </TableCell>
+                                       <TableCell>
+                                          <Label
+                                             htmlFor="stock-1"
+                                             className="sr-only"
+                                          >
+                                             Stock
+                                          </Label>
+                                          <Input
+                                             id="stock-1"
+                                             type="number"
+                                             defaultValue="100"
+                                          />
+                                       </TableCell>
+                                       <TableCell>
+                                          <Label
+                                             htmlFor="price-1"
+                                             className="sr-only"
+                                          >
+                                             Price
+                                          </Label>
+                                          <Input
+                                             id="price-1"
+                                             type="number"
+                                             defaultValue="99.99"
+                                          />
+                                       </TableCell>
+                                       <TableCell>
+                                          <ToggleGroup
+                                             type="single"
+                                             defaultValue="s"
+                                             variant="outline"
+                                          >
+                                             <ToggleGroupItem value="s">
+                                                S
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="m">
+                                                M
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="l">
+                                                L
+                                             </ToggleGroupItem>
+                                          </ToggleGroup>
+                                       </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                       <TableCell className="font-semibold">
+                                          GGPC-002
+                                       </TableCell>
+                                       <TableCell>
+                                          <Label
+                                             htmlFor="stock-2"
+                                             className="sr-only"
+                                          >
+                                             Stock
+                                          </Label>
+                                          <Input
+                                             id="stock-2"
+                                             type="number"
+                                             defaultValue="143"
+                                          />
+                                       </TableCell>
+                                       <TableCell>
+                                          <Label
+                                             htmlFor="price-2"
+                                             className="sr-only"
+                                          >
+                                             Price
+                                          </Label>
+                                          <Input
+                                             id="price-2"
+                                             type="number"
+                                             defaultValue="99.99"
+                                          />
+                                       </TableCell>
+                                       <TableCell>
+                                          <ToggleGroup
+                                             type="single"
+                                             defaultValue="m"
+                                             variant="outline"
+                                          >
+                                             <ToggleGroupItem value="s">
+                                                S
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="m">
+                                                M
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="l">
+                                                L
+                                             </ToggleGroupItem>
+                                          </ToggleGroup>
+                                       </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                       <TableCell className="font-semibold">
+                                          GGPC-003
+                                       </TableCell>
+                                       <TableCell>
+                                          <Label
+                                             htmlFor="stock-3"
+                                             className="sr-only"
+                                          >
+                                             Stock
+                                          </Label>
+                                          <Input
+                                             id="stock-3"
+                                             type="number"
+                                             defaultValue="32"
+                                          />
+                                       </TableCell>
+                                       <TableCell>
+                                          <Label
+                                             htmlFor="price-3"
+                                             className="sr-only"
+                                          >
+                                             Stock
+                                          </Label>
+                                          <Input
+                                             id="price-3"
+                                             type="number"
+                                             defaultValue="99.99"
+                                          />
+                                       </TableCell>
+                                       <TableCell>
+                                          <ToggleGroup
+                                             type="single"
+                                             defaultValue="s"
+                                             variant="outline"
+                                          >
+                                             <ToggleGroupItem value="s">
+                                                S
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="m">
+                                                M
+                                             </ToggleGroupItem>
+                                             <ToggleGroupItem value="l">
+                                                L
+                                             </ToggleGroupItem>
+                                          </ToggleGroup>
+                                       </TableCell>
+                                    </TableRow>
+                                 </TableBody>
+                              </Table>
+                           </CardContent>
+                           <CardFooter className="justify-center border-t p-4">
+                              <Button
+                                 size="sm"
+                                 variant="ghost"
+                                 className="gap-1"
+                              >
+                                 <PlusCircle className="h-3.5 w-3.5" />
+                                 Add Variant
+                              </Button>
+                           </CardFooter>
+                        </Card>
+                        <Card x-chunk="A card with a form to edit the product category and subcategory">
+                           <CardHeader>
+                              <CardTitle>Product Category</CardTitle>
+                           </CardHeader>
+                           <CardContent>
+                              <div className="grid gap-6 sm:grid-cols-3">
+                                 <div className="grid gap-3">
+                                    <Label htmlFor="category">Category</Label>
+                                    <Select>
+                                       <SelectTrigger
+                                          id="category"
+                                          aria-label="Select category"
+                                       >
+                                          <SelectValue placeholder="Select category" />
+                                       </SelectTrigger>
+                                       <SelectContent>
+                                          <SelectItem value="clothing">
+                                             Clothing
+                                          </SelectItem>
+                                          <SelectItem value="electronics">
+                                             Electronics
+                                          </SelectItem>
+                                          <SelectItem value="accessories">
+                                             Accessories
+                                          </SelectItem>
+                                       </SelectContent>
+                                    </Select>
+                                 </div>
+                                 <div className="grid gap-3">
+                                    <Label htmlFor="subcategory">
+                                       Subcategory (optional)
+                                    </Label>
+                                    <Select>
+                                       <SelectTrigger
+                                          id="subcategory"
+                                          aria-label="Select subcategory"
+                                       >
+                                          <SelectValue placeholder="Select subcategory" />
+                                       </SelectTrigger>
+                                       <SelectContent>
+                                          <SelectItem value="t-shirts">
+                                             T-Shirts
+                                          </SelectItem>
+                                          <SelectItem value="hoodies">
+                                             Hoodies
+                                          </SelectItem>
+                                          <SelectItem value="sweatshirts">
+                                             Sweatshirts
+                                          </SelectItem>
+                                       </SelectContent>
+                                    </Select>
+                                 </div>
+                              </div>
+                           </CardContent>
+                        </Card>
+                     </div>
+                     <div className="grid auto-rows-max items-start gap-4 lg:gap-8">
+                        <Card x-chunk="A card with a form to edit the product status">
+                           <CardHeader>
+                              <CardTitle>Product Status</CardTitle>
+                           </CardHeader>
+                           <CardContent>
+                              <div className="grid gap-6">
+                                 <div className="grid gap-3">
+                                    <Label htmlFor="status">Status</Label>
+                                    <Select>
+                                       <SelectTrigger
+                                          id="status"
+                                          aria-label="Select status"
+                                       >
+                                          <SelectValue placeholder="Select status" />
+                                       </SelectTrigger>
+                                       <SelectContent>
+                                          <SelectItem value="draft">
+                                             Draft
+                                          </SelectItem>
+                                          <SelectItem value="published">
+                                             Active
+                                          </SelectItem>
+                                          <SelectItem value="archived">
+                                             Archived
+                                          </SelectItem>
+                                       </SelectContent>
+                                    </Select>
+                                 </div>
+                              </div>
+                           </CardContent>
+                        </Card>
+                        <Card
+                           className="overflow-hidden"
+                           x-chunk="A card with a form to upload product images"
+                        >
+                           <CardHeader>
+                              <CardTitle>Product Images</CardTitle>
+                              <CardDescription>
+                                 Lipsum dolor sit amet, consectetur adipiscing
+                                 elit
+                              </CardDescription>
+                           </CardHeader>
+                           <CardContent>
+                              <div className="grid gap-2">
+                                 <Image
+                                    alt="Product image"
+                                    className="aspect-square w-full rounded-md object-cover"
+                                    height="300"
+                                    src="/placeholder.svg"
+                                    width="300"
+                                 />
+                                 <div className="grid grid-cols-3 gap-2">
+                                    <button>
+                                       <Image
+                                          alt="Product image"
+                                          className="aspect-square w-full rounded-md object-cover"
+                                          height="84"
+                                          src="/placeholder.svg"
+                                          width="84"
+                                       />
+                                    </button>
+                                    <button>
+                                       <Image
+                                          alt="Product image"
+                                          className="aspect-square w-full rounded-md object-cover"
+                                          height="84"
+                                          src="/placeholder.svg"
+                                          width="84"
+                                       />
+                                    </button>
+                                    <button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
+                                       <Upload className="h-4 w-4 text-muted-foreground" />
+                                       <span className="sr-only">Upload</span>
+                                    </button>
+                                 </div>
+                              </div>
+                           </CardContent>
+                        </Card>
+                        <Card x-chunk="A card with a call to action to archive the product">
+                           <CardHeader>
+                              <CardTitle>Archive Product</CardTitle>
+                              <CardDescription>
+                                 Lipsum dolor sit amet, consectetur adipiscing
+                                 elit.
+                              </CardDescription>
+                           </CardHeader>
+                           <CardContent>
+                              <div></div>
+                              <Button size="sm" variant="secondary">
+                                 Archive Product
+                              </Button>
+                           </CardContent>
+                        </Card>
+                     </div>
+                  </div>
+                  <div className="flex items-center justify-center gap-2 md:hidden">
+                     <Button variant="outline" size="sm">
+                        Discard
+                     </Button>
+                     <Button size="sm">Save Product</Button>
+                  </div>
+               </div>
+            </main>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/login-01.tsx b/apps/web/registry/miami/internal/login-01.tsx
new file mode 100644
index 00000000..43772ac3
--- /dev/null
+++ b/apps/web/registry/miami/internal/login-01.tsx
@@ -0,0 +1,68 @@
+import Link from "next/link"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export const description = "A simple login form."
+
+export const containerClassName = "w-full h-full"
+
+export default function Page() {
+   return (
+      <div className="flex h-screen w-full items-center justify-center px-4">
+         <Card className="mx-auto max-w-sm">
+            <CardHeader>
+               <CardTitle className="text-2xl">Login</CardTitle>
+               <CardDescription>
+                  Enter your email below to login to your account
+               </CardDescription>
+            </CardHeader>
+            <CardContent>
+               <div className="grid gap-4">
+                  <div className="grid gap-2">
+                     <Label htmlFor="email">Email</Label>
+                     <Input
+                        id="email"
+                        type="email"
+                        placeholder="m@example.com"
+                        required
+                     />
+                  </div>
+                  <div className="grid gap-2">
+                     <div className="flex items-center">
+                        <Label htmlFor="password">Password</Label>
+                        <Link
+                           href="#"
+                           className="ml-auto inline-block text-sm underline"
+                        >
+                           Forgot your password?
+                        </Link>
+                     </div>
+                     <Input id="password" type="password" required />
+                  </div>
+                  <Button type="submit" className="w-full">
+                     Login
+                  </Button>
+                  <Button variant="outline" className="w-full">
+                     Login with Google
+                  </Button>
+               </div>
+               <div className="mt-4 text-center text-sm">
+                  Don&apos;t have an account?{" "}
+                  <Link href="#" className="underline">
+                     Sign up
+                  </Link>
+               </div>
+            </CardContent>
+         </Card>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-01.tsx b/apps/web/registry/miami/internal/sidebar-01.tsx
new file mode 100644
index 00000000..2ea4d0bd
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-01.tsx
@@ -0,0 +1,292 @@
+"use client"
+
+import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from "lucide-react"
+import * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Label } from "~/registry/miami/ui/label"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInput,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description =
+   "A simple sidebar with navigation grouped by section."
+
+const data = {
+   versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Component() {
+   const [selectedVersion, setSelectedVersion] = React.useState(
+      data.versions[0],
+   )
+
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton
+                              size="lg"
+                              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                           >
+                              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                                 <GalleryVerticalEnd className="size-4" />
+                              </div>
+                              <div className="flex flex-col gap-0.5 leading-none">
+                                 <span className="font-semibold">
+                                    Documentation
+                                 </span>
+                                 <span className="">v{selectedVersion}</span>
+                              </div>
+                              <ChevronsUpDown className="ml-auto" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                           className="w-[--radix-dropdown-menu-trigger-width]"
+                           align="start"
+                        >
+                           {data.versions.map((version) => (
+                              <DropdownMenuItem
+                                 key={version}
+                                 onSelect={() => setSelectedVersion(version)}
+                              >
+                                 v{version}{" "}
+                                 {version === selectedVersion && (
+                                    <Check className="ml-auto" />
+                                 )}
+                              </DropdownMenuItem>
+                           ))}
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+               <form>
+                  <SidebarGroup className="py-0">
+                     <SidebarGroupContent className="relative">
+                        <Label htmlFor="search" className="sr-only">
+                           Search
+                        </Label>
+                        <SidebarInput
+                           id="search"
+                           placeholder="Search the docs..."
+                           className="pl-8"
+                        />
+                        <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+                     </SidebarGroupContent>
+                  </SidebarGroup>
+               </form>
+            </SidebarHeader>
+            <SidebarContent>
+               {/* We create a SidebarGroup for each parent. */}
+               {data.navMain.map((item) => (
+                  <SidebarGroup key={item.title}>
+                     <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
+                     <SidebarGroupContent>
+                        <SidebarMenu>
+                           {item.items.map((item) => (
+                              <SidebarMenuItem key={item.title}>
+                                 <SidebarMenuButton
+                                    asChild
+                                    isActive={item.isActive}
+                                 >
+                                    <a href={item.url}>{item.title}</a>
+                                 </SidebarMenuButton>
+                              </SidebarMenuItem>
+                           ))}
+                        </SidebarMenu>
+                     </SidebarGroupContent>
+                  </SidebarGroup>
+               ))}
+            </SidebarContent>
+            <SidebarRail />
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-02.tsx b/apps/web/registry/miami/internal/sidebar-02.tsx
new file mode 100644
index 00000000..f9d30488
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-02.tsx
@@ -0,0 +1,330 @@
+"use client"
+
+import {
+   Check,
+   ChevronRight,
+   ChevronsUpDown,
+   GalleryVerticalEnd,
+   Search,
+} from "lucide-react"
+import * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Label } from "~/registry/miami/ui/label"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInput,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with collapsible sections."
+
+// This is sample data.
+const data = {
+   versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Component() {
+   const [selectedVersion, setSelectedVersion] = React.useState(
+      data.versions[0],
+   )
+
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton
+                              size="lg"
+                              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                           >
+                              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                                 <GalleryVerticalEnd className="size-4" />
+                              </div>
+                              <div className="flex flex-col gap-0.5 leading-none">
+                                 <span className="font-semibold">
+                                    Documentation
+                                 </span>
+                                 <span className="">v{selectedVersion}</span>
+                              </div>
+                              <ChevronsUpDown className="ml-auto" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                           className="w-[--radix-dropdown-menu-trigger-width]"
+                           align="start"
+                        >
+                           {data.versions.map((version) => (
+                              <DropdownMenuItem
+                                 key={version}
+                                 onSelect={() => setSelectedVersion(version)}
+                              >
+                                 v{version}{" "}
+                                 {version === selectedVersion && (
+                                    <Check className="ml-auto" />
+                                 )}
+                              </DropdownMenuItem>
+                           ))}
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+               <form>
+                  <SidebarGroup className="py-0">
+                     <SidebarGroupContent className="relative">
+                        <Label htmlFor="search" className="sr-only">
+                           Search
+                        </Label>
+                        <SidebarInput
+                           id="search"
+                           placeholder="Search the docs..."
+                           className="pl-8"
+                        />
+                        <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+                     </SidebarGroupContent>
+                  </SidebarGroup>
+               </form>
+            </SidebarHeader>
+            <SidebarContent className="gap-0">
+               {/* We create a collapsible SidebarGroup for each parent. */}
+               {data.navMain.map((item) => (
+                  <Collapsible
+                     key={item.title}
+                     title={item.title}
+                     defaultOpen
+                     className="group/collapsible"
+                  >
+                     <SidebarGroup>
+                        <SidebarGroupLabel
+                           asChild
+                           className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                        >
+                           <CollapsibleTrigger>
+                              {item.title}{" "}
+                              <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                           </CollapsibleTrigger>
+                        </SidebarGroupLabel>
+                        <CollapsibleContent>
+                           <SidebarGroupContent>
+                              <SidebarMenu>
+                                 {item.items.map((item) => (
+                                    <SidebarMenuItem key={item.title}>
+                                       <SidebarMenuButton
+                                          asChild
+                                          isActive={item.isActive}
+                                       >
+                                          <a href={item.url}>{item.title}</a>
+                                       </SidebarMenuButton>
+                                    </SidebarMenuItem>
+                                 ))}
+                              </SidebarMenu>
+                           </SidebarGroupContent>
+                        </CollapsibleContent>
+                     </SidebarGroup>
+                  </Collapsible>
+               ))}
+            </SidebarContent>
+            <SidebarRail />
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               {Array.from({ length: 24 }).map((_, index) => (
+                  <div
+                     key={index}
+                     className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                  />
+               ))}
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-03.tsx b/apps/web/registry/miami/internal/sidebar-03.tsx
new file mode 100644
index 00000000..f288be64
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-03.tsx
@@ -0,0 +1,272 @@
+"use client"
+
+import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from "lucide-react"
+import * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Label } from "~/registry/miami/ui/label"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInput,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with nested navigation."
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Component() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton size="lg" asChild>
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <GalleryVerticalEnd className="size-4" />
+                           </div>
+                           <div className="flex flex-col gap-0.5 leading-none">
+                              <span className="font-semibold">
+                                 Documentation
+                              </span>
+                              <span className="">v1.0.0</span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarMenu>
+                     {data.navMain.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url} className="font-medium">
+                                 {item.title}
+                              </a>
+                           </SidebarMenuButton>
+                           {item.items?.length ? (
+                              <SidebarMenuSub>
+                                 {item.items.map((item) => (
+                                    <SidebarMenuSubItem key={item.title}>
+                                       <SidebarMenuSubButton
+                                          asChild
+                                          isActive={item.isActive}
+                                       >
+                                          <a href={item.url}>{item.title}</a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           ) : null}
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarRail />
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+               <div className="flex items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-04.tsx b/apps/web/registry/miami/internal/sidebar-04.tsx
new file mode 100644
index 00000000..0295640d
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-04.tsx
@@ -0,0 +1,264 @@
+"use client"
+
+import { GalleryVerticalEnd } from "lucide-react"
+import type * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A floating sidebar with submenus."
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Component() {
+   return (
+      <SidebarProvider
+         style={
+            {
+               "--sidebar-width": "19rem",
+            } as React.CSSProperties
+         }
+      >
+         <Sidebar variant="floating">
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton size="lg" asChild>
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <GalleryVerticalEnd className="size-4" />
+                           </div>
+                           <div className="flex flex-col gap-0.5 leading-none">
+                              <span className="font-semibold">
+                                 Documentation
+                              </span>
+                              <span className="">v1.0.0</span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarMenu className="gap-2">
+                     {data.navMain.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url} className="font-medium">
+                                 {item.title}
+                              </a>
+                           </SidebarMenuButton>
+                           {item.items?.length ? (
+                              <SidebarMenuSub className="ml-0 border-l-0 px-1.5">
+                                 {item.items.map((item) => (
+                                    <SidebarMenuSubItem key={item.title}>
+                                       <SidebarMenuSubButton
+                                          asChild
+                                          isActive={item.isActive}
+                                       >
+                                          <a href={item.url}>{item.title}</a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           ) : null}
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-05.tsx b/apps/web/registry/miami/internal/sidebar-05.tsx
new file mode 100644
index 00000000..c6f8fa9a
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-05.tsx
@@ -0,0 +1,292 @@
+import { GalleryVerticalEnd, Minus, Plus, Search } from "lucide-react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import { Label } from "~/registry/miami/ui/label"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarHeader,
+   SidebarInput,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with collapsible submenus."
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Component() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton size="lg" asChild>
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <GalleryVerticalEnd className="size-4" />
+                           </div>
+                           <div className="flex flex-col gap-0.5 leading-none">
+                              <span className="font-semibold">
+                                 Documentation
+                              </span>
+                              <span className="">v1.0.0</span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+               <form>
+                  <SidebarGroup className="py-0">
+                     <SidebarGroupContent className="relative">
+                        <Label htmlFor="search" className="sr-only">
+                           Search
+                        </Label>
+                        <SidebarInput
+                           id="search"
+                           placeholder="Search the docs..."
+                           className="pl-8"
+                        />
+                        <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+                     </SidebarGroupContent>
+                  </SidebarGroup>
+               </form>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarMenu>
+                     {data.navMain.map((item, index) => (
+                        <Collapsible
+                           key={item.title}
+                           defaultOpen={index === 1}
+                           className="group/collapsible"
+                        >
+                           <SidebarMenuItem>
+                              <CollapsibleTrigger asChild>
+                                 <SidebarMenuButton>
+                                    {item.title}{" "}
+                                    <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                                    <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                                 </SidebarMenuButton>
+                              </CollapsibleTrigger>
+                              {item.items?.length ? (
+                                 <CollapsibleContent>
+                                    <SidebarMenuSub>
+                                       {item.items.map((item) => (
+                                          <SidebarMenuSubItem key={item.title}>
+                                             <SidebarMenuSubButton
+                                                asChild
+                                                isActive={item.isActive}
+                                             >
+                                                <a href={item.url}>
+                                                   {item.title}
+                                                </a>
+                                             </SidebarMenuSubButton>
+                                          </SidebarMenuSubItem>
+                                       ))}
+                                    </SidebarMenuSub>
+                                 </CollapsibleContent>
+                              ) : null}
+                           </SidebarMenuItem>
+                        </Collapsible>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarRail />
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-06.tsx b/apps/web/registry/miami/internal/sidebar-06.tsx
new file mode 100644
index 00000000..7d841b66
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-06.tsx
@@ -0,0 +1,294 @@
+"use client"
+
+import { GalleryVerticalEnd, MoreHorizontal } from "lucide-react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarHeader,
+   SidebarInput,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with submenus as dropdowns."
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton size="lg" asChild>
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <GalleryVerticalEnd className="size-4" />
+                           </div>
+                           <div className="flex flex-col gap-0.5 leading-none">
+                              <span className="font-semibold">
+                                 Documentation
+                              </span>
+                              <span className="">v1.0.0</span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarMenu>
+                     {data.navMain.map((item) => (
+                        <DropdownMenu key={item.title}>
+                           <SidebarMenuItem>
+                              <DropdownMenuTrigger asChild>
+                                 <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                                    {item.title}{" "}
+                                    <MoreHorizontal className="ml-auto" />
+                                 </SidebarMenuButton>
+                              </DropdownMenuTrigger>
+                              {item.items?.length ? (
+                                 <DropdownMenuContent
+                                    side="bottom"
+                                    align="end"
+                                    className="min-w-56 rounded-lg"
+                                 >
+                                    {item.items.map((item) => (
+                                       <DropdownMenuItem
+                                          asChild
+                                          key={item.title}
+                                       >
+                                          <a href={item.url}>{item.title}</a>
+                                       </DropdownMenuItem>
+                                    ))}
+                                 </DropdownMenuContent>
+                              ) : null}
+                           </SidebarMenuItem>
+                        </DropdownMenu>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+               <div className="p-1">
+                  <Card className="shadow-none">
+                     <form>
+                        <CardHeader className="p-4 pb-0">
+                           <CardTitle className="text-sm">
+                              Subscribe to our newsletter
+                           </CardTitle>
+                           <CardDescription>
+                              Opt-in to receive updates and news about the
+                              sidebar.
+                           </CardDescription>
+                        </CardHeader>
+                        <CardContent className="grid gap-2.5 p-4">
+                           <SidebarInput type="email" placeholder="Email" />
+                           <Button
+                              className="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none"
+                              size="sm"
+                           >
+                              Subscribe
+                           </Button>
+                        </CardContent>
+                     </form>
+                  </Card>
+               </div>
+            </SidebarFooter>
+            <SidebarRail />
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-07.tsx b/apps/web/registry/miami/internal/sidebar-07.tsx
new file mode 100644
index 00000000..84b37b79
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-07.tsx
@@ -0,0 +1,482 @@
+"use client"
+
+import {
+   AudioWaveform,
+   BadgeCheck,
+   Bell,
+   BookOpen,
+   Bot,
+   ChevronRight,
+   ChevronsUpDown,
+   Command,
+   CreditCard,
+   Folder,
+   Forward,
+   Frame,
+   GalleryVerticalEnd,
+   LogOut,
+   Map,
+   MoreHorizontal,
+   PieChart,
+   Plus,
+   Settings2,
+   Sparkles,
+   SquareTerminal,
+   Trash2,
+} from "lucide-react"
+import * as React from "react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar that collapses to icons."
+
+// This is sample data.
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: GalleryVerticalEnd,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+export default function Page() {
+   const [activeTeam, setActiveTeam] = React.useState(data.teams[0])
+
+   return (
+      <SidebarProvider>
+         <Sidebar collapsible="icon">
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton
+                              size="lg"
+                              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                           >
+                              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                                 <activeTeam.logo className="size-4" />
+                              </div>
+                              <div className="grid flex-1 text-left text-sm leading-tight">
+                                 <span className="truncate font-semibold">
+                                    {activeTeam.name}
+                                 </span>
+                                 <span className="truncate text-xs">
+                                    {activeTeam.plan}
+                                 </span>
+                              </div>
+                              <ChevronsUpDown className="ml-auto" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                           className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                           align="start"
+                           side="bottom"
+                           sideOffset={4}
+                        >
+                           <DropdownMenuLabel className="text-xs text-muted-foreground">
+                              Teams
+                           </DropdownMenuLabel>
+                           {data.teams.map((team, index) => (
+                              <DropdownMenuItem
+                                 key={team.name}
+                                 onClick={() => setActiveTeam(team)}
+                                 className="gap-2 p-2"
+                              >
+                                 <div className="flex size-6 items-center justify-center rounded-sm border">
+                                    <team.logo className="size-4 shrink-0" />
+                                 </div>
+                                 {team.name}
+                                 <DropdownMenuShortcut>
+                                    ⌘{index + 1}
+                                 </DropdownMenuShortcut>
+                              </DropdownMenuItem>
+                           ))}
+                           <DropdownMenuSeparator />
+                           <DropdownMenuItem className="gap-2 p-2">
+                              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                                 <Plus className="size-4" />
+                              </div>
+                              <div className="font-medium text-muted-foreground">
+                                 Add team
+                              </div>
+                           </DropdownMenuItem>
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Platform</SidebarGroupLabel>
+                  <SidebarMenu>
+                     {data.navMain.map((item) => (
+                        <Collapsible
+                           key={item.title}
+                           asChild
+                           defaultOpen={item.isActive}
+                           className="group/collapsible"
+                        >
+                           <SidebarMenuItem>
+                              <CollapsibleTrigger asChild>
+                                 <SidebarMenuButton tooltip={item.title}>
+                                    {item.icon && <item.icon />}
+                                    <span>{item.title}</span>
+                                    <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                                 </SidebarMenuButton>
+                              </CollapsibleTrigger>
+                              <CollapsibleContent>
+                                 <SidebarMenuSub>
+                                    {item.items?.map((subItem) => (
+                                       <SidebarMenuSubItem key={subItem.title}>
+                                          <SidebarMenuSubButton asChild>
+                                             <a href={subItem.url}>
+                                                <span>{subItem.title}</span>
+                                             </a>
+                                          </SidebarMenuSubButton>
+                                       </SidebarMenuSubItem>
+                                    ))}
+                                 </SidebarMenuSub>
+                              </CollapsibleContent>
+                           </SidebarMenuItem>
+                        </Collapsible>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroup>
+               <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarMenu>
+                     {data.projects.map((item) => (
+                        <SidebarMenuItem key={item.name}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url}>
+                                 <item.icon />
+                                 <span>{item.name}</span>
+                              </a>
+                           </SidebarMenuButton>
+                           <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                 <SidebarMenuAction showOnHover>
+                                    <MoreHorizontal />
+                                    <span className="sr-only">More</span>
+                                 </SidebarMenuAction>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent
+                                 className="w-48 rounded-lg"
+                                 side="bottom"
+                                 align="end"
+                              >
+                                 <DropdownMenuItem>
+                                    <Folder className="text-muted-foreground" />
+                                    <span>View Project</span>
+                                 </DropdownMenuItem>
+                                 <DropdownMenuItem>
+                                    <Forward className="text-muted-foreground" />
+                                    <span>Share Project</span>
+                                 </DropdownMenuItem>
+                                 <DropdownMenuSeparator />
+                                 <DropdownMenuItem>
+                                    <Trash2 className="text-muted-foreground" />
+                                    <span>Delete Project</span>
+                                 </DropdownMenuItem>
+                              </DropdownMenuContent>
+                           </DropdownMenu>
+                        </SidebarMenuItem>
+                     ))}
+                     <SidebarMenuItem>
+                        <SidebarMenuButton className="text-sidebar-foreground/70">
+                           <MoreHorizontal className="text-sidebar-foreground/70" />
+                           <span>More</span>
+                        </SidebarMenuButton>
+                     </SidebarMenuItem>
+                  </SidebarMenu>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton
+                              size="lg"
+                              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                           >
+                              <Avatar className="h-8 w-8 rounded-lg">
+                                 <AvatarImage
+                                    src={data.user.avatar}
+                                    alt={data.user.name}
+                                 />
+                                 <AvatarFallback className="rounded-lg">
+                                    CN
+                                 </AvatarFallback>
+                              </Avatar>
+                              <div className="grid flex-1 text-left text-sm leading-tight">
+                                 <span className="truncate font-semibold">
+                                    {data.user.name}
+                                 </span>
+                                 <span className="truncate text-xs">
+                                    {data.user.email}
+                                 </span>
+                              </div>
+                              <ChevronsUpDown className="ml-auto size-4" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                           className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                           side="bottom"
+                           align="end"
+                           sideOffset={4}
+                        >
+                           <DropdownMenuLabel className="p-0 font-normal">
+                              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                 <Avatar className="h-8 w-8 rounded-lg">
+                                    <AvatarImage
+                                       src={data.user.avatar}
+                                       alt={data.user.name}
+                                    />
+                                    <AvatarFallback className="rounded-lg">
+                                       CN
+                                    </AvatarFallback>
+                                 </Avatar>
+                                 <div className="grid flex-1 text-left text-sm leading-tight">
+                                    <span className="truncate font-semibold">
+                                       {data.user.name}
+                                    </span>
+                                    <span className="truncate text-xs">
+                                       {data.user.email}
+                                    </span>
+                                 </div>
+                              </div>
+                           </DropdownMenuLabel>
+                           <DropdownMenuSeparator />
+                           <DropdownMenuGroup>
+                              <DropdownMenuItem>
+                                 <Sparkles />
+                                 Upgrade to Pro
+                              </DropdownMenuItem>
+                           </DropdownMenuGroup>
+                           <DropdownMenuSeparator />
+                           <DropdownMenuGroup>
+                              <DropdownMenuItem>
+                                 <BadgeCheck />
+                                 Account
+                              </DropdownMenuItem>
+                              <DropdownMenuItem>
+                                 <CreditCard />
+                                 Billing
+                              </DropdownMenuItem>
+                              <DropdownMenuItem>
+                                 <Bell />
+                                 Notifications
+                              </DropdownMenuItem>
+                           </DropdownMenuGroup>
+                           <DropdownMenuSeparator />
+                           <DropdownMenuItem>
+                              <LogOut />
+                              Log out
+                           </DropdownMenuItem>
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarFooter>
+            <SidebarRail />
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-08.tsx b/apps/web/registry/miami/internal/sidebar-08.tsx
new file mode 100644
index 00000000..94cb8d9f
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-08.tsx
@@ -0,0 +1,460 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   BookOpen,
+   Bot,
+   ChevronRight,
+   ChevronsUpDown,
+   Command,
+   CreditCard,
+   Folder,
+   Frame,
+   LifeBuoy,
+   LogOut,
+   Map,
+   MoreHorizontal,
+   PieChart,
+   Send,
+   Settings2,
+   Share,
+   Sparkles,
+   SquareTerminal,
+   Trash2,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "An inset sidebar with secondary navigation."
+
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Support",
+         url: "#",
+         icon: LifeBuoy,
+      },
+      {
+         title: "Feedback",
+         url: "#",
+         icon: Send,
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <Sidebar variant="inset">
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton size="lg" asChild>
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <Command className="size-4" />
+                           </div>
+                           <div className="grid flex-1 text-left text-sm leading-tight">
+                              <span className="truncate font-semibold">
+                                 Acme Inc
+                              </span>
+                              <span className="truncate text-xs">
+                                 Enterprise
+                              </span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Platform</SidebarGroupLabel>
+                  <SidebarMenu>
+                     {data.navMain.map((item) => (
+                        <Collapsible
+                           key={item.title}
+                           asChild
+                           defaultOpen={item.isActive}
+                        >
+                           <SidebarMenuItem>
+                              <SidebarMenuButton asChild tooltip={item.title}>
+                                 <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.title}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                              {item.items?.length ? (
+                                 <>
+                                    <CollapsibleTrigger asChild>
+                                       <SidebarMenuAction className="data-[state=open]:rotate-90">
+                                          <ChevronRight />
+                                          <span className="sr-only">
+                                             Toggle
+                                          </span>
+                                       </SidebarMenuAction>
+                                    </CollapsibleTrigger>
+                                    <CollapsibleContent>
+                                       <SidebarMenuSub>
+                                          {item.items?.map((subItem) => (
+                                             <SidebarMenuSubItem
+                                                key={subItem.title}
+                                             >
+                                                <SidebarMenuSubButton asChild>
+                                                   <a href={subItem.url}>
+                                                      <span>
+                                                         {subItem.title}
+                                                      </span>
+                                                   </a>
+                                                </SidebarMenuSubButton>
+                                             </SidebarMenuSubItem>
+                                          ))}
+                                       </SidebarMenuSub>
+                                    </CollapsibleContent>
+                                 </>
+                              ) : null}
+                           </SidebarMenuItem>
+                        </Collapsible>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroup>
+               <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarMenu>
+                     {data.projects.map((item) => (
+                        <SidebarMenuItem key={item.name}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url}>
+                                 <item.icon />
+                                 <span>{item.name}</span>
+                              </a>
+                           </SidebarMenuButton>
+                           <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                 <SidebarMenuAction showOnHover>
+                                    <MoreHorizontal />
+                                    <span className="sr-only">More</span>
+                                 </SidebarMenuAction>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent
+                                 className="w-48"
+                                 side="bottom"
+                                 align="end"
+                              >
+                                 <DropdownMenuItem>
+                                    <Folder className="text-muted-foreground" />
+                                    <span>View Project</span>
+                                 </DropdownMenuItem>
+                                 <DropdownMenuItem>
+                                    <Share className="text-muted-foreground" />
+                                    <span>Share Project</span>
+                                 </DropdownMenuItem>
+                                 <DropdownMenuSeparator />
+                                 <DropdownMenuItem>
+                                    <Trash2 className="text-muted-foreground" />
+                                    <span>Delete Project</span>
+                                 </DropdownMenuItem>
+                              </DropdownMenuContent>
+                           </DropdownMenu>
+                        </SidebarMenuItem>
+                     ))}
+                     <SidebarMenuItem>
+                        <SidebarMenuButton>
+                           <MoreHorizontal />
+                           <span>More</span>
+                        </SidebarMenuButton>
+                     </SidebarMenuItem>
+                  </SidebarMenu>
+               </SidebarGroup>
+               <SidebarGroup className="mt-auto">
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {data.navSecondary.map((item) => (
+                           <SidebarMenuItem key={item.title}>
+                              <SidebarMenuButton asChild size="sm">
+                                 <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.title}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton
+                              size="lg"
+                              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                           >
+                              <Avatar className="h-8 w-8 rounded-lg">
+                                 <AvatarImage
+                                    src={data.user.avatar}
+                                    alt={data.user.name}
+                                 />
+                                 <AvatarFallback className="rounded-lg">
+                                    CN
+                                 </AvatarFallback>
+                              </Avatar>
+                              <div className="grid flex-1 text-left text-sm leading-tight">
+                                 <span className="truncate font-semibold">
+                                    {data.user.name}
+                                 </span>
+                                 <span className="truncate text-xs">
+                                    {data.user.email}
+                                 </span>
+                              </div>
+                              <ChevronsUpDown className="ml-auto size-4" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                           className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                           side="bottom"
+                           align="end"
+                           sideOffset={4}
+                        >
+                           <DropdownMenuLabel className="p-0 font-normal">
+                              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                 <Avatar className="h-8 w-8 rounded-lg">
+                                    <AvatarImage
+                                       src={data.user.avatar}
+                                       alt={data.user.name}
+                                    />
+                                    <AvatarFallback className="rounded-lg">
+                                       CN
+                                    </AvatarFallback>
+                                 </Avatar>
+                                 <div className="grid flex-1 text-left text-sm leading-tight">
+                                    <span className="truncate font-semibold">
+                                       {data.user.name}
+                                    </span>
+                                    <span className="truncate text-xs">
+                                       {data.user.email}
+                                    </span>
+                                 </div>
+                              </div>
+                           </DropdownMenuLabel>
+                           <DropdownMenuSeparator />
+                           <DropdownMenuGroup>
+                              <DropdownMenuItem>
+                                 <Sparkles />
+                                 Upgrade to Pro
+                              </DropdownMenuItem>
+                           </DropdownMenuGroup>
+                           <DropdownMenuSeparator />
+                           <DropdownMenuGroup>
+                              <DropdownMenuItem>
+                                 <BadgeCheck />
+                                 Account
+                              </DropdownMenuItem>
+                              <DropdownMenuItem>
+                                 <CreditCard />
+                                 Billing
+                              </DropdownMenuItem>
+                              <DropdownMenuItem>
+                                 <Bell />
+                                 Notifications
+                              </DropdownMenuItem>
+                           </DropdownMenuGroup>
+                           <DropdownMenuSeparator />
+                           <DropdownMenuItem>
+                              <LogOut />
+                              Log out
+                           </DropdownMenuItem>
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarFooter>
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-09.tsx b/apps/web/registry/miami/internal/sidebar-09.tsx
new file mode 100644
index 00000000..4938c561
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-09.tsx
@@ -0,0 +1,447 @@
+"use client"
+
+import {
+   ArchiveX,
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   Command,
+   CreditCard,
+   File,
+   Inbox,
+   LogOut,
+   Send,
+   Sparkles,
+   Trash2,
+} from "lucide-react"
+import * as React from "react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Label } from "~/registry/miami/ui/label"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarHeader,
+   SidebarInput,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+import { Switch } from "~/registry/miami/ui/switch"
+
+// This is sample data
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Inbox",
+         url: "#",
+         icon: Inbox,
+         isActive: true,
+      },
+      {
+         title: "Drafts",
+         url: "#",
+         icon: File,
+         isActive: false,
+      },
+      {
+         title: "Sent",
+         url: "#",
+         icon: Send,
+         isActive: false,
+      },
+      {
+         title: "Junk",
+         url: "#",
+         icon: ArchiveX,
+         isActive: false,
+      },
+      {
+         title: "Trash",
+         url: "#",
+         icon: Trash2,
+         isActive: false,
+      },
+   ],
+   mails: [
+      {
+         name: "William Smith",
+         email: "williamsmith@example.com",
+         subject: "Meeting Tomorrow",
+         date: "09:34 AM",
+         teaser:
+            "Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.",
+      },
+      {
+         name: "Alice Smith",
+         email: "alicesmith@example.com",
+         subject: "Re: Project Update",
+         date: "Yesterday",
+         teaser:
+            "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.",
+      },
+      {
+         name: "Bob Johnson",
+         email: "bobjohnson@example.com",
+         subject: "Weekend Plans",
+         date: "2 days ago",
+         teaser:
+            "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?",
+      },
+      {
+         name: "Emily Davis",
+         email: "emilydavis@example.com",
+         subject: "Re: Question about Budget",
+         date: "2 days ago",
+         teaser:
+            "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?",
+      },
+      {
+         name: "Michael Wilson",
+         email: "michaelwilson@example.com",
+         subject: "Important Announcement",
+         date: "1 week ago",
+         teaser:
+            "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.",
+      },
+      {
+         name: "Sarah Brown",
+         email: "sarahbrown@example.com",
+         subject: "Re: Feedback on Proposal",
+         date: "1 week ago",
+         teaser:
+            "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?",
+      },
+      {
+         name: "David Lee",
+         email: "davidlee@example.com",
+         subject: "New Project Idea",
+         date: "1 week ago",
+         teaser:
+            "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?",
+      },
+      {
+         name: "Olivia Wilson",
+         email: "oliviawilson@example.com",
+         subject: "Vacation Plans",
+         date: "1 week ago",
+         teaser:
+            "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.",
+      },
+      {
+         name: "James Martin",
+         email: "jamesmartin@example.com",
+         subject: "Re: Conference Registration",
+         date: "1 week ago",
+         teaser:
+            "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.",
+      },
+      {
+         name: "Sophia White",
+         email: "sophiawhite@example.com",
+         subject: "Team Dinner",
+         date: "1 week ago",
+         teaser:
+            "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.",
+      },
+   ],
+}
+
+export const iframeHeight = "800px"
+
+export const description = "Collapsible nested sidebars."
+
+export default function Page() {
+   return (
+      <SidebarProvider
+         style={
+            {
+               "--sidebar-width": "350px",
+            } as React.CSSProperties
+         }
+      >
+         <AppSidebar />
+         <SidebarInset>
+            <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Inbox</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               {Array.from({ length: 24 }).map((_, index) => (
+                  <div
+                     key={index}
+                     className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                  />
+               ))}
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   // Note: I'm using state to show active item.
+   // IRL you should use the url/router.
+   const [activeItem, setActiveItem] = React.useState(data.navMain[0])
+   const [mails, setMails] = React.useState(data.mails)
+   const { setOpen } = useSidebar()
+
+   return (
+      <Sidebar
+         collapsible="icon"
+         className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row"
+         {...props}
+      >
+         {/* This is the first sidebar */}
+         {/* We disable collapsible and adjust width to icon. */}
+         {/* This will make the sidebar appear as icons. */}
+         <Sidebar
+            collapsible="none"
+            className="!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r"
+         >
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <SidebarMenuButton
+                        size="lg"
+                        asChild
+                        className="md:h-8 md:p-0"
+                     >
+                        <a href="#">
+                           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                              <Command className="size-4" />
+                           </div>
+                           <div className="grid flex-1 text-left text-sm leading-tight">
+                              <span className="truncate font-semibold">
+                                 Acme Inc
+                              </span>
+                              <span className="truncate text-xs">
+                                 Enterprise
+                              </span>
+                           </div>
+                        </a>
+                     </SidebarMenuButton>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupContent className="px-1.5 md:px-0">
+                     <SidebarMenu>
+                        {data.navMain.map((item) => (
+                           <SidebarMenuItem key={item.title}>
+                              <SidebarMenuButton
+                                 tooltip={{
+                                    children: item.title,
+                                    hidden: false,
+                                 }}
+                                 onClick={() => {
+                                    setActiveItem(item)
+                                    const mail = data.mails.sort(
+                                       () => Math.random() - 0.5,
+                                    )
+                                    setMails(
+                                       mail.slice(
+                                          0,
+                                          Math.max(
+                                             5,
+                                             Math.floor(Math.random() * 10) + 1,
+                                          ),
+                                       ),
+                                    )
+                                    setOpen(true)
+                                 }}
+                                 isActive={activeItem.title === item.title}
+                                 className="px-2.5 md:px-2"
+                              >
+                                 <item.icon />
+                                 <span>{item.title}</span>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+               <NavUser user={data.user} />
+            </SidebarFooter>
+         </Sidebar>
+
+         {/* This is the second sidebar */}
+         {/* We disable collapsible and let it fill remaining space */}
+         <Sidebar collapsible="none" className="hidden flex-1 md:flex">
+            <SidebarHeader className="gap-3.5 border-b p-4">
+               <div className="flex w-full items-center justify-between">
+                  <div className="text-base font-medium text-foreground">
+                     {activeItem.title}
+                  </div>
+                  <Label className="flex items-center gap-2 text-sm">
+                     <span>Unreads</span>
+                     <Switch className="shadow-none" />
+                  </Label>
+               </div>
+               <SidebarInput placeholder="Type to search..." />
+            </SidebarHeader>
+            <SidebarContent>
+               <SidebarGroup className="px-0">
+                  <SidebarGroupContent>
+                     {mails.map((mail) => (
+                        <a
+                           href="#"
+                           key={mail.email}
+                           className="flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                        >
+                           <div className="flex w-full items-center gap-2">
+                              <span>{mail.name}</span>{" "}
+                              <span className="ml-auto text-xs">
+                                 {mail.date}
+                              </span>
+                           </div>
+                           <span className="font-medium">{mail.subject}</span>
+                           <span className="line-clamp-2 w-[260px] whitespace-break-spaces text-xs">
+                              {mail.teaser}
+                           </span>
+                        </a>
+                     ))}
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </Sidebar>
+   )
+}
+
+function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="end"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-10.tsx b/apps/web/registry/miami/internal/sidebar-10.tsx
new file mode 100644
index 00000000..f7886e5a
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-10.tsx
@@ -0,0 +1,755 @@
+"use client"
+
+import {
+   ArrowDown,
+   ArrowUp,
+   ArrowUpRight,
+   AudioWaveform,
+   Bell,
+   Blocks,
+   Calendar,
+   ChevronDown,
+   ChevronRight,
+   Command,
+   Copy,
+   CornerUpLeft,
+   CornerUpRight,
+   FileText,
+   GalleryVerticalEnd,
+   Home,
+   Inbox,
+   LineChart,
+   Link,
+   type LucideIcon,
+   MessageCircleQuestion,
+   MoreHorizontal,
+   Plus,
+   Search,
+   Settings2,
+   Sparkles,
+   Star,
+   StarOff,
+   Trash,
+   Trash2,
+} from "lucide-react"
+import * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar in a popover."
+
+// This is sample data.
+const data = {
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: Command,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Search",
+         url: "#",
+         icon: Search,
+      },
+      {
+         title: "Ask AI",
+         url: "#",
+         icon: Sparkles,
+      },
+      {
+         title: "Home",
+         url: "#",
+         icon: Home,
+         isActive: true,
+      },
+      {
+         title: "Inbox",
+         url: "#",
+         icon: Inbox,
+         badge: "10",
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Calendar",
+         url: "#",
+         icon: Calendar,
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+      },
+      {
+         title: "Templates",
+         url: "#",
+         icon: Blocks,
+      },
+      {
+         title: "Trash",
+         url: "#",
+         icon: Trash2,
+      },
+      {
+         title: "Help",
+         url: "#",
+         icon: MessageCircleQuestion,
+      },
+   ],
+   favorites: [
+      {
+         name: "Project Management & Task Tracking",
+         url: "#",
+         emoji: "📊",
+      },
+      {
+         name: "Family Recipe Collection & Meal Planning",
+         url: "#",
+         emoji: "🍳",
+      },
+      {
+         name: "Fitness Tracker & Workout Routines",
+         url: "#",
+         emoji: "💪",
+      },
+      {
+         name: "Book Notes & Reading List",
+         url: "#",
+         emoji: "📚",
+      },
+      {
+         name: "Sustainable Gardening Tips & Plant Care",
+         url: "#",
+         emoji: "🌱",
+      },
+      {
+         name: "Language Learning Progress & Resources",
+         url: "#",
+         emoji: "🗣️",
+      },
+      {
+         name: "Home Renovation Ideas & Budget Tracker",
+         url: "#",
+         emoji: "🏠",
+      },
+      {
+         name: "Personal Finance & Investment Portfolio",
+         url: "#",
+         emoji: "💰",
+      },
+      {
+         name: "Movie & TV Show Watchlist with Reviews",
+         url: "#",
+         emoji: "🎬",
+      },
+      {
+         name: "Daily Habit Tracker & Goal Setting",
+         url: "#",
+         emoji: "✅",
+      },
+   ],
+   workspaces: [
+      {
+         name: "Personal Life Management",
+         emoji: "🏠",
+         pages: [
+            {
+               name: "Daily Journal & Reflection",
+               url: "#",
+               emoji: "📔",
+            },
+            {
+               name: "Health & Wellness Tracker",
+               url: "#",
+               emoji: "🍏",
+            },
+            {
+               name: "Personal Growth & Learning Goals",
+               url: "#",
+               emoji: "🌟",
+            },
+         ],
+      },
+      {
+         name: "Professional Development",
+         emoji: "💼",
+         pages: [
+            {
+               name: "Career Objectives & Milestones",
+               url: "#",
+               emoji: "🎯",
+            },
+            {
+               name: "Skill Acquisition & Training Log",
+               url: "#",
+               emoji: "🧠",
+            },
+            {
+               name: "Networking Contacts & Events",
+               url: "#",
+               emoji: "🤝",
+            },
+         ],
+      },
+      {
+         name: "Creative Projects",
+         emoji: "🎨",
+         pages: [
+            {
+               name: "Writing Ideas & Story Outlines",
+               url: "#",
+               emoji: "✍️",
+            },
+            {
+               name: "Art & Design Portfolio",
+               url: "#",
+               emoji: "🖼️",
+            },
+            {
+               name: "Music Composition & Practice Log",
+               url: "#",
+               emoji: "🎵",
+            },
+         ],
+      },
+      {
+         name: "Home Management",
+         emoji: "🏡",
+         pages: [
+            {
+               name: "Household Budget & Expense Tracking",
+               url: "#",
+               emoji: "💰",
+            },
+            {
+               name: "Home Maintenance Schedule & Tasks",
+               url: "#",
+               emoji: "🔧",
+            },
+            {
+               name: "Family Calendar & Event Planning",
+               url: "#",
+               emoji: "📅",
+            },
+         ],
+      },
+      {
+         name: "Travel & Adventure",
+         emoji: "🧳",
+         pages: [
+            {
+               name: "Trip Planning & Itineraries",
+               url: "#",
+               emoji: "🗺️",
+            },
+            {
+               name: "Travel Bucket List & Inspiration",
+               url: "#",
+               emoji: "🌎",
+            },
+            {
+               name: "Travel Journal & Photo Gallery",
+               url: "#",
+               emoji: "📸",
+            },
+         ],
+      },
+   ],
+   actions: [
+      [
+         {
+            label: "Customize Page",
+            icon: Settings2,
+         },
+         {
+            label: "Turn into wiki",
+            icon: FileText,
+         },
+      ],
+      [
+         {
+            label: "Copy Link",
+            icon: Link,
+         },
+         {
+            label: "Duplicate",
+            icon: Copy,
+         },
+         {
+            label: "Move to",
+            icon: CornerUpRight,
+         },
+         {
+            label: "Move to Trash",
+            icon: Trash2,
+         },
+      ],
+      [
+         {
+            label: "Undo",
+            icon: CornerUpLeft,
+         },
+         {
+            label: "View analytics",
+            icon: LineChart,
+         },
+         {
+            label: "Version History",
+            icon: GalleryVerticalEnd,
+         },
+         {
+            label: "Show delete pages",
+            icon: Trash,
+         },
+         {
+            label: "Notifications",
+            icon: Bell,
+         },
+      ],
+      [
+         {
+            label: "Import",
+            icon: ArrowUp,
+         },
+         {
+            label: "Export",
+            icon: ArrowDown,
+         },
+      ],
+   ],
+}
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-14 shrink-0 items-center gap-2">
+               <div className="flex flex-1 items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem>
+                           <BreadcrumbPage className="line-clamp-1">
+                              Project Management & Task Tracking
+                           </BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+               <div className="ml-auto px-3">
+                  <NavActions actions={data.actions} />
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+               <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+               <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar className="border-r-0" {...props}>
+         <SidebarHeader>
+            <TeamSwitcher teams={data.teams} />
+            <NavMain items={data.navMain} />
+         </SidebarHeader>
+         <SidebarContent>
+            <NavFavorites favorites={data.favorites} />
+            <NavWorkspaces workspaces={data.workspaces} />
+            <NavSecondary items={data.navSecondary} className="mt-auto" />
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
+
+function NavActions({
+   actions,
+}: {
+   actions: {
+      label: string
+      icon: LucideIcon
+   }[][]
+}) {
+   const [isOpen, setIsOpen] = React.useState(false)
+
+   React.useEffect(() => {
+      setIsOpen(true)
+   }, [])
+
+   return (
+      <div className="flex items-center gap-2 text-sm">
+         <div className="hidden font-medium text-muted-foreground md:inline-block">
+            Edit Oct 08
+         </div>
+         <Button variant="ghost" size="icon" className="h-7 w-7">
+            <Star />
+         </Button>
+         <Popover open={isOpen} onOpenChange={setIsOpen}>
+            <PopoverTrigger asChild>
+               <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 data-[state=open]:bg-accent"
+               >
+                  <MoreHorizontal />
+               </Button>
+            </PopoverTrigger>
+            <PopoverContent
+               className="w-56 overflow-hidden rounded-lg p-0"
+               align="end"
+            >
+               <Sidebar collapsible="none" className="bg-transparent">
+                  <SidebarContent>
+                     {actions.map((group, index) => (
+                        <SidebarGroup
+                           key={index}
+                           className="border-b last:border-none"
+                        >
+                           <SidebarGroupContent className="gap-0">
+                              <SidebarMenu>
+                                 {group.map((item, index) => (
+                                    <SidebarMenuItem key={index}>
+                                       <SidebarMenuButton>
+                                          <item.icon />{" "}
+                                          <span>{item.label}</span>
+                                       </SidebarMenuButton>
+                                    </SidebarMenuItem>
+                                 ))}
+                              </SidebarMenu>
+                           </SidebarGroupContent>
+                        </SidebarGroup>
+                     ))}
+                  </SidebarContent>
+               </Sidebar>
+            </PopoverContent>
+         </Popover>
+      </div>
+   )
+}
+
+function NavFavorites({
+   favorites,
+}: {
+   favorites: {
+      name: string
+      url: string
+      emoji: string
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+         <SidebarMenu>
+            {favorites.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url} title={item.name}>
+                        <span>{item.emoji}</span>
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-56 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <StarOff className="text-muted-foreground" />
+                           <span>Remove from Favorites</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Link className="text-muted-foreground" />
+                           <span>Copy Link</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <ArrowUpRight className="text-muted-foreground" />
+                           <span>Open in New Tab</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
+
+function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      isActive?: boolean
+   }[]
+}) {
+   return (
+      <SidebarMenu>
+         {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+               <SidebarMenuButton asChild isActive={item.isActive}>
+                  <a href={item.url}>
+                     <item.icon />
+                     <span>{item.title}</span>
+                  </a>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         ))}
+      </SidebarMenu>
+   )
+}
+
+function NavSecondary({
+   items,
+   ...props
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      badge?: React.ReactNode
+   }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+   return (
+      <SidebarGroup {...props}>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                     <SidebarMenuButton asChild>
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                     {item.badge && (
+                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+                     )}
+                  </SidebarMenuItem>
+               ))}
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
+
+function NavWorkspaces({
+   workspaces,
+}: {
+   workspaces: {
+      name: string
+      emoji: React.ReactNode
+      pages: {
+         name: string
+         emoji: React.ReactNode
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {workspaces.map((workspace) => (
+                  <Collapsible key={workspace.name}>
+                     <SidebarMenuItem>
+                        <SidebarMenuButton asChild>
+                           <a href="#">
+                              <span>{workspace.emoji}</span>
+                              <span>{workspace.name}</span>
+                           </a>
+                        </SidebarMenuButton>
+                        <CollapsibleTrigger asChild>
+                           <SidebarMenuAction
+                              className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                              showOnHover
+                           >
+                              <ChevronRight />
+                           </SidebarMenuAction>
+                        </CollapsibleTrigger>
+                        <SidebarMenuAction showOnHover>
+                           <Plus />
+                        </SidebarMenuAction>
+                        <CollapsibleContent>
+                           <SidebarMenuSub>
+                              {workspace.pages.map((page) => (
+                                 <SidebarMenuSubItem key={page.name}>
+                                    <SidebarMenuSubButton asChild>
+                                       <a href="#">
+                                          <span>{page.emoji}</span>
+                                          <span>{page.name}</span>
+                                       </a>
+                                    </SidebarMenuSubButton>
+                                 </SidebarMenuSubItem>
+                              ))}
+                           </SidebarMenuSub>
+                        </CollapsibleContent>
+                     </SidebarMenuItem>
+                  </Collapsible>
+               ))}
+               <SidebarMenuItem>
+                  <SidebarMenuButton className="text-sidebar-foreground/70">
+                     <MoreHorizontal />
+                     <span>More</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
+
+function TeamSwitcher({
+   teams,
+}: {
+   teams: {
+      name: string
+      logo: React.ElementType
+      plan: string
+   }[]
+}) {
+   const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="w-fit px-1.5">
+                     <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                        <activeTeam.logo className="size-3" />
+                     </div>
+                     <span className="truncate font-semibold">
+                        {activeTeam.name}
+                     </span>
+                     <ChevronDown className="opacity-50" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-64 rounded-lg"
+                  align="start"
+                  side="bottom"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                     Teams
+                  </DropdownMenuLabel>
+                  {teams.map((team, index) => (
+                     <DropdownMenuItem
+                        key={team.name}
+                        onClick={() => setActiveTeam(team)}
+                        className="gap-2 p-2"
+                     >
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
+                           <team.logo className="size-4 shrink-0" />
+                        </div>
+                        {team.name}
+                        <DropdownMenuShortcut>
+                           ⌘{index + 1}
+                        </DropdownMenuShortcut>
+                     </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                     <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                        <Plus className="size-4" />
+                     </div>
+                     <div className="font-medium text-muted-foreground">
+                        Add team
+                     </div>
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-11.tsx b/apps/web/registry/miami/internal/sidebar-11.tsx
new file mode 100644
index 00000000..6a3aa222
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-11.tsx
@@ -0,0 +1,194 @@
+import { ChevronRight, File, Folder } from "lucide-react"
+import type * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   changes: [
+      {
+         file: "README.md",
+         state: "M",
+      },
+      {
+         file: "api/hello/route.ts",
+         state: "U",
+      },
+      {
+         file: "app/layout.tsx",
+         state: "M",
+      },
+   ],
+   tree: [
+      [
+         "app",
+         [
+            "api",
+            ["hello", ["route.ts"]],
+            "page.tsx",
+            "layout.tsx",
+            ["blog", ["page.tsx"]],
+         ],
+      ],
+      [
+         "components",
+         ["ui", "button.tsx", "card.tsx"],
+         "header.tsx",
+         "footer.tsx",
+      ],
+      ["lib", ["util.ts"]],
+      ["public", "favicon.ico", "vercel.svg"],
+      ".eslintrc.json",
+      ".gitignore",
+      "next.config.js",
+      "tailwind.config.js",
+      "package.json",
+      "README.md",
+   ],
+}
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a collapsible file tree."
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">components</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">ui</BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>button.tsx</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarGroupLabel>Changes</SidebarGroupLabel>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {data.changes.map((item, index) => (
+                        <SidebarMenuItem key={index}>
+                           <SidebarMenuButton>
+                              <File />
+                              {item.file}
+                           </SidebarMenuButton>
+                           <SidebarMenuBadge>{item.state}</SidebarMenuBadge>
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+            <SidebarGroup>
+               <SidebarGroupLabel>Files</SidebarGroupLabel>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {data.tree.map((item, index) => (
+                        <Tree key={index} item={item} />
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
+
+function Tree({ item }: { item: string | any[] }) {
+   const [name, ...items] = Array.isArray(item) ? item : [item]
+
+   if (!items.length) {
+      return (
+         <SidebarMenuButton
+            isActive={name === "button.tsx"}
+            className="data-[active=true]:bg-transparent"
+         >
+            <File />
+            {name}
+         </SidebarMenuButton>
+      )
+   }
+
+   return (
+      <SidebarMenuItem>
+         <Collapsible
+            className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+            defaultOpen={name === "components" || name === "ui"}
+         >
+            <CollapsibleTrigger asChild>
+               <SidebarMenuButton>
+                  <ChevronRight className="transition-transform" />
+                  <Folder />
+                  {name}
+               </SidebarMenuButton>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+               <SidebarMenuSub>
+                  {items.map((subItem, index) => (
+                     <Tree key={index} item={subItem} />
+                  ))}
+               </SidebarMenuSub>
+            </CollapsibleContent>
+         </Collapsible>
+      </SidebarMenuItem>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-12.tsx b/apps/web/registry/miami/internal/sidebar-12.tsx
new file mode 100644
index 00000000..13a2cacf
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-12.tsx
@@ -0,0 +1,297 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   Check,
+   ChevronRight,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Plus,
+   Sparkles,
+} from "lucide-react"
+import * as React from "react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Calendar } from "~/registry/miami/ui/calendar"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarSeparator,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   calendars: [
+      {
+         name: "My Calendars",
+         items: ["Personal", "Work", "Family"],
+      },
+      {
+         name: "Favorites",
+         items: ["Holidays", "Birthdays"],
+      },
+      {
+         name: "Other",
+         items: ["Travel", "Reminders", "Deadlines"],
+      },
+   ],
+}
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a calendar."
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+               <SidebarTrigger className="-ml-1" />
+               <Separator orientation="vertical" className="mr-2 h-4" />
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>October 2024</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+                  {Array.from({ length: 20 }).map((_, i) => (
+                     <div
+                        key={i}
+                        className="aspect-square rounded-xl bg-muted/50"
+                     />
+                  ))}
+               </div>
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarHeader className="h-16 border-b border-sidebar-border">
+            <NavUser user={data.user} />
+         </SidebarHeader>
+         <SidebarContent>
+            <DatePicker />
+            <SidebarSeparator className="mx-0" />
+            <Calendars calendars={data.calendars} />
+         </SidebarContent>
+         <SidebarFooter>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton>
+                     <Plus />
+                     <span>New Calendar</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarFooter>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
+
+function Calendars({
+   calendars,
+}: {
+   calendars: {
+      name: string
+      items: string[]
+   }[]
+}) {
+   return (
+      <>
+         {calendars.map((calendar, index) => (
+            <React.Fragment key={calendar.name}>
+               <SidebarGroup key={calendar.name} className="py-0">
+                  <Collapsible
+                     defaultOpen={index === 0}
+                     className="group/collapsible"
+                  >
+                     <SidebarGroupLabel
+                        asChild
+                        className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                     >
+                        <CollapsibleTrigger>
+                           {calendar.name}{" "}
+                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                        </CollapsibleTrigger>
+                     </SidebarGroupLabel>
+                     <CollapsibleContent>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {calendar.items.map((item, index) => (
+                                 <SidebarMenuItem key={item}>
+                                    <SidebarMenuButton>
+                                       <div
+                                          data-active={index < 2}
+                                          className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                                       >
+                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                                       </div>
+                                       {item}
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </CollapsibleContent>
+                  </Collapsible>
+               </SidebarGroup>
+               <SidebarSeparator className="mx-0" />
+            </React.Fragment>
+         ))}
+      </>
+   )
+}
+
+function DatePicker() {
+   return (
+      <SidebarGroup className="px-0">
+         <SidebarGroupContent>
+            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
+
+function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="start"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-13.tsx b/apps/web/registry/miami/internal/sidebar-13.tsx
new file mode 100644
index 00000000..7ff6e16c
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-13.tsx
@@ -0,0 +1,147 @@
+"use client"
+
+import {
+   Bell,
+   Check,
+   Globe,
+   Home,
+   Keyboard,
+   Link,
+   Lock,
+   Menu,
+   MessageCircle,
+   Paintbrush,
+   Settings,
+   Video,
+} from "lucide-react"
+import * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogTitle,
+   DialogTrigger,
+} from "~/registry/miami/ui/dialog"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar in a dialog."
+
+const data = {
+   nav: [
+      { name: "Notifications", icon: Bell },
+      { name: "Navigation", icon: Menu },
+      { name: "Home", icon: Home },
+      { name: "Appearance", icon: Paintbrush },
+      { name: "Messages & media", icon: MessageCircle },
+      { name: "Language & region", icon: Globe },
+      { name: "Accessibility", icon: Keyboard },
+      { name: "Mark as read", icon: Check },
+      { name: "Audio & video", icon: Video },
+      { name: "Connected accounts", icon: Link },
+      { name: "Privacy & visibility", icon: Lock },
+      { name: "Advanced", icon: Settings },
+   ],
+}
+
+export default function Page() {
+   return (
+      <div className="flex h-svh items-center justify-center">
+         <SettingsDialog />
+      </div>
+   )
+}
+
+function SettingsDialog() {
+   const [open, setOpen] = React.useState(true)
+
+   return (
+      <Dialog open={open} onOpenChange={setOpen}>
+         <DialogTrigger asChild>
+            <Button size="sm">Open Dialog</Button>
+         </DialogTrigger>
+         <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+            <DialogTitle className="sr-only">Settings</DialogTitle>
+            <DialogDescription className="sr-only">
+               Customize your settings here.
+            </DialogDescription>
+            <SidebarProvider className="items-start">
+               <Sidebar collapsible="none" className="hidden md:flex">
+                  <SidebarContent>
+                     <SidebarGroup>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {data.nav.map((item) => (
+                                 <SidebarMenuItem key={item.name}>
+                                    <SidebarMenuButton
+                                       asChild
+                                       isActive={
+                                          item.name === "Messages & media"
+                                       }
+                                    >
+                                       <a href="#">
+                                          <item.icon />
+                                          <span>{item.name}</span>
+                                       </a>
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </SidebarGroup>
+                  </SidebarContent>
+               </Sidebar>
+               <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
+                  <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+                     <div className="flex items-center gap-2 px-4">
+                        <Breadcrumb>
+                           <BreadcrumbList>
+                              <BreadcrumbItem className="hidden md:block">
+                                 <BreadcrumbLink href="#">
+                                    Settings
+                                 </BreadcrumbLink>
+                              </BreadcrumbItem>
+                              <BreadcrumbSeparator className="hidden md:block" />
+                              <BreadcrumbItem>
+                                 <BreadcrumbPage>
+                                    Messages & media
+                                 </BreadcrumbPage>
+                              </BreadcrumbItem>
+                           </BreadcrumbList>
+                        </Breadcrumb>
+                     </div>
+                  </header>
+                  <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+                     {Array.from({ length: 10 }).map((_, i) => (
+                        <div
+                           key={i}
+                           className="aspect-video max-w-3xl rounded-xl bg-muted/50"
+                        />
+                     ))}
+                  </div>
+               </main>
+            </SidebarProvider>
+         </DialogContent>
+      </Dialog>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-14.tsx b/apps/web/registry/miami/internal/sidebar-14.tsx
new file mode 100644
index 00000000..ec39f553
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-14.tsx
@@ -0,0 +1,246 @@
+import type * as React from "react"
+
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar on the right."
+
+// This is sample data.
+const data = {
+   navMain: [
+      {
+         title: "Getting Started",
+         url: "#",
+         items: [
+            {
+               title: "Installation",
+               url: "#",
+            },
+            {
+               title: "Project Structure",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Building Your Application",
+         url: "#",
+         items: [
+            {
+               title: "Routing",
+               url: "#",
+            },
+            {
+               title: "Data Fetching",
+               url: "#",
+               isActive: true,
+            },
+            {
+               title: "Rendering",
+               url: "#",
+            },
+            {
+               title: "Caching",
+               url: "#",
+            },
+            {
+               title: "Styling",
+               url: "#",
+            },
+            {
+               title: "Optimizing",
+               url: "#",
+            },
+            {
+               title: "Configuring",
+               url: "#",
+            },
+            {
+               title: "Testing",
+               url: "#",
+            },
+            {
+               title: "Authentication",
+               url: "#",
+            },
+            {
+               title: "Deploying",
+               url: "#",
+            },
+            {
+               title: "Upgrading",
+               url: "#",
+            },
+            {
+               title: "Examples",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "API Reference",
+         url: "#",
+         items: [
+            {
+               title: "Components",
+               url: "#",
+            },
+            {
+               title: "File Conventions",
+               url: "#",
+            },
+            {
+               title: "Functions",
+               url: "#",
+            },
+            {
+               title: "next.config.js Options",
+               url: "#",
+            },
+            {
+               title: "CLI",
+               url: "#",
+            },
+            {
+               title: "Edge Runtime",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Architecture",
+         url: "#",
+         items: [
+            {
+               title: "Accessibility",
+               url: "#",
+            },
+            {
+               title: "Fast Refresh",
+               url: "#",
+            },
+            {
+               title: "Next.js Compiler",
+               url: "#",
+            },
+            {
+               title: "Supported Browsers",
+               url: "#",
+            },
+            {
+               title: "Turbopack",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Community",
+         url: "#",
+         items: [
+            {
+               title: "Contribution Guide",
+               url: "#",
+            },
+         ],
+      },
+   ],
+}
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+               <Breadcrumb>
+                  <BreadcrumbList>
+                     <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">
+                           Building Your Application
+                        </BreadcrumbLink>
+                     </BreadcrumbItem>
+                     <BreadcrumbSeparator className="hidden md:block" />
+                     <BreadcrumbItem>
+                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                     </BreadcrumbItem>
+                  </BreadcrumbList>
+               </Breadcrumb>
+               <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+                  <div className="aspect-video rounded-xl bg-muted/50" />
+               </div>
+               <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+         </SidebarInset>
+         <AppSidebar side="right" />
+      </SidebarProvider>
+   )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar {...props}>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {data.navMain.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url} className="font-medium">
+                                 {item.title}
+                              </a>
+                           </SidebarMenuButton>
+                           {item.items?.length ? (
+                              <SidebarMenuSub>
+                                 {item.items.map((item) => (
+                                    <SidebarMenuSubItem key={item.title}>
+                                       <SidebarMenuSubButton
+                                          asChild
+                                          isActive={item.isActive}
+                                       >
+                                          <a href={item.url}>{item.title}</a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           ) : null}
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-15.tsx b/apps/web/registry/miami/internal/sidebar-15.tsx
new file mode 100644
index 00000000..168b53fc
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-15.tsx
@@ -0,0 +1,832 @@
+"use client"
+
+import {
+   ArrowUpRight,
+   AudioWaveform,
+   BadgeCheck,
+   Bell,
+   Blocks,
+   CalendarIcon,
+   Check,
+   ChevronDown,
+   ChevronRight,
+   ChevronsUpDown,
+   Command,
+   CreditCard,
+   Home,
+   Inbox,
+   Link,
+   LogOut,
+   type LucideIcon,
+   MessageCircleQuestion,
+   MoreHorizontal,
+   Plus,
+   Search,
+   Settings2,
+   Sparkles,
+   StarOff,
+   Trash2,
+} from "lucide-react"
+import * as React from "react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbList,
+   BreadcrumbPage,
+} from "~/registry/miami/ui/breadcrumb"
+import { Calendar } from "~/registry/miami/ui/calendar"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarRail,
+   SidebarSeparator,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A left and right sidebar."
+
+// This is sample data.
+const sidebarLeftData = {
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: Command,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Search",
+         url: "#",
+         icon: Search,
+      },
+      {
+         title: "Ask AI",
+         url: "#",
+         icon: Sparkles,
+      },
+      {
+         title: "Home",
+         url: "#",
+         icon: Home,
+         isActive: true,
+      },
+      {
+         title: "Inbox",
+         url: "#",
+         icon: Inbox,
+         badge: "10",
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Calendar",
+         url: "#",
+         icon: CalendarIcon,
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+      },
+      {
+         title: "Templates",
+         url: "#",
+         icon: Blocks,
+      },
+      {
+         title: "Trash",
+         url: "#",
+         icon: Trash2,
+      },
+      {
+         title: "Help",
+         url: "#",
+         icon: MessageCircleQuestion,
+      },
+   ],
+   favorites: [
+      {
+         name: "Project Management & Task Tracking",
+         url: "#",
+         emoji: "📊",
+      },
+      {
+         name: "Family Recipe Collection & Meal Planning",
+         url: "#",
+         emoji: "🍳",
+      },
+      {
+         name: "Fitness Tracker & Workout Routines",
+         url: "#",
+         emoji: "💪",
+      },
+      {
+         name: "Book Notes & Reading List",
+         url: "#",
+         emoji: "📚",
+      },
+      {
+         name: "Sustainable Gardening Tips & Plant Care",
+         url: "#",
+         emoji: "🌱",
+      },
+      {
+         name: "Language Learning Progress & Resources",
+         url: "#",
+         emoji: "🗣️",
+      },
+      {
+         name: "Home Renovation Ideas & Budget Tracker",
+         url: "#",
+         emoji: "🏠",
+      },
+      {
+         name: "Personal Finance & Investment Portfolio",
+         url: "#",
+         emoji: "💰",
+      },
+      {
+         name: "Movie & TV Show Watchlist with Reviews",
+         url: "#",
+         emoji: "🎬",
+      },
+      {
+         name: "Daily Habit Tracker & Goal Setting",
+         url: "#",
+         emoji: "✅",
+      },
+   ],
+   workspaces: [
+      {
+         name: "Personal Life Management",
+         emoji: "🏠",
+         pages: [
+            {
+               name: "Daily Journal & Reflection",
+               url: "#",
+               emoji: "📔",
+            },
+            {
+               name: "Health & Wellness Tracker",
+               url: "#",
+               emoji: "🍏",
+            },
+            {
+               name: "Personal Growth & Learning Goals",
+               url: "#",
+               emoji: "🌟",
+            },
+         ],
+      },
+      {
+         name: "Professional Development",
+         emoji: "💼",
+         pages: [
+            {
+               name: "Career Objectives & Milestones",
+               url: "#",
+               emoji: "🎯",
+            },
+            {
+               name: "Skill Acquisition & Training Log",
+               url: "#",
+               emoji: "🧠",
+            },
+            {
+               name: "Networking Contacts & Events",
+               url: "#",
+               emoji: "🤝",
+            },
+         ],
+      },
+      {
+         name: "Creative Projects",
+         emoji: "🎨",
+         pages: [
+            {
+               name: "Writing Ideas & Story Outlines",
+               url: "#",
+               emoji: "✍️",
+            },
+            {
+               name: "Art & Design Portfolio",
+               url: "#",
+               emoji: "🖼️",
+            },
+            {
+               name: "Music Composition & Practice Log",
+               url: "#",
+               emoji: "🎵",
+            },
+         ],
+      },
+      {
+         name: "Home Management",
+         emoji: "🏡",
+         pages: [
+            {
+               name: "Household Budget & Expense Tracking",
+               url: "#",
+               emoji: "💰",
+            },
+            {
+               name: "Home Maintenance Schedule & Tasks",
+               url: "#",
+               emoji: "🔧",
+            },
+            {
+               name: "Family Calendar & Event Planning",
+               url: "#",
+               emoji: "📅",
+            },
+         ],
+      },
+      {
+         name: "Travel & Adventure",
+         emoji: "🧳",
+         pages: [
+            {
+               name: "Trip Planning & Itineraries",
+               url: "#",
+               emoji: "🗺️",
+            },
+            {
+               name: "Travel Bucket List & Inspiration",
+               url: "#",
+               emoji: "🌎",
+            },
+            {
+               name: "Travel Journal & Photo Gallery",
+               url: "#",
+               emoji: "📸",
+            },
+         ],
+      },
+   ],
+}
+
+// This is sample data.
+const sidebarRightData = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   calendars: [
+      {
+         name: "My Calendars",
+         items: ["Personal", "Work", "Family"],
+      },
+      {
+         name: "Favorites",
+         items: ["Holidays", "Birthdays"],
+      },
+      {
+         name: "Other",
+         items: ["Travel", "Reminders", "Deadlines"],
+      },
+   ],
+}
+
+export default function Page() {
+   return (
+      <SidebarProvider>
+         <SidebarLeft />
+         <SidebarInset>
+            <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+               <div className="flex flex-1 items-center gap-2 px-3">
+                  <SidebarTrigger />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem>
+                           <BreadcrumbPage className="line-clamp-1">
+                              Project Management & Task Tracking
+                           </BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+               <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+            </div>
+         </SidebarInset>
+         <SidebarRight />
+      </SidebarProvider>
+   )
+}
+
+function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar className="border-r-0" {...props}>
+         <SidebarHeader>
+            <TeamSwitcher teams={sidebarLeftData.teams} />
+            <NavMain items={sidebarLeftData.navMain} />
+         </SidebarHeader>
+         <SidebarContent>
+            <NavFavorites favorites={sidebarLeftData.favorites} />
+            <NavWorkspaces workspaces={sidebarLeftData.workspaces} />
+            <NavSecondary
+               items={sidebarLeftData.navSecondary}
+               className="mt-auto"
+            />
+         </SidebarContent>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
+
+function SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar
+         collapsible="none"
+         className="sticky hidden lg:flex top-0 h-svh border-l"
+         {...props}
+      >
+         <SidebarHeader className="h-16 border-b border-sidebar-border">
+            <NavUser user={sidebarRightData.user} />
+         </SidebarHeader>
+         <SidebarContent>
+            <DatePicker />
+            <SidebarSeparator className="mx-0" />
+            <Calendars calendars={sidebarRightData.calendars} />
+         </SidebarContent>
+         <SidebarFooter>
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton>
+                     <Plus />
+                     <span>New Calendar</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarFooter>
+      </Sidebar>
+   )
+}
+
+function Calendars({
+   calendars,
+}: {
+   calendars: {
+      name: string
+      items: string[]
+   }[]
+}) {
+   return (
+      <>
+         {calendars.map((calendar, index) => (
+            <React.Fragment key={calendar.name}>
+               <SidebarGroup key={calendar.name} className="py-0">
+                  <Collapsible
+                     defaultOpen={index === 0}
+                     className="group/collapsible"
+                  >
+                     <SidebarGroupLabel
+                        asChild
+                        className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                     >
+                        <CollapsibleTrigger>
+                           {calendar.name}{" "}
+                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                        </CollapsibleTrigger>
+                     </SidebarGroupLabel>
+                     <CollapsibleContent>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              {calendar.items.map((item, index) => (
+                                 <SidebarMenuItem key={item}>
+                                    <SidebarMenuButton>
+                                       <div
+                                          data-active={index < 2}
+                                          className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                                       >
+                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                                       </div>
+                                       {item}
+                                    </SidebarMenuButton>
+                                 </SidebarMenuItem>
+                              ))}
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </CollapsibleContent>
+                  </Collapsible>
+               </SidebarGroup>
+               <SidebarSeparator className="mx-0" />
+            </React.Fragment>
+         ))}
+      </>
+   )
+}
+
+function DatePicker() {
+   return (
+      <SidebarGroup className="px-0">
+         <SidebarGroupContent>
+            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
+
+function NavFavorites({
+   favorites,
+}: {
+   favorites: {
+      name: string
+      url: string
+      emoji: string
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+         <SidebarMenu>
+            {favorites.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url} title={item.name}>
+                        <span>{item.emoji}</span>
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-56 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <StarOff className="text-muted-foreground" />
+                           <span>Remove from Favorites</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Link className="text-muted-foreground" />
+                           <span>Copy Link</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <ArrowUpRight className="text-muted-foreground" />
+                           <span>Open in New Tab</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
+
+function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      isActive?: boolean
+   }[]
+}) {
+   return (
+      <SidebarMenu>
+         {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+               <SidebarMenuButton asChild isActive={item.isActive}>
+                  <a href={item.url}>
+                     <item.icon />
+                     <span>{item.title}</span>
+                  </a>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         ))}
+      </SidebarMenu>
+   )
+}
+
+function NavSecondary({
+   items,
+   ...props
+}: {
+   items: {
+      title: string
+      url: string
+      icon: LucideIcon
+      badge?: React.ReactNode
+   }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+   return (
+      <SidebarGroup {...props}>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                     <SidebarMenuButton asChild>
+                        <a href={item.url}>
+                           <item.icon />
+                           <span>{item.title}</span>
+                        </a>
+                     </SidebarMenuButton>
+                     {item.badge && (
+                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+                     )}
+                  </SidebarMenuItem>
+               ))}
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
+
+function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="start"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
+
+function NavWorkspaces({
+   workspaces,
+}: {
+   workspaces: {
+      name: string
+      emoji: React.ReactNode
+      pages: {
+         name: string
+         emoji: React.ReactNode
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+         <SidebarGroupContent>
+            <SidebarMenu>
+               {workspaces.map((workspace) => (
+                  <Collapsible key={workspace.name}>
+                     <SidebarMenuItem>
+                        <SidebarMenuButton asChild>
+                           <a href="#">
+                              <span>{workspace.emoji}</span>
+                              <span>{workspace.name}</span>
+                           </a>
+                        </SidebarMenuButton>
+                        <CollapsibleTrigger asChild>
+                           <SidebarMenuAction
+                              className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                              showOnHover
+                           >
+                              <ChevronRight />
+                           </SidebarMenuAction>
+                        </CollapsibleTrigger>
+                        <SidebarMenuAction showOnHover>
+                           <Plus />
+                        </SidebarMenuAction>
+                        <CollapsibleContent>
+                           <SidebarMenuSub>
+                              {workspace.pages.map((page) => (
+                                 <SidebarMenuSubItem key={page.name}>
+                                    <SidebarMenuSubButton asChild>
+                                       <a href="#">
+                                          <span>{page.emoji}</span>
+                                          <span>{page.name}</span>
+                                       </a>
+                                    </SidebarMenuSubButton>
+                                 </SidebarMenuSubItem>
+                              ))}
+                           </SidebarMenuSub>
+                        </CollapsibleContent>
+                     </SidebarMenuItem>
+                  </Collapsible>
+               ))}
+               <SidebarMenuItem>
+                  <SidebarMenuButton className="text-sidebar-foreground/70">
+                     <MoreHorizontal />
+                     <span>More</span>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarGroupContent>
+      </SidebarGroup>
+   )
+}
+
+function TeamSwitcher({
+   teams,
+}: {
+   teams: {
+      name: string
+      logo: React.ElementType
+      plan: string
+   }[]
+}) {
+   const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="w-fit px-1.5">
+                     <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                        <activeTeam.logo className="size-3" />
+                     </div>
+                     <span className="truncate font-semibold">
+                        {activeTeam.name}
+                     </span>
+                     <ChevronDown className="opacity-50" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-64 rounded-lg"
+                  align="start"
+                  side="bottom"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                     Teams
+                  </DropdownMenuLabel>
+                  {teams.map((team, index) => (
+                     <DropdownMenuItem
+                        key={team.name}
+                        onClick={() => setActiveTeam(team)}
+                        className="gap-2 p-2"
+                     >
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
+                           <team.logo className="size-4 shrink-0" />
+                        </div>
+                        {team.name}
+                        <DropdownMenuShortcut>
+                           ⌘{index + 1}
+                        </DropdownMenuShortcut>
+                     </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                     <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                        <Plus className="size-4" />
+                     </div>
+                     <div className="font-medium text-muted-foreground">
+                        Add team
+                     </div>
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-16.tsx b/apps/web/registry/miami/internal/sidebar-16.tsx
new file mode 100644
index 00000000..0f650f16
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-16.tsx
@@ -0,0 +1,670 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   BookOpen,
+   Bot,
+   ChevronRight,
+   ChevronsUpDown,
+   Command,
+   CreditCard,
+   Folder,
+   Frame,
+   LifeBuoy,
+   LogOut,
+   Map,
+   MoreHorizontal,
+   PieChart,
+   Send,
+   Settings2,
+   Share,
+   Sparkles,
+   SquareTerminal,
+   Trash2,
+} from "lucide-react"
+import Link from "next/link"
+import * as React from "react"
+
+import { Icons } from "~/components/icons"
+import { ny } from "~/lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   NavigationMenu,
+   NavigationMenuContent,
+   NavigationMenuItem,
+   NavigationMenuLink,
+   NavigationMenuList,
+   NavigationMenuTrigger,
+   navigationMenuTriggerStyle,
+} from "~/registry/miami/ui/navigation-menu"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "An inset sidebar with site header navigation."
+
+const HEADER_HEIGHT = "4rem"
+
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Support",
+         url: "#",
+         icon: LifeBuoy,
+      },
+      {
+         title: "Feedback",
+         url: "#",
+         icon: Send,
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+const components: { title: string; href: string; description: string }[] = [
+   {
+      title: "Alert Dialog",
+      href: "/docs/primitives/alert-dialog",
+      description:
+         "A modal dialog that interrupts the user with important content and expects a response.",
+   },
+   {
+      title: "Hover Card",
+      href: "/docs/primitives/hover-card",
+      description:
+         "For sighted users to preview content available behind a link.",
+   },
+   {
+      title: "Progress",
+      href: "/docs/primitives/progress",
+      description:
+         "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+   },
+   {
+      title: "Scroll-area",
+      href: "/docs/primitives/scroll-area",
+      description: "Visually or semantically separates content.",
+   },
+   {
+      title: "Tabs",
+      href: "/docs/primitives/tabs",
+      description:
+         "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+   },
+   {
+      title: "Tooltip",
+      href: "/docs/primitives/tooltip",
+      description:
+         "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+   },
+]
+
+export default function Page() {
+   const [open, setOpen] = React.useState(true)
+   const { isMobile } = useSidebar()
+
+   return (
+      <div
+         style={
+            {
+               "--header-height": HEADER_HEIGHT,
+            } as React.CSSProperties
+         }
+      >
+         <header className="sticky top-0 bg-sidebar flex h-[--header-height] shrink-0 items-center gap-2 border-b px-4 isolate z-20">
+            <div className="flex items-center gap-2 w-full">
+               <Button
+                  className="hidden md:flex"
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setOpen(!open)}
+               >
+                  <Sidebar />
+               </Button>
+
+               <div className="mx-auto flex items-center gap-2">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                     <Command className="size-4" />
+                  </div>
+                  <Separator orientation="vertical" className="ml-4 h-4" />
+                  <NavigationMenu>
+                     <NavigationMenuList>
+                        <NavigationMenuItem>
+                           <NavigationMenuTrigger className="bg-sidebar">
+                              Getting started
+                           </NavigationMenuTrigger>
+                           <NavigationMenuContent>
+                              <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                                 <li className="row-span-3">
+                                    <NavigationMenuLink asChild>
+                                       <a
+                                          className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                                          href="/"
+                                       >
+                                          <Icons.logo className="h-6 w-6" />
+                                          <div className="mb-2 mt-4 text-lg font-medium">
+                                             nyxb/ui
+                                          </div>
+                                          <p className="text-sm leading-tight text-muted-foreground">
+                                             Beautifully designed components
+                                             built with Radix UI and Tailwind
+                                             CSS.
+                                          </p>
+                                       </a>
+                                    </NavigationMenuLink>
+                                 </li>
+
+                                 <li>
+                                    <NavigationMenuLink asChild>
+                                       <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                                          <div className="text-sm font-medium leading-none">
+                                             Introduction
+                                          </div>
+                                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                             Re-usable components built using
+                                             Radix UI and Tailwind CSS.
+                                          </p>
+                                       </a>
+                                    </NavigationMenuLink>
+                                 </li>
+
+                                 <li>
+                                    <NavigationMenuLink asChild>
+                                       <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                                          <div className="text-sm font-medium leading-none">
+                                             Installation
+                                          </div>
+                                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                             How to install dependencies and
+                                             structure your app.
+                                          </p>
+                                       </a>
+                                    </NavigationMenuLink>
+                                 </li>
+
+                                 <li>
+                                    <NavigationMenuLink asChild>
+                                       <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                                          <div className="text-sm font-medium leading-none">
+                                             Typography
+                                          </div>
+                                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                             Styles for headings, paragraphs,
+                                             lists...etc
+                                          </p>
+                                       </a>
+                                    </NavigationMenuLink>
+                                 </li>
+                              </ul>
+                           </NavigationMenuContent>
+                        </NavigationMenuItem>
+                        <NavigationMenuItem>
+                           <NavigationMenuTrigger className="bg-sidebar">
+                              Components
+                           </NavigationMenuTrigger>
+                           <NavigationMenuContent>
+                              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                                 {components.map((component) => (
+                                    <li>
+                                       <NavigationMenuLink
+                                          key={component.title}
+                                          asChild
+                                       >
+                                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                                             <div className="text-sm font-medium leading-none">
+                                                {component.title}
+                                             </div>
+                                             <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                                {component.description}
+                                             </p>
+                                          </a>
+                                       </NavigationMenuLink>
+                                    </li>
+                                 ))}
+                              </ul>
+                           </NavigationMenuContent>
+                        </NavigationMenuItem>
+                        <NavigationMenuItem>
+                           <Link href="/docs" legacyBehavior passHref>
+                              <NavigationMenuLink
+                                 className={ny(
+                                    navigationMenuTriggerStyle(),
+                                    "bg-sidebar",
+                                 )}
+                              >
+                                 Documentation
+                              </NavigationMenuLink>
+                           </Link>
+                        </NavigationMenuItem>
+                     </NavigationMenuList>
+                  </NavigationMenu>
+               </div>
+            </div>
+         </header>
+         <SidebarProvider open={open} onOpenChange={setOpen}>
+            <Sidebar
+               className="top-[--header-height] pb-[--header-height]"
+               variant="inset"
+            >
+               <SidebarHeader>
+                  <SidebarMenu>
+                     <SidebarMenuItem>
+                        <SidebarMenuButton size="lg" asChild>
+                           <a href="#">
+                              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                                 <Command className="size-4" />
+                              </div>
+                              <div className="grid flex-1 text-left text-sm leading-tight">
+                                 <span className="truncate font-semibold">
+                                    Acme Inc
+                                 </span>
+                                 <span className="truncate text-xs">
+                                    Enterprise
+                                 </span>
+                              </div>
+                           </a>
+                        </SidebarMenuButton>
+                     </SidebarMenuItem>
+                  </SidebarMenu>
+               </SidebarHeader>
+               <SidebarContent>
+                  <SidebarGroup>
+                     <SidebarGroupLabel>Platform</SidebarGroupLabel>
+                     <SidebarMenu>
+                        {data.navMain.map((item) => (
+                           <Collapsible
+                              key={item.title}
+                              asChild
+                              defaultOpen={item.isActive}
+                           >
+                              <SidebarMenuItem>
+                                 <SidebarMenuButton
+                                    asChild
+                                    tooltip={item.title}
+                                 >
+                                    <a href={item.url}>
+                                       <item.icon />
+                                       <span>{item.title}</span>
+                                    </a>
+                                 </SidebarMenuButton>
+                                 {item.items?.length ? (
+                                    <>
+                                       <CollapsibleTrigger asChild>
+                                          <SidebarMenuAction className="data-[state=open]:rotate-90">
+                                             <ChevronRight />
+                                             <span className="sr-only">
+                                                Toggle
+                                             </span>
+                                          </SidebarMenuAction>
+                                       </CollapsibleTrigger>
+                                       <CollapsibleContent>
+                                          <SidebarMenuSub>
+                                             {item.items?.map((subItem) => (
+                                                <SidebarMenuSubItem
+                                                   key={subItem.title}
+                                                >
+                                                   <SidebarMenuSubButton
+                                                      asChild
+                                                   >
+                                                      <a href={subItem.url}>
+                                                         <span>
+                                                            {subItem.title}
+                                                         </span>
+                                                      </a>
+                                                   </SidebarMenuSubButton>
+                                                </SidebarMenuSubItem>
+                                             ))}
+                                          </SidebarMenuSub>
+                                       </CollapsibleContent>
+                                    </>
+                                 ) : null}
+                              </SidebarMenuItem>
+                           </Collapsible>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroup>
+                  <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+                     <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                     <SidebarMenu>
+                        {data.projects.map((item) => (
+                           <SidebarMenuItem key={item.name}>
+                              <SidebarMenuButton asChild>
+                                 <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.name}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                              <DropdownMenu>
+                                 <DropdownMenuTrigger asChild>
+                                    <SidebarMenuAction showOnHover>
+                                       <MoreHorizontal />
+                                       <span className="sr-only">More</span>
+                                    </SidebarMenuAction>
+                                 </DropdownMenuTrigger>
+                                 <DropdownMenuContent
+                                    className="w-48"
+                                    side={isMobile ? "bottom" : "right"}
+                                    align={isMobile ? "end" : "start"}
+                                 >
+                                    <DropdownMenuItem>
+                                       <Folder className="text-muted-foreground" />
+                                       <span>View Project</span>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem>
+                                       <Share className="text-muted-foreground" />
+                                       <span>Share Project</span>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem>
+                                       <Trash2 className="text-muted-foreground" />
+                                       <span>Delete Project</span>
+                                    </DropdownMenuItem>
+                                 </DropdownMenuContent>
+                              </DropdownMenu>
+                           </SidebarMenuItem>
+                        ))}
+                        <SidebarMenuItem>
+                           <SidebarMenuButton>
+                              <MoreHorizontal />
+                              <span>More</span>
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                     </SidebarMenu>
+                  </SidebarGroup>
+                  <SidebarGroup className="mt-auto">
+                     <SidebarGroupContent>
+                        <SidebarMenu>
+                           {data.navSecondary.map((item) => (
+                              <SidebarMenuItem key={item.title}>
+                                 <SidebarMenuButton asChild size="sm">
+                                    <a href={item.url}>
+                                       <item.icon />
+                                       <span>{item.title}</span>
+                                    </a>
+                                 </SidebarMenuButton>
+                              </SidebarMenuItem>
+                           ))}
+                        </SidebarMenu>
+                     </SidebarGroupContent>
+                  </SidebarGroup>
+               </SidebarContent>
+               <SidebarFooter>
+                  <SidebarMenu>
+                     <SidebarMenuItem>
+                        <DropdownMenu>
+                           <DropdownMenuTrigger asChild>
+                              <SidebarMenuButton
+                                 size="lg"
+                                 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                              >
+                                 <Avatar className="h-8 w-8 rounded-lg">
+                                    <AvatarImage
+                                       src={data.user.avatar}
+                                       alt={data.user.name}
+                                    />
+                                    <AvatarFallback className="rounded-lg">
+                                       CN
+                                    </AvatarFallback>
+                                 </Avatar>
+                                 <div className="grid flex-1 text-left text-sm leading-tight">
+                                    <span className="truncate font-semibold">
+                                       {data.user.name}
+                                    </span>
+                                    <span className="truncate text-xs">
+                                       {data.user.email}
+                                    </span>
+                                 </div>
+                                 <ChevronsUpDown className="ml-auto size-4" />
+                              </SidebarMenuButton>
+                           </DropdownMenuTrigger>
+                           <DropdownMenuContent
+                              className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                              side={isMobile ? "bottom" : "right"}
+                              align="end"
+                              sideOffset={4}
+                           >
+                              <DropdownMenuLabel className="p-0 font-normal">
+                                 <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                    <Avatar className="h-8 w-8 rounded-lg">
+                                       <AvatarImage
+                                          src={data.user.avatar}
+                                          alt={data.user.name}
+                                       />
+                                       <AvatarFallback className="rounded-lg">
+                                          CN
+                                       </AvatarFallback>
+                                    </Avatar>
+                                    <div className="grid flex-1 text-left text-sm leading-tight">
+                                       <span className="truncate font-semibold">
+                                          {data.user.name}
+                                       </span>
+                                       <span className="truncate text-xs">
+                                          {data.user.email}
+                                       </span>
+                                    </div>
+                                 </div>
+                              </DropdownMenuLabel>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuGroup>
+                                 <DropdownMenuItem>
+                                    <Sparkles />
+                                    Upgrade to Pro
+                                 </DropdownMenuItem>
+                              </DropdownMenuGroup>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuGroup>
+                                 <DropdownMenuItem>
+                                    <BadgeCheck />
+                                    Account
+                                 </DropdownMenuItem>
+                                 <DropdownMenuItem>
+                                    <CreditCard />
+                                    Billing
+                                 </DropdownMenuItem>
+                                 <DropdownMenuItem>
+                                    <Bell />
+                                    Notifications
+                                 </DropdownMenuItem>
+                              </DropdownMenuGroup>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem>
+                                 <LogOut />
+                                 Log out
+                              </DropdownMenuItem>
+                           </DropdownMenuContent>
+                        </DropdownMenu>
+                     </SidebarMenuItem>
+                  </SidebarMenu>
+               </SidebarFooter>
+            </Sidebar>
+
+            <SidebarInset>
+               <header className=" flex shrink-0 items-center gap-2 border-b py-2">
+                  <div className="flex items-center gap-2 px-4 py-2">
+                     <div className="flex md:hidden items-center gap-2">
+                        <SidebarTrigger />
+                        <Separator
+                           orientation="vertical"
+                           className="mr-2 h-4"
+                        />
+                     </div>
+                     <Breadcrumb>
+                        <BreadcrumbList>
+                           <BreadcrumbItem className="hidden md:block">
+                              <BreadcrumbLink href="#">
+                                 Building Your Application
+                              </BreadcrumbLink>
+                           </BreadcrumbItem>
+                           <BreadcrumbSeparator className="hidden md:block" />
+                           <BreadcrumbItem>
+                              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                           </BreadcrumbItem>
+                        </BreadcrumbList>
+                     </Breadcrumb>
+                  </div>
+               </header>
+               <div className="flex flex-1 flex-col gap-4 p-4">
+                  <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                     <div className="aspect-video rounded-xl bg-muted/50" />
+                     <div className="aspect-video rounded-xl bg-muted/50" />
+                     <div className="aspect-video rounded-xl bg-muted/50" />
+                  </div>
+                  <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+               </div>
+            </SidebarInset>
+         </SidebarProvider>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-controlled.tsx b/apps/web/registry/miami/internal/sidebar-controlled.tsx
new file mode 100644
index 00000000..1163bbb0
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-controlled.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import {
+   Frame,
+   LifeBuoy,
+   Map,
+   PanelLeftClose,
+   PanelLeftOpen,
+   PieChart,
+   Send,
+} from "lucide-react"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const projects = [
+   {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+   },
+   {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+   },
+   {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+   },
+   {
+      name: "Support",
+      url: "#",
+      icon: LifeBuoy,
+   },
+   {
+      name: "Feedback",
+      url: "#",
+      icon: Send,
+   },
+]
+
+export default function AppSidebar() {
+   const [open, setOpen] = React.useState(true)
+
+   return (
+      <SidebarProvider open={open} onOpenChange={setOpen}>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {projects.map((project) => (
+                           <SidebarMenuItem key={project.name}>
+                              <SidebarMenuButton asChild>
+                                 <a href={project.url}>
+                                    <project.icon />
+                                    <span>{project.name}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex items-center h-12 px-4 justify-between">
+               <Button
+                  onClick={() => setOpen((open) => !open)}
+                  size="sm"
+                  variant="ghost"
+               >
+                  {open ? <PanelLeftClose /> : <PanelLeftOpen />}
+                  <span>{open ? "Close" : "Open"} Sidebar</span>
+               </Button>
+            </header>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-demo.tsx b/apps/web/registry/miami/internal/sidebar-demo.tsx
new file mode 100644
index 00000000..ac2f7525
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-demo.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+// Menu items.
+const items = [
+   {
+      title: "Home",
+      url: "#",
+      icon: Home,
+   },
+   {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+   },
+   {
+      title: "Calendar",
+      url: "#",
+      icon: Calendar,
+   },
+   {
+      title: "Search",
+      url: "#",
+      icon: Search,
+   },
+   {
+      title: "Settings",
+      url: "#",
+      icon: Settings,
+   },
+]
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Application</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {items.map((item) => (
+                           <SidebarMenuItem key={item.title}>
+                              <SidebarMenuButton asChild>
+                                 <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.title}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex items-center justify-between px-4 h-12">
+               <SidebarTrigger />
+            </header>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-footer.tsx b/apps/web/registry/miami/internal/sidebar-footer.tsx
new file mode 100644
index 00000000..c6227887
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-footer.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { ChevronDown, ChevronUp, User2 } from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader />
+            <SidebarContent />
+            <SidebarFooter>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                              Username
+                              <ChevronUp className="ml-auto" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                           side="top"
+                           className="w-[--radix-popper-anchor-width]"
+                        >
+                           <DropdownMenuItem>
+                              <span>Account</span>
+                           </DropdownMenuItem>
+                           <DropdownMenuItem>
+                              <span>Billing</span>
+                           </DropdownMenuItem>
+                           <DropdownMenuItem>
+                              <span>Sign out</span>
+                           </DropdownMenuItem>
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarFooter>
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex items-center justify-between px-4 h-12">
+               <SidebarTrigger />
+            </header>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-group-action.tsx b/apps/web/registry/miami/internal/sidebar-group-action.tsx
new file mode 100644
index 00000000..686e3912
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-group-action.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import {
+   ChevronDown,
+   Frame,
+   LifeBuoy,
+   Map,
+   PieChart,
+   Plus,
+   Send,
+} from "lucide-react"
+import { Toaster, toast } from "sonner"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupAction,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Toaster
+            position="bottom-left"
+            toastOptions={{
+               className: "ml-[160px]",
+            }}
+         />
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarGroupAction
+                     title="Add Project"
+                     onClick={() => toast("You clicked the group action!")}
+                  >
+                     <Plus /> <span className="sr-only">Add Project</span>
+                  </SidebarGroupAction>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        <SidebarMenuItem>
+                           <SidebarMenuButton asChild>
+                              <a href="#">
+                                 <Frame />
+                                 <span>Design Engineering</span>
+                              </a>
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                        <SidebarMenuItem>
+                           <SidebarMenuButton asChild>
+                              <a href="#">
+                                 <PieChart />
+                                 <span>Sales & Marketing</span>
+                              </a>
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                        <SidebarMenuItem>
+                           <SidebarMenuButton asChild>
+                              <a href="#">
+                                 <Map />
+                                 <span>Travel</span>
+                              </a>
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-group-collapsible.tsx b/apps/web/registry/miami/internal/sidebar-group-collapsible.tsx
new file mode 100644
index 00000000..52715105
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-group-collapsible.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import { ChevronDown, LifeBuoy, Send } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <Collapsible defaultOpen className="group/collapsible">
+                  <SidebarGroup>
+                     <SidebarGroupLabel
+                        asChild
+                        className="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                     >
+                        <CollapsibleTrigger>
+                           Help
+                           <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                        </CollapsibleTrigger>
+                     </SidebarGroupLabel>
+                     <CollapsibleContent>
+                        <SidebarGroupContent>
+                           <SidebarMenu>
+                              <SidebarMenuItem>
+                                 <SidebarMenuButton>
+                                    <LifeBuoy />
+                                    Support
+                                 </SidebarMenuButton>
+                              </SidebarMenuItem>
+                              <SidebarMenuItem>
+                                 <SidebarMenuButton>
+                                    <Send />
+                                    Feedback
+                                 </SidebarMenuButton>
+                              </SidebarMenuItem>
+                           </SidebarMenu>
+                        </SidebarGroupContent>
+                     </CollapsibleContent>
+                  </SidebarGroup>
+               </Collapsible>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-group.tsx b/apps/web/registry/miami/internal/sidebar-group.tsx
new file mode 100644
index 00000000..4ebf7b88
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-group.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { LifeBuoy, Send } from "lucide-react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Help</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        <SidebarMenuItem>
+                           <SidebarMenuButton>
+                              <LifeBuoy />
+                              Support
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                        <SidebarMenuItem>
+                           <SidebarMenuButton>
+                              <Send />
+                              Feedback
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-header.tsx b/apps/web/registry/miami/internal/sidebar-header.tsx
new file mode 100644
index 00000000..b7c9f97a
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-header.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { ChevronDown } from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   Sidebar,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarHeader>
+               <SidebarMenu>
+                  <SidebarMenuItem>
+                     <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                           <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                              Select Workspace
+                              <ChevronDown className="ml-auto" />
+                           </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="w-[--radix-popper-anchor-width]">
+                           <DropdownMenuItem>
+                              <span>Acme Inc</span>
+                           </DropdownMenuItem>
+                           <DropdownMenuItem>
+                              <span>Acme Corp.</span>
+                           </DropdownMenuItem>
+                        </DropdownMenuContent>
+                     </DropdownMenu>
+                  </SidebarMenuItem>
+               </SidebarMenu>
+            </SidebarHeader>
+         </Sidebar>
+         <SidebarInset>
+            <header className="flex items-center justify-between px-4 h-12">
+               <SidebarTrigger />
+            </header>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-menu-action.tsx b/apps/web/registry/miami/internal/sidebar-menu-action.tsx
new file mode 100644
index 00000000..0b8de559
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-menu-action.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import {
+   Frame,
+   LifeBuoy,
+   Map,
+   MoreHorizontal,
+   PieChart,
+   Send,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const projects = [
+   {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+   },
+   {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+   },
+   {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+   },
+   {
+      name: "Support",
+      url: "#",
+      icon: LifeBuoy,
+   },
+   {
+      name: "Feedback",
+      url: "#",
+      icon: Send,
+   },
+]
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {projects.map((project, index) => (
+                           <SidebarMenuItem key={project.name}>
+                              <SidebarMenuButton
+                                 asChild
+                                 className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                              >
+                                 <a href={project.url}>
+                                    <project.icon />
+                                    <span>{project.name}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                              <DropdownMenu>
+                                 <DropdownMenuTrigger asChild>
+                                    <SidebarMenuAction>
+                                       <MoreHorizontal />
+                                       <span className="sr-only">More</span>
+                                    </SidebarMenuAction>
+                                 </DropdownMenuTrigger>
+                                 <DropdownMenuContent
+                                    side="right"
+                                    align="start"
+                                 >
+                                    <DropdownMenuItem>
+                                       <span>Edit Project</span>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem>
+                                       <span>Delete Project</span>
+                                    </DropdownMenuItem>
+                                 </DropdownMenuContent>
+                              </DropdownMenu>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-menu-badge.tsx b/apps/web/registry/miami/internal/sidebar-menu-badge.tsx
new file mode 100644
index 00000000..a77f5091
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-menu-badge.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuBadge,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const projects = [
+   {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+      badge: "24",
+   },
+   {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+      badge: "12",
+   },
+   {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+      badge: "3",
+   },
+   {
+      name: "Support",
+      url: "#",
+      icon: LifeBuoy,
+      badge: "21",
+   },
+   {
+      name: "Feedback",
+      url: "#",
+      icon: Send,
+      badge: "8",
+   },
+]
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {projects.map((project) => (
+                           <SidebarMenuItem key={project.name}>
+                              <SidebarMenuButton
+                                 asChild
+                                 className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                              >
+                                 <a href={project.url}>
+                                    <project.icon />
+                                    <span>{project.name}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                              <SidebarMenuBadge>
+                                 {project.badge}
+                              </SidebarMenuBadge>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-menu-collapsible.tsx b/apps/web/registry/miami/internal/sidebar-menu-collapsible.tsx
new file mode 100644
index 00000000..8225fc6d
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-menu-collapsible.tsx
@@ -0,0 +1,197 @@
+"use client"
+
+import { ChevronRight } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const items = [
+   {
+      title: "Getting Started",
+      url: "#",
+      items: [
+         {
+            title: "Installation",
+            url: "#",
+         },
+         {
+            title: "Project Structure",
+            url: "#",
+         },
+      ],
+   },
+   {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+         {
+            title: "Routing",
+            url: "#",
+         },
+         {
+            title: "Data Fetching",
+            url: "#",
+            isActive: true,
+         },
+         {
+            title: "Rendering",
+            url: "#",
+         },
+         {
+            title: "Caching",
+            url: "#",
+         },
+         {
+            title: "Styling",
+            url: "#",
+         },
+         {
+            title: "Optimizing",
+            url: "#",
+         },
+         {
+            title: "Configuring",
+            url: "#",
+         },
+         {
+            title: "Testing",
+            url: "#",
+         },
+         {
+            title: "Authentication",
+            url: "#",
+         },
+         {
+            title: "Deploying",
+            url: "#",
+         },
+         {
+            title: "Upgrading",
+            url: "#",
+         },
+         {
+            title: "Examples",
+            url: "#",
+         },
+      ],
+   },
+   {
+      title: "API Reference",
+      url: "#",
+      items: [
+         {
+            title: "Components",
+            url: "#",
+         },
+         {
+            title: "File Conventions",
+            url: "#",
+         },
+         {
+            title: "Functions",
+            url: "#",
+         },
+         {
+            title: "next.config.js Options",
+            url: "#",
+         },
+         {
+            title: "CLI",
+            url: "#",
+         },
+         {
+            title: "Edge Runtime",
+            url: "#",
+         },
+      ],
+   },
+   {
+      title: "Architecture",
+      url: "#",
+      items: [
+         {
+            title: "Accessibility",
+            url: "#",
+         },
+         {
+            title: "Fast Refresh",
+            url: "#",
+         },
+         {
+            title: "Next.js Compiler",
+            url: "#",
+         },
+         {
+            title: "Supported Browsers",
+            url: "#",
+         },
+         {
+            title: "Turbopack",
+            url: "#",
+         },
+      ],
+   },
+]
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {items.map((item, index) => (
+                           <Collapsible
+                              key={index}
+                              className="group/collapsible"
+                              defaultOpen={index === 0}
+                           >
+                              <SidebarMenuItem>
+                                 <CollapsibleTrigger asChild>
+                                    <SidebarMenuButton>
+                                       <span>{item.title}</span>
+                                       <ChevronRight className="transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90" />
+                                    </SidebarMenuButton>
+                                 </CollapsibleTrigger>
+                                 <CollapsibleContent>
+                                    <SidebarMenuSub>
+                                       {item.items.map((subItem, subIndex) => (
+                                          <SidebarMenuSubItem key={subIndex}>
+                                             <SidebarMenuSubButton asChild>
+                                                <a href={subItem.url}>
+                                                   <span>{subItem.title}</span>
+                                                </a>
+                                             </SidebarMenuSubButton>
+                                          </SidebarMenuSubItem>
+                                       ))}
+                                    </SidebarMenuSub>
+                                 </CollapsibleContent>
+                              </SidebarMenuItem>
+                           </Collapsible>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-menu-sub.tsx b/apps/web/registry/miami/internal/sidebar-menu-sub.tsx
new file mode 100644
index 00000000..bb52bda0
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-menu-sub.tsx
@@ -0,0 +1,180 @@
+"use client"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const items = [
+   {
+      title: "Getting Started",
+      url: "#",
+      items: [
+         {
+            title: "Installation",
+            url: "#",
+         },
+         {
+            title: "Project Structure",
+            url: "#",
+         },
+      ],
+   },
+   {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+         {
+            title: "Routing",
+            url: "#",
+         },
+         {
+            title: "Data Fetching",
+            url: "#",
+            isActive: true,
+         },
+         {
+            title: "Rendering",
+            url: "#",
+         },
+         {
+            title: "Caching",
+            url: "#",
+         },
+         {
+            title: "Styling",
+            url: "#",
+         },
+         {
+            title: "Optimizing",
+            url: "#",
+         },
+         {
+            title: "Configuring",
+            url: "#",
+         },
+         {
+            title: "Testing",
+            url: "#",
+         },
+         {
+            title: "Authentication",
+            url: "#",
+         },
+         {
+            title: "Deploying",
+            url: "#",
+         },
+         {
+            title: "Upgrading",
+            url: "#",
+         },
+         {
+            title: "Examples",
+            url: "#",
+         },
+      ],
+   },
+   {
+      title: "API Reference",
+      url: "#",
+      items: [
+         {
+            title: "Components",
+            url: "#",
+         },
+         {
+            title: "File Conventions",
+            url: "#",
+         },
+         {
+            title: "Functions",
+            url: "#",
+         },
+         {
+            title: "next.config.js Options",
+            url: "#",
+         },
+         {
+            title: "CLI",
+            url: "#",
+         },
+         {
+            title: "Edge Runtime",
+            url: "#",
+         },
+      ],
+   },
+   {
+      title: "Architecture",
+      url: "#",
+      items: [
+         {
+            title: "Accessibility",
+            url: "#",
+         },
+         {
+            title: "Fast Refresh",
+            url: "#",
+         },
+         {
+            title: "Next.js Compiler",
+            url: "#",
+         },
+         {
+            title: "Supported Browsers",
+            url: "#",
+         },
+         {
+            title: "Turbopack",
+            url: "#",
+         },
+      ],
+   },
+]
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {items.map((item, index) => (
+                           <SidebarMenuItem key={index}>
+                              <SidebarMenuButton asChild>
+                                 <a href={item.url}>
+                                    <span>{item.title}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                              <SidebarMenuSub>
+                                 {item.items.map((subItem, subIndex) => (
+                                    <SidebarMenuSubItem key={subIndex}>
+                                       <SidebarMenuSubButton asChild>
+                                          <a href={subItem.url}>
+                                             <span>{subItem.title}</span>
+                                          </a>
+                                       </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                 ))}
+                              </SidebarMenuSub>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-menu.tsx b/apps/web/registry/miami/internal/sidebar-menu.tsx
new file mode 100644
index 00000000..53c8742d
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-menu.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const projects = [
+   {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+   },
+   {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+   },
+   {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+   },
+   {
+      name: "Support",
+      url: "#",
+      icon: LifeBuoy,
+   },
+   {
+      name: "Feedback",
+      url: "#",
+      icon: Send,
+   },
+]
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <SidebarMenu>
+                        {projects.map((project) => (
+                           <SidebarMenuItem key={project.name}>
+                              <SidebarMenuButton asChild>
+                                 <a href={project.url}>
+                                    <project.icon />
+                                    <span>{project.name}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                           </SidebarMenuItem>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sidebar-rsc.tsx b/apps/web/registry/miami/internal/sidebar-rsc.tsx
new file mode 100644
index 00000000..f3e576b4
--- /dev/null
+++ b/apps/web/registry/miami/internal/sidebar-rsc.tsx
@@ -0,0 +1,104 @@
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
+import * as React from "react"
+
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSkeleton,
+   SidebarProvider,
+} from "~/registry/miami/ui/sidebar"
+
+const projects = [
+   {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+      badge: "24",
+   },
+   {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+      badge: "12",
+   },
+   {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+      badge: "3",
+   },
+   {
+      name: "Support",
+      url: "#",
+      icon: LifeBuoy,
+      badge: "21",
+   },
+   {
+      name: "Feedback",
+      url: "#",
+      icon: Send,
+      badge: "8",
+   },
+]
+
+// Dummy fetch function
+async function fetchProjects() {
+   await new Promise((resolve) => setTimeout(resolve, 3000))
+   return projects
+}
+
+export default function AppSidebar() {
+   return (
+      <SidebarProvider>
+         <Sidebar>
+            <SidebarContent>
+               <SidebarGroup>
+                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                     <React.Suspense fallback={<NavProjectsSkeleton />}>
+                        <NavProjects />
+                     </React.Suspense>
+                  </SidebarGroupContent>
+               </SidebarGroup>
+            </SidebarContent>
+         </Sidebar>
+      </SidebarProvider>
+   )
+}
+
+function NavProjectsSkeleton() {
+   return (
+      <SidebarMenu>
+         {Array.from({ length: 5 }).map((_, index) => (
+            <SidebarMenuItem key={index}>
+               <SidebarMenuSkeleton showIcon />
+            </SidebarMenuItem>
+         ))}
+      </SidebarMenu>
+   )
+}
+
+async function NavProjects() {
+   const projects = await fetchProjects()
+
+   return (
+      <SidebarMenu>
+         {projects.map((project) => (
+            <SidebarMenuItem key={project.name}>
+               <SidebarMenuButton asChild>
+                  <a href={project.url}>
+                     <project.icon />
+                     <span>{project.name}</span>
+                  </a>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         ))}
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/accordion-demo.tsx b/apps/web/registry/miami/internal/sink/components/accordion-demo.tsx
new file mode 100644
index 00000000..4e9ac021
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/accordion-demo.tsx
@@ -0,0 +1,33 @@
+import {
+   Accordion,
+   AccordionContent,
+   AccordionItem,
+   AccordionTrigger,
+} from "~/registry/miami/ui/accordion"
+
+export function AccordionDemo() {
+   return (
+      <Accordion type="single" collapsible className="w-full">
+         <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>
+               Yes. It adheres to the WAI-ARIA design pattern.
+            </AccordionContent>
+         </AccordionItem>
+         <AccordionItem value="item-2">
+            <AccordionTrigger>Is it styled?</AccordionTrigger>
+            <AccordionContent>
+               Yes. It comes with default styles that matches the other
+               components&apos; aesthetic.
+            </AccordionContent>
+         </AccordionItem>
+         <AccordionItem value="item-3">
+            <AccordionTrigger>Is it animated?</AccordionTrigger>
+            <AccordionContent>
+               Yes. It's animated by default, but you can disable it if you
+               prefer.
+            </AccordionContent>
+         </AccordionItem>
+      </Accordion>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/alert-demo.tsx b/apps/web/registry/miami/internal/sink/components/alert-demo.tsx
new file mode 100644
index 00000000..639d7041
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/alert-demo.tsx
@@ -0,0 +1,15 @@
+import { Terminal } from "lucide-react"
+
+import { Alert, AlertDescription, AlertTitle } from "~/registry/miami/ui/alert"
+
+export function AlertDemo() {
+   return (
+      <Alert>
+         <Terminal className="h-4 w-4" />
+         <AlertTitle>Heads up!</AlertTitle>
+         <AlertDescription>
+            You can add components to your app using the cli.
+         </AlertDescription>
+      </Alert>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/alert-dialog-demo.tsx b/apps/web/registry/miami/internal/sink/components/alert-dialog-demo.tsx
new file mode 100644
index 00000000..96f656da
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+   AlertDialog,
+   AlertDialogAction,
+   AlertDialogCancel,
+   AlertDialogContent,
+   AlertDialogDescription,
+   AlertDialogFooter,
+   AlertDialogHeader,
+   AlertDialogTitle,
+   AlertDialogTrigger,
+} from "~/registry/miami/ui/alert-dialog"
+import { Button } from "~/registry/miami/ui/button"
+
+export function AlertDialogDemo() {
+   return (
+      <AlertDialog>
+         <AlertDialogTrigger asChild>
+            <Button variant="outline">Show Dialog</Button>
+         </AlertDialogTrigger>
+         <AlertDialogContent>
+            <AlertDialogHeader>
+               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+               <AlertDialogDescription>
+                  This action cannot be undone. This will permanently delete
+                  your account and remove your data from our servers.
+               </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+               <AlertDialogCancel>Cancel</AlertDialogCancel>
+               <AlertDialogAction>Continue</AlertDialogAction>
+            </AlertDialogFooter>
+         </AlertDialogContent>
+      </AlertDialog>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/app-sidebar.tsx b/apps/web/registry/miami/internal/sink/components/app-sidebar.tsx
new file mode 100644
index 00000000..70c652cc
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"use client"
+
+import {
+   AudioWaveform,
+   BookOpen,
+   Bot,
+   Command,
+   Frame,
+   GalleryVerticalEnd,
+   Map,
+   PieChart,
+   Settings2,
+   SquareTerminal,
+} from "lucide-react"
+import type * as React from "react"
+
+import { NavMain } from "~/registry/miami/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "~/registry/miami/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "~/registry/miami/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "~/registry/miami/blocks/sidebar-07/components/team-switcher"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarHeader,
+   SidebarRail,
+} from "~/registry/miami/ui/sidebar"
+
+// This is sample data.
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   teams: [
+      {
+         name: "Acme Inc",
+         logo: GalleryVerticalEnd,
+         plan: "Enterprise",
+      },
+      {
+         name: "Acme Corp.",
+         logo: AudioWaveform,
+         plan: "Startup",
+      },
+      {
+         name: "Evil Corp.",
+         logo: Command,
+         plan: "Free",
+      },
+   ],
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+   return (
+      <Sidebar collapsible="icon" {...props}>
+         <SidebarHeader>
+            <TeamSwitcher teams={data.teams} />
+         </SidebarHeader>
+         <SidebarContent>
+            <NavMain items={data.navMain} />
+            <NavProjects projects={data.projects} />
+         </SidebarContent>
+         <SidebarFooter>
+            <NavUser user={data.user} />
+         </SidebarFooter>
+         <SidebarRail />
+      </Sidebar>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/aspect-ratio-demo.tsx b/apps/web/registry/miami/internal/sink/components/aspect-ratio-demo.tsx
new file mode 100644
index 00000000..23200a86
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/aspect-ratio-demo.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image"
+
+import { AspectRatio } from "~/registry/miami/ui/aspect-ratio"
+
+export function AspectRatioDemo() {
+   return (
+      <AspectRatio ratio={16 / 9} className="bg-muted">
+         <Image
+            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+            alt="Photo by Drew Beamer"
+            fill
+            className="h-full w-full rounded-md object-cover"
+         />
+      </AspectRatio>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/avatar-demo.tsx b/apps/web/registry/miami/internal/sink/components/avatar-demo.tsx
new file mode 100644
index 00000000..4a168b1b
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/avatar-demo.tsx
@@ -0,0 +1,10 @@
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+
+export function AvatarDemo() {
+   return (
+      <Avatar>
+         <AvatarImage src="https://github.com/nyxb.png" alt="@nyxb" />
+         <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/badge-demo.tsx b/apps/web/registry/miami/internal/sink/components/badge-demo.tsx
new file mode 100644
index 00000000..fce20181
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/badge-demo.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/miami/ui/badge"
+
+export function BadgeDemo() {
+   return <Badge>Badge</Badge>
+}
diff --git a/apps/web/registry/miami/internal/sink/components/badge-destructive.tsx b/apps/web/registry/miami/internal/sink/components/badge-destructive.tsx
new file mode 100644
index 00000000..c48b6a1e
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/badge-destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/miami/ui/badge"
+
+export function BadgeDestructive() {
+   return <Badge variant="destructive">Destructive</Badge>
+}
diff --git a/apps/web/registry/miami/internal/sink/components/badge-outline.tsx b/apps/web/registry/miami/internal/sink/components/badge-outline.tsx
new file mode 100644
index 00000000..a3ef1773
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/miami/ui/badge"
+
+export function BadgeOutline() {
+   return <Badge variant="outline">Outline</Badge>
+}
diff --git a/apps/web/registry/miami/internal/sink/components/badge-secondary.tsx b/apps/web/registry/miami/internal/sink/components/badge-secondary.tsx
new file mode 100644
index 00000000..35a5fe0d
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/badge-secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "~/registry/miami/ui/badge"
+
+export function BadgeSecondary() {
+   return <Badge variant="secondary">Secondary</Badge>
+}
diff --git a/apps/web/registry/miami/internal/sink/components/breadcrumb-demo.tsx b/apps/web/registry/miami/internal/sink/components/breadcrumb-demo.tsx
new file mode 100644
index 00000000..ef80ffcc
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/breadcrumb-demo.tsx
@@ -0,0 +1,51 @@
+import {
+   Breadcrumb,
+   BreadcrumbEllipsis,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+
+export function BreadcrumbDemo() {
+   return (
+      <Breadcrumb>
+         <BreadcrumbList>
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <DropdownMenu>
+                  <DropdownMenuTrigger className="flex items-center gap-1">
+                     <BreadcrumbEllipsis className="h-4 w-4" />
+                     <span className="sr-only">Toggle menu</span>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                     <DropdownMenuItem>Documentation</DropdownMenuItem>
+                     <DropdownMenuItem>Themes</DropdownMenuItem>
+                     <DropdownMenuItem>GitHub</DropdownMenuItem>
+                  </DropdownMenuContent>
+               </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbLink href="/docs/components">
+                  Components
+               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+               <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+         </BreadcrumbList>
+      </Breadcrumb>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/button-demo.tsx b/apps/web/registry/miami/internal/sink/components/button-demo.tsx
new file mode 100644
index 00000000..aac9eabf
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/button-demo.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonDemo() {
+   return <Button>Button</Button>
+}
diff --git a/apps/web/registry/miami/internal/sink/components/button-destructive.tsx b/apps/web/registry/miami/internal/sink/components/button-destructive.tsx
new file mode 100644
index 00000000..9003f313
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/button-destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonDestructive() {
+   return <Button variant="destructive">Destructive</Button>
+}
diff --git a/apps/web/registry/miami/internal/sink/components/button-ghost.tsx b/apps/web/registry/miami/internal/sink/components/button-ghost.tsx
new file mode 100644
index 00000000..d2141704
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/button-ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonGhost() {
+   return <Button variant="ghost">Ghost</Button>
+}
diff --git a/apps/web/registry/miami/internal/sink/components/button-icon.tsx b/apps/web/registry/miami/internal/sink/components/button-icon.tsx
new file mode 100644
index 00000000..556734a3
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/button-icon.tsx
@@ -0,0 +1,11 @@
+import { ChevronRight } from "lucide-react"
+
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonIcon() {
+   return (
+      <Button variant="outline" size="icon">
+         <ChevronRight />
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/button-link.tsx b/apps/web/registry/miami/internal/sink/components/button-link.tsx
new file mode 100644
index 00000000..b10e914c
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/button-link.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonLink() {
+   return <Button variant="link">Link</Button>
+}
diff --git a/apps/web/registry/miami/internal/sink/components/button-loading.tsx b/apps/web/registry/miami/internal/sink/components/button-loading.tsx
new file mode 100644
index 00000000..d0bbd3d8
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/button-loading.tsx
@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react"
+
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonLoading() {
+   return (
+      <Button disabled>
+         <Loader2 className="animate-spin" />
+         Please wait
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/button-outline.tsx b/apps/web/registry/miami/internal/sink/components/button-outline.tsx
new file mode 100644
index 00000000..0614c372
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/button-outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonOutline() {
+   return <Button variant="outline">Outline</Button>
+}
diff --git a/apps/web/registry/miami/internal/sink/components/button-secondary.tsx b/apps/web/registry/miami/internal/sink/components/button-secondary.tsx
new file mode 100644
index 00000000..02122883
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/button-secondary.tsx
@@ -0,0 +1,5 @@
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonSecondary() {
+   return <Button variant="secondary">Secondary</Button>
+}
diff --git a/apps/web/registry/miami/internal/sink/components/button-with-icon.tsx b/apps/web/registry/miami/internal/sink/components/button-with-icon.tsx
new file mode 100644
index 00000000..d9235479
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/button-with-icon.tsx
@@ -0,0 +1,11 @@
+import { MailOpen } from "lucide-react"
+
+import { Button } from "~/registry/miami/ui/button"
+
+export function ButtonWithIcon() {
+   return (
+      <Button>
+         <MailOpen /> Login with Email
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/calendar-demo.tsx b/apps/web/registry/miami/internal/sink/components/calendar-demo.tsx
new file mode 100644
index 00000000..c08a30bc
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/calendar-demo.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "~/registry/miami/ui/calendar"
+
+export function CalendarDemo() {
+   const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+   return (
+      <Calendar
+         mode="single"
+         selected={date}
+         onSelect={setDate}
+         className="rounded-md border shadow"
+      />
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/card-demo.tsx b/apps/web/registry/miami/internal/sink/components/card-demo.tsx
new file mode 100644
index 00000000..09c61849
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellRing, Check } from "lucide-react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Switch } from "~/registry/miami/ui/switch"
+
+const notifications = [
+   {
+      title: "Your call has been confirmed.",
+      description: "1 hour ago",
+   },
+   {
+      title: "You have a new message!",
+      description: "1 hour ago",
+   },
+   {
+      title: "Your subscription is expiring soon!",
+      description: "2 hours ago",
+   },
+]
+
+type CardProps = React.ComponentProps<typeof Card>
+
+export function CardDemo({ className, ...props }: CardProps) {
+   return (
+      <Card className={ny("w-[380px]", className)} {...props}>
+         <CardHeader>
+            <CardTitle>Notifications</CardTitle>
+            <CardDescription>You have 3 unread messages.</CardDescription>
+         </CardHeader>
+         <CardContent className="grid gap-4">
+            <div className=" flex items-center space-x-4 rounded-md border p-4">
+               <BellRing />
+               <div className="flex-1 space-y-1">
+                  <p className="text-sm font-medium leading-none">
+                     Push Notifications
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                     Send notifications to device.
+                  </p>
+               </div>
+               <Switch />
+            </div>
+            <div>
+               {notifications.map((notification, index) => (
+                  <div
+                     key={index}
+                     className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+                  >
+                     <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+                     <div className="space-y-1">
+                        <p className="text-sm font-medium leading-none">
+                           {notification.title}
+                        </p>
+                        <p className="text-sm text-muted-foreground">
+                           {notification.description}
+                        </p>
+                     </div>
+                  </div>
+               ))}
+            </div>
+         </CardContent>
+         <CardFooter>
+            <Button className="w-full">
+               <Check /> Mark all as read
+            </Button>
+         </CardFooter>
+      </Card>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/carousel-demo.tsx b/apps/web/registry/miami/internal/sink/components/carousel-demo.tsx
new file mode 100644
index 00000000..dd8c8137
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/carousel-demo.tsx
@@ -0,0 +1,34 @@
+import * as React from "react"
+
+import { Card, CardContent } from "~/registry/miami/ui/card"
+import {
+   Carousel,
+   CarouselContent,
+   CarouselItem,
+   CarouselNext,
+   CarouselPrevious,
+} from "~/registry/miami/ui/carousel"
+
+export function CarouselDemo() {
+   return (
+      <Carousel className="w-full max-w-xs">
+         <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+               <CarouselItem key={index}>
+                  <div className="p-1">
+                     <Card>
+                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                           <span className="text-4xl font-semibold">
+                              {index + 1}
+                           </span>
+                        </CardContent>
+                     </Card>
+                  </div>
+               </CarouselItem>
+            ))}
+         </CarouselContent>
+         <CarouselPrevious />
+         <CarouselNext />
+      </Carousel>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/checkbox-demo.tsx b/apps/web/registry/miami/internal/sink/components/checkbox-demo.tsx
new file mode 100644
index 00000000..bb257495
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/checkbox-demo.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+
+export function CheckboxDemo() {
+   return (
+      <div className="flex items-center space-x-2">
+         <Checkbox id="terms" />
+         <label
+            htmlFor="terms"
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+         >
+            Accept terms and conditions
+         </label>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/collapsible-demo.tsx b/apps/web/registry/miami/internal/sink/components/collapsible-demo.tsx
new file mode 100644
index 00000000..528d9651
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import { ChevronsUpDown } from "lucide-react"
+import * as React from "react"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+
+export function CollapsibleDemo() {
+   const [isOpen, setIsOpen] = React.useState(false)
+
+   return (
+      <Collapsible
+         open={isOpen}
+         onOpenChange={setIsOpen}
+         className="w-[350px] space-y-2"
+      >
+         <div className="flex items-center justify-between space-x-4 px-4">
+            <h4 className="text-sm font-semibold">
+               @peduarte starred 3 repositories
+            </h4>
+            <CollapsibleTrigger asChild>
+               <Button variant="ghost" size="sm">
+                  <ChevronsUpDown className="h-4 w-4" />
+                  <span className="sr-only">Toggle</span>
+               </Button>
+            </CollapsibleTrigger>
+         </div>
+         <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+            @radix-ui/primitives
+         </div>
+         <CollapsibleContent className="space-y-2">
+            <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+               @radix-ui/colors
+            </div>
+            <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+               @stitches/react
+            </div>
+         </CollapsibleContent>
+      </Collapsible>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/combobox-demo.tsx b/apps/web/registry/miami/internal/sink/components/combobox-demo.tsx
new file mode 100644
index 00000000..434d41a9
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/combobox-demo.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { Check, ChevronsUpDown } from "lucide-react"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+} from "~/registry/miami/ui/command"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+const frameworks = [
+   {
+      value: "next.js",
+      label: "Next.js",
+   },
+   {
+      value: "sveltekit",
+      label: "SvelteKit",
+   },
+   {
+      value: "nuxt.js",
+      label: "Nuxt.js",
+   },
+   {
+      value: "remix",
+      label: "Remix",
+   },
+   {
+      value: "astro",
+      label: "Astro",
+   },
+]
+
+export function ComboboxDemo() {
+   const [open, setOpen] = React.useState(false)
+   const [value, setValue] = React.useState("")
+
+   return (
+      <Popover open={open} onOpenChange={setOpen}>
+         <PopoverTrigger asChild>
+            <Button
+               variant="outline"
+               role="combobox"
+               aria-expanded={open}
+               className="w-[200px] justify-between"
+            >
+               {value
+                  ? frameworks.find((framework) => framework.value === value)
+                       ?.label
+                  : "Select framework..."}
+               <ChevronsUpDown className="opacity-50" />
+            </Button>
+         </PopoverTrigger>
+         <PopoverContent className="w-[200px] p-0">
+            <Command>
+               <CommandInput
+                  placeholder="Search framework..."
+                  className="h-9"
+               />
+               <CommandList>
+                  <CommandEmpty>No framework found.</CommandEmpty>
+                  <CommandGroup>
+                     {frameworks.map((framework) => (
+                        <CommandItem
+                           key={framework.value}
+                           value={framework.value}
+                           onSelect={(currentValue) => {
+                              setValue(
+                                 currentValue === value ? "" : currentValue,
+                              )
+                              setOpen(false)
+                           }}
+                        >
+                           {framework.label}
+                           <Check
+                              className={ny(
+                                 "ml-auto",
+                                 value === framework.value
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                              )}
+                           />
+                        </CommandItem>
+                     ))}
+                  </CommandGroup>
+               </CommandList>
+            </Command>
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/command-demo.tsx b/apps/web/registry/miami/internal/sink/components/command-demo.tsx
new file mode 100644
index 00000000..b77a036a
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/command-demo.tsx
@@ -0,0 +1,62 @@
+import {
+   Calculator,
+   Calendar,
+   CreditCard,
+   Settings,
+   Smile,
+   User,
+} from "lucide-react"
+
+import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+   CommandSeparator,
+   CommandShortcut,
+} from "~/registry/miami/ui/command"
+
+export function CommandDemo() {
+   return (
+      <Command className="rounded-lg border shadow-md md:min-w-[450px]">
+         <CommandInput placeholder="Type a command or search..." />
+         <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+               <CommandItem>
+                  <Calendar />
+                  <span>Calendar</span>
+               </CommandItem>
+               <CommandItem>
+                  <Smile />
+                  <span>Search Emoji</span>
+               </CommandItem>
+               <CommandItem disabled>
+                  <Calculator />
+                  <span>Calculator</span>
+               </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Settings">
+               <CommandItem>
+                  <User />
+                  <span>Profile</span>
+                  <CommandShortcut>⌘P</CommandShortcut>
+               </CommandItem>
+               <CommandItem>
+                  <CreditCard />
+                  <span>Billing</span>
+                  <CommandShortcut>⌘B</CommandShortcut>
+               </CommandItem>
+               <CommandItem>
+                  <Settings />
+                  <span>Settings</span>
+                  <CommandShortcut>⌘S</CommandShortcut>
+               </CommandItem>
+            </CommandGroup>
+         </CommandList>
+      </Command>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/component-wrapper.tsx b/apps/web/registry/miami/internal/sink/components/component-wrapper.tsx
new file mode 100644
index 00000000..5d94d1e3
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/component-wrapper.tsx
@@ -0,0 +1,22 @@
+import { ny } from "~/registry/miami/lib/utils"
+
+export function ComponentWrapper({
+   className,
+   name,
+   children,
+   ...props
+}: React.ComponentPropsWithoutRef<"div"> & { name: string }) {
+   return (
+      <div
+         className={ny("flex w-full flex-col rounded-lg border", className)}
+         {...props}
+      >
+         <div className="border-b px-4 py-3">
+            <div className="text-sm font-medium">{name}</div>
+         </div>
+         <div className="flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full">
+            {children}
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/context-menu-demo.tsx b/apps/web/registry/miami/internal/sink/components/context-menu-demo.tsx
new file mode 100644
index 00000000..2192e29e
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/context-menu-demo.tsx
@@ -0,0 +1,69 @@
+import {
+   ContextMenu,
+   ContextMenuCheckboxItem,
+   ContextMenuContent,
+   ContextMenuItem,
+   ContextMenuLabel,
+   ContextMenuRadioGroup,
+   ContextMenuRadioItem,
+   ContextMenuSeparator,
+   ContextMenuShortcut,
+   ContextMenuSub,
+   ContextMenuSubContent,
+   ContextMenuSubTrigger,
+   ContextMenuTrigger,
+} from "~/registry/miami/ui/context-menu"
+
+export function ContextMenuDemo() {
+   return (
+      <ContextMenu>
+         <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+            Right click here
+         </ContextMenuTrigger>
+         <ContextMenuContent className="w-64">
+            <ContextMenuItem inset>
+               Back
+               <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem inset disabled>
+               Forward
+               <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem inset>
+               Reload
+               <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuSub>
+               <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+               <ContextMenuSubContent className="w-48">
+                  <ContextMenuItem>
+                     Save Page As...
+                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+                  </ContextMenuItem>
+                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+                  <ContextMenuItem>Name Window...</ContextMenuItem>
+                  <ContextMenuSeparator />
+                  <ContextMenuItem>Developer Tools</ContextMenuItem>
+               </ContextMenuSubContent>
+            </ContextMenuSub>
+            <ContextMenuSeparator />
+            <ContextMenuCheckboxItem checked>
+               Show Bookmarks Bar
+               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+            </ContextMenuCheckboxItem>
+            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+            <ContextMenuSeparator />
+            <ContextMenuRadioGroup value="pedro">
+               <ContextMenuLabel inset>People</ContextMenuLabel>
+               <ContextMenuSeparator />
+               <ContextMenuRadioItem value="pedro">
+                  Pedro Duarte
+               </ContextMenuRadioItem>
+               <ContextMenuRadioItem value="colm">
+                  Colm Tuite
+               </ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+         </ContextMenuContent>
+      </ContextMenu>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/date-picker-demo.tsx b/apps/web/registry/miami/internal/sink/components/date-picker-demo.tsx
new file mode 100644
index 00000000..e0ac8a84
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Calendar } from "~/registry/miami/ui/calendar"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+export function DatePickerDemo() {
+   const [date, setDate] = React.useState<Date>()
+
+   return (
+      <Popover>
+         <PopoverTrigger asChild>
+            <Button
+               variant={"outline"}
+               className={ny(
+                  "w-[240px] justify-start text-left font-normal",
+                  !date && "text-muted-foreground",
+               )}
+            >
+               <CalendarIcon />
+               {date ? format(date, "PPP") : <span>Pick a date</span>}
+            </Button>
+         </PopoverTrigger>
+         <PopoverContent className="w-auto p-0" align="start">
+            <Calendar
+               mode="single"
+               selected={date}
+               onSelect={setDate}
+               initialFocus
+            />
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/dialog-demo.tsx b/apps/web/registry/miami/internal/sink/components/dialog-demo.tsx
new file mode 100644
index 00000000..831cf8ca
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/dialog-demo.tsx
@@ -0,0 +1,56 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogFooter,
+   DialogHeader,
+   DialogTitle,
+   DialogTrigger,
+} from "~/registry/miami/ui/dialog"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+
+export function DialogDemo() {
+   return (
+      <Dialog>
+         <DialogTrigger asChild>
+            <Button variant="outline">Edit Profile</Button>
+         </DialogTrigger>
+         <DialogContent className="sm:max-w-[425px]">
+            <DialogHeader>
+               <DialogTitle>Edit profile</DialogTitle>
+               <DialogDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+               </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="name" className="text-right">
+                     Name
+                  </Label>
+                  <Input
+                     id="name"
+                     value="Pedro Duarte"
+                     className="col-span-3"
+                  />
+               </div>
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="username" className="text-right">
+                     Username
+                  </Label>
+                  <Input
+                     id="username"
+                     value="@peduarte"
+                     className="col-span-3"
+                  />
+               </div>
+            </div>
+            <DialogFooter>
+               <Button type="submit">Save changes</Button>
+            </DialogFooter>
+         </DialogContent>
+      </Dialog>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/drawer-demo.tsx b/apps/web/registry/miami/internal/sink/components/drawer-demo.tsx
new file mode 100644
index 00000000..eec5e1a9
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/drawer-demo.tsx
@@ -0,0 +1,138 @@
+"use client"
+
+import { Minus, Plus } from "lucide-react"
+import * as React from "react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Drawer,
+   DrawerClose,
+   DrawerContent,
+   DrawerDescription,
+   DrawerFooter,
+   DrawerHeader,
+   DrawerTitle,
+   DrawerTrigger,
+} from "~/registry/miami/ui/drawer"
+
+const data = [
+   {
+      goal: 400,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 239,
+   },
+   {
+      goal: 300,
+   },
+   {
+      goal: 200,
+   },
+   {
+      goal: 278,
+   },
+   {
+      goal: 189,
+   },
+   {
+      goal: 349,
+   },
+]
+
+export function DrawerDemo() {
+   const [goal, setGoal] = React.useState(350)
+
+   function onClick(adjustment: number) {
+      setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+   }
+
+   return (
+      <Drawer>
+         <DrawerTrigger asChild>
+            <Button variant="outline">Open Drawer</Button>
+         </DrawerTrigger>
+         <DrawerContent>
+            <div className="mx-auto w-full max-w-sm">
+               <DrawerHeader>
+                  <DrawerTitle>Move Goal</DrawerTitle>
+                  <DrawerDescription>
+                     Set your daily activity goal.
+                  </DrawerDescription>
+               </DrawerHeader>
+               <div className="p-4 pb-0">
+                  <div className="flex items-center justify-center space-x-2">
+                     <Button
+                        variant="outline"
+                        size="icon"
+                        className="h-8 w-8 shrink-0 rounded-full"
+                        onClick={() => onClick(-10)}
+                        disabled={goal <= 200}
+                     >
+                        <Minus />
+                        <span className="sr-only">Decrease</span>
+                     </Button>
+                     <div className="flex-1 text-center">
+                        <div className="text-7xl font-bold tracking-tighter">
+                           {goal}
+                        </div>
+                        <div className="text-[0.70rem] uppercase text-muted-foreground">
+                           Calories/day
+                        </div>
+                     </div>
+                     <Button
+                        variant="outline"
+                        size="icon"
+                        className="h-8 w-8 shrink-0 rounded-full"
+                        onClick={() => onClick(10)}
+                        disabled={goal >= 400}
+                     >
+                        <Plus />
+                        <span className="sr-only">Increase</span>
+                     </Button>
+                  </div>
+                  <div className="mt-3 h-[120px]">
+                     <ResponsiveContainer width="100%" height="100%">
+                        <BarChart data={data}>
+                           <Bar
+                              dataKey="goal"
+                              style={
+                                 {
+                                    fill: "hsl(var(--foreground))",
+                                    opacity: 0.9,
+                                 } as React.CSSProperties
+                              }
+                           />
+                        </BarChart>
+                     </ResponsiveContainer>
+                  </div>
+               </div>
+               <DrawerFooter>
+                  <Button>Submit</Button>
+                  <DrawerClose asChild>
+                     <Button variant="outline">Cancel</Button>
+                  </DrawerClose>
+               </DrawerFooter>
+            </div>
+         </DrawerContent>
+      </Drawer>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/dropdown-menu-demo.tsx b/apps/web/registry/miami/internal/sink/components/dropdown-menu-demo.tsx
new file mode 100644
index 00000000..ed4b7ba9
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/dropdown-menu-demo.tsx
@@ -0,0 +1,75 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuPortal,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuSub,
+   DropdownMenuSubContent,
+   DropdownMenuSubTrigger,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+
+export function DropdownMenuDemo() {
+   return (
+      <DropdownMenu>
+         <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open</Button>
+         </DropdownMenuTrigger>
+         <DropdownMenuContent className="w-56">
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+               <DropdownMenuItem>
+                  Profile
+                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+               </DropdownMenuItem>
+               <DropdownMenuItem>
+                  Billing
+                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+               </DropdownMenuItem>
+               <DropdownMenuItem>
+                  Settings
+                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+               </DropdownMenuItem>
+               <DropdownMenuItem>
+                  Keyboard shortcuts
+                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+               </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+               <DropdownMenuItem>Team</DropdownMenuItem>
+               <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                     <DropdownMenuSubContent>
+                        <DropdownMenuItem>Email</DropdownMenuItem>
+                        <DropdownMenuItem>Message</DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>More...</DropdownMenuItem>
+                     </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+               </DropdownMenuSub>
+               <DropdownMenuItem>
+                  New Team
+                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+               </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>GitHub</DropdownMenuItem>
+            <DropdownMenuItem>Support</DropdownMenuItem>
+            <DropdownMenuItem disabled>API</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+               Log out
+               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+            </DropdownMenuItem>
+         </DropdownMenuContent>
+      </DropdownMenu>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/hover-card-demo.tsx b/apps/web/registry/miami/internal/sink/components/hover-card-demo.tsx
new file mode 100644
index 00000000..d3346bb5
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/hover-card-demo.tsx
@@ -0,0 +1,39 @@
+import { CalendarIcon } from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   HoverCard,
+   HoverCardContent,
+   HoverCardTrigger,
+} from "~/registry/miami/ui/hover-card"
+
+export function HoverCardDemo() {
+   return (
+      <HoverCard>
+         <HoverCardTrigger asChild>
+            <Button variant="link">@nextjs</Button>
+         </HoverCardTrigger>
+         <HoverCardContent className="w-80">
+            <div className="flex justify-between space-x-4">
+               <Avatar>
+                  <AvatarImage src="https://github.com/vercel.png" />
+                  <AvatarFallback>VC</AvatarFallback>
+               </Avatar>
+               <div className="space-y-1">
+                  <h4 className="text-sm font-semibold">@nextjs</h4>
+                  <p className="text-sm">
+                     The React Framework – created and maintained by @vercel.
+                  </p>
+                  <div className="flex items-center pt-2">
+                     <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
+                     <span className="text-xs text-muted-foreground">
+                        Joined December 2021
+                     </span>
+                  </div>
+               </div>
+            </div>
+         </HoverCardContent>
+      </HoverCard>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/input-demo.tsx b/apps/web/registry/miami/internal/sink/components/input-demo.tsx
new file mode 100644
index 00000000..2fd0167b
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/input-demo.tsx
@@ -0,0 +1,5 @@
+import { Input } from "~/registry/miami/ui/input"
+
+export function InputDemo() {
+   return <Input type="email" placeholder="Email" />
+}
diff --git a/apps/web/registry/miami/internal/sink/components/input-otp-demo.tsx b/apps/web/registry/miami/internal/sink/components/input-otp-demo.tsx
new file mode 100644
index 00000000..4b8ef2c2
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/input-otp-demo.tsx
@@ -0,0 +1,24 @@
+import {
+   InputOTP,
+   InputOTPGroup,
+   InputOTPSeparator,
+   InputOTPSlot,
+} from "~/registry/miami/ui/input-otp"
+
+export function InputOTPDemo() {
+   return (
+      <InputOTP maxLength={6}>
+         <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+         </InputOTPGroup>
+         <InputOTPSeparator />
+         <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+         </InputOTPGroup>
+      </InputOTP>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/label-demo.tsx b/apps/web/registry/miami/internal/sink/components/label-demo.tsx
new file mode 100644
index 00000000..06c53eff
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/label-demo.tsx
@@ -0,0 +1,13 @@
+import { Checkbox } from "~/registry/miami/ui/checkbox"
+import { Label } from "~/registry/miami/ui/label"
+
+export function LabelDemo() {
+   return (
+      <div>
+         <div className="flex items-center space-x-2">
+            <Checkbox id="terms" />
+            <Label htmlFor="terms">Accept terms and conditions</Label>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/menubar-demo.tsx b/apps/web/registry/miami/internal/sink/components/menubar-demo.tsx
new file mode 100644
index 00000000..9aee9d6c
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/menubar-demo.tsx
@@ -0,0 +1,109 @@
+import {
+   Menubar,
+   MenubarCheckboxItem,
+   MenubarContent,
+   MenubarItem,
+   MenubarMenu,
+   MenubarRadioGroup,
+   MenubarRadioItem,
+   MenubarSeparator,
+   MenubarShortcut,
+   MenubarSub,
+   MenubarSubContent,
+   MenubarSubTrigger,
+   MenubarTrigger,
+} from "~/registry/miami/ui/menubar"
+
+export function MenubarDemo() {
+   return (
+      <Menubar>
+         <MenubarMenu>
+            <MenubarTrigger>File</MenubarTrigger>
+            <MenubarContent>
+               <MenubarItem>
+                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem>
+                  New Window <MenubarShortcut>⌘N</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem disabled>New Incognito Window</MenubarItem>
+               <MenubarSeparator />
+               <MenubarSub>
+                  <MenubarSubTrigger>Share</MenubarSubTrigger>
+                  <MenubarSubContent>
+                     <MenubarItem>Email link</MenubarItem>
+                     <MenubarItem>Messages</MenubarItem>
+                     <MenubarItem>Notes</MenubarItem>
+                  </MenubarSubContent>
+               </MenubarSub>
+               <MenubarSeparator />
+               <MenubarItem>
+                  Print... <MenubarShortcut>⌘P</MenubarShortcut>
+               </MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+         <MenubarMenu>
+            <MenubarTrigger>Edit</MenubarTrigger>
+            <MenubarContent>
+               <MenubarItem>
+                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem>
+                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+               </MenubarItem>
+               <MenubarSeparator />
+               <MenubarSub>
+                  <MenubarSubTrigger>Find</MenubarSubTrigger>
+                  <MenubarSubContent>
+                     <MenubarItem>Search the web</MenubarItem>
+                     <MenubarSeparator />
+                     <MenubarItem>Find...</MenubarItem>
+                     <MenubarItem>Find Next</MenubarItem>
+                     <MenubarItem>Find Previous</MenubarItem>
+                  </MenubarSubContent>
+               </MenubarSub>
+               <MenubarSeparator />
+               <MenubarItem>Cut</MenubarItem>
+               <MenubarItem>Copy</MenubarItem>
+               <MenubarItem>Paste</MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+         <MenubarMenu>
+            <MenubarTrigger>View</MenubarTrigger>
+            <MenubarContent>
+               <MenubarCheckboxItem>
+                  Always Show Bookmarks Bar
+               </MenubarCheckboxItem>
+               <MenubarCheckboxItem checked>
+                  Always Show Full URLs
+               </MenubarCheckboxItem>
+               <MenubarSeparator />
+               <MenubarItem inset>
+                  Reload <MenubarShortcut>⌘R</MenubarShortcut>
+               </MenubarItem>
+               <MenubarItem disabled inset>
+                  Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+               </MenubarItem>
+               <MenubarSeparator />
+               <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+               <MenubarSeparator />
+               <MenubarItem inset>Hide Sidebar</MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+         <MenubarMenu>
+            <MenubarTrigger>Profiles</MenubarTrigger>
+            <MenubarContent>
+               <MenubarRadioGroup value="benoit">
+                  <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+                  <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+                  <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+               </MenubarRadioGroup>
+               <MenubarSeparator />
+               <MenubarItem inset>Edit...</MenubarItem>
+               <MenubarSeparator />
+               <MenubarItem inset>Add Profile...</MenubarItem>
+            </MenubarContent>
+         </MenubarMenu>
+      </Menubar>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/nav-main.tsx b/apps/web/registry/miami/internal/sink/components/nav-main.tsx
new file mode 100644
index 00000000..73557e4a
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/nav-main.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavMain({
+   items,
+}: {
+   items: {
+      title: string
+      url: string
+      icon?: LucideIcon
+      isActive?: boolean
+      items?: {
+         title: string
+         url: string
+      }[]
+   }[]
+}) {
+   return (
+      <SidebarGroup>
+         <SidebarGroupLabel>Platform</SidebarGroupLabel>
+         <SidebarMenu>
+            {items.map((item) => (
+               <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={item.isActive}
+                  className="group/collapsible"
+               >
+                  <SidebarMenuItem>
+                     <CollapsibleTrigger asChild>
+                        <SidebarMenuButton tooltip={item.title}>
+                           {item.icon && <item.icon />}
+                           <span>{item.title}</span>
+                           <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                        </SidebarMenuButton>
+                     </CollapsibleTrigger>
+                     <CollapsibleContent>
+                        <SidebarMenuSub>
+                           {item.items?.map((subItem) => (
+                              <SidebarMenuSubItem key={subItem.title}>
+                                 <SidebarMenuSubButton asChild>
+                                    <a href={subItem.url}>
+                                       <span>{subItem.title}</span>
+                                    </a>
+                                 </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                           ))}
+                        </SidebarMenuSub>
+                     </CollapsibleContent>
+                  </SidebarMenuItem>
+               </Collapsible>
+            ))}
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/nav-projects.tsx b/apps/web/registry/miami/internal/sink/components/nav-projects.tsx
new file mode 100644
index 00000000..16487028
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+   Folder,
+   Forward,
+   type LucideIcon,
+   MoreHorizontal,
+   Trash2,
+} from "lucide-react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarGroup,
+   SidebarGroupLabel,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavProjects({
+   projects,
+}: {
+   projects: {
+      name: string
+      url: string
+      icon: LucideIcon
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+         <SidebarGroupLabel>Projects</SidebarGroupLabel>
+         <SidebarMenu>
+            {projects.map((item) => (
+               <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                     <a href={item.url}>
+                        <item.icon />
+                        <span>{item.name}</span>
+                     </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                     <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                           <MoreHorizontal />
+                           <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                     </DropdownMenuTrigger>
+                     <DropdownMenuContent
+                        className="w-48 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                     >
+                        <DropdownMenuItem>
+                           <Folder className="text-muted-foreground" />
+                           <span>View Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                           <Forward className="text-muted-foreground" />
+                           <span>Share Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                           <Trash2 className="text-muted-foreground" />
+                           <span>Delete Project</span>
+                        </DropdownMenuItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+               <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal className="text-sidebar-foreground/70" />
+                  <span>More</span>
+               </SidebarMenuButton>
+            </SidebarMenuItem>
+         </SidebarMenu>
+      </SidebarGroup>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/nav-user.tsx b/apps/web/registry/miami/internal/sink/components/nav-user.tsx
new file mode 100644
index 00000000..6566b797
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/nav-user.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   ChevronsUpDown,
+   CreditCard,
+   LogOut,
+   Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function NavUser({
+   user,
+}: {
+   user: {
+      name: string
+      email: string
+      avatar: string
+   }
+}) {
+   const { isMobile } = useSidebar()
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback className="rounded-lg">
+                           CN
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {user.name}
+                        </span>
+                        <span className="truncate text-xs">{user.email}</span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side={isMobile ? "bottom" : "right"}
+                  align="end"
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                           <AvatarImage src={user.avatar} alt={user.name} />
+                           <AvatarFallback className="rounded-lg">
+                              CN
+                           </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                           <span className="truncate font-semibold">
+                              {user.name}
+                           </span>
+                           <span className="truncate text-xs">
+                              {user.email}
+                           </span>
+                        </div>
+                     </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                     <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                     </DropdownMenuItem>
+                     <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                     </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                     <LogOut />
+                     Log out
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/navigation-menu-demo.tsx b/apps/web/registry/miami/internal/sink/components/navigation-menu-demo.tsx
new file mode 100644
index 00000000..2302b7ed
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/navigation-menu-demo.tsx
@@ -0,0 +1,147 @@
+"use client"
+
+import Link from "next/link"
+import * as React from "react"
+
+import { ny } from "~/lib/utils"
+import {
+   NavigationMenu,
+   NavigationMenuContent,
+   NavigationMenuItem,
+   NavigationMenuLink,
+   NavigationMenuList,
+   NavigationMenuTrigger,
+   navigationMenuTriggerStyle,
+} from "~/registry/miami/ui/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+   {
+      title: "Alert Dialog",
+      href: "/docs/primitives/alert-dialog",
+      description:
+         "A modal dialog that interrupts the user with important content and expects a response.",
+   },
+   {
+      title: "Hover Card",
+      href: "/docs/primitives/hover-card",
+      description:
+         "For sighted users to preview content available behind a link.",
+   },
+   {
+      title: "Progress",
+      href: "/docs/primitives/progress",
+      description:
+         "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+   },
+   {
+      title: "Scroll-area",
+      href: "/docs/primitives/scroll-area",
+      description: "Visually or semantically separates content.",
+   },
+   {
+      title: "Tabs",
+      href: "/docs/primitives/tabs",
+      description:
+         "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+   },
+   {
+      title: "Tooltip",
+      href: "/docs/primitives/tooltip",
+      description:
+         "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+   },
+]
+
+export function NavigationMenuDemo() {
+   return (
+      <NavigationMenu>
+         <NavigationMenuList>
+            <NavigationMenuItem>
+               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+               <NavigationMenuContent>
+                  <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                     <li className="row-span-3">
+                        <NavigationMenuLink asChild>
+                           <a
+                              className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                              href="/"
+                           >
+                              <div className="mb-2 mt-4 text-lg font-medium">
+                                 nyxb/ui
+                              </div>
+                              <p className="text-sm leading-tight text-muted-foreground">
+                                 Beautifully designed components built with
+                                 Radix UI and Tailwind CSS.
+                              </p>
+                           </a>
+                        </NavigationMenuLink>
+                     </li>
+                     <ListItem href="/docs" title="Introduction">
+                        Re-usable components built using Radix UI and Tailwind
+                        CSS.
+                     </ListItem>
+                     <ListItem href="/docs/installation" title="Installation">
+                        How to install dependencies and structure your app.
+                     </ListItem>
+                     <ListItem
+                        href="/docs/primitives/typography"
+                        title="Typography"
+                     >
+                        Styles for headings, paragraphs, lists...etc
+                     </ListItem>
+                  </ul>
+               </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+               <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+               <NavigationMenuContent>
+                  <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                     {components.map((component) => (
+                        <ListItem
+                           key={component.title}
+                           title={component.title}
+                           href={component.href}
+                        >
+                           {component.description}
+                        </ListItem>
+                     ))}
+                  </ul>
+               </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+               <Link href="/docs" legacyBehavior passHref>
+                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                     Documentation
+                  </NavigationMenuLink>
+               </Link>
+            </NavigationMenuItem>
+         </NavigationMenuList>
+      </NavigationMenu>
+   )
+}
+
+const ListItem = React.forwardRef<
+   React.ElementRef<"a">,
+   React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+   return (
+      <li>
+         <NavigationMenuLink asChild>
+            <a
+               ref={ref}
+               className={ny(
+                  "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+                  className,
+               )}
+               {...props}
+            >
+               <div className="text-sm font-medium leading-none">{title}</div>
+               <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                  {children}
+               </p>
+            </a>
+         </NavigationMenuLink>
+      </li>
+   )
+})
+ListItem.displayName = "ListItem"
diff --git a/apps/web/registry/miami/internal/sink/components/pagination-demo.tsx b/apps/web/registry/miami/internal/sink/components/pagination-demo.tsx
new file mode 100644
index 00000000..c02a8bf4
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/pagination-demo.tsx
@@ -0,0 +1,38 @@
+import {
+   Pagination,
+   PaginationContent,
+   PaginationEllipsis,
+   PaginationItem,
+   PaginationLink,
+   PaginationNext,
+   PaginationPrevious,
+} from "~/registry/miami/ui/pagination"
+
+export function PaginationDemo() {
+   return (
+      <Pagination>
+         <PaginationContent>
+            <PaginationItem>
+               <PaginationPrevious href="#" />
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationLink href="#">1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationLink href="#" isActive>
+                  2
+               </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationLink href="#">3</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+               <PaginationNext href="#" />
+            </PaginationItem>
+         </PaginationContent>
+      </Pagination>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/popover-demo.tsx b/apps/web/registry/miami/internal/sink/components/popover-demo.tsx
new file mode 100644
index 00000000..ed4c7010
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/popover-demo.tsx
@@ -0,0 +1,62 @@
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
+
+export function PopoverDemo() {
+   return (
+      <Popover>
+         <PopoverTrigger asChild>
+            <Button variant="outline">Open popover</Button>
+         </PopoverTrigger>
+         <PopoverContent className="w-80">
+            <div className="grid gap-4">
+               <div className="space-y-2">
+                  <h4 className="font-medium leading-none">Dimensions</h4>
+                  <p className="text-sm text-muted-foreground">
+                     Set the dimensions for the layer.
+                  </p>
+               </div>
+               <div className="grid gap-2">
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="width">Width</Label>
+                     <Input
+                        id="width"
+                        defaultValue="100%"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="maxWidth">Max. width</Label>
+                     <Input
+                        id="maxWidth"
+                        defaultValue="300px"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="height">Height</Label>
+                     <Input
+                        id="height"
+                        defaultValue="25px"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                     <Label htmlFor="maxHeight">Max. height</Label>
+                     <Input
+                        id="maxHeight"
+                        defaultValue="none"
+                        className="col-span-2 h-8"
+                     />
+                  </div>
+               </div>
+            </div>
+         </PopoverContent>
+      </Popover>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/progress-demo.tsx b/apps/web/registry/miami/internal/sink/components/progress-demo.tsx
new file mode 100644
index 00000000..eb7f6510
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/progress-demo.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import * as React from "react"
+
+import { Progress } from "~/registry/miami/ui/progress"
+
+export function ProgressDemo() {
+   const [progress, setProgress] = React.useState(13)
+
+   React.useEffect(() => {
+      const timer = setTimeout(() => setProgress(66), 500)
+      return () => clearTimeout(timer)
+   }, [])
+
+   return <Progress value={progress} className="w-[60%]" />
+}
diff --git a/apps/web/registry/miami/internal/sink/components/radio-group-demo.tsx b/apps/web/registry/miami/internal/sink/components/radio-group-demo.tsx
new file mode 100644
index 00000000..81f99c43
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/radio-group-demo.tsx
@@ -0,0 +1,21 @@
+import { Label } from "~/registry/miami/ui/label"
+import { RadioGroup, RadioGroupItem } from "~/registry/miami/ui/radio-group"
+
+export function RadioGroupDemo() {
+   return (
+      <RadioGroup defaultValue="comfortable">
+         <div className="flex items-center space-x-2">
+            <RadioGroupItem value="default" id="r1" />
+            <Label htmlFor="r1">Default</Label>
+         </div>
+         <div className="flex items-center space-x-2">
+            <RadioGroupItem value="comfortable" id="r2" />
+            <Label htmlFor="r2">Comfortable</Label>
+         </div>
+         <div className="flex items-center space-x-2">
+            <RadioGroupItem value="compact" id="r3" />
+            <Label htmlFor="r3">Compact</Label>
+         </div>
+      </RadioGroup>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/resizable-handle.tsx b/apps/web/registry/miami/internal/sink/components/resizable-handle.tsx
new file mode 100644
index 00000000..1b229da0
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/resizable-handle.tsx
@@ -0,0 +1,26 @@
+import {
+   ResizableHandle,
+   ResizablePanel,
+   ResizablePanelGroup,
+} from "~/registry/miami/ui/resizable"
+
+export function ResizableHandleDemo() {
+   return (
+      <ResizablePanelGroup
+         direction="horizontal"
+         className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
+      >
+         <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+               <span className="font-semibold">Sidebar</span>
+            </div>
+         </ResizablePanel>
+         <ResizableHandle withHandle />
+         <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+               <span className="font-semibold">Content</span>
+            </div>
+         </ResizablePanel>
+      </ResizablePanelGroup>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/scroll-area-demo.tsx b/apps/web/registry/miami/internal/sink/components/scroll-area-demo.tsx
new file mode 100644
index 00000000..ecb55c67
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/scroll-area-demo.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { ScrollArea } from "~/registry/miami/ui/scroll-area"
+import { Separator } from "~/registry/miami/ui/separator"
+
+const tags = Array.from({ length: 50 }).map(
+   (_, i, a) => `v1.2.0-beta.${a.length - i}`,
+)
+
+export function ScrollAreaDemo() {
+   return (
+      <ScrollArea className="h-72 w-48 rounded-md border">
+         <div className="p-4">
+            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+            {tags.map((tag) => (
+               <React.Fragment key={tag}>
+                  <div className="text-sm">{tag}</div>
+                  <Separator className="my-2" />
+               </React.Fragment>
+            ))}
+         </div>
+      </ScrollArea>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/select-demo.tsx b/apps/web/registry/miami/internal/sink/components/select-demo.tsx
new file mode 100644
index 00000000..75d7454c
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/select-demo.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import {
+   Select,
+   SelectContent,
+   SelectGroup,
+   SelectItem,
+   SelectLabel,
+   SelectTrigger,
+   SelectValue,
+} from "~/registry/miami/ui/select"
+
+export function SelectDemo() {
+   return (
+      <Select>
+         <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select a fruit" />
+         </SelectTrigger>
+         <SelectContent>
+            <SelectGroup>
+               <SelectLabel>Fruits</SelectLabel>
+               <SelectItem value="apple">Apple</SelectItem>
+               <SelectItem value="banana">Banana</SelectItem>
+               <SelectItem value="blueberry">Blueberry</SelectItem>
+               <SelectItem value="grapes">Grapes</SelectItem>
+               <SelectItem value="pineapple">Pineapple</SelectItem>
+            </SelectGroup>
+         </SelectContent>
+      </Select>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/separator-demo.tsx b/apps/web/registry/miami/internal/sink/components/separator-demo.tsx
new file mode 100644
index 00000000..c6f331e2
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/separator-demo.tsx
@@ -0,0 +1,24 @@
+import { Separator } from "~/registry/miami/ui/separator"
+
+export function SeparatorDemo() {
+   return (
+      <div>
+         <div className="space-y-1">
+            <h4 className="text-sm font-medium leading-none">
+               Radix Primitives
+            </h4>
+            <p className="text-sm text-muted-foreground">
+               An open-source UI component library.
+            </p>
+         </div>
+         <Separator className="my-4" />
+         <div className="flex h-5 items-center space-x-4 text-sm">
+            <div>Blog</div>
+            <Separator orientation="vertical" />
+            <div>Docs</div>
+            <Separator orientation="vertical" />
+            <div>Source</div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/sheet-demo.tsx b/apps/web/registry/miami/internal/sink/components/sheet-demo.tsx
new file mode 100644
index 00000000..11e59349
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/sheet-demo.tsx
@@ -0,0 +1,59 @@
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Sheet,
+   SheetClose,
+   SheetContent,
+   SheetDescription,
+   SheetFooter,
+   SheetHeader,
+   SheetTitle,
+   SheetTrigger,
+} from "~/registry/miami/ui/sheet"
+
+export function SheetDemo() {
+   return (
+      <Sheet>
+         <SheetTrigger asChild>
+            <Button variant="outline">Open</Button>
+         </SheetTrigger>
+         <SheetContent>
+            <SheetHeader>
+               <SheetTitle>Edit profile</SheetTitle>
+               <SheetDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+               </SheetDescription>
+            </SheetHeader>
+            <div className="grid gap-4 py-4">
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="name" className="text-right">
+                     Name
+                  </Label>
+                  <Input
+                     id="name"
+                     value="Pedro Duarte"
+                     className="col-span-3"
+                  />
+               </div>
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="username" className="text-right">
+                     Username
+                  </Label>
+                  <Input
+                     id="username"
+                     value="@peduarte"
+                     className="col-span-3"
+                  />
+               </div>
+            </div>
+            <SheetFooter>
+               <SheetClose asChild>
+                  <Button type="submit">Save changes</Button>
+               </SheetClose>
+            </SheetFooter>
+         </SheetContent>
+      </Sheet>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/skeleton-demo.tsx b/apps/web/registry/miami/internal/sink/components/skeleton-demo.tsx
new file mode 100644
index 00000000..3d2c6c90
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/skeleton-demo.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "~/registry/miami/ui/skeleton"
+
+export function SkeletonDemo() {
+   return (
+      <div className="flex items-center space-x-4">
+         <Skeleton className="h-12 w-12 rounded-full" />
+         <div className="space-y-2">
+            <Skeleton className="h-4 w-[250px]" />
+            <Skeleton className="h-4 w-[200px]" />
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/slider-demo.tsx b/apps/web/registry/miami/internal/sink/components/slider-demo.tsx
new file mode 100644
index 00000000..e8d8e6d9
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/slider-demo.tsx
@@ -0,0 +1,16 @@
+import { ny } from "~/lib/utils"
+import { Slider } from "~/registry/miami/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export function SliderDemo({ className, ...props }: SliderProps) {
+   return (
+      <Slider
+         defaultValue={[50]}
+         max={100}
+         step={1}
+         className={ny("w-[60%]", className)}
+         {...props}
+      />
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/sonner-demo.tsx b/apps/web/registry/miami/internal/sink/components/sonner-demo.tsx
new file mode 100644
index 00000000..a7bb10e5
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/sonner-demo.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { toast } from "sonner"
+
+import { Button } from "~/registry/miami/ui/button"
+
+export function SonnerDemo() {
+   return (
+      <Button
+         variant="outline"
+         onClick={() =>
+            toast("Event has been created", {
+               description: "Sunday, December 03, 2023 at 9:00 AM",
+               action: {
+                  label: "Undo",
+                  onClick: () => console.log("Undo"),
+               },
+            })
+         }
+      >
+         Show Toast
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/switch-demo.tsx b/apps/web/registry/miami/internal/sink/components/switch-demo.tsx
new file mode 100644
index 00000000..87866ea4
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/switch-demo.tsx
@@ -0,0 +1,11 @@
+import { Label } from "~/registry/miami/ui/label"
+import { Switch } from "~/registry/miami/ui/switch"
+
+export function SwitchDemo() {
+   return (
+      <div className="flex items-center space-x-2">
+         <Switch id="airplane-mode" />
+         <Label htmlFor="airplane-mode">Airplane Mode</Label>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/table-demo.tsx b/apps/web/registry/miami/internal/sink/components/table-demo.tsx
new file mode 100644
index 00000000..cfa015cb
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/table-demo.tsx
@@ -0,0 +1,91 @@
+import {
+   Table,
+   TableBody,
+   TableCaption,
+   TableCell,
+   TableFooter,
+   TableHead,
+   TableHeader,
+   TableRow,
+} from "~/registry/miami/ui/table"
+
+const invoices = [
+   {
+      invoice: "INV001",
+      paymentStatus: "Paid",
+      totalAmount: "$250.00",
+      paymentMethod: "Credit Card",
+   },
+   {
+      invoice: "INV002",
+      paymentStatus: "Pending",
+      totalAmount: "$150.00",
+      paymentMethod: "PayPal",
+   },
+   {
+      invoice: "INV003",
+      paymentStatus: "Unpaid",
+      totalAmount: "$350.00",
+      paymentMethod: "Bank Transfer",
+   },
+   {
+      invoice: "INV004",
+      paymentStatus: "Paid",
+      totalAmount: "$450.00",
+      paymentMethod: "Credit Card",
+   },
+   {
+      invoice: "INV005",
+      paymentStatus: "Paid",
+      totalAmount: "$550.00",
+      paymentMethod: "PayPal",
+   },
+   {
+      invoice: "INV006",
+      paymentStatus: "Pending",
+      totalAmount: "$200.00",
+      paymentMethod: "Bank Transfer",
+   },
+   {
+      invoice: "INV007",
+      paymentStatus: "Unpaid",
+      totalAmount: "$300.00",
+      paymentMethod: "Credit Card",
+   },
+]
+
+export function TableDemo() {
+   return (
+      <Table>
+         <TableCaption>A list of your recent invoices.</TableCaption>
+         <TableHeader>
+            <TableRow>
+               <TableHead className="w-[100px]">Invoice</TableHead>
+               <TableHead>Status</TableHead>
+               <TableHead>Method</TableHead>
+               <TableHead className="text-right">Amount</TableHead>
+            </TableRow>
+         </TableHeader>
+         <TableBody>
+            {invoices.map((invoice) => (
+               <TableRow key={invoice.invoice}>
+                  <TableCell className="font-medium">
+                     {invoice.invoice}
+                  </TableCell>
+                  <TableCell>{invoice.paymentStatus}</TableCell>
+                  <TableCell>{invoice.paymentMethod}</TableCell>
+                  <TableCell className="text-right">
+                     {invoice.totalAmount}
+                  </TableCell>
+               </TableRow>
+            ))}
+         </TableBody>
+         <TableFooter>
+            <TableRow>
+               <TableCell colSpan={3}>Total</TableCell>
+               <TableCell className="text-right">$2,500.00</TableCell>
+            </TableRow>
+         </TableFooter>
+      </Table>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/tabs-demo.tsx b/apps/web/registry/miami/internal/sink/components/tabs-demo.tsx
new file mode 100644
index 00000000..d852ccb6
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/tabs-demo.tsx
@@ -0,0 +1,76 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Card,
+   CardContent,
+   CardDescription,
+   CardFooter,
+   CardHeader,
+   CardTitle,
+} from "~/registry/miami/ui/card"
+import { Input } from "~/registry/miami/ui/input"
+import { Label } from "~/registry/miami/ui/label"
+import {
+   Tabs,
+   TabsContent,
+   TabsList,
+   TabsTrigger,
+} from "~/registry/miami/ui/tabs"
+
+export function TabsDemo() {
+   return (
+      <Tabs defaultValue="account" className="w-[400px]">
+         <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="account">Account</TabsTrigger>
+            <TabsTrigger value="password">Password</TabsTrigger>
+         </TabsList>
+         <TabsContent value="account">
+            <Card>
+               <CardHeader>
+                  <CardTitle>Account</CardTitle>
+                  <CardDescription>
+                     Make changes to your account here. Click save when you're
+                     done.
+                  </CardDescription>
+               </CardHeader>
+               <CardContent className="space-y-2">
+                  <div className="space-y-1">
+                     <Label htmlFor="name">Name</Label>
+                     <Input id="name" defaultValue="Pedro Duarte" />
+                  </div>
+                  <div className="space-y-1">
+                     <Label htmlFor="username">Username</Label>
+                     <Input id="username" defaultValue="@peduarte" />
+                  </div>
+               </CardContent>
+               <CardFooter>
+                  <Button>Save changes</Button>
+               </CardFooter>
+            </Card>
+         </TabsContent>
+         <TabsContent value="password">
+            <Card>
+               <CardHeader>
+                  <CardTitle>Password</CardTitle>
+                  <CardDescription>
+                     Change your password here. After saving, you'll be logged
+                     out.
+                  </CardDescription>
+               </CardHeader>
+               <CardContent className="space-y-2">
+                  <div className="space-y-1">
+                     <Label htmlFor="current">Current password</Label>
+                     <Input id="current" type="password" />
+                  </div>
+                  <div className="space-y-1">
+                     <Label htmlFor="new">New password</Label>
+                     <Input id="new" type="password" />
+                  </div>
+               </CardContent>
+               <CardFooter>
+                  <Button>Save password</Button>
+               </CardFooter>
+            </Card>
+         </TabsContent>
+      </Tabs>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/team-switcher.tsx b/apps/web/registry/miami/internal/sink/components/team-switcher.tsx
new file mode 100644
index 00000000..3d5c4d29
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/team-switcher.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { ChevronsUpDown, Plus } from "lucide-react"
+import * as React from "react"
+
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export function TeamSwitcher({
+   teams,
+}: {
+   teams: {
+      name: string
+      logo: React.ElementType
+      plan: string
+   }[]
+}) {
+   const { isMobile } = useSidebar()
+   const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+   return (
+      <SidebarMenu>
+         <SidebarMenuItem>
+            <DropdownMenu>
+               <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                     size="lg"
+                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                     <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                        <activeTeam.logo className="size-4" />
+                     </div>
+                     <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                           {activeTeam.name}
+                        </span>
+                        <span className="truncate text-xs">
+                           {activeTeam.plan}
+                        </span>
+                     </div>
+                     <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+               </DropdownMenuTrigger>
+               <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  align="start"
+                  side={isMobile ? "bottom" : "right"}
+                  sideOffset={4}
+               >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                     Teams
+                  </DropdownMenuLabel>
+                  {teams.map((team, index) => (
+                     <DropdownMenuItem
+                        key={team.name}
+                        onClick={() => setActiveTeam(team)}
+                        className="gap-2 p-2"
+                     >
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
+                           <team.logo className="size-4 shrink-0" />
+                        </div>
+                        {team.name}
+                        <DropdownMenuShortcut>
+                           ⌘{index + 1}
+                        </DropdownMenuShortcut>
+                     </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                     <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                        <Plus className="size-4" />
+                     </div>
+                     <div className="font-medium text-muted-foreground">
+                        Add team
+                     </div>
+                  </DropdownMenuItem>
+               </DropdownMenuContent>
+            </DropdownMenu>
+         </SidebarMenuItem>
+      </SidebarMenu>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/textarea-demo.tsx b/apps/web/registry/miami/internal/sink/components/textarea-demo.tsx
new file mode 100644
index 00000000..3e1f84f2
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/textarea-demo.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "~/registry/miami/ui/textarea"
+
+export function TextareaDemo() {
+   return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/web/registry/miami/internal/sink/components/toast-demo.tsx b/apps/web/registry/miami/internal/sink/components/toast-demo.tsx
new file mode 100644
index 00000000..b49a50f5
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/toast-demo.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { useToast } from "~/registry/miami/hooks/use-toast"
+import { Button } from "~/registry/miami/ui/button"
+import { ToastAction } from "~/registry/miami/ui/toast"
+
+export function ToastDemo() {
+   const { toast } = useToast()
+
+   return (
+      <Button
+         variant="outline"
+         onClick={() => {
+            toast({
+               title: "Scheduled: Catch up ",
+               description: "Friday, February 10, 2023 at 5:57 PM",
+               action: (
+                  <ToastAction altText="Goto schedule to undo">
+                     Undo
+                  </ToastAction>
+               ),
+            })
+         }}
+      >
+         Add to calendar
+      </Button>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/toggle-demo.tsx b/apps/web/registry/miami/internal/sink/components/toggle-demo.tsx
new file mode 100644
index 00000000..c2e7c0fd
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { Bold } from "lucide-react"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export function ToggleDemo() {
+   return (
+      <Toggle aria-label="Toggle italic">
+         <Bold className="h-4 w-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/toggle-disabled.tsx b/apps/web/registry/miami/internal/sink/components/toggle-disabled.tsx
new file mode 100644
index 00000000..77d7a3f1
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { Underline } from "lucide-react"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export function ToggleDisabled() {
+   return (
+      <Toggle aria-label="Toggle italic" disabled>
+         <Underline className="h-4 w-4" />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/toggle-group-demo.tsx b/apps/web/registry/miami/internal/sink/components/toggle-group-demo.tsx
new file mode 100644
index 00000000..af9cbd68
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/toggle-group-demo.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
+
+export function ToggleGroupDemo() {
+   return (
+      <ToggleGroup type="multiple">
+         <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <Bold className="h-4 w-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <Italic className="h-4 w-4" />
+         </ToggleGroupItem>
+         <ToggleGroupItem
+            value="strikethrough"
+            aria-label="Toggle strikethrough"
+         >
+            <Underline className="h-4 w-4" />
+         </ToggleGroupItem>
+      </ToggleGroup>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/toggle-outline.tsx b/apps/web/registry/miami/internal/sink/components/toggle-outline.tsx
new file mode 100644
index 00000000..058746ba
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/toggle-outline.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export function ToggleOutline() {
+   return (
+      <Toggle variant="outline" aria-label="Toggle italic">
+         <Italic />
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/toggle-with-text.tsx b/apps/web/registry/miami/internal/sink/components/toggle-with-text.tsx
new file mode 100644
index 00000000..70bb6231
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "~/registry/miami/ui/toggle"
+
+export function ToggleWithText() {
+   return (
+      <Toggle aria-label="Toggle italic">
+         <Italic />
+         Italic
+      </Toggle>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/components/tooltip-demo.tsx b/apps/web/registry/miami/internal/sink/components/tooltip-demo.tsx
new file mode 100644
index 00000000..dc74cb2f
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/components/tooltip-demo.tsx
@@ -0,0 +1,22 @@
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from "~/registry/miami/ui/tooltip"
+
+export function TooltipDemo() {
+   return (
+      <TooltipProvider>
+         <Tooltip>
+            <TooltipTrigger asChild>
+               <Button variant="outline">Hover</Button>
+            </TooltipTrigger>
+            <TooltipContent>
+               <p>Add to library</p>
+            </TooltipContent>
+         </Tooltip>
+      </TooltipProvider>
+   )
+}
diff --git a/apps/web/registry/miami/internal/sink/page.tsx b/apps/web/registry/miami/internal/sink/page.tsx
new file mode 100644
index 00000000..a58f7aef
--- /dev/null
+++ b/apps/web/registry/miami/internal/sink/page.tsx
@@ -0,0 +1,276 @@
+import { AccordionDemo } from "~/registry/miami/internal/sink/components/accordion-demo"
+import { AlertDemo } from "~/registry/miami/internal/sink/components/alert-demo"
+import { AlertDialogDemo } from "~/registry/miami/internal/sink/components/alert-dialog-demo"
+import { AppSidebar } from "~/registry/miami/internal/sink/components/app-sidebar"
+import { AspectRatioDemo } from "~/registry/miami/internal/sink/components/aspect-ratio-demo"
+import { AvatarDemo } from "~/registry/miami/internal/sink/components/avatar-demo"
+import { BadgeDemo } from "~/registry/miami/internal/sink/components/badge-demo"
+import { BadgeDestructive } from "~/registry/miami/internal/sink/components/badge-destructive"
+import { BadgeOutline } from "~/registry/miami/internal/sink/components/badge-outline"
+import { BadgeSecondary } from "~/registry/miami/internal/sink/components/badge-secondary"
+import { BreadcrumbDemo } from "~/registry/miami/internal/sink/components/breadcrumb-demo"
+import { ButtonDemo } from "~/registry/miami/internal/sink/components/button-demo"
+import { ButtonDestructive } from "~/registry/miami/internal/sink/components/button-destructive"
+import { ButtonGhost } from "~/registry/miami/internal/sink/components/button-ghost"
+import { ButtonLink } from "~/registry/miami/internal/sink/components/button-link"
+import { ButtonLoading } from "~/registry/miami/internal/sink/components/button-loading"
+import { ButtonOutline } from "~/registry/miami/internal/sink/components/button-outline"
+import { ButtonSecondary } from "~/registry/miami/internal/sink/components/button-secondary"
+import { ButtonWithIcon } from "~/registry/miami/internal/sink/components/button-with-icon"
+import { CalendarDemo } from "~/registry/miami/internal/sink/components/calendar-demo"
+import { CardDemo } from "~/registry/miami/internal/sink/components/card-demo"
+import { CarouselDemo } from "~/registry/miami/internal/sink/components/carousel-demo"
+import { CheckboxDemo } from "~/registry/miami/internal/sink/components/checkbox-demo"
+import { CollapsibleDemo } from "~/registry/miami/internal/sink/components/collapsible-demo"
+import { ComboboxDemo } from "~/registry/miami/internal/sink/components/combobox-demo"
+import { CommandDemo } from "~/registry/miami/internal/sink/components/command-demo"
+import { ComponentWrapper } from "~/registry/miami/internal/sink/components/component-wrapper"
+import { ContextMenuDemo } from "~/registry/miami/internal/sink/components/context-menu-demo"
+import { DatePickerDemo } from "~/registry/miami/internal/sink/components/date-picker-demo"
+import { DialogDemo } from "~/registry/miami/internal/sink/components/dialog-demo"
+import { DrawerDemo } from "~/registry/miami/internal/sink/components/drawer-demo"
+import { DropdownMenuDemo } from "~/registry/miami/internal/sink/components/dropdown-menu-demo"
+import { HoverCardDemo } from "~/registry/miami/internal/sink/components/hover-card-demo"
+import { InputDemo } from "~/registry/miami/internal/sink/components/input-demo"
+import { InputOTPDemo } from "~/registry/miami/internal/sink/components/input-otp-demo"
+import { LabelDemo } from "~/registry/miami/internal/sink/components/label-demo"
+import { MenubarDemo } from "~/registry/miami/internal/sink/components/menubar-demo"
+import { NavigationMenuDemo } from "~/registry/miami/internal/sink/components/navigation-menu-demo"
+import { PaginationDemo } from "~/registry/miami/internal/sink/components/pagination-demo"
+import { PopoverDemo } from "~/registry/miami/internal/sink/components/popover-demo"
+import { ProgressDemo } from "~/registry/miami/internal/sink/components/progress-demo"
+import { RadioGroupDemo } from "~/registry/miami/internal/sink/components/radio-group-demo"
+import { ResizableHandleDemo } from "~/registry/miami/internal/sink/components/resizable-handle"
+import { ScrollAreaDemo } from "~/registry/miami/internal/sink/components/scroll-area-demo"
+import { SelectDemo } from "~/registry/miami/internal/sink/components/select-demo"
+import { SeparatorDemo } from "~/registry/miami/internal/sink/components/separator-demo"
+import { SheetDemo } from "~/registry/miami/internal/sink/components/sheet-demo"
+import { SkeletonDemo } from "~/registry/miami/internal/sink/components/skeleton-demo"
+import { SliderDemo } from "~/registry/miami/internal/sink/components/slider-demo"
+import { SonnerDemo } from "~/registry/miami/internal/sink/components/sonner-demo"
+import { SwitchDemo } from "~/registry/miami/internal/sink/components/switch-demo"
+import { TableDemo } from "~/registry/miami/internal/sink/components/table-demo"
+import { TabsDemo } from "~/registry/miami/internal/sink/components/tabs-demo"
+import { TextareaDemo } from "~/registry/miami/internal/sink/components/textarea-demo"
+import { ToastDemo } from "~/registry/miami/internal/sink/components/toast-demo"
+import { ToggleDemo } from "~/registry/miami/internal/sink/components/toggle-demo"
+import { ToggleDisabled } from "~/registry/miami/internal/sink/components/toggle-disabled"
+import { ToggleGroupDemo } from "~/registry/miami/internal/sink/components/toggle-group-demo"
+import { ToggleOutline } from "~/registry/miami/internal/sink/components/toggle-outline"
+import { ToggleWithText } from "~/registry/miami/internal/sink/components/toggle-with-text"
+import { TooltipDemo } from "~/registry/miami/internal/sink/components/tooltip-demo"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   SidebarInset,
+   SidebarProvider,
+   SidebarTrigger,
+} from "~/registry/miami/ui/sidebar"
+
+export default function SinkPage() {
+   return (
+      <SidebarProvider>
+         <AppSidebar />
+         <SidebarInset>
+            <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">
+               <div className="flex items-center gap-2 px-4">
+                  <SidebarTrigger className="-ml-1" />
+                  <Separator orientation="vertical" className="mr-2 h-4" />
+                  <Breadcrumb>
+                     <BreadcrumbList>
+                        <BreadcrumbItem className="hidden md:block">
+                           <BreadcrumbLink href="#">
+                              Building Your Application
+                           </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="hidden md:block" />
+                        <BreadcrumbItem>
+                           <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                        </BreadcrumbItem>
+                     </BreadcrumbList>
+                  </Breadcrumb>
+               </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  <ComponentWrapper name="Accordion">
+                     <AccordionDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Alert">
+                     <AlertDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="AlertDialog">
+                     <AlertDialogDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="AspectRatio">
+                     <AspectRatioDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Avatar">
+                     <AvatarDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Badge">
+                     <BadgeDemo />
+                     <BadgeDestructive />
+                     <BadgeOutline />
+                     <BadgeSecondary />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Breadcrumb">
+                     <BreadcrumbDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Button">
+                     <div className="flex items-center gap-2">
+                        <ButtonDemo />
+                        <ButtonDestructive />
+                        <ButtonGhost />
+                        <ButtonLink />
+                     </div>
+                     <div className="flex items-center gap-2">
+                        <ButtonLoading />
+                        <ButtonOutline />
+                        <ButtonSecondary />
+                     </div>
+                     <div className="flex items-center gap-2">
+                        <ButtonWithIcon />
+                     </div>
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Calendar">
+                     <CalendarDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Card">
+                     <CardDemo className="w-full" />
+                  </ComponentWrapper>
+                  <ComponentWrapper
+                     name="Carousel"
+                     className="[&_.max-w-xs]:max-w-[70%]"
+                  >
+                     <CarouselDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Checkbox">
+                     <CheckboxDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Collapsible">
+                     <CollapsibleDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Combobox">
+                     <ComboboxDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper
+                     name="Command"
+                     className="[&_[cmdk-root]]:md:min-w-max"
+                  >
+                     <CommandDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="ContextMenu">
+                     <ContextMenuDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="DatePicker">
+                     <DatePickerDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Dialog">
+                     <DialogDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Drawer">
+                     <DrawerDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="DropdownMenu">
+                     <DropdownMenuDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="HoverCard">
+                     <HoverCardDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Input">
+                     <InputDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="InputOTP">
+                     <InputOTPDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Label">
+                     <LabelDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Menubar">
+                     <MenubarDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper
+                     name="NavigationMenu"
+                     className="col-span-2"
+                  >
+                     <NavigationMenuDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Pagination">
+                     <PaginationDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Popover">
+                     <PopoverDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Progress">
+                     <ProgressDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="RadioGroup">
+                     <RadioGroupDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Resizable" className="col-span-2">
+                     <ResizableHandleDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="ScrollArea">
+                     <ScrollAreaDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Select">
+                     <SelectDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Separator">
+                     <SeparatorDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Sheet">
+                     <SheetDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Skeleton">
+                     <SkeletonDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Slider">
+                     <SliderDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Sonner">
+                     <SonnerDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Switch">
+                     <SwitchDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Table" className="col-span-2">
+                     <TableDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Tabs">
+                     <TabsDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Textarea">
+                     <TextareaDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Toast">
+                     <ToastDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Toggle">
+                     <div className="flex items-center gap-2">
+                        <ToggleDemo />
+                        <ToggleDisabled />
+                        <ToggleOutline />
+                        <ToggleWithText />
+                     </div>
+                  </ComponentWrapper>
+                  <ComponentWrapper name="ToggleGroup">
+                     <ToggleGroupDemo />
+                  </ComponentWrapper>
+                  <ComponentWrapper name="Tooltip">
+                     <TooltipDemo />
+                  </ComponentWrapper>
+               </div>
+            </div>
+         </SidebarInset>
+      </SidebarProvider>
+   )
+}
diff --git a/apps/web/registry/miami/lib/utils.ts b/apps/web/registry/miami/lib/utils.ts
index 07259d12..9c376563 100644
--- a/apps/web/registry/miami/lib/utils.ts
+++ b/apps/web/registry/miami/lib/utils.ts
@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
 
 export function ny(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs))
diff --git a/apps/web/registry/miami/ui/accordion.tsx b/apps/web/registry/miami/ui/accordion.tsx
index 45ac2fe8..e8de35b9 100644
--- a/apps/web/registry/miami/ui/accordion.tsx
+++ b/apps/web/registry/miami/ui/accordion.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ChevronDownIcon } from '@radix-ui/react-icons'
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Accordion = AccordionPrimitive.Root
 
@@ -14,11 +14,11 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <AccordionPrimitive.Item
       ref={ref}
-      className={ny('border-b', className)}
+      className={ny("border-b", className)}
       {...props}
    />
 ))
-AccordionItem.displayName = 'AccordionItem'
+AccordionItem.displayName = "AccordionItem"
 
 const AccordionTrigger = React.forwardRef<
    React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
       <AccordionPrimitive.Trigger
          ref={ref}
          className={ny(
-            'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+            "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
             className,
          )}
          {...props}
@@ -49,7 +49,7 @@ const AccordionContent = React.forwardRef<
       className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
       {...props}
    >
-      <div className={ny('pb-4 pt-0', className)}>{children}</div>
+      <div className={ny("pb-4 pt-0", className)}>{children}</div>
    </AccordionPrimitive.Content>
 ))
 AccordionContent.displayName = AccordionPrimitive.Content.displayName
diff --git a/apps/web/registry/miami/ui/alert-dialog.tsx b/apps/web/registry/miami/ui/alert-dialog.tsx
index f41cbe40..279406c7 100644
--- a/apps/web/registry/miami/ui/alert-dialog.tsx
+++ b/apps/web/registry/miami/ui/alert-dialog.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
-import type { VariantProps } from 'class-variance-authority'
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import type { VariantProps } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { buttonVariants } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import { buttonVariants } from "~/registry/miami/ui/button"
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -19,7 +19,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <AlertDialogPrimitive.Overlay
       className={ny(
-         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
          className,
       )}
       {...props}
@@ -37,7 +37,7 @@ const AlertDialogContent = React.forwardRef<
       <AlertDialogPrimitive.Content
          ref={ref}
          className={ny(
-            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
             className,
          )}
          {...props}
@@ -53,14 +53,14 @@ function AlertDialogHeader({
    return (
       <div
          className={ny(
-            'flex flex-col space-y-2 text-center sm:text-left',
+            "flex flex-col space-y-2 text-center sm:text-left",
             className,
          )}
          {...props}
       />
    )
 }
-AlertDialogHeader.displayName = 'AlertDialogHeader'
+AlertDialogHeader.displayName = "AlertDialogHeader"
 
 function AlertDialogFooter({
    className,
@@ -69,14 +69,14 @@ function AlertDialogFooter({
    return (
       <div
          className={ny(
-            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
             className,
          )}
          {...props}
       />
    )
 }
-AlertDialogFooter.displayName = 'AlertDialogFooter'
+AlertDialogFooter.displayName = "AlertDialogFooter"
 
 const AlertDialogTitle = React.forwardRef<
    React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -84,7 +84,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <AlertDialogPrimitive.Title
       ref={ref}
-      className={ny('text-lg font-semibold', className)}
+      className={ny("text-lg font-semibold", className)}
       {...props}
    />
 ))
@@ -96,17 +96,17 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <AlertDialogPrimitive.Description
       ref={ref}
-      className={ny('text-muted-foreground text-sm', className)}
+      className={ny("text-muted-foreground text-sm", className)}
       {...props}
    />
 ))
-AlertDialogDescription.displayName
-  = AlertDialogPrimitive.Description.displayName
+AlertDialogDescription.displayName =
+   AlertDialogPrimitive.Description.displayName
 
 const AlertDialogAction = React.forwardRef<
    React.ElementRef<typeof AlertDialogPrimitive.Action>,
    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &
-   VariantProps<typeof buttonVariants>
+      VariantProps<typeof buttonVariants>
 >(({ className, variant, size, ...props }, ref) => (
    <AlertDialogPrimitive.Action
       ref={ref}
@@ -119,11 +119,15 @@ AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
 const AlertDialogCancel = React.forwardRef<
    React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &
-   VariantProps<typeof buttonVariants>
->(({ className, variant = 'outline', size, ...props }, ref) => (
+      VariantProps<typeof buttonVariants>
+>(({ className, variant = "outline", size, ...props }, ref) => (
    <AlertDialogPrimitive.Cancel
       ref={ref}
-      className={ny(buttonVariants({ variant, size }), 'mt-2 sm:mt-0', className)}
+      className={ny(
+         buttonVariants({ variant, size }),
+         "mt-2 sm:mt-0",
+         className,
+      )}
       {...props}
    />
 ))
diff --git a/apps/web/registry/miami/ui/alert.tsx b/apps/web/registry/miami/ui/alert.tsx
index aaeb701d..2703633c 100644
--- a/apps/web/registry/miami/ui/alert.tsx
+++ b/apps/web/registry/miami/ui/alert.tsx
@@ -1,27 +1,27 @@
-import * as React from 'react'
-import { type VariantProps, cva } from 'class-variance-authority'
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const alertVariants = cva(
-   'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
    {
       variants: {
          variant: {
-            default: 'bg-background text-foreground',
+            default: "bg-background text-foreground",
             destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+               "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
          },
       },
       defaultVariants: {
-         variant: 'default',
+         variant: "default",
       },
    },
 )
 
 const Alert = React.forwardRef<
    HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
    <div
       ref={ref}
@@ -30,7 +30,7 @@ const Alert = React.forwardRef<
       {...props}
    />
 ))
-Alert.displayName = 'Alert'
+Alert.displayName = "Alert"
 
 const AlertTitle = React.forwardRef<
    HTMLParagraphElement,
@@ -38,11 +38,11 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <h5
       ref={ref}
-      className={ny('mb-1 font-medium leading-none tracking-tight', className)}
+      className={ny("mb-1 font-medium leading-none tracking-tight", className)}
       {...props}
    />
 ))
-AlertTitle.displayName = 'AlertTitle'
+AlertTitle.displayName = "AlertTitle"
 
 const AlertDescription = React.forwardRef<
    HTMLParagraphElement,
@@ -50,10 +50,10 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <div
       ref={ref}
-      className={ny('text-sm [&_p]:leading-relaxed', className)}
+      className={ny("text-sm [&_p]:leading-relaxed", className)}
       {...props}
    />
 ))
-AlertDescription.displayName = 'AlertDescription'
+AlertDescription.displayName = "AlertDescription"
 
 export { Alert, AlertTitle, AlertDescription }
diff --git a/apps/web/registry/miami/ui/animated-beam.tsx b/apps/web/registry/miami/ui/animated-beam.tsx
index 49a1f661..75154646 100644
--- a/apps/web/registry/miami/ui/animated-beam.tsx
+++ b/apps/web/registry/miami/ui/animated-beam.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { motion } from 'framer-motion'
-import type { RefObject } from 'react'
-import { useEffect, useId, useState } from 'react'
-import { ny } from '~/lib/utils'
+import { motion } from "framer-motion"
+import type { RefObject } from "react"
+import { useEffect, useId, useState } from "react"
+import { ny } from "~/lib/utils"
 
 export interface AnimatedBeamProps {
    className?: string
@@ -34,34 +34,34 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
    reverse = false, // Include the reverse prop
    duration = Math.random() * 3 + 4,
    delay = 0,
-   pathColor = 'gray',
+   pathColor = "gray",
    pathWidth = 2,
    pathOpacity = 0.2,
-   gradientStartColor = '#ffaa40',
-   gradientStopColor = '#9c40ff',
+   gradientStartColor = "#ffaa40",
+   gradientStopColor = "#9c40ff",
    startXOffset = 0,
    startYOffset = 0,
    endXOffset = 0,
    endYOffset = 0,
 }) => {
    const id = useId()
-   const [pathD, setPathD] = useState('')
+   const [pathD, setPathD] = useState("")
    const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 })
 
    // Calculate the gradient coordinates based on the reverse prop
    const gradientCoordinates = reverse
       ? {
-            x1: ['90%', '-10%'],
-            x2: ['100%', '0%'],
-            y1: ['0%', '0%'],
-            y2: ['0%', '0%'],
-         }
+           x1: ["90%", "-10%"],
+           x2: ["100%", "0%"],
+           y1: ["0%", "0%"],
+           y2: ["0%", "0%"],
+        }
       : {
-            x1: ['10%', '110%'],
-            x2: ['0%', '100%'],
-            y1: ['0%', '0%'],
-            y2: ['0%', '0%'],
-         }
+           x1: ["10%", "110%"],
+           x2: ["0%", "100%"],
+           y1: ["0%", "0%"],
+           y2: ["0%", "0%"],
+        }
 
    useEffect(() => {
       const updatePath = () => {
@@ -74,32 +74,31 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
             const svgHeight = containerRect.height
             setSvgDimensions({ width: svgWidth, height: svgHeight })
 
-            const startX
-          = rectA.left - containerRect.left + rectA.width / 2 + startXOffset
-            const startY
-          = rectA.top - containerRect.top + rectA.height / 2 + startYOffset
-            const endX
-          = rectB.left - containerRect.left + rectB.width / 2 + endXOffset
-            const endY
-          = rectB.top - containerRect.top + rectB.height / 2 + endYOffset
+            const startX =
+               rectA.left - containerRect.left + rectA.width / 2 + startXOffset
+            const startY =
+               rectA.top - containerRect.top + rectA.height / 2 + startYOffset
+            const endX =
+               rectB.left - containerRect.left + rectB.width / 2 + endXOffset
+            const endY =
+               rectB.top - containerRect.top + rectB.height / 2 + endYOffset
 
             const controlY = startY - curvature
             const d = `M ${startX},${startY} Q ${
-          (startX + endX) / 2
-        },${controlY} ${endX},${endY}`
+               (startX + endX) / 2
+            },${controlY} ${endX},${endY}`
             setPathD(d)
          }
       }
 
       // Initialize ResizeObserver
       const resizeObserver = new ResizeObserver((entries) => {
-      // For all entries, recalculate the path
+         // For all entries, recalculate the path
          for (const entry of entries) updatePath()
       })
 
       // Observe the container element
-      if (containerRef.current)
-         resizeObserver.observe(containerRef.current)
+      if (containerRef.current) resizeObserver.observe(containerRef.current)
 
       // Call the updatePath initially to set the initial path
       updatePath()
@@ -126,7 +125,7 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
          height={svgDimensions.height}
          xmlns="http://www.w3.org/2000/svg"
          className={ny(
-            'pointer-events-none absolute left-0 top-0 transform-gpu stroke-2',
+            "pointer-events-none absolute left-0 top-0 transform-gpu stroke-2",
             className,
          )}
          viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
@@ -151,10 +150,10 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
                id={id}
                gradientUnits="userSpaceOnUse"
                initial={{
-                  x1: '0%',
-                  x2: '0%',
-                  y1: '0%',
-                  y2: '0%',
+                  x1: "0%",
+                  x2: "0%",
+                  y1: "0%",
+                  y2: "0%",
                }}
                animate={{
                   x1: gradientCoordinates.x1,
@@ -166,7 +165,7 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
                   delay,
                   duration,
                   ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo
-                  repeat: Infinity,
+                  repeat: Number.POSITIVE_INFINITY,
                   repeatDelay: 0,
                }}
             >
@@ -177,8 +176,7 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
                   offset="100%"
                   stopColor={gradientStopColor}
                   stopOpacity="0"
-               >
-               </stop>
+               ></stop>
             </motion.linearGradient>
          </defs>
       </svg>
diff --git a/apps/web/registry/miami/ui/animated-circular-progress-bar.tsx b/apps/web/registry/miami/ui/animated-circular-progress-bar.tsx
index 4c080aa5..fb910424 100644
--- a/apps/web/registry/miami/ui/animated-circular-progress-bar.tsx
+++ b/apps/web/registry/miami/ui/animated-circular-progress-bar.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface Props {
    max: number
@@ -23,19 +23,19 @@ export default function AnimatedCircularProgressBar({
 
    return (
       <div
-         className={ny('relative size-40 text-2xl font-semibold', className)}
+         className={ny("relative size-40 text-2xl font-semibold", className)}
          style={
             {
-               '--circle-size': '100px',
-               '--circumference': circumference,
-               '--percent-to-px': `${percentPx}px`,
-               '--gap-percent': '5',
-               '--offset-factor': '0',
-               '--transition-length': '1s',
-               '--transition-step': '200ms',
-               '--delay': '0s',
-               '--percent-to-deg': '3.6deg',
-               'transform': 'translateZ(0)',
+               "--circle-size": "100px",
+               "--circumference": circumference,
+               "--percent-to-px": `${percentPx}px`,
+               "--gap-percent": "5",
+               "--offset-factor": "0",
+               "--transition-length": "1s",
+               "--transition-step": "200ms",
+               "--delay": "0s",
+               "--percent-to-deg": "3.6deg",
+               transform: "translateZ(0)",
             } as React.CSSProperties
          }
       >
@@ -57,16 +57,18 @@ export default function AnimatedCircularProgressBar({
                   className=" opacity-100"
                   style={
                      {
-                        'stroke': gaugeSecondaryColor,
-                        '--stroke-percent': 90 - currentPercent,
-                        '--offset-factor-secondary': 'calc(1 - var(--offset-factor))',
-                        'strokeDasharray':
-                  'calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)',
-                        'transform':
-                  'rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)',
-                        'transition': 'all var(--transition-length) ease var(--delay)',
-                        'transformOrigin':
-                  'calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)',
+                        stroke: gaugeSecondaryColor,
+                        "--stroke-percent": 90 - currentPercent,
+                        "--offset-factor-secondary":
+                           "calc(1 - var(--offset-factor))",
+                        strokeDasharray:
+                           "calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
+                        transform:
+                           "rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)",
+                        transition:
+                           "all var(--transition-length) ease var(--delay)",
+                        transformOrigin:
+                           "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
                      } as React.CSSProperties
                   }
                />
@@ -82,17 +84,17 @@ export default function AnimatedCircularProgressBar({
                className="opacity-100"
                style={
                   {
-                     'stroke': gaugePrimaryColor,
-                     '--stroke-percent': currentPercent,
-                     'strokeDasharray':
-                'calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)',
-                     'transition':
-                'var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)',
-                     'transitionProperty': 'stroke-dasharray,transform',
-                     'transform':
-                'rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))',
-                     'transformOrigin':
-                'calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)',
+                     stroke: gaugePrimaryColor,
+                     "--stroke-percent": currentPercent,
+                     strokeDasharray:
+                        "calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
+                     transition:
+                        "var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)",
+                     transitionProperty: "stroke-dasharray,transform",
+                     transform:
+                        "rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))",
+                     transformOrigin:
+                        "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
                   } as React.CSSProperties
                }
             />
diff --git a/apps/web/registry/miami/ui/animated-gradient-text.tsx b/apps/web/registry/miami/ui/animated-gradient-text.tsx
index a1679a9f..9529277b 100644
--- a/apps/web/registry/miami/ui/animated-gradient-text.tsx
+++ b/apps/web/registry/miami/ui/animated-gradient-text.tsx
@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react'
-import { ny } from '~/lib/utils'
+import type { ReactNode } from "react"
+import { ny } from "~/lib/utils"
 
 export default function AnimatedGradientText({
    children,
@@ -11,7 +11,7 @@ export default function AnimatedGradientText({
    return (
       <div
          className={ny(
-            'group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40',
+            "group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40",
             className,
          )}
       >
diff --git a/apps/web/registry/miami/ui/animated-grid-pattern.tsx b/apps/web/registry/miami/ui/animated-grid-pattern.tsx
index 50d3bd40..139c4a56 100644
--- a/apps/web/registry/miami/ui/animated-grid-pattern.tsx
+++ b/apps/web/registry/miami/ui/animated-grid-pattern.tsx
@@ -1,23 +1,30 @@
-'use client'
+"use client"
 
-import { motion } from 'framer-motion'
-import { useEffect, useId, useRef, useState } from 'react'
-import { ny } from '~/lib/utils'
+import { motion } from "motion/react"
+import {
+   type ComponentPropsWithoutRef,
+   useEffect,
+   useId,
+   useRef,
+   useState,
+} from "react"
 
-interface GridPatternProps {
+import { ny } from "~/registry/miami/lib/utils"
+
+export interface AnimatedGridPatternProps
+   extends ComponentPropsWithoutRef<"svg"> {
    width?: number
    height?: number
    x?: number
    y?: number
    strokeDasharray?: any
    numSquares?: number
-   className?: string
    maxOpacity?: number
    duration?: number
    repeatDelay?: number
 }
 
-export function GridPattern({
+export function AnimatedGridPattern({
    width = 40,
    height = 40,
    x = -1,
@@ -29,7 +36,7 @@ export function GridPattern({
    duration = 4,
    repeatDelay = 0.5,
    ...props
-}: GridPatternProps) {
+}: AnimatedGridPatternProps) {
    const id = useId()
    const containerRef = useRef(null)
    const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
@@ -52,13 +59,13 @@ export function GridPattern({
 
    // Function to update a single square's position
    const updateSquarePosition = (id: number) => {
-      setSquares(currentSquares =>
-         currentSquares.map(sq =>
+      setSquares((currentSquares) =>
+         currentSquares.map((sq) =>
             sq.id === id
                ? {
-                     ...sq,
-                     pos: getPos(),
-                  }
+                    ...sq,
+                    pos: getPos(),
+                 }
                : sq,
          ),
       )
@@ -66,8 +73,9 @@ export function GridPattern({
 
    // Update squares to animate in
    useEffect(() => {
-      if (dimensions.width && dimensions.height)
+      if (dimensions.width && dimensions.height) {
          setSquares(generateSquares(numSquares))
+      }
    }, [dimensions, numSquares])
 
    // Resize observer to update container dimensions
@@ -81,12 +89,14 @@ export function GridPattern({
          }
       })
 
-      if (containerRef.current)
+      if (containerRef.current) {
          resizeObserver.observe(containerRef.current)
+      }
 
       return () => {
-         if (containerRef.current)
+         if (containerRef.current) {
             resizeObserver.unobserve(containerRef.current)
+         }
       }
    }, [containerRef])
 
@@ -95,7 +105,7 @@ export function GridPattern({
          ref={containerRef}
          aria-hidden="true"
          className={ny(
-            'pointer-events-none absolute inset-0 size-full fill-gray-400/30 stroke-gray-400/30',
+            "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
             className,
          )}
          {...props}
@@ -126,7 +136,7 @@ export function GridPattern({
                      duration,
                      repeat: 1,
                      delay: index * 0.1,
-                     repeatType: 'reverse',
+                     repeatType: "reverse",
                   }}
                   onAnimationComplete={() => updateSquarePosition(id)}
                   key={`${x}-${y}-${index}`}
@@ -142,5 +152,3 @@ export function GridPattern({
       </svg>
    )
 }
-
-export default GridPattern
diff --git a/apps/web/registry/miami/ui/animated-list.tsx b/apps/web/registry/miami/ui/animated-list.tsx
index 0eb38caf..1c893a44 100644
--- a/apps/web/registry/miami/ui/animated-list.tsx
+++ b/apps/web/registry/miami/ui/animated-list.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { AnimatePresence, motion } from 'framer-motion'
-import type { ReactElement } from 'react'
-import React, { useEffect, useMemo, useState } from 'react'
+import { AnimatePresence, motion } from "framer-motion"
+import type { ReactElement } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 
 export const AnimatedList = React.memo(
    ({
@@ -19,7 +19,7 @@ export const AnimatedList = React.memo(
 
       useEffect(() => {
          const interval = setInterval(() => {
-            setIndex(prevIndex => (prevIndex + 1) % childrenArray.length)
+            setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)
          }, delay)
 
          return () => clearInterval(interval)
@@ -33,7 +33,7 @@ export const AnimatedList = React.memo(
       return (
          <div className={`flex flex-col items-center gap-4 ${className}`}>
             <AnimatePresence>
-               {itemsToShow.map(item => (
+               {itemsToShow.map((item) => (
                   <AnimatedListItem key={(item as ReactElement).key}>
                      {item}
                   </AnimatedListItem>
@@ -44,14 +44,14 @@ export const AnimatedList = React.memo(
    },
 )
 
-AnimatedList.displayName = 'AnimatedList'
+AnimatedList.displayName = "AnimatedList"
 
 export function AnimatedListItem({ children }: { children: React.ReactNode }) {
    const animations = {
       initial: { scale: 0, opacity: 0 },
       animate: { scale: 1, opacity: 1, originY: 0 },
       exit: { scale: 0, opacity: 0 },
-      transition: { type: 'spring', stiffness: 350, damping: 40 },
+      transition: { type: "spring", stiffness: 350, damping: 40 },
    }
 
    return (
diff --git a/apps/web/registry/miami/ui/animated-shiny-text.tsx b/apps/web/registry/miami/ui/animated-shiny-text.tsx
index fdad1d12..dfab5c00 100644
--- a/apps/web/registry/miami/ui/animated-shiny-text.tsx
+++ b/apps/web/registry/miami/ui/animated-shiny-text.tsx
@@ -1,5 +1,5 @@
-import type { CSSProperties, FC, ReactNode } from 'react'
-import { ny } from '~/lib/utils'
+import type { CSSProperties, FC, ReactNode } from "react"
+import { ny } from "~/lib/utils"
 
 interface AnimatedShinyTextProps {
    children: ReactNode
@@ -16,17 +16,17 @@ const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
       <p
          style={
             {
-               '--shimmer-width': `${shimmerWidth}px`,
+               "--shimmer-width": `${shimmerWidth}px`,
             } as CSSProperties
          }
          className={ny(
-            'mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50 ',
+            "mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50 ",
 
             // Shimmer effect
-            'animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]',
+            "animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
 
             // Shimmer gradient
-            'bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80',
+            "bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80",
 
             className,
          )}
diff --git a/apps/web/registry/miami/ui/animated-subscribe-button.tsx b/apps/web/registry/miami/ui/animated-subscribe-button.tsx
index 4118ccc5..1db72de8 100644
--- a/apps/web/registry/miami/ui/animated-subscribe-button.tsx
+++ b/apps/web/registry/miami/ui/animated-subscribe-button.tsx
@@ -1,7 +1,8 @@
-'use client'
+"use client"
 
-import { AnimatePresence, motion } from 'framer-motion'
-import React, { useState } from 'react'
+import { AnimatePresence, motion } from "framer-motion"
+import type React from "react"
+import { useState } from "react"
 
 interface AnimatedSubscribeButtonProps {
    buttonColor: string
@@ -24,45 +25,43 @@ export const AnimatedSubscribeButton: React.FC<
 
    return (
       <AnimatePresence mode="wait">
-         {isSubscribed
-            ? (
-                  <motion.button
-                     className="relative flex h-[46px] w-[200px] items-center justify-center overflow-hidden rounded-md bg-white p-[10px] outline outline-1 outline-black"
-                     onClick={() => setIsSubscribed(false)}
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                  >
-                     <motion.span
-                        key="action"
-                        className="relative block size-full font-semibold"
-                        initial={{ y: -50 }}
-                        animate={{ y: 0 }}
-                        style={{ color: buttonColor }}
-                     >
-                        {changeText}
-                     </motion.span>
-                  </motion.button>
-               )
-            : (
-                  <motion.button
-                     className="relative flex w-[200px] cursor-pointer items-center justify-center rounded-md border-none p-[10px]"
-                     style={{ backgroundColor: buttonColor, color: buttonTextColor }}
-                     onClick={() => setIsSubscribed(true)}
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                  >
-                     <motion.span
-                        key="reaction"
-                        className="relative block font-semibold"
-                        initial={{ x: 0 }}
-                        exit={{ x: 50, transition: { duration: 0.1 } }}
-                     >
-                        {initialText}
-                     </motion.span>
-                  </motion.button>
-               )}
+         {isSubscribed ? (
+            <motion.button
+               className="relative flex h-[46px] w-[200px] items-center justify-center overflow-hidden rounded-md bg-white p-[10px] outline outline-1 outline-black"
+               onClick={() => setIsSubscribed(false)}
+               initial={{ opacity: 0 }}
+               animate={{ opacity: 1 }}
+               exit={{ opacity: 0 }}
+            >
+               <motion.span
+                  key="action"
+                  className="relative block size-full font-semibold"
+                  initial={{ y: -50 }}
+                  animate={{ y: 0 }}
+                  style={{ color: buttonColor }}
+               >
+                  {changeText}
+               </motion.span>
+            </motion.button>
+         ) : (
+            <motion.button
+               className="relative flex w-[200px] cursor-pointer items-center justify-center rounded-md border-none p-[10px]"
+               style={{ backgroundColor: buttonColor, color: buttonTextColor }}
+               onClick={() => setIsSubscribed(true)}
+               initial={{ opacity: 0 }}
+               animate={{ opacity: 1 }}
+               exit={{ opacity: 0 }}
+            >
+               <motion.span
+                  key="reaction"
+                  className="relative block font-semibold"
+                  initial={{ x: 0 }}
+                  exit={{ x: 50, transition: { duration: 0.1 } }}
+               >
+                  {initialText}
+               </motion.span>
+            </motion.button>
+         )}
       </AnimatePresence>
    )
 }
diff --git a/apps/web/registry/miami/ui/aspect-ratio.tsx b/apps/web/registry/miami/ui/aspect-ratio.tsx
index 794c6f4c..d6a5226f 100644
--- a/apps/web/registry/miami/ui/aspect-ratio.tsx
+++ b/apps/web/registry/miami/ui/aspect-ratio.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
 
 const AspectRatio = AspectRatioPrimitive.Root
 
diff --git a/apps/web/registry/miami/ui/aurora-text.tsx b/apps/web/registry/miami/ui/aurora-text.tsx
new file mode 100644
index 00000000..b66685bf
--- /dev/null
+++ b/apps/web/registry/miami/ui/aurora-text.tsx
@@ -0,0 +1,34 @@
+import { type MotionProps, motion } from "motion/react"
+import type React from "react"
+import { ny } from "~/registry/miami/lib/utils"
+
+interface AuroraTextProps
+   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps> {
+   className?: string
+   children: React.ReactNode
+   as?: React.ElementType
+}
+
+export function AuroraText({
+   className,
+   children,
+   as: Component = "span",
+   ...props
+}: AuroraTextProps) {
+   const MotionComponent = motion.create(Component)
+
+   return (
+      <MotionComponent
+         className={ny("relative inline-flex overflow-hidden", className)}
+         {...props}
+      >
+         {children}
+         <span className="pointer-events-none absolute inset-0 mix-blend-lighten dark:mix-blend-darken">
+            <span className="pointer-events-none absolute -top-1/2 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-1_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-1))] mix-blend-overlay blur-[1rem]"></span>
+            <span className="pointer-events-none absolute right-0 top-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-2_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-2))] mix-blend-overlay blur-[1rem]"></span>
+            <span className="pointer-events-none absolute bottom-0 left-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-3_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-3))] mix-blend-overlay blur-[1rem]"></span>
+            <span className="pointer-events-none absolute -bottom-1/2 right-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-4_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-4))] mix-blend-overlay blur-[1rem]"></span>
+         </span>
+      </MotionComponent>
+   )
+}
diff --git a/apps/web/registry/miami/ui/avatar-circles.tsx b/apps/web/registry/miami/ui/avatar-circles.tsx
index b88e7d30..244116c1 100644
--- a/apps/web/registry/miami/ui/avatar-circles.tsx
+++ b/apps/web/registry/miami/ui/avatar-circles.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import React from 'react'
-import { ny } from '~/lib/utils'
+import React from "react"
+import { ny } from "~/lib/utils"
 
 interface AvatarCirclesProps {
    className?: string
@@ -15,7 +15,9 @@ function AvatarCircles({
    avatarUrls,
 }: AvatarCirclesProps) {
    return (
-      <div className={ny('z-10 flex -space-x-4 rtl:space-x-reverse', className)}>
+      <div
+         className={ny("z-10 flex -space-x-4 rtl:space-x-reverse", className)}
+      >
          {avatarUrls.map((url, index) => (
             <img
                key={index}
@@ -30,8 +32,7 @@ function AvatarCircles({
             className="flex size-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black"
             href=""
          >
-            +
-            {numPeople}
+            +{numPeople}
          </a>
       </div>
    )
diff --git a/apps/web/registry/miami/ui/avatar.tsx b/apps/web/registry/miami/ui/avatar.tsx
index 1f427197..bc20d8cc 100644
--- a/apps/web/registry/miami/ui/avatar.tsx
+++ b/apps/web/registry/miami/ui/avatar.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Avatar = React.forwardRef<
    React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -12,7 +12,7 @@ const Avatar = React.forwardRef<
    <AvatarPrimitive.Root
       ref={ref}
       className={ny(
-         'relative flex size-10 shrink-0 overflow-hidden rounded-full',
+         "relative flex size-10 shrink-0 overflow-hidden rounded-full",
          className,
       )}
       {...props}
@@ -26,7 +26,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <AvatarPrimitive.Image
       ref={ref}
-      className={ny('aspect-square size-full', className)}
+      className={ny("aspect-square size-full", className)}
       {...props}
    />
 ))
@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
    <AvatarPrimitive.Fallback
       ref={ref}
       className={ny(
-         'bg-muted flex size-full items-center justify-center rounded-full',
+         "bg-muted flex size-full items-center justify-center rounded-full",
          className,
       )}
       {...props}
diff --git a/apps/web/registry/miami/ui/badge.tsx b/apps/web/registry/miami/ui/badge.tsx
index e1f54bca..701bde8c 100644
--- a/apps/web/registry/miami/ui/badge.tsx
+++ b/apps/web/registry/miami/ui/badge.tsx
@@ -1,31 +1,31 @@
-import * as React from 'react'
-import { type VariantProps, cva } from 'class-variance-authority'
+import { type VariantProps, cva } from "class-variance-authority"
+import type * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const badgeVariants = cva(
-   'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
    {
       variants: {
          variant: {
             default:
-          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+               "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
             secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+               "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
             destructive:
-          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-            outline: 'text-foreground',
+               "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+            outline: "text-foreground",
          },
       },
       defaultVariants: {
-         variant: 'default',
+         variant: "default",
       },
    },
 )
 
 export interface BadgeProps
    extends React.HTMLAttributes<HTMLDivElement>,
-   VariantProps<typeof badgeVariants> {}
+      VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
    return (
diff --git a/apps/web/registry/miami/ui/bento-grid.tsx b/apps/web/registry/miami/ui/bento-grid.tsx
index e9ae82b4..3e894453 100644
--- a/apps/web/registry/miami/ui/bento-grid.tsx
+++ b/apps/web/registry/miami/ui/bento-grid.tsx
@@ -1,7 +1,7 @@
-import { ArrowRightIcon } from '@radix-ui/react-icons'
-import type { ReactNode } from 'react'
-import { Button } from '~/components/ui/button'
-import { ny } from '~/lib/utils'
+import { ArrowRightIcon } from "@radix-ui/react-icons"
+import type { ReactNode } from "react"
+import { Button } from "~/components/ui/button"
+import { ny } from "~/lib/utils"
 
 function BentoGrid({
    children,
@@ -13,7 +13,7 @@ function BentoGrid({
    return (
       <div
          className={ny(
-            'grid w-full auto-rows-[22rem] grid-cols-3 gap-4',
+            "grid w-full auto-rows-[22rem] grid-cols-3 gap-4",
             className,
          )}
       >
@@ -43,11 +43,11 @@ function BentoCard({
       <div
          key={name}
          className={ny(
-            'group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl',
+            "group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl",
             // light styles
-            'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
+            "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
             // dark styles
-            'transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
+            "transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
             className,
          )}
       >
@@ -62,7 +62,7 @@ function BentoCard({
 
          <div
             className={ny(
-               'pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100',
+               "pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100",
             )}
          >
             <Button
diff --git a/apps/web/registry/miami/ui/blur-fade.tsx b/apps/web/registry/miami/ui/blur-fade.tsx
index 05d9f303..7df55ae0 100644
--- a/apps/web/registry/miami/ui/blur-fade.tsx
+++ b/apps/web/registry/miami/ui/blur-fade.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { useRef } from 'react'
-import type { Variants } from 'framer-motion'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
+import type { Variants } from "framer-motion"
+import { AnimatePresence, motion, useInView } from "framer-motion"
+import { useRef } from "react"
 
 interface BlurFadeProps {
    children: React.ReactNode
@@ -27,8 +27,8 @@ export default function BlurFade({
    delay = 0,
    yOffset = 6,
    inView = false,
-   inViewMargin = '-50px',
-   blur = '6px',
+   inViewMargin = "-50px",
+   blur = "6px",
 }: BlurFadeProps) {
    const ref = useRef(null)
    const inViewResult = useInView(ref, { once: true, margin: inViewMargin })
@@ -43,13 +43,13 @@ export default function BlurFade({
          <motion.div
             ref={ref}
             initial="hidden"
-            animate={isInView ? 'visible' : 'hidden'}
+            animate={isInView ? "visible" : "hidden"}
             exit="hidden"
             variants={combinedVariants}
             transition={{
                delay: 0.04 + delay,
                duration,
-               ease: 'easeOut',
+               ease: "easeOut",
             }}
             className={className}
          >
diff --git a/apps/web/registry/miami/ui/blur-in.tsx b/apps/web/registry/miami/ui/blur-in.tsx
index 8dac917b..6245ede7 100644
--- a/apps/web/registry/miami/ui/blur-in.tsx
+++ b/apps/web/registry/miami/ui/blur-in.tsx
@@ -1,20 +1,20 @@
-'use client'
-import { motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+"use client"
+import { motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface BlurIntProps {
    word: string
    className?: string
    variant?: {
-      hidden: { filter: string, opacity: number }
-      visible: { filter: string, opacity: number }
+      hidden: { filter: string; opacity: number }
+      visible: { filter: string; opacity: number }
    }
    duration?: number
 }
 function BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {
    const defaultVariants = {
-      hidden: { filter: 'blur(10px)', opacity: 0 },
-      visible: { filter: 'blur(0px)', opacity: 1 },
+      hidden: { filter: "blur(10px)", opacity: 0 },
+      visible: { filter: "blur(0px)", opacity: 1 },
    }
    const combinedVariants = variant || defaultVariants
 
@@ -26,7 +26,7 @@ function BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {
          variants={combinedVariants}
          className={ny(
             className,
-            'font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]',
+            "font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]",
          )}
       >
          {word}
diff --git a/apps/web/registry/miami/ui/border-beam.tsx b/apps/web/registry/miami/ui/border-beam.tsx
index b2373f9a..424624e8 100644
--- a/apps/web/registry/miami/ui/border-beam.tsx
+++ b/apps/web/registry/miami/ui/border-beam.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface BorderBeamProps {
    className?: string
@@ -17,31 +17,31 @@ export function BorderBeam({
    duration = 15,
    anchor = 90,
    borderWidth = 1.5,
-   colorFrom = '#ffaa40',
-   colorTo = '#9c40ff',
+   colorFrom = "#ffaa40",
+   colorTo = "#9c40ff",
    delay = 0,
 }: BorderBeamProps) {
    return (
       <div
          style={
             {
-               '--size': size,
-               '--duration': duration,
-               '--anchor': anchor,
-               '--border-width': borderWidth,
-               '--color-from': colorFrom,
-               '--color-to': colorTo,
-               '--delay': `-${delay}s`,
+               "--size": size,
+               "--duration": duration,
+               "--anchor": anchor,
+               "--border-width": borderWidth,
+               "--color-from": colorFrom,
+               "--color-to": colorTo,
+               "--delay": `-${delay}s`,
             } as React.CSSProperties
          }
          className={ny(
-            'pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]',
+            "pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
 
             // mask styles
-            '![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]',
+            "![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
 
             // pseudo styles
-            'after:animate-border-beam after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]',
+            "after:animate-border-beam after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
             className,
          )}
       />
diff --git a/apps/web/registry/miami/ui/box-reveal.tsx b/apps/web/registry/miami/ui/box-reveal.tsx
index b4b4530d..89640aff 100644
--- a/apps/web/registry/miami/ui/box-reveal.tsx
+++ b/apps/web/registry/miami/ui/box-reveal.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client"
 
-import { motion, useAnimation, useInView } from 'framer-motion'
-import { useEffect, useRef } from 'react'
+import { motion, useAnimation, useInView } from "framer-motion"
+import { useEffect, useRef } from "react"
 
 interface BoxRevealProps {
    children: JSX.Element
-   width?: 'fit-content' | '100%'
+   width?: "fit-content" | "100%"
    boxColor?: string
    duration?: number
 }
 
 export function BoxReveal({
    children,
-   width = 'fit-content',
+   width = "fit-content",
    boxColor,
    duration,
 }: BoxRevealProps) {
@@ -24,17 +24,19 @@ export function BoxReveal({
 
    useEffect(() => {
       if (isInView) {
-         slideControls.start('visible')
-         mainControls.start('visible')
-      }
-      else {
-         slideControls.start('hidden')
-         mainControls.start('hidden')
+         slideControls.start("visible")
+         mainControls.start("visible")
+      } else {
+         slideControls.start("hidden")
+         mainControls.start("hidden")
       }
    }, [isInView, mainControls, slideControls])
 
    return (
-      <div ref={ref} style={{ position: 'relative', width, overflow: 'hidden' }}>
+      <div
+         ref={ref}
+         style={{ position: "relative", width, overflow: "hidden" }}
+      >
          <motion.div
             variants={{
                hidden: { opacity: 0, y: 75 },
@@ -50,19 +52,19 @@ export function BoxReveal({
          <motion.div
             variants={{
                hidden: { left: 0 },
-               visible: { left: '100%' },
+               visible: { left: "100%" },
             }}
             initial="hidden"
             animate={slideControls}
-            transition={{ duration: duration || 0.5, ease: 'easeIn' }}
+            transition={{ duration: duration || 0.5, ease: "easeIn" }}
             style={{
-               position: 'absolute',
+               position: "absolute",
                top: 4,
                bottom: 4,
                left: 0,
                right: 0,
                zIndex: 20,
-               background: boxColor || '#5046e6',
+               background: boxColor || "#5046e6",
             }}
          />
       </div>
diff --git a/apps/web/registry/miami/ui/breadcrumb.tsx b/apps/web/registry/miami/ui/breadcrumb.tsx
index 7cd2a7b0..babe67b8 100644
--- a/apps/web/registry/miami/ui/breadcrumb.tsx
+++ b/apps/web/registry/miami/ui/breadcrumb.tsx
@@ -1,104 +1,104 @@
-import * as React from 'react'
-import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons'
-import { Slot } from '@radix-ui/react-slot'
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
+import { Slot } from "@radix-ui/react-slot"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Breadcrumb = React.forwardRef<
    HTMLElement,
-   React.ComponentPropsWithoutRef<'nav'> & {
+   React.ComponentPropsWithoutRef<"nav"> & {
       separator?: React.ReactNode
    }
 >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = 'Breadcrumb'
+Breadcrumb.displayName = "Breadcrumb"
 
 const BreadcrumbList = React.forwardRef<
    HTMLOListElement,
-   React.ComponentPropsWithoutRef<'ol'>
+   React.ComponentPropsWithoutRef<"ol">
 >(({ className, ...props }, ref) => (
    <ol
       ref={ref}
       className={ny(
-         'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
+         "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
          className,
       )}
       {...props}
    />
 ))
-BreadcrumbList.displayName = 'BreadcrumbList'
+BreadcrumbList.displayName = "BreadcrumbList"
 
 const BreadcrumbItem = React.forwardRef<
    HTMLLIElement,
-   React.ComponentPropsWithoutRef<'li'>
+   React.ComponentPropsWithoutRef<"li">
 >(({ className, ...props }, ref) => (
    <li
       ref={ref}
-      className={ny('inline-flex items-center gap-1.5', className)}
+      className={ny("inline-flex items-center gap-1.5", className)}
       {...props}
    />
 ))
-BreadcrumbItem.displayName = 'BreadcrumbItem'
+BreadcrumbItem.displayName = "BreadcrumbItem"
 
 const BreadcrumbLink = React.forwardRef<
    HTMLAnchorElement,
-   React.ComponentPropsWithoutRef<'a'> & {
+   React.ComponentPropsWithoutRef<"a"> & {
       asChild?: boolean
    }
 >(({ asChild, className, ...props }, ref) => {
-   const Comp = asChild ? Slot : 'a'
+   const Comp = asChild ? Slot : "a"
 
    return (
       <Comp
          ref={ref}
-         className={ny('hover:text-foreground transition-colors', className)}
+         className={ny("hover:text-foreground transition-colors", className)}
          {...props}
       />
    )
 })
-BreadcrumbLink.displayName = 'BreadcrumbLink'
+BreadcrumbLink.displayName = "BreadcrumbLink"
 
 const BreadcrumbPage = React.forwardRef<
    HTMLSpanElement,
-   React.ComponentPropsWithoutRef<'span'>
+   React.ComponentPropsWithoutRef<"span">
 >(({ className, ...props }, ref) => (
    <span
       ref={ref}
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={ny('text-foreground font-normal', className)}
+      className={ny("text-foreground font-normal", className)}
       {...props}
    />
 ))
-BreadcrumbPage.displayName = 'BreadcrumbPage'
+BreadcrumbPage.displayName = "BreadcrumbPage"
 
 function BreadcrumbSeparator({
    children,
    className,
    ...props
-}: React.ComponentProps<'li'>) {
+}: React.ComponentProps<"li">) {
    return (
       <li
          role="presentation"
          aria-hidden="true"
-         className={ny('[&>svg]:size-3.5', className)}
+         className={ny("[&>svg]:size-3.5", className)}
          {...props}
       >
          {children ?? <ChevronRightIcon />}
       </li>
    )
 }
-BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
 
 function BreadcrumbEllipsis({
    className,
    ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
    return (
       <span
          role="presentation"
          aria-hidden="true"
-         className={ny('flex size-9 items-center justify-center', className)}
+         className={ny("flex size-9 items-center justify-center", className)}
          {...props}
       >
          <DotsHorizontalIcon className="size-4" />
@@ -106,7 +106,7 @@ function BreadcrumbEllipsis({
       </span>
    )
 }
-BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
 
 export {
    Breadcrumb,
diff --git a/apps/web/registry/miami/ui/button.tsx b/apps/web/registry/miami/ui/button.tsx
index c978afd2..c903cc46 100644
--- a/apps/web/registry/miami/ui/button.tsx
+++ b/apps/web/registry/miami/ui/button.tsx
@@ -1,48 +1,48 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { type VariantProps, cva } from 'class-variance-authority'
+import { Slot } from "@radix-ui/react-slot"
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const buttonVariants = cva(
-   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
    {
       variants: {
          variant: {
             default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+               "bg-primary text-primary-foreground shadow hover:bg-primary/90",
             destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+               "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
             outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+               "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
             secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-            ghost: 'hover:bg-accent hover:text-accent-foreground',
-            link: 'text-primary underline-offset-4 hover:underline',
+               "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 hover:underline",
          },
          size: {
-            default: 'h-9 px-4 py-2',
-            sm: 'h-8 rounded-md px-3 text-xs',
-            lg: 'h-10 rounded-md px-8',
-            icon: 'h-9 w-9',
+            default: "h-9 px-4 py-2",
+            sm: "h-8 rounded-md px-3 text-xs",
+            lg: "h-10 rounded-md px-8",
+            icon: "h-9 w-9",
          },
       },
       defaultVariants: {
-         variant: 'default',
-         size: 'default',
+         variant: "default",
+         size: "default",
       },
    },
 )
 
 export interface ButtonProps
    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-   VariantProps<typeof buttonVariants> {
+      VariantProps<typeof buttonVariants> {
    asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, variant, size, asChild = false, ...props }, ref) => {
-      const Comp = asChild ? Slot : 'button'
+      const Comp = asChild ? Slot : "button"
       return (
          <Comp
             className={ny(buttonVariants({ variant, size, className }))}
@@ -52,6 +52,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       )
    },
 )
-Button.displayName = 'Button'
+Button.displayName = "Button"
 
 export { Button, buttonVariants }
diff --git a/apps/web/registry/miami/ui/calendar.tsx b/apps/web/registry/miami/ui/calendar.tsx
index 05cb622c..579e111e 100644
--- a/apps/web/registry/miami/ui/calendar.tsx
+++ b/apps/web/registry/miami/ui/calendar.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'
-import { DayPicker } from 'react-day-picker'
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
+import type * as React from "react"
+import { DayPicker } from "react-day-picker"
 
-import { ny } from '~/lib/utils'
-import { buttonVariants } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import { buttonVariants } from "~/registry/miami/ui/button"
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
@@ -18,55 +18,58 @@ function Calendar({
    return (
       <DayPicker
          showOutsideDays={showOutsideDays}
-         className={ny('p-3', className)}
+         className={ny("p-3", className)}
          classNames={{
-            months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
-            month: 'space-y-4',
-            caption: 'flex justify-center pt-1 relative items-center',
-            caption_label: 'text-sm font-medium',
-            nav: 'space-x-1 flex items-center',
+            months:
+               "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+            month: "space-y-4",
+            caption: "flex justify-center pt-1 relative items-center",
+            caption_label: "text-sm font-medium",
+            nav: "space-x-1 flex items-center",
             nav_button: ny(
-               buttonVariants({ variant: 'outline' }),
-               'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+               buttonVariants({ variant: "outline" }),
+               "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
             ),
-            nav_button_previous: 'absolute left-1',
-            nav_button_next: 'absolute right-1',
-            table: 'w-full border-collapse space-y-1',
-            head_row: 'flex',
+            nav_button_previous: "absolute left-1",
+            nav_button_next: "absolute right-1",
+            table: "w-full border-collapse space-y-1",
+            head_row: "flex",
             head_cell:
-          'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
-            row: 'flex w-full mt-2',
+               "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+            row: "flex w-full mt-2",
             cell: ny(
-               '[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected].day-range-end)]:rounded-r-md',
-               props.mode === 'range'
-                  ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
-                  : '[&:has([aria-selected])]:rounded-md',
+               "[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+               props.mode === "range"
+                  ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+                  : "[&:has([aria-selected])]:rounded-md",
             ),
             day: ny(
-               buttonVariants({ variant: 'ghost' }),
-               'size-8 p-0 font-normal aria-selected:opacity-100',
+               buttonVariants({ variant: "ghost" }),
+               "size-8 p-0 font-normal aria-selected:opacity-100",
             ),
-            day_range_start: 'day-range-start',
-            day_range_end: 'day-range-end',
+            day_range_start: "day-range-start",
+            day_range_end: "day-range-end",
             day_selected:
-          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-            day_today: 'bg-accent text-accent-foreground',
+               "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+            day_today: "bg-accent text-accent-foreground",
             day_outside:
-          'day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
-            day_disabled: 'text-muted-foreground opacity-50',
+               "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+            day_disabled: "text-muted-foreground opacity-50",
             day_range_middle:
-          'aria-selected:bg-accent aria-selected:text-accent-foreground',
-            day_hidden: 'invisible',
+               "aria-selected:bg-accent aria-selected:text-accent-foreground",
+            day_hidden: "invisible",
             ...classNames,
          }}
          components={{
             IconLeft: ({ ...props }) => <ChevronLeftIcon className="size-4" />,
-            IconRight: ({ ...props }) => <ChevronRightIcon className="size-4" />,
+            IconRight: ({ ...props }) => (
+               <ChevronRightIcon className="size-4" />
+            ),
          }}
          {...props}
       />
    )
 }
-Calendar.displayName = 'Calendar'
+Calendar.displayName = "Calendar"
 
 export { Calendar }
diff --git a/apps/web/registry/miami/ui/card.tsx b/apps/web/registry/miami/ui/card.tsx
index 3ac71595..bf9df1cc 100644
--- a/apps/web/registry/miami/ui/card.tsx
+++ b/apps/web/registry/miami/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Card = React.forwardRef<
    HTMLDivElement,
@@ -9,13 +9,13 @@ const Card = React.forwardRef<
    <div
       ref={ref}
       className={ny(
-         'bg-card text-card-foreground rounded-xl border shadow',
+         "bg-card text-card-foreground rounded-xl border shadow",
          className,
       )}
       {...props}
    />
 ))
-Card.displayName = 'Card'
+Card.displayName = "Card"
 
 const CardHeader = React.forwardRef<
    HTMLDivElement,
@@ -23,11 +23,11 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <div
       ref={ref}
-      className={ny('flex flex-col space-y-1.5 p-6', className)}
+      className={ny("flex flex-col space-y-1.5 p-6", className)}
       {...props}
    />
 ))
-CardHeader.displayName = 'CardHeader'
+CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<
    HTMLParagraphElement,
@@ -35,11 +35,11 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <h3
       ref={ref}
-      className={ny('font-semibold leading-none tracking-tight', className)}
+      className={ny("font-semibold leading-none tracking-tight", className)}
       {...props}
    />
 ))
-CardTitle.displayName = 'CardTitle'
+CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
    HTMLParagraphElement,
@@ -47,19 +47,19 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <p
       ref={ref}
-      className={ny('text-muted-foreground text-sm', className)}
+      className={ny("text-muted-foreground text-sm", className)}
       {...props}
    />
 ))
-CardDescription.displayName = 'CardDescription'
+CardDescription.displayName = "CardDescription"
 
 const CardContent = React.forwardRef<
    HTMLDivElement,
    React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-   <div ref={ref} className={ny('p-6 pt-0', className)} {...props} />
+   <div ref={ref} className={ny("p-6 pt-0", className)} {...props} />
 ))
-CardContent.displayName = 'CardContent'
+CardContent.displayName = "CardContent"
 
 const CardFooter = React.forwardRef<
    HTMLDivElement,
@@ -67,17 +67,10 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <div
       ref={ref}
-      className={ny('flex items-center p-6 pt-0', className)}
+      className={ny("flex items-center p-6 pt-0", className)}
       {...props}
    />
 ))
-CardFooter.displayName = 'CardFooter'
+CardFooter.displayName = "CardFooter"
 
-export {
-   Card,
-   CardHeader,
-   CardFooter,
-   CardTitle,
-   CardDescription,
-   CardContent,
-}
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/apps/web/registry/miami/ui/carousel.tsx b/apps/web/registry/miami/ui/carousel.tsx
index ef6b811d..ae229c8d 100644
--- a/apps/web/registry/miami/ui/carousel.tsx
+++ b/apps/web/registry/miami/ui/carousel.tsx
@@ -1,13 +1,15 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons'
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
-import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+import useEmblaCarousel, {
+   type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -18,8 +20,8 @@ interface CarouselProps {
    opts?: CarouselOptions
    plugins?: CarouselPlugin
    setApi?: (api: CarouselApi) => void
-   orientation?: 'horizontal' | 'vertical'
-   dotsPosition?: 'top' | 'bottom' | 'left' | 'right'
+   orientation?: "horizontal" | "vertical"
+   dotsPosition?: "top" | "bottom" | "left" | "right"
 }
 
 type CarouselContextProps = {
@@ -40,22 +42,22 @@ function useCarousel() {
    const context = React.useContext(CarouselContext)
 
    if (!context)
-      throw new Error('useCarousel must be used within a <Carousel />')
+      throw new Error("useCarousel must be used within a <Carousel />")
 
    return context
 }
 
 const Carousel = React.forwardRef<
    HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+   React.HTMLAttributes<HTMLDivElement> & CarouselProps
 >(
    (
       {
          opts,
          plugins,
          setApi,
-         orientation = 'horizontal',
-         dotsPosition = 'bottom',
+         orientation = "horizontal",
+         dotsPosition = "bottom",
          className,
          children,
          ...props
@@ -65,7 +67,7 @@ const Carousel = React.forwardRef<
       const [carouselRef, api] = useEmblaCarousel(
          {
             ...opts,
-            axis: orientation === 'horizontal' ? 'x' : 'y',
+            axis: orientation === "horizontal" ? "x" : "y",
          },
          plugins,
       )
@@ -76,8 +78,7 @@ const Carousel = React.forwardRef<
       const [totalSlides, setTotalSlides] = React.useState(0)
 
       const onSelect = React.useCallback((api: CarouselApi) => {
-         if (!api)
-            return
+         if (!api) return
 
          setCanScrollPrev(api.canScrollPrev())
          setCanScrollNext(api.canScrollNext())
@@ -102,11 +103,10 @@ const Carousel = React.forwardRef<
 
       const handleKeyDown = React.useCallback(
          (event: React.KeyboardEvent<HTMLDivElement>) => {
-            if (event.key === 'ArrowLeft') {
+            if (event.key === "ArrowLeft") {
                event.preventDefault()
                scrollPrev()
-            }
-            else if (event.key === 'ArrowRight') {
+            } else if (event.key === "ArrowRight") {
                event.preventDefault()
                scrollNext()
             }
@@ -115,43 +115,40 @@ const Carousel = React.forwardRef<
       )
 
       React.useEffect(() => {
-         if (!api || !setApi)
-            return
+         if (!api || !setApi) return
 
          setApi(api)
       }, [api, setApi])
 
       React.useEffect(() => {
-         if (!api)
-            return
+         if (!api) return
 
          onSelect(api)
-         api.on('reInit', onSelect)
-         api.on('select', onSelect)
+         api.on("reInit", onSelect)
+         api.on("select", onSelect)
 
          return () => {
-            api?.off('select', onSelect)
+            api?.off("select", onSelect)
          }
       }, [api, onSelect])
 
       let effectiveDotsPosition = dotsPosition
       if (
-         orientation === 'horizontal'
-         && (dotsPosition === 'left' || dotsPosition === 'right')
+         orientation === "horizontal" &&
+         (dotsPosition === "left" || dotsPosition === "right")
       ) {
          console.warn(
-        `Invalid dotsPosition "${dotsPosition}" for horizontal orientation, defaulting to "bottom".`,
+            `Invalid dotsPosition "${dotsPosition}" for horizontal orientation, defaulting to "bottom".`,
          )
-         effectiveDotsPosition = 'bottom'
-      }
-      else if (
-         orientation === 'vertical'
-         && (dotsPosition === 'top' || dotsPosition === 'bottom')
+         effectiveDotsPosition = "bottom"
+      } else if (
+         orientation === "vertical" &&
+         (dotsPosition === "top" || dotsPosition === "bottom")
       ) {
          console.warn(
-        `Invalid dotsPosition "${dotsPosition}" for vertical orientation, defaulting to "left".`,
+            `Invalid dotsPosition "${dotsPosition}" for vertical orientation, defaulting to "left".`,
          )
-         effectiveDotsPosition = 'left'
+         effectiveDotsPosition = "left"
       }
 
       return (
@@ -161,7 +158,8 @@ const Carousel = React.forwardRef<
                api,
                opts,
                orientation:
-            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+                  orientation ||
+                  (opts?.axis === "y" ? "vertical" : "horizontal"),
                dotsPosition: effectiveDotsPosition,
                scrollPrev,
                scrollNext,
@@ -175,7 +173,7 @@ const Carousel = React.forwardRef<
             <div
                ref={ref}
                onKeyDownCapture={handleKeyDown}
-               className={ny('relative', className)}
+               className={ny("relative", className)}
                role="region"
                aria-roledescription="carousel"
                {...props}
@@ -186,7 +184,7 @@ const Carousel = React.forwardRef<
       )
    },
 )
-Carousel.displayName = 'Carousel'
+Carousel.displayName = "Carousel"
 
 const CarouselContent = React.forwardRef<
    HTMLDivElement,
@@ -199,8 +197,8 @@ const CarouselContent = React.forwardRef<
          <div
             ref={ref}
             className={ny(
-               'flex',
-               orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+               "flex",
+               orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
                className,
             )}
             {...props}
@@ -208,7 +206,7 @@ const CarouselContent = React.forwardRef<
       </div>
    )
 })
-CarouselContent.displayName = 'CarouselContent'
+CarouselContent.displayName = "CarouselContent"
 
 const CarouselItem = React.forwardRef<
    HTMLDivElement,
@@ -222,20 +220,20 @@ const CarouselItem = React.forwardRef<
          role="group"
          aria-roledescription="slide"
          className={ny(
-            'min-w-0 shrink-0 grow-0 basis-full',
-            orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+            "min-w-0 shrink-0 grow-0 basis-full",
+            orientation === "horizontal" ? "pl-4" : "pt-4",
             className,
          )}
          {...props}
       />
    )
 })
-CarouselItem.displayName = 'CarouselItem'
+CarouselItem.displayName = "CarouselItem"
 
 const CarouselPrevious = React.forwardRef<
    HTMLButtonElement,
    React.ComponentProps<typeof Button>
->(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
    const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
    return (
@@ -244,10 +242,10 @@ const CarouselPrevious = React.forwardRef<
          variant={variant}
          size={size}
          className={ny(
-            'absolute  size-8 rounded-full',
-            orientation === 'horizontal'
-               ? '-left-12 top-1/2 -translate-y-1/2'
-               : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+            "absolute  size-8 rounded-full",
+            orientation === "horizontal"
+               ? "-left-12 top-1/2 -translate-y-1/2"
+               : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
             className,
          )}
          disabled={!canScrollPrev}
@@ -259,12 +257,12 @@ const CarouselPrevious = React.forwardRef<
       </Button>
    )
 })
-CarouselPrevious.displayName = 'CarouselPrevious'
+CarouselPrevious.displayName = "CarouselPrevious"
 
 const CarouselNext = React.forwardRef<
    HTMLButtonElement,
    React.ComponentProps<typeof Button>
->(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
    const { orientation, scrollNext, canScrollNext } = useCarousel()
 
    return (
@@ -273,10 +271,10 @@ const CarouselNext = React.forwardRef<
          variant={variant}
          size={size}
          className={ny(
-            'absolute size-8 rounded-full',
-            orientation === 'horizontal'
-               ? '-right-12 top-1/2 -translate-y-1/2'
-               : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+            "absolute size-8 rounded-full",
+            orientation === "horizontal"
+               ? "-right-12 top-1/2 -translate-y-1/2"
+               : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
             className,
          )}
          disabled={!canScrollNext}
@@ -288,70 +286,69 @@ const CarouselNext = React.forwardRef<
       </Button>
    )
 })
-CarouselNext.displayName = 'CarouselNext'
+CarouselNext.displayName = "CarouselNext"
 
-const dotsContainerVariants = cva('absolute flex justify-center', {
+const dotsContainerVariants = cva("absolute flex justify-center", {
    variants: {
       orientation: {
-         horizontal: 'inset-x-0 flex-row',
-         vertical: 'inset-y-0 flex-col',
+         horizontal: "inset-x-0 flex-row",
+         vertical: "inset-y-0 flex-col",
       },
       size: {
-         default: 'p-4',
-         sm: 'p-4',
-         md: 'p-1',
-         lg: 'p-0',
+         default: "p-4",
+         sm: "p-4",
+         md: "p-1",
+         lg: "p-0",
       },
       position: {
-         top: '-top-10',
-         right: '-right-10',
-         bottom: '-bottom-10',
-         left: '-left-10',
+         top: "-top-10",
+         right: "-right-10",
+         bottom: "-bottom-10",
+         left: "-left-10",
       },
       gap: {
-         default: 'gap-2',
-         sm: 'gap-2',
-         md: 'gap-4',
-         lg: 'gap-6',
+         default: "gap-2",
+         sm: "gap-2",
+         md: "gap-4",
+         lg: "gap-6",
       },
    },
    defaultVariants: {
-      orientation: 'horizontal',
-      size: 'default',
-      position: 'bottom',
-      gap: 'default',
+      orientation: "horizontal",
+      size: "default",
+      position: "bottom",
+      gap: "default",
    },
 })
 
 const dotsVariants = cva(
-   'rounded-full ring-1 ring-muted ring-offset-1 ring-offset-background transition-all duration-300',
+   "rounded-full ring-1 ring-muted ring-offset-1 ring-offset-background transition-all duration-300",
    {
       variants: {
          size: {
-            default: 'size-3',
-            sm: 'size-3',
-            md: 'size-4',
-            lg: 'size-6',
+            default: "size-3",
+            sm: "size-3",
+            md: "size-4",
+            lg: "size-6",
          },
       },
       defaultVariants: {
-         size: 'default',
+         size: "default",
       },
    },
 )
 
 interface CarouselDotsProps
    extends React.HTMLAttributes<HTMLDivElement>,
-   VariantProps<typeof dotsContainerVariants>,
-   VariantProps<typeof dotsVariants> {}
+      VariantProps<typeof dotsContainerVariants>,
+      VariantProps<typeof dotsVariants> {}
 
 const CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(
    ({ className, size, gap, ...props }, ref) => {
-      const { orientation, dotsPosition, totalSlides, currentIndex, scrollTo }
-      = useCarousel()
+      const { orientation, dotsPosition, totalSlides, currentIndex, scrollTo } =
+         useCarousel()
 
-      if (totalSlides <= 1)
-         return null
+      if (totalSlides <= 1) return null
 
       return (
          <div
@@ -377,7 +374,7 @@ const CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(
                   onClick={() => scrollTo(index)}
                   className={ny(
                      dotsVariants({ size }),
-                     currentIndex === index ? 'bg-card-foreground' : 'bg-muted',
+                     currentIndex === index ? "bg-card-foreground" : "bg-muted",
                   )}
                />
             ))}
@@ -385,7 +382,7 @@ const CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(
       )
    },
 )
-CarouselDots.displayName = 'CarouselDots'
+CarouselDots.displayName = "CarouselDots"
 
 export {
    type CarouselApi,
diff --git a/apps/web/registry/miami/ui/chart.tsx b/apps/web/registry/miami/ui/chart.tsx
index 6ba0cd93..30239937 100644
--- a/apps/web/registry/miami/ui/chart.tsx
+++ b/apps/web/registry/miami/ui/chart.tsx
@@ -1,21 +1,21 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as RechartsPrimitive from 'recharts'
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: '', dark: '.dark' } as const
+const THEMES = { light: "", dark: ".dark" } as const
 
 export type ChartConfig = {
    [k in string]: {
       label?: React.ReactNode
       icon?: React.ComponentType
    } & (
-      | { color?: string, theme?: never }
-      | { color?: never, theme: Record<keyof typeof THEMES, string> }
-  )
+      | { color?: string; theme?: never }
+      | { color?: never; theme: Record<keyof typeof THEMES, string> }
+   )
 }
 
 interface ChartContextProps {
@@ -28,7 +28,7 @@ function useChart() {
    const context = React.useContext(ChartContext)
 
    if (!context) {
-      throw new Error('useChart must be used within a <ChartContainer />')
+      throw new Error("useChart must be used within a <ChartContainer />")
    }
 
    return context
@@ -36,15 +36,15 @@ function useChart() {
 
 const ChartContainer = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'> & {
+   React.ComponentProps<"div"> & {
       config: ChartConfig
       children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-      >['children']
+         typeof RechartsPrimitive.ResponsiveContainer
+      >["children"]
    }
 >(({ id, className, children, config, ...props }, ref) => {
    const uniqueId = React.useId()
-   const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
+   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
 
    return (
       <ChartContext.Provider value={{ config }}>
@@ -52,7 +52,7 @@ const ChartContainer = React.forwardRef<
             data-chart={chartId}
             ref={ref}
             className={ny(
-               '[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke=\'#ccc\']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke=\'#fff\']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke=\'#fff\']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none',
+               "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
                className,
             )}
             {...props}
@@ -65,9 +65,9 @@ const ChartContainer = React.forwardRef<
       </ChartContext.Provider>
    )
 })
-ChartContainer.displayName = 'Chart'
+ChartContainer.displayName = "Chart"
 
-function ChartStyle({ id, config }: { id: string, config: ChartConfig }) {
+function ChartStyle({ id, config }: { id: string; config: ChartConfig }) {
    const colorConfig = Object.entries(config).filter(
       ([_, config]) => config.theme || config.color,
    )
@@ -83,13 +83,13 @@ function ChartStyle({ id, config }: { id: string, config: ChartConfig }) {
                ([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig
-  .map(([key, itemConfig]) => {
-    const color
-      = itemConfig.theme?.[theme as keyof typeof itemConfig.theme]
-      || itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join('\n')}
+   .map(([key, itemConfig]) => {
+      const color =
+         itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+         itemConfig.color
+      return color ? `  --color-${key}: ${color};` : null
+   })
+   .join("\n")}
 }
 `,
             ),
@@ -103,20 +103,20 @@ const ChartTooltip = RechartsPrimitive.Tooltip
 const ChartTooltipContent = React.forwardRef<
    HTMLDivElement,
    React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-   React.ComponentProps<'div'> & {
-      hideLabel?: boolean
-      hideIndicator?: boolean
-      indicator?: 'line' | 'dot' | 'dashed'
-      nameKey?: string
-      labelKey?: string
-   }
+      React.ComponentProps<"div"> & {
+         hideLabel?: boolean
+         hideIndicator?: boolean
+         indicator?: "line" | "dot" | "dashed"
+         nameKey?: string
+         labelKey?: string
+      }
 >(
    (
       {
          active,
          payload,
          className,
-         indicator = 'dot',
+         indicator = "dot",
          hideLabel = false,
          hideIndicator = false,
          label,
@@ -137,16 +137,16 @@ const ChartTooltipContent = React.forwardRef<
          }
 
          const [item] = payload
-         const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
+         const key = `${labelKey || item?.dataKey || item?.name || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-         const value
-        = !labelKey && typeof label === 'string'
-           ? config[label as keyof typeof config]?.label || label
-           : itemConfig?.label
+         const value =
+            !labelKey && typeof label === "string"
+               ? config[label as keyof typeof config]?.label || label
+               : itemConfig?.label
 
          if (labelFormatter) {
             return (
-               <div className={ny('font-medium', labelClassName)}>
+               <div className={ny("font-medium", labelClassName)}>
                   {labelFormatter(value, payload)}
                </div>
             )
@@ -156,7 +156,7 @@ const ChartTooltipContent = React.forwardRef<
             return null
          }
 
-         return <div className={ny('font-medium', labelClassName)}>{value}</div>
+         return <div className={ny("font-medium", labelClassName)}>{value}</div>
       }, [
          label,
          labelFormatter,
@@ -171,83 +171,92 @@ const ChartTooltipContent = React.forwardRef<
          return null
       }
 
-      const nestLabel = payload.length === 1 && indicator !== 'dot'
+      const nestLabel = payload.length === 1 && indicator !== "dot"
 
       return (
          <div
             ref={ref}
             className={ny(
-               'border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+               "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
                className,
             )}
          >
             {!nestLabel ? tooltipLabel : null}
             <div className="grid gap-1.5">
                {payload.map((item, index) => {
-                  const key = `${nameKey || item.name || item.dataKey || 'value'}`
-                  const itemConfig = getPayloadConfigFromPayload(config, item, key)
-                  const indicatorColor = color || item.payload.fill || item.color
+                  const key = `${nameKey || item.name || item.dataKey || "value"}`
+                  const itemConfig = getPayloadConfigFromPayload(
+                     config,
+                     item,
+                     key,
+                  )
+                  const indicatorColor =
+                     color || item.payload.fill || item.color
 
                   return (
                      <div
                         key={item.dataKey}
                         className={ny(
-                           '[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5',
-                           indicator === 'dot' && 'items-center',
+                           "[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:size-2.5",
+                           indicator === "dot" && "items-center",
                         )}
                      >
-                        {formatter && item.value && item.name
-                           ? (
-                                 formatter(item.value, item.name, item, index, item.payload)
-                              )
-                           : (
-                                 <>
-                                    {itemConfig?.icon
-                                       ? (
-                                             <itemConfig.icon />
-                                          )
-                                       : (
-                                             !hideIndicator && (
-                                                <div
-                                                   className={ny(
-                                                      'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
-                                                      {
-                                                         'h-2.5 w-2.5': indicator === 'dot',
-                                                         'w-1': indicator === 'line',
-                                                         'w-0 border-[1.5px] border-dashed bg-transparent':
-                                indicator === 'dashed',
-                                                         'my-0.5': nestLabel && indicator === 'dashed',
-                                                      },
-                                                   )}
-                                                   style={
-                                                      {
-                                                         '--color-bg': indicatorColor,
-                                                         '--color-border': indicatorColor,
-                                                      } as React.CSSProperties
-                                                   }
-                                                />
-                                             )
-                                          )}
+                        {formatter && item.value && item.name ? (
+                           formatter(
+                              item.value,
+                              item.name,
+                              item,
+                              index,
+                              item.payload,
+                           )
+                        ) : (
+                           <>
+                              {itemConfig?.icon ? (
+                                 <itemConfig.icon />
+                              ) : (
+                                 !hideIndicator && (
                                     <div
                                        className={ny(
-                                          'flex flex-1 justify-between leading-none',
-                                          nestLabel ? 'items-end' : 'items-center',
+                                          "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                                          {
+                                             "h-2.5 w-2.5": indicator === "dot",
+                                             "w-1": indicator === "line",
+                                             "w-0 border-[1.5px] border-dashed bg-transparent":
+                                                indicator === "dashed",
+                                             "my-0.5":
+                                                nestLabel &&
+                                                indicator === "dashed",
+                                          },
                                        )}
-                                    >
-                                       <div className="grid gap-1.5">
-                                          {nestLabel ? tooltipLabel : null}
-                                          <span className="text-muted-foreground">
-                                             {itemConfig?.label || item.name}
-                                          </span>
-                                       </div>
-                                       {item.value !== undefined && (
-                                          <span className="text-foreground font-mono font-medium tabular-nums">
-                                             {item.value.toLocaleString()}
-                                          </span>
-                                       )}
-                                    </div>
-                                 </>
+                                       style={
+                                          {
+                                             "--color-bg": indicatorColor,
+                                             "--color-border": indicatorColor,
+                                          } as React.CSSProperties
+                                       }
+                                    />
+                                 )
                               )}
+                              <div
+                                 className={ny(
+                                    "flex flex-1 justify-between leading-none",
+                                    nestLabel ? "items-end" : "items-center",
+                                 )}
+                              >
+                                 <div className="grid gap-1.5">
+                                    {nestLabel ? tooltipLabel : null}
+                                    <span className="text-muted-foreground">
+                                       {itemConfig?.label || item.name}
+                                    </span>
+                                 </div>
+                                 {item.value !== undefined && (
+                                    <span className="text-foreground font-mono font-medium tabular-nums">
+                                       {item.value.toLocaleString()}
+                                    </span>
+                                 )}
+                              </div>
+                           </>
+                        )}
                      </div>
                   )
                })}
@@ -256,20 +265,26 @@ const ChartTooltipContent = React.forwardRef<
       )
    },
 )
-ChartTooltipContent.displayName = 'ChartTooltip'
+ChartTooltipContent.displayName = "ChartTooltip"
 
 const ChartLegend = RechartsPrimitive.Legend
 
 const ChartLegendContent = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'> &
-   Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
-      hideIcon?: boolean
-      nameKey?: string
-   }
+   React.ComponentProps<"div"> &
+      Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+         hideIcon?: boolean
+         nameKey?: string
+      }
 >(
    (
-      { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },
+      {
+         className,
+         hideIcon = false,
+         payload,
+         verticalAlign = "bottom",
+         nameKey,
+      },
       ref,
    ) => {
       const { config } = useChart()
@@ -282,34 +297,32 @@ const ChartLegendContent = React.forwardRef<
          <div
             ref={ref}
             className={ny(
-               'flex items-center justify-center gap-4',
-               verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+               "flex items-center justify-center gap-4",
+               verticalAlign === "top" ? "pb-3" : "pt-3",
                className,
             )}
          >
             {payload.map((item) => {
-               const key = `${nameKey || item.dataKey || 'value'}`
+               const key = `${nameKey || item.dataKey || "value"}`
                const itemConfig = getPayloadConfigFromPayload(config, item, key)
 
                return (
                   <div
                      key={item.value}
                      className={ny(
-                        '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3',
+                        "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3",
                      )}
                   >
-                     {itemConfig?.icon && !hideIcon
-                        ? (
-                              <itemConfig.icon />
-                           )
-                        : (
-                              <div
-                                 className="size-2 shrink-0 rounded-[2px]"
-                                 style={{
-                                    backgroundColor: item.color,
-                                 }}
-                              />
-                           )}
+                     {itemConfig?.icon && !hideIcon ? (
+                        <itemConfig.icon />
+                     ) : (
+                        <div
+                           className="size-2 shrink-0 rounded-[2px]"
+                           style={{
+                              backgroundColor: item.color,
+                           }}
+                        />
+                     )}
                      {itemConfig?.label}
                   </div>
                )
@@ -318,7 +331,7 @@ const ChartLegendContent = React.forwardRef<
       )
    },
 )
-ChartLegendContent.displayName = 'ChartLegend'
+ChartLegendContent.displayName = "ChartLegend"
 
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
@@ -326,29 +339,28 @@ function getPayloadConfigFromPayload(
    payload: unknown,
    key: string,
 ) {
-   if (typeof payload !== 'object' || payload === null) {
+   if (typeof payload !== "object" || payload === null) {
       return undefined
    }
 
-   const payloadPayload
-    = 'payload' in payload
-    && typeof payload.payload === 'object'
-    && payload.payload !== null
-       ? payload.payload
-       : undefined
+   const payloadPayload =
+      "payload" in payload &&
+      typeof payload.payload === "object" &&
+      payload.payload !== null
+         ? payload.payload
+         : undefined
 
    let configLabelKey: string = key
 
    if (
-      key in payload
-      && typeof payload[key as keyof typeof payload] === 'string'
+      key in payload &&
+      typeof payload[key as keyof typeof payload] === "string"
    ) {
       configLabelKey = payload[key as keyof typeof payload] as string
-   }
-   else if (
-      payloadPayload
-      && key in payloadPayload
-      && typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+   } else if (
+      payloadPayload &&
+      key in payloadPayload &&
+      typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
    ) {
       configLabelKey = payloadPayload[
          key as keyof typeof payloadPayload
diff --git a/apps/web/registry/miami/ui/checkbox.tsx b/apps/web/registry/miami/ui/checkbox.tsx
index 058a8555..123099ad 100644
--- a/apps/web/registry/miami/ui/checkbox.tsx
+++ b/apps/web/registry/miami/ui/checkbox.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon } from '@radix-ui/react-icons'
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Checkbox = React.forwardRef<
    React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -13,13 +13,13 @@ const Checkbox = React.forwardRef<
    <CheckboxPrimitive.Root
       ref={ref}
       className={ny(
-         'border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+         "border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
          className,
       )}
       {...props}
    >
       <CheckboxPrimitive.Indicator
-         className={ny('flex items-center justify-center text-current')}
+         className={ny("flex items-center justify-center text-current")}
       >
          <CheckIcon className="size-4" />
       </CheckboxPrimitive.Indicator>
diff --git a/apps/web/registry/miami/ui/client-tweet-card.tsx b/apps/web/registry/miami/ui/client-tweet-card.tsx
index fc7b9a95..20eb1e30 100644
--- a/apps/web/registry/miami/ui/client-tweet-card.tsx
+++ b/apps/web/registry/miami/ui/client-tweet-card.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import type { TweetProps } from 'react-tweet'
-import { useTweet } from 'react-tweet'
+import type { TweetProps } from "react-tweet"
+import { useTweet } from "react-tweet"
 import {
    MagicTweet,
    TweetNotFound,
    TweetSkeleton,
-} from '~/registry/miami/ui/tweet-card'
+} from "~/registry/miami/ui/tweet-card"
 
 function ClientTweetCard({
    id,
@@ -19,8 +19,7 @@ function ClientTweetCard({
 }: TweetProps & { className?: string }) {
    const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions)
 
-   if (isLoading)
-      return fallback
+   if (isLoading) return fallback
    if (error || !data) {
       const NotFound = components?.TweetNotFound || TweetNotFound
       return <NotFound error={onError ? onError(error) : error} />
diff --git a/apps/web/registry/miami/ui/collapsible.tsx b/apps/web/registry/miami/ui/collapsible.tsx
index 1bbaed5a..9fa48946 100644
--- a/apps/web/registry/miami/ui/collapsible.tsx
+++ b/apps/web/registry/miami/ui/collapsible.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 
 const Collapsible = CollapsiblePrimitive.Root
 
diff --git a/apps/web/registry/miami/ui/command.tsx b/apps/web/registry/miami/ui/command.tsx
index 7226288c..da4926dd 100644
--- a/apps/web/registry/miami/ui/command.tsx
+++ b/apps/web/registry/miami/ui/command.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import type { DialogProps } from '@radix-ui/react-dialog'
-import { Command as CommandPrimitive } from 'cmdk'
-import { Search } from 'lucide-react'
+import type { DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { Dialog, DialogContent } from '~/registry/miami/ui/dialog'
+import { ny } from "~/lib/utils"
+import { Dialog, DialogContent } from "~/registry/miami/ui/dialog"
 
 const Command = React.forwardRef<
    React.ElementRef<typeof CommandPrimitive>,
@@ -15,7 +15,7 @@ const Command = React.forwardRef<
    <CommandPrimitive
       ref={ref}
       className={ny(
-         'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md',
+         "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md",
          className,
       )}
       {...props}
@@ -44,7 +44,7 @@ const CommandInput = React.forwardRef<
       <CommandPrimitive.Input
          ref={ref}
          className={ny(
-            'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+            "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
             className,
          )}
          {...props}
@@ -60,7 +60,10 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <CommandPrimitive.List
       ref={ref}
-      className={ny('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+      className={ny(
+         "max-h-[300px] overflow-y-auto overflow-x-hidden",
+         className,
+      )}
       {...props}
    />
 ))
@@ -87,7 +90,7 @@ const CommandGroup = React.forwardRef<
    <CommandPrimitive.Group
       ref={ref}
       className={ny(
-         'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+         "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
          className,
       )}
       {...props}
@@ -102,7 +105,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <CommandPrimitive.Separator
       ref={ref}
-      className={ny('bg-border -mx-1 h-px', className)}
+      className={ny("bg-border -mx-1 h-px", className)}
       {...props}
    />
 ))
@@ -115,7 +118,7 @@ const CommandItem = React.forwardRef<
    <CommandPrimitive.Item
       ref={ref}
       className={ny(
-         'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+         "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
          className,
       )}
       {...props}
@@ -131,14 +134,14 @@ function CommandShortcut({
    return (
       <span
          className={ny(
-            'text-muted-foreground ml-auto text-xs tracking-widest',
+            "text-muted-foreground ml-auto text-xs tracking-widest",
             className,
          )}
          {...props}
       />
    )
 }
-CommandShortcut.displayName = 'CommandShortcut'
+CommandShortcut.displayName = "CommandShortcut"
 
 export {
    Command,
diff --git a/apps/web/registry/miami/ui/confetti.tsx b/apps/web/registry/miami/ui/confetti.tsx
index 089e9ab8..6c3fbd45 100644
--- a/apps/web/registry/miami/ui/confetti.tsx
+++ b/apps/web/registry/miami/ui/confetti.tsx
@@ -1,21 +1,30 @@
-'use client'
-import confetti from 'canvas-confetti'
-import type { ReactNode } from 'react'
-import React, { createContext, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
+"use client"
+import confetti from "canvas-confetti"
+import type { ReactNode } from "react"
+import type React from "react"
+import {
+   createContext,
+   forwardRef,
+   useCallback,
+   useEffect,
+   useImperativeHandle,
+   useMemo,
+   useRef,
+} from "react"
 
 import type {
    GlobalOptions as ConfettiGlobalOptions,
    CreateTypes as ConfettiInstance,
    Options as ConfettiOptions,
-} from 'canvas-confetti'
-import { Button } from '~/components/ui/button'
-import type { ButtonProps } from '~/components/ui/button'
+} from "canvas-confetti"
+import { Button } from "~/components/ui/button"
+import type { ButtonProps } from "~/components/ui/button"
 
 interface Api {
    fire: (options?: ConfettiOptions) => void
 }
 
-type Props = React.ComponentPropsWithRef<'canvas'> & {
+type Props = React.ComponentPropsWithRef<"canvas"> & {
    options?: ConfettiOptions
    globalOptions?: ConfettiGlobalOptions
    manualstart?: boolean
@@ -42,14 +51,12 @@ const Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {
       (node: HTMLCanvasElement) => {
          if (node !== null) {
             // <canvas> is mounted => create the confetti instance
-            if (instanceRef.current)
-               return // if not already created
+            if (instanceRef.current) return // if not already created
             instanceRef.current = confetti.create(node, {
                ...globalOptions,
                resize: true,
             })
-         }
-         else {
+         } else {
             // <canvas> is unmounted => reset and destroy instanceRef
             if (instanceRef.current) {
                instanceRef.current.reset()
@@ -76,8 +83,7 @@ const Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {
    useImperativeHandle(ref, () => api, [api])
 
    useEffect(() => {
-      if (!manualstart)
-         fire()
+      if (!manualstart) fire()
    }, [manualstart, fire])
 
    return (
@@ -90,7 +96,7 @@ const Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {
 
 interface ConfettiButtonProps extends ButtonProps {
    options?: ConfettiOptions &
-   ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }
+      ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }
    children?: React.ReactNode
 }
 
diff --git a/apps/web/registry/miami/ui/context-menu.tsx b/apps/web/registry/miami/ui/context-menu.tsx
index 4c0c167b..3be1998b 100644
--- a/apps/web/registry/miami/ui/context-menu.tsx
+++ b/apps/web/registry/miami/ui/context-menu.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
 import {
    CheckIcon,
    ChevronRightIcon,
    DotFilledIcon,
-} from '@radix-ui/react-icons'
+} from "@radix-ui/react-icons"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const ContextMenu = ContextMenuPrimitive.Root
 
@@ -31,8 +31,8 @@ const ContextMenuSubTrigger = React.forwardRef<
    <ContextMenuPrimitive.SubTrigger
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-         inset && 'pl-8',
+         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -50,7 +50,7 @@ const ContextMenuSubContent = React.forwardRef<
    <ContextMenuPrimitive.SubContent
       ref={ref}
       className={ny(
-         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
          className,
       )}
       {...props}
@@ -66,7 +66,7 @@ const ContextMenuContent = React.forwardRef<
       <ContextMenuPrimitive.Content
          ref={ref}
          className={ny(
-            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+            "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md",
             className,
          )}
          {...props}
@@ -84,8 +84,8 @@ const ContextMenuItem = React.forwardRef<
    <ContextMenuPrimitive.Item
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-         inset && 'pl-8',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -100,7 +100,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
    <ContextMenuPrimitive.CheckboxItem
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       checked={checked}
@@ -114,8 +114,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
       {children}
    </ContextMenuPrimitive.CheckboxItem>
 ))
-ContextMenuCheckboxItem.displayName
-  = ContextMenuPrimitive.CheckboxItem.displayName
+ContextMenuCheckboxItem.displayName =
+   ContextMenuPrimitive.CheckboxItem.displayName
 
 const ContextMenuRadioItem = React.forwardRef<
    React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -124,7 +124,7 @@ const ContextMenuRadioItem = React.forwardRef<
    <ContextMenuPrimitive.RadioItem
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       {...props}
@@ -148,8 +148,8 @@ const ContextMenuLabel = React.forwardRef<
    <ContextMenuPrimitive.Label
       ref={ref}
       className={ny(
-         'text-foreground px-2 py-1.5 text-sm font-semibold',
-         inset && 'pl-8',
+         "text-foreground px-2 py-1.5 text-sm font-semibold",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -163,7 +163,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <ContextMenuPrimitive.Separator
       ref={ref}
-      className={ny('bg-border -mx-1 my-1 h-px', className)}
+      className={ny("bg-border -mx-1 my-1 h-px", className)}
       {...props}
    />
 ))
@@ -176,14 +176,14 @@ function ContextMenuShortcut({
    return (
       <span
          className={ny(
-            'text-muted-foreground ml-auto text-xs tracking-widest',
+            "text-muted-foreground ml-auto text-xs tracking-widest",
             className,
          )}
          {...props}
       />
    )
 }
-ContextMenuShortcut.displayName = 'ContextMenuShortcut'
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
 
 export {
    ContextMenu,
diff --git a/apps/web/registry/miami/ui/cool-mode.tsx b/apps/web/registry/miami/ui/cool-mode.tsx
index a437586e..dd534284 100644
--- a/apps/web/registry/miami/ui/cool-mode.tsx
+++ b/apps/web/registry/miami/ui/cool-mode.tsx
@@ -1,6 +1,6 @@
-'use client'
-import type { ReactNode } from 'react'
-import React, { useEffect, useRef } from 'react'
+"use client"
+import type { ReactNode } from "react"
+import React, { useEffect, useRef } from "react"
 
 export interface BaseParticle {
    element: HTMLElement | SVGSVGElement
@@ -29,17 +29,16 @@ export interface CoolParticleOptions extends BaseParticleOptions {
 }
 
 function getContainer() {
-   const id = '_coolMode_effect'
+   const id = "_coolMode_effect"
    const existingContainer = document.getElementById(id)
 
-   if (existingContainer)
-      return existingContainer
+   if (existingContainer) return existingContainer
 
-   const container = document.createElement('div')
-   container.setAttribute('id', id)
+   const container = document.createElement("div")
+   container.setAttribute("id", id)
    container.setAttribute(
-      'style',
-      'overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647',
+      "style",
+      "overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647",
    )
 
    document.body.appendChild(container)
@@ -55,7 +54,7 @@ function applyParticleEffect(
 ): () => void {
    instanceCounter++
 
-   const defaultParticle = 'circle'
+   const defaultParticle = "circle"
    const particleType = options?.particle || defaultParticle
    const sizes = [15, 20, 25, 35, 45]
    const limit = 45
@@ -68,8 +67,8 @@ function applyParticleEffect(
    const container = getContainer()
 
    function generateParticle() {
-      const size
-      = options?.size || sizes[Math.floor(Math.random() * sizes.length)]
+      const size =
+         options?.size || sizes[Math.floor(Math.random() * sizes.length)]
       const speedHorz = options?.speedHorz || Math.random() * 10
       const speedUp = options?.speedUp || Math.random() * 25
       const spinVal = Math.random() * 360
@@ -78,32 +77,31 @@ function applyParticleEffect(
       const left = mouseX - size / 2
       const direction = Math.random() <= 0.5 ? -1 : 1
 
-      const particle = document.createElement('div')
+      const particle = document.createElement("div")
 
-      if (particleType === 'circle') {
-         const svgNS = 'http://www.w3.org/2000/svg'
-         const circleSVG = document.createElementNS(svgNS, 'svg')
-         const circle = document.createElementNS(svgNS, 'circle')
-         circle.setAttributeNS(null, 'cx', (size / 2).toString())
-         circle.setAttributeNS(null, 'cy', (size / 2).toString())
-         circle.setAttributeNS(null, 'r', (size / 2).toString())
+      if (particleType === "circle") {
+         const svgNS = "http://www.w3.org/2000/svg"
+         const circleSVG = document.createElementNS(svgNS, "svg")
+         const circle = document.createElementNS(svgNS, "circle")
+         circle.setAttributeNS(null, "cx", (size / 2).toString())
+         circle.setAttributeNS(null, "cy", (size / 2).toString())
+         circle.setAttributeNS(null, "r", (size / 2).toString())
          circle.setAttributeNS(
             null,
-            'fill',
-        `hsl(${Math.random() * 360}, 70%, 50%)`,
+            "fill",
+            `hsl(${Math.random() * 360}, 70%, 50%)`,
          )
 
          circleSVG.appendChild(circle)
-         circleSVG.setAttribute('width', size.toString())
-         circleSVG.setAttribute('height', size.toString())
+         circleSVG.setAttribute("width", size.toString())
+         circleSVG.setAttribute("height", size.toString())
 
          particle.appendChild(circleSVG)
-      }
-      else {
+      } else {
          particle.innerHTML = `<img src="${particleType}" width="${size}" height="${size}" style="border-radius: 50%">`
       }
 
-      particle.style.position = 'absolute'
+      particle.style.position = "absolute"
       particle.style.transform = `translate3d(${left}px, ${top}px, 0px) rotate(${spinVal}deg)`
 
       container.appendChild(particle)
@@ -129,22 +127,22 @@ function applyParticleEffect(
          p.spinVal = p.spinVal + p.spinSpeed
 
          if (
-            p.top
-            >= Math.max(window.innerHeight, document.body.clientHeight) + p.size
+            p.top >=
+            Math.max(window.innerHeight, document.body.clientHeight) + p.size
          ) {
-            particles = particles.filter(o => o !== p)
+            particles = particles.filter((o) => o !== p)
             p.element.remove()
          }
 
          p.element.setAttribute(
-            'style',
+            "style",
             [
-               'position:absolute',
-               'will-change:transform',
-          `top:${p.top}px`,
-          `left:${p.left}px`,
-          `transform:rotate(${p.spinVal}deg)`,
-            ].join(';'),
+               "position:absolute",
+               "will-change:transform",
+               `top:${p.top}px`,
+               `left:${p.left}px`,
+               `transform:rotate(${p.spinVal}deg)`,
+            ].join(";"),
          )
       })
    }
@@ -157,9 +155,9 @@ function applyParticleEffect(
    function loop() {
       const currentTime = performance.now()
       if (
-         autoAddParticle
-         && particles.length < limit
-         && currentTime - lastParticleTimestamp > particleGenerationDelay
+         autoAddParticle &&
+         particles.length < limit &&
+         currentTime - lastParticleTimestamp > particleGenerationDelay
       ) {
          generateParticle()
          lastParticleTimestamp = currentTime
@@ -171,18 +169,17 @@ function applyParticleEffect(
 
    loop()
 
-   const isTouchInteraction = 'ontouchstart' in window
+   const isTouchInteraction = "ontouchstart" in window
 
-   const tap = isTouchInteraction ? 'touchstart' : 'mousedown'
-   const tapEnd = isTouchInteraction ? 'touchend' : 'mouseup'
-   const move = isTouchInteraction ? 'touchmove' : 'mousemove'
+   const tap = isTouchInteraction ? "touchstart" : "mousedown"
+   const tapEnd = isTouchInteraction ? "touchend" : "mouseup"
+   const move = isTouchInteraction ? "touchmove" : "mousemove"
 
    const updateMousePosition = (e: MouseEvent | TouchEvent) => {
-      if ('touches' in e) {
+      if ("touches" in e) {
          mouseX = e.touches?.[0].clientX
          mouseY = e.touches?.[0].clientY
-      }
-      else {
+      } else {
          mouseX = e.clientX
          mouseY = e.clientY
       }
@@ -200,7 +197,7 @@ function applyParticleEffect(
    element.addEventListener(move, updateMousePosition, { passive: true })
    element.addEventListener(tap, tapHandler, { passive: true })
    element.addEventListener(tapEnd, disableAutoAddParticle, { passive: true })
-   element.addEventListener('mouseleave', disableAutoAddParticle, {
+   element.addEventListener("mouseleave", disableAutoAddParticle, {
       passive: true,
    })
 
@@ -208,15 +205,14 @@ function applyParticleEffect(
       element.removeEventListener(move, updateMousePosition)
       element.removeEventListener(tap, tapHandler)
       element.removeEventListener(tapEnd, disableAutoAddParticle)
-      element.removeEventListener('mouseleave', disableAutoAddParticle)
+      element.removeEventListener("mouseleave", disableAutoAddParticle)
 
       const interval = setInterval(() => {
          if (animationFrame && particles.length === 0) {
             cancelAnimationFrame(animationFrame)
             clearInterval(interval)
 
-            if (--instanceCounter === 0)
-               container.remove()
+            if (--instanceCounter === 0) container.remove()
          }
       }, 500)
    }
@@ -231,8 +227,7 @@ export const CoolMode: React.FC<CoolModeProps> = ({ children, options }) => {
    const ref = useRef<HTMLElement>(null)
 
    useEffect(() => {
-      if (ref.current)
-         return applyParticleEffect(ref.current, options)
+      if (ref.current) return applyParticleEffect(ref.current, options)
    }, [options])
 
    return React.cloneElement(children as React.ReactElement, { ref })
diff --git a/apps/web/registry/miami/ui/dialog.tsx b/apps/web/registry/miami/ui/dialog.tsx
index 7d127f20..16dbe169 100644
--- a/apps/web/registry/miami/ui/dialog.tsx
+++ b/apps/web/registry/miami/ui/dialog.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { Cross2Icon } from '@radix-ui/react-icons'
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Dialog = DialogPrimitive.Root
 
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
    <DialogPrimitive.Overlay
       ref={ref}
       className={ny(
-         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
+         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
          className,
       )}
       {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
          ref={ref}
          className={ny(
-            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
             className,
          )}
          {...props}
@@ -60,14 +60,14 @@ function DialogHeader({
    return (
       <div
          className={ny(
-            'flex flex-col space-y-1.5 text-center sm:text-left',
+            "flex flex-col space-y-1.5 text-center sm:text-left",
             className,
          )}
          {...props}
       />
    )
 }
-DialogHeader.displayName = 'DialogHeader'
+DialogHeader.displayName = "DialogHeader"
 
 function DialogFooter({
    className,
@@ -76,14 +76,14 @@ function DialogFooter({
    return (
       <div
          className={ny(
-            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
             className,
          )}
          {...props}
       />
    )
 }
-DialogFooter.displayName = 'DialogFooter'
+DialogFooter.displayName = "DialogFooter"
 
 const DialogTitle = React.forwardRef<
    React.ElementRef<typeof DialogPrimitive.Title>,
@@ -92,7 +92,7 @@ const DialogTitle = React.forwardRef<
    <DialogPrimitive.Title
       ref={ref}
       className={ny(
-         'text-lg font-semibold leading-none tracking-tight',
+         "text-lg font-semibold leading-none tracking-tight",
          className,
       )}
       {...props}
@@ -106,7 +106,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <DialogPrimitive.Description
       ref={ref}
-      className={ny('text-muted-foreground text-sm', className)}
+      className={ny("text-muted-foreground text-sm", className)}
       {...props}
    />
 ))
diff --git a/apps/web/registry/miami/ui/dock.tsx b/apps/web/registry/miami/ui/dock.tsx
index 941d70f1..0344cb11 100644
--- a/apps/web/registry/miami/ui/dock.tsx
+++ b/apps/web/registry/miami/ui/dock.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client"
 
-import type { PropsWithChildren } from 'react'
-import React, { useRef } from 'react'
-import { type VariantProps, cva } from 'class-variance-authority'
-import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion'
+import { type VariantProps, cva } from "class-variance-authority"
+import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"
+import type { PropsWithChildren } from "react"
+import React, { useRef } from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 export interface DockProps extends VariantProps<typeof dockVariants> {
    className?: string
    magnification?: number
    distance?: number
-   direction?: 'top' | 'middle' | 'bottom'
+   direction?: "top" | "middle" | "bottom"
    children: React.ReactNode
 }
 
@@ -19,7 +19,7 @@ const DEFAULT_MAGNIFICATION = 60
 const DEFAULT_DISTANCE = 140
 
 const dockVariants = cva(
-   'supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md',
+   "supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md",
 )
 
 const Dock = React.forwardRef<HTMLDivElement, DockProps>(
@@ -29,12 +29,12 @@ const Dock = React.forwardRef<HTMLDivElement, DockProps>(
          children,
          magnification = DEFAULT_MAGNIFICATION,
          distance = DEFAULT_DISTANCE,
-         direction = 'bottom',
+         direction = "bottom",
          ...props
       },
       ref,
    ) => {
-      const mouseX = useMotionValue(Infinity)
+      const mouseX = useMotionValue(Number.POSITIVE_INFINITY)
 
       const renderChildren = () => {
          return React.Children.map(children, (child) => {
@@ -53,13 +53,13 @@ const Dock = React.forwardRef<HTMLDivElement, DockProps>(
       return (
          <motion.div
             ref={ref}
-            onMouseMove={e => mouseX.set(e.pageX)}
-            onMouseLeave={() => mouseX.set(Infinity)}
+            onMouseMove={(e) => mouseX.set(e.pageX)}
+            onMouseLeave={() => mouseX.set(Number.POSITIVE_INFINITY)}
             {...props}
             className={ny(dockVariants({ className }), {
-               'items-start': direction === 'top',
-               'items-center': direction === 'middle',
-               'items-end': direction === 'bottom',
+               "items-start": direction === "top",
+               "items-center": direction === "middle",
+               "items-end": direction === "bottom",
             })}
          >
             {renderChildren()}
@@ -68,7 +68,7 @@ const Dock = React.forwardRef<HTMLDivElement, DockProps>(
    },
 )
 
-Dock.displayName = 'Dock'
+Dock.displayName = "Dock"
 
 export interface DockIconProps {
    size?: number
@@ -114,7 +114,7 @@ function DockIcon({
          ref={ref}
          style={{ width }}
          className={ny(
-            'flex aspect-square cursor-pointer items-center justify-center rounded-full',
+            "flex aspect-square cursor-pointer items-center justify-center rounded-full",
             className,
          )}
          {...props}
@@ -124,6 +124,6 @@ function DockIcon({
    )
 }
 
-DockIcon.displayName = 'DockIcon'
+DockIcon.displayName = "DockIcon"
 
 export { Dock, DockIcon, dockVariants }
diff --git a/apps/web/registry/miami/ui/dot-pattern.tsx b/apps/web/registry/miami/ui/dot-pattern.tsx
index be664eb0..5b905f4b 100644
--- a/apps/web/registry/miami/ui/dot-pattern.tsx
+++ b/apps/web/registry/miami/ui/dot-pattern.tsx
@@ -1,16 +1,17 @@
-import { useId } from 'react'
-import { ny } from '~/lib/utils'
+import { useId } from "react"
 
-interface DotPatternProps {
-   width?: any
-   height?: any
-   x?: any
-   y?: any
-   cx?: any
-   cy?: any
-   cr?: any
+import { ny } from "~/registry/miami/lib/utils"
+
+interface DotPatternProps extends React.SVGProps<SVGSVGElement> {
+   width?: number
+   height?: number
+   x?: number
+   y?: number
+   cx?: number
+   cy?: number
+   cr?: number
    className?: string
-   [key: string]: any
+   [key: string]: unknown
 }
 export function DotPattern({
    width = 16,
@@ -29,7 +30,7 @@ export function DotPattern({
       <svg
          aria-hidden="true"
          className={ny(
-            'pointer-events-none absolute inset-0 size-full fill-neutral-400/80',
+            "pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80",
             className,
          )}
          {...props}
@@ -47,9 +48,12 @@ export function DotPattern({
                <circle id="pattern-circle" cx={cx} cy={cy} r={cr} />
             </pattern>
          </defs>
-         <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+         <rect
+            width="100%"
+            height="100%"
+            strokeWidth={0}
+            fill={`url(#${id})`}
+         />
       </svg>
    )
 }
-
-export default DotPattern
diff --git a/apps/web/registry/miami/ui/drawer.tsx b/apps/web/registry/miami/ui/drawer.tsx
index ddb70b60..e06f0182 100644
--- a/apps/web/registry/miami/ui/drawer.tsx
+++ b/apps/web/registry/miami/ui/drawer.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Drawer as DrawerPrimitive } from 'vaul'
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 function Drawer({
    shouldScaleBackground = true,
@@ -16,7 +16,7 @@ function Drawer({
       />
    )
 }
-Drawer.displayName = 'Drawer'
+Drawer.displayName = "Drawer"
 
 const DrawerTrigger = DrawerPrimitive.Trigger
 
@@ -30,7 +30,7 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <DrawerPrimitive.Overlay
       ref={ref}
-      className={ny('fixed inset-0 z-50 bg-black/80', className)}
+      className={ny("fixed inset-0 z-50 bg-black/80", className)}
       {...props}
    />
 ))
@@ -45,7 +45,7 @@ const DrawerContent = React.forwardRef<
       <DrawerPrimitive.Content
          ref={ref}
          className={ny(
-            'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border',
+            "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
             className,
          )}
          {...props}
@@ -55,7 +55,7 @@ const DrawerContent = React.forwardRef<
       </DrawerPrimitive.Content>
    </DrawerPortal>
 ))
-DrawerContent.displayName = 'DrawerContent'
+DrawerContent.displayName = "DrawerContent"
 
 function DrawerHeader({
    className,
@@ -63,12 +63,12 @@ function DrawerHeader({
 }: React.HTMLAttributes<HTMLDivElement>) {
    return (
       <div
-         className={ny('grid gap-1.5 p-4 text-center sm:text-left', className)}
+         className={ny("grid gap-1.5 p-4 text-center sm:text-left", className)}
          {...props}
       />
    )
 }
-DrawerHeader.displayName = 'DrawerHeader'
+DrawerHeader.displayName = "DrawerHeader"
 
 function DrawerFooter({
    className,
@@ -76,12 +76,12 @@ function DrawerFooter({
 }: React.HTMLAttributes<HTMLDivElement>) {
    return (
       <div
-         className={ny('mt-auto flex flex-col gap-2 p-4', className)}
+         className={ny("mt-auto flex flex-col gap-2 p-4", className)}
          {...props}
       />
    )
 }
-DrawerFooter.displayName = 'DrawerFooter'
+DrawerFooter.displayName = "DrawerFooter"
 
 const DrawerTitle = React.forwardRef<
    React.ElementRef<typeof DrawerPrimitive.Title>,
@@ -90,7 +90,7 @@ const DrawerTitle = React.forwardRef<
    <DrawerPrimitive.Title
       ref={ref}
       className={ny(
-         'text-lg font-semibold leading-none tracking-tight',
+         "text-lg font-semibold leading-none tracking-tight",
          className,
       )}
       {...props}
@@ -104,7 +104,7 @@ const DrawerDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <DrawerPrimitive.Description
       ref={ref}
-      className={ny('text-muted-foreground text-sm', className)}
+      className={ny("text-muted-foreground text-sm", className)}
       {...props}
    />
 ))
diff --git a/apps/web/registry/miami/ui/dropdown-menu.tsx b/apps/web/registry/miami/ui/dropdown-menu.tsx
index 9bfae431..396c9a6c 100644
--- a/apps/web/registry/miami/ui/dropdown-menu.tsx
+++ b/apps/web/registry/miami/ui/dropdown-menu.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { Check, ChevronRight, Circle } from 'lucide-react'
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -27,8 +27,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
    <DropdownMenuPrimitive.SubTrigger
       ref={ref}
       className={ny(
-         'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-         inset && 'pl-8',
+         "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -37,8 +37,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
       <ChevronRight className="ml-auto size-4" />
    </DropdownMenuPrimitive.SubTrigger>
 ))
-DropdownMenuSubTrigger.displayName
-  = DropdownMenuPrimitive.SubTrigger.displayName
+DropdownMenuSubTrigger.displayName =
+   DropdownMenuPrimitive.SubTrigger.displayName
 
 const DropdownMenuSubContent = React.forwardRef<
    React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -47,14 +47,14 @@ const DropdownMenuSubContent = React.forwardRef<
    <DropdownMenuPrimitive.SubContent
       ref={ref}
       className={ny(
-         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
          className,
       )}
       {...props}
    />
 ))
-DropdownMenuSubContent.displayName
-  = DropdownMenuPrimitive.SubContent.displayName
+DropdownMenuSubContent.displayName =
+   DropdownMenuPrimitive.SubContent.displayName
 
 const DropdownMenuContent = React.forwardRef<
    React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
          ref={ref}
          sideOffset={sideOffset}
          className={ny(
-            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+            "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md",
             className,
          )}
          {...props}
@@ -83,8 +83,8 @@ const DropdownMenuItem = React.forwardRef<
    <DropdownMenuPrimitive.Item
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-         inset && 'pl-8',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
    <DropdownMenuPrimitive.CheckboxItem
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       checked={checked}
@@ -113,8 +113,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
       {children}
    </DropdownMenuPrimitive.CheckboxItem>
 ))
-DropdownMenuCheckboxItem.displayName
-  = DropdownMenuPrimitive.CheckboxItem.displayName
+DropdownMenuCheckboxItem.displayName =
+   DropdownMenuPrimitive.CheckboxItem.displayName
 
 const DropdownMenuRadioItem = React.forwardRef<
    React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
    <DropdownMenuPrimitive.RadioItem
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       {...props}
@@ -147,8 +147,8 @@ const DropdownMenuLabel = React.forwardRef<
    <DropdownMenuPrimitive.Label
       ref={ref}
       className={ny(
-         'px-2 py-1.5 text-sm font-semibold',
-         inset && 'pl-8',
+         "px-2 py-1.5 text-sm font-semibold",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -162,7 +162,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <DropdownMenuPrimitive.Separator
       ref={ref}
-      className={ny('bg-muted -mx-1 my-1 h-px', className)}
+      className={ny("bg-muted -mx-1 my-1 h-px", className)}
       {...props}
    />
 ))
@@ -174,12 +174,12 @@ function DropdownMenuShortcut({
 }: React.HTMLAttributes<HTMLSpanElement>) {
    return (
       <span
-         className={ny('ml-auto text-xs tracking-widest opacity-60', className)}
+         className={ny("ml-auto text-xs tracking-widest opacity-60", className)}
          {...props}
       />
    )
 }
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
 
 export {
    DropdownMenu,
diff --git a/apps/web/registry/miami/ui/fade-in.tsx b/apps/web/registry/miami/ui/fade-in.tsx
index a5793365..0aff5ab8 100644
--- a/apps/web/registry/miami/ui/fade-in.tsx
+++ b/apps/web/registry/miami/ui/fade-in.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { useRef } from 'react'
-import { motion, useInView } from 'framer-motion'
+import { motion, useInView } from "framer-motion"
+import { useRef } from "react"
 
 export default function FadeIn({
    children,
@@ -19,7 +19,7 @@ export default function FadeIn({
    const ref = useRef(null)
    const inView = useInView(ref, {
       once: true,
-      margin: viewTriggerOffset ? '-128px' : '0px',
+      margin: viewTriggerOffset ? "-128px" : "0px",
    })
 
    const fadeUpVariants = {
@@ -36,7 +36,7 @@ export default function FadeIn({
    return (
       <motion.div
          ref={ref}
-         animate={inView ? 'animate' : 'initial'}
+         animate={inView ? "animate" : "initial"}
          variants={fadeUpVariants}
          className={className}
          initial={false}
@@ -44,7 +44,7 @@ export default function FadeIn({
             duration: 0.6,
             delay: delay || 0,
             ease: [0.21, 0.47, 0.32, 0.98],
-            type: 'spring',
+            type: "spring",
          }}
       >
          {children}
diff --git a/apps/web/registry/miami/ui/fade-text.tsx b/apps/web/registry/miami/ui/fade-text.tsx
index 1e98b65b..790a4e25 100644
--- a/apps/web/registry/miami/ui/fade-text.tsx
+++ b/apps/web/registry/miami/ui/fade-text.tsx
@@ -1,22 +1,22 @@
-'use client'
+"use client"
 
-import type { Variants } from 'framer-motion'
-import { motion } from 'framer-motion'
-import { useMemo } from 'react'
+import type { Variants } from "framer-motion"
+import { motion } from "framer-motion"
+import { useMemo } from "react"
 
 interface FadeTextProps {
    className?: string
-   direction?: 'up' | 'down' | 'left' | 'right'
+   direction?: "up" | "down" | "left" | "right"
    framerProps?: Variants
    text: string
 }
 
 export function FadeText({
-   direction = 'up',
+   direction = "up",
    className,
    framerProps = {
       hidden: { opacity: 0 },
-      show: { opacity: 1, transition: { type: 'spring' } },
+      show: { opacity: 1, transition: { type: "spring" } },
    },
    text,
 }: FadeTextProps) {
@@ -25,11 +25,11 @@ export function FadeText({
       return map[direction]
    }, [direction])
 
-   const axis = direction === 'up' || direction === 'down' ? 'y' : 'x'
+   const axis = direction === "up" || direction === "down" ? "y" : "x"
 
    const FADE_ANIMATION_VARIANTS = useMemo(() => {
       const { hidden, show, ...rest } = framerProps as {
-         [name: string]: { [name: string]: number, opacity: number }
+         [name: string]: { [name: string]: number; opacity: number }
       }
 
       return {
diff --git a/apps/web/registry/miami/ui/file-tree.tsx b/apps/web/registry/miami/ui/file-tree.tsx
index b5a147e4..e9892a0b 100644
--- a/apps/web/registry/miami/ui/file-tree.tsx
+++ b/apps/web/registry/miami/ui/file-tree.tsx
@@ -1,19 +1,20 @@
-'use client'
+"use client"
 
-import React, {
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react"
+import type React from "react"
+import {
    createContext,
    forwardRef,
    useCallback,
    useContext,
    useEffect,
    useState,
-} from 'react'
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { FileIcon, FolderIcon, FolderOpenIcon } from 'lucide-react'
+} from "react"
 
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import { ScrollArea } from '~/registry/miami/ui/scroll-area'
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { ScrollArea } from "~/registry/miami/ui/scroll-area"
 
 interface TreeViewElement {
    id: string
@@ -31,7 +32,7 @@ interface TreeContextProps {
    setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>
    openIcon?: React.ReactNode
    closeIcon?: React.ReactNode
-   direction: 'rtl' | 'ltr'
+   direction: "rtl" | "ltr"
 }
 
 const TreeContext = createContext<TreeContextProps | null>(null)
@@ -39,14 +40,14 @@ const TreeContext = createContext<TreeContextProps | null>(null)
 function useTree() {
    const context = useContext(TreeContext)
    if (!context) {
-      throw new Error('useTree must be used within a TreeProvider')
+      throw new Error("useTree must be used within a TreeProvider")
    }
    return context
 }
 
 interface TreeViewComponentProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-type Direction = 'rtl' | 'ltr' | undefined
+type Direction = "rtl" | "ltr" | undefined
 
 type TreeViewProps = {
    initialSelectedId?: string
@@ -87,7 +88,7 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
       const handleExpand = useCallback((id: string) => {
          setExpandedItems((prev) => {
             if (prev?.includes(id)) {
-               return prev.filter(item => item !== id)
+               return prev.filter((item) => item !== id)
             }
             return [...(prev ?? []), id]
          })
@@ -95,8 +96,7 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
 
       const expandSpecificTargetedElements = useCallback(
          (elements?: TreeViewElement[], selectId?: string) => {
-            if (!elements || !selectId)
-               return
+            if (!elements || !selectId) return
             const findParent = (
                currentElement: TreeViewElement,
                currentPath: string[] = [],
@@ -105,20 +105,22 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
                const newPath = [...currentPath, currentElement.id]
                if (currentElement.id === selectId) {
                   if (isSelectable) {
-                     setExpandedItems(prev => [...(prev ?? []), ...newPath])
-                  }
-                  else {
+                     setExpandedItems((prev) => [...(prev ?? []), ...newPath])
+                  } else {
                      if (newPath.includes(currentElement.id)) {
                         newPath.pop()
-                        setExpandedItems(prev => [...(prev ?? []), ...newPath])
+                        setExpandedItems((prev) => [
+                           ...(prev ?? []),
+                           ...newPath,
+                        ])
                      }
                   }
                   return
                }
                if (
-                  isSelectable
-                  && currentElement.children
-                  && currentElement.children.length > 0
+                  isSelectable &&
+                  currentElement.children &&
+                  currentElement.children.length > 0
                ) {
                   currentElement.children.forEach((child) => {
                      findParent(child, newPath)
@@ -138,7 +140,7 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
          }
       }, [initialSelectedId, elements])
 
-      const direction = dir === 'rtl' ? 'rtl' : 'ltr'
+      const direction = dir === "rtl" ? "rtl" : "ltr"
 
       return (
          <TreeContext.Provider
@@ -154,7 +156,7 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
                direction,
             }}
          >
-            <div className={ny('size-full', className)}>
+            <div className={ny("size-full", className)}>
                <ScrollArea
                   ref={ref}
                   className="relative h-full px-2"
@@ -166,8 +168,9 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
                      defaultValue={expandedItems}
                      value={expandedItems}
                      className="flex flex-col gap-1"
-                     onValueChange={value =>
-                        setExpandedItems(prev => [...(prev ?? []), value[0]])}
+                     onValueChange={(value) =>
+                        setExpandedItems((prev) => [...(prev ?? []), value[0]])
+                     }
                      dir={dir as Direction}
                   >
                      {children}
@@ -179,7 +182,7 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
    },
 )
 
-Tree.displayName = 'Tree'
+Tree.displayName = "Tree"
 
 const TreeIndicator = forwardRef<
    HTMLDivElement,
@@ -192,7 +195,7 @@ const TreeIndicator = forwardRef<
          dir={direction}
          ref={ref}
          className={ny(
-            'bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5',
+            "bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5",
             className,
          )}
          {...props}
@@ -200,7 +203,7 @@ const TreeIndicator = forwardRef<
    )
 })
 
-TreeIndicator.displayName = 'TreeIndicator'
+TreeIndicator.displayName = "TreeIndicator"
 
 interface FolderComponentProps
    extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {}
@@ -214,7 +217,7 @@ type FolderProps = {
 
 const Folder = forwardRef<
    HTMLDivElement,
-  FolderProps & React.HTMLAttributes<HTMLDivElement>
+   FolderProps & React.HTMLAttributes<HTMLDivElement>
 >(
    (
       {
@@ -246,20 +249,20 @@ const Folder = forwardRef<
          >
             <AccordionPrimitive.Trigger
                className={ny(
-            `flex items-center gap-1 rounded-md text-sm`,
-            className,
-            {
-               'bg-muted rounded-md': isSelect && isSelectable,
-               'cursor-pointer': isSelectable,
-               'cursor-not-allowed opacity-50': !isSelectable,
-            },
+                  `flex items-center gap-1 rounded-md text-sm`,
+                  className,
+                  {
+                     "bg-muted rounded-md": isSelect && isSelectable,
+                     "cursor-pointer": isSelectable,
+                     "cursor-not-allowed opacity-50": !isSelectable,
+                  },
                )}
                disabled={!isSelectable}
                onClick={() => handleExpand(value)}
             >
                {expandedItems?.includes(value)
-                  ? openIcon ?? <FolderOpenIcon className="size-4" />
-                  : closeIcon ?? <FolderIcon className="size-4" />}
+                  ? (openIcon ?? <FolderOpenIcon className="size-4" />)
+                  : (closeIcon ?? <FolderIcon className="size-4" />)}
                <span>{element}</span>
             </AccordionPrimitive.Trigger>
             <AccordionPrimitive.Content className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative h-full overflow-hidden text-sm">
@@ -271,7 +274,7 @@ const Folder = forwardRef<
                   defaultValue={expandedItems}
                   value={expandedItems}
                   onValueChange={(value) => {
-                     setExpandedItems?.(prev => [...(prev ?? []), value[0]])
+                     setExpandedItems?.((prev) => [...(prev ?? []), value[0]])
                   }}
                >
                   {children}
@@ -282,7 +285,7 @@ const Folder = forwardRef<
    },
 )
 
-Folder.displayName = 'Folder'
+Folder.displayName = "Folder"
 
 const File = forwardRef<
    HTMLButtonElement,
@@ -294,48 +297,50 @@ const File = forwardRef<
       fileIcon?: React.ReactNode
    } & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(
-         (
-            {
-               value,
-               className,
-               handleSelect,
-               isSelectable = true,
-               isSelect,
-               fileIcon,
-               children,
-               ...props
-            },
-            ref,
-         ) => {
-            const { direction, selectedId, selectItem } = useTree()
-            const isSelected = isSelect ?? selectedId === value
-            return (
-               <AccordionPrimitive.Item value={value} className="relative">
-                  <AccordionPrimitive.Trigger
-                     ref={ref}
-                     {...props}
-                     dir={direction}
-                     disabled={!isSelectable}
-                     aria-label="File"
-                     className={ny(
-                        'flex cursor-pointer items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out  rtl:pl-1 rtl:pr-0',
-                        {
-                           'bg-muted': isSelected && isSelectable,
-                        },
-                        isSelectable ? 'cursor-pointer' : 'cursor-not-allowed opacity-50',
-                        className,
-                     )}
-                     onClick={() => selectItem(value)}
-                  >
-                     {fileIcon ?? <FileIcon className="size-4" />}
-                     {children}
-                  </AccordionPrimitive.Trigger>
-               </AccordionPrimitive.Item>
-            )
-         },
-         )
+   (
+      {
+         value,
+         className,
+         handleSelect,
+         isSelectable = true,
+         isSelect,
+         fileIcon,
+         children,
+         ...props
+      },
+      ref,
+   ) => {
+      const { direction, selectedId, selectItem } = useTree()
+      const isSelected = isSelect ?? selectedId === value
+      return (
+         <AccordionPrimitive.Item value={value} className="relative">
+            <AccordionPrimitive.Trigger
+               ref={ref}
+               {...props}
+               dir={direction}
+               disabled={!isSelectable}
+               aria-label="File"
+               className={ny(
+                  "flex cursor-pointer items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out  rtl:pl-1 rtl:pr-0",
+                  {
+                     "bg-muted": isSelected && isSelectable,
+                  },
+                  isSelectable
+                     ? "cursor-pointer"
+                     : "cursor-not-allowed opacity-50",
+                  className,
+               )}
+               onClick={() => selectItem(value)}
+            >
+               {fileIcon ?? <FileIcon className="size-4" />}
+               {children}
+            </AccordionPrimitive.Trigger>
+         </AccordionPrimitive.Item>
+      )
+   },
+)
 
-File.displayName = 'File'
+File.displayName = "File"
 
 const CollapseButton = forwardRef<
    HTMLButtonElement,
@@ -350,7 +355,7 @@ const CollapseButton = forwardRef<
       const expandTree = (element: TreeViewElement) => {
          const isSelectable = element.isSelectable ?? true
          if (isSelectable && element.children && element.children.length > 0) {
-            setExpandedItems?.(prev => [...(prev ?? []), element.id])
+            setExpandedItems?.((prev) => [...(prev ?? []), element.id])
             element.children.forEach(expandTree)
          }
       }
@@ -388,6 +393,6 @@ const CollapseButton = forwardRef<
    )
 })
 
-CollapseButton.displayName = 'CollapseButton'
+CollapseButton.displayName = "CollapseButton"
 
 export { CollapseButton, File, Folder, Tree, type TreeViewElement }
diff --git a/apps/web/registry/miami/ui/flickering-grid.tsx b/apps/web/registry/miami/ui/flickering-grid.tsx
index 3e65047d..a40fde86 100644
--- a/apps/web/registry/miami/ui/flickering-grid.tsx
+++ b/apps/web/registry/miami/ui/flickering-grid.tsx
@@ -1,14 +1,10 @@
-'use client'
+"use client"
 
-import React, {
-   useCallback,
-   useEffect,
-   useMemo,
-   useRef,
-   useState,
-} from 'react'
+import type React from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { ny } from "~/registry/miami/lib/utils"
 
-interface FlickeringGridProps {
+interface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {
    squareSize?: number
    gridGap?: number
    flickerChance?: number
@@ -19,64 +15,57 @@ interface FlickeringGridProps {
    maxOpacity?: number
 }
 
-const FlickeringGrid: React.FC<FlickeringGridProps> = ({
+export const FlickeringGrid: React.FC<FlickeringGridProps> = ({
    squareSize = 4,
    gridGap = 6,
    flickerChance = 0.3,
-   color = 'rgb(0, 0, 0)',
+   color = "rgb(0, 0, 0)",
    width,
    height,
    className,
    maxOpacity = 0.3,
+   ...props
 }) => {
    const canvasRef = useRef<HTMLCanvasElement>(null)
+   const containerRef = useRef<HTMLDivElement>(null)
    const [isInView, setIsInView] = useState(false)
+   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 })
 
    const memoizedColor = useMemo(() => {
       const toRGBA = (color: string) => {
-         if (typeof window === 'undefined') {
+         if (typeof window === "undefined") {
             return `rgba(0, 0, 0,`
          }
-         const canvas = document.createElement('canvas')
+         const canvas = document.createElement("canvas")
          canvas.width = canvas.height = 1
-         const ctx = canvas.getContext('2d')
-         if (!ctx)
-            return 'rgba(255, 0, 0,'
+         const ctx = canvas.getContext("2d")
+         if (!ctx) return "rgba(255, 0, 0,"
          ctx.fillStyle = color
          ctx.fillRect(0, 0, 1, 1)
-         const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data
+         const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)
          return `rgba(${r}, ${g}, ${b},`
       }
       return toRGBA(color)
    }, [color])
 
    const setupCanvas = useCallback(
-      (canvas: HTMLCanvasElement) => {
-         const canvasWidth = width || canvas.clientWidth
-         const canvasHeight = height || canvas.clientHeight
+      (canvas: HTMLCanvasElement, width: number, height: number) => {
          const dpr = window.devicePixelRatio || 1
-         canvas.width = canvasWidth * dpr
-         canvas.height = canvasHeight * dpr
-         canvas.style.width = `${canvasWidth}px`
-         canvas.style.height = `${canvasHeight}px`
-         const cols = Math.floor(canvasWidth / (squareSize + gridGap))
-         const rows = Math.floor(canvasHeight / (squareSize + gridGap))
+         canvas.width = width * dpr
+         canvas.height = height * dpr
+         canvas.style.width = `${width}px`
+         canvas.style.height = `${height}px`
+         const cols = Math.floor(width / (squareSize + gridGap))
+         const rows = Math.floor(height / (squareSize + gridGap))
 
          const squares = new Float32Array(cols * rows)
          for (let i = 0; i < squares.length; i++) {
             squares[i] = Math.random() * maxOpacity
          }
 
-         return {
-            width: canvasWidth,
-            height: canvasHeight,
-            cols,
-            rows,
-            squares,
-            dpr,
-         }
+         return { cols, rows, squares, dpr }
       },
-      [squareSize, gridGap, width, height, maxOpacity],
+      [squareSize, gridGap, maxOpacity],
    )
 
    const updateSquares = useCallback(
@@ -101,7 +90,7 @@ const FlickeringGrid: React.FC<FlickeringGridProps> = ({
          dpr: number,
       ) => {
          ctx.clearRect(0, 0, width, height)
-         ctx.fillStyle = 'transparent'
+         ctx.fillStyle = "transparent"
          ctx.fillRect(0, 0, width, height)
 
          for (let i = 0; i < cols; i++) {
@@ -122,67 +111,84 @@ const FlickeringGrid: React.FC<FlickeringGridProps> = ({
 
    useEffect(() => {
       const canvas = canvasRef.current
-      if (!canvas)
-         return
+      const container = containerRef.current
+      if (!canvas || !container) return
 
-      const ctx = canvas.getContext('2d')
-      if (!ctx)
-         return
+      const ctx = canvas.getContext("2d")
+      if (!ctx) return
 
       let animationFrameId: number
-      let { width, height, cols, rows, squares, dpr } = setupCanvas(canvas)
+      let gridParams: ReturnType<typeof setupCanvas>
+
+      const updateCanvasSize = () => {
+         const newWidth = width || container.clientWidth
+         const newHeight = height || container.clientHeight
+         setCanvasSize({ width: newWidth, height: newHeight })
+         gridParams = setupCanvas(canvas, newWidth, newHeight)
+      }
+
+      updateCanvasSize()
 
       let lastTime = 0
       const animate = (time: number) => {
-         if (!isInView)
-            return
+         if (!isInView) return
 
          const deltaTime = (time - lastTime) / 1000
          lastTime = time
 
-         updateSquares(squares, deltaTime)
-         drawGrid(ctx, width * dpr, height * dpr, cols, rows, squares, dpr)
+         updateSquares(gridParams.squares, deltaTime)
+         drawGrid(
+            ctx,
+            canvas.width,
+            canvas.height,
+            gridParams.cols,
+            gridParams.rows,
+            gridParams.squares,
+            gridParams.dpr,
+         )
          animationFrameId = requestAnimationFrame(animate)
       }
 
-      const handleResize = () => {
-         ({ width, height, cols, rows, squares, dpr } = setupCanvas(canvas))
-      }
+      const resizeObserver = new ResizeObserver(() => {
+         updateCanvasSize()
+      })
+
+      resizeObserver.observe(container)
 
-      const observer = new IntersectionObserver(
+      const intersectionObserver = new IntersectionObserver(
          ([entry]) => {
             setIsInView(entry.isIntersecting)
          },
          { threshold: 0 },
       )
 
-      observer.observe(canvas)
-
-      window.addEventListener('resize', handleResize)
+      intersectionObserver.observe(canvas)
 
       if (isInView) {
          animationFrameId = requestAnimationFrame(animate)
       }
 
       return () => {
-         window.removeEventListener('resize', handleResize)
          cancelAnimationFrame(animationFrameId)
-         observer.disconnect()
+         resizeObserver.disconnect()
+         intersectionObserver.disconnect()
       }
    }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])
 
    return (
-      <canvas
-         ref={canvasRef}
-         className={`pointer-events-none size-full ${className}`}
-         style={{
-            width: width || '100%',
-            height: height || '100%',
-         }}
-         width={width}
-         height={height}
-      />
+      <div
+         ref={containerRef}
+         className={ny(`h-full w-full ${className}`)}
+         {...props}
+      >
+         <canvas
+            ref={canvasRef}
+            className="pointer-events-none"
+            style={{
+               width: canvasSize.width,
+               height: canvasSize.height,
+            }}
+         />
+      </div>
    )
 }
-
-export default FlickeringGrid
diff --git a/apps/web/registry/miami/ui/flip-text.tsx b/apps/web/registry/miami/ui/flip-text.tsx
index 51da4969..12cb43dd 100644
--- a/apps/web/registry/miami/ui/flip-text.tsx
+++ b/apps/web/registry/miami/ui/flip-text.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import type { Variants } from 'framer-motion'
-import { AnimatePresence, motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import type { Variants } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface SlightFlipProps {
    word: string
@@ -25,7 +25,7 @@ export default function SlightFlip({
    return (
       <div className="flex justify-center space-x-2">
          <AnimatePresence mode="wait">
-            {word.split('').map((char, i) => (
+            {word.split("").map((char, i) => (
                <motion.span
                   key={i}
                   initial="hidden"
@@ -33,7 +33,7 @@ export default function SlightFlip({
                   exit="hidden"
                   variants={framerProps}
                   transition={{ duration, delay: i * delayMultiple }}
-                  className={ny('origin-center drop-shadow-sm', className)}
+                  className={ny("origin-center drop-shadow-sm", className)}
                >
                   {char}
                </motion.span>
diff --git a/apps/web/registry/miami/ui/form.tsx b/apps/web/registry/miami/ui/form.tsx
index 0a108ef8..0d383714 100644
--- a/apps/web/registry/miami/ui/form.tsx
+++ b/apps/web/registry/miami/ui/form.tsx
@@ -1,13 +1,18 @@
-'use client'
-
-import * as React from 'react'
-import type * as LabelPrimitive from '@radix-ui/react-label'
-import { Slot } from '@radix-ui/react-slot'
-import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form'
-import { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form'
-
-import { ny } from '~/lib/utils'
-import { Label } from '~/registry/miami/ui/label'
+"use client"
+
+import type * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import * as React from "react"
+import type { ControllerProps, FieldPath, FieldValues } from "react-hook-form"
+import {
+   Controller,
+   FormProvider,
+   useFormContext,
+   useFormState,
+} from "react-hook-form"
+
+import { ny } from "~/lib/utils"
+import { Label } from "~/registry/miami/ui/label"
 
 const Form = FormProvider
 
@@ -41,7 +46,7 @@ function useFormField() {
    const fieldState = getFieldState(fieldContext.name, formState)
 
    if (!fieldContext)
-      throw new Error('useFormField should be used within <FormField>')
+      throw new Error("useFormField should be used within <FormField>")
 
    const { id } = itemContext
 
@@ -71,11 +76,11 @@ const FormItem = React.forwardRef<
 
    return (
       <FormItemContext.Provider value={{ id }}>
-         <div ref={ref} className={ny('space-y-2', className)} {...props} />
+         <div ref={ref} className={ny("space-y-2", className)} {...props} />
       </FormItemContext.Provider>
    )
 })
-FormItem.displayName = 'FormItem'
+FormItem.displayName = "FormItem"
 
 const FormLabel = React.forwardRef<
    React.ElementRef<typeof LabelPrimitive.Root>,
@@ -86,20 +91,20 @@ const FormLabel = React.forwardRef<
    return (
       <Label
          ref={ref}
-         className={ny(error && 'text-destructive', className)}
+         className={ny(error && "text-destructive", className)}
          htmlFor={formItemId}
          {...props}
       />
    )
 })
-FormLabel.displayName = 'FormLabel'
+FormLabel.displayName = "FormLabel"
 
 const FormControl = React.forwardRef<
    React.ElementRef<typeof Slot>,
    React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-   const { error, formItemId, formDescriptionId, formMessageId }
-    = useFormField()
+   const { error, formItemId, formDescriptionId, formMessageId } =
+      useFormField()
 
    return (
       <Slot
@@ -115,7 +120,7 @@ const FormControl = React.forwardRef<
       />
    )
 })
-FormControl.displayName = 'FormControl'
+FormControl.displayName = "FormControl"
 
 const FormDescription = React.forwardRef<
    HTMLParagraphElement,
@@ -127,12 +132,12 @@ const FormDescription = React.forwardRef<
       <p
          ref={ref}
          id={formDescriptionId}
-         className={ny('text-muted-foreground text-[0.8rem]', className)}
+         className={ny("text-muted-foreground text-[0.8rem]", className)}
          {...props}
       />
    )
 })
-FormDescription.displayName = 'FormDescription'
+FormDescription.displayName = "FormDescription"
 
 const FormMessage = React.forwardRef<
    HTMLParagraphElement,
@@ -141,21 +146,20 @@ const FormMessage = React.forwardRef<
    const { error, formMessageId } = useFormField()
    const body = error ? String(error?.message) : children
 
-   if (!body)
-      return null
+   if (!body) return null
 
    return (
       <p
          ref={ref}
          id={formMessageId}
-         className={ny('text-destructive text-[0.8rem] font-medium', className)}
+         className={ny("text-destructive text-[0.8rem] font-medium", className)}
          {...props}
       >
          {body}
       </p>
    )
 })
-FormMessage.displayName = 'FormMessage'
+FormMessage.displayName = "FormMessage"
 
 const FormGlobalError = React.forwardRef<
    HTMLParagraphElement,
@@ -163,20 +167,19 @@ const FormGlobalError = React.forwardRef<
 >(({ className, ...props }, ref) => {
    const { errors } = useFormState()
    const rootError = errors.root
-   if (!rootError)
-      return null
+   if (!rootError) return null
 
    return (
       <p
          ref={ref}
-         className={ny('text-destructive text-sm font-medium', className)}
+         className={ny("text-destructive text-sm font-medium", className)}
          {...props}
       >
          {rootError.message}
       </p>
    )
 })
-FormGlobalError.displayName = 'FormGlobalError'
+FormGlobalError.displayName = "FormGlobalError"
 
 export {
    useFormField,
diff --git a/apps/web/registry/miami/ui/gauge-circle.tsx b/apps/web/registry/miami/ui/gauge-circle.tsx
index ffe96bec..f8999440 100644
--- a/apps/web/registry/miami/ui/gauge-circle.tsx
+++ b/apps/web/registry/miami/ui/gauge-circle.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface Props {
    max: number
@@ -23,19 +23,19 @@ export default function GaugeCircle({
 
    return (
       <div
-         className={ny('relative size-40 text-2xl font-semibold', className)}
+         className={ny("relative size-40 text-2xl font-semibold", className)}
          style={
             {
-               '--circle-size': '100px',
-               '--circumference': `${circumference}px`,
-               '--percent-to-px': `${percentPx}px`,
-               '--gap-percent': '5',
-               '--offset-factor': '0',
-               '--transition-length': '1s',
-               '--transition-step': '200ms',
-               '--delay': '0s',
-               '--percent-to-deg': '3.6deg',
-               'transform': 'translateZ(0)',
+               "--circle-size": "100px",
+               "--circumference": `${circumference}px`,
+               "--percent-to-px": `${percentPx}px`,
+               "--gap-percent": "5",
+               "--offset-factor": "0",
+               "--transition-length": "1s",
+               "--transition-step": "200ms",
+               "--delay": "0s",
+               "--percent-to-deg": "3.6deg",
+               transform: "translateZ(0)",
             } as React.CSSProperties
          }
       >
@@ -59,8 +59,8 @@ export default function GaugeCircle({
                      stroke: gaugeSecondaryColor,
                      strokeDasharray: `${(90 - currentPercent) * percentPx}px ${circumference}px`,
                      transform: `rotate(calc(1turn - 90deg - (5 * 3.6deg * (1 - 0)))) scaleY(-1)`,
-                     transition: 'all 1s ease 0s',
-                     transformOrigin: '50px 50px',
+                     transition: "all 1s ease 0s",
+                     transformOrigin: "50px 50px",
                   }}
                />
             )}
@@ -76,18 +76,18 @@ export default function GaugeCircle({
                style={{
                   stroke: gaugePrimaryColor,
                   strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,
-                  transition: '1s ease 0s, stroke 1s ease 0s',
-                  transitionProperty: 'stroke-dasharray,transform',
-                  transform: 'rotate(calc(-90deg + 5 * 0 * 3.6deg))',
-                  transformOrigin: '50px 50px',
+                  transition: "1s ease 0s, stroke 1s ease 0s",
+                  transitionProperty: "stroke-dasharray,transform",
+                  transform: "rotate(calc(-90deg + 5 * 0 * 3.6deg))",
+                  transformOrigin: "50px 50px",
                }}
             />
          </svg>
          <span
             className="animate-in fade-in absolute inset-0 m-auto size-fit"
             style={{
-               animationDelay: '0s',
-               transitionDuration: '1s',
+               animationDelay: "0s",
+               transitionDuration: "1s",
             }}
          >
             {Math.round(currentPercent)}
diff --git a/apps/web/registry/miami/ui/globe-grid.tsx b/apps/web/registry/miami/ui/globe-grid.tsx
index 1d34ab83..44ebc3e2 100644
--- a/apps/web/registry/miami/ui/globe-grid.tsx
+++ b/apps/web/registry/miami/ui/globe-grid.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { ny } from '~/lib/utils'
+import type * as React from "react"
+import { ny } from "~/lib/utils"
 
 interface GlobeGridProps {
    fullGlobe?: boolean
@@ -10,18 +10,25 @@ interface GlobeGridProps {
 
 export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
    return (
-      <div className={ny('relative flex min-h-[350px] w-full items-center justify-center overflow-hidden', className)}>
+      <div
+         className={ny(
+            "relative flex min-h-[350px] w-full items-center justify-center overflow-hidden",
+            className,
+         )}
+      >
          <section
             className="relative w-full max-w-[600px]"
-            style={{
-               '--sm-grid-columns': '6',
-               '--md-grid-columns': '6',
-               '--sm-grid-rows': fullGlobe ? '12' : '6',
-               '--md-grid-rows': fullGlobe ? '12' : '6',
-               '--grid-columns': 'var(--sm-grid-columns)',
-               '--grid-rows': 'var(--sm-grid-rows)',
-               'aspectRatio': fullGlobe ? '1/1' : '2/1',
-            } as React.CSSProperties}
+            style={
+               {
+                  "--sm-grid-columns": "6",
+                  "--md-grid-columns": "6",
+                  "--sm-grid-rows": fullGlobe ? "12" : "6",
+                  "--md-grid-rows": fullGlobe ? "12" : "6",
+                  "--grid-columns": "var(--sm-grid-columns)",
+                  "--grid-rows": "var(--sm-grid-rows)",
+                  aspectRatio: fullGlobe ? "1/1" : "2/1",
+               } as React.CSSProperties
+            }
          >
             <style jsx>
                {`
@@ -39,10 +46,10 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                   height="100%"
                   style={{
                      transform: fullGlobe
-                        ? 'translateY(0px) scale(1.002)'
-                        : 'translateY(-12.5%) scale(1.002)',
+                        ? "translateY(0px) scale(1.002)"
+                        : "translateY(-12.5%) scale(1.002)",
                   }}
-                  viewBox={fullGlobe ? '-1 -1 802 802' : '-1 -151 802 602'}
+                  viewBox={fullGlobe ? "-1 -1 802 802" : "-1 -151 802 602"}
                   width="100%"
                   className="[--guide-color:theme(colors.border/50%)]"
                >
@@ -54,30 +61,143 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
 
                   <g
                      data-testid="globe-wireframe"
-                     clipPath={fullGlobe ? 'none' : 'url(#half-globe-clip)'}
+                     clipPath={fullGlobe ? "none" : "url(#half-globe-clip)"}
                   >
-                     <circle cx="400" cy="400" fill="var(--ds-background-200)" r="400" />
-                     <path d="M 400 800 A -400 400 0 0 0 400 0" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M 400 800 A -266.667 400 0 0 0 400 0" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M 400 800 A -133.333 400 0 0 0 400 0" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M 400 800 A 0 400 0 0 0 400 0" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M 400 0 A 133.333 400 0 0 0 400 800" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M 400 0 A 266.667 400 0 0 0 400 800" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M 400 0 A 400 400 0 0 0 400 800" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
+                     <circle
+                        cx="400"
+                        cy="400"
+                        fill="var(--ds-background-200)"
+                        r="400"
+                     />
+                     <path
+                        d="M 400 800 A -400 400 0 0 0 400 0"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M 400 800 A -266.667 400 0 0 0 400 0"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M 400 800 A -133.333 400 0 0 0 400 0"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M 400 800 A 0 400 0 0 0 400 0"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M 400 0 A 133.333 400 0 0 0 400 800"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M 400 0 A 266.667 400 0 0 0 400 800"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M 400 0 A 400 400 0 0 0 400 800"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
 
-                     <path d="M178.892,66.667 h442.217" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M101.858,133.333 h596.285" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M53.59,200 h692.82" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M22.876,266.667 h754.247" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M5.595,333.333 h788.811" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                     <path d="M0,400 h800" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
+                     <path
+                        d="M178.892,66.667 h442.217"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M101.858,133.333 h596.285"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M53.59,200 h692.82"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M22.876,266.667 h754.247"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M5.595,333.333 h788.811"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
+                     <path
+                        d="M0,400 h800"
+                        fill="none"
+                        stroke="url(#globe-gradient)"
+                        strokeWidth="1"
+                        vectorEffect="non-scaling-stroke"
+                     />
                      {fullGlobe && (
                         <>
-                           <path d="M5.595,466.667 h788.811" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                           <path d="M22.876,533.333 h754.247" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                           <path d="M53.59,600 h692.82" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                           <path d="M101.858,666.667 h596.285" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
-                           <path d="M178.892,733.333 h442.217" fill="none" stroke="url(#globe-gradient)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
+                           <path
+                              d="M5.595,466.667 h788.811"
+                              fill="none"
+                              stroke="url(#globe-gradient)"
+                              strokeWidth="1"
+                              vectorEffect="non-scaling-stroke"
+                           />
+                           <path
+                              d="M22.876,533.333 h754.247"
+                              fill="none"
+                              stroke="url(#globe-gradient)"
+                              strokeWidth="1"
+                              vectorEffect="non-scaling-stroke"
+                           />
+                           <path
+                              d="M53.59,600 h692.82"
+                              fill="none"
+                              stroke="url(#globe-gradient)"
+                              strokeWidth="1"
+                              vectorEffect="non-scaling-stroke"
+                           />
+                           <path
+                              d="M101.858,666.667 h596.285"
+                              fill="none"
+                              stroke="url(#globe-gradient)"
+                              strokeWidth="1"
+                              vectorEffect="non-scaling-stroke"
+                           />
+                           <path
+                              d="M178.892,733.333 h442.217"
+                              fill="none"
+                              stroke="url(#globe-gradient)"
+                              strokeWidth="1"
+                              vectorEffect="non-scaling-stroke"
+                           />
                         </>
                      )}
                   </g>
@@ -85,7 +205,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                   {/* Original animated paths */}
                   <g id="animated-paths">
                      {/* First animated path */}
-                     <g id="lllldll31" opacity="1" className="[--normal-color:var(--line-color-1)]">
+                     <g
+                        id="lllldll31"
+                        opacity="1"
+                        className="[--normal-color:var(--line-color-1)]"
+                     >
                         <path
                            d="M794.405,333.333 h-131.468M662.937,333.333 h-131.468M531.468,333.333 h-131.468M400,333.333 h-131.468M 268.532 333.333 A -133.333 400 0 0 0 266.667 400M266.667,400 h-133.333M133.333,400 h-133.333"
                            fill="none"
@@ -114,7 +238,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                            >
                               <stop offset="0" stopColor="var(--color)" />
                               <stop offset="0.4" stopColor="var(--color)" />
-                              <stop offset="1" stopColor="var(--color)" stopOpacity="0" />
+                              <stop
+                                 offset="1"
+                                 stopColor="var(--color)"
+                                 stopOpacity="0"
+                              />
                               <animate
                                  attributeName="cx"
                                  dur="5.5s"
@@ -144,7 +272,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                      </g>
 
                      {/* Second animated path */}
-                     <g id="llullldl34" opacity="1" className="[--normal-color:var(--line-color-2)]">
+                     <g
+                        id="llullldl34"
+                        opacity="1"
+                        className="[--normal-color:var(--line-color-2)]"
+                     >
                         <path
                            d="M698.142,133.333 h-99.381M598.762,133.333 h-99.381M 499.381 133.333 A 133.333 400 0 0 0 473.703 66.667M473.703,66.667 h-73.703M400,66.667 h-73.703M326.297,66.667 h-73.703M 252.594 66.667 A -266.667 400 0 0 0 201.238 133.333M201.238,133.333 h-99.381"
                            fill="none"
@@ -173,7 +305,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                            >
                               <stop offset="0" stopColor="var(--color)" />
                               <stop offset="0.4" stopColor="var(--color)" />
-                              <stop offset="1" stopColor="var(--color)" stopOpacity="0" />
+                              <stop
+                                 offset="1"
+                                 stopColor="var(--color)"
+                                 stopOpacity="0"
+                              />
                               <animate
                                  attributeName="cx"
                                  dur="5.5s"
@@ -203,7 +339,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                      </g>
 
                      {/* Third animated path */}
-                     <g id="llldlll35" opacity="1" className="[--normal-color:var(--line-color-1)]">
+                     <g
+                        id="llldlll35"
+                        opacity="1"
+                        className="[--normal-color:var(--line-color-1)]"
+                     >
                         <path
                            d="M621.108,66.667 h-73.703M547.406,66.667 h-73.703M473.703,66.667 h-73.703M 400 133.333 A 0 400 0 0 0 400 66.667M400,133.333 h-99.381M300.619,133.333 h-99.381M201.238,133.333 h-99.381"
                            fill="none"
@@ -232,7 +372,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                            >
                               <stop offset="0" stopColor="var(--color)" />
                               <stop offset="0.4" stopColor="var(--color)" />
-                              <stop offset="1" stopColor="var(--color)" stopOpacity="0" />
+                              <stop
+                                 offset="1"
+                                 stopColor="var(--color)"
+                                 stopOpacity="0"
+                              />
                               <animate
                                  attributeName="cx"
                                  dur="5.5s"
@@ -262,7 +406,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                      </g>
 
                      {/* Fourth animated path */}
-                     <g id="llddllll33" opacity="1" className="[--normal-color:var(--line-color-3)]">
+                     <g
+                        id="llddllll33"
+                        opacity="1"
+                        className="[--normal-color:var(--line-color-3)]"
+                     >
                         <path
                            d="M746.41,200 h-115.47M630.94,200 h-115.47M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M 531.468 333.333 A 133.333 400 0 0 0 525.708 266.667M531.468,333.333 h-131.468M400,333.333 h-131.468M268.532,333.333 h-131.468M137.063,333.333 h-131.468"
                            fill="none"
@@ -291,7 +439,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                            >
                               <stop offset="0" stopColor="var(--color)" />
                               <stop offset="0.4" stopColor="var(--color)" />
-                              <stop offset="1" stopColor="var(--color)" stopOpacity="0" />
+                              <stop
+                                 offset="1"
+                                 stopColor="var(--color)"
+                                 stopOpacity="0"
+                              />
                               <animate
                                  attributeName="cx"
                                  dur="5.5s"
@@ -321,7 +473,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                      </g>
 
                      {/* Fifth animated path */}
-                     <g id="lllddlll34" opacity="1" className="[--normal-color:var(--line-color-2)]">
+                     <g
+                        id="lllddlll34"
+                        opacity="1"
+                        className="[--normal-color:var(--line-color-2)]"
+                     >
                         <path
                            d="M698.142,133.333 h-99.381M598.762,133.333 h-99.381M499.381,133.333 h-99.381M 400 200 A 0 400 0 0 0 400 133.333M 400 266.667 A 0 400 0 0 0 400 200M400,266.667 h-125.708M274.292,266.667 h-125.708M148.584,266.667 h-125.708"
                            fill="none"
@@ -350,7 +506,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                            >
                               <stop offset="0" stopColor="var(--color)" />
                               <stop offset="0.4" stopColor="var(--color)" />
-                              <stop offset="1" stopColor="var(--color)" stopOpacity="0" />
+                              <stop
+                                 offset="1"
+                                 stopColor="var(--color)"
+                                 stopOpacity="0"
+                              />
                               <animate
                                  attributeName="cx"
                                  dur="5.5s"
@@ -380,7 +540,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                      </g>
 
                      {/* Sixth animated path */}
-                     <g id="llullll32" opacity="1" className="[--normal-color:var(--line-color-3)]">
+                     <g
+                        id="llullll32"
+                        opacity="1"
+                        className="[--normal-color:var(--line-color-3)]"
+                     >
                         <path
                            d="M777.124,266.667 h-125.708M651.416,266.667 h-125.708M 525.708 266.667 A 133.333 400 0 0 0 515.47 200M515.47,200 h-115.47M400,200 h-115.47M284.53,200 h-115.47M169.06,200 h-115.47"
                            fill="none"
@@ -409,7 +573,11 @@ export function GlobeGrid({ fullGlobe = false, className }: GlobeGridProps) {
                            >
                               <stop offset="0" stopColor="var(--color)" />
                               <stop offset="0.4" stopColor="var(--color)" />
-                              <stop offset="1" stopColor="var(--color)" stopOpacity="0" />
+                              <stop
+                                 offset="1"
+                                 stopColor="var(--color)"
+                                 stopOpacity="0"
+                              />
                               <animate
                                  attributeName="cx"
                                  dur="5.5s"
diff --git a/apps/web/registry/miami/ui/globe.tsx b/apps/web/registry/miami/ui/globe.tsx
index ec5d61ac..eb48dab3 100644
--- a/apps/web/registry/miami/ui/globe.tsx
+++ b/apps/web/registry/miami/ui/globe.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import type { COBEOptions } from 'cobe'
-import createGlobe from 'cobe'
-import { useCallback, useEffect, useRef } from 'react'
-import { useSpring } from 'react-spring'
-import { ny } from '~/lib/utils'
+import type { COBEOptions } from "cobe"
+import createGlobe from "cobe"
+import { useCallback, useEffect, useRef } from "react"
+import { useSpring } from "react-spring"
+import { ny } from "~/lib/utils"
 
 const GLOBE_CONFIG: COBEOptions = {
    width: 800,
@@ -58,7 +58,7 @@ export default function Globe({
 
    const updatePointerInteraction = (value: any) => {
       pointerInteracting.current = value
-      canvasRef.current!.style.cursor = value ? 'grabbing' : 'grab'
+      canvasRef.current!.style.cursor = value ? "grabbing" : "grab"
    }
 
    const updateMovement = (clientX: any) => {
@@ -71,8 +71,7 @@ export default function Globe({
 
    const onRender = useCallback(
       (state: Record<string, any>) => {
-         if (!pointerInteracting.current)
-            phi += 0.005
+         if (!pointerInteracting.current) phi += 0.005
          state.phi = phi + r.get()
          state.width = width * 2
          state.height = width * 2
@@ -81,12 +80,11 @@ export default function Globe({
    )
 
    const onResize = () => {
-      if (canvasRef.current)
-         width = canvasRef.current.offsetWidth
+      if (canvasRef.current) width = canvasRef.current.offsetWidth
    }
 
    useEffect(() => {
-      window.addEventListener('resize', onResize)
+      window.addEventListener("resize", onResize)
       onResize()
 
       const globe = createGlobe(canvasRef.current!, {
@@ -96,29 +94,33 @@ export default function Globe({
          onRender,
       })
 
-      setTimeout(() => (canvasRef.current!.style.opacity = '1'))
+      setTimeout(() => (canvasRef.current!.style.opacity = "1"))
       return () => globe.destroy()
    }, [])
 
    return (
       <div
          className={ny(
-            'absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]',
+            "absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]",
             className,
          )}
       >
          <canvas
             className={ny(
-               'size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]',
+               "size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]",
             )}
             ref={canvasRef}
-            onPointerDown={e =>
-               updatePointerInteraction(e.clientX - pointerInteractionMovement.current)}
+            onPointerDown={(e) =>
+               updatePointerInteraction(
+                  e.clientX - pointerInteractionMovement.current,
+               )
+            }
             onPointerUp={() => updatePointerInteraction(null)}
             onPointerOut={() => updatePointerInteraction(null)}
-            onMouseMove={e => updateMovement(e.clientX)}
-            onTouchMove={e =>
-               e.touches[0] && updateMovement(e.touches[0].clientX)}
+            onMouseMove={(e) => updateMovement(e.clientX)}
+            onTouchMove={(e) =>
+               e.touches[0] && updateMovement(e.touches[0].clientX)
+            }
          />
       </div>
    )
diff --git a/apps/web/registry/miami/ui/gradual-spacing.tsx b/apps/web/registry/miami/ui/gradual-spacing.tsx
index 405e3808..5864d172 100644
--- a/apps/web/registry/miami/ui/gradual-spacing.tsx
+++ b/apps/web/registry/miami/ui/gradual-spacing.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import type { Variants } from 'framer-motion'
-import { AnimatePresence, motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import type { Variants } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface GradualSpacingProps {
    text: string
@@ -25,7 +25,7 @@ export default function GradualSpacing({
    return (
       <div className="flex justify-center space-x-1">
          <AnimatePresence>
-            {text.split('').map((char, i) => (
+            {text.split("").map((char, i) => (
                <motion.h1
                   key={i}
                   initial="hidden"
@@ -33,9 +33,9 @@ export default function GradualSpacing({
                   exit="hidden"
                   variants={framerProps}
                   transition={{ duration, delay: i * delayMultiple }}
-                  className={ny('drop-shadow-sm ', className)}
+                  className={ny("drop-shadow-sm ", className)}
                >
-                  {char === ' ' ? <span>&nbsp;</span> : char}
+                  {char === " " ? <span>&nbsp;</span> : char}
                </motion.h1>
             ))}
          </AnimatePresence>
diff --git a/apps/web/registry/miami/ui/grid-layout.tsx b/apps/web/registry/miami/ui/grid-layout.tsx
index e18dc5b7..3ce42d23 100644
--- a/apps/web/registry/miami/ui/grid-layout.tsx
+++ b/apps/web/registry/miami/ui/grid-layout.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { ny } from '~/lib/utils'
+import type * as React from "react"
+import { ny } from "~/lib/utils"
 
 interface CrosshairConfig {
    topLeft?: boolean
@@ -15,7 +15,7 @@ interface GridLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
    crosshairs?: CrosshairConfig
    gridLines?: boolean
    columns?: 8 | 12 | 16
-   lineVariant?: 'all' | 'vertical' | 'horizontal' | 'center' | 'none'
+   lineVariant?: "all" | "vertical" | "horizontal" | "center" | "none"
 }
 
 function CrosshairIcon({ className }: { className?: string }) {
@@ -43,18 +43,18 @@ export function GridLayout({
    crosshairs,
    gridLines = true,
    columns = 16,
-   lineVariant = 'all',
+   lineVariant = "all",
    className,
    ...props
 }: GridLayoutProps) {
    return (
       <div
          className={ny(
-            'relative grid w-full gap-0',
-            gridLines && 'border-grid-line border',
-            columns === 16 && 'grid-cols-grid-16',
-            columns === 12 && 'grid-cols-grid-12',
-            columns === 8 && 'grid-cols-grid-8',
+            "relative grid w-full gap-0",
+            gridLines && "border-grid-line border",
+            columns === 16 && "grid-cols-grid-16",
+            columns === 12 && "grid-cols-grid-12",
+            columns === 8 && "grid-cols-grid-8",
             className,
          )}
          {...props}
@@ -62,44 +62,44 @@ export function GridLayout({
          {gridLines && (
             <div className="absolute inset-0 z-0">
                {/* Vertikale Linien */}
-               {(lineVariant === 'all' || lineVariant === 'vertical' || lineVariant === 'center') && (
+               {(lineVariant === "all" ||
+                  lineVariant === "vertical" ||
+                  lineVariant === "center") && (
                   <div className="absolute inset-0 flex justify-center">
-                     {lineVariant === 'center'
-                        ? (
-                              <div className="border-grid-line h-full w-px border-r" />
-                           )
-                        : (
+                     {lineVariant === "center" ? (
+                        <div className="border-grid-line h-full w-px border-r" />
+                     ) : (
+                        <div
+                           className={ny(
+                              "grid size-full",
+                              columns === 16 && "grid-cols-grid-16",
+                              columns === 12 && "grid-cols-grid-12",
+                              columns === 8 && "grid-cols-grid-8",
+                           )}
+                        >
+                           {Array.from({ length: columns }).map((_, i) => (
                               <div
+                                 key={i}
                                  className={ny(
-                                    'grid size-full',
-                                    columns === 16 && 'grid-cols-grid-16',
-                                    columns === 12 && 'grid-cols-grid-12',
-                                    columns === 8 && 'grid-cols-grid-8',
+                                    "border-grid-line border-r",
+                                    i === 0 && "border-l",
                                  )}
-                              >
-                                 {Array.from({ length: columns }).map((_, i) => (
-                                    <div
-                                       key={i}
-                                       className={ny(
-                                          'border-grid-line border-r',
-                                          i === 0 && 'border-l',
-                                       )}
-                                    />
-                                 ))}
-                              </div>
-                           )}
+                              />
+                           ))}
+                        </div>
+                     )}
                   </div>
                )}
 
                {/* Horizontale Linien */}
-               {(lineVariant === 'all' || lineVariant === 'horizontal') && (
+               {(lineVariant === "all" || lineVariant === "horizontal") && (
                   <div className="absolute inset-0 grid grid-rows-[repeat(16,1fr)]">
                      {Array.from({ length: 17 }).map((_, i) => (
                         <div
                            key={i}
                            className={ny(
-                              'border-grid-line border-t',
-                              i === 16 && 'border-b',
+                              "border-grid-line border-t",
+                              i === 16 && "border-b",
                            )}
                         />
                      ))}
diff --git a/apps/web/registry/miami/ui/grid-pattern.tsx b/apps/web/registry/miami/ui/grid-pattern.tsx
index e70aa593..9f6bc980 100644
--- a/apps/web/registry/miami/ui/grid-pattern.tsx
+++ b/apps/web/registry/miami/ui/grid-pattern.tsx
@@ -1,15 +1,16 @@
-import { useId } from 'react'
-import { ny } from '~/lib/utils'
+import { useId } from "react"
 
-interface GridPatternProps {
-   width?: any
-   height?: any
-   x?: any
-   y?: any
+import { ny } from "~/registry/miami/lib/utils"
+
+interface GridPatternProps extends React.SVGProps<SVGSVGElement> {
+   width?: number
+   height?: number
+   x?: number
+   y?: number
    squares?: Array<[x: number, y: number]>
-   strokeDasharray?: any
+   strokeDasharray?: string
    className?: string
-   [key: string]: any
+   [key: string]: unknown
 }
 
 export function GridPattern({
@@ -17,7 +18,7 @@ export function GridPattern({
    height = 40,
    x = -1,
    y = -1,
-   strokeDasharray = 0,
+   strokeDasharray = "0",
    squares,
    className,
    ...props
@@ -28,7 +29,7 @@ export function GridPattern({
       <svg
          aria-hidden="true"
          className={ny(
-            'pointer-events-none absolute inset-0 size-full fill-gray-400/30 stroke-gray-400/30',
+            "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
             className,
          )}
          {...props}
@@ -49,7 +50,12 @@ export function GridPattern({
                />
             </pattern>
          </defs>
-         <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+         <rect
+            width="100%"
+            height="100%"
+            strokeWidth={0}
+            fill={`url(#${id})`}
+         />
          {squares && (
             <svg x={x} y={y} className="overflow-visible">
                {squares.map(([x, y]) => (
@@ -67,5 +73,3 @@ export function GridPattern({
       </svg>
    )
 }
-
-export default GridPattern
diff --git a/apps/web/registry/miami/ui/hero-video-dialog.tsx b/apps/web/registry/miami/ui/hero-video-dialog.tsx
index db97f8d1..497cdb4d 100644
--- a/apps/web/registry/miami/ui/hero-video-dialog.tsx
+++ b/apps/web/registry/miami/ui/hero-video-dialog.tsx
@@ -1,20 +1,20 @@
-'use client'
+"use client"
 
-import { useState } from 'react'
-import { AnimatePresence, motion } from 'framer-motion'
-import { Play, XIcon } from 'lucide-react'
+import { AnimatePresence, motion } from "framer-motion"
+import { Play, XIcon } from "lucide-react"
+import { useState } from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 type AnimationStyle =
-   | 'from-bottom'
-   | 'from-center'
-   | 'from-top'
-   | 'from-left'
-   | 'from-right'
-   | 'fade'
-   | 'top-in-bottom-out'
-   | 'left-in-right-out'
+   | "from-bottom"
+   | "from-center"
+   | "from-top"
+   | "from-left"
+   | "from-right"
+   | "fade"
+   | "top-in-bottom-out"
+   | "left-in-right-out"
 
 interface HeroVideoProps {
    animationStyle?: AnimationStyle
@@ -25,60 +25,60 @@ interface HeroVideoProps {
 }
 
 const animationVariants = {
-   'from-bottom': {
-      initial: { y: '100%', opacity: 0 },
+   "from-bottom": {
+      initial: { y: "100%", opacity: 0 },
       animate: { y: 0, opacity: 1 },
-      exit: { y: '100%', opacity: 0 },
+      exit: { y: "100%", opacity: 0 },
    },
-   'from-center': {
+   "from-center": {
       initial: { scale: 0.5, opacity: 0 },
       animate: { scale: 1, opacity: 1 },
       exit: { scale: 0.5, opacity: 0 },
    },
-   'from-top': {
-      initial: { y: '-100%', opacity: 0 },
+   "from-top": {
+      initial: { y: "-100%", opacity: 0 },
       animate: { y: 0, opacity: 1 },
-      exit: { y: '-100%', opacity: 0 },
+      exit: { y: "-100%", opacity: 0 },
    },
-   'from-left': {
-      initial: { x: '-100%', opacity: 0 },
+   "from-left": {
+      initial: { x: "-100%", opacity: 0 },
       animate: { x: 0, opacity: 1 },
-      exit: { x: '-100%', opacity: 0 },
+      exit: { x: "-100%", opacity: 0 },
    },
-   'from-right': {
-      initial: { x: '100%', opacity: 0 },
+   "from-right": {
+      initial: { x: "100%", opacity: 0 },
       animate: { x: 0, opacity: 1 },
-      exit: { x: '100%', opacity: 0 },
+      exit: { x: "100%", opacity: 0 },
    },
-   'fade': {
+   fade: {
       initial: { opacity: 0 },
       animate: { opacity: 1 },
       exit: { opacity: 0 },
    },
-   'top-in-bottom-out': {
-      initial: { y: '-100%', opacity: 0 },
+   "top-in-bottom-out": {
+      initial: { y: "-100%", opacity: 0 },
       animate: { y: 0, opacity: 1 },
-      exit: { y: '100%', opacity: 0 },
+      exit: { y: "100%", opacity: 0 },
    },
-   'left-in-right-out': {
-      initial: { x: '-100%', opacity: 0 },
+   "left-in-right-out": {
+      initial: { x: "-100%", opacity: 0 },
       animate: { x: 0, opacity: 1 },
-      exit: { x: '100%', opacity: 0 },
+      exit: { x: "100%", opacity: 0 },
    },
 }
 
 export default function HeroVideoDialog({
-   animationStyle = 'from-center',
+   animationStyle = "from-center",
    videoSrc,
    thumbnailSrc,
-   thumbnailAlt = 'Video thumbnail',
+   thumbnailAlt = "Video thumbnail",
    className,
 }: HeroVideoProps) {
    const [isVideoOpen, setIsVideoOpen] = useState(false)
    const selectedAnimation = animationVariants[animationStyle]
 
    return (
-      <div className={ny('relative', className)}>
+      <div className={ny("relative", className)}>
          <div
             className="group relative cursor-pointer"
             onClick={() => setIsVideoOpen(true)}
@@ -92,14 +92,12 @@ export default function HeroVideoDialog({
             />
             <div className="absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100">
                <div className="bg-primary/10 flex size-28 items-center justify-center rounded-full backdrop-blur-md">
-                  <div
-                     className="from-primary/30 to-primary relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]"
-                  >
+                  <div className="from-primary/30 to-primary relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]">
                      <Play
                         className="size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105"
                         style={{
                            filter:
-                    'drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))',
+                              "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))",
                         }}
                      />
                   </div>
@@ -117,7 +115,11 @@ export default function HeroVideoDialog({
                >
                   <motion.div
                      {...selectedAnimation}
-                     transition={{ type: 'spring', damping: 30, stiffness: 300 }}
+                     transition={{
+                        type: "spring",
+                        damping: 30,
+                        stiffness: 300,
+                     }}
                      className="relative mx-4 aspect-video w-full max-w-4xl md:mx-0"
                   >
                      <motion.button className="absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black">
@@ -129,8 +131,7 @@ export default function HeroVideoDialog({
                            className="size-full rounded-2xl"
                            allowFullScreen
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                        >
-                        </iframe>
+                        ></iframe>
                      </div>
                   </motion.div>
                </motion.div>
diff --git a/apps/web/registry/miami/ui/hero-video.tsx b/apps/web/registry/miami/ui/hero-video.tsx
index 7ac7e220..a5e65406 100644
--- a/apps/web/registry/miami/ui/hero-video.tsx
+++ b/apps/web/registry/miami/ui/hero-video.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { Dialog, Transition } from '@headlessui/react'
-import { X } from 'lucide-react'
-import React, { Fragment, useContext, useState } from 'react'
-import { ny } from '~/lib/utils'
+import { Dialog, Transition } from "@headlessui/react"
+import { X } from "lucide-react"
+import React, { Fragment, useContext, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface HeroVideoProps {
    children?: React.ReactNode
@@ -29,7 +29,7 @@ export function HeroVideoAction({
    const context = useContext(HeroVideoContext)
 
    if (!context)
-      throw new Error('HeroVideoAction must be used within a HeroVideo')
+      throw new Error("HeroVideoAction must be used within a HeroVideo")
 
    const { openModal } = context
 
@@ -45,7 +45,7 @@ export function HeroVideoAction({
    )
 }
 
-function HeroVideo({ children, image, title = 'Demo' }: HeroVideoProps) {
+function HeroVideo({ children, image, title = "Demo" }: HeroVideoProps) {
    const [isOpen, setIsOpen] = useState(false)
 
    function closeModal() {
@@ -62,8 +62,7 @@ function HeroVideo({ children, image, title = 'Demo' }: HeroVideoProps) {
 
    React.Children.forEach(children, (child) => {
       if (React.isValidElement(child)) {
-         if (child.type === HeroVideoAction)
-            actionChild = child
+         if (child.type === HeroVideoAction) actionChild = child
          else otherChildren.push(child)
       }
    })
@@ -71,7 +70,7 @@ function HeroVideo({ children, image, title = 'Demo' }: HeroVideoProps) {
    return (
       <HeroVideoContext.Provider value={{ openModal, closeModal }}>
          <div
-            className={ny('absolute inset-px flex overflow-hidden rounded-2xl')}
+            className={ny("absolute inset-px flex overflow-hidden rounded-2xl")}
          >
             {actionChild}
             <img
diff --git a/apps/web/registry/miami/ui/hover-card.tsx b/apps/web/registry/miami/ui/hover-card.tsx
index ae0935f9..fdc84543 100644
--- a/apps/web/registry/miami/ui/hover-card.tsx
+++ b/apps/web/registry/miami/ui/hover-card.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const HoverCard = HoverCardPrimitive.Root
 
@@ -12,13 +12,13 @@ const HoverCardTrigger = HoverCardPrimitive.Trigger
 const HoverCardContent = React.forwardRef<
    React.ElementRef<typeof HoverCardPrimitive.Content>,
    React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
    <HoverCardPrimitive.Content
       ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={ny(
-         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none',
+         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none",
          className,
       )}
       {...props}
diff --git a/apps/web/registry/miami/ui/hyper-text.tsx b/apps/web/registry/miami/ui/hyper-text.tsx
index efcf02ce..281fb593 100644
--- a/apps/web/registry/miami/ui/hyper-text.tsx
+++ b/apps/web/registry/miami/ui/hyper-text.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import { useEffect, useRef, useState } from 'react'
-import type { Variants } from 'framer-motion'
-import { AnimatePresence, motion } from 'framer-motion'
+import type { Variants } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
+import { useEffect, useRef, useState } from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface HyperTextProps {
    text: string
@@ -14,7 +14,7 @@ interface HyperTextProps {
    animateOnLoad?: boolean
 }
 
-const alphabets = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
+const alphabets = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")
 
 const getRandomInt = (max: number) => Math.floor(Math.random() * max)
 
@@ -29,7 +29,7 @@ export default function HyperText({
    className,
    animateOnLoad = true,
 }: HyperTextProps) {
-   const [displayText, setDisplayText] = useState(text.split(''))
+   const [displayText, setDisplayText] = useState(text.split(""))
    const [trigger, setTrigger] = useState(false)
    const interations = useRef(0)
    const isFirstRender = useRef(true)
@@ -48,18 +48,17 @@ export default function HyperText({
                return
             }
             if (interations.current < text.length) {
-               setDisplayText(t =>
+               setDisplayText((t) =>
                   t.map((l, i) =>
-                     l === ' '
+                     l === " "
                         ? l
                         : i <= interations.current
-                           ? text[i]
-                           : alphabets[getRandomInt(26)],
+                          ? text[i]
+                          : alphabets[getRandomInt(26)],
                   ),
                )
                interations.current = interations.current + 0.1
-            }
-            else {
+            } else {
                setTrigger(false)
                clearInterval(interval)
             }
@@ -79,7 +78,11 @@ export default function HyperText({
             {displayText.map((letter, i) => (
                <motion.h1
                   key={i}
-                  className={ny('font-mono', letter === ' ' ? 'w-3' : '', className)}
+                  className={ny(
+                     "font-mono",
+                     letter === " " ? "w-3" : "",
+                     className,
+                  )}
                   {...framerProps}
                >
                   {letter.toUpperCase()}
diff --git a/apps/web/registry/miami/ui/icon-cloud.tsx b/apps/web/registry/miami/ui/icon-cloud.tsx
index a2f32065..52111738 100644
--- a/apps/web/registry/miami/ui/icon-cloud.tsx
+++ b/apps/web/registry/miami/ui/icon-cloud.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client"
 
-import { useTheme } from 'next-themes'
-import { useEffect, useMemo, useState } from 'react'
-import type { ICloud, SimpleIcon } from 'react-icon-cloud'
-import { Cloud, fetchSimpleIcons, renderSimpleIcon } from 'react-icon-cloud'
+import { useTheme } from "next-themes"
+import { useEffect, useMemo, useState } from "react"
+import type { ICloud, SimpleIcon } from "react-icon-cloud"
+import { Cloud, fetchSimpleIcons, renderSimpleIcon } from "react-icon-cloud"
 
-export const cloudProps: Omit<ICloud, 'children'> = {
+export const cloudProps: Omit<ICloud, "children"> = {
    containerProps: {
       style: {
-         display: 'flex',
-         justifyContent: 'center',
-         alignItems: 'center',
-         width: '100%',
+         display: "flex",
+         justifyContent: "center",
+         alignItems: "center",
+         width: "100%",
          paddingTop: 40,
       },
    },
@@ -20,12 +20,12 @@ export const cloudProps: Omit<ICloud, 'children'> = {
       depth: 1,
       wheelZoom: false,
       imageScale: 2,
-      activeCursor: 'default',
-      tooltip: 'native',
+      activeCursor: "default",
+      tooltip: "native",
       initial: [0.1, -0.1],
       clickToFront: 500,
       tooltipDelay: 0,
-      outlineColour: '#0000',
+      outlineColour: "#0000",
       maxSpeed: 0.04,
       minSpeed: 0.02,
       // dragControl: false,
@@ -33,9 +33,9 @@ export const cloudProps: Omit<ICloud, 'children'> = {
 }
 
 export function renderCustomIcon(icon: SimpleIcon, theme: string) {
-   const bgHex = theme === 'light' ? '#f3f2ef' : '#080510'
-   const fallbackHex = theme === 'light' ? '#6e6e73' : '#ffffff'
-   const minContrastRatio = theme === 'dark' ? 2 : 1.2
+   const bgHex = theme === "light" ? "#f3f2ef" : "#080510"
+   const fallbackHex = theme === "light" ? "#6e6e73" : "#ffffff"
+   const minContrastRatio = theme === "dark" ? 2 : 1.2
 
    return renderSimpleIcon({
       icon,
@@ -67,16 +67,15 @@ export default function IconCloud({ iconSlugs }: DynamicCloudProps) {
    }, [iconSlugs])
 
    const renderedIcons = useMemo(() => {
-      if (!data)
-         return null
+      if (!data) return null
 
-      return Object.values(data.simpleIcons).map(icon =>
-         renderCustomIcon(icon, theme || 'light'),
+      return Object.values(data.simpleIcons).map((icon) =>
+         renderCustomIcon(icon, theme || "light"),
       )
    }, [data, theme])
 
    return (
-   // @ts-expect-error is fine
+      // @ts-expect-error is fine
       <Cloud {...cloudProps}>
          <>{renderedIcons}</>
       </Cloud>
diff --git a/apps/web/registry/miami/ui/input-otp.tsx b/apps/web/registry/miami/ui/input-otp.tsx
index 84e6519e..0c3e4e37 100644
--- a/apps/web/registry/miami/ui/input-otp.tsx
+++ b/apps/web/registry/miami/ui/input-otp.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { DashIcon } from '@radix-ui/react-icons'
-import { OTPInput, OTPInputContext } from 'input-otp'
+import { DashIcon } from "@radix-ui/react-icons"
+import { OTPInput, OTPInputContext } from "input-otp"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const InputOTP = React.forwardRef<
    React.ElementRef<typeof OTPInput>,
@@ -13,26 +13,26 @@ const InputOTP = React.forwardRef<
    <OTPInput
       ref={ref}
       containerClassName={ny(
-         'flex items-center gap-2 has-[:disabled]:opacity-50',
+         "flex items-center gap-2 has-[:disabled]:opacity-50",
          containerClassName,
       )}
-      className={ny('disabled:cursor-not-allowed', className)}
+      className={ny("disabled:cursor-not-allowed", className)}
       {...props}
    />
 ))
-InputOTP.displayName = 'InputOTP'
+InputOTP.displayName = "InputOTP"
 
 const InputOTPGroup = React.forwardRef<
-   React.ElementRef<'div'>,
-   React.ComponentPropsWithoutRef<'div'>
+   React.ElementRef<"div">,
+   React.ComponentPropsWithoutRef<"div">
 >(({ className, ...props }, ref) => (
-   <div ref={ref} className={ny('flex items-center', className)} {...props} />
+   <div ref={ref} className={ny("flex items-center", className)} {...props} />
 ))
-InputOTPGroup.displayName = 'InputOTPGroup'
+InputOTPGroup.displayName = "InputOTPGroup"
 
 const InputOTPSlot = React.forwardRef<
-   React.ElementRef<'div'>,
-  React.ComponentPropsWithoutRef<'div'> & { index: number }
+   React.ElementRef<"div">,
+   React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
    const inputOTPContext = React.useContext(OTPInputContext)
    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
@@ -41,8 +41,8 @@ const InputOTPSlot = React.forwardRef<
       <div
          ref={ref}
          className={ny(
-            'border-input relative flex size-9 items-center justify-center border-y border-r text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
-            isActive && 'ring-ring z-10 ring-1',
+            "border-input relative flex size-9 items-center justify-center border-y border-r text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+            isActive && "ring-ring z-10 ring-1",
             className,
          )}
          {...props}
@@ -56,16 +56,16 @@ const InputOTPSlot = React.forwardRef<
       </div>
    )
 })
-InputOTPSlot.displayName = 'InputOTPSlot'
+InputOTPSlot.displayName = "InputOTPSlot"
 
 const InputOTPSeparator = React.forwardRef<
-   React.ElementRef<'div'>,
-   React.ComponentPropsWithoutRef<'div'>
+   React.ElementRef<"div">,
+   React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
    <div ref={ref} role="separator" {...props}>
       <DashIcon />
    </div>
 ))
-InputOTPSeparator.displayName = 'InputOTPSeparator'
+InputOTPSeparator.displayName = "InputOTPSeparator"
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/apps/web/registry/miami/ui/input-phone.tsx b/apps/web/registry/miami/ui/input-phone.tsx
index 9c837506..43221718 100644
--- a/apps/web/registry/miami/ui/input-phone.tsx
+++ b/apps/web/registry/miami/ui/input-phone.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
-import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons'
-import * as RPNInput from 'react-phone-number-input'
-import flags from 'react-phone-number-input/flags'
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
+import * as React from "react"
+import * as RPNInput from "react-phone-number-input"
+import flags from "react-phone-number-input/flags"
 
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Command,
    CommandEmpty,
@@ -12,29 +12,29 @@ import {
    CommandInput,
    CommandItem,
    CommandList,
-} from '~/registry/miami/ui/command'
-import type { InputProps } from '~/registry/miami/ui/input'
-import { Input } from '~/registry/miami/ui/input'
+} from "~/registry/miami/ui/command"
+import type { InputProps } from "~/registry/miami/ui/input"
+import { Input } from "~/registry/miami/ui/input"
 import {
    Popover,
    PopoverContent,
    PopoverTrigger,
-} from '~/registry/miami/ui/popover'
+} from "~/registry/miami/ui/popover"
 
 type InputPhoneProps = Omit<
    React.InputHTMLAttributes<HTMLInputElement>,
-  'onChange' | 'value'
+   "onChange" | "value"
 > &
-Omit<RPNInput.Props<typeof RPNInput.default>, 'onChange'> & {
-   onChange?: (value: RPNInput.Value) => void
-}
+   Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
+      onChange?: (value: RPNInput.Value) => void
+   }
 
-const InputPhone: React.ForwardRefExoticComponent<InputPhoneProps>
-   = React.forwardRef<React.ElementRef<typeof RPNInput.default>, InputPhoneProps>(
+const InputPhone: React.ForwardRefExoticComponent<InputPhoneProps> =
+   React.forwardRef<React.ElementRef<typeof RPNInput.default>, InputPhoneProps>(
       ({ className, onChange, ...props }, ref) => (
          <RPNInput.default
             ref={ref}
-            className={ny('flex', className)}
+            className={ny("flex", className)}
             flagComponent={FlagComponent}
             countrySelectComponent={CountrySelect}
             inputComponent={InputComponent}
@@ -47,25 +47,28 @@ const InputPhone: React.ForwardRefExoticComponent<InputPhoneProps>
              *
              * @param {E164Number | undefined} value - The entered value
              */
-            onChange={value => onChange?.(value as RPNInput.Value)}
+            onChange={(value) => onChange?.(value as RPNInput.Value)}
             {...props}
          />
       ),
    )
-InputPhone.displayName = 'InputPhone'
+InputPhone.displayName = "InputPhone"
 
 const InputComponent = React.forwardRef<HTMLInputElement, InputProps>(
    ({ className, ...props }, ref) => (
       <Input
-         className={ny('rounded-e-lg rounded-s-none', className)}
+         className={ny("rounded-e-lg rounded-s-none", className)}
          {...props}
          ref={ref}
       />
    ),
 )
-InputComponent.displayName = 'InputComponent'
+InputComponent.displayName = "InputComponent"
 
-interface CountrySelectOption { label: string, value: RPNInput.Country }
+interface CountrySelectOption {
+   label: string
+   value: RPNInput.Country
+}
 
 interface CountrySelectProps {
    disabled?: boolean
@@ -91,14 +94,14 @@ function CountrySelect({
             <Button
                type="button"
                variant="outline"
-               className={ny('flex gap-1 rounded-e-none rounded-s-lg px-3')}
+               className={ny("flex gap-1 rounded-e-none rounded-s-lg px-3")}
                disabled={disabled}
             >
                <FlagComponent country={value} countryName={value} />
                <CaretSortIcon
                   className={ny(
-                     '-mr-2 size-4 opacity-50',
-                     disabled ? 'hidden' : 'opacity-100',
+                     "-mr-2 size-4 opacity-50",
+                     disabled ? "hidden" : "opacity-100",
                   )}
                />
             </Button>
@@ -109,17 +112,19 @@ function CountrySelect({
                   <CommandInput placeholder="Search country..." />
                   <CommandEmpty>No country found.</CommandEmpty>
                   <CommandGroup>
-                     {options.map(option => (
+                     {options.map((option) => (
                         <CommandItem
                            className="gap-2"
-                           key={option.value || 'ZZ'}
+                           key={option.value || "ZZ"}
                            onSelect={() => handleSelect(option.value)}
                         >
                            <FlagComponent
                               country={option.value}
                               countryName={option.label}
                            />
-                           <span className="flex-1 text-sm">{option.label}</span>
+                           <span className="flex-1 text-sm">
+                              {option.label}
+                           </span>
                            {option.value && (
                               <span className="text-foreground/50 text-sm">
                                  {`+${RPNInput.getCountryCallingCode(option.value)}`}
@@ -127,8 +132,10 @@ function CountrySelect({
                            )}
                            <CheckIcon
                               className={ny(
-                                 'ml-auto size-4',
-                                 option.value === value ? 'opacity-100' : 'opacity-0',
+                                 "ml-auto size-4",
+                                 option.value === value
+                                    ? "opacity-100"
+                                    : "opacity-0",
                               )}
                            />
                         </CommandItem>
@@ -150,6 +157,6 @@ function FlagComponent({ country, countryName }: RPNInput.FlagProps) {
       </span>
    )
 }
-FlagComponent.displayName = 'FlagComponent'
+FlagComponent.displayName = "FlagComponent"
 
 export { InputPhone }
diff --git a/apps/web/registry/miami/ui/input.tsx b/apps/web/registry/miami/ui/input.tsx
index 267517b6..1fce1f12 100644
--- a/apps/web/registry/miami/ui/input.tsx
+++ b/apps/web/registry/miami/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 export interface InputProps
    extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
          <input
             type={type}
             className={ny(
-               'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+               "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
                className,
             )}
             ref={ref}
@@ -20,6 +20,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       )
    },
 )
-Input.displayName = 'Input'
+Input.displayName = "Input"
 
 export { Input }
diff --git a/apps/web/registry/miami/ui/interactive-grid-pattern.tsx b/apps/web/registry/miami/ui/interactive-grid-pattern.tsx
new file mode 100644
index 00000000..a0013900
--- /dev/null
+++ b/apps/web/registry/miami/ui/interactive-grid-pattern.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import { ny } from "~/registry/miami/lib/utils"
+
+/**
+ * InteractiveGridPattern is a component that renders a grid pattern with interactive squares.
+ *
+ * @param width - The width of each square.
+ * @param height - The height of each square.
+ * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares.
+ * @param className - The class name of the grid.
+ * @param squaresClassName - The class name of the squares.
+ */
+interface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {
+   width?: number
+   height?: number
+   squares?: [number, number] // [horizontal, vertical]
+   className?: string
+   squaresClassName?: string
+}
+
+/**
+ * The InteractiveGridPattern component.
+ *
+ * @see InteractiveGridPatternProps for the props interface.
+ * @returns A React component.
+ */
+export function InteractiveGridPattern({
+   width = 40,
+   height = 40,
+   squares = [24, 24],
+   className,
+   squaresClassName,
+   ...props
+}: InteractiveGridPatternProps) {
+   const [horizontal, vertical] = squares
+   const [hoveredSquare, setHoveredSquare] = useState<number | null>(null)
+
+   return (
+      <svg
+         width={width * horizontal}
+         height={height * vertical}
+         className={ny(
+            "absolute inset-0 h-full w-full border border-gray-400/30",
+            className,
+         )}
+         {...props}
+      >
+         {Array.from({ length: horizontal * vertical }).map((_, index) => {
+            const x = (index % horizontal) * width
+            const y = Math.floor(index / horizontal) * height
+            return (
+               <rect
+                  key={index}
+                  x={x}
+                  y={y}
+                  width={width}
+                  height={height}
+                  className={ny(
+                     "stroke-gray-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000",
+                     hoveredSquare === index
+                        ? "fill-gray-300/30"
+                        : "fill-transparent",
+                     squaresClassName,
+                  )}
+                  onMouseEnter={() => setHoveredSquare(index)}
+                  onMouseLeave={() => setHoveredSquare(null)}
+               />
+            )
+         })}
+      </svg>
+   )
+}
diff --git a/apps/web/registry/miami/ui/iphone-15-pro.tsx b/apps/web/registry/miami/ui/iphone-15-pro.tsx
index 9bc44766..c50fc12b 100644
--- a/apps/web/registry/miami/ui/iphone-15-pro.tsx
+++ b/apps/web/registry/miami/ui/iphone-15-pro.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react'
+import type { SVGProps } from "react"
 
 export interface Iphone15ProProps extends SVGProps<SVGSVGElement> {
    width?: number
diff --git a/apps/web/registry/miami/ui/label.tsx b/apps/web/registry/miami/ui/label.tsx
index 6ba5024c..e2264b75 100644
--- a/apps/web/registry/miami/ui/label.tsx
+++ b/apps/web/registry/miami/ui/label.tsx
@@ -1,19 +1,19 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { type VariantProps, cva } from 'class-variance-authority'
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const labelVariants = cva(
-   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 )
 
 const Label = React.forwardRef<
    React.ElementRef<typeof LabelPrimitive.Root>,
    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-   VariantProps<typeof labelVariants>
+      VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
    <LabelPrimitive.Root
       ref={ref}
diff --git a/apps/web/registry/miami/ui/letter-pullup.tsx b/apps/web/registry/miami/ui/letter-pullup.tsx
index 953047b1..71438582 100644
--- a/apps/web/registry/miami/ui/letter-pullup.tsx
+++ b/apps/web/registry/miami/ui/letter-pullup.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import { motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface LetterPullupProps {
    className?: string
@@ -14,7 +14,7 @@ export default function LetterPullup({
    words,
    delay,
 }: LetterPullupProps) {
-   const letters = words.split('')
+   const letters = words.split("")
 
    const pullupVariant = {
       initial: { y: 100, opacity: 0 },
@@ -37,11 +37,11 @@ export default function LetterPullup({
                animate="animate"
                custom={i}
                className={ny(
-                  'font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-4xl md:leading-[5rem] dark:text-white',
+                  "font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-4xl md:leading-[5rem] dark:text-white",
                   className,
                )}
             >
-               {letter === ' ' ? <span>&nbsp;</span> : letter}
+               {letter === " " ? <span>&nbsp;</span> : letter}
             </motion.h1>
          ))}
       </div>
diff --git a/apps/web/registry/miami/ui/line-shadow-text.tsx b/apps/web/registry/miami/ui/line-shadow-text.tsx
new file mode 100644
index 00000000..618ce70e
--- /dev/null
+++ b/apps/web/registry/miami/ui/line-shadow-text.tsx
@@ -0,0 +1,42 @@
+import { type MotionProps, motion } from "motion/react"
+import { ny } from "~/registry/miami/lib/utils"
+
+interface LineShadowTextProps
+   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,
+      MotionProps {
+   shadowColor?: string
+   as?: React.ElementType
+}
+
+export function LineShadowText({
+   children,
+   shadowColor = "black",
+   className,
+   as: Component = "span",
+   ...props
+}: LineShadowTextProps) {
+   const MotionComponent = motion.create(Component)
+   const content = typeof children === "string" ? children : null
+
+   if (!content) {
+      throw new Error("LineShadowText only accepts string content")
+   }
+
+   return (
+      <MotionComponent
+         style={{ "--shadow-color": shadowColor } as React.CSSProperties}
+         className={ny(
+            "relative z-0 inline-flex",
+            "after:absolute after:left-[0.04em] after:top-[0.04em] after:content-[attr(data-text)]",
+            "after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]",
+            "after:-z-10 after:bg-[length:0.06em_0.06em] after:bg-clip-text after:text-transparent",
+            "after:animate-line-shadow",
+            className,
+         )}
+         data-text={content}
+         {...props}
+      >
+         {content}
+      </MotionComponent>
+   )
+}
diff --git a/apps/web/registry/miami/ui/magic-card.tsx b/apps/web/registry/miami/ui/magic-card.tsx
index 22df9b0d..15ec536d 100644
--- a/apps/web/registry/miami/ui/magic-card.tsx
+++ b/apps/web/registry/miami/ui/magic-card.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import type { CSSProperties, ReactElement, ReactNode } from 'react'
-import { useEffect, useRef, useState } from 'react'
-import { ny } from '~/lib/utils'
+import type { CSSProperties, ReactElement, ReactNode } from "react"
+import { useEffect, useRef, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface MousePosition {
    x: number
@@ -20,10 +20,10 @@ function useMousePosition(): MousePosition {
          setMousePosition({ x: event.clientX, y: event.clientY })
       }
 
-      window.addEventListener('mousemove', handleMouseMove)
+      window.addEventListener("mousemove", handleMouseMove)
 
       return () => {
-         window.removeEventListener('mousemove', handleMouseMove)
+         window.removeEventListener("mousemove", handleMouseMove)
       }
    }, [])
 
@@ -38,24 +38,26 @@ interface MagicContainerProps {
 function MagicContainer({ children, className }: MagicContainerProps) {
    const containerRef = useRef<HTMLDivElement>(null)
    const mousePosition = useMousePosition()
-   const mouse = useRef<{ x: number, y: number }>({ x: 0, y: 0 })
-   const containerSize = useRef<{ w: number, h: number }>({ w: 0, h: 0 })
+   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+   const containerSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })
    const [boxes, setBoxes] = useState<Array<HTMLElement>>([])
 
    useEffect(() => {
       init()
-      containerRef.current
-      && setBoxes(
-         Array.from(containerRef.current.children).map(el => el as HTMLElement),
-      )
+      containerRef.current &&
+         setBoxes(
+            Array.from(containerRef.current.children).map(
+               (el) => el as HTMLElement,
+            ),
+         )
    }, [])
 
    useEffect(() => {
       init()
-      window.addEventListener('resize', init)
+      window.addEventListener("resize", init)
 
       return () => {
-         window.removeEventListener('resize', init)
+         window.removeEventListener("resize", init)
       }
    }, [setBoxes])
 
@@ -81,22 +83,21 @@ function MagicContainer({ children, className }: MagicContainerProps) {
          mouse.current.x = x
          mouse.current.y = y
          boxes.forEach((box) => {
-            const boxX
-          = -(box.getBoundingClientRect().left - rect.left) + mouse.current.x
-            const boxY
-          = -(box.getBoundingClientRect().top - rect.top) + mouse.current.y
-            box.style.setProperty('--mouse-x', `${boxX}px`)
-            box.style.setProperty('--mouse-y', `${boxY}px`)
-
-            if (inside)
-               box.style.setProperty('--opacity', `1`)
-            else box.style.setProperty('--opacity', `0`)
+            const boxX =
+               -(box.getBoundingClientRect().left - rect.left) + mouse.current.x
+            const boxY =
+               -(box.getBoundingClientRect().top - rect.top) + mouse.current.y
+            box.style.setProperty("--mouse-x", `${boxX}px`)
+            box.style.setProperty("--mouse-y", `${boxY}px`)
+
+            if (inside) box.style.setProperty("--opacity", `1`)
+            else box.style.setProperty("--opacity", `0`)
          })
       }
    }
 
    return (
-      <div className={ny('size-full', className)} ref={containerRef}>
+      <div className={ny("size-full", className)} ref={containerRef}>
          {children}
       </div>
    )
@@ -174,7 +175,7 @@ const MagicCard: React.FC<MagicCardProps> = ({
    children,
    size = 600,
    spotlight = true,
-   borderColor = 'hsl(0 0% 98%)',
+   borderColor = "hsl(0 0% 98%)",
    isolated = true,
    ...props
 }) => {
@@ -182,14 +183,14 @@ const MagicCard: React.FC<MagicCardProps> = ({
       <div
          style={
             {
-               '--mask-size': `${size}px`,
-               '--border-color': `${borderColor}`,
+               "--mask-size": `${size}px`,
+               "--border-color": `${borderColor}`,
             } as CSSProperties
          }
          className={ny(
-            'relative z-0 size-full rounded-2xl p-6',
-            'bg-gray-300 dark:bg-gray-700',
-            'bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--border-color),transparent_100%)]',
+            "relative z-0 size-full rounded-2xl p-6",
+            "bg-gray-300 dark:bg-gray-700",
+            "bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--border-color),transparent_100%)]",
             className,
          )}
          {...props}
diff --git a/apps/web/registry/miami/ui/marquee.tsx b/apps/web/registry/miami/ui/marquee.tsx
index 1d5cca57..0a0bc3b1 100644
--- a/apps/web/registry/miami/ui/marquee.tsx
+++ b/apps/web/registry/miami/ui/marquee.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface MarqueeProps {
    className?: string
@@ -23,10 +23,10 @@ export default function Marquee({
       <div
          {...props}
          className={ny(
-            'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]',
+            "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
             {
-               'flex-row': !vertical,
-               'flex-col': vertical,
+               "flex-row": !vertical,
+               "flex-col": vertical,
             },
             className,
          )}
@@ -36,12 +36,16 @@ export default function Marquee({
             .map((_, i) => (
                <div
                   key={i}
-                  className={ny('flex shrink-0 justify-around [gap:var(--gap)]', {
-                     'animate-marquee flex-row': !vertical,
-                     'animate-marquee-vertical flex-col': vertical,
-                     'group-hover:[animation-play-state:paused]': pauseOnHover,
-                     '[animation-direction:reverse]': reverse,
-                  })}
+                  className={ny(
+                     "flex shrink-0 justify-around [gap:var(--gap)]",
+                     {
+                        "animate-marquee flex-row": !vertical,
+                        "animate-marquee-vertical flex-col": vertical,
+                        "group-hover:[animation-play-state:paused]":
+                           pauseOnHover,
+                        "[animation-direction:reverse]": reverse,
+                     },
+                  )}
                >
                   {children}
                </div>
diff --git a/apps/web/registry/miami/ui/menubar.tsx b/apps/web/registry/miami/ui/menubar.tsx
index 31925713..c937546c 100644
--- a/apps/web/registry/miami/ui/menubar.tsx
+++ b/apps/web/registry/miami/ui/menubar.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import * as React from 'react'
 import {
    CheckIcon,
    ChevronRightIcon,
    DotFilledIcon,
-} from '@radix-ui/react-icons'
-import * as MenubarPrimitive from '@radix-ui/react-menubar'
+} from "@radix-ui/react-icons"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const MenubarMenu = MenubarPrimitive.Menu
 
@@ -27,7 +27,7 @@ const Menubar = React.forwardRef<
    <MenubarPrimitive.Root
       ref={ref}
       className={ny(
-         'bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-sm',
+         "bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-sm",
          className,
       )}
       {...props}
@@ -42,7 +42,7 @@ const MenubarTrigger = React.forwardRef<
    <MenubarPrimitive.Trigger
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none',
+         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none",
          className,
       )}
       {...props}
@@ -59,8 +59,8 @@ const MenubarSubTrigger = React.forwardRef<
    <MenubarPrimitive.SubTrigger
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-         inset && 'pl-8',
+         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -78,7 +78,7 @@ const MenubarSubContent = React.forwardRef<
    <MenubarPrimitive.SubContent
       ref={ref}
       className={ny(
-         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
          className,
       )}
       {...props}
@@ -91,7 +91,13 @@ const MenubarContent = React.forwardRef<
    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
 >(
    (
-      { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props },
+      {
+         className,
+         align = "start",
+         alignOffset = -4,
+         sideOffset = 8,
+         ...props
+      },
       ref,
    ) => (
       <MenubarPrimitive.Portal>
@@ -101,7 +107,7 @@ const MenubarContent = React.forwardRef<
             alignOffset={alignOffset}
             sideOffset={sideOffset}
             className={ny(
-               'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md',
+               "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md",
                className,
             )}
             {...props}
@@ -120,8 +126,8 @@ const MenubarItem = React.forwardRef<
    <MenubarPrimitive.Item
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-         inset && 'pl-8',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -136,7 +142,7 @@ const MenubarCheckboxItem = React.forwardRef<
    <MenubarPrimitive.CheckboxItem
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       checked={checked}
@@ -159,7 +165,7 @@ const MenubarRadioItem = React.forwardRef<
    <MenubarPrimitive.RadioItem
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       {...props}
@@ -183,8 +189,8 @@ const MenubarLabel = React.forwardRef<
    <MenubarPrimitive.Label
       ref={ref}
       className={ny(
-         'px-2 py-1.5 text-sm font-semibold',
-         inset && 'pl-8',
+         "px-2 py-1.5 text-sm font-semibold",
+         inset && "pl-8",
          className,
       )}
       {...props}
@@ -198,7 +204,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <MenubarPrimitive.Separator
       ref={ref}
-      className={ny('bg-muted -mx-1 my-1 h-px', className)}
+      className={ny("bg-muted -mx-1 my-1 h-px", className)}
       {...props}
    />
 ))
@@ -211,14 +217,14 @@ function MenubarShortcut({
    return (
       <span
          className={ny(
-            'text-muted-foreground ml-auto text-xs tracking-widest',
+            "text-muted-foreground ml-auto text-xs tracking-widest",
             className,
          )}
          {...props}
       />
    )
 }
-MenubarShortcut.displayname = 'MenubarShortcut'
+MenubarShortcut.displayname = "MenubarShortcut"
 
 export {
    Menubar,
diff --git a/apps/web/registry/miami/ui/meteors.tsx b/apps/web/registry/miami/ui/meteors.tsx
index 014c9e6c..5f6707d3 100644
--- a/apps/web/registry/miami/ui/meteors.tsx
+++ b/apps/web/registry/miami/ui/meteors.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import clsx from 'clsx'
-import { useEffect, useState } from 'react'
+import clsx from "clsx"
+import { useEffect, useState } from "react"
 
 interface MeteorsProps {
    number?: number
@@ -28,7 +28,7 @@ export function Meteors({ number = 20 }: MeteorsProps) {
             <span
                key={idx}
                className={clsx(
-                  'pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]',
+                  "pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]",
                )}
                style={style}
             >
diff --git a/apps/web/registry/miami/ui/morphing-text.tsx b/apps/web/registry/miami/ui/morphing-text.tsx
new file mode 100644
index 00000000..0c3ab40c
--- /dev/null
+++ b/apps/web/registry/miami/ui/morphing-text.tsx
@@ -0,0 +1,145 @@
+"use client"
+
+import { useCallback, useEffect, useRef } from "react"
+import { ny } from "~/registry/miami/lib/utils"
+
+const morphTime = 1.5
+const cooldownTime = 0.5
+
+const useMorphingText = (texts: string[]) => {
+   const textIndexRef = useRef(0)
+   const morphRef = useRef(0)
+   const cooldownRef = useRef(0)
+   const timeRef = useRef(new Date())
+
+   const text1Ref = useRef<HTMLSpanElement>(null)
+   const text2Ref = useRef<HTMLSpanElement>(null)
+
+   const setStyles = useCallback(
+      (fraction: number) => {
+         const [current1, current2] = [text1Ref.current, text2Ref.current]
+         if (!current1 || !current2) return
+
+         current2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`
+         current2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`
+
+         const invertedFraction = 1 - fraction
+         current1.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`
+         current1.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`
+
+         current1.textContent = texts[textIndexRef.current % texts.length]
+         current2.textContent = texts[(textIndexRef.current + 1) % texts.length]
+      },
+      [texts],
+   )
+
+   const doMorph = useCallback(() => {
+      morphRef.current -= cooldownRef.current
+      cooldownRef.current = 0
+
+      let fraction = morphRef.current / morphTime
+
+      if (fraction > 1) {
+         cooldownRef.current = cooldownTime
+         fraction = 1
+      }
+
+      setStyles(fraction)
+
+      if (fraction === 1) {
+         textIndexRef.current++
+      }
+   }, [setStyles])
+
+   const doCooldown = useCallback(() => {
+      morphRef.current = 0
+      const [current1, current2] = [text1Ref.current, text2Ref.current]
+      if (current1 && current2) {
+         current2.style.filter = "none"
+         current2.style.opacity = "100%"
+         current1.style.filter = "none"
+         current1.style.opacity = "0%"
+      }
+   }, [])
+
+   useEffect(() => {
+      let animationFrameId: number
+
+      const animate = () => {
+         animationFrameId = requestAnimationFrame(animate)
+
+         const newTime = new Date()
+         const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000
+         timeRef.current = newTime
+
+         cooldownRef.current -= dt
+
+         if (cooldownRef.current <= 0) doMorph()
+         else doCooldown()
+      }
+
+      animate()
+      return () => {
+         cancelAnimationFrame(animationFrameId)
+      }
+   }, [doMorph, doCooldown])
+
+   return { text1Ref, text2Ref }
+}
+
+interface MorphingTextProps {
+   className?: string
+   texts: string[]
+}
+
+const Texts: React.FC<Pick<MorphingTextProps, "texts">> = ({ texts }) => {
+   const { text1Ref, text2Ref } = useMorphingText(texts)
+   return (
+      <>
+         <span
+            className="absolute inset-x-0 top-0 m-auto inline-block w-full"
+            ref={text1Ref}
+         />
+         <span
+            className="absolute inset-x-0 top-0 m-auto inline-block w-full"
+            ref={text2Ref}
+         />
+      </>
+   )
+}
+
+const SvgFilters: React.FC = () => (
+   <svg
+      id="filters"
+      className="fixed h-0 w-0"
+      preserveAspectRatio="xMidYMid slice"
+   >
+      <defs>
+         <filter id="threshold">
+            <feColorMatrix
+               in="SourceGraphic"
+               type="matrix"
+               values="1 0 0 0 0
+                  0 1 0 0 0
+                  0 0 1 0 0
+                  0 0 0 255 -140"
+            />
+         </filter>
+      </defs>
+   </svg>
+)
+
+export const MorphingText: React.FC<MorphingTextProps> = ({
+   texts,
+   className,
+}) => (
+   <div
+      className={ny(
+         "relative mx-auto h-16 w-full max-w-screen-md text-center font-sans text-[40pt] font-bold leading-none [filter:url(#threshold)_blur(0.6px)] md:h-24 lg:text-[6rem]",
+         className,
+      )}
+   >
+      <Texts texts={texts} />
+      <SvgFilters />
+   </div>
+)
diff --git a/apps/web/registry/miami/ui/multi-select.tsx b/apps/web/registry/miami/ui/multi-select.tsx
index 6b68843a..b309180a 100644
--- a/apps/web/registry/miami/ui/multi-select.tsx
+++ b/apps/web/registry/miami/ui/multi-select.tsx
@@ -1,14 +1,13 @@
-'use client'
+"use client"
 
-import React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-import type { Primitive } from '@radix-ui/react-primitive'
-import { useControllableState } from '@radix-ui/react-use-controllable-state'
-import { Check, ChevronsUpDown, X } from 'lucide-react'
-import { createPortal } from 'react-dom'
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import type { Primitive } from "@radix-ui/react-primitive"
+import { useControllableState } from "@radix-ui/react-use-controllable-state"
+import { Check, ChevronsUpDown, X } from "lucide-react"
+import React from "react"
+import { createPortal } from "react-dom"
 
-import { ny } from '~/lib/utils'
-import { Badge } from '~/registry/miami/ui/badge'
+import { ny } from "~/lib/utils"
 import {
    Command,
    CommandEmpty,
@@ -17,13 +16,14 @@ import {
    CommandItem,
    CommandList,
    CommandSeparator,
-} from '~/registry/default/ui/command'
+} from "~/registry/default/ui/command"
 import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
-} from '~/registry/default/ui/tooltip'
+} from "~/registry/default/ui/tooltip"
+import { Badge } from "~/registry/miami/ui/badge"
 
 export interface MultiSelectOptionItem {
    value: string
@@ -51,20 +51,20 @@ interface MultiSelectContextValue {
 }
 
 const MultiSelectContext = React.createContext<
-  MultiSelectContextValue | undefined
+   MultiSelectContextValue | undefined
 >(undefined)
 
 function useMultiSelect() {
    const context = React.useContext(MultiSelectContext)
 
    if (!context)
-      throw new Error('useMultiSelect must be used within MultiSelectProvider')
+      throw new Error("useMultiSelect must be used within MultiSelectProvider")
 
    return context
 }
 
 type MultiSelectProps = React.ComponentPropsWithoutRef<
-  typeof PopoverPrimitive.Root
+   typeof PopoverPrimitive.Root
 > & {
    value?: string[]
    onValueChange?: (value: string[], items: MultiSelectOptionItem[]) => void
@@ -99,7 +99,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
    const handleValueChange = React.useCallback(
       (state: string[]) => {
          if (onValueChangeProp) {
-            const items = state.map(value => itemCache.get(value)!)
+            const items = state.map((value) => itemCache.get(value)!)
 
             onValueChangeProp(state, items)
          }
@@ -122,8 +122,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
    const handleSelect = React.useCallback(
       (value: string, item: MultiSelectOptionItem) => {
          setValue((prev) => {
-            if (prev?.includes(value))
-               return prev
+            if (prev?.includes(value)) return prev
 
             onSelectProp?.(value, item)
 
@@ -136,12 +135,11 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
    const handleDeselect = React.useCallback(
       (value: string, item: MultiSelectOptionItem) => {
          setValue((prev) => {
-            if (!prev || !prev.includes(value))
-               return prev
+            if (!prev || !prev.includes(value)) return prev
 
             onDeselectProp?.(value, item)
 
-            return prev.filter(v => v !== value)
+            return prev.filter((v) => v !== value)
          })
       },
       [onDeselectProp, setValue],
@@ -168,7 +166,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
       maxCount,
       handleSelect,
       handleDeselect,
-      itemCache
+      itemCache,
    ])
 
    return (
@@ -182,7 +180,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
    )
 }
 
-MultiSelect.displayName = 'MultiSelect'
+MultiSelect.displayName = "MultiSelect"
 
 type MultiSelectTriggerElement = React.ElementRef<typeof Primitive.div>
 
@@ -207,21 +205,24 @@ const MultiSelectTrigger = React.forwardRef<
             data-disabled={disabled}
             {...props}
             className={ny(
-               'border-input ring-offset-background focus:ring-ring flex size-full min-h-10 items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 [&>span]:line-clamp-1',
-               disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text',
+               "border-input ring-offset-background focus:ring-ring flex size-full min-h-10 items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 [&>span]:line-clamp-1",
+               disabled ? "cursor-not-allowed opacity-50" : "cursor-text",
                className,
             )}
             onClick={disabled ? PreventClick : props.onClick}
             onTouchStart={disabled ? PreventClick : props.onTouchStart}
          >
             {children}
-            <ChevronsUpDown aria-hidden className="size-4 shrink-0 opacity-50" />
+            <ChevronsUpDown
+               aria-hidden
+               className="size-4 shrink-0 opacity-50"
+            />
          </div>
       </PopoverPrimitive.Trigger>
    )
 })
 
-MultiSelectTrigger.displayName = 'MultiSelectTrigger'
+MultiSelectTrigger.displayName = "MultiSelectTrigger"
 
 interface MultiSelectValueProps
    extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
@@ -241,8 +242,8 @@ const MultiSelectValue = React.forwardRef<
       const { value, itemCache, onDeselect } = useMultiSelect()
       const [firstRendered, setFirstRendered] = React.useState(false)
 
-      const renderRemain
-      = maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0
+      const renderRemain =
+         maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0
       const renderItems = renderRemain ? value.slice(0, maxDisplay) : value
 
       React.useLayoutEffect(() => {
@@ -261,7 +262,7 @@ const MultiSelectValue = React.forwardRef<
          <TooltipProvider delayDuration={300}>
             <div
                className={ny(
-                  'flex flex-1 flex-wrap items-center gap-1.5 overflow-x-hidden',
+                  "flex flex-1 flex-wrap items-center gap-1.5 overflow-x-hidden",
                   className,
                )}
                {...props}
@@ -272,12 +273,12 @@ const MultiSelectValue = React.forwardRef<
 
                   const content = item?.label || value
 
-                  const child
-              = maxItemLength
-              && typeof content === 'string'
-              && content.length > maxItemLength
-                 ? `${content.slice(0, maxItemLength)}...`
-                 : content
+                  const child =
+                     maxItemLength &&
+                     typeof content === "string" &&
+                     content.length > maxItemLength
+                        ? `${content.slice(0, maxItemLength)}...`
+                        : content
 
                   const el = (
                      <Badge
@@ -298,7 +299,9 @@ const MultiSelectValue = React.forwardRef<
                   if (child !== content) {
                      return (
                         <Tooltip key={value}>
-                           <TooltipTrigger className="inline-flex">{el}</TooltipTrigger>
+                           <TooltipTrigger className="inline-flex">
+                              {el}
+                           </TooltipTrigger>
                            <TooltipContent
                               side="bottom"
                               align="start"
@@ -312,21 +315,18 @@ const MultiSelectValue = React.forwardRef<
 
                   return el
                })}
-               {renderRemain
-                  ? (
-                        <span className="text-muted-foreground py-.5 text-xs leading-4">
-                           +
-                           {renderRemain}
-                        </span>
-                     )
-                  : null}
+               {renderRemain ? (
+                  <span className="text-muted-foreground py-.5 text-xs leading-4">
+                     +{renderRemain}
+                  </span>
+               ) : null}
             </div>
          </TooltipProvider>
       )
    },
 )
 
-MultiSelectValue.displayName = 'MultiSelectValue'
+MultiSelectValue.displayName = "MultiSelectValue"
 
 const MultiSelectSearch = React.forwardRef<
    React.ElementRef<typeof CommandInput>,
@@ -337,7 +337,7 @@ const MultiSelectSearch = React.forwardRef<
    return <CommandInput ref={ref} {...props} onValueChange={onSearch} />
 })
 
-MultiSelectSearch.displayName = 'MultiSelectSearch'
+MultiSelectSearch.displayName = "MultiSelectSearch"
 
 const MultiSelectList = React.forwardRef<
    React.ElementRef<typeof CommandList>,
@@ -346,13 +346,13 @@ const MultiSelectList = React.forwardRef<
    return (
       <CommandList
          ref={ref}
-         className={ny('max-h-[unset] px-0 py-1', className)}
+         className={ny("max-h-[unset] px-0 py-1", className)}
          {...props}
       />
    )
 })
 
-MultiSelectList.displayName = 'MultiSelectList'
+MultiSelectList.displayName = "MultiSelectList"
 
 interface MultiSelectContentProps
    extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {}
@@ -365,7 +365,7 @@ const MultiSelectContent = React.forwardRef<
 
    const fragmentRef = React.useRef<DocumentFragment>()
 
-   if (!fragmentRef.current && typeof window !== 'undefined')
+   if (!fragmentRef.current && typeof window !== "undefined")
       fragmentRef.current = document.createDocumentFragment()
 
    if (!context.open) {
@@ -382,26 +382,27 @@ const MultiSelectContent = React.forwardRef<
             sideOffset={4}
             collisionPadding={10}
             className={ny(
-               'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-full rounded-md border p-0 shadow-md outline-none',
+               "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-full rounded-md border p-0 shadow-md outline-none",
             )}
             style={
                {
-                  '--radix-select-content-transform-origin':
-              'var(--radix-popper-transform-origin)',
-                  '--radix-select-content-available-width':
-              'var(--radix-popper-available-width)',
-                  '--radix-select-content-available-height':
-              'var(--radix-popper-available-height)',
-                  '--radix-select-trigger-width': 'var(--radix-popper-anchor-width)',
-                  '--radix-select-trigger-height':
-              'var(--radix-popper-anchor-height)',
+                  "--radix-select-content-transform-origin":
+                     "var(--radix-popper-transform-origin)",
+                  "--radix-select-content-available-width":
+                     "var(--radix-popper-available-width)",
+                  "--radix-select-content-available-height":
+                     "var(--radix-popper-available-height)",
+                  "--radix-select-trigger-width":
+                     "var(--radix-popper-anchor-width)",
+                  "--radix-select-trigger-height":
+                     "var(--radix-popper-anchor-height)",
                } as any
             }
             {...props}
          >
             <Command
                className={ny(
-                  'max-h-96 w-full min-w-[var(--radix-select-trigger-width)] px-1',
+                  "max-h-96 w-full min-w-[var(--radix-select-trigger-width)] px-1",
                   className,
                )}
                shouldFilter={!context.onSearch}
@@ -413,7 +414,7 @@ const MultiSelectContent = React.forwardRef<
    )
 })
 
-MultiSelectContent.displayName = 'MultiSelectContent'
+MultiSelectContent.displayName = "MultiSelectContent"
 
 type MultiSelectItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> &
    Partial<MultiSelectOptionItem> & {
@@ -449,30 +450,30 @@ const MultiSelectItem = React.forwardRef<
       const item = React.useMemo(() => {
          return value
             ? {
-                  value,
-                  label:
-              label || (typeof children === 'string' ? children : undefined),
-               }
+                 value,
+                 label:
+                    label ||
+                    (typeof children === "string" ? children : undefined),
+              }
             : undefined
       }, [value, label, children])
 
       const selected = Boolean(value && contextValue.includes(value))
 
       React.useEffect(() => {
-         if (value)
-            itemCache.set(value, item!)
+         if (value) itemCache.set(value, item!)
       }, [selected, value, item, itemCache])
 
       const disabled = Boolean(
-         disabledProp || (!selected && maxCount && contextValue.length >= maxCount),
+         disabledProp ||
+            (!selected && maxCount && contextValue.length >= maxCount),
       )
 
       const handleClick = () => {
          if (selected) {
             onDeselectProp?.(value!, item!)
             onDeselect(value!, item!)
-         }
-         else {
+         } else {
             itemCache.set(value!, item!)
             onSelectProp?.(value!, item!)
             onSelect(value!, item!)
@@ -484,23 +485,21 @@ const MultiSelectItem = React.forwardRef<
             {...props}
             value={value}
             className={ny(
-               disabled && 'text-muted-foreground cursor-not-allowed',
+               disabled && "text-muted-foreground cursor-not-allowed",
                className,
             )}
             disabled={disabled}
             onSelect={!disabled && value ? handleClick : undefined}
             ref={forwardedRef}
          >
-            <span className="mr-2 truncate">
-               {children || label || value}
-            </span>
+            <span className="mr-2 truncate">{children || label || value}</span>
             {selected ? <Check className="ml-auto size-4 shrink-0" /> : null}
          </CommandItem>
       )
    },
 )
 
-MultiSelectItem.displayName = 'MultiSelectItem'
+MultiSelectItem.displayName = "MultiSelectItem"
 
 const MultiSelectGroup = React.forwardRef<
    React.ElementRef<typeof CommandGroup>,
@@ -509,7 +508,7 @@ const MultiSelectGroup = React.forwardRef<
    return <CommandGroup {...props} ref={forwardRef} />
 })
 
-MultiSelectGroup.displayName = 'MultiSelectGroup'
+MultiSelectGroup.displayName = "MultiSelectGroup"
 
 const MultiSelectSeparator = React.forwardRef<
    React.ElementRef<typeof CommandSeparator>,
@@ -518,12 +517,12 @@ const MultiSelectSeparator = React.forwardRef<
    return <CommandSeparator {...props} ref={forwardRef} />
 })
 
-MultiSelectSeparator.displayName = 'MultiSelectSeparator'
+MultiSelectSeparator.displayName = "MultiSelectSeparator"
 
 const MultiSelectEmpty = React.forwardRef<
    React.ElementRef<typeof CommandEmpty>,
    React.ComponentPropsWithoutRef<typeof CommandEmpty>
->(({ children = 'No Content', ...props }, forwardRef) => {
+>(({ children = "No Content", ...props }, forwardRef) => {
    return (
       <CommandEmpty {...props} ref={forwardRef}>
          {children}
@@ -531,10 +530,10 @@ const MultiSelectEmpty = React.forwardRef<
    )
 })
 
-MultiSelectEmpty.displayName = 'MultiSelectEmpty'
+MultiSelectEmpty.displayName = "MultiSelectEmpty"
 
 export interface MultiSelectOptionSeparator {
-   type: 'separator'
+   type: "separator"
 }
 
 export interface MultiSelectOptionGroup {
@@ -545,22 +544,22 @@ export interface MultiSelectOptionGroup {
 
 export type MultiSelectOption =
    | Pick<
-      MultiSelectItemProps,
-      'value' | 'label' | 'disabled' | 'onSelect' | 'onDeselect'
-   >
+        MultiSelectItemProps,
+        "value" | "label" | "disabled" | "onSelect" | "onDeselect"
+     >
    | MultiSelectOptionSeparator
    | MultiSelectOptionGroup
 
 function renderMultiSelectOptions(list: MultiSelectOption[]) {
    return list.map((option, index) => {
-      if ('type' in option) {
-         if (option.type === 'separator')
+      if ("type" in option) {
+         if (option.type === "separator")
             return <MultiSelectSeparator key={index} />
 
          return null
       }
 
-      if ('children' in option) {
+      if ("children" in option) {
          return (
             <MultiSelectGroup
                key={option.value || index}
@@ -592,4 +591,4 @@ export {
    MultiSelectSeparator,
    MultiSelectEmpty,
    renderMultiSelectOptions,
-}
\ No newline at end of file
+}
diff --git a/apps/web/registry/miami/ui/navigation-menu.tsx b/apps/web/registry/miami/ui/navigation-menu.tsx
index 516965d5..01bc19e9 100644
--- a/apps/web/registry/miami/ui/navigation-menu.tsx
+++ b/apps/web/registry/miami/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react'
-import { ChevronDownIcon } from '@radix-ui/react-icons'
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
-import { cva } from 'class-variance-authority'
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const NavigationMenu = React.forwardRef<
    React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@@ -12,7 +12,7 @@ const NavigationMenu = React.forwardRef<
    <NavigationMenuPrimitive.Root
       ref={ref}
       className={ny(
-         'relative z-10 flex max-w-max flex-1 items-center justify-center',
+         "relative z-10 flex max-w-max flex-1 items-center justify-center",
          className,
       )}
       {...props}
@@ -30,7 +30,7 @@ const NavigationMenuList = React.forwardRef<
    <NavigationMenuPrimitive.List
       ref={ref}
       className={ny(
-         'group flex flex-1 list-none items-center justify-center space-x-1',
+         "group flex flex-1 list-none items-center justify-center space-x-1",
          className,
       )}
       {...props}
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-   'group inline-flex h-9 w-max items-center justify-center text-foreground/60 rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+   "group inline-flex h-9 w-max items-center justify-center text-foreground/60 rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
 )
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -50,11 +50,10 @@ const NavigationMenuTrigger = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
    <NavigationMenuPrimitive.Trigger
       ref={ref}
-      className={ny(navigationMenuTriggerStyle(), 'group', className)}
+      className={ny(navigationMenuTriggerStyle(), "group", className)}
       {...props}
    >
-      {children}
-      {' '}
+      {children}{" "}
       <ChevronDownIcon
          className="relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
          aria-hidden="true"
@@ -70,7 +69,7 @@ const NavigationMenuContent = React.forwardRef<
    <NavigationMenuPrimitive.Content
       ref={ref}
       className={ny(
-         'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto ',
+         "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto ",
          className,
       )}
       {...props}
@@ -84,10 +83,10 @@ const NavigationMenuViewport = React.forwardRef<
    React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-   <div className={ny('absolute left-0 top-full flex justify-center')}>
+   <div className={ny("absolute left-0 top-full flex justify-center")}>
       <NavigationMenuPrimitive.Viewport
          className={ny(
-            'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
             className,
          )}
          ref={ref}
@@ -95,8 +94,8 @@ const NavigationMenuViewport = React.forwardRef<
       />
    </div>
 ))
-NavigationMenuViewport.displayName
-  = NavigationMenuPrimitive.Viewport.displayName
+NavigationMenuViewport.displayName =
+   NavigationMenuPrimitive.Viewport.displayName
 
 const NavigationMenuIndicator = React.forwardRef<
    React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -105,7 +104,7 @@ const NavigationMenuIndicator = React.forwardRef<
    <NavigationMenuPrimitive.Indicator
       ref={ref}
       className={ny(
-         'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+         "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
          className,
       )}
       {...props}
@@ -113,8 +112,8 @@ const NavigationMenuIndicator = React.forwardRef<
       <div className="bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md" />
    </NavigationMenuPrimitive.Indicator>
 ))
-NavigationMenuIndicator.displayName
-  = NavigationMenuPrimitive.Indicator.displayName
+NavigationMenuIndicator.displayName =
+   NavigationMenuPrimitive.Indicator.displayName
 
 export {
    navigationMenuTriggerStyle,
diff --git a/apps/web/registry/miami/ui/neon-gradient-card.tsx b/apps/web/registry/miami/ui/neon-gradient-card.tsx
index b6b350a2..7b822750 100644
--- a/apps/web/registry/miami/ui/neon-gradient-card.tsx
+++ b/apps/web/registry/miami/ui/neon-gradient-card.tsx
@@ -1,17 +1,9 @@
-'use client'
+"use client"
 
-import type {
-   CSSProperties,
-   ReactElement,
-   ReactNode,
-} from 'react'
-import {
-   useEffect,
-   useRef,
-   useState,
-} from 'react'
+import type { CSSProperties, ReactElement, ReactNode } from "react"
+import { useEffect, useRef, useState } from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface NeonColorsProps {
    firstColor: string
@@ -75,8 +67,8 @@ const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
    borderSize = 2,
    borderRadius = 20,
    neonColors = {
-      firstColor: '#ff00aa',
-      secondColor: '#00FFF1',
+      firstColor: "#ff00aa",
+      secondColor: "#00FFF1",
    },
    ...props
 }) => {
@@ -92,10 +84,10 @@ const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
       }
 
       updateDimensions()
-      window.addEventListener('resize', updateDimensions)
+      window.addEventListener("resize", updateDimensions)
 
       return () => {
-         window.removeEventListener('resize', updateDimensions)
+         window.removeEventListener("resize", updateDimensions)
       }
    }, [])
 
@@ -111,37 +103,37 @@ const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
          ref={containerRef}
          style={
             {
-               '--border-size': `${borderSize}px`,
-               '--border-radius': `${borderRadius}px`,
-               '--neon-first-color': neonColors.firstColor,
-               '--neon-second-color': neonColors.secondColor,
-               '--card-width': `${dimensions.width}px`,
-               '--card-height': `${dimensions.height}px`,
-               '--card-content-radius': `${borderRadius - borderSize}px`,
-               '--pseudo-element-background-image': `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,
-               '--pseudo-element-width': `${dimensions.width + borderSize * 2}px`,
-               '--pseudo-element-height': `${dimensions.height + borderSize * 2}px`,
-               '--after-blur': `${dimensions.width / 3}px`,
+               "--border-size": `${borderSize}px`,
+               "--border-radius": `${borderRadius}px`,
+               "--neon-first-color": neonColors.firstColor,
+               "--neon-second-color": neonColors.secondColor,
+               "--card-width": `${dimensions.width}px`,
+               "--card-height": `${dimensions.height}px`,
+               "--card-content-radius": `${borderRadius - borderSize}px`,
+               "--pseudo-element-background-image": `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,
+               "--pseudo-element-width": `${dimensions.width + borderSize * 2}px`,
+               "--pseudo-element-height": `${dimensions.height + borderSize * 2}px`,
+               "--after-blur": `${dimensions.width / 3}px`,
             } as CSSProperties
          }
          className={ny(
-            'relative z-10 size-full rounded-[var(--border-radius)]',
+            "relative z-10 size-full rounded-[var(--border-radius)]",
             className,
          )}
          {...props}
       >
          <div
             className={ny(
-               'relative size-full min-h-[inherit] rounded-[var(--card-content-radius)] bg-gray-100 p-6',
-               'before:absolute before:-left-[var(--border-size)] before:-top-[var(--border-size)] before:-z-10 before:block',
-               'before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-[\'\']',
-               'before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-[length:100%_200%]',
-               'before:animate-background-position-spin',
-               'after:absolute after:-left-[var(--border-size)] after:-top-[var(--border-size)] after:-z-10 after:block',
-               'after:h-[var(--pseudo-element-height)] after:w-[var(--pseudo-element-width)] after:rounded-[var(--border-radius)] after:blur-[var(--after-blur)] after:content-[\'\']',
-               'after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80',
-               'after:animate-background-position-spin',
-               'dark:bg-neutral-900',
+               "relative size-full min-h-[inherit] rounded-[var(--card-content-radius)] bg-gray-100 p-6",
+               "before:absolute before:-left-[var(--border-size)] before:-top-[var(--border-size)] before:-z-10 before:block",
+               "before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-['']",
+               "before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-[length:100%_200%]",
+               "before:animate-background-position-spin",
+               "after:absolute after:-left-[var(--border-size)] after:-top-[var(--border-size)] after:-z-10 after:block",
+               "after:h-[var(--pseudo-element-height)] after:w-[var(--pseudo-element-width)] after:rounded-[var(--border-radius)] after:blur-[var(--after-blur)] after:content-['']",
+               "after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80",
+               "after:animate-background-position-spin",
+               "dark:bg-neutral-900",
             )}
          >
             {children}
diff --git a/apps/web/registry/miami/ui/number-ticker.tsx b/apps/web/registry/miami/ui/number-ticker.tsx
index dccded63..6dcb8019 100644
--- a/apps/web/registry/miami/ui/number-ticker.tsx
+++ b/apps/web/registry/miami/ui/number-ticker.tsx
@@ -1,40 +1,40 @@
-'use client'
+"use client"
 
-import { useInView, useMotionValue, useSpring } from 'framer-motion'
-import { useEffect, useRef } from 'react'
-import { ny } from '~/lib/utils'
+import { useInView, useMotionValue, useSpring } from "framer-motion"
+import { useEffect, useRef } from "react"
+import { ny } from "~/lib/utils"
 
 export default function NumberTicker({
    value,
-   direction = 'up',
+   direction = "up",
    delay = 0,
    className,
 }: {
    value: number
-   direction?: 'up' | 'down'
+   direction?: "up" | "down"
    className?: string
    delay?: number // delay in s
 }) {
    const ref = useRef<HTMLSpanElement>(null)
-   const motionValue = useMotionValue(direction === 'down' ? value : 0)
+   const motionValue = useMotionValue(direction === "down" ? value : 0)
    const springValue = useSpring(motionValue, {
       damping: 60,
       stiffness: 100,
    })
-   const isInView = useInView(ref, { once: true, margin: '0px' })
+   const isInView = useInView(ref, { once: true, margin: "0px" })
 
    useEffect(() => {
-      isInView
-      && setTimeout(() => {
-         motionValue.set(direction === 'down' ? 0 : value)
-      }, delay * 1000)
+      isInView &&
+         setTimeout(() => {
+            motionValue.set(direction === "down" ? 0 : value)
+         }, delay * 1000)
    }, [motionValue, isInView, delay, value, direction])
 
    useEffect(
       () =>
-         springValue.on('change', (latest) => {
+         springValue.on("change", (latest) => {
             if (ref.current) {
-               ref.current.textContent = Intl.NumberFormat('en-US').format(
+               ref.current.textContent = Intl.NumberFormat("en-US").format(
                   Math.round(latest),
                )
             }
@@ -45,7 +45,7 @@ export default function NumberTicker({
    return (
       <span
          className={ny(
-            'inline-block tabular-nums tracking-wider text-black dark:text-white',
+            "inline-block tabular-nums tracking-wider text-black dark:text-white",
             className,
          )}
          ref={ref}
diff --git a/apps/web/registry/miami/ui/nyx-toc.tsx b/apps/web/registry/miami/ui/nyx-toc.tsx
index 2f980916..9f0b2573 100644
--- a/apps/web/registry/miami/ui/nyx-toc.tsx
+++ b/apps/web/registry/miami/ui/nyx-toc.tsx
@@ -1,16 +1,36 @@
-'use client'
-
-import * as React from 'react'
-import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode, RefObject } from 'react'
-import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import type { PopoverContentProps, PopoverTriggerProps } from '@radix-ui/react-popover'
-import { AlignLeft, ChevronRight } from 'lucide-react'
-import scrollIntoView from 'scroll-into-view-if-needed'
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
-import { Popover, PopoverContent, PopoverTrigger } from '~/registry/miami/ui/popover'
-import { ny } from '~/lib/utils'
-import { useAnchorObserver } from '~/hooks/use-anchor-observer'
-import { useOnChange } from '~/hooks/use-on-change'
+"use client"
+
+import type {
+   PopoverContentProps,
+   PopoverTriggerProps,
+} from "@radix-ui/react-popover"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import { AlignLeft, ChevronRight } from "lucide-react"
+import * as React from "react"
+import type {
+   AnchorHTMLAttributes,
+   HTMLAttributes,
+   ReactNode,
+   RefObject,
+} from "react"
+import {
+   createContext,
+   forwardRef,
+   useContext,
+   useEffect,
+   useMemo,
+   useRef,
+   useState,
+} from "react"
+import scrollIntoView from "scroll-into-view-if-needed"
+import { useAnchorObserver } from "~/hooks/use-anchor-observer"
+import { useOnChange } from "~/hooks/use-on-change"
+import { ny } from "~/lib/utils"
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "~/registry/miami/ui/popover"
 
 // #region Types
 export interface TOCItemType {
@@ -36,7 +56,7 @@ export interface PageStyles {
 }
 
 export interface TOCItemProps
-   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
    href: string
 
    onActiveChange?: (v: boolean) => void
@@ -49,7 +69,7 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
    <ScrollAreaPrimitive.Root
       ref={ref}
-      className={ny('overflow-hidden', className)}
+      className={ny("overflow-hidden", className)}
       {...props}
    >
       {children}
@@ -66,7 +86,7 @@ const ScrollViewport = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
    <ScrollAreaPrimitive.Viewport
       ref={ref}
-      className={ny('size-full rounded-[inherit]', className)}
+      className={ny("size-full rounded-[inherit]", className)}
       {...props}
    >
       {children}
@@ -78,14 +98,14 @@ ScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName
 const ScrollBar = React.forwardRef<
    React.ComponentRef<typeof ScrollAreaPrimitive.Scrollbar>,
    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
+>(({ className, orientation = "vertical", ...props }, ref) => (
    <ScrollAreaPrimitive.Scrollbar
       ref={ref}
       orientation={orientation}
       className={ny(
-         'data-[state=hidden]:animate-fd-fade-out flex select-none',
-         orientation === 'vertical' && 'h-full w-1.5',
-         orientation === 'horizontal' && 'h-1.5 flex-col',
+         "data-[state=hidden]:animate-fd-fade-out flex select-none",
+         orientation === "vertical" && "h-full w-1.5",
+         orientation === "horizontal" && "h-1.5 flex-col",
          className,
       )}
       {...props}
@@ -99,10 +119,12 @@ export { ScrollArea, ScrollBar, ScrollViewport }
 
 // #region Contexts
 const ActiveAnchorContext = createContext<string[]>([])
-const ScrollContext = createContext<RefObject<HTMLElement | null>>({ current: null })
+const ScrollContext = createContext<RefObject<HTMLElement | null>>({
+   current: null,
+})
 const StylesContext = createContext<PageStyles>({
-   tocNav: 'xl:hidden',
-   toc: 'max-xl:hidden',
+   tocNav: "xl:hidden",
+   toc: "max-xl:hidden",
 })
 
 // #region Hooks
@@ -128,19 +150,16 @@ function isDifferent(a: unknown, b: unknown): boolean {
 function mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
    return (value) => {
       refs.forEach((ref) => {
-         if (typeof ref === 'function')
-            ref(value)
-         else if (ref !== null && typeof ref === 'object')
+         if (typeof ref === "function") ref(value)
+         else if (ref !== null && typeof ref === "object")
             (ref as React.MutableRefObject<T | null>).current = value
       })
    }
 }
 
 function getItemOffset(depth: number): number {
-   if (depth <= 2)
-      return 14
-   if (depth === 3)
-      return 26
+   if (depth <= 2) return 14
+   if (depth === 3) return 26
    return 36
 }
 
@@ -173,7 +192,7 @@ export function AnchorProvider({
    children?: ReactNode
 }): React.ReactElement {
    const headings = useMemo(() => {
-      return toc.map(item => item.url.split('#')[1])
+      return toc.map((item) => item.url.split("#")[1])
    }, [toc])
 
    return (
@@ -194,15 +213,14 @@ export const TOCItem = forwardRef<HTMLAnchorElement, TOCItemProps>(
 
       useOnChange(isActive, (v) => {
          const element = anchorRef.current
-         if (!element)
-            return
+         if (!element) return
 
          if (v && containerRef.current) {
             scrollIntoView(element, {
-               behavior: 'smooth',
-               block: 'center',
-               inline: 'center',
-               scrollMode: 'always',
+               behavior: "smooth",
+               block: "center",
+               inline: "center",
+               scrollMode: "always",
                boundary: containerRef.current,
             })
          }
@@ -218,7 +236,7 @@ export const TOCItem = forwardRef<HTMLAnchorElement, TOCItemProps>(
    },
 )
 
-TOCItem.displayName = 'TOCItem'
+TOCItem.displayName = "TOCItem"
 
 export function TocThumb({
    containerRef,
@@ -232,24 +250,27 @@ export function TocThumb({
    activeRef.current = active
 
    function calc(container: HTMLElement, active: string[]): TOCThumb {
-      if (active.length === 0 || container.clientHeight === 0)
-         return [0, 0]
+      if (active.length === 0 || container.clientHeight === 0) return [0, 0]
 
       let upper = Number.MAX_VALUE
       let lower = 0
 
       for (const item of active) {
-         const element = container.querySelector<HTMLElement>(`a[href="#${item}"]`)
-         if (!element)
-            continue
+         const element = container.querySelector<HTMLElement>(
+            `a[href="#${item}"]`,
+         )
+         if (!element) continue
 
          const styles = getComputedStyle(element)
-         upper = Math.min(upper, element.offsetTop + Number.parseFloat(styles.paddingTop))
+         upper = Math.min(
+            upper,
+            element.offsetTop + Number.parseFloat(styles.paddingTop),
+         )
          lower = Math.max(
             lower,
-            element.offsetTop
-            + element.clientHeight
-            - Number.parseFloat(styles.paddingBottom),
+            element.offsetTop +
+               element.clientHeight -
+               Number.parseFloat(styles.paddingBottom),
          )
       }
 
@@ -257,18 +278,16 @@ export function TocThumb({
    }
 
    function update(element: HTMLElement, info: TOCThumb): void {
-      element.style.setProperty('--nyx-top', `${info[0]}px`)
-      element.style.setProperty('--nyx-height', `${info[1]}px`)
+      element.style.setProperty("--nyx-top", `${info[0]}px`)
+      element.style.setProperty("--nyx-height", `${info[1]}px`)
    }
 
    useEffect(() => {
-      if (!containerRef.current)
-         return
+      if (!containerRef.current) return
       const container = containerRef.current
 
       const onResize = (): void => {
-         if (!thumbRef.current)
-            return
+         if (!thumbRef.current) return
          update(thumbRef.current, calc(container, activeRef.current))
       }
 
@@ -282,8 +301,7 @@ export function TocThumb({
    }, [containerRef])
 
    useOnChange(active, () => {
-      if (!containerRef.current || !thumbRef.current)
-         return
+      if (!containerRef.current || !thumbRef.current) return
 
       update(thumbRef.current, calc(containerRef.current, active))
    })
@@ -307,14 +325,17 @@ export function Toc(props: HTMLAttributes<HTMLDivElement>) {
          id="nyx-toc"
          {...props}
          className={ny(
-            'top-nyx-layout-top sticky h-[var(--nyx-toc-height)] pb-2 pt-12',
+            "top-nyx-layout-top sticky h-[var(--nyx-toc-height)] pb-2 pt-12",
             toc,
             props.className,
          )}
-         style={{
-            ...props.style,
-            '--nyx-toc-height': 'calc(100dvh - var(--nyx-banner-height) - var(--nyx-nav-height))',
-         } as any}
+         style={
+            {
+               ...props.style,
+               "--nyx-toc-height":
+                  "calc(100dvh - var(--nyx-banner-height) - var(--nyx-nav-height))",
+            } as any
+         }
       >
          <div className="flex h-full w-[var(--nyx-width)] max-w-full flex-col gap-3 pe-4">
             {props.children}
@@ -343,13 +364,11 @@ export function NyxTOCItems({
    }>()
 
    useEffect(() => {
-      if (!containerRef.current)
-         return
+      if (!containerRef.current) return
       const container = containerRef.current
 
       function onResize(): void {
-         if (container.clientHeight === 0)
-            return
+         if (container.clientHeight === 0) return
          let w = 0
          let h = 0
          const d: string[] = []
@@ -357,23 +376,25 @@ export function NyxTOCItems({
             const element: HTMLElement | null = container.querySelector(
                `a[href="#${items[i].url.slice(1)}"]`,
             )
-            if (!element)
-               continue
+            if (!element) continue
 
             const styles = getComputedStyle(element)
             const offset = getLineOffset(items[i].depth) + 1
             const top = element.offsetTop + Number.parseFloat(styles.paddingTop)
-            const bottom = element.offsetTop + element.clientHeight - Number.parseFloat(styles.paddingBottom)
+            const bottom =
+               element.offsetTop +
+               element.clientHeight -
+               Number.parseFloat(styles.paddingBottom)
 
             w = Math.max(offset, w)
             h = Math.max(h, bottom)
 
-            d.push(`${i === 0 ? 'M' : 'L'}${offset} ${top}`)
+            d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`)
             d.push(`L${offset} ${bottom}`)
          }
 
          setSvg({
-            path: d.join(' '),
+            path: d.join(" "),
             width: w + 1,
             height: h,
          })
@@ -385,8 +406,7 @@ export function NyxTOCItems({
       return () => observer.disconnect()
    }, [items])
 
-   if (items.length === 0)
-      return <TocItemsEmpty />
+   if (items.length === 0) return <TocItemsEmpty />
 
    return (
       <>
@@ -396,30 +416,28 @@ export function NyxTOCItems({
                {label}
             </h3>
          )}
-         <ScrollArea className={ny('flex flex-col', isMenu && '-ms-3')}>
+         <ScrollArea className={ny("flex flex-col", isMenu && "-ms-3")}>
             <ScrollViewport className="relative min-h-0" ref={viewRef}>
-               {svg
-                  ? (
-                        <div
-                           className="absolute start-0 top-0 rtl:-scale-x-100"
-                           style={{
-                              width: svg.width,
-                              height: svg.height,
-                              maskImage: `url("data:image/svg+xml,${
-                             // Inline SVG
-                             encodeURIComponent(
-                               `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`,
-                             )
-                           }")`,
-                           }}
-                        >
-                           <TocThumb
-                              containerRef={containerRef}
-                              className="bg-primary mt-[var(--nyx-top)] h-[var(--nyx-height)] transition-all"
-                           />
-                        </div>
-                     )
-                  : null}
+               {svg ? (
+                  <div
+                     className="absolute start-0 top-0 rtl:-scale-x-100"
+                     style={{
+                        width: svg.width,
+                        height: svg.height,
+                        maskImage: `url("data:image/svg+xml,${
+                           // Inline SVG
+                           encodeURIComponent(
+                              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`,
+                           )
+                        }")`,
+                     }}
+                  >
+                     <TocThumb
+                        containerRef={containerRef}
+                        className="bg-primary mt-[var(--nyx-top)] h-[var(--nyx-height)] transition-all"
+                     />
+                  </div>
+               ) : null}
                <ScrollProvider containerRef={viewRef}>
                   <div className="flex flex-col" ref={containerRef}>
                      {items.map((item, i) => (
@@ -447,14 +465,14 @@ export function TocPopoverTrigger({
 }: PopoverTriggerProps & { items: TOCItemType[] }) {
    const active = useActiveAnchor()
    const current = useMemo(() => {
-      return items.find(item => active === item.url.slice(1))?.title
+      return items.find((item) => active === item.url.slice(1))?.title
    }, [items, active])
 
    return (
       <PopoverTrigger
          {...props}
          className={ny(
-            'inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start',
+            "inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start",
             props.className,
          )}
       >
@@ -480,7 +498,7 @@ export function TocPopoverContent(props: PopoverContentProps) {
          data-toc-popover=""
          {...props}
          className={ny(
-            'flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3',
+            "flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3",
             props.className,
          )}
       >
@@ -510,29 +528,27 @@ function LocalTOCItem({
          }}
          className="prose text-muted-foreground data-[active=true]:text-primary relative py-1.5 text-sm transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0"
       >
-         {offset !== upperOffset
-            ? (
-                  <svg
-                     xmlns="http://www.w3.org/2000/svg"
-                     viewBox="0 0 16 16"
-                     className="absolute -top-1.5 start-0 size-4 rtl:-scale-x-100"
-                  >
-                     <line
-                        x1={upperOffset}
-                        y1="0"
-                        x2={offset}
-                        y2="12"
-                        className="stroke-foreground/10"
-                        strokeWidth="1"
-                     />
-                  </svg>
-               )
-            : null}
+         {offset !== upperOffset ? (
+            <svg
+               xmlns="http://www.w3.org/2000/svg"
+               viewBox="0 0 16 16"
+               className="absolute -top-1.5 start-0 size-4 rtl:-scale-x-100"
+            >
+               <line
+                  x1={upperOffset}
+                  y1="0"
+                  x2={offset}
+                  y2="12"
+                  className="stroke-foreground/10"
+                  strokeWidth="1"
+               />
+            </svg>
+         ) : null}
          <div
             className={ny(
-               'bg-foreground/10 absolute inset-y-0 w-px',
-               offset !== upperOffset && 'top-1.5',
-               offset !== lowerOffset && 'bottom-1.5',
+               "bg-foreground/10 absolute inset-y-0 w-px",
+               offset !== upperOffset && "top-1.5",
+               offset !== lowerOffset && "bottom-1.5",
             )}
             style={{
                insetInlineStart: offset,
diff --git a/apps/web/registry/miami/ui/orbiting-circles.tsx b/apps/web/registry/miami/ui/orbiting-circles.tsx
index 589cfd2d..abe53b43 100644
--- a/apps/web/registry/miami/ui/orbiting-circles.tsx
+++ b/apps/web/registry/miami/ui/orbiting-circles.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 export default function OrbitingCircles({
    className,
@@ -39,14 +39,14 @@ export default function OrbitingCircles({
          <div
             style={
                {
-                  '--duration': duration,
-                  '--radius': radius,
-                  '--delay': -delay,
+                  "--duration": duration,
+                  "--radius": radius,
+                  "--delay": -delay,
                } as React.CSSProperties
             }
             className={ny(
-               'animate-orbit absolute flex size-full transform-gpu items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10',
-               { '[animation-direction:reverse]': reverse },
+               "animate-orbit absolute flex size-full transform-gpu items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10",
+               { "[animation-direction:reverse]": reverse },
                className,
             )}
          >
diff --git a/apps/web/registry/miami/ui/pagination.tsx b/apps/web/registry/miami/ui/pagination.tsx
index 4e8ad0a5..b5ee7790 100644
--- a/apps/web/registry/miami/ui/pagination.tsx
+++ b/apps/web/registry/miami/ui/pagination.tsx
@@ -1,63 +1,63 @@
-import * as React from 'react'
 import {
    ChevronLeftIcon,
    ChevronRightIcon,
    DotsHorizontalIcon,
-} from '@radix-ui/react-icons'
+} from "@radix-ui/react-icons"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import type { ButtonProps } from '~/registry/miami/ui/button'
-import { buttonVariants } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import type { ButtonProps } from "~/registry/miami/ui/button"
+import { buttonVariants } from "~/registry/miami/ui/button"
 
-function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
    return (
       <nav
          role="navigation"
          aria-label="pagination"
-         className={ny('mx-auto flex w-full justify-center', className)}
+         className={ny("mx-auto flex w-full justify-center", className)}
          {...props}
       />
    )
 }
-Pagination.displayName = 'Pagination'
+Pagination.displayName = "Pagination"
 
 const PaginationContent = React.forwardRef<
    HTMLUListElement,
-   React.ComponentProps<'ul'>
+   React.ComponentProps<"ul">
 >(({ className, ...props }, ref) => (
    <ul
       ref={ref}
-      className={ny('flex flex-row items-center gap-1', className)}
+      className={ny("flex flex-row items-center gap-1", className)}
       {...props}
    />
 ))
-PaginationContent.displayName = 'PaginationContent'
+PaginationContent.displayName = "PaginationContent"
 
 const PaginationItem = React.forwardRef<
    HTMLLIElement,
-   React.ComponentProps<'li'>
+   React.ComponentProps<"li">
 >(({ className, ...props }, ref) => (
-   <li ref={ref} className={ny('', className)} {...props} />
+   <li ref={ref} className={ny("", className)} {...props} />
 ))
-PaginationItem.displayName = 'PaginationItem'
+PaginationItem.displayName = "PaginationItem"
 
 type PaginationLinkProps = {
    isActive?: boolean
-} & Pick<ButtonProps, 'size'> &
-React.ComponentProps<'a'>
+} & Pick<ButtonProps, "size"> &
+   React.ComponentProps<"a">
 
 function PaginationLink({
    className,
    isActive,
-   size = 'icon',
+   size = "icon",
    ...props
 }: PaginationLinkProps) {
    return (
       <a
-         aria-current={isActive ? 'page' : undefined}
+         aria-current={isActive ? "page" : undefined}
          className={ny(
             buttonVariants({
-               variant: isActive ? 'outline' : 'ghost',
+               variant: isActive ? "outline" : "ghost",
                size,
             }),
             className,
@@ -66,7 +66,7 @@ function PaginationLink({
       />
    )
 }
-PaginationLink.displayName = 'PaginationLink'
+PaginationLink.displayName = "PaginationLink"
 
 function PaginationPrevious({
    className,
@@ -76,7 +76,7 @@ function PaginationPrevious({
       <PaginationLink
          aria-label="Go to previous page"
          size="default"
-         className={ny('gap-1 pl-2.5', className)}
+         className={ny("gap-1 pl-2.5", className)}
          {...props}
       >
          <ChevronLeftIcon className="size-4" />
@@ -84,7 +84,7 @@ function PaginationPrevious({
       </PaginationLink>
    )
 }
-PaginationPrevious.displayName = 'PaginationPrevious'
+PaginationPrevious.displayName = "PaginationPrevious"
 
 function PaginationNext({
    className,
@@ -94,7 +94,7 @@ function PaginationNext({
       <PaginationLink
          aria-label="Go to next page"
          size="default"
-         className={ny('gap-1 pr-2.5', className)}
+         className={ny("gap-1 pr-2.5", className)}
          {...props}
       >
          <span>Next</span>
@@ -102,16 +102,16 @@ function PaginationNext({
       </PaginationLink>
    )
 }
-PaginationNext.displayName = 'PaginationNext'
+PaginationNext.displayName = "PaginationNext"
 
 function PaginationEllipsis({
    className,
    ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
    return (
       <span
          aria-hidden
-         className={ny('flex size-9 items-center justify-center', className)}
+         className={ny("flex size-9 items-center justify-center", className)}
          {...props}
       >
          <DotsHorizontalIcon className="size-4" />
@@ -119,7 +119,7 @@ function PaginationEllipsis({
       </span>
    )
 }
-PaginationEllipsis.displayName = 'PaginationEllipsis'
+PaginationEllipsis.displayName = "PaginationEllipsis"
 
 export {
    Pagination,
diff --git a/apps/web/registry/miami/ui/particles.tsx b/apps/web/registry/miami/ui/particles.tsx
index 81eedc7b..55700550 100644
--- a/apps/web/registry/miami/ui/particles.tsx
+++ b/apps/web/registry/miami/ui/particles.tsx
@@ -1,6 +1,7 @@
-'use client'
+"use client"
 
-import React, { useEffect, useRef, useState } from 'react'
+import type React from "react"
+import { useEffect, useRef, useState } from "react"
 
 interface MousePosition {
    x: number
@@ -18,10 +19,10 @@ function MousePosition(): MousePosition {
          setMousePosition({ x: event.clientX, y: event.clientY })
       }
 
-      window.addEventListener('mousemove', handleMouseMove)
+      window.addEventListener("mousemove", handleMouseMove)
 
       return () => {
-         window.removeEventListener('mousemove', handleMouseMove)
+         window.removeEventListener("mousemove", handleMouseMove)
       }
    }, [])
 
@@ -40,14 +41,14 @@ interface ParticlesProps {
    vy?: number
 }
 function hexToRgb(hex: string): number[] {
-   hex = hex.replace('#', '')
+   hex = hex.replace("#", "")
 
    // Unterstützung für dreistellige Hex-Farbcodes
    if (hex.length === 3) {
       hex = hex
-         .split('')
-         .map(char => char + char)
-         .join('')
+         .split("")
+         .map((char) => char + char)
+         .join("")
    }
 
    const hexInt = Number.parseInt(hex, 16)
@@ -58,13 +59,13 @@ function hexToRgb(hex: string): number[] {
 }
 
 const Particles: React.FC<ParticlesProps> = ({
-   className = '',
+   className = "",
    quantity = 100,
    staticity = 50,
    ease = 50,
    size = 0.4,
    refresh = false,
-   color = '#ffffff',
+   color = "#ffffff",
    vx = 0,
    vy = 0,
 }) => {
@@ -73,20 +74,20 @@ const Particles: React.FC<ParticlesProps> = ({
    const context = useRef<CanvasRenderingContext2D | null>(null)
    const circles = useRef<any[]>([])
    const mousePosition = MousePosition()
-   const mouse = useRef<{ x: number, y: number }>({ x: 0, y: 0 })
-   const canvasSize = useRef<{ w: number, h: number }>({ w: 0, h: 0 })
-   const dpr = typeof window !== 'undefined' ? window.devicePixelRatio : 1
+   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+   const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })
+   const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1
 
    useEffect(() => {
       if (canvasRef.current)
-         context.current = canvasRef.current.getContext('2d')
+         context.current = canvasRef.current.getContext("2d")
 
       initCanvas()
       animate()
-      window.addEventListener('resize', initCanvas)
+      window.addEventListener("resize", initCanvas)
 
       return () => {
-         window.removeEventListener('resize', initCanvas)
+         window.removeEventListener("resize", initCanvas)
       }
    }, [color])
 
@@ -178,12 +179,11 @@ const Particles: React.FC<ParticlesProps> = ({
          context.current.translate(translateX, translateY)
          context.current.beginPath()
          context.current.arc(x, y, size, 0, 2 * Math.PI)
-         context.current.fillStyle = `rgba(${rgb.join(', ')}, ${alpha})`
+         context.current.fillStyle = `rgba(${rgb.join(", ")}, ${alpha})`
          context.current.fill()
          context.current.setTransform(dpr, 0, 0, dpr, 0, 0)
 
-         if (!update)
-            circles.current.push(circle)
+         if (!update) circles.current.push(circle)
       }
    }
 
@@ -214,15 +214,15 @@ const Particles: React.FC<ParticlesProps> = ({
       start2: number,
       end2: number,
    ): number => {
-      const remapped
-      = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2
+      const remapped =
+         ((value - start1) * (end2 - start2)) / (end1 - start1) + start2
       return remapped > 0 ? remapped : 0
    }
 
    const animate = () => {
       clearContext()
       circles.current.forEach((circle: Circle, i: number) => {
-      // Handle the alpha value
+         // Handle the alpha value
          const edge = [
             circle.x + circle.translateX - circle.size, // distance from left edge
             canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge
@@ -237,27 +237,28 @@ const Particles: React.FC<ParticlesProps> = ({
             circle.alpha += 0.02
             if (circle.alpha > circle.targetAlpha)
                circle.alpha = circle.targetAlpha
-         }
-         else {
+         } else {
             circle.alpha = circle.targetAlpha * remapClosestEdge
          }
          circle.x += circle.dx + vx
          circle.y += circle.dy + vy
-         circle.translateX
-        += (mouse.current.x / (staticity / circle.magnetism) - circle.translateX)
-        / ease
-         circle.translateY
-        += (mouse.current.y / (staticity / circle.magnetism) - circle.translateY)
-        / ease
+         circle.translateX +=
+            (mouse.current.x / (staticity / circle.magnetism) -
+               circle.translateX) /
+            ease
+         circle.translateY +=
+            (mouse.current.y / (staticity / circle.magnetism) -
+               circle.translateY) /
+            ease
 
          drawCircle(circle, true)
 
          // circle gets out of the canvas
          if (
-            circle.x < -circle.size
-            || circle.x > canvasSize.current.w + circle.size
-            || circle.y < -circle.size
-            || circle.y > canvasSize.current.h + circle.size
+            circle.x < -circle.size ||
+            circle.x > canvasSize.current.w + circle.size ||
+            circle.y < -circle.size ||
+            circle.y > canvasSize.current.h + circle.size
          ) {
             // remove the circle from the array
             circles.current.splice(i, 1)
diff --git a/apps/web/registry/miami/ui/popover.tsx b/apps/web/registry/miami/ui/popover.tsx
index c91cc5a0..765b2e64 100644
--- a/apps/web/registry/miami/ui/popover.tsx
+++ b/apps/web/registry/miami/ui/popover.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Popover = PopoverPrimitive.Root
 
@@ -14,14 +14,14 @@ const PopoverAnchor = PopoverPrimitive.Anchor // Neues Element hinzugefügt
 const PopoverContent = React.forwardRef<
    React.ElementRef<typeof PopoverPrimitive.Content>,
    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
    <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
          ref={ref}
          align={align}
          sideOffset={sideOffset}
          className={ny(
-            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
+            "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
             className,
          )}
          {...props}
diff --git a/apps/web/registry/miami/ui/progress.tsx b/apps/web/registry/miami/ui/progress.tsx
index f22364cd..172917ae 100644
--- a/apps/web/registry/miami/ui/progress.tsx
+++ b/apps/web/registry/miami/ui/progress.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as ProgressPrimitive from '@radix-ui/react-progress'
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Progress = React.forwardRef<
    React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -12,7 +12,7 @@ const Progress = React.forwardRef<
    <ProgressPrimitive.Root
       ref={ref}
       className={ny(
-         'bg-secondary relative h-4 w-full overflow-hidden rounded-full',
+         "bg-secondary relative h-4 w-full overflow-hidden rounded-full",
          className,
       )}
       {...props}
diff --git a/apps/web/registry/miami/ui/pulsating-button.tsx b/apps/web/registry/miami/ui/pulsating-button.tsx
index b1739317..5a067110 100644
--- a/apps/web/registry/miami/ui/pulsating-button.tsx
+++ b/apps/web/registry/miami/ui/pulsating-button.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import React from 'react'
+import type React from "react"
 
 interface PulsatingButtonProps {
    text: string
@@ -22,14 +22,12 @@ export const PulsatingButton: React.FC<PulsatingButtonProps> = ({
    buttonHeight,
 }) => {
    const pulseKeyframes = {
-      '--tw-pulse-color': pulseColor,
-      'animation': `pulse ${animationDuration} linear infinite`,
+      "--tw-pulse-color": pulseColor,
+      animation: `pulse ${animationDuration} linear infinite`,
    }
 
    return (
-      <div
-         className="flex items-center justify-center"
-      >
+      <div className="flex items-center justify-center">
          <button
             className="relative block flex cursor-pointer items-center justify-center text-center"
             style={{
@@ -37,7 +35,7 @@ export const PulsatingButton: React.FC<PulsatingButtonProps> = ({
                backgroundColor,
                width: buttonWidth,
                height: buttonHeight,
-               borderRadius: '12px',
+               borderRadius: "12px",
                ...pulseKeyframes,
             }}
          >
diff --git a/apps/web/registry/miami/ui/radio-group.tsx b/apps/web/registry/miami/ui/radio-group.tsx
index 5580b925..2ba1d640 100644
--- a/apps/web/registry/miami/ui/radio-group.tsx
+++ b/apps/web/registry/miami/ui/radio-group.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { CheckIcon } from '@radix-ui/react-icons'
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { CheckIcon } from "@radix-ui/react-icons"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const RadioGroup = React.forwardRef<
    React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -12,7 +12,7 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
    return (
       <RadioGroupPrimitive.Root
-         className={ny('grid gap-2', className)}
+         className={ny("grid gap-2", className)}
          {...props}
          ref={ref}
       />
@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
       <RadioGroupPrimitive.Item
          ref={ref}
          className={ny(
-            'border-primary text-primary focus-visible:ring-ring aspect-square size-4 shrink-0 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+            "border-primary text-primary focus-visible:ring-ring aspect-square size-4 shrink-0 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
             className,
          )}
          {...props}
diff --git a/apps/web/registry/miami/ui/rainbow-button.tsx b/apps/web/registry/miami/ui/rainbow-button.tsx
index e4b174a6..d1cb53c4 100644
--- a/apps/web/registry/miami/ui/rainbow-button.tsx
+++ b/apps/web/registry/miami/ui/rainbow-button.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import type React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface RainbowButtonProps
    extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
@@ -9,16 +9,16 @@ export function RainbowButton({ children, ...props }: RainbowButtonProps) {
    return (
       <button
          className={ny(
-            'focus-visible:ring-ring animate-rainbow text-primary-foreground group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',
+            "focus-visible:ring-ring animate-rainbow text-primary-foreground group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
 
             // before styles
-            'before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]',
+            "before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]",
 
             // light mode colors
-            'bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+            "bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
 
             // dark mode colors
-            ' dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+            " dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
          )}
          {...props}
       >
diff --git a/apps/web/registry/miami/ui/resizable.tsx b/apps/web/registry/miami/ui/resizable.tsx
index 174f10d3..e4ef5215 100644
--- a/apps/web/registry/miami/ui/resizable.tsx
+++ b/apps/web/registry/miami/ui/resizable.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { DragHandleDots2Icon } from '@radix-ui/react-icons'
-import * as ResizablePrimitive from 'react-resizable-panels'
+import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+import * as ResizablePrimitive from "react-resizable-panels"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 function ResizablePanelGroup({
    className,
@@ -12,7 +12,7 @@ function ResizablePanelGroup({
    return (
       <ResizablePrimitive.PanelGroup
          className={ny(
-            'flex size-full data-[panel-group-direction=vertical]:flex-col',
+            "flex size-full data-[panel-group-direction=vertical]:flex-col",
             className,
          )}
          {...props}
@@ -32,7 +32,7 @@ function ResizableHandle({
    return (
       <ResizablePrimitive.PanelResizeHandle
          className={ny(
-            'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+            "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
             className,
          )}
          {...props}
diff --git a/apps/web/registry/miami/ui/retro-grid.tsx b/apps/web/registry/miami/ui/retro-grid.tsx
index 986170c2..243ed396 100644
--- a/apps/web/registry/miami/ui/retro-grid.tsx
+++ b/apps/web/registry/miami/ui/retro-grid.tsx
@@ -1,31 +1,68 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/registry/miami/lib/utils"
+
+interface RetroGridProps extends React.HTMLAttributes<HTMLDivElement> {
+   /**
+    * Additional CSS classes to apply to the grid container
+    */
+   className?: string
+   /**
+    * Rotation angle of the grid in degrees
+    * @default 65
+    */
+   angle?: number
+   /**
+    * Grid cell size in pixels
+    * @default 60
+    */
+   cellSize?: number
+   /**
+    * Grid opacity value between 0 and 1
+    * @default 0.5
+    */
+   opacity?: number
+   /**
+    * Grid line color in light mode
+    * @default "gray"
+    */
+   lightLineColor?: string
+   /**
+    * Grid line color in dark mode
+    * @default "gray"
+    */
+   darkLineColor?: string
+}
+
+export function RetroGrid({
+   className,
+   angle = 65,
+   cellSize = 60,
+   opacity = 0.5,
+   lightLineColor = "gray",
+   darkLineColor = "gray",
+   ...props
+}: RetroGridProps) {
+   const gridStyles = {
+      "--grid-angle": `${angle}deg`,
+      "--cell-size": `${cellSize}px`,
+      "--opacity": opacity,
+      "--light-line": lightLineColor,
+      "--dark-line": darkLineColor,
+   } as React.CSSProperties
 
-export default function RetroGrid({ className }: { className?: string }) {
    return (
       <div
          className={ny(
-            'pointer-events-none absolute size-full overflow-hidden opacity-50 [perspective:200px]',
+            "pointer-events-none absolute size-full overflow-hidden [perspective:200px]",
+            `opacity-[var(--opacity)]`,
             className,
          )}
+         style={gridStyles}
+         {...props}
       >
-         {/* Grid */}
-         <div className="absolute inset-0 [transform:rotateX(35deg)]">
-            <div
-               className={ny(
-                  'animate-grid',
-
-                  '[background-repeat:repeat] [background-size:60px_60px] [height:300vh] [inset:0%_0px] [margin-left:-50%] [transform-origin:100%_0_0] [width:600vw]',
-
-                  // Light Styles
-                  '[background-image:linear-gradient(to_right,rgba(0,0,0,0.3)_1px,transparent_0),linear-gradient(to_bottom,rgba(0,0,0,0.3)_1px,transparent_0)]',
-
-                  // Dark styles
-                  'dark:[background-image:linear-gradient(to_right,rgba(255,255,255,0.2)_1px,transparent_0),linear-gradient(to_bottom,rgba(255,255,255,0.2)_1px,transparent_0)]',
-               )}
-            />
+         <div className="absolute inset-0 [transform:rotateX(var(--grid-angle))]">
+            <div className="animate-grid [background-image:linear-gradient(to_right,var(--light-line)_1px,transparent_0),linear-gradient(to_bottom,var(--light-line)_1px,transparent_0)] [background-repeat:repeat] [background-size:var(--cell-size)_var(--cell-size)] [height:300vh] [inset:0%_0px] [margin-left:-200%] [transform-origin:100%_0_0] [width:600vw] dark:[background-image:linear-gradient(to_right,var(--dark-line)_1px,transparent_0),linear-gradient(to_bottom,var(--dark-line)_1px,transparent_0)]" />
          </div>
 
-         {/* Background Gradient */}
          <div className="absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black" />
       </div>
    )
diff --git a/apps/web/registry/miami/ui/ripple-button.tsx b/apps/web/registry/miami/ui/ripple-button.tsx
new file mode 100644
index 00000000..cced5d58
--- /dev/null
+++ b/apps/web/registry/miami/ui/ripple-button.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import React, { type MouseEvent, useEffect, useState } from "react"
+import { ny } from "~/registry/miami/lib/utils"
+
+interface RippleButtonProps
+   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+   rippleColor?: string
+   duration?: string
+}
+
+export const RippleButton = React.forwardRef<
+   HTMLButtonElement,
+   RippleButtonProps
+>(
+   (
+      {
+         className,
+         children,
+         rippleColor = "#ffffff",
+         duration = "600ms",
+         onClick,
+         ...props
+      },
+      ref,
+   ) => {
+      const [buttonRipples, setButtonRipples] = useState<
+         Array<{ x: number; y: number; size: number; key: number }>
+      >([])
+
+      const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+         createRipple(event)
+         onClick?.(event)
+      }
+
+      const createRipple = (event: MouseEvent<HTMLButtonElement>) => {
+         const button = event.currentTarget
+         const rect = button.getBoundingClientRect()
+         const size = Math.max(rect.width, rect.height)
+         const x = event.clientX - rect.left - size / 2
+         const y = event.clientY - rect.top - size / 2
+
+         const newRipple = { x, y, size, key: Date.now() }
+         setButtonRipples((prevRipples) => [...prevRipples, newRipple])
+      }
+
+      useEffect(() => {
+         if (buttonRipples.length > 0) {
+            const lastRipple = buttonRipples[buttonRipples.length - 1]
+            const timeout = setTimeout(() => {
+               setButtonRipples((prevRipples) =>
+                  prevRipples.filter((ripple) => ripple.key !== lastRipple.key),
+               )
+            }, Number.parseInt(duration))
+            return () => clearTimeout(timeout)
+         }
+      }, [buttonRipples, duration])
+
+      return (
+         <button
+            className={ny(
+               "relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 bg-background px-4 py-2 text-center text-primary",
+               className,
+            )}
+            onClick={handleClick}
+            ref={ref}
+            {...props}
+         >
+            <div className="relative z-10">{children}</div>
+            <span className="pointer-events-none absolute inset-0">
+               {buttonRipples.map((ripple) => (
+                  <span
+                     className="absolute animate-rippling rounded-full bg-background opacity-30"
+                     key={ripple.key}
+                     style={{
+                        width: `${ripple.size}px`,
+                        height: `${ripple.size}px`,
+                        top: `${ripple.y}px`,
+                        left: `${ripple.x}px`,
+                        backgroundColor: rippleColor,
+                        transform: `scale(0)`,
+                     }}
+                  />
+               ))}
+            </span>
+         </button>
+      )
+   },
+)
+
+RippleButton.displayName = "RippleButton"
diff --git a/apps/web/registry/miami/ui/ripple.tsx b/apps/web/registry/miami/ui/ripple.tsx
index b96228e4..dbf6cab4 100644
--- a/apps/web/registry/miami/ui/ripple.tsx
+++ b/apps/web/registry/miami/ui/ripple.tsx
@@ -1,33 +1,58 @@
-import type { CSSProperties } from 'react'
-import React from 'react'
+import React, { type ComponentPropsWithoutRef, type CSSProperties } from "react"
 
-// Modify these
-const MAIN_CIRCLE_SIZE = 210
-const MAIN_CIRCLE_OPACITY = 0.24
-const NUM_CIRCLES = 8
+import { ny } from "~/registry/miami/lib/utils"
 
-const Ripple = React.memo(() => {
+interface RippleProps extends ComponentPropsWithoutRef<"div"> {
+   mainCircleSize?: number
+   mainCircleOpacity?: number
+   numCircles?: number
+}
+
+export const Ripple = React.memo(function Ripple({
+   mainCircleSize = 210,
+   mainCircleOpacity = 0.24,
+   numCircles = 8,
+   className,
+   ...props
+}: RippleProps) {
    return (
-      <div className="absolute left-1/2 top-1/2 size-full overflow-visible">
-         {Array.from({ length: NUM_CIRCLES }, (_, i) => (
-            <div
-               key={i}
-               className="animate-ripple absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-neutral-400"
-               style={
-                  {
-                     width: MAIN_CIRCLE_SIZE + i * 70,
-                     height: MAIN_CIRCLE_SIZE + i * 70,
-                     opacity: MAIN_CIRCLE_OPACITY - i * 0.03,
-                     animationDelay: `${i * 0.06}s`,
-                  } as CSSProperties
-               }
-            >
-            </div>
-         ))}
+      <div
+         className={ny(
+            "pointer-events-none absolute inset-0 select-none [mask-image:linear-gradient(to_bottom,white,transparent)]",
+            className,
+         )}
+         {...props}
+      >
+         {Array.from({ length: numCircles }, (_, i) => {
+            const size = mainCircleSize + i * 70
+            const opacity = mainCircleOpacity - i * 0.03
+            const animationDelay = `${i * 0.06}s`
+            const borderStyle = i === numCircles - 1 ? "dashed" : "solid"
+            const borderOpacity = 5 + i * 5
+
+            return (
+               <div
+                  key={i}
+                  className={`[--i: absolute animate-ripple rounded-full border bg-foreground/25 shadow-xl${i}]`}
+                  style={
+                     {
+                        width: `${size}px`,
+                        height: `${size}px`,
+                        opacity,
+                        animationDelay,
+                        borderStyle,
+                        borderWidth: "1px",
+                        borderColor: `hsl(var(--foreground), ${borderOpacity / 100})`,
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, -50%) scale(1)",
+                     } as CSSProperties
+                  }
+               />
+            )
+         })}
       </div>
    )
 })
 
-Ripple.displayName = 'Ripple'
-
-export default Ripple
+Ripple.displayName = "Ripple"
diff --git a/apps/web/registry/miami/ui/safari.tsx b/apps/web/registry/miami/ui/safari.tsx
index 1af34299..4ccd5072 100644
--- a/apps/web/registry/miami/ui/safari.tsx
+++ b/apps/web/registry/miami/ui/safari.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react'
+import type { SVGProps } from "react"
 
 export interface SafariProps extends SVGProps<SVGSVGElement> {
    url?: string
diff --git a/apps/web/registry/miami/ui/scratch-to-reveal.tsx b/apps/web/registry/miami/ui/scratch-to-reveal.tsx
index abf404c1..5a85aa9b 100644
--- a/apps/web/registry/miami/ui/scratch-to-reveal.tsx
+++ b/apps/web/registry/miami/ui/scratch-to-reveal.tsx
@@ -1,7 +1,8 @@
-'use client'
-import React, { useEffect, useRef, useState } from 'react'
-import { motion, useAnimation } from 'framer-motion'
-import { ny } from '~/lib/utils'
+"use client"
+import { motion, useAnimation } from "framer-motion"
+import type React from "react"
+import { useEffect, useRef, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface ScratchToRevealProps {
    children: React.ReactNode
@@ -28,9 +29,9 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
 
    useEffect(() => {
       const canvas = canvasRef.current
-      const ctx = canvas?.getContext('2d')
+      const ctx = canvas?.getContext("2d")
       if (canvas && ctx) {
-         ctx.fillStyle = '#ccc'
+         ctx.fillStyle = "#ccc"
          ctx.fillRect(0, 0, canvas.width, canvas.height)
          // Optionally add a background image or gradient
          const gradient = ctx.createLinearGradient(
@@ -39,9 +40,9 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
             canvas.width,
             canvas.height,
          )
-         gradient.addColorStop(0, '#A97CF8')
-         gradient.addColorStop(0.5, '#F38CB8')
-         gradient.addColorStop(1, '#FDCC92')
+         gradient.addColorStop(0, "#A97CF8")
+         gradient.addColorStop(0.5, "#F38CB8")
+         gradient.addColorStop(1, "#FDCC92")
          ctx.fillStyle = gradient
          ctx.fillRect(0, 0, canvas.width, canvas.height)
       }
@@ -49,14 +50,12 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
 
    useEffect(() => {
       const handleDocumentMouseMove = (event: MouseEvent) => {
-         if (!isScratching)
-            return
+         if (!isScratching) return
          scratch(event.clientX, event.clientY)
       }
 
       const handleDocumentTouchMove = (event: TouchEvent) => {
-         if (!isScratching)
-            return
+         if (!isScratching) return
          const touch = event.touches[0]
          scratch(touch.clientX, touch.clientY)
       }
@@ -71,22 +70,22 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
          checkCompletion()
       }
 
-      document.addEventListener('mousedown', handleDocumentMouseMove)
-      document.addEventListener('mousemove', handleDocumentMouseMove)
-      document.addEventListener('touchstart', handleDocumentTouchMove)
-      document.addEventListener('touchmove', handleDocumentTouchMove)
-      document.addEventListener('mouseup', handleDocumentMouseUp)
-      document.addEventListener('touchend', handleDocumentTouchEnd)
-      document.addEventListener('touchcancel', handleDocumentTouchEnd)
+      document.addEventListener("mousedown", handleDocumentMouseMove)
+      document.addEventListener("mousemove", handleDocumentMouseMove)
+      document.addEventListener("touchstart", handleDocumentTouchMove)
+      document.addEventListener("touchmove", handleDocumentTouchMove)
+      document.addEventListener("mouseup", handleDocumentMouseUp)
+      document.addEventListener("touchend", handleDocumentTouchEnd)
+      document.addEventListener("touchcancel", handleDocumentTouchEnd)
 
       return () => {
-         document.removeEventListener('mousedown', handleDocumentMouseMove)
-         document.removeEventListener('mousemove', handleDocumentMouseMove)
-         document.removeEventListener('touchstart', handleDocumentTouchMove)
-         document.removeEventListener('touchmove', handleDocumentTouchMove)
-         document.removeEventListener('mouseup', handleDocumentMouseUp)
-         document.removeEventListener('touchend', handleDocumentTouchEnd)
-         document.removeEventListener('touchcancel', handleDocumentTouchEnd)
+         document.removeEventListener("mousedown", handleDocumentMouseMove)
+         document.removeEventListener("mousemove", handleDocumentMouseMove)
+         document.removeEventListener("touchstart", handleDocumentTouchMove)
+         document.removeEventListener("touchmove", handleDocumentTouchMove)
+         document.removeEventListener("mouseup", handleDocumentMouseUp)
+         document.removeEventListener("touchend", handleDocumentTouchEnd)
+         document.removeEventListener("touchcancel", handleDocumentTouchEnd)
       }
    }, [isScratching])
 
@@ -96,12 +95,12 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
 
    const scratch = (clientX: number, clientY: number) => {
       const canvas = canvasRef.current
-      const ctx = canvas?.getContext('2d')
+      const ctx = canvas?.getContext("2d")
       if (canvas && ctx) {
          const rect = canvas.getBoundingClientRect()
          const x = clientX - rect.left + 16 // offset to position the scratched circle with cursor
          const y = clientY - rect.top + 16
-         ctx.globalCompositeOperation = 'destination-out'
+         ctx.globalCompositeOperation = "destination-out"
          ctx.beginPath()
          ctx.arc(x, y, 30, 0, Math.PI * 2)
          ctx.fill()
@@ -109,11 +108,10 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
    }
 
    const checkCompletion = () => {
-      if (isComplete)
-         return // Check if already completed
+      if (isComplete) return // Check if already completed
 
       const canvas = canvasRef.current
-      const ctx = canvas?.getContext('2d')
+      const ctx = canvas?.getContext("2d")
       if (canvas && ctx) {
          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
          const pixels = imageData.data
@@ -121,8 +119,7 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
          let clearPixels = 0
 
          for (let i = 3; i < pixels.length; i += 4) {
-            if (pixels[i] === 0)
-               clearPixels++
+            if (pixels[i] === 0) clearPixels++
          }
 
          const percentage = (clearPixels / totalPixels) * 100
@@ -131,8 +128,7 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
             setIsComplete(true) // Set complete flag
             ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvas to reveal everything
             startAnimation()
-            if (onComplete)
-               onComplete()
+            if (onComplete) onComplete()
          }
       }
    }
@@ -147,12 +143,12 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
 
    return (
       <motion.div
-         className={ny('relative select-none', className)}
+         className={ny("relative select-none", className)}
          style={{
             width,
             height,
             cursor:
-          'url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+\'), auto',
+               "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto",
          }}
          animate={controls}
       >
@@ -163,8 +159,7 @@ const ScratchToReveal: React.FC<ScratchToRevealProps> = ({
             className="absolute left-0 top-0"
             onMouseDown={handleMouseDown}
             onTouchStart={handleTouchStart}
-         >
-         </canvas>
+         ></canvas>
          {children}
       </motion.div>
    )
diff --git a/apps/web/registry/miami/ui/script-copy-btn.tsx b/apps/web/registry/miami/ui/script-copy-btn.tsx
new file mode 100644
index 00000000..e38ef777
--- /dev/null
+++ b/apps/web/registry/miami/ui/script-copy-btn.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import { Check, Copy } from "lucide-react"
+import { motion } from "motion/react"
+import { useTheme } from "next-themes"
+import { type HTMLAttributes, useEffect, useState } from "react"
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+
+interface ScriptCopyBtnProps extends HTMLAttributes<HTMLDivElement> {
+   showMultiplePackageOptions?: boolean
+   codeLanguage: string
+   lightTheme: string
+   darkTheme: string
+   commandMap: Record<string, string>
+   className?: string
+}
+
+export function ScriptCopyBtn({
+   showMultiplePackageOptions = true,
+   codeLanguage,
+   lightTheme,
+   darkTheme,
+   commandMap,
+   className,
+}: ScriptCopyBtnProps) {
+   const packageManagers = Object.keys(commandMap)
+   const [packageManager, setPackageManager] = useState(packageManagers[0])
+   const [copied, setCopied] = useState(false)
+   const [highlightedCode, setHighlightedCode] = useState("")
+   const { theme } = useTheme()
+   const command = commandMap[packageManager]
+
+   useEffect(() => {
+      async function loadHighlightedCode() {
+         try {
+            const { codeToHtml } = await import("shiki")
+            const highlighted = await codeToHtml(command, {
+               lang: codeLanguage,
+               themes: {
+                  light: lightTheme,
+                  dark: darkTheme,
+               },
+               defaultColor: theme === "dark" ? "dark" : "light",
+            })
+            setHighlightedCode(highlighted)
+         } catch (error) {
+            console.error("Error highlighting code:", error)
+            setHighlightedCode(`<pre>${command}</pre>`)
+         }
+      }
+
+      loadHighlightedCode()
+   }, [command, theme, codeLanguage, lightTheme, darkTheme])
+
+   const copyToClipboard = () => {
+      navigator.clipboard.writeText(command)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+   }
+
+   return (
+      <div
+         className={ny(
+            "mx-auto flex max-w-md items-center justify-center",
+            className,
+         )}
+      >
+         <div className="w-full space-y-2">
+            <div className="mb-2 flex items-center justify-between">
+               {showMultiplePackageOptions && (
+                  <div className="relative">
+                     <div className="inline-flex overflow-hidden rounded-md border border-border text-xs">
+                        {packageManagers.map((pm, index) => (
+                           <div key={pm} className="flex items-center">
+                              {index > 0 && (
+                                 <div
+                                    className="h-4 w-px bg-border"
+                                    aria-hidden="true"
+                                 />
+                              )}
+                              <Button
+                                 variant="ghost"
+                                 size="sm"
+                                 className={`relative rounded-none bg-background px-2 py-1 hover:bg-background ${
+                                    packageManager === pm
+                                       ? "text-primary"
+                                       : "text-muted-foreground"
+                                 }`}
+                                 onClick={() => setPackageManager(pm)}
+                              >
+                                 {pm}
+                                 {packageManager === pm && (
+                                    <motion.div
+                                       className="absolute inset-x-0 bottom-[1px] mx-auto h-0.5 w-[90%] bg-primary"
+                                       layoutId="activeTab"
+                                       initial={false}
+                                       transition={{
+                                          type: "spring",
+                                          stiffness: 500,
+                                          damping: 30,
+                                       }}
+                                    />
+                                 )}
+                              </Button>
+                           </div>
+                        ))}
+                     </div>
+                  </div>
+               )}
+            </div>
+            <div className="relative flex items-center">
+               <div className="min-w-[300px] grow font-mono">
+                  {highlightedCode ? (
+                     <div
+                        className={`[&>pre]:overflow-x-auto [&>pre]:rounded-md [&>pre]:p-2 [&>pre]:px-4 [&>pre]:font-mono ${
+                           theme === "dark" ? "dark" : "light"
+                        }`}
+                        dangerouslySetInnerHTML={{ __html: highlightedCode }}
+                     />
+                  ) : (
+                     <pre className="rounded-md border border-border bg-white p-2 px-4 font-mono dark:bg-black">
+                        {command}
+                     </pre>
+                  )}
+               </div>
+               <Button
+                  variant="outline"
+                  size="icon"
+                  className="relative ml-2 rounded-md"
+                  onClick={copyToClipboard}
+                  aria-label={copied ? "Copied" : "Copy to clipboard"}
+               >
+                  <span className="sr-only">{copied ? "Copied" : "Copy"}</span>
+                  <Copy
+                     className={`h-4 w-4 transition-all duration-300 ${
+                        copied ? "scale-0" : "scale-100"
+                     }`}
+                  />
+                  <Check
+                     className={`absolute inset-0 m-auto h-4 w-4 transition-all duration-300 ${
+                        copied ? "scale-100" : "scale-0"
+                     }`}
+                  />
+               </Button>
+            </div>
+         </div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/ui/scroll-area.tsx b/apps/web/registry/miami/ui/scroll-area.tsx
index 48193119..3914d303 100644
--- a/apps/web/registry/miami/ui/scroll-area.tsx
+++ b/apps/web/registry/miami/ui/scroll-area.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const ScrollArea = React.forwardRef<
    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -11,7 +11,7 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
    <ScrollAreaPrimitive.Root
       ref={ref}
-      className={ny('relative overflow-hidden', className)}
+      className={ny("relative overflow-hidden", className)}
       {...props}
    >
       <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
@@ -25,17 +25,19 @@ ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 
 const ScrollBar = React.forwardRef<
    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
+   React.ComponentPropsWithoutRef<
+      typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+   >
+>(({ className, orientation = "vertical", ...props }, ref) => (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
       ref={ref}
       orientation={orientation}
       className={ny(
-         'flex touch-none select-none transition-colors',
-         orientation === 'vertical'
-         && 'h-full w-2.5 border-l border-l-transparent p-px',
-         orientation === 'horizontal'
-         && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         "flex touch-none select-none transition-colors",
+         orientation === "vertical" &&
+            "h-full w-2.5 border-l border-l-transparent p-px",
+         orientation === "horizontal" &&
+            "h-2.5 flex-col border-t border-t-transparent p-px",
          className,
       )}
       {...props}
diff --git a/apps/web/registry/miami/ui/scroll-based-velocity.tsx b/apps/web/registry/miami/ui/scroll-based-velocity.tsx
index a216b577..93870b8e 100644
--- a/apps/web/registry/miami/ui/scroll-based-velocity.tsx
+++ b/apps/web/registry/miami/ui/scroll-based-velocity.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { wrap } from '@motionone/utils'
+import { wrap } from "@motionone/utils"
 import {
    motion,
    useAnimationFrame,
@@ -9,9 +9,9 @@ import {
    useSpring,
    useTransform,
    useVelocity,
-} from 'framer-motion'
-import React, { useEffect, useRef, useState } from 'react'
-import { ny } from '~/lib/utils'
+} from "framer-motion"
+import React, { useEffect, useRef, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface VelocityScrollProps {
    text: string
@@ -63,20 +63,18 @@ export function VelocityScroll({
 
          calculateRepetitions()
 
-         window.addEventListener('resize', calculateRepetitions)
-         return () => window.removeEventListener('resize', calculateRepetitions)
+         window.addEventListener("resize", calculateRepetitions)
+         return () => window.removeEventListener("resize", calculateRepetitions)
       }, [children])
 
-      const x = useTransform(baseX, v => `${wrap(-100 / repetitions, 0, v)}%`)
+      const x = useTransform(baseX, (v) => `${wrap(-100 / repetitions, 0, v)}%`)
 
       const directionFactor = React.useRef<number>(1)
       useAnimationFrame((t, delta) => {
          let moveBy = directionFactor.current * baseVelocity * (delta / 1000)
 
-         if (velocityFactor.get() < 0)
-            directionFactor.current = -1
-         else if (velocityFactor.get() > 0)
-            directionFactor.current = 1
+         if (velocityFactor.get() < 0) directionFactor.current = -1
+         else if (velocityFactor.get() > 0) directionFactor.current = 1
 
          moveBy += directionFactor.current * moveBy * velocityFactor.get()
 
@@ -88,11 +86,10 @@ export function VelocityScroll({
             className="w-full overflow-hidden whitespace-nowrap"
             ref={containerRef}
          >
-            <motion.div className={ny('inline-block', className)} style={{ x }}>
+            <motion.div className={ny("inline-block", className)} style={{ x }}>
                {Array.from({ length: repetitions }).map((_, i) => (
                   <span key={i} ref={i === 0 ? textRef : null}>
-                     {children}
-                     {' '}
+                     {children}{" "}
                   </span>
                ))}
             </motion.div>
diff --git a/apps/web/registry/miami/ui/scroll-progress.tsx b/apps/web/registry/miami/ui/scroll-progress.tsx
index bcfd99f0..0556430a 100644
--- a/apps/web/registry/miami/ui/scroll-progress.tsx
+++ b/apps/web/registry/miami/ui/scroll-progress.tsx
@@ -1,13 +1,11 @@
-import { motion, useScroll, useSpring } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import { motion, useScroll, useSpring } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface ScrollProgressProps {
    className?: string
 }
 
-export default function ScrollProgress({
-   className,
-}: ScrollProgressProps) {
+export default function ScrollProgress({ className }: ScrollProgressProps) {
    const { scrollYProgress } = useScroll()
 
    const scaleX = useSpring(scrollYProgress, {
@@ -18,7 +16,10 @@ export default function ScrollProgress({
 
    return (
       <motion.div
-         className={ny('fixed inset-x-0 top-0 z-[1000] h-1 origin-left bg-gradient-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]', className)}
+         className={ny(
+            "fixed inset-x-0 top-0 z-[1000] h-1 origin-left bg-gradient-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]",
+            className,
+         )}
          style={{
             scaleX,
          }}
diff --git a/apps/web/registry/miami/ui/select.tsx b/apps/web/registry/miami/ui/select.tsx
index 9864d19e..ddd0dfdb 100644
--- a/apps/web/registry/miami/ui/select.tsx
+++ b/apps/web/registry/miami/ui/select.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import * as React from 'react'
 import {
    CaretSortIcon,
    CheckIcon,
    ChevronDownIcon,
    ChevronUpIcon,
-} from '@radix-ui/react-icons'
-import * as SelectPrimitive from '@radix-ui/react-select'
+} from "@radix-ui/react-icons"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Select = SelectPrimitive.Root
 
@@ -24,12 +24,11 @@ const SelectTrigger = React.forwardRef<
    <SelectPrimitive.Trigger
       ref={ref}
       className={ny(
-         'border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-left text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left',
+         "border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-left text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left",
          className,
       )}
       onPointerDown={(e) => {
-         if (e.pointerType === 'touch')
-            e.preventDefault()
+         if (e.pointerType === "touch") e.preventDefault()
       }}
       {...props}
    >
@@ -48,7 +47,7 @@ const SelectScrollUpButton = React.forwardRef<
    <SelectPrimitive.ScrollUpButton
       ref={ref}
       className={ny(
-         'flex cursor-default items-center justify-center py-1',
+         "flex cursor-default items-center justify-center py-1",
          className,
       )}
       {...props}
@@ -65,7 +64,7 @@ const SelectScrollDownButton = React.forwardRef<
    <SelectPrimitive.ScrollDownButton
       ref={ref}
       className={ny(
-         'flex cursor-default items-center justify-center py-1',
+         "flex cursor-default items-center justify-center py-1",
          className,
       )}
       {...props}
@@ -73,20 +72,20 @@ const SelectScrollDownButton = React.forwardRef<
       <ChevronDownIcon />
    </SelectPrimitive.ScrollDownButton>
 ))
-SelectScrollDownButton.displayName
-  = SelectPrimitive.ScrollDownButton.displayName
+SelectScrollDownButton.displayName =
+   SelectPrimitive.ScrollDownButton.displayName
 
 const SelectContent = React.forwardRef<
    React.ElementRef<typeof SelectPrimitive.Content>,
    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
+>(({ className, children, position = "popper", ...props }, ref) => (
    <SelectPrimitive.Portal>
       <SelectPrimitive.Content
          ref={ref}
          className={ny(
-            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
-            position === 'popper'
-            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+            "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md",
+            position === "popper" &&
+               "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
             className,
          )}
          position={position}
@@ -95,9 +94,9 @@ const SelectContent = React.forwardRef<
          <SelectScrollUpButton />
          <SelectPrimitive.Viewport
             className={ny(
-               'p-1',
-               position === 'popper'
-               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+               "p-1",
+               position === "popper" &&
+                  "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
             )}
          >
             {children}
@@ -114,7 +113,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <SelectPrimitive.Label
       ref={ref}
-      className={ny('px-2 py-1.5 text-sm font-semibold', className)}
+      className={ny("px-2 py-1.5 text-sm font-semibold", className)}
       {...props}
    />
 ))
@@ -127,7 +126,7 @@ const SelectItem = React.forwardRef<
    <SelectPrimitive.Item
       ref={ref}
       className={ny(
-         'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          className,
       )}
       {...props}
@@ -148,7 +147,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <SelectPrimitive.Separator
       ref={ref}
-      className={ny('bg-muted -mx-1 my-1 h-px', className)}
+      className={ny("bg-muted -mx-1 my-1 h-px", className)}
       {...props}
    />
 ))
diff --git a/apps/web/registry/miami/ui/separate-away.tsx b/apps/web/registry/miami/ui/separate-away.tsx
index b77eae86..323a8924 100644
--- a/apps/web/registry/miami/ui/separate-away.tsx
+++ b/apps/web/registry/miami/ui/separate-away.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import { motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface SeparateAwayProps {
    upper_text: string
diff --git a/apps/web/registry/miami/ui/separator.tsx b/apps/web/registry/miami/ui/separator.tsx
index 048d0462..dd9df997 100644
--- a/apps/web/registry/miami/ui/separator.tsx
+++ b/apps/web/registry/miami/ui/separator.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Separator = React.forwardRef<
    React.ElementRef<typeof SeparatorPrimitive.Root>,
    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
    (
-      { className, orientation = 'horizontal', decorative = true, ...props },
+      { className, orientation = "horizontal", decorative = true, ...props },
       ref,
    ) => (
       <SeparatorPrimitive.Root
@@ -18,8 +18,8 @@ const Separator = React.forwardRef<
          decorative={decorative}
          orientation={orientation}
          className={ny(
-            'bg-border shrink-0',
-            orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+            "shrink-0 bg-border",
+            orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
             className,
          )}
          {...props}
diff --git a/apps/web/registry/miami/ui/sheet.tsx b/apps/web/registry/miami/ui/sheet.tsx
index 13f465d2..90727107 100644
--- a/apps/web/registry/miami/ui/sheet.tsx
+++ b/apps/web/registry/miami/ui/sheet.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { Cross2Icon } from '@radix-ui/react-icons'
-import { type VariantProps, cva } from 'class-variance-authority'
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Sheet = SheetPrimitive.Root
 
@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <SheetPrimitive.Overlay
       className={ny(
-         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
+         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
          className,
       )}
       {...props}
@@ -31,32 +31,31 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
    {
       variants: {
          side: {
-            top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+            top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
             bottom:
-          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-            left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-            right:
-          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+               "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+            left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+            right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
          },
       },
       defaultVariants: {
-         side: 'right',
+         side: "right",
       },
    },
 )
 
 interface SheetContentProps
    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-   VariantProps<typeof sheetVariants> {}
+      VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<
    React.ElementRef<typeof SheetPrimitive.Content>,
    SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
+>(({ side = "right", className, children, ...props }, ref) => (
    <SheetPortal>
       <SheetOverlay />
       <SheetPrimitive.Content
@@ -81,14 +80,14 @@ function SheetHeader({
    return (
       <div
          className={ny(
-            'flex flex-col space-y-2 text-center sm:text-start',
+            "flex flex-col space-y-2 text-center sm:text-start",
             className,
          )}
          {...props}
       />
    )
 }
-SheetHeader.displayName = 'SheetHeader'
+SheetHeader.displayName = "SheetHeader"
 
 function SheetFooter({
    className,
@@ -97,14 +96,14 @@ function SheetFooter({
    return (
       <div
          className={ny(
-            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
             className,
          )}
          {...props}
       />
    )
 }
-SheetFooter.displayName = 'SheetFooter'
+SheetFooter.displayName = "SheetFooter"
 
 const SheetTitle = React.forwardRef<
    React.ElementRef<typeof SheetPrimitive.Title>,
@@ -112,7 +111,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <SheetPrimitive.Title
       ref={ref}
-      className={ny('text-foreground text-lg font-semibold', className)}
+      className={ny("text-foreground text-lg font-semibold", className)}
       {...props}
    />
 ))
@@ -124,7 +123,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <SheetPrimitive.Description
       ref={ref}
-      className={ny('text-muted-foreground text-sm', className)}
+      className={ny("text-muted-foreground text-sm", className)}
       {...props}
    />
 ))
diff --git a/apps/web/registry/miami/ui/shimmer-button.tsx b/apps/web/registry/miami/ui/shimmer-button.tsx
index 1b80b1ae..bde81c99 100644
--- a/apps/web/registry/miami/ui/shimmer-button.tsx
+++ b/apps/web/registry/miami/ui/shimmer-button.tsx
@@ -1,6 +1,6 @@
-import type { CSSProperties } from 'react'
-import React from 'react'
-import { ny } from '~/lib/utils'
+import type { CSSProperties } from "react"
+import React from "react"
+import { ny } from "~/lib/utils"
 
 export interface ShimmerButtonProps
    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -16,11 +16,11 @@ export interface ShimmerButtonProps
 const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
    (
       {
-         shimmerColor = '#ffffff',
-         shimmerSize = '0.05em',
-         shimmerDuration = '3s',
-         borderRadius = '100px',
-         background = 'rgba(0, 0, 0, 1)',
+         shimmerColor = "#ffffff",
+         shimmerSize = "0.05em",
+         shimmerDuration = "3s",
+         borderRadius = "100px",
+         background = "rgba(0, 0, 0, 1)",
          className,
          children,
          ...props
@@ -32,17 +32,17 @@ const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
             type="button"
             style={
                {
-                  '--spread': '90deg',
-                  '--shimmer-color': shimmerColor,
-                  '--radius': borderRadius,
-                  '--speed': shimmerDuration,
-                  '--cut': shimmerSize,
-                  '--bg': background,
+                  "--spread": "90deg",
+                  "--shimmer-color": shimmerColor,
+                  "--radius": borderRadius,
+                  "--speed": shimmerDuration,
+                  "--cut": shimmerSize,
+                  "--bg": background,
                } as CSSProperties
             }
             className={ny(
-               'group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black',
-               'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px',
+               "group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black",
+               "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
                className,
             )}
             ref={ref}
@@ -51,8 +51,8 @@ const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
             {/* spark container */}
             <div
                className={ny(
-                  '-z-30 blur-[2px]',
-                  'absolute inset-0 overflow-visible [container-type:size]',
+                  "-z-30 blur-[2px]",
+                  "absolute inset-0 overflow-visible [container-type:size]",
                )}
             >
                {/* spark */}
@@ -66,25 +66,25 @@ const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
             {/* Highlight */}
             <div
                className={ny(
-                  'insert-0 absolute size-full',
+                  "insert-0 absolute size-full",
 
-                  'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',
+                  "rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
 
                   // transition
-                  'transform-gpu transition-all duration-300 ease-in-out',
+                  "transform-gpu transition-all duration-300 ease-in-out",
 
                   // on hover
-                  'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
+                  "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
 
                   // on click
-                  'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]',
+                  "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]",
                )}
             />
 
             {/* backdrop */}
             <div
                className={ny(
-                  'absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]',
+                  "absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]",
                )}
             />
          </button>
@@ -92,6 +92,6 @@ const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
    },
 )
 
-ShimmerButton.displayName = 'ShimmerButton'
+ShimmerButton.displayName = "ShimmerButton"
 
 export default ShimmerButton
diff --git a/apps/web/registry/miami/ui/shine-border.tsx b/apps/web/registry/miami/ui/shine-border.tsx
index 25385335..97b43564 100644
--- a/apps/web/registry/miami/ui/shine-border.tsx
+++ b/apps/web/registry/miami/ui/shine-border.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 type TColorProp = string | string[]
 
@@ -27,7 +27,7 @@ export default function ShineBorder({
    borderRadius = 8,
    borderWidth = 1,
    duration = 14,
-   color = '#000000',
+   color = "#000000",
    className,
    children,
 }: ShineBorderProps) {
@@ -35,27 +35,26 @@ export default function ShineBorder({
       <div
          style={
             {
-               '--border-radius': `${borderRadius}px`,
+               "--border-radius": `${borderRadius}px`,
             } as React.CSSProperties
          }
          className={ny(
-            'relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white',
+            "relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white",
             className,
          )}
       >
          <div
             style={
                {
-                  '--border-width': `${borderWidth}px`,
-                  '--border-radius': `${borderRadius}px`,
-                  '--duration': `${duration}s`,
-                  '--mask-linear-gradient': `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
-                  '--background-radial-gradient': `radial-gradient(transparent,transparent, ${Array.isArray(color) ? color.join(',') : color},transparent,transparent)`,
+                  "--border-width": `${borderWidth}px`,
+                  "--border-radius": `${borderRadius}px`,
+                  "--duration": `${duration}s`,
+                  "--mask-linear-gradient": `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
+                  "--background-radial-gradient": `radial-gradient(transparent,transparent, ${Array.isArray(color) ? color.join(",") : color},transparent,transparent)`,
                } as React.CSSProperties
             }
             className={`before:bg-shine-size motion-safe:before:animate-shine before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[""] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient]`}
-         >
-         </div>
+         ></div>
          {children}
       </div>
    )
diff --git a/apps/web/registry/miami/ui/shiny-button.tsx b/apps/web/registry/miami/ui/shiny-button.tsx
index 583b1dd0..e118afef 100644
--- a/apps/web/registry/miami/ui/shiny-button.tsx
+++ b/apps/web/registry/miami/ui/shiny-button.tsx
@@ -1,20 +1,20 @@
-'use client'
-import { type AnimationProps, motion } from 'framer-motion'
+"use client"
+import { type AnimationProps, motion } from "framer-motion"
 
 const animationProps = {
-   initial: { '--x': '100%', 'scale': 0.8 },
-   animate: { '--x': '-100%', 'scale': 1 },
+   initial: { "--x": "100%", scale: 0.8 },
+   animate: { "--x": "-100%", scale: 1 },
    whileTap: { scale: 0.95 },
    transition: {
-      repeat: Infinity,
-      repeatType: 'loop',
+      repeat: Number.POSITIVE_INFINITY,
+      repeatType: "loop",
       repeatDelay: 1,
-      type: 'spring',
+      type: "spring",
       stiffness: 20,
       damping: 15,
       mass: 2,
       scale: {
-         type: 'spring',
+         type: "spring",
          stiffness: 200,
          damping: 5,
          mass: 0.5,
@@ -22,7 +22,7 @@ const animationProps = {
    },
 } as AnimationProps
 
-function ShinyButton({ text = 'shiny-button' }) {
+function ShinyButton({ text = "shiny-button" }) {
    return (
       <motion.button
          {...animationProps}
@@ -32,19 +32,18 @@ function ShinyButton({ text = 'shiny-button' }) {
             className="relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]"
             style={{
                maskImage:
-            'linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))',
+                  "linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))",
             }}
          >
             {text}
          </span>
          <span
             style={{
-               mask: 'linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))',
-               maskComposite: 'exclude',
+               mask: "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
+               maskComposite: "exclude",
             }}
             className="absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px"
-         >
-         </span>
+         ></span>
       </motion.button>
    )
 }
diff --git a/apps/web/registry/miami/ui/sidebar.tsx b/apps/web/registry/miami/ui/sidebar.tsx
index 8eb65a1e..2cf68e6c 100644
--- a/apps/web/registry/miami/ui/sidebar.tsx
+++ b/apps/web/registry/miami/ui/sidebar.tsx
@@ -1,34 +1,34 @@
-'use client'
-
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
-import { PanelLeft } from 'lucide-react'
-
-import { useIsMobile } from '~/registry/miami/hooks/use-mobile'
-import { ny } from '~/registry/miami/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
-import { Input } from '~/registry/miami/ui/input'
-import { Separator } from '~/registry/miami/ui/separator'
-import { Sheet, SheetContent } from '~/registry/miami/ui/sheet'
-import { Skeleton } from '~/registry/miami/ui/skeleton'
+"use client"
+
+import { Slot } from "@radix-ui/react-slot"
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+import * as React from "react"
+
+import { useIsMobile } from "~/registry/miami/hooks/use-mobile"
+import { ny } from "~/registry/miami/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
+import { Input } from "~/registry/miami/ui/input"
+import { Separator } from "~/registry/miami/ui/separator"
+import { Sheet, SheetContent } from "~/registry/miami/ui/sheet"
+import { Skeleton } from "~/registry/miami/ui/skeleton"
 import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
-} from '~/registry/miami/ui/tooltip'
+} from "~/registry/miami/ui/tooltip"
 
-const SIDEBAR_COOKIE_NAME = 'sidebar:state'
+const SIDEBAR_COOKIE_NAME = "sidebar:state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = '16rem'
-const SIDEBAR_WIDTH_MOBILE = '18rem'
-const SIDEBAR_WIDTH_ICON = '3rem'
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 interface SidebarContext {
-   state: 'expanded' | 'collapsed'
+   state: "expanded" | "collapsed"
    open: boolean
    setOpen: (open: boolean) => void
    openMobile: boolean
@@ -42,7 +42,7 @@ const SidebarContext = React.createContext<SidebarContext | null>(null)
 function useSidebar() {
    const context = React.useContext(SidebarContext)
    if (!context) {
-      throw new Error('useSidebar must be used within a Sidebar.')
+      throw new Error("useSidebar must be used within a Sidebar.")
    }
 
    return context
@@ -50,127 +50,135 @@ function useSidebar() {
 
 const SidebarProvider = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'> & {
+   React.ComponentProps<"div"> & {
       defaultOpen?: boolean
       open?: boolean
       onOpenChange?: (open: boolean) => void
    }
 >(
-         (
-            {
-               defaultOpen = true,
-               open: openProp,
-               onOpenChange: setOpenProp,
-               className,
-               style,
-               children,
-               ...props
-            },
-            ref,
-         ) => {
-            const isMobile = useIsMobile()
-            const [openMobile, setOpenMobile] = React.useState(false)
-
-            // This is the internal state of the sidebar.
-            // We use openProp and setOpenProp for control from outside the component.
-            const [_open, _setOpen] = React.useState(defaultOpen)
-            const open = openProp ?? _open
-            const setOpen = React.useCallback(
-               (value: boolean | ((value: boolean) => boolean)) => {
-                  if (setOpenProp) {
-                     return setOpenProp?.(
-                        typeof value === 'function' ? value(open) : value,
-                     )
-                  }
+   (
+      {
+         defaultOpen = true,
+         open: openProp,
+         onOpenChange: setOpenProp,
+         className,
+         style,
+         children,
+         ...props
+      },
+      ref,
+   ) => {
+      const isMobile = useIsMobile()
+      const [openMobile, setOpenMobile] = React.useState(false)
+
+      // This is the internal state of the sidebar.
+      // We use openProp and setOpenProp for control from outside the component.
+      const [_open, _setOpen] = React.useState(defaultOpen)
+      const open = openProp ?? _open
+      const setOpen = React.useCallback(
+         (value: boolean | ((value: boolean) => boolean)) => {
+            if (setOpenProp) {
+               return setOpenProp?.(
+                  typeof value === "function" ? value(open) : value,
+               )
+            }
 
-                  _setOpen(value)
-
-                  // This sets the cookie to keep the sidebar state.
-                  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-               },
-               [setOpenProp, open],
-            )
-
-            // Helper to toggle the sidebar.
-            const toggleSidebar = React.useCallback(() => {
-               return isMobile
-                  ? setOpenMobile(open => !open)
-                  : setOpen(open => !open)
-            }, [isMobile, setOpen, setOpenMobile])
-
-            // Adds a keyboard shortcut to toggle the sidebar.
-            React.useEffect(() => {
-               const handleKeyDown = (event: KeyboardEvent) => {
-                  if (
-                     event.key === SIDEBAR_KEYBOARD_SHORTCUT
-                     && (event.metaKey || event.ctrlKey)
-                  ) {
-                     event.preventDefault()
-                     toggleSidebar()
-                  }
-               }
-
-               window.addEventListener('keydown', handleKeyDown)
-               return () => window.removeEventListener('keydown', handleKeyDown)
-            }, [toggleSidebar])
-
-            // We add a state so that we can do data-state="expanded" or "collapsed".
-            // This makes it easier to style the sidebar with Tailwind classes.
-            const state = open ? 'expanded' : 'collapsed'
-
-            const contextValue = React.useMemo<SidebarContext>(
-               () => ({
-                  state,
-                  open,
-                  setOpen,
-                  isMobile,
-                  openMobile,
-                  setOpenMobile,
-                  toggleSidebar,
-               }),
-               [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
-            )
-
-            return (
-               <SidebarContext.Provider value={contextValue}>
-                  <TooltipProvider delayDuration={0}>
-                     <div
-                        style={
-                           {
-                              '--sidebar-width': SIDEBAR_WIDTH,
-                              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-                              ...style,
-                           } as React.CSSProperties
-                        }
-                        className={ny(
-                           'group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',
-                           className,
-                        )}
-                        ref={ref}
-                        {...props}
-                     >
-                        {children}
-                     </div>
-                  </TooltipProvider>
-               </SidebarContext.Provider>
-            )
+            _setOpen(value)
+
+            // This sets the cookie to keep the sidebar state.
+            document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
          },
-         )
-SidebarProvider.displayName = 'SidebarProvider'
+         [setOpenProp, open],
+      )
+
+      // Helper to toggle the sidebar.
+      const toggleSidebar = React.useCallback(() => {
+         return isMobile
+            ? setOpenMobile((open) => !open)
+            : setOpen((open) => !open)
+      }, [isMobile, setOpen, setOpenMobile])
+
+      // Adds a keyboard shortcut to toggle the sidebar.
+      React.useEffect(() => {
+         const handleKeyDown = (event: KeyboardEvent) => {
+            if (
+               event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+               (event.metaKey || event.ctrlKey)
+            ) {
+               event.preventDefault()
+               toggleSidebar()
+            }
+         }
+
+         window.addEventListener("keydown", handleKeyDown)
+         return () => window.removeEventListener("keydown", handleKeyDown)
+      }, [toggleSidebar])
+
+      // We add a state so that we can do data-state="expanded" or "collapsed".
+      // This makes it easier to style the sidebar with Tailwind classes.
+      const state = open ? "expanded" : "collapsed"
+
+      const contextValue = React.useMemo<SidebarContext>(
+         () => ({
+            state,
+            open,
+            setOpen,
+            isMobile,
+            openMobile,
+            setOpenMobile,
+            toggleSidebar,
+         }),
+         [
+            state,
+            open,
+            setOpen,
+            isMobile,
+            openMobile,
+            setOpenMobile,
+            toggleSidebar,
+         ],
+      )
+
+      return (
+         <SidebarContext.Provider value={contextValue}>
+            <TooltipProvider delayDuration={0}>
+               <div
+                  style={
+                     {
+                        "--sidebar-width": SIDEBAR_WIDTH,
+                        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                        ...style,
+                     } as React.CSSProperties
+                  }
+                  className={ny(
+                     "group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full",
+                     className,
+                  )}
+                  ref={ref}
+                  {...props}
+               >
+                  {children}
+               </div>
+            </TooltipProvider>
+         </SidebarContext.Provider>
+      )
+   },
+)
+SidebarProvider.displayName = "SidebarProvider"
 
 const Sidebar = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'> & {
-      side?: 'left' | 'right'
-      variant?: 'sidebar' | 'floating' | 'inset'
-      collapsible?: 'offcanvas' | 'icon' | 'none'
+   React.ComponentProps<"div"> & {
+      side?: "left" | "right"
+      variant?: "sidebar" | "floating" | "inset"
+      collapsible?: "offcanvas" | "icon" | "none"
    }
 >(
    (
       {
-         side = 'left',
-         variant = 'sidebar',
-         collapsible = 'offcanvas',
+         side = "left",
+         variant = "sidebar",
+         collapsible = "offcanvas",
          className,
          children,
          ...props
@@ -179,11 +187,11 @@ const Sidebar = React.forwardRef<
    ) => {
       const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 
-      if (collapsible === 'none') {
+      if (collapsible === "none") {
          return (
             <div
                className={ny(
-                  'bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col',
+                  "bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
                   className,
                )}
                ref={ref}
@@ -203,7 +211,7 @@ const Sidebar = React.forwardRef<
                   className="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
                   style={
                      {
-                        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+                        "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
                      } as React.CSSProperties
                   }
                   side={side}
@@ -219,31 +227,31 @@ const Sidebar = React.forwardRef<
             ref={ref}
             className="group peer hidden md:block"
             data-state={state}
-            data-collapsible={state === 'collapsed' ? collapsible : ''}
+            data-collapsible={state === "collapsed" ? collapsible : ""}
             data-variant={variant}
             data-side={side}
          >
             {/* This is what handles the sidebar gap on desktop */}
             <div
                className={ny(
-                  'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
-                  'group-data-[collapsible=offcanvas]:w-0',
-                  'group-data-[side=right]:rotate-180',
-                  variant === 'floating' || variant === 'inset'
-                     ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
-                     : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
+                  "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+                  "group-data-[collapsible=offcanvas]:w-0",
+                  "group-data-[side=right]:rotate-180",
+                  variant === "floating" || variant === "inset"
+                     ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+                     : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
                )}
             />
             <div
                className={ny(
-                  'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
-                  side === 'left'
-                     ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-                     : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+                  "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+                  side === "left"
+                     ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+                     : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
                   // Adjust the padding for floating and inset variants.
-                  variant === 'floating' || variant === 'inset'
-                     ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-                     : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+                  variant === "floating" || variant === "inset"
+                     ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+                     : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
                   className,
                )}
                {...props}
@@ -259,7 +267,7 @@ const Sidebar = React.forwardRef<
       )
    },
 )
-Sidebar.displayName = 'Sidebar'
+Sidebar.displayName = "Sidebar"
 
 const SidebarTrigger = React.forwardRef<
    React.ElementRef<typeof Button>,
@@ -273,7 +281,7 @@ const SidebarTrigger = React.forwardRef<
          data-sidebar="trigger"
          variant="ghost"
          size="icon"
-         className={ny('size-7', className)}
+         className={ny("size-7", className)}
          onClick={(event) => {
             onClick?.(event)
             toggleSidebar()
@@ -285,11 +293,11 @@ const SidebarTrigger = React.forwardRef<
       </Button>
    )
 })
-SidebarTrigger.displayName = 'SidebarTrigger'
+SidebarTrigger.displayName = "SidebarTrigger"
 
 const SidebarRail = React.forwardRef<
    HTMLButtonElement,
-   React.ComponentProps<'button'>
+   React.ComponentProps<"button">
 >(({ className, ...props }, ref) => {
    const { toggleSidebar } = useSidebar()
 
@@ -302,37 +310,37 @@ const SidebarRail = React.forwardRef<
          onClick={toggleSidebar}
          title="Toggle Sidebar"
          className={ny(
-            'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-            '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
-            '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-            'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-            '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-            '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+            "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+            "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+            "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+            "group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+            "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+            "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarRail.displayName = 'SidebarRail'
+SidebarRail.displayName = "SidebarRail"
 
 const SidebarInset = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'main'>
+   React.ComponentProps<"main">
 >(({ className, ...props }, ref) => {
    return (
       <main
          ref={ref}
          className={ny(
-            'bg-background relative flex min-h-svh flex-1 flex-col',
-            'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+            "bg-background relative flex min-h-svh flex-1 flex-col",
+            "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarInset.displayName = 'SidebarInset'
+SidebarInset.displayName = "SidebarInset"
 
 const SidebarInput = React.forwardRef<
    React.ElementRef<typeof Input>,
@@ -343,44 +351,44 @@ const SidebarInput = React.forwardRef<
          ref={ref}
          data-sidebar="input"
          className={ny(
-            'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',
+            "bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarInput.displayName = 'SidebarInput'
+SidebarInput.displayName = "SidebarInput"
 
 const SidebarHeader = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'>
+   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => {
    return (
       <div
          ref={ref}
          data-sidebar="header"
-         className={ny('flex flex-col gap-2 p-2', className)}
+         className={ny("flex flex-col gap-2 p-2", className)}
          {...props}
       />
    )
 })
-SidebarHeader.displayName = 'SidebarHeader'
+SidebarHeader.displayName = "SidebarHeader"
 
 const SidebarFooter = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'>
+   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => {
    return (
       <div
          ref={ref}
          data-sidebar="footer"
-         className={ny('flex flex-col gap-2 p-2', className)}
+         className={ny("flex flex-col gap-2 p-2", className)}
          {...props}
       />
    )
 })
-SidebarFooter.displayName = 'SidebarFooter'
+SidebarFooter.displayName = "SidebarFooter"
 
 const SidebarSeparator = React.forwardRef<
    React.ElementRef<typeof Separator>,
@@ -390,154 +398,155 @@ const SidebarSeparator = React.forwardRef<
       <Separator
          ref={ref}
          data-sidebar="separator"
-         className={ny('bg-sidebar-border mx-2 w-auto', className)}
+         className={ny("bg-sidebar-border mx-2 w-auto", className)}
          {...props}
       />
    )
 })
-SidebarSeparator.displayName = 'SidebarSeparator'
+SidebarSeparator.displayName = "SidebarSeparator"
 
 const SidebarContent = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'>
+   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => {
    return (
       <div
          ref={ref}
          data-sidebar="content"
          className={ny(
-            'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+            "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarContent.displayName = 'SidebarContent'
+SidebarContent.displayName = "SidebarContent"
 
 const SidebarGroup = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'>
+   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => {
    return (
       <div
          ref={ref}
          data-sidebar="group"
-         className={ny('relative flex w-full min-w-0 flex-col p-2', className)}
+         className={ny("relative flex w-full min-w-0 flex-col p-2", className)}
          {...props}
       />
    )
 })
-SidebarGroup.displayName = 'SidebarGroup'
+SidebarGroup.displayName = "SidebarGroup"
 
 const SidebarGroupLabel = React.forwardRef<
    HTMLDivElement,
-  React.ComponentProps<'div'> & { asChild?: boolean }
+   React.ComponentProps<"div"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-   const Comp = asChild ? Slot : 'div'
+   const Comp = asChild ? Slot : "div"
 
    return (
       <Comp
          ref={ref}
          data-sidebar="group-label"
          className={ny(
-            'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-            'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+            "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+            "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarGroupLabel.displayName = 'SidebarGroupLabel'
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
 
 const SidebarGroupAction = React.forwardRef<
    HTMLButtonElement,
-  React.ComponentProps<'button'> & { asChild?: boolean }
+   React.ComponentProps<"button"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-   const Comp = asChild ? Slot : 'button'
+   const Comp = asChild ? Slot : "button"
 
    return (
       <Comp
          ref={ref}
          data-sidebar="group-action"
          className={ny(
-            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+            "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
             // Increases the hit area of the button on mobile.
-            'after:absolute after:-inset-2 after:md:hidden',
-            'group-data-[collapsible=icon]:hidden',
+            "after:absolute after:-inset-2 after:md:hidden",
+            "group-data-[collapsible=icon]:hidden",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarGroupAction.displayName = 'SidebarGroupAction'
+SidebarGroupAction.displayName = "SidebarGroupAction"
 
 const SidebarGroupContent = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'>
+   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => (
    <div
       ref={ref}
       data-sidebar="group-content"
-      className={ny('w-full text-sm', className)}
+      className={ny("w-full text-sm", className)}
       {...props}
    />
 ))
-SidebarGroupContent.displayName = 'SidebarGroupContent'
+SidebarGroupContent.displayName = "SidebarGroupContent"
 
 const SidebarMenu = React.forwardRef<
    HTMLUListElement,
-   React.ComponentProps<'ul'>
+   React.ComponentProps<"ul">
 >(({ className, ...props }, ref) => (
    <ul
       ref={ref}
       data-sidebar="menu"
-      className={ny('flex w-full min-w-0 flex-col gap-1', className)}
+      className={ny("flex w-full min-w-0 flex-col gap-1", className)}
       {...props}
    />
 ))
-SidebarMenu.displayName = 'SidebarMenu'
+SidebarMenu.displayName = "SidebarMenu"
 
 const SidebarMenuItem = React.forwardRef<
    HTMLLIElement,
-   React.ComponentProps<'li'>
+   React.ComponentProps<"li">
 >(({ className, ...props }, ref) => (
    <li
       ref={ref}
       data-sidebar="menu-item"
-      className={ny('group/menu-item relative', className)}
+      className={ny("group/menu-item relative", className)}
       {...props}
    />
 ))
-SidebarMenuItem.displayName = 'SidebarMenuItem'
+SidebarMenuItem.displayName = "SidebarMenuItem"
 
 const sidebarMenuButtonVariants = cva(
-   'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
    {
       variants: {
          variant: {
-            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+            default:
+               "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
             outline:
-          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+               "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
          },
          size: {
-            default: 'h-8 text-sm',
-            sm: 'h-7 text-xs',
-            lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+            default: "h-8 text-sm",
+            sm: "h-7 text-xs",
+            lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
          },
       },
       defaultVariants: {
-         variant: 'default',
-         size: 'default',
+         variant: "default",
+         size: "default",
       },
    },
 )
 
 const SidebarMenuButton = React.forwardRef<
    HTMLButtonElement,
-   React.ComponentProps<'button'> & {
+   React.ComponentProps<"button"> & {
       asChild?: boolean
       isActive?: boolean
       tooltip?: string | React.ComponentProps<typeof TooltipContent>
@@ -547,15 +556,15 @@ const SidebarMenuButton = React.forwardRef<
       {
          asChild = false,
          isActive = false,
-         variant = 'default',
-         size = 'default',
+         variant = "default",
+         size = "default",
          tooltip,
          className,
          ...props
       },
       ref,
    ) => {
-      const Comp = asChild ? Slot : 'button'
+      const Comp = asChild ? Slot : "button"
       const { isMobile, state } = useSidebar()
 
       const button = (
@@ -564,7 +573,10 @@ const SidebarMenuButton = React.forwardRef<
             data-sidebar="menu-button"
             data-size={size}
             data-active={isActive}
-            className={ny(sidebarMenuButtonVariants({ variant, size }), className)}
+            className={ny(
+               sidebarMenuButtonVariants({ variant, size }),
+               className,
+            )}
             {...props}
          />
       )
@@ -573,7 +585,7 @@ const SidebarMenuButton = React.forwardRef<
          return button
       }
 
-      if (typeof tooltip === 'string') {
+      if (typeof tooltip === "string") {
          tooltip = {
             children: tooltip,
          }
@@ -585,70 +597,70 @@ const SidebarMenuButton = React.forwardRef<
             <TooltipContent
                side="right"
                align="center"
-               hidden={state !== 'collapsed' || isMobile}
+               hidden={state !== "collapsed" || isMobile}
                {...tooltip}
             />
          </Tooltip>
       )
    },
 )
-SidebarMenuButton.displayName = 'SidebarMenuButton'
+SidebarMenuButton.displayName = "SidebarMenuButton"
 
 const SidebarMenuAction = React.forwardRef<
    HTMLButtonElement,
-   React.ComponentProps<'button'> & {
+   React.ComponentProps<"button"> & {
       asChild?: boolean
       showOnHover?: boolean
    }
 >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-   const Comp = asChild ? Slot : 'button'
+   const Comp = asChild ? Slot : "button"
 
    return (
       <Comp
          ref={ref}
          data-sidebar="menu-action"
          className={ny(
-            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+            "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
             // Increases the hit area of the button on mobile.
-            'after:absolute after:-inset-2 after:md:hidden',
-            'peer-data-[size=sm]/menu-button:top-1',
-            'peer-data-[size=default]/menu-button:top-1.5',
-            'peer-data-[size=lg]/menu-button:top-2.5',
-            'group-data-[collapsible=icon]:hidden',
-            showOnHover
-            && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+            "after:absolute after:-inset-2 after:md:hidden",
+            "peer-data-[size=sm]/menu-button:top-1",
+            "peer-data-[size=default]/menu-button:top-1.5",
+            "peer-data-[size=lg]/menu-button:top-2.5",
+            "group-data-[collapsible=icon]:hidden",
+            showOnHover &&
+               "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarMenuAction.displayName = 'SidebarMenuAction'
+SidebarMenuAction.displayName = "SidebarMenuAction"
 
 const SidebarMenuBadge = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'>
+   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => (
    <div
       ref={ref}
       data-sidebar="menu-badge"
       className={ny(
-         'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',
-         'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-         'peer-data-[size=sm]/menu-button:top-1',
-         'peer-data-[size=default]/menu-button:top-1.5',
-         'peer-data-[size=lg]/menu-button:top-2.5',
-         'group-data-[collapsible=icon]:hidden',
+         "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+         "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+         "peer-data-[size=sm]/menu-button:top-1",
+         "peer-data-[size=default]/menu-button:top-1.5",
+         "peer-data-[size=lg]/menu-button:top-2.5",
+         "group-data-[collapsible=icon]:hidden",
          className,
       )}
       {...props}
    />
 ))
-SidebarMenuBadge.displayName = 'SidebarMenuBadge'
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
 
 const SidebarMenuSkeleton = React.forwardRef<
    HTMLDivElement,
-   React.ComponentProps<'div'> & {
+   React.ComponentProps<"div"> & {
       showIcon?: boolean
    }
 >(({ className, showIcon = false, ...props }, ref) => {
@@ -661,7 +673,10 @@ const SidebarMenuSkeleton = React.forwardRef<
       <div
          ref={ref}
          data-sidebar="menu-skeleton"
-         className={ny('flex h-8 items-center gap-2 rounded-md px-2', className)}
+         className={ny(
+            "flex h-8 items-center gap-2 rounded-md px-2",
+            className,
+         )}
          {...props}
       >
          {showIcon && (
@@ -675,47 +690,47 @@ const SidebarMenuSkeleton = React.forwardRef<
             data-sidebar="menu-skeleton-text"
             style={
                {
-                  '--skeleton-width': width,
+                  "--skeleton-width": width,
                } as React.CSSProperties
             }
          />
       </div>
    )
 })
-SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
 
 const SidebarMenuSub = React.forwardRef<
    HTMLUListElement,
-   React.ComponentProps<'ul'>
+   React.ComponentProps<"ul">
 >(({ className, ...props }, ref) => (
    <ul
       ref={ref}
       data-sidebar="menu-sub"
       className={ny(
-         'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-         'group-data-[collapsible=icon]:hidden',
+         "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+         "group-data-[collapsible=icon]:hidden",
          className,
       )}
       {...props}
    />
 ))
-SidebarMenuSub.displayName = 'SidebarMenuSub'
+SidebarMenuSub.displayName = "SidebarMenuSub"
 
 const SidebarMenuSubItem = React.forwardRef<
    HTMLLIElement,
-   React.ComponentProps<'li'>
+   React.ComponentProps<"li">
 >(({ ...props }, ref) => <li ref={ref} {...props} />)
-SidebarMenuSubItem.displayName = 'SidebarMenuSubItem'
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
 
 const SidebarMenuSubButton = React.forwardRef<
    HTMLAnchorElement,
-   React.ComponentProps<'a'> & {
+   React.ComponentProps<"a"> & {
       asChild?: boolean
-      size?: 'sm' | 'md'
+      size?: "sm" | "md"
       isActive?: boolean
    }
->(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
-   const Comp = asChild ? Slot : 'a'
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+   const Comp = asChild ? Slot : "a"
 
    return (
       <Comp
@@ -724,18 +739,18 @@ const SidebarMenuSubButton = React.forwardRef<
          data-size={size}
          data-active={isActive}
          className={ny(
-            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-            'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-            size === 'sm' && 'text-xs',
-            size === 'md' && 'text-sm',
-            'group-data-[collapsible=icon]:hidden',
+            "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+            "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+            size === "sm" && "text-xs",
+            size === "md" && "text-sm",
+            "group-data-[collapsible=icon]:hidden",
             className,
          )}
          {...props}
       />
    )
 })
-SidebarMenuSubButton.displayName = 'SidebarMenuSubButton'
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
 
 export {
    Sidebar,
diff --git a/apps/web/registry/miami/ui/skeleton.tsx b/apps/web/registry/miami/ui/skeleton.tsx
index 380d5ec7..80d58143 100644
--- a/apps/web/registry/miami/ui/skeleton.tsx
+++ b/apps/web/registry/miami/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 function Skeleton({
    className,
@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
    return (
       <div
-         className={ny('bg-primary/10 animate-pulse rounded-md', className)}
+         className={ny("bg-primary/10 animate-pulse rounded-md", className)}
          {...props}
       />
    )
diff --git a/apps/web/registry/miami/ui/slider.tsx b/apps/web/registry/miami/ui/slider.tsx
index 5c80ec54..16817e24 100644
--- a/apps/web/registry/miami/ui/slider.tsx
+++ b/apps/web/registry/miami/ui/slider.tsx
@@ -1,12 +1,13 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as SliderPrimitive from '@radix-ui/react-slider'
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
-interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
-   showSteps?: 'none' | 'half' | 'full'
+interface SliderProps
+   extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+   showSteps?: "none" | "half" | "full"
    formatLabel?: (value: number) => string
    formatLabelSide?: string
 }
@@ -14,122 +15,188 @@ interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimit
 const Slider = React.forwardRef<
    React.ElementRef<typeof SliderPrimitive.Root>,
    SliderProps
->(({ className, showSteps = 'none', formatLabel, formatLabelSide = 'top', ...props }, ref) => {
-   const { min = 0, max = 100, step = 1, orientation = 'horizontal', value, defaultValue, onValueChange } = props
-   const [hoveredThumbIndex, setHoveredThumbIndex] = React.useState<boolean>(false)
-   const numberOfSteps = Math.floor((max - min) / step)
-   const stepLines = Array.from({ length: numberOfSteps }, (_, index) => index * step + min)
-
-   const initialValue = Array.isArray(value) ? value : (Array.isArray(defaultValue) ? defaultValue : [min, max])
-   const [localValues, setLocalValues] = React.useState<number[]>(initialValue)
-
-   React.useEffect(() => {
-      if (!isEqual(value, localValues))
-         setLocalValues(Array.isArray(value) ? value : (Array.isArray(defaultValue) ? defaultValue : [min, max]))
-   }, [min, max, value])
+>(
+   (
+      {
+         className,
+         showSteps = "none",
+         formatLabel,
+         formatLabelSide = "top",
+         ...props
+      },
+      ref,
+   ) => {
+      const {
+         min = 0,
+         max = 100,
+         step = 1,
+         orientation = "horizontal",
+         value,
+         defaultValue,
+         onValueChange,
+      } = props
+      const [hoveredThumbIndex, setHoveredThumbIndex] =
+         React.useState<boolean>(false)
+      const numberOfSteps = Math.floor((max - min) / step)
+      const stepLines = Array.from(
+         { length: numberOfSteps },
+         (_, index) => index * step + min,
+      )
+
+      const initialValue = Array.isArray(value)
+         ? value
+         : Array.isArray(defaultValue)
+           ? defaultValue
+           : [min, max]
+      const [localValues, setLocalValues] =
+         React.useState<number[]>(initialValue)
+
+      React.useEffect(() => {
+         if (!isEqual(value, localValues))
+            setLocalValues(
+               Array.isArray(value)
+                  ? value
+                  : Array.isArray(defaultValue)
+                    ? defaultValue
+                    : [min, max],
+            )
+      }, [min, max, value])
+
+      const handleValueChange = (newValues: number[]) => {
+         setLocalValues(newValues)
+         if (onValueChange) onValueChange(newValues)
+      }
 
-   const handleValueChange = (newValues: number[]) => {
-      setLocalValues(newValues)
-      if (onValueChange)
-         onValueChange(newValues)
-   }
+      function isEqual(
+         array1: number[] | undefined,
+         array2: number[] | undefined,
+      ) {
+         array1 = array1 ?? []
+         array2 = array2 ?? []
 
-   function isEqual(array1: number[] | undefined, array2: number[] | undefined) {
-      array1 = array1 ?? []
-      array2 = array2 ?? []
+         if (array1.length !== array2.length) return false
 
-      if (array1.length !== array2.length)
-         return false
+         for (let i = 0; i < array1.length; i++) {
+            if (array1[i] !== array2[i]) return false
+         }
 
-      for (let i = 0; i < array1.length; i++) {
-         if (array1[i] !== array2[i])
-            return false
+         return true
       }
 
-      return true
-   }
-
-   return (
-      <SliderPrimitive.Root
-         ref={ref}
-         className={ny(
-            'relative flex cursor-pointer touch-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            orientation === 'horizontal' ? 'w-full items-center' : 'h-full justify-center',
-            className,
-         )}
-         min={min}
-         max={max}
-         step={step}
-         value={localValues}
-         onValueChange={value => handleValueChange(value)}
-         {...props}
-         onFocus={() => setHoveredThumbIndex(true)}
-         onBlur={() => setHoveredThumbIndex(false)}
-      >
-         <SliderPrimitive.Track className={ny(
-            'bg-primary/20 relative grow overflow-hidden rounded-full',
-            orientation === 'horizontal' ? 'h-1.5 w-full' : 'h-full w-1.5',
-         )}
-         >
-            <SliderPrimitive.Range className={ny(
-               'bg-primary absolute',
-               orientation === 'horizontal' ? 'h-full' : 'w-full',
+      return (
+         <SliderPrimitive.Root
+            ref={ref}
+            className={ny(
+               "relative flex cursor-pointer touch-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+               orientation === "horizontal"
+                  ? "w-full items-center"
+                  : "h-full justify-center",
+               className,
             )}
-            />
-            {showSteps !== undefined && showSteps !== 'none' && stepLines.map((value, index) => {
-               if (value === min || value === max)
-                  return null
-
-               const positionPercentage = ((value - min) / (max - min)) * 100
-               const adjustedPosition = 50 + (positionPercentage - 50) * 0.96
-               return (
-                  <div
-                     key={index}
-                     className={ny(
-                        { 'w-0.5 h-2': orientation !== 'vertical', 'w-2 h-0.5': orientation === 'vertical' },
-                        'bg-muted-foreground absolute',
-                        {
-                           'left-1': orientation === 'vertical' && showSteps === 'half',
-                           'top-1': orientation !== 'vertical' && showSteps === 'half',
-                           'left-0': orientation === 'vertical' && showSteps === 'full',
-                           'top-0': orientation !== 'vertical' && showSteps === 'full',
-                           '-translate-x-1/2': orientation !== 'vertical',
-                           '-translate-y-1/2': orientation === 'vertical',
-                        },
-                     )}
-                     style={{
-                        [orientation === 'vertical' ? 'bottom' : 'left']: `${adjustedPosition}%`,
-                     }}
-                  />
-               )
-            })}
-
-         </SliderPrimitive.Track>
-         {localValues.map((numberStep, index) => (
-            <SliderPrimitive.Thumb
-               key={index}
+            min={min}
+            max={max}
+            step={step}
+            value={localValues}
+            onValueChange={(value) => handleValueChange(value)}
+            {...props}
+            onFocus={() => setHoveredThumbIndex(true)}
+            onBlur={() => setHoveredThumbIndex(false)}
+         >
+            <SliderPrimitive.Track
                className={ny(
-                  'border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1',
+                  "bg-primary/20 relative grow overflow-hidden rounded-full",
+                  orientation === "horizontal"
+                     ? "h-1.5 w-full"
+                     : "h-full w-1.5",
                )}
             >
-               {hoveredThumbIndex && formatLabel && (
-                  <div
-                     className={ny(
-                        { 'bottom-8 left-1/2 -translate-x-1/2': formatLabelSide === 'top' },
-                        { 'top-8 left-1/2 -translate-x-1/2': formatLabelSide === 'bottom' },
-                        { 'right-8 -translate-y-1/4': formatLabelSide === 'left' },
-                        { 'left-8 -translate-y-1/4': formatLabelSide === 'right' },
-                        'bg-popover text-popover-foreground absolute z-30 w-max items-center justify-items-center rounded-md border px-2 py-1 text-center shadow-sm',
-                     )}
-                  >
-                     {formatLabel(numberStep)}
-                  </div>
-               )}
-            </SliderPrimitive.Thumb>
-         ))}
-      </SliderPrimitive.Root>
-   )
-})
+               <SliderPrimitive.Range
+                  className={ny(
+                     "bg-primary absolute",
+                     orientation === "horizontal" ? "h-full" : "w-full",
+                  )}
+               />
+               {showSteps !== undefined &&
+                  showSteps !== "none" &&
+                  stepLines.map((value, index) => {
+                     if (value === min || value === max) return null
+
+                     const positionPercentage =
+                        ((value - min) / (max - min)) * 100
+                     const adjustedPosition =
+                        50 + (positionPercentage - 50) * 0.96
+                     return (
+                        <div
+                           key={index}
+                           className={ny(
+                              {
+                                 "w-0.5 h-2": orientation !== "vertical",
+                                 "w-2 h-0.5": orientation === "vertical",
+                              },
+                              "bg-muted-foreground absolute",
+                              {
+                                 "left-1":
+                                    orientation === "vertical" &&
+                                    showSteps === "half",
+                                 "top-1":
+                                    orientation !== "vertical" &&
+                                    showSteps === "half",
+                                 "left-0":
+                                    orientation === "vertical" &&
+                                    showSteps === "full",
+                                 "top-0":
+                                    orientation !== "vertical" &&
+                                    showSteps === "full",
+                                 "-translate-x-1/2": orientation !== "vertical",
+                                 "-translate-y-1/2": orientation === "vertical",
+                              },
+                           )}
+                           style={{
+                              [orientation === "vertical" ? "bottom" : "left"]:
+                                 `${adjustedPosition}%`,
+                           }}
+                        />
+                     )
+                  })}
+            </SliderPrimitive.Track>
+            {localValues.map((numberStep, index) => (
+               <SliderPrimitive.Thumb
+                  key={index}
+                  className={ny(
+                     "border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1",
+                  )}
+               >
+                  {hoveredThumbIndex && formatLabel && (
+                     <div
+                        className={ny(
+                           {
+                              "bottom-8 left-1/2 -translate-x-1/2":
+                                 formatLabelSide === "top",
+                           },
+                           {
+                              "top-8 left-1/2 -translate-x-1/2":
+                                 formatLabelSide === "bottom",
+                           },
+                           {
+                              "right-8 -translate-y-1/4":
+                                 formatLabelSide === "left",
+                           },
+                           {
+                              "left-8 -translate-y-1/4":
+                                 formatLabelSide === "right",
+                           },
+                           "bg-popover text-popover-foreground absolute z-30 w-max items-center justify-items-center rounded-md border px-2 py-1 text-center shadow-sm",
+                        )}
+                     >
+                        {formatLabel(numberStep)}
+                     </div>
+                  )}
+               </SliderPrimitive.Thumb>
+            ))}
+         </SliderPrimitive.Root>
+      )
+   },
+)
 
 Slider.displayName = SliderPrimitive.Root.displayName
 
diff --git a/apps/web/registry/miami/ui/sonner.tsx b/apps/web/registry/miami/ui/sonner.tsx
index f6677d6c..be4efaf1 100644
--- a/apps/web/registry/miami/ui/sonner.tsx
+++ b/apps/web/registry/miami/ui/sonner.tsx
@@ -1,26 +1,25 @@
-'use client'
+"use client"
 
-import { useTheme } from 'next-themes'
-import { Toaster as Sonner } from 'sonner'
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
 function Toaster({ ...props }: ToasterProps) {
-   const { theme = 'system' } = useTheme()
+   const { theme = "system" } = useTheme()
 
    return (
       <Sonner
-         theme={theme as ToasterProps['theme']}
+         theme={theme as ToasterProps["theme"]}
          className="toaster group"
          toastOptions={{
             classNames: {
-               toast:
-            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-               description: 'group-[.toast]:text-muted-foreground',
+               toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+               description: "group-[.toast]:text-muted-foreground",
                actionButton:
-            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+                  "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
                cancelButton:
-            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+                  "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
             },
          }}
          {...props}
diff --git a/apps/web/registry/miami/ui/sparkles-text.tsx b/apps/web/registry/miami/ui/sparkles-text.tsx
index a3031beb..b107c101 100644
--- a/apps/web/registry/miami/ui/sparkles-text.tsx
+++ b/apps/web/registry/miami/ui/sparkles-text.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { motion } from 'framer-motion'
-import type { CSSProperties, ReactElement } from 'react'
-import { useEffect, useState } from 'react'
-import { ny } from '~/lib/utils'
+import { motion } from "framer-motion"
+import type { CSSProperties, ReactElement } from "react"
+import { useEffect, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface Sparkle {
    id: string
@@ -62,7 +62,7 @@ interface SparklesTextProps {
 
 const SparklesText: React.FC<SparklesTextProps> = ({
    text,
-   colors = { first: '#A07CFE', second: '#FE8FB5' },
+   colors = { first: "#A07CFE", second: "#FE8FB5" },
    className,
    sparklesCount = 10,
    ...props
@@ -87,10 +87,9 @@ const SparklesText: React.FC<SparklesTextProps> = ({
       }
 
       const updateStars = () => {
-         setSparkles(currentSparkles =>
+         setSparkles((currentSparkles) =>
             currentSparkles.map((star) => {
-               if (star.lifespan <= 0)
-                  return generateStar()
+               if (star.lifespan <= 0) return generateStar()
                else return { ...star, lifespan: star.lifespan - 0.1 }
             }),
          )
@@ -104,17 +103,17 @@ const SparklesText: React.FC<SparklesTextProps> = ({
 
    return (
       <div
-         className={ny('text-6xl font-bold', className)}
+         className={ny("text-6xl font-bold", className)}
          {...props}
          style={
             {
-               '--sparkles-first-color': `${colors.first}`,
-               '--sparkles-second-color': `${colors.second}`,
+               "--sparkles-first-color": `${colors.first}`,
+               "--sparkles-second-color": `${colors.second}`,
             } as CSSProperties
          }
       >
          <span className="relative inline-block">
-            {sparkles.map(sparkle => (
+            {sparkles.map((sparkle) => (
                <Sparkle key={sparkle.id} {...sparkle} />
             ))}
             <strong className="bg-gradient-to-r from-[var(--sparkles-first-color)] to-[var(--sparkles-second-color)] bg-clip-text text-transparent">
@@ -136,7 +135,7 @@ const Sparkle: React.FC<Sparkle> = ({ id, x, y, color, delay, scale }) => {
             scale: [0, scale, 0],
             rotate: [75, 120, 150],
          }}
-         transition={{ duration: 0.8, repeat: Infinity, delay }}
+         transition={{ duration: 0.8, repeat: Number.POSITIVE_INFINITY, delay }}
          width="21"
          height="21"
          viewBox="0 0 21 21"
diff --git a/apps/web/registry/miami/ui/star-rating.tsx b/apps/web/registry/miami/ui/star-rating.tsx
index ffb0b1b8..cd492997 100644
--- a/apps/web/registry/miami/ui/star-rating.tsx
+++ b/apps/web/registry/miami/ui/star-rating.tsx
@@ -1,9 +1,9 @@
-import type { Dispatch, SetStateAction } from 'react'
-import React from 'react'
-import type { LucideIcon, LucideProps } from 'lucide-react'
-import { StarIcon } from 'lucide-react'
+import type { LucideIcon, LucideProps } from "lucide-react"
+import { StarIcon } from "lucide-react"
+import type { Dispatch, SetStateAction } from "react"
+import type React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface StarWrapperProps {
    value?: number
@@ -31,27 +31,33 @@ function StarRating({
    const IconComponent = icon
 
    return (
-      <div className={ny('flex items-center gap-1', wrapperClassName)} {...restWrapperProps}>
+      <div
+         className={ny("flex items-center gap-1", wrapperClassName)}
+         {...restWrapperProps}
+      >
          {Array.from({ length: numStars }, (_, i) => {
             const isRated = i < value!
             const styledIconProps: LucideProps = {
                onMouseEnter: () => !showcase && !disabled && setValue!(i + 1),
-               className: ny('fill-primary stroke-primary size-5', {
-                  'opacity-50 pointer-events-none': disabled,
-                  'transition-transform duration-300 hover:scale-110': !disabled && !showcase,
-                  '!fill-muted !stroke-muted': !isRated,
-               }, iconClassName),
+               className: ny(
+                  "fill-primary stroke-primary size-5",
+                  {
+                     "opacity-50 pointer-events-none": disabled,
+                     "transition-transform duration-300 hover:scale-110":
+                        !disabled && !showcase,
+                     "!fill-muted !stroke-muted": !isRated,
+                  },
+                  iconClassName,
+               ),
                ...restIconProps,
             }
             return (
                <div key={i}>
-                  {IconComponent
-                     ? (
-                           <IconComponent {...styledIconProps} />
-                        )
-                     : (
-                           <StarIcon {...styledIconProps} />
-                        )}
+                  {IconComponent ? (
+                     <IconComponent {...styledIconProps} />
+                  ) : (
+                     <StarIcon {...styledIconProps} />
+                  )}
                </div>
             )
          })}
diff --git a/apps/web/registry/miami/ui/stepper.tsx b/apps/web/registry/miami/ui/stepper.tsx
index ef5e8169..df322de4 100644
--- a/apps/web/registry/miami/ui/stepper.tsx
+++ b/apps/web/registry/miami/ui/stepper.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { cva } from 'class-variance-authority'
-import type { LucideIcon } from 'lucide-react'
-import { CheckIcon, Loader2, X } from 'lucide-react'
+import { cva } from "class-variance-authority"
+import type { LucideIcon } from "lucide-react"
+import { CheckIcon, Loader2, X } from "lucide-react"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { Button } from '~/registry/miami/ui/button'
+import { ny } from "~/lib/utils"
+import { Button } from "~/registry/miami/ui/button"
 import {
    Collapsible,
    CollapsibleContent,
-} from '~/registry/miami/ui/collapsible'
+} from "~/registry/miami/ui/collapsible"
 
 // <---------- CONTEXT ---------->
 
@@ -33,32 +33,32 @@ const StepperContext = React.createContext<
       setStep: (step: number) => void
    }
 >({
-            steps: [],
-            activeStep: 0,
-            initialStep: 0,
-            nextStep: () => {},
-            prevStep: () => {},
-            resetSteps: () => {},
-            setStep: () => {},
-         })
+   steps: [],
+   activeStep: 0,
+   initialStep: 0,
+   nextStep: () => {},
+   prevStep: () => {},
+   resetSteps: () => {},
+   setStep: () => {},
+})
 
 interface StepperContextProviderProps {
-   value: Omit<StepperContextValue, 'activeStep'>
+   value: Omit<StepperContextValue, "activeStep">
    children: React.ReactNode
 }
 
 function StepperProvider({ value, children }: StepperContextProviderProps) {
-   const isError = value.state === 'error'
-   const isLoading = value.state === 'loading'
+   const isError = value.state === "error"
+   const isLoading = value.state === "loading"
 
    const [activeStep, setActiveStep] = React.useState(value.initialStep)
 
    const nextStep = () => {
-      setActiveStep(prev => prev + 1)
+      setActiveStep((prev) => prev + 1)
    }
 
    const prevStep = () => {
-      setActiveStep(prev => prev - 1)
+      setActiveStep((prev) => prev - 1)
    }
 
    const resetSteps = () => {
@@ -103,7 +103,7 @@ function useStepper() {
    const context = React.useContext(StepperContext)
 
    if (context === undefined)
-      throw new Error('useStepper must be used within a StepperProvider')
+      throw new Error("useStepper must be used within a StepperProvider")
 
    const { children, className, ...rest } = context
 
@@ -137,10 +137,10 @@ function useMediaQuery(query: string) {
       }
 
       const result = matchMedia(query)
-      result.addEventListener('change', onChange)
+      result.addEventListener("change", onChange)
       setValue(result.matches)
 
-      return () => result.removeEventListener('change', onChange)
+      return () => result.removeEventListener("change", onChange)
    }, [query])
 
    return value
@@ -157,41 +157,41 @@ interface StepItem {
 }
 
 interface StepOptions {
-   orientation?: 'vertical' | 'horizontal'
-   state?: 'loading' | 'error'
+   orientation?: "vertical" | "horizontal"
+   state?: "loading" | "error"
    responsive?: boolean
    checkIcon?: IconType
    errorIcon?: IconType
    onClickStep?: (step: number, setStep: (step: number) => void) => void
    mobileBreakpoint?: string
-   variant?: 'circle' | 'circle-alt' | 'line'
+   variant?: "circle" | "circle-alt" | "line"
    expandVerticalSteps?: boolean
-   size?: 'sm' | 'md' | 'lg'
+   size?: "sm" | "md" | "lg"
    styles?: {
       /** Styles for the main container */
-      'main-container'?: string
+      "main-container"?: string
       /** Styles for the horizontal step */
-      'horizontal-step'?: string
+      "horizontal-step"?: string
       /** Styles for the horizontal step container (button and labels) */
-      'horizontal-step-container'?: string
+      "horizontal-step-container"?: string
       /** Styles for the vertical step */
-      'vertical-step'?: string
+      "vertical-step"?: string
       /** Styles for the vertical step container (button and labels) */
-      'vertical-step-container'?: string
+      "vertical-step-container"?: string
       /** Styles for the vertical step content */
-      'vertical-step-content'?: string
+      "vertical-step-content"?: string
       /** Styles for the step button container */
-      'step-button-container'?: string
+      "step-button-container"?: string
       /** Styles for the label and description container */
-      'step-label-container'?: string
+      "step-label-container"?: string
       /** Styles for the step label */
-      'step-label'?: string
+      "step-label"?: string
       /** Styles for the step description */
-      'step-description'?: string
+      "step-description"?: string
    }
    variables?: {
-      '--step-icon-size'?: string
-      '--step-gap'?: string
+      "--step-icon-size"?: string
+      "--step-gap"?: string
    }
    scrollTracking?: boolean
 }
@@ -203,9 +203,9 @@ interface StepperProps extends StepOptions {
 }
 
 const VARIABLE_SIZES = {
-   sm: '32px',
-   md: '36px',
-   lg: '40px',
+   sm: "32px",
+   md: "36px",
+   lg: "40px",
 }
 
 const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
@@ -237,7 +237,7 @@ const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
 
       const footer = childArr.map((child, _index) => {
          if (!React.isValidElement(child))
-            throw new Error('Stepper children must be valid React elements.')
+            throw new Error("Stepper children must be valid React elements.")
 
          if (child.type === Step) {
             items.push(child)
@@ -250,14 +250,14 @@ const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
       const stepCount = items.length
 
       const isMobile = useMediaQuery(
-      `(max-width: ${mobileBreakpoint || '768px'})`,
+         `(max-width: ${mobileBreakpoint || "768px"})`,
       )
 
       const clickable = !!onClickStep
 
-      const orientation = isMobile && responsive ? 'vertical' : orientationProp
+      const orientation = isMobile && responsive ? "vertical" : orientationProp
 
-      const isVertical = orientation === 'vertical'
+      const isVertical = orientation === "vertical"
 
       return (
          <StepperProvider
@@ -273,7 +273,7 @@ const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
                clickable,
                stepCount,
                isVertical,
-               variant: variant || 'circle',
+               variant: variant || "circle",
                expandVerticalSteps,
                steps,
                scrollTracking,
@@ -283,27 +283,27 @@ const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
             <div
                ref={ref}
                className={ny(
-                  'stepper__main-container',
-                  'flex w-full flex-wrap',
-                  stepCount === 1 ? 'justify-end' : 'justify-between',
-                  orientation === 'vertical' ? 'flex-col' : 'flex-row',
-                  variant === 'line' && orientation === 'horizontal' && 'gap-4',
+                  "stepper__main-container",
+                  "flex w-full flex-wrap",
+                  stepCount === 1 ? "justify-end" : "justify-between",
+                  orientation === "vertical" ? "flex-col" : "flex-row",
+                  variant === "line" && orientation === "horizontal" && "gap-4",
                   className,
-                  styles?.['main-container'],
+                  styles?.["main-container"],
                )}
                style={
                   {
-                     '--step-icon-size':
-                variables?.['--step-icon-size']
-                || `${VARIABLE_SIZES[size || 'md']}`,
-                     '--step-gap': variables?.['--step-gap'] || '8px',
+                     "--step-icon-size":
+                        variables?.["--step-icon-size"] ||
+                        `${VARIABLE_SIZES[size || "md"]}`,
+                     "--step-gap": variables?.["--step-gap"] || "8px",
                   } as React.CSSProperties
                }
                {...rest}
             >
                <VerticalContent>{items}</VerticalContent>
             </div>
-            {orientation === 'horizontal' && (
+            {orientation === "horizontal" && (
                <HorizontalContent>{items}</HorizontalContent>
             )}
             {footer}
@@ -313,8 +313,8 @@ const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
 )
 
 Stepper.defaultProps = {
-   size: 'md',
-   orientation: 'horizontal',
+   size: "md",
+   orientation: "horizontal",
    responsive: true,
 }
 
@@ -327,10 +327,10 @@ function VerticalContent({ children }: { children: React.ReactNode }) {
    return (
       <>
          {React.Children.map(children, (child, i) => {
-            const isCompletedStep
-          = (React.isValidElement(child)
-          && (child.props as any).isCompletedStep)
-          ?? i < activeStep
+            const isCompletedStep =
+               (React.isValidElement(child) &&
+                  (child.props as any).isCompletedStep) ??
+               i < activeStep
             const isLastStep = i === stepCount - 1
             const isCurrentStep = i === activeStep
 
@@ -354,16 +354,17 @@ function HorizontalContent({ children }: { children: React.ReactNode }) {
    const { activeStep } = useStepper()
    const childArr = React.Children.toArray(children)
 
-   if (activeStep > childArr.length)
-      return null
+   if (activeStep > childArr.length) return null
 
    return (
       <>
          {React.Children.map(childArr[activeStep], (node) => {
-            if (!React.isValidElement(node))
-               return null
+            if (!React.isValidElement(node)) return null
 
-            return React.Children.map(node.props.children, childNode => childNode)
+            return React.Children.map(
+               node.props.children,
+               (childNode) => childNode,
+            )
          })}
       </>
    )
@@ -375,7 +376,7 @@ interface StepProps extends React.HTMLAttributes<HTMLLIElement> {
    label?: string | React.ReactNode
    description?: string
    icon?: IconType
-   state?: 'loading' | 'error'
+   state?: "loading" | "error"
    checkIcon?: IconType
    errorIcon?: IconType
    isCompletedStep?: boolean
@@ -468,23 +469,23 @@ type VerticalStepProps = StepSharedProps & {
 
 const verticalStepVariants = cva(
    [
-      'flex flex-col relative transition-all duration-200',
-      'data-[completed=true]:[&:not(:last-child)]:after:bg-primary',
-      'data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive',
+      "flex flex-col relative transition-all duration-200",
+      "data-[completed=true]:[&:not(:last-child)]:after:bg-primary",
+      "data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive",
    ],
    {
       variants: {
          variant: {
             circle: ny(
-               '[&:not(:last-child)]:gap-[var(--step-gap)] [&:not(:last-child)]:pb-[var(--step-gap)]',
-               '[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:w-[2px] [&:not(:last-child)]:after:content-[\'\']',
-               '[&:not(:last-child)]:after:inset-x-[calc(var(--step-icon-size)/2)]',
-               '[&:not(:last-child)]:after:absolute',
-               '[&:not(:last-child)]:after:top-[calc(var(--step-icon-size)+var(--step-gap))]',
-               '[&:not(:last-child)]:after:bottom-[var(--step-gap)]',
-               '[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200',
+               "[&:not(:last-child)]:gap-[var(--step-gap)] [&:not(:last-child)]:pb-[var(--step-gap)]",
+               "[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:w-[2px] [&:not(:last-child)]:after:content-['']",
+               "[&:not(:last-child)]:after:inset-x-[calc(var(--step-icon-size)/2)]",
+               "[&:not(:last-child)]:after:absolute",
+               "[&:not(:last-child)]:after:top-[calc(var(--step-icon-size)+var(--step-gap))]",
+               "[&:not(:last-child)]:after:bottom-[var(--step-gap)]",
+               "[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200",
             ),
-            line: 'flex-1 border-t-0 mb-4',
+            line: "flex-1 border-t-0 mb-4",
          },
       },
    },
@@ -526,13 +527,13 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
       } = useStepper()
 
       const opacity = hasVisited ? 1 : 0.8
-      const localIsLoading = isLoading || state === 'loading'
-      const localIsError = isError || state === 'error'
+      const localIsLoading = isLoading || state === "loading"
+      const localIsError = isError || state === "error"
 
       const isLastStep = index === steps.length - 1
 
-      const active
-      = variant === 'line' ? isCompletedStep || isCurrentStep : isCompletedStep
+      const active =
+         variant === "line" ? isCompletedStep || isCurrentStep : isCompletedStep
       const checkIcon = checkIconProp || checkIconContext
       const errorIcon = errorIconProp || errorIconContext
 
@@ -543,19 +544,19 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
                   <CollapsibleContent
                      ref={(node) => {
                         if (
-                        // If the step is the first step and the previous step
-                        // was the last step or if the step is not the first step
-                        // This prevents initial scrolling when the stepper
-                        // is located anywhere other than the top of the view.
-                           scrollTracking
-                           && ((index === 0
-                           && previousActiveStep
-                           && previousActiveStep === steps.length)
-                           || (index && index > 0))
+                           // If the step is the first step and the previous step
+                           // was the last step or if the step is not the first step
+                           // This prevents initial scrolling when the stepper
+                           // is located anywhere other than the top of the view.
+                           scrollTracking &&
+                           ((index === 0 &&
+                              previousActiveStep &&
+                              previousActiveStep === steps.length) ||
+                              (index && index > 0))
                         ) {
                            node?.scrollIntoView({
-                              behavior: 'smooth',
-                              block: 'center',
+                              behavior: "smooth",
+                              block: "center",
                            })
                         }
                      }}
@@ -573,12 +574,12 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
          <div
             ref={ref}
             className={ny(
-               'stepper__vertical-step',
+               "stepper__vertical-step",
                verticalStepVariants({
-                  variant: variant?.includes('circle') ? 'circle' : 'line',
+                  variant: variant?.includes("circle") ? "circle" : "line",
                }),
-               isLastStepCurrentStep && 'gap-[var(--step-gap)]',
-               styles?.['vertical-step'],
+               isLastStepCurrentStep && "gap-[var(--step-gap)]",
+               styles?.["vertical-step"],
             )}
             data-optional={steps[index || 0]?.optional}
             data-completed={isCompletedStep}
@@ -586,25 +587,27 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
             data-clickable={clickable || !!onClickStep}
             data-invalid={localIsError}
             onClick={() => {
-               if (onClickStep)
-                  onClickStep(index || 0, setStep)
-               else
-                  onClickStepGeneral?.(index || 0, setStep)
+               if (onClickStep) onClickStep(index || 0, setStep)
+               else onClickStepGeneral?.(index || 0, setStep)
             }}
          >
             <div
                data-vertical
                data-active={active}
                className={ny(
-                  'stepper__vertical-step-container',
-                  'flex items-center',
-                  variant === 'line'
-                  && 'data-[active=true]:border-primary border-s-[3px] py-2 ps-3',
-                  styles?.['vertical-step-container'],
+                  "stepper__vertical-step-container",
+                  "flex items-center",
+                  variant === "line" &&
+                     "data-[active=true]:border-primary border-s-[3px] py-2 ps-3",
+                  styles?.["vertical-step-container"],
                )}
             >
                <StepButtonContainer
-                  {...{ isLoading: localIsLoading, isError: localIsError, ...props }}
+                  {...{
+                     isLoading: localIsLoading,
+                     isError: localIsError,
+                     ...props,
+                  }}
                >
                   <StepIcon
                      {...{
@@ -627,11 +630,11 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>(
             </div>
             <div
                className={ny(
-                  'stepper__vertical-step-content',
-                  !isLastStep && 'min-h-4',
-                  variant !== 'line' && 'ps-[--step-icon-size]',
-                  variant === 'line' && orientation === 'vertical' && 'min-h-0',
-                  styles?.['vertical-step-content'],
+                  "stepper__vertical-step-content",
+                  !isLastStep && "min-h-4",
+                  variant !== "line" && "ps-[--step-icon-size]",
+                  variant === "line" && orientation === "vertical" && "min-h-0",
+                  styles?.["vertical-step-content"],
                )}
             >
                {renderChildren()}
@@ -672,13 +675,13 @@ const HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(
          errorIcon: errorIconProp,
       } = props
 
-      const localIsLoading = isLoading || state === 'loading'
-      const localIsError = isError || state === 'error'
+      const localIsLoading = isLoading || state === "loading"
+      const localIsError = isError || state === "error"
 
       const opacity = hasVisited ? 1 : 0.8
 
-      const active
-      = variant === 'line' ? isCompletedStep || isCurrentStep : isCompletedStep
+      const active =
+         variant === "line" ? isCompletedStep || isCurrentStep : isCompletedStep
 
       const checkIcon = checkIconProp || checkIconContext
       const errorIcon = errorIconProp || errorIconContext
@@ -687,20 +690,20 @@ const HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(
          <div
             aria-disabled={!hasVisited}
             className={ny(
-               'stepper__horizontal-step',
-               'relative flex items-center transition-all duration-200',
-               '[&:not(:last-child)]:flex-1',
-               '[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200',
-               '[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:content-[\'\']',
-               'data-[completed=true]:[&:not(:last-child)]:after:bg-primary',
-               'data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive',
-               variant === 'circle-alt'
-               && 'flex-1 flex-col justify-start [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:-order-1 [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]',
-               variant === 'circle'
-               && '[&:not(:last-child)]:after:me-[var(--step-gap)] [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:flex-1',
-               variant === 'line'
-               && 'data-[active=true]:border-primary flex-1 flex-col border-t-[3px]',
-               styles?.['horizontal-step'],
+               "stepper__horizontal-step",
+               "relative flex items-center transition-all duration-200",
+               "[&:not(:last-child)]:flex-1",
+               "[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200",
+               "[&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:content-['']",
+               "data-[completed=true]:[&:not(:last-child)]:after:bg-primary",
+               "data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive",
+               variant === "circle-alt" &&
+                  "flex-1 flex-col justify-start [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:-order-1 [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]",
+               variant === "circle" &&
+                  "[&:not(:last-child)]:after:me-[var(--step-gap)] [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:flex-1",
+               variant === "line" &&
+                  "data-[active=true]:border-primary flex-1 flex-col border-t-[3px]",
+               styles?.["horizontal-step"],
             )}
             data-optional={steps[index || 0]?.optional}
             data-completed={isCompletedStep}
@@ -712,15 +715,19 @@ const HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>(
          >
             <div
                className={ny(
-                  'stepper__horizontal-step-container',
-                  'flex items-center',
-                  variant === 'circle-alt' && 'flex-col justify-center gap-1',
-                  variant === 'line' && 'w-full',
-                  styles?.['horizontal-step-container'],
+                  "stepper__horizontal-step-container",
+                  "flex items-center",
+                  variant === "circle-alt" && "flex-col justify-center gap-1",
+                  variant === "line" && "w-full",
+                  styles?.["horizontal-step-container"],
                )}
             >
                <StepButtonContainer
-                  {...{ ...props, isError: localIsError, isLoading: localIsLoading }}
+                  {...{
+                     ...props,
+                     isError: localIsError,
+                     isLoading: localIsLoading,
+                  }}
                >
                   <StepIcon
                      {...{
@@ -772,25 +779,24 @@ function StepButtonContainer({
 
    const isLoading = isLoadingProp || isLoadingContext
 
-   if (variant === 'line')
-      return null
+   if (variant === "line") return null
 
    return (
       <Button
          variant="ghost"
          tabIndex={currentStepClickable ? 0 : -1}
          className={ny(
-            'stepper__step-button-container',
-            'pointer-events-none rounded-full p-0',
-            'size-[var(--step-icon-size)]',
-            'flex items-center justify-center rounded-full border-2',
-            'data-[clickable=true]:pointer-events-auto',
-            'data-[active=true]:bg-primary data-[active=true]:border-primary data-[active=true]:text-primary-foreground',
-            'data-[current=true]:border-primary data-[current=true]:bg-secondary',
-            'data-[invalid=true]:bg-destructive data-[invalid=true]:border-destructive data-[invalid=true]:text-destructive-foreground',
-            styles?.['step-button-container'],
+            "stepper__step-button-container",
+            "pointer-events-none rounded-full p-0",
+            "size-[var(--step-icon-size)]",
+            "flex items-center justify-center rounded-full border-2",
+            "data-[clickable=true]:pointer-events-auto",
+            "data-[active=true]:bg-primary data-[active=true]:border-primary data-[active=true]:text-primary-foreground",
+            "data-[current=true]:border-primary data-[current=true]:bg-secondary",
+            "data-[invalid=true]:bg-destructive data-[invalid=true]:border-destructive data-[invalid=true]:text-destructive-foreground",
+            styles?.["step-button-container"],
          )}
-         aria-current={isCurrentStep ? 'step' : undefined}
+         aria-current={isCurrentStep ? "step" : undefined}
          data-current={isCurrentStep}
          data-invalid={isError && (isCurrentStep || isCompletedStep)}
          data-active={isCompletedStep}
@@ -806,16 +812,16 @@ function StepButtonContainer({
 
 type IconType = LucideIcon | React.ComponentType<any> | undefined
 
-const iconVariants = cva('', {
+const iconVariants = cva("", {
    variants: {
       size: {
-         sm: 'size-4',
-         md: 'size-4',
-         lg: 'size-5',
+         sm: "size-4",
+         md: "size-4",
+         lg: "size-5",
       },
    },
    defaultVariants: {
-      size: 'md',
+      size: "md",
    },
 })
 
@@ -847,18 +853,15 @@ const StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(
          errorIcon: CustomErrorIcon,
       } = props
 
-      const Icon = React.useMemo(
-         () => (CustomIcon || null),
-         [CustomIcon],
-      )
+      const Icon = React.useMemo(() => CustomIcon || null, [CustomIcon])
 
       const ErrorIcon = React.useMemo(
-         () => (CustomErrorIcon || null),
+         () => CustomErrorIcon || null,
          [CustomErrorIcon],
       )
 
       const Check = React.useMemo(
-         () => (CustomCheckIcon || CheckIcon),
+         () => CustomCheckIcon || CheckIcon,
          [CustomCheckIcon],
       )
 
@@ -894,7 +897,9 @@ const StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(
             }
             if (isLoading) {
                return (
-                  <Loader2 className={ny(iconVariants({ size }), 'animate-spin')} />
+                  <Loader2
+                     className={ny(iconVariants({ size }), "animate-spin")}
+                  />
                )
             }
          }
@@ -909,7 +914,7 @@ const StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>(
             <span
                ref={ref}
                key="label"
-               className={ny('text-md text-center font-medium')}
+               className={ny("text-md text-center font-medium")}
             >
                {(index || 0) + 1}
             </span>
@@ -939,29 +944,29 @@ interface StepLabelProps {
    description?: string | null
 }
 
-const labelVariants = cva('', {
+const labelVariants = cva("", {
    variants: {
       size: {
-         sm: 'text-sm',
-         md: 'text-sm',
-         lg: 'text-base',
+         sm: "text-sm",
+         md: "text-sm",
+         lg: "text-base",
       },
    },
    defaultVariants: {
-      size: 'md',
+      size: "md",
    },
 })
 
-const descriptionVariants = cva('', {
+const descriptionVariants = cva("", {
    variants: {
       size: {
-         sm: 'text-xs',
-         md: 'text-xs',
-         lg: 'text-sm',
+         sm: "text-xs",
+         md: "text-xs",
+         lg: "text-sm",
       },
    },
    defaultVariants: {
-      size: 'md',
+      size: "md",
    },
 })
 
@@ -974,49 +979,51 @@ function StepLabel({
    const { variant, styles, size, orientation } = useStepper()
    const shouldRender = !!label || !!description
 
-   return shouldRender
-      ? (
-            <div
-               aria-current={isCurrentStep ? 'step' : undefined}
+   return shouldRender ? (
+      <div
+         aria-current={isCurrentStep ? "step" : undefined}
+         className={ny(
+            "stepper__step-label-container",
+            "flex flex-col",
+            variant !== "line"
+               ? "ms-2"
+               : orientation === "horizontal" && "my-2",
+            variant === "circle-alt" && "text-center",
+            variant === "circle-alt" && orientation === "horizontal" && "ms-0",
+            variant === "circle-alt" &&
+               orientation === "vertical" &&
+               "text-start",
+            styles?.["step-label-container"],
+         )}
+         style={{
+            opacity,
+         }}
+      >
+         {!!label && (
+            <span
                className={ny(
-                  'stepper__step-label-container',
-                  'flex flex-col',
-                  variant !== 'line' ? 'ms-2' : orientation === 'horizontal' && 'my-2',
-                  variant === 'circle-alt' && 'text-center',
-                  variant === 'circle-alt' && orientation === 'horizontal' && 'ms-0',
-                  variant === 'circle-alt' && orientation === 'vertical' && 'text-start',
-                  styles?.['step-label-container'],
+                  "stepper__step-label",
+                  labelVariants({ size }),
+                  styles?.["step-label"],
                )}
-               style={{
-                  opacity,
-               }}
             >
-               {!!label && (
-                  <span
-                     className={ny(
-                        'stepper__step-label',
-                        labelVariants({ size }),
-                        styles?.['step-label'],
-                     )}
-                  >
-                     {label}
-                  </span>
-               )}
-               {!!description && (
-                  <span
-                     className={ny(
-                        'stepper__step-description',
-                        'text-muted-foreground',
-                        descriptionVariants({ size }),
-                        styles?.['step-description'],
-                     )}
-                  >
-                     {description}
-                  </span>
+               {label}
+            </span>
+         )}
+         {!!description && (
+            <span
+               className={ny(
+                  "stepper__step-description",
+                  "text-muted-foreground",
+                  descriptionVariants({ size }),
+                  styles?.["step-description"],
                )}
-            </div>
-         )
-      : null
+            >
+               {description}
+            </span>
+         )}
+      </div>
+   ) : null
 }
 
 export { Stepper, Step, useStepper }
diff --git a/apps/web/registry/miami/ui/switch.tsx b/apps/web/registry/miami/ui/switch.tsx
index 103719e8..def6d921 100644
--- a/apps/web/registry/miami/ui/switch.tsx
+++ b/apps/web/registry/miami/ui/switch.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as SwitchPrimitives from '@radix-ui/react-switch'
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Switch = React.forwardRef<
    React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <SwitchPrimitives.Root
       className={ny(
-         'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+         "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
          className,
       )}
       {...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
    >
       <SwitchPrimitives.Thumb
          className={ny(
-            'bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+            "bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
          )}
       />
    </SwitchPrimitives.Root>
diff --git a/apps/web/registry/miami/ui/table.tsx b/apps/web/registry/miami/ui/table.tsx
index 40424ef7..fa729ff4 100644
--- a/apps/web/registry/miami/ui/table.tsx
+++ b/apps/web/registry/miami/ui/table.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Table = React.forwardRef<
    HTMLTableElement,
@@ -9,20 +9,20 @@ const Table = React.forwardRef<
    <div className="relative w-full overflow-auto">
       <table
          ref={ref}
-         className={ny('w-full caption-bottom text-sm', className)}
+         className={ny("w-full caption-bottom text-sm", className)}
          {...props}
       />
    </div>
 ))
-Table.displayName = 'Table'
+Table.displayName = "Table"
 
 const TableHeader = React.forwardRef<
    HTMLTableSectionElement,
    React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-   <thead ref={ref} className={ny('[&_tr]:border-b', className)} {...props} />
+   <thead ref={ref} className={ny("[&_tr]:border-b", className)} {...props} />
 ))
-TableHeader.displayName = 'TableHeader'
+TableHeader.displayName = "TableHeader"
 
 const TableBody = React.forwardRef<
    HTMLTableSectionElement,
@@ -30,11 +30,11 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <tbody
       ref={ref}
-      className={ny('[&_tr:last-child]:border-0', className)}
+      className={ny("[&_tr:last-child]:border-0", className)}
       {...props}
    />
 ))
-TableBody.displayName = 'TableBody'
+TableBody.displayName = "TableBody"
 
 const TableFooter = React.forwardRef<
    HTMLTableSectionElement,
@@ -43,13 +43,13 @@ const TableFooter = React.forwardRef<
    <tfoot
       ref={ref}
       className={ny(
-         'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+         "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
          className,
       )}
       {...props}
    />
 ))
-TableFooter.displayName = 'TableFooter'
+TableFooter.displayName = "TableFooter"
 
 const TableRow = React.forwardRef<
    HTMLTableRowElement,
@@ -58,13 +58,13 @@ const TableRow = React.forwardRef<
    <tr
       ref={ref}
       className={ny(
-         'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+         "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
          className,
       )}
       {...props}
    />
 ))
-TableRow.displayName = 'TableRow'
+TableRow.displayName = "TableRow"
 
 const TableHead = React.forwardRef<
    HTMLTableCellElement,
@@ -73,13 +73,13 @@ const TableHead = React.forwardRef<
    <th
       ref={ref}
       className={ny(
-         'text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+         "text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
          className,
       )}
       {...props}
    />
 ))
-TableHead.displayName = 'TableHead'
+TableHead.displayName = "TableHead"
 
 const TableCell = React.forwardRef<
    HTMLTableCellElement,
@@ -88,13 +88,13 @@ const TableCell = React.forwardRef<
    <td
       ref={ref}
       className={ny(
-         'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+         "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
          className,
       )}
       {...props}
    />
 ))
-TableCell.displayName = 'TableCell'
+TableCell.displayName = "TableCell"
 
 const TableCaption = React.forwardRef<
    HTMLTableCaptionElement,
@@ -102,11 +102,11 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <caption
       ref={ref}
-      className={ny('text-muted-foreground mt-4 text-sm', className)}
+      className={ny("text-muted-foreground mt-4 text-sm", className)}
       {...props}
    />
 ))
-TableCaption.displayName = 'TableCaption'
+TableCaption.displayName = "TableCaption"
 
 export {
    Table,
diff --git a/apps/web/registry/miami/ui/tabs.tsx b/apps/web/registry/miami/ui/tabs.tsx
index 8be20bed..d9da6fe2 100644
--- a/apps/web/registry/miami/ui/tabs.tsx
+++ b/apps/web/registry/miami/ui/tabs.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const Tabs = TabsPrimitive.Root
 
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
    <TabsPrimitive.List
       ref={ref}
       className={ny(
-         'bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1',
+         "bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1",
          className,
       )}
       {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
    <TabsPrimitive.Trigger
       ref={ref}
       className={ny(
-         'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow',
+         "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow",
          className,
       )}
       {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
    <TabsPrimitive.Content
       ref={ref}
       className={ny(
-         'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+         "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
          className,
       )}
       {...props}
diff --git a/apps/web/registry/miami/ui/terminal.tsx b/apps/web/registry/miami/ui/terminal.tsx
new file mode 100644
index 00000000..623d3f8b
--- /dev/null
+++ b/apps/web/registry/miami/ui/terminal.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import { type MotionProps, motion } from "motion/react"
+import { useEffect, useRef, useState } from "react"
+import { ny } from "~/lib/utils"
+
+interface AnimatedSpanProps extends MotionProps {
+   children: React.ReactNode
+   delay?: number
+   className?: string
+}
+
+export const AnimatedSpan = ({
+   children,
+   delay = 0,
+   className,
+   ...props
+}: AnimatedSpanProps) => (
+   <motion.div
+      initial={{ opacity: 0, y: -5 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, delay: delay / 1000 }}
+      className={ny("grid text-sm font-normal tracking-tight", className)}
+      {...props}
+   >
+      {children}
+   </motion.div>
+)
+
+interface TypingAnimationProps extends MotionProps {
+   children: string
+   className?: string
+   duration?: number
+   delay?: number
+   as?: React.ElementType
+}
+
+export const TypingAnimation = ({
+   children,
+   className,
+   duration = 60,
+   delay = 0,
+   as: Component = "span",
+   ...props
+}: TypingAnimationProps) => {
+   if (typeof children !== "string") {
+      throw new Error("TypingAnimation: children must be a string. Received:")
+   }
+
+   const MotionComponent = motion.create(Component, {
+      forwardMotionProps: true,
+   })
+
+   const [displayedText, setDisplayedText] = useState<string>("")
+   const [started, setStarted] = useState(false)
+   const elementRef = useRef<HTMLElement | null>(null)
+
+   useEffect(() => {
+      const startTimeout = setTimeout(() => {
+         setStarted(true)
+      }, delay)
+      return () => clearTimeout(startTimeout)
+   }, [delay])
+
+   useEffect(() => {
+      if (!started) return
+
+      let i = 0
+      const typingEffect = setInterval(() => {
+         if (i < children.length) {
+            setDisplayedText(children.substring(0, i + 1))
+            i++
+         } else {
+            clearInterval(typingEffect)
+         }
+      }, duration)
+
+      return () => {
+         clearInterval(typingEffect)
+      }
+   }, [children, duration, started])
+
+   return (
+      <MotionComponent
+         ref={elementRef}
+         className={ny("text-sm font-normal tracking-tight", className)}
+         {...props}
+      >
+         {displayedText}
+      </MotionComponent>
+   )
+}
+
+interface TerminalProps {
+   children: React.ReactNode
+   className?: string
+}
+
+export const Terminal = ({ children, className }: TerminalProps) => {
+   return (
+      <div
+         className={ny(
+            "z-0 h-full max-h-[400px] w-full max-w-lg rounded-xl border border-border bg-background",
+            className,
+         )}
+      >
+         <div className="flex flex-col gap-y-2 border-b border-border p-4">
+            <div className="flex flex-row gap-x-2">
+               <div className="h-2 w-2 rounded-full bg-red-500"></div>
+               <div className="h-2 w-2 rounded-full bg-yellow-500"></div>
+               <div className="h-2 w-2 rounded-full bg-green-500"></div>
+            </div>
+         </div>
+         <pre className="p-4">
+            <code className="grid gap-y-1 overflow-auto">{children}</code>
+         </pre>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/ui/text-animate.tsx b/apps/web/registry/miami/ui/text-animate.tsx
new file mode 100644
index 00000000..5e04da80
--- /dev/null
+++ b/apps/web/registry/miami/ui/text-animate.tsx
@@ -0,0 +1,391 @@
+"use client"
+
+import {
+   AnimatePresence,
+   type MotionProps,
+   type Variants,
+   motion,
+} from "motion/react"
+import type { ElementType } from "react"
+import { ny } from "~/registry/miami/lib/utils"
+
+type AnimationType = "text" | "word" | "character" | "line"
+type AnimationVariant =
+   | "fadeIn"
+   | "blurIn"
+   | "blurInUp"
+   | "blurInDown"
+   | "slideUp"
+   | "slideDown"
+   | "slideLeft"
+   | "slideRight"
+   | "scaleUp"
+   | "scaleDown"
+
+interface TextAnimateProps extends MotionProps {
+   /**
+    * The text content to animate
+    */
+   children: string
+   /**
+    * The class name to be applied to the component
+    */
+   className?: string
+   /**
+    * The class name to be applied to each segment
+    */
+   segmentClassName?: string
+   /**
+    * The delay before the animation starts
+    */
+   delay?: number
+   /**
+    * The duration of the animation
+    */
+   duration?: number
+   /**
+    * Custom motion variants for the animation
+    */
+   variants?: Variants
+   /**
+    * The element type to render
+    */
+   as?: ElementType
+   /**
+    * How to split the text ("text", "word", "character")
+    */
+   by?: AnimationType
+   /**
+    * Whether to start animation when component enters viewport
+    */
+   startOnView?: boolean
+   /**
+    * Whether to animate only once
+    */
+   once?: boolean
+   /**
+    * The animation preset to use
+    */
+   animation?: AnimationVariant
+}
+
+const staggerTimings: Record<AnimationType, number> = {
+   text: 0.06,
+   word: 0.05,
+   character: 0.03,
+   line: 0.06,
+}
+
+const defaultContainerVariants = {
+   hidden: { opacity: 1 },
+   show: {
+      opacity: 1,
+      transition: {
+         staggerChildren: 0.05,
+      },
+   },
+   exit: {
+      opacity: 0,
+      transition: {
+         staggerChildren: 0.05,
+         staggerDirection: -1,
+      },
+   },
+}
+
+const defaultItemVariants: Variants = {
+   hidden: { opacity: 0 },
+   show: {
+      opacity: 1,
+   },
+   exit: {
+      opacity: 0,
+   },
+}
+
+const defaultItemAnimationVariants: Record<
+   AnimationVariant,
+   { container: Variants; item: Variants }
+> = {
+   fadeIn: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { opacity: 0, y: 20 },
+         show: (delay: number) => ({
+            opacity: 1,
+            y: 0,
+            transition: {
+               delay,
+               duration: 0.3,
+            },
+         }),
+         exit: {
+            opacity: 0,
+            y: 20,
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+   blurIn: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { opacity: 0, filter: "blur(10px)" },
+         show: (i: number) => ({
+            opacity: 1,
+            filter: "blur(0px)",
+            transition: {
+               delay: i * 0.1,
+               duration: 0.3,
+            },
+         }),
+         exit: {
+            opacity: 0,
+            filter: "blur(10px)",
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+   blurInUp: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { opacity: 0, filter: "blur(10px)", y: 20 },
+         show: (delay: number) => ({
+            opacity: 1,
+            filter: "blur(0px)",
+            y: 0,
+            transition: {
+               y: { duration: 0.3 },
+               opacity: { duration: 0.4 },
+               filter: { duration: 0.3 },
+            },
+         }),
+         exit: {
+            opacity: 0,
+            filter: "blur(10px)",
+            y: 20,
+            transition: {
+               y: { duration: 0.3 },
+               opacity: { duration: 0.4 },
+               filter: { duration: 0.3 },
+            },
+         },
+      },
+   },
+   blurInDown: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { opacity: 0, filter: "blur(10px)", y: -20 },
+         show: (delay: number) => ({
+            opacity: 1,
+            filter: "blur(0px)",
+            y: 0,
+            transition: {
+               y: { duration: 0.3 },
+               opacity: { duration: 0.4 },
+               filter: { duration: 0.3 },
+            },
+         }),
+      },
+   },
+   slideUp: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { y: 20, opacity: 0 },
+         show: (delay: number) => ({
+            y: 0,
+            opacity: 1,
+            transition: {
+               delay,
+               duration: 0.3,
+            },
+         }),
+         exit: {
+            y: -20,
+            opacity: 0,
+            transition: {
+               duration: 0.3,
+            },
+         },
+      },
+   },
+   slideDown: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { y: -20, opacity: 0 },
+         show: {
+            y: 0,
+            opacity: 1,
+            transition: { duration: 0.3 },
+         },
+         exit: {
+            y: 20,
+            opacity: 0,
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+   slideLeft: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { x: 20, opacity: 0 },
+         show: {
+            x: 0,
+            opacity: 1,
+            transition: { duration: 0.3 },
+         },
+         exit: {
+            x: -20,
+            opacity: 0,
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+   slideRight: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { x: -20, opacity: 0 },
+         show: {
+            x: 0,
+            opacity: 1,
+            transition: { duration: 0.3 },
+         },
+         exit: {
+            x: 20,
+            opacity: 0,
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+   scaleUp: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { scale: 0.5, opacity: 0 },
+         show: {
+            scale: 1,
+            opacity: 1,
+            transition: {
+               duration: 0.3,
+               scale: {
+                  type: "spring",
+                  damping: 15,
+                  stiffness: 300,
+               },
+            },
+         },
+         exit: {
+            scale: 0.5,
+            opacity: 0,
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+   scaleDown: {
+      container: defaultContainerVariants,
+      item: {
+         hidden: { scale: 1.5, opacity: 0 },
+         show: (delay: number) => ({
+            scale: 1,
+            opacity: 1,
+            transition: {
+               delay,
+               duration: 0.3,
+               scale: {
+                  type: "spring",
+                  damping: 15,
+                  stiffness: 300,
+               },
+            },
+         }),
+         exit: {
+            scale: 1.5,
+            opacity: 0,
+            transition: { duration: 0.3 },
+         },
+      },
+   },
+}
+
+export function TextAnimate({
+   children,
+   delay = 0,
+   duration = 0.3,
+   variants,
+   className,
+   segmentClassName,
+   as: Component = "p",
+   startOnView = true,
+   once = false,
+   by = "word",
+   animation = "fadeIn",
+   ...props
+}: TextAnimateProps) {
+   const MotionComponent = motion.create(Component)
+
+   // Use provided variants or default variants based on animation type
+   const finalVariants = animation
+      ? {
+           container: {
+              ...defaultItemAnimationVariants[animation].container,
+              show: {
+                 ...defaultItemAnimationVariants[animation].container.show,
+                 transition: {
+                    staggerChildren: staggerTimings[by],
+                 },
+              },
+              exit: {
+                 ...defaultItemAnimationVariants[animation].container.exit,
+                 transition: {
+                    staggerChildren: staggerTimings[by],
+                    staggerDirection: -1,
+                 },
+              },
+           },
+           item: defaultItemAnimationVariants[animation].item,
+        }
+      : { container: defaultContainerVariants, item: defaultItemVariants }
+
+   let segments: string[] = []
+   switch (by) {
+      case "word":
+         segments = children.split(/(\s+)/)
+         break
+      case "character":
+         segments = children.split("")
+         break
+      case "line":
+         segments = children.split("\n")
+         break
+      case "text":
+      default:
+         segments = [children]
+         break
+   }
+
+   return (
+      <AnimatePresence mode="popLayout">
+         <MotionComponent
+            variants={finalVariants.container}
+            initial="hidden"
+            whileInView={startOnView ? "show" : undefined}
+            animate={startOnView ? undefined : "show"}
+            exit="exit"
+            className={ny("whitespace-pre-wrap", className)}
+            {...props}
+         >
+            {segments.map((segment, i) => (
+               <motion.span
+                  key={`${by}-${segment}-${i}`}
+                  variants={finalVariants.item}
+                  custom={i * staggerTimings[by]}
+                  className={ny(
+                     by === "line" ? "block" : "inline-block whitespace-pre",
+                     segmentClassName,
+                  )}
+               >
+                  {segment}
+               </motion.span>
+            ))}
+         </MotionComponent>
+      </AnimatePresence>
+   )
+}
diff --git a/apps/web/registry/miami/ui/text-reveal.tsx b/apps/web/registry/miami/ui/text-reveal.tsx
index 8099c1da..59726955 100644
--- a/apps/web/registry/miami/ui/text-reveal.tsx
+++ b/apps/web/registry/miami/ui/text-reveal.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { motion, useScroll, useTransform } from 'framer-motion'
-import type { FC, ReactNode } from 'react'
-import { useRef } from 'react'
-import { ny } from '~/lib/utils'
+import { motion, useScroll, useTransform } from "framer-motion"
+import type { FC, ReactNode } from "react"
+import { useRef } from "react"
+import { ny } from "~/lib/utils"
 
 interface TextRevealByWordProps {
    text: string
@@ -19,10 +19,10 @@ export const TextRevealByWord: FC<TextRevealByWordProps> = ({
    const { scrollYProgress } = useScroll({
       target: targetRef,
    })
-   const words = text.split(' ')
+   const words = text.split(" ")
 
    return (
-      <div ref={targetRef} className={ny('relative z-0 h-[200vh]', className)}>
+      <div ref={targetRef} className={ny("relative z-0 h-[200vh]", className)}>
          <div className="sticky top-0 mx-auto flex h-1/2 max-w-4xl items-center bg-transparent px-4 py-20">
             <p
                ref={targetRef}
@@ -32,7 +32,11 @@ export const TextRevealByWord: FC<TextRevealByWordProps> = ({
                   const start = i / words.length
                   const end = start + 1 / words.length
                   return (
-                     <Word key={i} progress={scrollYProgress} range={[start, end]}>
+                     <Word
+                        key={i}
+                        progress={scrollYProgress}
+                        range={[start, end]}
+                     >
                         {word}
                      </Word>
                   )
@@ -54,7 +58,10 @@ const Word: FC<WordProps> = ({ children, progress, range }) => {
    return (
       <span className="xl:lg-3 relative mx-1 lg:mx-2.5">
          <span className="absolute opacity-30">{children}</span>
-         <motion.span style={{ opacity }} className="text-black dark:text-white">
+         <motion.span
+            style={{ opacity }}
+            className="text-black dark:text-white"
+         >
             {children}
          </motion.span>
       </span>
diff --git a/apps/web/registry/miami/ui/textarea.tsx b/apps/web/registry/miami/ui/textarea.tsx
index 06902e0c..6dfc5953 100644
--- a/apps/web/registry/miami/ui/textarea.tsx
+++ b/apps/web/registry/miami/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 export interface TextareaProps
    extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       return (
          <textarea
             className={ny(
-               'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+               "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
                className,
             )}
             ref={ref}
@@ -19,6 +19,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       )
    },
 )
-Textarea.displayName = 'Textarea'
+Textarea.displayName = "Textarea"
 
 export { Textarea }
diff --git a/apps/web/registry/miami/ui/timeline-demo.tsx b/apps/web/registry/miami/ui/timeline-demo.tsx
index 2e48fc28..8ca7bb0e 100644
--- a/apps/web/registry/miami/ui/timeline-demo.tsx
+++ b/apps/web/registry/miami/ui/timeline-demo.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react"
 
 import {
    Timeline,
@@ -7,7 +7,7 @@ import {
    TimelineHeading,
    TimelineItem,
    TimelineLine,
-} from '~/registry/miami/ui/timeline'
+} from "~/registry/miami/ui/timeline"
 
 export default function TimelineDemo() {
    return (
@@ -17,11 +17,12 @@ export default function TimelineDemo() {
             <TimelineDot status="done" />
             <TimelineLine done />
             <TimelineContent>
-               Before diving into coding, it is crucial to plan your software project
-               thoroughly. This involves defining the project scope, setting clear
-               objectives, and identifying the target audience. Additionally,
-               creating a timeline and allocating resources appropriately will
-               contribute to a successful development process.
+               Before diving into coding, it is crucial to plan your software
+               project thoroughly. This involves defining the project scope,
+               setting clear objectives, and identifying the target audience.
+               Additionally, creating a timeline and allocating resources
+               appropriately will contribute to a successful development
+               process.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem status="done">
@@ -31,10 +32,11 @@ export default function TimelineDemo() {
             <TimelineDot status="error" />
             <TimelineLine done />
             <TimelineContent>
-               Designing your software involves creating a blueprint that outlines
-               the structure, user interface, and functionality of your application.
-               Consider user experience (UX) principles, wireframing, and prototyping
-               to ensure an intuitive and visually appealing design.
+               Designing your software involves creating a blueprint that
+               outlines the structure, user interface, and functionality of your
+               application. Consider user experience (UX) principles,
+               wireframing, and prototyping to ensure an intuitive and visually
+               appealing design.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem status="done">
@@ -42,11 +44,12 @@ export default function TimelineDemo() {
             <TimelineDot status="current" />
             <TimelineLine />
             <TimelineContent>
-               The coding phase involves translating your design into actual code.
-               Choose a programming language and framework that aligns with your
-               project requirements. Follow best practices, such as modular and
-               reusable code, to enhance maintainability and scalability. Regularly
-               test your code to identify and fix any bugs or errors.
+               The coding phase involves translating your design into actual
+               code. Choose a programming language and framework that aligns
+               with your project requirements. Follow best practices, such as
+               modular and reusable code, to enhance maintainability and
+               scalability. Regularly test your code to identify and fix any
+               bugs or errors.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem>
@@ -54,10 +57,11 @@ export default function TimelineDemo() {
             <TimelineDot />
             <TimelineLine />
             <TimelineContent>
-               Thorough testing is essential to ensure the quality and reliability of
-               your software. Implement different testing methodologies, including
-               unit testing, integration testing, and user acceptance testing. This
-               helps identify and rectify any issues before deploying the software.
+               Thorough testing is essential to ensure the quality and
+               reliability of your software. Implement different testing
+               methodologies, including unit testing, integration testing, and
+               user acceptance testing. This helps identify and rectify any
+               issues before deploying the software.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem>
@@ -65,10 +69,10 @@ export default function TimelineDemo() {
             <TimelineDot />
             <TimelineLine />
             <TimelineContent>
-               Once your software has passed rigorous testing, it's time to deploy
-               it. Consider the deployment environment, whether it's on-premises or
-               in the cloud. Ensure proper documentation and provide clear
-               instructions for installation and configuration.
+               Once your software has passed rigorous testing, it's time to
+               deploy it. Consider the deployment environment, whether it's
+               on-premises or in the cloud. Ensure proper documentation and
+               provide clear instructions for installation and configuration.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem>
diff --git a/apps/web/registry/miami/ui/timeline-labels.tsx b/apps/web/registry/miami/ui/timeline-labels.tsx
index f821d034..b8e76d42 100644
--- a/apps/web/registry/miami/ui/timeline-labels.tsx
+++ b/apps/web/registry/miami/ui/timeline-labels.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react"
 
 import {
    Timeline,
@@ -7,7 +7,7 @@ import {
    TimelineHeading,
    TimelineItem,
    TimelineLine,
-} from '~/registry/miami/ui/timeline'
+} from "~/registry/miami/ui/timeline"
 
 export default function TimelineAlternate() {
    return (
@@ -20,11 +20,12 @@ export default function TimelineAlternate() {
             <TimelineDot status="done" />
             <TimelineLine done />
             <TimelineContent side="left">
-               Before diving into coding, it is crucial to plan your software project
-               thoroughly. This involves defining the project scope, setting clear
-               objectives, and identifying the target audience. Additionally,
-               creating a timeline and allocating resources appropriately will
-               contribute to a successful development process.
+               Before diving into coding, it is crucial to plan your software
+               project thoroughly. This involves defining the project scope,
+               setting clear objectives, and identifying the target audience.
+               Additionally, creating a timeline and allocating resources
+               appropriately will contribute to a successful development
+               process.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem status="done">
@@ -37,10 +38,11 @@ export default function TimelineAlternate() {
             <TimelineDot status="error" />
             <TimelineLine done />
             <TimelineContent>
-               Designing your software involves creating a blueprint that outlines
-               the structure, user interface, and functionality of your application.
-               Consider user experience (UX) principles, wireframing, and prototyping
-               to ensure an intuitive and visually appealing design.
+               Designing your software involves creating a blueprint that
+               outlines the structure, user interface, and functionality of your
+               application. Consider user experience (UX) principles,
+               wireframing, and prototyping to ensure an intuitive and visually
+               appealing design.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem status="done">
@@ -51,11 +53,12 @@ export default function TimelineAlternate() {
             <TimelineDot status="current" />
             <TimelineLine />
             <TimelineContent side="left">
-               The coding phase involves translating your design into actual code.
-               Choose a programming language and framework that aligns with your
-               project requirements. Follow best practices, such as modular and
-               reusable code, to enhance maintainability and scalability. Regularly
-               test your code to identify and fix any bugs or errors.
+               The coding phase involves translating your design into actual
+               code. Choose a programming language and framework that aligns
+               with your project requirements. Follow best practices, such as
+               modular and reusable code, to enhance maintainability and
+               scalability. Regularly test your code to identify and fix any
+               bugs or errors.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem>
@@ -66,10 +69,11 @@ export default function TimelineAlternate() {
             <TimelineDot />
             <TimelineLine />
             <TimelineContent>
-               Thorough testing is essential to ensure the quality and reliability of
-               your software. Implement different testing methodologies, including
-               unit testing, integration testing, and user acceptance testing. This
-               helps identify and rectify any issues before deploying the software.
+               Thorough testing is essential to ensure the quality and
+               reliability of your software. Implement different testing
+               methodologies, including unit testing, integration testing, and
+               user acceptance testing. This helps identify and rectify any
+               issues before deploying the software.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem>
@@ -80,10 +84,10 @@ export default function TimelineAlternate() {
             <TimelineDot />
             <TimelineLine />
             <TimelineContent side="left">
-               Once your software has passed rigorous testing, it's time to deploy
-               it. Consider the deployment environment, whether it's on-premises or
-               in the cloud. Ensure proper documentation and provide clear
-               instructions for installation and configuration.
+               Once your software has passed rigorous testing, it's time to
+               deploy it. Consider the deployment environment, whether it's
+               on-premises or in the cloud. Ensure proper documentation and
+               provide clear instructions for installation and configuration.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem>
diff --git a/apps/web/registry/miami/ui/timeline-right.tsx b/apps/web/registry/miami/ui/timeline-right.tsx
index be66cfbb..2af7007b 100644
--- a/apps/web/registry/miami/ui/timeline-right.tsx
+++ b/apps/web/registry/miami/ui/timeline-right.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react"
 
 import {
    Timeline,
@@ -7,7 +7,7 @@ import {
    TimelineHeading,
    TimelineItem,
    TimelineLine,
-} from '~/registry/default/ui/timeline'
+} from "~/registry/default/ui/timeline"
 
 export default function TimelineRight() {
    return (
@@ -17,11 +17,12 @@ export default function TimelineRight() {
             <TimelineDot status="done" />
             <TimelineLine done />
             <TimelineContent side="left">
-               Before diving into coding, it is crucial to plan your software project
-               thoroughly. This involves defining the project scope, setting clear
-               objectives, and identifying the target audience. Additionally,
-               creating a timeline and allocating resources appropriately will
-               contribute to a successful development process.
+               Before diving into coding, it is crucial to plan your software
+               project thoroughly. This involves defining the project scope,
+               setting clear objectives, and identifying the target audience.
+               Additionally, creating a timeline and allocating resources
+               appropriately will contribute to a successful development
+               process.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem status="done">
@@ -31,10 +32,11 @@ export default function TimelineRight() {
             <TimelineDot status="error" />
             <TimelineLine done />
             <TimelineContent side="left">
-               Designing your software involves creating a blueprint that outlines
-               the structure, user interface, and functionality of your application.
-               Consider user experience (UX) principles, wireframing, and prototyping
-               to ensure an intuitive and visually appealing design.
+               Designing your software involves creating a blueprint that
+               outlines the structure, user interface, and functionality of your
+               application. Consider user experience (UX) principles,
+               wireframing, and prototyping to ensure an intuitive and visually
+               appealing design.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem status="done">
@@ -42,11 +44,12 @@ export default function TimelineRight() {
             <TimelineDot status="current" />
             <TimelineLine />
             <TimelineContent side="left">
-               The coding phase involves translating your design into actual code.
-               Choose a programming language and framework that aligns with your
-               project requirements. Follow best practices, such as modular and
-               reusable code, to enhance maintainability and scalability. Regularly
-               test your code to identify and fix any bugs or errors.
+               The coding phase involves translating your design into actual
+               code. Choose a programming language and framework that aligns
+               with your project requirements. Follow best practices, such as
+               modular and reusable code, to enhance maintainability and
+               scalability. Regularly test your code to identify and fix any
+               bugs or errors.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem>
@@ -54,10 +57,11 @@ export default function TimelineRight() {
             <TimelineDot />
             <TimelineLine />
             <TimelineContent side="left">
-               Thorough testing is essential to ensure the quality and reliability of
-               your software. Implement different testing methodologies, including
-               unit testing, integration testing, and user acceptance testing. This
-               helps identify and rectify any issues before deploying the software.
+               Thorough testing is essential to ensure the quality and
+               reliability of your software. Implement different testing
+               methodologies, including unit testing, integration testing, and
+               user acceptance testing. This helps identify and rectify any
+               issues before deploying the software.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem>
@@ -65,10 +69,10 @@ export default function TimelineRight() {
             <TimelineDot />
             <TimelineLine />
             <TimelineContent side="left">
-               Once your software has passed rigorous testing, it's time to deploy
-               it. Consider the deployment environment, whether it's on-premises or
-               in the cloud. Ensure proper documentation and provide clear
-               instructions for installation and configuration.
+               Once your software has passed rigorous testing, it's time to
+               deploy it. Consider the deployment environment, whether it's
+               on-premises or in the cloud. Ensure proper documentation and
+               provide clear instructions for installation and configuration.
             </TimelineContent>
          </TimelineItem>
          <TimelineItem>
diff --git a/apps/web/registry/miami/ui/timeline.tsx b/apps/web/registry/miami/ui/timeline.tsx
index a7a16a06..c57f4e87 100644
--- a/apps/web/registry/miami/ui/timeline.tsx
+++ b/apps/web/registry/miami/ui/timeline.tsx
@@ -1,26 +1,26 @@
-import React from 'react'
-import { CheckIcon, Cross1Icon } from '@radix-ui/react-icons'
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
+import { CheckIcon, Cross1Icon } from "@radix-ui/react-icons"
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+import React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
-const timelineVariants = cva('grid', {
+const timelineVariants = cva("grid", {
    variants: {
       positions: {
-         left: '[&>li]:grid-cols-[0_min-content_1fr]',
-         right: '[&>li]:grid-cols-[1fr_min-content]',
-         center: '[&>li]:grid-cols-[1fr_min-content_1fr]',
+         left: "[&>li]:grid-cols-[0_min-content_1fr]",
+         right: "[&>li]:grid-cols-[1fr_min-content]",
+         center: "[&>li]:grid-cols-[1fr_min-content_1fr]",
       },
    },
    defaultVariants: {
-      positions: 'left',
+      positions: "left",
    },
 })
 
 interface TimelineProps
    extends React.HTMLAttributes<HTMLUListElement>,
-   VariantProps<typeof timelineVariants> {}
+      VariantProps<typeof timelineVariants> {}
 
 const Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(
    ({ children, className, positions, ...props }, ref) => {
@@ -35,23 +35,23 @@ const Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(
       )
    },
 )
-Timeline.displayName = 'Timeline'
+Timeline.displayName = "Timeline"
 
-const timelineItemVariants = cva('grid items-center gap-x-2', {
+const timelineItemVariants = cva("grid items-center gap-x-2", {
    variants: {
       status: {
-         done: 'text-primary',
-         default: 'text-muted-foreground',
+         done: "text-primary",
+         default: "text-muted-foreground",
       },
    },
    defaultVariants: {
-      status: 'default',
+      status: "default",
    },
 })
 
 interface TimelineItemProps
    extends React.HTMLAttributes<HTMLLIElement>,
-   VariantProps<typeof timelineItemVariants> {}
+      VariantProps<typeof timelineItemVariants> {}
 
 const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
    ({ className, status, ...props }, ref) => (
@@ -62,31 +62,30 @@ const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
       />
    ),
 )
-TimelineItem.displayName = 'TimelineItem'
+TimelineItem.displayName = "TimelineItem"
 
 const timelineDotVariants = cva(
-   'col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current',
+   "col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current",
    {
       variants: {
          status: {
-            default: '[&>*]:hidden',
+            default: "[&>*]:hidden",
             current:
-          '[&>*:not(.radix-circle)]:hidden [&>.radix-circle]:bg-current [&>.radix-circle]:fill-current',
-            done: 'bg-primary [&>*:not(.radix-check)]:hidden [&>.radix-check]:text-background',
-            error:
-          'border-destructive bg-destructive [&>*:not(.radix-cross)]:hidden [&>.radix-cross]:text-background',
-            custom: '[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block',
+               "[&>*:not(.radix-circle)]:hidden [&>.radix-circle]:bg-current [&>.radix-circle]:fill-current",
+            done: "bg-primary [&>*:not(.radix-check)]:hidden [&>.radix-check]:text-background",
+            error: "border-destructive bg-destructive [&>*:not(.radix-cross)]:hidden [&>.radix-cross]:text-background",
+            custom: "[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block",
          },
       },
       defaultVariants: {
-         status: 'default',
+         status: "default",
       },
    },
 )
 
 interface TimelineDotProps
    extends React.HTMLAttributes<HTMLDivElement>,
-   VariantProps<typeof timelineDotVariants> {
+      VariantProps<typeof timelineDotVariants> {
    customIcon?: React.ReactNode
 }
 
@@ -94,7 +93,11 @@ const TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(
    ({ className, status, customIcon, ...props }, ref) => (
       <div
          role="status"
-         className={ny('timeline-dot', timelineDotVariants({ status }), className)}
+         className={ny(
+            "timeline-dot",
+            timelineDotVariants({ status }),
+            className,
+         )}
          ref={ref}
          {...props}
       >
@@ -105,26 +108,26 @@ const TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(
       </div>
    ),
 )
-TimelineDot.displayName = 'TimelineDot'
+TimelineDot.displayName = "TimelineDot"
 
 const timelineContentVariants = cva(
-   'row-start-2 row-end-2 pb-8 text-muted-foreground',
+   "row-start-2 row-end-2 pb-8 text-muted-foreground",
    {
       variants: {
          side: {
-            right: 'col-start-3 col-end-4 mr-auto text-left',
-            left: 'col-start-1 col-end-2 ml-auto text-right',
+            right: "col-start-3 col-end-4 mr-auto text-left",
+            left: "col-start-1 col-end-2 ml-auto text-right",
          },
       },
       defaultVariants: {
-         side: 'right',
+         side: "right",
       },
    },
 )
 
 interface TimelineConentProps
    extends React.HTMLAttributes<HTMLDivElement>,
-   VariantProps<typeof timelineContentVariants> {}
+      VariantProps<typeof timelineContentVariants> {}
 
 const TimelineContent = React.forwardRef<HTMLDivElement, TimelineConentProps>(
    ({ className, side, ...props }, ref) => (
@@ -135,31 +138,31 @@ const TimelineContent = React.forwardRef<HTMLDivElement, TimelineConentProps>(
       />
    ),
 )
-TimelineContent.displayName = 'TimelineContent'
+TimelineContent.displayName = "TimelineContent"
 
 const timelineHeadingVariants = cva(
-   'row-start-1 row-end-1 line-clamp-1 max-w-full truncate',
+   "row-start-1 row-end-1 line-clamp-1 max-w-full truncate",
    {
       variants: {
          side: {
-            right: 'col-start-3 col-end-4 mr-auto text-left',
-            left: 'col-start-1 col-end-2 ml-auto text-right',
+            right: "col-start-3 col-end-4 mr-auto text-left",
+            left: "col-start-1 col-end-2 ml-auto text-right",
          },
          variant: {
-            primary: 'text-base font-medium text-primary',
-            secondary: 'text-sm font-light text-muted-foreground',
+            primary: "text-base font-medium text-primary",
+            secondary: "text-sm font-light text-muted-foreground",
          },
       },
       defaultVariants: {
-         side: 'right',
-         variant: 'primary',
+         side: "right",
+         variant: "primary",
       },
    },
 )
 
 interface TimelineHeadingProps
    extends React.HTMLAttributes<HTMLParagraphElement>,
-   VariantProps<typeof timelineHeadingVariants> {}
+      VariantProps<typeof timelineHeadingVariants> {}
 
 const TimelineHeading = React.forwardRef<
    HTMLParagraphElement,
@@ -167,13 +170,13 @@ const TimelineHeading = React.forwardRef<
 >(({ className, side, variant, ...props }, ref) => (
    <p
       role="heading"
-      aria-level={variant === 'primary' ? 2 : 3}
+      aria-level={variant === "primary" ? 2 : 3}
       className={ny(timelineHeadingVariants({ side, variant }), className)}
       ref={ref}
       {...props}
    />
 ))
-TimelineHeading.displayName = 'TimelineHeading'
+TimelineHeading.displayName = "TimelineHeading"
 
 interface TimelineLineProps extends React.HTMLAttributes<HTMLHRElement> {
    done?: boolean
@@ -186,8 +189,8 @@ const TimelineLine = React.forwardRef<HTMLHRElement, TimelineLineProps>(
             role="separator"
             aria-orientation="vertical"
             className={ny(
-               'col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full',
-               done ? 'bg-primary' : 'bg-muted',
+               "col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full",
+               done ? "bg-primary" : "bg-muted",
                className,
             )}
             ref={ref}
@@ -196,7 +199,7 @@ const TimelineLine = React.forwardRef<HTMLHRElement, TimelineLineProps>(
       )
    },
 )
-TimelineLine.displayName = 'TimelineLine'
+TimelineLine.displayName = "TimelineLine"
 
 export {
    Timeline,
diff --git a/apps/web/registry/miami/ui/toast.tsx b/apps/web/registry/miami/ui/toast.tsx
index 965cfce3..95fa0463 100644
--- a/apps/web/registry/miami/ui/toast.tsx
+++ b/apps/web/registry/miami/ui/toast.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { Cross2Icon } from '@radix-ui/react-icons'
-import * as ToastPrimitives from '@radix-ui/react-toast'
-import { type VariantProps, cva } from 'class-variance-authority'
+import { Cross2Icon } from "@radix-ui/react-icons"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const ToastProvider = ToastPrimitives.Provider
 
@@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
    <ToastPrimitives.Viewport
       ref={ref}
       className={ny(
-         'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+         "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
          className,
       )}
       {...props}
@@ -25,17 +25,17 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-   'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+   "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
    {
       variants: {
          variant: {
-            default: 'border bg-background text-foreground',
+            default: "border bg-background text-foreground",
             destructive:
-          'destructive group border-destructive bg-destructive text-destructive-foreground',
+               "destructive group border-destructive bg-destructive text-destructive-foreground",
          },
       },
       defaultVariants: {
-         variant: 'default',
+         variant: "default",
       },
    },
 )
@@ -43,7 +43,7 @@ const toastVariants = cva(
 const Toast = React.forwardRef<
    React.ElementRef<typeof ToastPrimitives.Root>,
    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-   VariantProps<typeof toastVariants>
+      VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
    return (
       <ToastPrimitives.Root
@@ -62,7 +62,7 @@ const ToastAction = React.forwardRef<
    <ToastPrimitives.Action
       ref={ref}
       className={ny(
-         'hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-1 disabled:pointer-events-none disabled:opacity-50',
+         "hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-1 disabled:pointer-events-none disabled:opacity-50",
          className,
       )}
       {...props}
@@ -77,7 +77,7 @@ const ToastClose = React.forwardRef<
    <ToastPrimitives.Close
       ref={ref}
       className={ny(
-         'text-foreground/50 hover:text-foreground absolute right-1 top-1 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+         "text-foreground/50 hover:text-foreground absolute right-1 top-1 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
          className,
       )}
       toast-close=""
@@ -94,7 +94,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <ToastPrimitives.Title
       ref={ref}
-      className={ny('text-sm font-semibold [&+div]:text-xs', className)}
+      className={ny("text-sm font-semibold [&+div]:text-xs", className)}
       {...props}
    />
 ))
@@ -106,7 +106,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
    <ToastPrimitives.Description
       ref={ref}
-      className={ny('text-sm opacity-90', className)}
+      className={ny("text-sm opacity-90", className)}
       {...props}
    />
 ))
diff --git a/apps/web/registry/miami/ui/toaster.tsx b/apps/web/registry/miami/ui/toaster.tsx
index ea4b99c0..f1054bf2 100644
--- a/apps/web/registry/miami/ui/toaster.tsx
+++ b/apps/web/registry/miami/ui/toaster.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client"
 
 import {
    Toast,
@@ -7,8 +7,8 @@ import {
    ToastProvider,
    ToastTitle,
    ToastViewport,
-} from '~/registry/miami/ui/toast'
-import { useToast } from '~/registry/miami/ui/use-toast'
+} from "~/registry/miami/ui/toast"
+import { useToast } from "~/registry/miami/ui/use-toast"
 
 export function Toaster() {
    const { toasts } = useToast()
diff --git a/apps/web/registry/miami/ui/toc.tsx b/apps/web/registry/miami/ui/toc.tsx
index 9d1cee49..b0a53d71 100644
--- a/apps/web/registry/miami/ui/toc.tsx
+++ b/apps/web/registry/miami/ui/toc.tsx
@@ -1,75 +1,75 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 interface TableOfContentsListProps
-   extends React.ComponentPropsWithoutRef<'ul'> {
+   extends React.ComponentPropsWithoutRef<"ul"> {
    indent?: boolean
 }
 
 const TableOfContentsList = React.forwardRef<
-   React.ElementRef<'ul'>,
+   React.ElementRef<"ul">,
    TableOfContentsListProps
 >(({ className, indent, ...props }, ref) => (
    <ul
       ref={ref}
-      className={ny('m-0 list-none', indent && 'pl-4', className)}
+      className={ny("m-0 list-none", indent && "pl-4", className)}
       {...props}
    />
 ))
-TableOfContentsList.displayName = 'TableOfContentsList'
+TableOfContentsList.displayName = "TableOfContentsList"
 
 interface TableOfContentsTitleProps
-   extends React.ComponentPropsWithoutRef<'li'> {}
+   extends React.ComponentPropsWithoutRef<"li"> {}
 
 const TableOfContentsTitle = React.forwardRef<
-   React.ElementRef<'li'>,
+   React.ElementRef<"li">,
    TableOfContentsTitleProps
 >(({ className, ...props }, ref) => (
    <li
       ref={ref}
-      className={ny('mb-2 text-sm font-medium', className)}
+      className={ny("mb-2 text-sm font-medium", className)}
       {...props}
    />
 ))
-TableOfContentsTitle.displayName = 'TableOfContentsTitle'
+TableOfContentsTitle.displayName = "TableOfContentsTitle"
 
 interface TableOfContentsItemProps
-   extends React.ComponentPropsWithoutRef<'li'> {
+   extends React.ComponentPropsWithoutRef<"li"> {
    indent?: boolean
 }
 
 const TableOfContentsItem = React.forwardRef<
-   React.ElementRef<'li'>,
+   React.ElementRef<"li">,
    TableOfContentsItemProps
 >(({ className, indent, ...props }, ref) => (
    <li
       ref={ref}
-      className={ny('mt-0 pt-2', indent && 'ml-4', className)}
+      className={ny("mt-0 pt-2", indent && "ml-4", className)}
       {...props}
    />
 ))
-TableOfContentsItem.displayName = 'TableOfContentsItem'
+TableOfContentsItem.displayName = "TableOfContentsItem"
 
-interface TableOfContentsLinkProps extends React.ComponentPropsWithoutRef<'a'> {
+interface TableOfContentsLinkProps extends React.ComponentPropsWithoutRef<"a"> {
    isActive?: boolean
 }
 
 const TableOfContentsLink = React.forwardRef<
-   React.ElementRef<'a'>,
+   React.ElementRef<"a">,
    TableOfContentsLinkProps
 >(({ className, isActive, ...props }, ref) => (
    <a
       ref={ref}
       className={ny(
-         'text-foreground hover:text-primary text-sm font-medium transition-colors',
-         isActive ? 'text-foreground font-medium' : 'text-muted-foreground',
+         "text-foreground hover:text-primary text-sm font-medium transition-colors",
+         isActive ? "text-foreground font-medium" : "text-muted-foreground",
          className,
       )}
       {...props}
    />
 ))
-TableOfContentsLink.displayName = 'TableOfContentsLink'
+TableOfContentsLink.displayName = "TableOfContentsLink"
 
 export {
    TableOfContentsList,
diff --git a/apps/web/registry/miami/ui/toggle-group.tsx b/apps/web/registry/miami/ui/toggle-group.tsx
index f5191d2a..90793b68 100644
--- a/apps/web/registry/miami/ui/toggle-group.tsx
+++ b/apps/web/registry/miami/ui/toggle-group.tsx
@@ -1,27 +1,27 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
-import type { VariantProps } from 'class-variance-authority'
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import type { VariantProps } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
-import { toggleVariants } from '~/registry/miami/ui/toggle'
+import { ny } from "~/lib/utils"
+import { toggleVariants } from "~/registry/miami/ui/toggle"
 
 const ToggleGroupContext = React.createContext<
    VariantProps<typeof toggleVariants>
 >({
-   size: 'default',
-   variant: 'default',
+   size: "default",
+   variant: "default",
 })
 
 const ToggleGroup = React.forwardRef<
    React.ElementRef<typeof ToggleGroupPrimitive.Root>,
    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-   VariantProps<typeof toggleVariants>
+      VariantProps<typeof toggleVariants>
 >(({ className, variant, size, children, ...props }, ref) => (
    <ToggleGroupPrimitive.Root
       ref={ref}
-      className={ny('flex items-center justify-center gap-1', className)}
+      className={ny("flex items-center justify-center gap-1", className)}
       {...props}
    >
       <ToggleGroupContext.Provider value={{ variant, size }}>
@@ -35,7 +35,7 @@ ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
 const ToggleGroupItem = React.forwardRef<
    React.ElementRef<typeof ToggleGroupPrimitive.Item>,
    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-   VariantProps<typeof toggleVariants>
+      VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
    const context = React.useContext(ToggleGroupContext)
 
diff --git a/apps/web/registry/miami/ui/toggle.tsx b/apps/web/registry/miami/ui/toggle.tsx
index 5964e7a1..317f1a32 100644
--- a/apps/web/registry/miami/ui/toggle.tsx
+++ b/apps/web/registry/miami/ui/toggle.tsx
@@ -1,29 +1,29 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as TogglePrimitive from '@radix-ui/react-toggle'
-import { type VariantProps, cva } from 'class-variance-authority'
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const toggleVariants = cva(
-   'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
    {
       variants: {
          variant: {
-            default: 'bg-transparent',
+            default: "bg-transparent",
             outline:
-          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+               "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
          },
          size: {
-            default: 'h-9 px-3',
-            sm: 'h-8 px-2',
-            lg: 'h-10 px-3',
+            default: "h-9 px-3",
+            sm: "h-8 px-2",
+            lg: "h-10 px-3",
          },
       },
       defaultVariants: {
-         variant: 'default',
-         size: 'default',
+         variant: "default",
+         size: "default",
       },
    },
 )
@@ -31,7 +31,7 @@ const toggleVariants = cva(
 const Toggle = React.forwardRef<
    React.ElementRef<typeof TogglePrimitive.Root>,
    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-   VariantProps<typeof toggleVariants>
+      VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
    <TogglePrimitive.Root
       ref={ref}
diff --git a/apps/web/registry/miami/ui/tooltip.tsx b/apps/web/registry/miami/ui/tooltip.tsx
index 53e4c67f..34338dd3 100644
--- a/apps/web/registry/miami/ui/tooltip.tsx
+++ b/apps/web/registry/miami/ui/tooltip.tsx
@@ -1,23 +1,23 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-import { type VariantProps, cva } from 'class-variance-authority'
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 const tooltipVariants = cva(
-   'z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+   "z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
    {
       variants: {
          variant: {
-            default: 'bg-primary text-primary-foreground',
-            outline: 'border bg-popover text-popover-foreground shadow-md',
-            secondary: 'bg-secondary text-secondary-foreground',
+            default: "bg-primary text-primary-foreground",
+            outline: "border bg-popover text-popover-foreground shadow-md",
+            secondary: "bg-secondary text-secondary-foreground",
          },
       },
       defaultVariants: {
-         variant: 'default',
+         variant: "default",
       },
    },
 )
@@ -32,7 +32,7 @@ const TooltipArrow = TooltipPrimitive.TooltipArrow
 
 export interface TooltipProps
    extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
-   VariantProps<typeof tooltipVariants> {};
+      VariantProps<typeof tooltipVariants> {}
 
 const TooltipContent = React.forwardRef<
    React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -47,4 +47,10 @@ const TooltipContent = React.forwardRef<
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipTrigger, TooltipArrow, TooltipContent, TooltipProvider }
+export {
+   Tooltip,
+   TooltipTrigger,
+   TooltipArrow,
+   TooltipContent,
+   TooltipProvider,
+}
diff --git a/apps/web/registry/miami/ui/tour.tsx b/apps/web/registry/miami/ui/tour.tsx
index ea722417..cf1e5888 100644
--- a/apps/web/registry/miami/ui/tour.tsx
+++ b/apps/web/registry/miami/ui/tour.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-'use client'
+"use client"
 import React, {
    createContext,
    useContext,
@@ -7,10 +7,10 @@ import React, {
    useMemo,
    useRef,
    useState,
-} from 'react'
-import { createPortal } from 'react-dom'
+} from "react"
+import { createPortal } from "react-dom"
 
-import { ny } from '~/lib/utils'
+import { ny } from "~/lib/utils"
 
 export interface TourContext<T extends string> {
    nodes: Map<
@@ -45,16 +45,16 @@ export function TourFactory<T extends string>(order: T[]) {
       show: false,
       current: 0,
       next: () => {
-         console.log('empty')
+         console.log("empty")
       },
       previous: () => {
-         console.log('empty')
+         console.log("empty")
       },
       close: () => {
-         console.log('empty')
+         console.log("empty")
       },
       open: () => {
-         console.log('empty')
+         console.log("empty")
       },
    })
 
@@ -65,7 +65,7 @@ export function TourFactory<T extends string>(order: T[]) {
       const [, forceUpdate] = React.useState({})
 
       const currentElement = useMemo(
-         () => ctx.nodes.get(order[ctx.current] ?? ''),
+         () => ctx.nodes.get(order[ctx.current] ?? ""),
          [ctx],
       )
 
@@ -74,12 +74,12 @@ export function TourFactory<T extends string>(order: T[]) {
             forceUpdate({})
          }
 
-         window.addEventListener('resize', handleResize)
-         window.addEventListener('scroll', handleResize)
+         window.addEventListener("resize", handleResize)
+         window.addEventListener("scroll", handleResize)
 
          return () => {
-            window.removeEventListener('resize', handleResize)
-            window.removeEventListener('scroll', handleResize)
+            window.removeEventListener("resize", handleResize)
+            window.removeEventListener("scroll", handleResize)
          }
       }, [])
 
@@ -101,14 +101,16 @@ export function TourFactory<T extends string>(order: T[]) {
       const closest = (): React.CSSProperties => {
          const isCloseToTop = currentElementRect.top < height
          const isCloseToLeft = currentElementRect.left < width
-         const isCloseToRight
-         = currentElementRect.right > window.innerWidth - width
+         const isCloseToRight =
+            currentElementRect.right > window.innerWidth - width
 
          if (isCloseToLeft) {
             return {
                left: currentElementRect.x + currentElementRect.width,
                top:
-             currentElementRect.y - height / 2 + currentElementRect.height / 2,
+                  currentElementRect.y -
+                  height / 2 +
+                  currentElementRect.height / 2,
             }
          }
 
@@ -116,19 +118,25 @@ export function TourFactory<T extends string>(order: T[]) {
             return {
                left: currentElementRect.x - width,
                top:
-             currentElementRect.y - height / 2 + currentElementRect.height / 2,
+                  currentElementRect.y -
+                  height / 2 +
+                  currentElementRect.height / 2,
             }
          }
 
          if (isCloseToTop) {
             return {
-               left: currentElementRect.x - width / 2 + currentElementRect.width / 2,
+               left:
+                  currentElementRect.x -
+                  width / 2 +
+                  currentElementRect.width / 2,
                top: currentElementRect.y + currentElementRect.height,
             }
          }
 
          return {
-            left: currentElementRect.x - width / 2 + currentElementRect.width / 2,
+            left:
+               currentElementRect.x - width / 2 + currentElementRect.width / 2,
             top: currentElementRect.y - height,
          }
       }
@@ -137,14 +145,14 @@ export function TourFactory<T extends string>(order: T[]) {
          <div
             id="tour"
             className={ny(
-               'pointer-events-auto fixed left-0 top-0 h-screen w-screen transition-none',
-               !ctx.show ? 'invisible' : 'visible',
+               "pointer-events-auto fixed left-0 top-0 h-screen w-screen transition-none",
+               !ctx.show ? "invisible" : "visible",
             )}
          >
             <div
                ref={ref}
                className={ny(
-             `absolute z-50 transition-all duration-500 ease-in-out`,
+                  `absolute z-50 transition-all duration-500 ease-in-out`,
                )}
                style={{
                   ...closest(),
@@ -168,7 +176,7 @@ export function TourFactory<T extends string>(order: T[]) {
 
    return {
       TourProvider: function TourProvider(props: TourProps) {
-         const nodes = useRef<TourContext<T>['nodes']>(new Map())
+         const nodes = useRef<TourContext<T>["nodes"]>(new Map())
 
          const [show, setShow] = useState(false)
          const [current, setCurrent] = useState(0)
@@ -191,12 +199,12 @@ export function TourFactory<T extends string>(order: T[]) {
                   current,
                   show,
                   next: () => {
-                     setCurrent(state =>
+                     setCurrent((state) =>
                         Math.min(getNextIndex(state, 1), order.length - 1),
                      )
                   },
                   previous: () => {
-                     setCurrent(state => Math.max(getNextIndex(state, -1), 0))
+                     setCurrent((state) => Math.max(getNextIndex(state, -1), 0))
                   },
                   close: () => {
                      setShow(false)
diff --git a/apps/web/registry/miami/ui/tweet-card.tsx b/apps/web/registry/miami/ui/tweet-card.tsx
index 9d8b358b..87b3652f 100644
--- a/apps/web/registry/miami/ui/tweet-card.tsx
+++ b/apps/web/registry/miami/ui/tweet-card.tsx
@@ -1,12 +1,12 @@
-import { Suspense } from 'react'
+import { Suspense } from "react"
 import {
    type EnrichedTweet,
    type TweetProps,
    type TwitterComponents,
    enrichTweet,
-} from 'react-tweet'
-import { type Tweet, getTweet } from 'react-tweet/api'
-import { ny } from '~/lib/utils'
+} from "react-tweet"
+import { type Tweet, getTweet } from "react-tweet/api"
+import { ny } from "~/lib/utils"
 
 interface TwitterIconProps {
    className?: string
@@ -49,8 +49,7 @@ function Verified({ className, ...props }: TwitterIconProps) {
 }
 
 export function truncate(str: string | null, length: number) {
-   if (!str || str.length <= length)
-      return str
+   if (!str || str.length <= length) return str
    return `${str.slice(0, length - 3)}...`
 }
 
@@ -60,7 +59,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
    return (
       <div
-         className={ny('bg-primary/10 animate-pulse rounded-md', className)}
+         className={ny("bg-primary/10 animate-pulse rounded-md", className)}
          {...props}
       />
    )
@@ -76,7 +75,7 @@ export function TweetSkeleton({
    return (
       <div
          className={ny(
-            'flex size-full max-h-max min-w-72 flex-col gap-2 rounded-lg border p-4',
+            "flex size-full max-h-max min-w-72 flex-col gap-2 rounded-lg border p-4",
             className,
          )}
          {...props}
@@ -100,7 +99,7 @@ export function TweetNotFound({
    return (
       <div
          className={ny(
-            'flex size-full flex-col items-center justify-center gap-2 rounded-lg border p-4',
+            "flex size-full flex-col items-center justify-center gap-2 rounded-lg border p-4",
             className,
          )}
          {...props}
@@ -132,10 +131,10 @@ export function TweetHeader({ tweet }: { tweet: EnrichedTweet }) {
                   className="flex items-center whitespace-nowrap font-semibold"
                >
                   {truncate(tweet.user.name, 20)}
-                  {tweet.user.verified
-                  || (tweet.user.is_blue_verified && (
-                     <Verified className="ml-1 inline size-4 text-blue-500" />
-                  ))}
+                  {tweet.user.verified ||
+                     (tweet.user.is_blue_verified && (
+                        <Verified className="ml-1 inline size-4 text-blue-500" />
+                     ))}
                </a>
                <div className="flex items-center space-x-1">
                   <a
@@ -144,8 +143,7 @@ export function TweetHeader({ tweet }: { tweet: EnrichedTweet }) {
                      rel="noreferrer"
                      className="text-sm text-gray-500 transition-all duration-75"
                   >
-                     @
-                     {truncate(tweet.user.screen_name, 16)}
+                     @{truncate(tweet.user.screen_name, 16)}
                   </a>
                </div>
             </div>
@@ -163,10 +161,10 @@ export function TweetBody({ tweet }: { tweet: EnrichedTweet }) {
       <div className="break-words leading-normal tracking-tighter">
          {tweet.entities.map((entity, idx) => {
             switch (entity.type) {
-               case 'url':
-               case 'symbol':
-               case 'hashtag':
-               case 'mention':
+               case "url":
+               case "symbol":
+               case "hashtag":
+               case "mention":
                   return (
                      <a
                         key={idx}
@@ -178,7 +176,7 @@ export function TweetBody({ tweet }: { tweet: EnrichedTweet }) {
                         <span>{entity.text}</span>
                      </a>
                   )
-               case 'text':
+               case "text":
                   return (
                      <span
                         key={idx}
@@ -211,7 +209,7 @@ export function TweetMedia({ tweet }: { tweet: EnrichedTweet }) {
          {tweet.photos && (
             <div className="relative flex transform-gpu snap-x snap-mandatory gap-4 overflow-x-auto">
                <div className="shrink-0 snap-center sm:w-2" />
-               {tweet.photos.map(photo => (
+               {tweet.photos.map((photo) => (
                   <img
                      key={photo.url}
                      src={photo.url}
@@ -223,18 +221,20 @@ export function TweetMedia({ tweet }: { tweet: EnrichedTweet }) {
                <div className="shrink-0 snap-center sm:w-2" />
             </div>
          )}
-         {!tweet.video
-         && !tweet.photos
-         // @ts-expect-error is fine
-         && tweet?.card?.binding_values?.thumbnail_image_large?.image_value.url && (
-            <img
-               src={
-                  // @ts-expect-error is fine
-                  tweet.card.binding_values.thumbnail_image_large.image_value.url
-               }
-               className="h-64 rounded-xl border object-cover shadow-sm"
-            />
-         )}
+         {!tweet.video &&
+            !tweet.photos &&
+            // @ts-expect-error is fine
+            tweet?.card?.binding_values?.thumbnail_image_large?.image_value
+               .url && (
+               <img
+                  src={
+                     // @ts-expect-error is fine
+                     tweet.card.binding_values.thumbnail_image_large.image_value
+                        .url
+                  }
+                  className="h-64 rounded-xl border object-cover shadow-sm"
+               />
+            )}
       </div>
    )
 }
@@ -253,7 +253,7 @@ export function MagicTweet({
    return (
       <div
          className={ny(
-            'relative flex size-full max-w-lg flex-col gap-2 overflow-hidden rounded-lg border p-4 backdrop-blur-md',
+            "relative flex size-full max-w-lg flex-col gap-2 overflow-hidden rounded-lg border p-4 backdrop-blur-md",
             className,
          )}
          {...props}
@@ -279,10 +279,9 @@ export async function TweetCard({
 }) {
    const tweet = id
       ? await getTweet(id).catch((err) => {
-         if (onError)
-            onError(err)
-         else console.error(err)
-      })
+           if (onError) onError(err)
+           else console.error(err)
+        })
       : undefined
 
    if (!tweet) {
diff --git a/apps/web/registry/miami/ui/typing-animation.tsx b/apps/web/registry/miami/ui/typing-animation.tsx
index f4cb8732..dc0aca8c 100644
--- a/apps/web/registry/miami/ui/typing-animation.tsx
+++ b/apps/web/registry/miami/ui/typing-animation.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { useEffect, useState } from 'react'
-import { ny } from '~/lib/utils'
+import { useEffect, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface TypingAnimationProps {
    text: string
@@ -14,7 +14,7 @@ export default function TypingAnimation({
    duration = 200,
    className,
 }: TypingAnimationProps) {
-   const [displayedText, setDisplayedText] = useState<string>('')
+   const [displayedText, setDisplayedText] = useState<string>("")
    const [i, setI] = useState<number>(0)
 
    useEffect(() => {
@@ -22,8 +22,7 @@ export default function TypingAnimation({
          if (i < text.length) {
             setDisplayedText(text.substring(0, i + 1))
             setI(i + 1)
-         }
-         else {
+         } else {
             clearInterval(typingEffect)
          }
       }, duration)
@@ -36,7 +35,7 @@ export default function TypingAnimation({
    return (
       <h1
          className={ny(
-            'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',
+            "font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm",
             className,
          )}
       >
diff --git a/apps/web/registry/miami/ui/use-toast.ts b/apps/web/registry/miami/ui/use-toast.ts
index 77477a17..7940c98a 100644
--- a/apps/web/registry/miami/ui/use-toast.ts
+++ b/apps/web/registry/miami/ui/use-toast.ts
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
 // Inspired by react-hot-toast library
-import * as React from 'react'
+import * as React from "react"
 
-import type { ToastActionElement, ToastProps } from '~/registry/miami/ui/toast'
+import type { ToastActionElement, ToastProps } from "~/registry/miami/ui/toast"
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
@@ -16,10 +16,10 @@ type ToasterToast = ToastProps & {
 }
 
 const actionTypes = {
-   ADD_TOAST: 'ADD_TOAST',
-   UPDATE_TOAST: 'UPDATE_TOAST',
-   DISMISS_TOAST: 'DISMISS_TOAST',
-   REMOVE_TOAST: 'REMOVE_TOAST',
+   ADD_TOAST: "ADD_TOAST",
+   UPDATE_TOAST: "UPDATE_TOAST",
+   DISMISS_TOAST: "DISMISS_TOAST",
+   REMOVE_TOAST: "REMOVE_TOAST",
 } as const
 
 let count = 0
@@ -33,21 +33,21 @@ type ActionType = typeof actionTypes
 
 type Action =
    | {
-      type: ActionType['ADD_TOAST']
-      toast: ToasterToast
-   }
+        type: ActionType["ADD_TOAST"]
+        toast: ToasterToast
+     }
    | {
-      type: ActionType['UPDATE_TOAST']
-      toast: Partial<ToasterToast>
-   }
+        type: ActionType["UPDATE_TOAST"]
+        toast: Partial<ToasterToast>
+     }
    | {
-      type: ActionType['DISMISS_TOAST']
-      toastId?: ToasterToast['id']
-   }
+        type: ActionType["DISMISS_TOAST"]
+        toastId?: ToasterToast["id"]
+     }
    | {
-      type: ActionType['REMOVE_TOAST']
-      toastId?: ToasterToast['id']
-   }
+        type: ActionType["REMOVE_TOAST"]
+        toastId?: ToasterToast["id"]
+     }
 
 interface State {
    toasts: ToasterToast[]
@@ -56,13 +56,12 @@ interface State {
 const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 
 function addToRemoveQueue(toastId: string) {
-   if (toastTimeouts.has(toastId))
-      return
+   if (toastTimeouts.has(toastId)) return
 
    const timeout = setTimeout(() => {
       toastTimeouts.delete(toastId)
       dispatch({
-         type: 'REMOVE_TOAST',
+         type: "REMOVE_TOAST",
          toastId,
       })
    }, TOAST_REMOVE_DELAY)
@@ -72,29 +71,28 @@ function addToRemoveQueue(toastId: string) {
 
 export function reducer(state: State, action: Action): State {
    switch (action.type) {
-      case 'ADD_TOAST':
+      case "ADD_TOAST":
          return {
             ...state,
             toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
          }
 
-      case 'UPDATE_TOAST':
+      case "UPDATE_TOAST":
          return {
             ...state,
-            toasts: state.toasts.map(t =>
+            toasts: state.toasts.map((t) =>
                t.id === action.toast.id ? { ...t, ...action.toast } : t,
             ),
          }
 
-      case 'DISMISS_TOAST': {
+      case "DISMISS_TOAST": {
          const { toastId } = action
 
          // ! Side effects ! - This could be extracted into a dismissToast() action,
          // but I'll keep it here for simplicity
          if (toastId) {
             addToRemoveQueue(toastId)
-         }
-         else {
+         } else {
             state.toasts.forEach((toast) => {
                addToRemoveQueue(toast.id)
             })
@@ -102,17 +100,17 @@ export function reducer(state: State, action: Action): State {
 
          return {
             ...state,
-            toasts: state.toasts.map(t =>
+            toasts: state.toasts.map((t) =>
                t.id === toastId || toastId === undefined
                   ? {
-                        ...t,
-                        open: false,
-                     }
+                       ...t,
+                       open: false,
+                    }
                   : t,
             ),
          }
       }
-      case 'REMOVE_TOAST':
+      case "REMOVE_TOAST":
          if (action.toastId === undefined) {
             return {
                ...state,
@@ -121,7 +119,7 @@ export function reducer(state: State, action: Action): State {
          }
          return {
             ...state,
-            toasts: state.toasts.filter(t => t.id !== action.toastId),
+            toasts: state.toasts.filter((t) => t.id !== action.toastId),
          }
    }
 }
@@ -137,27 +135,26 @@ function dispatch(action: Action) {
    })
 }
 
-type Toast = Omit<ToasterToast, 'id'>
+type Toast = Omit<ToasterToast, "id">
 
 function toast({ ...props }: Toast) {
    const id = genId()
 
    const update = (props: ToasterToast) =>
       dispatch({
-         type: 'UPDATE_TOAST',
+         type: "UPDATE_TOAST",
          toast: { ...props, id },
       })
-   const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
 
    dispatch({
-      type: 'ADD_TOAST',
+      type: "ADD_TOAST",
       toast: {
          ...props,
          id,
          open: true,
          onOpenChange: (open) => {
-            if (!open)
-               dismiss()
+            if (!open) dismiss()
          },
       },
    })
@@ -176,15 +173,15 @@ function useToast() {
       listeners.push(setState)
       return () => {
          const index = listeners.indexOf(setState)
-         if (index > -1)
-            listeners.splice(index, 1)
+         if (index > -1) listeners.splice(index, 1)
       }
    }, [state])
 
    return {
       ...state,
       toast,
-      dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+      dismiss: (toastId?: string) =>
+         dispatch({ type: "DISMISS_TOAST", toastId }),
    }
 }
 
diff --git a/apps/web/registry/miami/ui/video-modal.tsx b/apps/web/registry/miami/ui/video-modal.tsx
index 4bd21c68..95e7fec8 100644
--- a/apps/web/registry/miami/ui/video-modal.tsx
+++ b/apps/web/registry/miami/ui/video-modal.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { ny } from '~/lib/utils'
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import * as React from "react"
+import { ny } from "~/lib/utils"
 
 const VideoModal = DialogPrimitive.Root
 
@@ -19,7 +19,7 @@ const VideoModalOverlay = React.forwardRef<
    <DialogPrimitive.Overlay
       ref={ref}
       className={ny(
-         'data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in fixed inset-0 z-50 backdrop-blur-xl',
+         "data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in fixed inset-0 z-50 backdrop-blur-xl",
          className,
       )}
       {...props}
@@ -36,8 +36,8 @@ const VideoModalContent = React.forwardRef<
       <DialogPrimitive.Content
          ref={ref}
          className={ny(
-            'fixed left-1/2 top-1/2 z-50 flex h-screen w-screen -translate-x-1/2 -translate-y-1/2 items-center justify-center p-3',
-            'data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] transition-all',
+            "fixed left-1/2 top-1/2 z-50 flex h-screen w-screen -translate-x-1/2 -translate-y-1/2 items-center justify-center p-3",
+            "data-[state=closed]:animate-modal-fade-out data-[state=open]:animate-modal-fade-in data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] transition-all",
             className,
          )}
          {...props}
@@ -67,7 +67,7 @@ const VideoModalTitle = React.forwardRef<
    <DialogPrimitive.Title
       ref={ref}
       className={ny(
-         'mb-4 text-4xl font-bold text-gray-950 dark:text-gray-50',
+         "mb-4 text-4xl font-bold text-gray-950 dark:text-gray-50",
          className,
       )}
       {...props}
@@ -82,7 +82,7 @@ const VideoModalDescription = React.forwardRef<
    <DialogPrimitive.Description
       ref={ref}
       className={ny(
-         'mb-6 text-xl text-gray-950/80 dark:text-gray-50/70',
+         "mb-6 text-xl text-gray-950/80 dark:text-gray-50/70",
          className,
       )}
       {...props}
@@ -97,7 +97,7 @@ const VideoPreview = React.forwardRef<
    <div
       ref={ref}
       className={ny(
-         'absolute inset-0 z-10 transition-opacity duration-500 group-[.playing]:pointer-events-none group-[.playing]:opacity-0',
+         "absolute inset-0 z-10 transition-opacity duration-500 group-[.playing]:pointer-events-none group-[.playing]:opacity-0",
          className,
       )}
       {...props}
@@ -105,7 +105,7 @@ const VideoPreview = React.forwardRef<
       {children}
    </div>
 ))
-VideoPreview.displayName = 'VideoPreview'
+VideoPreview.displayName = "VideoPreview"
 
 const VideoPlayButton = React.forwardRef<
    HTMLDivElement,
@@ -114,7 +114,7 @@ const VideoPlayButton = React.forwardRef<
    <div
       ref={ref}
       className={ny(
-         'absolute inset-0 z-20 flex items-center justify-center transition-opacity duration-300 group-[.playing]:pointer-events-none group-[.playing]:opacity-0',
+         "absolute inset-0 z-20 flex items-center justify-center transition-opacity duration-300 group-[.playing]:pointer-events-none group-[.playing]:opacity-0",
          className,
       )}
       {...props}
@@ -122,7 +122,7 @@ const VideoPlayButton = React.forwardRef<
       {children}
    </div>
 ))
-VideoPlayButton.displayName = 'VideoPlayButton'
+VideoPlayButton.displayName = "VideoPlayButton"
 
 const VideoPlayer = React.forwardRef<
    HTMLDivElement,
@@ -134,8 +134,8 @@ const VideoPlayer = React.forwardRef<
       <div
          ref={ref}
          className={ny(
-            'group relative aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover dark:border-gray-50/[.1]',
-            isPlaying && 'playing',
+            "group relative aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover dark:border-gray-50/[.1]",
+            isPlaying && "playing",
             className,
          )}
          onClick={() => setIsPlaying(true)}
@@ -145,7 +145,7 @@ const VideoPlayer = React.forwardRef<
       </div>
    )
 })
-VideoPlayer.displayName = 'VideoPlayer'
+VideoPlayer.displayName = "VideoPlayer"
 
 const VideoModalVideo = React.forwardRef<
    HTMLDivElement,
@@ -154,7 +154,7 @@ const VideoModalVideo = React.forwardRef<
    <div
       ref={ref}
       className={ny(
-         'aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover shadow-xl dark:border-gray-50/[.1]',
+         "aspect-video max-w-4xl overflow-hidden rounded-xl border border-gray-950/[.1] object-cover shadow-xl dark:border-gray-50/[.1]",
          className,
       )}
       {...props}
@@ -162,7 +162,7 @@ const VideoModalVideo = React.forwardRef<
       {children}
    </div>
 ))
-VideoModalVideo.displayName = 'VideoModalVideo'
+VideoModalVideo.displayName = "VideoModalVideo"
 
 const CloseIcon = React.forwardRef<
    React.ElementRef<typeof VideoModalClose>,
@@ -173,10 +173,10 @@ const CloseIcon = React.forwardRef<
    <VideoModalClose
       ref={ref}
       className={ny(
-         'rounded-full border border-gray-950/[.1] bg-gray-950/[.01] p-2 transition duration-300 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',
+         "rounded-full border border-gray-950/[.1] bg-gray-950/[.01] p-2 transition duration-300 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
          isMobile
-            ? 'absolute right-4 top-4 lg:hidden'
-            : 'hidden self-start lg:block',
+            ? "absolute right-4 top-4 lg:hidden"
+            : "hidden self-start lg:block",
          className,
       )}
       {...props}
@@ -194,14 +194,13 @@ const CloseIcon = React.forwardRef<
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="1.5"
-         >
-         </path>
+         ></path>
       </svg>
       <span className="sr-only">Close</span>
    </VideoModalClose>
 ))
 
-CloseIcon.displayName = 'CloseIcon'
+CloseIcon.displayName = "CloseIcon"
 
 export {
    VideoModal,
diff --git a/apps/web/registry/miami/ui/warp-background.tsx b/apps/web/registry/miami/ui/warp-background.tsx
new file mode 100644
index 00000000..ffb73aa9
--- /dev/null
+++ b/apps/web/registry/miami/ui/warp-background.tsx
@@ -0,0 +1,151 @@
+import { motion } from "motion/react"
+import type React from "react"
+import { type HTMLAttributes, useCallback, useMemo } from "react"
+import { ny } from "~/registry/miami/lib/utils"
+
+interface WarpBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+   children: React.ReactNode
+   perspective?: number
+   beamsPerSide?: number
+   beamSize?: number
+   beamDelayMax?: number
+   beamDelayMin?: number
+   beamDuration?: number
+   gridColor?: string
+}
+
+const Beam = ({
+   width,
+   x,
+   delay,
+   duration,
+}: {
+   width: string | number
+   x: string | number
+   delay: number
+   duration: number
+}) => {
+   const hue = Math.floor(Math.random() * 360)
+   const ar = Math.floor(Math.random() * 10) + 1
+
+   return (
+      <motion.div
+         style={
+            {
+               "--x": `${x}`,
+               "--width": `${width}`,
+               "--aspect-ratio": `${ar}`,
+               "--background": `linear-gradient(hsl(${hue} 80% 60%), transparent)`,
+            } as React.CSSProperties
+         }
+         className={`absolute left-[var(--x)] top-0 [aspect-ratio:1/var(--aspect-ratio)] [background:var(--background)] [width:var(--width)]`}
+         initial={{ y: "100cqmax", x: "-50%" }}
+         animate={{ y: "-100%", x: "-50%" }}
+         transition={{
+            duration,
+            delay,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: "linear",
+         }}
+      />
+   )
+}
+
+export const WarpBackground: React.FC<WarpBackgroundProps> = ({
+   children,
+   perspective = 100,
+   className,
+   beamsPerSide = 3,
+   beamSize = 5,
+   beamDelayMax = 3,
+   beamDelayMin = 0,
+   beamDuration = 3,
+   gridColor = "hsl(var(--border))",
+   ...props
+}) => {
+   const generateBeams = useCallback(() => {
+      const beams = []
+      const cellsPerSide = Math.floor(100 / beamSize)
+      const step = cellsPerSide / beamsPerSide
+
+      for (let i = 0; i < beamsPerSide; i++) {
+         const x = Math.floor(i * step)
+         const delay =
+            Math.random() * (beamDelayMax - beamDelayMin) + beamDelayMin
+         beams.push({ x, delay })
+      }
+      return beams
+   }, [beamsPerSide, beamSize, beamDelayMax, beamDelayMin])
+
+   const topBeams = useMemo(() => generateBeams(), [generateBeams])
+   const rightBeams = useMemo(() => generateBeams(), [generateBeams])
+   const bottomBeams = useMemo(() => generateBeams(), [generateBeams])
+   const leftBeams = useMemo(() => generateBeams(), [generateBeams])
+
+   return (
+      <div className={ny("relative rounded border p-20", className)} {...props}>
+         <div
+            style={
+               {
+                  "--perspective": `${perspective}px`,
+                  "--grid-color": gridColor,
+                  "--beam-size": `${beamSize}%`,
+               } as React.CSSProperties
+            }
+            className={
+               "pointer-events-none absolute left-0 top-0 size-full overflow-hidden [clip-path:inset(0)] [container-type:size] [perspective:var(--perspective)] [transform-style:preserve-3d]"
+            }
+         >
+            {/* top side */}
+            <div className="absolute [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]">
+               {topBeams.map((beam, index) => (
+                  <Beam
+                     key={`top-${index}`}
+                     width={`${beamSize}%`}
+                     x={`${beam.x * beamSize}%`}
+                     delay={beam.delay}
+                     duration={beamDuration}
+                  />
+               ))}
+            </div>
+            {/* bottom side */}
+            <div className="absolute top-full [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]">
+               {bottomBeams.map((beam, index) => (
+                  <Beam
+                     key={`bottom-${index}`}
+                     width={`${beamSize}%`}
+                     x={`${beam.x * beamSize}%`}
+                     delay={beam.delay}
+                     duration={beamDuration}
+                  />
+               ))}
+            </div>
+            {/* left side */}
+            <div className="absolute left-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:0%_0%] [transform:rotate(90deg)_rotateX(-90deg)] [width:100cqh]">
+               {leftBeams.map((beam, index) => (
+                  <Beam
+                     key={`left-${index}`}
+                     width={`${beamSize}%`}
+                     x={`${beam.x * beamSize}%`}
+                     delay={beam.delay}
+                     duration={beamDuration}
+                  />
+               ))}
+            </div>
+            {/* right side */}
+            <div className="absolute right-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [width:100cqh] [transform-origin:100%_0%] [transform:rotate(-90deg)_rotateX(-90deg)]">
+               {rightBeams.map((beam, index) => (
+                  <Beam
+                     key={`right-${index}`}
+                     width={`${beamSize}%`}
+                     x={`${beam.x * beamSize}%`}
+                     delay={beam.delay}
+                     duration={beamDuration}
+                  />
+               ))}
+            </div>
+         </div>
+         <div className="relative">{children}</div>
+      </div>
+   )
+}
diff --git a/apps/web/registry/miami/ui/wavy-dot-pattern.tsx b/apps/web/registry/miami/ui/wavy-dot-pattern.tsx
deleted file mode 100644
index 258c32c9..00000000
--- a/apps/web/registry/miami/ui/wavy-dot-pattern.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-import { useState } from 'react'
-import { anime } from 'react-anime'
-import { ny } from '~/lib/utils'
-
-interface WavyDotPatternProps {
-   className?: string
-   gridWidth?: number
-   gridHeight?: number
-   dotWidth?: number
-   dotHeight?: number
-}
-
-export function WavyDotPattern({
-   className,
-   gridWidth,
-   gridHeight,
-   dotWidth,
-   dotHeight,
-}: WavyDotPatternProps) {
-   const [dotClickDisabled, setDotClickDisabled] = useState<boolean>(false)
-
-   const handleDotClick = (e: any, width: number, height: number) => {
-      setDotClickDisabled(true)
-
-      anime({
-         targets: '.dot-point',
-         scale: [
-            { value: 1.35, easing: 'easeOutSine', duration: 250 },
-            { value: 1, easing: 'easeInOutQuad', duration: 500 },
-         ],
-         translateY: [
-            { value: -15, easing: 'easeOutSine', duration: 250 },
-            { value: 1, easing: 'easeInOutQuad', duration: 500 },
-         ],
-         opacity: [
-            { value: 0.7, easing: 'easeOutSine', duration: 250 },
-            { value: 0.35, easing: 'easeInOutQuad', duration: 500 },
-         ],
-         delay: anime.stagger(100, {
-            grid: [width, height],
-            from: e.target.dataset.index,
-         }),
-      })
-
-      setTimeout(() => setDotClickDisabled(false), 2000)
-   }
-
-   const GRID_WIDTH = gridWidth || 30
-   const GRID_HEIGHT = gridHeight || 30
-
-   const DOT_WIDTH = dotWidth ? `w-[${dotWidth}px]` : 'w-[8px]'
-   const DOT_HEIGHT = dotHeight ? `h-[${dotHeight}px]` : 'h-[8px]'
-
-   let index = 0
-
-   const dots = []
-
-   for (let i = 0; i < GRID_WIDTH; i++) {
-      for (let j = 0; j < GRID_HEIGHT; j++) {
-         dots.push(
-            <button
-               className="rounded-[8px] p-[0.8rem]"
-               type="button"
-               onClick={e => handleDotClick(e, GRID_WIDTH, GRID_HEIGHT)}
-               data-index={index}
-               key={`${i}-${j}`}
-               disabled={dotClickDisabled}
-            >
-               <div
-                  className={ny(
-                     'dot-point',
-                     'rounded-xl bg-gradient-to-r from-[#d9cab3] to-black opacity-35 hover:from-black hover:to-black hover:opacity-100',
-                     DOT_WIDTH,
-                     DOT_HEIGHT,
-                  )}
-                  data-index={index}
-               />
-            </button>,
-         )
-         index++
-      }
-   }
-
-   return (
-      <div
-         style={{ gridTemplateColumns: `repeat(${GRID_WIDTH}, 1fr)` }}
-         className={ny('max-w-3/4 absolute z-0 grid', className)}
-      >
-         {dots.map(dot => dot)}
-      </div>
-   )
-}
-
-export default WavyDotPattern
diff --git a/apps/web/registry/miami/ui/wavy-text.tsx b/apps/web/registry/miami/ui/wavy-text.tsx
index 1a4c93ca..6e4f5b46 100644
--- a/apps/web/registry/miami/ui/wavy-text.tsx
+++ b/apps/web/registry/miami/ui/wavy-text.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { AnimatePresence, motion } from 'framer-motion'
-import { useMemo } from 'react'
-import { ny } from '~/lib/utils'
+import { AnimatePresence, motion } from "framer-motion"
+import { useMemo } from "react"
+import { ny } from "~/lib/utils"
 
 interface WavyTextProps {
    word: string
@@ -26,7 +26,7 @@ function WavyText({
       visible: { y: -10 },
    }
    const combinedVariants = variant || defaultVariants
-   const characters = useMemo(() => word.split(''), [word])
+   const characters = useMemo(() => word.split(""), [word])
    return (
       <div className="flex justify-center space-x-2 overflow-hidden p-3">
          <AnimatePresence>
@@ -38,13 +38,13 @@ function WavyText({
                   exit="hidden"
                   variants={combinedVariants}
                   transition={{
-                     yoyo: Infinity,
+                     yoyo: Number.POSITIVE_INFINITY,
                      duration,
                      delay: i * delay,
                   }}
                   className={ny(
                      className,
-                     'font-display text-center text-4xl font-bold tracking-[-0.15em] md:text-7xl',
+                     "font-display text-center text-4xl font-bold tracking-[-0.15em] md:text-7xl",
                   )}
                >
                   {char}
diff --git a/apps/web/registry/miami/ui/word-fade-in.tsx b/apps/web/registry/miami/ui/word-fade-in.tsx
index fb9e30d8..94bd42bb 100644
--- a/apps/web/registry/miami/ui/word-fade-in.tsx
+++ b/apps/web/registry/miami/ui/word-fade-in.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import type { Variants } from 'framer-motion'
-import { motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import type { Variants } from "framer-motion"
+import { motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface WordFadeInProps {
    words: string
@@ -24,7 +24,7 @@ export default function WordFadeIn({
    },
    className,
 }: WordFadeInProps) {
-   const _words = words.split(' ')
+   const _words = words.split(" ")
 
    return (
       <motion.h1
@@ -32,14 +32,13 @@ export default function WordFadeIn({
          initial="hidden"
          animate="visible"
          className={ny(
-            'font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white',
+            "font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white",
             className,
          )}
       >
          {_words.map((word, i) => (
             <motion.span key={word} variants={variants} custom={i}>
-               {word}
-               {' '}
+               {word}{" "}
             </motion.span>
          ))}
       </motion.h1>
diff --git a/apps/web/registry/miami/ui/word-pull-up.tsx b/apps/web/registry/miami/ui/word-pull-up.tsx
index c8caa1f4..a0136db8 100644
--- a/apps/web/registry/miami/ui/word-pull-up.tsx
+++ b/apps/web/registry/miami/ui/word-pull-up.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import type { Variants } from 'framer-motion'
-import { motion } from 'framer-motion'
-import { ny } from '~/lib/utils'
+import type { Variants } from "framer-motion"
+import { motion } from "framer-motion"
+import { ny } from "~/lib/utils"
 
 interface WordPullUpProps {
    words: string
@@ -35,17 +35,17 @@ export default function WordPullUp({
          initial="hidden"
          animate="show"
          className={ny(
-            'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',
+            "font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm",
             className,
          )}
       >
-         {words.split(' ').map((word, i) => (
+         {words.split(" ").map((word, i) => (
             <motion.span
                key={i}
                variants={framerProps}
-               style={{ display: 'inline-block', paddingRight: '8px' }}
+               style={{ display: "inline-block", paddingRight: "8px" }}
             >
-               {word === '' ? <span>&nbsp;</span> : word}
+               {word === "" ? <span>&nbsp;</span> : word}
             </motion.span>
          ))}
       </motion.h1>
diff --git a/apps/web/registry/miami/ui/word-rotate.tsx b/apps/web/registry/miami/ui/word-rotate.tsx
index d0b41b4b..8bd53798 100644
--- a/apps/web/registry/miami/ui/word-rotate.tsx
+++ b/apps/web/registry/miami/ui/word-rotate.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import type { HTMLMotionProps } from 'framer-motion'
-import { AnimatePresence, motion } from 'framer-motion'
-import { useEffect, useState } from 'react'
-import { ny } from '~/lib/utils'
+import type { HTMLMotionProps } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
+import { useEffect, useState } from "react"
+import { ny } from "~/lib/utils"
 
 interface WordRotateProps {
    words: string[]
    duration?: number
-   framerProps?: HTMLMotionProps<'h1'>
+   framerProps?: HTMLMotionProps<"h1">
    className?: string
 }
 
@@ -19,7 +19,7 @@ export default function WordRotate({
       initial: { opacity: 0, y: -50 },
       animate: { opacity: 1, y: 0 },
       exit: { opacity: 0, y: 50 },
-      transition: { duration: 0.25, ease: 'easeOut' },
+      transition: { duration: 0.25, ease: "easeOut" },
    },
    className,
 }: WordRotateProps) {
@@ -27,7 +27,7 @@ export default function WordRotate({
 
    useEffect(() => {
       const interval = setInterval(() => {
-         setIndex(prevIndex => (prevIndex + 1) % words.length)
+         setIndex((prevIndex) => (prevIndex + 1) % words.length)
       }, duration)
 
       // Clean up interval on unmount
diff --git a/apps/web/registry/miami/v0/sidebar-16.tsx b/apps/web/registry/miami/v0/sidebar-16.tsx
new file mode 100644
index 00000000..b8c69f34
--- /dev/null
+++ b/apps/web/registry/miami/v0/sidebar-16.tsx
@@ -0,0 +1,670 @@
+"use client"
+
+import {
+   BadgeCheck,
+   Bell,
+   BookOpen,
+   Bot,
+   ChevronRight,
+   ChevronsUpDown,
+   Command,
+   CreditCard,
+   Folder,
+   Frame,
+   LifeBuoy,
+   LogOut,
+   Map,
+   MoreHorizontal,
+   PieChart,
+   Send,
+   Settings2,
+   Share,
+   Sparkles,
+   SquareTerminal,
+   Trash2,
+} from "lucide-react"
+import Link from "next/link"
+import * as React from "react"
+
+import { Icons } from "~/components/icons"
+import { ny } from "~/lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
+import {
+   Breadcrumb,
+   BreadcrumbItem,
+   BreadcrumbLink,
+   BreadcrumbList,
+   BreadcrumbPage,
+   BreadcrumbSeparator,
+} from "~/registry/miami/ui/breadcrumb"
+import { Button } from "~/registry/miami/ui/button"
+import {
+   Collapsible,
+   CollapsibleContent,
+   CollapsibleTrigger,
+} from "~/registry/miami/ui/collapsible"
+import {
+   DropdownMenu,
+   DropdownMenuContent,
+   DropdownMenuGroup,
+   DropdownMenuItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuTrigger,
+} from "~/registry/miami/ui/dropdown-menu"
+import {
+   NavigationMenu,
+   NavigationMenuContent,
+   NavigationMenuItem,
+   NavigationMenuLink,
+   NavigationMenuList,
+   NavigationMenuTrigger,
+   navigationMenuTriggerStyle,
+} from "~/registry/miami/ui/navigation-menu"
+import { Separator } from "~/registry/miami/ui/separator"
+import {
+   Sidebar,
+   SidebarContent,
+   SidebarFooter,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarGroupLabel,
+   SidebarHeader,
+   SidebarInset,
+   SidebarMenu,
+   SidebarMenuAction,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarMenuSub,
+   SidebarMenuSubButton,
+   SidebarMenuSubItem,
+   SidebarProvider,
+   SidebarTrigger,
+   useSidebar,
+} from "~/registry/miami/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "An inset sidebar with site header navigation."
+
+const HEADER_HEIGHT = "4rem"
+
+const data = {
+   user: {
+      name: "nyxb",
+      email: "m@example.com",
+      avatar: "/avatars/nyxb.jpg",
+   },
+   navMain: [
+      {
+         title: "Playground",
+         url: "#",
+         icon: SquareTerminal,
+         isActive: true,
+         items: [
+            {
+               title: "History",
+               url: "#",
+            },
+            {
+               title: "Starred",
+               url: "#",
+            },
+            {
+               title: "Settings",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Models",
+         url: "#",
+         icon: Bot,
+         items: [
+            {
+               title: "Genesis",
+               url: "#",
+            },
+            {
+               title: "Explorer",
+               url: "#",
+            },
+            {
+               title: "Quantum",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Documentation",
+         url: "#",
+         icon: BookOpen,
+         items: [
+            {
+               title: "Introduction",
+               url: "#",
+            },
+            {
+               title: "Get Started",
+               url: "#",
+            },
+            {
+               title: "Tutorials",
+               url: "#",
+            },
+            {
+               title: "Changelog",
+               url: "#",
+            },
+         ],
+      },
+      {
+         title: "Settings",
+         url: "#",
+         icon: Settings2,
+         items: [
+            {
+               title: "General",
+               url: "#",
+            },
+            {
+               title: "Team",
+               url: "#",
+            },
+            {
+               title: "Billing",
+               url: "#",
+            },
+            {
+               title: "Limits",
+               url: "#",
+            },
+         ],
+      },
+   ],
+   navSecondary: [
+      {
+         title: "Support",
+         url: "#",
+         icon: LifeBuoy,
+      },
+      {
+         title: "Feedback",
+         url: "#",
+         icon: Send,
+      },
+   ],
+   projects: [
+      {
+         name: "Design Engineering",
+         url: "#",
+         icon: Frame,
+      },
+      {
+         name: "Sales & Marketing",
+         url: "#",
+         icon: PieChart,
+      },
+      {
+         name: "Travel",
+         url: "#",
+         icon: Map,
+      },
+   ],
+}
+
+const components: { title: string; href: string; description: string }[] = [
+   {
+      title: "Alert Dialog",
+      href: "/docs/primitives/alert-dialog",
+      description:
+         "A modal dialog that interrupts the user with important content and expects a response.",
+   },
+   {
+      title: "Hover Card",
+      href: "/docs/primitives/hover-card",
+      description:
+         "For sighted users to preview content available behind a link.",
+   },
+   {
+      title: "Progress",
+      href: "/docs/primitives/progress",
+      description:
+         "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+   },
+   {
+      title: "Scroll-area",
+      href: "/docs/primitives/scroll-area",
+      description: "Visually or semantically separates content.",
+   },
+   {
+      title: "Tabs",
+      href: "/docs/primitives/tabs",
+      description:
+         "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+   },
+   {
+      title: "Tooltip",
+      href: "/docs/primitives/tooltip",
+      description:
+         "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+   },
+]
+
+export default function Page() {
+   const [open, setOpen] = React.useState(true)
+   const { isMobile } = useSidebar()
+
+   return (
+      <div
+         style={
+            {
+               "--header-height": HEADER_HEIGHT,
+            } as React.CSSProperties
+         }
+      >
+         <header className="sticky top-0 bg-sidebar flex h-[--header-height] shrink-0 items-center gap-2 border-b px-4 isolate z-20">
+            <div className="flex items-center gap-2 w-full">
+               <Button
+                  className="hidden md:flex"
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setOpen(!open)}
+               >
+                  <Sidebar />
+               </Button>
+
+               <div className="mx-auto flex items-center gap-2">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                     <Command className="size-4" />
+                  </div>
+                  <Separator orientation="vertical" className="ml-4 h-4" />
+                  <NavigationMenu>
+                     <NavigationMenuList>
+                        <NavigationMenuItem>
+                           <NavigationMenuTrigger className="bg-sidebar">
+                              Getting started
+                           </NavigationMenuTrigger>
+                           <NavigationMenuContent>
+                              <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                                 <li className="row-span-3">
+                                    <NavigationMenuLink asChild>
+                                       <a
+                                          className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                                          href="/"
+                                       >
+                                          <Icons.logo className="h-6 w-6" />
+                                          <div className="mb-2 mt-4 text-lg font-medium">
+                                             nyxb/ui
+                                          </div>
+                                          <p className="text-sm leading-tight text-muted-foreground">
+                                             Beautifully designed components
+                                             built with Radix UI and Tailwind
+                                             CSS.
+                                          </p>
+                                       </a>
+                                    </NavigationMenuLink>
+                                 </li>
+
+                                 <li>
+                                    <NavigationMenuLink asChild>
+                                       <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                                          <div className="text-sm font-medium leading-none">
+                                             Introduction
+                                          </div>
+                                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                             Re-usable components built using
+                                             Radix UI and Tailwind CSS.
+                                          </p>
+                                       </a>
+                                    </NavigationMenuLink>
+                                 </li>
+
+                                 <li>
+                                    <NavigationMenuLink asChild>
+                                       <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                                          <div className="text-sm font-medium leading-none">
+                                             Installation
+                                          </div>
+                                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                             How to install dependencies and
+                                             structure your app.
+                                          </p>
+                                       </a>
+                                    </NavigationMenuLink>
+                                 </li>
+
+                                 <li>
+                                    <NavigationMenuLink asChild>
+                                       <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                                          <div className="text-sm font-medium leading-none">
+                                             Typography
+                                          </div>
+                                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                             Styles for headings, paragraphs,
+                                             lists...etc
+                                          </p>
+                                       </a>
+                                    </NavigationMenuLink>
+                                 </li>
+                              </ul>
+                           </NavigationMenuContent>
+                        </NavigationMenuItem>
+                        <NavigationMenuItem>
+                           <NavigationMenuTrigger className="bg-sidebar">
+                              Components
+                           </NavigationMenuTrigger>
+                           <NavigationMenuContent>
+                              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                                 {components.map((component) => (
+                                    <li>
+                                       <NavigationMenuLink
+                                          key={component.title}
+                                          asChild
+                                       >
+                                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                                             <div className="text-sm font-medium leading-none">
+                                                {component.title}
+                                             </div>
+                                             <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                                {component.description}
+                                             </p>
+                                          </a>
+                                       </NavigationMenuLink>
+                                    </li>
+                                 ))}
+                              </ul>
+                           </NavigationMenuContent>
+                        </NavigationMenuItem>
+                        <NavigationMenuItem>
+                           <Link href="/docs" legacyBehavior passHref>
+                              <NavigationMenuLink
+                                 className={ny(
+                                    navigationMenuTriggerStyle(),
+                                    "bg-sidebar",
+                                 )}
+                              >
+                                 Documentation
+                              </NavigationMenuLink>
+                           </Link>
+                        </NavigationMenuItem>
+                     </NavigationMenuList>
+                  </NavigationMenu>
+               </div>
+            </div>
+         </header>
+         <SidebarProvider open={open} onOpenChange={setOpen}>
+            <Sidebar
+               className="top-[--header-height] pb-[--header-height]"
+               variant="inset"
+            >
+               <SidebarHeader>
+                  <SidebarMenu>
+                     <SidebarMenuItem>
+                        <SidebarMenuButton size="lg" asChild>
+                           <a href="#">
+                              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                                 <Command className="size-4" />
+                              </div>
+                              <div className="grid flex-1 text-left text-sm leading-tight">
+                                 <span className="truncate font-semibold">
+                                    Acme Inc
+                                 </span>
+                                 <span className="truncate text-xs">
+                                    Enterprise
+                                 </span>
+                              </div>
+                           </a>
+                        </SidebarMenuButton>
+                     </SidebarMenuItem>
+                  </SidebarMenu>
+               </SidebarHeader>
+               <SidebarContent>
+                  <SidebarGroup>
+                     <SidebarGroupLabel>Platform</SidebarGroupLabel>
+                     <SidebarMenu>
+                        {data.navMain.map((item) => (
+                           <Collapsible
+                              key={item.title}
+                              asChild
+                              defaultOpen={item.isActive}
+                           >
+                              <SidebarMenuItem>
+                                 <SidebarMenuButton
+                                    asChild
+                                    tooltip={item.title}
+                                 >
+                                    <a href={item.url}>
+                                       <item.icon />
+                                       <span>{item.title}</span>
+                                    </a>
+                                 </SidebarMenuButton>
+                                 {item.items?.length ? (
+                                    <>
+                                       <CollapsibleTrigger asChild>
+                                          <SidebarMenuAction className="data-[state=open]:rotate-90">
+                                             <ChevronRight />
+                                             <span className="sr-only">
+                                                Toggle
+                                             </span>
+                                          </SidebarMenuAction>
+                                       </CollapsibleTrigger>
+                                       <CollapsibleContent>
+                                          <SidebarMenuSub>
+                                             {item.items?.map((subItem) => (
+                                                <SidebarMenuSubItem
+                                                   key={subItem.title}
+                                                >
+                                                   <SidebarMenuSubButton
+                                                      asChild
+                                                   >
+                                                      <a href={subItem.url}>
+                                                         <span>
+                                                            {subItem.title}
+                                                         </span>
+                                                      </a>
+                                                   </SidebarMenuSubButton>
+                                                </SidebarMenuSubItem>
+                                             ))}
+                                          </SidebarMenuSub>
+                                       </CollapsibleContent>
+                                    </>
+                                 ) : null}
+                              </SidebarMenuItem>
+                           </Collapsible>
+                        ))}
+                     </SidebarMenu>
+                  </SidebarGroup>
+                  <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+                     <SidebarGroupLabel>Projects</SidebarGroupLabel>
+                     <SidebarMenu>
+                        {data.projects.map((item) => (
+                           <SidebarMenuItem key={item.name}>
+                              <SidebarMenuButton asChild>
+                                 <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.name}</span>
+                                 </a>
+                              </SidebarMenuButton>
+                              <DropdownMenu>
+                                 <DropdownMenuTrigger asChild>
+                                    <SidebarMenuAction showOnHover>
+                                       <MoreHorizontal />
+                                       <span className="sr-only">More</span>
+                                    </SidebarMenuAction>
+                                 </DropdownMenuTrigger>
+                                 <DropdownMenuContent
+                                    className="w-48"
+                                    side={isMobile ? "bottom" : "right"}
+                                    align={isMobile ? "end" : "start"}
+                                 >
+                                    <DropdownMenuItem>
+                                       <Folder className="text-muted-foreground" />
+                                       <span>View Project</span>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem>
+                                       <Share className="text-muted-foreground" />
+                                       <span>Share Project</span>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem>
+                                       <Trash2 className="text-muted-foreground" />
+                                       <span>Delete Project</span>
+                                    </DropdownMenuItem>
+                                 </DropdownMenuContent>
+                              </DropdownMenu>
+                           </SidebarMenuItem>
+                        ))}
+                        <SidebarMenuItem>
+                           <SidebarMenuButton>
+                              <MoreHorizontal />
+                              <span>More</span>
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                     </SidebarMenu>
+                  </SidebarGroup>
+                  <SidebarGroup className="mt-auto">
+                     <SidebarGroupContent>
+                        <SidebarMenu>
+                           {data.navSecondary.map((item) => (
+                              <SidebarMenuItem key={item.title}>
+                                 <SidebarMenuButton asChild size="sm">
+                                    <a href={item.url}>
+                                       <item.icon />
+                                       <span>{item.title}</span>
+                                    </a>
+                                 </SidebarMenuButton>
+                              </SidebarMenuItem>
+                           ))}
+                        </SidebarMenu>
+                     </SidebarGroupContent>
+                  </SidebarGroup>
+               </SidebarContent>
+               <SidebarFooter>
+                  <SidebarMenu>
+                     <SidebarMenuItem>
+                        <DropdownMenu>
+                           <DropdownMenuTrigger asChild>
+                              <SidebarMenuButton
+                                 size="lg"
+                                 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                              >
+                                 <Avatar className="h-8 w-8 rounded-lg">
+                                    <AvatarImage
+                                       src={data.user.avatar}
+                                       alt={data.user.name}
+                                    />
+                                    <AvatarFallback className="rounded-lg">
+                                       ny
+                                    </AvatarFallback>
+                                 </Avatar>
+                                 <div className="grid flex-1 text-left text-sm leading-tight">
+                                    <span className="truncate font-semibold">
+                                       {data.user.name}
+                                    </span>
+                                    <span className="truncate text-xs">
+                                       {data.user.email}
+                                    </span>
+                                 </div>
+                                 <ChevronsUpDown className="ml-auto size-4" />
+                              </SidebarMenuButton>
+                           </DropdownMenuTrigger>
+                           <DropdownMenuContent
+                              className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                              side={isMobile ? "bottom" : "right"}
+                              align="end"
+                              sideOffset={4}
+                           >
+                              <DropdownMenuLabel className="p-0 font-normal">
+                                 <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                    <Avatar className="h-8 w-8 rounded-lg">
+                                       <AvatarImage
+                                          src={data.user.avatar}
+                                          alt={data.user.name}
+                                       />
+                                       <AvatarFallback className="rounded-lg">
+                                          ny
+                                       </AvatarFallback>
+                                    </Avatar>
+                                    <div className="grid flex-1 text-left text-sm leading-tight">
+                                       <span className="truncate font-semibold">
+                                          {data.user.name}
+                                       </span>
+                                       <span className="truncate text-xs">
+                                          {data.user.email}
+                                       </span>
+                                    </div>
+                                 </div>
+                              </DropdownMenuLabel>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuGroup>
+                                 <DropdownMenuItem>
+                                    <Sparkles />
+                                    Upgrade to Pro
+                                 </DropdownMenuItem>
+                              </DropdownMenuGroup>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuGroup>
+                                 <DropdownMenuItem>
+                                    <BadgeCheck />
+                                    Account
+                                 </DropdownMenuItem>
+                                 <DropdownMenuItem>
+                                    <CreditCard />
+                                    Billing
+                                 </DropdownMenuItem>
+                                 <DropdownMenuItem>
+                                    <Bell />
+                                    Notifications
+                                 </DropdownMenuItem>
+                              </DropdownMenuGroup>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem>
+                                 <LogOut />
+                                 Log out
+                              </DropdownMenuItem>
+                           </DropdownMenuContent>
+                        </DropdownMenu>
+                     </SidebarMenuItem>
+                  </SidebarMenu>
+               </SidebarFooter>
+            </Sidebar>
+
+            <SidebarInset>
+               <header className=" flex shrink-0 items-center gap-2 border-b py-2">
+                  <div className="flex items-center gap-2 px-4 py-2">
+                     <div className="flex md:hidden items-center gap-2">
+                        <SidebarTrigger />
+                        <Separator
+                           orientation="vertical"
+                           className="mr-2 h-4"
+                        />
+                     </div>
+                     <Breadcrumb>
+                        <BreadcrumbList>
+                           <BreadcrumbItem className="hidden md:block">
+                              <BreadcrumbLink href="#">
+                                 Building Your Application
+                              </BreadcrumbLink>
+                           </BreadcrumbItem>
+                           <BreadcrumbSeparator className="hidden md:block" />
+                           <BreadcrumbItem>
+                              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                           </BreadcrumbItem>
+                        </BreadcrumbList>
+                     </Breadcrumb>
+                  </div>
+               </header>
+               <div className="flex flex-1 flex-col gap-4 p-4">
+                  <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                     <div className="aspect-video rounded-xl bg-muted/50" />
+                     <div className="aspect-video rounded-xl bg-muted/50" />
+                     <div className="aspect-video rounded-xl bg-muted/50" />
+                  </div>
+                  <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+               </div>
+            </SidebarInset>
+         </SidebarProvider>
+      </div>
+   )
+}
diff --git a/apps/web/registry/registry-base-colors.ts b/apps/web/registry/registry-base-colors.ts
index e14aa6c8..d3da3665 100644
--- a/apps/web/registry/registry-base-colors.ts
+++ b/apps/web/registry/registry-base-colors.ts
@@ -1,753 +1,753 @@
 export const baseColors = [
    {
-      name: 'zinc',
-      label: 'Zinc',
+      name: "zinc",
+      label: "Zinc",
       activeColor: {
-         light: '240 5.9% 10%',
-         dark: '240 5.2% 33.9%',
+         light: "240 5.9% 10%",
+         dark: "240 5.2% 33.9%",
       },
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '240 10% 3.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '240 10% 3.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '240 10% 3.9%',
-            'primary': '240 5.9% 10%',
-            'primary-foreground': '0 0% 98%',
-            'secondary': '240 4.8% 95.9%',
-            'secondary-foreground': '240 5.9% 10%',
-            'muted': '240 4.8% 95.9%',
-            'muted-foreground': '240 3.8% 46.1%',
-            'accent': '240 4.8% 95.9%',
-            'accent-foreground': '240 5.9% 10%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '240 5.9% 90%',
-            'input': '240 5.9% 90%',
-            'ring': '240 5.9% 10%',
-            'radius': '0.5rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
+            background: "0 0% 100%",
+            foreground: "240 10% 3.9%",
+            card: "0 0% 100%",
+            "card-foreground": "240 10% 3.9%",
+            popover: "0 0% 100%",
+            "popover-foreground": "240 10% 3.9%",
+            primary: "240 5.9% 10%",
+            "primary-foreground": "0 0% 98%",
+            secondary: "240 4.8% 95.9%",
+            "secondary-foreground": "240 5.9% 10%",
+            muted: "240 4.8% 95.9%",
+            "muted-foreground": "240 3.8% 46.1%",
+            accent: "240 4.8% 95.9%",
+            "accent-foreground": "240 5.9% 10%",
+            destructive: "0 84.2% 60.2%",
+            "destructive-foreground": "0 0% 98%",
+            border: "240 5.9% 90%",
+            input: "240 5.9% 90%",
+            ring: "240 5.9% 10%",
+            radius: "0.5rem",
+            "chart-1": "12 76% 61%",
+            "chart-2": "173 58% 39%",
+            "chart-3": "197 37% 24%",
+            "chart-4": "43 74% 66%",
+            "chart-5": "27 87% 67%",
          },
          dark: {
-            'background': '240 10% 3.9%',
-            'foreground': '0 0% 98%',
-            'card': '240 10% 3.9%',
-            'card-foreground': '0 0% 98%',
-            'popover': '240 10% 3.9%',
-            'popover-foreground': '0 0% 98%',
-            'primary': '0 0% 98%',
-            'primary-foreground': '240 5.9% 10%',
-            'secondary': '240 3.7% 15.9%',
-            'secondary-foreground': '0 0% 98%',
-            'muted': '240 3.7% 15.9%',
-            'muted-foreground': '240 5% 64.9%',
-            'accent': '240 3.7% 15.9%',
-            'accent-foreground': '0 0% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '240 3.7% 15.9%',
-            'input': '240 3.7% 15.9%',
-            'ring': '240 4.9% 83.9%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
+            background: "240 10% 3.9%",
+            foreground: "0 0% 98%",
+            card: "240 10% 3.9%",
+            "card-foreground": "0 0% 98%",
+            popover: "240 10% 3.9%",
+            "popover-foreground": "0 0% 98%",
+            primary: "0 0% 98%",
+            "primary-foreground": "240 5.9% 10%",
+            secondary: "240 3.7% 15.9%",
+            "secondary-foreground": "0 0% 98%",
+            muted: "240 3.7% 15.9%",
+            "muted-foreground": "240 5% 64.9%",
+            accent: "240 3.7% 15.9%",
+            "accent-foreground": "0 0% 98%",
+            destructive: "0 62.8% 30.6%",
+            "destructive-foreground": "0 0% 98%",
+            border: "240 3.7% 15.9%",
+            input: "240 3.7% 15.9%",
+            ring: "240 4.9% 83.9%",
+            "chart-1": "220 70% 50%",
+            "chart-2": "160 60% 45%",
+            "chart-3": "30 80% 55%",
+            "chart-4": "280 65% 60%",
+            "chart-5": "340 75% 55%",
          },
       },
    },
    {
-      name: 'slate',
-      label: 'Slate',
+      name: "slate",
+      label: "Slate",
       activeColor: {
-         light: '215.4 16.3% 46.9%',
-         dark: '215.3 19.3% 34.5%',
+         light: "215.4 16.3% 46.9%",
+         dark: "215.3 19.3% 34.5%",
       },
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '222.2 84% 4.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '222.2 84% 4.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '222.2 84% 4.9%',
-            'primary': '222.2 47.4% 11.2%',
-            'primary-foreground': '210 40% 98%',
-            'secondary': '210 40% 96.1%',
-            'secondary-foreground': '222.2 47.4% 11.2%',
-            'muted': '210 40% 96.1%',
-            'muted-foreground': '215.4 16.3% 46.9%',
-            'accent': '210 40% 96.1%',
-            'accent-foreground': '222.2 47.4% 11.2%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '210 40% 98%',
-            'border': '214.3 31.8% 91.4%',
-            'input': '214.3 31.8% 91.4%',
-            'ring': '222.2 84% 4.9%',
-            'radius': '0.5rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
+            background: "0 0% 100%",
+            foreground: "222.2 84% 4.9%",
+            card: "0 0% 100%",
+            "card-foreground": "222.2 84% 4.9%",
+            popover: "0 0% 100%",
+            "popover-foreground": "222.2 84% 4.9%",
+            primary: "222.2 47.4% 11.2%",
+            "primary-foreground": "210 40% 98%",
+            secondary: "210 40% 96.1%",
+            "secondary-foreground": "222.2 47.4% 11.2%",
+            muted: "210 40% 96.1%",
+            "muted-foreground": "215.4 16.3% 46.9%",
+            accent: "210 40% 96.1%",
+            "accent-foreground": "222.2 47.4% 11.2%",
+            destructive: "0 84.2% 60.2%",
+            "destructive-foreground": "210 40% 98%",
+            border: "214.3 31.8% 91.4%",
+            input: "214.3 31.8% 91.4%",
+            ring: "222.2 84% 4.9%",
+            radius: "0.5rem",
+            "chart-1": "12 76% 61%",
+            "chart-2": "173 58% 39%",
+            "chart-3": "197 37% 24%",
+            "chart-4": "43 74% 66%",
+            "chart-5": "27 87% 67%",
          },
          dark: {
-            'background': '222.2 84% 4.9%',
-            'foreground': '210 40% 98%',
-            'card': '222.2 84% 4.9%',
-            'card-foreground': '210 40% 98%',
-            'popover': '222.2 84% 4.9%',
-            'popover-foreground': '210 40% 98%',
-            'primary': '210 40% 98%',
-            'primary-foreground': '222.2 47.4% 11.2%',
-            'secondary': '217.2 32.6% 17.5%',
-            'secondary-foreground': '210 40% 98%',
-            'muted': '217.2 32.6% 17.5%',
-            'muted-foreground': '215 20.2% 65.1%',
-            'accent': '217.2 32.6% 17.5%',
-            'accent-foreground': '210 40% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '210 40% 98%',
-            'border': '217.2 32.6% 17.5%',
-            'input': '217.2 32.6% 17.5%',
-            'ring': '212.7 26.8% 83.9',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
+            background: "222.2 84% 4.9%",
+            foreground: "210 40% 98%",
+            card: "222.2 84% 4.9%",
+            "card-foreground": "210 40% 98%",
+            popover: "222.2 84% 4.9%",
+            "popover-foreground": "210 40% 98%",
+            primary: "210 40% 98%",
+            "primary-foreground": "222.2 47.4% 11.2%",
+            secondary: "217.2 32.6% 17.5%",
+            "secondary-foreground": "210 40% 98%",
+            muted: "217.2 32.6% 17.5%",
+            "muted-foreground": "215 20.2% 65.1%",
+            accent: "217.2 32.6% 17.5%",
+            "accent-foreground": "210 40% 98%",
+            destructive: "0 62.8% 30.6%",
+            "destructive-foreground": "210 40% 98%",
+            border: "217.2 32.6% 17.5%",
+            input: "217.2 32.6% 17.5%",
+            ring: "212.7 26.8% 83.9",
+            "chart-1": "220 70% 50%",
+            "chart-2": "160 60% 45%",
+            "chart-3": "30 80% 55%",
+            "chart-4": "280 65% 60%",
+            "chart-5": "340 75% 55%",
          },
       },
    },
    {
-      name: 'stone',
-      label: 'Stone',
+      name: "stone",
+      label: "Stone",
       activeColor: {
-         light: '25 5.3% 44.7%',
-         dark: '33.3 5.5% 32.4%',
+         light: "25 5.3% 44.7%",
+         dark: "33.3 5.5% 32.4%",
       },
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '20 14.3% 4.1%',
-            'card': '0 0% 100%',
-            'card-foreground': '20 14.3% 4.1%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '20 14.3% 4.1%',
-            'primary': '24 9.8% 10%',
-            'primary-foreground': '60 9.1% 97.8%',
-            'secondary': '60 4.8% 95.9%',
-            'secondary-foreground': '24 9.8% 10%',
-            'muted': '60 4.8% 95.9%',
-            'muted-foreground': '25 5.3% 44.7%',
-            'accent': '60 4.8% 95.9%',
-            'accent-foreground': '24 9.8% 10%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '60 9.1% 97.8%',
-            'border': '20 5.9% 90%',
-            'input': '20 5.9% 90%',
-            'ring': '20 14.3% 4.1%',
-            'radius': '0.95rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
+            background: "0 0% 100%",
+            foreground: "20 14.3% 4.1%",
+            card: "0 0% 100%",
+            "card-foreground": "20 14.3% 4.1%",
+            popover: "0 0% 100%",
+            "popover-foreground": "20 14.3% 4.1%",
+            primary: "24 9.8% 10%",
+            "primary-foreground": "60 9.1% 97.8%",
+            secondary: "60 4.8% 95.9%",
+            "secondary-foreground": "24 9.8% 10%",
+            muted: "60 4.8% 95.9%",
+            "muted-foreground": "25 5.3% 44.7%",
+            accent: "60 4.8% 95.9%",
+            "accent-foreground": "24 9.8% 10%",
+            destructive: "0 84.2% 60.2%",
+            "destructive-foreground": "60 9.1% 97.8%",
+            border: "20 5.9% 90%",
+            input: "20 5.9% 90%",
+            ring: "20 14.3% 4.1%",
+            radius: "0.95rem",
+            "chart-1": "12 76% 61%",
+            "chart-2": "173 58% 39%",
+            "chart-3": "197 37% 24%",
+            "chart-4": "43 74% 66%",
+            "chart-5": "27 87% 67%",
          },
          dark: {
-            'background': '20 14.3% 4.1%',
-            'foreground': '60 9.1% 97.8%',
-            'card': '20 14.3% 4.1%',
-            'card-foreground': '60 9.1% 97.8%',
-            'popover': '20 14.3% 4.1%',
-            'popover-foreground': '60 9.1% 97.8%',
-            'primary': '60 9.1% 97.8%',
-            'primary-foreground': '24 9.8% 10%',
-            'secondary': '12 6.5% 15.1%',
-            'secondary-foreground': '60 9.1% 97.8%',
-            'muted': '12 6.5% 15.1%',
-            'muted-foreground': '24 5.4% 63.9%',
-            'accent': '12 6.5% 15.1%',
-            'accent-foreground': '60 9.1% 97.8%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '60 9.1% 97.8%',
-            'border': '12 6.5% 15.1%',
-            'input': '12 6.5% 15.1%',
-            'ring': '24 5.7% 82.9%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
+            background: "20 14.3% 4.1%",
+            foreground: "60 9.1% 97.8%",
+            card: "20 14.3% 4.1%",
+            "card-foreground": "60 9.1% 97.8%",
+            popover: "20 14.3% 4.1%",
+            "popover-foreground": "60 9.1% 97.8%",
+            primary: "60 9.1% 97.8%",
+            "primary-foreground": "24 9.8% 10%",
+            secondary: "12 6.5% 15.1%",
+            "secondary-foreground": "60 9.1% 97.8%",
+            muted: "12 6.5% 15.1%",
+            "muted-foreground": "24 5.4% 63.9%",
+            accent: "12 6.5% 15.1%",
+            "accent-foreground": "60 9.1% 97.8%",
+            destructive: "0 62.8% 30.6%",
+            "destructive-foreground": "60 9.1% 97.8%",
+            border: "12 6.5% 15.1%",
+            input: "12 6.5% 15.1%",
+            ring: "24 5.7% 82.9%",
+            "chart-1": "220 70% 50%",
+            "chart-2": "160 60% 45%",
+            "chart-3": "30 80% 55%",
+            "chart-4": "280 65% 60%",
+            "chart-5": "340 75% 55%",
          },
       },
    },
    {
-      name: 'gray',
-      label: 'Gray',
+      name: "gray",
+      label: "Gray",
       activeColor: {
-         light: '220 8.9% 46.1%',
-         dark: '215 13.8% 34.1%',
+         light: "220 8.9% 46.1%",
+         dark: "215 13.8% 34.1%",
       },
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '224 71.4% 4.1%',
-            'card': '0 0% 100%',
-            'card-foreground': '224 71.4% 4.1%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '224 71.4% 4.1%',
-            'primary': '220.9 39.3% 11%',
-            'primary-foreground': '210 20% 98%',
-            'secondary': '220 14.3% 95.9%',
-            'secondary-foreground': '220.9 39.3% 11%',
-            'muted': '220 14.3% 95.9%',
-            'muted-foreground': '220 8.9% 46.1%',
-            'accent': '220 14.3% 95.9%',
-            'accent-foreground': '220.9 39.3% 11%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '210 20% 98%',
-            'border': '220 13% 91%',
-            'input': '220 13% 91%',
-            'ring': '224 71.4% 4.1%',
-            'radius': '0.35rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
+            background: "0 0% 100%",
+            foreground: "224 71.4% 4.1%",
+            card: "0 0% 100%",
+            "card-foreground": "224 71.4% 4.1%",
+            popover: "0 0% 100%",
+            "popover-foreground": "224 71.4% 4.1%",
+            primary: "220.9 39.3% 11%",
+            "primary-foreground": "210 20% 98%",
+            secondary: "220 14.3% 95.9%",
+            "secondary-foreground": "220.9 39.3% 11%",
+            muted: "220 14.3% 95.9%",
+            "muted-foreground": "220 8.9% 46.1%",
+            accent: "220 14.3% 95.9%",
+            "accent-foreground": "220.9 39.3% 11%",
+            destructive: "0 84.2% 60.2%",
+            "destructive-foreground": "210 20% 98%",
+            border: "220 13% 91%",
+            input: "220 13% 91%",
+            ring: "224 71.4% 4.1%",
+            radius: "0.35rem",
+            "chart-1": "12 76% 61%",
+            "chart-2": "173 58% 39%",
+            "chart-3": "197 37% 24%",
+            "chart-4": "43 74% 66%",
+            "chart-5": "27 87% 67%",
          },
          dark: {
-            'background': '224 71.4% 4.1%',
-            'foreground': '210 20% 98%',
-            'card': '224 71.4% 4.1%',
-            'card-foreground': '210 20% 98%',
-            'popover': '224 71.4% 4.1%',
-            'popover-foreground': '210 20% 98%',
-            'primary': '210 20% 98%',
-            'primary-foreground': '220.9 39.3% 11%',
-            'secondary': '215 27.9% 16.9%',
-            'secondary-foreground': '210 20% 98%',
-            'muted': '215 27.9% 16.9%',
-            'muted-foreground': '217.9 10.6% 64.9%',
-            'accent': '215 27.9% 16.9%',
-            'accent-foreground': '210 20% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '210 20% 98%',
-            'border': '215 27.9% 16.9%',
-            'input': '215 27.9% 16.9%',
-            'ring': '216 12.2% 83.9%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
+            background: "224 71.4% 4.1%",
+            foreground: "210 20% 98%",
+            card: "224 71.4% 4.1%",
+            "card-foreground": "210 20% 98%",
+            popover: "224 71.4% 4.1%",
+            "popover-foreground": "210 20% 98%",
+            primary: "210 20% 98%",
+            "primary-foreground": "220.9 39.3% 11%",
+            secondary: "215 27.9% 16.9%",
+            "secondary-foreground": "210 20% 98%",
+            muted: "215 27.9% 16.9%",
+            "muted-foreground": "217.9 10.6% 64.9%",
+            accent: "215 27.9% 16.9%",
+            "accent-foreground": "210 20% 98%",
+            destructive: "0 62.8% 30.6%",
+            "destructive-foreground": "210 20% 98%",
+            border: "215 27.9% 16.9%",
+            input: "215 27.9% 16.9%",
+            ring: "216 12.2% 83.9%",
+            "chart-1": "220 70% 50%",
+            "chart-2": "160 60% 45%",
+            "chart-3": "30 80% 55%",
+            "chart-4": "280 65% 60%",
+            "chart-5": "340 75% 55%",
          },
       },
    },
    {
-      name: 'neutral',
-      label: 'Neutral',
+      name: "neutral",
+      label: "Neutral",
       activeColor: {
-         light: '0 0% 45.1%',
-         dark: '0 0% 32.2%',
+         light: "0 0% 45.1%",
+         dark: "0 0% 32.2%",
       },
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '0 0% 3.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '0 0% 3.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '0 0% 3.9%',
-            'primary': '0 0% 9%',
-            'primary-foreground': '0 0% 98%',
-            'secondary': '0 0% 96.1%',
-            'secondary-foreground': '0 0% 9%',
-            'muted': '0 0% 96.1%',
-            'muted-foreground': '0 0% 45.1%',
-            'accent': '0 0% 96.1%',
-            'accent-foreground': '0 0% 9%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '0 0% 89.8%',
-            'input': '0 0% 89.8%',
-            'ring': '0 0% 3.9%',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
+            background: "0 0% 100%",
+            foreground: "0 0% 3.9%",
+            card: "0 0% 100%",
+            "card-foreground": "0 0% 3.9%",
+            popover: "0 0% 100%",
+            "popover-foreground": "0 0% 3.9%",
+            primary: "0 0% 9%",
+            "primary-foreground": "0 0% 98%",
+            secondary: "0 0% 96.1%",
+            "secondary-foreground": "0 0% 9%",
+            muted: "0 0% 96.1%",
+            "muted-foreground": "0 0% 45.1%",
+            accent: "0 0% 96.1%",
+            "accent-foreground": "0 0% 9%",
+            destructive: "0 84.2% 60.2%",
+            "destructive-foreground": "0 0% 98%",
+            border: "0 0% 89.8%",
+            input: "0 0% 89.8%",
+            ring: "0 0% 3.9%",
+            "chart-1": "12 76% 61%",
+            "chart-2": "173 58% 39%",
+            "chart-3": "197 37% 24%",
+            "chart-4": "43 74% 66%",
+            "chart-5": "27 87% 67%",
          },
          dark: {
-            'background': '0 0% 3.9%',
-            'foreground': '0 0% 98%',
-            'card': '0 0% 3.9%',
-            'card-foreground': '0 0% 98%',
-            'popover': '0 0% 3.9%',
-            'popover-foreground': '0 0% 98%',
-            'primary': '0 0% 98%',
-            'primary-foreground': '0 0% 9%',
-            'secondary': '0 0% 14.9%',
-            'secondary-foreground': '0 0% 98%',
-            'muted': '0 0% 14.9%',
-            'muted-foreground': '0 0% 63.9%',
-            'accent': '0 0% 14.9%',
-            'accent-foreground': '0 0% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '0 0% 14.9%',
-            'input': '0 0% 14.9%',
-            'ring': '0 0% 83.1%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
+            background: "0 0% 3.9%",
+            foreground: "0 0% 98%",
+            card: "0 0% 3.9%",
+            "card-foreground": "0 0% 98%",
+            popover: "0 0% 3.9%",
+            "popover-foreground": "0 0% 98%",
+            primary: "0 0% 98%",
+            "primary-foreground": "0 0% 9%",
+            secondary: "0 0% 14.9%",
+            "secondary-foreground": "0 0% 98%",
+            muted: "0 0% 14.9%",
+            "muted-foreground": "0 0% 63.9%",
+            accent: "0 0% 14.9%",
+            "accent-foreground": "0 0% 98%",
+            destructive: "0 62.8% 30.6%",
+            "destructive-foreground": "0 0% 98%",
+            border: "0 0% 14.9%",
+            input: "0 0% 14.9%",
+            ring: "0 0% 83.1%",
+            "chart-1": "220 70% 50%",
+            "chart-2": "160 60% 45%",
+            "chart-3": "30 80% 55%",
+            "chart-4": "280 65% 60%",
+            "chart-5": "340 75% 55%",
          },
       },
    },
    {
-      name: 'red',
-      label: 'Red',
+      name: "red",
+      label: "Red",
       activeColor: {
-         light: '0 72.2% 50.6%',
-         dark: '0 72.2% 50.6%',
+         light: "0 72.2% 50.6%",
+         dark: "0 72.2% 50.6%",
       },
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '0 0% 3.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '0 0% 3.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '0 0% 3.9%',
-            'primary': '0 72.2% 50.6%',
-            'primary-foreground': '0 85.7% 97.3%',
-            'secondary': '0 0% 96.1%',
-            'secondary-foreground': '0 0% 9%',
-            'muted': '0 0% 96.1%',
-            'muted-foreground': '0 0% 45.1%',
-            'accent': '0 0% 96.1%',
-            'accent-foreground': '0 0% 9%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '0 0% 89.8%',
-            'input': '0 0% 89.8%',
-            'ring': '0 72.2% 50.6%',
-            'radius': '0.4rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
+            background: "0 0% 100%",
+            foreground: "0 0% 3.9%",
+            card: "0 0% 100%",
+            "card-foreground": "0 0% 3.9%",
+            popover: "0 0% 100%",
+            "popover-foreground": "0 0% 3.9%",
+            primary: "0 72.2% 50.6%",
+            "primary-foreground": "0 85.7% 97.3%",
+            secondary: "0 0% 96.1%",
+            "secondary-foreground": "0 0% 9%",
+            muted: "0 0% 96.1%",
+            "muted-foreground": "0 0% 45.1%",
+            accent: "0 0% 96.1%",
+            "accent-foreground": "0 0% 9%",
+            destructive: "0 84.2% 60.2%",
+            "destructive-foreground": "0 0% 98%",
+            border: "0 0% 89.8%",
+            input: "0 0% 89.8%",
+            ring: "0 72.2% 50.6%",
+            radius: "0.4rem",
+            "chart-1": "12 76% 61%",
+            "chart-2": "173 58% 39%",
+            "chart-3": "197 37% 24%",
+            "chart-4": "43 74% 66%",
+            "chart-5": "27 87% 67%",
          },
          dark: {
-            'background': '0 0% 3.9%',
-            'foreground': '0 0% 98%',
-            'card': '0 0% 3.9%',
-            'card-foreground': '0 0% 98%',
-            'popover': '0 0% 3.9%',
-            'popover-foreground': '0 0% 98%',
-            'primary': '0 72.2% 50.6%',
-            'primary-foreground': '0 85.7% 97.3%',
-            'secondary': '0 0% 14.9%',
-            'secondary-foreground': '0 0% 98%',
-            'muted': '0 0% 14.9%',
-            'muted-foreground': '0 0% 63.9%',
-            'accent': '0 0% 14.9%',
-            'accent-foreground': '0 0% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '0 0% 14.9%',
-            'input': '0 0% 14.9%',
-            'ring': '0 72.2% 50.6%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
+            background: "0 0% 3.9%",
+            foreground: "0 0% 98%",
+            card: "0 0% 3.9%",
+            "card-foreground": "0 0% 98%",
+            popover: "0 0% 3.9%",
+            "popover-foreground": "0 0% 98%",
+            primary: "0 72.2% 50.6%",
+            "primary-foreground": "0 85.7% 97.3%",
+            secondary: "0 0% 14.9%",
+            "secondary-foreground": "0 0% 98%",
+            muted: "0 0% 14.9%",
+            "muted-foreground": "0 0% 63.9%",
+            accent: "0 0% 14.9%",
+            "accent-foreground": "0 0% 98%",
+            destructive: "0 62.8% 30.6%",
+            "destructive-foreground": "0 0% 98%",
+            border: "0 0% 14.9%",
+            input: "0 0% 14.9%",
+            ring: "0 72.2% 50.6%",
+            "chart-1": "220 70% 50%",
+            "chart-2": "160 60% 45%",
+            "chart-3": "30 80% 55%",
+            "chart-4": "280 65% 60%",
+            "chart-5": "340 75% 55%",
          },
       },
    },
    {
-      name: 'rose',
-      label: 'Rose',
+      name: "rose",
+      label: "Rose",
       activeColor: {
-         light: '346.8 77.2% 49.8%',
-         dark: '346.8 77.2% 49.8%',
+         light: "346.8 77.2% 49.8%",
+         dark: "346.8 77.2% 49.8%",
       },
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '240 10% 3.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '240 10% 3.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '240 10% 3.9%',
-            'primary': '346.8 77.2% 49.8%',
-            'primary-foreground': '355.7 100% 97.3%',
-            'secondary': '240 4.8% 95.9%',
-            'secondary-foreground': '240 5.9% 10%',
-            'muted': '240 4.8% 95.9%',
-            'muted-foreground': '240 3.8% 46.1%',
-            'accent': '240 4.8% 95.9%',
-            'accent-foreground': '240 5.9% 10%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '240 5.9% 90%',
-            'input': '240 5.9% 90%',
-            'ring': '346.8 77.2% 49.8%',
-            'radius': '0.5rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
+            background: "0 0% 100%",
+            foreground: "240 10% 3.9%",
+            card: "0 0% 100%",
+            "card-foreground": "240 10% 3.9%",
+            popover: "0 0% 100%",
+            "popover-foreground": "240 10% 3.9%",
+            primary: "346.8 77.2% 49.8%",
+            "primary-foreground": "355.7 100% 97.3%",
+            secondary: "240 4.8% 95.9%",
+            "secondary-foreground": "240 5.9% 10%",
+            muted: "240 4.8% 95.9%",
+            "muted-foreground": "240 3.8% 46.1%",
+            accent: "240 4.8% 95.9%",
+            "accent-foreground": "240 5.9% 10%",
+            destructive: "0 84.2% 60.2%",
+            "destructive-foreground": "0 0% 98%",
+            border: "240 5.9% 90%",
+            input: "240 5.9% 90%",
+            ring: "346.8 77.2% 49.8%",
+            radius: "0.5rem",
+            "chart-1": "12 76% 61%",
+            "chart-2": "173 58% 39%",
+            "chart-3": "197 37% 24%",
+            "chart-4": "43 74% 66%",
+            "chart-5": "27 87% 67%",
          },
          dark: {
-            'background': '20 14.3% 4.1%',
-            'foreground': '0 0% 95%',
-            'popover': '0 0% 9%',
-            'popover-foreground': '0 0% 95%',
-            'card': '24 9.8% 10%',
-            'card-foreground': '0 0% 95%',
-            'primary': '346.8 77.2% 49.8%',
-            'primary-foreground': '355.7 100% 97.3%',
-            'secondary': '240 3.7% 15.9%',
-            'secondary-foreground': '0 0% 98%',
-            'muted': '0 0% 15%',
-            'muted-foreground': '240 5% 64.9%',
-            'accent': '12 6.5% 15.1%',
-            'accent-foreground': '0 0% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '0 85.7% 97.3%',
-            'border': '240 3.7% 15.9%',
-            'input': '240 3.7% 15.9%',
-            'ring': '346.8 77.2% 49.8%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
+            background: "20 14.3% 4.1%",
+            foreground: "0 0% 95%",
+            popover: "0 0% 9%",
+            "popover-foreground": "0 0% 95%",
+            card: "24 9.8% 10%",
+            "card-foreground": "0 0% 95%",
+            primary: "346.8 77.2% 49.8%",
+            "primary-foreground": "355.7 100% 97.3%",
+            secondary: "240 3.7% 15.9%",
+            "secondary-foreground": "0 0% 98%",
+            muted: "0 0% 15%",
+            "muted-foreground": "240 5% 64.9%",
+            accent: "12 6.5% 15.1%",
+            "accent-foreground": "0 0% 98%",
+            destructive: "0 62.8% 30.6%",
+            "destructive-foreground": "0 85.7% 97.3%",
+            border: "240 3.7% 15.9%",
+            input: "240 3.7% 15.9%",
+            ring: "346.8 77.2% 49.8%",
+            "chart-1": "220 70% 50%",
+            "chart-2": "160 60% 45%",
+            "chart-3": "30 80% 55%",
+            "chart-4": "280 65% 60%",
+            "chart-5": "340 75% 55%",
          },
       },
    },
    {
-      name: 'orange',
-      label: 'Orange',
+      name: "orange",
+      label: "Orange",
       activeColor: {
-         light: '24.6 95% 53.1%',
-         dark: '20.5 90.2% 48.2%',
+         light: "24.6 95% 53.1%",
+         dark: "20.5 90.2% 48.2%",
       },
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '20 14.3% 4.1%',
-            'card': '0 0% 100%',
-            'card-foreground': '20 14.3% 4.1%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '20 14.3% 4.1%',
-            'primary': '24.6 95% 53.1%',
-            'primary-foreground': '60 9.1% 97.8%',
-            'secondary': '60 4.8% 95.9%',
-            'secondary-foreground': '24 9.8% 10%',
-            'muted': '60 4.8% 95.9%',
-            'muted-foreground': '25 5.3% 44.7%',
-            'accent': '60 4.8% 95.9%',
-            'accent-foreground': '24 9.8% 10%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '60 9.1% 97.8%',
-            'border': '20 5.9% 90%',
-            'input': '20 5.9% 90%',
-            'ring': '24.6 95% 53.1%',
-            'radius': '0.95rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
+            background: "0 0% 100%",
+            foreground: "20 14.3% 4.1%",
+            card: "0 0% 100%",
+            "card-foreground": "20 14.3% 4.1%",
+            popover: "0 0% 100%",
+            "popover-foreground": "20 14.3% 4.1%",
+            primary: "24.6 95% 53.1%",
+            "primary-foreground": "60 9.1% 97.8%",
+            secondary: "60 4.8% 95.9%",
+            "secondary-foreground": "24 9.8% 10%",
+            muted: "60 4.8% 95.9%",
+            "muted-foreground": "25 5.3% 44.7%",
+            accent: "60 4.8% 95.9%",
+            "accent-foreground": "24 9.8% 10%",
+            destructive: "0 84.2% 60.2%",
+            "destructive-foreground": "60 9.1% 97.8%",
+            border: "20 5.9% 90%",
+            input: "20 5.9% 90%",
+            ring: "24.6 95% 53.1%",
+            radius: "0.95rem",
+            "chart-1": "12 76% 61%",
+            "chart-2": "173 58% 39%",
+            "chart-3": "197 37% 24%",
+            "chart-4": "43 74% 66%",
+            "chart-5": "27 87% 67%",
          },
          dark: {
-            'background': '20 14.3% 4.1%',
-            'foreground': '60 9.1% 97.8%',
-            'card': '20 14.3% 4.1%',
-            'card-foreground': '60 9.1% 97.8%',
-            'popover': '20 14.3% 4.1%',
-            'popover-foreground': '60 9.1% 97.8%',
-            'primary': '20.5 90.2% 48.2%',
-            'primary-foreground': '60 9.1% 97.8%',
-            'secondary': '12 6.5% 15.1%',
-            'secondary-foreground': '60 9.1% 97.8%',
-            'muted': '12 6.5% 15.1%',
-            'muted-foreground': '24 5.4% 63.9%',
-            'accent': '12 6.5% 15.1%',
-            'accent-foreground': '60 9.1% 97.8%',
-            'destructive': '0 72.2% 50.6%',
-            'destructive-foreground': '60 9.1% 97.8%',
-            'border': '12 6.5% 15.1%',
-            'input': '12 6.5% 15.1%',
-            'ring': '20.5 90.2% 48.2%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
+            background: "20 14.3% 4.1%",
+            foreground: "60 9.1% 97.8%",
+            card: "20 14.3% 4.1%",
+            "card-foreground": "60 9.1% 97.8%",
+            popover: "20 14.3% 4.1%",
+            "popover-foreground": "60 9.1% 97.8%",
+            primary: "20.5 90.2% 48.2%",
+            "primary-foreground": "60 9.1% 97.8%",
+            secondary: "12 6.5% 15.1%",
+            "secondary-foreground": "60 9.1% 97.8%",
+            muted: "12 6.5% 15.1%",
+            "muted-foreground": "24 5.4% 63.9%",
+            accent: "12 6.5% 15.1%",
+            "accent-foreground": "60 9.1% 97.8%",
+            destructive: "0 72.2% 50.6%",
+            "destructive-foreground": "60 9.1% 97.8%",
+            border: "12 6.5% 15.1%",
+            input: "12 6.5% 15.1%",
+            ring: "20.5 90.2% 48.2%",
+            "chart-1": "220 70% 50%",
+            "chart-2": "160 60% 45%",
+            "chart-3": "30 80% 55%",
+            "chart-4": "280 65% 60%",
+            "chart-5": "340 75% 55%",
          },
       },
    },
    {
-      name: 'green',
-      label: 'Green',
+      name: "green",
+      label: "Green",
       activeColor: {
-         light: '142.1 76.2% 36.3%',
-         dark: '142.1 70.6% 45.3%',
+         light: "142.1 76.2% 36.3%",
+         dark: "142.1 70.6% 45.3%",
       },
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '240 10% 3.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '240 10% 3.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '240 10% 3.9%',
-            'primary': '142.1 76.2% 36.3%',
-            'primary-foreground': '355.7 100% 97.3%',
-            'secondary': '240 4.8% 95.9%',
-            'secondary-foreground': '240 5.9% 10%',
-            'muted': '240 4.8% 95.9%',
-            'muted-foreground': '240 3.8% 46.1%',
-            'accent': '240 4.8% 95.9%',
-            'accent-foreground': '240 5.9% 10%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '240 5.9% 90%',
-            'input': '240 5.9% 90%',
-            'ring': '142.1 76.2% 36.3%',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
+            background: "0 0% 100%",
+            foreground: "240 10% 3.9%",
+            card: "0 0% 100%",
+            "card-foreground": "240 10% 3.9%",
+            popover: "0 0% 100%",
+            "popover-foreground": "240 10% 3.9%",
+            primary: "142.1 76.2% 36.3%",
+            "primary-foreground": "355.7 100% 97.3%",
+            secondary: "240 4.8% 95.9%",
+            "secondary-foreground": "240 5.9% 10%",
+            muted: "240 4.8% 95.9%",
+            "muted-foreground": "240 3.8% 46.1%",
+            accent: "240 4.8% 95.9%",
+            "accent-foreground": "240 5.9% 10%",
+            destructive: "0 84.2% 60.2%",
+            "destructive-foreground": "0 0% 98%",
+            border: "240 5.9% 90%",
+            input: "240 5.9% 90%",
+            ring: "142.1 76.2% 36.3%",
+            "chart-1": "12 76% 61%",
+            "chart-2": "173 58% 39%",
+            "chart-3": "197 37% 24%",
+            "chart-4": "43 74% 66%",
+            "chart-5": "27 87% 67%",
          },
          dark: {
-            'background': '20 14.3% 4.1%',
-            'foreground': '0 0% 95%',
-            'popover': '0 0% 9%',
-            'popover-foreground': '0 0% 95%',
-            'card': '24 9.8% 10%',
-            'card-foreground': '0 0% 95%',
-            'primary': '142.1 70.6% 45.3%',
-            'primary-foreground': '144.9 80.4% 10%',
-            'secondary': '240 3.7% 15.9%',
-            'secondary-foreground': '0 0% 98%',
-            'muted': '0 0% 15%',
-            'muted-foreground': '240 5% 64.9%',
-            'accent': '12 6.5% 15.1%',
-            'accent-foreground': '0 0% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '0 85.7% 97.3%',
-            'border': '240 3.7% 15.9%',
-            'input': '240 3.7% 15.9%',
-            'ring': '142.4 71.8% 29.2%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
+            background: "20 14.3% 4.1%",
+            foreground: "0 0% 95%",
+            popover: "0 0% 9%",
+            "popover-foreground": "0 0% 95%",
+            card: "24 9.8% 10%",
+            "card-foreground": "0 0% 95%",
+            primary: "142.1 70.6% 45.3%",
+            "primary-foreground": "144.9 80.4% 10%",
+            secondary: "240 3.7% 15.9%",
+            "secondary-foreground": "0 0% 98%",
+            muted: "0 0% 15%",
+            "muted-foreground": "240 5% 64.9%",
+            accent: "12 6.5% 15.1%",
+            "accent-foreground": "0 0% 98%",
+            destructive: "0 62.8% 30.6%",
+            "destructive-foreground": "0 85.7% 97.3%",
+            border: "240 3.7% 15.9%",
+            input: "240 3.7% 15.9%",
+            ring: "142.4 71.8% 29.2%",
+            "chart-1": "220 70% 50%",
+            "chart-2": "160 60% 45%",
+            "chart-3": "30 80% 55%",
+            "chart-4": "280 65% 60%",
+            "chart-5": "340 75% 55%",
          },
       },
    },
    {
-      name: 'blue',
-      label: 'Blue',
+      name: "blue",
+      label: "Blue",
       activeColor: {
-         light: '221.2 83.2% 53.3%',
-         dark: '217.2 91.2% 59.8%',
+         light: "221.2 83.2% 53.3%",
+         dark: "217.2 91.2% 59.8%",
       },
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '222.2 84% 4.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '222.2 84% 4.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '222.2 84% 4.9%',
-            'primary': '221.2 83.2% 53.3%',
-            'primary-foreground': '210 40% 98%',
-            'secondary': '210 40% 96.1%',
-            'secondary-foreground': '222.2 47.4% 11.2%',
-            'muted': '210 40% 96.1%',
-            'muted-foreground': '215.4 16.3% 46.9%',
-            'accent': '210 40% 96.1%',
-            'accent-foreground': '222.2 47.4% 11.2%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '210 40% 98%',
-            'border': '214.3 31.8% 91.4%',
-            'input': '214.3 31.8% 91.4%',
-            'ring': '221.2 83.2% 53.3%',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
+            background: "0 0% 100%",
+            foreground: "222.2 84% 4.9%",
+            card: "0 0% 100%",
+            "card-foreground": "222.2 84% 4.9%",
+            popover: "0 0% 100%",
+            "popover-foreground": "222.2 84% 4.9%",
+            primary: "221.2 83.2% 53.3%",
+            "primary-foreground": "210 40% 98%",
+            secondary: "210 40% 96.1%",
+            "secondary-foreground": "222.2 47.4% 11.2%",
+            muted: "210 40% 96.1%",
+            "muted-foreground": "215.4 16.3% 46.9%",
+            accent: "210 40% 96.1%",
+            "accent-foreground": "222.2 47.4% 11.2%",
+            destructive: "0 84.2% 60.2%",
+            "destructive-foreground": "210 40% 98%",
+            border: "214.3 31.8% 91.4%",
+            input: "214.3 31.8% 91.4%",
+            ring: "221.2 83.2% 53.3%",
+            "chart-1": "12 76% 61%",
+            "chart-2": "173 58% 39%",
+            "chart-3": "197 37% 24%",
+            "chart-4": "43 74% 66%",
+            "chart-5": "27 87% 67%",
          },
          dark: {
-            'background': '222.2 84% 4.9%',
-            'foreground': '210 40% 98%',
-            'card': '222.2 84% 4.9%',
-            'card-foreground': '210 40% 98%',
-            'popover': '222.2 84% 4.9%',
-            'popover-foreground': '210 40% 98%',
-            'primary': '217.2 91.2% 59.8%',
-            'primary-foreground': '222.2 47.4% 11.2%',
-            'secondary': '217.2 32.6% 17.5%',
-            'secondary-foreground': '210 40% 98%',
-            'muted': '217.2 32.6% 17.5%',
-            'muted-foreground': '215 20.2% 65.1%',
-            'accent': '217.2 32.6% 17.5%',
-            'accent-foreground': '210 40% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '210 40% 98%',
-            'border': '217.2 32.6% 17.5%',
-            'input': '217.2 32.6% 17.5%',
-            'ring': '224.3 76.3% 48%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
+            background: "222.2 84% 4.9%",
+            foreground: "210 40% 98%",
+            card: "222.2 84% 4.9%",
+            "card-foreground": "210 40% 98%",
+            popover: "222.2 84% 4.9%",
+            "popover-foreground": "210 40% 98%",
+            primary: "217.2 91.2% 59.8%",
+            "primary-foreground": "222.2 47.4% 11.2%",
+            secondary: "217.2 32.6% 17.5%",
+            "secondary-foreground": "210 40% 98%",
+            muted: "217.2 32.6% 17.5%",
+            "muted-foreground": "215 20.2% 65.1%",
+            accent: "217.2 32.6% 17.5%",
+            "accent-foreground": "210 40% 98%",
+            destructive: "0 62.8% 30.6%",
+            "destructive-foreground": "210 40% 98%",
+            border: "217.2 32.6% 17.5%",
+            input: "217.2 32.6% 17.5%",
+            ring: "224.3 76.3% 48%",
+            "chart-1": "220 70% 50%",
+            "chart-2": "160 60% 45%",
+            "chart-3": "30 80% 55%",
+            "chart-4": "280 65% 60%",
+            "chart-5": "340 75% 55%",
          },
       },
    },
    {
-      name: 'yellow',
-      label: 'Yellow',
+      name: "yellow",
+      label: "Yellow",
       activeColor: {
-         light: '47.9 95.8% 53.1%',
-         dark: '47.9 95.8% 53.1%',
+         light: "47.9 95.8% 53.1%",
+         dark: "47.9 95.8% 53.1%",
       },
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '20 14.3% 4.1%',
-            'card': '0 0% 100%',
-            'card-foreground': '20 14.3% 4.1%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '20 14.3% 4.1%',
-            'primary': '47.9 95.8% 53.1%',
-            'primary-foreground': '26 83.3% 14.1%',
-            'secondary': '60 4.8% 95.9%',
-            'secondary-foreground': '24 9.8% 10%',
-            'muted': '60 4.8% 95.9%',
-            'muted-foreground': '25 5.3% 44.7%',
-            'accent': '60 4.8% 95.9%',
-            'accent-foreground': '24 9.8% 10%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '60 9.1% 97.8%',
-            'border': '20 5.9% 90%',
-            'input': '20 5.9% 90%',
-            'ring': '20 14.3% 4.1%',
-            'radius': '0.95rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
+            background: "0 0% 100%",
+            foreground: "20 14.3% 4.1%",
+            card: "0 0% 100%",
+            "card-foreground": "20 14.3% 4.1%",
+            popover: "0 0% 100%",
+            "popover-foreground": "20 14.3% 4.1%",
+            primary: "47.9 95.8% 53.1%",
+            "primary-foreground": "26 83.3% 14.1%",
+            secondary: "60 4.8% 95.9%",
+            "secondary-foreground": "24 9.8% 10%",
+            muted: "60 4.8% 95.9%",
+            "muted-foreground": "25 5.3% 44.7%",
+            accent: "60 4.8% 95.9%",
+            "accent-foreground": "24 9.8% 10%",
+            destructive: "0 84.2% 60.2%",
+            "destructive-foreground": "60 9.1% 97.8%",
+            border: "20 5.9% 90%",
+            input: "20 5.9% 90%",
+            ring: "20 14.3% 4.1%",
+            radius: "0.95rem",
+            "chart-1": "12 76% 61%",
+            "chart-2": "173 58% 39%",
+            "chart-3": "197 37% 24%",
+            "chart-4": "43 74% 66%",
+            "chart-5": "27 87% 67%",
          },
          dark: {
-            'background': '20 14.3% 4.1%',
-            'foreground': '60 9.1% 97.8%',
-            'card': '20 14.3% 4.1%',
-            'card-foreground': '60 9.1% 97.8%',
-            'popover': '20 14.3% 4.1%',
-            'popover-foreground': '60 9.1% 97.8%',
-            'primary': '47.9 95.8% 53.1%',
-            'primary-foreground': '26 83.3% 14.1%',
-            'secondary': '12 6.5% 15.1%',
-            'secondary-foreground': '60 9.1% 97.8%',
-            'muted': '12 6.5% 15.1%',
-            'muted-foreground': '24 5.4% 63.9%',
-            'accent': '12 6.5% 15.1%',
-            'accent-foreground': '60 9.1% 97.8%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '60 9.1% 97.8%',
-            'border': '12 6.5% 15.1%',
-            'input': '12 6.5% 15.1%',
-            'ring': '35.5 91.7% 32.9%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
+            background: "20 14.3% 4.1%",
+            foreground: "60 9.1% 97.8%",
+            card: "20 14.3% 4.1%",
+            "card-foreground": "60 9.1% 97.8%",
+            popover: "20 14.3% 4.1%",
+            "popover-foreground": "60 9.1% 97.8%",
+            primary: "47.9 95.8% 53.1%",
+            "primary-foreground": "26 83.3% 14.1%",
+            secondary: "12 6.5% 15.1%",
+            "secondary-foreground": "60 9.1% 97.8%",
+            muted: "12 6.5% 15.1%",
+            "muted-foreground": "24 5.4% 63.9%",
+            accent: "12 6.5% 15.1%",
+            "accent-foreground": "60 9.1% 97.8%",
+            destructive: "0 62.8% 30.6%",
+            "destructive-foreground": "60 9.1% 97.8%",
+            border: "12 6.5% 15.1%",
+            input: "12 6.5% 15.1%",
+            ring: "35.5 91.7% 32.9%",
+            "chart-1": "220 70% 50%",
+            "chart-2": "160 60% 45%",
+            "chart-3": "30 80% 55%",
+            "chart-4": "280 65% 60%",
+            "chart-5": "340 75% 55%",
          },
       },
    },
    {
-      name: 'violet',
-      label: 'Violet',
+      name: "violet",
+      label: "Violet",
       activeColor: {
-         light: '262.1 83.3% 57.8%',
-         dark: '263.4 70% 50.4%',
+         light: "262.1 83.3% 57.8%",
+         dark: "263.4 70% 50.4%",
       },
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '224 71.4% 4.1%',
-            'card': '0 0% 100%',
-            'card-foreground': '224 71.4% 4.1%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '224 71.4% 4.1%',
-            'primary': '262.1 83.3% 57.8%',
-            'primary-foreground': '210 20% 98%',
-            'secondary': '220 14.3% 95.9%',
-            'secondary-foreground': '220.9 39.3% 11%',
-            'muted': '220 14.3% 95.9%',
-            'muted-foreground': '220 8.9% 46.1%',
-            'accent': '220 14.3% 95.9%',
-            'accent-foreground': '220.9 39.3% 11%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '210 20% 98%',
-            'border': '220 13% 91%',
-            'input': '220 13% 91%',
-            'ring': '262.1 83.3% 57.8%',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
+            background: "0 0% 100%",
+            foreground: "224 71.4% 4.1%",
+            card: "0 0% 100%",
+            "card-foreground": "224 71.4% 4.1%",
+            popover: "0 0% 100%",
+            "popover-foreground": "224 71.4% 4.1%",
+            primary: "262.1 83.3% 57.8%",
+            "primary-foreground": "210 20% 98%",
+            secondary: "220 14.3% 95.9%",
+            "secondary-foreground": "220.9 39.3% 11%",
+            muted: "220 14.3% 95.9%",
+            "muted-foreground": "220 8.9% 46.1%",
+            accent: "220 14.3% 95.9%",
+            "accent-foreground": "220.9 39.3% 11%",
+            destructive: "0 84.2% 60.2%",
+            "destructive-foreground": "210 20% 98%",
+            border: "220 13% 91%",
+            input: "220 13% 91%",
+            ring: "262.1 83.3% 57.8%",
+            "chart-1": "12 76% 61%",
+            "chart-2": "173 58% 39%",
+            "chart-3": "197 37% 24%",
+            "chart-4": "43 74% 66%",
+            "chart-5": "27 87% 67%",
          },
          dark: {
-            'background': '224 71.4% 4.1%',
-            'foreground': '210 20% 98%',
-            'card': '224 71.4% 4.1%',
-            'card-foreground': '210 20% 98%',
-            'popover': '224 71.4% 4.1%',
-            'popover-foreground': '210 20% 98%',
-            'primary': '263.4 70% 50.4%',
-            'primary-foreground': '210 20% 98%',
-            'secondary': '215 27.9% 16.9%',
-            'secondary-foreground': '210 20% 98%',
-            'muted': '215 27.9% 16.9%',
-            'muted-foreground': '217.9 10.6% 64.9%',
-            'accent': '215 27.9% 16.9%',
-            'accent-foreground': '210 20% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '210 20% 98%',
-            'border': '215 27.9% 16.9%',
-            'input': '215 27.9% 16.9%',
-            'ring': '263.4 70% 50.4%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
+            background: "224 71.4% 4.1%",
+            foreground: "210 20% 98%",
+            card: "224 71.4% 4.1%",
+            "card-foreground": "210 20% 98%",
+            popover: "224 71.4% 4.1%",
+            "popover-foreground": "210 20% 98%",
+            primary: "263.4 70% 50.4%",
+            "primary-foreground": "210 20% 98%",
+            secondary: "215 27.9% 16.9%",
+            "secondary-foreground": "210 20% 98%",
+            muted: "215 27.9% 16.9%",
+            "muted-foreground": "217.9 10.6% 64.9%",
+            accent: "215 27.9% 16.9%",
+            "accent-foreground": "210 20% 98%",
+            destructive: "0 62.8% 30.6%",
+            "destructive-foreground": "210 20% 98%",
+            border: "215 27.9% 16.9%",
+            input: "215 27.9% 16.9%",
+            ring: "263.4 70% 50.4%",
+            "chart-1": "220 70% 50%",
+            "chart-2": "160 60% 45%",
+            "chart-3": "30 80% 55%",
+            "chart-4": "280 65% 60%",
+            "chart-5": "340 75% 55%",
          },
       },
    },
diff --git a/apps/web/registry/registry-blocks.ts b/apps/web/registry/registry-blocks.ts
index 6fbe18b4..6230cb1a 100644
--- a/apps/web/registry/registry-blocks.ts
+++ b/apps/web/registry/registry-blocks.ts
@@ -1,819 +1,625 @@
-import type { Registry } from '~/registry/schema'
+import type { Registry } from "nyxb/registry"
 
-export const blocks: Registry = [
+export const blocks: Registry["items"] = [
    {
-      name: '_sink',
-      type: 'registry:block',
+      name: "sidebar-01",
+      type: "registry:block",
+      description: "A simple sidebar with navigation grouped by section.",
       registryDependencies: [
-      // registry:ui
-         'accordion',
-         'alert',
-         'alert-dialog',
-         'aspect-ratio',
-         'avatar',
-         'badge',
-         'breadcrumb',
-         'button',
-         'calendar',
-         'card',
-         'carousel',
-         'chart',
-         'checkbox',
-         'collapsible',
-         'command',
-         'context-menu',
-         'dialog',
-         'drawer',
-         'dropdown-menu',
-         // "form",
-         'hover-card',
-         'input',
-         'input-otp',
-         'label',
-         'menubar',
-         'navigation-menu',
-         'pagination',
-         'popover',
-         'progress',
-         'radio-group',
-         'resizable',
-         'scroll-area',
-         'select',
-         'separator',
-         'sheet',
-         'sidebar',
-         'skeleton',
-         'slider',
-         'sonner',
-         'switch',
-         'table',
-         'tabs',
-         'textarea',
-         'toast',
-         'toggle',
-         'toggle-group',
-         'tooltip',
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "label",
+         "dropdown-menu",
       ],
       files: [
          {
-            path: 'block/_sink/page.tsx',
-            type: 'registry:page',
-            target: 'app/sink/page.tsx',
+            path: "blocks/sidebar-01/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/_sink/components/app-sidebar.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-01/components/app-sidebar.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/component-wrapper.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-01/components/search-form.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/nav-main.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/nav-projects.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/nav-user.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/team-switcher.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/accordion-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/alert-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/alert-dialog-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/aspect-ratio-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/avatar-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/badge-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/breadcrumb-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/button-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/calendar-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/card-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/carousel-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/checkbox-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/collapsible-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/combobox-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/command-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/context-menu-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/date-picker-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/dialog-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/drawer-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/dropdown-menu-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/hover-card-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/input-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/input-otp-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/label-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/menubar-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/navigation-menu-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/pagination-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/popover-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/progress-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/radio-group-demo.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/resizable-handle.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/_sink/components/scroll-area-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-01/components/version-switcher.tsx",
+            type: "registry:component",
          },
+      ],
+      categories: ["sidebar", "dashboard"],
+   },
+   {
+      name: "sidebar-02",
+      description: "A sidebar with collapsible sections.",
+      type: "registry:block",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "label",
+         "dropdown-menu",
+      ],
+      files: [
          {
-            path: 'block/_sink/components/select-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-02/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/_sink/components/separator-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-02/components/app-sidebar.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/sheet-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-02/components/search-form.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/skeleton-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-02/components/version-switcher.tsx",
+            type: "registry:component",
          },
+      ],
+      categories: ["sidebar", "dashboard"],
+   },
+   {
+      name: "sidebar-03",
+      description: "A sidebar with submenus.",
+      type: "registry:block",
+      registryDependencies: ["sidebar", "breadcrumb"],
+      files: [
          {
-            path: 'block/_sink/components/slider-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-03/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/_sink/components/sonner-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-03/components/app-sidebar.tsx",
+            type: "registry:component",
          },
+      ],
+      categories: ["sidebar", "dashboard"],
+   },
+   {
+      name: "sidebar-04",
+      description: "A floating sidebar with submenus.",
+      type: "registry:block",
+      registryDependencies: ["sidebar", "breadcrumb", "separator"],
+      files: [
          {
-            path: 'block/_sink/components/switch-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-04/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/_sink/components/table-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-04/components/app-sidebar.tsx",
+            type: "registry:component",
          },
+      ],
+      categories: ["sidebar", "dashboard"],
+   },
+   {
+      name: "sidebar-05",
+      description: "A sidebar with collapsible submenus.",
+      type: "registry:block",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "label",
+         "collapsible",
+      ],
+      files: [
          {
-            path: 'block/_sink/components/tabs-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-05/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/_sink/components/textarea-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-05/components/app-sidebar.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/toast-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-05/components/search-form.tsx",
+            type: "registry:component",
          },
+      ],
+      categories: ["sidebar", "dashboard"],
+   },
+   {
+      name: "sidebar-06",
+      description: "A sidebar with submenus as dropdowns.",
+      type: "registry:block",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "card",
+         "dropdown-menu",
+      ],
+      files: [
          {
-            path: 'block/_sink/components/toggle-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-06/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/_sink/components/toggle-group-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-06/components/app-sidebar.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/tooltip-demo.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-06/components/nav-main.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/badge-destructive.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+            type: "registry:component",
          },
+      ],
+      categories: ["sidebar", "dashboard"],
+   },
+   {
+      name: "sidebar-07",
+      type: "registry:block",
+      description: "A sidebar that collapses to icons.",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "collapsible",
+         "dropdown-menu",
+         "avatar",
+      ],
+      files: [
          {
-            path: 'block/_sink/components/badge-outline.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-07/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/_sink/components/badge-secondary.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-07/components/app-sidebar.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/button-destructive.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-07/components/nav-main.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/button-ghost.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-07/components/nav-projects.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/button-link.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-07/components/nav-user.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/button-loading.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-07/components/team-switcher.tsx",
+            type: "registry:component",
          },
+      ],
+      categories: ["sidebar", "dashboard"],
+   },
+   {
+      name: "sidebar-08",
+      description: "An inset sidebar with secondary navigation.",
+      type: "registry:block",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "collapsible",
+         "dropdown-menu",
+         "avatar",
+      ],
+      files: [
          {
-            path: 'block/_sink/components/button-outline.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-08/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/_sink/components/button-secondary.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-08/components/app-sidebar.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/button-with-icon.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-08/components/nav-main.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/toggle-disabled.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-08/components/nav-projects.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/toggle-outline.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-08/components/nav-secondary.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/_sink/components/toggle-with-text.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-08/components/nav-user.tsx",
+            type: "registry:component",
          },
       ],
+      categories: ["sidebar", "dashboard"],
    },
    {
-      name: 'sidebar-01',
-      type: 'registry:block',
+      name: "sidebar-09",
+      description: "Collapsible nested sidebars.",
+      type: "registry:block",
       registryDependencies: [
-         'sidebar',
-         'breadcrumb',
-         'separator',
-         'label',
-         'dropdown-menu',
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "collapsible",
+         "dropdown-menu",
+         "avatar",
+         "switch",
       ],
       files: [
          {
-            path: 'block/sidebar-01/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
-         },
-         {
-            path: 'block/sidebar-01/components/app-sidebar.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-09/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/sidebar-01/components/search-form.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-09/components/app-sidebar.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-01/components/version-switcher.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-09/components/nav-user.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Application',
-      subcategory: 'Sidebars',
+      categories: ["sidebar", "dashboard"],
    },
    {
-      name: 'sidebar-02',
-      type: 'registry:block',
+      name: "sidebar-10",
+      description: "A sidebar in a popover.",
+      type: "registry:block",
       registryDependencies: [
-         'sidebar',
-         'breadcrumb',
-         'separator',
-         'label',
-         'dropdown-menu',
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "popover",
+         "collapsible",
+         "dropdown-menu",
       ],
       files: [
          {
-            path: 'block/sidebar-02/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
+            path: "blocks/sidebar-10/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/sidebar-02/components/app-sidebar.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-10/components/app-sidebar.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-02/components/search-form.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-10/components/nav-actions.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-02/components/version-switcher.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-10/components/nav-favorites.tsx",
+            type: "registry:component",
          },
-      ],
-      category: 'Application',
-      subcategory: 'Sidebars',
-   },
-   {
-      name: 'sidebar-03',
-      type: 'registry:block',
-      registryDependencies: ['sidebar', 'breadcrumb'],
-      files: [
          {
-            path: 'block/sidebar-03/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
+            path: "blocks/sidebar-10/components/nav-main.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-03/components/app-sidebar.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-10/components/nav-secondary.tsx",
+            type: "registry:component",
          },
-      ],
-      category: 'Application',
-      subcategory: 'Sidebars',
-   },
-   {
-      name: 'sidebar-04',
-      type: 'registry:block',
-      registryDependencies: ['sidebar', 'breadcrumb', 'separator'],
-      files: [
          {
-            path: 'block/sidebar-04/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
+            path: "blocks/sidebar-10/components/nav-workspaces.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-04/components/app-sidebar.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-10/components/team-switcher.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Application',
-      subcategory: 'Sidebars',
+      categories: ["sidebar", "dashboard"],
    },
    {
-      name: 'sidebar-05',
-      type: 'registry:block',
+      name: "sidebar-11",
+      description: "A sidebar with a collapsible file tree.",
+      type: "registry:block",
       registryDependencies: [
-         'sidebar',
-         'breadcrumb',
-         'separator',
-         'label',
-         'collapsible',
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "collapsible",
       ],
       files: [
          {
-            path: 'block/sidebar-05/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
+            path: "blocks/sidebar-11/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/sidebar-05/components/app-sidebar.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-05/components/search-form.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-11/components/app-sidebar.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Application',
-      subcategory: 'Sidebars',
+      categories: ["sidebar", "dashboard"],
    },
    {
-      name: 'sidebar-06',
-      type: 'registry:block',
+      name: "sidebar-12",
+      description: "A sidebar with a calendar.",
+      type: "registry:block",
       registryDependencies: [
-         'sidebar',
-         'breadcrumb',
-         'separator',
-         'card',
-         'dropdown-menu',
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "collapsible",
+         "calendar",
+         "dropdown-menu",
+         "avatar",
       ],
       files: [
          {
-            path: 'block/sidebar-06/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
+            path: "blocks/sidebar-12/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/sidebar-06/components/app-sidebar.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-12/components/app-sidebar.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-06/components/nav-main.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-12/components/calendars.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-06/components/sidebar-opt-in-form.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-12/components/date-picker.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "blocks/sidebar-12/components/nav-user.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Application',
-      subcategory: 'Sidebars',
+      categories: ["sidebar", "dashboard"],
    },
    {
-      name: 'sidebar-07',
-      type: 'registry:block',
-      registryDependencies: [
-         'sidebar',
-         'breadcrumb',
-         'separator',
-         'collapsible',
-         'dropdown-menu',
-         'avatar',
-      ],
+      name: "sidebar-13",
+      description: "A sidebar in a dialog.",
+      type: "registry:block",
+      registryDependencies: ["sidebar", "breadcrumb", "button", "dialog"],
       files: [
          {
-            path: 'block/sidebar-07/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
-         },
-         {
-            path: 'block/sidebar-07/components/app-sidebar.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-13/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/sidebar-07/components/nav-main.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-07/components/nav-projects.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-07/components/nav-user.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-07/components/team-switcher.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-13/components/settings-dialog.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Application',
-      subcategory: 'Sidebars',
+      categories: ["sidebar", "dashboard"],
    },
    {
-      name: 'sidebar-08',
-      type: 'registry:block',
-      registryDependencies: [
-         'sidebar',
-         'breadcrumb',
-         'separator',
-         'collapsible',
-         'dropdown-menu',
-         'avatar',
-      ],
+      name: "sidebar-14",
+      description: "A sidebar on the right.",
+      type: "registry:block",
+      registryDependencies: ["sidebar", "breadcrumb"],
       files: [
          {
-            path: 'block/sidebar-08/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
+            path: "blocks/sidebar-14/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/sidebar-08/components/app-sidebar.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-08/components/nav-main.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-08/components/nav-projects.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-08/components/nav-secondary.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-08/components/nav-user.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-14/components/app-sidebar.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Application',
-      subcategory: 'Sidebars',
+      categories: ["sidebar", "dashboard"],
    },
    {
-      name: 'sidebar-09',
-      type: 'registry:block',
+      name: "sidebar-15",
+      description: "A left and right sidebar.",
+      type: "registry:block",
       registryDependencies: [
-         'sidebar',
-         'breadcrumb',
-         'separator',
-         'collapsible',
-         'dropdown-menu',
-         'avatar',
-         'switch',
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "popover",
+         "collapsible",
+         "dropdown-menu",
+         "calendar",
+         "avatar",
       ],
       files: [
          {
-            path: 'block/sidebar-09/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
+            path: "blocks/sidebar-15/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/sidebar-09/components/app-sidebar.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-15/components/calendars.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-09/components/nav-user.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-15/components/date-picker.tsx",
+            type: "registry:component",
          },
-      ],
-      category: 'Application',
-      subcategory: 'Sidebars',
-   },
-   {
-      name: 'sidebar-10',
-      type: 'registry:block',
-      registryDependencies: [
-         'sidebar',
-         'breadcrumb',
-         'separator',
-         'popover',
-         'collapsible',
-         'dropdown-menu',
-      ],
-      files: [
          {
-            path: 'block/sidebar-10/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
+            path: "blocks/sidebar-15/components/nav-favorites.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-10/components/app-sidebar.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-15/components/nav-main.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-10/components/nav-actions.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-15/components/nav-secondary.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-10/components/nav-favorites.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-15/components/nav-user.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-10/components/nav-main.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-15/components/nav-workspaces.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-10/components/nav-secondary.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-15/components/sidebar-left.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-10/components/nav-workspaces.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-15/components/sidebar-right.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-10/components/team-switcher.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-15/components/team-switcher.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Application',
-      subcategory: 'Sidebars',
+      categories: ["sidebar", "dashboard"],
    },
    {
-      name: 'sidebar-11',
-      type: 'registry:block',
-      registryDependencies: ['sidebar', 'breadcrumb', 'separator', 'collapsible'],
+      name: "sidebar-16",
+      description: "A sidebar with a sticky site header.",
+      type: "registry:block",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "collapsible",
+         "dropdown-menu",
+         "avatar",
+         "button",
+      ],
       files: [
          {
-            path: 'block/sidebar-11/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
+            path: "blocks/sidebar-16/page.tsx",
+            type: "registry:page",
+            target: "app/dashboard/page.tsx",
          },
          {
-            path: 'block/sidebar-11/components/app-sidebar.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-16/components/app-sidebar.tsx",
+            type: "registry:component",
          },
-      ],
-      category: 'Application',
-      subcategory: 'Sidebars',
-   },
-   {
-      name: 'sidebar-12',
-      type: 'registry:block',
-      registryDependencies: [
-         'sidebar',
-         'breadcrumb',
-         'separator',
-         'collapsible',
-         'calendar',
-         'dropdown-menu',
-         'avatar',
-      ],
-      files: [
          {
-            path: 'block/sidebar-12/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
+            path: "blocks/sidebar-16/components/nav-main.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-12/components/app-sidebar.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-16/components/nav-projects.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-12/components/calendars.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-16/components/nav-secondary.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-12/components/date-picker.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-16/components/nav-user.tsx",
+            type: "registry:component",
          },
          {
-            path: 'block/sidebar-12/components/nav-user.tsx',
-            type: 'registry:component',
+            path: "blocks/sidebar-16/components/search-form.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "blocks/sidebar-16/components/site-header.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Application',
-      subcategory: 'Sidebars',
+      categories: ["sidebar", "dashboard"],
    },
    {
-      name: 'sidebar-13',
-      type: 'registry:block',
-      registryDependencies: ['sidebar', 'breadcrumb', 'button', 'dialog'],
+      name: "login-01",
+      description: "A simple login form.",
+      type: "registry:block",
+      registryDependencies: ["button", "card", "input", "label"],
       files: [
          {
-            path: 'block/sidebar-13/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
+            path: "blocks/login-01/page.tsx",
+            target: "app/login/page.tsx",
+            type: "registry:page",
          },
          {
-            path: 'block/sidebar-13/components/settings-dialog.tsx',
-            type: 'registry:component',
+            path: "blocks/login-01/components/login-form.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Application',
-      subcategory: 'Sidebars',
+      categories: ["authentication", "login"],
    },
    {
-      name: 'sidebar-14',
-      type: 'registry:block',
-      registryDependencies: ['sidebar', 'breadcrumb'],
+      name: "login-02",
+      description: "A two column login page with a cover image.",
+      type: "registry:block",
+      registryDependencies: ["button", "card", "input", "label"],
       files: [
          {
-            path: 'block/sidebar-14/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
+            path: "blocks/login-02/page.tsx",
+            target: "app/login/page.tsx",
+            type: "registry:page",
          },
          {
-            path: 'block/sidebar-14/components/app-sidebar.tsx',
-            type: 'registry:component',
+            path: "blocks/login-02/components/login-form.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Application',
-      subcategory: 'Sidebars',
+      categories: ["authentication", "login"],
    },
    {
-      name: 'sidebar-15',
-      type: 'registry:block',
-      registryDependencies: [
-         'sidebar',
-         'breadcrumb',
-         'separator',
-         'popover',
-         'collapsible',
-         'dropdown-menu',
-         'calendar',
-         'avatar',
-      ],
+      name: "login-03",
+      description: "A login page with a muted background color.",
+      type: "registry:block",
+      registryDependencies: ["button", "card", "input", "label"],
       files: [
          {
-            path: 'block/sidebar-15/page.tsx',
-            type: 'registry:page',
-            target: 'app/dashboard/page.tsx',
-         },
-         {
-            path: 'block/sidebar-15/components/calendars.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-15/components/date-picker.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-15/components/nav-favorites.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-15/components/nav-main.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-15/components/nav-secondary.tsx',
-            type: 'registry:component',
+            path: "blocks/login-03/page.tsx",
+            target: "app/login/page.tsx",
+            type: "registry:page",
          },
          {
-            path: 'block/sidebar-15/components/nav-user.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-15/components/nav-workspaces.tsx',
-            type: 'registry:component',
-         },
-         {
-            path: 'block/sidebar-15/components/sidebar-left.tsx',
-            type: 'registry:component',
+            path: "blocks/login-03/components/login-form.tsx",
+            type: "registry:component",
          },
+      ],
+      categories: ["authentication", "login"],
+   },
+   {
+      name: "login-04",
+      description: "A login page with form and image.",
+      type: "registry:block",
+      registryDependencies: ["button", "card", "input", "label"],
+      files: [
          {
-            path: 'block/sidebar-15/components/sidebar-right.tsx',
-            type: 'registry:component',
+            path: "blocks/login-04/page.tsx",
+            target: "app/login/page.tsx",
+            type: "registry:page",
          },
          {
-            path: 'block/sidebar-15/components/team-switcher.tsx',
-            type: 'registry:component',
+            path: "blocks/login-04/components/login-form.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Application',
-      subcategory: 'Sidebars',
+      categories: ["authentication", "login"],
    },
    {
-      name: 'login-01',
-      type: 'registry:block',
-      registryDependencies: ['button', 'card', 'input', 'label'],
+      name: "login-05",
+      description: "A simple email-only login page.",
+      type: "registry:block",
+      registryDependencies: ["button", "card", "input", "label"],
       files: [
          {
-            path: 'block/login-01/page.tsx',
-            target: 'app/login/page.tsx',
-            type: 'registry:page',
+            path: "blocks/login-05/page.tsx",
+            target: "app/login/page.tsx",
+            type: "registry:page",
          },
          {
-            path: 'block/login-01/components/login-form.tsx',
-            type: 'registry:component',
+            path: "blocks/login-05/components/login-form.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Authentication',
-      subcategory: 'Login',
+      categories: ["authentication", "login"],
    },
 ]
diff --git a/apps/web/registry/registry-categories.ts b/apps/web/registry/registry-categories.ts
new file mode 100644
index 00000000..04491439
--- /dev/null
+++ b/apps/web/registry/registry-categories.ts
@@ -0,0 +1,62 @@
+export const registryCategories = [
+   {
+      name: "Sidebar",
+      slug: "sidebar",
+      hidden: false,
+   },
+   {
+      name: "Dashboard",
+      slug: "dashboard",
+      hidden: true,
+   },
+   {
+      name: "Authentication",
+      slug: "authentication",
+      hidden: false,
+   },
+   {
+      name: "Login",
+      slug: "login",
+      hidden: false,
+   },
+   {
+      name: "Charts",
+      slug: "charts",
+      hidden: true,
+   },
+   {
+      name: "Area Charts",
+      slug: "charts-area",
+      hidden: true,
+   },
+   {
+      name: "Bar Charts",
+      slug: "charts-bar",
+      hidden: true,
+   },
+   {
+      name: "Line Charts",
+      slug: "charts-line",
+      hidden: true,
+   },
+   {
+      name: "Pie Charts",
+      slug: "charts-pie",
+      hidden: true,
+   },
+   {
+      name: "Radar Charts",
+      slug: "charts-radar",
+      hidden: true,
+   },
+   {
+      name: "Radial Charts",
+      slug: "charts-radial",
+      hidden: true,
+   },
+   {
+      name: "Charts Tooltip",
+      slug: "charts-tooltip",
+      hidden: true,
+   },
+]
diff --git a/apps/web/registry/registry-charts.ts b/apps/web/registry/registry-charts.ts
index 66e76554..bfed95c1 100644
--- a/apps/web/registry/registry-charts.ts
+++ b/apps/web/registry/registry-charts.ts
@@ -1,925 +1,855 @@
-import type { Registry } from '~/registry/schema'
+import type { Registry } from "nyxb/registry"
 
-export const charts: Registry = [
+export const charts: Registry["items"] = [
    // Area Charts
    {
-      name: 'chart-area-axes',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-area-axes",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-area-axes.tsx',
-            type: 'registry:block',
+            path: "charts/chart-area-axes.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Area',
+      categories: ["charts", "charts-area"],
    },
    {
-      name: 'chart-area-default',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-area-default",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-area-default.tsx',
-            type: 'registry:block',
+            path: "charts/chart-area-default.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Area',
+      categories: ["charts", "charts-area"],
    },
    {
-      name: 'chart-area-gradient',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-area-gradient",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-area-gradient.tsx',
-            type: 'registry:block',
+            path: "charts/chart-area-gradient.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Area',
+      categories: ["charts", "charts-area"],
    },
    {
-      name: 'chart-area-icons',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-area-icons",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-area-icons.tsx',
-            type: 'registry:block',
+            path: "charts/chart-area-icons.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Area',
+      categories: ["charts", "charts-area"],
    },
    {
-      name: 'chart-area-interactive',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart', 'select'],
+      name: "chart-area-interactive",
+      type: "registry:block",
+      registryDependencies: ["card", "chart", "select"],
       files: [
          {
-            path: 'block/chart-area-interactive.tsx',
-            type: 'registry:component',
+            path: "charts/chart-area-interactive.tsx",
+            type: "registry:component",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Area',
+      categories: ["charts", "charts-area"],
    },
    {
-      name: 'chart-area-legend',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-area-legend",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-area-legend.tsx',
-            type: 'registry:block',
+            path: "charts/chart-area-legend.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Area',
+      categories: ["charts", "charts-area"],
    },
    {
-      name: 'chart-area-linear',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-area-linear",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-area-linear.tsx',
-            type: 'registry:block',
+            path: "charts/chart-area-linear.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Area',
+      categories: ["charts", "charts-area"],
    },
    {
-      name: 'chart-area-stacked-expand',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-area-stacked-expand",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-area-stacked-expand.tsx',
-            type: 'registry:block',
+            path: "charts/chart-area-stacked-expand.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Area',
+      categories: ["charts", "charts-area"],
    },
    {
-      name: 'chart-area-stacked',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-area-stacked",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-area-stacked.tsx',
-            type: 'registry:block',
+            path: "charts/chart-area-stacked.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Area',
+      categories: ["charts", "charts-area"],
    },
    {
-      name: 'chart-area-step',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-area-step",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-area-step.tsx',
-            type: 'registry:block',
+            path: "charts/chart-area-step.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Area',
+      categories: ["charts", "charts-area"],
    },
 
    // Bar Charts
    {
-      name: 'chart-bar-active',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-bar-active",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-bar-active.tsx',
-            type: 'registry:block',
+            path: "charts/chart-bar-active.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Bar',
+      categories: ["charts", "charts-bar"],
    },
    {
-      name: 'chart-bar-default',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-bar-default",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-bar-default.tsx',
-            type: 'registry:block',
+            path: "charts/chart-bar-default.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Bar',
+      categories: ["charts", "charts-bar"],
    },
    {
-      name: 'chart-bar-horizontal',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-bar-horizontal",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-bar-horizontal.tsx',
-            type: 'registry:block',
+            path: "charts/chart-bar-horizontal.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Bar',
+      categories: ["charts", "charts-bar"],
    },
    {
-      name: 'chart-bar-interactive',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-bar-interactive",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-bar-interactive.tsx',
-            type: 'registry:block',
+            path: "charts/chart-bar-interactive.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Bar',
+      categories: ["charts", "charts-bar"],
    },
    {
-      name: 'chart-bar-label-custom',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-bar-label-custom",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-bar-label-custom.tsx',
-            type: 'registry:block',
+            path: "charts/chart-bar-label-custom.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Bar',
+      categories: ["charts", "charts-bar"],
    },
    {
-      name: 'chart-bar-label',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-bar-label",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-bar-label.tsx',
-            type: 'registry:block',
+            path: "charts/chart-bar-label.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Bar',
+      categories: ["charts", "charts-bar"],
    },
    {
-      name: 'chart-bar-mixed',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-bar-mixed",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-bar-mixed.tsx',
-            type: 'registry:block',
+            path: "charts/chart-bar-mixed.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Bar',
+      categories: ["charts", "charts-bar"],
    },
    {
-      name: 'chart-bar-multiple',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-bar-multiple",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-bar-multiple.tsx',
-            type: 'registry:block',
+            path: "charts/chart-bar-multiple.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Bar',
+      categories: ["charts", "charts-bar"],
    },
    {
-      name: 'chart-bar-negative',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-bar-negative",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-bar-negative.tsx',
-            type: 'registry:block',
+            path: "charts/chart-bar-negative.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Bar',
+      categories: ["charts", "charts-bar"],
    },
    {
-      name: 'chart-bar-stacked',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-bar-stacked",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-bar-stacked.tsx',
-            type: 'registry:block',
+            path: "charts/chart-bar-stacked.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Bar',
+      categories: ["charts", "charts-bar"],
    },
 
    // Line Charts
    {
-      name: 'chart-line-default',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-line-default",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-line-default.tsx',
-            type: 'registry:block',
+            path: "charts/chart-line-default.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Line',
+      categories: ["charts", "charts-line"],
    },
    {
-      name: 'chart-line-dots-colors',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-line-dots-colors",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-line-dots-colors.tsx',
-            type: 'registry:block',
+            path: "charts/chart-line-dots-colors.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Line',
+      categories: ["charts", "charts-line"],
    },
    {
-      name: 'chart-line-dots-custom',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-line-dots-custom",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-line-dots-custom.tsx',
-            type: 'registry:block',
+            path: "charts/chart-line-dots-custom.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Line',
+      categories: ["charts", "charts-line"],
    },
    {
-      name: 'chart-line-dots',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-line-dots",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-line-dots.tsx',
-            type: 'registry:block',
+            path: "charts/chart-line-dots.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Line',
+      categories: ["charts", "charts-line"],
    },
    {
-      name: 'chart-line-interactive',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-line-interactive",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-line-interactive.tsx',
-            type: 'registry:block',
+            path: "charts/chart-line-interactive.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Line',
+      categories: ["charts", "charts-line"],
    },
    {
-      name: 'chart-line-label-custom',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-line-label-custom",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-line-label-custom.tsx',
-            type: 'registry:block',
+            path: "charts/chart-line-label-custom.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Line',
+      categories: ["charts", "charts-line"],
    },
    {
-      name: 'chart-line-label',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-line-label",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-line-label.tsx',
-            type: 'registry:block',
+            path: "charts/chart-line-label.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Line',
+      categories: ["charts", "charts-line"],
    },
    {
-      name: 'chart-line-linear',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-line-linear",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-line-linear.tsx',
-            type: 'registry:block',
+            path: "charts/chart-line-linear.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Line',
+      categories: ["charts", "charts-line"],
    },
    {
-      name: 'chart-line-multiple',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-line-multiple",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-line-multiple.tsx',
-            type: 'registry:block',
+            path: "charts/chart-line-multiple.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Line',
+      categories: ["charts", "charts-line"],
    },
    {
-      name: 'chart-line-step',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-line-step",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-line-step.tsx',
-            type: 'registry:block',
+            path: "charts/chart-line-step.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Line',
+      categories: ["charts", "charts-line"],
    },
 
    // Pie Charts
    {
-      name: 'chart-pie-donut-active',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-pie-donut-active",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-pie-donut-active.tsx',
-            type: 'registry:block',
+            path: "charts/chart-pie-donut-active.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Pie',
+      categories: ["charts", "charts-pie"],
    },
    {
-      name: 'chart-pie-donut-text',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-pie-donut-text",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-pie-donut-text.tsx',
-            type: 'registry:block',
+            path: "charts/chart-pie-donut-text.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Pie',
+      categories: ["charts", "charts-pie"],
    },
    {
-      name: 'chart-pie-donut',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-pie-donut",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-pie-donut.tsx',
-            type: 'registry:block',
+            path: "charts/chart-pie-donut.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Pie',
+      categories: ["charts", "charts-pie"],
    },
    {
-      name: 'chart-pie-interactive',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-pie-interactive",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-pie-interactive.tsx',
-            type: 'registry:block',
+            path: "charts/chart-pie-interactive.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Pie',
+      categories: ["charts", "charts-pie"],
    },
    {
-      name: 'chart-pie-label-custom',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-pie-label-custom",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-pie-label-custom.tsx',
-            type: 'registry:block',
+            path: "charts/chart-pie-label-custom.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Pie',
+      categories: ["charts", "charts-pie"],
    },
    {
-      name: 'chart-pie-label-list',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-pie-label-list",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-pie-label-list.tsx',
-            type: 'registry:block',
+            path: "charts/chart-pie-label-list.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Pie',
+      categories: ["charts", "charts-pie"],
    },
    {
-      name: 'chart-pie-label',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-pie-label",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-pie-label.tsx',
-            type: 'registry:block',
+            path: "charts/chart-pie-label.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Pie',
+      categories: ["charts", "charts-pie"],
    },
    {
-      name: 'chart-pie-legend',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-pie-legend",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-pie-legend.tsx',
-            type: 'registry:block',
+            path: "charts/chart-pie-legend.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Pie',
+      categories: ["charts", "charts-pie"],
    },
    {
-      name: 'chart-pie-separator-none',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-pie-separator-none",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-pie-separator-none.tsx',
-            type: 'registry:block',
+            path: "charts/chart-pie-separator-none.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Pie',
+      categories: ["charts", "charts-pie"],
    },
    {
-      name: 'chart-pie-simple',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-pie-simple",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-pie-simple.tsx',
-            type: 'registry:block',
+            path: "charts/chart-pie-simple.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Pie',
+      categories: ["charts", "charts-pie"],
    },
    {
-      name: 'chart-pie-stacked',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-pie-stacked",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-pie-stacked.tsx',
-            type: 'registry:block',
+            path: "charts/chart-pie-stacked.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Pie',
+      categories: ["charts", "charts-pie"],
    },
 
    // Radar Charts
    {
-      name: 'chart-radar-default',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-default",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-default.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-default.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-dots',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-dots",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-dots.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-dots.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-grid-circle-fill',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-grid-circle-fill",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-grid-circle-fill.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-grid-circle-fill.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-grid-circle-no-lines',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-grid-circle-no-lines",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-grid-circle-no-lines.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-grid-circle-no-lines.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-grid-circle',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-grid-circle",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-grid-circle.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-grid-circle.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-grid-custom',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-grid-custom",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-grid-custom.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-grid-custom.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-grid-fill',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-grid-fill",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-grid-fill.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-grid-fill.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-grid-none',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-grid-none",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-grid-none.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-grid-none.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-icons',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-icons",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-icons.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-icons.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-label-custom',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-label-custom",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-label-custom.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-label-custom.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-legend',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-legend",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-legend.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-legend.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-lines-only',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-lines-only",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-lines-only.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-lines-only.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-multiple',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-multiple",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-multiple.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-multiple.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
    {
-      name: 'chart-radar-radius',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radar-radius",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radar-radius.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radar-radius.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radar',
+      categories: ["charts", "charts-radar"],
    },
 
    // Radial Charts
    {
-      name: 'chart-radial-grid',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radial-grid",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radial-grid.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radial-grid.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radial',
+      categories: ["charts", "charts-radial"],
    },
    {
-      name: 'chart-radial-label',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radial-label",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radial-label.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radial-label.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radial',
+      categories: ["charts", "charts-radial"],
    },
    {
-      name: 'chart-radial-shape',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radial-shape",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radial-shape.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radial-shape.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radial',
+      categories: ["charts", "charts-radial"],
    },
    {
-      name: 'chart-radial-simple',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radial-simple",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radial-simple.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radial-simple.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radial',
+      categories: ["charts", "charts-radial"],
    },
    {
-      name: 'chart-radial-stacked',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radial-stacked",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radial-stacked.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radial-stacked.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radial',
+      categories: ["charts", "charts-radial"],
    },
    {
-      name: 'chart-radial-text',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-radial-text",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-radial-text.tsx',
-            type: 'registry:block',
+            path: "charts/chart-radial-text.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Radial',
+      categories: ["charts", "charts-radial"],
    },
    {
-      name: 'chart-tooltip-default',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-tooltip-default",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-tooltip-default.tsx',
-            type: 'registry:block',
+            path: "charts/chart-tooltip-default.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Tooltip',
+      categories: ["charts", "charts-tooltip"],
    },
    {
-      name: 'chart-tooltip-indicator-line',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-tooltip-indicator-line",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-tooltip-indicator-line.tsx',
-            type: 'registry:block',
+            path: "charts/chart-tooltip-indicator-line.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Tooltip',
+      categories: ["charts", "charts-tooltip"],
    },
    {
-      name: 'chart-tooltip-indicator-none',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-tooltip-indicator-none",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-tooltip-indicator-none.tsx',
-            type: 'registry:block',
+            path: "charts/chart-tooltip-indicator-none.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Tooltip',
+      categories: ["charts", "charts-tooltip"],
    },
    {
-      name: 'chart-tooltip-label-none',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-tooltip-label-none",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-tooltip-label-none.tsx',
-            type: 'registry:block',
+            path: "charts/chart-tooltip-label-none.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Tooltip',
+      categories: ["charts", "charts-tooltip"],
    },
    {
-      name: 'chart-tooltip-label-custom',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-tooltip-label-custom",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-tooltip-label-custom.tsx',
-            type: 'registry:block',
+            path: "charts/chart-tooltip-label-custom.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Tooltip',
+      categories: ["charts", "charts-tooltip"],
    },
    {
-      name: 'chart-tooltip-label-formatter',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-tooltip-label-formatter",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-tooltip-label-formatter.tsx',
-            type: 'registry:block',
+            path: "charts/chart-tooltip-label-formatter.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Tooltip',
+      categories: ["charts", "charts-tooltip"],
    },
    {
-      name: 'chart-tooltip-formatter',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-tooltip-formatter",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-tooltip-formatter.tsx',
-            type: 'registry:block',
+            path: "charts/chart-tooltip-formatter.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Tooltip',
+      categories: ["charts", "charts-tooltip"],
    },
    {
-      name: 'chart-tooltip-icons',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-tooltip-icons",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-tooltip-icons.tsx',
-            type: 'registry:block',
+            path: "charts/chart-tooltip-icons.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Tooltip',
+      categories: ["charts", "charts-tooltip"],
    },
    {
-      name: 'chart-tooltip-advanced',
-      type: 'registry:block',
-      registryDependencies: ['card', 'chart'],
+      name: "chart-tooltip-advanced",
+      type: "registry:block",
+      registryDependencies: ["card", "chart"],
       files: [
          {
-            path: 'block/chart-tooltip-advanced.tsx',
-            type: 'registry:block',
+            path: "charts/chart-tooltip-advanced.tsx",
+            type: "registry:block",
          },
       ],
-      category: 'Charts',
-      subcategory: 'Tooltip',
+      categories: ["charts", "charts-tooltip"],
    },
 ]
diff --git a/apps/web/registry/registry-colors.ts b/apps/web/registry/registry-colors.ts
index 2614c7c2..9934f94e 100644
--- a/apps/web/registry/registry-colors.ts
+++ b/apps/web/registry/registry-colors.ts
@@ -1,1566 +1,1810 @@
 export const colors = {
-   inherit: 'inherit',
-   current: 'currentColor',
-   transparent: 'transparent',
+   inherit: "inherit",
+   current: "currentColor",
+   transparent: "transparent",
    black: {
-      hex: '#000000',
-      rgb: 'rgb(0,0,0)',
-      hsl: 'hsl(0,0%,0%)',
+      hex: "#000000",
+      rgb: "rgb(0,0,0)",
+      hsl: "hsl(0,0%,0%)",
+      oklch: "oklch(0.00,0.00,0)",
    },
    white: {
-      hex: '#ffffff',
-      rgb: 'rgb(255,255,255)',
-      hsl: 'hsl(0,0%,100%)',
+      hex: "#ffffff",
+      rgb: "rgb(255,255,255)",
+      hsl: "hsl(0,0%,100%)",
+      oklch: "oklch(1.00,0.00,0)",
    },
    slate: [
       {
          scale: 50,
-         hex: '#f8fafc',
-         rgb: 'rgb(248,250,252)',
-         hsl: 'hsl(210,40%,98%)',
+         hex: "#f8fafc",
+         rgb: "rgb(248,250,252)",
+         hsl: "hsl(210,40%,98%)",
+         oklch: "oklch(0.98,0.00,248)",
       },
       {
          scale: 100,
-         hex: '#f1f5f9',
-         rgb: 'rgb(241,245,249)',
-         hsl: 'hsl(210,40%,96.1%)',
+         hex: "#f1f5f9",
+         rgb: "rgb(241,245,249)",
+         hsl: "hsl(210,40%,96.1%)",
+         oklch: "oklch(0.97,0.01,248)",
       },
       {
          scale: 200,
-         hex: '#e2e8f0',
-         rgb: 'rgb(226,232,240)',
-         hsl: 'hsl(214.3,31.8%,91.4%)',
+         hex: "#e2e8f0",
+         rgb: "rgb(226,232,240)",
+         hsl: "hsl(214.3,31.8%,91.4%)",
+         oklch: "oklch(0.93,0.01,256)",
       },
       {
          scale: 300,
-         hex: '#cbd5e1',
-         rgb: 'rgb(203,213,225)',
-         hsl: 'hsl(212.7,26.8%,83.9%)',
+         hex: "#cbd5e1",
+         rgb: "rgb(203,213,225)",
+         hsl: "hsl(212.7,26.8%,83.9%)",
+         oklch: "oklch(0.87,0.02,253)",
       },
       {
          scale: 400,
-         hex: '#94a3b8',
-         rgb: 'rgb(148,163,184)',
-         hsl: 'hsl(215,20.2%,65.1%)',
+         hex: "#94a3b8",
+         rgb: "rgb(148,163,184)",
+         hsl: "hsl(215,20.2%,65.1%)",
+         oklch: "oklch(0.71,0.04,257)",
       },
       {
          scale: 500,
-         hex: '#64748b',
-         rgb: 'rgb(100,116,139)',
-         hsl: 'hsl(215.4,16.3%,46.9%)',
+         hex: "#64748b",
+         rgb: "rgb(100,116,139)",
+         hsl: "hsl(215.4,16.3%,46.9%)",
+         oklch: "oklch(0.55,0.04,257)",
       },
       {
          scale: 600,
-         hex: '#475569',
-         rgb: 'rgb(71,85,105)',
-         hsl: 'hsl(215.3,19.3%,34.5%)',
+         hex: "#475569",
+         rgb: "rgb(71,85,105)",
+         hsl: "hsl(215.3,19.3%,34.5%)",
+         oklch: "oklch(0.45,0.04,257)",
       },
       {
          scale: 700,
-         hex: '#334155',
-         rgb: 'rgb(51,65,85)',
-         hsl: 'hsl(215.3,25%,26.7%)',
+         hex: "#334155",
+         rgb: "rgb(51,65,85)",
+         hsl: "hsl(215.3,25%,26.7%)",
+         oklch: "oklch(0.37,0.04,257)",
       },
       {
          scale: 800,
-         hex: '#1e293b',
-         rgb: 'rgb(30,41,59)',
-         hsl: 'hsl(217.2,32.6%,17.5%)',
+         hex: "#1e293b",
+         rgb: "rgb(30,41,59)",
+         hsl: "hsl(217.2,32.6%,17.5%)",
+         oklch: "oklch(0.28,0.04,260)",
       },
       {
          scale: 900,
-         hex: '#0f172a',
-         rgb: 'rgb(15,23,42)',
-         hsl: 'hsl(222.2,47.4%,11.2%)',
+         hex: "#0f172a",
+         rgb: "rgb(15,23,42)",
+         hsl: "hsl(222.2,47.4%,11.2%)",
+         oklch: "oklch(0.21,0.04,266)",
       },
       {
          scale: 950,
-         hex: '#020617',
-         rgb: 'rgb(2,6,23)',
-         hsl: 'hsl(222.2,84%,4.9%)',
+         hex: "#020617",
+         rgb: "rgb(2,6,23)",
+         hsl: "hsl(222.2,84%,4.9%)",
+         oklch: "oklch(0.13,0.04,265)",
       },
    ],
    gray: [
       {
          scale: 50,
-         hex: '#f9fafb',
-         rgb: 'rgb(249,250,251)',
-         hsl: 'hsl(210,20%,98%)',
+         hex: "#f9fafb",
+         rgb: "rgb(249,250,251)",
+         hsl: "hsl(210,20%,98%)",
+         oklch: "oklch(0.98,0.00,248)",
       },
       {
          scale: 100,
-         hex: '#f3f4f6',
-         rgb: 'rgb(243,244,246)',
-         hsl: 'hsl(220,14.3%,95.9%)',
+         hex: "#f3f4f6",
+         rgb: "rgb(243,244,246)",
+         hsl: "hsl(220,14.3%,95.9%)",
+         oklch: "oklch(0.97,0.00,265)",
       },
       {
          scale: 200,
-         hex: '#e5e7eb',
-         rgb: 'rgb(229,231,235)',
-         hsl: 'hsl(220,13%,91%)',
+         hex: "#e5e7eb",
+         rgb: "rgb(229,231,235)",
+         hsl: "hsl(220,13%,91%)",
+         oklch: "oklch(0.93,0.01,265)",
       },
       {
          scale: 300,
-         hex: '#d1d5db',
-         rgb: 'rgb(209,213,219)',
-         hsl: 'hsl(216,12.2%,83.9%)',
+         hex: "#d1d5db",
+         rgb: "rgb(209,213,219)",
+         hsl: "hsl(216,12.2%,83.9%)",
+         oklch: "oklch(0.87,0.01,258)",
       },
       {
          scale: 400,
-         hex: '#9ca3af',
-         rgb: 'rgb(156,163,175)',
-         hsl: 'hsl(217.9,10.6%,64.9%)',
+         hex: "#9ca3af",
+         rgb: "rgb(156,163,175)",
+         hsl: "hsl(217.9,10.6%,64.9%)",
+         oklch: "oklch(0.71,0.02,261)",
       },
       {
          scale: 500,
-         hex: '#6b7280',
-         rgb: 'rgb(107,114,128)',
-         hsl: 'hsl(220,8.9%,46.1%)',
+         hex: "#6b7280",
+         rgb: "rgb(107,114,128)",
+         hsl: "hsl(220,8.9%,46.1%)",
+         oklch: "oklch(0.55,0.02,264)",
       },
       {
          scale: 600,
-         hex: '#4b5563',
-         rgb: 'rgb(75,85,99)',
-         hsl: 'hsl(215,13.8%,34.1%)',
+         hex: "#4b5563",
+         rgb: "rgb(75,85,99)",
+         hsl: "hsl(215,13.8%,34.1%)",
+         oklch: "oklch(0.45,0.03,257)",
       },
       {
          scale: 700,
-         hex: '#374151',
-         rgb: 'rgb(55,65,81)',
-         hsl: 'hsl(216.9,19.1%,26.7%)',
+         hex: "#374151",
+         rgb: "rgb(55,65,81)",
+         hsl: "hsl(216.9,19.1%,26.7%)",
+         oklch: "oklch(0.37,0.03,260)",
       },
       {
          scale: 800,
-         hex: '#1f2937',
-         rgb: 'rgb(31,41,55)',
-         hsl: 'hsl(215,27.9%,16.9%)',
+         hex: "#1f2937",
+         rgb: "rgb(31,41,55)",
+         hsl: "hsl(215,27.9%,16.9%)",
+         oklch: "oklch(0.28,0.03,257)",
       },
       {
          scale: 900,
-         hex: '#111827',
-         rgb: 'rgb(17,24,39)',
-         hsl: 'hsl(220.9,39.3%,11%)',
+         hex: "#111827",
+         rgb: "rgb(17,24,39)",
+         hsl: "hsl(220.9,39.3%,11%)",
+         oklch: "oklch(0.21,0.03,265)",
       },
       {
          scale: 950,
-         hex: '#030712',
-         rgb: 'rgb(3,7,18)',
-         hsl: 'hsl(224,71.4%,4.1%)',
+         hex: "#030712",
+         rgb: "rgb(3,7,18)",
+         hsl: "hsl(224,71.4%,4.1%)",
+         oklch: "oklch(0.13,0.03,262)",
       },
    ],
    zinc: [
       {
          scale: 50,
-         hex: '#fafafa',
-         rgb: 'rgb(250,250,250)',
-         hsl: 'hsl(0,0%,98%)',
+         hex: "#fafafa",
+         rgb: "rgb(250,250,250)",
+         hsl: "hsl(0,0%,98%)",
+         oklch: "oklch(0.99,0.00,0)",
       },
       {
          scale: 100,
-         hex: '#f4f4f5',
-         rgb: 'rgb(244,244,245)',
-         hsl: 'hsl(240,4.8%,95.9%)',
+         hex: "#f4f4f5",
+         rgb: "rgb(244,244,245)",
+         hsl: "hsl(240,4.8%,95.9%)",
+         oklch: "oklch(0.97,0.00,286)",
       },
       {
          scale: 200,
-         hex: '#e4e4e7',
-         rgb: 'rgb(228,228,231)',
-         hsl: 'hsl(240,5.9%,90%)',
+         hex: "#e4e4e7",
+         rgb: "rgb(228,228,231)",
+         hsl: "hsl(240,5.9%,90%)",
+         oklch: "oklch(0.92,0.00,286)",
       },
       {
          scale: 300,
-         hex: '#d4d4d8',
-         rgb: 'rgb(212,212,216)',
-         hsl: 'hsl(240,4.9%,83.9%)',
+         hex: "#d4d4d8",
+         rgb: "rgb(212,212,216)",
+         hsl: "hsl(240,4.9%,83.9%)",
+         oklch: "oklch(0.87,0.01,286)",
       },
       {
          scale: 400,
-         hex: '#a1a1aa',
-         rgb: 'rgb(161,161,170)',
-         hsl: 'hsl(240,5%,64.9%)',
+         hex: "#a1a1aa",
+         rgb: "rgb(161,161,170)",
+         hsl: "hsl(240,5%,64.9%)",
+         oklch: "oklch(0.71,0.01,286)",
       },
       {
          scale: 500,
-         hex: '#71717a',
-         rgb: 'rgb(113,113,122)',
-         hsl: 'hsl(240,3.8%,46.1%)',
+         hex: "#71717a",
+         rgb: "rgb(113,113,122)",
+         hsl: "hsl(240,3.8%,46.1%)",
+         oklch: "oklch(0.55,0.01,286)",
       },
       {
          scale: 600,
-         hex: '#52525b',
-         rgb: 'rgb(82,82,91)',
-         hsl: 'hsl(240,5.2%,33.9%)',
+         hex: "#52525b",
+         rgb: "rgb(82,82,91)",
+         hsl: "hsl(240,5.2%,33.9%)",
+         oklch: "oklch(0.44,0.01,286)",
       },
       {
          scale: 700,
-         hex: '#3f3f46',
-         rgb: 'rgb(63,63,70)',
-         hsl: 'hsl(240,5.3%,26.1%)',
+         hex: "#3f3f46",
+         rgb: "rgb(63,63,70)",
+         hsl: "hsl(240,5.3%,26.1%)",
+         oklch: "oklch(0.37,0.01,286)",
       },
       {
          scale: 800,
-         hex: '#27272a',
-         rgb: 'rgb(39,39,42)',
-         hsl: 'hsl(240,3.7%,15.9%)',
+         hex: "#27272a",
+         rgb: "rgb(39,39,42)",
+         hsl: "hsl(240,3.7%,15.9%)",
+         oklch: "oklch(0.27,0.01,286)",
       },
       {
          scale: 900,
-         hex: '#18181b',
-         rgb: 'rgb(24,24,27)',
-         hsl: 'hsl(240,5.9%,10%)',
+         hex: "#18181b",
+         rgb: "rgb(24,24,27)",
+         hsl: "hsl(240,5.9%,10%)",
+         oklch: "oklch(0.21,0.01,286)",
       },
       {
          scale: 950,
-         hex: '#09090b',
-         rgb: 'rgb(9,9,11)',
-         hsl: 'hsl(240,10%,3.9%)',
+         hex: "#09090b",
+         rgb: "rgb(9,9,11)",
+         hsl: "hsl(240,10%,3.9%)",
+         oklch: "oklch(0.14,0.00,286)",
       },
    ],
    neutral: [
       {
          scale: 50,
-         hex: '#fafafa',
-         rgb: 'rgb(250,250,250)',
-         hsl: 'hsl(0,0%,98%)',
+         hex: "#fafafa",
+         rgb: "rgb(250,250,250)",
+         hsl: "hsl(0,0%,98%)",
+         oklch: "oklch(0.99,0.00,0)",
       },
       {
          scale: 100,
-         hex: '#f5f5f5',
-         rgb: 'rgb(245,245,245)',
-         hsl: 'hsl(0,0%,96.1%)',
+         hex: "#f5f5f5",
+         rgb: "rgb(245,245,245)",
+         hsl: "hsl(0,0%,96.1%)",
+         oklch: "oklch(0.97,0.00,0)",
       },
       {
          scale: 200,
-         hex: '#e5e5e5',
-         rgb: 'rgb(229,229,229)',
-         hsl: 'hsl(0,0%,89.8%)',
+         hex: "#e5e5e5",
+         rgb: "rgb(229,229,229)",
+         hsl: "hsl(0,0%,89.8%)",
+         oklch: "oklch(0.92,0.00,0)",
       },
       {
          scale: 300,
-         hex: '#d4d4d4',
-         rgb: 'rgb(212,212,212)',
-         hsl: 'hsl(0,0%,83.1%)',
+         hex: "#d4d4d4",
+         rgb: "rgb(212,212,212)",
+         hsl: "hsl(0,0%,83.1%)",
+         oklch: "oklch(0.87,0.00,0)",
       },
       {
          scale: 400,
-         hex: '#a3a3a3',
-         rgb: 'rgb(163,163,163)',
-         hsl: 'hsl(0,0%,63.9%)',
+         hex: "#a3a3a3",
+         rgb: "rgb(163,163,163)",
+         hsl: "hsl(0,0%,63.9%)",
+         oklch: "oklch(0.72,0.00,0)",
       },
       {
          scale: 500,
-         hex: '#737373',
-         rgb: 'rgb(115,115,115)',
-         hsl: 'hsl(0,0%,45.1%)',
+         hex: "#737373",
+         rgb: "rgb(115,115,115)",
+         hsl: "hsl(0,0%,45.1%)",
+         oklch: "oklch(0.56,0.00,0)",
       },
       {
          scale: 600,
-         hex: '#525252',
-         rgb: 'rgb(82,82,82)',
-         hsl: 'hsl(0,0%,32.2%)',
+         hex: "#525252",
+         rgb: "rgb(82,82,82)",
+         hsl: "hsl(0,0%,32.2%)",
+         oklch: "oklch(0.44,0.00,0)",
       },
       {
          scale: 700,
-         hex: '#404040',
-         rgb: 'rgb(64,64,64)',
-         hsl: 'hsl(0,0%,25.1%)',
+         hex: "#404040",
+         rgb: "rgb(64,64,64)",
+         hsl: "hsl(0,0%,25.1%)",
+         oklch: "oklch(0.37,0.00,0)",
       },
       {
          scale: 800,
-         hex: '#262626',
-         rgb: 'rgb(38,38,38)',
-         hsl: 'hsl(0,0%,14.9%)',
+         hex: "#262626",
+         rgb: "rgb(38,38,38)",
+         hsl: "hsl(0,0%,14.9%)",
+         oklch: "oklch(0.27,0.00,0)",
       },
       {
          scale: 900,
-         hex: '#171717',
-         rgb: 'rgb(23,23,23)',
-         hsl: 'hsl(0,0%,9%)',
+         hex: "#171717",
+         rgb: "rgb(23,23,23)",
+         hsl: "hsl(0,0%,9%)",
+         oklch: "oklch(0.20,0.00,0)",
       },
       {
          scale: 950,
-         hex: '#0a0a0a',
-         rgb: 'rgb(10,10,10)',
-         hsl: 'hsl(0,0%,3.9%)',
+         hex: "#0a0a0a",
+         rgb: "rgb(10,10,10)",
+         hsl: "hsl(0,0%,3.9%)",
+         oklch: "oklch(0.14,0.00,0)",
       },
    ],
    stone: [
       {
          scale: 50,
-         hex: '#fafaf9',
-         rgb: 'rgb(250,250,249)',
-         hsl: 'hsl(60,9.1%,97.8%)',
+         hex: "#fafaf9",
+         rgb: "rgb(250,250,249)",
+         hsl: "hsl(60,9.1%,97.8%)",
+         oklch: "oklch(0.98,0.00,106)",
       },
       {
          scale: 100,
-         hex: '#f5f5f4',
-         rgb: 'rgb(245,245,244)',
-         hsl: 'hsl(60,4.8%,95.9%)',
+         hex: "#f5f5f4",
+         rgb: "rgb(245,245,244)",
+         hsl: "hsl(60,4.8%,95.9%)",
+         oklch: "oklch(0.97,0.00,106)",
       },
       {
          scale: 200,
-         hex: '#e7e5e4',
-         rgb: 'rgb(231,229,228)',
-         hsl: 'hsl(20,5.9%,90%)',
+         hex: "#e7e5e4",
+         rgb: "rgb(231,229,228)",
+         hsl: "hsl(20,5.9%,90%)",
+         oklch: "oklch(0.92,0.00,49)",
       },
       {
          scale: 300,
-         hex: '#d6d3d1',
-         rgb: 'rgb(214,211,209)',
-         hsl: 'hsl(24,5.7%,82.9%)',
+         hex: "#d6d3d1",
+         rgb: "rgb(214,211,209)",
+         hsl: "hsl(24,5.7%,82.9%)",
+         oklch: "oklch(0.87,0.00,56)",
       },
       {
          scale: 400,
-         hex: '#a8a29e',
-         rgb: 'rgb(168,162,158)',
-         hsl: 'hsl(24,5.4%,63.9%)',
+         hex: "#a8a29e",
+         rgb: "rgb(168,162,158)",
+         hsl: "hsl(24,5.4%,63.9%)",
+         oklch: "oklch(0.72,0.01,56)",
       },
       {
          scale: 500,
-         hex: '#78716c',
-         rgb: 'rgb(120,113,108)',
-         hsl: 'hsl(25,5.3%,44.7%)',
+         hex: "#78716c",
+         rgb: "rgb(120,113,108)",
+         hsl: "hsl(25,5.3%,44.7%)",
+         oklch: "oklch(0.55,0.01,58)",
       },
       {
          scale: 600,
-         hex: '#57534e',
-         rgb: 'rgb(87,83,78)',
-         hsl: 'hsl(33.3,5.5%,32.4%)',
+         hex: "#57534e",
+         rgb: "rgb(87,83,78)",
+         hsl: "hsl(33.3,5.5%,32.4%)",
+         oklch: "oklch(0.44,0.01,74)",
       },
       {
          scale: 700,
-         hex: '#44403c',
-         rgb: 'rgb(68,64,60)',
-         hsl: 'hsl(30,6.3%,25.1%)',
+         hex: "#44403c",
+         rgb: "rgb(68,64,60)",
+         hsl: "hsl(30,6.3%,25.1%)",
+         oklch: "oklch(0.37,0.01,68)",
       },
       {
          scale: 800,
-         hex: '#292524',
-         rgb: 'rgb(41,37,36)',
-         hsl: 'hsl(12,6.5%,15.1%)',
+         hex: "#292524",
+         rgb: "rgb(41,37,36)",
+         hsl: "hsl(12,6.5%,15.1%)",
+         oklch: "oklch(0.27,0.01,34)",
       },
       {
          scale: 900,
-         hex: '#1c1917',
-         rgb: 'rgb(28,25,23)',
-         hsl: 'hsl(24,9.8%,10%)',
+         hex: "#1c1917",
+         rgb: "rgb(28,25,23)",
+         hsl: "hsl(24,9.8%,10%)",
+         oklch: "oklch(0.22,0.01,56)",
       },
       {
          scale: 950,
-         hex: '#0c0a09',
-         rgb: 'rgb(12,10,9)',
-         hsl: 'hsl(20,14.3%,4.1%)',
+         hex: "#0c0a09",
+         rgb: "rgb(12,10,9)",
+         hsl: "hsl(20,14.3%,4.1%)",
+         oklch: "oklch(0.15,0.00,49)",
       },
    ],
    red: [
       {
          scale: 50,
-         hex: '#fef2f2',
-         rgb: 'rgb(254,242,242)',
-         hsl: 'hsl(0,85.7%,97.3%)',
+         hex: "#fef2f2",
+         rgb: "rgb(254,242,242)",
+         hsl: "hsl(0,85.7%,97.3%)",
+         oklch: "oklch(0.97,0.01,17)",
       },
       {
          scale: 100,
-         hex: '#fee2e2',
-         rgb: 'rgb(254,226,226)',
-         hsl: 'hsl(0,93.3%,94.1%)',
+         hex: "#fee2e2",
+         rgb: "rgb(254,226,226)",
+         hsl: "hsl(0,93.3%,94.1%)",
+         oklch: "oklch(0.94,0.03,18)",
       },
       {
          scale: 200,
-         hex: '#fecaca',
-         rgb: 'rgb(254,202,202)',
-         hsl: 'hsl(0,96.3%,89.4%)',
+         hex: "#fecaca",
+         rgb: "rgb(254,202,202)",
+         hsl: "hsl(0,96.3%,89.4%)",
+         oklch: "oklch(0.88,0.06,18)",
       },
       {
          scale: 300,
-         hex: '#fca5a5',
-         rgb: 'rgb(252,165,165)',
-         hsl: 'hsl(0,93.5%,81.8%)',
+         hex: "#fca5a5",
+         rgb: "rgb(252,165,165)",
+         hsl: "hsl(0,93.5%,81.8%)",
+         oklch: "oklch(0.81,0.10,20)",
       },
       {
          scale: 400,
-         hex: '#f87171',
-         rgb: 'rgb(248,113,113)',
-         hsl: 'hsl(0,90.6%,70.8%)',
+         hex: "#f87171",
+         rgb: "rgb(248,113,113)",
+         hsl: "hsl(0,90.6%,70.8%)",
+         oklch: "oklch(0.71,0.17,22)",
       },
       {
          scale: 500,
-         hex: '#ef4444',
-         rgb: 'rgb(239,68,68)',
-         hsl: 'hsl(0,84.2%,60.2%)',
+         hex: "#ef4444",
+         rgb: "rgb(239,68,68)",
+         hsl: "hsl(0,84.2%,60.2%)",
+         oklch: "oklch(0.64,0.21,25)",
       },
       {
          scale: 600,
-         hex: '#dc2626',
-         rgb: 'rgb(220,38,38)',
-         hsl: 'hsl(0,72.2%,50.6%)',
+         hex: "#dc2626",
+         rgb: "rgb(220,38,38)",
+         hsl: "hsl(0,72.2%,50.6%)",
+         oklch: "oklch(0.58,0.22,27)",
       },
       {
          scale: 700,
-         hex: '#b91c1c',
-         rgb: 'rgb(185,28,28)',
-         hsl: 'hsl(0,73.7%,41.8%)',
+         hex: "#b91c1c",
+         rgb: "rgb(185,28,28)",
+         hsl: "hsl(0,73.7%,41.8%)",
+         oklch: "oklch(0.51,0.19,28)",
       },
       {
          scale: 800,
-         hex: '#991b1b',
-         rgb: 'rgb(153,27,27)',
-         hsl: 'hsl(0,70%,35.3%)',
+         hex: "#991b1b",
+         rgb: "rgb(153,27,27)",
+         hsl: "hsl(0,70%,35.3%)",
+         oklch: "oklch(0.44,0.16,27)",
       },
       {
          scale: 900,
-         hex: '#7f1d1d',
-         rgb: 'rgb(127,29,29)',
-         hsl: 'hsl(0,62.8%,30.6%)',
+         hex: "#7f1d1d",
+         rgb: "rgb(127,29,29)",
+         hsl: "hsl(0,62.8%,30.6%)",
+         oklch: "oklch(0.40,0.13,26)",
       },
       {
          scale: 950,
-         hex: '#450a0a',
-         rgb: 'rgb(69,10,10)',
-         hsl: 'hsl(0,74.7%,15.5%)',
+         hex: "#450a0a",
+         rgb: "rgb(69,10,10)",
+         hsl: "hsl(0,74.7%,15.5%)",
+         oklch: "oklch(0.26,0.09,26)",
       },
    ],
    orange: [
       {
          scale: 50,
-         hex: '#fff7ed',
-         rgb: 'rgb(255,247,237)',
-         hsl: 'hsl(33.3,100%,96.5%)',
+         hex: "#fff7ed",
+         rgb: "rgb(255,247,237)",
+         hsl: "hsl(33.3,100%,96.5%)",
+         oklch: "oklch(0.98,0.02,74)",
       },
       {
          scale: 100,
-         hex: '#ffedd5',
-         rgb: 'rgb(255,237,213)',
-         hsl: 'hsl(34.3,100%,91.8%)',
+         hex: "#ffedd5",
+         rgb: "rgb(255,237,213)",
+         hsl: "hsl(34.3,100%,91.8%)",
+         oklch: "oklch(0.95,0.04,75)",
       },
       {
          scale: 200,
-         hex: '#fed7aa',
-         rgb: 'rgb(254,215,170)',
-         hsl: 'hsl(32.1,97.7%,83.1%)',
+         hex: "#fed7aa",
+         rgb: "rgb(254,215,170)",
+         hsl: "hsl(32.1,97.7%,83.1%)",
+         oklch: "oklch(0.90,0.07,71)",
       },
       {
          scale: 300,
-         hex: '#fdba74',
-         rgb: 'rgb(253,186,116)',
-         hsl: 'hsl(30.7,97.2%,72.4%)',
+         hex: "#fdba74",
+         rgb: "rgb(253,186,116)",
+         hsl: "hsl(30.7,97.2%,72.4%)",
+         oklch: "oklch(0.84,0.12,66)",
       },
       {
          scale: 400,
-         hex: '#fb923c',
-         rgb: 'rgb(251,146,60)',
-         hsl: 'hsl(27,96%,61%)',
+         hex: "#fb923c",
+         rgb: "rgb(251,146,60)",
+         hsl: "hsl(27,96%,61%)",
+         oklch: "oklch(0.76,0.16,56)",
       },
       {
          scale: 500,
-         hex: '#f97316',
-         rgb: 'rgb(249,115,22)',
-         hsl: 'hsl(24.6,95%,53.1%)',
+         hex: "#f97316",
+         rgb: "rgb(249,115,22)",
+         hsl: "hsl(24.6,95%,53.1%)",
+         oklch: "oklch(0.70,0.19,48)",
       },
       {
          scale: 600,
-         hex: '#ea580c',
-         rgb: 'rgb(234,88,12)',
-         hsl: 'hsl(20.5,90.2%,48.2%)',
+         hex: "#ea580c",
+         rgb: "rgb(234,88,12)",
+         hsl: "hsl(20.5,90.2%,48.2%)",
+         oklch: "oklch(0.65,0.19,41)",
       },
       {
          scale: 700,
-         hex: '#c2410c',
-         rgb: 'rgb(194,65,12)',
-         hsl: 'hsl(17.5,88.3%,40.4%)',
+         hex: "#c2410c",
+         rgb: "rgb(194,65,12)",
+         hsl: "hsl(17.5,88.3%,40.4%)",
+         oklch: "oklch(0.55,0.17,38)",
       },
       {
          scale: 800,
-         hex: '#9a3412',
-         rgb: 'rgb(154,52,18)',
-         hsl: 'hsl(15,79.1%,33.7%)',
+         hex: "#9a3412",
+         rgb: "rgb(154,52,18)",
+         hsl: "hsl(15,79.1%,33.7%)",
+         oklch: "oklch(0.47,0.14,37)",
       },
       {
          scale: 900,
-         hex: '#7c2d12',
-         rgb: 'rgb(124,45,18)',
-         hsl: 'hsl(15.3,74.6%,27.8%)',
+         hex: "#7c2d12",
+         rgb: "rgb(124,45,18)",
+         hsl: "hsl(15.3,74.6%,27.8%)",
+         oklch: "oklch(0.41,0.12,38)",
       },
       {
          scale: 950,
-         hex: '#431407',
-         rgb: 'rgb(67,20,7)',
-         hsl: 'hsl(13,81.1%,14.5%)',
+         hex: "#431407",
+         rgb: "rgb(67,20,7)",
+         hsl: "hsl(13,81.1%,14.5%)",
+         oklch: "oklch(0.27,0.08,36)",
       },
    ],
    amber: [
       {
          scale: 50,
-         hex: '#fffbeb',
-         rgb: 'rgb(255,251,235)',
-         hsl: 'hsl(48,100%,96.1%)',
+         hex: "#fffbeb",
+         rgb: "rgb(255,251,235)",
+         hsl: "hsl(48,100%,96.1%)",
+         oklch: "oklch(0.99,0.02,95)",
       },
       {
          scale: 100,
-         hex: '#fef3c7',
-         rgb: 'rgb(254,243,199)',
-         hsl: 'hsl(48,96.5%,88.8%)',
+         hex: "#fef3c7",
+         rgb: "rgb(254,243,199)",
+         hsl: "hsl(48,96.5%,88.8%)",
+         oklch: "oklch(0.96,0.06,96)",
       },
       {
          scale: 200,
-         hex: '#fde68a',
-         rgb: 'rgb(253,230,138)',
-         hsl: 'hsl(48,96.6%,76.7%)',
+         hex: "#fde68a",
+         rgb: "rgb(253,230,138)",
+         hsl: "hsl(48,96.6%,76.7%)",
+         oklch: "oklch(0.92,0.12,96)",
       },
       {
          scale: 300,
-         hex: '#fcd34d',
-         rgb: 'rgb(252,211,77)',
-         hsl: 'hsl(45.9,96.7%,64.5%)',
+         hex: "#fcd34d",
+         rgb: "rgb(252,211,77)",
+         hsl: "hsl(45.9,96.7%,64.5%)",
+         oklch: "oklch(0.88,0.15,92)",
       },
       {
          scale: 400,
-         hex: '#fbbf24',
-         rgb: 'rgb(251,191,36)',
-         hsl: 'hsl(43.3,96.4%,56.3%)',
+         hex: "#fbbf24",
+         rgb: "rgb(251,191,36)",
+         hsl: "hsl(43.3,96.4%,56.3%)",
+         oklch: "oklch(0.84,0.16,84)",
       },
       {
          scale: 500,
-         hex: '#f59e0b',
-         rgb: 'rgb(245,158,11)',
-         hsl: 'hsl(37.7,92.1%,50.2%)',
+         hex: "#f59e0b",
+         rgb: "rgb(245,158,11)",
+         hsl: "hsl(37.7,92.1%,50.2%)",
+         oklch: "oklch(0.77,0.16,70)",
       },
       {
          scale: 600,
-         hex: '#d97706',
-         rgb: 'rgb(217,119,6)',
-         hsl: 'hsl(32.1,94.6%,43.7%)',
+         hex: "#d97706",
+         rgb: "rgb(217,119,6)",
+         hsl: "hsl(32.1,94.6%,43.7%)",
+         oklch: "oklch(0.67,0.16,58)",
       },
       {
          scale: 700,
-         hex: '#b45309',
-         rgb: 'rgb(180,83,9)',
-         hsl: 'hsl(26,90.5%,37.1%)',
+         hex: "#b45309",
+         rgb: "rgb(180,83,9)",
+         hsl: "hsl(26,90.5%,37.1%)",
+         oklch: "oklch(0.56,0.15,49)",
       },
       {
          scale: 800,
-         hex: '#92400e',
-         rgb: 'rgb(146,64,14)',
-         hsl: 'hsl(22.7,82.5%,31.4%)',
+         hex: "#92400e",
+         rgb: "rgb(146,64,14)",
+         hsl: "hsl(22.7,82.5%,31.4%)",
+         oklch: "oklch(0.47,0.12,46)",
       },
       {
          scale: 900,
-         hex: '#78350f',
-         rgb: 'rgb(120,53,15)',
-         hsl: 'hsl(21.7,77.8%,26.5%)',
+         hex: "#78350f",
+         rgb: "rgb(120,53,15)",
+         hsl: "hsl(21.7,77.8%,26.5%)",
+         oklch: "oklch(0.41,0.11,46)",
       },
       {
          scale: 950,
-         hex: '#451a03',
-         rgb: 'rgb(69,26,3)',
-         hsl: 'hsl(20.9,91.7%,14.1%)',
+         hex: "#451a03",
+         rgb: "rgb(69,26,3)",
+         hsl: "hsl(20.9,91.7%,14.1%)",
+         oklch: "oklch(0.28,0.07,46)",
       },
    ],
    yellow: [
       {
          scale: 50,
-         hex: '#fefce8',
-         rgb: 'rgb(254,252,232)',
-         hsl: 'hsl(54.5,91.7%,95.3%)',
+         hex: "#fefce8",
+         rgb: "rgb(254,252,232)",
+         hsl: "hsl(54.5,91.7%,95.3%)",
+         oklch: "oklch(0.99,0.03,102)",
       },
       {
          scale: 100,
-         hex: '#fef9c3',
-         rgb: 'rgb(254,249,195)',
-         hsl: 'hsl(54.9,96.7%,88%)',
+         hex: "#fef9c3",
+         rgb: "rgb(254,249,195)",
+         hsl: "hsl(54.9,96.7%,88%)",
+         oklch: "oklch(0.97,0.07,103)",
       },
       {
          scale: 200,
-         hex: '#fef08a',
-         rgb: 'rgb(254,240,138)',
-         hsl: 'hsl(52.8,98.3%,76.9%)',
+         hex: "#fef08a",
+         rgb: "rgb(254,240,138)",
+         hsl: "hsl(52.8,98.3%,76.9%)",
+         oklch: "oklch(0.95,0.12,102)",
       },
       {
          scale: 300,
-         hex: '#fde047',
-         rgb: 'rgb(253,224,71)',
-         hsl: 'hsl(50.4,97.8%,63.5%)',
+         hex: "#fde047",
+         rgb: "rgb(253,224,71)",
+         hsl: "hsl(50.4,97.8%,63.5%)",
+         oklch: "oklch(0.91,0.17,98)",
       },
       {
          scale: 400,
-         hex: '#facc15',
-         rgb: 'rgb(250,204,21)',
-         hsl: 'hsl(47.9,95.8%,53.1%)',
+         hex: "#facc15",
+         rgb: "rgb(250,204,21)",
+         hsl: "hsl(47.9,95.8%,53.1%)",
+         oklch: "oklch(0.86,0.17,92)",
       },
       {
          scale: 500,
-         hex: '#eab308',
-         rgb: 'rgb(234,179,8)',
-         hsl: 'hsl(45.4,93.4%,47.5%)',
+         hex: "#eab308",
+         rgb: "rgb(234,179,8)",
+         hsl: "hsl(45.4,93.4%,47.5%)",
+         oklch: "oklch(0.80,0.16,86)",
       },
       {
          scale: 600,
-         hex: '#ca8a04',
-         rgb: 'rgb(202,138,4)',
-         hsl: 'hsl(40.6,96.1%,40.4%)',
+         hex: "#ca8a04",
+         rgb: "rgb(202,138,4)",
+         hsl: "hsl(40.6,96.1%,40.4%)",
+         oklch: "oklch(0.68,0.14,76)",
       },
       {
          scale: 700,
-         hex: '#a16207',
-         rgb: 'rgb(161,98,7)',
-         hsl: 'hsl(35.5,91.7%,32.9%)',
+         hex: "#a16207",
+         rgb: "rgb(161,98,7)",
+         hsl: "hsl(35.5,91.7%,32.9%)",
+         oklch: "oklch(0.55,0.12,66)",
       },
       {
          scale: 800,
-         hex: '#854d0e',
-         rgb: 'rgb(133,77,14)',
-         hsl: 'hsl(31.8,81%,28.8%)',
+         hex: "#854d0e",
+         rgb: "rgb(133,77,14)",
+         hsl: "hsl(31.8,81%,28.8%)",
+         oklch: "oklch(0.48,0.10,62)",
       },
       {
          scale: 900,
-         hex: '#713f12',
-         rgb: 'rgb(113,63,18)',
-         hsl: 'hsl(28.4,72.5%,25.7%)',
+         hex: "#713f12",
+         rgb: "rgb(113,63,18)",
+         hsl: "hsl(28.4,72.5%,25.7%)",
+         oklch: "oklch(0.42,0.09,58)",
       },
       {
          scale: 950,
-         hex: '#422006',
-         rgb: 'rgb(66,32,6)',
-         hsl: 'hsl(26,83.3%,14.1%)',
+         hex: "#422006",
+         rgb: "rgb(66,32,6)",
+         hsl: "hsl(26,83.3%,14.1%)",
+         oklch: "oklch(0.29,0.06,54)",
       },
    ],
    lime: [
       {
          scale: 50,
-         hex: '#f7fee7',
-         rgb: 'rgb(247,254,231)',
-         hsl: 'hsl(78.3,92%,95.1%)',
+         hex: "#f7fee7",
+         rgb: "rgb(247,254,231)",
+         hsl: "hsl(78.3,92%,95.1%)",
+         oklch: "oklch(0.99,0.03,121)",
       },
       {
          scale: 100,
-         hex: '#ecfccb',
-         rgb: 'rgb(236,252,203)',
-         hsl: 'hsl(79.6,89.1%,89.2%)',
+         hex: "#ecfccb",
+         rgb: "rgb(236,252,203)",
+         hsl: "hsl(79.6,89.1%,89.2%)",
+         oklch: "oklch(0.97,0.07,122)",
       },
       {
          scale: 200,
-         hex: '#d9f99d',
-         rgb: 'rgb(217,249,157)',
-         hsl: 'hsl(80.9,88.5%,79.6%)',
+         hex: "#d9f99d",
+         rgb: "rgb(217,249,157)",
+         hsl: "hsl(80.9,88.5%,79.6%)",
+         oklch: "oklch(0.94,0.12,124)",
       },
       {
          scale: 300,
-         hex: '#bef264',
-         rgb: 'rgb(190,242,100)',
-         hsl: 'hsl(82,84.5%,67.1%)',
+         hex: "#bef264",
+         rgb: "rgb(190,242,100)",
+         hsl: "hsl(82,84.5%,67.1%)",
+         oklch: "oklch(0.90,0.18,127)",
       },
       {
          scale: 400,
-         hex: '#a3e635',
-         rgb: 'rgb(163,230,53)',
-         hsl: 'hsl(82.7,78%,55.5%)',
+         hex: "#a3e635",
+         rgb: "rgb(163,230,53)",
+         hsl: "hsl(82.7,78%,55.5%)",
+         oklch: "oklch(0.85,0.21,129)",
       },
       {
          scale: 500,
-         hex: '#84cc16',
-         rgb: 'rgb(132,204,22)',
-         hsl: 'hsl(83.7,80.5%,44.3%)',
+         hex: "#84cc16",
+         rgb: "rgb(132,204,22)",
+         hsl: "hsl(83.7,80.5%,44.3%)",
+         oklch: "oklch(0.77,0.20,131)",
       },
       {
          scale: 600,
-         hex: '#65a30d',
-         rgb: 'rgb(101,163,13)',
-         hsl: 'hsl(84.8,85.2%,34.5%)',
+         hex: "#65a30d",
+         rgb: "rgb(101,163,13)",
+         hsl: "hsl(84.8,85.2%,34.5%)",
+         oklch: "oklch(0.65,0.18,132)",
       },
       {
          scale: 700,
-         hex: '#4d7c0f',
-         rgb: 'rgb(77,124,15)',
-         hsl: 'hsl(85.9,78.4%,27.3%)',
+         hex: "#4d7c0f",
+         rgb: "rgb(77,124,15)",
+         hsl: "hsl(85.9,78.4%,27.3%)",
+         oklch: "oklch(0.53,0.14,132)",
       },
       {
          scale: 800,
-         hex: '#3f6212',
-         rgb: 'rgb(63,98,18)',
-         hsl: 'hsl(86.3,69%,22.7%)',
+         hex: "#3f6212",
+         rgb: "rgb(63,98,18)",
+         hsl: "hsl(86.3,69%,22.7%)",
+         oklch: "oklch(0.45,0.11,131)",
       },
       {
          scale: 900,
-         hex: '#365314',
-         rgb: 'rgb(54,83,20)',
-         hsl: 'hsl(87.6,61.2%,20.2%)',
+         hex: "#365314",
+         rgb: "rgb(54,83,20)",
+         hsl: "hsl(87.6,61.2%,20.2%)",
+         oklch: "oklch(0.41,0.10,131)",
       },
       {
          scale: 950,
-         hex: '#1a2e05',
-         rgb: 'rgb(26,46,5)',
-         hsl: 'hsl(89.3,80.4%,10%)',
+         hex: "#1a2e05",
+         rgb: "rgb(26,46,5)",
+         hsl: "hsl(89.3,80.4%,10%)",
+         oklch: "oklch(0.27,0.07,132)",
       },
    ],
    green: [
       {
          scale: 50,
-         hex: '#f0fdf4',
-         rgb: 'rgb(240,253,244)',
-         hsl: 'hsl(138.5,76.5%,96.7%)',
+         hex: "#f0fdf4",
+         rgb: "rgb(240,253,244)",
+         hsl: "hsl(138.5,76.5%,96.7%)",
+         oklch: "oklch(0.98,0.02,156)",
       },
       {
          scale: 100,
-         hex: '#dcfce7',
-         rgb: 'rgb(220,252,231)',
-         hsl: 'hsl(140.6,84.2%,92.5%)',
+         hex: "#dcfce7",
+         rgb: "rgb(220,252,231)",
+         hsl: "hsl(140.6,84.2%,92.5%)",
+         oklch: "oklch(0.96,0.04,157)",
       },
       {
          scale: 200,
-         hex: '#bbf7d0',
-         rgb: 'rgb(187,247,208)',
-         hsl: 'hsl(141,78.9%,85.1%)',
+         hex: "#bbf7d0",
+         rgb: "rgb(187,247,208)",
+         hsl: "hsl(141,78.9%,85.1%)",
+         oklch: "oklch(0.93,0.08,156)",
       },
       {
          scale: 300,
-         hex: '#86efac',
-         rgb: 'rgb(134,239,172)',
-         hsl: 'hsl(141.7,76.6%,73.1%)',
+         hex: "#86efac",
+         rgb: "rgb(134,239,172)",
+         hsl: "hsl(141.7,76.6%,73.1%)",
+         oklch: "oklch(0.87,0.14,154)",
       },
       {
          scale: 400,
-         hex: '#4ade80',
-         rgb: 'rgb(74,222,128)',
-         hsl: 'hsl(141.9,69.2%,58%)',
+         hex: "#4ade80",
+         rgb: "rgb(74,222,128)",
+         hsl: "hsl(141.9,69.2%,58%)",
+         oklch: "oklch(0.80,0.18,152)",
       },
       {
          scale: 500,
-         hex: '#22c55e',
-         rgb: 'rgb(34,197,94)',
-         hsl: 'hsl(142.1,70.6%,45.3%)',
+         hex: "#22c55e",
+         rgb: "rgb(34,197,94)",
+         hsl: "hsl(142.1,70.6%,45.3%)",
+         oklch: "oklch(0.72,0.19,150)",
       },
       {
          scale: 600,
-         hex: '#16a34a',
-         rgb: 'rgb(22,163,74)',
-         hsl: 'hsl(142.1,76.2%,36.3%)',
+         hex: "#16a34a",
+         rgb: "rgb(22,163,74)",
+         hsl: "hsl(142.1,76.2%,36.3%)",
+         oklch: "oklch(0.63,0.17,149)",
       },
       {
          scale: 700,
-         hex: '#15803d',
-         rgb: 'rgb(21,128,61)',
-         hsl: 'hsl(142.4,71.8%,29.2%)',
+         hex: "#15803d",
+         rgb: "rgb(21,128,61)",
+         hsl: "hsl(142.4,71.8%,29.2%)",
+         oklch: "oklch(0.53,0.14,150)",
       },
       {
          scale: 800,
-         hex: '#166534',
-         rgb: 'rgb(22,101,52)',
-         hsl: 'hsl(142.8,64.2%,24.1%)',
+         hex: "#166534",
+         rgb: "rgb(22,101,52)",
+         hsl: "hsl(142.8,64.2%,24.1%)",
+         oklch: "oklch(0.45,0.11,151)",
       },
       {
          scale: 900,
-         hex: '#14532d',
-         rgb: 'rgb(20,83,45)',
-         hsl: 'hsl(143.8,61.2%,20.2%)',
+         hex: "#14532d",
+         rgb: "rgb(20,83,45)",
+         hsl: "hsl(143.8,61.2%,20.2%)",
+         oklch: "oklch(0.39,0.09,153)",
       },
       {
          scale: 950,
-         hex: '#052e16',
-         rgb: 'rgb(5,46,22)',
-         hsl: 'hsl(144.9,80.4%,10%)',
+         hex: "#052e16",
+         rgb: "rgb(5,46,22)",
+         hsl: "hsl(144.9,80.4%,10%)",
+         oklch: "oklch(0.27,0.06,153)",
       },
    ],
    emerald: [
       {
          scale: 50,
-         hex: '#ecfdf5',
-         rgb: 'rgb(236,253,245)',
-         hsl: 'hsl(151.8,81%,95.9%)',
+         hex: "#ecfdf5",
+         rgb: "rgb(236,253,245)",
+         hsl: "hsl(151.8,81%,95.9%)",
+         oklch: "oklch(0.98,0.02,166)",
       },
       {
          scale: 100,
-         hex: '#d1fae5',
-         rgb: 'rgb(209,250,229)',
-         hsl: 'hsl(149.3,80.4%,90%)',
+         hex: "#d1fae5",
+         rgb: "rgb(209,250,229)",
+         hsl: "hsl(149.3,80.4%,90%)",
+         oklch: "oklch(0.95,0.05,163)",
       },
       {
          scale: 200,
-         hex: '#a7f3d0',
-         rgb: 'rgb(167,243,208)',
-         hsl: 'hsl(152.4,76%,80.4%)',
+         hex: "#a7f3d0",
+         rgb: "rgb(167,243,208)",
+         hsl: "hsl(152.4,76%,80.4%)",
+         oklch: "oklch(0.90,0.09,164)",
       },
       {
          scale: 300,
-         hex: '#6ee7b7',
-         rgb: 'rgb(110,231,183)',
-         hsl: 'hsl(156.2,71.6%,66.9%)',
+         hex: "#6ee7b7",
+         rgb: "rgb(110,231,183)",
+         hsl: "hsl(156.2,71.6%,66.9%)",
+         oklch: "oklch(0.85,0.13,165)",
       },
       {
          scale: 400,
-         hex: '#34d399',
-         rgb: 'rgb(52,211,153)',
-         hsl: 'hsl(158.1,64.4%,51.6%)',
+         hex: "#34d399",
+         rgb: "rgb(52,211,153)",
+         hsl: "hsl(158.1,64.4%,51.6%)",
+         oklch: "oklch(0.77,0.15,163)",
       },
       {
          scale: 500,
-         hex: '#10b981',
-         rgb: 'rgb(16,185,129)',
-         hsl: 'hsl(160.1,84.1%,39.4%)',
+         hex: "#10b981",
+         rgb: "rgb(16,185,129)",
+         hsl: "hsl(160.1,84.1%,39.4%)",
+         oklch: "oklch(0.70,0.15,162)",
       },
       {
          scale: 600,
-         hex: '#059669',
-         rgb: 'rgb(5,150,105)',
-         hsl: 'hsl(161.4,93.5%,30.4%)',
+         hex: "#059669",
+         rgb: "rgb(5,150,105)",
+         hsl: "hsl(161.4,93.5%,30.4%)",
+         oklch: "oklch(0.60,0.13,163)",
       },
       {
          scale: 700,
-         hex: '#047857',
-         rgb: 'rgb(4,120,87)',
-         hsl: 'hsl(162.9,93.5%,24.3%)',
+         hex: "#047857",
+         rgb: "rgb(4,120,87)",
+         hsl: "hsl(162.9,93.5%,24.3%)",
+         oklch: "oklch(0.51,0.10,166)",
       },
       {
          scale: 800,
-         hex: '#065f46',
-         rgb: 'rgb(6,95,70)',
-         hsl: 'hsl(163.1,88.1%,19.8%)',
+         hex: "#065f46",
+         rgb: "rgb(6,95,70)",
+         hsl: "hsl(163.1,88.1%,19.8%)",
+         oklch: "oklch(0.43,0.09,167)",
       },
       {
          scale: 900,
-         hex: '#064e3b',
-         rgb: 'rgb(6,78,59)',
-         hsl: 'hsl(164.2,85.7%,16.5%)',
+         hex: "#064e3b",
+         rgb: "rgb(6,78,59)",
+         hsl: "hsl(164.2,85.7%,16.5%)",
+         oklch: "oklch(0.38,0.07,169)",
       },
       {
          scale: 950,
-         hex: '#022c22',
-         rgb: 'rgb(2,44,34)',
-         hsl: 'hsl(165.7,91.3%,9%)',
+         hex: "#022c22",
+         rgb: "rgb(2,44,34)",
+         hsl: "hsl(165.7,91.3%,9%)",
+         oklch: "oklch(0.26,0.05,173)",
       },
    ],
    teal: [
       {
          scale: 50,
-         hex: '#f0fdfa',
-         rgb: 'rgb(240,253,250)',
-         hsl: 'hsl(166.2,76.5%,96.7%)',
+         hex: "#f0fdfa",
+         rgb: "rgb(240,253,250)",
+         hsl: "hsl(166.2,76.5%,96.7%)",
+         oklch: "oklch(0.98,0.01,181)",
       },
       {
          scale: 100,
-         hex: '#ccfbf1',
-         rgb: 'rgb(204,251,241)',
-         hsl: 'hsl(167.2,85.5%,89.2%)',
+         hex: "#ccfbf1",
+         rgb: "rgb(204,251,241)",
+         hsl: "hsl(167.2,85.5%,89.2%)",
+         oklch: "oklch(0.95,0.05,181)",
       },
       {
          scale: 200,
-         hex: '#99f6e4',
-         rgb: 'rgb(153,246,228)',
-         hsl: 'hsl(168.4,83.8%,78.2%)',
+         hex: "#99f6e4",
+         rgb: "rgb(153,246,228)",
+         hsl: "hsl(168.4,83.8%,78.2%)",
+         oklch: "oklch(0.91,0.09,180)",
       },
       {
          scale: 300,
-         hex: '#5eead4',
-         rgb: 'rgb(94,234,212)',
-         hsl: 'hsl(170.6,76.9%,64.3%)',
+         hex: "#5eead4",
+         rgb: "rgb(94,234,212)",
+         hsl: "hsl(170.6,76.9%,64.3%)",
+         oklch: "oklch(0.85,0.13,181)",
       },
       {
          scale: 400,
-         hex: '#2dd4bf',
-         rgb: 'rgb(45,212,191)',
-         hsl: 'hsl(172.5,66%,50.4%)',
+         hex: "#2dd4bf",
+         rgb: "rgb(45,212,191)",
+         hsl: "hsl(172.5,66%,50.4%)",
+         oklch: "oklch(0.78,0.13,182)",
       },
       {
          scale: 500,
-         hex: '#14b8a6',
-         rgb: 'rgb(20,184,166)',
-         hsl: 'hsl(173.4,80.4%,40%)',
+         hex: "#14b8a6",
+         rgb: "rgb(20,184,166)",
+         hsl: "hsl(173.4,80.4%,40%)",
+         oklch: "oklch(0.70,0.12,183)",
       },
       {
          scale: 600,
-         hex: '#0d9488',
-         rgb: 'rgb(13,148,136)',
-         hsl: 'hsl(174.7,83.9%,31.6%)',
+         hex: "#0d9488",
+         rgb: "rgb(13,148,136)",
+         hsl: "hsl(174.7,83.9%,31.6%)",
+         oklch: "oklch(0.60,0.10,185)",
       },
       {
          scale: 700,
-         hex: '#0f766e',
-         rgb: 'rgb(15,118,110)',
-         hsl: 'hsl(175.3,77.4%,26.1%)',
+         hex: "#0f766e",
+         rgb: "rgb(15,118,110)",
+         hsl: "hsl(175.3,77.4%,26.1%)",
+         oklch: "oklch(0.51,0.09,186)",
       },
       {
          scale: 800,
-         hex: '#115e59',
-         rgb: 'rgb(17,94,89)',
-         hsl: 'hsl(176.1,69.4%,21.8%)',
+         hex: "#115e59",
+         rgb: "rgb(17,94,89)",
+         hsl: "hsl(176.1,69.4%,21.8%)",
+         oklch: "oklch(0.44,0.07,188)",
       },
       {
          scale: 900,
-         hex: '#134e4a',
-         rgb: 'rgb(19,78,74)',
-         hsl: 'hsl(175.9,60.8%,19%)',
+         hex: "#134e4a",
+         rgb: "rgb(19,78,74)",
+         hsl: "hsl(175.9,60.8%,19%)",
+         oklch: "oklch(0.39,0.06,188)",
       },
       {
          scale: 950,
-         hex: '#042f2e',
-         rgb: 'rgb(4,47,46)',
-         hsl: 'hsl(178.6,84.3%,10%)',
+         hex: "#042f2e",
+         rgb: "rgb(4,47,46)",
+         hsl: "hsl(178.6,84.3%,10%)",
+         oklch: "oklch(0.28,0.04,193)",
       },
    ],
    cyan: [
       {
          scale: 50,
-         hex: '#ecfeff',
-         rgb: 'rgb(236,254,255)',
-         hsl: 'hsl(183.2,100%,96.3%)',
+         hex: "#ecfeff",
+         rgb: "rgb(236,254,255)",
+         hsl: "hsl(183.2,100%,96.3%)",
+         oklch: "oklch(0.98,0.02,201)",
       },
       {
          scale: 100,
-         hex: '#cffafe',
-         rgb: 'rgb(207,250,254)',
-         hsl: 'hsl(185.1,95.9%,90.4%)',
+         hex: "#cffafe",
+         rgb: "rgb(207,250,254)",
+         hsl: "hsl(185.1,95.9%,90.4%)",
+         oklch: "oklch(0.96,0.04,203)",
       },
       {
          scale: 200,
-         hex: '#a5f3fc',
-         rgb: 'rgb(165,243,252)',
-         hsl: 'hsl(186.2,93.5%,81.8%)',
+         hex: "#a5f3fc",
+         rgb: "rgb(165,243,252)",
+         hsl: "hsl(186.2,93.5%,81.8%)",
+         oklch: "oklch(0.92,0.08,205)",
       },
       {
          scale: 300,
-         hex: '#67e8f9',
-         rgb: 'rgb(103,232,249)',
-         hsl: 'hsl(187,92.4%,69%)',
+         hex: "#67e8f9",
+         rgb: "rgb(103,232,249)",
+         hsl: "hsl(187,92.4%,69%)",
+         oklch: "oklch(0.87,0.12,207)",
       },
       {
          scale: 400,
-         hex: '#22d3ee',
-         rgb: 'rgb(34,211,238)',
-         hsl: 'hsl(187.9,85.7%,53.3%)',
+         hex: "#22d3ee",
+         rgb: "rgb(34,211,238)",
+         hsl: "hsl(187.9,85.7%,53.3%)",
+         oklch: "oklch(0.80,0.13,212)",
       },
       {
          scale: 500,
-         hex: '#06b6d4',
-         rgb: 'rgb(6,182,212)',
-         hsl: 'hsl(188.7,94.5%,42.7%)',
+         hex: "#06b6d4",
+         rgb: "rgb(6,182,212)",
+         hsl: "hsl(188.7,94.5%,42.7%)",
+         oklch: "oklch(0.71,0.13,215)",
       },
       {
          scale: 600,
-         hex: '#0891b2',
-         rgb: 'rgb(8,145,178)',
-         hsl: 'hsl(191.6,91.4%,36.5%)',
+         hex: "#0891b2",
+         rgb: "rgb(8,145,178)",
+         hsl: "hsl(191.6,91.4%,36.5%)",
+         oklch: "oklch(0.61,0.11,222)",
       },
       {
          scale: 700,
-         hex: '#0e7490',
-         rgb: 'rgb(14,116,144)',
-         hsl: 'hsl(192.9,82.3%,31%)',
+         hex: "#0e7490",
+         rgb: "rgb(14,116,144)",
+         hsl: "hsl(192.9,82.3%,31%)",
+         oklch: "oklch(0.52,0.09,223)",
       },
       {
          scale: 800,
-         hex: '#155e75',
-         rgb: 'rgb(21,94,117)',
-         hsl: 'hsl(194.4,69.6%,27.1%)',
+         hex: "#155e75",
+         rgb: "rgb(21,94,117)",
+         hsl: "hsl(194.4,69.6%,27.1%)",
+         oklch: "oklch(0.45,0.08,224)",
       },
       {
          scale: 900,
-         hex: '#164e63',
-         rgb: 'rgb(22,78,99)',
-         hsl: 'hsl(196.4,63.6%,23.7%)',
+         hex: "#164e63",
+         rgb: "rgb(22,78,99)",
+         hsl: "hsl(196.4,63.6%,23.7%)",
+         oklch: "oklch(0.40,0.07,227)",
       },
       {
          scale: 950,
-         hex: '#083344',
-         rgb: 'rgb(8,51,68)',
-         hsl: 'hsl(197,78.9%,14.9%)',
+         hex: "#083344",
+         rgb: "rgb(8,51,68)",
+         hsl: "hsl(197,78.9%,14.9%)",
+         oklch: "oklch(0.30,0.05,230)",
       },
    ],
    sky: [
       {
          scale: 50,
-         hex: '#f0f9ff',
-         rgb: 'rgb(240,249,255)',
-         hsl: 'hsl(204,100%,97.1%)',
+         hex: "#f0f9ff",
+         rgb: "rgb(240,249,255)",
+         hsl: "hsl(204,100%,97.1%)",
+         oklch: "oklch(0.98,0.01,237)",
       },
       {
          scale: 100,
-         hex: '#e0f2fe',
-         rgb: 'rgb(224,242,254)',
-         hsl: 'hsl(204,93.8%,93.7%)',
+         hex: "#e0f2fe",
+         rgb: "rgb(224,242,254)",
+         hsl: "hsl(204,93.8%,93.7%)",
+         oklch: "oklch(0.95,0.03,237)",
       },
       {
          scale: 200,
-         hex: '#bae6fd',
-         rgb: 'rgb(186,230,253)',
-         hsl: 'hsl(200.6,94.4%,86.1%)',
+         hex: "#bae6fd",
+         rgb: "rgb(186,230,253)",
+         hsl: "hsl(200.6,94.4%,86.1%)",
+         oklch: "oklch(0.90,0.06,231)",
       },
       {
          scale: 300,
-         hex: '#7dd3fc',
-         rgb: 'rgb(125,211,252)',
-         hsl: 'hsl(199.4,95.5%,73.9%)',
+         hex: "#7dd3fc",
+         rgb: "rgb(125,211,252)",
+         hsl: "hsl(199.4,95.5%,73.9%)",
+         oklch: "oklch(0.83,0.10,230)",
       },
       {
          scale: 400,
-         hex: '#38bdf8',
-         rgb: 'rgb(56,189,248)',
-         hsl: 'hsl(198.4,93.2%,59.6%)',
+         hex: "#38bdf8",
+         rgb: "rgb(56,189,248)",
+         hsl: "hsl(198.4,93.2%,59.6%)",
+         oklch: "oklch(0.75,0.14,233)",
       },
       {
          scale: 500,
-         hex: '#0ea5e9',
-         rgb: 'rgb(14,165,233)',
-         hsl: 'hsl(198.6,88.7%,48.4%)',
+         hex: "#0ea5e9",
+         rgb: "rgb(14,165,233)",
+         hsl: "hsl(198.6,88.7%,48.4%)",
+         oklch: "oklch(0.68,0.15,237)",
       },
       {
          scale: 600,
-         hex: '#0284c7',
-         rgb: 'rgb(2,132,199)',
-         hsl: 'hsl(200.4,98%,39.4%)',
+         hex: "#0284c7",
+         rgb: "rgb(2,132,199)",
+         hsl: "hsl(200.4,98%,39.4%)",
+         oklch: "oklch(0.59,0.14,242)",
       },
       {
          scale: 700,
-         hex: '#0369a1',
-         rgb: 'rgb(3,105,161)',
-         hsl: 'hsl(201.3,96.3%,32.2%)',
+         hex: "#0369a1",
+         rgb: "rgb(3,105,161)",
+         hsl: "hsl(201.3,96.3%,32.2%)",
+         oklch: "oklch(0.50,0.12,243)",
       },
       {
          scale: 800,
-         hex: '#075985',
-         rgb: 'rgb(7,89,133)',
-         hsl: 'hsl(201,90%,27.5%)',
+         hex: "#075985",
+         rgb: "rgb(7,89,133)",
+         hsl: "hsl(201,90%,27.5%)",
+         oklch: "oklch(0.44,0.10,241)",
       },
       {
          scale: 900,
-         hex: '#0c4a6e',
-         rgb: 'rgb(12,74,110)',
-         hsl: 'hsl(202,80.3%,23.9%)',
+         hex: "#0c4a6e",
+         rgb: "rgb(12,74,110)",
+         hsl: "hsl(202,80.3%,23.9%)",
+         oklch: "oklch(0.39,0.08,241)",
       },
       {
          scale: 950,
-         hex: '#082f49',
-         rgb: 'rgb(8,47,73)',
-         hsl: 'hsl(204,80.2%,15.9%)',
+         hex: "#082f49",
+         rgb: "rgb(8,47,73)",
+         hsl: "hsl(204,80.2%,15.9%)",
+         oklch: "oklch(0.29,0.06,243)",
       },
    ],
    blue: [
       {
          scale: 50,
-         hex: '#eff6ff',
-         rgb: 'rgb(239,246,255)',
-         hsl: 'hsl(213.8,100%,96.9%)',
+         hex: "#eff6ff",
+         rgb: "rgb(239,246,255)",
+         hsl: "hsl(213.8,100%,96.9%)",
+         oklch: "oklch(0.97,0.01,255)",
       },
       {
          scale: 100,
-         hex: '#dbeafe',
-         rgb: 'rgb(219,234,254)',
-         hsl: 'hsl(214.3,94.6%,92.7%)',
+         hex: "#dbeafe",
+         rgb: "rgb(219,234,254)",
+         hsl: "hsl(214.3,94.6%,92.7%)",
+         oklch: "oklch(0.93,0.03,256)",
       },
       {
          scale: 200,
-         hex: '#bfdbfe',
-         rgb: 'rgb(191,219,254)',
-         hsl: 'hsl(213.3,96.9%,87.3%)',
+         hex: "#bfdbfe",
+         rgb: "rgb(191,219,254)",
+         hsl: "hsl(213.3,96.9%,87.3%)",
+         oklch: "oklch(0.88,0.06,254)",
       },
       {
          scale: 300,
-         hex: '#93c5fd',
-         rgb: 'rgb(147,197,253)',
-         hsl: 'hsl(211.7,96.4%,78.4%)',
+         hex: "#93c5fd",
+         rgb: "rgb(147,197,253)",
+         hsl: "hsl(211.7,96.4%,78.4%)",
+         oklch: "oklch(0.81,0.10,252)",
       },
       {
          scale: 400,
-         hex: '#60a5fa',
-         rgb: 'rgb(96,165,250)',
-         hsl: 'hsl(213.1,93.9%,67.8%)',
+         hex: "#60a5fa",
+         rgb: "rgb(96,165,250)",
+         hsl: "hsl(213.1,93.9%,67.8%)",
+         oklch: "oklch(0.71,0.14,255)",
       },
       {
          scale: 500,
-         hex: '#3b82f6',
-         rgb: 'rgb(59,130,246)',
-         hsl: 'hsl(217.2,91.2%,59.8%)',
+         hex: "#3b82f6",
+         rgb: "rgb(59,130,246)",
+         hsl: "hsl(217.2,91.2%,59.8%)",
+         oklch: "oklch(0.62,0.19,260)",
       },
       {
          scale: 600,
-         hex: '#2563eb',
-         rgb: 'rgb(37,99,235)',
-         hsl: 'hsl(221.2,83.2%,53.3%)',
+         hex: "#2563eb",
+         rgb: "rgb(37,99,235)",
+         hsl: "hsl(221.2,83.2%,53.3%)",
+         oklch: "oklch(0.55,0.22,263)",
       },
       {
          scale: 700,
-         hex: '#1d4ed8',
-         rgb: 'rgb(29,78,216)',
-         hsl: 'hsl(224.3,76.3%,48%)',
+         hex: "#1d4ed8",
+         rgb: "rgb(29,78,216)",
+         hsl: "hsl(224.3,76.3%,48%)",
+         oklch: "oklch(0.49,0.22,264)",
       },
       {
          scale: 800,
-         hex: '#1e40af',
-         rgb: 'rgb(30,64,175)',
-         hsl: 'hsl(225.9,70.7%,40.2%)',
+         hex: "#1e40af",
+         rgb: "rgb(30,64,175)",
+         hsl: "hsl(225.9,70.7%,40.2%)",
+         oklch: "oklch(0.42,0.18,266)",
       },
       {
          scale: 900,
-         hex: '#1e3a8a',
-         rgb: 'rgb(30,58,138)',
-         hsl: 'hsl(224.4,64.3%,32.9%)',
+         hex: "#1e3a8a",
+         rgb: "rgb(30,58,138)",
+         hsl: "hsl(224.4,64.3%,32.9%)",
+         oklch: "oklch(0.38,0.14,266)",
       },
       {
          scale: 950,
-         hex: '#172554',
-         rgb: 'rgb(23,37,84)',
-         hsl: 'hsl(226.2,57%,21%)',
+         hex: "#172554",
+         rgb: "rgb(23,37,84)",
+         hsl: "hsl(226.2,57%,21%)",
+         oklch: "oklch(0.28,0.09,268)",
       },
    ],
    indigo: [
       {
          scale: 50,
-         hex: '#eef2ff',
-         rgb: 'rgb(238,242,255)',
-         hsl: 'hsl(225.9,100%,96.7%)',
+         hex: "#eef2ff",
+         rgb: "rgb(238,242,255)",
+         hsl: "hsl(225.9,100%,96.7%)",
+         oklch: "oklch(0.96,0.02,272)",
       },
       {
          scale: 100,
-         hex: '#e0e7ff',
-         rgb: 'rgb(224,231,255)',
-         hsl: 'hsl(226.5,100%,93.9%)',
+         hex: "#e0e7ff",
+         rgb: "rgb(224,231,255)",
+         hsl: "hsl(226.5,100%,93.9%)",
+         oklch: "oklch(0.93,0.03,273)",
       },
       {
          scale: 200,
-         hex: '#c7d2fe',
-         rgb: 'rgb(199,210,254)',
-         hsl: 'hsl(228,96.5%,88.8%)',
+         hex: "#c7d2fe",
+         rgb: "rgb(199,210,254)",
+         hsl: "hsl(228,96.5%,88.8%)",
+         oklch: "oklch(0.87,0.06,274)",
       },
       {
          scale: 300,
-         hex: '#a5b4fc',
-         rgb: 'rgb(165,180,252)',
-         hsl: 'hsl(229.7,93.5%,81.8%)',
+         hex: "#a5b4fc",
+         rgb: "rgb(165,180,252)",
+         hsl: "hsl(229.7,93.5%,81.8%)",
+         oklch: "oklch(0.79,0.10,275)",
       },
       {
          scale: 400,
-         hex: '#818cf8',
-         rgb: 'rgb(129,140,248)',
-         hsl: 'hsl(234.5,89.5%,73.9%)',
+         hex: "#818cf8",
+         rgb: "rgb(129,140,248)",
+         hsl: "hsl(234.5,89.5%,73.9%)",
+         oklch: "oklch(0.68,0.16,277)",
       },
       {
          scale: 500,
-         hex: '#6366f1',
-         rgb: 'rgb(99,102,241)',
-         hsl: 'hsl(238.7,83.5%,66.7%)',
+         hex: "#6366f1",
+         rgb: "rgb(99,102,241)",
+         hsl: "hsl(238.7,83.5%,66.7%)",
+         oklch: "oklch(0.59,0.20,277)",
       },
       {
          scale: 600,
-         hex: '#4f46e5',
-         rgb: 'rgb(79,70,229)',
-         hsl: 'hsl(243.4,75.4%,58.6%)',
+         hex: "#4f46e5",
+         rgb: "rgb(79,70,229)",
+         hsl: "hsl(243.4,75.4%,58.6%)",
+         oklch: "oklch(0.51,0.23,277)",
       },
       {
          scale: 700,
-         hex: '#4338ca',
-         rgb: 'rgb(67,56,202)',
-         hsl: 'hsl(244.5,57.9%,50.6%)',
+         hex: "#4338ca",
+         rgb: "rgb(67,56,202)",
+         hsl: "hsl(244.5,57.9%,50.6%)",
+         oklch: "oklch(0.46,0.21,277)",
       },
       {
          scale: 800,
-         hex: '#3730a3',
-         rgb: 'rgb(55,48,163)',
-         hsl: 'hsl(243.7,54.5%,41.4%)',
+         hex: "#3730a3",
+         rgb: "rgb(55,48,163)",
+         hsl: "hsl(243.7,54.5%,41.4%)",
+         oklch: "oklch(0.40,0.18,277)",
       },
       {
          scale: 900,
-         hex: '#312e81',
-         rgb: 'rgb(49,46,129)',
-         hsl: 'hsl(242.2,47.4%,34.3%)',
+         hex: "#312e81",
+         rgb: "rgb(49,46,129)",
+         hsl: "hsl(242.2,47.4%,34.3%)",
+         oklch: "oklch(0.36,0.14,279)",
       },
       {
          scale: 950,
-         hex: '#1e1b4b',
-         rgb: 'rgb(30,27,75)',
-         hsl: 'hsl(243.8,47.1%,20%)',
+         hex: "#1e1b4b",
+         rgb: "rgb(30,27,75)",
+         hsl: "hsl(243.8,47.1%,20%)",
+         oklch: "oklch(0.26,0.09,281)",
       },
    ],
    violet: [
       {
          scale: 50,
-         hex: '#f5f3ff',
-         rgb: 'rgb(245,243,255)',
-         hsl: 'hsl(250,100%,97.6%)',
+         hex: "#f5f3ff",
+         rgb: "rgb(245,243,255)",
+         hsl: "hsl(250,100%,97.6%)",
+         oklch: "oklch(0.97,0.02,294)",
       },
       {
          scale: 100,
-         hex: '#ede9fe',
-         rgb: 'rgb(237,233,254)',
-         hsl: 'hsl(251.4,91.3%,95.5%)',
+         hex: "#ede9fe",
+         rgb: "rgb(237,233,254)",
+         hsl: "hsl(251.4,91.3%,95.5%)",
+         oklch: "oklch(0.94,0.03,295)",
       },
       {
          scale: 200,
-         hex: '#ddd6fe',
-         rgb: 'rgb(221,214,254)',
-         hsl: 'hsl(250.5,95.2%,91.8%)',
+         hex: "#ddd6fe",
+         rgb: "rgb(221,214,254)",
+         hsl: "hsl(250.5,95.2%,91.8%)",
+         oklch: "oklch(0.89,0.05,293)",
       },
       {
          scale: 300,
-         hex: '#c4b5fd',
-         rgb: 'rgb(196,181,253)',
-         hsl: 'hsl(252.5,94.7%,85.1%)',
+         hex: "#c4b5fd",
+         rgb: "rgb(196,181,253)",
+         hsl: "hsl(252.5,94.7%,85.1%)",
+         oklch: "oklch(0.81,0.10,294)",
       },
       {
          scale: 400,
-         hex: '#a78bfa',
-         rgb: 'rgb(167,139,250)',
-         hsl: 'hsl(255.1,91.7%,76.3%)',
+         hex: "#a78bfa",
+         rgb: "rgb(167,139,250)",
+         hsl: "hsl(255.1,91.7%,76.3%)",
+         oklch: "oklch(0.71,0.16,294)",
       },
       {
          scale: 500,
-         hex: '#8b5cf6',
-         rgb: 'rgb(139,92,246)',
-         hsl: 'hsl(258.3,89.5%,66.3%)',
+         hex: "#8b5cf6",
+         rgb: "rgb(139,92,246)",
+         hsl: "hsl(258.3,89.5%,66.3%)",
+         oklch: "oklch(0.61,0.22,293)",
       },
       {
          scale: 600,
-         hex: '#7c3aed',
-         rgb: 'rgb(124,58,237)',
-         hsl: 'hsl(262.1,83.3%,57.8%)',
+         hex: "#7c3aed",
+         rgb: "rgb(124,58,237)",
+         hsl: "hsl(262.1,83.3%,57.8%)",
+         oklch: "oklch(0.54,0.25,293)",
       },
       {
          scale: 700,
-         hex: '#6d28d9',
-         rgb: 'rgb(109,40,217)',
-         hsl: 'hsl(263.4,70%,50.4%)',
+         hex: "#6d28d9",
+         rgb: "rgb(109,40,217)",
+         hsl: "hsl(263.4,70%,50.4%)",
+         oklch: "oklch(0.49,0.24,293)",
       },
       {
          scale: 800,
-         hex: '#5b21b6',
-         rgb: 'rgb(91,33,182)',
-         hsl: 'hsl(263.4,69.3%,42.2%)',
+         hex: "#5b21b6",
+         rgb: "rgb(91,33,182)",
+         hsl: "hsl(263.4,69.3%,42.2%)",
+         oklch: "oklch(0.43,0.21,293)",
       },
       {
          scale: 900,
-         hex: '#4c1d95',
-         rgb: 'rgb(76,29,149)',
-         hsl: 'hsl(263.5,67.4%,34.9%)',
+         hex: "#4c1d95",
+         rgb: "rgb(76,29,149)",
+         hsl: "hsl(263.5,67.4%,34.9%)",
+         oklch: "oklch(0.38,0.18,294)",
       },
       {
          scale: 950,
-         hex: '#1e1b4b',
-         rgb: 'rgb(46,16,101)',
-         hsl: 'hsl(261.2,72.6%,22.9%)',
+         hex: "#1e1b4b",
+         rgb: "rgb(46,16,101)",
+         hsl: "hsl(261.2,72.6%,22.9%)",
+         oklch: "oklch(0.28,0.14,291)",
       },
    ],
    purple: [
       {
          scale: 50,
-         hex: '#faf5ff',
-         rgb: 'rgb(250,245,255)',
-         hsl: 'hsl(270,100%,98%)',
+         hex: "#faf5ff",
+         rgb: "rgb(250,245,255)",
+         hsl: "hsl(270,100%,98%)",
+         oklch: "oklch(0.98,0.01,308)",
       },
       {
          scale: 100,
-         hex: '#f3e8ff',
-         rgb: 'rgb(243,232,255)',
-         hsl: 'hsl(268.7,100%,95.5%)',
+         hex: "#f3e8ff",
+         rgb: "rgb(243,232,255)",
+         hsl: "hsl(268.7,100%,95.5%)",
+         oklch: "oklch(0.95,0.03,307)",
       },
       {
          scale: 200,
-         hex: '#e9d5ff',
-         rgb: 'rgb(233,213,255)',
-         hsl: 'hsl(268.6,100%,91.8%)',
+         hex: "#e9d5ff",
+         rgb: "rgb(233,213,255)",
+         hsl: "hsl(268.6,100%,91.8%)",
+         oklch: "oklch(0.90,0.06,307)",
       },
       {
          scale: 300,
-         hex: '#d8b4fe',
-         rgb: 'rgb(216,180,254)',
-         hsl: 'hsl(269.2,97.4%,85.1%)',
+         hex: "#d8b4fe",
+         rgb: "rgb(216,180,254)",
+         hsl: "hsl(269.2,97.4%,85.1%)",
+         oklch: "oklch(0.83,0.11,306)",
       },
       {
          scale: 400,
-         hex: '#c084fc',
-         rgb: 'rgb(192,132,252)',
-         hsl: 'hsl(270,95.2%,75.3%)',
+         hex: "#c084fc",
+         rgb: "rgb(192,132,252)",
+         hsl: "hsl(270,95.2%,75.3%)",
+         oklch: "oklch(0.72,0.18,306)",
       },
       {
          scale: 500,
-         hex: '#a855f7',
-         rgb: 'rgb(168,85,247)',
-         hsl: 'hsl(270.7,91%,65.1%)',
+         hex: "#a855f7",
+         rgb: "rgb(168,85,247)",
+         hsl: "hsl(270.7,91%,65.1%)",
+         oklch: "oklch(0.63,0.23,304)",
       },
       {
          scale: 600,
-         hex: '#9333ea',
-         rgb: 'rgb(147,51,234)',
-         hsl: 'hsl(271.5,81.3%,55.9%)',
+         hex: "#9333ea",
+         rgb: "rgb(147,51,234)",
+         hsl: "hsl(271.5,81.3%,55.9%)",
+         oklch: "oklch(0.56,0.25,302)",
       },
       {
          scale: 700,
-         hex: '#7e22ce',
-         rgb: 'rgb(126,34,206)',
-         hsl: 'hsl(272.1,71.7%,47.1%)',
+         hex: "#7e22ce",
+         rgb: "rgb(126,34,206)",
+         hsl: "hsl(272.1,71.7%,47.1%)",
+         oklch: "oklch(0.50,0.24,302)",
       },
       {
          scale: 800,
-         hex: '#6b21a8',
-         rgb: 'rgb(107,33,168)',
-         hsl: 'hsl(272.9,67.2%,39.4%)',
+         hex: "#6b21a8",
+         rgb: "rgb(107,33,168)",
+         hsl: "hsl(272.9,67.2%,39.4%)",
+         oklch: "oklch(0.44,0.20,304)",
       },
       {
          scale: 900,
-         hex: '#581c87',
-         rgb: 'rgb(88,28,135)',
-         hsl: 'hsl(273.6,65.6%,32%)',
+         hex: "#581c87",
+         rgb: "rgb(88,28,135)",
+         hsl: "hsl(273.6,65.6%,32%)",
+         oklch: "oklch(0.38,0.17,305)",
       },
       {
          scale: 950,
-         hex: '#3b0764',
-         rgb: 'rgb(59,7,100)',
-         hsl: 'hsl(273.5,86.9%,21%)',
+         hex: "#3b0764",
+         rgb: "rgb(59,7,100)",
+         hsl: "hsl(273.5,86.9%,21%)",
+         oklch: "oklch(0.29,0.14,303)",
       },
    ],
    fuchsia: [
       {
          scale: 50,
-         hex: '#fdf4ff',
-         rgb: 'rgb(253,244,255)',
-         hsl: 'hsl(289.1,100%,97.8%)',
+         hex: "#fdf4ff",
+         rgb: "rgb(253,244,255)",
+         hsl: "hsl(289.1,100%,97.8%)",
+         oklch: "oklch(0.98,0.02,320)",
       },
       {
          scale: 100,
-         hex: '#fae8ff',
-         rgb: 'rgb(250,232,255)',
-         hsl: 'hsl(287,100%,95.5%)',
+         hex: "#fae8ff",
+         rgb: "rgb(250,232,255)",
+         hsl: "hsl(287,100%,95.5%)",
+         oklch: "oklch(0.95,0.04,319)",
       },
       {
          scale: 200,
-         hex: '#f5d0fe',
-         rgb: 'rgb(245,208,254)',
-         hsl: 'hsl(288.3,95.8%,90.6%)',
+         hex: "#f5d0fe",
+         rgb: "rgb(245,208,254)",
+         hsl: "hsl(288.3,95.8%,90.6%)",
+         oklch: "oklch(0.90,0.07,320)",
       },
       {
          scale: 300,
-         hex: '#f0abfc',
-         rgb: 'rgb(240,171,252)',
-         hsl: 'hsl(291.1,93.1%,82.9%)',
+         hex: "#f0abfc",
+         rgb: "rgb(240,171,252)",
+         hsl: "hsl(291.1,93.1%,82.9%)",
+         oklch: "oklch(0.83,0.13,321)",
       },
       {
          scale: 400,
-         hex: '#e879f9',
-         rgb: 'rgb(232,121,249)',
-         hsl: 'hsl(292,91.4%,72.5%)',
+         hex: "#e879f9",
+         rgb: "rgb(232,121,249)",
+         hsl: "hsl(292,91.4%,72.5%)",
+         oklch: "oklch(0.75,0.21,322)",
       },
       {
          scale: 500,
-         hex: '#d946ef',
-         rgb: 'rgb(217,70,239)',
-         hsl: 'hsl(292.2,84.1%,60.6%)',
+         hex: "#d946ef",
+         rgb: "rgb(217,70,239)",
+         hsl: "hsl(292.2,84.1%,60.6%)",
+         oklch: "oklch(0.67,0.26,322)",
       },
       {
          scale: 600,
-         hex: '#c026d3',
-         rgb: 'rgb(192,38,211)',
-         hsl: 'hsl(293.4,69.5%,48.8%)',
+         hex: "#c026d3",
+         rgb: "rgb(192,38,211)",
+         hsl: "hsl(293.4,69.5%,48.8%)",
+         oklch: "oklch(0.59,0.26,323)",
       },
       {
          scale: 700,
-         hex: '#a21caf',
-         rgb: 'rgb(162,28,175)',
-         hsl: 'hsl(294.7,72.4%,39.8%)',
+         hex: "#a21caf",
+         rgb: "rgb(162,28,175)",
+         hsl: "hsl(294.7,72.4%,39.8%)",
+         oklch: "oklch(0.52,0.23,324)",
       },
       {
          scale: 800,
-         hex: '#86198f',
-         rgb: 'rgb(134,25,143)',
-         hsl: 'hsl(295.4,70.2%,32.9%)',
+         hex: "#86198f",
+         rgb: "rgb(134,25,143)",
+         hsl: "hsl(295.4,70.2%,32.9%)",
+         oklch: "oklch(0.45,0.19,325)",
       },
       {
          scale: 900,
-         hex: '#701a75',
-         rgb: 'rgb(112,26,117)',
-         hsl: 'hsl(296.7,63.6%,28%)',
+         hex: "#701a75",
+         rgb: "rgb(112,26,117)",
+         hsl: "hsl(296.7,63.6%,28%)",
+         oklch: "oklch(0.40,0.16,326)",
       },
       {
          scale: 950,
-         hex: '#4a044e',
-         rgb: 'rgb(74,4,78)',
-         hsl: 'hsl(296.8,90.2%,16.1%)',
+         hex: "#4a044e",
+         rgb: "rgb(74,4,78)",
+         hsl: "hsl(296.8,90.2%,16.1%)",
+         oklch: "oklch(0.29,0.13,326)",
       },
    ],
    pink: [
       {
          scale: 50,
-         hex: '#fdf2f8',
-         rgb: 'rgb(253,242,248)',
-         hsl: 'hsl(327.3,73.3%,97.1%)',
+         hex: "#fdf2f8",
+         rgb: "rgb(253,242,248)",
+         hsl: "hsl(327.3,73.3%,97.1%)",
+         oklch: "oklch(0.97,0.01,343)",
       },
       {
          scale: 100,
-         hex: '#fce7f3',
-         rgb: 'rgb(252,231,243)',
-         hsl: 'hsl(325.7,77.8%,94.7%)',
+         hex: "#fce7f3",
+         rgb: "rgb(252,231,243)",
+         hsl: "hsl(325.7,77.8%,94.7%)",
+         oklch: "oklch(0.95,0.03,342)",
       },
       {
          scale: 200,
-         hex: '#fbcfe8',
-         rgb: 'rgb(251,207,232)',
-         hsl: 'hsl(325.9,84.6%,89.8%)',
+         hex: "#fbcfe8",
+         rgb: "rgb(251,207,232)",
+         hsl: "hsl(325.9,84.6%,89.8%)",
+         oklch: "oklch(0.90,0.06,343)",
       },
       {
          scale: 300,
-         hex: '#f9a8d4',
-         rgb: 'rgb(249,168,212)',
-         hsl: 'hsl(327.4,87.1%,81.8%)',
+         hex: "#f9a8d4",
+         rgb: "rgb(249,168,212)",
+         hsl: "hsl(327.4,87.1%,81.8%)",
+         oklch: "oklch(0.82,0.11,346)",
       },
       {
          scale: 400,
-         hex: '#f472b6',
-         rgb: 'rgb(244,114,182)',
-         hsl: 'hsl(328.6,85.5%,70.2%)',
+         hex: "#f472b6",
+         rgb: "rgb(244,114,182)",
+         hsl: "hsl(328.6,85.5%,70.2%)",
+         oklch: "oklch(0.73,0.18,350)",
       },
       {
          scale: 500,
-         hex: '#ec4899',
-         rgb: 'rgb(236,72,153)',
-         hsl: 'hsl(330.4,81.2%,60.4%)',
+         hex: "#ec4899",
+         rgb: "rgb(236,72,153)",
+         hsl: "hsl(330.4,81.2%,60.4%)",
+         oklch: "oklch(0.66,0.21,354)",
       },
       {
          scale: 600,
-         hex: '#db2777',
-         rgb: 'rgb(219,39,119)',
-         hsl: 'hsl(333.3,71.4%,50.6%)',
+         hex: "#db2777",
+         rgb: "rgb(219,39,119)",
+         hsl: "hsl(333.3,71.4%,50.6%)",
+         oklch: "oklch(0.59,0.22,1)",
       },
       {
          scale: 700,
-         hex: '#be185d',
-         rgb: 'rgb(190,24,93)',
-         hsl: 'hsl(335.1,77.6%,42%)',
+         hex: "#be185d",
+         rgb: "rgb(190,24,93)",
+         hsl: "hsl(335.1,77.6%,42%)",
+         oklch: "oklch(0.52,0.20,4)",
       },
       {
          scale: 800,
-         hex: '#9d174d',
-         rgb: 'rgb(157,23,77)',
-         hsl: 'hsl(335.8,74.4%,35.3%)',
+         hex: "#9d174d",
+         rgb: "rgb(157,23,77)",
+         hsl: "hsl(335.8,74.4%,35.3%)",
+         oklch: "oklch(0.46,0.17,4)",
       },
       {
          scale: 900,
-         hex: '#831843',
-         rgb: 'rgb(131,24,67)',
-         hsl: 'hsl(335.9,69%,30.4%)',
+         hex: "#831843",
+         rgb: "rgb(131,24,67)",
+         hsl: "hsl(335.9,69%,30.4%)",
+         oklch: "oklch(0.41,0.14,2)",
       },
       {
          scale: 950,
-         hex: '#500724',
-         rgb: 'rgb(80,7,36)',
-         hsl: 'hsl(336.2,83.9%,17.1%)',
+         hex: "#500724",
+         rgb: "rgb(80,7,36)",
+         hsl: "hsl(336.2,83.9%,17.1%)",
+         oklch: "oklch(0.28,0.10,4)",
       },
    ],
    rose: [
       {
          scale: 50,
-         hex: '#fff1f2',
-         rgb: 'rgb(255,241,242)',
-         hsl: 'hsl(355.7,100%,97.3%)',
+         hex: "#fff1f2",
+         rgb: "rgb(255,241,242)",
+         hsl: "hsl(355.7,100%,97.3%)",
+         oklch: "oklch(0.97,0.02,12)",
       },
       {
          scale: 100,
-         hex: '#ffe4e6',
-         rgb: 'rgb(255,228,230)',
-         hsl: 'hsl(355.6,100%,94.7%)',
+         hex: "#ffe4e6",
+         rgb: "rgb(255,228,230)",
+         hsl: "hsl(355.6,100%,94.7%)",
+         oklch: "oklch(0.94,0.03,13)",
       },
       {
          scale: 200,
-         hex: '#fecdd3',
-         rgb: 'rgb(254,205,211)',
-         hsl: 'hsl(352.7,96.1%,90%)',
+         hex: "#fecdd3",
+         rgb: "rgb(254,205,211)",
+         hsl: "hsl(352.7,96.1%,90%)",
+         oklch: "oklch(0.89,0.06,10)",
       },
       {
          scale: 300,
-         hex: '#fda4af',
-         rgb: 'rgb(253,164,175)',
-         hsl: 'hsl(352.6,95.7%,81.8%)',
+         hex: "#fda4af",
+         rgb: "rgb(253,164,175)",
+         hsl: "hsl(352.6,95.7%,81.8%)",
+         oklch: "oklch(0.81,0.11,12)",
       },
       {
          scale: 400,
-         hex: '#fb7185',
-         rgb: 'rgb(251,113,133)',
-         hsl: 'hsl(351.3,94.5%,71.4%)',
+         hex: "#fb7185",
+         rgb: "rgb(251,113,133)",
+         hsl: "hsl(351.3,94.5%,71.4%)",
+         oklch: "oklch(0.72,0.17,13)",
       },
       {
          scale: 500,
-         hex: '#f43f5e',
-         rgb: 'rgb(244,63,94)',
-         hsl: 'hsl(349.7,89.2%,60.2%)',
+         hex: "#f43f5e",
+         rgb: "rgb(244,63,94)",
+         hsl: "hsl(349.7,89.2%,60.2%)",
+         oklch: "oklch(0.65,0.22,16)",
       },
       {
          scale: 600,
-         hex: '#e11d48',
-         rgb: 'rgb(225,29,72)',
-         hsl: 'hsl(346.8,77.2%,49.8%)',
+         hex: "#e11d48",
+         rgb: "rgb(225,29,72)",
+         hsl: "hsl(346.8,77.2%,49.8%)",
+         oklch: "oklch(0.59,0.22,18)",
       },
       {
          scale: 700,
-         hex: '#be123c',
-         rgb: 'rgb(190,18,60)',
-         hsl: 'hsl(345.3,82.7%,40.8%)',
+         hex: "#be123c",
+         rgb: "rgb(190,18,60)",
+         hsl: "hsl(345.3,82.7%,40.8%)",
+         oklch: "oklch(0.51,0.20,17)",
       },
       {
          scale: 800,
-         hex: '#9f1239',
-         rgb: 'rgb(159,18,57)',
-         hsl: 'hsl(343.4,79.7%,34.7%)',
+         hex: "#9f1239",
+         rgb: "rgb(159,18,57)",
+         hsl: "hsl(343.4,79.7%,34.7%)",
+         oklch: "oklch(0.45,0.17,14)",
       },
       {
          scale: 900,
-         hex: '#881337',
-         rgb: 'rgb(136,19,55)',
-         hsl: 'hsl(341.5,75.5%,30.4%)',
+         hex: "#881337",
+         rgb: "rgb(136,19,55)",
+         hsl: "hsl(341.5,75.5%,30.4%)",
+         oklch: "oklch(0.41,0.15,10)",
       },
       {
          scale: 950,
-         hex: '#4c0519',
-         rgb: 'rgb(76,5,25)',
-         hsl: 'hsl(343.1,87.7%,15.9%)',
+         hex: "#4c0519",
+         rgb: "rgb(76,5,25)",
+         hsl: "hsl(343.1,87.7%,15.9%)",
+         oklch: "oklch(0.27,0.10,12)",
       },
    ],
 }
 
 export const colorMapping = {
    light: {
-      'background': 'white',
-      'foreground': '{{base}}-950',
-      'card': 'white',
-      'card-foreground': '{{base}}-950',
-      'popover': 'white',
-      'popover-foreground': '{{base}}-950',
-      'primary': '{{base}}-900',
-      'primary-foreground': '{{base}}-50',
-      'secondary': '{{base}}-100',
-      'secondary-foreground': '{{base}}-900',
-      'muted': '{{base}}-100',
-      'muted-foreground': '{{base}}-500',
-      'accent': '{{base}}-100',
-      'accent-foreground': '{{base}}-900',
-      'destructive': 'red-500',
-      'destructive-foreground': '{{base}}-50',
-      'border': '{{base}}-200',
-      'input': '{{base}}-200',
-      'ring': '{{base}}-950',
-      'chart-1': '12 76% 61%',
-      'chart-2': '173 58% 39%',
-      'chart-3': '197 37% 24%',
-      'chart-4': '43 74% 66%',
-      'chart-5': '27 87% 67%',
+      background: "white",
+      foreground: "{{base}}-950",
+      card: "white",
+      "card-foreground": "{{base}}-950",
+      popover: "white",
+      "popover-foreground": "{{base}}-950",
+      primary: "{{base}}-900",
+      "primary-foreground": "{{base}}-50",
+      secondary: "{{base}}-100",
+      "secondary-foreground": "{{base}}-900",
+      muted: "{{base}}-100",
+      "muted-foreground": "{{base}}-500",
+      accent: "{{base}}-100",
+      "accent-foreground": "{{base}}-900",
+      destructive: "red-500",
+      "destructive-foreground": "{{base}}-50",
+      border: "{{base}}-200",
+      input: "{{base}}-200",
+      ring: "{{base}}-950",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%",
    },
    dark: {
-      'background': '{{base}}-950',
-      'foreground': '{{base}}-50',
-      'card': '{{base}}-950',
-      'card-foreground': '{{base}}-50',
-      'popover': '{{base}}-950',
-      'popover-foreground': '{{base}}-50',
-      'primary': '{{base}}-50',
-      'primary-foreground': '{{base}}-900',
-      'secondary': '{{base}}-800',
-      'secondary-foreground': '{{base}}-50',
-      'muted': '{{base}}-800',
-      'muted-foreground': '{{base}}-400',
-      'accent': '{{base}}-800',
-      'accent-foreground': '{{base}}-50',
-      'destructive': 'red-900',
-      'destructive-foreground': '{{base}}-50',
-      'border': '{{base}}-800',
-      'input': '{{base}}-800',
-      'ring': '{{base}}-300',
-      'chart-1': '220 70% 50%',
-      'chart-2': '160 60% 45%',
-      'chart-3': '30 80% 55%',
-      'chart-4': '280 65% 60%',
-      'chart-5': '340 75% 55%',
+      background: "{{base}}-950",
+      foreground: "{{base}}-50",
+      card: "{{base}}-950",
+      "card-foreground": "{{base}}-50",
+      popover: "{{base}}-950",
+      "popover-foreground": "{{base}}-50",
+      primary: "{{base}}-50",
+      "primary-foreground": "{{base}}-900",
+      secondary: "{{base}}-800",
+      "secondary-foreground": "{{base}}-50",
+      muted: "{{base}}-800",
+      "muted-foreground": "{{base}}-400",
+      accent: "{{base}}-800",
+      "accent-foreground": "{{base}}-50",
+      destructive: "red-900",
+      "destructive-foreground": "{{base}}-50",
+      border: "{{base}}-800",
+      input: "{{base}}-800",
+      ring: "{{base}}-300",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%",
    },
 } as const
diff --git a/apps/web/registry/registry-examples.ts b/apps/web/registry/registry-examples.ts
index 6f7c6e03..fbaba24d 100644
--- a/apps/web/registry/registry-examples.ts
+++ b/apps/web/registry/registry-examples.ts
@@ -1,3028 +1,3308 @@
-import type { Registry } from '~/registry/schema'
+import type { Registry } from "nyxb/registry"
 
-export const examples: Registry = [
+export const examples: Registry["items"] = [
    {
-      name: 'accordion-demo',
-      type: 'registry:example',
-      registryDependencies: ['accordion'],
+      name: "accordion-demo",
+      type: "registry:example",
+      registryDependencies: ["accordion"],
       files: [
          {
-            path: 'example/accordion-demo.tsx',
-            type: 'registry:component',
+            path: "examples/accordion-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'alert-demo',
-      type: 'registry:example',
-      registryDependencies: ['alert'],
+      name: "alert-demo",
+      type: "registry:example",
+      registryDependencies: ["alert"],
       files: [
          {
-            path: 'example/alert-demo.tsx',
-            type: 'registry:component',
+            path: "examples/alert-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'alert-destructive',
-      type: 'registry:example',
-      registryDependencies: ['alert'],
+      name: "alert-destructive",
+      type: "registry:example",
+      registryDependencies: ["alert"],
       files: [
          {
-            path: 'example/alert-destructive.tsx',
-            type: 'registry:component',
+            path: "examples/alert-destructive.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'alert-dialog-demo',
-      type: 'registry:example',
-      registryDependencies: ['alert-dialog', 'button'],
+      name: "alert-dialog-demo",
+      type: "registry:example",
+      registryDependencies: ["alert-dialog", "button"],
       files: [
          {
-            path: 'example/alert-dialog-demo.tsx',
-            type: 'registry:component',
+            path: "examples/alert-dialog-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'aspect-ratio-demo',
-      type: 'registry:example',
-      registryDependencies: ['aspect-ratio'],
+      name: "aspect-ratio-demo",
+      type: "registry:example",
+      registryDependencies: ["aspect-ratio"],
       files: [
          {
-            path: 'example/aspect-ratio-demo.tsx',
-            type: 'registry:component',
+            path: "examples/aspect-ratio-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'avatar-demo',
-      type: 'registry:example',
-      registryDependencies: ['avatar'],
+      name: "avatar-demo",
+      type: "registry:example",
+      registryDependencies: ["avatar"],
       files: [
          {
-            path: 'example/avatar-demo.tsx',
-            type: 'registry:component',
+            path: "examples/avatar-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'badge-demo',
-      type: 'registry:example',
-      registryDependencies: ['badge'],
+      name: "badge-demo",
+      type: "registry:example",
+      registryDependencies: ["badge"],
       files: [
          {
-            path: 'example/badge-demo.tsx',
-            type: 'registry:component',
+            path: "examples/badge-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'badge-destructive',
-      type: 'registry:example',
-      registryDependencies: ['badge'],
+      name: "badge-destructive",
+      type: "registry:example",
+      registryDependencies: ["badge"],
       files: [
          {
-            path: 'example/badge-destructive.tsx',
-            type: 'registry:component',
+            path: "examples/badge-destructive.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'badge-outline',
-      type: 'registry:example',
-      registryDependencies: ['badge'],
+      name: "badge-outline",
+      type: "registry:example",
+      registryDependencies: ["badge"],
       files: [
          {
-            path: 'example/badge-outline.tsx',
-            type: 'registry:component',
+            path: "examples/badge-outline.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'badge-secondary',
-      type: 'registry:example',
-      registryDependencies: ['badge'],
+      name: "badge-secondary",
+      type: "registry:example",
+      registryDependencies: ["badge"],
       files: [
          {
-            path: 'example/badge-secondary.tsx',
-            type: 'registry:component',
+            path: "examples/badge-secondary.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'breadcrumb-demo',
-      type: 'registry:example',
-      registryDependencies: ['breadcrumb'],
+      name: "breadcrumb-demo",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb"],
       files: [
          {
-            path: 'example/breadcrumb-demo.tsx',
-            type: 'registry:component',
+            path: "examples/breadcrumb-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'breadcrumb-separator',
-      type: 'registry:example',
-      registryDependencies: ['breadcrumb'],
+      name: "breadcrumb-separator",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb"],
       files: [
          {
-            path: 'example/breadcrumb-separator.tsx',
-            type: 'registry:component',
+            path: "examples/breadcrumb-separator.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'breadcrumb-dropdown',
-      type: 'registry:example',
-      registryDependencies: ['breadcrumb'],
+      name: "breadcrumb-dropdown",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb"],
       files: [
          {
-            path: 'example/breadcrumb-dropdown.tsx',
-            type: 'registry:component',
+            path: "examples/breadcrumb-dropdown.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'breadcrumb-ellipsis',
-      type: 'registry:example',
-      registryDependencies: ['breadcrumb'],
+      name: "breadcrumb-ellipsis",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb"],
       files: [
          {
-            path: 'example/breadcrumb-ellipsis.tsx',
-            type: 'registry:component',
+            path: "examples/breadcrumb-ellipsis.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'breadcrumb-link',
-      type: 'registry:example',
-      registryDependencies: ['breadcrumb'],
+      name: "breadcrumb-link",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb"],
       files: [
          {
-            path: 'example/breadcrumb-link.tsx',
-            type: 'registry:component',
+            path: "examples/breadcrumb-link.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'breadcrumb-responsive',
-      type: 'registry:example',
-      registryDependencies: ['breadcrumb'],
+      name: "breadcrumb-responsive",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb"],
       files: [
          {
-            path: 'example/breadcrumb-responsive.tsx',
-            type: 'registry:component',
+            path: "examples/breadcrumb-responsive.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'button-demo',
-      type: 'registry:example',
-      registryDependencies: ['button'],
+      name: "button-demo",
+      type: "registry:example",
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'example/button-demo.tsx',
-            type: 'registry:component',
+            path: "examples/button-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'button-secondary',
-      type: 'registry:example',
-      registryDependencies: ['button'],
+      name: "button-secondary",
+      type: "registry:example",
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'example/button-secondary.tsx',
-            type: 'registry:component',
+            path: "examples/button-secondary.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'button-destructive',
-      type: 'registry:example',
-      registryDependencies: ['button'],
+      name: "button-destructive",
+      type: "registry:example",
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'example/button-destructive.tsx',
-            type: 'registry:component',
+            path: "examples/button-destructive.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'button-outline',
-      type: 'registry:example',
-      registryDependencies: ['button'],
+      name: "button-outline",
+      type: "registry:example",
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'example/button-outline.tsx',
-            type: 'registry:component',
+            path: "examples/button-outline.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'button-ghost',
-      type: 'registry:example',
-      registryDependencies: ['button'],
+      name: "button-ghost",
+      type: "registry:example",
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'example/button-ghost.tsx',
-            type: 'registry:component',
+            path: "examples/button-ghost.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'button-link',
-      type: 'registry:example',
-      registryDependencies: ['button'],
+      name: "button-link",
+      type: "registry:example",
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'example/button-link.tsx',
-            type: 'registry:component',
+            path: "examples/button-link.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'button-with-icon',
-      type: 'registry:example',
-      registryDependencies: ['button'],
+      name: "button-with-icon",
+      type: "registry:example",
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'example/button-with-icon.tsx',
-            type: 'registry:component',
+            path: "examples/button-with-icon.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'button-loading',
-      type: 'registry:example',
-      registryDependencies: ['button'],
+      name: "button-loading",
+      type: "registry:example",
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'example/button-loading.tsx',
-            type: 'registry:component',
+            path: "examples/button-loading.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'button-icon',
-      type: 'registry:example',
-      registryDependencies: ['button'],
+      name: "button-icon",
+      type: "registry:example",
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'example/button-icon.tsx',
-            type: 'registry:component',
+            path: "examples/button-icon.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'button-as-child',
-      type: 'registry:example',
-      registryDependencies: ['button'],
+      name: "button-as-child",
+      type: "registry:example",
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'example/button-as-child.tsx',
-            type: 'registry:component',
+            path: "examples/button-as-child.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'pulsating-button-demo',
-      type: 'registry:example',
+      name: "pulsating-button-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/pulsating-button-demo.tsx',
-            type: 'registry:component',
+            path: "examples/pulsating-button-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'calendar-demo',
-      type: 'registry:example',
-      registryDependencies: ['calendar'],
+      name: "calendar-demo",
+      type: "registry:example",
+      registryDependencies: ["calendar"],
       files: [
          {
-            path: 'example/calendar-demo.tsx',
-            type: 'registry:component',
+            path: "examples/calendar-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'calendar-form',
-      type: 'registry:example',
-      registryDependencies: ['calendar', 'form', 'popover'],
+      name: "calendar-form",
+      type: "registry:example",
+      registryDependencies: ["calendar", "form", "popover"],
       files: [
          {
-            path: 'example/calendar-form.tsx',
-            type: 'registry:component',
+            path: "examples/calendar-form.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'card-demo',
-      type: 'registry:example',
-      registryDependencies: ['card', 'button', 'switch'],
+      name: "card-demo",
+      type: "registry:example",
+      registryDependencies: ["card", "button", "switch"],
       files: [
          {
-            path: 'example/card-demo.tsx',
-            type: 'registry:component',
+            path: "examples/card-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'card-with-form',
-      type: 'registry:example',
-      registryDependencies: ['button', 'card', 'input', 'label', 'select'],
+      name: "card-with-form",
+      type: "registry:example",
+      registryDependencies: ["button", "card", "input", "label", "select"],
       files: [
          {
-            path: 'example/card-with-form.tsx',
-            type: 'registry:component',
+            path: "examples/card-with-form.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'carousel-demo',
-      type: 'registry:example',
-      registryDependencies: ['carousel'],
+      name: "carousel-demo",
+      type: "registry:example",
+      registryDependencies: ["carousel"],
       files: [
          {
-            path: 'example/carousel-demo.tsx',
-            type: 'registry:component',
+            path: "examples/carousel-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'carousel-size',
-      type: 'registry:example',
-      registryDependencies: ['carousel'],
+      name: "carousel-size",
+      type: "registry:example",
+      registryDependencies: ["carousel"],
       files: [
          {
-            path: 'example/carousel-size.tsx',
-            type: 'registry:component',
+            path: "examples/carousel-size.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'carousel-spacing',
-      type: 'registry:example',
-      registryDependencies: ['carousel'],
+      name: "carousel-spacing",
+      type: "registry:example",
+      registryDependencies: ["carousel"],
       files: [
          {
-            path: 'example/carousel-spacing.tsx',
-            type: 'registry:component',
+            path: "examples/carousel-spacing.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'carousel-orientation',
-      type: 'registry:example',
-      registryDependencies: ['carousel'],
+      name: "carousel-orientation",
+      type: "registry:example",
+      registryDependencies: ["carousel"],
       files: [
          {
-            path: 'example/carousel-orientation.tsx',
-            type: 'registry:component',
+            path: "examples/carousel-orientation.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'carousel-dots',
-      type: 'registry:example',
-      registryDependencies: ['carousel'],
+      name: "carousel-dots",
+      type: "registry:example",
+      registryDependencies: ["carousel"],
       files: [
          {
-            path: 'example/carousel-dots.tsx',
-            type: 'registry:component',
+            path: "examples/carousel-dots.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'carousel-api',
-      type: 'registry:example',
-      registryDependencies: ['carousel'],
+      name: "carousel-api",
+      type: "registry:example",
+      registryDependencies: ["carousel"],
       files: [
          {
-            path: 'example/carousel-api.tsx',
-            type: 'registry:component',
+            path: "examples/carousel-api.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'carousel-plugin',
-      type: 'registry:example',
-      registryDependencies: ['carousel'],
+      name: "carousel-plugin",
+      type: "registry:example",
+      registryDependencies: ["carousel"],
       files: [
          {
-            path: 'example/carousel-plugin.tsx',
-            type: 'registry:component',
+            path: "examples/carousel-plugin.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'checkbox-demo',
-      type: 'registry:example',
-      registryDependencies: ['checkbox'],
+      name: "checkbox-demo",
+      type: "registry:example",
+      registryDependencies: ["checkbox"],
       files: [
          {
-            path: 'example/checkbox-demo.tsx',
-            type: 'registry:component',
+            path: "examples/checkbox-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'checkbox-disabled',
-      type: 'registry:example',
-      registryDependencies: ['checkbox'],
+      name: "checkbox-disabled",
+      type: "registry:example",
+      registryDependencies: ["checkbox"],
       files: [
          {
-            path: 'example/checkbox-disabled.tsx',
-            type: 'registry:component',
+            path: "examples/checkbox-disabled.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'checkbox-form-multiple',
-      type: 'registry:example',
-      registryDependencies: ['checkbox', 'form'],
+      name: "checkbox-form-multiple",
+      type: "registry:example",
+      registryDependencies: ["checkbox", "form"],
       files: [
          {
-            path: 'example/checkbox-form-multiple.tsx',
-            type: 'registry:component',
+            path: "examples/checkbox-form-multiple.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'checkbox-form-single',
-      type: 'registry:example',
-      registryDependencies: ['checkbox', 'form'],
+      name: "checkbox-form-single",
+      type: "registry:example",
+      registryDependencies: ["checkbox", "form"],
       files: [
          {
-            path: 'example/checkbox-form-single.tsx',
-            type: 'registry:component',
+            path: "examples/checkbox-form-single.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'checkbox-with-text',
-      type: 'registry:example',
-      registryDependencies: ['checkbox'],
+      name: "checkbox-with-text",
+      type: "registry:example",
+      registryDependencies: ["checkbox"],
       files: [
          {
-            path: 'example/checkbox-with-text.tsx',
-            type: 'registry:component',
+            path: "examples/checkbox-with-text.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'collapsible-demo',
-      type: 'registry:example',
-      registryDependencies: ['collapsible'],
+      name: "collapsible-demo",
+      type: "registry:example",
+      registryDependencies: ["collapsible"],
       files: [
          {
-            path: 'example/collapsible-demo.tsx',
-            type: 'registry:component',
+            path: "examples/collapsible-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'combobox-demo',
-      type: 'registry:example',
-      registryDependencies: ['command'],
+      name: "combobox-demo",
+      type: "registry:example",
+      registryDependencies: ["command"],
       files: [
          {
-            path: 'example/combobox-demo.tsx',
-            type: 'registry:component',
+            path: "examples/combobox-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'combobox-dropdown-menu',
-      type: 'registry:example',
-      registryDependencies: ['command', 'dropdown-menu', 'button'],
+      name: "combobox-dropdown-menu",
+      type: "registry:example",
+      registryDependencies: ["command", "dropdown-menu", "button"],
       files: [
          {
-            path: 'example/combobox-dropdown-menu.tsx',
-            type: 'registry:component',
+            path: "examples/combobox-dropdown-menu.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'combobox-form',
-      type: 'registry:example',
-      registryDependencies: ['command', 'form'],
+      name: "combobox-form",
+      type: "registry:example",
+      registryDependencies: ["command", "form"],
       files: [
          {
-            path: 'example/combobox-form.tsx',
-            type: 'registry:component',
+            path: "examples/combobox-form.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'combobox-popover',
-      type: 'registry:example',
-      registryDependencies: ['combobox', 'popover'],
+      name: "combobox-popover",
+      type: "registry:example",
+      registryDependencies: ["combobox", "popover"],
       files: [
          {
-            path: 'example/combobox-popover.tsx',
-            type: 'registry:component',
+            path: "examples/combobox-popover.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'combobox-responsive',
-      type: 'registry:example',
-      registryDependencies: ['combobox', 'popover', 'drawer'],
+      name: "combobox-responsive",
+      type: "registry:example",
+      registryDependencies: ["combobox", "popover", "drawer"],
       files: [
          {
-            path: 'example/combobox-responsive.tsx',
-            type: 'registry:component',
+            path: "examples/combobox-responsive.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'command-demo',
-      type: 'registry:example',
-      registryDependencies: ['command'],
+      name: "command-demo",
+      type: "registry:example",
+      registryDependencies: ["command"],
       files: [
          {
-            path: 'example/command-demo.tsx',
-            type: 'registry:component',
+            path: "examples/command-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'command-dialog',
-      type: 'registry:example',
-      registryDependencies: ['command', 'dialog'],
+      name: "command-dialog",
+      type: "registry:example",
+      registryDependencies: ["command", "dialog"],
       files: [
          {
-            path: 'example/command-dialog.tsx',
-            type: 'registry:component',
+            path: "examples/command-dialog.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'context-menu-demo',
-      type: 'registry:example',
-      registryDependencies: ['context-menu'],
+      name: "context-menu-demo",
+      type: "registry:example",
+      registryDependencies: ["context-menu"],
       files: [
          {
-            path: 'example/context-menu-demo.tsx',
-            type: 'registry:component',
+            path: "examples/context-menu-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'data-table-demo',
-      type: 'registry:example',
-      registryDependencies: ['data-table'],
+      name: "data-table-demo",
+      type: "registry:example",
+      registryDependencies: ["data-table"],
       files: [
          {
-            path: 'example/data-table-demo.tsx',
-            type: 'registry:component',
+            path: "examples/data-table-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'date-picker-demo',
-      type: 'registry:example',
-      registryDependencies: ['button', 'calendar', 'popover'],
+      name: "date-picker-demo",
+      type: "registry:example",
+      registryDependencies: ["button", "calendar", "popover"],
       files: [
          {
-            path: 'example/date-picker-demo.tsx',
-            type: 'registry:component',
+            path: "examples/date-picker-demo.tsx",
+            type: "registry:example",
          },
       ],
-      dependencies: ['date-fns'],
+      dependencies: ["date-fns"],
    },
    {
-      name: 'date-picker-form',
-      type: 'registry:example',
-      registryDependencies: ['button', 'calendar', 'form', 'popover'],
+      name: "date-picker-form",
+      type: "registry:example",
+      registryDependencies: ["button", "calendar", "form", "popover"],
       files: [
          {
-            path: 'example/date-picker-form.tsx',
-            type: 'registry:component',
+            path: "examples/date-picker-form.tsx",
+            type: "registry:example",
          },
       ],
-      dependencies: ['date-fns'],
+      dependencies: ["date-fns"],
    },
    {
-      name: 'date-picker-with-presets',
-      type: 'registry:example',
-      registryDependencies: ['button', 'calendar', 'popover', 'select'],
+      name: "date-picker-with-presets",
+      type: "registry:example",
+      registryDependencies: ["button", "calendar", "popover", "select"],
       files: [
          {
-            path: 'example/date-picker-with-presets.tsx',
-            type: 'registry:component',
+            path: "examples/date-picker-with-presets.tsx",
+            type: "registry:example",
          },
       ],
-      dependencies: ['date-fns'],
+      dependencies: ["date-fns"],
    },
    {
-      name: 'date-picker-with-range',
-      type: 'registry:example',
-      registryDependencies: ['button', 'calendar', 'popover'],
+      name: "date-picker-with-range",
+      type: "registry:example",
+      registryDependencies: ["button", "calendar", "popover"],
       files: [
          {
-            path: 'example/date-picker-with-range.tsx',
-            type: 'registry:component',
+            path: "examples/date-picker-with-range.tsx",
+            type: "registry:example",
          },
       ],
-      dependencies: ['date-fns'],
+      dependencies: ["date-fns"],
    },
    {
-      name: 'dialog-demo',
-      type: 'registry:example',
-      registryDependencies: ['dialog'],
+      name: "dialog-demo",
+      type: "registry:example",
+      registryDependencies: ["dialog"],
       files: [
          {
-            path: 'example/dialog-demo.tsx',
-            type: 'registry:component',
+            path: "examples/dialog-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'dialog-close-button',
-      type: 'registry:example',
-      registryDependencies: ['dialog', 'button'],
+      name: "dialog-close-button",
+      type: "registry:example",
+      registryDependencies: ["dialog", "button"],
       files: [
          {
-            path: 'example/dialog-close-button.tsx',
-            type: 'registry:component',
+            path: "examples/dialog-close-button.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'drawer-demo',
-      type: 'registry:example',
-      registryDependencies: ['drawer'],
+      name: "drawer-demo",
+      type: "registry:example",
+      registryDependencies: ["drawer"],
       files: [
          {
-            path: 'example/drawer-demo.tsx',
-            type: 'registry:component',
+            path: "examples/drawer-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'drawer-dialog',
-      type: 'registry:example',
-      registryDependencies: ['drawer', 'dialog'],
+      name: "drawer-dialog",
+      type: "registry:example",
+      registryDependencies: ["drawer", "dialog"],
       files: [
          {
-            path: 'example/drawer-dialog.tsx',
-            type: 'registry:component',
+            path: "examples/drawer-dialog.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'dropdown-menu-demo',
-      type: 'registry:example',
-      registryDependencies: ['dropdown-menu'],
+      name: "dropdown-menu-demo",
+      type: "registry:example",
+      registryDependencies: ["dropdown-menu"],
       files: [
          {
-            path: 'example/dropdown-menu-demo.tsx',
-            type: 'registry:component',
+            path: "examples/dropdown-menu-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'dropdown-menu-checkboxes',
-      type: 'registry:example',
-      registryDependencies: ['dropdown-menu', 'checkbox'],
+      name: "dropdown-menu-checkboxes",
+      type: "registry:example",
+      registryDependencies: ["dropdown-menu", "checkbox"],
       files: [
          {
-            path: 'example/dropdown-menu-checkboxes.tsx',
-            type: 'registry:component',
+            path: "examples/dropdown-menu-checkboxes.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'dropdown-menu-radio-group',
-      type: 'registry:example',
-      registryDependencies: ['dropdown-menu', 'radio-group'],
+      name: "dropdown-menu-radio-group",
+      type: "registry:example",
+      registryDependencies: ["dropdown-menu", "radio-group"],
       files: [
          {
-            path: 'example/dropdown-menu-radio-group.tsx',
-            type: 'registry:component',
+            path: "examples/dropdown-menu-radio-group.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'hover-card-demo',
-      type: 'registry:example',
-      registryDependencies: ['hover-card'],
+      name: "hover-card-demo",
+      type: "registry:example",
+      registryDependencies: ["hover-card"],
       files: [
          {
-            path: 'example/hover-card-demo.tsx',
-            type: 'registry:component',
+            path: "examples/hover-card-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-demo',
-      type: 'registry:example',
-      registryDependencies: ['input'],
+      name: "input-demo",
+      type: "registry:example",
+      registryDependencies: ["input"],
       files: [
          {
-            path: 'example/input-demo.tsx',
-            type: 'registry:component',
+            path: "examples/input-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-disabled',
-      type: 'registry:example',
-      registryDependencies: ['input'],
+      name: "input-disabled",
+      type: "registry:example",
+      registryDependencies: ["input"],
       files: [
          {
-            path: 'example/input-disabled.tsx',
-            type: 'registry:component',
+            path: "examples/input-disabled.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-file',
-      type: 'registry:example',
-      registryDependencies: ['input'],
+      name: "input-file",
+      type: "registry:example",
+      registryDependencies: ["input"],
       files: [
          {
-            path: 'example/input-file.tsx',
-            type: 'registry:component',
+            path: "examples/input-file.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-form',
-      type: 'registry:example',
-      registryDependencies: ['input', 'button', 'form'],
+      name: "input-form",
+      type: "registry:example",
+      registryDependencies: ["input", "button", "form"],
       files: [
          {
-            path: 'example/input-form.tsx',
-            type: 'registry:component',
+            path: "examples/input-form.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-with-button',
-      type: 'registry:example',
-      registryDependencies: ['input', 'button'],
+      name: "input-with-button",
+      type: "registry:example",
+      registryDependencies: ["input", "button"],
       files: [
          {
-            path: 'example/input-with-button.tsx',
-            type: 'registry:component',
+            path: "examples/input-with-button.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-with-label',
-      type: 'registry:example',
-      registryDependencies: ['input', 'button', 'label'],
+      name: "input-with-label",
+      type: "registry:example",
+      registryDependencies: ["input", "button", "label"],
       files: [
          {
-            path: 'example/input-with-label.tsx',
-            type: 'registry:component',
+            path: "examples/input-with-label.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-with-text',
-      type: 'registry:example',
-      registryDependencies: ['input', 'button', 'label'],
+      name: "input-with-text",
+      type: "registry:example",
+      registryDependencies: ["input", "button", "label"],
       files: [
          {
-            path: 'example/input-with-text.tsx',
-            type: 'registry:component',
+            path: "examples/input-with-text.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-otp-demo',
-      type: 'registry:example',
-      registryDependencies: ['input-otp'],
+      name: "input-otp-demo",
+      type: "registry:example",
+      registryDependencies: ["input-otp"],
       files: [
          {
-            path: 'example/input-otp-demo.tsx',
-            type: 'registry:component',
+            path: "examples/input-otp-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-otp-pattern',
-      type: 'registry:example',
-      registryDependencies: ['input-otp'],
+      name: "input-otp-pattern",
+      type: "registry:example",
+      registryDependencies: ["input-otp"],
       files: [
          {
-            path: 'example/input-otp-pattern.tsx',
-            type: 'registry:component',
+            path: "examples/input-otp-pattern.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-otp-separator',
-      type: 'registry:example',
-      registryDependencies: ['input-otp'],
+      name: "input-otp-separator",
+      type: "registry:example",
+      registryDependencies: ["input-otp"],
       files: [
          {
-            path: 'example/input-otp-separator.tsx',
-            type: 'registry:component',
+            path: "examples/input-otp-separator.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-otp-controlled',
-      type: 'registry:example',
-      registryDependencies: ['input-otp'],
+      name: "input-otp-controlled",
+      type: "registry:example",
+      registryDependencies: ["input-otp"],
       files: [
          {
-            path: 'example/input-otp-controlled.tsx',
-            type: 'registry:component',
+            path: "examples/input-otp-controlled.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-otp-form',
-      type: 'registry:example',
-      registryDependencies: ['input-otp', 'form'],
+      name: "input-otp-form",
+      type: "registry:example",
+      registryDependencies: ["input-otp", "form"],
       files: [
          {
-            path: 'example/input-otp-form.tsx',
-            type: 'registry:component',
+            path: "examples/input-otp-form.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-otp-disabled',
-      type: 'registry:example',
-      registryDependencies: ['input-otp', 'form'],
+      name: "input-otp-disabled",
+      type: "registry:example",
+      registryDependencies: ["input-otp", "form"],
       files: [
          {
-            path: 'example/input-otp-disabled.tsx',
-            type: 'registry:component',
+            path: "examples/input-otp-disabled.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-phone-default',
-      type: 'registry:example',
-      registryDependencies: ['button', 'input', 'popover'],
+      name: "input-phone-default",
+      type: "registry:example",
+      registryDependencies: ["button", "input", "popover"],
       files: [
          {
-            path: 'example/input-phone-default.tsx',
-            type: 'registry:component',
+            path: "examples/input-phone-default.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-phone-demo',
-      type: 'registry:example',
-      registryDependencies: ['button', 'input', 'popover'],
+      name: "input-phone-demo",
+      type: "registry:example",
+      registryDependencies: ["button", "input", "popover"],
       files: [
          {
-            path: 'example/input-phone-demo.tsx',
-            type: 'registry:component',
+            path: "examples/input-phone-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-phone-form',
-      type: 'registry:example',
-      registryDependencies: ['button', 'input', 'popover'],
+      name: "input-phone-form",
+      type: "registry:example",
+      registryDependencies: ["button", "input", "popover"],
       files: [
          {
-            path: 'example/input-phone-form.tsx',
-            type: 'registry:component',
+            path: "examples/input-phone-form.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-phone-initial',
-      type: 'registry:example',
-      registryDependencies: ['button', 'input', 'popover'],
+      name: "input-phone-initial",
+      type: "registry:example",
+      registryDependencies: ["button", "input", "popover"],
       files: [
          {
-            path: 'example/input-phone-initial.tsx',
-            type: 'registry:component',
+            path: "examples/input-phone-initial.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-phone-international',
-      type: 'registry:example',
-      registryDependencies: ['button', 'input', 'popover'],
+      name: "input-phone-international",
+      type: "registry:example",
+      registryDependencies: ["button", "input", "popover"],
       files: [
          {
-            path: 'example/input-phone-international.tsx',
-            type: 'registry:component',
+            path: "examples/input-phone-international.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'input-phone-national',
-      type: 'registry:example',
-      registryDependencies: ['button', 'input', 'popover'],
+      name: "input-phone-national",
+      type: "registry:example",
+      registryDependencies: ["button", "input", "popover"],
       files: [
          {
-            path: 'example/input-phone-national.tsx',
-            type: 'registry:component',
+            path: "examples/input-phone-national.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'label-demo',
-      type: 'registry:example',
-      registryDependencies: ['label'],
+      name: "label-demo",
+      type: "registry:example",
+      registryDependencies: ["label"],
       files: [
          {
-            path: 'example/label-demo.tsx',
-            type: 'registry:component',
+            path: "examples/label-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'menubar-demo',
-      type: 'registry:example',
-      registryDependencies: ['menubar'],
+      name: "menubar-demo",
+      type: "registry:example",
+      registryDependencies: ["menubar"],
       files: [
          {
-            path: 'example/menubar-demo.tsx',
-            type: 'registry:component',
+            path: "examples/menubar-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'navigation-menu-demo',
-      type: 'registry:example',
-      registryDependencies: ['navigation-menu'],
+      name: "navigation-menu-demo",
+      type: "registry:example",
+      registryDependencies: ["navigation-menu"],
       files: [
          {
-            path: 'example/navigation-menu-demo.tsx',
-            type: 'registry:component',
+            path: "examples/navigation-menu-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'pagination-demo',
-      type: 'registry:example',
-      registryDependencies: ['pagination'],
+      name: "pagination-demo",
+      type: "registry:example",
+      registryDependencies: ["pagination"],
       files: [
          {
-            path: 'example/pagination-demo.tsx',
-            type: 'registry:component',
+            path: "examples/pagination-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'popover-demo',
-      type: 'registry:example',
-      registryDependencies: ['popover'],
+      name: "popover-demo",
+      type: "registry:example",
+      registryDependencies: ["popover"],
       files: [
          {
-            path: 'example/popover-demo.tsx',
-            type: 'registry:component',
+            path: "examples/popover-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'progress-demo',
-      type: 'registry:example',
-      registryDependencies: ['progress'],
+      name: "progress-demo",
+      type: "registry:example",
+      registryDependencies: ["progress"],
       files: [
          {
-            path: 'example/progress-demo.tsx',
-            type: 'registry:component',
+            path: "examples/progress-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'radio-group-demo',
-      type: 'registry:example',
-      registryDependencies: ['radio-group'],
+      name: "radio-group-demo",
+      type: "registry:example",
+      registryDependencies: ["radio-group"],
       files: [
          {
-            path: 'example/radio-group-demo.tsx',
-            type: 'registry:component',
+            path: "examples/radio-group-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'radio-group-form',
-      type: 'registry:example',
-      registryDependencies: ['radio-group', 'form'],
+      name: "radio-group-form",
+      type: "registry:example",
+      registryDependencies: ["radio-group", "form"],
       files: [
          {
-            path: 'example/radio-group-form.tsx',
-            type: 'registry:component',
+            path: "examples/radio-group-form.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'resizable-demo',
-      type: 'registry:example',
-      registryDependencies: ['resizable'],
+      name: "resizable-demo",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
       files: [
          {
-            path: 'example/resizable-demo.tsx',
-            type: 'registry:component',
+            path: "examples/resizable-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'resizable-demo-with-handle',
-      type: 'registry:example',
-      registryDependencies: ['resizable'],
+      name: "resizable-demo-with-handle",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
       files: [
          {
-            path: 'example/resizable-demo-with-handle.tsx',
-            type: 'registry:component',
+            path: "examples/resizable-demo-with-handle.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'resizable-vertical',
-      type: 'registry:example',
-      registryDependencies: ['resizable'],
+      name: "resizable-vertical",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
       files: [
          {
-            path: 'example/resizable-vertical.tsx',
-            type: 'registry:component',
+            path: "examples/resizable-vertical.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'resizable-handle',
-      type: 'registry:example',
-      registryDependencies: ['resizable'],
+      name: "resizable-handle",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
       files: [
          {
-            path: 'example/resizable-handle.tsx',
-            type: 'registry:component',
+            path: "examples/resizable-handle.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'scroll-area-demo',
-      type: 'registry:example',
-      registryDependencies: ['scroll-area'],
+      name: "scroll-area-demo",
+      type: "registry:example",
+      registryDependencies: ["scroll-area"],
       files: [
          {
-            path: 'example/scroll-area-demo.tsx',
-            type: 'registry:component',
+            path: "examples/scroll-area-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'scroll-area-horizontal-demo',
-      type: 'registry:example',
-      registryDependencies: ['scroll-area'],
+      name: "scroll-area-horizontal-demo",
+      type: "registry:example",
+      registryDependencies: ["scroll-area"],
       files: [
          {
-            path: 'example/scroll-area-horizontal-demo.tsx',
-            type: 'registry:component',
+            path: "examples/scroll-area-horizontal-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'magic-card-demo',
-      type: 'registry:example',
+      name: "magic-card-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/magic-card-demo.tsx',
-            type: 'registry:component',
+            path: "examples/magic-card-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'neon-gradient-card-demo',
-      type: 'registry:example',
+      name: "neon-gradient-card-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/neon-gradient-card-demo.tsx',
-            type: 'registry:component',
+            path: "examples/neon-gradient-card-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'magic-card-gradient',
-      type: 'registry:example',
+      name: "magic-card-gradient",
+      type: "registry:example",
       files: [
          {
-            path: 'example/magic-card-gradient.tsx',
-            type: 'registry:component',
+            path: "examples/magic-card-gradient.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'meteors-demo',
-      type: 'registry:example',
+      name: "meteors-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/meteors-demo.tsx',
-            type: 'registry:component',
+            path: "examples/meteors-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'grid-pattern-demo',
-      type: 'registry:example',
+      name: "grid-pattern-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/grid-pattern-demo.tsx',
-            type: 'registry:component',
+            path: "examples/grid-pattern-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'grid-pattern-linear-gradient',
-      type: 'registry:example',
+      name: "grid-pattern-linear-gradient",
+      type: "registry:example",
       files: [
          {
-            path: 'example/grid-pattern-linear-gradient.tsx',
-            type: 'registry:component',
+            path: "examples/grid-pattern-linear-gradient.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'grid-pattern-dashed',
-      type: 'registry:example',
+      name: "grid-pattern-dashed",
+      type: "registry:example",
       files: [
          {
-            path: 'example/grid-pattern-dashed.tsx',
-            type: 'registry:component',
+            path: "examples/grid-pattern-dashed.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'dot-pattern-demo',
-      type: 'registry:example',
+      name: "dot-pattern-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/dot-pattern-demo.tsx',
-            type: 'registry:component',
+            path: "examples/dot-pattern-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'dot-pattern-linear-gradient',
-      type: 'registry:example',
+      name: "dot-pattern-linear-gradient",
+      type: "registry:example",
       files: [
          {
-            path: 'example/dot-pattern-linear-gradient.tsx',
-            type: 'registry:component',
+            path: "examples/dot-pattern-linear-gradient.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'marquee-demo',
-      type: 'registry:example',
+      name: "marquee-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/marquee-demo.tsx',
-            type: 'registry:component',
+            path: "examples/marquee-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'marquee-demo-vertical',
-      type: 'registry:example',
+      name: "marquee-demo-vertical",
+      type: "registry:example",
       files: [
          {
-            path: 'example/marquee-demo-vertical.tsx',
-            type: 'registry:component',
+            path: "examples/marquee-demo-vertical.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'marquee-logos',
-      type: 'registry:example',
+      name: "marquee-logos",
+      type: "registry:example",
       files: [
          {
-            path: 'example/marquee-logos.tsx',
-            type: 'registry:component',
+            path: "examples/marquee-logos.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'marquee-3d',
-      type: 'registry:example',
+      name: "marquee-3d",
+      type: "registry:example",
       files: [
          {
-            path: 'example/marquee-3d.tsx',
-            type: 'registry:component',
+            path: "examples/marquee-3d.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'globe-demo',
-      type: 'registry:example',
+      name: "globe-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/globe-demo.tsx',
-            type: 'registry:component',
+            path: "examples/globe-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'tweet-card-demo',
-      type: 'registry:example',
+      name: "tweet-card-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/tweet-card-demo.tsx',
-            type: 'registry:component',
+            path: "examples/tweet-card-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'tweet-card-images',
-      type: 'registry:example',
+      name: "tweet-card-images",
+      type: "registry:example",
       files: [
          {
-            path: 'example/tweet-card-images.tsx',
-            type: 'registry:component',
+            path: "examples/tweet-card-images.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'tweet-card-meta-preview',
-      type: 'registry:example',
+      name: "tweet-card-meta-preview",
+      type: "registry:example",
       files: [
          {
-            path: 'example/tweet-card-meta-preview.tsx',
-            type: 'registry:component',
+            path: "examples/tweet-card-meta-preview.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'shimmer-button-demo',
-      type: 'registry:example',
+      name: "shimmer-button-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/shimmer-button-demo.tsx',
-            type: 'registry:component',
+            path: "examples/shimmer-button-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'hero-video-demo',
-      type: 'registry:example',
+      name: "hero-video-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/hero-video-demo.tsx',
-            type: 'registry:component',
+            path: "examples/hero-video-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'hero-video-youtube',
-      type: 'registry:example',
+      name: "hero-video-youtube",
+      type: "registry:example",
       files: [
          {
-            path: 'example/hero-video-youtube.tsx',
-            type: 'registry:component',
+            path: "examples/hero-video-youtube.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'bento-demo',
-      type: 'registry:example',
+      name: "bento-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/bento-demo.tsx',
-            type: 'registry:component',
+            path: "examples/bento-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'bento-demo-vertical',
-      type: 'registry:example',
+      name: "bento-demo-vertical",
+      type: "registry:example",
       files: [
          {
-            path: 'example/bento-demo-vertical.tsx',
-            type: 'registry:component',
+            path: "examples/bento-demo-vertical.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'number-ticker-demo',
-      type: 'registry:example',
+      name: "number-ticker-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/number-ticker-demo.tsx',
-            type: 'registry:component',
+            path: "examples/number-ticker-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'ripple-demo',
-      type: 'registry:example',
+      name: "ripple-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/ripple-demo.tsx',
-            type: 'registry:component',
+            path: "examples/ripple-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'retro-grid-demo',
-      type: 'registry:example',
+      name: "retro-grid-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/retro-grid-demo.tsx',
-            type: 'registry:component',
+            path: "examples/retro-grid-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-list-demo',
-      type: 'registry:example',
+      name: "animated-list-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-list-demo.tsx',
-            type: 'registry:component',
+            path: "examples/animated-list-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-shiny-text-demo',
-      type: 'registry:example',
+      name: "animated-shiny-text-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-shiny-text-demo.tsx',
-            type: 'registry:component',
+            path: "examples/animated-shiny-text-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'particles-demo',
-      type: 'registry:example',
+      name: "particles-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/particles-demo.tsx',
-            type: 'registry:component',
+            path: "examples/particles-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-grid-pattern-demo',
-      type: 'registry:example',
+      name: "animated-grid-pattern-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-grid-pattern-demo.tsx',
-            type: 'registry:component',
+            path: "examples/animated-grid-pattern-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'border-beam-demo',
-      type: 'registry:example',
+      name: "border-beam-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/border-beam-demo.tsx',
-            type: 'registry:component',
+            path: "examples/border-beam-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-beam-demo',
-      type: 'registry:example',
+      name: "animated-beam-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-beam-demo.tsx',
-            type: 'registry:component',
+            path: "examples/animated-beam-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-beam-unidirectional',
-      type: 'registry:example',
+      name: "animated-beam-unidirectional",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-beam-unidirectional.tsx',
-            type: 'registry:component',
+            path: "examples/animated-beam-unidirectional.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-beam-bidirectional',
-      type: 'registry:example',
+      name: "animated-beam-bidirectional",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-beam-bidirectional.tsx',
-            type: 'registry:component',
+            path: "examples/animated-beam-bidirectional.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-beam-multiple-inputs',
-      type: 'registry:example',
+      name: "animated-beam-multiple-inputs",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-beam-multiple-inputs.tsx',
-            type: 'registry:component',
+            path: "examples/animated-beam-multiple-inputs.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-beam-multiple-outputs',
-      type: 'registry:example',
+      name: "animated-beam-multiple-outputs",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-beam-multiple-outputs.tsx',
-            type: 'registry:component',
+            path: "examples/animated-beam-multiple-outputs.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-feature-card-1',
-      type: 'registry:example',
+      name: "animated-feature-card-1",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-feature-card-1.tsx',
-            type: 'registry:component',
+            path: "examples/animated-feature-card-1.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-feature-card-2',
-      type: 'registry:example',
+      name: "animated-feature-card-2",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-feature-card-2.tsx',
-            type: 'registry:component',
+            path: "examples/animated-feature-card-2.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-feature-card-3',
-      type: 'registry:example',
+      name: "animated-feature-card-3",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-feature-card-3.tsx',
-            type: 'registry:component',
+            path: "examples/animated-feature-card-3.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-feature-card-4',
-      type: 'registry:example',
+      name: "animated-feature-card-4",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-feature-card-4.tsx',
-            type: 'registry:component',
+            path: "examples/animated-feature-card-4.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-feature-card-5',
-      type: 'registry:example',
+      name: "animated-feature-card-5",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-feature-card-5.tsx',
-            type: 'registry:component',
+            path: "examples/animated-feature-card-5.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-feature-card-6',
-      type: 'registry:example',
+      name: "animated-feature-card-6",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-feature-card-6.tsx',
-            type: 'registry:component',
+            path: "examples/animated-feature-card-6.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-feature-card-7',
-      type: 'registry:example',
+      name: "animated-feature-card-7",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-feature-card-7.tsx',
-            type: 'registry:component',
+            path: "examples/animated-feature-card-7.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-feature-card-8',
-      type: 'registry:example',
+      name: "animated-feature-card-8",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-feature-card-8.tsx',
-            type: 'registry:component',
+            path: "examples/animated-feature-card-8.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-feature-card-9',
-      type: 'registry:example',
+      name: "animated-feature-card-9",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-feature-card-9.tsx',
-            type: 'registry:component',
+            path: "examples/animated-feature-card-9.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-feature-card-10',
-      type: 'registry:example',
+      name: "animated-feature-card-10",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-feature-card-10.tsx',
-            type: 'registry:component',
+            path: "examples/animated-feature-card-10.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'text-reveal-demo',
-      type: 'registry:example',
+      name: "text-reveal-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/text-reveal-demo.tsx',
-            type: 'registry:component',
+            path: "examples/text-reveal-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-gradient-text-demo',
-      type: 'registry:example',
+      name: "animated-gradient-text-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-gradient-text-demo.tsx',
-            type: 'registry:component',
+            path: "examples/animated-gradient-text-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'orbiting-circles-demo',
-      type: 'registry:example',
+      name: "orbiting-circles-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/orbiting-circles-demo.tsx',
-            type: 'registry:component',
+            path: "examples/orbiting-circles-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'dock-demo',
-      type: 'registry:example',
+      name: "dock-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/dock-demo.tsx',
-            type: 'registry:component',
+            path: "examples/dock-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'dock-demo-2',
-      type: 'registry:example',
+      name: "dock-demo-2",
+      type: "registry:example",
       files: [
          {
-            path: 'example/dock-demo-2.tsx',
-            type: 'registry:component',
+            path: "examples/dock-demo-2.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'dock-demo-3',
-      type: 'registry:example',
+      name: "dock-demo-3",
+      type: "registry:example",
       files: [
          {
-            path: 'example/dock-demo-3.tsx',
-            type: 'registry:component',
+            path: "examples/dock-demo-3.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'word-rotate-demo',
-      type: 'registry:example',
+      name: "word-rotate-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/word-rotate-demo.tsx',
-            type: 'registry:component',
+            path: "examples/word-rotate-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'avatar-circles-demo',
-      type: 'registry:example',
+      name: "avatar-circles-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/avatar-circles-demo.tsx',
-            type: 'registry:component',
+            path: "examples/avatar-circles-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'word-pull-up-demo',
-      type: 'registry:example',
+      name: "word-pull-up-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/word-pull-up-demo.tsx',
-            type: 'registry:component',
+            path: "examples/word-pull-up-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'typing-animation-demo',
-      type: 'registry:example',
+      name: "typing-animation-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/typing-animation-demo.tsx',
-            type: 'registry:component',
+            path: "examples/typing-animation-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'wavy-text-demo',
-      type: 'registry:example',
+      name: "wavy-text-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/wavy-text-demo.tsx',
-            type: 'registry:component',
+            path: "examples/wavy-text-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'blur-in-demo',
-      type: 'registry:example',
+      name: "blur-in-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/blur-in-demo.tsx',
-            type: 'registry:component',
+            path: "examples/blur-in-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'separate-away-demo',
-      type: 'registry:example',
+      name: "separate-away-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/separate-away-demo.tsx',
-            type: 'registry:component',
+            path: "examples/separate-away-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'scroll-based-velocity-demo',
-      type: 'registry:example',
+      name: "scroll-based-velocity-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/scroll-based-velocity-demo.tsx',
-            type: 'registry:component',
+            path: "examples/scroll-based-velocity-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'letter-pullup-demo',
-      type: 'registry:example',
+      name: "letter-pullup-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/letter-pullup-demo.tsx',
-            type: 'registry:component',
+            path: "examples/letter-pullup-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'flip-text-demo',
-      type: 'registry:example',
+      name: "flip-text-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/flip-text-demo.tsx',
-            type: 'registry:component',
+            path: "examples/flip-text-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'sparkles-text-demo',
-      type: 'registry:example',
+      name: "sparkles-text-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/sparkles-text-demo.tsx',
-            type: 'registry:component',
+            path: "examples/sparkles-text-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'icon-cloud-demo',
-      type: 'registry:example',
+      name: "icon-cloud-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/icon-cloud-demo.tsx',
-            type: 'registry:component',
+            path: "examples/icon-cloud-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'wavy-dot-pattern-demo',
-      type: 'registry:example',
+      name: "gradual-spacing-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/wavy-dot-pattern-demo.tsx',
-            type: 'registry:component',
+            path: "examples/gradual-spacing-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'gradual-spacing-demo',
-      type: 'registry:example',
+      name: "word-fade-in-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/gradual-spacing-demo.tsx',
-            type: 'registry:component',
+            path: "examples/word-fade-in-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'word-fade-in-demo',
-      type: 'registry:example',
+      name: "fade-text-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/word-fade-in-demo.tsx',
-            type: 'registry:component',
+            path: "examples/fade-text-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'fade-text-demo',
-      type: 'registry:example',
+      name: "shiny-button-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/fade-text-demo.tsx',
-            type: 'registry:component',
+            path: "examples/shiny-button-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'shiny-button-demo',
-      type: 'registry:example',
+      name: "box-reveal-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/shiny-button-demo.tsx',
-            type: 'registry:component',
+            path: "examples/box-reveal-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'box-reveal-demo',
-      type: 'registry:example',
+      name: "gauge-circle-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/box-reveal-demo.tsx',
-            type: 'registry:component',
+            path: "examples/gauge-circle-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'gauge-circle-demo',
-      type: 'registry:example',
+      name: "shine-border-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/gauge-circle-demo.tsx',
-            type: 'registry:component',
+            path: "examples/shine-border-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'shine-border-demo',
-      type: 'registry:example',
+      name: "shine-border-demo-2",
+      type: "registry:example",
       files: [
          {
-            path: 'example/shine-border-demo.tsx',
-            type: 'registry:component',
+            path: "examples/shine-border-demo-2.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'shine-border-demo-2',
-      type: 'registry:example',
+      name: "confetti-hover",
+      type: "registry:example",
       files: [
          {
-            path: 'example/shine-border-demo-2.tsx',
-            type: 'registry:component',
+            path: "examples/confetti-hover.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'confetti-hover',
-      type: 'registry:example',
+      name: "confetti-basic-cannon",
+      type: "registry:example",
       files: [
          {
-            path: 'example/confetti-hover.tsx',
-            type: 'registry:component',
+            path: "examples/confetti-basic-cannon.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'confetti-basic-cannon',
-      type: 'registry:example',
+      name: "confetti-random-direction",
+      type: "registry:example",
       files: [
          {
-            path: 'example/confetti-basic-cannon.tsx',
-            type: 'registry:component',
+            path: "examples/confetti-random-direction.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'confetti-random-direction',
-      type: 'registry:example',
+      name: "confetti-fireworks",
+      type: "registry:example",
       files: [
          {
-            path: 'example/confetti-random-direction.tsx',
-            type: 'registry:component',
+            path: "examples/confetti-fireworks.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'confetti-fireworks',
-      type: 'registry:example',
+      name: "confetti-stars",
+      type: "registry:example",
       files: [
          {
-            path: 'example/confetti-fireworks.tsx',
-            type: 'registry:component',
+            path: "examples/confetti-stars.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'confetti-stars',
-      type: 'registry:example',
+      name: "confetti-side-cannons",
+      type: "registry:example",
       files: [
          {
-            path: 'example/confetti-stars.tsx',
-            type: 'registry:component',
+            path: "examples/confetti-side-cannons.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'confetti-side-cannons',
-      type: 'registry:example',
+      name: "confetti-custom-shapes",
+      type: "registry:example",
       files: [
          {
-            path: 'example/confetti-side-cannons.tsx',
-            type: 'registry:component',
+            path: "examples/confetti-custom-shapes.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'confetti-custom-shapes',
-      type: 'registry:example',
+      name: "confetti-emoji",
+      type: "registry:example",
       files: [
          {
-            path: 'example/confetti-custom-shapes.tsx',
-            type: 'registry:component',
+            path: "examples/confetti-emoji.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'confetti-emoji',
-      type: 'registry:example',
+      name: "animated-subscribe-button-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/confetti-emoji.tsx',
-            type: 'registry:component',
+            path: "examples/animated-subscribe-button-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-subscribe-button-demo',
-      type: 'registry:example',
+      name: "mode-toggle",
+      type: "registry:example",
       files: [
          {
-            path: 'example/animated-subscribe-button-demo.tsx',
-            type: 'registry:component',
+            path: "examples/mode-toggle.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'mode-toggle',
-      type: 'registry:example',
+      name: "mode-toggle-group",
+      type: "registry:example",
       files: [
          {
-            path: 'example/mode-toggle.tsx',
-            type: 'registry:example',
+            path: "examples/mode-toggle.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'mode-toggle-group',
-      type: 'registry:example',
+      name: "cool-mode-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/mode-toggle.tsx',
-            type: 'registry:example',
+            path: "examples/cool-mode-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'cool-mode-demo',
-      type: 'registry:example',
+      name: "cool-mode-custom",
+      type: "registry:example",
       files: [
          {
-            path: 'example/cool-mode-demo.tsx',
-            type: 'registry:component',
+            path: "examples/cool-mode-custom.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'cool-mode-custom',
-      type: 'registry:example',
+      name: "timeline-demo",
+      type: "registry:example",
+      registryDependencies: ["timeline"],
       files: [
          {
-            path: 'example/cool-mode-custom.tsx',
-            type: 'registry:component',
+            path: "examples/timeline-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'timeline-demo',
-      type: 'registry:example',
-      registryDependencies: ['timeline'],
+      name: "timeline-right",
+      type: "registry:example",
+      registryDependencies: ["timeline"],
       files: [
          {
-            path: 'example/timeline-demo.tsx',
-            type: 'registry:component',
+            path: "examples/timeline-right.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'timeline-right',
-      type: 'registry:example',
-      registryDependencies: ['timeline'],
+      name: "timeline-alternate",
+      type: "registry:example",
+      registryDependencies: ["timeline"],
       files: [
          {
-            path: 'example/timeline-right.tsx',
-            type: 'registry:component',
+            path: "examples/timeline-alternate.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'timeline-alternate',
-      type: 'registry:example',
-      registryDependencies: ['timeline'],
+      name: "timeline-labels",
+      type: "registry:example",
+      registryDependencies: ["timeline"],
       files: [
          {
-            path: 'example/timeline-alternate.tsx',
-            type: 'registry:component',
+            path: "examples/timeline-labels.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'timeline-labels',
-      type: 'registry:example',
-      registryDependencies: ['timeline'],
+      name: "star-rating-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/timeline-labels.tsx',
-            type: 'registry:component',
+            path: "examples/star-rating-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'star-rating-demo',
-      type: 'registry:example',
+      name: "star-rating-colored",
+      type: "registry:example",
       files: [
          {
-            path: 'example/star-rating-demo.tsx',
-            type: 'registry:component',
+            path: "examples/star-rating-colored.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'star-rating-colored',
-      type: 'registry:example',
+      name: "star-rating-icon",
+      type: "registry:example",
       files: [
          {
-            path: 'example/star-rating-colored.tsx',
-            type: 'registry:component',
+            path: "examples/star-rating-icon.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'star-rating-icon',
-      type: 'registry:example',
+      name: "stepper-demo",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/star-rating-icon.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-demo',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "stepper-custom-styles",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/stepper-demo.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-custom-styles.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-custom-styles',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "stepper-orientation",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/stepper-custom-styles.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-orientation.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-orientation',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "stepper-description",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/stepper-orientation.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-description.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-description',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "stepper-sizes",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/stepper-description.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-sizes.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-sizes',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "stepper-form",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/stepper-sizes.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-form.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-form',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "stepper-variants",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/stepper-form.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-variants.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-variants',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "stepper-custom-icons",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/stepper-variants.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-custom-icons.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-custom-icons',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "stepper-footer-inside",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/stepper-custom-icons.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-footer-inside.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-footer-inside',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "stepper-scroll-tracking",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/stepper-footer-inside.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-scroll-tracking.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-scroll-tracking',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "stepper-clickable-steps",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/stepper-scroll-tracking.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-clickable-steps.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-clickable-steps',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "stepper-optional-steps",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/stepper-clickable-steps.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-optional-steps.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-optional-steps',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "stepper-state",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
       files: [
          {
-            path: 'example/stepper-optional-steps.tsx',
-            type: 'registry:component',
+            path: "examples/stepper-state.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'stepper-state',
-      type: 'registry:example',
-      registryDependencies: ['stepper'],
+      name: "tour-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/stepper-state.tsx',
-            type: 'registry:component',
+            path: "examples/tour-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'tour-demo',
-      type: 'registry:example',
+      name: "toc-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/tour-demo.tsx',
-            type: 'registry:component',
+            path: "examples/toc-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toc-demo',
-      type: 'registry:example',
+      name: "toc-nested",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toc-demo.tsx',
-            type: 'registry:component',
+            path: "examples/toc-nested.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toc-nested',
-      type: 'registry:example',
+      name: "toc-active",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toc-nested.tsx',
-            type: 'registry:component',
+            path: "examples/toc-active.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toc-active',
-      type: 'registry:example',
+      name: "multi-select-basic",
+      type: "registry:example",
+      registryDependencies: ["multi-select"],
       files: [
          {
-            path: 'example/toc-active.tsx',
-            type: 'registry:component',
+            path: "examples/multi-select-basic.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'multi-select-basic',
-      type: 'registry:example',
-      registryDependencies: ['multi-select'],
+      name: "multi-select-filter",
+      type: "registry:example",
+      registryDependencies: ["multi-select"],
       files: [
          {
-            path: 'example/multi-select-basic.tsx',
-            type: 'registry:component',
+            path: "examples/multi-select-filter.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'multi-select-filter',
-      type: 'registry:example',
-      registryDependencies: ['multi-select'],
+      name: "multi-select-controllable-search",
+      type: "registry:example",
+      registryDependencies: ["multi-select"],
       files: [
          {
-            path: 'example/multi-select-filter.tsx',
-            type: 'registry:component',
+            path: "examples/multi-select-controllable-search.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'multi-select-controllable-search',
-      type: 'registry:example',
-      registryDependencies: ['multi-select'],
+      name: "multi-select-input-custom",
+      type: "registry:example",
+      registryDependencies: ["multi-select"],
       files: [
          {
-            path: 'example/multi-select-controllable-search.tsx',
-            type: 'registry:component',
+            path: "examples/multi-select-input-custom.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'multi-select-input-custom',
-      type: 'registry:example',
-      registryDependencies: ['multi-select'],
+      name: "multi-select-limit-count",
+      type: "registry:example",
+      registryDependencies: ["multi-select"],
       files: [
          {
-            path: 'example/multi-select-input-custom.tsx',
-            type: 'registry:component',
+            path: "examples/multi-select-limit-count.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'multi-select-limit-count',
-      type: 'registry:example',
-      registryDependencies: ['multi-select'],
+      name: "multi-select-limit-display-length",
+      type: "registry:example",
+      registryDependencies: ["multi-select"],
       files: [
          {
-            path: 'example/multi-select-limit-count.tsx',
-            type: 'registry:component',
+            path: "examples/multi-select-limit-display-length.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'multi-select-limit-display-length',
-      type: 'registry:example',
-      registryDependencies: ['multi-select'],
+      name: "multi-select-form",
+      type: "registry:example",
+      registryDependencies: ["multi-select"],
       files: [
          {
-            path: 'example/multi-select-limit-display-length.tsx',
-            type: 'registry:component',
+            path: "examples/multi-select-form.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'multi-select-form',
-      type: 'registry:example',
-      registryDependencies: ['multi-select'],
+      name: "scroll-progress-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/multi-select-form.tsx',
-            type: 'registry:component',
+            path: "examples/scroll-progress-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'scroll-progress-demo',
-      type: 'registry:example',
+      name: "video-modal-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/scroll-progress-demo.tsx',
-            type: 'registry:component',
+            path: "examples/video-modal-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'video-modal-demo',
-      type: 'registry:example',
+      name: "scratch-to-reveal-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/video-modal-demo.tsx',
-            type: 'registry:component',
+            path: "examples/scratch-to-reveal-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'scratch-to-reveal-demo',
-      type: 'registry:example',
+      name: "confetti-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/scratch-to-reveal-demo.tsx',
-            type: 'registry:component',
+            path: "examples/confetti-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'confetti-demo',
-      type: 'registry:example',
+      name: "blur-fade-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/confetti-demo.tsx',
-            type: 'registry:component',
+            path: "examples/blur-fade-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'blur-fade-demo',
-      type: 'registry:example',
+      name: "blur-fade-text-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/blur-fade-demo.tsx',
-            type: 'registry:component',
+            path: "examples/blur-fade-text-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'blur-fade-text-demo',
-      type: 'registry:example',
+      name: "file-tree-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/blur-fade-text-demo.tsx',
-            type: 'registry:component',
+            path: "examples/file-tree-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'file-tree-demo',
-      type: 'registry:example',
+      name: "rainbow-button-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/file-tree-demo.tsx',
-            type: 'registry:component',
+            path: "examples/rainbow-button-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'rainbow-button-demo',
-      type: 'registry:example',
+      name: "hero-video-dialog-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/rainbow-button-demo.tsx',
-            type: 'registry:component',
+            path: "examples/hero-video-dialog-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'hero-video-dialog-demo',
-      type: 'registry:example',
+      name: "hero-video-dialog-demo-top-in-bottom-out",
+      type: "registry:example",
       files: [
          {
-            path: 'example/hero-video-dialog-demo.tsx',
-            type: 'registry:component',
+            path: "examples/hero-video-dialog-demo-top-in-bottom-out.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'hero-video-dialog-demo-top-in-bottom-out',
-      type: 'registry:example',
+      name: "flickering-grid-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/hero-video-dialog-demo-top-in-bottom-out.tsx',
-            type: 'registry:component',
+            path: "examples/flickering-grid-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'flickering-grid-demo',
-      type: 'registry:example',
+      name: "flickering-grid-rounded-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/flickering-grid-demo.tsx',
-            type: 'registry:component',
+            path: "examples/flickering-grid-rounded-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'flickering-grid-rounded-demo',
-      type: 'registry:example',
+      name: "hyper-text-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/flickering-grid-rounded-demo.tsx',
-            type: 'registry:component',
+            path: "examples/hyper-text-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'hyper-text-demo',
-      type: 'registry:example',
+      name: "safari-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/hyper-text-demo.tsx',
-            type: 'registry:component',
+            path: "examples/safari-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'safari-demo',
-      type: 'registry:example',
+      name: "safari-demo-2",
+      type: "registry:example",
       files: [
          {
-            path: 'example/safari-demo.tsx',
-            type: 'registry:component',
+            path: "examples/safari-demo-2.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'safari-demo-2',
-      type: 'registry:example',
+      name: "iphone-15-pro-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/safari-demo-2.tsx',
-            type: 'registry:component',
+            path: "examples/iphone-15-pro-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'iphone-15-pro-demo',
-      type: 'registry:example',
+      name: "iphone-15-pro-demo-2",
+      type: "registry:example",
       files: [
          {
-            path: 'example/iphone-15-pro-demo.tsx',
-            type: 'registry:component',
+            path: "examples/iphone-15-pro-demo-2.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'iphone-15-pro-demo-2',
-      type: 'registry:example',
+      name: "animated-circular-progress-bar-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/iphone-15-pro-demo-2.tsx',
-            type: 'registry:component',
+            path: "examples/animated-circular-progress-bar-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'animated-circular-progress-bar-demo',
-      type: 'registry:example',
+      name: "toast-demo",
+      type: "registry:example",
+      registryDependencies: ["toast"],
       files: [
          {
-            path: 'example/animated-circular-progress-bar-demo.tsx',
-            type: 'registry:component',
+            path: "examples/toast-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toast-demo',
-      type: 'registry:example',
-      registryDependencies: ['toast'],
+      name: "toast-destructive",
+      type: "registry:example",
+      registryDependencies: ["toast"],
       files: [
          {
-            path: 'example/toast-demo.tsx',
-            type: 'registry:example',
+            path: "examples/toast-destructive.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toast-destructive',
-      type: 'registry:example',
-      registryDependencies: ['toast'],
+      name: "toast-simple",
+      type: "registry:example",
+      registryDependencies: ["toast"],
       files: [
          {
-            path: 'example/toast-destructive.tsx',
-            type: 'registry:example',
+            path: "examples/toast-simple.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toast-simple',
-      type: 'registry:example',
-      registryDependencies: ['toast'],
+      name: "toast-with-action",
+      type: "registry:example",
+      registryDependencies: ["toast"],
       files: [
          {
-            path: 'example/toast-simple.tsx',
-            type: 'registry:example',
+            path: "examples/toast-with-action.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toast-with-action',
-      type: 'registry:example',
-      registryDependencies: ['toast'],
+      name: "toast-with-title",
+      type: "registry:example",
+      registryDependencies: ["toast"],
       files: [
          {
-            path: 'example/toast-with-action.tsx',
-            type: 'registry:example',
+            path: "examples/toast-with-title.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toast-with-title',
-      type: 'registry:example',
-      registryDependencies: ['toast'],
+      name: "sonner-demo",
+      type: "registry:example",
+      registryDependencies: ["sonner"],
       files: [
          {
-            path: 'example/toast-with-title.tsx',
-            type: 'registry:example',
+            path: "examples/sonner-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'sonner-demo',
-      type: 'registry:example',
-      registryDependencies: ['sonner'],
+      name: "select-demo",
+      type: "registry:example",
+      registryDependencies: ["select"],
       files: [
          {
-            path: 'example/sonner-demo.tsx',
-            type: 'registry:example',
+            path: "examples/select-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'select-demo',
-      type: 'registry:example',
-      registryDependencies: ['select'],
+      name: "select-scrollable",
+      type: "registry:example",
+      registryDependencies: ["select"],
       files: [
          {
-            path: 'example/select-demo.tsx',
-            type: 'registry:example',
+            path: "examples/select-scrollable.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'select-scrollable',
-      type: 'registry:example',
-      registryDependencies: ['select'],
+      name: "select-form",
+      type: "registry:example",
+      registryDependencies: ["select"],
       files: [
          {
-            path: 'example/select-scrollable.tsx',
-            type: 'registry:example',
+            path: "examples/select-form.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'select-form',
-      type: 'registry:example',
-      registryDependencies: ['select'],
+      name: "separator-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/select-form.tsx',
-            type: 'registry:example',
+            path: "examples/separator-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'separator-demo',
-      type: 'registry:example',
+      name: "sheet-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/separator-demo.tsx',
-            type: 'registry:example',
+            path: "examples/sheet-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'sheet-demo',
-      type: 'registry:example',
+      name: "sheet-side",
+      type: "registry:example",
       files: [
          {
-            path: 'example/sheet-demo.tsx',
-            type: 'registry:example',
+            path: "examples/sheet-side.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'sheet-side',
-      type: 'registry:example',
+      name: "skeleton-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/sheet-side.tsx',
-            type: 'registry:example',
+            path: "examples/skeleton-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'skeleton-demo',
-      type: 'registry:example',
+      name: "skeleton-card",
+      type: "registry:example",
       files: [
          {
-            path: 'example/skeleton-demo.tsx',
-            type: 'registry:example',
+            path: "examples/skeleton-card.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'skeleton-card',
-      type: 'registry:example',
+      name: "slider-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/skeleton-card.tsx',
-            type: 'registry:example',
+            path: "examples/slider-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'slider-demo',
-      type: 'registry:example',
+      name: "slider-disabled",
+      type: "registry:example",
       files: [
          {
-            path: 'example/slider-demo.tsx',
-            type: 'registry:example',
+            path: "examples/slider-disabled.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'slider-disabled',
-      type: 'registry:example',
+      name: "slider-inverted",
+      type: "registry:example",
       files: [
          {
-            path: 'example/slider-disabled.tsx',
-            type: 'registry:example',
+            path: "examples/slider-inverted.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'slider-inverted',
-      type: 'registry:example',
+      name: "slider-vertical",
+      type: "registry:example",
       files: [
          {
-            path: 'example/slider-inverted.tsx',
-            type: 'registry:example',
+            path: "examples/slider-vertical.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'slider-vertical',
-      type: 'registry:example',
+      name: "slider-range",
+      type: "registry:example",
       files: [
          {
-            path: 'example/slider-vertical.tsx',
-            type: 'registry:example',
+            path: "examples/slider-range.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'slider-range',
-      type: 'registry:example',
+      name: "slider-tick-marks-half",
+      type: "registry:example",
       files: [
          {
-            path: 'example/slider-range.tsx',
-            type: 'registry:example',
+            path: "examples/slider-tick-marks-half.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'slider-tick-marks-half',
-      type: 'registry:example',
+      name: "slider-tick-marks-full",
+      type: "registry:example",
       files: [
          {
-            path: 'example/slider-tick-marks-half.tsx',
-            type: 'registry:example',
+            path: "examples/slider-tick-marks-full.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'slider-tick-marks-full',
-      type: 'registry:example',
+      name: "slider-format-label",
+      type: "registry:example",
       files: [
          {
-            path: 'example/slider-tick-marks-full.tsx',
-            type: 'registry:example',
+            path: "examples/slider-format-label.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'slider-format-label',
-      type: 'registry:example',
+      name: "slider-format-label-side",
+      type: "registry:example",
       files: [
          {
-            path: 'example/slider-format-label.tsx',
-            type: 'registry:example',
+            path: "examples/slider-format-label-side.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'slider-format-label-side',
-      type: 'registry:example',
+      name: "switch-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/slider-format-label-side.tsx',
-            type: 'registry:example',
+            path: "examples/switch-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'switch-demo',
-      type: 'registry:example',
+      name: "switch-form",
+      type: "registry:example",
       files: [
          {
-            path: 'example/switch-demo.tsx',
-            type: 'registry:example',
+            path: "examples/switch-form.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'switch-form',
-      type: 'registry:example',
+      name: "table-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/switch-form.tsx',
-            type: 'registry:example',
+            path: "examples/table-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'table-demo',
-      type: 'registry:example',
+      name: "tabs-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/table-demo.tsx',
-            type: 'registry:example',
+            path: "examples/tabs-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'tabs-demo',
-      type: 'registry:example',
+      name: "textarea-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/tabs-demo.tsx',
-            type: 'registry:example',
+            path: "examples/textarea-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'textarea-demo',
-      type: 'registry:example',
+      name: "textarea-disabled",
+      type: "registry:example",
       files: [
          {
-            path: 'example/textarea-demo.tsx',
-            type: 'registry:example',
+            path: "examples/textarea-disabled.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'textarea-disabled',
-      type: 'registry:example',
+      name: "textarea-with-label",
+      type: "registry:example",
       files: [
          {
-            path: 'example/textarea-disabled.tsx',
-            type: 'registry:example',
+            path: "examples/textarea-with-label.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'textarea-with-label',
-      type: 'registry:example',
+      name: "textarea-with-text",
+      type: "registry:example",
       files: [
          {
-            path: 'example/textarea-with-label.tsx',
-            type: 'registry:example',
+            path: "examples/textarea-with-text.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'textarea-with-text',
-      type: 'registry:example',
+      name: "textarea-with-button",
+      type: "registry:example",
       files: [
          {
-            path: 'example/textarea-with-text.tsx',
-            type: 'registry:example',
+            path: "examples/textarea-with-button.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'textarea-with-button',
-      type: 'registry:example',
+      name: "textarea-form",
+      type: "registry:example",
       files: [
          {
-            path: 'example/textarea-with-button.tsx',
-            type: 'registry:example',
+            path: "examples/textarea-form.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'textarea-form',
-      type: 'registry:example',
+      name: "toggle-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/textarea-form.tsx',
-            type: 'registry:example',
+            path: "examples/toggle-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toggle-demo',
-      type: 'registry:example',
+      name: "toggle-outline",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toggle-demo.tsx',
-            type: 'registry:example',
+            path: "examples/toggle-outline.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toggle-outline',
-      type: 'registry:example',
+      name: "toggle-with-text",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toggle-outline.tsx',
-            type: 'registry:example',
+            path: "examples/toggle-with-text.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toggle-with-text',
-      type: 'registry:example',
+      name: "toggle-sm",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toggle-with-text.tsx',
-            type: 'registry:example',
+            path: "examples/toggle-sm.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toggle-sm',
-      type: 'registry:example',
+      name: "toggle-lg",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toggle-sm.tsx',
-            type: 'registry:example',
+            path: "examples/toggle-lg.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toggle-lg',
-      type: 'registry:example',
+      name: "toggle-disabled",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toggle-lg.tsx',
-            type: 'registry:example',
+            path: "examples/toggle-disabled.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toggle-disabled',
-      type: 'registry:example',
+      name: "toggle-group-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toggle-disabled.tsx',
-            type: 'registry:example',
+            path: "examples/toggle-group-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toggle-group-demo',
-      type: 'registry:example',
+      name: "toggle-group-outline",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toggle-group-demo.tsx',
-            type: 'registry:example',
+            path: "examples/toggle-group-outline.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toggle-group-outline',
-      type: 'registry:example',
+      name: "toggle-group-single",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toggle-group-outline.tsx',
-            type: 'registry:example',
+            path: "examples/toggle-group-single.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toggle-group-single',
-      type: 'registry:example',
+      name: "toggle-group-sm",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toggle-group-single.tsx',
-            type: 'registry:example',
+            path: "examples/toggle-group-sm.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toggle-group-sm',
-      type: 'registry:example',
+      name: "toggle-group-lg",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toggle-group-sm.tsx',
-            type: 'registry:example',
+            path: "examples/toggle-group-lg.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toggle-group-lg',
-      type: 'registry:example',
+      name: "toggle-group-disabled",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toggle-group-lg.tsx',
-            type: 'registry:example',
+            path: "examples/toggle-group-disabled.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'toggle-group-disabled',
-      type: 'registry:example',
+      name: "tooltip-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/toggle-group-disabled.tsx',
-            type: 'registry:example',
+            path: "examples/tooltip-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'tooltip-demo',
-      type: 'registry:example',
+      name: "tooltip-secondary",
+      type: "registry:example",
       files: [
          {
-            path: 'example/tooltip-demo.tsx',
-            type: 'registry:example',
+            path: "examples/tooltip-secondary.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'tooltip-secondary',
-      type: 'registry:example',
+      name: "tooltip-outline",
+      type: "registry:example",
       files: [
          {
-            path: 'example/tooltip-secondary.tsx',
-            type: 'registry:example',
+            path: "examples/tooltip-outline.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'tooltip-outline',
-      type: 'registry:example',
+      name: "tooltip-with-toggle-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/tooltip-outline.tsx',
-            type: 'registry:example',
+            path: "examples/tooltip-with-toggle-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'tooltip-with-toggle-demo',
-      type: 'registry:example',
+      name: "grid-layout-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/tooltip-with-toggle-demo.tsx',
-            type: 'registry:example',
+            path: "examples/grid-layout-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'grid-layout-demo',
-      type: 'registry:example',
+      name: "grid-layout-crosshairs-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/grid-layout-demo.tsx',
-            type: 'registry:component',
+            path: "examples/grid-layout-crosshairs-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'grid-layout-crosshairs-demo',
-      type: 'registry:example',
+      name: "grid-layout-columns-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/grid-layout-crosshairs-demo.tsx',
-            type: 'registry:component',
+            path: "examples/grid-layout-columns-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'grid-layout-columns-demo',
-      type: 'registry:example',
+      name: "grid-layout-variants-demo",
+      type: "registry:example",
+      registryDependencies: ["grid-layout"],
       files: [
          {
-            path: 'example/grid-layout-columns-demo.tsx',
-            type: 'registry:component',
+            path: "examples/grid-layout-variants-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'grid-layout-variants-demo',
-      type: 'registry:example',
-      registryDependencies: ['grid-layout'],
+      name: "globe-grid-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/grid-layout-variants-demo.tsx',
-            type: 'registry:component',
+            path: "examples/globe-grid-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'globe-grid-demo',
-      type: 'registry:example',
+      name: "globe-grid-full-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/globe-grid-demo.tsx',
-            type: 'registry:component',
+            path: "examples/globe-grid-full-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'globe-grid-full-demo',
-      type: 'registry:example',
+      name: "nyx-toc-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/globe-grid-full-demo.tsx',
-            type: 'registry:component',
+            path: "examples/nyx-toc-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'nyx-toc-demo',
-      type: 'registry:example',
+      name: "nyx-toc-popover-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/nyx-toc-demo.tsx',
-            type: 'registry:component',
+            path: "examples/nyx-toc-popover-demo.tsx",
+            type: "registry:example",
          },
       ],
    },
    {
-      name: 'nyx-toc-popover-demo',
-      type: 'registry:example',
+      name: "typography-demo",
+      type: "registry:example",
       files: [
          {
-            path: 'example/nyx-toc-popover-demo.tsx',
-            type: 'registry:component',
+            path: "examples/typography-demo.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-h1",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-h1.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-h2",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-h2.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-h3",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-h3.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-h4",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-h4.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-blockquote",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-blockquote.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-table",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-table.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-list",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-list.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-inline-code",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-inline-code.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-lead",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-lead.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-large",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-large.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-small",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-small.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-muted",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-muted.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "typography-p",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/typography-p.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "terminal-demo",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/terminal-demo.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "script-copy-btn-demo",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/script-copy-btn-demo.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "text-animate-demo",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/text-animate-demo.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "text-animate-demo-2",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/text-animate-demo-2.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "text-animate-demo-3",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/text-animate-demo-3.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "text-animate-demo-4",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/text-animate-demo-4.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "text-animate-demo-5",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/text-animate-demo-5.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "text-animate-demo-6",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/text-animate-demo-6.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "line-shadow-text-demo",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/line-shadow-text-demo.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "aurora-text-demo",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/aurora-text-demo.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "morphing-text-demo",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/morphing-text-demo.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "ripple-button-demo",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/ripple-button-demo.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "warp-background-demo",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/warp-background-demo.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "interactive-grid-pattern-demo",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/interactive-grid-pattern-demo.tsx",
+            type: "registry:example",
+         },
+      ],
+   },
+   {
+      name: "interactive-grid-pattern-demo-2",
+      type: "registry:example",
+      files: [
+         {
+            path: "examples/interactive-grid-pattern-demo-2.tsx",
+            type: "registry:example",
          },
       ],
    },
diff --git a/apps/web/registry/registry-hooks.ts b/apps/web/registry/registry-hooks.ts
index 99ef28b7..debbe5d2 100644
--- a/apps/web/registry/registry-hooks.ts
+++ b/apps/web/registry/registry-hooks.ts
@@ -1,43 +1,43 @@
-import type { Registry } from '~/registry/schema'
+import type { Registry } from "nyxb/registry"
 
-export const hooks: Registry = [
+export const hooks: Registry["items"] = [
    {
-      name: 'use-mobile',
-      type: 'registry:hook',
+      name: "use-mobile",
+      type: "registry:hook",
       files: [
          {
-            path: 'hooks/use-mobile.tsx',
-            type: 'registry:hook',
+            path: "hooks/use-mobile.tsx",
+            type: "registry:hook",
          },
       ],
    },
    {
-      name: 'use-toast',
-      type: 'registry:hook',
+      name: "use-toast",
+      type: "registry:hook",
       files: [
          {
-            path: 'hooks/use-toast.ts',
-            type: 'registry:hook',
+            path: "hooks/use-toast.ts",
+            type: "registry:hook",
          },
       ],
    },
    {
-      name: 'use-anchor-observer',
-      type: 'registry:hook',
+      name: "use-anchor-observer",
+      type: "registry:hook",
       files: [
          {
-            path: 'hooks/use-anchor-observer.ts',
-            type: 'registry:hook',
+            path: "hooks/use-anchor-observer.ts",
+            type: "registry:hook",
          },
       ],
    },
    {
-      name: 'use-on-change',
-      type: 'registry:hook',
+      name: "use-on-change",
+      type: "registry:hook",
       files: [
          {
-            path: 'hooks/use-on-change.ts',
-            type: 'registry:hook',
+            path: "hooks/use-on-change.ts",
+            type: "registry:hook",
          },
       ],
    },
diff --git a/apps/web/registry/registry-icons.ts b/apps/web/registry/registry-icons.ts
index d90e330b..bfaddd72 100644
--- a/apps/web/registry/registry-icons.ts
+++ b/apps/web/registry/registry-icons.ts
@@ -1,13 +1,13 @@
 export const iconLibraries = {
    lucide: {
-      name: 'lucide-react',
-      package: 'lucide-react',
-      import: 'lucide-react',
+      name: "lucide-react",
+      package: "lucide-react",
+      import: "lucide-react",
    },
    radix: {
-      name: '@radix-ui/react-icons',
-      package: '@radix-ui/react-icons',
-      import: '@radix-ui/react-icons',
+      name: "@radix-ui/react-icons",
+      package: "@radix-ui/react-icons",
+      import: "@radix-ui/react-icons",
    },
 } as const
 
@@ -16,151 +16,151 @@ export const icons: Record<
    Record<keyof typeof iconLibraries, string>
 > = {
    AlertCircle: {
-      lucide: 'AlertCircle',
-      radix: 'ExclamationTriangleIcon',
+      lucide: "AlertCircle",
+      radix: "ExclamationTriangleIcon",
    },
    ArrowLeft: {
-      lucide: 'ArrowLeft',
-      radix: 'ArrowLeftIcon',
+      lucide: "ArrowLeft",
+      radix: "ArrowLeftIcon",
    },
    ArrowRight: {
-      lucide: 'ArrowRight',
-      radix: 'ArrowRightIcon',
+      lucide: "ArrowRight",
+      radix: "ArrowRightIcon",
    },
    ArrowUpDown: {
-      lucide: 'ArrowUpDown',
-      radix: 'CaretSortIcon',
+      lucide: "ArrowUpDown",
+      radix: "CaretSortIcon",
    },
    BellRing: {
-      lucide: 'BellRing',
-      radix: 'BellIcon',
+      lucide: "BellRing",
+      radix: "BellIcon",
    },
    Bold: {
-      lucide: 'Bold',
-      radix: 'FontBoldIcon',
+      lucide: "Bold",
+      radix: "FontBoldIcon",
    },
    Calculator: {
-      lucide: 'Calculator',
-      radix: 'ComponentPlaceholderIcon',
+      lucide: "Calculator",
+      radix: "ComponentPlaceholderIcon",
    },
    Calendar: {
-      lucide: 'Calendar',
-      radix: 'CalendarIcon',
+      lucide: "Calendar",
+      radix: "CalendarIcon",
    },
    Check: {
-      lucide: 'Check',
-      radix: 'CheckIcon',
+      lucide: "Check",
+      radix: "CheckIcon",
    },
    ChevronDown: {
-      lucide: 'ChevronDown',
-      radix: 'ChevronDownIcon',
+      lucide: "ChevronDown",
+      radix: "ChevronDownIcon",
    },
    ChevronLeft: {
-      lucide: 'ChevronLeft',
-      radix: 'ChevronLeftIcon',
+      lucide: "ChevronLeft",
+      radix: "ChevronLeftIcon",
    },
    ChevronRight: {
-      lucide: 'ChevronRight',
-      radix: 'ChevronRightIcon',
+      lucide: "ChevronRight",
+      radix: "ChevronRightIcon",
    },
    ChevronUp: {
-      lucide: 'ChevronUp',
-      radix: 'ChevronUpIcon',
+      lucide: "ChevronUp",
+      radix: "ChevronUpIcon",
    },
    ChevronsUpDown: {
-      lucide: 'ChevronsUpDown',
-      radix: 'CaretSortIcon',
+      lucide: "ChevronsUpDown",
+      radix: "CaretSortIcon",
    },
    Circle: {
-      lucide: 'Circle',
-      radix: 'DotFilledIcon',
+      lucide: "Circle",
+      radix: "DotFilledIcon",
    },
    Copy: {
-      lucide: 'Copy',
-      radix: 'CopyIcon',
+      lucide: "Copy",
+      radix: "CopyIcon",
    },
    CreditCard: {
-      lucide: 'CreditCard',
-      radix: 'ComponentPlaceholderIcon',
+      lucide: "CreditCard",
+      radix: "ComponentPlaceholderIcon",
    },
    GripVertical: {
-      lucide: 'GripVertical',
-      radix: 'DragHandleDots2Icon',
+      lucide: "GripVertical",
+      radix: "DragHandleDots2Icon",
    },
    Italic: {
-      lucide: 'Italic',
-      radix: 'FontItalicIcon',
+      lucide: "Italic",
+      radix: "FontItalicIcon",
    },
    Loader2: {
-      lucide: 'Loader2',
-      radix: 'ReloadIcon',
+      lucide: "Loader2",
+      radix: "ReloadIcon",
    },
    Mail: {
-      lucide: 'Mail',
-      radix: 'EnvelopeClosedIcon',
+      lucide: "Mail",
+      radix: "EnvelopeClosedIcon",
    },
    MailOpen: {
-      lucide: 'MailOpen',
-      radix: 'EnvelopeOpenIcon',
+      lucide: "MailOpen",
+      radix: "EnvelopeOpenIcon",
    },
    Minus: {
-      lucide: 'Minus',
-      radix: 'MinusIcon',
+      lucide: "Minus",
+      radix: "MinusIcon",
    },
    Moon: {
-      lucide: 'Moon',
-      radix: 'MoonIcon',
+      lucide: "Moon",
+      radix: "MoonIcon",
    },
    MoreHorizontal: {
-      lucide: 'MoreHorizontal',
-      radix: 'DotsHorizontalIcon',
+      lucide: "MoreHorizontal",
+      radix: "DotsHorizontalIcon",
    },
    PanelLeft: {
-      lucide: 'PanelLeft',
-      radix: 'ViewVerticalIcon',
+      lucide: "PanelLeft",
+      radix: "ViewVerticalIcon",
    },
    Plus: {
-      lucide: 'Plus',
-      radix: 'PlusIcon',
+      lucide: "Plus",
+      radix: "PlusIcon",
    },
    Search: {
-      lucide: 'Search',
-      radix: 'MagnifyingGlassIcon',
+      lucide: "Search",
+      radix: "MagnifyingGlassIcon",
    },
    Send: {
-      lucide: 'Send',
-      radix: 'PaperPlaneIcon',
+      lucide: "Send",
+      radix: "PaperPlaneIcon",
    },
    Settings: {
-      lucide: 'Settings',
-      radix: 'GearIcon',
+      lucide: "Settings",
+      radix: "GearIcon",
    },
    Slash: {
-      lucide: 'Slash',
-      radix: 'SlashIcon',
+      lucide: "Slash",
+      radix: "SlashIcon",
    },
    Smile: {
-      lucide: 'Smile',
-      radix: 'FaceIcon',
+      lucide: "Smile",
+      radix: "FaceIcon",
    },
    Sun: {
-      lucide: 'Sun',
-      radix: 'SunIcon',
+      lucide: "Sun",
+      radix: "SunIcon",
    },
    Terminal: {
-      lucide: 'Terminal',
-      radix: 'RocketIcon',
+      lucide: "Terminal",
+      radix: "RocketIcon",
    },
    Underline: {
-      lucide: 'Underline',
-      radix: 'UnderlineIcon',
+      lucide: "Underline",
+      radix: "UnderlineIcon",
    },
    User: {
-      lucide: 'User',
-      radix: 'PersonIcon',
+      lucide: "User",
+      radix: "PersonIcon",
    },
    X: {
-      lucide: 'X',
-      radix: 'Cross2Icon',
+      lucide: "X",
+      radix: "Cross2Icon",
    },
 } as const
diff --git a/apps/web/registry/registry-internal.ts b/apps/web/registry/registry-internal.ts
new file mode 100644
index 00000000..cbd7e0a7
--- /dev/null
+++ b/apps/web/registry/registry-internal.ts
@@ -0,0 +1,706 @@
+import type { Registry } from "nyxb/registry"
+
+export const internal: Registry["items"] = [
+   {
+      name: "sink",
+      type: "registry:internal",
+      registryDependencies: [
+         // registry:ui
+         "accordion",
+         "alert",
+         "alert-dialog",
+         "aspect-ratio",
+         "avatar",
+         "badge",
+         "breadcrumb",
+         "button",
+         "calendar",
+         "card",
+         "carousel",
+         "chart",
+         "checkbox",
+         "collapsible",
+         "command",
+         "context-menu",
+         "dialog",
+         "drawer",
+         "dropdown-menu",
+         // "form",
+         "hover-card",
+         "input",
+         "input-otp",
+         "label",
+         "menubar",
+         "navigation-menu",
+         "pagination",
+         "popover",
+         "progress",
+         "radio-group",
+         "resizable",
+         "scroll-area",
+         "select",
+         "separator",
+         "sheet",
+         "sidebar",
+         "skeleton",
+         "slider",
+         "sonner",
+         "switch",
+         "table",
+         "tabs",
+         "textarea",
+         "toast",
+         "toggle",
+         "toggle-group",
+         "tooltip",
+      ],
+      files: [
+         {
+            path: "internal/sink/page.tsx",
+            type: "registry:page",
+            target: "app/sink/page.tsx",
+         },
+         {
+            path: "internal/sink/components/app-sidebar.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/component-wrapper.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/nav-main.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/nav-projects.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/nav-user.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/team-switcher.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/accordion-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/alert-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/alert-dialog-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/aspect-ratio-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/avatar-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/badge-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/breadcrumb-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/button-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/calendar-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/card-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/carousel-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/checkbox-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/collapsible-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/combobox-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/command-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/context-menu-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/date-picker-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/dialog-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/drawer-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/dropdown-menu-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/hover-card-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/input-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/input-otp-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/label-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/menubar-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/navigation-menu-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/pagination-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/popover-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/progress-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/radio-group-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/resizable-handle.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/scroll-area-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/select-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/separator-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/sheet-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/skeleton-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/slider-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/sonner-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/switch-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/table-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/tabs-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/textarea-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/toast-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/toggle-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/toggle-group-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/tooltip-demo.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/badge-destructive.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/badge-outline.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/badge-secondary.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/button-destructive.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/button-ghost.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/button-link.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/button-loading.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/button-outline.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/button-secondary.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/button-with-icon.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/toggle-disabled.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/toggle-outline.tsx",
+            type: "registry:component",
+         },
+         {
+            path: "internal/sink/components/toggle-with-text.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-demo",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-demo.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-header",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-header.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-footer",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-footer.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-group",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-group.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-group-collapsible",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-group-collapsible.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-group-action",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-group-action.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-menu",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-menu.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-menu-action",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-menu-action.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-menu-sub",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-menu-sub.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-menu-collapsible",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-menu-collapsible.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-menu-badge",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-menu-badge.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-rsc",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-rsc.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "sidebar-controlled",
+      type: "registry:internal",
+      files: [
+         {
+            path: "internal/sidebar-controlled.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-01",
+      type: "registry:internal",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "label",
+         "dropdown-menu",
+      ],
+      files: [
+         {
+            path: "internal/sidebar-01.tsx",
+            type: "registry:component",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-02",
+      type: "registry:internal",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "label",
+         "dropdown-menu",
+      ],
+      files: [
+         {
+            path: "internal/sidebar-02.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-03",
+      type: "registry:internal",
+      registryDependencies: ["sidebar", "breadcrumb"],
+      files: [
+         {
+            path: "internal/sidebar-03.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-04",
+      type: "registry:internal",
+      registryDependencies: ["sidebar", "breadcrumb", "separator"],
+      files: [
+         {
+            path: "internal/sidebar-04.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-05",
+      type: "registry:internal",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "label",
+         "collapsible",
+      ],
+      files: [
+         {
+            path: "internal/sidebar-05.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-06",
+      type: "registry:internal",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "card",
+         "dropdown-menu",
+      ],
+      files: [
+         {
+            path: "internal/sidebar-06.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-07",
+      type: "registry:internal",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "collapsible",
+         "dropdown-menu",
+         "avatar",
+      ],
+      files: [
+         {
+            path: "internal/sidebar-07.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-08",
+      type: "registry:internal",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "collapsible",
+         "dropdown-menu",
+         "avatar",
+      ],
+      files: [
+         {
+            path: "internal/sidebar-08.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-09",
+      type: "registry:internal",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "collapsible",
+         "dropdown-menu",
+         "avatar",
+         "switch",
+      ],
+      files: [
+         {
+            path: "internal/sidebar-09.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-10",
+      type: "registry:internal",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "popover",
+         "collapsible",
+         "dropdown-menu",
+      ],
+      files: [
+         {
+            path: "internal/sidebar-10.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-11",
+      type: "registry:internal",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "collapsible",
+      ],
+      files: [
+         {
+            path: "internal/sidebar-11.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-12",
+      type: "registry:internal",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "collapsible",
+         "calendar",
+         "dropdown-menu",
+         "avatar",
+      ],
+      files: [
+         {
+            path: "internal/sidebar-12.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-13",
+      type: "registry:internal",
+      registryDependencies: ["sidebar", "breadcrumb", "button", "dialog"],
+      files: [
+         {
+            path: "internal/sidebar-13.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-14",
+      type: "registry:internal",
+      registryDependencies: ["sidebar", "breadcrumb"],
+      files: [
+         {
+            path: "internal/sidebar-14.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-sidebar-15",
+      type: "registry:internal",
+      registryDependencies: [
+         "sidebar",
+         "breadcrumb",
+         "separator",
+         "popover",
+         "collapsible",
+         "dropdown-menu",
+         "calendar",
+         "avatar",
+      ],
+      files: [
+         {
+            path: "internal/sidebar-15.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+   {
+      name: "v0-login-01",
+      type: "registry:internal",
+      registryDependencies: ["button", "card", "input", "label"],
+      files: [
+         {
+            path: "internal/login-01.tsx",
+            type: "registry:internal",
+         },
+      ],
+   },
+]
diff --git a/apps/web/registry/registry-lib.ts b/apps/web/registry/registry-lib.ts
index 7004943b..477879d5 100644
--- a/apps/web/registry/registry-lib.ts
+++ b/apps/web/registry/registry-lib.ts
@@ -1,14 +1,14 @@
-import type { Registry } from '~/registry/schema'
+import type { Registry } from "nyxb/registry"
 
-export const lib: Registry = [
+export const lib: Registry["items"] = [
    {
-      name: 'utils',
-      type: 'registry:lib',
-      dependencies: ['clsx', 'tailwind-merge'],
+      name: "utils",
+      type: "registry:lib",
+      dependencies: ["clsx", "tailwind-merge"],
       files: [
          {
-            path: 'lib/utils.ts',
-            type: 'registry:lib',
+            path: "lib/utils.ts",
+            type: "registry:lib",
          },
       ],
    },
diff --git a/apps/web/registry/registry-styles.ts b/apps/web/registry/registry-styles.ts
index 85e24a44..f4f27991 100644
--- a/apps/web/registry/registry-styles.ts
+++ b/apps/web/registry/registry-styles.ts
@@ -1,11 +1,11 @@
 export const styles = [
    {
-      name: 'miami',
-      label: 'Miami',
+      name: "miami",
+      label: "Miami",
    },
    {
-      name: 'default',
-      label: 'Default',
+      name: "default",
+      label: "Default",
    },
 ] as const
 
diff --git a/apps/web/registry/registry-themes.ts b/apps/web/registry/registry-themes.ts
index 3056d473..9d430750 100644
--- a/apps/web/registry/registry-themes.ts
+++ b/apps/web/registry/registry-themes.ts
@@ -1,177 +1,177 @@
-import type { Registry } from './schema'
+import type { Registry } from "nyxb/registry"
 
-export const themes: Registry = [
+export const themes: Registry["items"] = [
    {
-      name: 'theme-daylight',
-      type: 'registry:theme',
+      name: "theme-daylight",
+      type: "registry:theme",
       cssVars: {
          light: {
-            'background': '36 39% 88%',
-            'foreground': '36 45% 15%',
-            'primary': '36 45% 70%',
-            'primary-foreground': '36 45% 11%',
-            'secondary': '40 35% 77%',
-            'secondary-foreground': '36 45% 25%',
-            'accent': '36 64% 57%',
-            'accent-foreground': '36 72% 17%',
-            'destructive': '0 84% 37%',
-            'destructive-foreground': '0 0% 98%',
-            'muted': '36 33% 75%',
-            'muted-foreground': '36 45% 25%',
-            'card': '36 46% 82%',
-            'card-foreground': '36 45% 20%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '240 10% 3.9%',
-            'border': '36 45% 60%',
-            'input': '36 45% 60%',
-            'ring': '36 45% 30%',
-            'chart-1': '25 34% 28%',
-            'chart-2': '26 36% 34%',
-            'chart-3': '28 40% 40%',
-            'chart-4': '31 41% 48%',
-            'chart-5': '35 43% 53%',
+            background: "36 39% 88%",
+            foreground: "36 45% 15%",
+            primary: "36 45% 70%",
+            "primary-foreground": "36 45% 11%",
+            secondary: "40 35% 77%",
+            "secondary-foreground": "36 45% 25%",
+            accent: "36 64% 57%",
+            "accent-foreground": "36 72% 17%",
+            destructive: "0 84% 37%",
+            "destructive-foreground": "0 0% 98%",
+            muted: "36 33% 75%",
+            "muted-foreground": "36 45% 25%",
+            card: "36 46% 82%",
+            "card-foreground": "36 45% 20%",
+            popover: "0 0% 100%",
+            "popover-foreground": "240 10% 3.9%",
+            border: "36 45% 60%",
+            input: "36 45% 60%",
+            ring: "36 45% 30%",
+            "chart-1": "25 34% 28%",
+            "chart-2": "26 36% 34%",
+            "chart-3": "28 40% 40%",
+            "chart-4": "31 41% 48%",
+            "chart-5": "35 43% 53%",
          },
          dark: {
-            'background': '36 39% 88%',
-            'foreground': '36 45% 15%',
-            'primary': '36 45% 70%',
-            'primary-foreground': '36 45% 11%',
-            'secondary': '40 35% 77%',
-            'secondary-foreground': '36 45% 25%',
-            'accent': '36 64% 57%',
-            'accent-foreground': '36 72% 17%',
-            'destructive': '0 84% 37%',
-            'destructive-foreground': '0 0% 98%',
-            'muted': '36 33% 75%',
-            'muted-foreground': '36 45% 25%',
-            'card': '36 46% 82%',
-            'card-foreground': '36 45% 20%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '240 10% 3.9%',
-            'border': '36 45% 60%',
-            'input': '36 45% 60%',
-            'ring': '36 45% 30%',
-            'chart-1': '25 34% 28%',
-            'chart-2': '26 36% 34%',
-            'chart-3': '28 40% 40%',
-            'chart-4': '31 41% 48%',
-            'chart-5': '35 43% 53%',
+            background: "36 39% 88%",
+            foreground: "36 45% 15%",
+            primary: "36 45% 70%",
+            "primary-foreground": "36 45% 11%",
+            secondary: "40 35% 77%",
+            "secondary-foreground": "36 45% 25%",
+            accent: "36 64% 57%",
+            "accent-foreground": "36 72% 17%",
+            destructive: "0 84% 37%",
+            "destructive-foreground": "0 0% 98%",
+            muted: "36 33% 75%",
+            "muted-foreground": "36 45% 25%",
+            card: "36 46% 82%",
+            "card-foreground": "36 45% 20%",
+            popover: "0 0% 100%",
+            "popover-foreground": "240 10% 3.9%",
+            border: "36 45% 60%",
+            input: "36 45% 60%",
+            ring: "36 45% 30%",
+            "chart-1": "25 34% 28%",
+            "chart-2": "26 36% 34%",
+            "chart-3": "28 40% 40%",
+            "chart-4": "31 41% 48%",
+            "chart-5": "35 43% 53%",
          },
       },
    },
    {
-      name: 'theme-midnight',
-      type: 'registry:theme',
+      name: "theme-midnight",
+      type: "registry:theme",
       cssVars: {
          light: {
-            'background': '240 5% 6%',
-            'foreground': '60 5% 90%',
-            'primary': '240 0% 90%',
-            'primary-foreground': '60 0% 0%',
-            'secondary': '240 4% 15%',
-            'secondary-foreground': '60 5% 85%',
-            'accent': '240 0% 13%',
-            'accent-foreground': '60 0% 100%',
-            'destructive': '0 60% 50%',
-            'destructive-foreground': '0 0% 98%',
-            'muted': '240 5% 25%',
-            'muted-foreground': '60 5% 85%',
-            'card': '240 4% 10%',
-            'card-foreground': '60 5% 90%',
-            'popover': '240 5% 15%',
-            'popover-foreground': '60 5% 85%',
-            'border': '240 6% 20%',
-            'input': '240 6% 20%',
-            'ring': '240 5% 90%',
-            'chart-1': '359 2% 90%',
-            'chart-2': '240 1% 74%',
-            'chart-3': '240 1% 58%',
-            'chart-4': '240 1% 42%',
-            'chart-5': '240 2% 26%',
+            background: "240 5% 6%",
+            foreground: "60 5% 90%",
+            primary: "240 0% 90%",
+            "primary-foreground": "60 0% 0%",
+            secondary: "240 4% 15%",
+            "secondary-foreground": "60 5% 85%",
+            accent: "240 0% 13%",
+            "accent-foreground": "60 0% 100%",
+            destructive: "0 60% 50%",
+            "destructive-foreground": "0 0% 98%",
+            muted: "240 5% 25%",
+            "muted-foreground": "60 5% 85%",
+            card: "240 4% 10%",
+            "card-foreground": "60 5% 90%",
+            popover: "240 5% 15%",
+            "popover-foreground": "60 5% 85%",
+            border: "240 6% 20%",
+            input: "240 6% 20%",
+            ring: "240 5% 90%",
+            "chart-1": "359 2% 90%",
+            "chart-2": "240 1% 74%",
+            "chart-3": "240 1% 58%",
+            "chart-4": "240 1% 42%",
+            "chart-5": "240 2% 26%",
          },
          dark: {
-            'background': '240 5% 6%',
-            'foreground': '60 5% 90%',
-            'primary': '240 0% 90%',
-            'primary-foreground': '60 0% 0%',
-            'secondary': '240 4% 15%',
-            'secondary-foreground': '60 5% 85%',
-            'accent': '240 0% 13%',
-            'accent-foreground': '60 0% 100%',
-            'destructive': '0 60% 50%',
-            'destructive-foreground': '0 0% 98%',
-            'muted': '240 5% 25%',
-            'muted-foreground': '60 5% 85%',
-            'card': '240 4% 10%',
-            'card-foreground': '60 5% 90%',
-            'popover': '240 5% 15%',
-            'popover-foreground': '60 5% 85%',
-            'border': '240 6% 20%',
-            'input': '240 6% 20%',
-            'ring': '240 5% 90%',
-            'chart-1': '359 2% 90%',
-            'chart-2': '240 1% 74%',
-            'chart-3': '240 1% 58%',
-            'chart-4': '240 1% 42%',
-            'chart-5': '240 2% 26%',
+            background: "240 5% 6%",
+            foreground: "60 5% 90%",
+            primary: "240 0% 90%",
+            "primary-foreground": "60 0% 0%",
+            secondary: "240 4% 15%",
+            "secondary-foreground": "60 5% 85%",
+            accent: "240 0% 13%",
+            "accent-foreground": "60 0% 100%",
+            destructive: "0 60% 50%",
+            "destructive-foreground": "0 0% 98%",
+            muted: "240 5% 25%",
+            "muted-foreground": "60 5% 85%",
+            card: "240 4% 10%",
+            "card-foreground": "60 5% 90%",
+            popover: "240 5% 15%",
+            "popover-foreground": "60 5% 85%",
+            border: "240 6% 20%",
+            input: "240 6% 20%",
+            ring: "240 5% 90%",
+            "chart-1": "359 2% 90%",
+            "chart-2": "240 1% 74%",
+            "chart-3": "240 1% 58%",
+            "chart-4": "240 1% 42%",
+            "chart-5": "240 2% 26%",
          },
       },
    },
    {
-      name: 'theme-emerald',
-      type: 'registry:theme',
+      name: "theme-emerald",
+      type: "registry:theme",
       cssVars: {
          light: {
-            'background': '0 0% 100%',
-            'foreground': '240 10% 3.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '240 10% 3.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '240 10% 3.9%',
-            'primary': '142 86% 28%',
-            'primary-foreground': '356 29% 98%',
-            'secondary': '240 4.8% 95.9%',
-            'secondary-foreground': '240 5.9% 10%',
-            'muted': '240 4.8% 95.9%',
-            'muted-foreground': '240 3.8% 45%',
-            'accent': '240 4.8% 95.9%',
-            'accent-foreground': '240 5.9% 10%',
-            'destructive': '0 72% 51%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '240 5.9% 90%',
-            'input': '240 5.9% 90%',
-            'ring': '142 86% 28%',
-            'chart-1': '139 65% 20%',
-            'chart-2': '140 74% 44%',
-            'chart-3': '142 88% 28%',
-            'chart-4': '137 55% 15%',
-            'chart-5': '141 40% 9%',
+            background: "0 0% 100%",
+            foreground: "240 10% 3.9%",
+            card: "0 0% 100%",
+            "card-foreground": "240 10% 3.9%",
+            popover: "0 0% 100%",
+            "popover-foreground": "240 10% 3.9%",
+            primary: "142 86% 28%",
+            "primary-foreground": "356 29% 98%",
+            secondary: "240 4.8% 95.9%",
+            "secondary-foreground": "240 5.9% 10%",
+            muted: "240 4.8% 95.9%",
+            "muted-foreground": "240 3.8% 45%",
+            accent: "240 4.8% 95.9%",
+            "accent-foreground": "240 5.9% 10%",
+            destructive: "0 72% 51%",
+            "destructive-foreground": "0 0% 98%",
+            border: "240 5.9% 90%",
+            input: "240 5.9% 90%",
+            ring: "142 86% 28%",
+            "chart-1": "139 65% 20%",
+            "chart-2": "140 74% 44%",
+            "chart-3": "142 88% 28%",
+            "chart-4": "137 55% 15%",
+            "chart-5": "141 40% 9%",
          },
          dark: {
-            'background': '240 10% 3.9%',
-            'foreground': '0 0% 98%',
-            'card': '240 10% 3.9%',
-            'card-foreground': '0 0% 98%',
-            'popover': '240 10% 3.9%',
-            'popover-foreground': '0 0% 98%',
-            'primary': '142 86% 28%',
-            'primary-foreground': '356 29% 98%',
-            'secondary': '240 4.8% 95.9%',
-            'secondary-foreground': '240 5.9% 10%',
-            'muted': '240 3.7% 15.9%',
-            'muted-foreground': '240 5% 64.9%',
-            'accent': '240 3.7% 15.9%',
-            'accent-foreground': '0 0% 98%',
-            'destructive': '0 72% 51%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '240 3.7% 15.9%',
-            'input': '240 3.7% 15.9%',
-            'ring': '142 86% 28%',
-            'chart-1': '142 88% 28%',
-            'chart-2': '139 65% 20%',
-            'chart-3': '140 74% 24%',
-            'chart-4': '137 55% 15%',
-            'chart-5': '141 40% 9%',
+            background: "240 10% 3.9%",
+            foreground: "0 0% 98%",
+            card: "240 10% 3.9%",
+            "card-foreground": "0 0% 98%",
+            popover: "240 10% 3.9%",
+            "popover-foreground": "0 0% 98%",
+            primary: "142 86% 28%",
+            "primary-foreground": "356 29% 98%",
+            secondary: "240 4.8% 95.9%",
+            "secondary-foreground": "240 5.9% 10%",
+            muted: "240 3.7% 15.9%",
+            "muted-foreground": "240 5% 64.9%",
+            accent: "240 3.7% 15.9%",
+            "accent-foreground": "0 0% 98%",
+            destructive: "0 72% 51%",
+            "destructive-foreground": "0 0% 98%",
+            border: "240 3.7% 15.9%",
+            input: "240 3.7% 15.9%",
+            ring: "142 86% 28%",
+            "chart-1": "142 88% 28%",
+            "chart-2": "139 65% 20%",
+            "chart-3": "140 74% 24%",
+            "chart-4": "137 55% 15%",
+            "chart-5": "141 40% 9%",
          },
       },
    },
diff --git a/apps/web/registry/registry-ui.ts b/apps/web/registry/registry-ui.ts
index 351ead32..efeba6cc 100644
--- a/apps/web/registry/registry-ui.ts
+++ b/apps/web/registry/registry-ui.ts
@@ -1,14 +1,14 @@
-import type { Registry } from '~/registry/schema'
+import type { Registry } from "nyxb/registry"
 
-export const ui: Registry = [
+export const ui: Registry["items"] = [
    {
-      name: 'accordion',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-accordion'],
+      name: "accordion",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-accordion"],
       files: [
          {
-            path: 'ui/accordion.tsx',
-            type: 'registry:component',
+            path: "ui/accordion.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -16,18 +16,20 @@ export const ui: Registry = [
             theme: {
                extend: {
                   keyframes: {
-                     'accordion-down': {
-                        from: { height: '0' },
-                        to: { height: 'var(--radix-accordion-content-height)' },
+                     "accordion-down": {
+                        from: { height: "0" },
+                        to: { height: "var(--radix-accordion-content-height)" },
                      },
-                     'accordion-up': {
-                        from: { height: 'var(--radix-accordion-content-height)' },
-                        to: { height: '0' },
+                     "accordion-up": {
+                        from: {
+                           height: "var(--radix-accordion-content-height)",
+                        },
+                        to: { height: "0" },
                      },
                   },
                   animation: {
-                     'accordion-down': 'accordion-down 0.2s ease-out',
-                     'accordion-up': 'accordion-up 0.2s ease-out',
+                     "accordion-down": "accordion-down 0.2s ease-out",
+                     "accordion-up": "accordion-up 0.2s ease-out",
                   },
                },
             },
@@ -35,67 +37,67 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'alert',
-      type: 'registry:ui',
+      name: "alert",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/alert.tsx',
-            type: 'registry:component',
+            path: "ui/alert.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'alert-dialog',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-alert-dialog'],
-      registryDependencies: ['button'],
+      name: "alert-dialog",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-alert-dialog"],
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'ui/alert-dialog.tsx',
-            type: 'registry:component',
+            path: "ui/alert-dialog.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'animated-beam',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "animated-beam",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/animated-beam.tsx',
-            type: 'registry:component',
+            path: "ui/animated-beam.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'animated-grid-pattern',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "animated-grid-pattern",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/animated-grid-pattern.tsx',
-            type: 'registry:component',
+            path: "ui/animated-grid-pattern.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'animated-list',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "animated-list",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/animated-list.tsx',
-            type: 'registry:component',
+            path: "ui/animated-list.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'animated-shiny-text',
-      type: 'registry:ui',
+      name: "animated-shiny-text",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/animated-shiny-text.tsx',
-            type: 'registry:component',
+            path: "ui/animated-shiny-text.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -103,15 +105,17 @@ export const ui: Registry = [
             theme: {
                extend: {
                   animation: {
-                     'shiny-text': 'shiny-text 8s infinite',
+                     "shiny-text": "shiny-text 8s infinite",
                   },
                   keyframes: {
-                     'shiny-text': {
-                        '0%, 90%, 100%': {
-                           'background-position': 'calc(-100% - var(--shiny-width)) 0',
+                     "shiny-text": {
+                        "0%, 90%, 100%": {
+                           "background-position":
+                              "calc(-100% - var(--shiny-width)) 0",
                         },
-                        '30%, 60%': {
-                           'background-position': 'calc(100% + var(--shiny-width)) 0',
+                        "30%, 60%": {
+                           "background-position":
+                              "calc(100% + var(--shiny-width)) 0",
                         },
                      },
                   },
@@ -121,23 +125,23 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'animated-subscribe-button',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "animated-subscribe-button",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/animated-subscribe-button.tsx',
-            type: 'registry:component',
+            path: "ui/animated-subscribe-button.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'animated-gradient-text',
-      type: 'registry:ui',
+      name: "animated-gradient-text",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/animated-gradient-text.tsx',
-            type: 'registry:component',
+            path: "ui/animated-gradient-text.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -145,12 +149,12 @@ export const ui: Registry = [
             theme: {
                extend: {
                   animation: {
-                     gradient: 'gradient 8s linear infinite',
+                     gradient: "gradient 8s linear infinite",
                   },
                   keyframes: {
                      gradient: {
                         to: {
-                           backgroundPosition: 'var(--bg-size) 0',
+                           backgroundPosition: "var(--bg-size) 0",
                         },
                      },
                   },
@@ -160,76 +164,76 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'aspect-ratio',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-aspect-ratio'],
+      name: "aspect-ratio",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-aspect-ratio"],
       files: [
          {
-            path: 'ui/aspect-ratio.tsx',
-            type: 'registry:component',
+            path: "ui/aspect-ratio.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'avatar',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-avatar'],
+      name: "avatar",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-avatar"],
       files: [
          {
-            path: 'ui/avatar.tsx',
-            type: 'registry:component',
+            path: "ui/avatar.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'avatar-circles',
-      type: 'registry:ui',
+      name: "avatar-circles",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/avatar-circles.tsx',
-            type: 'registry:component',
+            path: "ui/avatar-circles.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'badge',
-      type: 'registry:ui',
+      name: "badge",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/badge.tsx',
-            type: 'registry:component',
+            path: "ui/badge.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'bento-grid',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-icons'],
+      name: "bento-grid",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-icons"],
       files: [
          {
-            path: 'ui/bento-grid.tsx',
-            type: 'registry:component',
+            path: "ui/bento-grid.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'blur-in',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "blur-in",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/blur-in.tsx',
-            type: 'registry:component',
+            path: "ui/blur-in.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'border-beam',
-      type: 'registry:ui',
+      name: "border-beam",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/border-beam.tsx',
-            type: 'registry:component',
+            path: "ui/border-beam.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -237,13 +241,13 @@ export const ui: Registry = [
             theme: {
                extend: {
                   animation: {
-                     'border-beam':
-                  'border-beam calc(var(--duration)*1s) infinite linear',
+                     "border-beam":
+                        "border-beam calc(var(--duration)*1s) infinite linear",
                   },
                   keyframes: {
-                     'border-beam': {
-                        '100%': {
-                           'offset-distance': '100%',
+                     "border-beam": {
+                        "100%": {
+                           "offset-distance": "100%",
                         },
                      },
                   },
@@ -253,424 +257,424 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'box-reveal',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "box-reveal",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/box-reveal.tsx',
-            type: 'registry:component',
+            path: "ui/box-reveal.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'breadcrumb',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-slot'],
+      name: "breadcrumb",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-slot"],
       files: [
          {
-            path: 'ui/breadcrumb.tsx',
-            type: 'registry:component',
+            path: "ui/breadcrumb.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'blur-fade',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "blur-fade",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/blur-fade.tsx',
-            type: 'registry:component',
+            path: "ui/blur-fade.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'button',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-slot'],
+      name: "button",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-slot"],
       files: [
          {
-            path: 'ui/button.tsx',
-            type: 'registry:component',
+            path: "ui/button.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'calendar',
-      type: 'registry:ui',
-      dependencies: ['react-day-picker@8.10.1', 'date-fns'],
-      registryDependencies: ['button'],
+      name: "calendar",
+      type: "registry:ui",
+      dependencies: ["react-day-picker@8.10.1", "date-fns"],
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'ui/calendar.tsx',
-            type: 'registry:component',
+            path: "ui/calendar.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'card',
-      type: 'registry:ui',
+      name: "card",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/card.tsx',
-            type: 'registry:component',
+            path: "ui/card.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'carousel',
-      type: 'registry:ui',
+      name: "carousel",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/carousel.tsx',
-            type: 'registry:component',
+            path: "ui/carousel.tsx",
+            type: "registry:ui",
          },
       ],
-      registryDependencies: ['button'],
-      dependencies: ['embla-carousel-react'],
+      registryDependencies: ["button"],
+      dependencies: ["embla-carousel-react"],
    },
    {
-      name: 'chart',
-      type: 'registry:ui',
+      name: "chart",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/chart.tsx',
-            type: 'registry:component',
+            path: "ui/chart.tsx",
+            type: "registry:ui",
          },
       ],
-      registryDependencies: ['card'],
-      dependencies: ['recharts', 'lucide-react'],
+      registryDependencies: ["card"],
+      dependencies: ["recharts", "lucide-react"],
    },
    {
-      name: 'checkbox',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-checkbox'],
+      name: "checkbox",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-checkbox"],
       files: [
          {
-            path: 'ui/checkbox.tsx',
-            type: 'registry:component',
+            path: "ui/checkbox.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'client-tweet-card',
-      type: 'registry:ui',
-      dependencies: ['react-tweet'],
+      name: "client-tweet-card",
+      type: "registry:ui",
+      dependencies: ["react-tweet"],
       files: [
          {
-            path: 'ui/client-tweet-card.tsx',
-            type: 'registry:component',
+            path: "ui/client-tweet-card.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'collapsible',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-collapsible'],
+      name: "collapsible",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-collapsible"],
       files: [
          {
-            path: 'ui/collapsible.tsx',
-            type: 'registry:component',
+            path: "ui/collapsible.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'command',
-      type: 'registry:ui',
-      dependencies: ['cmdk@1.0.0'],
-      registryDependencies: ['dialog'],
+      name: "command",
+      type: "registry:ui",
+      dependencies: ["cmdk@1.0.0"],
+      registryDependencies: ["dialog"],
       files: [
          {
-            path: 'ui/command.tsx',
-            type: 'registry:component',
+            path: "ui/command.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'confetti',
-      type: 'registry:ui',
-      dependencies: ['canvas-confetti', '@types/canvas-confetti'],
+      name: "confetti",
+      type: "registry:ui",
+      dependencies: ["canvas-confetti", "@types/canvas-confetti"],
       files: [
          {
-            path: 'ui/confetti.tsx',
-            type: 'registry:component',
+            path: "ui/confetti.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'context-menu',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-context-menu'],
+      name: "context-menu",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-context-menu"],
       files: [
          {
-            path: 'ui/context-menu.tsx',
-            type: 'registry:component',
+            path: "ui/context-menu.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'cool-mode',
-      type: 'registry:ui',
+      name: "cool-mode",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/cool-mode.tsx',
-            type: 'registry:component',
+            path: "ui/cool-mode.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'dialog',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-dialog'],
+      name: "dialog",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-dialog"],
       files: [
          {
-            path: 'ui/dialog.tsx',
-            type: 'registry:component',
+            path: "ui/dialog.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'dock',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "dock",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/dock.tsx',
-            type: 'registry:component',
+            path: "ui/dock.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'dot-pattern',
-      type: 'registry:ui',
+      name: "dot-pattern",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/dot-pattern.tsx',
-            type: 'registry:component',
+            path: "ui/dot-pattern.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'drawer',
-      type: 'registry:ui',
-      dependencies: ['vaul', '@radix-ui/react-dialog'],
+      name: "drawer",
+      type: "registry:ui",
+      dependencies: ["vaul", "@radix-ui/react-dialog"],
       files: [
          {
-            path: 'ui/drawer.tsx',
-            type: 'registry:component',
+            path: "ui/drawer.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'dropdown-menu',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-dropdown-menu'],
+      name: "dropdown-menu",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-dropdown-menu"],
       files: [
          {
-            path: 'ui/dropdown-menu.tsx',
-            type: 'registry:component',
+            path: "ui/dropdown-menu.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'fade-text',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "fade-text",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/fade-text.tsx',
-            type: 'registry:component',
+            path: "ui/fade-text.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'file-tree',
-      type: 'registry:ui',
+      name: "file-tree",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/file-tree.tsx',
-            type: 'registry:component',
+            path: "ui/file-tree.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'flip-text',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "flip-text",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/flip-text.tsx',
-            type: 'registry:component',
+            path: "ui/flip-text.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'form',
-      type: 'registry:ui',
+      name: "form",
+      type: "registry:ui",
       dependencies: [
-         '@radix-ui/react-label',
-         '@radix-ui/react-slot',
-         '@hookform/resolvers',
-         'zod',
-         'react-hook-form',
+         "@radix-ui/react-label",
+         "@radix-ui/react-slot",
+         "@hookform/resolvers",
+         "zod",
+         "react-hook-form",
       ],
-      registryDependencies: ['button', 'label'],
+      registryDependencies: ["button", "label"],
       files: [
          {
-            path: 'ui/form.tsx',
-            type: 'registry:component',
+            path: "ui/form.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'globe',
-      type: 'registry:ui',
-      dependencies: ['cobe', 'react-spring'],
+      name: "globe",
+      type: "registry:ui",
+      dependencies: ["cobe", "react-spring"],
       files: [
          {
-            path: 'ui/globe.tsx',
-            type: 'registry:component',
+            path: "ui/globe.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'gradual-spacing',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "gradual-spacing",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/gradual-spacing.tsx',
-            type: 'registry:component',
+            path: "ui/gradual-spacing.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'grid-pattern',
-      type: 'registry:ui',
+      name: "grid-pattern",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/grid-pattern.tsx',
-            type: 'registry:component',
+            path: "ui/grid-pattern.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'gauge-circle',
-      type: 'registry:ui',
+      name: "gauge-circle",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/gauge-circle.tsx',
-            type: 'registry:component',
+            path: "ui/gauge-circle.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'hero-video-dialog',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "hero-video-dialog",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/hero-video-dialog.tsx',
-            type: 'registry:component',
+            path: "ui/hero-video-dialog.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'hover-card',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-hover-card'],
+      name: "hover-card",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-hover-card"],
       files: [
          {
-            path: 'ui/hover-card.tsx',
-            type: 'registry:component',
+            path: "ui/hover-card.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'icon-cloud',
-      type: 'registry:ui',
-      dependencies: ['next-themes', 'react-icon-cloud'],
+      name: "icon-cloud",
+      type: "registry:ui",
+      dependencies: ["next-themes", "react-icon-cloud"],
       files: [
          {
-            path: 'ui/icon-cloud.tsx',
-            type: 'registry:component',
+            path: "ui/icon-cloud.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'input',
-      type: 'registry:ui',
+      name: "input",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/input.tsx',
-            type: 'registry:component',
+            path: "ui/input.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'input-otp',
-      type: 'registry:ui',
-      dependencies: ['input-otp'],
+      name: "input-otp",
+      type: "registry:ui",
+      dependencies: ["input-otp"],
       files: [
          {
-            path: 'ui/input-otp.tsx',
-            type: 'registry:component',
+            path: "ui/input-otp.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'input-phone',
-      type: 'registry:ui',
-      dependencies: ['react-phone-number-input', '@radix-ui/react-icons'],
-      registryDependencies: ['button', 'input', 'popover', 'command'],
+      name: "input-phone",
+      type: "registry:ui",
+      dependencies: ["react-phone-number-input", "@radix-ui/react-icons"],
+      registryDependencies: ["button", "input", "popover", "command"],
       files: [
          {
-            path: 'ui/input-phone.tsx',
-            type: 'registry:component',
+            path: "ui/input-phone.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'label',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-label'],
+      name: "label",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-label"],
       files: [
          {
-            path: 'ui/label.tsx',
-            type: 'registry:component',
+            path: "ui/label.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'letter-pullup',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "letter-pullup",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/letter-pullup.tsx',
-            type: 'registry:component',
+            path: "ui/letter-pullup.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'magic-card',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "magic-card",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/magic-card.tsx',
-            type: 'registry:component',
+            path: "ui/magic-card.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'marquee',
-      type: 'registry:ui',
+      name: "marquee",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/marquee.tsx',
-            type: 'registry:component',
+            path: "ui/marquee.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -678,19 +682,23 @@ export const ui: Registry = [
             theme: {
                extend: {
                   keyframes: {
-                     'marquee': {
-                        from: { transform: 'translateX(0)' },
-                        to: { transform: 'translateX(calc(-100% - var(--gap)))' },
+                     marquee: {
+                        from: { transform: "translateX(0)" },
+                        to: {
+                           transform: "translateX(calc(-100% - var(--gap)))",
+                        },
                      },
-                     'marquee-vertical': {
-                        from: { transform: 'translateY(0)' },
-                        to: { transform: 'translateY(calc(-100% - var(--gap)))' },
+                     "marquee-vertical": {
+                        from: { transform: "translateY(0)" },
+                        to: {
+                           transform: "translateY(calc(-100% - var(--gap)))",
+                        },
                      },
                   },
                   animation: {
-                     'marquee': 'marquee var(--duration) infinite linear',
-                     'marquee-vertical':
-                  'marquee-vertical var(--duration) linear infinite',
+                     marquee: "marquee var(--duration) infinite linear",
+                     "marquee-vertical":
+                        "marquee-vertical var(--duration) linear infinite",
                   },
                },
             },
@@ -698,54 +706,54 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'menubar',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-menubar'],
+      name: "menubar",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-menubar"],
       files: [
          {
-            path: 'ui/menubar.tsx',
-            type: 'registry:component',
+            path: "ui/menubar.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'meteors',
-      type: 'registry:ui',
+      name: "meteors",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/meteors.tsx',
-            type: 'registry:component',
+            path: "ui/meteors.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'multi-select',
-      type: 'registry:ui',
+      name: "multi-select",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/multi-select.tsx',
-            type: 'registry:component',
+            path: "ui/multi-select.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'navigation-menu',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-navigation-menu'],
+      name: "navigation-menu",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-navigation-menu"],
       files: [
          {
-            path: 'ui/navigation-menu.tsx',
-            type: 'registry:component',
+            path: "ui/navigation-menu.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'neon-gradient-card',
-      type: 'registry:ui',
+      name: "neon-gradient-card",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/neon-gradient-card.tsx',
-            type: 'registry:component',
+            path: "ui/neon-gradient-card.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -753,13 +761,13 @@ export const ui: Registry = [
             theme: {
                extend: {
                   animation: {
-                     'background-position-spin':
-                  'background-position-spin 3000ms infinite alternate',
+                     "background-position-spin":
+                        "background-position-spin 3000ms infinite alternate",
                   },
                   keyframes: {
-                     'background-position-spin': {
-                        '0%': { backgroundPosition: 'top center' },
-                        '100%': { backgroundPosition: 'bottom center' },
+                     "background-position-spin": {
+                        "0%": { backgroundPosition: "top center" },
+                        "100%": { backgroundPosition: "bottom center" },
                      },
                   },
                },
@@ -768,23 +776,23 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'number-ticker',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "number-ticker",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/number-ticker.tsx',
-            type: 'registry:component',
+            path: "ui/number-ticker.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'orbiting-circles',
-      type: 'registry:ui',
+      name: "orbiting-circles",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/orbiting-circles.tsx',
-            type: 'registry:component',
+            path: "ui/orbiting-circles.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -792,17 +800,17 @@ export const ui: Registry = [
             theme: {
                extend: {
                   animation: {
-                     orbit: 'orbit calc(var(--duration)*1s) linear infinite',
+                     orbit: "orbit calc(var(--duration)*1s) linear infinite",
                   },
                   keyframes: {
                      orbit: {
-                        '0%': {
+                        "0%": {
                            transform:
-                      'rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)',
+                              "rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)",
                         },
-                        '100%': {
+                        "100%": {
                            transform:
-                      'rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)',
+                              "rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)",
                         },
                      },
                   },
@@ -812,55 +820,55 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'pagination',
-      type: 'registry:ui',
-      registryDependencies: ['button'],
+      name: "pagination",
+      type: "registry:ui",
+      registryDependencies: ["button"],
       files: [
          {
-            path: 'ui/pagination.tsx',
-            type: 'registry:component',
+            path: "ui/pagination.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'particles',
-      type: 'registry:ui',
+      name: "particles",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/particles.tsx',
-            type: 'registry:component',
+            path: "ui/particles.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'popover',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-popover'],
+      name: "popover",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-popover"],
       files: [
          {
-            path: 'ui/popover.tsx',
-            type: 'registry:component',
+            path: "ui/popover.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'progress',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-progress'],
+      name: "progress",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-progress"],
       files: [
          {
-            path: 'ui/progress.tsx',
-            type: 'registry:component',
+            path: "ui/progress.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'pulsating-button',
-      type: 'registry:ui',
+      name: "pulsating-button",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/pulsating-button.tsx',
-            type: 'registry:component',
+            path: "ui/pulsating-button.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -868,12 +876,12 @@ export const ui: Registry = [
             theme: {
                extend: {
                   animation: {
-                     pulse: 'pulse var(--duration) ease-out infinite',
+                     pulse: "pulse var(--duration) ease-out infinite",
                   },
                   keyframes: {
                      pulse: {
-                        '0%, 100%': { boxShadow: '0 0 0 0 var(--pulse-color)' },
-                        '50%': { boxShadow: '0 0 0 8px var(--pulse-color)' },
+                        "0%, 100%": { boxShadow: "0 0 0 0 var(--pulse-color)" },
+                        "50%": { boxShadow: "0 0 0 8px var(--pulse-color)" },
                      },
                   },
                },
@@ -882,34 +890,34 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'radio-group',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-radio-group'],
+      name: "radio-group",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-radio-group"],
       files: [
          {
-            path: 'ui/radio-group.tsx',
-            type: 'registry:component',
+            path: "ui/radio-group.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'resizable',
-      type: 'registry:ui',
-      dependencies: ['react-resizable-panels'],
+      name: "resizable",
+      type: "registry:ui",
+      dependencies: ["react-resizable-panels"],
       files: [
          {
-            path: 'ui/resizable.tsx',
-            type: 'registry:component',
+            path: "ui/resizable.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'retro-grid',
-      type: 'registry:ui',
+      name: "retro-grid",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/retro-grid.tsx',
-            type: 'registry:component',
+            path: "ui/retro-grid.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -917,12 +925,12 @@ export const ui: Registry = [
             theme: {
                extend: {
                   animation: {
-                     grid: 'grid 15s linear infinite',
+                     grid: "grid 15s linear infinite",
                   },
                   keyframes: {
                      grid: {
-                        '0%': { transform: 'translateY(-50%)' },
-                        '100%': { transform: 'translateY(0)' },
+                        "0%": { transform: "translateY(-50%)" },
+                        "100%": { transform: "translateY(0)" },
                      },
                   },
                },
@@ -931,12 +939,12 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'ripple',
-      type: 'registry:ui',
+      name: "ripple",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/ripple.tsx',
-            type: 'registry:component',
+            path: "ui/ripple.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -945,15 +953,15 @@ export const ui: Registry = [
                extend: {
                   animation: {
                      ripple:
-                  'ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite',
+                        "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite",
                   },
                   keyframes: {
                      ripple: {
-                        '0%, 100%': {
-                           transform: 'translate(-50%, -50%) scale(1)',
+                        "0%, 100%": {
+                           transform: "translate(-50%, -50%) scale(1)",
                         },
-                        '50%': {
-                           transform: 'translate(-50%, -50%) scale(0.9)',
+                        "50%": {
+                           transform: "translate(-50%, -50%) scale(0.9)",
                         },
                      },
                   },
@@ -963,89 +971,89 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'scroll-area',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-scroll-area'],
+      name: "scroll-area",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-scroll-area"],
       files: [
          {
-            path: 'ui/scroll-area.tsx',
-            type: 'registry:component',
+            path: "ui/scroll-area.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'scroll-based-velocity',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "scroll-based-velocity",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/scroll-based-velocity.tsx',
-            type: 'registry:component',
+            path: "ui/scroll-based-velocity.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'scroll-progress',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "scroll-progress",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/scroll-progress.tsx',
-            type: 'registry:component',
+            path: "ui/scroll-progress.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'select',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-select'],
+      name: "select",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-select"],
       files: [
          {
-            path: 'ui/select.tsx',
-            type: 'registry:component',
+            path: "ui/select.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'separate-away',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "separate-away",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/separate-away.tsx',
-            type: 'registry:component',
+            path: "ui/separate-away.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'separator',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-separator'],
+      name: "separator",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-separator"],
       files: [
          {
-            path: 'ui/separator.tsx',
-            type: 'registry:component',
+            path: "ui/separator.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'sheet',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-dialog'],
+      name: "sheet",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-dialog"],
       files: [
          {
-            path: 'ui/sheet.tsx',
-            type: 'registry:component',
+            path: "ui/sheet.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'shimmer-button',
-      type: 'registry:ui',
+      name: "shimmer-button",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/shimmer-button.tsx',
-            type: 'registry:component',
+            path: "ui/shimmer-button.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -1053,29 +1061,29 @@ export const ui: Registry = [
             theme: {
                extend: {
                   animation: {
-                     'shimmer-slide':
-                  'shimmer-slide var(--speed) ease-in-out infinite alternate',
-                     'spin-around':
-                  'spin-around calc(var(--speed) * 2) infinite linear',
+                     "shimmer-slide":
+                        "shimmer-slide var(--speed) ease-in-out infinite alternate",
+                     "spin-around":
+                        "spin-around calc(var(--speed) * 2) infinite linear",
                   },
                   keyframes: {
-                     'shimmer-slide': {
+                     "shimmer-slide": {
                         to: {
-                           transform: 'translate(calc(100cqw - 100%), 0)',
+                           transform: "translate(calc(100cqw - 100%), 0)",
                         },
                      },
-                     'spin-around': {
-                        '0%': {
-                           transform: 'translateZ(0) rotate(0)',
+                     "spin-around": {
+                        "0%": {
+                           transform: "translateZ(0) rotate(0)",
                         },
-                        '15%, 35%': {
-                           transform: 'translateZ(0) rotate(90deg)',
+                        "15%, 35%": {
+                           transform: "translateZ(0) rotate(90deg)",
                         },
-                        '65%, 85%': {
-                           transform: 'translateZ(0) rotate(270deg)',
+                        "65%, 85%": {
+                           transform: "translateZ(0) rotate(270deg)",
                         },
-                        '100%': {
-                           transform: 'translateZ(0) rotate(360deg)',
+                        "100%": {
+                           transform: "translateZ(0) rotate(360deg)",
                         },
                      },
                   },
@@ -1085,12 +1093,12 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'shine-border',
-      type: 'registry:ui',
+      name: "shine-border",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/shine-border.tsx',
-            type: 'registry:component',
+            path: "ui/shine-border.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -1098,18 +1106,18 @@ export const ui: Registry = [
             theme: {
                extend: {
                   animation: {
-                     shine: 'shine var(--duration) infinite linear',
+                     shine: "shine var(--duration) infinite linear",
                   },
                   keyframes: {
                      shine: {
-                        '0%': {
-                           'background-position': '0% 0%',
+                        "0%": {
+                           "background-position": "0% 0%",
                         },
-                        '50%': {
-                           'background-position': '100% 100%',
+                        "50%": {
+                           "background-position": "100% 100%",
                         },
-                        'to': {
-                           'background-position': '0% 0%',
+                        to: {
+                           "background-position": "0% 0%",
                         },
                      },
                   },
@@ -1119,37 +1127,37 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'shiny-button',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "shiny-button",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/shiny-button.tsx',
-            type: 'registry:component',
+            path: "ui/shiny-button.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'sidebar',
-      type: 'registry:ui',
+      name: "sidebar",
+      type: "registry:ui",
       dependencies: [
-         '@radix-ui/react-slot',
-         'class-variance-authority',
-         'lucide-react',
+         "@radix-ui/react-slot",
+         "class-variance-authority",
+         "lucide-react",
       ],
       registryDependencies: [
-         'button',
-         'separator',
-         'sheet',
-         'tooltip',
-         'input',
-         'use-mobile',
-         'skeleton',
+         "button",
+         "separator",
+         "sheet",
+         "tooltip",
+         "input",
+         "use-mobile",
+         "skeleton",
       ],
       files: [
          {
-            path: 'ui/sidebar.tsx',
-            type: 'registry:component',
+            path: "ui/sidebar.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -1158,14 +1166,16 @@ export const ui: Registry = [
                extend: {
                   colors: {
                      sidebar: {
-                        'DEFAULT': 'hsl(var(--sidebar-background))',
-                        'foreground': 'hsl(var(--sidebar-foreground))',
-                        'primary': 'hsl(var(--sidebar-primary))',
-                        'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-                        'accent': 'hsl(var(--sidebar-accent))',
-                        'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-                        'border': 'hsl(var(--sidebar-border))',
-                        'ring': 'hsl(var(--sidebar-ring))',
+                        DEFAULT: "hsl(var(--sidebar-background))",
+                        foreground: "hsl(var(--sidebar-foreground))",
+                        primary: "hsl(var(--sidebar-primary))",
+                        "primary-foreground":
+                           "hsl(var(--sidebar-primary-foreground))",
+                        accent: "hsl(var(--sidebar-accent))",
+                        "accent-foreground":
+                           "hsl(var(--sidebar-accent-foreground))",
+                        border: "hsl(var(--sidebar-border))",
+                        ring: "hsl(var(--sidebar-ring))",
                      },
                   },
                },
@@ -1174,270 +1184,270 @@ export const ui: Registry = [
       },
       cssVars: {
          light: {
-            'sidebar-background': '0 0% 98%',
-            'sidebar-foreground': '240 5.3% 26.1%',
-            'sidebar-primary': '240 5.9% 10%',
-            'sidebar-primary-foreground': '0 0% 98%',
-            'sidebar-accent': '240 4.8% 95.9%',
-            'sidebar-accent-foreground': '240 5.9% 10%',
-            'sidebar-border': '220 13% 91%',
-            'sidebar-ring': '217.2 91.2% 59.8%',
+            "sidebar-background": "0 0% 98%",
+            "sidebar-foreground": "240 5.3% 26.1%",
+            "sidebar-primary": "240 5.9% 10%",
+            "sidebar-primary-foreground": "0 0% 98%",
+            "sidebar-accent": "240 4.8% 95.9%",
+            "sidebar-accent-foreground": "240 5.9% 10%",
+            "sidebar-border": "220 13% 91%",
+            "sidebar-ring": "217.2 91.2% 59.8%",
          },
          dark: {
-            'sidebar-background': '240 5.9% 10%',
-            'sidebar-foreground': '240 4.8% 95.9%',
-            'sidebar-primary': '224.3 76.3% 48%',
-            'sidebar-primary-foreground': '0 0% 100%',
-            'sidebar-accent': '240 3.7% 15.9%',
-            'sidebar-accent-foreground': '240 4.8% 95.9%',
-            'sidebar-border': '240 3.7% 15.9%',
-            'sidebar-ring': '217.2 91.2% 59.8%',
+            "sidebar-background": "240 5.9% 10%",
+            "sidebar-foreground": "240 4.8% 95.9%",
+            "sidebar-primary": "224.3 76.3% 48%",
+            "sidebar-primary-foreground": "0 0% 100%",
+            "sidebar-accent": "240 3.7% 15.9%",
+            "sidebar-accent-foreground": "240 4.8% 95.9%",
+            "sidebar-border": "240 3.7% 15.9%",
+            "sidebar-ring": "217.2 91.2% 59.8%",
          },
       },
    },
    {
-      name: 'skeleton',
-      type: 'registry:ui',
+      name: "skeleton",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/skeleton.tsx',
-            type: 'registry:component',
+            path: "ui/skeleton.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'slider',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-slider'],
+      name: "slider",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-slider"],
       files: [
          {
-            path: 'ui/slider.tsx',
-            type: 'registry:component',
+            path: "ui/slider.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'sonner',
-      type: 'registry:ui',
-      dependencies: ['sonner', 'next-themes'],
+      name: "sonner",
+      type: "registry:ui",
+      dependencies: ["sonner", "next-themes"],
       files: [
          {
-            path: 'ui/sonner.tsx',
-            type: 'registry:component',
+            path: "ui/sonner.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'sparkles-text',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "sparkles-text",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/sparkles-text.tsx',
-            type: 'registry:component',
+            path: "ui/sparkles-text.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'star-rating',
-      type: 'registry:ui',
-      dependencies: ['lucide-react'],
+      name: "star-rating",
+      type: "registry:ui",
+      dependencies: ["lucide-react"],
       files: [
          {
-            path: 'ui/star-rating.tsx',
-            type: 'registry:component',
+            path: "ui/star-rating.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'switch',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-switch'],
+      name: "switch",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-switch"],
       files: [
          {
-            path: 'ui/switch.tsx',
-            type: 'registry:component',
+            path: "ui/switch.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'stepper',
-      type: 'registry:ui',
-      dependencies: ['lucide-react'],
-      registryDependencies: ['collapsible'],
+      name: "stepper",
+      type: "registry:ui",
+      dependencies: ["lucide-react"],
+      registryDependencies: ["collapsible"],
       files: [
          {
-            path: 'ui/stepper.tsx',
-            type: 'registry:component',
+            path: "ui/stepper.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'scratch-to-reveal',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "scratch-to-reveal",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/scratch-to-reveal.tsx',
-            type: 'registry:component',
+            path: "ui/scratch-to-reveal.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'table',
-      type: 'registry:ui',
+      name: "table",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/table.tsx',
-            type: 'registry:component',
+            path: "ui/table.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'tabs',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-tabs'],
+      name: "tabs",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-tabs"],
       files: [
          {
-            path: 'ui/tabs.tsx',
-            type: 'registry:component',
+            path: "ui/tabs.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'textarea',
-      type: 'registry:ui',
+      name: "textarea",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/textarea.tsx',
-            type: 'registry:component',
+            path: "ui/textarea.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'text-reveal',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "text-reveal",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/text-reveal.tsx',
-            type: 'registry:component',
+            path: "ui/text-reveal.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'timeline',
-      type: 'registry:ui',
-      dependencies: ['lucide-react'],
+      name: "timeline",
+      type: "registry:ui",
+      dependencies: ["lucide-react"],
       files: [
          {
-            path: 'ui/timeline.tsx',
-            type: 'registry:component',
+            path: "ui/timeline.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'toc',
-      type: 'registry:ui',
+      name: "toc",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/toc.tsx',
-            type: 'registry:component',
+            path: "ui/toc.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'toast',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-toast'],
+      name: "toast",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-toast"],
       files: [
          {
-            path: 'ui/toast.tsx',
-            type: 'registry:ui',
+            path: "ui/toast.tsx",
+            type: "registry:ui",
          },
          {
-            path: 'hooks/use-toast.ts',
-            type: 'registry:hook',
+            path: "hooks/use-toast.ts",
+            type: "registry:hook",
          },
          {
-            path: 'ui/toaster.tsx',
-            type: 'registry:ui',
+            path: "ui/toaster.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'toggle',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-toggle'],
+      name: "toggle",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-toggle"],
       files: [
          {
-            path: 'ui/toggle.tsx',
-            type: 'registry:component',
+            path: "ui/toggle.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'toggle-group',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-toggle-group'],
-      registryDependencies: ['toggle'],
+      name: "toggle-group",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-toggle-group"],
+      registryDependencies: ["toggle"],
       files: [
          {
-            path: 'ui/toggle-group.tsx',
-            type: 'registry:component',
+            path: "ui/toggle-group.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'tooltip',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-tooltip'],
+      name: "tooltip",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-tooltip"],
       files: [
          {
-            path: 'ui/tooltip.tsx',
-            type: 'registry:component',
+            path: "ui/tooltip.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'tour',
-      type: 'registry:ui',
+      name: "tour",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/tour.tsx',
-            type: 'registry:component',
+            path: "ui/tour.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'typing-animation',
-      type: 'registry:ui',
+      name: "typing-animation",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/typing-animation.tsx',
-            type: 'registry:component',
+            path: "ui/typing-animation.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'tweet-card',
-      type: 'registry:ui',
-      dependencies: ['react-tweet'],
+      name: "tweet-card",
+      type: "registry:ui",
+      dependencies: ["react-tweet"],
       files: [
          {
-            path: 'ui/tweet-card.tsx',
-            type: 'registry:component',
+            path: "ui/tweet-card.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'video-modal',
-      type: 'registry:ui',
-      dependencies: ['@radix-ui/react-dialog'],
+      name: "video-modal",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-dialog"],
       files: [
          {
-            path: 'ui/video-modal.tsx',
-            type: 'registry:component',
+            path: "ui/video-modal.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -1445,17 +1455,17 @@ export const ui: Registry = [
             theme: {
                extend: {
                   animation: {
-                     'modal-fade-in': 'modal-fade-in 500ms ease-out',
-                     'modal-fade-out': 'modal-fade-out 500ms ease-in',
+                     "modal-fade-in": "modal-fade-in 500ms ease-out",
+                     "modal-fade-out": "modal-fade-out 500ms ease-in",
                   },
                   keyframes: {
-                     'modal-fade-in': {
-                        '0%': { opacity: '0' },
-                        '100%': { opacity: '1' },
+                     "modal-fade-in": {
+                        "0%": { opacity: "0" },
+                        "100%": { opacity: "1" },
                      },
-                     'modal-fade-out': {
-                        '0%': { opacity: '1' },
-                        '100%': { opacity: '0' },
+                     "modal-fade-out": {
+                        "0%": { opacity: "1" },
+                        "100%": { opacity: "0" },
                      },
                   },
                },
@@ -1464,83 +1474,72 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'wavy-dot-pattern',
-      type: 'registry:ui',
-      dependencies: ['react-anime'],
+      name: "wavy-text",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/wavy-dot-pattern.tsx',
-            type: 'registry:component',
+            path: "ui/wavy-text.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'wavy-text',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "word-fade-in",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/wavy-text.tsx',
-            type: 'registry:component',
+            path: "ui/word-fade-in.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'word-fade-in',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "word-pull-up",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/word-fade-in.tsx',
-            type: 'registry:component',
+            path: "ui/word-pull-up.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'word-pull-up',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "word-rotate",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/word-pull-up.tsx',
-            type: 'registry:component',
+            path: "ui/word-rotate.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'word-rotate',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "rainbow-button",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/word-rotate.tsx',
-            type: 'registry:component',
-         },
-      ],
-   },
-   {
-      name: 'rainbow-button',
-      type: 'registry:ui',
-      files: [
-         {
-            path: 'ui/rainbow-button.tsx',
-            type: 'registry:component',
+            path: "ui/rainbow-button.tsx",
+            type: "registry:ui",
          },
       ],
       cssVars: {
          light: {
-            '--color-1': '0 100% 63%',
-            '--color-2': '270 100% 63%',
-            '--color-3': '210 100% 63%',
-            '--color-4': '195 100% 63%',
-            '--color-5': '90 100% 63%',
+            "--color-1": "0 100% 63%",
+            "--color-2": "270 100% 63%",
+            "--color-3": "210 100% 63%",
+            "--color-4": "195 100% 63%",
+            "--color-5": "90 100% 63%",
          },
          dark: {
-            '--color-1': '0 100% 63%',
-            '--color-2': '270 100% 63%',
-            '--color-3': '210 100% 63%',
-            '--color-4': '195 100% 63%',
-            '--color-5': '90 100% 63%',
+            "--color-1": "0 100% 63%",
+            "--color-2": "270 100% 63%",
+            "--color-3": "210 100% 63%",
+            "--color-4": "195 100% 63%",
+            "--color-5": "90 100% 63%",
          },
       },
       tailwind: {
@@ -1548,19 +1547,19 @@ export const ui: Registry = [
             theme: {
                extend: {
                   colors: {
-                     'color-1': 'hsl(var(--color-1))',
-                     'color-2': 'hsl(var(--color-2))',
-                     'color-3': 'hsl(var(--color-3))',
-                     'color-4': 'hsl(var(--color-4))',
-                     'color-5': 'hsl(var(--color-5))',
+                     "color-1": "hsl(var(--color-1))",
+                     "color-2": "hsl(var(--color-2))",
+                     "color-3": "hsl(var(--color-3))",
+                     "color-4": "hsl(var(--color-4))",
+                     "color-5": "hsl(var(--color-5))",
                   },
                   animation: {
-                     rainbow: 'rainbow var(--speed, 2s) infinite linear',
+                     rainbow: "rainbow var(--speed, 2s) infinite linear",
                   },
                   keyframes: {
                      rainbow: {
-                        '0%': { 'background-position': '0%' },
-                        '100%': { 'background-position': '200%' },
+                        "0%": { "background-position": "0%" },
+                        "100%": { "background-position": "200%" },
                      },
                   },
                },
@@ -1569,64 +1568,64 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'flickering-grid',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "flickering-grid",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/flickering-grid.tsx',
-            type: 'registry:component',
+            path: "ui/flickering-grid.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'hyper-text',
-      type: 'registry:ui',
-      dependencies: ['framer-motion'],
+      name: "hyper-text",
+      type: "registry:ui",
+      dependencies: ["framer-motion"],
       files: [
          {
-            path: 'ui/hyper-text.tsx',
-            type: 'registry:component',
+            path: "ui/hyper-text.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'safari',
-      type: 'registry:ui',
+      name: "safari",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/safari.tsx',
-            type: 'registry:component',
+            path: "ui/safari.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'iphone-15-pro',
-      type: 'registry:ui',
+      name: "iphone-15-pro",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/iphone-15-pro.tsx',
-            type: 'registry:component',
+            path: "ui/iphone-15-pro.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'animated-circular-progress-bar',
-      type: 'registry:ui',
+      name: "animated-circular-progress-bar",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/animated-circular-progress-bar.tsx',
-            type: 'registry:component',
+            path: "ui/animated-circular-progress-bar.tsx",
+            type: "registry:ui",
          },
       ],
    },
    {
-      name: 'grid-layout',
-      type: 'registry:ui',
+      name: "grid-layout",
+      type: "registry:ui",
       files: [
          {
-            path: 'ui/grid-layout.tsx',
-            type: 'registry:component',
+            path: "ui/grid-layout.tsx",
+            type: "registry:ui",
          },
       ],
       tailwind: {
@@ -1634,12 +1633,13 @@ export const ui: Registry = [
             theme: {
                extend: {
                   borderColor: {
-                     'grid-line': 'hsl(var(--border) / var(--grid-line-opacity))',
+                     "grid-line":
+                        "hsl(var(--border) / var(--grid-line-opacity))",
                   },
                   gridTemplateColumns: {
-                     'grid-16': 'repeat(16, minmax(0, 1fr))',
-                     'grid-12': 'repeat(12, minmax(0, 1fr))',
-                     'grid-8': 'repeat(8, minmax(0, 1fr))',
+                     "grid-16": "repeat(16, minmax(0, 1fr))",
+                     "grid-12": "repeat(12, minmax(0, 1fr))",
+                     "grid-8": "repeat(8, minmax(0, 1fr))",
                   },
                },
             },
@@ -1647,37 +1647,37 @@ export const ui: Registry = [
       },
       cssVars: {
          light: {
-            '--grid-line-opacity': '0.5',
+            "--grid-line-opacity": "0.5",
          },
          dark: {
-            '--grid-line-opacity': '0.5',
+            "--grid-line-opacity": "0.5",
          },
       },
    },
    {
-      name: 'globe-grid',
-      type: 'registry:ui',
+      name: "globe-grid",
+      type: "registry:ui",
       dependencies: [],
       files: [
          {
-            path: 'ui/globe-grid.tsx',
-            type: 'registry:component',
+            path: "ui/globe-grid.tsx",
+            type: "registry:ui",
          },
       ],
       cssVars: {
          light: {
-            '--guide-color': 'rgba(255, 255, 255, 0.1)',
-            '--ds-background-200': 'rgba(0, 0, 0, 0.5)',
-            '--line-color-1': 'hsl(267, 100%, 64%)',
-            '--line-color-2': 'hsl(272.1, 71.7%, 47.1%)',
-            '--line-color-3': 'hsl(155, 89%, 51%)',
+            "--guide-color": "rgba(255, 255, 255, 0.1)",
+            "--ds-background-200": "rgba(0, 0, 0, 0.5)",
+            "--line-color-1": "hsl(267, 100%, 64%)",
+            "--line-color-2": "hsl(272.1, 71.7%, 47.1%)",
+            "--line-color-3": "hsl(155, 89%, 51%)",
          },
          dark: {
-            '--guide-color': 'rgba(255, 255, 255, 0.15)',
-            '--ds-background-200': 'rgba(0, 0, 0, 0.7)',
-            '--line-color-1': 'hsl(267, 100%, 64%)',
-            '--line-color-2': 'hsl(272.1, 71.7%, 47.1%)',
-            '--line-color-3': 'hsl(155, 89%, 51%)',
+            "--guide-color": "rgba(255, 255, 255, 0.15)",
+            "--ds-background-200": "rgba(0, 0, 0, 0.7)",
+            "--line-color-1": "hsl(267, 100%, 64%)",
+            "--line-color-2": "hsl(272.1, 71.7%, 47.1%)",
+            "--line-color-3": "hsl(155, 89%, 51%)",
          },
       },
       tailwind: {
@@ -1685,12 +1685,12 @@ export const ui: Registry = [
             theme: {
                extend: {
                   gridTemplateColumns: {
-                     'grid-md': 'repeat(var(--md-grid-columns), 1fr)',
-                     'grid-sm': 'repeat(var(--sm-grid-columns), 1fr)',
+                     "grid-md": "repeat(var(--md-grid-columns), 1fr)",
+                     "grid-sm": "repeat(var(--sm-grid-columns), 1fr)",
                   },
                   gridTemplateRows: {
-                     'grid-md': 'repeat(var(--md-grid-rows), 1fr)',
-                     'grid-sm': 'repeat(var(--sm-grid-rows), 1fr)',
+                     "grid-md": "repeat(var(--md-grid-rows), 1fr)",
+                     "grid-sm": "repeat(var(--sm-grid-rows), 1fr)",
                   },
                },
             },
@@ -1698,27 +1698,27 @@ export const ui: Registry = [
       },
    },
    {
-      name: 'nyx-toc',
-      type: 'registry:ui',
+      name: "nyx-toc",
+      type: "registry:ui",
       dependencies: [
-         '@radix-ui/react-icons',
-         '@radix-ui/react-popover',
-         '@radix-ui/react-scroll-area',
-         'scroll-into-view-if-needed',
+         "@radix-ui/react-icons",
+         "@radix-ui/react-popover",
+         "@radix-ui/react-scroll-area",
+         "scroll-into-view-if-needed",
       ],
-      registryDependencies: ['popover'],
+      registryDependencies: ["popover"],
       files: [
          {
-            path: 'ui/nyx-toc.tsx',
-            type: 'registry:component',
+            path: "ui/nyx-toc.tsx",
+            type: "registry:ui",
          },
          {
-            path: 'hooks/use-anchor-observer.ts',
-            type: 'registry:hook',
+            path: "hooks/use-anchor-observer.ts",
+            type: "registry:hook",
          },
          {
-            path: 'hooks/use-on-change.ts',
-            type: 'registry:hook',
+            path: "hooks/use-on-change.ts",
+            type: "registry:hook",
          },
       ],
       tailwind: {
@@ -1726,20 +1726,210 @@ export const ui: Registry = [
             theme: {
                extend: {
                   animation: {
-                     'nyx-fade-out': 'nyx-fade-out 0.2s ease-out',
+                     "nyx-fade-out": "nyx-fade-out 0.2s ease-out",
                   },
                   keyframes: {
-                     'nyx-fade-out': {
-                        '0%': { opacity: '1' },
-                        '100%': { opacity: '0' },
+                     "nyx-fade-out": {
+                        "0%": { opacity: "1" },
+                        "100%": { opacity: "0" },
                      },
                   },
                },
                spacing: {
-                  'nyx-layout-top': 'calc(var(--nyx-banner-height) + var(--nyx-nav-height))',
+                  "nyx-layout-top":
+                     "calc(var(--nyx-banner-height) + var(--nyx-nav-height))",
+               },
+            },
+         },
+      },
+   },
+   {
+      name: "terminal",
+      type: "registry:ui",
+      dependencies: ["motion"],
+      files: [
+         {
+            path: "ui/terminal.tsx",
+            type: "registry:ui",
+         },
+      ],
+   },
+   {
+      name: "script-copy-btn",
+      type: "registry:ui",
+      dependencies: ["motion", "shiki", "next-themes"],
+      files: [
+         {
+            path: "ui/script-copy-btn.tsx",
+            type: "registry:ui",
+         },
+      ],
+   },
+   {
+      name: "text-animate",
+      type: "registry:ui",
+      dependencies: ["motion"],
+      files: [
+         {
+            path: "ui/text-animate.tsx",
+            type: "registry:ui",
+         },
+      ],
+   },
+   {
+      name: "line-shadow-text",
+      type: "registry:ui",
+      dependencies: ["motion"],
+      files: [
+         {
+            path: "ui/line-shadow-text.tsx",
+            type: "registry:ui",
+         },
+      ],
+      tailwind: {
+         config: {
+            theme: {
+               extend: {
+                  animation: {
+                     "line-shadow": "line-shadow 15s linear infinite",
+                  },
+                  keyframes: {
+                     "line-shadow": {
+                        "0%": { "background-position": "0 0" },
+                        "100%": { "background-position": "100% -100%" },
+                     },
+                  },
                },
             },
          },
       },
    },
+   {
+      name: "aurora-text",
+      type: "registry:ui",
+      dependencies: ["motion"],
+      files: [
+         {
+            path: "ui/aurora-text.tsx",
+            type: "registry:ui",
+         },
+      ],
+      tailwind: {
+         config: {
+            theme: {
+               extend: {
+                  keyframes: {
+                     "aurora-border": {
+                        "0%, 100%": {
+                           borderRadius: "37% 29% 27% 27% / 28% 25% 41% 37%",
+                        },
+                        "25%": {
+                           borderRadius: "47% 29% 39% 49% / 61% 19% 66% 26%",
+                        },
+                        "50%": {
+                           borderRadius: "57% 23% 47% 72% / 63% 17% 66% 33%",
+                        },
+                        "75%": {
+                           borderRadius: "28% 49% 29% 100% / 93% 20% 64% 25%",
+                        },
+                     },
+                     "aurora-1": {
+                        "0%, 100%": { top: "0", right: "0" },
+                        "50%": { top: "50%", right: "25%" },
+                        "75%": { top: "25%", right: "50%" },
+                     },
+                     "aurora-2": {
+                        "0%, 100%": { top: "0", left: "0" },
+                        "60%": { top: "75%", left: "25%" },
+                        "85%": { top: "50%", left: "50%" },
+                     },
+                     "aurora-3": {
+                        "0%, 100%": { bottom: "0", left: "0" },
+                        "40%": { bottom: "50%", left: "25%" },
+                        "65%": { bottom: "25%", left: "50%" },
+                     },
+                     "aurora-4": {
+                        "0%, 100%": { bottom: "0", right: "0" },
+                        "50%": { bottom: "25%", right: "40%" },
+                        "90%": { bottom: "50%", right: "25%" },
+                     },
+                  },
+                  animation: {
+                     "aurora-border": "aurora-border 10s ease-in-out infinite",
+                     "aurora-1": "aurora-1 15s ease-in-out infinite",
+                     "aurora-2": "aurora-2 15s ease-in-out infinite",
+                     "aurora-3": "aurora-3 15s ease-in-out infinite",
+                     "aurora-4": "aurora-4 15s ease-in-out infinite",
+                  },
+               },
+            },
+         },
+      },
+   },
+   {
+      name: "morphing-text",
+      type: "registry:ui",
+      dependencies: ["motion"],
+      files: [
+         {
+            path: "ui/morphing-text.tsx",
+            type: "registry:ui",
+         },
+      ],
+   },
+   {
+      name: "ripple-button",
+      type: "registry:ui",
+      dependencies: ["motion"],
+      files: [
+         {
+            path: "ui/ripple-button.tsx",
+            type: "registry:ui",
+         },
+      ],
+      tailwind: {
+         config: {
+            theme: {
+               extend: {
+                  animation: {
+                     rippling: "rippling var(--duration) ease-out",
+                  },
+                  keyframes: {
+                     rippling: {
+                        "0%": {
+                           opacity: "1",
+                        },
+                        "100%": {
+                           transform: "scale(2)",
+                           opacity: "0",
+                        },
+                     },
+                  },
+               },
+            },
+         },
+      },
+   },
+   {
+      name: "warp-background",
+      type: "registry:ui",
+      dependencies: ["motion"],
+      files: [
+         {
+            path: "ui/warp-background.tsx",
+            type: "registry:ui",
+         },
+      ],
+   },
+   {
+      name: "interactive-grid-pattern",
+      type: "registry:ui",
+      dependencies: ["motion"],
+      files: [
+         {
+            path: "ui/interactive-grid-pattern.tsx",
+            type: "registry:ui",
+         },
+      ],
+   },
 ]
diff --git a/apps/web/registry/schema.ts b/apps/web/registry/schema.ts
deleted file mode 100644
index eaf9e1f0..00000000
--- a/apps/web/registry/schema.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { z } from 'zod'
-
-export const blockChunkSchema = z.object({
-   name: z.string(),
-   description: z.string(),
-   component: z.any(),
-   file: z.string(),
-   code: z.string().optional(),
-   container: z
-      .object({
-         className: z.string().nullish(),
-      })
-      .optional(),
-})
-
-export const registryItemTypeSchema = z.enum([
-   'registry:style',
-   'registry:lib',
-   'registry:example',
-   'registry:block',
-   'registry:component',
-   'registry:ui',
-   'registry:hook',
-   'registry:theme',
-   'registry:page',
-])
-
-export const registryItemFileSchema = z.object({
-   path: z.string(),
-   content: z.string().optional(),
-   type: registryItemTypeSchema,
-   target: z.string().optional(),
-})
-
-export const registryItemTailwindSchema = z.object({
-   config: z.object({
-      content: z.array(z.string()).optional(),
-      theme: z.record(z.string(), z.any()).optional(),
-      plugins: z.array(z.string()).optional(),
-   }),
-})
-
-export const registryItemCssVarsSchema = z.object({
-   light: z.record(z.string(), z.string()).optional(),
-   dark: z.record(z.string(), z.string()).optional(),
-})
-
-export const registryItemSchema = z.object({
-   name: z.string(),
-   type: registryItemTypeSchema,
-   description: z.string().optional(),
-   dependencies: z.array(z.string()).optional(),
-   devDependencies: z.array(z.string()).optional(),
-   registryDependencies: z.array(z.string()).optional(),
-   files: z.array(registryItemFileSchema).optional(),
-   tailwind: registryItemTailwindSchema.optional(),
-   cssVars: registryItemCssVarsSchema.optional(),
-   meta: z.record(z.string(), z.any()).optional(),
-   docs: z.string().optional(),
-})
-
-export const registryEntrySchema = registryItemSchema.extend({
-   category: z.string().optional(),
-   subcategory: z.string().optional(),
-})
-
-export const registrySchema = z.array(registryEntrySchema)
-
-export type RegistryEntry = z.infer<typeof registryEntrySchema>
-
-export type Registry = z.infer<typeof registrySchema>
-
-export const blockSchema = registryEntrySchema.extend({
-   type: z.literal('registry:block'),
-   style: z.enum(['default', 'miami']),
-   component: z.any(),
-   container: z
-      .object({
-         height: z.string().nullish(),
-         className: z.string().nullish(),
-      })
-      .optional(),
-   code: z.string(),
-   highlightedCode: z.string(),
-})
-
-export type Block = z.infer<typeof blockSchema>
-
-export type BlockChunk = z.infer<typeof blockChunkSchema>
diff --git a/apps/web/scripts/build-registry.mts b/apps/web/scripts/build-registry.mts
index 89149433..cac1cb46 100644
--- a/apps/web/scripts/build-registry.mts
+++ b/apps/web/scripts/build-registry.mts
@@ -1,39 +1,35 @@
-/* eslint-disable no-console */
-// @sts-nocheck
-import { existsSync, promises as fs, readFileSync } from 'fs'
-import { tmpdir } from 'os'
-import path from 'path'
-import { cwd } from 'process'
-import template from 'lodash.template'
-import { rimraf } from 'rimraf'
-import { Project, ScriptKind, SyntaxKind } from 'ts-morph'
-import type { z } from 'zod'
-
-import { registry } from '../registry'
-import { baseColors } from '../registry/registry-base-colors'
-import { colorMapping, colors } from '../registry/registry-colors'
-import { iconLibraries, icons } from '../registry/registry-icons'
-import { styles } from '../registry/registry-styles'
-import type {
-   Registry,
-   RegistryEntry,
-   registryItemTypeSchema,
-} from '../registry/schema'
+import { promises as fs, existsSync } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import template from "lodash/template"
 import {
-   registryEntrySchema,
+   type Registry,
+   registryItemSchema,
+   type registryItemTypeSchema,
    registrySchema,
-} from '../registry/schema'
-import { fixImport } from './fix-import.mts'
+} from "nyxb/registry"
+import { rimraf } from "rimraf"
+import { Project, ScriptKind } from "ts-morph"
+import type { z } from "zod"
 
-const REGISTRY_PATH = path.join(process.cwd(), 'public/r')
+import { registry } from "../registry"
+import { baseColors } from "../registry/registry-base-colors"
+import { registryCategories } from "../registry/registry-categories"
+import { colorMapping, colors } from "../registry/registry-colors"
+import { iconLibraries, icons } from "../registry/registry-icons"
+import { styles } from "../registry/registry-styles"
+import { fixImport } from "./fix-import.mts"
+
+const REGISTRY_PATH = path.join(process.cwd(), "public/r")
 
 const REGISTRY_INDEX_WHITELIST: z.infer<typeof registryItemTypeSchema>[] = [
-   'registry:ui',
-   'registry:lib',
-   'registry:hook',
-   'registry:theme',
-   'registry:block',
-   'registry:example',
+   "registry:ui",
+   "registry:lib",
+   "registry:hook",
+   "registry:theme",
+   "registry:block",
+   "registry:example",
+   "registry:internal",
 ]
 
 const project = new Project({
@@ -41,10 +37,65 @@ const project = new Project({
 })
 
 async function createTempSourceFile(filename: string) {
-   const dir = await fs.mkdtemp(path.join(tmpdir(), 'shadcn-'))
+   const dir = await fs.mkdtemp(path.join(tmpdir(), "nyxb-"))
    return path.join(dir, filename)
 }
 
+// ----------------------------------------------------------------------------
+// Sync styles
+// ----------------------------------------------------------------------------
+async function syncStyles() {
+   const sourceStyle = "miami"
+   const targetStyle = "default"
+
+   const syncDirectories = ["blocks", "hooks", "internal", "lib", "charts"]
+
+   // Clean up sync directories.
+   for (const dir of syncDirectories) {
+      rimraf.sync(path.join("registry", targetStyle, dir))
+   }
+
+   for (const item of registry.items) {
+      if (
+         !REGISTRY_INDEX_WHITELIST.includes(item.type) &&
+         item.type !== "registry:ui"
+      ) {
+         continue
+      }
+
+      const resolveFiles = item.files?.map(
+         (file) =>
+            `registry/${sourceStyle}/${typeof file === "string" ? file : file.path}`,
+      )
+      if (!resolveFiles) {
+         continue
+      }
+
+      // Copy files to target style if they don't exist.
+      for (const file of resolveFiles) {
+         const sourcePath = path.join(process.cwd(), file)
+         const targetPath = path.join(
+            process.cwd(),
+            file.replace(sourceStyle, targetStyle),
+         )
+
+         if (!existsSync(targetPath)) {
+            // Create directory if it doesn't exist.
+            await fs.mkdir(path.dirname(targetPath), { recursive: true })
+            await fs.copyFile(sourcePath, targetPath)
+
+            // Replace all ~/registry/miami/ with ~/registry/default/.
+            const content = await fs.readFile(targetPath, "utf8")
+            const fixedContent = content.replace(
+               new RegExp(`~/registry/${sourceStyle}/`, "g"),
+               `~/registry/${targetStyle}/`,
+            )
+            await fs.writeFile(targetPath, fixedContent, "utf8")
+         }
+      }
+   }
+}
+
 // ----------------------------------------------------------------------------
 // Build __registry__/index.tsx.
 // ----------------------------------------------------------------------------
@@ -61,29 +112,42 @@ export const Index: Record<string, any> = {
       index += `  "${style.name}": {`
 
       // Build style index.
-      for (const item of registry) {
+      for (const item of registry.items) {
          const resolveFiles = item.files?.map(
-            file =>
-          `registry/${style.name}/${
-            typeof file === 'string' ? file : file.path
-          }`,
+            (file) =>
+               `registry/${style.name}/${
+                  typeof file === "string" ? file : file.path
+               }`,
          )
          if (!resolveFiles) {
             continue
          }
 
-         const type = item.type.split(':')[1]
-         let sourceFilename = ''
+         // Validate categories.
+         if (item.categories) {
+            const invalidCategories = item.categories.filter(
+               (category) =>
+                  !registryCategories.some((c) => c.slug === category),
+            )
+
+            if (invalidCategories.length > 0) {
+               console.error(
+                  `${item.name} has invalid categories: ${invalidCategories}`,
+               )
+               process.exit(1)
+            }
+         }
+
+         const type = item.type.split(":")[1]
+         let sourceFilename = ""
 
-         let chunks: any = []
-         if (item.type === 'registry:block') {
+         if (item.type === "registry:block") {
             const file = resolveFiles[0]
             const filename = path.basename(file)
             let raw: string
             try {
-               raw = await fs.readFile(file, 'utf8')
-            }
-            catch (error) {
+               raw = await fs.readFile(file, "utf8")
+            } catch (error) {
                continue
             }
             const tempFile = await createTempSourceFile(filename)
@@ -91,14 +155,6 @@ export const Index: Record<string, any> = {
                scriptKind: ScriptKind.TSX,
             })
 
-            const description = sourceFile
-               .getVariableDeclaration('description')
-               ?.getInitializerOrThrow()
-               .asKindOrThrow(SyntaxKind.StringLiteral)
-               .getLiteralValue()
-
-            item.description = description ?? ''
-
             // Find all imports.
             const imports = new Map<
                string,
@@ -127,135 +183,13 @@ export const Index: Record<string, any> = {
                }
             })
 
-            // Find all opening tags with x-chunk attribute.
-            const components = sourceFile
-               .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
-               .filter((node) => {
-                  return node.getAttribute('x-chunk') !== undefined
-               })
-
-            chunks = await Promise.all(
-               components.map(async (component, index) => {
-                  const chunkName = `${item.name}-chunk-${index}`
-
-                  // Get the value of x-chunk attribute.
-                  const attr = component
-                     .getAttributeOrThrow('x-chunk')
-                     .asKindOrThrow(SyntaxKind.JsxAttribute)
-
-                  const description = attr
-                     .getInitializerOrThrow()
-                     .asKindOrThrow(SyntaxKind.StringLiteral)
-                     .getLiteralValue()
-
-                  // Delete the x-chunk attribute.
-                  attr.remove()
-
-                  // Add a new attribute to the component.
-                  component.addAttribute({
-                     name: 'x-chunk',
-                     initializer: `"${chunkName}"`,
-                  })
-
-                  // Get the value of x-chunk-container attribute.
-                  const containerAttr = component
-                     .getAttribute('x-chunk-container')
-                     ?.asKindOrThrow(SyntaxKind.JsxAttribute)
-
-                  const containerClassName = containerAttr
-                     ?.getInitializer()
-                     ?.asKindOrThrow(SyntaxKind.StringLiteral)
-                     .getLiteralValue()
-
-                  containerAttr?.remove()
-
-                  const parentJsxElement = component.getParentIfKindOrThrow(
-                     SyntaxKind.JsxElement,
-                  )
-
-                  // Find all opening tags on component.
-                  const children = parentJsxElement
-                     .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
-                     .map((node) => {
-                        return node.getTagNameNode().getText()
-                     })
-                     .concat(
-                        parentJsxElement
-                           .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
-                           .map((node) => {
-                              return node.getTagNameNode().getText()
-                           }),
-                     )
-
-                  const componentImports = new Map<
-                     string,
-              string | string[] | Set<string>
-                  >()
-                  children.forEach((child) => {
-                     const importLine = imports.get(child)
-                     if (importLine) {
-                        const imports = componentImports.get(importLine.module) || []
-
-                        const newImports = importLine.isDefault
-                           ? importLine.text
-                           : new Set([...imports, child])
-
-                        componentImports.set(
-                           importLine.module,
-                           importLine?.isDefault ? newImports : Array.from(newImports),
-                        )
-                     }
-                  })
-
-                  const componnetImportLines = Array.from(
-                     componentImports.keys(),
-                  ).map((key) => {
-                     const values = componentImports.get(key)
-                     const specifier = Array.isArray(values)
-                        ? `{${values.join(',')}}`
-                        : values
-
-                     return `import ${specifier} from "${key}"`
-                  })
-
-                  const code = `
-            'use client'
-
-            ${componnetImportLines.join('\n')}
-
-            export default function Component() {
-              return (${parentJsxElement.getText()})
-            }`
-
-                  const targetFile = file.replace(item.name, `${chunkName}`)
-                  const targetFilePath = path.join(
-                     cwd(),
-              `registry/${style.name}/${type}/${chunkName}.tsx`,
-                  )
-
-                  // Write component file.
-                  rimraf.sync(targetFilePath)
-                  await fs.writeFile(targetFilePath, code, 'utf8')
-
-                  return {
-                     name: chunkName,
-                     description,
-                     component: `React.lazy(() => import("~/registry/${style.name}/${type}/${chunkName}")),`,
-                     file: targetFile,
-                     container: {
-                        className: containerClassName,
-                     },
-                  }
-               }),
-            )
-
-            // // Write the source file for blocks only.
+            // Write the source file for blocks only.
             sourceFilename = `__registry__/${style.name}/${type}/${item.name}.tsx`
 
             if (item.files) {
-               const files = item.files.map(file =>
-                  typeof file === 'string'
-                     ? { type: 'registry:page', path: file }
+               const files = item.files.map((file) =>
+                  typeof file === "string"
+                     ? { type: "registry:page", path: file }
                      : file,
                )
                if (files?.length) {
@@ -275,9 +209,9 @@ export const Index: Record<string, any> = {
          let componentPath = `~/registry/${style.name}/${type}/${item.name}`
 
          if (item.files) {
-            const files = item.files.map(file =>
-               typeof file === 'string'
-                  ? { type: 'registry:page', path: file }
+            const files = item.files.map((file) =>
+               typeof file === "string"
+                  ? { type: "registry:page", path: file }
                   : file,
             )
             if (files?.length) {
@@ -288,37 +222,26 @@ export const Index: Record<string, any> = {
          index += `
     "${item.name}": {
       name: "${item.name}",
-      description: "${item.description ?? ''}",
+      description: "${item.description ?? ""}",
       type: "${item.type}",
       registryDependencies: ${JSON.stringify(item.registryDependencies)},
       files: [${item.files?.map((file) => {
-        const filePath = `registry/${style.name}/${
-          typeof file === 'string' ? file : file.path
-        }`
-        const resolvedFilePath = path.resolve(filePath)
-        return typeof file === 'string'
-          ? `"${resolvedFilePath}"`
-          : `{
+         const filePath = `registry/${style.name}/${
+            typeof file === "string" ? file : file.path
+         }`
+         const resolvedFilePath = path.resolve(filePath)
+         return typeof file === "string"
+            ? `"${resolvedFilePath}"`
+            : `{
         path: "${filePath}",
         type: "${file.type}",
-        target: "${file.target ?? ''}"
+        target: "${file.target ?? ""}"
       }`
       })}],
+      categories: ${JSON.stringify(item.categories)},
       component: React.lazy(() => import("${componentPath}")),
       source: "${sourceFilename}",
-      category: "${item.category ?? ''}",
-      subcategory: "${item.subcategory ?? ''}",
-      chunks: [${chunks.map(
-        chunk => `{
-        name: "${chunk.name}",
-        description: "${chunk.description ?? 'No description'}",
-        component: ${chunk.component}
-        file: "${chunk.file}",
-        container: {
-          className: "${chunk.container.className}"
-        }
-      }`,
-      )}]
+      meta: ${JSON.stringify(item.meta)},
     },`
       }
 
@@ -333,35 +256,35 @@ export const Index: Record<string, any> = {
    // ----------------------------------------------------------------------------
    // Build registry/index.json.
    // ----------------------------------------------------------------------------
-   const items = registry
-      .filter(item => ['registry:ui'].includes(item.type))
+   const items = registry.items
+      .filter((item) => ["registry:ui"].includes(item.type))
       .map((item) => {
          return {
             ...item,
             files: item.files?.map((_file) => {
-               const file
-            = typeof _file === 'string'
-               ? {
-                     path: _file,
-                     type: item.type,
-                  }
-               : _file
+               const file =
+                  typeof _file === "string"
+                     ? {
+                          path: _file,
+                          type: item.type,
+                       }
+                     : _file
 
                return file
             }),
          }
       })
    const registryJson = JSON.stringify(items, null, 2)
-   rimraf.sync(path.join(REGISTRY_PATH, 'index.json'))
+   rimraf.sync(path.join(REGISTRY_PATH, "index.json"))
    await fs.writeFile(
-      path.join(REGISTRY_PATH, 'index.json'),
+      path.join(REGISTRY_PATH, "index.json"),
       registryJson,
-      'utf8',
+      "utf8",
    )
 
    // Write style index.
-   rimraf.sync(path.join(process.cwd(), '__registry__/index.tsx'))
-   await fs.writeFile(path.join(process.cwd(), '__registry__/index.tsx'), index)
+   rimraf.sync(path.join(process.cwd(), "__registry__/index.tsx"))
+   await fs.writeFile(path.join(process.cwd(), "__registry__/index.tsx"), index)
 }
 
 // ----------------------------------------------------------------------------
@@ -369,14 +292,14 @@ export const Index: Record<string, any> = {
 // ----------------------------------------------------------------------------
 async function buildStyles(registry: Registry) {
    for (const style of styles) {
-      const targetPath = path.join(REGISTRY_PATH, 'styles', style.name)
+      const targetPath = path.join(REGISTRY_PATH, "styles", style.name)
 
       // Create directory if it doesn't exist.
       if (!existsSync(targetPath)) {
          await fs.mkdir(targetPath, { recursive: true })
       }
 
-      for (const item of registry) {
+      for (const item of registry.items) {
          if (!REGISTRY_INDEX_WHITELIST.includes(item.type)) {
             continue
          }
@@ -385,62 +308,75 @@ async function buildStyles(registry: Registry) {
          if (item.files) {
             files = await Promise.all(
                item.files.map(async (_file) => {
-                  const file
-              = typeof _file === 'string'
-                 ? {
-                       path: _file,
-                       type: item.type,
-                       content: '',
-                       target: '',
-                    }
-                 : _file
+                  const file =
+                     typeof _file === "string"
+                        ? {
+                             path: _file,
+                             type: item.type,
+                             content: "",
+                             target: "",
+                          }
+                        : _file
 
                   let content: string
                   try {
                      content = await fs.readFile(
-                        path.join(process.cwd(), 'registry', style.name, file.path),
-                        'utf8',
+                        path.join(
+                           process.cwd(),
+                           "registry",
+                           style.name,
+                           file.path,
+                        ),
+                        "utf8",
                      )
 
                      // Only fix imports for v0- blocks.
-                     if (item.name.startsWith('v0-')) {
+                     if (item.name.startsWith("v0-")) {
                         content = fixImport(content)
                      }
-                  }
-                  catch (error) {
+                  } catch (error) {
                      return
                   }
 
                   const tempFile = await createTempSourceFile(file.path)
-                  const sourceFile = project.createSourceFile(tempFile, content, {
-                     scriptKind: ScriptKind.TSX,
-                  })
+                  const sourceFile = project.createSourceFile(
+                     tempFile,
+                     content,
+                     {
+                        scriptKind: ScriptKind.TSX,
+                     },
+                  )
 
-                  sourceFile.getVariableDeclaration('iframeHeight')?.remove()
-                  sourceFile.getVariableDeclaration('containerClassName')?.remove()
-                  sourceFile.getVariableDeclaration('description')?.remove()
+                  sourceFile.getVariableDeclaration("iframeHeight")?.remove()
+                  sourceFile
+                     .getVariableDeclaration("containerClassName")
+                     ?.remove()
+                  sourceFile.getVariableDeclaration("description")?.remove()
 
-                  let target = file.target || ''
+                  let target = file.target || ""
 
-                  if ((!target || target === '') && item.name.startsWith('v0-')) {
-                     const fileName = file.path.split('/').pop()
+                  if (
+                     (!target || target === "") &&
+                     item.name.startsWith("v0-")
+                  ) {
+                     const fileName = file.path.split("/").pop()
                      if (
-                        file.type === 'registry:block'
-                        || file.type === 'registry:component'
-                        || file.type === 'registry:example'
+                        file.type === "registry:block" ||
+                        file.type === "registry:component" ||
+                        file.type === "registry:example"
                      ) {
                         target = `components/${fileName}`
                      }
 
-                     if (file.type === 'registry:ui') {
+                     if (file.type === "registry:ui") {
                         target = `components/ui/${fileName}`
                      }
 
-                     if (file.type === 'registry:hook') {
+                     if (file.type === "registry:hook") {
                         target = `hooks/${fileName}`
                      }
 
-                     if (file.type === 'registry:lib') {
+                     if (file.type === "registry:lib") {
                         target = `lib/${fileName}`
                      }
                   }
@@ -455,25 +391,18 @@ async function buildStyles(registry: Registry) {
             )
          }
 
-         const payload = registryEntrySchema
-            .omit({
-               // @ts-expect-error -- TODO: Fix this.
-               source: true,
-               category: true,
-               subcategory: true,
-               // @ts-expect-error -- TODO: Fix this.
-               chunks: true,
-            })
-            .safeParse({
-               ...item,
-               files,
-            })
+         const payload = registryItemSchema.safeParse({
+            $schema: "https://nyxbui.design/schema/registry-item.json",
+            author: "nyxbui (https://nyxbui.design)",
+            ...item,
+            files,
+         })
 
          if (payload.success) {
             await fs.writeFile(
                path.join(targetPath, `${item.name}.json`),
                JSON.stringify(payload.data, null, 2),
-               'utf8',
+               "utf8",
             )
          }
       }
@@ -484,9 +413,9 @@ async function buildStyles(registry: Registry) {
    // ----------------------------------------------------------------------------
    const stylesJson = JSON.stringify(styles, null, 2)
    await fs.writeFile(
-      path.join(REGISTRY_PATH, 'styles/index.json'),
+      path.join(REGISTRY_PATH, "styles/index.json"),
       stylesJson,
-      'utf8',
+      "utf8",
    )
 }
 
@@ -495,24 +424,17 @@ async function buildStyles(registry: Registry) {
 // ----------------------------------------------------------------------------
 async function buildStylesIndex() {
    for (const style of styles) {
-      const targetPath = path.join(REGISTRY_PATH, 'styles', style.name)
-
-      const dependencies = [
-         'tailwindcss-animate',
-         'class-variance-authority',
-         'lucide-react',
-      ]
-
-      // TODO: Remove this when we migrate to lucide-react.
-      // if (style.name === "miami") {
-      //   dependencies.push("@radix-ui/react-icons")
-      // }
+      const targetPath = path.join(REGISTRY_PATH, "styles", style.name)
 
-      const payload: RegistryEntry = {
+      const payload: z.infer<typeof registryItemSchema> = {
          name: style.name,
-         type: 'registry:style',
-         dependencies,
-         registryDependencies: ['utils'],
+         type: "registry:style",
+         dependencies: [
+            "tailwindcss-animate",
+            "class-variance-authority",
+            "lucide-react",
+         ],
+         registryDependencies: ["utils"],
          tailwind: {
             config: {
                plugins: [`require("tailwindcss-animate")`],
@@ -523,9 +445,9 @@ async function buildStylesIndex() {
       }
 
       await fs.writeFile(
-         path.join(targetPath, 'index.json'),
+         path.join(targetPath, "index.json"),
          JSON.stringify(payload, null, 2),
-         'utf8',
+         "utf8",
       )
    }
 }
@@ -534,7 +456,7 @@ async function buildStylesIndex() {
 // Build registry/colors/index.json.
 // ----------------------------------------------------------------------------
 async function buildThemes() {
-   const colorsTargetPath = path.join(REGISTRY_PATH, 'colors')
+   const colorsTargetPath = path.join(REGISTRY_PATH, "colors")
    rimraf.sync(colorsTargetPath)
    if (!existsSync(colorsTargetPath)) {
       await fs.mkdir(colorsTargetPath, { recursive: true })
@@ -542,30 +464,36 @@ async function buildThemes() {
 
    const colorsData: Record<string, any> = {}
    for (const [color, value] of Object.entries(colors)) {
-      if (typeof value === 'string') {
+      if (typeof value === "string") {
          colorsData[color] = value
          continue
       }
 
       if (Array.isArray(value)) {
-         colorsData[color] = value.map(item => ({
+         colorsData[color] = value.map((item) => ({
             ...item,
-            rgbChannel: item.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, '$1 $2 $3'),
+            rgbChannel: item.rgb.replace(
+               /^rgb\((\d+),(\d+),(\d+)\)$/,
+               "$1 $2 $3",
+            ),
             hslChannel: item.hsl.replace(
                /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
-               '$1 $2 $3',
+               "$1 $2 $3",
             ),
          }))
          continue
       }
 
-      if (typeof value === 'object') {
+      if (typeof value === "object") {
          colorsData[color] = {
             ...value,
-            rgbChannel: value.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, '$1 $2 $3'),
+            rgbChannel: value.rgb.replace(
+               /^rgb\((\d+),(\d+),(\d+)\)$/,
+               "$1 $2 $3",
+            ),
             hslChannel: value.hsl.replace(
                /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
-               '$1 $2 $3',
+               "$1 $2 $3",
             ),
          }
          continue
@@ -573,9 +501,9 @@ async function buildThemes() {
    }
 
    await fs.writeFile(
-      path.join(colorsTargetPath, 'index.json'),
+      path.join(colorsTargetPath, "index.json"),
       JSON.stringify(colorsData, null, 2),
-      'utf8',
+      "utf8",
    )
 
    // ----------------------------------------------------------------------------
@@ -657,28 +585,27 @@ async function buildThemes() {
 }`
 
    for (const baseColor of [
-      'slate',
-      'gray',
-      'zinc',
-      'neutral',
-      'stone',
-      'red',
-      'orange',
-      'amber',
-      'yellow',
-      'lime',
-      'green',
-      'emerald',
-      'teal',
-      'cyan',
-      'sky',
-      'blue',
-      'indigo',
-      'violet',
-      'purple',
-      'fuchsia',
-      'pink',
-      'rose',
+      "gray",
+      "zinc",
+      "neutral",
+      "stone",
+      "red",
+      "orange",
+      "amber",
+      "yellow",
+      "lime",
+      "green",
+      "emerald",
+      "teal",
+      "cyan",
+      "sky",
+      "blue",
+      "indigo",
+      "violet",
+      "purple",
+      "fuchsia",
+      "pink",
+      "rose",
    ]) {
       const base: Record<string, any> = {
          inlineColors: {},
@@ -688,21 +615,24 @@ async function buildThemes() {
          base.inlineColors[mode] = {}
          base.cssVars[mode] = {}
          for (const [key, value] of Object.entries(values)) {
-            if (typeof value === 'string') {
+            if (typeof value === "string") {
                // Chart colors do not have a 1-to-1 mapping with tailwind colors.
-               if (key.startsWith('chart-')) {
+               if (key.startsWith("chart-")) {
                   base.cssVars[mode][key] = value
                   continue
                }
 
-               const resolvedColor = value.replace(/\{\{base\}\}-/g, `${baseColor}-`)
+               const resolvedColor = value.replace(
+                  /\{\{base\}\}-/g,
+                  `${baseColor}-`,
+               )
                base.inlineColors[mode][key] = resolvedColor
 
-               const [resolvedBase, scale] = resolvedColor.split('-')
+               const [resolvedBase, scale] = resolvedColor.split("-")
                const color = scale
                   ? colorsData[resolvedBase].find(
-                     (item: any) => item.scale === Number.parseInt(scale),
-                  )
+                       (item: any) => item.scale === Number.parseInt(scale),
+                    )
                   : colorsData[resolvedBase]
                if (color) {
                   base.cssVars[mode][key] = color.hslChannel
@@ -720,7 +650,7 @@ async function buildThemes() {
       await fs.writeFile(
          path.join(REGISTRY_PATH, `colors/${baseColor}.json`),
          JSON.stringify(base, null, 2),
-         'utf8',
+         "utf8",
       )
 
       // ----------------------------------------------------------------------------
@@ -794,7 +724,7 @@ async function buildThemes() {
       const themeCSS = []
       for (const theme of baseColors) {
          themeCSS.push(
-            // @ts-expect-error -- TODO: Fix this.
+            // @ts-expect-error
             template(THEME_STYLES_WITH_VARIABLES)({
                colors: theme.cssVars,
                theme: theme.name,
@@ -804,38 +734,15 @@ async function buildThemes() {
 
       await fs.writeFile(
          path.join(REGISTRY_PATH, `themes.css`),
-         themeCSS.join('\n'),
-         'utf8',
+         themeCSS.join("\n"),
+         "utf8",
       )
 
       // ----------------------------------------------------------------------------
       // Build registry/themes/[theme].json
       // ----------------------------------------------------------------------------
-      rimraf.sync(path.join(REGISTRY_PATH, 'themes'))
-      for (const baseColor of [
-         'slate',
-         'gray',
-         'zinc',
-         'neutral',
-         'stone',
-         'red',
-         'orange',
-         'amber',
-         'yellow',
-         'lime',
-         'green',
-         'emerald',
-         'teal',
-         'cyan',
-         'sky',
-         'blue',
-         'indigo',
-         'violet',
-         'purple',
-         'fuchsia',
-         'pink',
-         'rose',
-      ]) {
+      rimraf.sync(path.join(REGISTRY_PATH, "themes"))
+      for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone"]) {
          const payload: Record<string, any> = {
             name: baseColor,
             label: baseColor.charAt(0).toUpperCase() + baseColor.slice(1),
@@ -844,15 +751,18 @@ async function buildThemes() {
          for (const [mode, values] of Object.entries(colorMapping)) {
             payload.cssVars[mode] = {}
             for (const [key, value] of Object.entries(values)) {
-               if (typeof value === 'string') {
-                  const resolvedColor = value.replace(/\{\{base\}\}-/g, `${baseColor}-`)
+               if (typeof value === "string") {
+                  const resolvedColor = value.replace(
+                     /\{\{base\}\}-/g,
+                     `${baseColor}-`,
+                  )
                   payload.cssVars[mode][key] = resolvedColor
 
-                  const [resolvedBase, scale] = resolvedColor.split('-')
+                  const [resolvedBase, scale] = resolvedColor.split("-")
                   const color = scale
                      ? colorsData[resolvedBase].find(
-                        (item: any) => item.scale === Number.parseInt(scale),
-                     )
+                          (item: any) => item.scale === Number.parseInt(scale),
+                       )
                      : colorsData[resolvedBase]
                   if (color) {
                      payload.cssVars[mode][key] = color.hslChannel
@@ -861,7 +771,7 @@ async function buildThemes() {
             }
          }
 
-         const targetPath = path.join(REGISTRY_PATH, 'themes')
+         const targetPath = path.join(REGISTRY_PATH, "themes")
 
          // Create directory if it doesn't exist.
          if (!existsSync(targetPath)) {
@@ -871,7 +781,7 @@ async function buildThemes() {
          await fs.writeFile(
             path.join(targetPath, `${payload.name}.json`),
             JSON.stringify(payload, null, 2),
-            'utf8',
+            "utf8",
          )
       }
    }
@@ -881,7 +791,7 @@ async function buildThemes() {
 // Build registry/icons/index.json.
 // ----------------------------------------------------------------------------
 async function buildIcons() {
-   const iconsTargetPath = path.join(REGISTRY_PATH, 'icons')
+   const iconsTargetPath = path.join(REGISTRY_PATH, "icons")
    rimraf.sync(iconsTargetPath)
    if (!existsSync(iconsTargetPath)) {
       await fs.mkdir(iconsTargetPath, { recursive: true })
@@ -890,9 +800,9 @@ async function buildIcons() {
    const iconsData = icons
 
    await fs.writeFile(
-      path.join(iconsTargetPath, 'index.json'),
+      path.join(iconsTargetPath, "index.json"),
       JSON.stringify(iconsData, null, 2),
-      'utf8',
+      "utf8",
    )
 }
 
@@ -928,15 +838,16 @@ export const Icons = {
 `
 
    // Write style index.
-   rimraf.sync(path.join(process.cwd(), '__registry__/icons.tsx'))
+   rimraf.sync(path.join(process.cwd(), "__registry__/icons.tsx"))
    await fs.writeFile(
-      path.join(process.cwd(), '__registry__/icons.tsx'),
+      path.join(process.cwd(), "__registry__/icons.tsx"),
       index,
-      'utf8',
+      "utf8",
    )
 }
 
 try {
+   console.log("💽 Building registry...")
    const result = registrySchema.safeParse(registry)
 
    if (!result.success) {
@@ -944,6 +855,7 @@ try {
       process.exit(1)
    }
 
+   await syncStyles()
    await buildRegistry(result.data)
    await buildStyles(result.data)
    await buildStylesIndex()
@@ -952,9 +864,8 @@ try {
    await buildRegistryIcons()
    await buildIcons()
 
-   console.log('✅ Done!')
-}
-catch (error) {
+   console.log("✅ Done!")
+} catch (error) {
    console.error(error)
    process.exit(1)
 }
diff --git a/apps/web/scripts/build-v0-registry.mts b/apps/web/scripts/build-v0-registry.mts
new file mode 100644
index 00000000..16c61996
--- /dev/null
+++ b/apps/web/scripts/build-v0-registry.mts
@@ -0,0 +1,614 @@
+// @ts-nocheck
+import { promises as fs, existsSync } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import template from "lodash/template"
+import {
+   type Registry,
+   registryItemSchema,
+   type registryItemTypeSchema,
+   registrySchema,
+} from "nyxb/registry"
+import { rimraf } from "rimraf"
+import { Project, ScriptKind } from "ts-morph"
+import type { z } from "zod"
+
+import { registry } from "../registry"
+import { baseColors } from "../registry/registry-base-colors"
+import { registryCategories } from "../registry/registry-categories"
+import { colorMapping, colors } from "../registry/registry-colors"
+import { iconLibraries, icons } from "../registry/registry-icons"
+import { styles } from "../registry/registry-styles"
+import { fixImport } from "./fix-v0-import.mts"
+
+const REGISTRY_PATH = path.join(process.cwd(), "public/v0")
+
+const REGISTRY_INDEX_WHITELIST: z.infer<typeof registryItemTypeSchema>[] = [
+   "registry:ui",
+   "registry:lib",
+   "registry:hook",
+   "registry:theme",
+   "registry:block",
+   "registry:example",
+   "registry:internal",
+]
+
+const project = new Project({
+   compilerOptions: {},
+})
+
+async function createTempSourceFile(filename: string) {
+   const dir = await fs.mkdtemp(path.join(tmpdir(), "nyxb-"))
+   return path.join(dir, filename)
+}
+
+// ----------------------------------------------------------------------------
+// Sync styles
+// ----------------------------------------------------------------------------
+async function syncStyles() {
+   const sourceStyle = "miami"
+   const targetStyle = "default"
+
+   const syncDirectories = ["blocks", "hooks", "internal", "lib", "charts"]
+
+   // Clean up sync directories.
+   for (const dir of syncDirectories) {
+      rimraf.sync(path.join("registry", targetStyle, dir))
+   }
+
+   for (const item of registry.items) {
+      if (
+         !REGISTRY_INDEX_WHITELIST.includes(item.type) &&
+         item.type !== "registry:ui"
+      ) {
+         continue
+      }
+
+      const resolveFiles = item.files?.map(
+         (file) =>
+            `registry/${sourceStyle}/${typeof file === "string" ? file : file.path}`,
+      )
+      if (!resolveFiles) {
+         continue
+      }
+
+      // Copy files to target style if they don't exist.
+      for (const file of resolveFiles) {
+         const sourcePath = path.join(process.cwd(), file)
+         const targetPath = path.join(
+            process.cwd(),
+            file.replace(sourceStyle, targetStyle),
+         )
+
+         if (!existsSync(targetPath)) {
+            // Create directory if it doesn't exist.
+            await fs.mkdir(path.dirname(targetPath), { recursive: true })
+            await fs.copyFile(sourcePath, targetPath)
+
+            // Replace all @/registry/miami/ with @/registry/default/.
+            const content = await fs.readFile(targetPath, "utf8")
+            const fixedContent = content.replace(
+               new RegExp(`@/registry/${sourceStyle}/`, "g"),
+               `@/registry/${targetStyle}/`,
+            )
+            await fs.writeFile(targetPath, fixedContent, "utf8")
+         }
+      }
+   }
+}
+
+// ----------------------------------------------------------------------------
+// Build registry/styles/[style]/[name].json.
+// ----------------------------------------------------------------------------
+async function buildStyles(registry: Registry) {
+   for (const style of styles) {
+      const targetPath = path.join(REGISTRY_PATH, "styles", style.name)
+
+      // Create directory if it doesn't exist.
+      if (!existsSync(targetPath)) {
+         await fs.mkdir(targetPath, { recursive: true })
+      }
+
+      for (const item of registry.items) {
+         if (!REGISTRY_INDEX_WHITELIST.includes(item.type)) {
+            continue
+         }
+
+         let files
+         if (item.files) {
+            files = await Promise.all(
+               item.files.map(async (_file) => {
+                  const file =
+                     typeof _file === "string"
+                        ? {
+                             path: _file,
+                             type: item.type,
+                             content: "",
+                             target: "",
+                          }
+                        : _file
+
+                  let content: string
+                  try {
+                     content = await fs.readFile(
+                        path.join(
+                           process.cwd(),
+                           "registry",
+                           style.name,
+                           file.path,
+                        ),
+                        "utf8",
+                     )
+
+                     // Fix imports for all components, not just v0- blocks
+                     content = fixImport(content)
+                  } catch (error) {
+                     return
+                  }
+
+                  const tempFile = await createTempSourceFile(file.path)
+                  const sourceFile = project.createSourceFile(
+                     tempFile,
+                     content,
+                     {
+                        scriptKind: ScriptKind.TSX,
+                     },
+                  )
+
+                  sourceFile.getVariableDeclaration("iframeHeight")?.remove()
+                  sourceFile
+                     .getVariableDeclaration("containerClassName")
+                     ?.remove()
+                  sourceFile.getVariableDeclaration("description")?.remove()
+
+                  let target = file.target || ""
+
+                  if (
+                     (!target || target === "") &&
+                     item.name.startsWith("v0-")
+                  ) {
+                     const fileName = file.path.split("/").pop()
+                     if (
+                        file.type === "registry:block" ||
+                        file.type === "registry:component" ||
+                        file.type === "registry:example"
+                     ) {
+                        target = `components/${fileName}`
+                     }
+
+                     if (file.type === "registry:ui") {
+                        target = `components/ui/${fileName}`
+                     }
+
+                     if (file.type === "registry:hook") {
+                        target = `hooks/${fileName}`
+                     }
+
+                     if (file.type === "registry:lib") {
+                        target = `lib/${fileName}`
+                     }
+                  }
+
+                  return {
+                     path: file.path,
+                     type: file.type,
+                     content: sourceFile.getText(),
+                     target,
+                  }
+               }),
+            )
+         }
+
+         const payload = registryItemSchema.safeParse({
+            $schema: "https://nyxbui.design/schema/registry-item.json",
+            author: "nyxb (https://nyxbui.design)",
+            ...item,
+            files,
+         })
+
+         if (payload.success) {
+            await fs.writeFile(
+               path.join(targetPath, `${item.name}.json`),
+               JSON.stringify(payload.data, null, 2),
+               "utf8",
+            )
+         }
+      }
+   }
+
+   // ----------------------------------------------------------------------------
+   // Build registry/styles/index.json.
+   // ----------------------------------------------------------------------------
+   const stylesJson = JSON.stringify(styles, null, 2)
+   await fs.writeFile(
+      path.join(REGISTRY_PATH, "styles/index.json"),
+      stylesJson,
+      "utf8",
+   )
+}
+
+// ----------------------------------------------------------------------------
+// Build registry/styles/[name]/index.json.
+// ----------------------------------------------------------------------------
+async function buildStylesIndex() {
+   for (const style of styles) {
+      const targetPath = path.join(REGISTRY_PATH, "styles", style.name)
+
+      const payload: z.infer<typeof registryItemSchema> = {
+         name: style.name,
+         type: "registry:style",
+         dependencies: [
+            "tailwindcss-animate",
+            "class-variance-authority",
+            "lucide-react",
+         ],
+         registryDependencies: ["utils"],
+         tailwind: {
+            config: {
+               plugins: [`require("tailwindcss-animate")`],
+            },
+         },
+         cssVars: {},
+         files: [],
+      }
+
+      await fs.writeFile(
+         path.join(targetPath, "index.json"),
+         JSON.stringify(payload, null, 2),
+         "utf8",
+      )
+   }
+}
+
+// ----------------------------------------------------------------------------
+// Build registry/colors/index.json.
+// ----------------------------------------------------------------------------
+async function buildThemes() {
+   const colorsTargetPath = path.join(REGISTRY_PATH, "colors")
+   rimraf.sync(colorsTargetPath)
+   if (!existsSync(colorsTargetPath)) {
+      await fs.mkdir(colorsTargetPath, { recursive: true })
+   }
+
+   const colorsData: Record<string, any> = {}
+   for (const [color, value] of Object.entries(colors)) {
+      if (typeof value === "string") {
+         colorsData[color] = value
+         continue
+      }
+
+      if (Array.isArray(value)) {
+         colorsData[color] = value.map((item) => ({
+            ...item,
+            rgbChannel: item.rgb.replace(
+               /^rgb\((\d+),(\d+),(\d+)\)$/,
+               "$1 $2 $3",
+            ),
+            hslChannel: item.hsl.replace(
+               /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
+               "$1 $2 $3",
+            ),
+         }))
+         continue
+      }
+
+      if (typeof value === "object") {
+         colorsData[color] = {
+            ...value,
+            rgbChannel: value.rgb.replace(
+               /^rgb\((\d+),(\d+),(\d+)\)$/,
+               "$1 $2 $3",
+            ),
+            hslChannel: value.hsl.replace(
+               /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
+               "$1 $2 $3",
+            ),
+         }
+         continue
+      }
+   }
+
+   await fs.writeFile(
+      path.join(colorsTargetPath, "index.json"),
+      JSON.stringify(colorsData, null, 2),
+      "utf8",
+   )
+
+   // ----------------------------------------------------------------------------
+   // Build registry/colors/[base].json.
+   // ----------------------------------------------------------------------------
+   const BASE_STYLES = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+  `
+
+   const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: <%- colors.light["background"] %>;
+    --foreground: <%- colors.light["foreground"] %>;
+    --card: <%- colors.light["card"] %>;
+    --card-foreground: <%- colors.light["card-foreground"] %>;
+    --popover: <%- colors.light["popover"] %>;
+    --popover-foreground: <%- colors.light["popover-foreground"] %>;
+    --primary: <%- colors.light["primary"] %>;
+    --primary-foreground: <%- colors.light["primary-foreground"] %>;
+    --secondary: <%- colors.light["secondary"] %>;
+    --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
+    --muted: <%- colors.light["muted"] %>;
+    --muted-foreground: <%- colors.light["muted-foreground"] %>;
+    --accent: <%- colors.light["accent"] %>;
+    --accent-foreground: <%- colors.light["accent-foreground"] %>;
+    --destructive: <%- colors.light["destructive"] %>;
+    --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
+    --border: <%- colors.light["border"] %>;
+    --input: <%- colors.light["input"] %>;
+    --ring: <%- colors.light["ring"] %>;
+    --radius: 0.5rem;
+    --chart-1: <%- colors.light["chart-1"] %>;
+    --chart-2: <%- colors.light["chart-2"] %>;
+    --chart-3: <%- colors.light["chart-3"] %>;
+    --chart-4: <%- colors.light["chart-4"] %>;
+    --chart-5: <%- colors.light["chart-5"] %>;
+  }
+
+  .dark {
+    --background: <%- colors.dark["background"] %>;
+    --foreground: <%- colors.dark["foreground"] %>;
+    --card: <%- colors.dark["card"] %>;
+    --card-foreground: <%- colors.dark["card-foreground"] %>;
+    --popover: <%- colors.dark["popover"] %>;
+    --popover-foreground: <%- colors.dark["popover-foreground"] %>;
+    --primary: <%- colors.dark["primary"] %>;
+    --primary-foreground: <%- colors.dark["primary-foreground"] %>;
+    --secondary: <%- colors.dark["secondary"] %>;
+    --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
+    --muted: <%- colors.dark["muted"] %>;
+    --muted-foreground: <%- colors.dark["muted-foreground"] %>;
+    --accent: <%- colors.dark["accent"] %>;
+    --accent-foreground: <%- colors.dark["accent-foreground"] %>;
+    --destructive: <%- colors.dark["destructive"] %>;
+    --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
+    --border: <%- colors.dark["border"] %>;
+    --input: <%- colors.dark["input"] %>;
+    --ring: <%- colors.dark["ring"] %>;
+    --chart-1: <%- colors.dark["chart-1"] %>;
+    --chart-2: <%- colors.dark["chart-2"] %>;
+    --chart-3: <%- colors.dark["chart-3"] %>;
+    --chart-4: <%- colors.dark["chart-4"] %>;
+    --chart-5: <%- colors.dark["chart-5"] %>;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`
+
+   for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone"]) {
+      const base: Record<string, any> = {
+         inlineColors: {},
+         cssVars: {},
+      }
+      for (const [mode, values] of Object.entries(colorMapping)) {
+         base["inlineColors"][mode] = {}
+         base["cssVars"][mode] = {}
+         for (const [key, value] of Object.entries(values)) {
+            if (typeof value === "string") {
+               // Chart colors do not have a 1-to-1 mapping with tailwind colors.
+               if (key.startsWith("chart-")) {
+                  base["cssVars"][mode][key] = value
+                  continue
+               }
+
+               const resolvedColor = value.replace(
+                  /{{base}}-/g,
+                  `${baseColor}-`,
+               )
+               base["inlineColors"][mode][key] = resolvedColor
+
+               const [resolvedBase, scale] = resolvedColor.split("-")
+               const color = scale
+                  ? colorsData[resolvedBase].find(
+                       (item: any) => item.scale === Number.parseInt(scale),
+                    )
+                  : colorsData[resolvedBase]
+               if (color) {
+                  base["cssVars"][mode][key] = color.hslChannel
+               }
+            }
+         }
+      }
+
+      // Build css vars.
+      base["inlineColorsTemplate"] = template(BASE_STYLES)({})
+      base["cssVarsTemplate"] = template(BASE_STYLES_WITH_VARIABLES)({
+         colors: base["cssVars"],
+      })
+
+      await fs.writeFile(
+         path.join(REGISTRY_PATH, `colors/${baseColor}.json`),
+         JSON.stringify(base, null, 2),
+         "utf8",
+      )
+
+      // ----------------------------------------------------------------------------
+      // Build registry/themes.css
+      // ----------------------------------------------------------------------------
+      const THEME_STYLES_WITH_VARIABLES = `
+.theme-<%- theme %> {
+  --background: <%- colors.light["background"] %>;
+  --foreground: <%- colors.light["foreground"] %>;
+
+  --muted: <%- colors.light["muted"] %>;
+  --muted-foreground: <%- colors.light["muted-foreground"] %>;
+
+  --popover: <%- colors.light["popover"] %>;
+  --popover-foreground: <%- colors.light["popover-foreground"] %>;
+
+  --card: <%- colors.light["card"] %>;
+  --card-foreground: <%- colors.light["card-foreground"] %>;
+
+  --border: <%- colors.light["border"] %>;
+  --input: <%- colors.light["input"] %>;
+
+  --primary: <%- colors.light["primary"] %>;
+  --primary-foreground: <%- colors.light["primary-foreground"] %>;
+
+  --secondary: <%- colors.light["secondary"] %>;
+  --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
+
+  --accent: <%- colors.light["accent"] %>;
+  --accent-foreground: <%- colors.light["accent-foreground"] %>;
+
+  --destructive: <%- colors.light["destructive"] %>;
+  --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
+
+  --ring: <%- colors.light["ring"] %>;
+
+  --radius: <%- colors.light["radius"] %>;
+}
+
+.dark .theme-<%- theme %> {
+  --background: <%- colors.dark["background"] %>;
+  --foreground: <%- colors.dark["foreground"] %>;
+
+  --muted: <%- colors.dark["muted"] %>;
+  --muted-foreground: <%- colors.dark["muted-foreground"] %>;
+
+  --popover: <%- colors.dark["popover"] %>;
+  --popover-foreground: <%- colors.dark["popover-foreground"] %>;
+
+  --card: <%- colors.dark["card"] %>;
+  --card-foreground: <%- colors.dark["card-foreground"] %>;
+
+  --border: <%- colors.dark["border"] %>;
+  --input: <%- colors.dark["input"] %>;
+
+  --primary: <%- colors.dark["primary"] %>;
+  --primary-foreground: <%- colors.dark["primary-foreground"] %>;
+
+  --secondary: <%- colors.dark["secondary"] %>;
+  --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
+
+  --accent: <%- colors.dark["accent"] %>;
+  --accent-foreground: <%- colors.dark["accent-foreground"] %>;
+
+  --destructive: <%- colors.dark["destructive"] %>;
+  --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
+
+  --ring: <%- colors.dark["ring"] %>;
+}`
+
+      const themeCSS = []
+      for (const theme of baseColors) {
+         themeCSS.push(
+            // @ts-ignore
+            template(THEME_STYLES_WITH_VARIABLES)({
+               colors: theme.cssVars,
+               theme: theme.name,
+            }),
+         )
+      }
+
+      await fs.writeFile(
+         path.join(REGISTRY_PATH, `themes.css`),
+         themeCSS.join("\n"),
+         "utf8",
+      )
+
+      // ----------------------------------------------------------------------------
+      // Build registry/themes/[theme].json
+      // ----------------------------------------------------------------------------
+      rimraf.sync(path.join(REGISTRY_PATH, "themes"))
+      for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone"]) {
+         const payload: Record<string, any> = {
+            name: baseColor,
+            label: baseColor.charAt(0).toUpperCase() + baseColor.slice(1),
+            cssVars: {},
+         }
+         for (const [mode, values] of Object.entries(colorMapping)) {
+            payload.cssVars[mode] = {}
+            for (const [key, value] of Object.entries(values)) {
+               if (typeof value === "string") {
+                  const resolvedColor = value.replace(
+                     /{{base}}-/g,
+                     `${baseColor}-`,
+                  )
+                  payload.cssVars[mode][key] = resolvedColor
+
+                  const [resolvedBase, scale] = resolvedColor.split("-")
+                  const color = scale
+                     ? colorsData[resolvedBase].find(
+                          (item: any) => item.scale === Number.parseInt(scale),
+                       )
+                     : colorsData[resolvedBase]
+                  if (color) {
+                     payload["cssVars"][mode][key] = color.hslChannel
+                  }
+               }
+            }
+         }
+
+         const targetPath = path.join(REGISTRY_PATH, "themes")
+
+         // Create directory if it doesn't exist.
+         if (!existsSync(targetPath)) {
+            await fs.mkdir(targetPath, { recursive: true })
+         }
+
+         await fs.writeFile(
+            path.join(targetPath, `${payload.name}.json`),
+            JSON.stringify(payload, null, 2),
+            "utf8",
+         )
+      }
+   }
+}
+
+// ----------------------------------------------------------------------------
+// Build registry/icons/index.json.
+// ----------------------------------------------------------------------------
+async function buildIcons() {
+   const iconsTargetPath = path.join(REGISTRY_PATH, "icons")
+   rimraf.sync(iconsTargetPath)
+   if (!existsSync(iconsTargetPath)) {
+      await fs.mkdir(iconsTargetPath, { recursive: true })
+   }
+
+   const iconsData = icons
+
+   await fs.writeFile(
+      path.join(iconsTargetPath, "index.json"),
+      JSON.stringify(iconsData, null, 2),
+      "utf8",
+   )
+}
+
+try {
+   console.log("💽 Building registry...")
+   const result = registrySchema.safeParse(registry)
+
+   if (!result.success) {
+      console.error(result.error)
+      process.exit(1)
+   }
+
+   await syncStyles()
+   await buildStyles(result.data)
+   await buildStylesIndex()
+   await buildThemes()
+   await buildIcons()
+
+   console.log("✅ Done!")
+} catch (error) {
+   console.error(error)
+   process.exit(1)
+}
diff --git a/apps/web/scripts/env.mjs b/apps/web/scripts/env.mjs
new file mode 100644
index 00000000..a8f93cd9
--- /dev/null
+++ b/apps/web/scripts/env.mjs
@@ -0,0 +1,28 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  /*
+   * Serverside Environment variables, not available on the client.
+   * Will throw if you access these variables on the client.
+   */
+  server: {},
+  /*
+   * Environment variables available on the client (and server).
+   *
+   * 💡 You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
+   */
+  client: {
+    NEXT_PUBLIC_APP_URL: z.string().min(1),
+  },
+
+  /*
+   * Due to how Next.js bundles environment variables on Edge and Client,
+   * we need to manually destructure them to make sure all are included in bundle.
+   *
+   * 💡 You'll get type errors if not all variables from `server` & `client` are included here.
+   */
+  runtimeEnv: {
+    NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
+  },
+});
diff --git a/apps/web/scripts/env.mts b/apps/web/scripts/env.mts
deleted file mode 100644
index 76c346b8..00000000
--- a/apps/web/scripts/env.mts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { createEnv } from '@t3-oss/env-nextjs'
-import { z } from 'zod'
-import dotenv from 'dotenv'
-
-// Lade die .env-Datei
-dotenv.config()
-
-export const env = createEnv({
-   /*
-   * Serverside Environment variables, not available on the client.
-   * Will throw if you access these variables on the client.
-   */
-   server: {},
-   /*
-   * Environment variables available on the client (and server).
-   *
-   * 💡 You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
-   */
-   client: {
-      NEXT_PUBLIC_APP_URL: z.string().min(1),
-   },
-
-   /*
-   * Due to how Next.js bundles environment variables on Edge and Client,
-   * we need to manually destructure them to make sure all are included in bundle.
-   *
-   * 💡 You'll get type errors if not all variables from `server` & `client` are included here.
-   */
-   runtimeEnv: {
-      NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
-   },
-})
diff --git a/apps/web/scripts/fix-v0-import.mts b/apps/web/scripts/fix-v0-import.mts
new file mode 100644
index 00000000..6b932bef
--- /dev/null
+++ b/apps/web/scripts/fix-v0-import.mts
@@ -0,0 +1,57 @@
+export function fixImport(content: string) {
+   const atRegex =
+      /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g
+
+   const atReplacement = (
+      match: string,
+      path: string,
+      type: string,
+      component: string,
+   ) => {
+      if (type.endsWith("components")) {
+         return `@/components/${component}`
+      } else if (type.endsWith("ui")) {
+         return `@/components/ui/${component}`
+      } else if (type.endsWith("hooks")) {
+         return `@/hooks/${component}`
+      } else if (type.endsWith("lib")) {
+         return `@/lib/${component}`
+      }
+
+      return match
+   }
+
+   const tildeRegex =
+      /~\/(registry\/miami\/)?((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g
+
+   const tildeReplacement = (
+      match: string,
+      _path: string,
+      type: string,
+      component: string,
+   ) => {
+      if (type.endsWith("components")) {
+         return `@/components/${component}`
+      } else if (type.endsWith("ui")) {
+         return `@/components/ui/${component}`
+      } else if (type.endsWith("hooks")) {
+         return `@/hooks/${component}`
+      } else if (type.endsWith("lib")) {
+         return `@/lib/${component}`
+      }
+
+      return match
+   }
+
+   const importNyRegex = /import\s*{\s*ny\s*}\s*from\s*["']([^"']+)["']/g
+   const importNyReplacement = 'import { cn } from "$1"'
+
+   const nyUsageRegex = /\bny\(/g
+   const nyUsageReplacement = "cn("
+
+   return content
+      .replace(atRegex, atReplacement)
+      .replace(tildeRegex, tildeReplacement)
+      .replace(importNyRegex, importNyReplacement)
+      .replace(nyUsageRegex, nyUsageReplacement)
+}
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index ccc463c6..214d0335 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -112,10 +112,12 @@
 @layer base {
    * {
       @apply border-border;
-      /* Scrollbars für Webkit-Browser (Chrome, Safari, etc.) ausschalten */
-      &::-webkit-scrollbar {
-         display: none;
-      }
+      scrollbar-width: thin;
+      scrollbar-color: hsl(var(--border)) transparent;
+   }
+
+   html {
+      @apply scroll-smooth;
    }
 
    body {
@@ -125,10 +127,24 @@
          'calt' 1;
       font-synthesis-weight: none;
       text-rendering: optimizeLegibility;
-      /* Scrollbars für Firefox ausschalten */
-      scrollbar-width: none;
-      /* IE und Edge */
-      -ms-overflow-style: none;
+   }
+
+   /* Custom scrollbar styling */
+   ::-webkit-scrollbar {
+      width: 5px;
+   }
+   ::-webkit-scrollbar-track {
+      background: transparent;
+   }
+   ::-webkit-scrollbar-thumb {
+      background: hsl(var(--border));
+      border-radius: 5px;
+   }
+
+   @supports (font: -apple-system-body) and (-webkit-appearance: none) {
+      [data-wrapper] {
+         @apply min-[1800px]:border-t;
+      }
    }
 }
 
diff --git a/apps/web/styles/mdx2.css b/apps/web/styles/mdx2.css
new file mode 100644
index 00000000..c8a3596c
--- /dev/null
+++ b/apps/web/styles/mdx2.css
@@ -0,0 +1,75 @@
+[data-theme="light"] {
+  display: block;
+}
+
+[data-theme="dark"] {
+  display: none;
+}
+
+.dark [data-theme="light"] {
+  display: none;
+}
+
+.dark [data-theme="dark"] {
+  display: block;
+}
+
+[data-rehype-pretty-code-fragment] {
+  @apply relative text-white;
+}
+
+[data-rehype-pretty-code-fragment] code {
+  @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0;
+  counter-reset: line;
+  box-decoration-break: clone;
+}
+
+[data-rehype-pretty-code-fragment] .line {
+  @apply px-4 min-h-[1rem] py-0.5 w-full inline-block;
+}
+
+[data-rehype-pretty-code-fragment] [data-line-numbers] .line {
+  @apply px-2;
+}
+
+[data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
+  @apply text-zinc-50/40 text-xs;
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 1.8rem;
+  margin-right: 1.4rem;
+  text-align: right;
+}
+
+[data-rehype-pretty-code-fragment] .line--highlighted {
+  @apply bg-zinc-700/50;
+}
+
+[data-rehype-pretty-code-fragment] .line-highlighted span {
+  @apply relative;
+}
+
+[data-rehype-pretty-code-fragment] .word--highlighted {
+  @apply rounded-md bg-zinc-700/50 border-zinc-700/70 p-1;
+}
+
+.dark [data-rehype-pretty-code-fragment] .word--highlighted {
+  @apply bg-zinc-900;
+}
+
+[data-rehype-pretty-code-title] {
+  @apply mt-2 pt-6 px-4 text-sm font-medium text-foreground;
+}
+
+[data-rehype-pretty-code-title] + pre {
+  @apply mt-2;
+}
+
+.mdx > .steps:first-child > h3:first-child {
+  @apply mt-0;
+}
+
+.steps > h3 {
+  @apply mt-8 mb-4 text-base font-semibold;
+}
diff --git a/apps/web/styles/registry-base-colors.ts b/apps/web/styles/registry-base-colors.ts
deleted file mode 100644
index e14aa6c8..00000000
--- a/apps/web/styles/registry-base-colors.ts
+++ /dev/null
@@ -1,756 +0,0 @@
-export const baseColors = [
-   {
-      name: 'zinc',
-      label: 'Zinc',
-      activeColor: {
-         light: '240 5.9% 10%',
-         dark: '240 5.2% 33.9%',
-      },
-      cssVars: {
-         light: {
-            'background': '0 0% 100%',
-            'foreground': '240 10% 3.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '240 10% 3.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '240 10% 3.9%',
-            'primary': '240 5.9% 10%',
-            'primary-foreground': '0 0% 98%',
-            'secondary': '240 4.8% 95.9%',
-            'secondary-foreground': '240 5.9% 10%',
-            'muted': '240 4.8% 95.9%',
-            'muted-foreground': '240 3.8% 46.1%',
-            'accent': '240 4.8% 95.9%',
-            'accent-foreground': '240 5.9% 10%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '240 5.9% 90%',
-            'input': '240 5.9% 90%',
-            'ring': '240 5.9% 10%',
-            'radius': '0.5rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
-         },
-         dark: {
-            'background': '240 10% 3.9%',
-            'foreground': '0 0% 98%',
-            'card': '240 10% 3.9%',
-            'card-foreground': '0 0% 98%',
-            'popover': '240 10% 3.9%',
-            'popover-foreground': '0 0% 98%',
-            'primary': '0 0% 98%',
-            'primary-foreground': '240 5.9% 10%',
-            'secondary': '240 3.7% 15.9%',
-            'secondary-foreground': '0 0% 98%',
-            'muted': '240 3.7% 15.9%',
-            'muted-foreground': '240 5% 64.9%',
-            'accent': '240 3.7% 15.9%',
-            'accent-foreground': '0 0% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '240 3.7% 15.9%',
-            'input': '240 3.7% 15.9%',
-            'ring': '240 4.9% 83.9%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
-         },
-      },
-   },
-   {
-      name: 'slate',
-      label: 'Slate',
-      activeColor: {
-         light: '215.4 16.3% 46.9%',
-         dark: '215.3 19.3% 34.5%',
-      },
-      cssVars: {
-         light: {
-            'background': '0 0% 100%',
-            'foreground': '222.2 84% 4.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '222.2 84% 4.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '222.2 84% 4.9%',
-            'primary': '222.2 47.4% 11.2%',
-            'primary-foreground': '210 40% 98%',
-            'secondary': '210 40% 96.1%',
-            'secondary-foreground': '222.2 47.4% 11.2%',
-            'muted': '210 40% 96.1%',
-            'muted-foreground': '215.4 16.3% 46.9%',
-            'accent': '210 40% 96.1%',
-            'accent-foreground': '222.2 47.4% 11.2%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '210 40% 98%',
-            'border': '214.3 31.8% 91.4%',
-            'input': '214.3 31.8% 91.4%',
-            'ring': '222.2 84% 4.9%',
-            'radius': '0.5rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
-         },
-         dark: {
-            'background': '222.2 84% 4.9%',
-            'foreground': '210 40% 98%',
-            'card': '222.2 84% 4.9%',
-            'card-foreground': '210 40% 98%',
-            'popover': '222.2 84% 4.9%',
-            'popover-foreground': '210 40% 98%',
-            'primary': '210 40% 98%',
-            'primary-foreground': '222.2 47.4% 11.2%',
-            'secondary': '217.2 32.6% 17.5%',
-            'secondary-foreground': '210 40% 98%',
-            'muted': '217.2 32.6% 17.5%',
-            'muted-foreground': '215 20.2% 65.1%',
-            'accent': '217.2 32.6% 17.5%',
-            'accent-foreground': '210 40% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '210 40% 98%',
-            'border': '217.2 32.6% 17.5%',
-            'input': '217.2 32.6% 17.5%',
-            'ring': '212.7 26.8% 83.9',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
-         },
-      },
-   },
-   {
-      name: 'stone',
-      label: 'Stone',
-      activeColor: {
-         light: '25 5.3% 44.7%',
-         dark: '33.3 5.5% 32.4%',
-      },
-      cssVars: {
-         light: {
-            'background': '0 0% 100%',
-            'foreground': '20 14.3% 4.1%',
-            'card': '0 0% 100%',
-            'card-foreground': '20 14.3% 4.1%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '20 14.3% 4.1%',
-            'primary': '24 9.8% 10%',
-            'primary-foreground': '60 9.1% 97.8%',
-            'secondary': '60 4.8% 95.9%',
-            'secondary-foreground': '24 9.8% 10%',
-            'muted': '60 4.8% 95.9%',
-            'muted-foreground': '25 5.3% 44.7%',
-            'accent': '60 4.8% 95.9%',
-            'accent-foreground': '24 9.8% 10%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '60 9.1% 97.8%',
-            'border': '20 5.9% 90%',
-            'input': '20 5.9% 90%',
-            'ring': '20 14.3% 4.1%',
-            'radius': '0.95rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
-         },
-         dark: {
-            'background': '20 14.3% 4.1%',
-            'foreground': '60 9.1% 97.8%',
-            'card': '20 14.3% 4.1%',
-            'card-foreground': '60 9.1% 97.8%',
-            'popover': '20 14.3% 4.1%',
-            'popover-foreground': '60 9.1% 97.8%',
-            'primary': '60 9.1% 97.8%',
-            'primary-foreground': '24 9.8% 10%',
-            'secondary': '12 6.5% 15.1%',
-            'secondary-foreground': '60 9.1% 97.8%',
-            'muted': '12 6.5% 15.1%',
-            'muted-foreground': '24 5.4% 63.9%',
-            'accent': '12 6.5% 15.1%',
-            'accent-foreground': '60 9.1% 97.8%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '60 9.1% 97.8%',
-            'border': '12 6.5% 15.1%',
-            'input': '12 6.5% 15.1%',
-            'ring': '24 5.7% 82.9%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
-         },
-      },
-   },
-   {
-      name: 'gray',
-      label: 'Gray',
-      activeColor: {
-         light: '220 8.9% 46.1%',
-         dark: '215 13.8% 34.1%',
-      },
-      cssVars: {
-         light: {
-            'background': '0 0% 100%',
-            'foreground': '224 71.4% 4.1%',
-            'card': '0 0% 100%',
-            'card-foreground': '224 71.4% 4.1%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '224 71.4% 4.1%',
-            'primary': '220.9 39.3% 11%',
-            'primary-foreground': '210 20% 98%',
-            'secondary': '220 14.3% 95.9%',
-            'secondary-foreground': '220.9 39.3% 11%',
-            'muted': '220 14.3% 95.9%',
-            'muted-foreground': '220 8.9% 46.1%',
-            'accent': '220 14.3% 95.9%',
-            'accent-foreground': '220.9 39.3% 11%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '210 20% 98%',
-            'border': '220 13% 91%',
-            'input': '220 13% 91%',
-            'ring': '224 71.4% 4.1%',
-            'radius': '0.35rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
-         },
-         dark: {
-            'background': '224 71.4% 4.1%',
-            'foreground': '210 20% 98%',
-            'card': '224 71.4% 4.1%',
-            'card-foreground': '210 20% 98%',
-            'popover': '224 71.4% 4.1%',
-            'popover-foreground': '210 20% 98%',
-            'primary': '210 20% 98%',
-            'primary-foreground': '220.9 39.3% 11%',
-            'secondary': '215 27.9% 16.9%',
-            'secondary-foreground': '210 20% 98%',
-            'muted': '215 27.9% 16.9%',
-            'muted-foreground': '217.9 10.6% 64.9%',
-            'accent': '215 27.9% 16.9%',
-            'accent-foreground': '210 20% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '210 20% 98%',
-            'border': '215 27.9% 16.9%',
-            'input': '215 27.9% 16.9%',
-            'ring': '216 12.2% 83.9%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
-         },
-      },
-   },
-   {
-      name: 'neutral',
-      label: 'Neutral',
-      activeColor: {
-         light: '0 0% 45.1%',
-         dark: '0 0% 32.2%',
-      },
-      cssVars: {
-         light: {
-            'background': '0 0% 100%',
-            'foreground': '0 0% 3.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '0 0% 3.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '0 0% 3.9%',
-            'primary': '0 0% 9%',
-            'primary-foreground': '0 0% 98%',
-            'secondary': '0 0% 96.1%',
-            'secondary-foreground': '0 0% 9%',
-            'muted': '0 0% 96.1%',
-            'muted-foreground': '0 0% 45.1%',
-            'accent': '0 0% 96.1%',
-            'accent-foreground': '0 0% 9%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '0 0% 89.8%',
-            'input': '0 0% 89.8%',
-            'ring': '0 0% 3.9%',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
-         },
-         dark: {
-            'background': '0 0% 3.9%',
-            'foreground': '0 0% 98%',
-            'card': '0 0% 3.9%',
-            'card-foreground': '0 0% 98%',
-            'popover': '0 0% 3.9%',
-            'popover-foreground': '0 0% 98%',
-            'primary': '0 0% 98%',
-            'primary-foreground': '0 0% 9%',
-            'secondary': '0 0% 14.9%',
-            'secondary-foreground': '0 0% 98%',
-            'muted': '0 0% 14.9%',
-            'muted-foreground': '0 0% 63.9%',
-            'accent': '0 0% 14.9%',
-            'accent-foreground': '0 0% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '0 0% 14.9%',
-            'input': '0 0% 14.9%',
-            'ring': '0 0% 83.1%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
-         },
-      },
-   },
-   {
-      name: 'red',
-      label: 'Red',
-      activeColor: {
-         light: '0 72.2% 50.6%',
-         dark: '0 72.2% 50.6%',
-      },
-      cssVars: {
-         light: {
-            'background': '0 0% 100%',
-            'foreground': '0 0% 3.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '0 0% 3.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '0 0% 3.9%',
-            'primary': '0 72.2% 50.6%',
-            'primary-foreground': '0 85.7% 97.3%',
-            'secondary': '0 0% 96.1%',
-            'secondary-foreground': '0 0% 9%',
-            'muted': '0 0% 96.1%',
-            'muted-foreground': '0 0% 45.1%',
-            'accent': '0 0% 96.1%',
-            'accent-foreground': '0 0% 9%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '0 0% 89.8%',
-            'input': '0 0% 89.8%',
-            'ring': '0 72.2% 50.6%',
-            'radius': '0.4rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
-         },
-         dark: {
-            'background': '0 0% 3.9%',
-            'foreground': '0 0% 98%',
-            'card': '0 0% 3.9%',
-            'card-foreground': '0 0% 98%',
-            'popover': '0 0% 3.9%',
-            'popover-foreground': '0 0% 98%',
-            'primary': '0 72.2% 50.6%',
-            'primary-foreground': '0 85.7% 97.3%',
-            'secondary': '0 0% 14.9%',
-            'secondary-foreground': '0 0% 98%',
-            'muted': '0 0% 14.9%',
-            'muted-foreground': '0 0% 63.9%',
-            'accent': '0 0% 14.9%',
-            'accent-foreground': '0 0% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '0 0% 14.9%',
-            'input': '0 0% 14.9%',
-            'ring': '0 72.2% 50.6%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
-         },
-      },
-   },
-   {
-      name: 'rose',
-      label: 'Rose',
-      activeColor: {
-         light: '346.8 77.2% 49.8%',
-         dark: '346.8 77.2% 49.8%',
-      },
-      cssVars: {
-         light: {
-            'background': '0 0% 100%',
-            'foreground': '240 10% 3.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '240 10% 3.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '240 10% 3.9%',
-            'primary': '346.8 77.2% 49.8%',
-            'primary-foreground': '355.7 100% 97.3%',
-            'secondary': '240 4.8% 95.9%',
-            'secondary-foreground': '240 5.9% 10%',
-            'muted': '240 4.8% 95.9%',
-            'muted-foreground': '240 3.8% 46.1%',
-            'accent': '240 4.8% 95.9%',
-            'accent-foreground': '240 5.9% 10%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '240 5.9% 90%',
-            'input': '240 5.9% 90%',
-            'ring': '346.8 77.2% 49.8%',
-            'radius': '0.5rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
-         },
-         dark: {
-            'background': '20 14.3% 4.1%',
-            'foreground': '0 0% 95%',
-            'popover': '0 0% 9%',
-            'popover-foreground': '0 0% 95%',
-            'card': '24 9.8% 10%',
-            'card-foreground': '0 0% 95%',
-            'primary': '346.8 77.2% 49.8%',
-            'primary-foreground': '355.7 100% 97.3%',
-            'secondary': '240 3.7% 15.9%',
-            'secondary-foreground': '0 0% 98%',
-            'muted': '0 0% 15%',
-            'muted-foreground': '240 5% 64.9%',
-            'accent': '12 6.5% 15.1%',
-            'accent-foreground': '0 0% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '0 85.7% 97.3%',
-            'border': '240 3.7% 15.9%',
-            'input': '240 3.7% 15.9%',
-            'ring': '346.8 77.2% 49.8%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
-         },
-      },
-   },
-   {
-      name: 'orange',
-      label: 'Orange',
-      activeColor: {
-         light: '24.6 95% 53.1%',
-         dark: '20.5 90.2% 48.2%',
-      },
-      cssVars: {
-         light: {
-            'background': '0 0% 100%',
-            'foreground': '20 14.3% 4.1%',
-            'card': '0 0% 100%',
-            'card-foreground': '20 14.3% 4.1%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '20 14.3% 4.1%',
-            'primary': '24.6 95% 53.1%',
-            'primary-foreground': '60 9.1% 97.8%',
-            'secondary': '60 4.8% 95.9%',
-            'secondary-foreground': '24 9.8% 10%',
-            'muted': '60 4.8% 95.9%',
-            'muted-foreground': '25 5.3% 44.7%',
-            'accent': '60 4.8% 95.9%',
-            'accent-foreground': '24 9.8% 10%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '60 9.1% 97.8%',
-            'border': '20 5.9% 90%',
-            'input': '20 5.9% 90%',
-            'ring': '24.6 95% 53.1%',
-            'radius': '0.95rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
-         },
-         dark: {
-            'background': '20 14.3% 4.1%',
-            'foreground': '60 9.1% 97.8%',
-            'card': '20 14.3% 4.1%',
-            'card-foreground': '60 9.1% 97.8%',
-            'popover': '20 14.3% 4.1%',
-            'popover-foreground': '60 9.1% 97.8%',
-            'primary': '20.5 90.2% 48.2%',
-            'primary-foreground': '60 9.1% 97.8%',
-            'secondary': '12 6.5% 15.1%',
-            'secondary-foreground': '60 9.1% 97.8%',
-            'muted': '12 6.5% 15.1%',
-            'muted-foreground': '24 5.4% 63.9%',
-            'accent': '12 6.5% 15.1%',
-            'accent-foreground': '60 9.1% 97.8%',
-            'destructive': '0 72.2% 50.6%',
-            'destructive-foreground': '60 9.1% 97.8%',
-            'border': '12 6.5% 15.1%',
-            'input': '12 6.5% 15.1%',
-            'ring': '20.5 90.2% 48.2%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
-         },
-      },
-   },
-   {
-      name: 'green',
-      label: 'Green',
-      activeColor: {
-         light: '142.1 76.2% 36.3%',
-         dark: '142.1 70.6% 45.3%',
-      },
-      cssVars: {
-         light: {
-            'background': '0 0% 100%',
-            'foreground': '240 10% 3.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '240 10% 3.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '240 10% 3.9%',
-            'primary': '142.1 76.2% 36.3%',
-            'primary-foreground': '355.7 100% 97.3%',
-            'secondary': '240 4.8% 95.9%',
-            'secondary-foreground': '240 5.9% 10%',
-            'muted': '240 4.8% 95.9%',
-            'muted-foreground': '240 3.8% 46.1%',
-            'accent': '240 4.8% 95.9%',
-            'accent-foreground': '240 5.9% 10%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '0 0% 98%',
-            'border': '240 5.9% 90%',
-            'input': '240 5.9% 90%',
-            'ring': '142.1 76.2% 36.3%',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
-         },
-         dark: {
-            'background': '20 14.3% 4.1%',
-            'foreground': '0 0% 95%',
-            'popover': '0 0% 9%',
-            'popover-foreground': '0 0% 95%',
-            'card': '24 9.8% 10%',
-            'card-foreground': '0 0% 95%',
-            'primary': '142.1 70.6% 45.3%',
-            'primary-foreground': '144.9 80.4% 10%',
-            'secondary': '240 3.7% 15.9%',
-            'secondary-foreground': '0 0% 98%',
-            'muted': '0 0% 15%',
-            'muted-foreground': '240 5% 64.9%',
-            'accent': '12 6.5% 15.1%',
-            'accent-foreground': '0 0% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '0 85.7% 97.3%',
-            'border': '240 3.7% 15.9%',
-            'input': '240 3.7% 15.9%',
-            'ring': '142.4 71.8% 29.2%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
-         },
-      },
-   },
-   {
-      name: 'blue',
-      label: 'Blue',
-      activeColor: {
-         light: '221.2 83.2% 53.3%',
-         dark: '217.2 91.2% 59.8%',
-      },
-      cssVars: {
-         light: {
-            'background': '0 0% 100%',
-            'foreground': '222.2 84% 4.9%',
-            'card': '0 0% 100%',
-            'card-foreground': '222.2 84% 4.9%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '222.2 84% 4.9%',
-            'primary': '221.2 83.2% 53.3%',
-            'primary-foreground': '210 40% 98%',
-            'secondary': '210 40% 96.1%',
-            'secondary-foreground': '222.2 47.4% 11.2%',
-            'muted': '210 40% 96.1%',
-            'muted-foreground': '215.4 16.3% 46.9%',
-            'accent': '210 40% 96.1%',
-            'accent-foreground': '222.2 47.4% 11.2%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '210 40% 98%',
-            'border': '214.3 31.8% 91.4%',
-            'input': '214.3 31.8% 91.4%',
-            'ring': '221.2 83.2% 53.3%',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
-         },
-         dark: {
-            'background': '222.2 84% 4.9%',
-            'foreground': '210 40% 98%',
-            'card': '222.2 84% 4.9%',
-            'card-foreground': '210 40% 98%',
-            'popover': '222.2 84% 4.9%',
-            'popover-foreground': '210 40% 98%',
-            'primary': '217.2 91.2% 59.8%',
-            'primary-foreground': '222.2 47.4% 11.2%',
-            'secondary': '217.2 32.6% 17.5%',
-            'secondary-foreground': '210 40% 98%',
-            'muted': '217.2 32.6% 17.5%',
-            'muted-foreground': '215 20.2% 65.1%',
-            'accent': '217.2 32.6% 17.5%',
-            'accent-foreground': '210 40% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '210 40% 98%',
-            'border': '217.2 32.6% 17.5%',
-            'input': '217.2 32.6% 17.5%',
-            'ring': '224.3 76.3% 48%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
-         },
-      },
-   },
-   {
-      name: 'yellow',
-      label: 'Yellow',
-      activeColor: {
-         light: '47.9 95.8% 53.1%',
-         dark: '47.9 95.8% 53.1%',
-      },
-      cssVars: {
-         light: {
-            'background': '0 0% 100%',
-            'foreground': '20 14.3% 4.1%',
-            'card': '0 0% 100%',
-            'card-foreground': '20 14.3% 4.1%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '20 14.3% 4.1%',
-            'primary': '47.9 95.8% 53.1%',
-            'primary-foreground': '26 83.3% 14.1%',
-            'secondary': '60 4.8% 95.9%',
-            'secondary-foreground': '24 9.8% 10%',
-            'muted': '60 4.8% 95.9%',
-            'muted-foreground': '25 5.3% 44.7%',
-            'accent': '60 4.8% 95.9%',
-            'accent-foreground': '24 9.8% 10%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '60 9.1% 97.8%',
-            'border': '20 5.9% 90%',
-            'input': '20 5.9% 90%',
-            'ring': '20 14.3% 4.1%',
-            'radius': '0.95rem',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
-         },
-         dark: {
-            'background': '20 14.3% 4.1%',
-            'foreground': '60 9.1% 97.8%',
-            'card': '20 14.3% 4.1%',
-            'card-foreground': '60 9.1% 97.8%',
-            'popover': '20 14.3% 4.1%',
-            'popover-foreground': '60 9.1% 97.8%',
-            'primary': '47.9 95.8% 53.1%',
-            'primary-foreground': '26 83.3% 14.1%',
-            'secondary': '12 6.5% 15.1%',
-            'secondary-foreground': '60 9.1% 97.8%',
-            'muted': '12 6.5% 15.1%',
-            'muted-foreground': '24 5.4% 63.9%',
-            'accent': '12 6.5% 15.1%',
-            'accent-foreground': '60 9.1% 97.8%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '60 9.1% 97.8%',
-            'border': '12 6.5% 15.1%',
-            'input': '12 6.5% 15.1%',
-            'ring': '35.5 91.7% 32.9%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
-         },
-      },
-   },
-   {
-      name: 'violet',
-      label: 'Violet',
-      activeColor: {
-         light: '262.1 83.3% 57.8%',
-         dark: '263.4 70% 50.4%',
-      },
-      cssVars: {
-         light: {
-            'background': '0 0% 100%',
-            'foreground': '224 71.4% 4.1%',
-            'card': '0 0% 100%',
-            'card-foreground': '224 71.4% 4.1%',
-            'popover': '0 0% 100%',
-            'popover-foreground': '224 71.4% 4.1%',
-            'primary': '262.1 83.3% 57.8%',
-            'primary-foreground': '210 20% 98%',
-            'secondary': '220 14.3% 95.9%',
-            'secondary-foreground': '220.9 39.3% 11%',
-            'muted': '220 14.3% 95.9%',
-            'muted-foreground': '220 8.9% 46.1%',
-            'accent': '220 14.3% 95.9%',
-            'accent-foreground': '220.9 39.3% 11%',
-            'destructive': '0 84.2% 60.2%',
-            'destructive-foreground': '210 20% 98%',
-            'border': '220 13% 91%',
-            'input': '220 13% 91%',
-            'ring': '262.1 83.3% 57.8%',
-            'chart-1': '12 76% 61%',
-            'chart-2': '173 58% 39%',
-            'chart-3': '197 37% 24%',
-            'chart-4': '43 74% 66%',
-            'chart-5': '27 87% 67%',
-         },
-         dark: {
-            'background': '224 71.4% 4.1%',
-            'foreground': '210 20% 98%',
-            'card': '224 71.4% 4.1%',
-            'card-foreground': '210 20% 98%',
-            'popover': '224 71.4% 4.1%',
-            'popover-foreground': '210 20% 98%',
-            'primary': '263.4 70% 50.4%',
-            'primary-foreground': '210 20% 98%',
-            'secondary': '215 27.9% 16.9%',
-            'secondary-foreground': '210 20% 98%',
-            'muted': '215 27.9% 16.9%',
-            'muted-foreground': '217.9 10.6% 64.9%',
-            'accent': '215 27.9% 16.9%',
-            'accent-foreground': '210 20% 98%',
-            'destructive': '0 62.8% 30.6%',
-            'destructive-foreground': '210 20% 98%',
-            'border': '215 27.9% 16.9%',
-            'input': '215 27.9% 16.9%',
-            'ring': '263.4 70% 50.4%',
-            'chart-1': '220 70% 50%',
-            'chart-2': '160 60% 45%',
-            'chart-3': '30 80% 55%',
-            'chart-4': '280 65% 60%',
-            'chart-5': '340 75% 55%',
-         },
-      },
-   },
-] as const
-
-export type BaseColor = (typeof baseColors)[number]
diff --git a/apps/web/styles/registry-styles.ts b/apps/web/styles/registry-styles.ts
deleted file mode 100644
index 5cb277c8..00000000
--- a/apps/web/styles/registry-styles.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const styles = [
-   {
-      name: 'default',
-      label: 'Default',
-   },
-] as const
-
-export type Style = (typeof styles)[number]
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 8b2d4214..a22f04a3 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,49 +1,42 @@
 {
-  "compilerOptions": {
-    "incremental": true,
-    "target": "esnext",
-    "jsx": "preserve",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "baseUrl": ".",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "paths": {
-      "~/*": [
-        "./*"
+   "compilerOptions": {
+      "baseUrl": ".",
+      "target": "esnext",
+      "lib": ["dom", "dom.iterable", "esnext"],
+      "allowJs": true,
+      "skipLibCheck": true,
+      "strict": true,
+      "forceConsistentCasingInFileNames": true,
+      "noEmit": true,
+      "esModuleInterop": true,
+      "module": "esnext",
+      "moduleResolution": "bundler",
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "jsx": "preserve",
+      "incremental": true,
+      "plugins": [
+         {
+            "name": "next"
+         }
       ],
-      "content-collections": ["./.content-collections/generated"]
-    },
-    "resolveJsonModule": true,
-    "allowImportingTsExtensions": true,
-    "allowJs": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "skipLibCheck": true,
-    "plugins": [
-      {
-        "name": "next"
+      "paths": {
+         "~/*": ["./*"],
+         "content-collections": ["./.content-collections/generated"]
       }
-    ]
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".content-colletions/generated"
-  ],
-  "exclude": [
-    "node_modules",
-    "packages/**/*",
-    "scripts/**/*",
-    "scripts/build-registry.ts",
-    "__registry__"
-  ]
+   },
+   "include": [
+      "next-env.d.ts",
+      "**/*.ts",
+      "**/*.tsx",
+      ".next/types/**/*.ts",
+      ".content-colletions/generated"
+   ],
+   "exclude": [
+      "node_modules",
+      "packages/**/*",
+      "scripts/**/*",
+      "scripts/build-registry.ts",
+      "__registry__"
+   ]
 }
diff --git a/apps/web/tsconfig.scripts.json b/apps/web/tsconfig.scripts.json
index f8c8edab..cbdbd41a 100644
--- a/apps/web/tsconfig.scripts.json
+++ b/apps/web/tsconfig.scripts.json
@@ -1,13 +1,13 @@
 {
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "target": "es6",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "isolatedModules": false
-  },
-  "include": [".content-collections/generated", "scripts/**/*.ts"],
-  "exclude": ["node_modules"]
+   "$schema": "https://json.schemastore.org/tsconfig",
+   "extends": "./tsconfig.json",
+   "compilerOptions": {
+      "target": "es6",
+      "module": "ESNext",
+      "moduleResolution": "node",
+      "esModuleInterop": true,
+      "isolatedModules": false
+   },
+   "include": [".content-collections/generated", "scripts/**/*.ts"],
+   "exclude": ["node_modules"]
 }
diff --git a/apps/web/types/nav.ts b/apps/web/types/nav.ts
index 3282578d..aa7b0134 100644
--- a/apps/web/types/nav.ts
+++ b/apps/web/types/nav.ts
@@ -1,4 +1,4 @@
-import type { Icons } from '~/components/icons'
+import type { Icons } from "~/components/icons"
 
 export interface NavItem {
    title: string
@@ -6,10 +6,23 @@ export interface NavItem {
    disabled?: boolean
    external?: boolean
    icon?: keyof typeof Icons
-   label?: string
+   label?: NavLabel | NavLabel[]
    items?: NavItem[] // Added for dropdown menus
 }
 
+// Neue NavLabel Interface
+export interface NavLabel {
+   text: string
+   variant?:
+      | "default"
+      | "new"
+      | "beta"
+      | "canary"
+      | "experimental"
+      | "deprecated"
+   color?: string
+}
+
 export interface NavItemWithChildren extends NavItem {
    items: NavItemWithChildren[]
 }
diff --git a/biome.json b/biome.json
new file mode 100644
index 00000000..10f1d02b
--- /dev/null
+++ b/biome.json
@@ -0,0 +1,79 @@
+{
+   "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+   "vcs": {
+      "enabled": false,
+      "clientKind": "git",
+      "useIgnoreFile": false
+   },
+   "files": {
+      "ignoreUnknown": false,
+      "ignore": ["./styles/", "./.contentlayer"]
+   },
+   "formatter": {
+      "enabled": true,
+      "indentStyle": "space",
+      "indentWidth": 3,
+      "lineEnding": "lf"
+   },
+   "javascript": {
+      "formatter": {
+         "quoteStyle": "double",
+         "semicolons": "asNeeded"
+      }
+   },
+   "organizeImports": {
+      "enabled": true
+   },
+   "linter": {
+      "enabled": true,
+      "rules": {
+         "recommended": true,
+         "style": {
+            "useNodejsImportProtocol": "off",
+            "noUnusedTemplateLiteral": "off",
+            "noNonNullAssertion": "off",
+            "noParameterAssign": "off",
+            "useTemplate": "off",
+            "noUselessElse": "off",
+            "useSelfClosingElements": "off",
+            "useExponentiationOperator": "off"
+         },
+         "suspicious": {
+            "noImplicitAnyLet": "off",
+            "noArrayIndexKey": "off",
+            "noShadowRestrictedNames": "off",
+            "noExplicitAny": "off",
+            "noRedeclare": "off",
+            "noSuspiciousSemicolonInJsx": "off"
+         },
+         "complexity": {
+            "noForEach": "off",
+            "useLiteralKeys": "off",
+            "useOptionalChain": "off",
+            "noUselessSwitchCase": "off"
+         },
+         "correctness": {
+            "useJsxKeyInIterable": "off",
+            "useExhaustiveDependencies": "off",
+            "noUnnecessaryContinue": "off"
+         },
+         "a11y": {
+            "useIframeTitle": "off",
+            "noSvgWithoutTitle": "off",
+            "useValidAnchor": "off",
+            "noRedundantAlt": "off",
+            "useButtonType": "off",
+            "useSemanticElements": "off",
+            "useAltText": "off",
+            "useValidAriaRole": "off",
+            "noRedundantRoles": "off"
+         },
+         "security": {
+            "noDangerouslySetInnerHtml": "off"
+         },
+         "performance": {
+            "noDelete": "off"
+         }
+      }
+   }
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
deleted file mode 100644
index d1c1fbe1..00000000
--- a/eslint.config.mjs
+++ /dev/null
@@ -1,33 +0,0 @@
-import nyxb from '@nyxb/eslint-config'
-
-export default nyxb(
-   {
-      formatters: true,
-      react: true,
-      tailwindcss: {
-         settings: {
-            callees: ['classnames', 'ny'],
-            config: './apps/web/tailwind.config.ts',
-         },
-      },
-   },
-   {
-      rules: {
-         'ts/no-unused-expressions': 0,
-         'unused-imports/no-unused-vars': 0,
-         'unused-imports/no-unused-imports': 0,
-         'no-template-curly-in-string': 0,
-         'import/no-duplicates': 0,
-      },
-   },
-   {
-      ignores: [
-         '**/dist/**',
-         '**/node_modules/**',
-         'packages/cli/test/**',
-         'packages/nyxb/test/**',
-         '**/__registry__/**',
-         '**/.content-collections/**',
-      ],
-   },
-)
diff --git a/nixpacks.toml b/nixpacks.toml
index 693e98c6..bb47d16f 100644
--- a/nixpacks.toml
+++ b/nixpacks.toml
@@ -3,13 +3,15 @@ nixPkgs = [ "nodejs_20" ]
 
 [phases.install]
 cmds = [
-   "corepack enable",
-   "pnpm install"
+    "npm install -g corepack",
+    "corepack enable",
+    "corepack prepare pnpm@9.4.0 --activate",
+    "pnpm install"
 ]
 
 [phases.build]
 cmds = [
-   "cd apps/web && pnpm build:registry",
+   "pnpm --filter=nyxb build",
    "pnpm --filter=web build"
 ]
 
@@ -17,7 +19,8 @@ cmds = [
 NIXPACKS_TURBO_APP_NAME = "web"
 NODE_ENV = "production"
 NODE_OPTIONS = "--max-old-space-size=8192"
-NEXT_PUBLIC_APP_URL = "https://your-production-url.com"
+NEXT_PUBLIC_APP_URL = "https://nyxbui.design"
+NODE_VERSION = "20.11.0"
 
 [start]
 cmd = "cd apps/web && pnpm start"
diff --git a/package.json b/package.json
index fd8c3e1f..c1ddb80b 100644
--- a/package.json
+++ b/package.json
@@ -1,63 +1,65 @@
 {
-  "name": "nyxb-ui",
-  "private": true,
-  "packageManager": "pnpm@9.4.0",
-  "scripts": {
-    "build": "turbo build",
-    "build:cli": "turbo --filter=nyxbui build",
-    "build:registry": "pnpm --filter=web build:registry",
-    "build:env": "pnpm --filter=web build:env",
-    "dev": "turbo run dev --parallel",
-    "web:dev": "pnpm --filter=web dev",
-    "cli:dev": "turbo --filter=nyxbui dev",
-    "cli:start": "pnpm --filter=nyxbui start:dev",
-    "nyxb:dev": "turbo --filter=nyxb dev",
-    "nyxb:build": "turbo --filter=nyxb build",
-    "nyxb:test": "turbo --filter=nyxb test",
-    "preview": "turbo run preview",
-    "sync:templates": "./scripts/sync-templates.sh \"templates/*\"",
-    "typecheck": "turbo run typecheck",
-    "pub:beta": "cd packages/cli && pnpm pub:beta",
-    "pub:release": "cd packages/cli && pnpm pub:release",
-    "lint": "turbo run lint",
-    "lint:fix": "turbo run lint:fix",
-    "test": "turbo run test --force"
-  },
-  "dependencies": {
-    "@eslint-react/eslint-plugin": "^1.5.12",
-    "@nyxb/eslint-config": "^3.0.8",
-    "@types/cli-progress": "^3.11.5",
-    "autoprefixer": "^10.4.19",
-    "cli-progress": "^3.12.0",
-    "concurrently": "^8.2.2",
-    "cross-env": "^7.0.3",
-    "eslint": "9.2.0",
-    "eslint-plugin-format": "^0.1.1",
-    "eslint-plugin-react-hooks": "5.1.0-rc-3f1436cca1-20240516",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "eslint-plugin-tailwindcss": "^3.17.4",
-    "postcss": "^8",
-    "prettier": "^2.8.8",
-    "pretty-quick": "^4.0.0",
-    "puppeteer": "^23.9.0",
-    "scroll-into-view-if-needed": "^3.1.0",
-    "tailwindcss": "^3.4.1",
-    "tailwindcss-animate": "^1.0.7",
-    "tsx": "^4.15.5",
-    "turbo": "^2.0.4",
-    "unified": "^11.0.5",
-    "vfile": "^6.0.3",
-    "vite": "^5.4.1",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^2.0.5"
-  },
-  "devDependencies": {
-    "@types/cli-progress": "^3.11.5",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "dotenv": "^16.4.5",
-    "postcss-nesting": "^13.0.1",
-    "typescript": "^5.4.5"
-  }
+   "name": "nyxb-ui",
+   "private": true,
+   "packageManager": "pnpm@9.4.0",
+   "scripts": {
+      "build": "turbo build",
+      "build:cli": "turbo --filter=nyxbui build",
+      "build:registry": "pnpm --filter=web build:registry",
+      "build:v0-registry": "pnpm --filter=web build:v0-registry",
+      "build:all-registry": "pnpm --filter=web build:all-registry",
+      "build:env": "pnpm --filter=web build:env",
+      "dev": "turbo run dev --parallel",
+      "web:dev": "pnpm --filter=web dev",
+      "cli:dev": "turbo --filter=nyxbui dev",
+      "cli:start": "pnpm --filter=nyxbui start:dev",
+      "nyxb:dev": "turbo --filter=nyxb dev",
+      "nyxb:build": "turbo --filter=nyxb build",
+      "nyxb:test": "turbo --filter=nyxb test",
+      "preview": "turbo run preview",
+      "sync:templates": "./scripts/sync-templates.sh \"templates/*\"",
+      "typecheck": "turbo run typecheck",
+      "pub:beta": "cd packages/cli && pnpm pub:beta",
+      "pub:release": "cd packages/cli && pnpm pub:release",
+      "lint": "turbo run lint",
+      "lint:fix": "turbo run lint:fix",
+      "test": "turbo run test --force"
+   },
+   "dependencies": {
+      "@types/cli-progress": "^3.11.5",
+      "autoprefixer": "^10.4.19",
+      "cli-progress": "^3.12.0",
+      "concurrently": "^8.2.2",
+      "cross-env": "^7.0.3",
+      "postcss": "^8",
+      "prettier": "^2.8.8",
+      "pretty-quick": "^4.0.0",
+      "puppeteer": "^23.9.0",
+      "scroll-into-view-if-needed": "^3.1.0",
+      "tailwindcss": "^3.4.1",
+      "tailwindcss-animate": "^1.0.7",
+      "tsx": "^4.15.5",
+      "turbo": "^2.0.4",
+      "unified": "^11.0.5",
+      "vfile": "^6.0.3",
+      "vite": "^5.4.1",
+      "vite-tsconfig-paths": "^4.2.0",
+      "vitest": "^2.0.5"
+   },
+   "devDependencies": {
+      "@biomejs/biome": "^1.9.4",
+      "@types/cli-progress": "^3.11.5",
+      "@types/node": "^20",
+      "@types/react": "^18",
+      "@types/react-dom": "^18",
+      "dotenv": "^16.4.5",
+      "postcss-nesting": "^13.0.1",
+      "typescript": "^5.4.5"
+   },
+   "pnpm": {
+      "overrides": {
+         "react-smooth": "^4.0.1",
+         "react-transition-group": "^4.4.5"
+      }
+   }
 }
diff --git a/packages/nyxb/.gitignore b/packages/nyxb/.gitignore
index dac6408c..49dc6ef6 100644
--- a/packages/nyxb/.gitignore
+++ b/packages/nyxb/.gitignore
@@ -1,3 +1,3 @@
 components
 dist
-.turbo
\ No newline at end of file
+.turbo
diff --git a/packages/nyxb/package.json b/packages/nyxb/package.json
index 1518f22c..ac3ab2e5 100644
--- a/packages/nyxb/package.json
+++ b/packages/nyxb/package.json
@@ -1,88 +1,89 @@
 {
-  "name": "nyxb",
-  "type": "module",
-  "version": "2.0.6",
-  "description": "Add components to your apps.",
-  "publishConfig": {
-    "access": "public"
-  },
-  "author": {
-    "name": "nyxb",
-    "url": "https://twitter.com/nyxb0"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nyxb-ui/ui.git",
-    "directory": "packages/nyxb"
-  },
-  "keywords": [
-    "components",
-    "ui",
-    "tailwind",
-    "radix-ui",
-    "nyxbui"
-  ],
-  "exports": "./dist/index.js",
-  "bin": "./dist/index.js",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
-    "typecheck": "tsc --noEmit",
-    "clean": "rimraf dist && rimraf components",
-    "start:dev": "cross-env REGISTRY_URL=http://localhost:3333/r node dist/index.js",
-    "start": "node dist/index.js",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
-    "release": "bumping",
-    "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta",
-    "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
-    "pub:release": "pnpm build && pnpm publish --access public",
-    "test": "vitest run -u",
-    "test:dev": "REGISTRY_URL=http://localhost:3333/r vitest run -u"
-  },
-  "dependencies": {
-    "@babel/core": "^7.22.1",
-    "@babel/parser": "^7.22.6",
-    "@babel/plugin-transform-typescript": "^7.22.5",
-    "@nyxb/nyxi": "^1.0.0",
-    "bumping": "^9.2.1",
-    "commander": "^10.0.0",
-    "cosmiconfig": "^8.1.3",
-    "deepmerge": "^4.3.1",
-    "diff": "^5.1.0",
-    "execa": "^7.0.0",
-    "fast-glob": "^3.3.2",
-    "fs-extra": "^11.1.0",
-    "giget": "^1.2.3",
-    "https-proxy-agent": "^6.2.0",
-    "kleur": "^4.1.5",
-    "lodash.template": "^4.5.0",
-    "node-fetch": "^3.3.0",
-    "nypm": "^0.3.9",
-    "ora": "^6.1.2",
-    "pathe": "^1.1.2",
-    "postcss": "^8.4.24",
-    "prompts": "^2.4.2",
-    "recast": "^0.23.2",
-    "stringify-object": "^5.0.0",
-    "ts-morph": "^18.0.0",
-    "tsconfig-paths": "^4.2.0",
-    "zod": "^3.20.2"
-  },
-  "devDependencies": {
-    "@types/babel__core": "^7.20.1",
-    "@types/diff": "^5.0.3",
-    "@types/fs-extra": "^11.0.1",
-    "@types/lodash.template": "^4.5.1",
-    "@types/prompts": "^2.4.2",
-    "@types/stringify-object": "^4.0.5",
-    "rimraf": "^6.0.1",
-    "tsup": "^6.6.3",
-    "type-fest": "^3.8.0",
-    "typescript": "^4.9.3"
-  }
+   "name": "nyxb",
+   "version": "2.0.8-canary.1",
+   "description": "Add components to your apps.",
+   "publishConfig": {
+      "access": "public"
+   },
+   "license": "MIT",
+   "author": {
+      "name": "nyxb",
+      "url": "https://twitter.com/nyxb0"
+   },
+   "repository": {
+      "type": "git",
+      "url": "https://github.com/nyxb-ui/ui.git",
+      "directory": "packages/nyxb"
+   },
+   "files": ["dist"],
+   "keywords": ["components", "ui", "tailwind", "radix-ui", "nyxb"],
+   "type": "module",
+   "exports": {
+      ".": {
+         "types": "./dist/index.d.ts",
+         "default": "./dist/index.js"
+      },
+      "./registry": {
+         "types": "./dist/registry/index.d.ts",
+         "default": "./dist/registry/index.js"
+      }
+   },
+   "bin": "./dist/index.js",
+   "scripts": {
+      "dev": "tsup --watch",
+      "build": "tsup",
+      "typecheck": "tsc --noEmit",
+      "clean": "rimraf dist && rimraf components",
+      "start:dev": "cross-env REGISTRY_URL=http://localhost:3333/r node dist/index.js",
+      "start:prod": "cross-env REGISTRY_URL=https://nyxbui.design/r node dist/index.js",
+      "start": "node dist/index.js",
+      "check": "biome check .",
+      "check:fix": "biome check . --write",
+      "release": "bumping",
+      "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta",
+      "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
+      "pub:canary": "pnpm build && pnpm publish --no-git-checks --access public --tag canary",
+      "pub:release": "pnpm build && pnpm publish --access public",
+      "test": "vitest run",
+      "test:dev": "REGISTRY_URL=http://localhost:3333/r vitest run"
+   },
+   "dependencies": {
+      "@babel/core": "^7.22.1",
+      "@babel/parser": "^7.22.6",
+      "@babel/plugin-transform-typescript": "^7.22.5",
+      "@nyxb/nyxi": "^1.0.0",
+      "bumping": "^9.2.1",
+      "commander": "^10.0.0",
+      "cosmiconfig": "^8.1.3",
+      "deepmerge": "^4.3.1",
+      "diff": "^5.1.0",
+      "execa": "^7.0.0",
+      "fast-glob": "^3.3.2",
+      "fs-extra": "^11.1.0",
+      "giget": "^1.2.4",
+      "https-proxy-agent": "^6.2.0",
+      "kleur": "^4.1.5",
+      "node-fetch": "^3.3.0",
+      "nypm": "^0.5.2",
+      "ora": "^6.1.2",
+      "pathe": "^2.0.2",
+      "postcss": "^8.4.24",
+      "prompts": "^2.4.2",
+      "recast": "^0.23.2",
+      "stringify-object": "^5.0.0",
+      "ts-morph": "^18.0.0",
+      "tsconfig-paths": "^4.2.0",
+      "zod": "^3.20.2"
+   },
+   "devDependencies": {
+      "@types/babel__core": "^7.20.1",
+      "@types/diff": "^5.0.3",
+      "@types/fs-extra": "^11.0.1",
+      "@types/prompts": "^2.4.2",
+      "@types/stringify-object": "^4.0.5",
+      "rimraf": "^6.0.1",
+      "tsup": "^6.6.3",
+      "type-fest": "^3.8.0",
+      "typescript": "^4.9.3"
+   }
 }
diff --git a/packages/nyxb/src/commands/add.ts b/packages/nyxb/src/commands/add.ts
index 9700b95c..7b1690d6 100644
--- a/packages/nyxb/src/commands/add.ts
+++ b/packages/nyxb/src/commands/add.ts
@@ -1,17 +1,18 @@
-import path from 'path'
-import { Command } from 'commander'
-import prompts from 'prompts'
-import { z } from 'zod'
-import { runInit } from '~/src/commands/init'
-import { preFlightAdd } from '~/src/preflights/preflight-add'
-import { addComponents } from '~/src/utils/add-components'
-import { createProject } from '~/src/utils/create-project'
-import * as ERRORS from '~/src/utils/errors'
-import { handleError } from '~/src/utils/handle-error'
-import { highlighter } from '~/src/utils/highlighter'
-import { logger } from '~/src/utils/logger'
-import { getRegistryIndex } from '~/src/utils/registry'
-import { updateAppIndex } from '~/src/utils/update-app-index'
+import path from "path"
+import { Command } from "commander"
+import prompts from "prompts"
+import { z } from "zod"
+import { runInit } from "~/src/commands/init"
+import { preFlightAdd } from "~/src/preflights/preflight-add"
+import { getRegistryIndex } from "~/src/registry/api"
+import { addComponents } from "~/src/utils/add-components"
+import { createProject } from "~/src/utils/create-project"
+import * as ERRORS from "~/src/utils/errors"
+import { getConfig } from "~/src/utils/get-config"
+import { handleError } from "~/src/utils/handle-error"
+import { highlighter } from "~/src/utils/highlighter"
+import { logger } from "~/src/utils/logger"
+import { updateAppIndex } from "~/src/utils/update-app-index"
 
 export const addOptionsSchema = z.object({
    components: z.array(z.string()).optional(),
@@ -25,25 +26,25 @@ export const addOptionsSchema = z.object({
 })
 
 export const add = new Command()
-   .name('add')
-   .description('add a component to your project')
+   .name("add")
+   .description("add a component to your project")
    .argument(
-      '[components...]',
-      'the components to add or a url to the component.',
+      "[components...]",
+      "the components to add or a url to the component.",
    )
-   .option('-y, --yes', 'skip confirmation prompt.', false)
-   .option('-o, --overwrite', 'overwrite existing files.', false)
+   .option("-y, --yes", "skip confirmation prompt.", false)
+   .option("-o, --overwrite", "overwrite existing files.", false)
    .option(
-      '-c, --cwd <cwd>',
-      'the working directory. defaults to the current directory.',
+      "-c, --cwd <cwd>",
+      "the working directory. defaults to the current directory.",
       process.cwd(),
    )
-   .option('-a, --all', 'add all available components', false)
-   .option('-p, --path <path>', 'the path to add the component to.')
-   .option('-s, --silent', 'mute output.', false)
+   .option("-a, --all", "add all available components", false)
+   .option("-p, --path <path>", "the path to add the component to.")
+   .option("-s, --silent", "mute output.", false)
    .option(
-      '--src-dir',
-      'use the src directory when creating a new project.',
+      "--src-dir",
+      "use the src directory when creating a new project.",
       false,
    )
    .action(async (components, opts) => {
@@ -56,21 +57,21 @@ export const add = new Command()
 
          // Confirm if user is installing themes.
          // For now, we assume a theme is prefixed with "theme-".
-         const isTheme = options.components?.some(component =>
-            component.includes('theme-'),
+         const isTheme = options.components?.some((component) =>
+            component.includes("theme-"),
          )
          if (!options.yes && isTheme) {
             logger.break()
             const { confirm } = await prompts({
-               type: 'confirm',
-               name: 'confirm',
+               type: "confirm",
+               name: "confirm",
                message: highlighter.warn(
-                  'You are about to install a new theme. \nExisting CSS variables will be overwritten. Continue?',
+                  "You are about to install a new theme. \nExisting CSS variables will be overwritten. Continue?",
                ),
             })
             if (!confirm) {
                logger.break()
-               logger.log('Theme installation cancelled.')
+               logger.log("Theme installation cancelled.")
                logger.break()
                process.exit(1)
             }
@@ -82,14 +83,14 @@ export const add = new Command()
 
          let { errors, config } = await preFlightAdd(options)
 
-         // No nyxbui.json file. Prompt the user to run init.
+         // No components.json file. Prompt the user to run init.
          if (errors[ERRORS.MISSING_CONFIG]) {
             const { proceed } = await prompts({
-               type: 'confirm',
-               name: 'proceed',
+               type: "confirm",
+               name: "proceed",
                message: `You need to create a ${highlighter.info(
-            'nyxbui.json',
-          )} file to add components. Proceed?`,
+                  "nyxbui.json",
+               )} file to add components. Proceed?`,
                initial: true,
             })
 
@@ -112,10 +113,11 @@ export const add = new Command()
 
          let shouldUpdateAppIndex = false
          if (errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
-            const { projectPath } = await createProject({
+            const { projectPath, projectType } = await createProject({
                cwd: options.cwd,
                force: options.overwrite,
                srcDir: options.srcDir,
+               components: options.components,
             })
             if (!projectPath) {
                logger.break()
@@ -123,25 +125,30 @@ export const add = new Command()
             }
             options.cwd = projectPath
 
-            config = await runInit({
-               cwd: options.cwd,
-               yes: true,
-               force: true,
-               defaults: false,
-               skipPreflight: true,
-               silent: true,
-               isNewProject: true,
-               srcDir: options.srcDir,
-            })
-
-            shouldUpdateAppIndex
-          = options.components?.length === 1
-          && !!options.components[0].match(/\/chat\/b\//)
+            if (projectType === "monorepo") {
+               options.cwd = path.resolve(options.cwd, "apps/web")
+               config = await getConfig(options.cwd)
+            } else {
+               config = await runInit({
+                  cwd: options.cwd,
+                  yes: true,
+                  force: true,
+                  defaults: false,
+                  skipPreflight: true,
+                  silent: true,
+                  isNewProject: true,
+                  srcDir: options.srcDir,
+               })
+
+               shouldUpdateAppIndex =
+                  options.components?.length === 1 &&
+                  !!options.components[0].match(/\/chat\/b\//)
+            }
          }
 
          if (!config) {
             throw new Error(
-          `Failed to read config at ${highlighter.info(options.cwd)}.`,
+               `Failed to read config at ${highlighter.info(options.cwd)}.`,
             )
          }
 
@@ -152,8 +159,7 @@ export const add = new Command()
          if (shouldUpdateAppIndex) {
             await updateAppIndex(options.components[0], config)
          }
-      }
-      catch (error) {
+      } catch (error) {
          logger.break()
          handleError(error)
       }
@@ -165,12 +171,12 @@ async function promptForRegistryComponents(
    const registryIndex = await getRegistryIndex()
    if (!registryIndex) {
       logger.break()
-      handleError(new Error('Failed to fetch registry index.'))
+      handleError(new Error("Failed to fetch registry index."))
       return []
    }
 
    if (options.all) {
-      return registryIndex.map(entry => entry.name)
+      return registryIndex.map((entry) => entry.name)
    }
 
    if (options.components?.length) {
@@ -178,30 +184,32 @@ async function promptForRegistryComponents(
    }
 
    const { components } = await prompts({
-      type: 'multiselect',
-      name: 'components',
-      message: 'Which components would you like to add?',
-      hint: 'Space to select. A to toggle all. Enter to submit.',
+      type: "multiselect",
+      name: "components",
+      message: "Which components would you like to add?",
+      hint: "Space to select. A to toggle all. Enter to submit.",
       instructions: false,
       choices: registryIndex
-         .filter(entry => entry.type === 'registry:ui')
-         .map(entry => ({
+         .filter((entry) => entry.type === "registry:ui")
+         .map((entry) => ({
             title: entry.name,
             value: entry.name,
-            selected: options.all ? true : options.components?.includes(entry.name),
+            selected: options.all
+               ? true
+               : options.components?.includes(entry.name),
          })),
    })
 
    if (!components?.length) {
-      logger.warn('No components selected. Exiting.')
-      logger.info('')
+      logger.warn("No components selected. Exiting.")
+      logger.info("")
       process.exit(1)
    }
 
    const result = z.array(z.string()).safeParse(components)
    if (!result.success) {
-      logger.error('')
-      handleError(new Error('Something went wrong. Please try again.'))
+      logger.error("")
+      handleError(new Error("Something went wrong. Please try again."))
       return []
    }
    return result.data
diff --git a/packages/nyxb/src/commands/build.ts b/packages/nyxb/src/commands/build.ts
new file mode 100644
index 00000000..a076ce60
--- /dev/null
+++ b/packages/nyxb/src/commands/build.ts
@@ -0,0 +1,97 @@
+import * as path from "path"
+import { Command } from "commander"
+import * as fs from "fs/promises"
+import { z } from "zod"
+import { preFlightBuild } from "~/src/preflights/preflight-build"
+import { registryItemSchema, registrySchema } from "~/src/registry"
+import { handleError } from "~/src/utils/handle-error"
+import { highlighter } from "~/src/utils/highlighter"
+import { logger } from "~/src/utils/logger"
+import { spinner } from "~/src/utils/spinner"
+
+export const buildOptionsSchema = z.object({
+   cwd: z.string(),
+   registryFile: z.string(),
+   outputDir: z.string(),
+})
+
+export const build = new Command()
+   .name("build")
+   .description("build components for a nyxb registry")
+   .argument("[registry]", "path to registry.json file", "./registry.json")
+   .option(
+      "-o, --output <path>",
+      "destination directory for json files",
+      "./public/r",
+   )
+   .option(
+      "-c, --cwd <cwd>",
+      "the working directory. defaults to the current directory.",
+      process.cwd(),
+   )
+   .action(async (registry: string, opts) => {
+      try {
+         const options = buildOptionsSchema.parse({
+            cwd: path.resolve(opts.cwd),
+            registryFile: registry,
+            outputDir: opts.output,
+         })
+
+         const { resolvePaths } = await preFlightBuild(options)
+         const content = await fs.readFile(resolvePaths.registryFile, "utf-8")
+
+         const result = registrySchema.safeParse(JSON.parse(content))
+
+         if (!result.success) {
+            logger.error(
+               `Invalid registry file found at ${highlighter.info(
+                  resolvePaths.registryFile,
+               )}.`,
+            )
+            process.exit(1)
+         }
+
+         const buildSpinner = spinner("Building registry...")
+         for (const registryItem of result.data.items) {
+            if (!registryItem.files) {
+               continue
+            }
+
+            buildSpinner.start(`Building ${registryItem.name}...`)
+
+            // Add the schema to the registry item.
+            registryItem["$schema"] =
+               "https://nyxbui.design/schema/registry-item.json"
+
+            // Loop through each file in the files array.
+            for (const file of registryItem.files) {
+               file["content"] = await fs.readFile(
+                  path.resolve(resolvePaths.cwd, file.path),
+                  "utf-8",
+               )
+            }
+
+            // Validate the registry item.
+            const result = registryItemSchema.safeParse(registryItem)
+            if (!result.success) {
+               logger.error(
+                  `Invalid registry item found for ${highlighter.info(
+                     registryItem.name,
+                  )}.`,
+               )
+               continue
+            }
+
+            // Write the registry item to the output directory.
+            await fs.writeFile(
+               path.resolve(resolvePaths.outputDir, `${result.data.name}.json`),
+               JSON.stringify(result.data, null, 2),
+            )
+         }
+
+         buildSpinner.succeed("Building registry.")
+      } catch (error) {
+         logger.break()
+         handleError(error)
+      }
+   })
diff --git a/packages/nyxb/src/commands/diff.ts b/packages/nyxb/src/commands/diff.ts
index a8df0332..db073e7c 100644
--- a/packages/nyxb/src/commands/diff.ts
+++ b/packages/nyxb/src/commands/diff.ts
@@ -1,21 +1,20 @@
-import { existsSync, promises as fs } from 'fs'
-import path from 'path'
-import { Command } from 'commander'
-import { type Change, diffLines } from 'diff'
-import { z } from 'zod'
-import type { Config } from '~/src/utils/get-config'
-import { getConfig } from '~/src/utils/get-config'
-import { handleError } from '~/src/utils/handle-error'
-import { highlighter } from '~/src/utils/highlighter'
-import { logger } from '~/src/utils/logger'
+import { promises as fs, existsSync } from "fs"
+import path from "path"
+import { Command } from "commander"
+import { type Change, diffLines } from "diff"
+import { z } from "zod"
 import {
    fetchTree,
    getItemTargetPath,
    getRegistryBaseColor,
    getRegistryIndex,
-} from '~/src/utils/registry'
-import type { registryIndexSchema } from '~/src/utils/registry/schema'
-import { transform } from '~/src/utils/transformers'
+} from "~/src/registry/api"
+import type { registryIndexSchema } from "~/src/registry/schema"
+import { type Config, getConfig } from "~/src/utils/get-config"
+import { handleError } from "~/src/utils/handle-error"
+import { highlighter } from "~/src/utils/highlighter"
+import { logger } from "~/src/utils/logger"
+import { transform } from "~/src/utils/transformers"
 
 const updateOptionsSchema = z.object({
    component: z.string().optional(),
@@ -25,13 +24,13 @@ const updateOptionsSchema = z.object({
 })
 
 export const diff = new Command()
-   .name('diff')
-   .description('check for updates against the registry')
-   .argument('[component]', 'the component name')
-   .option('-y, --yes', 'skip confirmation prompt.', false)
+   .name("diff")
+   .description("check for updates against the registry")
+   .argument("[component]", "the component name")
+   .option("-y, --yes", "skip confirmation prompt.", false)
    .option(
-      '-c, --cwd <cwd>',
-      'the working directory. defaults to the current directory.',
+      "-c, --cwd <cwd>",
+      "the working directory. defaults to the current directory.",
       process.cwd(),
    )
    .action(async (name, opts) => {
@@ -51,9 +50,9 @@ export const diff = new Command()
          const config = await getConfig(cwd)
          if (!config) {
             logger.warn(
-          `Configuration is missing. Please run ${highlighter.success(
-            `init`,
-          )} to create a nyxbui.json file.`,
+               `Configuration is missing. Please run ${highlighter.success(
+                  `init`,
+               )} to create a nyxbui.json file.`,
             )
             process.exit(1)
          }
@@ -61,7 +60,7 @@ export const diff = new Command()
          const registryIndex = await getRegistryIndex()
 
          if (!registryIndex) {
-            handleError(new Error('Failed to fetch registry index.'))
+            handleError(new Error("Failed to fetch registry index."))
             process.exit(1)
          }
 
@@ -73,7 +72,7 @@ export const diff = new Command()
                for (const file of item.files ?? []) {
                   const filePath = path.resolve(
                      targetDir,
-                     typeof file === 'string' ? file : file.path,
+                     typeof file === "string" ? file : file.path,
                   )
                   if (existsSync(filePath)) {
                      return true
@@ -96,11 +95,11 @@ export const diff = new Command()
             }
 
             if (!componentsWithUpdates.length) {
-               logger.info('No updates found.')
+               logger.info("No updates found.")
                process.exit(0)
             }
 
-            logger.info('The following components have updates available:')
+            logger.info("The following components have updates available:")
             for (const component of componentsWithUpdates) {
                logger.info(`- ${component.name}`)
                for (const change of component.changes) {
@@ -109,21 +108,21 @@ export const diff = new Command()
             }
             logger.break()
             logger.info(
-          `Run ${highlighter.success(`diff <component>`)} to see the changes.`,
+               `Run ${highlighter.success(`diff <component>`)} to see the changes.`,
             )
             process.exit(0)
          }
 
          // Show diff for a single component.
          const component = registryIndex.find(
-            item => item.name === options.component,
+            (item) => item.name === options.component,
          )
 
          if (!component) {
             logger.error(
-          `The component ${highlighter.success(
-            options.component,
-          )} does not exist.`,
+               `The component ${highlighter.success(
+                  options.component,
+               )} does not exist.`,
             )
             process.exit(1)
          }
@@ -138,10 +137,9 @@ export const diff = new Command()
          for (const change of changes) {
             logger.info(`- ${change.filePath}`)
             await printDiff(change.patch)
-            logger.info('')
+            logger.info("")
          }
-      }
-      catch (error) {
+      } catch (error) {
          handleError(error)
       }
    })
@@ -169,16 +167,16 @@ async function diffComponent(
       for (const file of item.files ?? []) {
          const filePath = path.resolve(
             targetDir,
-            typeof file === 'string' ? file : file.path,
+            typeof file === "string" ? file : file.path,
          )
 
          if (!existsSync(filePath)) {
             continue
          }
 
-         const fileContent = await fs.readFile(filePath, 'utf8')
+         const fileContent = await fs.readFile(filePath, "utf8")
 
-         if (typeof file === 'string' || !file.content) {
+         if (typeof file === "string" || !file.content) {
             continue
          }
 
diff --git a/packages/nyxb/src/commands/info.ts b/packages/nyxb/src/commands/info.ts
index dab4f7ff..b898a55f 100644
--- a/packages/nyxb/src/commands/info.ts
+++ b/packages/nyxb/src/commands/info.ts
@@ -1,21 +1,20 @@
-/* eslint-disable no-console */
-import { Command } from 'commander'
-import { getConfig } from '~/src/utils/get-config'
-import { getProjectInfo } from '~/src/utils/get-project-info'
-import { logger } from '~/src/utils/logger'
+import { Command } from "commander"
+import { getConfig } from "~/src/utils/get-config"
+import { getProjectInfo } from "~/src/utils/get-project-info"
+import { logger } from "~/src/utils/logger"
 
 export const info = new Command()
-   .name('info')
-   .description('get information about your project')
+   .name("info")
+   .description("get information about your project")
    .option(
-      '-c, --cwd <cwd>',
-      'the working directory. defaults to the current directory.',
+      "-c, --cwd <cwd>",
+      "the working directory. defaults to the current directory.",
       process.cwd(),
    )
    .action(async (opts) => {
-      logger.info('> project info')
+      logger.info("> project info")
       console.log(await getProjectInfo(opts.cwd))
       logger.break()
-      logger.info('> nyxbui.json')
+      logger.info("> nyxbui.json")
       console.log(await getConfig(opts.cwd))
    })
diff --git a/packages/nyxb/src/commands/init.ts b/packages/nyxb/src/commands/init.ts
index 066422c1..15b68723 100644
--- a/packages/nyxb/src/commands/init.ts
+++ b/packages/nyxb/src/commands/init.ts
@@ -1,12 +1,13 @@
-import { promises as fs } from 'fs'
-import path from 'path'
-import { Command } from 'commander'
-import prompts from 'prompts'
-import { z } from 'zod'
-import { preFlightInit } from '~/src/preflights/preflight-init'
-import { addComponents } from '~/src/utils/add-components'
-import { createProject } from '~/src/utils/create-project'
-import * as ERRORS from '~/src/utils/errors'
+import { promises as fs } from "fs"
+import path from "path"
+import { Command } from "commander"
+import prompts from "prompts"
+import { z } from "zod"
+import { preFlightInit } from "~/src/preflights/preflight-init"
+import { getRegistryBaseColors, getRegistryStyles } from "~/src/registry/api"
+import { addComponents } from "~/src/utils/add-components"
+import { createProject } from "~/src/utils/create-project"
+import * as ERRORS from "~/src/utils/errors"
 import {
    type Config,
    DEFAULT_COMPONENTS,
@@ -16,14 +17,13 @@ import {
    getConfig,
    rawConfigSchema,
    resolveConfigPaths,
-} from '~/src/utils/get-config'
-import { getProjectConfig, getProjectInfo } from '~/src/utils/get-project-info'
-import { handleError } from '~/src/utils/handle-error'
-import { highlighter } from '~/src/utils/highlighter'
-import { logger } from '~/src/utils/logger'
-import { getRegistryBaseColors, getRegistryStyles } from '~/src/utils/registry'
-import { spinner } from '~/src/utils/spinner'
-import { updateTailwindContent } from '~/src/utils/updaters/update-tailwind-content'
+} from "~/src/utils/get-config"
+import { getProjectConfig, getProjectInfo } from "~/src/utils/get-project-info"
+import { handleError } from "~/src/utils/handle-error"
+import { highlighter } from "~/src/utils/highlighter"
+import { logger } from "~/src/utils/logger"
+import { spinner } from "~/src/utils/spinner"
+import { updateTailwindContent } from "~/src/utils/updaters/update-tailwind-content"
 
 export const initOptionsSchema = z.object({
    cwd: z.string(),
@@ -37,24 +37,24 @@ export const initOptionsSchema = z.object({
 })
 
 export const init = new Command()
-   .name('init')
-   .description('initialize your project and install dependencies')
+   .name("init")
+   .description("initialize your project and install dependencies")
    .argument(
-      '[components...]',
-      'the components to add or a url to the component.',
+      "[components...]",
+      "the components to add or a url to the component.",
    )
-   .option('-y, --yes', 'skip confirmation prompt.', true)
-   .option('-d, --defaults,', 'use default configuration.', false)
-   .option('-f, --force', 'force overwrite of existing configuration.', false)
+   .option("-y, --yes", "skip confirmation prompt.", true)
+   .option("-d, --defaults,", "use default configuration.", false)
+   .option("-f, --force", "force overwrite of existing configuration.", false)
    .option(
-      '-c, --cwd <cwd>',
-      'the working directory. defaults to the current directory.',
+      "-c, --cwd <cwd>",
+      "the working directory. defaults to the current directory.",
       process.cwd(),
    )
-   .option('-s, --silent', 'mute output.', false)
+   .option("-s, --silent", "mute output.", false)
    .option(
-      '--src-dir',
-      'use the src directory when creating a new project.',
+      "--src-dir",
+      "use the src directory when creating a new project.",
       false,
    )
    .action(async (components, opts) => {
@@ -69,13 +69,12 @@ export const init = new Command()
          await runInit(options)
 
          logger.log(
-        `${highlighter.success(
-          'Success!',
-        )} Project initialization completed.\nYou may now add components.`,
+            `${highlighter.success(
+               "Success!",
+            )} Project initialization completed.\nYou may now add components.`,
          )
          logger.break()
-      }
-      catch (error) {
+      } catch (error) {
          logger.break()
          handleError(error)
       }
@@ -87,22 +86,28 @@ export async function runInit(
    },
 ) {
    let projectInfo
+   let newProjectType
    if (!options.skipPreflight) {
       const preflight = await preFlightInit(options)
       if (preflight.errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
-         const { projectPath } = await createProject(options)
+         const { projectPath, projectType } = await createProject(options)
          if (!projectPath) {
             process.exit(1)
          }
          options.cwd = projectPath
          options.isNewProject = true
+         newProjectType = projectType
       }
       projectInfo = preflight.projectInfo
-   }
-   else {
+   } else {
       projectInfo = await getProjectInfo(options.cwd)
    }
 
+   if (newProjectType === "monorepo") {
+      options.cwd = path.resolve(options.cwd, "apps/web")
+      return await getConfig(options.cwd)
+   }
+
    const projectConfig = await getProjectConfig(options.cwd, projectInfo)
    const config = projectConfig
       ? await promptForMinimalConfig(projectConfig, options)
@@ -110,11 +115,11 @@ export async function runInit(
 
    if (!options.yes) {
       const { proceed } = await prompts({
-         type: 'confirm',
-         name: 'proceed',
+         type: "confirm",
+         name: "proceed",
          message: `Write configuration to ${highlighter.info(
-        'nyxbui.json',
-      )}. Proceed?`,
+            "nyxbui.json",
+         )}. Proceed?`,
          initial: true,
       })
 
@@ -125,26 +130,26 @@ export async function runInit(
 
    // Write nyxbui.json.
    const componentSpinner = spinner(`Writing nyxbui.json.`).start()
-   const targetPath = path.resolve(options.cwd, 'nyxbui.json')
-   await fs.writeFile(targetPath, JSON.stringify(config, null, 2), 'utf8')
+   const targetPath = path.resolve(options.cwd, "nyxbui.json")
+   await fs.writeFile(targetPath, JSON.stringify(config, null, 2), "utf8")
    componentSpinner.succeed()
 
    // Add components.
    const fullConfig = await resolveConfigPaths(options.cwd, config)
-   const components = ['index', ...(options.components || [])]
+   const components = ["index", ...(options.components || [])]
    await addComponents(components, fullConfig, {
       // Init will always overwrite files.
       overwrite: true,
       silent: options.silent,
       isNewProject:
-      options.isNewProject || projectInfo?.framework.name === 'next-app',
+         options.isNewProject || projectInfo?.framework.name === "next-app",
    })
 
    // If a new project is using src dir, let's update the tailwind content config.
    // TODO: Handle this per framework.
    if (options.isNewProject && options.srcDir) {
       await updateTailwindContent(
-         ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+         ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
          fullConfig,
          {
             silent: options.silent,
@@ -161,96 +166,96 @@ async function promptForConfig(defaultConfig: Config | null = null) {
       getRegistryBaseColors(),
    ])
 
-   logger.info('')
+   logger.info("")
    const options = await prompts([
       {
-         type: 'toggle',
-         name: 'typescript',
+         type: "toggle",
+         name: "typescript",
          message: `Would you like to use ${highlighter.info(
-        'TypeScript',
-      )} (recommended)?`,
+            "TypeScript",
+         )} (recommended)?`,
          initial: defaultConfig?.tsx ?? true,
-         active: 'yes',
-         inactive: 'no',
+         active: "yes",
+         inactive: "no",
       },
       {
-         type: 'select',
-         name: 'style',
-         message: `Which ${highlighter.info('style')} would you like to use?`,
-         choices: styles.map(style => ({
+         type: "select",
+         name: "style",
+         message: `Which ${highlighter.info("style")} would you like to use?`,
+         choices: styles.map((style) => ({
             title: style.label,
             value: style.name,
          })),
       },
       {
-         type: 'select',
-         name: 'tailwindBaseColor',
+         type: "select",
+         name: "tailwindBaseColor",
          message: `Which color would you like to use as the ${highlighter.info(
-        'base color',
-      )}?`,
-         choices: baseColors.map(color => ({
+            "base color",
+         )}?`,
+         choices: baseColors.map((color) => ({
             title: color.label,
             value: color.name,
          })),
       },
       {
-         type: 'text',
-         name: 'tailwindCss',
-         message: `Where is your ${highlighter.info('global CSS')} file?`,
+         type: "text",
+         name: "tailwindCss",
+         message: `Where is your ${highlighter.info("global CSS")} file?`,
          initial: defaultConfig?.tailwind.css ?? DEFAULT_TAILWIND_CSS,
       },
       {
-         type: 'toggle',
-         name: 'tailwindCssVariables',
+         type: "toggle",
+         name: "tailwindCssVariables",
          message: `Would you like to use ${highlighter.info(
-        'CSS variables',
-      )} for theming?`,
+            "CSS variables",
+         )} for theming?`,
          initial: defaultConfig?.tailwind.cssVariables ?? true,
-         active: 'yes',
-         inactive: 'no',
+         active: "yes",
+         inactive: "no",
       },
       {
-         type: 'text',
-         name: 'tailwindPrefix',
+         type: "text",
+         name: "tailwindPrefix",
          message: `Are you using a custom ${highlighter.info(
-        'tailwind prefix eg. tw-',
-      )}? (Leave blank if not)`,
-         initial: '',
+            "tailwind prefix eg. tw-",
+         )}? (Leave blank if not)`,
+         initial: "",
       },
       {
-         type: 'text',
-         name: 'tailwindConfig',
+         type: "text",
+         name: "tailwindConfig",
          message: `Where is your ${highlighter.info(
-        'tailwind.config.js',
-      )} located?`,
+            "tailwind.config.js",
+         )} located?`,
          initial: defaultConfig?.tailwind.config ?? DEFAULT_TAILWIND_CONFIG,
       },
       {
-         type: 'text',
-         name: 'components',
+         type: "text",
+         name: "components",
          message: `Configure the import alias for ${highlighter.info(
-        'components',
-      )}:`,
-         initial: defaultConfig?.aliases.components ?? DEFAULT_COMPONENTS,
+            "components",
+         )}:`,
+         initial: defaultConfig?.aliases["components"] ?? DEFAULT_COMPONENTS,
       },
       {
-         type: 'text',
-         name: 'utils',
-         message: `Configure the import alias for ${highlighter.info('utils')}:`,
-         initial: defaultConfig?.aliases.utils ?? DEFAULT_UTILS,
+         type: "text",
+         name: "utils",
+         message: `Configure the import alias for ${highlighter.info("utils")}:`,
+         initial: defaultConfig?.aliases["utils"] ?? DEFAULT_UTILS,
       },
       {
-         type: 'toggle',
-         name: 'rsc',
-         message: `Are you using ${highlighter.info('React Server Components')}?`,
+         type: "toggle",
+         name: "rsc",
+         message: `Are you using ${highlighter.info("React Server Components")}?`,
          initial: defaultConfig?.rsc ?? true,
-         active: 'yes',
-         inactive: 'no',
+         active: "yes",
+         inactive: "no",
       },
    ])
 
    return rawConfigSchema.parse({
-      $schema: 'https://nyxbui.design/schema.json',
+      $schema: "https://nyxbui.design/schema.json",
       style: options.style,
       tailwind: {
          config: options.tailwindConfig,
@@ -265,8 +270,8 @@ async function promptForConfig(defaultConfig: Config | null = null) {
          utils: options.utils,
          components: options.components,
          // TODO: fix this.
-         lib: options.components.replace(/\/components$/, 'lib'),
-         hooks: options.components.replace(/\/components$/, 'hooks'),
+         lib: options.components.replace(/\/components$/, "lib"),
+         hooks: options.components.replace(/\/components$/, "hooks"),
       },
    })
 }
@@ -287,35 +292,35 @@ async function promptForMinimalConfig(
 
       const options = await prompts([
          {
-            type: 'select',
-            name: 'style',
-            message: `Which ${highlighter.info('style')} would you like to use?`,
-            choices: styles.map(style => ({
+            type: "select",
+            name: "style",
+            message: `Which ${highlighter.info("style")} would you like to use?`,
+            choices: styles.map((style) => ({
                title: style.label,
                value: style.name,
             })),
-            initial: styles.findIndex(s => s.name === style),
+            initial: styles.findIndex((s) => s.name === style),
          },
          {
-            type: 'select',
-            name: 'tailwindBaseColor',
+            type: "select",
+            name: "tailwindBaseColor",
             message: `Which color would you like to use as the ${highlighter.info(
-          'base color',
-        )}?`,
-            choices: baseColors.map(color => ({
+               "base color",
+            )}?`,
+            choices: baseColors.map((color) => ({
                title: color.label,
                value: color.name,
             })),
          },
          {
-            type: 'toggle',
-            name: 'tailwindCssVariables',
+            type: "toggle",
+            name: "tailwindCssVariables",
             message: `Would you like to use ${highlighter.info(
-          'CSS variables',
-        )} for theming?`,
+               "CSS variables",
+            )} for theming?`,
             initial: defaultConfig?.tailwind.cssVariables,
-            active: 'yes',
-            inactive: 'no',
+            active: "yes",
+            inactive: "no",
          },
       ])
 
diff --git a/packages/nyxb/src/commands/migrate.ts b/packages/nyxb/src/commands/migrate.ts
index ea89f984..cb9b2d84 100644
--- a/packages/nyxb/src/commands/migrate.ts
+++ b/packages/nyxb/src/commands/migrate.ts
@@ -1,16 +1,16 @@
-import path from 'path'
-import { Command } from 'commander'
-import { z } from 'zod'
-import { migrateIcons } from '~/src/migrations/migrate-icons'
-import { preFlightMigrate } from '~/src/preflights/preflight-migrate'
-import * as ERRORS from '~/src/utils/errors'
-import { handleError } from '~/src/utils/handle-error'
-import { logger } from '~/src/utils/logger'
+import path from "path"
+import { Command } from "commander"
+import { z } from "zod"
+import { migrateIcons } from "~/src/migrations/migrate-icons"
+import { preFlightMigrate } from "~/src/preflights/preflight-migrate"
+import * as ERRORS from "~/src/utils/errors"
+import { handleError } from "~/src/utils/handle-error"
+import { logger } from "~/src/utils/logger"
 
 export const migrations = [
    {
-      name: 'icons',
-      description: 'migrate your ui components to a different icon library.',
+      name: "icons",
+      description: "migrate your ui components to a different icon library.",
    },
 ] as const
 
@@ -20,26 +20,26 @@ export const migrateOptionsSchema = z.object({
    migration: z
       .string()
       .refine(
-         value =>
-            value && migrations.some(migration => migration.name === value),
+         (value) =>
+            value && migrations.some((migration) => migration.name === value),
          {
             message:
-               'You must specify a valid migration. Run `nyxb migrate --list` to see available migrations.',
+               "You must specify a valid migration. Run `nyxb migrate --list` to see available migrations.",
          },
       )
       .optional(),
 })
 
 export const migrate = new Command()
-   .name('migrate')
-   .description('run a migration.')
-   .argument('[migration]', 'the migration to run.')
+   .name("migrate")
+   .description("run a migration.")
+   .argument("[migration]", "the migration to run.")
    .option(
-      '-c, --cwd <cwd>',
-      'the working directory. defaults to the current directory.',
+      "-c, --cwd <cwd>",
+      "the working directory. defaults to the current directory.",
       process.cwd(),
    )
-   .option('-l, --list', 'list all migrations.', false)
+   .option("-l, --list", "list all migrations.", false)
    .action(async (migration, opts) => {
       try {
          const options = migrateOptionsSchema.parse({
@@ -49,7 +49,7 @@ export const migrate = new Command()
          })
 
          if (options.list || !options.migration) {
-            logger.info('Available migrations:')
+            logger.info("Available migrations:")
             for (const migration of migrations) {
                logger.info(`- ${migration.name}: ${migration.description}`)
             }
@@ -58,32 +58,31 @@ export const migrate = new Command()
 
          if (!options.migration) {
             throw new Error(
-               'You must specify a migration. Run `nyxb migrate --list` to see available migrations.',
+               "You must specify a migration. Run `nyxb migrate --list` to see available migrations.",
             )
          }
 
          const { errors, config } = await preFlightMigrate(options)
 
          if (
-            errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]
-            || errors[ERRORS.MISSING_CONFIG]
+            errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] ||
+            errors[ERRORS.MISSING_CONFIG]
          ) {
             throw new Error(
-               'No `nyxbui.json` file found. Ensure you are at the root of your project.',
+               "No `components.json` file found. Ensure you are at the root of your project.",
             )
          }
 
          if (!config) {
             throw new Error(
-               'Something went wrong reading your `nyxbui.json` file. Please ensure you have a valid `nyxbui.json` file.',
+               "Something went wrong reading your `components.json` file. Please ensure you have a valid `components.json` file.",
             )
          }
 
-         if (options.migration === 'icons') {
+         if (options.migration === "icons") {
             await migrateIcons(config)
          }
-      }
-      catch (error) {
+      } catch (error) {
          logger.break()
          handleError(error)
       }
diff --git a/packages/nyxb/src/commands/template.ts b/packages/nyxb/src/commands/template.ts
index 9f7170de..62dea176 100755
--- a/packages/nyxb/src/commands/template.ts
+++ b/packages/nyxb/src/commands/template.ts
@@ -1,13 +1,12 @@
-import { writeFile } from 'node:fs/promises'
-import { downloadTemplate } from 'giget'
-import type { DownloadTemplateResult } from 'giget'
-import { relative, resolve } from 'pathe'
-import { Command } from 'commander'
-import { execaCommand } from 'execa'
-import { installDependencies } from 'nypm'
-import type { PackageManagerName } from 'nypm'
-import prompts from 'prompts'
-import { logger } from '~/src/utils/logger'
+import { writeFile } from "node:fs/promises"
+import { Command } from "commander"
+import { execaCommand } from "execa"
+import { downloadTemplate } from "giget"
+import type { DownloadTemplateResult } from "giget"
+import type { PackageManagerName } from "nypm"
+import { relative, resolve } from "pathe"
+import prompts from "prompts"
+import { logger } from "~/src/utils/logger"
 
 interface Options {
    force?: boolean
@@ -18,35 +17,39 @@ interface Options {
    gitInit?: boolean
 }
 
-const DEFAULT_REGISTRY = 'https://raw.githubusercontent.com/nyxb-ui/templates/templates/templates'
+const DEFAULT_REGISTRY =
+   "https://raw.githubusercontent.com/nyxb-ui/templates/templates/templates"
 const TEMPLATES = [
-   { name: 'portfolio', source: 'portfolio' },
-   { name: 'startup', source: 'startup' },
-   { name: 'saas', source: 'saas' },
+   { name: "portfolio", source: "portfolio" },
+   { name: "startup", source: "startup" },
+   { name: "saas", source: "saas" },
 ]
 
 export const template = new Command()
-   .name('template')
-   .description('Initialize a fresh project')
-   .option('--install', 'Install dependencies after setup')
-   .option('--git-init', 'Initialize a git repository')
+   .name("template")
+   .description("Initialize a fresh project")
+   .option("--install", "Install dependencies after setup")
+   .option("--git-init", "Initialize a git repository")
    .action(async (opts: Options) => {
-      const cwd = resolve(opts.cwd || '.')
+      const cwd = resolve(opts.cwd || ".")
 
       // Select template
       const { templateName } = await prompts({
-         type: 'select',
-         name: 'templateName',
-         message: 'Which template would you like to use?',
-         choices: TEMPLATES.map(template => ({ title: template.name, value: template.source })),
+         type: "select",
+         name: "templateName",
+         message: "Which template would you like to use?",
+         choices: TEMPLATES.map((template) => ({
+            title: template.name,
+            value: template.source,
+         })),
       })
 
       // Prompt for project directory
       const { projectDir } = await prompts({
-         type: 'text',
-         name: 'projectDir',
-         message: 'What is the name of your project directory?',
-         initial: 'my-app',
+         type: "text",
+         name: "projectDir",
+         message: "What is the name of your project directory?",
+         initial: "my-app",
       })
 
       // Download template
@@ -60,70 +63,84 @@ export const template = new Command()
             preferOffline: Boolean(opts.preferOffline),
             registry: DEFAULT_REGISTRY,
          })
-      }
-      catch (error) {
+      } catch (error) {
          logger.error((error as Error).toString())
          process.exit(1)
       }
 
       // Resolve package manager
-      const packageManagerOptions: PackageManagerName[] = ['npm', 'pnpm', 'yarn', 'bun']
+      const packageManagerOptions: PackageManagerName[] = [
+         "npm",
+         "pnpm",
+         "yarn",
+         "bun",
+      ]
       const { packageManager } = await prompts({
-         type: 'select',
-         name: 'packageManager',
-         message: 'Which package manager would you like to use?',
-         choices: packageManagerOptions.map(pm => ({ title: pm, value: pm })),
+         type: "select",
+         name: "packageManager",
+         message: "Which package manager would you like to use?",
+         choices: packageManagerOptions.map((pm) => ({ title: pm, value: pm })),
       })
 
       // Get relative project path
       const relativeProjectPath = relative(process.cwd(), template.dir)
 
       // Write .npmrc with `shamefully-hoist=true` for pnpm
-      if (packageManager === 'pnpm')
-         await writeFile(`${relativeProjectPath}/.npmrc`, 'shamefully-hoist=true')
+      if (packageManager === "pnpm")
+         await writeFile(
+            `${relativeProjectPath}/.npmrc`,
+            "shamefully-hoist=true",
+         )
 
       // Install project dependencies
       if (opts.install) {
-         logger.info('Installing dependencies...')
+         logger.info("Installing dependencies...")
          try {
-            const installCommand = packageManager === 'npm' ? 'npm install' : `${packageManager} install`
+            const installCommand =
+               packageManager === "npm"
+                  ? "npm install"
+                  : `${packageManager} install`
             await execaCommand(installCommand, {
                cwd: template.dir,
-               stdio: 'inherit',
+               stdio: "inherit",
             })
-            logger.info('Installation completed.')
-         }
-         catch (error) {
-            logger.error(`Failed to install dependencies: ${(error as Error).message}`)
+            logger.info("Installation completed.")
+         } catch (error) {
+            logger.error(
+               `Failed to install dependencies: ${(error as Error).message}`,
+            )
             process.exit(1)
          }
       }
 
       // Initialize git repository if selected
       if (opts.gitInit) {
-         logger.info('Initializing git repository...')
+         logger.info("Initializing git repository...")
          try {
-            await execaCommand(`
+            await execaCommand(
+               `
                git init --quiet ${template.dir} &&
                git --git-dir=${template.dir}/.git --work-tree=${template.dir} add . &&
                git --git-dir=${template.dir}/.git --work-tree=${template.dir} commit --quiet -m "🔰 This is where it all begins..."
-            `, {
-               stdio: 'inherit',
-               shell: true,
-            })
-         }
-         catch (error) {
+            `,
+               {
+                  stdio: "inherit",
+                  shell: true,
+               },
+            )
+         } catch (error) {
             logger.warn(`Failed to initialize git repository: ${error}`)
          }
       }
 
       // Display next steps
-      logger.info(`\n✨ Nyxb project has been created with the \`${templateName}\` template. Next steps:`)
+      logger.info(
+         `\n✨ Nyxb project has been created with the \`${templateName}\` template. Next steps:`,
+      )
       const nextSteps = [
          `cd ${relativeProjectPath}`,
          `Start development server with \`${packageManager} run dev\``,
       ]
 
-      for (const step of nextSteps)
-         logger.info(` › ${step}`)
+      for (const step of nextSteps) logger.info(` › ${step}`)
    })
diff --git a/packages/nyxb/src/index.ts b/packages/nyxb/src/index.ts
index ddb9ccd2..892db282 100644
--- a/packages/nyxb/src/index.ts
+++ b/packages/nyxb/src/index.ts
@@ -1,24 +1,25 @@
 #!/usr/bin/env node
-import { Command } from 'commander'
-import packageJson from '../package.json'
-import { add } from '~/src/commands/add'
-import { diff } from '~/src/commands/diff'
-import { info } from '~/src/commands/info'
-import { init } from '~/src/commands/init'
-import { template } from '~/src/commands/template'
-import { migrate } from '~/src/commands/migrate'
+import { Command } from "commander"
+import { add } from "~/src/commands/add"
+import { build } from "~/src/commands/build"
+import { diff } from "~/src/commands/diff"
+import { info } from "~/src/commands/info"
+import { init } from "~/src/commands/init"
+import { migrate } from "~/src/commands/migrate"
+import { template } from "~/src/commands/template"
+import packageJson from "../package.json"
 
-process.on('SIGINT', () => process.exit(0))
-process.on('SIGTERM', () => process.exit(0))
+process.on("SIGINT", () => process.exit(0))
+process.on("SIGTERM", () => process.exit(0))
 
 async function main() {
    const program = new Command()
-      .name('nyxb')
-      .description('add components and dependencies to your project')
+      .name("nyxb")
+      .description("add components and dependencies to your project")
       .version(
-         packageJson.version || '1.0.0',
-         '-v, --version',
-         'display the version number',
+         packageJson.version || "1.0.0",
+         "-v, --version",
+         "display the version number",
       )
 
    program
@@ -28,8 +29,11 @@ async function main() {
       .addCommand(migrate)
       .addCommand(template)
       .addCommand(info)
+      .addCommand(build)
 
    program.parse()
 }
 
 main()
+
+export * from "./registry/api"
diff --git a/packages/nyxb/src/migrations/migrate-icons.test.ts b/packages/nyxb/src/migrations/migrate-icons.test.ts
index c67270f5..c17c7088 100644
--- a/packages/nyxb/src/migrations/migrate-icons.test.ts
+++ b/packages/nyxb/src/migrations/migrate-icons.test.ts
@@ -1,9 +1,9 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from "vitest"
 
-import { migrateIconsFile } from './migrate-icons'
+import { migrateIconsFile } from "./migrate-icons"
 
-describe('migrateIconsFile', () => {
-   it('should replace radix icons with lucide icons', async () => {
+describe("migrateIconsFile", () => {
+   it("should replace radix icons with lucide icons", async () => {
       const input = `
       import { CheckIcon, CloseIcon } from "@radix-ui/react-icons"
       import { Something } from "other-package"
@@ -18,14 +18,14 @@ describe('migrateIconsFile', () => {
       }`
 
       expect(
-         await migrateIconsFile(input, 'radix', 'lucide', {
+         await migrateIconsFile(input, "radix", "lucide", {
             Check: {
-               lucide: 'Check',
-               radix: 'CheckIcon',
+               lucide: "Check",
+               radix: "CheckIcon",
             },
             X: {
-               lucide: 'X',
-               radix: 'CloseIcon',
+               lucide: "X",
+               radix: "CloseIcon",
             },
          }),
       ).toMatchInlineSnapshot(`
@@ -43,7 +43,7 @@ describe('migrateIconsFile', () => {
     `)
    })
 
-   it('should return null if no radix icons are found', async () => {
+   it("should return null if no radix icons are found", async () => {
       const input = `
       import { Something } from "other-package"
 
@@ -51,8 +51,9 @@ describe('migrateIconsFile', () => {
         return <div>No icons here</div>
       }`
 
-      expect(await migrateIconsFile(input, 'lucide', 'radix', {}))
-         .toMatchInlineSnapshot(`
+      expect(
+         await migrateIconsFile(input, "lucide", "radix", {}),
+      ).toMatchInlineSnapshot(`
       "import { Something } from "other-package"
 
             export function Component() {
@@ -61,7 +62,7 @@ describe('migrateIconsFile', () => {
     `)
    })
 
-   it('should handle mixed icon imports from different packages', async () => {
+   it("should handle mixed icon imports from different packages", async () => {
       const input = `
       import { CheckIcon } from "@radix-ui/react-icons"
       import { AlertCircle } from "lucide-react"
@@ -79,14 +80,14 @@ describe('migrateIconsFile', () => {
       }`
 
       expect(
-         await migrateIconsFile(input, 'radix', 'lucide', {
+         await migrateIconsFile(input, "radix", "lucide", {
             Check: {
-               lucide: 'Check',
-               radix: 'CheckIcon',
+               lucide: "Check",
+               radix: "CheckIcon",
             },
             X: {
-               lucide: 'X',
-               radix: 'Cross2Icon',
+               lucide: "X",
+               radix: "Cross2Icon",
             },
          }),
       ).toMatchInlineSnapshot(`
@@ -106,7 +107,7 @@ describe('migrateIconsFile', () => {
     `)
    })
 
-   it('should preserve all props and children on icons', async () => {
+   it("should preserve all props and children on icons", async () => {
       const input = `
       import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons"
 
@@ -126,14 +127,14 @@ describe('migrateIconsFile', () => {
       }`
 
       expect(
-         await migrateIconsFile(input, 'radix', 'lucide', {
+         await migrateIconsFile(input, "radix", "lucide", {
             Check: {
-               lucide: 'Check',
-               radix: 'CheckIcon',
+               lucide: "Check",
+               radix: "CheckIcon",
             },
             X: {
-               lucide: 'X',
-               radix: 'Cross2Icon',
+               lucide: "X",
+               radix: "Cross2Icon",
             },
          }),
       ).toMatchInlineSnapshot(`
diff --git a/packages/nyxb/src/migrations/migrate-icons.ts b/packages/nyxb/src/migrations/migrate-icons.ts
index 8804c94d..3b045d22 100644
--- a/packages/nyxb/src/migrations/migrate-icons.ts
+++ b/packages/nyxb/src/migrations/migrate-icons.ts
@@ -1,37 +1,37 @@
-import { randomBytes } from 'crypto'
-import { promises as fs } from 'fs'
-import { tmpdir } from 'os'
-import path from 'path'
-import fg from 'fast-glob'
-import prompts from 'prompts'
-import { Project, ScriptKind, SyntaxKind } from 'ts-morph'
-import type { z } from 'zod'
-import type { Config } from '~/src/utils/get-config'
-import { highlighter } from '~/src/utils/highlighter'
-import { ICON_LIBRARIES } from '~/src/utils/icon-libraries'
-import { logger } from '~/src/utils/logger'
-import { getRegistryIcons } from '~/src/utils/registry'
-import type { iconsSchema } from '~/src/utils/registry/schema'
-import { spinner } from '~/src/utils/spinner'
-import { updateDependencies } from '~/src/utils/updaters/update-dependencies'
+import { randomBytes } from "crypto"
+import { promises as fs } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import fg from "fast-glob"
+import prompts from "prompts"
+import { Project, ScriptKind, SyntaxKind } from "ts-morph"
+import type { z } from "zod"
+import { getRegistryIcons } from "~/src/registry/api"
+import type { iconsSchema } from "~/src/registry/schema"
+import type { Config } from "~/src/utils/get-config"
+import { highlighter } from "~/src/utils/highlighter"
+import { ICON_LIBRARIES } from "~/src/utils/icon-libraries"
+import { logger } from "~/src/utils/logger"
+import { spinner } from "~/src/utils/spinner"
+import { updateDependencies } from "~/src/utils/updaters/update-dependencies"
 
 export async function migrateIcons(config: Config) {
    if (!config.resolvedPaths.ui) {
       throw new Error(
-         'We could not find a valid `ui` path in your `nyxbui.json` file. Please ensure you have a valid `ui` path in your `nyxbui.json` file.',
+         "We could not find a valid `ui` path in your `nyxbui.json` file. Please ensure you have a valid `ui` path in your `nyxbui.json` file.",
       )
    }
 
    const uiPath = config.resolvedPaths.ui
    const [files, registryIcons] = await Promise.all([
-      fg('**/*.{js,ts,jsx,tsx}', {
+      fg("**/*.{js,ts,jsx,tsx}", {
          cwd: uiPath,
       }),
       getRegistryIcons(),
    ])
 
    if (Object.keys(registryIcons).length === 0) {
-      throw new Error('Something went wrong fetching the registry icons.')
+      throw new Error("Something went wrong fetching the registry icons.")
    }
 
    const libraryChoices = Object.entries(ICON_LIBRARIES).map(
@@ -43,57 +43,63 @@ export async function migrateIcons(config: Config) {
 
    const migrateOptions = await prompts([
       {
-         type: 'select',
-         name: 'sourceLibrary',
+         type: "select",
+         name: "sourceLibrary",
          message: `Which icon library would you like to ${highlighter.info(
-        'migrate from',
-      )}?`,
+            "migrate from",
+         )}?`,
          choices: libraryChoices,
       },
       {
-         type: 'select',
-         name: 'targetLibrary',
+         type: "select",
+         name: "targetLibrary",
          message: `Which icon library would you like to ${highlighter.info(
-        'migrate to',
-      )}?`,
+            "migrate to",
+         )}?`,
          choices: libraryChoices,
       },
    ])
 
    if (migrateOptions.sourceLibrary === migrateOptions.targetLibrary) {
       throw new Error(
-         'You cannot migrate to the same icon library. Please choose a different icon library.',
+         "You cannot migrate to the same icon library. Please choose a different icon library.",
       )
    }
 
    if (
       !(
-         migrateOptions.sourceLibrary in ICON_LIBRARIES
-         && migrateOptions.targetLibrary in ICON_LIBRARIES
+         migrateOptions.sourceLibrary in ICON_LIBRARIES &&
+         migrateOptions.targetLibrary in ICON_LIBRARIES
       )
    ) {
-      throw new Error('Invalid icon library. Please choose a valid icon library.')
+      throw new Error(
+         "Invalid icon library. Please choose a valid icon library.",
+      )
    }
 
-   const sourceLibrary
-    = ICON_LIBRARIES[migrateOptions.sourceLibrary as keyof typeof ICON_LIBRARIES]
-   const targetLibrary
-    = ICON_LIBRARIES[migrateOptions.targetLibrary as keyof typeof ICON_LIBRARIES]
+   const sourceLibrary =
+      ICON_LIBRARIES[
+         migrateOptions.sourceLibrary as keyof typeof ICON_LIBRARIES
+      ]
+   const targetLibrary =
+      ICON_LIBRARIES[
+         migrateOptions.targetLibrary as keyof typeof ICON_LIBRARIES
+      ]
    const { confirm } = await prompts({
-      type: 'confirm',
-      name: 'confirm',
+      type: "confirm",
+      name: "confirm",
       initial: true,
       message: `We will migrate ${highlighter.info(
-      files.length,
-    )} files in ${highlighter.info(
-      `./${path.relative(config.resolvedPaths.cwd, uiPath)}`,
-    )} from ${highlighter.info(sourceLibrary.name)} to ${highlighter.info(
-      targetLibrary.name,
-    )}. Continue?`,
+         files.length,
+      )} files in ${highlighter.info(
+         `./${path.relative(config.resolvedPaths.cwd, uiPath)}`,
+      )} from ${highlighter.info(sourceLibrary.name)} to ${highlighter.info(
+         targetLibrary.name,
+      )}. Continue?`,
    })
 
    if (!confirm) {
-      logger.info('Migration cancelled.')
+      logger.info("Migration cancelled.")
       process.exit(0)
    }
 
@@ -110,7 +116,7 @@ export async function migrateIcons(config: Config) {
          migrationSpinner.text = `Migrating ${file}...`
 
          const filePath = path.join(uiPath, file)
-         const fileContent = await fs.readFile(filePath, 'utf-8')
+         const fileContent = await fs.readFile(filePath, "utf-8")
 
          const content = await migrateIconsFile(
             fileContent,
@@ -123,7 +129,7 @@ export async function migrateIcons(config: Config) {
       }),
    )
 
-   migrationSpinner.succeed('Migration complete.')
+   migrationSpinner.succeed("Migration complete.")
 }
 
 export async function migrateIconsFile(
@@ -135,14 +141,14 @@ export async function migrateIconsFile(
    const sourceLibraryImport = ICON_LIBRARIES[sourceLibrary]?.import
    const targetLibraryImport = ICON_LIBRARIES[targetLibrary]?.import
 
-   const dir = await fs.mkdtemp(path.join(tmpdir(), 'nyxb-'))
+   const dir = await fs.mkdtemp(path.join(tmpdir(), "nyxb-"))
    const project = new Project({
       compilerOptions: {},
    })
 
    const tempFile = path.join(
       dir,
-    `nyxb-icons-${randomBytes(4).toString('hex')}.tsx`,
+      `nyxb-icons-${randomBytes(4).toString("hex")}.tsx`,
    )
    const sourceFile = project.createSourceFile(tempFile, content, {
       scriptKind: ScriptKind.TSX,
@@ -152,8 +158,8 @@ export async function migrateIconsFile(
    const targetedIcons: string[] = []
    for (const importDeclaration of sourceFile.getImportDeclarations() ?? []) {
       if (
-         importDeclaration.getModuleSpecifier()?.getText()
-         !== `"${sourceLibraryImport}"`
+         importDeclaration.getModuleSpecifier()?.getText() !==
+         `"${sourceLibraryImport}"`
       ) {
          continue
       }
@@ -163,7 +169,7 @@ export async function migrateIconsFile(
 
          // TODO: this is O(n^2) but okay for now.
          const targetedIcon = Object.values(iconsMapping).find(
-            icon => icon[sourceLibrary] === iconName,
+            (icon) => icon[sourceLibrary] === iconName,
          )?.[targetLibrary]
 
          if (!targetedIcon || targetedIcons.includes(targetedIcon)) {
@@ -178,8 +184,10 @@ export async function migrateIconsFile(
          // Replace with the targeted icon.
          sourceFile
             .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
-            .filter(node => node.getTagNameNode()?.getText() === iconName)
-            .forEach(node => node.getTagNameNode()?.replaceWithText(targetedIcon))
+            .filter((node) => node.getTagNameNode()?.getText() === iconName)
+            .forEach((node) =>
+               node.getTagNameNode()?.replaceWithText(targetedIcon),
+            )
       }
 
       // If the named import is empty, remove the import declaration.
@@ -191,7 +199,7 @@ export async function migrateIconsFile(
    if (targetedIcons.length > 0) {
       sourceFile.addImportDeclaration({
          moduleSpecifier: targetLibraryImport,
-         namedImports: targetedIcons.map(icon => ({
+         namedImports: targetedIcons.map((icon) => ({
             name: icon,
          })),
       })
diff --git a/packages/nyxb/src/preflights/preflight-add.ts b/packages/nyxb/src/preflights/preflight-add.ts
index f2c0512d..c88a2e49 100644
--- a/packages/nyxb/src/preflights/preflight-add.ts
+++ b/packages/nyxb/src/preflights/preflight-add.ts
@@ -1,11 +1,11 @@
-import path from 'path'
-import fs from 'fs-extra'
-import type { z } from 'zod'
-import type { addOptionsSchema } from '~/src/commands/add'
-import * as ERRORS from '~/src/utils/errors'
-import { getConfig } from '~/src/utils/get-config'
-import { highlighter } from '~/src/utils/highlighter'
-import { logger } from '~/src/utils/logger'
+import path from "path"
+import fs from "fs-extra"
+import type { z } from "zod"
+import type { addOptionsSchema } from "~/src/commands/add"
+import * as ERRORS from "~/src/utils/errors"
+import { getConfig } from "~/src/utils/get-config"
+import { highlighter } from "~/src/utils/highlighter"
+import { logger } from "~/src/utils/logger"
 
 export async function preFlightAdd(options: z.infer<typeof addOptionsSchema>) {
    const errors: Record<string, boolean> = {}
@@ -13,8 +13,8 @@ export async function preFlightAdd(options: z.infer<typeof addOptionsSchema>) {
    // Ensure target directory exists.
    // Check for empty project. We assume if no package.json exists, the project is empty.
    if (
-      !fs.existsSync(options.cwd)
-      || !fs.existsSync(path.resolve(options.cwd, 'package.json'))
+      !fs.existsSync(options.cwd) ||
+      !fs.existsSync(path.resolve(options.cwd, "package.json"))
    ) {
       errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true
       return {
@@ -23,8 +23,8 @@ export async function preFlightAdd(options: z.infer<typeof addOptionsSchema>) {
       }
    }
 
-   // Check for existing nyxbui.json file.
-   if (!fs.existsSync(path.resolve(options.cwd, 'nyxbui.json'))) {
+   // Check for existing components.json file.
+   if (!fs.existsSync(path.resolve(options.cwd, "nyxbui.json"))) {
       errors[ERRORS.MISSING_CONFIG] = true
       return {
          errors,
@@ -39,21 +39,20 @@ export async function preFlightAdd(options: z.infer<typeof addOptionsSchema>) {
          errors,
          config: config!,
       }
-   }
-   catch (error) {
+   } catch (error) {
       logger.break()
       logger.error(
-      `An invalid ${highlighter.info(
-        'nyxbui.json',
-      )} file was found at ${highlighter.info(
-        options.cwd,
-      )}.\nBefore you can add components, you must create a valid ${highlighter.info(
-        'nyxbui.json',
-      )} file by running the ${highlighter.info('init')} command.`,
+         `An invalid ${highlighter.info(
+            "nyxbui.json",
+         )} file was found at ${highlighter.info(
+            options.cwd,
+         )}.\nBefore you can add components, you must create a valid ${highlighter.info(
+            "nyxbui.json",
+         )} file by running the ${highlighter.info("init")} command.`,
       )
       logger.error(
          `Learn more at ${highlighter.info(
-            'https://nyxbui.design/docs/nyxbui-json',
+            "https://nyxbui.design/docs/nyxbui-json",
          )}.`,
       )
       logger.break()
diff --git a/packages/nyxb/src/preflights/preflight-build.ts b/packages/nyxb/src/preflights/preflight-build.ts
new file mode 100644
index 00000000..b74a18eb
--- /dev/null
+++ b/packages/nyxb/src/preflights/preflight-build.ts
@@ -0,0 +1,46 @@
+import path from "path"
+import fs from "fs-extra"
+import type { z } from "zod"
+import type { buildOptionsSchema } from "~/src/commands/build"
+import * as ERRORS from "~/src/utils/errors"
+import { highlighter } from "~/src/utils/highlighter"
+import { logger } from "~/src/utils/logger"
+
+export async function preFlightBuild(
+   options: z.infer<typeof buildOptionsSchema>,
+) {
+   const errors: Record<string, boolean> = {}
+
+   const resolvePaths = {
+      cwd: options.cwd,
+      registryFile: path.resolve(options.cwd, options.registryFile),
+      outputDir: path.resolve(options.cwd, options.outputDir),
+   }
+
+   // Ensure registry file exists.
+   if (!fs.existsSync(resolvePaths.registryFile)) {
+      errors[ERRORS.BUILD_MISSING_REGISTRY_FILE] = true
+   }
+
+   // Create output directory if it doesn't exist.
+   await fs.mkdir(resolvePaths.outputDir, { recursive: true })
+
+   if (Object.keys(errors).length > 0) {
+      if (errors[ERRORS.BUILD_MISSING_REGISTRY_FILE]) {
+         logger.break()
+         logger.error(
+            `The path ${highlighter.info(
+               resolvePaths.registryFile,
+            )} does not exist.`,
+         )
+      }
+
+      logger.break()
+      process.exit(1)
+   }
+
+   return {
+      errors,
+      resolvePaths,
+   }
+}
diff --git a/packages/nyxb/src/preflights/preflight-migrate.ts b/packages/nyxb/src/preflights/preflight-migrate.ts
index 26f4cd19..b83459f3 100644
--- a/packages/nyxb/src/preflights/preflight-migrate.ts
+++ b/packages/nyxb/src/preflights/preflight-migrate.ts
@@ -1,11 +1,11 @@
-import path from 'path'
-import fs from 'fs-extra'
-import type { z } from 'zod'
-import type { migrateOptionsSchema } from '~/src/commands/migrate'
-import * as ERRORS from '~/src/utils/errors'
-import { getConfig } from '~/src/utils/get-config'
-import { highlighter } from '~/src/utils/highlighter'
-import { logger } from '~/src/utils/logger'
+import path from "path"
+import fs from "fs-extra"
+import type { z } from "zod"
+import type { migrateOptionsSchema } from "~/src/commands/migrate"
+import * as ERRORS from "~/src/utils/errors"
+import { getConfig } from "~/src/utils/get-config"
+import { highlighter } from "~/src/utils/highlighter"
+import { logger } from "~/src/utils/logger"
 
 export async function preFlightMigrate(
    options: z.infer<typeof migrateOptionsSchema>,
@@ -15,8 +15,8 @@ export async function preFlightMigrate(
    // Ensure target directory exists.
    // Check for empty project. We assume if no package.json exists, the project is empty.
    if (
-      !fs.existsSync(options.cwd)
-      || !fs.existsSync(path.resolve(options.cwd, 'package.json'))
+      !fs.existsSync(options.cwd) ||
+      !fs.existsSync(path.resolve(options.cwd, "package.json"))
    ) {
       errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true
       return {
@@ -25,8 +25,8 @@ export async function preFlightMigrate(
       }
    }
 
-   // Check for existing nyxbui.json file.
-   if (!fs.existsSync(path.resolve(options.cwd, 'nyxbui.json'))) {
+   // Check for existing components.json file.
+   if (!fs.existsSync(path.resolve(options.cwd, "nyxbui.json"))) {
       errors[ERRORS.MISSING_CONFIG] = true
       return {
          errors,
@@ -41,21 +41,20 @@ export async function preFlightMigrate(
          errors,
          config: config!,
       }
-   }
-   catch (error) {
+   } catch (error) {
       logger.break()
       logger.error(
-      `An invalid ${highlighter.info(
-        'nyxbui.json',
-      )} file was found at ${highlighter.info(
-        options.cwd,
-      )}.\nBefore you can run a migration, you must create a valid ${highlighter.info(
-        'nyxbui.json',
-      )} file by running the ${highlighter.info('init')} command.`,
+         `An invalid ${highlighter.info(
+            "nyxbui.json",
+         )} file was found at ${highlighter.info(
+            options.cwd,
+         )}.\nBefore you can run a migration, you must create a valid ${highlighter.info(
+            "nyxbui.json",
+         )} file by running the ${highlighter.info("init")} command.`,
       )
       logger.error(
-      `Learn more at ${highlighter.info(
-            'https://nyxbui.design/docs/nyxbui-json',
+         `Learn more at ${highlighter.info(
+            "https://nyxbui.design/docs/nyxbui-json",
          )}.`,
       )
       logger.break()
diff --git a/packages/nyxb/src/registry/api.ts b/packages/nyxb/src/registry/api.ts
new file mode 100644
index 00000000..4bdf5358
--- /dev/null
+++ b/packages/nyxb/src/registry/api.ts
@@ -0,0 +1,471 @@
+import path from 'path'
+import deepmerge from 'deepmerge'
+import { HttpsProxyAgent } from 'https-proxy-agent'
+import fetch from 'node-fetch'
+import { z } from 'zod'
+import {
+   iconsSchema,
+   registryBaseColorSchema,
+   registryIndexSchema,
+   registryItemFileSchema,
+   registryItemSchema,
+   registryResolvedItemsTreeSchema,
+   stylesSchema,
+} from './schema'
+import type { Config } from '~/src/utils/get-config'
+import { handleError } from '~/src/utils/handle-error'
+import { highlighter } from '~/src/utils/highlighter'
+import { logger } from '~/src/utils/logger'
+import { buildTailwindThemeColorsFromCssVars } from '~/src/utils/updaters/update-tailwind-config'
+
+const REGISTRY_URL = process.env.REGISTRY_URL ?? 'https://nyxbui.design/r'
+
+const agent = process.env.https_proxy
+   ? new HttpsProxyAgent(process.env.https_proxy)
+   : undefined
+
+export async function getRegistryIndex() {
+   try {
+      const [result] = await fetchRegistry(['index.json'])
+
+      return registryIndexSchema.parse(result)
+   }
+   catch (error) {
+      logger.error('\n')
+      handleError(error)
+   }
+}
+
+export async function getRegistryStyles() {
+   try {
+      const [result] = await fetchRegistry(['styles/index.json'])
+
+      return stylesSchema.parse(result)
+   }
+   catch (error) {
+      logger.error('\n')
+      handleError(error)
+      return []
+   }
+}
+
+export async function getRegistryIcons() {
+   try {
+      const [result] = await fetchRegistry(['icons/index.json'])
+      return iconsSchema.parse(result)
+   }
+   catch (error) {
+      handleError(error)
+      return {}
+   }
+}
+
+export async function getRegistryItem(name: string, style: string) {
+   try {
+      const [result] = await fetchRegistry([
+         isUrl(name) ? name : `styles/${style}/${name}.json`,
+      ])
+
+      return registryItemSchema.parse(result)
+   }
+   catch (error) {
+      logger.break()
+      handleError(error)
+      return null
+   }
+}
+
+export async function getRegistryBaseColors() {
+   return [
+      {
+         name: 'neutral',
+         label: 'Neutral',
+      },
+      {
+         name: 'gray',
+         label: 'Gray',
+      },
+      {
+         name: 'zinc',
+         label: 'Zinc',
+      },
+      {
+         name: 'stone',
+         label: 'Stone',
+      },
+      {
+         name: 'slate',
+         label: 'Slate',
+      },
+   ]
+}
+
+export async function getRegistryBaseColor(baseColor: string) {
+   try {
+      const [result] = await fetchRegistry([`colors/${baseColor}.json`])
+
+      return registryBaseColorSchema.parse(result)
+   }
+   catch (error) {
+      handleError(error)
+   }
+}
+
+export async function resolveTree(
+   index: z.infer<typeof registryIndexSchema>,
+   names: string[],
+) {
+   const tree: z.infer<typeof registryIndexSchema> = []
+
+   for (const name of names) {
+      const entry = index.find(entry => entry.name === name)
+
+      if (!entry) {
+         continue
+      }
+
+      tree.push(entry)
+
+      if (entry.registryDependencies) {
+         const dependencies = await resolveTree(index, entry.registryDependencies)
+         tree.push(...dependencies)
+      }
+   }
+
+   return tree.filter(
+      (component, index, self) =>
+         self.findIndex(c => c.name === component.name) === index,
+   )
+}
+
+export async function fetchTree(
+   style: string,
+   tree: z.infer<typeof registryIndexSchema>,
+) {
+   try {
+      const paths = tree.map(item => `styles/${style}/${item.name}.json`)
+      const result = await fetchRegistry(paths)
+      return registryIndexSchema.parse(result)
+   }
+   catch (error) {
+      handleError(error)
+   }
+}
+
+export async function getItemTargetPath(
+   config: Config,
+   item: Pick<z.infer<typeof registryItemSchema>, 'type'>,
+   override?: string,
+) {
+   if (override) {
+      return override
+   }
+
+   if (item.type === 'registry:ui') {
+      return config.resolvedPaths.ui ?? config.resolvedPaths.components
+   }
+
+   const [parent, type] = item.type?.split(':') ?? []
+   if (!(parent in config.resolvedPaths)) {
+      return null
+   }
+
+   return path.join(
+      config.resolvedPaths[parent as keyof typeof config.resolvedPaths],
+      type,
+   )
+}
+
+export async function fetchRegistry(paths: string[]) {
+   try {
+      const results = await Promise.all(
+         paths.map(async (path) => {
+            const url = getRegistryUrl(path)
+            const response = await fetch(url, { agent })
+
+            if (!response.ok) {
+               const errorMessages: { [key: number]: string } = {
+                  400: 'Bad request',
+                  401: 'Unauthorized',
+                  403: 'Forbidden',
+                  404: 'Not found',
+                  500: 'Internal server error',
+               }
+
+               if (response.status === 401) {
+                  throw new Error(
+              `You are not authorized to access the component at ${highlighter.info(
+                url,
+              )}.\nIf this is a remote registry, you may need to authenticate.`,
+                  )
+               }
+
+               if (response.status === 404) {
+                  throw new Error(
+              `The component at ${highlighter.info(
+                url,
+              )} was not found.\nIt may not exist at the registry. Please make sure it is a valid component.`,
+                  )
+               }
+
+               if (response.status === 403) {
+                  throw new Error(
+              `You do not have access to the component at ${highlighter.info(
+                url,
+              )}.\nIf this is a remote registry, you may need to authenticate or a token.`,
+                  )
+               }
+
+               const result = await response.json()
+               const message
+            = result && typeof result === 'object' && 'error' in result
+               ? result.error
+               : response.statusText || errorMessages[response.status]
+               throw new Error(
+            `Failed to fetch from ${highlighter.info(url)}.\n${message}`,
+               )
+            }
+
+            return response.json()
+         }),
+      )
+
+      return results
+   }
+   catch (error) {
+      logger.error('\n')
+      handleError(error)
+      return []
+   }
+}
+
+export async function registryResolveItemsTree(
+   names: z.infer<typeof registryItemSchema>['name'][],
+   config: Config,
+) {
+   try {
+      const index = await getRegistryIndex()
+      if (!index) {
+         return null
+      }
+
+      // If we're resolving the index, we want it to go first.
+      if (names.includes('index')) {
+         names.unshift('index')
+      }
+
+      const registryItems = await resolveRegistryItems(names, config)
+      const result = await fetchRegistry(registryItems)
+      const payload = z.array(registryItemSchema).parse(result)
+
+      if (!payload) {
+         return null
+      }
+
+      // If we're resolving the index, we want to fetch
+      // the theme item if a base color is provided.
+      // We do this for index only.
+      // Other components will ship with their theme tokens.
+      if (names.includes('index')) {
+         if (config.tailwind.baseColor) {
+            const theme = await registryGetTheme(config.tailwind.baseColor, config)
+            if (theme) {
+               payload.unshift(theme)
+            }
+         }
+      }
+
+      let tailwind = {}
+      payload.forEach((item) => {
+         tailwind = deepmerge(tailwind, item.tailwind ?? {})
+      })
+
+      let cssVars = {}
+      payload.forEach((item) => {
+         cssVars = deepmerge(cssVars, item.cssVars ?? {})
+      })
+
+      let docs = ''
+      payload.forEach((item) => {
+         if (item.docs) {
+            docs += `${item.docs}\n`
+         }
+      })
+
+      return registryResolvedItemsTreeSchema.parse({
+         dependencies: deepmerge.all(
+            payload.map(item => item.dependencies ?? []),
+         ),
+         devDependencies: deepmerge.all(
+            payload.map(item => item.devDependencies ?? []),
+         ),
+         files: deepmerge.all(payload.map(item => item.files ?? [])),
+         tailwind,
+         cssVars,
+         docs,
+      })
+   }
+   catch (error) {
+      handleError(error)
+      return null
+   }
+}
+
+async function resolveRegistryDependencies(
+   url: string,
+   config: Config,
+): Promise<string[]> {
+   const visited = new Set<string>()
+   const payload: string[] = []
+
+   async function resolveDependencies(itemUrl: string) {
+      const url = getRegistryUrl(
+         isUrl(itemUrl) ? itemUrl : `styles/${config.style}/${itemUrl}.json`,
+      )
+
+      if (visited.has(url)) {
+         return
+      }
+
+      visited.add(url)
+
+      try {
+         const [result] = await fetchRegistry([url])
+         const item = registryItemSchema.parse(result)
+         payload.push(url)
+
+         if (item.registryDependencies) {
+            for (const dependency of item.registryDependencies) {
+               await resolveDependencies(dependency)
+            }
+         }
+      }
+      catch (error) {
+         console.error(
+        `Error fetching or parsing registry item at ${itemUrl}:`,
+        error,
+         )
+      }
+   }
+
+   await resolveDependencies(url)
+   return Array.from(new Set(payload))
+}
+
+export async function registryGetTheme(name: string, config: Config) {
+   const baseColor = await getRegistryBaseColor(name)
+   if (!baseColor) {
+      return null
+   }
+
+   // TODO: Move this to the registry i.e registry:theme.
+   const theme = {
+      name,
+      type: 'registry:theme',
+      tailwind: {
+         config: {
+            theme: {
+               extend: {
+                  borderRadius: {
+                     lg: 'var(--radius)',
+                     md: 'calc(var(--radius) - 2px)',
+                     sm: 'calc(var(--radius) - 4px)',
+                  },
+                  colors: {},
+               },
+            },
+         },
+      },
+      cssVars: {
+         light: {
+            radius: '0.5rem',
+         },
+         dark: {},
+      },
+   } satisfies z.infer<typeof registryItemSchema>
+
+   if (config.tailwind.cssVariables) {
+      theme.tailwind.config.theme.extend.colors = {
+         ...theme.tailwind.config.theme.extend.colors,
+         ...buildTailwindThemeColorsFromCssVars(baseColor.cssVars.dark),
+      }
+      theme.cssVars = {
+         light: {
+            ...baseColor.cssVars.light,
+            ...theme.cssVars.light,
+         },
+         dark: {
+            ...baseColor.cssVars.dark,
+            ...theme.cssVars.dark,
+         },
+      }
+   }
+
+   return theme
+}
+
+function getRegistryUrl(path: string) {
+   if (isUrl(path)) {
+      // If the url contains /chat/b/, we assume it's the v0 registry.
+      // We need to add the /json suffix if it's missing.
+      const url = new URL(path)
+      if (url.pathname.match(/\/chat\/b\//) && !url.pathname.endsWith('/json')) {
+         url.pathname = `${url.pathname}/json`
+      }
+
+      return url.toString()
+   }
+
+   return `${REGISTRY_URL}/${path}`
+}
+
+function isUrl(path: string) {
+   try {
+      new URL(path)
+      return true
+   }
+   catch (error) {
+      return false
+   }
+}
+
+// TODO: We're double-fetching here. Use a cache.
+export async function resolveRegistryItems(names: string[], config: Config) {
+   const registryDependencies: string[] = []
+   for (const name of names) {
+      const itemRegistryDependencies = await resolveRegistryDependencies(
+         name,
+         config,
+      )
+      registryDependencies.push(...itemRegistryDependencies)
+   }
+
+   return Array.from(new Set(registryDependencies))
+}
+
+export function getRegistryTypeAliasMap() {
+   return new Map<string, string>([
+      ['registry:ui', 'ui'],
+      ['registry:lib', 'lib'],
+      ['registry:hook', 'hooks'],
+      ['registry:block', 'components'],
+      ['registry:component', 'components'],
+   ])
+}
+
+// Track a dependency and its parent.
+export function getRegistryParentMap(
+   registryItems: z.infer<typeof registryItemSchema>[],
+) {
+   const map = new Map<string, z.infer<typeof registryItemSchema>>()
+   registryItems.forEach((item) => {
+      if (!item.registryDependencies) {
+         return
+      }
+
+      item.registryDependencies.forEach((dependency) => {
+         map.set(dependency, item)
+      })
+   })
+   return map
+}
diff --git a/packages/nyxb/src/registry/index.ts b/packages/nyxb/src/registry/index.ts
new file mode 100644
index 00000000..06861aae
--- /dev/null
+++ b/packages/nyxb/src/registry/index.ts
@@ -0,0 +1 @@
+export * from "./schema"
diff --git a/packages/nyxb/src/registry/schema.ts b/packages/nyxb/src/registry/schema.ts
new file mode 100644
index 00000000..fb9a65e8
--- /dev/null
+++ b/packages/nyxb/src/registry/schema.ts
@@ -0,0 +1,115 @@
+import { z } from 'zod'
+
+// Note: if you edit the schema here, you must also edit the schema in the
+// apps/www/public/schema/registry-item.json file.
+
+export const registryItemTypeSchema = z.enum([
+   'registry:lib',
+   'registry:block',
+   'registry:component',
+   'registry:ui',
+   'registry:hook',
+   'registry:page',
+   'registry:file',
+
+   // Internal use only
+   'registry:theme',
+   'registry:example',
+   'registry:style',
+   'registry:internal',
+])
+
+export const registryItemFileSchema = z.discriminatedUnion('type', [
+   // Target is required for registry:file and registry:page
+   z.object({
+      path: z.string(),
+      content: z.string().optional(),
+      type: z.enum(['registry:file', 'registry:page']),
+      target: z.string(),
+   }),
+   z.object({
+      path: z.string(),
+      content: z.string().optional(),
+      type: registryItemTypeSchema.exclude(['registry:file', 'registry:page']),
+      target: z.string().optional(),
+   }),
+])
+
+export const registryItemTailwindSchema = z.object({
+   config: z
+      .object({
+         content: z.array(z.string()).optional(),
+         theme: z.record(z.string(), z.any()).optional(),
+         plugins: z.array(z.string()).optional(),
+      })
+      .optional(),
+})
+
+export const registryItemCssVarsSchema = z.object({
+   light: z.record(z.string(), z.string()).optional(),
+   dark: z.record(z.string(), z.string()).optional(),
+})
+
+export const registryItemSchema = z.object({
+   $schema: z.string().optional(),
+   name: z.string(),
+   type: registryItemTypeSchema,
+   title: z.string().optional(),
+   author: z.string().min(2).optional(),
+   description: z.string().optional(),
+   dependencies: z.array(z.string()).optional(),
+   devDependencies: z.array(z.string()).optional(),
+   registryDependencies: z.array(z.string()).optional(),
+   files: z.array(registryItemFileSchema).optional(),
+   tailwind: registryItemTailwindSchema.optional(),
+   cssVars: registryItemCssVarsSchema.optional(),
+   meta: z.record(z.string(), z.any()).optional(),
+   docs: z.string().optional(),
+   categories: z.array(z.string()).optional(),
+})
+
+export type RegistryItem = z.infer<typeof registryItemSchema>
+
+export const registrySchema = z.object({
+   name: z.string(),
+   homepage: z.string(),
+   items: z.array(registryItemSchema),
+})
+
+export type Registry = z.infer<typeof registrySchema>
+
+export const registryIndexSchema = z.array(registryItemSchema)
+
+export const stylesSchema = z.array(
+   z.object({
+      name: z.string(),
+      label: z.string(),
+   }),
+)
+
+export const iconsSchema = z.record(
+   z.string(),
+   z.record(z.string(), z.string()),
+)
+
+export const registryBaseColorSchema = z.object({
+   inlineColors: z.object({
+      light: z.record(z.string(), z.string()),
+      dark: z.record(z.string(), z.string()),
+   }),
+   cssVars: z.object({
+      light: z.record(z.string(), z.string()),
+      dark: z.record(z.string(), z.string()),
+   }),
+   inlineColorsTemplate: z.string(),
+   cssVarsTemplate: z.string(),
+})
+
+export const registryResolvedItemsTreeSchema = registryItemSchema.pick({
+   dependencies: true,
+   devDependencies: true,
+   files: true,
+   tailwind: true,
+   cssVars: true,
+   docs: true,
+})
diff --git a/packages/nyxb/src/utils/add-components.ts b/packages/nyxb/src/utils/add-components.ts
index 010a4059..8c4c9394 100644
--- a/packages/nyxb/src/utils/add-components.ts
+++ b/packages/nyxb/src/utils/add-components.ts
@@ -1,12 +1,29 @@
-import type { Config } from '~/src/utils/get-config'
-import { handleError } from '~/src/utils/handle-error'
-import { logger } from '~/src/utils/logger'
-import { registryResolveItemsTree } from '~/src/utils/registry'
-import { spinner } from '~/src/utils/spinner'
-import { updateCssVars } from '~/src/utils/updaters/update-css-vars'
-import { updateDependencies } from '~/src/utils/updaters/update-dependencies'
-import { updateFiles } from '~/src/utils/updaters/update-files'
-import { updateTailwindConfig } from '~/src/utils/updaters/update-tailwind-config'
+import path from "path"
+import { z } from "zod"
+import {
+   fetchRegistry,
+   getRegistryParentMap,
+   getRegistryTypeAliasMap,
+   registryResolveItemsTree,
+   resolveRegistryItems,
+} from "~/src/registry/api"
+import { registryItemSchema } from "~/src/registry/schema"
+import {
+   type Config,
+   type configSchema,
+   findCommonRoot,
+   findPackageRoot,
+   getWorkspaceConfig,
+   type workspaceConfigSchema,
+} from "~/src/utils/get-config"
+import { getProjectTailwindVersionFromConfig } from "~/src/utils/get-project-info"
+import { handleError } from "~/src/utils/handle-error"
+import { logger } from "~/src/utils/logger"
+import { spinner } from "~/src/utils/spinner"
+import { updateCssVars } from "~/src/utils/updaters/update-css-vars"
+import { updateDependencies } from "~/src/utils/updaters/update-dependencies"
+import { updateFiles } from "~/src/utils/updaters/update-files"
+import { updateTailwindConfig } from "~/src/utils/updaters/update-tailwind-config"
 
 export async function addComponents(
    components: string[],
@@ -24,22 +41,51 @@ export async function addComponents(
       ...options,
    }
 
+   const workspaceConfig = await getWorkspaceConfig(config)
+   if (
+      workspaceConfig &&
+      workspaceConfig?.ui.resolvedPaths.cwd !== config.resolvedPaths.cwd
+   ) {
+      return await addWorkspaceComponents(components, config, workspaceConfig, {
+         ...options,
+         isRemote:
+            components?.length === 1 && !!components[0].match(/\/chat\/b\//),
+      })
+   }
+
+   return await addProjectComponents(components, config, options)
+}
+
+async function addProjectComponents(
+   components: string[],
+   config: z.infer<typeof configSchema>,
+   options: {
+      overwrite?: boolean
+      silent?: boolean
+      isNewProject?: boolean
+   },
+) {
    const registrySpinner = spinner(`Checking registry.`, {
       silent: options.silent,
    })?.start()
    const tree = await registryResolveItemsTree(components, config)
    if (!tree) {
       registrySpinner?.fail()
-      return handleError(new Error('Failed to fetch components from registry.'))
+      return handleError(new Error("Failed to fetch components from registry."))
    }
    registrySpinner?.succeed()
 
+   const tailwindVersion = await getProjectTailwindVersionFromConfig(config)
+
    await updateTailwindConfig(tree.tailwind?.config, config, {
       silent: options.silent,
+      tailwindVersion,
    })
    await updateCssVars(tree.cssVars, config, {
       cleanupDefaultNextStyles: options.isNewProject,
       silent: options.silent,
+      tailwindVersion,
+      tailwindConfig: tree.tailwind?.config,
    })
 
    await updateDependencies(tree.dependencies, config, {
@@ -54,3 +100,181 @@ export async function addComponents(
       logger.info(tree.docs)
    }
 }
+
+async function addWorkspaceComponents(
+   components: string[],
+   config: z.infer<typeof configSchema>,
+   workspaceConfig: z.infer<typeof workspaceConfigSchema>,
+   options: {
+      overwrite?: boolean
+      silent?: boolean
+      isNewProject?: boolean
+      isRemote?: boolean
+   },
+) {
+   const registrySpinner = spinner(`Checking registry.`, {
+      silent: options.silent,
+   })?.start()
+   const registryItems = await resolveRegistryItems(components, config)
+   const result = await fetchRegistry(registryItems)
+   const payload = z.array(registryItemSchema).parse(result)
+   if (!payload) {
+      registrySpinner?.fail()
+      return handleError(new Error("Failed to fetch components from registry."))
+   }
+   registrySpinner?.succeed()
+
+   const registryParentMap = getRegistryParentMap(payload)
+   const registryTypeAliasMap = getRegistryTypeAliasMap()
+
+   const filesCreated: string[] = []
+   const filesUpdated: string[] = []
+   const filesSkipped: string[] = []
+
+   const rootSpinner = spinner(`Installing components.`)?.start()
+
+   for (const component of payload) {
+      const alias = registryTypeAliasMap.get(component.type)
+      const registryParent = registryParentMap.get(component.name)
+
+      // We don't support this type of component.
+      if (!alias) {
+         continue
+      }
+
+      // A good start is ui for now.
+      // TODO: Add support for other types.
+      const targetConfig =
+         component.type === "registry:ui" ||
+         registryParent?.type === "registry:ui"
+            ? workspaceConfig.ui
+            : config
+
+      const tailwindVersion =
+         await getProjectTailwindVersionFromConfig(targetConfig)
+
+      const workspaceRoot = findCommonRoot(
+         config.resolvedPaths.cwd,
+         targetConfig.resolvedPaths.ui,
+      )
+      const packageRoot =
+         (await findPackageRoot(
+            workspaceRoot,
+            targetConfig.resolvedPaths.cwd,
+         )) ?? targetConfig.resolvedPaths.cwd
+
+      // 1. Update tailwind config.
+      if (component.tailwind?.config) {
+         await updateTailwindConfig(component.tailwind?.config, targetConfig, {
+            silent: true,
+            tailwindVersion,
+         })
+         filesUpdated.push(
+            path.relative(
+               workspaceRoot,
+               targetConfig.resolvedPaths.tailwindConfig,
+            ),
+         )
+      }
+
+      // 2. Update css vars.
+      if (component.cssVars) {
+         await updateCssVars(component.cssVars, targetConfig, {
+            silent: true,
+            tailwindVersion,
+            tailwindConfig: component.tailwind?.config,
+         })
+         filesUpdated.push(
+            path.relative(
+               workspaceRoot,
+               targetConfig.resolvedPaths.tailwindCss,
+            ),
+         )
+      }
+
+      // 3. Update dependencies.
+      await updateDependencies(component.dependencies, targetConfig, {
+         silent: true,
+      })
+
+      // 4. Update files.
+      const files = await updateFiles(component.files, targetConfig, {
+         overwrite: options.overwrite,
+         silent: true,
+         rootSpinner,
+         isRemote: options.isRemote,
+      })
+
+      filesCreated.push(
+         ...files.filesCreated.map((file) =>
+            path.relative(workspaceRoot, path.join(packageRoot, file)),
+         ),
+      )
+      filesUpdated.push(
+         ...files.filesUpdated.map((file) =>
+            path.relative(workspaceRoot, path.join(packageRoot, file)),
+         ),
+      )
+      filesSkipped.push(
+         ...files.filesSkipped.map((file) =>
+            path.relative(workspaceRoot, path.join(packageRoot, file)),
+         ),
+      )
+   }
+
+   rootSpinner?.succeed()
+
+   // Sort files.
+   filesCreated.sort()
+   filesUpdated.sort()
+   filesSkipped.sort()
+
+   const hasUpdatedFiles = filesCreated.length || filesUpdated.length
+   if (!hasUpdatedFiles && !filesSkipped.length) {
+      spinner(`No files updated.`, {
+         silent: options.silent,
+      })?.info()
+   }
+
+   if (filesCreated.length) {
+      spinner(
+         `Created ${filesCreated.length} ${
+            filesCreated.length === 1 ? "file" : "files"
+         }:`,
+         {
+            silent: options.silent,
+         },
+      )?.succeed()
+      for (const file of filesCreated) {
+         logger.log(`  - ${file}`)
+      }
+   }
+
+   if (filesUpdated.length) {
+      spinner(
+         `Updated ${filesUpdated.length} ${
+            filesUpdated.length === 1 ? "file" : "files"
+         }:`,
+         {
+            silent: options.silent,
+         },
+      )?.info()
+      for (const file of filesUpdated) {
+         logger.log(`  - ${file}`)
+      }
+   }
+
+   if (filesSkipped.length) {
+      spinner(
+         `Skipped ${filesSkipped.length} ${
+            filesUpdated.length === 1 ? "file" : "files"
+         }: (use --overwrite to overwrite)`,
+         {
+            silent: options.silent,
+         },
+      )?.info()
+      for (const file of filesSkipped) {
+         logger.log(`  - ${file}`)
+      }
+   }
+}
diff --git a/packages/nyxb/src/utils/create-project.ts b/packages/nyxb/src/utils/create-project.ts
index 8424c73a..10856f6c 100644
--- a/packages/nyxb/src/utils/create-project.ts
+++ b/packages/nyxb/src/utils/create-project.ts
@@ -1,120 +1,246 @@
-import path from 'path'
-import { execa } from 'execa'
-import fs from 'fs-extra'
-import prompts from 'prompts'
-import type { z } from 'zod'
-import type { initOptionsSchema } from '~/src/commands/init'
-import { getPackageManager } from '~/src/utils/get-package-manager'
-import { highlighter } from '~/src/utils/highlighter'
-import { logger } from '~/src/utils/logger'
-import { spinner } from '~/src/utils/spinner'
+import os from "os"
+import path from "path"
+import { execa } from "execa"
+import fs from "fs-extra"
+import prompts from "prompts"
+import { z } from "zod"
+import type { initOptionsSchema } from "~/src/commands/init"
+import { fetchRegistry } from "~/src/registry/api"
+import { getPackageManager } from "~/src/utils/get-package-manager"
+import { handleError } from "~/src/utils/handle-error"
+import { highlighter } from "~/src/utils/highlighter"
+import { logger } from "~/src/utils/logger"
+import { spinner } from "~/src/utils/spinner"
+
+const MONOREPO_TEMPLATE_URL =
+   "https://codeload.github.com/nyxb-ui/ui/tar.gz/main"
 
 export async function createProject(
-   options: Pick<z.infer<typeof initOptionsSchema>, 'cwd' | 'force' | 'srcDir'>,
+   options: Pick<
+      z.infer<typeof initOptionsSchema>,
+      "cwd" | "force" | "srcDir" | "components"
+   >,
 ) {
    options = {
       srcDir: false,
       ...options,
    }
 
-   if (!options.force) {
-      const { proceed } = await prompts({
-         type: 'confirm',
-         name: 'proceed',
-         message: `The path ${highlighter.info(
-        options.cwd,
-      )} does not contain a package.json file. Would you like to start a new ${highlighter.info(
-        'Next.js',
-      )} project?`,
-         initial: true,
-      })
+   let projectType: "next" | "monorepo" = "next"
+   let projectName = "my-app"
+   let nextVersion = "15.1.0"
 
-      if (!proceed) {
-         return {
-            projectPath: null,
-            projectName: null,
-         }
+   const isRemoteComponent =
+      options.components?.length === 1 &&
+      !!options.components[0].match(/\/chat\/b\//)
+
+   if (options.components && isRemoteComponent) {
+      try {
+         const [result] = await fetchRegistry(options.components)
+         const { meta } = z
+            .object({
+               meta: z.object({
+                  nextVersion: z.string(),
+               }),
+            })
+            .parse(result)
+         nextVersion = meta.nextVersion
+      } catch (error) {
+         logger.break()
+         handleError(error)
       }
    }
 
+   if (!options.force) {
+      const { type, name } = await prompts([
+         {
+            type: "select",
+            name: "type",
+            message: `The path ${highlighter.info(
+               options.cwd,
+            )} does not contain a package.json file.\n  Would you like to start a new project?`,
+            choices: [
+               { title: "Next.js", value: "next" },
+               { title: "Next.js (Monorepo)", value: "monorepo" },
+            ],
+            initial: 0,
+         },
+         {
+            type: "text",
+            name: "name",
+            message: "What is your project named?",
+            initial: projectName,
+            format: (value: string) => value.trim(),
+            validate: (value: string) =>
+               value.length > 128
+                  ? `Name should be less than 128 characters.`
+                  : true,
+         },
+      ])
+
+      projectType = type
+      projectName = name
+   }
+
    const packageManager = await getPackageManager(options.cwd, {
       withFallback: true,
    })
 
-   const { name } = await prompts({
-      type: 'text',
-      name: 'name',
-      message: `What is your project named?`,
-      initial: 'my-app',
-      format: (value: string) => value.trim(),
-      validate: (value: string) =>
-         value.length > 128 ? `Name should be less than 128 characters.` : true,
-   })
-
-   const projectPath = `${options.cwd}/${name}`
+   const projectPath = `${options.cwd}/${projectName}`
 
    // Check if path is writable.
    try {
       await fs.access(options.cwd, fs.constants.W_OK)
-   }
-   catch (error) {
+   } catch (error) {
       logger.break()
       logger.error(`The path ${highlighter.info(options.cwd)} is not writable.`)
       logger.error(
-      `It is likely you do not have write permissions for this folder or the path ${highlighter.info(
-        options.cwd,
-      )} does not exist.`,
+         `It is likely you do not have write permissions for this folder or the path ${highlighter.info(
+            options.cwd,
+         )} does not exist.`,
       )
       logger.break()
       process.exit(1)
    }
 
-   if (fs.existsSync(path.resolve(options.cwd, name, 'package.json'))) {
+   if (fs.existsSync(path.resolve(options.cwd, projectName, "package.json"))) {
       logger.break()
       logger.error(
-      `A project with the name ${highlighter.info(name)} already exists.`,
+         `A project with the name ${highlighter.info(projectName)} already exists.`,
       )
       logger.error(`Please choose a different name and try again.`)
       logger.break()
       process.exit(1)
    }
 
+   if (projectType === "next") {
+      await createNextProject(projectPath, {
+         version: nextVersion,
+         cwd: options.cwd,
+         packageManager,
+         srcDir: !!options.srcDir,
+      })
+   }
+
+   if (projectType === "monorepo") {
+      await createMonorepoProject(projectPath, {
+         packageManager,
+      })
+   }
+
+   return {
+      projectPath,
+      projectName,
+      projectType,
+   }
+}
+
+async function createNextProject(
+   projectPath: string,
+   options: {
+      version: string
+      cwd: string
+      packageManager: string
+      srcDir: boolean
+   },
+) {
    const createSpinner = spinner(
-    `Creating a new Next.js project. This may take a few minutes.`,
+      `Creating a new Next.js project. This may take a few minutes.`,
    ).start()
 
    // Note: pnpm fails here. Fallback to npx with --use-PACKAGE-MANAGER.
    const args = [
-      '--tailwind',
-      '--eslint',
-      '--typescript',
-      '--app',
-      options.srcDir ? '--src-dir' : '--no-src-dir',
-      '--no-import-alias',
-    `--use-${packageManager}`,
+      "--tailwind",
+      "--eslint",
+      "--typescript",
+      "--app",
+      options.srcDir ? "--src-dir" : "--no-src-dir",
+      "--no-import-alias",
+      `--use-${options.packageManager}`,
    ]
 
+   if (options.version.startsWith("15")) {
+      args.push("--turbopack")
+   }
+
    try {
       await execa(
-         'npx',
-         ['create-next-app@14.2.16', projectPath, '--silent', ...args],
+         "npx",
+         [
+            `create-next-app@${options.version}`,
+            projectPath,
+            "--silent",
+            ...args,
+         ],
          {
             cwd: options.cwd,
          },
       )
-   }
-   catch (error) {
+   } catch (error) {
       logger.break()
       logger.error(
-      `Something went wrong creating a new Next.js project. Please try again.`,
+         `Something went wrong creating a new Next.js project. Please try again.`,
       )
       process.exit(1)
    }
 
-   createSpinner?.succeed('Creating a new Next.js project.')
+   createSpinner?.succeed("Creating a new Next.js project.")
+}
 
-   return {
-      projectPath,
-      projectName: name,
+async function createMonorepoProject(
+   projectPath: string,
+   options: {
+      packageManager: string
+   },
+) {
+   const createSpinner = spinner(
+      `Creating a new Next.js monorepo. This may take a few minutes.`,
+   ).start()
+
+   try {
+      // Get the template.
+      const templatePath = path.join(os.tmpdir(), `nyxb-template-${Date.now()}`)
+      await fs.ensureDir(templatePath)
+      const response = await fetch(MONOREPO_TEMPLATE_URL)
+      if (!response.ok) {
+         throw new Error(`Failed to download template: ${response.statusText}`)
+      }
+
+      // Write the tar file
+      const tarPath = path.resolve(templatePath, "template.tar.gz")
+      await fs.writeFile(tarPath, Buffer.from(await response.arrayBuffer()))
+      await execa("tar", [
+         "-xzf",
+         tarPath,
+         "-C",
+         templatePath,
+         "--strip-components=2",
+         "ui-main/templates/monorepo-next",
+      ])
+      const extractedPath = path.resolve(templatePath, "monorepo-next")
+      await fs.move(extractedPath, projectPath)
+      await fs.remove(templatePath)
+
+      // Run install.
+      await execa(options.packageManager, ["install"], {
+         cwd: projectPath,
+      })
+
+      // Try git init.
+      const cwd = process.cwd()
+      await execa("git", ["--version"], { cwd: projectPath })
+      await execa("git", ["init"], { cwd: projectPath })
+      await execa("git", ["add", "-A"], { cwd: projectPath })
+      await execa("git", ["commit", "-m", "Initial commit"], {
+         cwd: projectPath,
+      })
+      await execa("cd", [cwd])
+
+      createSpinner?.succeed("Creating a new Next.js monorepo.")
+   } catch (error) {
+      createSpinner?.fail(
+         "Something went wrong creating a new Next.js monorepo.",
+      )
+      handleError(error)
    }
 }
diff --git a/packages/nyxb/src/utils/errors.ts b/packages/nyxb/src/utils/errors.ts
index dcacfd00..8fe1f730 100644
--- a/packages/nyxb/src/utils/errors.ts
+++ b/packages/nyxb/src/utils/errors.ts
@@ -1,12 +1,13 @@
-export const MISSING_DIR_OR_EMPTY_PROJECT = '1'
-export const EXISTING_CONFIG = '2'
-export const MISSING_CONFIG = '3'
-export const FAILED_CONFIG_READ = '4'
-export const TAILWIND_NOT_CONFIGURED = '5'
-export const IMPORT_ALIAS_MISSING = '6'
-export const UNSUPPORTED_FRAMEWORK = '7'
-export const COMPONENT_URL_NOT_FOUND = '8'
-export const COMPONENT_URL_UNAUTHORIZED = '9'
-export const COMPONENT_URL_FORBIDDEN = '10'
-export const COMPONENT_URL_BAD_REQUEST = '11'
-export const COMPONENT_URL_INTERNAL_SERVER_ERROR = '12'
+export const MISSING_DIR_OR_EMPTY_PROJECT = "1"
+export const EXISTING_CONFIG = "2"
+export const MISSING_CONFIG = "3"
+export const FAILED_CONFIG_READ = "4"
+export const TAILWIND_NOT_CONFIGURED = "5"
+export const IMPORT_ALIAS_MISSING = "6"
+export const UNSUPPORTED_FRAMEWORK = "7"
+export const COMPONENT_URL_NOT_FOUND = "8"
+export const COMPONENT_URL_UNAUTHORIZED = "9"
+export const COMPONENT_URL_FORBIDDEN = "10"
+export const COMPONENT_URL_BAD_REQUEST = "11"
+export const COMPONENT_URL_INTERNAL_SERVER_ERROR = "12"
+export const BUILD_MISSING_REGISTRY_FILE = "13"
diff --git a/packages/nyxb/src/utils/frameworks.ts b/packages/nyxb/src/utils/frameworks.ts
index dcc2f341..5ce0a221 100644
--- a/packages/nyxb/src/utils/frameworks.ts
+++ b/packages/nyxb/src/utils/frameworks.ts
@@ -1,66 +1,66 @@
 export const FRAMEWORKS = {
-   'next-app': {
-      name: 'next-app',
-      label: 'Next.js',
+   "next-app": {
+      name: "next-app",
+      label: "Next.js",
       links: {
-         installation: 'https://nyxbui.design/docs/installation/next',
-         tailwind: 'https://tailwindcss.com/docs/guides/nextjs',
+         installation: "https://nyxbui.design/docs/installation/next",
+         tailwind: "https://tailwindcss.com/docs/guides/nextjs",
       },
    },
-   'next-pages': {
-      name: 'next-pages',
-      label: 'Next.js',
+   "next-pages": {
+      name: "next-pages",
+      label: "Next.js",
       links: {
-         installation: 'https://nyxbui.design/docs/installation/next',
-         tailwind: 'https://tailwindcss.com/docs/guides/nextjs',
+         installation: "https://nyxbui.design/docs/installation/next",
+         tailwind: "https://tailwindcss.com/docs/guides/nextjs",
       },
    },
-   'remix': {
-      name: 'remix',
-      label: 'Remix',
+   remix: {
+      name: "remix",
+      label: "Remix",
       links: {
-         installation: 'https://nyxbui.design/docs/installation/remix',
-         tailwind: 'https://tailwindcss.com/docs/guides/remix',
+         installation: "https://nyxbui.design/docs/installation/remix",
+         tailwind: "https://tailwindcss.com/docs/guides/remix",
       },
    },
-   'vite': {
-      name: 'vite',
-      label: 'Vite',
+   vite: {
+      name: "vite",
+      label: "Vite",
       links: {
-         installation: 'https://nyxbui.design/docs/installation/vite',
-         tailwind: 'https://tailwindcss.com/docs/guides/vite',
+         installation: "https://nyxbui.design/docs/installation/vite",
+         tailwind: "https://tailwindcss.com/docs/guides/vite",
       },
    },
-   'astro': {
-      name: 'astro',
-      label: 'Astro',
+   astro: {
+      name: "astro",
+      label: "Astro",
       links: {
-         installation: 'https://nyxbui.design/docs/installation/astro',
-         tailwind: 'https://tailwindcss.com/docs/guides/astro',
+         installation: "https://nyxbui.design/docs/installation/astro",
+         tailwind: "https://tailwindcss.com/docs/guides/astro",
       },
    },
-   'laravel': {
-      name: 'laravel',
-      label: 'Laravel',
+   laravel: {
+      name: "laravel",
+      label: "Laravel",
       links: {
-         installation: 'https://nyxbui.design/docs/installation/laravel',
-         tailwind: 'https://tailwindcss.com/docs/guides/laravel',
+         installation: "https://nyxbui.design/docs/installation/laravel",
+         tailwind: "https://tailwindcss.com/docs/guides/laravel",
       },
    },
-   'gatsby': {
-      name: 'gatsby',
-      label: 'Gatsby',
+   gatsby: {
+      name: "gatsby",
+      label: "Gatsby",
       links: {
-         installation: 'https://nyxbui.design/docs/installation/gatsby',
-         tailwind: 'https://tailwindcss.com/docs/guides/gatsby',
+         installation: "https://nyxbui.design/docs/installation/gatsby",
+         tailwind: "https://tailwindcss.com/docs/guides/gatsby",
       },
    },
-   'manual': {
-      name: 'manual',
-      label: 'Manual',
+   manual: {
+      name: "manual",
+      label: "Manual",
       links: {
-         installation: 'https://nyxbui.design/docs/installation/manual',
-         tailwind: 'https://tailwindcss.com/docs/installation',
+         installation: "https://nyxbui.design/docs/installation/manual",
+         tailwind: "https://tailwindcss.com/docs/installation",
       },
    },
 } as const
diff --git a/packages/nyxb/src/utils/get-config.ts b/packages/nyxb/src/utils/get-config.ts
index 09a8d2d2..3636da33 100644
--- a/packages/nyxb/src/utils/get-config.ts
+++ b/packages/nyxb/src/utils/get-config.ts
@@ -1,21 +1,22 @@
-import path from 'path'
-import { cosmiconfig } from 'cosmiconfig'
-import { loadConfig } from 'tsconfig-paths'
-import { z } from 'zod'
-import { resolveImport } from '~/src/utils/resolve-import'
-import { highlighter } from '~/src/utils/highlighter'
-
-export const DEFAULT_STYLE = 'default'
-export const DEFAULT_COMPONENTS = '~/components'
-export const DEFAULT_UTILS = '~/lib/utils'
-export const DEFAULT_TAILWIND_CSS = 'app/globals.css'
-export const DEFAULT_TAILWIND_CONFIG = 'tailwind.config.js'
-export const DEFAULT_TAILWIND_BASE_COLOR = 'slate'
+import path from "path"
+import { cosmiconfig } from "cosmiconfig"
+import fg from "fast-glob"
+import { loadConfig } from "tsconfig-paths"
+import { z } from "zod"
+import { highlighter } from "~/src/utils/highlighter"
+import { resolveImport } from "~/src/utils/resolve-import"
+
+export const DEFAULT_STYLE = "default"
+export const DEFAULT_COMPONENTS = "~/components"
+export const DEFAULT_UTILS = "~/lib/utils"
+export const DEFAULT_TAILWIND_CSS = "app/globals.css"
+export const DEFAULT_TAILWIND_CONFIG = "tailwind.config.js"
+export const DEFAULT_TAILWIND_BASE_COLOR = "slate"
 
 // TODO: Figure out if we want to support all cosmiconfig formats.
 // A simple nyxbui.json file would be nice.
-const explorer = cosmiconfig('components', {
-   searchPlaces: ['nyxbui.json'],
+const explorer = cosmiconfig("nyxbui", {
+   searchPlaces: ["nyxbui.json"],
 })
 
 export const rawConfigSchema = z
@@ -25,11 +26,11 @@ export const rawConfigSchema = z
       rsc: z.coerce.boolean().default(false),
       tsx: z.coerce.boolean().default(true),
       tailwind: z.object({
-         config: z.string(),
+         config: z.string().optional(),
          css: z.string(),
          baseColor: z.string(),
          cssVariables: z.boolean().default(true),
-         prefix: z.string().default('').optional(),
+         prefix: z.string().default("").optional(),
       }),
       aliases: z.object({
          components: z.string(),
@@ -59,6 +60,10 @@ export const configSchema = rawConfigSchema.extend({
 
 export type Config = z.infer<typeof configSchema>
 
+// TODO: type the key.
+// Okay for now since I don't want a breaking change.
+export const workspaceConfigSchema = z.record(configSchema)
+
 export async function getConfig(cwd: string) {
    const config = await getRawConfig(cwd)
 
@@ -68,7 +73,7 @@ export async function getConfig(cwd: string) {
 
    // Set default icon library if not provided.
    if (!config.iconLibrary) {
-      config.iconLibrary = config.style === 'miami' ? 'radix' : 'lucide'
+      config.iconLibrary = config.style === "miami" ? "radix" : "lucide"
    }
 
    return await resolveConfigPaths(cwd, config)
@@ -78,11 +83,11 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
    // Read tsconfig.json.
    const tsConfig = await loadConfig(cwd)
 
-   if (tsConfig.resultType === 'failed') {
+   if (tsConfig.resultType === "failed") {
       throw new Error(
-      `Failed to load ${config.tsx ? 'tsconfig' : 'jsconfig'}.json. ${
-        tsConfig.message ?? ''
-      }`.trim(),
+         `Failed to load ${config.tsx ? "tsconfig" : "jsconfig"}.json. ${
+            tsConfig.message ?? ""
+         }`.trim(),
       )
    }
 
@@ -90,33 +95,43 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
       ...config,
       resolvedPaths: {
          cwd,
-         tailwindConfig: path.resolve(cwd, config.tailwind.config),
+         tailwindConfig: config.tailwind.config
+            ? path.resolve(cwd, config.tailwind.config)
+            : "",
          tailwindCss: path.resolve(cwd, config.tailwind.css),
-         utils: await resolveImport(config.aliases.utils, tsConfig),
-         components: await resolveImport(config.aliases.components, tsConfig),
-         ui: config.aliases.ui
-            ? await resolveImport(config.aliases.ui, tsConfig)
+         utils: await resolveImport(config.aliases["utils"], tsConfig),
+         components: await resolveImport(
+            config.aliases["components"],
+            tsConfig,
+         ),
+         ui: config.aliases["ui"]
+            ? await resolveImport(config.aliases["ui"], tsConfig)
             : path.resolve(
-               (await resolveImport(config.aliases.components, tsConfig))
-               ?? cwd,
-               'ui',
-            ),
+                 (await resolveImport(
+                    config.aliases["components"],
+                    tsConfig,
+                 )) ?? cwd,
+                 "ui",
+              ),
          // TODO: Make this configurable.
          // For now, we assume the lib and hooks directories are one level up from the components directory.
-         lib: config.aliases.lib
-            ? await resolveImport(config.aliases.lib, tsConfig)
+         lib: config.aliases["lib"]
+            ? await resolveImport(config.aliases["lib"], tsConfig)
             : path.resolve(
-               (await resolveImport(config.aliases.utils, tsConfig)) ?? cwd,
-               '..',
-            ),
-         hooks: config.aliases.hooks
-            ? await resolveImport(config.aliases.hooks, tsConfig)
+                 (await resolveImport(config.aliases["utils"], tsConfig)) ??
+                    cwd,
+                 "..",
+              ),
+         hooks: config.aliases["hooks"]
+            ? await resolveImport(config.aliases["hooks"], tsConfig)
             : path.resolve(
-               (await resolveImport(config.aliases.components, tsConfig))
-               ?? cwd,
-               '..',
-               'hooks',
-            ),
+                 (await resolveImport(
+                    config.aliases["components"],
+                    tsConfig,
+                 )) ?? cwd,
+                 "..",
+                 "hooks",
+              ),
       },
    })
 }
@@ -130,11 +145,91 @@ export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
       }
 
       return rawConfigSchema.parse(configResult.config)
-   }
-   catch (error) {
+   } catch (error) {
       const componentPath = `${cwd}/nyxbui.json`
       throw new Error(
-      `Invalid configuration found in ${highlighter.info(componentPath)}.`,
+         `Invalid configuration found in ${highlighter.info(componentPath)}.`,
       )
    }
 }
+
+// Note: we can check for -workspace.yaml or "workspace" in package.json.
+// Since cwd is not necessarily the root of the project.
+// We'll instead check if ui aliases resolve to a different root.
+export async function getWorkspaceConfig(config: Config) {
+   const resolvedAliases: any = {}
+
+   for (const key of Object.keys(config.aliases)) {
+      if (!isAliasKey(key, config)) {
+         continue
+      }
+
+      const resolvedPath = config.resolvedPaths[key]
+      const packageRoot = await findPackageRoot(
+         config.resolvedPaths.cwd,
+         resolvedPath,
+      )
+
+      if (!packageRoot) {
+         resolvedAliases[key] = config
+         continue
+      }
+
+      resolvedAliases[key] = await getConfig(packageRoot)
+   }
+
+   const result = workspaceConfigSchema.safeParse(resolvedAliases)
+   if (!result.success) {
+      return null
+   }
+
+   return result.data
+}
+
+export async function findPackageRoot(cwd: string, resolvedPath: string) {
+   const commonRoot = findCommonRoot(cwd, resolvedPath)
+   const relativePath = path.relative(commonRoot, resolvedPath)
+
+   const packageRoots = await fg.glob("**/package.json", {
+      cwd: commonRoot,
+      deep: 3,
+      ignore: [
+         "**/node_modules/**",
+         "**/dist/**",
+         "**/build/**",
+         "**/public/**",
+      ],
+   })
+
+   const matchingPackageRoot = packageRoots
+      .map((pkgPath) => path.dirname(pkgPath))
+      .find((pkgDir) => relativePath.startsWith(pkgDir))
+
+   return matchingPackageRoot
+      ? path.join(commonRoot, matchingPackageRoot)
+      : null
+}
+
+function isAliasKey(
+   key: string,
+   config: Config,
+): key is keyof Config["aliases"] {
+   return Object.keys(config.resolvedPaths)
+      .filter((key) => key !== "utils")
+      .includes(key)
+}
+
+export function findCommonRoot(cwd: string, resolvedPath: string) {
+   const parts1 = cwd.split(path.sep)
+   const parts2 = resolvedPath.split(path.sep)
+   const commonParts = []
+
+   for (let i = 0; i < Math.min(parts1.length, parts2.length); i++) {
+      if (parts1[i] !== parts2[i]) {
+         break
+      }
+      commonParts.push(parts1[i])
+   }
+
+   return commonParts.join(path.sep)
+}
diff --git a/packages/nyxb/src/utils/get-package-info.ts b/packages/nyxb/src/utils/get-package-info.ts
index 46947493..86fe3329 100644
--- a/packages/nyxb/src/utils/get-package-info.ts
+++ b/packages/nyxb/src/utils/get-package-info.ts
@@ -1,12 +1,12 @@
-import path from 'path'
-import fs from 'fs-extra'
-import type { PackageJson } from 'type-fest'
+import path from "path"
+import fs from "fs-extra"
+import type { PackageJson } from "type-fest"
 
 export function getPackageInfo(
-   cwd: string = '',
-   shouldThrow: boolean = true,
+   cwd = "",
+   shouldThrow = true,
 ): PackageJson | null {
-   const packageJsonPath = path.join(cwd, 'package.json')
+   const packageJsonPath = path.join(cwd, "package.json")
 
    return fs.readJSONSync(packageJsonPath, {
       throws: shouldThrow,
diff --git a/packages/nyxb/src/utils/get-package-manager.ts b/packages/nyxb/src/utils/get-package-manager.ts
index cffba5c6..0476f997 100644
--- a/packages/nyxb/src/utils/get-package-manager.ts
+++ b/packages/nyxb/src/utils/get-package-manager.ts
@@ -1,50 +1,45 @@
-import { detect } from '@nyxb/nyxi'
+import { detect } from "@nyxb/nyxi"
 
 export async function getPackageManager(
    targetDir: string,
    { withFallback }: { withFallback?: boolean } = {
       withFallback: false,
    },
-): Promise<'yarn' | 'pnpm' | 'bun' | 'npm'> {
+): Promise<"yarn" | "pnpm" | "bun" | "npm"> {
    const packageManager = await detect({ programmatic: true, cwd: targetDir })
 
-   if (packageManager === 'yarn@berry')
-      return 'yarn'
-   if (packageManager === 'pnpm@6')
-      return 'pnpm'
-   if (packageManager === 'bun')
-      return 'bun'
+   if (packageManager === "yarn@berry") return "yarn"
+   if (packageManager === "pnpm@6") return "pnpm"
+   if (packageManager === "bun") return "bun"
 
    if (!withFallback) {
-      return packageManager ?? 'npm'
+      return packageManager ?? "npm"
    }
 
    // Fallback to user agent if not detected.
-   const userAgent = process.env.npm_config_user_agent || ''
+   const userAgent = process.env.npm_config_user_agent || ""
 
-   if (userAgent.startsWith('yarn')) {
-      return 'yarn'
+   if (userAgent.startsWith("yarn")) {
+      return "yarn"
    }
 
-   if (userAgent.startsWith('pnpm')) {
-      return 'pnpm'
+   if (userAgent.startsWith("pnpm")) {
+      return "pnpm"
    }
 
-   if (userAgent.startsWith('bun')) {
-      return 'bun'
+   if (userAgent.startsWith("bun")) {
+      return "bun"
    }
 
-   return 'npm'
+   return "npm"
 }
 
 export async function getPackageRunner(cwd: string) {
    const packageManager = await getPackageManager(cwd)
 
-   if (packageManager === 'pnpm')
-      return 'pnpm dlx'
+   if (packageManager === "pnpm") return "pnpm dlx"
 
-   if (packageManager === 'bun')
-      return 'bunx'
+   if (packageManager === "bun") return "bunx"
 
-   return 'npx'
+   return "npx"
 }
diff --git a/packages/nyxb/src/utils/get-project-info.ts b/packages/nyxb/src/utils/get-project-info.ts
index 49befb0c..807148b6 100644
--- a/packages/nyxb/src/utils/get-project-info.ts
+++ b/packages/nyxb/src/utils/get-project-info.ts
@@ -1,36 +1,36 @@
-import path from 'path'
-import fg from 'fast-glob'
-import fs from 'fs-extra'
-import { loadConfig } from 'tsconfig-paths'
-import { z } from 'zod'
-import type { Framework } from '~/src/utils/frameworks'
-import { FRAMEWORKS } from '~/src/utils/frameworks'
-import type {
-   Config,
-   RawConfig,
-} from '~/src/utils/get-config'
+import path from "path"
+import fg from "fast-glob"
+import fs from "fs-extra"
+import { loadConfig } from "tsconfig-paths"
+import { z } from "zod"
+import { FRAMEWORKS, type Framework } from "~/src/utils/frameworks"
 import {
+   type Config,
+   type RawConfig,
    getConfig,
    resolveConfigPaths,
-} from '~/src/utils/get-config'
-import { getPackageInfo } from '~/src/utils/get-package-info'
+} from "~/src/utils/get-config"
+import { getPackageInfo } from "~/src/utils/get-package-info"
 
-export interface ProjectInfo {
+export type TailwindVersion = "v3" | "v4" | null
+
+type ProjectInfo = {
    framework: Framework
    isSrcDir: boolean
    isRSC: boolean
    isTsx: boolean
    tailwindConfigFile: string | null
    tailwindCssFile: string | null
+   tailwindVersion: TailwindVersion
    aliasPrefix: string | null
 }
 
 const PROJECT_SHARED_IGNORE = [
-   '**/node_modules/**',
-   '.next',
-   'public',
-   'dist',
-   'build',
+   "**/node_modules/**",
+   ".next",
+   "public",
+   "dist",
+   "build",
 ]
 
 const TS_CONFIG_SCHEMA = z.object({
@@ -46,99 +46,135 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
       isTsx,
       tailwindConfigFile,
       tailwindCssFile,
+      tailwindVersion,
       aliasPrefix,
       packageJson,
    ] = await Promise.all([
-      fg.glob('**/{next,vite,astro}.config.*|gatsby-config.*|composer.json', {
+      fg.glob("**/{next,vite,astro}.config.*|gatsby-config.*|composer.json", {
          cwd,
          deep: 3,
          ignore: PROJECT_SHARED_IGNORE,
       }),
-      fs.pathExists(path.resolve(cwd, 'src')),
+      fs.pathExists(path.resolve(cwd, "src")),
       isTypeScriptProject(cwd),
       getTailwindConfigFile(cwd),
       getTailwindCssFile(cwd),
+      getTailwindVersion(cwd),
       getTsConfigAliasPrefix(cwd),
       getPackageInfo(cwd, false),
    ])
 
    const isUsingAppDir = await fs.pathExists(
-      path.resolve(cwd, `${isSrcDir ? 'src/' : ''}app`),
+      path.resolve(cwd, `${isSrcDir ? "src/" : ""}app`),
    )
 
    const type: ProjectInfo = {
-      framework: FRAMEWORKS.manual,
+      framework: FRAMEWORKS["manual"],
       isSrcDir,
       isRSC: false,
       isTsx,
       tailwindConfigFile,
       tailwindCssFile,
+      tailwindVersion,
       aliasPrefix,
    }
 
    // Next.js.
-   if (configFiles.find(file => file.startsWith('next.config.'))?.length) {
+   if (configFiles.find((file) => file.startsWith("next.config."))?.length) {
       type.framework = isUsingAppDir
-         ? FRAMEWORKS['next-app']
-         : FRAMEWORKS['next-pages']
+         ? FRAMEWORKS["next-app"]
+         : FRAMEWORKS["next-pages"]
       type.isRSC = isUsingAppDir
       return type
    }
 
    // Astro.
-   if (configFiles.find(file => file.startsWith('astro.config.'))?.length) {
-      type.framework = FRAMEWORKS.astro
+   if (configFiles.find((file) => file.startsWith("astro.config."))?.length) {
+      type.framework = FRAMEWORKS["astro"]
       return type
    }
 
    // Gatsby.
-   if (configFiles.find(file => file.startsWith('gatsby-config.'))?.length) {
-      type.framework = FRAMEWORKS.gatsby
+   if (configFiles.find((file) => file.startsWith("gatsby-config."))?.length) {
+      type.framework = FRAMEWORKS["gatsby"]
       return type
    }
 
    // Laravel.
-   if (configFiles.find(file => file.startsWith('composer.json'))?.length) {
-      type.framework = FRAMEWORKS.laravel
+   if (configFiles.find((file) => file.startsWith("composer.json"))?.length) {
+      type.framework = FRAMEWORKS["laravel"]
       return type
    }
 
    // Remix.
    if (
-      Object.keys(packageJson?.dependencies ?? {}).find(dep =>
-         dep.startsWith('@remix-run/'),
+      Object.keys(packageJson?.dependencies ?? {}).find((dep) =>
+         dep.startsWith("@remix-run/"),
       )
    ) {
-      type.framework = FRAMEWORKS.remix
+      type.framework = FRAMEWORKS["remix"]
       return type
    }
 
    // Vite.
    // Some Remix templates also have a vite.config.* file.
    // We'll assume that it got caught by the Remix check above.
-   if (configFiles.find(file => file.startsWith('vite.config.'))?.length) {
-      type.framework = FRAMEWORKS.vite
+   if (configFiles.find((file) => file.startsWith("vite.config."))?.length) {
+      type.framework = FRAMEWORKS["vite"]
       return type
    }
 
    return type
 }
 
+export async function getTailwindVersion(
+   cwd: string,
+): Promise<ProjectInfo["tailwindVersion"]> {
+   const packageInfo = getPackageInfo(cwd)
+
+   if (
+      !packageInfo?.dependencies?.tailwindcss &&
+      !packageInfo?.devDependencies?.tailwindcss
+   ) {
+      return null
+   }
+
+   if (
+      /^(?:\^|~)?3(?:\.\d+)*(?:-.*)?$/.test(
+         packageInfo?.dependencies?.tailwindcss ||
+            packageInfo?.devDependencies?.tailwindcss ||
+            "",
+      )
+   ) {
+      return "v3"
+   }
+
+   return "v4"
+}
+
 export async function getTailwindCssFile(cwd: string) {
-   const files = await fg.glob(['**/*.css', '**/*.scss'], {
-      cwd,
-      deep: 5,
-      ignore: PROJECT_SHARED_IGNORE,
-   })
+   const [files, tailwindVersion] = await Promise.all([
+      fg.glob(["**/*.css", "**/*.scss"], {
+         cwd,
+         deep: 5,
+         ignore: PROJECT_SHARED_IGNORE,
+      }),
+      getTailwindVersion(cwd),
+   ])
 
    if (!files.length) {
       return null
    }
 
+   const needle =
+      tailwindVersion === "v4" ? `@import "tailwindcss"` : "@tailwind base"
    for (const file of files) {
-      const contents = await fs.readFile(path.resolve(cwd, file), 'utf8')
-      // Assume that if the file contains `@tailwind base` it's the main css file.
-      if (contents.includes('@tailwind base')) {
+      const contents = await fs.readFile(path.resolve(cwd, file), "utf8")
+      if (
+         contents.includes(`@import "tailwindcss"`) ||
+         contents.includes(`@import 'tailwindcss'`) ||
+         contents.includes(`@tailwind base`)
+      ) {
          return file
       }
    }
@@ -147,7 +183,7 @@ export async function getTailwindCssFile(cwd: string) {
 }
 
 export async function getTailwindConfigFile(cwd: string) {
-   const files = await fg.glob('tailwind.config.*', {
+   const files = await fg.glob("tailwind.config.*", {
       cwd,
       deep: 3,
       ignore: PROJECT_SHARED_IGNORE,
@@ -164,8 +200,8 @@ export async function getTsConfigAliasPrefix(cwd: string) {
    const tsConfig = await loadConfig(cwd)
 
    if (
-      tsConfig?.resultType === 'failed'
-      || !Object.entries(tsConfig?.paths).length
+      tsConfig?.resultType === "failed" ||
+      !Object.entries(tsConfig?.paths).length
    ) {
       return null
    }
@@ -173,21 +209,21 @@ export async function getTsConfigAliasPrefix(cwd: string) {
    // This assume that the first alias is the prefix.
    for (const [alias, paths] of Object.entries(tsConfig.paths)) {
       if (
-         paths.includes('./*')
-         || paths.includes('./src/*')
-         || paths.includes('./app/*')
-         || paths.includes('./resources/js/*') // Laravel.
+         paths.includes("./*") ||
+         paths.includes("./src/*") ||
+         paths.includes("./app/*") ||
+         paths.includes("./resources/js/*") // Laravel.
       ) {
-         return alias.replace(/\/\*$/, '') ?? null
+         return alias.replace(/\/\*$/, "") ?? null
       }
    }
 
    // Use the first alias as the prefix.
-   return Object.keys(tsConfig?.paths)?.[0].replace(/\/\*$/, '') ?? null
+   return Object.keys(tsConfig?.paths)?.[0].replace(/\/\*$/, "") ?? null
 }
 
 export async function isTypeScriptProject(cwd: string) {
-   const files = await fg.glob('tsconfig.*', {
+   const files = await fg.glob("tsconfig.*", {
       cwd,
       deep: 1,
       ignore: PROJECT_SHARED_IGNORE,
@@ -198,9 +234,9 @@ export async function isTypeScriptProject(cwd: string) {
 
 export async function getTsConfig(cwd: string) {
    for (const fallback of [
-      'tsconfig.json',
-      'tsconfig.web.json',
-      'tsconfig.app.json',
+      "tsconfig.json",
+      "tsconfig.web.json",
+      "tsconfig.app.json",
    ]) {
       const filePath = path.resolve(cwd, fallback)
       if (!(await fs.pathExists(filePath))) {
@@ -208,8 +244,8 @@ export async function getTsConfig(cwd: string) {
       }
 
       // We can't use fs.readJSON because it doesn't support comments.
-      const contents = await fs.readFile(filePath, 'utf8')
-      const cleanedContents = contents.replace(/\/\*\s*\*\//g, '')
+      const contents = await fs.readFile(filePath, "utf8")
+      const cleanedContents = contents.replace(/\/\*\s*\*\//g, "")
       const result = TS_CONFIG_SCHEMA.safeParse(JSON.parse(cleanedContents))
 
       if (result.error) {
@@ -239,26 +275,26 @@ export async function getProjectConfig(
    }
 
    if (
-      !projectInfo
-      || !projectInfo.tailwindConfigFile
-      || !projectInfo.tailwindCssFile
+      !projectInfo ||
+      !projectInfo.tailwindCssFile ||
+      (projectInfo.tailwindVersion === "v3" && !projectInfo.tailwindConfigFile)
    ) {
       return null
    }
 
    const config: RawConfig = {
-      $schema: 'https://nyxbui.design/schema.json',
+      $schema: "https://nyxbui.design/schema.json",
       rsc: projectInfo.isRSC,
       tsx: projectInfo.isTsx,
-      style: 'miami',
+      style: "miami",
       tailwind: {
-         config: projectInfo.tailwindConfigFile,
-         baseColor: 'zinc',
+         config: projectInfo.tailwindConfigFile ?? "",
+         baseColor: "zinc",
          css: projectInfo.tailwindCssFile,
          cssVariables: true,
-         prefix: '',
+         prefix: "",
       },
-      iconLibrary: 'lucide',
+      iconLibrary: "lucide",
       aliases: {
          components: `${projectInfo.aliasPrefix}/components`,
          ui: `${projectInfo.aliasPrefix}/components/ui`,
@@ -270,3 +306,19 @@ export async function getProjectConfig(
 
    return await resolveConfigPaths(cwd, config)
 }
+
+export async function getProjectTailwindVersionFromConfig(
+   config: Config,
+): Promise<TailwindVersion> {
+   if (!config.resolvedPaths.cwd) {
+      return "v3"
+   }
+
+   const projectInfo = await getProjectInfo(config.resolvedPaths.cwd)
+
+   if (!projectInfo?.tailwindVersion) {
+      return null
+   }
+
+   return projectInfo.tailwindVersion
+}
diff --git a/packages/nyxb/src/utils/handle-error.ts b/packages/nyxb/src/utils/handle-error.ts
index 3dc340f8..df4c8ce4 100644
--- a/packages/nyxb/src/utils/handle-error.ts
+++ b/packages/nyxb/src/utils/handle-error.ts
@@ -1,21 +1,21 @@
-import { z } from 'zod'
-import { highlighter } from '~/src/utils/highlighter'
-import { logger } from '~/src/utils/logger'
+import { z } from "zod"
+import { highlighter } from "~/src/utils/highlighter"
+import { logger } from "~/src/utils/logger"
 
 export function handleError(error: unknown) {
    logger.error(
-    `Something went wrong. Please check the error below for more details.`,
+      `Something went wrong. Please check the error below for more details.`,
    )
    logger.error(`If the problem persists, please open an issue on GitHub.`)
-   logger.error('')
-   if (typeof error === 'string') {
+   logger.error("")
+   if (typeof error === "string") {
       logger.error(error)
       logger.break()
       process.exit(1)
    }
 
    if (error instanceof z.ZodError) {
-      logger.error('Validation failed:')
+      logger.error("Validation failed:")
       for (const [key, value] of Object.entries(error.flatten().fieldErrors)) {
          logger.error(`- ${highlighter.info(key)}: ${value}`)
       }
diff --git a/packages/nyxb/src/utils/highlighter.ts b/packages/nyxb/src/utils/highlighter.ts
index 37c43bc0..75c99080 100644
--- a/packages/nyxb/src/utils/highlighter.ts
+++ b/packages/nyxb/src/utils/highlighter.ts
@@ -1,4 +1,4 @@
-import { cyan, green, red, yellow } from 'kleur/colors'
+import { cyan, green, red, yellow } from "kleur/colors"
 
 export const highlighter = {
    error: red,
diff --git a/packages/nyxb/src/utils/icon-libraries.ts b/packages/nyxb/src/utils/icon-libraries.ts
index 8edb9796..d0c30fcb 100644
--- a/packages/nyxb/src/utils/icon-libraries.ts
+++ b/packages/nyxb/src/utils/icon-libraries.ts
@@ -1,12 +1,12 @@
 export const ICON_LIBRARIES = {
-   lucide: {
-      name: 'lucide-react',
-      package: 'lucide-react',
-      import: 'lucide-react',
-   },
-   radix: {
-      name: '@radix-ui/react-icons',
-      package: '@radix-ui/react-icons',
-      import: '@radix-ui/react-icons',
-   },
+  lucide: {
+    name: "lucide-react",
+    package: "lucide-react",
+    import: "lucide-react",
+  },
+  radix: {
+    name: "@radix-ui/react-icons",
+    package: "@radix-ui/react-icons",
+    import: "@radix-ui/react-icons",
+  },
 }
diff --git a/packages/nyxb/src/utils/logger.ts b/packages/nyxb/src/utils/logger.ts
index 79c3be65..4a80c8fa 100644
--- a/packages/nyxb/src/utils/logger.ts
+++ b/packages/nyxb/src/utils/logger.ts
@@ -1,23 +1,22 @@
-/* eslint-disable no-console */
-import { highlighter } from '~/src/utils/highlighter'
+import { highlighter } from "~/src/utils/highlighter"
 
 export const logger = {
    error(...args: unknown[]) {
-      console.log(highlighter.error(args.join(' ')))
+      console.log(highlighter.error(args.join(" ")))
    },
    warn(...args: unknown[]) {
-      console.log(highlighter.warn(args.join(' ')))
+      console.log(highlighter.warn(args.join(" ")))
    },
    info(...args: unknown[]) {
-      console.log(highlighter.info(args.join(' ')))
+      console.log(highlighter.info(args.join(" ")))
    },
    success(...args: unknown[]) {
-      console.log(highlighter.success(args.join(' ')))
+      console.log(highlighter.success(args.join(" ")))
    },
    log(...args: unknown[]) {
-      console.log(args.join(' '))
+      console.log(args.join(" "))
    },
    break() {
-      console.log('')
+      console.log("")
    },
 }
diff --git a/packages/nyxb/src/utils/registry/index.ts b/packages/nyxb/src/utils/registry/index.ts
deleted file mode 100644
index 6cc872de..00000000
--- a/packages/nyxb/src/utils/registry/index.ts
+++ /dev/null
@@ -1,468 +0,0 @@
-import path from 'path'
-import deepmerge from 'deepmerge'
-import { HttpsProxyAgent } from 'https-proxy-agent'
-import fetch from 'node-fetch'
-import { z } from 'zod'
-import type { Config } from '~/src/utils/get-config'
-import { handleError } from '~/src/utils/handle-error'
-import { highlighter } from '~/src/utils/highlighter'
-import { logger } from '~/src/utils/logger'
-import type {
-   registryItemFileSchema,
-} from '~/src/utils/registry/schema'
-import {
-   iconsSchema,
-   registryBaseColorSchema,
-   registryIndexSchema,
-   registryItemSchema,
-   registryResolvedItemsTreeSchema,
-   stylesSchema,
-} from '~/src/utils/registry/schema'
-import { buildTailwindThemeColorsFromCssVars } from '~/src/utils/updaters/update-tailwind-config'
-
-const REGISTRY_URL = process.env.REGISTRY_URL ?? 'https://nyxbui.design/r'
-
-const agent = process.env.https_proxy
-   ? new HttpsProxyAgent(process.env.https_proxy)
-   : undefined
-
-export async function getRegistryIndex() {
-   try {
-      const [result] = await fetchRegistry(['index.json'])
-
-      return registryIndexSchema.parse(result)
-   }
-   catch (error) {
-      logger.error('\n')
-      handleError(error)
-   }
-}
-
-export async function getRegistryStyles() {
-   try {
-      const [result] = await fetchRegistry(['styles/index.json'])
-
-      return stylesSchema.parse(result)
-   }
-   catch (error) {
-      logger.error('\n')
-      handleError(error)
-      return []
-   }
-}
-
-export async function getRegistryIcons() {
-   try {
-      const [result] = await fetchRegistry(['icons/index.json'])
-      return iconsSchema.parse(result)
-   }
-   catch (error) {
-      handleError(error)
-      return {}
-   }
-}
-
-export async function getRegistryItem(name: string, style: string) {
-   try {
-      const [result] = await fetchRegistry([
-         isUrl(name) ? name : `styles/${style}/${name}.json`,
-      ])
-
-      return registryItemSchema.parse(result)
-   }
-   catch (error) {
-      logger.break()
-      handleError(error)
-      return null
-   }
-}
-
-export async function getRegistryBaseColors() {
-   return [
-      {
-         name: 'neutral',
-         label: 'Neutral',
-      },
-      {
-         name: 'gray',
-         label: 'Gray',
-      },
-      {
-         name: 'zinc',
-         label: 'Zinc',
-      },
-      {
-         name: 'stone',
-         label: 'Stone',
-      },
-      {
-         name: 'slate',
-         label: 'Slate',
-      },
-   ]
-}
-
-export async function getRegistryBaseColor(baseColor: string) {
-   try {
-      const [result] = await fetchRegistry([`colors/${baseColor}.json`])
-
-      return registryBaseColorSchema.parse(result)
-   }
-   catch (error) {
-      handleError(error)
-   }
-}
-
-export async function resolveTree(
-   index: z.infer<typeof registryIndexSchema>,
-   names: string[],
-) {
-   const tree: z.infer<typeof registryIndexSchema> = []
-
-   for (const name of names) {
-      const entry = index.find(entry => entry.name === name)
-
-      if (!entry) {
-         continue
-      }
-
-      tree.push(entry)
-
-      if (entry.registryDependencies) {
-         const dependencies = await resolveTree(index, entry.registryDependencies)
-         tree.push(...dependencies)
-      }
-   }
-
-   return tree.filter(
-      (component, index, self) =>
-         self.findIndex(c => c.name === component.name) === index,
-   )
-}
-
-export async function fetchTree(
-   style: string,
-   tree: z.infer<typeof registryIndexSchema>,
-) {
-   try {
-      const paths = tree.map(item => `styles/${style}/${item.name}.json`)
-      const result = await fetchRegistry(paths)
-      return registryIndexSchema.parse(result)
-   }
-   catch (error) {
-      handleError(error)
-   }
-}
-
-export async function getItemTargetPath(
-   config: Config,
-   item: Pick<z.infer<typeof registryItemSchema>, 'type'>,
-   override?: string,
-) {
-   if (override) {
-      return override
-   }
-
-   if (item.type === 'registry:ui') {
-      return config.resolvedPaths.ui ?? config.resolvedPaths.components
-   }
-
-   const [parent, type] = item.type?.split(':') ?? []
-   if (!(parent in config.resolvedPaths)) {
-      return null
-   }
-
-   return path.join(
-      config.resolvedPaths[parent as keyof typeof config.resolvedPaths],
-      type,
-   )
-}
-
-async function fetchRegistry(paths: string[]) {
-   try {
-      const results = await Promise.all(
-         paths.map(async (path) => {
-            const url = getRegistryUrl(path)
-            const response = await fetch(url, { agent })
-
-            if (!response.ok) {
-               const errorMessages: { [key: number]: string } = {
-                  400: 'Bad request',
-                  401: 'Unauthorized',
-                  403: 'Forbidden',
-                  404: 'Not found',
-                  500: 'Internal server error',
-               }
-
-               if (response.status === 401) {
-                  throw new Error(
-              `You are not authorized to access the component at ${highlighter.info(
-                url,
-              )}.\nIf this is a remote registry, you may need to authenticate.`,
-                  )
-               }
-
-               if (response.status === 404) {
-                  throw new Error(
-              `The component at ${highlighter.info(
-                url,
-              )} was not found.\nIt may not exist at the registry. Please make sure it is a valid component.`,
-                  )
-               }
-
-               if (response.status === 403) {
-                  throw new Error(
-              `You do not have access to the component at ${highlighter.info(
-                url,
-              )}.\nIf this is a remote registry, you may need to authenticate or a token.`,
-                  )
-               }
-
-               const result = await response.json()
-               const message
-            = result && typeof result === 'object' && 'error' in result
-               ? result.error
-               : response.statusText || errorMessages[response.status]
-               throw new Error(
-            `Failed to fetch from ${highlighter.info(url)}.\n${message}`,
-               )
-            }
-
-            return response.json()
-         }),
-      )
-
-      return results
-   }
-   catch (error) {
-      logger.error('\n')
-      handleError(error)
-      return []
-   }
-}
-
-export function getRegistryItemFileTargetPath(
-   file: z.infer<typeof registryItemFileSchema>,
-   config: Config,
-   override?: string,
-) {
-   if (override) {
-      return override
-   }
-
-   if (file.type === 'registry:ui') {
-      return config.resolvedPaths.ui
-   }
-
-   if (file.type === 'registry:lib') {
-      return config.resolvedPaths.lib
-   }
-
-   if (file.type === 'registry:block' || file.type === 'registry:component') {
-      return config.resolvedPaths.components
-   }
-
-   if (file.type === 'registry:hook') {
-      return config.resolvedPaths.hooks
-   }
-
-   // TODO: we put this in components for now.
-   // We should move this to pages as per framework.
-   if (file.type === 'registry:page') {
-      return config.resolvedPaths.components
-   }
-
-   return config.resolvedPaths.components
-}
-
-export async function registryResolveItemsTree(
-   names: z.infer<typeof registryItemSchema>['name'][],
-   config: Config,
-) {
-   try {
-      const index = await getRegistryIndex()
-      if (!index) {
-         return null
-      }
-
-      // If we're resolving the index, we want it to go first.
-      if (names.includes('index')) {
-         names.unshift('index')
-      }
-
-      const registryDependencies: string[] = []
-      for (const name of names) {
-         const itemRegistryDependencies = await resolveRegistryDependencies(
-            name,
-            config,
-         )
-         registryDependencies.push(...itemRegistryDependencies)
-      }
-
-      const uniqueRegistryDependencies = Array.from(new Set(registryDependencies))
-      const result = await fetchRegistry(uniqueRegistryDependencies)
-      const payload = z.array(registryItemSchema).parse(result)
-
-      if (!payload) {
-         return null
-      }
-
-      // If we're resolving the index, we want to fetch
-      // the theme item if a base color is provided.
-      // We do this for index only.
-      // Other components will ship with their theme tokens.
-      if (names.includes('index')) {
-         if (config.tailwind.baseColor) {
-            const theme = await registryGetTheme(config.tailwind.baseColor, config)
-            if (theme) {
-               payload.unshift(theme)
-            }
-         }
-      }
-
-      let tailwind = {}
-      payload.forEach((item) => {
-         tailwind = deepmerge(tailwind, item.tailwind ?? {})
-      })
-
-      let cssVars = {}
-      payload.forEach((item) => {
-         cssVars = deepmerge(cssVars, item.cssVars ?? {})
-      })
-
-      let docs = ''
-      payload.forEach((item) => {
-         if (item.docs) {
-            docs += `${item.docs}\n`
-         }
-      })
-
-      return registryResolvedItemsTreeSchema.parse({
-         dependencies: deepmerge.all(
-            payload.map(item => item.dependencies ?? []),
-         ),
-         devDependencies: deepmerge.all(
-            payload.map(item => item.devDependencies ?? []),
-         ),
-         files: deepmerge.all(payload.map(item => item.files ?? [])),
-         tailwind,
-         cssVars,
-         docs,
-      })
-   }
-   catch (error) {
-      handleError(error)
-      return null
-   }
-}
-
-async function resolveRegistryDependencies(
-   url: string,
-   config: Config,
-): Promise<string[]> {
-   const visited = new Set<string>()
-   const payload: string[] = []
-
-   async function resolveDependencies(itemUrl: string) {
-      const url = getRegistryUrl(
-         isUrl(itemUrl) ? itemUrl : `styles/${config.style}/${itemUrl}.json`,
-      )
-
-      if (visited.has(url)) {
-         return
-      }
-
-      visited.add(url)
-
-      try {
-         const [result] = await fetchRegistry([url])
-         const item = registryItemSchema.parse(result)
-         payload.push(url)
-
-         if (item.registryDependencies) {
-            for (const dependency of item.registryDependencies) {
-               await resolveDependencies(dependency)
-            }
-         }
-      }
-      catch (error) {
-         console.error(
-        `Error fetching or parsing registry item at ${itemUrl}:`,
-        error,
-         )
-      }
-   }
-
-   await resolveDependencies(url)
-   return Array.from(new Set(payload))
-}
-
-export async function registryGetTheme(name: string, config: Config) {
-   const baseColor = await getRegistryBaseColor(name)
-   if (!baseColor) {
-      return null
-   }
-
-   // TODO: Move this to the registry i.e registry:theme.
-   const theme = {
-      name,
-      type: 'registry:theme',
-      tailwind: {
-         config: {
-            theme: {
-               extend: {
-                  borderRadius: {
-                     lg: 'var(--radius)',
-                     md: 'calc(var(--radius) - 2px)',
-                     sm: 'calc(var(--radius) - 4px)',
-                  },
-                  colors: {},
-               },
-            },
-         },
-      },
-      cssVars: {
-         light: {
-            radius: '0.5rem',
-         },
-         dark: {},
-      },
-   } satisfies z.infer<typeof registryItemSchema>
-
-   if (config.tailwind.cssVariables) {
-      theme.tailwind.config.theme.extend.colors = {
-         ...theme.tailwind.config.theme.extend.colors,
-         ...buildTailwindThemeColorsFromCssVars(baseColor.cssVars.dark),
-      }
-      theme.cssVars = {
-         light: {
-            ...baseColor.cssVars.light,
-            ...theme.cssVars.light,
-         },
-         dark: {
-            ...baseColor.cssVars.dark,
-            ...theme.cssVars.dark,
-         },
-      }
-   }
-
-   return theme
-}
-
-function getRegistryUrl(path: string) {
-   if (isUrl(path))
-      return path
-
-   return `${REGISTRY_URL}/${path}`
-}
-
-function isUrl(path: string) {
-   try {
-      // eslint-disable-next-line no-new
-      new URL(path)
-      return true
-   }
-   catch (error) {
-      return false
-   }
-}
diff --git a/packages/nyxb/src/utils/registry/schema.ts b/packages/nyxb/src/utils/registry/schema.ts
deleted file mode 100644
index fcebf385..00000000
--- a/packages/nyxb/src/utils/registry/schema.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { z } from 'zod'
-
-// TODO: Extract this to a shared package.
-export const registryItemTypeSchema = z.enum([
-   'registry:style',
-   'registry:lib',
-   'registry:example',
-   'registry:block',
-   'registry:component',
-   'registry:ui',
-   'registry:hook',
-   'registry:theme',
-   'registry:page',
-])
-
-export const registryItemFileSchema = z.object({
-   path: z.string(),
-   content: z.string().optional(),
-   type: registryItemTypeSchema,
-   target: z.string().optional(),
-})
-
-export const registryItemTailwindSchema = z.object({
-   config: z
-      .object({
-         content: z.array(z.string()).optional(),
-         theme: z.record(z.string(), z.any()).optional(),
-         plugins: z.array(z.string()).optional(),
-      })
-      .optional(),
-})
-
-export const registryItemCssVarsSchema = z.object({
-   light: z.record(z.string(), z.string()).optional(),
-   dark: z.record(z.string(), z.string()).optional(),
-})
-
-export const registryItemSchema = z.object({
-   name: z.string(),
-   type: registryItemTypeSchema,
-   description: z.string().optional(),
-   dependencies: z.array(z.string()).optional(),
-   devDependencies: z.array(z.string()).optional(),
-   registryDependencies: z.array(z.string()).optional(),
-   files: z.array(registryItemFileSchema).optional(),
-   tailwind: registryItemTailwindSchema.optional(),
-   cssVars: registryItemCssVarsSchema.optional(),
-   meta: z.record(z.string(), z.any()).optional(),
-   docs: z.string().optional(),
-})
-
-export type RegistryItem = z.infer<typeof registryItemSchema>
-
-export const registryIndexSchema = z.array(
-   registryItemSchema.extend({
-      files: z.array(z.union([z.string(), registryItemFileSchema])).optional(),
-   }),
-)
-
-export const stylesSchema = z.array(
-   z.object({
-      name: z.string(),
-      label: z.string(),
-   }),
-)
-
-export const iconsSchema = z.record(
-   z.string(),
-   z.record(z.string(), z.string()),
-)
-
-export const registryBaseColorSchema = z.object({
-   inlineColors: z.object({
-      light: z.record(z.string(), z.string()),
-      dark: z.record(z.string(), z.string()),
-   }),
-   cssVars: z.object({
-      light: z.record(z.string(), z.string()),
-      dark: z.record(z.string(), z.string()),
-   }),
-   inlineColorsTemplate: z.string(),
-   cssVarsTemplate: z.string(),
-})
-
-export const registryResolvedItemsTreeSchema = registryItemSchema.pick({
-   dependencies: true,
-   devDependencies: true,
-   files: true,
-   tailwind: true,
-   cssVars: true,
-   docs: true,
-})
diff --git a/packages/nyxb/src/utils/resolve-import.ts b/packages/nyxb/src/utils/resolve-import.ts
index 5a3b0ca0..c48d8586 100644
--- a/packages/nyxb/src/utils/resolve-import.ts
+++ b/packages/nyxb/src/utils/resolve-import.ts
@@ -1,13 +1,13 @@
-import { type ConfigLoaderSuccessResult, createMatchPath } from 'tsconfig-paths'
+import { type ConfigLoaderSuccessResult, createMatchPath } from "tsconfig-paths"
 
 export async function resolveImport(
    importPath: string,
-   config: Pick<ConfigLoaderSuccessResult, 'absoluteBaseUrl' | 'paths'>,
+   config: Pick<ConfigLoaderSuccessResult, "absoluteBaseUrl" | "paths">,
 ) {
    return createMatchPath(config.absoluteBaseUrl, config.paths)(
       importPath,
       undefined,
       () => true,
-      ['.ts', '.tsx'],
+      [".ts", ".tsx"],
    )
 }
diff --git a/packages/nyxb/src/utils/spinner.ts b/packages/nyxb/src/utils/spinner.ts
index 11579269..c3563166 100644
--- a/packages/nyxb/src/utils/spinner.ts
+++ b/packages/nyxb/src/utils/spinner.ts
@@ -1,7 +1,7 @@
-import ora, { type Options } from 'ora'
+import ora, { type Options } from "ora"
 
 export function spinner(
-   text: Options['text'],
+   text: Options["text"],
    options?: {
       silent?: boolean
    },
diff --git a/packages/nyxb/src/utils/templates.ts b/packages/nyxb/src/utils/templates.ts
index 7db3e387..73f1f3e9 100644
--- a/packages/nyxb/src/utils/templates.ts
+++ b/packages/nyxb/src/utils/templates.ts
@@ -180,7 +180,7 @@ const config = {
     './components/**/*.{<%- extension %>,<%- extension %>x}',
     './app/**/*.{<%- extension %>,<%- extension %>x}',
     './src/**/*.{<%- extension %>,<%- extension %>x}',
-   ],
+	],
   prefix: "<%- prefix %>",
   theme: {
     container: {
diff --git a/packages/nyxb/src/utils/transformers/index.ts b/packages/nyxb/src/utils/transformers/index.ts
index 47cc047a..faaae967 100644
--- a/packages/nyxb/src/utils/transformers/index.ts
+++ b/packages/nyxb/src/utils/transformers/index.ts
@@ -1,29 +1,31 @@
-import { promises as fs } from 'fs'
-import { tmpdir } from 'os'
-import path from 'path'
-import { Project, ScriptKind, type SourceFile } from 'ts-morph'
-import type { z } from 'zod'
-import { transformTwPrefixes } from './transform-tw-prefix'
-import type { Config } from '~/src/utils/get-config'
-import type { registryBaseColorSchema } from '~/src/utils/registry/schema'
-import { transformCssVars } from '~/src/utils/transformers/transform-css-vars'
-import { transformIcons } from '~/src/utils/transformers/transform-icons'
-import { transformImport } from '~/src/utils/transformers/transform-import'
-import { transformJsx } from '~/src/utils/transformers/transform-jsx'
-import { transformRsc } from '~/src/utils/transformers/transform-rsc'
+import { promises as fs } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import { Project, ScriptKind, type SourceFile } from "ts-morph"
+import type { z } from "zod"
+import type { registryBaseColorSchema } from "~/src/registry/schema"
+import type { Config } from "~/src/utils/get-config"
+import { transformCssVars } from "~/src/utils/transformers/transform-css-vars"
+import { transformIcons } from "~/src/utils/transformers/transform-icons"
+import { transformImport } from "~/src/utils/transformers/transform-import"
+import { transformJsx } from "~/src/utils/transformers/transform-jsx"
+import { transformRsc } from "~/src/utils/transformers/transform-rsc"
 
-export interface TransformOpts {
+import { transformTwPrefixes } from "./transform-tw-prefix"
+
+export type TransformOpts = {
    filename: string
    raw: string
    config: Config
    baseColor?: z.infer<typeof registryBaseColorSchema>
    transformJsx?: boolean
+   isRemote?: boolean
 }
 
 export type Transformer<Output = SourceFile> = (
    opts: TransformOpts & {
       sourceFile: SourceFile
-   }
+   },
 ) => Promise<Output>
 
 const project = new Project({
@@ -31,7 +33,7 @@ const project = new Project({
 })
 
 async function createTempSourceFile(filename: string) {
-   const dir = await fs.mkdtemp(path.join(tmpdir(), 'nyxb-'))
+   const dir = await fs.mkdtemp(path.join(tmpdir(), "nyxb-"))
    return path.join(dir, filename)
 }
 
diff --git a/packages/nyxb/src/utils/transformers/transform-css-vars.ts b/packages/nyxb/src/utils/transformers/transform-css-vars.ts
index fa8e977e..1d440da7 100644
--- a/packages/nyxb/src/utils/transformers/transform-css-vars.ts
+++ b/packages/nyxb/src/utils/transformers/transform-css-vars.ts
@@ -1,7 +1,7 @@
-import { ScriptKind, SyntaxKind } from 'ts-morph'
-import type { z } from 'zod'
-import type { registryBaseColorSchema } from '~/src/utils/registry/schema'
-import type { Transformer } from '~/src/utils/transformers'
+import { ScriptKind, SyntaxKind } from "ts-morph"
+import type { z } from "zod"
+import type { registryBaseColorSchema } from "~/src/registry/schema"
+import type { Transformer } from "~/src/utils/transformers"
 
 export const transformCssVars: Transformer = async ({
    sourceFile,
@@ -34,7 +34,7 @@ export const transformCssVars: Transformer = async ({
       const value = node.getText()
       if (value) {
          const valueWithColorMapping = applyColorMapping(
-            value.replace(/"/g, ''),
+            value.replace(/"/g, ""),
             baseColor.inlineColors,
          )
          node.replaceWithText(`"${valueWithColorMapping.trim()}"`)
@@ -105,27 +105,27 @@ export const transformCssVars: Transformer = async ({
 // Splits a className into variant-name-alpha.
 // eg. hover:bg-primary-100 -> [hover, bg-primary, 100]
 export function splitClassName(className: string): (string | null)[] {
-   if (!className.includes('/') && !className.includes(':')) {
+   if (!className.includes("/") && !className.includes(":")) {
       return [null, className, null]
    }
 
    const parts: (string | null)[] = []
    // First we split to find the alpha.
-   const [rest, alpha] = className.split('/')
+   const [rest, alpha] = className.split("/")
 
    // Check if rest has a colon.
-   if (!rest.includes(':')) {
+   if (!rest.includes(":")) {
       return [null, rest, alpha]
    }
 
    // Next we split the rest by the colon.
-   const split = rest.split(':')
+   const split = rest.split(":")
 
    // We take the last item from the split as the name.
    const name = split.pop()
 
    // We glue back the rest of the split.
-   const variant = split.join(':')
+   const variant = split.join(":")
 
    // Finally we push the variant, name and alpha.
    parts.push(variant ?? null, name ?? null, alpha ?? null)
@@ -133,24 +133,24 @@ export function splitClassName(className: string): (string | null)[] {
    return parts
 }
 
-const PREFIXES = ['bg-', 'text-', 'border-', 'ring-offset-', 'ring-']
+const PREFIXES = ["bg-", "text-", "border-", "ring-offset-", "ring-"]
 
 export function applyColorMapping(
    input: string,
-   mapping: z.infer<typeof registryBaseColorSchema>['inlineColors'],
+   mapping: z.infer<typeof registryBaseColorSchema>["inlineColors"],
 ) {
    // Handle border classes.
-   if (input.includes(' border ')) {
-      input = input.replace(' border ', ' border border-border ')
+   if (input.includes(" border ")) {
+      input = input.replace(" border ", " border border-border ")
    }
 
    // Build color mappings.
-   const classNames = input.split(' ')
+   const classNames = input.split(" ")
    const lightMode = new Set<string>()
    const darkMode = new Set<string>()
    for (const className of classNames) {
       const [variant, value, modifier] = splitClassName(className)
-      const prefix = PREFIXES.find(prefix => value?.startsWith(prefix))
+      const prefix = PREFIXES.find((prefix) => value?.startsWith(prefix))
       if (!prefix) {
          if (!lightMode.has(className)) {
             lightMode.add(className)
@@ -158,18 +158,18 @@ export function applyColorMapping(
          continue
       }
 
-      const needle = value?.replace(prefix, '')
+      const needle = value?.replace(prefix, "")
       if (needle && needle in mapping.light) {
          lightMode.add(
             [variant, `${prefix}${mapping.light[needle]}`]
                .filter(Boolean)
-               .join(':') + (modifier ? `/${modifier}` : ''),
+               .join(":") + (modifier ? `/${modifier}` : ""),
          )
 
          darkMode.add(
-            ['dark', variant, `${prefix}${mapping.dark[needle]}`]
+            ["dark", variant, `${prefix}${mapping.dark[needle]}`]
                .filter(Boolean)
-               .join(':') + (modifier ? `/${modifier}` : ''),
+               .join(":") + (modifier ? `/${modifier}` : ""),
          )
          continue
       }
@@ -179,5 +179,5 @@ export function applyColorMapping(
       }
    }
 
-   return [...Array.from(lightMode), ...Array.from(darkMode)].join(' ').trim()
+   return [...Array.from(lightMode), ...Array.from(darkMode)].join(" ").trim()
 }
diff --git a/packages/nyxb/src/utils/transformers/transform-icons.test.ts b/packages/nyxb/src/utils/transformers/transform-icons.test.ts
index f7f956ad..7a9851f6 100644
--- a/packages/nyxb/src/utils/transformers/transform-icons.test.ts
+++ b/packages/nyxb/src/utils/transformers/transform-icons.test.ts
@@ -1,57 +1,58 @@
-import { describe, expect, it, vi } from 'vitest'
-import { transform } from '~/src/utils/transformers'
-import type { Config } from '~/src/utils/get-config'
-import { transformIcons } from '~/src/utils/transformers/transform-icons'
+import { describe, expect, test, vi } from "vitest"
+import type { Config } from "~/src/utils/get-config"
+import { transformIcons } from "~/src/utils/transformers/transform-icons"
+
+import { transform } from "../transformers"
 
 const testConfig: Config = {
-   style: 'miami',
+   style: "miami",
    tsx: true,
    rsc: true,
    tailwind: {
-      baseColor: 'neutral',
+      baseColor: "neutral",
       cssVariables: true,
-      config: 'tailwind.config.ts',
-      css: 'tailwind.css',
+      config: "tailwind.config.ts",
+      css: "tailwind.css",
    },
    aliases: {
-      components: '~/components',
-      utils: '~/lib/utils',
+      components: "~/components",
+      utils: "~/lib/utils",
    },
    resolvedPaths: {
-      cwd: '/',
-      components: '/components',
-      utils: '/lib/utils',
-      ui: '/ui',
-      lib: '/lib',
-      hooks: '/hooks',
-      tailwindConfig: 'tailwind.config.ts',
-      tailwindCss: 'tailwind.css',
+      cwd: "/",
+      components: "/components",
+      utils: "/lib/utils",
+      ui: "/ui",
+      lib: "/lib",
+      hooks: "/hooks",
+      tailwindConfig: "tailwind.config.ts",
+      tailwindCss: "tailwind.css",
    },
 }
 
-vi.mock('~/src/utils/registry', () => ({
+vi.mock("~/src/registry/api", () => ({
    getRegistryIcons: () => ({
       Check: {
-         lucide: 'Check',
-         radix: 'CheckIcon',
+         lucide: "Check",
+         radix: "CheckIcon",
       },
       ChevronDown: {
-         lucide: 'ChevronDown',
-         radix: 'ChevronDownIcon',
+         lucide: "ChevronDown",
+         radix: "ChevronDownIcon",
       },
       ChevronLeft: {
-         lucide: 'ChevronLeft',
-         radix: 'ChevronLeftIcon',
+         lucide: "ChevronLeft",
+         radix: "ChevronLeftIcon",
       },
    }),
 }))
 
-describe('transformIcons', () => {
-   it('transforms radix icons', async () => {
+describe("transformIcons", () => {
+   test("transforms radix icons", async () => {
       expect(
          await transform(
             {
-               filename: 'test.ts',
+               filename: "test.ts",
                raw: `import * as React from "react"
 import { Check } from "lucide-react"
 
@@ -61,7 +62,7 @@ return <div><Check /></div>
   `,
                config: {
                   ...testConfig,
-                  iconLibrary: 'radix',
+                  iconLibrary: "radix",
                },
             },
             [transformIcons],
@@ -77,11 +78,11 @@ return <div><Check /></div>
     `)
    })
 
-   it('does not transform lucide icons', async () => {
+   test("does not transform lucide icons", async () => {
       expect(
          await transform(
             {
-               filename: 'test.ts',
+               filename: "test.ts",
                raw: `import * as React from "react"
 import { Check } from "lucide-react"
 
@@ -91,7 +92,7 @@ export function Component() {
     `,
                config: {
                   ...testConfig,
-                  iconLibrary: 'lucide',
+                  iconLibrary: "lucide",
                },
             },
             [transformIcons],
@@ -107,11 +108,11 @@ export function Component() {
     `)
    })
 
-   it('preserves semicolon', async () => {
+   test("preserves semicolon", async () => {
       expect(
          await transform(
             {
-               filename: 'test.ts',
+               filename: "test.ts",
                raw: `import * as React from "react";
 import { ChevronDown } from "lucide-react";
 
@@ -121,7 +122,7 @@ export function Component() {
     `,
                config: {
                   ...testConfig,
-                  iconLibrary: 'radix',
+                  iconLibrary: "radix",
                },
             },
             [transformIcons],
diff --git a/packages/nyxb/src/utils/transformers/transform-icons.ts b/packages/nyxb/src/utils/transformers/transform-icons.ts
index 41b08dff..ecc7bd54 100644
--- a/packages/nyxb/src/utils/transformers/transform-icons.ts
+++ b/packages/nyxb/src/utils/transformers/transform-icons.ts
@@ -1,11 +1,10 @@
-import type { SourceFile } from 'ts-morph'
-import { SyntaxKind } from 'ts-morph'
-import { ICON_LIBRARIES } from '~/src/utils/icon-libraries'
-import { getRegistryIcons } from '~/src/utils/registry'
-import type { Transformer } from '~/src/utils/transformers'
+import { type SourceFile, SyntaxKind } from "ts-morph"
+import { getRegistryIcons } from "~/src/registry/api"
+import { ICON_LIBRARIES } from "~/src/utils/icon-libraries"
+import type { Transformer } from "~/src/utils/transformers"
 
 // Lucide is the default icon library in the registry.
-const SOURCE_LIBRARY = 'lucide'
+const SOURCE_LIBRARY = "lucide"
 
 export const transformIcons: Transformer = async ({ sourceFile, config }) => {
    // No transform if we cannot read the icon library.
@@ -24,8 +23,8 @@ export const transformIcons: Transformer = async ({ sourceFile, config }) => {
    const targetedIcons: string[] = []
    for (const importDeclaration of sourceFile.getImportDeclarations() ?? []) {
       if (
-         importDeclaration.getModuleSpecifier()?.getText()
-         !== `"${ICON_LIBRARIES[SOURCE_LIBRARY].import}"`
+         importDeclaration.getModuleSpecifier()?.getText() !==
+         `"${ICON_LIBRARIES[SOURCE_LIBRARY].import}"`
       ) {
          continue
       }
@@ -47,8 +46,10 @@ export const transformIcons: Transformer = async ({ sourceFile, config }) => {
          // Replace with the targeted icon.
          sourceFile
             .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
-            .filter(node => node.getTagNameNode()?.getText() === iconName)
-            .forEach(node => node.getTagNameNode()?.replaceWithText(targetedIcon))
+            .filter((node) => node.getTagNameNode()?.getText() === iconName)
+            .forEach((node) =>
+               node.getTagNameNode()?.replaceWithText(targetedIcon),
+            )
       }
 
       // If the named import is empty, remove the import declaration.
@@ -60,15 +61,16 @@ export const transformIcons: Transformer = async ({ sourceFile, config }) => {
    if (targetedIcons.length > 0) {
       const iconImportDeclaration = sourceFile.addImportDeclaration({
          moduleSpecifier:
-        ICON_LIBRARIES[targetLibrary as keyof typeof ICON_LIBRARIES]?.import,
-         namedImports: targetedIcons.map(icon => ({
+            ICON_LIBRARIES[targetLibrary as keyof typeof ICON_LIBRARIES]
+               ?.import,
+         namedImports: targetedIcons.map((icon) => ({
             name: icon,
          })),
       })
 
       if (!_useSemicolon(sourceFile)) {
          iconImportDeclaration.replaceWithText(
-            iconImportDeclaration.getText().replace(';', ''),
+            iconImportDeclaration.getText().replace(";", ""),
          )
       }
    }
@@ -78,6 +80,6 @@ export const transformIcons: Transformer = async ({ sourceFile, config }) => {
 
 function _useSemicolon(sourceFile: SourceFile) {
    return (
-      sourceFile.getImportDeclarations()?.[0]?.getText().endsWith(';') ?? false
+      sourceFile.getImportDeclarations()?.[0]?.getText().endsWith(";") ?? false
    )
 }
diff --git a/packages/nyxb/src/utils/transformers/transform-import.ts b/packages/nyxb/src/utils/transformers/transform-import.ts
index 0e3de457..1c42ba09 100644
--- a/packages/nyxb/src/utils/transformers/transform-import.ts
+++ b/packages/nyxb/src/utils/transformers/transform-import.ts
@@ -1,24 +1,41 @@
-import type { Config } from '~/src/utils/get-config'
-import type { Transformer } from '~/src/utils/transformers'
+import type { Config } from "~/src/utils/get-config"
+import type { Transformer } from "~/src/utils/transformers"
 
-export const transformImport: Transformer = async ({ sourceFile, config }) => {
+const COMMON_CN_IMPORTS = {
+   "~/lib/utils": /^~\/lib\/utils/,
+   "@workspace/lib/utils": /^@workspace\/lib\/utils/,
+}
+
+export const transformImport: Transformer = async ({
+   sourceFile,
+   config,
+   isRemote,
+}) => {
    const importDeclarations = sourceFile.getImportDeclarations()
 
    for (const importDeclaration of importDeclarations) {
       const moduleSpecifier = updateImportAliases(
          importDeclaration.getModuleSpecifierValue(),
          config,
+         isRemote,
       )
 
       importDeclaration.setModuleSpecifier(moduleSpecifier)
 
       // Replace `import { ny } from "~/lib/utils"`
-      if (moduleSpecifier === '~/lib/utils') {
+      if (
+         COMMON_CN_IMPORTS[moduleSpecifier as keyof typeof COMMON_CN_IMPORTS]
+      ) {
          const namedImports = importDeclaration.getNamedImports()
-         const cnImport = namedImports.find(i => i.getName() === 'ny')
+         const cnImport = namedImports.find((i) => i.getName() === "ny")
          if (cnImport) {
             importDeclaration.setModuleSpecifier(
-               moduleSpecifier.replace(/^~\/lib\/utils/, config.aliases.utils),
+               moduleSpecifier.replace(
+                  COMMON_CN_IMPORTS[
+                     moduleSpecifier as keyof typeof COMMON_CN_IMPORTS
+                  ],
+                  config.aliases.utils,
+               ),
             )
          }
       }
@@ -27,16 +44,25 @@ export const transformImport: Transformer = async ({ sourceFile, config }) => {
    return sourceFile
 }
 
-function updateImportAliases(moduleSpecifier: string, config: Config) {
+function updateImportAliases(
+   moduleSpecifier: string,
+   config: Config,
+   isRemote = false,
+) {
    // Not a local import.
-   if (!moduleSpecifier.startsWith('~/')) {
+   if (!moduleSpecifier.startsWith("~/") && !isRemote) {
       return moduleSpecifier
    }
 
+   // This treats the remote as coming from a faux registry.
+   if (isRemote && moduleSpecifier.startsWith("~/")) {
+      moduleSpecifier = moduleSpecifier.replace(/^~\//, `~/registry/miami/`)
+   }
+
    // Not a registry import.
-   if (!moduleSpecifier.startsWith('~/registry/')) {
+   if (!moduleSpecifier.startsWith("~/registry/")) {
       // We fix the alias and return.
-      const alias = config.aliases.components.split('/')[0]
+      const alias = config.aliases.components.split("/")[0]
       return moduleSpecifier.replace(/^~\//, `${alias}/`)
    }
 
@@ -48,8 +74,8 @@ function updateImportAliases(moduleSpecifier: string, config: Config) {
    }
 
    if (
-      config.aliases.components
-      && moduleSpecifier.match(/^~\/registry\/(.+)\/components/)
+      config.aliases.components &&
+      moduleSpecifier.match(/^~\/registry\/(.+)\/components/)
    ) {
       return moduleSpecifier.replace(
          /^~\/registry\/(.+)\/components/,
@@ -65,8 +91,8 @@ function updateImportAliases(moduleSpecifier: string, config: Config) {
    }
 
    if (
-      config.aliases.hooks
-      && moduleSpecifier.match(/^~\/registry\/(.+)\/hooks/)
+      config.aliases.hooks &&
+      moduleSpecifier.match(/^~\/registry\/(.+)\/hooks/)
    ) {
       return moduleSpecifier.replace(
          /^~\/registry\/(.+)\/hooks/,
diff --git a/packages/nyxb/src/utils/transformers/transform-jsx.ts b/packages/nyxb/src/utils/transformers/transform-jsx.ts
index 040179a9..ee34363f 100644
--- a/packages/nyxb/src/utils/transformers/transform-jsx.ts
+++ b/packages/nyxb/src/utils/transformers/transform-jsx.ts
@@ -1,10 +1,9 @@
-import { transformFromAstSync } from '@babel/core'
-import type { ParserOptions } from '@babel/parser'
-import { parse } from '@babel/parser'
-// @ts-expect-error babel plugin typescript is not typed
-import transformTypescript from '@babel/plugin-transform-typescript'
-import * as recast from 'recast'
-import type { Transformer } from '~/src/utils/transformers'
+import { transformFromAstSync } from "@babel/core"
+import { type ParserOptions, parse } from "@babel/parser"
+// @ts-ignore
+import transformTypescript from "@babel/plugin-transform-typescript"
+import * as recast from "recast"
+import type { Transformer } from "~/src/utils/transformers"
 
 // TODO.
 // I'm using recast for the AST here.
@@ -15,50 +14,50 @@ import type { Transformer } from '~/src/utils/transformers'
 // We want to be able to parse any valid tsx code.
 // See https://github.com/benjamn/recast/blob/master/parsers/_babel_options.ts.
 const PARSE_OPTIONS: ParserOptions = {
-   sourceType: 'module',
+   sourceType: "module",
    allowImportExportEverywhere: true,
    allowReturnOutsideFunction: true,
    startLine: 1,
    tokens: true,
    plugins: [
-      'asyncGenerators',
-      'bigInt',
-      'classPrivateMethods',
-      'classPrivateProperties',
-      'classProperties',
-      'classStaticBlock',
-      'decimal',
-      'decorators-legacy',
-      'doExpressions',
-      'dynamicImport',
-      'exportDefaultFrom',
-      'exportNamespaceFrom',
-      'functionBind',
-      'functionSent',
-      'importAssertions',
-      'importMeta',
-      'nullishCoalescingOperator',
-      'numericSeparator',
-      'objectRestSpread',
-      'optionalCatchBinding',
-      'optionalChaining',
+      "asyncGenerators",
+      "bigInt",
+      "classPrivateMethods",
+      "classPrivateProperties",
+      "classProperties",
+      "classStaticBlock",
+      "decimal",
+      "decorators-legacy",
+      "doExpressions",
+      "dynamicImport",
+      "exportDefaultFrom",
+      "exportNamespaceFrom",
+      "functionBind",
+      "functionSent",
+      "importAssertions",
+      "importMeta",
+      "nullishCoalescingOperator",
+      "numericSeparator",
+      "objectRestSpread",
+      "optionalCatchBinding",
+      "optionalChaining",
       [
-         'pipelineOperator',
+         "pipelineOperator",
          {
-            proposal: 'minimal',
+            proposal: "minimal",
          },
       ],
       [
-         'recordAndTuple',
+         "recordAndTuple",
          {
-            syntaxType: 'hash',
+            syntaxType: "hash",
          },
       ],
-      'throwExpressions',
-      'topLevelAwait',
-      'v8intrinsic',
-      'typescript',
-      'jsx',
+      "throwExpressions",
+      "topLevelAwait",
+      "v8intrinsic",
+      "typescript",
+      "jsx",
    ],
 }
 
@@ -89,7 +88,7 @@ export const transformJsx: Transformer<string> = async ({
    })
 
    if (!result || !result.ast) {
-      throw new Error('Failed to transform JSX')
+      throw new Error("Failed to transform JSX")
    }
 
    return recast.print(result.ast).code
diff --git a/packages/nyxb/src/utils/transformers/transform-rsc.ts b/packages/nyxb/src/utils/transformers/transform-rsc.ts
index d5dece52..64d44e10 100644
--- a/packages/nyxb/src/utils/transformers/transform-rsc.ts
+++ b/packages/nyxb/src/utils/transformers/transform-rsc.ts
@@ -1,5 +1,5 @@
-import { SyntaxKind } from 'ts-morph'
-import type { Transformer } from '~/src/utils/transformers'
+import { SyntaxKind } from "ts-morph"
+import type { Transformer } from "~/src/utils/transformers"
 
 const directiveRegex = /^["']use client["']$/g
 
diff --git a/packages/nyxb/src/utils/transformers/transform-tw-prefix.ts b/packages/nyxb/src/utils/transformers/transform-tw-prefix.ts
index 04dbbc2e..d3c1e595 100644
--- a/packages/nyxb/src/utils/transformers/transform-tw-prefix.ts
+++ b/packages/nyxb/src/utils/transformers/transform-tw-prefix.ts
@@ -1,7 +1,7 @@
-import { SyntaxKind } from 'ts-morph'
+import { SyntaxKind } from "ts-morph"
+import type { Transformer } from "~/src/utils/transformers"
 
-import { splitClassName } from './transform-css-vars'
-import type { Transformer } from '~/src/utils/transformers'
+import { splitClassName } from "./transform-css-vars"
 
 export const transformTwPrefixes: Transformer = async ({
    sourceFile,
@@ -14,27 +14,29 @@ export const transformTwPrefixes: Transformer = async ({
    // Find the cva function calls.
    sourceFile
       .getDescendantsOfKind(SyntaxKind.CallExpression)
-      .filter(node => node.getExpression().getText() === 'cva')
+      .filter((node) => node.getExpression().getText() === "cva")
       .forEach((node) => {
-      // cva(base, ...)
+         // cva(base, ...)
          if (node.getArguments()[0]?.isKind(SyntaxKind.StringLiteral)) {
             const defaultClassNames = node.getArguments()[0]
             if (defaultClassNames) {
                defaultClassNames.replaceWithText(
-            `"${applyPrefix(
-              defaultClassNames.getText()?.replace(/"|'/g, ''),
-              config.tailwind.prefix,
-            )}"`,
+                  `"${applyPrefix(
+                     defaultClassNames.getText()?.replace(/"|'/g, ""),
+                     config.tailwind.prefix,
+                  )}"`,
                )
             }
          }
 
          // cva(..., { variants: { ... } })
-         if (node.getArguments()[1]?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+         if (
+            node.getArguments()[1]?.isKind(SyntaxKind.ObjectLiteralExpression)
+         ) {
             node
                .getArguments()[1]
                ?.getDescendantsOfKind(SyntaxKind.PropertyAssignment)
-               .find(node => node.getName() === 'variants')
+               .find((node) => node.getName() === "variants")
                ?.getDescendantsOfKind(SyntaxKind.PropertyAssignment)
                .forEach((node) => {
                   node
@@ -45,10 +47,10 @@ export const transformTwPrefixes: Transformer = async ({
                         )
                         if (classNames) {
                            classNames?.replaceWithText(
-                    `"${applyPrefix(
-                      classNames.getText()?.replace(/"|'/g, ''),
-                      config.tailwind.prefix,
-                    )}"`,
+                              `"${applyPrefix(
+                                 classNames.getText()?.replace(/"|'/g, ""),
+                                 config.tailwind.prefix,
+                              )}"`,
                            )
                         }
                      })
@@ -58,16 +60,16 @@ export const transformTwPrefixes: Transformer = async ({
 
    // Find all jsx attributes with the name className.
    sourceFile.getDescendantsOfKind(SyntaxKind.JsxAttribute).forEach((node) => {
-      if (node.getName() === 'className') {
-      // className="..."
+      if (node.getName() === "className") {
+         // className="..."
          if (node.getInitializer()?.isKind(SyntaxKind.StringLiteral)) {
             const value = node.getInitializer()
             if (value) {
                value.replaceWithText(
-            `"${applyPrefix(
-              value.getText()?.replace(/"|'/g, ''),
-              config.tailwind.prefix,
-            )}"`,
+                  `"${applyPrefix(
+                     value.getText()?.replace(/"|'/g, ""),
+                     config.tailwind.prefix,
+                  )}"`,
                )
             }
          }
@@ -78,32 +80,32 @@ export const transformTwPrefixes: Transformer = async ({
             const callExpression = node
                .getInitializer()
                ?.getDescendantsOfKind(SyntaxKind.CallExpression)
-               .find(node => node.getExpression().getText() === 'ny')
+               .find((node) => node.getExpression().getText() === "ny")
             if (callExpression) {
                // Loop through the arguments.
                callExpression.getArguments().forEach((node) => {
                   if (
-                     node.isKind(SyntaxKind.ConditionalExpression)
-                     || node.isKind(SyntaxKind.BinaryExpression)
+                     node.isKind(SyntaxKind.ConditionalExpression) ||
+                     node.isKind(SyntaxKind.BinaryExpression)
                   ) {
                      node
                         .getChildrenOfKind(SyntaxKind.StringLiteral)
                         .forEach((node) => {
                            node.replaceWithText(
-                    `"${applyPrefix(
-                      node.getText()?.replace(/"|'/g, ''),
-                      config.tailwind.prefix,
-                    )}"`,
+                              `"${applyPrefix(
+                                 node.getText()?.replace(/"|'/g, ""),
+                                 config.tailwind.prefix,
+                              )}"`,
                            )
                         })
                   }
 
                   if (node.isKind(SyntaxKind.StringLiteral)) {
                      node.replaceWithText(
-                `"${applyPrefix(
-                  node.getText()?.replace(/"|'/g, ''),
-                  config.tailwind.prefix,
-                )}"`,
+                        `"${applyPrefix(
+                           node.getText()?.replace(/"|'/g, ""),
+                           config.tailwind.prefix,
+                        )}"`,
                      )
                   }
                })
@@ -112,12 +114,14 @@ export const transformTwPrefixes: Transformer = async ({
       }
 
       // classNames={...}
-      if (node.getName() === 'classNames') {
+      if (node.getName() === "classNames") {
          if (node.getInitializer()?.isKind(SyntaxKind.JsxExpression)) {
             node
                .getDescendantsOfKind(SyntaxKind.PropertyAssignment)
                .forEach((node) => {
-                  if (node.getInitializer()?.isKind(SyntaxKind.CallExpression)) {
+                  if (
+                     node.getInitializer()?.isKind(SyntaxKind.CallExpression)
+                  ) {
                      const callExpression = node.getInitializerIfKind(
                         SyntaxKind.CallExpression,
                      )
@@ -125,24 +129,24 @@ export const transformTwPrefixes: Transformer = async ({
                         // Loop through the arguments.
                         callExpression.getArguments().forEach((arg) => {
                            if (arg.isKind(SyntaxKind.ConditionalExpression)) {
-                              arg
-                                 .getChildrenOfKind(SyntaxKind.StringLiteral)
-                                 .forEach((node) => {
-                                    node.replaceWithText(
-                          `"${applyPrefix(
-                            node.getText()?.replace(/"|'/g, ''),
-                            config.tailwind.prefix,
-                          )}"`,
-                                    )
-                                 })
+                              arg.getChildrenOfKind(
+                                 SyntaxKind.StringLiteral,
+                              ).forEach((node) => {
+                                 node.replaceWithText(
+                                    `"${applyPrefix(
+                                       node.getText()?.replace(/"|'/g, ""),
+                                       config.tailwind.prefix,
+                                    )}"`,
+                                 )
+                              })
                            }
 
                            if (arg.isKind(SyntaxKind.StringLiteral)) {
                               arg.replaceWithText(
-                      `"${applyPrefix(
-                        arg.getText()?.replace(/"|'/g, ''),
-                        config.tailwind.prefix,
-                      )}"`,
+                                 `"${applyPrefix(
+                                    arg.getText()?.replace(/"|'/g, ""),
+                                    config.tailwind.prefix,
+                                 )}"`,
                               )
                            }
                         })
@@ -150,14 +154,14 @@ export const transformTwPrefixes: Transformer = async ({
                   }
 
                   if (node.getInitializer()?.isKind(SyntaxKind.StringLiteral)) {
-                     if (node.getName() !== 'variant') {
+                     if (node.getName() !== "variant") {
                         const classNames = node.getInitializer()
                         if (classNames) {
                            classNames.replaceWithText(
-                    `"${applyPrefix(
-                      classNames.getText()?.replace(/"|'/g, ''),
-                      config.tailwind.prefix,
-                    )}"`,
+                              `"${applyPrefix(
+                                 classNames.getText()?.replace(/"|'/g, ""),
+                                 config.tailwind.prefix,
+                              )}"`,
                            )
                         }
                      }
@@ -170,8 +174,8 @@ export const transformTwPrefixes: Transformer = async ({
    return sourceFile
 }
 
-export function applyPrefix(input: string, prefix: string = '') {
-   const classNames = input.split(' ')
+export function applyPrefix(input: string, prefix = "") {
+   const classNames = input.split(" ")
    const prefixed: string[] = []
    for (const className of classNames) {
       const [variant, value, modifier] = splitClassName(className)
@@ -179,21 +183,20 @@ export function applyPrefix(input: string, prefix: string = '') {
          modifier
             ? prefixed.push(`${variant}:${prefix}${value}/${modifier}`)
             : prefixed.push(`${variant}:${prefix}${value}`)
-      }
-      else {
+      } else {
          modifier
             ? prefixed.push(`${prefix}${value}/${modifier}`)
             : prefixed.push(`${prefix}${value}`)
       }
    }
-   return prefixed.join(' ')
+   return prefixed.join(" ")
 }
 
 export function applyPrefixesCss(css: string, prefix: string) {
-   const lines = css.split('\n')
+   const lines = css.split("\n")
    for (const line of lines) {
-      if (line.includes('@apply')) {
-         const originalTWCls = line.replace('@apply', '').trim()
+      if (line.includes("@apply")) {
+         const originalTWCls = line.replace("@apply", "").trim()
          const prefixedTwCls = applyPrefix(originalTWCls, prefix)
          css = css.replace(originalTWCls, prefixedTwCls)
       }
diff --git a/packages/nyxb/src/utils/update-app-index.ts b/packages/nyxb/src/utils/update-app-index.ts
index 16932b1d..aefac3e2 100644
--- a/packages/nyxb/src/utils/update-app-index.ts
+++ b/packages/nyxb/src/utils/update-app-index.ts
@@ -1,10 +1,10 @@
-import fs from 'fs/promises'
-import path from 'path'
-import type { Config } from '~/src/utils/get-config'
-import { getRegistryItem } from '~/src/utils/registry'
+import path from "path"
+import fs from "fs/promises"
+import { getRegistryItem } from "~/src/registry/api"
+import type { Config } from "~/src/utils/get-config"
 
 export async function updateAppIndex(component: string, config: Config) {
-   const indexPath = path.join(config.resolvedPaths.cwd, 'app/page.tsx')
+   const indexPath = path.join(config.resolvedPaths.cwd, "app/page.tsx")
 
    if (!(await fs.stat(indexPath)).isFile()) {
       return
@@ -12,13 +12,13 @@ export async function updateAppIndex(component: string, config: Config) {
 
    const registryItem = await getRegistryItem(component, config.style)
    if (
-      !registryItem?.meta?.importSpecifier
-      || !registryItem?.meta?.moduleSpecifier
+      !registryItem?.meta?.importSpecifier ||
+      !registryItem?.meta?.moduleSpecifier
    ) {
       return
    }
 
    // Overwrite the index file with the new import.
    const content = `import { ${registryItem?.meta?.importSpecifier} } from "${registryItem.meta.moduleSpecifier}"\n\nexport default function Page() {\n  return <${registryItem?.meta?.importSpecifier} />\n}`
-   await fs.writeFile(indexPath, content, 'utf8')
+   await fs.writeFile(indexPath, content, "utf8")
 }
diff --git a/packages/nyxb/src/utils/updaters/update-css-vars.ts b/packages/nyxb/src/utils/updaters/update-css-vars.ts
index 74bd3d8a..0a1681ae 100644
--- a/packages/nyxb/src/utils/updaters/update-css-vars.ts
+++ b/packages/nyxb/src/utils/updaters/update-css-vars.ts
@@ -1,14 +1,18 @@
-import { promises as fs } from 'fs'
-import path from 'path'
-import postcss from 'postcss'
-import AtRule from 'postcss/lib/at-rule'
-import type Root from 'postcss/lib/root'
-import type Rule from 'postcss/lib/rule'
-import type { z } from 'zod'
-import { spinner } from '~/src/utils/spinner'
-import type { registryItemCssVarsSchema } from '~/src/utils/registry/schema'
-import { highlighter } from '~/src/utils/highlighter'
-import type { Config } from '~/src/utils/get-config'
+import { promises as fs } from "fs"
+import path from "path"
+import postcss from "postcss"
+import AtRule from "postcss/lib/at-rule"
+import type Root from "postcss/lib/root"
+import type Rule from "postcss/lib/rule"
+import { z } from "zod"
+import type {
+   registryItemCssVarsSchema,
+   registryItemTailwindSchema,
+} from "~/src/registry/schema"
+import type { Config } from "~/src/utils/get-config"
+import type { TailwindVersion } from "~/src/utils/get-project-info"
+import { highlighter } from "~/src/utils/highlighter"
+import { spinner } from "~/src/utils/spinner"
 
 export async function updateCssVars(
    cssVars: z.infer<typeof registryItemCssVarsSchema> | undefined,
@@ -16,19 +20,18 @@ export async function updateCssVars(
    options: {
       cleanupDefaultNextStyles?: boolean
       silent?: boolean
+      tailwindVersion?: TailwindVersion
+      tailwindConfig?: z.infer<typeof registryItemTailwindSchema>["config"]
    },
 ) {
-   if (
-      !cssVars
-      || !Object.keys(cssVars).length
-      || !config.resolvedPaths.tailwindCss
-   ) {
+   if (!config.resolvedPaths.tailwindCss) {
       return
    }
 
    options = {
       cleanupDefaultNextStyles: false,
       silent: false,
+      tailwindVersion: "v3",
       ...options,
    }
    const cssFilepath = config.resolvedPaths.tailwindCss
@@ -37,16 +40,18 @@ export async function updateCssVars(
       cssFilepath,
    )
    const cssVarsSpinner = spinner(
-    `Updating ${highlighter.info(cssFilepathRelative)}`,
-    {
-       silent: options.silent,
-    },
+      `Updating ${highlighter.info(cssFilepathRelative)}`,
+      {
+         silent: options.silent,
+      },
    ).start()
-   const raw = await fs.readFile(cssFilepath, 'utf8')
-   const output = await transformCssVars(raw, cssVars, config, {
+   const raw = await fs.readFile(cssFilepath, "utf8")
+   const output = await transformCssVars(raw, cssVars ?? {}, config, {
       cleanupDefaultNextStyles: options.cleanupDefaultNextStyles,
+      tailwindVersion: options.tailwindVersion,
+      tailwindConfig: options.tailwindConfig,
    })
-   await fs.writeFile(cssFilepath, output, 'utf8')
+   await fs.writeFile(cssFilepath, output, "utf8")
    cssVarsSpinner.succeed()
 }
 
@@ -56,19 +61,48 @@ export async function transformCssVars(
    config: Config,
    options: {
       cleanupDefaultNextStyles?: boolean
+      tailwindVersion?: TailwindVersion
+      tailwindConfig?: z.infer<typeof registryItemTailwindSchema>["config"]
+   } = {
+      cleanupDefaultNextStyles: false,
+      tailwindVersion: "v3",
+      tailwindConfig: undefined,
    },
 ) {
    options = {
       cleanupDefaultNextStyles: false,
+      tailwindVersion: "v3",
+      tailwindConfig: undefined,
       ...options,
    }
 
-   const plugins = [updateCssVarsPlugin(cssVars)]
+   let plugins = [updateCssVarsPlugin(cssVars)]
+
    if (options.cleanupDefaultNextStyles) {
       plugins.push(cleanupDefaultNextStylesPlugin())
    }
 
-   // Only add the base layer plugin if we're using css variables.
+   if (options.tailwindVersion === "v4") {
+      plugins = [addCustomVariant({ params: "dark (&:is(.dark *))" })]
+
+      if (options.cleanupDefaultNextStyles) {
+         plugins.push(cleanupDefaultNextStylesPlugin())
+      }
+
+      plugins.push(updateCssVarsPluginV4(cssVars))
+      plugins.push(updateThemePlugin(cssVars))
+
+      if (options.tailwindConfig) {
+         plugins.push(updateTailwindConfigPlugin(options.tailwindConfig))
+         plugins.push(
+            updateTailwindConfigAnimationPlugin(options.tailwindConfig),
+         )
+         plugins.push(
+            updateTailwindConfigKeyframesPlugin(options.tailwindConfig),
+         )
+      }
+   }
+
    if (config.tailwind.cssVariables) {
       plugins.push(updateBaseLayerPlugin())
    }
@@ -77,33 +111,39 @@ export async function transformCssVars(
       from: undefined,
    })
 
-   return result.css
+   let output = result.css.replace(/\/\* ---break--- \*\//g, "")
+
+   if (options.tailwindVersion === "v4") {
+      output = output.replace(/(\n\s*\n)+/g, "\n\n")
+   }
+
+   return output
 }
 
 function updateBaseLayerPlugin() {
    return {
-      postcssPlugin: 'update-base-layer',
+      postcssPlugin: "update-base-layer",
       Once(root: Root) {
          const requiredRules = [
-            { selector: '*', apply: 'border-border' },
-            { selector: 'body', apply: 'bg-background text-foreground' },
+            { selector: "*", apply: "border-border" },
+            { selector: "body", apply: "bg-background text-foreground" },
          ]
 
          let baseLayer = root.nodes.find(
             (node): node is AtRule =>
-               node.type === 'atrule'
-               && node.name === 'layer'
-               && node.params === 'base'
-               && requiredRules.every(({ selector, apply }) =>
+               node.type === "atrule" &&
+               node.name === "layer" &&
+               node.params === "base" &&
+               requiredRules.every(({ selector, apply }) =>
                   node.nodes?.some(
                      (rule): rule is Rule =>
-                        rule.type === 'rule'
-                        && rule.selector === selector
-                        && rule.nodes.some(
+                        rule.type === "rule" &&
+                        rule.selector === selector &&
+                        rule.nodes.some(
                            (applyRule): applyRule is AtRule =>
-                              applyRule.type === 'atrule'
-                              && applyRule.name === 'apply'
-                              && applyRule.params === apply,
+                              applyRule.type === "atrule" &&
+                              applyRule.name === "apply" &&
+                              applyRule.params === apply,
                         ),
                   ),
                ),
@@ -111,17 +151,21 @@ function updateBaseLayerPlugin() {
 
          if (!baseLayer) {
             baseLayer = postcss.atRule({
-               name: 'layer',
-               params: 'base',
-               raws: { semicolon: true, between: ' ', before: '\n' },
+               name: "layer",
+               params: "base",
+               raws: { semicolon: true, between: " ", before: "\n" },
             })
             root.append(baseLayer)
+            root.insertBefore(
+               baseLayer,
+               postcss.comment({ text: "---break---" }),
+            )
          }
 
          requiredRules.forEach(({ selector, apply }) => {
             const existingRule = baseLayer?.nodes?.find(
                (node): node is Rule =>
-                  node.type === 'rule' && node.selector === selector,
+                  node.type === "rule" && node.selector === selector,
             )
 
             if (!existingRule) {
@@ -130,12 +174,12 @@ function updateBaseLayerPlugin() {
                      selector,
                      nodes: [
                         postcss.atRule({
-                           name: 'apply',
+                           name: "apply",
                            params: apply,
-                           raws: { semicolon: true, before: '\n    ' },
+                           raws: { semicolon: true, before: "\n    " },
                         }),
                      ],
-                     raws: { semicolon: true, between: ' ', before: '\n  ' },
+                     raws: { semicolon: true, between: " ", before: "\n  " },
                   }),
                )
             }
@@ -148,33 +192,37 @@ function updateCssVarsPlugin(
    cssVars: z.infer<typeof registryItemCssVarsSchema>,
 ) {
    return {
-      postcssPlugin: 'update-css-vars',
+      postcssPlugin: "update-css-vars",
       Once(root: Root) {
          let baseLayer = root.nodes.find(
-            node =>
-               node.type === 'atrule'
-               && node.name === 'layer'
-               && node.params === 'base',
+            (node) =>
+               node.type === "atrule" &&
+               node.name === "layer" &&
+               node.params === "base",
          ) as AtRule | undefined
 
          if (!(baseLayer instanceof AtRule)) {
             baseLayer = postcss.atRule({
-               name: 'layer',
-               params: 'base',
+               name: "layer",
+               params: "base",
                nodes: [],
                raws: {
                   semicolon: true,
-                  before: '\n',
-                  between: ' ',
+                  before: "\n",
+                  between: " ",
                },
             })
             root.append(baseLayer)
+            root.insertBefore(
+               baseLayer,
+               postcss.comment({ text: "---break---" }),
+            )
          }
 
          if (baseLayer !== undefined) {
             // Add variables for each key in cssVars
             Object.entries(cssVars).forEach(([key, vars]) => {
-               const selector = key === 'light' ? ':root' : `.${key}`
+               const selector = key === "light" ? ":root" : `.${key}`
                // TODO: Fix typecheck.
                addOrUpdateVars(baseLayer as AtRule, selector, vars)
             })
@@ -185,18 +233,18 @@ function updateCssVarsPlugin(
 
 function removeConflictVars(root: Rule | Root) {
    const rootRule = root.nodes.find(
-      (node): node is Rule => node.type === 'rule' && node.selector === ':root',
+      (node): node is Rule => node.type === "rule" && node.selector === ":root",
    )
 
    if (rootRule) {
-      const propsToRemove = ['--background', '--foreground']
+      const propsToRemove = ["--background", "--foreground"]
 
       rootRule.nodes
          .filter(
             (node): node is postcss.Declaration =>
-               node.type === 'decl' && propsToRemove.includes(node.prop),
+               node.type === "decl" && propsToRemove.includes(node.prop),
          )
-         .forEach(node => node.remove())
+         .forEach((node) => node.remove())
 
       if (rootRule.nodes.length === 0) {
          rootRule.remove()
@@ -206,21 +254,23 @@ function removeConflictVars(root: Rule | Root) {
 
 function cleanupDefaultNextStylesPlugin() {
    return {
-      postcssPlugin: 'cleanup-default-next-styles',
+      postcssPlugin: "cleanup-default-next-styles",
       Once(root: Root) {
          const bodyRule = root.nodes.find(
-            (node): node is Rule => node.type === 'rule' && node.selector === 'body',
+            (node): node is Rule =>
+               node.type === "rule" && node.selector === "body",
          )
          if (bodyRule) {
             // Remove color from the body node.
             bodyRule.nodes
                .find(
                   (node): node is postcss.Declaration =>
-                     node.type === 'decl'
-                     && node.prop === 'color'
-                     && ['rgb(var(--foreground-rgb))', 'var(--foreground)'].includes(
-                        node.value,
-                     ),
+                     node.type === "decl" &&
+                     node.prop === "color" &&
+                     [
+                        "rgb(var(--foreground-rgb))",
+                        "var(--foreground)",
+                     ].includes(node.value),
                )
                ?.remove()
 
@@ -228,15 +278,25 @@ function cleanupDefaultNextStylesPlugin() {
             bodyRule.nodes
                .find((node): node is postcss.Declaration => {
                   return (
-                     node.type === 'decl'
-                     && node.prop === 'background'
+                     node.type === "decl" &&
+                     node.prop === "background" &&
                      // This is only going to run on create project, so all good.
-                     && (node.value.startsWith('linear-gradient')
-                     || node.value === 'var(--background)')
+                     (node.value.startsWith("linear-gradient") ||
+                        node.value === "var(--background)")
                   )
                })
                ?.remove()
 
+            // Remove font-family: Arial, Helvetica, sans-serif;
+            bodyRule.nodes
+               .find(
+                  (node): node is postcss.Declaration =>
+                     node.type === "decl" &&
+                     node.prop === "font-family" &&
+                     node.value === "Arial, Helvetica, sans-serif",
+               )
+               ?.remove()
+
             // If the body rule is empty, remove it.
             if (bodyRule.nodes.length === 0) {
                bodyRule.remove()
@@ -247,8 +307,8 @@ function cleanupDefaultNextStylesPlugin() {
 
          const darkRootRule = root.nodes.find(
             (node): node is Rule =>
-               node.type === 'atrule'
-               && node.params === '(prefers-color-scheme: dark)',
+               node.type === "atrule" &&
+               node.params === "(prefers-color-scheme: dark)",
          )
 
          if (darkRootRule) {
@@ -267,21 +327,22 @@ function addOrUpdateVars(
    vars: Record<string, string>,
 ) {
    let ruleNode = baseLayer.nodes?.find(
-      (node): node is Rule => node.type === 'rule' && node.selector === selector,
+      (node): node is Rule =>
+         node.type === "rule" && node.selector === selector,
    )
 
    if (!ruleNode) {
       if (Object.keys(vars).length > 0) {
          ruleNode = postcss.rule({
             selector,
-            raws: { between: ' ', before: '\n  ' },
+            raws: { between: " ", before: "\n  " },
          })
          baseLayer.append(ruleNode)
       }
    }
 
    Object.entries(vars).forEach(([key, value]) => {
-      const prop = `--${key.replace(/^--/, '')}`
+      const prop = `--${key.replace(/^--/, "")}`
       const newDecl = postcss.decl({
          prop,
          value,
@@ -290,9 +351,424 @@ function addOrUpdateVars(
 
       const existingDecl = ruleNode?.nodes.find(
          (node): node is postcss.Declaration =>
-            node.type === 'decl' && node.prop === prop,
+            node.type === "decl" && node.prop === prop,
       )
 
-      existingDecl ? existingDecl.replaceWith(newDecl) : ruleNode?.append(newDecl)
+      existingDecl
+         ? existingDecl.replaceWith(newDecl)
+         : ruleNode?.append(newDecl)
    })
 }
+
+function updateCssVarsPluginV4(
+   cssVars: z.infer<typeof registryItemCssVarsSchema>,
+) {
+   return {
+      postcssPlugin: "update-css-vars-v4",
+      Once(root: Root) {
+         Object.entries(cssVars).forEach(([key, vars]) => {
+            const selector = key === "light" ? ":root" : `.${key}`
+
+            let ruleNode = root.nodes?.find(
+               (node): node is Rule =>
+                  node.type === "rule" && node.selector === selector,
+            )
+
+            if (!ruleNode) {
+               ruleNode = postcss.rule({
+                  selector,
+                  nodes: [],
+                  raws: { semicolon: true, between: " ", before: "\n" },
+               })
+               root.append(ruleNode)
+               root.insertBefore(
+                  ruleNode,
+                  postcss.comment({ text: "---break---" }),
+               )
+            }
+
+            Object.entries(vars).forEach(([key, value]) => {
+               let prop = `--${key.replace(/^--/, "")}`
+
+               // Special case for sidebar-background.
+               if (prop === "--sidebar-background") {
+                  prop = "--sidebar"
+               }
+
+               if (isLocalHSLValue(value)) {
+                  value = `hsl(${value})`
+               }
+
+               const newDecl = postcss.decl({
+                  prop,
+                  value,
+                  raws: { semicolon: true },
+               })
+               const existingDecl = ruleNode?.nodes.find(
+                  (node): node is postcss.Declaration =>
+                     node.type === "decl" && node.prop === prop,
+               )
+               existingDecl
+                  ? existingDecl.replaceWith(newDecl)
+                  : ruleNode?.append(newDecl)
+            })
+         })
+      },
+   }
+}
+
+function updateThemePlugin(cssVars: z.infer<typeof registryItemCssVarsSchema>) {
+   return {
+      postcssPlugin: "update-theme",
+      Once(root: Root) {
+         // Find unique color names from light and dark.
+         const variables = Array.from(
+            new Set(
+               Object.keys(cssVars).flatMap((key) =>
+                  Object.keys(cssVars[key as keyof typeof cssVars] || {}),
+               ),
+            ),
+         )
+
+         if (!variables.length) {
+            return
+         }
+
+         const themeNode = upsertThemeNode(root)
+
+         const themeVarNodes = themeNode.nodes?.filter(
+            (node): node is postcss.Declaration =>
+               node.type === "decl" && node.prop.startsWith("--"),
+         )
+
+         for (const variable of variables) {
+            const value = Object.values(cssVars).find(
+               (vars) => vars[variable],
+            )?.[variable]
+
+            if (!value) {
+               continue
+            }
+
+            if (variable === "radius") {
+               const radiusVariables = {
+                  sm: "calc(var(--radius) - 4px)",
+                  md: "calc(var(--radius) - 2px)",
+                  lg: "var(--radius)",
+                  xl: "calc(var(--radius) + 4px)",
+               }
+               for (const [key, value] of Object.entries(radiusVariables)) {
+                  const cssVarNode = postcss.decl({
+                     prop: `--radius-${key}`,
+                     value,
+                     raws: { semicolon: true },
+                  })
+                  if (
+                     themeNode?.nodes?.find(
+                        (node): node is postcss.Declaration =>
+                           node.type === "decl" &&
+                           node.prop === cssVarNode.prop,
+                     )
+                  ) {
+                     continue
+                  }
+                  themeNode?.append(cssVarNode)
+               }
+               break
+            }
+
+            let prop =
+               isLocalHSLValue(value) || isColorValue(value)
+                  ? `--color-${variable.replace(/^--/, "")}`
+                  : `--${variable.replace(/^--/, "")}`
+            if (prop === "--color-sidebar-background") {
+               prop = "--color-sidebar"
+            }
+
+            let propValue = `var(--${variable})`
+            if (prop === "--color-sidebar") {
+               propValue = "var(--sidebar)"
+            }
+
+            const cssVarNode = postcss.decl({
+               prop,
+               value: propValue,
+               raws: { semicolon: true },
+            })
+            const existingDecl = themeNode?.nodes?.find(
+               (node): node is postcss.Declaration =>
+                  node.type === "decl" && node.prop === cssVarNode.prop,
+            )
+            if (!existingDecl) {
+               if (themeVarNodes?.length) {
+                  themeNode?.insertAfter(
+                     themeVarNodes[themeVarNodes.length - 1],
+                     cssVarNode,
+                  )
+               } else {
+                  themeNode?.append(cssVarNode)
+               }
+            }
+         }
+      },
+   }
+}
+
+function upsertThemeNode(root: Root): AtRule {
+   let themeNode = root.nodes.find(
+      (node): node is AtRule =>
+         node.type === "atrule" &&
+         node.name === "theme" &&
+         node.params === "inline",
+   )
+
+   if (!themeNode) {
+      themeNode = postcss.atRule({
+         name: "theme",
+         params: "inline",
+         nodes: [],
+         raws: { semicolon: true, between: " ", before: "\n" },
+      })
+      root.append(themeNode)
+      root.insertBefore(themeNode, postcss.comment({ text: "---break---" }))
+   }
+
+   return themeNode
+}
+
+function addCustomVariant({ params }: { params: string }) {
+   return {
+      postcssPlugin: "add-custom-variant",
+      Once(root: Root) {
+         const customVariant = root.nodes.find(
+            (node): node is AtRule =>
+               node.type === "atrule" && node.name === "custom-variant",
+         )
+         if (!customVariant) {
+            const variantNode = postcss.atRule({
+               name: "custom-variant",
+               params,
+               raws: { semicolon: true, before: "\n" },
+            })
+            root.insertAfter(root.nodes[0], variantNode)
+            root.insertBefore(
+               variantNode,
+               postcss.comment({ text: "---break---" }),
+            )
+         }
+      },
+   }
+}
+
+function updateTailwindConfigPlugin(
+   tailwindConfig: z.infer<typeof registryItemTailwindSchema>["config"],
+) {
+   return {
+      postcssPlugin: "update-tailwind-config",
+      Once(root: Root) {
+         if (!tailwindConfig?.plugins) {
+            return
+         }
+
+         const quoteType = getQuoteType(root)
+         const quote = quoteType === "single" ? "'" : '"'
+
+         const pluginNodes = root.nodes.filter(
+            (node): node is AtRule =>
+               node.type === "atrule" && node.name === "plugin",
+         )
+
+         const lastPluginNode =
+            pluginNodes[pluginNodes.length - 1] || root.nodes[0]
+
+         for (const plugin of tailwindConfig.plugins) {
+            const pluginName = plugin.replace(/^require\(["']|["']\)$/g, "")
+
+            // Check if the plugin is already present.
+            if (
+               pluginNodes.some((node) => {
+                  return node.params.replace(/["']/g, "") === pluginName
+               })
+            ) {
+               continue
+            }
+
+            const pluginNode = postcss.atRule({
+               name: "plugin",
+               params: `${quote}${pluginName}${quote}`,
+               raws: { semicolon: true, before: "\n" },
+            })
+            root.insertAfter(lastPluginNode, pluginNode)
+            root.insertBefore(
+               pluginNode,
+               postcss.comment({ text: "---break---" }),
+            )
+         }
+      },
+   }
+}
+
+function updateTailwindConfigKeyframesPlugin(
+   tailwindConfig: z.infer<typeof registryItemTailwindSchema>["config"],
+) {
+   return {
+      postcssPlugin: "update-tailwind-config-keyframes",
+      Once(root: Root) {
+         if (!tailwindConfig?.theme?.extend?.keyframes) {
+            return
+         }
+
+         const themeNode = upsertThemeNode(root)
+         const existingKeyFrameNodes = themeNode.nodes?.filter(
+            (node): node is AtRule =>
+               node.type === "atrule" && node.name === "keyframes",
+         )
+
+         const keyframeValueSchema = z.record(
+            z.string(),
+            z.record(z.string(), z.string()),
+         )
+
+         for (const [keyframeName, keyframeValue] of Object.entries(
+            tailwindConfig.theme.extend.keyframes,
+         )) {
+            if (typeof keyframeName !== "string") {
+               continue
+            }
+
+            const parsedKeyframeValue =
+               keyframeValueSchema.safeParse(keyframeValue)
+
+            if (!parsedKeyframeValue.success) {
+               continue
+            }
+
+            if (
+               existingKeyFrameNodes?.find(
+                  (node): node is postcss.AtRule =>
+                     node.type === "atrule" &&
+                     node.name === "keyframes" &&
+                     node.params === keyframeName,
+               )
+            ) {
+               continue
+            }
+
+            const keyframeNode = postcss.atRule({
+               name: "keyframes",
+               params: keyframeName,
+               nodes: [],
+               raws: { semicolon: true, between: " ", before: "\n  " },
+            })
+
+            for (const [key, values] of Object.entries(
+               parsedKeyframeValue.data,
+            )) {
+               const rule = postcss.rule({
+                  selector: key,
+                  nodes: Object.entries(values).map(([key, value]) =>
+                     postcss.decl({
+                        prop: key,
+                        value,
+                        raws: {
+                           semicolon: true,
+                           before: "\n      ",
+                           between: ": ",
+                        },
+                     }),
+                  ),
+                  raws: { semicolon: true, between: " ", before: "\n    " },
+               })
+               keyframeNode.append(rule)
+            }
+
+            themeNode.append(keyframeNode)
+            themeNode.insertBefore(
+               keyframeNode,
+               postcss.comment({ text: "---break---" }),
+            )
+         }
+      },
+   }
+}
+
+function updateTailwindConfigAnimationPlugin(
+   tailwindConfig: z.infer<typeof registryItemTailwindSchema>["config"],
+) {
+   return {
+      postcssPlugin: "update-tailwind-config-animation",
+      Once(root: Root) {
+         if (!tailwindConfig?.theme?.extend?.animation) {
+            return
+         }
+
+         const themeNode = upsertThemeNode(root)
+         const existingAnimationNodes = themeNode.nodes?.filter(
+            (node): node is postcss.Declaration =>
+               node.type === "decl" && node.prop.startsWith("--animate-"),
+         )
+
+         const parsedAnimationValue = z
+            .record(z.string(), z.string())
+            .safeParse(tailwindConfig.theme.extend.animation)
+         if (!parsedAnimationValue.success) {
+            return
+         }
+
+         for (const [key, value] of Object.entries(parsedAnimationValue.data)) {
+            const prop = `--animate-${key}`
+            if (
+               existingAnimationNodes?.find(
+                  (node): node is postcss.Declaration => node.prop === prop,
+               )
+            ) {
+               continue
+            }
+
+            const animationNode = postcss.decl({
+               prop,
+               value,
+               raws: { semicolon: true, between: ": ", before: "\n  " },
+            })
+            themeNode.append(animationNode)
+         }
+      },
+   }
+}
+
+function getQuoteType(root: Root): "single" | "double" {
+   const firstNode = root.nodes[0]
+   const raw = firstNode.toString()
+
+   if (raw.includes("'")) {
+      return "single"
+   }
+   return "double"
+}
+
+export function isLocalHSLValue(value: string) {
+   if (
+      value.startsWith("hsl") ||
+      value.startsWith("rgb") ||
+      value.startsWith("#") ||
+      value.startsWith("oklch")
+   ) {
+      return false
+   }
+
+   const chunks = value.split(" ")
+
+   return (
+      chunks.length === 3 &&
+      chunks.slice(1, 3).every((chunk) => chunk.includes("%"))
+   )
+}
+
+export function isColorValue(value: string) {
+   return (
+      value.startsWith("hsl") ||
+      value.startsWith("rgb") ||
+      value.startsWith("#") ||
+      value.startsWith("oklch")
+   )
+}
diff --git a/packages/nyxb/src/utils/updaters/update-dependencies.ts b/packages/nyxb/src/utils/updaters/update-dependencies.ts
index 34c4f420..3db83432 100644
--- a/packages/nyxb/src/utils/updaters/update-dependencies.ts
+++ b/packages/nyxb/src/utils/updaters/update-dependencies.ts
@@ -1,14 +1,14 @@
-import { execa } from 'execa'
-import prompts from 'prompts'
-import type { Config } from '~/src/utils/get-config'
-import { getPackageInfo } from '~/src/utils/get-package-info'
-import { getPackageManager } from '~/src/utils/get-package-manager'
-import { logger } from '~/src/utils/logger'
-import type { RegistryItem } from '~/src/utils/registry/schema'
-import { spinner } from '~/src/utils/spinner'
+import { execa } from "execa"
+import prompts from "prompts"
+import type { RegistryItem } from "~/src/registry/schema"
+import type { Config } from "~/src/utils/get-config"
+import { getPackageInfo } from "~/src/utils/get-package-info"
+import { getPackageManager } from "~/src/utils/get-package-manager"
+import { logger } from "~/src/utils/logger"
+import { spinner } from "~/src/utils/spinner"
 
 export async function updateDependencies(
-   dependencies: RegistryItem['dependencies'],
+   dependencies: RegistryItem["dependencies"],
    config: Config,
    options: {
       silent?: boolean
@@ -30,20 +30,20 @@ export async function updateDependencies(
    const packageManager = await getPackageManager(config.resolvedPaths.cwd)
 
    // Offer to use --force or --legacy-peer-deps if using React 19 with npm.
-   let flag = ''
-   if (isUsingReact19(config) && packageManager === 'npm') {
+   let flag = ""
+   if (isUsingReact19(config) && packageManager === "npm") {
       dependenciesSpinner.stopAndPersist()
       logger.warn(
-         '\nIt looks like you are using React 19. \nSome packages may fail to install due to peer dependency issues in npm (see https://nyxbui.design/react-19).\n',
+         "\nIt looks like you are using React 19. \nSome packages may fail to install due to peer dependency issues in npm (see https://nyxbui.design/react-19).\n",
       )
       const confirmation = await prompts([
          {
-            type: 'select',
-            name: 'flag',
-            message: 'How would you like to proceed?',
+            type: "select",
+            name: "flag",
+            message: "How would you like to proceed?",
             choices: [
-               { title: 'Use --force', value: 'force' },
-               { title: 'Use --legacy-peer-deps', value: 'legacy-peer-deps' },
+               { title: "Use --force", value: "force" },
+               { title: "Use --legacy-peer-deps", value: "legacy-peer-deps" },
             ],
          },
       ])
@@ -58,14 +58,15 @@ export async function updateDependencies(
    await execa(
       packageManager,
       [
-         packageManager === 'npm' ? 'install' : 'add',
-         ...(packageManager === 'npm' && flag ? [`--${flag}`] : []),
+         packageManager === "npm" ? "install" : "add",
+         ...(packageManager === "npm" && flag ? [`--${flag}`] : []),
          ...dependencies,
       ],
       {
          cwd: config.resolvedPaths.cwd,
       },
    )
+
    dependenciesSpinner?.succeed()
 }
 
diff --git a/packages/nyxb/src/utils/updaters/update-files.ts b/packages/nyxb/src/utils/updaters/update-files.ts
index 2b71d756..36700a34 100644
--- a/packages/nyxb/src/utils/updaters/update-files.ts
+++ b/packages/nyxb/src/utils/updaters/update-files.ts
@@ -1,52 +1,48 @@
-import { existsSync, promises as fs } from 'fs'
-import path, { basename } from 'path'
-import prompts from 'prompts'
-import type { Config } from '~/src/utils/get-config'
-import { getProjectInfo } from '~/src/utils/get-project-info'
-import { highlighter } from '~/src/utils/highlighter'
-import { logger } from '~/src/utils/logger'
-import {
-   getRegistryBaseColor,
-   getRegistryItemFileTargetPath,
-} from '~/src/utils/registry'
-import type { RegistryItem } from '~/src/utils/registry/schema'
-import { spinner } from '~/src/utils/spinner'
-import { transform } from '~/src/utils/transformers'
-import { transformCssVars } from '~/src/utils/transformers/transform-css-vars'
-import { transformIcons } from '~/src/utils/transformers/transform-icons'
-import { transformImport } from '~/src/utils/transformers/transform-import'
-import { transformRsc } from '~/src/utils/transformers/transform-rsc'
-import { transformTwPrefixes } from '~/src/utils/transformers/transform-tw-prefix'
-
-export function resolveTargetDir(
-   projectInfo: Awaited<ReturnType<typeof getProjectInfo>>,
-   config: Config,
-   target: string,
-) {
-   if (target.startsWith('~/')) {
-      return path.join(config.resolvedPaths.cwd, target.replace('~/', ''))
-   }
-   return projectInfo?.isSrcDir
-      ? path.join(config.resolvedPaths.cwd, 'src', target)
-      : path.join(config.resolvedPaths.cwd, target)
-}
+import { existsSync } from "fs"
+import { promises as fs } from "fs"
+import path, { basename } from "path"
+import prompts from "prompts"
+import type { z } from "zod"
+import { getRegistryBaseColor } from "~/src/registry/api"
+import type {
+   RegistryItem,
+   registryItemFileSchema,
+} from "~/src/registry/schema"
+import type { Config } from "~/src/utils/get-config"
+import { getProjectInfo } from "~/src/utils/get-project-info"
+import { highlighter } from "~/src/utils/highlighter"
+import { logger } from "~/src/utils/logger"
+import { spinner } from "~/src/utils/spinner"
+import { transform } from "~/src/utils/transformers"
+import { transformCssVars } from "~/src/utils/transformers/transform-css-vars"
+import { transformIcons } from "~/src/utils/transformers/transform-icons"
+import { transformImport } from "~/src/utils/transformers/transform-import"
+import { transformRsc } from "~/src/utils/transformers/transform-rsc"
+import { transformTwPrefixes } from "~/src/utils/transformers/transform-tw-prefix"
 
 export async function updateFiles(
-   files: RegistryItem['files'],
+   files: RegistryItem["files"],
    config: Config,
    options: {
       overwrite?: boolean
       force?: boolean
       silent?: boolean
+      rootSpinner?: ReturnType<typeof spinner>
+      isRemote?: boolean
    },
 ) {
    if (!files?.length) {
-      return
+      return {
+         filesCreated: [],
+         filesUpdated: [],
+         filesSkipped: [],
+      }
    }
    options = {
       overwrite: false,
       force: false,
       silent: false,
+      isRemote: false,
       ...options,
    }
    const filesCreatedSpinner = spinner(`Updating files.`, {
@@ -67,37 +63,49 @@ export async function updateFiles(
          continue
       }
 
-      let targetDir = getRegistryItemFileTargetPath(file, config)
+      let filePath = resolveFilePath(file, config, {
+         isSrcDir: projectInfo?.isSrcDir,
+         commonRoot: findCommonRoot(
+            files.map((f) => f.path),
+            file.path,
+         ),
+      })
       const fileName = basename(file.path)
-      let filePath = path.join(targetDir, fileName)
-
-      if (file.target) {
-         filePath = resolveTargetDir(projectInfo, config, file.target)
-         targetDir = path.dirname(filePath)
-      }
+      const targetDir = path.dirname(filePath)
 
       if (!config.tsx) {
-         filePath = filePath.replace(/\.tsx?$/, match =>
-            match === '.tsx' ? '.jsx' : '.js')
+         filePath = filePath.replace(/\.tsx?$/, (match) =>
+            match === ".tsx" ? ".jsx" : ".js",
+         )
       }
 
       const existingFile = existsSync(filePath)
+
       if (existingFile && !options.overwrite) {
          filesCreatedSpinner.stop()
+         if (options.rootSpinner) {
+            options.rootSpinner.stop()
+         }
          const { overwrite } = await prompts({
-            type: 'confirm',
-            name: 'overwrite',
+            type: "confirm",
+            name: "overwrite",
             message: `The file ${highlighter.info(
-          fileName,
-        )} already exists. Would you like to overwrite?`,
+               fileName,
+            )} already exists. Would you like to overwrite?`,
             initial: false,
          })
 
          if (!overwrite) {
             filesSkipped.push(path.relative(config.resolvedPaths.cwd, filePath))
+            if (options.rootSpinner) {
+               options.rootSpinner.start()
+            }
             continue
          }
          filesCreatedSpinner?.start()
+         if (options.rootSpinner) {
+            options.rootSpinner.start()
+         }
       }
 
       // Create the target directory if it doesn't exist.
@@ -113,6 +121,7 @@ export async function updateFiles(
             config,
             baseColor,
             transformJsx: !config.tsx,
+            isRemote: options.isRemote,
          },
          [
             transformImport,
@@ -123,7 +132,7 @@ export async function updateFiles(
          ],
       )
 
-      await fs.writeFile(filePath, content, 'utf-8')
+      await fs.writeFile(filePath, content, "utf-8")
       existingFile
          ? filesUpdated.push(path.relative(config.resolvedPaths.cwd, filePath))
          : filesCreated.push(path.relative(config.resolvedPaths.cwd, filePath))
@@ -131,33 +140,32 @@ export async function updateFiles(
 
    const hasUpdatedFiles = filesCreated.length || filesUpdated.length
    if (!hasUpdatedFiles && !filesSkipped.length) {
-      filesCreatedSpinner?.info('No files updated.')
+      filesCreatedSpinner?.info("No files updated.")
    }
 
    if (filesCreated.length) {
       filesCreatedSpinner?.succeed(
-      `Created ${filesCreated.length} ${
-        filesCreated.length === 1 ? 'file' : 'files'
-      }:`,
+         `Created ${filesCreated.length} ${
+            filesCreated.length === 1 ? "file" : "files"
+         }:`,
       )
       if (!options.silent) {
          for (const file of filesCreated) {
             logger.log(`  - ${file}`)
          }
       }
-   }
-   else {
+   } else {
       filesCreatedSpinner?.stop()
    }
 
    if (filesUpdated.length) {
       spinner(
-      `Updated ${filesUpdated.length} ${
-        filesUpdated.length === 1 ? 'file' : 'files'
-      }:`,
-      {
-         silent: options.silent,
-      },
+         `Updated ${filesUpdated.length} ${
+            filesUpdated.length === 1 ? "file" : "files"
+         }:`,
+         {
+            silent: options.silent,
+         },
       )?.info()
       if (!options.silent) {
          for (const file of filesUpdated) {
@@ -168,12 +176,12 @@ export async function updateFiles(
 
    if (filesSkipped.length) {
       spinner(
-      `Skipped ${filesSkipped.length} ${
-        filesUpdated.length === 1 ? 'file' : 'files'
-      }:`,
-      {
-         silent: options.silent,
-      },
+         `Skipped ${filesSkipped.length} ${
+            filesUpdated.length === 1 ? "file" : "files"
+         }: (use --overwrite to overwrite)`,
+         {
+            silent: options.silent,
+         },
       )?.info()
       if (!options.silent) {
          for (const file of filesSkipped) {
@@ -185,4 +193,123 @@ export async function updateFiles(
    if (!options.silent) {
       logger.break()
    }
+
+   return {
+      filesCreated,
+      filesUpdated,
+      filesSkipped,
+   }
+}
+
+export function resolveFilePath(
+   file: z.infer<typeof registryItemFileSchema>,
+   config: Config,
+   options: {
+      isSrcDir?: boolean
+      commonRoot?: string
+   },
+) {
+   if (file.target) {
+      if (file.target.startsWith("~/")) {
+         return path.join(
+            config.resolvedPaths.cwd,
+            file.target.replace("~/", ""),
+         )
+      }
+
+      return options.isSrcDir
+         ? path.join(
+              config.resolvedPaths.cwd,
+              "src",
+              file.target.replace("src/", ""),
+           )
+         : path.join(config.resolvedPaths.cwd, file.target.replace("src/", ""))
+   }
+
+   const targetDir = resolveFileTargetDirectory(file, config)
+
+   const relativePath = resolveNestedFilePath(file.path, targetDir)
+   return path.join(targetDir, relativePath)
+}
+
+function resolveFileTargetDirectory(
+   file: z.infer<typeof registryItemFileSchema>,
+   config: Config,
+) {
+   if (file.type === "registry:ui") {
+      return config.resolvedPaths.ui
+   }
+
+   if (file.type === "registry:lib") {
+      return config.resolvedPaths.lib
+   }
+
+   if (file.type === "registry:block" || file.type === "registry:component") {
+      return config.resolvedPaths.components
+   }
+
+   if (file.type === "registry:hook") {
+      return config.resolvedPaths.hooks
+   }
+
+   return config.resolvedPaths.components
+}
+
+export function findCommonRoot(paths: string[], needle: string): string {
+   // Remove leading slashes for consistent handling
+   const normalizedPaths = paths.map((p) => p.replace(/^\//, ""))
+   const normalizedNeedle = needle.replace(/^\//, "")
+
+   // Get the directory path of the needle by removing the file name
+   const needleDir = normalizedNeedle.split("/").slice(0, -1).join("/")
+
+   // If needle is at root level, return empty string
+   if (!needleDir) {
+      return ""
+   }
+
+   // Split the needle directory into segments
+   const needleSegments = needleDir.split("/")
+
+   // Start from the full path and work backwards
+   for (let i = needleSegments.length; i > 0; i--) {
+      const testPath = needleSegments.slice(0, i).join("/")
+      // Check if this is a common root by verifying if any other paths start with it
+      const hasRelatedPaths = normalizedPaths.some(
+         (path) => path !== normalizedNeedle && path.startsWith(testPath + "/"),
+      )
+      if (hasRelatedPaths) {
+         return "/" + testPath // Add leading slash back for the result
+      }
+   }
+
+   // If no common root found with other files, return the parent directory of the needle
+   return "/" + needleDir // Add leading slash back for the result
+}
+
+export function resolveNestedFilePath(
+   filePath: string,
+   targetDir: string,
+): string {
+   // Normalize paths by removing leading/trailing slashes
+   const normalizedFilePath = filePath.replace(/^\/|\/$/g, "")
+   const normalizedTargetDir = targetDir.replace(/^\/|\/$/g, "")
+
+   // Split paths into segments
+   const fileSegments = normalizedFilePath.split("/")
+   const targetSegments = normalizedTargetDir.split("/")
+
+   // Find the last matching segment from targetDir in filePath
+   const lastTargetSegment = targetSegments[targetSegments.length - 1]
+   const commonDirIndex = fileSegments.findIndex(
+      (segment) => segment === lastTargetSegment,
+   )
+
+   if (commonDirIndex === -1) {
+      // Return just the filename if no common directory is found
+      return fileSegments[fileSegments.length - 1]
+   }
+
+   // Return everything after the common directory
+   return fileSegments.slice(commonDirIndex + 1).join("/")
 }
diff --git a/packages/nyxb/src/utils/updaters/update-tailwind-config.ts b/packages/nyxb/src/utils/updaters/update-tailwind-config.ts
index 6d560713..693f49f4 100644
--- a/packages/nyxb/src/utils/updaters/update-tailwind-config.ts
+++ b/packages/nyxb/src/utils/updaters/update-tailwind-config.ts
@@ -1,39 +1,39 @@
-import { promises as fs } from 'fs'
-import { tmpdir } from 'os'
-import path from 'path'
-import deepmerge from 'deepmerge'
-import objectToString from 'stringify-object'
-import type { Config as TailwindConfig } from 'tailwindcss'
-import type {
-   ArrayLiteralExpression,
-   ObjectLiteralExpression,
-   PropertyAssignment,
-   VariableStatement,
-} from 'ts-morph'
+import { promises as fs } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import deepmerge from "deepmerge"
+import objectToString from "stringify-object"
+import type { Config as TailwindConfig } from "tailwindcss"
 import {
+   type ArrayLiteralExpression,
+   type ObjectLiteralExpression,
    Project,
+   type PropertyAssignment,
    QuoteKind,
    ScriptKind,
    SyntaxKind,
-} from 'ts-morph'
-import type { z } from 'zod'
-import { spinner } from '~/src/utils/spinner'
-import type { registryItemTailwindSchema } from '~/src/utils/registry/schema'
-import { highlighter } from '~/src/utils/highlighter'
-import type { Config } from '~/src/utils/get-config'
-
-export type UpdaterTailwindConfig = Omit<TailwindConfig, 'plugins'> & {
+   type VariableStatement,
+} from "ts-morph"
+import type { z } from "zod"
+import type { registryItemTailwindSchema } from "~/src/registry/schema"
+import type { Config } from "~/src/utils/get-config"
+import type { TailwindVersion } from "~/src/utils/get-project-info"
+import { highlighter } from "~/src/utils/highlighter"
+import { spinner } from "~/src/utils/spinner"
+
+export type UpdaterTailwindConfig = Omit<TailwindConfig, "plugins"> & {
    // We only want string plugins for now.
    plugins?: string[]
 }
 
 export async function updateTailwindConfig(
    tailwindConfig:
-      | z.infer<typeof registryItemTailwindSchema>['config']
+      | z.infer<typeof registryItemTailwindSchema>["config"]
       | undefined,
    config: Config,
    options: {
       silent?: boolean
+      tailwindVersion?: TailwindVersion
    },
 ) {
    if (!tailwindConfig) {
@@ -42,22 +42,28 @@ export async function updateTailwindConfig(
 
    options = {
       silent: false,
+      tailwindVersion: "v3",
       ...options,
    }
 
+   // No tailwind config in v4.
+   if (options.tailwindVersion === "v4") {
+      return
+   }
+
    const tailwindFileRelativePath = path.relative(
       config.resolvedPaths.cwd,
       config.resolvedPaths.tailwindConfig,
    )
    const tailwindSpinner = spinner(
-    `Updating ${highlighter.info(tailwindFileRelativePath)}`,
-    {
-       silent: options.silent,
-    },
+      `Updating ${highlighter.info(tailwindFileRelativePath)}`,
+      {
+         silent: options.silent,
+      },
    ).start()
-   const raw = await fs.readFile(config.resolvedPaths.tailwindConfig, 'utf8')
+   const raw = await fs.readFile(config.resolvedPaths.tailwindConfig, "utf8")
    const output = await transformTailwindConfig(raw, tailwindConfig, config)
-   await fs.writeFile(config.resolvedPaths.tailwindConfig, output, 'utf8')
+   await fs.writeFile(config.resolvedPaths.tailwindConfig, output, "utf8")
    tailwindSpinner?.succeed()
 }
 
@@ -72,13 +78,13 @@ export async function transformTailwindConfig(
    // TODO: maybe we do need to traverse the default export?
    const configObject = sourceFile
       .getDescendantsOfKind(SyntaxKind.ObjectLiteralExpression)
-      .find(node =>
+      .find((node) =>
          node
             .getProperties()
             .some(
-               property =>
-                  property.isKind(SyntaxKind.PropertyAssignment)
-                  && property.getName() === 'content',
+               (property) =>
+                  property.isKind(SyntaxKind.PropertyAssignment) &&
+                  property.getName() === "content",
             ),
       )
 
@@ -93,8 +99,8 @@ export async function transformTailwindConfig(
    addTailwindConfigProperty(
       configObject,
       {
-         name: 'darkMode',
-         value: 'class',
+         name: "darkMode",
+         value: "class",
       },
       { quoteChar },
    )
@@ -124,7 +130,7 @@ function addTailwindConfigProperty(
       quoteChar: string
    },
 ) {
-   const existingProperty = configObject.getProperty('darkMode')
+   const existingProperty = configObject.getProperty("darkMode")
 
    if (!existingProperty) {
       const newProperty = {
@@ -133,7 +139,7 @@ function addTailwindConfigProperty(
       }
 
       // We need to add darkMode as the first property.
-      if (property.name === 'darkMode') {
+      if (property.name === "darkMode") {
          configObject.insertPropertyAssignment(0, newProperty)
          return configObject
       }
@@ -156,11 +162,11 @@ function addTailwindConfigProperty(
 
       // If property is an array, append.
       if (initializer?.isKind(SyntaxKind.ArrayLiteralExpression)) {
-      // Check if the array already contains the value.
+         // Check if the array already contains the value.
          if (
             initializer
                .getElements()
-               .map(element => element.getText())
+               .map((element) => element.getText())
                .includes(newValue)
          ) {
             return configObject
@@ -176,13 +182,13 @@ function addTailwindConfigProperty(
 
 async function addTailwindConfigTheme(
    configObject: ObjectLiteralExpression,
-   theme: UpdaterTailwindConfig['theme'],
+   theme: UpdaterTailwindConfig["theme"],
 ) {
    // Ensure there is a theme property.
-   if (!configObject.getProperty('theme')) {
+   if (!configObject.getProperty("theme")) {
       configObject.addPropertyAssignment({
-         name: 'theme',
-         initializer: '{}',
+         name: "theme",
+         initializer: "{}",
       })
    }
 
@@ -190,7 +196,7 @@ async function addTailwindConfigTheme(
    nestSpreadProperties(configObject)
 
    const themeProperty = configObject
-      .getPropertyOrThrow('theme')
+      .getPropertyOrThrow("theme")
       ?.asKindOrThrow(SyntaxKind.PropertyAssignment)
 
    const themeInitializer = themeProperty.getInitializer()
@@ -201,15 +207,15 @@ async function addTailwindConfigTheme(
          arrayMerge: (dst, src) => src,
       })
       const resultString = objectToString(result)
-         .replace(/'\.\.\.(.*)'/g, '...$1') // Remove quote around spread element
-         .replace(/'"/g, '\'') // Replace `\" with "
-         .replace(/"'/g, '\'') // Replace `\" with "
-         .replace(/'\[/g, '[') // Replace `[ with [
-         .replace(/\]'/g, ']') // Replace `] with ]
-         .replace(/'\\'/g, '\'') // Replace `\' with '
-         .replace(/\\'/g, '\'') // Replace \' with '
-         .replace(/\\''/g, '\'')
-         .replace(/''/g, '\'')
+         .replace(/\'\.\.\.(.*)\'/g, "...$1") // Remove quote around spread element
+         .replace(/\'\"/g, "'") // Replace `\" with "
+         .replace(/\"\'/g, "'") // Replace `\" with "
+         .replace(/\'\[/g, "[") // Replace `[ with [
+         .replace(/\]\'/g, "]") // Replace `] with ]
+         .replace(/\'\\\'/g, "'") // Replace `\' with '
+         .replace(/\\\'/g, "'") // Replace \' with '
+         .replace(/\\\'\'/g, "'")
+         .replace(/\'\'/g, "'")
       themeInitializer.replaceWithText(resultString)
    }
 
@@ -221,11 +227,11 @@ function addTailwindConfigPlugin(
    configObject: ObjectLiteralExpression,
    plugin: string,
 ) {
-   const existingPlugins = configObject.getProperty('plugins')
+   const existingPlugins = configObject.getProperty("plugins")
 
    if (!existingPlugins) {
       configObject.addPropertyAssignment({
-         name: 'plugins',
+         name: "plugins",
          initializer: `[${plugin}]`,
       })
 
@@ -240,9 +246,9 @@ function addTailwindConfigPlugin(
             initializer
                .getElements()
                .map((element) => {
-                  return element.getText().replace(/["']/g, '')
+                  return element.getText().replace(/["']/g, "")
                })
-               .includes(plugin.replace(/["']/g, ''))
+               .includes(plugin.replace(/["']/g, ""))
          ) {
             return configObject
          }
@@ -256,9 +262,9 @@ function addTailwindConfigPlugin(
 }
 
 export async function _createSourceFile(input: string, config: Config | null) {
-   const dir = await fs.mkdtemp(path.join(tmpdir(), 'nyxb-'))
-   const resolvedPath
-    = config?.resolvedPaths?.tailwindConfig || 'tailwind.config.ts'
+   const dir = await fs.mkdtemp(path.join(tmpdir(), "nyxb-"))
+   const resolvedPath =
+      config?.resolvedPaths?.tailwindConfig || "tailwind.config.ts"
    const tempFile = path.join(dir, `nyxb-${path.basename(resolvedPath)}`)
 
    const project = new Project({
@@ -268,7 +274,7 @@ export async function _createSourceFile(input: string, config: Config | null) {
       // Note: .js and .mjs can still be valid for TS projects.
       // We can't infer TypeScript from config.tsx.
       scriptKind:
-      path.extname(resolvedPath) === '.ts' ? ScriptKind.TS : ScriptKind.JS,
+         path.extname(resolvedPath) === ".ts" ? ScriptKind.TS : ScriptKind.JS,
    })
 
    return sourceFile
@@ -278,7 +284,7 @@ export function _getQuoteChar(configObject: ObjectLiteralExpression) {
    return configObject
       .getFirstDescendantByKind(SyntaxKind.StringLiteral)
       ?.getQuoteKind() === QuoteKind.Single
-      ? '\''
+      ? "'"
       : '"'
 }
 
@@ -288,35 +294,37 @@ export function nestSpreadProperties(obj: ObjectLiteralExpression) {
    for (let i = 0; i < properties.length; i++) {
       const prop = properties[i]
       if (prop.isKind(SyntaxKind.SpreadAssignment)) {
-         const spreadAssignment = prop.asKindOrThrow(SyntaxKind.SpreadAssignment)
+         const spreadAssignment = prop.asKindOrThrow(
+            SyntaxKind.SpreadAssignment,
+         )
          const spreadText = spreadAssignment.getExpression().getText()
 
          // Replace spread with a property assignment
          obj.insertPropertyAssignment(i, {
             // Need to escape the name with " so that deepmerge doesn't mishandle the key
-            name: `"___${spreadText.replace(/^\.\.\./, '')}"`,
-            initializer: `"...${spreadText.replace(/^\.\.\./, '')}"`,
+            name: `"___${spreadText.replace(/^\.\.\./, "")}"`,
+            initializer: `"...${spreadText.replace(/^\.\.\./, "")}"`,
          })
 
          // Remove the original spread assignment
          spreadAssignment.remove()
-      }
-      else if (prop.isKind(SyntaxKind.PropertyAssignment)) {
-         const propAssignment = prop.asKindOrThrow(SyntaxKind.PropertyAssignment)
+      } else if (prop.isKind(SyntaxKind.PropertyAssignment)) {
+         const propAssignment = prop.asKindOrThrow(
+            SyntaxKind.PropertyAssignment,
+         )
          const initializer = propAssignment.getInitializer()
 
          if (
-            initializer
-            && initializer.isKind(SyntaxKind.ObjectLiteralExpression)
+            initializer &&
+            initializer.isKind(SyntaxKind.ObjectLiteralExpression)
          ) {
             // Recursively process nested object literals
             nestSpreadProperties(
                initializer.asKindOrThrow(SyntaxKind.ObjectLiteralExpression),
             )
-         }
-         else if (
-            initializer
-            && initializer.isKind(SyntaxKind.ArrayLiteralExpression)
+         } else if (
+            initializer &&
+            initializer.isKind(SyntaxKind.ArrayLiteralExpression)
          ) {
             nestSpreadElements(
                initializer.asKindOrThrow(SyntaxKind.ArrayLiteralExpression),
@@ -331,18 +339,16 @@ export function nestSpreadElements(arr: ArrayLiteralExpression) {
    for (let j = 0; j < elements.length; j++) {
       const element = elements[j]
       if (element.isKind(SyntaxKind.ObjectLiteralExpression)) {
-      // Recursive check on objects within arrays
+         // Recursive check on objects within arrays
          nestSpreadProperties(
             element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression),
          )
-      }
-      else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
-      // Recursive check on nested arrays
+      } else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
+         // Recursive check on nested arrays
          nestSpreadElements(
             element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression),
          )
-      }
-      else if (element.isKind(SyntaxKind.SpreadElement)) {
+      } else if (element.isKind(SyntaxKind.SpreadElement)) {
          const spreadText = element.getText()
          // Spread element within an array
          arr.removeElement(j)
@@ -364,17 +370,15 @@ export function unnestSpreadProperties(obj: ObjectLiteralExpression) {
             const value = initializer
                .asKindOrThrow(SyntaxKind.StringLiteral)
                .getLiteralValue()
-            if (value.startsWith('...')) {
+            if (value.startsWith("...")) {
                obj.insertSpreadAssignment(i, { expression: value.slice(3) })
                propAssignment.remove()
             }
-         }
-         else if (initializer?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+         } else if (initializer?.isKind(SyntaxKind.ObjectLiteralExpression)) {
             unnestSpreadProperties(initializer as ObjectLiteralExpression)
-         }
-         else if (
-            initializer
-            && initializer.isKind(SyntaxKind.ArrayLiteralExpression)
+         } else if (
+            initializer &&
+            initializer.isKind(SyntaxKind.ArrayLiteralExpression)
          ) {
             unnsetSpreadElements(
                initializer.asKindOrThrow(SyntaxKind.ArrayLiteralExpression),
@@ -389,24 +393,22 @@ export function unnsetSpreadElements(arr: ArrayLiteralExpression) {
    for (let j = 0; j < elements.length; j++) {
       const element = elements[j]
       if (element.isKind(SyntaxKind.ObjectLiteralExpression)) {
-      // Recursive check on objects within arrays
+         // Recursive check on objects within arrays
          unnestSpreadProperties(
             element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression),
          )
-      }
-      else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
-      // Recursive check on nested arrays
+      } else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
+         // Recursive check on nested arrays
          unnsetSpreadElements(
             element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression),
          )
-      }
-      else if (element.isKind(SyntaxKind.StringLiteral)) {
+      } else if (element.isKind(SyntaxKind.StringLiteral)) {
          const spreadText = element.getText()
          // check if spread element
-         const spreadTest = /^['"](\.\.\..*)['"]$/g
+         const spreadTest = /(?:^['"])(\.\.\..*)(?:['"]$)/g
          if (spreadTest.test(spreadText)) {
             arr.removeElement(j)
-            arr.insertElement(j, spreadText.replace(spreadTest, '$1'))
+            arr.insertElement(j, spreadText.replace(spreadTest, "$1"))
          }
       }
    }
@@ -414,8 +416,8 @@ export function unnsetSpreadElements(arr: ArrayLiteralExpression) {
 
 async function parseObjectLiteral(objectLiteralString: string): Promise<any> {
    const sourceFile = await _createSourceFile(
-    `const theme = ${objectLiteralString}`,
-    null,
+      `const theme = ${objectLiteralString}`,
+      null,
    )
 
    const statement = sourceFile.getStatements()[0]
@@ -429,29 +431,29 @@ async function parseObjectLiteral(objectLiteralString: string): Promise<any> {
       }
    }
 
-   throw new Error('Invalid input: not an object literal')
+   throw new Error("Invalid input: not an object literal")
 }
 
 function parseObjectLiteralExpression(node: ObjectLiteralExpression): any {
    const result: any = {}
    for (const property of node.getProperties()) {
       if (property.isKind(SyntaxKind.PropertyAssignment)) {
-         const name = property.getName().replace(/'/g, '')
+         const name = property.getName().replace(/\'/g, "")
          if (
-            property.getInitializer()?.isKind(SyntaxKind.ObjectLiteralExpression)
+            property
+               .getInitializer()
+               ?.isKind(SyntaxKind.ObjectLiteralExpression)
          ) {
             result[name] = parseObjectLiteralExpression(
                property.getInitializer() as ObjectLiteralExpression,
             )
-         }
-         else if (
+         } else if (
             property.getInitializer()?.isKind(SyntaxKind.ArrayLiteralExpression)
          ) {
             result[name] = parseArrayLiteralExpression(
                property.getInitializer() as ArrayLiteralExpression,
             )
-         }
-         else {
+         } else {
             result[name] = parseValue(property.getInitializer())
          }
       }
@@ -468,15 +470,13 @@ function parseArrayLiteralExpression(node: ArrayLiteralExpression): any[] {
                element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression),
             ),
          )
-      }
-      else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
+      } else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
          result.push(
             parseArrayLiteralExpression(
                element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression),
             ),
          )
-      }
-      else {
+      } else {
          result.push(parseValue(element))
       }
    }
@@ -510,20 +510,18 @@ export function buildTailwindThemeColorsFromCssVars(
    const result: Record<string, any> = {}
 
    for (const key of Object.keys(cssVars)) {
-      const parts = key.split('-')
+      const parts = key.split("-")
       const colorName = parts[0]
-      const subType = parts.slice(1).join('-')
+      const subType = parts.slice(1).join("-")
 
-      if (subType === '') {
-         if (typeof result[colorName] === 'object') {
+      if (subType === "") {
+         if (typeof result[colorName] === "object") {
             result[colorName].DEFAULT = `hsl(var(--${key}))`
-         }
-         else {
+         } else {
             result[colorName] = `hsl(var(--${key}))`
          }
-      }
-      else {
-         if (typeof result[colorName] !== 'object') {
+      } else {
+         if (typeof result[colorName] !== "object") {
             result[colorName] = { DEFAULT: `hsl(var(--${colorName}))` }
          }
          result[colorName][subType] = `hsl(var(--${key}))`
@@ -533,9 +531,9 @@ export function buildTailwindThemeColorsFromCssVars(
    // Remove DEFAULT if it's not in the original cssVars
    for (const [colorName, value] of Object.entries(result)) {
       if (
-         typeof value === 'object'
-         && value.DEFAULT === `hsl(var(--${colorName}))`
-         && !(colorName in cssVars)
+         typeof value === "object" &&
+         value.DEFAULT === `hsl(var(--${colorName}))` &&
+         !(colorName in cssVars)
       ) {
          delete value.DEFAULT
       }
diff --git a/packages/nyxb/src/utils/updaters/update-tailwind-content.ts b/packages/nyxb/src/utils/updaters/update-tailwind-content.ts
index 751c4537..b8814a96 100644
--- a/packages/nyxb/src/utils/updaters/update-tailwind-content.ts
+++ b/packages/nyxb/src/utils/updaters/update-tailwind-content.ts
@@ -1,14 +1,13 @@
-import { promises as fs } from 'fs'
-import path from 'path'
-import type { ObjectLiteralExpression } from 'ts-morph'
-import { SyntaxKind } from 'ts-morph'
-import type { Config } from '~/src/utils/get-config'
-import { highlighter } from '~/src/utils/highlighter'
-import { spinner } from '~/src/utils/spinner'
+import { promises as fs } from "fs"
+import path from "path"
+import { type ObjectLiteralExpression, SyntaxKind } from "ts-morph"
+import type { Config } from "~/src/utils/get-config"
+import { highlighter } from "~/src/utils/highlighter"
+import { spinner } from "~/src/utils/spinner"
 import {
    _createSourceFile,
    _getQuoteChar,
-} from '~/src/utils/updaters/update-tailwind-config'
+} from "~/src/utils/updaters/update-tailwind-config"
 
 export async function updateTailwindContent(
    content: string[],
@@ -31,14 +30,14 @@ export async function updateTailwindContent(
       config.resolvedPaths.tailwindConfig,
    )
    const tailwindSpinner = spinner(
-    `Updating ${highlighter.info(tailwindFileRelativePath)}`,
-    {
-       silent: options.silent,
-    },
+      `Updating ${highlighter.info(tailwindFileRelativePath)}`,
+      {
+         silent: options.silent,
+      },
    ).start()
-   const raw = await fs.readFile(config.resolvedPaths.tailwindConfig, 'utf8')
+   const raw = await fs.readFile(config.resolvedPaths.tailwindConfig, "utf8")
    const output = await transformTailwindContent(raw, content, config)
-   await fs.writeFile(config.resolvedPaths.tailwindConfig, output, 'utf8')
+   await fs.writeFile(config.resolvedPaths.tailwindConfig, output, "utf8")
    tailwindSpinner?.succeed()
 }
 
@@ -53,13 +52,13 @@ export async function transformTailwindContent(
    // TODO: maybe we do need to traverse the default export?
    const configObject = sourceFile
       .getDescendantsOfKind(SyntaxKind.ObjectLiteralExpression)
-      .find(node =>
+      .find((node) =>
          node
             .getProperties()
             .some(
-               property =>
-                  property.isKind(SyntaxKind.PropertyAssignment)
-                  && property.getName() === 'content',
+               (property) =>
+                  property.isKind(SyntaxKind.PropertyAssignment) &&
+                  property.getName() === "content",
             ),
       )
 
@@ -79,14 +78,14 @@ async function addTailwindConfigContent(
 ) {
    const quoteChar = _getQuoteChar(configObject)
 
-   const existingProperty = configObject.getProperty('content')
+   const existingProperty = configObject.getProperty("content")
 
    if (!existingProperty) {
       const newProperty = {
-         name: 'content',
+         name: "content",
          initializer: `[${quoteChar}${content.join(
-        `${quoteChar}, ${quoteChar}`,
-      )}${quoteChar}]`,
+            `${quoteChar}, ${quoteChar}`,
+         )}${quoteChar}]`,
       }
       configObject.addPropertyAssignment(newProperty)
 
@@ -105,7 +104,7 @@ async function addTailwindConfigContent(
             if (
                initializer
                   .getElements()
-                  .map(element => element.getText())
+                  .map((element) => element.getText())
                   .includes(newValue)
             ) {
                continue
diff --git a/packages/nyxb/test/commands/init.test.ts b/packages/nyxb/test/commands/init.test.ts
deleted file mode 100644
index 9f024696..00000000
--- a/packages/nyxb/test/commands/init.test.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import fs from "fs"
-import path from "path"
-import { execa } from "execa"
-import { afterEach, expect, test, vi } from "vitest"
-
-import { runInit } from "../../src/commands/init"
-import { getConfig } from "../../src/utils/get-config"
-import * as getPackageManger from "../../src/utils/get-package-manager"
-import * as registry from "../../src/utils/registry"
-
-vi.mock("execa")
-vi.mock("fs/promises", () => ({
-  writeFile: vi.fn(),
-  mkdir: vi.fn(),
-}))
-vi.mock("ora")
-
-test.skip("init config-full", async () => {
-  vi.spyOn(getPackageManger, "getPackageManager").mockResolvedValue("pnpm")
-  vi.spyOn(registry, "getRegistryBaseColor").mockResolvedValue({
-    inlineColors: {},
-    cssVars: {},
-    inlineColorsTemplate:
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-    cssVarsTemplate:
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  })
-  vi.spyOn(registry, "getRegistryItem").mockResolvedValue({
-    name: "miami",
-    dependencies: [
-      "tailwindcss-animate",
-      "class-variance-authority",
-      "clsx",
-      "tailwind-merge",
-      "lucide-react",
-      "@radix-ui/react-icons",
-    ],
-    registryDependencies: [],
-    tailwind: {
-      config: {
-        theme: {
-          extend: {
-            borderRadius: {
-              lg: "var(--radius)",
-              md: "calc(var(--radius) - 2px)",
-              sm: "calc(var(--radius) - 4px)",
-            },
-          },
-        },
-        plugins: ['require("tailwindcss-animate")'],
-      },
-    },
-    files: [],
-    cssVariables: {
-      light: {
-        "--radius": "0.5rem",
-      },
-    },
-  })
-  const mockMkdir = vi.spyOn(fs.promises, "mkdir").mockResolvedValue(undefined)
-  const mockWriteFile = vi.spyOn(fs.promises, "writeFile").mockResolvedValue()
-
-  const targetDir = path.resolve(__dirname, "../fixtures/config-full")
-  const config = await getConfig(targetDir)
-
-  await runInit(config)
-
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    1,
-    expect.stringMatching(/src\/lib$/),
-    expect.anything()
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/src\/components$/),
-    expect.anything()
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/src\/app\/globals.css$/),
-    expect.stringContaining(`@tailwind base`),
-    "utf8"
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    3,
-    expect.stringMatching(/src\/lib\/utils.ts$/),
-    expect.stringContaining(`import { type ClassValue, clsx } from "clsx"`),
-    "utf8"
-  )
-  expect(execa).toHaveBeenCalledWith(
-    "pnpm",
-    [
-      "add",
-      "tailwindcss-animate",
-      "class-variance-authority",
-      "clsx",
-      "tailwind-merge",
-      "lucide-react",
-      "@radix-ui/react-icons",
-    ],
-    {
-      cwd: targetDir,
-    }
-  )
-
-  mockMkdir.mockRestore()
-  mockWriteFile.mockRestore()
-})
-
-test.skip("init config-partial", async () => {
-  vi.spyOn(getPackageManger, "getPackageManager").mockResolvedValue("npm")
-  vi.spyOn(registry, "getRegistryBaseColor").mockResolvedValue({
-    inlineColors: {},
-    cssVars: {},
-    inlineColorsTemplate:
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-    cssVarsTemplate:
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  })
-  vi.spyOn(registry, "getRegistryItem").mockResolvedValue({
-    name: "miami",
-    dependencies: [
-      "tailwindcss-animate",
-      "class-variance-authority",
-      "clsx",
-      "tailwind-merge",
-      "lucide-react",
-    ],
-    registryDependencies: [],
-    tailwind: {
-      config: {
-        theme: {
-          extend: {
-            borderRadius: {
-              lg: "var(--radius)",
-              md: "calc(var(--radius) - 2px)",
-              sm: "calc(var(--radius) - 4px)",
-            },
-          },
-        },
-        plugins: ['require("tailwindcss-animate")'],
-      },
-    },
-    files: [],
-    cssVariables: {
-      light: {
-        "--radius": "0.5rem",
-      },
-    },
-  })
-  const mockMkdir = vi.spyOn(fs.promises, "mkdir").mockResolvedValue(undefined)
-  const mockWriteFile = vi.spyOn(fs.promises, "writeFile").mockResolvedValue()
-
-  const targetDir = path.resolve(__dirname, "../fixtures/config-partial")
-  const config = await getConfig(targetDir)
-
-  await runInit(config)
-
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    1,
-    expect.stringMatching(/src\/assets\/css$/),
-    expect.anything()
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/lib$/),
-    expect.anything()
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    3,
-    expect.stringMatching(/components$/),
-    expect.anything()
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/utils.ts$/),
-    expect.stringContaining(`import { type ClassValue, clsx } from "clsx"`),
-    "utf8"
-  )
-  expect(execa).toHaveBeenCalledWith(
-    "npm",
-    [
-      "install",
-      "tailwindcss-animate",
-      "class-variance-authority",
-      "clsx",
-      "tailwind-merge",
-      "lucide-react",
-    ],
-    {
-      cwd: targetDir,
-    }
-  )
-
-  mockMkdir.mockRestore()
-  mockWriteFile.mockRestore()
-})
-
-afterEach(() => {
-  vi.resetAllMocks()
-})
diff --git a/packages/nyxb/test/fixtures/colors/neutral.json b/packages/nyxb/test/fixtures/colors/neutral.json
deleted file mode 100644
index c2488562..00000000
--- a/packages/nyxb/test/fixtures/colors/neutral.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "neutral-950",
-      "muted": "neutral-100",
-      "muted-foreground": "neutral-500",
-      "popover": "white",
-      "popover-foreground": "neutral-950",
-      "border": "neutral-200",
-      "input": "neutral-200",
-      "card": "white",
-      "card-foreground": "neutral-950",
-      "primary": "neutral-900",
-      "primary-foreground": "neutral-50",
-      "secondary": "neutral-100",
-      "secondary-foreground": "neutral-900",
-      "accent": "neutral-100",
-      "accent-foreground": "neutral-900",
-      "destructive": "red-500",
-      "destructive-foreground": "neutral-50",
-      "ring": "neutral-400"
-    },
-    "dark": {
-      "background": "neutral-950",
-      "foreground": "neutral-50",
-      "muted": "neutral-800",
-      "muted-foreground": "neutral-400",
-      "popover": "neutral-950",
-      "popover-foreground": "neutral-50",
-      "border": "neutral-800",
-      "input": "neutral-800",
-      "card": "neutral-950",
-      "card-foreground": "neutral-50",
-      "primary": "neutral-50",
-      "primary-foreground": "neutral-900",
-      "secondary": "neutral-800",
-      "secondary-foreground": "neutral-50",
-      "accent": "neutral-800",
-      "accent-foreground": "neutral-50",
-      "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "neutral-800"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "0 0% 3.9%",
-      "muted": "0 0% 96.1%",
-      "muted-foreground": "0 0% 45.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "0 0% 3.9%",
-      "border": "0 0% 89.8%",
-      "input": "0 0% 89.8%",
-      "card": "0 0% 100%",
-      "card-foreground": "0 0% 3.9%",
-      "primary": "0 0% 9%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "0 0% 96.1%",
-      "secondary-foreground": "0 0% 9%",
-      "accent": "0 0% 96.1%",
-      "accent-foreground": "0 0% 9%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "ring": "0 0% 63.9%"
-    },
-    "dark": {
-      "background": "0 0% 3.9%",
-      "foreground": "0 0% 98%",
-      "muted": "0 0% 14.9%",
-      "muted-foreground": "0 0% 63.9%",
-      "popover": "0 0% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "border": "0 0% 14.9%",
-      "input": "0 0% 14.9%",
-      "card": "0 0% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "0 0% 9%",
-      "secondary": "0 0% 14.9%",
-      "secondary-foreground": "0 0% 98%",
-      "accent": "0 0% 14.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "0 0% 14.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n \n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n \n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n \n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n \n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 0 0% 63.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n \n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n \n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 0 0% 14.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
diff --git a/packages/nyxb/test/fixtures/colors/slate.json b/packages/nyxb/test/fixtures/colors/slate.json
deleted file mode 100644
index 46469cb7..00000000
--- a/packages/nyxb/test/fixtures/colors/slate.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "slate-950",
-      "muted": "slate-100",
-      "muted-foreground": "slate-500",
-      "popover": "white",
-      "popover-foreground": "slate-950",
-      "border": "slate-200",
-      "input": "slate-200",
-      "card": "white",
-      "card-foreground": "slate-950",
-      "primary": "slate-900",
-      "primary-foreground": "slate-50",
-      "secondary": "slate-100",
-      "secondary-foreground": "slate-900",
-      "accent": "slate-100",
-      "accent-foreground": "slate-900",
-      "destructive": "red-500",
-      "destructive-foreground": "slate-50",
-      "ring": "slate-400"
-    },
-    "dark": {
-      "background": "slate-950",
-      "foreground": "slate-50",
-      "muted": "slate-800",
-      "muted-foreground": "slate-400",
-      "popover": "slate-950",
-      "popover-foreground": "slate-50",
-      "border": "slate-800",
-      "input": "slate-800",
-      "card": "slate-950",
-      "card-foreground": "slate-50",
-      "primary": "slate-50",
-      "primary-foreground": "slate-900",
-      "secondary": "slate-800",
-      "secondary-foreground": "slate-50",
-      "accent": "slate-800",
-      "accent-foreground": "slate-50",
-      "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "slate-800"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "222.2 84% 4.9%",
-      "muted": "210 40% 96.1%",
-      "muted-foreground": "215.4 16.3% 46.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "222.2 84% 4.9%",
-      "border": "214.3 31.8% 91.4%",
-      "input": "214.3 31.8% 91.4%",
-      "card": "0 0% 100%",
-      "card-foreground": "222.2 84% 4.9%",
-      "primary": "222.2 47.4% 11.2%",
-      "primary-foreground": "210 40% 98%",
-      "secondary": "210 40% 96.1%",
-      "secondary-foreground": "222.2 47.4% 11.2%",
-      "accent": "210 40% 96.1%",
-      "accent-foreground": "222.2 47.4% 11.2%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "210 40% 98%",
-      "ring": "215 20.2% 65.1%"
-    },
-    "dark": {
-      "background": "222.2 84% 4.9%",
-      "foreground": "210 40% 98%",
-      "muted": "217.2 32.6% 17.5%",
-      "muted-foreground": "215 20.2% 65.1%",
-      "popover": "222.2 84% 4.9%",
-      "popover-foreground": "210 40% 98%",
-      "border": "217.2 32.6% 17.5%",
-      "input": "217.2 32.6% 17.5%",
-      "card": "222.2 84% 4.9%",
-      "card-foreground": "210 40% 98%",
-      "primary": "210 40% 98%",
-      "primary-foreground": "222.2 47.4% 11.2%",
-      "secondary": "217.2 32.6% 17.5%",
-      "secondary-foreground": "210 40% 98%",
-      "accent": "217.2 32.6% 17.5%",
-      "accent-foreground": "210 40% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "217.2 32.6% 17.5%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n \n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n \n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n \n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n \n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n \n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n \n    --ring: 215 20.2% 65.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n \n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n \n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n \n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n \n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n \n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n \n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n \n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 217.2 32.6% 17.5%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
diff --git a/packages/nyxb/test/fixtures/colors/stone.json b/packages/nyxb/test/fixtures/colors/stone.json
deleted file mode 100644
index 05e92bb5..00000000
--- a/packages/nyxb/test/fixtures/colors/stone.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "stone-950",
-      "muted": "stone-100",
-      "muted-foreground": "stone-500",
-      "popover": "white",
-      "popover-foreground": "stone-950",
-      "border": "stone-200",
-      "input": "stone-200",
-      "card": "white",
-      "card-foreground": "stone-950",
-      "primary": "stone-900",
-      "primary-foreground": "stone-50",
-      "secondary": "stone-100",
-      "secondary-foreground": "stone-900",
-      "accent": "stone-100",
-      "accent-foreground": "stone-900",
-      "destructive": "red-500",
-      "destructive-foreground": "stone-50",
-      "ring": "stone-400"
-    },
-    "dark": {
-      "background": "stone-950",
-      "foreground": "stone-50",
-      "muted": "stone-800",
-      "muted-foreground": "stone-400",
-      "popover": "stone-950",
-      "popover-foreground": "stone-50",
-      "border": "stone-800",
-      "input": "stone-800",
-      "card": "stone-950",
-      "card-foreground": "stone-50",
-      "primary": "stone-50",
-      "primary-foreground": "stone-900",
-      "secondary": "stone-800",
-      "secondary-foreground": "stone-50",
-      "accent": "stone-800",
-      "accent-foreground": "stone-50",
-      "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "stone-800"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "20 14.3% 4.1%",
-      "muted": "60 4.8% 95.9%",
-      "muted-foreground": "25 5.3% 44.7%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "20 14.3% 4.1%",
-      "border": "20 5.9% 90%",
-      "input": "20 5.9% 90%",
-      "card": "0 0% 100%",
-      "card-foreground": "20 14.3% 4.1%",
-      "primary": "24 9.8% 10%",
-      "primary-foreground": "60 9.1% 97.8%",
-      "secondary": "60 4.8% 95.9%",
-      "secondary-foreground": "24 9.8% 10%",
-      "accent": "60 4.8% 95.9%",
-      "accent-foreground": "24 9.8% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "ring": "24 5.4% 63.9%"
-    },
-    "dark": {
-      "background": "20 14.3% 4.1%",
-      "foreground": "60 9.1% 97.8%",
-      "muted": "12 6.5% 15.1%",
-      "muted-foreground": "24 5.4% 63.9%",
-      "popover": "20 14.3% 4.1%",
-      "popover-foreground": "60 9.1% 97.8%",
-      "border": "12 6.5% 15.1%",
-      "input": "12 6.5% 15.1%",
-      "card": "20 14.3% 4.1%",
-      "card-foreground": "60 9.1% 97.8%",
-      "primary": "60 9.1% 97.8%",
-      "primary-foreground": "24 9.8% 10%",
-      "secondary": "12 6.5% 15.1%",
-      "secondary-foreground": "60 9.1% 97.8%",
-      "accent": "12 6.5% 15.1%",
-      "accent-foreground": "60 9.1% 97.8%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "12 6.5% 15.1%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n \n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n \n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n \n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n \n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n \n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --ring: 24 5.4% 63.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n \n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n \n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n \n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n \n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n \n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n \n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n \n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 12 6.5% 15.1%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
diff --git a/packages/nyxb/test/fixtures/colors/zinc.json b/packages/nyxb/test/fixtures/colors/zinc.json
deleted file mode 100644
index c26bf0e8..00000000
--- a/packages/nyxb/test/fixtures/colors/zinc.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "zinc-950",
-      "muted": "zinc-100",
-      "muted-foreground": "zinc-500",
-      "popover": "white",
-      "popover-foreground": "zinc-950",
-      "border": "zinc-200",
-      "input": "zinc-200",
-      "card": "white",
-      "card-foreground": "zinc-950",
-      "primary": "zinc-900",
-      "primary-foreground": "zinc-50",
-      "secondary": "zinc-100",
-      "secondary-foreground": "zinc-900",
-      "accent": "zinc-100",
-      "accent-foreground": "zinc-900",
-      "destructive": "red-500",
-      "destructive-foreground": "zinc-50",
-      "ring": "zinc-400"
-    },
-    "dark": {
-      "background": "zinc-950",
-      "foreground": "zinc-50",
-      "muted": "zinc-800",
-      "muted-foreground": "zinc-400",
-      "popover": "zinc-950",
-      "popover-foreground": "zinc-50",
-      "border": "zinc-800",
-      "input": "zinc-800",
-      "card": "zinc-950",
-      "card-foreground": "zinc-50",
-      "primary": "zinc-50",
-      "primary-foreground": "zinc-900",
-      "secondary": "zinc-800",
-      "secondary-foreground": "zinc-50",
-      "accent": "zinc-800",
-      "accent-foreground": "zinc-50",
-      "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "zinc-800"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "240 10% 3.9%",
-      "muted": "240 4.8% 95.9%",
-      "muted-foreground": "240 3.8% 46.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "240 10% 3.9%",
-      "border": "240 5.9% 90%",
-      "input": "240 5.9% 90%",
-      "card": "0 0% 100%",
-      "card-foreground": "240 10% 3.9%",
-      "primary": "240 5.9% 10%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "240 4.8% 95.9%",
-      "secondary-foreground": "240 5.9% 10%",
-      "accent": "240 4.8% 95.9%",
-      "accent-foreground": "240 5.9% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "ring": "240 5% 64.9%"
-    },
-    "dark": {
-      "background": "240 10% 3.9%",
-      "foreground": "0 0% 98%",
-      "muted": "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      "popover": "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "border": "240 3.7% 15.9%",
-      "input": "240 3.7% 15.9%",
-      "card": "240 10% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "240 5.9% 10%",
-      "secondary": "240 3.7% 15.9%",
-      "secondary-foreground": "0 0% 98%",
-      "accent": "240 3.7% 15.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "240 3.7% 15.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n \n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n \n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n \n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n \n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 240 5% 64.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n \n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n \n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 240 3.7% 15.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
diff --git a/packages/nyxb/test/fixtures/config-full/nyxbui.json b/packages/nyxb/test/fixtures/config-full/nyxbui.json
deleted file mode 100644
index a0b6aaa9..00000000
--- a/packages/nyxb/test/fixtures/config-full/nyxbui.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "style": "miami",
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "src/app/globals.css",
-    "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": "tw-"
-  },
-  "rsc": false,
-  "aliases": {
-    "utils": "~/lib/utils",
-    "components": "~/components",
-    "lib": "~/lib",
-    "hooks": "~/lib/hooks",
-    "ui": "~/ui"
-  },
-  "iconLibrary": "lucide"
-}
diff --git a/packages/nyxb/test/fixtures/config-full/package.json b/packages/nyxb/test/fixtures/config-full/package.json
deleted file mode 100644
index e244e0b8..00000000
--- a/packages/nyxb/test/fixtures/config-full/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-config-full",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "nyxb",
-  "license": "MIT"
-}
diff --git a/packages/nyxb/test/fixtures/config-full/src/app/globals.css b/packages/nyxb/test/fixtures/config-full/src/app/globals.css
deleted file mode 100644
index b5c61c95..00000000
--- a/packages/nyxb/test/fixtures/config-full/src/app/globals.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/packages/nyxb/test/fixtures/config-full/tsconfig.json b/packages/nyxb/test/fixtures/config-full/tsconfig.json
deleted file mode 100644
index 03ebb748..00000000
--- a/packages/nyxb/test/fixtures/config-full/tsconfig.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "checkJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "noUncheckedIndexedAccess": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./src/*"]
-    }
-  },
-  "include": [
-    ".eslintrc.cjs",
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.cjs",
-    "**/*.mjs"
-  ],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/nyxb/test/fixtures/config-invalid/nyxbui.json b/packages/nyxb/test/fixtures/config-invalid/nyxbui.json
deleted file mode 100644
index b5dd3f87..00000000
--- a/packages/nyxb/test/fixtures/config-invalid/nyxbui.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "ny": "./components",
-  "ui": "./ui",
-  "does-not-exist": "./does-not-exist"
-}
diff --git a/packages/nyxb/test/fixtures/config-invalid/package.json b/packages/nyxb/test/fixtures/config-invalid/package.json
deleted file mode 100644
index def0f311..00000000
--- a/packages/nyxb/test/fixtures/config-invalid/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-config-invalid",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "nyxb",
-  "license": "MIT"
-}
diff --git a/packages/nyxb/test/fixtures/config-jsx/jsconfig.json b/packages/nyxb/test/fixtures/config-jsx/jsconfig.json
deleted file mode 100644
index 555103d5..00000000
--- a/packages/nyxb/test/fixtures/config-jsx/jsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "paths": {
-      "~/*": ["./*"]
-    }
-  }
-}
diff --git a/packages/nyxb/test/fixtures/config-jsx/nyxbui.json b/packages/nyxb/test/fixtures/config-jsx/nyxbui.json
deleted file mode 100644
index 1abfbb59..00000000
--- a/packages/nyxb/test/fixtures/config-jsx/nyxbui.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "style": "default",
-  "tsx": false,
-  "tailwind": {
-    "config": "./tailwind.config.js",
-    "css": "./src/assets/css/tailwind.css",
-    "baseColor": "neutral",
-    "cssVariables": false
-  },
-  "aliases": {
-    "utils": "~/lib/utils",
-    "components": "~/components"
-  },
-  "iconLibrary": "radix"
-}
diff --git a/packages/nyxb/test/fixtures/config-jsx/package.json b/packages/nyxb/test/fixtures/config-jsx/package.json
deleted file mode 100644
index 5e845bb2..00000000
--- a/packages/nyxb/test/fixtures/config-jsx/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-config-partial",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "nyxb",
-  "license": "MIT"
-}
diff --git a/packages/nyxb/test/fixtures/config-none/package.json b/packages/nyxb/test/fixtures/config-none/package.json
deleted file mode 100644
index 48f98aa7..00000000
--- a/packages/nyxb/test/fixtures/config-none/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-config-none",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "nyxb",
-  "license": "MIT"
-}
diff --git a/packages/nyxb/test/fixtures/config-partial/nyxbui.json b/packages/nyxb/test/fixtures/config-partial/nyxbui.json
deleted file mode 100644
index 404a3299..00000000
--- a/packages/nyxb/test/fixtures/config-partial/nyxbui.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "style": "default",
-  "tailwind": {
-    "config": "./tailwind.config.ts",
-    "css": "./src/assets/css/tailwind.css",
-    "baseColor": "neutral",
-    "cssVariables": false
-  },
-  "aliases": {
-    "utils": "~/lib/utils",
-    "components": "~/components"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/config-partial/package.json b/packages/nyxb/test/fixtures/config-partial/package.json
deleted file mode 100644
index 5e845bb2..00000000
--- a/packages/nyxb/test/fixtures/config-partial/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-config-partial",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "nyxb",
-  "license": "MIT"
-}
diff --git a/packages/nyxb/test/fixtures/config-partial/tsconfig.json b/packages/nyxb/test/fixtures/config-partial/tsconfig.json
deleted file mode 100644
index 16b323bc..00000000
--- a/packages/nyxb/test/fixtures/config-partial/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./*"]
-    }
-  }
-}
diff --git a/packages/nyxb/test/fixtures/config-ui/nyxbui.json b/packages/nyxb/test/fixtures/config-ui/nyxbui.json
deleted file mode 100644
index bf79d5a5..00000000
--- a/packages/nyxb/test/fixtures/config-ui/nyxbui.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "style": "miami",
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "src/app/globals.css",
-    "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": "tw-"
-  },
-  "rsc": false,
-  "aliases": {
-    "utils": "~/lib/utils",
-    "components": "~/components",
-    "ui": "~/ui"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/config-ui/package.json b/packages/nyxb/test/fixtures/config-ui/package.json
deleted file mode 100644
index 1f6526d6..00000000
--- a/packages/nyxb/test/fixtures/config-ui/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-config-ui",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "nyxb",
-  "license": "MIT"
-}
diff --git a/packages/nyxb/test/fixtures/config-ui/tsconfig.json b/packages/nyxb/test/fixtures/config-ui/tsconfig.json
deleted file mode 100644
index 03ebb748..00000000
--- a/packages/nyxb/test/fixtures/config-ui/tsconfig.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "checkJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "noUncheckedIndexedAccess": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./src/*"]
-    }
-  },
-  "include": [
-    ".eslintrc.cjs",
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.cjs",
-    "**/*.mjs"
-  ],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/globals.css b/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/globals.css
deleted file mode 100644
index fd81e885..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/globals.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx b/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx
deleted file mode 100644
index ae845621..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/other.css b/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/other.css
deleted file mode 100644
index aa1634c2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx b/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx
deleted file mode 100644
index 7a8286b5..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import Image from 'next/image'
-
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore the Next.js 13 playground.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/next-env.d.ts b/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/next-env.d.ts
deleted file mode 100644
index 4f11a03d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/next.config.ts b/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/next.config.ts
deleted file mode 100644
index 767719fc..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/next.config.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/package.json b/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/package.json
deleted file mode 100644
index d43fb081..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "test-cli-next-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js b/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js
deleted file mode 100644
index 33ad091d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts b/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts
deleted file mode 100644
index 571ebb0f..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// @ts-nocheck
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}'
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
-      }
-    }
-  },
-  plugins: []
-}
-export default config
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/tsconfig.json b/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/tsconfig.json
deleted file mode 100644
index 0751e3ea..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/tsconfig.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@custom-alias/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/next-env.d.ts b/packages/nyxb/test/fixtures/frameworks/next-app-src/next-env.d.ts
deleted file mode 100644
index 4f11a03d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-src/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/next.config.js b/packages/nyxb/test/fixtures/frameworks/next-app-src/next.config.js
deleted file mode 100644
index 767719fc..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-src/next.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/other.css b/packages/nyxb/test/fixtures/frameworks/next-app-src/other.css
deleted file mode 100644
index aa1634c2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-src/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/pnpm-lock.yaml b/packages/nyxb/test/fixtures/frameworks/next-app-src/pnpm-lock.yaml
deleted file mode 100644
index a8ca0205..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-src/pnpm-lock.yaml
+++ /dev/null
@@ -1,2620 +0,0 @@
-lockfileVersion: '6.0'
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
-dependencies:
-  '@types/node':
-    specifier: 20.6.2
-    version: 20.6.2
-  '@types/react':
-    specifier: 18.2.22
-    version: 18.2.22
-  '@types/react-dom':
-    specifier: 18.2.7
-    version: 18.2.7
-  autoprefixer:
-    specifier: 10.4.15
-    version: 10.4.15(postcss@8.4.30)
-  eslint:
-    specifier: 8.49.0
-    version: 8.49.0
-  eslint-config-next:
-    specifier: 13.4.19
-    version: 13.4.19(eslint@8.49.0)(typescript@5.2.2)
-  next:
-    specifier: 13.4.19
-    version: 13.4.19(react-dom@18.2.0)(react@18.2.0)
-  postcss:
-    specifier: 8.4.30
-    version: 8.4.30
-  react:
-    specifier: 18.2.0
-    version: 18.2.0
-  react-dom:
-    specifier: 18.2.0
-    version: 18.2.0(react@18.2.0)
-  tailwindcss:
-    specifier: 3.3.3
-    version: 3.3.3
-  typescript:
-    specifier: 5.2.2
-    version: 5.2.2
-
-packages:
-
-  /@aashutoshrathi/word-wrap@1.2.6:
-    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /@alloc/quick-lru@5.2.0:
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /@babel/runtime@7.22.15:
-    resolution: {integrity: sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.14.0
-    dev: false
-
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.49.0):
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-    dependencies:
-      eslint: 8.49.0
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /@eslint-community/regexpp@4.8.1:
-    resolution: {integrity: sha512-PWiOzLIUAjN/w5K17PoF4n6sKBw0gqLHPhywmYHP4t1VFQQVYeb1yWsJwnMVEMl3tUHME7X/SJPZLmtG7XBDxQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-    dev: false
-
-  /@eslint/eslintrc@2.1.2:
-    resolution: {integrity: sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 9.6.1
-      globals: 13.21.0
-      ignore: 5.2.4
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@eslint/js@8.49.0:
-    resolution: {integrity: sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: false
-
-  /@humanwhocodes/config-array@0.11.11:
-    resolution: {integrity: sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==}
-    engines: {node: '>=10.10.0'}
-    dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@humanwhocodes/module-importer@1.0.1:
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
-    dev: false
-
-  /@humanwhocodes/object-schema@1.2.1:
-    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
-    dev: false
-
-  /@jridgewell/gen-mapping@0.3.3:
-    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.19
-    dev: false
-
-  /@jridgewell/resolve-uri@3.1.1:
-    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
-    engines: {node: '>=6.0.0'}
-    dev: false
-
-  /@jridgewell/set-array@1.1.2:
-    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
-    engines: {node: '>=6.0.0'}
-    dev: false
-
-  /@jridgewell/sourcemap-codec@1.4.15:
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: false
-
-  /@jridgewell/trace-mapping@0.3.19:
-    resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==}
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: false
-
-  /@next/env@13.4.19:
-    resolution: {integrity: sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==}
-    dev: false
-
-  /@next/eslint-plugin-next@13.4.19:
-    resolution: {integrity: sha512-N/O+zGb6wZQdwu6atMZHbR7T9Np5SUFUjZqCbj0sXm+MwQO35M8TazVB4otm87GkXYs2l6OPwARd3/PUWhZBVQ==}
-    dependencies:
-      glob: 7.1.7
-    dev: false
-
-  /@next/swc-darwin-arm64@13.4.19:
-    resolution: {integrity: sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-darwin-x64@13.4.19:
-    resolution: {integrity: sha512-jyzO6wwYhx6F+7gD8ddZfuqO4TtpJdw3wyOduR4fxTUCm3aLw7YmHGYNjS0xRSYGAkLpBkH1E0RcelyId6lNsw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-arm64-gnu@13.4.19:
-    resolution: {integrity: sha512-vdlnIlaAEh6H+G6HrKZB9c2zJKnpPVKnA6LBwjwT2BTjxI7e0Hx30+FoWCgi50e+YO49p6oPOtesP9mXDRiiUg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-arm64-musl@13.4.19:
-    resolution: {integrity: sha512-aU0HkH2XPgxqrbNRBFb3si9Ahu/CpaR5RPmN2s9GiM9qJCiBBlZtRTiEca+DC+xRPyCThTtWYgxjWHgU7ZkyvA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-x64-gnu@13.4.19:
-    resolution: {integrity: sha512-htwOEagMa/CXNykFFeAHHvMJeqZfNQEoQvHfsA4wgg5QqGNqD5soeCer4oGlCol6NGUxknrQO6VEustcv+Md+g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-x64-musl@13.4.19:
-    resolution: {integrity: sha512-4Gj4vvtbK1JH8ApWTT214b3GwUh9EKKQjY41hH/t+u55Knxi/0wesMzwQRhppK6Ddalhu0TEttbiJ+wRcoEj5Q==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-arm64-msvc@13.4.19:
-    resolution: {integrity: sha512-bUfDevQK4NsIAHXs3/JNgnvEY+LRyneDN788W2NYiRIIzmILjba7LaQTfihuFawZDhRtkYCv3JDC3B4TwnmRJw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-ia32-msvc@13.4.19:
-    resolution: {integrity: sha512-Y5kikILFAr81LYIFaw6j/NrOtmiM4Sf3GtOc0pn50ez2GCkr+oejYuKGcwAwq3jiTKuzF6OF4iT2INPoxRycEA==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-x64-msvc@13.4.19:
-    resolution: {integrity: sha512-YzA78jBDXMYiINdPdJJwGgPNT3YqBNNGhsthsDoWHL9p24tEJn9ViQf/ZqTbwSpX/RrkPupLfuuTH2sf73JBAw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@nodelib/fs.scandir@2.1.5:
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-    dev: false
-
-  /@nodelib/fs.stat@2.0.5:
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-    dev: false
-
-  /@nodelib/fs.walk@1.2.8:
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.15.0
-    dev: false
-
-  /@rushstack/eslint-patch@1.4.0:
-    resolution: {integrity: sha512-cEjvTPU32OM9lUFegJagO0mRnIn+rbqrG89vV8/xLnLFX0DoR0r1oy5IlTga71Q7uT3Qus7qm7wgeiMT/+Irlg==}
-    dev: false
-
-  /@swc/helpers@0.5.1:
-    resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==}
-    dependencies:
-      tslib: 2.6.2
-    dev: false
-
-  /@types/json5@0.0.29:
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
-    dev: false
-
-  /@types/node@20.6.2:
-    resolution: {integrity: sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==}
-    dev: false
-
-  /@types/prop-types@15.7.6:
-    resolution: {integrity: sha512-RK/kBbYOQQHLYj9Z95eh7S6t7gq4Ojt/NT8HTk8bWVhA5DaF+5SMnxHKkP4gPNN3wAZkKP+VjAf0ebtYzf+fxg==}
-    dev: false
-
-  /@types/react-dom@18.2.7:
-    resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
-    dependencies:
-      '@types/react': 18.2.22
-    dev: false
-
-  /@types/react@18.2.22:
-    resolution: {integrity: sha512-60fLTOLqzarLED2O3UQImc/lsNRgG0jE/a1mPW9KjMemY0LMITWEsbS4VvZ4p6rorEHd5YKxxmMKSDK505GHpA==}
-    dependencies:
-      '@types/prop-types': 15.7.6
-      '@types/scheduler': 0.16.3
-      csstype: 3.1.2
-    dev: false
-
-  /@types/scheduler@0.16.3:
-    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
-    dev: false
-
-  /@typescript-eslint/parser@6.7.2(eslint@8.49.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-KA3E4ox0ws+SPyxQf9iSI25R6b4Ne78ORhNHeVKrPQnoYsb9UhieoiRoJgrzgEeKGOXhcY1i8YtOeCHHTDa6Fw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/scope-manager': 6.7.2
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/typescript-estree': 6.7.2(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.7.2
-      debug: 4.3.4
-      eslint: 8.49.0
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@typescript-eslint/scope-manager@6.7.2:
-    resolution: {integrity: sha512-bgi6plgyZjEqapr7u2mhxGR6E8WCzKNUFWNh6fkpVe9+yzRZeYtDTbsIBzKbcxI+r1qVWt6VIoMSNZ4r2A+6Yw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/visitor-keys': 6.7.2
-    dev: false
-
-  /@typescript-eslint/types@6.7.2:
-    resolution: {integrity: sha512-flJYwMYgnUNDAN9/GAI3l8+wTmvTYdv64fcH8aoJK76Y+1FCZ08RtI5zDerM/FYT5DMkAc+19E4aLmd5KqdFyg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dev: false
-
-  /@typescript-eslint/typescript-estree@6.7.2(typescript@5.2.2):
-    resolution: {integrity: sha512-kiJKVMLkoSciGyFU0TOY0fRxnp9qq1AzVOHNeN1+B9erKFCJ4Z8WdjAkKQPP+b1pWStGFqezMLltxO+308dJTQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/visitor-keys': 6.7.2
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@typescript-eslint/visitor-keys@6.7.2:
-    resolution: {integrity: sha512-uVw9VIMFBUTz8rIeaUT3fFe8xIUx8r4ywAdlQv1ifH+6acn/XF8Y6rwJ7XNmkNMDrTW+7+vxFFPIF40nJCVsMQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /acorn-jsx@5.3.2(acorn@8.10.0):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.10.0
-    dev: false
-
-  /acorn@8.10.0:
-    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-    dev: false
-
-  /ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
-    dev: false
-
-  /ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-    dependencies:
-      color-convert: 2.0.1
-    dev: false
-
-  /any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: false
-
-  /anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-    dev: false
-
-  /arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: false
-
-  /argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: false
-
-  /aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-    dependencies:
-      dequal: 2.0.3
-    dev: false
-
-  /array-buffer-byte-length@1.0.0:
-    resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
-    dependencies:
-      call-bind: 1.0.2
-      is-array-buffer: 3.0.2
-    dev: false
-
-  /array-includes@3.1.7:
-    resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      is-string: 1.0.7
-    dev: false
-
-  /array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /array.prototype.findlastindex@1.2.3:
-    resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /array.prototype.flat@1.3.2:
-    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-    dev: false
-
-  /array.prototype.flatmap@1.3.2:
-    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-    dev: false
-
-  /array.prototype.tosorted@1.1.2:
-    resolution: {integrity: sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /arraybuffer.prototype.slice@1.0.2:
-    resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      is-array-buffer: 3.0.2
-      is-shared-array-buffer: 1.0.2
-    dev: false
-
-  /ast-types-flow@0.0.7:
-    resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==}
-    dev: false
-
-  /asynciterator.prototype@1.0.0:
-    resolution: {integrity: sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /autoprefixer@10.4.15(postcss@8.4.30):
-    resolution: {integrity: sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      browserslist: 4.21.10
-      caniuse-lite: 1.0.30001538
-      fraction.js: 4.3.6
-      normalize-range: 0.1.2
-      picocolors: 1.0.0
-      postcss: 8.4.30
-      postcss-value-parser: 4.2.0
-    dev: false
-
-  /available-typed-arrays@1.0.5:
-    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /axe-core@4.8.1:
-    resolution: {integrity: sha512-9l850jDDPnKq48nbad8SiEelCv4OrUWrKab/cPj0GScVg6cb6NbCCt/Ulk26QEq5jP9NnGr04Bit1BHyV6r5CQ==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /axobject-query@3.2.1:
-    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
-    dependencies:
-      dequal: 2.0.3
-    dev: false
-
-  /balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: false
-
-  /binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /brace-expansion@1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
-    dev: false
-
-  /braces@3.0.2:
-    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
-    engines: {node: '>=8'}
-    dependencies:
-      fill-range: 7.0.1
-    dev: false
-
-  /browserslist@4.21.10:
-    resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: 1.0.30001538
-      electron-to-chromium: 1.4.523
-      node-releases: 2.0.13
-      update-browserslist-db: 1.0.11(browserslist@4.21.10)
-    dev: false
-
-  /busboy@1.6.0:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
-    dependencies:
-      streamsearch: 1.1.0
-    dev: false
-
-  /call-bind@1.0.2:
-    resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
-    dependencies:
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /caniuse-lite@1.0.30001538:
-    resolution: {integrity: sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==}
-    dev: false
-
-  /chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-    dev: false
-
-  /chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
-    engines: {node: '>= 8.10.0'}
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.2
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: false
-
-  /client-only@0.0.1:
-    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-    dev: false
-
-  /color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
-    dependencies:
-      color-name: 1.1.4
-    dev: false
-
-  /color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: false
-
-  /commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-    dev: false
-
-  /cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
-    engines: {node: '>= 8'}
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-    dev: false
-
-  /cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: false
-
-  /csstype@3.1.2:
-    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
-    dev: false
-
-  /damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
-    dev: false
-
-  /debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
-    dev: false
-
-  /debug@4.3.4:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.2
-    dev: false
-
-  /deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-    dev: false
-
-  /define-data-property@1.1.0:
-    resolution: {integrity: sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      gopd: 1.0.1
-      has-property-descriptors: 1.0.0
-    dev: false
-
-  /define-properties@1.2.1:
-    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.0
-      has-property-descriptors: 1.0.0
-      object-keys: 1.1.1
-    dev: false
-
-  /dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: false
-
-  /dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
-    engines: {node: '>=8'}
-    dependencies:
-      path-type: 4.0.0
-    dev: false
-
-  /dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: false
-
-  /doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: false
-
-  /doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: false
-
-  /electron-to-chromium@1.4.523:
-    resolution: {integrity: sha512-9AreocSUWnzNtvLcbpng6N+GkXnCcBR80IQkxRC9Dfdyg4gaWNUPBujAHUpKkiUkoSoR9UlhA4zD/IgBklmhzg==}
-    dev: false
-
-  /emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: false
-
-  /enhanced-resolve@5.15.0:
-    resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.2.1
-    dev: false
-
-  /es-abstract@1.22.2:
-    resolution: {integrity: sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      arraybuffer.prototype.slice: 1.0.2
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      es-set-tostringtag: 2.0.1
-      es-to-primitive: 1.2.1
-      function.prototype.name: 1.1.6
-      get-intrinsic: 1.2.1
-      get-symbol-description: 1.0.0
-      globalthis: 1.0.3
-      gopd: 1.0.1
-      has: 1.0.3
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      is-array-buffer: 3.0.2
-      is-callable: 1.2.7
-      is-negative-zero: 2.0.2
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.2
-      is-string: 1.0.7
-      is-typed-array: 1.1.12
-      is-weakref: 1.0.2
-      object-inspect: 1.12.3
-      object-keys: 1.1.1
-      object.assign: 4.1.4
-      regexp.prototype.flags: 1.5.1
-      safe-array-concat: 1.0.1
-      safe-regex-test: 1.0.0
-      string.prototype.trim: 1.2.8
-      string.prototype.trimend: 1.0.7
-      string.prototype.trimstart: 1.0.7
-      typed-array-buffer: 1.0.0
-      typed-array-byte-length: 1.0.0
-      typed-array-byte-offset: 1.0.0
-      typed-array-length: 1.0.4
-      unbox-primitive: 1.0.2
-      which-typed-array: 1.1.11
-    dev: false
-
-  /es-iterator-helpers@1.0.15:
-    resolution: {integrity: sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==}
-    dependencies:
-      asynciterator.prototype: 1.0.0
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-set-tostringtag: 2.0.1
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
-      globalthis: 1.0.3
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      iterator.prototype: 1.1.2
-      safe-array-concat: 1.0.1
-    dev: false
-
-  /es-set-tostringtag@2.0.1:
-    resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.3
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /es-shim-unscopables@1.0.0:
-    resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==}
-    dependencies:
-      has: 1.0.3
-    dev: false
-
-  /es-to-primitive@1.2.1:
-    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.0.5
-      is-symbol: 1.0.4
-    dev: false
-
-  /escalade@3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /eslint-config-next@13.4.19(eslint@8.49.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-WE8367sqMnjhWHvR5OivmfwENRQ1ixfNE9hZwQqNCsd+iM3KnuMc1V8Pt6ytgjxjf23D+xbesADv9x3xaKfT3g==}
-    peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@next/eslint-plugin-next': 13.4.19
-      '@rushstack/eslint-patch': 1.4.0
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      eslint-plugin-jsx-a11y: 6.7.1(eslint@8.49.0)
-      eslint-plugin-react: 7.33.2(eslint@8.49.0)
-      eslint-plugin-react-hooks: 4.6.0(eslint@8.49.0)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
-    dependencies:
-      debug: 3.2.7
-      is-core-module: 2.13.0
-      resolve: 1.22.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /eslint-import-resolver-typescript@3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0):
-    resolution: {integrity: sha512-QTHR9ddNnn35RTxlaEnx2gCxqFlF2SEN0SE2d17SqwyM7YOSI2GHWRYp5BiRkObTUNYPupC/3Fq2a0PpT+EKpg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-    dependencies:
-      debug: 4.3.4
-      enhanced-resolve: 5.15.0
-      eslint: 8.49.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      fast-glob: 3.3.1
-      get-tsconfig: 4.7.0
-      is-core-module: 2.13.0
-      is-glob: 4.0.3
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0):
-    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      debug: 3.2.7
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0)
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0):
-    resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      array-includes: 3.1.7
-      array.prototype.findlastindex: 1.2.3
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      has: 1.0.3
-      is-core-module: 2.13.0
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.7
-      object.groupby: 1.0.1
-      object.values: 1.1.7
-      semver: 6.3.1
-      tsconfig-paths: 3.14.2
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-plugin-jsx-a11y@6.7.1(eslint@8.49.0):
-    resolution: {integrity: sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-    dependencies:
-      '@babel/runtime': 7.22.15
-      aria-query: 5.3.0
-      array-includes: 3.1.7
-      array.prototype.flatmap: 1.3.2
-      ast-types-flow: 0.0.7
-      axe-core: 4.8.1
-      axobject-query: 3.2.1
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      eslint: 8.49.0
-      has: 1.0.3
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.5
-      minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-      semver: 6.3.1
-    dev: false
-
-  /eslint-plugin-react-hooks@4.6.0(eslint@8.49.0):
-    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-    dependencies:
-      eslint: 8.49.0
-    dev: false
-
-  /eslint-plugin-react@7.33.2(eslint@8.49.0):
-    resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-    dependencies:
-      array-includes: 3.1.7
-      array.prototype.flatmap: 1.3.2
-      array.prototype.tosorted: 1.1.2
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.0.15
-      eslint: 8.49.0
-      estraverse: 5.3.0
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-      object.hasown: 1.1.3
-      object.values: 1.1.7
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.4
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.10
-    dev: false
-
-  /eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: false
-
-  /eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: false
-
-  /eslint@8.49.0:
-    resolution: {integrity: sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    hasBin: true
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.49.0)
-      '@eslint-community/regexpp': 4.8.1
-      '@eslint/eslintrc': 2.1.2
-      '@eslint/js': 8.49.0
-      '@humanwhocodes/config-array': 0.11.11
-      '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
-      doctrine: 3.0.0
-      escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.5.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      globals: 13.21.0
-      graphemer: 1.4.0
-      ignore: 5.2.4
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.3
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.10.0
-      acorn-jsx: 5.3.2(acorn@8.10.0)
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
-    engines: {node: '>=0.10'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: false
-
-  /esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: false
-
-  /estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
-    dev: false
-
-  /esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-    dev: false
-
-  /fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-    dev: false
-
-  /fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
-    dev: false
-
-  /fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-    dev: false
-
-  /fastq@1.15.0:
-    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
-    dependencies:
-      reusify: 1.0.4
-    dev: false
-
-  /file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
-    dependencies:
-      flat-cache: 3.1.0
-    dev: false
-
-  /fill-range@7.0.1:
-    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
-    engines: {node: '>=8'}
-    dependencies:
-      to-regex-range: 5.0.1
-    dev: false
-
-  /find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
-    dev: false
-
-  /flat-cache@3.1.0:
-    resolution: {integrity: sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      flatted: 3.2.9
-      keyv: 4.5.3
-      rimraf: 3.0.2
-    dev: false
-
-  /flatted@3.2.9:
-    resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
-    dev: false
-
-  /for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
-    dependencies:
-      is-callable: 1.2.7
-    dev: false
-
-  /fraction.js@4.3.6:
-    resolution: {integrity: sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==}
-    dev: false
-
-  /fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: false
-
-  /fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /function-bind@1.1.1:
-    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: false
-
-  /function.prototype.name@1.1.6:
-    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      functions-have-names: 1.2.3
-    dev: false
-
-  /functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
-    dev: false
-
-  /get-intrinsic@1.2.1:
-    resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
-    dependencies:
-      function-bind: 1.1.1
-      has: 1.0.3
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-    dev: false
-
-  /get-symbol-description@1.0.0:
-    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /get-tsconfig@4.7.0:
-    resolution: {integrity: sha512-pmjiZ7xtB8URYm74PlGJozDNyhvsVLUcpBa8DZBG3bWHwaHa9bPiRpiSfovw+fjhwONSCWKRyk+JQHEGZmMrzw==}
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-    dev: false
-
-  /glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: false
-
-  /glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: false
-
-  /glob-to-regexp@0.4.1:
-    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
-    dev: false
-
-  /glob@7.1.6:
-    resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /glob@7.1.7:
-    resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /globals@13.21.0:
-    resolution: {integrity: sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==}
-    engines: {node: '>=8'}
-    dependencies:
-      type-fest: 0.20.2
-    dev: false
-
-  /globalthis@1.0.3:
-    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-properties: 1.2.1
-    dev: false
-
-  /globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.1
-      ignore: 5.2.4
-      merge2: 1.4.1
-      slash: 3.0.0
-    dev: false
-
-  /gopd@1.0.1:
-    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
-    dependencies:
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-    dev: false
-
-  /graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-    dev: false
-
-  /has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
-    dev: false
-
-  /has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /has-property-descriptors@1.0.0:
-    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
-    dependencies:
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /has-proto@1.0.1:
-    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /has-symbols@1.0.3:
-    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /has-tostringtag@1.0.0:
-    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /has@1.0.3:
-    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
-    engines: {node: '>= 0.4.0'}
-    dependencies:
-      function-bind: 1.1.1
-    dev: false
-
-  /ignore@5.2.4:
-    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
-    engines: {node: '>= 4'}
-    dev: false
-
-  /import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
-    engines: {node: '>=6'}
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-    dev: false
-
-  /imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
-    dev: false
-
-  /inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-    dev: false
-
-  /inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: false
-
-  /internal-slot@1.0.5:
-    resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.3
-      side-channel: 1.0.4
-    dev: false
-
-  /is-array-buffer@3.0.2:
-    resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /is-async-function@2.0.0:
-    resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
-    dependencies:
-      has-bigints: 1.0.2
-    dev: false
-
-  /is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-    dependencies:
-      binary-extensions: 2.2.0
-    dev: false
-
-  /is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /is-core-module@2.13.0:
-    resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}
-    dependencies:
-      has: 1.0.3
-    dev: false
-
-  /is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /is-finalizationregistry@1.0.2:
-    resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-generator-function@1.0.10:
-    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-extglob: 2.1.1
-    dev: false
-
-  /is-map@2.0.2:
-    resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
-    dev: false
-
-  /is-negative-zero@2.0.2:
-    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
-    dev: false
-
-  /is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /is-regex@1.1.4:
-    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-set@2.0.2:
-    resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
-    dev: false
-
-  /is-shared-array-buffer@1.0.2:
-    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-string@1.0.7:
-    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /is-typed-array@1.1.12:
-    resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      which-typed-array: 1.1.11
-    dev: false
-
-  /is-weakmap@2.0.1:
-    resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
-    dev: false
-
-  /is-weakref@1.0.2:
-    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-weakset@2.0.2:
-    resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-    dev: false
-
-  /isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: false
-
-  /iterator.prototype@1.1.2:
-    resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
-    dependencies:
-      define-properties: 1.2.1
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      reflect.getprototypeof: 1.0.4
-      set-function-name: 2.0.1
-    dev: false
-
-  /jiti@1.20.0:
-    resolution: {integrity: sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==}
-    hasBin: true
-    dev: false
-
-  /js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: false
-
-  /js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
-    dependencies:
-      argparse: 2.0.1
-    dev: false
-
-  /json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-    dev: false
-
-  /json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
-    dev: false
-
-  /json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-    dev: false
-
-  /json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
-    dependencies:
-      minimist: 1.2.8
-    dev: false
-
-  /jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
-    dependencies:
-      array-includes: 3.1.7
-      array.prototype.flat: 1.3.2
-      object.assign: 4.1.4
-      object.values: 1.1.7
-    dev: false
-
-  /keyv@4.5.3:
-    resolution: {integrity: sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==}
-    dependencies:
-      json-buffer: 3.0.1
-    dev: false
-
-  /language-subtag-registry@0.3.22:
-    resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
-    dev: false
-
-  /language-tags@1.0.5:
-    resolution: {integrity: sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==}
-    dependencies:
-      language-subtag-registry: 0.3.22
-    dev: false
-
-  /levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-    dev: false
-
-  /lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: false
-
-  /locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
-    dependencies:
-      p-locate: 5.0.0
-    dev: false
-
-  /lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: false
-
-  /loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-    dependencies:
-      js-tokens: 4.0.0
-    dev: false
-
-  /lru-cache@6.0.0:
-    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
-    engines: {node: '>=10'}
-    dependencies:
-      yallist: 4.0.0
-    dev: false
-
-  /merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-    dev: false
-
-  /micromatch@4.0.5:
-    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
-    engines: {node: '>=8.6'}
-    dependencies:
-      braces: 3.0.2
-      picomatch: 2.3.1
-    dev: false
-
-  /minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
-    dependencies:
-      brace-expansion: 1.1.11
-    dev: false
-
-  /minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-    dev: false
-
-  /ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: false
-
-  /ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-    dev: false
-
-  /mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-    dev: false
-
-  /nanoid@3.3.6:
-    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-    dev: false
-
-  /natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-    dev: false
-
-  /next@13.4.19(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==}
-    engines: {node: '>=16.8.0'}
-    hasBin: true
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      sass:
-        optional: true
-    dependencies:
-      '@next/env': 13.4.19
-      '@swc/helpers': 0.5.1
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001538
-      postcss: 8.4.14
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(react@18.2.0)
-      watchpack: 2.4.0
-      zod: 3.21.4
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 13.4.19
-      '@next/swc-darwin-x64': 13.4.19
-      '@next/swc-linux-arm64-gnu': 13.4.19
-      '@next/swc-linux-arm64-musl': 13.4.19
-      '@next/swc-linux-x64-gnu': 13.4.19
-      '@next/swc-linux-x64-musl': 13.4.19
-      '@next/swc-win32-arm64-msvc': 13.4.19
-      '@next/swc-win32-ia32-msvc': 13.4.19
-      '@next/swc-win32-x64-msvc': 13.4.19
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-    dev: false
-
-  /node-releases@2.0.13:
-    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
-    dev: false
-
-  /normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /object-inspect@1.12.3:
-    resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
-    dev: false
-
-  /object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /object.assign@4.1.4:
-    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      has-symbols: 1.0.3
-      object-keys: 1.1.1
-    dev: false
-
-  /object.entries@1.1.7:
-    resolution: {integrity: sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.fromentries@2.0.7:
-    resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.groupby@1.0.1:
-    resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /object.hasown@1.1.3:
-    resolution: {integrity: sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==}
-    dependencies:
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.values@1.1.7:
-    resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-    dependencies:
-      wrappy: 1.0.2
-    dev: false
-
-  /optionator@0.9.3:
-    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-    dev: false
-
-  /p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
-    dependencies:
-      yocto-queue: 0.1.0
-    dev: false
-
-  /p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
-    dependencies:
-      p-limit: 3.1.0
-    dev: false
-
-  /parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
-    dependencies:
-      callsites: 3.1.0
-    dev: false
-
-  /path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: false
-
-  /path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /picocolors@1.0.0:
-    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: false
-
-  /picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
-    dev: false
-
-  /pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /postcss-import@15.1.0(postcss@8.4.30):
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-    dependencies:
-      postcss: 8.4.30
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.6
-    dev: false
-
-  /postcss-js@4.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.30
-    dev: false
-
-  /postcss-load-config@4.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      lilconfig: 2.1.0
-      postcss: 8.4.30
-      yaml: 2.3.2
-    dev: false
-
-  /postcss-nested@6.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-    dependencies:
-      postcss: 8.4.30
-      postcss-selector-parser: 6.0.13
-    dev: false
-
-  /postcss-selector-parser@6.0.13:
-    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-    dev: false
-
-  /postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: false
-
-  /postcss@8.4.14:
-    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: false
-
-  /postcss@8.4.30:
-    resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: false
-
-  /prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
-    dev: false
-
-  /prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-    dev: false
-
-  /punycode@2.3.0:
-    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: false
-
-  /react-dom@18.2.0(react@18.2.0):
-    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
-    peerDependencies:
-      react: ^18.2.0
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.2.0
-      scheduler: 0.23.0
-    dev: false
-
-  /react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-    dev: false
-
-  /react@18.2.0:
-    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
-  /read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-    dependencies:
-      pify: 2.3.0
-    dev: false
-
-  /readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-    dependencies:
-      picomatch: 2.3.1
-    dev: false
-
-  /reflect.getprototypeof@1.0.4:
-    resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      globalthis: 1.0.3
-      which-builtin-type: 1.1.3
-    dev: false
-
-  /regenerator-runtime@0.14.0:
-    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
-    dev: false
-
-  /regexp.prototype.flags@1.5.1:
-    resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      set-function-name: 2.0.1
-    dev: false
-
-  /resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
-    dev: false
-
-  /resolve@1.22.6:
-    resolution: {integrity: sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==}
-    hasBin: true
-    dependencies:
-      is-core-module: 2.13.0
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    dev: false
-
-  /resolve@2.0.0-next.4:
-    resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
-    hasBin: true
-    dependencies:
-      is-core-module: 2.13.0
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    dev: false
-
-  /reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: false
-
-  /rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    hasBin: true
-    dependencies:
-      glob: 7.2.3
-    dev: false
-
-  /run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-    dependencies:
-      queue-microtask: 1.2.3
-    dev: false
-
-  /safe-array-concat@1.0.1:
-    resolution: {integrity: sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==}
-    engines: {node: '>=0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      isarray: 2.0.5
-    dev: false
-
-  /safe-regex-test@1.0.0:
-    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-regex: 1.1.4
-    dev: false
-
-  /scheduler@0.23.0:
-    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
-  /semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-    dev: false
-
-  /semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      lru-cache: 6.0.0
-    dev: false
-
-  /set-function-name@2.0.1:
-    resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.0
-      functions-have-names: 1.2.3
-      has-property-descriptors: 1.0.0
-    dev: false
-
-  /shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-    dependencies:
-      shebang-regex: 3.0.0
-    dev: false
-
-  /shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /side-channel@1.0.4:
-    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      object-inspect: 1.12.3
-    dev: false
-
-  /slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /source-map-js@1.0.2:
-    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
-    dev: false
-
-  /string.prototype.matchall@4.0.10:
-    resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      regexp.prototype.flags: 1.5.1
-      set-function-name: 2.0.1
-      side-channel: 1.0.4
-    dev: false
-
-  /string.prototype.trim@1.2.8:
-    resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /string.prototype.trimend@1.0.7:
-    resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /string.prototype.trimstart@1.0.7:
-    resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
-    dependencies:
-      ansi-regex: 5.0.1
-    dev: false
-
-  /strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /styled-jsx@5.1.1(react@18.2.0):
-    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
-    engines: {node: '>= 12.0.0'}
-    peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
-    dependencies:
-      client-only: 0.0.1
-      react: 18.2.0
-    dev: false
-
-  /sucrase@3.34.0:
-    resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==}
-    engines: {node: '>=8'}
-    hasBin: true
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.3
-      commander: 4.1.1
-      glob: 7.1.6
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.6
-      ts-interface-checker: 0.1.13
-    dev: false
-
-  /supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
-    dependencies:
-      has-flag: 4.0.0
-    dev: false
-
-  /supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /tailwindcss@3.3.3:
-    resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.5.3
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.1
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.20.0
-      lilconfig: 2.1.0
-      micromatch: 4.0.5
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.30
-      postcss-import: 15.1.0(postcss@8.4.30)
-      postcss-js: 4.0.1(postcss@8.4.30)
-      postcss-load-config: 4.0.1(postcss@8.4.30)
-      postcss-nested: 6.0.1(postcss@8.4.30)
-      postcss-selector-parser: 6.0.13
-      resolve: 1.22.6
-      sucrase: 3.34.0
-    transitivePeerDependencies:
-      - ts-node
-    dev: false
-
-  /tapable@2.2.1:
-    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-    dev: false
-
-  /thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-    dependencies:
-      thenify: 3.3.1
-    dev: false
-
-  /thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-    dependencies:
-      any-promise: 1.3.0
-    dev: false
-
-  /to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
-    dependencies:
-      is-number: 7.0.0
-    dev: false
-
-  /ts-api-utils@1.0.3(typescript@5.2.2):
-    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
-    engines: {node: '>=16.13.0'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-    dependencies:
-      typescript: 5.2.2
-    dev: false
-
-  /ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: false
-
-  /tsconfig-paths@3.14.2:
-    resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
-    dependencies:
-      '@types/json5': 0.0.29
-      json5: 1.0.2
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-    dev: false
-
-  /tslib@2.6.2:
-    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: false
-
-  /type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.2.1
-    dev: false
-
-  /type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /typed-array-buffer@1.0.0:
-    resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-byte-length@1.0.0:
-    resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-byte-offset@1.0.0:
-    resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-length@1.0.4:
-    resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
-    dependencies:
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typescript@5.2.2:
-    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-    dev: false
-
-  /unbox-primitive@1.0.2:
-    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
-    dependencies:
-      call-bind: 1.0.2
-      has-bigints: 1.0.2
-      has-symbols: 1.0.3
-      which-boxed-primitive: 1.0.2
-    dev: false
-
-  /update-browserslist-db@1.0.11(browserslist@4.21.10):
-    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-    dependencies:
-      browserslist: 4.21.10
-      escalade: 3.1.1
-      picocolors: 1.0.0
-    dev: false
-
-  /uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
-    dependencies:
-      punycode: 2.3.0
-    dev: false
-
-  /util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: false
-
-  /watchpack@2.4.0:
-    resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-    dev: false
-
-  /which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
-    dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.0.7
-      is-symbol: 1.0.4
-    dev: false
-
-  /which-builtin-type@1.1.3:
-    resolution: {integrity: sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      function.prototype.name: 1.1.6
-      has-tostringtag: 1.0.0
-      is-async-function: 2.0.0
-      is-date-object: 1.0.5
-      is-finalizationregistry: 1.0.2
-      is-generator-function: 1.0.10
-      is-regex: 1.1.4
-      is-weakref: 1.0.2
-      isarray: 2.0.5
-      which-boxed-primitive: 1.0.2
-      which-collection: 1.0.1
-      which-typed-array: 1.1.11
-    dev: false
-
-  /which-collection@1.0.1:
-    resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
-    dependencies:
-      is-map: 2.0.2
-      is-set: 2.0.2
-      is-weakmap: 2.0.1
-      is-weakset: 2.0.2
-    dev: false
-
-  /which-typed-array@1.1.11:
-    resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
-    dependencies:
-      isexe: 2.0.0
-    dev: false
-
-  /wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: false
-
-  /yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-    dev: false
-
-  /yaml@2.3.2:
-    resolution: {integrity: sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==}
-    engines: {node: '>= 14'}
-    dev: false
-
-  /yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /zod@3.21.4:
-    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
-    dev: false
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/postcss.config.js b/packages/nyxb/test/fixtures/frameworks/next-app-src/postcss.config.js
deleted file mode 100644
index 33ad091d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-src/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/favicon.ico b/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/favicon.ico
deleted file mode 100644
index 4570eb8d..00000000
Binary files a/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/favicon.ico and /dev/null differ
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/layout.tsx b/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/layout.tsx
deleted file mode 100644
index 0aed1de6..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import "./styles.css"
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  )
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/other.css b/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/other.css
deleted file mode 100644
index aa1634c2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/page.tsx b/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/page.tsx
deleted file mode 100644
index e38c626e..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/page.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import Image from 'next/image'
-
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore the Next.js 13 playground.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/styles.css b/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/styles.css
deleted file mode 100644
index fd81e885..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-src/src/app/styles.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/src/other.css b/packages/nyxb/test/fixtures/frameworks/next-app-src/src/other.css
deleted file mode 100644
index aa1634c2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-src/src/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/tailwind.config.ts b/packages/nyxb/test/fixtures/frameworks/next-app-src/tailwind.config.ts
deleted file mode 100644
index 1137927f..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-src/tailwind.config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// @ts-nocheck
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}'
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
-      }
-    }
-  },
-  plugins: []
-}
-export default config
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-src/tsconfig.json b/packages/nyxb/test/fixtures/frameworks/next-app-src/tsconfig.json
deleted file mode 100644
index 7b5489b5..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app-src/tsconfig.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "#/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app/app/favicon.ico b/packages/nyxb/test/fixtures/frameworks/next-app/app/favicon.ico
deleted file mode 100644
index 718d6fea..00000000
Binary files a/packages/nyxb/test/fixtures/frameworks/next-app/app/favicon.ico and /dev/null differ
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app/app/globals.css b/packages/nyxb/test/fixtures/frameworks/next-app/app/globals.css
deleted file mode 100644
index fd81e885..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app/app/globals.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app/app/layout.tsx b/packages/nyxb/test/fixtures/frameworks/next-app/app/layout.tsx
deleted file mode 100644
index ae845621..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app/app/layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app/app/other.css b/packages/nyxb/test/fixtures/frameworks/next-app/app/other.css
deleted file mode 100644
index aa1634c2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app/app/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app/app/page.tsx b/packages/nyxb/test/fixtures/frameworks/next-app/app/page.tsx
deleted file mode 100644
index 7a8286b5..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app/app/page.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import Image from 'next/image'
-
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore the Next.js 13 playground.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app/next-env.d.ts b/packages/nyxb/test/fixtures/frameworks/next-app/next-env.d.ts
deleted file mode 100644
index 4f11a03d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app/next.config.ts b/packages/nyxb/test/fixtures/frameworks/next-app/next.config.ts
deleted file mode 100644
index 767719fc..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app/next.config.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app/package.json b/packages/nyxb/test/fixtures/frameworks/next-app/package.json
deleted file mode 100644
index d43fb081..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "test-cli-next-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app/postcss.config.js b/packages/nyxb/test/fixtures/frameworks/next-app/postcss.config.js
deleted file mode 100644
index 33ad091d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app/tailwind.config.ts b/packages/nyxb/test/fixtures/frameworks/next-app/tailwind.config.ts
deleted file mode 100644
index 571ebb0f..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app/tailwind.config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// @ts-nocheck
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}'
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
-      }
-    }
-  },
-  plugins: []
-}
-export default config
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app/tsconfig.json b/packages/nyxb/test/fixtures/frameworks/next-app/tsconfig.json
deleted file mode 100644
index 8f8f4acc..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-app/tsconfig.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "~/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/next-env.d.ts b/packages/nyxb/test/fixtures/frameworks/next-pages-src/next-env.d.ts
deleted file mode 100644
index 4f11a03d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/next.config.js b/packages/nyxb/test/fixtures/frameworks/next-pages-src/next.config.js
deleted file mode 100644
index a843cbee..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/next.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
-
-module.exports = nextConfig
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/other.css b/packages/nyxb/test/fixtures/frameworks/next-pages-src/other.css
deleted file mode 100644
index aa1634c2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/package.json b/packages/nyxb/test/fixtures/frameworks/next-pages-src/package.json
deleted file mode 100644
index d5be9c4b..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "test-pages-src",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/postcss.config.js b/packages/nyxb/test/fixtures/frameworks/next-pages-src/postcss.config.js
deleted file mode 100644
index 33ad091d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/other.css b/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/other.css
deleted file mode 100644
index aa1634c2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/_app.tsx b/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/_app.tsx
deleted file mode 100644
index 6de02d15..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/_app.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import '~/styles/globals.css'
-import type { AppProps } from 'next/app'
-
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/_document.tsx b/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/_document.tsx
deleted file mode 100644
index 54e8bf3e..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/_document.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  )
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/api/hello.ts b/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/api/hello.ts
deleted file mode 100644
index f8bcc7e5..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/api/hello.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/index.tsx b/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/index.tsx
deleted file mode 100644
index be88f739..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/index.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export default function Home() {
-  return (
-    <main
-      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
-    >
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/pages/index.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Discover and deploy boilerplate example Next.js&nbsp;projects.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/other.css b/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/other.css
deleted file mode 100644
index aa1634c2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/pages/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/styles/globals.css b/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/styles/globals.css
deleted file mode 100644
index fd81e885..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/styles/globals.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/styles/other.css b/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/styles/other.css
deleted file mode 100644
index aa1634c2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/src/styles/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/tailwind.config.ts b/packages/nyxb/test/fixtures/frameworks/next-pages-src/tailwind.config.ts
deleted file mode 100644
index 1137927f..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/tailwind.config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// @ts-nocheck
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}'
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
-      }
-    }
-  },
-  plugins: []
-}
-export default config
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages-src/tsconfig.json b/packages/nyxb/test/fixtures/frameworks/next-pages-src/tsconfig.json
deleted file mode 100644
index 086d4419..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages-src/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "paths": {
-      "~/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages/next.config.js b/packages/nyxb/test/fixtures/frameworks/next-pages/next.config.js
deleted file mode 100644
index a843cbee..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages/next.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
-
-module.exports = nextConfig
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages/package.json b/packages/nyxb/test/fixtures/frameworks/next-pages/package.json
deleted file mode 100644
index 7603dc91..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "test-cli-pages",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages/pages/_app.tsx b/packages/nyxb/test/fixtures/frameworks/next-pages/pages/_app.tsx
deleted file mode 100644
index 6de02d15..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages/pages/_app.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import '~/styles/globals.css'
-import type { AppProps } from 'next/app'
-
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages/pages/_document.tsx b/packages/nyxb/test/fixtures/frameworks/next-pages/pages/_document.tsx
deleted file mode 100644
index 54e8bf3e..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages/pages/_document.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  )
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages/pages/api/hello.ts b/packages/nyxb/test/fixtures/frameworks/next-pages/pages/api/hello.ts
deleted file mode 100644
index f8bcc7e5..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages/pages/api/hello.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages/pages/index.tsx b/packages/nyxb/test/fixtures/frameworks/next-pages/pages/index.tsx
deleted file mode 100644
index 000a7513..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages/pages/index.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export default function Home() {
-  return (
-    <main
-      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
-    >
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">pages/index.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Discover and deploy boilerplate example Next.js&nbsp;projects.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages/pages/other.css b/packages/nyxb/test/fixtures/frameworks/next-pages/pages/other.css
deleted file mode 100644
index aa1634c2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages/pages/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages/postcss.config.js b/packages/nyxb/test/fixtures/frameworks/next-pages/postcss.config.js
deleted file mode 100644
index 33ad091d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages/styles/globals.css b/packages/nyxb/test/fixtures/frameworks/next-pages/styles/globals.css
deleted file mode 100644
index fd81e885..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages/styles/globals.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages/styles/other.css b/packages/nyxb/test/fixtures/frameworks/next-pages/styles/other.css
deleted file mode 100644
index aa1634c2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages/styles/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages/tailwind.config.ts b/packages/nyxb/test/fixtures/frameworks/next-pages/tailwind.config.ts
deleted file mode 100644
index 571ebb0f..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages/tailwind.config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// @ts-nocheck
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}'
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
-      }
-    }
-  },
-  plugins: []
-}
-export default config
diff --git a/packages/nyxb/test/fixtures/frameworks/next-pages/tsconfig.json b/packages/nyxb/test/fixtures/frameworks/next-pages/tsconfig.json
deleted file mode 100644
index 676ffbab..00000000
--- a/packages/nyxb/test/fixtures/frameworks/next-pages/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "paths": {
-      "~/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.dockerignore b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.dockerignore
deleted file mode 100644
index 91077d06..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.dockerignore
+++ /dev/null
@@ -1,7 +0,0 @@
-/node_modules
-*.log
-.DS_Store
-.env
-/.cache
-/public/build
-/build
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.env.example b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.env.example
deleted file mode 100644
index 0d0e0d65..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.env.example
+++ /dev/null
@@ -1,2 +0,0 @@
-DATABASE_URL="file:./data.db?connection_limit=1"
-SESSION_SECRET="super-duper-s3cret"
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.eslintrc.js b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.eslintrc.js
deleted file mode 100644
index 9381f335..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.eslintrc.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * This is intended to be a basic starting point for linting in the Indie Stack.
- * It relies on recommended configs out of the box for simplicity, but you can
- * and should modify this configuration to best suit your team's needs.
- */
-
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
-  root: true,
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  env: {
-    browser: true,
-    commonjs: true,
-    es6: true,
-  },
-
-  // Base config
-  extends: ["eslint:recommended"],
-
-  overrides: [
-    // React
-    {
-      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ["react", "jsx-a11y"],
-      extends: [
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
-        "plugin:react-hooks/recommended",
-        "plugin:jsx-a11y/recommended",
-        "prettier",
-      ],
-      settings: {
-        react: {
-          version: "detect",
-        },
-        formComponents: ["Form"],
-        linkComponents: [
-          { name: "Link", linkAttribute: "to" },
-          { name: "NavLink", linkAttribute: "to" },
-        ],
-      },
-      rules: {
-        "react/jsx-no-leaked-render": [
-          "warn",
-          { validStrategies: ["ternary"] },
-        ],
-      },
-    },
-
-    // Typescript
-    {
-      files: ["**/*.{ts,tsx}"],
-      plugins: ["@typescript-eslint", "import"],
-      parser: "@typescript-eslint/parser",
-      settings: {
-        "import/internal-regex": "^~/",
-        "import/resolver": {
-          node: {
-            extensions: [".ts", ".tsx"],
-          },
-          typescript: {
-            alwaysTryTypes: true,
-          },
-        },
-      },
-      extends: [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/stylistic",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
-        "prettier",
-      ],
-      rules: {
-        "import/order": [
-          "error",
-          {
-            alphabetize: { caseInsensitive: true, order: "asc" },
-            groups: ["builtin", "external", "internal", "parent", "sibling"],
-            "newlines-between": "always",
-          },
-        ],
-      },
-    },
-
-    // Markdown
-    {
-      files: ["**/*.md"],
-      plugins: ["markdown"],
-      extends: ["plugin:markdown/recommended-legacy", "prettier"],
-    },
-
-    // Jest/Vitest
-    {
-      files: ["**/*.test.{js,jsx,ts,tsx}"],
-      plugins: ["jest", "jest-dom", "testing-library"],
-      extends: [
-        "plugin:jest/recommended",
-        "plugin:jest-dom/recommended",
-        "plugin:testing-library/react",
-        "prettier",
-      ],
-      env: {
-        "jest/globals": true,
-      },
-      settings: {
-        jest: {
-          // we're using vitest which has a very similar API to jest
-          // (so the linting plugins work nicely), but it means we have to explicitly
-          // set the jest version.
-          version: 28,
-        },
-      },
-    },
-
-    // Cypress
-    {
-      files: ["cypress/**/*.ts"],
-      plugins: ["cypress"],
-      extends: ["plugin:cypress/recommended", "prettier"],
-    },
-
-    // Node
-    {
-      files: [".eslintrc.js", "mocks/**/*.js"],
-      env: {
-        node: true,
-      },
-    },
-  ],
-};
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/ISSUE_TEMPLATE/bug_report.yml b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/ISSUE_TEMPLATE/bug_report.yml
deleted file mode 100644
index 55a66fb6..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/ISSUE_TEMPLATE/bug_report.yml
+++ /dev/null
@@ -1,41 +0,0 @@
-name: 🐛 Bug Report
-description: Something is wrong with the Stack.
-body:
-  - type: markdown
-    attributes:
-      value: >-
-        Thank you for helping to improve Remix!
-
-        Our bandwidth on maintaining these stacks is limited. As a team, we're
-        currently focusing our efforts on Remix itself. The good news is you can
-        fork and adjust this stack however you'd like and start using it today
-        as a custom stack. Learn more from
-        [the Remix Stacks docs](https://remix.run/stacks).
-
-        If you'd still like to report a bug, please fill out this form. We can't
-        promise a timely response, but hopefully when we have the bandwidth to
-        work on these stacks again we can take a look. Thanks!
-
-  - type: input
-    attributes:
-      label: Have you experienced this bug with the latest version of the template?
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Steps to Reproduce
-      description: Steps to reproduce the behavior.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Expected Behavior
-      description: A concise description of what you expected to happen.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Actual Behavior
-      description: A concise description of what you're experiencing.
-    validations:
-      required: true
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/ISSUE_TEMPLATE/config.yml b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/ISSUE_TEMPLATE/config.yml
deleted file mode 100644
index da966200..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/ISSUE_TEMPLATE/config.yml
+++ /dev/null
@@ -1,21 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Get Help
-    url: https://github.com/remix-run/remix/discussions/new?category=q-a
-    about:
-      If you can't get something to work the way you expect, open a question in
-      the Remix discussions.
-  - name: Feature Request
-    url: https://github.com/remix-run/remix/discussions/new?category=ideas
-    about:
-      We appreciate you taking the time to improve Remix with your ideas, but we
-      use the Remix Discussions for this instead of the issues tab 🙂.
-  - name: 💬 Remix Discord Channel
-    url: https://rmx.as/discord
-    about: Interact with other people using Remix 💿
-  - name: 💬 New Updates (Twitter)
-    url: https://twitter.com/remix_run
-    about: Stay up to date with Remix news on twitter
-  - name: 🍿 Remix YouTube Channel
-    url: https://rmx.as/youtube
-    about: Are you a tech lead or wanting to learn more about Remix in depth? Checkout the Remix YouTube Channel
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/PULL_REQUEST_TEMPLATE.md b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/PULL_REQUEST_TEMPLATE.md
deleted file mode 100644
index 024f9d8e..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/PULL_REQUEST_TEMPLATE.md
+++ /dev/null
@@ -1,14 +0,0 @@
-<!--
-
-👋 Hey, thanks for your interest in contributing to Remix!
-
-Our bandwidth on maintaining these stacks is limited. As a team, we're currently
-focusing our efforts on Remix itself. The good news is you can fork and adjust
-this stack however you'd like and start using it today as a custom stack. Learn
-more from [the Remix Stacks docs](https://remix.run/stacks).
-
-You're still welcome to make a PR. We can't promise a timely response, but
-hopefully when we have the bandwidth to work on these stacks again we can take
-a look. Thanks!
-
--->
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/dependabot.yml b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/dependabot.yml
deleted file mode 100644
index 253bcb76..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/dependabot.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: github-actions
-    directory: /
-    schedule:
-      interval: daily
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/workflows/deploy.yml b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/workflows/deploy.yml
deleted file mode 100644
index 8f7ec3ce..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/workflows/deploy.yml
+++ /dev/null
@@ -1,144 +0,0 @@
-name: 🚀 Deploy
-
-on:
-  push:
-    branches:
-      - main
-      - dev
-  pull_request:
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  actions: write
-  contents: read
-
-jobs:
-  lint:
-    name: ⬣ ESLint
-    runs-on: ubuntu-latest
-    steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v4
-        with:
-          cache: npm
-          cache-dependency-path: ./package.json
-          node-version: 18
-
-      - name: 📥 Install deps
-        run: npm install
-
-      - name: 🔬 Lint
-        run: npm run lint
-
-  typecheck:
-    name: ʦ TypeScript
-    runs-on: ubuntu-latest
-    steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v4
-        with:
-          cache: npm
-          cache-dependency-path: ./package.json
-          node-version: 18
-
-      - name: 📥 Install deps
-        run: npm install
-
-      - name: 🔎 Type check
-        run: npm run typecheck --if-present
-
-  vitest:
-    name: ⚡ Vitest
-    runs-on: ubuntu-latest
-    steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v4
-        with:
-          cache: npm
-          cache-dependency-path: ./package.json
-          node-version: 18
-
-      - name: 📥 Install deps
-        run: npm install
-
-      - name: ⚡ Run vitest
-        run: npm run test -- --coverage
-
-  cypress:
-    name: ⚫️ Cypress
-    runs-on: ubuntu-latest
-    steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
-
-      - name: 🏄 Copy test env vars
-        run: cp .env.example .env
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v4
-        with:
-          cache: npm
-          cache-dependency-path: ./package.json
-          node-version: 18
-
-      - name: 📥 Install deps
-        run: npm install
-
-      - name: 🛠 Setup Database
-        run: npx prisma migrate reset --force
-
-      - name: ⚙️ Build
-        run: npm run build
-
-      - name: 🌳 Cypress run
-        uses: cypress-io/github-action@v6
-        with:
-          start: npm run start:mocks
-          wait-on: http://localhost:8811
-        env:
-          PORT: 8811
-
-  deploy:
-    name: 🚀 Deploy
-    runs-on: ubuntu-latest
-    needs: [lint, typecheck, vitest, cypress]
-    # only deploy main/dev branch on pushes
-    if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
-
-    steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
-
-      - name: 👀 Read app name
-        uses: SebRollen/toml-action@v1.2.0
-        id: app_name
-        with:
-          file: fly.toml
-          field: app
-
-      - name: 🎈 Setup Fly
-        uses: superfly/flyctl-actions/setup-flyctl@v1
-
-      - name: 🚀 Deploy Staging
-        if: ${{ github.ref == 'refs/heads/dev' }}
-        run: flyctl deploy --remote-only --build-arg COMMIT_SHA=${{ github.sha }} --app ${{ steps.app_name.outputs.value }}-staging
-        env:
-          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
-
-      - name: 🚀 Deploy Production
-        if: ${{ github.ref == 'refs/heads/main' }}
-        run: flyctl deploy --remote-only --build-arg COMMIT_SHA=${{ github.sha }} --app ${{ steps.app_name.outputs.value }}
-        env:
-          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/workflows/format-repo.yml b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/workflows/format-repo.yml
deleted file mode 100644
index 240b0ecc..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/workflows/format-repo.yml
+++ /dev/null
@@ -1,46 +0,0 @@
-name: 👔 Format
-
-on:
-  push:
-    branches:
-      - main
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  format:
-    if: github.repository == 'remix-run/indie-stack'
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v4
-        with:
-          cache: npm
-          cache-dependency-path: ./package.json
-          node-version: 18
-
-      - name: 📥 Install deps
-        run: npm install
-
-      - name: 👔 Format
-        run: npm run format:repo
-
-      - name: 💪 Commit
-        run: |
-          git config --local user.email "github-actions[bot]@users.noreply.github.com"
-          git config --local user.name "github-actions[bot]"
-
-          git add .
-          if [ -z "$(git status --porcelain)" ]; then
-            echo "💿 no formatting changed"
-            exit 0
-          fi
-          git commit -m "chore: format"
-          git push
-          echo "💿 pushed formatting changes https://github.com/$GITHUB_REPOSITORY/commit/$(git rev-parse HEAD)"
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/workflows/lint-repo.yml b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/workflows/lint-repo.yml
deleted file mode 100644
index b2d38564..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/workflows/lint-repo.yml
+++ /dev/null
@@ -1,33 +0,0 @@
-name: ⬣ Lint repository
-
-on:
-  push:
-    branches:
-      - main
-      - dev
-  pull_request:
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  lint:
-    name: ⬣ Lint repo
-    runs-on: ubuntu-latest
-    steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v4
-        with:
-          cache: npm
-          cache-dependency-path: ./package.json
-          node-version: 18
-
-      - name: 📥 Install deps
-        run: npm install
-
-      - name: 🔬 Lint
-        run: npm run lint
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/workflows/no-response.yml b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/workflows/no-response.yml
deleted file mode 100644
index 96426f67..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.github/workflows/no-response.yml
+++ /dev/null
@@ -1,34 +0,0 @@
-name: 🥺 No Response
-
-on:
-  schedule:
-    # Schedule for five minutes after the hour, every hour
-    - cron: "5 * * * *"
-
-permissions:
-  issues: write
-  pull-requests: write
-
-jobs:
-  stale:
-    if: github.repository == 'remix-run/indie-stack'
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🥺 Handle Ghosting
-        uses: actions/stale@v9
-        with:
-          days-before-close: 10
-          close-issue-message: >
-            This issue has been automatically closed because we haven't received a
-            response from the original author 🙈. This automation helps keep the issue
-            tracker clean from issues that are unactionable. Please reach out if you
-            have more information for us! 🙂
-          close-pr-message: >
-            This PR has been automatically closed because we haven't received a
-            response from the original author 🙈. This automation helps keep the issue
-            tracker clean from PRs that are unactionable. Please reach out if you
-            have more information for us! 🙂
-          # don't automatically mark issues/PRs as stale
-          days-before-stale: -1
-          stale-issue-label: needs-response
-          stale-pr-label: needs-response
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.gitignore b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.gitignore
deleted file mode 100644
index d5f63bb4..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.gitignore
+++ /dev/null
@@ -1,18 +0,0 @@
-# We don't want lockfiles in stacks, as people could use a different package manager
-# This part will be removed by `remix.init`
-bun.lockb
-package-lock.json
-pnpm-lock.yaml
-pnpm-lock.yml
-yarn.lock
-
-node_modules
-
-/build
-/public/build
-.env
-
-/cypress/screenshots
-/cypress/videos
-/prisma/data.db
-/prisma/data.db-journal
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.gitpod.Dockerfile b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.gitpod.Dockerfile
deleted file mode 100644
index e52ca2d6..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.gitpod.Dockerfile
+++ /dev/null
@@ -1,9 +0,0 @@
-FROM gitpod/workspace-full
-
-# Install Fly
-RUN curl -L https://fly.io/install.sh | sh
-ENV FLYCTL_INSTALL="/home/gitpod/.fly"
-ENV PATH="$FLYCTL_INSTALL/bin:$PATH"
-
-# Install GitHub CLI
-RUN brew install gh
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.gitpod.yml b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.gitpod.yml
deleted file mode 100644
index f07c5628..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.gitpod.yml
+++ /dev/null
@@ -1,48 +0,0 @@
-# https://www.gitpod.io/docs/config-gitpod-file
-
-image:
-  file: .gitpod.Dockerfile
-
-ports:
-  - port: 3000
-    onOpen: notify
-
-tasks:
-  - name: Restore .env file
-    command: |
-      if [ -f .env ]; then
-        # If this workspace already has a .env, don't override it
-        # Local changes survive a workspace being opened and closed
-        # but they will not persist between separate workspaces for the same repo
-
-        echo "Found .env in workspace"
-      else
-        # There is no .env
-        if [ ! -n "${ENV}" ]; then
-          # There is no $ENV from a previous workspace
-          # Default to the example .env
-          echo "Setting example .env"
-
-          cp .env.example .env 
-        else
-          # After making changes to .env, run this line to persist it to $ENV
-          #   eval $(gp env -e ENV="$(base64 .env | tr -d '\n')")
-          # 
-          # Environment variables set this way are shared between all your workspaces for this repo
-          # The lines below will read $ENV and print a .env file
-
-          echo "Restoring .env from Gitpod"
-
-          echo "${ENV}" | base64 -d | tee .env > /dev/null
-        fi
-      fi
-
-  - init: npm install
-    command: npm run setup && npm run dev
-
-vscode:
-  extensions:
-    - ms-azuretools.vscode-docker
-    - esbenp.prettier-vscode
-    - dbaeumer.vscode-eslint
-    - bradlc.vscode-tailwindcss
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.npmrc b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.npmrc
deleted file mode 100644
index 521a9f7c..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-legacy-peer-deps=true
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.prettierignore b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.prettierignore
deleted file mode 100644
index 8cb6bcbd..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/.prettierignore
+++ /dev/null
@@ -1,7 +0,0 @@
-node_modules
-
-/build
-/public/build
-.env
-
-/app/styles/tailwind.css
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/Dockerfile b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/Dockerfile
deleted file mode 100644
index 093ace78..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/Dockerfile
+++ /dev/null
@@ -1,61 +0,0 @@
-# base node image
-FROM node:18-bullseye-slim as base
-
-# set for base and all layer that inherit from it
-ENV NODE_ENV production
-
-# Install openssl for Prisma
-RUN apt-get update && apt-get install -y openssl sqlite3
-
-# Install all node_modules, including dev dependencies
-FROM base as deps
-
-WORKDIR /myapp
-
-ADD package.json .npmrc ./
-RUN npm install --include=dev
-
-# Setup production node_modules
-FROM base as production-deps
-
-WORKDIR /myapp
-
-COPY --from=deps /myapp/node_modules /myapp/node_modules
-ADD package.json .npmrc ./
-RUN npm prune --omit=dev
-
-# Build the app
-FROM base as build
-
-WORKDIR /myapp
-
-COPY --from=deps /myapp/node_modules /myapp/node_modules
-
-ADD prisma .
-RUN npx prisma generate
-
-ADD . .
-RUN npm run build
-
-# Finally, build the production image with minimal footprint
-FROM base
-
-ENV DATABASE_URL=file:/data/sqlite.db
-ENV PORT="8080"
-ENV NODE_ENV="production"
-
-# add shortcut for connecting to database CLI
-RUN echo "#!/bin/sh\nset -x\nsqlite3 \$DATABASE_URL" > /usr/local/bin/database-cli && chmod +x /usr/local/bin/database-cli
-
-WORKDIR /myapp
-
-COPY --from=production-deps /myapp/node_modules /myapp/node_modules
-COPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma
-
-COPY --from=build /myapp/build /myapp/build
-COPY --from=build /myapp/public /myapp/public
-COPY --from=build /myapp/package.json /myapp/package.json
-COPY --from=build /myapp/start.sh /myapp/start.sh
-COPY --from=build /myapp/prisma /myapp/prisma
-
-ENTRYPOINT [ "./start.sh" ]
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/LICENSE.md b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/LICENSE.md
deleted file mode 100644
index 8ed8d952..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/LICENSE.md
+++ /dev/null
@@ -1,22 +0,0 @@
-MIT License
-
-Copyright (c) Remix Software Inc. 2021
-Copyright (c) Shopify Inc. 2022-2023
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/README.md b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/README.md
deleted file mode 100644
index fa24ab98..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/README.md
+++ /dev/null
@@ -1,183 +0,0 @@
-# Remix Indie Stack
-
-![The Remix Indie Stack](https://repository-images.githubusercontent.com/465928257/a241fa49-bd4d-485a-a2a5-5cb8e4ee0abf)
-
-Learn more about [Remix Stacks](https://remix.run/stacks).
-
-```sh
-npx create-remix@latest --template remix-run/indie-stack
-```
-
-## What's in the stack
-
-- [Fly app deployment](https://fly.io) with [Docker](https://www.docker.com/)
-- Production-ready [SQLite Database](https://sqlite.org)
-- Healthcheck endpoint for [Fly backups region fallbacks](https://fly.io/docs/reference/configuration/#services-http_checks)
-- [GitHub Actions](https://github.com/features/actions) for deploy on merge to production and staging environments
-- Email/Password Authentication with [cookie-based sessions](https://remix.run/utils/sessions#md-createcookiesessionstorage)
-- Database ORM with [Prisma](https://prisma.io)
-- Styling with [Tailwind](https://tailwindcss.com/)
-- End-to-end testing with [Cypress](https://cypress.io)
-- Local third party request mocking with [MSW](https://mswjs.io)
-- Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)
-- Code formatting with [Prettier](https://prettier.io)
-- Linting with [ESLint](https://eslint.org)
-- Static Types with [TypeScript](https://typescriptlang.org)
-
-Not a fan of bits of the stack? Fork it, change it, and use `npx create-remix --template your/repo`! Make it your own.
-
-## Quickstart
-
-Click this button to create a [Gitpod](https://gitpod.io) workspace with the project set up and Fly pre-installed
-
-[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/remix-run/indie-stack/tree/main)
-
-## Development
-
-- First run this stack's `remix.init` script and commit the changes it makes to your project.
-
-  ```sh
-  npx remix init
-  git init # if you haven't already
-  git add .
-  git commit -m "Initialize project"
-  ```
-
-- Initial setup:
-
-  ```sh
-  npm run setup
-  ```
-
-- Start dev server:
-
-  ```sh
-  npm run dev
-  ```
-
-This starts your app in development mode, rebuilding assets on file changes.
-
-The database seed script creates a new user with some data you can use to get started:
-
-- Email: `rachel@remix.run`
-- Password: `racheliscool`
-
-### Relevant code:
-
-This is a pretty simple note-taking app, but it's a good example of how you can build a full stack app with Prisma and Remix. The main functionality is creating users, logging in and out, and creating and deleting notes.
-
-- creating users, and logging in and out [./app/models/user.server.ts](app/models/user.server.ts)
-- user sessions, and verifying them [./app/session.server.ts](app/session.server.ts)
-- creating, and deleting notes [./app/models/note.server.ts](app/models/note.server.ts)
-
-## Deployment
-
-This Remix Stack comes with two GitHub Actions that handle automatically deploying your app to production and staging environments.
-
-Prior to your first deployment, you'll need to do a few things:
-
-- [Install Fly](https://fly.io/docs/getting-started/installing-flyctl/)
-
-- Sign up and log in to Fly
-
-  ```sh
-  fly auth signup
-  ```
-
-  > **Note:** If you have more than one Fly account, ensure that you are signed into the same account in the Fly CLI as you are in the browser. In your terminal, run `fly auth whoami` and ensure the email matches the Fly account signed into the browser.
-
-- Create two apps on Fly, one for staging and one for production:
-
-  ```sh
-  fly apps create indie-stack-template
-  fly apps create indie-stack-template-staging
-  ```
-
-  > **Note:** Make sure this name matches the `app` set in your `fly.toml` file. Otherwise, you will not be able to deploy.
-
-  - Initialize Git.
-
-  ```sh
-  git init
-  ```
-
-- Create a new [GitHub Repository](https://repo.new), and then add it as the remote for your project. **Do not push your app yet!**
-
-  ```sh
-  git remote add origin <ORIGIN_URL>
-  ```
-
-- Add a `FLY_API_TOKEN` to your GitHub repo. To do this, go to your user settings on Fly and create a new [token](https://web.fly.io/user/personal_access_tokens/new), then add it to [your repo secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) with the name `FLY_API_TOKEN`.
-
-- Add a `SESSION_SECRET` to your fly app secrets, to do this you can run the following commands:
-
-  ```sh
-  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app indie-stack-template
-  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app indie-stack-template-staging
-  ```
-
-  If you don't have openssl installed, you can also use [1Password](https://1password.com/password-generator) to generate a random secret, just replace `$(openssl rand -hex 32)` with the generated secret.
-
-- Create a persistent volume for the sqlite database for both your staging and production environments. Run the following:
-
-  ```sh
-  fly volumes create data --size 1 --app indie-stack-template
-  fly volumes create data --size 1 --app indie-stack-template-staging
-  ```
-
-Now that everything is set up you can commit and push your changes to your repo. Every commit to your `main` branch will trigger a deployment to your production environment, and every commit to your `dev` branch will trigger a deployment to your staging environment.
-
-### Connecting to your database
-
-The sqlite database lives at `/data/sqlite.db` in your deployed application. You can connect to the live database by running `fly ssh console -C database-cli`.
-
-### Getting Help with Deployment
-
-If you run into any issues deploying to Fly, make sure you've followed all of the steps above and if you have, then post as many details about your deployment (including your app name) to [the Fly support community](https://community.fly.io). They're normally pretty responsive over there and hopefully can help resolve any of your deployment issues and questions.
-
-## GitHub Actions
-
-We use GitHub Actions for continuous integration and deployment. Anything that gets into the `main` branch will be deployed to production after running tests/build/etc. Anything in the `dev` branch will be deployed to staging.
-
-## Testing
-
-### Cypress
-
-We use Cypress for our End-to-End tests in this project. You'll find those in the `cypress` directory. As you make changes, add to an existing file or create a new file in the `cypress/e2e` directory to test your changes.
-
-We use [`@testing-library/cypress`](https://testing-library.com/cypress) for selecting elements on the page semantically.
-
-To run these tests in development, run `npm run test:e2e:dev` which will start the dev server for the app as well as the Cypress client. Make sure the database is running in docker as described above.
-
-We have a utility for testing authenticated features without having to go through the login flow:
-
-```ts
-cy.login();
-// you are now logged in as a new user
-```
-
-We also have a utility to auto-delete the user at the end of your test. Just make sure to add this in each test file:
-
-```ts
-afterEach(() => {
-  cy.cleanupUser();
-});
-```
-
-That way, we can keep your local db clean and keep your tests isolated from one another.
-
-### Vitest
-
-For lower level tests of utilities and individual components, we use `vitest`. We have DOM-specific assertion helpers via [`@testing-library/jest-dom`](https://testing-library.com/jest-dom).
-
-### Type Checking
-
-This project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run `npm run typecheck`.
-
-### Linting
-
-This project uses ESLint for linting. That is configured in `.eslintrc.js`.
-
-### Formatting
-
-We use [Prettier](https://prettier.io/) for auto-formatting in this project. It's recommended to install an editor plugin (like the [VSCode Prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) to get auto-formatting on save. There's also a `npm run format` script you can run to format all files in the project.
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/db.server.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/db.server.ts
deleted file mode 100644
index ac5701fa..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/db.server.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { PrismaClient } from "@prisma/client";
-
-import { singleton } from "./singleton.server";
-
-// Hard-code a unique key, so we can look up the client when this module gets re-imported
-const prisma = singleton("prisma", () => new PrismaClient());
-prisma.$connect();
-
-export { prisma };
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/entry.client.tsx b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/entry.client.tsx
deleted file mode 100644
index 186cd934..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/entry.client.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * By default, Remix will handle hydrating your app on the client for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/docs/en/main/file-conventions/entry.client
- */
-
-import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
-import { hydrateRoot } from "react-dom/client";
-
-startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <RemixBrowser />
-    </StrictMode>,
-  );
-});
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/entry.server.tsx b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/entry.server.tsx
deleted file mode 100644
index 78d4f1e2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/entry.server.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * By default, Remix will handle generating the HTTP Response for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/docs/en/main/file-conventions/entry.server
- */
-
-import { PassThrough } from "node:stream";
-
-import type { EntryContext } from "@remix-run/node";
-import { createReadableStreamFromReadable } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
-import { isbot } from "isbot";
-import { renderToPipeableStream } from "react-dom/server";
-
-const ABORT_DELAY = 5_000;
-
-export default function handleRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext,
-) {
-  return isbot(request.headers.get("user-agent"))
-    ? handleBotRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext,
-      )
-    : handleBrowserRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext,
-      );
-}
-
-function handleBotRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext,
-) {
-  return new Promise((resolve, reject) => {
-    const { abort, pipe } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
-      {
-        onAllReady() {
-          const body = new PassThrough();
-
-          responseHeaders.set("Content-Type", "text/html");
-
-          resolve(
-            new Response(createReadableStreamFromReadable(body), {
-              headers: responseHeaders,
-              status: responseStatusCode,
-            }),
-          );
-
-          pipe(body);
-        },
-        onShellError(error: unknown) {
-          reject(error);
-        },
-        onError(error: unknown) {
-          responseStatusCode = 500;
-          console.error(error);
-        },
-      },
-    );
-
-    setTimeout(abort, ABORT_DELAY);
-  });
-}
-
-function handleBrowserRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext,
-) {
-  return new Promise((resolve, reject) => {
-    const { abort, pipe } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
-      {
-        onShellReady() {
-          const body = new PassThrough();
-
-          responseHeaders.set("Content-Type", "text/html");
-
-          resolve(
-            new Response(createReadableStreamFromReadable(body), {
-              headers: responseHeaders,
-              status: responseStatusCode,
-            }),
-          );
-
-          pipe(body);
-        },
-        onShellError(error: unknown) {
-          reject(error);
-        },
-        onError(error: unknown) {
-          console.error(error);
-          responseStatusCode = 500;
-        },
-      },
-    );
-
-    setTimeout(abort, ABORT_DELAY);
-  });
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/models/note.server.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/models/note.server.ts
deleted file mode 100644
index f385491a..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/models/note.server.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { User, Note } from "@prisma/client";
-
-import { prisma } from "~/db.server";
-
-export function getNote({
-  id,
-  userId,
-}: Pick<Note, "id"> & {
-  userId: User["id"];
-}) {
-  return prisma.note.findFirst({
-    select: { id: true, body: true, title: true },
-    where: { id, userId },
-  });
-}
-
-export function getNoteListItems({ userId }: { userId: User["id"] }) {
-  return prisma.note.findMany({
-    where: { userId },
-    select: { id: true, title: true },
-    orderBy: { updatedAt: "desc" },
-  });
-}
-
-export function createNote({
-  body,
-  title,
-  userId,
-}: Pick<Note, "body" | "title"> & {
-  userId: User["id"];
-}) {
-  return prisma.note.create({
-    data: {
-      title,
-      body,
-      user: {
-        connect: {
-          id: userId,
-        },
-      },
-    },
-  });
-}
-
-export function deleteNote({
-  id,
-  userId,
-}: Pick<Note, "id"> & { userId: User["id"] }) {
-  return prisma.note.deleteMany({
-    where: { id, userId },
-  });
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/models/user.server.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/models/user.server.ts
deleted file mode 100644
index 42be9b7f..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/models/user.server.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { Password, User } from "@prisma/client";
-import bcrypt from "bcryptjs";
-
-import { prisma } from "~/db.server";
-
-export type { User } from "@prisma/client";
-
-export async function getUserById(id: User["id"]) {
-  return prisma.user.findUnique({ where: { id } });
-}
-
-export async function getUserByEmail(email: User["email"]) {
-  return prisma.user.findUnique({ where: { email } });
-}
-
-export async function createUser(email: User["email"], password: string) {
-  const hashedPassword = await bcrypt.hash(password, 10);
-
-  return prisma.user.create({
-    data: {
-      email,
-      password: {
-        create: {
-          hash: hashedPassword,
-        },
-      },
-    },
-  });
-}
-
-export async function deleteUserByEmail(email: User["email"]) {
-  return prisma.user.delete({ where: { email } });
-}
-
-export async function verifyLogin(
-  email: User["email"],
-  password: Password["hash"],
-) {
-  const userWithPassword = await prisma.user.findUnique({
-    where: { email },
-    include: {
-      password: true,
-    },
-  });
-
-  if (!userWithPassword || !userWithPassword.password) {
-    return null;
-  }
-
-  const isValid = await bcrypt.compare(
-    password,
-    userWithPassword.password.hash,
-  );
-
-  if (!isValid) {
-    return null;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { password: _password, ...userWithoutPassword } = userWithPassword;
-
-  return userWithoutPassword;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/root.tsx b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/root.tsx
deleted file mode 100644
index 426fac35..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/root.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { cssBundleHref } from "@remix-run/css-bundle";
-import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
-import {
-  Links,
-  LiveReload,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "@remix-run/react";
-
-import { getUser } from "~/session.server";
-import stylesheet from "~/tailwind.css";
-
-export const links: LinksFunction = () => [
-  { rel: "stylesheet", href: stylesheet },
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-];
-
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  return json({ user: await getUser(request) });
-};
-
-export default function App() {
-  return (
-    <html lang="en" className="h-full">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body className="h-full">
-        <Outlet />
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
-      </body>
-    </html>
-  );
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/_index.tsx b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/_index.tsx
deleted file mode 100644
index d266ff72..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/_index.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import type { MetaFunction } from "@remix-run/node";
-import { Link } from "@remix-run/react";
-
-import { useOptionalUser } from "~/utils";
-
-export const meta: MetaFunction = () => [{ title: "Remix Notes" }];
-
-export default function Index() {
-  const user = useOptionalUser();
-  return (
-    <main className="relative min-h-screen bg-white sm:flex sm:items-center sm:justify-center">
-      <div className="relative sm:pb-16 sm:pt-8">
-        <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
-          <div className="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">
-            <div className="absolute inset-0">
-              <img
-                className="h-full w-full object-cover"
-                src="https://user-images.githubusercontent.com/1500684/157774694-99820c51-8165-4908-a031-34fc371ac0d6.jpg"
-                alt="Sonic Youth On Stage"
-              />
-              <div className="absolute inset-0 bg-[color:rgba(254,204,27,0.5)] mix-blend-multiply" />
-            </div>
-            <div className="relative px-4 pb-8 pt-16 sm:px-6 sm:pb-14 sm:pt-24 lg:px-8 lg:pb-20 lg:pt-32">
-              <h1 className="text-center text-6xl font-extrabold tracking-tight sm:text-8xl lg:text-9xl">
-                <span className="block uppercase text-yellow-500 drop-shadow-md">
-                  Indie Stack
-                </span>
-              </h1>
-              <p className="mx-auto mt-6 max-w-lg text-center text-xl text-white sm:max-w-3xl">
-                Check the README.md file for instructions on how to get this
-                project deployed.
-              </p>
-              <div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
-                {user ? (
-                  <Link
-                    to="/notes"
-                    className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-yellow-700 shadow-sm hover:bg-yellow-50 sm:px-8"
-                  >
-                    View Notes for {user.email}
-                  </Link>
-                ) : (
-                  <div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5 sm:space-y-0">
-                    <Link
-                      to="/join"
-                      className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-yellow-700 shadow-sm hover:bg-yellow-50 sm:px-8"
-                    >
-                      Sign up
-                    </Link>
-                    <Link
-                      to="/login"
-                      className="flex items-center justify-center rounded-md bg-yellow-500 px-4 py-3 font-medium text-white hover:bg-yellow-600"
-                    >
-                      Log In
-                    </Link>
-                  </div>
-                )}
-              </div>
-              <a href="https://remix.run">
-                <img
-                  src="https://user-images.githubusercontent.com/1500684/158298926-e45dafff-3544-4b69-96d6-d3bcc33fc76a.svg"
-                  alt="Remix"
-                  className="mx-auto mt-16 w-full max-w-[12rem] md:max-w-[16rem]"
-                />
-              </a>
-            </div>
-          </div>
-        </div>
-
-        <div className="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
-          <div className="mt-6 flex flex-wrap justify-center gap-8">
-            {[
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157764397-ccd8ea10-b8aa-4772-a99b-35de937319e1.svg",
-                alt: "Fly.io",
-                href: "https://fly.io",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157764395-137ec949-382c-43bd-a3c0-0cb8cb22e22d.svg",
-                alt: "SQLite",
-                href: "https://sqlite.org",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157764484-ad64a21a-d7fb-47e3-8669-ec046da20c1f.svg",
-                alt: "Prisma",
-                href: "https://prisma.io",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157764276-a516a239-e377-4a20-b44a-0ac7b65c8c14.svg",
-                alt: "Tailwind",
-                href: "https://tailwindcss.com",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157764454-48ac8c71-a2a9-4b5e-b19c-edef8b8953d6.svg",
-                alt: "Cypress",
-                href: "https://www.cypress.io",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157772386-75444196-0604-4340-af28-53b236faa182.svg",
-                alt: "MSW",
-                href: "https://mswjs.io",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157772447-00fccdce-9d12-46a3-8bb4-fac612cdc949.svg",
-                alt: "Vitest",
-                href: "https://vitest.dev",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157772662-92b0dd3a-453f-4d18-b8be-9fa6efde52cf.png",
-                alt: "Testing Library",
-                href: "https://testing-library.com",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157772934-ce0a943d-e9d0-40f8-97f3-f464c0811643.svg",
-                alt: "Prettier",
-                href: "https://prettier.io",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157772990-3968ff7c-b551-4c55-a25c-046a32709a8e.svg",
-                alt: "ESLint",
-                href: "https://eslint.org",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157773063-20a0ed64-b9f8-4e0b-9d1e-0b65a3d4a6db.svg",
-                alt: "TypeScript",
-                href: "https://typescriptlang.org",
-              },
-            ].map((img) => (
-              <a
-                key={img.href}
-                href={img.href}
-                className="flex h-16 w-32 justify-center p-1 grayscale transition hover:grayscale-0 focus:grayscale-0"
-              >
-                <img alt={img.alt} src={img.src} className="object-contain" />
-              </a>
-            ))}
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/healthcheck.tsx b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/healthcheck.tsx
deleted file mode 100644
index 53168b88..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/healthcheck.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-// learn more: https://fly.io/docs/reference/configuration/#services-http_checks
-import type { LoaderFunctionArgs } from "@remix-run/node";
-
-import { prisma } from "~/db.server";
-
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const host =
-    request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
-
-  try {
-    const url = new URL("/", `http://${host}`);
-    // if we can connect to the database and make a simple query
-    // and make a HEAD request to ourselves, then we're good.
-    await Promise.all([
-      prisma.user.count(),
-      fetch(url.toString(), { method: "HEAD" }).then((r) => {
-        if (!r.ok) return Promise.reject(r);
-      }),
-    ]);
-    return new Response("OK");
-  } catch (error: unknown) {
-    console.log("healthcheck ❌", { error });
-    return new Response("ERROR", { status: 500 });
-  }
-};
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/join.tsx b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/join.tsx
deleted file mode 100644
index f1ea5660..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/join.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import type {
-  ActionFunctionArgs,
-  LoaderFunctionArgs,
-  MetaFunction,
-} from "@remix-run/node";
-import { json, redirect } from "@remix-run/node";
-import { Form, Link, useActionData, useSearchParams } from "@remix-run/react";
-import { useEffect, useRef } from "react";
-
-import { createUser, getUserByEmail } from "~/models/user.server";
-import { createUserSession, getUserId } from "~/session.server";
-import { safeRedirect, validateEmail } from "~/utils";
-
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const userId = await getUserId(request);
-  if (userId) return redirect("/");
-  return json({});
-};
-
-export const action = async ({ request }: ActionFunctionArgs) => {
-  const formData = await request.formData();
-  const email = formData.get("email");
-  const password = formData.get("password");
-  const redirectTo = safeRedirect(formData.get("redirectTo"), "/");
-
-  if (!validateEmail(email)) {
-    return json(
-      { errors: { email: "Email is invalid", password: null } },
-      { status: 400 },
-    );
-  }
-
-  if (typeof password !== "string" || password.length === 0) {
-    return json(
-      { errors: { email: null, password: "Password is required" } },
-      { status: 400 },
-    );
-  }
-
-  if (password.length < 8) {
-    return json(
-      { errors: { email: null, password: "Password is too short" } },
-      { status: 400 },
-    );
-  }
-
-  const existingUser = await getUserByEmail(email);
-  if (existingUser) {
-    return json(
-      {
-        errors: {
-          email: "A user already exists with this email",
-          password: null,
-        },
-      },
-      { status: 400 },
-    );
-  }
-
-  const user = await createUser(email, password);
-
-  return createUserSession({
-    redirectTo,
-    remember: false,
-    request,
-    userId: user.id,
-  });
-};
-
-export const meta: MetaFunction = () => [{ title: "Sign Up" }];
-
-export default function Join() {
-  const [searchParams] = useSearchParams();
-  const redirectTo = searchParams.get("redirectTo") ?? undefined;
-  const actionData = useActionData<typeof action>();
-  const emailRef = useRef<HTMLInputElement>(null);
-  const passwordRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (actionData?.errors?.email) {
-      emailRef.current?.focus();
-    } else if (actionData?.errors?.password) {
-      passwordRef.current?.focus();
-    }
-  }, [actionData]);
-
-  return (
-    <div className="flex min-h-full flex-col justify-center">
-      <div className="mx-auto w-full max-w-md px-8">
-        <Form method="post" className="space-y-6">
-          <div>
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-gray-700"
-            >
-              Email address
-            </label>
-            <div className="mt-1">
-              <input
-                ref={emailRef}
-                id="email"
-                required
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus={true}
-                name="email"
-                type="email"
-                autoComplete="email"
-                aria-invalid={actionData?.errors?.email ? true : undefined}
-                aria-describedby="email-error"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-              />
-              {actionData?.errors?.email ? (
-                <div className="pt-1 text-red-700" id="email-error">
-                  {actionData.errors.email}
-                </div>
-              ) : null}
-            </div>
-          </div>
-
-          <div>
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-gray-700"
-            >
-              Password
-            </label>
-            <div className="mt-1">
-              <input
-                id="password"
-                ref={passwordRef}
-                name="password"
-                type="password"
-                autoComplete="new-password"
-                aria-invalid={actionData?.errors?.password ? true : undefined}
-                aria-describedby="password-error"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-              />
-              {actionData?.errors?.password ? (
-                <div className="pt-1 text-red-700" id="password-error">
-                  {actionData.errors.password}
-                </div>
-              ) : null}
-            </div>
-          </div>
-
-          <input type="hidden" name="redirectTo" value={redirectTo} />
-          <button
-            type="submit"
-            className="w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
-          >
-            Create Account
-          </button>
-          <div className="flex items-center justify-center">
-            <div className="text-center text-sm text-gray-500">
-              Already have an account?{" "}
-              <Link
-                className="text-blue-500 underline"
-                to={{
-                  pathname: "/login",
-                  search: searchParams.toString(),
-                }}
-              >
-                Log in
-              </Link>
-            </div>
-          </div>
-        </Form>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/login.tsx b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/login.tsx
deleted file mode 100644
index c61981c8..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/login.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import type {
-  ActionFunctionArgs,
-  LoaderFunctionArgs,
-  MetaFunction,
-} from "@remix-run/node";
-import { json, redirect } from "@remix-run/node";
-import { Form, Link, useActionData, useSearchParams } from "@remix-run/react";
-import { useEffect, useRef } from "react";
-
-import { verifyLogin } from "~/models/user.server";
-import { createUserSession, getUserId } from "~/session.server";
-import { safeRedirect, validateEmail } from "~/utils";
-
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const userId = await getUserId(request);
-  if (userId) return redirect("/");
-  return json({});
-};
-
-export const action = async ({ request }: ActionFunctionArgs) => {
-  const formData = await request.formData();
-  const email = formData.get("email");
-  const password = formData.get("password");
-  const redirectTo = safeRedirect(formData.get("redirectTo"), "/");
-  const remember = formData.get("remember");
-
-  if (!validateEmail(email)) {
-    return json(
-      { errors: { email: "Email is invalid", password: null } },
-      { status: 400 },
-    );
-  }
-
-  if (typeof password !== "string" || password.length === 0) {
-    return json(
-      { errors: { email: null, password: "Password is required" } },
-      { status: 400 },
-    );
-  }
-
-  if (password.length < 8) {
-    return json(
-      { errors: { email: null, password: "Password is too short" } },
-      { status: 400 },
-    );
-  }
-
-  const user = await verifyLogin(email, password);
-
-  if (!user) {
-    return json(
-      { errors: { email: "Invalid email or password", password: null } },
-      { status: 400 },
-    );
-  }
-
-  return createUserSession({
-    redirectTo,
-    remember: remember === "on" ? true : false,
-    request,
-    userId: user.id,
-  });
-};
-
-export const meta: MetaFunction = () => [{ title: "Login" }];
-
-export default function LoginPage() {
-  const [searchParams] = useSearchParams();
-  const redirectTo = searchParams.get("redirectTo") || "/notes";
-  const actionData = useActionData<typeof action>();
-  const emailRef = useRef<HTMLInputElement>(null);
-  const passwordRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (actionData?.errors?.email) {
-      emailRef.current?.focus();
-    } else if (actionData?.errors?.password) {
-      passwordRef.current?.focus();
-    }
-  }, [actionData]);
-
-  return (
-    <div className="flex min-h-full flex-col justify-center">
-      <div className="mx-auto w-full max-w-md px-8">
-        <Form method="post" className="space-y-6">
-          <div>
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-gray-700"
-            >
-              Email address
-            </label>
-            <div className="mt-1">
-              <input
-                ref={emailRef}
-                id="email"
-                required
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus={true}
-                name="email"
-                type="email"
-                autoComplete="email"
-                aria-invalid={actionData?.errors?.email ? true : undefined}
-                aria-describedby="email-error"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-              />
-              {actionData?.errors?.email ? (
-                <div className="pt-1 text-red-700" id="email-error">
-                  {actionData.errors.email}
-                </div>
-              ) : null}
-            </div>
-          </div>
-
-          <div>
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-gray-700"
-            >
-              Password
-            </label>
-            <div className="mt-1">
-              <input
-                id="password"
-                ref={passwordRef}
-                name="password"
-                type="password"
-                autoComplete="current-password"
-                aria-invalid={actionData?.errors?.password ? true : undefined}
-                aria-describedby="password-error"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-              />
-              {actionData?.errors?.password ? (
-                <div className="pt-1 text-red-700" id="password-error">
-                  {actionData.errors.password}
-                </div>
-              ) : null}
-            </div>
-          </div>
-
-          <input type="hidden" name="redirectTo" value={redirectTo} />
-          <button
-            type="submit"
-            className="w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
-          >
-            Log in
-          </button>
-          <div className="flex items-center justify-between">
-            <div className="flex items-center">
-              <input
-                id="remember"
-                name="remember"
-                type="checkbox"
-                className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-              />
-              <label
-                htmlFor="remember"
-                className="ml-2 block text-sm text-gray-900"
-              >
-                Remember me
-              </label>
-            </div>
-            <div className="text-center text-sm text-gray-500">
-              Don&apos;t have an account?{" "}
-              <Link
-                className="text-blue-500 underline"
-                to={{
-                  pathname: "/join",
-                  search: searchParams.toString(),
-                }}
-              >
-                Sign up
-              </Link>
-            </div>
-          </div>
-        </Form>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/logout.tsx b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/logout.tsx
deleted file mode 100644
index 1ee2c8a9..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/logout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { ActionFunctionArgs } from "@remix-run/node";
-import { redirect } from "@remix-run/node";
-
-import { logout } from "~/session.server";
-
-export const action = async ({ request }: ActionFunctionArgs) =>
-  logout(request);
-
-export const loader = async () => redirect("/");
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/notes.$noteId.tsx b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/notes.$noteId.tsx
deleted file mode 100644
index 3edd6ff2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/notes.$noteId.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
-import { json, redirect } from "@remix-run/node";
-import {
-  Form,
-  isRouteErrorResponse,
-  useLoaderData,
-  useRouteError,
-} from "@remix-run/react";
-import invariant from "tiny-invariant";
-
-import { deleteNote, getNote } from "~/models/note.server";
-import { requireUserId } from "~/session.server";
-
-export const loader = async ({ params, request }: LoaderFunctionArgs) => {
-  const userId = await requireUserId(request);
-  invariant(params.noteId, "noteId not found");
-
-  const note = await getNote({ id: params.noteId, userId });
-  if (!note) {
-    throw new Response("Not Found", { status: 404 });
-  }
-  return json({ note });
-};
-
-export const action = async ({ params, request }: ActionFunctionArgs) => {
-  const userId = await requireUserId(request);
-  invariant(params.noteId, "noteId not found");
-
-  await deleteNote({ id: params.noteId, userId });
-
-  return redirect("/notes");
-};
-
-export default function NoteDetailsPage() {
-  const data = useLoaderData<typeof loader>();
-
-  return (
-    <div>
-      <h3 className="text-2xl font-bold">{data.note.title}</h3>
-      <p className="py-6">{data.note.body}</p>
-      <hr className="my-4" />
-      <Form method="post">
-        <button
-          type="submit"
-          className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
-        >
-          Delete
-        </button>
-      </Form>
-    </div>
-  );
-}
-
-export function ErrorBoundary() {
-  const error = useRouteError();
-
-  if (error instanceof Error) {
-    return <div>An unexpected error occurred: {error.message}</div>;
-  }
-
-  if (!isRouteErrorResponse(error)) {
-    return <h1>Unknown Error</h1>;
-  }
-
-  if (error.status === 404) {
-    return <div>Note not found</div>;
-  }
-
-  return <div>An unexpected error occurred: {error.statusText}</div>;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/notes._index.tsx b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/notes._index.tsx
deleted file mode 100644
index aa858a99..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/notes._index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Link } from "@remix-run/react";
-
-export default function NoteIndexPage() {
-  return (
-    <p>
-      No note selected. Select a note on the left, or{" "}
-      <Link to="new" className="text-blue-500 underline">
-        create a new note.
-      </Link>
-    </p>
-  );
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/notes.new.tsx b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/notes.new.tsx
deleted file mode 100644
index 48dd52de..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/notes.new.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import type { ActionFunctionArgs } from "@remix-run/node";
-import { json, redirect } from "@remix-run/node";
-import { Form, useActionData } from "@remix-run/react";
-import { useEffect, useRef } from "react";
-
-import { createNote } from "~/models/note.server";
-import { requireUserId } from "~/session.server";
-
-export const action = async ({ request }: ActionFunctionArgs) => {
-  const userId = await requireUserId(request);
-
-  const formData = await request.formData();
-  const title = formData.get("title");
-  const body = formData.get("body");
-
-  if (typeof title !== "string" || title.length === 0) {
-    return json(
-      { errors: { body: null, title: "Title is required" } },
-      { status: 400 },
-    );
-  }
-
-  if (typeof body !== "string" || body.length === 0) {
-    return json(
-      { errors: { body: "Body is required", title: null } },
-      { status: 400 },
-    );
-  }
-
-  const note = await createNote({ body, title, userId });
-
-  return redirect(`/notes/${note.id}`);
-};
-
-export default function NewNotePage() {
-  const actionData = useActionData<typeof action>();
-  const titleRef = useRef<HTMLInputElement>(null);
-  const bodyRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    if (actionData?.errors?.title) {
-      titleRef.current?.focus();
-    } else if (actionData?.errors?.body) {
-      bodyRef.current?.focus();
-    }
-  }, [actionData]);
-
-  return (
-    <Form
-      method="post"
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: 8,
-        width: "100%",
-      }}
-    >
-      <div>
-        <label className="flex w-full flex-col gap-1">
-          <span>Title: </span>
-          <input
-            ref={titleRef}
-            name="title"
-            className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
-            aria-invalid={actionData?.errors?.title ? true : undefined}
-            aria-errormessage={
-              actionData?.errors?.title ? "title-error" : undefined
-            }
-          />
-        </label>
-        {actionData?.errors?.title ? (
-          <div className="pt-1 text-red-700" id="title-error">
-            {actionData.errors.title}
-          </div>
-        ) : null}
-      </div>
-
-      <div>
-        <label className="flex w-full flex-col gap-1">
-          <span>Body: </span>
-          <textarea
-            ref={bodyRef}
-            name="body"
-            rows={8}
-            className="w-full flex-1 rounded-md border-2 border-blue-500 px-3 py-2 text-lg leading-6"
-            aria-invalid={actionData?.errors?.body ? true : undefined}
-            aria-errormessage={
-              actionData?.errors?.body ? "body-error" : undefined
-            }
-          />
-        </label>
-        {actionData?.errors?.body ? (
-          <div className="pt-1 text-red-700" id="body-error">
-            {actionData.errors.body}
-          </div>
-        ) : null}
-      </div>
-
-      <div className="text-right">
-        <button
-          type="submit"
-          className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
-        >
-          Save
-        </button>
-      </div>
-    </Form>
-  );
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/notes.tsx b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/notes.tsx
deleted file mode 100644
index 2f8e13a2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/routes/notes.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
-import { Form, Link, NavLink, Outlet, useLoaderData } from "@remix-run/react";
-
-import { getNoteListItems } from "~/models/note.server";
-import { requireUserId } from "~/session.server";
-import { useUser } from "~/utils";
-
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const userId = await requireUserId(request);
-  const noteListItems = await getNoteListItems({ userId });
-  return json({ noteListItems });
-};
-
-export default function NotesPage() {
-  const data = useLoaderData<typeof loader>();
-  const user = useUser();
-
-  return (
-    <div className="flex h-full min-h-screen flex-col">
-      <header className="flex items-center justify-between bg-slate-800 p-4 text-white">
-        <h1 className="text-3xl font-bold">
-          <Link to="">Notes</Link>
-        </h1>
-        <p>{user.email}</p>
-        <Form action="/logout" method="post">
-          <button
-            type="submit"
-            className="rounded bg-slate-600 px-4 py-2 text-blue-100 hover:bg-blue-500 active:bg-blue-600"
-          >
-            Logout
-          </button>
-        </Form>
-      </header>
-
-      <main className="flex h-full bg-white">
-        <div className="h-full w-80 border-r bg-gray-50">
-          <Link to="new" className="block p-4 text-xl text-blue-500">
-            + New Note
-          </Link>
-
-          <hr />
-
-          {data.noteListItems.length === 0 ? (
-            <p className="p-4">No notes yet</p>
-          ) : (
-            <ol>
-              {data.noteListItems.map((note) => (
-                <li key={note.id}>
-                  <NavLink
-                    className={({ isActive }) =>
-                      `block border-b p-4 text-xl ${isActive ? "bg-white" : ""}`
-                    }
-                    to={note.id}
-                  >
-                    📝 {note.title}
-                  </NavLink>
-                </li>
-              ))}
-            </ol>
-          )}
-        </div>
-
-        <div className="flex-1 p-6">
-          <Outlet />
-        </div>
-      </main>
-    </div>
-  );
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/session.server.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/session.server.ts
deleted file mode 100644
index 10cebe5a..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/session.server.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { createCookieSessionStorage, redirect } from "@remix-run/node";
-import invariant from "tiny-invariant";
-
-import type { User } from "~/models/user.server";
-import { getUserById } from "~/models/user.server";
-
-invariant(process.env.SESSION_SECRET, "SESSION_SECRET must be set");
-
-export const sessionStorage = createCookieSessionStorage({
-  cookie: {
-    name: "__session",
-    httpOnly: true,
-    path: "/",
-    sameSite: "lax",
-    secrets: [process.env.SESSION_SECRET],
-    secure: process.env.NODE_ENV === "production",
-  },
-});
-
-const USER_SESSION_KEY = "userId";
-
-export async function getSession(request: Request) {
-  const cookie = request.headers.get("Cookie");
-  return sessionStorage.getSession(cookie);
-}
-
-export async function getUserId(
-  request: Request,
-): Promise<User["id"] | undefined> {
-  const session = await getSession(request);
-  const userId = session.get(USER_SESSION_KEY);
-  return userId;
-}
-
-export async function getUser(request: Request) {
-  const userId = await getUserId(request);
-  if (userId === undefined) return null;
-
-  const user = await getUserById(userId);
-  if (user) return user;
-
-  throw await logout(request);
-}
-
-export async function requireUserId(
-  request: Request,
-  redirectTo: string = new URL(request.url).pathname,
-) {
-  const userId = await getUserId(request);
-  if (!userId) {
-    const searchParams = new URLSearchParams([["redirectTo", redirectTo]]);
-    throw redirect(`/login?${searchParams}`);
-  }
-  return userId;
-}
-
-export async function requireUser(request: Request) {
-  const userId = await requireUserId(request);
-
-  const user = await getUserById(userId);
-  if (user) return user;
-
-  throw await logout(request);
-}
-
-export async function createUserSession({
-  request,
-  userId,
-  remember,
-  redirectTo,
-}: {
-  request: Request;
-  userId: string;
-  remember: boolean;
-  redirectTo: string;
-}) {
-  const session = await getSession(request);
-  session.set(USER_SESSION_KEY, userId);
-  return redirect(redirectTo, {
-    headers: {
-      "Set-Cookie": await sessionStorage.commitSession(session, {
-        maxAge: remember
-          ? 60 * 60 * 24 * 7 // 7 days
-          : undefined,
-      }),
-    },
-  });
-}
-
-export async function logout(request: Request) {
-  const session = await getSession(request);
-  return redirect("/", {
-    headers: {
-      "Set-Cookie": await sessionStorage.destroySession(session),
-    },
-  });
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/singleton.server.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/singleton.server.ts
deleted file mode 100644
index 3e179aa5..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/singleton.server.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Since the dev server re-requires the bundle, do some shenanigans to make
-// certain things persist across that 😆
-// Borrowed/modified from https://github.com/jenseng/abuse-the-platform/blob/2993a7e846c95ace693ce61626fa072174c8d9c7/app/utils/singleton.ts
-
-export const singleton = <Value>(
-  name: string,
-  valueFactory: () => Value,
-): Value => {
-  const g = global as unknown as { __singletons: Record<string, unknown> };
-  g.__singletons ??= {};
-  g.__singletons[name] ??= valueFactory();
-  return g.__singletons[name] as Value;
-};
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/tailwind.css b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/tailwind.css
deleted file mode 100644
index b5c61c95..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/tailwind.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/utils.test.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/utils.test.ts
deleted file mode 100644
index 7ffd94a3..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/utils.test.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { validateEmail } from "./utils";
-
-test("validateEmail returns false for non-emails", () => {
-  expect(validateEmail(undefined)).toBe(false);
-  expect(validateEmail(null)).toBe(false);
-  expect(validateEmail("")).toBe(false);
-  expect(validateEmail("not-an-email")).toBe(false);
-  expect(validateEmail("n@")).toBe(false);
-});
-
-test("validateEmail returns true for emails", () => {
-  expect(validateEmail("kody@example.com")).toBe(true);
-});
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/utils.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/utils.ts
deleted file mode 100644
index f6da6bd0..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/app/utils.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useMatches } from "@remix-run/react";
-import { useMemo } from "react";
-
-import type { User } from "~/models/user.server";
-
-const DEFAULT_REDIRECT = "/";
-
-/**
- * This should be used any time the redirect path is user-provided
- * (Like the query string on our login/signup pages). This avoids
- * open-redirect vulnerabilities.
- * @param {string} to The redirect destination
- * @param {string} defaultRedirect The redirect to use if the to is unsafe.
- */
-export function safeRedirect(
-  to: FormDataEntryValue | string | null | undefined,
-  defaultRedirect: string = DEFAULT_REDIRECT,
-) {
-  if (!to || typeof to !== "string") {
-    return defaultRedirect;
-  }
-
-  if (!to.startsWith("/") || to.startsWith("//")) {
-    return defaultRedirect;
-  }
-
-  return to;
-}
-
-/**
- * This base hook is used in other hooks to quickly search for specific data
- * across all loader data using useMatches.
- * @param {string} id The route id
- * @returns {JSON|undefined} The router data or undefined if not found
- */
-export function useMatchesData(
-  id: string,
-): Record<string, unknown> | undefined {
-  const matchingRoutes = useMatches();
-  const route = useMemo(
-    () => matchingRoutes.find((route) => route.id === id),
-    [matchingRoutes, id],
-  );
-  return route?.data as Record<string, unknown>;
-}
-
-function isUser(user: unknown): user is User {
-  return (
-    user != null &&
-    typeof user === "object" &&
-    "email" in user &&
-    typeof user.email === "string"
-  );
-}
-
-export function useOptionalUser(): User | undefined {
-  const data = useMatchesData("root");
-  if (!data || !isUser(data.user)) {
-    return undefined;
-  }
-  return data.user;
-}
-
-export function useUser(): User {
-  const maybeUser = useOptionalUser();
-  if (!maybeUser) {
-    throw new Error(
-      "No user found in root loader, but user is required by useUser. If user is optional, try useOptionalUser instead.",
-    );
-  }
-  return maybeUser;
-}
-
-export function validateEmail(email: unknown): email is string {
-  return typeof email === "string" && email.length > 3 && email.includes("@");
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress.config.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress.config.ts
deleted file mode 100644
index 5c07d6ad..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress.config.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { defineConfig } from "cypress";
-
-export default defineConfig({
-  e2e: {
-    setupNodeEvents: (on, config) => {
-      const isDev = config.watchForFileChanges;
-      const port = process.env.PORT ?? (isDev ? "3000" : "8811");
-      const configOverrides: Partial<Cypress.PluginConfigOptions> = {
-        baseUrl: `http://localhost:${port}`,
-        screenshotOnRunFailure: !process.env.CI,
-      };
-
-      // To use this:
-      // cy.task('log', whateverYouWantInTheTerminal)
-      on("task", {
-        log: (message) => {
-          console.log(message);
-
-          return null;
-        },
-      });
-
-      return { ...config, ...configOverrides };
-    },
-  },
-});
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/.eslintrc.js b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/.eslintrc.js
deleted file mode 100644
index 37c79ff0..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/.eslintrc.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    project: "./tsconfig.json",
-  },
-};
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/e2e/smoke.cy.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/e2e/smoke.cy.ts
deleted file mode 100644
index f62a86ee..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/e2e/smoke.cy.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { faker } from "@faker-js/faker";
-
-describe("smoke tests", () => {
-  afterEach(() => {
-    cy.cleanupUser();
-  });
-
-  it("should allow you to register and login", () => {
-    const loginForm = {
-      email: `${faker.internet.userName()}@example.com`,
-      password: faker.internet.password(),
-    };
-
-    cy.then(() => ({ email: loginForm.email })).as("user");
-
-    cy.visitAndCheck("/");
-
-    cy.findByRole("link", { name: /sign up/i }).click();
-
-    cy.findByRole("textbox", { name: /email/i }).type(loginForm.email);
-    cy.findByLabelText(/password/i).type(loginForm.password);
-    cy.findByRole("button", { name: /create account/i }).click();
-
-    cy.findByRole("link", { name: /notes/i }).click();
-    cy.findByRole("button", { name: /logout/i }).click();
-    cy.findByRole("link", { name: /log in/i });
-  });
-
-  it("should allow you to make a note", () => {
-    const testNote = {
-      title: faker.lorem.words(1),
-      body: faker.lorem.sentences(1),
-    };
-    cy.login();
-
-    cy.visitAndCheck("/");
-
-    cy.findByRole("link", { name: /notes/i }).click();
-    cy.findByText("No notes yet");
-
-    cy.findByRole("link", { name: /\+ new note/i }).click();
-
-    cy.findByRole("textbox", { name: /title/i }).type(testNote.title);
-    cy.findByRole("textbox", { name: /body/i }).type(testNote.body);
-    cy.findByRole("button", { name: /save/i }).click();
-
-    cy.findByRole("button", { name: /delete/i }).click();
-
-    cy.findByText("No notes yet");
-  });
-});
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/fixtures/example.json b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/fixtures/example.json
deleted file mode 100644
index 02e42543..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/fixtures/example.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/support/commands.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/support/commands.ts
deleted file mode 100644
index 23815c92..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/support/commands.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { faker } from "@faker-js/faker";
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    interface Chainable {
-      /**
-       * Logs in with a random user. Yields the user and adds an alias to the user
-       *
-       * @returns {typeof login}
-       * @memberof Chainable
-       * @example
-       *    cy.login()
-       * @example
-       *    cy.login({ email: 'whatever@example.com' })
-       */
-      login: typeof login;
-
-      /**
-       * Deletes the current @user
-       *
-       * @returns {typeof cleanupUser}
-       * @memberof Chainable
-       * @example
-       *    cy.cleanupUser()
-       * @example
-       *    cy.cleanupUser({ email: 'whatever@example.com' })
-       */
-      cleanupUser: typeof cleanupUser;
-
-      /**
-       * Extends the standard visit command to wait for the page to load
-       *
-       * @returns {typeof visitAndCheck}
-       * @memberof Chainable
-       * @example
-       *    cy.visitAndCheck('/')
-       *  @example
-       *    cy.visitAndCheck('/', 500)
-       */
-      visitAndCheck: typeof visitAndCheck;
-    }
-  }
-}
-
-function login({
-  email = faker.internet.email({ provider: "example.com" }),
-}: {
-  email?: string;
-} = {}) {
-  cy.then(() => ({ email })).as("user");
-  cy.exec(
-    `npx ts-node -r tsconfig-paths/register ./cypress/support/create-user.ts "${email}"`,
-  ).then(({ stdout }) => {
-    const cookieValue = stdout
-      .replace(/.*<cookie>(?<cookieValue>.*)<\/cookie>.*/s, "$<cookieValue>")
-      .trim();
-    cy.setCookie("__session", cookieValue);
-  });
-  return cy.get("@user");
-}
-
-function cleanupUser({ email }: { email?: string } = {}) {
-  if (email) {
-    deleteUserByEmail(email);
-  } else {
-    cy.get("@user").then((user) => {
-      const email = (user as { email?: string }).email;
-      if (email) {
-        deleteUserByEmail(email);
-      }
-    });
-  }
-  cy.clearCookie("__session");
-}
-
-function deleteUserByEmail(email: string) {
-  cy.exec(
-    `npx ts-node -r tsconfig-paths/register ./cypress/support/delete-user.ts "${email}"`,
-  );
-  cy.clearCookie("__session");
-}
-
-// We're waiting a second because of this issue happen randomly
-// https://github.com/cypress-io/cypress/issues/7306
-// Also added custom types to avoid getting detached
-// https://github.com/cypress-io/cypress/issues/7306#issuecomment-1152752612
-// ===========================================================
-function visitAndCheck(url: string, waitTime = 1000) {
-  cy.visit(url);
-  cy.location("pathname").should("contain", url).wait(waitTime);
-}
-
-export const registerCommands = () => {
-  Cypress.Commands.add("login", login);
-  Cypress.Commands.add("cleanupUser", cleanupUser);
-  Cypress.Commands.add("visitAndCheck", visitAndCheck);
-};
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/support/create-user.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/support/create-user.ts
deleted file mode 100644
index fa33b948..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/support/create-user.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// Use this to create a new user and login with that user
-// Simply call this with:
-// npx ts-node -r tsconfig-paths/register ./cypress/support/create-user.ts username@example.com,
-// and it will log out the cookie value you can use to interact with the server
-// as that new user.
-
-import { installGlobals } from "@remix-run/node";
-import { parse } from "cookie";
-
-import { createUser } from "~/models/user.server";
-import { createUserSession } from "~/session.server";
-
-installGlobals();
-
-async function createAndLogin(email: string) {
-  if (!email) {
-    throw new Error("email required for login");
-  }
-  if (!email.endsWith("@example.com")) {
-    throw new Error("All test emails must end in @example.com");
-  }
-
-  const user = await createUser(email, "myreallystrongpassword");
-
-  const response = await createUserSession({
-    request: new Request("test://test"),
-    userId: user.id,
-    remember: false,
-    redirectTo: "/",
-  });
-
-  const cookieValue = response.headers.get("Set-Cookie");
-  if (!cookieValue) {
-    throw new Error("Cookie missing from createUserSession response");
-  }
-  const parsedCookie = parse(cookieValue);
-  // we log it like this so our cypress command can parse it out and set it as
-  // the cookie value.
-  console.log(
-    `
-<cookie>
-  ${parsedCookie.__session}
-</cookie>
-  `.trim(),
-  );
-}
-
-createAndLogin(process.argv[2]);
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/support/delete-user.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/support/delete-user.ts
deleted file mode 100644
index 13500190..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/support/delete-user.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// Use this to delete a user by their email
-// Simply call this with:
-// npx ts-node -r tsconfig-paths/register ./cypress/support/delete-user.ts username@example.com,
-// and that user will get deleted
-
-import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
-import { installGlobals } from "@remix-run/node";
-
-import { prisma } from "~/db.server";
-
-installGlobals();
-
-async function deleteUser(email: string) {
-  if (!email) {
-    throw new Error("email required for login");
-  }
-  if (!email.endsWith("@example.com")) {
-    throw new Error("All test emails must end in @example.com");
-  }
-
-  try {
-    await prisma.user.delete({ where: { email } });
-  } catch (error) {
-    if (
-      error instanceof PrismaClientKnownRequestError &&
-      error.code === "P2025"
-    ) {
-      console.log("User not found, so no need to delete");
-    } else {
-      throw error;
-    }
-  } finally {
-    await prisma.$disconnect();
-  }
-}
-
-deleteUser(process.argv[2]);
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/support/e2e.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/support/e2e.ts
deleted file mode 100644
index e2c28ef0..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/support/e2e.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import "@testing-library/cypress/add-commands";
-import { registerCommands } from "./commands";
-
-registerCommands();
-
-Cypress.on("uncaught:exception", (err) => {
-  // Cypress and React Hydrating the document don't get along
-  // for some unknown reason. Hopefully we figure out why eventually
-  // so we can remove this.
-  if (
-    /hydrat/i.test(err.message) ||
-    /Minified React error #418/.test(err.message) ||
-    /Minified React error #423/.test(err.message)
-  ) {
-    return false;
-  }
-});
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/tsconfig.json b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/tsconfig.json
deleted file mode 100644
index 54e38b49..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/cypress/tsconfig.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "exclude": [
-    "../node_modules/@types/jest",
-    "../node_modules/@testing-library/jest-dom"
-  ],
-  "include": [
-    "e2e/**/*",
-    "support/**/*",
-    "../node_modules/cypress",
-    "../node_modules/@testing-library/cypress"
-  ],
-  "compilerOptions": {
-    "baseUrl": "./",
-    "noEmit": true,
-    "types": ["node", "cypress", "@testing-library/cypress"],
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "moduleResolution": "Bundler",
-    "target": "ES2020",
-    "strict": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-
-    "paths": {
-      "~/*": ["../app/*"]
-    }
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/fly.toml b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/fly.toml
deleted file mode 100644
index 8a768eb7..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/fly.toml
+++ /dev/null
@@ -1,52 +0,0 @@
-app = "indie-stack-template"
-
-kill_signal = "SIGINT"
-kill_timeout = 5
-processes = []
-swap_size_mb = 512
-
-[experimental]
-  allowed_public_ports = []
-  auto_rollback = true
-  cmd = "start.sh"
-  entrypoint = "sh"
-
-[mounts]
-  source = "data"
-  destination = "/data"
-
-[[services]]
-  internal_port = 8080
-  processes = ["app"]
-  protocol = "tcp"
-  script_checks = []
-
-  [services.concurrency]
-    hard_limit = 25
-    soft_limit = 20
-    type = "connections"
-
-  [[services.ports]]
-    handlers = ["http"]
-    port = 80
-    force_https = true
-
-  [[services.ports]]
-    handlers = ["tls", "http"]
-    port = 443
-
-  [[services.tcp_checks]]
-    grace_period = "1s"
-    interval = "15s"
-    restart_limit = 0
-    timeout = "2s"
-
-  [[services.http_checks]]
-    interval = "10s"
-    grace_period = "5s"
-    method = "get"
-    path = "/healthcheck"
-    protocol = "http"
-    timeout = "2s"
-    tls_skip_verify = false
-    [services.http_checks.headers]
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/mocks/README.md b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/mocks/README.md
deleted file mode 100644
index a1bd34d8..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/mocks/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Mocks
-
-Use this to mock any third party HTTP resources that you don't have running locally and want to have mocked for local development as well as tests.
-
-Learn more about how to use this at [mswjs.io](https://mswjs.io/)
-
-For an extensive example, see the [source code for kentcdodds.com](https://github.com/kentcdodds/kentcdodds.com/blob/main/mocks/index.ts)
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/mocks/index.js b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/mocks/index.js
deleted file mode 100644
index ca2210ce..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/mocks/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const { http, passthrough } = require("msw");
-const { setupServer } = require("msw/node");
-
-// put one-off handlers that don't really need an entire file to themselves here
-const miscHandlers = [
-  http.post(`${process.env.REMIX_DEV_HTTP_ORIGIN}/ping`, () => passthrough()),
-];
-
-const server = setupServer(...miscHandlers);
-
-server.listen({ onUnhandledRequest: "bypass" });
-console.info("🔶 Mock server running");
-
-process.once("SIGINT", () => server.close());
-process.once("SIGTERM", () => server.close());
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/package.json b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/package.json
deleted file mode 100644
index fc13e3a9..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/package.json
+++ /dev/null
@@ -1,93 +0,0 @@
-{
-  "name": "remix-indie-stack",
-  "private": true,
-  "sideEffects": false,
-  "scripts": {
-    "build": "remix build",
-    "dev": "remix dev -c \"npm run dev:serve\"",
-    "dev:serve": "binode --require mocks -- @remix-run/serve:remix-serve ./build/index.js",
-    "format": "prettier --write ",
-    "format:repo": "npm run format && npm run lint -- --fix",
-    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint ",
-    "setup": "prisma generate && prisma migrate deploy && prisma db seed",
-    "start": "remix-serve ./build/index.js",
-    "start:mocks": "binode --require mocks -- @remix-run/serve:remix-serve ./build/index.js",
-    "test": "vitest",
-    "test:e2e:dev": "start-server-and-test dev http://localhost:3000 \"npx cypress open\"",
-    "pretest:e2e:run": "npm run build",
-    "test:e2e:run": "cross-env PORT=8811 start-server-and-test start:mocks http://localhost:8811 \"npx cypress run\"",
-    "typecheck": "tsc && tsc -p cypress",
-    "validate": "npm-run-all --parallel \"test -- --run\" lint typecheck test:e2e:run"
-  },
-  "eslintIgnore": [
-    "/node_modules",
-    "/build",
-    "/public/build"
-  ],
-  "dependencies": {
-    "@prisma/client": "^5.19.1",
-    "@remix-run/css-bundle": "^2.12.1",
-    "@remix-run/node": "^2.12.1",
-    "@remix-run/react": "^2.12.1",
-    "@remix-run/serve": "^2.12.1",
-    "bcryptjs": "^2.4.3",
-    "isbot": "^5.1.17",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tiny-invariant": "^1.3.3"
-  },
-  "devDependencies": {
-    "@faker-js/faker": "^9.0.0",
-    "@remix-run/dev": "^2.12.1",
-    "@testing-library/cypress": "^10.0.2",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@types/bcryptjs": "^2.4.6",
-    "@types/cookie": "^0.6.0",
-    "@types/eslint": "^8.56.12",
-    "@types/node": "^20.16.5",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^2.0.5",
-    "autoprefixer": "^10.4.20",
-    "binode": "^1.0.5",
-    "cookie": "^0.6.0",
-    "cross-env": "^7.0.3",
-    "cypress": "^13.14.2",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-cypress": "^3.5.0",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-jest-dom": "^5.4.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-markdown": "^5.1.0",
-    "eslint-plugin-react": "^7.35.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-testing-library": "^6.3.0",
-    "happy-dom": "^15.7.3",
-    "msw": "^2.4.4",
-    "npm-run-all2": "^6.2.2",
-    "postcss": "^8.4.45",
-    "prettier": "3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.6",
-    "prisma": "^5.19.1",
-    "start-server-and-test": "^2.0.7",
-    "tailwindcss": "^3.4.10",
-    "ts-node": "^10.9.2",
-    "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.3",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^2.0.5"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "prisma": {
-    "seed": "ts-node -r tsconfig-paths/register prisma/seed.ts"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/postcss.config.js b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/postcss.config.js
deleted file mode 100644
index 12a703d9..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prettier.config.js b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prettier.config.js
deleted file mode 100644
index 776594f0..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prettier.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import("prettier").Config} */
-module.exports = {
-  plugins: ["prettier-plugin-tailwindcss"],
-};
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prisma/migrations/20220713162558_init/migration.sql b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prisma/migrations/20220713162558_init/migration.sql
deleted file mode 100644
index 121ffe2d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prisma/migrations/20220713162558_init/migration.sql
+++ /dev/null
@@ -1,31 +0,0 @@
--- CreateTable
-CREATE TABLE "User" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "email" TEXT NOT NULL,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL
-);
-
--- CreateTable
-CREATE TABLE "Password" (
-    "hash" TEXT NOT NULL,
-    "userId" TEXT NOT NULL,
-    CONSTRAINT "Password_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
-);
-
--- CreateTable
-CREATE TABLE "Note" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "title" TEXT NOT NULL,
-    "body" TEXT NOT NULL,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL,
-    "userId" TEXT NOT NULL,
-    CONSTRAINT "Note_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
-);
-
--- CreateIndex
-CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
-
--- CreateIndex
-CREATE UNIQUE INDEX "Password_userId_key" ON "Password"("userId");
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prisma/migrations/migration_lock.toml b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prisma/migrations/migration_lock.toml
deleted file mode 100644
index e5e5c470..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prisma/migrations/migration_lock.toml
+++ /dev/null
@@ -1,3 +0,0 @@
-# Please do not edit this file manually
-# It should be added in your version-control system (i.e. Git)
-provider = "sqlite"
\ No newline at end of file
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prisma/schema.prisma b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prisma/schema.prisma
deleted file mode 100644
index 141c8dc5..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prisma/schema.prisma
+++ /dev/null
@@ -1,38 +0,0 @@
-datasource db {
-  provider = "sqlite"
-  url      = env("DATABASE_URL")
-}
-
-generator client {
-  provider = "prisma-client-js"
-}
-
-model User {
-  id    String @id @default(cuid())
-  email String @unique
-
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-
-  password Password?
-  notes    Note[]
-}
-
-model Password {
-  hash String
-
-  user   User   @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)
-  userId String @unique
-}
-
-model Note {
-  id    String @id @default(cuid())
-  title String
-  body  String
-
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-
-  user   User   @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)
-  userId String
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prisma/seed.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prisma/seed.ts
deleted file mode 100644
index 5de5397c..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/prisma/seed.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { PrismaClient } from "@prisma/client";
-import bcrypt from "bcryptjs";
-
-const prisma = new PrismaClient();
-
-async function seed() {
-  const email = "rachel@remix.run";
-
-  // cleanup the existing database
-  await prisma.user.delete({ where: { email } }).catch(() => {
-    // no worries if it doesn't exist yet
-  });
-
-  const hashedPassword = await bcrypt.hash("racheliscool", 10);
-
-  const user = await prisma.user.create({
-    data: {
-      email,
-      password: {
-        create: {
-          hash: hashedPassword,
-        },
-      },
-    },
-  });
-
-  await prisma.note.create({
-    data: {
-      title: "My first note",
-      body: "Hello, world!",
-      userId: user.id,
-    },
-  });
-
-  await prisma.note.create({
-    data: {
-      title: "My second note",
-      body: "Hello, world!",
-      userId: user.id,
-    },
-  });
-
-  console.log(`Database has been seeded. 🌱`);
-}
-
-seed()
-  .catch((e) => {
-    console.error(e);
-    process.exit(1);
-  })
-  .finally(async () => {
-    await prisma.$disconnect();
-  });
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/public/favicon.ico b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/public/favicon.ico
deleted file mode 100644
index 8830cf68..00000000
Binary files a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/public/favicon.ico and /dev/null differ
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.config.js b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.config.js
deleted file mode 100644
index 29582b29..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
-  cacheDirectory: "./node_modules/.cache/remix",
-  ignoredRouteFiles: ["**/.*", "**/*.test.{ts,tsx}"],
-  serverModuleFormat: "cjs",
-};
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.env.d.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.env.d.ts
deleted file mode 100644
index dcf8c45e..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.env.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-/// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/node" />
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.init/gitignore b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.init/gitignore
deleted file mode 100644
index 38e24676..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.init/gitignore
+++ /dev/null
@@ -1,10 +0,0 @@
-node_modules
-
-/build
-/public/build
-.env
-
-/cypress/screenshots
-/cypress/videos
-/prisma/data.db
-/prisma/data.db-journal
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.init/index.js b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.init/index.js
deleted file mode 100644
index 94b1200e..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.init/index.js
+++ /dev/null
@@ -1,227 +0,0 @@
-const { execSync } = require("node:child_process");
-const crypto = require("node:crypto");
-const fs = require("node:fs/promises");
-const path = require("node:path");
-
-const toml = require("@iarna/toml");
-const PackageJson = require("@npmcli/package-json");
-const semver = require("semver");
-
-const cleanupCypressFiles = ({ fileEntries, packageManager }) =>
-  fileEntries.flatMap(([filePath, content]) => {
-    const newContent = content.replace(
-      new RegExp("npx ts-node", "g"),
-      packageManager.name === "bun" ? "bun" : `${packageManager.exec} ts-node`,
-    );
-
-    return [fs.writeFile(filePath, newContent)];
-  });
-
-const escapeRegExp = (string) =>
-  // $& means the whole matched string
-  string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-
-const getPackageManagerCommand = (packageManager) =>
-  // Inspired by https://github.com/nrwl/nx/blob/bd9b33eaef0393d01f747ea9a2ac5d2ca1fb87c6/packages/nx/src/utils/package-manager.ts#L38-L103
-  ({
-    bun: () => ({
-      exec: "bunx",
-      lockfile: "bun.lockb",
-      name: "bun",
-      run: (script, args) => `bun run ${script} ${args || ""}`,
-    }),
-    npm: () => ({
-      exec: "npx",
-      lockfile: "package-lock.json",
-      name: "npm",
-      run: (script, args) => `npm run ${script} ${args ? `-- ${args}` : ""}`,
-    }),
-    pnpm: () => {
-      const pnpmVersion = getPackageManagerVersion("pnpm");
-      const includeDoubleDashBeforeArgs = semver.lt(pnpmVersion, "7.0.0");
-      const useExec = semver.gte(pnpmVersion, "6.13.0");
-
-      return {
-        exec: useExec ? "pnpm exec" : "pnpx",
-        lockfile: "pnpm-lock.yaml",
-        name: "pnpm",
-        run: (script, args) =>
-          includeDoubleDashBeforeArgs
-            ? `pnpm run ${script} ${args ? `-- ${args}` : ""}`
-            : `pnpm run ${script} ${args || ""}`,
-      };
-    },
-    yarn: () => ({
-      exec: "yarn",
-      lockfile: "yarn.lock",
-      name: "yarn",
-      run: (script, args) => `yarn ${script} ${args || ""}`,
-    }),
-  })[packageManager]();
-
-const getPackageManagerVersion = (packageManager) =>
-  // Copied over from https://github.com/nrwl/nx/blob/bd9b33eaef0393d01f747ea9a2ac5d2ca1fb87c6/packages/nx/src/utils/package-manager.ts#L105-L114
-  execSync(`${packageManager} --version`).toString("utf-8").trim();
-
-const getRandomString = (length) => crypto.randomBytes(length).toString("hex");
-
-const removeUnusedDependencies = (dependencies, unusedDependencies) =>
-  Object.fromEntries(
-    Object.entries(dependencies).filter(
-      ([key]) => !unusedDependencies.includes(key),
-    ),
-  );
-
-const updatePackageJson = ({ APP_NAME, packageJson, packageManager }) => {
-  const {
-    devDependencies,
-    prisma: { seed: prismaSeed, ...prisma },
-    scripts: {
-      // eslint-disable-next-line no-unused-vars
-      "format:repo": _repoFormatScript,
-      ...scripts
-    },
-  } = packageJson.content;
-
-  packageJson.update({
-    name: APP_NAME,
-    devDependencies:
-      packageManager.name === "bun"
-        ? removeUnusedDependencies(devDependencies, ["ts-node"])
-        : devDependencies,
-    prisma: {
-      ...prisma,
-      seed:
-        packageManager.name === "bun"
-          ? prismaSeed.replace("ts-node", "bun")
-          : prismaSeed,
-    },
-    scripts,
-  });
-};
-
-const main = async ({ packageManager, rootDirectory }) => {
-  const pm = getPackageManagerCommand(packageManager);
-
-  const README_PATH = path.join(rootDirectory, "README.md");
-  const FLY_TOML_PATH = path.join(rootDirectory, "fly.toml");
-  const EXAMPLE_ENV_PATH = path.join(rootDirectory, ".env.example");
-  const ENV_PATH = path.join(rootDirectory, ".env");
-  const DOCKERFILE_PATH = path.join(rootDirectory, "Dockerfile");
-  const CYPRESS_SUPPORT_PATH = path.join(rootDirectory, "cypress", "support");
-  const CYPRESS_COMMANDS_PATH = path.join(CYPRESS_SUPPORT_PATH, "commands.ts");
-  const CREATE_USER_COMMAND_PATH = path.join(
-    CYPRESS_SUPPORT_PATH,
-    "create-user.ts",
-  );
-  const DELETE_USER_COMMAND_PATH = path.join(
-    CYPRESS_SUPPORT_PATH,
-    "delete-user.ts",
-  );
-
-  const REPLACER = "indie-stack-template";
-
-  const DIR_NAME = path.basename(rootDirectory);
-  const SUFFIX = getRandomString(2);
-
-  const APP_NAME = (DIR_NAME + "-" + SUFFIX)
-    // get rid of anything that's not allowed in an app name
-    .replace(/[^a-zA-Z0-9-_]/g, "-");
-
-  const [
-    prodContent,
-    readme,
-    env,
-    dockerfile,
-    cypressCommands,
-    createUserCommand,
-    deleteUserCommand,
-    packageJson,
-  ] = await Promise.all([
-    fs.readFile(FLY_TOML_PATH, "utf-8"),
-    fs.readFile(README_PATH, "utf-8"),
-    fs.readFile(EXAMPLE_ENV_PATH, "utf-8"),
-    fs.readFile(DOCKERFILE_PATH, "utf-8"),
-    fs.readFile(CYPRESS_COMMANDS_PATH, "utf-8"),
-    fs.readFile(CREATE_USER_COMMAND_PATH, "utf-8"),
-    fs.readFile(DELETE_USER_COMMAND_PATH, "utf-8"),
-    PackageJson.load(rootDirectory),
-  ]);
-
-  const newEnv = env.replace(
-    /^SESSION_SECRET=.*$/m,
-    `SESSION_SECRET="${getRandomString(16)}"`,
-  );
-
-  const prodToml = toml.parse(prodContent);
-  prodToml.app = prodToml.app.replace(REPLACER, APP_NAME);
-
-  const initInstructions = `
-- First run this stack's \`remix.init\` script and commit the changes it makes to your project.
-
-  \`\`\`sh
-  npx remix init
-  git init # if you haven't already
-  git add .
-  git commit -m "Initialize project"
-  \`\`\`
-`;
-
-  const newReadme = readme
-    .replace(new RegExp(escapeRegExp(REPLACER), "g"), APP_NAME)
-    .replace(initInstructions, "");
-
-  const newDockerfile = pm.lockfile
-    ? dockerfile.replace(
-        new RegExp(escapeRegExp("ADD package.json"), "g"),
-        `ADD package.json ${pm.lockfile}`,
-      )
-    : dockerfile;
-
-  updatePackageJson({ APP_NAME, packageJson, packageManager: pm });
-
-  await Promise.all([
-    fs.writeFile(FLY_TOML_PATH, toml.stringify(prodToml)),
-    fs.writeFile(README_PATH, newReadme),
-    fs.writeFile(ENV_PATH, newEnv),
-    fs.writeFile(DOCKERFILE_PATH, newDockerfile),
-    ...cleanupCypressFiles({
-      fileEntries: [
-        [CYPRESS_COMMANDS_PATH, cypressCommands],
-        [CREATE_USER_COMMAND_PATH, createUserCommand],
-        [DELETE_USER_COMMAND_PATH, deleteUserCommand],
-      ],
-      packageManager: pm,
-    }),
-    packageJson.save(),
-    fs.copyFile(
-      path.join(rootDirectory, "remix.init", "gitignore"),
-      path.join(rootDirectory, ".gitignore"),
-    ),
-    fs.rm(path.join(rootDirectory, ".github", "ISSUE_TEMPLATE"), {
-      recursive: true,
-    }),
-    fs.rm(path.join(rootDirectory, ".github", "workflows", "format-repo.yml")),
-    fs.rm(path.join(rootDirectory, ".github", "workflows", "lint-repo.yml")),
-    fs.rm(path.join(rootDirectory, ".github", "workflows", "no-response.yml")),
-    fs.rm(path.join(rootDirectory, ".github", "dependabot.yml")),
-    fs.rm(path.join(rootDirectory, ".github", "PULL_REQUEST_TEMPLATE.md")),
-    fs.rm(path.join(rootDirectory, "LICENSE.md")),
-  ]);
-
-  execSync(pm.run("setup"), { cwd: rootDirectory, stdio: "inherit" });
-
-  execSync(pm.run("format", "--log-level warn"), {
-    cwd: rootDirectory,
-    stdio: "inherit",
-  });
-
-  console.log(
-    `Setup is complete. You're now ready to rock and roll 🤘
-
-Start development with \`${pm.run("dev")}\`
-    `.trim(),
-  );
-};
-
-module.exports = main;
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.init/package.json b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.init/package.json
deleted file mode 100644
index 1a82a5cb..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/remix.init/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "remix.init",
-  "private": true,
-  "main": "index.js",
-  "license": "MIT",
-  "dependencies": {
-    "@iarna/toml": "^2.2.5",
-    "@npmcli/package-json": "^5.1.0",
-    "semver": "^7.6.0"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/start.sh b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/start.sh
deleted file mode 100755
index 109a13c3..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/start.sh
+++ /dev/null
@@ -1,9 +0,0 @@
-#!/bin/sh -ex
-
-# This file is how Fly starts the server (configured in fly.toml). Before starting
-# the server though, we need to run any prisma migrations that haven't yet been
-# run, which is why this file exists in the first place.
-# Learn more: https://community.fly.io/t/sqlite-not-getting-setup-properly/4386
-
-npx prisma migrate deploy
-npm run start
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/tailwind.config.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/tailwind.config.ts
deleted file mode 100644
index 64a5243e..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/tailwind.config.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: ["./app/**/*.{js,jsx,ts,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-} satisfies Config;
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/test/setup-test-env.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/test/setup-test-env.ts
deleted file mode 100644
index 8f910daf..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/test/setup-test-env.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { installGlobals } from "@remix-run/node";
-import "@testing-library/jest-dom/vitest";
-
-installGlobals();
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/tsconfig.json b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/tsconfig.json
deleted file mode 100644
index 221508c2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/tsconfig.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "exclude": [
-    "./cypress", "./cypress.config.ts"],
-  "include": [
-    "remix.env.d.ts", "**/*.ts", "**/*.tsx"],
-  "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2020"],
-    "types": ["vitest/globals"],
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "module": "CommonJS",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "target": "ES2020",
-    "strict": true,
-    "allowJs": true,
-    "forceConsistentCasingInFileNames": true,
-    "baseUrl": "./",
-    "paths": {
-      "~/*": ["./app/*"]
-    },
-    "skipLibCheck": true,
-
-    // Remix takes care of building everything in `remix build`.
-    "noEmit": true
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/vitest.config.ts b/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/vitest.config.ts
deleted file mode 100644
index 898aecae..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix-indie-stack/vitest.config.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/// <reference types="vitest" />
-/// <reference types="vite/client" />
-
-import react from "@vitejs/plugin-react";
-import tsconfigPaths from "vite-tsconfig-paths";
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
-  test: {
-    globals: true,
-    environment: "happy-dom",
-    setupFiles: ["./test/setup-test-env.ts"],
-  },
-});
diff --git a/packages/nyxb/test/fixtures/frameworks/remix/app/entry.client.tsx b/packages/nyxb/test/fixtures/frameworks/remix/app/entry.client.tsx
deleted file mode 100644
index 94d5dc0d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix/app/entry.client.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * By default, Remix will handle hydrating your app on the client for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.client
- */
-
-import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
-import { hydrateRoot } from "react-dom/client";
-
-startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <RemixBrowser />
-    </StrictMode>
-  );
-});
diff --git a/packages/nyxb/test/fixtures/frameworks/remix/app/entry.server.tsx b/packages/nyxb/test/fixtures/frameworks/remix/app/entry.server.tsx
deleted file mode 100644
index 45db3229..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix/app/entry.server.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-/**
- * By default, Remix will handle generating the HTTP Response for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.server
- */
-
-import { PassThrough } from "node:stream";
-
-import type { AppLoadContext, EntryContext } from "@remix-run/node";
-import { createReadableStreamFromReadable } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
-import { isbot } from "isbot";
-import { renderToPipeableStream } from "react-dom/server";
-
-const ABORT_DELAY = 5_000;
-
-export default function handleRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext,
-  // This is ignored so we can keep it in the template for visibility.  Feel
-  // free to delete this parameter in your app if you're not using it!
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  loadContext: AppLoadContext
-) {
-  return isbot(request.headers.get("user-agent") || "")
-    ? handleBotRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext
-      )
-    : handleBrowserRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext
-      );
-}
-
-function handleBotRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext
-) {
-  return new Promise((resolve, reject) => {
-    let shellRendered = false;
-    const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
-      {
-        onAllReady() {
-          shellRendered = true;
-          const body = new PassThrough();
-          const stream = createReadableStreamFromReadable(body);
-
-          responseHeaders.set("Content-Type", "text/html");
-
-          resolve(
-            new Response(stream, {
-              headers: responseHeaders,
-              status: responseStatusCode,
-            })
-          );
-
-          pipe(body);
-        },
-        onShellError(error: unknown) {
-          reject(error);
-        },
-        onError(error: unknown) {
-          responseStatusCode = 500;
-          // Log streaming rendering errors from inside the shell.  Don't log
-          // errors encountered during initial shell rendering since they'll
-          // reject and get logged in handleDocumentRequest.
-          if (shellRendered) {
-            console.error(error);
-          }
-        },
-      }
-    );
-
-    setTimeout(abort, ABORT_DELAY);
-  });
-}
-
-function handleBrowserRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext
-) {
-  return new Promise((resolve, reject) => {
-    let shellRendered = false;
-    const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
-      {
-        onShellReady() {
-          shellRendered = true;
-          const body = new PassThrough();
-          const stream = createReadableStreamFromReadable(body);
-
-          responseHeaders.set("Content-Type", "text/html");
-
-          resolve(
-            new Response(stream, {
-              headers: responseHeaders,
-              status: responseStatusCode,
-            })
-          );
-
-          pipe(body);
-        },
-        onShellError(error: unknown) {
-          reject(error);
-        },
-        onError(error: unknown) {
-          responseStatusCode = 500;
-          // Log streaming rendering errors from inside the shell.  Don't log
-          // errors encountered during initial shell rendering since they'll
-          // reject and get logged in handleDocumentRequest.
-          if (shellRendered) {
-            console.error(error);
-          }
-        },
-      }
-    );
-
-    setTimeout(abort, ABORT_DELAY);
-  });
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix/app/root.tsx b/packages/nyxb/test/fixtures/frameworks/remix/app/root.tsx
deleted file mode 100644
index 3d3d7332..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix/app/root.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "@remix-run/react";
-import "./tailwind.css";
-
-export function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        {children}
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
-  );
-}
-
-export default function App() {
-  return <Outlet />;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix/app/routes/_index.tsx b/packages/nyxb/test/fixtures/frameworks/remix/app/routes/_index.tsx
deleted file mode 100644
index b8a6a8c9..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix/app/routes/_index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { MetaFunction } from "@remix-run/node";
-
-export const meta: MetaFunction = () => {
-  return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
-  ];
-};
-
-export default function Index() {
-  return (
-    <div className="font-sans p-4">
-      <h1 className="text-3xl">Welcome to Remix</h1>
-      <ul className="list-disc mt-4 pl-6 space-y-2">
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/start/quickstart"
-            rel="noreferrer"
-          >
-            5m Quick Start
-          </a>
-        </li>
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/start/tutorial"
-            rel="noreferrer"
-          >
-            30m Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/docs"
-            rel="noreferrer"
-          >
-            Remix Docs
-          </a>
-        </li>
-      </ul>
-    </div>
-  );
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix/app/tailwind.css b/packages/nyxb/test/fixtures/frameworks/remix/app/tailwind.css
deleted file mode 100644
index b5c61c95..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix/app/tailwind.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/packages/nyxb/test/fixtures/frameworks/remix/package.json b/packages/nyxb/test/fixtures/frameworks/remix/package.json
deleted file mode 100644
index c25a5c41..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix/package.json
+++ /dev/null
@@ -1,43 +0,0 @@
-{
-  "name": "test-cli-remix",
-  "private": true,
-  "sideEffects": false,
-  "type": "module",
-  "scripts": {
-    "build": "remix vite:build",
-    "dev": "remix vite:dev",
-    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
-    "start": "remix-serve ./build/server/index.js",
-    "typecheck": "tsc"
-  },
-  "dependencies": {
-    "@remix-run/node": "^2.11.1",
-    "@remix-run/react": "^2.11.1",
-    "@remix-run/serve": "^2.11.1",
-    "isbot": "^4.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@remix-run/dev": "^2.11.1",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.38.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "postcss": "^8.4.24",
-    "tailwindcss": "^3.4.4",
-    "typescript": "^5.1.6",
-    "vite": "^5.1.0",
-    "vite-tsconfig-paths": "^4.2.1"
-  },
-  "engines": {
-    "node": ">=20.0.0"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix/postcss.config.js b/packages/nyxb/test/fixtures/frameworks/remix/postcss.config.js
deleted file mode 100644
index 2aa7205d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/packages/nyxb/test/fixtures/frameworks/remix/public/favicon.ico b/packages/nyxb/test/fixtures/frameworks/remix/public/favicon.ico
deleted file mode 100644
index 8830cf68..00000000
Binary files a/packages/nyxb/test/fixtures/frameworks/remix/public/favicon.ico and /dev/null differ
diff --git a/packages/nyxb/test/fixtures/frameworks/remix/tailwind.config.ts b/packages/nyxb/test/fixtures/frameworks/remix/tailwind.config.ts
deleted file mode 100644
index 34d03da5..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix/tailwind.config.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-} satisfies Config;
diff --git a/packages/nyxb/test/fixtures/frameworks/remix/tsconfig.json b/packages/nyxb/test/fixtures/frameworks/remix/tsconfig.json
deleted file mode 100644
index 2bb409ce..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix/tsconfig.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/.server/**/*.ts",
-    "**/.server/**/*.tsx",
-    "**/.client/**/*.ts",
-    "**/.client/**/*.tsx"
-  ],
-  "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "target": "ES2022",
-    "strict": true,
-    "allowJs": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./app/*"]
-    },
-
-    // Vite takes care of building everything, not tsc.
-    "noEmit": true
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/remix/vite.config.ts b/packages/nyxb/test/fixtures/frameworks/remix/vite.config.ts
deleted file mode 100644
index bda0d569..00000000
--- a/packages/nyxb/test/fixtures/frameworks/remix/vite.config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { defineConfig } from "vite"
-import tsconfigPaths from "vite-tsconfig-paths"
-
-export default defineConfig({
-  plugins: [tsconfigPaths()],
-})
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-app/next.config.js b/packages/nyxb/test/fixtures/frameworks/t3-app/next.config.js
deleted file mode 100644
index 9bfe4a0e..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-app/next.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
- * for Docker builds.
- */
-await import("./src/env.js");
-
-/** @type {import("next").NextConfig} */
-const config = {};
-
-export default config;
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-app/package.json b/packages/nyxb/test/fixtures/frameworks/t3-app/package.json
deleted file mode 100644
index 8be1042d..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-app/package.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "name": "test-cli-t3-app",
-  "version": "0.1.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "build": "next build",
-    "dev": "next dev",
-    "lint": "next lint",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@t3-oss/env-nextjs": "^0.10.1",
-    "geist": "^1.3.0",
-    "next": "^14.2.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "zod": "^3.23.3"
-  },
-  "devDependencies": {
-    "@types/eslint": "^8.56.10",
-    "@types/node": "^20.14.10",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.4",
-    "postcss": "^8.4.24",
-    "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.5.3"
-  },
-  "ct3aMetadata": {
-    "initVersion": "7.36.2"
-  },
-  "packageManager": "npm@9.8.0"
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-app/postcss.config.cjs b/packages/nyxb/test/fixtures/frameworks/t3-app/postcss.config.cjs
deleted file mode 100644
index 4cdb2f43..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-app/postcss.config.cjs
+++ /dev/null
@@ -1,7 +0,0 @@
-const config = {
-  plugins: {
-    tailwindcss: {},
-  },
-};
-
-module.exports = config;
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-app/prettier.config.js b/packages/nyxb/test/fixtures/frameworks/t3-app/prettier.config.js
deleted file mode 100644
index b2d59b46..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-app/prettier.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
-const config = {
-  plugins: ["prettier-plugin-tailwindcss"],
-};
-
-export default config;
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-app/src/app/layout.tsx b/packages/nyxb/test/fixtures/frameworks/t3-app/src/app/layout.tsx
deleted file mode 100644
index 42ed47ce..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-app/src/app/layout.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import "~/styles/globals.css";
-
-import { GeistSans } from "geist/font/sans";
-import { type Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Create T3 App",
-  description: "Generated by create-t3-app",
-  icons: [{ rel: "icon", url: "/favicon.ico" }],
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{ children: React.ReactNode }>) {
-  return (
-    <html lang="en" className={`${GeistSans.variable}`}>
-      <body>{children}</body>
-    </html>
-  );
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-app/src/app/page.tsx b/packages/nyxb/test/fixtures/frameworks/t3-app/src/app/page.tsx
deleted file mode 100644
index 773fef1b..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-app/src/app/page.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import Link from "next/link";
-
-export default function HomePage() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
-        <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
-          Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
-        </h1>
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
-          <Link
-            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
-            href="https://create.t3.gg/en/usage/first-steps"
-            target="_blank"
-          >
-            <h3 className="text-2xl font-bold">First Steps →</h3>
-            <div className="text-lg">
-              Just the basics - Everything you need to know to set up your
-              database and authentication.
-            </div>
-          </Link>
-          <Link
-            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
-            href="https://create.t3.gg/en/introduction"
-            target="_blank"
-          >
-            <h3 className="text-2xl font-bold">Documentation →</h3>
-            <div className="text-lg">
-              Learn more about Create T3 App, the libraries it uses, and how to
-              deploy it.
-            </div>
-          </Link>
-        </div>
-      </div>
-    </main>
-  );
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-app/src/env.js b/packages/nyxb/test/fixtures/frameworks/t3-app/src/env.js
deleted file mode 100644
index 5c2f937c..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-app/src/env.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { createEnv } from "@t3-oss/env-nextjs";
-import { z } from "zod";
-
-export const env = createEnv({
-  /**
-   * Specify your server-side environment variables schema here. This way you can ensure the app
-   * isn't built with invalid env vars.
-   */
-  server: {
-    NODE_ENV: z.enum(["development", "test", "production"]),
-  },
-
-  /**
-   * Specify your client-side environment variables schema here. This way you can ensure the app
-   * isn't built with invalid env vars. To expose them to the client, prefix them with
-   * `NEXT_PUBLIC_`.
-   */
-  client: {
-    // NEXT_PUBLIC_CLIENTVAR: z.string(),
-  },
-
-  /**
-   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
-   * middlewares) or client-side so we need to destruct manually.
-   */
-  runtimeEnv: {
-    NODE_ENV: process.env.NODE_ENV,
-    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
-  },
-  /**
-   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
-   * useful for Docker builds.
-   */
-  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
-  /**
-   * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
-   * `SOME_VAR=''` will throw an error.
-   */
-  emptyStringAsUndefined: true,
-});
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-app/src/styles/globals.css b/packages/nyxb/test/fixtures/frameworks/t3-app/src/styles/globals.css
deleted file mode 100644
index b5c61c95..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-app/src/styles/globals.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-app/tailwind.config.ts b/packages/nyxb/test/fixtures/frameworks/t3-app/tailwind.config.ts
deleted file mode 100644
index 5fd44e8f..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-app/tailwind.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { type Config } from "tailwindcss";
-import { fontFamily } from "tailwindcss/defaultTheme";
-
-export default {
-  content: ["./src/**/*.tsx"],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config;
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-app/tsconfig.json b/packages/nyxb/test/fixtures/frameworks/t3-app/tsconfig.json
deleted file mode 100644
index 905062de..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-app/tsconfig.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "compilerOptions": {
-    /* Base Options: */
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "target": "es2022",
-    "allowJs": true,
-    "resolveJsonModule": true,
-    "moduleDetection": "force",
-    "isolatedModules": true,
-
-    /* Strictness */
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "checkJs": true,
-
-    /* Bundled projects */
-    "lib": ["dom", "dom.iterable", "ES2022"],
-    "noEmit": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "jsx": "preserve",
-    "plugins": [{ "name": "next" }],
-    "incremental": true,
-
-    /* Path Aliases */
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./src/*"]
-    }
-  },
-  "include": [
-    ".eslintrc.cjs",
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.cjs",
-    "**/*.js",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-pages/.eslintrc.cjs b/packages/nyxb/test/fixtures/frameworks/t3-pages/.eslintrc.cjs
deleted file mode 100644
index 8b7a0e8f..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-pages/.eslintrc.cjs
+++ /dev/null
@@ -1,35 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require("path");
-
-/** @type {import("eslint").Linter.Config} */
-const config = {
-  overrides: [
-    {
-      extends: [
-        "plugin:@typescript-eslint/recommended-requiring-type-checking",
-      ],
-      files: ["*.ts", "*.tsx"],
-      parserOptions: {
-        project: path.join(__dirname, "tsconfig.json"),
-      },
-    },
-  ],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: path.join(__dirname, "tsconfig.json"),
-  },
-  plugins: ["@typescript-eslint"],
-  extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
-  rules: {
-    "@typescript-eslint/consistent-type-imports": [
-      "warn",
-      {
-        prefer: "type-imports",
-        fixStyle: "inline-type-imports",
-      },
-    ],
-    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
-  },
-};
-
-module.exports = config;
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-pages/.gitignore b/packages/nyxb/test/fixtures/frameworks/t3-pages/.gitignore
deleted file mode 100644
index 2971a0bd..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-pages/.gitignore
+++ /dev/null
@@ -1,42 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# database
-/prisma/db.sqlite
-/prisma/db.sqlite-journal
-
-# next.js
-/.next/
-/out/
-next-env.d.ts
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
-# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
-.env
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-pages/next.config.mjs b/packages/nyxb/test/fixtures/frameworks/t3-pages/next.config.mjs
deleted file mode 100644
index d921057f..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-pages/next.config.mjs
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
- * for Docker builds.
- */
-await import("./src/env.mjs");
-
-/** @type {import("next").NextConfig} */
-const config = {
-  reactStrictMode: true,
-
-  /**
-   * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config
-   * out.
-   *
-   * @see https://github.com/vercel/next.js/issues/41980
-   */
-  i18n: {
-    locales: ["en"],
-    defaultLocale: "en",
-  },
-};
-export default config;
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-pages/package.json b/packages/nyxb/test/fixtures/frameworks/t3-pages/package.json
deleted file mode 100644
index 5009f36f..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-pages/package.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "name": "test-cli-t3-pages",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "build": "next build",
-    "dev": "next dev",
-    "lint": "next lint",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@t3-oss/env-nextjs": "^0.3.1",
-    "next": "^13.4.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "zod": "^3.21.4"
-  },
-  "devDependencies": {
-    "@types/eslint": "^8.37.0",
-    "@types/node": "^18.16.0",
-    "@types/prettier": "^2.7.2",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.40.0",
-    "eslint-config-next": "^13.4.2",
-    "postcss": "^8.4.24",
-    "prettier": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.2.8",
-    "tailwindcss": "3.3.7",
-    "typescript": "^5.0.4"
-  },
-  "ct3aMetadata": {
-    "initVersion": "7.13.1"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-pages/src/env.mjs b/packages/nyxb/test/fixtures/frameworks/t3-pages/src/env.mjs
deleted file mode 100644
index c82c36d8..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-pages/src/env.mjs
+++ /dev/null
@@ -1,35 +0,0 @@
-import { createEnv } from "@t3-oss/env-nextjs";
-import { z } from "zod";
-
-export const env = createEnv({
-  /**
-   * Specify your server-side environment variables schema here. This way you can ensure the app
-   * isn't built with invalid env vars.
-   */
-  server: {
-    NODE_ENV: z.enum(["development", "test", "production"]),
-  },
-
-  /**
-   * Specify your client-side environment variables schema here. This way you can ensure the app
-   * isn't built with invalid env vars. To expose them to the client, prefix them with
-   * `NEXT_PUBLIC_`.
-   */
-  client: {
-    // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
-  },
-
-  /**
-   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
-   * middlewares) or client-side so we need to destruct manually.
-   */
-  runtimeEnv: {
-    NODE_ENV: process.env.NODE_ENV,
-    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
-  },
-  /**
-   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
-   * This is especially useful for Docker builds.
-   */
-  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
-});
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-pages/src/pages/_app.tsx b/packages/nyxb/test/fixtures/frameworks/t3-pages/src/pages/_app.tsx
deleted file mode 100644
index 5d4858ed..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-pages/src/pages/_app.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { type AppType } from "next/dist/shared/lib/utils";
-import "~/styles/globals.css";
-
-const MyApp: AppType = ({ Component, pageProps }) => {
-  return <Component {...pageProps} />;
-};
-
-export default MyApp;
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-pages/src/pages/index.tsx b/packages/nyxb/test/fixtures/frameworks/t3-pages/src/pages/index.tsx
deleted file mode 100644
index 5513c424..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-pages/src/pages/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { type NextPage } from "next";
-import Head from "next/head";
-import Link from "next/link";
-
-const Home: NextPage = () => {
-  return (
-    <>
-      <Head>
-        <title>Create T3 App</title>
-        <meta name="description" content="Generated by create-t3-app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
-        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
-          <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
-            Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
-          </h1>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
-            <Link
-              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
-              href="https://create.t3.gg/en/usage/first-steps"
-              target="_blank"
-            >
-              <h3 className="text-2xl font-bold">First Steps →</h3>
-              <div className="text-lg">
-                Just the basics - Everything you need to know to set up your
-                database and authentication.
-              </div>
-            </Link>
-            <Link
-              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
-              href="https://create.t3.gg/en/introduction"
-              target="_blank"
-            >
-              <h3 className="text-2xl font-bold">Documentation →</h3>
-              <div className="text-lg">
-                Learn more about Create T3 App, the libraries it uses, and how
-                to deploy it.
-              </div>
-            </Link>
-          </div>
-        </div>
-      </main>
-    </>
-  );
-};
-
-export default Home;
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-pages/src/styles/globals.css b/packages/nyxb/test/fixtures/frameworks/t3-pages/src/styles/globals.css
deleted file mode 100644
index b5c61c95..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-pages/src/styles/globals.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-pages/tailwind.config.ts b/packages/nyxb/test/fixtures/frameworks/t3-pages/tailwind.config.ts
deleted file mode 100644
index d4d3fa29..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-pages/tailwind.config.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { type Config } from "tailwindcss";
-
-export default {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-} satisfies Config;
diff --git a/packages/nyxb/test/fixtures/frameworks/t3-pages/tsconfig.json b/packages/nyxb/test/fixtures/frameworks/t3-pages/tsconfig.json
deleted file mode 100644
index 03ebb748..00000000
--- a/packages/nyxb/test/fixtures/frameworks/t3-pages/tsconfig.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "checkJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "noUncheckedIndexedAccess": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./src/*"]
-    }
-  },
-  "include": [
-    ".eslintrc.cjs",
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.cjs",
-    "**/*.mjs"
-  ],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/eslint.config.js b/packages/nyxb/test/fixtures/frameworks/vite/eslint.config.js
deleted file mode 100644
index c4bc8f33..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/eslint.config.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-
-export default tseslint.config({
-  extends: [js.configs.recommended, ...tseslint.configs.recommended],
-  files: ['**/*.{ts,tsx}'],
-  ignores: ['dist'],
-  languageOptions: {
-    ecmaVersion: 2020,
-    globals: globals.browser,
-  },
-  plugins: {
-    'react-hooks': reactHooks,
-    'react-refresh': reactRefresh,
-  },
-  rules: {
-    ...reactHooks.configs.recommended.rules,
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-})
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/index.html b/packages/nyxb/test/fixtures/frameworks/vite/index.html
deleted file mode 100644
index e4b78eae..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/package-lock.json b/packages/nyxb/test/fixtures/frameworks/vite/package-lock.json
deleted file mode 100644
index c8ffbc8c..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/package-lock.json
+++ /dev/null
@@ -1,4084 +0,0 @@
-{
-  "name": "vite-ts",
-  "version": "0.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "vite-ts",
-      "version": "0.0.0",
-      "dependencies": {
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1"
-      },
-      "devDependencies": {
-        "@eslint/js": "^9.8.0",
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
-        "@vitejs/plugin-react": "^4.3.1",
-        "autoprefixer": "^10.4.20",
-        "eslint": "^9.8.0",
-        "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-        "eslint-plugin-react-refresh": "^0.4.9",
-        "globals": "^15.9.0",
-        "postcss": "^8.4.24",
-        "tailwindcss": "^3.4.10",
-        "typescript": "^5.5.3",
-        "typescript-eslint": "^8.0.0",
-        "vite": "^5.4.0"
-      }
-    },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/code-frame": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
-      "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/highlight": "^7.24.7",
-        "picocolors": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/compat-data": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.2.tgz",
-      "integrity": "sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
-      "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
-      "dev": true,
-      "dependencies": {
-        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.25.0",
-        "@babel/helper-compilation-targets": "^7.25.2",
-        "@babel/helper-module-transforms": "^7.25.2",
-        "@babel/helpers": "^7.25.0",
-        "@babel/parser": "^7.25.0",
-        "@babel/template": "^7.25.0",
-        "@babel/traverse": "^7.25.2",
-        "@babel/types": "^7.25.2",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
-      }
-    },
-    "node_modules/@babel/generator": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.0.tgz",
-      "integrity": "sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.25.0",
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "jsesc": "^2.5.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
-      "integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/compat-data": "^7.25.2",
-        "@babel/helper-validator-option": "^7.24.8",
-        "browserslist": "^4.23.1",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
-      "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz",
-      "integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.24.7",
-        "@babel/helper-simple-access": "^7.24.7",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "@babel/traverse": "^7.25.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
-      "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-simple-access": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
-      "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
-      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
-      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
-      "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.0.tgz",
-      "integrity": "sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/template": "^7.25.0",
-        "@babel/types": "^7.25.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/highlight": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
-      "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.25.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
-      "integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.25.2"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.7.tgz",
-      "integrity": "sha512-fOPQYbGSgH0HUp4UJO4sMBFjY6DuWq+2i8rixyUMb3CdGixs/gccURvYOAhajBdKDoGajFr3mUq5rH3phtkGzw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.7.tgz",
-      "integrity": "sha512-J2z+MWzZHVOemyLweMqngXrgGC42jQ//R0KdxqkIz/OrbVIIlhFI3WigZ5fO+nwFvBlncr4MGapd8vTyc7RPNQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/template": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
-      "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.24.7",
-        "@babel/parser": "^7.25.0",
-        "@babel/types": "^7.25.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.25.3",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.3.tgz",
-      "integrity": "sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.25.0",
-        "@babel/parser": "^7.25.3",
-        "@babel/template": "^7.25.0",
-        "@babel/types": "^7.25.2",
-        "debug": "^4.3.1",
-        "globals": "^11.1.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse/node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/@babel/types": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
-      "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.24.8",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^3.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
-      }
-    },
-    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@eslint-community/regexpp": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
-      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
-      "dev": true,
-      "engines": {
-        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
-      }
-    },
-    "node_modules/@eslint/config-array": {
-      "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.17.1.tgz",
-      "integrity": "sha512-BlYOpej8AQ8Ev9xVqroV7a02JK3SkBAaN9GfMMH9W6Ch8FlQlkjGw4Ir7+FgYwfirivAf4t+GtzuAxqfukmISA==",
-      "dev": true,
-      "dependencies": {
-        "@eslint/object-schema": "^2.1.4",
-        "debug": "^4.3.1",
-        "minimatch": "^3.1.2"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
-    "node_modules/@eslint/eslintrc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz",
-      "integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==",
-      "dev": true,
-      "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^10.0.1",
-        "globals": "^14.0.0",
-        "ignore": "^5.2.0",
-        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
-        "strip-json-comments": "^3.1.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
-      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@eslint/js": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.9.0.tgz",
-      "integrity": "sha512-hhetes6ZHP3BlXLxmd8K2SNgkhNSi+UcecbnwWKwpP7kyi/uC75DJ1lOOBO3xrC4jyojtGE3YxKZPHfk4yrgug==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
-    "node_modules/@eslint/object-schema": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz",
-      "integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
-    "node_modules/@humanwhocodes/module-importer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.22"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
-      }
-    },
-    "node_modules/@humanwhocodes/retry": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.0.tgz",
-      "integrity": "sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==",
-      "dev": true,
-      "engines": {
-        "node": ">=18.18"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
-      }
-    },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.20.0.tgz",
-      "integrity": "sha512-TSpWzflCc4VGAUJZlPpgAJE1+V60MePDQnBd7PPkpuEmOy8i87aL6tinFGKBFKuEDikYpig72QzdT3QPYIi+oA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.20.0.tgz",
-      "integrity": "sha512-u00Ro/nok7oGzVuh/FMYfNoGqxU5CPWz1mxV85S2w9LxHR8OoMQBuSk+3BKVIDYgkpeOET5yXkx90OYFc+ytpQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.20.0.tgz",
-      "integrity": "sha512-uFVfvzvsdGtlSLuL0ZlvPJvl6ZmrH4CBwLGEFPe7hUmf7htGAN+aXo43R/V6LATyxlKVC/m6UsLb7jbG+LG39Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.20.0.tgz",
-      "integrity": "sha512-xbrMDdlev53vNXexEa6l0LffojxhqDTBeL+VUxuuIXys4x6xyvbKq5XqTXBCEUA8ty8iEJblHvFaWRJTk/icAQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.20.0.tgz",
-      "integrity": "sha512-jMYvxZwGmoHFBTbr12Xc6wOdc2xA5tF5F2q6t7Rcfab68TT0n+r7dgawD4qhPEvasDsVpQi+MgDzj2faOLsZjA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.20.0.tgz",
-      "integrity": "sha512-1asSTl4HKuIHIB1GcdFHNNZhxAYEdqML/MW4QmPS4G0ivbEcBr1JKlFLKsIRqjSwOBkdItn3/ZDlyvZ/N6KPlw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.20.0.tgz",
-      "integrity": "sha512-COBb8Bkx56KldOYJfMf6wKeYJrtJ9vEgBRAOkfw6Ens0tnmzPqvlpjZiLgkhg6cA3DGzCmLmmd319pmHvKWWlQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.20.0.tgz",
-      "integrity": "sha512-+it+mBSyMslVQa8wSPvBx53fYuZK/oLTu5RJoXogjk6x7Q7sz1GNRsXWjn6SwyJm8E/oMjNVwPhmNdIjwP135Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.20.0.tgz",
-      "integrity": "sha512-yAMvqhPfGKsAxHN8I4+jE0CpLWD8cv4z7CK7BMmhjDuz606Q2tFKkWRY8bHR9JQXYcoLfopo5TTqzxgPUjUMfw==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.20.0.tgz",
-      "integrity": "sha512-qmuxFpfmi/2SUkAw95TtNq/w/I7Gpjurx609OOOV7U4vhvUhBcftcmXwl3rqAek+ADBwSjIC4IVNLiszoj3dPA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.20.0.tgz",
-      "integrity": "sha512-I0BtGXddHSHjV1mqTNkgUZLnS3WtsqebAXv11D5BZE/gfw5KoyXSAXVqyJximQXNvNzUo4GKlCK/dIwXlz+jlg==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.20.0.tgz",
-      "integrity": "sha512-y+eoL2I3iphUg9tN9GB6ku1FA8kOfmF4oUEWhztDJ4KXJy1agk/9+pejOuZkNFhRwHAOxMsBPLbXPd6mJiCwew==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.20.0.tgz",
-      "integrity": "sha512-hM3nhW40kBNYUkZb/r9k2FKK+/MnKglX7UYd4ZUy5DJs8/sMsIbqWK2piZtVGE3kcXVNj3B2IrUYROJMMCikNg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.20.0.tgz",
-      "integrity": "sha512-psegMvP+Ik/Bg7QRJbv8w8PAytPA7Uo8fpFjXyCRHWm6Nt42L+JtoqH8eDQ5hRP7/XW2UiIriy1Z46jf0Oa1kA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.20.0.tgz",
-      "integrity": "sha512-GabekH3w4lgAJpVxkk7hUzUf2hICSQO0a/BLFA11/RMxQT92MabKAqyubzDZmMOC/hcJNlc+rrypzNzYl4Dx7A==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.20.0.tgz",
-      "integrity": "sha512-aJ1EJSuTdGnM6qbVC4B5DSmozPTqIag9fSzXRNNo+humQLG89XpPgdt16Ia56ORD7s+H8Pmyx44uczDQ0yDzpg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@types/babel__core": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
-      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
-      }
-    },
-    "node_modules/@types/babel__generator": {
-      "version": "7.6.8",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
-      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__template": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
-      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__traverse": {
-      "version": "7.20.6",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
-      "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.20.7"
-      }
-    },
-    "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
-    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.12",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
-    },
-    "node_modules/@types/react": {
-      "version": "18.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
-      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
-      "dev": true,
-      "dependencies": {
-        "@types/prop-types": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "18.3.0",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
-      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.1.0.tgz",
-      "integrity": "sha512-LlNBaHFCEBPHyD4pZXb35mzjGkuGKXU5eeCA1SxvHfiRES0E82dOounfVpL4DCqYvJEKab0bZIA0gCRpdLKkCw==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.1.0",
-        "@typescript-eslint/type-utils": "8.1.0",
-        "@typescript-eslint/utils": "8.1.0",
-        "@typescript-eslint/visitor-keys": "8.1.0",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.3.1",
-        "natural-compare": "^1.4.0",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
-        "eslint": "^8.57.0 || ^9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.1.0.tgz",
-      "integrity": "sha512-U7iTAtGgJk6DPX9wIWPPOlt1gO57097G06gIcl0N0EEnNw8RGD62c+2/DiP/zL7KrkqnnqF7gtFGR7YgzPllTA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "8.1.0",
-        "@typescript-eslint/types": "8.1.0",
-        "@typescript-eslint/typescript-estree": "8.1.0",
-        "@typescript-eslint/visitor-keys": "8.1.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.1.0.tgz",
-      "integrity": "sha512-DsuOZQji687sQUjm4N6c9xABJa7fjvfIdjqpSIIVOgaENf2jFXiM9hIBZOL3hb6DHK9Nvd2d7zZnoMLf9e0OtQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.1.0",
-        "@typescript-eslint/visitor-keys": "8.1.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.1.0.tgz",
-      "integrity": "sha512-oLYvTxljVvsMnldfl6jIKxTaU7ok7km0KDrwOt1RHYu6nxlhN3TIx8k5Q52L6wR33nOwDgM7VwW1fT1qMNfFIA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.1.0",
-        "@typescript-eslint/utils": "8.1.0",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/types": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.1.0.tgz",
-      "integrity": "sha512-q2/Bxa0gMOu/2/AKALI0tCKbG2zppccnRIRCW6BaaTlRVaPKft4oVYPp7WOPpcnsgbr0qROAVCVKCvIQ0tbWog==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.1.0.tgz",
-      "integrity": "sha512-NTHhmufocEkMiAord/g++gWKb0Fr34e9AExBRdqgWdVBaKoei2dIyYKD9Q0jBnvfbEA5zaf8plUFMUH6kQ0vGg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.1.0",
-        "@typescript-eslint/visitor-keys": "8.1.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.1.0.tgz",
-      "integrity": "sha512-ypRueFNKTIFwqPeJBfeIpxZ895PQhNyH4YID6js0UoBImWYoSjBsahUn9KMiJXh94uOjVBgHD9AmkyPsPnFwJA==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.1.0",
-        "@typescript-eslint/types": "8.1.0",
-        "@typescript-eslint/typescript-estree": "8.1.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.1.0.tgz",
-      "integrity": "sha512-ba0lNI19awqZ5ZNKh6wCModMwoZs457StTebQ0q1NP58zSi2F6MOZRXwfKZy+jB78JNJ/WH8GSh2IQNzXX8Nag==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.1.0",
-        "eslint-visitor-keys": "^3.4.3"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@vitejs/plugin-react": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz",
-      "integrity": "sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "^7.24.5",
-        "@babel/plugin-transform-react-jsx-self": "^7.24.5",
-        "@babel/plugin-transform-react-jsx-source": "^7.24.1",
-        "@types/babel__core": "^7.20.5",
-        "react-refresh": "^0.14.2"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0"
-      }
-    },
-    "node_modules/acorn": {
-      "version": "8.12.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-jsx": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
-      "peerDependencies": {
-        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
-    },
-    "node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
-    "node_modules/array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/autoprefixer": {
-      "version": "10.4.20",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
-      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "browserslist": "^4.23.3",
-        "caniuse-lite": "^1.0.30001646",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/browserslist": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
-      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "caniuse-lite": "^1.0.30001646",
-        "electron-to-chromium": "^1.5.4",
-        "node-releases": "^2.0.18",
-        "update-browserslist-db": "^1.1.0"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001651",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
-      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ]
-    },
-    "node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
-    },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
-    },
-    "node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
-    },
-    "node_modules/debug": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/deep-is": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-      "dev": true
-    },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
-    },
-    "node_modules/dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dev": true,
-      "dependencies": {
-        "path-type": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
-    },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
-    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.7",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.7.tgz",
-      "integrity": "sha512-6FTNWIWMxMy/ZY6799nBlPtF1DFDQ6VQJ7yyDP27SJNt5lwtQ5ufqVvHylb3fdQefvRcgA3fKcFMJi9OLwBRNw==",
-      "dev": true
-    },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
-    },
-    "node_modules/esbuild": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
-      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.21.5",
-        "@esbuild/android-arm": "0.21.5",
-        "@esbuild/android-arm64": "0.21.5",
-        "@esbuild/android-x64": "0.21.5",
-        "@esbuild/darwin-arm64": "0.21.5",
-        "@esbuild/darwin-x64": "0.21.5",
-        "@esbuild/freebsd-arm64": "0.21.5",
-        "@esbuild/freebsd-x64": "0.21.5",
-        "@esbuild/linux-arm": "0.21.5",
-        "@esbuild/linux-arm64": "0.21.5",
-        "@esbuild/linux-ia32": "0.21.5",
-        "@esbuild/linux-loong64": "0.21.5",
-        "@esbuild/linux-mips64el": "0.21.5",
-        "@esbuild/linux-ppc64": "0.21.5",
-        "@esbuild/linux-riscv64": "0.21.5",
-        "@esbuild/linux-s390x": "0.21.5",
-        "@esbuild/linux-x64": "0.21.5",
-        "@esbuild/netbsd-x64": "0.21.5",
-        "@esbuild/openbsd-x64": "0.21.5",
-        "@esbuild/sunos-x64": "0.21.5",
-        "@esbuild/win32-arm64": "0.21.5",
-        "@esbuild/win32-ia32": "0.21.5",
-        "@esbuild/win32-x64": "0.21.5"
-      }
-    },
-    "node_modules/escalade": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
-      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/eslint": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.9.0.tgz",
-      "integrity": "sha512-JfiKJrbx0506OEerjK2Y1QlldtBxkAlLxT5OEcRF8uaQ86noDe2k31Vw9rnSWv+MXZHj7OOUV/dA0AhdLFcyvA==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.11.0",
-        "@eslint/config-array": "^0.17.1",
-        "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "9.9.0",
-        "@humanwhocodes/module-importer": "^1.0.1",
-        "@humanwhocodes/retry": "^0.3.0",
-        "@nodelib/fs.walk": "^1.2.8",
-        "ajv": "^6.12.4",
-        "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
-        "debug": "^4.3.2",
-        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.0.2",
-        "eslint-visitor-keys": "^4.0.0",
-        "espree": "^10.1.0",
-        "esquery": "^1.5.0",
-        "esutils": "^2.0.2",
-        "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^8.0.0",
-        "find-up": "^5.0.0",
-        "glob-parent": "^6.0.2",
-        "ignore": "^5.2.0",
-        "imurmurhash": "^0.1.4",
-        "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
-        "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
-      },
-      "bin": {
-        "eslint": "bin/eslint.js"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://eslint.org/donate"
-      },
-      "peerDependencies": {
-        "jiti": "*"
-      },
-      "peerDependenciesMeta": {
-        "jiti": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/eslint-plugin-react-hooks": {
-      "version": "5.1.0-rc-fb9a90fa48-20240614",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0-rc-fb9a90fa48-20240614.tgz",
-      "integrity": "sha512-xsiRwaDNF5wWNC4ZHLut+x/YcAxksUd9Rizt7LaEn3bV8VyYRpXnRJQlLOfYaVy9esk4DFP4zPPnoNVjq5Gc0w==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
-      }
-    },
-    "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.9",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.9.tgz",
-      "integrity": "sha512-QK49YrBAo5CLNLseZ7sZgvgTy21E6NEw22eZqc4teZfH8pxV3yXc9XXOYfUI6JNpw7mfHNkAeWtBxrTyykB6HA==",
-      "dev": true,
-      "peerDependencies": {
-        "eslint": ">=7"
-      }
-    },
-    "node_modules/eslint-scope": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.0.2.tgz",
-      "integrity": "sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint-visitor-keys": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz",
-      "integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/eslint/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/eslint/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/eslint/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/eslint/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/eslint/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/espree": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.1.0.tgz",
-      "integrity": "sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^8.12.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.0.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/esquery": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
-      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
-      "dev": true,
-      "dependencies": {
-        "estraverse": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/esrecurse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
-      "dependencies": {
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/estraverse": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/esutils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/fast-deep-equal": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
-    },
-    "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
-    },
-    "node_modules/fast-levenshtein": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-      "dev": true
-    },
-    "node_modules/fastq": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/file-entry-cache": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
-      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
-      "dev": true,
-      "dependencies": {
-        "flat-cache": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=16.0.0"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/find-up": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/flat-cache": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
-      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
-      "dev": true,
-      "dependencies": {
-        "flatted": "^3.2.9",
-        "keyv": "^4.5.4"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/flatted": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
-      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-      "dev": true
-    },
-    "node_modules/foreground-child": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
-      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/glob/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/glob/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/globals": {
-      "version": "15.9.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.9.0.tgz",
-      "integrity": "sha512-SmSKyLLKFbSr6rptvP8izbyxJL4ILwqO9Jg23UA0sDlGlu58V59D1//I3vlc0KJphVdUR7vMjHIplYnzBxorQA==",
-      "dev": true,
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/globby": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-      "dev": true,
-      "dependencies": {
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.9",
-        "ignore": "^5.2.0",
-        "merge2": "^1.4.1",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/graphemer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true
-    },
-    "node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/ignore": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/import-fresh": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
-      "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.19"
-      }
-    },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-core-module": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz",
-      "integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==",
-      "dev": true,
-      "dependencies": {
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
-    },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "node_modules/jiti": {
-      "version": "1.21.6",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
-      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
-      "dev": true,
-      "bin": {
-        "jiti": "bin/jiti.js"
-      }
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/json-buffer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "dev": true
-    },
-    "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "node_modules/json-stable-stringify-without-jsonify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-      "dev": true
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/keyv": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
-      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-      "dev": true,
-      "dependencies": {
-        "json-buffer": "3.0.1"
-      }
-    },
-    "node_modules/levn": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-      "dev": true,
-      "dependencies": {
-        "prelude-ls": "^1.2.1",
-        "type-check": "~0.4.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
-    },
-    "node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
-    },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
-    "node_modules/lru-cache": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
-      "dev": true,
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
-    },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-      "dev": true
-    },
-    "node_modules/node-releases": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
-      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
-      "dev": true
-    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/optionator": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
-      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
-      "dev": true,
-      "dependencies": {
-        "deep-is": "^0.1.3",
-        "fast-levenshtein": "^2.0.6",
-        "levn": "^0.4.1",
-        "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.5"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
-      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
-      "dev": true
-    },
-    "node_modules/parent-module": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
-      "dependencies": {
-        "callsites": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
-    },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true
-    },
-    "node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
-      "dev": true
-    },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/postcss": {
-      "version": "8.4.41",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
-      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-load-config/node_modules/lilconfig": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
-      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
-    },
-    "node_modules/prelude-ls": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
-      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
-      },
-      "peerDependencies": {
-        "react": "^18.3.1"
-      }
-    },
-    "node_modules/react-refresh": {
-      "version": "0.14.2",
-      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
-      "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/resolve": {
-      "version": "1.22.8",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
-      "dependencies": {
-        "is-core-module": "^2.13.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/resolve-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/rollup": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.20.0.tgz",
-      "integrity": "sha512-6rbWBChcnSGzIlXeIdNIZTopKYad8ZG8ajhl78lGRLsI2rX8IkaotQhVas2Ma+GPxJav19wrSzvRvuiv0YKzWw==",
-      "dev": true,
-      "dependencies": {
-        "@types/estree": "1.0.5"
-      },
-      "bin": {
-        "rollup": "dist/bin/rollup"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=8.0.0"
-      },
-      "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.20.0",
-        "@rollup/rollup-android-arm64": "4.20.0",
-        "@rollup/rollup-darwin-arm64": "4.20.0",
-        "@rollup/rollup-darwin-x64": "4.20.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.20.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.20.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.20.0",
-        "@rollup/rollup-linux-arm64-musl": "4.20.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.20.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.20.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.20.0",
-        "@rollup/rollup-linux-x64-gnu": "4.20.0",
-        "@rollup/rollup-linux-x64-musl": "4.20.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.20.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.20.0",
-        "@rollup/rollup-win32-x64-msvc": "4.20.0",
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
-    "node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
-    "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-json-comments": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/tailwindcss": {
-      "version": "3.4.10",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
-      "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==",
-      "dev": true,
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.0",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true
-    },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/ts-api-utils": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
-      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=16"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.2.0"
-      }
-    },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
-    },
-    "node_modules/type-check": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
-      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
-      "dev": true,
-      "dependencies": {
-        "prelude-ls": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
-      "dev": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
-    "node_modules/typescript-eslint": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.1.0.tgz",
-      "integrity": "sha512-prB2U3jXPJLpo1iVLN338Lvolh6OrcCZO+9Yv6AR+tvegPPptYCDBIHiEEUdqRi8gAv2bXNKfMUrgAd2ejn/ow==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.1.0",
-        "@typescript-eslint/parser": "8.1.0",
-        "@typescript-eslint/utils": "8.1.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/update-browserslist-db": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
-      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "escalade": "^3.1.2",
-        "picocolors": "^1.0.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
-    "node_modules/uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
-    },
-    "node_modules/vite": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.0.tgz",
-      "integrity": "sha512-5xokfMX0PIiwCMCMb9ZJcMyh5wbBun0zUzKib+L65vAZ8GY9ePZMXxFrHbr/Kyll2+LSCY7xtERPpxkBDKngwg==",
-      "dev": true,
-      "dependencies": {
-        "esbuild": "^0.21.3",
-        "postcss": "^8.4.40",
-        "rollup": "^4.13.0"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
-      },
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^18.0.0 || >=20.0.0",
-        "less": "*",
-        "lightningcss": "^1.21.0",
-        "sass": "*",
-        "sass-embedded": "*",
-        "stylus": "*",
-        "sugarss": "*",
-        "terser": "^5.4.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/word-wrap": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
-      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
-    },
-    "node_modules/yaml": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
-      "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==",
-      "dev": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/yocto-queue": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    }
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/package.json b/packages/nyxb/test/fixtures/frameworks/vite/package.json
deleted file mode 100644
index 07bd4df2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "test-cli-vite",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.8.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.8.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "globals": "^15.9.0",
-    "postcss": "^8.4.41",
-    "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.0.0",
-    "vite": "^5.4.0"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/postcss.config.js b/packages/nyxb/test/fixtures/frameworks/vite/postcss.config.js
deleted file mode 100644
index 2e7af2b7..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/public/vite.svg b/packages/nyxb/test/fixtures/frameworks/vite/public/vite.svg
deleted file mode 100644
index e7b8dfb1..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/src/App.css b/packages/nyxb/test/fixtures/frameworks/vite/src/App.css
deleted file mode 100644
index b9d355df..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/src/App.tsx b/packages/nyxb/test/fixtures/frameworks/vite/src/App.tsx
deleted file mode 100644
index afe48ac7..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/src/App.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
-}
-
-export default App
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/src/assets/react.svg b/packages/nyxb/test/fixtures/frameworks/vite/src/assets/react.svg
deleted file mode 100644
index 6c87de9b..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/src/index.css b/packages/nyxb/test/fixtures/frameworks/vite/src/index.css
deleted file mode 100644
index b5c61c95..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/src/index.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/src/main.tsx b/packages/nyxb/test/fixtures/frameworks/vite/src/main.tsx
deleted file mode 100644
index 6f4ac9bc..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/src/main.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/src/vite-env.d.ts b/packages/nyxb/test/fixtures/frameworks/vite/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/tailwind.config.js b/packages/nyxb/test/fixtures/frameworks/vite/tailwind.config.js
deleted file mode 100644
index 38302b34..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/tailwind.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/tsconfig.app.json b/packages/nyxb/test/fixtures/frameworks/vite/tsconfig.app.json
deleted file mode 100644
index f0a23505..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/tsconfig.app.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/tsconfig.json b/packages/nyxb/test/fixtures/frameworks/vite/tsconfig.json
deleted file mode 100644
index 1ffef600..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/tsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/tsconfig.node.json b/packages/nyxb/test/fixtures/frameworks/vite/tsconfig.node.json
deleted file mode 100644
index 0d3d7144..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/tsconfig.node.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["vite.config.ts"]
-}
diff --git a/packages/nyxb/test/fixtures/frameworks/vite/vite.config.ts b/packages/nyxb/test/fixtures/frameworks/vite/vite.config.ts
deleted file mode 100644
index a077ec0e..00000000
--- a/packages/nyxb/test/fixtures/frameworks/vite/vite.config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { defineConfig } from "vite"
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [],
-})
diff --git a/packages/nyxb/test/fixtures/next-app-js/app/favicon.ico b/packages/nyxb/test/fixtures/next-app-js/app/favicon.ico
deleted file mode 100644
index 718d6fea..00000000
Binary files a/packages/nyxb/test/fixtures/next-app-js/app/favicon.ico and /dev/null differ
diff --git a/packages/nyxb/test/fixtures/next-app-js/app/globals.css b/packages/nyxb/test/fixtures/next-app-js/app/globals.css
deleted file mode 100644
index fd81e885..00000000
--- a/packages/nyxb/test/fixtures/next-app-js/app/globals.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
diff --git a/packages/nyxb/test/fixtures/next-app-js/app/layout.js b/packages/nyxb/test/fixtures/next-app-js/app/layout.js
deleted file mode 100644
index 821f7122..00000000
--- a/packages/nyxb/test/fixtures/next-app-js/app/layout.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Inter } from 'next/font/google'
-import './globals.css'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
-}
diff --git a/packages/nyxb/test/fixtures/next-app-js/app/page.js b/packages/nyxb/test/fixtures/next-app-js/app/page.js
deleted file mode 100644
index 9c88d595..00000000
--- a/packages/nyxb/test/fixtures/next-app-js/app/page.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import Image from 'next/image'
-
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.js</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
-}
diff --git a/packages/nyxb/test/fixtures/next-app-js/jsconfig.json b/packages/nyxb/test/fixtures/next-app-js/jsconfig.json
deleted file mode 100644
index 555103d5..00000000
--- a/packages/nyxb/test/fixtures/next-app-js/jsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "paths": {
-      "~/*": ["./*"]
-    }
-  }
-}
diff --git a/packages/nyxb/test/fixtures/next-app-js/next.config.js b/packages/nyxb/test/fixtures/next-app-js/next.config.js
deleted file mode 100644
index 767719fc..00000000
--- a/packages/nyxb/test/fixtures/next-app-js/next.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig
diff --git a/packages/nyxb/test/fixtures/next-app-js/package.json b/packages/nyxb/test/fixtures/next-app-js/package.json
deleted file mode 100644
index 6000b7e5..00000000
--- a/packages/nyxb/test/fixtures/next-app-js/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "app-js",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.4"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.0.1",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.4"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/next-app-js/postcss.config.js b/packages/nyxb/test/fixtures/next-app-js/postcss.config.js
deleted file mode 100644
index 33ad091d..00000000
--- a/packages/nyxb/test/fixtures/next-app-js/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/packages/nyxb/test/fixtures/next-app-js/tailwind.config.js b/packages/nyxb/test/fixtures/next-app-js/tailwind.config.js
deleted file mode 100644
index 8c4d1b21..00000000
--- a/packages/nyxb/test/fixtures/next-app-js/tailwind.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
-    },
-  },
-  plugins: [],
-}
diff --git a/packages/nyxb/test/fixtures/next-src/.gitignore b/packages/nyxb/test/fixtures/next-src/.gitignore
deleted file mode 100644
index 8f322f0d..00000000
--- a/packages/nyxb/test/fixtures/next-src/.gitignore
+++ /dev/null
@@ -1,35 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/packages/nyxb/test/fixtures/next-src/next.config.js b/packages/nyxb/test/fixtures/next-src/next.config.js
deleted file mode 100644
index 767719fc..00000000
--- a/packages/nyxb/test/fixtures/next-src/next.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig
diff --git a/packages/nyxb/test/fixtures/next-src/package.json b/packages/nyxb/test/fixtures/next-src/package.json
deleted file mode 100644
index 38e67b55..00000000
--- a/packages/nyxb/test/fixtures/next-src/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "text-cli-next-src",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/next-src/src/app/globals.css b/packages/nyxb/test/fixtures/next-src/src/app/globals.css
deleted file mode 100644
index fd81e885..00000000
--- a/packages/nyxb/test/fixtures/next-src/src/app/globals.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
diff --git a/packages/nyxb/test/fixtures/next-src/tailwind.config.js b/packages/nyxb/test/fixtures/next-src/tailwind.config.js
deleted file mode 100644
index d53b2eaa..00000000
--- a/packages/nyxb/test/fixtures/next-src/tailwind.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
-    },
-  },
-  plugins: [],
-}
diff --git a/packages/nyxb/test/fixtures/next-src/tsconfig.json b/packages/nyxb/test/fixtures/next-src/tsconfig.json
deleted file mode 100644
index 71bde939..00000000
--- a/packages/nyxb/test/fixtures/next-src/tsconfig.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "~/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/nyxb/test/fixtures/next/.gitignore b/packages/nyxb/test/fixtures/next/.gitignore
deleted file mode 100644
index 8f322f0d..00000000
--- a/packages/nyxb/test/fixtures/next/.gitignore
+++ /dev/null
@@ -1,35 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/packages/nyxb/test/fixtures/next/app/globals.css b/packages/nyxb/test/fixtures/next/app/globals.css
deleted file mode 100644
index fd81e885..00000000
--- a/packages/nyxb/test/fixtures/next/app/globals.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
diff --git a/packages/nyxb/test/fixtures/next/next.config.js b/packages/nyxb/test/fixtures/next/next.config.js
deleted file mode 100644
index 767719fc..00000000
--- a/packages/nyxb/test/fixtures/next/next.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig
diff --git a/packages/nyxb/test/fixtures/next/package.json b/packages/nyxb/test/fixtures/next/package.json
deleted file mode 100644
index 16f8a2dd..00000000
--- a/packages/nyxb/test/fixtures/next/package.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "name": "test-cli-next",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@types/node": "20.2.5",
-    "@types/react": "18.2.7",
-    "@types/react-dom": "18.2.4",
-    "autoprefixer": "10.4.14",
-    "eslint": "8.41.0",
-    "eslint-config-next": "13.4.4",
-    "next": "13.4.4",
-    "postcss": "8.4.23",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "tailwindcss": "3.3.2",
-    "typescript": "5.0.4"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/next/pnpm-lock.yaml b/packages/nyxb/test/fixtures/next/pnpm-lock.yaml
deleted file mode 100644
index 7becc665..00000000
--- a/packages/nyxb/test/fixtures/next/pnpm-lock.yaml
+++ /dev/null
@@ -1 +0,0 @@
-lockfileVersion: "6.0"
diff --git a/packages/nyxb/test/fixtures/next/tailwind.config.js b/packages/nyxb/test/fixtures/next/tailwind.config.js
deleted file mode 100644
index 6e84f58f..00000000
--- a/packages/nyxb/test/fixtures/next/tailwind.config.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ["class"],
-  content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-}
diff --git a/packages/nyxb/test/fixtures/next/tsconfig.json b/packages/nyxb/test/fixtures/next/tsconfig.json
deleted file mode 100644
index 2ba7bf88..00000000
--- a/packages/nyxb/test/fixtures/next/tsconfig.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "~/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/nyxb/test/fixtures/project-bun/bun.lockb b/packages/nyxb/test/fixtures/project-bun/bun.lockb
deleted file mode 100644
index fea2ca25..00000000
Binary files a/packages/nyxb/test/fixtures/project-bun/bun.lockb and /dev/null differ
diff --git a/packages/nyxb/test/fixtures/project-bun/package.json b/packages/nyxb/test/fixtures/project-bun/package.json
deleted file mode 100644
index 92e9a82b..00000000
--- a/packages/nyxb/test/fixtures/project-bun/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-project-bun",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "nyxb",
-  "license": "MIT"
-}
diff --git a/packages/nyxb/test/fixtures/project-npm/package-lock.json b/packages/nyxb/test/fixtures/project-npm/package-lock.json
deleted file mode 100644
index 9b6d3cd8..00000000
--- a/packages/nyxb/test/fixtures/project-npm/package-lock.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "name": "test-cli-npm-project",
-  "version": "1.0.0",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "npm-project",
-      "version": "1.0.0",
-      "license": "MIT"
-    }
-  }
-}
diff --git a/packages/nyxb/test/fixtures/project-npm/package.json b/packages/nyxb/test/fixtures/project-npm/package.json
deleted file mode 100644
index d7c28b06..00000000
--- a/packages/nyxb/test/fixtures/project-npm/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-project-npm",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "nyxb",
-  "license": "MIT"
-}
diff --git a/packages/nyxb/test/fixtures/project-pnpm/package.json b/packages/nyxb/test/fixtures/project-pnpm/package.json
deleted file mode 100644
index 1ea0a0a1..00000000
--- a/packages/nyxb/test/fixtures/project-pnpm/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-project-pnpm",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "nyxb",
-  "license": "MIT"
-}
diff --git a/packages/nyxb/test/fixtures/project-pnpm/pnpm-lock.yaml b/packages/nyxb/test/fixtures/project-pnpm/pnpm-lock.yaml
deleted file mode 100644
index 7a06cc79..00000000
--- a/packages/nyxb/test/fixtures/project-pnpm/pnpm-lock.yaml
+++ /dev/null
@@ -1 +0,0 @@
-lockfileVersion: '6.0'
diff --git a/packages/nyxb/test/fixtures/project-src/nyxbui.json b/packages/nyxb/test/fixtures/project-src/nyxbui.json
deleted file mode 100644
index 321c9cd0..00000000
--- a/packages/nyxb/test/fixtures/project-src/nyxbui.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "components": "src/components",
-  "ui": "src/ui",
-  "styles": "src/styles/main.css",
-  "utils": "src/lib/ny.ts",
-  "tailwindConfig": "tailwind.config.ts"
-}
diff --git a/packages/nyxb/test/fixtures/project-src/package-lock.json b/packages/nyxb/test/fixtures/project-src/package-lock.json
deleted file mode 100644
index 98ef11bd..00000000
--- a/packages/nyxb/test/fixtures/project-src/package-lock.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "name": "test-cli-project-src",
-  "version": "1.0.0",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "npm-project",
-      "version": "1.0.0",
-      "license": "MIT"
-    }
-  }
-}
diff --git a/packages/nyxb/test/fixtures/project-src/package.json b/packages/nyxb/test/fixtures/project-src/package.json
deleted file mode 100644
index a536a6f0..00000000
--- a/packages/nyxb/test/fixtures/project-src/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "project-src",
-  "version": "0.1.0",
-  "private": true
-}
diff --git a/packages/nyxb/test/fixtures/project-yarn/package.json b/packages/nyxb/test/fixtures/project-yarn/package.json
deleted file mode 100644
index a8956875..00000000
--- a/packages/nyxb/test/fixtures/project-yarn/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-project-yarn",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "nyxb",
-  "license": "MIT"
-}
diff --git a/packages/nyxb/test/fixtures/project-yarn/yarn.lock b/packages/nyxb/test/fixtures/project-yarn/yarn.lock
deleted file mode 100644
index fb57ccd1..00000000
--- a/packages/nyxb/test/fixtures/project-yarn/yarn.lock
+++ /dev/null
@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
diff --git a/packages/nyxb/test/fixtures/project/nyxbui.json b/packages/nyxb/test/fixtures/project/nyxbui.json
deleted file mode 100644
index 2469b0d6..00000000
--- a/packages/nyxb/test/fixtures/project/nyxbui.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "tailwindConfig": "./tailwind.config.ts",
-  "importPaths": {
-    "styles": "~/styles/globals.css",
-    "utils:ny": "~/lib/ny.ts",
-    "components:ui": "~/components/ui"
-  }
-}
diff --git a/packages/nyxb/test/fixtures/project/package.json b/packages/nyxb/test/fixtures/project/package.json
deleted file mode 100644
index 30a6a922..00000000
--- a/packages/nyxb/test/fixtures/project/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "test-cli-project",
-  "version": "0.1.0",
-  "private": true
-}
diff --git a/packages/nyxb/test/fixtures/project/pnpm-lock.yaml b/packages/nyxb/test/fixtures/project/pnpm-lock.yaml
deleted file mode 100644
index 7becc665..00000000
--- a/packages/nyxb/test/fixtures/project/pnpm-lock.yaml
+++ /dev/null
@@ -1 +0,0 @@
-lockfileVersion: "6.0"
diff --git a/packages/nyxb/test/fixtures/with-base-url/tsconfig.json b/packages/nyxb/test/fixtures/with-base-url/tsconfig.json
deleted file mode 100644
index 16b323bc..00000000
--- a/packages/nyxb/test/fixtures/with-base-url/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./*"]
-    }
-  }
-}
diff --git a/packages/nyxb/test/fixtures/without-base-url/tsconfig.json b/packages/nyxb/test/fixtures/without-base-url/tsconfig.json
deleted file mode 100644
index b43c5102..00000000
--- a/packages/nyxb/test/fixtures/without-base-url/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "compilerOptions": {
-    "paths": {
-      "~/components/*": ["./components/*"],
-      "~/lib/*": ["./lib/*"]
-    }
-  }
-}
diff --git a/packages/nyxb/test/utils/__snapshots__/transform-css-vars.test.ts.snap b/packages/nyxb/test/utils/__snapshots__/transform-css-vars.test.ts.snap
deleted file mode 100644
index dba1cf74..00000000
--- a/packages/nyxb/test/utils/__snapshots__/transform-css-vars.test.ts.snap
+++ /dev/null
@@ -1,33 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transform css vars 1`] = `
-"import * as React from "react"
-export function Foo() {
-	return <div className="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-}"
-    "
-`;
-
-exports[`transform css vars 2`] = `
-"import * as React from "react"
-export function Foo() {
-	return <div className="bg-white hover:bg-stone-100 text-stone-50 sm:focus:text-stone-900 dark:bg-stone-950 dark:hover:bg-stone-800 dark:text-stone-900 dark:sm:focus:text-stone-50">foo</div>
-}""
-    "
-`;
-
-exports[`transform css vars 3`] = `
-"import * as React from "react"
-export function Foo() {
-	return <div className={ny("bg-white hover:bg-stone-100 dark:bg-stone-950 dark:hover:bg-stone-800", true && "text-stone-50 sm:focus:text-stone-900 dark:text-stone-900 dark:sm:focus:text-stone-50")}>foo</div>
-}""
-    "
-`;
-
-exports[`transform css vars 4`] = `
-"import * as React from "react"
-export function Foo() {
-	return <div className={ny("bg-white border border-stone-200 dark:bg-stone-950 dark:border-stone-800")}>foo</div>
-}""
-    "
-`;
diff --git a/packages/nyxb/test/utils/__snapshots__/transform-import.test.ts.snap b/packages/nyxb/test/utils/__snapshots__/transform-import.test.ts.snap
deleted file mode 100644
index f069f968..00000000
--- a/packages/nyxb/test/utils/__snapshots__/transform-import.test.ts.snap
+++ /dev/null
@@ -1,71 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transform import 1`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/components/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/components/box"
-
-    import { ny } from "~/lib/utils"
-    "
-`;
-
-exports[`transform import 2`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/src/components/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/src/components/box"
-
-    import { ny, foo, bar } from "~/lib/utils"
-    import { bar } from "~/lib/utils/bar"
-    "
-`;
-
-exports[`transform import 3`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/src/components/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/src/components/box"
-
-    import { ny } from "~/lib/utils"
-    import { bar } from "~/lib/utils/bar"
-    "
-`;
-
-exports[`transform import 4`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/src/components/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/src/components/box"
-
-    import { ny } from "~/lib/utils"
-    import { bar } from "~/lib/utils/bar"
-    "
-`;
-
-exports[`transform import 5`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/src/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/src/components/box"
-
-    import { ny } from "~/lib/utils"
-    import { bar } from "~/lib/utils/bar"
-    "
-`;
-
-exports[`transform import 6`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "@custom-alias/components/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "@custom-alias/components/box"
-
-    import { ny } from "@custom-alias/lib/utils"
-    "
-`;
diff --git a/packages/nyxb/test/utils/__snapshots__/transform-rsc.test.ts.snap b/packages/nyxb/test/utils/__snapshots__/transform-rsc.test.ts.snap
deleted file mode 100644
index 9f378a73..00000000
--- a/packages/nyxb/test/utils/__snapshots__/transform-rsc.test.ts.snap
+++ /dev/null
@@ -1,55 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transform rsc 1`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    "
-`;
-
-exports[`transform rsc 2`] = `
-""use client"
-
-      import * as React from "react"
-import { Foo } from "bar"
-    "
-`;
-
-exports[`transform rsc 3`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    "
-`;
-
-exports[`transform rsc 4`] = `
-""use foo"
-
-      import * as React from "react"
-import { Foo } from "bar"
-
-"use client"
-    "
-`;
-
-exports[`transform rsc 5`] = `
-"'use client'
-
-      import * as React from 'react'
-import { Foo } from 'bar'
-    "
-`;
-
-exports[`transform rsc 6`] = `
-"import * as React from 'react'
-import { Foo } from 'bar'
-    "
-`;
-
-exports[`transform rsc 7`] = `
-"'use foo'
-
-      import * as React from 'react'
-import { Foo } from 'bar'
-
-'use client'
-    "
-`;
diff --git a/packages/nyxb/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap b/packages/nyxb/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap
deleted file mode 100644
index 7708f63a..00000000
--- a/packages/nyxb/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap
+++ /dev/null
@@ -1,114 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transform tailwind prefix 1`] = `
-"import * as React from "react"
-            export function Foo() {
-                return <div className="tw-bg-background hover:tw-bg-muted tw-text-primary-foreground sm:focus:tw-text-accent-foreground">foo</div>
-            }
-        "
-`;
-
-exports[`transform tailwind prefix 2`] = `
-"import * as React from "react"
-export function Foo() {
-	return <div className="tw-bg-white hover:tw-bg-stone-100 tw-text-stone-50 sm:focus:tw-text-stone-900 dark:tw-bg-stone-950 dark:hover:tw-bg-stone-800 dark:tw-text-stone-900 dark:sm:focus:tw-text-stone-50">foo</div>
-}
-    "
-`;
-
-exports[`transform tailwind prefix 3`] = `
-"import * as React from "react"
-export function Foo() {
-	return <div className={ny("tw-bg-white hover:tw-bg-stone-100 dark:tw-bg-stone-950 dark:hover:tw-bg-stone-800", true && "tw-text-stone-50 sm:focus:tw-text-stone-900 dark:tw-text-stone-900 dark:sm:focus:tw-text-stone-50")}>foo</div>
-}
-    "
-`;
-
-exports[`transform tailwind prefix 4`] = `
-"import * as React from "react"
-export function Foo() {
-	return <div className={ny("tw-bg-background hover:tw-bg-muted", true && "tw-text-primary-foreground sm:focus:tw-text-accent-foreground")}>foo</div>
-}
-    "
-`;
-
-exports[`transform tailwind prefix 5`] = `
-"@tailwind base;
-@tailwind components;
-@tailwind utilities;
- 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
- 
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
- 
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
- 
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 210 20% 98%;
- 
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
- 
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
- 
-    --ring: 217.9 10.6% 64.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
- 
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
- 
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
- 
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
- 
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
- 
-    --primary: 210 20% 98%;
-    --primary-foreground: 220.9 39.3% 11%;
- 
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
- 
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
- 
-    --ring: 215 27.9% 16.9%;
-  }
-}
- 
-@layer base {
-  * {
-    @apply tw-border-border;
-  }
-  body {
-    @apply tw-bg-background tw-text-foreground;
-  }
-}"
-`;
diff --git a/packages/nyxb/test/utils/apply-color-mapping.test.ts b/packages/nyxb/test/utils/apply-color-mapping.test.ts
deleted file mode 100644
index 8da6765c..00000000
--- a/packages/nyxb/test/utils/apply-color-mapping.test.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { describe, expect, test } from "vitest"
-
-import {
-  applyColorMapping,
-  splitClassName,
-} from "../../src/utils/transformers/transform-css-vars"
-import baseColor from "../fixtures/colors/slate.json"
-
-describe("split className", () => {
-  test.each([
-    {
-      input: "bg-popover",
-      output: [null, "bg-popover", null],
-    },
-    {
-      input: "bg-popover/50",
-      output: [null, "bg-popover", "50"],
-    },
-    {
-      input: "hover:bg-popover/50",
-      output: ["hover", "bg-popover", "50"],
-    },
-    {
-      input: "hover:bg-popover",
-      output: ["hover", "bg-popover", null],
-    },
-    {
-      input: "[&_[cmdk-group-heading]]:px-2",
-      output: ["[&_[cmdk-group-heading]]", "px-2", null],
-    },
-    {
-      input: "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
-      output: ["[&_[cmdk-group]:not([hidden])_~[cmdk-group]]", "pt-0", null],
-    },
-    {
-      input: "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:bg-red-200",
-      output: [
-        "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]",
-        "bg-red-200",
-        null,
-      ],
-    },
-    {
-      input: "sm:focus:text-accent-foreground/30",
-      output: ["sm:focus", "text-accent-foreground", "30"],
-    },
-  ])(`splitClassName($input) -> $output`, ({ input, output }) => {
-    expect(splitClassName(input)).toStrictEqual(output)
-  })
-})
-
-describe("apply color mapping", async () => {
-  test.each([
-    {
-      input: "bg-background text-foreground",
-      output: "bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
-    },
-    {
-      input: "rounded-lg border bg-card text-card-foreground shadow-sm",
-      output:
-        "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
-    },
-    {
-      input:
-        "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
-      output:
-        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
-    },
-    {
-      input:
-        "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      output:
-        "flex h-full w-full items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800",
-    },
-    {
-      input:
-        "absolute right-4 top-4 bg-primary rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
-      output:
-        "absolute right-4 top-4 bg-slate-900 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:bg-slate-50 dark:ring-offset-slate-950 dark:focus:ring-slate-800 dark:data-[state=open]:bg-slate-800",
-    },
-  ])(`applyColorMapping($input) -> $output`, ({ input, output }) => {
-    expect(applyColorMapping(input, baseColor.inlineColors)).toBe(output)
-  })
-})
diff --git a/packages/nyxb/test/utils/apply-prefix.test.ts b/packages/nyxb/test/utils/apply-prefix.test.ts
deleted file mode 100644
index 9afed4c4..00000000
--- a/packages/nyxb/test/utils/apply-prefix.test.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { describe, expect, test } from "vitest"
-
-import { applyPrefix } from "../../src/utils/transformers/transform-tw-prefix"
-
-describe("apply tailwind prefix", () => {
-  test.each([
-    {
-      input: "bg-slate-800 text-gray-500",
-      output: "tw-bg-slate-800 tw-text-gray-500",
-    },
-    {
-      input: "hover:dark:bg-background dark:text-foreground",
-      output: "hover:dark:tw-bg-background dark:tw-text-foreground",
-    },
-    {
-      input:
-        "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
-      output:
-        "tw-rounded-lg tw-border tw-border-slate-200 tw-bg-white tw-text-slate-950 tw-shadow-sm dark:tw-border-slate-800 dark:tw-bg-slate-950 dark:tw-text-slate-50",
-    },
-    {
-      input:
-        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900",
-      output:
-        "tw-text-red-500 tw-border-red-500/50 dark:tw-border-red-500 [&>svg]:tw-text-red-500 tw-text-red-500 dark:tw-text-red-900 dark:tw-border-red-900/50 dark:dark:tw-border-red-900 dark:[&>svg]:tw-text-red-900 dark:tw-text-red-900",
-    },
-    {
-      input:
-        "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      output:
-        "tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-rounded-full tw-bg-muted",
-    },
-    {
-      input:
-        "absolute right-4 top-4 bg-primary rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
-      output:
-        "tw-absolute tw-right-4 tw-top-4 tw-bg-primary tw-rounded-sm tw-opacity-70 tw-ring-offset-background tw-transition-opacity hover:tw-opacity-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-ring focus:tw-ring-offset-2 disabled:tw-pointer-events-none data-[state=open]:tw-bg-secondary",
-    },
-  ])(`applyTwPrefix($input) -> $output`, ({ input, output }) => {
-    expect(applyPrefix(input, "tw-")).toBe(output)
-  })
-})
diff --git a/packages/nyxb/test/utils/get-config.test.ts b/packages/nyxb/test/utils/get-config.test.ts
deleted file mode 100644
index 584617ea..00000000
--- a/packages/nyxb/test/utils/get-config.test.ts
+++ /dev/null
@@ -1,185 +0,0 @@
-import path from "path"
-import { expect, test } from "vitest"
-
-import { getConfig, getRawConfig } from "../../src/utils/get-config"
-
-test("get raw config", async () => {
-  expect(
-    await getRawConfig(path.resolve(__dirname, "../fixtures/config-none"))
-  ).toEqual(null)
-
-  expect(
-    await getRawConfig(path.resolve(__dirname, "../fixtures/config-partial"))
-  ).toEqual({
-    style: "default",
-    tailwind: {
-      config: "./tailwind.config.ts",
-      css: "./src/assets/css/tailwind.css",
-      baseColor: "neutral",
-      cssVariables: false,
-    },
-    rsc: false,
-    tsx: true,
-    aliases: {
-      components: "~/components",
-      utils: "~/lib/utils",
-    },
-  })
-
-  expect(
-    getRawConfig(path.resolve(__dirname, "../fixtures/config-invalid"))
-  ).rejects.toThrowError()
-})
-
-test("get config", async () => {
-  expect(
-    await getConfig(path.resolve(__dirname, "../fixtures/config-none"))
-  ).toEqual(null)
-
-  expect(
-    getConfig(path.resolve(__dirname, "../fixtures/config-invalid"))
-  ).rejects.toThrowError()
-
-  expect(
-    await getConfig(path.resolve(__dirname, "../fixtures/config-partial"))
-  ).toEqual({
-    style: "default",
-    tailwind: {
-      config: "./tailwind.config.ts",
-      css: "./src/assets/css/tailwind.css",
-      baseColor: "neutral",
-      cssVariables: false,
-    },
-    rsc: false,
-    tsx: true,
-    aliases: {
-      components: "~/components",
-      utils: "~/lib/utils",
-    },
-    resolvedPaths: {
-      cwd: path.resolve(__dirname, "../fixtures/config-partial"),
-      tailwindConfig: path.resolve(
-        __dirname,
-        "../fixtures/config-partial",
-        "tailwind.config.ts"
-      ),
-      tailwindCss: path.resolve(
-        __dirname,
-        "../fixtures/config-partial",
-        "./src/assets/css/tailwind.css"
-      ),
-      components: path.resolve(
-        __dirname,
-        "../fixtures/config-partial",
-        "./components"
-      ),
-      utils: path.resolve(
-        __dirname,
-        "../fixtures/config-partial",
-        "./lib/utils"
-      ),
-      ui: path.resolve(
-        __dirname,
-        "../fixtures/config-partial",
-        "./components/ui"
-      ),
-      hooks: path.resolve(__dirname, "../fixtures/config-partial", "./hooks"),
-      lib: path.resolve(__dirname, "../fixtures/config-partial", "./lib"),
-    },
-    iconLibrary: "lucide",
-  })
-
-  expect(
-    await getConfig(path.resolve(__dirname, "../fixtures/config-full"))
-  ).toEqual({
-    style: "miami",
-    rsc: false,
-    tsx: true,
-    tailwind: {
-      config: "tailwind.config.ts",
-      baseColor: "zinc",
-      css: "src/app/globals.css",
-      cssVariables: true,
-      prefix: "tw-",
-    },
-    aliases: {
-      components: "~/components",
-      utils: "~/lib/utils",
-      lib: "~/lib",
-      hooks: "~/lib/hooks",
-      ui: "~/ui",
-    },
-    iconLibrary: "lucide",
-    resolvedPaths: {
-      cwd: path.resolve(__dirname, "../fixtures/config-full"),
-      tailwindConfig: path.resolve(
-        __dirname,
-        "../fixtures/config-full",
-        "tailwind.config.ts"
-      ),
-      tailwindCss: path.resolve(
-        __dirname,
-        "../fixtures/config-full",
-        "./src/app/globals.css"
-      ),
-      components: path.resolve(
-        __dirname,
-        "../fixtures/config-full",
-        "./src/components"
-      ),
-      ui: path.resolve(__dirname, "../fixtures/config-full", "./src/ui"),
-      hooks: path.resolve(
-        __dirname,
-        "../fixtures/config-full",
-        "./src/lib/hooks"
-      ),
-      lib: path.resolve(__dirname, "../fixtures/config-full", "./src/lib"),
-      utils: path.resolve(
-        __dirname,
-        "../fixtures/config-full",
-        "./src/lib/utils"
-      ),
-    },
-  })
-
-  expect(
-    await getConfig(path.resolve(__dirname, "../fixtures/config-jsx"))
-  ).toEqual({
-    style: "default",
-    tailwind: {
-      config: "./tailwind.config.js",
-      css: "./src/assets/css/tailwind.css",
-      baseColor: "neutral",
-      cssVariables: false,
-    },
-    rsc: false,
-    tsx: false,
-    aliases: {
-      components: "~/components",
-      utils: "~/lib/utils",
-    },
-    iconLibrary: "radix",
-    resolvedPaths: {
-      cwd: path.resolve(__dirname, "../fixtures/config-jsx"),
-      tailwindConfig: path.resolve(
-        __dirname,
-        "../fixtures/config-jsx",
-        "tailwind.config.js"
-      ),
-      tailwindCss: path.resolve(
-        __dirname,
-        "../fixtures/config-jsx",
-        "./src/assets/css/tailwind.css"
-      ),
-      components: path.resolve(
-        __dirname,
-        "../fixtures/config-jsx",
-        "./components"
-      ),
-      ui: path.resolve(__dirname, "../fixtures/config-jsx", "./components/ui"),
-      utils: path.resolve(__dirname, "../fixtures/config-jsx", "./lib/utils"),
-      hooks: path.resolve(__dirname, "../fixtures/config-jsx", "./hooks"),
-      lib: path.resolve(__dirname, "../fixtures/config-jsx", "./lib"),
-    },
-  })
-})
diff --git a/packages/nyxb/test/utils/get-item-target-path.test.ts b/packages/nyxb/test/utils/get-item-target-path.test.ts
deleted file mode 100644
index d3bca210..00000000
--- a/packages/nyxb/test/utils/get-item-target-path.test.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import path from "path"
-import { expect, test } from "vitest"
-
-import { getConfig } from "../../src/utils/get-config"
-import { getItemTargetPath } from "../../src/utils/registry"
-
-test("get item target path", async () => {
-  // Full config.
-  let appDir = path.resolve(__dirname, "../fixtures/config-full")
-  expect(
-    await getItemTargetPath(await getConfig(appDir), {
-      type: "registry:ui",
-    })
-  ).toEqual(path.resolve(appDir, "./src/ui"))
-
-  // Partial config.
-  appDir = path.resolve(__dirname, "../fixtures/config-partial")
-  expect(
-    await getItemTargetPath(await getConfig(appDir), {
-      type: "registry:ui",
-    })
-  ).toEqual(path.resolve(appDir, "./components/ui"))
-
-  // JSX.
-  appDir = path.resolve(__dirname, "../fixtures/config-jsx")
-  expect(
-    await getItemTargetPath(await getConfig(appDir), {
-      type: "registry:ui",
-    })
-  ).toEqual(path.resolve(appDir, "./components/ui"))
-
-  // Custom paths.
-  appDir = path.resolve(__dirname, "../fixtures/config-ui")
-  expect(
-    await getItemTargetPath(await getConfig(appDir), {
-      type: "registry:ui",
-    })
-  ).toEqual(path.resolve(appDir, "./src/ui"))
-})
diff --git a/packages/nyxb/test/utils/get-package-manager.test.ts b/packages/nyxb/test/utils/get-package-manager.test.ts
deleted file mode 100644
index 3858f683..00000000
--- a/packages/nyxb/test/utils/get-package-manager.test.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import path from "path"
-import { expect, test } from "vitest"
-
-import { getPackageManager } from "../../src/utils/get-package-manager"
-
-test("get package manager", async () => {
-  expect(
-    await getPackageManager(path.resolve(__dirname, "../fixtures/project-yarn"))
-  ).toBe("yarn")
-
-  expect(
-    await getPackageManager(path.resolve(__dirname, "../fixtures/project-npm"))
-  ).toBe("npm")
-
-  expect(
-    await getPackageManager(path.resolve(__dirname, "../fixtures/project-pnpm"))
-  ).toBe("pnpm")
-
-  expect(
-    await getPackageManager(path.resolve(__dirname, "../fixtures/project-bun"))
-  ).toBe("bun")
-
-  expect(
-    await getPackageManager(path.resolve(__dirname, "../fixtures/next"))
-  ).toBe("pnpm")
-})
diff --git a/packages/nyxb/test/utils/get-project-info.test.ts b/packages/nyxb/test/utils/get-project-info.test.ts
deleted file mode 100644
index 06288881..00000000
--- a/packages/nyxb/test/utils/get-project-info.test.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import path from "path"
-import { describe, expect, test } from "vitest"
-
-import { FRAMEWORKS } from "../../src/utils/frameworks"
-import { getProjectInfo } from "../../src/utils/get-project-info"
-
-describe("get project info", async () => {
-  test.each([
-    {
-      name: "next-app",
-      type: {
-        framework: FRAMEWORKS["next-app"],
-        isSrcDir: false,
-        isRSC: true,
-        isTsx: true,
-        tailwindConfigFile: "tailwind.config.ts",
-        tailwindCssFile: "app/globals.css",
-        aliasPrefix: "@",
-      },
-    },
-    {
-      name: "next-app-src",
-      type: {
-        framework: FRAMEWORKS["next-app"],
-        isSrcDir: true,
-        isRSC: true,
-        isTsx: true,
-        tailwindConfigFile: "tailwind.config.ts",
-        tailwindCssFile: "src/app/styles.css",
-        aliasPrefix: "#",
-      },
-    },
-    {
-      name: "next-pages",
-      type: {
-        framework: FRAMEWORKS["next-pages"],
-        isSrcDir: false,
-        isRSC: false,
-        isTsx: true,
-        tailwindConfigFile: "tailwind.config.ts",
-        tailwindCssFile: "styles/globals.css",
-        aliasPrefix: "~",
-      },
-    },
-    {
-      name: "next-pages-src",
-      type: {
-        framework: FRAMEWORKS["next-pages"],
-        isSrcDir: true,
-        isRSC: false,
-        isTsx: true,
-        tailwindConfigFile: "tailwind.config.ts",
-        tailwindCssFile: "src/styles/globals.css",
-        aliasPrefix: "@",
-      },
-    },
-    {
-      name: "t3-app",
-      type: {
-        framework: FRAMEWORKS["next-app"],
-        isSrcDir: true,
-        isRSC: true,
-        isTsx: true,
-        tailwindConfigFile: "tailwind.config.ts",
-        tailwindCssFile: "src/styles/globals.css",
-        aliasPrefix: "~",
-      },
-    },
-    {
-      name: "t3-pages",
-      type: {
-        framework: FRAMEWORKS["next-pages"],
-        isSrcDir: true,
-        isRSC: false,
-        isTsx: true,
-        tailwindConfigFile: "tailwind.config.ts",
-        tailwindCssFile: "src/styles/globals.css",
-        aliasPrefix: "~",
-      },
-    },
-    {
-      name: "remix",
-      type: {
-        framework: FRAMEWORKS["remix"],
-        isSrcDir: false,
-        isRSC: false,
-        isTsx: true,
-        tailwindConfigFile: "tailwind.config.ts",
-        tailwindCssFile: "app/tailwind.css",
-        aliasPrefix: "~",
-      },
-    },
-    {
-      name: "remix-indie-stack",
-      type: {
-        framework: FRAMEWORKS["remix"],
-        isSrcDir: false,
-        isRSC: false,
-        isTsx: true,
-        tailwindConfigFile: "tailwind.config.ts",
-        tailwindCssFile: "app/tailwind.css",
-        aliasPrefix: "~",
-      },
-    },
-    {
-      name: "vite",
-      type: {
-        framework: FRAMEWORKS["vite"],
-        isSrcDir: true,
-        isRSC: false,
-        isTsx: true,
-        tailwindConfigFile: "tailwind.config.js",
-        tailwindCssFile: "src/index.css",
-        aliasPrefix: null,
-      },
-    },
-  ])(`getProjectType($name) -> $type`, async ({ name, type }) => {
-    expect(
-      await getProjectInfo(
-        path.resolve(__dirname, `../fixtures/frameworks/${name}`)
-      )
-    ).toStrictEqual(type)
-  })
-})
diff --git a/packages/nyxb/test/utils/get-tailwind-css-file.test.ts b/packages/nyxb/test/utils/get-tailwind-css-file.test.ts
deleted file mode 100644
index 1369f18c..00000000
--- a/packages/nyxb/test/utils/get-tailwind-css-file.test.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import path from "path"
-import { describe, expect, test } from "vitest"
-
-import { getTailwindCssFile } from "../../src/utils/get-project-info"
-
-describe("get tailwindcss file", async () => {
-  test.each([
-    {
-      name: "next-app",
-      file: "app/globals.css",
-    },
-    {
-      name: "next-app-src",
-      file: "src/app/styles.css",
-    },
-    {
-      name: "next-pages",
-      file: "styles/globals.css",
-    },
-    {
-      name: "next-pages-src",
-      file: "src/styles/globals.css",
-    },
-    {
-      name: "t3-app",
-      file: "src/styles/globals.css",
-    },
-    {
-      name: "t3-pages",
-      file: "src/styles/globals.css",
-    },
-    {
-      name: "remix",
-      file: "app/tailwind.css",
-    },
-    {
-      name: "vite",
-      file: "src/index.css",
-    },
-  ])(`getTailwindCssFile($name) -> $file`, async ({ name, file }) => {
-    expect(
-      await getTailwindCssFile(
-        path.resolve(__dirname, `../fixtures/frameworks/${name}`)
-      )
-    ).toBe(file)
-  })
-})
diff --git a/packages/nyxb/test/utils/get-ts-config-alias-prefix.test.ts b/packages/nyxb/test/utils/get-ts-config-alias-prefix.test.ts
deleted file mode 100644
index 17acb7a5..00000000
--- a/packages/nyxb/test/utils/get-ts-config-alias-prefix.test.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import path from "path"
-import { describe, expect, test } from "vitest"
-
-import { getTsConfigAliasPrefix } from "../../src/utils/get-project-info"
-
-describe("get ts config alias prefix", async () => {
-  test.each([
-    {
-      name: "next-app",
-      prefix: "@",
-    },
-    {
-      name: "next-app-src",
-      prefix: "#",
-    },
-    {
-      name: "next-pages",
-      prefix: "~",
-    },
-    {
-      name: "next-pages-src",
-      prefix: "@",
-    },
-    {
-      name: "t3-app",
-      prefix: "~",
-    },
-    {
-      name: "next-app-custom-alias",
-      prefix: "@custom-alias",
-    },
-  ])(`getTsConfigAliasPrefix($name) -> $prefix`, async ({ name, prefix }) => {
-    expect(
-      await getTsConfigAliasPrefix(
-        path.resolve(__dirname, `../fixtures/frameworks/${name}`)
-      )
-    ).toBe(prefix)
-  })
-})
diff --git a/packages/nyxb/test/utils/is-typescript-project.test.ts b/packages/nyxb/test/utils/is-typescript-project.test.ts
deleted file mode 100644
index 970eb6c3..00000000
--- a/packages/nyxb/test/utils/is-typescript-project.test.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import path from "path"
-import { describe, expect, test } from "vitest"
-
-import { isTypeScriptProject } from "../../src/utils/get-project-info"
-
-describe("is TypeScript project", async () => {
-  test.each([
-    {
-      name: "next-app",
-      result: true,
-    },
-    {
-      name: "next-app-src",
-      result: true,
-    },
-    {
-      name: "next-pages",
-      result: true,
-    },
-    {
-      name: "next-pages-src",
-      result: true,
-    },
-    {
-      name: "t3-app",
-      result: true,
-    },
-    {
-      name: "next-app-js",
-      result: false,
-    },
-  ])(`isTypeScriptProject($name) -> $result`, async ({ name, result }) => {
-    expect(
-      await isTypeScriptProject(
-        path.resolve(__dirname, `../fixtures/frameworks/${name}`)
-      )
-    ).toBe(result)
-  })
-})
diff --git a/packages/nyxb/test/utils/registry.test.ts b/packages/nyxb/test/utils/registry.test.ts
deleted file mode 100644
index 64a17bd9..00000000
--- a/packages/nyxb/test/utils/registry.test.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { expect, test } from "vitest"
-
-import { resolveTree } from "../../src/utils/registry"
-
-test("resolve tree", async () => {
-  const index = [
-    {
-      name: "button",
-      dependencies: ["@radix-ui/react-slot"],
-      type: "components:ui",
-      files: ["button.tsx"],
-    },
-    {
-      name: "dialog",
-      dependencies: ["@radix-ui/react-dialog"],
-      registryDependencies: ["button"],
-      type: "components:ui",
-      files: ["dialog.tsx"],
-    },
-    {
-      name: "input",
-      registryDependencies: ["button"],
-      type: "components:ui",
-      files: ["input.tsx"],
-    },
-    {
-      name: "alert-dialog",
-      dependencies: ["@radix-ui/react-alert-dialog"],
-      registryDependencies: ["button", "dialog"],
-      type: "components:ui",
-      files: ["alert-dialog.tsx"],
-    },
-    {
-      name: "example-card",
-      type: "components:component",
-      files: ["example-card.tsx"],
-      registryDependencies: ["button", "dialog", "input"],
-    },
-  ]
-
-  expect(
-    (await resolveTree(index, ["button"])).map((entry) => entry.name).sort()
-  ).toEqual(["button"])
-
-  expect(
-    (await resolveTree(index, ["dialog"])).map((entry) => entry.name).sort()
-  ).toEqual(["button", "dialog"])
-
-  expect(
-    (await resolveTree(index, ["alert-dialog", "dialog"]))
-      .map((entry) => entry.name)
-      .sort()
-  ).toEqual(["alert-dialog", "button", "dialog"])
-
-  expect(
-    (await resolveTree(index, ["example-card"]))
-      .map((entry) => entry.name)
-      .sort()
-  ).toEqual(["button", "dialog", "example-card", "input"])
-
-  expect(
-    (await resolveTree(index, ["foo"])).map((entry) => entry.name).sort()
-  ).toEqual([])
-
-  expect(
-    (await resolveTree(index, ["button", "foo"]))
-      .map((entry) => entry.name)
-      .sort()
-  ).toEqual(["button"])
-})
diff --git a/packages/nyxb/test/utils/resolve-import.test.ts b/packages/nyxb/test/utils/resolve-import.test.ts
deleted file mode 100644
index fd467af2..00000000
--- a/packages/nyxb/test/utils/resolve-import.test.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import path from "path"
-import { loadConfig, type ConfigLoaderSuccessResult } from "tsconfig-paths"
-import { expect, test } from "vitest"
-
-import { resolveImport } from "../../src/utils/resolve-import"
-
-test("resolve import", async () => {
-  expect(
-    await resolveImport("~/foo/bar", {
-      absoluteBaseUrl: "/Users/nyxb/Projects/foobar",
-      paths: {
-        "~/*": ["./src/*"],
-        "~/components/*": ["./src/components/*"],
-        "~/lib": ["./src/lib"],
-      },
-    })
-  ).toEqual("/Users/nyxb/Projects/foobar/src/foo/bar")
-
-  expect(
-    await resolveImport("~/components/foo/bar/baz", {
-      absoluteBaseUrl: "/Users/nyxb/Projects/foobar",
-      paths: {
-        "~/*": ["./src/*"],
-        "~/components/*": ["./src/components/*"],
-        "~/lib": ["./src/lib"],
-      },
-    })
-  ).toEqual("/Users/nyxb/Projects/foobar/src/components/foo/bar/baz")
-
-  expect(
-    await resolveImport("components/foo/bar", {
-      absoluteBaseUrl: "/Users/nyxb/Projects/foobar",
-      paths: {
-        "components/*": ["./src/app/components/*"],
-        "ui/*": ["./src/ui/primities/*"],
-        lib: ["./lib"],
-      },
-    })
-  ).toEqual("/Users/nyxb/Projects/foobar/src/app/components/foo/bar")
-
-  expect(
-    await resolveImport("lib/utils", {
-      absoluteBaseUrl: "/Users/nyxb/Projects/foobar",
-      paths: {
-        "components/*": ["./src/app/components/*"],
-        "ui/*": ["./src/ui/primities/*"],
-        lib: ["./lib"],
-      },
-    })
-  ).toEqual("/Users/nyxb/Projects/foobar/lib/utils")
-})
-
-test("resolve import with base url", async () => {
-  const cwd = path.resolve(__dirname, "../fixtures/with-base-url")
-  const config = (await loadConfig(cwd)) as ConfigLoaderSuccessResult
-
-  expect(await resolveImport("~/components/ui", config)).toEqual(
-    path.resolve(cwd, "components/ui")
-  )
-  expect(await resolveImport("~/lib/utils", config)).toEqual(
-    path.resolve(cwd, "lib/utils")
-  )
-  expect(await resolveImport("foo/bar", config)).toEqual(
-    path.resolve(cwd, "foo/bar")
-  )
-})
-
-test("resolve import without base url", async () => {
-  const cwd = path.resolve(__dirname, "../fixtures/without-base-url")
-  const config = (await loadConfig(cwd)) as ConfigLoaderSuccessResult
-
-  expect(await resolveImport("~/components/ui", config)).toEqual(
-    path.resolve(cwd, "components/ui")
-  )
-  expect(await resolveImport("~/lib/utils", config)).toEqual(
-    path.resolve(cwd, "lib/utils")
-  )
-  expect(await resolveImport("foo/bar", config)).toEqual(
-    path.resolve(cwd, "foo/bar")
-  )
-})
diff --git a/packages/nyxb/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap b/packages/nyxb/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
deleted file mode 100644
index cbfb2b97..00000000
--- a/packages/nyxb/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
+++ /dev/null
@@ -1,555 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`registryResolveItemTree > should resolve index 1`] = `
-{
-  "cssVars": {
-    "dark": {},
-    "light": {
-      "radius": "0.5rem",
-    },
-  },
-  "dependencies": [
-    "tailwindcss-animate",
-    "class-variance-authority",
-    "lucide-react",
-    "clsx",
-    "tailwind-merge",
-    "@radix-ui/react-label",
-  ],
-  "devDependencies": [],
-  "docs": "",
-  "files": [
-    {
-      "content": "import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function ny(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-",
-      "path": "lib/utils.ts",
-      "target": "",
-      "type": "registry:lib",
-    },
-    {
-      "content": ""use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { ny } from "~/lib/utils"
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={ny(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
-",
-      "path": "ui/label.tsx",
-      "target": "",
-      "type": "registry:ui",
-    },
-  ],
-  "tailwind": {
-    "config": {
-      "plugins": [
-        "require("tailwindcss-animate")",
-      ],
-      "theme": {
-        "extend": {
-          "borderRadius": {
-            "lg": "var(--radius)",
-            "md": "calc(var(--radius) - 2px)",
-            "sm": "calc(var(--radius) - 4px)",
-          },
-          "colors": {},
-        },
-      },
-    },
-  },
-}
-`;
-
-exports[`registryResolveItemTree > should resolve items tree 1`] = `
-{
-  "cssVars": {},
-  "dependencies": [
-    "@radix-ui/react-slot",
-  ],
-  "devDependencies": [],
-  "docs": "",
-  "files": [
-    {
-      "content": "import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { ny } from "~/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={ny(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }
-",
-      "path": "ui/button.tsx",
-      "target": "",
-      "type": "registry:ui",
-    },
-  ],
-  "tailwind": {},
-}
-`;
-
-exports[`registryResolveItemTree > should resolve multiple items tree 1`] = `
-{
-  "cssVars": {},
-  "dependencies": [
-    "@radix-ui/react-slot",
-    "cmdk@1.0.0",
-    "@radix-ui/react-dialog",
-  ],
-  "devDependencies": [],
-  "docs": "",
-  "files": [
-    {
-      "content": "import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { ny } from "~/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={ny(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }
-",
-      "path": "ui/button.tsx",
-      "target": "",
-      "type": "registry:ui",
-    },
-    {
-      "content": "import * as React from "react"
-
-import { ny } from "~/lib/utils"
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={ny(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }
-",
-      "path": "ui/input.tsx",
-      "target": "",
-      "type": "registry:ui",
-    },
-    {
-      "content": ""use client"
-
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
-
-import { ny } from "~/lib/utils"
-import { Dialog, DialogContent } from "~/registry/default/ui/dialog"
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={ny(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={ny(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={ny("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={ny(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={ny("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={ny(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={ny(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}
-",
-      "path": "ui/command.tsx",
-      "target": "",
-      "type": "registry:ui",
-    },
-    {
-      "content": ""use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-
-import { ny } from "~/lib/utils"
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={ny(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={ny(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={ny(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={ny(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={ny(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={ny("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}
-",
-      "path": "ui/dialog.tsx",
-      "target": "",
-      "type": "registry:ui",
-    },
-  ],
-  "tailwind": {},
-}
-`;
diff --git a/packages/nyxb/test/utils/schema/registry-resolve-items-tree.test.ts b/packages/nyxb/test/utils/schema/registry-resolve-items-tree.test.ts
deleted file mode 100644
index 7f6b173e..00000000
--- a/packages/nyxb/test/utils/schema/registry-resolve-items-tree.test.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { describe, expect, test } from "vitest"
-
-import { registryResolveItemsTree } from "../../../src/utils/registry"
-
-describe("registryResolveItemTree", () => {
-  test("should resolve items tree", async () => {
-    expect(
-      await registryResolveItemsTree(["button"], {
-        style: "miami",
-        tailwind: {
-          baseColor: "stone",
-        },
-      })
-    ).toMatchSnapshot()
-  })
-
-  test("should resolve multiple items tree", async () => {
-    expect(
-      await registryResolveItemsTree(["button", "input", "command"], {
-        style: "default",
-        tailwind: {
-          baseColor: "zinc",
-        },
-      })
-    ).toMatchSnapshot()
-  })
-
-  test("should resolve index", async () => {
-    expect(
-      await registryResolveItemsTree(["index", "label"], {
-        style: "default",
-        tailwind: {
-          baseColor: "zinc",
-        },
-      })
-    ).toMatchSnapshot()
-  })
-})
diff --git a/packages/nyxb/test/utils/transform-css-vars.test.ts b/packages/nyxb/test/utils/transform-css-vars.test.ts
deleted file mode 100644
index beab44d1..00000000
--- a/packages/nyxb/test/utils/transform-css-vars.test.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { expect, test } from "vitest"
-
-import { transform } from "../../src/utils/transformers"
-import stone from "../fixtures/colors/stone.json"
-
-test("transform css vars", async () => {
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-}"
-    `,
-      config: {
-        tsx: true,
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: true,
-        },
-        aliases: {
-          components: "~/components",
-          utils: "~/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-}"
-    `,
-      config: {
-        tsx: true,
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: false,
-        },
-        aliases: {
-          components: "~/components",
-          utils: "~/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className={ny("bg-background hover:bg-muted", true && "text-primary-foreground sm:focus:text-accent-foreground")}>foo</div>
-}"
-    `,
-      config: {
-        tsx: true,
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: false,
-        },
-        aliases: {
-          components: "~/components",
-          utils: "~/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className={ny("bg-background border border-input")}>foo</div>
-}"
-    `,
-      config: {
-        tsx: true,
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: false,
-        },
-        aliases: {
-          components: "~/components",
-          utils: "~/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-})
diff --git a/packages/nyxb/test/utils/transform-import.test.ts b/packages/nyxb/test/utils/transform-import.test.ts
deleted file mode 100644
index b55172c2..00000000
--- a/packages/nyxb/test/utils/transform-import.test.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { expect, test } from "vitest"
-
-import { transform } from "../../src/utils/transformers"
-
-test("transform import", async () => {
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/registry/miami/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/registry/miami/box"
-
-    import { ny } from "~/lib/utils"
-    `,
-      config: {
-        tsx: true,
-        tailwind: {
-          baseColor: "neutral",
-          cssVariables: true,
-        },
-        aliases: {
-          components: "~/components",
-          utils: "~/lib/utils",
-        },
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/registry/miami/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/registry/miami/box"
-
-    import { ny, foo, bar } from "~/lib/utils"
-    import { bar } from "~/lib/utils/bar"
-    `,
-      config: {
-        tsx: true,
-        aliases: {
-          components: "~/src/components",
-          utils: "~/lib",
-        },
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/registry/miami/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/registry/miami/box"
-
-    import { ny } from "~/lib/utils"
-    import { bar } from "~/lib/utils/bar"
-    `,
-      config: {
-        tsx: true,
-        aliases: {
-          components: "~/src/components",
-          utils: "~/src/utils",
-        },
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/registry/miami/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/registry/miami/box"
-
-    import { ny } from "~/lib/utils"
-    import { bar } from "~/lib/utils/bar"
-    `,
-      config: {
-        tsx: true,
-        aliases: {
-          components: "~/src/components",
-          utils: "~/src/utils",
-          ui: "~/src/components",
-        },
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/registry/miami/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/registry/miami/box"
-
-    import { ny } from "~/lib/utils"
-    import { bar } from "~/lib/utils/bar"
-    `,
-      config: {
-        tsx: true,
-        aliases: {
-          components: "~/src/components",
-          utils: "~/src/utils",
-          ui: "~/src/ui",
-        },
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/components/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/registry/miami/box"
-
-    import { ny } from "~/lib/utils"
-    `,
-      config: {
-        tsx: true,
-        tailwind: {
-          baseColor: "neutral",
-          cssVariables: true,
-        },
-        aliases: {
-          components: "@custom-alias/components",
-          utils: "@custom-alias/lib/utils",
-        },
-      },
-    })
-  ).toMatchSnapshot()
-})
diff --git a/packages/nyxb/test/utils/transform-rsc.test.ts b/packages/nyxb/test/utils/transform-rsc.test.ts
deleted file mode 100644
index 79b0d0b4..00000000
--- a/packages/nyxb/test/utils/transform-rsc.test.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { expect, test } from "vitest"
-
-import { transform } from "../../src/utils/transformers"
-
-test("transform rsc", async () => {
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    `,
-      config: {
-        tsx: true,
-        rsc: true,
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `"use client"
-
-      import * as React from "react"
-import { Foo } from "bar"
-    `,
-      config: {
-        tsx: true,
-        rsc: true,
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `"use client"
-
-      import * as React from "react"
-import { Foo } from "bar"
-    `,
-      config: {
-        tsx: true,
-        rsc: false,
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `"use foo"
-
-      import * as React from "react"
-import { Foo } from "bar"
-
-"use client"
-    `,
-      config: {
-        tsx: true,
-        rsc: false,
-      },
-    })
-  ).toMatchSnapshot()
-
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `'use client'
-
-      import * as React from 'react'
-import { Foo } from 'bar'
-    `,
-      config: {
-        tsx: true,
-        rsc: true,
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `'use client'
-
-      import * as React from 'react'
-import { Foo } from 'bar'
-    `,
-      config: {
-        tsx: true,
-        rsc: false,
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `'use foo'
-
-      import * as React from 'react'
-import { Foo } from 'bar'
-
-'use client'
-    `,
-      config: {
-        tsx: true,
-        rsc: false,
-      },
-    })
-  ).toMatchSnapshot()
-})
diff --git a/packages/nyxb/test/utils/transform-tw-prefix.test.ts b/packages/nyxb/test/utils/transform-tw-prefix.test.ts
deleted file mode 100644
index 36cfd9f6..00000000
--- a/packages/nyxb/test/utils/transform-tw-prefix.test.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { expect, test } from "vitest"
-
-import { transform } from "../../src/utils/transformers"
-import { applyPrefixesCss } from "../../src/utils/transformers/transform-tw-prefix"
-import stone from "../fixtures/colors/stone.json"
-
-test("transform tailwind prefix", async () => {
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-            export function Foo() {
-                return <div className="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-            }
-        `,
-      config: {
-        tailwind: {
-          baseColor: "stone",
-          prefix: "tw-",
-        },
-        aliases: {
-          components: "~/components",
-          utils: "~/lib/utils",
-        },
-      },
-      baseColor: "stone",
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-}
-    `,
-      config: {
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: false,
-          prefix: "tw-",
-        },
-        aliases: {
-          components: "~/components",
-          utils: "~/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className={ny("bg-background hover:bg-muted", true && "text-primary-foreground sm:focus:text-accent-foreground")}>foo</div>
-}
-    `,
-      config: {
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: false,
-          prefix: "tw-",
-        },
-        aliases: {
-          components: "~/components",
-          utils: "~/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className={ny('bg-background hover:bg-muted', true && 'text-primary-foreground sm:focus:text-accent-foreground')}>foo</div>
-}
-    `,
-      config: {
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: false,
-          prefix: "tw-",
-        },
-        aliases: {
-          components: "~/components",
-          utils: "~/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    applyPrefixesCss(
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n \n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n \n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n \n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n \n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n \n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 217.9 10.6% 64.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n \n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n \n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n \n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n \n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n \n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n \n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n \n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 215 27.9% 16.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}",
-      "tw-"
-    )
-  ).toMatchSnapshot()
-})
diff --git a/packages/nyxb/test/utils/updaters/__snapshots__/initialize-tailwind-config.test.ts.snap b/packages/nyxb/test/utils/updaters/__snapshots__/initialize-tailwind-config.test.ts.snap
deleted file mode 100644
index 2de3deeb..00000000
--- a/packages/nyxb/test/utils/updaters/__snapshots__/initialize-tailwind-config.test.ts.snap
+++ /dev/null
@@ -1,433 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transformTailwindConfig -> darkMode property > should add darkMode property if not in config 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should add darkMode property if not in config 2`] = `
-"/** @type {import('tailwindcss').Config} */
-
-export default {
-    darkMode: ['class'],
-    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-}
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should add darkMode property if not in config 3`] = `
-"/** @type {import('tailwindcss').Config} */
-const foo = {
-  bar: 'baz',
-}
-
-export default {
-    darkMode: ['class'],
-    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-}
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should append class to darkMode property if existing array 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ["selector", "class"],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should convert string to array and add class if darkMode is string 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ["selector", "class"],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should not add darkMode property if already in config 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ['class'],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should not add darkMode property if already in config 2`] = `
-"import type { Config } from 'tailwindcss'
-
-  const config: Config = {
-  darkMode: ['class', 'selector'],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-  }
-  export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should preserve quote kind 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ['selector', '[data-mode="dark"]', 'class'],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should work with multiple darkMode selectors 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ['variant', [
-    '@media (prefers-color-scheme: dark) { &:not(.light *) }',
-    '&:is(.dark *)',
-  ], 'class'],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> plugin > should add plugin if not in config 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-    plugins: [require("tailwindcss-animate")]
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> plugin > should append plugin to existing array 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> plugin > should not add plugin if already in config 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> theme > should add theme if not in config 1`] = `
-"import type { Config } from 'tailwindcss'
-
-  const config: Config = {
-      darkMode: ["class"],
-    content: [
-      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-      "./components/**/*.{js,ts,jsx,tsx,mdx}",
-      "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    ],
-      theme: {
-      	extend: {
-      		colors: {
-      			background: 'hsl(var(--background))',
-      			foreground: 'hsl(var(--foreground))',
-      			primary: {
-      				DEFAULT: 'hsl(var(--primary))',
-      				foreground: 'hsl(var(--primary-foreground))'
-      			}
-      		}
-      	}
-      }
-}
-  export default config
-    "
-`;
-
-exports[`transformTailwindConfig -> theme > should handle multiple properties 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-  	extend: {
-  		fontFamily: {
-  			sans: ["var(--font-geist-sans)", ...fontFamily.sans],
-  			mono: ["var(--font-mono)", ...fontFamily.mono],
-  			heading: [
-  				'var(--font-geist-sans)'
-  			]
-  		},
-  		colors: {
-                ...defaultColors,
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			}
-  		},
-  		boxShadow: {
-                ...defaultBoxShadow,
-  			'3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)'
-  		},
-  		borderRadius: {
-  			'3xl': '2rem',
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		},
-  		animation: {
-                ...defaultAnimation,
-  			'spin-slow': 'spin 3s linear infinite',
-  			'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out'
-  		}
-  	}
-  },
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> theme > should keep spread assignments 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-  	extend: {
-  		colors: {
-                ...defaultColors,
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			}
-  		}
-  	}
-  },
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> theme > should merge existing theme 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-  	extend: {
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			}
-  		}
-  	}
-  },
-}
-export default config
-  "
-`;
diff --git a/packages/nyxb/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap b/packages/nyxb/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap
deleted file mode 100644
index ec6f1646..00000000
--- a/packages/nyxb/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap
+++ /dev/null
@@ -1,572 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transformTailwindConfig -> darkMode property > should add darkMode property if not in config 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should add darkMode property if not in config 2`] = `
-"/** @type {import('tailwindcss').Config} */
-
-export default {
-    darkMode: ['class'],
-    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-}
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should add darkMode property if not in config 3`] = `
-"/** @type {import('tailwindcss').Config} */
-const foo = {
-  bar: 'baz',
-}
-
-export default {
-    darkMode: ['class'],
-    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-}
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should append class to darkMode property if existing array 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ["selector", "class"],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should convert string to array and add class if darkMode is string 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ["selector", "class"],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should not add darkMode property if already in config 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ['class'],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should not add darkMode property if already in config 2`] = `
-"import type { Config } from 'tailwindcss'
-
-  const config: Config = {
-  darkMode: ['class', 'selector'],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-  }
-  export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should preserve quote kind 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ['selector', '[data-mode="dark"]', 'class'],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> darkMode property > should work with multiple darkMode selectors 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ['variant', [
-    '@media (prefers-color-scheme: dark) { &:not(.light *) }',
-    '&:is(.dark *)',
-  ], 'class'],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> plugin > should add plugin if not in config 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-    plugins: [require("tailwindcss-animate")]
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> plugin > should append plugin to existing array 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> plugin > should not add plugin if already in config 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> theme > should add theme if not in config 1`] = `
-"import type { Config } from 'tailwindcss'
-
-  const config: Config = {
-      darkMode: ["class"],
-    content: [
-      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-      "./components/**/*.{js,ts,jsx,tsx,mdx}",
-      "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    ],
-      theme: {
-      	extend: {
-      		colors: {
-      			background: 'hsl(var(--background))',
-      			foreground: 'hsl(var(--foreground))',
-      			primary: {
-      				DEFAULT: 'hsl(var(--primary))',
-      				foreground: 'hsl(var(--primary-foreground))'
-      			}
-      		}
-      	}
-      }
-}
-  export default config
-    "
-`;
-
-exports[`transformTailwindConfig -> theme > should handle multiple properties 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-  	extend: {
-  		fontFamily: {
-  			sans: [
-  				'var(--font-geist-sans)',
-                    ...fontFamily.sans
-                ],
-  			mono: [
-  				'var(--font-mono)',
-                    ...fontFamily.mono
-                ],
-  			heading: [
-  				'var(--font-geist-sans)'
-  			]
-  		},
-  		colors: {
-                ...defaultColors,
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			}
-  		},
-  		boxShadow: {
-                ...defaultBoxShadow,
-  			'3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)'
-  		},
-  		borderRadius: {
-  			'3xl': '2rem',
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		},
-  		animation: {
-                ...defaultAnimation,
-  			'spin-slow': 'spin 3s linear infinite',
-  			'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out'
-  		}
-  	}
-  },
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> theme > should handle objects nested in arrays 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-  	extend: {
-  		fontSize: {
-  			xs: [
-  				'0.75rem',
-  				{
-  					lineHeight: '1rem'
-  				}
-  			],
-  			sm: [
-  				'0.875rem',
-  				{
-  					lineHeight: '1.25rem'
-  				}
-  			],
-  			xl: [
-  				'clamp(1.5rem, 1.04vi + 1.17rem, 2rem)',
-  				{
-  					lineHeight: '1.2',
-  					letterSpacing: '-0.02em',
-  					fontWeight: '600'
-  				}
-  			]
-  		}
-  	}
-  },
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> theme > should keep arrays when formatted on multilines 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-  	extend: {
-  		fontFamily: {
-  			sans: [
-  				'Figtree',
-                    ...defaultTheme.fontFamily.sans
-                ],
-  			mono: [
-  				'Foo'
-  			]
-  		}
-  	}
-  },
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> theme > should keep quotes in strings 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-  	extend: {
-  		fontFamily: {
-  			sans: [
-  				'Figtree',
-                    ...defaultTheme.fontFamily.sans
-                ]
-  		},
-  		colors: {
-                ...defaultColors,
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			}
-  		}
-  	}
-  },
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> theme > should keep spread assignments 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-  	extend: {
-  		colors: {
-                ...defaultColors,
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			}
-  		}
-  	}
-  },
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> theme > should merge existing theme 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-  	extend: {
-  		fontFamily: {
-  			sans: [
-  				'ui-sans-serif',
-  				'sans-serif'
-  			]
-  		},
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			}
-  		}
-  	}
-  },
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindConfig -> theme > should preserve boolean values 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    container: {
-      center: true
-    }
-  },
-}
-export default config
-  "
-`;
diff --git a/packages/nyxb/test/utils/updaters/__snapshots__/update-tailwind-content.test.ts.snap b/packages/nyxb/test/utils/updaters/__snapshots__/update-tailwind-content.test.ts.snap
deleted file mode 100644
index 6f82d6b7..00000000
--- a/packages/nyxb/test/utils/updaters/__snapshots__/update-tailwind-content.test.ts.snap
+++ /dev/null
@@ -1,52 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transformTailwindContent -> content property > should NOT add content property if already in config 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-        "./bar/**/*.{js,ts,jsx,tsx,mdx}"
-    ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
-
-exports[`transformTailwindContent -> content property > should add content property if not in config 1`] = `
-"import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-        "./foo/**/*.{js,ts,jsx,tsx,mdx}",
-        "./bar/**/*.{js,ts,jsx,tsx,mdx}"
-    ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  "
-`;
diff --git a/packages/nyxb/test/utils/updaters/update-css-vars.test.ts b/packages/nyxb/test/utils/updaters/update-css-vars.test.ts
deleted file mode 100644
index 5ab0f674..00000000
--- a/packages/nyxb/test/utils/updaters/update-css-vars.test.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-import { describe, expect, test } from "vitest"
-
-import { transformCssVars } from "../../../src/utils/updaters/update-css-vars"
-
-describe("transformCssVars", () => {
-  test("should add light and dark css vars if not present", async () => {
-    expect(
-      await transformCssVars(
-        `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-  `,
-        {
-          light: {
-            background: "white",
-            foreground: "black",
-          },
-          dark: {
-            background: "black",
-            foreground: "white",
-          },
-        },
-        {
-          tailwind: {
-            cssVariables: true,
-          },
-        }
-      )
-    ).toMatchInlineSnapshot(`
-      "@tailwind base;
-      @tailwind components;
-      @tailwind utilities;
-      @layer base {
-        :root {
-          --background: white;
-          --foreground: black
-        }
-        .dark {
-          --background: black;
-          --foreground: white
-        }
-      }
-      @layer base {
-        * {
-          @apply border-border;
-        }
-        body {
-          @apply bg-background text-foreground;
-        }
-      }
-        "
-    `)
-  })
-
-  test("should update light and dark css vars if present", async () => {
-    expect(
-      await transformCssVars(
-        `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base{
-  :root{
-    --background: 210 40% 98%;
-  }
-
-  .dark{
-    --background: 222.2 84% 4.9%;
-  }
-}
-  `,
-        {
-          light: {
-            background: "215 20.2% 65.1%",
-            foreground: "222.2 84% 4.9%",
-          },
-          dark: {
-            foreground: "60 9.1% 97.8%",
-          },
-        },
-        {
-          tailwind: {
-            cssVariables: true,
-          },
-        }
-      )
-    ).toMatchInlineSnapshot(`
-      "@tailwind base;
-      @tailwind components;
-      @tailwind utilities;
-
-      @layer base{
-        :root{
-          --background: 215 20.2% 65.1%;
-          --foreground: 222.2 84% 4.9%;
-        }
-
-        .dark{
-          --background: 222.2 84% 4.9%;
-          --foreground: 60 9.1% 97.8%;
-        }
-      }
-
-      @layer base {
-        * {
-          @apply border-border;
-        }
-        body {
-          @apply bg-background text-foreground;
-        }
-      }
-        "
-    `)
-  })
-
-  test("should not add the base layer if it is already present", async () => {
-    expect(
-      await transformCssVars(
-        `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base{
-  :root{
-    --background: 210 40% 98%;
-  }
-
-  .dark{
-    --background: 222.2 84% 4.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-  `,
-        {},
-        {
-          tailwind: {
-            cssVariables: true,
-          },
-        }
-      )
-    ).toMatchInlineSnapshot(`
-      "@tailwind base;
-      @tailwind components;
-      @tailwind utilities;
-
-      @layer base{
-        :root{
-          --background: 210 40% 98%;
-        }
-
-        .dark{
-          --background: 222.2 84% 4.9%;
-        }
-      }
-
-      @layer base {
-        * {
-          @apply border-border;
-        }
-        body {
-          @apply bg-background text-foreground;
-        }
-      }
-        "
-    `)
-  })
-})
diff --git a/packages/nyxb/test/utils/updaters/update-files.test.ts b/packages/nyxb/test/utils/updaters/update-files.test.ts
deleted file mode 100644
index 4d12fcb8..00000000
--- a/packages/nyxb/test/utils/updaters/update-files.test.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { describe, expect, test } from "vitest"
-
-import { resolveTargetDir } from "../../../src/utils/updaters/update-files"
-
-describe("resolveTargetDir", () => {
-  test("should handle a home target without a src directory", () => {
-    const targetDir = resolveTargetDir(
-      {
-        isSrcDir: false,
-      },
-      {
-        resolvedPaths: {
-          cwd: "/foo/bar",
-        },
-      },
-      "~/.env"
-    )
-    expect(targetDir).toBe("/foo/bar/.env")
-  })
-
-  test("should handle a home target even with a src directory", () => {
-    const targetDir = resolveTargetDir(
-      {
-        isSrcDir: true,
-      },
-      {
-        resolvedPaths: {
-          cwd: "/foo/bar",
-        },
-      },
-      "~/.env"
-    )
-    expect(targetDir).toBe("/foo/bar/.env")
-  })
-
-  test("should handle a simple target", () => {
-    const targetDir = resolveTargetDir(
-      {
-        isSrcDir: false,
-      },
-      {
-        resolvedPaths: {
-          cwd: "/foo/bar",
-        },
-      },
-      "./components/ui/button.tsx"
-    )
-    expect(targetDir).toBe("/foo/bar/components/ui/button.tsx")
-  })
-
-  test("should handle a simple target with src directory", () => {
-    const targetDir = resolveTargetDir(
-      {
-        isSrcDir: true,
-      },
-      {
-        resolvedPaths: {
-          cwd: "/foo/bar",
-        },
-      },
-      "./components/ui/button.tsx"
-    )
-    expect(targetDir).toBe("/foo/bar/src/components/ui/button.tsx")
-  })
-})
diff --git a/packages/nyxb/test/utils/updaters/update-tailwind-config.test.ts b/packages/nyxb/test/utils/updaters/update-tailwind-config.test.ts
deleted file mode 100644
index 5a27cac2..00000000
--- a/packages/nyxb/test/utils/updaters/update-tailwind-config.test.ts
+++ /dev/null
@@ -1,1377 +0,0 @@
-import { Project, SyntaxKind } from "ts-morph"
-import { beforeEach, describe, expect, test } from "vitest"
-
-import {
-  buildTailwindThemeColorsFromCssVars, nestSpreadElements,
-  nestSpreadProperties,
-  transformTailwindConfig,
-  unnestSpreadProperties, unnsetSpreadElements,
-} from "../../../src/utils/updaters/update-tailwind-config"
-
-const SHARED_CONFIG = {
-  $schema: "https://nyxbui.design/schema.json",
-  style: "miami",
-  rsc: true,
-  tsx: true,
-  tailwind: {
-    config: "tailwind.config.ts",
-    css: "app/globals.css",
-    baseColor: "slate",
-    cssVariables: true,
-  },
-  aliases: {
-    components: "~/components",
-    utils: "~/lib/utils",
-  },
-  resolvedPaths: {
-    cwd: ".",
-    tailwindConfig: "tailwind.config.ts",
-    tailwindCss: "app/globals.css",
-    components: "./components",
-    utils: "./lib/utils",
-    ui: "./components/ui",
-  },
-}
-
-describe("transformTailwindConfig -> darkMode property", () => {
-  test("should add darkMode property if not in config", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  `,
-        {
-          properties: [
-            {
-              name: "darkMode",
-              value: "class",
-            },
-          ],
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-
-    expect(
-      await transformTailwindConfig(
-        `/** @type {import('tailwindcss').Config} */
-
-export default {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-}
-  `,
-        {
-          properties: [
-            {
-              name: "darkMode",
-              value: "class",
-            },
-          ],
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-
-    expect(
-      await transformTailwindConfig(
-        `/** @type {import('tailwindcss').Config} */
-const foo = {
-  bar: 'baz',
-}
-
-export default {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-}
-  `,
-        {
-          properties: [
-            {
-              name: "darkMode",
-              value: "class",
-            },
-          ],
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should append class to darkMode property if existing array", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ["selector"],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  `,
-        {
-          properties: [
-            {
-              name: "darkMode",
-              value: "class",
-            },
-          ],
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should preserve quote kind", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ['selector', '[data-mode="dark"]'],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  `,
-        {
-          properties: [
-            {
-              name: "darkMode",
-              value: "class",
-            },
-          ],
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should convert string to array and add class if darkMode is string", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: "selector",
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  `,
-        {
-          properties: [
-            {
-              name: "darkMode",
-              value: "class",
-            },
-          ],
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should work with multiple darkMode selectors", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ['variant', [
-    '@media (prefers-color-scheme: dark) { &:not(.light *) }',
-    '&:is(.dark *)',
-  ]],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  `,
-        {
-          properties: [
-            {
-              name: "darkMode",
-              value: "class",
-            },
-          ],
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should not add darkMode property if already in config", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ['class'],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  `,
-        {
-          properties: [
-            {
-              name: "darkMode",
-              value: "class",
-            },
-          ],
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-  const config: Config = {
-  darkMode: ['class', 'selector'],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-  }
-  export default config
-  `,
-        {
-          properties: [
-            {
-              name: "darkMode",
-              value: "class",
-            },
-          ],
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-})
-
-describe("transformTailwindConfig -> plugin", () => {
-  test("should add plugin if not in config", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-}
-export default config
-  `,
-        {
-          plugins: ['require("tailwindcss-animate")'],
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should append plugin to existing array", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [require("@tailwindcss/typography")],
-}
-export default config
-  `,
-        {
-          plugins: ['require("tailwindcss-animate")'],
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should not add plugin if already in config", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
-}
-export default config
-  `,
-        {
-          plugins: ["require('tailwindcss-animate')"],
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-})
-
-describe("transformTailwindConfig -> theme", () => {
-  test("should add theme if not in config", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-  const config: Config = {
-    content: [
-      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-      "./components/**/*.{js,ts,jsx,tsx,mdx}",
-      "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    ],
-  }
-  export default config
-    `,
-        {
-          theme: {
-            extend: {
-              colors: {
-                background: "hsl(var(--background))",
-                foreground: "hsl(var(--foreground))",
-                primary: {
-                  DEFAULT: "hsl(var(--primary))",
-                  foreground: "hsl(var(--primary-foreground))",
-                },
-              },
-            },
-          },
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should merge existing theme", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: [
-          "ui-sans-serif",
-          "sans-serif",
-        ],
-      },
-      colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-      },
-    },
-  },
-}
-export default config
-  `,
-        {
-          theme: {
-            extend: {
-              colors: {
-                primary: {
-                  DEFAULT: "hsl(var(--primary))",
-                  foreground: "hsl(var(--primary-foreground))",
-                },
-                card: {
-                  DEFAULT: "hsl(var(--card))",
-                  foreground: "hsl(var(--card-foreground))",
-                },
-              },
-            },
-          },
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should keep spread assignments", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        ...defaultColors,
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-      },
-    },
-  },
-}
-export default config
-  `,
-        {
-          theme: {
-            extend: {
-              colors: {
-                primary: {
-                  DEFAULT: "hsl(var(--primary))",
-                  foreground: "hsl(var(--primary-foreground))",
-                },
-                card: {
-                  DEFAULT: "hsl(var(--card))",
-                  foreground: "hsl(var(--card-foreground))",
-                },
-              },
-            },
-          },
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should handle multiple properties", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
-        mono: ["var(--font-mono)", ...fontFamily.mono],
-      },
-      colors: {
-        ...defaultColors,
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-      },
-      boxShadow: {
-        ...defaultBoxShadow,
-        "3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
-      },
-      borderRadius: {
-        "3xl": "2rem",
-      },
-      animation: {
-        ...defaultAnimation,
-        "spin-slow": "spin 3s linear infinite",
-      },
-    },
-  },
-}
-export default config
-  `,
-        {
-          theme: {
-            extend: {
-              fontFamily: {
-                heading: ["var(--font-geist-sans)"],
-              },
-              colors: {
-                border: "hsl(var(--border))",
-                input: "hsl(var(--input))",
-                ring: "hsl(var(--ring))",
-                primary: {
-                  DEFAULT: "hsl(var(--primary))",
-                  foreground: "hsl(var(--primary-foreground))",
-                },
-                card: {
-                  DEFAULT: "hsl(var(--card))",
-                  foreground: "hsl(var(--card-foreground))",
-                },
-              },
-              borderRadius: {
-                lg: "var(--radius)",
-                md: "calc(var(--radius) - 2px)",
-                sm: "calc(var(--radius) - 4px)",
-              },
-              animation: {
-                "accordion-down": "accordion-down 0.2s ease-out",
-                "accordion-up": "accordion-up 0.2s ease-out",
-              },
-            },
-          },
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should not make any updates running on already updated config", async () => {
-    const input = `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-content: [
-  "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-  "./components/**/*.{js,ts,jsx,tsx,mdx}",
-  "./app/**/*.{js,ts,jsx,tsx,mdx}",
-],
-theme: {
-  extend: {
-    fontFamily: {
-      sans: ["var(--font-geist-sans)", ...fontFamily.sans],
-      mono: ["var(--font-mono)", ...fontFamily.mono],
-    },
-    colors: {
-      ...defaultColors,
-      background: "hsl(var(--background))",
-      foreground: "hsl(var(--foreground))",
-    },
-    boxShadow: {
-      ...defaultBoxShadow,
-      "3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
-    },
-    borderRadius: {
-      "3xl": "2rem",
-    },
-    animation: {
-      ...defaultAnimation,
-      "spin-slow": "spin 3s linear infinite",
-    },
-  },
-},
-}
-export default config
-`
-
-    const tailwindConfig = {
-      theme: {
-        extend: {
-          fontFamily: {
-            heading: ["var(--font-geist-sans)"],
-          },
-          colors: {
-            border: "hsl(var(--border))",
-            input: "hsl(var(--input))",
-            ring: "hsl(var(--ring))",
-            primary: {
-              DEFAULT: "hsl(var(--primary))",
-              foreground: "hsl(var(--primary-foreground))",
-            },
-            card: {
-              DEFAULT: "hsl(var(--card))",
-              foreground: "hsl(var(--card-foreground))",
-            },
-          },
-          borderRadius: {
-            lg: "var(--radius)",
-            md: "calc(var(--radius) - 2px)",
-            sm: "calc(var(--radius) - 4px)",
-          },
-          animation: {
-            "accordion-down": "accordion-down 0.2s ease-out",
-            "accordion-up": "accordion-up 0.2s ease-out",
-          },
-        },
-      },
-    }
-
-    const output1 = await transformTailwindConfig(input, tailwindConfig, {
-      config: SHARED_CONFIG,
-    })
-
-    const output2 = await transformTailwindConfig(output1, tailwindConfig, {
-      config: SHARED_CONFIG,
-    })
-
-    const output3 = await transformTailwindConfig(output2, tailwindConfig, {
-      config: SHARED_CONFIG,
-    })
-
-    expect(output3).toBe(output1)
-    expect(output3).toBe(output2)
-  })
-
-  test("should keep quotes in strings", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-          sans: ['Figtree', ...defaultTheme.fontFamily.sans],
-      },
-      colors: {
-        ...defaultColors,
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-      },
-    },
-  },
-}
-export default config
-  `,
-        {
-          theme: {
-            extend: {
-              colors: {
-                primary: {
-                  DEFAULT: "hsl(var(--primary))",
-                  foreground: "hsl(var(--primary-foreground))",
-                },
-                card: {
-                  DEFAULT: "hsl(var(--card))",
-                  foreground: "hsl(var(--card-foreground))",
-                },
-              },
-            },
-          },
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should keep arrays when formatted on multilines", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: [
-          'Figtree',
-          ...defaultTheme.fontFamily.sans
-        ],
-      },
-    },
-  },
-}
-export default config
-  `,
-        {
-          theme: {
-            extend: {
-              fontFamily: {
-                mono: ['Foo']
-              }
-            },
-          },
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should handle objects nested in arrays", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      fontSize: {
-        xs: ['0.75rem', { lineHeight: '1rem' }],
-        sm: [
-          '0.875rem',
-          {
-            lineHeight: '1.25rem',
-          },
-        ],
-      },
-    },
-  },
-}
-export default config
-  `,
-        {
-          theme: {
-            extend: {
-              fontSize: {
-                xl: [
-                  'clamp(1.5rem, 1.04vi + 1.17rem, 2rem)',
-                  {
-                    lineHeight: '1.2',
-                    letterSpacing: '-0.02em',
-                    fontWeight: '600',
-                  },
-                ],
-              }
-            },
-          },
-        },
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should preserve boolean values", async () => {
-    expect(
-      await transformTailwindConfig(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    container: {
-      center: true
-    }
-  },
-}
-export default config
-  `,
-        {},
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-})
-
-describe("nestSpreadProperties", () => {
-  let project: Project
-
-  beforeEach(() => {
-    project = new Project({ useInMemoryFileSystem: true })
-  })
-
-  function testTransformation(input: string, expected: string) {
-    const sourceFile = project.createSourceFile(
-      "test.ts",
-      `const config = ${input};`
-    )
-    const configObject = sourceFile.getFirstDescendantByKind(
-      SyntaxKind.ObjectLiteralExpression
-    )
-    if (!configObject) throw new Error("Config object not found")
-
-    nestSpreadProperties(configObject)
-
-    const result = configObject.getText()
-    expect(result.replace(/\s+/g, "")).toBe(expected.replace(/\s+/g, ""))
-  }
-
-  test("should nest spread properties", () => {
-    testTransformation(
-      `{ theme: { ...foo, bar: { ...baz, one: "two" }, other: { a: "b", ...c } } }`,
-      `{ theme: { "___foo": "...foo", bar: { "___baz": "...baz", one: "two" }, other: { a: "b", "___c": "...c" } } }`
-    )
-  })
-
-  test("should handle mixed property assignments", () => {
-    testTransformation(
-      `{ ...foo, a: 1, b() {}, ...bar, c: { ...baz } }`,
-      `{ "___foo": "...foo", a: 1, b() {}, "___bar": "...bar", c: { "___baz": "...baz" } }`
-    )
-  })
-
-  test("should handle objects with only spread properties", () => {
-    testTransformation(
-      `{ ...foo, ...bar, ...baz }`,
-      `{ "___foo": "...foo", "___bar": "...bar", "___baz": "...baz" }`
-    )
-  })
-
-  test("should handle property name conflicts", () => {
-    testTransformation(`{ foo: 1, ...foo }`, `{ foo: 1, "___foo": "...foo" }`)
-  })
-
-  test("should handle shorthand property names", () => {
-    testTransformation(`{ a, ...foo, b }`, `{ a, "___foo": "...foo", b }`)
-  })
-
-  test("should handle computed property names", () => {
-    testTransformation(
-      `{ ["computed"]: 1, ...foo }`,
-      `{ ["computed"]: 1, "___foo": "...foo" }`
-    )
-  })
-
-  test("should handle spreads in arrays", () => {
-    testTransformation(
-      `{ foo: [{ ...bar }] }`,
-      `{ foo: [{ "___bar": "...bar" }] }`
-    )
-  })
-
-  test("should handle deep nesting in arrays", () => {
-    testTransformation(
-      `{ foo: [{ baz: { ...other.baz }, ...bar }] }`,
-      `{ foo: [{ baz: { "___other.baz": "...other.baz" }, "___bar": "...bar" }] }`
-    )
-  })
-})
-
-describe("nestSpreadElements", () => {
-  let project: Project
-
-  beforeEach(() => {
-    project = new Project({ useInMemoryFileSystem: true })
-  })
-
-  function testTransformation(input: string, expected: string) {
-    const sourceFile = project.createSourceFile(
-      "test.ts",
-      `const config = ${input};`
-    )
-    const configObject = sourceFile.getFirstDescendantByKind(
-      SyntaxKind.ArrayLiteralExpression
-    )
-    if (!configObject) throw new Error("Config object not found")
-
-    nestSpreadElements(configObject)
-
-    const result = configObject.getText()
-    expect(result.replace(/\s+/g, "")).toBe(expected.replace(/\s+/g, ""))
-  }
-
-  test("should spread elements", () => {
-    testTransformation(
-      `[...bar]`,
-      `["...bar"]`
-    )
-  })
-
-  test("should handle mixed element types", () => {
-    testTransformation(
-      `['foo', 2, true, ...bar, "baz"]`,
-      `['foo', 2, true, "...bar", "baz"]`
-    )
-  })
-
-  test("should handle arrays with only spread elements", () => {
-    testTransformation(
-      `[...foo, ...foo.bar, ...baz]`,
-      `["...foo", "...foo.bar", "...baz"]`
-    )
-  })
-
-  test("should handle nested arrays with spreads", () => {
-    testTransformation(
-      `[...foo, [...bar]]`,
-      `["...foo", ["...bar"]]`
-    )
-  })
-
-  test("should handle nested arrays within objects", () => {
-    testTransformation(
-      `[{ foo: [...foo] }]`,
-      `[{ foo: ["...foo"] }]`
-    )
-  })
-
-  test("should handle deeply nested arrays within spread objects", () => {
-    testTransformation(
-      `[{ foo: [...foo, { bar: ['bar', ...bar ]}] }]`,
-      `[{ foo: ["...foo", { bar: ['bar', "...bar" ]}] }]`
-    )
-  })
-
-  test("should handle optional paths in spread", () => {
-    testTransformation(
-      `[{ foo: [...foo?.bar] }]`,
-      `[{ foo: ["...foo?.bar"] }]`
-    )
-  })
-
-  test('should handle computed property paths within spread', () => {
-    testTransformation(
-      `[{ foo: [...foo["bar"]] }]`,
-      `[{ foo: ["...foo["bar"]"] }]`
-    )
-  })
-
-  test('should handle indexed paths in spread', () => {
-    testTransformation(
-      `[{ foo: [...foo[0]] }]`,
-      `[{ foo: ["...foo[0]"] }]`
-    )
-  })
-})
-
-describe("unnestSpreadProperties", () => {
-  let project: Project
-
-  beforeEach(() => {
-    project = new Project({ useInMemoryFileSystem: true })
-  })
-
-  function testTransformation(input: string, expected: string) {
-    const sourceFile = project.createSourceFile(
-      "test.ts",
-      `const config = ${input};`
-    )
-    const configObject = sourceFile.getFirstDescendantByKind(
-      SyntaxKind.ObjectLiteralExpression
-    )
-    if (!configObject) throw new Error("Config object not found")
-
-    unnestSpreadProperties(configObject)
-
-    const result = configObject.getText()
-    expect(result.replace(/\s+/g, "")).toBe(expected.replace(/\s+/g, ""))
-  }
-
-  test("should nest spread properties", () => {
-    testTransformation(
-      `{ theme: { ___foo: "...foo", bar: { ___baz: "...baz", one: "two" }, other: { a: "b", ___c: "...c" } } }`,
-      `{ theme: { ...foo, bar: { ...baz, one: "two" }, other: { a: "b", ...c } } }`
-    )
-  })
-
-  test("should handle mixed property assignments", () => {
-    testTransformation(
-      `{ ___foo: "...foo", a: 1, b() {}, ___bar: "...bar", c: { ___baz: "...baz" } }`,
-      `{ ...foo, a: 1, b() {}, ...bar, c: { ...baz } }`
-    )
-  })
-
-  test("should handle objects with only spread properties", () => {
-    testTransformation(
-      `{ ___foo: "...foo", ___bar: "...bar", ___baz: "...baz" }`,
-      `{ ...foo, ...bar, ...baz }`
-    )
-  })
-
-  test("should handle property name conflicts", () => {
-    testTransformation(`{ foo: 1, ___foo: "...foo" }`, `{ foo: 1, ...foo }`)
-  })
-
-  test("should handle shorthand property names", () => {
-    testTransformation(`{ a, ___foo: "...foo", b }`, `{ a, ...foo, b }`)
-  })
-
-  test("should handle computed property names", () => {
-    testTransformation(
-      `{ ["computed"]: 1, "___foo": "...foo" }`,
-      `{ ["computed"]: 1, ...foo }`
-    )
-  })
-
-  test("should handle spread objects within arrays", () => {
-    testTransformation(
-      `{ ["computed"]: 1, foo: [{ "___foo": "...foo" }] }`,
-      `{ ["computed"]: 1, foo: [{...foo}] }`
-    )
-  })
-
-  test("should handle deeply nested spread objects within an array", () => {
-    testTransformation(
-      `{ ["computed"]: 1, foo: [{ "___foo": "...foo", bar: { baz: 'baz', "___foo.bar": "...foo.bar" } }] }`,
-      `{ ["computed"]: 1, foo: [{...foo, bar: { baz: 'baz', ...foo.bar } }] }`
-    )
-  })
-})
-
-describe("unnestSpreadElements", () => {
-  let project: Project
-
-  beforeEach(() => {
-    project = new Project({ useInMemoryFileSystem: true })
-  })
-
-  function testTransformation(input: string, expected: string) {
-    const sourceFile = project.createSourceFile(
-      "test.ts",
-      `const config = ${input};`
-    )
-    const configObject = sourceFile.getFirstDescendantByKind(
-      SyntaxKind.ArrayLiteralExpression
-    )
-    if (!configObject) throw new Error("Config object not found")
-
-    unnsetSpreadElements(configObject)
-
-    const result = configObject.getText()
-    expect(result.replace(/\s+/g, "")).toBe(expected.replace(/\s+/g, ""))
-  }
-
-  test("should spread elements", () => {
-    testTransformation(
-      `["...bar"]`,
-      `[...bar]`,
-    )
-  })
-
-  test("should handle mixed element types", () => {
-    testTransformation(
-      `['foo', 2, true, "...bar", "baz"]`,
-      `['foo', 2, true, ...bar, "baz"]`,
-    )
-  })
-
-  test("should handle arrays with only spread elements", () => {
-    testTransformation(
-      `["...foo", "...foo.bar", "...baz"]`,
-      `[...foo, ...foo.bar, ...baz]`,
-    )
-  })
-
-  test("should handle nested arrays with spreads", () => {
-    testTransformation(
-      `["...foo", ["...bar"]]`,
-      `[...foo, [...bar]]`,
-    )
-  })
-
-  test("should handle nested arrays within objects", () => {
-    testTransformation(
-      `[{ foo: ["...foo"] }]`,
-      `[{ foo: [...foo] }]`,
-    )
-  })
-
-  test("should handle deeply nested arrays within spread objects", () => {
-    testTransformation(
-      `[{ foo: ["...foo", { bar: ['bar', "...bar" ]}] }]`,
-      `[{ foo: [...foo, { bar: ['bar', ...bar ]}] }]`,
-    )
-  })
-
-  test("should handle optional paths in spread", () => {
-    testTransformation(
-      `[{ foo: ["...foo?.bar"] }]`,
-      `[{ foo: [...foo?.bar] }]`,
-
-    )
-  })
-
-  test("should handle computed property paths (') within spread", () => {
-    testTransformation(
-      `[{ foo: ["...foo['bar']"] }]`,
-      `[{ foo: [...foo['bar']] }]`,
-    )
-  })
-
-  test('should handle computed property paths (") within spread', () => {
-    testTransformation(
-      `[{ foo: ['...foo["bar"]'] }]`,
-      `[{ foo: [...foo["bar"]] }]`,
-    )
-  })
-
-  test('should handle indexed paths in spread', () => {
-    testTransformation(
-      `[{ foo: ["...foo[0]"] }]`,
-      `[{ foo: [...foo[0]] }]`,
-    )
-  })
-})
-
-describe("buildTailwindThemeColorsFromCssVars", () => {
-  test("should inline color names", () => {
-    expect(
-      buildTailwindThemeColorsFromCssVars({
-        primary: "blue",
-        "primary-light": "skyblue",
-        "primary-dark": "navy",
-        secondary: "green",
-        accent: "orange",
-        "accent-hover": "darkorange",
-        "accent-active": "orangered",
-      })
-    ).toEqual({
-      primary: {
-        DEFAULT: "hsl(var(--primary))",
-        light: "hsl(var(--primary-light))",
-        dark: "hsl(var(--primary-dark))",
-      },
-      secondary: "hsl(var(--secondary))",
-      accent: {
-        DEFAULT: "hsl(var(--accent))",
-        hover: "hsl(var(--accent-hover))",
-        active: "hsl(var(--accent-active))",
-      },
-    })
-  })
-
-  test("should not add a DEFAULT if not present", () => {
-    expect(
-      buildTailwindThemeColorsFromCssVars({
-        "primary-light": "skyblue",
-        "primary-dark": "navy",
-        secondary: "green",
-        accent: "orange",
-        "accent-hover": "darkorange",
-        "accent-active": "orangered",
-      })
-    ).toEqual({
-      primary: {
-        light: "hsl(var(--primary-light))",
-        dark: "hsl(var(--primary-dark))",
-      },
-      secondary: "hsl(var(--secondary))",
-      accent: {
-        DEFAULT: "hsl(var(--accent))",
-        hover: "hsl(var(--accent-hover))",
-        active: "hsl(var(--accent-active))",
-      },
-    })
-  })
-
-  test("should build tailwind theme colors from css vars", () => {
-    expect(
-      buildTailwindThemeColorsFromCssVars({
-        background: "0 0% 100%",
-        foreground: "224 71.4% 4.1%",
-        card: "0 0% 100%",
-        "card-foreground": "224 71.4% 4.1%",
-        popover: "0 0% 100%",
-        "popover-foreground": "224 71.4% 4.1%",
-        primary: "220.9 39.3% 11%",
-        "primary-foreground": "210 20% 98%",
-        secondary: "220 14.3% 95.9%",
-        "secondary-foreground": "220.9 39.3% 11%",
-        muted: "220 14.3% 95.9%",
-        "muted-foreground": "220 8.9% 46.1%",
-        accent: "220 14.3% 95.9%",
-        "accent-foreground": "220.9 39.3% 11%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "210 20% 98%",
-        border: "220 13% 91%",
-        input: "220 13% 91%",
-        ring: "224 71.4% 4.1%",
-      })
-    ).toEqual({
-      border: "hsl(var(--border))",
-      input: "hsl(var(--input))",
-      ring: "hsl(var(--ring))",
-      background: "hsl(var(--background))",
-      foreground: "hsl(var(--foreground))",
-      primary: {
-        DEFAULT: "hsl(var(--primary))",
-        foreground: "hsl(var(--primary-foreground))",
-      },
-      secondary: {
-        DEFAULT: "hsl(var(--secondary))",
-        foreground: "hsl(var(--secondary-foreground))",
-      },
-      destructive: {
-        DEFAULT: "hsl(var(--destructive))",
-        foreground: "hsl(var(--destructive-foreground))",
-      },
-      muted: {
-        DEFAULT: "hsl(var(--muted))",
-        foreground: "hsl(var(--muted-foreground))",
-      },
-      accent: {
-        DEFAULT: "hsl(var(--accent))",
-        foreground: "hsl(var(--accent-foreground))",
-      },
-      popover: {
-        DEFAULT: "hsl(var(--popover))",
-        foreground: "hsl(var(--popover-foreground))",
-      },
-      card: {
-        DEFAULT: "hsl(var(--card))",
-        foreground: "hsl(var(--card-foreground))",
-      },
-    })
-  })
-})
diff --git a/packages/nyxb/test/utils/updaters/update-tailwind-content.test.ts b/packages/nyxb/test/utils/updaters/update-tailwind-content.test.ts
deleted file mode 100644
index b3eaf9b9..00000000
--- a/packages/nyxb/test/utils/updaters/update-tailwind-content.test.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { describe, expect, test } from "vitest"
-
-import { transformTailwindContent } from "../../../src/utils/updaters/update-tailwind-content"
-
-const SHARED_CONFIG = {
-  $schema: "https://nyxbui.design/schema.json",
-  style: "miami",
-  rsc: true,
-  tsx: true,
-  tailwind: {
-    config: "tailwind.config.ts",
-    css: "app/globals.css",
-    baseColor: "slate",
-    cssVariables: true,
-  },
-  aliases: {
-    components: "~/components",
-    utils: "~/lib/utils",
-  },
-  resolvedPaths: {
-    cwd: ".",
-    tailwindConfig: "tailwind.config.ts",
-    tailwindCss: "app/globals.css",
-    components: "./components",
-    utils: "./lib/utils",
-    ui: "./components/ui",
-  },
-}
-
-describe("transformTailwindContent -> content property", () => {
-  test("should add content property if not in config", async () => {
-    expect(
-      await transformTailwindContent(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  `,
-        ["./foo/**/*.{js,ts,jsx,tsx,mdx}", "./bar/**/*.{js,ts,jsx,tsx,mdx}"],
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-
-  test("should NOT add content property if already in config", async () => {
-    expect(
-      await transformTailwindContent(
-        `import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-}
-export default config
-  `,
-        ["./app/**/*.{js,ts,jsx,tsx,mdx}", "./bar/**/*.{js,ts,jsx,tsx,mdx}"],
-        {
-          config: SHARED_CONFIG,
-        }
-      )
-    ).toMatchSnapshot()
-  })
-})
diff --git a/packages/nyxb/tsconfig.json b/packages/nyxb/tsconfig.json
index c1bd9c0e..ec985be3 100644
--- a/packages/nyxb/tsconfig.json
+++ b/packages/nyxb/tsconfig.json
@@ -1,14 +1,14 @@
 {
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./*"]
-    },
-    "resolveJsonModule": true,
-    "isolatedModules": false
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules", "test/fixtures"]
+   "$schema": "https://json.schemastore.org/tsconfig",
+   "extends": "../../tsconfig.json",
+   "compilerOptions": {
+      "isolatedModules": false,
+      "resolveJsonModule": true,
+      "baseUrl": ".",
+      "paths": {
+         "~/*": ["./*"]
+      }
+   },
+   "include": ["src/**/*.ts"],
+   "exclude": ["node_modules", "test/fixtures"]
 }
diff --git a/packages/nyxb/tsup.config.ts b/packages/nyxb/tsup.config.ts
index aa92a365..3e71e224 100644
--- a/packages/nyxb/tsup.config.ts
+++ b/packages/nyxb/tsup.config.ts
@@ -1,12 +1,13 @@
-import { defineConfig } from 'tsup'
+import { defineConfig } from "tsup"
 
 export default defineConfig({
    clean: true,
    dts: true,
-   entry: ['src/index.ts'],
-   format: ['esm'],
+   entry: ["src/index.ts", "src/registry/index.ts"],
+   format: ["esm"],
    sourcemap: true,
    minify: true,
-   target: 'esnext',
-   outDir: 'dist',
+   target: "esnext",
+   outDir: "dist",
+   treeshake: true,
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 48b539a4..b0394424 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,22 +4,20 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+overrides:
+  react-smooth: ^4.0.1
+  react-transition-group: ^4.4.5
+
 importers:
 
   .:
     dependencies:
-      '@eslint-react/eslint-plugin':
-        specifier: ^1.5.12
-        version: 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@nyxb/eslint-config':
-        specifier: ^3.0.8
-        version: 3.0.8(@eslint-react/eslint-plugin@1.5.15(eslint@9.2.0)(typescript@5.4.5))(@vue/compiler-sfc@3.4.29)(eslint-plugin-format@0.1.2(eslint@9.2.0))(eslint-plugin-react-hooks@5.1.0-rc-3f1436cca1-20240516(eslint@9.2.0))(eslint-plugin-react-refresh@0.4.7(eslint@9.2.0))(eslint-plugin-tailwindcss@3.17.4(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5))))(eslint@9.2.0)(typescript@5.4.5)(vitest@2.1.2(@types/node@20.11.24)(terser@5.31.1))
       '@types/cli-progress':
         specifier: ^3.11.5
-        version: 3.11.5
+        version: 3.11.6
       autoprefixer:
         specifier: ^10.4.19
-        version: 10.4.19(postcss@8.4.38)
+        version: 10.4.20(postcss@8.5.1)
       cli-progress:
         specifier: ^3.12.0
         version: 3.12.0
@@ -29,24 +27,9 @@ importers:
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
-      eslint:
-        specifier: 9.2.0
-        version: 9.2.0
-      eslint-plugin-format:
-        specifier: ^0.1.1
-        version: 0.1.2(eslint@9.2.0)
-      eslint-plugin-react-hooks:
-        specifier: 5.1.0-rc-3f1436cca1-20240516
-        version: 5.1.0-rc-3f1436cca1-20240516(eslint@9.2.0)
-      eslint-plugin-react-refresh:
-        specifier: ^0.4.7
-        version: 0.4.7(eslint@9.2.0)
-      eslint-plugin-tailwindcss:
-        specifier: ^3.17.4
-        version: 3.17.4(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5)))
       postcss:
         specifier: ^8
-        version: 8.4.38
+        version: 8.5.1
       prettier:
         specifier: ^2.8.8
         version: 2.8.8
@@ -55,22 +38,22 @@ importers:
         version: 4.0.0(prettier@2.8.8)
       puppeteer:
         specifier: ^23.9.0
-        version: 23.9.0(typescript@5.4.5)
+        version: 23.11.1(typescript@5.7.3)
       scroll-into-view-if-needed:
         specifier: ^3.1.0
         version: 3.1.0
       tailwindcss:
         specifier: ^3.4.1
-        version: 3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5))
+        version: 3.4.17
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5)))
+        version: 1.0.7(tailwindcss@3.4.17)
       tsx:
         specifier: ^4.15.5
-        version: 4.15.5
+        version: 4.19.2
       turbo:
         specifier: ^2.0.4
-        version: 2.0.4
+        version: 2.4.0
       unified:
         specifier: ^11.0.5
         version: 11.0.5
@@ -79,173 +62,179 @@ importers:
         version: 6.0.3
       vite:
         specifier: ^5.4.1
-        version: 5.4.8(@types/node@20.11.24)(terser@5.31.1)
+        version: 5.4.14(@types/node@20.17.17)(terser@5.37.0)
       vite-tsconfig-paths:
         specifier: ^4.2.0
-        version: 4.3.2(typescript@5.4.5)(vite@5.4.8(@types/node@20.11.24)(terser@5.31.1))
+        version: 4.3.2(typescript@5.7.3)(vite@5.4.14(@types/node@20.17.17)(terser@5.37.0))
       vitest:
         specifier: ^2.0.5
-        version: 2.1.2(@types/node@20.11.24)(terser@5.31.1)
+        version: 2.1.9(@types/node@20.17.17)(terser@5.37.0)
     devDependencies:
+      '@biomejs/biome':
+        specifier: ^1.9.4
+        version: 1.9.4
       '@types/node':
         specifier: ^20
-        version: 20.11.24
+        version: 20.17.17
       '@types/react':
         specifier: ^18
-        version: 18.2.61
+        version: 18.3.18
       '@types/react-dom':
         specifier: ^18
-        version: 18.2.19
+        version: 18.3.5(@types/react@18.3.18)
       dotenv:
         specifier: ^16.4.5
-        version: 16.4.5
+        version: 16.4.7
       postcss-nesting:
         specifier: ^13.0.1
-        version: 13.0.1(postcss@8.4.38)
+        version: 13.0.1(postcss@8.5.1)
       typescript:
         specifier: ^5.4.5
-        version: 5.4.5
+        version: 5.7.3
 
   apps/web:
     dependencies:
       '@content-collections/cli':
         specifier: ^0.1.4
-        version: 0.1.5(@content-collections/core@0.7.2(typescript@5.4.5))
+        version: 0.1.6(@content-collections/core@0.7.3(typescript@5.7.3))
       '@content-collections/core':
         specifier: ^0.7.1
-        version: 0.7.2(typescript@5.4.5)
+        version: 0.7.3(typescript@5.7.3)
       '@content-collections/mdx':
         specifier: ^0.1.5
-        version: 0.1.6(@content-collections/core@0.7.2(typescript@5.4.5))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 0.1.6(@content-collections/core@0.7.3(typescript@5.7.3))(acorn@8.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@content-collections/next':
         specifier: ^0.2.2
-        version: 0.2.3(@content-collections/core@0.7.2(typescript@5.4.5))(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+        version: 0.2.4(@content-collections/core@0.7.3(typescript@5.7.3))(next@14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       '@faker-js/faker':
         specifier: ^8.2.0
         version: 8.4.1
       '@headlessui/react':
         specifier: ^2.0.4
-        version: 2.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@heroicons/react':
         specifier: ^2.1.3
-        version: 2.1.3(react@18.3.1)
+        version: 2.2.0(react@18.3.1)
       '@hookform/resolvers':
         specifier: ^3.6.0
-        version: 3.6.0(react-hook-form@7.52.0(react@18.3.1))
+        version: 3.10.0(react-hook-form@7.54.2(react@18.3.1))
       '@motionone/utils':
         specifier: ^10.18.0
         version: 10.18.0
       '@radix-ui/react-accordion':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-alert-dialog':
-        specifier: ^1.0.5
-        version: 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^1.0.4
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-aspect-ratio':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-avatar':
         specifier: ^1.0.4
-        version: 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-checkbox':
         specifier: ^1.0.4
-        version: 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-collapsible':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-context-menu':
         specifier: ^2.1.5
-        version: 2.1.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.2.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dialog':
         specifier: ^1.0.5
-        version: 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.0.6
-        version: 2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-hover-card':
         specifier: ^1.0.7
-        version: 1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-icons':
         specifier: ^1.3.0
-        version: 1.3.0(react@18.3.1)
+        version: 1.3.2(react@18.3.1)
       '@radix-ui/react-label':
         specifier: ^2.0.2
-        version: 2.0.2(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-menubar':
         specifier: ^1.0.4
-        version: 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-navigation-menu':
         specifier: ^1.1.4
-        version: 1.1.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.2.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-popover':
         specifier: ^1.0.7
-        version: 1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-primitive':
         specifier: ^2.0.0
-        version: 2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-progress':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-radio-group':
         specifier: ^1.1.3
-        version: 1.1.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-scroll-area':
         specifier: ^1.0.5
-        version: 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-select':
         specifier: ^2.0.0
-        version: 2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-separator':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slider':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
         specifier: ^1.0.2
-        version: 1.0.2(@types/react@18.2.61)(react@18.3.1)
+        version: 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-switch':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tabs':
         specifier: ^1.0.4
-        version: 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toast':
         specifier: ^1.1.4
-        version: 1.1.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.2.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toggle':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toggle-group':
         specifier: ^1.0.4
-        version: 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
         specifier: ^1.0.7
-        version: 1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.7(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state':
         specifier: ^1.1.0
-        version: 1.1.0(@types/react@18.2.61)(react@18.3.1)
+        version: 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@t3-oss/env-nextjs':
         specifier: ^0.7.1
-        version: 0.7.3(typescript@5.4.5)(zod@3.23.8)
+        version: 0.7.3(typescript@5.7.3)(zod@3.24.1)
       '@tanstack/react-table':
         specifier: ^8.17.3
-        version: 8.17.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 8.20.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@vercel/analytics':
         specifier: ^1.3.1
-        version: 1.3.1(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        version: 1.4.1(next@14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       canvas-confetti:
         specifier: ^1.9.3
         version: 1.9.3
+      change-case:
+        specifier: ^5.4.4
+        version: 5.4.4
       class-variance-authority:
         specifier: ^0.7.0
-        version: 0.7.0
+        version: 0.7.1
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
       cmdk:
         specifier: ^1.0.0
-        version: 1.0.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       cobe:
         specifier: ^0.6.3
         version: 0.6.3
@@ -257,45 +246,54 @@ importers:
         version: 2.30.0
       embla-carousel-autoplay:
         specifier: ^8.1.5
-        version: 8.1.5(embla-carousel@8.1.5)
+        version: 8.5.2(embla-carousel@8.5.2)
       embla-carousel-react:
         specifier: ^8.1.5
-        version: 8.1.5(react@18.3.1)
+        version: 8.5.2(react@18.3.1)
       framer-motion:
         specifier: ^10.12.16
         version: 10.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       geist:
         specifier: ^1.3.0
-        version: 1.3.0(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+        version: 1.3.1(next@14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       gsap:
         specifier: ^3.12.5
-        version: 3.12.5
+        version: 3.12.7
       input-otp:
         specifier: ^1.2.4
-        version: 1.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       jotai:
         specifier: ^2.8.3
-        version: 2.8.3(@types/react@18.2.61)(react@18.3.1)
+        version: 2.11.3(@types/react@18.3.18)(react@18.3.1)
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       lodash.template:
         specifier: ^4.5.0
         version: 4.5.0
       lucide-react:
         specifier: ^0.395.0
         version: 0.395.0(react@18.3.1)
+      motion:
+        specifier: ^11.15.0
+        version: 11.18.2(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next:
         specifier: 14.2.4
-        version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-themes:
-        specifier: ^0.3.0
-        version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^0.4.3
+        version: 0.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-view-transitions:
         specifier: ^0.2.0
-        version: 0.2.0(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 0.2.0(next@14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      nyxb:
+        specifier: 2.0.8-canary.1
+        version: link:../../packages/nyxb
       octokit:
         specifier: ^4.0.2
-        version: 4.0.2
+        version: 4.1.0
       react:
-        specifier: ^18.3.1
+        specifier: ^18.2.0
         version: 18.3.1
       react-anime:
         specifier: ^4.1.1
@@ -304,23 +302,23 @@ importers:
         specifier: ^8.10.1
         version: 8.10.1(date-fns@2.30.0)(react@18.3.1)
       react-dom:
-        specifier: ^18.3.1
+        specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
       react-hook-form:
         specifier: ^7.44.2
-        version: 7.52.0(react@18.3.1)
+        version: 7.54.2(react@18.3.1)
       react-icon-cloud:
         specifier: ^4.1.4
-        version: 4.1.4(react@18.3.1)
+        version: 4.1.7(react@18.3.1)
       react-phone-number-input:
         specifier: ^3.3.9
-        version: 3.4.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 3.4.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-resizable-panels:
         specifier: ^0.0.55
         version: 0.0.55(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-spring:
         specifier: ^9.7.3
-        version: 9.7.3(@react-three/fiber@8.16.8(react-dom@18.3.1(react@18.3.1))(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1))(react@18.3.1)(three@0.165.0))(konva@9.3.11)(react-dom@18.3.1(react@18.3.1))(react-konva@18.2.10(konva@9.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1))(react-zdog@1.2.2)(react@18.3.1)(three@0.165.0)(zdog@1.1.3)
+        version: 9.7.5(@react-three/fiber@8.17.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)(three@0.173.0))(konva@9.3.18)(react-dom@18.3.1(react@18.3.1))(react-konva@18.2.10(@types/react@18.3.18)(konva@9.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1))(react-zdog@1.2.2)(react@18.3.1)(three@0.173.0)(zdog@1.1.3)
       react-tweet:
         specifier: ^3.2.1
         version: 3.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -335,53 +333,59 @@ importers:
         version: 1.2.0
       schema-dts:
         specifier: ^1.1.2
-        version: 1.1.2(typescript@5.4.5)
+        version: 1.1.2(typescript@5.7.3)
       sonner:
         specifier: ^1.5.0
-        version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       swr:
         specifier: 2.2.6-beta.3
         version: 2.2.6-beta.3(react@18.3.1)
       tailwind-merge:
         specifier: ^2.3.0
-        version: 2.3.0
+        version: 2.6.0
       ts-morph:
         specifier: ^18.0.0
         version: 18.0.0
       vaul:
         specifier: ^0.9.1
-        version: 0.9.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 0.9.9(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       zod:
         specifier: ^3.20.2
-        version: 3.23.8
+        version: 3.24.1
     devDependencies:
       '@tailwindcss/typography':
         specifier: ^0.5.9
-        version: 0.5.13(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5)))
+        version: 0.5.16(tailwindcss@3.4.17)
       '@types/canvas-confetti':
         specifier: ^1.6.4
-        version: 1.6.4
+        version: 1.9.0
+      '@types/lodash':
+        specifier: ^4.17.7
+        version: 4.17.15
       '@types/lodash.template':
         specifier: ^4.5.1
         version: 4.5.3
       '@types/node':
         specifier: ^20
-        version: 20.11.24
+        version: 20.17.17
       '@types/react':
-        specifier: ^18
-        version: 18.2.61
+        specifier: ^18.2.65
+        version: 18.3.18
+      '@types/react-color':
+        specifier: ^3.0.6
+        version: 3.0.13(@types/react@18.3.18)
       '@types/react-dom':
-        specifier: ^18
-        version: 18.2.19
+        specifier: ^18.2.22
+        version: 18.3.5(@types/react@18.3.18)
       '@types/unist':
         specifier: ^3.0.2
-        version: 3.0.2
+        version: 3.0.3
       mdast-util-toc:
         specifier: ^6.1.1
         version: 6.1.1
       postcss:
         specifier: ^8
-        version: 8.4.38
+        version: 8.5.1
       rehype:
         specifier: ^13.0.1
         version: 13.0.2
@@ -390,7 +394,7 @@ importers:
         version: 7.1.0
       rehype-pretty-code:
         specifier: ^0.13.2
-        version: 0.13.2(shiki@1.21.1)
+        version: 0.13.2(shiki@1.20.0)
       rehype-slug:
         specifier: 6.0.0
         version: 6.0.0
@@ -404,17 +408,17 @@ importers:
         specifier: ^4.1.3
         version: 4.4.1
       shiki:
-        specifier: ^1.21.1
-        version: 1.21.1
+        specifier: 1.20.0
+        version: 1.20.0
       tailwindcss:
         specifier: ^3.4.1
-        version: 3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5))
+        version: 3.4.17
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5)))
+        version: 1.0.7(tailwindcss@3.4.17)
       typescript:
-        specifier: ^5
-        version: 5.4.5
+        specifier: ^5.5.3
+        version: 5.7.3
       unist-builder:
         specifier: 4.0.0
         version: 4.0.0
@@ -426,13 +430,13 @@ importers:
     dependencies:
       '@babel/core':
         specifier: ^7.22.1
-        version: 7.24.7
+        version: 7.26.7
       '@babel/parser':
         specifier: ^7.22.6
-        version: 7.24.7
+        version: 7.26.7
       '@babel/plugin-transform-typescript':
         specifier: ^7.22.5
-        version: 7.24.7(@babel/core@7.24.7)
+        version: 7.26.7(@babel/core@7.26.7)
       '@nyxb/nyxi':
         specifier: ^1.0.0
         version: 1.0.0
@@ -456,37 +460,34 @@ importers:
         version: 7.2.0
       fast-glob:
         specifier: ^3.3.2
-        version: 3.3.2
+        version: 3.3.3
       fs-extra:
         specifier: ^11.1.0
-        version: 11.2.0
+        version: 11.3.0
       giget:
-        specifier: ^1.2.3
-        version: 1.2.3
+        specifier: ^1.2.4
+        version: 1.2.4
       https-proxy-agent:
         specifier: ^6.2.0
         version: 6.2.1
       kleur:
         specifier: ^4.1.5
         version: 4.1.5
-      lodash.template:
-        specifier: ^4.5.0
-        version: 4.5.0
       node-fetch:
         specifier: ^3.3.0
         version: 3.3.2
       nypm:
-        specifier: ^0.3.9
-        version: 0.3.9
+        specifier: ^0.5.2
+        version: 0.5.2
       ora:
         specifier: ^6.1.2
         version: 6.3.1
       pathe:
-        specifier: ^1.1.2
-        version: 1.1.2
+        specifier: ^2.0.2
+        version: 2.0.2
       postcss:
         specifier: ^8.4.24
-        version: 8.4.38
+        version: 8.5.1
       prompts:
         specifier: ^2.4.2
         version: 2.4.2
@@ -504,20 +505,17 @@ importers:
         version: 4.2.0
       zod:
         specifier: ^3.20.2
-        version: 3.23.8
+        version: 3.24.1
     devDependencies:
       '@types/babel__core':
         specifier: ^7.20.1
         version: 7.20.5
       '@types/diff':
         specifier: ^5.0.3
-        version: 5.2.1
+        version: 5.2.3
       '@types/fs-extra':
         specifier: ^11.0.1
         version: 11.0.4
-      '@types/lodash.template':
-        specifier: ^4.5.1
-        version: 4.5.3
       '@types/prompts':
         specifier: ^2.4.2
         version: 2.4.9
@@ -529,7 +527,7 @@ importers:
         version: 6.0.1
       tsup:
         specifier: ^6.6.3
-        version: 6.7.0(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.11.24)(typescript@4.9.5))(typescript@4.9.5)
+        version: 6.7.0(postcss@8.5.1)(typescript@4.9.5)
       type-fest:
         specifier: ^3.8.0
         version: 3.13.1
@@ -537,94 +535,8 @@ importers:
         specifier: ^4.9.3
         version: 4.9.5
 
-  templates/next-template:
-    dependencies:
-      '@radix-ui/react-slot':
-        specifier: ^1.0.2
-        version: 1.1.0(@types/react@18.3.3)(react@18.3.1)
-      class-variance-authority:
-        specifier: ^0.7.0
-        version: 0.7.0
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
-      lucide-react:
-        specifier: 0.288.0
-        version: 0.288.0(react@18.3.1)
-      next:
-        specifier: 14.1.3
-        version: 14.1.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      next-themes:
-        specifier: ^0.2.1
-        version: 0.2.1(next@14.1.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react:
-        specifier: ^18.2.0
-        version: 18.3.1
-      react-dom:
-        specifier: ^18.2.0
-        version: 18.3.1(react@18.3.1)
-      sharp:
-        specifier: ^0.31.3
-        version: 0.31.3
-      tailwind-merge:
-        specifier: ^1.13.2
-        version: 1.14.0
-      tailwindcss-animate:
-        specifier: ^1.0.6
-        version: 1.0.7(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@17.0.45)(typescript@5.4.5)))
-    devDependencies:
-      '@eslint-react/eslint-plugin':
-        specifier: ^1.5.12
-        version: 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@ianvs/prettier-plugin-sort-imports':
-        specifier: ^3.7.2
-        version: 3.7.2(@vue/compiler-sfc@3.4.29)(prettier@3.3.2)
-      '@nyxb/eslint-config':
-        specifier: ^3.0.1
-        version: 3.0.1(@eslint-react/eslint-plugin@1.5.15(eslint@9.2.0)(typescript@5.4.5))(@vue/compiler-sfc@3.4.29)(eslint-plugin-format@0.1.2(eslint@9.2.0))(eslint-plugin-react-hooks@5.1.0-rc-3f1436cca1-20240516(eslint@9.2.0))(eslint-plugin-react-refresh@0.4.7(eslint@9.2.0))(eslint@9.2.0)(typescript@5.4.5)(vitest@2.1.2(@types/node@17.0.45)(terser@5.31.1))
-      '@types/node':
-        specifier: ^17.0.45
-        version: 17.0.45
-      '@types/react':
-        specifier: ^18.2.67
-        version: 18.3.3
-      '@types/react-dom':
-        specifier: ^18.2.22
-        version: 18.3.0
-      '@typescript-eslint/parser':
-        specifier: ^5.61.0
-        version: 5.62.0(eslint@9.2.0)(typescript@5.4.5)
-      autoprefixer:
-        specifier: ^10.4.14
-        version: 10.4.19(postcss@8.4.38)
-      eslint:
-        specifier: 9.2.0
-        version: 9.2.0
-      eslint-plugin-format:
-        specifier: ^0.1.1
-        version: 0.1.2(eslint@9.2.0)
-      eslint-plugin-react-hooks:
-        specifier: 5.1.0-rc-3f1436cca1-20240516
-        version: 5.1.0-rc-3f1436cca1-20240516(eslint@9.2.0)
-      eslint-plugin-react-refresh:
-        specifier: ^0.4.7
-        version: 0.4.7(eslint@9.2.0)
-      postcss:
-        specifier: ^8.4.24
-        version: 8.4.38
-      tailwindcss:
-        specifier: ^3.4.0
-        version: 3.4.1(ts-node@10.9.1(@types/node@17.0.45)(typescript@5.4.5))
-      typescript:
-        specifier: ^5.4.2
-        version: 5.4.5
-
 packages:
 
-  '@aashutoshrathi/word-wrap@1.2.6':
-    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
-    engines: {node: '>=0.10.0'}
-
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -633,236 +545,143 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@antfu/install-pkg@0.3.3':
-    resolution: {integrity: sha512-nHHsk3NXQ6xkCfiRRC8Nfrg8pU5kkr3P3Y9s9dKqiuRmBD0Yap7fymNDjGFKeWhZQHqqbCS5CfeMy9wtExM24w==}
-
-  '@babel/code-frame@7.22.13':
-    resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/code-frame@7.24.7':
-    resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/compat-data@7.24.7':
-    resolution: {integrity: sha512-qJzAIcv03PyaWqxRgO4mSU3lihncDT296vnyuE2O8uA4w3UHWI4S3hgeZd1L8W1Bft40w9JxJ2b412iDUFFRhw==}
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.24.7':
-    resolution: {integrity: sha512-nykK+LEK86ahTkX/3TgauT0ikKoNCfKHEaZYTUVupJdTLzGNvrblu4u6fa7DhZONAltdf8e662t/abY8idrd/g==}
+  '@babel/compat-data@7.26.5':
+    resolution: {integrity: sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.24.7':
-    resolution: {integrity: sha512-oipXieGC3i45Y1A41t4tAqpnEZWgB/lC6Ehh6+rOviR5XWpTtMmLN+fGjz9vOiNRt0p6RtO6DtD0pdU3vpqdSA==}
+  '@babel/core@7.26.7':
+    resolution: {integrity: sha512-SRijHmF0PSPgLIBYlWnG0hyeJLwXE2CgpsXaMOrtt2yp9/86ALw6oUlj9KYuZ0JN07T4eBMVIW4li/9S1j2BGA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-annotate-as-pure@7.24.7':
-    resolution: {integrity: sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==}
+  '@babel/generator@7.26.5':
+    resolution: {integrity: sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-builder-binary-assignment-operator-visitor@7.24.7':
-    resolution: {integrity: sha512-xZeCVVdwb4MsDBkkyZ64tReWYrLRHlMN72vP7Bdm3OUOuyFZExhsHUUnuWnm2/XOlAJzR0LfPpB56WXZn0X/lA==}
+  '@babel/helper-annotate-as-pure@7.25.9':
+    resolution: {integrity: sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.24.7':
-    resolution: {integrity: sha512-ctSdRHBi20qWOfy27RUb4Fhp07KSJ3sXcuSvTrXrc4aG8NSYDo1ici3Vhg9bg69y5bj0Mr1lh0aeEgTvc12rMg==}
+  '@babel/helper-compilation-targets@7.26.5':
+    resolution: {integrity: sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-create-class-features-plugin@7.24.7':
-    resolution: {integrity: sha512-kTkaDl7c9vO80zeX1rJxnuRpEsD5tA81yh11X1gQo+PhSti3JS+7qeZo9U4RHobKRiFPKaGK3svUAeb8D0Q7eg==}
+  '@babel/helper-create-class-features-plugin@7.25.9':
+    resolution: {integrity: sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-create-regexp-features-plugin@7.24.7':
-    resolution: {integrity: sha512-03TCmXy2FtXJEZfbXDTSqq1fRJArk7lX9DOFC/47VthYcxyIOx+eXQmdo6DOQvrbpIix+KfXwvuXdFDZHxt+rA==}
+  '@babel/helper-create-regexp-features-plugin@7.26.3':
+    resolution: {integrity: sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-define-polyfill-provider@0.6.2':
-    resolution: {integrity: sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==}
+  '@babel/helper-define-polyfill-provider@0.6.3':
+    resolution: {integrity: sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
-  '@babel/helper-environment-visitor@7.24.7':
-    resolution: {integrity: sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-function-name@7.24.7':
-    resolution: {integrity: sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-hoist-variables@7.24.7':
-    resolution: {integrity: sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-member-expression-to-functions@7.24.7':
-    resolution: {integrity: sha512-LGeMaf5JN4hAT471eJdBs/GK1DoYIJ5GCtZN/EsL6KUiiDZOvO/eKE11AMZJa2zP4zk4qe9V2O/hxAmkRc8p6w==}
+  '@babel/helper-member-expression-to-functions@7.25.9':
+    resolution: {integrity: sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.24.7':
-    resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
+  '@babel/helper-module-imports@7.25.9':
+    resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-transforms@7.24.7':
-    resolution: {integrity: sha512-1fuJEwIrp+97rM4RWdO+qrRsZlAeL1lQJoPqtCYWv0NL115XM93hIH4CSRln2w52SqvmY5hqdtauB6QFCDiZNQ==}
+  '@babel/helper-module-transforms@7.26.0':
+    resolution: {integrity: sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-optimise-call-expression@7.24.7':
-    resolution: {integrity: sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==}
+  '@babel/helper-optimise-call-expression@7.25.9':
+    resolution: {integrity: sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-plugin-utils@7.24.7':
-    resolution: {integrity: sha512-Rq76wjt7yz9AAc1KnlRKNAi/dMSVWgDRx43FHoJEbcYU6xOWaE2dVPwcdTukJrjxS65GITyfbvEYHvkirZ6uEg==}
+  '@babel/helper-plugin-utils@7.26.5':
+    resolution: {integrity: sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-remap-async-to-generator@7.24.7':
-    resolution: {integrity: sha512-9pKLcTlZ92hNZMQfGCHImUpDOlAgkkpqalWEeftW5FBya75k8Li2ilerxkM/uBEj01iBZXcCIB/bwvDYgWyibA==}
+  '@babel/helper-remap-async-to-generator@7.25.9':
+    resolution: {integrity: sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-replace-supers@7.24.7':
-    resolution: {integrity: sha512-qTAxxBM81VEyoAY0TtLrx1oAEJc09ZK67Q9ljQToqCnA+55eNwCORaxlKyu+rNfX86o8OXRUSNUnrtsAZXM9sg==}
+  '@babel/helper-replace-supers@7.26.5':
+    resolution: {integrity: sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-simple-access@7.24.7':
-    resolution: {integrity: sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-skip-transparent-expression-wrappers@7.24.7':
-    resolution: {integrity: sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-split-export-declaration@7.24.7':
-    resolution: {integrity: sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-string-parser@7.22.5':
-    resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-string-parser@7.24.7':
-    resolution: {integrity: sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.24.7':
-    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
+    resolution: {integrity: sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-option@7.24.7':
-    resolution: {integrity: sha512-yy1/KvjhV/ZCL+SM7hBrvnZJ3ZuT9OuZgIJAGpPEToANvc3iM6iDvBnRjtElWibHU6n8/LPR/EjX9EtIEYO3pw==}
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-wrap-function@7.24.7':
-    resolution: {integrity: sha512-N9JIYk3TD+1vq/wn77YnJOqMtfWhNewNE+DJV4puD2X7Ew9J4JvrzrFDfTfyv5EgEXVy9/Wt8QiOErzEmv5Ifw==}
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.24.7':
-    resolution: {integrity: sha512-NlmJJtvcw72yRJRcnCmGvSi+3jDEg8qFu3z0AFoymmzLx5ERVWyzd9kVXr7Th9/8yIJi2Zc6av4Tqz3wFs8QWg==}
+  '@babel/helper-validator-option@7.25.9':
+    resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/highlight@7.22.20':
-    resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
+  '@babel/helper-wrap-function@7.25.9':
+    resolution: {integrity: sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/highlight@7.24.7':
-    resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
+  '@babel/helpers@7.26.7':
+    resolution: {integrity: sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.24.7':
-    resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==}
+  '@babel/parser@7.26.7':
+    resolution: {integrity: sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.7':
-    resolution: {integrity: sha512-TiT1ss81W80eQsN+722OaeQMY/G4yTb4G9JrqeiDADs3N8lbPMGldWi9x8tyqCW5NLx1Jh2AvkE6r6QvEltMMQ==}
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9':
+    resolution: {integrity: sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.7':
-    resolution: {integrity: sha512-unaQgZ/iRu/By6tsjMZzpeBZjChYfLYry6HrEXPoz3KmfF0sVBQ1l8zKMQ4xRGLWVsjuvB8nQfjNP/DcfEOCsg==}
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.25.9':
+    resolution: {integrity: sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.7':
-    resolution: {integrity: sha512-+izXIbke1T33mY4MSNnrqhPXDz01WYhEf3yF5NbnUtkiNnm+XBZJl3kNfoK6NKmYlz/D07+l2GWVK/QfDkNCuQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.13.0
-
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.7':
-    resolution: {integrity: sha512-utA4HuR6F4Vvcr+o4DnjL8fCOlgRFGbeeBEGNg3ZTrLFw6VWG5XmUrvcQ0FjIYMU2ST4XcR2Wsp7t9qOAPnxMg==}
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.25.9':
+    resolution: {integrity: sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-proposal-async-generator-functions@7.20.7':
-    resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==}
-    engines: {node: '>=6.9.0'}
-    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-proposal-class-properties@7.18.6':
-    resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==}
-    engines: {node: '>=6.9.0'}
-    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-proposal-export-default-from@7.24.7':
-    resolution: {integrity: sha512-CcmFwUJ3tKhLjPdt4NP+SHMshebytF8ZTYOv5ZDpkzq2sin80Wb5vJrGt8fhPrORQCfoSa0LAxC/DW+GAC5+Hw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-proposal-logical-assignment-operators@7.20.7':
-    resolution: {integrity: sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==}
-    engines: {node: '>=6.9.0'}
-    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead.
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-proposal-nullish-coalescing-operator@7.18.6':
-    resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==}
-    engines: {node: '>=6.9.0'}
-    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-proposal-numeric-separator@7.18.6':
-    resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==}
-    engines: {node: '>=6.9.0'}
-    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-proposal-object-rest-spread@7.20.7':
-    resolution: {integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==}
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.25.9':
+    resolution: {integrity: sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==}
     engines: {node: '>=6.9.0'}
-    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
     peerDependencies:
-      '@babel/core': ^7.0.0-0
+      '@babel/core': ^7.13.0
 
-  '@babel/plugin-proposal-optional-catch-binding@7.18.6':
-    resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==}
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.25.9':
+    resolution: {integrity: sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==}
     engines: {node: '>=6.9.0'}
-    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
     peerDependencies:
-      '@babel/core': ^7.0.0-0
+      '@babel/core': ^7.0.0
 
-  '@babel/plugin-proposal-optional-chaining@7.21.0':
-    resolution: {integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==}
+  '@babel/plugin-proposal-export-default-from@7.25.9':
+    resolution: {integrity: sha512-ykqgwNfSnNOB+C8fV5X4mG3AVmvu+WVxcaU9xHHtBb7PCrPeweMmPjGsn8eMaeJg6SJuoUuZENeeSWaarWqonQ==}
     engines: {node: '>=6.9.0'}
-    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
@@ -877,6 +696,11 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-syntax-bigint@7.8.3':
+    resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-syntax-class-properties@7.12.13':
     resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
     peerDependencies:
@@ -893,31 +717,26 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-export-default-from@7.24.7':
-    resolution: {integrity: sha512-bTPz4/635WQ9WhwsyPdxUJDVpsi/X9BMmy/8Rf/UAlOO4jSql4CxUCjWI5PiM+jG+c4LVPTScoTw80geFj9+Bw==}
+  '@babel/plugin-syntax-export-default-from@7.25.9':
+    resolution: {integrity: sha512-9MhJ/SMTsVqsd69GyQg89lYR4o9T+oDGv5F6IsigxxqFVOyR/IflDLYP8WDI1l8fkhNGGktqkvL5qwNCtGEpgQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-export-namespace-from@7.8.3':
-    resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-flow@7.24.7':
-    resolution: {integrity: sha512-9G8GYT/dxn/D1IIKOUBmGX0mnmj46mGH9NnZyJLwtCpgh5f7D2VbuKodb+2s9m1Yavh1s7ASQN8lf0eqrb1LTw==}
+  '@babel/plugin-syntax-flow@7.26.0':
+    resolution: {integrity: sha512-B+O2DnPc0iG+YXFqOxv2WNuNU97ToWjOomUQ78DouOENWUaM5sVrmet9mcomUGQFwpJd//gvUagXBSdzO1fRKg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-import-assertions@7.24.7':
-    resolution: {integrity: sha512-Ec3NRUMoi8gskrkBe3fNmEQfxDvY8bgfQpz6jlk/41kX9eUjvpyqWU7PBP/pLAvMaSQjbMNKJmvX57jP+M6bPg==}
+  '@babel/plugin-syntax-import-assertions@7.26.0':
+    resolution: {integrity: sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-import-attributes@7.24.7':
-    resolution: {integrity: sha512-hbX+lKKeUMGihnK8nvKqmXBInriT3GVjzXKFriV3YC6APGxMbP8RZNFwy91+hocLXq90Mta+HshoB31802bb8A==}
+  '@babel/plugin-syntax-import-attributes@7.26.0':
+    resolution: {integrity: sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -932,8 +751,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-jsx@7.24.7':
-    resolution: {integrity: sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==}
+  '@babel/plugin-syntax-jsx@7.25.9':
+    resolution: {integrity: sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -980,8 +799,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-typescript@7.24.7':
-    resolution: {integrity: sha512-c/+fVeJBB0FeKsFvwytYiUD+LBvhHjGSI0g446PRGdSVGZLRNArBUno2PETbAly3tpiNAQR5XaZ+JslxkotsbA==}
+  '@babel/plugin-syntax-typescript@7.25.9':
+    resolution: {integrity: sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -992,344 +811,356 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-transform-arrow-functions@7.24.7':
-    resolution: {integrity: sha512-Dt9LQs6iEY++gXUwY03DNFat5C2NbO48jj+j/bSAz6b3HgPs39qcPiYt77fDObIcFwj3/C2ICX9YMwGflUoSHQ==}
+  '@babel/plugin-transform-arrow-functions@7.25.9':
+    resolution: {integrity: sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-async-generator-functions@7.24.7':
-    resolution: {integrity: sha512-o+iF77e3u7ZS4AoAuJvapz9Fm001PuD2V3Lp6OSE4FYQke+cSewYtnek+THqGRWyQloRCyvWL1OkyfNEl9vr/g==}
+  '@babel/plugin-transform-async-generator-functions@7.25.9':
+    resolution: {integrity: sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-async-to-generator@7.24.7':
-    resolution: {integrity: sha512-SQY01PcJfmQ+4Ash7NE+rpbLFbmqA2GPIgqzxfFTL4t1FKRq4zTms/7htKpoCUI9OcFYgzqfmCdH53s6/jn5fA==}
+  '@babel/plugin-transform-async-to-generator@7.25.9':
+    resolution: {integrity: sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-block-scoped-functions@7.24.7':
-    resolution: {integrity: sha512-yO7RAz6EsVQDaBH18IDJcMB1HnrUn2FJ/Jslc/WtPPWcjhpUJXU/rjbwmluzp7v/ZzWcEhTMXELnnsz8djWDwQ==}
+  '@babel/plugin-transform-block-scoped-functions@7.26.5':
+    resolution: {integrity: sha512-chuTSY+hq09+/f5lMj8ZSYgCFpppV2CbYrhNFJ1BFoXpiWPnnAb7R0MqrafCpN8E1+YRrtM1MXZHJdIx8B6rMQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-block-scoping@7.24.7':
-    resolution: {integrity: sha512-Nd5CvgMbWc+oWzBsuaMcbwjJWAcp5qzrbg69SZdHSP7AMY0AbWFqFO0WTFCA1jxhMCwodRwvRec8k0QUbZk7RQ==}
+  '@babel/plugin-transform-block-scoping@7.25.9':
+    resolution: {integrity: sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-class-properties@7.24.7':
-    resolution: {integrity: sha512-vKbfawVYayKcSeSR5YYzzyXvsDFWU2mD8U5TFeXtbCPLFUqe7GyCgvO6XDHzje862ODrOwy6WCPmKeWHbCFJ4w==}
+  '@babel/plugin-transform-class-properties@7.25.9':
+    resolution: {integrity: sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-class-static-block@7.24.7':
-    resolution: {integrity: sha512-HMXK3WbBPpZQufbMG4B46A90PkuuhN9vBCb5T8+VAHqvAqvcLi+2cKoukcpmUYkszLhScU3l1iudhrks3DggRQ==}
+  '@babel/plugin-transform-class-static-block@7.26.0':
+    resolution: {integrity: sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.12.0
 
-  '@babel/plugin-transform-classes@7.24.7':
-    resolution: {integrity: sha512-CFbbBigp8ln4FU6Bpy6g7sE8B/WmCmzvivzUC6xDAdWVsjYTXijpuuGJmYkAaoWAzcItGKT3IOAbxRItZ5HTjw==}
+  '@babel/plugin-transform-classes@7.25.9':
+    resolution: {integrity: sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-computed-properties@7.24.7':
-    resolution: {integrity: sha512-25cS7v+707Gu6Ds2oY6tCkUwsJ9YIDbggd9+cu9jzzDgiNq7hR/8dkzxWfKWnTic26vsI3EsCXNd4iEB6e8esQ==}
+  '@babel/plugin-transform-computed-properties@7.25.9':
+    resolution: {integrity: sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-destructuring@7.24.7':
-    resolution: {integrity: sha512-19eJO/8kdCQ9zISOf+SEUJM/bAUIsvY3YDnXZTupUCQ8LgrWnsG/gFB9dvXqdXnRXMAM8fvt7b0CBKQHNGy1mw==}
+  '@babel/plugin-transform-destructuring@7.25.9':
+    resolution: {integrity: sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-dotall-regex@7.24.7':
-    resolution: {integrity: sha512-ZOA3W+1RRTSWvyqcMJDLqbchh7U4NRGqwRfFSVbOLS/ePIP4vHB5e8T8eXcuqyN1QkgKyj5wuW0lcS85v4CrSw==}
+  '@babel/plugin-transform-dotall-regex@7.25.9':
+    resolution: {integrity: sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-duplicate-keys@7.24.7':
-    resolution: {integrity: sha512-JdYfXyCRihAe46jUIliuL2/s0x0wObgwwiGxw/UbgJBr20gQBThrokO4nYKgWkD7uBaqM7+9x5TU7NkExZJyzw==}
+  '@babel/plugin-transform-duplicate-keys@7.25.9':
+    resolution: {integrity: sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-dynamic-import@7.24.7':
-    resolution: {integrity: sha512-sc3X26PhZQDb3JhORmakcbvkeInvxz+A8oda99lj7J60QRuPZvNAk9wQlTBS1ZynelDrDmTU4pw1tyc5d5ZMUg==}
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.25.9':
+    resolution: {integrity: sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-dynamic-import@7.25.9':
+    resolution: {integrity: sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-exponentiation-operator@7.24.7':
-    resolution: {integrity: sha512-Rqe/vSc9OYgDajNIK35u7ot+KeCoetqQYFXM4Epf7M7ez3lWlOjrDjrwMei6caCVhfdw+mIKD4cgdGNy5JQotQ==}
+  '@babel/plugin-transform-exponentiation-operator@7.26.3':
+    resolution: {integrity: sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-export-namespace-from@7.24.7':
-    resolution: {integrity: sha512-v0K9uNYsPL3oXZ/7F9NNIbAj2jv1whUEtyA6aujhekLs56R++JDQuzRcP2/z4WX5Vg/c5lE9uWZA0/iUoFhLTA==}
+  '@babel/plugin-transform-export-namespace-from@7.25.9':
+    resolution: {integrity: sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-flow-strip-types@7.24.7':
-    resolution: {integrity: sha512-cjRKJ7FobOH2eakx7Ja+KpJRj8+y+/SiB3ooYm/n2UJfxu0oEaOoxOinitkJcPqv9KxS0kxTGPUaR7L2XcXDXA==}
+  '@babel/plugin-transform-flow-strip-types@7.26.5':
+    resolution: {integrity: sha512-eGK26RsbIkYUns3Y8qKl362juDDYK+wEdPGHGrhzUl6CewZFo55VZ7hg+CyMFU4dd5QQakBN86nBMpRsFpRvbQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-for-of@7.24.7':
-    resolution: {integrity: sha512-wo9ogrDG1ITTTBsy46oGiN1dS9A7MROBTcYsfS8DtsImMkHk9JXJ3EWQM6X2SUw4x80uGPlwj0o00Uoc6nEE3g==}
+  '@babel/plugin-transform-for-of@7.25.9':
+    resolution: {integrity: sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-function-name@7.24.7':
-    resolution: {integrity: sha512-U9FcnA821YoILngSmYkW6FjyQe2TyZD5pHt4EVIhmcTkrJw/3KqcrRSxuOo5tFZJi7TE19iDyI1u+weTI7bn2w==}
+  '@babel/plugin-transform-function-name@7.25.9':
+    resolution: {integrity: sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-json-strings@7.24.7':
-    resolution: {integrity: sha512-2yFnBGDvRuxAaE/f0vfBKvtnvvqU8tGpMHqMNpTN2oWMKIR3NqFkjaAgGwawhqK/pIN2T3XdjGPdaG0vDhOBGw==}
+  '@babel/plugin-transform-json-strings@7.25.9':
+    resolution: {integrity: sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-literals@7.24.7':
-    resolution: {integrity: sha512-vcwCbb4HDH+hWi8Pqenwnjy+UiklO4Kt1vfspcQYFhJdpthSnW8XvWGyDZWKNVrVbVViI/S7K9PDJZiUmP2fYQ==}
+  '@babel/plugin-transform-literals@7.25.9':
+    resolution: {integrity: sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-logical-assignment-operators@7.24.7':
-    resolution: {integrity: sha512-4D2tpwlQ1odXmTEIFWy9ELJcZHqrStlzK/dAOWYyxX3zT0iXQB6banjgeOJQXzEc4S0E0a5A+hahxPaEFYftsw==}
+  '@babel/plugin-transform-logical-assignment-operators@7.25.9':
+    resolution: {integrity: sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-member-expression-literals@7.24.7':
-    resolution: {integrity: sha512-T/hRC1uqrzXMKLQ6UCwMT85S3EvqaBXDGf0FaMf4446Qx9vKwlghvee0+uuZcDUCZU5RuNi4781UQ7R308zzBw==}
+  '@babel/plugin-transform-member-expression-literals@7.25.9':
+    resolution: {integrity: sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-amd@7.24.7':
-    resolution: {integrity: sha512-9+pB1qxV3vs/8Hdmz/CulFB8w2tuu6EB94JZFsjdqxQokwGa9Unap7Bo2gGBGIvPmDIVvQrom7r5m/TCDMURhg==}
+  '@babel/plugin-transform-modules-amd@7.25.9':
+    resolution: {integrity: sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-commonjs@7.24.7':
-    resolution: {integrity: sha512-iFI8GDxtevHJ/Z22J5xQpVqFLlMNstcLXh994xifFwxxGslr2ZXXLWgtBeLctOD63UFDArdvN6Tg8RFw+aEmjQ==}
+  '@babel/plugin-transform-modules-commonjs@7.26.3':
+    resolution: {integrity: sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-systemjs@7.24.7':
-    resolution: {integrity: sha512-GYQE0tW7YoaN13qFh3O1NCY4MPkUiAH3fiF7UcV/I3ajmDKEdG3l+UOcbAm4zUE3gnvUU+Eni7XrVKo9eO9auw==}
+  '@babel/plugin-transform-modules-systemjs@7.25.9':
+    resolution: {integrity: sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-umd@7.24.7':
-    resolution: {integrity: sha512-3aytQvqJ/h9z4g8AsKPLvD4Zqi2qT+L3j7XoFFu1XBlZWEl2/1kWnhmAbxpLgPrHSY0M6UA02jyTiwUVtiKR6A==}
+  '@babel/plugin-transform-modules-umd@7.25.9':
+    resolution: {integrity: sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.24.7':
-    resolution: {integrity: sha512-/jr7h/EWeJtk1U/uz2jlsCioHkZk1JJZVcc8oQsJ1dUlaJD83f4/6Zeh2aHt9BIFokHIsSeDfhUmju0+1GPd6g==}
+  '@babel/plugin-transform-named-capturing-groups-regex@7.25.9':
+    resolution: {integrity: sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-transform-new-target@7.24.7':
-    resolution: {integrity: sha512-RNKwfRIXg4Ls/8mMTza5oPF5RkOW8Wy/WgMAp1/F1yZ8mMbtwXW+HDoJiOsagWrAhI5f57Vncrmr9XeT4CVapA==}
+  '@babel/plugin-transform-new-target@7.25.9':
+    resolution: {integrity: sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.24.7':
-    resolution: {integrity: sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==}
+  '@babel/plugin-transform-nullish-coalescing-operator@7.26.6':
+    resolution: {integrity: sha512-CKW8Vu+uUZneQCPtXmSBUC6NCAUdya26hWCElAWh5mVSlSRsmiCPUUDKb3Z0szng1hiAJa098Hkhg9o4SE35Qw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-numeric-separator@7.24.7':
-    resolution: {integrity: sha512-e6q1TiVUzvH9KRvicuxdBTUj4AdKSRwzIyFFnfnezpCfP2/7Qmbb8qbU2j7GODbl4JMkblitCQjKYUaX/qkkwA==}
+  '@babel/plugin-transform-numeric-separator@7.25.9':
+    resolution: {integrity: sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-object-rest-spread@7.24.7':
-    resolution: {integrity: sha512-4QrHAr0aXQCEFni2q4DqKLD31n2DL+RxcwnNjDFkSG0eNQ/xCavnRkfCUjsyqGC2OviNJvZOF/mQqZBw7i2C5Q==}
+  '@babel/plugin-transform-object-rest-spread@7.25.9':
+    resolution: {integrity: sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-object-super@7.24.7':
-    resolution: {integrity: sha512-A/vVLwN6lBrMFmMDmPPz0jnE6ZGx7Jq7d6sT/Ev4H65RER6pZ+kczlf1DthF5N0qaPHBsI7UXiE8Zy66nmAovg==}
+  '@babel/plugin-transform-object-super@7.25.9':
+    resolution: {integrity: sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-optional-catch-binding@7.24.7':
-    resolution: {integrity: sha512-uLEndKqP5BfBbC/5jTwPxLh9kqPWWgzN/f8w6UwAIirAEqiIVJWWY312X72Eub09g5KF9+Zn7+hT7sDxmhRuKA==}
+  '@babel/plugin-transform-optional-catch-binding@7.25.9':
+    resolution: {integrity: sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-optional-chaining@7.24.7':
-    resolution: {integrity: sha512-tK+0N9yd4j+x/4hxF3F0e0fu/VdcxU18y5SevtyM/PCFlQvXbR0Zmlo2eBrKtVipGNFzpq56o8WsIIKcJFUCRQ==}
+  '@babel/plugin-transform-optional-chaining@7.25.9':
+    resolution: {integrity: sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-parameters@7.24.7':
-    resolution: {integrity: sha512-yGWW5Rr+sQOhK0Ot8hjDJuxU3XLRQGflvT4lhlSY0DFvdb3TwKaY26CJzHtYllU0vT9j58hc37ndFPsqT1SrzA==}
+  '@babel/plugin-transform-parameters@7.25.9':
+    resolution: {integrity: sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-private-methods@7.24.7':
-    resolution: {integrity: sha512-COTCOkG2hn4JKGEKBADkA8WNb35TGkkRbI5iT845dB+NyqgO8Hn+ajPbSnIQznneJTa3d30scb6iz/DhH8GsJQ==}
+  '@babel/plugin-transform-private-methods@7.25.9':
+    resolution: {integrity: sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-private-property-in-object@7.24.7':
-    resolution: {integrity: sha512-9z76mxwnwFxMyxZWEgdgECQglF2Q7cFLm0kMf8pGwt+GSJsY0cONKj/UuO4bOH0w/uAel3ekS4ra5CEAyJRmDA==}
+  '@babel/plugin-transform-private-property-in-object@7.25.9':
+    resolution: {integrity: sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-property-literals@7.24.7':
-    resolution: {integrity: sha512-EMi4MLQSHfd2nrCqQEWxFdha2gBCqU4ZcCng4WBGZ5CJL4bBRW0ptdqqDdeirGZcpALazVVNJqRmsO8/+oNCBA==}
+  '@babel/plugin-transform-property-literals@7.25.9':
+    resolution: {integrity: sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-display-name@7.24.7':
-    resolution: {integrity: sha512-H/Snz9PFxKsS1JLI4dJLtnJgCJRoo0AUm3chP6NYr+9En1JMKloheEiLIhlp5MDVznWo+H3AAC1Mc8lmUEpsgg==}
+  '@babel/plugin-transform-react-display-name@7.25.9':
+    resolution: {integrity: sha512-KJfMlYIUxQB1CJfO3e0+h0ZHWOTLCPP115Awhaz8U0Zpq36Gl/cXlpoyMRnUWlhNUBAzldnCiAZNvCDj7CrKxQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx-self@7.24.7':
-    resolution: {integrity: sha512-fOPQYbGSgH0HUp4UJO4sMBFjY6DuWq+2i8rixyUMb3CdGixs/gccURvYOAhajBdKDoGajFr3mUq5rH3phtkGzw==}
+  '@babel/plugin-transform-react-jsx-self@7.25.9':
+    resolution: {integrity: sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx-source@7.24.7':
-    resolution: {integrity: sha512-J2z+MWzZHVOemyLweMqngXrgGC42jQ//R0KdxqkIz/OrbVIIlhFI3WigZ5fO+nwFvBlncr4MGapd8vTyc7RPNQ==}
+  '@babel/plugin-transform-react-jsx-source@7.25.9':
+    resolution: {integrity: sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx@7.24.7':
-    resolution: {integrity: sha512-+Dj06GDZEFRYvclU6k4bme55GKBEWUmByM/eoKuqg4zTNQHiApWRhQph5fxQB2wAEFvRzL1tOEj1RJ19wJrhoA==}
+  '@babel/plugin-transform-react-jsx@7.25.9':
+    resolution: {integrity: sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-regenerator@7.24.7':
-    resolution: {integrity: sha512-lq3fvXPdimDrlg6LWBoqj+r/DEWgONuwjuOuQCSYgRroXDH/IdM1C0IZf59fL5cHLpjEH/O6opIRBbqv7ELnuA==}
+  '@babel/plugin-transform-regenerator@7.25.9':
+    resolution: {integrity: sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-reserved-words@7.24.7':
-    resolution: {integrity: sha512-0DUq0pHcPKbjFZCfTss/pGkYMfy3vFWydkUBd9r0GHpIyfs2eCDENvqadMycRS9wZCXR41wucAfJHJmwA0UmoQ==}
+  '@babel/plugin-transform-regexp-modifiers@7.26.0':
+    resolution: {integrity: sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-reserved-words@7.25.9':
+    resolution: {integrity: sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-runtime@7.24.7':
-    resolution: {integrity: sha512-YqXjrk4C+a1kZjewqt+Mmu2UuV1s07y8kqcUf4qYLnoqemhR4gRQikhdAhSVJioMjVTu6Mo6pAbaypEA3jY6fw==}
+  '@babel/plugin-transform-runtime@7.25.9':
+    resolution: {integrity: sha512-nZp7GlEl+yULJrClz0SwHPqir3lc0zsPrDHQUcxGspSL7AKrexNSEfTbfqnDNJUO13bgKyfuOLMF8Xqtu8j3YQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-shorthand-properties@7.24.7':
-    resolution: {integrity: sha512-KsDsevZMDsigzbA09+vacnLpmPH4aWjcZjXdyFKGzpplxhbeB4wYtury3vglQkg6KM/xEPKt73eCjPPf1PgXBA==}
+  '@babel/plugin-transform-shorthand-properties@7.25.9':
+    resolution: {integrity: sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-spread@7.24.7':
-    resolution: {integrity: sha512-x96oO0I09dgMDxJaANcRyD4ellXFLLiWhuwDxKZX5g2rWP1bTPkBSwCYv96VDXVT1bD9aPj8tppr5ITIh8hBng==}
+  '@babel/plugin-transform-spread@7.25.9':
+    resolution: {integrity: sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-sticky-regex@7.24.7':
-    resolution: {integrity: sha512-kHPSIJc9v24zEml5geKg9Mjx5ULpfncj0wRpYtxbvKyTtHCYDkVE3aHQ03FrpEo4gEe2vrJJS1Y9CJTaThA52g==}
+  '@babel/plugin-transform-sticky-regex@7.25.9':
+    resolution: {integrity: sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-template-literals@7.24.7':
-    resolution: {integrity: sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw==}
+  '@babel/plugin-transform-template-literals@7.25.9':
+    resolution: {integrity: sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-typeof-symbol@7.24.7':
-    resolution: {integrity: sha512-VtR8hDy7YLB7+Pet9IarXjg/zgCMSF+1mNS/EQEiEaUPoFXCVsHG64SIxcaaI2zJgRiv+YmgaQESUfWAdbjzgg==}
+  '@babel/plugin-transform-typeof-symbol@7.26.7':
+    resolution: {integrity: sha512-jfoTXXZTgGg36BmhqT3cAYK5qkmqvJpvNrPhaK/52Vgjhw4Rq29s9UqpWWV0D6yuRmgiFH/BUVlkl96zJWqnaw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-typescript@7.24.7':
-    resolution: {integrity: sha512-iLD3UNkgx2n/HrjBesVbYX6j0yqn/sJktvbtKKgcaLIQ4bTTQ8obAypc1VpyHPD2y4Phh9zHOaAt8e/L14wCpw==}
+  '@babel/plugin-transform-typescript@7.26.7':
+    resolution: {integrity: sha512-5cJurntg+AT+cgelGP9Bt788DKiAw9gIMSMU2NJrLAilnj0m8WZWUNZPSLOmadYsujHutpgElO+50foX+ib/Wg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-escapes@7.24.7':
-    resolution: {integrity: sha512-U3ap1gm5+4edc2Q/P+9VrBNhGkfnf+8ZqppY71Bo/pzZmXhhLdqgaUl6cuB07O1+AQJtCLfaOmswiNbSQ9ivhw==}
+  '@babel/plugin-transform-unicode-escapes@7.25.9':
+    resolution: {integrity: sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-property-regex@7.24.7':
-    resolution: {integrity: sha512-uH2O4OV5M9FZYQrwc7NdVmMxQJOCCzFeYudlZSzUAHRFeOujQefa92E74TQDVskNHCzOXoigEuoyzHDhaEaK5w==}
+  '@babel/plugin-transform-unicode-property-regex@7.25.9':
+    resolution: {integrity: sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-regex@7.24.7':
-    resolution: {integrity: sha512-hlQ96MBZSAXUq7ltkjtu3FJCCSMx/j629ns3hA3pXnBXjanNP0LHi+JpPeA81zaWgVK1VGH95Xuy7u0RyQ8kMg==}
+  '@babel/plugin-transform-unicode-regex@7.25.9':
+    resolution: {integrity: sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-sets-regex@7.24.7':
-    resolution: {integrity: sha512-2G8aAvF4wy1w/AGZkemprdGMRg5o6zPNhbHVImRz3lss55TYCBd6xStN19rt8XJHq20sqV0JbyWjOWwQRwV/wg==}
+  '@babel/plugin-transform-unicode-sets-regex@7.25.9':
+    resolution: {integrity: sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/preset-env@7.24.7':
-    resolution: {integrity: sha512-1YZNsc+y6cTvWlDHidMBsQZrZfEFjRIo/BZCT906PMdzOyXtSLTgqGdrpcuTDCXyd11Am5uQULtDIcCfnTc8fQ==}
+  '@babel/preset-env@7.26.7':
+    resolution: {integrity: sha512-Ycg2tnXwixaXOVb29rana8HNPgLVBof8qqtNQ9LE22IoyZboQbGSxI6ZySMdW3K5nAe6gu35IaJefUJflhUFTQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/preset-flow@7.24.7':
-    resolution: {integrity: sha512-NL3Lo0NorCU607zU3NwRyJbpaB6E3t0xtd3LfAQKDfkeX4/ggcDXvkmkW42QWT5owUeW/jAe4hn+2qvkV1IbfQ==}
+  '@babel/preset-flow@7.25.9':
+    resolution: {integrity: sha512-EASHsAhE+SSlEzJ4bzfusnXSHiU+JfAYzj+jbw2vgQKgq5HrUr8qs+vgtiEL5dOH6sEweI+PNt2D7AqrDSHyqQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1339,48 +1170,86 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
 
-  '@babel/preset-typescript@7.24.7':
-    resolution: {integrity: sha512-SyXRe3OdWwIwalxDg5UtJnJQO+YPcTfwiIY2B0Xlddh9o7jpWLvv8X1RthIeDOxQ+O1ML5BLPCONToObyVQVuQ==}
+  '@babel/preset-typescript@7.26.0':
+    resolution: {integrity: sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/register@7.24.6':
-    resolution: {integrity: sha512-WSuFCc2wCqMeXkz/i3yfAAsxwWflEgbVkZzivgAmXl/MxrXeoYFZOOPllbC8R8WTF7u61wSRQtDVZ1879cdu6w==}
+  '@babel/register@7.25.9':
+    resolution: {integrity: sha512-8D43jXtGsYmEeDvm4MWHYUpWf8iiXgWYx3fW7E7Wb7Oe6FWqJPl5K6TuFW0dOwNZzEE5rjlaSJYH9JjrUKJszA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/regjsgen@0.8.0':
-    resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==}
-
-  '@babel/runtime@7.24.7':
-    resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==}
+  '@babel/runtime@7.26.7':
+    resolution: {integrity: sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.24.7':
-    resolution: {integrity: sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==}
+  '@babel/template@7.25.9':
+    resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.24.7':
-    resolution: {integrity: sha512-yb65Ed5S/QAcewNPh0nZczy9JdYXkkAbIsEo+P7BE7yO3txAY30Y/oPa3QkQ5It3xVG2kpKMg9MsdxZaO31uKA==}
+  '@babel/traverse@7.26.7':
+    resolution: {integrity: sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.23.3':
-    resolution: {integrity: sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==}
+  '@babel/types@7.26.7':
+    resolution: {integrity: sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.24.7':
-    resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==}
-    engines: {node: '>=6.9.0'}
+  '@biomejs/biome@1.9.4':
+    resolution: {integrity: sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==}
+    engines: {node: '>=14.21.3'}
+    hasBin: true
+
+  '@biomejs/cli-darwin-arm64@1.9.4':
+    resolution: {integrity: sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@biomejs/cli-darwin-x64@1.9.4':
+    resolution: {integrity: sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@biomejs/cli-linux-arm64-musl@1.9.4':
+    resolution: {integrity: sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@biomejs/cli-linux-arm64@1.9.4':
+    resolution: {integrity: sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@biomejs/cli-linux-x64-musl@1.9.4':
+    resolution: {integrity: sha512-gEhi/jSBhZ2m6wjV530Yy8+fNqG8PAinM3oV7CyO+6c3CEh16Eizm21uHVsyVBEB6RIM8JHIl6AGYCv6Q6Q9Tg==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+
+  '@biomejs/cli-linux-x64@1.9.4':
+    resolution: {integrity: sha512-lRCJv/Vi3Vlwmbd6K+oQ0KhLHMAysN8lXoCI7XeHlxaajk06u7G+UsFSO01NAs5iYuWKmVZjmiOzJ0OJmGsMwg==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
 
-  '@clack/core@0.3.4':
-    resolution: {integrity: sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==}
+  '@biomejs/cli-win32-arm64@1.9.4':
+    resolution: {integrity: sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [win32]
 
-  '@clack/prompts@0.7.0':
-    resolution: {integrity: sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==}
-    bundledDependencies:
-      - is-unicode-supported
+  '@biomejs/cli-win32-x64@1.9.4':
+    resolution: {integrity: sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [win32]
 
   '@clerc/core@0.44.0':
     resolution: {integrity: sha512-o8RgXNcMRoHRujSw9OPDMxqrmoNk7HG0XAZkjZgOrSyIfRXCf85VLyHGBT3XmaOrPEGY964h02ZxMVFdp8RnNQ==}
@@ -1390,26 +1259,11 @@ packages:
     peerDependencies:
       '@clerc/core': '*'
 
-  '@clerc/plugin-friendly-error@0.44.0':
-    resolution: {integrity: sha512-hbGp+T+fl9Dz+Ln1LGoijbNL7N+RfBqhSRWtT55QdFPs86O7Mi5oqiqIrUS9wDpaHzJGn+ETFPIOUyDRdrD8ag==}
-    peerDependencies:
-      '@clerc/core': '*'
-
   '@clerc/plugin-help@0.44.0':
     resolution: {integrity: sha512-QIH+Lrk6WZtXKNxEAA4gOk7dwseS7U0jTZ0TbJfcyOoNA3fF2p48UV8c7hmKk7OhfPS5009eJRW5CVQEgBB8Ng==}
     peerDependencies:
       '@clerc/core': '*'
 
-  '@clerc/plugin-not-found@0.44.0':
-    resolution: {integrity: sha512-8GIxDv/V2qaKRJKy+jjHAmlCEbTabLYPIeklqY231skiNOYCDQ3wJS3isP7EQgARfhm0otMDRXPPC2aNfSJjRw==}
-    peerDependencies:
-      '@clerc/core': '*'
-
-  '@clerc/plugin-strict-flags@0.44.0':
-    resolution: {integrity: sha512-8ztQrn4pfCj6b/sDN1mU0MVlfSqp3qHohW59v6k6nS3UUnYytJDU5wZQZmQ+7t3DZqjw+Xle6ZzEIWQatAdZ9A==}
-    peerDependencies:
-      '@clerc/core': '*'
-
   '@clerc/plugin-version@0.44.0':
     resolution: {integrity: sha512-YETH54A0sO32oJcLABpb4P5FyhEkhIhe5oe3IXyeUj9/LMcInvKCm6x/gDMIUjTQuh0a5l4iton0A1RscAANhw==}
     peerDependencies:
@@ -1420,14 +1274,14 @@ packages:
     peerDependencies:
       '@clerc/core': '*'
 
-  '@content-collections/cli@0.1.5':
-    resolution: {integrity: sha512-+MJ0EvnBnxtlUk92TM2DSyI3sQW+U/9KCLcpYcxv7fBoIqtVPccyLA2czUSstpN0sW0wMg343a/AW0YjlDKZVQ==}
+  '@content-collections/cli@0.1.6':
+    resolution: {integrity: sha512-1MrxENMhAOAMFoLYNmlyCgwVB3i75PMX9vNLJ+jVh7akSfDrRRDWGn4E4WXDWCs27krSN7o98OJQVNav7Ndapw==}
     hasBin: true
     peerDependencies:
       '@content-collections/core': 0.x
 
-  '@content-collections/core@0.7.2':
-    resolution: {integrity: sha512-jOpQV6etstGF477CoMXdh4Cwl4fEbgZhty/WKxPsP3akx1LE4Ds8w89WZVsy8pttnR6KC4psrjCtlwa9WNS+rg==}
+  '@content-collections/core@0.7.3':
+    resolution: {integrity: sha512-eqrQ/59BdorWQFFLF1sGPtIKzsn1OPSomok8e6MevYAaZ2knkhI3ddTQqo8OMrW/zA5H71Pbg0cgxbCN0pOVsg==}
     peerDependencies:
       typescript: ^5.0.2
 
@@ -1443,16 +1297,12 @@ packages:
       react: ^18.0.0
       react-dom: ^18.2.0
 
-  '@content-collections/next@0.2.3':
-    resolution: {integrity: sha512-8rteKhfu8sJOtQAzVt4iMkgbCso2yzfTzq6kXFYNW6HwDJzaFjLeHiIO4Pa6oFOCh3w9CApFdloTAKWzQJKpHQ==}
+  '@content-collections/next@0.2.4':
+    resolution: {integrity: sha512-MAmnKX/Lj4rDIWkcnzQIASboi8vmv5w+/uxM6gHPPQFXcp1yiiZndxbzR9TV7ul1J6i7HB1h9Qpj6gvCz/HwvA==}
     peerDependencies:
       '@content-collections/core': 0.x
       next: ^12 || ^13 || ^14 || ^15
 
-  '@cspotcode/source-map-support@0.8.1':
-    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
-    engines: {node: '>=12'}
-
   '@csstools/convert-colors@2.0.0':
     resolution: {integrity: sha512-P7BVvddsP2Wl5v3drJ3ArzpdfXMqoZ/oHOV/yFiGFb3JQr9Z9UXZ9tnHAKJsO89lfprR1F9ExW3Yij21EjEBIA==}
     engines: {node: '>=6.0.0'}
@@ -1469,25 +1319,12 @@ packages:
     peerDependencies:
       postcss-selector-parser: ^7.0.0
 
-  '@dprint/formatter@0.3.0':
-    resolution: {integrity: sha512-N9fxCxbaBOrDkteSOzaCqwWjso5iAe+WJPsHC021JfHNj2ThInPNEF13ORDKta3llq5D1TlclODCvOvipH7bWQ==}
-
-  '@dprint/markdown@0.17.1':
-    resolution: {integrity: sha512-Mk9C9tHHSScB3JOUd2PEP3keWnJZ8Kqcd99qaVhknzhxgZF/gGTx0CMyd+lpsIV+Moe+OtbRnqAjp+hKVtT1zQ==}
-
-  '@dprint/toml@0.6.2':
-    resolution: {integrity: sha512-Mk5unEANsL/L+WHYU3NpDXt1ARU5bNU5k5OZELxaJodDycKG6RoRnSlZXpW6+7UN2PSnETAFVUdKrh937ZwtHA==}
-
   '@emotion/is-prop-valid@0.8.8':
     resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
 
   '@emotion/memoize@0.7.4':
     resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
 
-  '@es-joy/jsdoccomment@0.43.1':
-    resolution: {integrity: sha512-I238eDtOolvCuvtxrnqtlBaw0BwdQuYqK7eA6XIonicMdOOOb75mqdIzkGDUbS04+1Di007rgm9snFRNeVrOog==}
-    engines: {node: '>=16'}
-
   '@esbuild-plugins/node-resolve@0.2.2':
     resolution: {integrity: sha512-+t5FdX3ATQlb53UFDBRb4nqjYBz492bIrnVWvpQHpzZlu9BQL5HasMZhqc409ygUwOWCXZhrWr6NyZ6T6Y+cxw==}
     peerDependencies:
@@ -1499,6 +1336,12 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/aix-ppc64@0.23.1':
+    resolution: {integrity: sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/android-arm64@0.17.19':
     resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
     engines: {node: '>=12'}
@@ -1511,6 +1354,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm64@0.23.1':
+    resolution: {integrity: sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm@0.17.19':
     resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
     engines: {node: '>=12'}
@@ -1523,6 +1372,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-arm@0.23.1':
+    resolution: {integrity: sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-x64@0.17.19':
     resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
     engines: {node: '>=12'}
@@ -1535,6 +1390,12 @@ packages:
     cpu: [x64]
     os: [android]
 
+  '@esbuild/android-x64@0.23.1':
+    resolution: {integrity: sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/darwin-arm64@0.17.19':
     resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
     engines: {node: '>=12'}
@@ -1547,6 +1408,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-arm64@0.23.1':
+    resolution: {integrity: sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.17.19':
     resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
     engines: {node: '>=12'}
@@ -1559,6 +1426,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.23.1':
+    resolution: {integrity: sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/freebsd-arm64@0.17.19':
     resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
     engines: {node: '>=12'}
@@ -1571,6 +1444,12 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-arm64@0.23.1':
+    resolution: {integrity: sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.17.19':
     resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
     engines: {node: '>=12'}
@@ -1583,6 +1462,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.23.1':
+    resolution: {integrity: sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/linux-arm64@0.17.19':
     resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
     engines: {node: '>=12'}
@@ -1595,6 +1480,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm64@0.23.1':
+    resolution: {integrity: sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm@0.17.19':
     resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
     engines: {node: '>=12'}
@@ -1607,6 +1498,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-arm@0.23.1':
+    resolution: {integrity: sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.17.19':
     resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
     engines: {node: '>=12'}
@@ -1619,6 +1516,12 @@ packages:
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.23.1':
+    resolution: {integrity: sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.17.19':
     resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
     engines: {node: '>=12'}
@@ -1631,6 +1534,12 @@ packages:
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.23.1':
+    resolution: {integrity: sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.17.19':
     resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
     engines: {node: '>=12'}
@@ -1643,6 +1552,12 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.23.1':
+    resolution: {integrity: sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.17.19':
     resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
     engines: {node: '>=12'}
@@ -1655,6 +1570,12 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.23.1':
+    resolution: {integrity: sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.17.19':
     resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
     engines: {node: '>=12'}
@@ -1667,6 +1588,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.23.1':
+    resolution: {integrity: sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.17.19':
     resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
     engines: {node: '>=12'}
@@ -1679,6 +1606,12 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.23.1':
+    resolution: {integrity: sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-x64@0.17.19':
     resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
     engines: {node: '>=12'}
@@ -1691,6 +1624,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/linux-x64@0.23.1':
+    resolution: {integrity: sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/netbsd-x64@0.17.19':
     resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
     engines: {node: '>=12'}
@@ -1703,6 +1642,18 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.23.1':
+    resolution: {integrity: sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.23.1':
+    resolution: {integrity: sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.17.19':
     resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
     engines: {node: '>=12'}
@@ -1715,6 +1666,12 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.23.1':
+    resolution: {integrity: sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/sunos-x64@0.17.19':
     resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
     engines: {node: '>=12'}
@@ -1727,6 +1684,12 @@ packages:
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/sunos-x64@0.23.1':
+    resolution: {integrity: sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/win32-arm64@0.17.19':
     resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
     engines: {node: '>=12'}
@@ -1739,6 +1702,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-arm64@0.23.1':
+    resolution: {integrity: sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.17.19':
     resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
     engines: {node: '>=12'}
@@ -1751,6 +1720,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.23.1':
+    resolution: {integrity: sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-x64@0.17.19':
     resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
     engines: {node: '>=12'}
@@ -1763,132 +1738,57 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.4.0':
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
-  '@eslint-community/regexpp@4.10.0':
-    resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+  '@esbuild/win32-x64@0.23.1':
+    resolution: {integrity: sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
 
-  '@eslint-react/ast@1.5.15':
-    resolution: {integrity: sha512-46GvHju62vKlc4YvX7V2U2GipPoUHAgE9LerUEa7Z/09nx7VPt18wTtQJL7oJTVgA8bdfidEw1olSbdE8jo/iQ==}
-
-  '@eslint-react/core@1.5.15':
-    resolution: {integrity: sha512-ynHPJPeTSgEdUwnvQqjl36NazaeN7ZQckBs4dLYS+ucT+W1W/IszAd0AHTyCdCZ33gE5JQ4rE7SQcgG531k2Aw==}
-
-  '@eslint-react/eslint-plugin@1.5.15':
-    resolution: {integrity: sha512-OE5ghm2tzCECYujcTdOVs7Of8VEzEekNxqo6+aXw2Ikp1x2W/mMYSKW/MMJdWusc7wxPdir+f53uhMJ08tZ87Q==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: ^5.3.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@eslint-react/jsx@1.5.15':
-    resolution: {integrity: sha512-u4TNGOfXx8UsVCV3FNGHA+4+Tvtvh25uIMfYiUXziNMv4bitxet+qF9jdl3ItTVWkGFYbqv/3qSTDMQyKCzd4A==}
-
-  '@eslint-react/shared@1.5.15':
-    resolution: {integrity: sha512-u6BrX+OVd5xtBo39ZQJHJzk+GCXtIMXo4F5aOWNBUPeCSDxeUbWM4KyOMTJ2PiRwR20g+po8X2kGMkjlZfKOwg==}
-
-  '@eslint-react/tools@1.5.15':
-    resolution: {integrity: sha512-ZcvjPOSDilNtXtY2DTUmGVWOAU84eEmT6pcj45ado4HDE+3vELAk0AipUcOKkrD9E8j1r2YDN58mnwdfN2WXJQ==}
-
-  '@eslint-react/types@1.5.15':
-    resolution: {integrity: sha512-VdMPeNYCsxiG4Ux62timZQ5gF9pQ6qElxVwE3W6GhN+J/FYo+NcGBkXy7NO+6tNnPMNx8nG4c1NvC+WImnJBEw==}
-
-  '@eslint-react/var@1.5.15':
-    resolution: {integrity: sha512-DBNQdtVN4dtdkHnUS1VV+qV0W2ltt3rTRPUJ2bPyIO+rys2h/sTo9kBFG/BSTOQCyarGkJqjCvs/bbEGmbxBdQ==}
-
-  '@eslint/eslintrc@3.1.0':
-    resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/js@9.2.0':
-    resolution: {integrity: sha512-ESiIudvhoYni+MdsI8oD7skpprZ89qKocwRM2KEvhhBJ9nl5MRh7BXU5GTod7Mdygq+AUl+QzId6iWJKR/wABA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@faker-js/faker@8.4.1':
-    resolution: {integrity: sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'}
+  '@faker-js/faker@8.4.1':
+    resolution: {integrity: sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'}
 
   '@fal-works/esbuild-plugin-global-externals@2.1.2':
     resolution: {integrity: sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==}
 
-  '@floating-ui/core@1.6.2':
-    resolution: {integrity: sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==}
+  '@floating-ui/core@1.6.9':
+    resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}
 
-  '@floating-ui/dom@1.6.5':
-    resolution: {integrity: sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==}
+  '@floating-ui/dom@1.6.13':
+    resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==}
 
-  '@floating-ui/react-dom@2.1.0':
-    resolution: {integrity: sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==}
+  '@floating-ui/react-dom@2.1.2':
+    resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  '@floating-ui/react@0.26.17':
-    resolution: {integrity: sha512-ESD+jYWwqwVzaIgIhExrArdsCL1rOAzryG/Sjlu8yaD3Mtqi3uVyhbE2V7jD58Mo52qbzKz2eUY/Xgh5I86FCQ==}
+  '@floating-ui/react@0.26.28':
+    resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  '@floating-ui/utils@0.2.2':
-    resolution: {integrity: sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==}
-
-  '@hapi/hoek@9.3.0':
-    resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==}
+  '@floating-ui/utils@0.2.9':
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
 
-  '@hapi/topo@5.1.0':
-    resolution: {integrity: sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==}
-
-  '@headlessui/react@2.0.4':
-    resolution: {integrity: sha512-16d/rOLeYsFsmPlRmXGu8DCBzrWD0zV1Ccx3n73wN87yFu8Y9+X04zflv8EJEt9TAYRyLKOmQXUnOnqQl6NgpA==}
+  '@headlessui/react@2.2.0':
+    resolution: {integrity: sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==}
     engines: {node: '>=10'}
     peerDependencies:
-      react: ^18
-      react-dom: ^18
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
 
-  '@heroicons/react@2.1.3':
-    resolution: {integrity: sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==}
+  '@heroicons/react@2.2.0':
+    resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
     peerDependencies:
-      react: '>= 16'
+      react: '>= 16 || ^19.0.0-rc'
 
-  '@hookform/resolvers@3.6.0':
-    resolution: {integrity: sha512-UBcpyOX3+RR+dNnqBd0lchXpoL8p4xC21XP8H6Meb8uve5Br1GCnmg0PcBoKKqPKgGu9GHQ/oygcmPrQhetwqw==}
+  '@hookform/resolvers@3.10.0':
+    resolution: {integrity: sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==}
     peerDependencies:
       react-hook-form: ^7.0.0
 
-  '@humanwhocodes/config-array@0.13.0':
-    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
-    engines: {node: '>=10.10.0'}
-    deprecated: Use @eslint/config-array instead
-
-  '@humanwhocodes/module-importer@1.0.1':
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
-
-  '@humanwhocodes/object-schema@2.0.3':
-    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
-    deprecated: Use @eslint/object-schema instead
-
-  '@humanwhocodes/retry@0.2.4':
-    resolution: {integrity: sha512-Ttl/jHpxfS3st5sxwICYfk4pOH0WrLI1SpW283GgQL7sCWU7EHIOhX4b4fkIxr3tkfzwg8+FNojtzsIEE7Ecgg==}
-    engines: {node: '>=18.18'}
-
-  '@ianvs/prettier-plugin-sort-imports@3.7.2':
-    resolution: {integrity: sha512-bVckKToJM8XV2wTOG1VpeXrSmfAG49esVrikbxeFbY51RJdNke9AdMANJtGuACB59uo+pGlz0wBdWFrRzWyO1A==}
-    peerDependencies:
-      '@vue/compiler-sfc': '>=3.0.0'
-      prettier: 2.x
-    peerDependenciesMeta:
-      '@vue/compiler-sfc':
-        optional: true
-
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -1897,6 +1797,14 @@ packages:
     resolution: {integrity: sha512-RQgQ4uQ+pLbqXfOmieB91ejmLwvSgv9nLx6sT6sD83s7umBypgg+OIBOBbEUiJXrfpnp9j0mRhYYdzp9uqq3lA==}
     engines: {node: '>=12'}
 
+  '@istanbuljs/load-nyc-config@1.1.0':
+    resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
+    engines: {node: '>=8'}
+
+  '@istanbuljs/schema@0.1.3':
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+
   '@jest/create-cache-key-function@29.7.0':
     resolution: {integrity: sha512-4QqS3LY5PBmTRHj9sAg1HLoPzqAI0uOX6wI/TRqHIcOxlFidy6YEmCQJk6FSZjNLGCeubDMfmkWL+qaLKhSGQA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -1913,28 +1821,20 @@ packages:
     resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jest/types@26.6.2':
-    resolution: {integrity: sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==}
-    engines: {node: '>= 10.14.2'}
+  '@jest/transform@29.7.0':
+    resolution: {integrity: sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
   '@jest/types@29.6.3':
     resolution: {integrity: sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jridgewell/gen-mapping@0.3.3':
-    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/resolve-uri@3.1.1':
-    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/set-array@1.1.2':
-    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
   '@jridgewell/set-array@1.2.1':
@@ -1944,32 +1844,23 @@ packages:
   '@jridgewell/source-map@0.3.6':
     resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
 
-  '@jridgewell/sourcemap-codec@1.4.15':
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
-  '@jridgewell/trace-mapping@0.3.20':
-    resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==}
-
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
-  '@jridgewell/trace-mapping@0.3.9':
-    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
-
   '@jsdevtools/ez-spawn@3.0.4':
     resolution: {integrity: sha512-f5DRIOZf7wxogefH03RjMPMdBF7ADTWUMoOs9kaJo06EfwF+aFhMZMDZxHg/Xe12hptN9xoZjGso2fdjapBRIA==}
     engines: {node: '>=10'}
 
-  '@mdx-js/esbuild@3.0.1':
-    resolution: {integrity: sha512-+KZbCKcRjFtRD6qzD+c70Vq/VPVt5LHFsOshNcsdcONkaLTCSjmM7/uj71i3BcP+170f+P4DwVEMtqR/k0t5aw==}
+  '@mdx-js/esbuild@3.1.0':
+    resolution: {integrity: sha512-Jk42xUb1SEJxh6n2GBAtJjQISFIZccjz8XVEsHVhrlvZJAJziIxR9KyaFF6nTeTB/jCAFQGDgO7+oMRH/ApRsg==}
     peerDependencies:
       esbuild: '>=0.14.0'
 
-  '@mdx-js/mdx@3.0.1':
-    resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==}
+  '@mdx-js/mdx@3.1.0':
+    resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==}
 
   '@motionone/types@10.17.1':
     resolution: {integrity: sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A==}
@@ -1977,114 +1868,57 @@ packages:
   '@motionone/utils@10.18.0':
     resolution: {integrity: sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==}
 
-  '@next/env@14.1.3':
-    resolution: {integrity: sha512-VhgXTvrgeBRxNPjyfBsDIMvgsKDxjlpw4IAUsHCX8Gjl1vtHUYRT3+xfQ/wwvLPDd/6kqfLqk9Pt4+7gysuCKQ==}
-
   '@next/env@14.2.4':
     resolution: {integrity: sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==}
 
-  '@next/swc-darwin-arm64@14.1.3':
-    resolution: {integrity: sha512-LALu0yIBPRiG9ANrD5ncB3pjpO0Gli9ZLhxdOu6ZUNf3x1r3ea1rd9Q+4xxUkGrUXLqKVK9/lDkpYIJaCJ6AHQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
   '@next/swc-darwin-arm64@14.2.4':
     resolution: {integrity: sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@14.1.3':
-    resolution: {integrity: sha512-E/9WQeXxkqw2dfcn5UcjApFgUq73jqNKaE5bysDm58hEUdUGedVrnRhblhJM7HbCZNhtVl0j+6TXsK0PuzXTCg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
   '@next/swc-darwin-x64@14.2.4':
     resolution: {integrity: sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@14.1.3':
-    resolution: {integrity: sha512-USArX9B+3rZSXYLFvgy0NVWQgqh6LHWDmMt38O4lmiJNQcwazeI6xRvSsliDLKt+78KChVacNiwvOMbl6g6BBw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
   '@next/swc-linux-arm64-gnu@14.2.4':
     resolution: {integrity: sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@14.1.3':
-    resolution: {integrity: sha512-esk1RkRBLSIEp1qaQXv1+s6ZdYzuVCnDAZySpa62iFTMGTisCyNQmqyCTL9P+cLJ4N9FKCI3ojtSfsyPHJDQNw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
   '@next/swc-linux-arm64-musl@14.2.4':
     resolution: {integrity: sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@14.1.3':
-    resolution: {integrity: sha512-8uOgRlYEYiKo0L8YGeS+3TudHVDWDjPVDUcST+z+dUzgBbTEwSSIaSgF/vkcC1T/iwl4QX9iuUyUdQEl0Kxalg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
   '@next/swc-linux-x64-gnu@14.2.4':
     resolution: {integrity: sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@14.1.3':
-    resolution: {integrity: sha512-DX2zqz05ziElLoxskgHasaJBREC5Y9TJcbR2LYqu4r7naff25B4iXkfXWfcp69uD75/0URmmoSgT8JclJtrBoQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
   '@next/swc-linux-x64-musl@14.2.4':
     resolution: {integrity: sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@14.1.3':
-    resolution: {integrity: sha512-HjssFsCdsD4GHstXSQxsi2l70F/5FsRTRQp8xNgmQs15SxUfUJRvSI9qKny/jLkY3gLgiCR3+6A7wzzK0DBlfA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
   '@next/swc-win32-arm64-msvc@14.2.4':
     resolution: {integrity: sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-ia32-msvc@14.1.3':
-    resolution: {integrity: sha512-DRuxD5axfDM1/Ue4VahwSxl1O5rn61hX8/sF0HY8y0iCbpqdxw3rB3QasdHn/LJ6Wb2y5DoWzXcz3L1Cr+Thrw==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-
   '@next/swc-win32-ia32-msvc@14.2.4':
     resolution: {integrity: sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@14.1.3':
-    resolution: {integrity: sha512-uC2DaDoWH7h1P/aJ4Fok3Xiw6P0Lo4ez7NbowW2VGNXw/Xv6tOuLUcxhBYZxsSUJtpeknCi8/fvnSpyCFp4Rcg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
   '@next/swc-win32-x64-msvc@14.2.4':
     resolution: {integrity: sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==}
     engines: {node: '>= 10'}
@@ -2103,432 +1937,320 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@nyxb/eslint-config@3.0.1':
-    resolution: {integrity: sha512-YboDBnt5s654lXsySDyvBU8uEc2XI0BUhQx7ThFQk1U4vAPOQ4JyeS2NsktRAPj69CFIWQyIlh7MTM2/xzl3OQ==}
-    hasBin: true
-    peerDependencies:
-      '@eslint-react/eslint-plugin': ^1.5.8
-      '@prettier/plugin-xml': ^3.4.1
-      '@unocss/eslint-plugin': '>=0.50.0'
-      astro-eslint-parser: ^0.16.3
-      eslint: '>=8.40.0'
-      eslint-plugin-astro: ^0.31.4
-      eslint-plugin-format: '>=0.1.0'
-      eslint-plugin-react-hooks: ^4.6.0
-      eslint-plugin-react-refresh: ^0.4.4
-      eslint-plugin-solid: ^0.13.2
-      eslint-plugin-svelte: '>=2.35.1'
-      prettier-plugin-astro: ^0.13.0
-      prettier-plugin-slidev: ^1.0.5
-      svelte-eslint-parser: ^0.33.1
-    peerDependenciesMeta:
-      '@eslint-react/eslint-plugin':
-        optional: true
-      '@prettier/plugin-xml':
-        optional: true
-      '@unocss/eslint-plugin':
-        optional: true
-      astro-eslint-parser:
-        optional: true
-      eslint-plugin-astro:
-        optional: true
-      eslint-plugin-format:
-        optional: true
-      eslint-plugin-react-hooks:
-        optional: true
-      eslint-plugin-react-refresh:
-        optional: true
-      eslint-plugin-solid:
-        optional: true
-      eslint-plugin-svelte:
-        optional: true
-      prettier-plugin-astro:
-        optional: true
-      prettier-plugin-slidev:
-        optional: true
-      svelte-eslint-parser:
-        optional: true
-
-  '@nyxb/eslint-config@3.0.8':
-    resolution: {integrity: sha512-IXqxKP1K50w4al8HjHcXMAqHtFxbkzEIzwpoiPFkQxDIyg+RCD/rzdef91cik2hK5gGXa+bzrq1kn32vsKdCTg==}
-    hasBin: true
-    peerDependencies:
-      '@eslint-react/eslint-plugin': ^1.5.23-next.4
-      '@prettier/plugin-xml': ^3.4.1
-      '@unocss/eslint-plugin': '>=0.50.0'
-      astro-eslint-parser: ^1.0.2
-      eslint: '>=8.40.0'
-      eslint-plugin-astro: ^1.2.0
-      eslint-plugin-format: '>=0.1.0'
-      eslint-plugin-react-hooks: '>=5.1.0-rc-fb9a90fa48-20240614'
-      eslint-plugin-react-refresh: ^0.4.4
-      eslint-plugin-solid: ^0.13.2
-      eslint-plugin-svelte: '>=2.35.1'
-      eslint-plugin-tailwindcss: 3.17.4
-      prettier-plugin-astro: ^0.13.0
-      prettier-plugin-slidev: ^1.0.5
-      svelte-eslint-parser: '>=0.37.0'
-    peerDependenciesMeta:
-      '@eslint-react/eslint-plugin':
-        optional: true
-      '@prettier/plugin-xml':
-        optional: true
-      '@unocss/eslint-plugin':
-        optional: true
-      astro-eslint-parser:
-        optional: true
-      eslint-plugin-astro:
-        optional: true
-      eslint-plugin-format:
-        optional: true
-      eslint-plugin-react-hooks:
-        optional: true
-      eslint-plugin-react-refresh:
-        optional: true
-      eslint-plugin-solid:
-        optional: true
-      eslint-plugin-svelte:
-        optional: true
-      eslint-plugin-tailwindcss:
-        optional: true
-      prettier-plugin-astro:
-        optional: true
-      prettier-plugin-slidev:
-        optional: true
-      svelte-eslint-parser:
-        optional: true
-
-  '@nyxb/install-pkg@0.0.3':
-    resolution: {integrity: sha512-AJzEogKQEs17gqqTyS14afrIadew3NVGy9r98F8kSZcXQmwPykPnUkZOOjr4wnBqfQiLDfqLi5lTdC2ehfHyJg==}
-
   '@nyxb/nyxi@1.0.0':
     resolution: {integrity: sha512-dh5z4jZ3Z1kb8YfqDRdWO9C0Tz9tVAL5SrxlOzGUk8QCQh/yurmaqYHU0L1WGUtA1F5RLQR4RXmRr8locziSaw==}
     hasBin: true
 
-  '@nyxb/utils@0.0.4':
-    resolution: {integrity: sha512-+pj0MhTSuFVXIoKTXUr/XrcYqON+2tebRYCRCJkB+Lms05wLHd+gPpWoz4hQocohOtDa0mwovPmtHZ0pJGuk9A==}
-
-  '@octokit/app@15.1.0':
-    resolution: {integrity: sha512-TkBr7QgOmE6ORxvIAhDbZsqPkF7RSqTY4pLTtUQCvr6dTXqvi2fFo46q3h1lxlk/sGMQjqyZ0kEahkD/NyzOHg==}
+  '@octokit/app@15.1.2':
+    resolution: {integrity: sha512-6aKmKvqnJKoVK+kx0mLlBMKmQYoziPw4Rd/PWr0j65QVQlrDXlu6hGU8fmTXt7tNkf/DsubdIaTT4fkoWzCh5g==}
     engines: {node: '>= 18'}
 
-  '@octokit/auth-app@7.1.0':
-    resolution: {integrity: sha512-cazGaJPSgeZ8NkVYeM/C5l/6IQ5vZnsI8p1aMucadCkt/bndI+q+VqwrlnWbASRmenjOkf1t1RpCKrif53U8gw==}
+  '@octokit/auth-app@7.1.4':
+    resolution: {integrity: sha512-5F+3l/maq9JfWQ4bV28jT2G/K8eu9OJ317yzXPTGe4Kw+lKDhFaS4dQ3Ltmb6xImKxfCQdqDqMXODhc9YLipLw==}
     engines: {node: '>= 18'}
 
-  '@octokit/auth-oauth-app@8.1.1':
-    resolution: {integrity: sha512-5UtmxXAvU2wfcHIPPDWzVSAWXVJzG3NWsxb7zCFplCWEmMCArSZV0UQu5jw5goLQXbFyOr5onzEH37UJB3zQQg==}
+  '@octokit/auth-oauth-app@8.1.2':
+    resolution: {integrity: sha512-3woNZgq5/S6RS+9ZTq+JdymxVr7E0s4EYxF20ugQvgX3pomdPUL5r/XdTY9wALoBM2eHVy4ettr5fKpatyTyHw==}
     engines: {node: '>= 18'}
 
-  '@octokit/auth-oauth-device@7.1.1':
-    resolution: {integrity: sha512-HWl8lYueHonuyjrKKIup/1tiy0xcmQCdq5ikvMO1YwkNNkxb6DXfrPjrMYItNLyCP/o2H87WuijuE+SlBTT8eg==}
+  '@octokit/auth-oauth-device@7.1.2':
+    resolution: {integrity: sha512-gTOIzDeV36OhVfxCl69FmvJix7tJIiU6dlxuzLVAzle7fYfO8UDyddr9B+o4CFQVaMBLMGZ9ak2CWMYcGeZnPw==}
     engines: {node: '>= 18'}
 
-  '@octokit/auth-oauth-user@5.1.1':
-    resolution: {integrity: sha512-rRkMz0ErOppdvEfnemHJXgZ9vTPhBuC6yASeFaB7I2yLMd7QpjfrL1mnvRPlyKo+M6eeLxrKanXJ9Qte29SRsw==}
+  '@octokit/auth-oauth-user@5.1.2':
+    resolution: {integrity: sha512-PgVDDPJgZYb3qSEXK4moksA23tfn68zwSAsQKZ1uH6IV9IaNEYx35OXXI80STQaLYnmEE86AgU0tC1YkM4WjsA==}
     engines: {node: '>= 18'}
 
-  '@octokit/auth-token@5.1.1':
-    resolution: {integrity: sha512-rh3G3wDO8J9wSjfI436JUKzHIxq8NaiL0tVeB2aXmG6p/9859aUOAjA9pmSPNGGZxfwmaJ9ozOJImuNVJdpvbA==}
+  '@octokit/auth-token@5.1.2':
+    resolution: {integrity: sha512-JcQDsBdg49Yky2w2ld20IHAlwr8d/d8N6NiOXbtuoPCqzbsiJgF633mVUw3x4mo0H5ypataQIX7SFu3yy44Mpw==}
     engines: {node: '>= 18'}
 
-  '@octokit/auth-unauthenticated@6.1.0':
-    resolution: {integrity: sha512-zPSmfrUAcspZH/lOFQnVnvjQZsIvmfApQH6GzJrkIunDooU1Su2qt2FfMTSVPRp7WLTQyC20Kd55lF+mIYaohQ==}
+  '@octokit/auth-unauthenticated@6.1.1':
+    resolution: {integrity: sha512-bGXqdN6RhSFHvpPq46SL8sN+F3odQ6oMNLWc875IgoqcC3qus+fOL2th6Tkl94wvdSTy8/OeHzWy/lZebmnhog==}
     engines: {node: '>= 18'}
 
-  '@octokit/core@6.1.2':
-    resolution: {integrity: sha512-hEb7Ma4cGJGEUNOAVmyfdB/3WirWMg5hDuNFVejGEDFqupeOysLc2sG6HJxY2etBp5YQu5Wtxwi020jS9xlUwg==}
+  '@octokit/core@6.1.3':
+    resolution: {integrity: sha512-z+j7DixNnfpdToYsOutStDgeRzJSMnbj8T1C/oQjB6Aa+kRfNjs/Fn7W6c8bmlt6mfy3FkgeKBRnDjxQow5dow==}
     engines: {node: '>= 18'}
 
-  '@octokit/endpoint@10.1.1':
-    resolution: {integrity: sha512-JYjh5rMOwXMJyUpj028cu0Gbp7qe/ihxfJMLc8VZBMMqSwLgOxDI1911gV4Enl1QSavAQNJcwmwBF9M0VvLh6Q==}
+  '@octokit/endpoint@10.1.2':
+    resolution: {integrity: sha512-XybpFv9Ms4hX5OCHMZqyODYqGTZ3H6K6Vva+M9LR7ib/xr1y1ZnlChYv9H680y77Vd/i/k+thXApeRASBQkzhA==}
     engines: {node: '>= 18'}
 
-  '@octokit/graphql@8.1.1':
-    resolution: {integrity: sha512-ukiRmuHTi6ebQx/HFRCXKbDlOh/7xEV6QUXaE7MJEKGNAncGI/STSbOkl12qVXZrfZdpXctx5O9X1AIaebiDBg==}
+  '@octokit/graphql@8.2.0':
+    resolution: {integrity: sha512-gejfDywEml/45SqbWTWrhfwvLBrcGYhOn50sPOjIeVvH6i7D16/9xcFA8dAJNp2HMcd+g4vru41g4E2RBiZvfQ==}
     engines: {node: '>= 18'}
 
-  '@octokit/oauth-app@7.1.3':
-    resolution: {integrity: sha512-EHXbOpBkSGVVGF1W+NLMmsnSsJRkcrnVmDKt0TQYRBb6xWfWzoi9sBD4DIqZ8jGhOWO/V8t4fqFyJ4vDQDn9bg==}
+  '@octokit/oauth-app@7.1.5':
+    resolution: {integrity: sha512-/Y2MiwWDlGUK4blKKfjJiwjzu/FzwKTTTfTZAAQ0QbdBIDEGJPWhOFH6muSN86zaa4tNheB4YS3oWIR2e4ydzA==}
     engines: {node: '>= 18'}
 
   '@octokit/oauth-authorization-url@7.1.1':
     resolution: {integrity: sha512-ooXV8GBSabSWyhLUowlMIVd9l1s2nsOGQdlP2SQ4LnkEsGXzeCvbSbCPdZThXhEFzleGPwbapT0Sb+YhXRyjCA==}
     engines: {node: '>= 18'}
 
-  '@octokit/oauth-methods@5.1.2':
-    resolution: {integrity: sha512-C5lglRD+sBlbrhCUTxgJAFjWgJlmTx5bQ7Ch0+2uqRjYv7Cfb5xpX4WuSC9UgQna3sqRGBL9EImX9PvTpMaQ7g==}
+  '@octokit/oauth-methods@5.1.3':
+    resolution: {integrity: sha512-M+bDBi5H8FnH0xhCTg0m9hvcnppdDnxUqbZyOkxlLblKpLAR+eT2nbDPvJDp0eLrvJWA1I8OX0KHf/sBMQARRA==}
     engines: {node: '>= 18'}
 
-  '@octokit/openapi-types@22.2.0':
-    resolution: {integrity: sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==}
+  '@octokit/openapi-types@23.0.1':
+    resolution: {integrity: sha512-izFjMJ1sir0jn0ldEKhZ7xegCTj/ObmEDlEfpFrx4k/JyZSMRHbO3/rBwgE7f3m2DHt+RrNGIVw4wSmwnm3t/g==}
 
-  '@octokit/openapi-webhooks-types@8.2.1':
-    resolution: {integrity: sha512-msAU1oTSm0ZmvAE0xDemuF4tVs5i0xNnNGtNmr4EuATi+1Rn8cZDetj6NXioSf5LwnxEc209COa/WOSbjuhLUA==}
+  '@octokit/openapi-webhooks-types@8.5.1':
+    resolution: {integrity: sha512-i3h1b5zpGSB39ffBbYdSGuAd0NhBAwPyA3QV3LYi/lx4lsbZiu7u2UHgXVUR6EpvOI8REOuVh1DZTRfHoJDvuQ==}
 
-  '@octokit/plugin-paginate-graphql@5.2.2':
-    resolution: {integrity: sha512-7znSVvlNAOJisCqAnjN1FtEziweOHSjPGAuc5W58NeGNAr/ZB57yCsjQbXDlWsVryA7hHQaEQPcBbJYFawlkyg==}
+  '@octokit/plugin-paginate-graphql@5.2.4':
+    resolution: {integrity: sha512-pLZES1jWaOynXKHOqdnwZ5ULeVR6tVVCMm+AUbp0htdcyXDU95WbkYdU4R2ej1wKj5Tu94Mee2Ne0PjPO9cCyA==}
     engines: {node: '>= 18'}
     peerDependencies:
       '@octokit/core': '>=6'
 
-  '@octokit/plugin-paginate-rest@11.3.3':
-    resolution: {integrity: sha512-o4WRoOJZlKqEEgj+i9CpcmnByvtzoUYC6I8PD2SA95M+BJ2x8h7oLcVOg9qcowWXBOdcTRsMZiwvM3EyLm9AfA==}
+  '@octokit/plugin-paginate-rest@11.4.0':
+    resolution: {integrity: sha512-ttpGck5AYWkwMkMazNCZMqxKqIq1fJBNxBfsFwwfyYKTf914jKkLF0POMS3YkPBwp5g1c2Y4L79gDz01GhSr1g==}
     engines: {node: '>= 18'}
     peerDependencies:
       '@octokit/core': '>=6'
 
-  '@octokit/plugin-rest-endpoint-methods@13.2.4':
-    resolution: {integrity: sha512-gusyAVgTrPiuXOdfqOySMDztQHv6928PQ3E4dqVGEtOvRXAKRbJR4b1zQyniIT9waqaWk/UDaoJ2dyPr7Bk7Iw==}
+  '@octokit/plugin-rest-endpoint-methods@13.3.0':
+    resolution: {integrity: sha512-LUm44shlmkp/6VC+qQgHl3W5vzUP99ZM54zH6BuqkJK4DqfFLhegANd+fM4YRLapTvPm4049iG7F3haANKMYvQ==}
     engines: {node: '>= 18'}
     peerDependencies:
       '@octokit/core': '>=6'
 
-  '@octokit/plugin-retry@7.1.1':
-    resolution: {integrity: sha512-G9Ue+x2odcb8E1XIPhaFBnTTIrrUDfXN05iFXiqhR+SeeeDMMILcAnysOsxUpEWcQp2e5Ft397FCXTcPkiPkLw==}
+  '@octokit/plugin-retry@7.1.3':
+    resolution: {integrity: sha512-8nKOXvYWnzv89gSyIvgFHmCBAxfQAOPRlkacUHL9r5oWtp5Whxl8Skb2n3ACZd+X6cYijD6uvmrQuPH/UCL5zQ==}
     engines: {node: '>= 18'}
     peerDependencies:
       '@octokit/core': '>=6'
 
-  '@octokit/plugin-throttling@9.3.0':
-    resolution: {integrity: sha512-B5YTToSRTzNSeEyssnrT7WwGhpIdbpV9NKIs3KyTWHX6PhpYn7gqF/+lL3BvsASBM3Sg5BAUYk7KZx5p/Ec77w==}
+  '@octokit/plugin-throttling@9.4.0':
+    resolution: {integrity: sha512-IOlXxXhZA4Z3m0EEYtrrACkuHiArHLZ3CvqWwOez/pURNqRuwfoFlTPbN5Muf28pzFuztxPyiUiNwz8KctdZaQ==}
     engines: {node: '>= 18'}
     peerDependencies:
-      '@octokit/core': ^6.0.0
+      '@octokit/core': ^6.1.3
 
-  '@octokit/request-error@6.1.1':
-    resolution: {integrity: sha512-1mw1gqT3fR/WFvnoVpY/zUM2o/XkMs/2AszUUG9I69xn0JFLv6PGkPhNk5lbfvROs79wiS0bqiJNxfCZcRJJdg==}
+  '@octokit/request-error@6.1.6':
+    resolution: {integrity: sha512-pqnVKYo/at0NuOjinrgcQYpEbv4snvP3bKMRqHaD9kIsk9u1LCpb2smHZi8/qJfgeNqLo5hNW4Z7FezNdEo0xg==}
     engines: {node: '>= 18'}
 
-  '@octokit/request@9.1.1':
-    resolution: {integrity: sha512-pyAguc0p+f+GbQho0uNetNQMmLG1e80WjkIaqqgUkihqUp0boRU6nKItXO4VWnr+nbZiLGEyy4TeKRwqaLvYgw==}
+  '@octokit/request@9.2.0':
+    resolution: {integrity: sha512-kXLfcxhC4ozCnAXy2ff+cSxpcF0A1UqxjvYMqNuPIeOAzJbVWQ+dy5G2fTylofB/gTbObT8O6JORab+5XtA1Kw==}
     engines: {node: '>= 18'}
 
-  '@octokit/types@13.5.0':
-    resolution: {integrity: sha512-HdqWTf5Z3qwDVlzCrP8UJquMwunpDiMPt5er+QjGzL4hqr/vBVY/MauQgS1xWxCDT1oMx1EULyqxncdCY/NVSQ==}
+  '@octokit/types@13.8.0':
+    resolution: {integrity: sha512-x7DjTIbEpEWXK99DMd01QfWy0hd5h4EN+Q7shkdKds3otGQP+oWE/y0A76i1OvH9fygo4ddvNf7ZvF0t78P98A==}
 
   '@octokit/webhooks-methods@5.1.0':
     resolution: {integrity: sha512-yFZa3UH11VIxYnnoOYCVoJ3q4ChuSOk2IVBBQ0O3xtKX4x9bmKb/1t+Mxixv2iUhzMdOl1qeWJqEhouXXzB3rQ==}
     engines: {node: '>= 18'}
 
-  '@octokit/webhooks@13.2.7':
-    resolution: {integrity: sha512-sPHCyi9uZuCs1gg0yF53FFocM+GsiiBEhQQV/itGzzQ8gjyv2GMJ1YvgdDY4lC0ePZeiV3juEw4GbS6w1VHhRw==}
+  '@octokit/webhooks@13.5.0':
+    resolution: {integrity: sha512-uSO/TCCfi9vaZHOBsGWsRNBXYYKtLnSDbHI+std0M80AaEd7AnVfLqvk+9V3GP1faPcOx06ADx+h8UWwvemIGw==}
     engines: {node: '>= 18'}
 
-  '@opentelemetry/api@1.9.0':
-    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
-    engines: {node: '>=8.0.0'}
-
-  '@parcel/watcher-android-arm64@2.4.1':
-    resolution: {integrity: sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==}
+  '@parcel/watcher-android-arm64@2.5.1':
+    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [android]
 
-  '@parcel/watcher-darwin-arm64@2.4.1':
-    resolution: {integrity: sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==}
+  '@parcel/watcher-darwin-arm64@2.5.1':
+    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  '@parcel/watcher-darwin-x64@2.4.1':
-    resolution: {integrity: sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==}
+  '@parcel/watcher-darwin-x64@2.5.1':
+    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  '@parcel/watcher-freebsd-x64@2.4.1':
-    resolution: {integrity: sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==}
+  '@parcel/watcher-freebsd-x64@2.5.1':
+    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  '@parcel/watcher-linux-arm-glibc@2.4.1':
-    resolution: {integrity: sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==}
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
+    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-glibc@2.4.1':
-    resolution: {integrity: sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==}
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-musl@2.4.1':
-    resolution: {integrity: sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==}
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@parcel/watcher-linux-x64-glibc@2.4.1':
-    resolution: {integrity: sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==}
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-linux-x64-musl@2.4.1':
-    resolution: {integrity: sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==}
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-win32-arm64@2.4.1':
-    resolution: {integrity: sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==}
+  '@parcel/watcher-win32-arm64@2.5.1':
+    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  '@parcel/watcher-win32-ia32@2.4.1':
-    resolution: {integrity: sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==}
+  '@parcel/watcher-win32-ia32@2.5.1':
+    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [ia32]
     os: [win32]
 
-  '@parcel/watcher-win32-x64@2.4.1':
-    resolution: {integrity: sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==}
+  '@parcel/watcher-win32-x64@2.5.1':
+    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [win32]
 
-  '@parcel/watcher@2.4.1':
-    resolution: {integrity: sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==}
+  '@parcel/watcher@2.5.1':
+    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
     engines: {node: '>= 10.0.0'}
 
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@pkgr/core@0.1.1':
-    resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
-
-  '@puppeteer/browsers@2.4.1':
-    resolution: {integrity: sha512-0kdAbmic3J09I6dT8e9vE2JOCSt13wHCW5x/ly8TSt2bDtuIWe2TgLZZDHdcziw9AVCzflMAXCrVyRIhIs44Ng==}
+  '@puppeteer/browsers@2.6.1':
+    resolution: {integrity: sha512-aBSREisdsGH890S2rQqK82qmQYU3uFpSH8wcZWHgHzl3LfzsxAKbLNiAG9mO8v1Y0UICBeClICxPJvyr0rcuxg==}
     engines: {node: '>=18'}
     hasBin: true
 
-  '@radix-ui/number@1.0.1':
-    resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
+  '@radix-ui/number@1.1.0':
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
 
-  '@radix-ui/primitive@1.0.1':
-    resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
+  '@radix-ui/primitive@1.1.1':
+    resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
 
-  '@radix-ui/react-accordion@1.1.2':
-    resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==}
+  '@radix-ui/react-accordion@1.2.2':
+    resolution: {integrity: sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-alert-dialog@1.0.5':
-    resolution: {integrity: sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==}
+  '@radix-ui/react-alert-dialog@1.1.5':
+    resolution: {integrity: sha512-1Y2sI17QzSZP58RjGtrklfSGIf3AF7U/HkD3aAcAnhOUJrm7+7GG1wRDFaUlSe0nW5B/t4mYd/+7RNbP2Wexug==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-arrow@1.0.3':
-    resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
+  '@radix-ui/react-arrow@1.1.1':
+    resolution: {integrity: sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-aspect-ratio@1.0.3':
-    resolution: {integrity: sha512-fXR5kbMan9oQqMuacfzlGG/SQMcmMlZ4wrvpckv8SgUulD0MMpspxJrxg/Gp/ISV3JfV1AeSWTYK9GvxA4ySwA==}
+  '@radix-ui/react-aspect-ratio@1.1.1':
+    resolution: {integrity: sha512-kNU4FIpcFMBLkOUcgeIteH06/8JLBcYY6Le1iKenDGCYNYFX3TQqCZjzkOsz37h7r94/99GTb7YhEr98ZBJibw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-avatar@1.0.4':
-    resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==}
+  '@radix-ui/react-avatar@1.1.2':
+    resolution: {integrity: sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-checkbox@1.0.4':
-    resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
+  '@radix-ui/react-checkbox@1.1.3':
+    resolution: {integrity: sha512-HD7/ocp8f1B3e6OHygH0n7ZKjONkhciy1Nh0yuBgObqThc3oyx+vuMfFHKAknXRHHWVE9XvXStxJFyjUmB8PIw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-collapsible@1.0.3':
-    resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
+  '@radix-ui/react-collapsible@1.1.2':
+    resolution: {integrity: sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-collection@1.0.3':
-    resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
+  '@radix-ui/react-collection@1.1.1':
+    resolution: {integrity: sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-compose-refs@1.0.1':
-    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-compose-refs@1.1.0':
-    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
+  '@radix-ui/react-compose-refs@1.1.1':
+    resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -2536,244 +2258,244 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-context-menu@2.1.5':
-    resolution: {integrity: sha512-R5XaDj06Xul1KGb+WP8qiOh7tKJNz2durpLBXAGZjSVtctcRFCuEvy2gtMwRJGePwQQE5nV77gs4FwRi8T+r2g==}
+  '@radix-ui/react-context-menu@2.2.5':
+    resolution: {integrity: sha512-MY5PFCwo/ICaaQtpQBQ0g19AyjzI0mhz+a2GUWA2pJf4XFkvglAdcgDV2Iqm+lLbXn8hb+6rbLgcmRtc6ImPvg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-context@1.0.1':
-    resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
+  '@radix-ui/react-context@1.1.1':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-dialog@1.0.5':
-    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
+  '@radix-ui/react-dialog@1.1.5':
+    resolution: {integrity: sha512-LaO3e5h/NOEL4OfXjxD43k9Dx+vn+8n+PCFt6uhX/BADFflllyv3WJG6rgvvSVBxpTch938Qq/LGc2MMxipXPw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-direction@1.0.1':
-    resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-dismissable-layer@1.0.5':
-    resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
+  '@radix-ui/react-dismissable-layer@1.1.4':
+    resolution: {integrity: sha512-XDUI0IVYVSwjMXxM6P4Dfti7AH+Y4oS/TB+sglZ/EXc7cqLwGAmp1NlMrcUjj7ks6R5WTZuWKv44FBbLpwU3sA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-dropdown-menu@2.0.6':
-    resolution: {integrity: sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==}
+  '@radix-ui/react-dropdown-menu@2.1.5':
+    resolution: {integrity: sha512-50ZmEFL1kOuLalPKHrLWvPFMons2fGx9TqQCWlPwDVpbAnaUJ1g4XNcKqFNMQymYU0kKWR4MDDi+9vUQBGFgcQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-focus-guards@1.0.1':
-    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
+  '@radix-ui/react-focus-guards@1.1.1':
+    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-focus-scope@1.0.4':
-    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
+  '@radix-ui/react-focus-scope@1.1.1':
+    resolution: {integrity: sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-hover-card@1.0.7':
-    resolution: {integrity: sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==}
+  '@radix-ui/react-hover-card@1.1.5':
+    resolution: {integrity: sha512-0jPlX3ZrUIhtMAY0m1SBn1koI4Yqsizq2UwdUiQF1GseSZLZBPa6b8tNS+m32K94Yb4wxtWFSQs85wujQvwahg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-icons@1.3.0':
-    resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
+  '@radix-ui/react-icons@1.3.2':
+    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
     peerDependencies:
-      react: ^16.x || ^17.x || ^18.x
+      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
 
-  '@radix-ui/react-id@1.0.1':
-    resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
+  '@radix-ui/react-id@1.1.0':
+    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-label@2.0.2':
-    resolution: {integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==}
+  '@radix-ui/react-label@2.1.1':
+    resolution: {integrity: sha512-UUw5E4e/2+4kFMH7+YxORXGWggtY6sM8WIwh5RZchhLuUg2H1hc98Py+pr8HMz6rdaYrK2t296ZEjYLOCO5uUw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-menu@2.0.6':
-    resolution: {integrity: sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==}
+  '@radix-ui/react-menu@2.1.5':
+    resolution: {integrity: sha512-uH+3w5heoMJtqVCgYOtYVMECk1TOrkUn0OG0p5MqXC0W2ppcuVeESbou8PTHoqAjbdTEK19AGXBWcEtR5WpEQg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-menubar@1.0.4':
-    resolution: {integrity: sha512-bHgUo9gayKZfaQcWSSLr++LyS0rgh+MvD89DE4fJ6TkGHvjHgPaBZf44hdka7ogOxIOdj9163J+5xL2Dn4qzzg==}
+  '@radix-ui/react-menubar@1.1.5':
+    resolution: {integrity: sha512-Kzbpcf2bxUmI/G+949+LvSvGkyzIaY7ctb8loydt6YpJR8pQF+j4QbVhYvjs7qxaWK0DEJL3XbP2p46YPRkS3A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-navigation-menu@1.1.4':
-    resolution: {integrity: sha512-Cc+seCS3PmWmjI51ufGG7zp1cAAIRqHVw7C9LOA2TZ+R4hG6rDvHcTqIsEEFLmZO3zNVH72jOOE7kKNy8W+RtA==}
+  '@radix-ui/react-navigation-menu@1.2.4':
+    resolution: {integrity: sha512-wUi01RrTDTOoGtjEPHsxlzPtVzVc3R/AZ5wfh0dyqMAqolhHAHvG5iQjBCTi2AjQqa77FWWbA3kE3RkD+bDMgQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popover@1.0.7':
-    resolution: {integrity: sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==}
+  '@radix-ui/react-popover@1.1.5':
+    resolution: {integrity: sha512-YXkTAftOIW2Bt3qKH8vYr6n9gCkVrvyvfiTObVjoHVTHnNj26rmvO87IKa3VgtgCjb8FAQ6qOjNViwl+9iIzlg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popper@1.1.3':
-    resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
+  '@radix-ui/react-popper@1.2.1':
+    resolution: {integrity: sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-portal@1.0.4':
-    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
+  '@radix-ui/react-portal@1.1.3':
+    resolution: {integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-presence@1.0.1':
-    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+  '@radix-ui/react-presence@1.1.2':
+    resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-primitive@1.0.3':
-    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+  '@radix-ui/react-primitive@2.0.1':
+    resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-primitive@2.0.0':
-    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
+  '@radix-ui/react-progress@1.1.1':
+    resolution: {integrity: sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2785,202 +2507,171 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-progress@1.0.3':
-    resolution: {integrity: sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==}
+  '@radix-ui/react-radio-group@1.2.2':
+    resolution: {integrity: sha512-E0MLLGfOP0l8P/NxgVzfXJ8w3Ch8cdO6UDzJfDChu4EJDy+/WdO5LqpdY8PYnCErkmZH3gZhDL1K7kQ41fAHuQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-radio-group@1.1.3':
-    resolution: {integrity: sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==}
+  '@radix-ui/react-roving-focus@1.1.1':
+    resolution: {integrity: sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-roving-focus@1.0.4':
-    resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
+  '@radix-ui/react-scroll-area@1.2.2':
+    resolution: {integrity: sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-scroll-area@1.0.5':
-    resolution: {integrity: sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==}
+  '@radix-ui/react-select@2.1.5':
+    resolution: {integrity: sha512-eVV7N8jBXAXnyrc+PsOF89O9AfVgGnbLxUtBb0clJ8y8ENMWLARGMI/1/SBRLz7u4HqxLgN71BJ17eono3wcjA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-select@2.0.0':
-    resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==}
+  '@radix-ui/react-separator@1.1.1':
+    resolution: {integrity: sha512-RRiNRSrD8iUiXriq/Y5n4/3iE8HzqgLHsusUSg5jVpU2+3tqcUFPJXHDymwEypunc2sWxDUS3UC+rkZRlHedsw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-separator@1.0.3':
-    resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
+  '@radix-ui/react-slider@1.2.2':
+    resolution: {integrity: sha512-sNlU06ii1/ZcbHf8I9En54ZPW0Vil/yPVg4vQMcFNjrIx51jsHbFl1HYHQvCIWJSr1q0ZmA+iIs/ZTv8h7HHSA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-slider@1.1.2':
-    resolution: {integrity: sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==}
+  '@radix-ui/react-slot@1.1.1':
+    resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-slot@1.0.2':
-    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-slot@1.1.0':
-    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-switch@1.0.3':
-    resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==}
+  '@radix-ui/react-switch@1.1.2':
+    resolution: {integrity: sha512-zGukiWHjEdBCRyXvKR6iXAQG6qXm2esuAD6kDOi9Cn+1X6ev3ASo4+CsYaD6Fov9r/AQFekqnD/7+V0Cs6/98g==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-tabs@1.0.4':
-    resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==}
+  '@radix-ui/react-tabs@1.1.2':
+    resolution: {integrity: sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-toast@1.1.5':
-    resolution: {integrity: sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==}
+  '@radix-ui/react-toast@1.2.5':
+    resolution: {integrity: sha512-ZzUsAaOx8NdXZZKcFNDhbSlbsCUy8qQWmzTdgrlrhhZAOx2ofLtKrBDW9fkqhFvXgmtv560Uj16pkLkqML7SHA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-toggle-group@1.0.4':
-    resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==}
+  '@radix-ui/react-toggle-group@1.1.1':
+    resolution: {integrity: sha512-OgDLZEA30Ylyz8YSXvnGqIHtERqnUt1KUYTKdw/y8u7Ci6zGiJfXc02jahmcSNK3YcErqioj/9flWC9S1ihfwg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-toggle@1.0.3':
-    resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==}
+  '@radix-ui/react-toggle@1.1.1':
+    resolution: {integrity: sha512-i77tcgObYr743IonC1hrsnnPmszDRn8p+EGUsUt+5a/JFn28fxaM88Py6V2mc8J5kELMWishI0rLnuGLFD/nnQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-tooltip@1.0.7':
-    resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
+  '@radix-ui/react-tooltip@1.1.7':
+    resolution: {integrity: sha512-ss0s80BC0+g0+Zc53MvilcnTYSOi4mSuFWBPYPuTOFGjx+pUU+ZrmamMNwS56t8MTFlniA5ocjd4jYm/CdhbOg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-use-callback-ref@1.0.1':
-    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-use-callback-ref@1.1.0':
     resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
     peerDependencies:
@@ -2990,15 +2681,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-controllable-state@1.0.1':
-    resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-use-controllable-state@1.1.0':
     resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
     peerDependencies:
@@ -3008,177 +2690,147 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-escape-keydown@1.0.3':
-    resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
+  '@radix-ui/react-use-escape-keydown@1.1.0':
+    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-layout-effect@1.0.1':
-    resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+  '@radix-ui/react-use-layout-effect@1.1.0':
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-previous@1.0.1':
-    resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
+  '@radix-ui/react-use-previous@1.1.0':
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-rect@1.0.1':
-    resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
+  '@radix-ui/react-use-rect@1.1.0':
+    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-size@1.0.1':
-    resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
+  '@radix-ui/react-use-size@1.1.0':
+    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-visually-hidden@1.0.3':
-    resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
+  '@radix-ui/react-visually-hidden@1.1.1':
+    resolution: {integrity: sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/rect@1.0.1':
-    resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
+  '@radix-ui/rect@1.1.0':
+    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
 
-  '@react-aria/focus@3.17.1':
-    resolution: {integrity: sha512-FLTySoSNqX++u0nWZJPPN5etXY0WBxaIe/YuL/GTEeuqUIuC/2bJSaw5hlsM6T2yjy6Y/VAxBcKSdAFUlU6njQ==}
+  '@react-aria/focus@3.19.1':
+    resolution: {integrity: sha512-bix9Bu1Ue7RPcYmjwcjhB14BMu2qzfJ3tMQLqDc9pweJA66nOw8DThy3IfVr8Z7j2PHktOLf9kcbiZpydKHqzg==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@react-aria/interactions@3.21.3':
-    resolution: {integrity: sha512-BWIuf4qCs5FreDJ9AguawLVS0lV9UU+sK4CCnbCNNmYqOWY+1+gRXCsnOM32K+oMESBxilAjdHW5n1hsMqYMpA==}
+  '@react-aria/interactions@3.23.0':
+    resolution: {integrity: sha512-0qR1atBIWrb7FzQ+Tmr3s8uH5mQdyRH78n0krYaG8tng9+u1JlSi8DGRSaC9ezKyNB84m7vHT207xnHXGeJ3Fg==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@react-aria/ssr@3.9.4':
-    resolution: {integrity: sha512-4jmAigVq409qcJvQyuorsmBR4+9r3+JEC60wC+Y0MZV0HCtTmm8D9guYXlJMdx0SSkgj0hHAyFm/HvPNFofCoQ==}
+  '@react-aria/ssr@3.9.7':
+    resolution: {integrity: sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==}
     engines: {node: '>= 12'}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@react-aria/utils@3.24.1':
-    resolution: {integrity: sha512-O3s9qhPMd6n42x9sKeJ3lhu5V1Tlnzhu6Yk8QOvDuXf7UGuUjXf9mzfHJt1dYzID4l9Fwm8toczBzPM9t0jc8Q==}
+  '@react-aria/utils@3.27.0':
+    resolution: {integrity: sha512-p681OtApnKOdbeN8ITfnnYqfdHS0z7GE+4l8EXlfLnr70Rp/9xicBO6d2rU+V/B3JujDw2gPWxYKEnEeh0CGCw==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-
-  '@react-native-community/cli-clean@13.6.8':
-    resolution: {integrity: sha512-B1uxlm1N4BQuWFvBL3yRl3LVvydjswsdbTi7tMrHMtSxfRio1p9HjcmDzlzKco09Y+8qBGgakm3jcMZGLbhXQQ==}
-
-  '@react-native-community/cli-config@13.6.8':
-    resolution: {integrity: sha512-RabCkIsWdP4Ex/sf1uSP9qxc30utm+0uIJAjrZkNQynm7T4Lyqn/kT3LKm4yM6M0Qk61YxGguiaXF4601vAduw==}
-
-  '@react-native-community/cli-debugger-ui@13.6.8':
-    resolution: {integrity: sha512-2cS+MX/Su6sVSjqpDftFOXbK7EuPg98xzsPkdPhkQnkZwvXqodK9CAMuDMbx3lBHHtrPrpMbBCpFmPN8iVOnlA==}
-
-  '@react-native-community/cli-doctor@13.6.8':
-    resolution: {integrity: sha512-/3Vdy9J3hyiu0y3nd/CU3kBqPlTRxnLXg7V6jrA1jbTOlZAMyV9imEkrqEaGK0SMOyMhh9Pipf98Ozhk0Nl4QA==}
-
-  '@react-native-community/cli-hermes@13.6.8':
-    resolution: {integrity: sha512-lZi/OBFuZUj5cLK94oEgtrtmxGoqeYVRcnHXl/R5c4put9PDl+qH2bEMlGZkFiw57ae3UZKr3TMk+1s4jh3FYQ==}
-
-  '@react-native-community/cli-platform-android@13.6.8':
-    resolution: {integrity: sha512-vWrqeLRRTwp2kO33nbrAgbYn8HR2c2CpIfyVJY9Ckk7HGUSwDyxdcSu7YBvt2ShdfLZH0HctWFNXsgGrfg6BDw==}
-
-  '@react-native-community/cli-platform-apple@13.6.8':
-    resolution: {integrity: sha512-1JPohnlXPqU44zns3ALEzIbH2cKRw6JtEDJERgLuEUbs2r2NeJgqDbKyZ7fTTO8o+pegDnn6+Rr7qGVVOuUzzg==}
-
-  '@react-native-community/cli-platform-ios@13.6.8':
-    resolution: {integrity: sha512-/IIcIRM8qaoD7iZqsvtf6Qq1AwtChWYfB9sTn3mTiolZ5Zd5bXH37g+6liPfAICRkj2Ptq3iXmjrDVUQAxrOXw==}
-
-  '@react-native-community/cli-server-api@13.6.8':
-    resolution: {integrity: sha512-Lx664oWTzpVfbKUTy+3GIX7e+Mt5Zn+zdkM4ehllNdik/lbB3tM9Nrg8PSvOfI+tTXs2w55+nIydLfH+0FqJVg==}
-
-  '@react-native-community/cli-tools@13.6.8':
-    resolution: {integrity: sha512-1MYlae9EkbjC7DBYOGMH5xF9yDoeNYUKgEdDjL6WAUBoF2gtwiZPM6igLKi/+dhb5sCtC7fiLrLi0Oevdf+RmQ==}
-
-  '@react-native-community/cli-types@13.6.8':
-    resolution: {integrity: sha512-C4mVByy0i+/NPuPhdMLBR7ubEVkjVS1VwoQu/BoG1crJFNE+167QXAzH01eFbXndsjZaMWmD4Gerx7TYc6lHfA==}
-
-  '@react-native-community/cli@13.6.8':
-    resolution: {integrity: sha512-0lRdgLNaXixWY4BfFRl1J6Ao9Lapo2z+++iE7TD4GAbuxOWJSyFi+KUA8XNfSDyML4jFO02MZgyBPxAWdaminQ==}
-    engines: {node: '>=18'}
-    hasBin: true
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@react-native/assets-registry@0.74.84':
-    resolution: {integrity: sha512-dzUhwyaX04QosWZ8zyaaNB/WYZIdeDN1lcpfQbqiOhZJShRH+FLTDVONE/dqlMQrP+EO7lDqF0RrlIt9lnOCQQ==}
+  '@react-native/assets-registry@0.77.0':
+    resolution: {integrity: sha512-Ms4tYYAMScgINAXIhE4riCFJPPL/yltughHS950l0VP5sm5glbimn9n7RFn9Tc8cipX74/ddbk19+ydK2iDMmA==}
     engines: {node: '>=18'}
 
-  '@react-native/babel-plugin-codegen@0.74.84':
-    resolution: {integrity: sha512-UR4uiii5szIJA84mSC6GJOfYKDq7/ThyetOQT62+BBcyGeHVtHlNLNRzgaMeLqIQaT8Fq4pccMI+7QqLOMXzdw==}
+  '@react-native/babel-plugin-codegen@0.77.0':
+    resolution: {integrity: sha512-5TYPn1k+jdDOZJU4EVb1kZ0p9TCVICXK3uplRev5Gul57oWesAaiWGZOzfRS3lonWeuR4ij8v8PFfIHOaq0vmA==}
     engines: {node: '>=18'}
 
-  '@react-native/babel-preset@0.74.84':
-    resolution: {integrity: sha512-WUfu6Y4aGuVdocQZvx33BJiQWFH6kRCHYbZfBn2psgFrSRLgQWEQrDCxqPFObNAVSayM0rNhp2FvI5K/Eyeqlg==}
+  '@react-native/babel-preset@0.77.0':
+    resolution: {integrity: sha512-Z4yxE66OvPyQ/iAlaETI1ptRLcDm7Tk6ZLqtCPuUX3AMg+JNgIA86979T4RSk486/JrBUBH5WZe2xjj7eEHXsA==}
     engines: {node: '>=18'}
     peerDependencies:
       '@babel/core': '*'
 
-  '@react-native/codegen@0.74.84':
-    resolution: {integrity: sha512-0hXlnu9i0o8v+gXKQi+x6T471L85kCDwW4WrJiYAeOheWrQdNNW6rC3g8+LL7HXAf7QcHGU/8/d57iYfdVK2BQ==}
+  '@react-native/codegen@0.77.0':
+    resolution: {integrity: sha512-rE9lXx41ZjvE8cG7e62y/yGqzUpxnSvJ6me6axiX+aDewmI4ZrddvRGYyxCnawxy5dIBHSnrpZse3P87/4Lm7w==}
     engines: {node: '>=18'}
     peerDependencies:
       '@babel/preset-env': ^7.1.6
 
-  '@react-native/community-cli-plugin@0.74.84':
-    resolution: {integrity: sha512-GBKE+1sUh86fS2XXV46gMCNHMc1KetshMbYJ0AhDhldpaILZHqRBX50mdVsiYVvkzp4QjM0nmYqefuJ9NVwicQ==}
+  '@react-native/community-cli-plugin@0.77.0':
+    resolution: {integrity: sha512-GRshwhCHhtupa3yyCbel14SlQligV8ffNYN5L1f8HCo2SeGPsBDNjhj2U+JTrMPnoqpwowPGvkCwyqwqYff4MQ==}
     engines: {node: '>=18'}
+    peerDependencies:
+      '@react-native-community/cli-server-api': '*'
+    peerDependenciesMeta:
+      '@react-native-community/cli-server-api':
+        optional: true
 
-  '@react-native/debugger-frontend@0.74.84':
-    resolution: {integrity: sha512-YUEA03UNFbiYzHpYxlcS2D9+3eNT5YLGkl5yRg3nOSN6KbCc/OttGnNZme+tuSOJwjMN/vcvtDKYkTqjJw8U0A==}
+  '@react-native/debugger-frontend@0.77.0':
+    resolution: {integrity: sha512-glOvSEjCbVXw+KtfiOAmrq21FuLE1VsmBsyT7qud4KWbXP43aUEhzn70mWyFuiIdxnzVPKe2u8iWTQTdJksR1w==}
     engines: {node: '>=18'}
 
-  '@react-native/dev-middleware@0.74.84':
-    resolution: {integrity: sha512-veYw/WmyrAOQHUiIeULzn2duJQnXDPiKq2jZ/lcmDo6jsLirpp+Q73lx09TYgy/oVoPRuV0nfmU3x9B6EV/7qQ==}
+  '@react-native/dev-middleware@0.77.0':
+    resolution: {integrity: sha512-DAlEYujm43O+Dq98KP2XfLSX5c/TEGtt+JBDEIOQewk374uYY52HzRb1+Gj6tNaEj/b33no4GibtdxbO5zmPhg==}
     engines: {node: '>=18'}
 
-  '@react-native/gradle-plugin@0.74.84':
-    resolution: {integrity: sha512-wYWC5WWXqzCCe4PDogz9pNc4xH5ZamahW5XGSbrrYJ5V3walZ+7z43V6iEBJkZbLjj9YBcSttkXYGr1Xh4veAg==}
+  '@react-native/gradle-plugin@0.77.0':
+    resolution: {integrity: sha512-rmfh93jzbndSq7kihYHUQ/EGHTP8CCd3GDCmg5SbxSOHAaAYx2HZ28ZG7AVcGUsWeXp+e/90zGIyfOzDRx0Zaw==}
     engines: {node: '>=18'}
 
-  '@react-native/js-polyfills@0.74.84':
-    resolution: {integrity: sha512-+PgxuUjBw9JVlz6m4ECsIJMLbDopnr4rpLmsG32hQaJrg0wMuvHtsgAY/J/aVCSG2GNUXexfjrnhc+O9yGOZXQ==}
+  '@react-native/js-polyfills@0.77.0':
+    resolution: {integrity: sha512-kHFcMJVkGb3ptj3yg1soUsMHATqal4dh0QTGAbYihngJ6zy+TnP65J3GJq4UlwqFE9K1RZkeCmTwlmyPFHOGvA==}
     engines: {node: '>=18'}
 
-  '@react-native/metro-babel-transformer@0.74.84':
-    resolution: {integrity: sha512-YtVGq7jkgyUECv5yt4BOFbOXyW4ddUn8+dnwGGpJKdfhXYL5o5++AxNdE+2x+SZdkj3JUVekGKPwRabFECABaw==}
+  '@react-native/metro-babel-transformer@0.77.0':
+    resolution: {integrity: sha512-19GfvhBRKCU3UDWwCnDR4QjIzz3B2ZuwhnxMRwfAgPxz7QY9uKour9RGmBAVUk1Wxi/SP7dLEvWnmnuBO39e2A==}
     engines: {node: '>=18'}
     peerDependencies:
       '@babel/core': '*'
 
-  '@react-native/normalize-colors@0.74.84':
-    resolution: {integrity: sha512-Y5W6x8cC5RuakUcTVUFNAIhUZ/tYpuqHZlRBoAuakrTwVuoNHXfQki8lj1KsYU7rW6e3VWgdEx33AfOQpdNp6A==}
+  '@react-native/normalize-colors@0.77.0':
+    resolution: {integrity: sha512-qjmxW3xRZe4T0ZBEaXZNHtuUbRgyfybWijf1yUuQwjBt24tSapmIslwhCjpKidA0p93ssPcepquhY0ykH25mew==}
 
-  '@react-native/virtualized-lists@0.74.84':
-    resolution: {integrity: sha512-XcV+qdqt2WihaY4iRm/M1FdSy+18lecU9mRXNmy9YK8g9Th/8XbNtmmKI0qWBx3KxyuXMH/zd0ps05YTrX16kw==}
+  '@react-native/virtualized-lists@0.77.0':
+    resolution: {integrity: sha512-ppPtEu9ISO9iuzpA2HBqrfmDpDAnGGduNDVaegadOzbMCPAB3tC9Blxdu9W68LyYlNQILIsP6/FYtLwf7kfNew==}
     engines: {node: '>=18'}
     peerDependencies:
       '@types/react': ^18.2.6
@@ -3188,72 +2840,75 @@ packages:
       '@types/react':
         optional: true
 
-  '@react-spring/animated@9.7.3':
-    resolution: {integrity: sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==}
+  '@react-spring/animated@9.7.5':
+    resolution: {integrity: sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  '@react-spring/core@9.7.3':
-    resolution: {integrity: sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==}
+  '@react-spring/core@9.7.5':
+    resolution: {integrity: sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  '@react-spring/konva@9.7.3':
-    resolution: {integrity: sha512-R9sY6SiPGYqz1383P5qppg5z57YfChVknOC1UxxaGxpw+WiZa8fZ4zmZobslrw+os3/+HAXZv8O+EvU/nQpf7g==}
+  '@react-spring/konva@9.7.5':
+    resolution: {integrity: sha512-BelrmyY6w0FGoNSEfSJltjQDUoW0Prxf+FzGjyLuLs+V9M9OM/aHnYqOlvQEfQsZx6C/ZiDOn5BZl8iH8SDf+Q==}
     peerDependencies:
       konva: '>=2.6'
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-konva: ^16.8.0 || ^16.8.7-0 || ^16.9.0-0 || ^16.10.1-0 || ^16.12.0-0 || ^16.13.0-0 || ^17.0.0-0 || ^17.0.1-0 || ^17.0.2-0 || ^18.0.0-0
 
-  '@react-spring/native@9.7.3':
-    resolution: {integrity: sha512-4mpxX3FuEBCUT6ae2fjhxcJW6bhr2FBwFf274eXB7n+U30Gdg8Wo2qYwcUnmiAA0S3dvP8vLTazx3+CYWFShnA==}
+  '@react-spring/native@9.7.5':
+    resolution: {integrity: sha512-C1S500BNP1I05MftElyLv2nIqaWQ0MAByOAK/p4vuXcUK3XcjFaAJ385gVLgV2rgKfvkqRoz97PSwbh+ZCETEg==}
     peerDependencies:
-      react: ^16.8.0  || >=17.0.0 || >=18.0.0
+      react: 16.8.0  || >=17.0.0 || >=18.0.0
       react-native: '>=0.58'
 
-  '@react-spring/shared@9.7.3':
-    resolution: {integrity: sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==}
+  '@react-spring/rafz@9.7.5':
+    resolution: {integrity: sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==}
+
+  '@react-spring/shared@9.7.5':
+    resolution: {integrity: sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  '@react-spring/three@9.7.3':
-    resolution: {integrity: sha512-Q1p512CqUlmMK8UMBF/Rj79qndhOWq4XUTayxMP9S892jiXzWQuj+xC3Xvm59DP/D4JXusXpxxqfgoH+hmOktA==}
+  '@react-spring/three@9.7.5':
+    resolution: {integrity: sha512-RxIsCoQfUqOS3POmhVHa1wdWS0wyHAUway73uRLp3GAL5U2iYVNdnzQsep6M2NZ994BlW8TcKuMtQHUqOsy6WA==}
     peerDependencies:
       '@react-three/fiber': '>=6.0'
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       three: '>=0.126'
 
-  '@react-spring/types@9.7.3':
-    resolution: {integrity: sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==}
+  '@react-spring/types@9.7.5':
+    resolution: {integrity: sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==}
 
-  '@react-spring/web@9.7.3':
-    resolution: {integrity: sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==}
+  '@react-spring/web@9.7.5':
+    resolution: {integrity: sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  '@react-spring/zdog@9.7.3':
-    resolution: {integrity: sha512-L+yK/1PvNi9n8cldiJ309k4LdxcPkeWE0W18l1zrP1IBIyd5NB5EPA8DMsGr9gtNnnIujtEzZk+4JIOjT8u/tw==}
+  '@react-spring/zdog@9.7.5':
+    resolution: {integrity: sha512-VV7vmb52wGHgDA1ry6hv+QgxTs78fqjKEQnj+M8hiBg+dwOsTtqqM24ADtc4cMAhPW+eZhVps8ZNKtjt8ouHFA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-zdog: '>=1.0'
       zdog: '>=1.0'
 
-  '@react-stately/utils@3.10.1':
-    resolution: {integrity: sha512-VS/EHRyicef25zDZcM/ClpzYMC5i2YGN6uegOeQawmgfGjb02yaCX0F0zR69Pod9m2Hr3wunTbtpgVXvYbZItg==}
+  '@react-stately/utils@3.10.5':
+    resolution: {integrity: sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@react-three/fiber@8.16.8':
-    resolution: {integrity: sha512-Lc8fjATtvQEfSd8d5iKdbpHtRm/aPMeFj7jQvp6TNHfpo8IQTW3wwcE1ZMrGGoUH+w2mnyS+0MK1NLPLnuzGkQ==}
+  '@react-three/fiber@8.17.14':
+    resolution: {integrity: sha512-Al2Zdhn5vRefK0adJXNDputuM8hwRNh3goH8MCzf06gezZBbEsdmjt5IrHQQ8Rpr7l/znx/ipLUQuhiiVhxifQ==}
     peerDependencies:
       expo: '>=43.0'
       expo-asset: '>=8.4'
       expo-file-system: '>=11.0'
       expo-gl: '>=11.0'
-      react: '>=18.0'
-      react-dom: '>=18.0'
+      react: '>=18 <19'
+      react-dom: '>=18 <19'
       react-native: '>=0.64'
       three: '>=0.133'
     peerDependenciesMeta:
@@ -3270,118 +2925,120 @@ packages:
       react-native:
         optional: true
 
-  '@react-types/shared@3.23.1':
-    resolution: {integrity: sha512-5d+3HbFDxGZjhbMBeFHRQhexMFt4pUce3okyRtUVKbbedQFUrtXSBg9VszgF2RTeQDKDkMCIQDtz5ccP/Lk1gw==}
+  '@react-types/shared@3.27.0':
+    resolution: {integrity: sha512-gvznmLhi6JPEf0bsq7SwRYTHAKKq/wcmKqFez9sRdbED+SPMUmK5omfZ6w3EwUFQHbYUa4zPBYedQ7Knv70RMw==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-
-  '@rnx-kit/chromium-edge-launcher@1.0.0':
-    resolution: {integrity: sha512-lzD84av1ZQhYUS+jsGqJiCMaJO2dn9u+RTT9n9q6D3SaKVwWqv+7AoRKqBu19bkwyE+iFRl1ymr40QS90jVFYg==}
-    engines: {node: '>=14.15'}
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@rollup/rollup-android-arm-eabi@4.24.0':
-    resolution: {integrity: sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==}
+  '@rollup/rollup-android-arm-eabi@4.34.2':
+    resolution: {integrity: sha512-6Fyg9yQbwJR+ykVdT9sid1oc2ewejS6h4wzQltmJfSW53N60G/ah9pngXGANdy9/aaE/TcUFpWosdm7JXS1WTQ==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.24.0':
-    resolution: {integrity: sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==}
+  '@rollup/rollup-android-arm64@4.34.2':
+    resolution: {integrity: sha512-K5GfWe+vtQ3kyEbihrimM38UgX57UqHp+oME7X/EX9Im6suwZfa7Hsr8AtzbJvukTpwMGs+4s29YMSO3rwWtsw==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.24.0':
-    resolution: {integrity: sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==}
+  '@rollup/rollup-darwin-arm64@4.34.2':
+    resolution: {integrity: sha512-PSN58XG/V/tzqDb9kDGutUruycgylMlUE59f40ny6QIRNsTEIZsrNQTJKUN2keMMSmlzgunMFqyaGLmly39sug==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.24.0':
-    resolution: {integrity: sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==}
+  '@rollup/rollup-darwin-x64@4.34.2':
+    resolution: {integrity: sha512-gQhK788rQJm9pzmXyfBB84VHViDERhAhzGafw+E5mUpnGKuxZGkMVDa3wgDFKT6ukLC5V7QTifzsUKdNVxp5qQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.24.0':
-    resolution: {integrity: sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==}
+  '@rollup/rollup-freebsd-arm64@4.34.2':
+    resolution: {integrity: sha512-eiaHgQwGPpxLC3+zTAcdKl4VsBl3r0AiJOd1Um/ArEzAjN/dbPK1nROHrVkdnoE6p7Svvn04w3f/jEZSTVHunA==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.34.2':
+    resolution: {integrity: sha512-lhdiwQ+jf8pewYOTG4bag0Qd68Jn1v2gO1i0mTuiD+Qkt5vNfHVK/jrT7uVvycV8ZchlzXp5HDVmhpzjC6mh0g==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.2':
+    resolution: {integrity: sha512-lfqTpWjSvbgQP1vqGTXdv+/kxIznKXZlI109WkIFPbud41bjigjNmOAAKoazmRGx+k9e3rtIdbq2pQZPV1pMig==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.24.0':
-    resolution: {integrity: sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==}
+  '@rollup/rollup-linux-arm-musleabihf@4.34.2':
+    resolution: {integrity: sha512-RGjqULqIurqqv+NJTyuPgdZhka8ImMLB32YwUle2BPTDqDoXNgwFjdjQC59FbSk08z0IqlRJjrJ0AvDQ5W5lpw==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.24.0':
-    resolution: {integrity: sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==}
+  '@rollup/rollup-linux-arm64-gnu@4.34.2':
+    resolution: {integrity: sha512-ZvkPiheyXtXlFqHpsdgscx+tZ7hoR59vOettvArinEspq5fxSDSgfF+L5wqqJ9R4t+n53nyn0sKxeXlik7AY9Q==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.24.0':
-    resolution: {integrity: sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==}
+  '@rollup/rollup-linux-arm64-musl@4.34.2':
+    resolution: {integrity: sha512-UlFk+E46TZEoxD9ufLKDBzfSG7Ki03fo6hsNRRRHF+KuvNZ5vd1RRVQm8YZlGsjcJG8R252XFK0xNPay+4WV7w==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.24.0':
-    resolution: {integrity: sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==}
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.2':
+    resolution: {integrity: sha512-hJhfsD9ykx59jZuuoQgYT1GEcNNi3RCoEmbo5OGfG8RlHOiVS7iVNev9rhLKh7UBYq409f4uEw0cclTXx8nh8Q==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.2':
+    resolution: {integrity: sha512-g/O5IpgtrQqPegvqopvmdCF9vneLE7eqYfdPWW8yjPS8f63DNam3U4ARL1PNNB64XHZDHKpvO2Giftf43puB8Q==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.24.0':
-    resolution: {integrity: sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==}
+  '@rollup/rollup-linux-riscv64-gnu@4.34.2':
+    resolution: {integrity: sha512-bSQijDC96M6PuooOuXHpvXUYiIwsnDmqGU8+br2U7iPoykNi9JtMUpN7K6xml29e0evK0/g0D1qbAUzWZFHY5Q==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.24.0':
-    resolution: {integrity: sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==}
+  '@rollup/rollup-linux-s390x-gnu@4.34.2':
+    resolution: {integrity: sha512-49TtdeVAsdRuiUHXPrFVucaP4SivazetGUVH8CIxVsNsaPHV4PFkpLmH9LeqU/R4Nbgky9lzX5Xe1NrzLyraVA==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.24.0':
-    resolution: {integrity: sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==}
+  '@rollup/rollup-linux-x64-gnu@4.34.2':
+    resolution: {integrity: sha512-j+jFdfOycLIQ7FWKka9Zd3qvsIyugg5LeZuHF6kFlXo6MSOc6R1w37YUVy8VpAKd81LMWGi5g9J25P09M0SSIw==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.24.0':
-    resolution: {integrity: sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==}
+  '@rollup/rollup-linux-x64-musl@4.34.2':
+    resolution: {integrity: sha512-aDPHyM/D2SpXfSNCVWCxyHmOqN9qb7SWkY1+vaXqMNMXslZYnwh9V/UCudl6psyG0v6Ukj7pXanIpfZwCOEMUg==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-win32-arm64-msvc@4.24.0':
-    resolution: {integrity: sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==}
+  '@rollup/rollup-win32-arm64-msvc@4.34.2':
+    resolution: {integrity: sha512-LQRkCyUBnAo7r8dbEdtNU08EKLCJMgAk2oP5H3R7BnUlKLqgR3dUjrLBVirmc1RK6U6qhtDw29Dimeer8d5hzQ==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.24.0':
-    resolution: {integrity: sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==}
+  '@rollup/rollup-win32-ia32-msvc@4.34.2':
+    resolution: {integrity: sha512-wt8OhpQUi6JuPFkm1wbVi1BByeag87LDFzeKSXzIdGcX4bMLqORTtKxLoCbV57BHYNSUSOKlSL4BYYUghainYA==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.24.0':
-    resolution: {integrity: sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==}
+  '@rollup/rollup-win32-x64-msvc@4.34.2':
+    resolution: {integrity: sha512-rUrqINax0TvrPBXrFKg0YbQx18NpPN3NNrgmaao9xRNbTwek7lOXObhx8tQy8gelmQ/gLaGy1WptpU2eKJZImg==}
     cpu: [x64]
     os: [win32]
 
-  '@shikijs/core@1.21.1':
-    resolution: {integrity: sha512-scBQo4V4O4WZLEDg11e75UPmXoCMq4Ya2A16U6efi/aTiR4o7T/GMNWZs2rq1U8dEvFKGxJZxiUy+tXgmr/4vw==}
-
-  '@shikijs/engine-javascript@1.21.1':
-    resolution: {integrity: sha512-29EG4KYKlAona8yikEx8uoKbK7N2YoXUO26LS1GOIxpMMIAlQS9UFONg95lkGmIfp1rRcvCvSpYYIJ/blsQxvg==}
-
-  '@shikijs/engine-oniguruma@1.21.1':
-    resolution: {integrity: sha512-PvfEtXCDbQZc9ud0SC0bPiuMbul44Cv0Ky2go4SsvVkYAAKYJsMe/Hx7nxThW8yS0r+w8USa0WfOtQKsD9DU9A==}
-
-  '@shikijs/types@1.21.1':
-    resolution: {integrity: sha512-yLuTJTCHmYznerJ0nxF+f2rBKHQf2FMAd08QL/3du2xNBy/7yQ8CjuKN4Zc+Pk0vfIFzdBoxdzvEXE4JtXoR4Q==}
+  '@shikijs/core@1.20.0':
+    resolution: {integrity: sha512-KlO3iE0THzSdYkzDFugt8SHe6FR3qNYTkmpbdW1d6xo8juQkMjybxAw/cBi2npL2eb2F4PbbnSs5Z9tDusfvyg==}
 
-  '@shikijs/vscode-textmate@9.3.0':
-    resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==}
+  '@shikijs/engine-javascript@1.20.0':
+    resolution: {integrity: sha512-ZUMo758uduM0Tfgzi/kd+0IKMbNdumCxxWjY36uf1DIs2Qyg9HIq3vA1Wfa/vc6HE7tHWFpANRi3mv7UzJ68MQ==}
 
-  '@sideway/address@4.1.5':
-    resolution: {integrity: sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==}
+  '@shikijs/engine-oniguruma@1.20.0':
+    resolution: {integrity: sha512-MQ40WkVTZk7by33ces4PGK6XNFSo6PYvKTSAr2kTWdRNhFmOcnaX+1XzvFwB26eySXR7U74t91czZ1qJkEgxTA==}
 
-  '@sideway/formula@3.0.1':
-    resolution: {integrity: sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==}
+  '@shikijs/types@1.20.0':
+    resolution: {integrity: sha512-y+EaDvU2K6/GaXOKXxJaGnr1XtmZMF7MfS0pSEDdxEq66gCtKsLwQvVwoQFdp7R7dLlNAro3ijEE19sMZ0pzqg==}
 
-  '@sideway/pinpoint@2.0.0':
-    resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}
+  '@shikijs/vscode-textmate@9.3.1':
+    resolution: {integrity: sha512-79QfK1393x9Ho60QFyLti+QfdJzRQCVLFb97kOIV7Eo9vQU/roINgk7m24uv0a7AUvN//RDH36FLjjK48v0s9g==}
 
   '@sinclair/typebox@0.27.8':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
@@ -3392,72 +3049,11 @@ packages:
   '@sinonjs/fake-timers@10.3.0':
     resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
 
-  '@stylistic/eslint-plugin-js@2.2.0':
-    resolution: {integrity: sha512-pdkNeVORubs+k7jmhHivYXggoFvw1ykAyGBQomodOYO8MhO8/IM798XVyjadC6EeTeBiXlEWYRy/4QV34hDz+A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=8.40.0'
-
-  '@stylistic/eslint-plugin-js@2.6.0-beta.0':
-    resolution: {integrity: sha512-KQiNvzNzvl9AmMs1MiIBszLIy/Xy1bTExnyaVy5dSzOF9c+yT64JQfH0p0jP6XpGwoCnZsrPUNflwP30G42QBQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=8.40.0'
-
-  '@stylistic/eslint-plugin-jsx@2.2.0':
-    resolution: {integrity: sha512-1aHeR68inrbEFGJZ80rOMHK8gIzTboF4DgmF0eR5KJ+wgxkhlEasZKhsuDrrgXn4xaUIgbMzCeHg9Rw0AtqR9w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=8.40.0'
-
-  '@stylistic/eslint-plugin-jsx@2.6.0-beta.0':
-    resolution: {integrity: sha512-TOimEpr3vndXHRhuQ5gMqmJv1SBlFI3poIJzyeNMmXi3NWVHoPxfd4QAJHGNJe5G3EO2NAXGf2H7nl8gY5QaZA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=8.40.0'
-
-  '@stylistic/eslint-plugin-plus@2.2.0':
-    resolution: {integrity: sha512-BVgtMc+oepdEuDkhsCX8ZLD32AIWC2cyhxmz/ku9WJjrfB4eF2qNb/chr7x2SyN+nlJIz/Vl5aSIa3aKAWylBA==}
-    peerDependencies:
-      eslint: '*'
-
-  '@stylistic/eslint-plugin-plus@2.6.0-beta.0':
-    resolution: {integrity: sha512-Wp+e4sTbFq0Uk5ncU3PETYfg1IcCZ1KycdlqFYXIA7/bgcieeShXouXUcA+S/S5+gWLXGuVJ12IxNzY8yfe4IA==}
-    peerDependencies:
-      eslint: '*'
-
-  '@stylistic/eslint-plugin-ts@2.2.0':
-    resolution: {integrity: sha512-34KDq7G1+PpFH9BT3DQyRjy82K1A1Fb/ywr1v4xjs77r/kRIMduadkwHoyj4fCMFTqkW3ML7qZ0jNV2OjdoR8g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=8.40.0'
-
-  '@stylistic/eslint-plugin-ts@2.6.0-beta.0':
-    resolution: {integrity: sha512-WMz1zgmMC3bvg1L/tiYt5ygvDbTDKlbezoHoX2lV9MnUCAEQZUP4xJ9Wj3jmIKxb4mUuK5+vFZJVcOygvbbqow==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=8.40.0'
-
-  '@stylistic/eslint-plugin@2.2.0':
-    resolution: {integrity: sha512-qJfzH3M83vpFssPkeS559uj6PbAn8Z54C1zTrKOaH1ooSH54bmPvJ2v3Zh+PRWJ0YscLz43TxQhgmlPD53ZJ9w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=8.40.0'
-
-  '@stylistic/eslint-plugin@2.6.0-beta.0':
-    resolution: {integrity: sha512-1NJy1iIDSFC4gelDJ82VMTq9J32tNvQ9k1lnxOsipZ0YQB826U5zGLiH37QAM8dRfNY6yeYhjlrUVtZUxFR19w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=8.40.0'
-
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
-  '@swc/helpers@0.5.11':
-    resolution: {integrity: sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==}
-
-  '@swc/helpers@0.5.2':
-    resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
   '@swc/helpers@0.5.5':
     resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
@@ -3480,30 +3076,30 @@ packages:
       typescript:
         optional: true
 
-  '@tailwindcss/typography@0.5.13':
-    resolution: {integrity: sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==}
+  '@tailwindcss/typography@0.5.16':
+    resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
     peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
-  '@tanstack/react-table@8.17.3':
-    resolution: {integrity: sha512-5gwg5SvPD3lNAXPuJJz1fOCEZYk9/GeBFH3w/hCgnfyszOIzwkwgp5I7Q4MJtn0WECp84b5STQUDdmvGi8m3nA==}
+  '@tanstack/react-table@8.20.6':
+    resolution: {integrity: sha512-w0jluT718MrOKthRcr2xsjqzx+oEM7B7s/XXyfs19ll++hlId3fjTm+B2zrR3ijpANpkzBAr15j1XGVOMxpggQ==}
     engines: {node: '>=12'}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
 
-  '@tanstack/react-virtual@3.5.0':
-    resolution: {integrity: sha512-rtvo7KwuIvqK9zb0VZ5IL7fiJAEnG+0EiFZz8FUOs+2mhGqdGmjKIaT1XU7Zq0eFqL0jonLlhbayJI/J2SA/Bw==}
+  '@tanstack/react-virtual@3.12.0':
+    resolution: {integrity: sha512-6krceiPN07kpxXmU6m8AY7EL0X1gHLu8m3nJdh4phvktzVNxkQfBmSwnRUpoUjGQO1PAn8wSAhYaL8hY1cS1vw==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@tanstack/table-core@8.17.3':
-    resolution: {integrity: sha512-mPBodDGVL+fl6d90wUREepHa/7lhsghg2A3vFpakEhrhtbIlgNAZiMr7ccTgak5qbHqF14Fwy+W1yFWQt+WmYQ==}
+  '@tanstack/table-core@8.20.5':
+    resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==}
     engines: {node: '>=12'}
 
-  '@tanstack/virtual-core@3.5.0':
-    resolution: {integrity: sha512-KnPRCkQTyqhanNC0K63GBG3wA8I+D1fQuVnAvcBF8f13akOKeQp1gSbu6f77zCxhEk727iV5oQnbHLYzHrECLg==}
+  '@tanstack/virtual-core@3.12.0':
+    resolution: {integrity: sha512-7mDINtua3v/pOnn6WUmuT9dPXYSO7WidFej7JzoAfqEOcbbpt/iZ1WPqd+eg+FnrL9nUJK8radqj4iAU51Zchg==}
 
   '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
@@ -3511,23 +3107,11 @@ packages:
   '@ts-morph/common@0.19.0':
     resolution: {integrity: sha512-Unz/WHmd4pGax91rdIKWi51wnVUW11QttMEPpBiBgIewnc9UQIX7UDLxr5vRlqeByXCwhkF6VabSsI0raWcyAQ==}
 
-  '@tsconfig/node10@1.0.9':
-    resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
-
-  '@tsconfig/node12@1.0.11':
-    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
-
-  '@tsconfig/node14@1.0.3':
-    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
-
-  '@tsconfig/node16@1.0.4':
-    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
-
   '@types/acorn@4.0.6':
     resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
 
-  '@types/aws-lambda@8.10.140':
-    resolution: {integrity: sha512-4Dh3dk2TUcbdfHrX0Al90mNGJDvA9NBiTQPzbrjGi/dLxzKCGOYgT8YQ47jUKNFALkAJAadifq0pzyjIUlhVhg==}
+  '@types/aws-lambda@8.10.147':
+    resolution: {integrity: sha512-nD0Z9fNIZcxYX5Mai2CTmFD7wX7UldCkW2ezCF8D1T5hdiLsnTWDGRpfRYntU6VjTdLQjOvyszru7I1c1oCQew==}
 
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
@@ -3541,11 +3125,11 @@ packages:
   '@types/babel__traverse@7.20.6':
     resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
 
-  '@types/canvas-confetti@1.6.4':
-    resolution: {integrity: sha512-fNyZ/Fdw/Y92X0vv7B+BD6ysHL4xVU5dJcgzgxLdGbn8O3PezZNIJpml44lKM0nsGur+o/6+NZbZeNTt00U1uA==}
+  '@types/canvas-confetti@1.9.0':
+    resolution: {integrity: sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==}
 
-  '@types/cli-progress@3.11.5':
-    resolution: {integrity: sha512-D4PbNRbviKyppS5ivBGyFO29POlySLmA2HyUFE4p5QGazAMM3CwkKWcvTl8gvElSuxRh6FPKL8XmidX873ou4g==}
+  '@types/cli-progress@3.11.6':
+    resolution: {integrity: sha512-cE3+jb9WRlu+uOSAugewNpITJDt1VF8dHOopPO4IABFc3SXYL5WE/+PTz/FCdZRRfIujiWW3n3aMbv1eIGVRWA==}
 
   '@types/d3-array@3.2.1':
     resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
@@ -3565,11 +3149,11 @@ packages:
   '@types/d3-scale@4.0.8':
     resolution: {integrity: sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==}
 
-  '@types/d3-shape@3.1.6':
-    resolution: {integrity: sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==}
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
 
-  '@types/d3-time@3.0.3':
-    resolution: {integrity: sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==}
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
 
   '@types/d3-timer@3.0.2':
     resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
@@ -3577,21 +3161,12 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
-  '@types/diff@5.2.1':
-    resolution: {integrity: sha512-uxpcuwWJGhe2AR1g8hD9F5OYGCqjqWnBUQFD8gMZsDbv8oPHzxJF6iMO6n8Tk0AdzlxoaaoQhOYlIg/PukVU8g==}
-
-  '@types/eslint@8.56.10':
-    resolution: {integrity: sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==}
-
-  '@types/eslint@8.56.5':
-    resolution: {integrity: sha512-u5/YPJHo1tvkSF2CE0USEkxon82Z5DBy2xR+qfyYNszpX9qcs4sT6uq2kBbj4BXY1+DBGDPnrhMZV3pKWGNukw==}
+  '@types/diff@5.2.3':
+    resolution: {integrity: sha512-K0Oqlrq3kQMaO2RhfrNQX5trmt+XLyom88zS0u84nnIcLvFnRUMRRHmrGny5GSM+kNO9IZLARsdQHDzkhAgmrQ==}
 
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
-  '@types/estree@1.0.5':
-    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
-
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
@@ -3601,6 +3176,9 @@ packages:
   '@types/fs-extra@11.0.4':
     resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
 
+  '@types/graceful-fs@4.1.9':
+    resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
+
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -3613,17 +3191,14 @@ packages:
   '@types/istanbul-reports@3.0.4':
     resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
 
-  '@types/json-schema@7.0.12':
-    resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
-
   '@types/jsonfile@6.1.4':
     resolution: {integrity: sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==}
 
   '@types/lodash.template@4.5.3':
     resolution: {integrity: sha512-Mo0UYKLu1oXgkV9TVoXZLlXXjyIXlW7ZQRxi/4gQJmzJr63dmicE8gG0OkPjYTKBrBic852q0JzqrtNUWLBIyA==}
 
-  '@types/lodash@4.17.5':
-    resolution: {integrity: sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw==}
+  '@types/lodash@4.17.15':
+    resolution: {integrity: sha512-w/P33JFeySuhN6JLkysYUK2gEmy9kHHFN7E8ro0tkfmlDOgxBDzWEZ/J8cWA+fHqFevpswDTFZnDx+R9lbL6xw==}
 
   '@types/mdast@3.0.15':
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
@@ -3634,57 +3209,50 @@ packages:
   '@types/mdx@2.0.13':
     resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
 
-  '@types/ms@0.7.34':
-    resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
   '@types/node-forge@1.3.11':
     resolution: {integrity: sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==}
 
-  '@types/node@17.0.45':
-    resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
-
-  '@types/node@18.19.34':
-    resolution: {integrity: sha512-eXF4pfBNV5DAMKGbI02NnDtWrQ40hAN558/2vvS4gMpMIxaf6JmD7YjnZbq0Q9TDSSkKBamime8ewRoomHdt4g==}
-
-  '@types/node@20.11.24':
-    resolution: {integrity: sha512-Kza43ewS3xoLgCEpQrsT+xRo/EJej1y0kVYGiLFE1NEODXGzTfwiC6tXTLMQskn1X4/Rjlh0MQUvx9W+L9long==}
-
-  '@types/normalize-package-data@2.4.4':
-    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
+  '@types/node@20.17.17':
+    resolution: {integrity: sha512-/WndGO4kIfMicEQLTi/mDANUu/iVUhT7KboZPdEqqHQ4aTS+3qT3U5gIqWDFV+XouorjfgGqvKILJeHhuQgFYg==}
 
   '@types/prompts@2.4.9':
     resolution: {integrity: sha512-qTxFi6Buiu8+50/+3DGIWLHM6QuWsEKugJnnP6iv2Mc4ncxE4A/OJkjuVOA+5X0X1S/nq5VJRa8Lu+nwcvbrKA==}
 
-  '@types/prop-types@15.7.5':
-    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+  '@types/prop-types@15.7.14':
+    resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
 
-  '@types/react-dom@18.2.19':
-    resolution: {integrity: sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==}
+  '@types/react-color@3.0.13':
+    resolution: {integrity: sha512-2c/9FZ4ixC5T3JzN0LP5Cke2Mf0MKOP2Eh0NPDPWmuVH3NjPyhEjqNMQpN1Phr5m74egAy+p2lYNAFrX1z9Yrg==}
+    peerDependencies:
+      '@types/react': '*'
 
-  '@types/react-dom@18.3.0':
-    resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
+  '@types/react-dom@18.3.5':
+    resolution: {integrity: sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==}
+    peerDependencies:
+      '@types/react': ^18.0.0
 
   '@types/react-reconciler@0.26.7':
     resolution: {integrity: sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==}
 
-  '@types/react-reconciler@0.28.8':
-    resolution: {integrity: sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==}
+  '@types/react-reconciler@0.28.9':
+    resolution: {integrity: sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==}
+    peerDependencies:
+      '@types/react': '*'
 
-  '@types/react@18.2.61':
-    resolution: {integrity: sha512-NURTN0qNnJa7O/k4XUkEW2yfygA+NxS0V5h1+kp9jPwhzZy95q3ADoGMP0+JypMhrZBTTgjKAUlTctde1zzeQA==}
+  '@types/react@18.3.18':
+    resolution: {integrity: sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==}
 
-  '@types/react@18.3.3':
-    resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}
+  '@types/reactcss@1.2.13':
+    resolution: {integrity: sha512-gi3S+aUi6kpkF5vdhUsnkwbiSEIU/BEJyD7kBy2SudWBUuKmJk8AQKE0OVcQQeEy40Azh0lV6uynxlikYIJuwg==}
+    peerDependencies:
+      '@types/react': '*'
 
   '@types/resolve@1.20.6':
     resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
 
-  '@types/scheduler@0.16.3':
-    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
-
-  '@types/semver@7.5.0':
-    resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
-
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
 
@@ -3694,222 +3262,60 @@ packages:
   '@types/text-table@0.2.5':
     resolution: {integrity: sha512-hcZhlNvMkQG/k1vcZ6yHOl6WAYftQ2MLfTHcYRZ2xYZFD8tGVnE3qFV0lj1smQeDSR7/yY0PyuUalauf33bJeA==}
 
-  '@types/unist@2.0.10':
-    resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
-  '@types/unist@3.0.2':
-    resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
-  '@types/webxr@0.5.16':
-    resolution: {integrity: sha512-0E0Cl84FECtzrB4qG19TNTqpunw0F1YF0QZZnFMF6pDw1kNKJtrlTKlVB34stGIsHbZsYQ7H0tNjPfZftkHHoA==}
+  '@types/webxr@0.5.21':
+    resolution: {integrity: sha512-geZIAtLzjGmgY2JUi6VxXdCrTb99A7yP49lxLr2Nm/uIK0PkkxcEi4OGhoGDO4pxCf3JwGz2GiJL2Ej4K2bKaA==}
 
   '@types/yargs-parser@21.0.3':
     resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
 
-  '@types/yargs@15.0.19':
-    resolution: {integrity: sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA==}
-
-  '@types/yargs@17.0.32':
-    resolution: {integrity: sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==}
+  '@types/yargs@17.0.33':
+    resolution: {integrity: sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==}
 
   '@types/yauzl@2.10.3':
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
 
-  '@typescript-eslint/eslint-plugin@7.13.0':
-    resolution: {integrity: sha512-FX1X6AF0w8MdVFLSdqwqN/me2hyhuQg4ykN6ZpVhh1ij/80pTvDKclX1sZB9iqex8SjQfVhwMKs3JtnnMLzG9w==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^7.0.0
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/eslint-plugin@8.0.0-alpha.40':
-    resolution: {integrity: sha512-yku4NjpP0UujYq8d1GWXYELpKYwuoESSgvXPd9uAiO24OszGxQhPsGWTe4fmZV05J47qILfaGANO9SCa9fEU0w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/parser@5.62.0':
-    resolution: {integrity: sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/parser@7.13.0':
-    resolution: {integrity: sha512-EjMfl69KOS9awXXe83iRN7oIEXy9yYdqWfqdrFAYAAr6syP8eLEFI7ZE4939antx2mNgPRW/o1ybm2SFYkbTVA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/parser@8.0.0-alpha.40':
-    resolution: {integrity: sha512-cjIgiaxmGtjlA6rRSs0Gsh0mWR08kPv1W+HsrZcuFwWxoGavBZPKtNctXND0NVf6MgSKyIcd4AHqBwE0htp5uw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/scope-manager@5.62.0':
-    resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  '@typescript-eslint/scope-manager@7.1.0':
-    resolution: {integrity: sha512-6TmN4OJiohHfoOdGZ3huuLhpiUgOGTpgXNUPJgeZOZR3DnIpdSgtt83RS35OYNNXxM4TScVlpVKC9jyQSETR1A==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-
-  '@typescript-eslint/scope-manager@7.13.0':
-    resolution: {integrity: sha512-ZrMCe1R6a01T94ilV13egvcnvVJ1pxShkE0+NDjDzH4nvG1wXpwsVI5bZCvE7AEDH1mXEx5tJSVR68bLgG7Dng==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-
-  '@typescript-eslint/scope-manager@8.0.0-alpha.40':
-    resolution: {integrity: sha512-KQL502sCGZW+dYvxIzF6rEozbgppN0mBkYV6kT8ciY5OtFIRlLDTP7NdVAMMDk7q35T7Ad8negaQ9AGpZ8+Y5w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/type-utils@7.13.0':
-    resolution: {integrity: sha512-xMEtMzxq9eRkZy48XuxlBFzpVMDurUAfDu5Rz16GouAtXm0TaAoTFzqWUFPPuQYXI/CDaH/Bgx/fk/84t/Bc9A==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
-  '@typescript-eslint/type-utils@8.0.0-alpha.40':
-    resolution: {integrity: sha512-/Aynkgxy3x22i6Zxy73MR/r0y1OELOMC9Atn7MO97NsjBOrQQYJHi/UEklZ423aB8SCkYH34lO6EAzXX/lIN3g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@vercel/analytics@1.4.1':
+    resolution: {integrity: sha512-ekpL4ReX2TH3LnrRZTUKjHHNpNy9S1I7QmS+g/RQXoSUQ8ienzosuX7T9djZ/s8zPhBx1mpHP/Rw5875N+zQIQ==}
     peerDependencies:
-      typescript: '*'
+      '@remix-run/react': ^2
+      '@sveltejs/kit': ^1 || ^2
+      next: '>= 13'
+      react: ^18 || ^19 || ^19.0.0-rc
+      svelte: '>= 4'
+      vue: ^3
+      vue-router: ^4
     peerDependenciesMeta:
-      typescript:
+      '@remix-run/react':
         optional: true
-
-  '@typescript-eslint/types@5.62.0':
-    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  '@typescript-eslint/types@7.1.0':
-    resolution: {integrity: sha512-qTWjWieJ1tRJkxgZYXx6WUYtWlBc48YRxgY2JN1aGeVpkhmnopq+SUC8UEVGNXIvWH7XyuTjwALfG6bFEgCkQA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-
-  '@typescript-eslint/types@7.13.0':
-    resolution: {integrity: sha512-QWuwm9wcGMAuTsxP+qz6LBBd3Uq8I5Nv8xb0mk54jmNoCyDspnMvVsOxI6IsMmway5d1S9Su2+sCKv1st2l6eA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-
-  '@typescript-eslint/types@8.0.0-alpha.40':
-    resolution: {integrity: sha512-44mUq4VZVydxNlOM8Xtp/BXDkyfuvvjgPIBf7vRQDutrLDeNS0pJ9pcSloSbop5MwKLfJjBU+PbwnJPQM+DWNg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/typescript-estree@5.62.0':
-    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
+      '@sveltejs/kit':
         optional: true
-
-  '@typescript-eslint/typescript-estree@7.1.0':
-    resolution: {integrity: sha512-k7MyrbD6E463CBbSpcOnwa8oXRdHzH1WiVzOipK3L5KSML92ZKgUBrTlehdi7PEIMT8k0bQixHUGXggPAlKnOQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
+      next:
         optional: true
-
-  '@typescript-eslint/typescript-estree@7.13.0':
-    resolution: {integrity: sha512-cAvBvUoobaoIcoqox1YatXOnSl3gx92rCZoMRPzMNisDiM12siGilSM4+dJAekuuHTibI2hVC2fYK79iSFvWjw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
+      react:
         optional: true
-
-  '@typescript-eslint/typescript-estree@8.0.0-alpha.40':
-    resolution: {integrity: sha512-bz1rX5GXvGdx686FghDxPqGwgntlseZCQSRrVGDDOZlLSoWJnbfkzxXGOWch9c3ttcGkdFy/DiCyKKga3hrq0g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
+      svelte:
         optional: true
-
-  '@typescript-eslint/utils@7.1.0':
-    resolution: {integrity: sha512-WUFba6PZC5OCGEmbweGpnNJytJiLG7ZvDBJJoUcX4qZYf1mGZ97mO2Mps6O2efxJcJdRNpqweCistDbZMwIVHw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-
-  '@typescript-eslint/utils@7.13.0':
-    resolution: {integrity: sha512-jceD8RgdKORVnB4Y6BqasfIkFhl4pajB1wVxrF4akxD2QPM8GNYjgGwEzYS+437ewlqqrg7Dw+6dhdpjMpeBFQ==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-
-  '@typescript-eslint/utils@8.0.0-alpha.40':
-    resolution: {integrity: sha512-ijxO1Hs3YWveuWK+Vbt25D05Q41UeK08JwEJbWTzV38LmkdCBktQd7X1sTw4W9Qku692HWuHgesZf6OhC8t3aA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-
-  '@typescript-eslint/visitor-keys@5.62.0':
-    resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  '@typescript-eslint/visitor-keys@7.1.0':
-    resolution: {integrity: sha512-FhUqNWluiGNzlvnDZiXad4mZRhtghdoKW6e98GoEOYSu5cND+E39rG5KwJMUzeENwm1ztYBRqof8wMLP+wNPIA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-
-  '@typescript-eslint/visitor-keys@7.13.0':
-    resolution: {integrity: sha512-nxn+dozQx+MK61nn/JP+M4eCkHDSxSLDpgE3WcQo0+fkjEolnaB5jswvIKC4K56By8MMgIho7f1PVxERHEo8rw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-
-  '@typescript-eslint/visitor-keys@8.0.0-alpha.40':
-    resolution: {integrity: sha512-y1stojSPb5D3M8VlGGpaiBU5XxGLe+sPuW0YbLe09Lxvo4AwKGvhAr5lhqJZo4z6qHNz385+6+BS63+qIQdYLw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@ungap/structured-clone@1.2.0':
-    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
-
-  '@vercel/analytics@1.3.1':
-    resolution: {integrity: sha512-xhSlYgAuJ6Q4WQGkzYTLmXwhYl39sWjoMA3nHxfkvG+WdBT25c563a7QhwwKivEOZtPJXifYHR1m2ihoisbWyA==}
-    peerDependencies:
-      next: '>= 13'
-      react: ^18 || ^19
-    peerDependenciesMeta:
-      next:
+      vue:
         optional: true
-      react:
+      vue-router:
         optional: true
 
-  '@vitest/expect@2.1.2':
-    resolution: {integrity: sha512-FEgtlN8mIUSEAAnlvn7mP8vzaWhEaAEvhSXCqrsijM7K6QqjB11qoRZYEd4AKSCDz8p0/+yH5LzhZ47qt+EyPg==}
+  '@vitest/expect@2.1.9':
+    resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
 
-  '@vitest/mocker@2.1.2':
-    resolution: {integrity: sha512-ExElkCGMS13JAJy+812fw1aCv2QO/LBK6CyO4WOPAzLTmve50gydOlWhgdBJPx2ztbADUq3JVI0C5U+bShaeEA==}
+  '@vitest/mocker@2.1.9':
+    resolution: {integrity: sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==}
     peerDependencies:
-      '@vitest/spy': 2.1.2
-      msw: ^2.3.5
+      msw: ^2.4.9
       vite: ^5.0.0
     peerDependenciesMeta:
       msw:
@@ -3917,35 +3323,20 @@ packages:
       vite:
         optional: true
 
-  '@vitest/pretty-format@2.1.2':
-    resolution: {integrity: sha512-FIoglbHrSUlOJPDGIrh2bjX1sNars5HbxlcsFKCtKzu4+5lpsRhOCVcuzp0fEhAGHkPZRIXVNzPcpSlkoZ3LuA==}
-
-  '@vitest/runner@2.1.2':
-    resolution: {integrity: sha512-UCsPtvluHO3u7jdoONGjOSil+uON5SSvU9buQh3lP7GgUXHp78guN1wRmZDX4wGK6J10f9NUtP6pO+SFquoMlw==}
-
-  '@vitest/snapshot@2.1.2':
-    resolution: {integrity: sha512-xtAeNsZ++aRIYIUsek7VHzry/9AcxeULlegBvsdLncLmNCR6tR8SRjn8BbDP4naxtccvzTqZ+L1ltZlRCfBZFA==}
-
-  '@vitest/spy@2.1.2':
-    resolution: {integrity: sha512-GSUi5zoy+abNRJwmFhBDC0yRuVUn8WMlQscvnbbXdKLXX9dE59YbfwXxuJ/mth6eeqIzofU8BB5XDo/Ns/qK2A==}
+  '@vitest/pretty-format@2.1.9':
+    resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
 
-  '@vitest/utils@2.1.2':
-    resolution: {integrity: sha512-zMO2KdYy6mx56btx9JvAqAZ6EyS3g49krMPPrgOp1yxGZiA93HumGk+bZ5jIZtOg5/VBYl5eBmGRQHqq4FG6uQ==}
+  '@vitest/runner@2.1.9':
+    resolution: {integrity: sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==}
 
-  '@vue/compiler-core@3.4.29':
-    resolution: {integrity: sha512-TFKiRkKKsRCKvg/jTSSKK7mYLJEQdUiUfykbG49rubC9SfDyvT2JrzTReopWlz2MxqeLyxh9UZhvxEIBgAhtrg==}
+  '@vitest/snapshot@2.1.9':
+    resolution: {integrity: sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==}
 
-  '@vue/compiler-dom@3.4.29':
-    resolution: {integrity: sha512-A6+iZ2fKIEGnfPJejdB7b1FlJzgiD+Y/sxxKwJWg1EbJu6ZPgzaPQQ51ESGNv0CP6jm6Z7/pO6Ia8Ze6IKrX7w==}
+  '@vitest/spy@2.1.9':
+    resolution: {integrity: sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==}
 
-  '@vue/compiler-sfc@3.4.29':
-    resolution: {integrity: sha512-zygDcEtn8ZimDlrEQyLUovoWgKQic6aEQqRXce2WXBvSeHbEbcAsXyCk9oG33ZkyWH4sl9D3tkYc1idoOkdqZQ==}
-
-  '@vue/compiler-ssr@3.4.29':
-    resolution: {integrity: sha512-rFbwCmxJ16tDp3N8XCx5xSQzjhidYjXllvEcqX/lopkoznlNPz3jyy0WGJCyhAaVQK677WWFt3YO/WUEkMMUFQ==}
-
-  '@vue/shared@3.4.29':
-    resolution: {integrity: sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA==}
+  '@vitest/utils@2.1.9':
+    resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==}
 
   abort-controller@3.0.0:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
@@ -3960,51 +3351,29 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn-walk@8.3.3:
-    resolution: {integrity: sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==}
-    engines: {node: '>=0.4.0'}
-
-  acorn@8.12.0:
-    resolution: {integrity: sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==}
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  agent-base@7.1.1:
-    resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==}
+  agent-base@7.1.3:
+    resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
     engines: {node: '>= 14'}
 
-  aggregate-error@5.0.0:
-    resolution: {integrity: sha512-gOsf2YwSlleG6IjRYG2A7k0HmBMEo6qVNk9Bp/EaLgAJT5ngH6PXbqa4ItvnEwCm/velL5jAnQgsHsWnjhGmvw==}
-    engines: {node: '>=18'}
-
-  ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-
   animejs@3.2.2:
     resolution: {integrity: sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==}
 
   anser@1.4.10:
     resolution: {integrity: sha512-hCv9AqTQ8ycjpSd3upOJd7vFwW1JaoYQ7tpham03GJ1ca8/65rqn0RpaWpItOAd6ylW9wAw6luXYPJIyPFVOww==}
 
-  ansi-fragments@0.2.1:
-    resolution: {integrity: sha512-DykbNHxuXQwUDRv5ibc2b0x7uw7wmwOGLBUd5RmaQ5z8Lhx19vwvKV+FAsM5rEA6dEcHxX+/Ad5s9eF2k2bB+w==}
-
-  ansi-regex@4.1.1:
-    resolution: {integrity: sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==}
-    engines: {node: '>=6'}
-
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
-  ansi-regex@6.0.1:
-    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
 
-  ansi-styles@3.2.1:
-    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
-    engines: {node: '>=4'}
-
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -4024,16 +3393,6 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  appdirsjs@1.2.7:
-    resolution: {integrity: sha512-Quji6+8kLBC3NnBeo14nPDq0+2jUs5s3/xEye+udFHumHhRk4M7aAMXp/PBJqkKYGuuyR9M/6Dq7d2AViiGmhw==}
-
-  are-docs-informative@0.0.2:
-    resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
-    engines: {node: '>=14'}
-
-  arg@4.1.3:
-    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
-
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -4062,27 +3421,19 @@ packages:
     resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
     engines: {node: '>=4'}
 
-  ast-types@0.15.2:
-    resolution: {integrity: sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==}
-    engines: {node: '>=4'}
-
   ast-types@0.16.1:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
 
-  astral-regex@1.0.0:
-    resolution: {integrity: sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==}
-    engines: {node: '>=4'}
-
-  astring@1.8.6:
-    resolution: {integrity: sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==}
+  astring@1.9.0:
+    resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
     hasBin: true
 
   async-limiter@1.0.1:
     resolution: {integrity: sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==}
 
-  autoprefixer@10.4.19:
-    resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
+  autoprefixer@10.4.20:
+    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
@@ -4091,49 +3442,82 @@ packages:
   b4a@1.6.7:
     resolution: {integrity: sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==}
 
-  babel-core@7.0.0-bridge.0:
-    resolution: {integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==}
+  babel-jest@29.7.0:
+    resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
-      '@babel/core': ^7.0.0-0
+      '@babel/core': ^7.8.0
+
+  babel-plugin-istanbul@6.1.1:
+    resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
+    engines: {node: '>=8'}
 
-  babel-plugin-polyfill-corejs2@0.4.11:
-    resolution: {integrity: sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==}
+  babel-plugin-jest-hoist@29.6.3:
+    resolution: {integrity: sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  babel-plugin-polyfill-corejs2@0.4.12:
+    resolution: {integrity: sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
-  babel-plugin-polyfill-corejs3@0.10.4:
-    resolution: {integrity: sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==}
+  babel-plugin-polyfill-corejs3@0.10.6:
+    resolution: {integrity: sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
-  babel-plugin-polyfill-regenerator@0.6.2:
-    resolution: {integrity: sha512-2R25rQZWP63nGwaAswvDazbPXfrM3HwVoBXK6HcqeKrSrL/JqcC/rDcf95l4r7LXLyxDXc8uQDa064GubtCABg==}
+  babel-plugin-polyfill-regenerator@0.6.3:
+    resolution: {integrity: sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
+  babel-plugin-syntax-hermes-parser@0.25.1:
+    resolution: {integrity: sha512-IVNpGzboFLfXZUAwkLFcI/bnqVbwky0jP3eBno4HKtqvQJAHBLdgxiG6lQ4to0+Q/YCN3PO0od5NZwIKyY4REQ==}
+
   babel-plugin-transform-flow-enums@0.0.2:
     resolution: {integrity: sha512-g4aaCrDDOsWjbm0PUUeVnkcVd6AKJsVc/MbnPhEotEpkeJQP6b8nzewohQi7+QS8UyPehOhGWn0nOwjvWpmMvQ==}
 
-  bail@2.0.2:
-    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+  babel-preset-current-node-syntax@1.1.0:
+    resolution: {integrity: sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0
 
-  balanced-match@1.0.2:
+  babel-preset-jest@29.6.3:
+    resolution: {integrity: sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
+  balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  bare-events@2.5.0:
-    resolution: {integrity: sha512-/E8dDe9dsbLyh2qrZ64PEPadOQ0F4gbl1sUJOrmph7xOiIxfY8vwab/4bFLh4Y88/Hk/ujKcrQKc+ps0mv873A==}
+  bare-events@2.5.4:
+    resolution: {integrity: sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA==}
 
-  bare-fs@2.3.5:
-    resolution: {integrity: sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==}
+  bare-fs@4.0.1:
+    resolution: {integrity: sha512-ilQs4fm/l9eMfWY2dY0WCIUplSUp7U0CT1vrqMg1MUdeZl4fypu5UP0XcDBK5WBQPJAKP1b7XEodISmekH/CEg==}
+    engines: {bare: '>=1.7.0'}
 
-  bare-os@2.4.4:
-    resolution: {integrity: sha512-z3UiI2yi1mK0sXeRdc4O1Kk8aOa/e+FNWZcTiPB/dfTWyLypuE99LibgRaQki914Jq//yAWylcAt+mknKdixRQ==}
+  bare-os@3.4.0:
+    resolution: {integrity: sha512-9Ous7UlnKbe3fMi7Y+qh0DwAup6A1JkYgPnjvMDNOlmnxNRQvQ/7Nst+OnUQKzk0iAT0m9BisbDVp9gCv8+ETA==}
+    engines: {bare: '>=1.6.0'}
 
-  bare-path@2.1.3:
-    resolution: {integrity: sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==}
+  bare-path@3.0.0:
+    resolution: {integrity: sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==}
 
-  bare-stream@2.4.2:
-    resolution: {integrity: sha512-XZ4ln/KV4KT+PXdIWTKjsLY+quqCaEtqqtgGJVPw9AoM73By03ij64YjepK0aQvHSWDb6AfAZwqKaFu68qkrdA==}
+  bare-stream@2.6.5:
+    resolution: {integrity: sha512-jSmxKJNJmHySi6hC42zlZnq00rga4jjxcgNZjY9N5WlOe/iOoGRtdwGsHzQv2RlH2KOYMwGUXhf2zXd32BA9RA==}
+    peerDependencies:
+      bare-buffer: '*'
+      bare-events: '*'
+    peerDependenciesMeta:
+      bare-buffer:
+        optional: true
+      bare-events:
+        optional: true
 
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
@@ -4149,9 +3533,6 @@ packages:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
-  bl@4.1.0:
-    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
-
   bl@5.1.0:
     resolution: {integrity: sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==}
 
@@ -4167,12 +3548,12 @@ packages:
   brace-expansion@2.0.1:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
 
-  braces@3.0.2:
-    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.23.1:
-    resolution: {integrity: sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==}
+  browserslist@4.24.4:
+    resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -4191,10 +3572,6 @@ packages:
   buffer@6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
-  builtin-modules@3.3.0:
-    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
-    engines: {node: '>=6'}
-
   bumping@9.2.1:
     resolution: {integrity: sha512-dzh4aU92uaD0cAD7i7O0jlYYEJ3//SbwO2NhghNVR1V7rJeAo/g2oIgpsps2DLnRHTVqB0HFmiB+gEw1doUvzg==}
     engines: {node: '>=10'}
@@ -4210,12 +3587,8 @@ packages:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
 
-  bytes@3.0.0:
-    resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
-    engines: {node: '>= 0.8'}
-
-  c12@1.11.1:
-    resolution: {integrity: sha512-KDU0TvSvVdaYcQKQ6iPHATGz/7p/KiVjPg4vQrB6Jg/wX9R0yl5RZxWm9IoZqaIHD2+6PZd81+KMGwRr/lRIUg==}
+  c12@1.11.2:
+    resolution: {integrity: sha512-oBs8a4uvSDO9dm8b7OCFW7+dgtVrwmwnrVXYzLm43ta7ep2jCn/0MhoUFygIWtxhyy6+/MG7/agvpY0U1Iemew==}
     peerDependencies:
       magicast: ^0.3.4
     peerDependenciesMeta:
@@ -4261,8 +3634,8 @@ packages:
     resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
     engines: {node: '>=16'}
 
-  caniuse-lite@1.0.30001634:
-    resolution: {integrity: sha512-fbBYXQ9q3+yp1q1gBk86tOFs4pyn/yxFm5ZNP18OXJDfA3txImOY9PhfxVggZ4vRHDqoU8NrKU81eN0OtzOgRA==}
+  caniuse-lite@1.0.30001697:
+    resolution: {integrity: sha512-GwNPlWJin8E+d7Gxq96jxM6w0w+VFeyyXRsjU58emtkYqnbwHqXm5uT2uCmO0RQE9htWknOP4xtBlLmM/gWxvQ==}
 
   canvas-confetti@1.9.3:
     resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
@@ -4270,40 +3643,30 @@ packages:
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
-  chai@5.1.1:
-    resolution: {integrity: sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==}
+  chai@5.1.2:
+    resolution: {integrity: sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==}
     engines: {node: '>=12'}
 
-  chalk@2.4.2:
-    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
-    engines: {node: '>=4'}
-
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
-  chalk@5.2.0:
-    resolution: {integrity: sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==}
+  chalk@5.4.1:
+    resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
+  change-case@5.4.4:
+    resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
+
   character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
 
-  character-entities-legacy@1.1.4:
-    resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
-
   character-entities-legacy@3.0.0:
     resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
 
-  character-entities@1.2.4:
-    resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
-
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
 
-  character-reference-invalid@1.1.4:
-    resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
-
   character-reference-invalid@2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
 
@@ -4315,9 +3678,6 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
-  chownr@1.1.4:
-    resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
-
   chownr@2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
@@ -4327,11 +3687,14 @@ packages:
     engines: {node: '>=12.13.0'}
     hasBin: true
 
-  chromium-bidi@0.8.0:
-    resolution: {integrity: sha512-uJydbGdTw0DEUjhoogGveneJVWX/9YuqkWePzMmkBYwtdAqo5d3J/ovNKFr+/2hWXYmYCr6it8mSSTIj6SS6Ug==}
+  chromium-bidi@0.11.0:
+    resolution: {integrity: sha512-6CJWHkNRoyZyjV9Rwv2lYONZf1Xm0IuDyNq97nwSsxxP3wf5Bwy15K5rOvVKMtJ127jJBmxFUanSAOjgFRxgrA==}
     peerDependencies:
       devtools-protocol: '*'
 
+  chromium-edge-launcher@0.2.0:
+    resolution: {integrity: sha512-JfJjUnq25y9yg4FABRRVPmBGWPZZi+AQXT4mxupb67766/0UlhG8PAZCz6xzEMXTbW3CsSoE8PcCWA49n35mKg==}
+
   ci-info@2.0.0:
     resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
 
@@ -4339,34 +3702,15 @@ packages:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
 
-  ci-info@4.0.0:
-    resolution: {integrity: sha512-TdHqgGf9odd8SXNuxtUBVx8Nv+qZOejE6qyqiy5NtbYYQOeFa6zmHkxlPzmaLxWWHsU6nJmB7AETdVPi+2NBUg==}
-    engines: {node: '>=8'}
-
   citty@0.1.6:
     resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
 
-  class-variance-authority@0.7.0:
-    resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
   classnames@2.5.1:
     resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
 
-  clean-regexp@1.0.0:
-    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
-    engines: {node: '>=4'}
-
-  clean-stack@5.2.0:
-    resolution: {integrity: sha512-TyUIUJgdFnCISzG5zu3291TAsE77ddchd0bepon1VVQrKLGKFED4iXFEDQ24mIPdPBbyE16PK3F8MYE1CmcBEQ==}
-    engines: {node: '>=14.16'}
-
-  clerc@0.44.0:
-    resolution: {integrity: sha512-fy7JcE7qW3hi5hvPeaEXKdgzeOz3WwE8Nd1SCfOpOSyWxoFJsLuHwUhwFggvJqEJIQ6kLTLZ7yWguwoTcMXO5w==}
-
-  cli-cursor@3.1.0:
-    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
-    engines: {node: '>=8'}
-
   cli-cursor@4.0.0:
     resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -4382,9 +3726,6 @@ packages:
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
-  cliui@6.0.0:
-    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
-
   cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
@@ -4397,23 +3738,15 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
-  clsx@1.2.1:
-    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
-    engines: {node: '>=6'}
-
-  clsx@2.0.0:
-    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
-    engines: {node: '>=6'}
-
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
-  cmdk@1.0.0:
-    resolution: {integrity: sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==}
+  cmdk@1.0.4:
+    resolution: {integrity: sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==}
     peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
 
   cobe@0.6.3:
     resolution: {integrity: sha512-WHr7X4o1ym94GZ96h7b1pNemZJacbOzd02dZtnVwuC4oWBaLg96PBmp2rIS1SAhUDhhC/QyS9WEqkpZIs/ZBTg==}
@@ -4424,39 +3757,24 @@ packages:
   collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
 
-  color-convert@1.9.3:
-    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
-  color-name@1.1.3:
-    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  color-string@1.9.1:
-    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
-
-  color@4.2.3:
-    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
-    engines: {node: '>=12.5.0'}
-
-  colorette@1.4.0:
-    resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
-
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
-  command-exists@1.2.9:
-    resolution: {integrity: sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==}
-
   commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
 
+  commander@12.1.0:
+    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
+    engines: {node: '>=18'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -4464,27 +3782,11 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
-  commander@9.5.0:
-    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
-    engines: {node: ^12.20.0 || >=14}
-
-  comment-parser@1.4.1:
-    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
-    engines: {node: '>= 12.0.0'}
-
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
-  compressible@2.0.18:
-    resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
-    engines: {node: '>= 0.6'}
-
-  compression@1.7.4:
-    resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
-    engines: {node: '>= 0.8.0'}
-
-  compute-scroll-into-view@3.1.0:
-    resolution: {integrity: sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==}
+  compute-scroll-into-view@3.1.1:
+    resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
 
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
@@ -4494,25 +3796,22 @@ packages:
     engines: {node: ^14.13.0 || >=16.0.0}
     hasBin: true
 
-  confbox@0.1.7:
-    resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
   connect@3.7.0:
     resolution: {integrity: sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==}
     engines: {node: '>= 0.10.0'}
 
-  consola@3.2.3:
-    resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
+  consola@3.4.0:
+    resolution: {integrity: sha512-EiPU8G6dQG0GFHNR8ljnZFki/8a+cQwEQ+7wpxdChl02Q8HXlwEZWD5lqAF8vC2sEC3Tehr8hy7vErz88LHyUA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  core-js-compat@3.37.1:
-    resolution: {integrity: sha512-9TNiImhKvQqSUkOvk/mMRZzOANTiEVC7WaBNhHcKM7x+/5E1l5NvsysR19zuDQScE8k+kfQXWRN3AtS/eOSHpg==}
-
-  core-util-is@1.0.3:
-    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+  core-js-compat@3.40.0:
+    resolution: {integrity: sha512-0XEDpr5y5mijvw8Lbc6E5AkjrHfp7eEoPlu36SWeAbcL8fn1G1ANe8DBlo2XoNN89oVpxWwOjYIPVzR4ZvsKCQ==}
 
   cosmiconfig@5.2.1:
     resolution: {integrity: sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==}
@@ -4536,11 +3835,8 @@ packages:
       typescript:
         optional: true
 
-  country-flag-icons@1.5.12:
-    resolution: {integrity: sha512-ksBaQqQEFSvSFg1NV8tlAk4IjgDRNMu5ImjnCac0C409CiN6ObTI0vCFaNfaPusxLrr5O9pueT1R3G4XMMwErg==}
-
-  create-require@1.1.1:
-    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+  country-flag-icons@1.5.14:
+    resolution: {integrity: sha512-GAFsVzHDu3bdAhbQ1LwBRqk/Ad8+ZzS5zU49P+lRla0KGy/V1V8ywNa1SxBOAmI/lyEOT9dfH3Q++q1lqJlvBA==}
 
   critters@0.0.22:
     resolution: {integrity: sha512-NU7DEcQZM2Dy8XTKFHxtdnIM/drE312j2T4PCVaSUcS0oBeyT/NImpRw/Ap0zOr/1SE7SgPK9tGPg1WK/sVakw==}
@@ -4550,8 +3846,8 @@ packages:
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
     hasBin: true
 
-  cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
   css-select@5.1.0:
@@ -4566,8 +3862,8 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  csstype@3.1.2:
-    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
   d3-array@3.2.4:
     resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
@@ -4625,12 +3921,6 @@ packages:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
 
-  dayjs@1.11.11:
-    resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==}
-
-  debounce@1.2.1:
-    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
-
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -4639,34 +3929,8 @@ packages:
       supports-color:
         optional: true
 
-  debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
-  debug@4.3.4:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
-  debug@4.3.5:
-    resolution: {integrity: sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
-  debug@4.3.7:
-    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+  debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
@@ -4674,35 +3938,16 @@ packages:
       supports-color:
         optional: true
 
-  decamelize@1.2.0:
-    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
-    engines: {node: '>=0.10.0'}
-
   decimal.js-light@2.5.1:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
 
   decode-named-character-reference@1.0.2:
     resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
 
-  decompress-response@6.0.0:
-    resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
-    engines: {node: '>=10'}
-
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
 
-  deep-extend@0.6.0:
-    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
-    engines: {node: '>=4.0.0'}
-
-  deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-
-  deepmerge-ts@7.0.3:
-    resolution: {integrity: sha512-dxFbFO2RSIhPNBPL/j8Nvdt6/vrkW9+uGf1NLah/QxBGAVbK9fj2fGTO+HwdHpPAyFAsyT9iEn/1SI9SUvespw==}
-    engines: {node: '>=16.0.0'}
-
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
@@ -4717,9 +3962,6 @@ packages:
     resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
     engines: {node: '>= 14'}
 
-  denodeify@1.2.1:
-    resolution: {integrity: sha512-KNTihKNmQENUZeKu5fzfpzRqR5S2VMp4gl9RFHiWzj9DfvYQPMJ6XHKNaQxaGCXwPk6y9yme3aUoaiAe+KX+vg==}
-
   depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
@@ -4740,10 +3982,6 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
-  detect-libc@2.0.3:
-    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
-    engines: {node: '>=8'}
-
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
@@ -4753,17 +3991,9 @@ packages:
   devtools-protocol@0.0.1367902:
     resolution: {integrity: sha512-XxtPuC3PGakY6PD7dG66/o8KwJ/LkH2/EKe19Dcw58w53dv4/vSQEkn/SzuyhHE2q4zPgCkxQBxus3VV4ql+Pg==}
 
-  didyoumean2@6.0.1:
-    resolution: {integrity: sha512-PSy0zQwMg5O+LjT5Mz7vnKC8I7DfWLPF6M7oepqW7WP5mn2CY3hz46xZOa1GJY+KVfyXhdmz6+tdgXwrHlZc5g==}
-    engines: {node: ^16.14.0 || >=18.12.0}
-
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
-  diff@4.0.2:
-    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
-    engines: {node: '>=0.3.1'}
-
   diff@5.2.0:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
@@ -4775,10 +4005,6 @@ packages:
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
-  doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-
   dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
 
@@ -4792,11 +4018,11 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
-  domutils@3.1.0:
-    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
-  dotenv@16.4.5:
-    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
+  dotenv@16.4.7:
+    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
     engines: {node: '>=12'}
 
   eastasianwidth@0.2.0:
@@ -4805,26 +4031,26 @@ packages:
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
-  electron-to-chromium@1.4.803:
-    resolution: {integrity: sha512-61H9mLzGOCLLVsnLiRzCbc63uldP0AniRYPV3hbGVtONA1pI7qSGILdbofR7A8TMbOypDocEAjH/e+9k1QIe3g==}
+  electron-to-chromium@1.5.91:
+    resolution: {integrity: sha512-sNSHHyq048PFmZY4S90ax61q+gLCs0X0YmcOII9wG9S2XwbVr+h4VW2wWhnbp/Eys3cCwTxVF292W3qPaxIapQ==}
 
-  embla-carousel-autoplay@8.1.5:
-    resolution: {integrity: sha512-9pHIezRqiO9yism7wRFwmM1j/W9c9hBNX4hq3F4aTPbK84M0M57ryG8QUwhbsTGJbDoBBVTm//YEd0T6i/5YgA==}
+  embla-carousel-autoplay@8.5.2:
+    resolution: {integrity: sha512-27emJ0px3q/c0kCHCjwRrEbYcyYUPfGO3g5IBWF1i7714TTzE6L9P81V6PHLoSMAKJ1aHoT2e7YFOsuFKCbyag==}
     peerDependencies:
-      embla-carousel: 8.1.5
+      embla-carousel: 8.5.2
 
-  embla-carousel-react@8.1.5:
-    resolution: {integrity: sha512-xFmfxgJd7mpWDHQ4iyK1Qs+5BTTwu4bkn+mSROKiUH9nKpPHTeilQ+rpeQDCHRrAPeshD67aBk0/p6FxWxXsng==}
+  embla-carousel-react@8.5.2:
+    resolution: {integrity: sha512-Tmx+uY3MqseIGdwp0ScyUuxpBgx5jX1f7od4Cm5mDwg/dptEiTKf9xp6tw0lZN2VA9JbnVMl/aikmbc53c6QFA==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.1 || ^18.0.0
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
-  embla-carousel-reactive-utils@8.1.5:
-    resolution: {integrity: sha512-76uZTrSaEGGta+qpiGkMFlLK0I7N04TdjZ2obrBhyggYIFDWlxk1CriIEmt2lisLNsa1IYXM85kr863JoCMSyg==}
+  embla-carousel-reactive-utils@8.5.2:
+    resolution: {integrity: sha512-QC8/hYSK/pEmqEdU1IO5O+XNc/Ptmmq7uCB44vKplgLKhB/l0+yvYx0+Cv0sF6Ena8Srld5vUErZkT+yTahtDg==}
     peerDependencies:
-      embla-carousel: 8.1.5
+      embla-carousel: 8.5.2
 
-  embla-carousel@8.1.5:
-    resolution: {integrity: sha512-R6xTf7cNdR2UTNM6/yUPZlJFRmZSogMiRjJ5vXHO65II5MoUlrVYUAP0fHQei/py82Vf15lj+WI+QdhnzBxA2g==}
+  embla-carousel@8.5.2:
+    resolution: {integrity: sha512-xQ9oVLrun/eCG/7ru3R+I5bJ7shsD8fFwLEY7yPe27/+fDHCNj0OT5EoG5ZbFyOxOcG6yTwW8oTz/dWyFnyGpg==}
 
   emoji-regex@10.4.0:
     resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
@@ -4839,13 +4065,13 @@ packages:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
     engines: {node: '>= 0.8'}
 
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
   end-of-stream@1.4.4:
     resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
 
-  enhanced-resolve@5.17.0:
-    resolution: {integrity: sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==}
-    engines: {node: '>=10.13.0'}
-
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -4854,23 +4080,20 @@ packages:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
 
-  envinfo@7.13.0:
-    resolution: {integrity: sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==}
-    engines: {node: '>=4'}
-    hasBin: true
-
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
   error-stack-parser@2.1.4:
     resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
 
-  errorhandler@1.5.1:
-    resolution: {integrity: sha512-rcOwbfvP1WTViVoUjcfZicVzjhjTuhSMntHh6mW3IrEiyE6mJyXvsToJUJGlGlw/2xU9P5whlWNGlIDVeCiT4A==}
-    engines: {node: '>= 0.8'}
+  es-module-lexer@1.6.0:
+    resolution: {integrity: sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==}
+
+  esast-util-from-estree@2.0.0:
+    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
 
-  es-module-lexer@1.5.4:
-    resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
+  esast-util-from-js@2.0.1:
+    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
 
   esbuild@0.17.19:
     resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
@@ -4882,21 +4105,18 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
-  escalade@3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
-    engines: {node: '>=6'}
+  esbuild@0.23.1:
+    resolution: {integrity: sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  escalade@3.1.2:
-    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
   escape-html@1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
-  escape-string-regexp@1.0.5:
-    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
-    engines: {node: '>=0.8.0'}
-
   escape-string-regexp@2.0.0:
     resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
     engines: {node: '>=8'}
@@ -4914,324 +4134,11 @@ packages:
     engines: {node: '>=6.0'}
     hasBin: true
 
-  eslint-compat-utils@0.5.1:
-    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      eslint: '>=6.0.0'
-
-  eslint-config-flat-gitignore@0.1.5:
-    resolution: {integrity: sha512-hEZLwuZjDBGDERA49c2q7vxc8sCGv8EdBp6PQYzGOMcHIgrfG9YOM6s/4jx24zhD+wnK9AI8mgN5RxSss5nClQ==}
-
-  eslint-flat-config-utils@0.2.5:
-    resolution: {integrity: sha512-iO+yLZtC/LKgACerkpvsZ6NoRVB2sxT04mOpnNcEM1aTwKy+6TsT46PUvrML4y2uVBS6I67hRCd2JiKAPaL/Uw==}
-
-  eslint-formatting-reporter@0.0.0:
-    resolution: {integrity: sha512-k9RdyTqxqN/wNYVaTk/ds5B5rA8lgoAmvceYN7bcZMBwU7TuXx5ntewJv81eF3pIL/CiJE+pJZm36llG8yhyyw==}
-    peerDependencies:
-      eslint: '>=8.40.0'
-
-  eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
-
-  eslint-merge-processors@0.1.0:
-    resolution: {integrity: sha512-IvRXXtEajLeyssvW4wJcZ2etxkR9mUf4zpNwgI+m/Uac9RfXHskuJefkHUcawVzePnd6xp24enp5jfgdHzjRdQ==}
-    peerDependencies:
-      eslint: '*'
-
-  eslint-parser-plain@0.1.0:
-    resolution: {integrity: sha512-oOeA6FWU0UJT/Rxc3XF5Cq0nbIZbylm7j8+plqq0CZoE6m4u32OXJrR+9iy4srGMmF6v6pmgvP1zPxSRIGh3sg==}
-
-  eslint-plugin-command@0.2.3:
-    resolution: {integrity: sha512-1bBYNfjZg60N2ZpLV5ATYSYyueIJ+zl5yKrTs0UFDdnyu07dNSZ7Xplnc+Wb6SXTdc1sIaoIrnuyhvztcltX6A==}
-    peerDependencies:
-      eslint: '*'
-
-  eslint-plugin-es-x@7.7.0:
-    resolution: {integrity: sha512-aP3qj8BwiEDPttxQkZdI221DLKq9sI/qHolE2YSQL1/9+xk7dTV+tB1Fz8/IaCA+lnLA1bDEnvaS2LKs0k2Uig==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '>=8'
-
-  eslint-plugin-eslint-comments@3.2.0:
-    resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==}
-    engines: {node: '>=6.5.0'}
-    peerDependencies:
-      eslint: '>=4.19.1'
-
-  eslint-plugin-format@0.1.2:
-    resolution: {integrity: sha512-ZrcO3aiumgJ6ENAv65IWkPjtW77ML/5mp0YrRK0jdvvaZJb+4kKWbaQTMr/XbJo6CtELRmCApAziEKh7L2NbdQ==}
-    peerDependencies:
-      eslint: ^8.40.0 || ^9.0.0
-
-  eslint-plugin-import-x@0.5.1:
-    resolution: {integrity: sha512-2JK8bbFOLes+gG6tgdnM8safCxMAj4u2wjX8X1BRFPfnY7Ct2hFYESoIcVwABX/DDcdpQFLGtKmzbNEWJZD9iQ==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      eslint: ^8.56.0 || ^9.0.0-0
-
-  eslint-plugin-import-x@0.5.3:
-    resolution: {integrity: sha512-hJ/wkMcsLQXAZL3+txXIDpbW5cqwdm1rLTqV4VRY03aIbzE3zWE7rPZKW6Gzf7xyl1u3V1iYC6tOG77d9NF4GQ==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      eslint: ^8.56.0 || ^9.0.0-0
-
-  eslint-plugin-jsdoc@48.2.12:
-    resolution: {integrity: sha512-sO9sKkJx5ovWoRk9hV0YiNzXQ4Z6j27CqE/po2E3wddZVuy9wvKPSTiIhpxMTrP/qURvKayJIDB2+o9kyCW1Fw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
-
-  eslint-plugin-jsdoc@48.5.2:
-    resolution: {integrity: sha512-VXBJFviQz30rynlOEQ+dNWLmeopjoAgutUVrWOZwm6Ki4EVDm4XkyIqAV/Zhf7FcDr0AG0aGmRn5FxxCtAF0tA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
-
-  eslint-plugin-jsonc@2.16.0:
-    resolution: {integrity: sha512-Af/ZL5mgfb8FFNleH6KlO4/VdmDuTqmM+SPnWcdoWywTetv7kq+vQe99UyQb9XO3b0OWLVuTH7H0d/PXYCMdSg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '>=6.0.0'
-
-  eslint-plugin-markdown@5.0.0:
-    resolution: {integrity: sha512-kY2u9yDhzvfZ0kmRTsvgm3mTnvZgTSGIIPeHg3yesSx4R5CTCnITUjCPhzCD1MUhNcqHU5Tr6lzx+02EclVPbw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=8'
-
-  eslint-plugin-n@17.9.0:
-    resolution: {integrity: sha512-CPSaXDXdrT4nsrOrO4mT4VB6FMUkoySRkHWuuJJHVqsIEjIeZgMY1H7AzSwPbDScikBmLN82KeM1u7ixV7PzGg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=8.23.0'
-
-  eslint-plugin-no-only-tests@3.1.0:
-    resolution: {integrity: sha512-Lf4YW/bL6Un1R6A76pRZyE1dl1vr31G/ev8UzIc/geCgFWyrKil8hVjYqWVKGB/UIGmb6Slzs9T0wNezdSVegw==}
-    engines: {node: '>=5.0.0'}
-
-  eslint-plugin-nyxb@1.1.1:
-    resolution: {integrity: sha512-YSFJ0Ka7AtFOhcZcUr6/GE8CBxe2bJwhkLjlOuyDT0SHz98FsxTAN75bpxdI4rEZZaeJTLbGWHq6aO043uooUg==}
-    peerDependencies:
-      eslint: '*'
-
-  eslint-plugin-nyxb@1.1.3:
-    resolution: {integrity: sha512-ZdDJFNXSlxA8cdctEF0bmfIS3ENU85iqrVIkAD7PbkVzvuGY/BEwtApNFYZDtU1TwHkEAHpuwzXPGbJ9Kdv68Q==}
-    peerDependencies:
-      eslint: '*'
-
-  eslint-plugin-perfectionist@2.11.0:
-    resolution: {integrity: sha512-XrtBtiu5rbQv88gl+1e2RQud9te9luYNvKIgM9emttQ2zutHPzY/AQUucwxscDKV4qlTkvLTxjOFvxqeDpPorw==}
-    peerDependencies:
-      astro-eslint-parser: ^1.0.2
-      eslint: '>=8.0.0'
-      svelte: '>=3.0.0'
-      svelte-eslint-parser: ^0.37.0
-      vue-eslint-parser: '>=9.0.0'
-    peerDependenciesMeta:
-      astro-eslint-parser:
-        optional: true
-      svelte:
-        optional: true
-      svelte-eslint-parser:
-        optional: true
-      vue-eslint-parser:
-        optional: true
-
-  eslint-plugin-react-core@1.5.15:
-    resolution: {integrity: sha512-G2zH0phEwjrblx0MtEzjME/+ZZfHGUjN7a+yKPwj/Fs5mkMqzC/UG9cfAKW2Fo9ZpHcE9tdrR2FVW8ketgQuRg==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: ^5.3.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  eslint-plugin-react-dom@1.5.15:
-    resolution: {integrity: sha512-yt0ATYbTi7DlCiY7q931vHCIzNahbIhwSMhUdMw5D97rew9/BJ53Ah6eWr5bbQuXfrUdWCsDJTUUbjF9oSPKgA==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: ^5.3.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  eslint-plugin-react-hooks-extra@1.5.15:
-    resolution: {integrity: sha512-w6xGcTt2w+QpdXpmONZ2NabUZbF/oeeL6sp4rroud9NDu1n9jG5aobDdYMFemYTQmws4+eW+Ns/ZqZexX76phA==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: ^5.3.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  eslint-plugin-react-hooks@5.1.0-rc-3f1436cca1-20240516:
-    resolution: {integrity: sha512-9QQQn8plagaPcr32fT7iYgnRyt45I6ahMSSTrgd8V6ln5GSndRernaWCwuabmSwlEMRwmbj1We94JfDjKXpFyg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
-
-  eslint-plugin-react-naming-convention@1.5.15:
-    resolution: {integrity: sha512-2xfea8v9VcKHoo2xOhi48s/81PHGxXqeC35hOvB2p80zpsQpptRcAmXHhdrLhnA9o/3AiVyI+9dZvzQ6WsvzUA==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: ^5.3.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  eslint-plugin-react-refresh@0.4.7:
-    resolution: {integrity: sha512-yrj+KInFmwuQS2UQcg1SF83ha1tuHC1jMQbRNyuWtlEzzKRDgAl7L4Yp4NlDUZTZNlWvHEzOtJhMi40R7JxcSw==}
-    peerDependencies:
-      eslint: '>=7'
-
-  eslint-plugin-regexp@2.6.0:
-    resolution: {integrity: sha512-FCL851+kislsTEQEMioAlpDuK5+E5vs0hi1bF8cFlPlHcEjeRhuAzEsGikXRreE+0j4WhW2uO54MqTjXtYOi3A==}
-    engines: {node: ^18 || >=20}
-    peerDependencies:
-      eslint: '>=8.44.0'
-
-  eslint-plugin-tailwindcss@3.17.4:
-    resolution: {integrity: sha512-gJAEHmCq2XFfUP/+vwEfEJ9igrPeZFg+skeMtsxquSQdxba9XRk5bn0Bp9jxG1VV9/wwPKi1g3ZjItu6MIjhNg==}
-    engines: {node: '>=18.12.0'}
-    peerDependencies:
-      tailwindcss: ^3.4.0
-
-  eslint-plugin-toml@0.11.0:
-    resolution: {integrity: sha512-sau+YvPU4fWTjB+qtBt3n8WS87aoDCs+BVbSUAemGaIsRNbvR9uEk+Tt892iLHTGvp/DPWYoCX4/8DoyAbB+sQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '>=6.0.0'
-
-  eslint-plugin-toml@0.11.1:
-    resolution: {integrity: sha512-Y1WuMSzfZpeMIrmlP1nUh3kT8p96mThIq4NnHrYUhg10IKQgGfBZjAWnrg9fBqguiX4iFps/x/3Hb5TxBisfdw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '>=6.0.0'
-
-  eslint-plugin-unicorn@53.0.0:
-    resolution: {integrity: sha512-kuTcNo9IwwUCfyHGwQFOK/HjJAYzbODHN3wP0PgqbW+jbXqpNWxNVpVhj2tO9SixBwuAdmal8rVcWKBxwFnGuw==}
-    engines: {node: '>=18.18'}
-    peerDependencies:
-      eslint: '>=8.56.0'
-
-  eslint-plugin-unicorn@54.0.0:
-    resolution: {integrity: sha512-XxYLRiYtAWiAjPv6z4JREby1TAE2byBC7wlh0V4vWDCpccOSU1KovWV//jqPXF6bq3WKxqX9rdjoRQ1EhdmNdQ==}
-    engines: {node: '>=18.18'}
-    peerDependencies:
-      eslint: '>=8.56.0'
-
-  eslint-plugin-unused-imports@3.2.0:
-    resolution: {integrity: sha512-6uXyn6xdINEpxE1MtDjxQsyXB37lfyO2yKGVVgtD7WEWQGORSOZjgrD6hBhvGv4/SO+TOlS+UnC6JppRqbuwGQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      '@typescript-eslint/eslint-plugin': 6 - 7
-      eslint: '8'
-    peerDependenciesMeta:
-      '@typescript-eslint/eslint-plugin':
-        optional: true
-
-  eslint-plugin-unused-imports@4.0.0:
-    resolution: {integrity: sha512-mzM+y2B7XYpQryVa1usT+Y/BdNAtAZiXzwpSyDCboFoJN/LZRN67TNvQxKtuTK/Aplya3sLNQforiubzPPaIcQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@typescript-eslint/eslint-plugin': '8'
-      eslint: '9'
-    peerDependenciesMeta:
-      '@typescript-eslint/eslint-plugin':
-        optional: true
-
-  eslint-plugin-vitest@0.5.4:
-    resolution: {integrity: sha512-um+odCkccAHU53WdKAw39MY61+1x990uXjSPguUCq3VcEHdqJrOb8OTMrbYlY6f9jAKx7x98kLVlIe3RJeJqoQ==}
-    engines: {node: ^18.0.0 || >= 20.0.0}
-    peerDependencies:
-      '@typescript-eslint/eslint-plugin': '*'
-      eslint: ^8.57.0 || ^9.0.0
-      vitest: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/eslint-plugin':
-        optional: true
-      vitest:
-        optional: true
-
-  eslint-plugin-vue@9.26.0:
-    resolution: {integrity: sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==}
-    engines: {node: ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
-
-  eslint-plugin-vue@9.27.0:
-    resolution: {integrity: sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==}
-    engines: {node: ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
-
-  eslint-plugin-yml@1.14.0:
-    resolution: {integrity: sha512-ESUpgYPOcAYQO9czugcX5OqRvn/ydDVwGCPXY4YjPqc09rHaUVUA6IE6HLQys4rXk/S+qx3EwTd1wHCwam/OWQ==}
-    engines: {node: ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '>=6.0.0'
-
-  eslint-processor-vue-blocks@0.1.2:
-    resolution: {integrity: sha512-PfpJ4uKHnqeL/fXUnzYkOax3aIenlwewXRX8jFinA1a2yCFnLgMuiH3xvCgvHHUlV2xJWQHbCTdiJWGwb3NqpQ==}
-    peerDependencies:
-      '@vue/compiler-sfc': ^3.3.0
-      eslint: ^8.50.0 || ^9.0.0
-
-  eslint-rule-composer@0.3.0:
-    resolution: {integrity: sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==}
-    engines: {node: '>=4.0.0'}
-
-  eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  eslint-scope@8.0.1:
-    resolution: {integrity: sha512-pL8XjgP4ZOmmwfFE8mEhSxA7ZY4C+LWyqjQ3o4yWkkmD0qcMT9kkW3zWHOczhWcjTSgqycYAgwSlXvZltv65og==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  eslint-visitor-keys@4.0.0:
-    resolution: {integrity: sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  eslint@9.2.0:
-    resolution: {integrity: sha512-0n/I88vZpCOzO+PQpt0lbsqmn9AsnsJAQseIqhZFI8ibQT0U1AkEKRxA3EVMos0BoHSXDQvCXY25TUjB5tr8Og==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    hasBin: true
-
-  espree@10.0.1:
-    resolution: {integrity: sha512-MWkrWZbJsL2UwnjxTX3gG8FneachS/Mwg7tdGXce011sJd5b0JG54vat5KHnfSBODZ3Wvzd2WnjxyzsRoVv+ww==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  espree@10.1.0:
-    resolution: {integrity: sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
 
-  esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
-    engines: {node: '>=0.10'}
-
-  esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
-
   estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
@@ -5245,18 +4152,18 @@ packages:
   estree-util-is-identifier-name@3.0.0:
     resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
 
+  estree-util-scope@1.0.0:
+    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
+
   estree-util-to-js@2.0.0:
     resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
 
-  estree-util-value-to-estree@3.1.2:
-    resolution: {integrity: sha512-S0gW2+XZkmsx00tU2uJ4L9hUT7IFabbml9pHh2WQqFmAbxit++YGZne0sKJbNwkj9Wvg9E4uqWl4nCIFQMmfag==}
+  estree-util-value-to-estree@3.3.2:
+    resolution: {integrity: sha512-hYH1aSvQI63Cvq3T3loaem6LW4u72F187zW4FHpTrReJSm6W66vYTFNO1vH/chmcOulp1HlAj1pxn8Ag0oXI5Q==}
 
   estree-util-visit@2.0.0:
     resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
 
-  estree-walker@2.0.2:
-    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -5283,13 +4190,12 @@ packages:
     resolution: {integrity: sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==}
     engines: {node: ^14.18.0 || ^16.14.0 || >=18.0.0}
 
-  execa@8.0.1:
-    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
-    engines: {node: '>=16.17'}
+  expect-type@1.1.0:
+    resolution: {integrity: sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==}
+    engines: {node: '>=12.0.0'}
 
-  expand-template@2.0.3:
-    resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
-    engines: {node: '>=6'}
+  exponential-backoff@3.1.1:
+    resolution: {integrity: sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==}
 
   extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
@@ -5303,39 +4209,25 @@ packages:
     engines: {node: '>= 10.17.0'}
     hasBin: true
 
-  fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+  fast-content-type-parse@2.0.1:
+    resolution: {integrity: sha512-nGqtvLrj5w0naR6tDPfB4cUmYCqouzyQiz6C5y/LtcDllJdrcc6WaWW6iXyIIOErTa/XRybj28aasdn4LkVk6Q==}
 
-  fast-diff@1.3.0:
-    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
-
-  fast-equals@5.0.1:
-    resolution: {integrity: sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==}
+  fast-equals@5.2.2:
+    resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
     engines: {node: '>=6.0.0'}
 
   fast-fifo@1.3.2:
     resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
 
-  fast-glob@3.3.2:
-    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
 
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
-  fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-
-  fast-xml-parser@4.4.0:
-    resolution: {integrity: sha512-kLY3jFlwIYwBNDojclKsNAC12sfD6NwW74QB2CoNGPvtVxjliYehVunB3HYyNi+n4Tt1dAcgwYvmKF/Z18flqg==}
-    hasBin: true
-
-  fastest-levenshtein@1.0.16:
-    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
-    engines: {node: '>= 4.9.1'}
-
-  fastq@1.15.0:
-    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
+  fastq@1.19.0:
+    resolution: {integrity: sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==}
 
   fault@2.0.1:
     resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
@@ -5346,8 +4238,8 @@ packages:
   fd-slicer@1.1.0:
     resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
 
-  fdir@6.4.0:
-    resolution: {integrity: sha512-3oB133prH1o4j/L5lLW7uOCF1PlD+/It2L0eL/iAqWMB91RBbqTewABqxhj0ibBd90EEmWZq7ntIWzVaWcXTGQ==}
+  fdir@6.4.3:
+    resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
     peerDependencies:
       picomatch: ^3 || ^4
     peerDependenciesMeta:
@@ -5358,16 +4250,8 @@ packages:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
     engines: {node: ^12.20 || >= 14.13}
 
-  figures@5.0.0:
-    resolution: {integrity: sha512-ej8ksPF4x6e5wvK9yevct0UCXh8TTFlWGVLlgjZuoBH1HwjIfKE/IdL5mq89sFA7zELi1VhKpmtDnrs7zWyeyg==}
-    engines: {node: '>=14'}
-
-  file-entry-cache@8.0.0:
-    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
-    engines: {node: '>=16.0.0'}
-
-  fill-range@7.0.1:
-    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
   finalhandler@1.1.2:
@@ -5390,26 +4274,15 @@ packages:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
 
-  find-up@7.0.0:
-    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
-    engines: {node: '>=18'}
-
-  flat-cache@4.0.1:
-    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
-    engines: {node: '>=16'}
-
-  flatted@3.3.1:
-    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
-
   flow-enums-runtime@0.0.6:
     resolution: {integrity: sha512-3PYnM29RFXwvAN6Pc/scUfkI7RwhQ/xqyLUyPNlXUp9S40zI8nup9tUSrTLSVnWGBN38FNiGWbwZOB6uR4OGdw==}
 
-  flow-parser@0.238.0:
-    resolution: {integrity: sha512-VE7XSv1epljsIN2YeBnxCmGJihpNIAnLLu/pPOdA+Gkso7qDltJwUi6vfHjgxdBbjSdAuPGnhuOHJUQG+yYwIg==}
+  flow-parser@0.259.1:
+    resolution: {integrity: sha512-xiXLmMH2Z7OmdE9Q+MjljUMr/rbemFqZIRxaeZieVScG4HzQrKKhNcCYZbWTGpoN7ZPi7z8ClQbeVPq6t5AszQ==}
     engines: {node: '>=0.4.0'}
 
-  foreground-child@3.1.1:
-    resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
+  foreground-child@3.3.0:
+    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
     engines: {node: '>=14'}
 
   format@0.2.2:
@@ -5434,20 +4307,27 @@ packages:
       react-dom:
         optional: true
 
-  fresh@0.5.2:
-    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
-    engines: {node: '>= 0.6'}
-
-  fs-constants@1.0.0:
-    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
-
-  fs-extra@11.2.0:
-    resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
-    engines: {node: '>=14.14'}
+  framer-motion@11.18.2:
+    resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
 
-  fs-extra@8.1.0:
-    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
-    engines: {node: '>=6 <7 || >=8'}
+  fresh@0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+
+  fs-extra@11.3.0:
+    resolution: {integrity: sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==}
+    engines: {node: '>=14.14'}
 
   fs-minipass@2.1.0:
     resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
@@ -5464,10 +4344,10 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  geist@1.3.0:
-    resolution: {integrity: sha512-IoGBfcqVEYB4bEwsfHd35jF4+X9LHRPYZymHL4YOltHSs9LJa24DYs1Z7rEMQ/lsEvaAIc61Y9aUxgcJaQ8lrg==}
+  geist@1.3.1:
+    resolution: {integrity: sha512-Q4gC1pBVPN+D579pBaz0TRRnGA4p9UK6elDY/xizXdFk/g4EKR5g0I+4p/Kj6gM0SajDBZ/0FvDV9ey9ud7BWw==}
     peerDependencies:
-      next: '>=13.2.0 <15.0.0-0'
+      next: '>=13.2.0'
 
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
@@ -5477,9 +4357,6 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
-  get-func-name@2.0.2:
-    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
-
   get-nonce@1.0.1:
     resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
     engines: {node: '>=6'}
@@ -5488,6 +4365,10 @@ packages:
     resolution: {integrity: sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==}
     engines: {node: '>=14.16'}
 
+  get-package-type@0.1.0:
+    resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
+    engines: {node: '>=8.0.0'}
+
   get-stream@5.2.0:
     resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
     engines: {node: '>=8'}
@@ -5496,27 +4377,17 @@ packages:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
 
-  get-stream@8.0.1:
-    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
-    engines: {node: '>=16'}
-
-  get-tsconfig@4.7.2:
-    resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==}
+  get-tsconfig@4.10.0:
+    resolution: {integrity: sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==}
 
-  get-tsconfig@4.7.5:
-    resolution: {integrity: sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==}
-
-  get-uri@6.0.3:
-    resolution: {integrity: sha512-BzUrJBS9EcUb4cFol8r4W3v1cPsSyajLSthNkz5BxbpDcHN5tIrM10E2eNvfnvBn3DaT3DUgx0OpsBKkaOpanw==}
+  get-uri@6.0.4:
+    resolution: {integrity: sha512-E1b1lFFLvLgak2whF2xDBcOy6NLVGZBqqjJjsIhvopKfWWEi64pLVTWWehV8KlLerZkfNTA95sTe2OdJKm1OzQ==}
     engines: {node: '>= 14'}
 
-  giget@1.2.3:
-    resolution: {integrity: sha512-8EHPljDvs7qKykr6uw8b+lqLiUc/vUg+KVTI0uND4s63TdsZM2Xus3mflvF0DDG9SiM4RlCkFGL+7aAjRmV7KA==}
+  giget@1.2.4:
+    resolution: {integrity: sha512-Wv+daGyispVoA31TrWAVR+aAdP7roubTPEM/8JzRnqXhLbdJH0T9eQyXVFF8fjk3WKTsctII6QcyxILYgNp2DA==}
     hasBin: true
 
-  github-from-package@0.0.0:
-    resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
-
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
@@ -5528,13 +4399,12 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  glob@10.3.10:
-    resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
 
-  glob@11.0.0:
-    resolution: {integrity: sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==}
+  glob@11.0.1:
+    resolution: {integrity: sha512-zrQDm8XPnYEKawJScsnM0QzobJxlT/kHOOlRTio8IH/GrmxRE5fjllkzdaHclIuNjUQTJYH2xHNIGfdpJkDJUw==}
     engines: {node: 20 || >=22}
     hasBin: true
 
@@ -5550,22 +4420,6 @@ packages:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
 
-  globals@13.24.0:
-    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
-    engines: {node: '>=8'}
-
-  globals@14.0.0:
-    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
-    engines: {node: '>=18'}
-
-  globals@15.5.0:
-    resolution: {integrity: sha512-r7/9tQj5RylGxt/BKGv0D2SvehYvRFYg4ukSNk+EuZxvWI7uK/MJFmOCLq8aKvgh3EVBYFbBlOMAtaITXZr80w==}
-    engines: {node: '>=18'}
-
-  globals@15.8.0:
-    resolution: {integrity: sha512-VZAJ4cewHTExBWDHR6yptdIBlx9YSSZuwojj9Nt5mBRXQzrKakDsVKQ1J63sklLvzAJm0X5+RpO4i3Y2hcOnFw==}
-    engines: {node: '>=18'}
-
   globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -5576,26 +4430,19 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-
   gray-matter@4.0.3:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
 
-  gsap@3.12.5:
-    resolution: {integrity: sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==}
-
-  has-flag@3.0.0:
-    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
-    engines: {node: '>=4'}
+  gsap@3.12.7:
+    resolution: {integrity: sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg==}
 
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
-  hasown@2.0.0:
-    resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
   hast-util-from-html@2.0.3:
@@ -5613,14 +4460,14 @@ packages:
   hast-util-parse-selector@4.0.0:
     resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
 
-  hast-util-to-estree@3.1.0:
-    resolution: {integrity: sha512-lfX5g6hqVh9kjS/B9E2gSkvHH4SZNiQFiqWS0x9fENzEl+8W12RqdRxX6d/Cwxi30tPQs3bIO+aolQJNp1bIyw==}
+  hast-util-to-estree@3.1.1:
+    resolution: {integrity: sha512-IWtwwmPskfSmma9RpzCappDUitC8t5jhAynHhc1m2+5trOgsrp7txscUSavc5Ic8PATyAjfrCK1wgtxh2cICVQ==}
 
-  hast-util-to-html@9.0.3:
-    resolution: {integrity: sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==}
+  hast-util-to-html@9.0.4:
+    resolution: {integrity: sha512-wxQzXtdbhiwGAUKrnQJXlOPmHnEehzphwkK7aluUPQ+lEc1xefC8pblMgpp2w5ldBTEfveRIrADcrhGIWrlTDA==}
 
-  hast-util-to-jsx-runtime@2.3.0:
-    resolution: {integrity: sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==}
+  hast-util-to-jsx-runtime@2.3.2:
+    resolution: {integrity: sha512-1ngXYb+V9UT5h+PxNRa1O1FYguZK/XL+gkeqvp7EdHlB9oHUG0eYRo/vY5inBdcqo3RkPMC58/H94HvkbfGdyg==}
 
   hast-util-to-string@3.0.1:
     resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
@@ -5631,28 +4478,15 @@ packages:
   hastscript@9.0.0:
     resolution: {integrity: sha512-jzaLBGavEDKHrc5EfFImKN7nZKKBdSLIdGvCwDZ9TfzbF2ffXiov8CKE445L2Z1Ek2t/m4SKQ2j6Ipv7NyUolw==}
 
-  hermes-estree@0.19.1:
-    resolution: {integrity: sha512-daLGV3Q2MKk8w4evNMKwS8zBE/rcpA800nu1Q5kM08IKijoSnPe9Uo1iIxzPKRkn95IxxsgBMPeYHt3VG4ej2g==}
+  hermes-estree@0.25.1:
+    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
 
-  hermes-estree@0.20.1:
-    resolution: {integrity: sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg==}
-
-  hermes-parser@0.19.1:
-    resolution: {integrity: sha512-Vp+bXzxYJWrpEuJ/vXxUsLnt0+y4q9zyi4zUlkLqD8FKv4LjIfOvP69R/9Lty3dCyKh0E2BU7Eypqr63/rKT/A==}
-
-  hermes-parser@0.20.1:
-    resolution: {integrity: sha512-BL5P83cwCogI8D7rrDCgsFY0tdYUtmFP9XaXtl2IQjC+2Xo+4okjfXintlTxcIwl4qeGddEl28Z11kbVIw0aNA==}
-
-  hermes-profile-transformer@0.0.6:
-    resolution: {integrity: sha512-cnN7bQUm65UWOy6cbGcCcZ3rpwW8Q/j4OP5aWRhEry4Z2t2aR1cjrbp0BS+KiBN0smvP1caBgAuxutvyvJILzQ==}
-    engines: {node: '>=8'}
+  hermes-parser@0.25.1:
+    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
 
   hey-listen@1.0.8:
     resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
 
-  hosted-git-info@2.8.9:
-    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
-
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
@@ -5671,8 +4505,8 @@ packages:
     resolution: {integrity: sha512-ONsE3+yfZF2caH5+bJlcddtWqNI3Gvs5A38+ngvljxaBiRXRswym2c7yf8UAeFpRFKjFNHIFEHqR/OLAWJzyiA==}
     engines: {node: '>= 14'}
 
-  https-proxy-agent@7.0.5:
-    resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
 
   human-signals@2.1.0:
@@ -5683,19 +4517,15 @@ packages:
     resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==}
     engines: {node: '>=14.18.0'}
 
-  human-signals@5.0.0:
-    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
-    engines: {node: '>=16.17.0'}
-
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
-  ignore@5.3.1:
-    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
-  image-size@1.1.1:
-    resolution: {integrity: sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==}
+  image-size@1.2.0:
+    resolution: {integrity: sha512-4S8fwbO6w3GeCVN6OPtA9I5IGKkcDMPcKndtUlpJuCwu7JLjtj7JZpwqLuyY2nrmQT3AWsCJLSKPsc2mPBSl3w==}
     engines: {node: '>=16.x'}
     hasBin: true
 
@@ -5703,22 +4533,14 @@ packages:
     resolution: {integrity: sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg==}
     engines: {node: '>=4'}
 
-  import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
-  indent-string@4.0.0:
-    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
-    engines: {node: '>=8'}
-
-  indent-string@5.0.0:
-    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
-    engines: {node: '>=12'}
-
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -5726,23 +4548,25 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
-  ini@1.3.8:
-    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
-
-  inline-style-parser@0.1.1:
-    resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
-
   inline-style-parser@0.2.4:
     resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
 
-  input-format@0.3.10:
-    resolution: {integrity: sha512-5cFv/kOZD7Ch0viprVkuYPDkAU7HBZYBx8QrIpQ6yXUWbAQ0+RQ8IIojDJOf/RO6FDJLL099HDSK2KoVZ2zevg==}
+  input-format@0.3.14:
+    resolution: {integrity: sha512-gHMrgrbCgmT4uK5Um5eVDUohuV9lcs95ZUUN9Px2Y0VIfjTzT2wF8Q3Z4fwLFm7c5Z2OXCm53FHoovj6SlOKdg==}
+    peerDependencies:
+      react: '>=18.1.0'
+      react-dom: '>=18.1.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
 
-  input-otp@1.2.4:
-    resolution: {integrity: sha512-md6rhmD+zmMnUh5crQNSQxq3keBRYvE3odbr4Qb9g2NWzQv9azi+t1a3X4TBTbh98fsGHgEEJlzbe1q860uGCA==}
+  input-otp@1.4.2:
+    resolution: {integrity: sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==}
     peerDependencies:
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
 
   internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
@@ -5755,24 +4579,15 @@ packages:
     resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
     engines: {node: '>= 12'}
 
-  is-alphabetical@1.0.4:
-    resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
-
   is-alphabetical@2.0.1:
     resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
 
-  is-alphanumerical@1.0.4:
-    resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
-
   is-alphanumerical@2.0.1:
     resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
 
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
-  is-arrayish@0.3.2:
-    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
-
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -5781,15 +4596,9 @@ packages:
     resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
     engines: {node: '>=4'}
 
-  is-builtin-module@3.2.1:
-    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
-    engines: {node: '>=6'}
-
-  is-core-module@2.13.1:
-    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
-
-  is-decimal@1.0.4:
-    resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
 
   is-decimal@2.0.1:
     resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
@@ -5811,10 +4620,6 @@ packages:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
-  is-fullwidth-code-point@2.0.0:
-    resolution: {integrity: sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==}
-    engines: {node: '>=4'}
-
   is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
@@ -5823,16 +4628,9 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
-  is-hexadecimal@1.0.4:
-    resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
-
   is-hexadecimal@2.0.1:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
 
-  is-interactive@1.0.0:
-    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
-    engines: {node: '>=8'}
-
   is-interactive@2.0.0:
     resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
     engines: {node: '>=12'}
@@ -5845,10 +4643,6 @@ packages:
     resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==}
     engines: {node: '>=12'}
 
-  is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-
   is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
@@ -5860,9 +4654,6 @@ packages:
   is-platform@1.0.0:
     resolution: {integrity: sha512-AKxe6+dvzAQsDXhhhxGRL9G67q5rKiyTL0BUl5mCyQz2NdvmqWNmMsjoCOIVdyXOYpP6MhkmZ1DPYGkfgv0MpA==}
 
-  is-reference@3.0.2:
-    resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
-
   is-regexp@3.1.0:
     resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
     engines: {node: '>=12'}
@@ -5875,25 +4666,14 @@ packages:
     resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  is-unicode-supported@0.1.0:
-    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
-    engines: {node: '>=10'}
-
   is-unicode-supported@1.3.0:
     resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
     engines: {node: '>=12'}
 
-  is-wsl@1.1.0:
-    resolution: {integrity: sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==}
-    engines: {node: '>=4'}
-
   is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
 
-  isarray@1.0.0:
-    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
-
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -5901,22 +4681,26 @@ packages:
     resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
     engines: {node: '>=0.10.0'}
 
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-instrument@5.2.1:
+    resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==}
+    engines: {node: '>=8'}
+
   its-fine@1.2.5:
     resolution: {integrity: sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==}
     peerDependencies:
       react: '>=18.0'
 
-  jackspeak@2.3.6:
-    resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
-    engines: {node: '>=14'}
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
   jackspeak@4.0.2:
     resolution: {integrity: sha512-bZsjR/iRjl1Nk1UkjGpAzLNfQtzuijhn2g+pbZb98HQ1Gk8vM9hfbxeMBP+M2/UUdwj0RqGG3mlvk2MsAqwvEw==}
     engines: {node: 20 || >=22}
 
-  javascript-natural-sort@0.7.1:
-    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
-
   jest-environment-node@29.7.0:
     resolution: {integrity: sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -5925,6 +4709,10 @@ packages:
     resolution: {integrity: sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  jest-haste-map@29.7.0:
+    resolution: {integrity: sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   jest-message-util@29.7.0:
     resolution: {integrity: sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -5933,6 +4721,10 @@ packages:
     resolution: {integrity: sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  jest-regex-util@29.6.3:
+    resolution: {integrity: sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   jest-util@29.7.0:
     resolution: {integrity: sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -5945,15 +4737,12 @@ packages:
     resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jiti@1.21.6:
-    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
 
-  joi@17.13.1:
-    resolution: {integrity: sha512-vaBlIKCyo4FCUtCm7Eu4QZd/q02bWcxfUO6YSXAZOWF6gzcLBeba8kwotUdYJjDLW8Cz8RywsSOqiNJZW0mNvg==}
-
-  jotai@2.8.3:
-    resolution: {integrity: sha512-pR4plVvdbzB6zyt7VLLHPMAkcRSKhRIvZKd+qkifQLa3CEziEo1uwZjePj4acTmQrboiISBlYSdCz3gWcr1Nkg==}
+  jotai@2.11.3:
+    resolution: {integrity: sha512-B/PsewAQ0UOS5e2+TTWegUPQ3SCLPCjPY24LYUjfn2EorGlluTA2dFjVLgF1+xHLjK9Jit3y5mKHyMG3Xq/GZg==}
     engines: {node: '>=12.20.0'}
     peerDependencies:
       '@types/react': '>=17.0.0'
@@ -5988,32 +4777,25 @@ packages:
   jsc-safe-url@0.2.4:
     resolution: {integrity: sha512-0wM3YBWtYePOjfyXQH5MWQ8H7sdk5EXSwZvmSLKk2RboVQ2Bu239jycHDz5J/8Blf3K0Qnoy2b6xD+z10MFB+Q==}
 
-  jscodeshift@0.14.0:
-    resolution: {integrity: sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==}
+  jscodeshift@17.1.2:
+    resolution: {integrity: sha512-uime4vFOiZ1o3ICT4Sm/AbItHEVw2oCxQ3a0egYVy3JMMOctxe07H3SKL1v175YqjMt27jn1N+3+Bj9SKDNgdQ==}
+    engines: {node: '>=16'}
     hasBin: true
     peerDependencies:
       '@babel/preset-env': ^7.1.6
-
-  jsdoc-type-pratt-parser@4.0.0:
-    resolution: {integrity: sha512-YtOli5Cmzy3q4dP26GraSOeAhqecewG04hoO8DY56CH4KJ9Fvv5qKWUCCo3HZob7esJQHCv6/+bnTy72xZZaVQ==}
-    engines: {node: '>=12.0.0'}
-
-  jsesc@0.5.0:
-    resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
-    hasBin: true
-
-  jsesc@2.5.2:
-    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
-    engines: {node: '>=4'}
-    hasBin: true
+    peerDependenciesMeta:
+      '@babel/preset-env':
+        optional: true
 
   jsesc@3.0.2:
     resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
     engines: {node: '>=6'}
     hasBin: true
 
-  json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
 
   json-parse-better-errors@1.0.2:
     resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
@@ -6021,30 +4803,14 @@ packages:
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
-  json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
-
-  json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-
   json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
     hasBin: true
 
-  jsonc-eslint-parser@2.4.0:
-    resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  jsonfile@4.0.0:
-    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
-
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
-  keyv@4.5.4:
-    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
-
   kind-of@6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -6057,22 +4823,15 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
-  kons@0.7.1:
-    resolution: {integrity: sha512-mW1CkTgrLeIQjiBYd1n0U73T/2W7Vdzxx8rpta5Q4cSDAlr8hXw+ZctxGZlGgdUAmlcDlpkh0vUX8AOW+y1dog==}
-
-  konva@9.3.11:
-    resolution: {integrity: sha512-ZkFF4CXKZCDd2+6sBPA0y3hQ+X4uTqIS6JxTl3BEOFJzKr1tId+rxxJgtsk1FQIH3auuvnMj/rkbatUcf9C2Wg==}
+  konva@9.3.18:
+    resolution: {integrity: sha512-ad5h0Y9phUrinBrKXyIISbURRHQO7Rx5cz7mAEEfdVCs45gDqRD8Y0I0nJRk8S6iqEbiRE87CEZu5GVSnU8oow==}
 
   leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
 
-  levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
-
-  libphonenumber-js@1.11.4:
-    resolution: {integrity: sha512-F/R50HQuWWYcmU/esP5jrH5LiWYaN7DpN0a/99U8+mnGGtnx8kmRE+649dQh3v+CowXXZc8vpkf5AmYkO0AQ7Q==}
+  libphonenumber-js@1.11.19:
+    resolution: {integrity: sha512-bW/Yp/9dod6fmyR+XqSUL1N5JE7QRxQ3KrBIbYS1FTv32e5i3SEtQVX+71CYNv8maWNSOgnlCoNp9X78f/cKiA==}
 
   lighthouse-logger@1.4.2:
     resolution: {integrity: sha512-gPWxznF6TKmUHrOQjlVo2UbaL2EJ71mb2CCeRs/2qBpi4L/g4LUVc9+3lKQ6DTUZwJswfM7ainGrLO1+fOqa2g==}
@@ -6081,8 +4840,8 @@ packages:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
 
-  lilconfig@3.1.1:
-    resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
 
   lines-and-columns@1.2.4:
@@ -6095,10 +4854,6 @@ packages:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  local-pkg@0.5.0:
-    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
-    engines: {node: '>=14'}
-
   locate-path@3.0.0:
     resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
     engines: {node: '>=6'}
@@ -6111,28 +4866,15 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
-  locate-path@7.2.0:
-    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   lodash._reinterpolate@3.0.0:
     resolution: {integrity: sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==}
 
   lodash.castarray@4.4.0:
     resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
 
-  lodash.clone@4.5.0:
-    resolution: {integrity: sha512-GhrVeweiTD6uTmmn5hV/lzgCQhccwReIVRLHp7LT4SopOjqEZ5BbX8b5WWEtAKasjmy8hR7ZPwsYlxRCku5odg==}
-
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
-  lodash.deburr@4.1.0:
-    resolution: {integrity: sha512-m/M1U1f3ddMCs6Hq2tAsYThTBDaAKFDX3dwDo97GEYzamXi9SqUpjWi/Rrj/gf3X2n8ktwgZrlP1z6E3v/IExQ==}
-
-  lodash.isequal@4.5.0:
-    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
-
   lodash.isplainobject@4.0.6:
     resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
 
@@ -6144,6 +4886,7 @@ packages:
 
   lodash.template@4.5.0:
     resolution: {integrity: sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==}
+    deprecated: This package is deprecated. Use https://socket.dev/npm/package/eta instead.
 
   lodash.templatesettings@4.2.0:
     resolution: {integrity: sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==}
@@ -6154,18 +4897,10 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
-  log-symbols@4.1.0:
-    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
-    engines: {node: '>=10'}
-
   log-symbols@5.1.0:
     resolution: {integrity: sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==}
     engines: {node: '>=12'}
 
-  logkitty@0.7.1:
-    resolution: {integrity: sha512-/3ER20CTTbahrCrpYfPn7Xavv9diBROZpoXGVZDWMw4b/X4uuUwAC0ki85tgsdMRONURyIJbcOvS94QsUBYPbQ==}
-    hasBin: true
-
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
@@ -6173,15 +4908,14 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
-  loupe@3.1.1:
-    resolution: {integrity: sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==}
+  loupe@3.1.3:
+    resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
 
-  lru-cache@10.2.0:
-    resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
-    engines: {node: 14 || >=16.14}
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  lru-cache@11.0.1:
-    resolution: {integrity: sha512-CgeuL5uom6j/ZVrg7G/+1IXqRY8JXX4Hghfy5YE0EhoYQWvndP1kufu58cmZLNIDKnRhZrXfdS9urVWx98AipQ==}
+  lru-cache@11.0.2:
+    resolution: {integrity: sha512-123qHRfJBmo2jXDbo/a5YOQrJoHF/GNQTLzQ5+IdK5pWpceK17yRc6ozlWd25FxvGKQbIUs91fDFkXmDHTKcyA==}
     engines: {node: 20 || >=22}
 
   lru-cache@5.1.1:
@@ -6191,26 +4925,18 @@ packages:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
 
-  lucide-react@0.288.0:
-    resolution: {integrity: sha512-ikhb/9LOkq9orPoLV9lLC4UYyoXQycBhIgH7H59ahOkk0mkcAqkD52m84RXedE/qVqZHW8rEJquInT4xGmsNqw==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0
-
   lucide-react@0.395.0:
     resolution: {integrity: sha512-6hzdNH5723A4FLaYZWpK50iyZH8iS2Jq5zuPRRotOFkhu6kxxJiebVdJ72tCR5XkiIeYFOU5NUawFZOac+VeYw==}
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0
 
-  magic-string@0.30.11:
-    resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
   make-dir@2.1.0:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
     engines: {node: '>=6'}
 
-  make-error@1.3.6:
-    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
-
   makeerror@1.0.12:
     resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
 
@@ -6218,23 +4944,20 @@ packages:
     resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
     engines: {node: '>=16'}
 
-  markdown-table@3.0.3:
-    resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
   marky@1.2.5:
     resolution: {integrity: sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==}
 
-  mdast-util-find-and-replace@3.0.1:
-    resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==}
-
-  mdast-util-from-markdown@0.8.5:
-    resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
   mdast-util-from-markdown@1.3.1:
     resolution: {integrity: sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==}
 
-  mdast-util-from-markdown@2.0.1:
-    resolution: {integrity: sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==}
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
 
   mdast-util-frontmatter@2.0.1:
     resolution: {integrity: sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA==}
@@ -6260,8 +4983,8 @@ packages:
   mdast-util-mdx-expression@2.0.1:
     resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
 
-  mdast-util-mdx-jsx@3.1.3:
-    resolution: {integrity: sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==}
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
 
   mdast-util-mdx@3.0.0:
     resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
@@ -6281,11 +5004,8 @@ packages:
   mdast-util-to-markdown@1.5.0:
     resolution: {integrity: sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==}
 
-  mdast-util-to-markdown@2.1.0:
-    resolution: {integrity: sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==}
-
-  mdast-util-to-string@2.0.0:
-    resolution: {integrity: sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==}
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
 
   mdast-util-to-string@3.2.0:
     resolution: {integrity: sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==}
@@ -6312,72 +5032,69 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
-  metro-babel-transformer@0.80.9:
-    resolution: {integrity: sha512-d76BSm64KZam1nifRZlNJmtwIgAeZhZG3fi3K+EmPOlrR8rDtBxQHDSN3fSGeNB9CirdTyabTMQCkCup6BXFSQ==}
-    engines: {node: '>=18'}
+  metro-babel-transformer@0.81.1:
+    resolution: {integrity: sha512-JECKDrQaUnDmj0x/Q/c8c5YwsatVx38Lu+BfCwX9fR8bWipAzkvJocBpq5rOAJRDXRgDcPv2VO4Q4nFYrpYNQg==}
+    engines: {node: '>=18.18'}
 
-  metro-cache-key@0.80.9:
-    resolution: {integrity: sha512-hRcYGhEiWIdM87hU0fBlcGr+tHDEAT+7LYNCW89p5JhErFt/QaAkVx4fb5bW3YtXGv5BTV7AspWPERoIb99CXg==}
-    engines: {node: '>=18'}
+  metro-cache-key@0.81.1:
+    resolution: {integrity: sha512-5fDaHR1yTvpaQuwMAeEoZGsVyvjrkw9IFAS7WixSPvaNY5YfleqoJICPc6hbXFJjvwCCpwmIYFkjqzR/qJ6yqA==}
+    engines: {node: '>=18.18'}
 
-  metro-cache@0.80.9:
-    resolution: {integrity: sha512-ujEdSI43QwI+Dj2xuNax8LMo8UgKuXJEdxJkzGPU6iIx42nYa1byQ+aADv/iPh5sh5a//h5FopraW5voXSgm2w==}
-    engines: {node: '>=18'}
+  metro-cache@0.81.1:
+    resolution: {integrity: sha512-Uqcmn6sZ+Y0VJHM88VrG5xCvSeU7RnuvmjPmSOpEcyJJBe02QkfHL05MX2ZyGDTyZdbKCzaX0IijrTe4hN3F0Q==}
+    engines: {node: '>=18.18'}
 
-  metro-config@0.80.9:
-    resolution: {integrity: sha512-28wW7CqS3eJrunRGnsibWldqgwRP9ywBEf7kg+uzUHkSFJNKPM1K3UNSngHmH0EZjomizqQA2Zi6/y6VdZMolg==}
-    engines: {node: '>=18'}
+  metro-config@0.81.1:
+    resolution: {integrity: sha512-VAAJmxsKIZ+Fz5/z1LVgxa32gE6+2TvrDSSx45g85WoX4EtLmdBGP3DSlpQW3DqFUfNHJCGwMLGXpJnxifd08g==}
+    engines: {node: '>=18.18'}
 
-  metro-core@0.80.9:
-    resolution: {integrity: sha512-tbltWQn+XTdULkGdzHIxlxk4SdnKxttvQQV3wpqqFbHDteR4gwCyTR2RyYJvxgU7HELfHtrVbqgqAdlPByUSbg==}
-    engines: {node: '>=18'}
+  metro-core@0.81.1:
+    resolution: {integrity: sha512-4d2/+02IYqOwJs4dmM0dC8hIZqTzgnx2nzN4GTCaXb3Dhtmi/SJ3v6744zZRnithhN4lxf8TTJSHnQV75M7SSA==}
+    engines: {node: '>=18.18'}
 
-  metro-file-map@0.80.9:
-    resolution: {integrity: sha512-sBUjVtQMHagItJH/wGU9sn3k2u0nrCl0CdR4SFMO1tksXLKbkigyQx4cbpcyPVOAmGTVuy3jyvBlELaGCAhplQ==}
-    engines: {node: '>=18'}
+  metro-file-map@0.81.1:
+    resolution: {integrity: sha512-aY72H2ujmRfFxcsbyh83JgqFF+uQ4HFN1VhV2FmcfQG4s1bGKf2Vbkk+vtZ1+EswcBwDZFbkpvAjN49oqwGzAA==}
+    engines: {node: '>=18.18'}
 
-  metro-minify-terser@0.80.9:
-    resolution: {integrity: sha512-FEeCeFbkvvPuhjixZ1FYrXtO0araTpV6UbcnGgDUpH7s7eR5FG/PiJz3TsuuPP/HwCK19cZtQydcA2QrCw446A==}
-    engines: {node: '>=18'}
+  metro-minify-terser@0.81.1:
+    resolution: {integrity: sha512-p/Qz3NNh1nebSqMlxlUALAnESo6heQrnvgHtAuxufRPtKvghnVDq9hGGex8H7z7YYLsqe42PWdt4JxTA3mgkvg==}
+    engines: {node: '>=18.18'}
 
-  metro-resolver@0.80.9:
-    resolution: {integrity: sha512-wAPIjkN59BQN6gocVsAvvpZ1+LQkkqUaswlT++cJafE/e54GoVkMNCmrR4BsgQHr9DknZ5Um/nKueeN7kaEz9w==}
-    engines: {node: '>=18'}
+  metro-resolver@0.81.1:
+    resolution: {integrity: sha512-E61t6fxRoYRkl6Zo3iUfCKW4DYfum/bLjcejXBMt1y3I7LFkK84TCR/Rs9OAwsMCY/7GOPB4+CREYZOtCC7CNA==}
+    engines: {node: '>=18.18'}
 
-  metro-runtime@0.80.9:
-    resolution: {integrity: sha512-8PTVIgrVcyU+X/rVCy/9yxNlvXsBCk5JwwkbAm/Dm+Abo6NBGtNjWF0M1Xo/NWCb4phamNWcD7cHdR91HhbJvg==}
-    engines: {node: '>=18'}
+  metro-runtime@0.81.1:
+    resolution: {integrity: sha512-pqu5j5d01rjF85V/K8SDDJ0NR3dRp6bE3z5bKVVb5O2Rx0nbR9KreUxYALQCRCcQHaYySqCg5fYbGKBHC295YQ==}
+    engines: {node: '>=18.18'}
 
-  metro-source-map@0.80.9:
-    resolution: {integrity: sha512-RMn+XS4VTJIwMPOUSj61xlxgBvPeY4G6s5uIn6kt6HB6A/k9ekhr65UkkDD7WzHYs3a9o869qU8tvOZvqeQzgw==}
-    engines: {node: '>=18'}
+  metro-source-map@0.81.1:
+    resolution: {integrity: sha512-1i8ROpNNiga43F0ZixAXoFE/SS3RqcRDCCslpynb+ytym0VI7pkTH1woAN2HI9pczYtPrp3Nq0AjRpsuY35ieA==}
+    engines: {node: '>=18.18'}
 
-  metro-symbolicate@0.80.9:
-    resolution: {integrity: sha512-Ykae12rdqSs98hg41RKEToojuIW85wNdmSe/eHUgMkzbvCFNVgcC0w3dKZEhSsqQOXapXRlLtHkaHLil0UD/EA==}
-    engines: {node: '>=18'}
+  metro-symbolicate@0.81.1:
+    resolution: {integrity: sha512-Lgk0qjEigtFtsM7C0miXITbcV47E1ZYIfB+m/hCraihiwRWkNUQEPCWvqZmwXKSwVE5mXA0EzQtghAvQSjZDxw==}
+    engines: {node: '>=18.18'}
     hasBin: true
 
-  metro-transform-plugins@0.80.9:
-    resolution: {integrity: sha512-UlDk/uc8UdfLNJhPbF3tvwajyuuygBcyp+yBuS/q0z3QSuN/EbLllY3rK8OTD9n4h00qZ/qgxGv/lMFJkwP4vg==}
-    engines: {node: '>=18'}
+  metro-transform-plugins@0.81.1:
+    resolution: {integrity: sha512-7L1lI44/CyjIoBaORhY9fVkoNe8hrzgxjSCQ/lQlcfrV31cZb7u0RGOQrKmUX7Bw4FpejrB70ArQ7Mse9mk7+Q==}
+    engines: {node: '>=18.18'}
 
-  metro-transform-worker@0.80.9:
-    resolution: {integrity: sha512-c/IrzMUVnI0hSVVit4TXzt3A1GiUltGVlzCmLJWxNrBGHGrJhvgePj38+GXl1Xf4Fd4vx6qLUkKMQ3ux73bFLQ==}
-    engines: {node: '>=18'}
+  metro-transform-worker@0.81.1:
+    resolution: {integrity: sha512-M+2hVT3rEy5K7PBmGDgQNq3Zx53TjScOcO/CieyLnCRFtBGWZiSJ2+bLAXXOKyKa/y3bI3i0owxtyxuPGDwbZg==}
+    engines: {node: '>=18.18'}
 
-  metro@0.80.9:
-    resolution: {integrity: sha512-Bc57Xf3GO2Xe4UWQsBj/oW6YfLPABEu8jfDVDiNmJvoQW4CO34oDPuYKe4KlXzXhcuNsqOtSxpbjCRRVjhhREg==}
-    engines: {node: '>=18'}
+  metro@0.81.1:
+    resolution: {integrity: sha512-fqRu4fg8ONW7VfqWFMGgKAcOuMzyoQah2azv9Y3VyFXAmG+AoTU6YIFWqAADESCGVWuWEIvxTJhMf3jxU6jwjA==}
+    engines: {node: '>=18.18'}
     hasBin: true
 
-  micro-memoize@4.1.2:
-    resolution: {integrity: sha512-+HzcV2H+rbSJzApgkj0NdTakkC+bnyeiUxgT6/m7mjcz1CmM22KYFKp+EVj1sWe4UYcnriJr5uqHQD/gMHLD+g==}
-
   micromark-core-commonmark@1.1.0:
     resolution: {integrity: sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==}
 
-  micromark-core-commonmark@2.0.1:
-    resolution: {integrity: sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==}
+  micromark-core-commonmark@2.0.2:
+    resolution: {integrity: sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==}
 
   micromark-extension-frontmatter@2.0.0:
     resolution: {integrity: sha512-C4AkuM3dA58cgZha7zVnuVxBhDsbttIMiytjgsM2XbHAB2faRVaHRle40558FBN+DJcrLNCoqG5mlrpdU4cRtg==}
@@ -6391,8 +5108,8 @@ packages:
   micromark-extension-gfm-strikethrough@2.1.0:
     resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
 
-  micromark-extension-gfm-table@2.1.0:
-    resolution: {integrity: sha512-Ub2ncQv+fwD70/l4ou27b4YzfNaCJOvyX4HxXU15m7mpYY+rjuWzsLIPZHJL253Z643RpbcP1oeIJlQ/SKW67g==}
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
 
   micromark-extension-gfm-tagfilter@2.0.0:
     resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
@@ -6421,14 +5138,14 @@ packages:
   micromark-factory-destination@1.1.0:
     resolution: {integrity: sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==}
 
-  micromark-factory-destination@2.0.0:
-    resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==}
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
 
   micromark-factory-label@1.1.0:
     resolution: {integrity: sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==}
 
-  micromark-factory-label@2.0.0:
-    resolution: {integrity: sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==}
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
 
   micromark-factory-mdx-expression@2.0.2:
     resolution: {integrity: sha512-5E5I2pFzJyg2CtemqAbcyCktpHXuJbABnsb32wX2U8IQKhhVFBqkcZR5LRm1WVoFqa4kTueZK4abep7wdo9nrw==}
@@ -6436,62 +5153,62 @@ packages:
   micromark-factory-space@1.1.0:
     resolution: {integrity: sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==}
 
-  micromark-factory-space@2.0.0:
-    resolution: {integrity: sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==}
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
 
   micromark-factory-title@1.1.0:
     resolution: {integrity: sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==}
 
-  micromark-factory-title@2.0.0:
-    resolution: {integrity: sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==}
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
 
   micromark-factory-whitespace@1.1.0:
     resolution: {integrity: sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==}
 
-  micromark-factory-whitespace@2.0.0:
-    resolution: {integrity: sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==}
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
 
   micromark-util-character@1.2.0:
     resolution: {integrity: sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==}
 
-  micromark-util-character@2.1.0:
-    resolution: {integrity: sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==}
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
 
   micromark-util-chunked@1.1.0:
     resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==}
 
-  micromark-util-chunked@2.0.0:
-    resolution: {integrity: sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==}
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
 
   micromark-util-classify-character@1.1.0:
     resolution: {integrity: sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==}
 
-  micromark-util-classify-character@2.0.0:
-    resolution: {integrity: sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==}
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
 
   micromark-util-combine-extensions@1.1.0:
     resolution: {integrity: sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==}
 
-  micromark-util-combine-extensions@2.0.0:
-    resolution: {integrity: sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==}
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
 
   micromark-util-decode-numeric-character-reference@1.1.0:
     resolution: {integrity: sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==}
 
-  micromark-util-decode-numeric-character-reference@2.0.1:
-    resolution: {integrity: sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==}
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
 
   micromark-util-decode-string@1.1.0:
     resolution: {integrity: sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==}
 
-  micromark-util-decode-string@2.0.0:
-    resolution: {integrity: sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==}
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
 
   micromark-util-encode@1.1.0:
     resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==}
 
-  micromark-util-encode@2.0.0:
-    resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
 
   micromark-util-events-to-acorn@2.0.2:
     resolution: {integrity: sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==}
@@ -6499,56 +5216,53 @@ packages:
   micromark-util-html-tag-name@1.2.0:
     resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==}
 
-  micromark-util-html-tag-name@2.0.0:
-    resolution: {integrity: sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==}
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
 
   micromark-util-normalize-identifier@1.1.0:
     resolution: {integrity: sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==}
 
-  micromark-util-normalize-identifier@2.0.0:
-    resolution: {integrity: sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==}
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
 
   micromark-util-resolve-all@1.1.0:
     resolution: {integrity: sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==}
 
-  micromark-util-resolve-all@2.0.0:
-    resolution: {integrity: sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==}
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
 
   micromark-util-sanitize-uri@1.2.0:
     resolution: {integrity: sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==}
 
-  micromark-util-sanitize-uri@2.0.0:
-    resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
 
   micromark-util-subtokenize@1.1.0:
     resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==}
 
-  micromark-util-subtokenize@2.0.1:
-    resolution: {integrity: sha512-jZNtiFl/1aY73yS3UGQkutD0UbhTt68qnRpw2Pifmz5wV9h8gOVsN70v+Lq/f1rKaU/W8pxRe8y8Q9FX1AOe1Q==}
+  micromark-util-subtokenize@2.0.4:
+    resolution: {integrity: sha512-N6hXjrin2GTJDe3MVjf5FuXpm12PGm80BrUAeub9XFXca8JZbP+oIwY4LJSVwFUCL1IPm/WwSVUN7goFHmSGGQ==}
 
   micromark-util-symbol@1.1.0:
     resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==}
 
-  micromark-util-symbol@2.0.0:
-    resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==}
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
 
   micromark-util-types@1.1.0:
     resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==}
 
-  micromark-util-types@2.0.0:
-    resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
-
-  micromark@2.11.4:
-    resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
+  micromark-util-types@2.0.1:
+    resolution: {integrity: sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==}
 
   micromark@3.2.0:
     resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==}
 
-  micromark@4.0.0:
-    resolution: {integrity: sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==}
+  micromark@4.0.1:
+    resolution: {integrity: sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw==}
 
-  micromatch@4.0.5:
-    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
   mime-db@1.52.0:
@@ -6564,11 +5278,6 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  mime@2.6.0:
-    resolution: {integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==}
-    engines: {node: '>=4.0.0'}
-    hasBin: true
-
   mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -6577,10 +5286,6 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
-  mimic-response@3.1.0:
-    resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
-    engines: {node: '>=10'}
-
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -6600,12 +5305,8 @@ packages:
     resolution: {integrity: sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minimatch@9.0.3:
-    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
-  minimatch@9.0.4:
-    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
   minimist@1.2.8:
@@ -6623,10 +5324,6 @@ packages:
     resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
     engines: {node: '>=8'}
 
-  minipass@7.0.4:
-    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
   minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -6638,13 +5335,6 @@ packages:
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
-  mkdirp-classic@0.5.3:
-    resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
-
-  mkdirp@0.5.6:
-    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
-    hasBin: true
-
   mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
@@ -6655,8 +5345,28 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  mlly@1.7.1:
-    resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
+  mlly@1.7.4:
+    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
+
+  motion-dom@11.18.1:
+    resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
+
+  motion-utils@11.18.1:
+    resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
+
+  motion@11.18.2:
+    resolution: {integrity: sha512-JLjvFDuFr42NFtcVoMAyC2sEjnpA8xpy6qWPyzQvCloznAyQ8FIXioxWfHiLtgYhoVpfUqSWpn1h9++skj9+Wg==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
 
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
@@ -6665,29 +5375,17 @@ packages:
   ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
-  ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
-  nanoid@3.3.7:
-    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+  nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  napi-build-utils@1.0.2:
-    resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
-
-  natural-compare-lite@1.4.0:
-    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
-
-  natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-
   negotiator@0.6.3:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
@@ -6699,18 +5397,11 @@ packages:
     resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
     engines: {node: '>= 0.4.0'}
 
-  next-themes@0.2.1:
-    resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
-    peerDependencies:
-      next: '*'
-      react: '*'
-      react-dom: '*'
-
-  next-themes@0.3.0:
-    resolution: {integrity: sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==}
+  next-themes@0.4.4:
+    resolution: {integrity: sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==}
     peerDependencies:
-      react: ^16.8 || ^17 || ^18
-      react-dom: ^16.8 || ^17 || ^18
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
   next-view-transitions@0.2.0:
     resolution: {integrity: sha512-dFxevMIJy8irIstytJivLEtgYT4IJ7Gy7fnDCKHJtNZAsuQgmewYcdA/o/mRkMd1zwxTfyGALiOlZYxvtsn5jg==}
@@ -6719,21 +5410,6 @@ packages:
       react: ^18.2.0
       react-dom: ^18.2.0
 
-  next@14.1.3:
-    resolution: {integrity: sha512-oexgMV2MapI0UIWiXKkixF8J8ORxpy64OuJ/J9oVUmIthXOUCcuVEZX+dtpgq7wIfIqtBwQsKEDXejcjTsan9g==}
-    engines: {node: '>=18.17.0'}
-    hasBin: true
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      sass:
-        optional: true
-
   next@14.2.4:
     resolution: {integrity: sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==}
     engines: {node: '>=18.17.0'}
@@ -6752,42 +5428,15 @@ packages:
       sass:
         optional: true
 
-  nocache@3.0.4:
-    resolution: {integrity: sha512-WDD0bdg9mbq6F4mRxEYcPWwfA1vxd0mrvKOyxI7Xj/atfRHVeutzuWByG//jfm4uPzp0y4Kj051EORCBSQMycw==}
-    engines: {node: '>=12.0.0'}
-
-  node-abi@3.65.0:
-    resolution: {integrity: sha512-ThjYBfoDNr08AWx6hGaRbfPwxKV9kVzAzOzlLKbk2CuqXE2xnCh+cbAGnwM3t8Lq4v9rUB7VfondlkBckcJrVA==}
-    engines: {node: '>=10'}
-
-  node-abort-controller@3.1.1:
-    resolution: {integrity: sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==}
-
-  node-addon-api@5.1.0:
-    resolution: {integrity: sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==}
-
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
-  node-dir@0.1.17:
-    resolution: {integrity: sha512-tmPX422rYgofd4epzrNoOXiE8XFZYOcCq1vD7MAXCDO+O+zndlA2ztdKKMa+EeuBG5tHETpr4ml4RGgpqDCCAg==}
-    engines: {node: '>= 0.10.5'}
-
   node-domexception@1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
 
-  node-fetch-native@1.6.4:
-    resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==}
-
-  node-fetch@2.7.0:
-    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
-    engines: {node: 4.x || >=6.0.0}
-    peerDependencies:
-      encoding: ^0.1.0
-    peerDependenciesMeta:
-      encoding:
-        optional: true
+  node-fetch-native@1.6.6:
+    resolution: {integrity: sha512-8Mc2HhqPdlIfedsuZoc3yioPuzp6b+L5jRCRY1QzuWZh2EGJVQrGppC6V6cF0bLdbW0+O2YpqCA25aF/1lvipQ==}
 
   node-fetch@3.3.2:
     resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
@@ -6800,15 +5449,8 @@ packages:
   node-int64@0.4.0:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
 
-  node-releases@2.0.14:
-    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
-
-  node-stream-zip@1.15.0:
-    resolution: {integrity: sha512-LN4fydt9TqhZhThkZIVQnF9cwjU3qmUH9h78Mx/K7d3VvfRqqwthLwJEUOEL0QPZ0XQmNN7be5Ggit5+4dq3Bw==}
-    engines: {node: '>=0.12.0'}
-
-  normalize-package-data@2.5.0:
-    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
@@ -6832,14 +5474,14 @@ packages:
   nullthrows@1.1.1:
     resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==}
 
-  nypm@0.3.9:
-    resolution: {integrity: sha512-BI2SdqqTHg2d4wJh8P9A1W+bslg33vOE9IZDY6eR2QC+Pu1iNBVZUqczrd43rJb+fMzHU7ltAYKsEFY/kHMFcw==}
+  nypm@0.5.2:
+    resolution: {integrity: sha512-AHzvnyUJYSrrphPhRWWZNcoZfArGNp3Vrc4pm/ZurO74tYNTgAPrEyBQEKy+qioqmWlPXwvMZCG2wOaHlPG0Pw==}
     engines: {node: ^14.16.0 || >=16.10.0}
     hasBin: true
 
-  ob1@0.80.9:
-    resolution: {integrity: sha512-v9yOxowkZbxWhKOaaTyLjIm1aLy4ebMNcSn4NYJKOAI/Qv+SkfEfszpLr2GIxsccmb2Y2HA9qtsqiIJ80ucpVA==}
-    engines: {node: '>=18'}
+  ob1@0.81.1:
+    resolution: {integrity: sha512-1PEbvI+AFvOcgdNcO79FtDI1TUO8S3lhiKOyAiyWQF3sFDDKS+aw2/BZvGlArFnSmqckwOOB9chQuIX0/OahoQ==}
+    engines: {node: '>=18.18'}
 
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
@@ -6849,12 +5491,12 @@ packages:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
 
-  octokit@4.0.2:
-    resolution: {integrity: sha512-wbqF4uc1YbcldtiBFfkSnquHtECEIpYD78YUXI6ri1Im5OO2NLo6ZVpRdbJpdnpZ05zMrVPssNiEo6JQtea+Qg==}
+  octokit@4.1.0:
+    resolution: {integrity: sha512-/UrQAOSvkc+lUUWKNzy4ByAgYU9KpFzZQt8DnC962YmQuDiZb1SNJ90YukCCK5aMzKqqCA+z1kkAlmzYvdYKag==}
     engines: {node: '>= 18'}
 
-  ohash@1.1.3:
-    resolution: {integrity: sha512-zuHHiGTYTA1sYJ/wZN+t5HKZaH23i4yI1HMwbuXm24Nid7Dv0KcuRlKoNKS9UNfAVSBlnGLcuQrnOKWOZoEGaw==}
+  ohash@1.1.4:
+    resolution: {integrity: sha512-FlDryZAahJmEF3VR3w1KogSEdWX3WhA5GPakFx4J81kEAiHyLMpdLLElS8n8dfNadMgAne/MywcvmogzscVt4g==}
 
   on-finished@2.3.0:
     resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==}
@@ -6864,10 +5506,6 @@ packages:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
 
-  on-headers@1.0.2:
-    resolution: {integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==}
-    engines: {node: '>= 0.8'}
-
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -6882,22 +5520,10 @@ packages:
   oniguruma-to-js@0.4.3:
     resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==}
 
-  open@6.4.0:
-    resolution: {integrity: sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==}
-    engines: {node: '>=8'}
-
   open@7.4.2:
     resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==}
     engines: {node: '>=8'}
 
-  optionator@0.9.3:
-    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
-    engines: {node: '>= 0.8.0'}
-
-  ora@5.4.1:
-    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
-    engines: {node: '>=10'}
-
   ora@6.3.1:
     resolution: {integrity: sha512-ERAyNnZOfqM+Ao3RAvIXkYh5joP220yf59gVe2X/cI6SiCxIdi4c9HZKZD8R6q/RDXEje1THBju6iExiSsgJaQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -6910,12 +5536,8 @@ packages:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
-  p-limit@4.0.0:
-    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  p-limit@6.1.0:
-    resolution: {integrity: sha512-H0jc0q1vOzlEk0TqAKXKZxdl7kX3OFUzCnNVUnq5Pc3DGo0kpeaMuPqxQn235HibwBEb0/pm9dgKTjXy66fBkg==}
+  p-limit@6.2.0:
+    resolution: {integrity: sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA==}
     engines: {node: '>=18'}
 
   p-locate@3.0.0:
@@ -6930,16 +5552,12 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-locate@6.0.0:
-    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   p-try@2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
-  pac-proxy-agent@7.0.2:
-    resolution: {integrity: sha512-BFi3vZnO9X5Qt6NRz7ZOaPja3ic0PhlsmCRYLOpN11+mWBCR6XJDqW5RF3j8jm4WGGQZtBA+bTfxYzeKW73eHg==}
+  pac-proxy-agent@7.1.0:
+    resolution: {integrity: sha512-Z5FnLVVZSnX7WjBg0mhDtydeRZ1xMcATZThjySQUHqr+0ksP8kqaw23fNKkaaN/Z8gwLUs/W7xdl0I75eP2Xyw==}
     engines: {node: '>= 14'}
 
   pac-resolver@7.0.1:
@@ -6953,19 +5571,8 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
-  parse-entities@2.0.0:
-    resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
-
-  parse-entities@4.0.1:
-    resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==}
-
-  parse-gitignore@2.0.0:
-    resolution: {integrity: sha512-RmVuCHWsfu0QPNW+mraxh/xjQVw/lhUCUru8Zni3Ctq3AoMhpDTq0OVdKS6iesd6Kqb7viCV3isAL43dciOSog==}
-    engines: {node: '>=14'}
-
-  parse-imports@2.1.1:
-    resolution: {integrity: sha512-TDT4HqzUiTMO1wJRwg/t/hYk8Wdp3iF/ToMIlAoVQfL1Xs/sTxq1dKWSMjMbQmIarfWKymOyly40+zmPHXMqCA==}
-    engines: {node: '>= 18'}
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
 
   parse-json@4.0.0:
     resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
@@ -6996,10 +5603,6 @@ packages:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
-  path-exists@5.0.0:
-    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   path-is-absolute@1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
@@ -7015,9 +5618,9 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  path-scurry@1.10.1:
-    resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
 
   path-scurry@2.0.0:
     resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
@@ -7030,6 +5633,9 @@ packages:
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
+  pathe@2.0.2:
+    resolution: {integrity: sha512-15Ztpk+nov8DR524R4BF7uEuzESgzUEAV4Ah7CUMNGXdE5ELuvxElxGXndBl32vMSsWa1jpNf22Z+Er3sKwq+w==}
+
   pathval@2.0.0:
     resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
     engines: {node: '>= 14.16'}
@@ -7040,17 +5646,11 @@ packages:
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
-  periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
-
   phenomenon@1.6.0:
     resolution: {integrity: sha512-7h9/fjPD3qNlgggzm88cY58l9sudZ6Ey+UmZsizfhtawO6E3srZQXywaNm2lBwT72TbpHYRPy7ytIHeBUD/G0A==}
 
-  picocolors@1.0.1:
-    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
-
-  picocolors@1.1.0:
-    resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -7080,8 +5680,8 @@ packages:
     resolution: {integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==}
     engines: {node: '>=6'}
 
-  pkg-types@1.1.1:
-    resolution: {integrity: sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==}
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
@@ -7126,8 +5726,8 @@ packages:
   postcss-media-query-parser@0.2.3:
     resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
 
-  postcss-nested@6.0.1:
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
@@ -7142,8 +5742,8 @@ packages:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
 
-  postcss-selector-parser@6.1.0:
-    resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
 
   postcss-selector-parser@7.0.0:
@@ -7157,41 +5757,15 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.4.38:
-    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
-    engines: {node: ^10 || ^12 || >=14}
-
-  postcss@8.4.47:
-    resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
+  postcss@8.5.1:
+    resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  prebuild-install@7.1.2:
-    resolution: {integrity: sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
-
-  prettier-linter-helpers@1.0.0:
-    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
-    engines: {node: '>=6.0.0'}
-
   prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  prettier@3.3.2:
-    resolution: {integrity: sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==}
-    engines: {node: '>=14'}
-    hasBin: true
-
-  pretty-format@26.6.2:
-    resolution: {integrity: sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==}
-    engines: {node: '>= 10'}
-
   pretty-format@29.7.0:
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -7203,9 +5777,6 @@ packages:
     peerDependencies:
       prettier: ^3.0.0
 
-  process-nextick-args@2.0.1:
-    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
-
   progress@2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
@@ -7223,40 +5794,32 @@ packages:
   property-information@6.5.0:
     resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
 
-  proxy-agent@6.4.0:
-    resolution: {integrity: sha512-u0piLU+nCOHMgGjRbimiXmA9kM/L9EHh3zL81xCdp7m+Y2pHIsnmbdDoEDoAz5geaonNR6q6+yOPQs6n4T6sBQ==}
+  proxy-agent@6.5.0:
+    resolution: {integrity: sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==}
     engines: {node: '>= 14'}
 
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
-  pump@3.0.0:
-    resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
+  pump@3.0.2:
+    resolution: {integrity: sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==}
 
-  punycode@2.3.0:
-    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  puppeteer-core@23.9.0:
-    resolution: {integrity: sha512-hLVrav2HYMVdK0YILtfJwtnkBAwNOztUdR4aJ5YKDvgsbtagNr6urUJk9HyjRA9e+PaLI3jzJ0wM7A4jSZ7Qxw==}
+  puppeteer-core@23.11.1:
+    resolution: {integrity: sha512-3HZ2/7hdDKZvZQ7dhhITOUg4/wOrDRjyK2ZBllRB0ZCOi9u0cwq1ACHDjBB+nX+7+kltHjQvBRdeY7+W0T+7Gg==}
     engines: {node: '>=18'}
 
-  puppeteer@23.9.0:
-    resolution: {integrity: sha512-WfB8jGwFV+qrD9dcJJVvWPFJBU6kxeu2wxJz9WooDGfM3vIiKLgzImEDBxUQnCBK/2cXB3d4dV6gs/LLpgfLDg==}
+  puppeteer@23.11.1:
+    resolution: {integrity: sha512-53uIX3KR5en8l7Vd8n5DUv90Ae9QDQsyIthaUFVzwV6yU750RjqRznEtNMBT20VthqAdemnJN+hxVdmMHKt7Zw==}
     engines: {node: '>=18'}
     hasBin: true
 
-  querystring@0.2.1:
-    resolution: {integrity: sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==}
-    engines: {node: '>=0.4.x'}
-    deprecated: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
-
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  queue-tick@1.0.1:
-    resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}
-
   queue@6.0.2:
     resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==}
 
@@ -7270,10 +5833,6 @@ packages:
   rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
 
-  rc@1.2.8:
-    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
-    hasBin: true
-
   react-anime@4.1.1:
     resolution: {integrity: sha512-w6oe/6PZ3Swm2Z0EKvawJzvK8iN2gC0NbevjSIEguxY8KuDg/HaDROksLHVrPO5tFpRSEQg2jzy48gcfquDREQ==}
     peerDependencies:
@@ -7286,32 +5845,28 @@ packages:
       date-fns: ^2.28.0 || ^3.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  react-devtools-core@5.2.0:
-    resolution: {integrity: sha512-vZK+/gvxxsieAoAyYaiRIVFxlajb7KXhgBDV7OsoMzaAE+IqGpoxusBjIgq5ibqA2IloKu0p9n7tE68z1xs18A==}
+  react-devtools-core@6.1.0:
+    resolution: {integrity: sha512-sA8gF/pUhjoGAN3s1Ya43h+F4Q0z7cv9RgqbUfhP7bJI0MbqeshLYFb6hiHgZorovGr8AXqhLi22eQ7V3pru/Q==}
 
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
       react: ^18.3.1
 
-  react-hook-form@7.52.0:
-    resolution: {integrity: sha512-mJX506Xc6mirzLsmXUJyqlAI3Kj9Ph2RhplYhUVffeOQSnubK2uVqBFOBJmvKikvbFV91pxVXmDiR+QMF19x6A==}
-    engines: {node: '>=12.22.0'}
+  react-hook-form@7.54.2:
+    resolution: {integrity: sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==}
+    engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
-  react-icon-cloud@4.1.4:
-    resolution: {integrity: sha512-hc8yGNU98V6ObPdeNIt75M016xGMxbTWqB4l6exo1uwE5bvFU095unMbX2K3YBKYhGKEV3c7fSmq3jD3cRWX+A==}
-    engines: {node: '>=10'}
+  react-icon-cloud@4.1.7:
+    resolution: {integrity: sha512-E5k93BlO7dNLmFZPd0JlJ1dO6pUI86IarVEXo3bkQg6oFqqwKv3XFkEKRl2iaxB9K2uOvOvoCJu2kjkoQWI6Mg==}
     peerDependencies:
       react: '>=16'
 
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
-  react-is@17.0.2:
-    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
-
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
@@ -7322,19 +5877,19 @@ packages:
       react: '>=18.0.0'
       react-dom: '>=18.0.0'
 
-  react-native@0.74.2:
-    resolution: {integrity: sha512-EBMBjPPL4/GjHMP4NqsZabT3gI5WU9cSmduABGAGrd8uIcmTZ5F2Ng9k6gFmRm7n8e8CULxDNu98ZpQfBjl7Bw==}
+  react-native@0.77.0:
+    resolution: {integrity: sha512-oCgHLGHFIp6F5UbyHSedyUXrZg6/GPe727freGFvlT7BjPJ3K6yvvdlsp7OEXSAHz6Fe7BI2n5cpUyqmP9Zn+Q==}
     engines: {node: '>=18'}
     hasBin: true
     peerDependencies:
       '@types/react': ^18.2.6
-      react: 18.2.0
+      react: ^18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  react-phone-number-input@3.4.3:
-    resolution: {integrity: sha512-n0dD9V1T8EWeRoGwVMcNK6bwOdEbIk0U3EQ87K0WTADgyJZUJd9NIQMmpcl9mtWSL+LwPaEMzre0yGkhwZYTzg==}
+  react-phone-number-input@3.4.11:
+    resolution: {integrity: sha512-ypN9hXwUModpngho9brCHLLD40xzb1DKAZFacbF0J+fFaMVLEJo+zul9sZfSRlKehSjpttT4b1pLMcOWXI228g==}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
@@ -7355,22 +5910,22 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
-  react-remove-scroll-bar@2.3.6:
-    resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  react-remove-scroll@2.5.5:
-    resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
+  react-remove-scroll@2.6.3:
+    resolution: {integrity: sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -7381,29 +5936,24 @@ packages:
       react: ^16.14.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0
 
-  react-shallow-renderer@16.15.0:
-    resolution: {integrity: sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==}
-    peerDependencies:
-      react: ^16.0.0 || ^17.0.0 || ^18.0.0
-
-  react-smooth@4.0.1:
-    resolution: {integrity: sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==}
+  react-smooth@4.0.4:
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  react-spring@9.7.3:
-    resolution: {integrity: sha512-oTxDpFV5gzq7jQX6+bU0SVq+vX8VnuuT5c8Zwn6CpDErOPvCmV+DRkPiEBtaL3Ozgzwiy5yFx83N0h303j/r3A==}
+  react-spring@9.7.5:
+    resolution: {integrity: sha512-oG6DkDZIASHzPiGYw5KwrCvoFZqsaO3t2R7KE37U6S/+8qWSph/UjRQalPpZxlbgheqV9LT62H6H9IyoopHdug==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  react-style-singleton@2.2.1:
-    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -7420,11 +5970,14 @@ packages:
       react: '>= 18.0.0'
       react-dom: '>= 18.0.0'
 
-  react-use-measure@2.1.1:
-    resolution: {integrity: sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==}
+  react-use-measure@2.1.7:
+    resolution: {integrity: sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==}
     peerDependencies:
       react: '>=16.13'
       react-dom: '>=16.13'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
 
   react-wrap-balancer@1.1.1:
     resolution: {integrity: sha512-AB+l7FPRWl6uZ28VcJ8skkwLn2+UC62bjiw8tQUrZPlEWDVnR9MG0lghyn7EyxuJSsFEpht4G+yh2WikEqQ/5Q==}
@@ -7441,17 +5994,6 @@ packages:
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
-  read-pkg-up@7.0.1:
-    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
-    engines: {node: '>=8'}
-
-  read-pkg@5.2.0:
-    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
-    engines: {node: '>=8'}
-
-  readable-stream@2.3.8:
-    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
-
   readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
@@ -7463,10 +6005,6 @@ packages:
   readline@1.3.0:
     resolution: {integrity: sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg==}
 
-  recast@0.21.5:
-    resolution: {integrity: sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==}
-    engines: {node: '>= 4'}
-
   recast@0.23.9:
     resolution: {integrity: sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==}
     engines: {node: '>= 4'}
@@ -7481,12 +6019,20 @@ packages:
       react: ^16.0.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
 
-  refa@0.12.1:
-    resolution: {integrity: sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+  recma-build-jsx@1.0.0:
+    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+
+  recma-jsx@1.0.0:
+    resolution: {integrity: sha512-5vwkv65qWwYxg+Atz95acp8DMu1JDSqdGkA2Of1j6rCreyFUE/gp15fC8MnGEuG1W68UKjM6x6+YTWIh7hZM/Q==}
 
-  regenerate-unicode-properties@10.1.1:
-    resolution: {integrity: sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==}
+  recma-parse@1.0.0:
+    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+
+  recma-stringify@1.0.0:
+    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+
+  regenerate-unicode-properties@10.2.0:
+    resolution: {integrity: sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==}
     engines: {node: '>=4'}
 
   regenerate@1.4.2:
@@ -7495,33 +6041,24 @@ packages:
   regenerator-runtime@0.13.11:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
 
-  regenerator-runtime@0.14.0:
-    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
   regenerator-transform@0.15.2:
     resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
 
-  regex@4.3.3:
-    resolution: {integrity: sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==}
-
-  regexp-ast-analysis@0.7.1:
-    resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-
-  regexp-tree@0.1.27:
-    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
-    hasBin: true
+  regex@4.4.0:
+    resolution: {integrity: sha512-uCUSuobNVeqUupowbdZub6ggI5/JZkYyJdDogddJr60L764oxC2pMZov1fQ3wM9bdyzUILDG+Sqx6NAKAz9rKQ==}
 
-  regexpu-core@5.3.2:
-    resolution: {integrity: sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==}
+  regexpu-core@6.2.0:
+    resolution: {integrity: sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==}
     engines: {node: '>=4'}
 
-  regjsparser@0.10.0:
-    resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
-    hasBin: true
+  regjsgen@0.8.0:
+    resolution: {integrity: sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==}
 
-  regjsparser@0.9.1:
-    resolution: {integrity: sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==}
+  regjsparser@0.12.0:
+    resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
     hasBin: true
 
   rehype-autolink-headings@7.1.0:
@@ -7536,6 +6073,9 @@ packages:
     peerDependencies:
       shiki: ^1.3.0
 
+  rehype-recma@1.0.0:
+    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
+
   rehype-slug@6.0.0:
     resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
 
@@ -7558,8 +6098,8 @@ packages:
   remark-mdx-frontmatter@4.0.0:
     resolution: {integrity: sha512-PZzAiDGOEfv1Ua7exQ8S5kKxkD8CDaSb4nM+1Mprs6u8dyvQifakh+kCj6NovfGXW+bTvrhjaR3srzjS2qJHKg==}
 
-  remark-mdx@3.0.1:
-    resolution: {integrity: sha512-3Pz3yPQ5Rht2pM5R+0J2MrGoBSrzf+tJG94N+t/ilfdh8YLyyKYtidAYwTveB20BoHAcwIopOUqhcmh2F7hGYA==}
+  remark-mdx@3.1.0:
+    resolution: {integrity: sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==}
 
   remark-parse@10.0.2:
     resolution: {integrity: sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==}
@@ -7583,9 +6123,6 @@ packages:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
 
-  require-main-filename@2.0.0:
-    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
-
   resize-observer-polyfill@1.5.1:
     resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
 
@@ -7604,14 +6141,11 @@ packages:
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
-  resolve@1.22.8:
-    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
     hasBin: true
 
-  restore-cursor@3.1.0:
-    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
-    engines: {node: '>=8'}
-
   restore-cursor@4.0.0:
     resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -7620,11 +6154,6 @@ packages:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rimraf@2.6.3:
-    resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
-    hasBin: true
-
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
     deprecated: Rimraf versions prior to v4 are no longer supported
@@ -7640,13 +6169,13 @@ packages:
     engines: {node: 20 || >=22}
     hasBin: true
 
-  rollup@3.29.4:
-    resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
+  rollup@3.29.5:
+    resolution: {integrity: sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
 
-  rollup@4.24.0:
-    resolution: {integrity: sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==}
+  rollup@4.34.2:
+    resolution: {integrity: sha512-sBDUoxZEaqLu9QeNalL8v3jw6WjPku4wfZGyTU7l7m1oC+rpRihXc/n/H+4148ZkGz5Xli8CHMns//fFGKvpIQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -7660,9 +6189,6 @@ packages:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
 
-  safe-buffer@5.1.2:
-    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
-
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
@@ -7683,10 +6209,6 @@ packages:
   scroll-into-view-if-needed@3.1.0:
     resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
 
-  scslre@0.3.0:
-    resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
-    engines: {node: ^14.0.0 || >=16.0.0}
-
   section-matter@1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
@@ -7703,18 +6225,13 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.6.2:
-    resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
+  semver@7.7.1:
+    resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.6.3:
-    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  send@0.18.0:
-    resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
+  send@0.19.0:
+    resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
     engines: {node: '>= 0.8.0'}
 
   serialize-error@2.1.0:
@@ -7724,16 +6241,10 @@ packages:
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
-  serve-static@1.15.0:
-    resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==}
+  serve-static@1.16.2:
+    resolution: {integrity: sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==}
     engines: {node: '>= 0.8.0'}
 
-  server-only@0.0.1:
-    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
-
-  set-blocking@2.0.0:
-    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
-
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
@@ -7741,10 +6252,6 @@ packages:
     resolution: {integrity: sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==}
     engines: {node: '>=8'}
 
-  sharp@0.31.3:
-    resolution: {integrity: sha512-XcR4+FCLBFKw1bdB+GEhnUNXNXvnt0tDo4WsBsraKymuo/IAuPuCBVAL2wIkUw2r/dwFW5Q5+g66Kwl2dgDFVg==}
-    engines: {node: '>=14.15.0'}
-
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -7753,15 +6260,12 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shell-quote@1.8.1:
-    resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
-
-  shiki@1.21.1:
-    resolution: {integrity: sha512-jSOKRHyQJxGOW3kJflmwzHJbp/kjg6hP8LYuVbCPw5oyX+fSNNoCywvcCD3w9eHbj2rvNljt7YMa5BP5Xi+nHg==}
+  shell-quote@1.8.2:
+    resolution: {integrity: sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==}
+    engines: {node: '>= 0.4'}
 
-  short-unique-id@5.2.0:
-    resolution: {integrity: sha512-cMGfwNyfDZ/nzJ2k2M+ClthBIh//GlZl1JEf47Uoa9XR11bz8Pa2T2wQO4bVrRdH48LrIDWJahQziKo3MjhsWg==}
-    hasBin: true
+  shiki@1.20.0:
+    resolution: {integrity: sha512-MZJJ1PCFsQB1Piq+25wiz0a75yUv8Q3/fzy7SzRx5ONdjdtGdyiKwYn8vb/FnK5kjS0voWGnPpjG16POauUR+g==}
 
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
@@ -7773,15 +6277,6 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  simple-concat@1.0.1:
-    resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
-
-  simple-get@4.0.1:
-    resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
-
-  simple-swizzle@0.2.2:
-    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
-
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -7789,34 +6284,23 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
-  slashes@3.0.12:
-    resolution: {integrity: sha512-Q9VME8WyGkc7pJf6QEkj3wE+2CnvZMI+XJhwdTPR8Z/kWQRXi7boAWLDibRPyHRTUTPx5FaU7MsyrjI3yLB4HA==}
-
-  slice-ansi@2.1.0:
-    resolution: {integrity: sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==}
-    engines: {node: '>=6'}
-
   smart-buffer@4.2.0:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
 
-  socks-proxy-agent@8.0.4:
-    resolution: {integrity: sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==}
+  socks-proxy-agent@8.0.5:
+    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
     engines: {node: '>= 14'}
 
   socks@2.8.3:
     resolution: {integrity: sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==}
     engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
 
-  sonner@1.5.0:
-    resolution: {integrity: sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==}
+  sonner@1.7.4:
+    resolution: {integrity: sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==}
     peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
-
-  source-map-js@1.2.0:
-    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
-    engines: {node: '>=0.10.0'}
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
@@ -7847,30 +6331,12 @@ packages:
   spawn-command@0.0.2:
     resolution: {integrity: sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==}
 
-  spdx-correct@3.2.0:
-    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
-
-  spdx-exceptions@2.3.0:
-    resolution: {integrity: sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==}
-
-  spdx-expression-parse@3.0.1:
-    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
-
-  spdx-expression-parse@4.0.0:
-    resolution: {integrity: sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==}
-
-  spdx-license-ids@3.0.16:
-    resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==}
-
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
   sprintf-js@1.1.3:
     resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
 
-  stable-hash@0.0.4:
-    resolution: {integrity: sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==}
-
   stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
@@ -7893,8 +6359,8 @@ packages:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
 
-  std-env@3.7.0:
-    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
+  std-env@3.8.0:
+    resolution: {integrity: sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==}
 
   stdin-discarder@0.1.0:
     resolution: {integrity: sha512-xhV7w8S+bUwlPTb4bAOUQhv8/cSS5offJuX8GQGq32ONF0ZtDWKfkdomM3HMRA+LhX6um/FZ0COqlwsjD53LeQ==}
@@ -7904,16 +6370,13 @@ packages:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
 
-  streamx@2.20.2:
-    resolution: {integrity: sha512-aDGDLU+j9tJcUdPGOaHmVF1u/hhI+CsGkT02V3OKlHDV7IukOI+nTWAGkiZEKCO35rWN1wIr4tS7YFr1f4qSvA==}
+  streamx@2.22.0:
+    resolution: {integrity: sha512-sLh1evHOzBy/iWRiR6d1zRcLao4gGZr3C1kzNz4fopCOKJb6xD9ub8Mpi9Mr1R6id5o43S+d93fI48UC5uM9aw==}
 
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
 
-  string-ts@2.1.1:
-    resolution: {integrity: sha512-BtSlY8ttfj+veJuirU5uOP7pxqIuGQHzPSNZS7Kj3orT8250GBijUYp0K5ZV+s5OREMsC1TLaSVB75kyeBYZyw==}
-
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -7926,9 +6389,6 @@ packages:
     resolution: {integrity: sha512-k01swCJAgQmuADB0YIc+7TuatfNvTBVOoaUWJjTB9R4VJzR5vNWzf5t42ESVZFPS8xTySF7CAdV4t/aaIm3UnQ==}
     engines: {node: '>=16'}
 
-  string_decoder@1.1.1:
-    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
-
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
@@ -7939,10 +6399,6 @@ packages:
     resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
     engines: {node: '>=14.16'}
 
-  strip-ansi@5.2.0:
-    resolution: {integrity: sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==}
-    engines: {node: '>=6'}
-
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -7967,28 +6423,10 @@ packages:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
 
-  strip-indent@3.0.0:
-    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
-    engines: {node: '>=8'}
-
   strip-indent@4.0.0:
     resolution: {integrity: sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==}
     engines: {node: '>=12'}
 
-  strip-json-comments@2.0.1:
-    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
-    engines: {node: '>=0.10.0'}
-
-  strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-
-  strnum@1.0.5:
-    resolution: {integrity: sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==}
-
-  style-to-object@0.4.4:
-    resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==}
-
   style-to-object@1.0.8:
     resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
 
@@ -8010,14 +6448,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
-  sudo-prompt@9.2.1:
-    resolution: {integrity: sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
-
-  supports-color@5.5.0:
-    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
-    engines: {node: '>=4'}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -8035,56 +6465,34 @@ packages:
     peerDependencies:
       react: '>=17.0'
 
-  swr@2.2.5:
-    resolution: {integrity: sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==}
-    peerDependencies:
-      react: ^16.11.0 || ^17.0.0 || ^18.0.0
-
   swr@2.2.6-beta.3:
     resolution: {integrity: sha512-m6Ms7v9QYEoqIaW+5QFBXscNHNa+eVxynrW+WBzJQ3veFxoPdYvAXHKlgRTq5mJkL4Q3JKH/10V6iPvmv9g00Q==}
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-0
 
-  synckit@0.6.2:
-    resolution: {integrity: sha512-Vhf+bUa//YSTYKseDiiEuQmhGCoIF3CVBhunm3r/DQnYiGT4JssmnKQc44BIyOZRK2pKjXXAgbhfmbeoC9CJpA==}
-    engines: {node: '>=12.20'}
-
-  synckit@0.9.0:
-    resolution: {integrity: sha512-7RnqIMq572L8PeEzKeBINYEJDDxpcH8JEgLwUqBd3TkofhFRbkq4QLR0u+36avGAhCRbk2nnmjcW9SE531hPDg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  swr@2.3.0:
+    resolution: {integrity: sha512-NyZ76wA4yElZWBHzSgEJc28a0u6QZvhb6w0azeL2k7+Q1gAzVK+IqQYXhVOC/mzi+HZIozrZvBVeSeOZNR2bqA==}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
-  tailwind-merge@1.14.0:
-    resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
-
-  tailwind-merge@2.3.0:
-    resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==}
+  tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
 
   tailwindcss-animate@1.0.7:
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  tailwindcss@3.4.1:
-    resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
+  tailwindcss@3.4.17:
+    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  tapable@2.2.1:
-    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
-    engines: {node: '>=6'}
-
-  tar-fs@2.1.1:
-    resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
-
-  tar-fs@3.0.6:
-    resolution: {integrity: sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==}
-
-  tar-stream@2.2.0:
-    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
-    engines: {node: '>=6'}
+  tar-fs@3.0.8:
+    resolution: {integrity: sha512-ZoROL70jptorGAlgAYiLoBLItEKw/fUxg9BSYK/dF/GAGYFJOJJJMvjPAKDJraCXFwadD456FCuvLWgfhMsPwg==}
 
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
@@ -8093,21 +6501,17 @@ packages:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
 
-  temp-dir@2.0.0:
-    resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
-    engines: {node: '>=8'}
-
-  temp@0.8.4:
-    resolution: {integrity: sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==}
-    engines: {node: '>=6.0.0'}
-
-  terser@5.31.1:
-    resolution: {integrity: sha512-37upzU1+viGvuFtBo9NPufCb9dwM0+l9hMxYyWfBA+fbwrPqNJAhbZ6W47bBFnZHKHTUBnMvi87434qq+qnxOg==}
+  terser@5.37.0:
+    resolution: {integrity: sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==}
     engines: {node: '>=10'}
     hasBin: true
 
-  text-decoder@1.2.1:
-    resolution: {integrity: sha512-x9v3H/lTKIJKQQe7RPQkLfKAnc9lUTkWDypIQgTzPJAq+5/GCDHonmshfvlsNSj58yyshbIJJDLmU15qNERrXQ==}
+  test-exclude@6.0.0:
+    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
+    engines: {node: '>=8'}
+
+  text-decoder@1.2.3:
+    resolution: {integrity: sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==}
 
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
@@ -8119,15 +6523,12 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
-  three@0.165.0:
-    resolution: {integrity: sha512-cc96IlVYGydeceu0e5xq70H8/yoVT/tXBxV/W8A/U6uOq7DXc4/s1Mkmnu6SqoYGhSRWWYFOhVwvq6V0VtbplA==}
+  three@0.173.0:
+    resolution: {integrity: sha512-AUwVmViIEUgBwxJJ7stnF0NkPpZxx1aZ6WiAbQ/Qq61h6I9UR4grXtZDmO8mnlaNORhHnIBlXJ1uBxILEKuVyw==}
 
   throat@5.0.0:
     resolution: {integrity: sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==}
 
-  through2@2.0.5:
-    resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
-
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
@@ -8137,15 +6538,15 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  tinyexec@0.3.0:
-    resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==}
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
-  tinyglobby@0.2.9:
-    resolution: {integrity: sha512-8or1+BGEdk1Zkkw2ii16qSS7uVrQJPre5A9o/XkWPATkk23FZh/15BKFxPnlTy6vkljZxLqYCzzBMj30ZrSvjw==}
+  tinyglobby@0.2.10:
+    resolution: {integrity: sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==}
     engines: {node: '>=12.0.0'}
 
-  tinypool@1.0.1:
-    resolution: {integrity: sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==}
+  tinypool@1.0.2:
+    resolution: {integrity: sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==}
     engines: {node: ^18.0.0 || >=20.0.0}
 
   tinyrainbow@1.2.0:
@@ -8156,13 +6557,13 @@ packages:
     resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
 
+  tmp@0.2.3:
+    resolution: {integrity: sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==}
+    engines: {node: '>=14.14'}
+
   tmpl@1.0.5:
     resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
 
-  to-fast-properties@2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
-
   to-gatsby-remark-plugin@0.1.0:
     resolution: {integrity: sha512-blmhJ/gIrytWnWLgPSRCkhCPeki6UBK2daa3k9mGahN7GjwHu8KrS7F70MvwlsG7IE794JLgwAdCbi4hU4faFQ==}
 
@@ -8173,24 +6574,17 @@ packages:
   to-vfile@6.1.0:
     resolution: {integrity: sha512-BxX8EkCxOAZe+D/ToHdDsJcVI4HqQfmw0tCkp31zf3dNP/XWIAjU4CmeuSwsSoOzOTqHPOL0KUzyZqJplkD0Qw==}
 
+  toad-cache@3.7.0:
+    resolution: {integrity: sha512-/m8M+2BJUpoJdgAHoG+baCwBT+tf2VraSfkBgl0Y00qIWt41DJ8R5B8nsEw0I58YwF5IZH6z24/2TobDKnqSWw==}
+    engines: {node: '>=12'}
+
   toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
-  toml-eslint-parser@0.10.0:
-    resolution: {integrity: sha512-khrZo4buq4qVmsGzS5yQjKe/WsFvV8fGfOjDQN0q4iy9FjRfPWRgTFrU8u1R2iu/SfWLhY9WnCi4Jhdrcbtg+g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  toml-eslint-parser@0.9.3:
-    resolution: {integrity: sha512-moYoCvkNUAPCxSW9jmHmRElhm4tVJpHL8ItC/+uYD0EpPSFXbck7yREz9tNdJVTSpHVod8+HoipcpbQ0oE6gsw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
   toml@3.0.0:
     resolution: {integrity: sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==}
 
-  tr46@0.0.3:
-    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
-
   tr46@1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
 
@@ -8204,43 +6598,14 @@ packages:
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
-  ts-api-utils@1.0.2:
-    resolution: {integrity: sha512-Cbu4nIqnEdd+THNEsBdkolnOXhg0I8XteoHaEKgvsxpsbWda4IsUut2c187HxywQCvveojow0Dgw/amxtSKVkQ==}
-    engines: {node: '>=16.13.0'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-
-  ts-api-utils@1.3.0:
-    resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
   ts-morph@18.0.0:
     resolution: {integrity: sha512-Kg5u0mk19PIIe4islUI/HWRvm9bC1lHejK4S0oh1zaZ77TMZAEmQC0sHQYiu2RgCQFZKXz1fMVi/7nOOeirznA==}
 
-  ts-node@10.9.1:
-    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
-    hasBin: true
-    peerDependencies:
-      '@swc/core': '>=1.2.50'
-      '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
-      typescript: '>=2.7'
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      '@swc/wasm':
-        optional: true
-
-  ts-pattern@5.1.2:
-    resolution: {integrity: sha512-u+ElKUIWnqisjpRBhv6Y89yNq7Pmz6xL0v7pTSckrVZ0+5Vf32oh/3jmxWl80rAOGcnbBa7fCyeqNdP4yXzWWg==}
-
-  tsconfck@3.1.0:
-    resolution: {integrity: sha512-CMjc5zMnyAjcS9sPLytrbFmj89st2g+JYtY/c02ug4Q+CZaAtCgbyviI0n1YvjZE/pzoc6FbNsINS13DOL1B9w==}
+  tsconfck@3.1.4:
+    resolution: {integrity: sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==}
     engines: {node: ^18 || >=20}
     hasBin: true
     peerDependencies:
@@ -8253,11 +6618,8 @@ packages:
     resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
     engines: {node: '>=6'}
 
-  tslib@1.14.1:
-    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
-
-  tslib@2.6.2:
-    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
   tsup@6.7.0:
     resolution: {integrity: sha512-L3o8hGkaHnu5TdJns+mCqFsDBo83bJ44rlK7e6VdanIvpea4ArPcU3swWGsLVbXak1PqQx/V+SSmFPujBK+zEQ==}
@@ -8275,84 +6637,63 @@ packages:
       typescript:
         optional: true
 
-  tsutils@3.21.0:
-    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
-    engines: {node: '>= 6'}
-    peerDependencies:
-      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
-
-  tsx@4.15.5:
-    resolution: {integrity: sha512-iKi8jQ2VBmZ2kU/FkGkL2OSHBHsazsUzsdC/W/RwhKIEsIoZ1alCclZHP5jGfNHEaEWUJFM1GquzCf+4db3b0w==}
+  tsx@4.19.2:
+    resolution: {integrity: sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==}
     engines: {node: '>=18.0.0'}
     hasBin: true
 
-  tunnel-agent@0.6.0:
-    resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
-
-  turbo-darwin-64@2.0.4:
-    resolution: {integrity: sha512-x9mvmh4wudBstML8Z8IOmokLWglIhSfhQwnh2gBCSqabgVBKYvzl8Y+i+UCNPxheCGTgtsPepTcIaKBIyFIcvw==}
+  turbo-darwin-64@2.4.0:
+    resolution: {integrity: sha512-kVMScnPUa3R4n7woNmkR15kOY0aUwCLJcUyH5UC59ggKqr5HIHwweKYK8N1pwBQso0LQF4I9i93hIzfJguCcwQ==}
     cpu: [x64]
     os: [darwin]
 
-  turbo-darwin-arm64@2.0.4:
-    resolution: {integrity: sha512-/B1Ih8zPRGVw5vw4SlclOf3C/woJ/2T6ieH6u54KT4wypoaVyaiyMqBcziIXycdObIYr7jQ+raHO7q3mhay9/A==}
+  turbo-darwin-arm64@2.4.0:
+    resolution: {integrity: sha512-8JObIpfun1guA7UlFR5jC/SOVm49lRscxMxfg5jZ5ABft79rhFC+ygN9AwAhGKv6W2DUhIh2xENkSgu4EDmUyg==}
     cpu: [arm64]
     os: [darwin]
 
-  turbo-linux-64@2.0.4:
-    resolution: {integrity: sha512-6aG670e5zOWu6RczEYcB81nEl8EhiGJEvWhUrnAfNEUIMBEH1pR5SsMmG2ol5/m3PgiRM12r13dSqTxCLcHrVg==}
+  turbo-linux-64@2.4.0:
+    resolution: {integrity: sha512-xWDGGcRlBuGV7HXWAVuTY6vsQi4aZxGMAnuiuNDg8Ij1aHGohOM0RUsWMXjxz4vuJmjk9+/D6NQqHH3AJEXezg==}
     cpu: [x64]
     os: [linux]
 
-  turbo-linux-arm64@2.0.4:
-    resolution: {integrity: sha512-AXfVOjst+mCtPDFT4tCu08Qrfv12Nj7NDd33AjGwV79NYN1Y1rcFY59UQ4nO3ij3rbcvV71Xc+TZJ4csEvRCSg==}
+  turbo-linux-arm64@2.4.0:
+    resolution: {integrity: sha512-c3En99xMguc/Pdtk/rZP53LnDdw0W6lgUc04he8r8F+UHYSNvgzHh0WGXXmCC6lGbBH72kPhhGx4bAwyvi7dug==}
     cpu: [arm64]
     os: [linux]
 
-  turbo-windows-64@2.0.4:
-    resolution: {integrity: sha512-QOnUR9hKl0T5gq5h1fAhVEqBSjpcBi/BbaO71YGQNgsr6pAnCQdbG8/r3MYXet53efM0KTdOhieWeO3KLNKybA==}
+  turbo-windows-64@2.4.0:
+    resolution: {integrity: sha512-/gOORuOlyA8JDPzyA16CD3wvyRcuBFePa1URAnFUof9hXQmKxK0VvSDO79cYZFsJSchCKNJpckUS0gYxGsWwoA==}
     cpu: [x64]
     os: [win32]
 
-  turbo-windows-arm64@2.0.4:
-    resolution: {integrity: sha512-3v8WpdZy1AxZw0gha0q3caZmm+0gveBQ40OspD6mxDBIS+oBtO5CkxhIXkFJJW+jDKmDlM7wXDIGfMEq+QyNCQ==}
+  turbo-windows-arm64@2.4.0:
+    resolution: {integrity: sha512-/DJIdTFijEMM5LSiEpSfarDOMOlYqJV+EzmppqWtHqDsOLF4hbbIBH9sJR6OOp5dURAu5eURBYdmvBRz9Lo6TA==}
     cpu: [arm64]
     os: [win32]
 
-  turbo@2.0.4:
-    resolution: {integrity: sha512-Ilme/2Q5kYw0AeRr+aw3s02+WrEYaY7U8vPnqSZU/jaDG/qd6jHVN6nRWyd/9KXvJGYM69vE6JImoGoyNjLwaw==}
+  turbo@2.4.0:
+    resolution: {integrity: sha512-ah/yQp2oMif1X0u7fBJ4MLMygnkbKnW5O8SG6pJvloPCpHfFoZctkSVQiJ3VnvNTq71V2JJIdwmOeu1i34OQyg==}
     hasBin: true
 
-  type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
-
   type-detect@4.0.8:
     resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
     engines: {node: '>=4'}
 
-  type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-
-  type-fest@0.6.0:
-    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
-    engines: {node: '>=8'}
+  type-detect@4.1.0:
+    resolution: {integrity: sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==}
+    engines: {node: '>=4'}
 
   type-fest@0.7.1:
     resolution: {integrity: sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==}
     engines: {node: '>=8'}
 
-  type-fest@0.8.1:
-    resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
-    engines: {node: '>=8'}
-
   type-fest@3.13.1:
     resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
     engines: {node: '>=14.16'}
 
-  type-fest@4.26.1:
-    resolution: {integrity: sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==}
+  type-fest@4.33.0:
+    resolution: {integrity: sha512-s6zVrxuyKbbAsSAD5ZPTB77q4YIdRctkTbJ2/Dqlinwz+8ooH2gd+YA7VA6Pa93KML9GockVvoxjZ2vHP+mu8g==}
     engines: {node: '>=16'}
 
   type-flag@3.0.0:
@@ -8366,40 +6707,36 @@ packages:
     engines: {node: '>=4.2.0'}
     hasBin: true
 
-  typescript@5.4.5:
-    resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==}
+  typescript@5.7.3:
+    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
-  ufo@1.5.3:
-    resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
+  ufo@1.5.4:
+    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
   unbzip2-stream@1.4.3:
     resolution: {integrity: sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==}
 
-  undici-types@5.26.5:
-    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+  undici-types@6.19.8:
+    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
-  unicode-canonical-property-names-ecmascript@2.0.0:
-    resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
+  unicode-canonical-property-names-ecmascript@2.0.1:
+    resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
     engines: {node: '>=4'}
 
   unicode-match-property-ecmascript@2.0.0:
     resolution: {integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==}
     engines: {node: '>=4'}
 
-  unicode-match-property-value-ecmascript@2.1.0:
-    resolution: {integrity: sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==}
+  unicode-match-property-value-ecmascript@2.2.0:
+    resolution: {integrity: sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==}
     engines: {node: '>=4'}
 
   unicode-property-aliases-ecmascript@2.1.0:
     resolution: {integrity: sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==}
     engines: {node: '>=4'}
 
-  unicorn-magic@0.1.0:
-    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
-    engines: {node: '>=18'}
-
   unified@10.1.2:
     resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
 
@@ -8448,10 +6785,6 @@ packages:
   universal-user-agent@7.0.2:
     resolution: {integrity: sha512-0JCqzSKnStlRRQfCdowvqy3cy0Dvtlb8xecj/H8JFZuCze4rwjPZQOgvFvn0Ws/usCHQFGpyr+pB9adaGwXn4Q==}
 
-  universalify@0.1.2:
-    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
-    engines: {node: '>= 4.0.0'}
-
   universalify@2.0.1:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
@@ -8460,42 +6793,36 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
-  update-browserslist-db@1.0.16:
-    resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==}
+  update-browserslist-db@1.1.2:
+    resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
 
-  uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
-
-  urlpattern-polyfill@10.0.0:
-    resolution: {integrity: sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==}
-
-  use-callback-ref@1.3.2:
-    resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==}
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  use-sidecar@1.1.2:
-    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  use-sync-external-store@1.2.2:
-    resolution: {integrity: sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==}
+  use-sync-external-store@1.4.0:
+    resolution: {integrity: sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
@@ -8513,21 +6840,8 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  v8-compile-cache-lib@3.0.1:
-    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
-
-  valibot@0.31.0:
-    resolution: {integrity: sha512-bleS8aVFpRGTUgbMoXzsRJhpxJGiZ3MG1nuNSORuDvio+sI1EyT1+lQHg+77Pfnlxz+25Uj5HiwdaklcDcYdiQ==}
-
-  validate-npm-package-license@3.0.4:
-    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
-
-  vary@1.1.2:
-    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
-    engines: {node: '>= 0.8'}
-
-  vaul@0.9.1:
-    resolution: {integrity: sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==}
+  vaul@0.9.9:
+    resolution: {integrity: sha512-7afKg48srluhZwIkaU+lgGtFCUsYBSGOl8vcc8N/M3YQlZFlynHD15AE+pwrYdc826o7nrIND4lL9Y6b9WWZZQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -8550,17 +6864,14 @@ packages:
   vfile@5.3.7:
     resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
 
-  vfile@6.0.1:
-    resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}
-
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
   victory-vendor@36.9.2:
     resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
 
-  vite-node@2.1.2:
-    resolution: {integrity: sha512-HPcGNN5g/7I2OtPjLqgOtCRu/qhVvBxTUD3qzitmL0SrG1cWFzxzhMDWussxSbrRYWqnKf8P2jiNhPMSN+ymsQ==}
+  vite-node@2.1.9:
+    resolution: {integrity: sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
@@ -8572,8 +6883,8 @@ packages:
       vite:
         optional: true
 
-  vite@5.4.8:
-    resolution: {integrity: sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==}
+  vite@5.4.14:
+    resolution: {integrity: sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -8603,15 +6914,15 @@ packages:
       terser:
         optional: true
 
-  vitest@2.1.2:
-    resolution: {integrity: sha512-veNjLizOMkRrJ6xxb+pvxN6/QAWg95mzcRjtmkepXdN87FNfxAss9RKe2far/G9cQpipfgP2taqg0KiWsquj8A==}
+  vitest@2.1.9:
+    resolution: {integrity: sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': 2.1.2
-      '@vitest/ui': 2.1.2
+      '@vitest/browser': 2.1.9
+      '@vitest/ui': 2.1.9
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -8631,12 +6942,6 @@ packages:
   vlq@1.0.1:
     resolution: {integrity: sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==}
 
-  vue-eslint-parser@9.4.3:
-    resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
-    engines: {node: ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '>=6.0.0'
-
   walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
 
@@ -8650,24 +6955,15 @@ packages:
     resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
     engines: {node: '>= 8'}
 
-  webidl-conversions@3.0.1:
-    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
-
   webidl-conversions@4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
 
   whatwg-fetch@3.6.20:
     resolution: {integrity: sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==}
 
-  whatwg-url@5.0.0:
-    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
-
   whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
 
-  which-module@2.0.1:
-    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
-
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -8678,10 +6974,6 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  wrap-ansi@6.2.0:
-    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
-    engines: {node: '>=8'}
-
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -8693,8 +6985,13 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
-  write-file-atomic@2.4.3:
-    resolution: {integrity: sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==}
+  write-file-atomic@4.0.2:
+    resolution: {integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+
+  write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   ws@6.2.3:
     resolution: {integrity: sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==}
@@ -8731,17 +7028,6 @@ packages:
       utf-8-validate:
         optional: true
 
-  xml-name-validator@4.0.0:
-    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
-    engines: {node: '>=12'}
-
-  xtend@4.0.2:
-    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
-    engines: {node: '>=0.4'}
-
-  y18n@4.0.3:
-    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
-
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -8752,36 +7038,19 @@ packages:
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
-  yaml-eslint-parser@1.2.3:
-    resolution: {integrity: sha512-4wZWvE398hCP7O8n3nXKu/vdq1HcH01ixYlCREaJL5NUMwQ0g3MaGFUBNSlmBtKmhbtVG/Cm6lyYmSVTEVil8A==}
-    engines: {node: ^14.17.0 || >=16.0.0}
-
   yaml@1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
-  yaml@2.4.3:
-    resolution: {integrity: sha512-sntgmxj8o7DE7g/Qi60cqpLBA3HG3STcDA0kO+WfB05jEKhZMbY7umNm2rBpQvsmZ16/lPXCJGW2672dgOUkrg==}
-    engines: {node: '>= 14'}
-    hasBin: true
-
-  yaml@2.5.1:
-    resolution: {integrity: sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==}
+  yaml@2.7.0:
+    resolution: {integrity: sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==}
     engines: {node: '>= 14'}
     hasBin: true
 
-  yargs-parser@18.1.3:
-    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
-    engines: {node: '>=6'}
-
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
 
-  yargs@15.4.1:
-    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
-    engines: {node: '>=8'}
-
   yargs@17.7.2:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
@@ -8789,18 +7058,10 @@ packages:
   yauzl@2.10.0:
     resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
 
-  yn@3.1.1:
-    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
-    engines: {node: '>=6'}
-
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  yocto-queue@1.0.0:
-    resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
-    engines: {node: '>=12.20'}
-
   yocto-queue@1.1.1:
     resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==}
     engines: {node: '>=12.20'}
@@ -8815,6 +7076,9 @@ packages:
   zod@3.23.8:
     resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
 
+  zod@3.24.1:
+    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
+
   zustand@3.7.2:
     resolution: {integrity: sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==}
     engines: {node: '>=12.7.0'}
@@ -8829,1002 +7093,882 @@ packages:
 
 snapshots:
 
-  '@aashutoshrathi/word-wrap@1.2.6': {}
-
   '@alloc/quick-lru@5.2.0': {}
 
   '@ampproject/remapping@2.3.0':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@antfu/install-pkg@0.3.3':
-    dependencies:
-      '@jsdevtools/ez-spawn': 3.0.4
-
-  '@babel/code-frame@7.22.13':
-    dependencies:
-      '@babel/highlight': 7.22.20
-      chalk: 2.4.2
-
-  '@babel/code-frame@7.24.7':
+  '@babel/code-frame@7.26.2':
     dependencies:
-      '@babel/highlight': 7.24.7
-      picocolors: 1.0.1
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
 
-  '@babel/compat-data@7.24.7': {}
+  '@babel/compat-data@7.26.5': {}
 
-  '@babel/core@7.24.7':
+  '@babel/core@7.26.7':
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.24.7
-      '@babel/helper-compilation-targets': 7.24.7
-      '@babel/helper-module-transforms': 7.24.7(@babel/core@7.24.7)
-      '@babel/helpers': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/template': 7.24.7
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.5
+      '@babel/helper-compilation-targets': 7.26.5
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.7)
+      '@babel/helpers': 7.26.7
+      '@babel/parser': 7.26.7
+      '@babel/template': 7.25.9
+      '@babel/traverse': 7.26.7
+      '@babel/types': 7.26.7
       convert-source-map: 2.0.0
-      debug: 4.3.5
+      debug: 4.4.0
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.24.7':
+  '@babel/generator@7.26.5':
     dependencies:
-      '@babel/types': 7.24.7
-      '@jridgewell/gen-mapping': 0.3.5
+      '@babel/parser': 7.26.7
+      '@babel/types': 7.26.7
+      '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 2.5.2
-
-  '@babel/helper-annotate-as-pure@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
+      jsesc: 3.1.0
 
-  '@babel/helper-builder-binary-assignment-operator-visitor@7.24.7':
+  '@babel/helper-annotate-as-pure@7.25.9':
     dependencies:
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/types': 7.26.7
 
-  '@babel/helper-compilation-targets@7.24.7':
+  '@babel/helper-compilation-targets@7.26.5':
     dependencies:
-      '@babel/compat-data': 7.24.7
-      '@babel/helper-validator-option': 7.24.7
-      browserslist: 4.23.1
+      '@babel/compat-data': 7.26.5
+      '@babel/helper-validator-option': 7.25.9
+      browserslist: 4.24.4
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-function-name': 7.24.7
-      '@babel/helper-member-expression-to-functions': 7.24.7
-      '@babel/helper-optimise-call-expression': 7.24.7
-      '@babel/helper-replace-supers': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
+  '@babel/helper-create-class-features-plugin@7.25.9(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.7)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/traverse': 7.26.7
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-regexp-features-plugin@7.24.7(@babel/core@7.24.7)':
+  '@babel/helper-create-regexp-features-plugin@7.26.3(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-annotate-as-pure': 7.24.7
-      regexpu-core: 5.3.2
+      '@babel/core': 7.26.7
+      '@babel/helper-annotate-as-pure': 7.25.9
+      regexpu-core: 6.2.0
       semver: 6.3.1
 
-  '@babel/helper-define-polyfill-provider@0.6.2(@babel/core@7.24.7)':
+  '@babel/helper-define-polyfill-provider@0.6.3(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-compilation-targets': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      debug: 4.3.7
+      '@babel/core': 7.26.7
+      '@babel/helper-compilation-targets': 7.26.5
+      '@babel/helper-plugin-utils': 7.26.5
+      debug: 4.4.0
       lodash.debounce: 4.0.8
-      resolve: 1.22.8
+      resolve: 1.22.10
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-environment-visitor@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
-
-  '@babel/helper-function-name@7.24.7':
+  '@babel/helper-member-expression-to-functions@7.25.9':
     dependencies:
-      '@babel/template': 7.24.7
-      '@babel/types': 7.24.7
-
-  '@babel/helper-hoist-variables@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
-
-  '@babel/helper-member-expression-to-functions@7.24.7':
-    dependencies:
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/traverse': 7.26.7
+      '@babel/types': 7.26.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-imports@7.24.7':
+  '@babel/helper-module-imports@7.25.9':
     dependencies:
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/traverse': 7.26.7
+      '@babel/types': 7.26.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.24.7(@babel/core@7.24.7)':
+  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-simple-access': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
-      '@babel/helper-validator-identifier': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/traverse': 7.26.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-optimise-call-expression@7.24.7':
+  '@babel/helper-optimise-call-expression@7.25.9':
     dependencies:
-      '@babel/types': 7.24.7
+      '@babel/types': 7.26.7
 
-  '@babel/helper-plugin-utils@7.24.7': {}
-
-  '@babel/helper-remap-async-to-generator@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-wrap-function': 7.24.7
-    transitivePeerDependencies:
-      - supports-color
+  '@babel/helper-plugin-utils@7.26.5': {}
 
-  '@babel/helper-replace-supers@7.24.7(@babel/core@7.24.7)':
+  '@babel/helper-remap-async-to-generator@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-member-expression-to-functions': 7.24.7
-      '@babel/helper-optimise-call-expression': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-wrap-function': 7.25.9
+      '@babel/traverse': 7.26.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-simple-access@7.24.7':
+  '@babel/helper-replace-supers@7.26.5(@babel/core@7.26.7)':
     dependencies:
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/traverse': 7.26.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.24.7':
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
     dependencies:
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/traverse': 7.26.7
+      '@babel/types': 7.26.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-split-export-declaration@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
-
-  '@babel/helper-string-parser@7.22.5': {}
+  '@babel/helper-string-parser@7.25.9': {}
 
-  '@babel/helper-string-parser@7.24.7': {}
+  '@babel/helper-validator-identifier@7.25.9': {}
 
-  '@babel/helper-validator-identifier@7.24.7': {}
+  '@babel/helper-validator-option@7.25.9': {}
 
-  '@babel/helper-validator-option@7.24.7': {}
-
-  '@babel/helper-wrap-function@7.24.7':
+  '@babel/helper-wrap-function@7.25.9':
     dependencies:
-      '@babel/helper-function-name': 7.24.7
-      '@babel/template': 7.24.7
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/template': 7.25.9
+      '@babel/traverse': 7.26.7
+      '@babel/types': 7.26.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helpers@7.24.7':
-    dependencies:
-      '@babel/template': 7.24.7
-      '@babel/types': 7.24.7
-
-  '@babel/highlight@7.22.20':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.24.7
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-
-  '@babel/highlight@7.24.7':
+  '@babel/helpers@7.26.7':
     dependencies:
-      '@babel/helper-validator-identifier': 7.24.7
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.0.1
-
-  '@babel/parser@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
-
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.7
 
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.7(@babel/core@7.24.7)':
+  '@babel/parser@7.26.7':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/types': 7.26.7
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
-      '@babel/plugin-transform-optional-chaining': 7.24.7(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/traverse': 7.26.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.24.7)':
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-remap-async-to-generator': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.7)
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.24.7)':
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/plugin-transform-optional-chaining': 7.25.9(@babel/core@7.26.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-export-default-from@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-export-default-from': 7.24.7(@babel/core@7.24.7)
-
-  '@babel/plugin-proposal-logical-assignment-operators@7.20.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.7)
-
-  '@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.7)
-
-  '@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.7)
-
-  '@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/compat-data': 7.24.7
-      '@babel/core': 7.24.7
-      '@babel/helper-compilation-targets': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.7)
-      '@babel/plugin-transform-parameters': 7.24.7(@babel/core@7.24.7)
-
-  '@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.7)
-
-  '@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.24.7)':
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/traverse': 7.26.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.7)':
+  '@babel/plugin-proposal-export-default-from@7.25.9(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.26.7
 
-  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-export-default-from@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-export-default-from@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-flow@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-flow@7.26.0(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-import-assertions@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-import-assertions@7.26.0(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-import-attributes@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-import-attributes@7.26.0(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-typescript@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-create-regexp-features-plugin': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-arrow-functions@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-arrow-functions@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-async-generator-functions@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-async-generator-functions@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-remap-async-to-generator': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-remap-async-to-generator': 7.25.9(@babel/core@7.26.7)
+      '@babel/traverse': 7.26.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-async-to-generator@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-async-to-generator@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-remap-async-to-generator': 7.24.7(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-remap-async-to-generator': 7.25.9(@babel/core@7.26.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-block-scoped-functions@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-block-scoped-functions@7.26.5(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-block-scoping@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-block-scoping@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-class-properties@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-class-properties@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-class-static-block@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-class-static-block@7.26.0(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-classes@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-classes@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-compilation-targets': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-function-name': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-replace-supers': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-split-export-declaration': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-compilation-targets': 7.26.5
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.7)
+      '@babel/traverse': 7.26.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-computed-properties@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-computed-properties@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/template': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/template': 7.25.9
 
-  '@babel/plugin-transform-destructuring@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-destructuring@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-dotall-regex@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-dotall-regex@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-create-regexp-features-plugin': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-duplicate-keys@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-duplicate-keys@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-dynamic-import@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-exponentiation-operator@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-dynamic-import@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-builder-binary-assignment-operator-visitor': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-transform-exponentiation-operator@7.26.3(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-export-namespace-from@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-export-namespace-from@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-flow-strip-types@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-flow-strip-types@7.26.5(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-flow': 7.24.7(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/plugin-syntax-flow': 7.26.0(@babel/core@7.26.7)
 
-  '@babel/plugin-transform-for-of@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-for-of@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-function-name@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-function-name@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-compilation-targets': 7.24.7
-      '@babel/helper-function-name': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-compilation-targets': 7.26.5
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/traverse': 7.26.7
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-json-strings@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-json-strings@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-literals@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-literals@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-logical-assignment-operators@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-logical-assignment-operators@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-member-expression-literals@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-member-expression-literals@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-modules-amd@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-modules-amd@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-module-transforms': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-commonjs@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-modules-commonjs@7.26.3(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-module-transforms': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-simple-access': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-systemjs@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-modules-systemjs@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-hoist-variables': 7.24.7
-      '@babel/helper-module-transforms': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-validator-identifier': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/traverse': 7.26.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-umd@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-modules-umd@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-module-transforms': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-named-capturing-groups-regex@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-create-regexp-features-plugin': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-new-target@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-new-target@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-nullish-coalescing-operator@7.26.6(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-numeric-separator@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-numeric-separator@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-object-rest-spread@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-object-rest-spread@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-compilation-targets': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.7)
-      '@babel/plugin-transform-parameters': 7.24.7(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-compilation-targets': 7.26.5
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/plugin-transform-parameters': 7.25.9(@babel/core@7.26.7)
 
-  '@babel/plugin-transform-object-super@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-object-super@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-replace-supers': 7.24.7(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-optional-catch-binding@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-optional-catch-binding@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-optional-chaining@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-optional-chaining@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-parameters@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-parameters@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-private-methods@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-private-methods@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-private-property-in-object@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-private-property-in-object@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-property-literals@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-property-literals@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-react-display-name@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-react-display-name@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-react-jsx-self@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-react-jsx-self@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-react-jsx-source@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-react-jsx-source@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.24.7)
-      '@babel/types': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.7)
+      '@babel/types': 7.26.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-regenerator@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-regenerator@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
       regenerator-transform: 0.15.2
 
-  '@babel/plugin-transform-reserved-words@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-
-  '@babel/plugin-transform-runtime@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-regexp-modifiers@7.26.0(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      babel-plugin-polyfill-corejs2: 0.4.11(@babel/core@7.24.7)
-      babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.7)
-      babel-plugin-polyfill-regenerator: 0.6.2(@babel/core@7.24.7)
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/core': 7.26.7
+      '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-shorthand-properties@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-reserved-words@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-spread@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-runtime@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.26.5
+      babel-plugin-polyfill-corejs2: 0.4.12(@babel/core@7.26.7)
+      babel-plugin-polyfill-corejs3: 0.10.6(@babel/core@7.26.7)
+      babel-plugin-polyfill-regenerator: 0.6.3(@babel/core@7.26.7)
+      semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-sticky-regex@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-
-  '@babel/plugin-transform-template-literals@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-
-  '@babel/plugin-transform-typeof-symbol@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-shorthand-properties@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-typescript@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-spread@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
     transitivePeerDependencies:
       - supports-color
-
-  '@babel/plugin-transform-unicode-escapes@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-
-  '@babel/plugin-transform-unicode-property-regex@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-create-regexp-features-plugin': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
-
-  '@babel/plugin-transform-unicode-regex@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-create-regexp-features-plugin': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
-
-  '@babel/plugin-transform-unicode-sets-regex@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-create-regexp-features-plugin': 7.24.7(@babel/core@7.24.7)
-      '@babel/helper-plugin-utils': 7.24.7
-
-  '@babel/preset-env@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/compat-data': 7.24.7
-      '@babel/core': 7.24.7
-      '@babel/helper-compilation-targets': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-validator-option': 7.24.7
-      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.7)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.7)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.7)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.7)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.7)
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.7)
-      '@babel/plugin-syntax-import-assertions': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-syntax-import-attributes': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.7)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.7)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.7)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.7)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.7)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.7)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.7)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.7)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.7)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.7)
-      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.24.7)
-      '@babel/plugin-transform-arrow-functions': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-async-generator-functions': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-async-to-generator': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-block-scoped-functions': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-block-scoping': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-class-properties': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-class-static-block': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-classes': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-computed-properties': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-destructuring': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-dotall-regex': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-duplicate-keys': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-dynamic-import': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-exponentiation-operator': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-export-namespace-from': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-for-of': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-function-name': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-json-strings': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-literals': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-logical-assignment-operators': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-member-expression-literals': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-modules-amd': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-modules-commonjs': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-modules-systemjs': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-modules-umd': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-new-target': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-numeric-separator': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-object-rest-spread': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-object-super': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-optional-catch-binding': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-optional-chaining': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-parameters': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-private-methods': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-private-property-in-object': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-property-literals': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-regenerator': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-reserved-words': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-shorthand-properties': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-spread': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-sticky-regex': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-template-literals': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-typeof-symbol': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-unicode-escapes': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-unicode-property-regex': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-unicode-regex': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-unicode-sets-regex': 7.24.7(@babel/core@7.24.7)
-      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.24.7)
-      babel-plugin-polyfill-corejs2: 0.4.11(@babel/core@7.24.7)
-      babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.7)
-      babel-plugin-polyfill-regenerator: 0.6.2(@babel/core@7.24.7)
-      core-js-compat: 3.37.1
+
+  '@babel/plugin-transform-sticky-regex@7.25.9(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-transform-template-literals@7.25.9(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-transform-typeof-symbol@7.26.7(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-transform-typescript@7.26.7(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-unicode-escapes@7.25.9(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-transform-unicode-property-regex@7.25.9(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-transform-unicode-regex@7.25.9(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-transform-unicode-sets-regex@7.25.9(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/preset-env@7.26.7(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/compat-data': 7.26.5
+      '@babel/core': 7.26.7
+      '@babel/helper-compilation-targets': 7.26.5
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-validator-option': 7.25.9
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.26.7)
+      '@babel/plugin-syntax-import-assertions': 7.26.0(@babel/core@7.26.7)
+      '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.7)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.26.7)
+      '@babel/plugin-transform-arrow-functions': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-async-generator-functions': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-async-to-generator': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-block-scoped-functions': 7.26.5(@babel/core@7.26.7)
+      '@babel/plugin-transform-block-scoping': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-class-properties': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-class-static-block': 7.26.0(@babel/core@7.26.7)
+      '@babel/plugin-transform-classes': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-computed-properties': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-destructuring': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-dotall-regex': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-duplicate-keys': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-dynamic-import': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-exponentiation-operator': 7.26.3(@babel/core@7.26.7)
+      '@babel/plugin-transform-export-namespace-from': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-for-of': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-function-name': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-json-strings': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-literals': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-logical-assignment-operators': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-member-expression-literals': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-modules-amd': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-modules-commonjs': 7.26.3(@babel/core@7.26.7)
+      '@babel/plugin-transform-modules-systemjs': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-modules-umd': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-new-target': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.26.6(@babel/core@7.26.7)
+      '@babel/plugin-transform-numeric-separator': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-object-rest-spread': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-object-super': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-optional-catch-binding': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-optional-chaining': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-parameters': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-private-property-in-object': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-property-literals': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-regenerator': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-regexp-modifiers': 7.26.0(@babel/core@7.26.7)
+      '@babel/plugin-transform-reserved-words': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-shorthand-properties': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-spread': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-sticky-regex': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-template-literals': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-typeof-symbol': 7.26.7(@babel/core@7.26.7)
+      '@babel/plugin-transform-unicode-escapes': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-unicode-property-regex': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-unicode-regex': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-unicode-sets-regex': 7.25.9(@babel/core@7.26.7)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.26.7)
+      babel-plugin-polyfill-corejs2: 0.4.12(@babel/core@7.26.7)
+      babel-plugin-polyfill-corejs3: 0.10.6(@babel/core@7.26.7)
+      babel-plugin-polyfill-regenerator: 0.6.3(@babel/core@7.26.7)
+      core-js-compat: 3.40.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-flow@7.24.7(@babel/core@7.24.7)':
+  '@babel/preset-flow@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-validator-option': 7.24.7
-      '@babel/plugin-transform-flow-strip-types': 7.24.7(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-validator-option': 7.25.9
+      '@babel/plugin-transform-flow-strip-types': 7.26.5(@babel/core@7.26.7)
 
-  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.24.7)':
+  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/types': 7.26.7
       esutils: 2.0.3
 
-  '@babel/preset-typescript@7.24.7(@babel/core@7.24.7)':
+  '@babel/preset-typescript@7.26.0(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-validator-option': 7.24.7
-      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-modules-commonjs': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-typescript': 7.24.7(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-validator-option': 7.25.9
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-modules-commonjs': 7.26.3(@babel/core@7.26.7)
+      '@babel/plugin-transform-typescript': 7.26.7(@babel/core@7.26.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/register@7.24.6(@babel/core@7.24.7)':
+  '@babel/register@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.26.7
       clone-deep: 4.0.1
       find-cache-dir: 2.1.0
       make-dir: 2.1.0
       pirates: 4.0.6
       source-map-support: 0.5.21
 
-  '@babel/regjsgen@0.8.0': {}
-
-  '@babel/runtime@7.24.7':
+  '@babel/runtime@7.26.7':
     dependencies:
-      regenerator-runtime: 0.14.0
+      regenerator-runtime: 0.14.1
 
-  '@babel/template@7.24.7':
+  '@babel/template@7.25.9':
     dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.26.7
+      '@babel/types': 7.26.7
 
-  '@babel/traverse@7.24.7':
+  '@babel/traverse@7.26.7':
     dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-function-name': 7.24.7
-      '@babel/helper-hoist-variables': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
-      debug: 4.3.5
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.5
+      '@babel/parser': 7.26.7
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.7
+      debug: 4.4.0
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.23.3':
+  '@babel/types@7.26.7':
     dependencies:
-      '@babel/helper-string-parser': 7.22.5
-      '@babel/helper-validator-identifier': 7.24.7
-      to-fast-properties: 2.0.0
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
 
-  '@babel/types@7.24.7':
-    dependencies:
-      '@babel/helper-string-parser': 7.24.7
-      '@babel/helper-validator-identifier': 7.24.7
-      to-fast-properties: 2.0.0
+  '@biomejs/biome@1.9.4':
+    optionalDependencies:
+      '@biomejs/cli-darwin-arm64': 1.9.4
+      '@biomejs/cli-darwin-x64': 1.9.4
+      '@biomejs/cli-linux-arm64': 1.9.4
+      '@biomejs/cli-linux-arm64-musl': 1.9.4
+      '@biomejs/cli-linux-x64': 1.9.4
+      '@biomejs/cli-linux-x64-musl': 1.9.4
+      '@biomejs/cli-win32-arm64': 1.9.4
+      '@biomejs/cli-win32-x64': 1.9.4
 
-  '@clack/core@0.3.4':
-    dependencies:
-      picocolors: 1.0.1
-      sisteransi: 1.0.5
+  '@biomejs/cli-darwin-arm64@1.9.4':
+    optional: true
 
-  '@clack/prompts@0.7.0':
-    dependencies:
-      '@clack/core': 0.3.4
-      picocolors: 1.0.1
-      sisteransi: 1.0.5
+  '@biomejs/cli-darwin-x64@1.9.4':
+    optional: true
 
-  '@clerc/core@0.44.0':
-    dependencies:
-      '@clerc/utils': 0.44.0(@clerc/core@0.44.0)
-      defu: 6.1.4
-      is-platform: 1.0.0
-      lite-emit: 2.3.0
-      type-fest: 4.26.1
-      type-flag: 3.0.0
+  '@biomejs/cli-linux-arm64-musl@1.9.4':
+    optional: true
 
-  '@clerc/plugin-completions@0.44.0(@clerc/core@0.44.0)':
+  '@biomejs/cli-linux-arm64@1.9.4':
+    optional: true
+
+  '@biomejs/cli-linux-x64-musl@1.9.4':
+    optional: true
+
+  '@biomejs/cli-linux-x64@1.9.4':
+    optional: true
+
+  '@biomejs/cli-win32-arm64@1.9.4':
+    optional: true
+
+  '@biomejs/cli-win32-x64@1.9.4':
+    optional: true
+
+  '@clerc/core@0.44.0':
     dependencies:
-      '@clerc/core': 0.44.0
       '@clerc/utils': 0.44.0(@clerc/core@0.44.0)
+      defu: 6.1.4
+      is-platform: 1.0.0
+      lite-emit: 2.3.0
+      type-fest: 4.33.0
+      type-flag: 3.0.0
 
-  '@clerc/plugin-friendly-error@0.44.0(@clerc/core@0.44.0)':
+  '@clerc/plugin-completions@0.44.0(@clerc/core@0.44.0)':
     dependencies:
       '@clerc/core': 0.44.0
-      kons: 0.7.1
+      '@clerc/utils': 0.44.0(@clerc/core@0.44.0)
 
   '@clerc/plugin-help@0.44.0(@clerc/core@0.44.0)':
     dependencies:
@@ -9835,17 +7979,6 @@ snapshots:
       text-table: 0.2.0
       yoctocolors: 1.0.0
 
-  '@clerc/plugin-not-found@0.44.0(@clerc/core@0.44.0)':
-    dependencies:
-      '@clerc/core': 0.44.0
-      '@clerc/utils': 0.44.0(@clerc/core@0.44.0)
-      didyoumean2: 6.0.1
-      yoctocolors: 1.0.0
-
-  '@clerc/plugin-strict-flags@0.44.0(@clerc/core@0.44.0)':
-    dependencies:
-      '@clerc/core': 0.44.0
-
   '@clerc/plugin-version@0.44.0(@clerc/core@0.44.0)':
     dependencies:
       '@clerc/core': 0.44.0
@@ -9855,52 +7988,51 @@ snapshots:
     dependencies:
       '@clerc/core': 0.44.0
 
-  '@content-collections/cli@0.1.5(@content-collections/core@0.7.2(typescript@5.4.5))':
+  '@content-collections/cli@0.1.6(@content-collections/core@0.7.3(typescript@5.7.3))':
     dependencies:
-      '@content-collections/core': 0.7.2(typescript@5.4.5)
-      '@content-collections/integrations': 0.2.1(@content-collections/core@0.7.2(typescript@5.4.5))
-      clerc: 0.44.0
+      '@clerc/core': 0.44.0
+      '@clerc/plugin-completions': 0.44.0(@clerc/core@0.44.0)
+      '@clerc/plugin-help': 0.44.0(@clerc/core@0.44.0)
+      '@clerc/plugin-version': 0.44.0(@clerc/core@0.44.0)
+      '@content-collections/core': 0.7.3(typescript@5.7.3)
+      '@content-collections/integrations': 0.2.1(@content-collections/core@0.7.3(typescript@5.7.3))
 
-  '@content-collections/core@0.7.2(typescript@5.4.5)':
+  '@content-collections/core@0.7.3(typescript@5.7.3)':
     dependencies:
-      '@parcel/watcher': 2.4.1
+      '@parcel/watcher': 2.5.1
       camelcase: 8.0.0
       esbuild: 0.21.5
       gray-matter: 4.0.3
-      p-limit: 6.1.0
+      p-limit: 6.2.0
       picomatch: 4.0.2
       pluralize: 8.0.0
       serialize-javascript: 6.0.2
-      tinyglobby: 0.2.9
-      typescript: 5.4.5
-      yaml: 2.5.1
-      zod: 3.23.8
+      tinyglobby: 0.2.10
+      typescript: 5.7.3
+      yaml: 2.7.0
+      zod: 3.24.1
 
-  '@content-collections/integrations@0.2.1(@content-collections/core@0.7.2(typescript@5.4.5))':
+  '@content-collections/integrations@0.2.1(@content-collections/core@0.7.3(typescript@5.7.3))':
     dependencies:
-      '@content-collections/core': 0.7.2(typescript@5.4.5)
+      '@content-collections/core': 0.7.3(typescript@5.7.3)
 
-  '@content-collections/mdx@0.1.6(@content-collections/core@0.7.2(typescript@5.4.5))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@content-collections/mdx@0.1.6(@content-collections/core@0.7.3(typescript@5.7.3))(acorn@8.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@content-collections/core': 0.7.2(typescript@5.4.5)
+      '@content-collections/core': 0.7.3(typescript@5.7.3)
       esbuild: 0.21.5
-      mdx-bundler: 10.0.3(esbuild@0.21.5)
+      mdx-bundler: 10.0.3(acorn@8.14.0)(esbuild@0.21.5)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       unified: 11.0.5
     transitivePeerDependencies:
+      - acorn
       - supports-color
 
-  '@content-collections/next@0.2.3(@content-collections/core@0.7.2(typescript@5.4.5))(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))':
-    dependencies:
-      '@content-collections/core': 0.7.2(typescript@5.4.5)
-      '@content-collections/integrations': 0.2.1(@content-collections/core@0.7.2(typescript@5.4.5))
-      next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-
-  '@cspotcode/source-map-support@0.8.1':
+  '@content-collections/next@0.2.4(@content-collections/core@0.7.3(typescript@5.7.3))(next@14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))':
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.9
-    optional: true
+      '@content-collections/core': 0.7.3(typescript@5.7.3)
+      '@content-collections/integrations': 0.2.1(@content-collections/core@0.7.3(typescript@5.7.3))
+      next: 14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
   '@csstools/convert-colors@2.0.0': {}
 
@@ -9912,12 +8044,6 @@ snapshots:
     dependencies:
       postcss-selector-parser: 7.0.0
 
-  '@dprint/formatter@0.3.0': {}
-
-  '@dprint/markdown@0.17.1': {}
-
-  '@dprint/toml@0.6.2': {}
-
   '@emotion/is-prop-valid@0.8.8':
     dependencies:
       '@emotion/memoize': 0.7.4
@@ -9926,371 +8052,268 @@ snapshots:
   '@emotion/memoize@0.7.4':
     optional: true
 
-  '@es-joy/jsdoccomment@0.43.1':
-    dependencies:
-      '@types/eslint': 8.56.5
-      '@types/estree': 1.0.5
-      '@typescript-eslint/types': 7.13.0
-      comment-parser: 1.4.1
-      esquery: 1.5.0
-      jsdoc-type-pratt-parser: 4.0.0
-
   '@esbuild-plugins/node-resolve@0.2.2(esbuild@0.21.5)':
     dependencies:
       '@types/resolve': 1.20.6
-      debug: 4.3.7
+      debug: 4.4.0
       esbuild: 0.21.5
       escape-string-regexp: 4.0.0
-      resolve: 1.22.8
+      resolve: 1.22.10
     transitivePeerDependencies:
       - supports-color
 
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
+  '@esbuild/aix-ppc64@0.23.1':
+    optional: true
+
   '@esbuild/android-arm64@0.17.19':
     optional: true
 
   '@esbuild/android-arm64@0.21.5':
     optional: true
 
+  '@esbuild/android-arm64@0.23.1':
+    optional: true
+
   '@esbuild/android-arm@0.17.19':
     optional: true
 
   '@esbuild/android-arm@0.21.5':
     optional: true
 
+  '@esbuild/android-arm@0.23.1':
+    optional: true
+
   '@esbuild/android-x64@0.17.19':
     optional: true
 
   '@esbuild/android-x64@0.21.5':
     optional: true
 
+  '@esbuild/android-x64@0.23.1':
+    optional: true
+
   '@esbuild/darwin-arm64@0.17.19':
     optional: true
 
   '@esbuild/darwin-arm64@0.21.5':
     optional: true
 
+  '@esbuild/darwin-arm64@0.23.1':
+    optional: true
+
   '@esbuild/darwin-x64@0.17.19':
     optional: true
 
   '@esbuild/darwin-x64@0.21.5':
     optional: true
 
+  '@esbuild/darwin-x64@0.23.1':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.17.19':
     optional: true
 
   '@esbuild/freebsd-arm64@0.21.5':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.23.1':
+    optional: true
+
   '@esbuild/freebsd-x64@0.17.19':
     optional: true
 
   '@esbuild/freebsd-x64@0.21.5':
     optional: true
 
+  '@esbuild/freebsd-x64@0.23.1':
+    optional: true
+
   '@esbuild/linux-arm64@0.17.19':
     optional: true
 
   '@esbuild/linux-arm64@0.21.5':
     optional: true
 
+  '@esbuild/linux-arm64@0.23.1':
+    optional: true
+
   '@esbuild/linux-arm@0.17.19':
     optional: true
 
   '@esbuild/linux-arm@0.21.5':
     optional: true
 
+  '@esbuild/linux-arm@0.23.1':
+    optional: true
+
   '@esbuild/linux-ia32@0.17.19':
     optional: true
 
   '@esbuild/linux-ia32@0.21.5':
     optional: true
 
+  '@esbuild/linux-ia32@0.23.1':
+    optional: true
+
   '@esbuild/linux-loong64@0.17.19':
     optional: true
 
   '@esbuild/linux-loong64@0.21.5':
     optional: true
 
+  '@esbuild/linux-loong64@0.23.1':
+    optional: true
+
   '@esbuild/linux-mips64el@0.17.19':
     optional: true
 
   '@esbuild/linux-mips64el@0.21.5':
     optional: true
 
+  '@esbuild/linux-mips64el@0.23.1':
+    optional: true
+
   '@esbuild/linux-ppc64@0.17.19':
     optional: true
 
   '@esbuild/linux-ppc64@0.21.5':
     optional: true
 
+  '@esbuild/linux-ppc64@0.23.1':
+    optional: true
+
   '@esbuild/linux-riscv64@0.17.19':
     optional: true
 
   '@esbuild/linux-riscv64@0.21.5':
     optional: true
 
+  '@esbuild/linux-riscv64@0.23.1':
+    optional: true
+
   '@esbuild/linux-s390x@0.17.19':
     optional: true
 
   '@esbuild/linux-s390x@0.21.5':
     optional: true
 
+  '@esbuild/linux-s390x@0.23.1':
+    optional: true
+
   '@esbuild/linux-x64@0.17.19':
     optional: true
 
   '@esbuild/linux-x64@0.21.5':
     optional: true
 
+  '@esbuild/linux-x64@0.23.1':
+    optional: true
+
   '@esbuild/netbsd-x64@0.17.19':
     optional: true
 
   '@esbuild/netbsd-x64@0.21.5':
     optional: true
 
+  '@esbuild/netbsd-x64@0.23.1':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.23.1':
+    optional: true
+
   '@esbuild/openbsd-x64@0.17.19':
     optional: true
 
   '@esbuild/openbsd-x64@0.21.5':
     optional: true
 
+  '@esbuild/openbsd-x64@0.23.1':
+    optional: true
+
   '@esbuild/sunos-x64@0.17.19':
     optional: true
 
   '@esbuild/sunos-x64@0.21.5':
     optional: true
 
+  '@esbuild/sunos-x64@0.23.1':
+    optional: true
+
   '@esbuild/win32-arm64@0.17.19':
     optional: true
 
   '@esbuild/win32-arm64@0.21.5':
     optional: true
 
+  '@esbuild/win32-arm64@0.23.1':
+    optional: true
+
   '@esbuild/win32-ia32@0.17.19':
     optional: true
 
   '@esbuild/win32-ia32@0.21.5':
     optional: true
 
+  '@esbuild/win32-ia32@0.23.1':
+    optional: true
+
   '@esbuild/win32-x64@0.17.19':
     optional: true
 
   '@esbuild/win32-x64@0.21.5':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@9.2.0)':
-    dependencies:
-      eslint: 9.2.0
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/regexpp@4.10.0': {}
-
-  '@eslint-react/ast@1.5.15(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      '@eslint-react/tools': 1.5.15
-      '@eslint-react/types': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      string-ts: 2.1.1
-      ts-pattern: 5.1.2
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
-
-  '@eslint-react/core@1.5.15(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-react/ast': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/jsx': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/shared': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/tools': 1.5.15
-      '@eslint-react/types': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/var': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/type-utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      short-unique-id: 5.2.0
-      ts-pattern: 5.1.2
-      valibot: 0.31.0
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
-
-  '@eslint-react/eslint-plugin@1.5.15(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-react/shared': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/tools': 1.5.15
-      '@eslint-react/types': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/type-utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-      eslint-plugin-react-core: 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      eslint-plugin-react-dom: 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      eslint-plugin-react-hooks-extra: 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      eslint-plugin-react-naming-convention: 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint-react/jsx@1.5.15(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-react/ast': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/shared': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/tools': 1.5.15
-      '@eslint-react/types': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/var': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      micro-memoize: 4.1.2
-      ts-pattern: 5.1.2
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
-
-  '@eslint-react/shared@1.5.15(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      deepmerge-ts: 7.0.3
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
-
-  '@eslint-react/tools@1.5.15': {}
-
-  '@eslint-react/types@1.5.15(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-react/tools': 1.5.15
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
-
-  '@eslint-react/var@1.5.15(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-react/ast': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/tools': 1.5.15
-      '@eslint-react/types': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      string-ts: 2.1.1
-      valibot: 0.31.0
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
-
-  '@eslint/eslintrc@3.1.0':
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 10.0.1
-      globals: 14.0.0
-      ignore: 5.3.1
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/js@9.2.0': {}
+  '@esbuild/win32-x64@0.23.1':
+    optional: true
 
   '@faker-js/faker@8.4.1': {}
 
   '@fal-works/esbuild-plugin-global-externals@2.1.2': {}
 
-  '@floating-ui/core@1.6.2':
+  '@floating-ui/core@1.6.9':
     dependencies:
-      '@floating-ui/utils': 0.2.2
+      '@floating-ui/utils': 0.2.9
 
-  '@floating-ui/dom@1.6.5':
+  '@floating-ui/dom@1.6.13':
     dependencies:
-      '@floating-ui/core': 1.6.2
-      '@floating-ui/utils': 0.2.2
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/utils': 0.2.9
 
-  '@floating-ui/react-dom@2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@floating-ui/dom': 1.6.5
+      '@floating-ui/dom': 1.6.13
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@floating-ui/react@0.26.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@floating-ui/react@0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@floating-ui/utils': 0.2.2
+      '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@floating-ui/utils': 0.2.9
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       tabbable: 6.2.0
 
-  '@floating-ui/utils@0.2.2': {}
+  '@floating-ui/utils@0.2.9': {}
 
-  '@hapi/hoek@9.3.0': {}
-
-  '@hapi/topo@5.1.0':
-    dependencies:
-      '@hapi/hoek': 9.3.0
-
-  '@headlessui/react@2.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@headlessui/react@2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@floating-ui/react': 0.26.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-aria/focus': 3.17.1(react@18.3.1)
-      '@react-aria/interactions': 3.21.3(react@18.3.1)
-      '@tanstack/react-virtual': 3.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@floating-ui/react': 0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-aria/focus': 3.19.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-aria/interactions': 3.23.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tanstack/react-virtual': 3.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@heroicons/react@2.1.3(react@18.3.1)':
+  '@heroicons/react@2.2.0(react@18.3.1)':
     dependencies:
       react: 18.3.1
 
-  '@hookform/resolvers@3.6.0(react-hook-form@7.52.0(react@18.3.1))':
-    dependencies:
-      react-hook-form: 7.52.0(react@18.3.1)
-
-  '@humanwhocodes/config-array@0.13.0':
-    dependencies:
-      '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@humanwhocodes/module-importer@1.0.1': {}
-
-  '@humanwhocodes/object-schema@2.0.3': {}
-
-  '@humanwhocodes/retry@0.2.4': {}
-
-  '@ianvs/prettier-plugin-sort-imports@3.7.2(@vue/compiler-sfc@3.4.29)(prettier@3.3.2)':
+  '@hookform/resolvers@3.10.0(react-hook-form@7.54.2(react@18.3.1))':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/generator': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
-      javascript-natural-sort: 0.7.1
-      lodash.clone: 4.5.0
-      lodash.isequal: 4.5.0
-      prettier: 3.3.2
-    optionalDependencies:
-      '@vue/compiler-sfc': 3.4.29
-    transitivePeerDependencies:
-      - supports-color
+      react-hook-form: 7.54.2(react@18.3.1)
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -10303,6 +8326,16 @@ snapshots:
 
   '@isaacs/ttlcache@1.4.1': {}
 
+  '@istanbuljs/load-nyc-config@1.1.0':
+    dependencies:
+      camelcase: 5.3.1
+      find-up: 4.1.0
+      get-package-type: 0.1.0
+      js-yaml: 3.14.1
+      resolve-from: 5.0.0
+
+  '@istanbuljs/schema@0.1.3': {}
+
   '@jest/create-cache-key-function@29.7.0':
     dependencies:
       '@jest/types': 29.6.3
@@ -10311,14 +8344,14 @@ snapshots:
     dependencies:
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
       jest-mock: 29.7.0
 
   '@jest/fake-timers@29.7.0':
     dependencies:
       '@jest/types': 29.6.3
       '@sinonjs/fake-timers': 10.3.0
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
       jest-message-util: 29.7.0
       jest-mock: 29.7.0
       jest-util: 29.7.0
@@ -10327,84 +8360,77 @@ snapshots:
     dependencies:
       '@sinclair/typebox': 0.27.8
 
-  '@jest/types@26.6.2':
+  '@jest/transform@29.7.0':
     dependencies:
-      '@types/istanbul-lib-coverage': 2.0.6
-      '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.11.24
-      '@types/yargs': 15.0.19
+      '@babel/core': 7.26.7
+      '@jest/types': 29.6.3
+      '@jridgewell/trace-mapping': 0.3.25
+      babel-plugin-istanbul: 6.1.1
       chalk: 4.1.2
+      convert-source-map: 2.0.0
+      fast-json-stable-stringify: 2.1.0
+      graceful-fs: 4.2.11
+      jest-haste-map: 29.7.0
+      jest-regex-util: 29.6.3
+      jest-util: 29.7.0
+      micromatch: 4.0.8
+      pirates: 4.0.6
+      slash: 3.0.0
+      write-file-atomic: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
 
   '@jest/types@29.6.3':
     dependencies:
       '@jest/schemas': 29.6.3
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.11.24
-      '@types/yargs': 17.0.32
+      '@types/node': 20.17.17
+      '@types/yargs': 17.0.33
       chalk: 4.1.2
 
-  '@jridgewell/gen-mapping@0.3.3':
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.20
-
-  '@jridgewell/gen-mapping@0.3.5':
+  '@jridgewell/gen-mapping@0.3.8':
     dependencies:
       '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@jridgewell/resolve-uri@3.1.1': {}
-
-  '@jridgewell/set-array@1.1.2': {}
+  '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/set-array@1.2.1': {}
 
   '@jridgewell/source-map@0.3.6':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@jridgewell/sourcemap-codec@1.4.15': {}
-
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
-  '@jridgewell/trace-mapping@0.3.20':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.4.15
-
   '@jridgewell/trace-mapping@0.3.25':
     dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.4.15
-
-  '@jridgewell/trace-mapping@0.3.9':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
+      '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
-    optional: true
 
   '@jsdevtools/ez-spawn@3.0.4':
     dependencies:
       call-me-maybe: 1.0.2
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       string-argv: 0.3.2
-      type-detect: 4.0.8
+      type-detect: 4.1.0
 
-  '@mdx-js/esbuild@3.0.1(esbuild@0.21.5)':
+  '@mdx-js/esbuild@3.1.0(acorn@8.14.0)(esbuild@0.21.5)':
     dependencies:
-      '@mdx-js/mdx': 3.0.1
-      '@types/unist': 3.0.2
+      '@mdx-js/mdx': 3.1.0(acorn@8.14.0)
+      '@types/unist': 3.0.3
       esbuild: 0.21.5
-      vfile: 6.0.1
+      source-map: 0.7.4
+      vfile: 6.0.3
       vfile-message: 4.0.2
     transitivePeerDependencies:
+      - acorn
       - supports-color
 
-  '@mdx-js/mdx@3.0.1':
+  '@mdx-js/mdx@3.1.0(acorn@8.14.0)':
     dependencies:
       '@types/estree': 1.0.6
       '@types/estree-jsx': 1.0.5
@@ -10412,15 +8438,16 @@ snapshots:
       '@types/mdx': 2.0.13
       collapse-white-space: 2.1.0
       devlop: 1.1.0
-      estree-util-build-jsx: 3.0.1
       estree-util-is-identifier-name: 3.0.0
-      estree-util-to-js: 2.0.0
+      estree-util-scope: 1.0.0
       estree-walker: 3.0.3
-      hast-util-to-estree: 3.1.0
-      hast-util-to-jsx-runtime: 2.3.0
+      hast-util-to-jsx-runtime: 2.3.2
       markdown-extensions: 2.0.0
-      periscopic: 3.1.0
-      remark-mdx: 3.0.1
+      recma-build-jsx: 1.0.0
+      recma-jsx: 1.0.0(acorn@8.14.0)
+      recma-stringify: 1.0.0
+      rehype-recma: 1.0.0
+      remark-mdx: 3.1.0
       remark-parse: 11.0.0
       remark-rehype: 11.1.1
       source-map: 0.7.4
@@ -10428,8 +8455,9 @@ snapshots:
       unist-util-position-from-estree: 2.0.0
       unist-util-stringify-position: 4.0.0
       unist-util-visit: 5.0.0
-      vfile: 6.0.1
+      vfile: 6.0.3
     transitivePeerDependencies:
+      - acorn
       - supports-color
 
   '@motionone/types@10.17.1': {}
@@ -10438,63 +8466,34 @@ snapshots:
     dependencies:
       '@motionone/types': 10.17.1
       hey-listen: 1.0.8
-      tslib: 2.6.2
-
-  '@next/env@14.1.3': {}
+      tslib: 2.8.1
 
   '@next/env@14.2.4': {}
 
-  '@next/swc-darwin-arm64@14.1.3':
-    optional: true
-
   '@next/swc-darwin-arm64@14.2.4':
     optional: true
 
-  '@next/swc-darwin-x64@14.1.3':
-    optional: true
-
   '@next/swc-darwin-x64@14.2.4':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@14.1.3':
-    optional: true
-
   '@next/swc-linux-arm64-gnu@14.2.4':
     optional: true
 
-  '@next/swc-linux-arm64-musl@14.1.3':
-    optional: true
-
   '@next/swc-linux-arm64-musl@14.2.4':
     optional: true
 
-  '@next/swc-linux-x64-gnu@14.1.3':
-    optional: true
-
   '@next/swc-linux-x64-gnu@14.2.4':
     optional: true
 
-  '@next/swc-linux-x64-musl@14.1.3':
-    optional: true
-
   '@next/swc-linux-x64-musl@14.2.4':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@14.1.3':
-    optional: true
-
   '@next/swc-win32-arm64-msvc@14.2.4':
     optional: true
 
-  '@next/swc-win32-ia32-msvc@14.1.3':
-    optional: true
-
   '@next/swc-win32-ia32-msvc@14.2.4':
     optional: true
 
-  '@next/swc-win32-x64-msvc@14.1.3':
-    optional: true
-
   '@next/swc-win32-x64-msvc@14.2.4':
     optional: true
 
@@ -10508,1614 +8507,1252 @@ snapshots:
   '@nodelib/fs.walk@1.2.8':
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.15.0
-
-  '@nyxb/eslint-config@3.0.1(@eslint-react/eslint-plugin@1.5.15(eslint@9.2.0)(typescript@5.4.5))(@vue/compiler-sfc@3.4.29)(eslint-plugin-format@0.1.2(eslint@9.2.0))(eslint-plugin-react-hooks@5.1.0-rc-3f1436cca1-20240516(eslint@9.2.0))(eslint-plugin-react-refresh@0.4.7(eslint@9.2.0))(eslint@9.2.0)(typescript@5.4.5)(vitest@2.1.2(@types/node@17.0.45)(terser@5.31.1))':
-    dependencies:
-      '@clack/prompts': 0.7.0
-      '@nyxb/install-pkg': 0.0.3
-      '@stylistic/eslint-plugin': 2.2.0(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/eslint-plugin': 7.13.0(@typescript-eslint/parser@5.62.0(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/parser': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-      eslint-config-flat-gitignore: 0.1.5
-      eslint-flat-config-utils: 0.2.5
-      eslint-merge-processors: 0.1.0(eslint@9.2.0)
-      eslint-plugin-command: 0.2.3(eslint@9.2.0)
-      eslint-plugin-eslint-comments: 3.2.0(eslint@9.2.0)
-      eslint-plugin-import-x: 0.5.1(eslint@9.2.0)(typescript@5.4.5)
-      eslint-plugin-jsdoc: 48.2.12(eslint@9.2.0)
-      eslint-plugin-jsonc: 2.16.0(eslint@9.2.0)
-      eslint-plugin-markdown: 5.0.0(eslint@9.2.0)
-      eslint-plugin-n: 17.9.0(eslint@9.2.0)
-      eslint-plugin-no-only-tests: 3.1.0
-      eslint-plugin-nyxb: 1.1.1(eslint@9.2.0)
-      eslint-plugin-perfectionist: 2.11.0(eslint@9.2.0)(typescript@5.4.5)(vue-eslint-parser@9.4.3(eslint@9.2.0))
-      eslint-plugin-regexp: 2.6.0(eslint@9.2.0)
-      eslint-plugin-toml: 0.11.0(eslint@9.2.0)
-      eslint-plugin-unicorn: 53.0.0(eslint@9.2.0)
-      eslint-plugin-unused-imports: 3.2.0(@typescript-eslint/eslint-plugin@7.13.0(@typescript-eslint/parser@7.13.0(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)
-      eslint-plugin-vitest: 0.5.4(@typescript-eslint/eslint-plugin@7.13.0(@typescript-eslint/parser@7.13.0(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5)(vitest@2.1.2(@types/node@17.0.45)(terser@5.31.1))
-      eslint-plugin-vue: 9.26.0(eslint@9.2.0)
-      eslint-plugin-yml: 1.14.0(eslint@9.2.0)
-      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.4.29)(eslint@9.2.0)
-      globals: 15.5.0
-      jsonc-eslint-parser: 2.4.0
-      local-pkg: 0.5.0
-      parse-gitignore: 2.0.0
-      picocolors: 1.0.1
-      toml-eslint-parser: 0.9.3
-      vue-eslint-parser: 9.4.3(eslint@9.2.0)
-      yaml-eslint-parser: 1.2.3
-      yargs: 17.7.2
-    optionalDependencies:
-      '@eslint-react/eslint-plugin': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      eslint-plugin-format: 0.1.2(eslint@9.2.0)
-      eslint-plugin-react-hooks: 5.1.0-rc-3f1436cca1-20240516(eslint@9.2.0)
-      eslint-plugin-react-refresh: 0.4.7(eslint@9.2.0)
-    transitivePeerDependencies:
-      - '@vue/compiler-sfc'
-      - supports-color
-      - svelte
-      - typescript
-      - vitest
-
-  '@nyxb/eslint-config@3.0.8(@eslint-react/eslint-plugin@1.5.15(eslint@9.2.0)(typescript@5.4.5))(@vue/compiler-sfc@3.4.29)(eslint-plugin-format@0.1.2(eslint@9.2.0))(eslint-plugin-react-hooks@5.1.0-rc-3f1436cca1-20240516(eslint@9.2.0))(eslint-plugin-react-refresh@0.4.7(eslint@9.2.0))(eslint-plugin-tailwindcss@3.17.4(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5))))(eslint@9.2.0)(typescript@5.4.5)(vitest@2.1.2(@types/node@20.11.24)(terser@5.31.1))':
-    dependencies:
-      '@antfu/install-pkg': 0.3.3
-      '@clack/prompts': 0.7.0
-      '@stylistic/eslint-plugin': 2.6.0-beta.0(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/eslint-plugin': 8.0.0-alpha.40(@typescript-eslint/parser@8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/parser': 8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-      eslint-config-flat-gitignore: 0.1.5
-      eslint-flat-config-utils: 0.2.5
-      eslint-merge-processors: 0.1.0(eslint@9.2.0)
-      eslint-plugin-command: 0.2.3(eslint@9.2.0)
-      eslint-plugin-eslint-comments: 3.2.0(eslint@9.2.0)
-      eslint-plugin-import-x: 0.5.3(eslint@9.2.0)(typescript@5.4.5)
-      eslint-plugin-jsdoc: 48.5.2(eslint@9.2.0)
-      eslint-plugin-jsonc: 2.16.0(eslint@9.2.0)
-      eslint-plugin-markdown: 5.0.0(eslint@9.2.0)
-      eslint-plugin-n: 17.9.0(eslint@9.2.0)
-      eslint-plugin-no-only-tests: 3.1.0
-      eslint-plugin-nyxb: 1.1.3(eslint@9.2.0)
-      eslint-plugin-perfectionist: 2.11.0(eslint@9.2.0)(typescript@5.4.5)(vue-eslint-parser@9.4.3(eslint@9.2.0))
-      eslint-plugin-regexp: 2.6.0(eslint@9.2.0)
-      eslint-plugin-toml: 0.11.1(eslint@9.2.0)
-      eslint-plugin-unicorn: 54.0.0(eslint@9.2.0)
-      eslint-plugin-unused-imports: 4.0.0(@typescript-eslint/eslint-plugin@8.0.0-alpha.40(@typescript-eslint/parser@8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)
-      eslint-plugin-vitest: 0.5.4(@typescript-eslint/eslint-plugin@8.0.0-alpha.40(@typescript-eslint/parser@8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5)(vitest@2.1.2(@types/node@20.11.24)(terser@5.31.1))
-      eslint-plugin-vue: 9.27.0(eslint@9.2.0)
-      eslint-plugin-yml: 1.14.0(eslint@9.2.0)
-      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.4.29)(eslint@9.2.0)
-      globals: 15.8.0
-      jsonc-eslint-parser: 2.4.0
-      local-pkg: 0.5.0
-      parse-gitignore: 2.0.0
-      picocolors: 1.0.1
-      toml-eslint-parser: 0.10.0
-      vue-eslint-parser: 9.4.3(eslint@9.2.0)
-      yaml-eslint-parser: 1.2.3
-      yargs: 17.7.2
-    optionalDependencies:
-      '@eslint-react/eslint-plugin': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      eslint-plugin-format: 0.1.2(eslint@9.2.0)
-      eslint-plugin-react-hooks: 5.1.0-rc-3f1436cca1-20240516(eslint@9.2.0)
-      eslint-plugin-react-refresh: 0.4.7(eslint@9.2.0)
-      eslint-plugin-tailwindcss: 3.17.4(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5)))
-    transitivePeerDependencies:
-      - '@vue/compiler-sfc'
-      - supports-color
-      - svelte
-      - typescript
-      - vitest
-
-  '@nyxb/install-pkg@0.0.3':
-    dependencies:
-      '@jsdevtools/ez-spawn': 3.0.4
+      fastq: 1.19.0
 
   '@nyxb/nyxi@1.0.0': {}
 
-  '@nyxb/utils@0.0.4': {}
-
-  '@octokit/app@15.1.0':
+  '@octokit/app@15.1.2':
     dependencies:
-      '@octokit/auth-app': 7.1.0
-      '@octokit/auth-unauthenticated': 6.1.0
-      '@octokit/core': 6.1.2
-      '@octokit/oauth-app': 7.1.3
-      '@octokit/plugin-paginate-rest': 11.3.3(@octokit/core@6.1.2)
-      '@octokit/types': 13.5.0
-      '@octokit/webhooks': 13.2.7
+      '@octokit/auth-app': 7.1.4
+      '@octokit/auth-unauthenticated': 6.1.1
+      '@octokit/core': 6.1.3
+      '@octokit/oauth-app': 7.1.5
+      '@octokit/plugin-paginate-rest': 11.4.0(@octokit/core@6.1.3)
+      '@octokit/types': 13.8.0
+      '@octokit/webhooks': 13.5.0
 
-  '@octokit/auth-app@7.1.0':
+  '@octokit/auth-app@7.1.4':
     dependencies:
-      '@octokit/auth-oauth-app': 8.1.1
-      '@octokit/auth-oauth-user': 5.1.1
-      '@octokit/request': 9.1.1
-      '@octokit/request-error': 6.1.1
-      '@octokit/types': 13.5.0
-      lru-cache: 10.2.0
+      '@octokit/auth-oauth-app': 8.1.2
+      '@octokit/auth-oauth-user': 5.1.2
+      '@octokit/request': 9.2.0
+      '@octokit/request-error': 6.1.6
+      '@octokit/types': 13.8.0
+      toad-cache: 3.7.0
       universal-github-app-jwt: 2.2.0
       universal-user-agent: 7.0.2
 
-  '@octokit/auth-oauth-app@8.1.1':
+  '@octokit/auth-oauth-app@8.1.2':
     dependencies:
-      '@octokit/auth-oauth-device': 7.1.1
-      '@octokit/auth-oauth-user': 5.1.1
-      '@octokit/request': 9.1.1
-      '@octokit/types': 13.5.0
+      '@octokit/auth-oauth-device': 7.1.2
+      '@octokit/auth-oauth-user': 5.1.2
+      '@octokit/request': 9.2.0
+      '@octokit/types': 13.8.0
       universal-user-agent: 7.0.2
 
-  '@octokit/auth-oauth-device@7.1.1':
+  '@octokit/auth-oauth-device@7.1.2':
     dependencies:
-      '@octokit/oauth-methods': 5.1.2
-      '@octokit/request': 9.1.1
-      '@octokit/types': 13.5.0
+      '@octokit/oauth-methods': 5.1.3
+      '@octokit/request': 9.2.0
+      '@octokit/types': 13.8.0
       universal-user-agent: 7.0.2
 
-  '@octokit/auth-oauth-user@5.1.1':
+  '@octokit/auth-oauth-user@5.1.2':
     dependencies:
-      '@octokit/auth-oauth-device': 7.1.1
-      '@octokit/oauth-methods': 5.1.2
-      '@octokit/request': 9.1.1
-      '@octokit/types': 13.5.0
+      '@octokit/auth-oauth-device': 7.1.2
+      '@octokit/oauth-methods': 5.1.3
+      '@octokit/request': 9.2.0
+      '@octokit/types': 13.8.0
       universal-user-agent: 7.0.2
 
-  '@octokit/auth-token@5.1.1': {}
+  '@octokit/auth-token@5.1.2': {}
 
-  '@octokit/auth-unauthenticated@6.1.0':
+  '@octokit/auth-unauthenticated@6.1.1':
     dependencies:
-      '@octokit/request-error': 6.1.1
-      '@octokit/types': 13.5.0
+      '@octokit/request-error': 6.1.6
+      '@octokit/types': 13.8.0
 
-  '@octokit/core@6.1.2':
+  '@octokit/core@6.1.3':
     dependencies:
-      '@octokit/auth-token': 5.1.1
-      '@octokit/graphql': 8.1.1
-      '@octokit/request': 9.1.1
-      '@octokit/request-error': 6.1.1
-      '@octokit/types': 13.5.0
+      '@octokit/auth-token': 5.1.2
+      '@octokit/graphql': 8.2.0
+      '@octokit/request': 9.2.0
+      '@octokit/request-error': 6.1.6
+      '@octokit/types': 13.8.0
       before-after-hook: 3.0.2
       universal-user-agent: 7.0.2
 
-  '@octokit/endpoint@10.1.1':
+  '@octokit/endpoint@10.1.2':
     dependencies:
-      '@octokit/types': 13.5.0
+      '@octokit/types': 13.8.0
       universal-user-agent: 7.0.2
 
-  '@octokit/graphql@8.1.1':
+  '@octokit/graphql@8.2.0':
     dependencies:
-      '@octokit/request': 9.1.1
-      '@octokit/types': 13.5.0
+      '@octokit/request': 9.2.0
+      '@octokit/types': 13.8.0
       universal-user-agent: 7.0.2
 
-  '@octokit/oauth-app@7.1.3':
+  '@octokit/oauth-app@7.1.5':
     dependencies:
-      '@octokit/auth-oauth-app': 8.1.1
-      '@octokit/auth-oauth-user': 5.1.1
-      '@octokit/auth-unauthenticated': 6.1.0
-      '@octokit/core': 6.1.2
+      '@octokit/auth-oauth-app': 8.1.2
+      '@octokit/auth-oauth-user': 5.1.2
+      '@octokit/auth-unauthenticated': 6.1.1
+      '@octokit/core': 6.1.3
       '@octokit/oauth-authorization-url': 7.1.1
-      '@octokit/oauth-methods': 5.1.2
-      '@types/aws-lambda': 8.10.140
+      '@octokit/oauth-methods': 5.1.3
+      '@types/aws-lambda': 8.10.147
       universal-user-agent: 7.0.2
 
   '@octokit/oauth-authorization-url@7.1.1': {}
 
-  '@octokit/oauth-methods@5.1.2':
+  '@octokit/oauth-methods@5.1.3':
     dependencies:
       '@octokit/oauth-authorization-url': 7.1.1
-      '@octokit/request': 9.1.1
-      '@octokit/request-error': 6.1.1
-      '@octokit/types': 13.5.0
+      '@octokit/request': 9.2.0
+      '@octokit/request-error': 6.1.6
+      '@octokit/types': 13.8.0
 
-  '@octokit/openapi-types@22.2.0': {}
+  '@octokit/openapi-types@23.0.1': {}
 
-  '@octokit/openapi-webhooks-types@8.2.1': {}
+  '@octokit/openapi-webhooks-types@8.5.1': {}
 
-  '@octokit/plugin-paginate-graphql@5.2.2(@octokit/core@6.1.2)':
+  '@octokit/plugin-paginate-graphql@5.2.4(@octokit/core@6.1.3)':
     dependencies:
-      '@octokit/core': 6.1.2
+      '@octokit/core': 6.1.3
 
-  '@octokit/plugin-paginate-rest@11.3.3(@octokit/core@6.1.2)':
+  '@octokit/plugin-paginate-rest@11.4.0(@octokit/core@6.1.3)':
     dependencies:
-      '@octokit/core': 6.1.2
-      '@octokit/types': 13.5.0
+      '@octokit/core': 6.1.3
+      '@octokit/types': 13.8.0
 
-  '@octokit/plugin-rest-endpoint-methods@13.2.4(@octokit/core@6.1.2)':
+  '@octokit/plugin-rest-endpoint-methods@13.3.0(@octokit/core@6.1.3)':
     dependencies:
-      '@octokit/core': 6.1.2
-      '@octokit/types': 13.5.0
+      '@octokit/core': 6.1.3
+      '@octokit/types': 13.8.0
 
-  '@octokit/plugin-retry@7.1.1(@octokit/core@6.1.2)':
+  '@octokit/plugin-retry@7.1.3(@octokit/core@6.1.3)':
     dependencies:
-      '@octokit/core': 6.1.2
-      '@octokit/request-error': 6.1.1
-      '@octokit/types': 13.5.0
+      '@octokit/core': 6.1.3
+      '@octokit/request-error': 6.1.6
+      '@octokit/types': 13.8.0
       bottleneck: 2.19.5
 
-  '@octokit/plugin-throttling@9.3.0(@octokit/core@6.1.2)':
+  '@octokit/plugin-throttling@9.4.0(@octokit/core@6.1.3)':
     dependencies:
-      '@octokit/core': 6.1.2
-      '@octokit/types': 13.5.0
+      '@octokit/core': 6.1.3
+      '@octokit/types': 13.8.0
       bottleneck: 2.19.5
 
-  '@octokit/request-error@6.1.1':
+  '@octokit/request-error@6.1.6':
     dependencies:
-      '@octokit/types': 13.5.0
+      '@octokit/types': 13.8.0
 
-  '@octokit/request@9.1.1':
+  '@octokit/request@9.2.0':
     dependencies:
-      '@octokit/endpoint': 10.1.1
-      '@octokit/request-error': 6.1.1
-      '@octokit/types': 13.5.0
+      '@octokit/endpoint': 10.1.2
+      '@octokit/request-error': 6.1.6
+      '@octokit/types': 13.8.0
+      fast-content-type-parse: 2.0.1
       universal-user-agent: 7.0.2
 
-  '@octokit/types@13.5.0':
+  '@octokit/types@13.8.0':
     dependencies:
-      '@octokit/openapi-types': 22.2.0
+      '@octokit/openapi-types': 23.0.1
 
   '@octokit/webhooks-methods@5.1.0': {}
 
-  '@octokit/webhooks@13.2.7':
+  '@octokit/webhooks@13.5.0':
     dependencies:
-      '@octokit/openapi-webhooks-types': 8.2.1
-      '@octokit/request-error': 6.1.1
+      '@octokit/openapi-webhooks-types': 8.5.1
+      '@octokit/request-error': 6.1.6
       '@octokit/webhooks-methods': 5.1.0
-      aggregate-error: 5.0.0
 
-  '@opentelemetry/api@1.9.0':
+  '@parcel/watcher-android-arm64@2.5.1':
     optional: true
 
-  '@parcel/watcher-android-arm64@2.4.1':
+  '@parcel/watcher-darwin-arm64@2.5.1':
     optional: true
 
-  '@parcel/watcher-darwin-arm64@2.4.1':
+  '@parcel/watcher-darwin-x64@2.5.1':
     optional: true
 
-  '@parcel/watcher-darwin-x64@2.4.1':
+  '@parcel/watcher-freebsd-x64@2.5.1':
     optional: true
 
-  '@parcel/watcher-freebsd-x64@2.4.1':
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
     optional: true
 
-  '@parcel/watcher-linux-arm-glibc@2.4.1':
+  '@parcel/watcher-linux-arm-musl@2.5.1':
     optional: true
 
-  '@parcel/watcher-linux-arm64-glibc@2.4.1':
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
     optional: true
 
-  '@parcel/watcher-linux-arm64-musl@2.4.1':
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
     optional: true
 
-  '@parcel/watcher-linux-x64-glibc@2.4.1':
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
     optional: true
 
-  '@parcel/watcher-linux-x64-musl@2.4.1':
+  '@parcel/watcher-linux-x64-musl@2.5.1':
     optional: true
 
-  '@parcel/watcher-win32-arm64@2.4.1':
+  '@parcel/watcher-win32-arm64@2.5.1':
     optional: true
 
-  '@parcel/watcher-win32-ia32@2.4.1':
+  '@parcel/watcher-win32-ia32@2.5.1':
     optional: true
 
-  '@parcel/watcher-win32-x64@2.4.1':
+  '@parcel/watcher-win32-x64@2.5.1':
     optional: true
 
-  '@parcel/watcher@2.4.1':
+  '@parcel/watcher@2.5.1':
     dependencies:
       detect-libc: 1.0.3
       is-glob: 4.0.3
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       node-addon-api: 7.1.1
     optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.4.1
-      '@parcel/watcher-darwin-arm64': 2.4.1
-      '@parcel/watcher-darwin-x64': 2.4.1
-      '@parcel/watcher-freebsd-x64': 2.4.1
-      '@parcel/watcher-linux-arm-glibc': 2.4.1
-      '@parcel/watcher-linux-arm64-glibc': 2.4.1
-      '@parcel/watcher-linux-arm64-musl': 2.4.1
-      '@parcel/watcher-linux-x64-glibc': 2.4.1
-      '@parcel/watcher-linux-x64-musl': 2.4.1
-      '@parcel/watcher-win32-arm64': 2.4.1
-      '@parcel/watcher-win32-ia32': 2.4.1
-      '@parcel/watcher-win32-x64': 2.4.1
+      '@parcel/watcher-android-arm64': 2.5.1
+      '@parcel/watcher-darwin-arm64': 2.5.1
+      '@parcel/watcher-darwin-x64': 2.5.1
+      '@parcel/watcher-freebsd-x64': 2.5.1
+      '@parcel/watcher-linux-arm-glibc': 2.5.1
+      '@parcel/watcher-linux-arm-musl': 2.5.1
+      '@parcel/watcher-linux-arm64-glibc': 2.5.1
+      '@parcel/watcher-linux-arm64-musl': 2.5.1
+      '@parcel/watcher-linux-x64-glibc': 2.5.1
+      '@parcel/watcher-linux-x64-musl': 2.5.1
+      '@parcel/watcher-win32-arm64': 2.5.1
+      '@parcel/watcher-win32-ia32': 2.5.1
+      '@parcel/watcher-win32-x64': 2.5.1
 
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@pkgr/core@0.1.1': {}
-
-  '@puppeteer/browsers@2.4.1':
+  '@puppeteer/browsers@2.6.1':
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
       extract-zip: 2.0.1
       progress: 2.0.3
-      proxy-agent: 6.4.0
-      semver: 7.6.3
-      tar-fs: 3.0.6
+      proxy-agent: 6.5.0
+      semver: 7.7.1
+      tar-fs: 3.0.8
       unbzip2-stream: 1.4.3
       yargs: 17.7.2
     transitivePeerDependencies:
+      - bare-buffer
       - supports-color
 
-  '@radix-ui/number@1.0.1':
-    dependencies:
-      '@babel/runtime': 7.24.7
+  '@radix-ui/number@1.1.0': {}
 
-  '@radix-ui/primitive@1.0.1':
-    dependencies:
-      '@babel/runtime': 7.24.7
+  '@radix-ui/primitive@1.1.1': {}
 
-  '@radix-ui/react-accordion@1.1.2(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-accordion@1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-alert-dialog@1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collapsible': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-alert-dialog@1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-aspect-ratio@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-arrow@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-avatar@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-aspect-ratio@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-avatar@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-checkbox@1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-collapsible@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-compose-refs@1.1.0(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-collection@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-compose-refs@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+  '@radix-ui/react-compose-refs@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.3.3
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-context-menu@2.1.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-context-menu@2.2.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-menu': 2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-context@1.0.1(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-context@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.61
-
-  '@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-dialog@1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       aria-hidden: 1.2.4
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.5.5(@types/react@18.2.61)(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-direction@1.0.1(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-direction@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-dismissable-layer@1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-dropdown-menu@2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-menu': 2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-dropdown-menu@2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-focus-guards@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-focus-scope@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-hover-card@1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-hover-card@1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-icons@1.3.0(react@18.3.1)':
+  '@radix-ui/react-icons@1.3.2(react@18.3.1)':
     dependencies:
       react: 18.3.1
 
-  '@radix-ui/react-id@1.0.1(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-id@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-label@2.0.2(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-label@2.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-menu@2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-menu@2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       aria-hidden: 1.2.4
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.5.5(@types/react@18.2.61)(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-menubar@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-menu': 2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-menubar@1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-navigation-menu@1.1.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-navigation-menu@1.2.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-popover@1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-popover@1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       aria-hidden: 1.2.4
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.5.5(@types/react@18.2.61)(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/rect': 1.0.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-popper@1.2.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/rect': 1.1.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-portal@1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-presence@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-primitive@2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-progress@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-progress@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-radio-group@1.1.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-radio-group@1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-roving-focus@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-scroll-area@1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/number': 1.0.1
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-scroll-area@1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-select@2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/number': 1.0.1
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-select@2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       aria-hidden: 1.2.4
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.5.5(@types/react@18.2.61)(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-separator@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-slider@1.1.2(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/number': 1.0.1
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-slot@1.0.2(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-slider@1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-slot@1.1.0(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-slot@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-slot@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+  '@radix-ui/react-switch@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-switch@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-tabs@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-tabs@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-toast@1.1.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-toast@1.2.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toggle': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-toggle-group@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-toggle@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
-
-  '@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-tooltip@1.1.7(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.61)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-use-previous@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-use-rect@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@radix-ui/rect': 1.1.0
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-previous@1.0.1(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-use-size@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.61)(react@18.3.1)':
+  '@radix-ui/react-visually-hidden@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/rect': 1.0.1
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.2.61
-
-  '@radix-ui/react-use-size@1.0.1(@types/react@18.2.61)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.3.1)
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.2.61
-
-  '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
-      '@types/react-dom': 18.2.19
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/rect@1.0.1':
-    dependencies:
-      '@babel/runtime': 7.24.7
+  '@radix-ui/rect@1.1.0': {}
 
-  '@react-aria/focus@3.17.1(react@18.3.1)':
+  '@react-aria/focus@3.19.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@react-aria/interactions': 3.21.3(react@18.3.1)
-      '@react-aria/utils': 3.24.1(react@18.3.1)
-      '@react-types/shared': 3.23.1(react@18.3.1)
-      '@swc/helpers': 0.5.11
+      '@react-aria/interactions': 3.23.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-types/shared': 3.27.0(react@18.3.1)
+      '@swc/helpers': 0.5.15
       clsx: 2.1.1
       react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  '@react-aria/interactions@3.21.3(react@18.3.1)':
+  '@react-aria/interactions@3.23.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@react-aria/ssr': 3.9.4(react@18.3.1)
-      '@react-aria/utils': 3.24.1(react@18.3.1)
-      '@react-types/shared': 3.23.1(react@18.3.1)
-      '@swc/helpers': 0.5.11
+      '@react-aria/ssr': 3.9.7(react@18.3.1)
+      '@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-types/shared': 3.27.0(react@18.3.1)
+      '@swc/helpers': 0.5.15
       react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  '@react-aria/ssr@3.9.4(react@18.3.1)':
+  '@react-aria/ssr@3.9.7(react@18.3.1)':
     dependencies:
-      '@swc/helpers': 0.5.11
+      '@swc/helpers': 0.5.15
       react: 18.3.1
 
-  '@react-aria/utils@3.24.1(react@18.3.1)':
+  '@react-aria/utils@3.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@react-aria/ssr': 3.9.4(react@18.3.1)
-      '@react-stately/utils': 3.10.1(react@18.3.1)
-      '@react-types/shared': 3.23.1(react@18.3.1)
-      '@swc/helpers': 0.5.11
+      '@react-aria/ssr': 3.9.7(react@18.3.1)
+      '@react-stately/utils': 3.10.5(react@18.3.1)
+      '@react-types/shared': 3.27.0(react@18.3.1)
+      '@swc/helpers': 0.5.15
       clsx: 2.1.1
       react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  '@react-native-community/cli-clean@13.6.8':
-    dependencies:
-      '@react-native-community/cli-tools': 13.6.8
-      chalk: 4.1.2
-      execa: 5.1.1
-      fast-glob: 3.3.2
-    transitivePeerDependencies:
-      - encoding
-
-  '@react-native-community/cli-config@13.6.8':
-    dependencies:
-      '@react-native-community/cli-tools': 13.6.8
-      chalk: 4.1.2
-      cosmiconfig: 5.2.1
-      deepmerge: 4.3.1
-      fast-glob: 3.3.2
-      joi: 17.13.1
-    transitivePeerDependencies:
-      - encoding
-
-  '@react-native-community/cli-debugger-ui@13.6.8':
-    dependencies:
-      serve-static: 1.15.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@react-native-community/cli-doctor@13.6.8':
-    dependencies:
-      '@react-native-community/cli-config': 13.6.8
-      '@react-native-community/cli-platform-android': 13.6.8
-      '@react-native-community/cli-platform-apple': 13.6.8
-      '@react-native-community/cli-platform-ios': 13.6.8
-      '@react-native-community/cli-tools': 13.6.8
-      chalk: 4.1.2
-      command-exists: 1.2.9
-      deepmerge: 4.3.1
-      envinfo: 7.13.0
-      execa: 5.1.1
-      hermes-profile-transformer: 0.0.6
-      node-stream-zip: 1.15.0
-      ora: 5.4.1
-      semver: 7.6.3
-      strip-ansi: 5.2.0
-      wcwidth: 1.0.1
-      yaml: 2.5.1
-    transitivePeerDependencies:
-      - encoding
-
-  '@react-native-community/cli-hermes@13.6.8':
-    dependencies:
-      '@react-native-community/cli-platform-android': 13.6.8
-      '@react-native-community/cli-tools': 13.6.8
-      chalk: 4.1.2
-      hermes-profile-transformer: 0.0.6
-    transitivePeerDependencies:
-      - encoding
-
-  '@react-native-community/cli-platform-android@13.6.8':
-    dependencies:
-      '@react-native-community/cli-tools': 13.6.8
-      chalk: 4.1.2
-      execa: 5.1.1
-      fast-glob: 3.3.2
-      fast-xml-parser: 4.4.0
-      logkitty: 0.7.1
-    transitivePeerDependencies:
-      - encoding
-
-  '@react-native-community/cli-platform-apple@13.6.8':
-    dependencies:
-      '@react-native-community/cli-tools': 13.6.8
-      chalk: 4.1.2
-      execa: 5.1.1
-      fast-glob: 3.3.2
-      fast-xml-parser: 4.4.0
-      ora: 5.4.1
-    transitivePeerDependencies:
-      - encoding
-
-  '@react-native-community/cli-platform-ios@13.6.8':
-    dependencies:
-      '@react-native-community/cli-platform-apple': 13.6.8
-    transitivePeerDependencies:
-      - encoding
-
-  '@react-native-community/cli-server-api@13.6.8':
-    dependencies:
-      '@react-native-community/cli-debugger-ui': 13.6.8
-      '@react-native-community/cli-tools': 13.6.8
-      compression: 1.7.4
-      connect: 3.7.0
-      errorhandler: 1.5.1
-      nocache: 3.0.4
-      pretty-format: 26.6.2
-      serve-static: 1.15.0
-      ws: 6.2.3
-    transitivePeerDependencies:
-      - bufferutil
-      - encoding
-      - supports-color
-      - utf-8-validate
-
-  '@react-native-community/cli-tools@13.6.8':
-    dependencies:
-      appdirsjs: 1.2.7
-      chalk: 4.1.2
-      execa: 5.1.1
-      find-up: 5.0.0
-      mime: 2.6.0
-      node-fetch: 2.7.0
-      open: 6.4.0
-      ora: 5.4.1
-      semver: 7.6.3
-      shell-quote: 1.8.1
-      sudo-prompt: 9.2.1
-    transitivePeerDependencies:
-      - encoding
-
-  '@react-native-community/cli-types@13.6.8':
-    dependencies:
-      joi: 17.13.1
-
-  '@react-native-community/cli@13.6.8':
-    dependencies:
-      '@react-native-community/cli-clean': 13.6.8
-      '@react-native-community/cli-config': 13.6.8
-      '@react-native-community/cli-debugger-ui': 13.6.8
-      '@react-native-community/cli-doctor': 13.6.8
-      '@react-native-community/cli-hermes': 13.6.8
-      '@react-native-community/cli-server-api': 13.6.8
-      '@react-native-community/cli-tools': 13.6.8
-      '@react-native-community/cli-types': 13.6.8
-      chalk: 4.1.2
-      commander: 9.5.0
-      deepmerge: 4.3.1
-      execa: 5.1.1
-      find-up: 4.1.0
-      fs-extra: 8.1.0
-      graceful-fs: 4.2.11
-      prompts: 2.4.2
-      semver: 7.6.3
-    transitivePeerDependencies:
-      - bufferutil
-      - encoding
-      - supports-color
-      - utf-8-validate
-
-  '@react-native/assets-registry@0.74.84': {}
+  '@react-native/assets-registry@0.77.0': {}
 
-  '@react-native/babel-plugin-codegen@0.74.84(@babel/preset-env@7.24.7(@babel/core@7.24.7))':
+  '@react-native/babel-plugin-codegen@0.77.0(@babel/preset-env@7.26.7(@babel/core@7.26.7))':
     dependencies:
-      '@react-native/codegen': 0.74.84(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      '@babel/traverse': 7.26.7
+      '@react-native/codegen': 0.77.0(@babel/preset-env@7.26.7(@babel/core@7.26.7))
     transitivePeerDependencies:
       - '@babel/preset-env'
       - supports-color
 
-  '@react-native/babel-preset@0.74.84(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.24.7)
-      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.7)
-      '@babel/plugin-proposal-export-default-from': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-proposal-logical-assignment-operators': 7.20.7(@babel/core@7.24.7)
-      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.7)
-      '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.24.7)
-      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.24.7)
-      '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.24.7)
-      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.7)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.7)
-      '@babel/plugin-syntax-export-default-from': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-syntax-flow': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.7)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.7)
-      '@babel/plugin-transform-arrow-functions': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-async-to-generator': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-block-scoping': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-classes': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-computed-properties': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-destructuring': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-flow-strip-types': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-function-name': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-literals': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-modules-commonjs': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-parameters': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-private-methods': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-private-property-in-object': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-react-display-name': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-react-jsx': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-runtime': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-shorthand-properties': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-spread': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-sticky-regex': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-typescript': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-unicode-regex': 7.24.7(@babel/core@7.24.7)
-      '@babel/template': 7.24.7
-      '@react-native/babel-plugin-codegen': 0.74.84(@babel/preset-env@7.24.7(@babel/core@7.24.7))
-      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.24.7)
+  '@react-native/babel-preset@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/plugin-proposal-export-default-from': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.26.7)
+      '@babel/plugin-syntax-export-default-from': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.26.7)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.26.7)
+      '@babel/plugin-transform-arrow-functions': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-async-generator-functions': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-async-to-generator': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-block-scoping': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-class-properties': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-classes': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-computed-properties': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-destructuring': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-flow-strip-types': 7.26.5(@babel/core@7.26.7)
+      '@babel/plugin-transform-for-of': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-function-name': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-literals': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-logical-assignment-operators': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-modules-commonjs': 7.26.3(@babel/core@7.26.7)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.26.6(@babel/core@7.26.7)
+      '@babel/plugin-transform-numeric-separator': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-object-rest-spread': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-optional-catch-binding': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-optional-chaining': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-parameters': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-private-property-in-object': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-react-display-name': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-regenerator': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-runtime': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-shorthand-properties': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-spread': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-sticky-regex': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-typescript': 7.26.7(@babel/core@7.26.7)
+      '@babel/plugin-transform-unicode-regex': 7.25.9(@babel/core@7.26.7)
+      '@babel/template': 7.25.9
+      '@react-native/babel-plugin-codegen': 0.77.0(@babel/preset-env@7.26.7(@babel/core@7.26.7))
+      babel-plugin-syntax-hermes-parser: 0.25.1
+      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.26.7)
       react-refresh: 0.14.2
     transitivePeerDependencies:
       - '@babel/preset-env'
       - supports-color
 
-  '@react-native/codegen@0.74.84(@babel/preset-env@7.24.7(@babel/core@7.24.7))':
+  '@react-native/codegen@0.77.0(@babel/preset-env@7.26.7(@babel/core@7.26.7))':
     dependencies:
-      '@babel/parser': 7.24.7
-      '@babel/preset-env': 7.24.7(@babel/core@7.24.7)
+      '@babel/parser': 7.26.7
+      '@babel/preset-env': 7.26.7(@babel/core@7.26.7)
       glob: 7.2.3
-      hermes-parser: 0.19.1
+      hermes-parser: 0.25.1
       invariant: 2.2.4
-      jscodeshift: 0.14.0(@babel/preset-env@7.24.7(@babel/core@7.24.7))
-      mkdirp: 0.5.6
+      jscodeshift: 17.1.2(@babel/preset-env@7.26.7(@babel/core@7.26.7))
       nullthrows: 1.1.1
+      yargs: 17.7.2
     transitivePeerDependencies:
       - supports-color
 
-  '@react-native/community-cli-plugin@0.74.84(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))':
+  '@react-native/community-cli-plugin@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))':
     dependencies:
-      '@react-native-community/cli-server-api': 13.6.8
-      '@react-native-community/cli-tools': 13.6.8
-      '@react-native/dev-middleware': 0.74.84
-      '@react-native/metro-babel-transformer': 0.74.84(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      '@react-native/dev-middleware': 0.77.0
+      '@react-native/metro-babel-transformer': 0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))
       chalk: 4.1.2
-      execa: 5.1.1
-      metro: 0.80.9
-      metro-config: 0.80.9
-      metro-core: 0.80.9
-      node-fetch: 2.7.0
-      querystring: 0.2.1
+      debug: 2.6.9
+      invariant: 2.2.4
+      metro: 0.81.1
+      metro-config: 0.81.1
+      metro-core: 0.81.1
       readline: 1.3.0
+      semver: 7.7.1
     transitivePeerDependencies:
       - '@babel/core'
       - '@babel/preset-env'
       - bufferutil
-      - encoding
       - supports-color
       - utf-8-validate
 
-  '@react-native/debugger-frontend@0.74.84': {}
+  '@react-native/debugger-frontend@0.77.0': {}
 
-  '@react-native/dev-middleware@0.74.84':
+  '@react-native/dev-middleware@0.77.0':
     dependencies:
       '@isaacs/ttlcache': 1.4.1
-      '@react-native/debugger-frontend': 0.74.84
-      '@rnx-kit/chromium-edge-launcher': 1.0.0
+      '@react-native/debugger-frontend': 0.77.0
       chrome-launcher: 0.15.2
+      chromium-edge-launcher: 0.2.0
       connect: 3.7.0
       debug: 2.6.9
-      node-fetch: 2.7.0
       nullthrows: 1.1.1
       open: 7.4.2
       selfsigned: 2.4.1
-      serve-static: 1.15.0
-      temp-dir: 2.0.0
+      serve-static: 1.16.2
       ws: 6.2.3
     transitivePeerDependencies:
       - bufferutil
-      - encoding
       - supports-color
       - utf-8-validate
 
-  '@react-native/gradle-plugin@0.74.84': {}
+  '@react-native/gradle-plugin@0.77.0': {}
 
-  '@react-native/js-polyfills@0.74.84': {}
+  '@react-native/js-polyfills@0.77.0': {}
 
-  '@react-native/metro-babel-transformer@0.74.84(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))':
+  '@react-native/metro-babel-transformer@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))':
     dependencies:
-      '@babel/core': 7.24.7
-      '@react-native/babel-preset': 0.74.84(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))
-      hermes-parser: 0.19.1
+      '@babel/core': 7.26.7
+      '@react-native/babel-preset': 0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))
+      hermes-parser: 0.25.1
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@babel/preset-env'
       - supports-color
 
-  '@react-native/normalize-colors@0.74.84': {}
+  '@react-native/normalize-colors@0.77.0': {}
 
-  '@react-native/virtualized-lists@0.74.84(@types/react@18.2.61)(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1))(react@18.3.1)':
+  '@react-native/virtualized-lists@0.77.0(@types/react@18.3.18)(react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)':
     dependencies:
       invariant: 2.2.4
       nullthrows: 1.1.1
       react: 18.3.1
-      react-native: 0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1)
+      react-native: 0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  '@react-spring/animated@9.7.3(react@18.3.1)':
+  '@react-spring/animated@9.7.5(react@18.3.1)':
     dependencies:
-      '@react-spring/shared': 9.7.3(react@18.3.1)
-      '@react-spring/types': 9.7.3
+      '@react-spring/shared': 9.7.5(react@18.3.1)
+      '@react-spring/types': 9.7.5
       react: 18.3.1
 
-  '@react-spring/core@9.7.3(react@18.3.1)':
+  '@react-spring/core@9.7.5(react@18.3.1)':
     dependencies:
-      '@react-spring/animated': 9.7.3(react@18.3.1)
-      '@react-spring/shared': 9.7.3(react@18.3.1)
-      '@react-spring/types': 9.7.3
+      '@react-spring/animated': 9.7.5(react@18.3.1)
+      '@react-spring/shared': 9.7.5(react@18.3.1)
+      '@react-spring/types': 9.7.5
       react: 18.3.1
 
-  '@react-spring/konva@9.7.3(konva@9.3.11)(react-konva@18.2.10(konva@9.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+  '@react-spring/konva@9.7.5(konva@9.3.18)(react-konva@18.2.10(@types/react@18.3.18)(konva@9.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@react-spring/animated': 9.7.3(react@18.3.1)
-      '@react-spring/core': 9.7.3(react@18.3.1)
-      '@react-spring/shared': 9.7.3(react@18.3.1)
-      '@react-spring/types': 9.7.3
-      konva: 9.3.11
+      '@react-spring/animated': 9.7.5(react@18.3.1)
+      '@react-spring/core': 9.7.5(react@18.3.1)
+      '@react-spring/shared': 9.7.5(react@18.3.1)
+      '@react-spring/types': 9.7.5
+      konva: 9.3.18
       react: 18.3.1
-      react-konva: 18.2.10(konva@9.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-konva: 18.2.10(@types/react@18.3.18)(konva@9.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
-  '@react-spring/native@9.7.3(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1))(react@18.3.1)':
+  '@react-spring/native@9.7.5(react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@react-spring/animated': 9.7.3(react@18.3.1)
-      '@react-spring/core': 9.7.3(react@18.3.1)
-      '@react-spring/shared': 9.7.3(react@18.3.1)
-      '@react-spring/types': 9.7.3
+      '@react-spring/animated': 9.7.5(react@18.3.1)
+      '@react-spring/core': 9.7.5(react@18.3.1)
+      '@react-spring/shared': 9.7.5(react@18.3.1)
+      '@react-spring/types': 9.7.5
       react: 18.3.1
-      react-native: 0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1)
+      react-native: 0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1)
+
+  '@react-spring/rafz@9.7.5': {}
 
-  '@react-spring/shared@9.7.3(react@18.3.1)':
+  '@react-spring/shared@9.7.5(react@18.3.1)':
     dependencies:
-      '@react-spring/types': 9.7.3
+      '@react-spring/rafz': 9.7.5
+      '@react-spring/types': 9.7.5
       react: 18.3.1
 
-  '@react-spring/three@9.7.3(@react-three/fiber@8.16.8(react-dom@18.3.1(react@18.3.1))(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1))(react@18.3.1)(three@0.165.0))(react@18.3.1)(three@0.165.0)':
+  '@react-spring/three@9.7.5(@react-three/fiber@8.17.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)(three@0.173.0))(react@18.3.1)(three@0.173.0)':
     dependencies:
-      '@react-spring/animated': 9.7.3(react@18.3.1)
-      '@react-spring/core': 9.7.3(react@18.3.1)
-      '@react-spring/shared': 9.7.3(react@18.3.1)
-      '@react-spring/types': 9.7.3
-      '@react-three/fiber': 8.16.8(react-dom@18.3.1(react@18.3.1))(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1))(react@18.3.1)(three@0.165.0)
+      '@react-spring/animated': 9.7.5(react@18.3.1)
+      '@react-spring/core': 9.7.5(react@18.3.1)
+      '@react-spring/shared': 9.7.5(react@18.3.1)
+      '@react-spring/types': 9.7.5
+      '@react-three/fiber': 8.17.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)(three@0.173.0)
       react: 18.3.1
-      three: 0.165.0
+      three: 0.173.0
 
-  '@react-spring/types@9.7.3': {}
+  '@react-spring/types@9.7.5': {}
 
-  '@react-spring/web@9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-spring/web@9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@react-spring/animated': 9.7.3(react@18.3.1)
-      '@react-spring/core': 9.7.3(react@18.3.1)
-      '@react-spring/shared': 9.7.3(react@18.3.1)
-      '@react-spring/types': 9.7.3
+      '@react-spring/animated': 9.7.5(react@18.3.1)
+      '@react-spring/core': 9.7.5(react@18.3.1)
+      '@react-spring/shared': 9.7.5(react@18.3.1)
+      '@react-spring/types': 9.7.5
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@react-spring/zdog@9.7.3(react-dom@18.3.1(react@18.3.1))(react-zdog@1.2.2)(react@18.3.1)(zdog@1.1.3)':
+  '@react-spring/zdog@9.7.5(react-dom@18.3.1(react@18.3.1))(react-zdog@1.2.2)(react@18.3.1)(zdog@1.1.3)':
     dependencies:
-      '@react-spring/animated': 9.7.3(react@18.3.1)
-      '@react-spring/core': 9.7.3(react@18.3.1)
-      '@react-spring/shared': 9.7.3(react@18.3.1)
-      '@react-spring/types': 9.7.3
+      '@react-spring/animated': 9.7.5(react@18.3.1)
+      '@react-spring/core': 9.7.5(react@18.3.1)
+      '@react-spring/shared': 9.7.5(react@18.3.1)
+      '@react-spring/types': 9.7.5
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-zdog: 1.2.2
       zdog: 1.1.3
 
-  '@react-stately/utils@3.10.1(react@18.3.1)':
+  '@react-stately/utils@3.10.5(react@18.3.1)':
     dependencies:
-      '@swc/helpers': 0.5.11
+      '@swc/helpers': 0.5.15
       react: 18.3.1
 
-  '@react-three/fiber@8.16.8(react-dom@18.3.1(react@18.3.1))(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1))(react@18.3.1)(three@0.165.0)':
+  '@react-three/fiber@8.17.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)(three@0.173.0)':
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.7
       '@types/react-reconciler': 0.26.7
-      '@types/webxr': 0.5.16
+      '@types/webxr': 0.5.21
       base64-js: 1.5.1
       buffer: 6.0.3
-      its-fine: 1.2.5(react@18.3.1)
+      its-fine: 1.2.5(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-reconciler: 0.27.0(react@18.3.1)
-      react-use-measure: 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-use-measure: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       scheduler: 0.21.0
       suspend-react: 0.1.3(react@18.3.1)
-      three: 0.165.0
+      three: 0.173.0
       zustand: 3.7.2(react@18.3.1)
     optionalDependencies:
       react-dom: 18.3.1(react@18.3.1)
-      react-native: 0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1)
+      react-native: 0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
 
-  '@react-types/shared@3.23.1(react@18.3.1)':
+  '@react-types/shared@3.27.0(react@18.3.1)':
     dependencies:
       react: 18.3.1
 
-  '@rnx-kit/chromium-edge-launcher@1.0.0':
-    dependencies:
-      '@types/node': 18.19.34
-      escape-string-regexp: 4.0.0
-      is-wsl: 2.2.0
-      lighthouse-logger: 1.4.2
-      mkdirp: 1.0.4
-      rimraf: 3.0.2
-    transitivePeerDependencies:
-      - supports-color
+  '@rollup/rollup-android-arm-eabi@4.34.2':
+    optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.24.0':
+  '@rollup/rollup-android-arm64@4.34.2':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.24.0':
+  '@rollup/rollup-darwin-arm64@4.34.2':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.24.0':
+  '@rollup/rollup-darwin-x64@4.34.2':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.24.0':
+  '@rollup/rollup-freebsd-arm64@4.34.2':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.24.0':
+  '@rollup/rollup-freebsd-x64@4.34.2':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.24.0':
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.2':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.24.0':
+  '@rollup/rollup-linux-arm-musleabihf@4.34.2':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.24.0':
+  '@rollup/rollup-linux-arm64-gnu@4.34.2':
     optional: true
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.24.0':
+  '@rollup/rollup-linux-arm64-musl@4.34.2':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.24.0':
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.2':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.24.0':
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.2':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.24.0':
+  '@rollup/rollup-linux-riscv64-gnu@4.34.2':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.24.0':
+  '@rollup/rollup-linux-s390x-gnu@4.34.2':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.24.0':
+  '@rollup/rollup-linux-x64-gnu@4.34.2':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.24.0':
+  '@rollup/rollup-linux-x64-musl@4.34.2':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.24.0':
+  '@rollup/rollup-win32-arm64-msvc@4.34.2':
     optional: true
 
-  '@shikijs/core@1.21.1':
+  '@rollup/rollup-win32-ia32-msvc@4.34.2':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.34.2':
+    optional: true
+
+  '@shikijs/core@1.20.0':
     dependencies:
-      '@shikijs/engine-javascript': 1.21.1
-      '@shikijs/engine-oniguruma': 1.21.1
-      '@shikijs/types': 1.21.1
-      '@shikijs/vscode-textmate': 9.3.0
+      '@shikijs/engine-javascript': 1.20.0
+      '@shikijs/engine-oniguruma': 1.20.0
+      '@shikijs/types': 1.20.0
+      '@shikijs/vscode-textmate': 9.3.1
       '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.3
+      hast-util-to-html: 9.0.4
 
-  '@shikijs/engine-javascript@1.21.1':
+  '@shikijs/engine-javascript@1.20.0':
     dependencies:
-      '@shikijs/types': 1.21.1
-      '@shikijs/vscode-textmate': 9.3.0
+      '@shikijs/types': 1.20.0
+      '@shikijs/vscode-textmate': 9.3.1
       oniguruma-to-js: 0.4.3
 
-  '@shikijs/engine-oniguruma@1.21.1':
+  '@shikijs/engine-oniguruma@1.20.0':
     dependencies:
-      '@shikijs/types': 1.21.1
-      '@shikijs/vscode-textmate': 9.3.0
+      '@shikijs/types': 1.20.0
+      '@shikijs/vscode-textmate': 9.3.1
 
-  '@shikijs/types@1.21.1':
+  '@shikijs/types@1.20.0':
     dependencies:
-      '@shikijs/vscode-textmate': 9.3.0
+      '@shikijs/vscode-textmate': 9.3.1
       '@types/hast': 3.0.4
 
-  '@shikijs/vscode-textmate@9.3.0': {}
-
-  '@sideway/address@4.1.5':
-    dependencies:
-      '@hapi/hoek': 9.3.0
-
-  '@sideway/formula@3.0.1': {}
-
-  '@sideway/pinpoint@2.0.0': {}
+  '@shikijs/vscode-textmate@9.3.1': {}
 
   '@sinclair/typebox@0.27.8': {}
 
@@ -12127,205 +9764,95 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
-  '@stylistic/eslint-plugin-js@2.2.0(eslint@9.2.0)':
-    dependencies:
-      '@types/eslint': 8.56.10
-      acorn: 8.12.0
-      eslint: 9.2.0
-      eslint-visitor-keys: 4.0.0
-      espree: 10.0.1
-
-  '@stylistic/eslint-plugin-js@2.6.0-beta.0(eslint@9.2.0)':
-    dependencies:
-      '@types/eslint': 8.56.10
-      acorn: 8.12.0
-      eslint: 9.2.0
-      eslint-visitor-keys: 4.0.0
-      espree: 10.1.0
-
-  '@stylistic/eslint-plugin-jsx@2.2.0(eslint@9.2.0)':
-    dependencies:
-      '@stylistic/eslint-plugin-js': 2.2.0(eslint@9.2.0)
-      '@types/eslint': 8.56.10
-      eslint: 9.2.0
-      estraverse: 5.3.0
-      picomatch: 4.0.2
-
-  '@stylistic/eslint-plugin-jsx@2.6.0-beta.0(eslint@9.2.0)':
-    dependencies:
-      '@stylistic/eslint-plugin-js': 2.6.0-beta.0(eslint@9.2.0)
-      '@types/eslint': 8.56.10
-      eslint: 9.2.0
-      estraverse: 5.3.0
-      picomatch: 4.0.2
-
-  '@stylistic/eslint-plugin-plus@2.2.0(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@types/eslint': 8.56.10
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  '@stylistic/eslint-plugin-plus@2.6.0-beta.0(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@types/eslint': 8.56.10
-      '@typescript-eslint/utils': 8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  '@stylistic/eslint-plugin-ts@2.2.0(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@stylistic/eslint-plugin-js': 2.2.0(eslint@9.2.0)
-      '@types/eslint': 8.56.10
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  '@stylistic/eslint-plugin-ts@2.6.0-beta.0(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@stylistic/eslint-plugin-js': 2.6.0-beta.0(eslint@9.2.0)
-      '@types/eslint': 8.56.10
-      '@typescript-eslint/utils': 8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  '@stylistic/eslint-plugin@2.2.0(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@stylistic/eslint-plugin-js': 2.2.0(eslint@9.2.0)
-      '@stylistic/eslint-plugin-jsx': 2.2.0(eslint@9.2.0)
-      '@stylistic/eslint-plugin-plus': 2.2.0(eslint@9.2.0)(typescript@5.4.5)
-      '@stylistic/eslint-plugin-ts': 2.2.0(eslint@9.2.0)(typescript@5.4.5)
-      '@types/eslint': 8.56.10
-      eslint: 9.2.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  '@stylistic/eslint-plugin@2.6.0-beta.0(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@stylistic/eslint-plugin-js': 2.6.0-beta.0(eslint@9.2.0)
-      '@stylistic/eslint-plugin-jsx': 2.6.0-beta.0(eslint@9.2.0)
-      '@stylistic/eslint-plugin-plus': 2.6.0-beta.0(eslint@9.2.0)(typescript@5.4.5)
-      '@stylistic/eslint-plugin-ts': 2.6.0-beta.0(eslint@9.2.0)(typescript@5.4.5)
-      '@types/eslint': 8.56.10
-      eslint: 9.2.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@swc/counter@0.1.3': {}
 
-  '@swc/helpers@0.5.11':
-    dependencies:
-      tslib: 2.6.2
-
-  '@swc/helpers@0.5.2':
+  '@swc/helpers@0.5.15':
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   '@swc/helpers@0.5.5':
     dependencies:
       '@swc/counter': 0.1.3
-      tslib: 2.6.2
+      tslib: 2.8.1
 
-  '@t3-oss/env-core@0.7.3(typescript@5.4.5)(zod@3.23.8)':
+  '@t3-oss/env-core@0.7.3(typescript@5.7.3)(zod@3.24.1)':
     dependencies:
-      zod: 3.23.8
+      zod: 3.24.1
     optionalDependencies:
-      typescript: 5.4.5
+      typescript: 5.7.3
 
-  '@t3-oss/env-nextjs@0.7.3(typescript@5.4.5)(zod@3.23.8)':
+  '@t3-oss/env-nextjs@0.7.3(typescript@5.7.3)(zod@3.24.1)':
     dependencies:
-      '@t3-oss/env-core': 0.7.3(typescript@5.4.5)(zod@3.23.8)
-      zod: 3.23.8
+      '@t3-oss/env-core': 0.7.3(typescript@5.7.3)(zod@3.24.1)
+      zod: 3.24.1
     optionalDependencies:
-      typescript: 5.4.5
+      typescript: 5.7.3
 
-  '@tailwindcss/typography@0.5.13(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5)))':
+  '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5))
+      tailwindcss: 3.4.17
 
-  '@tanstack/react-table@8.17.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@tanstack/react-table@8.20.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@tanstack/table-core': 8.17.3
+      '@tanstack/table-core': 8.20.5
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@tanstack/react-virtual@3.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@tanstack/react-virtual@3.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@tanstack/virtual-core': 3.5.0
+      '@tanstack/virtual-core': 3.12.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@tanstack/table-core@8.17.3': {}
+  '@tanstack/table-core@8.20.5': {}
 
-  '@tanstack/virtual-core@3.5.0': {}
+  '@tanstack/virtual-core@3.12.0': {}
 
   '@tootallnate/quickjs-emscripten@0.23.0': {}
 
   '@ts-morph/common@0.19.0':
     dependencies:
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       minimatch: 7.4.6
       mkdirp: 2.1.6
       path-browserify: 1.0.1
 
-  '@tsconfig/node10@1.0.9':
-    optional: true
-
-  '@tsconfig/node12@1.0.11':
-    optional: true
-
-  '@tsconfig/node14@1.0.3':
-    optional: true
-
-  '@tsconfig/node16@1.0.4':
-    optional: true
-
   '@types/acorn@4.0.6':
     dependencies:
       '@types/estree': 1.0.6
 
-  '@types/aws-lambda@8.10.140': {}
+  '@types/aws-lambda@8.10.147': {}
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.23.3
+      '@babel/parser': 7.26.7
+      '@babel/types': 7.26.7
       '@types/babel__generator': 7.6.8
       '@types/babel__template': 7.4.4
       '@types/babel__traverse': 7.20.6
 
   '@types/babel__generator@7.6.8':
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.26.7
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.23.3
+      '@babel/parser': 7.26.7
+      '@babel/types': 7.26.7
 
   '@types/babel__traverse@7.20.6':
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.26.7
 
-  '@types/canvas-confetti@1.6.4': {}
+  '@types/canvas-confetti@1.9.0': {}
 
-  '@types/cli-progress@3.11.5':
+  '@types/cli-progress@3.11.6':
     dependencies:
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
 
   '@types/d3-array@3.2.1': {}
 
@@ -12341,38 +9868,26 @@ snapshots:
 
   '@types/d3-scale@4.0.8':
     dependencies:
-      '@types/d3-time': 3.0.3
+      '@types/d3-time': 3.0.4
 
-  '@types/d3-shape@3.1.6':
+  '@types/d3-shape@3.1.7':
     dependencies:
       '@types/d3-path': 3.1.0
 
-  '@types/d3-time@3.0.3': {}
+  '@types/d3-time@3.0.4': {}
 
   '@types/d3-timer@3.0.2': {}
 
   '@types/debug@4.1.12':
     dependencies:
-      '@types/ms': 0.7.34
-
-  '@types/diff@5.2.1': {}
-
-  '@types/eslint@8.56.10':
-    dependencies:
-      '@types/estree': 1.0.5
-      '@types/json-schema': 7.0.12
+      '@types/ms': 2.1.0
 
-  '@types/eslint@8.56.5':
-    dependencies:
-      '@types/estree': 1.0.5
-      '@types/json-schema': 7.0.12
+  '@types/diff@5.2.3': {}
 
   '@types/estree-jsx@1.0.5':
     dependencies:
       '@types/estree': 1.0.6
 
-  '@types/estree@1.0.5': {}
-
   '@types/estree@1.0.6': {}
 
   '@types/extend@3.0.4': {}
@@ -12380,11 +9895,15 @@ snapshots:
   '@types/fs-extra@11.0.4':
     dependencies:
       '@types/jsonfile': 6.1.4
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
+
+  '@types/graceful-fs@4.1.9':
+    dependencies:
+      '@types/node': 20.17.17
 
   '@types/hast@3.0.4':
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   '@types/istanbul-lib-coverage@2.0.6': {}
 
@@ -12396,435 +9915,141 @@ snapshots:
     dependencies:
       '@types/istanbul-lib-report': 3.0.3
 
-  '@types/json-schema@7.0.12': {}
-
   '@types/jsonfile@6.1.4':
     dependencies:
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
 
   '@types/lodash.template@4.5.3':
     dependencies:
-      '@types/lodash': 4.17.5
+      '@types/lodash': 4.17.15
 
-  '@types/lodash@4.17.5': {}
+  '@types/lodash@4.17.15': {}
 
   '@types/mdast@3.0.15':
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
   '@types/mdast@4.0.4':
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   '@types/mdx@2.0.13': {}
 
-  '@types/ms@0.7.34': {}
+  '@types/ms@2.1.0': {}
 
   '@types/node-forge@1.3.11':
     dependencies:
-      '@types/node': 20.11.24
-
-  '@types/node@17.0.45': {}
+      '@types/node': 20.17.17
 
-  '@types/node@18.19.34':
+  '@types/node@20.17.17':
     dependencies:
-      undici-types: 5.26.5
-
-  '@types/node@20.11.24':
-    dependencies:
-      undici-types: 5.26.5
-
-  '@types/normalize-package-data@2.4.4': {}
+      undici-types: 6.19.8
 
   '@types/prompts@2.4.9':
     dependencies:
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
       kleur: 3.0.3
 
-  '@types/prop-types@15.7.5': {}
+  '@types/prop-types@15.7.14': {}
 
-  '@types/react-dom@18.2.19':
+  '@types/react-color@3.0.13(@types/react@18.3.18)':
     dependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
+      '@types/reactcss': 1.2.13(@types/react@18.3.18)
 
-  '@types/react-dom@18.3.0':
+  '@types/react-dom@18.3.5(@types/react@18.3.18)':
     dependencies:
-      '@types/react': 18.3.3
+      '@types/react': 18.3.18
 
   '@types/react-reconciler@0.26.7':
     dependencies:
-      '@types/react': 18.3.3
+      '@types/react': 18.3.18
 
-  '@types/react-reconciler@0.28.8':
+  '@types/react-reconciler@0.28.9(@types/react@18.3.18)':
     dependencies:
-      '@types/react': 18.3.3
+      '@types/react': 18.3.18
 
-  '@types/react@18.2.61':
+  '@types/react@18.3.18':
     dependencies:
-      '@types/prop-types': 15.7.5
-      '@types/scheduler': 0.16.3
-      csstype: 3.1.2
+      '@types/prop-types': 15.7.14
+      csstype: 3.1.3
 
-  '@types/react@18.3.3':
+  '@types/reactcss@1.2.13(@types/react@18.3.18)':
     dependencies:
-      '@types/prop-types': 15.7.5
-      csstype: 3.1.2
+      '@types/react': 18.3.18
 
   '@types/resolve@1.20.6': {}
 
-  '@types/scheduler@0.16.3': {}
-
-  '@types/semver@7.5.0': {}
-
   '@types/stack-utils@2.0.3': {}
 
   '@types/stringify-object@4.0.5': {}
 
   '@types/text-table@0.2.5': {}
 
-  '@types/unist@2.0.10': {}
+  '@types/unist@2.0.11': {}
 
-  '@types/unist@3.0.2': {}
+  '@types/unist@3.0.3': {}
 
-  '@types/webxr@0.5.16': {}
+  '@types/webxr@0.5.21': {}
 
   '@types/yargs-parser@21.0.3': {}
 
-  '@types/yargs@15.0.19':
-    dependencies:
-      '@types/yargs-parser': 21.0.3
-
-  '@types/yargs@17.0.32':
+  '@types/yargs@17.0.33':
     dependencies:
       '@types/yargs-parser': 21.0.3
 
   '@types/yauzl@2.10.3':
     dependencies:
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
     optional: true
 
-  '@typescript-eslint/eslint-plugin@7.13.0(@typescript-eslint/parser@5.62.0(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 5.62.0(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/type-utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/visitor-keys': 7.13.0
-      eslint: 9.2.0
-      graphemer: 1.4.0
-      ignore: 5.3.1
-      natural-compare: 1.4.0
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/eslint-plugin@8.0.0-alpha.40(@typescript-eslint/parser@8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 8.0.0-alpha.40
-      '@typescript-eslint/type-utils': 8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/utils': 8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/visitor-keys': 8.0.0-alpha.40
-      eslint: 9.2.0
-      graphemer: 1.4.0
-      ignore: 5.3.1
-      natural-compare: 1.4.0
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/parser@5.62.0(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 5.62.0
-      '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.5)
-      debug: 4.3.4
-      eslint: 9.2.0
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/parser@7.13.0(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/typescript-estree': 7.13.0(typescript@5.4.5)
-      '@typescript-eslint/visitor-keys': 7.13.0
-      debug: 4.3.4
-      eslint: 9.2.0
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/parser@8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.0.0-alpha.40
-      '@typescript-eslint/types': 8.0.0-alpha.40
-      '@typescript-eslint/typescript-estree': 8.0.0-alpha.40(typescript@5.4.5)
-      '@typescript-eslint/visitor-keys': 8.0.0-alpha.40
-      debug: 4.3.5
-      eslint: 9.2.0
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/scope-manager@5.62.0':
-    dependencies:
-      '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/visitor-keys': 5.62.0
-
-  '@typescript-eslint/scope-manager@7.1.0':
-    dependencies:
-      '@typescript-eslint/types': 7.1.0
-      '@typescript-eslint/visitor-keys': 7.1.0
-
-  '@typescript-eslint/scope-manager@7.13.0':
-    dependencies:
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/visitor-keys': 7.13.0
-
-  '@typescript-eslint/scope-manager@8.0.0-alpha.40':
-    dependencies:
-      '@typescript-eslint/types': 8.0.0-alpha.40
-      '@typescript-eslint/visitor-keys': 8.0.0-alpha.40
-
-  '@typescript-eslint/type-utils@7.13.0(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/typescript-estree': 7.13.0(typescript@5.4.5)
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      debug: 4.3.4
-      eslint: 9.2.0
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/type-utils@8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/typescript-estree': 8.0.0-alpha.40(typescript@5.4.5)
-      '@typescript-eslint/utils': 8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5)
-      debug: 4.3.5
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-
-  '@typescript-eslint/types@5.62.0': {}
-
-  '@typescript-eslint/types@7.1.0': {}
+  '@ungap/structured-clone@1.3.0': {}
 
-  '@typescript-eslint/types@7.13.0': {}
-
-  '@typescript-eslint/types@8.0.0-alpha.40': {}
-
-  '@typescript-eslint/typescript-estree@5.62.0(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      semver: 7.6.2
-      tsutils: 3.21.0(typescript@5.4.5)
+  '@vercel/analytics@1.4.1(next@14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/typescript-estree@7.1.0(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/types': 7.1.0
-      '@typescript-eslint/visitor-keys': 7.1.0
-      debug: 4.3.7
-      globby: 11.1.0
-      is-glob: 4.0.3
-      minimatch: 9.0.3
-      semver: 7.6.2
-      ts-api-utils: 1.0.2(typescript@5.4.5)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/typescript-estree@7.13.0(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/visitor-keys': 7.13.0
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      minimatch: 9.0.4
-      semver: 7.6.2
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/typescript-estree@8.0.0-alpha.40(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/types': 8.0.0-alpha.40
-      '@typescript-eslint/visitor-keys': 8.0.0-alpha.40
-      debug: 4.3.5
-      globby: 11.1.0
-      is-glob: 4.0.3
-      minimatch: 9.0.4
-      semver: 7.6.2
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@7.1.0(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      '@types/json-schema': 7.0.12
-      '@types/semver': 7.5.0
-      '@typescript-eslint/scope-manager': 7.1.0
-      '@typescript-eslint/types': 7.1.0
-      '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.4.5)
-      eslint: 9.2.0
-      semver: 7.6.2
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  '@typescript-eslint/utils@7.13.0(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/typescript-estree': 7.13.0(typescript@5.4.5)
-      eslint: 9.2.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  '@typescript-eslint/utils@8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      '@typescript-eslint/scope-manager': 8.0.0-alpha.40
-      '@typescript-eslint/types': 8.0.0-alpha.40
-      '@typescript-eslint/typescript-estree': 8.0.0-alpha.40(typescript@5.4.5)
-      eslint: 9.2.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  '@typescript-eslint/visitor-keys@5.62.0':
-    dependencies:
-      '@typescript-eslint/types': 5.62.0
-      eslint-visitor-keys: 3.4.3
-
-  '@typescript-eslint/visitor-keys@7.1.0':
-    dependencies:
-      '@typescript-eslint/types': 7.1.0
-      eslint-visitor-keys: 3.4.3
-
-  '@typescript-eslint/visitor-keys@7.13.0':
-    dependencies:
-      '@typescript-eslint/types': 7.13.0
-      eslint-visitor-keys: 3.4.3
-
-  '@typescript-eslint/visitor-keys@8.0.0-alpha.40':
-    dependencies:
-      '@typescript-eslint/types': 8.0.0-alpha.40
-      eslint-visitor-keys: 3.4.3
-
-  '@ungap/structured-clone@1.2.0': {}
-
-  '@vercel/analytics@1.3.1(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      server-only: 0.0.1
-    optionalDependencies:
-      next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
 
-  '@vitest/expect@2.1.2':
+  '@vitest/expect@2.1.9':
     dependencies:
-      '@vitest/spy': 2.1.2
-      '@vitest/utils': 2.1.2
-      chai: 5.1.1
+      '@vitest/spy': 2.1.9
+      '@vitest/utils': 2.1.9
+      chai: 5.1.2
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.2(@vitest/spy@2.1.2)(vite@5.4.8(@types/node@20.11.24)(terser@5.31.1))':
+  '@vitest/mocker@2.1.9(vite@5.4.14(@types/node@20.17.17)(terser@5.37.0))':
     dependencies:
-      '@vitest/spy': 2.1.2
+      '@vitest/spy': 2.1.9
       estree-walker: 3.0.3
-      magic-string: 0.30.11
+      magic-string: 0.30.17
     optionalDependencies:
-      vite: 5.4.8(@types/node@20.11.24)(terser@5.31.1)
+      vite: 5.4.14(@types/node@20.17.17)(terser@5.37.0)
 
-  '@vitest/pretty-format@2.1.2':
+  '@vitest/pretty-format@2.1.9':
     dependencies:
       tinyrainbow: 1.2.0
 
-  '@vitest/runner@2.1.2':
+  '@vitest/runner@2.1.9':
     dependencies:
-      '@vitest/utils': 2.1.2
+      '@vitest/utils': 2.1.9
       pathe: 1.1.2
 
-  '@vitest/snapshot@2.1.2':
+  '@vitest/snapshot@2.1.9':
     dependencies:
-      '@vitest/pretty-format': 2.1.2
-      magic-string: 0.30.11
+      '@vitest/pretty-format': 2.1.9
+      magic-string: 0.30.17
       pathe: 1.1.2
 
-  '@vitest/spy@2.1.2':
+  '@vitest/spy@2.1.9':
     dependencies:
       tinyspy: 3.0.2
 
-  '@vitest/utils@2.1.2':
+  '@vitest/utils@2.1.9':
     dependencies:
-      '@vitest/pretty-format': 2.1.2
-      loupe: 3.1.1
+      '@vitest/pretty-format': 2.1.9
+      loupe: 3.1.3
       tinyrainbow: 1.2.0
 
-  '@vue/compiler-core@3.4.29':
-    dependencies:
-      '@babel/parser': 7.24.7
-      '@vue/shared': 3.4.29
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.1
-
-  '@vue/compiler-dom@3.4.29':
-    dependencies:
-      '@vue/compiler-core': 3.4.29
-      '@vue/shared': 3.4.29
-
-  '@vue/compiler-sfc@3.4.29':
-    dependencies:
-      '@babel/parser': 7.24.7
-      '@vue/compiler-core': 3.4.29
-      '@vue/compiler-dom': 3.4.29
-      '@vue/compiler-ssr': 3.4.29
-      '@vue/shared': 3.4.29
-      estree-walker: 2.0.2
-      magic-string: 0.30.11
-      postcss: 8.4.47
-      source-map-js: 1.2.1
-
-  '@vue/compiler-ssr@3.4.29':
-    dependencies:
-      '@vue/compiler-dom': 3.4.29
-      '@vue/shared': 3.4.29
-
-  '@vue/shared@3.4.29': {}
-
   abort-controller@3.0.0:
     dependencies:
       event-target-shim: 5.0.1
@@ -12834,54 +10059,21 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
-  acorn-jsx@5.3.2(acorn@8.12.0):
-    dependencies:
-      acorn: 8.12.0
-
-  acorn-walk@8.3.3:
+  acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
-      acorn: 8.12.0
-    optional: true
-
-  acorn@8.12.0: {}
-
-  agent-base@7.1.1:
-    dependencies:
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
+      acorn: 8.14.0
 
-  aggregate-error@5.0.0:
-    dependencies:
-      clean-stack: 5.2.0
-      indent-string: 5.0.0
+  acorn@8.14.0: {}
 
-  ajv@6.12.6:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
+  agent-base@7.1.3: {}
 
   animejs@3.2.2: {}
 
   anser@1.4.10: {}
 
-  ansi-fragments@0.2.1:
-    dependencies:
-      colorette: 1.4.0
-      slice-ansi: 2.1.0
-      strip-ansi: 5.2.0
-
-  ansi-regex@4.1.1: {}
-
   ansi-regex@5.0.1: {}
 
-  ansi-regex@6.0.1: {}
-
-  ansi-styles@3.2.1:
-    dependencies:
-      color-convert: 1.9.3
+  ansi-regex@6.1.0: {}
 
   ansi-styles@4.3.0:
     dependencies:
@@ -12898,13 +10090,6 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  appdirsjs@1.2.7: {}
-
-  are-docs-informative@0.0.2: {}
-
-  arg@4.1.3:
-    optional: true
-
   arg@5.0.2: {}
 
   argparse@1.0.10:
@@ -12915,7 +10100,7 @@ snapshots:
 
   aria-hidden@1.2.4:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   array-union@2.1.0: {}
 
@@ -12925,93 +10110,146 @@ snapshots:
 
   ast-types@0.13.4:
     dependencies:
-      tslib: 2.6.2
-
-  ast-types@0.15.2:
-    dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   ast-types@0.16.1:
     dependencies:
-      tslib: 2.6.2
-
-  astral-regex@1.0.0: {}
+      tslib: 2.8.1
 
-  astring@1.8.6: {}
+  astring@1.9.0: {}
 
   async-limiter@1.0.1: {}
 
-  autoprefixer@10.4.19(postcss@8.4.38):
+  autoprefixer@10.4.20(postcss@8.5.1):
     dependencies:
-      browserslist: 4.23.1
-      caniuse-lite: 1.0.30001634
+      browserslist: 4.24.4
+      caniuse-lite: 1.0.30001697
       fraction.js: 4.3.7
       normalize-range: 0.1.2
-      picocolors: 1.0.1
-      postcss: 8.4.38
+      picocolors: 1.1.1
+      postcss: 8.5.1
       postcss-value-parser: 4.2.0
 
   b4a@1.6.7: {}
 
-  babel-core@7.0.0-bridge.0(@babel/core@7.24.7):
+  babel-jest@29.7.0(@babel/core@7.26.7):
     dependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.26.7
+      '@jest/transform': 29.7.0
+      '@types/babel__core': 7.20.5
+      babel-plugin-istanbul: 6.1.1
+      babel-preset-jest: 29.6.3(@babel/core@7.26.7)
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      slash: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
 
-  babel-plugin-polyfill-corejs2@0.4.11(@babel/core@7.24.7):
+  babel-plugin-istanbul@6.1.1:
     dependencies:
-      '@babel/compat-data': 7.24.7
-      '@babel/core': 7.24.7
-      '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.24.7)
+      '@babel/helper-plugin-utils': 7.26.5
+      '@istanbuljs/load-nyc-config': 1.1.0
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-instrument: 5.2.1
+      test-exclude: 6.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-jest-hoist@29.6.3:
+    dependencies:
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.7
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.20.6
+
+  babel-plugin-polyfill-corejs2@0.4.12(@babel/core@7.26.7):
+    dependencies:
+      '@babel/compat-data': 7.26.5
+      '@babel/core': 7.26.7
+      '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.7)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.10.4(@babel/core@7.24.7):
+  babel-plugin-polyfill-corejs3@0.10.6(@babel/core@7.26.7):
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.24.7)
-      core-js-compat: 3.37.1
+      '@babel/core': 7.26.7
+      '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.7)
+      core-js-compat: 3.40.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-regenerator@0.6.2(@babel/core@7.24.7):
+  babel-plugin-polyfill-regenerator@0.6.3(@babel/core@7.26.7):
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.24.7)
+      '@babel/core': 7.26.7
+      '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.7)
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.24.7):
+  babel-plugin-syntax-hermes-parser@0.25.1:
+    dependencies:
+      hermes-parser: 0.25.1
+
+  babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.26.7):
     dependencies:
-      '@babel/plugin-syntax-flow': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-syntax-flow': 7.26.0(@babel/core@7.26.7)
     transitivePeerDependencies:
       - '@babel/core'
 
+  babel-preset-current-node-syntax@1.1.0(@babel/core@7.26.7):
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.26.7)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.26.7)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.26.7)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.26.7)
+      '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.7)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.26.7)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.26.7)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.26.7)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.26.7)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.26.7)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.26.7)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.26.7)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.26.7)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.26.7)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.26.7)
+
+  babel-preset-jest@29.6.3(@babel/core@7.26.7):
+    dependencies:
+      '@babel/core': 7.26.7
+      babel-plugin-jest-hoist: 29.6.3
+      babel-preset-current-node-syntax: 1.1.0(@babel/core@7.26.7)
+
   bail@2.0.2: {}
 
   balanced-match@1.0.2: {}
 
-  bare-events@2.5.0:
+  bare-events@2.5.4:
     optional: true
 
-  bare-fs@2.3.5:
+  bare-fs@4.0.1:
     dependencies:
-      bare-events: 2.5.0
-      bare-path: 2.1.3
-      bare-stream: 2.4.2
+      bare-events: 2.5.4
+      bare-path: 3.0.0
+      bare-stream: 2.6.5(bare-events@2.5.4)
+    transitivePeerDependencies:
+      - bare-buffer
     optional: true
 
-  bare-os@2.4.4:
+  bare-os@3.4.0:
     optional: true
 
-  bare-path@2.1.3:
+  bare-path@3.0.0:
     dependencies:
-      bare-os: 2.4.4
+      bare-os: 3.4.0
     optional: true
 
-  bare-stream@2.4.2:
+  bare-stream@2.6.5(bare-events@2.5.4):
     dependencies:
-      streamx: 2.20.2
+      streamx: 2.22.0
+    optionalDependencies:
+      bare-events: 2.5.4
     optional: true
 
   base64-js@1.5.1: {}
@@ -13022,12 +10260,6 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
-  bl@4.1.0:
-    dependencies:
-      buffer: 5.7.1
-      inherits: 2.0.4
-      readable-stream: 3.6.2
-
   bl@5.1.0:
     dependencies:
       buffer: 6.0.3
@@ -13047,16 +10279,16 @@ snapshots:
     dependencies:
       balanced-match: 1.0.2
 
-  braces@3.0.2:
+  braces@3.0.3:
     dependencies:
-      fill-range: 7.0.1
+      fill-range: 7.1.1
 
-  browserslist@4.23.1:
+  browserslist@4.24.4:
     dependencies:
-      caniuse-lite: 1.0.30001634
-      electron-to-chromium: 1.4.803
-      node-releases: 2.0.14
-      update-browserslist-db: 1.0.16(browserslist@4.23.1)
+      caniuse-lite: 1.0.30001697
+      electron-to-chromium: 1.5.91
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.2(browserslist@4.24.4)
 
   bser@2.1.1:
     dependencies:
@@ -13076,16 +10308,14 @@ snapshots:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
-  builtin-modules@3.3.0: {}
-
   bumping@9.2.1:
     dependencies:
       '@jsdevtools/ez-spawn': 3.0.4
-      c12: 1.11.1
+      c12: 1.11.2
       cac: 6.7.14
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       prompts: 2.4.2
-      semver: 7.6.2
+      semver: 7.7.1
     transitivePeerDependencies:
       - magicast
 
@@ -13098,21 +10328,19 @@ snapshots:
     dependencies:
       streamsearch: 1.1.0
 
-  bytes@3.0.0: {}
-
-  c12@1.11.1:
+  c12@1.11.2:
     dependencies:
       chokidar: 3.6.0
-      confbox: 0.1.7
+      confbox: 0.1.8
       defu: 6.1.4
-      dotenv: 16.4.5
-      giget: 1.2.3
-      jiti: 1.21.6
-      mlly: 1.7.1
-      ohash: 1.1.3
+      dotenv: 16.4.7
+      giget: 1.2.4
+      jiti: 1.21.7
+      mlly: 1.7.4
+      ohash: 1.1.4
       pathe: 1.1.2
       perfect-debounce: 1.0.0
-      pkg-types: 1.1.1
+      pkg-types: 1.3.1
       rc9: 2.1.2
 
   cac@6.7.14: {}
@@ -13139,45 +10367,35 @@ snapshots:
 
   camelcase@8.0.0: {}
 
-  caniuse-lite@1.0.30001634: {}
+  caniuse-lite@1.0.30001697: {}
 
   canvas-confetti@1.9.3: {}
 
   ccount@2.0.1: {}
 
-  chai@5.1.1:
+  chai@5.1.2:
     dependencies:
       assertion-error: 2.0.1
       check-error: 2.1.1
       deep-eql: 5.0.2
-      loupe: 3.1.1
+      loupe: 3.1.3
       pathval: 2.0.0
 
-  chalk@2.4.2:
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
-  chalk@5.2.0: {}
+  chalk@5.4.1: {}
 
-  character-entities-html4@2.1.0: {}
+  change-case@5.4.4: {}
 
-  character-entities-legacy@1.1.4: {}
+  character-entities-html4@2.1.0: {}
 
   character-entities-legacy@3.0.0: {}
 
-  character-entities@1.2.4: {}
-
   character-entities@2.0.2: {}
 
-  character-reference-invalid@1.1.4: {}
-
   character-reference-invalid@2.0.1: {}
 
   check-error@2.1.1: {}
@@ -13185,7 +10403,7 @@ snapshots:
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
-      braces: 3.0.2
+      braces: 3.0.3
       glob-parent: 5.1.2
       is-binary-path: 2.1.0
       is-glob: 4.0.3
@@ -13194,64 +10412,48 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  chownr@1.1.4: {}
-
   chownr@2.0.0: {}
 
   chrome-launcher@0.15.2:
     dependencies:
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
       escape-string-regexp: 4.0.0
       is-wsl: 2.2.0
       lighthouse-logger: 1.4.2
     transitivePeerDependencies:
       - supports-color
 
-  chromium-bidi@0.8.0(devtools-protocol@0.0.1367902):
+  chromium-bidi@0.11.0(devtools-protocol@0.0.1367902):
     dependencies:
       devtools-protocol: 0.0.1367902
       mitt: 3.0.1
-      urlpattern-polyfill: 10.0.0
       zod: 3.23.8
 
+  chromium-edge-launcher@0.2.0:
+    dependencies:
+      '@types/node': 20.17.17
+      escape-string-regexp: 4.0.0
+      is-wsl: 2.2.0
+      lighthouse-logger: 1.4.2
+      mkdirp: 1.0.4
+      rimraf: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   ci-info@2.0.0: {}
 
   ci-info@3.9.0: {}
 
-  ci-info@4.0.0: {}
-
   citty@0.1.6:
     dependencies:
-      consola: 3.2.3
+      consola: 3.4.0
 
-  class-variance-authority@0.7.0:
+  class-variance-authority@0.7.1:
     dependencies:
-      clsx: 2.0.0
+      clsx: 2.1.1
 
   classnames@2.5.1: {}
 
-  clean-regexp@1.0.0:
-    dependencies:
-      escape-string-regexp: 1.0.5
-
-  clean-stack@5.2.0:
-    dependencies:
-      escape-string-regexp: 5.0.0
-
-  clerc@0.44.0:
-    dependencies:
-      '@clerc/core': 0.44.0
-      '@clerc/plugin-completions': 0.44.0(@clerc/core@0.44.0)
-      '@clerc/plugin-friendly-error': 0.44.0(@clerc/core@0.44.0)
-      '@clerc/plugin-help': 0.44.0(@clerc/core@0.44.0)
-      '@clerc/plugin-not-found': 0.44.0(@clerc/core@0.44.0)
-      '@clerc/plugin-strict-flags': 0.44.0(@clerc/core@0.44.0)
-      '@clerc/plugin-version': 0.44.0(@clerc/core@0.44.0)
-
-  cli-cursor@3.1.0:
-    dependencies:
-      restore-cursor: 3.1.0
-
   cli-cursor@4.0.0:
     dependencies:
       restore-cursor: 4.0.0
@@ -13264,12 +10466,6 @@ snapshots:
 
   client-only@0.0.1: {}
 
-  cliui@6.0.0:
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 6.2.0
-
   cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
@@ -13284,18 +10480,16 @@ snapshots:
 
   clone@1.0.4: {}
 
-  clsx@1.2.1: {}
-
-  clsx@2.0.0: {}
-
   clsx@2.1.1: {}
 
-  cmdk@1.0.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  cmdk@1.0.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
+      use-sync-external-store: 1.4.0(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
@@ -13308,63 +10502,25 @@ snapshots:
 
   collapse-white-space@2.1.0: {}
 
-  color-convert@1.9.3:
-    dependencies:
-      color-name: 1.1.3
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
 
-  color-name@1.1.3: {}
-
   color-name@1.1.4: {}
 
-  color-string@1.9.1:
-    dependencies:
-      color-name: 1.1.4
-      simple-swizzle: 0.2.2
-
-  color@4.2.3:
-    dependencies:
-      color-convert: 2.0.1
-      color-string: 1.9.1
-
-  colorette@1.4.0: {}
-
   comma-separated-tokens@2.0.3: {}
 
-  command-exists@1.2.9: {}
-
   commander@10.0.1: {}
 
+  commander@12.1.0: {}
+
   commander@2.20.3: {}
 
   commander@4.1.1: {}
 
-  commander@9.5.0: {}
-
-  comment-parser@1.4.1: {}
-
   commondir@1.0.1: {}
 
-  compressible@2.0.18:
-    dependencies:
-      mime-db: 1.52.0
-
-  compression@1.7.4:
-    dependencies:
-      accepts: 1.3.8
-      bytes: 3.0.0
-      compressible: 2.0.18
-      debug: 2.6.9
-      on-headers: 1.0.2
-      safe-buffer: 5.1.2
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  compute-scroll-into-view@3.1.0: {}
+  compute-scroll-into-view@3.1.1: {}
 
   concat-map@0.0.1: {}
 
@@ -13374,13 +10530,13 @@ snapshots:
       date-fns: 2.30.0
       lodash: 4.17.21
       rxjs: 7.8.1
-      shell-quote: 1.8.1
+      shell-quote: 1.8.2
       spawn-command: 0.0.2
       supports-color: 8.1.1
       tree-kill: 1.2.2
       yargs: 17.7.2
 
-  confbox@0.1.7: {}
+  confbox@0.1.8: {}
 
   connect@3.7.0:
     dependencies:
@@ -13391,15 +10547,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  consola@3.2.3: {}
+  consola@3.4.0: {}
 
   convert-source-map@2.0.0: {}
 
-  core-js-compat@3.37.1:
+  core-js-compat@3.40.0:
     dependencies:
-      browserslist: 4.23.1
-
-  core-util-is@1.0.3: {}
+      browserslist: 4.24.4
 
   cosmiconfig@5.2.1:
     dependencies:
@@ -13410,26 +10564,23 @@ snapshots:
 
   cosmiconfig@8.3.6(typescript@4.9.5):
     dependencies:
-      import-fresh: 3.3.0
+      import-fresh: 3.3.1
       js-yaml: 4.1.0
       parse-json: 5.2.0
       path-type: 4.0.0
     optionalDependencies:
       typescript: 4.9.5
 
-  cosmiconfig@9.0.0(typescript@5.4.5):
+  cosmiconfig@9.0.0(typescript@5.7.3):
     dependencies:
       env-paths: 2.2.1
-      import-fresh: 3.3.0
+      import-fresh: 3.3.1
       js-yaml: 4.1.0
       parse-json: 5.2.0
     optionalDependencies:
-      typescript: 5.4.5
-
-  country-flag-icons@1.5.12: {}
+      typescript: 5.7.3
 
-  create-require@1.1.1:
-    optional: true
+  country-flag-icons@1.5.14: {}
 
   critters@0.0.22:
     dependencies:
@@ -13438,14 +10589,14 @@ snapshots:
       dom-serializer: 2.0.0
       domhandler: 5.0.3
       htmlparser2: 8.0.2
-      postcss: 8.4.38
+      postcss: 8.5.1
       postcss-media-query-parser: 0.2.3
 
   cross-env@7.0.3:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
 
-  cross-spawn@7.0.3:
+  cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
@@ -13456,14 +10607,14 @@ snapshots:
       boolbase: 1.0.0
       css-what: 6.1.0
       domhandler: 5.0.3
-      domutils: 3.1.0
+      domutils: 3.2.2
       nth-check: 2.1.1
 
   css-what@6.1.0: {}
 
   cssesc@3.0.0: {}
 
-  csstype@3.1.2: {}
+  csstype@3.1.3: {}
 
   d3-array@3.2.4:
     dependencies:
@@ -13509,52 +10660,24 @@ snapshots:
 
   date-fns@2.30.0:
     dependencies:
-      '@babel/runtime': 7.24.7
-
-  dayjs@1.11.11: {}
-
-  debounce@1.2.1: {}
+      '@babel/runtime': 7.26.7
 
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
 
-  debug@3.2.7:
+  debug@4.4.0:
     dependencies:
       ms: 2.1.3
 
-  debug@4.3.4:
-    dependencies:
-      ms: 2.1.2
-
-  debug@4.3.5:
-    dependencies:
-      ms: 2.1.2
-
-  debug@4.3.7:
-    dependencies:
-      ms: 2.1.3
-
-  decamelize@1.2.0: {}
-
   decimal.js-light@2.5.1: {}
 
   decode-named-character-reference@1.0.2:
     dependencies:
       character-entities: 2.0.2
 
-  decompress-response@6.0.0:
-    dependencies:
-      mimic-response: 3.1.0
-
   deep-eql@5.0.2: {}
 
-  deep-extend@0.6.0: {}
-
-  deep-is@0.1.4: {}
-
-  deepmerge-ts@7.0.3: {}
-
   deepmerge@4.3.1: {}
 
   defaults@1.0.4:
@@ -13569,8 +10692,6 @@ snapshots:
       escodegen: 2.1.0
       esprima: 4.0.1
 
-  denodeify@1.2.1: {}
-
   depd@2.0.0: {}
 
   dequal@2.0.3: {}
@@ -13581,8 +10702,6 @@ snapshots:
 
   detect-libc@1.0.3: {}
 
-  detect-libc@2.0.3: {}
-
   detect-node-es@1.1.0: {}
 
   devlop@1.1.0:
@@ -13591,17 +10710,8 @@ snapshots:
 
   devtools-protocol@0.0.1367902: {}
 
-  didyoumean2@6.0.1:
-    dependencies:
-      '@babel/runtime': 7.24.7
-      fastest-levenshtein: 1.0.16
-      lodash.deburr: 4.1.0
-
   didyoumean@1.2.2: {}
 
-  diff@4.0.2:
-    optional: true
-
   diff@5.2.0: {}
 
   dir-glob@3.0.1:
@@ -13610,14 +10720,10 @@ snapshots:
 
   dlv@1.1.3: {}
 
-  doctrine@3.0.0:
-    dependencies:
-      esutils: 2.0.3
-
   dom-helpers@5.2.1:
     dependencies:
-      '@babel/runtime': 7.24.7
-      csstype: 3.1.2
+      '@babel/runtime': 7.26.7
+      csstype: 3.1.3
 
   dom-serializer@2.0.0:
     dependencies:
@@ -13631,35 +10737,35 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
-  domutils@3.1.0:
+  domutils@3.2.2:
     dependencies:
       dom-serializer: 2.0.0
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
-  dotenv@16.4.5: {}
+  dotenv@16.4.7: {}
 
   eastasianwidth@0.2.0: {}
 
   ee-first@1.1.1: {}
 
-  electron-to-chromium@1.4.803: {}
+  electron-to-chromium@1.5.91: {}
 
-  embla-carousel-autoplay@8.1.5(embla-carousel@8.1.5):
+  embla-carousel-autoplay@8.5.2(embla-carousel@8.5.2):
     dependencies:
-      embla-carousel: 8.1.5
+      embla-carousel: 8.5.2
 
-  embla-carousel-react@8.1.5(react@18.3.1):
+  embla-carousel-react@8.5.2(react@18.3.1):
     dependencies:
-      embla-carousel: 8.1.5
-      embla-carousel-reactive-utils: 8.1.5(embla-carousel@8.1.5)
+      embla-carousel: 8.5.2
+      embla-carousel-reactive-utils: 8.5.2(embla-carousel@8.5.2)
       react: 18.3.1
 
-  embla-carousel-reactive-utils@8.1.5(embla-carousel@8.1.5):
+  embla-carousel-reactive-utils@8.5.2(embla-carousel@8.5.2):
     dependencies:
-      embla-carousel: 8.1.5
+      embla-carousel: 8.5.2
 
-  embla-carousel@8.1.5: {}
+  embla-carousel@8.5.2: {}
 
   emoji-regex@10.4.0: {}
 
@@ -13669,21 +10775,16 @@ snapshots:
 
   encodeurl@1.0.2: {}
 
+  encodeurl@2.0.0: {}
+
   end-of-stream@1.4.4:
     dependencies:
       once: 1.4.0
 
-  enhanced-resolve@5.17.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.2.1
-
   entities@4.5.0: {}
 
   env-paths@2.2.1: {}
 
-  envinfo@7.13.0: {}
-
   error-ex@1.3.2:
     dependencies:
       is-arrayish: 0.2.1
@@ -13692,12 +10793,21 @@ snapshots:
     dependencies:
       stackframe: 1.3.4
 
-  errorhandler@1.5.1:
+  es-module-lexer@1.6.0: {}
+
+  esast-util-from-estree@2.0.0:
     dependencies:
-      accepts: 1.3.8
-      escape-html: 1.0.3
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      unist-util-position-from-estree: 2.0.0
 
-  es-module-lexer@1.5.4: {}
+  esast-util-from-js@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      acorn: 8.14.0
+      esast-util-from-estree: 2.0.0
+      vfile-message: 4.0.2
 
   esbuild@0.17.19:
     optionalDependencies:
@@ -13750,14 +10860,37 @@ snapshots:
       '@esbuild/win32-ia32': 0.21.5
       '@esbuild/win32-x64': 0.21.5
 
-  escalade@3.1.1: {}
-
-  escalade@3.1.2: {}
+  esbuild@0.23.1:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.23.1
+      '@esbuild/android-arm': 0.23.1
+      '@esbuild/android-arm64': 0.23.1
+      '@esbuild/android-x64': 0.23.1
+      '@esbuild/darwin-arm64': 0.23.1
+      '@esbuild/darwin-x64': 0.23.1
+      '@esbuild/freebsd-arm64': 0.23.1
+      '@esbuild/freebsd-x64': 0.23.1
+      '@esbuild/linux-arm': 0.23.1
+      '@esbuild/linux-arm64': 0.23.1
+      '@esbuild/linux-ia32': 0.23.1
+      '@esbuild/linux-loong64': 0.23.1
+      '@esbuild/linux-mips64el': 0.23.1
+      '@esbuild/linux-ppc64': 0.23.1
+      '@esbuild/linux-riscv64': 0.23.1
+      '@esbuild/linux-s390x': 0.23.1
+      '@esbuild/linux-x64': 0.23.1
+      '@esbuild/netbsd-x64': 0.23.1
+      '@esbuild/openbsd-arm64': 0.23.1
+      '@esbuild/openbsd-x64': 0.23.1
+      '@esbuild/sunos-x64': 0.23.1
+      '@esbuild/win32-arm64': 0.23.1
+      '@esbuild/win32-ia32': 0.23.1
+      '@esbuild/win32-x64': 0.23.1
+
+  escalade@3.2.0: {}
 
   escape-html@1.0.3: {}
 
-  escape-string-regexp@1.0.5: {}
-
   escape-string-regexp@2.0.0: {}
 
   escape-string-regexp@4.0.0: {}
@@ -13772,521 +10905,8 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-compat-utils@0.5.1(eslint@9.2.0):
-    dependencies:
-      eslint: 9.2.0
-      semver: 7.6.2
-
-  eslint-config-flat-gitignore@0.1.5:
-    dependencies:
-      find-up: 7.0.0
-      parse-gitignore: 2.0.0
-
-  eslint-flat-config-utils@0.2.5:
-    dependencies:
-      '@types/eslint': 8.56.10
-      pathe: 1.1.2
-
-  eslint-formatting-reporter@0.0.0(eslint@9.2.0):
-    dependencies:
-      eslint: 9.2.0
-      prettier-linter-helpers: 1.0.0
-
-  eslint-import-resolver-node@0.3.9:
-    dependencies:
-      debug: 3.2.7
-      is-core-module: 2.13.1
-      resolve: 1.22.8
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-merge-processors@0.1.0(eslint@9.2.0):
-    dependencies:
-      eslint: 9.2.0
-
-  eslint-parser-plain@0.1.0: {}
-
-  eslint-plugin-command@0.2.3(eslint@9.2.0):
-    dependencies:
-      '@es-joy/jsdoccomment': 0.43.1
-      eslint: 9.2.0
-
-  eslint-plugin-es-x@7.7.0(eslint@9.2.0):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      '@eslint-community/regexpp': 4.10.0
-      eslint: 9.2.0
-      eslint-compat-utils: 0.5.1(eslint@9.2.0)
-
-  eslint-plugin-eslint-comments@3.2.0(eslint@9.2.0):
-    dependencies:
-      escape-string-regexp: 1.0.5
-      eslint: 9.2.0
-      ignore: 5.3.1
-
-  eslint-plugin-format@0.1.2(eslint@9.2.0):
-    dependencies:
-      '@dprint/formatter': 0.3.0
-      '@dprint/markdown': 0.17.1
-      '@dprint/toml': 0.6.2
-      eslint: 9.2.0
-      eslint-formatting-reporter: 0.0.0(eslint@9.2.0)
-      eslint-parser-plain: 0.1.0
-      prettier: 3.3.2
-      synckit: 0.9.0
-
-  eslint-plugin-import-x@0.5.1(eslint@9.2.0)(typescript@5.4.5):
-    dependencies:
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      debug: 4.3.4
-      doctrine: 3.0.0
-      eslint: 9.2.0
-      eslint-import-resolver-node: 0.3.9
-      get-tsconfig: 4.7.5
-      is-glob: 4.0.3
-      minimatch: 9.0.4
-      semver: 7.6.2
-      tslib: 2.6.2
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  eslint-plugin-import-x@0.5.3(eslint@9.2.0)(typescript@5.4.5):
-    dependencies:
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      debug: 4.3.5
-      doctrine: 3.0.0
-      eslint: 9.2.0
-      eslint-import-resolver-node: 0.3.9
-      get-tsconfig: 4.7.5
-      is-glob: 4.0.3
-      minimatch: 9.0.4
-      semver: 7.6.2
-      stable-hash: 0.0.4
-      tslib: 2.6.2
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  eslint-plugin-jsdoc@48.2.12(eslint@9.2.0):
-    dependencies:
-      '@es-joy/jsdoccomment': 0.43.1
-      are-docs-informative: 0.0.2
-      comment-parser: 1.4.1
-      debug: 4.3.4
-      escape-string-regexp: 4.0.0
-      eslint: 9.2.0
-      esquery: 1.5.0
-      semver: 7.6.2
-      spdx-expression-parse: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-jsdoc@48.5.2(eslint@9.2.0):
-    dependencies:
-      '@es-joy/jsdoccomment': 0.43.1
-      are-docs-informative: 0.0.2
-      comment-parser: 1.4.1
-      debug: 4.3.5
-      escape-string-regexp: 4.0.0
-      eslint: 9.2.0
-      esquery: 1.5.0
-      parse-imports: 2.1.1
-      semver: 7.6.2
-      spdx-expression-parse: 4.0.0
-      synckit: 0.9.0
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-jsonc@2.16.0(eslint@9.2.0):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      eslint: 9.2.0
-      eslint-compat-utils: 0.5.1(eslint@9.2.0)
-      espree: 9.6.1
-      graphemer: 1.4.0
-      jsonc-eslint-parser: 2.4.0
-      natural-compare: 1.4.0
-      synckit: 0.6.2
-
-  eslint-plugin-markdown@5.0.0(eslint@9.2.0):
-    dependencies:
-      eslint: 9.2.0
-      mdast-util-from-markdown: 0.8.5
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-n@17.9.0(eslint@9.2.0):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      enhanced-resolve: 5.17.0
-      eslint: 9.2.0
-      eslint-plugin-es-x: 7.7.0(eslint@9.2.0)
-      get-tsconfig: 4.7.2
-      globals: 15.5.0
-      ignore: 5.3.1
-      minimatch: 9.0.4
-      semver: 7.6.2
-
-  eslint-plugin-no-only-tests@3.1.0: {}
-
-  eslint-plugin-nyxb@1.1.1(eslint@9.2.0):
-    dependencies:
-      '@nyxb/utils': 0.0.4
-      eslint: 9.2.0
-
-  eslint-plugin-nyxb@1.1.3(eslint@9.2.0):
-    dependencies:
-      '@nyxb/utils': 0.0.4
-      eslint: 9.2.0
-
-  eslint-plugin-perfectionist@2.11.0(eslint@9.2.0)(typescript@5.4.5)(vue-eslint-parser@9.4.3(eslint@9.2.0)):
-    dependencies:
-      '@typescript-eslint/utils': 7.1.0(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-      minimatch: 9.0.4
-      natural-compare-lite: 1.4.0
-    optionalDependencies:
-      vue-eslint-parser: 9.4.3(eslint@9.2.0)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  eslint-plugin-react-core@1.5.15(eslint@9.2.0)(typescript@5.4.5):
-    dependencies:
-      '@eslint-react/ast': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/core': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/jsx': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/shared': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/tools': 1.5.15
-      '@eslint-react/types': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/var': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/type-utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-      string-ts: 2.1.1
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-      valibot: 0.31.0
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-react-dom@1.5.15(eslint@9.2.0)(typescript@5.4.5):
-    dependencies:
-      '@eslint-react/ast': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/core': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/jsx': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/shared': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/tools': 1.5.15
-      '@eslint-react/types': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/var': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-      string-ts: 2.1.1
-      valibot: 0.31.0
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-react-hooks-extra@1.5.15(eslint@9.2.0)(typescript@5.4.5):
-    dependencies:
-      '@eslint-react/ast': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/core': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/jsx': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/shared': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/tools': 1.5.15
-      '@eslint-react/types': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/var': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/type-utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-      string-ts: 2.1.1
-      valibot: 0.31.0
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-react-hooks@5.1.0-rc-3f1436cca1-20240516(eslint@9.2.0):
-    dependencies:
-      eslint: 9.2.0
-
-  eslint-plugin-react-naming-convention@1.5.15(eslint@9.2.0)(typescript@5.4.5):
-    dependencies:
-      '@eslint-react/ast': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/core': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/jsx': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/shared': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@eslint-react/tools': 1.5.15
-      '@eslint-react/types': 1.5.15(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/type-utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-      string-ts: 2.1.1
-      valibot: 0.31.0
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-react-refresh@0.4.7(eslint@9.2.0):
-    dependencies:
-      eslint: 9.2.0
-
-  eslint-plugin-regexp@2.6.0(eslint@9.2.0):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      '@eslint-community/regexpp': 4.10.0
-      comment-parser: 1.4.1
-      eslint: 9.2.0
-      jsdoc-type-pratt-parser: 4.0.0
-      refa: 0.12.1
-      regexp-ast-analysis: 0.7.1
-      scslre: 0.3.0
-
-  eslint-plugin-tailwindcss@3.17.4(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5))):
-    dependencies:
-      fast-glob: 3.3.2
-      postcss: 8.4.38
-      tailwindcss: 3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5))
-
-  eslint-plugin-toml@0.11.0(eslint@9.2.0):
-    dependencies:
-      debug: 4.3.4
-      eslint: 9.2.0
-      eslint-compat-utils: 0.5.1(eslint@9.2.0)
-      lodash: 4.17.21
-      toml-eslint-parser: 0.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-toml@0.11.1(eslint@9.2.0):
-    dependencies:
-      debug: 4.3.5
-      eslint: 9.2.0
-      eslint-compat-utils: 0.5.1(eslint@9.2.0)
-      lodash: 4.17.21
-      toml-eslint-parser: 0.10.0
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-unicorn@53.0.0(eslint@9.2.0):
-    dependencies:
-      '@babel/helper-validator-identifier': 7.24.7
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      '@eslint/eslintrc': 3.1.0
-      ci-info: 4.0.0
-      clean-regexp: 1.0.0
-      core-js-compat: 3.37.1
-      eslint: 9.2.0
-      esquery: 1.5.0
-      indent-string: 4.0.0
-      is-builtin-module: 3.2.1
-      jsesc: 3.0.2
-      pluralize: 8.0.0
-      read-pkg-up: 7.0.1
-      regexp-tree: 0.1.27
-      regjsparser: 0.10.0
-      semver: 7.6.2
-      strip-indent: 3.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-unicorn@54.0.0(eslint@9.2.0):
-    dependencies:
-      '@babel/helper-validator-identifier': 7.24.7
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      '@eslint/eslintrc': 3.1.0
-      ci-info: 4.0.0
-      clean-regexp: 1.0.0
-      core-js-compat: 3.37.1
-      eslint: 9.2.0
-      esquery: 1.5.0
-      indent-string: 4.0.0
-      is-builtin-module: 3.2.1
-      jsesc: 3.0.2
-      pluralize: 8.0.0
-      read-pkg-up: 7.0.1
-      regexp-tree: 0.1.27
-      regjsparser: 0.10.0
-      semver: 7.6.2
-      strip-indent: 3.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-unused-imports@3.2.0(@typescript-eslint/eslint-plugin@7.13.0(@typescript-eslint/parser@7.13.0(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0):
-    dependencies:
-      eslint: 9.2.0
-      eslint-rule-composer: 0.3.0
-    optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 7.13.0(@typescript-eslint/parser@5.62.0(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5)
-
-  eslint-plugin-unused-imports@4.0.0(@typescript-eslint/eslint-plugin@8.0.0-alpha.40(@typescript-eslint/parser@8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0):
-    dependencies:
-      eslint: 9.2.0
-      eslint-rule-composer: 0.3.0
-    optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.0.0-alpha.40(@typescript-eslint/parser@8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5)
-
-  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@7.13.0(@typescript-eslint/parser@7.13.0(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5)(vitest@2.1.2(@types/node@17.0.45)(terser@5.31.1)):
-    dependencies:
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-    optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 7.13.0(@typescript-eslint/parser@5.62.0(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5)
-      vitest: 2.1.2(@types/node@17.0.45)(terser@5.31.1)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@8.0.0-alpha.40(@typescript-eslint/parser@8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5)(vitest@2.1.2(@types/node@20.11.24)(terser@5.31.1)):
-    dependencies:
-      '@typescript-eslint/utils': 7.13.0(eslint@9.2.0)(typescript@5.4.5)
-      eslint: 9.2.0
-    optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.0.0-alpha.40(@typescript-eslint/parser@8.0.0-alpha.40(eslint@9.2.0)(typescript@5.4.5))(eslint@9.2.0)(typescript@5.4.5)
-      vitest: 2.1.2(@types/node@20.11.24)(terser@5.31.1)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  eslint-plugin-vue@9.26.0(eslint@9.2.0):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      eslint: 9.2.0
-      globals: 13.24.0
-      natural-compare: 1.4.0
-      nth-check: 2.1.1
-      postcss-selector-parser: 6.1.0
-      semver: 7.6.2
-      vue-eslint-parser: 9.4.3(eslint@9.2.0)
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-vue@9.27.0(eslint@9.2.0):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      eslint: 9.2.0
-      globals: 13.24.0
-      natural-compare: 1.4.0
-      nth-check: 2.1.1
-      postcss-selector-parser: 6.1.0
-      semver: 7.6.2
-      vue-eslint-parser: 9.4.3(eslint@9.2.0)
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-yml@1.14.0(eslint@9.2.0):
-    dependencies:
-      debug: 4.3.4
-      eslint: 9.2.0
-      eslint-compat-utils: 0.5.1(eslint@9.2.0)
-      lodash: 4.17.21
-      natural-compare: 1.4.0
-      yaml-eslint-parser: 1.2.3
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.4.29)(eslint@9.2.0):
-    dependencies:
-      '@vue/compiler-sfc': 3.4.29
-      eslint: 9.2.0
-
-  eslint-rule-composer@0.3.0: {}
-
-  eslint-scope@7.2.2:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-
-  eslint-scope@8.0.1:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-
-  eslint-visitor-keys@3.4.3: {}
-
-  eslint-visitor-keys@4.0.0: {}
-
-  eslint@9.2.0:
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.2.0)
-      '@eslint-community/regexpp': 4.10.0
-      '@eslint/eslintrc': 3.1.0
-      '@eslint/js': 9.2.0
-      '@humanwhocodes/config-array': 0.13.0
-      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.2.4
-      '@nodelib/fs.walk': 1.2.8
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
-      escape-string-regexp: 4.0.0
-      eslint-scope: 8.0.1
-      eslint-visitor-keys: 4.0.0
-      espree: 10.0.1
-      esquery: 1.5.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 8.0.0
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      ignore: 5.3.1
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.3
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
-    transitivePeerDependencies:
-      - supports-color
-
-  espree@10.0.1:
-    dependencies:
-      acorn: 8.12.0
-      acorn-jsx: 5.3.2(acorn@8.12.0)
-      eslint-visitor-keys: 4.0.0
-
-  espree@10.1.0:
-    dependencies:
-      acorn: 8.12.0
-      acorn-jsx: 5.3.2(acorn@8.12.0)
-      eslint-visitor-keys: 4.0.0
-
-  espree@9.6.1:
-    dependencies:
-      acorn: 8.12.0
-      acorn-jsx: 5.3.2(acorn@8.12.0)
-      eslint-visitor-keys: 3.4.3
-
   esprima@4.0.1: {}
 
-  esquery@1.5.0:
-    dependencies:
-      estraverse: 5.3.0
-
-  esrecurse@4.3.0:
-    dependencies:
-      estraverse: 5.3.0
-
   estraverse@5.3.0: {}
 
   estree-util-attach-comments@3.0.0:
@@ -14302,26 +10922,29 @@ snapshots:
 
   estree-util-is-identifier-name@3.0.0: {}
 
+  estree-util-scope@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      devlop: 1.1.0
+
   estree-util-to-js@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
-      astring: 1.8.6
+      astring: 1.9.0
       source-map: 0.7.4
 
-  estree-util-value-to-estree@3.1.2:
+  estree-util-value-to-estree@3.3.2:
     dependencies:
       '@types/estree': 1.0.6
 
   estree-util-visit@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
-      '@types/unist': 3.0.2
-
-  estree-walker@2.0.2: {}
+      '@types/unist': 3.0.3
 
   estree-walker@3.0.3:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
   esutils@2.0.3: {}
 
@@ -14333,7 +10956,7 @@ snapshots:
 
   execa@5.1.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 2.1.0
       is-stream: 2.0.1
@@ -14345,7 +10968,7 @@ snapshots:
 
   execa@7.2.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 4.3.1
       is-stream: 3.0.0
@@ -14355,19 +10978,9 @@ snapshots:
       signal-exit: 3.0.7
       strip-final-newline: 3.0.0
 
-  execa@8.0.1:
-    dependencies:
-      cross-spawn: 7.0.3
-      get-stream: 8.0.1
-      human-signals: 5.0.0
-      is-stream: 3.0.0
-      merge-stream: 2.0.0
-      npm-run-path: 5.3.0
-      onetime: 6.0.0
-      signal-exit: 4.1.0
-      strip-final-newline: 3.0.0
+  expect-type@1.1.0: {}
 
-  expand-template@2.0.3: {}
+  exponential-backoff@3.1.1: {}
 
   extend-shallow@2.0.1:
     dependencies:
@@ -14377,7 +10990,7 @@ snapshots:
 
   extract-zip@2.0.1:
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
       get-stream: 5.2.0
       yauzl: 2.10.0
     optionalDependencies:
@@ -14385,33 +10998,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  fast-deep-equal@3.1.3: {}
-
-  fast-diff@1.3.0: {}
+  fast-content-type-parse@2.0.1: {}
 
-  fast-equals@5.0.1: {}
+  fast-equals@5.2.2: {}
 
   fast-fifo@1.3.2: {}
 
-  fast-glob@3.3.2:
+  fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       '@nodelib/fs.walk': 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
-      micromatch: 4.0.5
+      micromatch: 4.0.8
 
   fast-json-stable-stringify@2.1.0: {}
 
-  fast-levenshtein@2.0.6: {}
-
-  fast-xml-parser@4.4.0:
-    dependencies:
-      strnum: 1.0.5
-
-  fastest-levenshtein@1.0.16: {}
-
-  fastq@1.15.0:
+  fastq@1.19.0:
     dependencies:
       reusify: 1.0.4
 
@@ -14427,7 +11030,7 @@ snapshots:
     dependencies:
       pend: 1.2.0
 
-  fdir@6.4.0(picomatch@4.0.2):
+  fdir@6.4.3(picomatch@4.0.2):
     optionalDependencies:
       picomatch: 4.0.2
 
@@ -14436,16 +11039,7 @@ snapshots:
       node-domexception: 1.0.0
       web-streams-polyfill: 3.3.3
 
-  figures@5.0.0:
-    dependencies:
-      escape-string-regexp: 5.0.0
-      is-unicode-supported: 1.3.0
-
-  file-entry-cache@8.0.0:
-    dependencies:
-      flat-cache: 4.0.1
-
-  fill-range@7.0.1:
+  fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
@@ -14481,26 +11075,13 @@ snapshots:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
-  find-up@7.0.0:
-    dependencies:
-      locate-path: 7.2.0
-      path-exists: 5.0.0
-      unicorn-magic: 0.1.0
-
-  flat-cache@4.0.1:
-    dependencies:
-      flatted: 3.3.1
-      keyv: 4.5.4
-
-  flatted@3.3.1: {}
-
   flow-enums-runtime@0.0.6: {}
 
-  flow-parser@0.238.0: {}
+  flow-parser@0.259.1: {}
 
-  foreground-child@3.1.1:
+  foreground-child@3.3.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
   format@0.2.2: {}
@@ -14513,28 +11094,30 @@ snapshots:
 
   framer-motion@10.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
     optionalDependencies:
       '@emotion/is-prop-valid': 0.8.8
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  fresh@0.5.2: {}
+  framer-motion@11.18.2(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      motion-dom: 11.18.1
+      motion-utils: 11.18.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@emotion/is-prop-valid': 0.8.8
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  fs-constants@1.0.0: {}
+  fresh@0.5.2: {}
 
-  fs-extra@11.2.0:
+  fs-extra@11.3.0:
     dependencies:
       graceful-fs: 4.2.11
       jsonfile: 6.1.0
       universalify: 2.0.1
 
-  fs-extra@8.1.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 4.0.0
-      universalify: 0.1.2
-
   fs-minipass@2.1.0:
     dependencies:
       minipass: 3.3.6
@@ -14546,58 +11129,49 @@ snapshots:
 
   function-bind@1.1.2: {}
 
-  geist@1.3.0(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
+  geist@1.3.1(next@14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
     dependencies:
-      next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
 
-  get-func-name@2.0.2: {}
-
   get-nonce@1.0.1: {}
 
   get-own-enumerable-keys@1.0.0: {}
 
+  get-package-type@0.1.0: {}
+
   get-stream@5.2.0:
     dependencies:
-      pump: 3.0.0
+      pump: 3.0.2
 
   get-stream@6.0.1: {}
 
-  get-stream@8.0.1: {}
-
-  get-tsconfig@4.7.2:
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-
-  get-tsconfig@4.7.5:
+  get-tsconfig@4.10.0:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
-  get-uri@6.0.3:
+  get-uri@6.0.4:
     dependencies:
       basic-ftp: 5.0.5
       data-uri-to-buffer: 6.0.2
-      debug: 4.3.7
-      fs-extra: 11.2.0
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
-  giget@1.2.3:
+  giget@1.2.4:
     dependencies:
       citty: 0.1.6
-      consola: 3.2.3
+      consola: 3.4.0
       defu: 6.1.4
-      node-fetch-native: 1.6.4
-      nypm: 0.3.9
-      ohash: 1.1.3
-      pathe: 1.1.2
+      node-fetch-native: 1.6.6
+      nypm: 0.5.2
+      ohash: 1.1.4
+      pathe: 2.0.2
       tar: 6.2.1
 
-  github-from-package@0.0.0: {}
-
   github-slugger@2.0.0: {}
 
   glob-parent@5.1.2:
@@ -14608,17 +11182,18 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob@10.3.10:
+  glob@10.4.5:
     dependencies:
-      foreground-child: 3.1.1
-      jackspeak: 2.3.6
-      minimatch: 9.0.4
-      minipass: 7.0.4
-      path-scurry: 1.10.1
+      foreground-child: 3.3.0
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
 
-  glob@11.0.0:
+  glob@11.0.1:
     dependencies:
-      foreground-child: 3.1.1
+      foreground-child: 3.3.0
       jackspeak: 4.0.2
       minimatch: 10.0.1
       minipass: 7.1.2
@@ -14639,26 +11214,16 @@ snapshots:
       fs.realpath: 1.0.0
       minimatch: 8.0.4
       minipass: 4.2.8
-      path-scurry: 1.10.1
+      path-scurry: 1.11.1
 
   globals@11.12.0: {}
 
-  globals@13.24.0:
-    dependencies:
-      type-fest: 0.20.2
-
-  globals@14.0.0: {}
-
-  globals@15.5.0: {}
-
-  globals@15.8.0: {}
-
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.2
-      ignore: 5.3.1
+      fast-glob: 3.3.3
+      ignore: 5.3.2
       merge2: 1.4.1
       slash: 3.0.0
 
@@ -14666,8 +11231,6 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
-  graphemer@1.4.0: {}
-
   gray-matter@4.0.3:
     dependencies:
       js-yaml: 3.14.1
@@ -14675,13 +11238,11 @@ snapshots:
       section-matter: 1.0.0
       strip-bom-string: 1.0.0
 
-  gsap@3.12.5: {}
-
-  has-flag@3.0.0: {}
+  gsap@3.12.7: {}
 
   has-flag@4.0.0: {}
 
-  hasown@2.0.0:
+  hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
 
@@ -14691,17 +11252,17 @@ snapshots:
       devlop: 1.1.0
       hast-util-from-parse5: 8.0.2
       parse5: 7.2.1
-      vfile: 6.0.1
+      vfile: 6.0.3
       vfile-message: 4.0.2
 
   hast-util-from-parse5@8.0.2:
     dependencies:
       '@types/hast': 3.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       devlop: 1.1.0
       hastscript: 9.0.0
       property-information: 6.5.0
-      vfile: 6.0.1
+      vfile: 6.0.3
       vfile-location: 5.0.3
       web-namespaces: 2.0.1
 
@@ -14717,7 +11278,7 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
 
-  hast-util-to-estree@3.1.0:
+  hast-util-to-estree@3.1.1:
     dependencies:
       '@types/estree': 1.0.6
       '@types/estree-jsx': 1.0.5
@@ -14728,20 +11289,20 @@ snapshots:
       estree-util-is-identifier-name: 3.0.0
       hast-util-whitespace: 3.0.0
       mdast-util-mdx-expression: 2.0.1
-      mdast-util-mdx-jsx: 3.1.3
+      mdast-util-mdx-jsx: 3.2.0
       mdast-util-mdxjs-esm: 2.0.1
       property-information: 6.5.0
       space-separated-tokens: 2.0.2
-      style-to-object: 0.4.4
+      style-to-object: 1.0.8
       unist-util-position: 5.0.0
       zwitch: 2.0.4
     transitivePeerDependencies:
       - supports-color
 
-  hast-util-to-html@9.0.3:
+  hast-util-to-html@9.0.4:
     dependencies:
       '@types/hast': 3.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       ccount: 2.0.1
       comma-separated-tokens: 2.0.3
       hast-util-whitespace: 3.0.0
@@ -14752,17 +11313,17 @@ snapshots:
       stringify-entities: 4.0.4
       zwitch: 2.0.4
 
-  hast-util-to-jsx-runtime@2.3.0:
+  hast-util-to-jsx-runtime@2.3.2:
     dependencies:
       '@types/estree': 1.0.6
       '@types/hast': 3.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       comma-separated-tokens: 2.0.3
       devlop: 1.1.0
       estree-util-is-identifier-name: 3.0.0
       hast-util-whitespace: 3.0.0
       mdast-util-mdx-expression: 2.0.1
-      mdast-util-mdx-jsx: 3.1.3
+      mdast-util-mdx-jsx: 3.2.0
       mdast-util-mdxjs-esm: 2.0.1
       property-information: 6.5.0
       space-separated-tokens: 2.0.2
@@ -14788,33 +11349,21 @@ snapshots:
       property-information: 6.5.0
       space-separated-tokens: 2.0.2
 
-  hermes-estree@0.19.1: {}
-
-  hermes-estree@0.20.1: {}
-
-  hermes-parser@0.19.1:
-    dependencies:
-      hermes-estree: 0.19.1
-
-  hermes-parser@0.20.1:
-    dependencies:
-      hermes-estree: 0.20.1
+  hermes-estree@0.25.1: {}
 
-  hermes-profile-transformer@0.0.6:
+  hermes-parser@0.25.1:
     dependencies:
-      source-map: 0.7.4
+      hermes-estree: 0.25.1
 
   hey-listen@1.0.8: {}
 
-  hosted-git-info@2.8.9: {}
-
   html-void-elements@3.0.0: {}
 
   htmlparser2@8.0.2:
     dependencies:
       domelementtype: 2.3.0
       domhandler: 5.0.3
-      domutils: 3.1.0
+      domutils: 3.2.2
       entities: 4.5.0
 
   http-errors@2.0.0:
@@ -14827,22 +11376,22 @@ snapshots:
 
   http-proxy-agent@7.0.2:
     dependencies:
-      agent-base: 7.1.1
-      debug: 4.3.7
+      agent-base: 7.1.3
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@6.2.1:
     dependencies:
-      agent-base: 7.1.1
-      debug: 4.3.4
+      agent-base: 7.1.3
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
-  https-proxy-agent@7.0.5:
+  https-proxy-agent@7.0.6:
     dependencies:
-      agent-base: 7.1.1
-      debug: 4.3.7
+      agent-base: 7.1.3
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
@@ -14850,13 +11399,11 @@ snapshots:
 
   human-signals@4.3.1: {}
 
-  human-signals@5.0.0: {}
-
   ieee754@1.2.1: {}
 
-  ignore@5.3.1: {}
+  ignore@5.3.2: {}
 
-  image-size@1.1.1:
+  image-size@1.2.0:
     dependencies:
       queue: 6.0.2
 
@@ -14865,17 +11412,13 @@ snapshots:
       caller-path: 2.0.0
       resolve-from: 3.0.0
 
-  import-fresh@3.3.0:
+  import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
   imurmurhash@0.1.4: {}
 
-  indent-string@4.0.0: {}
-
-  indent-string@5.0.0: {}
-
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -14883,17 +11426,16 @@ snapshots:
 
   inherits@2.0.4: {}
 
-  ini@1.3.8: {}
-
-  inline-style-parser@0.1.1: {}
-
   inline-style-parser@0.2.4: {}
 
-  input-format@0.3.10:
+  input-format@0.3.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       prop-types: 15.8.1
+    optionalDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  input-otp@1.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  input-otp@1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -14909,15 +11451,8 @@ snapshots:
       jsbn: 1.1.0
       sprintf-js: 1.1.3
 
-  is-alphabetical@1.0.4: {}
-
   is-alphabetical@2.0.1: {}
 
-  is-alphanumerical@1.0.4:
-    dependencies:
-      is-alphabetical: 1.0.4
-      is-decimal: 1.0.4
-
   is-alphanumerical@2.0.1:
     dependencies:
       is-alphabetical: 2.0.1
@@ -14925,23 +11460,15 @@ snapshots:
 
   is-arrayish@0.2.1: {}
 
-  is-arrayish@0.3.2: {}
-
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
 
   is-buffer@2.0.5: {}
 
-  is-builtin-module@3.2.1:
-    dependencies:
-      builtin-modules: 3.3.0
-
-  is-core-module@2.13.1:
+  is-core-module@2.16.1:
     dependencies:
-      hasown: 2.0.0
-
-  is-decimal@1.0.4: {}
+      hasown: 2.0.2
 
   is-decimal@2.0.1: {}
 
@@ -14953,28 +11480,20 @@ snapshots:
 
   is-extglob@2.1.1: {}
 
-  is-fullwidth-code-point@2.0.0: {}
-
   is-fullwidth-code-point@3.0.0: {}
 
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
 
-  is-hexadecimal@1.0.4: {}
-
   is-hexadecimal@2.0.1: {}
 
-  is-interactive@1.0.0: {}
-
   is-interactive@2.0.0: {}
 
   is-number@7.0.0: {}
 
   is-obj@3.0.0: {}
 
-  is-path-inside@3.0.3: {}
-
   is-plain-obj@4.1.0: {}
 
   is-plain-object@2.0.4:
@@ -14983,38 +11502,42 @@ snapshots:
 
   is-platform@1.0.0: {}
 
-  is-reference@3.0.2:
-    dependencies:
-      '@types/estree': 1.0.6
-
   is-regexp@3.1.0: {}
 
   is-stream@2.0.1: {}
 
   is-stream@3.0.0: {}
 
-  is-unicode-supported@0.1.0: {}
-
   is-unicode-supported@1.3.0: {}
 
-  is-wsl@1.1.0: {}
-
   is-wsl@2.2.0:
     dependencies:
       is-docker: 2.2.1
 
-  isarray@1.0.0: {}
-
   isexe@2.0.0: {}
 
   isobject@3.0.1: {}
 
-  its-fine@1.2.5(react@18.3.1):
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-instrument@5.2.1:
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/parser': 7.26.7
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-coverage: 3.2.2
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  its-fine@1.2.5(@types/react@18.3.18)(react@18.3.1):
     dependencies:
-      '@types/react-reconciler': 0.28.8
+      '@types/react-reconciler': 0.28.9(@types/react@18.3.18)
       react: 18.3.1
+    transitivePeerDependencies:
+      - '@types/react'
 
-  jackspeak@2.3.6:
+  jackspeak@3.4.3:
     dependencies:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
@@ -15024,27 +11547,41 @@ snapshots:
     dependencies:
       '@isaacs/cliui': 8.0.2
 
-  javascript-natural-sort@0.7.1: {}
-
   jest-environment-node@29.7.0:
     dependencies:
       '@jest/environment': 29.7.0
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
       jest-mock: 29.7.0
       jest-util: 29.7.0
 
   jest-get-type@29.6.3: {}
 
+  jest-haste-map@29.7.0:
+    dependencies:
+      '@jest/types': 29.6.3
+      '@types/graceful-fs': 4.1.9
+      '@types/node': 20.17.17
+      anymatch: 3.1.3
+      fb-watchman: 2.0.2
+      graceful-fs: 4.2.11
+      jest-regex-util: 29.6.3
+      jest-util: 29.7.0
+      jest-worker: 29.7.0
+      micromatch: 4.0.8
+      walker: 1.0.8
+    optionalDependencies:
+      fsevents: 2.3.3
+
   jest-message-util@29.7.0:
     dependencies:
-      '@babel/code-frame': 7.24.7
+      '@babel/code-frame': 7.26.2
       '@jest/types': 29.6.3
       '@types/stack-utils': 2.0.3
       chalk: 4.1.2
       graceful-fs: 4.2.11
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       pretty-format: 29.7.0
       slash: 3.0.0
       stack-utils: 2.0.6
@@ -15052,13 +11589,15 @@ snapshots:
   jest-mock@29.7.0:
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
       jest-util: 29.7.0
 
+  jest-regex-util@29.6.3: {}
+
   jest-util@29.7.0:
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
@@ -15075,24 +11614,16 @@ snapshots:
 
   jest-worker@29.7.0:
     dependencies:
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
       jest-util: 29.7.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jiti@1.21.6: {}
+  jiti@1.21.7: {}
 
-  joi@17.13.1:
-    dependencies:
-      '@hapi/hoek': 9.3.0
-      '@hapi/topo': 5.1.0
-      '@sideway/address': 4.1.5
-      '@sideway/formula': 3.0.1
-      '@sideway/pinpoint': 2.0.0
-
-  jotai@2.8.3(@types/react@18.2.61)(react@18.3.1):
+  jotai@2.11.3(@types/react@18.3.18)(react@18.3.1):
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
       react: 18.3.1
 
   joycon@3.1.1: {}
@@ -15114,93 +11645,58 @@ snapshots:
 
   jsc-safe-url@0.2.4: {}
 
-  jscodeshift@0.14.0(@babel/preset-env@7.24.7(@babel/core@7.24.7)):
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.7)
-      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.7)
-      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.7)
-      '@babel/plugin-transform-modules-commonjs': 7.24.7(@babel/core@7.24.7)
-      '@babel/preset-env': 7.24.7(@babel/core@7.24.7)
-      '@babel/preset-flow': 7.24.7(@babel/core@7.24.7)
-      '@babel/preset-typescript': 7.24.7(@babel/core@7.24.7)
-      '@babel/register': 7.24.6(@babel/core@7.24.7)
-      babel-core: 7.0.0-bridge.0(@babel/core@7.24.7)
-      chalk: 4.1.2
-      flow-parser: 0.238.0
+  jscodeshift@17.1.2(@babel/preset-env@7.26.7(@babel/core@7.26.7)):
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/parser': 7.26.7
+      '@babel/plugin-transform-class-properties': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-modules-commonjs': 7.26.3(@babel/core@7.26.7)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.26.6(@babel/core@7.26.7)
+      '@babel/plugin-transform-optional-chaining': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.26.7)
+      '@babel/preset-flow': 7.25.9(@babel/core@7.26.7)
+      '@babel/preset-typescript': 7.26.0(@babel/core@7.26.7)
+      '@babel/register': 7.25.9(@babel/core@7.26.7)
+      flow-parser: 0.259.1
       graceful-fs: 4.2.11
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       neo-async: 2.6.2
-      node-dir: 0.1.17
-      recast: 0.21.5
-      temp: 0.8.4
-      write-file-atomic: 2.4.3
+      picocolors: 1.1.1
+      recast: 0.23.9
+      tmp: 0.2.3
+      write-file-atomic: 5.0.1
+    optionalDependencies:
+      '@babel/preset-env': 7.26.7(@babel/core@7.26.7)
     transitivePeerDependencies:
       - supports-color
 
-  jsdoc-type-pratt-parser@4.0.0: {}
-
-  jsesc@0.5.0: {}
-
-  jsesc@2.5.2: {}
-
   jsesc@3.0.2: {}
 
-  json-buffer@3.0.1: {}
+  jsesc@3.1.0: {}
 
   json-parse-better-errors@1.0.2: {}
 
   json-parse-even-better-errors@2.3.1: {}
 
-  json-schema-traverse@0.4.1: {}
-
-  json-stable-stringify-without-jsonify@1.0.1: {}
-
   json5@2.2.3: {}
 
-  jsonc-eslint-parser@2.4.0:
-    dependencies:
-      acorn: 8.12.0
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      semver: 7.6.2
-
-  jsonfile@4.0.0:
-    optionalDependencies:
-      graceful-fs: 4.2.11
-
   jsonfile@6.1.0:
     dependencies:
       universalify: 2.0.1
     optionalDependencies:
       graceful-fs: 4.2.11
 
-  keyv@4.5.4:
-    dependencies:
-      json-buffer: 3.0.1
-
   kind-of@6.0.3: {}
 
   kleur@3.0.3: {}
 
   kleur@4.1.5: {}
 
-  kons@0.7.1:
-    dependencies:
-      figures: 5.0.0
-      picocolors: 1.0.1
-
-  konva@9.3.11: {}
+  konva@9.3.18: {}
 
   leven@3.1.0: {}
 
-  levn@0.4.1:
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-
-  libphonenumber-js@1.11.4: {}
+  libphonenumber-js@1.11.19: {}
 
   lighthouse-logger@1.4.2:
     dependencies:
@@ -15211,7 +11707,7 @@ snapshots:
 
   lilconfig@2.1.0: {}
 
-  lilconfig@3.1.1: {}
+  lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
 
@@ -15219,11 +11715,6 @@ snapshots:
 
   load-tsconfig@0.2.5: {}
 
-  local-pkg@0.5.0:
-    dependencies:
-      mlly: 1.7.1
-      pkg-types: 1.1.1
-
   locate-path@3.0.0:
     dependencies:
       p-locate: 3.0.0
@@ -15237,22 +11728,12 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
-  locate-path@7.2.0:
-    dependencies:
-      p-locate: 6.0.0
-
   lodash._reinterpolate@3.0.0: {}
 
   lodash.castarray@4.4.0: {}
 
-  lodash.clone@4.5.0: {}
-
   lodash.debounce@4.0.8: {}
 
-  lodash.deburr@4.1.0: {}
-
-  lodash.isequal@4.5.0: {}
-
   lodash.isplainobject@4.0.6: {}
 
   lodash.merge@4.6.2: {}
@@ -15272,35 +11753,22 @@ snapshots:
 
   lodash@4.17.21: {}
 
-  log-symbols@4.1.0:
-    dependencies:
-      chalk: 4.1.2
-      is-unicode-supported: 0.1.0
-
   log-symbols@5.1.0:
     dependencies:
-      chalk: 5.2.0
+      chalk: 5.4.1
       is-unicode-supported: 1.3.0
 
-  logkitty@0.7.1:
-    dependencies:
-      ansi-fragments: 0.2.1
-      dayjs: 1.11.11
-      yargs: 15.4.1
-
   longest-streak@3.1.0: {}
 
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
 
-  loupe@3.1.1:
-    dependencies:
-      get-func-name: 2.0.2
+  loupe@3.1.3: {}
 
-  lru-cache@10.2.0: {}
+  lru-cache@10.4.3: {}
 
-  lru-cache@11.0.1: {}
+  lru-cache@11.0.2: {}
 
   lru-cache@5.1.1:
     dependencies:
@@ -15308,15 +11776,11 @@ snapshots:
 
   lru-cache@7.18.3: {}
 
-  lucide-react@0.288.0(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-
   lucide-react@0.395.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
-  magic-string@0.30.11:
+  magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
@@ -15325,40 +11789,27 @@ snapshots:
       pify: 4.0.1
       semver: 5.7.2
 
-  make-error@1.3.6:
-    optional: true
-
   makeerror@1.0.12:
     dependencies:
       tmpl: 1.0.5
 
   markdown-extensions@2.0.0: {}
 
-  markdown-table@3.0.3: {}
+  markdown-table@3.0.4: {}
 
   marky@1.2.5: {}
 
-  mdast-util-find-and-replace@3.0.1:
+  mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
       escape-string-regexp: 5.0.0
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
-  mdast-util-from-markdown@0.8.5:
-    dependencies:
-      '@types/mdast': 3.0.15
-      mdast-util-to-string: 2.0.0
-      micromark: 2.11.4
-      parse-entities: 2.0.0
-      unist-util-stringify-position: 2.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   mdast-util-from-markdown@1.3.1:
     dependencies:
       '@types/mdast': 3.0.15
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       decode-named-character-reference: 1.0.2
       mdast-util-to-string: 3.2.0
       micromark: 3.2.0
@@ -15372,19 +11823,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-from-markdown@2.0.1:
+  mdast-util-from-markdown@2.0.2:
     dependencies:
       '@types/mdast': 4.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
       mdast-util-to-string: 4.0.0
-      micromark: 4.0.0
-      micromark-util-decode-numeric-character-reference: 2.0.1
-      micromark-util-decode-string: 2.0.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark: 4.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
       unist-util-stringify-position: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -15394,8 +11845,8 @@ snapshots:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
       escape-string-regexp: 5.0.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
       micromark-extension-frontmatter: 2.0.0
     transitivePeerDependencies:
       - supports-color
@@ -15405,24 +11856,24 @@ snapshots:
       '@types/mdast': 4.0.4
       ccount: 2.0.1
       devlop: 1.1.0
-      mdast-util-find-and-replace: 3.0.1
-      micromark-util-character: 2.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
 
   mdast-util-gfm-footnote@2.0.0:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
-      micromark-util-normalize-identifier: 2.0.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
     transitivePeerDependencies:
       - supports-color
 
   mdast-util-gfm-strikethrough@2.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -15430,9 +11881,9 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      markdown-table: 3.0.3
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -15440,20 +11891,20 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
   mdast-util-gfm@3.0.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.1
+      mdast-util-from-markdown: 2.0.2
       mdast-util-gfm-autolink-literal: 2.0.1
       mdast-util-gfm-footnote: 2.0.0
       mdast-util-gfm-strikethrough: 2.0.0
       mdast-util-gfm-table: 2.0.0
       mdast-util-gfm-task-list-item: 2.0.0
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -15463,22 +11914,22 @@ snapshots:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-mdx-jsx@3.1.3:
+  mdast-util-mdx-jsx@3.2.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       ccount: 2.0.1
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
-      parse-entities: 4.0.1
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
       stringify-entities: 4.0.4
       unist-util-stringify-position: 4.0.0
       vfile-message: 4.0.2
@@ -15487,11 +11938,11 @@ snapshots:
 
   mdast-util-mdx@3.0.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.1
+      mdast-util-from-markdown: 2.0.2
       mdast-util-mdx-expression: 2.0.1
-      mdast-util-mdx-jsx: 3.1.3
+      mdast-util-mdx-jsx: 3.2.0
       mdast-util-mdxjs-esm: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -15501,8 +11952,8 @@ snapshots:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -15520,18 +11971,18 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
-      '@ungap/structured-clone': 1.2.0
+      '@ungap/structured-clone': 1.3.0
       devlop: 1.1.0
-      micromark-util-sanitize-uri: 2.0.0
+      micromark-util-sanitize-uri: 2.0.1
       trim-lines: 3.0.1
       unist-util-position: 5.0.0
       unist-util-visit: 5.0.0
-      vfile: 6.0.1
+      vfile: 6.0.3
 
   mdast-util-to-markdown@1.5.0:
     dependencies:
       '@types/mdast': 3.0.15
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       longest-streak: 3.1.0
       mdast-util-phrasing: 3.0.1
       mdast-util-to-string: 3.2.0
@@ -15539,19 +11990,18 @@ snapshots:
       unist-util-visit: 4.1.2
       zwitch: 2.0.4
 
-  mdast-util-to-markdown@2.1.0:
+  mdast-util-to-markdown@2.1.2:
     dependencies:
       '@types/mdast': 4.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       longest-streak: 3.1.0
       mdast-util-phrasing: 4.1.0
       mdast-util-to-string: 4.0.0
-      micromark-util-decode-string: 2.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
       unist-util-visit: 5.0.0
       zwitch: 2.0.4
 
-  mdast-util-to-string@2.0.0: {}
-
   mdast-util-to-string@3.2.0:
     dependencies:
       '@types/mdast': 3.0.15
@@ -15570,19 +12020,20 @@ snapshots:
       unist-util-is: 5.2.1
       unist-util-visit: 4.1.2
 
-  mdx-bundler@10.0.3(esbuild@0.21.5):
+  mdx-bundler@10.0.3(acorn@8.14.0)(esbuild@0.21.5):
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.7
       '@esbuild-plugins/node-resolve': 0.2.2(esbuild@0.21.5)
       '@fal-works/esbuild-plugin-global-externals': 2.1.2
-      '@mdx-js/esbuild': 3.0.1(esbuild@0.21.5)
+      '@mdx-js/esbuild': 3.1.0(acorn@8.14.0)(esbuild@0.21.5)
       esbuild: 0.21.5
       gray-matter: 4.0.3
       remark-frontmatter: 5.0.0
       remark-mdx-frontmatter: 4.0.0
       uuid: 9.0.1
-      vfile: 6.0.1
+      vfile: 6.0.3
     transitivePeerDependencies:
+      - acorn
       - supports-color
 
   memoize-one@5.2.1: {}
@@ -15591,175 +12042,178 @@ snapshots:
 
   merge2@1.4.1: {}
 
-  metro-babel-transformer@0.80.9:
+  metro-babel-transformer@0.81.1:
     dependencies:
-      '@babel/core': 7.24.7
-      hermes-parser: 0.20.1
+      '@babel/core': 7.26.7
+      flow-enums-runtime: 0.0.6
+      hermes-parser: 0.25.1
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - supports-color
 
-  metro-cache-key@0.80.9: {}
+  metro-cache-key@0.81.1:
+    dependencies:
+      flow-enums-runtime: 0.0.6
 
-  metro-cache@0.80.9:
+  metro-cache@0.81.1:
     dependencies:
-      metro-core: 0.80.9
-      rimraf: 3.0.2
+      exponential-backoff: 3.1.1
+      flow-enums-runtime: 0.0.6
+      metro-core: 0.81.1
 
-  metro-config@0.80.9:
+  metro-config@0.81.1:
     dependencies:
       connect: 3.7.0
       cosmiconfig: 5.2.1
+      flow-enums-runtime: 0.0.6
       jest-validate: 29.7.0
-      metro: 0.80.9
-      metro-cache: 0.80.9
-      metro-core: 0.80.9
-      metro-runtime: 0.80.9
+      metro: 0.81.1
+      metro-cache: 0.81.1
+      metro-core: 0.81.1
+      metro-runtime: 0.81.1
     transitivePeerDependencies:
       - bufferutil
-      - encoding
       - supports-color
       - utf-8-validate
 
-  metro-core@0.80.9:
+  metro-core@0.81.1:
     dependencies:
+      flow-enums-runtime: 0.0.6
       lodash.throttle: 4.1.1
-      metro-resolver: 0.80.9
+      metro-resolver: 0.81.1
 
-  metro-file-map@0.80.9:
+  metro-file-map@0.81.1:
     dependencies:
-      anymatch: 3.1.3
       debug: 2.6.9
       fb-watchman: 2.0.2
+      flow-enums-runtime: 0.0.6
       graceful-fs: 4.2.11
       invariant: 2.2.4
       jest-worker: 29.7.0
-      micromatch: 4.0.5
-      node-abort-controller: 3.1.1
+      micromatch: 4.0.8
       nullthrows: 1.1.1
       walker: 1.0.8
-    optionalDependencies:
-      fsevents: 2.3.3
     transitivePeerDependencies:
       - supports-color
 
-  metro-minify-terser@0.80.9:
+  metro-minify-terser@0.81.1:
     dependencies:
-      terser: 5.31.1
+      flow-enums-runtime: 0.0.6
+      terser: 5.37.0
 
-  metro-resolver@0.80.9: {}
+  metro-resolver@0.81.1:
+    dependencies:
+      flow-enums-runtime: 0.0.6
 
-  metro-runtime@0.80.9:
+  metro-runtime@0.81.1:
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.7
+      flow-enums-runtime: 0.0.6
 
-  metro-source-map@0.80.9:
+  metro-source-map@0.81.1:
     dependencies:
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/traverse': 7.26.7
+      '@babel/traverse--for-generate-function-map': '@babel/traverse@7.26.7'
+      '@babel/types': 7.26.7
+      flow-enums-runtime: 0.0.6
       invariant: 2.2.4
-      metro-symbolicate: 0.80.9
+      metro-symbolicate: 0.81.1
       nullthrows: 1.1.1
-      ob1: 0.80.9
+      ob1: 0.81.1
       source-map: 0.5.7
       vlq: 1.0.1
     transitivePeerDependencies:
       - supports-color
 
-  metro-symbolicate@0.80.9:
+  metro-symbolicate@0.81.1:
     dependencies:
+      flow-enums-runtime: 0.0.6
       invariant: 2.2.4
-      metro-source-map: 0.80.9
+      metro-source-map: 0.81.1
       nullthrows: 1.1.1
       source-map: 0.5.7
-      through2: 2.0.5
       vlq: 1.0.1
     transitivePeerDependencies:
       - supports-color
 
-  metro-transform-plugins@0.80.9:
+  metro-transform-plugins@0.81.1:
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/generator': 7.24.7
-      '@babel/template': 7.24.7
-      '@babel/traverse': 7.24.7
+      '@babel/core': 7.26.7
+      '@babel/generator': 7.26.5
+      '@babel/template': 7.25.9
+      '@babel/traverse': 7.26.7
+      flow-enums-runtime: 0.0.6
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - supports-color
 
-  metro-transform-worker@0.80.9:
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/generator': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
-      metro: 0.80.9
-      metro-babel-transformer: 0.80.9
-      metro-cache: 0.80.9
-      metro-cache-key: 0.80.9
-      metro-minify-terser: 0.80.9
-      metro-source-map: 0.80.9
-      metro-transform-plugins: 0.80.9
+  metro-transform-worker@0.81.1:
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/generator': 7.26.5
+      '@babel/parser': 7.26.7
+      '@babel/types': 7.26.7
+      flow-enums-runtime: 0.0.6
+      metro: 0.81.1
+      metro-babel-transformer: 0.81.1
+      metro-cache: 0.81.1
+      metro-cache-key: 0.81.1
+      metro-minify-terser: 0.81.1
+      metro-source-map: 0.81.1
+      metro-transform-plugins: 0.81.1
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - bufferutil
-      - encoding
       - supports-color
       - utf-8-validate
 
-  metro@0.80.9:
+  metro@0.81.1:
     dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/core': 7.24.7
-      '@babel/generator': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/template': 7.24.7
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/code-frame': 7.26.2
+      '@babel/core': 7.26.7
+      '@babel/generator': 7.26.5
+      '@babel/parser': 7.26.7
+      '@babel/template': 7.25.9
+      '@babel/traverse': 7.26.7
+      '@babel/types': 7.26.7
       accepts: 1.3.8
       chalk: 4.1.2
       ci-info: 2.0.0
       connect: 3.7.0
       debug: 2.6.9
-      denodeify: 1.2.1
       error-stack-parser: 2.1.4
+      flow-enums-runtime: 0.0.6
       graceful-fs: 4.2.11
-      hermes-parser: 0.20.1
-      image-size: 1.1.1
+      hermes-parser: 0.25.1
+      image-size: 1.2.0
       invariant: 2.2.4
       jest-worker: 29.7.0
       jsc-safe-url: 0.2.4
       lodash.throttle: 4.1.1
-      metro-babel-transformer: 0.80.9
-      metro-cache: 0.80.9
-      metro-cache-key: 0.80.9
-      metro-config: 0.80.9
-      metro-core: 0.80.9
-      metro-file-map: 0.80.9
-      metro-resolver: 0.80.9
-      metro-runtime: 0.80.9
-      metro-source-map: 0.80.9
-      metro-symbolicate: 0.80.9
-      metro-transform-plugins: 0.80.9
-      metro-transform-worker: 0.80.9
+      metro-babel-transformer: 0.81.1
+      metro-cache: 0.81.1
+      metro-cache-key: 0.81.1
+      metro-config: 0.81.1
+      metro-core: 0.81.1
+      metro-file-map: 0.81.1
+      metro-resolver: 0.81.1
+      metro-runtime: 0.81.1
+      metro-source-map: 0.81.1
+      metro-symbolicate: 0.81.1
+      metro-transform-plugins: 0.81.1
+      metro-transform-worker: 0.81.1
       mime-types: 2.1.35
-      node-fetch: 2.7.0
       nullthrows: 1.1.1
-      rimraf: 3.0.2
       serialize-error: 2.1.0
       source-map: 0.5.7
-      strip-ansi: 6.0.1
       throat: 5.0.0
       ws: 7.5.10
       yargs: 17.7.2
     transitivePeerDependencies:
       - bufferutil
-      - encoding
       - supports-color
       - utf-8-validate
 
-  micro-memoize@4.1.2: {}
-
   micromark-core-commonmark@1.1.0:
     dependencies:
       decode-named-character-reference: 1.0.2
@@ -15779,100 +12233,100 @@ snapshots:
       micromark-util-types: 1.1.0
       uvu: 0.5.6
 
-  micromark-core-commonmark@2.0.1:
+  micromark-core-commonmark@2.0.2:
     dependencies:
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
-      micromark-factory-destination: 2.0.0
-      micromark-factory-label: 2.0.0
-      micromark-factory-space: 2.0.0
-      micromark-factory-title: 2.0.0
-      micromark-factory-whitespace: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-classify-character: 2.0.0
-      micromark-util-html-tag-name: 2.0.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-resolve-all: 2.0.0
-      micromark-util-subtokenize: 2.0.1
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.0.4
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-frontmatter@2.0.0:
     dependencies:
       fault: 2.0.1
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm-autolink-literal@2.1.0:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-sanitize-uri: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm-footnote@2.1.0:
     dependencies:
       devlop: 1.1.0
-      micromark-core-commonmark: 2.0.1
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-sanitize-uri: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-core-commonmark: 2.0.2
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm-strikethrough@2.1.0:
     dependencies:
       devlop: 1.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-classify-character: 2.0.0
-      micromark-util-resolve-all: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-extension-gfm-table@2.1.0:
+  micromark-extension-gfm-table@2.1.1:
     dependencies:
       devlop: 1.1.0
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm-tagfilter@2.0.0:
     dependencies:
-      micromark-util-types: 2.0.0
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm-task-list-item@2.1.0:
     dependencies:
       devlop: 1.1.0
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm@3.0.0:
     dependencies:
       micromark-extension-gfm-autolink-literal: 2.1.0
       micromark-extension-gfm-footnote: 2.1.0
       micromark-extension-gfm-strikethrough: 2.1.0
-      micromark-extension-gfm-table: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
       micromark-extension-gfm-tagfilter: 2.0.0
       micromark-extension-gfm-task-list-item: 2.1.0
-      micromark-util-combine-extensions: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-mdx-expression@3.0.0:
     dependencies:
       '@types/estree': 1.0.6
       devlop: 1.1.0
       micromark-factory-mdx-expression: 2.0.2
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
       micromark-util-events-to-acorn: 2.0.2
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-mdx-jsx@3.0.1:
     dependencies:
@@ -15881,39 +12335,39 @@ snapshots:
       devlop: 1.1.0
       estree-util-is-identifier-name: 3.0.0
       micromark-factory-mdx-expression: 2.0.2
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
       micromark-util-events-to-acorn: 2.0.2
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
       vfile-message: 4.0.2
 
   micromark-extension-mdx-md@2.0.0:
     dependencies:
-      micromark-util-types: 2.0.0
+      micromark-util-types: 2.0.1
 
   micromark-extension-mdxjs-esm@3.0.0:
     dependencies:
       '@types/estree': 1.0.6
       devlop: 1.1.0
-      micromark-core-commonmark: 2.0.1
-      micromark-util-character: 2.1.0
+      micromark-core-commonmark: 2.0.2
+      micromark-util-character: 2.1.1
       micromark-util-events-to-acorn: 2.0.2
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
       unist-util-position-from-estree: 2.0.0
       vfile-message: 4.0.2
 
   micromark-extension-mdxjs@3.0.0:
     dependencies:
-      acorn: 8.12.0
-      acorn-jsx: 5.3.2(acorn@8.12.0)
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
       micromark-extension-mdx-expression: 3.0.0
       micromark-extension-mdx-jsx: 3.0.1
       micromark-extension-mdx-md: 2.0.0
       micromark-extension-mdxjs-esm: 3.0.0
-      micromark-util-combine-extensions: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-factory-destination@1.1.0:
     dependencies:
@@ -15921,11 +12375,11 @@ snapshots:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
-  micromark-factory-destination@2.0.0:
+  micromark-factory-destination@2.0.1:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-factory-label@1.1.0:
     dependencies:
@@ -15934,22 +12388,22 @@ snapshots:
       micromark-util-types: 1.1.0
       uvu: 0.5.6
 
-  micromark-factory-label@2.0.0:
+  micromark-factory-label@2.0.1:
     dependencies:
       devlop: 1.1.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-factory-mdx-expression@2.0.2:
     dependencies:
       '@types/estree': 1.0.6
       devlop: 1.1.0
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
       micromark-util-events-to-acorn: 2.0.2
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
       unist-util-position-from-estree: 2.0.0
       vfile-message: 4.0.2
 
@@ -15958,10 +12412,10 @@ snapshots:
       micromark-util-character: 1.2.0
       micromark-util-types: 1.1.0
 
-  micromark-factory-space@2.0.0:
+  micromark-factory-space@2.0.1:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.1
 
   micromark-factory-title@1.1.0:
     dependencies:
@@ -15970,12 +12424,12 @@ snapshots:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
-  micromark-factory-title@2.0.0:
+  micromark-factory-title@2.0.1:
     dependencies:
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-factory-whitespace@1.1.0:
     dependencies:
@@ -15984,30 +12438,30 @@ snapshots:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
-  micromark-factory-whitespace@2.0.0:
+  micromark-factory-whitespace@2.0.1:
     dependencies:
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-util-character@1.2.0:
     dependencies:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
-  micromark-util-character@2.1.0:
+  micromark-util-character@2.1.1:
     dependencies:
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-util-chunked@1.1.0:
     dependencies:
       micromark-util-symbol: 1.1.0
 
-  micromark-util-chunked@2.0.0:
+  micromark-util-chunked@2.0.1:
     dependencies:
-      micromark-util-symbol: 2.0.0
+      micromark-util-symbol: 2.0.1
 
   micromark-util-classify-character@1.1.0:
     dependencies:
@@ -16015,29 +12469,29 @@ snapshots:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
-  micromark-util-classify-character@2.0.0:
+  micromark-util-classify-character@2.0.1:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-util-combine-extensions@1.1.0:
     dependencies:
       micromark-util-chunked: 1.1.0
       micromark-util-types: 1.1.0
 
-  micromark-util-combine-extensions@2.0.0:
+  micromark-util-combine-extensions@2.0.1:
     dependencies:
-      micromark-util-chunked: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-util-decode-numeric-character-reference@1.1.0:
     dependencies:
       micromark-util-symbol: 1.1.0
 
-  micromark-util-decode-numeric-character-reference@2.0.1:
+  micromark-util-decode-numeric-character-reference@2.0.2:
     dependencies:
-      micromark-util-symbol: 2.0.0
+      micromark-util-symbol: 2.0.1
 
   micromark-util-decode-string@1.1.0:
     dependencies:
@@ -16046,47 +12500,47 @@ snapshots:
       micromark-util-decode-numeric-character-reference: 1.1.0
       micromark-util-symbol: 1.1.0
 
-  micromark-util-decode-string@2.0.0:
+  micromark-util-decode-string@2.0.1:
     dependencies:
       decode-named-character-reference: 1.0.2
-      micromark-util-character: 2.1.0
-      micromark-util-decode-numeric-character-reference: 2.0.1
-      micromark-util-symbol: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
 
   micromark-util-encode@1.1.0: {}
 
-  micromark-util-encode@2.0.0: {}
+  micromark-util-encode@2.0.1: {}
 
   micromark-util-events-to-acorn@2.0.2:
     dependencies:
       '@types/acorn': 4.0.6
       '@types/estree': 1.0.6
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       devlop: 1.1.0
       estree-util-visit: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
       vfile-message: 4.0.2
 
   micromark-util-html-tag-name@1.2.0: {}
 
-  micromark-util-html-tag-name@2.0.0: {}
+  micromark-util-html-tag-name@2.0.1: {}
 
   micromark-util-normalize-identifier@1.1.0:
     dependencies:
       micromark-util-symbol: 1.1.0
 
-  micromark-util-normalize-identifier@2.0.0:
+  micromark-util-normalize-identifier@2.0.1:
     dependencies:
-      micromark-util-symbol: 2.0.0
+      micromark-util-symbol: 2.0.1
 
   micromark-util-resolve-all@1.1.0:
     dependencies:
       micromark-util-types: 1.1.0
 
-  micromark-util-resolve-all@2.0.0:
+  micromark-util-resolve-all@2.0.1:
     dependencies:
-      micromark-util-types: 2.0.0
+      micromark-util-types: 2.0.1
 
   micromark-util-sanitize-uri@1.2.0:
     dependencies:
@@ -16094,11 +12548,11 @@ snapshots:
       micromark-util-encode: 1.1.0
       micromark-util-symbol: 1.1.0
 
-  micromark-util-sanitize-uri@2.0.0:
+  micromark-util-sanitize-uri@2.0.1:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-encode: 2.0.0
-      micromark-util-symbol: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
 
   micromark-util-subtokenize@1.1.0:
     dependencies:
@@ -16107,32 +12561,25 @@ snapshots:
       micromark-util-types: 1.1.0
       uvu: 0.5.6
 
-  micromark-util-subtokenize@2.0.1:
+  micromark-util-subtokenize@2.0.4:
     dependencies:
       devlop: 1.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-util-symbol@1.1.0: {}
 
-  micromark-util-symbol@2.0.0: {}
+  micromark-util-symbol@2.0.1: {}
 
   micromark-util-types@1.1.0: {}
 
-  micromark-util-types@2.0.0: {}
-
-  micromark@2.11.4:
-    dependencies:
-      debug: 4.3.7
-      parse-entities: 2.0.0
-    transitivePeerDependencies:
-      - supports-color
+  micromark-util-types@2.0.1: {}
 
   micromark@3.2.0:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.7
+      debug: 4.4.0
       decode-named-character-reference: 1.0.2
       micromark-core-commonmark: 1.1.0
       micromark-factory-space: 1.1.0
@@ -16151,31 +12598,31 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  micromark@4.0.0:
+  micromark@4.0.1:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.7
+      debug: 4.4.0
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
-      micromark-core-commonmark: 2.0.1
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-combine-extensions: 2.0.0
-      micromark-util-decode-numeric-character-reference: 2.0.1
-      micromark-util-encode: 2.0.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-resolve-all: 2.0.0
-      micromark-util-sanitize-uri: 2.0.0
-      micromark-util-subtokenize: 2.0.1
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-core-commonmark: 2.0.2
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.0.4
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
     transitivePeerDependencies:
       - supports-color
 
-  micromatch@4.0.5:
+  micromatch@4.0.8:
     dependencies:
-      braces: 3.0.2
+      braces: 3.0.3
       picomatch: 2.3.1
 
   mime-db@1.52.0: {}
@@ -16186,14 +12633,10 @@ snapshots:
 
   mime@1.6.0: {}
 
-  mime@2.6.0: {}
-
   mimic-fn@2.1.0: {}
 
   mimic-fn@4.0.0: {}
 
-  mimic-response@3.1.0: {}
-
   min-indent@1.0.1: {}
 
   minimatch@10.0.1:
@@ -16212,11 +12655,7 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
-  minimatch@9.0.3:
-    dependencies:
-      brace-expansion: 2.0.1
-
-  minimatch@9.0.4:
+  minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.1
 
@@ -16230,8 +12669,6 @@ snapshots:
 
   minipass@5.0.0: {}
 
-  minipass@7.0.4: {}
-
   minipass@7.1.2: {}
 
   minizlib@2.1.2:
@@ -16241,29 +12678,36 @@ snapshots:
 
   mitt@3.0.1: {}
 
-  mkdirp-classic@0.5.3: {}
+  mkdirp@1.0.4: {}
+
+  mkdirp@2.1.6: {}
 
-  mkdirp@0.5.6:
+  mlly@1.7.4:
     dependencies:
-      minimist: 1.2.8
+      acorn: 8.14.0
+      pathe: 2.0.2
+      pkg-types: 1.3.1
+      ufo: 1.5.4
 
-  mkdirp@1.0.4: {}
+  motion-dom@11.18.1:
+    dependencies:
+      motion-utils: 11.18.1
 
-  mkdirp@2.1.6: {}
+  motion-utils@11.18.1: {}
 
-  mlly@1.7.1:
+  motion@11.18.2(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      acorn: 8.12.0
-      pathe: 1.1.2
-      pkg-types: 1.1.1
-      ufo: 1.5.3
+      framer-motion: 11.18.2(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@emotion/is-prop-valid': 0.8.8
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
   mri@1.2.0: {}
 
   ms@2.0.0: {}
 
-  ms@2.1.2: {}
-
   ms@2.1.3: {}
 
   mz@2.7.0:
@@ -16272,13 +12716,7 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
-  nanoid@3.3.7: {}
-
-  napi-build-utils@1.0.2: {}
-
-  natural-compare-lite@1.4.0: {}
-
-  natural-compare@1.4.0: {}
+  nanoid@3.3.8: {}
 
   negotiator@0.6.3: {}
 
@@ -16286,60 +12724,28 @@ snapshots:
 
   netmask@2.0.2: {}
 
-  next-themes@0.2.1(next@14.1.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      next: 14.1.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  next-view-transitions@0.2.0(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next-themes@0.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  next@14.1.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next-view-transitions@0.2.0(next@14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@next/env': 14.1.3
-      '@swc/helpers': 0.5.2
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001634
-      graceful-fs: 4.2.11
-      postcss: 8.4.31
+      next: 14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      styled-jsx: 5.1.1(@babel/core@7.24.7)(react@18.3.1)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 14.1.3
-      '@next/swc-darwin-x64': 14.1.3
-      '@next/swc-linux-arm64-gnu': 14.1.3
-      '@next/swc-linux-arm64-musl': 14.1.3
-      '@next/swc-linux-x64-gnu': 14.1.3
-      '@next/swc-linux-x64-musl': 14.1.3
-      '@next/swc-win32-arm64-msvc': 14.1.3
-      '@next/swc-win32-ia32-msvc': 14.1.3
-      '@next/swc-win32-x64-msvc': 14.1.3
-      '@opentelemetry/api': 1.9.0
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
 
-  next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next@14.2.4(@babel/core@7.26.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@next/env': 14.2.4
       '@swc/helpers': 0.5.5
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001634
+      caniuse-lite: 1.0.30001697
       graceful-fs: 4.2.11
       postcss: 8.4.31
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      styled-jsx: 5.1.1(@babel/core@7.24.7)(react@18.3.1)
+      styled-jsx: 5.1.1(@babel/core@7.26.7)(react@18.3.1)
     optionalDependencies:
       '@next/swc-darwin-arm64': 14.2.4
       '@next/swc-darwin-x64': 14.2.4
@@ -16350,34 +12756,15 @@ snapshots:
       '@next/swc-win32-arm64-msvc': 14.2.4
       '@next/swc-win32-ia32-msvc': 14.2.4
       '@next/swc-win32-x64-msvc': 14.2.4
-      '@opentelemetry/api': 1.9.0
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
 
-  nocache@3.0.4: {}
-
-  node-abi@3.65.0:
-    dependencies:
-      semver: 7.6.2
-
-  node-abort-controller@3.1.1: {}
-
-  node-addon-api@5.1.0: {}
-
   node-addon-api@7.1.1: {}
 
-  node-dir@0.1.17:
-    dependencies:
-      minimatch: 3.1.2
-
   node-domexception@1.0.0: {}
 
-  node-fetch-native@1.6.4: {}
-
-  node-fetch@2.7.0:
-    dependencies:
-      whatwg-url: 5.0.0
+  node-fetch-native@1.6.6: {}
 
   node-fetch@3.3.2:
     dependencies:
@@ -16389,16 +12776,7 @@ snapshots:
 
   node-int64@0.4.0: {}
 
-  node-releases@2.0.14: {}
-
-  node-stream-zip@1.15.0: {}
-
-  normalize-package-data@2.5.0:
-    dependencies:
-      hosted-git-info: 2.8.9
-      resolve: 1.22.8
-      semver: 5.7.2
-      validate-npm-package-license: 3.0.4
+  node-releases@2.0.19: {}
 
   normalize-path@3.0.0: {}
 
@@ -16418,35 +12796,37 @@ snapshots:
 
   nullthrows@1.1.1: {}
 
-  nypm@0.3.9:
+  nypm@0.5.2:
     dependencies:
       citty: 0.1.6
-      consola: 3.2.3
-      execa: 8.0.1
-      pathe: 1.1.2
-      pkg-types: 1.1.1
-      ufo: 1.5.3
+      consola: 3.4.0
+      pathe: 2.0.2
+      pkg-types: 1.3.1
+      tinyexec: 0.3.2
+      ufo: 1.5.4
 
-  ob1@0.80.9: {}
+  ob1@0.81.1:
+    dependencies:
+      flow-enums-runtime: 0.0.6
 
   object-assign@4.1.1: {}
 
   object-hash@3.0.0: {}
 
-  octokit@4.0.2:
+  octokit@4.1.0:
     dependencies:
-      '@octokit/app': 15.1.0
-      '@octokit/core': 6.1.2
-      '@octokit/oauth-app': 7.1.3
-      '@octokit/plugin-paginate-graphql': 5.2.2(@octokit/core@6.1.2)
-      '@octokit/plugin-paginate-rest': 11.3.3(@octokit/core@6.1.2)
-      '@octokit/plugin-rest-endpoint-methods': 13.2.4(@octokit/core@6.1.2)
-      '@octokit/plugin-retry': 7.1.1(@octokit/core@6.1.2)
-      '@octokit/plugin-throttling': 9.3.0(@octokit/core@6.1.2)
-      '@octokit/request-error': 6.1.1
-      '@octokit/types': 13.5.0
+      '@octokit/app': 15.1.2
+      '@octokit/core': 6.1.3
+      '@octokit/oauth-app': 7.1.5
+      '@octokit/plugin-paginate-graphql': 5.2.4(@octokit/core@6.1.3)
+      '@octokit/plugin-paginate-rest': 11.4.0(@octokit/core@6.1.3)
+      '@octokit/plugin-rest-endpoint-methods': 13.3.0(@octokit/core@6.1.3)
+      '@octokit/plugin-retry': 7.1.3(@octokit/core@6.1.3)
+      '@octokit/plugin-throttling': 9.4.0(@octokit/core@6.1.3)
+      '@octokit/request-error': 6.1.6
+      '@octokit/types': 13.8.0
 
-  ohash@1.1.3: {}
+  ohash@1.1.4: {}
 
   on-finished@2.3.0:
     dependencies:
@@ -16456,8 +12836,6 @@ snapshots:
     dependencies:
       ee-first: 1.1.1
 
-  on-headers@1.0.2: {}
-
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -16472,41 +12850,16 @@ snapshots:
 
   oniguruma-to-js@0.4.3:
     dependencies:
-      regex: 4.3.3
-
-  open@6.4.0:
-    dependencies:
-      is-wsl: 1.1.0
+      regex: 4.4.0
 
   open@7.4.2:
     dependencies:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
-  optionator@0.9.3:
-    dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-
-  ora@5.4.1:
-    dependencies:
-      bl: 4.1.0
-      chalk: 4.1.2
-      cli-cursor: 3.1.0
-      cli-spinners: 2.9.2
-      is-interactive: 1.0.0
-      is-unicode-supported: 0.1.0
-      log-symbols: 4.1.0
-      strip-ansi: 6.0.1
-      wcwidth: 1.0.1
-
   ora@6.3.1:
     dependencies:
-      chalk: 5.2.0
+      chalk: 5.4.1
       cli-cursor: 4.0.0
       cli-spinners: 2.9.2
       is-interactive: 2.0.0
@@ -16524,11 +12877,7 @@ snapshots:
     dependencies:
       yocto-queue: 0.1.0
 
-  p-limit@4.0.0:
-    dependencies:
-      yocto-queue: 1.0.0
-
-  p-limit@6.1.0:
+  p-limit@6.2.0:
     dependencies:
       yocto-queue: 1.1.1
 
@@ -16544,22 +12893,18 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  p-locate@6.0.0:
-    dependencies:
-      p-limit: 4.0.0
-
   p-try@2.2.0: {}
 
-  pac-proxy-agent@7.0.2:
+  pac-proxy-agent@7.1.0:
     dependencies:
       '@tootallnate/quickjs-emscripten': 0.23.0
-      agent-base: 7.1.1
-      debug: 4.3.7
-      get-uri: 6.0.3
+      agent-base: 7.1.3
+      debug: 4.4.0
+      get-uri: 6.0.4
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       pac-resolver: 7.0.1
-      socks-proxy-agent: 8.0.4
+      socks-proxy-agent: 8.0.5
     transitivePeerDependencies:
       - supports-color
 
@@ -16574,19 +12919,9 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
-  parse-entities@2.0.0:
+  parse-entities@4.0.2:
     dependencies:
-      character-entities: 1.2.4
-      character-entities-legacy: 1.1.4
-      character-reference-invalid: 1.1.4
-      is-alphanumerical: 1.0.4
-      is-decimal: 1.0.4
-      is-hexadecimal: 1.0.4
-
-  parse-entities@4.0.1:
-    dependencies:
-      '@types/unist': 2.0.10
-      character-entities: 2.0.2
+      '@types/unist': 2.0.11
       character-entities-legacy: 3.0.0
       character-reference-invalid: 2.0.1
       decode-named-character-reference: 1.0.2
@@ -16594,13 +12929,6 @@ snapshots:
       is-decimal: 2.0.1
       is-hexadecimal: 2.0.1
 
-  parse-gitignore@2.0.0: {}
-
-  parse-imports@2.1.1:
-    dependencies:
-      es-module-lexer: 1.5.4
-      slashes: 3.0.12
-
   parse-json@4.0.0:
     dependencies:
       error-ex: 1.3.2
@@ -16608,7 +12936,7 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.22.13
+      '@babel/code-frame': 7.26.2
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -16627,8 +12955,6 @@ snapshots:
 
   path-exists@4.0.0: {}
 
-  path-exists@5.0.0: {}
-
   path-is-absolute@1.0.1: {}
 
   path-key@3.1.1: {}
@@ -16637,37 +12963,31 @@ snapshots:
 
   path-parse@1.0.7: {}
 
-  path-scurry@1.10.1:
+  path-scurry@1.11.1:
     dependencies:
-      lru-cache: 10.2.0
-      minipass: 7.0.4
+      lru-cache: 10.4.3
+      minipass: 7.1.2
 
   path-scurry@2.0.0:
     dependencies:
-      lru-cache: 11.0.1
+      lru-cache: 11.0.2
       minipass: 7.1.2
 
   path-type@4.0.0: {}
 
   pathe@1.1.2: {}
 
+  pathe@2.0.2: {}
+
   pathval@2.0.0: {}
 
   pend@1.2.0: {}
 
   perfect-debounce@1.0.0: {}
 
-  periscopic@3.1.0:
-    dependencies:
-      '@types/estree': 1.0.6
-      estree-walker: 3.0.3
-      is-reference: 3.0.2
-
   phenomenon@1.6.0: {}
 
-  picocolors@1.0.1: {}
-
-  picocolors@1.1.0: {}
+  picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
 
@@ -16685,62 +13005,52 @@ snapshots:
     dependencies:
       find-up: 3.0.0
 
-  pkg-types@1.1.1:
+  pkg-types@1.3.1:
     dependencies:
-      confbox: 0.1.7
-      mlly: 1.7.1
-      pathe: 1.1.2
+      confbox: 0.1.8
+      mlly: 1.7.4
+      pathe: 2.0.2
 
   pluralize@8.0.0: {}
 
-  postcss-import@15.1.0(postcss@8.4.38):
+  postcss-import@15.1.0(postcss@8.5.1):
     dependencies:
-      postcss: 8.4.38
+      postcss: 8.5.1
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.8
+      resolve: 1.22.10
 
-  postcss-js@4.0.1(postcss@8.4.38):
+  postcss-js@4.0.1(postcss@8.5.1):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.38
+      postcss: 8.5.1
 
-  postcss-load-config@3.1.4(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.11.24)(typescript@4.9.5)):
+  postcss-load-config@3.1.4(postcss@8.5.1):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
-      postcss: 8.4.38
-      ts-node: 10.9.1(@types/node@20.11.24)(typescript@4.9.5)
-
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.1(@types/node@17.0.45)(typescript@5.4.5)):
-    dependencies:
-      lilconfig: 3.1.1
-      yaml: 2.4.3
-    optionalDependencies:
-      postcss: 8.4.38
-      ts-node: 10.9.1(@types/node@17.0.45)(typescript@5.4.5)
+      postcss: 8.5.1
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5)):
+  postcss-load-config@4.0.2(postcss@8.5.1):
     dependencies:
-      lilconfig: 3.1.1
-      yaml: 2.4.3
+      lilconfig: 3.1.3
+      yaml: 2.7.0
     optionalDependencies:
-      postcss: 8.4.38
-      ts-node: 10.9.1(@types/node@20.11.24)(typescript@5.4.5)
+      postcss: 8.5.1
 
   postcss-media-query-parser@0.2.3: {}
 
-  postcss-nested@6.0.1(postcss@8.4.38):
+  postcss-nested@6.2.0(postcss@8.5.1):
     dependencies:
-      postcss: 8.4.38
-      postcss-selector-parser: 6.1.0
+      postcss: 8.5.1
+      postcss-selector-parser: 6.1.2
 
-  postcss-nesting@13.0.1(postcss@8.4.38):
+  postcss-nesting@13.0.1(postcss@8.5.1):
     dependencies:
       '@csstools/selector-resolve-nested': 3.0.0(postcss-selector-parser@7.0.0)
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.0.0)
-      postcss: 8.4.38
+      postcss: 8.5.1
       postcss-selector-parser: 7.0.0
 
   postcss-selector-parser@6.0.10:
@@ -16748,7 +13058,7 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-selector-parser@6.1.0:
+  postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
@@ -16762,54 +13072,18 @@ snapshots:
 
   postcss@8.4.31:
     dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.1
-      source-map-js: 1.2.0
-
-  postcss@8.4.38:
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.1
-      source-map-js: 1.2.0
-
-  postcss@8.4.47:
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.1.0
+      nanoid: 3.3.8
+      picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  prebuild-install@7.1.2:
-    dependencies:
-      detect-libc: 2.0.3
-      expand-template: 2.0.3
-      github-from-package: 0.0.0
-      minimist: 1.2.8
-      mkdirp-classic: 0.5.3
-      napi-build-utils: 1.0.2
-      node-abi: 3.65.0
-      pump: 3.0.0
-      rc: 1.2.8
-      simple-get: 4.0.1
-      tar-fs: 2.1.1
-      tunnel-agent: 0.6.0
-
-  prelude-ls@1.2.1: {}
-
-  prettier-linter-helpers@1.0.0:
+  postcss@8.5.1:
     dependencies:
-      fast-diff: 1.3.0
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
 
   prettier@2.8.8: {}
 
-  prettier@3.3.2: {}
-
-  pretty-format@26.6.2:
-    dependencies:
-      '@jest/types': 26.6.2
-      ansi-regex: 5.0.1
-      ansi-styles: 4.3.0
-      react-is: 17.0.2
-
   pretty-format@29.7.0:
     dependencies:
       '@jest/schemas': 29.6.3
@@ -16820,14 +13094,12 @@ snapshots:
     dependencies:
       execa: 5.1.1
       find-up: 5.0.0
-      ignore: 5.3.1
+      ignore: 5.3.2
       mri: 1.2.0
-      picocolors: 1.0.1
+      picocolors: 1.1.1
       picomatch: 3.0.1
       prettier: 2.8.8
-      tslib: 2.6.2
-
-  process-nextick-args@2.0.1: {}
+      tslib: 2.8.1
 
   progress@2.0.3: {}
 
@@ -16848,61 +13120,59 @@ snapshots:
 
   property-information@6.5.0: {}
 
-  proxy-agent@6.4.0:
+  proxy-agent@6.5.0:
     dependencies:
-      agent-base: 7.1.1
-      debug: 4.3.7
+      agent-base: 7.1.3
+      debug: 4.4.0
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       lru-cache: 7.18.3
-      pac-proxy-agent: 7.0.2
+      pac-proxy-agent: 7.1.0
       proxy-from-env: 1.1.0
-      socks-proxy-agent: 8.0.4
+      socks-proxy-agent: 8.0.5
     transitivePeerDependencies:
       - supports-color
 
   proxy-from-env@1.1.0: {}
 
-  pump@3.0.0:
+  pump@3.0.2:
     dependencies:
       end-of-stream: 1.4.4
       once: 1.4.0
 
-  punycode@2.3.0: {}
+  punycode@2.3.1: {}
 
-  puppeteer-core@23.9.0:
+  puppeteer-core@23.11.1:
     dependencies:
-      '@puppeteer/browsers': 2.4.1
-      chromium-bidi: 0.8.0(devtools-protocol@0.0.1367902)
-      debug: 4.3.7
+      '@puppeteer/browsers': 2.6.1
+      chromium-bidi: 0.11.0(devtools-protocol@0.0.1367902)
+      debug: 4.4.0
       devtools-protocol: 0.0.1367902
       typed-query-selector: 2.12.0
       ws: 8.18.0
     transitivePeerDependencies:
+      - bare-buffer
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  puppeteer@23.9.0(typescript@5.4.5):
+  puppeteer@23.11.1(typescript@5.7.3):
     dependencies:
-      '@puppeteer/browsers': 2.4.1
-      chromium-bidi: 0.8.0(devtools-protocol@0.0.1367902)
-      cosmiconfig: 9.0.0(typescript@5.4.5)
+      '@puppeteer/browsers': 2.6.1
+      chromium-bidi: 0.11.0(devtools-protocol@0.0.1367902)
+      cosmiconfig: 9.0.0(typescript@5.7.3)
       devtools-protocol: 0.0.1367902
-      puppeteer-core: 23.9.0
+      puppeteer-core: 23.11.1
       typed-query-selector: 2.12.0
     transitivePeerDependencies:
+      - bare-buffer
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  querystring@0.2.1: {}
-
   queue-microtask@1.2.3: {}
 
-  queue-tick@1.0.1: {}
-
   queue@6.0.2:
     dependencies:
       inherits: 2.0.4
@@ -16918,13 +13188,6 @@ snapshots:
       defu: 6.1.4
       destr: 2.0.3
 
-  rc@1.2.8:
-    dependencies:
-      deep-extend: 0.6.0
-      ini: 1.3.8
-      minimist: 1.2.8
-      strip-json-comments: 2.0.1
-
   react-anime@4.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       animejs: 3.2.2
@@ -16936,9 +13199,9 @@ snapshots:
       date-fns: 2.30.0
       react: 18.3.1
 
-  react-devtools-core@5.2.0:
+  react-devtools-core@6.1.0:
     dependencies:
-      shell-quote: 1.8.1
+      shell-quote: 1.8.2
       ws: 7.5.10
     transitivePeerDependencies:
       - bufferutil
@@ -16950,87 +13213,87 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
-  react-hook-form@7.52.0(react@18.3.1):
+  react-hook-form@7.54.2(react@18.3.1):
     dependencies:
       react: 18.3.1
 
-  react-icon-cloud@4.1.4(react@18.3.1):
+  react-icon-cloud@4.1.7(react@18.3.1):
     dependencies:
       '@csstools/convert-colors': 2.0.0
       react: 18.3.1
 
   react-is@16.13.1: {}
 
-  react-is@17.0.2: {}
-
   react-is@18.3.1: {}
 
-  react-konva@18.2.10(konva@9.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-konva@18.2.10(@types/react@18.3.18)(konva@9.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@types/react-reconciler': 0.28.8
-      its-fine: 1.2.5(react@18.3.1)
-      konva: 9.3.11
+      '@types/react-reconciler': 0.28.9(@types/react@18.3.18)
+      its-fine: 1.2.5(@types/react@18.3.18)(react@18.3.1)
+      konva: 9.3.18
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-reconciler: 0.29.2(react@18.3.1)
       scheduler: 0.23.2
+    transitivePeerDependencies:
+      - '@types/react'
 
-  react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1):
+  react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       '@jest/create-cache-key-function': 29.7.0
-      '@react-native-community/cli': 13.6.8
-      '@react-native-community/cli-platform-android': 13.6.8
-      '@react-native-community/cli-platform-ios': 13.6.8
-      '@react-native/assets-registry': 0.74.84
-      '@react-native/codegen': 0.74.84(@babel/preset-env@7.24.7(@babel/core@7.24.7))
-      '@react-native/community-cli-plugin': 0.74.84(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))
-      '@react-native/gradle-plugin': 0.74.84
-      '@react-native/js-polyfills': 0.74.84
-      '@react-native/normalize-colors': 0.74.84
-      '@react-native/virtualized-lists': 0.74.84(@types/react@18.2.61)(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1))(react@18.3.1)
+      '@react-native/assets-registry': 0.77.0
+      '@react-native/codegen': 0.77.0(@babel/preset-env@7.26.7(@babel/core@7.26.7))
+      '@react-native/community-cli-plugin': 0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))
+      '@react-native/gradle-plugin': 0.77.0
+      '@react-native/js-polyfills': 0.77.0
+      '@react-native/normalize-colors': 0.77.0
+      '@react-native/virtualized-lists': 0.77.0(@types/react@18.3.18)(react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)
       abort-controller: 3.0.0
       anser: 1.4.10
       ansi-regex: 5.0.1
+      babel-jest: 29.7.0(@babel/core@7.26.7)
+      babel-plugin-syntax-hermes-parser: 0.25.1
       base64-js: 1.5.1
       chalk: 4.1.2
+      commander: 12.1.0
       event-target-shim: 5.0.1
       flow-enums-runtime: 0.0.6
+      glob: 7.2.3
       invariant: 2.2.4
       jest-environment-node: 29.7.0
       jsc-android: 250231.0.0
       memoize-one: 5.2.1
-      metro-runtime: 0.80.9
-      metro-source-map: 0.80.9
-      mkdirp: 0.5.6
+      metro-runtime: 0.81.1
+      metro-source-map: 0.81.1
       nullthrows: 1.1.1
-      pretty-format: 26.6.2
+      pretty-format: 29.7.0
       promise: 8.3.0
       react: 18.3.1
-      react-devtools-core: 5.2.0
+      react-devtools-core: 6.1.0
       react-refresh: 0.14.2
-      react-shallow-renderer: 16.15.0(react@18.3.1)
       regenerator-runtime: 0.13.11
       scheduler: 0.24.0-canary-efb381bbf-20230505
+      semver: 7.7.1
       stacktrace-parser: 0.1.10
       whatwg-fetch: 3.6.20
       ws: 6.2.3
       yargs: 17.7.2
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
     transitivePeerDependencies:
       - '@babel/core'
       - '@babel/preset-env'
+      - '@react-native-community/cli-server-api'
       - bufferutil
-      - encoding
       - supports-color
       - utf-8-validate
 
-  react-phone-number-input@3.4.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-phone-number-input@3.4.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       classnames: 2.5.1
-      country-flag-icons: 1.5.12
-      input-format: 0.3.10
-      libphonenumber-js: 1.11.4
+      country-flag-icons: 1.5.14
+      input-format: 0.3.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      libphonenumber-js: 1.11.19
       prop-types: 15.8.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -17049,52 +13312,46 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
-  react-remove-scroll-bar@2.3.6(@types/react@18.2.61)(react@18.3.1):
+  react-remove-scroll-bar@2.3.8(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       react: 18.3.1
-      react-style-singleton: 2.2.1(@types/react@18.2.61)(react@18.3.1)
-      tslib: 2.6.2
+      react-style-singleton: 2.2.3(@types/react@18.3.18)(react@18.3.1)
+      tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  react-remove-scroll@2.5.5(@types/react@18.2.61)(react@18.3.1):
+  react-remove-scroll@2.6.3(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       react: 18.3.1
-      react-remove-scroll-bar: 2.3.6(@types/react@18.2.61)(react@18.3.1)
-      react-style-singleton: 2.2.1(@types/react@18.2.61)(react@18.3.1)
-      tslib: 2.6.2
-      use-callback-ref: 1.3.2(@types/react@18.2.61)(react@18.3.1)
-      use-sidecar: 1.1.2(@types/react@18.2.61)(react@18.3.1)
+      react-remove-scroll-bar: 2.3.8(@types/react@18.3.18)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@18.3.18)(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@18.3.18)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
   react-resizable-panels@0.0.55(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  react-shallow-renderer@16.15.0(react@18.3.1):
-    dependencies:
-      object-assign: 4.1.1
-      react: 18.3.1
-      react-is: 18.3.1
-
-  react-smooth@4.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      fast-equals: 5.0.1
+      fast-equals: 5.2.2
       prop-types: 15.8.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
-  react-spring@9.7.3(@react-three/fiber@8.16.8(react-dom@18.3.1(react@18.3.1))(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1))(react@18.3.1)(three@0.165.0))(konva@9.3.11)(react-dom@18.3.1(react@18.3.1))(react-konva@18.2.10(konva@9.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1))(react-zdog@1.2.2)(react@18.3.1)(three@0.165.0)(zdog@1.1.3):
+  react-spring@9.7.5(@react-three/fiber@8.17.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)(three@0.173.0))(konva@9.3.18)(react-dom@18.3.1(react@18.3.1))(react-konva@18.2.10(@types/react@18.3.18)(konva@9.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1))(react-zdog@1.2.2)(react@18.3.1)(three@0.173.0)(zdog@1.1.3):
     dependencies:
-      '@react-spring/core': 9.7.3(react@18.3.1)
-      '@react-spring/konva': 9.7.3(konva@9.3.11)(react-konva@18.2.10(konva@9.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
-      '@react-spring/native': 9.7.3(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1))(react@18.3.1)
-      '@react-spring/three': 9.7.3(@react-three/fiber@8.16.8(react-dom@18.3.1(react@18.3.1))(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.61)(react@18.3.1))(react@18.3.1)(three@0.165.0))(react@18.3.1)(three@0.165.0)
-      '@react-spring/web': 9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-spring/zdog': 9.7.3(react-dom@18.3.1(react@18.3.1))(react-zdog@1.2.2)(react@18.3.1)(zdog@1.1.3)
+      '@react-spring/core': 9.7.5(react@18.3.1)
+      '@react-spring/konva': 9.7.5(konva@9.3.18)(react-konva@18.2.10(@types/react@18.3.18)(konva@9.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+      '@react-spring/native': 9.7.5(react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)
+      '@react-spring/three': 9.7.5(@react-three/fiber@8.17.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react-native@0.77.0(@babel/core@7.26.7)(@babel/preset-env@7.26.7(@babel/core@7.26.7))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)(three@0.173.0))(react@18.3.1)(three@0.173.0)
+      '@react-spring/web': 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-spring/zdog': 9.7.5(react-dom@18.3.1(react@18.3.1))(react-zdog@1.2.2)(react@18.3.1)(zdog@1.1.3)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
@@ -17106,18 +13363,17 @@ snapshots:
       - three
       - zdog
 
-  react-style-singleton@2.2.1(@types/react@18.2.61)(react@18.3.1):
+  react-style-singleton@2.2.3(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       get-nonce: 1.0.1
-      invariant: 2.2.4
       react: 18.3.1
-      tslib: 2.6.2
+      tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.7
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
@@ -17126,16 +13382,16 @@ snapshots:
 
   react-tweet@3.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@swc/helpers': 0.5.11
+      '@swc/helpers': 0.5.15
       clsx: 2.1.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      swr: 2.2.5(react@18.3.1)
+      swr: 2.3.0(react@18.3.1)
 
-  react-use-measure@2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-use-measure@2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      debounce: 1.2.1
       react: 18.3.1
+    optionalDependencies:
       react-dom: 18.3.1(react@18.3.1)
 
   react-wrap-balancer@1.1.1(react@18.3.1):
@@ -17156,29 +13412,6 @@ snapshots:
     dependencies:
       pify: 2.3.0
 
-  read-pkg-up@7.0.1:
-    dependencies:
-      find-up: 4.1.0
-      read-pkg: 5.2.0
-      type-fest: 0.8.1
-
-  read-pkg@5.2.0:
-    dependencies:
-      '@types/normalize-package-data': 2.4.4
-      normalize-package-data: 2.5.0
-      parse-json: 5.2.0
-      type-fest: 0.6.0
-
-  readable-stream@2.3.8:
-    dependencies:
-      core-util-is: 1.0.3
-      inherits: 2.0.4
-      isarray: 1.0.0
-      process-nextick-args: 2.0.1
-      safe-buffer: 5.1.2
-      string_decoder: 1.1.1
-      util-deprecate: 1.0.2
-
   readable-stream@3.6.2:
     dependencies:
       inherits: 2.0.4
@@ -17191,20 +13424,13 @@ snapshots:
 
   readline@1.3.0: {}
 
-  recast@0.21.5:
-    dependencies:
-      ast-types: 0.15.2
-      esprima: 4.0.1
-      source-map: 0.6.1
-      tslib: 2.6.2
-
   recast@0.23.9:
     dependencies:
       ast-types: 0.16.1
       esprima: 4.0.1
       source-map: 0.6.1
       tiny-invariant: 1.3.3
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   recharts-scale@0.4.5:
     dependencies:
@@ -17218,16 +13444,42 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-is: 16.13.1
-      react-smooth: 4.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-smooth: 4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       recharts-scale: 0.4.5
       tiny-invariant: 1.3.3
       victory-vendor: 36.9.2
 
-  refa@0.12.1:
+  recma-build-jsx@1.0.0:
     dependencies:
-      '@eslint-community/regexpp': 4.10.0
+      '@types/estree': 1.0.6
+      estree-util-build-jsx: 3.0.1
+      vfile: 6.0.3
+
+  recma-jsx@1.0.0(acorn@8.14.0):
+    dependencies:
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      estree-util-to-js: 2.0.0
+      recma-parse: 1.0.0
+      recma-stringify: 1.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - acorn
+
+  recma-parse@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      esast-util-from-js: 2.0.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  recma-stringify@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      estree-util-to-js: 2.0.0
+      unified: 11.0.5
+      vfile: 6.0.3
 
-  regenerate-unicode-properties@10.1.1:
+  regenerate-unicode-properties@10.2.0:
     dependencies:
       regenerate: 1.4.2
 
@@ -17235,42 +13487,33 @@ snapshots:
 
   regenerator-runtime@0.13.11: {}
 
-  regenerator-runtime@0.14.0: {}
+  regenerator-runtime@0.14.1: {}
 
   regenerator-transform@0.15.2:
     dependencies:
-      '@babel/runtime': 7.24.7
-
-  regex@4.3.3: {}
-
-  regexp-ast-analysis@0.7.1:
-    dependencies:
-      '@eslint-community/regexpp': 4.10.0
-      refa: 0.12.1
+      '@babel/runtime': 7.26.7
 
-  regexp-tree@0.1.27: {}
+  regex@4.4.0: {}
 
-  regexpu-core@5.3.2:
+  regexpu-core@6.2.0:
     dependencies:
-      '@babel/regjsgen': 0.8.0
       regenerate: 1.4.2
-      regenerate-unicode-properties: 10.1.1
-      regjsparser: 0.9.1
+      regenerate-unicode-properties: 10.2.0
+      regjsgen: 0.8.0
+      regjsparser: 0.12.0
       unicode-match-property-ecmascript: 2.0.0
-      unicode-match-property-value-ecmascript: 2.1.0
+      unicode-match-property-value-ecmascript: 2.2.0
 
-  regjsparser@0.10.0:
-    dependencies:
-      jsesc: 0.5.0
+  regjsgen@0.8.0: {}
 
-  regjsparser@0.9.1:
+  regjsparser@0.12.0:
     dependencies:
-      jsesc: 0.5.0
+      jsesc: 3.0.2
 
   rehype-autolink-headings@7.1.0:
     dependencies:
       '@types/hast': 3.0.4
-      '@ungap/structured-clone': 1.2.0
+      '@ungap/structured-clone': 1.3.0
       hast-util-heading-rank: 3.0.0
       hast-util-is-element: 3.0.0
       unified: 11.0.5
@@ -17282,16 +13525,24 @@ snapshots:
       hast-util-from-html: 2.0.3
       unified: 11.0.5
 
-  rehype-pretty-code@0.13.2(shiki@1.21.1):
+  rehype-pretty-code@0.13.2(shiki@1.20.0):
     dependencies:
       '@types/hast': 3.0.4
       hast-util-to-string: 3.0.1
       parse-numeric-range: 1.3.0
       rehype-parse: 9.0.1
-      shiki: 1.21.1
+      shiki: 1.20.0
       unified: 11.0.5
       unist-util-visit: 5.0.0
 
+  rehype-recma@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      '@types/hast': 3.0.4
+      hast-util-to-estree: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
   rehype-slug@6.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -17303,7 +13554,7 @@ snapshots:
   rehype-stringify@10.0.1:
     dependencies:
       '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.3
+      hast-util-to-html: 9.0.4
       unified: 11.0.5
 
   rehype@13.0.2:
@@ -17343,12 +13594,12 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       estree-util-is-identifier-name: 3.0.0
-      estree-util-value-to-estree: 3.1.2
+      estree-util-value-to-estree: 3.3.2
       toml: 3.0.0
       unified: 11.0.5
-      yaml: 2.5.1
+      yaml: 2.7.0
 
-  remark-mdx@3.0.1:
+  remark-mdx@3.1.0:
     dependencies:
       mdast-util-mdx: 3.0.0
       micromark-extension-mdxjs: 3.0.0
@@ -17366,8 +13617,8 @@ snapshots:
   remark-parse@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.1
-      micromark-util-types: 2.0.0
+      mdast-util-from-markdown: 2.0.2
+      micromark-util-types: 2.0.1
       unified: 11.0.5
     transitivePeerDependencies:
       - supports-color
@@ -17378,7 +13629,7 @@ snapshots:
       '@types/mdast': 4.0.4
       mdast-util-to-hast: 13.2.0
       unified: 11.0.5
-      vfile: 6.0.1
+      vfile: 6.0.3
 
   remark-stringify@10.0.3:
     dependencies:
@@ -17389,7 +13640,7 @@ snapshots:
   remark-stringify@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-to-markdown: 2.1.2
       unified: 11.0.5
 
   remark@14.0.3:
@@ -17403,8 +13654,6 @@ snapshots:
 
   require-directory@2.1.1: {}
 
-  require-main-filename@2.0.0: {}
-
   resize-observer-polyfill@1.5.1: {}
 
   resolve-from@3.0.0: {}
@@ -17415,17 +13664,12 @@ snapshots:
 
   resolve-pkg-maps@1.0.0: {}
 
-  resolve@1.22.8:
+  resolve@1.22.10:
     dependencies:
-      is-core-module: 2.13.1
+      is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  restore-cursor@3.1.0:
-    dependencies:
-      onetime: 5.1.2
-      signal-exit: 3.0.7
-
   restore-cursor@4.0.0:
     dependencies:
       onetime: 5.1.2
@@ -17433,10 +13677,6 @@ snapshots:
 
   reusify@1.0.4: {}
 
-  rimraf@2.6.3:
-    dependencies:
-      glob: 7.2.3
-
   rimraf@3.0.2:
     dependencies:
       glob: 7.2.3
@@ -17447,33 +13687,36 @@ snapshots:
 
   rimraf@6.0.1:
     dependencies:
-      glob: 11.0.0
+      glob: 11.0.1
       package-json-from-dist: 1.0.1
 
-  rollup@3.29.4:
+  rollup@3.29.5:
     optionalDependencies:
       fsevents: 2.3.3
 
-  rollup@4.24.0:
+  rollup@4.34.2:
     dependencies:
       '@types/estree': 1.0.6
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.24.0
-      '@rollup/rollup-android-arm64': 4.24.0
-      '@rollup/rollup-darwin-arm64': 4.24.0
-      '@rollup/rollup-darwin-x64': 4.24.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.24.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.24.0
-      '@rollup/rollup-linux-arm64-gnu': 4.24.0
-      '@rollup/rollup-linux-arm64-musl': 4.24.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.24.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.24.0
-      '@rollup/rollup-linux-s390x-gnu': 4.24.0
-      '@rollup/rollup-linux-x64-gnu': 4.24.0
-      '@rollup/rollup-linux-x64-musl': 4.24.0
-      '@rollup/rollup-win32-arm64-msvc': 4.24.0
-      '@rollup/rollup-win32-ia32-msvc': 4.24.0
-      '@rollup/rollup-win32-x64-msvc': 4.24.0
+      '@rollup/rollup-android-arm-eabi': 4.34.2
+      '@rollup/rollup-android-arm64': 4.34.2
+      '@rollup/rollup-darwin-arm64': 4.34.2
+      '@rollup/rollup-darwin-x64': 4.34.2
+      '@rollup/rollup-freebsd-arm64': 4.34.2
+      '@rollup/rollup-freebsd-x64': 4.34.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.34.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.34.2
+      '@rollup/rollup-linux-arm64-gnu': 4.34.2
+      '@rollup/rollup-linux-arm64-musl': 4.34.2
+      '@rollup/rollup-linux-loongarch64-gnu': 4.34.2
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.34.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.34.2
+      '@rollup/rollup-linux-s390x-gnu': 4.34.2
+      '@rollup/rollup-linux-x64-gnu': 4.34.2
+      '@rollup/rollup-linux-x64-musl': 4.34.2
+      '@rollup/rollup-win32-arm64-msvc': 4.34.2
+      '@rollup/rollup-win32-ia32-msvc': 4.34.2
+      '@rollup/rollup-win32-x64-msvc': 4.34.2
       fsevents: 2.3.3
 
   run-parallel@1.2.0:
@@ -17482,14 +13725,12 @@ snapshots:
 
   rxjs@7.8.1:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
 
-  safe-buffer@5.1.2: {}
-
   safe-buffer@5.2.1: {}
 
   scheduler@0.21.0:
@@ -17504,19 +13745,13 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  schema-dts@1.1.2(typescript@5.4.5):
+  schema-dts@1.1.2(typescript@5.7.3):
     dependencies:
-      typescript: 5.4.5
+      typescript: 5.7.3
 
   scroll-into-view-if-needed@3.1.0:
     dependencies:
-      compute-scroll-into-view: 3.1.0
-
-  scslre@0.3.0:
-    dependencies:
-      '@eslint-community/regexpp': 4.10.0
-      refa: 0.12.1
-      regexp-ast-analysis: 0.7.1
+      compute-scroll-into-view: 3.1.1
 
   section-matter@1.0.0:
     dependencies:
@@ -17532,11 +13767,9 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.6.2: {}
+  semver@7.7.1: {}
 
-  semver@7.6.3: {}
-
-  send@0.18.0:
+  send@0.19.0:
     dependencies:
       debug: 2.6.9
       depd: 2.0.0
@@ -17560,91 +13793,54 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
-  serve-static@1.15.0:
+  serve-static@1.16.2:
     dependencies:
-      encodeurl: 1.0.2
+      encodeurl: 2.0.0
       escape-html: 1.0.3
       parseurl: 1.3.3
-      send: 0.18.0
+      send: 0.19.0
     transitivePeerDependencies:
       - supports-color
 
-  server-only@0.0.1: {}
-
-  set-blocking@2.0.0: {}
-
   setprototypeof@1.2.0: {}
 
   shallow-clone@3.0.1:
     dependencies:
       kind-of: 6.0.3
 
-  sharp@0.31.3:
-    dependencies:
-      color: 4.2.3
-      detect-libc: 2.0.3
-      node-addon-api: 5.1.0
-      prebuild-install: 7.1.2
-      semver: 7.6.2
-      simple-get: 4.0.1
-      tar-fs: 2.1.1
-      tunnel-agent: 0.6.0
-
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
   shebang-regex@3.0.0: {}
 
-  shell-quote@1.8.1: {}
+  shell-quote@1.8.2: {}
 
-  shiki@1.21.1:
+  shiki@1.20.0:
     dependencies:
-      '@shikijs/core': 1.21.1
-      '@shikijs/engine-javascript': 1.21.1
-      '@shikijs/engine-oniguruma': 1.21.1
-      '@shikijs/types': 1.21.1
-      '@shikijs/vscode-textmate': 9.3.0
+      '@shikijs/core': 1.20.0
+      '@shikijs/engine-javascript': 1.20.0
+      '@shikijs/engine-oniguruma': 1.20.0
+      '@shikijs/types': 1.20.0
+      '@shikijs/vscode-textmate': 9.3.1
       '@types/hast': 3.0.4
 
-  short-unique-id@5.2.0: {}
-
   siginfo@2.0.0: {}
 
   signal-exit@3.0.7: {}
 
   signal-exit@4.1.0: {}
 
-  simple-concat@1.0.1: {}
-
-  simple-get@4.0.1:
-    dependencies:
-      decompress-response: 6.0.0
-      once: 1.4.0
-      simple-concat: 1.0.1
-
-  simple-swizzle@0.2.2:
-    dependencies:
-      is-arrayish: 0.3.2
-
   sisteransi@1.0.5: {}
 
   slash@3.0.0: {}
 
-  slashes@3.0.12: {}
-
-  slice-ansi@2.1.0:
-    dependencies:
-      ansi-styles: 3.2.1
-      astral-regex: 1.0.0
-      is-fullwidth-code-point: 2.0.0
-
   smart-buffer@4.2.0: {}
 
-  socks-proxy-agent@8.0.4:
+  socks-proxy-agent@8.0.5:
     dependencies:
-      agent-base: 7.1.1
-      debug: 4.3.7
+      agent-base: 7.1.3
+      debug: 4.4.0
       socks: 2.8.3
     transitivePeerDependencies:
       - supports-color
@@ -17654,13 +13850,11 @@ snapshots:
       ip-address: 9.0.5
       smart-buffer: 4.2.0
 
-  sonner@1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  sonner@1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  source-map-js@1.2.0: {}
-
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
@@ -17682,31 +13876,10 @@ snapshots:
 
   spawn-command@0.0.2: {}
 
-  spdx-correct@3.2.0:
-    dependencies:
-      spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.16
-
-  spdx-exceptions@2.3.0: {}
-
-  spdx-expression-parse@3.0.1:
-    dependencies:
-      spdx-exceptions: 2.3.0
-      spdx-license-ids: 3.0.16
-
-  spdx-expression-parse@4.0.0:
-    dependencies:
-      spdx-exceptions: 2.3.0
-      spdx-license-ids: 3.0.16
-
-  spdx-license-ids@3.0.16: {}
-
   sprintf-js@1.0.3: {}
 
   sprintf-js@1.1.3: {}
 
-  stable-hash@0.0.4: {}
-
   stack-utils@2.0.6:
     dependencies:
       escape-string-regexp: 2.0.0
@@ -17723,7 +13896,7 @@ snapshots:
 
   statuses@2.0.1: {}
 
-  std-env@3.7.0: {}
+  std-env@3.8.0: {}
 
   stdin-discarder@0.1.0:
     dependencies:
@@ -17731,18 +13904,15 @@ snapshots:
 
   streamsearch@1.1.0: {}
 
-  streamx@2.20.2:
+  streamx@2.22.0:
     dependencies:
       fast-fifo: 1.3.2
-      queue-tick: 1.0.1
-      text-decoder: 1.2.1
+      text-decoder: 1.2.3
     optionalDependencies:
-      bare-events: 2.5.0
+      bare-events: 2.5.4
 
   string-argv@0.3.2: {}
 
-  string-ts@2.1.1: {}
-
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -17761,10 +13931,6 @@ snapshots:
       emoji-regex: 10.4.0
       strip-ansi: 7.1.0
 
-  string_decoder@1.1.1:
-    dependencies:
-      safe-buffer: 5.1.2
-
   string_decoder@1.3.0:
     dependencies:
       safe-buffer: 5.2.1
@@ -17780,17 +13946,13 @@ snapshots:
       is-obj: 3.0.0
       is-regexp: 3.1.0
 
-  strip-ansi@5.2.0:
-    dependencies:
-      ansi-regex: 4.1.1
-
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
 
   strip-ansi@7.1.0:
     dependencies:
-      ansi-regex: 6.0.1
+      ansi-regex: 6.1.0
 
   strip-bom-string@1.0.0: {}
 
@@ -17800,51 +13962,31 @@ snapshots:
 
   strip-final-newline@3.0.0: {}
 
-  strip-indent@3.0.0:
-    dependencies:
-      min-indent: 1.0.1
-
   strip-indent@4.0.0:
     dependencies:
       min-indent: 1.0.1
 
-  strip-json-comments@2.0.1: {}
-
-  strip-json-comments@3.1.1: {}
-
-  strnum@1.0.5: {}
-
-  style-to-object@0.4.4:
-    dependencies:
-      inline-style-parser: 0.1.1
-
   style-to-object@1.0.8:
     dependencies:
       inline-style-parser: 0.2.4
 
-  styled-jsx@5.1.1(@babel/core@7.24.7)(react@18.3.1):
+  styled-jsx@5.1.1(@babel/core@7.26.7)(react@18.3.1):
     dependencies:
       client-only: 0.0.1
       react: 18.3.1
     optionalDependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.26.7
 
   sucrase@3.35.0:
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/gen-mapping': 0.3.8
       commander: 4.1.1
-      glob: 10.3.10
+      glob: 10.4.5
       lines-and-columns: 1.2.4
       mz: 2.7.0
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
-  sudo-prompt@9.2.1: {}
-
-  supports-color@5.5.0:
-    dependencies:
-      has-flag: 3.0.0
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -17859,126 +14001,67 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  swr@2.2.5(react@18.3.1):
-    dependencies:
-      client-only: 0.0.1
-      react: 18.3.1
-      use-sync-external-store: 1.2.2(react@18.3.1)
-
   swr@2.2.6-beta.3(react@18.3.1):
     dependencies:
       react: 18.3.1
-      use-sync-external-store: 1.2.2(react@18.3.1)
+      use-sync-external-store: 1.4.0(react@18.3.1)
 
-  synckit@0.6.2:
+  swr@2.3.0(react@18.3.1):
     dependencies:
-      tslib: 2.6.2
-
-  synckit@0.9.0:
-    dependencies:
-      '@pkgr/core': 0.1.1
-      tslib: 2.6.2
+      dequal: 2.0.3
+      react: 18.3.1
+      use-sync-external-store: 1.4.0(react@18.3.1)
 
   tabbable@6.2.0: {}
 
-  tailwind-merge@1.14.0: {}
-
-  tailwind-merge@2.3.0:
-    dependencies:
-      '@babel/runtime': 7.24.7
-
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@17.0.45)(typescript@5.4.5))):
-    dependencies:
-      tailwindcss: 3.4.1(ts-node@10.9.1(@types/node@17.0.45)(typescript@5.4.5))
-
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5))):
-    dependencies:
-      tailwindcss: 3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5))
+  tailwind-merge@2.6.0: {}
 
-  tailwindcss@3.4.1(ts-node@10.9.1(@types/node@17.0.45)(typescript@5.4.5)):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
     dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
-      micromatch: 4.0.5
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.38
-      postcss-import: 15.1.0(postcss@8.4.38)
-      postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@types/node@17.0.45)(typescript@5.4.5))
-      postcss-nested: 6.0.1(postcss@8.4.38)
-      postcss-selector-parser: 6.1.0
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+      tailwindcss: 3.4.17
 
-  tailwindcss@3.4.1(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5)):
+  tailwindcss@3.4.17:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
       chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
-      micromatch: 4.0.5
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.38
-      postcss-import: 15.1.0(postcss@8.4.38)
-      postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5))
-      postcss-nested: 6.0.1(postcss@8.4.38)
-      postcss-selector-parser: 6.1.0
-      resolve: 1.22.8
+      picocolors: 1.1.1
+      postcss: 8.5.1
+      postcss-import: 15.1.0(postcss@8.5.1)
+      postcss-js: 4.0.1(postcss@8.5.1)
+      postcss-load-config: 4.0.2(postcss@8.5.1)
+      postcss-nested: 6.2.0(postcss@8.5.1)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.10
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  tapable@2.2.1: {}
-
-  tar-fs@2.1.1:
-    dependencies:
-      chownr: 1.1.4
-      mkdirp-classic: 0.5.3
-      pump: 3.0.0
-      tar-stream: 2.2.0
-
-  tar-fs@3.0.6:
+  tar-fs@3.0.8:
     dependencies:
-      pump: 3.0.0
+      pump: 3.0.2
       tar-stream: 3.1.7
     optionalDependencies:
-      bare-fs: 2.3.5
-      bare-path: 2.1.3
-
-  tar-stream@2.2.0:
-    dependencies:
-      bl: 4.1.0
-      end-of-stream: 1.4.4
-      fs-constants: 1.0.0
-      inherits: 2.0.4
-      readable-stream: 3.6.2
+      bare-fs: 4.0.1
+      bare-path: 3.0.0
+    transitivePeerDependencies:
+      - bare-buffer
 
   tar-stream@3.1.7:
     dependencies:
       b4a: 1.6.7
       fast-fifo: 1.3.2
-      streamx: 2.20.2
+      streamx: 2.22.0
 
   tar@6.2.1:
     dependencies:
@@ -17989,20 +14072,22 @@ snapshots:
       mkdirp: 1.0.4
       yallist: 4.0.0
 
-  temp-dir@2.0.0: {}
-
-  temp@0.8.4:
-    dependencies:
-      rimraf: 2.6.3
-
-  terser@5.31.1:
+  terser@5.37.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.12.0
+      acorn: 8.14.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
-  text-decoder@1.2.1: {}
+  test-exclude@6.0.0:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 7.2.3
+      minimatch: 3.1.2
+
+  text-decoder@1.2.3:
+    dependencies:
+      b4a: 1.6.7
 
   text-table@0.2.0: {}
 
@@ -18014,37 +14099,32 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
-  three@0.165.0: {}
+  three@0.173.0: {}
 
   throat@5.0.0: {}
 
-  through2@2.0.5:
-    dependencies:
-      readable-stream: 2.3.8
-      xtend: 4.0.2
-
   through@2.3.8: {}
 
   tiny-invariant@1.3.3: {}
 
   tinybench@2.9.0: {}
 
-  tinyexec@0.3.0: {}
+  tinyexec@0.3.2: {}
 
-  tinyglobby@0.2.9:
+  tinyglobby@0.2.10:
     dependencies:
-      fdir: 6.4.0(picomatch@4.0.2)
+      fdir: 6.4.3(picomatch@4.0.2)
       picomatch: 4.0.2
 
-  tinypool@1.0.1: {}
+  tinypool@1.0.2: {}
 
   tinyrainbow@1.2.0: {}
 
   tinyspy@3.0.2: {}
 
-  tmpl@1.0.5: {}
+  tmp@0.2.3: {}
 
-  to-fast-properties@2.0.0: {}
+  tmpl@1.0.5: {}
 
   to-gatsby-remark-plugin@0.1.0:
     dependencies:
@@ -18059,23 +14139,15 @@ snapshots:
       is-buffer: 2.0.5
       vfile: 4.2.1
 
-  toidentifier@1.0.1: {}
-
-  toml-eslint-parser@0.10.0:
-    dependencies:
-      eslint-visitor-keys: 3.4.3
+  toad-cache@3.7.0: {}
 
-  toml-eslint-parser@0.9.3:
-    dependencies:
-      eslint-visitor-keys: 3.4.3
+  toidentifier@1.0.1: {}
 
   toml@3.0.0: {}
 
-  tr46@0.0.3: {}
-
   tr46@1.0.1:
     dependencies:
-      punycode: 2.3.0
+      punycode: 2.3.1
 
   tree-kill@1.2.2: {}
 
@@ -18083,14 +14155,6 @@ snapshots:
 
   trough@2.2.0: {}
 
-  ts-api-utils@1.0.2(typescript@5.4.5):
-    dependencies:
-      typescript: 5.4.5
-
-  ts-api-utils@1.3.0(typescript@5.4.5):
-    dependencies:
-      typescript: 5.4.5
-
   ts-interface-checker@0.1.13: {}
 
   ts-morph@18.0.0:
@@ -18098,68 +14162,9 @@ snapshots:
       '@ts-morph/common': 0.19.0
       code-block-writer: 12.0.0
 
-  ts-node@10.9.1(@types/node@17.0.45)(typescript@5.4.5):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.9
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 17.0.45
-      acorn: 8.12.0
-      acorn-walk: 8.3.3
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.4.5
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optional: true
-
-  ts-node@10.9.1(@types/node@20.11.24)(typescript@4.9.5):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.9
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.11.24
-      acorn: 8.12.0
-      acorn-walk: 8.3.3
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 4.9.5
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optional: true
-
-  ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.9
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.11.24
-      acorn: 8.12.0
-      acorn-walk: 8.3.3
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.4.5
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optional: true
-
-  ts-pattern@5.1.2: {}
-
-  tsconfck@3.1.0(typescript@5.4.5):
+  tsconfck@3.1.4(typescript@5.7.3):
     optionalDependencies:
-      typescript: 5.4.5
+      typescript: 5.7.3
 
   tsconfig-paths@4.2.0:
     dependencies:
@@ -18167,93 +14172,74 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
-  tslib@1.14.1: {}
+  tslib@2.8.1: {}
 
-  tslib@2.6.2: {}
-
-  tsup@6.7.0(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.11.24)(typescript@4.9.5))(typescript@4.9.5):
+  tsup@6.7.0(postcss@8.5.1)(typescript@4.9.5):
     dependencies:
       bundle-require: 4.2.1(esbuild@0.17.19)
       cac: 6.7.14
       chokidar: 3.6.0
-      debug: 4.3.4
+      debug: 4.4.0
       esbuild: 0.17.19
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
-      postcss-load-config: 3.1.4(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.11.24)(typescript@4.9.5))
+      postcss-load-config: 3.1.4(postcss@8.5.1)
       resolve-from: 5.0.0
-      rollup: 3.29.4
+      rollup: 3.29.5
       source-map: 0.8.0-beta.0
       sucrase: 3.35.0
       tree-kill: 1.2.2
     optionalDependencies:
-      postcss: 8.4.38
+      postcss: 8.5.1
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
       - ts-node
 
-  tsutils@3.21.0(typescript@5.4.5):
-    dependencies:
-      tslib: 1.14.1
-      typescript: 5.4.5
-
-  tsx@4.15.5:
+  tsx@4.19.2:
     dependencies:
-      esbuild: 0.21.5
-      get-tsconfig: 4.7.5
+      esbuild: 0.23.1
+      get-tsconfig: 4.10.0
     optionalDependencies:
       fsevents: 2.3.3
 
-  tunnel-agent@0.6.0:
-    dependencies:
-      safe-buffer: 5.2.1
-
-  turbo-darwin-64@2.0.4:
+  turbo-darwin-64@2.4.0:
     optional: true
 
-  turbo-darwin-arm64@2.0.4:
+  turbo-darwin-arm64@2.4.0:
     optional: true
 
-  turbo-linux-64@2.0.4:
+  turbo-linux-64@2.4.0:
     optional: true
 
-  turbo-linux-arm64@2.0.4:
+  turbo-linux-arm64@2.4.0:
     optional: true
 
-  turbo-windows-64@2.0.4:
+  turbo-windows-64@2.4.0:
     optional: true
 
-  turbo-windows-arm64@2.0.4:
+  turbo-windows-arm64@2.4.0:
     optional: true
 
-  turbo@2.0.4:
+  turbo@2.4.0:
     optionalDependencies:
-      turbo-darwin-64: 2.0.4
-      turbo-darwin-arm64: 2.0.4
-      turbo-linux-64: 2.0.4
-      turbo-linux-arm64: 2.0.4
-      turbo-windows-64: 2.0.4
-      turbo-windows-arm64: 2.0.4
-
-  type-check@0.4.0:
-    dependencies:
-      prelude-ls: 1.2.1
+      turbo-darwin-64: 2.4.0
+      turbo-darwin-arm64: 2.4.0
+      turbo-linux-64: 2.4.0
+      turbo-linux-arm64: 2.4.0
+      turbo-windows-64: 2.4.0
+      turbo-windows-arm64: 2.4.0
 
   type-detect@4.0.8: {}
 
-  type-fest@0.20.2: {}
-
-  type-fest@0.6.0: {}
+  type-detect@4.1.0: {}
 
   type-fest@0.7.1: {}
 
-  type-fest@0.8.1: {}
-
   type-fest@3.13.1: {}
 
-  type-fest@4.26.1: {}
+  type-fest@4.33.0: {}
 
   type-flag@3.0.0: {}
 
@@ -18261,33 +14247,31 @@ snapshots:
 
   typescript@4.9.5: {}
 
-  typescript@5.4.5: {}
+  typescript@5.7.3: {}
 
-  ufo@1.5.3: {}
+  ufo@1.5.4: {}
 
   unbzip2-stream@1.4.3:
     dependencies:
       buffer: 5.7.1
       through: 2.3.8
 
-  undici-types@5.26.5: {}
+  undici-types@6.19.8: {}
 
-  unicode-canonical-property-names-ecmascript@2.0.0: {}
+  unicode-canonical-property-names-ecmascript@2.0.1: {}
 
   unicode-match-property-ecmascript@2.0.0:
     dependencies:
-      unicode-canonical-property-names-ecmascript: 2.0.0
+      unicode-canonical-property-names-ecmascript: 2.0.1
       unicode-property-aliases-ecmascript: 2.1.0
 
-  unicode-match-property-value-ecmascript@2.1.0: {}
+  unicode-match-property-value-ecmascript@2.2.0: {}
 
   unicode-property-aliases-ecmascript@2.1.0: {}
 
-  unicorn-magic@0.1.0: {}
-
   unified@10.1.2:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       bail: 2.0.2
       extend: 3.0.2
       is-buffer: 2.0.5
@@ -18297,7 +14281,7 @@ snapshots:
 
   unified@11.0.5:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       bail: 2.0.2
       devlop: 1.1.0
       extend: 3.0.2
@@ -18307,55 +14291,55 @@ snapshots:
 
   unist-builder@4.0.0:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   unist-util-is@5.2.1:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
   unist-util-is@6.0.0:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   unist-util-position-from-estree@2.0.0:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   unist-util-position@5.0.0:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   unist-util-stringify-position@2.0.3:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
   unist-util-stringify-position@3.0.3:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
   unist-util-stringify-position@4.0.0:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   unist-util-visit-parents@5.1.3:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       unist-util-is: 5.2.1
 
   unist-util-visit-parents@6.0.1:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       unist-util-is: 6.0.0
 
   unist-util-visit@4.1.2:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       unist-util-is: 5.2.1
       unist-util-visit-parents: 5.1.3
 
   unist-util-visit@5.0.0:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
@@ -18363,40 +14347,32 @@ snapshots:
 
   universal-user-agent@7.0.2: {}
 
-  universalify@0.1.2: {}
-
   universalify@2.0.1: {}
 
   unpipe@1.0.0: {}
 
-  update-browserslist-db@1.0.16(browserslist@4.23.1):
-    dependencies:
-      browserslist: 4.23.1
-      escalade: 3.1.2
-      picocolors: 1.0.1
-
-  uri-js@4.4.1:
+  update-browserslist-db@1.1.2(browserslist@4.24.4):
     dependencies:
-      punycode: 2.3.0
-
-  urlpattern-polyfill@10.0.0: {}
+      browserslist: 4.24.4
+      escalade: 3.2.0
+      picocolors: 1.1.1
 
-  use-callback-ref@1.3.2(@types/react@18.2.61)(react@18.3.1):
+  use-callback-ref@1.3.3(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       react: 18.3.1
-      tslib: 2.6.2
+      tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  use-sidecar@1.1.2(@types/react@18.2.61)(react@18.3.1):
+  use-sidecar@1.1.3(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       detect-node-es: 1.1.0
       react: 18.3.1
-      tslib: 2.6.2
+      tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.3.18
 
-  use-sync-external-store@1.2.2(react@18.3.1):
+  use-sync-external-store@1.4.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
@@ -18413,21 +14389,9 @@ snapshots:
       kleur: 4.1.5
       sade: 1.8.1
 
-  v8-compile-cache-lib@3.0.1:
-    optional: true
-
-  valibot@0.31.0: {}
-
-  validate-npm-package-license@3.0.4:
-    dependencies:
-      spdx-correct: 3.2.0
-      spdx-expression-parse: 3.0.1
-
-  vary@1.1.2: {}
-
-  vaul@0.9.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  vaul@0.9.9(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
@@ -18436,47 +14400,41 @@ snapshots:
 
   vfile-location@5.0.3:
     dependencies:
-      '@types/unist': 3.0.2
-      vfile: 6.0.1
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
 
   vfile-message@2.0.4:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       unist-util-stringify-position: 2.0.3
 
   vfile-message@3.1.4:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       unist-util-stringify-position: 3.0.3
 
   vfile-message@4.0.2:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       unist-util-stringify-position: 4.0.0
 
   vfile@4.2.1:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       is-buffer: 2.0.5
       unist-util-stringify-position: 2.0.3
       vfile-message: 2.0.4
 
   vfile@5.3.7:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       is-buffer: 2.0.5
       unist-util-stringify-position: 3.0.3
       vfile-message: 3.1.4
 
-  vfile@6.0.1:
-    dependencies:
-      '@types/unist': 3.0.2
-      unist-util-stringify-position: 4.0.0
-      vfile-message: 4.0.2
-
   vfile@6.0.3:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
   victory-vendor@36.9.2:
@@ -18485,8 +14443,8 @@ snapshots:
       '@types/d3-ease': 3.0.2
       '@types/d3-interpolate': 3.0.4
       '@types/d3-scale': 4.0.8
-      '@types/d3-shape': 3.1.6
-      '@types/d3-time': 3.0.3
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
       '@types/d3-timer': 3.0.2
       d3-array: 3.2.4
       d3-ease: 3.0.1
@@ -18496,30 +14454,13 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vite-node@2.1.2(@types/node@17.0.45)(terser@5.31.1):
-    dependencies:
-      cac: 6.7.14
-      debug: 4.3.7
-      pathe: 1.1.2
-      vite: 5.4.8(@types/node@17.0.45)(terser@5.31.1)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    optional: true
-
-  vite-node@2.1.2(@types/node@20.11.24)(terser@5.31.1):
+  vite-node@2.1.9(@types/node@20.17.17)(terser@5.37.0):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.7
+      debug: 4.4.0
+      es-module-lexer: 1.6.0
       pathe: 1.1.2
-      vite: 5.4.8(@types/node@20.11.24)(terser@5.31.1)
+      vite: 5.4.14(@types/node@20.17.17)(terser@5.37.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -18531,96 +14472,51 @@ snapshots:
       - supports-color
       - terser
 
-  vite-tsconfig-paths@4.3.2(typescript@5.4.5)(vite@5.4.8(@types/node@20.11.24)(terser@5.31.1)):
+  vite-tsconfig-paths@4.3.2(typescript@5.7.3)(vite@5.4.14(@types/node@20.17.17)(terser@5.37.0)):
     dependencies:
-      debug: 4.3.4
+      debug: 4.4.0
       globrex: 0.1.2
-      tsconfck: 3.1.0(typescript@5.4.5)
+      tsconfck: 3.1.4(typescript@5.7.3)
     optionalDependencies:
-      vite: 5.4.8(@types/node@20.11.24)(terser@5.31.1)
+      vite: 5.4.14(@types/node@20.17.17)(terser@5.37.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@5.4.8(@types/node@17.0.45)(terser@5.31.1):
-    dependencies:
-      esbuild: 0.21.5
-      postcss: 8.4.47
-      rollup: 4.24.0
-    optionalDependencies:
-      '@types/node': 17.0.45
-      fsevents: 2.3.3
-      terser: 5.31.1
-    optional: true
-
-  vite@5.4.8(@types/node@20.11.24)(terser@5.31.1):
+  vite@5.4.14(@types/node@20.17.17)(terser@5.37.0):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.4.47
-      rollup: 4.24.0
+      postcss: 8.5.1
+      rollup: 4.34.2
     optionalDependencies:
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
       fsevents: 2.3.3
-      terser: 5.31.1
-
-  vitest@2.1.2(@types/node@17.0.45)(terser@5.31.1):
-    dependencies:
-      '@vitest/expect': 2.1.2
-      '@vitest/mocker': 2.1.2(@vitest/spy@2.1.2)(vite@5.4.8(@types/node@20.11.24)(terser@5.31.1))
-      '@vitest/pretty-format': 2.1.2
-      '@vitest/runner': 2.1.2
-      '@vitest/snapshot': 2.1.2
-      '@vitest/spy': 2.1.2
-      '@vitest/utils': 2.1.2
-      chai: 5.1.1
-      debug: 4.3.7
-      magic-string: 0.30.11
-      pathe: 1.1.2
-      std-env: 3.7.0
-      tinybench: 2.9.0
-      tinyexec: 0.3.0
-      tinypool: 1.0.1
-      tinyrainbow: 1.2.0
-      vite: 5.4.8(@types/node@17.0.45)(terser@5.31.1)
-      vite-node: 2.1.2(@types/node@17.0.45)(terser@5.31.1)
-      why-is-node-running: 2.3.0
-    optionalDependencies:
-      '@types/node': 17.0.45
-    transitivePeerDependencies:
-      - less
-      - lightningcss
-      - msw
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    optional: true
-
-  vitest@2.1.2(@types/node@20.11.24)(terser@5.31.1):
-    dependencies:
-      '@vitest/expect': 2.1.2
-      '@vitest/mocker': 2.1.2(@vitest/spy@2.1.2)(vite@5.4.8(@types/node@20.11.24)(terser@5.31.1))
-      '@vitest/pretty-format': 2.1.2
-      '@vitest/runner': 2.1.2
-      '@vitest/snapshot': 2.1.2
-      '@vitest/spy': 2.1.2
-      '@vitest/utils': 2.1.2
-      chai: 5.1.1
-      debug: 4.3.7
-      magic-string: 0.30.11
+      terser: 5.37.0
+
+  vitest@2.1.9(@types/node@20.17.17)(terser@5.37.0):
+    dependencies:
+      '@vitest/expect': 2.1.9
+      '@vitest/mocker': 2.1.9(vite@5.4.14(@types/node@20.17.17)(terser@5.37.0))
+      '@vitest/pretty-format': 2.1.9
+      '@vitest/runner': 2.1.9
+      '@vitest/snapshot': 2.1.9
+      '@vitest/spy': 2.1.9
+      '@vitest/utils': 2.1.9
+      chai: 5.1.2
+      debug: 4.4.0
+      expect-type: 1.1.0
+      magic-string: 0.30.17
       pathe: 1.1.2
-      std-env: 3.7.0
+      std-env: 3.8.0
       tinybench: 2.9.0
-      tinyexec: 0.3.0
-      tinypool: 1.0.1
+      tinyexec: 0.3.2
+      tinypool: 1.0.2
       tinyrainbow: 1.2.0
-      vite: 5.4.8(@types/node@20.11.24)(terser@5.31.1)
-      vite-node: 2.1.2(@types/node@20.11.24)(terser@5.31.1)
+      vite: 5.4.14(@types/node@20.17.17)(terser@5.37.0)
+      vite-node: 2.1.9(@types/node@20.17.17)(terser@5.37.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 20.11.24
+      '@types/node': 20.17.17
     transitivePeerDependencies:
       - less
       - lightningcss
@@ -18634,19 +14530,6 @@ snapshots:
 
   vlq@1.0.1: {}
 
-  vue-eslint-parser@9.4.3(eslint@9.2.0):
-    dependencies:
-      debug: 4.3.4
-      eslint: 9.2.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.5.0
-      lodash: 4.17.21
-      semver: 7.6.2
-    transitivePeerDependencies:
-      - supports-color
-
   walker@1.0.8:
     dependencies:
       makeerror: 1.0.12
@@ -18659,25 +14542,16 @@ snapshots:
 
   web-streams-polyfill@3.3.3: {}
 
-  webidl-conversions@3.0.1: {}
-
   webidl-conversions@4.0.2: {}
 
   whatwg-fetch@3.6.20: {}
 
-  whatwg-url@5.0.0:
-    dependencies:
-      tr46: 0.0.3
-      webidl-conversions: 3.0.1
-
   whatwg-url@7.1.0:
     dependencies:
       lodash.sortby: 4.7.0
       tr46: 1.0.1
       webidl-conversions: 4.0.2
 
-  which-module@2.0.1: {}
-
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
@@ -18687,12 +14561,6 @@ snapshots:
       siginfo: 2.0.0
       stackback: 0.0.2
 
-  wrap-ansi@6.2.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
   wrap-ansi@7.0.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -18707,12 +14575,16 @@ snapshots:
 
   wrappy@1.0.2: {}
 
-  write-file-atomic@2.4.3:
+  write-file-atomic@4.0.2:
     dependencies:
-      graceful-fs: 4.2.11
       imurmurhash: 0.1.4
       signal-exit: 3.0.7
 
+  write-file-atomic@5.0.1:
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 4.1.0
+
   ws@6.2.3:
     dependencies:
       async-limiter: 1.0.1
@@ -18721,55 +14593,22 @@ snapshots:
 
   ws@8.18.0: {}
 
-  xml-name-validator@4.0.0: {}
-
-  xtend@4.0.2: {}
-
-  y18n@4.0.3: {}
-
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}
 
   yallist@4.0.0: {}
 
-  yaml-eslint-parser@1.2.3:
-    dependencies:
-      eslint-visitor-keys: 3.4.3
-      lodash: 4.17.21
-      yaml: 2.4.3
-
   yaml@1.10.2: {}
 
-  yaml@2.4.3: {}
-
-  yaml@2.5.1: {}
-
-  yargs-parser@18.1.3:
-    dependencies:
-      camelcase: 5.3.1
-      decamelize: 1.2.0
+  yaml@2.7.0: {}
 
   yargs-parser@21.1.1: {}
 
-  yargs@15.4.1:
-    dependencies:
-      cliui: 6.0.0
-      decamelize: 1.2.0
-      find-up: 4.1.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      require-main-filename: 2.0.0
-      set-blocking: 2.0.0
-      string-width: 4.2.3
-      which-module: 2.0.1
-      y18n: 4.0.3
-      yargs-parser: 18.1.3
-
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.1
+      escalade: 3.2.0
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
@@ -18781,13 +14620,8 @@ snapshots:
       buffer-crc32: 0.2.13
       fd-slicer: 1.1.0
 
-  yn@3.1.1:
-    optional: true
-
   yocto-queue@0.1.0: {}
 
-  yocto-queue@1.0.0: {}
-
   yocto-queue@1.1.1: {}
 
   yoctocolors@1.0.0: {}
@@ -18796,6 +14630,8 @@ snapshots:
 
   zod@3.23.8: {}
 
+  zod@3.24.1: {}
+
   zustand@3.7.2(react@18.3.1):
     optionalDependencies:
       react: 18.3.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 559a69b6..156f9ba3 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,5 +1,4 @@
 packages:
   - "apps/*"
   - "packages/*"
-  - "templates/*"
   - "!**/test/**"
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 659e3e55..6c95afa4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,272 +1,327 @@
-import type { Config } from 'tailwindcss'
-import { fontFamily } from 'tailwindcss/defaultTheme'
+import type { Config } from "tailwindcss"
+import { fontFamily } from "tailwindcss/defaultTheme"
 
 const config: Config = {
-   darkMode: ['class'],
+   darkMode: ["class"],
    content: [
-      'app/**/*.{ts,tsx}',
-      'components/**/*.{ts,tsx}',
-      './content/**/*.mdx',
-      './registry/**/*.{ts,tsx}',
+      "app/**/*.{ts,tsx}",
+      "components/**/*.{ts,tsx}",
+      "./content/**/*.mdx",
+      "./registry/**/*.{ts,tsx}",
    ],
    theme: {
       container: {
          center: true,
-         padding: '2rem',
+         padding: "2rem",
          screens: {
-            '2xl': '1600px',
+            "2xl": "1600px",
          },
       },
       extend: {
          colors: {
-            'border': 'hsl(var(--border))',
-            'input': 'hsl(var(--input))',
-            'ring': 'hsl(var(--ring))',
-            'background': 'hsl(var(--background))',
-            'foreground': 'hsl(var(--foreground))',
-            'primary': {
-               DEFAULT: 'hsl(var(--primary))',
-               foreground: 'hsl(var(--primary-foreground))',
-            },
-            'secondary': {
-               DEFAULT: 'hsl(var(--secondary))',
-               foreground: 'hsl(var(--secondary-foreground))',
-            },
-            'destructive': {
-               DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
-               foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
-            },
-            'muted': {
-               DEFAULT: 'hsl(var(--muted))',
-               foreground: 'hsl(var(--muted-foreground))',
-            },
-            'accent': {
-               DEFAULT: 'hsl(var(--accent))',
-               foreground: 'hsl(var(--accent-foreground))',
-            },
-            'popover': {
-               DEFAULT: 'hsl(var(--popover))',
-               foreground: 'hsl(var(--popover-foreground))',
-            },
-            'card': {
-               DEFAULT: 'hsl(var(--card))',
-               foreground: 'hsl(var(--card-foreground))',
-            },
-            'sidebar': {
-               'DEFAULT': 'hsl(var(--sidebar-background))',
-               'foreground': 'hsl(var(--sidebar-foreground))',
-               'primary': 'hsl(var(--sidebar-primary))',
-               'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-               'accent': 'hsl(var(--sidebar-accent))',
-               'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-               'border': 'hsl(var(--sidebar-border))',
-               'ring': 'hsl(var(--sidebar-ring))',
-            },
-            'color-1': 'hsl(var(--color-1))',
-            'color-2': 'hsl(var(--color-2))',
-            'color-3': 'hsl(var(--color-3))',
-            'color-4': 'hsl(var(--color-4))',
-            'color-5': 'hsl(var(--color-5))',
+            border: "hsl(var(--border))",
+            input: "hsl(var(--input))",
+            ring: "hsl(var(--ring))",
+            background: "hsl(var(--background))",
+            foreground: "hsl(var(--foreground))",
+            primary: {
+               DEFAULT: "hsl(var(--primary))",
+               foreground: "hsl(var(--primary-foreground))",
+            },
+            secondary: {
+               DEFAULT: "hsl(var(--secondary))",
+               foreground: "hsl(var(--secondary-foreground))",
+            },
+            destructive: {
+               DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+               foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+            },
+            muted: {
+               DEFAULT: "hsl(var(--muted))",
+               foreground: "hsl(var(--muted-foreground))",
+            },
+            accent: {
+               DEFAULT: "hsl(var(--accent))",
+               foreground: "hsl(var(--accent-foreground))",
+            },
+            popover: {
+               DEFAULT: "hsl(var(--popover))",
+               foreground: "hsl(var(--popover-foreground))",
+            },
+            card: {
+               DEFAULT: "hsl(var(--card))",
+               foreground: "hsl(var(--card-foreground))",
+            },
+            sidebar: {
+               DEFAULT: "hsl(var(--sidebar-background))",
+               foreground: "hsl(var(--sidebar-foreground))",
+               primary: "hsl(var(--sidebar-primary))",
+               "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+               accent: "hsl(var(--sidebar-accent))",
+               "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+               border: "hsl(var(--sidebar-border))",
+               ring: "hsl(var(--sidebar-ring))",
+            },
+            "color-1": "hsl(var(--color-1))",
+            "color-2": "hsl(var(--color-2))",
+            "color-3": "hsl(var(--color-3))",
+            "color-4": "hsl(var(--color-4))",
+            "color-5": "hsl(var(--color-5))",
          },
          borderRadius: {
             xl: `calc(var(--radius) + 4px)`,
             lg: `var(--radius)`,
             md: `calc(var(--radius) - 2px)`,
-            sm: 'calc(var(--radius) - 4px)',
+            sm: "calc(var(--radius) - 4px)",
          },
          fontFamily: {
-            sans: ['var(--font-geist-sans)', ...fontFamily.sans],
+            sans: ["var(--font-geist-sans)", ...fontFamily.sans],
+         },
+         animation: {
+            "accordion-down": "accordion-down 0.2s ease-out",
+            "accordion-up": "accordion-up 0.2s ease-out",
+            "caret-blink": "caret-blink 1.25s ease-out infinite",
+            gradient: "gradient 8s linear infinite",
+            meteor: "meteor 5s linear infinite",
+            grid: "grid 15s linear infinite",
+            marquee: "marquee var(--duration) infinite linear",
+            "marquee-vertical":
+               "marquee-vertical var(--duration) linear infinite",
+            flip: "flip calc(var(--spark) * 2) infinite steps(2, end)",
+            rotate: "rotate var(--spark) linear infinite both",
+            "spin-around": "spin-around calc(var(--speed) * 2) infinite linear",
+            slide: "slide var(--speed) ease-in-out infinite alternate",
+            line: "line 2s linear infinite",
+            shimmer: "shimmer 8s infinite",
+            "border-beam":
+               "border-beam calc(var(--duration)*1s) infinite linear",
+            orbit: "orbit calc(var(--duration)*1s) linear infinite",
+            backgroundPositionSpin:
+               "background-position-spin 3000ms infinite alternate",
+            "collapsible-down": "collapsible-down 0.2s ease-out",
+            "collapsible-up": "collapsible-up 0.2s ease-out",
+            shine: "shine var(--duration) infinite linear",
+            pulse: "pulse var(--duration) ease-out infinite",
+            rainbow: "rainbow var(--speed, 2s) infinite linear",
+            "nyx-toc-fade-out": "nyx-toc-fade-out 0.2s ease-out",
+            "line-shadow": "line-shadow 15s linear infinite",
+            "aurora-border": "aurora-border 10s ease-in-out infinite",
+            "aurora-1": "aurora-1 15s ease-in-out infinite",
+            "aurora-2": "aurora-2 15s ease-in-out infinite",
+            "aurora-3": "aurora-3 15s ease-in-out infinite",
+            "aurora-4": "aurora-4 15s ease-in-out infinite",
+            rippling: "rippling var(--duration, 0.6s) ease-out",
+            ripple:
+               "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite",
          },
          keyframes: {
-            'accordion-down': {
-               from: { height: '0' },
-               to: { height: 'var(--radix-accordion-content-height)' },
+            "accordion-down": {
+               from: { height: "0" },
+               to: { height: "var(--radix-accordion-content-height)" },
             },
-            'accordion-up': {
-               from: { height: 'var(--radix-accordion-content-height)' },
-               to: { height: '0' },
+            "accordion-up": {
+               from: { height: "var(--radix-accordion-content-height)" },
+               to: { height: "0" },
             },
-            'caret-blink': {
-               '0%,70%,100%': { opacity: '1' },
-               '20%,50%': { opacity: '0' },
+            "caret-blink": {
+               "0%,70%,100%": { opacity: "1" },
+               "20%,50%": { opacity: "0" },
             },
-            'background-position-spin': {
-               '0%': { backgroundPosition: 'top center' },
-               '100%': { backgroundPosition: 'bottom center' },
+            "background-position-spin": {
+               "0%": { backgroundPosition: "top center" },
+               "100%": { backgroundPosition: "bottom center" },
             },
-            'gradient': {
+            gradient: {
                to: {
-                  backgroundPosition: 'var(--bg-size) 0',
+                  backgroundPosition: "var(--bg-size) 0",
                },
             },
-            'meteor': {
-               '0%': { transform: 'rotate(215deg) translateX(0)', opacity: '1' },
-               '70%': { opacity: '1' },
-               '100%': {
-                  transform: 'rotate(215deg) translateX(-500px)',
-                  opacity: '0',
+            meteor: {
+               "0%": {
+                  transform: "rotate(215deg) translateX(0)",
+                  opacity: "1",
+               },
+               "70%": { opacity: "1" },
+               "100%": {
+                  transform: "rotate(215deg) translateX(-500px)",
+                  opacity: "0",
                },
             },
-            'grid': {
-               '0%': { transform: 'translateY(-50%)' },
-               '100%': { transform: 'translateY(0)' },
+            grid: {
+               "0%": { transform: "translateY(-50%)" },
+               "100%": { transform: "translateY(0)" },
             },
-            'marquee': {
-               from: { transform: 'translateX(0)' },
-               to: { transform: 'translateX(calc(-100% - var(--gap)))' },
+            marquee: {
+               from: { transform: "translateX(0)" },
+               to: { transform: "translateX(calc(-100% - var(--gap)))" },
             },
-            'marquee-vertical': {
-               from: { transform: 'translateY(0)' },
-               to: { transform: 'translateY(calc(-100% - var(--gap)))' },
+            "marquee-vertical": {
+               from: { transform: "translateY(0)" },
+               to: { transform: "translateY(calc(-100% - var(--gap)))" },
             },
-            'flip': {
-               to: { rotate: '360deg' },
+            flip: {
+               to: { rotate: "360deg" },
             },
-            'rotate': {
+            rotate: {
                to: {
-                  transform: 'rotate(90deg)',
+                  transform: "rotate(90deg)",
                },
             },
-            'spin-around': {
-               '0%': {
-                  transform: 'translateZ(0) rotate(0)',
+            "spin-around": {
+               "0%": {
+                  transform: "translateZ(0) rotate(0)",
                },
-               '15%, 35%': {
-                  transform: 'translateZ(0) rotate(90deg)',
+               "15%, 35%": {
+                  transform: "translateZ(0) rotate(90deg)",
                },
-               '65%, 85%': {
-                  transform: 'translateZ(0) rotate(270deg)',
+               "65%, 85%": {
+                  transform: "translateZ(0) rotate(270deg)",
                },
-               '100%': {
-                  transform: 'translateZ(0) rotate(360deg)',
+               "100%": {
+                  transform: "translateZ(0) rotate(360deg)",
                },
             },
-            'ripple': {
-               '0%, 100%': {
-                  transform: 'translate(-50%, -50%) scale(1)',
+            ripple: {
+               "0%, 100%": {
+                  transform: "translate(-50%, -50%) scale(1)",
                },
-               '50%': {
-                  transform: 'translate(-50%, -50%) scale(0.9)',
+               "50%": {
+                  transform: "translate(-50%, -50%) scale(0.9)",
                },
             },
-            'slide': {
+            rippling: {
+               "0%": {
+                  opacity: "1",
+               },
+               "100%": {
+                  transform: "scale(2)",
+                  opacity: "0",
+               },
+            },
+            slide: {
                to: {
-                  transform: 'translate(calc(100cqw - 100%), 0)',
+                  transform: "translate(calc(100cqw - 100%), 0)",
                },
             },
-            'line': {
-               '0%': { 'mask-position-x': '0%' },
-               '100%': { 'mask-position-x': '100%' },
+            line: {
+               "0%": { "mask-position-x": "0%" },
+               "100%": { "mask-position-x": "100%" },
             },
-            'border-beam': {
-               '100%': {
-                  'offset-distance': '100%',
+            "border-beam": {
+               "100%": {
+                  "offset-distance": "100%",
                },
             },
-            'shimmer': {
-               '0%, 90%, 100%': {
-                  'background-position': 'calc(-100% - var(--shimmer-width)) 0',
+            shimmer: {
+               "0%, 90%, 100%": {
+                  "background-position": "calc(-100% - var(--shimmer-width)) 0",
                },
-               '30%, 60%': {
-                  'background-position': 'calc(100% + var(--shimmer-width)) 0',
+               "30%, 60%": {
+                  "background-position": "calc(100% + var(--shimmer-width)) 0",
                },
             },
-            'orbit': {
-               '0%': {
+            orbit: {
+               "0%": {
                   transform:
-              'rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)',
+                     "rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)",
                },
-               '100%': {
+               "100%": {
                   transform:
-              'rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)',
+                     "rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)",
                },
             },
-            'shine-pulse': {
-               '0%': {
-                  'background-position': '0% 0%',
+            "shine-pulse": {
+               "0%": {
+                  "background-position": "0% 0%",
                },
-               '50%': {
-                  'background-position': '100% 100%',
+               "50%": {
+                  "background-position": "100% 100%",
                },
-               'to': {
-                  'background-position': '0% 0%',
+               to: {
+                  "background-position": "0% 0%",
                },
             },
-            'collapsible-down': {
-               from: { height: '0' },
-               to: { height: 'var(--radix-collapsible-content-height)' },
+            "collapsible-down": {
+               from: { height: "0" },
+               to: { height: "var(--radix-collapsible-content-height)" },
             },
-            'collapsible-up': {
-               from: { height: 'var(--radix-collapsible-content-height)' },
-               to: { height: '0' },
+            "collapsible-up": {
+               from: { height: "var(--radix-collapsible-content-height)" },
+               to: { height: "0" },
             },
-            'shine': {
-               '0%': {
-                  'background-position': '0% 0%',
+            shine: {
+               "0%": {
+                  "background-position": "0% 0%",
                },
-               '50%': {
-                  'background-position': '100% 100%',
+               "50%": {
+                  "background-position": "100% 100%",
                },
-               'to': {
-                  'background-position': '0% 0%',
+               to: {
+                  "background-position": "0% 0%",
                },
             },
-            'pulse': {
-               '0%, 100%': { boxShadow: '0 0 0 0 var(--pulse-color)' },
-               '50%': { boxShadow: '0 0 0 8px var(--pulse-color)' },
+            pulse: {
+               "0%, 100%": { boxShadow: "0 0 0 0 var(--pulse-color)" },
+               "50%": { boxShadow: "0 0 0 8px var(--pulse-color)" },
+            },
+            rainbow: {
+               "0%": { "background-position": "0%" },
+               "100%": { "background-position": "200%" },
+            },
+            "nyx-fade-out": {
+               "0%": { opacity: "1" },
+               "100%": { opacity: "0" },
             },
-            'rainbow': {
-               '0%': { 'background-position': '0%' },
-               '100%': { 'background-position': '200%' },
+            "line-shadow": {
+               "0%": { "background-position": "0 0" },
+               "100%": { "background-position": "100% -100%" },
             },
-            'nyx-fade-out': {
-               '0%': { opacity: '1' },
-               '100%': { opacity: '0' },
+            "aurora-border": {
+               "0%, 100%": {
+                  borderRadius: "37% 29% 27% 27% / 28% 25% 41% 37%",
+               },
+               "25%": { borderRadius: "47% 29% 39% 49% / 61% 19% 66% 26%" },
+               "50%": { borderRadius: "57% 23% 47% 72% / 63% 17% 66% 33%" },
+               "75%": { borderRadius: "28% 49% 29% 100% / 93% 20% 64% 25%" },
+            },
+            "aurora-1": {
+               "0%, 100%": { top: "0", right: "0" },
+               "50%": { top: "50%", right: "25%" },
+               "75%": { top: "25%", right: "50%" },
+            },
+            "aurora-2": {
+               "0%, 100%": { top: "0", left: "0" },
+               "60%": { top: "75%", left: "25%" },
+               "85%": { top: "50%", left: "50%" },
+            },
+            "aurora-3": {
+               "0%, 100%": { bottom: "0", left: "0" },
+               "40%": { bottom: "50%", left: "25%" },
+               "65%": { bottom: "25%", left: "50%" },
+            },
+            "aurora-4": {
+               "0%, 100%": { bottom: "0", right: "0" },
+               "50%": { bottom: "25%", right: "40%" },
+               "90%": { bottom: "50%", right: "25%" },
             },
          },
          spacing: {
-            'nyx-layout-top': 'calc(var(--nyx-banner-height) + var(--nyx-nav-height))',
-         },
-         animation: {
-            'accordion-down': 'accordion-down 0.2s ease-out',
-            'accordion-up': 'accordion-up 0.2s ease-out',
-            'caret-blink': 'caret-blink 1.25s ease-out infinite',
-            'gradient': 'gradient 8s linear infinite',
-            'meteor': 'meteor 5s linear infinite',
-            'grid': 'grid 15s linear infinite',
-            'marquee': 'marquee var(--duration) infinite linear',
-            'marquee-vertical': 'marquee-vertical var(--duration) linear infinite',
-            'flip': 'flip calc(var(--spark) * 2) infinite steps(2, end)',
-            'rotate': 'rotate var(--spark) linear infinite both',
-            'spin-around': 'spin-around calc(var(--speed) * 2) infinite linear',
-            'slide': 'slide var(--speed) ease-in-out infinite alternate',
-            'ripple': 'ripple 3400ms ease infinite',
-            'line': 'line 2s linear infinite',
-            'shimmer': 'shimmer 8s infinite',
-            'border-beam': 'border-beam calc(var(--duration)*1s) infinite linear',
-            'orbit': 'orbit calc(var(--duration)*1s) linear infinite',
-            'backgroundPositionSpin':
-            'background-position-spin 3000ms infinite alternate',
-            'collapsible-down': 'collapsible-down 0.2s ease-out',
-            'collapsible-up': 'collapsible-up 0.2s ease-out',
-            'shine': 'shine var(--duration) infinite linear',
-            'pulse': 'pulse var(--duration) ease-out infinite',
-            'rainbow': 'rainbow var(--speed, 2s) infinite linear',
-            'nyx-toc-fade-out': 'nyx-toc-fade-out 0.2s ease-out',
+            "nyx-layout-top":
+               "calc(var(--nyx-banner-height) + var(--nyx-nav-height))",
          },
          borderColor: {
-            'grid-line': 'hsl(var(--border) / 0.5)',
+            "grid-line": "hsl(var(--border) / 0.5)",
          },
          gridTemplateColumns: {
-            'grid-16': 'repeat(16, minmax(0, 1fr))',
-            'grid-12': 'repeat(12, minmax(0, 1fr))',
-            'grid-8': 'repeat(8, minmax(0, 1fr))',
+            "grid-16": "repeat(16, minmax(0, 1fr))",
+            "grid-12": "repeat(12, minmax(0, 1fr))",
+            "grid-8": "repeat(8, minmax(0, 1fr))",
          },
       },
    },
    plugins: [
-      require('tailwindcss-animate'),
-      require('@tailwindcss/typography'),
+      require("tailwindcss-animate"),
+      require("@tailwindcss/typography"),
    ],
 }
 
diff --git a/templates/monorepo-next/.gitignore b/templates/monorepo-next/.gitignore
new file mode 100644
index 00000000..4133babc
--- /dev/null
+++ b/templates/monorepo-next/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+
+
+# Debug
+npm-debug.log*
+
+# Misc
+.DS_Store
+*.pem
diff --git a/packages/nyxb/test/fixtures/config-full/tailwind.config.ts b/templates/monorepo-next/.npmrc
similarity index 100%
rename from packages/nyxb/test/fixtures/config-full/tailwind.config.ts
rename to templates/monorepo-next/.npmrc
diff --git a/templates/monorepo-next/README.md b/templates/monorepo-next/README.md
new file mode 100644
index 00000000..599eacce
--- /dev/null
+++ b/templates/monorepo-next/README.md
@@ -0,0 +1,31 @@
+# nyxb/ui monorepo template
+
+This template is for creating a monorepo with nyxb/ui.
+
+## Usage
+
+```bash
+pnpm dlx nyxb@latest init
+```
+
+## Adding components
+
+To add components to your app, run the following command at the root of your `web` app:
+
+```bash
+pnpm dlx nyxb@latest add button -c apps/web
+```
+
+This will place the ui components in the `packages/ui/src/components` directory.
+
+## Tailwind
+
+Your `tailwind.config.ts` and `globals.css` are already set up to use the components from the `ui` package.
+
+## Using components
+
+To use the components in your app, import them from the `ui` package.
+
+```tsx
+import { Button } from "@workspace/ui/components/ui/button"
+```
diff --git a/packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/favicon.ico b/templates/monorepo-next/apps/web/app/favicon.ico
similarity index 100%
rename from packages/nyxb/test/fixtures/frameworks/next-app-custom-alias/app/favicon.ico
rename to templates/monorepo-next/apps/web/app/favicon.ico
diff --git a/templates/monorepo-next/apps/web/app/layout.tsx b/templates/monorepo-next/apps/web/app/layout.tsx
new file mode 100644
index 00000000..32b208dd
--- /dev/null
+++ b/templates/monorepo-next/apps/web/app/layout.tsx
@@ -0,0 +1,30 @@
+import { Geist, Geist_Mono } from "next/font/google"
+
+import "@workspace/ui/globals.css"
+import { Providers } from "~/components/providers"
+
+const fontSans = Geist({
+  subsets: ["latin"],
+  variable: "--font-sans",
+})
+
+const fontMono = Geist_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+})
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased `}
+      >
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
diff --git a/templates/monorepo-next/apps/web/app/page.tsx b/templates/monorepo-next/apps/web/app/page.tsx
new file mode 100644
index 00000000..e4f893aa
--- /dev/null
+++ b/templates/monorepo-next/apps/web/app/page.tsx
@@ -0,0 +1,12 @@
+import { Button } from "@workspace/ui/components/button"
+
+export default function Page() {
+  return (
+    <div className="flex items-center justify-center min-h-svh">
+      <div className="flex flex-col items-center justify-center gap-4">
+        <h1 className="text-2xl font-bold">Hello World</h1>
+        <Button size="sm">Button</Button>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/nyxb/test/fixtures/config-partial/tailwind.config.ts b/templates/monorepo-next/apps/web/components/.gitkeep
similarity index 100%
rename from packages/nyxb/test/fixtures/config-partial/tailwind.config.ts
rename to templates/monorepo-next/apps/web/components/.gitkeep
diff --git a/templates/monorepo-next/apps/web/components/providers.tsx b/templates/monorepo-next/apps/web/components/providers.tsx
new file mode 100644
index 00000000..25e8677d
--- /dev/null
+++ b/templates/monorepo-next/apps/web/components/providers.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      enableColorScheme
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}
diff --git a/templates/monorepo-next/apps/web/hooks/.gitkeep b/templates/monorepo-next/apps/web/hooks/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/templates/monorepo-next/apps/web/lib/.gitkeep b/templates/monorepo-next/apps/web/lib/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/templates/monorepo-next/apps/web/next-env.d.ts b/templates/monorepo-next/apps/web/next-env.d.ts
new file mode 100644
index 00000000..1b3be084
--- /dev/null
+++ b/templates/monorepo-next/apps/web/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/templates/monorepo-next/apps/web/next.config.mjs b/templates/monorepo-next/apps/web/next.config.mjs
new file mode 100644
index 00000000..bd167d93
--- /dev/null
+++ b/templates/monorepo-next/apps/web/next.config.mjs
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@workspace/ui"],
+}
+
+export default nextConfig
diff --git a/templates/monorepo-next/apps/web/nyxbui.json b/templates/monorepo-next/apps/web/nyxbui.json
new file mode 100644
index 00000000..a9f6c741
--- /dev/null
+++ b/templates/monorepo-next/apps/web/nyxbui.json
@@ -0,0 +1,20 @@
+{
+   "$schema": "https://nyxbui.design/schema.json",
+   "style": "miami",
+   "rsc": true,
+   "tsx": true,
+   "tailwind": {
+      "config": "../../packages/ui/tailwind.config.ts",
+      "css": "../../packages/ui/src/styles/globals.css",
+      "baseColor": "zinc",
+      "cssVariables": true
+   },
+   "iconLibrary": "lucide",
+   "aliases": {
+      "components": "~/components",
+      "hooks": "~/hooks",
+      "lib": "~/lib",
+      "utils": "@workspace/ui/lib/utils",
+      "ui": "@workspace/ui/components"
+   }
+}
diff --git a/templates/monorepo-next/apps/web/package.json b/templates/monorepo-next/apps/web/package.json
new file mode 100644
index 00000000..7040757c
--- /dev/null
+++ b/templates/monorepo-next/apps/web/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "web",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@workspace/ui": "workspace:*",
+    "lucide-react": "0.456.0",
+    "next-themes": "^0.4.3",
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "18.3.0",
+    "@types/react-dom": "18.3.1",
+    "@workspace/typescript": "workspace:*",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}
diff --git a/templates/monorepo-next/apps/web/postcss.config.mjs b/templates/monorepo-next/apps/web/postcss.config.mjs
new file mode 100644
index 00000000..535dec4a
--- /dev/null
+++ b/templates/monorepo-next/apps/web/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from "@workspace/ui/postcss.config";
\ No newline at end of file
diff --git a/templates/monorepo-next/apps/web/tailwind.config.ts b/templates/monorepo-next/apps/web/tailwind.config.ts
new file mode 100644
index 00000000..f119228a
--- /dev/null
+++ b/templates/monorepo-next/apps/web/tailwind.config.ts
@@ -0,0 +1 @@
+export * from "@workspace/ui/tailwind.config";
\ No newline at end of file
diff --git a/templates/monorepo-next/apps/web/tsconfig.json b/templates/monorepo-next/apps/web/tsconfig.json
new file mode 100644
index 00000000..23272110
--- /dev/null
+++ b/templates/monorepo-next/apps/web/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "@workspace/typescript/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@workspace/ui/*": ["../../packages/ui/src/*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "next.config.mjs",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}
diff --git a/templates/monorepo-next/biome.json b/templates/monorepo-next/biome.json
new file mode 100644
index 00000000..68713339
--- /dev/null
+++ b/templates/monorepo-next/biome.json
@@ -0,0 +1,76 @@
+{
+   "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+   "vcs": {
+      "enabled": false,
+      "clientKind": "git",
+      "useIgnoreFile": false
+   },
+   "files": {
+      "ignoreUnknown": false,
+      "ignore": ["./styles/", "./.contentlayer"]
+   },
+   "formatter": {
+      "enabled": true,
+      "indentStyle": "space",
+      "indentWidth": 3,
+      "lineEnding": "lf"
+   },
+   "javascript": {
+      "formatter": {
+         "quoteStyle": "double",
+         "semicolons": "asNeeded"
+      }
+   },
+   "organizeImports": {
+      "enabled": true
+   },
+   "linter": {
+      "enabled": true,
+      "rules": {
+         "recommended": true,
+         "style": {
+            "useNodejsImportProtocol": "off",
+            "noUnusedTemplateLiteral": "off",
+            "noNonNullAssertion": "off",
+            "noParameterAssign": "off",
+            "useTemplate": "off",
+            "noUselessElse": "off",
+            "useSelfClosingElements": "off"
+         },
+         "suspicious": {
+            "noImplicitAnyLet": "off",
+            "noArrayIndexKey": "off",
+            "noShadowRestrictedNames": "off",
+            "noExplicitAny": "off",
+            "noRedeclare": "off"
+         },
+         "complexity": {
+            "noForEach": "off",
+            "useLiteralKeys": "off",
+            "useOptionalChain": "off"
+         },
+         "correctness": {
+            "useJsxKeyInIterable": "off",
+            "useExhaustiveDependencies": "off",
+            "noUnnecessaryContinue": "off"
+         },
+         "a11y": {
+            "useIframeTitle": "off",
+            "noSvgWithoutTitle": "off",
+            "useValidAnchor": "off",
+            "noRedundantAlt": "off",
+            "useButtonType": "off",
+            "useSemanticElements": "off",
+            "useAltText": "off",
+            "useValidAriaRole": "off",
+            "noRedundantRoles": "off"
+         },
+         "security": {
+            "noDangerouslySetInnerHtml": "off"
+         },
+         "performance": {
+            "noDelete": "off"
+         }
+      }
+   }
+}
diff --git a/templates/monorepo-next/package.json b/templates/monorepo-next/package.json
new file mode 100644
index 00000000..d755f204
--- /dev/null
+++ b/templates/monorepo-next/package.json
@@ -0,0 +1,20 @@
+{
+   "name": "nyxbui-monorepo",
+   "version": "0.0.1",
+   "private": true,
+   "packageManager": "pnpm@9.15.4",
+   "engines": {
+      "node": ">=20"
+   },
+   "scripts": {
+      "build": "turbo build",
+      "dev": "turbo dev",
+      "check": "biome check .",
+      "check:fix": "biome check . --write"
+   },
+   "devDependencies": {
+      "@workspace/typescript": "workspace:*",
+      "turbo": "^2.3.0",
+      "typescript": "5.5.4"
+   }
+}
diff --git a/templates/monorepo-next/packages/typescript-config/README.md b/templates/monorepo-next/packages/typescript-config/README.md
new file mode 100644
index 00000000..ccb8a688
--- /dev/null
+++ b/templates/monorepo-next/packages/typescript-config/README.md
@@ -0,0 +1,3 @@
+# `@workspace/typescript`
+
+Shared typescript configuration for the workspace.
diff --git a/templates/monorepo-next/packages/typescript-config/base.json b/templates/monorepo-next/packages/typescript-config/base.json
new file mode 100644
index 00000000..0f80cfd6
--- /dev/null
+++ b/templates/monorepo-next/packages/typescript-config/base.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "isolatedModules": true,
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "module": "NodeNext",
+    "moduleDetection": "force",
+    "moduleResolution": "NodeNext",
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022"
+  }
+}
diff --git a/templates/monorepo-next/packages/typescript-config/nextjs.json b/templates/monorepo-next/packages/typescript-config/nextjs.json
new file mode 100644
index 00000000..44f42899
--- /dev/null
+++ b/templates/monorepo-next/packages/typescript-config/nextjs.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Next.js",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "plugins": [{ "name": "next" }],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowJs": true,
+    "jsx": "preserve",
+    "noEmit": true
+  }
+}
diff --git a/templates/monorepo-next/packages/typescript-config/package.json b/templates/monorepo-next/packages/typescript-config/package.json
new file mode 100644
index 00000000..116acb12
--- /dev/null
+++ b/templates/monorepo-next/packages/typescript-config/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@workspace/typescript",
+  "version": "0.0.0",
+  "private": true,
+  "license": "PROPRIETARY",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/templates/monorepo-next/packages/typescript-config/react-library.json b/templates/monorepo-next/packages/typescript-config/react-library.json
new file mode 100644
index 00000000..a755ffea
--- /dev/null
+++ b/templates/monorepo-next/packages/typescript-config/react-library.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React Library",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+  }
+}
diff --git a/templates/monorepo-next/packages/ui/nyxbui.json b/templates/monorepo-next/packages/ui/nyxbui.json
new file mode 100644
index 00000000..721c8e08
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/nyxbui.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://nyxbui.design/schema.json",
+  "style": "miami",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@workspace/ui/components",
+    "utils": "@workspace/ui/lib/utils",
+    "hooks": "@workspace/ui/hooks",
+    "lib": "@workspace/ui/lib",
+    "ui": "@workspace/ui/components"
+  }
+}
diff --git a/templates/monorepo-next/packages/ui/package.json b/templates/monorepo-next/packages/ui/package.json
new file mode 100644
index 00000000..77404555
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@workspace/ui",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "check": "biome check .",
+    "check:fix": "biome check . --write"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.1.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "0.456.0",
+    "next-themes": "^0.4.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@turbo/gen": "^2.2.3",
+    "@types/node": "^22.9.0",
+    "@types/react": "18.3.0",
+    "@types/react-dom": "18.3.1",
+    "@workspace/typescript": "workspace:*",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "react": "^18.3.1",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./postcss.config": "./postcss.config.mjs",
+    "./tailwind.config": "./tailwind.config.ts",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
+  }
+}
diff --git a/templates/monorepo-next/packages/ui/postcss.config.mjs b/templates/monorepo-next/packages/ui/postcss.config.mjs
new file mode 100644
index 00000000..0c2a10b8
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/postcss.config.mjs
@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;
\ No newline at end of file
diff --git a/templates/monorepo-next/packages/ui/src/components/.gitkeep b/templates/monorepo-next/packages/ui/src/components/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/templates/monorepo-next/packages/ui/src/components/button.tsx b/templates/monorepo-next/packages/ui/src/components/button.tsx
new file mode 100644
index 00000000..8bfd7c8e
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/src/components/button.tsx
@@ -0,0 +1,56 @@
+import { Slot } from "@radix-ui/react-slot"
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
+
+import { ny } from "@workspace/ui/lib/utils"
+
+const buttonVariants = cva(
+   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+   {
+      variants: {
+         variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive:
+               "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            outline:
+               "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            secondary:
+               "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 hover:underline",
+         },
+         size: {
+            default: "h-10 px-4 py-2",
+            sm: "h-9 rounded-md px-3",
+            lg: "h-11 rounded-md px-8",
+            icon: "h-10 w-10",
+         },
+      },
+      defaultVariants: {
+         variant: "default",
+         size: "default",
+      },
+   },
+)
+
+export interface ButtonProps
+   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+      VariantProps<typeof buttonVariants> {
+   asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+   ({ className, variant, size, asChild = false, ...props }, ref) => {
+      const Comp = asChild ? Slot : "button"
+      return (
+         <Comp
+            className={ny(buttonVariants({ variant, size, className }))}
+            ref={ref}
+            {...props}
+         />
+      )
+   },
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/templates/monorepo-next/packages/ui/src/hooks/.gitkeep b/templates/monorepo-next/packages/ui/src/hooks/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/templates/monorepo-next/packages/ui/src/lib/utils.ts b/templates/monorepo-next/packages/ui/src/lib/utils.ts
new file mode 100644
index 00000000..9c376563
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function ny(...inputs: ClassValue[]) {
+   return twMerge(clsx(inputs))
+}
diff --git a/templates/monorepo-next/packages/ui/src/styles/globals.css b/templates/monorepo-next/packages/ui/src/styles/globals.css
new file mode 100644
index 00000000..d0c38fe2
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/src/styles/globals.css
@@ -0,0 +1,68 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/templates/monorepo-next/packages/ui/tailwind.config.ts b/templates/monorepo-next/packages/ui/tailwind.config.ts
new file mode 100644
index 00000000..080680c3
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/tailwind.config.ts
@@ -0,0 +1,63 @@
+import type { Config } from "tailwindcss"
+import tailwindcssAnimate from "tailwindcss-animate"
+import { fontFamily } from "tailwindcss/defaultTheme"
+
+const config = {
+  darkMode: ["class"],
+  content: [
+    "app/**/*.{ts,tsx}",
+    "components/**/*.{ts,tsx}",
+    "../../packages/ui/src/components/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+        mono: ["var(--font-mono)", ...fontFamily.mono],
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [tailwindcssAnimate],
+} satisfies Config
+
+export default config
diff --git a/templates/monorepo-next/packages/ui/tsconfig.json b/templates/monorepo-next/packages/ui/tsconfig.json
new file mode 100644
index 00000000..c3a4abaf
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@workspace/typescript/react-library.json",
+  "compilerOptions": {
+    //"outDir": "dist"
+    "baseUrl": ".",
+    "paths": {
+      "@workspace/ui/*": ["./src/*"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/templates/monorepo-next/packages/ui/tsconfig.lint.json b/templates/monorepo-next/packages/ui/tsconfig.lint.json
new file mode 100644
index 00000000..b3db3f76
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/tsconfig.lint.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@workspace/typescript/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/templates/monorepo-next/pnpm-lock.yaml b/templates/monorepo-next/pnpm-lock.yaml
new file mode 100644
index 00000000..a50bb1a3
--- /dev/null
+++ b/templates/monorepo-next/pnpm-lock.yaml
@@ -0,0 +1,3223 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      '@workspace/typescript':
+        specifier: workspace:*
+        version: link:packages/typescript-config
+      turbo:
+        specifier: ^2.3.0
+        version: 2.3.3
+      typescript:
+        specifier: 5.5.4
+        version: 5.5.4
+
+  apps/web:
+    dependencies:
+      '@workspace/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
+      lucide-react:
+        specifier: 0.456.0
+        version: 0.456.0(react@19.0.0)
+      next:
+        specifier: ^15.1.0
+        version: 15.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      next-themes:
+        specifier: ^0.4.3
+        version: 0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react:
+        specifier: ^19.0.0
+        version: 19.0.0
+      react-dom:
+        specifier: ^19.0.0
+        version: 19.0.0(react@19.0.0)
+    devDependencies:
+      '@types/node':
+        specifier: ^20
+        version: 20.17.10
+      '@types/react':
+        specifier: 18.3.0
+        version: 18.3.0
+      '@types/react-dom':
+        specifier: 18.3.1
+        version: 18.3.1
+      '@workspace/typescript':
+        specifier: workspace:*
+        version: link:../../packages/typescript-config
+      postcss:
+        specifier: ^8
+        version: 8.4.49
+      tailwindcss:
+        specifier: ^3.4.1
+        version: 3.4.16(ts-node@10.9.2(@types/node@20.17.10)(typescript@5.7.2))
+      typescript:
+        specifier: ^5
+        version: 5.7.2
+
+  packages/typescript-config: {}
+
+  packages/ui:
+    dependencies:
+      '@radix-ui/react-slot':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react@18.3.0)(react@19.0.0)
+      class-variance-authority:
+        specifier: ^0.7.0
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: 0.456.0
+        version: 0.456.0(react@19.0.0)
+      next-themes:
+        specifier: ^0.4.3
+        version: 0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react:
+        specifier: ^19.0.0
+        version: 19.0.0
+      react-dom:
+        specifier: ^19.0.0
+        version: 19.0.0(react@19.0.0)
+      tailwind-merge:
+        specifier: ^2.5.4
+        version: 2.5.5
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.4.16(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.2)))
+      zod:
+        specifier: ^3.23.8
+        version: 3.24.1
+    devDependencies:
+      '@turbo/gen':
+        specifier: ^2.2.3
+        version: 2.3.3(@types/node@22.10.2)(typescript@5.7.2)
+      '@types/node':
+        specifier: ^22.9.0
+        version: 22.10.2
+      '@types/react':
+        specifier: 18.3.0
+        version: 18.3.0
+      '@types/react-dom':
+        specifier: 18.3.1
+        version: 18.3.1
+      '@workspace/typescript':
+        specifier: workspace:*
+        version: link:../typescript-config
+      autoprefixer:
+        specifier: ^10.4.20
+        version: 10.4.20(postcss@8.4.49)
+      postcss:
+        specifier: ^8.4.47
+        version: 8.4.49
+      tailwindcss:
+        specifier: ^3.4.14
+        version: 3.4.16(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.2))
+      typescript:
+        specifier: ^5.6.3
+        version: 5.7.2
+
+packages:
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@babel/runtime-corejs3@7.26.0':
+    resolution: {integrity: sha512-YXHu5lN8kJCb1LOb9PgV6pvak43X2h4HvRApcN5SdWeaItQOzfn1hgP6jasD6KWQyJDBxrVmA9o9OivlnNJK/w==}
+    engines: {node: '>=6.9.0'}
+
+  '@cspotcode/source-map-support@0.8.1':
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+
+  '@emnapi/runtime@1.3.1':
+    resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
+
+  '@img/sharp-darwin-arm64@0.33.5':
+    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.33.5':
+    resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
+    resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.0.4':
+    resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.0.4':
+    resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.0.5':
+    resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.33.5':
+    resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.33.5':
+    resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.33.5':
+    resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.33.5':
+    resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-wasm32@0.33.5':
+    resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-ia32@0.33.5':
+    resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.33.5':
+    resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
+  '@jridgewell/trace-mapping@0.3.9':
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+
+  '@next/env@15.1.0':
+    resolution: {integrity: sha512-UcCO481cROsqJuszPPXJnb7GGuLq617ve4xuAyyNG4VSSocJNtMU5Fsx+Lp6mlN8c7W58aZLc5y6D/2xNmaK+w==}
+
+  '@next/swc-darwin-arm64@15.1.0':
+    resolution: {integrity: sha512-ZU8d7xxpX14uIaFC3nsr4L++5ZS/AkWDm1PzPO6gD9xWhFkOj2hzSbSIxoncsnlJXB1CbLOfGVN4Zk9tg83PUw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@15.1.0':
+    resolution: {integrity: sha512-DQ3RiUoW2XC9FcSM4ffpfndq1EsLV0fj0/UY33i7eklW5akPUCo6OX2qkcLXZ3jyPdo4sf2flwAED3AAq3Om2Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@15.1.0':
+    resolution: {integrity: sha512-M+vhTovRS2F//LMx9KtxbkWk627l5Q7AqXWWWrfIzNIaUFiz2/NkOFkxCFyNyGACi5YbA8aekzCLtbDyfF/v5Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-arm64-musl@15.1.0':
+    resolution: {integrity: sha512-Qn6vOuwaTCx3pNwygpSGtdIu0TfS1KiaYLYXLH5zq1scoTXdwYfdZtwvJTpB1WrLgiQE2Ne2kt8MZok3HlFqmg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-x64-gnu@15.1.0':
+    resolution: {integrity: sha512-yeNh9ofMqzOZ5yTOk+2rwncBzucc6a1lyqtg8xZv0rH5znyjxHOWsoUtSq4cUTeeBIiXXX51QOOe+VoCjdXJRw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-linux-x64-musl@15.1.0':
+    resolution: {integrity: sha512-t9IfNkHQs/uKgPoyEtU912MG6a1j7Had37cSUyLTKx9MnUpjj+ZDKw9OyqTI9OwIIv0wmkr1pkZy+3T5pxhJPg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-win32-arm64-msvc@15.1.0':
+    resolution: {integrity: sha512-WEAoHyG14t5sTavZa1c6BnOIEukll9iqFRTavqRVPfYmfegOAd5MaZfXgOGG6kGo1RduyGdTHD4+YZQSdsNZXg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@15.1.0':
+    resolution: {integrity: sha512-J1YdKuJv9xcixzXR24Dv+4SaDKc2jj31IVUEMdO5xJivMTXuE6MAdIi4qPjSymHuFG8O5wbfWKnhJUcHHpj5CA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
+  '@radix-ui/react-compose-refs@1.1.1':
+    resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-slot@1.1.1':
+    resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@tootallnate/quickjs-emscripten@0.23.0':
+    resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
+
+  '@tsconfig/node10@1.0.11':
+    resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
+
+  '@tsconfig/node12@1.0.11':
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+
+  '@tsconfig/node14@1.0.3':
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+
+  '@tsconfig/node16@1.0.4':
+    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+
+  '@turbo/gen@2.3.3':
+    resolution: {integrity: sha512-MIXXX0sVRvfTWOrLhjDT1KJ15dqzRlNlHIvNeWoS5ZtTMQ9XuBl9D5ek/5vMj77n+84mFRS/VKAoEuScOIWwaw==}
+    hasBin: true
+
+  '@turbo/workspaces@2.3.3':
+    resolution: {integrity: sha512-PSys7Hy5NuX76HBleOkd8wlRtI4GCzLHS2XUpKeGIj0vpzH4fqE+tpi7fBb5t9U7UiyM6E6pyabSKjoD2zUsoQ==}
+    hasBin: true
+
+  '@types/glob@7.2.0':
+    resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
+
+  '@types/inquirer@6.5.0':
+    resolution: {integrity: sha512-rjaYQ9b9y/VFGOpqBEXRavc3jh0a+e6evAbI31tMda8VlPaSy0AZJfXsvmIe3wklc7W6C3zCSfleuMXR7NOyXw==}
+
+  '@types/minimatch@5.1.2':
+    resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
+
+  '@types/node@20.17.10':
+    resolution: {integrity: sha512-/jrvh5h6NXhEauFFexRin69nA0uHJ5gwk4iDivp/DeoEua3uwCUto6PC86IpRITBOs4+6i2I56K5x5b6WYGXHA==}
+
+  '@types/node@22.10.2':
+    resolution: {integrity: sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==}
+
+  '@types/prop-types@15.7.14':
+    resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
+
+  '@types/react-dom@18.3.1':
+    resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==}
+
+  '@types/react@18.3.0':
+    resolution: {integrity: sha512-DiUcKjzE6soLyln8NNZmyhcQjVv+WsUIFSqetMN0p8927OztKT4VTfFTqsbAi5oAGIcgOmOajlfBqyptDDjZRw==}
+
+  '@types/through@0.0.33':
+    resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==}
+
+  '@types/tinycolor2@1.4.6':
+    resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
+
+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+    engines: {node: '>=0.4.0'}
+
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@7.1.3:
+    resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
+    engines: {node: '>= 14'}
+
+  aggregate-error@3.1.0:
+    resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
+    engines: {node: '>=8'}
+
+  ansi-escapes@4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    engines: {node: '>=12'}
+
+  ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  arg@4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  ast-types@0.13.4:
+    resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
+    engines: {node: '>=4'}
+
+  autoprefixer@10.4.20:
+    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  basic-ftp@5.0.5:
+    resolution: {integrity: sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==}
+    engines: {node: '>=10.0.0'}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+
+  brace-expansion@1.1.11:
+    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+
+  brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.24.3:
+    resolution: {integrity: sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+
+  busboy@1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+
+  camel-case@3.0.0:
+    resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
+
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  caniuse-lite@1.0.30001688:
+    resolution: {integrity: sha512-Nmqpru91cuABu/DTCXbM2NSRHzM2uVHfPnhJ/1zEAJx/ILBRVmz3pzH4N7DZqbdG0gWClsCC05Oj0mJ/1AWMbA==}
+
+  chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+
+  chalk@3.0.0:
+    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
+    engines: {node: '>=8'}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  change-case@3.1.0:
+    resolution: {integrity: sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==}
+
+  chardet@0.7.0:
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  clean-stack@2.2.0:
+    resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
+    engines: {node: '>=6'}
+
+  cli-cursor@3.1.0:
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
+
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
+
+  cli-width@3.0.0:
+    resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
+    engines: {node: '>= 10'}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  clone@1.0.4:
+    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
+    engines: {node: '>=0.8'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+
+  color@4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+
+  commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  constant-case@2.0.0:
+    resolution: {integrity: sha512-eS0N9WwmjTqrOmR3o83F5vW8Z+9R1HnVz3xmzT2PMFug9ly+Au/fxRWlEBSb6LcZwspSsEn9Xs1uw9YgzAg1EQ==}
+
+  core-js-pure@3.39.0:
+    resolution: {integrity: sha512-7fEcWwKI4rJinnK+wLTezeg2smbFFdSBP6E2kQZNbnzM2s1rpKQ6aaRteZSSg7FLU3P0HGGVo/gbpfanU36urg==}
+
+  create-require@1.1.1:
+    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  data-uri-to-buffer@6.0.2:
+    resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
+    engines: {node: '>= 14'}
+
+  debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  deep-extend@0.6.0:
+    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
+    engines: {node: '>=4.0.0'}
+
+  defaults@1.0.4:
+    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
+
+  degenerator@5.0.1:
+    resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
+    engines: {node: '>= 14'}
+
+  del@5.1.0:
+    resolution: {integrity: sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==}
+    engines: {node: '>=8'}
+
+  detect-libc@2.0.3:
+    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
+    engines: {node: '>=8'}
+
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  diff@4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  dot-case@2.1.1:
+    resolution: {integrity: sha512-HnM6ZlFqcajLsyudHq7LeeLDr2rFAVYtDv/hV5qchQEidSck8j9OPUsXY9KwJv/lHMtYlX4DjRQqwFYa+0r8Ug==}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  electron-to-chromium@1.5.73:
+    resolution: {integrity: sha512-8wGNxG9tAG5KhGd3eeA0o6ixhiNdgr0DcHWm85XPCphwZgD1lIEoi6t3VERayWao7SF7AAZTw6oARGJeVjH8Kg==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  external-editor@3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+
+  fast-glob@3.3.2:
+    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+    engines: {node: '>=8.6.0'}
+
+  fastq@1.17.1:
+    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+
+  figures@3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  foreground-child@3.3.0:
+    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
+    engines: {node: '>=14'}
+
+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+
+  fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-uri@6.0.4:
+    resolution: {integrity: sha512-E1b1lFFLvLgak2whF2xDBcOy6NLVGZBqqjJjsIhvopKfWWEi64pLVTWWehV8KlLerZkfNTA95sTe2OdJKm1OzQ==}
+    engines: {node: '>= 14'}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
+  globby@10.0.2:
+    resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==}
+    engines: {node: '>=8'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  gradient-string@2.0.2:
+    resolution: {integrity: sha512-rEDCuqUQ4tbD78TpzsMtt5OIf0cBCSDWSJtUDaF6JsAh+k0v9r++NzxNEG87oDZx9ZwGhD8DaezR2L/yrw0Jdw==}
+    engines: {node: '>=10'}
+
+  handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+
+  has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  header-case@1.0.1:
+    resolution: {integrity: sha512-i0q9mkOeSuhXw6bGgiQCCBgY/jlZuV/7dZXyZ9c6LcBrqwvT8eT719E9uxE5LiZftdl+z81Ugbg/VvXV4OJOeQ==}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  inquirer@7.3.3:
+    resolution: {integrity: sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==}
+    engines: {node: '>=8.0.0'}
+
+  inquirer@8.2.6:
+    resolution: {integrity: sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==}
+    engines: {node: '>=12.0.0'}
+
+  ip-address@9.0.5:
+    resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
+    engines: {node: '>= 12'}
+
+  is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-core-module@2.16.0:
+    resolution: {integrity: sha512-urTSINYfAYgcbLb0yDQ6egFm6h3Mo1DcF9EkyXSRjjzdHbsulg01qhwWuXdOoUBuTkbQ80KDboXa0vFJ+BDH+g==}
+    engines: {node: '>= 0.4'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-interactive@1.0.0:
+    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
+    engines: {node: '>=8'}
+
+  is-lower-case@1.1.3:
+    resolution: {integrity: sha512-+5A1e/WJpLLXZEDlgz4G//WYSHyQBD32qa4Jd3Lw06qQlv3fJHnp3YIHjTQSGzHMgzmVKz2ZP3rBxTHkPw/lxA==}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-path-cwd@2.2.0:
+    resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
+    engines: {node: '>=6'}
+
+  is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-unicode-supported@0.1.0:
+    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
+    engines: {node: '>=10'}
+
+  is-upper-case@1.1.2:
+    resolution: {integrity: sha512-GQYSJMgfeAmVwh9ixyk888l7OIhNAGKtY6QA+IrWlu9MDTCaXmeozOZ2S9Knj7bQwBO/H6J2kb+pbyTUiMNbsw==}
+
+  isbinaryfile@4.0.10:
+    resolution: {integrity: sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==}
+    engines: {node: '>= 8.0.0'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jiti@1.21.6:
+    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+    hasBin: true
+
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+
+  jsbn@1.1.0:
+    resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
+
+  jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  lodash.get@4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  log-symbols@3.0.0:
+    resolution: {integrity: sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==}
+    engines: {node: '>=8'}
+
+  log-symbols@4.1.0:
+    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
+    engines: {node: '>=10'}
+
+  lower-case-first@1.0.2:
+    resolution: {integrity: sha512-UuxaYakO7XeONbKrZf5FEgkantPf5DUqDayzP5VXZrtRPdH86s4kN47I8B3TW10S4QKiE3ziHNf3kRN//okHjA==}
+
+  lower-case@1.1.4:
+    resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+
+  lucide-react@0.456.0:
+    resolution: {integrity: sha512-DIIGJqTT5X05sbAsQ+OhA8OtJYyD4NsEMCA/HQW/Y6ToPQ7gwbtujIoeAaup4HpHzV35SQOarKAWH8LYglB6eA==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+
+  make-error@1.3.6:
+    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  mkdirp@0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  mute-stream@0.0.8:
+    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
+  netmask@2.0.2:
+    resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
+    engines: {node: '>= 0.4.0'}
+
+  next-themes@0.4.4:
+    resolution: {integrity: sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
+  next@15.1.0:
+    resolution: {integrity: sha512-QKhzt6Y8rgLNlj30izdMbxAwjHMFANnLwDwZ+WQh5sMhyt4lEBqDK9QpvWHtIM4rINKPoJ8aiRZKg5ULSybVHw==}
+    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.41.2
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
+
+  no-case@2.3.2:
+    resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
+
+  node-plop@0.26.3:
+    resolution: {integrity: sha512-Cov028YhBZ5aB7MdMWJEmwyBig43aGL5WT4vdoB28Oitau1zZAcHUn8Sgfk9HM33TqhtLJ9PlM/O0Mv+QpV/4Q==}
+    engines: {node: '>=8.9.4'}
+
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  ora@4.1.1:
+    resolution: {integrity: sha512-sjYP8QyVWBpBZWD6Vr1M/KwknSw6kJOz41tvGMlwWeClHBtYKTbHMki1PsLZnxKpXMPbTKv9b3pjQu3REib96A==}
+    engines: {node: '>=8'}
+
+  ora@5.4.1:
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
+    engines: {node: '>=10'}
+
+  os-tmpdir@1.0.2:
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
+
+  p-map@3.0.0:
+    resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==}
+    engines: {node: '>=8'}
+
+  pac-proxy-agent@7.1.0:
+    resolution: {integrity: sha512-Z5FnLVVZSnX7WjBg0mhDtydeRZ1xMcATZThjySQUHqr+0ksP8kqaw23fNKkaaN/Z8gwLUs/W7xdl0I75eP2Xyw==}
+    engines: {node: '>= 14'}
+
+  pac-resolver@7.0.1:
+    resolution: {integrity: sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==}
+    engines: {node: '>= 14'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  param-case@2.1.1:
+    resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
+
+  pascal-case@2.0.1:
+    resolution: {integrity: sha512-qjS4s8rBOJa2Xm0jmxXiyh1+OFf6ekCWOvUaRgAQSktzlTbMotS0nmG9gyYAybCWBcuP4fsBeRCKNwGBnMe2OQ==}
+
+  path-case@2.1.1:
+    resolution: {integrity: sha512-Ou0N05MioItesaLr9q8TtHVWmJ6fxWdqKB2RohFmNWVyJ+2zeKIeDNWAN6B/Pe7wpzWChhZX6nONYmOnMeJQ/Q==}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  picocolors@1.0.1:
+    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pirates@4.0.6:
+    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+    engines: {node: '>= 6'}
+
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.0.1:
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@4.0.2:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.4.49:
+    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  proxy-agent@6.5.0:
+    resolution: {integrity: sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==}
+    engines: {node: '>= 14'}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  rc@1.2.8:
+    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
+    hasBin: true
+
+  react-dom@19.0.0:
+    resolution: {integrity: sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==}
+    peerDependencies:
+      react: ^19.0.0
+
+  react@19.0.0:
+    resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
+    engines: {node: '>=0.10.0'}
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
+  registry-auth-token@3.3.2:
+    resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
+
+  registry-url@3.1.0:
+    resolution: {integrity: sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==}
+    engines: {node: '>=0.10.0'}
+
+  resolve@1.22.9:
+    resolution: {integrity: sha512-QxrmX1DzraFIi9PxdG5VkRfRwIgjwyud+z/iBwfRRrVmHc+P9Q7u2lSSpQ6bjr2gy5lrqIiU9vb6iAeGf2400A==}
+    hasBin: true
+
+  restore-cursor@3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+
+  reusify@1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
+  run-async@2.4.1:
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  rxjs@6.6.7:
+    resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
+    engines: {npm: '>=2.0.0'}
+
+  rxjs@7.8.1:
+    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  scheduler@0.25.0:
+    resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==}
+
+  semver@7.6.2:
+    resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  semver@7.6.3:
+    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  sentence-case@2.1.1:
+    resolution: {integrity: sha512-ENl7cYHaK/Ktwk5OTD+aDbQ3uC8IByu/6Bkg+HDv8Mm+XnBnppVNalcfJTNsp1ibstKh030/JKQQWglDvtKwEQ==}
+
+  sharp@0.33.5:
+    resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  smart-buffer@4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
+
+  snake-case@2.1.0:
+    resolution: {integrity: sha512-FMR5YoPFwOLuh4rRz92dywJjyKYZNLpMn1R5ujVpIYkbA9p01fq8RMg0FkO4M+Yobt4MjHeLTJVm5xFFBHSV2Q==}
+
+  socks-proxy-agent@8.0.5:
+    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
+    engines: {node: '>= 14'}
+
+  socks@2.8.3:
+    resolution: {integrity: sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  sprintf-js@1.1.3:
+    resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
+
+  streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-json-comments@2.0.1:
+    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
+    engines: {node: '>=0.10.0'}
+
+  styled-jsx@5.1.6:
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  swap-case@1.1.2:
+    resolution: {integrity: sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==}
+
+  tailwind-merge@2.5.5:
+    resolution: {integrity: sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
+  tailwindcss@3.4.16:
+    resolution: {integrity: sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+
+  tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+
+  tinygradient@1.1.5:
+    resolution: {integrity: sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==}
+
+  title-case@2.1.1:
+    resolution: {integrity: sha512-EkJoZ2O3zdCz3zJsYCsxyq2OC5hrxR9mfdd5I+w8h/tmFfeOxJ+vvkxsKxdmN0WtS9zLdHEgfgVOiMVgv+Po4Q==}
+
+  tmp@0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  ts-node@10.9.2:
+    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+
+  tslib@1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  turbo-darwin-64@2.3.3:
+    resolution: {integrity: sha512-bxX82xe6du/3rPmm4aCC5RdEilIN99VUld4HkFQuw+mvFg6darNBuQxyWSHZTtc25XgYjQrjsV05888w1grpaA==}
+    cpu: [x64]
+    os: [darwin]
+
+  turbo-darwin-arm64@2.3.3:
+    resolution: {integrity: sha512-DYbQwa3NsAuWkCUYVzfOUBbSUBVQzH5HWUFy2Kgi3fGjIWVZOFk86ss+xsWu//rlEAfYwEmopigsPYSmW4X15A==}
+    cpu: [arm64]
+    os: [darwin]
+
+  turbo-linux-64@2.3.3:
+    resolution: {integrity: sha512-eHj9OIB0dFaP6BxB88jSuaCLsOQSYWBgmhy2ErCu6D2GG6xW3b6e2UWHl/1Ho9FsTg4uVgo4DB9wGsKa5erjUA==}
+    cpu: [x64]
+    os: [linux]
+
+  turbo-linux-arm64@2.3.3:
+    resolution: {integrity: sha512-NmDE/NjZoDj1UWBhMtOPmqFLEBKhzGS61KObfrDEbXvU3lekwHeoPvAMfcovzswzch+kN2DrtbNIlz+/rp8OCg==}
+    cpu: [arm64]
+    os: [linux]
+
+  turbo-windows-64@2.3.3:
+    resolution: {integrity: sha512-O2+BS4QqjK3dOERscXqv7N2GXNcqHr9hXumkMxDj/oGx9oCatIwnnwx34UmzodloSnJpgSqjl8iRWiY65SmYoQ==}
+    cpu: [x64]
+    os: [win32]
+
+  turbo-windows-arm64@2.3.3:
+    resolution: {integrity: sha512-dW4ZK1r6XLPNYLIKjC4o87HxYidtRRcBeo/hZ9Wng2XM/MqqYkAyzJXJGgRMsc0MMEN9z4+ZIfnSNBrA0b08ag==}
+    cpu: [arm64]
+    os: [win32]
+
+  turbo@2.3.3:
+    resolution: {integrity: sha512-DUHWQAcC8BTiUZDRzAYGvpSpGLiaOQPfYXlCieQbwUvmml/LRGIe3raKdrOPOoiX0DYlzxs2nH6BoWJoZrj8hA==}
+    hasBin: true
+
+  type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+
+  typescript@5.5.4:
+    resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  typescript@5.7.2:
+    resolution: {integrity: sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  uglify-js@3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+
+  undici-types@6.19.8:
+    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
+
+  undici-types@6.20.0:
+    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  update-browserslist-db@1.1.1:
+    resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  update-check@1.5.4:
+    resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==}
+
+  upper-case-first@1.1.2:
+    resolution: {integrity: sha512-wINKYvI3Db8dtjikdAqoBbZoP6Q+PZUyfMR7pmwHzjC2quzSkUq5DmPrTtPEqHaz8AGtmsB4TqwapMTM1QAQOQ==}
+
+  upper-case@1.1.3:
+    resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  v8-compile-cache-lib@3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+
+  validate-npm-package-name@5.0.1:
+    resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  wcwidth@1.0.1:
+    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  wordwrap@1.0.0:
+    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  yaml@2.6.1:
+    resolution: {integrity: sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
+  yn@3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+
+  zod@3.24.1:
+    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
+
+snapshots:
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@babel/runtime-corejs3@7.26.0':
+    dependencies:
+      core-js-pure: 3.39.0
+      regenerator-runtime: 0.14.1
+
+  '@cspotcode/source-map-support@0.8.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+
+  '@emnapi/runtime@1.3.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@img/sharp-darwin-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.0.5':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-linux-arm@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.0.5
+    optional: true
+
+  '@img/sharp-linux-s390x@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+    optional: true
+
+  '@img/sharp-linux-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-wasm32@0.33.5':
+    dependencies:
+      '@emnapi/runtime': 1.3.1
+    optional: true
+
+  '@img/sharp-win32-ia32@0.33.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.33.5':
+    optional: true
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@jridgewell/gen-mapping@0.3.8':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@next/env@15.1.0': {}
+
+  '@next/swc-darwin-arm64@15.1.0':
+    optional: true
+
+  '@next/swc-darwin-x64@15.1.0':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@15.1.0':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@15.1.0':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@15.1.0':
+    optional: true
+
+  '@next/swc-linux-x64-musl@15.1.0':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@15.1.0':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@15.1.0':
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.17.1
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@radix-ui/react-compose-refs@1.1.1(@types/react@18.3.0)(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+    optionalDependencies:
+      '@types/react': 18.3.0
+
+  '@radix-ui/react-slot@1.1.1(@types/react@18.3.0)(react@19.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.0)(react@19.0.0)
+      react: 19.0.0
+    optionalDependencies:
+      '@types/react': 18.3.0
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tootallnate/quickjs-emscripten@0.23.0': {}
+
+  '@tsconfig/node10@1.0.11': {}
+
+  '@tsconfig/node12@1.0.11': {}
+
+  '@tsconfig/node14@1.0.3': {}
+
+  '@tsconfig/node16@1.0.4': {}
+
+  '@turbo/gen@2.3.3(@types/node@22.10.2)(typescript@5.7.2)':
+    dependencies:
+      '@turbo/workspaces': 2.3.3
+      commander: 10.0.1
+      fs-extra: 10.1.0
+      inquirer: 8.2.6
+      minimatch: 9.0.5
+      node-plop: 0.26.3
+      picocolors: 1.0.1
+      proxy-agent: 6.5.0
+      ts-node: 10.9.2(@types/node@22.10.2)(typescript@5.7.2)
+      update-check: 1.5.4
+      validate-npm-package-name: 5.0.1
+    transitivePeerDependencies:
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/node'
+      - supports-color
+      - typescript
+
+  '@turbo/workspaces@2.3.3':
+    dependencies:
+      commander: 10.0.1
+      execa: 5.1.1
+      fast-glob: 3.3.2
+      fs-extra: 10.1.0
+      gradient-string: 2.0.2
+      inquirer: 8.2.6
+      js-yaml: 4.1.0
+      ora: 4.1.1
+      picocolors: 1.0.1
+      semver: 7.6.2
+      update-check: 1.5.4
+
+  '@types/glob@7.2.0':
+    dependencies:
+      '@types/minimatch': 5.1.2
+      '@types/node': 22.10.2
+
+  '@types/inquirer@6.5.0':
+    dependencies:
+      '@types/through': 0.0.33
+      rxjs: 6.6.7
+
+  '@types/minimatch@5.1.2': {}
+
+  '@types/node@20.17.10':
+    dependencies:
+      undici-types: 6.19.8
+
+  '@types/node@22.10.2':
+    dependencies:
+      undici-types: 6.20.0
+
+  '@types/prop-types@15.7.14': {}
+
+  '@types/react-dom@18.3.1':
+    dependencies:
+      '@types/react': 18.3.0
+
+  '@types/react@18.3.0':
+    dependencies:
+      '@types/prop-types': 15.7.14
+      csstype: 3.1.3
+
+  '@types/through@0.0.33':
+    dependencies:
+      '@types/node': 22.10.2
+
+  '@types/tinycolor2@1.4.6': {}
+
+  acorn-walk@8.3.4:
+    dependencies:
+      acorn: 8.14.0
+
+  acorn@8.14.0: {}
+
+  agent-base@7.1.3: {}
+
+  aggregate-error@3.1.0:
+    dependencies:
+      clean-stack: 2.2.0
+      indent-string: 4.0.0
+
+  ansi-escapes@4.3.2:
+    dependencies:
+      type-fest: 0.21.3
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.1.0: {}
+
+  ansi-styles@3.2.1:
+    dependencies:
+      color-convert: 1.9.3
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@6.2.1: {}
+
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  arg@4.1.3: {}
+
+  arg@5.0.2: {}
+
+  argparse@2.0.1: {}
+
+  array-union@2.1.0: {}
+
+  ast-types@0.13.4:
+    dependencies:
+      tslib: 2.8.1
+
+  autoprefixer@10.4.20(postcss@8.4.49):
+    dependencies:
+      browserslist: 4.24.3
+      caniuse-lite: 1.0.30001688
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.4.49
+      postcss-value-parser: 4.2.0
+
+  balanced-match@1.0.2: {}
+
+  base64-js@1.5.1: {}
+
+  basic-ftp@5.0.5: {}
+
+  binary-extensions@2.3.0: {}
+
+  bl@4.1.0:
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+
+  brace-expansion@1.1.11:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.1:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.24.3:
+    dependencies:
+      caniuse-lite: 1.0.30001688
+      electron-to-chromium: 1.5.73
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.1(browserslist@4.24.3)
+
+  buffer@5.7.1:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  busboy@1.6.0:
+    dependencies:
+      streamsearch: 1.1.0
+
+  camel-case@3.0.0:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  camelcase-css@2.0.1: {}
+
+  caniuse-lite@1.0.30001688: {}
+
+  chalk@2.4.2:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
+  chalk@3.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  change-case@3.1.0:
+    dependencies:
+      camel-case: 3.0.0
+      constant-case: 2.0.0
+      dot-case: 2.1.1
+      header-case: 1.0.1
+      is-lower-case: 1.1.3
+      is-upper-case: 1.1.2
+      lower-case: 1.1.4
+      lower-case-first: 1.0.2
+      no-case: 2.3.2
+      param-case: 2.1.1
+      pascal-case: 2.0.1
+      path-case: 2.1.1
+      sentence-case: 2.1.1
+      snake-case: 2.1.0
+      swap-case: 1.1.2
+      title-case: 2.1.1
+      upper-case: 1.1.3
+      upper-case-first: 1.1.2
+
+  chardet@0.7.0: {}
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  clean-stack@2.2.0: {}
+
+  cli-cursor@3.1.0:
+    dependencies:
+      restore-cursor: 3.1.0
+
+  cli-spinners@2.9.2: {}
+
+  cli-width@3.0.0: {}
+
+  client-only@0.0.1: {}
+
+  clone@1.0.4: {}
+
+  clsx@2.1.1: {}
+
+  color-convert@1.9.3:
+    dependencies:
+      color-name: 1.1.3
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.3: {}
+
+  color-name@1.1.4: {}
+
+  color-string@1.9.1:
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    optional: true
+
+  color@4.2.3:
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+    optional: true
+
+  commander@10.0.1: {}
+
+  commander@4.1.1: {}
+
+  concat-map@0.0.1: {}
+
+  constant-case@2.0.0:
+    dependencies:
+      snake-case: 2.1.0
+      upper-case: 1.1.3
+
+  core-js-pure@3.39.0: {}
+
+  create-require@1.1.1: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  cssesc@3.0.0: {}
+
+  csstype@3.1.3: {}
+
+  data-uri-to-buffer@6.0.2: {}
+
+  debug@4.4.0:
+    dependencies:
+      ms: 2.1.3
+
+  deep-extend@0.6.0: {}
+
+  defaults@1.0.4:
+    dependencies:
+      clone: 1.0.4
+
+  degenerator@5.0.1:
+    dependencies:
+      ast-types: 0.13.4
+      escodegen: 2.1.0
+      esprima: 4.0.1
+
+  del@5.1.0:
+    dependencies:
+      globby: 10.0.2
+      graceful-fs: 4.2.11
+      is-glob: 4.0.3
+      is-path-cwd: 2.2.0
+      is-path-inside: 3.0.3
+      p-map: 3.0.0
+      rimraf: 3.0.2
+      slash: 3.0.0
+
+  detect-libc@2.0.3:
+    optional: true
+
+  didyoumean@1.2.2: {}
+
+  diff@4.0.2: {}
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  dlv@1.1.3: {}
+
+  dot-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  eastasianwidth@0.2.0: {}
+
+  electron-to-chromium@1.5.73: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  escalade@3.2.0: {}
+
+  escape-string-regexp@1.0.5: {}
+
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
+  esprima@4.0.1: {}
+
+  estraverse@5.3.0: {}
+
+  esutils@2.0.3: {}
+
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  external-editor@3.1.0:
+    dependencies:
+      chardet: 0.7.0
+      iconv-lite: 0.4.24
+      tmp: 0.0.33
+
+  fast-glob@3.3.2:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fastq@1.17.1:
+    dependencies:
+      reusify: 1.0.4
+
+  figures@3.2.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  foreground-child@3.3.0:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  fraction.js@4.3.7: {}
+
+  fs-extra@10.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+
+  fs.realpath@1.0.0: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  get-stream@6.0.1: {}
+
+  get-uri@6.0.4:
+    dependencies:
+      basic-ftp: 5.0.5
+      data-uri-to-buffer: 6.0.2
+      debug: 4.4.0
+    transitivePeerDependencies:
+      - supports-color
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.3.0
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  globby@10.0.2:
+    dependencies:
+      '@types/glob': 7.2.0
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      glob: 7.2.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  graceful-fs@4.2.11: {}
+
+  gradient-string@2.0.2:
+    dependencies:
+      chalk: 4.1.2
+      tinygradient: 1.1.5
+
+  handlebars@4.7.8:
+    dependencies:
+      minimist: 1.2.8
+      neo-async: 2.6.2
+      source-map: 0.6.1
+      wordwrap: 1.0.0
+    optionalDependencies:
+      uglify-js: 3.19.3
+
+  has-flag@3.0.0: {}
+
+  has-flag@4.0.0: {}
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  header-case@1.0.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.3
+      debug: 4.4.0
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.3
+      debug: 4.4.0
+    transitivePeerDependencies:
+      - supports-color
+
+  human-signals@2.1.0: {}
+
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ieee754@1.2.1: {}
+
+  ignore@5.3.2: {}
+
+  indent-string@4.0.0: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.4: {}
+
+  ini@1.3.8: {}
+
+  inquirer@7.3.3:
+    dependencies:
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-width: 3.0.0
+      external-editor: 3.1.0
+      figures: 3.2.0
+      lodash: 4.17.21
+      mute-stream: 0.0.8
+      run-async: 2.4.1
+      rxjs: 6.6.7
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      through: 2.3.8
+
+  inquirer@8.2.6:
+    dependencies:
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-width: 3.0.0
+      external-editor: 3.1.0
+      figures: 3.2.0
+      lodash: 4.17.21
+      mute-stream: 0.0.8
+      ora: 5.4.1
+      run-async: 2.4.1
+      rxjs: 7.8.1
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      through: 2.3.8
+      wrap-ansi: 6.2.0
+
+  ip-address@9.0.5:
+    dependencies:
+      jsbn: 1.1.0
+      sprintf-js: 1.1.3
+
+  is-arrayish@0.3.2:
+    optional: true
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-core-module@2.16.0:
+    dependencies:
+      hasown: 2.0.2
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-interactive@1.0.0: {}
+
+  is-lower-case@1.1.3:
+    dependencies:
+      lower-case: 1.1.4
+
+  is-number@7.0.0: {}
+
+  is-path-cwd@2.2.0: {}
+
+  is-path-inside@3.0.3: {}
+
+  is-stream@2.0.1: {}
+
+  is-unicode-supported@0.1.0: {}
+
+  is-upper-case@1.1.2:
+    dependencies:
+      upper-case: 1.1.3
+
+  isbinaryfile@4.0.10: {}
+
+  isexe@2.0.0: {}
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jiti@1.21.6: {}
+
+  js-yaml@4.1.0:
+    dependencies:
+      argparse: 2.0.1
+
+  jsbn@1.1.0: {}
+
+  jsonfile@6.1.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
+  lodash.get@4.4.2: {}
+
+  lodash@4.17.21: {}
+
+  log-symbols@3.0.0:
+    dependencies:
+      chalk: 2.4.2
+
+  log-symbols@4.1.0:
+    dependencies:
+      chalk: 4.1.2
+      is-unicode-supported: 0.1.0
+
+  lower-case-first@1.0.2:
+    dependencies:
+      lower-case: 1.1.4
+
+  lower-case@1.1.4: {}
+
+  lru-cache@10.4.3: {}
+
+  lru-cache@7.18.3: {}
+
+  lucide-react@0.456.0(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+
+  make-error@1.3.6: {}
+
+  merge-stream@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mimic-fn@2.1.0: {}
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.11
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.1
+
+  minimist@1.2.8: {}
+
+  minipass@7.1.2: {}
+
+  mkdirp@0.5.6:
+    dependencies:
+      minimist: 1.2.8
+
+  ms@2.1.3: {}
+
+  mute-stream@0.0.8: {}
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  nanoid@3.3.8: {}
+
+  neo-async@2.6.2: {}
+
+  netmask@2.0.2: {}
+
+  next-themes@0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
+  next@15.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      '@next/env': 15.1.0
+      '@swc/counter': 0.1.3
+      '@swc/helpers': 0.5.15
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001688
+      postcss: 8.4.31
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      styled-jsx: 5.1.6(react@19.0.0)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 15.1.0
+      '@next/swc-darwin-x64': 15.1.0
+      '@next/swc-linux-arm64-gnu': 15.1.0
+      '@next/swc-linux-arm64-musl': 15.1.0
+      '@next/swc-linux-x64-gnu': 15.1.0
+      '@next/swc-linux-x64-musl': 15.1.0
+      '@next/swc-win32-arm64-msvc': 15.1.0
+      '@next/swc-win32-x64-msvc': 15.1.0
+      sharp: 0.33.5
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  no-case@2.3.2:
+    dependencies:
+      lower-case: 1.1.4
+
+  node-plop@0.26.3:
+    dependencies:
+      '@babel/runtime-corejs3': 7.26.0
+      '@types/inquirer': 6.5.0
+      change-case: 3.1.0
+      del: 5.1.0
+      globby: 10.0.2
+      handlebars: 4.7.8
+      inquirer: 7.3.3
+      isbinaryfile: 4.0.10
+      lodash.get: 4.4.2
+      mkdirp: 0.5.6
+      resolve: 1.22.9
+
+  node-releases@2.0.19: {}
+
+  normalize-path@3.0.0: {}
+
+  normalize-range@0.1.2: {}
+
+  npm-run-path@4.0.1:
+    dependencies:
+      path-key: 3.1.1
+
+  object-assign@4.1.1: {}
+
+  object-hash@3.0.0: {}
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  ora@4.1.1:
+    dependencies:
+      chalk: 3.0.0
+      cli-cursor: 3.1.0
+      cli-spinners: 2.9.2
+      is-interactive: 1.0.0
+      log-symbols: 3.0.0
+      mute-stream: 0.0.8
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+
+  ora@5.4.1:
+    dependencies:
+      bl: 4.1.0
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-spinners: 2.9.2
+      is-interactive: 1.0.0
+      is-unicode-supported: 0.1.0
+      log-symbols: 4.1.0
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+
+  os-tmpdir@1.0.2: {}
+
+  p-map@3.0.0:
+    dependencies:
+      aggregate-error: 3.1.0
+
+  pac-proxy-agent@7.1.0:
+    dependencies:
+      '@tootallnate/quickjs-emscripten': 0.23.0
+      agent-base: 7.1.3
+      debug: 4.4.0
+      get-uri: 6.0.4
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      pac-resolver: 7.0.1
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  pac-resolver@7.0.1:
+    dependencies:
+      degenerator: 5.0.1
+      netmask: 2.0.2
+
+  package-json-from-dist@1.0.1: {}
+
+  param-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  pascal-case@2.0.1:
+    dependencies:
+      camel-case: 3.0.0
+      upper-case-first: 1.1.2
+
+  path-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  path-is-absolute@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-parse@1.0.7: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  path-type@4.0.0: {}
+
+  picocolors@1.0.1: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  pify@2.3.0: {}
+
+  pirates@4.0.6: {}
+
+  postcss-import@15.1.0(postcss@8.4.49):
+    dependencies:
+      postcss: 8.4.49
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.9
+
+  postcss-js@4.0.1(postcss@8.4.49):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.49
+
+  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@types/node@20.17.10)(typescript@5.7.2)):
+    dependencies:
+      lilconfig: 3.1.3
+      yaml: 2.6.1
+    optionalDependencies:
+      postcss: 8.4.49
+      ts-node: 10.9.2(@types/node@20.17.10)(typescript@5.7.2)
+
+  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.2)):
+    dependencies:
+      lilconfig: 3.1.3
+      yaml: 2.6.1
+    optionalDependencies:
+      postcss: 8.4.49
+      ts-node: 10.9.2(@types/node@22.10.2)(typescript@5.7.2)
+
+  postcss-nested@6.2.0(postcss@8.4.49):
+    dependencies:
+      postcss: 8.4.49
+      postcss-selector-parser: 6.1.2
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.4.31:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.4.49:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  proxy-agent@6.5.0:
+    dependencies:
+      agent-base: 7.1.3
+      debug: 4.4.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      lru-cache: 7.18.3
+      pac-proxy-agent: 7.1.0
+      proxy-from-env: 1.1.0
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  proxy-from-env@1.1.0: {}
+
+  queue-microtask@1.2.3: {}
+
+  rc@1.2.8:
+    dependencies:
+      deep-extend: 0.6.0
+      ini: 1.3.8
+      minimist: 1.2.8
+      strip-json-comments: 2.0.1
+
+  react-dom@19.0.0(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      scheduler: 0.25.0
+
+  react@19.0.0: {}
+
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
+  readable-stream@3.6.2:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
+  regenerator-runtime@0.14.1: {}
+
+  registry-auth-token@3.3.2:
+    dependencies:
+      rc: 1.2.8
+      safe-buffer: 5.2.1
+
+  registry-url@3.1.0:
+    dependencies:
+      rc: 1.2.8
+
+  resolve@1.22.9:
+    dependencies:
+      is-core-module: 2.16.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  restore-cursor@3.1.0:
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+
+  reusify@1.0.4: {}
+
+  rimraf@3.0.2:
+    dependencies:
+      glob: 7.2.3
+
+  run-async@2.4.1: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  rxjs@6.6.7:
+    dependencies:
+      tslib: 1.14.1
+
+  rxjs@7.8.1:
+    dependencies:
+      tslib: 2.8.1
+
+  safe-buffer@5.2.1: {}
+
+  safer-buffer@2.1.2: {}
+
+  scheduler@0.25.0: {}
+
+  semver@7.6.2: {}
+
+  semver@7.6.3:
+    optional: true
+
+  sentence-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case-first: 1.1.2
+
+  sharp@0.33.5:
+    dependencies:
+      color: 4.2.3
+      detect-libc: 2.0.3
+      semver: 7.6.3
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.33.5
+      '@img/sharp-darwin-x64': 0.33.5
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+      '@img/sharp-libvips-linux-arm': 1.0.5
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+      '@img/sharp-libvips-linux-x64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+      '@img/sharp-linux-arm': 0.33.5
+      '@img/sharp-linux-arm64': 0.33.5
+      '@img/sharp-linux-s390x': 0.33.5
+      '@img/sharp-linux-x64': 0.33.5
+      '@img/sharp-linuxmusl-arm64': 0.33.5
+      '@img/sharp-linuxmusl-x64': 0.33.5
+      '@img/sharp-wasm32': 0.33.5
+      '@img/sharp-win32-ia32': 0.33.5
+      '@img/sharp-win32-x64': 0.33.5
+    optional: true
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  simple-swizzle@0.2.2:
+    dependencies:
+      is-arrayish: 0.3.2
+    optional: true
+
+  slash@3.0.0: {}
+
+  smart-buffer@4.2.0: {}
+
+  snake-case@2.1.0:
+    dependencies:
+      no-case: 2.3.2
+
+  socks-proxy-agent@8.0.5:
+    dependencies:
+      agent-base: 7.1.3
+      debug: 4.4.0
+      socks: 2.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  socks@2.8.3:
+    dependencies:
+      ip-address: 9.0.5
+      smart-buffer: 4.2.0
+
+  source-map-js@1.2.1: {}
+
+  source-map@0.6.1: {}
+
+  sprintf-js@1.1.3: {}
+
+  streamsearch@1.1.0: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.0:
+    dependencies:
+      ansi-regex: 6.1.0
+
+  strip-final-newline@2.0.0: {}
+
+  strip-json-comments@2.0.1: {}
+
+  styled-jsx@5.1.6(react@19.0.0):
+    dependencies:
+      client-only: 0.0.1
+      react: 19.0.0
+
+  sucrase@3.35.0:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      commander: 4.1.1
+      glob: 10.4.5
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+
+  supports-color@5.5.0:
+    dependencies:
+      has-flag: 3.0.0
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  swap-case@1.1.2:
+    dependencies:
+      lower-case: 1.1.4
+      upper-case: 1.1.3
+
+  tailwind-merge@2.5.5: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.16(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.2))):
+    dependencies:
+      tailwindcss: 3.4.16(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.2))
+
+  tailwindcss@3.4.16(ts-node@10.9.2(@types/node@20.17.10)(typescript@5.7.2)):
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.2
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.6
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.4.49
+      postcss-import: 15.1.0(postcss@8.4.49)
+      postcss-js: 4.0.1(postcss@8.4.49)
+      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@types/node@20.17.10)(typescript@5.7.2))
+      postcss-nested: 6.2.0(postcss@8.4.49)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.9
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
+  tailwindcss@3.4.16(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.2)):
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.2
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.6
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.4.49
+      postcss-import: 15.1.0(postcss@8.4.49)
+      postcss-js: 4.0.1(postcss@8.4.49)
+      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.2))
+      postcss-nested: 6.2.0(postcss@8.4.49)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.9
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  through@2.3.8: {}
+
+  tinycolor2@1.6.0: {}
+
+  tinygradient@1.1.5:
+    dependencies:
+      '@types/tinycolor2': 1.4.6
+      tinycolor2: 1.6.0
+
+  title-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  tmp@0.0.33:
+    dependencies:
+      os-tmpdir: 1.0.2
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  ts-interface-checker@0.1.13: {}
+
+  ts-node@10.9.2(@types/node@20.17.10)(typescript@5.7.2):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 20.17.10
+      acorn: 8.14.0
+      acorn-walk: 8.3.4
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.7.2
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    optional: true
+
+  ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.2):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 22.10.2
+      acorn: 8.14.0
+      acorn-walk: 8.3.4
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.7.2
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+
+  tslib@1.14.1: {}
+
+  tslib@2.8.1: {}
+
+  turbo-darwin-64@2.3.3:
+    optional: true
+
+  turbo-darwin-arm64@2.3.3:
+    optional: true
+
+  turbo-linux-64@2.3.3:
+    optional: true
+
+  turbo-linux-arm64@2.3.3:
+    optional: true
+
+  turbo-windows-64@2.3.3:
+    optional: true
+
+  turbo-windows-arm64@2.3.3:
+    optional: true
+
+  turbo@2.3.3:
+    optionalDependencies:
+      turbo-darwin-64: 2.3.3
+      turbo-darwin-arm64: 2.3.3
+      turbo-linux-64: 2.3.3
+      turbo-linux-arm64: 2.3.3
+      turbo-windows-64: 2.3.3
+      turbo-windows-arm64: 2.3.3
+
+  type-fest@0.21.3: {}
+
+  typescript@5.5.4: {}
+
+  typescript@5.7.2: {}
+
+  uglify-js@3.19.3:
+    optional: true
+
+  undici-types@6.19.8: {}
+
+  undici-types@6.20.0: {}
+
+  universalify@2.0.1: {}
+
+  update-browserslist-db@1.1.1(browserslist@4.24.3):
+    dependencies:
+      browserslist: 4.24.3
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  update-check@1.5.4:
+    dependencies:
+      registry-auth-token: 3.3.2
+      registry-url: 3.1.0
+
+  upper-case-first@1.1.2:
+    dependencies:
+      upper-case: 1.1.3
+
+  upper-case@1.1.3: {}
+
+  util-deprecate@1.0.2: {}
+
+  v8-compile-cache-lib@3.0.1: {}
+
+  validate-npm-package-name@5.0.1: {}
+
+  wcwidth@1.0.1:
+    dependencies:
+      defaults: 1.0.4
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  wordwrap@1.0.0: {}
+
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+
+  wrappy@1.0.2: {}
+
+  yaml@2.6.1: {}
+
+  yn@3.1.1: {}
+
+  zod@3.24.1: {}
diff --git a/templates/monorepo-next/pnpm-workspace.yaml b/templates/monorepo-next/pnpm-workspace.yaml
new file mode 100644
index 00000000..3ff5faaa
--- /dev/null
+++ b/templates/monorepo-next/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+  - "apps/*"
+  - "packages/*"
diff --git a/templates/monorepo-next/tsconfig.json b/templates/monorepo-next/tsconfig.json
new file mode 100644
index 00000000..0d8ea42f
--- /dev/null
+++ b/templates/monorepo-next/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@workspace/typescript/base.json"
+}
+
diff --git a/templates/monorepo-next/turbo.json b/templates/monorepo-next/turbo.json
new file mode 100644
index 00000000..69d21454
--- /dev/null
+++ b/templates/monorepo-next/turbo.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "ui": "tui",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "outputs": [".next/**", "!.next/cache/**"]
+    },
+    "check": {
+      "dependsOn": ["^check"]
+    },
+    "check:fix": {
+      "dependsOn": ["^check:fix"]
+    },
+    "check-types": {
+      "dependsOn": ["^check-types"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}
diff --git a/templates/next-template/.gitignore b/templates/next-template/.gitignore
deleted file mode 100644
index ea0d26b9..00000000
--- a/templates/next-template/.gitignore
+++ /dev/null
@@ -1,36 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-node_modules
-.pnp
-.pnp.js
-
-# testing
-coverage
-
-# next.js
-.next/
-out/
-build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# turbo
-.turbo
-
-.contentlayer
-.env
\ No newline at end of file
diff --git a/templates/next-template/.vscode/settings.json b/templates/next-template/.vscode/settings.json
deleted file mode 100644
index 99438ebd..00000000
--- a/templates/next-template/.vscode/settings.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "typescript.tsdk": "../../node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
-}
diff --git a/templates/next-template/README.md b/templates/next-template/README.md
deleted file mode 100644
index 6c75c03f..00000000
--- a/templates/next-template/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# next-template
-
-A Next.js 13 template for building apps with Radix UI and Tailwind CSS.
-
-## Usage
-
-```bash
-npx create-next-app -e https://github.com/nyxb-ui/ui/next-template
-```
-
-## Features
-
--  Next.js 13 App Directory
--  Radix UI Primitives
--  Tailwind CSS
--  Icons from [Lucide](https://lucide.dev)
--  Dark mode with `next-themes`
--  Tailwind CSS class sorting, merging and linting.
-
-## License
-
-Licensed under the [MIT license](https://github.com/nyxb-ui/ui/blob/main/LICENSE.md).
diff --git a/templates/next-template/app/layout.tsx b/templates/next-template/app/layout.tsx
deleted file mode 100644
index 3ebfcc7c..00000000
--- a/templates/next-template/app/layout.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import '~/styles/globals.css'
-import type { Metadata } from 'next'
-
-import { siteConfig } from '~/config/site'
-import { fontSans } from '~/lib/fonts'
-import { ny } from '~/lib/utils'
-import { SiteHeader } from '~/components/site-header'
-import { TailwindIndicator } from '~/components/tailwind-indicator'
-import { ThemeProvider } from '~/components/theme-provider'
-
-export const metadata: Metadata = {
-   title: {
-      default: siteConfig.name,
-      template: `%s - ${siteConfig.name}`,
-   },
-   description: siteConfig.description,
-   themeColor: [
-      { media: '(prefers-color-scheme: light)', color: 'white' },
-      { media: '(prefers-color-scheme: dark)', color: 'black' },
-   ],
-   icons: {
-      icon: '/favicon.ico',
-      shortcut: '/favicon-16x16.png',
-      apple: '/apple-touch-icon.png',
-   },
-}
-
-interface RootLayoutProps {
-   children: React.ReactNode
-}
-
-export default function RootLayout({ children }: RootLayoutProps) {
-   return (
-      <>
-         <html lang="en" suppressHydrationWarning>
-            <head />
-            <body
-               className={ny(
-                  'min-h-screen bg-background font-sans antialiased',
-                  fontSans.variable,
-               )}
-            >
-               <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-                  <div className="relative flex min-h-screen flex-col">
-                     <SiteHeader />
-                     <div className="flex-1">{children}</div>
-                  </div>
-                  <TailwindIndicator />
-               </ThemeProvider>
-            </body>
-         </html>
-      </>
-   )
-}
diff --git a/templates/next-template/app/page.tsx b/templates/next-template/app/page.tsx
deleted file mode 100644
index abcb97b9..00000000
--- a/templates/next-template/app/page.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import Link from 'next/link'
-
-import { siteConfig } from '~/config/site'
-import { buttonVariants } from '~/components/ui/button'
-
-export default function IndexPage() {
-   return (
-      <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
-         <div className="flex max-w-[980px] flex-col items-start gap-2">
-            <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
-               Beautifully designed components
-               {' '}
-               <br className="hidden sm:inline" />
-               built with Radix UI and Tailwind CSS.
-            </h1>
-            <p className="max-w-[700px] text-lg text-muted-foreground">
-               Accessible and customizable components that you can copy and paste
-               into your apps. Free. Open Source. And Next.js 13 Ready.
-            </p>
-         </div>
-         <div className="flex gap-4">
-            <Link
-               href={siteConfig.links.docs}
-               target="_blank"
-               rel="noreferrer"
-               className={buttonVariants()}
-            >
-               Documentation
-            </Link>
-            <Link
-               target="_blank"
-               rel="noreferrer"
-               href={siteConfig.links.github}
-               className={buttonVariants({ variant: 'outline' })}
-            >
-               GitHub
-            </Link>
-         </div>
-      </section>
-   )
-}
diff --git a/templates/next-template/components/icons.tsx b/templates/next-template/components/icons.tsx
deleted file mode 100644
index 80bb2cd5..00000000
--- a/templates/next-template/components/icons.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { LucideIcon, LucideProps } from 'lucide-react'
-import { Moon, SunMedium } from 'lucide-react'
-
-export type Icon = LucideIcon
-
-export const Icons = {
-   sun: SunMedium,
-   moon: Moon,
-   twitter: (props: LucideProps) => (
-      <svg
-         {...props}
-         height="23"
-         viewBox="0 0 1200 1227"
-         width="23"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
-      </svg>
-   ),
-   logo: (props: LucideProps) => (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
-         <path
-            fill="currentColor"
-            d="M11.572 0c-.176 0-.31.001-.358.007a19.76 19.76 0 0 1-.364.033C7.443.346 4.25 2.185 2.228 5.012a11.875 11.875 0 0 0-2.119 5.243c-.096.659-.108.854-.108 1.747s.012 1.089.108 1.748c.652 4.506 3.86 8.292 8.209 9.695.779.25 1.6.422 2.534.525.363.04 1.935.04 2.299 0 1.611-.178 2.977-.577 4.323-1.264.207-.106.247-.134.219-.158-.02-.013-.9-1.193-1.955-2.62l-1.919-2.592-2.404-3.558a338.739 338.739 0 0 0-2.422-3.556c-.009-.002-.018 1.579-.023 3.51-.007 3.38-.01 3.515-.052 3.595a.426.426 0 0 1-.206.214c-.075.037-.14.044-.495.044H7.81l-.108-.068a.438.438 0 0 1-.157-.171l-.05-.106.006-4.703.007-4.705.072-.092a.645.645 0 0 1 .174-.143c.096-.047.134-.051.54-.051.478 0 .558.018.682.154.035.038 1.337 1.999 2.895 4.361a10760.433 10760.433 0 0 0 4.735 7.17l1.9 2.879.096-.063a12.317 12.317 0 0 0 2.466-2.163 11.944 11.944 0 0 0 2.824-6.134c.096-.66.108-.854.108-1.748 0-.893-.012-1.088-.108-1.747-.652-4.506-3.859-8.292-8.208-9.695a12.597 12.597 0 0 0-2.499-.523A33.119 33.119 0 0 0 11.573 0zm4.069 7.217c.347 0 .408.005.486.047a.473.473 0 0 1 .237.277c.018.06.023 1.365.018 4.304l-.006 4.218-.744-1.14-.746-1.14v-3.066c0-1.982.01-3.097.023-3.15a.478.478 0 0 1 .233-.296c.096-.05.13-.054.5-.054z"
-         />
-      </svg>
-   ),
-   gitHub: (props: LucideProps) => (
-      <svg viewBox="0 0 438.549 438.549" {...props}>
-         <path
-            fill="currentColor"
-            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-         >
-         </path>
-      </svg>
-   ),
-}
diff --git a/templates/next-template/components/main-nav.tsx b/templates/next-template/components/main-nav.tsx
deleted file mode 100644
index 78fc4554..00000000
--- a/templates/next-template/components/main-nav.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react'
-import Link from 'next/link'
-
-import type { NavItem } from '~/types/nav'
-import { siteConfig } from '~/config/site'
-import { ny } from '~/lib/utils'
-import { Icons } from '~/components/icons'
-
-interface MainNavProps {
-   items?: NavItem[]
-}
-
-export function MainNav({ items }: MainNavProps) {
-   return (
-      <div className="flex gap-6 md:gap-10">
-         <Link href="/" className="flex items-center space-x-2">
-            <Icons.logo className="h-6 w-6" />
-            <span className="inline-block font-bold">{siteConfig.name}</span>
-         </Link>
-         {items?.length
-            ? (
-               <nav className="flex gap-6">
-                  {items?.map(
-                     (item, index) =>
-                        item.href && (
-                           <Link
-                              key={index}
-                              href={item.href}
-                              className={ny(
-                                 'flex items-center text-sm font-medium text-muted-foreground',
-                                 item.disabled && 'cursor-not-allowed opacity-80',
-                              )}
-                           >
-                              {item.title}
-                           </Link>
-                        ),
-                  )}
-               </nav>
-               )
-            : null}
-      </div>
-   )
-}
diff --git a/templates/next-template/components/site-header.tsx b/templates/next-template/components/site-header.tsx
deleted file mode 100644
index 3d05b550..00000000
--- a/templates/next-template/components/site-header.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Link from 'next/link'
-
-import { siteConfig } from '~/config/site'
-import { buttonVariants } from '~/components/ui/button'
-import { Icons } from '~/components/icons'
-import { MainNav } from '~/components/main-nav'
-import { ThemeToggle } from '~/components/theme-toggle'
-
-export function SiteHeader() {
-   return (
-      <header className="sticky top-0 z-40 w-full border-b bg-background">
-         <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
-            <MainNav items={siteConfig.mainNav} />
-            <div className="flex flex-1 items-center justify-end space-x-4">
-               <nav className="flex items-center space-x-1">
-                  <Link
-                     href={siteConfig.links.github}
-                     target="_blank"
-                     rel="noreferrer"
-                  >
-                     <div
-                        className={buttonVariants({
-                           size: 'icon',
-                           variant: 'ghost',
-                        })}
-                     >
-                        <Icons.gitHub className="h-5 w-5" />
-                        <span className="sr-only">GitHub</span>
-                     </div>
-                  </Link>
-                  <Link
-                     href={siteConfig.links.twitter}
-                     target="_blank"
-                     rel="noreferrer"
-                  >
-                     <div
-                        className={buttonVariants({
-                           size: 'icon',
-                           variant: 'ghost',
-                        })}
-                     >
-                        <Icons.twitter className="h-4 w-4 fill-current" />
-                        <span className="sr-only">Twitter</span>
-                     </div>
-                  </Link>
-                  <ThemeToggle />
-               </nav>
-            </div>
-         </div>
-      </header>
-   )
-}
diff --git a/templates/next-template/components/tailwind-indicator.tsx b/templates/next-template/components/tailwind-indicator.tsx
deleted file mode 100644
index d685e0d2..00000000
--- a/templates/next-template/components/tailwind-indicator.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export function TailwindIndicator() {
-   if (process.env.NODE_ENV === 'production')
-      return null
-
-   return (
-      <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
-         <div className="block sm:hidden">xs</div>
-         <div className="hidden sm:block md:hidden">sm</div>
-         <div className="hidden md:block lg:hidden">md</div>
-         <div className="hidden lg:block xl:hidden">lg</div>
-         <div className="hidden xl:block 2xl:hidden">xl</div>
-         <div className="hidden 2xl:block">2xl</div>
-      </div>
-   )
-}
diff --git a/templates/next-template/components/theme-provider.tsx b/templates/next-template/components/theme-provider.tsx
deleted file mode 100644
index 89153070..00000000
--- a/templates/next-template/components/theme-provider.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ThemeProvider as NextThemesProvider } from 'next-themes'
-import type { ThemeProviderProps } from 'next-themes/dist/types'
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}
diff --git a/templates/next-template/components/theme-toggle.tsx b/templates/next-template/components/theme-toggle.tsx
deleted file mode 100644
index a23c2ab4..00000000
--- a/templates/next-template/components/theme-toggle.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Moon, Sun } from 'lucide-react'
-import { useTheme } from 'next-themes'
-
-import { Button } from '~/components/ui/button'
-
-export function ThemeToggle() {
-   const { setTheme, theme } = useTheme()
-
-   return (
-      <Button
-         variant="ghost"
-         size="icon"
-         onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-      >
-         <Sun className="h-[1.5rem] w-[1.3rem] dark:hidden" />
-         <Moon className="hidden h-5 w-5 dark:block" />
-         <span className="sr-only">Toggle theme</span>
-      </Button>
-   )
-}
diff --git a/templates/next-template/components/ui/button.tsx b/templates/next-template/components/ui/button.tsx
deleted file mode 100644
index bf147360..00000000
--- a/templates/next-template/components/ui/button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { type VariantProps, cva } from 'class-variance-authority'
-
-import { ny } from '~/lib/utils'
-
-const buttonVariants = cva(
-   'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
-   {
-      variants: {
-         variant: {
-            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-            destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-            outline:
-          'border border-input hover:bg-accent hover:text-accent-foreground',
-            secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-            ghost: 'hover:bg-accent hover:text-accent-foreground',
-            link: 'underline-offset-4 hover:underline text-primary',
-         },
-         size: {
-            default: 'h-10 py-2 px-4',
-            sm: 'h-9 px-3 rounded-md',
-            lg: 'h-11 px-8 rounded-md',
-            icon: 'h-10 w-10',
-         },
-      },
-      defaultVariants: {
-         variant: 'default',
-         size: 'default',
-      },
-   },
-)
-
-export interface ButtonProps
-   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-   VariantProps<typeof buttonVariants> {
-   asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-   ({ className, variant, size, asChild = false, ...props }, ref) => {
-      const Comp = asChild ? Slot : 'button'
-      return (
-         <Comp
-            className={ny(buttonVariants({ variant, size, className }))}
-            ref={ref}
-            {...props}
-         />
-      )
-   },
-)
-Button.displayName = 'Button'
-
-export { Button, buttonVariants }
diff --git a/templates/next-template/config/site.ts b/templates/next-template/config/site.ts
deleted file mode 100644
index 63c9cec8..00000000
--- a/templates/next-template/config/site.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type SiteConfig = typeof siteConfig
-
-export const siteConfig = {
-   name: 'Next.js',
-   description:
-    'Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.',
-   mainNav: [
-      {
-         title: 'Home',
-         href: '/',
-      },
-   ],
-   links: {
-      twitter: 'https://twitter.com/nyxb0',
-      github: 'https://github.com/nyxb-ui/ui',
-      docs: 'https://nyxbui.design',
-   },
-}
diff --git a/templates/next-template/eslint.config.mjs b/templates/next-template/eslint.config.mjs
deleted file mode 100644
index 9eb654ce..00000000
--- a/templates/next-template/eslint.config.mjs
+++ /dev/null
@@ -1,19 +0,0 @@
-import nyxb from '@nyxb/eslint-config'
-
-export default nyxb(
-   {
-      formatters: true,
-      react: true,
-   },
-   {
-      rules: {
-         'react/no-useless-fragment': 0,
-         'react/no-array-index-key': 0,
-         'react-refresh/only-export-components': 0,
-         'node/prefer-global/process': 0,
-      },
-   },
-   {
-      ignores: ['**/node_modules/**'],
-   },
-)
diff --git a/templates/next-template/lib/fonts.ts b/templates/next-template/lib/fonts.ts
deleted file mode 100644
index a823c6d9..00000000
--- a/templates/next-template/lib/fonts.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { JetBrains_Mono as FontMono, Inter as FontSans } from 'next/font/google'
-
-export const fontSans = FontSans({
-   subsets: ['latin'],
-   variable: '--font-sans',
-})
-
-export const fontMono = FontMono({
-   subsets: ['latin'],
-   variable: '--font-mono',
-})
diff --git a/templates/next-template/lib/utils.ts b/templates/next-template/lib/utils.ts
deleted file mode 100644
index 07259d12..00000000
--- a/templates/next-template/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function ny(...inputs: ClassValue[]) {
-   return twMerge(clsx(inputs))
-}
diff --git a/templates/next-template/next-env.d.ts b/templates/next-template/next-env.d.ts
deleted file mode 100644
index 4f11a03d..00000000
--- a/templates/next-template/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/templates/next-template/next.config.mjs b/templates/next-template/next.config.mjs
deleted file mode 100644
index 4e76bd0d..00000000
--- a/templates/next-template/next.config.mjs
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-   reactStrictMode: true,
-}
-
-export default nextConfig
diff --git a/templates/next-template/nyxbui.json b/templates/next-template/nyxbui.json
deleted file mode 100644
index 2ce012f3..00000000
--- a/templates/next-template/nyxbui.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://nyxbui.design/schema.json",
-  "style": "default",
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "app/globals.css",
-    "baseColor": "slate",
-    "cssVariables": true
-  },
-  "rsc": false,
-  "aliases": {
-    "utils": "~/lib/utils",
-    "components": "~/components"
-  }
-}
diff --git a/templates/next-template/package.json b/templates/next-template/package.json
deleted file mode 100644
index dede4a0f..00000000
--- a/templates/next-template/package.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "name": "next-template",
-  "version": "0.0.2",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "preview": "next build && next start",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@radix-ui/react-slot": "^1.0.2",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^1.2.1",
-    "lucide-react": "0.288.0",
-    "next": "14.1.3",
-    "next-themes": "^0.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sharp": "^0.31.3",
-    "tailwind-merge": "^1.13.2",
-    "tailwindcss-animate": "^1.0.6"
-  },
-  "devDependencies": {
-    "@eslint-react/eslint-plugin": "^1.5.12",
-    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
-    "@nyxb/eslint-config": "^3.0.1",
-    "@types/node": "^17.0.45",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/parser": "^5.61.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "9.2.0",
-    "eslint-plugin-format": "^0.1.1",
-    "eslint-plugin-react-hooks": "5.1.0-rc-3f1436cca1-20240516",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "postcss": "^8.4.24",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.4.2"
-  }
-}
diff --git a/templates/next-template/postcss.config.js b/templates/next-template/postcss.config.js
deleted file mode 100644
index 12092931..00000000
--- a/templates/next-template/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-   plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-   },
-}
diff --git a/templates/next-template/public/favicon.ico b/templates/next-template/public/favicon.ico
deleted file mode 100644
index 718d6fea..00000000
Binary files a/templates/next-template/public/favicon.ico and /dev/null differ
diff --git a/templates/next-template/public/next.svg b/templates/next-template/public/next.svg
deleted file mode 100644
index 5174b28c..00000000
--- a/templates/next-template/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/templates/next-template/public/thirteen.svg b/templates/next-template/public/thirteen.svg
deleted file mode 100644
index 8977c1bd..00000000
--- a/templates/next-template/public/thirteen.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/templates/next-template/public/vercel.svg b/templates/next-template/public/vercel.svg
deleted file mode 100644
index d2f84222..00000000
--- a/templates/next-template/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/templates/next-template/styles/globals.css b/templates/next-template/styles/globals.css
deleted file mode 100644
index bec980a8..00000000
--- a/templates/next-template/styles/globals.css
+++ /dev/null
@@ -1,83 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-   :root {
-      --background: 0 0% 100%;
-      --foreground: 222.2 47.4% 11.2%;
-
-      --muted: 210 40% 96.1%;
-      --muted-foreground: 215.4 16.3% 46.9%;
-
-      --popover: 0 0% 100%;
-      --popover-foreground: 222.2 47.4% 11.2%;
-
-      --border: 214.3 31.8% 91.4%;
-      --input: 214.3 31.8% 91.4%;
-
-      --card: 0 0% 100%;
-      --card-foreground: 222.2 47.4% 11.2%;
-
-      --primary: 222.2 47.4% 11.2%;
-      --primary-foreground: 210 40% 98%;
-
-      --secondary: 210 40% 96.1%;
-      --secondary-foreground: 222.2 47.4% 11.2%;
-
-      --accent: 210 40% 96.1%;
-      --accent-foreground: 222.2 47.4% 11.2%;
-
-      --destructive: 0 100% 50%;
-      --destructive-foreground: 210 40% 98%;
-
-      --ring: 215 20.2% 65.1%;
-
-      --radius: 0.5rem;
-   }
-
-   .dark {
-      --background: 224 71% 4%;
-      --foreground: 213 31% 91%;
-
-      --muted: 223 47% 11%;
-      --muted-foreground: 215.4 16.3% 56.9%;
-
-      --accent: 216 34% 17%;
-      --accent-foreground: 210 40% 98%;
-
-      --popover: 224 71% 4%;
-      --popover-foreground: 215 20.2% 65.1%;
-
-      --border: 216 34% 17%;
-      --input: 216 34% 17%;
-
-      --card: 224 71% 4%;
-      --card-foreground: 213 31% 91%;
-
-      --primary: 210 40% 98%;
-      --primary-foreground: 222.2 47.4% 1.2%;
-
-      --secondary: 222.2 47.4% 11.2%;
-      --secondary-foreground: 210 40% 98%;
-
-      --destructive: 0 63% 31%;
-      --destructive-foreground: 210 40% 98%;
-
-      --ring: 216 34% 17%;
-
-      --radius: 0.5rem;
-   }
-}
-
-@layer base {
-   * {
-      @apply border-border;
-   }
-   body {
-      @apply bg-background text-foreground;
-      font-feature-settings:
-         'rlig' 1,
-         'calt' 1;
-   }
-}
diff --git a/templates/next-template/tailwind.config.js b/templates/next-template/tailwind.config.js
deleted file mode 100644
index 7399a192..00000000
--- a/templates/next-template/tailwind.config.js
+++ /dev/null
@@ -1,76 +0,0 @@
-const { fontFamily } = require('tailwindcss/defaultTheme')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-   darkMode: ['class'],
-   content: ['app/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
-   theme: {
-      container: {
-         center: true,
-         padding: '2rem',
-         screens: {
-            '2xl': '1400px',
-         },
-      },
-      extend: {
-         colors: {
-            border: 'hsl(var(--border))',
-            input: 'hsl(var(--input))',
-            ring: 'hsl(var(--ring))',
-            background: 'hsl(var(--background))',
-            foreground: 'hsl(var(--foreground))',
-            primary: {
-               DEFAULT: 'hsl(var(--primary))',
-               foreground: 'hsl(var(--primary-foreground))',
-            },
-            secondary: {
-               DEFAULT: 'hsl(var(--secondary))',
-               foreground: 'hsl(var(--secondary-foreground))',
-            },
-            destructive: {
-               DEFAULT: 'hsl(var(--destructive))',
-               foreground: 'hsl(var(--destructive-foreground))',
-            },
-            muted: {
-               DEFAULT: 'hsl(var(--muted))',
-               foreground: 'hsl(var(--muted-foreground))',
-            },
-            accent: {
-               DEFAULT: 'hsl(var(--accent))',
-               foreground: 'hsl(var(--accent-foreground))',
-            },
-            popover: {
-               DEFAULT: 'hsl(var(--popover))',
-               foreground: 'hsl(var(--popover-foreground))',
-            },
-            card: {
-               DEFAULT: 'hsl(var(--card))',
-               foreground: 'hsl(var(--card-foreground))',
-            },
-         },
-         borderRadius: {
-            lg: `var(--radius)`,
-            md: `calc(var(--radius) - 2px)`,
-            sm: 'calc(var(--radius) - 4px)',
-         },
-         fontFamily: {
-            sans: ['var(--font-sans)', ...fontFamily.sans],
-         },
-         keyframes: {
-            'accordion-down': {
-               from: { height: '0' },
-               to: { height: 'var(--radix-accordion-content-height)' },
-            },
-            'accordion-up': {
-               from: { height: 'var(--radix-accordion-content-height)' },
-               to: { height: '0' },
-            },
-         },
-         animation: {
-            'accordion-down': 'accordion-down 0.2s ease-out',
-            'accordion-up': 'accordion-up 0.2s ease-out',
-         },
-      },
-   },
-   plugins: [require('tailwindcss-animate')],
-}
diff --git a/templates/next-template/tsconfig.json b/templates/next-template/tsconfig.json
deleted file mode 100644
index a5b08e2d..00000000
--- a/templates/next-template/tsconfig.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "compilerOptions": {
-    "incremental": true,
-    "jsx": "preserve",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "baseUrl": ".",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "paths": {
-      "~/*": ["./*"]
-    },
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "strict": true,
-    "strictNullChecks": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "skipLibCheck": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/templates/next-template/tsconfig.tsbuildinfo b/templates/next-template/tsconfig.tsbuildinfo
deleted file mode 100644
index c3543c50..00000000
--- a/templates/next-template/tsconfig.tsbuildinfo
+++ /dev/null
@@ -1 +0,0 @@
-{"program":{"fileNames":["../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2021.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2022.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2023.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.esnext.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.dom.iterable.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2016.intl.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2017.date.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2019.intl.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2020.date.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2020.number.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2021.promise.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2021.string.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2021.intl.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2022.array.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2022.error.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2022.intl.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2022.object.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2022.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2022.string.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2022.regexp.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2023.array.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.es2023.collection.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.esnext.collection.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.esnext.disposable.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.esnext.promise.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.esnext.decorators.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.esnext.object.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/styled-jsx/types/css.d.ts","../../node_modules/.pnpm/@types+react@18.2.61/node_modules/@types/react/global.d.ts","../../node_modules/.pnpm/csstype@3.1.2/node_modules/csstype/index.d.ts","../../node_modules/.pnpm/@types+prop-types@15.7.5/node_modules/@types/prop-types/index.d.ts","../../node_modules/.pnpm/@types+scheduler@0.16.3/node_modules/@types/scheduler/tracing.d.ts","../../node_modules/.pnpm/@types+react@18.2.61/node_modules/@types/react/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/styled-jsx/types/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/styled-jsx/types/macro.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/styled-jsx/types/style.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/styled-jsx/types/global.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/amp.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/amp.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/assert.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/assert/strict.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/globals.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/async_hooks.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/buffer.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/child_process.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/cluster.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/console.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/constants.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/crypto.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/dgram.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/diagnostics_channel.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/dns.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/dns/promises.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/domain.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/events.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/fs.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/fs/promises.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/http.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/http2.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/https.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/inspector.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/module.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/net.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/os.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/path.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/perf_hooks.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/process.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/punycode.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/querystring.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/readline.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/repl.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/stream.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/stream/promises.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/stream/consumers.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/stream/web.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/string_decoder.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/timers.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/timers/promises.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/tls.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/trace_events.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/tty.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/url.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/util.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/v8.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/vm.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/wasi.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/worker_threads.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/zlib.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/globals.global.d.ts","../../node_modules/.pnpm/@types+node@17.0.45/node_modules/@types/node/index.d.ts","../../node_modules/.pnpm/@types+react@18.3.3/node_modules/@types/react/global.d.ts","../../node_modules/.pnpm/@types+react@18.3.3/node_modules/@types/react/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/get-page-files.d.ts","../../node_modules/.pnpm/@types+react@18.2.61/node_modules/@types/react/canary.d.ts","../../node_modules/.pnpm/@types+react@18.2.61/node_modules/@types/react/experimental.d.ts","../../node_modules/.pnpm/@types+react-dom@18.3.0/node_modules/@types/react-dom/index.d.ts","../../node_modules/.pnpm/@types+react-dom@18.2.19/node_modules/@types/react-dom/index.d.ts","../../node_modules/.pnpm/@types+react-dom@18.2.19/node_modules/@types/react-dom/canary.d.ts","../../node_modules/.pnpm/@types+react-dom@18.2.19/node_modules/@types/react-dom/experimental.d.ts","../../node_modules/.pnpm/querystring@0.2.1/node_modules/querystring/decode.d.ts","../../node_modules/.pnpm/querystring@0.2.1/node_modules/querystring/encode.d.ts","../../node_modules/.pnpm/querystring@0.2.1/node_modules/querystring/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/webpack/webpack.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/config.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/load-custom-routes.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/image-config.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/plugins/subresource-integrity-plugin.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/body-streams.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-kind.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-definitions/route-definition.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-matches/route-match.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/app-router-headers.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/request-meta.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/config-shared.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/base-http/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/api-utils/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/node-environment.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/require-hook.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/node-polyfill-crypto.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/page-types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/analysis/get-page-static-info.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/get-module-build-info.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/plugins/middleware-plugin.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/revalidate.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/render-result.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/helpers/i18n-provider.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/next-url.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/@edge-runtime/cookies/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/spec-extension/cookies.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/spec-extension/request.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/spec-extension/fetch-event.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/spec-extension/response.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/setup-exception-listeners.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/constants.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/plugins/pages-manifest-plugin.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/router/utils/route-regex.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/router/utils/route-matcher.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/router/utils/parse-url.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/base-http/node.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/font-utils.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/plugins/flight-manifest-plugin.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-modules/route-module.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/load-components.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/router/utils/middleware-route-matcher.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/plugins/next-font-manifest-plugin.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-definitions/locale-route-definition.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-definitions/pages-route-definition.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/mitt.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/with-router.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/router.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/route-loader.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/page-loader.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/bloom-filter.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/router/router.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/router-context.shared-runtime.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/loadable-context.shared-runtime.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/loadable.shared-runtime.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/image-config-context.shared-runtime.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/hooks-client-context.shared-runtime.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/head-manager-context.shared-runtime.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-definitions/app-page-route-definition.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/modern-browserslist-target.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/constants.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/metadata/types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/page-extensions-type.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-app-loader.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/app-dir-module.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/response-cache/types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/response-cache/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/incremental-cache/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/hooks-server-context.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/static-generation-async-storage.external.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/spec-extension/adapters/request-cookies.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/async-storage/draft-mode-provider.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/spec-extension/adapters/headers.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/request-async-storage.external.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/app-render/create-error-handler.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/app-render/app-render.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/server-inserted-html.shared-runtime.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/amp-context.shared-runtime.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-modules/app-page/vendored/contexts/entrypoints.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-modules/app-page/module.compiled.d.ts","../../node_modules/.pnpm/@types+react@18.2.61/node_modules/@types/react/jsx-runtime.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/error-boundary.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/router-reducer/create-initial-router-state.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/app-router.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/layout-router.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/render-from-template-context.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/action-async-storage.external.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/plugins/app-build-manifest-plugin.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/utils.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/static-generation-bailout.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/static-generation-searchparams-bailout-provider.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/searchparams-bailout-proxy.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/not-found-boundary.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/app-render/rsc/preloads.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/app-render/rsc/taint.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/app-render/entry-base.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/templates/app-page.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-modules/app-page/module.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/app-render/types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/router-reducer/fetch-server-response.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/router-reducer/router-reducer-types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/app-router-context.shared-runtime.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-modules/pages/vendored/contexts/entrypoints.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-modules/pages/module.compiled.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/templates/pages.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-modules/pages/module.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/render.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-definitions/pages-api-route-definition.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-matches/pages-api-route-match.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-matchers/route-matcher.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-matcher-providers/route-matcher-provider.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-matcher-managers/route-matcher-manager.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/normalizers/normalizer.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/normalizers/locale-route-normalizer.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/normalizers/request/pathname-normalizer.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/normalizers/request/suffix.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/normalizers/request/rsc.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/normalizers/request/prefix.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/normalizers/request/postponed.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/normalizers/request/prefetch-rsc.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/normalizers/request/next-data.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/base-server.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/image-optimizer.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/next-server.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/coalesced-function.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/trace/types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/trace/trace.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/trace/shared.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/trace/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/load-jsconfig.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack-config.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/plugins/define-env-plugin.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/swc/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/dev/parse-version-info.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/dev/hot-reloader-types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/telemetry/storage.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/router-utils/types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/render-server.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/router-server.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/router/utils/path-match.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/router-utils/filesystem.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/dev-bundler-service.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/dev/static-paths-worker.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/dev/next-dev-server.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/next.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/metadata/types/alternative-urls-types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/metadata/types/extra-types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/metadata/types/metadata-types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/metadata/types/manifest-types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/metadata/types/opengraph-types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/metadata/types/twitter-types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/metadata/types/metadata-interface.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/types/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/html-context.shared-runtime.d.ts","../../node_modules/.pnpm/@next+env@14.1.3/node_modules/@next/env/dist/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/utils.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/pages/_app.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/app.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/spec-extension/unstable-cache.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/spec-extension/revalidate-path.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/spec-extension/revalidate-tag.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/spec-extension/unstable-no-store.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/cache.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/runtime-config.external.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/config.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/pages/_document.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/document.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/dynamic.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dynamic.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/pages/_error.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/error.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/head.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/head.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/draft-mode.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/headers.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/headers.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/get-img-props.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/image-component.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/shared/lib/image-external.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/image.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/link.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/link.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/redirect-status-code.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/redirect.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/not-found.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/navigation.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/navigation.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/router.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/script.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/script.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/spec-extension/user-agent.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/@edge-runtime/primitives/url.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/web/spec-extension/image-response.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/@vercel/og/satori/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/@vercel/og/emoji/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/@vercel/og/types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/server.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/types/global.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/types/compiled.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/image-types/global.d.ts","./next-env.d.ts","./config/site.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/@next/font/dist/types.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/@next/font/dist/google/index.d.ts","../../node_modules/.pnpm/next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/font/google/index.d.ts","./lib/fonts.ts","../../node_modules/.pnpm/clsx@1.2.1/node_modules/clsx/clsx.d.ts","../../node_modules/.pnpm/tailwind-merge@1.14.0/node_modules/tailwind-merge/dist/lib/tw-join.d.ts","../../node_modules/.pnpm/tailwind-merge@1.14.0/node_modules/tailwind-merge/dist/lib/types.d.ts","../../node_modules/.pnpm/tailwind-merge@1.14.0/node_modules/tailwind-merge/dist/lib/create-tailwind-merge.d.ts","../../node_modules/.pnpm/tailwind-merge@1.14.0/node_modules/tailwind-merge/dist/lib/validators.d.ts","../../node_modules/.pnpm/tailwind-merge@1.14.0/node_modules/tailwind-merge/dist/lib/default-config.d.ts","../../node_modules/.pnpm/tailwind-merge@1.14.0/node_modules/tailwind-merge/dist/lib/extend-tailwind-merge.d.ts","../../node_modules/.pnpm/tailwind-merge@1.14.0/node_modules/tailwind-merge/dist/lib/from-theme.d.ts","../../node_modules/.pnpm/tailwind-merge@1.14.0/node_modules/tailwind-merge/dist/lib/merge-configs.d.ts","../../node_modules/.pnpm/tailwind-merge@1.14.0/node_modules/tailwind-merge/dist/lib/tw-merge.d.ts","../../node_modules/.pnpm/tailwind-merge@1.14.0/node_modules/tailwind-merge/dist/index.d.ts","./lib/utils.ts","./types/nav.ts","../../node_modules/.pnpm/@types+react@18.3.3/node_modules/@types/react/jsx-runtime.d.ts","../../node_modules/.pnpm/@radix-ui+react-slot@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.d.ts","../../node_modules/.pnpm/clsx@2.0.0/node_modules/clsx/clsx.d.ts","../../node_modules/.pnpm/class-variance-authority@0.7.0/node_modules/class-variance-authority/dist/types.d.ts","../../node_modules/.pnpm/class-variance-authority@0.7.0/node_modules/class-variance-authority/dist/index.d.ts","./components/ui/button.tsx","../../node_modules/.pnpm/lucide-react@0.288.0_react@18.3.1/node_modules/lucide-react/dist/lucide-react.d.ts","./components/icons.tsx","./components/main-nav.tsx","../../node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@1_phmuudg5mfseazdnskda6dd5gm/node_modules/next-themes/dist/types.d.ts","../../node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@1_phmuudg5mfseazdnskda6dd5gm/node_modules/next-themes/dist/index.d.ts","./components/theme-toggle.tsx","./components/site-header.tsx","./components/tailwind-indicator.tsx","./components/theme-provider.tsx","./app/layout.tsx","./app/page.tsx","./.next/types/app/page.ts","../../node_modules/.pnpm/@types+cli-progress@3.11.5/node_modules/@types/cli-progress/index.d.ts","../../node_modules/.pnpm/@types+eslint@8.56.10/node_modules/@types/eslint/helpers.d.ts","../../node_modules/.pnpm/@types+estree@1.0.5/node_modules/@types/estree/index.d.ts","../../node_modules/.pnpm/@types+json-schema@7.0.12/node_modules/@types/json-schema/index.d.ts","../../node_modules/.pnpm/@types+eslint@8.56.10/node_modules/@types/eslint/index.d.ts"],"fileInfos":[{"version":"824cb491a40f7e8fdeb56f1df5edf91b23f3e3ee6b4cde84d4a99be32338faee","affectsGlobalScope":true},"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","9a68c0c07ae2fa71b44384a839b7b8d81662a236d4b9ac30916718f7510b1b2d","5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4","feecb1be483ed332fad555aff858affd90a48ab19ba7272ee084704eb7167569","5514e54f17d6d74ecefedc73c504eadffdeda79c7ea205cf9febead32d45c4bc","1c0cdb8dc619bc549c3e5020643e7cf7ae7940058e8c7e5aefa5871b6d86f44b","886e50ef125efb7878f744e86908884c0133e7a6d9d80013f421b0cd8fb2af94",{"version":"87d693a4920d794a73384b3c779cadcb8548ac6945aa7a925832fe2418c9527a","affectsGlobalScope":true},{"version":"76f838d5d49b65de83bc345c04aa54c62a3cfdb72a477dc0c0fce89a30596c30","affectsGlobalScope":true},{"version":"138fb588d26538783b78d1e3b2c2cc12d55840b97bf5e08bca7f7a174fbe2f17","affectsGlobalScope":true},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true},{"version":"4443e68b35f3332f753eacc66a04ac1d2053b8b035a0e0ac1d455392b5e243b3","affectsGlobalScope":true},{"version":"bc47685641087c015972a3f072480889f0d6c65515f12bd85222f49a98952ed7","affectsGlobalScope":true},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true},{"version":"93495ff27b8746f55d19fcbcdbaccc99fd95f19d057aed1bd2c0cafe1335fbf0","affectsGlobalScope":true},{"version":"6fc23bb8c3965964be8c597310a2878b53a0306edb71d4b5a4dfe760186bcc01","affectsGlobalScope":true},{"version":"ea011c76963fb15ef1cdd7ce6a6808b46322c527de2077b6cfdf23ae6f5f9ec7","affectsGlobalScope":true},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true},{"version":"bb42a7797d996412ecdc5b2787720de477103a0b2e53058569069a0e2bae6c7e","affectsGlobalScope":true},{"version":"4738f2420687fd85629c9efb470793bb753709c2379e5f85bc1815d875ceadcd","affectsGlobalScope":true},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true},{"version":"9fc46429fbe091ac5ad2608c657201eb68b6f1b8341bd6d670047d32ed0a88fa","affectsGlobalScope":true},{"version":"61c37c1de663cf4171e1192466e52c7a382afa58da01b1dc75058f032ddf0839","affectsGlobalScope":true},{"version":"b541a838a13f9234aba650a825393ffc2292dc0fc87681a5d81ef0c96d281e7a","affectsGlobalScope":true},{"version":"b20fe0eca9a4e405f1a5ae24a2b3290b37cf7f21eba6cbe4fc3fab979237d4f3","affectsGlobalScope":true},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true},{"version":"d7e7d9b7b50e5f22c915b525acc5a49a7a6584cf8f62d0569e557c5cfc4b2ac2","affectsGlobalScope":true},{"version":"71c37f4c9543f31dfced6c7840e068c5a5aacb7b89111a4364b1d5276b852557","affectsGlobalScope":true},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true},{"version":"49ed889be54031e1044af0ad2c603d627b8bda8b50c1a68435fe85583901d072","affectsGlobalScope":true},{"version":"e93d098658ce4f0c8a0779e6cab91d0259efb88a318137f686ad76f8410ca270","affectsGlobalScope":true},{"version":"063600664504610fe3e99b717a1223f8b1900087fab0b4cad1496a114744f8df","affectsGlobalScope":true},{"version":"934019d7e3c81950f9a8426d093458b65d5aff2c7c1511233c0fd5b941e608ab","affectsGlobalScope":true},{"version":"bf14a426dbbf1022d11bd08d6b8e709a2e9d246f0c6c1032f3b2edb9a902adbe","affectsGlobalScope":true},{"version":"5e07ed3809d48205d5b985642a59f2eba47c402374a7cf8006b686f79efadcbd","affectsGlobalScope":true},{"version":"2b72d528b2e2fe3c57889ca7baef5e13a56c957b946906d03767c642f386bbc3","affectsGlobalScope":true},{"version":"8073890e29d2f46fdbc19b8d6d2eb9ea58db9a2052f8640af20baff9afbc8640","affectsGlobalScope":true},{"version":"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1","affectsGlobalScope":true},{"version":"af3dd424cf267428f30ccfc376f47a2c0114546b55c44d8c0f1d57d841e28d74","affectsGlobalScope":true},{"version":"995c005ab91a498455ea8dfb63aa9f83fa2ea793c3d8aa344be4a1678d06d399","affectsGlobalScope":true},{"version":"51e547984877a62227042850456de71a5c45e7fe86b7c975c6e68896c86fa23b","affectsGlobalScope":true},{"version":"956d27abdea9652e8368ce029bb1e0b9174e9678a273529f426df4b3d90abd60","affectsGlobalScope":true},{"version":"4fa6ed14e98aa80b91f61b9805c653ee82af3502dc21c9da5268d3857772ca05","affectsGlobalScope":true},{"version":"e6633e05da3ff36e6da2ec170d0d03ccf33de50ca4dc6f5aeecb572cedd162fb","affectsGlobalScope":true},{"version":"d8670852241d4c6e03f2b89d67497a4bbefe29ecaa5a444e2c11a9b05e6fccc6","affectsGlobalScope":true},{"version":"8444af78980e3b20b49324f4a16ba35024fef3ee069a0eb67616ea6ca821c47a","affectsGlobalScope":true},{"version":"caccc56c72713969e1cfe5c3d44e5bab151544d9d2b373d7dbe5a1e4166652be","affectsGlobalScope":true},{"version":"3287d9d085fbd618c3971944b65b4be57859f5415f495b33a6adc994edd2f004","affectsGlobalScope":true},{"version":"50d53ccd31f6667aff66e3d62adf948879a3a16f05d89882d1188084ee415bbc","affectsGlobalScope":true},{"version":"08a58483392df5fcc1db57d782e87734f77ae9eab42516028acbfe46f29a3ef7","affectsGlobalScope":true},{"version":"436aaf437562f276ec2ddbee2f2cdedac7664c1e4c1d2c36839ddd582eeb3d0a","affectsGlobalScope":true},{"version":"b1cb28af0c891c8c96b2d6b7be76bd394fddcfdb4709a20ba05a7c1605eea0f9","affectsGlobalScope":true},{"version":"13f6e6380c78e15e140243dc4be2fa546c287c6d61f4729bc2dd7cf449605471","affectsGlobalScope":true},{"version":"15b98a533864d324e5f57cd3cfc0579b231df58c1c0f6063ea0fcb13c3c74ff9","affectsGlobalScope":true},{"version":"ac77cb3e8c6d3565793eb90a8373ee8033146315a3dbead3bde8db5eaf5e5ec6","affectsGlobalScope":true},{"version":"d4b1d2c51d058fc21ec2629fff7a76249dec2e36e12960ea056e3ef89174080f","affectsGlobalScope":true},{"version":"2fef54945a13095fdb9b84f705f2b5994597640c46afeb2ce78352fab4cb3279","affectsGlobalScope":true},{"version":"33358442698bb565130f52ba79bfd3d4d484ac85fe33f3cb1759c54d18201393","affectsGlobalScope":true},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true},"0990a7576222f248f0a3b888adcb7389f957928ce2afb1cd5128169086ff4d29",{"version":"55461596dc873b866911ef4e640fae4c39da7ac1fbc7ef5e649cb2f2fb42c349","affectsGlobalScope":true},"4c68749a564a6facdf675416d75789ee5a557afda8960e0803cf6711fa569288","6a386ff939f180ae8ef064699d8b7b6e62bc2731a62d7fbf5e02589383838dea","f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",{"version":"e57060d35890b1b32ced2c62875e5db1be4eba7f7cf91db86715bb7c1c8498bc","affectsGlobalScope":true},"cc69795d9954ee4ad57545b10c7bf1a7260d990231b1685c147ea71a6faa265c","8bc6c94ff4f2af1f4023b7bb2379b08d3d7dd80c698c9f0b07431ea16101f05f","1b61d259de5350f8b1e5db06290d31eaebebc6baafd5f79d314b5af9256d7153","57194e1f007f3f2cbef26fa299d4c6b21f4623a2eddc63dfeef79e38e187a36e","0f6666b58e9276ac3a38fdc80993d19208442d6027ab885580d93aec76b4ef00","05fd364b8ef02fb1e174fbac8b825bdb1e5a36a016997c8e421f5fab0a6da0a0","0cba3a5d7b81356222594442753cf90dd2892e5ccfe1d262aaca6896ba6c1380","a69c09dbea52352f479d3e7ac949fde3d17b195abe90b045d619f747b38d6d1a",{"version":"77f0b5c6a193a699c9f7d7fb0578e64e562d271afa740783665d2a827104a873","affectsGlobalScope":true},"e5979905796fe2740d85fbaf4f11f42b7ee1851421afe750823220813421b1af",{"version":"fcdcb42da18dd98dc286b1876dd425791772036012ae61263c011a76b13a190f","affectsGlobalScope":true},"1dab5ab6bcf11de47ab9db295df8c4f1d92ffa750e8f095e88c71ce4c3299628","f71f46ccd5a90566f0a37b25b23bc4684381ab2180bdf6733f4e6624474e1894",{"version":"54e65985a3ee3cec182e6a555e20974ea936fc8b8d1738c14e8ed8a42bd921d4","affectsGlobalScope":true},"82408ed3e959ddc60d3e9904481b5a8dc16469928257af22a3f7d1a3bc7fd8c4","5b30f550565fd0a7524282c81c27fe8534099e2cd26170ca80852308f07ae68d","34e5de87d983bc6aefef8b17658556e3157003e8d9555d3cb098c6bef0b5fbc8","d97cd8a4a42f557fc62271369ed0461c8e50d47b7f9c8ad0b5462f53306f6060","f27371653aded82b2b160f7a7033fb4a5b1534b6f6081ef7be1468f0f15327d3","c762cd6754b13a461c54b59d0ae0ab7aeef3c292c6cf889873f786ee4d8e75c9","f4ea7d5df644785bd9fbf419930cbaec118f0d8b4160037d2339b8e23c059e79",{"version":"bfea28e6162ed21a0aeed181b623dcf250aa79abf49e24a6b7e012655af36d81","affectsGlobalScope":true},"b8aca9d0c81abb02bec9b7621983ae65bde71da6727580070602bd2500a9ce2a","ae97e20f2e10dbeec193d6a2f9cd9a367a1e293e7d6b33b68bacea166afd7792","10d4796a130577d57003a77b95d8723530bbec84718e364aa2129fa8ffba0378","063f53ff674228c190efa19dd9448bcbd540acdbb48a928f4cf3a1b9f9478e43","bf73c576885408d4a176f44a9035d798827cc5020d58284cb18d7573430d9022","7ae078ca42a670445ae0c6a97c029cb83d143d62abd1730efb33f68f0b2c0e82",{"version":"e8b18c6385ff784228a6f369694fcf1a6b475355ba89090a88de13587a9391d5","affectsGlobalScope":true},"287b21dc1d1b9701c92e15e7dd673dfe6044b15812956377adffb6f08825b1bc","12eea70b5e11e924bb0543aea5eadc16ced318aa26001b453b0d561c2fd0bd1e","08777cd9318d294646b121838574e1dd7acbb22c21a03df84e1f2c87b1ad47f2","08a90bcdc717df3d50a2ce178d966a8c353fd23e5c392fd3594a6e39d9bb6304",{"version":"4cd4cff679c9b3d9239fd7bf70293ca4594583767526916af8e5d5a47d0219c7","affectsGlobalScope":true},"2a12d2da5ac4c4979401a3f6eaafa874747a37c365e4bc18aa2b171ae134d21b","002b837927b53f3714308ecd96f72ee8a053b8aeb28213d8ec6de23ed1608b66","1dc9c847473bb47279e398b22c740c83ea37a5c88bf66629666e3cf4c5b9f99c","a9e4a5a24bf2c44de4c98274975a1a705a0abbaad04df3557c2d3cd8b1727949","00fa7ce8bc8acc560dc341bbfdf37840a8c59e6a67c9bfa3fa5f36254df35db2","1b952304137851e45bc009785de89ada562d9376177c97e37702e39e60c2f1ff",{"version":"806ef4cac3b3d9fa4a48d849c8e084d7c72fcd7b16d76e06049a9ed742ff79c0","affectsGlobalScope":true},"44b8b584a338b190a59f4f6929d072431950c7bd92ec2694821c11bce180c8a5","5f0ed51db151c2cdc4fa3bb0f44ce6066912ad001b607a34e65a96c52eb76248",{"version":"af9771b066ec35ffa1c7db391b018d2469d55e51b98ae95e62b6cbef1b0169ca","affectsGlobalScope":true},"664d8f2d59164f2e08c543981453893bc7e003e4dfd29651ce09db13e9457980","103d70bfbeb3cd3a3f26d1705bf986322d8738c2c143f38ebb743b1e228d7444","f52fbf64c7e480271a9096763c4882d356b05cab05bf56a64e68a95313cd2ce2","59bdb65f28d7ce52ccfc906e9aaf422f8b8534b2d21c32a27d7819be5ad81df7",{"version":"3a2da34079a2567161c1359316a32e712404b56566c45332ac9dcee015ecce9f","affectsGlobalScope":true},"28a2e7383fd898c386ffdcacedf0ec0845e5d1a86b5a43f25b86bc315f556b79","3aff9c8c36192e46a84afe7b926136d520487155154ab9ba982a8b544ea8fc95","a880cf8d85af2e4189c709b0fea613741649c0e40fffb4360ec70762563d5de0","85bbf436a15bbeda4db888be3062d47f99c66fd05d7c50f0f6473a9151b6a070","9f9c49c95ecd25e0cb2587751925976cf64fd184714cb11e213749c80cf0f927","f0c75c08a71f9212c93a719a25fb0320d53f2e50ca89a812640e08f8ad8c408c",{"version":"ab9b9a36e5284fd8d3bf2f7d5fcbc60052f25f27e4d20954782099282c60d23e","affectsGlobalScope":true},"9cafe917bf667f1027b2bb62e2de454ecd2119c80873ad76fc41d941089753b8",{"version":"36a2e4c9a67439aca5f91bb304611d5ae6e20d420503e96c230cf8fcdc948d94","affectsGlobalScope":true},{"version":"8ca4709dbd22a34bcc1ebf93e1877645bdb02ebd3f3d9a211a299a8db2ee4ba1","affectsGlobalScope":true},"8caa5c86be1b793cd5f599e27ecb34252c41e011980f7d61ae4989a149ff6ccc","2b2bef0fbee391adb55bcd1fa38edf99e87233a94af47c30951d1b641fc46538","f21af9796e3aa1fe83b3d3e3b401ad4e15e39c15e8e0dab3bb946794b4d2e63f","adb17fea4d847e1267ae1241fa1ac3917c7e332999ebdab388a24d82d4f58240","7ac7ef12f7ece6464d83d2d56fea727260fb954fdd51a967e94f97b8595b714b","59cf0ee776606259a2a159b0e94a254098bb2b1202793e3f0723a04009d59f4b","bb7a61dd55dc4b9422d13da3a6bb9cc5e89be888ef23bbcf6558aa9726b89a1c","ad7e61eca7f2f8bf47e72695f9f6663b75e41d87ef49abdb17c0cb843862f8aa","ecba2e44af95b0599c269a92628cec22e752868bce37396740deb51a5c547a26","46a9fb41a8f3bc7539eeebc15a6e04b9e55d7537a081615ad3614220d34c3e0f","db6d2d9daad8a6d83f281af12ce4355a20b9a3e71b82b9f57cddcca0a8964a96","cfe4ef4710c3786b6e23dae7c086c70b4f4835a2e4d77b75d39f9046106e83d3","cbea99888785d49bb630dcbb1613c73727f2b5a2cf02e1abcaab7bcf8d6bf3c5","98817124fd6c4f60e0b935978c207309459fb71ab112cf514f26f333bf30830e","a86f82d646a739041d6702101afa82dcb935c416dd93cbca7fd754fd0282ce1f","2dad084c67e649f0f354739ec7df7c7df0779a28a4f55c97c6b6883ae850d1ce","fa5bbc7ab4130dd8cdc55ea294ec39f76f2bc507a0f75f4f873e38631a836ca7","df45ca1176e6ac211eae7ddf51336dc075c5314bc5c253651bae639defd5eec5","cf86de1054b843e484a3c9300d62fbc8c97e77f168bbffb131d560ca0474d4a8","a28e69b82de8008d23b88974aeb6fba7195d126c947d0da43c16e6bc2f719f9f","528637e771ee2e808390d46a591eaef375fa4b9c99b03749e22b1d2e868b1b7c","6faf62b01899a492bf7f9a69318b4e6b83057a6cd32d2b943550a5624309577f","fc46f093d1b754a8e3e34a071a1dd402f42003927676757a9a10c6f1d195a35b","b7b3258e8d47333721f9d4c287361d773f8fa88e52d1148812485d9fc06d2577","e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","a9af0e608929aaf9ce96bd7a7b99c9360636c31d73670e4af09a09950df97841","e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","c86fe861cf1b4c46a0fb7d74dffe596cf679a2e5e8b1456881313170f092e3fa","e8db7e1cf8a10b4bbb58002ce9e7e73493abac738a09855c499fb56f773a729c","47e5af2a841356a961f815e7c55d72554db0c11b4cba4d0caab91f8717846a94","4c91cc1ab59b55d880877ccf1999ded0bb2ebc8e3a597c622962d65bf0e76be8","fa1ea09d3e073252eccff2f6630a4ce5633cc2ff963ba672dd8fd6783108ea83","f5f541902bf7ae0512a177295de9b6bcd6809ea38307a2c0a18bfca72212f368","e8da637cbd6ed1cf6c36e9424f6bcee4515ca2c677534d4006cbd9a05f930f0c","ca1b882a105a1972f82cc58e3be491e7d750a1eb074ffd13b198269f57ed9e1b","fc3e1c87b39e5ba1142f27ec089d1966da168c04a859a4f6aab64dceae162c2b","3867ca0e9757cc41e04248574f4f07b8f9e3c0c2a796a5eb091c65bfd2fc8bdb","6c66f6f7d9ff019a644ff50dd013e6bf59be4bf389092948437efa6b77dc8f9a","4e10622f89fea7b05dd9b52fb65e1e2b5cbd96d4cca3d9e1a60bb7f8a9cb86a1","ef2d1bd01d144d426b72db3744e7a6b6bb518a639d5c9c8d86438fb75a3b1934","b9750fe7235da7d8bf75cb171bf067b7350380c74271d3f80f49aea7466b55b5","e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","c9e73dfb3f0afe113c123ced1cd45da14f82c66898209bab35b7d273e0fc6990","e9e731cc4d5767a85639ad3d203d4a54b0038177b91819badee8c7efcf23a743","ac60bbee0d4235643cc52b57768b22de8c257c12bd8c2039860540cab1fa1d82","973b59a17aaa817eb205baf6c132b83475a5c0a44e8294a472af7793b1817e89","ada39cbb2748ab2873b7835c90c8d4620723aedf323550e8489f08220e477c7f","6e5f5cee603d67ee1ba6120815497909b73399842254fc1e77a0d5cdc51d8c9c","f79e0681538ef94c273a46bb1a073b4fe9fdc93ef7f40cc2c3abd683b85f51fc","70f3814c457f54a7efe2d9ce9d2686de9250bb42eb7f4c539bd2280a42e52d33","17ace83a5bea3f1da7e0aef7aab0f52bca22619e243537a83a89352a611b837d","ef61792acbfa8c27c9bd113f02731e66229f7d3a169e3c1993b508134f1a58e0","afcb759e8e3ad6549d5798820697002bc07bdd039899fad0bf522e7e8a9f5866","f6404e7837b96da3ea4d38c4f1a3812c96c9dcdf264e93d5bdb199f983a3ef4b","c5426dbfc1cf90532f66965a7aa8c1136a78d4d0f96d8180ecbfc11d7722f1a5","65a15fc47900787c0bd18b603afb98d33ede930bed1798fc984d5ebb78b26cf9","9d202701f6e0744adb6314d03d2eb8fc994798fc83d91b691b75b07626a69801","de9d2df7663e64e3a91bf495f315a7577e23ba088f2949d5ce9ec96f44fba37d","c7af78a2ea7cb1cd009cfb5bdb48cd0b03dad3b54f6da7aab615c2e9e9d570c5","1dc574e42493e8bf9bb37be44d9e38c5bd7bbc04f884e5e58b4d69636cb192b3",{"version":"9deab571c42ed535c17054f35da5b735d93dc454d83c9a5330ecc7a4fb184e9e","affectsGlobalScope":true},{"version":"db01d18853469bcb5601b9fc9826931cc84cc1a1944b33cad76fd6f1e3d8c544","affectsGlobalScope":true},"dba114fb6a32b355a9cfc26ca2276834d72fe0e94cd2c3494005547025015369",{"version":"903e299a28282fa7b714586e28409ed73c3b63f5365519776bf78e8cf173db36","affectsGlobalScope":true},"fa6c12a7c0f6b84d512f200690bfc74819e99efae69e4c95c4cd30f6884c526e","f1c32f9ce9c497da4dc215c3bc84b722ea02497d35f9134db3bb40a8d918b92b",{"version":"b73c319af2cc3ef8f6421308a250f328836531ea3761823b4cabbd133047aefa","affectsGlobalScope":true},"e433b0337b8106909e7953015e8fa3f2d30797cea27141d1c5b135365bb975a6","dd3900b24a6a8745efeb7ad27629c0f8a626470ac229c1d73f1fe29d67e44dca","ddff7fc6edbdc5163a09e22bf8df7bef75f75369ebd7ecea95ba55c4386e2441","106c6025f1d99fd468fd8bf6e5bda724e11e5905a4076c5d29790b6c3745e50c","ec29be0737d39268696edcec4f5e97ce26f449fa9b7afc2f0f99a86def34a418","4d4481ad9bd6783871db9d06eedc06214b24587c1d94b1d3cbe2e99d4d73d665","ec6cba1c02c675e4dd173251b156792e8d3b0c816af6d6ad93f1a55d674591aa","b620391fe8060cf9bedc176a4d01366e6574d7a71e0ac0ab344a4e76576fcbb8","41acd266e78e6880cdf79bacac97be0cf597e8d2b9ad8e27704ad43426eb8f2a","e15d3c84d5077bb4a3adee4c791022967b764dc41cb8fa3cfa44d4379b2c95f5","78244a2a8ab1080e0dd8fc3633c204c9a4be61611d19912f4b157f7ef7367049","e1fc1a1045db5aa09366be2b330e4ce391550041fc3e925f60998ca0b647aa97","b3751ab2273a6abc16e56cb61246db847fb0c6d4b71dad6c04761ca0c6c99fc3","43ba4f2fa8c698f5c304d21a3ef596741e8e85a810b7c1f9b692653791d8d97a","abf9bfffaa0bb56e8afa78b8fabd0ba5923803444b92e87577a90f3537404526","3556cfbab7b43da96d15a442ddbb970e1f2fc97876d055b6555d86d7ac57dae5","437751e0352c6e924ddf30e90849f1d9eb00ca78c94d58d6a37202ec84eb8393","48e8af7fdb2677a44522fd185d8c87deff4d36ee701ea003c6c780b1407a1397","606e6f841ba9667de5d83ca458449f0ed8c511ba635f753eaa731e532dea98c7","d860ce4d43c27a105290c6fdf75e13df0d40e3a4e079a3c47620255b0e396c64","b064dd7dd6aa5efef7e0cc056fed33fc773ea39d1e43452ee18a81d516fb762c","2e4f37ffe8862b14d8e24ae8763daaa8340c0df0b859d9a9733def0eee7562d9","13283350547389802aa35d9f2188effaeac805499169a06ef5cd77ce2a0bd63f","680793958f6a70a44c8d9ae7d46b7a385361c69ac29dcab3ed761edce1c14ab8","6ac6715916fa75a1f7ebdfeacac09513b4d904b667d827b7535e84ff59679aff","42c169fb8c2d42f4f668c624a9a11e719d5d07dacbebb63cbcf7ef365b0a75b3","3d1a2f2bcad11d489f6502087379ad28a773461e1dca80297d2219e89d778a31","ccccbca40b0615f5b14902e7d960f0c7a96b75d9ea6a20d9c1a88f5874fe55e5","5fe23bd829e6be57d41929ac374ee9551ccc3c44cee893167b7b5b77be708014","8755047a16970243683d857754a93863da6fed6bf1737d195f55444c667ae8ee","438c7513b1df91dcef49b13cd7a1c4720f91a36e88c1df731661608b7c055f10","ad444a874f011d3a797f1a41579dbfcc6b246623f49c20009f60e211dbd5315e","361e2b13c6765d7f85bb7600b48fde782b90c7c41105b7dab1f6e7871071ba20","1f5730d4bbb923addc1eb475056b464327d5720702481c799a0c0a36a4f7fa70","4c335d3a693925d96a8412087b3d675d20f04aa94f49581d1ecefb7373d458a1","0c62ce5d1677ebb0192a92bb9268b276f43c678dabc85a4a218304c913ecb8c4","9c250db4bab4f78fad08be7f4e43e962cc143e0f78763831653549ceb477344a","021a9498000497497fd693dd315325484c58a71b5929e2bbb91f419b04b24cea","9385cdc09850950bc9b59cca445a3ceb6fcca32b54e7b626e746912e489e535e","0a72186f94215d020cb386f7dca81d7495ab6c17066eb07d0f44a5bf33c1b21a","d6786782daa690925e139faad965b2d1745f71380c26861717f10525790566d9","63a8e96f65a22604eae82737e409d1536e69a467bb738bec505f4f97cce9d878","3fd78152a7031315478f159c6a5872c712ece6f01212c78ea82aef21cb0726e2","c59596fe28e8c57bed899681e48881c580f3d6111bda02708b68fc796da98563","cda4052f66b1e6cb7cf1fdfd96335d1627aa24a3b8b82ba4a9f873ec3a7bcde8","0869acd1c5d6d68ebad5471a7f1dead17adf6d31b597f9d55e2c64e87f02c6dc","85125b1b2d5cc89fe2a6aa79ea8b83719690d526ab24b0715dad0147eb1f8ab4","fd933f824347f9edd919618a76cdb6a0c0085c538115d9a287fa0c7f59957ab3","6ac6715916fa75a1f7ebdfeacac09513b4d904b667d827b7535e84ff59679aff","6a1aa3e55bdc50503956c5cd09ae4cd72e3072692d742816f65c66ca14f4dfdd","ab75cfd9c4f93ffd601f7ca1753d6a9d953bbedfbd7a5b3f0436ac8a1de60dfa","28ebfca21bccf412dbb83a1095ee63eaa65dfc31d06f436f3b5f24bfe3ede7fa","b73cbf0a72c8800cf8f96a9acfe94f3ad32ca71342a8908b8ae484d61113f647","bae6dd176832f6423966647382c0d7ba9e63f8c167522f09a982f086cd4e8b23","1364f64d2fb03bbb514edc42224abd576c064f89be6a990136774ecdd881a1da","c9958eb32126a3843deedda8c22fb97024aa5d6dd588b90af2d7f2bfac540f23","950fb67a59be4c2dbe69a5786292e60a5cb0e8612e0e223537784c731af55db1","e927c2c13c4eaf0a7f17e6022eee8519eb29ef42c4c13a31e81a611ab8c95577","07ca44e8d8288e69afdec7a31fa408ce6ab90d4f3d620006701d5544646da6aa","70246ad95ad8a22bdfe806cb5d383a26c0c6e58e7207ab9c431f1cb175aca657","f00f3aa5d64ff46e600648b55a79dcd1333458f7a10da2ed594d9f0a44b76d0b","772d8d5eb158b6c92412c03228bd9902ccb1457d7a705b8129814a5d1a6308fc","4e4475fba4ed93a72f167b061cd94a2e171b82695c56de9899275e880e06ba41","97c5f5d580ab2e4decd0a3135204050f9b97cd7908c5a8fbc041eadede79b2fa","49b2375c586882c3ac7f57eba86680ff9742a8d8cb2fe25fe54d1b9673690d41","802e797bcab5663b2c9f63f51bdf67eff7c41bc64c0fd65e6da3e7941359e2f7","f97939cd243089f1b611457c08e7e4180b070494b3409c92daae451113d5cee0","3ecfccf916fea7c6c34394413b55eb70e817a73e39b4417d6573e523784e3f8e","7f1025a79ac3f9d1d61315c7a82b0d449feac81fdb399f05b76efd7acb5cff22","6459054aabb306821a043e02b89d54da508e3a6966601a41e71c166e4ea1474f","05c97cddbaf99978f83d96de2d8af86aded9332592f08ce4a284d72d0952c391","71bc9bc7afa31a36fb61f66a668b44ee0e7c9ed0f2f364ca0185ffff8bc8f174","bbc183d2d69f4b59fd4dd8799ffdf4eb91173d1c4ad71cce91a3811c021bf80c","7b6ff760c8a240b40dab6e4419b989f06a5b782f4710d2967e67c695ef3e93c4","8dbc4134a4b3623fc476be5f36de35c40f2768e2e3d9ed437e0d5f1c4cd850f6","d97cc318e24afd656c6a749ff37537691939eab81a7e352a245472cdc771c643","3ceeb1a114a85d03997d2c611c45cf3c5f26eeb63dd9b5fd9dc9eb04af98b2a4","eb8b35932068daa1ca6199109bf932fd0ceec9abd68506034cf8573e96ff7d09","f974e4a06953682a2c15d5bd5114c0284d5abf8bc0fe4da25cb9159427b70072","443fbe38a293542919fdeb3118772f4c0096681bbc0c59bc6b9939ddee8dd066","94404c4a878fe291e7578a2a80264c6f18e9f1933fbb57e48f0eb368672e389c","5c1b7f03aa88be854bc15810bfd5bd5a1943c5a7620e1c53eddd2a013996343e","f416c9c3eee9d47ff49132c34f96b9180e50485d435d5748f0e8b72521d28d2e","b4a49b80b0c625e4c7a9d6fcd95cd7d6a94ca6116b056d144de0cf70c03e4697","60a86278bd85866c81bc8e48d23659279b7a2d5231b06799498455586f7c8138","01aa917531e116485beca44a14970834687b857757159769c16b228eb1e49c5f","fbcde1fdade133b4a976480c0d4c692e030306f53909d7765dfef98436dec777","4f1ce48766482ed4c19da9b1103f87690abb7ba0a2885a9816c852bfad6881a1","187a6fdbdecb972510b7555f3caacb44b58415da8d5825d03a583c4b73fde4cf","d4c3250105a612202289b3a266bb7e323db144f6b9414f9dea85c531c098b811","18e2ae9d03e8bdc58ffecd37018bdb33969b1804a24de412f3c866324904b485","741067675daa6d4334a2dc80a4452ca3850e89d5852e330db7cb2b5f867173b1","a1c8542ed1189091dd39e732e4390882a9bcd15c0ca093f6e9483eba4e37573f","131b1475d2045f20fb9f43b7aa6b7cb51f25250b5e4c6a1d4aa3cf4dd1a68793","3a17f09634c50cce884721f54fd9e7b98e03ac505889c560876291fcf8a09e90","32531dfbb0cdc4525296648f53b2b5c39b64282791e2a8c765712e49e6461046","0ce1b2237c1c3df49748d61568160d780d7b26693bd9feb3acb0744a152cd86d","e489985388e2c71d3542612685b4a7db326922b57ac880f299da7026a4e8a117","76264a4df0b7c78b7b12dfaedc05d9f1016f27be1f3d0836417686ff6757f659",{"version":"272692898cec41af73cb5b65f4197a7076007aecd30c81514d32fdb933483335","affectsGlobalScope":true},"fd1b9d883b9446f1e1da1e1033a6a98995c25fbf3c10818a78960e2f2917d10c","19252079538942a69be1645e153f7dbbc1ef56b4f983c633bf31fe26aeac32cd","bc11f3ac00ac060462597add171220aed628c393f2782ac75dd29ff1e0db871c","616775f16134fa9d01fc677ad3f76e68c051a056c22ab552c64cc281a9686790","65c24a8baa2cca1de069a0ba9fba82a173690f52d7e2d0f1f7542d59d5eb4db0","ec9fd890d681789cb0aa9efbc50b1e0afe76fbf3c49c3ac50ff80e90e29c6bcb","5fbd292aa08208ae99bf06d5da63321fdc768ee43a7a104980963100a3841752","9eac5a6beea91cfb119688bf44a5688b129b804ede186e5e2413572a534c21bb","e81bf06c0600517d8f04cc5de398c28738bfdf04c91fb42ad835bfe6b0d63a23","363996fe13c513a7793aa28ffb05b5d0230db2b3d21b7bfaf21f79e4cde54b4e","b7fff2d004c5879cae335db8f954eb1d61242d9f2d28515e67902032723caeab","5f3dc10ae646f375776b4e028d2bed039a93eebbba105694d8b910feebbe8b9c","bb18bf4a61a17b4a6199eb3938ecfa4a59eb7c40843ad4a82b975ab6f7e3d925","4545c1a1ceca170d5d83452dd7c4994644c35cf676a671412601689d9a62da35","15959543f93f27e8e2b1a012fe28e14b682034757e2d7a6c1f02f87107fc731e","a2d648d333cf67b9aeac5d81a1a379d563a8ffa91ddd61c6179f68de724260ff","2b664c3cc544d0e35276e1fb2d4989f7d4b4027ffc64da34ec83a6ccf2e5c528","a3f41ed1b4f2fc3049394b945a68ae4fdefd49fa1739c32f149d32c0545d67f5","3cd8f0464e0939b47bfccbb9bb474a6d87d57210e304029cd8eb59c63a81935d","47699512e6d8bebf7be488182427189f999affe3addc1c87c882d36b7f2d0b0e","3026abd48e5e312f2328629ede6e0f770d21c3cd32cee705c450e589d015ee09","4a8bae6576783c910147d19ec6bef24fd2a24e83acbbb2043a60eec7134738e6","7663d2c19ce5ef8288c790edba3d45af54e58c84f1b37b1249f6d49d962f3d91","f72ee46ae3f73e6c5ff0da682177251d80500dd423bfd50286124cd0ca11e160","898b714aad9cfd0e546d1ad2c031571de7622bd0f9606a499bee193cf5e7cf0c","94f4c1779dc2bbe0cf909eb8700898b1869ed8563acb3ec26cbe8047d642c269","fedebeae32c5cdd1a85b4e0504a01996e4a8adf3dfa72876920d3dd6e42978e7","5d26aae738fa3efc87c24f6e5ec07c54694e6bcf431cc38d3da7576d6bb35bd6","cdf21eee8007e339b1b9945abf4a7b44930b1d695cc528459e68a3adc39a622e","db036c56f79186da50af66511d37d9fe77fa6793381927292d17f81f787bb195","65c2c49eda6c44aa170bfd449ef6f6970843b005356624a393cc887310752c5c","e769eb743cd01a0b7ffbb59293d2e4fa5848ab39430e196941143af6ecd4569e","68f81dad9e8d7b7aa15f35607a70c8b68798cf579ac44bd85325b8e2f1fb3600","1de80059b8078ea5749941c9f863aa970b4735bdbb003be4925c853a8b6b4450","1d079c37fa53e3c21ed3fa214a27507bda9991f2a41458705b19ed8c2b61173d","94fd3ce628bd94a2caf431e8d85901dbe3a64ab52c0bd1dbe498f63ca18789f7","5835a6e0d7cd2738e56b671af0e561e7c1b4fb77751383672f4b009f4e161d70","c0eeaaa67c85c3bb6c52b629ebbfd3b2292dc67e8c0ffda2fc6cd2f78dc471e6","4b7f74b772140395e7af67c4841be1ab867c11b3b82a51b1aeb692822b76c872","27be6622e2922a1b412eb057faa854831b95db9db5035c3f6d4b677b902ab3b7","b95a6f019095dd1d48fd04965b50dfd63e5743a6e75478343c46d2582a5132bf","c2008605e78208cfa9cd70bd29856b72dda7ad89df5dc895920f8e10bcb9cd0a","b97cb5616d2ab82a98ec9ada7b9e9cabb1f5da880ec50ea2b8dc5baa4cbf3c16",{"version":"16fd66ae997b2f01c972531239da90fbf8ab4022bb145b9587ef746f6cecde5a","affectsGlobalScope":true},{"version":"fc8fbee8f73bf5ffd6ba08ba1c554d6f714c49cae5b5e984afd545ab1b7abe06","affectsGlobalScope":true},"3586f5ea3cc27083a17bd5c9059ede9421d587286d5a47f4341a4c2d00e4fa91","a6df929821e62f4719551f7955b9f42c0cd53c1370aec2dd322e24196a7dfe33","b789bf89eb19c777ed1e956dbad0925ca795701552d22e68fd130a032008b9f9","9269d492817e359123ac64c8205e5d05dab63d71a3a7a229e68b5d9a0e8150bf","f85627475b765dd6a38a5db95c06dd2fd54e0aab882f3bbf855b41cbebc20792","fe93c474ab38ac02e30e3af073412b4f92b740152cf3a751fdaee8cbea982341","2243ccc64224e509b363b0027e4ae4720c14ad3ea0bfdac1357d12fade504e84","1e00b8bf9e3766c958218cd6144ffe08418286f89ff44ba5a2cc830c03dd22c7","4a2572b38a3ee8f0fbd19ea05f9af6b8ffa110d54754acb9ef25a0be68476d63","7a129438cedf12b5f1b5f773a3e96242b7569c95243432dcf12618f80fca5cdc","30ac06db9b6af5453925718fad5aef3f9fa8fa8356f19fd4937d30360615eac8","9f04a3005fc55f6ca1843e3e0ff2d1c70c85accdc54f865decca0916e4c50024","7d174edda64c43878daeacd832b7c9c922274858346ee7bc3d3ebc5133a4ce65","c2c4e36b74333f30eec973f09edbadd77339094f54b550b24a77f7ea13eb3afd","06ff821d1b8e8f91e0c357bd3a91935c379de1987af82658f4c983bdd79e5e29","2096dd30268ccc5173ff3b6bde2fded21f5c495331d4bf0340f06d9218a08b03","bd894069d6bfe248a8658bd1abbb0bc782efa5eae9ba838d2cc46e669a843664","2316112d41469d7fad96608b2584c235de540644fb83daccac230897a8ffccbf","3a2b832012c99669690ca696e4edd54b286afe88a740decd34ee0c4746e7f44d","546090a0f36f3782b41791a34cd8f93953a7c26ef06717e0234c4619f29bf7cc","2a6bb253ae300f2e5f528d03c6742ce500a82358555802bd867c204cf9c52c5d","7410fe9f3ee7d6edb99a996587ff604695600220e176cef8cca207164e25edf4","42c169fb8c2d42f4f668c624a9a11e719d5d07dacbebb63cbcf7ef365b0a75b3","a80b7bc4eda856374c26a56f6f25297f4c393309d4c4548002a5238cd57b2b66","791b7d18616176562896692cdeff84662d2b2ffe3fc33fce2ce338eaa8a8288e","571b2640f0cf541dfed72c433706ad1c70fb55ed60763343aa617e150fbb036e","6a2372186491f911527a890d92ac12b88dec29f1c0cec7fce93745aba3253fde","764663dc82cb931c465b48ecd2af189e75ef8a990aa2c66345752ee2c9a09658","d17fbcbc6b2a1be492dfeeeacb5de8f70195edd8ac9d03103f80cbb0dfd11d8c","aa0a517397b2fa1caa5da6ea8e4af61da1c13f46a69f09cdc28faa04f4aefe4b","c9123e6eb82f0a36584b7ef42fccc4c84d70496adfa8453c29d55b5bc27fb201","ae0d70b4f8a3a43cb0a5a89859aca3611f2789a3bca6a387f9deab912b7605b0","966b0f7789547bb149ad553f5a8c0d7b4406eceac50991aaad8a12643f3aec71","84d4c98bdfaab399e277fccd84fbdc6b6207527800caa469261c08f495f2d393","b38878f5783c1fecc4758d15e3abde33727a4a96bed0029c1f4578d0d2f54dee","63c02f14bfa4415c02a9f1632d90e516f4fc3e7cbd1a4f5102b7f0c3abbffd6f","c81f05d3814cd98ac43d6a929418b73db52e7cd937b91b3af50fe2e632e405b3","923d576257c79d4aa6dc79410a001317b67a013493bb1010349dbdbac01e74f6","8d73cc5804667613ff43ce18e0952cc4e8c5cf93955ac633ad242ab853457e50",{"version":"e037831a417fdac9f6578b271f18f5bc70ab946121a3d9d3f6804f25a5944871","signature":"2cc743b624d6891f9275f11f76fedfe235af04641c806e7dc65e55740db4dd29"},"70b3cf5c5122849e757a21b3a4ec8cac43d06a133f161acf52189c38179badde",{"version":"64d4b35c5456adf258d2cf56c341e203a073253f229ef3208fc0d5020253b241","affectsGlobalScope":true},"ee7d8894904b465b072be0d2e4b45cf6b887cdba16a467645c4e200982ece7ea","dca41e86e89dfb2e85e6935260250f02eb6683b86c2fa16bec729ddd1bcd9b4b","7852500a7dc3f9cb6b73d619f6e0249119211ea662fd5e16c59ee5aba3deeb80"],"root":[350,351,355,367,368,374,376,377,[380,386]],"options":{"allowJs":true,"esModuleInterop":true,"jsx":1,"module":99,"skipLibCheck":true,"strict":true,"strictNullChecks":true},"fileIdsList":[[125],[125,134,369],[97,125,132],[125,388,389,390],[82,125],[85,125],[86,91,125],[87,97,98,105,114,124,125],[87,88,97,105,125],[89,125],[90,91,98,106,125],[91,114,121,125],[92,94,97,105,125],[93,125],[94,95,125],[96,97,125],[97,125],[97,98,99,114,124,125],[97,98,99,114,125],[125,129],[100,105,114,124,125],[97,98,100,101,105,114,121,124,125],[100,102,114,121,124,125],[82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131],[97,103,125],[104,124,125],[94,97,105,114,125],[106,125],[107,125],[85,108,125],[109,123,125,129],[110,125],[111,125],[97,112,125],[112,113,125,127],[97,114,115,116,125],[114,116,125],[114,115,125],[117,125],[118,125],[97,119,120,125],[119,120,125],[91,105,114,121,125],[122,125],[105,123,125],[86,100,111,124,125],[91,125],[114,125,126],[125,127],[125,128],[86,91,97,99,108,114,124,125,127,129],[114,125,130],[75,125,139,140,141],[75,125,139,140],[75,125],[125,134],[75,79,125,137,301,344],[75,79,125,136,301,344],[71,72,73,74,125],[72,73,125,133],[125,371,372],[125,371],[75,125,378],[80,125],[125,305],[125,307,308,309,310],[125,312],[125,147,156,162,164,301],[125,147,154,158,166,177],[125,156],[125,156,278],[125,211,226,242,347],[125,250],[125,135,147,156,160,165,177,209,211,214,234,244,301],[125,147,156,163,197,207,275,276,347],[125,163,347],[125,156,207,208,209,347],[125,156,163,197,347],[125,347],[125,163,164,347],[85,125,132],[75,125,227,228,229,247,248],[125,218],[75,125,137,227],[125,217,219,322],[75,125,227,228,245],[125,223,248,332,333],[75,125,227],[125,171,331],[85,125,132,171,217,218,219],[75,125,245,248],[125,245,247],[125,245,246,248],[85,125,132,157,166,214,215],[125,235],[75,125,148,325],[75,124,125,132],[75,125,163,195],[75,125,163],[125,193,198],[75,125,194,304],[125,352],[75,79,100,125,132,134,136,137,301,342,343],[125,301],[125,146],[125,294,295,296,297,298,299],[125,296],[75,125,194,227,304],[75,125,227,302,304],[75,125,227,304],[100,125,132,157,304],[100,125,132,155,166,167,185,216,220,221,244,245],[125,215,216,220,228,230,231,232,233,236,237,238,239,240,241,347],[111,125,132,134,156,185,187,189,214,244,301,347],[100,125,132,157,158,171,172,217],[100,125,132,156,158],[100,114,125,132,155,157,158],[100,111,124,125,132,146,148,155,156,157,158,163,166,167,168,178,179,181,184,185,187,188,189,213,214,245,253,255,258,260,263,265,266,267,301],[100,114,125,132],[125,147,148,149,155,301,304,347],[100,114,124,125,132,152,277,279,280,347],[111,124,125,132,152,155,157,175,179,181,182,183,187,214,258,268,270,275,290,291],[125,156,160,214],[125,155,156],[125,168,259],[125,261],[125,259],[125,261,264],[125,261,262],[125,151,152],[125,151,190],[125,151],[125,153,168,257],[125,256],[125,152,153],[125,153,254],[125,152],[125,244],[100,125,132,155,167,186,205,211,222,225,243,245],[125,199,200,201,202,203,204,223,224,248,302],[125,252],[100,125,132,155,167,186,191,249,251,253,301,304],[100,124,125,132,148,155,156,213],[125,210],[100,125,132,283,289],[125,178,213,304],[125,275,284,290,293],[100,125,160,275,283,285],[125,147,156,178,188,287],[100,125,132,156,163,188,271,281,282,286,287,288],[125,135,185,186,301,304],[100,111,124,125,132,153,155,157,160,165,166,167,175,178,179,181,182,183,184,187,189,213,214,255,268,269,304],[100,125,132,155,156,160,270,292],[100,125,132,157,166],[75,100,111,125,132,146,148,155,158,167,184,185,187,189,252,301,304],[100,111,124,125,132,150,153,154,157],[125,151,212],[100,125,132,151,166,167],[100,125,132,156,168],[100,125,132],[125,171],[125,170],[125,172],[125,156,169,171,175],[125,156,169,171],[100,125,132,150,156,157,172,173,174],[75,125,245,246,247],[125,206],[125,134,148],[75,125,134,181],[75,125,134,135,184,189,301,304],[75,125,148],[125,148,325,326],[75,125,198],[75,111,124,125,132,146,192,194,196,197,304],[125,157,163,181],[111,125,132],[125,180],[75,98,100,111,125,132,146,198,207,301,302,303],[70,75,76,77,78,125,136,137,301,344],[125,272,273,274],[125,272],[125,314],[125,316],[125,318],[125,353],[125,320],[125,323],[125,327],[79,81,125,301,306,311,313,315,317,319,321,324,328,330,335,336,338,345,346,347],[125,329],[125,334],[125,194],[125,337],[85,125,172,173,174,175,339,340,341,344],[125,132],[75,79,100,102,111,125,132,134,136,137,138,141,146,158,293,300,304,344],[125,142,143],[125,357,358,359,360,361,362,363,364,365],[125,357,358],[125,358,360],[125,358],[125,357],[125,300,385],[125,348,351,355,367,381,382,383],[125,330,351,374],[125,375],[125,134,330,351,367,368,376],[125,330,351,374,376,377,380],[125,134,378,379],[125,134,374,375,379],[125,134,367,370,373],[125,354],[125,356,366],[125,348,349]],"referencedMap":[[303,1],[370,2],[387,3],[388,1],[391,4],[389,1],[390,1],[82,5],[83,5],[85,6],[86,7],[87,8],[88,9],[89,10],[90,11],[91,12],[92,13],[93,14],[94,15],[95,15],[96,16],[97,17],[98,18],[99,19],[84,20],[131,1],[100,21],[101,22],[102,23],[132,24],[103,25],[104,26],[105,27],[106,28],[107,29],[108,30],[109,31],[110,32],[111,33],[112,34],[113,35],[114,36],[116,37],[115,38],[117,39],[118,40],[119,41],[120,42],[121,43],[122,44],[123,45],[124,46],[125,47],[126,48],[127,49],[128,50],[129,51],[130,52],[73,1],[140,53],[141,54],[139,55],[138,56],[136,57],[137,58],[71,1],[75,59],[227,55],[133,1],[134,60],[369,56],[74,1],[373,61],[372,62],[356,1],[371,1],[72,1],[375,55],[379,63],[378,56],[81,64],[306,65],[311,66],[313,67],[163,68],[178,69],[276,70],[209,1],[279,71],[243,72],[251,73],[235,74],[277,75],[164,76],[208,1],[210,77],[234,1],[278,78],[185,79],[165,80],[189,79],[179,79],[149,79],[233,81],[154,1],[230,82],[322,83],[228,84],[323,85],[215,1],[231,86],[334,87],[239,88],[333,1],[331,1],[332,89],[232,56],[220,90],[229,91],[246,92],[247,93],[238,1],[216,94],[236,95],[237,88],[326,96],[329,97],[196,98],[195,99],[194,100],[337,55],[193,101],[170,1],[340,1],[353,102],[352,1],[343,1],[342,55],[344,103],[145,1],[271,1],[177,104],[147,105],[294,1],[295,1],[297,1],[300,106],[296,1],[298,107],[299,107],[162,1],[176,1],[305,108],[314,109],[318,110],[158,111],[222,112],[221,1],[242,113],[240,1],[241,1],[245,114],[218,115],[157,116],[183,117],[268,118],[150,119],[156,120],[146,70],[281,121],[292,122],[280,1],[291,123],[184,1],[168,124],[260,125],[259,1],[267,126],[261,127],[265,128],[266,129],[264,127],[263,129],[262,127],[205,130],[190,130],[254,131],[191,131],[152,132],[151,1],[258,133],[257,134],[256,135],[255,136],[153,137],[226,138],[244,139],[225,140],[250,141],[252,142],[249,140],[186,137],[135,1],[269,143],[211,144],[290,145],[214,146],[285,147],[166,1],[286,148],[288,149],[289,150],[284,1],[283,119],[187,151],[270,152],[293,153],[159,1],[161,1],[167,154],[253,155],[155,156],[160,1],[213,157],[212,158],[169,159],[219,160],[217,161],[171,162],[173,163],[341,1],[172,164],[174,165],[308,1],[309,1],[307,1],[310,1],[339,1],[175,166],[224,55],[80,1],[248,167],[197,1],[207,168],[316,55],[325,169],[204,55],[320,88],[203,170],[302,171],[202,172],[148,1],[327,173],[200,55],[201,55],[192,1],[206,1],[199,174],[198,175],[188,176],[182,177],[287,1],[181,178],[180,1],[312,1],[223,55],[304,179],[70,1],[79,180],[76,55],[77,1],[78,1],[282,47],[275,181],[274,1],[273,182],[272,1],[315,183],[317,184],[319,185],[354,186],[321,187],[324,188],[349,189],[328,189],[348,190],[330,191],[335,192],[336,193],[338,194],[345,195],[347,1],[346,196],[301,197],[142,1],[143,1],[144,198],[366,199],[359,200],[361,201],[362,200],[363,202],[364,202],[357,1],[365,203],[358,1],[360,1],[68,1],[69,1],[12,1],[13,1],[15,1],[14,1],[2,1],[16,1],[17,1],[18,1],[19,1],[20,1],[21,1],[22,1],[23,1],[3,1],[24,1],[4,1],[25,1],[29,1],[26,1],[27,1],[28,1],[30,1],[31,1],[32,1],[5,1],[33,1],[34,1],[35,1],[36,1],[6,1],[40,1],[37,1],[38,1],[39,1],[41,1],[7,1],[42,1],[47,1],[48,1],[43,1],[44,1],[45,1],[46,1],[8,1],[52,1],[49,1],[50,1],[51,1],[53,1],[9,1],[54,1],[55,1],[56,1],[59,1],[57,1],[58,1],[60,1],[61,1],[10,1],[1,1],[62,1],[11,1],[66,1],[64,1],[63,1],[67,1],[65,1],[386,204],[384,205],[385,206],[376,207],[377,208],[381,209],[382,1],[383,210],[380,211],[374,212],[351,1],[355,213],[367,214],[350,215],[368,1]],"exportedModulesMap":[[303,1],[370,2],[387,3],[388,1],[391,4],[389,1],[390,1],[82,5],[83,5],[85,6],[86,7],[87,8],[88,9],[89,10],[90,11],[91,12],[92,13],[93,14],[94,15],[95,15],[96,16],[97,17],[98,18],[99,19],[84,20],[131,1],[100,21],[101,22],[102,23],[132,24],[103,25],[104,26],[105,27],[106,28],[107,29],[108,30],[109,31],[110,32],[111,33],[112,34],[113,35],[114,36],[116,37],[115,38],[117,39],[118,40],[119,41],[120,42],[121,43],[122,44],[123,45],[124,46],[125,47],[126,48],[127,49],[128,50],[129,51],[130,52],[73,1],[140,53],[141,54],[139,55],[138,56],[136,57],[137,58],[71,1],[75,59],[227,55],[133,1],[134,60],[369,56],[74,1],[373,61],[372,62],[356,1],[371,1],[72,1],[375,55],[379,63],[378,56],[81,64],[306,65],[311,66],[313,67],[163,68],[178,69],[276,70],[209,1],[279,71],[243,72],[251,73],[235,74],[277,75],[164,76],[208,1],[210,77],[234,1],[278,78],[185,79],[165,80],[189,79],[179,79],[149,79],[233,81],[154,1],[230,82],[322,83],[228,84],[323,85],[215,1],[231,86],[334,87],[239,88],[333,1],[331,1],[332,89],[232,56],[220,90],[229,91],[246,92],[247,93],[238,1],[216,94],[236,95],[237,88],[326,96],[329,97],[196,98],[195,99],[194,100],[337,55],[193,101],[170,1],[340,1],[353,102],[352,1],[343,1],[342,55],[344,103],[145,1],[271,1],[177,104],[147,105],[294,1],[295,1],[297,1],[300,106],[296,1],[298,107],[299,107],[162,1],[176,1],[305,108],[314,109],[318,110],[158,111],[222,112],[221,1],[242,113],[240,1],[241,1],[245,114],[218,115],[157,116],[183,117],[268,118],[150,119],[156,120],[146,70],[281,121],[292,122],[280,1],[291,123],[184,1],[168,124],[260,125],[259,1],[267,126],[261,127],[265,128],[266,129],[264,127],[263,129],[262,127],[205,130],[190,130],[254,131],[191,131],[152,132],[151,1],[258,133],[257,134],[256,135],[255,136],[153,137],[226,138],[244,139],[225,140],[250,141],[252,142],[249,140],[186,137],[135,1],[269,143],[211,144],[290,145],[214,146],[285,147],[166,1],[286,148],[288,149],[289,150],[284,1],[283,119],[187,151],[270,152],[293,153],[159,1],[161,1],[167,154],[253,155],[155,156],[160,1],[213,157],[212,158],[169,159],[219,160],[217,161],[171,162],[173,163],[341,1],[172,164],[174,165],[308,1],[309,1],[307,1],[310,1],[339,1],[175,166],[224,55],[80,1],[248,167],[197,1],[207,168],[316,55],[325,169],[204,55],[320,88],[203,170],[302,171],[202,172],[148,1],[327,173],[200,55],[201,55],[192,1],[206,1],[199,174],[198,175],[188,176],[182,177],[287,1],[181,178],[180,1],[312,1],[223,55],[304,179],[70,1],[79,180],[76,55],[77,1],[78,1],[282,47],[275,181],[274,1],[273,182],[272,1],[315,183],[317,184],[319,185],[354,186],[321,187],[324,188],[349,189],[328,189],[348,190],[330,191],[335,192],[336,193],[338,194],[345,195],[347,1],[346,196],[301,197],[142,1],[143,1],[144,198],[366,199],[359,200],[361,201],[362,200],[363,202],[364,202],[357,1],[365,203],[358,1],[360,1],[68,1],[69,1],[12,1],[13,1],[15,1],[14,1],[2,1],[16,1],[17,1],[18,1],[19,1],[20,1],[21,1],[22,1],[23,1],[3,1],[24,1],[4,1],[25,1],[29,1],[26,1],[27,1],[28,1],[30,1],[31,1],[32,1],[5,1],[33,1],[34,1],[35,1],[36,1],[6,1],[40,1],[37,1],[38,1],[39,1],[41,1],[7,1],[42,1],[47,1],[48,1],[43,1],[44,1],[45,1],[46,1],[8,1],[52,1],[49,1],[50,1],[51,1],[53,1],[9,1],[54,1],[55,1],[56,1],[59,1],[57,1],[58,1],[60,1],[61,1],[10,1],[1,1],[62,1],[11,1],[66,1],[64,1],[63,1],[67,1],[65,1],[384,205],[385,206],[376,207],[377,208],[381,209],[382,1],[383,210],[380,211],[374,212],[351,1],[355,213],[367,214],[350,215],[368,1]],"semanticDiagnosticsPerFile":[303,370,387,388,391,389,390,82,83,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,84,131,100,101,102,132,103,104,105,106,107,108,109,110,111,112,113,114,116,115,117,118,119,120,121,122,123,124,125,126,127,128,129,130,73,140,141,139,138,136,137,71,75,227,133,134,369,74,373,372,356,371,72,375,379,378,81,306,311,313,163,178,276,209,279,243,251,235,277,164,208,210,234,278,185,165,189,179,149,233,154,230,322,228,323,215,231,334,239,333,331,332,232,220,229,246,247,238,216,236,237,326,329,196,195,194,337,193,170,340,353,352,343,342,344,145,271,177,147,294,295,297,300,296,298,299,162,176,305,314,318,158,222,221,242,240,241,245,218,157,183,268,150,156,146,281,292,280,291,184,168,260,259,267,261,265,266,264,263,262,205,190,254,191,152,151,258,257,256,255,153,226,244,225,250,252,249,186,135,269,211,290,214,285,166,286,288,289,284,283,187,270,293,159,161,167,253,155,160,213,212,169,219,217,171,173,341,172,174,308,309,307,310,339,175,224,80,248,197,207,316,325,204,320,203,302,202,148,327,200,201,192,206,199,198,188,182,287,181,180,312,223,304,70,79,76,77,78,282,275,274,273,272,315,317,319,354,321,324,349,328,348,330,335,336,338,345,347,346,301,142,143,144,366,359,361,362,363,364,357,365,358,360,68,69,12,13,15,14,2,16,17,18,19,20,21,22,23,3,24,4,25,29,26,27,28,30,31,32,5,33,34,35,36,6,40,37,38,39,41,7,42,47,48,43,44,45,46,8,52,49,50,51,53,9,54,55,56,59,57,58,60,61,10,1,62,11,66,64,63,67,65,386,384,385,376,377,381,382,383,380,374,351,355,367,350,368],"affectedFilesPendingEmit":[386,384,385,376,377,381,382,383,380,374,351,355,367,368]},"version":"5.4.5"}
\ No newline at end of file
diff --git a/templates/next-template/types/nav.ts b/templates/next-template/types/nav.ts
deleted file mode 100644
index 7796c30f..00000000
--- a/templates/next-template/types/nav.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface NavItem {
-   title: string
-   href?: string
-   disabled?: boolean
-   external?: boolean
-}
diff --git a/turbo.json b/turbo.json
index 36a31ed6..7e192add 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,35 +1,41 @@
 {
-  "$schema": "https://turbo.build/schema.json",
-  "tasks": {
-    "build": {
-      "dependsOn": ["^build"],
-      "inputs": ["$TURBO_DEFAULT$", ".env", ".env.*"],
-      "outputs": [".next/**", "!.next/cache/**"]
-    },
-    "dev": {
-      "cache": false,
-      "persistent": true
-    },
-    "preview": {
-      "env": ["NEXT_PUBLIC_APP_URL"],
-      "outputs": ["dist/**", ".next/**"]
-    },
-    "start": {
-      "dependsOn": ["^build"]
-    },
-    "check": {
-      "cache": false
-    },
-    "typecheck": {},
-    "lint": {
-      "dependsOn": ["^lint"]
-    },
-    "lint:fix": {
-      "dependsOn": ["^lint:fix"]
-    },
-    "test": {
-      "cache": false,
-      "outputs": []
-    }
-  }
+   "$schema": "https://turbo.build/schema.json",
+   "tasks": {
+      "build": {
+         "dependsOn": ["^build"],
+         "inputs": [
+            "$TURBO_DEFAULT$",
+            ".env",
+            ".env.*",
+            "V0_URL",
+            "V0_EDIT_SECRET"
+         ],
+         "outputs": [".next/**", "!.next/cache/**"]
+      },
+      "dev": {
+         "cache": false,
+         "persistent": true
+      },
+      "preview": {
+         "env": ["NEXT_PUBLIC_APP_URL"],
+         "outputs": ["dist/**", ".next/**"]
+      },
+      "start": {
+         "dependsOn": ["^build"]
+      },
+      "check-types": {
+         "cache": false
+      },
+      "typecheck": {},
+      "check": {
+         "dependsOn": ["^lint"]
+      },
+      "check:fix": {
+         "dependsOn": ["^lint:fix"]
+      },
+      "test": {
+         "cache": false,
+         "outputs": []
+      }
+   }
 }